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/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,
-  // no Math.random) so the <label for> always matches the <input id>.
-  const fieldId = 'field-' + slugId(props.name, 'field');
+  // Deterministic AND unique id: scoped on the Craft node id so the
+  // <label for> always matches the <input id> AND two InputField instances
+  // 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,
-  // no Math.random) so the <label for> always matches the <textarea id>.
-  const fieldId = 'field-' + slugId(props.name, 'message');
+  // Deterministic AND unique id: scoped on the Craft node id so the
+  // <label for> always matches the <textarea id> AND two TextareaField
+  // 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>`
     : '';