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.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>`,