@ape-egg/vibe 2.0.0 → 2.0.5

package/compiler/src/compiler/manifest_builder.rs

@@ -395,19 +395,15 @@ impl ManifestBuilder {
             }
         }
 
-        // Extract template HTML between start and end
+        // Extract template HTML between start and end — VERBATIM, including
+        // whitespace-only text nodes. The manifest's child keys are childNodes
+        // indices computed on the pre-stamp DOM; restoration re-inserts this
+        // template, and only an exact node-count round-trip keeps those
+        // indices valid for every sibling that follows the restored region.
         if let Some(end) = end_idx {
             let template_nodes: Vec<_> = siblings.iter()
                 .skip(start_idx + 1)
                 .take(end - start_idx - 1)
-                .filter(|node| {
-                    // Skip whitespace-only text nodes
-                    if let NodeData::Text { contents } = &node.data {
-                        !contents.borrow().trim().is_empty()
-                    } else {
-                        true // Keep all non-text nodes
-                    }
-                })
                 .collect();
 
             return self.serialize_nodes(&template_nodes);

package/compiler/src/parser/html.rs

@@ -195,7 +195,7 @@ impl HtmlParser {
                 let closing_pattern = format!(r"</{}>", regex::escape(tag_name));
 
                 // Find all occurrences
-                let mut matches: Vec<(usize, usize, String, HashMap<String, String>)> = Vec::new();
+                let mut matches: Vec<(usize, usize, String, Vec<(String, String)>)> = Vec::new();
 
                 // Find opening tags
                 for cap in tag_re.find_iter(&result) {
@@ -228,14 +228,9 @@ impl HtmlParser {
                 // Replace from end to start to maintain indices
                 matches.reverse();
                 for (start, end, slot_content, props) in matches {
-                    let mut replacement = element.content.clone();
-
-                    // Replace props: for each prop like headline="@[pageTitle]",
-                    // replace @[headline] in content with @[pageTitle]
-                    for (prop_name, prop_value) in props {
-                        let prop_binding = format!("@[{}]", prop_name);
-                        replacement = replacement.replace(&prop_binding, &prop_value);
-                    }
+                    // Substitute props with full runtime parity (bindings,
+                    // expressions, directive comments, event handlers)
+                    let mut replacement = substitute_props(&element.content, &props);
 
                     // Replace <slot> tags — wrap children in <slot> boundary, or remove if empty
                     let slot_wrapped = if slot_content.trim().is_empty() {
@@ -360,7 +355,10 @@ impl HtmlParser {
             let slot_content = result[open_end..close_start].to_string();
 
             let attrs_str = format!("{} {}", attrs_before, attrs_after);
-            let props = Self::parse_props(&attrs_str);
+            let props: Vec<(String, String)> = Self::parse_props(&attrs_str)
+                .into_iter()
+                .filter(|(n, _)| n != "src" && n != "class")
+                .collect();
 
             Some((open_tag.start(), close_end, props, slot_content))
         }).collect();
@@ -370,12 +368,8 @@ impl HtmlParser {
         sorted.sort_by(|a, b| b.0.cmp(&a.0));
 
         for (start, end, props, slot_content) in &sorted {
-            let mut replacement = component_content.to_string();
-
-            for (prop_name, prop_value) in props {
-                let prop_binding = format!("@[{}]", prop_name);
-                replacement = replacement.replace(&prop_binding, prop_value);
-            }
+            let mut replacement = substitute_props(component_content, props);
+            replacement = neuter_component_scripts(&replacement);
 
             let slot_wrapped = if slot_content.trim().is_empty() { String::new() } else { format!("<slot>{}</slot>", slot_content) };
             replacement = replacement.replace("<slot></slot>", &slot_wrapped);
@@ -425,7 +419,10 @@ impl HtmlParser {
                 let slot_content = result[open_end..close_start].to_string();
 
                 let attrs_str = format!("{} {}", attrs_before, attrs_after);
-                let props = Self::parse_props(&attrs_str);
+                let props: Vec<(String, String)> = Self::parse_props(&attrs_str)
+                    .into_iter()
+                    .filter(|(n, _)| n != "src" && n != "class")
+                    .collect();
 
                 Some((open_tag.start(), close_end, src.to_string(), props, slot_content))
             }).collect();
@@ -447,11 +444,9 @@ impl HtmlParser {
                     }
                 };
 
-                if let Some(mut replacement) = external_cache.get(&normalized_src).cloned() {
-                    for (prop_name, prop_value) in &props {
-                        let prop_binding = format!("@[{}]", prop_name);
-                        replacement = replacement.replace(&prop_binding, prop_value);
-                    }
+                if let Some(template) = external_cache.get(&normalized_src) {
+                    let mut replacement = substitute_props(template, &props);
+                    replacement = neuter_component_scripts(&replacement);
 
                     let slot_wrapped = if slot_content.trim().is_empty() { String::new() } else { format!("<slot>{}</slot>", slot_content) };
                     replacement = replacement.replace("<slot></slot>", &slot_wrapped);
@@ -473,24 +468,192 @@ impl HtmlParser {
         result
     }
 
-    /// Parse component props from attributes string
-    /// Example: ` headline="@[pageTitle]" theme="dark"` -> {"headline": "@[pageTitle]", "theme": "dark"}
-    fn parse_props(attrs_str: &str) -> HashMap<String, String> {
-        let mut props = HashMap::new();
+    /// Parse component props from attributes string, in source order.
+    /// Supports valued (`headline="@[pageTitle]"`) and bare boolean
+    /// (`dndDisabled`) attributes — the runtime receives bare attributes from
+    /// the DOM with an empty-string value, so they're captured the same here.
+    fn parse_props(attrs_str: &str) -> Vec<(String, String)> {
+        let mut props = Vec::new();
 
-        // Match attribute="value" pairs
-        let attr_re = regex::Regex::new(r#"(\w+)="([^"]*)""#).unwrap();
+        let attr_re = regex::Regex::new(r#"([\w-]+)(?:="([^"]*)")?"#).unwrap();
 
         for cap in attr_re.captures_iter(attrs_str) {
-            if let (Some(name), Some(value)) = (cap.get(1), cap.get(2)) {
-                props.insert(name.as_str().to_string(), value.as_str().to_string());
-            }
+            let name = cap.get(1).unwrap().as_str().to_string();
+            let value = cap.get(2).map(|m| m.as_str().to_string()).unwrap_or_default();
+            props.push((name, value));
         }
 
         props
     }
 }
 
+/// Neuter component scripts inlined from `<component src>` templates:
+/// `<script type="module">` becomes `<script type="vibe-module">` so the
+/// browser does NOT execute it as a native page module (wrong timing —
+/// pre-boot, placeholder `$`, no live state merge). The runtime executes
+/// vibe-module scripts through the same injected-component() path it uses
+/// for fetched component scripts, giving compiled and runtime pages one
+/// script-execution pipeline with identical semantics. Runs before slot
+/// inlining so caller-authored slot scripts stay native.
+fn neuter_component_scripts(html: &str) -> String {
+    html.replace("<script type=\"module\"", "<script type=\"vibe-module\"")
+}
+
+fn is_ident_byte(b: u8) -> bool {
+    b.is_ascii_alphanumeric() || b == b'_' || b == b'$'
+}
+
+/// Case-insensitive free-identifier substitution, mirroring the runtime's
+/// renderPropsAndSlot idRegex: the name must not be preceded by an identifier
+/// character or `.` (property access) and not followed by an identifier
+/// character. Case-insensitive because HTML lowercases attribute names while
+/// component templates reference the author's camelCase identifiers.
+fn substitute_identifier(expr: &str, name: &str, replacement: &str) -> String {
+    let bytes = expr.as_bytes();
+    let nb = name.as_bytes();
+    let nlen = nb.len();
+    if nlen == 0 {
+        return expr.to_string();
+    }
+    let mut out: Vec<u8> = Vec::with_capacity(bytes.len());
+    let mut i = 0;
+    while i < bytes.len() {
+        if i + nlen <= bytes.len()
+            && bytes[i..i + nlen].eq_ignore_ascii_case(nb)
+            && (i == 0 || (!is_ident_byte(bytes[i - 1]) && bytes[i - 1] != b'.'))
+            && (i + nlen == bytes.len() || !is_ident_byte(bytes[i + nlen]))
+        {
+            out.extend_from_slice(replacement.as_bytes());
+            i += nlen;
+        } else {
+            out.push(bytes[i]);
+            i += 1;
+        }
+    }
+    String::from_utf8(out).unwrap()
+}
+
+/// `$.propName` rewrites inside event-handler bodies (the runtime's stateRegex
+/// pass): for a binding prop `value="@[email]"`, `$.value = this.value`
+/// becomes `$.email = this.value` — DOM property reads (`this.value`) stay.
+fn substitute_state_ref(body: &str, name: &str, replacement: &str) -> String {
+    let bytes = body.as_bytes();
+    let nb = name.as_bytes();
+    let nlen = nb.len();
+    if nlen == 0 {
+        return body.to_string();
+    }
+    let mut out: Vec<u8> = Vec::with_capacity(bytes.len());
+    let mut i = 0;
+    while i < bytes.len() {
+        if bytes[i] == b'$'
+            && i + 2 + nlen <= bytes.len()
+            && bytes[i + 1] == b'.'
+            && bytes[i + 2..i + 2 + nlen].eq_ignore_ascii_case(nb)
+            && (i + 2 + nlen == bytes.len() || !is_ident_byte(bytes[i + 2 + nlen]))
+        {
+            out.extend_from_slice(b"$.");
+            out.extend_from_slice(replacement.as_bytes());
+            i += 2 + nlen;
+        } else {
+            out.push(bytes[i]);
+            i += 1;
+        }
+    }
+    String::from_utf8(out).unwrap()
+}
+
+/// Substitute component props into a template — the compiled twin of the
+/// runtime's renderPropsAndSlot (runtime/component.js). Both sides must
+/// transform identically:
+///   - exact `@[propName]` bindings (case-insensitive)
+///   - prop identifiers inside other `@[expr]` bindings
+///   - prop identifiers inside directive comments (`if` / `else if` / `each`)
+///   - `$.propName` references inside event-handler attribute bodies
+/// Binding props (`prop="@[path]"`) rewrite identifiers to the bound path;
+/// literal props inject the value (bare boolean attrs → true, strings
+/// JSON-quoted, numerics raw).
+fn substitute_props(template: &str, props: &[(String, String)]) -> String {
+    let binding_re = regex::Regex::new(r"@\[([^\]]+)\]").unwrap();
+    let directive_re = regex::Regex::new(r"(?s)<!--\s*(if|else if|each)\s+(.*?)\s*-->").unwrap();
+    let event_re = regex::Regex::new(r#"\bon(\w+)="([^"]*)""#).unwrap();
+    let numeric_re = regex::Regex::new(r"(?i)^-?\d+(\.\d+)?(e[+-]?\d+)?$").unwrap();
+
+    let mut html = template.to_string();
+
+    for (prop_name, prop_value) in props {
+        let exact_re =
+            regex::Regex::new(&format!(r"(?i)@\[{}\]", regex::escape(prop_name))).unwrap();
+
+        let binding_path = prop_value
+            .strip_prefix("@[")
+            .and_then(|v| v.strip_suffix(']'));
+
+        let (exact_repl, ident_repl, each_repl, state_repl) = if let Some(path) = binding_path {
+            (
+                format!("@[{}]", path),
+                format!("({})", path),
+                path.to_string(),
+                path.to_string(),
+            )
+        } else {
+            let literal = if prop_value.is_empty() {
+                "true".to_string()
+            } else if numeric_re.is_match(prop_value) {
+                prop_value.clone()
+            } else {
+                serde_json::to_string(prop_value).unwrap()
+            };
+            (prop_value.clone(), literal.clone(), literal.clone(), literal)
+        };
+
+        html = exact_re
+            .replace_all(&html, regex::NoExpand(exact_repl.as_str()))
+            .to_string();
+
+        html = binding_re
+            .replace_all(&html, |c: &regex::Captures| {
+                let expr = c.get(1).unwrap().as_str();
+                let rewritten = substitute_identifier(expr, prop_name, &ident_repl);
+                if rewritten == expr {
+                    c.get(0).unwrap().as_str().to_string()
+                } else {
+                    format!("@[{}]", rewritten)
+                }
+            })
+            .to_string();
+
+        html = directive_re
+            .replace_all(&html, |c: &regex::Captures| {
+                let kw = c.get(1).unwrap().as_str();
+                let expr = c.get(2).unwrap().as_str();
+                let repl = if kw == "each" { each_repl.as_str() } else { ident_repl.as_str() };
+                let rewritten = substitute_identifier(expr, prop_name, repl);
+                if rewritten == expr {
+                    c.get(0).unwrap().as_str().to_string()
+                } else {
+                    format!("<!-- {} {} -->", kw, rewritten)
+                }
+            })
+            .to_string();
+
+        html = event_re
+            .replace_all(&html, |c: &regex::Captures| {
+                let ev = c.get(1).unwrap().as_str();
+                let body = c.get(2).unwrap().as_str();
+                let rewritten = substitute_state_ref(body, prop_name, &state_repl);
+                if rewritten == body {
+                    c.get(0).unwrap().as_str().to_string()
+                } else {
+                    format!(r#"on{}="{}""#, ev, rewritten)
+                }
+            })
+            .to_string();
+    }
+
+    html
+}
+
 /// Transform custom HTML elements to divs with classes
 fn transform_custom_tags_to_divs(content: &str, reserved_elements: &[String]) -> String {
     let mut result = content.to_string();

package/package.json

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

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.