@ape-egg/vibe 1.9.1 → 1.9.6

package/runtime/affected.js

@@ -1,46 +1,75 @@
-import { resolvePath, deepEqual } from './iteration-utils.js';
-import { extractDependencies } from './conditionals.js';
-import { BINDING_REGEX } from './constants.js';
-import { evalInScope, resolveThisPath } from './utils.js';
+import { resolvePath, deepEqual } from "./iteration-utils.js";
+import { extractDependencies } from "./conditionals.js";
+import { BINDING_REGEX } from "./constants.js";
+import { evalInScope, resolveThisPath } from "./utils.js";
 
 // Evaluate conditional expression
-const evaluateCondition = (expression, state, element = null) => !!evalInScope(expression, state, element);
+const evaluateCondition = (expression, state, element = null) =>
+  !!evalInScope(expression, state, element);
 
 // Helper function to check if a match references a specific key.
 // Fast path: exact match or property access (`user.name` matches `user`).
 // Slow path: word-boundary search for complex expressions like `Math.floor(coins / 100)`
 // where the key appears as an identifier anywhere in the expression.
-const isIdentChar = (c) => (c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z') || (c >= '0' && c <= '9') || c === '_' || c === '$';
+const isIdentChar = (c) =>
+  (c >= "a" && c <= "z") ||
+  (c >= "A" && c <= "Z") ||
+  (c >= "0" && c <= "9") ||
+  c === "_" ||
+  c === "$";
 
 const matchesKey = (matchStr, key) => {
-  if (matchStr === key || matchStr.startsWith(key + '.') || matchStr.startsWith(key + '[')) return true;
+  if (
+    matchStr === key ||
+    matchStr.startsWith(key + ".") ||
+    matchStr.startsWith(key + "[")
+  )
+    return true;
 
   // Search for key as a standalone identifier (word boundaries on both sides)
   let i = 0;
   while ((i = matchStr.indexOf(key, i)) !== -1) {
-    const before = i === 0 ? '' : matchStr[i - 1];
-    const after = i + key.length >= matchStr.length ? '' : matchStr[i + key.length];
+    const before = i === 0 ? "" : matchStr[i - 1];
+    const after =
+      i + key.length >= matchStr.length ? "" : matchStr[i + key.length];
     if (!isIdentChar(before) && !isIdentChar(after)) return true;
     i += key.length;
   }
   return false;
 };
 
-const recursive = (tree, state, newState, affected, scopedStateForHydration = null, depth = 0) => {
+const recursive = (
+  tree,
+  state,
+  newState,
+  affected,
+  scopedStateForHydration = null,
+  depth = 0,
+) => {
   // Handle iteration nodes specially
-  if (tree.type === 'iteration') {
-    const resolvedExpr = resolveThisPath(tree.meta.arrayPath, tree.meta.startComment?.parentElement);
-
-    const oldArray = evalInScope(resolvedExpr, state, tree.meta.startComment?.parentElement) ?? resolvePath(state, resolvedExpr);
-    const newArray = evalInScope(resolvedExpr, newState, tree.meta.startComment?.parentElement) ?? resolvePath(newState, resolvedExpr);
+  if (tree.type === "iteration") {
+    const resolvedExpr = resolveThisPath(
+      tree.meta.arrayPath,
+      tree.meta.startComment?.parentElement,
+    );
+
+    const oldArray =
+      evalInScope(resolvedExpr, state, tree.meta.startComment?.parentElement) ??
+      resolvePath(state, resolvedExpr);
+    const newArray =
+      evalInScope(
+        resolvedExpr,
+        newState,
+        tree.meta.startComment?.parentElement,
+      ) ?? resolvePath(newState, resolvedExpr);
 
     // Fast path: reference comparison (arrays are typically replaced, not mutated)
     // This avoids expensive O(n) deepEqual for large arrays
     if (oldArray !== newArray) {
       affected.push({
-        type: 'iteration',
+        type: "iteration",
         node: tree,
-        changeType: 'array',
+        changeType: "array",
       });
       return affected;
     }
@@ -51,16 +80,26 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
       // Compiled iterations have instances without tree/scopedState — the batch function
       // may reference global state keys (e.g., `selectedCategory` in a button binding).
       // If any state key changed, trigger a rebuild so the batch function re-evaluates.
-      const hasCompiledInstances = tree.compiled && tree.runtime.instances.length > 0
-        && !tree.runtime.instances[0].tree;
-
-      if (hasCompiledInstances) {
+      // Instances rendered without a per-row parsed tree — compiled (batch
+      // fn from the manifest) or runtime batch (fast path for simple
+      // templates) — can't be walked by the recursive descent below to
+      // detect nested outer-state bindings. Mark the whole iteration as
+      // affected so updateIteration runs and rebuilds the rows.
+      const hasTreelessInstances =
+        tree.runtime.instances.length > 0 &&
+        !tree.runtime.instances[0].tree;
+
+      if (hasTreelessInstances) {
         const isInitialHydration = state === newState;
         if (!isInitialHydration) {
           const stateKeys = Object.keys(state);
-          const hasChangedKey = stateKeys.some(k => state[k] !== newState[k]);
+          const hasChangedKey = stateKeys.some((k) => state[k] !== newState[k]);
           if (hasChangedKey) {
-            affected.push({ type: 'iteration', node: tree, changeType: 'array' });
+            affected.push({
+              type: "iteration",
+              node: tree,
+              changeType: "array",
+            });
             return affected;
           }
         }
@@ -68,15 +107,28 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
 
       for (const instance of tree.runtime.instances) {
         if (instance.tree && instance.scopedState) {
-          // Build plain-object snapshots for comparison. scopedState is a live Proxy
-          // that reflects current global state — spreading it gives us the local vars
-          // (cat, index) plus current global values. We then override globals with the
-          // actual old (state) / new (newState) values so binding comparisons can detect
-          // which state keys changed.
+          // Build plain-object snapshots for comparison. Spreading
+          // instance.scopedState yields its local vars (item, index) plus
+          // whatever globals were captured at scope-creation time; the
+          // overlaying spread of state/newState then writes the *current*
+          // values from this update cycle. Both merged states are plain
+          // objects with up-to-date values.
           const mergedOldState = { ...instance.scopedState, ...state };
           const mergedNewState = { ...instance.scopedState, ...newState };
-          // Pass scopedState as scopedStateForHydration so evalInScope can access iteration variables
-          recursive(instance.tree, mergedOldState, mergedNewState, affected, instance.scopedState, depth + 1);
+          // scopedStateForHydration must reflect the new state so hydrate's
+          // bindings inside the row see post-update values. instance.scopedState
+          // is frozen against whatever target renderIteration was called with
+          // (often the plain initialState snapshot from index.js), so reading
+          // outer-state keys through it returns stale values after later
+          // mutations. mergedNewState carries the live globals + localVars.
+          recursive(
+            instance.tree,
+            mergedOldState,
+            mergedNewState,
+            affected,
+            mergedNewState,
+            depth + 1,
+          );
         }
       }
     }
@@ -85,23 +137,38 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
   }
 
   // Handle conditional nodes specially
-  if (tree.type === 'conditional') {
-    const oldValue = evaluateCondition(tree.meta.expression, state, tree.meta.startComment?.parentElement);
-    const newValue = evaluateCondition(tree.meta.expression, newState, tree.meta.startComment?.parentElement);
+  if (tree.type === "conditional") {
+    const oldValue = evaluateCondition(
+      tree.meta.expression,
+      state,
+      tree.meta.startComment?.parentElement,
+    );
+    const newValue = evaluateCondition(
+      tree.meta.expression,
+      newState,
+      tree.meta.startComment?.parentElement,
+    );
 
     // Check if condition result changed
     if (oldValue !== newValue) {
       affected.push({
-        type: 'conditional',
+        type: "conditional",
         node: tree,
-        changeType: 'expression',
+        changeType: "expression",
       });
       return affected;
     }
 
     // Condition didn't change, check for affected elements inside active branch
     if (tree.runtime.activeInstance && tree.runtime.activeInstance.parsedTree) {
-      return recursive(tree.runtime.activeInstance.parsedTree, state, newState, affected, scopedStateForHydration, depth + 1);
+      return recursive(
+        tree.runtime.activeInstance.parsedTree,
+        state,
+        newState,
+        affected,
+        scopedStateForHydration,
+        depth + 1,
+      );
     }
 
     return affected;
@@ -128,21 +195,29 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
       // Resolve this.property to componentId.property
       const resolvedInner = resolveThisPath(m.inner, tree.element);
 
-      const noMatch = !shallowState.some((key) => matchesKey(resolvedInner, key));
+      const noMatch = !shallowState.some((key) =>
+        matchesKey(resolvedInner, key),
+      );
 
       let shouldAffect = false;
       let relevantKeys = [];
 
       if (isInitialHydration) {
         // Initial hydration: affect all matched keys
-        relevantKeys = shallowNewState.filter((key) => matchesKey(resolvedInner, key));
+        relevantKeys = shallowNewState.filter((key) =>
+          matchesKey(resolvedInner, key),
+        );
         shouldAffect = noMatch || relevantKeys.length > 0;
       } else {
         // Update: only affect if value changed
-        const changedKeys = shallowNewState.filter((key) =>
-          matchesKey(resolvedInner, key) && state[key] !== newState[key]
+        const changedKeys = shallowNewState.filter(
+          (key) =>
+            matchesKey(resolvedInner, key) && state[key] !== newState[key],
         );
-        relevantKeys = changedKeys.length > 0 ? changedKeys : shallowState.filter((key) => matchesKey(resolvedInner, key));
+        relevantKeys =
+          changedKeys.length > 0
+            ? changedKeys
+            : shallowState.filter((key) => matchesKey(resolvedInner, key));
         shouldAffect = noMatch || changedKeys.length > 0;
       }
 
@@ -189,25 +264,30 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
         // Resolve this.property to componentId.property
         const resolvedInner = resolveThisPath(m.inner, tree.element);
 
-        const noMatch = !shallowState.some((key) => matchesKey(resolvedInner, key));
+        const noMatch = !shallowState.some((key) =>
+          matchesKey(resolvedInner, key),
+        );
 
         let shouldAffect = false;
 
         if (isInitialHydration) {
           // Initial hydration: affect all matched keys
-          const newMatches = shallowNewState.filter((key) => matchesKey(resolvedInner, key));
+          const newMatches = shallowNewState.filter((key) =>
+            matchesKey(resolvedInner, key),
+          );
           shouldAffect = noMatch || newMatches.length > 0;
         } else {
           // Update: only affect if value changed
-          const changedKeys = shallowNewState.filter((key) =>
-            matchesKey(resolvedInner, key) && state[key] !== newState[key]
+          const changedKeys = shallowNewState.filter(
+            (key) =>
+              matchesKey(resolvedInner, key) && state[key] !== newState[key],
           );
           shouldAffect = noMatch || changedKeys.length > 0;
         }
 
         if (shouldAffect) {
           affected.push({
-            type: 'attribute',
+            type: "attribute",
             attrName,
             attrValue,
             matchOuter: m.outer,
@@ -239,7 +319,9 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
         const resolvedInner = resolveThisPath(m.inner, tree.element);
         // HTML lowercases attribute names, so expression may be lowercase while state
         // keys are camelCase. Match case-insensitively by trying both direct and lowercased.
-        const matchKey = (key) => matchesKey(resolvedInner, key) || matchesKey(resolvedInner, key.toLowerCase());
+        const matchKey = (key) =>
+          matchesKey(resolvedInner, key) ||
+          matchesKey(resolvedInner, key.toLowerCase());
 
         const noMatch = !shallowState.some(matchKey);
 
@@ -249,15 +331,15 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
           const newMatches = shallowNewState.filter(matchKey);
           shouldAffect = noMatch || newMatches.length > 0;
         } else {
-          const changedKeys = shallowNewState.filter((key) =>
-            matchKey(key) && state[key] !== newState[key]
+          const changedKeys = shallowNewState.filter(
+            (key) => matchKey(key) && state[key] !== newState[key],
           );
           shouldAffect = noMatch || changedKeys.length > 0;
         }
 
         if (shouldAffect) {
           affected.push({
-            type: 'nameBinding',
+            type: "nameBinding",
             nameBinding,
             matchOuter: m.outer,
             matchInner: m.inner, // Keep original, evalInScope will resolve this.
@@ -274,8 +356,15 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
   if (children) {
     for (const key in children) {
       const child = children[key];
-      if (child && typeof child === 'object') {
-        recursive(child, state, newState, affected, scopedStateForHydration, depth + 1);
+      if (child && typeof child === "object") {
+        recursive(
+          child,
+          state,
+          newState,
+          affected,
+          scopedStateForHydration,
+          depth + 1,
+        );
       }
     }
   }

package/runtime/component.js

@@ -41,9 +41,49 @@ export const releaseOrphanedComponentState = (collectedIds) => {
     delete window.__vibeComponents?.[id];
     // CLEANUP OF CURRENT STATE
     delete window.$[id];
+    runComponentCleanups(id);
   }
 };
 
+// Listener registry: maps componentId → array of unsubscribe callbacks
+// returned from `$.on(...)` calls inside the component's `<script>`.
+// Re-running a script for the same id (HMR remount with reused ids) or
+// unmounting the component fires the callbacks so the previous evaluation's
+// listeners don't accumulate alongside fresh registrations.
+export const runComponentCleanups = (componentId) => {
+  const cleanups = window.__vibeComponentCleanups?.[componentId];
+  if (!cleanups) return;
+  for (let i = 0; i < cleanups.length; i++) cleanups[i]();
+  delete window.__vibeComponentCleanups[componentId];
+};
+
+// Per-script `$` Proxy. Bare `$` references in a component's <script> resolve
+// to this Proxy (the function parameter shadows the global), so every
+// `$.on(...)` registration is automatically attributed to `componentId` via
+// the closure — no global flag, async-safe across `await` boundaries because
+// the closure binds the id, not a shared variable.
+const createScopedDollar = (componentId) => {
+  const dollar = window.$;
+  if (!dollar) return dollar;
+  return new Proxy(dollar, {
+    get(target, prop, receiver) {
+      if (prop === 'on') {
+        return (event, callback) => {
+          const unsub = target.on(event, callback);
+          if (!window.__vibeComponentCleanups) window.__vibeComponentCleanups = {};
+          const slot = window.__vibeComponentCleanups[componentId] || (window.__vibeComponentCleanups[componentId] = []);
+          slot.push(unsub);
+          return unsub;
+        };
+      }
+      return Reflect.get(target, prop, receiver);
+    },
+    set(target, prop, value, receiver) {
+      return Reflect.set(target, prop, value, receiver);
+    },
+  });
+};
+
 // Walk a node subtree (element or node list) and collect all
 // `data-vibe-component-id` values found on the node and its descendants.
 export const collectComponentIds = (node, into = new Set()) => {
@@ -145,12 +185,18 @@ const renderPropsAndSlot = (temp, props, slotHtml) => {
   const DIRECTIVE_COMMENT_REGEX = /<!--\s*(if|else if|each)\s+([^]*?)\s*-->/g;
   const EVENT_ATTR_REGEX = /\bon(\w+)="([^"]*)"/g;
 
+  // HTML's parser lowercases attribute names, so a consumer-written
+  // `<component dndDisabled>` arrives here with propName `dnddisabled` while
+  // the component template author wrote `dndDisabled`. Match identifiers and
+  // bindings case-insensitively so both sides line up. Word-boundary
+  // lookbehind/lookahead still hold (they're case-agnostic), so
+  // `dnddisabled` won't bleed into `dndDisabledAlt`.
   Object.entries(props).forEach(([propName, propValue]) => {
     const bindingMatch = propValue.match(/^@\[(.+)\]$/);
-    const exactPattern = new RegExp(`@\\[${escapeRegex(propName)}\\]`, 'g');
+    const exactPattern = new RegExp(`@\\[${escapeRegex(propName)}\\]`, 'gi');
     const idRegex = new RegExp(
       `(?<![a-zA-Z0-9_$\\.])${escapeRegex(propName)}(?![a-zA-Z0-9_$])`,
-      'g'
+      'gi'
     );
 
     const substituteInExpr = (expr, replacement) => expr.replace(idRegex, replacement);
@@ -170,7 +216,7 @@ const renderPropsAndSlot = (temp, props, slotHtml) => {
           return rewritten === expr ? match : `<!-- ${kw} ${rewritten} -->`;
         }
       );
-      const stateRegex = new RegExp(`\\$\\.${escapeRegex(propName)}(?![a-zA-Z0-9_$])`, 'g');
+      const stateRegex = new RegExp(`\\$\\.${escapeRegex(propName)}(?![a-zA-Z0-9_$])`, 'gi');
       transformedHtml = transformedHtml.replace(EVENT_ATTR_REGEX, (match, evName, body) => {
         const rewritten = body.replace(stateRegex, `$.${path}`);
         return rewritten === body ? match : `on${evName}="${rewritten}"`;
@@ -196,7 +242,7 @@ const renderPropsAndSlot = (temp, props, slotHtml) => {
           return rewritten === expr ? match : `<!-- ${kw} ${rewritten} -->`;
         }
       );
-      const stateRegex = new RegExp(`\\$\\.${escapeRegex(propName)}(?![a-zA-Z0-9_$])`, 'g');
+      const stateRegex = new RegExp(`\\$\\.${escapeRegex(propName)}(?![a-zA-Z0-9_$])`, 'gi');
       transformedHtml = transformedHtml.replace(EVENT_ATTR_REGEX, (match, evName, body) => {
         const rewritten = body.replace(stateRegex, `$.${literal}`);
         return rewritten === body ? match : `on${evName}="${rewritten}"`;
@@ -281,6 +327,21 @@ const processSingle = (el, debug) => {
       // Process each script — collect async tasks if any have imports
       const asyncTasks = [];
 
+      // Track every componentId registered during this fetch. If the host
+      // element is detached before finalize runs (e.g. a conditional unmounted
+      // mid-fetch, or the user navigated away), we release these state
+      // buckets — otherwise component({...}) leaks state to `$` for DOM that
+      // never reaches the document.
+      const registeredComponentIds = [];
+
+      // First componentId encountered — applied to the wrapper itself so
+      // directives living between top-level sibling roots (e.g. a comment
+      // marker for `<!-- if this.X -->`) can resolve component scope via
+      // closest('[data-vibe-component-id]'). Without this, multi-root
+      // templates have scope-less wrappers and top-level `this.` references
+      // fall through to global state.
+      let firstComponentId = null;
+
       for (const script of moduleScripts) {
         let scriptContent = script.textContent?.trim() || '';
         if (!scriptContent) continue;
@@ -297,7 +358,11 @@ const processSingle = (el, debug) => {
 
         if (hasImports) {
           // Rewrite remaining imports to dynamic await import()
-          // Order matters: default → named → namespace → side-effect (most specific first)
+          // Order matters: combined → default → named → namespace → side-effect (most specific first)
+          scriptContent = scriptContent.replace(
+            /import\s+(\w+)\s*,\s*\{([^}]+)\}\s+from\s+(['"][^'"]+['"])\s*;?/g,
+            'const __m_$1 = await import($3); const $1 = __m_$1.default; const {$2} = __m_$1;'
+          );
           scriptContent = scriptContent.replace(
             /import\s+(\w+)\s+from\s+(['"][^'"]+['"])\s*;?/g,
             'const $1 = (await import($2)).default;'
@@ -320,6 +385,8 @@ const processSingle = (el, debug) => {
         const reuseIds = el._vibeReuseComponentIds;
         const componentId = reuseIds && reuseIds.length ? reuseIds.shift() : generateComponentId();
 
+        if (firstComponentId === null) firstComponentId = componentId;
+
         // Provide a component() function that registers state for this component.
         // Sibling tagging is handled below (before script.remove()) so it works
         // for both sync and async scripts.
@@ -327,18 +394,40 @@ const processSingle = (el, debug) => {
           if (!window.__vibeComponents) window.__vibeComponents = {};
           window.__vibeComponents[componentId] = state;
           if (window.$) window.$[componentId] = state;
+          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
+        // tear down listeners from the previous evaluation before the fresh
+        // script registers new ones. Without this, every cycle stacks another
+        // listener on top of the stale closures and a single reactive tick
+        // fires N callbacks instead of one.
+        runComponentCleanups(componentId);
+
+        // Provide a per-script `$` whose `.on(...)` registers cleanups under
+        // this componentId. Bare `$` in the script body resolves to this
+        // Proxy (the function parameter shadows the global), so listener
+        // registrations are auto-tracked across `await` boundaries via the
+        // closure — no opt-in required.
+        const scopedDollar = createScopedDollar(componentId);
+
         // Execute script with component() function in scope
         try {
           if (hasImports) {
             // Async execution for scripts with imports
             const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor;
-            asyncTasks.push(new AsyncFunction('component', scriptContent)(componentFn));
+            asyncTasks.push(new AsyncFunction('$', 'component', scriptContent)(scopedDollar, componentFn));
           } else {
             // Synchronous execution for scripts without imports (preserves boot timing)
-            const executeFn = new Function('component', scriptContent);
-            executeFn(componentFn);
+            const executeFn = new Function('$', 'component', scriptContent);
+            executeFn(scopedDollar, componentFn);
           }
         } catch (e) {
           console.warn('[vibe] Failed to execute component script:', e);
@@ -374,6 +463,9 @@ const processSingle = (el, debug) => {
           }
 
           newWrapper.innerHTML = transformedHtml;
+          if (firstComponentId !== null) {
+            newWrapper.setAttribute('data-vibe-component-id', firstComponentId);
+          }
           // Stash the raw source so the HMR plugin can establish a baseline
           // script hash on the very first update — without this, the first
           // save after page load would always fall back to re-mount (since
@@ -392,12 +484,37 @@ const processSingle = (el, debug) => {
             el._vibeIterPropIds = null;
             el.removeAttribute('data-vibe-iter-prop');
           }
+          // Transfer the original prop expressions too, so the iteration's
+          // update path can re-evaluate them against the row's new scope and
+          // refresh the registry slots in place — letting the inlined
+          // component's bindings react without rebuilding the row's DOM.
+          if (el._vibeIterPropExprs) {
+            newWrapper._vibeIterPropExprs = el._vibeIterPropExprs;
+            el._vibeIterPropExprs = null;
+          }
+          // Back-pointer from the soon-to-be-detached `<component src>` to
+          // the new wrapper. The iteration's `instance.clonedNodes` still
+          // references the original element; follow this link to reach the
+          // live wrapper when refreshing registry slots / re-hydrating.
+          // The wrapper's `_vibeIterTree` (set later by processMutations after
+          // renderAllConditionals/Iterations populated runtime data) is what
+          // iterate.js's update path uses to re-evaluate inlined bindings on
+          // each row update.
+          el._vibeReplacedBy = newWrapper;
           el.replaceWith(newWrapper);
           debugLog(PHASE_FETCH, src, debug);
 
           // MutationObserver handles parsing and hydrating the new content.
           // Branch nodes are registered in the manifest by mountBranch,
           // so the observer can find parents even inside conditional branches.
+        } else {
+          // Element was detached before finalize ran (conditional unmounted
+          // during fetch, parent removed, etc). Release any state component()
+          // calls registered — otherwise it leaks on `$` forever.
+          for (const id of registeredComponentIds) {
+            delete window.__vibeComponents?.[id];
+            if (window.$) delete window.$[id];
+          }
         }
       };
 

package/runtime/conditionals.js

@@ -1,7 +1,7 @@
 import parse from './parse.js';
 import affected from './affected.js';
 import hydrate from './hydrate.js';
-import { createScopedState, renderAllIterations, initializeBlock } from './iterate.js';
+import { createScopedState, renderAllIterations, initializeBlock, resolveIterationComponentProps } from './iterate.js';
 import { evalInScope } from './utils.js';
 import { collectComponentIds, releaseOrphanedComponentState } from './component.js';
 
@@ -98,6 +98,16 @@ export const renderAllConditionals = (tree, state, manifest, parentScope = {}) =
 export const renderConditional = (node, state, manifest, parentScope = {}) => {
   const { expression, startComment, endComment, branches } = node.meta;
 
+  // Mark conditionals that live inside an iteration row so update-time branch
+  // flips can route `<component src>` props through the iteration-prop
+  // registry. Skipping this for top-level conditionals keeps their props as
+  // live `@[stateKey]` bindings — which is what global state-change reactivity
+  // depends on (the registry path snapshots a value and doesn't react to
+  // global state changes on its own).
+  if (Object.keys(parentScope).length > 0) {
+    node.runtime.inIteration = true;
+  }
+
   // Check if already rendered (using marker on comment node)
   // @ts-ignore - adding custom property to comment node
   if (startComment.__vibeRendered) {
@@ -158,12 +168,29 @@ const mountBranch = (node, branchData, state, manifest, parentScope) => {
   const scopedState =
     Object.keys(parentScope).length > 0 ? createScopedState(state, parentScope) : state;
 
-  // Initialize block (clone, parse, hydrate)
+  // Initialize block (clone, parse, hydrate). Pass the enclosing loop aliases so
+  // the re-parse rewrites loop-scoped handlers in this branch — including ones
+  // nested deeper in further conditionals, which the parser reaches by carrying
+  // the alias set down. `scopeAliases` is set at parse time and persists, so this
+  // works on both the initial-render and update (hydrate) mount paths.
+  const aliasSet = node.meta.scopeAliases?.length ? new Set(node.meta.scopeAliases) : undefined;
   const {
     element: firstElement,
     tree: branchTree,
     clonedNodes,
-  } = initializeBlock(templateContent, scopedState);
+  } = initializeBlock(templateContent, scopedState, null, null, aliasSet);
+
+  // For conditionals living inside an iteration, route any `<component src>`
+  // props through the iteration-prop registry against the active scopedState
+  // (which carries the iteration's local vars). Without this, processSingle
+  // would inline `@[item.x]` bindings into the component template, where
+  // `item` isn't reachable in global scope and props resolve to undefined.
+  // Skipped for top-level conditionals because their props reference live
+  // global-state bindings — going through the registry would snapshot the
+  // value and break reactivity.
+  if (node.runtime.inIteration) {
+    resolveIterationComponentProps(clonedNodes, scopedState);
+  }
 
   // Insert cloned nodes into DOM and register in branch registry
   clonedNodes.forEach((clonedNode, i) => {
@@ -172,6 +199,21 @@ const mountBranch = (node, branchData, state, manifest, parentScope) => {
     if (clonedNode.nodeType === 1) managedNodes.add(clonedNode);
   });
 
+  // Branch content is mounted outside the enclosing iteration instance's
+  // clonedNodes, so it doesn't inherit the instance's `__vibeScope` stamp by DOM
+  // ancestry. When this conditional lives inside a loop, stamp `scopedState` —
+  // the same scope that hydrates the branch's `@[alias.x]` bindings — onto the
+  // branch's root elements so loop-scoped `$scope(this,'alias')` handlers resolve.
+  // Gate on `scopeAliases` (set at parse time, persists) rather than the runtime
+  // parentScope/inIteration, because the update path (hydrate -> updateConditional)
+  // and deeper-nested conditionals mount with an empty parentScope yet still flow
+  // the iteration's scoped state in as `state`.
+  if (node.meta.scopeAliases?.length) {
+    for (let i = 0; i < clonedNodes.length; i++) {
+      if (clonedNodes[i].nodeType === 1) clonedNodes[i].__vibeScope = scopedState;
+    }
+  }
+
   // Integrate branch tree into the conditional node's children and manifest.
   // This makes branch content visible to the main update loop (hydrate,
   // renderAllConditionals, renderAllIterations) and to MutationObserver

package/runtime/constants.js

@@ -210,11 +210,18 @@ export const BINDING_REGEX = new RegExp(String.raw`\@\[(${BINDING_INNER})\]`, 'g
 // Regex for detecting a pure binding (entire value is just @[expression])
 export const PURE_BINDING_REGEX = new RegExp(String.raw`^\@\[(${BINDING_INNER})\]$`);
 
-// Regex for parsing iteration comment syntax (<!-- each expression as item, index -->)
-// The array expression can be any JS: a state path (items), a window global
-// (window.fights), a method call (items.filter(x => x.active)), or an inline
-// array literal (['a', 'b']). Parsed via evalInScope at render time.
-export const ITERATION_REGEX = /^each\s+(.+)\s+as\s+(\w+)(?:\s*,\s*(\w+))?\s*$/;
+// Regex for parsing iteration comment syntax. Supported forms:
+//   <!-- each items as item -->
+//   <!-- each items as item, index -->
+//   <!-- each items as item (item.id) -->                // explicit key
+//   <!-- each items as item (item.id), index -->         // key + index
+// Capture groups: arrayPath, itemAlias, keyExpr (optional), indexAlias (optional).
+// The array expression can be any JS: a state path, a window global, a method
+// call, or an inline literal. The optional key expression is evaluated per
+// item against scoped state to produce a stable identity for diffing — this
+// keeps survivors stable when earlier items are removed (otherwise the
+// fallback hash key embeds the index and triggers bulk re-render).
+export const ITERATION_REGEX = /^each\s+(.+)\s+as\s+(\w+)(?:\s*\(\s*([^)]+?)\s*\))?(?:\s*,\s*(\w+))?\s*$/;
 
 // Regex for detecting start of iteration comment
 export const ITERATION_START_REGEX = /^each\s+/;