chore(release): 4.46.2 [skip ci]

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

### Bug Fixes

* **types:** properly type HomeHeroContext in AppNavBar ([f9a7cb7](f9a7cb7f05))

CHANGELOG.md

@@ -1,3 +1,17 @@
+## [4.46.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.46.1...v4.46.2) (2025-10-20)
+
+
+### Bug Fixes
+
+* **types:** properly type HomeHeroContext in AppNavBar ([f9a7cb7](https://github.com/antialias/soroban-abacus-flashcards/commit/f9a7cb7f05dfddf291d89212a77ba1c11c00c9c7))
+
+## [4.46.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.46.0...v4.46.1) (2025-10-20)
+
+
+### Bug Fixes
+
+* **hero-abacus:** restructure layout to prevent visual overlap ([02b6c70](https://github.com/antialias/soroban-abacus-flashcards/commit/02b6c70b7a52f7de2954e5e0efddbed64d419d6c))
+
 ## [4.46.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.45.0...v4.46.0) (2025-10-20)
 
 

apps/web/src/components/AppNavBar.tsx

@@ -15,6 +15,11 @@ import { AbacusDisplayDropdown } from './AbacusDisplayDropdown'
 // Import HomeHeroContext for optional usage
 import type { Subtitle } from '../data/abaciOneSubtitles'
 
+type HomeHeroContextValue = {
+  subtitle: Subtitle
+  isHeroVisible: boolean
+} | null
+
 // HomeHeroContext - imported dynamically to avoid circular deps
 let HomeHeroContextModule: any = null
 try {
@@ -23,10 +28,11 @@ try {
   // Context not available
 }
 
-const HomeHeroContext = HomeHeroContextModule?.HomeHeroContext || React.createContext(null)
+const HomeHeroContext: React.Context<HomeHeroContextValue> =
+  HomeHeroContextModule?.HomeHeroContext || React.createContext<HomeHeroContextValue>(null)
 
 // Use HomeHeroContext without requiring it
-function useOptionalHomeHero(): { subtitle: Subtitle; isHeroVisible: boolean } | null {
+function useOptionalHomeHero(): HomeHeroContextValue {
   return useContext(HomeHeroContext)
 }
 

apps/web/src/components/HeroAbacus.tsx

@@ -89,56 +89,69 @@ export function HeroAbacus() {
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'center',
-          gap: '8',
+          justifyContent: 'space-between',
+          height: '100%',
+          py: '12',
         })}
       >
-        {/* Title */}
-        <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',
-            mb: '4',
-          })}
-        >
-          Abaci One
-        </h1>
-
-        {/* Subtitle */}
-        <p
-          className={css({
-            fontSize: { base: 'xl', md: '2xl' },
-            fontWeight: 'medium',
-            color: 'purple.300',
-            fontStyle: 'italic',
-            mb: '16',
-            zIndex: 10,
-            position: 'relative',
-          })}
-        >
-          {subtitle.text}
-        </p>
-
-        {/* Large Interactive Abacus */}
+        {/* Title and Subtitle Section */}
         <div
           className={css({
-            transform: { base: 'scale(2)', md: 'scale(3)', lg: 'scale(4)' },
-            transformOrigin: 'center center',
-            mb: { base: '12', md: '16', lg: '20' },
-            transition: 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
-            position: 'relative',
-            zIndex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: '4',
           })}
         >
-          <AbacusReact
-            value={abacusValue}
-            columns={4}
-            beadShape={appConfig.beadShape}
-            showNumbers={true}
-            customStyles={darkStyles}
-          />
+          <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>
+
+        {/* Large Interactive Abacus - centered in remaining space */}
+        <div
+          className={css({
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flex: '1',
+            width: '100%',
+            py: { base: '12', md: '16', lg: '20' },
+          })}
+        >
+          <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>
         </div>
 
         {/* Subtle hint to scroll */}

package.json

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