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))
fix: add dark color for abacus numerals
2025-10-18 23:07:53 +00:00 · 2025-10-18 18:06:47 -05:00 · 2025-10-18 18:06:47 -05:00 · 2025-10-18 23:05:58 +00:00 · 2025-10-18 18:04:49 -05:00 · 2025-10-18 23:01:22 +00:00
3 changed files with 32 additions and 35 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,25 @@
+## [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)


--- a/apps/web/src/app/page.tsx
+++ b/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
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "soroban-monorepo",
-  "version": "4.13.4",
+  "version": "4.13.7",
  "private": true,
  "description": "Beautiful Soroban Flashcard Generator - Monorepo",
  "workspaces": [
Author	SHA1	Message	Date
semantic-release-bot	474d31576f	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`))	2025-10-18 23:07:53 +00:00
Thomas Hallock	73ff32c243	fix: add dark color for abacus numerals Added customStyles to make numerals dark gray (#1f2937) with bold weight for good contrast on white background. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-18 18:06:47 -05:00
Thomas Hallock	0a50c733b0	fix: use app-wide abacus config and remove instruction text - Added useAbacusConfig() hook to get app-wide settings - AbacusReact now respects beadShape, colorScheme, hideInactiveBeads from app config - Removed "Click the beads to interact!" instruction text - Simplified pane layout (just centered) Now matches the styling/settings used throughout the rest of the app. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-18 18:06:47 -05:00
semantic-release-bot	1386378ca1	chore(release): 4.13.6 [skip ci] ## [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`](`30f48ab897`))	2025-10-18 23:05:58 +00:00
Thomas Hallock	30f48ab897	fix: simplify abacus pane with light background - Changed background from dark to white for better contrast - Removed duplicate number display (abacus has built-in numerals) - Removed custom styles (defaults work well on light background) - Updated instruction text color to gray.700 for readability Abacus component isn't designed for dark mode yet, so light pane is simpler. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-18 18:04:49 -05:00
semantic-release-bot	d2f6b8b46c	chore(release): 4.13.5 [skip ci] ## [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`](`247377fca3`)), closes [#fbbf24](https://github.com/antialias/soroban-abacus-flashcards/issues/fbbf24) [#a78](https://github.com/antialias/soroban-abacus-flashcards/issues/a78)	2025-10-18 23:01:22 +00:00
Thomas Hallock	247377fca3	fix: correct AbacusReact API usage and add structural styling Fixed critical issues based on storybook examples: - Changed callback syntax: onValueChange prop directly (not in callbacks object) - Added reckoningBar styling: golden stroke (#fbbf24, 4px width) - Added columnPosts styling: purple stroke (#a78bfa, 3px width) - Now structural elements are visible on dark background and interactive works 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-18 18:00:23 -05:00