chore(release): 4.20.1 [skip ci]

## [4.20.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.20.0...v4.20.1) (2025-10-19) ### Bug Fixes * **homepage:** correct positioning of progression arrows in Your Journey section ([3fff9ef](3fff9ef140)) ### Code Refactoring * **homepage:** move What You'll Learn above tutorial ([ca1c6d8](ca1c6d8602))
fix(homepage): correct positioning of progression arrows in Your Journey section
2025-10-19 18:51:24 +00:00 · 2025-10-19 13:50:23 -05:00 · 2025-10-19 13:49:21 -05:00 · 2025-10-19 18:47:56 +00:00 · 2025-10-19 13:46:54 -05:00
4 changed files with 54 additions and 20 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,22 @@
+## [4.20.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.20.0...v4.20.1) (2025-10-19)
+
+
+### Bug Fixes
+
+* **homepage:** correct positioning of progression arrows in Your Journey section ([3fff9ef](https://github.com/antialias/soroban-abacus-flashcards/commit/3fff9ef140bf1f462042f8319ed6c5e2a376e4ba))
+
+
+### Code Refactoring
+
+* **homepage:** move What You'll Learn above tutorial ([ca1c6d8](https://github.com/antialias/soroban-abacus-flashcards/commit/ca1c6d86029c891e019a96ba161e49b08b5be1bf))
+
+## [4.20.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.19.0...v4.20.0) (2025-10-19)
+
+
+### Features
+
+* **tutorial:** add hideTooltip prop and improve dark mode coaching bar ([1ee25b3](https://github.com/antialias/soroban-abacus-flashcards/commit/1ee25b3dd2f0ee9dd7ed571ba818b7ca5a247f85))
+
 ## [4.19.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.18.1...v4.19.0) (2025-10-19)


--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -219,21 +219,12 @@ export default function HomePage() {
                mx: 'auto',
              })}
            >
-              <TutorialPlayer
-                tutorial={friendsOf5Tutorial}
-                isDebugMode={false}
-                showDebugPanel={false}
-                hideNavigation={true}
-                abacusColumns={2}
-                theme="dark"
-              />
-
-              {/* What you'll learn - below tutorial */}
+              {/* What you'll learn - above tutorial */}
              <div
                className={css({
-                  mt: '8',
-                  pt: '6',
-                  borderTop: '1px solid',
+                  mb: '8',
+                  pb: '6',
+                  borderBottom: '1px solid',
                  borderColor: 'gray.700',
                })}
              >
@@ -262,6 +253,16 @@ export default function HomePage() {
                  ))}
                </div>
              </div>
+
+              <TutorialPlayer
+                tutorial={friendsOf5Tutorial}
+                isDebugMode={false}
+                showDebugPanel={false}
+                hideNavigation={true}
+                hideTooltip={true}
+                abacusColumns={2}
+                theme="dark"
+              />
            </div>
          </section>

