chore(release): 4.32.1 [skip ci]

## [4.32.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.32.0...v4.32.1) (2025-10-20)

### Bug Fixes

* **levels:** use correct dark mode styling from homepage + docs update ([c38767f](c38767f4d3))

CHANGELOG.md

@@ -1,3 +1,17 @@
+## [4.32.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.32.0...v4.32.1) (2025-10-20)
+
+
+### Bug Fixes
+
+* **levels:** use correct dark mode styling from homepage + docs update ([c38767f](https://github.com/antialias/soroban-abacus-flashcards/commit/c38767f4d399fa2caa5cd4e0185689d0207fbdaf))
+
+## [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)
 
 

apps/web/.claude/CLAUDE.md

@@ -138,12 +138,43 @@ See `.claude/GAME_THEMES.md` for standardized color theme usage in arcade games.
 - ✅ Use `useAbacusConfig` for abacus configuration
 - ✅ Use `useAbacusDisplay` for reading abacus state
 
+**MANDATORY: Read the Docs Before Customizing**
+
+**ALWAYS read the full README documentation before customizing or styling AbacusReact:**
+- Location: `packages/abacus-react/README.md`
+- Check homepage implementation: `src/app/page.tsx` (MiniAbacus component)
+- Check storybook examples: `src/stories/AbacusReact.*.stories.tsx`
+
+**Key Documentation Points:**
+1. **Custom Styles**: Use `fill` (not just `stroke`) for columnPosts and reckoningBar
+2. **Props**: Use direct props like `value`, `columns`, `scaleFactor` (not config objects)
+3. **Example from Homepage:**
+   ```typescript
+   const darkStyles = {
+     columnPosts: {
+       fill: 'rgba(255, 255, 255, 0.3)',
+       stroke: 'rgba(255, 255, 255, 0.2)',
+       strokeWidth: 2,
+     },
+     reckoningBar: {
+       fill: 'rgba(255, 255, 255, 0.4)',
+       stroke: 'rgba(255, 255, 255, 0.25)',
+       strokeWidth: 3,
+     },
+   }
+
+   <AbacusReact
+     value={123}
+     columns={3}
+     customStyles={darkStyles}
+   />
+   ```
+
 **Example Usage:**
 ```typescript
-import { AbacusReact, useAbacusConfig } from '@soroban/abacus-react'
+import { AbacusReact } from '@soroban/abacus-react'
 
-const config = useAbacusConfig({ columns: 5 })
-<AbacusReact config={config} initialNumber={123} />
+<AbacusReact value={123} columns={5} scaleFactor={1.5} showNumbers={true} />
 ```
 
 ## Known Issues

apps/web/src/app/levels/page.tsx

@@ -123,6 +123,33 @@ export default function LevelsPage() {
   const [currentIndex, setCurrentIndex] = useState(0)
   const currentLevel = allLevels[currentIndex]
 
+  // 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)
+
+  // Generate an interesting non-zero number to display on the abacus
+  // Create a value that uses all available columns (e.g., 2 columns = 12, 3 columns = 123)
+  // For larger numbers, create a pattern like 123456789012... up to the column count
+  const digitPattern = '123456789'
+  const displayValue = Number.parseInt(
+    digitPattern.repeat(Math.ceil(currentLevel.digits / digitPattern.length)).slice(0, currentLevel.digits),
+    10,
+  )
+
+  // Dark theme styles matching the homepage
+  const darkStyles = {
+    columnPosts: {
+      fill: 'rgba(255, 255, 255, 0.3)',
+      stroke: 'rgba(255, 255, 255, 0.2)',
+      strokeWidth: 2,
+    },
+    reckoningBar: {
+      fill: 'rgba(255, 255, 255, 0.4)',
+      stroke: 'rgba(255, 255, 255, 0.25)',
+      strokeWidth: 3,
+    },
+  }
+
   return (
     <PageWithNav navTitle="Kyu & Dan Levels" navEmoji="📊">
       <div className={css({ bg: 'gray.900', minHeight: '100vh', pb: '12' })}>
@@ -243,9 +270,16 @@ export default function LevelsPage() {
                   rounded: 'lg',
                   border: '1px solid',
                   borderColor: 'gray.700',
+                  overflowX: 'auto',
                 })}
               >
-                <AbacusReact value={0} columns={currentLevel.digits} scaleFactor={1.5} />
+                <AbacusReact
+                  value={displayValue}
+                  columns={currentLevel.digits}
+                  scaleFactor={scaleFactor}
+                  showNumbers={true}
+                  customStyles={darkStyles}
+                />
               </div>
 
               {/* Digit Count */}

package.json

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