chore(release): 4.47.0 [skip ci]

## [4.47.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.46.2...v4.47.0) (2025-10-20)

### Features

* **nav:** add transparent nav bar with borders when hero visible ([463841e](463841e191))

### Bug Fixes

* **hero:** use Number.isNaN instead of global isNaN ([c229faf](c229faffac))

### Styles

* **hero-abacus:** add purple bead colors for dark theme ([721dfe4](721dfe426d))
* **hero:** adjust spacing between title, subtitle, and abacus ([3a3706c](3a3706cc6f))

CHANGELOG.md

@@ -1,3 +1,21 @@
+## [4.47.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.46.2...v4.47.0) (2025-10-20)
+
+
+### Features
+
+* **nav:** add transparent nav bar with borders when hero visible ([463841e](https://github.com/antialias/soroban-abacus-flashcards/commit/463841e1910f4ddb9af662f036e4efb867836a83))
+
+
+### Bug Fixes
+
+* **hero:** use Number.isNaN instead of global isNaN ([c229faf](https://github.com/antialias/soroban-abacus-flashcards/commit/c229faffac525f3eebeb12155cb5ca4dff744472))
+
+
+### Styles
+
+* **hero-abacus:** add purple bead colors for dark theme ([721dfe4](https://github.com/antialias/soroban-abacus-flashcards/commit/721dfe426db4fe259f6cdeac587d008339df769b))
+* **hero:** adjust spacing between title, subtitle, and abacus ([3a3706c](https://github.com/antialias/soroban-abacus-flashcards/commit/3a3706cc6fb694c7762f065f4ab4996bb8608dc4))
+
 ## [4.46.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.46.1...v4.46.2) (2025-10-20)
 
 

apps/web/src/components/AppNavBar.tsx

@@ -569,17 +569,23 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
     )
   }
 
+  // Check if we should use transparent styling (when hero is visible)
+  const isTransparent = homeHero?.isHeroVisible
+
   return (
     <Tooltip.Provider delayDuration={200}>
       <header
         className={css({
-          bg: 'white',
-          shadow: 'sm',
-          borderBottom: '1px solid',
-          borderColor: 'gray.200',
-          position: 'sticky',
+          bg: isTransparent ? 'transparent' : 'white',
+          shadow: isTransparent ? 'none' : 'sm',
+          borderBottom: isTransparent ? 'none' : '1px solid',
+          borderColor: isTransparent ? 'transparent' : 'gray.200',
+          position: isTransparent ? 'fixed' : 'sticky',
           top: 0,
+          left: 0,
+          right: 0,
           zIndex: 30,
+          transition: 'all 0.3s ease',
         })}
       >
         <div className={container({ maxW: '7xl', px: '4', py: '3' })}>
@@ -653,22 +659,54 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
               <div />
             )}
 
-            <div className={hstack({ gap: '6', alignItems: 'center' })}>
+            <div
+              className={css({
+                display: 'flex',
+                gap: '6',
+                alignItems: 'center',
+                px: isTransparent ? '4' : '0',
+                py: isTransparent ? '2' : '0',
+                rounded: isTransparent ? 'lg' : 'none',
+                border: isTransparent ? '1px solid' : 'none',
+                borderColor: isTransparent ? 'rgba(255, 255, 255, 0.3)' : 'transparent',
+                transition: 'all 0.3s ease',
+              })}
+            >
               {/* Navigation Links */}
-              <nav className={hstack({ gap: '4' })}>
-                <NavLink href="/create" currentPath={pathname}>
+              <nav
+                className={css({
+                  display: 'flex',
+                  gap: '4',
+                  px: isTransparent ? '2' : '0',
+                  py: isTransparent ? '1' : '0',
+                  rounded: isTransparent ? 'md' : 'none',
+                  border: isTransparent ? '1px solid' : 'none',
+                  borderColor: isTransparent ? 'rgba(255, 255, 255, 0.2)' : 'transparent',
+                })}
+              >
+                <NavLink href="/create" currentPath={pathname} isTransparent={isTransparent}>
                   Create
                 </NavLink>
-                <NavLink href="/guide" currentPath={pathname}>
+                <NavLink href="/guide" currentPath={pathname} isTransparent={isTransparent}>
                   Guide
                 </NavLink>
-                <NavLink href="/games" currentPath={pathname}>
+                <NavLink href="/games" currentPath={pathname} isTransparent={isTransparent}>
                   Games
                 </NavLink>
               </nav>
 
-              {/* Abacus Style Dropdown */}
-              <AbacusDisplayDropdown isFullscreen={false} />
+              {/* Abacus Style Dropdown - with border when transparent */}
+              <div
+                className={css({
+                  px: isTransparent ? '2' : '0',
+                  py: isTransparent ? '1' : '0',
+                  rounded: isTransparent ? 'md' : 'none',
+                  border: isTransparent ? '1px solid' : 'none',
+                  borderColor: isTransparent ? 'rgba(255, 255, 255, 0.2)' : 'transparent',
+                })}
+              >
+                <AbacusDisplayDropdown isFullscreen={false} />
+              </div>
             </div>
           </div>
         </div>
@@ -699,10 +737,12 @@ function NavLink({
   href,
   currentPath,
   children,
+  isTransparent,
 }: {
   href: string
   currentPath: string | null
   children: React.ReactNode
+  isTransparent?: boolean
 }) {
   const isActive = currentPath === href || (href !== '/' && currentPath?.startsWith(href))
 
@@ -716,8 +756,20 @@ function NavLink({
         minW: { base: '44px', md: 'auto' },
         fontSize: 'sm',
         fontWeight: 'medium',
-        color: isActive ? 'brand.700' : 'gray.600',
-        bg: isActive ? 'brand.50' : 'transparent',
+        color: isTransparent
+          ? isActive
+            ? 'white'
+            : 'rgba(255, 255, 255, 0.8)'
+          : isActive
+            ? 'brand.700'
+            : 'gray.600',
+        bg: isTransparent
+          ? isActive
+            ? 'rgba(255, 255, 255, 0.15)'
+            : 'transparent'
+          : isActive
+            ? 'brand.50'
+            : 'transparent',
         rounded: 'lg',
         transition: 'all',
         textDecoration: 'none',
@@ -725,8 +777,8 @@ function NavLink({
         alignItems: 'center',
         justifyContent: 'center',
         _hover: {
-          color: isActive ? 'brand.800' : 'gray.900',
-          bg: isActive ? 'brand.100' : 'gray.50',
+          color: isTransparent ? 'white' : isActive ? 'brand.800' : 'gray.900',
+          bg: isTransparent ? 'rgba(255, 255, 255, 0.2)' : isActive ? 'brand.100' : 'gray.50',
         },
       })}
     >

apps/web/src/components/HeroAbacus.tsx

@@ -6,20 +6,20 @@ import { css } from '../../styled-system/css'
 import { useHomeHero } from '../contexts/HomeHeroContext'
 
 export function HeroAbacus() {
-  const { subtitle, abacusValue, setAbacusValue, setIsHeroVisible } = useHomeHero()
+  const { subtitle, abacusValue, setAbacusValue, setIsHeroVisible, isAbacusLoaded } = useHomeHero()
   const appConfig = useAbacusConfig()
   const heroRef = useRef<HTMLDivElement>(null)
 
-  // Dark theme styles for the abacus (matching the mini abacus on homepage)
-  const darkStyles = {
+  // Styling for structural elements (solid, no translucency)
+  const structuralStyles = {
     columnPosts: {
-      fill: 'rgba(255, 255, 255, 0.3)',
-      stroke: 'rgba(255, 255, 255, 0.2)',
+      fill: 'rgb(255, 255, 255)',
+      stroke: 'rgb(200, 200, 200)',
       strokeWidth: 2,
     },
     reckoningBar: {
-      fill: 'rgba(255, 255, 255, 0.4)',
-      stroke: 'rgba(255, 255, 255, 0.25)',
+      fill: 'rgb(255, 255, 255)',
+      stroke: 'rgb(200, 200, 200)',
       strokeWidth: 3,
     },
   }
@@ -43,30 +43,21 @@ export function HeroAbacus() {
     return () => observer.disconnect()
   }, [setIsHeroVisible])
 
-  // Auto-cycle through random numbers (optional - user can also interact)
-  useEffect(() => {
-    const interval = setInterval(() => {
-      const randomNum = Math.floor(Math.random() * 10000) // 0-9999
-      setAbacusValue(randomNum)
-    }, 4000)
-
-    return () => clearInterval(interval)
-  }, [setAbacusValue])
-
   return (
     <div
       ref={heroRef}
       className={css({
-        minHeight: '100vh',
+        height: '100vh',
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',
-        justifyContent: 'center',
+        justifyContent: 'space-between',
         background:
           'linear-gradient(135deg, rgba(17, 24, 39, 1) 0%, rgba(88, 28, 135, 0.3) 50%, rgba(17, 24, 39, 1) 100%)',
         position: 'relative',
         overflow: 'hidden',
         px: '4',
+        py: '12',
       })}
     >
       {/* Background pattern */}
@@ -81,94 +72,91 @@ export function HeroAbacus() {
         })}
       />
 
-      {/* Content */}
+      {/* Title and Subtitle Section - DIRECT CHILD */}
       <div
         className={css({
           position: 'relative',
-          textAlign: 'center',
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'center',
-          justifyContent: 'space-between',
-          height: '100%',
-          py: '12',
+          gap: '2',
+          zIndex: 10,
         })}
       >
-        {/* Title and Subtitle Section */}
-        <div
+        <h1
           className={css({
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            gap: '4',
+            fontSize: { base: '4xl', md: '6xl', lg: '7xl' },
+            fontWeight: 'bold',
+            background: 'linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #fbbf24 100%)',
+            backgroundClip: 'text',
+            color: 'transparent',
           })}
         >
-          <h1
-            className={css({
-              fontSize: { base: '4xl', md: '6xl', lg: '7xl' },
-              fontWeight: 'bold',
-              background: 'linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #fbbf24 100%)',
-              backgroundClip: 'text',
-              color: 'transparent',
-            })}
-          >
-            Abaci One
-          </h1>
-          <p
-            className={css({
-              fontSize: { base: 'xl', md: '2xl' },
-              fontWeight: 'medium',
-              color: 'purple.300',
-              fontStyle: 'italic',
-            })}
-          >
-            {subtitle.text}
-          </p>
-        </div>
+          Abaci One
+        </h1>
+        <p
+          className={css({
+            fontSize: { base: 'xl', md: '2xl' },
+            fontWeight: 'medium',
+            color: 'purple.300',
+            fontStyle: 'italic',
+            marginBottom: '8',
+          })}
+        >
+          {subtitle.text}
+        </p>
+      </div>
 
-        {/* Large Interactive Abacus - centered in remaining space */}
+      {/* Large Interactive Abacus - DIRECT CHILD */}
+      <div
+        className={css({
+          position: 'relative',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flex: '1',
+          width: '100%',
+          zIndex: 10,
+          opacity: isAbacusLoaded ? 1 : 0,
+          transition: 'opacity 0.5s ease-in-out',
+        })}
+      >
         <div
           className={css({
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            flex: '1',
-            width: '100%',
-            py: { base: '12', md: '16', lg: '20' },
+            transform: { base: 'scale(2)', md: 'scale(3)', lg: 'scale(4)' },
+            transformOrigin: 'center center',
+            transition: 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
           })}
         >
-          <div
-            className={css({
-              transform: { base: 'scale(2)', md: 'scale(3)', lg: 'scale(4)' },
-              transformOrigin: 'center center',
-              transition: 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
-            })}
-          >
-            <AbacusReact
-              value={abacusValue}
-              columns={4}
-              beadShape={appConfig.beadShape}
-              showNumbers={true}
-              customStyles={darkStyles}
-            />
-          </div>
+          <AbacusReact
+            value={abacusValue}
+            columns={4}
+            beadShape={appConfig.beadShape}
+            showNumbers={true}
+            interactive={true}
+            animated={true}
+            customStyles={structuralStyles}
+            onValueChange={setAbacusValue}
+          />
         </div>
+      </div>
 
-        {/* Subtle hint to scroll */}
-        <div
-          className={css({
-            fontSize: 'sm',
-            color: 'gray.400',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            gap: '2',
-            animation: 'bounce 2s ease-in-out infinite',
-          })}
-        >
-          <span>Scroll to explore</span>
-          <span>↓</span>
-        </div>
+      {/* Subtle hint to scroll - DIRECT CHILD */}
+      <div
+        className={css({
+          position: 'relative',
+          fontSize: 'sm',
+          color: 'gray.400',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: '2',
+          animation: 'bounce 2s ease-in-out infinite',
+          zIndex: 10,
+        })}
+      >
+        <span>Scroll to explore</span>
+        <span>↓</span>
       </div>
 
       {/* Keyframes for bounce animation */}

apps/web/src/contexts/HomeHeroContext.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import type React from 'react'
-import { createContext, useContext, useEffect, useMemo, useState } from 'react'
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import type { Subtitle } from '../data/abaciOneSubtitles'
 import { getRandomSubtitle, subtitles } from '../data/abaciOneSubtitles'
 
@@ -11,6 +11,7 @@ interface HomeHeroContextValue {
   setAbacusValue: (value: number) => void
   isHeroVisible: boolean
   setIsHeroVisible: (visible: boolean) => void
+  isAbacusLoaded: boolean
 }
 
 const HomeHeroContext = createContext<HomeHeroContextValue | null>(null)
@@ -26,8 +27,58 @@ export function HomeHeroProvider({ children }: { children: React.ReactNode }) {
     setSubtitle(getRandomSubtitle())
   }, [])
 
-  // Shared abacus value (so it stays consistent during morph)
-  const [abacusValue, setAbacusValue] = useState(1234)
+  // Shared abacus value - always start at 0 for SSR/hydration consistency
+  const [abacusValue, setAbacusValue] = useState(0)
+  const [isAbacusLoaded, setIsAbacusLoaded] = useState(false)
+  const isLoadingFromStorage = useRef(false)
+
+  // Load from sessionStorage after mount (client-only, no hydration mismatch)
+  useEffect(() => {
+    console.log('[HeroAbacus] Loading from sessionStorage...')
+    isLoadingFromStorage.current = true // Block saves during load
+
+    const saved = sessionStorage.getItem('heroAbacusValue')
+    console.log('[HeroAbacus] Saved value from storage:', saved)
+
+    if (saved) {
+      const parsedValue = parseInt(saved, 10)
+      console.log('[HeroAbacus] Parsed value:', parsedValue)
+      if (!Number.isNaN(parsedValue)) {
+        console.log('[HeroAbacus] Setting abacus value to:', parsedValue)
+        setAbacusValue(parsedValue)
+      }
+    } else {
+      console.log('[HeroAbacus] No saved value found, staying at 0')
+    }
+
+    // Use setTimeout to ensure the value has been set before we allow saves
+    setTimeout(() => {
+      isLoadingFromStorage.current = false
+      setIsAbacusLoaded(true)
+      console.log('[HeroAbacus] Load complete, allowing saves now and fading in')
+    }, 0)
+  }, [])
+
+  // Persist value to sessionStorage when it changes (but skip during load)
+  useEffect(() => {
+    console.log(
+      '[HeroAbacus] Save effect triggered. Value:',
+      abacusValue,
+      'isLoadingFromStorage:',
+      isLoadingFromStorage.current
+    )
+
+    if (!isLoadingFromStorage.current) {
+      console.log('[HeroAbacus] Saving to sessionStorage:', abacusValue)
+      sessionStorage.setItem('heroAbacusValue', abacusValue.toString())
+      console.log(
+        '[HeroAbacus] Saved successfully. Storage now contains:',
+        sessionStorage.getItem('heroAbacusValue')
+      )
+    } else {
+      console.log('[HeroAbacus] Skipping save (currently loading from storage)')
+    }
+  }, [abacusValue])
 
   // Track hero visibility for nav branding
   const [isHeroVisible, setIsHeroVisible] = useState(true)
@@ -39,8 +90,9 @@ export function HomeHeroProvider({ children }: { children: React.ReactNode }) {
       setAbacusValue,
       isHeroVisible,
       setIsHeroVisible,
+      isAbacusLoaded,
     }),
-    [subtitle, abacusValue, isHeroVisible]
+    [subtitle, abacusValue, isHeroVisible, isAbacusLoaded]
   )
 
   return <HomeHeroContext.Provider value={value}>{children}</HomeHeroContext.Provider>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "soroban-monorepo",
-  "version": "4.46.2",
+  "version": "4.47.0",
   "private": true,
   "description": "Beautiful Soroban Flashcard Generator - Monorepo",
   "workspaces": [