@ape-egg/vibe 2.1.8 → 2.1.10

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.1.10] - 2026-06-21
+
+### Fixed
+
+- **Compiler 1.9.5 → 1.9.6 — watch mode now picks up files created mid-session** (`compiler/src/compiler/watcher.rs`) — the dependency graph was built once at startup and never relearned a changed component's own dependencies. On a component edit the watcher only looked up *existing* dependents and bailed when there were none; unlike the page branch, it never re-extracted the component's `<component src>` references. So a component file created after the watcher started — and any new `<component src>` reference added by editing an existing component (e.g. a `Layout` that adds a freshly-created child) — was never recorded in the graph: editing that new file resolved to zero dependent pages and was a silent no-op (its content only reached the output incidentally, the next time some dependent page recompiled for another reason). The dep-refresh is now a single `DependencyGraph::refresh_file` shared by **both** the page and component branches (previously only pages refreshed, inline), so a component edit relearns its outgoing edges. A forward map (`component_to_used_components`) mirrors `component_to_components` so a component's own edges can be cleared symmetrically when they change. Because referencing a new component always means saving a referrer, that save now teaches the graph the new edge, and subsequent edits to the new file recompile every page that inlines it — no dev-server restart needed. Tests: `refreshing_a_component_learns_newly_added_child_references`, `refreshing_a_file_drops_stale_dependencies`, `refreshing_a_component_drops_stale_child_references` (`watcher.rs`).
+- **Compiler 1.9.5 → 1.9.6 — inlining a component whose end tag was split across lines left a stray `>`** (`compiler/src/parser/html.rs`) — `find_matching_close` already tolerated whitespace before the `>` of an end tag (`</component\n>`, as produced by Prettier's whitespace-controlled wrapping), but the inliner computed the replacement's end as `close_start + len("</component>")` — too short by exactly that whitespace. The trailing `>` was left behind as a stray text node beside the inlined component (the literal `>` that leaked next to components in the app). `find_matching_close` now returns the close tag's real `(start, end)` byte offsets and both inlining paths slice to `end`. Tests: `inline_component_with_split_end_tag_leaves_no_stray_gt`, and the extended `find_matching_close_tolerates_whitespace_in_end_tag` (`html.rs`).
+
+## [2.1.9] - 2026-06-20
+
+### Fixed
+
+- **Compiler 1.9.4 → 1.9.5 — array-literal each-root components broke when inlined** (`compiler/src/parser/html.rs`, `compile.rs`) — a component whose root is `<!-- each [prop] as a -->` receives its iterable as a prop and relies on the runtime's `__vibeiterprops` indirection: the runtime evaluates the prop binding in the *enclosing* loop scope, stashes the value in a global registry slot, and iterates that slot. Inlining instead baked the call-site's parent-loop alias straight into the each (`[card.signatureAbility]`); the runtime evaluates an array-literal iterable in global scope, where that alias is undefined, so the loop yielded zero items (the empty `AbilityCell` / status-chip bug in compiled mode). Such components (`is_iter_prop_root`) are now left as runtime `<component src>` tags instead of being inlined — in both the `src=` and custom-element inlining paths — and the `components/` directory is always mirrored to the output so the runtime can fetch their source, exactly as in non-compiled mode. Tests: `each_root_component_is_left_for_runtime`, `ordinary_component_still_inlines` (`html.rs`), and `tests/compiler/components`.
+- **Compiler 1.9.4 → 1.9.5 — a stateful component nested inside another stole the inner's `this.` bindings** (`compiler/src/compiler/component_tagger.rs`) — the outer component's build-time `this.` → component-id rewrite descended through a nested component that registers its OWN `component({...})` state, claiming the inner's bindings and `if`/`each` directives with the outer id before the inner was reached. The inner's live state (registered under its own runtime id) then never reached its markup → empty each-loops and dead bindings (the `DebugContent` → `ScalingModal` empty-legend bug). The rewrite now stops at any nested state-registering component (`is_state_registering_component`); each component owns the `this.` inside it and gets its own id + rewrite when `walk_tag_and_extract` reaches it. Test: `nested_component_this_resolves_to_own_id`.
+
 ## [2.1.8] - 2026-06-19
 
 ### Changed

package/compiler/src/Cargo.lock

@@ -1599,7 +1599,7 @@ checksum = "0b928f33d975fc6ad9f86c8f283853ad26bdd5b10b7f1542aa2fa15e2289105a"
 
 [[package]]
 name = "vibe-compiler"
-version = "1.9.4"
+version = "1.9.6"
 dependencies = [
  "clap",
  "colored",

package/compiler/src/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "vibe-compiler"
-version = "1.9.4"
+version = "1.9.6"
 edition = "2021"
 description = "Vibe framework compiler - compiles Vibe source files into optimized output"
 authors = ["Kim Korte"]

package/compiler/src/compiler/compile.rs

@@ -1270,17 +1270,19 @@ impl Compiler {
                     continue;
                 }
 
-                // Handle components directory based on components_as_is flag
+                // The components directory is always mirrored to the output. With
+                // components_as_is every component is loaded at runtime; otherwise
+                // most are inlined at build time, but iter-prop each-root components
+                // are deliberately left as runtime `<component src>` tags (see
+                // is_iter_prop_root in parser/html.rs) and the runtime fetches their
+                // source from here — exactly as it does in non-compiled mode.
                 if file_name == self.config.components {
-                    if self.config.components_as_is {
-                        // Copy components directory to output for runtime
-                        let new_relative = if relative_path.is_empty() {
-                            file_name.to_string()
-                        } else {
-                            format!("{}/{}", relative_path, file_name)
-                        };
-                        self.copy_directory(&path, &new_relative, canonical_source, stats)?;
-                    }
+                    let new_relative = if relative_path.is_empty() {
+                        file_name.to_string()
+                    } else {
+                        format!("{}/{}", relative_path, file_name)
+                    };
+                    self.copy_directory(&path, &new_relative, canonical_source, stats)?;
                     // Skip further processing (don't recurse into components)
                     continue;
                 }

package/compiler/src/compiler/component_tagger.rs

@@ -142,33 +142,7 @@ impl ComponentTagger {
                 // treated as a stateful component with the merged state of all its descendants.
                 // That made rewrite_this_to_component_id rewrite every @[this.xxx] in the page
                 // to @[_c0.xxx] before child components could claim their own bindings.
-                let mut direct_scripts_html = String::new();
-                for child in node.children.borrow().iter() {
-                    if let NodeData::Element { name: ref child_name, .. } = child.data {
-                        if child_name.local.as_ref() == "script" {
-                            // Read the script's raw text directly. Serializing the
-                            // element would HTML-escape JS operators (`>` -> `>`,
-                            // `&&` -> `&&`) because the serializer loses the
-                            // rawtext context when it starts at the script's children;
-                            // the escaped source then fails to parse, dropping a
-                            // `component(stateVar)` component to the regex fallback
-                            // (which only matches `component({` literals) and leaving
-                            // it untagged.
-                            let mut script_text = String::new();
-                            for grandchild in child.children.borrow().iter() {
-                                if let NodeData::Text { ref contents } = grandchild.data {
-                                    script_text.push_str(&contents.borrow());
-                                }
-                            }
-                            // Wrap in <script> so extract_from_html routes it through
-                            // the JS AST analyzer, which resolves `component(stateVar)`
-                            // via its declaration (the regex fallback can't).
-                            direct_scripts_html.push_str("<script>");
-                            direct_scripts_html.push_str(&script_text);
-                            direct_scripts_html.push_str("</script>");
-                        }
-                    }
-                }
+                let direct_scripts_html = Self::direct_scripts_html(node);
 
                 // A component must be tagged whenever it REGISTERS local state via a
                 // `component(...)` call — that is what makes `this.X` in its markup
@@ -237,6 +211,53 @@ impl ComponentTagger {
         })
     }
 
+    /// Concatenate a node's DIRECT `<script>` children as `<script>…</script>`.
+    /// Reads raw text (not serialized) so JS operators (`>`, `&&`) aren't
+    /// HTML-escaped — the escaped source would fail the AST parse and drop a
+    /// `component(stateVar)` call to the regex fallback. Used both to extract a
+    /// wrapper's own state and to detect nested component boundaries.
+    fn direct_scripts_html(node: &Handle) -> String {
+        let mut out = String::new();
+        for child in node.children.borrow().iter() {
+            if let NodeData::Element { name: ref child_name, .. } = child.data {
+                if child_name.local.as_ref() == "script" {
+                    let mut script_text = String::new();
+                    for grandchild in child.children.borrow().iter() {
+                        if let NodeData::Text { ref contents } = grandchild.data {
+                            script_text.push_str(&contents.borrow());
+                        }
+                    }
+                    out.push_str("<script>");
+                    out.push_str(&script_text);
+                    out.push_str("</script>");
+                }
+            }
+        }
+        out
+    }
+
+    /// Is this node a component wrapper that registers its OWN local state? Such
+    /// a node gets its own `_cN` id and `this.`→id pass when `walk_tag_and_extract`
+    /// reaches it, so an ancestor's rewrite must stop here — descending would let
+    /// the ancestor claim the nested component's bindings with the wrong id (the
+    /// DebugContent→ScalingModal empty-legend bug).
+    fn is_state_registering_component(node: &Handle) -> bool {
+        if let NodeData::Element { name, attrs, .. } = &node.data {
+            let tag_name = name.local.as_ref();
+            let borrowed = attrs.borrow();
+            let is_component = tag_name == "component" && !Self::has_src_attr(&borrowed);
+            let is_div_component = tag_name == "div"
+                && Self::has_class_component(&borrowed)
+                && !Self::has_src_attr(&borrowed);
+            if !(is_component || is_div_component) {
+                return false;
+            }
+            drop(borrowed);
+            return component_call_regex().is_match(&Self::direct_scripts_html(node));
+        }
+        false
+    }
+
     /// Rewrite `this.X` to `componentId.X` throughout a component's subtree:
     /// inside `@[...]` bindings (text + attributes, nested paths and multi-ref
     /// expressions) and inside if/each/else-if directive comments. Resolving the
@@ -312,8 +333,14 @@ impl ComponentTagger {
             }
         }
 
