@ape-egg/vibe 2.0.0 → 2.0.5

package/runtime/index.js

@@ -23,7 +23,7 @@ import {
   PHASE_READY,
   DEHYDRATE_CLASS_OR_ATTR,
 } from './constants.js';
-import { processComponent, abortComponentFetch, collectComponentIds, releaseOrphanedComponentState, renderComponentTemplate } from './component.js';
+import { processComponent, abortComponentFetch, collectComponentIds, releaseOrphanedComponentState, renderComponentTemplate, executeCompiledComponentScripts } from './component.js';
 import { debugLog } from './debug.js';
 import { shouldCleanup, cleanup } from './cleanup.js';
 import { reconcile } from './reconcile.js';
@@ -706,6 +706,18 @@ const main = (s, config = {}, stringSelector = '') => {
   // first conditional/binding eval.
   if (typeof window !== 'undefined') window.$ = $;
 
+  // Compiled pages: execute build-inlined component scripts (neutered to
+  // type="vibe-module" by the compiler) through the runtime's component-script
+  // pipeline — same injected component(), same scoped `$`, same import
+  // rewriting as fetched scripts. Runs after `window.$` is live so
+  // `const id = component(state); $[id].x = ...` captures the reactive proxy,
+  // and before initial hydration so synchronous scripts' state is already
+  // registered when `this.` bindings first evaluate. Async scripts gate
+  // `ready` via compiledScriptsDone below.
+  let compiledScriptsDone = true;
+  const compiledScriptsPending = executeCompiledComponentScripts();
+  if (compiledScriptsPending) compiledScriptsDone = false;
+
   // Initial hydration - pass plain values so iteration can do reference comparison
   const initialState = extractPlainValue($);
   const affectedElements = affected(parsedTree, initialState, initialState);
@@ -1125,7 +1137,7 @@ const main = (s, config = {}, stringSelector = '') => {
 
   // Check if cleanup should run
   const checkCleanup = () => {
-    if (cleanupExecuted || isCompiling) return;
+    if (cleanupExecuted || isCompiling || !compiledScriptsDone) return;
 
     // Check for pending mutations first
     const pendingMutations = observer ? observer.takeRecords() : [];
@@ -1157,6 +1169,15 @@ const main = (s, config = {}, stringSelector = '') => {
   // Register hook to check for cleanup readiness after each mutation batch
   hooks.afterDomMutation.push(checkCleanup);
 
+  // Async compiled component scripts (imports) finish after boot — unlock the
+  // ready gate and re-check once their state has merged into `$`.
+  if (compiledScriptsPending) {
+    compiledScriptsPending.then(() => {
+      compiledScriptsDone = true;
+      checkCleanup();
+    });
+  }
+
   // Process component elements after initialization - MutationObserver will handle hydration
   componentProcessingStarted = true;
 

package/runtime/iterate.js

@@ -87,6 +87,40 @@ const BATCH_ATTR_BINDING_REGEX = new RegExp(
   'g',
 );
 
+// Apply fn to tag spans only (`<el ...>`, quote-aware so a `>` inside an
+// attribute value doesn't end the span), leaving text spans and comments
+// untouched. Used to scope the name-binding rewrite to positions where a
+// name binding can actually occur.
+const mapTagSpans = (html, fn) => {
+  let out = '';
+  let i = 0;
+  while (i < html.length) {
+    const lt = html.indexOf('<', i);
+    if (lt === -1) {
+      out += html.slice(i);
+      break;
+    }
+    out += html.slice(i, lt);
+    let j = lt + 1;
+    let quote = null;
+    while (j < html.length) {
+      const c = html[j];
+      if (quote) {
+        if (c === quote) quote = null;
+      } else if (c === '"' || c === "'") {
+        quote = c;
+      } else if (c === '>') {
+        break;
+      }
+      j++;
+    }
+    const span = html.slice(lt, Math.min(j + 1, html.length));
+    out += /^<\/?[a-zA-Z]/.test(span) ? fn(span) : span;
+    i = j + 1;
+  }
+  return out;
+};
+
 // Whether a hydrate'd attribute is a "value-style" string attr (kept verbatim)
 // rather than a boolean-coerced attr (added/removed by truthiness). Mirrors
 // the predicate hydrate.js uses, so batch and clone classify identically.
@@ -126,6 +160,17 @@ const compileBatchFn = (template, itemAlias, indexAlias, stateKeys, anchorEl) =>
   const componentId = anchorEl ? findComponentIdForElement(anchorEl) : null;
   const domPropertyWrites = [];
 
+  // Trim binding-bearing text nodes — the clone path writes the interpolated
+  // text node content trimmed (hydrate.js), so the batch template must not
+  // carry the author's indentation around a binding that sits on its own line.
+  const textWalker = document.createTreeWalker(tplClone, NodeFilter.SHOW_TEXT);
+  while (textWalker.nextNode()) {
+    const textNode = textWalker.currentNode;
+    if (textNode.textContent.includes('@[')) {
+      textNode.textContent = textNode.textContent.trim();
+    }
+  }
+
   const allEls = tplClone.querySelectorAll('*');
   for (let n = 0; n < allEls.length; n++) {
     const el = allEls[n];
@@ -167,7 +212,10 @@ const compileBatchFn = (template, itemAlias, indexAlias, stateKeys, anchorEl) =>
 
   // Name bindings: `<el @[expr]>` — emit ` resolvedName=""` when truthy, else
   // emit nothing. The lookahead `(?=[\s/>])` distinguishes name-position
-  // bindings from attribute-value-position bindings (which are followed by `=`).
+  // bindings from attribute-value-position bindings (which are followed by `=`)
+  // — but a TEXT-position binding on its own line is also whitespace-bounded,
+  // so the pass runs only over tag spans (mapTagSpans): name bindings can only
+  // exist inside a tag.
   //
   // HTML parses attribute names lowercase, so a binding like
   // `<icon @[attrName]>` arrives here as `@[attrname]` and a dotted form like
@@ -182,7 +230,7 @@ const compileBatchFn = (template, itemAlias, indexAlias, stateKeys, anchorEl) =>
   // Bracket / call expressions pass through unchanged — they need a real
   // evaluator and aren't worth special-casing here.
   let needsCiWalker = false;
-  code = code.replace(BATCH_NAME_BINDING_REGEX, (_, _ws, expr) => {
+  code = mapTagSpans(code, (tag) => tag.replace(BATCH_NAME_BINDING_REGEX, (_, _ws, expr) => {
     let decExpr = decodeEntities(expr);
     if (decExpr.includes('[') || decExpr.includes('(')) {
       return '${(' + decExpr + ') ? \' \' + (' + decExpr + ') + \'=""\' : \'\'}';
@@ -203,7 +251,7 @@ const compileBatchFn = (template, itemAlias, indexAlias, stateKeys, anchorEl) =>
       '${(()=>{const _v=_walkCi(' + ciHead + ',' + tailJSON +
       ');return _v?\' \'+_v+\'=""\':\'\';})()}'
     );
-  });
+  }));
 
   // Pure-binding attributes (`attr="@[expr]"`) — classify by attribute name:
   //   DOM property  → emit attribute (post-stamp also writes the property)
@@ -266,23 +314,31 @@ const compileBatchFn = (template, itemAlias, indexAlias, stateKeys, anchorEl) =>
 // reachable from binding expressions because `window` is in evalInScope's
 // known-globals list. Each entry is freed when the owning component element
 // is detached (see releaseOrphanedIterationProps).
+//
+// The name is intentionally all-lowercase. resolveIterationComponentProps
+// injects `@[window.__vibeiterprops._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
+// attribute. Keeping the global lowercase makes it survive that normalization.
 let __vibeIterPropCounter = 0;
 const ensureIterPropsRegistry = () => {
-  if (!window.__vibeIterProps) window.__vibeIterProps = {};
-  return window.__vibeIterProps;
+  if (!window.__vibeiterprops) window.__vibeiterprops = {};
+  return window.__vibeiterprops;
 };
 
 // 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.__vibeiterprops) 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.__vibeiterprops[id];
       el._vibeIterPropIds = null;
     };
     free(node);
@@ -293,7 +349,7 @@ export const releaseOrphanedIterationProps = (nodes) => {
 // 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.__vibeiterprops._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
@@ -327,7 +383,7 @@ export const resolveIterationComponentProps = (nodes, scopedState) => {
           const registry = ensureIterPropsRegistry();
           const id = `_p${__vibeIterPropCounter++}`;
           registry[id] = value;
-          el.setAttribute(attr.name, `@[window.__vibeIterProps.${id}]`);
+          el.setAttribute(attr.name, `@[window.__vibeiterprops.${id}]`);
           el.setAttribute('data-vibe-iter-prop', '');
           (el._vibeIterPropIds = el._vibeIterPropIds || []).push(id);
           (el._vibeIterPropExprs = el._vibeIterPropExprs || []).push({ id, attrName: attr.name, expr });
@@ -412,7 +468,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.__vibeiterprops._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
@@ -421,7 +477,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 = /__vibeiterprops\.(_p\d+)/;
 const forceRegistryBackedIterationUpdates = (tree, state, manifest, parentScope, changedSlots) => {
   if (!tree) return;
   if (tree.type === 'iteration') {
@@ -483,11 +539,19 @@ const applyDomPropertyWrites = (instances, array, state, itemAlias, indexAlias,
         const { prop, expr } = domPropertyWrites[indexes[k] | 0];
         const value = evalInScope(expr, localState, el);
         if (el[prop] !== value) el[prop] = value;
-        if (value === undefined || value === null) {
-          if (el.hasAttribute(prop)) el.removeAttribute(prop);
-        } else {
-          const str = String(value);
-          if (el.getAttribute(prop) !== str) el.setAttribute(prop, str);
+        if (prop === 'value') {
+          if (value === undefined || value === null) {
+            if (el.hasAttribute(prop)) el.removeAttribute(prop);
+          } else {
+            const str = String(value);
+            if (el.getAttribute(prop) !== str) el.setAttribute(prop, str);
+          }
+        } else if (value) {
+          // checked/selected are boolean — presence/absence is the truthful
+          // attribute form, matching the clone path in hydrate.js.
+          if (el.getAttribute(prop) !== '') el.setAttribute(prop, '');
+        } else if (el.hasAttribute(prop)) {
+          el.removeAttribute(prop);
         }
       }
       el.removeAttribute('data-vibe-batch');
@@ -983,7 +1047,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.__vibeiterprops._pN`); the
   //      slot was swapped in place, so both reads return the same NEW
   //      array.
   //   3. length mismatch — oldState predates the current render.
@@ -1039,14 +1103,31 @@ export const updateIteration = (iterationNode, newState, oldState, manifest, par
     // actually depend on what changed. Before tearing down and recreating every
     // row, re-run the batch: if it yields identical HTML, the rows don't depend
     // on what changed, so keep the existing DOM nodes — preserving their event
-    // listeners (e.g. tooltip mouseleave) and any in-progress drag. Skip the
-    // shortcut when the template has DOM-property writes (value/checked/etc.),
-    // which aren't reflected in the HTML string.
+    // listeners (e.g. tooltip mouseleave) and any in-progress click on a row
+    // control. DOM-property writes (value/checked/etc.) aren't reflected in the
+    // HTML string, so they're re-applied against the kept rows — property
+    // assignment also wins over a user-dirtied checkbox, which an attribute
+    // rewrite wouldn't.
     const rt = iterationNode.runtime;
-    if (rt.batchFn && rt.lastBatchHtml !== undefined && (!rt.domPropertyWrites || rt.domPropertyWrites.length === 0)) {
+    if (rt.batchFn && rt.lastBatchHtml !== undefined) {
       const stateValues = rt.stateKeys.map((k) => newState[k]);
       const newHtml = rt.batchFn(newArray, ...stateValues, newState);
-      if (newHtml === rt.lastBatchHtml) return;
+      if (newHtml === rt.lastBatchHtml) {
+        if (rt.domPropertyWrites?.length) {
+          // Identical HTML implies identical row count — refresh item refs so
+          // $scope handlers and property writes read the live array.
+          for (let i = 0; i < instances.length; i++) instances[i].item = newArray[i];
+          applyDomPropertyWrites(
+            instances,
+            newArray,
+            newState,
+            iterationNode.meta.itemAlias,
+            iterationNode.meta.indexAlias,
+            rt.domPropertyWrites,
+          );
+        }
+        return;
+      }
     }
     bulkReplace(iterationNode, newArray, newState, manifest, parentScope);
     return;

package/runtime/loop-scope.js

@@ -51,8 +51,11 @@ const copyString = (value, i, push) => {
 // Rewrite standalone references to loop-variable aliases inside an event-handler
 // expression into `$scope(this,'alias')` calls. Skips `@[...]` binding spans
 // (they keep their existing hydrate-time stringifying behavior), string literals,
-// and member accesses, so only identifiers that genuinely name a loop alias are
-// touched.
+// member accesses, and object-literal keys (`{ alias: x }` keeps its key; the
+// shorthand `{ alias }` expands to `{ alias: $scope(this,'alias') }`), so only
+// identifiers that genuinely name a loop alias are touched. Bracket frames carry
+// a pending-ternary count per nesting level, which is what tells an object key's
+// `:` apart from a ternary's.
 export const rewriteHandlerAliases = (value, aliasSet) => {
   if (!aliasSet || aliasSet.size === 0 || typeof value !== 'string') return value;
 
@@ -62,6 +65,8 @@ export const rewriteHandlerAliases = (value, aliasSet) => {
   };
   let i = 0;
   const n = value.length;
+  const frames = [{ bracket: '', ternaries: 0 }];
+  const frame = () => frames[frames.length - 1];
 
   while (i < n) {
     const ch = value[i];
@@ -92,6 +97,37 @@ export const rewriteHandlerAliases = (value, aliasSet) => {
       continue;
     }
 
+    if (ch === '(' || ch === '[' || ch === '{') {
+      frames.push({ bracket: ch, ternaries: 0 });
+      push(ch);
+      i++;
+      continue;
+    }
+    if (ch === ')' || ch === ']' || ch === '}') {
+      if (frames.length > 1) frames.pop();
+      push(ch);
+      i++;
+      continue;
+    }
+    if (ch === '?') {
+      const next = value[i + 1];
+      if (next === '.' || next === '?') {
+        push(ch + next);
+        i += 2;
+        continue;
+      }
+      frame().ternaries++;
+      push(ch);
+      i++;
+      continue;
+    }
+    if (ch === ':') {
+      if (frame().ternaries > 0) frame().ternaries--;
+      push(ch);
+      i++;
+      continue;
+    }
+
     // Identifier — rewrite when it's a standalone alias reference.
     if (IDENT_START.test(ch)) {
       let j = i + 1;
@@ -99,7 +135,17 @@ export const rewriteHandlerAliases = (value, aliasSet) => {
       const ident = value.slice(i, j);
       const isMember = lastNonSpace(out) === '.';
       if (!isMember && aliasSet.has(ident)) {
-        push(`$scope(this,'${ident}')`);
+        let k = j;
+        while (k < n && /\s/.test(value[k])) k++;
+        const next = value[k] || '';
+        const prev = lastNonSpace(out);
+        const inObject = frame().bracket === '{';
+        const isKey = inObject && next === ':' && frame().ternaries === 0;
+        const isShorthand =
+          inObject && (prev === '{' || prev === ',') && (next === ',' || next === '}');
+        if (isKey) push(ident);
+        else if (isShorthand) push(`${ident}: $scope(this,'${ident}')`);
+        else push(`$scope(this,'${ident}')`);
       } else {
         push(ident);
       }

package/runtime/parse.js

@@ -7,6 +7,7 @@ import {
   DOM_ELEMENT_PROPERTIES,
   DEHYDRATE_CLASS_OR_ATTR,
   THIS_PROP_REGEX,
+  STATE_THIS_PROP_REGEX,
 } from './constants.js';
 import { rewriteHandlerAliases } from './loop-scope.js';
 
@@ -57,6 +58,13 @@ const captureAttributeBindings = (element, aliasSet) => {
       if (v.includes('this.')) {
         const componentId = findComponentIdForElement(element);
         if (componentId) {
+          // `$.this.X` (component-state write through the root) must be
+          // consumed as one reference BEFORE the bare `this.X` pass — that
+          // pass alone would leave the `$.` prefix behind and produce
+          // `$.$['id'].X`. Runtime-fetched components arrive with this form
+          // already rewritten by component.js; compiled pages inline the
+          // authored form, so parse meets it raw.
+          v = v.replace(STATE_THIS_PROP_REGEX, (_, prop) => `$['${componentId}'].${prop}`);
           v = v.replace(THIS_PROP_REGEX, (match, prop) =>
             DOM_ELEMENT_PROPERTIES.has(prop) ? match : `$['${componentId}'].${prop}`,
           );

package/runtime/pre-compiled-manifest.js

@@ -374,172 +374,73 @@ export const restoreMarkersFromManifest = (
       }
     }
 
-    // Handle conditional and iteration children - process them at THIS level before recursing
-    // These are comment nodes in the DOM, not elements, so we need to find them here
+    // Restore iterations/conditionals at THIS level by their childNodes index.
+    // The manifest key encodes the start comment's pre-stamp position
+    // (`conditional_13` = element.childNodes[13]); processing in ascending
+    // order keeps every index valid, because each restoration returns its
+    // region to the exact pre-stamp node count before the next index is
+    // consulted. Locating by index — not by expression text — is what
+    // disambiguates sibling directives that share the same expression.
     if (tree.children) {
-      for (const key in tree.children) {
+      const directives = Object.keys(tree.children)
+        .filter((key) => {
+          const type = tree.children[key].type;
+          return type === "iteration" || type === "conditional";
+        })
+        .map((key) => ({ key, index: Number(key.match(/_(\d+)$/)?.[1]) }))
+        .filter(({ index }) => Number.isInteger(index))
+        .sort((a, b) => a.index - b.index);
+
+      for (const { key, index } of directives) {
         const childTree = tree.children[key];
+        const restoration = childTree.compiled?.restoration;
 
-        // Handle iteration restoration
-        if (childTree.type === "iteration" && childTree.compiled?.restoration) {
-          const restoration = childTree.compiled.restoration;
-
-          // Find iteration comment by matching the expression
-          let startComment = null;
-          let endComment = null;
-          let depth = 0;
-
-          const walker = document.createTreeWalker(
-            element,
-            NodeFilter.SHOW_COMMENT,
-          );
-          while (walker.nextNode()) {
-            const comment = walker.currentNode;
-            const trimmed = comment.textContent.trim();
-
-            // Skip already processed iterations
-            if (comment._vibeProcessed) continue;
-
-            // Match by expression: "each items as item, i"
-            const expectedComment = `each ${restoration.expression}`;
-            if (trimmed === expectedComment && !startComment) {
-              startComment = comment;
-              depth = 1;
-            } else if (startComment) {
-              if (trimmed.startsWith("each ")) {
-                depth++;
-              } else if (trimmed === "/each") {
-                depth--;
-                if (depth === 0) {
-                  endComment = comment;
-                  break;
-                }
-              }
-            }
-          }
-
-          // Always delete the iteration node from tree - runtime will re-create it
-          // Do this even if comments weren't found (they might have been removed by parent restoration)
-          delete tree.children[key];
-
-          if (startComment && endComment) {
-            // Mark as processed
-            startComment._vibeProcessed = true;
-            endComment._vibeProcessed = true;
-
-            const parent = startComment.parentNode;
-            const insertionPoint = endComment.nextSibling;
+        // Always delete the directive node from the tree — the runtime
+        // re-creates it when it parses the restored DOM.
+        delete tree.children[key];
 
-            // Remove all pre-rendered content between comments
-            let current = startComment.nextSibling;
-            while (current && current !== endComment) {
-              const next = current.nextSibling;
-              if (current.nodeType !== Node.COMMENT_NODE) {
-                current.remove();
-              }
-              current = next;
-            }
-
-            // Insert the template (single item)
-            const tempContainer = document.createElement("div");
-            tempContainer.innerHTML = restoration.template;
-
-            const fragment = document.createDocumentFragment();
-            while (tempContainer.firstChild) {
-              fragment.appendChild(tempContainer.firstChild);
-            }
-            parent.insertBefore(fragment, endComment);
-          }
+        if (!restoration?.template) continue;
 
+        const startComment = element.childNodes[index];
+        if (!startComment || startComment.nodeType !== Node.COMMENT_NODE) {
           continue;
         }
 
-        if (
-          childTree.type === "conditional" &&
-          childTree.compiled?.restoration
-        ) {
-          const restoration = childTree.compiled.restoration;
-
-          // Find conditional comment markers in the current element
-          // But SKIP conditionals that are inside iteration blocks
-          const walker = document.createTreeWalker(
-            element,
-            NodeFilter.SHOW_COMMENT,
-          );
-          let startComment = null;
-          let endComment = null;
-          let insideIteration = false;
-          let conditionalDepth = 0;
-
-          while (walker.nextNode()) {
-            const comment = walker.currentNode;
-            const text = comment.textContent.trim();
-
-            // Track if we're inside an iteration block
-            if (text.startsWith("each ")) {
-              insideIteration = true;
-              continue;
-            } else if (text === "/each") {
-              insideIteration = false;
-              continue;
-            }
-
-            // Skip conditionals inside iterations - runtime will handle them
-            if (insideIteration) continue;
-
-            // Skip already processed conditionals
-            if (comment._vibeProcessed) continue;
-
-            if (text.startsWith("if")) {
-              if (!startComment) {
-                const expression = childTree.meta?.expression;
-                const expectedText = expression ? "if " + expression : null;
-                if (expectedText && text === expectedText) {
-                  startComment = comment;
-                  conditionalDepth = 1;
-                }
-              } else {
-                // Track nested conditionals
-                conditionalDepth++;
-              }
-            } else if (text === "/if" && startComment) {
-              conditionalDepth--;
-              if (conditionalDepth === 0) {
-                endComment = comment;
-                break;
-              }
+        // Find the matching end marker at this sibling level, depth-counted
+        // so nested same-kind directives inside the region don't end it early.
+        const isIteration = childTree.type === "iteration";
+        const openPrefix = isIteration ? "each " : "if ";
+        const closeMarker = isIteration ? "/each" : "/if";
+        let depth = 0;
+        let endComment = null;
+        for (let cur = startComment.nextSibling; cur; cur = cur.nextSibling) {
+          if (cur.nodeType !== Node.COMMENT_NODE) continue;
+          const text = cur.textContent.trim();
+          if (text.startsWith(openPrefix)) {
+            depth++;
+          } else if (text === closeMarker) {
+            if (depth === 0) {
+              endComment = cur;
+              break;
             }
+            depth--;
           }
-
-          // Always delete the conditional node from tree - runtime will re-create it
-          // Do this even if comments weren't found (they might have been removed by parent restoration)
-          delete tree.children[key];
-
-          if (startComment && endComment) {
-            // Mark as processed
-            startComment._vibeProcessed = true;
-            endComment._vibeProcessed = true;
-
-            // Remove ALL pre-rendered content between start and end comments
-            // This includes the <!-- else --> marker from compiled HTML
-            let current = startComment.nextSibling;
-            while (current && current !== endComment) {
-              const next = current.nextSibling;
-              current.remove(); // Remove ALL nodes, including comment nodes
-              current = next;
-            }
-
-            // Insert the template content BEFORE endComment
-            const tempContainer = document.createElement("div");
-            tempContainer.innerHTML = restoration.template;
-
-            const fragment = document.createDocumentFragment();
-            while (tempContainer.firstChild) {
-              fragment.appendChild(tempContainer.firstChild);
-            }
-            endComment.parentNode.insertBefore(fragment, endComment);
-          }
         }
+        if (!endComment) continue;
+
+        // Drop the stamped content (including the <!-- else --> marker and
+        // any stamped-row comments) and re-insert the pre-stamp template —
+        // node-for-node identical to what the manifest was built against.
+        let current = startComment.nextSibling;
+        while (current && current !== endComment) {
+          const next = current.nextSibling;
+          current.remove();
+          current = next;
+        }
+
+        const tpl = document.createElement("template");
+        tpl.innerHTML = restoration.template;
+        endComment.parentNode.insertBefore(tpl.content, endComment);
       }
     }
 

package/runtime/utils.js

@@ -46,13 +46,23 @@ export const setRootState = (proxy) => { rootProxy = proxy; };
 // delegate to the live root (their target is `$`), so they need no wrapper.
 const dollarCache = new WeakMap();
 const RESERVED_PROBE = 'unsafe'; // reserved method present on root-backed states, absent on plain snapshots
+// The fallback serves ONLY the root's non-enumerable helper methods. A state
+// key that is merely missing from this snapshot must read as undefined — the
+// old/new snapshot diff depends on it. Letting it leak through to the live
+// root would make both sides of the diff read the same current value (e.g. a
+// component state bucket registered mid-cycle), silently defeating change
+// detection.
+const rootHelper = (k) => {
+  const desc = Object.getOwnPropertyDescriptor(rootProxy, k);
+  return desc && !desc.enumerable;
+};
 const dollarFor = (state) => {
   if (!rootProxy || state === rootProxy || RESERVED_PROBE in state) return state;
   let wrapped = dollarCache.get(state);
   if (!wrapped) {
     wrapped = new Proxy(state, {
-      get: (t, k) => (k in t ? t[k] : rootProxy[k]),
-      has: (t, k) => k in t || k in rootProxy,
+      get: (t, k) => (k in t ? t[k] : rootHelper(k) ? rootProxy[k] : undefined),
+      has: (t, k) => k in t || rootHelper(k),
     });
     dollarCache.set(state, wrapped);
   }