@ape-egg/vibe 2.3.0 → 3.0.0

package/runtime/iterate.js

@@ -1,9 +1,11 @@
 import parse from './parse.js';
-import affected from './affected.js';
+import affected, { nodeSubscriberOf } from './affected.js';
 import hydrate from './hydrate.js';
-import { resolvePath, getItemKey, computeDiff } from './iteration-utils.js';
-import { resolveThisPath, evalInScope, findComponentIdForElement, rememberScopedKeys } from './utils.js';
+import { resolvePath, getItemKey, computeDiff, iterPropWrappersOf, bumpIterPropGeneration } from './iteration-utils.js';
+import { resolveThisPath, evalInScope, findComponentIdForElement, rememberScopedKeys, overlayKeysOf } from './utils.js';
+import { recordRead, beginTracking, endTracking, pruneDisconnected, markAlways } from './tracking.js';
 import { managedNodes, extractDependencies } from './conditionals.js';
+import { liveNode, isOutgoing } from './staging.js';
 import { stampInstanceScopes } from './loop-scope.js';
 import {
   BINDING_REGEX,
@@ -66,13 +68,13 @@ const hasComponentSrc = (templateEl) =>
 const hasInlinedComponentScript = (templateEl) =>
   !!templateEl.querySelector?.('script[type="vibe-module"]');
 
-// `__vibeForceClonePath` is a debug/test escape hatch — set it on globalThis to
+// `__vibe.forceClonePath` is a debug/test escape hatch — set it to
 // route every iteration through the clone+hydrate path, even templates that
 // would otherwise qualify for batch. Used by the batch-vs-clone-equivalence
 // test harness so the same templates can be rendered through both paths and
 // compared. Not part of the public API.
 const canUseBatchRender = (template) =>
-  !globalThis.__vibeForceClonePath &&
+  !globalThis.__vibe?.forceClonePath &&
   !hasNestedStructures(template) &&
   template.element.children.length <= 1 &&
   !hasComponentSrc(template.element) &&
@@ -163,7 +165,24 @@ const isValueStyleAttr = (attrName) =>
 // to render identically. New binding forms must update both paths in lockstep
 // or the equivalence harness in tests/e2e/batch-vs-clone-equivalence.spec.js
 // will catch the divergence.
-const compileBatchFn = (template, itemAlias, indexAlias, stateKeys, anchorEl) => {
+// Root-position `_cN` component references inside a binding expression —
+// string literals are consumed whole and left untouched (an `_cN` inside a
+// quoted string is content, not a reference — same discipline as
+// compileExpression's alternation in utils.js; the two renderers are
+// lockstep-equivalent by contract). Already-canonical `$['_cN']` forms and
+// property accesses stay untouched via the lookbehind.
+const CID_ROOT_REGEX =
+  /('(?:[^'\\]|\\.)*'|"(?:[^"\\]|\\.)*")|(?<![\w$.])_c(\d+)\b/g;
+
+export const canonicalizeComponentIds = (expr) =>
+  expr.replace(CID_ROOT_REGEX, (m, literal, id) => (literal !== undefined ? literal : `$['_c${id}']`));
+
+// Name-binding emission: resolve the expression under the `_e` guard, emit
+// ` value=""` when truthy, nothing otherwise.
+const nameBindingEmit = (exprSrc) =>
+  '${(()=>{const _v=_e(()=>(' + exprSrc + '));return _v?\' \'+_v+\'=""\':\'\';})()}';
+
+export const compileBatchFn = (template, itemAlias, indexAlias, stateKeys, anchorEl) => {
   // Walk a clone of the template DOM so we can stash a transient
   // `data-vibe-batch` marker on every element with DOM-property bindings
   // without polluting the cached template that subsequent renders read.
@@ -225,6 +244,17 @@ const compileBatchFn = (template, itemAlias, indexAlias, stateKeys, anchorEl) =>
     );
   }
 
