Remove HTML wrapper div from generated SVG files to create proper standalone SVG files while preserving authentic component rendering.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Replace hand-crafted SVG generation with proper SSR rendering of the actual React component to showcase authentic output users will see in their applications.
Key improvements:
- Use tsx to run TypeScript directly and import from source instead of built dist
- Implement proper SSR mocking for React Spring animated components and NumberFlow
- Generate authentic component output with real CSS classes, styles, and structure
- Show actual diamond/circle beads, proper positioning, and NumberFlow integration
- Examples now genuinely represent what developers get when using <AbacusReact />
The README examples are now true representations of the component's actual appearance and behavior, providing accurate visual documentation for users.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Replace placeholder SVGs with hand-crafted abacus visualizations that accurately represent the component's appearance and functionality.
Key improvements:
- Generate real abacus SVGs showing proper bead positions for values 123, 456, 789, and 42
- Support all customization features: color schemes, bead shapes, highlights, and custom styles
- Include visual elements: frames, reckoning bar, column posts, gradients, and drop shadows
- Maintain mathematical accuracy in bead positioning (e.g., 7 = 5+2, 8 = 5+3, 9 = 5+4)
- Create browser-free generation using hand-crafted SVG instead of SSR rendering
The README now displays beautiful, accurate abacus images instead of generic placeholders, providing users with clear visual examples of the component's capabilities.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Create GitHub Actions workflow that automatically updates documentation
and examples when AbacusReact source code changes.
- Add update-abacus-examples.yml workflow
- Trigger on source changes, manual dispatch, and weekly schedule
- Build package and generate fresh examples using react-dom/server
- Validate generated files and Storybook build
- Auto-commit and push changes when examples update
- Run without browser dependencies for fast CI execution
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Create enhanced Storybook stories that demonstrate key AbacusReact features
with clean, practical code examples for developers.
- Add AbacusReact.examples.stories.tsx with 4 core usage patterns
- Include working tutorial example with step validation
- Provide copy-paste ready code examples
- Document props and configuration options in story descriptions
- Enable interactive preview of all component capabilities
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Replace tutorial-heavy documentation with balanced coverage of all features.
Include embedded SVG examples that showcase core functionality.
- Reorganize Quick Start section with 4 equal feature areas
- Add SVG examples for basic usage, interactivity, styling, and tutorials
- Balance API documentation between all component capabilities
- Include practical code examples for each major feature
- Generate placeholder SVGs with professional appearance
- Add examples directory with generated SVG files and usage guide
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Create automated script that generates SVG examples and documentation
without requiring puppeteer or browser dependencies.
- Add generate-examples.js with react-dom/server rendering
- Include comprehensive DOM polyfills for SSR compatibility
- Generate placeholder SVGs when SSR encounters animation libraries
- Add pnpm run generate-examples script to package.json
- Support automated CI workflows without browser overhead
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Document complete customization API with detailed examples
- Include tutorial system implementation patterns
- Provide TypeScript interface reference documentation
- Add educational use cases and assessment tool examples
- Cover overlay system, bead reference system, and callbacks
- Include hooks documentation and configuration options
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add @radix-ui/react-tooltip dependency
- Support professional tooltip infrastructure for tutorials
- Enable proper arrow positioning and collision detection
- Provide accessible tooltip components for educational features
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Implement comprehensive tutorial example in Storybook
- Add step-by-step validation logic for educational use
- Include visual feedback system for correct/incorrect interactions
- Demonstrate overlay positioning and click event handling
- Provide restart functionality and progress tracking
- Show real-world usage of customization API for tutorials
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add granular styling interfaces for all abacus components
- Support column-specific and individual bead targeting
- Implement overlay injection system for tooltips and UI elements
- Add enhanced callback system with detailed click events
- Include bead reference system for precise DOM positioning
- Support highlighting and disabling specific elements
- Add foreignObject-based tooltip positioning for accuracy
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Create React context for managing abacus display settings
- Add localStorage persistence for user preferences
- Provide default configuration with validation
- Include hooks for easy context consumption
- Support SSR with proper hydration handling
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Updated tsconfig.json to exclude test files and setup files from the
production build. This resolves TypeScript compilation errors when
building the package, as test files with vitest globals don't need
to be included in the distributed package.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Changed showNumbers from "never" to "always" for all educational abacus
examples in the guide and live preview. This ensures that users can see
the numerical values below each abacus, which is essential for learning
how to read soroban numbers.
Educational examples should always show numbers to help users understand
the relationship between bead positions and their numerical values.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Replaced TypstSoroban and InteractiveAbacus components with the new
@soroban/abacus-react package throughout the web application:
- Updated guide page: replaced all static TypstSoroban instances with AbacusReact
- Updated interactive demo: replaced InteractiveAbacus with AbacusReact
- Updated LivePreview: replaced TypstSoroban with AbacusReact
- Added @soroban/abacus-react dependency to web app package.json
Benefits:
- Unified abacus component across the entire application
- Better performance and smaller bundle size
- Consistent features (interactive prop, showNumbers, etc.)
- Modern React patterns with hooks and proper TypeScript support
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
The value changes counter was auto-incrementing every half second due to
unnecessary value state updates. Fixed by implementing value-change detection
using useRef to track the last value and only increment the counter when the
actual value changes from user interactions.
Also removed debug console.log statements that were used during development.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add showNumbers prop with 'never', 'always', 'toggleable' modes for layout optimization
- Fix SVG height calculation to eliminate extra space when showNumbers='never'
- Reposition NumberFlow components within SVG bounds to prevent overflow
- Add colored borders to size comparison story for visual clarity
- Restore keyboard editing functionality for NumberFlow components
- Maintain NumberFlow requirement while ensuring proper layout constraints
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add SVG-based place value displays perfectly aligned with abacus columns
- Implement keyboard navigation: digits advance right, Tab/Backspace/Shift+Tab move focus
- Integrate @number-flow/react for smooth animated number transitions
- Support wraparound navigation at column boundaries
- Add visual feedback with blue highlighting for active editing state
- Enable seamless two-way binding between place values and bead positions
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Enable both click and gesture interactions to work together seamlessly:
- Click interactions fully restored - beads toggle with neighbor logic
- Gesture interactions preserved - directional dragging still works
- Smart conflict prevention - prevents double-toggling when switching modes
- 100ms grace period after gestures to avoid accidental click triggers
- Dual interaction support - users can mix clicking and dragging freely
Users now have the best of both worlds: precise click control AND
intuitive gesture interactions, with intelligent conflict resolution
to prevent any double-toggling issues.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Replace traditional drag-and-drop with natural gesture directions:
- Heaven beads: drag down toward bar to activate, up to deactivate
- Earth beads: drag up toward bar to activate, down to deactivate
- Support for gesture direction reversals during single interaction
- Independent bead behavior - each responds only to its own gesture
- Click functionality preserved when gestures are disabled
- Enhanced Storybook stories with dedicated gesture testing example
The gesture system tracks cursor movement direction and toggles beads
based on natural abacus movement patterns, creating an intuitive and
satisfying user experience that mirrors real soroban operation.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Constrain bead dragging to vertical movement only (beads slide on rods)
- Add intelligent drag-to-toggle behavior based on direction and bead type
- Heaven beads: drag toward/away from reckoning bar toggles state
- Earth beads: drag toward bar activates, away deactivates
- Require significant drag distance to prevent accidental toggles
- Always snap back to proper position after drag release
- Mirrors real abacus physics and user expectations
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Replace slow config.gentle with fast, snappy animation config
- Use tension: 400, friction: 30, mass: 0.8 for quick bead movement
- Apply fast animation to both position changes and drag snap-back
- Maintains smooth animation while enabling rapid abacus work
- Reflects the speed-focused nature of abacus as a calculation tool
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Implement shape-specific X-offset calculation for proper bead centering
- Diamond beads now use size * 0.7 offset (matching Typst dx: x - bead-size * 0.7)
- Square and circle beads continue using size / 2 offset
- Fix applies to both static and animated positioning
- Ensures pixel-perfect alignment with Typst template output
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add 15+ interactive stories covering all abacus configurations
- Include API documentation with controls for all component properties
- Add usage examples and component breakdowns
- Create gallery overview and individual component stories
- Enable interactive testing of animations, drag, and click functionality
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add comprehensive gallery component matching original gallery layout
- Implement tabbed interface with Basic, Advanced, and Debug examples
- Include live statistics tracking and reset functionality
- Support all 13 original gallery configurations with full interactivity
- Add responsive styling matching original design aesthetic
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add fully interactive React abacus matching Typst template behavior
- Implement independent heaven and earth bead state management
- Add physical bead movement with realistic positioning logic
- Support React Spring animations and @use-gesture drag interactions
- Include multiple color schemes and bead shapes
- Provide hooks for dimensions and state management
- Enable true soroban behavior where beads operate independently
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add complete Storybook 7.6.0 setup with TypeScript support
- Configure React Spring and use-gesture dependencies
- Add dev dependencies for interactive component development
- Enable hot reloading and component documentation
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
All gallery examples regenerated using improved SVG processor that supports
both CLI and Node.js format crop marks for better compatibility.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Improve SVG display with better proportions (max-height: 400px)
- Update gallery statistics and generation timestamp
- Include new SVG content generated with enhanced processor
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Enables generating gallery using Node.js SVG processor instead of CLI version.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add support for Node.js format crop marks with explicit direction links
- Maintain backward compatibility with CLI format using path elements
- Improve parsing logic to handle both transform accumulation methods
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Regenerated styled-system CSS following the removal
of unused components.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Fix animated.div props compatibility in InteractiveAbacus
- Use SVGGraphicsElement for getBBox() in TypstSoroban
- Add explicit number[] typing for test arrays
All TypeScript errors now resolved with proper type safety.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Remove ServerSorobanSVG and TypstSorobanSuspense components
that were not actively used in the application.
This simplifies the architecture to focus on the core
TypstSoroban and InteractiveAbacus components.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Replace custom bead annotation processing with official
extractBeadAnnotations from @soroban/templates package.
Remove fallback logic to ensure clear error reporting.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Enhanced GitHub Actions workflow to automatically generate comprehensive
crop mark examples and unified gallery alongside existing template examples.
Updates include:
- Generate crop mark gallery with node generate-gallery.js
- Build unified gallery with before/after crop comparisons
- Commit and track gallery/*.svg and gallery-unified.html files
- Enhanced summary reporting with post-processing features
- Detailed documentation of viewBox optimization and bead annotations
The workflow now demonstrates the complete SVG post-processing pipeline
with working crop mark detection and optimization examples that update
automatically when templates change.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Update build-unified-gallery.js to use the actual crop examples that are
generated by build-gallery.js instead of mismatched hardcoded examples.
This ensures that all crop examples in the unified gallery properly show
before/after viewport cropping comparisons with working crop mark detection.
Now shows comprehensive demonstrations for:
- crop-single-1: Single digit with optimized viewBox
- crop-quad-9999: Four-digit number with crop boundaries
- crop-large-scale-0: Zero representation with large scale
- crop-hidden-inactive-555: Clean layout with hidden inactive beads
- crop-mixed-geometry-321: Circle beads with heaven-earth colors
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add detailed documentation for the official SVG post-processing system:
- Quick start examples with code snippets showing processSVG usage
- Before/after SVG optimization demonstrations (270×210px → 58×136px)
- Complete API reference with TypeScript interfaces
- Browser usage examples with File API and drag-drop
- Interactive bead processing examples (bead:// links → data attributes)
- Error handling patterns with SVGCropError
- Performance benefits: 67% average file size reduction
Positions the SVG post-processor as THE recommended approach for
processing Typst-generated soroban SVGs with comprehensive feature
coverage including crop marks, bead annotations, and viewBox optimization.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Export all SVG post-processing functions (processSVG, processSVGFile,
extractCropMarks, extractBeadAnnotations, SVGCropError) from the main
@soroban/templates module for easy access.
Includes comprehensive TypeScript definitions with complete interfaces
for ProcessResult, CropResult, BeadData, and ProcessOptions.
This makes the SVG post-processor the official recommended approach
for processing Typst-generated soroban SVGs.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add svg-crop-processor.js to published package files to make the comprehensive
SVG post-processing functionality available to external consumers.
The processor provides:
- Crop mark detection and viewBox optimization (60-80% size reduction)
- Interactive bead annotation extraction (bead:// links to data attributes)
- Automatic width/height adjustment for proper aspect ratios
- Browser and Node.js compatibility with zero dependencies
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Fix crop mark detection to use tiny 0.1pt markers instead of dashed lines
- Update SVG width/height attributes to match cropped viewBox dimensions
- Remove CSS max-width constraint to show actual size differences
- Improve horizontal/vertical cropping visualization in gallery
- Now both crop mark positioning and size reduction are clearly visible
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Convert crop marks to dashed lines spanning full crop boundaries for better visualization
- Add invisible point markers for precise algorithmic viewBox detection
- Fix crop mark positioning to avoid confusion from line lengths in extraction
- Update package.json to use unified gallery system (build-unified-gallery.js)
- Create comprehensive tabbed gallery combining all examples in one interface
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Fix extract-viewbox.js to properly walk up SVG hierarchy and accumulate all parent transforms
- Replace broken simple coordinate extraction with correct transform accumulation
- Add crop marks demonstration page showing before/after viewBox optimization
- Create demo-crop-comparison.js for visual proof of 79-95% size reduction
- Update build-gallery.js to include all 13 crop mark examples in static gallery
- Gallery now properly shows comprehensive crop marks showcase
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Move crop marks from corner-based to edge-based positioning (top, bottom, left, right)
- Position crop marks relative to actual bead boundaries within soroban coordinate system
- Add 6 new gallery examples showcasing crop marks with diverse configurations
- Create comprehensive unit test suite (test-crop-marks-unit.js) with 18 assertions
- Update README documentation with edge-based crop mark scheme
- Simplify gallery generation by removing redundant non-static version
- All tests pass: crop marks now correctly define SVG viewBox boundaries
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove redundant gallery.html in favor of gallery-static.html only
- Consolidate npm scripts: `npm run gallery` now generates and opens static gallery
- Add crop marks examples to gallery with visible red boundaries
- Fix Typst syntax error in single-card.typ crop marks implementation
Static gallery provides better UX with embedded SVGs and no external dependencies.
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
Add crop marks system to both flashcards.typ and single-card.typ templates:
- Invisible rectangular marks at four corners plus center reference
- Optional debugging visibility with show-crop-marks: true
- Configurable crop-margin parameter for boundary spacing
- Link annotations for programmatic identification
- Comprehensive documentation with processing examples
- Post-processing script for automated viewBox calculation
Eliminates need for manual SVG cropping by providing precise boundaries
for automated viewBox handling and consistent template output.
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
- Add build-gallery.js: Static site generator that embeds SVG content directly
- Creates gallery-static.html: Complete standalone gallery page
- No CORS issues - all SVGs embedded as inline content
- Clean, professional layout with hover effects and responsive grid
- Build stats showing embedded/missing SVGs with timestamps
- Add npm scripts: gallery:build, gallery:static, updated gallery:clean
- Perfect for sharing or hosting - single self-contained HTML file
Usage:
- npm run gallery:static (generate SVGs + build static gallery)
- npm run gallery:build (just build from existing SVGs)
This replaces the fetch()-based approach that had CORS issues.
The static generator creates a complete, shareable HTML file.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
