@ape-egg/vibe-compiler 4.1.3 → 4.2.0

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@ape-egg/vibe-compiler",
-  "version": "4.1.3",
+  "version": "4.2.0",
   "type": "module",
-  "description": "Optional Rust compiler for Vibe — pre-renders, inlines components, and optimizes iterations. The runtime never needs it.",
+  "description": "Optional Rust compiler for Vibe \u2014 pre-renders, inlines components, and optimizes iterations. The runtime never needs it.",
   "homepage": "https://vibe.korte.kim",
   "bin": {
     "vibe": "./bin/vibe-compile.js"
@@ -14,6 +14,8 @@
     "src/Cargo.lock",
     "src/main.rs",
     "src/config.rs",
+    "src/constants.rs",
+    "src/inert.rs",
     "src/compiler",
     "src/parser"
   ],

package/src/Cargo.lock

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

package/src/Cargo.toml

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

package/src/compiler/compile.rs

@@ -59,8 +59,7 @@ pub(crate) fn atomic_write(path: &Path, contents: &str) -> std::io::Result<()> {
 // or a more sophisticated asset pipeline.
 // =============================================================================
 // FOUC prevention class/attribute name (matches runtime/constants.js)
-// Can be used as class (.vibe-fouc) or attribute ([vibe-fouc])
-const FOUC_CLASS_OR_ATTR: &str = "vibe-fouc";
+use crate::constants::{FOUC_ATTR as FOUC_CLASS_OR_ATTR, CSS_COVER_ATTR, CSS_LAYOUT_ATTR, RECURSIVE_SRC_ATTR, HYPERSPEED_DIR, MANIFEST_SUFFIX, SPA_FRAGMENTS_DIR};
 
 const VIBE_CSS_FILE: &str = include_str!("../../../vibe/vibe.css");
 const VIBE_CSS_OPTIONAL_MARKER: &str =
@@ -234,7 +233,7 @@ fn extract_event_handlers(html: &str) -> Vec<String> {
         .collect()
 }
 
-/// Rename `src="{component_src}"` to `data-vibe-recursive-src="{component_src}"`
+/// Rename `src="{component_src}"` to `data-vibe-internal-recursive-src="{component_src}"`
 /// on `<component>` / `<div class="component">` tags. Used during cache build
 /// to neutralize cyclic refs before they reach `inline_component_elements` —
 /// the inliner's `src=` regex won't match the renamed attribute, so it stops
@@ -246,7 +245,7 @@ fn escape_recursive_src(content: &str, component_src: &str) -> String {
         regex::escape(component_src),
     );
     let re = Regex::new(&pattern).unwrap();
-    re.replace_all(content, format!(r#"$1data-vibe-recursive-src="{}""#, component_src))
+    re.replace_all(content, format!(r#"$1{}="{}""#, RECURSIVE_SRC_ATTR, component_src))
         .into_owned()
 }
 
@@ -279,7 +278,7 @@ fn remove_fouc_prevention(html: String) -> String {
 }
 
 pub fn inject_vibe_css(html: String, disable_vibe_css: bool) -> String {
-    if html.contains("data-vibe-cover") {
+    if html.contains(CSS_COVER_ATTR) {
         return html;
     }
     let open_end = match html.find("<head") {
@@ -290,9 +289,9 @@ pub fn inject_vibe_css(html: String, disable_vibe_css: bool) -> String {
         None => return html,
     };
     let (cover_css, layout_css) = vibe_css_sheets();
-    let mut style = format!("<style data-vibe-cover>{}</style>", cover_css);
+    let mut style = format!("<style {}>{}</style>", CSS_COVER_ATTR, cover_css);
     if !disable_vibe_css {
-        style.push_str(&format!("<style data-vibe-css>{}</style>", layout_css));
+        style.push_str(&format!("<style {}>{}</style>", CSS_LAYOUT_ATTR, layout_css));
     }
     let mut result = String::with_capacity(html.len() + style.len());
     result.push_str(&html[..open_end]);
@@ -1084,7 +1083,7 @@ impl Compiler {
 
         // Tag components with deterministic IDs and structure state
         let tagged = ComponentTagger::tag_components(&protected, &source_root.to_path_buf())?;
-        let html = &tagged.html;  // Use modified HTML with data-vibe-component-id attributes
+        let html = &tagged.html;  // Use modified HTML with data-vibe-internal-component-id attributes
         let state = tagged.state;
 
         // Build manifest from pre-stamp HTML (both conditional branches present, @[...] markers intact)
@@ -1101,8 +1100,8 @@ impl Compiler {
 
         // Write manifest
         let manifest_path = output_dir
-            .join("vibe-hyperspeed")
-            .join(format!("{}.manifest.js", manifest_rel));
+            .join(HYPERSPEED_DIR)
+            .join(format!("{}{}", manifest_rel, MANIFEST_SUFFIX));
 
         // Ensure directory exists
         if let Some(parent) = manifest_path.parent() {
@@ -1572,7 +1571,7 @@ impl Compiler {
                 pages_dir.display()
             )));
         }
-        let reserved = self.config.components_path().join("vibe-spa");
+        let reserved = self.config.components_path().join(SPA_FRAGMENTS_DIR);
         if reserved.exists() {
             return Err(CompileError::SpaError(format!(
                 "{} is reserved for compiled page fragments — move or rename it",
@@ -1686,7 +1685,7 @@ impl Compiler {
                 .config
                 .output
                 .join("components")
-                .join("vibe-spa")
+                .join(SPA_FRAGMENTS_DIR)
                 .join(&rel);
             if let Some(parent) = fragment_path.parent() {
                 fs::create_dir_all(parent).map_err(|_| {
@@ -1733,7 +1732,7 @@ impl Compiler {
 
         // The fragments dir mirrors the pages tree: prune fragments whose
         // page no longer exists (watch-mode page removals, no-clean runs).
-        let fragments_root = self.config.output.join("components").join("vibe-spa");
+        let fragments_root = self.config.output.join("components").join(SPA_FRAGMENTS_DIR);
         let live: HashSet<String> = pages.iter().map(|p| p.rel_path.clone()).collect();
         let mut existing = Vec::new();
         Self::collect_page_files(&fragments_root, &self.config.skip_files, &mut existing);
@@ -2040,7 +2039,7 @@ impl Compiler {
     /// `<component src>` that points back into the chain is a cycle (direct
     /// self-reference, or A→B→A) — those are valid runtime patterns (recursive
     /// tree components bounded by data depth) but would expand infinitely at
-    /// compile time. Cycle references are escaped to `data-vibe-recursive-src`
+    /// compile time. Cycle references are escaped to `data-vibe-internal-recursive-src`
     /// in the cached content so the inliner's `src=` regex won't keep matching
     /// them; `process_html_with_cache` restores the attribute name at the end
     /// of compilation so the runtime sees a normal `<component src>` tag.

package/src/compiler/component_tagger.rs

@@ -10,6 +10,7 @@ use std::path::PathBuf;
 use std::cell::RefCell;
 use std::sync::OnceLock;
 use crate::compiler::state_extractor::StateExtractor;
+use crate::constants::{COMPONENT_ID_ATTR, COMPONENT_ID_PREFIX};
 
 /// Matches a `component(...)` state-registration call in a component's inline
 /// script. The `\b` keeps it from firing on `subcomponent(`; resolvable or not,
@@ -136,7 +137,7 @@ impl ComponentTagger {
         })
     }
 
-    /// Recursively walk DOM, add data-vibe-component-id, and extract component state
+    /// Recursively walk DOM, add data-vibe-internal-component-id, and extract component state
     fn walk_tag_and_extract(
         node: &Handle,
         counter: &RefCell<usize>,
@@ -186,16 +187,16 @@ impl ComponentTagger {
                         _ => serde_json::Map::new(),
                     };
 
-                    let component_id = format!("_c{}", *counter.borrow());
+                    let component_id = format!("{}{}", COMPONENT_ID_PREFIX, *counter.borrow());
                     *counter.borrow_mut() += 1;
 
-                    // Add data-vibe-component-id attribute
+                    // Add data-vibe-internal-component-id attribute
                     let mut attrs_mut = attrs.borrow_mut();
                     attrs_mut.push(markup5ever::Attribute {
                         name: QualName::new(
                             None,
                             Namespace::from(""),
-                            LocalName::from("data-vibe-component-id"),
+                            LocalName::from(COMPONENT_ID_ATTR),
                         ),
                         value: component_id.clone().into(),
                     });
@@ -284,7 +285,7 @@ impl ComponentTagger {
     /// expressions) and inside if/each/else-if directive comments. Resolving the
     /// directives at build time is what lets a component-local `<!-- if this.x -->`
     /// work on compiled (manifest-restored) pages, where the runtime can't fall
-    /// back to a `data-vibe-component-id` ancestor lookup.
+    /// back to a `data-vibe-internal-component-id` ancestor lookup.
     fn rewrite_this_to_component_id(node: &Handle, component_id: &str) {
         use regex::Regex;
         // The whole `@[...]` binding; `this.` is resolved within it so nested
@@ -381,8 +382,8 @@ mod tests {
 
         let result = ComponentTagger::tag_components(html, &PathBuf::from(".")).unwrap();
 
-        // Should have data-vibe-component-id in output
-        assert!(result.html.contains("data-vibe-component-id=\"_c0\""));
+        // Should have data-vibe-internal-component-id in output
+        assert!(result.html.contains("data-vibe-internal-component-id=\"_c0\""));
     }
 
     #[test]
@@ -413,7 +414,7 @@ mod tests {
         let result = ComponentTagger::tag_components(html, &PathBuf::from(".")).unwrap();
 
         assert!(
-            result.html.contains("data-vibe-component-id=\"_c0\""),
+            result.html.contains("data-vibe-internal-component-id=\"_c0\""),
             "wrapper not tagged; html: {}",
             result.html
         );
@@ -431,7 +432,7 @@ mod tests {
         let result = ComponentTagger::tag_components(html, &PathBuf::from(".")).unwrap();
 
         assert!(
-            result.html.contains("data-vibe-component-id=\"_c0\""),
+            result.html.contains("data-vibe-internal-component-id=\"_c0\""),
             "runtime-built-state component not tagged: {}",
             result.html
         );
@@ -475,8 +476,8 @@ mod tests {
         let result = ComponentTagger::tag_components(html, &PathBuf::from(".")).unwrap();
 
         // Should have _c0, _c1, _c2
-        assert!(result.html.contains("data-vibe-component-id=\"_c0\""));
-        assert!(result.html.contains("data-vibe-component-id=\"_c1\""));
-        assert!(result.html.contains("data-vibe-component-id=\"_c2\""));
+        assert!(result.html.contains("data-vibe-internal-component-id=\"_c0\""));
+        assert!(result.html.contains("data-vibe-internal-component-id=\"_c1\""));
+        assert!(result.html.contains("data-vibe-internal-component-id=\"_c2\""));
     }
 }

package/src/compiler/iteration_optimizer.rs

@@ -1,6 +1,7 @@
 use regex::Regex;
 use serde::{Serialize, Deserialize};
 use std::collections::HashMap;
+use crate::constants::NAMEBIND_ATTR;
 
 #[derive(Debug, Clone, Serialize, Deserialize)]
 #[serde(rename_all = "camelCase")]
@@ -157,12 +158,12 @@ const VALUE_ATTRS: &[&str] = &[
 
 /// Whether an attribute keeps its string value (vs boolean coercion).
 /// Mirrors isValueStyleAttr in runtime/iterate.js.
-/// Turn ` data-vibe-namebind="@[A]@[B]"` back into ` @[A]="" @[B]=""` so each relocated
+/// Turn ` data-vibe-internal-namebind="@[A]@[B]"` back into ` @[A]="" @[B]=""` so each relocated
 /// binding is rendered as a name-binding (` resolvedName=""`) rather than having its
 /// resolved value written into the transport attribute. See name_binding_protect.
 fn restore_relocated_name_bindings(template: &str) -> String {
     let wrapper = Regex::new(
-        r#"\s+data-vibe-namebind="((?:@\[(?:[^\[\]'"]|\[[^\]]*\]|'[^']*'|"[^"]*")+\])+)""#,
+        &format!(r#"\s+{}="((?:@\[(?:[^\[\]'"]|\[[^\]]*\]|'[^']*'|"[^"]*")+\])+)""#, NAMEBIND_ATTR),
     )
     .unwrap();
     let one = Regex::new(r#"@\[(?:[^\[\]'"]|\[[^\]]*\]|'[^']*'|"[^"]*")+\]"#).unwrap();
@@ -230,7 +231,7 @@ fn compile_template_to_batch_fn(
 /// Anything the runtime clone+hydrate path renders, this output has to render
 /// identically — it is the compiled twin of compileBatchFn in runtime/iterate.js.
 fn emit_template_literal(template: &str) -> String {
-    // Restore name-bindings the compiler relocated into `data-vibe-namebind` (their
+    // Restore name-bindings the compiler relocated into `data-vibe-internal-namebind` (their
     // expression has whitespace, so it could not be an HTML attribute name) back to the
     // `@[expr]=""` form the binding pass below renders as ` resolvedName=""`. The compiled
     // twin of the same step in runtime/iterate.js compileBatchFn.

package/src/compiler/manifest_builder.rs

@@ -139,7 +139,7 @@ impl ManifestBuilder {
                     let attr_value = attr.value.to_string();
 
                     // A relocated name-binding: its expression(s) live verbatim in the
-                    // VALUE of data-vibe-namebind because whitespace barred them from
+                    // VALUE of data-vibe-internal-namebind because whitespace barred them from
                     // attribute-name position. Treat the value as the name-binding — no
                     // case restoration needed (value attrs keep their case).
                     if attr_name == crate::compiler::name_binding_protect::NAME_BIND_ATTR {

package/src/compiler/name_binding_protect.rs

@@ -4,7 +4,7 @@ use std::sync::OnceLock;
 /// The attribute a relocated name-binding is parked in. Mirrors the runtime
 /// constant of the same name (runtime/constants.js) — the manifest builder reads
 /// the binding back out of it, and the runtime consumes + strips it on hydrate.
-pub const NAME_BIND_ATTR: &str = "data-vibe-namebind";
+pub const NAME_BIND_ATTR: &str = crate::constants::NAMEBIND_ATTR;
 
 /// A name-binding lives in attribute-NAME position: `<icon @[expr]>`. HTML parsers
 /// split an attribute token on whitespace, so once a prop is inlined into one and the
@@ -12,18 +12,18 @@ pub const NAME_BIND_ATTR: &str = "data-vibe-namebind";
 /// — html5ever (and the browser) tear it into broken attributes and the binding is lost.
 ///
 /// We relocate every whitespace-bearing name-binding into a single verbatim
-/// value-attribute `data-vibe-namebind="@[expr]@[expr2]…"`. Value attributes are kept
+/// value-attribute `data-vibe-internal-namebind="@[expr]@[expr2]…"`. Value attributes are kept
 /// byte-for-byte through parsing, so the manifest builder recovers the exact expression
 /// and the runtime evaluates it through the same path it uses in non-compiled mode —
 /// identical behaviour, no expression rewriting. Whitespace-free name-bindings already
 /// survive as-is and are left untouched.
 pub fn protect(html: &str) -> String {
-    // <script>/<style> bodies are raw text — a `<` inside them must not be read as a
-    // tag. Park them behind comment placeholders for the tag scan, restore after.
-    let (masked, raw_blocks) = mask_raw_text(html);
+    crate::inert::protect(html, relocate_bindings)
+}
 
-    let out = tag_open_regex()
-        .replace_all(&masked, |caps: &regex::Captures| {
+fn relocate_bindings(html: &str) -> String {
+    tag_open_regex()
+        .replace_all(html, |caps: &regex::Captures| {
             let name = &caps[1];
             let attrs = &caps[2];
             let (kept, relocated) = relocate_unsafe(attrs);
@@ -41,9 +41,7 @@ pub fn protect(html: &str) -> String {
                 name, body, NAME_BIND_ATTR, relocated, self_close
             )
         })
-        .to_string();
-
-    restore_raw_text(&out, &raw_blocks)
+        .to_string()
 }
 
 /// Matches an opening tag and captures (name, attribute-section). Quoted values may
@@ -124,33 +122,6 @@ fn relocate_unsafe(attrs: &str) -> (String, String) {
     (kept, relocated)
 }
 
-fn raw_text_regex() -> &'static Regex {
-    static RE: OnceLock<Regex> = OnceLock::new();
-    RE.get_or_init(|| Regex::new(r"(?is)<(script|style)\b[^>]*>.*?</(?:script|style)>").unwrap())
-}
-
-fn mask_raw_text(html: &str) -> (String, Vec<String>) {
-    let mut blocks = Vec::new();
-    let mut out = String::with_capacity(html.len());
-    let mut last = 0;
-    for mat in raw_text_regex().find_iter(html) {
-        out.push_str(&html[last..mat.start()]);
-        out.push_str(&format!("<!--VIBE_RAWTEXT_{}-->", blocks.len()));
-        blocks.push(html[mat.start()..mat.end()].to_string());
-        last = mat.end();
-    }
-    out.push_str(&html[last..]);
-    (out, blocks)
-}
-
-fn restore_raw_text(html: &str, blocks: &[String]) -> String {
-    let mut out = html.to_string();
-    for (i, block) in blocks.iter().enumerate() {
-        out = out.replace(&format!("<!--VIBE_RAWTEXT_{}-->", i), block);
-    }
-    out
-}
-
 #[cfg(test)]
 mod tests {
     use super::*;
@@ -160,7 +131,7 @@ mod tests {
         let html = r#"<icon @[EQUIPMENT(item, true).element]></icon>"#;
         let out = protect(html);
         assert!(
-            out.contains(r#"data-vibe-namebind="@[EQUIPMENT(item, true).element]""#),
+            out.contains(r#"data-vibe-internal-namebind="@[EQUIPMENT(item, true).element]""#),
             "got: {}",
             out
         );
@@ -191,7 +162,7 @@ mod tests {
         let html = r#"<script>const x = "@[fn(a, b)]";</script><icon @[fn(a, b)]></icon>"#;
         let out = protect(html);
         assert!(out.contains(r#"const x = "@[fn(a, b)]";"#), "script mangled: {}", out);
-        assert!(out.contains(r#"data-vibe-namebind="@[fn(a, b)]""#), "got: {}", out);
+        assert!(out.contains(r#"data-vibe-internal-namebind="@[fn(a, b)]""#), "got: {}", out);
     }
 
     #[test]
@@ -199,7 +170,7 @@ mod tests {
         let html = r#"<el @[fn(a, b)] @[gn(c, d)]></el>"#;
         let out = protect(html);
         assert!(
-            out.contains(r#"data-vibe-namebind="@[fn(a, b)]@[gn(c, d)]""#),
+            out.contains(r#"data-vibe-internal-namebind="@[fn(a, b)]@[gn(c, d)]""#),
             "got: {}",
             out
         );

package/src/compiler/spa.rs

@@ -9,6 +9,7 @@
 // filter over pages, not a rework.
 
 use regex::Regex;
+use crate::constants::{SPA_FRAGMENTS_DIR, FOUC_ATTR};
 
 /// One page of the pages tree, dissected for SPA output.
 pub struct SpaPage {
@@ -247,7 +248,7 @@ pub fn dissect_page(rel_path: &str, html: &str) -> Result<SpaPage, String> {
     Ok(SpaPage {
         rel_path: rel_path.to_string(),
         route: route_for(rel_path),
-        src: format!("/components/vibe-spa/{}", rel_path),
+        src: format!("/components/{}/{}", SPA_FRAGMENTS_DIR, rel_path),
         title,
         fragment,
         head_items,
@@ -470,7 +471,7 @@ pub fn compose_shell(
     // hyperspeed manifest loading on it). The shell is compiled output:
     // strip the attribute from the union — there is nothing to flash, the
     // outlet is empty and fragments hydrate off-DOM before insertion.
-    body_attrs.retain(|(n, _)| n != "vibe-fouc");
+    body_attrs.retain(|(n, _)| n != FOUC_ATTR);
 
     let body_attr_str = body_attrs
         .iter()

package/src/compiler/value_stamper.rs

@@ -16,49 +16,8 @@ fn primitive_to_text(value: &Value) -> String {
     }
 }
 
-// Elements that should not have reactive bindings processed
-// Matches runtime/constants.js NON_REACTIVE_ELEMENTS
-const NON_REACTIVE_ELEMENTS: &[&str] = &["script", "head", "pre"];
-
-// Attributes where the string value is meaningful (should NOT be removed when falsy)
-// All other attributes are treated as boolean-like (removed when falsy)
-// Matches runtime/constants.js VALUE_ATTRS
-const VALUE_ATTRS: &[&str] = &[
-    // Global attributes
-    "class", "style", "id", "title", "lang", "dir", "tabindex", "accesskey",
-    "slot", "part", "is", "nonce", "popover", "anchor",
-    // Enumerated attributes
-    "contenteditable", "draggable", "spellcheck", "translate", "autocapitalize",
-    "inputmode", "enterkeyhint", "virtualkeyboardpolicy",
-    // URLs and sources
-    "href", "src", "action", "cite", "data", "poster", "srcset", "imagesrcset",
-    "formaction", "ping", "usemap", "manifest", "codebase",
-    // Form attributes
-    "name", "type", "value", "placeholder", "pattern", "min", "max", "step",
-    "minlength", "maxlength", "size", "accept", "autocomplete", "list", "form",
-    "formmethod", "formtarget", "formenctype", "wrap", "method", "enctype", "for", "dirname",
-    // Text/accessibility
-    "alt", "label", "summary", "abbr",
-    // Dimensions and layout
-    "width", "height", "cols", "rows", "span", "rowspan", "colspan",
-    "low", "high", "optimum",
-    // Link/resource hints
-    "target", "rel", "hreflang", "download", "as", "media", "charset",
-    "crossorigin", "integrity", "loading", "decoding", "fetchpriority",
-    "referrerpolicy", "blocking", "imagesizes", "sizes",
-    // Media
-    "preload", "kind", "srclang",
-    // Meta
-    "content", "http-equiv",
-    // iframe/embed
-    "sandbox", "allow", "srcdoc", "credentialless",
-    // Table
-    "headers", "scope",
-    // Datetime
-    "datetime",
-    // Object/embed legacy
-    "coords", "shape",
-];
+use crate::constants::{NON_REACTIVE_ELEMENTS, VALUE_ATTRS, DEHYDRATE_ATTR, NAMEBIND_ATTR, DEFER_ATTR_PREFIX};
+
 
 pub struct ValueStamper<'a> {
     state: &'a Value,
@@ -131,7 +90,7 @@ impl<'a> ValueStamper<'a> {
     pub fn stamp_html(&self, html: String) -> Result<String, String> {
         // Extract vibe-dehydrate content to protect it from processing
         // This prevents @[...] markers and iterations/conditionals from being processed
-        let dehydrate_regex = Regex::new(r"(?s)<template[^>]*\svibe-dehydrate[^>]*>.*?</template>").unwrap();
+        let dehydrate_regex = Regex::new(&format!(r"(?s)<template[^>]*\s{}[^>]*>.*?</template>", DEHYDRATE_ATTR)).unwrap();
         let mut dehydrate_placeholders: Vec<String> = Vec::new();
         let mut html_with_placeholders = html.clone();
 
@@ -160,7 +119,7 @@ impl<'a> ValueStamper<'a> {
 
         // Skip elements with vibe-dehydrate attribute (content should not be processed)
         // This is a secondary protection in case placeholders aren't used
-        let dehydrate_regex = Regex::new(r"(?s)<template[^>]*\svibe-dehydrate[^>]*>.*?</template>").unwrap();
+        let dehydrate_regex = Regex::new(&format!(r"(?s)<template[^>]*\s{}[^>]*>.*?</template>", DEHYDRATE_ATTR)).unwrap();
         for mat in dehydrate_regex.find_iter(&html) {
             skip_regions.push((mat.start(), mat.end()));
         }
@@ -185,52 +144,13 @@ impl<'a> ValueStamper<'a> {
         skip_regions.sort_by_key(|r| r.0);
 
         // Stamp bindings only in regions that are NOT in skip_regions
-        let mut result = String::new();
-        let mut last_pos = 0;
-
-        for binding_match in self.binding_regex.find_iter(&html) {
-            let match_start = binding_match.start();
-            let match_end = binding_match.end();
-
-            // Check if this binding is inside a skip region
-            let should_skip = skip_regions.iter().any(|(start, end)| {
-                match_start >= *start && match_end <= *end
-            });
-
-            // Add text before this match
-            result.push_str(&html[last_pos..match_start]);
-
-            if should_skip {
-                // Keep the binding marker as-is
-                result.push_str(binding_match.as_str());
-            } else {
-                // Stamp the binding
-                let caps = self.binding_regex.captures(binding_match.as_str()).unwrap();
-                let expr = &caps[1];
-                // A bare reference to a proven-constant global key (`@[version]`)
-                // stamps its build-time value. Any compound expression falls
-                // through to normal evaluation, where dynamic globals stay absent
-                // and the binding is left live for the runtime.
-                if let Some(text) = self.constant_texts.get(expr.trim()) {
-                    result.push_str(text);
-                } else {
-                    let stamped = self.eval_expression(expr)
-                        .unwrap_or_else(|| binding_match.as_str().to_string());
-                    result.push_str(&stamped);
-                }
-            }
-
-            last_pos = match_end;
-        }
-
-        // Add remaining text
-        result.push_str(&html[last_pos..]);
+        let (mut result, unresolved) = self.stamp_bindings_tracked(&html, &skip_regions);
 
         // Clean up attributes that still contain unresolved markers. Selective
         // mode keeps them: an unresolved marker there is runtime-owned state
         // (the outlet's `src="@[page.src]"`), not an absent iteration property.
         if !self.selective {
-            result = self.cleanup_unresolved_attributes(result);
+            result = self.cleanup_unresolved_attributes(result, &unresolved);
         }
 
         // Restore vibe-dehydrate content from placeholders
@@ -337,14 +257,10 @@ impl<'a> ValueStamper<'a> {
                     item_html = temp_stamper.render_conditionals(item_html)?;
 
                     // Finally stamp all bindings in this item's context
-                    item_html = temp_stamper.binding_regex.replace_all(&item_html, |caps: &Captures| {
-                        let expr = &caps[1];
-                        temp_stamper.eval_expression(expr)
-                            .unwrap_or_else(|| caps[0].to_string())
-                    }).to_string();
+                    let (stamped_item, item_unresolved) = temp_stamper.stamp_bindings_tracked(&item_html, &[]);
 
                     // Clean up attributes with unresolved markers (e.g., data-tutorial="@[item.id]" when item.id is undefined)
-                    item_html = temp_stamper.cleanup_unresolved_attributes(item_html);
+                    item_html = temp_stamper.cleanup_unresolved_attributes(stamped_item, &item_unresolved);
 
                     rendered_items.push(item_html);
                 }
@@ -744,14 +660,74 @@ impl<'a> ValueStamper<'a> {
     /// - Present with empty value when truthy (HTML5 boolean attribute syntax)
     /// Remove attributes that still contain unresolved markers (e.g., data-tutorial="@[item.id]")
     /// These occur when iterating over items where some don't have the referenced property
-    fn cleanup_unresolved_attributes(&self, html: String) -> String {
-        // Match attributes with marker values: attr="@[...]"
-        // Use non-greedy match and look for closing "]" at end of attribute value
-        let attr_with_marker = Regex::new(r#"\s+([\w-]+)="@\[.+?\]""#).unwrap();
-
-        attr_with_marker.replace_all(&html, |_caps: &Captures| {
-            // Remove the entire attribute when it has an unresolved marker
-            String::new()
+    /// Stamp every binding the state can resolve, keeping the rest as markers,
+    /// and record where each kept marker landed in the output so cleanup can
+    /// tell an unresolved binding apart from resolved data that happens to
+    /// contain literal binding syntax.
+    fn stamp_bindings_tracked(&self, html: &str, skip_regions: &[(usize, usize)]) -> (String, Vec<usize>) {
+        let mut result = String::new();
+        let mut unresolved: Vec<usize> = Vec::new();
+        let mut last_pos = 0;
+
+        for binding_match in self.binding_regex.find_iter(html) {
+            let match_start = binding_match.start();
+            let match_end = binding_match.end();
+
+            let should_skip = skip_regions.iter().any(|(start, end)| {
+                match_start >= *start && match_end <= *end
+            });
+
+            result.push_str(&html[last_pos..match_start]);
+
+            if should_skip {
+                result.push_str(binding_match.as_str());
+            } else {
+                let caps = self.binding_regex.captures(binding_match.as_str()).unwrap();
+                let expr = &caps[1];
+                // A bare reference to a proven-constant global key (`@[version]`)
+                // stamps its build-time value. Any compound expression falls
+                // through to normal evaluation, where dynamic globals stay absent
+                // and the binding is left live for the runtime.
+                if let Some(text) = self.constant_texts.get(expr.trim()) {
+                    result.push_str(text);
+                } else if let Some(stamped) = self.eval_expression(expr) {
+                    result.push_str(&stamped);
+                } else {
+                    unresolved.push(result.len());
+                    result.push_str(binding_match.as_str());
+                }
+            }
+
+            last_pos = match_end;
+        }
+
+        result.push_str(&html[last_pos..]);
+        (result, unresolved)
+    }
+
+    fn cleanup_unresolved_attributes(&self, html: String, unresolved: &[usize]) -> String {
+        // An attribute holding a genuinely unresolved binding is rewritten to
+        // its deferred data-vibe- form, so the browser never acts on the
+        // literal and the runtime folds it back at hydration. Attributes whose
+        // markers are resolved data are left verbatim.
+        let attr_with_marker = Regex::new(r#"\s([\w-]+)="([^"]*@\[[^"]*)""#).unwrap();
+
+        attr_with_marker.replace_all(&html, |caps: &Captures| {
+            let whole = caps.get(0).unwrap();
+            let carries_unresolved = unresolved
+                .iter()
+                .any(|pos| *pos >= whole.start() && *pos < whole.end());
+            if !carries_unresolved {
+                return caps[0].to_string();
+            }
+            let name = &caps[1];
+            if name == NAMEBIND_ATTR {
+                return String::new();
+            }
+            if name.starts_with(DEFER_ATTR_PREFIX) {
+                return caps[0].to_string();
+            }
+            format!(" {}{}=\"{}\"", DEFER_ATTR_PREFIX, name, &caps[2])
         }).to_string()
     }
 

package/src/compiler/watcher.rs

@@ -8,6 +8,7 @@ use regex::Regex;
 
 use super::{Compiler, compile::should_skip_path};
 use crate::config::Config;
+use crate::constants::{HYPERSPEED_DIR, MANIFEST_SUFFIX};
 
 /// Tracks which pages and components depend on which components
 pub struct DependencyGraph {
@@ -803,7 +804,7 @@ pub fn watch(config: Config, verbose: bool) -> std::result::Result<(), Box<dyn s
                                         }
 
                                         // Delete corresponding manifest
-                                        let manifest_path = canonical_output.join("vibe-hyperspeed").join(format!("{}.manifest.js", relative_path.display()));
+                                        let manifest_path = canonical_output.join(HYPERSPEED_DIR).join(format!("{}{}", relative_path.display(), MANIFEST_SUFFIX));
                                         if manifest_path.exists() {
                                             if let Err(e) = std::fs::remove_file(&manifest_path) {
                                                 eprintln!("{}: Failed to delete manifest {}: {}", "Warning".yellow(), manifest_path.display(), e);

package/src/constants.rs

@@ -0,0 +1,46 @@
+pub const DEFER_ATTR_PREFIX: &str = "data-vibe-";
+// Declared for the JS↔Rust drift check; the compiler only ever names the
+// derived attributes below, and narrowing to internal is DEFER_ATTR_PREFIX's job.
+#[allow(dead_code)]
+pub const INTERNAL_ATTR_PREFIX: &str = "data-vibe-internal-";
+pub const COMPONENT_ID_ATTR: &str = "data-vibe-internal-component-id";
+pub const NAMEBIND_ATTR: &str = "data-vibe-internal-namebind";
+pub const RECURSIVE_SRC_ATTR: &str = "data-vibe-internal-recursive-src";
+pub const CSS_COVER_ATTR: &str = "data-vibe-internal-cover";
+pub const CSS_LAYOUT_ATTR: &str = "data-vibe-internal-css";
+
+pub const FOUC_ATTR: &str = "vibe-fouc";
+pub const DEHYDRATE_ATTR: &str = "vibe-dehydrate";
+pub const MODULE_SCRIPT_TYPE: &str = "vibe-module";
+
+pub const HYPERSPEED_DIR: &str = "vibe-hyperspeed";
+pub const MANIFEST_SUFFIX: &str = ".manifest.js";
+pub const SPA_FRAGMENTS_DIR: &str = "vibe-spa";
+
+pub const COMPONENT_ID_PREFIX: &str = "_c";
+
+pub const NON_REACTIVE_ELEMENTS: &[&str] = &["script", "head", "pre"];
+
+pub const VALUE_ATTRS: &[&str] = &[
+    "class", "style", "id", "title", "lang", "dir", "tabindex", "accesskey",
+    "slot", "part", "is", "nonce", "popover", "anchor",
+    "contenteditable", "draggable", "spellcheck", "translate", "autocapitalize",
+    "inputmode", "enterkeyhint", "virtualkeyboardpolicy",
+    "href", "src", "action", "cite", "data", "poster", "srcset", "imagesrcset",
+    "formaction", "ping", "usemap", "manifest", "codebase",
+    "name", "type", "value", "placeholder", "pattern", "min", "max", "step",
+    "minlength", "maxlength", "size", "accept", "autocomplete", "list", "form",
+    "formmethod", "formtarget", "formenctype", "wrap", "method", "enctype", "for", "dirname",
+    "alt", "label", "summary", "abbr",
+    "width", "height", "cols", "rows", "span", "rowspan", "colspan",
+    "low", "high", "optimum",
+    "target", "rel", "hreflang", "download", "as", "media", "charset",
+    "crossorigin", "integrity", "loading", "decoding", "fetchpriority",
+    "referrerpolicy", "blocking", "imagesizes", "sizes",
+    "preload", "kind", "srclang",
+    "content", "http-equiv",
+    "sandbox", "allow", "srcdoc", "credentialless",
+    "headers", "scope",
+    "datetime",
+    "coords", "shape",
+];

package/src/inert.rs

@@ -0,0 +1,171 @@
+use regex::Regex;
+use std::sync::OnceLock;
+
+use crate::parser::html::HtmlParser;
+
+pub const DEHYDRATE_ATTR: &str = crate::constants::DEHYDRATE_ATTR;
+
+const RAW_TEXT_ELEMENTS: [&str; 2] = ["script", "style"];
+const NON_REACTIVE_ELEMENTS: [&str; 1] = ["pre"];
+
+#[derive(Default)]
+pub struct Inert {
+    blocks: Vec<String>,
+}
+
+impl Inert {
+    pub fn new() -> Self {
+        Self::default()
+    }
+
+    pub fn mask(&mut self, html: &str) -> String {
+        let mut out = String::with_capacity(html.len());
+        let mut cursor = 0;
+
+        while let Some(caps) = open_tag_regex().captures(&html[cursor..]) {
+            let open_tag = caps.get(0).unwrap();
+            let start = cursor + open_tag.start();
+            let after_open = cursor + open_tag.end();
+            let name = caps[1].to_ascii_lowercase();
+            let attrs = caps.get(2).map(|m| m.as_str()).unwrap_or("");
+
+            let region_end = if RAW_TEXT_ELEMENTS.contains(&name.as_str()) {
+                raw_text_end(html, after_open, &name)
+            } else if NON_REACTIVE_ELEMENTS.contains(&name.as_str()) || is_dehydrated(attrs) {
+                HtmlParser::find_matching_close(html, after_open, &name).map(|(_, end)| end)
+            } else {
+                None
+            };
+
+            match region_end {
+                Some(end) => {
+                    out.push_str(&html[cursor..start]);
+                    out.push_str(&placeholder(self.blocks.len()));
+                    self.blocks.push(html[start..end].to_string());
+                    cursor = end;
+                }
+                None => {
+                    out.push_str(&html[cursor..after_open]);
+                    cursor = after_open;
+                }
+            }
+        }
+
+        out.push_str(&html[cursor..]);
+        out
+    }
+
+    pub fn restore(&self, html: &str) -> String {
+        let mut out = html.to_string();
+        for (index, block) in self.blocks.iter().enumerate().rev() {
+            out = out.replace(&placeholder(index), block);
+        }
+        out
+    }
+}
+
+pub fn protect(html: &str, rewrite: impl FnOnce(&str) -> String) -> String {
+    let mut inert = Inert::new();
+    let masked = inert.mask(html);
+    inert.restore(&rewrite(&masked))
+}
+
+fn placeholder(index: usize) -> String {
+    format!("<!--vibe-inert-{}-->", index)
+}
+
+fn open_tag_regex() -> &'static Regex {
+    static RE: OnceLock<Regex> = OnceLock::new();
+    RE.get_or_init(|| {
+        Regex::new(r#"<([a-zA-Z][a-zA-Z0-9-]*)((?:"[^"]*"|'[^']*'|[^<>"'])*)>"#).unwrap()
+    })
+}
+
+fn close_tag_regex() -> &'static Regex {
+    static RE: OnceLock<Regex> = OnceLock::new();
+    RE.get_or_init(|| Regex::new(r"(?i)</([a-zA-Z][a-zA-Z0-9-]*)\s*>").unwrap())
+}
+
+fn dehydrate_regex() -> &'static Regex {
+    static RE: OnceLock<Regex> = OnceLock::new();
+    RE.get_or_init(|| {
+        Regex::new(&format!(
+            r#"(?i)(?:^|[\s"']){}(?:[\s="'/]|$)"#,
+            regex::escape(DEHYDRATE_ATTR)
+        ))
+        .unwrap()
+    })
+}
+
+fn is_dehydrated(attrs: &str) -> bool {
+    dehydrate_regex().is_match(attrs)
+}
+
+fn raw_text_end(html: &str, after_open: usize, name: &str) -> Option<usize> {
+    close_tag_regex()
+        .captures_iter(&html[after_open..])
+        .find(|caps| caps[1].eq_ignore_ascii_case(name))
+        .map(|caps| after_open + caps.get(0).unwrap().end())
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn masks_script_body_and_restores_it_verbatim() {
+        let html = r#"<a></a><script>const t = '<component src="/c.html"></component>';</script><b></b>"#;
+        let mut inert = Inert::new();
+        let masked = inert.mask(html);
+
+        assert!(!masked.contains("<component"), "script body still exposed: {masked}");
+        assert!(masked.contains("<a></a>") && masked.contains("<b></b>"));
+        assert_eq!(inert.restore(&masked), html);
+    }
+
+    #[test]
+    fn masks_dehydrated_subtree_by_attribute_and_by_class() {
+        let html = r#"<code vibe-dehydrate><badge></badge></code><code class="vibe-dehydrate"><badge></badge></code>"#;
+        let mut inert = Inert::new();
+        let masked = inert.mask(html);
+
+        assert!(!masked.contains("<badge>"), "dehydrated markup still exposed: {masked}");
+        assert_eq!(inert.restore(&masked), html);
+    }
+
+    #[test]
+    fn leaves_ordinary_markup_untouched() {
+        let html = r#"<page><component src="/c.html"></component><data-vibe-dehydrate-note></data-vibe-dehydrate-note></page>"#;
+        let mut inert = Inert::new();
+
+        assert_eq!(inert.mask(html), html);
+    }
+
+    #[test]
+    fn masks_nested_same_tag_to_the_matching_close() {
+        let html = r#"<pre><pre><badge></badge></pre></pre><badge></badge>"#;
+        let mut inert = Inert::new();
+        let masked = inert.mask(html);
+
+        assert_eq!(masked.matches("<badge>").count(), 1, "nesting mis-counted: {masked}");
+        assert_eq!(inert.restore(&masked), html);
+    }
+
+    #[test]
+    fn restores_regions_masked_inside_earlier_placeholders() {
+        let mut inert = Inert::new();
+        let outer = inert.mask("<pre>kept</pre>");
+        let nested = inert.mask(&format!("<pre>{}</pre>", outer));
+
+        assert!(!nested.contains("kept"));
+        assert_eq!(inert.restore(&nested), "<pre><pre>kept</pre></pre>");
+    }
+
+    #[test]
+    fn leaves_unterminated_region_unmasked() {
+        let html = r#"<page><pre><badge></badge></page>"#;
+        let mut inert = Inert::new();
+
+        assert_eq!(inert.mask(html), html);
+    }
+}

package/src/main.rs

@@ -1,4 +1,6 @@
 mod config;
+mod constants;
+mod inert;
 mod parser;
 mod compiler;
 

package/src/parser/html.rs

@@ -4,6 +4,8 @@ use std::collections::{HashMap, HashSet};
 use thiserror::Error;
 
 use super::element::{Element, ElementCache};
+use crate::inert::Inert;
+use crate::constants::{RECURSIVE_SRC_ATTR, MODULE_SCRIPT_TYPE};
 
 #[derive(Error, Debug)]
 pub enum ParseError {
@@ -158,7 +160,7 @@ impl HtmlParser {
         // escaped during cache build (see compile.rs::escape_recursive_src).
         // These are runtime-handled component references that the inliner
         // had to skip; the runtime needs them as real `src=` attributes.
-        result = result.replace("data-vibe-recursive-src=", "src=");
+        result = result.replace(&format!("{}=", RECURSIVE_SRC_ATTR), "src=");
 
         // Step 5: Restore DOCTYPE if it was present
         if let Some(dt) = doctype {
@@ -178,7 +180,8 @@ impl HtmlParser {
             return content.to_string(); // No custom elements to inline
         }
 
-        let mut result = content.to_string();
+        let mut inert = Inert::new();
+        let mut result = inert.mask(content);
         let mut changed = true;
         let mut iterations = 0;
         const MAX_ITERATIONS: usize = 10; // Reasonable limit for deeply nested custom elements
@@ -244,13 +247,13 @@ impl HtmlParser {
 
                     // Keep the wrapper for consistency with runtime (using generic <component> wrapper)
                     // No src attribute = wrapper won't be re-processed
-                    let wrapper = format!("<component>{}</component>", replacement);
+                    let wrapper = inert.mask(&format!("<component>{}</component>", replacement));
                     result.replace_range(start..end, &wrapper);
                 }
             }
         }
 
-        result
+        inert.restore(&result)
     }
 
     /// Recursively inline all <component> elements with their HTML content
@@ -262,7 +265,7 @@ impl HtmlParser {
     /// 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)> {
+    pub(crate) 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
@@ -324,7 +327,8 @@ impl HtmlParser {
     }
 
     pub fn inline_single_component(&self, content: &str, component_src: &str, component_content: &str) -> String {
-        let mut result = content.to_string();
+        let mut inert = Inert::new();
+        let mut result = inert.mask(content);
 
         // Normalize the src for matching
         let normalized_src = if component_src.starts_with("http://") || component_src.starts_with("https://") {
@@ -373,7 +377,7 @@ impl HtmlParser {
         // 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;
+            return inert.restore(&result);
         }
 
         // Replace from end to start (sorted descending by start position)
@@ -389,15 +393,16 @@ impl HtmlParser {
             replacement = replacement.replace("<slot/>", &slot_wrapped);
             replacement = replacement.replace("<slot />", &slot_wrapped);
 
-            let wrapper = format!("<component>{}</component>", replacement);
+            let wrapper = inert.mask(&format!("<component>{}</component>", replacement));
             result.replace_range(*start..*end, &wrapper);
         }
 
-        result
+        inert.restore(&result)
     }
 
     fn inline_component_elements(&self, content: &str, external_cache: &HashMap<String, String>) -> String {
-        let mut result = content.to_string();
+        let mut inert = Inert::new();
+        let mut result = inert.mask(content);
 
         // Match only the opening component tag — slot content is extracted via depth-counting
         // to correctly handle slot content containing </div> or nested <component> elements.
@@ -471,7 +476,7 @@ impl HtmlParser {
                     replacement = replacement.replace("<slot/>", &slot_wrapped);
                     replacement = replacement.replace("<slot />", &slot_wrapped);
 
-                    let wrapper = format!("<component>{}</component>", replacement);
+                    let wrapper = inert.mask(&format!("<component>{}</component>", replacement));
                     result.replace_range(start..end, &wrapper);
                     applied = true;
                     break;
@@ -483,7 +488,7 @@ impl HtmlParser {
             }
         }
 
-        result
+        inert.restore(&result)
     }
 
     /// Parse component props from attributes string, in source order.
@@ -514,7 +519,7 @@ impl HtmlParser {
 /// 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\"")
+    html.replace("<script type=\"module\"", &format!("<script type=\"{}\"", MODULE_SCRIPT_TYPE))
 }
 
 /// A run of HTML attributes where `>` is permitted only inside a quoted value.
@@ -736,6 +741,10 @@ fn substitute_props(template: &str, props: &[(String, String)]) -> String {
 
 /// Transform custom HTML elements to divs with classes
 fn transform_custom_tags_to_divs(content: &str, reserved_elements: &[String]) -> String {
+    crate::inert::protect(content, |content| transform_custom_tags(content, reserved_elements))
+}
+
+fn transform_custom_tags(content: &str, reserved_elements: &[String]) -> String {
     let mut result = content.to_string();
 
     // Standard HTML5 elements (should not be transformed)
@@ -986,6 +995,116 @@ mod tests {
         );
     }
 
+    #[test]
+    fn component_tag_inside_script_string_is_not_inlined() {
+        let parser = HtmlParser::new(std::path::PathBuf::from("."));
+        let page = concat!(
+            r#"<page><script>const tpl = '<component src="/components/Badge.html"></component>';</script>"#,
+            r#"<component src="/components/Badge.html"></component></page>"#,
+        );
+        let mut cache = HashMap::new();
+        cache.insert("/components/Badge.html".to_string(), "<badge-pill>hi</badge-pill>".to_string());
+
+        let out = parser.inline_component_elements(page, &cache);
+
+        assert!(
+            out.contains(r#"const tpl = '<component src="/components/Badge.html"></component>';"#),
+            "script string literal was rewritten: {out}"
+        );
+        assert!(
+            out.contains("<component><badge-pill>hi</badge-pill></component>"),
+            "the real component was not inlined: {out}"
+        );
+        assert_eq!(out.matches("<badge-pill>").count(), 1, "template leaked into the script: {out}");
+    }
+
+    #[test]
+    fn component_tag_inside_dehydrate_block_is_not_inlined() {
+        let parser = HtmlParser::new(std::path::PathBuf::from("."));
+        let page = concat!(
+            r#"<docs><code vibe-dehydrate><component src="/components/Badge.html"></component></code>"#,
+            r#"<component src="/components/Badge.html"></component></docs>"#,
+        );
+        let mut cache = HashMap::new();
+        cache.insert("/components/Badge.html".to_string(), "<badge-pill>hi</badge-pill>".to_string());
+
+        let out = parser.inline_component_elements(page, &cache);
+
+        assert!(
+            out.contains(r#"<code vibe-dehydrate><component src="/components/Badge.html"></component></code>"#),
+            "dehydrated markup was inlined: {out}"
+        );
+        assert_eq!(out.matches("<badge-pill>").count(), 1, "template leaked into the dehydrate block: {out}");
+    }
+
+    #[test]
+    fn component_tag_inside_pre_is_not_inlined() {
+        let parser = HtmlParser::new(std::path::PathBuf::from("."));
+        let page = concat!(
+            r#"<docs><pre><component src="/components/Badge.html"></component></pre>"#,
+            r#"<component src="/components/Badge.html"></component></docs>"#,
+        );
+        let mut cache = HashMap::new();
+        cache.insert("/components/Badge.html".to_string(), "<badge-pill>hi</badge-pill>".to_string());
+
+        let out = parser.inline_component_elements(page, &cache);
+
+        assert!(
+            out.contains(r#"<pre><component src="/components/Badge.html"></component></pre>"#),
+            "markup inside <pre> was inlined: {out}"
+        );
+        assert_eq!(out.matches("<badge-pill>").count(), 1, "template leaked into the <pre>: {out}");
+    }
+
+    #[test]
+    fn custom_element_inside_script_string_is_not_inlined() {
+        let mut parser = HtmlParser::new(std::path::PathBuf::from("."));
+        parser.cache.insert(
+            "badge".to_string(),
+            Element::new(
+                "badge".to_string(),
+                std::path::PathBuf::from("badge.html"),
+                "<badge-pill>hi</badge-pill>".to_string(),
+            ),
+        );
+
+        let page = concat!(
+            r#"<page><script>el.innerHTML = '<badge></badge>';</script>"#,
+            r#"<badge></badge></page>"#,
+        );
+
+        let out = parser.inline_custom_elements(page);
+
+        assert!(
+            out.contains(r#"el.innerHTML = '<badge></badge>';"#),
+            "script string literal was rewritten: {out}"
+        );
+        assert_eq!(out.matches("<badge-pill>").count(), 1, "template leaked into the script: {out}");
+    }
+
+    #[test]
+    fn custom_element_inside_dehydrate_block_is_not_inlined() {
+        let mut parser = HtmlParser::new(std::path::PathBuf::from("."));
+        parser.cache.insert(
+            "badge".to_string(),
+            Element::new(
+                "badge".to_string(),
+                std::path::PathBuf::from("badge.html"),
+                "<badge-pill>hi</badge-pill>".to_string(),
+            ),
+        );
+
+        let page = r#"<docs><code vibe-dehydrate><badge></badge></code><badge></badge></docs>"#;
+
+        let out = parser.inline_custom_elements(page);
+
+        assert!(
+            out.contains(r#"<code vibe-dehydrate><badge></badge></code>"#),
+            "dehydrated markup was inlined: {out}"
+        );
+        assert_eq!(out.matches("<badge-pill>").count(), 1, "template leaked into the dehydrate block: {out}");
+    }
+
     #[test]
     fn ordinary_component_still_inlines() {
         // Guard: a normal component (root is NOT an array-literal each) must still