diff --git a/packages/abacus-react/examples/README.md b/packages/abacus-react/examples/README.md
index 3e366b0b..1df48d73 100644
--- a/packages/abacus-react/examples/README.md
+++ b/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:04:23.092Z_
+_Last updated: 2025-09-19T20:15:34.663Z_
diff --git a/packages/abacus-react/examples/basic-usage.svg b/packages/abacus-react/examples/basic-usage.svg
index ebd483fc..c05b295d 100644
--- a/packages/abacus-react/examples/basic-usage.svg
+++ b/packages/abacus-react/examples/basic-usage.svg
@@ -6,7 +6,7 @@
   "scaleFactor": 1,
   "animated": false
 } -->
-<div class="abacus-container" style="display:inline-block;text-align:center;position:relative"><svg width="75" height="160" viewBox="0 0 75 160" class="abacus-svg  " style="overflow:visible;display:block"><defs><style>
+<svg width="75" height="160" viewBox="0 0 75 160" class="abacus-svg  " style="overflow:visible;display:block"><defs><style>
           /* CSS-based opacity system for hidden inactive beads */
           .abacus-bead {
             transition: opacity 0.2s ease-in-out;
@@ -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="61" y="0" width="3" height="160" fill="rgb(0, 0, 0, 0.1)" stroke="none"></rect><rect x="0" y="30" width="75" height="2" fill="black" stroke="none"></rect><g class="abacus-bead inactive " transform="translate(4.100000000000001, 10)" style="cursor:default;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:default;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="#F18F01" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead inactive " transform="translate(4.100000000000001, 53)" style="cursor:default;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(4.100000000000001, 65.5)" style="cursor:default;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(4.100000000000001, 78)" style="cursor:default;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, 10)" style="cursor:default;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:default;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(29.1, 45.5)" style="cursor:default;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, 65.5)" style="cursor:default;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:default;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(54.1, 10)" style="cursor:default;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(54.1, 33)" style="cursor:default;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(54.1, 45.5)" style="cursor:default;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(54.1, 58)" style="cursor:default;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(54.1, 78)" style="cursor:default;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:default"></rect><rect x="25.5" y="133" width="24" height="24" fill="#f5f5f5" stroke="#ccc" stroke-width="1" rx="3" style="cursor:default"></rect><rect x="50.5" y="133" width="24" height="24" fill="#f5f5f5" stroke="#ccc" stroke-width="1" rx="3" style="cursor:default"></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:none;cursor:default"><text format="[object Object]" style="font-family:monospace;font-weight:bold;font-size:14px" font-size="12px" fill="#333">1</text></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:none;cursor:default"><text format="[object Object]" style="font-family:monospace;font-weight:bold;font-size:14px" font-size="12px" fill="#333">2</text></div></foreignObject><foreignObject x="50.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:none;cursor:default"><text format="[object Object]" style="font-family:monospace;font-weight:bold;font-size:14px" font-size="12px" fill="#333">3</text></div></foreignObject></svg></div>
\ No newline at end of file
+        </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="61" y="0" width="3" height="160" fill="rgb(0, 0, 0, 0.1)" stroke="none"></rect><rect x="0" y="30" width="75" height="2" fill="black" stroke="none"></rect><g class="abacus-bead inactive " transform="translate(4.100000000000001, 10)" style="cursor:default;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:default;touch-action:none;transition:opacity 0.2s ease-in-out"><polygon points="8.399999999999999,0 16.799999999999997,6 8.399999999999999,12 0,6" fill="#F18F01" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead inactive " transform="translate(4.100000000000001, 53)" style="cursor:default;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(4.100000000000001, 65.5)" style="cursor:default;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(4.100000000000001, 78)" style="cursor:default;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, 10)" style="cursor:default;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:default;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(29.1, 45.5)" style="cursor:default;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, 65.5)" style="cursor:default;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:default;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(54.1, 10)" style="cursor:default;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(54.1, 33)" style="cursor:default;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(54.1, 45.5)" style="cursor:default;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(54.1, 58)" style="cursor:default;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(54.1, 78)" style="cursor:default;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:default"></rect><rect x="25.5" y="133" width="24" height="24" fill="#f5f5f5" stroke="#ccc" stroke-width="1" rx="3" style="cursor:default"></rect><rect x="50.5" y="133" width="24" height="24" fill="#f5f5f5" stroke="#ccc" stroke-width="1" rx="3" style="cursor:default"></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:none;cursor:default"><text format="[object Object]" style="font-family:monospace;font-weight:bold;font-size:14px" font-size="12px" fill="#333">1</text></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:none;cursor:default"><text format="[object Object]" style="font-family:monospace;font-weight:bold;font-size:14px" font-size="12px" fill="#333">2</text></div></foreignObject><foreignObject x="50.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:none;cursor:default"><text format="[object Object]" style="font-family:monospace;font-weight:bold;font-size:14px" font-size="12px" fill="#333">3</text></div></foreignObject></svg>
\ No newline at end of file
diff --git a/packages/abacus-react/examples/custom-styling.svg b/packages/abacus-react/examples/custom-styling.svg
index e3f9f9c7..9010c2d7 100644
--- a/packages/abacus-react/examples/custom-styling.svg
+++ b/packages/abacus-react/examples/custom-styling.svg
@@ -24,7 +24,7 @@
     }
   ]
 } -->