@@ -407,7 +408,15 @@ export default function HomePage() {
                  { level: '1 Kyu', label: 'Advanced', color: 'purple.400' },
                  { level: 'Dan', label: 'Master', color: 'yellow.400' },
                ].map((stage, i) => (
-                  <div key={i} className={stack({ gap: '2', textAlign: 'center', flex: '1' })}>
+                  <div
+                    key={i}
+                    className={stack({
+                      gap: '2',
+                      textAlign: 'center',
+                      flex: '1',
+                      position: 'relative',
+                    })}
+                  >
                    <div
                      className={css({
                        fontSize: 'xl',
--- a/apps/web/src/components/tutorial/TutorialPlayer.tsx
+++ b/apps/web/src/components/tutorial/TutorialPlayer.tsx
@@ -216,6 +216,7 @@ interface TutorialPlayerProps {
  isDebugMode?: boolean
  showDebugPanel?: boolean
  hideNavigation?: boolean
+  hideTooltip?: boolean
  abacusColumns?: number
  theme?: 'light' | 'dark'
  onStepChange?: (stepIndex: number, step: TutorialStep) => void
@@ -231,6 +232,7 @@ function TutorialPlayerContent({
  isDebugMode = false,
  showDebugPanel = false,
  hideNavigation = false,
+  hideTooltip = false,
  abacusColumns = 5,
  theme = 'light',
  onStepChange,
@@ -1139,9 +1141,9 @@ function TutorialPlayerContent({
        <div
          className={css({
            borderBottom: '1px solid',
-            borderColor: 'gray.200',
+            borderColor: theme === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'gray.200',
            p: 4,
-            bg: 'white',
+            bg: theme === 'dark' ? 'rgba(30, 30, 40, 0.6)' : 'white',
          })}
        >
          <div
@@ -1410,7 +1412,8 @@ function TutorialPlayerContent({
              </div>

              {/* Multi-step instructions panel */}
-              {currentStep.multiStepInstructions &&
+              {!hideTooltip &&
+                currentStep.multiStepInstructions &&
                currentStep.multiStepInstructions.length > 0 && (
                  <div
                    className={css({
@@ -1546,7 +1549,10 @@ function TutorialPlayerContent({
                              className={css({
                                mb: 1,
                                fontWeight: 'bold',
-                                color: theme === 'dark' ? 'yellow.300' : 'yellow.900',
+                                color: theme === 'dark' ? 'yellow.200' : 'yellow.900',
+                                textShadow:
+                                  theme === 'dark' ? '0 0 12px rgba(251, 191, 36, 0.4)' : 'none',
+                                fontSize: theme === 'dark' ? 'lg' : 'base',
                              })}
                            >
                              {currentInstruction}
@@ -1664,7 +1670,7 @@ function TutorialPlayerContent({
              </div>

              {/* Tooltip */}
-              {currentStep.tooltip && (
+              {!hideTooltip && currentStep.tooltip && (
                <div
                  className={css({
                    maxW: '500px',
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "soroban-monorepo",
-  "version": "4.19.0",
+  "version": "4.20.1",
  "private": true,
  "description": "Beautiful Soroban Flashcard Generator - Monorepo",
  "workspaces": [
Author	SHA1	Message	Date
semantic-release-bot	3a5dc0f1c8	chore(release): 4.20.1 [skip ci] ## [4.20.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.20.0...v4.20.1) (2025-10-19) ### Bug Fixes * homepage: correct positioning of progression arrows in Your Journey section ([`3fff9ef`](`3fff9ef140`)) ### Code Refactoring * homepage: move What You'll Learn above tutorial ([`ca1c6d8`](`ca1c6d8602`))	2025-10-19 18:51:24 +00:00
Thomas Hallock	3fff9ef140	fix(homepage): correct positioning of progression arrows in Your Journey section Added position: 'relative' to parent containers to properly anchor the absolutely positioned arrow elements between progression levels. This ensures the arrows display correctly between stages. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-19 13:50:23 -05:00
Thomas Hallock	ca1c6d8602	refactor(homepage): move What You'll Learn above tutorial Repositioned the learning objectives section to appear before the interactive tutorial for better visual hierarchy and user flow. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-19 13:49:21 -05:00
semantic-release-bot	e6bcf20807	chore(release): 4.20.0 [skip ci] ## [4.20.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.19.0...v4.20.0) (2025-10-19) ### Features * tutorial: add hideTooltip prop and improve dark mode coaching bar ([`1ee25b3`](`1ee25b3dd2`))	2025-10-19 18:47:56 +00:00
Thomas Hallock	1ee25b3dd2	feat(tutorial): add hideTooltip prop and improve dark mode coaching bar - Added hideTooltip prop to TutorialPlayer to optionally hide guidance panels - Enhanced coaching bar text for dark mode (brighter yellow with glow effect) - Applied hideTooltip to homepage tutorial for cleaner presentation - Updated dark mode header background for better integration These changes are specific to the homepage dark theme instance while preserving default behavior for all other uses of the tutorial system. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-19 13:46:54 -05:00