fix: use aggressive NumberFlow mock for SVG text rendering

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>

packages/abacus-react/examples/README.md

@@ -26,4 +26,4 @@ Or referenced in HTML:
 ---
 
 _Generated automatically by generate-examples.js using react-dom/server_
-_Last updated: 2025-09-19T20:40:59.799Z_
+_Last updated: 2025-09-19T20:42:42.450Z_

packages/abacus-react/examples/tutorial-mode.svg

@@ -31,4 +31,4 @@
           .abacus-svg.hide-inactive-mode:not(.interactive) .abacus-bead.hidden-inactive {
             opacity: 0 !important;
           }
-        </style></defs><rect x="11" y="0" width="3" height="160" fill="rgb(0, 0, 0, 0.1)" stroke="none"></rect><rect x="36" y="0" width="3" height="160" fill="rgb(0, 0, 0, 0.1)" stroke="none"></rect><rect x="0" y="30" width="50" height="2" fill="black" stroke="none"></rect><g class="abacus-bead inactive " transform="translate(4.100000000000001, 10)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="rgb(211, 211, 211)" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(4.100000000000001, 33)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="#A23B72" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(4.100000000000001, 45.5)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="#A23B72" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(4.100000000000001, 58)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="#A23B72" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(4.100000000000001, 70.5)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="#A23B72" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead inactive " transform="translate(29.1, 10)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="rgb(211, 211, 211)" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(29.1, 33)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="#2E86AB" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(29.1, 45.5)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="#2E86AB" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead inactive " transform="translate(29.1, 65.5)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="rgb(211, 211, 211)" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead inactive " transform="translate(29.1, 78)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="rgb(211, 211, 211)" stroke="#000" stroke-width="0.5"></polygon></g><rect x="0.5" y="133" width="24" height="24" fill="#f5f5f5" stroke="#ccc" stroke-width="1" rx="3" style="cursor:pointer"></rect><rect x="25.5" y="133" width="24" height="24" fill="#f5f5f5" stroke="#ccc" stroke-width="1" rx="3" style="cursor:pointer"></rect><foreignObject x="0.5" y="137" width="24" height="16" style="pointer-events:none"><div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;font-family:monospace;font-weight:bold;pointer-events:auto;cursor:pointer"><span style="font-size:14px;color:#333;font-family:monospace;font-weight:bold">4</span></div></foreignObject><foreignObject x="25.5" y="137" width="24" height="16" style="pointer-events:none"><div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;font-family:monospace;font-weight:bold;pointer-events:auto;cursor:pointer"><span style="font-size:14px;color:#333;font-family:monospace;font-weight:bold">2</span></div></foreignObject></svg>
+        </style></defs><rect x="11" y="0" width="3" height="160" fill="rgb(0, 0, 0, 0.1)" stroke="none"></rect><rect x="36" y="0" width="3" height="160" fill="rgb(0, 0, 0, 0.1)" stroke="none"></rect><rect x="0" y="30" width="50" height="2" fill="black" stroke="none"></rect><g class="abacus-bead inactive " transform="translate(4.100000000000001, 10)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="rgb(211, 211, 211)" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(4.100000000000001, 33)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="#A23B72" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(4.100000000000001, 45.5)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="#A23B72" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(4.100000000000001, 58)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="#A23B72" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(4.100000000000001, 70.5)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="#A23B72" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead inactive " transform="translate(29.1, 10)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="rgb(211, 211, 211)" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(29.1, 33)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="#2E86AB" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(29.1, 45.5)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="#2E86AB" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead inactive " transform="translate(29.1, 65.5)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="rgb(211, 211, 211)" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead inactive " transform="translate(29.1, 78)" style="cursor:grab;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="rgb(211, 211, 211)" stroke="#000" stroke-width="0.5"></polygon></g><rect x="0.5" y="133" width="24" height="24" fill="#f5f5f5" stroke="#ccc" stroke-width="1" rx="3" style="cursor:pointer"></rect><rect x="25.5" y="133" width="24" height="24" fill="#f5f5f5" stroke="#ccc" stroke-width="1" rx="3" style="cursor:pointer"></rect><foreignObject x="0.5" y="137" width="24" height="16" style="pointer-events:none"><div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;font-family:monospace;font-weight:bold;pointer-events:auto;cursor:pointer">4</div></foreignObject><foreignObject x="25.5" y="137" width="24" height="16" style="pointer-events:none"><div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;font-family:monospace;font-weight:bold;pointer-events:auto;cursor:pointer">2</div></foreignObject></svg>

packages/abacus-react/generate-examples.js

@@ -85,23 +85,15 @@ if (typeof global.window === 'undefined') {
     }
   };
 
-  // Mock @number-flow/react to return the actual value properly
+  // Mock @number-flow/react with aggressive SVG text replacement
   require.cache[require.resolve('@number-flow/react')] = {
     exports: {
       __esModule: true,
       default: ({ children, value, format, style, ...props }) => {
         // Use value if provided, otherwise fallback to children
         const displayValue = value !== undefined ? value : children;
-        // Return a simple span element that will work in foreignObject context
-        return React.createElement('span', {
-          style: {
-            fontSize: '12px',
-            color: '#333',
-            fontFamily: 'monospace',
-            fontWeight: 'bold',
-            ...style
-          }
-        }, String(displayValue));
+        // Return raw text content - React will render this as a text node
+        return String(displayValue);
       }
     }
   };