-<div class="abacus-container" style="display:inline-block;text-align:center;position:relative"><svg width="75" height="160" viewBox="0 0 75 160" class="abacus-svg  " style="overflow:visible;display:block"><defs><style>
+<svg width="75" height="160" viewBox="0 0 75 160" class="abacus-svg  " style="overflow:visible;display:block"><defs><style>
           /* CSS-based opacity system for hidden inactive beads */
           .abacus-bead {
             transition: opacity 0.2s ease-in-out;
@@ -49,4 +49,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="61" y="0" width="3" height="160" fill="rgb(0, 0, 0, 0.1)" stroke="none"></rect><rect x="0" y="30" width="75" height="2" fill="black" stroke="none"></rect><g class="abacus-bead active " transform="translate(6.5, 17)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#ff6b35" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(6.5, 33)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(6.5, 45.5)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead inactive " transform="translate(6.5, 65.5)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead inactive " transform="translate(6.5, 78)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(31.5, 17)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#ff6b35" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(31.5, 33)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(31.5, 45.5)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(31.5, 58)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead inactive " transform="translate(31.5, 78)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(56.5, 17)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#ff6b35" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(56.5, 33)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(56.5, 45.5)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(56.5, 58)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(56.5, 70.5)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><rect x="0.5" y="133" width="24" height="24" fill="#f5f5f5" stroke="#ccc" stroke-width="1" rx="3" style="cursor:default"></rect><rect x="25.5" y="133" width="24" height="24" fill="#f5f5f5" stroke="#ccc" stroke-width="1" rx="3" style="cursor:default"></rect><rect x="50.5" y="133" width="24" height="24" fill="#f5f5f5" stroke="#ccc" stroke-width="1" rx="3" style="cursor:default"></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:none;cursor:default"><text format="[object Object]" style="font-family:monospace;font-weight:bold;font-size:14px" font-size="12px" fill="#333">7</text></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:none;cursor:default"><text format="[object Object]" style="font-family:monospace;font-weight:bold;font-size:14px" font-size="12px" fill="#333">8</text></div></foreignObject><foreignObject x="50.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:none;cursor:default"><text format="[object Object]" style="font-family:monospace;font-weight:bold;font-size:14px" font-size="12px" fill="#333">9</text></div></foreignObject></svg></div>
\ No newline at end of file
+        </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="61" y="0" width="3" height="160" fill="rgb(0, 0, 0, 0.1)" stroke="none"></rect><rect x="0" y="30" width="75" height="2" fill="black" stroke="none"></rect><g class="abacus-bead active " transform="translate(6.5, 17)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#ff6b35" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(6.5, 33)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(6.5, 45.5)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead inactive " transform="translate(6.5, 65.5)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead inactive " transform="translate(6.5, 78)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(31.5, 17)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#ff6b35" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(31.5, 33)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(31.5, 45.5)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(31.5, 58)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead inactive " transform="translate(31.5, 78)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(56.5, 17)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#ff6b35" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(56.5, 33)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(56.5, 45.5)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(56.5, 58)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><g class="abacus-bead active " transform="translate(56.5, 70.5)" style="cursor:default;touch-action:none;transition:opacity 0.2s ease-in-out"><circle cx="6" cy="6" r="6" fill="#3498db" stroke="#000" stroke-width="0.5"></circle></g><rect x="0.5" y="133" width="24" height="24" fill="#f5f5f5" stroke="#ccc" stroke-width="1" rx="3" style="cursor:default"></rect><rect x="25.5" y="133" width="24" height="24" fill="#f5f5f5" stroke="#ccc" stroke-width="1" rx="3" style="cursor:default"></rect><rect x="50.5" y="133" width="24" height="24" fill="#f5f5f5" stroke="#ccc" stroke-width="1" rx="3" style="cursor:default"></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:none;cursor:default"><text format="[object Object]" style="font-family:monospace;font-weight:bold;font-size:14px" font-size="12px" fill="#333">7</text></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:none;cursor:default"><text format="[object Object]" style="font-family:monospace;font-weight:bold;font-size:14px" font-size="12px" fill="#333">8</text></div></foreignObject><foreignObject x="50.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:none;cursor:default"><text format="[object Object]" style="font-family:monospace;font-weight:bold;font-size:14px" font-size="12px" fill="#333">9</text></div></foreignObject></svg>
\ No newline at end of file
diff --git a/packages/abacus-react/examples/interactive.svg b/packages/abacus-react/examples/interactive.svg
index d686f40a..538fb454 100644
--- a/packages/abacus-react/examples/interactive.svg
+++ b/packages/abacus-react/examples/interactive.svg
@@ -6,7 +6,7 @@
   "animated": false,
   "showNumbers": true
 } -->
