craft/src/components/basic/Menu.toHtml.test.ts

@@ -0,0 +1,32 @@
+import { describe, test, expect } from 'vitest';
+import { Menu } from './Menu';
+
+const toHtml = (Menu as any).toHtml;
+
+describe('Menu.toHtml deterministic + unique scope ids (thread node id, no Math.random)', () => {
+  test('same node id -> identical output across calls (deterministic)', () => {
+    const { html: html1 } = toHtml({}, '', 'node-menu1');
+    const { html: html2 } = toHtml({}, '', 'node-menu1');
+    expect(html1).toBe(html2);
+  });
+
+  test('different node ids -> different, non-colliding scope classes (identical default links, no collision)', () => {
+    const { html: html1 } = toHtml({}, '', 'node-menu1');
+    const { html: html2 } = toHtml({}, '', 'node-menu2');
+    const cls1 = html1.match(/\.([a-z0-9_]+-link):hover/)![1];
+    const cls2 = html2.match(/\.([a-z0-9_]+-link):hover/)![1];
+    expect(cls1).not.toBe(cls2);
+  });
+
+  test('the anchor class= and the <style> hover rule use the SAME scope', () => {
+    const { html } = toHtml({}, '', 'node-menu1');
+    const hoverCls = html.match(/\.([a-z0-9_]+-link):hover/)![1];
+    expect(html).toContain(`class="${hoverCls}"`);
+  });
+
+  test('no nodeId (legacy 2-arg call): still deterministic across repeated calls, not random', () => {
+    const { html: html1 } = toHtml({}, '');
+    const { html: html2 } = toHtml({}, '');
+    expect(html1).toBe(html2);
+  });
+});

craft/src/components/basic/Menu.tsx

@@ -1,7 +1,7 @@
 import React, { CSSProperties, useState } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
-import { escapeHtml, escapeAttr, safeUrl } from '../../utils/escape';
+import { escapeHtml, escapeAttr, safeUrl, scopeId } from '../../utils/escape';
 
 /* ---------- Types ---------- */
 
@@ -124,7 +124,7 @@ Menu.craft = {
 
 /* ---------- HTML export ---------- */
 
-(Menu as any).toHtml = (props: MenuProps, _childrenHtml: string) => {
+(Menu as any).toHtml = (props: MenuProps, _childrenHtml: string, nodeId?: string) => {
   const linkCol = props.linkColor || '#3f3f46';
   const hoverCol = props.linkHoverColor || '#3b82f6';
   const ctaBg = props.ctaBgColor || '#3b82f6';
@@ -150,12 +150,15 @@ Menu.craft = {
 
   const links = props.links || defaultLinks;
 
-  // Unique ID suffix for scoped CSS
+  // Scope for the hover CSS classes below. Deterministic AND unique: scoped
-  const scopeId = `menu-${Math.random().toString(36).slice(2, 8)}`;
+  // on the Craft node id so two Menu instances with identical/default links
+  // don't collide on the same `.menu-link`/`.menu-cta` class names (which
+  // would let one instance's hover styling bleed into the other's).
+  const scope = scopeId(nodeId, JSON.stringify(links) + orientation + alignment, 'menu');
 
   const linksHtml = links.map((link) => {
     const target = link.isExternal ? ' target="_blank" rel="noopener noreferrer"' : '';
-    const cls = link.isCta ? `${scopeId}-cta` : `${scopeId}-link`;
+    const cls = link.isCta ? `${scope}-cta` : `${scope}-link`;
     const linkStyle = cssPropsToString({
       textDecoration: 'none',
       fontSize: fSize,
@@ -170,8 +173,8 @@ Menu.craft = {
   }).join('\n    ');
 
   const hoverCss = `<style>
-  .${scopeId}-link:hover { color: ${hoverCol} !important; }
+  .${scope}-link:hover { color: ${hoverCol} !important; }
-  .${scopeId}-cta:hover { filter: brightness(1.1); }
+  .${scope}-cta:hover { filter: brightness(1.1); }
 </style>`;
 
   return {

craft/src/components/forms/InputField.toHtml.test.ts

@@ -27,3 +27,34 @@ describe('InputField.toHtml accessibility (F2.1)', () => {
     expect(html).toContain('aria-label="Phone number"');
   });
 });
+
+describe('InputField.toHtml deterministic + unique ids (thread node id, resolves id-collision finding)', () => {
+  test('label for= still matches input id= after threading the node id', () => {
+    const { html } = toHtml({ label: 'Your Name', name: 'name' }, '', 'node-in1');
+    const forMatch = html.match(/<label for="([^"]+)"/);
+    const idMatch = html.match(/<input id="([^"]+)"/);
+    expect(forMatch![1]).toBe(idMatch![1]);
+  });
+
+  test('same node id -> identical output across calls (deterministic, no Math.random)', () => {
+    const { html: html1 } = toHtml({ label: 'Name', name: 'name' }, '', 'node-in1');
+    const { html: html2 } = toHtml({ label: 'Name', name: 'name' }, '', 'node-in1');
+    expect(html1).toBe(html2);
+  });
+
+  test('two instances with the SAME default name but different node ids do not collide', () => {
+    const { html: html1 } = toHtml({ label: 'Your Name', name: 'name' }, '', 'node-in1');
+    const { html: html2 } = toHtml({ label: 'Your Name', name: 'name' }, '', 'node-in2');
+    const id1 = html1.match(/<input id="([^"]+)"/)![1];
+    const id2 = html2.match(/<input id="([^"]+)"/)![1];
+    expect(id1).not.toBe(id2);
+  });
+
+  test('no nodeId (legacy 2-arg call): id derivation stays deterministic, not random', () => {
+    const { html: html1 } = toHtml({ label: 'Email', name: 'email' }, '');
+    const { html: html2 } = toHtml({ label: 'Email', name: 'email' }, '');
+    const id1 = html1.match(/<input id="([^"]+)"/)![1];
+    const id2 = html2.match(/<input id="([^"]+)"/)![1];
+    expect(id1).toBe(id2);
+  });
+});

