@ape-egg/vibe 1.9.5 → 1.9.7

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # Changelog
 
+## [1.9.7] - 2026-06-01
+
+### Fixed
+
+- **Conditional inside an iteration row didn't react to global-state changes** (`runtime/affected.js`, `runtime/hydrate.js`) — a `<!-- if … -->` (or `<!-- if … --><!-- else --><!-- /if -->`) living inside an `<!-- each -->` row, whose expression depended on a global rather than the loop item, stayed frozen on the branch active at mount time when the global later changed and the row's `item` was unchanged. Two compounding gaps, fixed at the right layer in two steps:
+  - **Branch swap re-evaluated against the wrong scope** (`affected.js`, `hydrate.js`) — `affected` correctly detected the change against the row's merged state, but the affected entry it pushed carried only the node. `hydrate` then called `updateConditional` with the cycle's top-level state, which had no `item`, so the branch eval evaluated `selected.includes(item.id)` etc. against `item === undefined`. Rows mounted on the *if* branch happened to flip to *else* (often correct by coincidence); rows mounted on the *else* branch stayed stuck. `affected.js` now attaches the same `state`/`newState` pair the change was detected against as `scopedState`/`oldScopedState` on the conditional entry — merged row state inside an iteration, the cycle's top-level state outside — and `hydrate.js`'s conditional handler uses them when present.
+  - **Inlined per-row components were invisible to the iteration recursion** (`affected.js`) — a `<component src>` mounted per iteration row has its parsed tree stashed on the post-process wrapper as `_vibeIterTree`, not as a child of `instance.tree`. `hydrateInlinedIterationComponents` already re-hydrates those trees, but it only runs from `updateInstance`, which only fires when the iteration's array changes. On a pure global-state change the array is unchanged, so the inlined component trees were never visited — a row-internal `<!-- if -->` *without* an else, gated on a global and living inside a per-row component (the Battle Brawlers `<brawler-menu>`/`<brawler-activity>` shape), wouldn't tear down. `affected.js`'s iteration recursion now also descends into every `_vibeIterTree` reachable from each instance's cloned nodes with the same merged scoped state, so the conditional flows through the normal affected → hydrate → `updateConditional` path and the existing `branches.else === null` handling triggers `unmountBranch`. Same path covers any other binding/conditional living inside a per-row component, so they all now react to global state changes too.
+  - Test: `tests/e2e/conditional-in-iteration-global.spec.js` (7 tests: swap of `selected.includes(item.id)` in both directions; dynamic property lookup; compound gate with both halves; `if`-without-else direct shape; compound `if`-without-else; nested-property gate `combat.duration !== 0 && busyMap[item.id]`; and the per-row-component repro toggling `$.showMenu` through a mount→teardown→re-mount cycle)
+
+- **Loop-scoped `on*` handler inside a row-internal `<!-- if -->` resolved the previous item after the row updated** (`runtime/loop-scope.js`) — a `<!-- if -->` inside an iteration mounts its branch content separately from the row's `clonedNodes` and stamps `__vibeScope` once at mount time. When the row was later updated in place (its DOM reused for a new item), the iteration refreshed its own root stamp but the branch root kept the stale mount-time stamp, and `resolveScope` hit that first on the walk up — so a handler inside the conditional resolved the previous item. `stampInstanceScopes` now walks the instance's parsed tree and re-stamps every active conditional-branch root with the same fresh scope. Nested loops are skipped — each iteration node already manages its own instances' scopes.
+  - Test: `tests/e2e/loop-scoped-handlers.spec.js` (+ unit coverage in `tests/unit/loop-scope.test.js`)
+
+- **Treeless (batch-rendered) iteration was rebuilt on every unrelated state change** (`runtime/iterate.js`) — `affected.js` conservatively flags a treeless iteration on any state change (it can't walk per-row trees to know what they depend on), and `updateIteration` responded with an unconditional `bulkReplace`. A background tick (e.g. a 250 ms client clock) therefore recreated every row on every flush, dropping imperatively-attached listeners (tooltip mouseleave) and any in-progress drag. `renderBatch` now remembers the rendered HTML on the iteration's runtime; before tearing down, `updateIteration` re-runs the batch — if the output is byte-identical to the previous one, the rows don't depend on what changed, and the existing DOM nodes are kept. Skipped when the template has DOM-property writes (`value`/`checked`/`selected`), which aren't reflected in the HTML string.
+  - Test: `tests/e2e/iteration-treeless-unrelated-update.spec.js`
+
+- **Inlined component's literal-wrap `<!-- each [prop] as alias -->` froze on the original snapshot** (`runtime/iterate.js`) — when an inlined component received an object prop and wrapped it in a literal-array iteration to render its fields, the inner iteration's `forceRegistryBackedIterationUpdates` calls `updateIteration` with `oldState === newState`, but the old/new array eval produces fresh arrays containing the just-rewritten registry value, so the diff saw identical contents and emitted no UPDATE. `updateIteration` now treats `oldState === newState` as a "trust the rendered snapshot" signal — the previously rendered items on iteration instances are the only honest "old" when the registry side-effect is the only mutation — and correctly emits per-row updates.
+
+### Added
+
+- **`<component src>` callsite receives its componentId** (`runtime/component.js`) — `processSingle` now returns the resolved `componentId` so `const id = component(state)` inside a `<script type="module">` block of a src-fetched component resolves to a non-undefined id. Matches the public component.js contract; without it, downstream `$[id]` was silently undefined for src-fetched components.
+
+---
+
+## [1.9.6] - 2026-05-25
+
+### Fixed
+
+- **Loop item lost reference identity across mutations** (`runtime/state.js`, `runtime/iterate.js`, `runtime/index.js`, `runtime/loop-scope.js`) — the object a loop handed its `on*` handlers was no longer `=== $.arr[i]` after a `splice`/`push`, so identity-based code (`$.arr.indexOf(item)`, `item === $.arr[i]`) targeted the wrong row — e.g. removing two items by identity in a row would delete the wrong second row. Two compounding causes:
+  - **Proxy double-wrapping** (`state.js`) — the deep proxy's `get` handed back a fresh proxy for nested elements, and array methods/assignments wrote that proxy back into the tree; the next read wrapped it *again*, minting a new proxy identity for the same underlying object (and making change detection compare a stored proxy against a raw, never equal). Added a `RAW` symbol so any of our proxies can expose its raw target, plus an `unwrap` helper used in `set` (never store a proxy in the raw tree) and at `createDeepProxy` entry (collapse a proxy that slipped in nested inside an assigned object literal). The cache now always returns the single canonical proxy per object.
+  - **Loop var was a diff-snapshot clone** (`iterate.js`, `index.js`, `loop-scope.js`) — iterations render against `extractPlainValue($)` plain clones, which are never reference-identical to the proxy elements the app sees through `$`. The runtime now exposes the live proxy as `manifest.__live`; `resolveLiveArray` re-resolves the loop's array against it and each instance carries a `liveItem` that `stampInstanceScopes` prefers, so `$scope(this,'alias')` handlers (and nested conditionals stamping `__vibeScope`) receive live identity. Diffing still keys off the plain `inst.item`; only the handler-facing value is live. Falls back to the plain item when the live array can't be resolved (no worse than before).
+  - Test: `tests/e2e/iteration-item-identity.spec.js` (handler receives the exact state-array element; identity-based removal targets the right item twice in a row across splices)
+
+---
+
 ## [1.9.5] - 2026-05-23
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ape-egg/vibe",
-  "version": "1.9.5",
+  "version": "1.9.7",
   "type": "module",
   "description": "Runtime-first reactivity with optional compiler",
   "main": "index.js",

package/runtime/affected.js

@@ -38,6 +38,53 @@ const matchesKey = (matchStr, key) => {
   return false;
 };
 
+// Resolve a clone-list entry to its live counterpart. processComponent swaps
+// the original `<component src>` for a post-process `<component>` wrapper and
+// records the new node on the original via `_vibeReplacedBy`. Mirrors
+// `liveCloneNode` in iterate.js — kept inline to avoid a circular import.
+const liveCloneNode = (node) => {
+  let cur = node;
+  while (cur && cur._vibeReplacedBy) cur = cur._vibeReplacedBy;
+  return cur;
+};
+
+// Descend into any inlined `<component>` parsed trees attached to an
+// iteration row. `_vibeIterTree` is stamped on the post-process wrapper by
+// index.js (mutation-observer path) and on nested inlined components reached
+// via `[data-vibe-iter-prop]`. The trees retain the original `@[…]` binding
+// text so this affected walk can flag changes the same way it would on the
+// row's own tree.
+const walkInlinedComponentTrees = (
+  clonedNodes,
+  state,
+  newState,
+  affected,
+  depth,
+) => {
+  for (let n = 0; n < clonedNodes.length; n++) {
+    const node = liveCloneNode(clonedNodes[n]);
+    if (!node || node.nodeType !== 1) continue;
+    const wrappers = [];
+    if (node._vibeIterTree) wrappers.push(node);
+    const found = node.querySelectorAll?.('[data-vibe-iter-prop]');
+    if (found) {
+      for (let i = 0; i < found.length; i++) {
+        if (found[i]._vibeIterTree) wrappers.push(found[i]);
+      }
+    }
+    for (let w = 0; w < wrappers.length; w++) {
+      recursive(
+        wrappers[w]._vibeIterTree,
+        state,
+        newState,
+        affected,
+        newState,
+        depth,
+      );
+    }
+  }
+};
+
 const recursive = (
   tree,
   state,
@@ -129,6 +176,26 @@ const recursive = (
             mergedNewState,
             depth + 1,
           );
+
+          // Components mounted as `<component src>` *inside* an iteration row
+          // are not children of `instance.tree` — their parsed tree lives on
+          // the post-process wrapper as `_vibeIterTree`. Without descending
+          // into it, conditionals / bindings inside the inlined component are
+          // invisible to this walk, so a global state change that should tear
+          // down a row-internal `<!-- if -->` (or flip a binding) inside the
+          // component is missed. `updateInstance` re-hydrates these trees via
+          // `hydrateInlinedIterationComponents`, but only when the iteration
+          // itself is flagged affected (array change). For pure global-state
+          // updates the array is unchanged, so we descend here instead.
+          if (instance.clonedNodes) {
+            walkInlinedComponentTrees(
+              instance.clonedNodes,
+              mergedOldState,
+              mergedNewState,
+              affected,
+              depth + 1,
+            );
+          }
         }
       }
     }
