fix(target-react): transitively hoist deeply-indirected module-lets to useRef (Plan 04-04)

CI on 248f2cf went red: two React rete-flow VR tests (undo + reconnect)
failed deterministically — undo no-op'd, leaving the post-drag value in
place. Root cause was a latent emitter gap exposed by a663b0d's correct
live-read `$expose` rewrite.

`hoistModuleLet` lifts a module-scoped `let X = init` to a per-instance
`useRef` only when it is reachable from a lifecycle hook DIRECTLY or via a
SINGLE helper level (cases a/b). FlowCanvas's `historyStack`/`redoStack`
are reached only transitively ($onMount → event handler → pushHistory →
pushHistorySnapshot → stack), so they fell through to case (c) and stayed
as a per-render `let [] ` — reset to a fresh empty array every render.

While every consumer of the stacks was a first-render closure (handlers
bound once in $onMount; the old `$expose` handle captured at mount via `[]`
deps) the bug was dormant — they all shared render-0's array. The live-read
handle made the external `undo`/`redo` dispatch to the LATEST render's
closure, which read the freshly-emptied stack → undo had nothing to pop.

Fix: take the TRANSITIVE closure over the top-level helper call graph
(fixpoint, cycle-safe) and follow helper calls inside lifecycle/watcher
bodies, so a let reached through any depth of helper indirection hoists.
This is the deferred Plan 04-04 promotion.

Regenerating all 14 React leaves changes exactly four — the components with
the same deep-indirection pattern, all now correctly stabilised:
  - rete/FlowCanvas: historyStack, redoStack  (the reported regression)
  - cropper/Cropper: cropReady round-trip guard
  - data-table/DataTable: programmatic echo-guard, selectAllBox
  - maplibre/Layer: ctx
Each was a per-render-reset guard that is now a stable useRef — latent bugs
of the same class, hardened.

Verified: 216/216 turbo test+typecheck tasks green; dist-parity unchanged;
the 2 previously-failing rete-flow tests + all 19 rete-flow React VR cells
pass locally. Test 3 in hoistModuleLet.test.ts flipped from asserting the
old conservative no-hoist to asserting the new transitive hoist.

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

Author: serpentblade

packages/targets/react/src/__tests__/hoistModuleLet.test.ts

@@ -240,12 +240,14 @@ $onMount(setup);
     expect(out).toMatch(/\{\s*engine:\s*engine\.current\s*\}/);
   });
 