-        // Recurse into children
+        // Recurse into children — but STOP at a nested component that registers
+        // its own state. It owns the `this.` inside it and gets its own id +
+        // rewrite when walk_tag_and_extract reaches it; descending here would
+        // claim its bindings with this ancestor's id (the empty-legend bug).
         for child in node.children.borrow().iter() {
+            if Self::is_state_registering_component(child) {
+                continue;
+            }
             Self::rewrite_node_recursive(child, binding_regex, this_prop, state_this_prop, component_id);
         }
     }
@@ -394,6 +421,29 @@ mod tests {
         );
     }
 
+    #[test]
+    fn nested_component_this_resolves_to_own_id() {
+        // DebugContent → ScalingModal shape: a stateful component nested inside
+        // another stateful component, each owning its own `this.`. The outer's
+        // this.→id rewrite must STOP at the inner component boundary — otherwise
+        // it claims the inner's bindings/directives with the OUTER id before the
+        // inner is reached, and the inner's live state (registered under its own
+        // runtime id) never reaches the markup → empty each-loops, dead bindings.
+        let html = r#"<!DOCTYPE html><html><body><component><script>component({ outer: 1 })</script><outer-mark>@[this.outer]</outer-mark><component><script>component({ inner: 2, items: [] })</script><modal-root open="@[this.open]"><!-- each this.items as it --><inner-mark>@[this.inner]</inner-mark><!-- /each --></modal-root></component></component></body></html>"#;
+
+        let result = ComponentTagger::tag_components(html, &PathBuf::from(".")).unwrap();
+
+        // Outer is _c0 (visited first), inner is _c1 (reached on recursion).
+        assert!(result.html.contains("@[_c0.outer]"), "outer binding wrong: {}", result.html);
+        assert!(result.html.contains("@[_c1.inner]"), "inner binding not rewritten to own id: {}", result.html);
+        assert!(result.html.contains("each _c1.items as it"), "inner each not rewritten to own id: {}", result.html);
+        assert!(result.html.contains("open=\"@[_c1.open]\""), "inner attr binding not rewritten to own id: {}", result.html);
+        // The outer must NOT have claimed any of the inner's bindings/directives.
+        assert!(!result.html.contains("@[_c0.inner]"), "outer claimed inner text binding: {}", result.html);
+        assert!(!result.html.contains("each _c0.items"), "outer claimed inner each: {}", result.html);
+        assert!(!result.html.contains("@[_c0.open]"), "outer claimed inner attr binding: {}", result.html);
+    }
+
     #[test]
     fn tag_multiple_components() {
         // Each wrapper registers component-local state, so all three are tagged

package/compiler/src/compiler/watcher.rs

@@ -17,6 +17,10 @@ pub struct DependencyGraph {
     component_to_components: HashMap<PathBuf, HashSet<PathBuf>>,
     /// page path -> set of component paths it uses
     page_to_components: HashMap<PathBuf, HashSet<PathBuf>>,
+    /// component path -> set of component paths it uses (forward edges, so a
+    /// component's own deps can be cleared on refresh — the mirror of
+    /// component_to_components)
+    component_to_used_components: HashMap<PathBuf, HashSet<PathBuf>>,
 }
 
 impl DependencyGraph {
@@ -25,6 +29,7 @@ impl DependencyGraph {
             component_to_pages: HashMap::new(),
             component_to_components: HashMap::new(),
             page_to_components: HashMap::new(),
+            component_to_used_components: HashMap::new(),
         }
     }
 
@@ -35,7 +40,12 @@ impl DependencyGraph {
             self.component_to_components
                 .entry(component.clone())
                 .or_insert_with(HashSet::new)
-                .insert(file);
+                .insert(file.clone());
+
+            self.component_to_used_components
+                .entry(file)
+                .or_insert_with(HashSet::new)
+                .insert(component);
         } else {
             // Page uses component
             self.component_to_pages
@@ -50,6 +60,39 @@ impl DependencyGraph {
         }
     }
 
+    /// Replace `file`'s outgoing dependency edges with `deps`. Works for both
+    /// pages and components, so a newly-added `<component src>` reference (or a
+    /// removed one) is learned the moment the referrer is saved. This is what lets
+    /// the watcher pick up files created mid-session: referencing a new component
+    /// always means editing a referrer, and that edit refreshes the graph here.
+    pub fn refresh_file(&mut self, file: &Path, deps: HashSet<PathBuf>, file_is_component: bool) {
+        // Clear the file's old outgoing edges (and their reverse entries) so a
+        // dependency it no longer uses stops mapping back to it.
+        let forward = if file_is_component {
+            &mut self.component_to_used_components
+        } else {
+            &mut self.page_to_components
+        };
+
+        if let Some(old_deps) = forward.remove(file) {
+            let reverse = if file_is_component {
+                &mut self.component_to_components
+            } else {
+                &mut self.component_to_pages
+            };
+            for dep in old_deps {
+                if let Some(users) = reverse.get_mut(&dep) {
+                    users.remove(file);
+                }
+            }
+        }
+
+        // Add the current edges.
+        for dep in deps {
+            self.add_dependency(file.to_path_buf(), dep, file_is_component);
+        }
+    }
+
     /// Get all pages that transitively depend on a component (includes component -> component -> page chains)
     pub fn get_all_dependent_pages(&self, component: &Path) -> HashSet<PathBuf> {
         let mut all_pages = HashSet::new();
@@ -442,6 +485,26 @@ pub fn watch(config: Config, verbose: bool) -> std::result::Result<(), Box<dyn s
                                 // Component changed - recompile all transitively dependent pages
                                 // Canonicalize to match how dependencies were stored (handles case sensitivity)
                                 let path_canonical = path.canonicalize().unwrap_or_else(|_| path.clone());
+
+                                // Refresh this component's own dependency edges so a
+                                // newly-added <component src> (e.g. a child file created
+                                // mid-session) is learned. Without this the new child maps
+                                // to zero dependent pages and editing it is a silent no-op.
+                                if path.exists() {
+                                    if let Ok(html) = std::fs::read_to_string(path) {
+                                        let components_path = config.source.join(&config.components);
+                                        let deps: HashSet<PathBuf> =
+                                            extract_component_dependencies(&html, &components_path)
+                                                .into_iter()
+                                                .map(|dep| {
+                                                    let dep_absolute = config.source.join(&dep);
+                                                    dep_absolute.canonicalize().unwrap_or(dep_absolute)
+                                                })
+                                                .collect();
+                                        graph.refresh_file(path, deps, true);
+                                    }
+                                }
+
                                 let dependent_pages = graph.get_all_dependent_pages(&path_canonical);
                                 if !dependent_pages.is_empty() {
                                     println!("{} {} changed", "[watch]".cyan(), relative_path.display());
@@ -503,27 +566,19 @@ pub fn watch(config: Config, verbose: bool) -> std::result::Result<(), Box<dyn s
                                     println!("{} {} changed", "[watch]".cyan(), relative_path.display());
                                     pages_to_recompile.insert(path.clone());
 
-                                    // Rebuild dependencies for this page
+                                    // Rebuild dependencies for this page (shared with the
+                                    // component path via refresh_file).
                                     if let Ok(html) = std::fs::read_to_string(path) {
                                         let components_path = config.source.join(&config.components);
-                                        let deps = extract_component_dependencies(&html, &components_path);
-
-                                        // Clear old dependencies for this page
-                                        if let Some(old_deps) = graph.page_to_components.get(path) {
-                                            for dep in old_deps {
-                                                if let Some(pages) = graph.component_to_pages.get_mut(dep) {
-                                                    pages.remove(path);
-                                                }
-                                            }
-                                        }
-
-                                        // Add new dependencies
-                                        graph.page_to_components.insert(path.clone(), HashSet::new());
-                                        for dep in deps {
-                                            let dep_absolute = config.source.join(&dep);
-                                            let dep_canonical = dep_absolute.canonicalize().unwrap_or(dep_absolute);
-                                            graph.add_dependency(path.clone(), dep_canonical, false);
-                                        }
+                                        let deps: HashSet<PathBuf> =
+                                            extract_component_dependencies(&html, &components_path)
+                                                .into_iter()
+                                                .map(|dep| {
+                                                    let dep_absolute = config.source.join(&dep);
+                                                    dep_absolute.canonicalize().unwrap_or(dep_absolute)
+                                                })
+                                                .collect();
+                                        graph.refresh_file(path, deps, false);
                                     }
                                 }
                             }
@@ -768,6 +823,95 @@ mod tests {
         assert!(stale_components.iter().all(|c| c.starts_with("/src/components")));
     }
 
+    // The new-file bug: a component created mid-session is referenced by editing
+    // an existing component (e.g. Layout adds <component src="SeasonDowntime">).
+    // The watcher must refresh the edited component's own deps so that edge is
+    // learned — otherwise editing the new component maps to zero pages and is a
+    // silent no-op.
+    #[test]
+    fn refreshing_a_component_learns_newly_added_child_references() {
+        let layout = PathBuf::from("/src/components/Layout.html");
+        let page = PathBuf::from("/src/pages/index.html");
+        let downtime = PathBuf::from("/src/components/SeasonDowntime.html");
+
+        let mut graph = DependencyGraph::new();
+        graph.add_dependency(page.clone(), layout.clone(), false); // page uses layout
+
+        // Brand-new component nobody references yet.
+        assert!(
+            graph.get_all_dependent_pages(&downtime).is_empty(),
+            "nothing uses the new component yet"
+        );
+
+        // Layout is edited to add <component src="SeasonDowntime">. The watcher
+        // refreshes layout's deps, which must learn the layout -> downtime edge.
+        let mut new_deps = HashSet::new();
+        new_deps.insert(downtime.clone());
+        graph.refresh_file(&layout, new_deps, true);
+
+        // Now editing the new component must map back to the page that inlines it.
+        assert!(
+            graph.get_all_dependent_pages(&downtime).contains(&page),
+            "after layout learns the new component, editing it must recompile the page"
+        );
+    }
+
+    // refresh_file replaces a file's edges, so a dependency it no longer uses is
+    // dropped (no phantom recompiles of files that reference the removed dep).
+    #[test]
+    fn refreshing_a_file_drops_stale_dependencies() {
+        let page = PathBuf::from("/src/pages/index.html");
+        let old = PathBuf::from("/src/components/Old.html");
+        let new = PathBuf::from("/src/components/New.html");
+
+        let mut graph = DependencyGraph::new();
+        graph.add_dependency(page.clone(), old.clone(), false);
+        assert!(graph.get_all_dependent_pages(&old).contains(&page));
+
+        // Page edited: now uses `new` instead of `old`.
+        let mut deps = HashSet::new();
+        deps.insert(new.clone());
+        graph.refresh_file(&page, deps, false);
+
+        assert!(
+            graph.get_all_dependent_pages(&new).contains(&page),
+            "new dependency is learned"
+        );
+        assert!(
+            !graph.get_all_dependent_pages(&old).contains(&page),
+            "stale dependency is dropped"
+        );
+    }
+
+    // Same as above but for a component's own deps (component -> component edges),
+    // which previously had no forward tracking to clear.
+    #[test]
+    fn refreshing_a_component_drops_stale_child_references() {
+        let page = PathBuf::from("/src/pages/index.html");
+        let parent = PathBuf::from("/src/components/Parent.html");
+        let old_child = PathBuf::from("/src/components/OldChild.html");
+        let new_child = PathBuf::from("/src/components/NewChild.html");
+
+        let mut graph = DependencyGraph::new();
+        graph.add_dependency(page.clone(), parent.clone(), false); // page uses parent
+        graph.add_dependency(parent.clone(), old_child.clone(), true); // parent uses old_child
+        assert!(graph.get_all_dependent_pages(&old_child).contains(&page));
+
+        // Parent edited: swaps old_child for new_child.
+        let mut deps = HashSet::new();
+        deps.insert(new_child.clone());
+        graph.refresh_file(&parent, deps, true);
+
+        assert!(
+            graph.get_all_dependent_pages(&new_child).contains(&page),
+            "new child reference is learned transitively"
+        );
+        assert!(
+            !graph.get_all_dependent_pages(&old_child).contains(&page),
+            "stale child reference is dropped"
+        );
+    }
+
     #[test]
     fn cache_key_is_source_relative_with_leading_slash() {
         let source = PathBuf::from("/proj/src");

package/compiler/src/parser/html.rs

@@ -258,7 +258,11 @@ impl HtmlParser {
     /// Used during recursive component fetching to resolve nested components
     /// Find the start position of the matching close tag, handling nesting of the same tag.
     /// `after_open`: byte position immediately after the `>` of the opening tag.
-    fn find_matching_close(content: &str, after_open: usize, tag_name: &str) -> Option<usize> {
+    /// Returns `(start, end)` byte offsets of the matching close tag: `start` is
+    /// the `<` of `</tag…>` (the slot-content boundary), `end` is just past its
+    /// `>`. Because the end tag may carry whitespace before `>` (`</tag\n>`), the
+    /// caller must use this `end` rather than assuming a `</tag>`-length tag.
+    fn find_matching_close(content: &str, after_open: usize, tag_name: &str) -> Option<(usize, usize)> {
         // (?:\s|>) ensures <component> matches but not <component-foo> (hyphen is not \s or >)
         let open_re = regex::Regex::new(&format!(r"<{}(?:\s|>|/>)", regex::escape(tag_name))).unwrap();
         // `\s*>` tolerates whitespace before the `>` of an end tag — HTML allows
@@ -279,7 +283,7 @@ impl HtmlParser {
                 (None, None) => return None,
                 (None, Some((cs, ce))) => {
                     depth -= 1;
-                    if depth == 0 { return Some(cursor + cs); }
+                    if depth == 0 { return Some((cursor + cs, cursor + ce)); }
                     cursor += ce;
                 }
                 (Some((os, oe)), None) => {
@@ -309,7 +313,7 @@ impl HtmlParser {
                         }
                     } else {
                         depth -= 1;
-                        if depth == 0 { return Some(cursor + cs); }
+                        if depth == 0 { return Some((cursor + cs, cursor + ce)); }
                         cursor += ce;
                     }
                 }
@@ -354,8 +358,7 @@ impl HtmlParser {
             }
 
             let open_end = open_tag.end();
-            let close_start = Self::find_matching_close(&result, open_end, tag_name)?;
-            let close_end = close_start + format!("</{}>", tag_name).len();
+            let (close_start, close_end) = Self::find_matching_close(&result, open_end, tag_name)?;
             let slot_content = result[open_end..close_start].to_string();
 
             let attrs_str = format!("{} {}", attrs_before, attrs_after);
@@ -367,6 +370,12 @@ impl HtmlParser {
             Some((open_tag.start(), close_end, props, slot_content))
         }).collect();
 
+        // Iter-prop components stay as runtime `<component src>` tags (see
+        // is_iter_prop_root). The content is the same for every match, so skip all.
+        if is_iter_prop_root(component_content) {
+            return result;
+        }
+
         // Replace from end to start (sorted descending by start position)
         let mut sorted = matches;
         sorted.sort_by(|a, b| b.0.cmp(&a.0));
@@ -418,8 +427,7 @@ impl HtmlParser {
                 }
 
                 let open_end = open_tag.end();
-                let close_start = Self::find_matching_close(&result, open_end, tag_name)?;
-                let close_end = close_start + format!("</{}>", tag_name).len();
+                let (close_start, close_end) = Self::find_matching_close(&result, open_end, tag_name)?;
                 let slot_content = result[open_end..close_start].to_string();
 
                 let attrs_str = format!("{} {}", attrs_before, attrs_after);
@@ -449,6 +457,12 @@ impl HtmlParser {
                 };
 
                 if let Some(template) = external_cache.get(&normalized_src) {
+                    // Iter-prop components stay as runtime `<component src>` tags so the
+                    // runtime renders them via its __vibeiterprops path — inlining
+                    // breaks the enclosing loop's scope (see is_iter_prop_root).
+                    if is_iter_prop_root(template) {
+                        continue;
+                    }
                     let mut replacement = substitute_props(template, &props);
                     replacement = neuter_component_scripts(&replacement);
 
@@ -578,6 +592,30 @@ fn substitute_state_ref(body: &str, name: &str, replacement: &str) -> String {
 /// runtime's renderPropsAndSlot (runtime/component.js). Both sides must
 /// transform identically:
 ///   - exact `@[propName]` bindings (case-insensitive)
+/// Whether a component template's ROOT is an array-literal each
+/// (`<!-- each [expr] as a -->`). Such a component receives its iterable as a prop
+/// and depends on the runtime's `__vibeiterprops` indirection: the runtime
+/// evaluates the prop binding in the *enclosing* loop scope, stores the value in a
+/// global registry slot, and rewrites the each to iterate that slot. Inlining
+/// instead bakes the call-site's parent-loop alias straight into the each
+/// (`[card.signatureAbility]`); the runtime evaluates an array-literal iterable in
+/// GLOBAL scope (that's the registry-slot pattern), where the alias is undefined →
+/// the loop yields zero items (the empty AbilityCell / status-chip bug in compiled
+/// mode). So such components are NOT inlined — they stay as runtime
+/// `<component src>` tags, and the compiler ships their source so the runtime can
+/// fetch and instantiate them exactly as it does in non-compiled mode.
+fn is_iter_prop_root(template: &str) -> bool {
+    let t = template.trim_start();
+    t.strip_prefix("<!--")
+        .map(str::trim_start)
+        .and_then(|r| r.strip_prefix("each"))
+        .map(str::trim_start)
+        .is_some_and(|after| after.starts_with('['))
+}
+
+/// Substitute component props into a template.
+///
+/// Rewrites:
 ///   - prop identifiers inside other `@[expr]` bindings
 ///   - prop identifiers inside directive comments (`if` / `else if` / `each`)
 ///   - `$.propName` references inside event-handler attribute bodies
@@ -774,13 +812,37 @@ mod tests {
         let content = "<component><a><component src=\"x\"></component\n></a></component><sibling></sibling>";
         let after_open = "<component>".len();
 
-        let close = HtmlParser::find_matching_close(content, after_open, "component")
+        let (close, close_end) = HtmlParser::find_matching_close(content, after_open, "component")
             .expect("outer </component> must be found");
 
         // The match must be the OUTER close (immediately before <sibling>), not
         // an overshoot past it.
         assert!(content[close..].starts_with("</component>"), "matched wrong close: {:?}", &content[close..close + 14]);
         assert!(content[close..].contains("<sibling>"), "sibling was swallowed into the component");
+        // The reported end lands just past the close tag's `>`.
+        assert!(content[..close_end].ends_with('>'), "close_end must sit right after the `>`");
+    }
+
+    #[test]
+    fn inline_component_with_split_end_tag_leaves_no_stray_gt() {
+        // Prettier's whitespace-controlled wrapping splits an end tag across
+        // lines (`</component\n>`). find_matching_close tolerates that whitespace
+        // when locating the close, but the caller computed the replacement end as
+        // `close_start + len("</component>")` — too short by the whitespace before
+        // the `>`. The final `>` was therefore left behind as a stray text node
+        // (the literal ">" that leaked next to inlined components in the app).
+        let parser = HtmlParser::new(std::path::PathBuf::from("."));
+        let page = "<wrap><component src=\"/components/Potion.html\"></component\n></wrap>";
+        let template = "<icon potion></icon>";
+        let mut cache = HashMap::new();
+        cache.insert("/components/Potion.html".to_string(), template.to_string());
+
+        let out = parser.inline_component_elements(page, &cache);
+
+        assert_eq!(
+            out, "<wrap><component><icon potion></icon></component></wrap>",
+            "split end tag left a stray `>` (or otherwise mis-sliced the close): {out}"
+        );
     }
 
     #[test]
@@ -853,4 +915,59 @@ mod tests {
         // A literal prop after the `>=` prop still substitutes → tag parsed fully.
         assert!(out.contains(r#"n="7""#), "count not substituted: {out}");
     }
+
+    #[test]
+    fn each_root_component_is_left_for_runtime() {
+        // A component whose ROOT is an array-literal each (`<!-- each [prop] as a -->`)
+        // depends on the runtime's __vibeiterprops indirection (the runtime evaluates
+        // the prop in the enclosing loop scope and stashes it in a global registry
+        // slot the each iterates). Inlining bakes the parent-loop alias into the each
+        // (`[card.signatureAbility]`); the runtime evaluates array-literal iterables
+        // in GLOBAL scope, where that alias is undefined → zero items (the empty
+        // AbilityCell / status-chip bug). So such a component must NOT be inlined:
+        // leave the `<component src=...>` tag for the runtime to fetch and instantiate.
+        let parser = HtmlParser::new(std::path::PathBuf::from("."));
+        let page = concat!(
+            r#"<!-- each cards as card --><card-section>"#,
+            r#"<component src="/components/AbilityCell.html" ability="@[card.signatureAbility]"></component>"#,
+            r#"</card-section><!-- /each -->"#,
+        );
+        // AbilityCell's root is an each over the `[ability]` array-literal prop.
+        let template = r#"<!-- each [ability] as a --><ability-tile><icon @[a.icon]></icon></ability-tile><!-- /each -->"#;
+        let mut cache = HashMap::new();
+        cache.insert("/components/AbilityCell.html".to_string(), template.to_string());
+
+        let out = parser.inline_component_elements(page, &cache);
+
+        // Left un-inlined for the runtime, with its prop binding intact…
+        assert!(
+            out.contains(r#"<component src="/components/AbilityCell.html""#),
+            "each-root component must be left un-inlined for the runtime: {out}"
+        );
+        assert!(
+            out.contains(r#"ability="@[card.signatureAbility]""#),
+            "prop binding lost on un-inlined component: {out}"
+        );
+        // …and the parent-loop alias must NOT have been baked into an each iterable.
+        assert!(
+            !out.contains("each [card.signatureAbility]"),
+            "parent-loop alias was inlined into the component each (the bug): {out}"
+        );
+    }
+
+    #[test]
+    fn ordinary_component_still_inlines() {
+        // Guard: a normal component (root is NOT an array-literal each) must still
+        // inline as before — the skip is scoped to the iter-prop pattern only.
+        let parser = HtmlParser::new(std::path::PathBuf::from("."));
+        let page = r#"<page><component src="/components/Badge.html" label="@[title]"></component></page>"#;
+        let template = r#"<badge-pill>@[label]</badge-pill>"#;
+        let mut cache = HashMap::new();
+        cache.insert("/components/Badge.html".to_string(), template.to_string());
+
+        let out = parser.inline_component_elements(page, &cache);
+
+        assert!(out.contains("<badge-pill>"), "ordinary component should inline: {out}");
+        assert!(!out.contains(r#"src="/components/Badge.html""#), "ordinary component src should be gone: {out}");
+    }
 }

package/package.json

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