+  // Compiler-stamped component references (`_cN.x` in SPA fragments) resolve
+  // through `$` at call time — the mirror of evalInScope's id canonicalization.
+  // Baked as bare identifiers they'd be a ReferenceError whenever the id is
+  // missing from the compile-time state-key snapshot (a fragment iteration can
+  // hydrate before its component script registers), and a state key that
+  // arrives later would never be picked up by the cached batch function.
+  BINDING_REGEX.lastIndex = 0;
+  templateHtml = templateHtml.replace(BINDING_REGEX, (_, expr) =>
+    '@[' + canonicalizeComponentIds(expr) + ']',
+  );
+
   const escaped = templateHtml
     .replace(/\\/g, '\\\\')
     .replace(/`/g, '\\`')
@@ -255,13 +285,13 @@ const compileBatchFn = (template, itemAlias, indexAlias, stateKeys, anchorEl) =>
   code = mapTagSpans(code, (tag) => tag.replace(BATCH_NAME_BINDING_REGEX, (_, _ws, expr) => {
     let decExpr = decodeEntities(expr);
     if (decExpr.includes('[') || decExpr.includes('(')) {
-      return '${(' + decExpr + ') ? \' \' + (' + decExpr + ') + \'=""\' : \'\'}';
+      return nameBindingEmit(decExpr);
     }
     const dot = decExpr.indexOf('.');
     if (dot === -1) {
       const ci = stateKeys.find((k) => k.toLowerCase() === decExpr.toLowerCase());
       if (ci) decExpr = ci;
-      return '${(' + decExpr + ') ? \' \' + (' + decExpr + ') + \'=""\' : \'\'}';
+      return nameBindingEmit(decExpr);
     }
     const head = decExpr.slice(0, dot);
     const tail = decExpr.slice(dot + 1).split('.');
@@ -269,10 +299,7 @@ const compileBatchFn = (template, itemAlias, indexAlias, stateKeys, anchorEl) =>
     const ciHead = knownNames.find((k) => k.toLowerCase() === head.toLowerCase()) || head;
     const tailJSON = JSON.stringify(tail);
     needsCiWalker = true;
-    return (
-      '${(()=>{const _v=_walkCi(' + ciHead + ',' + tailJSON +
-      ');return _v?\' \'+_v+\'=""\':\'\';})()}'
-    );
+    return nameBindingEmit('_walkCi(' + ciHead + ',' + tailJSON + ')');
   }));
 
   // Pure-binding attributes (`attr="@[expr]"`) — classify by attribute name:
@@ -283,14 +310,14 @@ const compileBatchFn = (template, itemAlias, indexAlias, stateKeys, anchorEl) =>
   code = code.replace(BATCH_ATTR_BINDING_REGEX, (_, _ws, attrName, expr) => {
     const decExpr = decodeEntities(expr);
     if (DOM_PROPERTIES.includes(attrName) || isValueStyleAttr(attrName)) {
-      return ' ' + attrName + '="${' + decExpr + '}"';
+      return ' ' + attrName + '="${_e(()=>(' + decExpr + '))}"';
     }
-    return '${(' + decExpr + ') ? \' ' + attrName + '=""\' : \'\'}';
+    return '${_e(()=>(' + decExpr + ')) ? \' ' + attrName + '=""\' : \'\'}';
   });
 
   // Remaining @[…] markers — text content and partial-binding attribute
   // values like `href="/items/@[id]/edit"`.
-  code = code.replace(BINDING_REGEX, (_, expr) => '${' + decodeEntities(expr) + '}');
+  code = code.replace(BINDING_REGEX, (_, expr) => '${_e(()=>(' + decodeEntities(expr) + '))}');
 
   // `$` is supplied as the last parameter so component-scoped expressions like
   // `$['_c0'].chosen` (produced by the this.X rewrite above) can resolve
@@ -298,6 +325,12 @@ const compileBatchFn = (template, itemAlias, indexAlias, stateKeys, anchorEl) =>
   // `_walkCi` is only emitted when at least one dotted-path name binding was
   // rewritten above — keeps the function body free of dead code for the
   // common no-name-binding case.
+  // Per-expression failure contract, mirroring evalInScope: an expression
+  // that can't evaluate yet (component state not registered, alias mid-swap)
+  // renders '' and the next flush corrects it — it must never throw out of
+  // the batch loop and abort every row after it. Non-throwing values pass
+  // through untouched, so template-literal coercion stays identical.
+  const evalGuardSrc = "const _e = (f) => { try { return f(); } catch { return ''; } };";
   const ciWalkerSrc = needsCiWalker
     ? `const _walkCi = (cur, segs) => {
         for (let i = 0; i < segs.length; i++) {
@@ -317,6 +350,7 @@ const compileBatchFn = (template, itemAlias, indexAlias, stateKeys, anchorEl) =>
     ...stateKeys,
     '$',
     `
+      ${evalGuardSrc}
       ${ciWalkerSrc}
       let html = '';
       const len = arr.length;
@@ -338,29 +372,28 @@ const compileBatchFn = (template, itemAlias, indexAlias, stateKeys, anchorEl) =>
 // is detached (see releaseOrphanedIterationProps).
 //
 // The name is intentionally all-lowercase. resolveIterationComponentProps
-// injects `@[window.__vibeiterprops._pN]` into the component's bindings, and
+// injects `@[window.__vibe.iterProps._pN]` into the component's bindings, and
 // prop substitution carries that accessor into the template's own bindings —
 // including name-bindings (`<icon @[props.element]>`). HTML lowercases
 // attribute names, so a camelCase accessor would arrive at hydrate as
-// `window.__vibeiterprops` and resolve to undefined, silently dropping the
+// `window.__vibe.iterProps` and resolve to undefined, silently dropping the
 // attribute. Keeping the global lowercase makes it survive that normalization.
 let __vibeIterPropCounter = 0;
 const ensureIterPropsRegistry = () => {
-  if (!window.__vibeiterprops) window.__vibeiterprops = {};
-  return window.__vibeiterprops;
+  return ((window.__vibe ??= {}).iterProps ??= {});
 };
 
 // Walk a removed subtree and free any iteration-prop registry slots stashed
 // on `<component>` elements inside it. Called from the mutation-observer
 // cleanup path after DOM detachment.
 export const releaseOrphanedIterationProps = (nodes) => {
-  if (!window.__vibeiterprops) return;
+  if (!window.__vibe?.iterProps) return;
   for (const node of nodes) {
     if (node.nodeType !== 1) continue;
     const free = (el) => {
       const ids = el._vibeIterPropIds;
       if (!ids) return;
-      for (const id of ids) delete window.__vibeiterprops[id];
+      for (const id of ids) delete window.__vibe.iterProps[id];
       el._vibeIterPropIds = null;
     };
     free(node);
@@ -404,18 +437,19 @@ const resolveSlotContentBindings = (el, scopedState, aliases) => {
       (el._vibeIterPropExprs = el._vibeIterPropExprs || []).push({ id, attrName: null, expr });
       (el._vibeIterPropIds = el._vibeIterPropIds || []).push(id);
     }
-    return `@[window.__vibeiterprops.${id}]`;
+    return `@[window.__vibe.iterProps.${id}]`;
   });
   if (idByExpr.size) {
     el._vibeSlotContent = rewritten;
     el.setAttribute('data-vibe-iter-prop', '');
+    bumpIterPropGeneration();
   }
 };
 
 // For <component src> elements inside an iteration instance, evaluate any
 // `@[expr]` attribute bindings against the iteration's scoped state and route
 // every resolved value through the global iteration-prop registry. The prop
