chore(release): 4.13.2 [skip ci]

## [4.13.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.13.1...v4.13.2) (2025-10-18) ### Bug Fixes * show initial value and improve numeral contrast ([1b57f6d](1b57f6ddec)), closes [#fbbf24](https://github.com/antialias/soroban-abacus-flashcards/issues/fbbf24)
fix: show initial value and improve numeral contrast
2025-10-18 22:51:19 +00:00 · 2025-10-18 17:50:12 -05:00 · 2025-10-18 22:47:40 +00:00 · 2025-10-18 17:46:32 -05:00 · 2025-10-18 22:45:39 +00:00 · 2025-10-18 17:44:40 -05:00
4 changed files with 76 additions and 15 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,24 @@
+## [4.13.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.13.1...v4.13.2) (2025-10-18)
+
+
+### Bug Fixes
+
+* show initial value and improve numeral contrast ([1b57f6d](https://github.com/antialias/soroban-abacus-flashcards/commit/1b57f6ddecf3a118f2e4fadd1a91be1256f5a034)), closes [#fbbf24](https://github.com/antialias/soroban-abacus-flashcards/issues/fbbf24)
+
+## [4.13.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.13.0...v4.13.1) (2025-10-18)
+
+
+### Bug Fixes
+
+* use defaultValue for interactive abacus control ([06aca98](https://github.com/antialias/soroban-abacus-flashcards/commit/06aca986ace4d76b70f2fd2f5e57f66758185b38))
+
+## [4.13.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.12.0...v4.13.0) (2025-10-18)
+
+
+### Features
+
+* make home page abacus interactive with audio ([9a53d7e](https://github.com/antialias/soroban-abacus-flashcards/commit/9a53d7e5db18853aca4e2e0c7abc799217feaecf))
+
 ## [4.12.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.11.1...v4.12.0) (2025-10-18)


--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -1,5 +1,6 @@
 'use client'

+import { useState } from 'react'
 import Link from 'next/link'
 import { PageWithNav } from '@/components/PageWithNav'
 import { AbacusReact } from '@soroban/abacus-react'
@@ -7,6 +8,7 @@ import { css } from '../../styled-system/css'
 import { container, grid, hstack, stack } from '../../styled-system/patterns'

 export default function HomePage() {
+  const [abacusValue, setAbacusValue] = useState(1234567)
  return (
    <PageWithNav navTitle="Soroban Mastery Platform" navEmoji="🧮">
      <div className={css({ bg: 'gray.900', minHeight: '100vh' })}>
@@ -51,7 +53,9 @@ export default function HomePage() {
              <div
                className={css({
                  display: 'flex',
-                  justifyContent: 'center',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  gap: '4',
                  my: '10',
                  p: '8',
                  bg: 'rgba(0, 0, 0, 0.4)',
@@ -61,13 +65,50 @@ export default function HomePage() {
                  boxShadow: '0 25px 50px -12px rgba(139, 92, 246, 0.25)',
                })}
              >
+                <div
+                  className={css({
+                    fontSize: 'lg',
+                    fontWeight: 'semibold',
+                    color: 'gray.300',
+                    mb: '2',
+                  })}
+                >
+                  Click the beads to interact!
+                </div>
                <AbacusReact
-                  value={1234567}
+                  value={abacusValue}
                  columns={7}
                  beadShape="diamond"
                  colorScheme="place-value"
                  hideInactiveBeads={false}
+                  interactive={true}
+                  animated={true}
+                  soundEnabled={true}
+                  soundVolume={0.4}
+                  scaleFactor={2.2}
+                  showNumbers={true}
+                  customStyles={{
+                    numerals: {
+                      fill: '#fbbf24',
+                      fontWeight: 'bold',
+                      fontSize: '18px',
+                    },
+                  }}
+                  callbacks={{
+                    onValueChange: (newValue: number) => setAbacusValue(newValue),
+                  }}
                />
+                <div
+                  className={css({
+                    fontSize: '4xl',
+                    fontWeight: 'bold',
+                    color: 'yellow.400',
+                    fontFamily: 'mono',
+                    letterSpacing: 'wide',
+                  })}
+                >
+                  {abacusValue.toLocaleString()}
+                </div>
              </div>

              <p
--- a/apps/web/src/arcade-games/card-sorting/components/PlayingPhase.tsx
+++ b/apps/web/src/arcade-games/card-sorting/components/PlayingPhase.tsx
@@ -314,17 +314,16 @@ export function PlayingPhase() {
                <div
                  dangerouslySetInnerHTML={{ __html: card.svgContent }}
                  className={css({
-                    width: '100%',
-                    height: '100%',
+                    width: '74px',
+                    height: '74px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
+                    overflow: 'hidden',
                    '& svg': {
-                      maxWidth: '100%',
-                      maxHeight: '100%',
-                      height: 'auto',
+                      width: '100%',
+                      height: '100%',
                      display: 'block',
-                      margin: '0 auto',
                    },
                  })}
                />
@@ -459,17 +458,17 @@ export function PlayingPhase() {
                            __html: card.svgContent,
                          }}
                          className={css({
-                            width: '100%',
-                            flex: 1,
+                            width: '70px',
+                            height: '70px',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
+                            overflow: 'hidden',
+                            margin: '0 auto',
                            '& svg': {
-                              maxWidth: '70px',
-                              maxHeight: '100%',
-                              height: 'auto',
+                              width: '100%',
+                              height: '100%',
                              display: 'block',
-                              margin: '0 auto',
                            },
                          })}
                        />
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "soroban-monorepo",
-  "version": "4.12.0",
+  "version": "4.13.2",
  "private": true,
  "description": "Beautiful Soroban Flashcard Generator - Monorepo",
  "workspaces": [
Author	SHA1	Message	Date
semantic-release-bot	e6d0bd4953	chore(release): 4.13.2 [skip ci] ## [4.13.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.13.1...v4.13.2) (2025-10-18) ### Bug Fixes * show initial value and improve numeral contrast ([`1b57f6d`](`1b57f6ddec`)), closes [#fbbf24](https://github.com/antialias/soroban-abacus-flashcards/issues/fbbf24)	2025-10-18 22:51:19 +00:00
Thomas Hallock	1b57f6ddec	fix: show initial value and improve numeral contrast - Changed back to controlled value (with state update) to display initial 1234567 - Added customStyles for numerals: golden color (#fbbf24), bold, larger font - Numerals now have excellent contrast against dark background 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-18 17:50:12 -05:00
semantic-release-bot	d38ea312a7	chore(release): 4.13.1 [skip ci] ## [4.13.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.13.0...v4.13.1) (2025-10-18) ### Bug Fixes * use defaultValue for interactive abacus control ([`06aca98`](`06aca986ac`))	2025-10-18 22:47:40 +00:00
Thomas Hallock	06aca986ac	fix: use defaultValue for interactive abacus control Changed from controlled (value) to uncontrolled (defaultValue) pattern to allow AbacusReact to fully manage its own state and be interactive. Still tracks value changes via onValueChange callback for display. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-18 17:46:32 -05:00
semantic-release-bot	a126466037	chore(release): 4.13.0 [skip ci] ## [4.13.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.12.0...v4.13.0) (2025-10-18) ### Features * make home page abacus interactive with audio ([`9a53d7e`](`9a53d7e5db`))	2025-10-18 22:45:39 +00:00
Thomas Hallock	9a53d7e5db	feat: make home page abacus interactive with audio Enhanced the hero abacus to be a fully interactive showcase: - Increased size from default to 2.2x scale factor - Enabled interactive mode (click beads to change value) - Enabled smooth animations for bead movements - Enabled audio feedback with volume at 0.4 - Added live value display below abacus in large golden text - Added instructional text "Click the beads to interact!" - Shows place value numbers on each column The abacus now serves as a "try it now" demo right on the landing page. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-18 17:44:40 -05:00