@ape-egg/vibe 1.9.8 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [2.0.0] - 2026-06-06
+
+Version rolled to 2.0.0. **Still Beta — no behavior changes since 1.9.9.** The major bump consolidates the 1.9.x line (runtime reactive core, components, optional compiler, `$.unsafe` raw-HTML, plus the recent reactivity-correctness, iteration teardown-leak, and scoped-state performance fixes); it does not signal a stability promotion or any breaking change.
+
+---
+
+## [1.9.9] - 2026-06-06
+
+### Fixed
+
+- **Iteration teardown leaked removed rows** (`runtime/iterate.js`, `runtime/affected.js`, `runtime/index.js`) — when an iteration's array emptied or rows were removed, Vibe deleted the DOM but kept internal references to the detached subtrees: the per-row parsed trees, inlined per-row component trees, and the flat manifest entries (`dotPath -> element`). Those structures pinned the removed nodes in memory and made every later reconcile/affected walk traverse dead nodes — in Battle Brawlers, combat fps decayed on each Reset→Start cycle. The page MutationObserver is disconnected while Vibe renders, so removal happens unobserved and the normal observer-driven cleanup never fires; teardown must prune itself. `index.js` now pairs the flat manifest with its parsed tree via a non-enumerable `manifest.__tree` (mirroring `manifest.__live`), and `iterate.js`'s new `releaseRemovedSubtrees` prunes both views together on row removal — deleting each removed root's manifest paths (path-scoped) and tree node (whose subtree cascade covers nested iterations/conditionals/components). Proven with a WeakRef + forced-GC e2e test: after emptying the iteration, zero removed elements remain reachable.
+  - Test: `tests/e2e/iteration-teardown-leak.spec.js` (no retained DOM after GC; repeated fill/empty cycles don't accumulate)
+
+### Performance
+
+- **Scoped-state key/overlay lookups avoided proxy traps on the combat hot path** (`runtime/utils.js`, `runtime/iterate.js`, `runtime/affected.js`) — `createScopedState` now records each scoped-state proxy's precomputed key list and its small local overlay (loop aliases `item`/`index` + parent aliases) in WeakMaps via `rememberScopedKeys`. `evalInScope` reads the keys through `ownKeysOf` instead of `Object.keys(proxy)` (which fired the proxy's `getOwnPropertyDescriptor` trap for every key, every eval), and `affected`'s iteration descent rebuilds its per-instance merged snapshot via a cheap `{...currentGlobals, ...overlay}` plain merge (`scopedOverlayOf`) instead of spreading the proxy over every global key.
+
+---
+
 ## [1.9.8] - 2026-06-01
 
 ### Added

package/README.md

@@ -1,6 +1,6 @@
 # Vibe
 
-**Version 1.9.8 (Beta)** — A runtime-first reactive framework with optional compilation.
+**Version 2.0.0 (Beta)** — A runtime-first reactive framework with optional compilation.
 
 No virtual DOM. No build step required. Just modern JavaScript. When you need production optimizations, add the optional Rust-based compiler.
 

package/package.json

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

package/runtime/affected.js

@@ -1,7 +1,74 @@
 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 { evalInScope, resolveThisPath, ownKeysOf, scopedOverlayOf } from "./utils.js";
+
+// The @[...] bindings in a tree node are static: the parsed template string and
+// the element's component scope don't change between renders. Re-running the
+// regex + resolveThisPath on every affected-walk was a large per-frame cost in
+// hot iterations (combat at 60fps re-extracts every binding of every row). Cache
+// the extracted + scope-resolved bindings on the node, keyed by the parsed source
+// and element so a re-parse or element swap recomputes.
+const textBindingsOf = (tree) => {
+  if (tree._tbSrc === tree.parsed && tree._tbEl === tree.element) return tree._tb;
+  const out = [];
+  BINDING_REGEX.lastIndex = 0;
+  let m;
+  while ((m = BINDING_REGEX.exec(tree.parsed))) {
+    const resolvedInner = resolveThisPath(m[1], tree.element);
+    out.push({
+      outer: m[0],
+      inner: m[1],
+      input: tree.parsed,
+      resolvedInner,
+      tokens: tokensOf(resolvedInner),
+    });
+  }
+  tree._tb = out;
+  tree._tbSrc = tree.parsed;
+  tree._tbEl = tree.element;
+  return out;
+};
+
+const attrBindingsOf = (tree) => {
+  if (tree._abSrc === tree.attributes && tree._abEl === tree.element) return tree._ab;
+  const out = [];
+  for (const attrName in tree.attributes) {
+    const attrValue = tree.attributes[attrName];
+    BINDING_REGEX.lastIndex = 0;
+    const ms = [];
+    let m;
+    while ((m = BINDING_REGEX.exec(attrValue))) {
+      const resolvedInner = resolveThisPath(m[1], tree.element);
+      ms.push({ outer: m[0], inner: m[1], resolvedInner, tokens: tokensOf(resolvedInner) });
+    }
+    if (ms.length) out.push({ attrName, matches: ms });
+  }
+  tree._ab = out;
+  tree._abSrc = tree.attributes;
+  tree._abEl = tree.element;
+  return out;
+};
+
+// Name bindings (`<icon @[fx.icon]>`) live as raw strings on tree.nameBindings.
+// Extract + this-resolve + tokenize them once, same cache discipline as the
+// text/attr binding caches above.
+const nameBindingsOf = (tree) => {
+  if (tree._nbSrc === tree.nameBindings && tree._nbEl === tree.element) return tree._nb;
+  const out = [];
+  for (const nameBinding of tree.nameBindings) {
+    BINDING_REGEX.lastIndex = 0;
+    let m;
+    while ((m = BINDING_REGEX.exec(nameBinding))) {
+      const resolvedInner = resolveThisPath(m[1], tree.element);
+      out.push({ nameBinding, outer: m[0], inner: m[1], resolvedInner, tokens: tokensOf(resolvedInner) });
+    }
+  }
+  tree._nb = out;
+  tree._nbSrc = tree.nameBindings;
+  tree._nbEl = tree.element;
+  return out;
+};
 
 // Evaluate conditional expression
 const evaluateCondition = (expression, state, element = null) =>