-// attribute becomes `@[window.__vibeiterprops._pN]` — a live binding into the
+// attribute becomes `@[window.__vibe.iterProps._pN]` — a live binding into the
 // registry slot — for both primitives and objects. The original expression is
 // stashed on the element so the iteration's update path can re-evaluate it
 // against the new scope and refresh the slot, propagating the change into the
@@ -460,6 +494,7 @@ export const resolveIterationComponentProps = (nodes, scopedState, aliases) => {
           (aliases && extractDependencies(expr).some((d) => aliases.has(d)));
         if (!usesLocalScope) {
           el.setAttribute('data-vibe-iter-prop', '');
+          bumpIterPropGeneration();
           el._vibeIterPropExprs = el._vibeIterPropExprs || [];
           continue;
         }
@@ -469,8 +504,9 @@ export const resolveIterationComponentProps = (nodes, scopedState, aliases) => {
           const registry = ensureIterPropsRegistry();
           const id = `_p${__vibeIterPropCounter++}`;
           registry[id] = value;
-          el.setAttribute(attr.name, `@[window.__vibeiterprops.${id}]`);
+          el.setAttribute(attr.name, `@[window.__vibe.iterProps.${id}]`);
           el.setAttribute('data-vibe-iter-prop', '');
+          bumpIterPropGeneration();
           (el._vibeIterPropIds = el._vibeIterPropIds || []).push(id);
           (el._vibeIterPropExprs = el._vibeIterPropExprs || []).push({ id, attrName: attr.name, expr });
         } catch {
@@ -482,18 +518,6 @@ export const resolveIterationComponentProps = (nodes, scopedState, aliases) => {
   }
 };
 
-// Resolve a clonedNodes entry to its live counterpart. processComponent's
-// `el.replaceWith(newWrapper)` detaches the original `<component src>` and
-// installs a `<component>` post-process wrapper in its place — but the
-// iteration's `instance.clonedNodes` still points at the original. The
-// `_vibeReplacedBy` chain (set in component.js right before the swap) gives
-// us a single pointer to the live wrapper.
-const liveCloneNode = (node) => {
-  let cur = node;
-  while (cur && cur._vibeReplacedBy) cur = cur._vibeReplacedBy;
-  return cur;
-};
-
 // Walk a row's live cloned nodes and invoke `fn` for every inlined-component
 // wrapper carrying `marker` — the resolved node itself plus any
 // `[data-vibe-iter-prop]` descendant that carries it. The prop-refresh and
@@ -503,11 +527,11 @@ const liveCloneNode = (node) => {
 // marker matches the historical "take all, skip those without exprs" behavior.)
 const forEachIterWrapper = (clonedNodes, marker, fn) => {
   for (let n = 0; n < clonedNodes.length; n++) {
-    const node = liveCloneNode(clonedNodes[n]);
+    const node = liveNode(clonedNodes[n]);
     if (!node || node.nodeType !== 1) continue;
     if (node[marker]) fn(node);
-    const found = node.querySelectorAll?.('[data-vibe-iter-prop]');
-    if (found) for (let i = 0; i < found.length; i++) {
+    const found = iterPropWrappersOf(node);
+    for (let i = 0; i < found.length; i++) {
       if (found[i][marker]) fn(found[i]);
     }
   }
@@ -555,7 +579,7 @@ const refreshIterationComponentProps = (clonedNodes, scopedState) => {
 
 // Walk an inlined component's parsed tree and force `updateIteration` on any
 // iteration node whose arrayPath resolves through the iteration-prop registry
-// (`window.__vibeiterprops._pN`). The registry slot was just refreshed in
+// (`window.__vibe.iterProps._pN`). The registry slot was just refreshed in
 // place by `refreshIterationComponentProps`, so `affected()` can't notice
 // the change — both old/new evaluations of the path read the same updated
 // value. `updateIteration` is the only place equipped to diff against
@@ -564,7 +588,7 @@ const refreshIterationComponentProps = (clonedNodes, scopedState) => {
 // in sync. Without this, an `<inner-component>` whose template iterates over
 // an array prop stays frozen on its initial-render items when the prop's
 // contents change.
-const REGISTRY_SLOT_REGEX = /__vibeiterprops\.(_p\d+)/;
+const REGISTRY_SLOT_REGEX = /__vibe\.iterProps\.(_p\d+)/;
 const forceRegistryBackedIterationUpdates = (tree, state, manifest, parentScope, changedSlots) => {
   if (!tree) return;
   if (tree.type === 'iteration') {
@@ -705,6 +729,11 @@ const renderBatch = (iterationNode, array, state, parent, endComment, parentScop
   // unrelated state change produces identical HTML (see updateIteration).
   iterationNode.runtime.lastBatchHtml = html;
 
+  // Batch rows close over every state key (stateKeys = Object.keys(state) at
+  // compile time) — "re-render on any change" is their honest dependency
+  // set; the identical-HTML guard above absorbs the no-ops (walk parity).
+  markAlways(nodeSubscriberOf(iterationNode, 'iteration'));
+
   batchParseTemplate.innerHTML = html;
   const frag = batchParseTemplate.content;
   const kids = frag.children;
@@ -1001,6 +1030,11 @@ export const createScopedState = (globalState, localVars, parentScope = {}) => {
     get(target, prop) {
       if (prop in localVars) return localVars[prop];
       if (prop in parentScope) return parentScope[prop];
+      // Global fallthrough is a root-key read; alias hits above are the
+      // row's own scope (owned by its iteration's diff) and never record.
+      // When the target is the live root the proxy trap records too — the
+      // window's read Set dedupes.
+      recordRead(prop);
       return Reflect.get(target, prop);
     },
 
@@ -1046,8 +1080,10 @@ export const renderAllIterations = (tree, state, manifest, parentScope = {}) =>
     return 1;
   }
 
-  // Recursively render iterations in child nodes
-  if (tree.children) {
+  // Recursively render iterations in child nodes — except under an outgoing
+  // wrapper (reactive-src remount in flight): its subtree is frozen until
+  // the swap replaces it.
+  if (tree.children && !isOutgoing(tree.element)) {
     for (const key in tree.children) {
       const child = tree.children[key];
       if (child && typeof child === 'object') {
@@ -1114,7 +1150,12 @@ export const renderIteration = (iterationNode, state, manifest, parentScope = {}
   // and inline literals (['a', 'b']). Falls back to resolvePath for
   // simple paths that evalInScope might miss in scoped contexts.
   const resolvedExpr = resolveThisPath(arrayPath, startComment.parentElement);
+  // First render doubles as the iteration's subscription registration.
+  const trackSub = nodeSubscriberOf(iterationNode, 'iteration');
+  trackSub.lastScope = state;
+  beginTracking(trackSub, overlayKeysOf(state));
   const array = evalInScope(resolvedExpr, state, startComment.parentElement) ?? resolvePath(state, resolvedExpr);
+  endTracking();
   if (!Array.isArray(array) || array.length === 0) {
     iterationNode.runtime.instances = [];
     return;
@@ -1124,6 +1165,9 @@ export const renderIteration = (iterationNode, state, manifest, parentScope = {}
   if (compiled.canUseCompiled(iterationNode)) {
     const compiledMeta = compiled.getCompiledMeta(iterationNode);
     if (compiled.renderCompiled(iterationNode, array, state, compiledMeta, parent, endComment)) {
+      // Compiled rows close over every state key — "any change" is their
+      // honest dependency set (walk parity for treeless instances).
+      markAlways(trackSub);
       // Mark as rendered
       startComment.__vibeRendered = true;
       startComment.__vibeIterationRuntime = iterationNode.runtime;
@@ -1163,7 +1207,7 @@ const evalKeyForItem = (iterationNode, item, index, state, parentScope) => {
 // once per iteration block, so console doesn't drown.
 const warnIndexCoupledKey = (iterationNode) => {
   if (iterationNode.runtime.warnedIndexCoupled) return;
-  if (!globalThis.__vibeDebug) return;
+  if (!globalThis.__vibe?.debug) return;
   iterationNode.runtime.warnedIndexCoupled = true;
   const arrayPath = iterationNode.meta.arrayPath;
   console.warn(
@@ -1180,7 +1224,12 @@ export const updateIteration = (iterationNode, newState, oldState, manifest, par
   const resolvedExpr = resolveThisPath(arrayPath, startComment.parentElement);
 
   const stateOldArray = evalInScope(resolvedExpr, oldState, startComment.parentElement) ?? resolvePath(oldState, resolvedExpr) ?? [];
+  // New-side eval re-records the iteration's subscription (self-healing).
+  const trackSub = nodeSubscriberOf(iterationNode, 'iteration');
+  trackSub.lastScope = newState;
+  beginTracking(trackSub, overlayKeysOf(newState));
   const newArray = evalInScope(resolvedExpr, newState, startComment.parentElement) ?? resolvePath(newState, resolvedExpr) ?? [];
+  endTracking();
 
   // Use instances (what's actually rendered) as ground truth for old array
   // whenever the only signal of change is a registry side-effect, or when
@@ -1191,7 +1240,7 @@ export const updateIteration = (iterationNode, newState, oldState, manifest, par
   //      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
+  //      directly to a registry slot (`window.__vibe.iterProps._pN`); the
   //      slot was swapped in place, so both reads return the same NEW
   //      array.
   //   3. length mismatch — oldState predates the current render.
@@ -1223,6 +1272,8 @@ export const updateIteration = (iterationNode, newState, oldState, manifest, par
         endComment,
       )
     ) {
+      // Still treeless — keep the honest any-change subscription.
+      markAlways(trackSub);
       return;
     }
     // Fall through to runtime path if compiled failed
@@ -1242,6 +1293,10 @@ export const updateIteration = (iterationNode, newState, oldState, manifest, par
   // skip this — they take the diff path below.
   const hasTreelessInstances = instances.length > 0 && !instances[0].tree;
   if (hasTreelessInstances && oldState !== newState) {
+    // Treeless rows stay on the any-change subscription. If bulkReplace
+    // below clone-renders trees instead, the next new-side eval re-records
+    // real deps (self-healing).
+    markAlways(trackSub);
     // affected.js conservatively flags a treeless (batch-rendered) iteration on
     // ANY state change, since it can't walk per-row trees to see which bindings
     // actually depend on what changed. Before tearing down and recreating every
@@ -1385,8 +1440,27 @@ const releaseRemovedSubtrees = (removedRoots, manifest) => {
   }
 
   // Parsed tree: delete each removed root's node — its whole subtree (nested
-  // conditionals/iterations and their branch templates) goes with it.
-  if (tree) pruneTreeNodes(tree, removedEls);
+  // conditionals/iterations and their branch templates) goes with it. Prune
+  // by CONTAINMENT, not just root identity: a row's inlined component trees
+  // are also linked under OTHER ancestors' children (the dual linkage the
+  // affected-walk dedupe documents), keyed by inner wrapper elements that are
+  // never themselves removed roots. Left in place, every later walk descends
+  // those detached trees — re-hydrating dead DOM and (since subscriptions)
+  // re-registering its subscribers after teardown pruned them, pinning the
+  // whole removed subtree forever.
+  const roots = [...removedEls];
+  if (tree) pruneTreeNodes(tree, removedEls, roots);
+
+  // The removed rows' subscribers (bindings, nested conditionals/iterations)
+  // are anchored to nodes that just left the document.
+  pruneDisconnected();
+};
+
+const underRemovedRoot = (el, roots) => {
+  for (let i = 0; i < roots.length; i++) {
+    if (roots[i] !== el && roots[i].contains?.(el)) return true;
+  }
+  return false;
 };
 
 // True when `key` is, or is a descendant of, any path in `removedPaths`.
@@ -1398,14 +1472,15 @@ const pathUnderRemoved = (key, removedPaths) => {
   return false;
 };
 
-const pruneTreeNodes = (node, removedEls) => {
+const pruneTreeNodes = (node, removedEls, roots) => {
   const children = node.children;
   if (!children) return;
   for (const key in children) {
     const child = children[key];
     if (!child) continue;
-    if (removedEls.has(child.element)) delete children[key];
-    else pruneTreeNodes(child, removedEls);
+    const el = child.element ?? child.textNode;
+    if (el && (removedEls.has(el) || underRemovedRoot(el, roots))) delete children[key];
+    else pruneTreeNodes(child, removedEls, roots);
   }
 };
 

package/runtime/iteration-utils.js

@@ -35,8 +35,11 @@ export const cloneTemplate = (templateElement) => {
   return templateElement.cloneNode(true);
 };
 
-// Find matching <!-- /each --> comment with depth tracking
-export const findEndComment = (nodes, startIndex) => {
+// Find matching <!-- /each --> comment with depth tracking. The index form
+// returns -1 when unmatched — parse.js probes with it to tell an authored
+// (but malformed) directive from a prose comment that merely starts with
+// "each".
+export const findEndCommentIndex = (nodes, startIndex) => {
   let depth = 1;
   for (let i = startIndex; i < nodes.length; i++) {
     if (nodes[i].nodeName === '#comment') {
@@ -51,14 +54,25 @@ export const findEndComment = (nodes, startIndex) => {
       }
     }
   }
-  throw new Error('Unmatched <!-- each --> comment: missing <!-- /each -->');
+  return -1;
 };
 
-// Find matching <!-- /if --> and optional <!-- else --> with depth tracking
-// Returns { elseIndex: number | null, endIndex: number }
+export const findEndComment = (nodes, startIndex) => {
+  const i = findEndCommentIndex(nodes, startIndex);
+  if (i === -1) throw new Error('Unmatched <!-- each --> comment: missing <!-- /each -->');
+  return i;
+};
+
+// Find matching <!-- /if --> and optional <!-- else --> / <!-- else if -->
+// with depth tracking. Returns { elseIndex, endIndex, elseText } — elseText
+// is the boundary comment's trimmed text ('else' or 'else if <expr>'), so
+// parse.js can desugar a chain: only the FIRST boundary at depth 1 is
+// captured; the rest of the chain lives inside the false-branch span and
+// desugars recursively into nested conditionals.
 export const findConditionalEnd = (nodes, startIndex) => {
   let depth = 1;
   let elseIndex = null;
+  let elseText = null;
 
   for (let i = startIndex; i < nodes.length; i++) {
     if (nodes[i].nodeName === '#comment') {
@@ -68,15 +82,20 @@ export const findConditionalEnd = (nodes, startIndex) => {
       if (CONDITIONAL_START_REGEX.test(text)) {
         depth++;
       }
-      // Check for else at current depth
-      else if (text === 'else' && depth === 1 && elseIndex === null) {
+      // Check for else / else-if at current depth
+      else if (
+        depth === 1 &&
+        elseIndex === null &&
+        (text === 'else' || /^else\s+if\s+.+/.test(text))
+      ) {
         elseIndex = i;
+        elseText = text;
       }
       // Check for /if
       else if (text === '/if') {
         depth--;
         if (depth === 0) {
-          return { elseIndex, endIndex: i };
+          return { elseIndex, endIndex: i, elseText };
         }
       }
     }
@@ -196,6 +215,38 @@ export const longestCommonSubsequence = (arr1, arr2) => {
   return lcs;
 };
 
+// The affected walk and the iteration update path both ask "which
+// [data-vibe-iter-prop] wrappers live under this row node?" for every row on
+// every flush — re-querying each time dominated flush cost on iteration-heavy
+// pages (~24k querySelectorAll calls per flush on the game's armory, nearly all
+// returning nothing). The wrapper set only changes when a mount path stamps the
+// attribute, so each stamp site bumps a global generation and the query result
+// is cached per node against it. A cache hit still prunes wrappers whose
+// subtree was torn down since (nested each/if removals keep the row node but
+// drop descendants) — additions always arrive through a stamp ⇒ a bump ⇒ a
+// fresh query.
+let iterPropGeneration = 0;
+
+export const bumpIterPropGeneration = () => {
+  iterPropGeneration++;
+};
+
+export const iterPropWrappersOf = (node) => {
+  const cached = node._vibeIterPropWrappers;
+  if (cached && cached.gen === iterPropGeneration) {
+    const list = cached.list;
+    for (let i = list.length - 1; i >= 0; i--) {
+      if (!node.contains(list[i])) list.splice(i, 1);
+    }
+    return list;
+  }
+  const list = [];
+  const found = node.querySelectorAll?.('[data-vibe-iter-prop]');
+  if (found) for (let i = 0; i < found.length; i++) list.push(found[i]);
+  node._vibeIterPropWrappers = { gen: iterPropGeneration, list };
+  return list;
+};
+
 // Generate unique key for array items.
 // `customKey` (when defined and not null) wins over every default heuristic —
 // the developer has declared identity explicitly via `<!-- each xs as x (expr) -->`.

package/runtime/manifest.js

@@ -1,6 +1,81 @@
+// The manifest is the one-way dotPath→element map the runtime hangs DOM
+// bookkeeping on. Three hot paths need the REVERSE direction (element→path):
+// conditional branch mounts and the mutation observer's add/remove tracking.
+// Scanning Object.entries per lookup is O(manifest) per node — quadratic as
+// pages grow, and the dominant cost of mounting conditional-heavy pages. A
+// WeakMap rides on the manifest object (non-enumerable, like __live/__tree)
+// and is maintained by every write; lookups validate against the forward map
+// so a deleted entry can never resolve stale.
+const indexOf = (manifest) => {
+  if (!manifest.__paths) {
+    Object.defineProperty(manifest, '__paths', {
+      value: new WeakMap(),
+      enumerable: false,
+      configurable: true,
+    });
+  }
+  return manifest.__paths;
+};
+
+// Single write point: forward map + reverse index together. Non-object
+// "elements" (text nodes stored as strings, null placeholders) can't be
+// WeakMap keys and are never reverse-looked-up — forward map only. An
+// element can legitimately hold MORE than one path (its own node plus an
+// inlined-slot alias, branch-graft re-registrations); the index keeps every
+// registered path shortest-first, so lookups answer with the subtree ROOT —
+// removal-time pruning must sweep the whole region, not a deeper alias.
+export const setManifestEntry = (manifest, path, element) => {
+  manifest[path] = element;
+  if (element !== null && typeof element === 'object') {
+    const index = indexOf(manifest);
+    const paths = index.get(element);
+    if (!paths) {
+      index.set(element, [path]);
+    } else if (!paths.includes(path)) {
+      let at = paths.length;
+      while (at > 0 && paths[at - 1].length > path.length) at--;
+      paths.splice(at, 0, path);
+    }
+  }
+};
+
+// O(paths-per-element) reverse lookup, validated: entries whose forward
+// mapping was deleted (branch unmounts, subtree pruning) compact away; the
+// first path the forward map still agrees with — the shortest live one —
+// wins. Null when none survive.
+export const manifestPathOf = (manifest, element) => {
+  if (element === null || typeof element !== 'object') return null;
+  const paths = manifest.__paths?.get(element);
+  if (!paths) return null;
+  for (let i = 0; i < paths.length; i++) {
+    if (manifest[paths[i]] === element) {
+      if (i > 0) paths.splice(0, i);
+      return paths[0];
+    }
+  }
+  manifest.__paths.delete(element);
+  return null;
+};
+
+// Removal counterpart of addToManifest (index.js): drop the root entry and
+// every entry under its dot-scope. A PREFIX SWEEP over the manifest keys, not
+// a tree walk — branch mounts register alias paths a tree walk can't reach,
+// and the sweep stays correct through any tree/manifest drift. Deleting only
+// the root entry leaked the rest: an SPA outlet swap left ~4,400
+// detached-element entries behind per navigation, pinning the DOM of every
+// page ever visited. The manifest stays bounded, so O(manifest) per removal
+// batch is cheap. An empty root path is never a legitimate removal target.
+export const removeManifestSubtree = (manifest, dotPath) => {
+  if (!dotPath) return;
+  delete manifest[dotPath];
+  const prefix = dotPath + '.';
+  for (const key in manifest) {
+    if (key.startsWith(prefix)) delete manifest[key];
+  }
+};
+
 const recursive = (tree, results, tagChain) => {
-  const path = tagChain.join('.');
-  results[path] = tree.element;
+  setManifestEntry(results, tagChain.join('.'), tree.element);
 
   if (tree.children && Object.keys(tree.children).length > 0) {
     Object.keys(tree.children).forEach((tag) => {