chore(release): 4.63.9 [skip ci]

## [4.63.9](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.8...v4.63.9) (2025-10-21) ### Bug Fixes * **homepage:** use app-wide abacus config in interactive flashcards ([cf1be2d](cf1be2d173))
fix(homepage): use app-wide abacus config in interactive flashcards
2025-10-21 17:09:40 +00:00 · 2025-10-21 12:08:26 -05:00 · 2025-10-21 17:08:03 +00:00 · 2025-10-21 12:06:48 -05:00
4 changed files with 25 additions and 11 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,17 @@
+## [4.63.9](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.8...v4.63.9) (2025-10-21)
+
+
+### Bug Fixes
+
+* **homepage:** use app-wide abacus config in interactive flashcards ([cf1be2d](https://github.com/antialias/soroban-abacus-flashcards/commit/cf1be2d1730543bd30836a87d9cbdfd2cf48360e))
+
+## [4.63.8](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.7...v4.63.8) (2025-10-21)
+
+
+### Bug Fixes
+
+* **mobile:** restore abacus visibility in "Your Journey" section ([c96036d](https://github.com/antialias/soroban-abacus-flashcards/commit/c96036d86b6de2e25f7ecd3d00dd36221badc3b1))
+
 ## [4.63.7](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.6...v4.63.7) (2025-10-21)


--- a/apps/web/src/components/InteractiveFlashcards.tsx
+++ b/apps/web/src/components/InteractiveFlashcards.tsx
@@ -1,6 +1,6 @@
 'use client'

-import { AbacusReact } from '@soroban/abacus-react'
+import { AbacusReact, useAbacusConfig } from '@soroban/abacus-react'
 import { useEffect, useRef, useState } from 'react'
 import { css } from '../../styled-system/css'

@@ -93,6 +93,8 @@ interface DraggableCardProps {
 }

 function DraggableCard({ card, containerRef }: DraggableCardProps) {
+  const appConfig = useAbacusConfig()
+
  // Track position - starts at initial, updates when dragged
  const [position, setPosition] = useState({ x: card.initialX, y: card.initialY })
  const [rotation, setRotation] = useState(card.initialRotation) // Now dynamic!
@@ -337,7 +339,7 @@ function DraggableCard({ card, containerRef }: DraggableCardProps) {
            transformOrigin: 'center',
          })}
        >
-          <AbacusReact value={card.number} columns={3} beadShape="circle" />
+          <AbacusReact value={card.number} columns={3} beadShape={appConfig.beadShape} />
        </div>

        {/* Number display */}
--- a/apps/web/src/components/LevelSliderDisplay.tsx
+++ b/apps/web/src/components/LevelSliderDisplay.tsx
@@ -622,6 +622,7 @@ export function LevelSliderDisplay({
            borderColor: 'gray.700',
            overflow: 'hidden',
            flex: 1,
+            minH: 0, // Allow flex shrinking
          })}
        >
          {/* Level Details (only for Kyu levels) */}
@@ -640,16 +641,12 @@ export function LevelSliderDisplay({
                <div
                  className={css({
                    flex: '0 0 auto',
-                    display: 'grid',
-                    gridTemplateColumns: {
-                      base: 'repeat(2, 1fr)',
-                      sm: 'repeat(3, 1fr)',
-                      lg: 'repeat(2, 1fr)',
-                    },
+                    display: { base: 'none', lg: 'grid' },
+                    gridTemplateColumns: 'repeat(2, 1fr)',
                    gap: '2',
                    p: '2',
                    w: '100%',
-                    maxW: { base: '100%', lg: '400px' },
+                    maxW: '400px',
                    alignContent: 'center',
                    justifyItems: 'center',
                  })}
@@ -748,7 +745,7 @@ export function LevelSliderDisplay({
              ) : null
            })()}

-          {/* Abacus (right-aligned for Kyu, centered for Dan) */}
+          {/* Abacus (centered on mobile, right-aligned for Kyu on desktop, centered for Dan) */}
          <div
            className={css({
              display: 'flex',
@@ -759,6 +756,7 @@ export function LevelSliderDisplay({
              overflowX: 'auto',
              overflowY: 'hidden',
              minW: 0, // Allow flex shrinking
+              minH: 0, // Allow flex shrinking
            })}
          >
            <animated.div
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "soroban-monorepo",
-  "version": "4.63.7",
+  "version": "4.63.9",
  "private": true,
  "description": "Beautiful Soroban Flashcard Generator - Monorepo",
  "workspaces": [
Author	SHA1	Message	Date
semantic-release-bot	6dabb71600	chore(release): 4.63.9 [skip ci] ## [4.63.9](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.8...v4.63.9) (2025-10-21) ### Bug Fixes * homepage: use app-wide abacus config in interactive flashcards ([`cf1be2d`](`cf1be2d173`))	2025-10-21 17:09:40 +00:00
Thomas Hallock	cf1be2d173	fix(homepage): use app-wide abacus config in interactive flashcards The interactive flashcards section at the bottom of the homepage was hardcoding beadShape="circle" instead of respecting the app-wide abacus configuration context that all other abaci on the site use. Changes to InteractiveFlashcards.tsx: - Import useAbacusConfig hook from @soroban/abacus-react - Call useAbacusConfig() in DraggableCard component - Use appConfig.beadShape instead of hardcoded "circle" This ensures visual consistency across all abacus displays on the site and respects user preferences for bead styling. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-21 12:08:26 -05:00
semantic-release-bot	0169ab5128	chore(release): 4.63.8 [skip ci] ## [4.63.8](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.7...v4.63.8) (2025-10-21) ### Bug Fixes * mobile: restore abacus visibility in "Your Journey" section ([`c96036d`](`c96036d86b`))	2025-10-21 17:08:03 +00:00
Thomas Hallock	c96036d86b	fix(mobile): restore abacus visibility in "Your Journey" section On mobile screens (base breakpoint), the level details cards were taking up all vertical space within the 500px maxHeight constraint, pushing the abacus completely out of view. Solution: Hide level details on mobile (display: { base: 'none', lg: 'grid' }) so mobile users see only the slider and abacus, while desktop users see all components. Also added minH: 0 to containers to ensure proper flex shrinking behavior. Changes to LevelSliderDisplay.tsx: - Level details grid now hidden on base breakpoint, visible on lg+ - Simplified grid columns to single value since it's desktop-only - Added minH: 0 to flex containers for proper shrinking Tested on iPhone 14 (390px viewport). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-21 12:06:48 -05:00