craft/src/components/forms/InputField.tsx

@@ -1,7 +1,7 @@
 import React, { CSSProperties } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
-import { escapeHtml, escapeAttr, slugId } from '../../utils/escape';
+import { escapeHtml, escapeAttr, scopeId } from '../../utils/escape';
 
 interface InputFieldProps {
   label?: string;
@@ -87,7 +87,7 @@ InputField.craft = {
 
 /* ---------- HTML export ---------- */
 
-(InputField as any).toHtml = (props: InputFieldProps, _childrenHtml: string) => {
+(InputField as any).toHtml = (props: InputFieldProps, _childrenHtml: string, nodeId?: string) => {
   const wrapStyle = cssPropsToString({
     display: 'flex',
     flexDirection: 'column',
@@ -95,9 +95,13 @@ InputField.craft = {
     ...props.style,
   });
   const reqAttr = props.required ? ' required' : '';
-  // Deterministic id derived from the field name (pure function of props,
+  // Deterministic AND unique id: scoped on the Craft node id so the
-  // no Math.random) so the <label for> always matches the <input id>.
+  // <label for> always matches the <input id> AND two InputField instances
-  const fieldId = 'field-' + slugId(props.name, 'field');
+  // that share the same (often default) `name` -- e.g. two untouched
+  // "Input" blocks both named "name" -- don't collide on `field-name` and
+  // clobber each other's for/id wiring. Falls back to the old name-derived
+  // hash for legacy 2-arg call sites without a node id.
+  const fieldId = scopeId(nodeId, props.name || 'field', 'field');
   const labelHtml = props.label
     ? `<label for="${escapeAttr(fieldId)}" style="font-size:14px;font-weight:500;color:#18181b">${escapeHtml(props.label)}${props.required ? '<span style="color:#ef4444"> *</span>' : ''}</label>`
     : '';

craft/src/components/forms/TextareaField.toHtml.test.ts

@@ -19,3 +19,34 @@ describe('TextareaField.toHtml accessibility (F2.1)', () => {
     expect(html).toContain('aria-label="Anything else?"');
   });
 });
+
+describe('TextareaField.toHtml deterministic + unique ids (thread node id, resolves id-collision finding)', () => {
+  test('label for= still matches textarea id= after threading the node id', () => {
+    const { html } = toHtml({ label: 'Message', name: 'message' }, '', 'node-ta1');
+    const forMatch = html.match(/<label for="([^"]+)"/);
+    const idMatch = html.match(/<textarea id="([^"]+)"/);
+    expect(forMatch![1]).toBe(idMatch![1]);
+  });
+
+  test('same node id -> identical output across calls (deterministic, no Math.random)', () => {
+    const { html: html1 } = toHtml({ label: 'Message', name: 'message' }, '', 'node-ta1');
+    const { html: html2 } = toHtml({ label: 'Message', name: 'message' }, '', 'node-ta1');
+    expect(html1).toBe(html2);
+  });
+
+  test('two instances with the SAME default name but different node ids do not collide', () => {
+    const { html: html1 } = toHtml({ label: 'Message', name: 'message' }, '', 'node-ta1');
+    const { html: html2 } = toHtml({ label: 'Message', name: 'message' }, '', 'node-ta2');
+    const id1 = html1.match(/<textarea id="([^"]+)"/)![1];
+    const id2 = html2.match(/<textarea id="([^"]+)"/)![1];
+    expect(id1).not.toBe(id2);
+  });
+
+  test('no nodeId (legacy 2-arg call): id derivation stays deterministic, not random', () => {
+    const { html: html1 } = toHtml({ label: 'Message', name: 'message' }, '');
+    const { html: html2 } = toHtml({ label: 'Message', name: 'message' }, '');
+    const id1 = html1.match(/<textarea id="([^"]+)"/)![1];
+    const id2 = html2.match(/<textarea id="([^"]+)"/)![1];
+    expect(id1).toBe(id2);
+  });
+});