-<div class="abacus-container" style="display:inline-block;text-align:center;position:relative"><svg width="75" height="160" viewBox="0 0 75 160" class="abacus-svg  interactive" style="overflow:visible;display:block"><defs><style>
+<svg width="75" height="160" viewBox="0 0 75 160" class="abacus-svg  interactive" style="overflow:visible;display:block"><defs><style>
           /* CSS-based opacity system for hidden inactive beads */
           .abacus-bead {
             transition: opacity 0.2s ease-in-out;
@@ -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="61" y="0" width="3" height="160" fill="rgb(0, 0, 0, 0.1)" stroke="none"></rect><rect x="0" y="30" width="75" 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="#F18F01" 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="#F18F01" 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="#F18F01" 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="#F18F01" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(29.1, 17)" 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, 40)" 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, 52.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, 65)" 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, 77.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 active " transform="translate(54.1, 17)" 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(54.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 inactive " transform="translate(54.1, 53)" 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(54.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(54.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><rect x="50.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"><text format="[object Object]" style="font-family:monospace;font-weight:bold;font-size:14px" font-size="12px" fill="#333">4</text></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"><text format="[object Object]" style="font-family:monospace;font-weight:bold;font-size:14px" font-size="12px" fill="#333">5</text></div></foreignObject><foreignObject x="50.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"><text format="[object Object]" style="font-family:monospace;font-weight:bold;font-size:14px" font-size="12px" fill="#333">6</text></div></foreignObject></svg></div>
\ No newline at end of file
+        </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="61" y="0" width="3" height="160" fill="rgb(0, 0, 0, 0.1)" stroke="none"></rect><rect x="0" y="30" width="75" 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="#F18F01" 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="#F18F01" 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="#F18F01" 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="#F18F01" stroke="#000" stroke-width="0.5"></polygon></g><g class="abacus-bead active " transform="translate(29.1, 17)" 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, 40)" 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, 52.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, 65)" 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, 77.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 active " transform="translate(54.1, 17)" 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(54.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 inactive " transform="translate(54.1, 53)" 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(54.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(54.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><rect x="50.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"><text format="[object Object]" style="font-family:monospace;font-weight:bold;font-size:14px" font-size="12px" fill="#333">4</text></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"><text format="[object Object]" style="font-family:monospace;font-weight:bold;font-size:14px" font-size="12px" fill="#333">5</text></div></foreignObject><foreignObject x="50.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"><text format="[object Object]" style="font-family:monospace;font-weight:bold;font-size:14px" font-size="12px" fill="#333">6</text></div></foreignObject></svg>
\ No newline at end of file
diff --git a/packages/abacus-react/examples/tutorial-mode.svg b/packages/abacus-react/examples/tutorial-mode.svg
index 46e91066..0bce3ec8 100644
--- a/packages/abacus-react/examples/tutorial-mode.svg
+++ b/packages/abacus-react/examples/tutorial-mode.svg
@@ -6,7 +6,7 @@
   "animated": false,
   "showNumbers": true
 } -->
-<div class="abacus-container" style="display:inline-block;text-align:center;position:relative"><svg width="50" height="160" viewBox="0 0 50 160" class="abacus-svg  interactive" style="overflow:visible;display:block"><defs><style>
+<svg width="50" height="160" viewBox="0 0 50 160" class="abacus-svg  interactive" style="overflow:visible;display:block"><defs><style>
           /* CSS-based opacity system for hidden inactive beads */
           .abacus-bead {
             transition: opacity 0.2s ease-in-out;
@@ -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"><text format="[object Object]" style="font-family:monospace;font-weight:bold;font-size:14px" font-size="12px" fill="#333">4</text></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"><text format="[object Object]" style="font-family:monospace;font-weight:bold;font-size:14px" font-size="12px" fill="#333">2</text></div></foreignObject></svg></div>
\ No newline at end of file
+        </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"><text format="[object Object]" style="font-family:monospace;font-weight:bold;font-size:14px" font-size="12px" fill="#333">4</text></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"><text format="[object Object]" style="font-family:monospace;font-weight:bold;font-size:14px" font-size="12px" fill="#333">2</text></div></foreignObject></svg>
\ No newline at end of file
diff --git a/packages/abacus-react/generate-examples.js b/packages/abacus-react/generate-examples.js
index a104a766..82e12143 100644
--- a/packages/abacus-react/generate-examples.js
+++ b/packages/abacus-react/generate-examples.js
@@ -246,7 +246,11 @@ async function generateSVGExamples() {
       const element = React.createElement(AbacusReact, example.props);
 
       // Render using react-dom/server to show the actual component
-      const svgMarkup = renderToStaticMarkup(element);
+      const fullMarkup = renderToStaticMarkup(element);
+
+      // Extract just the SVG content from the rendered HTML
+      const svgMatch = fullMarkup.match(/<svg[^>]*>.*<\/svg>/s);
+      const svgMarkup = svgMatch ? svgMatch[0] : fullMarkup;
 
       // Add metadata as comments
       const svgWithMetadata = `<!-- ${example.description} -->