chore(release): 4.19.0 [skip ci]

## [4.19.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.18.1...v4.19.0) (2025-10-19) ### Features * **tutorial:** add fill color support for dark mode column posts and reckoning bar ([2eb3ff3](2eb3ff3406))
feat(tutorial): add fill color support for dark mode column posts and reckoning bar
2025-10-19 18:38:20 +00:00 · 2025-10-19 13:37:10 -05:00 · 2025-10-19 18:30:53 +00:00 · 2025-10-19 13:29:45 -05:00
4 changed files with 36 additions and 20 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,17 @@
+## [4.19.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.18.1...v4.19.0) (2025-10-19)
+
+
+### Features
+
+* **tutorial:** add fill color support for dark mode column posts and reckoning bar ([2eb3ff3](https://github.com/antialias/soroban-abacus-flashcards/commit/2eb3ff340613301df20bf14f5b461371a27d7f05))
+
+## [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)


--- a/apps/web/src/components/tutorial/TutorialPlayer.tsx
+++ b/apps/web/src/components/tutorial/TutorialPlayer.tsx
@@ -1104,22 +1104,17 @@ function TutorialPlayerContent({

    // Add frame styling for dark mode
    if (theme === 'dark') {
-      styles.frame = {
-        // Column dividers
-        column: {
-          stroke: 'rgba(255, 255, 255, 0.15)',
-          strokeWidth: 2,
-        },
-        // Reckoning bar (horizontal middle bar)
-        reckoningBar: {
-          stroke: 'rgba(255, 255, 255, 0.2)',
-          strokeWidth: 3,
-        },
-        // Outer frame
-        border: {
-          stroke: 'rgba(255, 255, 255, 0.15)',
-          strokeWidth: 2,
-        },
+      // Column dividers (global for all columns)
+      styles.columnPosts = {
+        fill: 'rgba(255, 255, 255, 0.3)', // High contrast fill for visibility
+        stroke: 'rgba(255, 255, 255, 0.2)',
+        strokeWidth: 2,
+      }
+      // Reckoning bar (horizontal middle bar)
+      styles.reckoningBar = {
+        fill: 'rgba(255, 255, 255, 0.4)', // High contrast fill for visibility
+        stroke: 'rgba(255, 255, 255, 0.25)',
+        strokeWidth: 3,
      }
    }

--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "soroban-monorepo",
-  "version": "4.18.0",
+  "version": "4.19.0",
  "private": true,
  "description": "Beautiful Soroban Flashcard Generator - Monorepo",
  "workspaces": [
--- a/packages/abacus-react/src/AbacusReact.tsx
+++ b/packages/abacus-react/src/AbacusReact.tsx
@@ -27,6 +27,7 @@ export interface BeadStyle {
 }

 export interface ColumnPostStyle {
+  fill?: string;
  stroke?: string;
  strokeWidth?: number;
  opacity?: number;
@@ -34,6 +35,7 @@ export interface ColumnPostStyle {
 }

 export interface ReckoningBarStyle {
+  fill?: string;
  stroke?: string;
  strokeWidth?: number;
  opacity?: number;
@@ -1979,7 +1981,10 @@ export const AbacusReact: React.FC<AbacusConfig> = ({
          const columnStyles = customStyles?.columns?.[colIndex];
          const globalColumnPosts = customStyles?.columnPosts;
          const rodStyle = {
-            fill: "rgb(0, 0, 0, 0.1)", // Default Typst color
+            fill:
+              columnStyles?.columnPost?.fill ||
+              globalColumnPosts?.fill ||
+              "rgb(0, 0, 0, 0.1)", // Default Typst color
            stroke:
              columnStyles?.columnPost?.stroke ||
              globalColumnPosts?.stroke ||
@@ -2017,8 +2022,10 @@ export const AbacusReact: React.FC<AbacusConfig> = ({
            (effectiveColumns - 1) * dimensions.rodSpacing + dimensions.beadSize
          }
          height={dimensions.barThickness}
-          fill="black" // Typst uses black
-          stroke="none"
+          fill={customStyles?.reckoningBar?.fill || "black"} // Typst default is black
+          stroke={customStyles?.reckoningBar?.stroke || "none"}
+          strokeWidth={customStyles?.reckoningBar?.strokeWidth ?? 0}
+          opacity={customStyles?.reckoningBar?.opacity ?? 1}
        />

        {/* Beads */}
Author	SHA1	Message	Date
semantic-release-bot	468bdebe3a	chore(release): 4.19.0 [skip ci] ## [4.19.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.18.1...v4.19.0) (2025-10-19) ### Features * tutorial: add fill color support for dark mode column posts and reckoning bar ([`2eb3ff3`](`2eb3ff3406`))	2025-10-19 18:38:20 +00:00
Thomas Hallock	2eb3ff3406	feat(tutorial): add fill color support for dark mode column posts and reckoning bar Added fill property to ColumnPostStyle and ReckoningBarStyle interfaces in abacus-react to enable high-contrast colors in dark mode. Updated TutorialPlayer to set fill colors for column posts (30% white) and reckoning bar (40% white) when in dark theme mode. This improves visibility of the abacus frame elements in dark mode on the homepage tutorial. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-19 13:37:10 -05:00
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