Adjusted SVG text element positioning to precisely match React component
foreignObject calculations, eliminating the "down" positioning offset that
made server-rendered SVGs appear misaligned compared to client-rendered versions.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Updated SVG text generation to use the exact same font size calculation as
the React component: Math.max(8, 14 * scaleFactor). This ensures perfect
visual consistency between live React components and generated SVG examples.
Font styling now matches exactly:
- fontSize: Math.max(8, 14 * scaleFactor)
- fontFamily: 'monospace'
- fontWeight: 'bold'
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added post-processing to convert foreignObject elements containing HTML divs
to native SVG text elements for better browser compatibility. Numbers now
display properly in GitHub's SVG renderer using:
- Native <text> elements instead of <foreignObject><div>
- Proper positioning calculated from original foreignObject dimensions
- Centered text with monospace font styling
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Simplified NumberFlow mock to return raw text strings instead of React elements,
ensuring proper text rendering within foreignObject elements in SVG. Numbers
now display correctly as plain text content in the number boxes.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
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>
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>
Thomas Hallock