craft/src/components/forms/TextareaField.tsx

@@ -1,7 +1,7 @@
 import React, { CSSProperties } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
-import { escapeHtml, escapeAttr, slugId } from '../../utils/escape';
+import { escapeHtml, escapeAttr, scopeId } from '../../utils/escape';
 
 interface TextareaFieldProps {
   label?: string;
@@ -89,7 +89,7 @@ TextareaField.craft = {
 
 /* ---------- HTML export ---------- */
 
-(TextareaField as any).toHtml = (props: TextareaFieldProps, _childrenHtml: string) => {
+(TextareaField as any).toHtml = (props: TextareaFieldProps, _childrenHtml: string, nodeId?: string) => {
   const wrapStyle = cssPropsToString({
     display: 'flex',
     flexDirection: 'column',
@@ -97,9 +97,13 @@ TextareaField.craft = {
     ...props.style,
   });
   const reqAttr = props.required ? ' required' : '';
-  // Deterministic id derived from the field name (pure function of props,
+  // Deterministic AND unique id: scoped on the Craft node id so the
-  // no Math.random) so the <label for> always matches the <textarea id>.
+  // <label for> always matches the <textarea id> AND two TextareaField
-  const fieldId = 'field-' + slugId(props.name, 'message');
+  // instances that share the same (often default) `name` -- e.g. two
+  // untouched "Textarea" blocks both named "message" -- don't collide on
+  // `field-message`. Falls back to the old name-derived hash for legacy
+  // 2-arg call sites without a node id.
+  const fieldId = scopeId(nodeId, props.name || 'message', 'field');
   const labelHtml = props.label
     ? `<label for="${escapeAttr(fieldId)}" style="font-size:14px;font-weight:500;color:#18181b">${escapeHtml(props.label)}${props.required ? '<span style="color:#ef4444"> *</span>' : ''}</label>`
     : '';

craft/src/components/layout/ColumnLayout.toHtml.test.ts

@@ -29,3 +29,33 @@ describe('ColumnLayout.toHtml width export from split', () => {
     expect(html).toContain('<div>A</div><div>B</div>');
   });
 });
+
+describe('ColumnLayout.toHtml deterministic + unique scope ids (thread node id, no Math.random)', () => {
+  const props = { columns: 2, split: '50-50', gap: '16px' };
+
+  test('same node id -> identical output across calls (deterministic)', () => {
+    const { html: html1 } = toHtml(props, '', 'node-col1');
+    const { html: html2 } = toHtml(props, '', 'node-col1');
+    expect(html1).toBe(html2);
+  });
+
+  test('different node ids -> different, non-colliding scope classes (identical columns/split/gap, no collision)', () => {
+    const { html: html1 } = toHtml(props, '', 'node-col1');
+    const { html: html2 } = toHtml(props, '', 'node-col2');
+    const cls1 = html1.match(/class="([^"]+)"/)![1];
+    const cls2 = html2.match(/class="([^"]+)"/)![1];
+    expect(cls1).not.toBe(cls2);
+  });
+
+  test('the <style> nth-child rule and the div class= use the SAME scope', () => {
+    const { html } = toHtml(props, '', 'node-col1');
+    const cls = html.match(/class="([^"]+)"/)![1];
+    expect(html).toContain(`.${cls} > :nth-child(1)`);
+  });
+
+  test('no nodeId (legacy 2-arg call): still deterministic across repeated calls, not random', () => {
+    const { html: html1 } = toHtml(props, '<div>A</div><div>B</div>');
+    const { html: html2 } = toHtml(props, '<div>A</div><div>B</div>');
+    expect(html1).toBe(html2);
+  });
+});

