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/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;