chore(release): 4.13.7 [skip ci]

## [4.13.7](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.13.6...v4.13.7) (2025-10-18)

### Bug Fixes

* add dark color for abacus numerals ([73ff32c](73ff32c243)), closes [#1f2937](https://github.com/antialias/soroban-abacus-flashcards/issues/1f2937)
* use app-wide abacus config and remove instruction text ([0a50c73](0a50c733b0))

CHANGELOG.md

@@ -1,3 +1,39 @@
+## [4.13.7](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.13.6...v4.13.7) (2025-10-18)
+
+
+### Bug Fixes
+
+* add dark color for abacus numerals ([73ff32c](https://github.com/antialias/soroban-abacus-flashcards/commit/73ff32c2432beb62710e57aa8b3b4793eca43fda)), closes [#1f2937](https://github.com/antialias/soroban-abacus-flashcards/issues/1f2937)
+* use app-wide abacus config and remove instruction text ([0a50c73](https://github.com/antialias/soroban-abacus-flashcards/commit/0a50c733b089c7c341f0fdef47da78d1c61a3cb5))
+
+## [4.13.6](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.13.5...v4.13.6) (2025-10-18)
+
+
+### Bug Fixes
+
+* simplify abacus pane with light background ([30f48ab](https://github.com/antialias/soroban-abacus-flashcards/commit/30f48ab8976976688e089b07ece7fdae6d7ada79))
+
+## [4.13.5](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.13.4...v4.13.5) (2025-10-18)
+
+
+### Bug Fixes
+
+* correct AbacusReact API usage and add structural styling ([247377f](https://github.com/antialias/soroban-abacus-flashcards/commit/247377fca35ee3433e02ad594ecc1c4f391f0143)), closes [#fbbf24](https://github.com/antialias/soroban-abacus-flashcards/issues/fbbf24) [#a78](https://github.com/antialias/soroban-abacus-flashcards/issues/a78)
+
+## [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)
 
 

apps/web/src/app/page.tsx

@@ -3,12 +3,13 @@
 import { useState } from 'react'
 import Link from 'next/link'
 import { PageWithNav } from '@/components/PageWithNav'
-import { AbacusReact } from '@soroban/abacus-react'
+import { AbacusReact, useAbacusConfig } from '@soroban/abacus-react'
 import { css } from '../../styled-system/css'
 import { container, grid, hstack, stack } from '../../styled-system/patterns'
 
 export default function HomePage() {
   const [abacusValue, setAbacusValue] = useState(1234567)
+  const appConfig = useAbacusConfig()
   return (
     <PageWithNav navTitle="Soroban Mastery Platform" navEmoji="🧮">
       <div className={css({ bg: 'gray.900', minHeight: '100vh' })}>
@@ -53,34 +54,22 @@ export default function HomePage() {
               <div
                 className={css({
                   display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'center',
-                  gap: '4',
+                  justifyContent: 'center',
                   my: '10',
                   p: '8',
-                  bg: 'rgba(0, 0, 0, 0.4)',
+                  bg: 'white',
                   borderRadius: '2xl',
                   border: '2px solid',
                   borderColor: 'purple.500/30',
                   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={abacusValue}
                   columns={7}
-                  beadShape="diamond"
-                  colorScheme="place-value"
-                  hideInactiveBeads={false}
+                  beadShape={appConfig.beadShape}
+                  colorScheme={appConfig.colorScheme}
+                  hideInactiveBeads={appConfig.hideInactiveBeads}
                   interactive={true}
                   animated={true}
                   soundEnabled={true}
@@ -89,26 +78,12 @@ export default function HomePage() {
                   showNumbers={true}
                   customStyles={{
                     numerals: {
-                      fill: '#fbbf24',
+                      fill: '#1f2937',
                       fontWeight: 'bold',
-                      fontSize: '18px',
                     },
                   }}
-                  callbacks={{
-                    onValueChange: (newValue: number) => setAbacusValue(newValue),
-                  }}
+                  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',
@@ -314,8 +314,8 @@ export function PlayingPhase() {
                 <div
                   dangerouslySetInnerHTML={{ __html: card.svgContent }}
                   className={css({
-                    width: '74px',
-                    height: '74px',
+                    width: '100%',
+                    height: '100%',
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
@@ -416,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',
@@ -458,13 +458,12 @@ export function PlayingPhase() {
                             __html: card.svgContent,
                           }}
                           className={css({
-                            width: '70px',
-                            height: '70px',
+                            flex: 1,
+                            width: '100%',
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'center',
                             overflow: 'hidden',
-                            margin: '0 auto',
                             '& svg': {
                               width: '100%',
                               height: '100%',

package.json

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