@ape-egg/vibe 4.0.0 → 4.1.1

package/runtime/debug.js

@@ -1,14 +1,5 @@
 import { DEBUGGER_NAME } from './constants.js';
 
-// Loud-in-debug evaluation failures. A typo'd binding must not fail silently
-// while developing — "let it crash in development" — while production keeps
-// the silent-undefined contract (a broken binding renders nothing, the page
-// survives). Once per expression: a broken binding re-evaluates every flush
-// and would otherwise firehose the console.
-// The affected-walk deliberately evaluates expressions in speculative
-// contexts (row templates against global state, conservative "can't prove
-// unaffected" probes) where throwing is expected and self-recovering. Those
-// are engine business — only RENDER-path failures are author business.
 let speculativeDepth = 0;
 export const beginSpeculative = () => {
   speculativeDepth++;
@@ -24,51 +15,38 @@ export const reportEvalError = (expression, element, error) => {
   console.error(`[vibe] Binding evaluation failed: @[${expression}]`, error, element ?? '');
 };
 
-// Phase colors - synced with index.css debug phase colors
-// Muted palette based on comment green (#6a9955)
 const PHASE_COLORS = {
-  Attached: 'oklch(0.55 0.02 250)', // slate (minimal saturation)
-  Manifested: 'oklch(0.55 0.02 250)', // slate (minimal saturation)
-  Observer: 'oklch(0.60 0.11 240)', // muted blue
-  Cleanup: 'oklch(0.55 0.02 250)', // slate (minimal saturation)
-  Parsed: 'oklch(0.62 0.12 50)', // muted orange
-  Hydrated: 'oklch(0.60 0.12 340)', // muted pink
-  Iterated: 'oklch(0.58 0.11 142)', // comment green (baseline)
-  Evaluated: 'oklch(0.58 0.11 142)', // comment green (baseline)
-  Fetched: 'oklch(0.59 0.12 307)', // muted purple
-  'Fet(ca)ched': 'oklch(0.59 0.12 307)', // same muted purple — a Fetch served from the runtime cache
-  Mutation: 'oklch(0.60 0.11 240)', // muted blue
-  Proxy: 'oklch(0.60 0.11 240)', // muted blue
-  Hyperspeed: 'oklch(0.60 0.11 180)', // muted cyan
+  Attached: 'oklch(0.55 0.02 250)',
+  Manifested: 'oklch(0.55 0.02 250)',
+  Observer: 'oklch(0.60 0.11 240)',
+  Cleanup: 'oklch(0.55 0.02 250)',
+  Parsed: 'oklch(0.62 0.12 50)',
+  Hydrated: 'oklch(0.60 0.12 340)',
+  Iterated: 'oklch(0.58 0.11 142)',
+  Evaluated: 'oklch(0.58 0.11 142)',
+  Fetched: 'oklch(0.59 0.12 307)',
+  'Fet(ca)ched': 'oklch(0.59 0.12 307)',
+  Mutation: 'oklch(0.60 0.11 240)',
+  Proxy: 'oklch(0.60 0.11 240)',
+  Hyperspeed: 'oklch(0.60 0.11 180)',
 };
 
-// Special colors for styled segments (Tailwind 500)
 const COLORS = {
-  green: 'oklch(0.769 0.227 141.41)', // green-500
-  red: 'oklch(0.637 0.237 27.33)', // red-500
-  yellow: 'oklch(0.809 0.177 94.36)', // yellow-500
-  pink: 'oklch(0.649 0.237 346.06)', // pink-500
-  slate: 'oklch(0.556 0.016 256.85)', // slate-500
-  commentGreen: 'oklch(0.58 0.11 142)', // muted green (same as Iterated/Evaluated)
+  green: 'oklch(0.769 0.227 141.41)',
+  red: 'oklch(0.637 0.237 27.33)',
+  yellow: 'oklch(0.809 0.177 94.36)',
+  pink: 'oklch(0.649 0.237 346.06)',
+  slate: 'oklch(0.556 0.016 256.85)',
+  commentGreen: 'oklch(0.58 0.11 142)',
 };
 
-/**
- * Debug logging helper for Vibe
- * Only logs when debug mode is enabled
- * @param {string} phase - The lifecycle phase (Attach, Parse, Hydrate, etc.)
- * @param {string|Array} message - The message to log (string or array of {text, colored: boolean, color: string})
- * @param {boolean} debug - Whether debug mode is enabled
- * @param {number} indent - Indentation level (0 = no indent, 1+ = nested operations)
- * @param {HTMLElement} element - Optional DOM element to log (becomes clickable in console)
- */
 export const debugLog = (phase, message, debug = false, indent = 0, element = null) => {
   if (!debug) return;
 
-  const phaseBracket = `[${phase}] `.padEnd(14, ' '); // Pad to 14 chars (longest is "[Fet(ca)ched] ")
+  const phaseBracket = `[${phase}] `.padEnd(14, ' ');
   const indentStr = indent > 0 ? '  '.repeat(indent) + '├─ ' : '';
   const phaseColor = PHASE_COLORS[phase] || 'oklch(0.55 0.02 250)';
 
-  // Handle array of styled segments
   if (Array.isArray(message)) {
     let formatStr = `%c${phaseBracket}%c${DEBUGGER_NAME}%c ${indentStr}`;
     const styles = [
@@ -79,7 +57,6 @@ export const debugLog = (phase, message, debug = false, indent = 0, element = nu
 
     message.forEach((segment) => {
       formatStr += '%c' + segment.text;
-      // Support both 'colored' (uses phase color) and 'color' (uses specific color)
       if (segment.color) {
         styles.push(`color: ${COLORS[segment.color] || segment.color}; font-weight: bold`);
       } else if (segment.colored) {
@@ -89,19 +66,17 @@ export const debugLog = (phase, message, debug = false, indent = 0, element = nu
       }
     });
 
-    // Add element if provided (makes it clickable in console)
     if (element) {
       console.info(formatStr, ...styles, element);
     } else {
       console.info(formatStr, ...styles);
     }
   } else {
-    // Simple string message
     if (element) {
       console.info(
         `%c${phaseBracket}%c${DEBUGGER_NAME}%c ${indentStr}${message}`,
         `color: ${phaseColor}; font-weight: bold`,
-        'color: oklch(0.70 0.01 250)', // light gray
+        'color: oklch(0.70 0.01 250)',
         'color: inherit',
         element,
       );
@@ -109,7 +84,7 @@ export const debugLog = (phase, message, debug = false, indent = 0, element = nu
       console.info(
         `%c${phaseBracket}%c${DEBUGGER_NAME}%c ${indentStr}${message}`,
         `color: ${phaseColor}; font-weight: bold`,
-        'color: oklch(0.70 0.01 250)', // light gray
+        'color: oklch(0.70 0.01 250)',
         'color: inherit',
       );
     }

package/runtime/dispatch.js

@@ -1,12 +1,3 @@
-// Subscription dispatch — subscribe mode's flush (phase 2 of auto-tracked
-// subscriptions). Where the walk answers "what changed?" by evaluating the
-// world, dispatch already knows: the flush's changed keys select their
-// subscribers from the reverse index, each re-evaluates in document order
-// through the SAME patch machinery the walk uses (hydrate's entry
-// dispatcher, mountBranch, updateIteration) and re-records its dependencies
-// while doing so. The walk itself retires to mount duty — first hydration,
-// processMutations, branch mounts — where it keeps registering fresh
-// subscribers.
 import hydrate from './hydrate.js';
 import { updateIteration } from './iterate.js';
 import { dispatchConditional } from './conditionals.js';
@@ -21,10 +12,6 @@ import {
 } from './utils.js';
 import { resolvePath } from './iteration-utils.js';
 
-// Rebuild a row subscriber's evaluation scope against the CURRENT globals.
-// The scope it last evaluated in is a per-flush merged snapshot (stale
-// globals); only its alias overlay is durable — item/index identity is owned
-// by the iteration's diff, which rebuilds rows whenever it changes.
 export const scopeFor = (sub, base) => {
   const overlay = sub.lastScope ? scopedOverlayOf(sub.lastScope) : null;
   if (!overlay) return base;
@@ -33,18 +20,10 @@ export const scopeFor = (sub, base) => {
   return merged;
 };
 
-// The plan's iteration shallow-compare, generalized from the walk's
-// CALL_EXPR fresh-ref fix: same length + same item refs as the rendered
-// instances ⇒ the rows are already right (outer-state bindings inside rows
-// are their own subscribers). Ref inequality — including a reassigned array
-// after in-place mutation — falls through to the full diff.
 export const rowsShallowEqual = (instances, newArray) =>
   instances.length === newArray.length &&
   instances.every((inst, i) => inst.item === newArray[i]);
 
-// A text node's interpolation group renders all-or-nothing (hydrate
-// re-interpolates the whole span), so one dirty binding expands to entries
-// for every binding in its group.
 export const entriesForText = (sub, scope) => {
   const e = sub.entry;
   const group = e.binding?._group ?? [e.binding];
@@ -59,8 +38,6 @@ export const entriesForText = (sub, scope) => {
   }));
 };
 
-// Document-order sort over subscriber anchors — the walk is document-ordered
-// and the corpus expects that stability. Bit 4 = FOLLOWING, 2 = PRECEDING.
 const docOrder = (a, b) => {
   const x = a.anchor;
   const y = b.anchor;
@@ -73,7 +50,6 @@ const docOrder = (a, b) => {
 
 const dispatchIteration = (sub, currentState, previousState, manifest) => {
   const node = sub.node;
-  // Not yet rendered — the mount path owns first render.
   if (!node.runtime.instances || !node.runtime.templateRemoved) return;
   const scope = scopeFor(sub, currentState);
   const parentEl = node.meta.startComment?.parentElement;
@@ -84,24 +60,12 @@ const dispatchIteration = (sub, currentState, previousState, manifest) => {
   endTracking();
   const instances = node.runtime.instances;
   const treeless = instances.length > 0 && !instances[0].tree;
-  // Treeless (batch/compiled) rows skip the shallow guard — their HTML may
-  // read non-array state; updateIteration's identical-HTML check absorbs
-  // no-ops there.
   if (!treeless && Array.isArray(newArray) && rowsShallowEqual(instances, newArray)) return;
   updateIteration(node, scope, scopeFor(sub, previousState), manifest);
 };
 
-// The subscribe-mode flush: document-ordered dirty set → patch. Binding
-// entries batch through single hydrate calls between structural ops so
-// relative order is preserved (and hydrate's same-element input chaining
-// keeps working).
 export default (dirty, currentState, previousState, manifest) => {
   const subs = [...dirty].sort(docOrder);
-  // Remount triggers (a wrapper's own src/key binding) hydrate FLUSH-WIDE
-  // FIRST: they register the outgoing roots every later entry's freeze-skip
-  // and parking depend on. The walk got this ordering from hydrate's
-  // per-call two-pass; dispatch splits into multiple hydrate calls at
-  // structural boundaries, so the hoist must span the whole flush.
   const triggers = [];
   const rest = [];
   for (const sub of subs) {
@@ -109,7 +73,6 @@ export default (dirty, currentState, previousState, manifest) => {
       unsubscribe(sub);
       continue;
     }
-    // Already-frozen subtree (a staging window spanning flushes): skip.
     if (activeOutgoingRoots.size && outgoingRootOf(sub.anchor)) continue;
     (sub.entry && isRemountTrigger(sub.entry) ? triggers : rest).push(sub);
   }
@@ -130,19 +93,10 @@ export default (dirty, currentState, previousState, manifest) => {
     }
   };
   for (const sub of rest) {
-    // Died mid-flush: an earlier structural op (iteration diff, branch flip)
-    // tore this subscriber's DOM down after beginFlush selected it. The lazy
-    // self-prune, at dispatch time.
     if (sub.anchor && !sub.anchor.isConnected) {
       unsubscribe(sub);
       continue;
     }
-    // Frozen mid-flush: a trigger above marked this subscriber's page
-    // outgoing — its DOM is replaced wholesale at the commit, so rendering
-    // it against post-navigation state is the mid-navigation collapse the
-    // freeze exists to prevent. Subscriptions stay; the swap's removal
-    // prunes them lazily via isConnected. (Ancestor styling bindings park
-    // inside hydrate — same seam the walk uses.)
     if (activeOutgoingRoots.size && outgoingRootOf(sub.anchor)) continue;
     if (sub.kind === 'conditional') {
       flushBatch();

package/runtime/hydrate.js

@@ -10,14 +10,10 @@ import {
   scopedOverlayOf,
 } from './utils.js';
 import { RawHtml } from './raw-html.js';
+import { markBoundValues } from './iteration-utils.js';
 import { beginTracking, endTracking } from './tracking.js';
 import { reportEvalError } from './debug.js';
 
-// Run one entry's evaluation inside a tracking window. The subscriber is
-// hosted on the walk's cached binding object (aff.binding) — stable per
-// binding across flushes, invalidated exactly when the binding cache
-// rebuilds. Entries without a binding host (hand-built lists from external
-// callers) evaluate untracked, exactly as before.
 const tracked = (aff, effectiveState, fn) => {
   const m = aff.binding;
   if (!m) return fn();
@@ -25,8 +21,8 @@ const tracked = (aff, effectiveState, fn) => {
     kind: aff.type ?? 'text',
     anchor: aff.textNode ?? aff.element,
   });
-  sub.entry = aff; // latest entry shape — dispatch rebuilds scope at fire time
-  sub.lastScope = effectiveState; // overlay source for dispatch-time rescoping
+  sub.entry = aff;
+  sub.lastScope = effectiveState;
   beginTracking(sub, overlayKeysOf(effectiveState));
   try {
     return fn();
@@ -38,34 +34,25 @@ const tracked = (aff, effectiveState, fn) => {
 const applyNameBinding = (aff, effectiveState) => {
   const { nameBinding, matchInner, element } = aff;
   try {
-    // HTML lowercases attribute names, so we need case-insensitive lookup.
-    // Try exact match first, then walk the path case-insensitively if the
-    // exact lookup returned nothing — this recovers camelCase property
-    // names in dotted paths like `<icon @[fx.convertsIcon]>` (arrives at
-    // runtime as `@[fx.convertsicon]`).
     let attrName = evalInScope(matchInner, effectiveState, element);
 
     if (!attrName) {
       attrName = resolveCaseInsensitivePath(effectiveState, matchInner);
     }
 
-    // Track multiple name bindings per element (need a map of binding -> evaluated attr)
     if (!element._vibeNameBindings) {
       element._vibeNameBindings = new Map();
     }
 
-    // Remove the old evaluated attribute for this specific binding
     const oldAttrName = element._vibeNameBindings.get(nameBinding);
     if (oldAttrName) {
       element.removeAttribute(oldAttrName);
     }
 
-    // Remove the binding attribute itself
     if (element.hasAttribute(nameBinding)) {
       element.removeAttribute(nameBinding);
     }
 
-    // Set the new attribute (empty value for boolean-like attributes)
     if (attrName) {
       element.setAttribute(attrName, '');
       element._vibeNameBindings.set(nameBinding, attrName);
@@ -73,9 +60,6 @@ const applyNameBinding = (aff, effectiveState) => {
       element._vibeNameBindings.delete(nameBinding);
     }
 
-    // A binding relocated into `data-vibe-namebind` (clone path) has served its
-    // transport purpose once the real attribute is set — drop it so the rendered
-    // DOM matches the batch path, which never emits it.
     if (element.hasAttribute('data-vibe-namebind')) {
       element.removeAttribute('data-vibe-namebind');
     }
@@ -87,10 +71,8 @@ const applyNameBinding = (aff, effectiveState) => {
 const applyAttributeBinding = (aff, effectiveState) => {
   const { attrName, attrValue, element } = aff;
   try {
-    // Check if this is a pure binding (e.g., value="@[inputValue]")
     const isPureBinding = attrValue.match(PURE_BINDING_REGEX);
     const isDomProperty = DOM_PROPERTIES.includes(attrName);
-    // Value attrs keep their string value; everything else is boolean-like (removed when falsy)
     const isValueAttr =
       VALUE_ATTRS.includes(attrName) ||
       attrName.startsWith('data-') ||
@@ -98,9 +80,6 @@ const applyAttributeBinding = (aff, effectiveState) => {
       attrName.startsWith('on');
 
     if (isDomProperty && isPureBinding) {
-      // For DOM properties (value, checked, selected), set BOTH property AND attribute
-      // Property: Fast runtime updates, what the user sees
-      // Attribute: Truthful DOM representation, enables compiler snapshots via outerHTML
       const expr = isPureBinding[1];
       const value = evalInScope(expr, effectiveState, element);
       if (element[attrName] !== value) element[attrName] = value;
@@ -110,19 +89,11 @@ const applyAttributeBinding = (aff, effectiveState) => {
           if (element.getAttribute(attrName) !== str) element.setAttribute(attrName, str);
         }
       } else if (value) {
-        // checked/selected are boolean — the truthful attribute form is
-        // presence (empty) when truthy, absence when falsy. Stringifying
-        // would leave checked="false", which is "checked" to CSS and HTML.
         if (element.getAttribute(attrName) !== '') element.setAttribute(attrName, '');
       } else if (element.hasAttribute(attrName)) {
         element.removeAttribute(attrName);
       }
     } else if (!isValueAttr && isPureBinding) {
-      // Boolean-like attributes: add or remove based on truthiness.
-      // Compare both presence AND value — initial hydration starts with
-      // the raw `@[...]` binding text as the attribute value, so
-      // `hasAttribute` alone isn't enough to know the canonical state is
-      // already set.
       const expr = isPureBinding[1];
       const value = evalInScope(expr, effectiveState, element);
       if (value) {
@@ -133,7 +104,6 @@ const applyAttributeBinding = (aff, effectiveState) => {
         element.removeAttribute(attrName);
       }
     } else {
-      // Value attribute - replace bindings with values
       const newValue = attrValue.replace(BINDING_REGEX, (_, expr) => {
         return evalInScope(expr, effectiveState, element);
       });
@@ -141,21 +111,13 @@ const applyAttributeBinding = (aff, effectiveState) => {
         element.setAttribute(attrName, newValue);
       }
     }
+    (element._vibeBoundAttrs ??= new Set()).add(attrName);
   } catch (e) {
     reportEvalError(attrValue, element, e);
   }
 };
 
 export default (affected, state, manifest = {}, oldState = {}) => {
-  // Wrappers that entered a reactive-src remount DURING this pass (the src/key
-  // handlers below). affected() collected this list before the outgoing flag
-  // existed, so the outgoing subtree's entries are still in it — and this is
-  // exactly the flush where route state flips. Applying them would paint the
-  // outgoing page against the incoming route for the whole fetch+mount window
-  // (the mid-navigation CSS collapse). Tree-walk order guarantees the
-  // wrapper's own src/key entries precede its subtree's entries, so skipping
-  // by ancestry here is airtight. Null until a remount actually happens —
-  // zero cost on ordinary flushes.
   let outgoingRoots = null;
   const underOutgoingRoot = (aff) => {
     if (!outgoingRoots) return false;
@@ -168,12 +130,6 @@ export default (affected, state, manifest = {}, oldState = {}) => {
     return false;
   };
 
-  // Two passes: wrapper src/key entries (remount triggers) first, everything
-  // else second. A remount marks its wrapper outgoing and starts staging —
-  // the freeze skip below and the ancestor-binding parking both depend on
-  // that registration, and tree-walk order would otherwise process an
-  // ancestor's bindings (the `<page @[page.name]>` styling context) before
-  // the outlet entry that begins the staging they must park against.
   const remountTriggers = [];
   const ordinary = [];
   for (const aff of affected) {
@@ -183,31 +139,14 @@ export default (affected, state, manifest = {}, oldState = {}) => {
   const processEntry = (aff) => {
     if (underOutgoingRoot(aff)) return;
 
-    // Torn down mid-pass: the entry's target was connected when the walk
-    // collected it but left the document before this entry processed — an
-    // earlier entry's teardown (an iteration emptying, a branch flip)
-    // removed it. Same ordering hole as the outgoing-remount skip above.
-    // Processing it would write to dead DOM and re-register a subscriber
-    // the teardown just pruned, pinning the removed subtree. Entries that
-    // were ALREADY detached at collection (initializeBlock hydrating a
-    // fresh row inside its parse container) pass through untouched.
     if (aff.wasConnected) {
       const target =
         aff.textNode ?? aff.element ?? aff.node?.meta?.startComment;
       if (target && !target.isConnected) return;
     }
 
-    // Use scoped state if provided (from iteration instances)
     const effectiveState = aff.scopedState || state;
 
-    // Handle iteration updates. Same scoped-pair contract as conditionals
-    // below: a NESTED iteration re-renders its rows against the enclosing
-    // row's scope, so bindings reading the outer alias (`@[ability.healing]`
-    // inside `<!-- each ability.chainDividers as d -->`) still resolve. The
-    // overlay doubles as the nested parentScope — exactly what the initial
-    // render passes (renderAllIterations with `{...parentScope, ...localVars}`).
-    // Top-level iterations carry the cycle's state and no overlay, so they
-    // keep resolving against globals.
     if (aff.type === 'iteration') {
       const iterNewState = aff.scopedState || state;
       const iterOldState = aff.oldScopedState || oldState;
@@ -221,11 +160,6 @@ export default (affected, state, manifest = {}, oldState = {}) => {
       return;
     }
 
-    // Handle conditional updates. Use the scoped pair affected attached when
-    // the conditional sits inside an iteration row — that pair has the row's
-    // loop alias overlaid on current globals, so the branch eval re-runs in
-    // the same scope the change was detected against. Top-level conditionals
-    // pass through with the cycle's state (affected attaches it verbatim there).
     if (aff.type === 'conditional') {
       const condNewState = aff.scopedState || state;
       const condOldState = aff.oldScopedState || oldState;
@@ -233,7 +167,6 @@ export default (affected, state, manifest = {}, oldState = {}) => {
       return;
     }
 
-    // Handle name bindings (e.g., <icon @[section.icon]>)
     if (aff.type === 'nameBinding') {
       const parkRoot = parkRootFor(aff.element);
       if (parkRoot) {
@@ -246,23 +179,9 @@ export default (affected, state, manifest = {}, oldState = {}) => {
       return;
     }
 
-    // Handle attribute updates
     if (aff.type === 'attribute') {
       const { attrName, attrValue, element } = aff;
       try {
-        // Reactive component src (`<component src="@[page.src]">`): resolve
-        // the binding and (re)mount through component.js. The binding rides
-        // along so finalize can stamp it onto the replacement wrapper
-        // (data-vibe-src) — the tree node holding it is pruned when the
-        // wrapper swap's removal mutation lands, and the fresh wrapper's
-        // reparse rebuilds the knowledge from that attribute. A state change
-        // landing inside the swap window still resolves through the
-        // replacement chain.
-        // Keyed component (`<component src="@[page.src]" key="@[page.path]">`):
-        // a key change is a declared identity change — remount the mounted
-        // component even when the src is unchanged (param→param navigation on
-        // the same route). The first resolution just records the initial key;
-        // the mount itself is owned by the normal component pass.
         if (attrName === 'key' && isComponentWrapper(element)) {
           const live = liveComponentWrapper(element);
           const newKey = tracked(aff, effectiveState, () =>
@@ -290,11 +209,6 @@ export default (affected, state, manifest = {}, oldState = {}) => {
             remountComponent(live, newSrc);
             if (live._vibeOutgoing) (outgoingRoots ??= []).push(live);
           } else if (live.hasAttribute('src')) {
-            // Unresolved src mounts nothing (a no-match deep link leaves
-            // $.page.src unset): move the binding onto data-vibe-src — the
-            // established transport parse.js already reads — and drop the
-            // fetchable src, so component processing and cleanup treat the
-            // outlet as settled instead of fetching a stringified binding.
             live.setAttribute('data-vibe-src', attrValue);
             live.removeAttribute('src');
           }
@@ -315,24 +229,13 @@ export default (affected, state, manifest = {}, oldState = {}) => {
       return;
     }
 
-    // Handle regular element updates
     const { matches, matchOuter, matchInner, input, element, textNode } = aff;
 
-    // This prevents undefined store properties to throw an error
     try {
-      // Evaluate the expression with state as context
       const evaluated = tracked(aff, effectiveState, () =>
         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)) {
@@ -340,24 +243,14 @@ export default (affected, state, manifest = {}, oldState = {}) => {
         if (element._vibeRawHtmlValue !== html) {
           element.innerHTML = html;
           for (const child of element.children) managedNodes.add(child);
+          markBoundValues(element, html);
           element._vibeRawHtmlValue = html;
         }
         element._vibeRawHtml = true;
-        // The injection consumed the entry's original text node. Re-anchor
-        // the subscriber on the ELEMENT (which survives every injection) —
-        // otherwise the dispatch engine prunes it as dead after the first
-        // render and the binding silently stops re-rendering.
         if (aff.binding?._sub) aff.binding._sub.anchor = element;
         return;
       }
 
-      // Function replacer: a string replacement would run GetSubstitution on
-      // the VALUE — `$$` collapses, `$&` re-inserts the binding text into the
-      // DOM (which the settle gates then read as an unhydrated binding).
-      // No trim: the text node's source whitespace is significant — a
-      // prettier line-wrap after an inline end tag (`</strong>\n  remain`)
-      // is that word's boundary, and the compiled SPA shell stamps values
-      // untrimmed, so trimming here glued words and diverged from the shell.
       const toReplace = input.replaceAll(matchOuter, () => evaluated);
 
       affected.forEach((innerAff) => {
@@ -366,22 +259,7 @@ export default (affected, state, manifest = {}, oldState = {}) => {
         }
       });
 
-      // If we have a direct reference to the text node, update it specifically
-      // This prevents wiping child elements when parent has both text and element children.
-      // Skip the write when the value is already correct — the browser would repaint
-      // (and any in-flight CSS transition on the row would jitter) even when no value
-      // actually changed. Reactivity coverage is unchanged: the only state changes that
-      // hit this path either produce a new value (still applied) or don't (now no-op).
-      // Skip the write when the value is already correct — the browser would
-      // repaint (and any in-flight CSS transition would jitter) even when no
-      // value actually changed. Reactivity coverage is unchanged: state changes
-      // that produce a new value still apply; state changes that don't are now
-      // proper no-ops at the DOM layer.
       if (element._vibeRawHtml && !(textNode && textNode.isConnected)) {
-        // unsafe → escaped transition: an earlier injection consumed the
-        // entry's text node, so the element itself takes the escaped text —
-        // and the entry ADOPTS the fresh node, so the NEXT escaped update
-        // writes live DOM instead of the consumed original.
         element.textContent = toReplace;
         element._vibeRawHtml = false;
         element._vibeRawHtmlValue = undefined;
@@ -389,10 +267,13 @@ export default (affected, state, manifest = {}, oldState = {}) => {
           if (!element.firstChild) element.appendChild(document.createTextNode(''));
           aff.textNode = element.firstChild;
         }
+        if (element.firstChild) element.firstChild._vibeBoundValue = true;
       } else if (textNode && textNode.nodeType === 3) {
         if (textNode.textContent !== toReplace) textNode.textContent = toReplace;
-      } else if (element.textContent !== toReplace) {
-        element.textContent = toReplace;
+        textNode._vibeBoundValue = true;
+      } else {
+        if (element.textContent !== toReplace) element.textContent = toReplace;
+        if (element.firstChild?.nodeType === 3) element.firstChild._vibeBoundValue = true;
       }
     } catch (e) {
       reportEvalError(matchInner ?? input, element, e);