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))
fix(card-sorting): increase card tile sizes to contain abacuses
2025-10-18 22:56:13 +00:00 · 2025-10-18 17:55:15 -05:00 · 2025-10-18 22:53:10 +00:00 · 2025-10-18 17:51:57 -05:00 · 2025-10-18 22:51:19 +00:00 · 2025-10-18 17:50:12 -05:00
4 changed files with 38 additions and 11 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,24 @@
+## [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)


--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -76,7 +76,7 @@ export default function HomePage() {
                  Click the beads to interact!
                </div>
                <AbacusReact
-                  defaultValue={1234567}
+                  value={abacusValue}
                  columns={7}
                  beadShape="diamond"
                  colorScheme="place-value"
@@ -87,6 +87,13 @@ export default function HomePage() {
                  soundVolume={0.4}
                  scaleFactor={2.2}
                  showNumbers={true}
+                  customStyles={{
+                    numerals: {
+                      fill: '#fbbf24',
+                      fontWeight: 'bold',
+                      fontSize: '18px',
+                    },
+                  }}
                  callbacks={{
                    onValueChange: (newValue: number) => setAbacusValue(newValue),
                  }}
--- a/apps/web/src/arcade-games/card-sorting/components/PlayingPhase.tsx
+++ b/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%',
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "soroban-monorepo",
-  "version": "4.13.1",
+  "version": "4.13.4",
  "private": true,
  "description": "Beautiful Soroban Flashcard Generator - Monorepo",
  "workspaces": [
Author	SHA1	Message	Date
semantic-release-bot	be39401716	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`))	2025-10-18 22:56:13 +00:00
Thomas Hallock	d2a3b7ae2e	fix(card-sorting): increase card tile sizes to contain abacuses Make card tiles larger to properly contain AbacusReact SVGs without overflow. Issue: Card tiles were too small (90px × 90px and 90px × 110px) to contain the AbacusReact SVGs, causing abacuses to overflow their containers. Fix: - Available cards: Increased from 90px × 90px to 140px × 140px - Position slots: Increased from 90px × 110px to 140px × 160px Result: Abacus SVGs now fit comfortably within their card containers without overflowing, while maintaining the overflow: hidden constraint as a safety measure. src/arcade-games/card-sorting/components/PlayingPhase.tsx:283-284,419-420 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-18 17:55:15 -05:00
semantic-release-bot	39ab605279	chore(release): 4.13.3 [skip ci] ## [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`](`cf9d893f3f`))	2025-10-18 22:53:10 +00:00
Thomas Hallock	cf9d893f3f	fix(card-sorting): increase SVG size to fill card containers Make AbacusReact SVGs larger by allowing them to fill their containers. Issue: SVG containers were set to fixed small sizes (74px × 74px and 70px × 70px), making the abacuses appear too small within their cards. Fix: - Available cards: Changed SVG container from 74px × 74px to 100% × 100% to fill the entire 90px card (accounting for 8px padding) - Position slots: Changed SVG container from 70px × 70px to flex: 1, width: 100% to fill available space while leaving room for label Result: Abacuses now appear larger and fill their card containers better while still being constrained by overflow: hidden to prevent breaking out. src/arcade-games/card-sorting/components/PlayingPhase.tsx:314-329,456-473 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-18 17:51:57 -05:00
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