@ape-egg/vibe 1.9.9 → 2.0.5

package/runtime/cleanup.js

@@ -1,5 +1,10 @@
 import { debugLog } from './debug.js';
-import { PHASE_READY, FOUC_CLASS_OR_ATTR, DEHYDRATE_CLASS_OR_ATTR } from './constants.js';
+import {
+  PHASE_READY,
+  FOUC_CLASS_OR_ATTR,
+  DEHYDRATE_CLASS_OR_ATTR,
+  NON_REACTIVE_ELEMENTS,
+} from './constants.js';
 
 /**
  * Check if all Vibe processing is complete and cleanup can run
@@ -14,12 +19,16 @@ export const shouldCleanup = (rootElement) => {
     return false;
   }
 
-  // 2. Check for unhydrated bindings (literal @[...] in DOM, excluding dehydrated elements)
+  // 2. Check for unhydrated bindings (literal @[...] in DOM, excluding dehydrated
+  // and non-reactive elements — hydrate never touches those, so a literal inside
+  // them is final content, not pending work)
   const walker = document.createTreeWalker(rootElement, NodeFilter.SHOW_TEXT, {
     acceptNode(node) {
-      // Check if this text node is inside a dehydrated element
       let parent = node.parentElement;
       while (parent && parent !== rootElement) {
+        if (NON_REACTIVE_ELEMENTS.includes(parent.nodeName)) {
+          return NodeFilter.FILTER_REJECT;
+        }
         if (parent.hasAttribute(DEHYDRATE_CLASS_OR_ATTR) || parent.classList?.contains(DEHYDRATE_CLASS_OR_ATTR)) {
           return NodeFilter.FILTER_REJECT; // Skip dehydrated content
         }

package/runtime/component.js

@@ -98,9 +98,131 @@ export const collectComponentIds = (node, into = new Set()) => {
   return into;
 };
 
+// Prepare a component <script> body for execution through the injected
+// component() path: strip the `import component from '...'` line (the
+// function is passed in as a parameter) and rewrite any remaining static
+// imports to awaited dynamic imports. Shared by the fetch path
+// (processSingle) and the compiled-page path (executeCompiledComponentScripts).
+const transformScriptContent = (rawContent) => {
+  // Strip `import component from '...'` — Vibe injects the contextual
+  // component() function as a parameter (it needs access to the temp DOM)
+  let content = rawContent.replace(
+    /import\s+component\s+from\s+['"][^'"]+['"];?\s*/g,
+    ''
+  );
+
+  // Check for remaining imports that need rewriting
+  const hasImports = /import\s/.test(content);
+
+  if (hasImports) {
+    // Rewrite remaining imports to dynamic await import()
+    // Order matters: combined → default → named → namespace → side-effect (most specific first)
+    content = content.replace(
+      /import\s+(\w+)\s*,\s*\{([^}]+)\}\s+from\s+(['"][^'"]+['"])\s*;?/g,
+      'const __m_$1 = await import($3); const $1 = __m_$1.default; const {$2} = __m_$1;'
+    );
+    content = content.replace(
+      /import\s+(\w+)\s+from\s+(['"][^'"]+['"])\s*;?/g,
+      'const $1 = (await import($2)).default;'
+    );
+    content = content.replace(
+      /import\s+\{([^}]+)\}\s+from\s+(['"][^'"]+['"])\s*;?/g,
+      'const {$1} = await import($2);'
+    );
+    content = content.replace(
+      /import\s+\*\s+as\s+(\w+)\s+from\s+(['"][^'"]+['"])\s*;?/g,
+      'const $1 = await import($2);'
+    );
+    content = content.replace(
+      /import\s+(['"][^'"]+['"])\s*;?/g,
+      'await import($1);'
+    );
+  }
+
+  return { content, hasImports };
+};
+
+// Compiled pages inline `<component src>` content at build time, and the
+// compiler neuters each component script to type="vibe-module" so the browser
+// does NOT execute it as a native page module — native timing is wrong
+// (pre-boot: `$` is the placeholder, state registered after boot never merges
+// into the live proxy). This executes those scripts through the same
+// injected-component() path processSingle uses for fetched scripts: one
+// pipeline, identical semantics in both modes. Scripts stay in the DOM
+// (inert) so the manifest's childNodes indices keep matching the page.
+//
+// Returns a Promise when any script is async (has imports) — the caller
+// gates `ready` on it — or null when everything ran synchronously.
+export const executeCompiledComponentScripts = () => {
+  const scripts = document.querySelectorAll('script[type="vibe-module"]');
+  if (!scripts.length) return null;
+
+  // Build-time tagging already assigned _cN ids to wrappers; advance the
+  // runtime counter past them so freshly generated ids never collide.
+  document.querySelectorAll('[data-vibe-component-id]').forEach((el) => {
+    const m = el.getAttribute('data-vibe-component-id')?.match(/^_c(\d+)$/);
+    if (m) componentCounter = Math.max(componentCounter, Number(m[1]) + 1);
+  });
+
+  const asyncTasks = [];
+  const claimed = new Set();
+
+  for (const script of scripts) {
+    // Parity with the fetch path: dehydrated components never execute
+    if (script.closest(`[${DEHYDRATE_CLASS_OR_ATTR}], .${DEHYDRATE_CLASS_OR_ATTR}`)) continue;
+
+    const rawContent = script.textContent?.trim() || '';
+    if (!rawContent) continue;
+
+    // The build tagged each component wrapper with its deterministic id —
+    // the same id the stamped bindings reference. First script in a wrapper
+    // claims it; additional scripts get fresh ids (mirrors the per-script
+    // ids of the fetch path).
+    const wrapper = script.closest('[data-vibe-component-id]');
+    let componentId = wrapper?.getAttribute('data-vibe-component-id');
+    if (!componentId || claimed.has(componentId)) componentId = generateComponentId();
+    claimed.add(componentId);
+
+    const { content, hasImports } = transformScriptContent(rawContent);
+
+    const componentFn = (state) => {
+      if (!window.__vibeComponents) window.__vibeComponents = {};
+      window.__vibeComponents[componentId] = state;
+      if (window.$) window.$[componentId] = state;
+      return componentId;
+    };
+
+    runComponentCleanups(componentId);
+    const scopedDollar = createScopedDollar(componentId);
+
+    try {
+      if (hasImports) {
+        const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor;
+        asyncTasks.push(new AsyncFunction('$', 'component', content)(scopedDollar, componentFn));
+      } else {
+        new Function('$', 'component', content)(scopedDollar, componentFn);
+      }
+    } catch (e) {
+      console.warn('[vibe] Failed to execute component script:', e);
+    }
+  }
+
+  return asyncTasks.length ? Promise.all(asyncTasks) : null;
+};
+
 // Track pending fetches to cancel them if element is removed
 const pendingFetches = new WeakMap(); // element → AbortController
 
