deterministic + unique ids in 6 components (node-derived scope)

Migrates Menu, ColumnLayout, Countdown, Gallery, Tabs, InputField, and
TextareaField from Math.random()/content-hash scope ids to the threaded
Craft node id (via scopeId()), keeping every emitted element id,
aria-controls/aria-labelledby/for, and inline <script> function
name/getElementById() call consistently scoped per component.

Resolves the two Important id-collision review findings:
- Tabs: tabId was djb2(anchorId||labels) -- two default Tabs instances
  produced identical aria-controls/aria-labelledby ids, so one instance's
  arrow-key script clobbered the other's tab/panel wiring.
- InputField/TextareaField: fieldId was `field-${name}` -- two fields
  sharing a (often default) name produced duplicate <label for>/<input
  id> pairs, breaking the for/id association for one of them.

Also eliminates the remaining Math.random() scope ids in Menu (hover CSS
class scope) and ColumnLayout (nth-child width CSS class scope), so no
export component is non-deterministic anymore.

All fall back to a stable content hash (never Math.random) for legacy
2-arg toHtml() call sites without a node id.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

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
-  const uid = 'cd_' + Math.random().toString(36).slice(2, 8);
+  // Deterministic AND unique id for this countdown instance's span ids and
+  // 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 ---------- */
 
-/**
- * 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) => {
+(Tabs as any).toHtml = (props: TabsProps, _childrenHtml: string, nodeId?: 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
-  // Math.random) because aria-controls/aria-labelledby need to reference
-  // the SAME id across repeated exports of the same content -- derived from
-  // anchorId when present, otherwise a stable hash of the tab labels (pure
-  // function of the props, not time/randomness).
+  // the ARIA tab<->panel linking ids. It must be BOTH deterministic (so
+  // aria-controls/aria-labelledby reference the SAME id across repeated
+  // exports of the same page) AND unique (so two Tabs instances with
+  // identical/default content -- e.g. both left at the default tab set --
+  // 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;