@@ -151,10 +218,19 @@ const recursive = (
 
     // Check if condition result changed
     if (oldValue !== newValue) {
+      // Carry the state pair the condition was evaluated against. Inside an
+      // iteration row this is the merged state (loop alias + current globals),
+      // outside it is the cycle's top-level state. hydrate hands these to
+      // updateConditional so the branch swap re-evaluates the expression in
+      // the same scope — without them, a row-internal `if` is re-evaluated
+      // against a state with no `item`, which always reads falsy and leaves
+      // rows that were initially on the else branch stuck there.
       affected.push({
         type: "conditional",
         node: tree,
         changeType: "expression",
+        scopedState: newState,
+        oldScopedState: state,
       });
       return affected;
     }

package/runtime/component.js

@@ -397,6 +397,11 @@ const processSingle = (el, debug) => {
           if (!registeredComponentIds.includes(componentId)) {
             registeredComponentIds.push(componentId);
           }
+          // Return the id so consumers can reach their reactive state via
+          // `$[id]` — matches the public component.js contract. Without this,
+          // `const id = component(state)` is undefined for src-fetched
+          // components and `$[id]` silently resolves to nothing.
+          return componentId;
         };
 
         // Re-running the script for a reused componentId (HMR remount) must

package/runtime/hydrate.js

@@ -14,9 +14,15 @@ export default (affected, state, manifest = {}, oldState = {}) => {
       return;
     }
 
-    // Handle conditional updates
+    // Handle conditional updates. Use the scoped pair affected attached when
+    // the conditional sits inside an iteration row — that pair has the row's
+    // loop alias overlaid on current globals, so the branch eval re-runs in
+    // the same scope the change was detected against. Top-level conditionals
+    // pass through with the cycle's state (affected attaches it verbatim there).
     if (aff.type === 'conditional') {
-      updateConditional(aff.node, state, oldState, manifest);
+      const condNewState = aff.scopedState || state;
+      const condOldState = aff.oldScopedState || oldState;
+      updateConditional(aff.node, condNewState, condOldState, manifest);
       return;
     }
 

package/runtime/index.js

@@ -665,6 +665,13 @@ const main = (s, config = {}, stringSelector = '') => {
     enumerable: false,
   });
 
