chore(release): 4.24.2 [skip ci]

## [4.24.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.24.1...v4.24.2) (2025-10-20) ### Code Refactoring * **homepage:** tighten mini abacus vertical padding ([514d07e](514d07ecb5))
refactor(homepage): tighten mini abacus vertical padding
2025-10-20 11:17:40 +00:00 · 2025-10-20 06:16:37 -05:00 · 2025-10-20 11:11:51 +00:00 · 2025-10-20 06:10:44 -05:00 · 2025-10-20 06:09:49 -05:00 · 2025-10-20 06:09:13 -05:00
3 changed files with 55 additions and 11 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,27 @@
+## [4.24.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.24.1...v4.24.2) (2025-10-20)
+
+
+### Code Refactoring
+
+* **homepage:** tighten mini abacus vertical padding ([514d07e](https://github.com/antialias/soroban-abacus-flashcards/commit/514d07ecb5f65a3c0982b8e90994e1c17ebaa59c))
+
+## [4.24.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.24.0...v4.24.1) (2025-10-20)
+
+
+### Bug Fixes
+
+* **homepage:** adjust mini abacus container height ([c4066d6](https://github.com/antialias/soroban-abacus-flashcards/commit/c4066d687925bbe7737ebfeefdada7365ff97c6c))
+* **homepage:** fix MiniAbacus runtime error and improve sizing ([1fa0df8](https://github.com/antialias/soroban-abacus-flashcards/commit/1fa0df85f7d3988cbc61701d89476419ccf0a13c))
+* **homepage:** use correct AbacusReact API and fix clipping/styling issues ([1432afd](https://github.com/antialias/soroban-abacus-flashcards/commit/1432afd6e6bd547bd0da76dbeea1c2b71244826f))
+* **homepage:** use direct conditionals for mini abacus padding ([38ef16a](https://github.com/antialias/soroban-abacus-flashcards/commit/38ef16a8f91f8ab4ad0d717b0321e2002636fafb))
+
+
+### Styles
+
+* **homepage:** add more padding around mini abacus ([c5103d0](https://github.com/antialias/soroban-abacus-flashcards/commit/c5103d049f73a8f7ef26915edfbef9ea56d59094))
+* **homepage:** balance mini abacus padding horizontally and vertically ([2f0304e](https://github.com/antialias/soroban-abacus-flashcards/commit/2f0304eb81cdf84c21b0554c9cd4bd5478896dd8))
+* **homepage:** increase mini abacus padding to '5' ([1da9ed1](https://github.com/antialias/soroban-abacus-flashcards/commit/1da9ed1ce6995c605622fc2863f248e5e91ab9c3))
+
 ## [4.24.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.23.0...v4.24.0) (2025-10-20)


--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -12,32 +12,51 @@ import { token } from '../../styled-system/tokens'

 // Mini abacus that cycles through random 3-digit numbers
 function MiniAbacus() {
-  const [currentValue, setCurrentValue] = useState(0)
-  const abacusConfig = useAbacusConfig({
-    abacusColumns: 3,
-    theme: 'dark',
-  })
+  const [currentValue, setCurrentValue] = useState(123)
+  const appConfig = useAbacusConfig()

  useEffect(() => {
-    // Cycle through random 3-digit numbers every 2 seconds
+    // Cycle through random 3-digit numbers every 2.5 seconds
    const interval = setInterval(() => {
      const randomNum = Math.floor(Math.random() * 1000) // 0-999
      setCurrentValue(randomNum)
-    }, 2000)
+    }, 2500)

    return () => clearInterval(interval)
  }, [])

+  // Dark theme styles for the abacus
+  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 (
    <div
      className={css({
-        height: '75px',
+        width: '75px',
+        height: '80px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      })}
    >
-      <AbacusReact value={currentValue} config={abacusConfig} />
+      <div className={css({ transform: 'scale(0.6)', transformOrigin: 'center center' })}>
+        <AbacusReact
+          value={currentValue}
+          columns={3}
+          beadShape={appConfig.beadShape}
+          styles={darkStyles}
+        />
+      </div>
    </div>
  )
 }
@@ -351,7 +370,8 @@ export default function HomePage() {
                              textAlign: 'center',
                              bg: 'rgba(255, 255, 255, 0.1)',
                              borderRadius: 'lg',
-                              p: '2',
+                              py: i === 0 ? '4' : '2',
+                              px: i === 0 ? '3' : '2',
                            })}
                          >
                            {i === 0 ? <MiniAbacus /> : skill.icon}
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "soroban-monorepo",
-  "version": "4.24.0",
+  "version": "4.24.2",
  "private": true,
  "description": "Beautiful Soroban Flashcard Generator - Monorepo",
  "workspaces": [
Author	SHA1	Message	Date
semantic-release-bot	75a84dc148	chore(release): 4.24.2 [skip ci] ## [4.24.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.24.1...v4.24.2) (2025-10-20) ### Code Refactoring * homepage: tighten mini abacus vertical padding ([`514d07e`](`514d07ecb5`))	2025-10-20 11:17:40 +00:00
Thomas Hallock	514d07ecb5	refactor(homepage): tighten mini abacus vertical padding Reduced vertical padding from token '5' to '4' in the "Read and set numbers" card icon container for better visual balance. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 06:16:37 -05:00
semantic-release-bot	e37ee87ea3	chore(release): 4.24.1 [skip ci] ## [4.24.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.24.0...v4.24.1) (2025-10-20) ### Bug Fixes * homepage: adjust mini abacus container height ([`c4066d6`](`c4066d6879`)) * homepage: fix MiniAbacus runtime error and improve sizing ([`1fa0df8`](`1fa0df85f7`)) * homepage: use correct AbacusReact API and fix clipping/styling issues ([`1432afd`](`1432afd6e6`)) * homepage: use direct conditionals for mini abacus padding ([`38ef16a`](`38ef16a8f9`)) ### Styles * homepage: add more padding around mini abacus ([`c5103d0`](`c5103d049f`)) * homepage: balance mini abacus padding horizontally and vertically ([`2f0304e`](`2f0304eb81`)) * homepage: increase mini abacus padding to '5' ([`1da9ed1`](`1da9ed1ce6`))	2025-10-20 11:11:51 +00:00
Thomas Hallock	38ef16a8f9	fix(homepage): use direct conditionals for mini abacus padding Replace spread operator with direct conditional values for py and px to ensure proper application with Panda CSS. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 06:10:44 -05:00
Thomas Hallock	2f0304eb81	style(homepage): balance mini abacus padding horizontally and vertically Use py: '5' and px: '3' instead of uniform padding to create visually equal spacing on all sides of the animated abacus. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 06:09:49 -05:00
Thomas Hallock	1da9ed1ce6	style(homepage): increase mini abacus padding to '5' Double the padding from '3' to '5' for more generous vertical spacing around the animated abacus. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 06:09:13 -05:00
Thomas Hallock	c5103d049f	style(homepage): add more padding around mini abacus Increase padding from '2' to '3' on the mini abacus icon container to provide more vertical space between the abacus and the card border. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 06:08:52 -05:00
Thomas Hallock	c4066d6879	fix(homepage): adjust mini abacus container height Set container height to 80px to prevent excess vertical space while keeping the abacus fully visible and centered. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 06:07:41 -05:00
Thomas Hallock	1432afd6e6	fix(homepage): use correct AbacusReact API and fix clipping/styling issues Use the correct pattern for AbacusReact: - Call useAbacusConfig() without parameters for global config - Pass individual props (value, columns, beadShape, styles) instead of config object - No more timing hacks - the proper API doesn't have initialization issues Fix display issues: - Remove fixed height and overflow:hidden to prevent clipping - Add dark theme styles for columnPosts and reckoningBar - Reduce scale from 0.7 to 0.6 with proper transform origin 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 06:06:42 -05:00
Thomas Hallock	1fa0df85f7	fix(homepage): fix MiniAbacus runtime error and improve sizing Fix "Cannot read properties of undefined (reading 'earthActive')" error by: - Adding 500ms initialization delay before starting value cycling - Starting with value 123 instead of 0 to show valid state immediately - Splitting ready state management into separate useEffect Also improve container sizing: - Set explicit width (75px) and height (75px) - Add transform scale(0.7) to fit better in card icon space - Add overflow hidden to contain the component - Increase cycle interval to 2.5s for smoother transitions The error occurred because the AbacusReact component was trying to access column states before they were fully initialized. The delay ensures proper initialization before animation starts. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 06:06:42 -05:00