@@ -18,24 +85,87 @@ const isIdentChar = (c) =>
   c === "_" ||
   c === "$";
 
-const matchesKey = (matchStr, key) => {
-  if (
-    matchStr === key ||
-    matchStr.startsWith(key + ".") ||
-    matchStr.startsWith(key + "[")
-  )
-    return true;
-
-  // Search for key as a standalone identifier (word boundaries on both sides)
+// Split an expression into its identifier tokens — every maximal run of
+// identifier characters. This is exactly the set of standalone identifiers the
+// old per-key `matchesKey` scan could match, so intersecting these tokens with
+// the state-key set is equivalent to "which state keys does this binding read"
+// for identifier-named keys, but costs O(expr length) once (cached) instead of
+// O(stateKeys) on every frame. Deduped so the per-frame change check stays tight.
+const tokensOf = (expr) => {
+  const seen = new Set();
   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];
-    if (!isIdentChar(before) && !isIdentChar(after)) return true;
-    i += key.length;
+  const n = expr.length;
+  while (i < n) {
+    if (isIdentChar(expr[i])) {
+      let j = i + 1;
+      while (j < n && isIdentChar(expr[j])) j++;
+      seen.add(expr.slice(i, j));
+      i = j;
+    } else i++;
   }
-  return false;
+  return [...seen];
+};
+
+// Memoize the own-key set of a state snapshot so binding checks do O(1)
+// membership tests instead of scanning the key array. Keyed by the snapshot
+// object itself — scoped-state proxies and merged plain objects are reused
+// across every node of a single affected() descent, so the Set is built once
+// per snapshot, not once per binding.
+const keySetCache = new WeakMap();
+const keySetOf = (snapshot) => {
+  let set = keySetCache.get(snapshot);
+  if (!set) {
+    set = new Set(ownKeysOf(snapshot));
+    keySetCache.set(snapshot, set);
+  }
+  return set;
+};
+
+// A binding is affected on update when it reads a state key whose value changed,
+// OR when it reads no known state key at all (can't prove it's unaffected, so
+// re-evaluate — hydrate self-guards the DOM write). False can only be returned
+// when every key the binding reads is present AND unchanged.
+const bindingAffected = (tokens, keySet, state, newState) => {
+  let matched = false;
+  for (let i = 0; i < tokens.length; i++) {
+    const t = tokens[i];
+    if (keySet.has(t)) {
+      matched = true;
+      if (state[t] !== newState[t]) return true;
+    }
+  }
+  return !matched;
+};
+
+// Name bindings (`<icon @[fx.convertIcon]>`) arrive lowercased from HTML while
+// state keys stay camelCase, so they match keys case-insensitively. This map
+// resolves a (possibly lowercased) token back to its real key. Memoized per
+// snapshot like keySetOf.
+const nameKeyMapCache = new WeakMap();
+const nameKeyMapOf = (snapshot) => {
+  let map = nameKeyMapCache.get(snapshot);
+  if (!map) {
+    map = new Map();
+    for (const key of ownKeysOf(snapshot)) {
+      map.set(key, key);
+      const lower = key.toLowerCase();
+      if (!map.has(lower)) map.set(lower, key);
+    }
+    nameKeyMapCache.set(snapshot, map);
+  }
+  return map;
+};
+
+const nameBindingAffected = (tokens, keyMap, state, newState) => {
+  let matched = false;
+  for (let i = 0; i < tokens.length; i++) {
+    const realKey = keyMap.get(tokens[i]);
+    if (realKey !== undefined) {
+      matched = true;
+      if (state[realKey] !== newState[realKey]) return true;
+    }
+  }
+  return !matched;
 };
 
 // Identifier-followed-by-`(` — i.e. an attempted function or method call.
