chore(release): 4.32.0 [skip ci]

## [4.32.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.31.1...v4.32.0) (2025-10-20) ### Features * **levels:** add dark mode styling and responsive scaling to abacus ([92e1e62](92e1e62132))
feat(levels): add dark mode styling and responsive scaling to abacus
2025-10-20 12:50:34 +00:00 · 2025-10-20 07:49:28 -05:00 · 2025-10-20 12:47:01 +00:00 · 2025-10-20 07:45:53 -05:00
3 changed files with 34 additions and 4 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,17 @@
+## [4.32.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.31.1...v4.32.0) (2025-10-20)
+
+
+### Features
+
+* **levels:** add dark mode styling and responsive scaling to abacus ([92e1e62](https://github.com/antialias/soroban-abacus-flashcards/commit/92e1e621321039206f65b3605f5797bbdc6beafc))
+
+## [4.31.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.31.0...v4.31.1) (2025-10-20)
+
+
+### Bug Fixes
+
+* **levels:** use correct AbacusReact API with direct props ([892b377](https://github.com/antialias/soroban-abacus-flashcards/commit/892b377eb3bbd555dd2566bf58e946e9faa7b9f6))
+
 ## [4.31.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.30.0...v4.31.0) (2025-10-20)


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

 import { useState } from 'react'
-import { AbacusReact, useAbacusConfig } from '@soroban/abacus-react'
+import { AbacusReact } from '@soroban/abacus-react'
 import { PageWithNav } from '@/components/PageWithNav'
 import { css } from '../../../styled-system/css'
 import { container, stack } from '../../../styled-system/patterns'
@@ -122,7 +122,10 @@ const allLevels = [
 export default function LevelsPage() {
  const [currentIndex, setCurrentIndex] = useState(0)
  const currentLevel = allLevels[currentIndex]
-  const abacusConfig = useAbacusConfig({ columns: currentLevel.digits })
+
+  // Calculate scale factor based on number of columns to fit the page
+  // Smaller scale for more columns (Dan levels with 30 columns)
+  const scaleFactor = Math.min(2.5, 20 / currentLevel.digits)

  return (
    <PageWithNav navTitle="Kyu & Dan Levels" navEmoji="📊">
@@ -244,9 +247,22 @@ export default function LevelsPage() {
                  rounded: 'lg',
                  border: '1px solid',
                  borderColor: 'gray.700',
+                  overflowX: 'auto',
                })}
              >
-                <AbacusReact config={abacusConfig} initialNumber={0} />
+                <AbacusReact
+                  value={0}
+                  columns={currentLevel.digits}
+                  scaleFactor={scaleFactor}
+                  showNumbers={true}
+                  customStyles={{
+                    reckoningBar: { stroke: '#9ca3af', strokeWidth: 3 },
+                    columnPosts: { stroke: '#6b7280' },
+                    numerals: { color: '#d1d5db', fontSize: '14px', fontWeight: 'normal' },
+                    heavenBeads: { fill: '#60a5fa' },
+                    earthBeads: { fill: '#34d399' },
+                  }}
+                />
              </div>

              {/* Digit Count */}
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "soroban-monorepo",
-  "version": "4.31.0",
+  "version": "4.32.0",
  "private": true,
  "description": "Beautiful Soroban Flashcard Generator - Monorepo",
  "workspaces": [
Author	SHA1	Message	Date
semantic-release-bot	321d9aea10	chore(release): 4.32.0 [skip ci] ## [4.32.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.31.1...v4.32.0) (2025-10-20) ### Features * levels: add dark mode styling and responsive scaling to abacus ([`92e1e62`](`92e1e62132`))	2025-10-20 12:50:34 +00:00
Thomas Hallock	92e1e62132	feat(levels): add dark mode styling and responsive scaling to abacus Improvements to the levels page abacus display: - Added showNumbers={true} to show place value numbers - Styled for dark background with light gray columns and reckoning bar - Colored beads (blue heaven, green earth) for better visibility - Dynamic scaling: large (2.5x) for Kyu levels, smaller for Dan levels - Added horizontal overflow for very wide Dan level abacuses (30 columns) - Formula: scaleFactor = Math.min(2.5, 20 / digits) The abacus now fits gracefully at all levels and is clearly visible on the dark page background. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 07:49:28 -05:00
semantic-release-bot	84d980bb24	chore(release): 4.31.1 [skip ci] ## [4.31.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.31.0...v4.31.1) (2025-10-20) ### Bug Fixes * levels: use correct AbacusReact API with direct props ([`892b377`](`892b377eb3`))	2025-10-20 12:47:01 +00:00
Thomas Hallock	892b377eb3	fix(levels): use correct AbacusReact API with direct props Fixed abacus not rendering by using the correct API: - Removed non-existent useAbacusConfig import - Changed from config object to direct props (value, columns, scaleFactor) - Added scaleFactor=1.5 for better visibility The abacus now properly displays with the appropriate number of columns based on the selected kyu/dan level. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 07:45:53 -05:00