+  // Expose the live reactive proxy to the iteration stamper so loop-scoped
+  // `on*` handlers (`$scope`) resolve the SAME object identity the app sees via
+  // `$`, instead of the plain diff-snapshot clones iterations render against
+  // (see extractPlainValue below). Non-enumerable so it never shows up in the
+  // manifest's node-path entry iteration.
+  Object.defineProperty(manifest, '__live', { value: $, enumerable: false, configurable: true });
+
   // Initial hydration - pass plain values so iteration can do reference comparison
   const initialState = extractPlainValue($);
   const affectedElements = affected(parsedTree, initialState, initialState);

package/runtime/iterate.js

@@ -476,7 +476,48 @@ const applyDomPropertyWrites = (instances, array, state, itemAlias, indexAlias,
   }
 };
 
-const renderBatch = (iterationNode, array, state, parent, endComment, parentScope = {}) => {
+// Resolve the loop's array against the LIVE `$` proxy root (not the plain
+// diff-snapshot the pipeline renders against — see extractPlainValue in
+// index.js). The plain clones are never reference-identical to the proxy
+// elements the app sees through `$`, so a loop var that flows into an `on*`
+// handler must come from here for `item === $.arr[i]` to hold. Returns null
+// when unresolvable (no live root yet, a derivation that builds fresh objects,
+// or a nested loop whose source hangs off an outer plain item) — callers fall
+// back to the plain item, which is no worse than the pre-fix behavior.
+const resolveLiveArray = (iterationNode, manifest, parentScope = {}) => {
+  const liveRoot = (manifest && manifest.__live) || globalThis.$;
+  if (!liveRoot) return null;
+  try {
+    const { arrayPath, startComment } = iterationNode.meta;
+    const parentEl = startComment.parentElement;
+    const resolved = resolveThisPath(arrayPath, parentEl);
+    const liveScoped = createScopedState(liveRoot, {}, parentScope);
+    const a = evalInScope(resolved, liveScoped, parentEl) ?? resolvePath(liveScoped, resolved);
+    return Array.isArray(a) ? a : null;
+  } catch {
+    return null;
+  }
+};
+
+const liveItemAt = (liveArray, index, fallback) =>
+  liveArray && index < liveArray.length ? liveArray[index] : fallback;
+
+// Refresh each instance's `liveItem` (the live `$`-proxy element handed to
+// loop-scoped `$scope` handlers, set when the instance was built) and stamp
+// scope. Re-resolving here keeps `liveItem` correct after the diff reorders or
+// updates instances. Diffing still keys off the plain `inst.item`; only the
+// handler-facing `$scope` value is live.
+const stampScopes = (iterationNode, manifest, parentScope = {}) => {
+  const liveArray = resolveLiveArray(iterationNode, manifest, parentScope);
+  const instances = iterationNode.runtime.instances;
+  for (let k = 0; k < instances.length; k++) {
+    const inst = instances[k];
+    inst.liveItem = liveItemAt(liveArray, inst.index, inst.item);
+  }
+  stampInstanceScopes(iterationNode, parentScope);
+};
+
+const renderBatch = (iterationNode, array, state, parent, endComment, parentScope = {}, manifest) => {
   const { itemAlias, indexAlias, template } = iterationNode.meta;
 
   if (!iterationNode.runtime.batchFn) {
@@ -512,7 +553,7 @@ const renderBatch = (iterationNode, array, state, parent, endComment, parentScop
   }
 
   // Stamp loop scope so `$scope(this,'alias')` handlers resolve the live item.
-  stampInstanceScopes(iterationNode, parentScope);
+  stampScopes(iterationNode, manifest, parentScope);
 };
 
 /**
@@ -866,9 +907,16 @@ export const renderIteration = (iterationNode, state, manifest, parentScope = {}
   // detached during hydrate (see findComponentIdForElement's detached fallback).
   const componentId = findComponentIdForElement(startComment.parentElement);
 
+  // Live `$`-proxy elements for the loop alias, so nested conditionals (which
+  // stamp `__vibeScope` from this scoped state) and `$scope` handlers receive
+  // the same identity the app sees through `$`. `inst.item` stays the plain
+  // snapshot value for the diff.
+  const liveArray = resolveLiveArray(iterationNode, manifest, parentScope);
+
   for (let i = 0; i < array.length; i++) {
     const item = array[i];
-    const localVars = { [itemAlias]: item, [indexAlias]: i };
+    const liveItem = liveItemAt(liveArray, i, item);
+    const localVars = { [itemAlias]: liveItem, [indexAlias]: i };
     const scopedState = createScopedState(state, localVars, parentScope);
 
     // Clone, parse, hydrate
@@ -890,7 +938,7 @@ export const renderIteration = (iterationNode, state, manifest, parentScope = {}
       _renderAllConditionals(tree, scopedState, manifest, nestedScope);
     }
 
-    instances.push({ element, tree, item, index: i, clonedNodes, scopedState });
+    instances.push({ element, tree, item, liveItem, index: i, clonedNodes, scopedState });
   }
 
   // Single DOM insertion for all items
@@ -898,7 +946,7 @@ export const renderIteration = (iterationNode, state, manifest, parentScope = {}
   iterationNode.runtime.instances = instances;
 
   // Stamp loop scope so `$scope(this,'alias')` handlers resolve the live item.
-  stampInstanceScopes(iterationNode, parentScope);
+  stampScopes(iterationNode, manifest, parentScope);
 
   // Mark comment as rendered (survives re-parsing since comment nodes persist in DOM)
   // Also store runtime data on the DOM node so it persists across re-parses
@@ -948,19 +996,32 @@ export const updateIteration = (iterationNode, newState, oldState, manifest, par
   const newArray = evalInScope(resolvedExpr, newState, startComment.parentElement) ?? resolvePath(newState, resolvedExpr) ?? [];
 
   // Use instances (what's actually rendered) as ground truth for old array
-  // when oldState disagrees with the rendered count, OR when stateOldArray
-  // and newArray are the same reference. The latter happens for
-  // registry-backed iterations: when the iteration's arrayPath resolves to
-  // `window.__vibeIterProps._pN`, refreshIterationComponentProps updates the
-  // slot in place, so both reads return the same NEW array. Without this
-  // fallback the diff would compare the new array against itself and report
-  // no changes — leaving the inlined iteration frozen on previously rendered
-  // items.
+  // whenever the only signal of change is a registry side-effect, or when
+  // the rendered count doesn't match the freshly evaluated state. Three
+  // cases collapse to "trust the rendered snapshot":
+  //   1. oldState === newState — forceRegistryBackedIterationUpdates calls
+  //      updateIteration with the same state on both sides because the only
+  //      mutation was a registry slot rewrite. The previously rendered
+  //      items are the only honest record of what was there before.
+  //   2. stateOldArray === newArray — the iteration's arrayPath resolves
+  //      directly to a registry slot (`window.__vibeIterProps._pN`); the
+  //      slot was swapped in place, so both reads return the same NEW
+  //      array.
+  //   3. length mismatch — oldState predates the current render.
+  // Otherwise the freshly evaluated state is a trustworthy "old".
+  //
+  // Literal-wrap expressions like `[s]` would otherwise slip through this
+  // net: they build different array refs each eval but both contain the
+  // just-rewritten registry value, so a naive diff sees no change. Case 1
+  // catches them.
   const instances = iterationNode.runtime.instances;
-  const oldArray =
-    stateOldArray !== newArray && instances.length === stateOldArray.length
-      ? stateOldArray
-      : instances.map((inst) => inst.item);
+  const useInstancesAsOld =
+    oldState === newState ||
+    stateOldArray === newArray ||
+    instances.length !== stateOldArray.length;
+  const oldArray = useInstancesAsOld
+    ? instances.map((inst) => inst.item)
+    : stateOldArray;
 
   // Compiled path: Use pre-compiled batch function when available
   if (compiled.canUseCompiled(iterationNode)) {
@@ -1071,7 +1132,7 @@ export const updateIteration = (iterationNode, newState, oldState, manifest, par
 
   // Re-stamp after the diff settles: moved/updated instances now carry their
   // current item + index, so `$scope` handlers resolve correctly post-reorder.
-  stampInstanceScopes(iterationNode, parentScope);
+  stampScopes(iterationNode, manifest, parentScope);
 };
 
 // Bulk replacement: clear all DOM and re-render from scratch
@@ -1096,7 +1157,7 @@ const bulkReplace = (iterationNode, newArray, state, manifest, parentScope) => {
   // For simple templates (no nested iterations/conditionals, single root element),
   // use batch string rendering: one string concatenation loop + one innerHTML parse
   if (canUseBatchRender(template)) {
-    renderBatch(iterationNode, newArray, state, parent, endComment, parentScope);
+    renderBatch(iterationNode, newArray, state, parent, endComment, parentScope, manifest);
     const instances = iterationNode.runtime.instances;
     for (let i = 0; i < instances.length; i++) {
       if (instances[i].element?.nodeType === 1) managedNodes.add(instances[i].element);
@@ -1109,12 +1170,13 @@ const bulkReplace = (iterationNode, newArray, state, manifest, parentScope) => {
   // parent.insertBefore call.
   const instances = [];
   const frag = document.createDocumentFragment();
+  const liveArray = resolveLiveArray(iterationNode, manifest, parentScope);
   for (let i = 0; i < newArray.length; i++) {
-    const built = buildInstance(iterationNode, newArray[i], i, state, parentScope);
+    const built = buildInstance(iterationNode, newArray[i], i, state, parentScope, liveItemAt(liveArray, i, newArray[i]));
     for (let j = 0; j < built.clonedNodes.length; j++) frag.appendChild(built.clonedNodes[j]);
     finalizeInstance(built, manifest, parentScope);
     instances.push({
-      element: built.element, tree: built.tree, item: newArray[i], index: i,
+      element: built.element, tree: built.tree, item: newArray[i], liveItem: built.liveItem, index: i,
       clonedNodes: built.clonedNodes, scopedState: built.scopedState,
     });
   }
@@ -1122,7 +1184,7 @@ const bulkReplace = (iterationNode, newArray, state, manifest, parentScope) => {
   iterationNode.runtime.instances = instances;
 
   // Stamp loop scope so `$scope(this,'alias')` handlers resolve the live item.
-  stampInstanceScopes(iterationNode, parentScope);
+  stampScopes(iterationNode, manifest, parentScope);
 };
 
 // Find an instance's canonical in-DOM anchor (the first of its cloned nodes
@@ -1191,14 +1253,19 @@ const detachInstanceDom = (iterationNode, index, parent) => {
 // Build a fresh instance's DOM + tree + scope from the iteration template.
 // Pure function — no DOM insertion, no side effects on iteration state.
 // Callers decide where the clones go (iteration parent, DocumentFragment).
-const buildInstance = (iterationNode, item, index, state, parentScope) => {
+// `liveItem` (resolved by the caller via resolveLiveArray, so a derived-array
+// loop evaluates the expression once per render, not once per row) is the live
+// `$`-proxy element for this index. Building scope from it gives nested
+// conditional stamps and `$scope` handlers the app-visible identity; `item`
+// (plain snapshot) is still tracked for the diff.
+const buildInstance = (iterationNode, item, index, state, parentScope, liveItem) => {
   const { itemAlias, indexAlias, template, startComment } = iterationNode.meta;
-  const localVars = { [itemAlias]: item, [indexAlias]: index };
+  const localVars = { [itemAlias]: liveItem, [indexAlias]: index };
   const scopedState = createScopedState(state, localVars, parentScope);
   const componentId = findComponentIdForElement(startComment.parentElement);
   const built = initializeBlock([...template.element.childNodes], scopedState, template, componentId, new Set(iterationNode.meta.scopeAliases));
   resolveIterationComponentProps(built.clonedNodes, scopedState);
-  return { ...built, scopedState, localVars };
+  return { ...built, scopedState, localVars, liveItem };
 };
 
 // After a built instance's clones are placed in the DOM (directly or via a
@@ -1220,12 +1287,13 @@ const finalizeInstance = (built, manifest, parentScope) => {
 
 const addInstance = (iterationNode, item, index, state, manifest, parentScope) => {
   const parent = iterationNode.meta.startComment.parentNode;
-  const built = buildInstance(iterationNode, item, index, state, parentScope);
+  const liveItem = liveItemAt(resolveLiveArray(iterationNode, manifest, parentScope), index, item);
+  const built = buildInstance(iterationNode, item, index, state, parentScope, liveItem);
   const insertBefore = resolveInsertBefore(iterationNode, index, parent);
   for (let i = 0; i < built.clonedNodes.length; i++) parent.insertBefore(built.clonedNodes[i], insertBefore);
   finalizeInstance(built, manifest, parentScope);
   iterationNode.runtime.instances.splice(index, 0, {
-    element: built.element, tree: built.tree, item, index, clonedNodes: built.clonedNodes,
+    element: built.element, tree: built.tree, item, liveItem: built.liveItem, index, clonedNodes: built.clonedNodes,
   });
 };
 
@@ -1267,7 +1335,8 @@ const updateInstanceRebuild = (iterationNode, index, newItem, state, manifest, p
   const parent = iterationNode.meta.startComment.parentNode;
   const instance = iterationNode.runtime.instances[index];
 
-  const built = buildInstance(iterationNode, newItem, index, state, parentScope);
+  const liveItem = liveItemAt(resolveLiveArray(iterationNode, manifest, parentScope), index, newItem);
+  const built = buildInstance(iterationNode, newItem, index, state, parentScope, liveItem);
   detachInstanceDom(iterationNode, index, parent);
   const insertBefore = resolveInsertBefore(iterationNode, index + 1, parent);
   for (let i = 0; i < built.clonedNodes.length; i++) parent.insertBefore(built.clonedNodes[i], insertBefore);
@@ -1276,6 +1345,7 @@ const updateInstanceRebuild = (iterationNode, index, newItem, state, manifest, p
   instance.element = built.element;
   instance.tree = built.tree;
   instance.item = newItem;
+  instance.liveItem = built.liveItem;
   instance.clonedNodes = built.clonedNodes;
   instance.scopedState = built.scopedState;
 };

package/runtime/loop-scope.js

@@ -128,6 +128,35 @@ export const resolveScope = (el, name) => {
   return undefined;
 };
 
+// Re-stamp the instance scope onto conditional-branch roots mounted inside a
+// row. A `<!-- if -->` within a loop mounts its branch content separately from
+// the iteration's own clonedNodes and stamps it once, at mount time
+// (conditionals.js). When the row later updates in place — its DOM node reused
+// for a new item — the iteration refreshes its own root stamp, but the branch
+// root keeps the stale mount-time stamp, and `resolveScope` hits that first on
+// the walk up (so a handler inside the conditional resolves the previous item).
+// Walking the instance's parsed tree and re-stamping every active conditional
+// branch root with the same fresh `scope` object closes that gap. Nested loops
+// are skipped: each iteration node manages its own instances' scopes.
+const restampConditionalBranches = (tree, scope) => {
+  if (!tree || typeof tree !== 'object') return;
+  if (tree.type === 'iteration') return;
+  if (tree.type === 'conditional') {
+    const active = tree.runtime?.activeInstance;
+    if (active?.nodes) {
+      for (let i = 0; i < active.nodes.length; i++) {
+        const node = active.nodes[i];
+        if (node && node.nodeType === 1) node.__vibeScope = scope;
+      }
+    }
+    if (active?.parsedTree) restampConditionalBranches(active.parsedTree, scope);
+    return;
+  }
+  if (tree.children) {
+    for (const key in tree.children) restampConditionalBranches(tree.children[key], scope);
+  }
+};
+
 // Stamp the in-scope loop vars onto every iteration instance's root element
 // node(s). The stamp accumulates the enclosing loop vars (`parentScope`) plus
 // this loop's item/index, so a single innermost stamp resolves every alias in
@@ -141,12 +170,20 @@ export const stampInstanceScopes = (iterationNode, parentScope = {}) => {
   const instances = iterationNode.runtime.instances;
   for (let k = 0; k < instances.length; k++) {
     const inst = instances[k];
-    const scope = { ...parentScope, [itemAlias]: inst.item, [indexAlias]: inst.index };
+    // `liveItem` (set by stampScopes in iterate.js) is the live `$`-proxy
+    // element so handlers get the identity the app sees; `item` is the plain
+    // diff-snapshot clone used for rendering. Prefer live when available.
+    const item = inst.liveItem !== undefined ? inst.liveItem : inst.item;
+    const scope = { ...parentScope, [itemAlias]: item, [indexAlias]: inst.index };
     const roots = inst.clonedNodes || (inst.element ? [inst.element] : []);
     for (let r = 0; r < roots.length; r++) {
       const node = roots[r];
       if (node && node.nodeType === 1) node.__vibeScope = scope;
     }
+    // Conditional branches inside the row carry their own stamp from mount time;
+    // refresh them with the same fresh scope so in-place row updates don't leave
+    // a handler inside an `<!-- if -->` resolving the previous item.
+    if (inst.tree) restampConditionalBranches(inst.tree, scope);
   }
 };
 

package/runtime/state.js

@@ -1,6 +1,20 @@
 // Track which objects are already proxied to avoid double-wrapping
 const proxyCache = new WeakMap();
 
+// Reading this symbol off any of our reactive proxies returns its raw
+// (unproxied) target; on anything else it's undefined. `unwrap` uses it to
+// collapse a proxy back to its raw object. This keeps object identity stable
+// across mutations: array methods (splice/push) and assignments read an element
+// — which `get` hands back as a proxy — and write it back into the tree; if we
+// stored the proxy, the next read would wrap it AGAIN, minting a fresh proxy
+// identity for the same underlying object. That would break reference identity
+// (a loop item would no longer be `=== $.arr[i]` after a splice) and make change
+// detection fire forever (a stored proxy never `===` the raw it's compared to).
+const RAW = Symbol('vibeRaw');
+
+const unwrap = (value) =>
+  value !== null && typeof value === 'object' && value[RAW] !== undefined ? value[RAW] : value;
+
 // Batching: collect mutations and flush once per microtask
 let pendingFlush = false;
 let flushCallback = null;
@@ -20,6 +34,12 @@ const scheduleFlush = () => {
 
 // Deep proxy: recursively wrap nested objects and arrays
 const createDeepProxy = (target, rerender, rootState = null, rootProp = null) => {
+  // Never wrap one of our own proxies — collapse to its raw target so the cache
+  // returns the single canonical proxy. Covers a proxy that slipped into the
+  // tree nested inside an assigned object literal (set only unwraps the
+  // top-level value), which would otherwise double-wrap on read.
+  target = unwrap(target);
+
   // For root level, rootState is the target itself
   if (rootState === null) {
     rootState = target;
@@ -33,6 +53,9 @@ const createDeepProxy = (target, rerender, rootState = null, rootProp = null) =>
 
   const proxy = new Proxy(target, {
     set(obj, prop, value) {
+      // Never store one of our proxies in the raw tree — store its raw target,
+      // so element identity stays stable across mutations (see RAW comment).
+      value = unwrap(value);
       const oldValue = obj[prop];
 
       // Only trigger rerender if value actually changed
@@ -68,6 +91,10 @@ const createDeepProxy = (target, rerender, rootState = null, rootProp = null) =>
     },
 
     get(target, prop) {
+      // Expose the raw target so `unwrap` (and external identity checks) can
+      // recover the unproxied object from any of our proxies.
+      if (prop === RAW) return target;
+
       const value = Reflect.get(target, prop);
 
       // Don't proxy non-objects, functions, null, or Promises.