@ape-egg/vibe 2.1.9 → 2.1.11

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.1.11] - 2026-06-22
+
+### Fixed
+
+- **Compiler 1.9.6 → 1.9.7 — name-binding expressions were lowercased, breaking camelCase identifiers** (`compiler/src/compiler/binding_case.rs` (new), `component_tagger.rs`, `manifest_builder.rs`) — html5ever lowercases attribute *names* per the HTML spec, and a name-binding lives in attribute-name position (`<icon @[selectedEquipProps(uuid).element]>`), so every parse/serialize round-trip lowered its expression (`selectedEquipProps` → `selectedequipprops`, undefined at runtime). Attribute *values* keep their case, so value-bindings were never affected. The new `binding_case` module snapshots the original-cased `@[...]` bindings before the round-trip (keyed by their lowercased form, first-wins on collision) and restores them afterward — applied both to the tagged HTML in `component_tagger` and to every string the manifest builder serializes, including its captured `name_bindings` array. Repro: `tests/compiler/name-binding-case`.
+- **Name-binding paths wrapped in grouping parens by component-prop substitution failed to resolve** (`runtime/utils.js`) — `resolveCaseInsensitivePath` bailed on any `(`, but reusing a component rewrites a prop reference like `props.element` into `(equipmentDetailProps).element`, and the HTML parser lowercases the surrounding name-binding attribute. It now strips grouping parens to recover the plain dotted path and resolves it case-insensitively, still bailing on a genuine function call (`selectedEquipProps(uuid)`) that needs the full evaluator. Covered by `tests/unit/utils.test.js`.
+
+## [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

package/compiler/src/Cargo.lock

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

package/compiler/src/Cargo.toml

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

package/compiler/src/compiler/binding_case.rs

@@ -0,0 +1,88 @@
+use regex::Regex;
+use std::collections::HashMap;
+use std::sync::OnceLock;
+
+/// The canonical `@[...]` binding matcher, shared with manifest_builder /
+/// value_stamper. A binding body is any run of non-bracket chars, optionally
+/// containing a single bracketed group (`items[0]`).
+fn binding_regex() -> &'static Regex {
+    static RE: OnceLock<Regex> = OnceLock::new();
+    RE.get_or_init(|| Regex::new(r"@\[((?:[^\[\]]|\[[^\]]*\])+)\]").unwrap())
+}
+
+/// html5ever lowercases attribute NAMES per the HTML spec. A name-binding lives
+/// in attribute-name position (`<icon @[selectedEquipProps(uuid).element]>`), so
+/// its expression is lowercased by every parse/serialize round-trip — the
+/// identifier `selectedEquipProps` becomes `selectedequipprops`, undefined at
+/// runtime. Attribute VALUES keep their case, so value-bindings are unaffected.
+///
+/// We can't tell html5ever to preserve case, so we restore it ourselves: snapshot
+/// the original-cased `@[...]` bindings from the input BEFORE the round-trip, then
+/// map them back over the output AFTER. The map is keyed by the lowercased binding
+/// (what the round-trip produces) → original binding.
+///
+/// First-wins on a lowercase collision (two differently-cased bindings that
+/// lowercase to the same key): rare, and either casing is a defensible restore.
+pub fn capture(input: &str) -> HashMap<String, String> {
+    let mut map = HashMap::new();
+    for caps in binding_regex().captures_iter(input) {
+        let original = caps.get(0).unwrap().as_str();
+        let lower = original.to_ascii_lowercase();
+        if lower != original {
+            map.entry(lower).or_insert_with(|| original.to_string());
+        }
+    }
+    map
+}
+
+/// Restore original casing of `@[...]` bindings in `output` using a map built by
+/// [`capture`]. Only bindings whose lowercased form is a known key are rewritten;
+/// everything else is left verbatim, so this is a no-op when nothing was lowered.
+pub fn restore(output: &str, map: &HashMap<String, String>) -> String {
+    if map.is_empty() {
+        return output.to_string();
+    }
+    binding_regex()
+        .replace_all(output, |caps: &regex::Captures| {
+            let matched = caps.get(0).unwrap().as_str();
+            match map.get(&matched.to_ascii_lowercase()) {
+                Some(original) => original.clone(),
+                None => matched.to_string(),
+            }
+        })
+        .to_string()
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn restores_lowercased_name_binding() {
+        // Post-prop-substitution name binding (parens added by substitute_props),
+        // as it enters an html5ever round-trip. html5ever lowercases the whole
+        // attr name; restore puts the original casing back.
+        let input = "<icon @[(selectedEquipProps(uuid)).element]></icon>";
+        let map = capture(input);
+        let lowered = "<icon @[(selectedequipprops(uuid)).element]></icon>";
+        let restored = restore(lowered, &map);
+        assert_eq!(restored, input);
+    }
+
+    #[test]
+    fn leaves_value_bindings_untouched_when_already_correct() {
+        let input = r#"<card tinted="@[selectedEquipProps(uuid).element]"></card>"#;
+        let map = capture(input);
+        // Value bindings keep case through html5ever, so output already matches.
+        let restored = restore(input, &map);
+        assert_eq!(restored, input);
+    }
+
+    #[test]
+    fn noop_when_no_uppercase() {
+        let input = "<icon @[tooltip.props.element]></icon>";
+        let map = capture(input);
+        assert!(map.is_empty());
+        assert_eq!(restore(input, &map), input);
+    }
+}

