@ape-egg/vibe 1.9.7 → 1.9.9

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## [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
+
+- **Raw-HTML rendering via `$.unsafe(expr)`** (`runtime/raw-html.js` (new), `runtime/hydrate.js`, `runtime/index.js`, `runtime/utils.js`, `compiler/src/compiler/value_stamper.rs`) — a binding that renders a trusted string as real markup instead of escaping it; Vibe's equivalent of Svelte `{@html}` / Vue `v-html` / React `dangerouslySetInnerHTML`. `$.unsafe(str)` wraps a string in a `RawHtml` marker. When the binding is the **sole content of its element** (`<p>@[$.unsafe(desc)]</p>`), the runtime sets `innerHTML` from the string and marks the injected subtree opaque (`managedNodes`) so the MutationObserver never re-walks it — injected markup is **inert**, matching Svelte. Mixed into surrounding text it falls back to escaped literal text (via the marker's `toString()`). Reactive in every scope (top-level, iterations, conditionals, components). Compiled mode paints the markup raw at stamp time (`value_stamper.rs` defines `$.unsafe` in the QuickJS context) while the manifest preserves the `@[$.unsafe(...)]` marker for runtime re-hydration. **Trusted input only — no sanitizing.**
+  - Test: `tests/unit/raw-html.test.js`, `tests/e2e/unsafe-html.spec.js` (pure render, escaped-text fallback, reactivity, in-iteration, in-conditional, inert injected markup), and `$.unsafe` stamping in `tests/compiler/runtime`.
+
+### Fixed
+
+- **`$` inside expressions must read from the per-cycle state, not the live root** (`runtime/utils.js`) — surfaced while wiring `$.unsafe`. The reactivity engine detects change by evaluating each expression against an old snapshot and a new snapshot and comparing; binding `$` to the live root proxy made both reads identical, silently defeating change detection for any expression reading through `$` or `this.` (which compiles to `$['id']…`) — e.g. a computed iteration array or conditional gated on component state would stop re-rendering. `evalInScope` now resolves `$` to the same state object the diff cycle is evaluating, and reaches the root's non-enumerable helper methods (`unsafe`, `on`, `reconcile`) via a thin per-state fallback proxy so `$.unsafe` stays callable from plain snapshots on the update path. State reads stay on the snapshot (diffable); only missing method names fall through to root. Scoped states already delegate to root, so the hot path is unaffected.
+  - Test: `tests/unit/dollar-binding-scope.test.js` (a `$`-expression yields different values for two snapshots → diffable; `$.unsafe` resolves from a plain snapshot lacking it)
+
+---
+
 ## [1.9.7] - 2026-06-01
 
 ### Fixed

package/README.md

@@ -1,6 +1,6 @@
 # Vibe
 