craft/src/components/layout/ColumnLayout.tsx

@@ -2,7 +2,7 @@ import React, { CSSProperties } from 'react';
 import { useNode, Element, UserComponent } from '@craftjs/core';
 import { Container } from './Container';
 import { cssPropsToString } from '../../utils/style-helpers';
-import { escapeAttr } from '../../utils/escape';
+import { escapeAttr, scopeId } from '../../utils/escape';
 
 type SplitOption =
   | '100'
@@ -114,7 +114,7 @@ ColumnLayout.craft = {
 
 /* ---------- HTML export ---------- */
 
-(ColumnLayout as any).toHtml = (props: ColumnLayoutProps, childrenHtml: string) => {
+(ColumnLayout as any).toHtml = (props: ColumnLayoutProps, childrenHtml: string, nodeId?: string) => {
   const columns = props.columns || 2;
   const split = props.split || '50-50';
   const gap = props.gap || '16px';
@@ -135,13 +135,15 @@ ColumnLayout.craft = {
   // !important, to win over any stale inline flex baked into a child at
   // creation time) to a generated class -- same width mapping (getWidths)
   // the editor render uses. Precedent: Menu/Navbar toHtml already emit
-  // scoped <style> blocks for hover CSS.
+  // scoped <style> blocks for hover CSS. The class is scoped on the Craft
-  const scopeId = `cols-${Math.random().toString(36).slice(2, 8)}`;
+  // node id so two ColumnLayout instances with identical columns/split/gap
+  // don't collide on the same class and cross-apply each other's widths.
+  const scope = scopeId(nodeId, `${columns}:${split}:${gap}`, 'cols');
   const widthCss = widths
-    .map((w, i) => `.${scopeId} > :nth-child(${i + 1}) { flex: 0 0 calc(${w} - ${gap}) !important; }`)
+    .map((w, i) => `.${scope} > :nth-child(${i + 1}) { flex: 0 0 calc(${w} - ${gap}) !important; }`)
     .join('\n  ');
 
   return {
-    html: `<style>\n  ${widthCss}\n</style>\n<div class="${scopeId}"${idAttr}${outerStyle ? ` style="${outerStyle}"` : ''}>${childrenHtml}</div>`,
+    html: `<style>\n  ${widthCss}\n</style>\n<div class="${scope}"${idAttr}${outerStyle ? ` style="${outerStyle}"` : ''}>${childrenHtml}</div>`,
   };
 };

craft/src/components/sections/Countdown.toHtml.test.ts

@@ -26,3 +26,39 @@ describe('Countdown.toHtml validates targetDate before inline-script injection (
     expect(html).toMatch(/new Date\(\)\.getTime\(\)|new Date\(Date\.now\(\)\)\.getTime\(\)/);
   });
 });
