**Problem:**
- player-ownership.ts imported drizzle-orm and @/db at top level
- When RoomMemoryPairsProvider imported client-safe utilities, Webpack bundled ALL imports including database code
- This caused hydration error: "The 'original' argument must be of type Function"
- Node.js util.promisify was being called in browser context
**Solution:**
1. Created player-ownership.client.ts with ONLY client-safe utilities
- No database imports
- Safe to import from 'use client' components
- Contains: buildPlayerOwnershipFromRoomData(), buildPlayerMetadata(), helper functions
2. Updated player-ownership.ts to re-export client utilities and add server-only functions
- Re-exports everything from .client.ts
- Adds buildPlayerOwnershipMap() (async, database-backed)
- Safe to import from server components/API routes
3. Updated RoomMemoryPairsProvider to import from .client.ts
**Result:**
- No more hydration errors on /arcade/room
- Client bundle doesn't include database code
- Server code can still use both client and server utilities
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
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>
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>