-**Version 1.9.2 (Beta)** — A runtime-first reactive framework with optional compilation.
+**Version 1.9.9 (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.
 
@@ -105,6 +105,26 @@ Vibe supports bindings in three positions:
 <!-- /each -->
 ```
 
+The "array" position accepts any JS expression evaluated in scope, not just a state path:
+
+```html
+<!-- each items.filter(i => i.active) as item -->...<!-- /each -->
+<!-- each Array.from({ length: count }) as n, index -->...<!-- /each -->
+```
+
+**Keyed iteration** — give each row a stable identity with `(keyExpr)` so survivors keep their DOM (and listeners / animation state) when the list reorders or items are removed. The key comes before the optional index. Without a key, Vibe falls back to an index-coupled hash and bulk-re-renders the tail on reorder.
+
+```html
+<!-- each rows as row (row.id) -->
+<li>@[row.label]</li>
+<!-- /each -->
+
+<!-- key + index -->
+<!-- each rows as row (row.id), index -->
+<li>@[index]: @[row.label]</li>
+<!-- /each -->
+```
+
 Nested iteration with dot paths:
 
 ```html
@@ -218,6 +238,19 @@ Skip reactive processing for an element:
 <code vibe-dehydrate>@[this] displays literally</code>
 ```
 
+### Raw HTML (`$.unsafe`)
+
+`@[expr]` escapes its output (`textContent`) — safe by default. To render **trusted** markup instead, wrap the value in `$.unsafe(...)`; the binding sets `innerHTML`. This is Vibe's equivalent of Svelte `{@html}` / Vue `v-html` / React `dangerouslySetInnerHTML`.
+
+```html
+<p>@[$.unsafe(description)]</p>
+```
+
+- The binding **must be the sole content of its element** (innerHTML semantics). Mixed into surrounding text, it falls back to escaped literal text.
+- Injected markup is **inert** — `@[...]` / `<!-- if -->` / `<!-- each -->` inside it are not processed (matches Svelte `{@html}`); the subtree is opaque to the MutationObserver.
+- Fully **reactive** — re-renders on value change; works in iterations, conditionals, and components. Compiled mode paints the markup at stamp time and re-hydrates at runtime.
+- **Trusted input only** — no sanitizing. Don't pass user-supplied strings.
+
 ### Internal Names (don't collide)
 
 These are used by the runtime — don't repurpose them in your code:

package/compiler/src/compiler/value_stamper.rs

@@ -64,7 +64,14 @@ impl<'a> ValueStamper<'a> {
         context.with(|ctx| -> Result<(), String> {
             let state_str = serde_json::to_string(state)
                 .map_err(|e| format!("Failed to serialize state: {}", e))?;
-            ctx.eval::<(), _>(format!("const $ = {}; Object.assign(globalThis, $)", state_str))
+            // Expose state both as bare globals (via Object.assign) and as a
+            // persistent `$` global carrying the runtime `unsafe` helper, so a
+            // `@[$.unsafe(expr)]` binding stamps its trusted string raw at build
+            // time — mirroring the runtime, where `$.unsafe` marks raw HTML.
+            ctx.eval::<(), _>(format!(
+                "const $ = {}; Object.assign(globalThis, $); $.unsafe = (s) => s; globalThis.$ = $",
+                state_str
+            ))
                 .map_err(|e| format!("Failed to set up state in QuickJS: {:?}", e))?;
             Ok(())
         })?;
@@ -714,6 +721,25 @@ mod tests {
         assert_eq!(result, "<div>Hello @[missing]</div>");
     }
 
+    #[test]
+    fn stamp_unsafe_emits_raw_html() {
+        let state = json!({ "desc": "Gain <span data-green>+3%</span>." });
+        let stamper = ValueStamper::new(&state, false).unwrap();
+        let html = String::from("<p>@[$.unsafe(desc)]</p>");
+        let result = stamper.stamp_html(html).unwrap();
+        // Raw markup is painted directly — not escaped, not left as a marker.
+        assert_eq!(result, "<p>Gain <span data-green>+3%</span>.</p>");
+    }
+
+    #[test]
+    fn stamp_unsafe_nested_path() {
+        let state = json!({ "tooltip": { "props": { "description": "<em>x</em>" } } });
+        let stamper = ValueStamper::new(&state, false).unwrap();
+        let html = String::from("<p>@[$.unsafe(tooltip.props.description)]</p>");
+        let result = stamper.stamp_html(html).unwrap();
+        assert_eq!(result, "<p><em>x</em></p>");
+    }
+
     #[test]
     fn stamp_attribute_binding() {
         let state = json!({ "firstName": "John" });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ape-egg/vibe",
-  "version": "1.9.7",
+  "version": "1.9.9",
   "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,26 +85,99 @@ 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 [...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 false;
+  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.
+// Used to flag conditional expressions whose result can't be trusted to the
+// snapshot-equality short-circuit because the called function may read live
+// `$` (or other state-holding globals) via closure rather than the state
+// snapshot affected.js passes in. False positives are acceptable: when the
+// expression contains a call, we fall back to "if any state key changed,
+// re-evaluate"; mountBranch's branchChanged guard suppresses the no-op DOM
+// churn when the value didn't actually flip.
+const CALL_EXPR_REGEX = /\b[A-Za-z_$][\w$]*\s*\(/;
+
 // Resolve a clone-list entry to its live counterpart. processComponent swaps
 // the original `<component src>` for a post-process `<component>` wrapper and
 // records the new node on the original via `_vibeReplacedBy`. Mirrors
@@ -160,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
@@ -235,6 +385,29 @@ const recursive = (
       return affected;
     }
 
+    // Function-call short-circuit: when the expression contains a `(`-style
+    // call, the snapshot eval can be blind — the called helper may read live
+    // `$` via closure rather than the passed state, so `oldValue` and
+    // `newValue` both run against the *current* values and the equality check
+    // never fires. Flag as affected whenever any state key actually changed
+    // this cycle so updateConditional re-runs against live state; if the
+    // result hasn't really flipped, mountBranch's branchChanged guard absorbs
+    // the call cheaply. Skip during initial hydration (state === newState).
+    if (state !== newState && CALL_EXPR_REGEX.test(tree.meta.expression)) {
+      const stateKeys = Object.keys(state);
+      const anyChanged = stateKeys.some((k) => state[k] !== newState[k]);
+      if (anyChanged) {
+        affected.push({
+          type: "conditional",
+          node: tree,
+          changeType: "expression-fn-call",
+          scopedState: newState,
+          oldScopedState: state,
+        });
+        return affected;
+      }
+    }
+
     // Condition didn't change, check for affected elements inside active branch
     if (tree.runtime.activeInstance && tree.runtime.activeInstance.parsedTree) {
       return recursive(
@@ -250,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
@@ -324,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({
@@ -378,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 nameBindingsOf(tree)) {
+      const shouldAffect =
+        isInitialHydration || nameBindingAffected(m.tokens, keyMap, state, newState);
 
-      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;
-        }
-
-        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/hydrate.js

@@ -1,7 +1,8 @@
 import { updateIteration } from './iterate.js';
-import { updateConditional } from './conditionals.js';
+import { updateConditional, managedNodes } from './conditionals.js';
 import { VALUE_ATTRS, DOM_PROPERTIES, BINDING_REGEX, PURE_BINDING_REGEX } from './constants.js';
 import { evalInScope, resolveCaseInsensitivePath } from './utils.js';
+import { RawHtml } from './raw-html.js';
 
 export default (affected, state, manifest = {}, oldState = {}) => {
   affected.forEach((aff) => {
@@ -131,6 +132,27 @@ export default (affected, state, manifest = {}, oldState = {}) => {
       // Evaluate the expression with state as context
       const evaluated = evalInScope(matchInner, effectiveState, element);
 
+      // Raw-HTML render: `$.unsafe(str)` returns a RawHtml marker. When the
+      // binding is the sole content of its element (`<p>@[$.unsafe(x)]</p>`),
+      // set innerHTML from the trusted string instead of escaping via
+      // textContent. The injected subtree is marked opaque (managedNodes) so
+      // the MutationObserver never re-walks or hydrates it — raw HTML is inert,
+      // matching Svelte {@html}. Any non-pure use (marker spliced into
+      // surrounding text, or an element with other children) falls through to
+      // the normal path, where RawHtml.toString() degrades to escaped text.
+      const isPureBinding = input.trim() === matchOuter;
+      if (evaluated instanceof RawHtml && isPureBinding &&
+          (element._vibeRawHtml || element.childNodes.length === 1)) {
+        const html = evaluated.html;
+        if (element._vibeRawHtmlValue !== html) {
+          element.innerHTML = html;
+          for (const child of element.children) managedNodes.add(child);
+          element._vibeRawHtmlValue = html;
+        }
+        element._vibeRawHtml = true;
+        return;
+      }
+
       const toReplace = input.replaceAll(matchOuter, evaluated).trim();
 
       affected.forEach((innerAff) => {

package/runtime/index.js

@@ -3,7 +3,8 @@ import parse from './parse.js';
 import createManifest from './manifest.js';
 import hydrate from './hydrate.js';
 import affected from './affected.js';
-import { deepMerge, hash } from './utils.js';
+import { deepMerge, hash, setRootState } from './utils.js';
+import { unsafe } from './raw-html.js';
 import { renderAllIterations, setRenderAllConditionals, releaseOrphanedIterationProps } from './iterate.js';
 import { renderAllConditionals, branchNodeRegistry, managedNodes } from './conditionals.js';
 import { installScopeResolver } from './loop-scope.js';
@@ -655,6 +656,16 @@ const main = (s, config = {}, stringSelector = '') => {
     enumerable: false,
   });
 
+  // Mark a trusted string as raw HTML. A binding that is the sole content of
+  // its element — `<p>@[$.unsafe(desc)]</p>` — sets innerHTML from the string
+  // instead of escaping it via textContent. Trusted input only (no sanitizing,
+  // like Svelte {@html}). Non-enumerable so it never leaks into state snapshots.
+  Object.defineProperty($, 'unsafe', {
+    value: unsafe,
+    enumerable: false,
+    configurable: true,
+  });
+
   // Pure-render path for surgical component HMR. Given raw component template
   // HTML, callsite props, slot HTML, and existing componentIds, returns the
   // processed HTML string the plugin's HMR handler can hand to $.reconcile.
@@ -672,6 +683,29 @@ 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.
+  setRootState($);
+
+  // Publish the real proxy on `window.$` BEFORE the first hydration pass.
+  // boot.js sets `window.$ = main(...)`, but until main returns it's the
+  // pre-boot placeholder (vibeInstance with no state keys). User helpers
+  // defined on `window` that close over `$` — e.g. a global `brawlerActivity`
+  // function reading `$.combat?.duration` — would then read the placeholder
+  // during initial render and treat the whole world as empty. Assigning the
+  // live proxy here lets those closures see the right `$` from the very
+  // first conditional/binding eval.
+  if (typeof window !== 'undefined') window.$ = $;
+
   // Initial hydration - pass plain values so iteration can do reference comparison
   const initialState = extractPlainValue($);
   const affectedElements = affected(parsedTree, initialState, initialState);

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,54 @@ 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);
+        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 +412,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 +437,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 +774,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 +815,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 +850,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 +915,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 +1073,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 +1105,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 +1214,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 +1263,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 +1274,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 +1282,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 +1325,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 +1362,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 +1403,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 +1442,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/raw-html.js

@@ -0,0 +1,15 @@
+// Marker for trusted raw-HTML output. `$.unsafe(str)` wraps a string so the
+// hydrate path knows to set innerHTML instead of escaping via textContent.
+// toString() returns the raw string so any non-pure use (the marker spliced
+// into surrounding text) degrades to escaped literal text automatically — the
+// browser escapes it when it lands in a text node.
+export class RawHtml {
+  constructor(html) {
+    this.html = html == null ? '' : String(html);
+  }
+  toString() {
+    return this.html;
+  }
+}
+
+export const unsafe = (html) => new RawHtml(html);

package/runtime/utils.js

@@ -4,6 +4,61 @@ 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.
+let rootProxy = null;
+export const setRootState = (proxy) => { rootProxy = proxy; };
+
+// Resolve the `$` identifier for an expression. `$` must read from the SAME
+// state object the diff cycle is evaluating — affected.js / iterate.js compare
+// an expression's value against an old snapshot and a new snapshot, so binding
+// `$` to the live root instead would make both reads identical and defeat
+// change detection (the whole reactivity engine). So state reads stay on the
+// passed `state`.
+//
+// The catch: the root's reserved methods (`unsafe`, `on`, `reconcile`, …) are
+// non-enumerable and don't survive the plain `{...state}` snapshots, so a
+// plain snapshot can't reach `$.unsafe`. Wrap such a state in a thin proxy that
+// serves its own keys (snapshot reads, fully diffable) and falls back to the
+// live root only for keys it lacks (the helper methods). Scoped states already
+// 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
+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,
+    });
+    dollarCache.set(state, wrapped);
+  }
+  return wrapped;
+};
+
 // Function compilation cache: avoids creating new Function() for repeated expressions
 // Key: normalized expression + '\0' + state keys joined by '\0'
 const fnCache = new Map();
@@ -49,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
@@ -113,10 +170,13 @@ export const evalInScope = (expr, state, element = null) => {
       fnCache.set(cacheKey, fn);
     }
 
-    // Build values array matching the cached function's parameter order
+    // Build values array matching the cached function's parameter order. Bare
+    // identifiers resolve from the passed (possibly scoped) state; the `$`
+    // identifier resolves via dollarFor — the same state for reads (so old/new
+    // diffing works), with helper-method fallback to the live root.
     const values = new Array(keyCount + 1);
     for (let i = 0; i < keyCount; i++) values[i] = state[stateKeys[i]];
-    values[keyCount] = state;
+    values[keyCount] = dollarFor(state);
 
     const result = fn(...values);