Fixed NumberFlow mock to properly render column values instead of placeholder text:
- Changed from <text> to <span> elements for foreignObject compatibility
- Ensured value prop is properly passed through to display actual numbers
- Examples now show correct place values (1,2,3 for basic-usage, 4,5,6 for interactive, etc.)
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
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 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>
