- Fix column indexing bug where tens/ones columns were swapped
- Add boundary checks to prevent values exceeding abacus capacity
- Improve earth and heaven bead click logic with proper place value mapping
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Implement click handlers for heaven and earth beads with data attributes
- Add proper abacus logic for bead activation/deactivation
- Earth beads follow traditional stacking behavior (0-3 position numbering)
- Heaven beads toggle 5-value contributions per column
- Add visual feedback with hover effects and cursor changes
- Update instructions to guide users on interactive functionality
- Support multi-column place value calculations
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Minor build output change adding strict mode directive to generated
client distribution file.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Update generated CSS files to include styles for new interactive
components and updated UI elements.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add @react-spring/web for animation features and @types/jsdom for
development tooling. These support interactive UI components and
build processes.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Enhance processBeadAnnotations to better handle different SVG shape
patterns and prevent duplicate data attributes. Adds specific diamond
shape detection and general fallback for all shape elements.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implement processBeadAnnotations function to convert link-wrapped beads
to data attributes in browser-generated SVGs. This ensures both server
and client SVG generation provide the same semantic markup for
interactive features.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Parse bead:// link annotations and convert them to structured data attributes:
- data-bead-type: "heaven" or "earth"
- data-bead-column: column index (0-based)
- data-bead-position: position within column for earth beads (0-3)
- data-bead-active: "1" for active, "0" for inactive
This enables easy JavaScript access to bead metadata for interactive features.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Wrap each abacus bead in link elements with structured annotation IDs using the bead:// URL scheme. This enables post-processing to extract bead metadata and add data attributes.
Annotation format:
- Heaven beads: bead://heaven-col{index}-active{0|1}
- Earth beads: bead://earth-col{index}-pos{0-3}-active{0|1}
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added InteractiveAbacus component for educational demonstration
- Integrated abacus display at bottom of reading section in guide
- Removed click detection functionality as requested
- Added preset buttons for value demonstration
- Enhanced guide with step-by-step interactive practice section
- Cleaned up data attributes and click handling code
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Update generated CSS styles for memory quiz results grid component
and update pnpm lockfile with new typst dependencies.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Replace detailed results list with ResultsCardGrid component that shows
all cards revealed in the same grid arrangement as during guessing.
Adds visual success/failure indicators with green/red borders and
checkmark/X badges on each card.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Update prefix matching logic to use the simple, working approach where
found numbers are filtered from prefix checks. Fix test expectations
that were contradictory to ensure consistent behavior.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add missing @myriaddreamin/typst-all-in-one.ts package and peer dependencies.
This restores the working WASM loading functionality that was previously
working perfectly.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add Vitest test framework setup with jsdom environment
- Create memory-quiz-utils.ts with testable prefix matching functions
- Add comprehensive test suite covering:
- Prefix matching logic with found/unfound number exclusion
- Edge cases for input validation
- 55/555 bug scenario reproduction and fix
- Integration test scenarios
Tests currently have 3 failures that need debugging in prefix logic.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Increase abacus SVG dimensions from 200pt×250pt to 600pt×500pt for better visibility during memory flash
- Remove SVG width/height attributes during optimization to allow proper CSS scaling
- Add transparent background support to TypstSoroban component
- Fix prefix matching logic to exclude already found numbers, resolving issue where entering 555 was blocked after finding 55
- Improve memory quiz card grid layout with adaptive sizing and better responsive design
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Fix infinite re-rendering in AbacusDisplayContext by removing initialConfig dependency from useEffect
- Resolve dropdown not dismissing on outside clicks by removing conflicting CSS animation
- Add proper event handlers and positioning for dropdown UX
- Maintain form control interactions while allowing dropdown dismissal
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add lazy loading for last 3 grid components
- Add visual indicators for lazy components
- Update info section to explain preloading and lazy loading features
- Demonstrate progressive enhancement performance benefits
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove enableServerFallback=true overrides from guide page (6 instances)
- Remove enableServerFallback=true overrides from memory quiz (2 instances)
- All abaci now use optimized browser-side generation by default
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Implement timeout-based loading state (100ms delay)
- Only show loading spinner for genuinely slow operations
- Cancel timeout if generation completes quickly
- Prevent flash for cached/fast renders while preserving UX for slow ones
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add separate chunks for WASM modules and typst.ts library
- Enable async loading with better code splitting
- Optimize chunk caching for improved performance
- Separate typst packages into dedicated async chunks
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add lazy loading prop with interactive placeholders
- Minimize loading indicators (remove verbose text, just icons)
- Increase flash prevention delay from 100ms to 300ms
- Smart status indicators for WASM preloading state
- Cleaner error states with minimal visual feedback
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Auto-preload WASM and template in background on module import
- Add promise caching for template loading to prevent duplicate API calls
- Parallel preloading of WASM renderer and Typst template
- Better logging and error recovery for preload operations
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add 2.2x scale to single-digit abaci in guide page for better visibility
- Add 1.8x scale to multi-digit abaci in guide page
- Add 2.5x scale to arithmetic example abaci in guide page
- Add 1.8x scale to live preview abaci with proper overflow handling
- Add 2.0x scale to main display abaci in memory quiz
- Add 2.8x scale to results grid abaci in memory quiz
- Ensure all abaci are proportional to their containers instead of tiny specs
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Replace fetch('/api/preview') calls with direct TypstSoroban component usage
- Remove async state management for faster, more reliable previews
- Parse preview numbers locally with getPreviewNumbers helper function
- Eliminate network dependencies for instant preview updates
- Improve performance and user experience on /create page
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Update preview API to use generateSorobanSVG instead of SorobanGeneratorBridge
- Replace ServerSorobanSVG with TypstSoroban in guide page
- Replace ServerSorobanSVG with TypstSoroban in memory quiz
- Eliminate all Python bridge dependencies for SVG generation
- Ensure consistent browser-native rendering across all components
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Install @myriaddreamin/typst.ts package for WebAssembly Typst rendering
- Create server-side API endpoints for template loading and SVG generation
- Implement TypstSoroban React component with error handling and loading states
- Add test page for verifying typst.ts integration
- Configure webpack for WASM support and resolve browser compatibility
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add React Context for app-wide abacus styling (localStorage persistence)
- Create AbacusDisplayDropdown with style controls in nav bar
- Add AppNavBar component with adaptive behavior (minimal for games)
- Remove duplicate navigation headers from guide and home pages
- Delete client-side SorobanSVG component - use only server-side Python/Typst
- Clean up generateSorobanSVG and generateMockSorobanSVG functions
- All abacus displays now use consistent global configuration
- Settings persist across page reloads and browser sessions
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove unnecessary "✓ Card 1", "✓ Card 2" badges from input phase
- Users can see progress directly from flipped cards in the grid below
- Cleaner, less cluttered interface with better focus on main interactions
- Eliminates visual redundancy and saves vertical space
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Install concurrently package for running multiple processes
- Update dev script to run both Next.js dev and Panda CSS watch
- Automatically regenerate CSS when styles change during development
- Eliminates need to manually run panda codegen after CSS changes
Dev script now runs:
- Next.js development server
- Panda CSS file watcher for automatic style regeneration
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Generated updated CSS for new layout improvements
- Includes gradient borders, modern styling, and compact spacing
- Ensures all new CSS classes are properly generated
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Educational improvements:
- Hide numbers from correct answer badges, show only ✓ Card indicators
- Focus purely on abacus visual learning without number crutches
- Maintain soroban-only display when cards flip over
UX improvements:
- Eliminate scrolling requirement with compact, efficient layout
- Replace text-input-like typing area with game-friendly design
- Add gradient borders, modern styling, and emoji prompts
- Reduce card sizes and spacing for better viewport utilization
- Add animated cursor indicator for active typing state
Interface polish:
- Modern gradients and shadows instead of flat borders
- System fonts instead of monospace for friendlier feel
- Compact information display with better visual hierarchy
- Consistent spacing and proportions throughout
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove excessive whitespace above timer bar in DisplayPhase
- Fix End Quiz button positioning (no longer overlaps timer)
- Optimize viewport usage with full-height flex layout
- Reduce side margins and padding for better space utilization
- Convert all phases to consistent flex-based layout system
- Ensure game fits in viewport without scrolling required
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Fixed path duplication bug in bridge constructor
- Updated bridge to use event-based PythonShell approach
- Updated web preview route to use correct Python script path
- Web app now generates real SVGs from Python/Typst instead of mock SVGs
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added format and mode parameters to FlashcardConfig interface to properly
support SVG generation through the existing Python bridge. Updated web app
to use SorobanGeneratorBridge instead of basic generator.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Removed __pycache__ files that should not be tracked in version control.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Updated pnpm-lock.yaml to reflect dependency changes and installations
made during the build and development process.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Replaced mock SVG generation with direct calls to the Python bridge that
supports actual SVG generation. The preview API now:
- Calls the Python bridge (bridge.py) directly via spawn()
- Passes proper single-card SVG generation config
- Returns authentic soroban SVGs generated by Typst
- Maintains fallback to mock SVGs on error
This fixes the issue where PDF content was being displayed instead of SVG
by bypassing the broken Node.js wrapper and using the working Python
generator that has supported SVG for weeks.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added exports for SorobanGeneratorBridge to enable access to the Python
bridge generator that supports SVG generation. This allows the web app
to use the more capable bridge generator instead of the basic PDF-only
generator.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added explicit number[] type annotation to examples array to resolve
TypeScript implicit type inference error. This ensures the array type
is properly determined during compilation.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Updated Panda CSS styling to use the correct 'gap' property instead of the
invalid 'space' property that was causing TypeScript compilation errors.
This ensures proper spacing in ordered lists.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed form.Subscribe selector functions to return proper FormState objects
instead of just values. This resolves TypeScript compilation errors where
the selector was expected to return the full state but was only returning
the values property.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Removed unnecessary throw statement that was breaking component error handling.
The component already gracefully handles errors by setting error state and
displaying fallback UI, so throwing was causing crashes instead of graceful
degradation. Also fixed TypeScript type issues with DOM element casting.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed missing await keywords in asset store operations that were causing
type errors during build. Both download routes now properly await the
asynchronous asset store.get() calls.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add proper error handling around temp_typst.unlink() in generate.py to prevent crashes when temp file doesn't exist
- Modify ServerSorobanSVG component to throw errors instead of showing fallback when backend fails
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Regenerated Panda CSS after converting memory quiz to use css() functions
- Added new CSS chunks for games pages, memory quiz, and various components
- Updated main styles.css with all required utility classes
- Includes complex animations, gradients, and transforms needed for memory quiz
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added test HTML files for Panda CSS and memory quiz development
- Created public directory with game assets and test files
- Includes simple layout tests and memory quiz backup files
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added comprehensive soroban flashcards in PDF format
- 8-page document with educational soroban configurations
- Generated from Typst with proper metadata and keywords
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Detailed technical spec for converting Python template to React
- Architecture for ServerSorobanSVG integration and game state management
- Complete UI/UX specifications with animation and accessibility requirements
- Implementation roadmap with performance and quality criteria
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Thomas Hallock