chore(release): 4.13.4 [skip ci]

## [4.13.4](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.13.3...v4.13.4) (2025-10-18)

### Bug Fixes

* **card-sorting:** increase card tile sizes to contain abacuses ([d2a3b7a](d2a3b7ae2e))

CHANGELOG.md

@@ -1,3 +1,38 @@
+## [4.13.4](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.13.3...v4.13.4) (2025-10-18)
+
+
+### Bug Fixes
+
+* **card-sorting:** increase card tile sizes to contain abacuses ([d2a3b7a](https://github.com/antialias/soroban-abacus-flashcards/commit/d2a3b7ae2e3f6819b8d9ace32be22f04f748d1bc))
+
+## [4.13.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.13.2...v4.13.3) (2025-10-18)
+
+
+### Bug Fixes
+
+* **card-sorting:** increase SVG size to fill card containers ([cf9d893](https://github.com/antialias/soroban-abacus-flashcards/commit/cf9d893f3fdbef6e91cd0ba283d602b9215569f1))
+
+## [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)
 
 

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

apps/web/src/arcade-games/card-sorting/components/PlayingPhase.tsx

@@ -280,8 +280,8 @@ export function PlayingPhase() {
                 key={card.id}
                 onClick={() => handleCardClick(card.id)}
                 className={css({
-                  width: '90px',
-                  height: '90px',
+                  width: '140px',
+                  height: '140px',
                   padding: '8px',
                   border: '2px solid',
                   borderColor: selectedCardId === card.id ? '#1976d2' : 'transparent',
@@ -319,12 +319,11 @@ export function PlayingPhase() {
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
+                    overflow: 'hidden',
                     '& svg': {
-                      maxWidth: '100%',
-                      maxHeight: '100%',
-                      height: 'auto',
+                      width: '100%',
+                      height: '100%',
                       display: 'block',
-                      margin: '0 auto',
                     },
                   })}
                 />
@@ -417,8 +416,8 @@ export function PlayingPhase() {
                     key={`slot-${index}`}
                     onClick={() => handleSlotClick(index)}
                     className={css({
-                      width: '90px',
-                      height: '110px',
+                      width: '140px',
+                      height: '160px',
                       padding: '0.5rem',
                       borderRadius: '8px',
                       border: '2px solid',
@@ -459,17 +458,16 @@ export function PlayingPhase() {
                             __html: card.svgContent,
                           }}
                           className={css({
-                            width: '100%',
                             flex: 1,
+                            width: '100%',
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'center',
+                            overflow: 'hidden',
                             '& svg': {
-                              maxWidth: '70px',
-                              maxHeight: '100%',
-                              height: 'auto',
+                              width: '100%',
+                              height: '100%',
                               display: 'block',
-                              margin: '0 auto',
                             },
                           })}
                         />

package.json

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