chore(release): 4.18.1 [skip ci]

## [4.18.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.18.0...v4.18.1) (2025-10-19) ### Bug Fixes * **tutorial:** use correct customStyles API for dark mode frame styling ([fdc882c](fdc882cb04))
fix(tutorial): use correct customStyles API for dark mode frame styling
2025-10-19 18:30:53 +00:00 · 2025-10-19 13:29:45 -05:00 · 2025-10-19 18:27:22 +00:00 · 2025-10-19 13:26:14 -05:00
3 changed files with 40 additions and 4 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,17 @@
+## [4.18.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.18.0...v4.18.1) (2025-10-19)
+
+
+### Bug Fixes
+
+* **tutorial:** use correct customStyles API for dark mode frame styling ([fdc882c](https://github.com/antialias/soroban-abacus-flashcards/commit/fdc882cb046e3d8835fbca59841e9af5329bcc52))
+
+## [4.18.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.17.2...v4.18.0) (2025-10-19)
+
+
+### Features
+
+* **tutorial:** add dark mode styling for coaching bar and abacus frame ([7e2f580](https://github.com/antialias/soroban-abacus-flashcards/commit/7e2f580877af9d21409f427778fa3569c950fcf5))
+
 ## [4.17.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.17.1...v4.17.2) (2025-10-19)


--- a/apps/web/src/components/tutorial/TutorialPlayer.tsx
+++ b/apps/web/src/components/tutorial/TutorialPlayer.tsx
@@ -1094,8 +1094,30 @@ function TutorialPlayerContent({
      Object.assign(mergedHighlights[columnIndex], dynamicColumnHighlights[columnIndex])
    })

-    return Object.keys(mergedHighlights).length > 0 ? { columns: mergedHighlights } : undefined
-  }, [currentStep.highlightBeads, dynamicColumnHighlights, abacusColumns])
+    // Build the custom styles object
+    const styles: any = {}
+
+    // Add column highlights if any
+    if (Object.keys(mergedHighlights).length > 0) {
+      styles.columns = mergedHighlights
+    }
+
+    // Add frame styling for dark mode
+    if (theme === 'dark') {
+      // Column dividers (global for all columns)
+      styles.columnPosts = {
+        stroke: 'rgba(255, 255, 255, 0.2)',
+        strokeWidth: 2,
+      }
+      // Reckoning bar (horizontal middle bar)
+      styles.reckoningBar = {
+        stroke: 'rgba(255, 255, 255, 0.25)',
+        strokeWidth: 3,
+      }
+    }
+
+    return Object.keys(styles).length > 0 ? styles : undefined
+  }, [currentStep.highlightBeads, dynamicColumnHighlights, abacusColumns, theme])

  if (!currentStep) {
    return <div>No steps available</div>
@@ -1522,7 +1544,7 @@ function TutorialPlayerContent({
                              className={css({
                                mb: 1,
                                fontWeight: 'bold',
-                                color: 'yellow.900',
+                                color: theme === 'dark' ? 'yellow.300' : 'yellow.900',
                              })}
                            >
                              {currentInstruction}
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "soroban-monorepo",
-  "version": "4.17.2",
+  "version": "4.18.1",
  "private": true,
  "description": "Beautiful Soroban Flashcard Generator - Monorepo",
  "workspaces": [
Author	SHA1	Message	Date
semantic-release-bot	efbe99a9e2	chore(release): 4.18.1 [skip ci] ## [4.18.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.18.0...v4.18.1) (2025-10-19) ### Bug Fixes * tutorial: use correct customStyles API for dark mode frame styling ([`fdc882c`](`fdc882cb04`))	2025-10-19 18:30:53 +00:00
Thomas Hallock	fdc882cb04	fix(tutorial): use correct customStyles API for dark mode frame styling Fixed the dark mode styling to use the correct AbacusReact customStyles API: Previous (incorrect): - Used nested `frame` object that doesn't exist in the API - `frame.column`, `frame.reckoningBar`, `frame.border` Corrected (per AbacusReact.tsx interface): - `columnPosts` - Global styling for all column dividers - `reckoningBar` - Horizontal middle bar styling Changes: - Column dividers: rgba(255, 255, 255, 0.2) with 2px stroke - Reckoning bar: rgba(255, 255, 255, 0.25) with 3px stroke These properties are at the root level of customStyles, not nested under a `frame` object. The styling will now properly apply to the abacus frame elements in dark mode. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-19 13:29:45 -05:00
semantic-release-bot	a7778c648d	chore(release): 4.18.0 [skip ci] ## [4.18.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.17.2...v4.18.0) (2025-10-19) ### Features * tutorial: add dark mode styling for coaching bar and abacus frame ([`7e2f580`](`7e2f580877`))	2025-10-19 18:27:22 +00:00
Thomas Hallock	7e2f580877	feat(tutorial): add dark mode styling for coaching bar and abacus frame Enhanced the dark mode theme support for the tutorial player: Coaching Bar: - Updated instruction text color to use yellow.300 for dark mode instead of hardcoded yellow.900 - Ensures coaching instructions are readable against dark backgrounds Abacus Frame: - Added custom frame styling for dark mode using customStyles prop - Column dividers: rgba(255, 255, 255, 0.15) with 2px stroke - Reckoning bar: rgba(255, 255, 255, 0.2) with 3px stroke - Outer border: rgba(255, 255, 255, 0.15) with 2px stroke - Provides subtle, elegant appearance that blends with dark theme The frame styling is automatically applied when theme="dark" and does not affect light mode or other tutorial instances. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-19 13:26:14 -05:00