@@ -170,8 +300,18 @@ const recursive = (
           // 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 };
+          // The merged snapshot only needs this row's aliases overlaid on the
+          // current globals (`state`/`newState` already carry every global key).
+          // Recover the small overlay recorded at scope creation and plain-merge
+          // it — spreading instance.scopedState (a Proxy) instead fires its traps
+          // over every global key, per instance, per frame (a combat hot spot).
+          const overlay = scopedOverlayOf(instance.scopedState);
+          const mergedOldState = overlay
+            ? { ...state, ...overlay }
+            : { ...instance.scopedState, ...state };
+          const mergedNewState = overlay
+            ? { ...newState, ...overlay }
+            : { ...instance.scopedState, ...newState };
           // 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
@@ -283,70 +423,30 @@ const recursive = (
     return affected;
   }
 
-  // Reset regex state for reuse
-  BINDING_REGEX.lastIndex = 0;
-
-  const matches = [];
-  let match;
-  while ((match = BINDING_REGEX.exec(tree.parsed))) {
-    matches.push({ outer: match[0], inner: match[1], input: match.input });
-  }
+  const matches = textBindingsOf(tree);
 
   if (matches.length) {
-    const shallowState = Object.keys(state);
-    const shallowNewState = Object.keys(newState);
+    // A text node is hydrated as a whole (every @[…] re-interpolated together),
+    // so the node is all-or-nothing: if any of its bindings is affected, push
+    // them all. Initial hydration affects everything.
     const isInitialHydration = state === newState;
-
-    let hasAffected = false;
-    const checkedMatches = [];
-
-    for (const m of matches) {
-      // Resolve this.property to componentId.property
-      const resolvedInner = resolveThisPath(m.inner, tree.element);
-
-      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),
-        );
-        shouldAffect = noMatch || relevantKeys.length > 0;
-      } else {
-        // Update: only affect if value changed
-        const changedKeys = shallowNewState.filter(
-          (key) =>
-            matchesKey(resolvedInner, key) && state[key] !== newState[key],
-        );
-        relevantKeys =
-          changedKeys.length > 0
-            ? changedKeys
-            : shallowState.filter((key) => matchesKey(resolvedInner, key));
-        shouldAffect = noMatch || changedKeys.length > 0;
-      }
-
-      if (shouldAffect) {
-        hasAffected = true;
+    let hasAffected = isInitialHydration;
+    if (!isInitialHydration) {
+      const keySet = keySetOf(newState);
+      for (const m of matches) {
+        if (bindingAffected(m.tokens, keySet, state, newState)) {
+          hasAffected = true;
+          break;
+        }
       }
-
-      checkedMatches.push({
-        ...m,
-        matches: relevantKeys,
-      });
     }
 
     if (hasAffected) {
-      for (const m of checkedMatches) {
+      for (const m of matches) {
         affected.push({
           matchOuter: m.outer,
           matchInner: m.inner,
           input: m.input,
-          matches: m.matches,
           element: tree.element,
           textNode: tree.textNode, // Reference to specific text node (prevents wiping children)
           scopedState: scopedStateForHydration, // Pass scoped state from iteration context
@@ -357,42 +457,14 @@ const recursive = (
 
   // Check attribute bindings
   if (tree.attributes) {
-    const shallowState = Object.keys(state);
-    const shallowNewState = Object.keys(newState);
     const isInitialHydration = state === newState;
+    const keySet = isInitialHydration ? null : keySetOf(newState);
 
-    for (const [attrName, attrValue] of Object.entries(tree.attributes)) {
-      BINDING_REGEX.lastIndex = 0;
-      const attrMatches = [];
-      let attrMatch;
-      while ((attrMatch = BINDING_REGEX.exec(attrValue))) {
-        attrMatches.push({ outer: attrMatch[0], inner: attrMatch[1] });
-      }
-
+    for (const { attrName, matches: attrMatches } of attrBindingsOf(tree)) {
+      const attrValue = tree.attributes[attrName];
       for (const m of attrMatches) {
-        // Resolve this.property to componentId.property
-        const resolvedInner = resolveThisPath(m.inner, tree.element);
-
-        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),
-          );
-          shouldAffect = noMatch || newMatches.length > 0;
-        } else {
-          // Update: only affect if value changed
-          const changedKeys = shallowNewState.filter(
-            (key) =>
-              matchesKey(resolvedInner, key) && state[key] !== newState[key],
-          );
-          shouldAffect = noMatch || changedKeys.length > 0;
-        }
+        const shouldAffect =
+          isInitialHydration || bindingAffected(m.tokens, keySet, state, newState);
 
         if (shouldAffect) {
           affected.push({
@@ -411,51 +483,22 @@ const recursive = (
 
   // Check name bindings (bindings in attribute names)
   if (tree.nameBindings) {
-    const shallowState = Object.keys(state);
-    const shallowNewState = Object.keys(newState);
     const isInitialHydration = state === newState;
+    const keyMap = isInitialHydration ? null : nameKeyMapOf(newState);
 
-    for (const nameBinding of tree.nameBindings) {
-      BINDING_REGEX.lastIndex = 0;
-      const nameMatches = [];
-      let nameMatch;
-      while ((nameMatch = BINDING_REGEX.exec(nameBinding))) {
-        nameMatches.push({ outer: nameMatch[0], inner: nameMatch[1] });
-      }
-
-      for (const m of nameMatches) {
-        // Resolve this.property to componentId.property
-        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 noMatch = !shallowState.some(matchKey);
-
-        let shouldAffect = false;
-
-        if (isInitialHydration) {
-          const newMatches = shallowNewState.filter(matchKey);
-          shouldAffect = noMatch || newMatches.length > 0;
-        } else {
-          const changedKeys = shallowNewState.filter(
-            (key) => matchKey(key) && state[key] !== newState[key],
-          );
-          shouldAffect = noMatch || changedKeys.length > 0;
-        }
+    for (const m of nameBindingsOf(tree)) {
+      const shouldAffect =
+        isInitialHydration || nameBindingAffected(m.tokens, keyMap, state, newState);
 
-        if (shouldAffect) {
-          affected.push({
-            type: "nameBinding",
-            nameBinding,
-            matchOuter: m.outer,
-            matchInner: m.inner, // Keep original, evalInScope will resolve this.
-            element: tree.element,
-            scopedState: scopedStateForHydration,
-          });
-        }
+      if (shouldAffect) {
+        affected.push({
+          type: "nameBinding",
+          nameBinding: m.nameBinding,
+          matchOuter: m.outer,
+          matchInner: m.inner, // Keep original, evalInScope will resolve this.
+          element: tree.element,
+          scopedState: scopedStateForHydration,
+        });
       }
     }
   }

package/runtime/index.js

@@ -683,6 +683,14 @@ const main = (s, config = {}, stringSelector = '') => {
   // manifest's node-path entry iteration.
   Object.defineProperty(manifest, '__live', { value: $, enumerable: false, configurable: true });
 
+  // Pair the flat manifest (dotPath -> element) with its parsed tree so removal
+  // paths can prune both views together. The page MutationObserver is
+  // disconnected while Vibe renders (iteration/conditional teardown removes DOM
+  // unobserved), so those paths must prune the manifest + tree themselves; this
+  // gives them the tree root without threading it through every call. Same
+  // non-enumerable contract as __live.
+  Object.defineProperty(manifest, '__tree', { value: parsedTree, enumerable: false, configurable: true });
+
   // Bind `$` inside every expression to this live root proxy (see setRootState
   // in utils.js). Done before the first hydration pass so `$.unsafe` and the
   // other reserved methods are reachable from the initial render onward.

package/runtime/iterate.js

@@ -2,7 +2,7 @@ import parse from './parse.js';
 import affected from './affected.js';
 import hydrate from './hydrate.js';
 import { resolvePath, getItemKey, computeDiff } from './iteration-utils.js';
-import { resolveThisPath, evalInScope, findComponentIdForElement } from './utils.js';
+import { resolveThisPath, evalInScope, findComponentIdForElement, rememberScopedKeys } from './utils.js';
 import { managedNodes } from './conditionals.js';
 import { stampInstanceScopes } from './loop-scope.js';
 import {
@@ -351,36 +351,63 @@ const liveCloneNode = (node) => {
   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
+// inlined-hydrate passes are identical except for this marker and the per-wrapper
+// work, so they share this walk. (`[data-vibe-iter-prop]` always implies
+// `_vibeIterPropExprs`, set together at mount, so filtering descendants by the
+// 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]);
+    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++) {
+      if (found[i][marker]) fn(found[i]);
+    }
+  }
+};
+
 // Walk a row's clones for any element tagged as iteration-prop owner —
 // pre-process `<component src>` (still has the src attribute) and post-process
 // `<component>` wrappers both carry `_vibeIterPropExprs`. For each tracked
 // expression, re-evaluate against the row's new scoped state and write into
 // the registry slot the inlined bindings already reference. Idempotent: same
 // scoped state → same value → no-op write.
+// Returns the set of registry slot ids whose value actually changed this
+// refresh. A slot holding the same reference (e.g. a static ability array on a
+// combatant that only moved) is a no-op, so forceRegistryBackedIterationUpdates
+// can skip re-diffing the nested iteration it feeds — the dominant cost when a
+// row carries large static nested iterations.
 const refreshIterationComponentProps = (clonedNodes, scopedState) => {
-  for (let n = 0; n < clonedNodes.length; n++) {
-    const node = liveCloneNode(clonedNodes[n]);
-    if (!node || node.nodeType !== 1) continue;
-    const wrappers = [];
-    if (node._vibeIterPropExprs) wrappers.push(node);
-    const found = node.querySelectorAll?.('[data-vibe-iter-prop]');
-    if (found) for (let i = 0; i < found.length; i++) wrappers.push(found[i]);
-    for (let w = 0; w < wrappers.length; w++) {
-      const el = wrappers[w];
-      const exprs = el._vibeIterPropExprs;
-      if (!exprs) continue;
-      const registry = ensureIterPropsRegistry();
-      for (let e = 0; e < exprs.length; e++) {
-        try {
-          const value = evalInScope(exprs[e].expr, scopedState, el);
-          registry[exprs[e].id] = value;
-        } catch {
-          // Leave previous registry value in place — same fail-safe as
-          // resolveIterationComponentProps's mount-time path.
+  const changed = new Set();
+  const registry = ensureIterPropsRegistry();
+  forEachIterWrapper(clonedNodes, '_vibeIterPropExprs', (el) => {
+    for (const { id, expr } of el._vibeIterPropExprs) {
+      try {
+        const value = evalInScope(expr, scopedState, el);
+        // Don't clobber a slot with undefined — mirrors the mount-time guard in
+        // resolveIterationComponentProps. forEachIterWrapper reaches every
+        // [data-vibe-iter-prop] descendant, including components owned by a
+        // DEEPER iteration (e.g. a cell component inside a nested each). Their
+        // prop expressions reference the inner each's alias, which isn't in this
+        // (outer) row's scope, so they evaluate to undefined here. Skipping keeps
+        // the value the inner iteration's own update already set with the correct
+        // scope, instead of wiping it to undefined and leaving raw @[...] bindings.
+        if (value === undefined) continue;
+        if (registry[id] !== value) {
+          registry[id] = value;
+          changed.add(id);
         }
+      } catch {
+        // Leave previous registry value in place — same fail-safe as
+        // resolveIterationComponentProps's mount-time path.
       }
     }
-  }
+  });
+  return changed;
 };
 
 // Walk an inlined component's parsed tree and force `updateIteration` on any
@@ -394,18 +421,21 @@ 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_PATH_REGEX = /__vibeIterProps\._p\d+/;
-const forceRegistryBackedIterationUpdates = (tree, state, manifest, parentScope) => {
+const REGISTRY_SLOT_REGEX = /__vibeIterProps\.(_p\d+)/;
+const forceRegistryBackedIterationUpdates = (tree, state, manifest, parentScope, changedSlots) => {
   if (!tree) return;
   if (tree.type === 'iteration') {
     const arrPath = tree.meta?.arrayPath;
-    if (arrPath && REGISTRY_PATH_REGEX.test(arrPath)) {
+    const slot = arrPath && arrPath.match(REGISTRY_SLOT_REGEX);
+    // Skip iterations whose backing slot didn't change this cycle. changedSlots
+    // is undefined only on legacy/unguarded calls — fall back to always-update.
+    if (slot && (!changedSlots || changedSlots.has(slot[1]))) {
       updateIteration(tree, state, state, manifest, parentScope);
     }
   }
   if (tree.children) {
     for (const k in tree.children) {
-      forceRegistryBackedIterationUpdates(tree.children[k], state, manifest, parentScope);
+      forceRegistryBackedIterationUpdates(tree.children[k], state, manifest, parentScope, changedSlots);
     }
   }
 };
@@ -416,30 +446,19 @@ const forceRegistryBackedIterationUpdates = (tree, state, manifest, parentScope)
 // component.js) — that tree retains the original `@[...]` binding text even
 // after the wrapper's live DOM has been hydrated, so subsequent affected→
 // hydrate passes work the same way they would on initial render.
-const hydrateInlinedIterationComponents = (clonedNodes, oldState, newState, manifest) => {
-  for (let n = 0; n < clonedNodes.length; n++) {
-    const node = liveCloneNode(clonedNodes[n]);
-    if (!node || node.nodeType !== 1) continue;
-    const wrappers = [];
-    if (node._vibeIterTree) wrappers.push(node);
-    const found = node.querySelectorAll?.('[data-vibe-iter-prop]');
-    if (found) for (let i = 0; i < found.length; i++) {
-      if (found[i]._vibeIterTree) wrappers.push(found[i]);
-    }
-    for (let w = 0; w < wrappers.length; w++) {
-      const wrapper = wrappers[w];
-      const tree = wrapper._vibeIterTree;
-      const affectedList = affected(tree, oldState, newState);
-      if (affectedList.length > 0) {
-        hydrate(affectedList, newState, manifest, oldState);
-      }
-      // Bindings into the iteration-prop registry are visited above, but
-      // iteration nodes whose arrayPath resolves through the registry need
-      // explicit driving: the refreshed slot is a side effect that
-      // `affected()` can't see. Walk the tree and update them directly.
-      forceRegistryBackedIterationUpdates(tree, newState, manifest, {});
+const hydrateInlinedIterationComponents = (clonedNodes, oldState, newState, manifest, changedSlots) => {
+  forEachIterWrapper(clonedNodes, '_vibeIterTree', (wrapper) => {
+    const tree = wrapper._vibeIterTree;
+    const affectedList = affected(tree, oldState, newState);
+    if (affectedList.length > 0) {
+      hydrate(affectedList, newState, manifest, oldState);
     }
-  }
+    // Bindings into the iteration-prop registry are visited above, but iteration
+    // nodes whose arrayPath resolves through the registry need explicit driving:
+    // the refreshed slot is a side effect `affected()` can't see. Update only the
+    // iterations whose slot actually changed this cycle (changedSlots).
+    forceRegistryBackedIterationUpdates(tree, newState, manifest, {}, changedSlots);
+  });
 };
 
 // Apply DOM-property writes that compileBatchFn collected. Each batch row
@@ -764,7 +783,13 @@ export const createScopedState = (globalState, localVars, parentScope = {}) => {
     ...Reflect.ownKeys(globalState),
   ])];
 
-  return new Proxy(globalState, {
+  // Overlay = the aliases this proxy resolves locally (localVars wins over
+  // parentScope, matching the get order below). affected's descent reuses it for
+  // a cheap plain merge instead of materializing the proxy.
+  const overlay =
+    Object.keys(parentScope).length === 0 ? localVars : { ...parentScope, ...localVars };
+
+  const proxy = new Proxy(globalState, {
     get(target, prop) {
       if (prop in localVars) return localVars[prop];
       if (prop in parentScope) return parentScope[prop];
@@ -799,6 +824,8 @@ export const createScopedState = (globalState, localVars, parentScope = {}) => {
       return Reflect.getOwnPropertyDescriptor(target, prop);
     },
   });
+
+  return rememberScopedKeys(proxy, cachedKeys, overlay);
 };
 
 // Render all iterations in the parsed tree
@@ -832,8 +859,7 @@ export const setRenderAllConditionals = (fn) => {
 
 // Initial render of an iteration block
 export const renderIteration = (iterationNode, state, manifest, parentScope = {}) => {
-  const { arrayPath, itemAlias, indexAlias, template, startComment, endComment } =
-    iterationNode.meta;
+  const { arrayPath, startComment, endComment } = iterationNode.meta;
 
   // Already rendered - updates go through updateIteration
   if (iterationNode.runtime.instances?.length > 0) {
@@ -898,55 +924,8 @@ export const renderIteration = (iterationNode, state, manifest, parentScope = {}
     // Fall through to runtime path if compiled failed
   }
 
-  // Standard path: clone and hydrate each item (handles nested iterations/conditionals)
-  const instances = [];
-  const templateNodes = template.element.childNodes;
-  const frag = document.createDocumentFragment();
-  // Resolve the iteration's owning component once — `this.X` bindings inside
-  // row content resolve against this id while the cloned subtree is still
-  // detached during hydrate (see findComponentIdForElement's detached fallback).
-  const componentId = findComponentIdForElement(startComment.parentElement);
-
-  // Live `$`-proxy elements for the loop alias, so nested conditionals (which
-  // stamp `__vibeScope` from this scoped state) and `$scope` handlers receive
-  // the same identity the app sees through `$`. `inst.item` stays the plain
-  // snapshot value for the diff.
-  const liveArray = resolveLiveArray(iterationNode, manifest, parentScope);
-
-  for (let i = 0; i < array.length; i++) {
-    const item = array[i];
-    const liveItem = liveItemAt(liveArray, i, item);
-    const localVars = { [itemAlias]: liveItem, [indexAlias]: i };
-    const scopedState = createScopedState(state, localVars, parentScope);
-
-    // Clone, parse, hydrate
-    const { element, tree, clonedNodes } = initializeBlock(templateNodes, scopedState, template, componentId, new Set(iterationNode.meta.scopeAliases));
-
-    // Pre-resolve <component src> binding props against iteration scope (see helper comment)
-    resolveIterationComponentProps(clonedNodes, scopedState);
-
-    // Collect nodes in DocumentFragment (single DOM insertion at end)
-    for (let j = 0; j < clonedNodes.length; j++) {
-      frag.appendChild(clonedNodes[j]);
-      if (clonedNodes[j].nodeType === 1) managedNodes.add(clonedNodes[j]);
-    }
-
-    // Recursively render nested iterations and conditionals
-    if (tree) {
-      const nestedScope = { ...parentScope, ...localVars };
-      renderAllIterations(tree, scopedState, manifest, nestedScope);
-      _renderAllConditionals(tree, scopedState, manifest, nestedScope);
-    }
-
-    instances.push({ element, tree, item, liveItem, index: i, clonedNodes, scopedState });
-  }
-
-  // Single DOM insertion for all items
-  parent.insertBefore(frag, endComment);
-  iterationNode.runtime.instances = instances;
-
-  // Stamp loop scope so `$scope(this,'alias')` handlers resolve the live item.
-  stampScopes(iterationNode, manifest, parentScope);
+  // Standard path: one shared clone+hydrate render loop (also used by bulkReplace).
+  renderInstances(iterationNode, array, state, manifest, parentScope);
 
   // Mark comment as rendered (survives re-parsing since comment nodes persist in DOM)
   // Also store runtime data on the DOM node so it persists across re-parses
@@ -1103,7 +1082,7 @@ export const updateIteration = (iterationNode, newState, oldState, manifest, par
   operations.forEach((op) => {
     switch (op.type) {
       case 'REMOVE':
-        removeInstance(iterationNode, op.index);
+        removeInstance(iterationNode, op.index, manifest);
         break;
       case 'ADD':
         addInstance(iterationNode, op.item, op.index, newState, manifest, parentScope);
@@ -1135,18 +1114,97 @@ export const updateIteration = (iterationNode, newState, oldState, manifest, par
   stampScopes(iterationNode, manifest, parentScope);
 };
 
+// Prune removed iteration rows from the global manifest (dotPath -> element)
+// and parsed tree. Both views still reference rows that mounted globally-tracked
+// content (e.g. a <component src> registers its subtree in the manifest). Vibe
+// disconnects the page MutationObserver while it reconciles, so the removals
+// below are never observed — left unpruned, the entries pin detached subtrees
+// (memory leak) and bloat every later affected/hydrate walk (the
+// combat-fps-decays-per-reset bug). Scoped to exactly the removed nodes.
+const releaseRemovedSubtrees = (removedRoots, manifest) => {
+  if (!manifest || removedRoots.length === 0) return;
+  const tree = manifest.__tree;
+
+  // Reverse the manifest (dotPath -> element) once so each removed root resolves
+  // to its path. An element can be registered at more than one path (a component
+  // wrapper appears at both its own node and an inlined child slot); keep the
+  // SHORTEST so the path scopes the whole row subtree, not an inner slot.
+  // __live / __tree are non-enumerable, so for-in skips them.
+  const pathOf = new Map();
+  for (const key in manifest) {
+    const el = manifest[key];
+    if (!el) continue;
+    const existing = pathOf.get(el);
+    if (existing === undefined || key.length < existing.length) pathOf.set(el, key);
+  }
+
+  const removedEls = new Set(); // top-level removed roots — tree prune cascades subtrees
+  const removedPaths = new Set(); // their manifest paths — manifest prune is path-scoped
+  for (let i = 0; i < removedRoots.length; i++) {
+    const root = removedRoots[i];
+    if (!root) continue;
+    removedEls.add(root);
+    const path = pathOf.get(root);
+    if (path !== undefined) removedPaths.add(path);
+  }
+  if (removedPaths.size === 0 && removedEls.size === 0) return;
+
+  // Manifest: drop every entry at or under a removed root's path. Path scope (not
+  // element identity) is what catches content hoisted out of the DOM — an inactive
+  // conditional branch template sits in a detached container yet stays registered
+  // under its row's path.
+  if (removedPaths.size > 0) {
+    for (const key in manifest) {
+      if (pathUnderRemoved(key, removedPaths)) delete manifest[key];
+    }
+  }
+
+  // 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);
+};
+
+// True when `key` is, or is a descendant of, any path in `removedPaths`.
+const pathUnderRemoved = (key, removedPaths) => {
+  if (removedPaths.has(key)) return true;
+  for (let i = key.indexOf('.', 1); i !== -1; i = key.indexOf('.', i + 1)) {
+    if (removedPaths.has(key.slice(0, i))) return true;
+  }
+  return false;
+};
+
+const pruneTreeNodes = (node, removedEls) => {
+  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);
+  }
+};
+
 // Bulk replacement: clear all DOM and re-render from scratch
 // Used when arrays share no common keys (avoids O(n²) LCS)
 const bulkReplace = (iterationNode, newArray, state, manifest, parentScope) => {
   const { template, startComment, endComment } = iterationNode.meta;
   const parent = startComment.parentNode;
 
-  // Clear all existing DOM between comments using Range (single operation)
+  // Clear all existing DOM between comments using Range (single operation),
+  // then prune the removed subtrees from the manifest + tree. Collect the LIVE
+  // nodes in the range rather than the instances' clonedNodes: a <component src>
+  // row is replaced in place by component.js, so clonedNodes can point at the
+  // stale original wrapper, not the processed content actually being removed.
   if (iterationNode.runtime.instances.length > 0) {
+    const removedRoots = [];
+    for (let cur = startComment.nextSibling; cur && cur !== endComment; cur = cur.nextSibling) {
+      removedRoots.push(cur);
+    }
     const range = document.createRange();
     range.setStartAfter(startComment);
     range.setEndBefore(endComment);
     range.deleteContents();
+    releaseRemovedSubtrees(removedRoots, manifest);
   }
 
   if (newArray.length === 0) {
@@ -1165,26 +1223,8 @@ const bulkReplace = (iterationNode, newArray, state, manifest, parentScope) => {
     return;
   }
 
-  // Complex templates: build each instance, batch-append into a DocumentFragment,
-  // finalize (mark managed + render nested), then commit to the DOM in one
-  // parent.insertBefore call.
-  const instances = [];
-  const frag = document.createDocumentFragment();
-  const liveArray = resolveLiveArray(iterationNode, manifest, parentScope);
-  for (let i = 0; i < newArray.length; i++) {
-    const built = buildInstance(iterationNode, newArray[i], i, state, parentScope, liveItemAt(liveArray, i, newArray[i]));
-    for (let j = 0; j < built.clonedNodes.length; j++) frag.appendChild(built.clonedNodes[j]);
-    finalizeInstance(built, manifest, parentScope);
-    instances.push({
-      element: built.element, tree: built.tree, item: newArray[i], liveItem: built.liveItem, index: i,
-      clonedNodes: built.clonedNodes, scopedState: built.scopedState,
-    });
-  }
-  parent.insertBefore(frag, endComment);
-  iterationNode.runtime.instances = instances;
-
-  // Stamp loop scope so `$scope(this,'alias')` handlers resolve the live item.
-  stampScopes(iterationNode, manifest, parentScope);
+  // Complex templates: one shared clone+hydrate render loop.
+  renderInstances(iterationNode, newArray, state, manifest, parentScope);
 };
 
 // Find an instance's canonical in-DOM anchor (the first of its cloned nodes
@@ -1232,6 +1272,10 @@ const detachInstanceDom = (iterationNode, index, parent) => {
   const anchor = findInstanceAnchor(instance, parent);
   const nextAnchor = resolveInsertBefore(iterationNode, index + 1, parent);
 
+  // Return the live nodes actually removed so callers can prune them from the
+  // manifest + tree (clonedNodes can be stale once a <component src> row is
+  // replaced in place by component.js).
+  const removed = [];
   if (anchor) {
     let cur = anchor;
     // endComment caps the walk even if nextAnchor ordering is ever
@@ -1239,6 +1283,7 @@ const detachInstanceDom = (iterationNode, index, parent) => {
     while (cur && cur !== nextAnchor && cur !== endComment) {
       const nextSibling = cur.nextSibling;
       parent.removeChild(cur);
+      removed.push(cur);
       cur = nextSibling;
     }
   }
@@ -1246,8 +1291,12 @@ const detachInstanceDom = (iterationNode, index, parent) => {
   const nodes = instance.clonedNodes || (instance.element ? [instance.element] : []);
   for (let i = 0; i < nodes.length; i++) {
     const n = nodes[i];
-    if (n && n.parentNode && n.parentNode !== parent) n.parentNode.removeChild(n);
+    if (n && n.parentNode && n.parentNode !== parent) {
+      n.parentNode.removeChild(n);
+      removed.push(n);
+    }
   }
+  return removed;
 };
 
 // Build a fresh instance's DOM + tree + scope from the iteration template.
@@ -1285,6 +1334,31 @@ const finalizeInstance = (built, manifest, parentScope) => {
   }
 };
 
+// Build, finalize, and commit a fresh set of instances for `array` in one
+// batched DOM insertion, replacing iterationNode.runtime.instances. The single
+// clone+hydrate render loop shared by initial render (renderIteration) and full
+// rebuild (bulkReplace) — they differ only in their preamble, not this loop.
+const renderInstances = (iterationNode, array, state, manifest, parentScope) => {
+  const { startComment, endComment } = iterationNode.meta;
+  const parent = startComment.parentNode;
+  const instances = [];
+  const frag = document.createDocumentFragment();
+  const liveArray = resolveLiveArray(iterationNode, manifest, parentScope);
+  for (let i = 0; i < array.length; i++) {
+    const built = buildInstance(iterationNode, array[i], i, state, parentScope, liveItemAt(liveArray, i, array[i]));
+    for (let j = 0; j < built.clonedNodes.length; j++) frag.appendChild(built.clonedNodes[j]);
+    finalizeInstance(built, manifest, parentScope);
+    instances.push({
+      element: built.element, tree: built.tree, item: array[i], liveItem: built.liveItem, index: i,
+      clonedNodes: built.clonedNodes, scopedState: built.scopedState,
+    });
+  }
+  parent.insertBefore(frag, endComment);
+  iterationNode.runtime.instances = instances;
+  // Stamp loop scope so `$scope(this,'alias')` handlers resolve the live item.
+  stampScopes(iterationNode, manifest, parentScope);
+};
+
 const addInstance = (iterationNode, item, index, state, manifest, parentScope) => {
   const parent = iterationNode.meta.startComment.parentNode;
   const liveItem = liveItemAt(resolveLiveArray(iterationNode, manifest, parentScope), index, item);
@@ -1297,10 +1371,11 @@ const addInstance = (iterationNode, item, index, state, manifest, parentScope) =
   });
 };
 
-const removeInstance = (iterationNode, index) => {
+const removeInstance = (iterationNode, index, manifest) => {
   if (index < 0 || index >= iterationNode.runtime.instances.length) return;
   const parent = iterationNode.meta.startComment.parentNode;
-  if (parent) detachInstanceDom(iterationNode, index, parent);
+  const removed = parent ? detachInstanceDom(iterationNode, index, parent) : [];
+  releaseRemovedSubtrees(removed, manifest);
   iterationNode.runtime.instances.splice(index, 1);
 };
 
@@ -1337,7 +1412,12 @@ const updateInstanceRebuild = (iterationNode, index, newItem, state, manifest, p
 
   const liveItem = liveItemAt(resolveLiveArray(iterationNode, manifest, parentScope), index, newItem);
   const built = buildInstance(iterationNode, newItem, index, state, parentScope, liveItem);
-  detachInstanceDom(iterationNode, index, parent);
+  // Prune the OLD row's manifest/tree entries before finalizing the rebuilt one,
+  // so the replaced subtree is released (same removal contract as removeInstance).
+  // Order matters: prune the detached old nodes before finalizeInstance registers
+  // the new ones, so the new entries are never touched.
+  const removed = parent ? detachInstanceDom(iterationNode, index, parent) : [];
+  releaseRemovedSubtrees(removed, manifest);
   const insertBefore = resolveInsertBefore(iterationNode, index + 1, parent);
   for (let i = 0; i < built.clonedNodes.length; i++) parent.insertBefore(built.clonedNodes[i], insertBefore);
   finalizeInstance(built, manifest, parentScope);
@@ -1371,19 +1451,25 @@ const updateInstance = (iterationNode, index, newItem, oldState, newState, manif
   }
 
   const { itemAlias, indexAlias } = iterationNode.meta;
-  const oldLocalVars = { [itemAlias]: instance.item, [indexAlias]: index };
   const newLocalVars = { [itemAlias]: newItem, [indexAlias]: index };
-  const oldScopedState = createScopedState(oldState, oldLocalVars, parentScope);
+  // The "old" scoped state is exactly last cycle's "new" one — same global
+  // snapshot (this cycle's oldState) and same item/index — already stored on the
+  // instance. Reuse it instead of allocating a second proxy per row per frame
+  // (createScopedState is a combat hot spot). Falls back on the first update
+  // after an add, before scopedState has been recorded.
+  const oldScopedState =
+    instance.scopedState ||
+    createScopedState(oldState, { [itemAlias]: instance.item, [indexAlias]: index }, parentScope);
   const newScopedState = createScopedState(newState, newLocalVars, parentScope);
 
-  refreshIterationComponentProps(instance.clonedNodes, newScopedState);
+  const changedSlots = refreshIterationComponentProps(instance.clonedNodes, newScopedState);
 
   const affectedList = affected(instance.tree, oldScopedState, newScopedState);
   if (affectedList.length > 0) {
     hydrate(affectedList, newScopedState, manifest, oldScopedState);
   }
 
-  hydrateInlinedIterationComponents(instance.clonedNodes, oldScopedState, newScopedState, manifest);
+  hydrateInlinedIterationComponents(instance.clonedNodes, oldScopedState, newScopedState, manifest, changedSlots);
 
   instance.item = newItem;
   instance.scopedState = newScopedState;

package/runtime/pre-compiled-iterations.js

@@ -5,7 +5,6 @@
  * Uses pre-compiled batch functions from manifest generated by the compiler.
  *
  * This is the production implementation that runs compiled code generated at build time.
- * Based on the prototype in _vibe-compiled-iteration-batch.js
  */
 
 import { stampInstanceScopes } from './loop-scope.js';

package/runtime/utils.js

@@ -4,6 +4,27 @@ import { THIS_PROP_REGEX } from './constants.js';
 let hashCounter = 0;
 export const hash = () => `_${hashCounter++}`;
 
+// Scoped-state proxy -> its precomputed key list. The affected-walk needs the
+// key set per tree node on every frame; calling Object.keys() on a scoped-state
+// proxy fires its getOwnPropertyDescriptor trap for every key — a measurable
+// combat hot spot. createScopedState records the keys here via
+// rememberScopedKeys; ownKeysOf reads them, falling back to Object.keys for
+// plain (non-scoped) states.
+const scopedKeys = new WeakMap();
+// Scoped-state proxy -> its local overlay (loop aliases item/index + any parent
+// aliases). affected's iteration descent rebuilds a plain merged snapshot per
+// instance; spreading the proxy to recover the aliases fires its traps over
+// every global key. Recording the small overlay lets the descent do a cheap
+// plain merge (`{...currentGlobals, ...overlay}`) instead.
+const scopedOverlay = new WeakMap();
+export const rememberScopedKeys = (state, keys, overlay) => {
+  scopedKeys.set(state, keys);
+  if (overlay) scopedOverlay.set(state, overlay);
+  return state;
+};
+export const ownKeysOf = (state) => scopedKeys.get(state) || Object.keys(state);
+export const scopedOverlayOf = (state) => scopedOverlay.get(state);
+
 // The live root reactive proxy, wired once at boot by index.js. Used ONLY to
 // reach the root's non-enumerable helper methods (`$.unsafe`, `$.on`, …) — NOT
 // for state reads.
@@ -83,8 +104,10 @@ export const evalInScope = (expr, state, element = null) => {
       }
     }
 
-    // Get state keys once (triggers ownKeys trap only once for Proxies)
-    const stateKeys = Object.keys(state);
+    // Get state keys once. ownKeysOf reads the scoped-state proxy's precomputed
+    // key list instead of Object.keys() — the latter fires getOwnPropertyDescriptor
+    // for every key, a per-eval combat hot spot.
+    const stateKeys = ownKeysOf(state);
     const keyCount = stateKeys.length;
 
     // Cache lookup: expression + key signature → compiled function