+
+describe('Countdown.toHtml deterministic + unique scope ids (thread node id, no Math.random)', () => {
+  const props = { targetDate: '2026-01-01' };
+
+  test('same node id -> identical output across calls (deterministic)', () => {
+    const { html: html1 } = toHtml(props, '', 'node-cd1');
+    const { html: html2 } = toHtml(props, '', 'node-cd1');
+    expect(html1).toBe(html2);
+  });
+
+  test('different node ids -> different, non-colliding element ids (identical props, no collision)', () => {
+    const { html: html1 } = toHtml(props, '', 'node-cd1');
+    const { html: html2 } = toHtml(props, '', 'node-cd2');
+    const id1 = html1.match(/id="([^"]+)_d"/)![1];
+    const id2 = html2.match(/id="([^"]+)_d"/)![1];
+    expect(id1).not.toBe(id2);
+  });
+
+  test('no nodeId (legacy 2-arg call): still deterministic across repeated calls, not random', () => {
+    const { html: html1 } = toHtml(props, '');
+    const { html: html2 } = toHtml(props, '');
+    expect(html1).toBe(html2);
+  });
+});
+
+describe('Countdown.toHtml script nit: ticking interval stops at zero', () => {
+  test('inline script clears its own interval once the countdown reaches zero', () => {
+    const { html } = toHtml({ targetDate: '2026-01-01' }, '');
+    expect(html).toMatch(/clearInterval\(/);
+  });
+
+  test('an already-expired target never schedules a running interval', () => {
+    const { html } = toHtml({ targetDate: '2020-01-01' }, '');
+    expect(html).toMatch(/if\s*\(\s*target\s*-\s*Date\.now\(\)\s*>\s*0\s*\)\s*\{/);
+  });
+});

craft/src/components/sections/Countdown.tsx

@@ -1,7 +1,7 @@
 import React, { CSSProperties, useEffect, useState } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
-import { escapeHtml, escapeAttr } from '../../utils/escape';
+import { escapeHtml, escapeAttr, scopeId } from '../../utils/escape';
 
 interface CountdownProps {
   targetDate?: string;
@@ -149,7 +149,7 @@ Countdown.craft = {
 
 /* ---------- HTML export ---------- */
 
-(Countdown as any).toHtml = (props: CountdownProps, _childrenHtml: string) => {
+(Countdown as any).toHtml = (props: CountdownProps, _childrenHtml: string, nodeId?: string) => {
   const {
     targetDate = DEFAULT_TARGET,
     heading = 'Coming Soon',
@@ -175,8 +175,11 @@ Countdown.craft = {
   const dStyle = `font-size:48px;font-weight:700;color:${digitColor};line-height:1;font-family:Inter,sans-serif`;
   const lStyle = `font-size:12px;color:${labelColor};text-transform:uppercase;letter-spacing:0.1em;font-family:Inter,sans-serif`;
 
-  // Generate a unique ID for this countdown instance
+  // Deterministic AND unique id for this countdown instance's span ids and
-  const uid = 'cd_' + Math.random().toString(36).slice(2, 8);
+  // getElementById() calls inside its inline script -- scoped on the Craft
+  // node id so two Countdown instances (e.g. both left at default props)
+  // don't collide and end up writing each other's digits.
+  const uid = scopeId(nodeId, targetDate + '::' + heading, 'cd');
 
   // Only accept a strict date/datetime shape before it's embedded in the
   // inline <script>; anything else falls back to "now" instead of letting
@@ -198,10 +201,14 @@ Countdown.craft = {
   <script>
   (function(){
     var target = ${dateExpr}.getTime();
+    var timer = null;
     function pad(n){ return String(n).padStart(2,'0'); }
     function update(){
       var diff = target - Date.now();
-      if(diff<=0){ diff=0; }
+      if(diff<=0){
+        diff=0;
+        if(timer){ clearInterval(timer); timer=null; }
+      }
       var d = Math.floor(diff/(1000*60*60*24));
       var h = Math.floor((diff/(1000*60*60))%24);
       var m = Math.floor((diff/(1000*60))%60);
@@ -212,7 +219,9 @@ Countdown.craft = {
       document.getElementById("${uid}_s").textContent = pad(s);
     }
     update();
-    setInterval(update,1000);
+    if(target - Date.now() > 0){
+      timer = setInterval(update,1000);
+    }
   })();
   </script>
 </section>`,

craft/src/components/sections/Gallery.toHtml.test.ts

@@ -61,3 +61,35 @@ describe('Gallery.toHtml lightbox accessibility (F1.3)', () => {
     expect(html).not.toContain('role="button"');
   });
 });
+
+describe('Gallery.toHtml deterministic + unique scope ids (thread node id, no Math.random)', () => {
+  const props = { images: [{ src: '/a.jpg', alt: 'a' }], lightbox: true };
+
+  test('same node id -> identical output across calls (deterministic)', () => {
+    const { html: html1 } = toHtml(props, '', 'node-gal1');
+    const { html: html2 } = toHtml(props, '', 'node-gal1');
+    expect(html1).toBe(html2);
+  });
+
+  test('different node ids -> different, non-colliding gallery scope ids (identical images, no collision)', () => {
+    const { html: html1 } = toHtml(props, '', 'node-gal1');
+    const { html: html2 } = toHtml(props, '', 'node-gal2');
+    const id1 = html1.match(/id="([^"]+)_overlay"/)![1];
+    const id2 = html2.match(/id="([^"]+)_overlay"/)![1];
+    expect(id1).not.toBe(id2);
+  });
+
+  test('overlay/grid ids and the script function names all use the SAME scope', () => {
+    const { html } = toHtml(props, '', 'node-gal1');
+    const scope = html.match(/id="([^"]+)_overlay"/)![1];
+    expect(html).toContain(`id="${scope}_grid"`);
+    expect(html).toContain(`function ${scope}_close()`);
+    expect(html).toContain(`function ${scope}_open(`);
+  });
+
+  test('no nodeId (legacy 2-arg call): still deterministic across repeated calls, not random', () => {
+    const { html: html1 } = toHtml(props, '');
+    const { html: html2 } = toHtml(props, '');
+    expect(html1).toBe(html2);
+  });
+});

craft/src/components/sections/Gallery.tsx

@@ -1,7 +1,7 @@
 import React, { CSSProperties } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
-import { escapeHtml, escapeAttr, safeUrl } from '../../utils/escape';
+import { escapeHtml, escapeAttr, safeUrl, scopeId } from '../../utils/escape';
 
 interface GalleryImage {
   src: string;
@@ -124,7 +124,7 @@ Gallery.craft = {
 
 /* ---------- HTML export ---------- */
 
-(Gallery as any).toHtml = (props: GalleryProps, _childrenHtml: string) => {
+(Gallery as any).toHtml = (props: GalleryProps, _childrenHtml: string, nodeId?: string) => {
   const sectionStyle = cssPropsToString({
     padding: '60px 20px',
     ...props.style,
@@ -134,7 +134,11 @@ Gallery.craft = {
   const gap = props.gap || '16px';
   const lightbox = props.lightbox || false;
 
-  const galleryId = 'gallery_' + Math.random().toString(36).slice(2, 8);
+  // Deterministic AND unique id, scoped on the Craft node id, for this
+  // gallery's overlay/grid element ids and inline-script function names --
+  // so two Gallery instances (e.g. both left at default images) don't
+  // collide and end up sharing/clobbering one lightbox overlay.
+  const galleryId = scopeId(nodeId, JSON.stringify(images) + columns + gap, 'gallery');
 
   const items = images.map((img) => {
     const caption = img.caption

craft/src/components/sections/Tabs.toHtml.test.ts

@@ -51,3 +51,32 @@ describe('Tabs.toHtml accessibility (F1.2)', () => {
     expect(html).toMatch(/ArrowLeft/);
   });
 });
+
+describe('Tabs.toHtml deterministic + unique ids (thread node id, resolves id-collision finding)', () => {
+  test('same node id -> identical output across calls (deterministic, no Math.random)', () => {
+    const { html: html1 } = toHtml({ tabs }, '', 'node-tabs1');
+    const { html: html2 } = toHtml({ tabs }, '', 'node-tabs1');
+    expect(html1).toBe(html2);
+  });
+
+  test('two instances with IDENTICAL default tab content but different node ids do not collide', () => {
+    const { html: html1 } = toHtml({ tabs }, '', 'node-tabs1');
+    const { html: html2 } = toHtml({ tabs }, '', 'node-tabs2');
+    const id1 = html1.match(/role="tab"[^>]*aria-controls="([^"]+)"/)![1];
+    const id2 = html2.match(/role="tab"[^>]*aria-controls="([^"]+)"/)![1];
+    expect(id1).not.toBe(id2);
+  });
+
+  test('aria-controls still matches an existing panel id after the node-id change (internal consistency preserved)', () => {
+    const { html } = toHtml({ tabs }, '', 'node-tabs1');
+    const controlsMatch = html.match(/role="tab"[^>]*aria-controls="([^"]+)"/);
+    expect(controlsMatch).toBeTruthy();
+    expect(html).toContain(`id="${controlsMatch![1]}"`);
+  });
+
+  test('no nodeId (legacy 2-arg call): still deterministic across repeated calls, not random', () => {
+    const { html: html1 } = toHtml({ tabs }, '');
+    const { html: html2 } = toHtml({ tabs }, '');
+    expect(html1).toBe(html2);
+  });
+});

craft/src/components/sections/Tabs.tsx

@@ -1,7 +1,7 @@
 import React, { CSSProperties, useState } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
-import { escapeHtml, escapeAttr } from '../../utils/escape';
+import { escapeHtml, escapeAttr, scopeId } from '../../utils/escape';
 
 interface TabItem {
   label: string;
@@ -124,20 +124,7 @@ Tabs.craft = {
 
 /* ---------- HTML export ---------- */
 
-/**
+(Tabs as any).toHtml = (props: TabsProps, _childrenHtml: string, nodeId?: string) => {
- * Deterministic (non-cryptographic) string hash -- djb2 -- used to derive a
- * stable id scope from existing prop data instead of Math.random/Date.now.
- * Same input always produces the same output across export runs.
- */
-function stableHash(seed: string): string {
-  let h = 5381;
-  for (let i = 0; i < seed.length; i++) {
-    h = ((h << 5) + h + seed.charCodeAt(i)) | 0;
-  }
-  return (h >>> 0).toString(36);
-}
-
-(Tabs as any).toHtml = (props: TabsProps, _childrenHtml: string) => {
   const sectionStyle = cssPropsToString({
     padding: '60px 20px',
     ...props.style,
@@ -151,13 +138,17 @@ function stableHash(seed: string): string {
   const contentBg = props.contentBg || '#ffffff';
 
   // tabId scopes the functional wiring (onclick/getElementById) as well as
-  // the ARIA tab<->panel linking ids. It must be deterministic (no
+  // the ARIA tab<->panel linking ids. It must be BOTH deterministic (so
-  // Math.random) because aria-controls/aria-labelledby need to reference
+  // aria-controls/aria-labelledby reference the SAME id across repeated
-  // the SAME id across repeated exports of the same content -- derived from
+  // exports of the same page) AND unique (so two Tabs instances with
-  // anchorId when present, otherwise a stable hash of the tab labels (pure
+  // identical/default content -- e.g. both left at the default tab set --
-  // function of the props, not time/randomness).
+  // don't collide and clobber each other's script globals / ARIA links).
+  // Scoping on the Craft node id gives both properties; when it's
+  // unavailable (legacy 2-arg call sites) we fall back to a stable hash of
+  // the tab content, matching the old (collision-prone but never random)
+  // behavior.
   const scopeSeed = props.anchorId || tabs.map((t) => t.label).join('|') + '::' + tabs.length;
-  const tabId = 'tabs_' + stableHash(scopeSeed);
+  const tabId = scopeId(nodeId, scopeSeed, 'tabs');
 
   const tabButtons = tabs.map((tab, i) => {
     const isActive = i === 0;