package/compiler/src/compiler/component_tagger.rs

@@ -42,6 +42,11 @@ impl ComponentTagger {
             html_with_placeholders = html_with_placeholders.replace(content, &placeholder);
         }
 
+        // Snapshot original-cased `@[...]` bindings before html5ever lowercases
+        // any that live in attribute-name position (name bindings); restored after
+        // serialization below.
+        let binding_cases = crate::compiler::binding_case::capture(&html_with_placeholders);
+
         // Parse HTML (with placeholders instead of actual vibe-dehydrate content)
         let dom = parse_document(RcDom::default(), Default::default())
             .from_utf8()
@@ -64,6 +69,9 @@ impl ComponentTagger {
         let mut modified_html = String::from_utf8(modified_html_bytes)
             .map_err(|e| format!("Failed to convert HTML to UTF-8: {}", e))?;
 
+        // Restore original casing of name-binding expressions html5ever lowercased.
+        modified_html = crate::compiler::binding_case::restore(&modified_html, &binding_cases);
+
         // Restore template content from placeholders
         for (i, content) in template_placeholders.iter().enumerate() {
             let placeholder = format!("<!--VIBE_TEMPLATE_PLACEHOLDER_{}-->", i);

package/compiler/src/compiler/manifest_builder.rs

@@ -4,12 +4,17 @@ use markup5ever_rcdom::{RcDom, NodeData, Handle};
 use regex::Regex;
 use serde::{Serialize, Serializer};
 use serde_json::Value;
+use std::cell::RefCell;
 use std::collections::{HashMap, BTreeMap};
 use crate::compiler::iteration_optimizer::build_iteration_optimizations;
 
 pub struct ManifestBuilder {
     binding_regex: Regex,
     name_binding_fix_regex: Regex,
+    /// Original-cased `@[...]` bindings captured from the pre-parse HTML, keyed by
+    /// their lowercased form — used to undo html5ever's attribute-name lowercasing
+    /// of name bindings on every string this builder serializes back out.
+    binding_cases: RefCell<HashMap<String, String>>,
 }
 
 impl ManifestBuilder {
@@ -17,10 +22,16 @@ impl ManifestBuilder {
         Self {
             binding_regex: Regex::new(r"@\[((?:[^\[\]]|\[[^\]]*\])+)\]").unwrap(),
             name_binding_fix_regex: Regex::new(r#"(@\[[^\]]+\])="+"#).unwrap(),
+            binding_cases: RefCell::new(HashMap::new()),
         }
     }
 
     pub fn build_from_html(&self, html: &str, _state: &Value, iterations_as_is: bool) -> Result<ManifestNode, String> {
+        // Snapshot original-cased bindings before html5ever lowercases name
+        // bindings (attr-name position). Restored on serialized templates and on
+        // the captured name_bindings array.
+        *self.binding_cases.borrow_mut() = crate::compiler::binding_case::capture(html);
+
         // Parse HTML
         let dom = parse_document(RcDom::default(), Default::default())
             .from_utf8()
@@ -133,7 +144,12 @@ impl ManifestBuilder {
                         while name_bindings.len() <= idx {
                             name_bindings.push(None);
                         }
-                        name_bindings[idx] = Some(attr_name.clone());
+                        // html5ever lowercased the attr name; restore original casing.
+                        let restored = crate::compiler::binding_case::restore(
+                            &attr_name,
+                            &self.binding_cases.borrow(),
+                        );
+                        name_bindings[idx] = Some(restored);
                     }
                     // Check for attribute value bindings
                     else if self.binding_regex.is_match(&attr_value) {
@@ -441,6 +457,10 @@ impl ManifestBuilder {
         // which is invalid HTML that browsers reject
         html = self.name_binding_fix_regex.replace_all(&html, "$1").to_string();
 
+        // Restore original casing of any name-binding expressions html5ever
+        // lowercased while parsing (attr-name position).
+        html = crate::compiler::binding_case::restore(&html, &self.binding_cases.borrow());
+
         html
     }
 }

package/compiler/src/compiler/mod.rs

@@ -5,6 +5,7 @@ mod value_stamper;
 mod iteration_optimizer;
 mod js_analyzer;
 mod component_tagger;
+mod binding_case;
 mod reassignment_analyzer;
 pub mod watcher;
 

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);
@@ -424,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);
@@ -810,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]

package/package.json

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

package/runtime/utils.js

@@ -221,7 +221,16 @@ export const evalInScope = (expr, state, element = null) => {
 // `fx`. Bails on bracket/call expressions because those need a real
 // evaluator (and `evalInScope` already handled them).
 export const resolveCaseInsensitivePath = (state, path) => {
-  if (path.includes('[') || path.includes('(')) return undefined;
+  if (path.includes('[')) return undefined;
+  // Component prop substitution wraps the source in grouping parens, e.g.
+  // `props.element` inside a reused component becomes `(equipmentDetailProps).element`.
+  // The HTML parser lowercases name-binding attribute names, so strip the grouping
+  // parens to recover a plain dotted path; bail if anything but identifiers + dots
+  // survives (a real function call like `selectedEquipProps(uuid)` can't be recovered).
+  if (path.includes('(')) {
+    path = path.replace(/[()]/g, '');
+    if (!/^[A-Za-z_$][\w$]*(\.[A-Za-z_$][\w$]*)*$/.test(path)) return undefined;
+  }
   const segments = path.split('.');
   let current = state;
   for (const seg of segments) {