+// Component HTML is parsed (and prop/slot-transformed) while its @[...]
+// bindings are still literal text. Parsing in the live document lets the
+// browser act on those literals mid-parse — Chrome logs "The specified value
+// ... cannot be parsed" for a typed input's value="@[...]". An inert document
+// (no browsing context) parses identical DOM without a console to complain to;
+// nodes are auto-adopted into the live document on insertion.
+let inertDocument;
+const createDetached = (tagName) =>
+  (inertDocument ??= document.implementation.createHTMLDocument('')).createElement(tagName);
+
 // Cancel a pending fetch for a component element
 export const abortComponentFetch = (element) => {
   const controller = pendingFetches.get(element);
@@ -273,7 +395,7 @@ const renderPropsAndSlot = (temp, props, slotHtml) => {
 // or trigger a full re-mount (new componentIds).
 export const renderComponentTemplate = (rawHtml, props = {}, slotHtml = '', options = {}) => {
   const { componentIds = [] } = options;
-  const temp = document.createElement('div');
+  const temp = createDetached('div');
   temp.innerHTML = rawHtml;
 
   const idsToReuse = [...componentIds];
@@ -318,7 +440,7 @@ const processSingle = (el, debug) => {
     .then((r) => r.text())
     .then((html) => {
       // Parse HTML in temporary container to process component scripts
-      const temp = document.createElement('div');
+      const temp = createDetached('div');
       temp.innerHTML = html;
 
       // Process any <script type="module"> elements
@@ -343,43 +465,10 @@ const processSingle = (el, debug) => {
       let firstComponentId = null;
 
       for (const script of moduleScripts) {
-        let scriptContent = script.textContent?.trim() || '';
-        if (!scriptContent) continue;
-
-        // Strip `import component from '...'` — Vibe injects the contextual
-        // component() function as a parameter (it needs access to the temp DOM)
-        scriptContent = scriptContent.replace(
-          /import\s+component\s+from\s+['"][^'"]+['"];?\s*/g,
-          ''
-        );
-
-        // Check for remaining imports that need rewriting
-        const hasImports = /import\s/.test(scriptContent);
-
-        if (hasImports) {
-          // Rewrite remaining imports to dynamic await import()
-          // Order matters: combined → default → named → namespace → side-effect (most specific first)
-          scriptContent = scriptContent.replace(
-            /import\s+(\w+)\s*,\s*\{([^}]+)\}\s+from\s+(['"][^'"]+['"])\s*;?/g,
-            'const __m_$1 = await import($3); const $1 = __m_$1.default; const {$2} = __m_$1;'
-          );
-          scriptContent = scriptContent.replace(
-            /import\s+(\w+)\s+from\s+(['"][^'"]+['"])\s*;?/g,
-            'const $1 = (await import($2)).default;'
-          );
-          scriptContent = scriptContent.replace(
-            /import\s+\{([^}]+)\}\s+from\s+(['"][^'"]+['"])\s*;?/g,
-            'const {$1} = await import($2);'
-          );
-          scriptContent = scriptContent.replace(
-            /import\s+\*\s+as\s+(\w+)\s+from\s+(['"][^'"]+['"])\s*;?/g,
-            'const $1 = await import($2);'
-          );
-          scriptContent = scriptContent.replace(
-            /import\s+(['"][^'"]+['"])\s*;?/g,
-            'await import($1);'
-          );
-        }
+        const rawContent = script.textContent?.trim() || '';
+        if (!rawContent) continue;
+
+        const { content: scriptContent, hasImports } = transformScriptContent(rawContent);
 
         // Reuse component ID from HMR if available, otherwise generate new
         const reuseIds = el._vibeReuseComponentIds;
@@ -454,9 +543,7 @@ const processSingle = (el, debug) => {
         if (el.parentNode) {
           // Create clean wrapper element (preserve tag type: component or div.component)
           const newWrapper =
-            el.tagName === 'DIV'
-              ? document.createElement('div')
-              : document.createElement('component');
+            el.tagName === 'DIV' ? createDetached('div') : createDetached('component');
 
           if (el.tagName === 'DIV') {
             newWrapper.className = 'component';
@@ -476,7 +563,7 @@ const processSingle = (el, debug) => {
           // detached `<component src>` to the new wrapper. The detached element
           // would otherwise trigger releaseOrphanedIterationProps and free the
           // registry slots that the inlined template's bindings still reference,
-          // causing every `@[window.__vibeIterProps._pN]` to resolve to undefined
+          // causing every `@[window.__vibeiterprops._pN]` to resolve to undefined
           // on the next hydrate.
           if (el._vibeIterPropIds) {
             newWrapper._vibeIterPropIds = el._vibeIterPropIds;

package/runtime/conditionals.js

@@ -263,18 +263,25 @@ const unmountBranch = (node, manifest) => {
     }
   }
 
-  // Collect componentIds from the subtree BEFORE detaching so we can check
+  // The conditional owns everything between its comments. That's more than
+  // activeInstance.nodes: nested directives at the branch's top level (each
+  // rows, deeper if branches) insert their rendered output between their own
+  // comments after the branch mounts, so it never appears in the original
+  // clonedNodes list. Sweep the live range (same pattern as iteration
+  // teardown), collecting componentIds BEFORE detaching so we can check
   // after removal whether any live DOM still holds them.
+  const { startComment, endComment } = node.meta;
   const ids = new Set();
-  activeInstance.nodes.forEach((domNode) => collectComponentIds(domNode, ids));
-
-  // Remove all nodes from DOM and deregister from branch registry
-  activeInstance.nodes.forEach((domNode) => {
-    branchNodeRegistry.delete(domNode);
-    if (domNode.parentNode) {
-      domNode.parentNode.removeChild(domNode);
+  let current = startComment.nextSibling;
+  while (current && current !== endComment) {
+    const next = current.nextSibling;
+    collectComponentIds(current, ids);
+    branchNodeRegistry.delete(current);
+    if (current.parentNode) {
+      current.parentNode.removeChild(current);
     }
-  });
+    current = next;
+  }
 
   // CLEANUP OF CURRENT STATE
   releaseOrphanedComponentState(ids);

package/runtime/hydrate.js

@@ -92,9 +92,18 @@ export default (affected, state, manifest = {}, oldState = {}) => {
           const expr = isPureBinding[1];
           const value = evalInScope(expr, effectiveState, element);
           if (element[attrName] !== value) element[attrName] = value;
-          if (value !== undefined && value !== null) {
-            const str = String(value);
-            if (element.getAttribute(attrName) !== str) element.setAttribute(attrName, str);
+          if (attrName === 'value') {
+            if (value !== undefined && value !== null) {
+              const str = String(value);
+              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.

package/runtime/index.js

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

package/runtime/iterate.js

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