-  it('Test 3 (deeply-nested): when a let is referenced via 2-level helper indirection it is NOT auto-hoisted (conservative)', () => {
+  it('Test 3 (deeply-nested): a let referenced via 2-level helper indirection IS auto-hoisted (Plan 04-04 transitive promotion)', () => {
     // Synthetic: let X referenced inside `helperA`, `helperA` called from
-    // `helperB`, and `helperB` is the lifecycle setup. Per the spike
-    // pseudocode the conservative rule covers (a) and (b) only — deeper
-    // chains fall through with no hoist + no diag (Plan 04-04 may add
-    // ROZ523 promotion for this in a follow-up).
+    // `helperB`, and `helperB` is the lifecycle setup. The pass now takes the
+    // TRANSITIVE closure over the top-level helper call graph, so `nested`
+    // (reached as $onMount → helperB → helperA → nested) hoists to `useRef`.
+    // Before this promotion it stayed a per-render `let nested = 0` — reset to
+    // 0 every render — which silently broke any closure that captured a later
+    // render's copy (the live-read `$expose` undo-stack regression, 2026-06-18).
     const src = `
 let nested = 0;
 const helperA = () => { nested = 1; };
@@ -279,10 +281,14 @@ $onMount(helperB);
       sourceLoc: { start: 0, end: 0 },
     };
     const { hoisted } = hoistModuleLet(program, syntheticIR);
-    // Conservative — helperB references no let directly, helperA does but
-    // helperA isn't a lifecycle setup. So `nested` stays untouched.
-    expect(hoisted).toHaveLength(0);
+    // Transitive: helperB calls helperA, which writes `nested` → the closure
+    // reaches `nested`, so it hoists.
+    expect(hoisted).toHaveLength(1);
+    expect(hoisted[0]!.name).toBe('nested');
     const out = generate(program).code;
-    expect(out).toContain('let nested');
+    // The `let nested = 0` declaration is removed (emitReact synthesises the
+    // `useRef(0)`), and every reference is rewritten to `nested.current`.
+    expect(out).not.toContain('let nested');
+    expect(out).toMatch(/nested\.current\s*=\s*1/);
   });
 });

packages/targets/react/src/rewrite/hoistModuleLet.ts

@@ -2,9 +2,10 @@
  * hoistModuleLet — Plan 04-02 Task 2 (Wave 0 spike resolution).
  *
  * Detects module-scoped `let X = init` declarations referenced from a
- * LifecycleHook setup body (directly or via one-level helper indirection),
- * auto-hoists them to a `useRef(init)` inside the component body, and
- * rewrites every reference (read AND write) to `X.current`.
+ * LifecycleHook setup body (directly, or via ANY depth of top-level helper
+ * call indirection — Plan 04-04 transitive promotion), auto-hoists them to a
+ * `useRef(init)` inside the component body, and rewrites every reference
+ * (read AND write) to `X.current`.
  *
  * Spike outcome (04-02-SPIKE.md): Modal.rozie's `let savedBodyOverflow = ''`
  * referenced by `lockScroll`/`unlockScroll` (top-level arrows passed
@@ -16,12 +17,18 @@
  *   2. Top-level helpers (const X = arrow|fn OR function X) → which
  *      module-lets they reference
  *   3. For each LifecycleHook:
- *      (a) setup is arrow/fn whose body references a module-let → hoist
- *      (b) setup OR cleanup is Identifier matching a top-level helper that
- *          references a module-let → hoist
- *      (c) deeper indirection / unknown — leave UNHOISTED (no diagnostic
- *          in v1; user code remains as `let X = ...` and survives via the
- *          residual top-level Program. Plan 04-04 may add ROZ523 promotion.)
+ *      (a) setup is arrow/fn whose body references a module-let (directly or
+ *          by calling a helper chain that does) → hoist
+ *      (b) setup OR cleanup is Identifier matching a top-level helper whose
+ *          TRANSITIVE call closure references a module-let → hoist
+ *      (c) no reachable reference — leave UNHOISTED. (Plan 04-04 promoted the
+ *          former one-level-only limit to the full transitive closure over the
+ *          top-level helper call graph, so a let reached as
+ *          `$onMount → handler → pushHistory → pushHistorySnapshot → stack`
+ *          now hoists. Before, it stayed a per-render `let` — re-initialised
+ *          to its `init` on every render — which silently broke any closure
+ *          that captured a later render's copy, e.g. the live-read `$expose`
+ *          handle reading an undo stack that was empty again.)
  *
  * For hoisted lets:
  *   - REMOVE the original `let X = init` from cloned Program top level
@@ -201,8 +208,10 @@ export function hoistModuleLet(program: File, ir: IRComponent): HoistResult {
 
   const moduleLetNames = new Set(moduleLets.keys());
 
-  // 2. Build map: top-level helper name → set of module-let names it references.
-  const topLevelHelpers = new Map<string, Set<string>>();
+  // 2. Catalogue EVERY top-level helper (name → body), independent of whether
+  //    it directly touches a module-let — a helper that only CALLS another
+  //    helper still participates in the transitive reachability graph below.
+  const helperBodies = new Map<string, t.Node>();
   for (const stmt of program.program.body) {
     let helperName: string | null = null;
     let body: t.Node | null = null;
@@ -226,9 +235,51 @@ export function hoistModuleLet(program: File, ir: IRComponent): HoistResult {
       body = stmt;
     }
     if (!helperName || !body) continue;
+    helperBodies.set(helperName, body);
+  }
+  const helperNames = new Set(helperBodies.keys());
 
-    const refs = collectIdentifierRefs(body, moduleLetNames);
-    if (refs.size > 0) topLevelHelpers.set(helperName, refs);
+  // 2b. For each helper compute (i) the module-lets it references DIRECTLY and
+  //     (ii) the other helpers it CALLS. Then take the fixpoint over the call
+  //     graph so `helperTransitiveLets[H]` holds every module-let reachable
+  //     from H through ANY chain of helper calls. This is the Plan 04-04
+  //     promotion: the original pass only resolved ONE level of helper
+  //     indirection (case (b)), so a let reached as
+  //     `$onMount → handler → pushHistory → pushHistorySnapshot → historyStack`
+  //     fell through to case (c) and was left as a per-render `let` — fresh
+  //     `[]` every render. Any closure that captured a LATER render (e.g. the
+  //     live-read `$expose` handle) then read an empty stack. Transitive
+  //     hoisting lifts the whole chain to `useRef`, restoring shared identity.
+  const helperDirectLets = new Map<string, Set<string>>();
+  const helperCalls = new Map<string, Set<string>>();
+  for (const [name, body] of helperBodies) {
+    helperDirectLets.set(name, collectIdentifierRefs(body, moduleLetNames));
+    const calls = collectIdentifierRefs(body, helperNames);
+    calls.delete(name); // a self-reference adds nothing to the closure
+    helperCalls.set(name, calls);
+  }
+  const helperTransitiveLets = new Map<string, Set<string>>();
+  for (const name of helperNames) {
+    helperTransitiveLets.set(name, new Set(helperDirectLets.get(name)));
+  }
+  // Fixpoint iteration — terminates because the let universe is finite and
+  // each pass only adds. Cycle-safe (a helper cycle just shares one set).
+  let grew = true;
+  while (grew) {
+    grew = false;
+    for (const name of helperNames) {
+      const acc = helperTransitiveLets.get(name)!;
+      for (const callee of helperCalls.get(name)!) {
+        const calleeLets = helperTransitiveLets.get(callee);
+        if (!calleeLets) continue;
+        for (const l of calleeLets) {
+          if (!acc.has(l)) {
+            acc.add(l);
+            grew = true;
+          }
+        }
+      }
+    }
   }
 
   // 3. Walk lifecycle hooks AND watchers → which lets are referenced via
@@ -247,11 +298,21 @@ export function hoistModuleLet(program: File, ir: IRComponent): HoistResult {
     classifyExpr(wh.callback);
   }
 
+  /** Pull every let a body reaches: its DIRECT refs plus the transitive lets
+   *  of every helper it calls (at any nesting depth inside the body). */
+  function addBodyReachableLets(body: t.Node): void {
+    for (const r of collectIdentifierRefs(body, moduleLetNames)) referencedLets.add(r);
+    for (const h of collectIdentifierRefs(body, helperNames)) {
+      const lets = helperTransitiveLets.get(h);
+      if (lets) for (const l of lets) referencedLets.add(l);
+    }
+  }
+
   function classifyExpr(expr: t.Expression | t.BlockStatement): void {
-    // (a) DIRECT — arrow/fn expression body references a let.
+    // (a) DIRECT — arrow/fn expression body references a let (or calls a
+    //     helper chain that does).
     if (t.isArrowFunctionExpression(expr) || t.isFunctionExpression(expr)) {
-      const refs = collectIdentifierRefs(expr, moduleLetNames);
-      for (const r of refs) referencedLets.add(r);
+      addBodyReachableLets(expr);
       return;
     }
     // (a') DIRECT — BlockStatement body (post-`extractCleanupReturn` lift,
@@ -262,13 +323,13 @@ export function hoistModuleLet(program: File, ir: IRComponent): HoistResult {
     // React render, breaking the let's "module-scoped scratch state"
     // semantics (e.g. FullCalendar's `let suppressViewSync = false`).
     if (t.isBlockStatement(expr)) {
-      const refs = collectIdentifierRefs(expr, moduleLetNames);
-      for (const r of refs) referencedLets.add(r);
+      addBodyReachableLets(expr);
       return;
     }
-    // (b) ONE-LEVEL HELPER — Identifier referring to a top-level helper.
-    if (t.isIdentifier(expr) && topLevelHelpers.has(expr.name)) {
-      const refs = topLevelHelpers.get(expr.name)!;
+    // (b) HELPER — Identifier referring to a top-level helper. Now resolves
+    //     the helper's TRANSITIVE lets, not just its direct ones.
+    if (t.isIdentifier(expr) && helperTransitiveLets.has(expr.name)) {
+      const refs = helperTransitiveLets.get(expr.name)!;
       for (const r of refs) referencedLets.add(r);
       return;
     }

packages/ui/cropper/packages/react/src/Cropper.tsx

@@ -109,6 +109,7 @@ const Cropper = forwardRef<CropperHandle, CropperProps>(function Cropper(_props:
   })();
   const imgEl = useRef<any>(null);
   const instance = useRef<any>(null);
+  const cropReady = useRef(false);
   const [data, setData] = useControllableState({
     value: props.data,
     defaultValue: props.defaultData ?? undefined,
@@ -121,22 +122,6 @@ const Cropper = forwardRef<CropperHandle, CropperProps>(function Cropper(_props:
   const _watch3First = useRef(true);
   const _watch4First = useRef(true);
 
-  // Gate that suppresses the engine's SETUP-time `crop` events from writing the
-  // two-way `$model.data`. Cropper fires an initial `crop` with its OWN default box
-  // (autoCropArea) BEFORE the `ready` callback runs, and the `setData($props.data)`
-  // inside `ready` fires another. Writing those transient engine-internal boxes to
-  // `$model.data` is wrong — and on unified-model targets (Vue defineModel / Svelte
-  // $bindable / Angular model() signal, where the model read and write share ONE
-  // local) the pre-ready write CLOBBERS the very `$props.data` that `ready` then
-  // reads, so the consumer's initial `:data` crop box is lost and the default box is
-  // applied instead. (React/Solid read the external prop and Lit's property binding
-  // is controlled, so the write doesn't change their read — which is why only the
-  // template-emit family regressed.) We flip this true at the END of `ready`, after
-  // the initial box is applied, so only genuine post-init user crops drive the model.
-  let cropReady = false;
-
-  // pure crop-box equality (rounded px + exact transform) — no sigils, safe at top
-  // level. The round-trip guard that stops the setData→crop→$model.data→$watch loop.
   function sameData(a: any, b: any) {
     if (!a || !b) return false;
     return Math.round(a.x) === Math.round(b.x) && Math.round(a.y) === Math.round(b.y) && Math.round(a.width) === Math.round(b.width) && Math.round(a.height) === Math.round(b.height) && a.rotate === b.rotate && a.scaleX === b.scaleX && a.scaleY === b.scaleY;
@@ -176,7 +161,7 @@ const Cropper = forwardRef<CropperHandle, CropperProps>(function Cropper(_props:
         // exactly ONCE here (after `$props.data` has been read for setData — no clobber),
         // then open the gate so genuine post-init user crops drive the model.
         setData(instance.current.getData());
-        cropReady = true;
+        cropReady.current = true;
         _rozieProp_onReady && _rozieProp_onReady();
       },
       cropstart: (e: any) => _rozieProp_onCropstart && _rozieProp_onCropstart({
@@ -194,7 +179,7 @@ const Cropper = forwardRef<CropperHandle, CropperProps>(function Cropper(_props:
         // the `setData($props.data)` echo). Propagating them would (a) emit a spurious
         // pre-init `crop` and (b) on unified-model targets clobber the consumer's
         // initial `:data`. Genuine user crops fire after `cropReady`.
-        if (!cropReady) return;
+        if (!cropReady.current) return;
         _rozieProp_onCrop && _rozieProp_onCrop(e.detail);
         if (e.detail) setData(e.detail);
       },