From 8024d0a25cba3b9e06df3a346d4e11545874698e Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Fri, 19 Sep 2025 15:49:53 -0500
Subject: [PATCH] fix: correct SVG text positioning to match React component
 alignment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 packages/abacus-react/examples/README.md          |  2 +-
 packages/abacus-react/examples/basic-usage.svg    |  2 +-
 packages/abacus-react/examples/custom-styling.svg |  2 +-
 packages/abacus-react/examples/interactive.svg    |  2 +-
 packages/abacus-react/examples/tutorial-mode.svg  |  2 +-
 packages/abacus-react/generate-examples.js        | 11 +++++++++--
 6 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/abacus-react/examples/README.md b/packages/abacus-react/examples/README.md
index d0615e4a..b171f002 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:45:33.669Z_
+_Last updated: 2025-09-19T20:47:46.001Z_
diff --git a/packages/abacus-react/examples/basic-usage.svg b/packages/abacus-react/examples/basic-usage.svg
index 29b4221c..509f34d1 100644
--- a/packages/abacus-react/examples/basic-usage.svg
+++ b/packages/abacus-react/examples/basic-usage.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="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><text x="12.5" y="149" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="14" fill="#333">1</text><text x="37.5" y="149" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="14" fill="#333">2</text><text x="62.5" y="149" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="14" fill="#333">3</text></svg>
\ 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><text x="12.5" y="145" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="14" fill="#333">1</text><text x="37.5" y="145" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="14" fill="#333">2</text><text x="62.5" y="145" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="14" fill="#333">3</text></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 33888e6f..f01a0159 100644
--- a/packages/abacus-react/examples/custom-styling.svg
+++ b/packages/abacus-react/examples/custom-styling.svg
@@ -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><text x="12.5" y="149" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="14" fill="#333">7</text><text x="37.5" y="149" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="14" fill="#333">8</text><text x="62.5" y="149" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="14" fill="#333">9</text></svg>
\ 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><text x="12.5" y="145" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="14" fill="#333">7</text><text x="37.5" y="145" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="14" fill="#333">8</text><text x="62.5" y="145" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="14" fill="#333">9</text></svg>
\ No newline at end of file
diff --git a/packages/abacus-react/examples/interactive.svg b/packages/abacus-react/examples/interactive.svg
index 4f7184a2..b292fec2 100644
--- a/packages/abacus-react/examples/interactive.svg
+++ b/packages/abacus-react/examples/interactive.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="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><text x="12.5" y="149" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="14" fill="#333">4</text><text x="37.5" y="149" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="14" fill="#333">5</text><text x="62.5" y="149" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="14" fill="#333">6</text></svg>
\ 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><text x="12.5" y="145" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="14" fill="#333">4</text><text x="37.5" y="145" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="14" fill="#333">5</text><text x="62.5" y="145" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="14" fill="#333">6</text></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 8de8757d..5406a81b 100644
--- a/packages/abacus-react/examples/tutorial-mode.svg
+++ b/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><text x="12.5" y="149" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="14" fill="#333">4</text><text x="37.5" y="149" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="14" fill="#333">2</text></svg>
\ 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><text x="12.5" y="145" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="14" fill="#333">4</text><text x="37.5" y="145" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="14" fill="#333">2</text></svg>
\ No newline at end of file
diff --git a/packages/abacus-react/generate-examples.js b/packages/abacus-react/generate-examples.js
index a045729e..bd814a21 100644
--- a/packages/abacus-react/generate-examples.js
+++ b/packages/abacus-react/generate-examples.js
@@ -274,10 +274,17 @@ async function generateSVGExamples() {
 
           if (xMatch && yMatch && widthMatch && heightMatch) {
             const x = parseFloat(xMatch[1]) + parseFloat(widthMatch[1]) / 2; // Center horizontally
-            const y = parseFloat(yMatch[1]) + parseFloat(heightMatch[1]) / 2 + 4; // Center vertically with slight offset
+
+            // Match React component positioning exactly:
+            // foreignObject y = (baseHeight + 25) - (8 * scaleFactor)
+            // foreignObject height = 16 * scaleFactor
+            // Text should be centered within foreignObject
+            const scaleFactor = example.props.scaleFactor || 1.0;
+            const foreignObjectY = parseFloat(yMatch[1]);
+            const foreignObjectHeight = parseFloat(heightMatch[1]);
+            const y = foreignObjectY + foreignObjectHeight / 2; // Center within foreignObject
 
             // Calculate font size to match React component: Math.max(8, 14 * scaleFactor)
-            const scaleFactor = example.props.scaleFactor || 1.0;
             const fontSize = Math.max(8, 14 * scaleFactor);
 
             return `<text x="${x}" y="${y}" text-anchor="middle" dominant-baseline="middle" font-family="monospace" font-weight="bold" font-size="${fontSize}" fill="#333">${textContent.trim()}</text>`;