@ape-egg/vibe 2.1.3 → 2.1.4

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.1.4] - 2026-06-18
+
+### Fixed
+
+- **Compiler 1.9.0 → 1.9.1 — `--minify` broke `<script>` and `<style>` blocks** (`compiler/src/compiler/compile.rs`) — `minify_html` only treated `<pre>` as whitespace-significant. Collapsing newlines inside a `<script>` turned a `//` line comment (or any ASI-dependent break) into a single line, so the comment swallowed the rest of the script and `new Function` threw a `SyntaxError` at runtime; `<style>` blocks were likewise flattened. Both tags now join `<pre>` as raw blocks emitted line-for-line, while the surrounding HTML still minifies normally. Repro: `minify_preserves_script_newlines_so_line_comments_dont_swallow_code`, `minify_preserves_style_newlines` (`compile.rs` unit tests).
+- **Compiler 1.9.0 → 1.9.1 — component inliner overshot on end tags split across lines** (`compiler/src/parser/html.rs`) — `find_matching_close` matched `</tag>` exactly, but whitespace-controlled markup can split an end tag (`</component\n>`), which HTML permits. The depth counter then counted the nested open without ever seeing its close, so the outer-close search ran past the real boundary and swallowed every following sibling into the component. The close-tag regex now tolerates whitespace before `>` (`</tag\s*>`); `\s*` can't bridge into `</tag-foo>`, so matching stays exact on the tag name. Repro: `find_matching_close_tolerates_whitespace_in_end_tag` (`html.rs` unit test).
+
 ## [2.1.3] - 2026-06-18
 
 ### Added

package/compiler/src/Cargo.lock

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

package/compiler/src/Cargo.toml

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

package/compiler/src/compiler/compile.rs

@@ -1969,20 +1969,28 @@ fn copy_dir_recursive(src: &Path, dest: &Path) -> Result<(), CompileError> {
 /// Basic HTML minification
 fn minify_html(html: &str) -> String {
     let mut result = String::with_capacity(html.len());
-    let mut in_pre = false;
+    let mut in_raw = false;
     let mut last_was_space = false;
 
     for line in html.lines() {
         let trimmed = line.trim();
 
-        if trimmed.contains("<pre") {
-            in_pre = true;
+        // <pre>, <script> and <style> carry significant whitespace and must
+        // survive minification verbatim: <pre> is literal text, while a JS
+        // `//` line comment or ASI in <script> breaks the moment its trailing
+        // newline is collapsed into a space (the comment swallows the rest of
+        // the script). Keep these blocks line-for-line, exactly as <pre> always
+        // did. The opening-tag line enters the block before we emit it; the
+        // closing-tag line leaves it (and collapses, which only tightens the
+        // bare `</pre>` / `</script>` / `</style>`).
+        if trimmed.contains("<pre") || trimmed.contains("<script") || trimmed.contains("<style") {
+            in_raw = true;
         }
-        if trimmed.contains("</pre>") {
-            in_pre = false;
+        if trimmed.contains("</pre>") || trimmed.contains("</script>") || trimmed.contains("</style>") {
+            in_raw = false;
         }
 
-        if in_pre {
+        if in_raw {
             result.push_str(line);
             result.push('\n');
             last_was_space = false;
@@ -2028,3 +2036,50 @@ fn find_bytes_ci(haystack: &[u8], needle: &[u8], from: usize) -> Option<usize> {
 fn count_newlines(bytes: &[u8]) -> usize {
     bytes.iter().filter(|&&b| b == b'\n').count()
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn minify_preserves_script_newlines_so_line_comments_dont_swallow_code() {
+        // A `//` line comment inside a component script relies on its trailing
+        // newline. If minify collapses newlines into spaces, the comment eats
+        // the rest of the script → SyntaxError at runtime (new Function).
+        let html = "<page>\n\
+            <script type=\"module\">\n\
+            \x20 const a = 1; // explain a\n\
+            \x20 // keep explaining\n\
+            \x20 const b = 2;\n\
+            </script>\n\
+            </page>";
+
+        let out = minify_html(html);
+
+        // The code after the comments must still be reachable, i.e. on its own
+        // line rather than glued behind the `//`.
+        let script = &out[out.find("<script").unwrap()..out.find("</script>").unwrap()];
+        assert!(
+            script.contains('\n'),
+            "script newlines were collapsed, // comment swallows following code: {script:?}"
+        );
+        assert!(out.contains("const b = 2"), "code after // comment lost: {out:?}");
+
+        // Surrounding HTML must still be minified (tag boundaries tightened).
+        assert!(out.contains("<page><script"), "non-script HTML not minified: {out:?}");
+    }
+
+    #[test]
+    fn minify_preserves_style_newlines() {
+        let html = "<page>\n\
+            <style>\n\
+            \x20 a { color: red; }\n\
+            \x20 b { color: blue; }\n\
+            </style>\n\
+            </page>";
+
+        let out = minify_html(html);
+        let style = &out[out.find("<style").unwrap()..out.find("</style>").unwrap()];
+        assert!(style.contains('\n'), "style newlines collapsed: {style:?}");
+    }
+}

package/compiler/src/compiler/component_tagger.rs

@@ -1,7 +1,7 @@
 use html5ever::parse_document;
 use html5ever::tendril::TendrilSink;
 use html5ever::serialize::{serialize, SerializeOpts};
-use markup5ever_rcdom::{RcDom, NodeData, Handle, SerializableHandle};
+use markup5ever_rcdom::{RcDom, NodeData, Handle, Node, SerializableHandle};
 use markup5ever::{QualName, LocalName, Namespace};
 use regex::Regex;
 use serde_json::Value;
@@ -137,15 +137,26 @@ impl ComponentTagger {
                 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_bytes = Vec::new();
-                            let _ = serialize(
-                                &mut script_bytes,
-                                &SerializableHandle::from(child.clone()),
-                                SerializeOpts::default()
-                            );
-                            if let Ok(script_str) = String::from_utf8(script_bytes) {
-                                direct_scripts_html.push_str(&script_str);
+                            // 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>");
                         }
                     }
                 }
@@ -200,36 +211,84 @@ impl ComponentTagger {
         })
     }
 
-    /// Rewrite this.property to componentId.property in a node's subtree
+    /// 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
+    /// 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.
     fn rewrite_this_to_component_id(node: &Handle, component_id: &str) {
         use regex::Regex;
-        let this_regex = Regex::new(r"@\[this\.(\w+)\]").unwrap();
+        // The whole `@[...]` binding; `this.` is resolved within it so nested
+        // paths (this.x.y) and expressions (this.a + this.b) are all covered.
+        let binding_regex = Regex::new(r"@\[[^\]]*\]").unwrap();
+        let this_prop = Regex::new(r"\bthis\.").unwrap();
+        // `$.this.X` writes that live in event-handler bodies (onclick="$.this.mode
+        // = 'edit'"), outside any `@[...]`. The runtime lowers these via its
+        // STATE_THIS_PROP_REGEX pass (runtime/component.js); the compiler must do
+        // the same or compiled pages ship a literal `$.this.X` that resolves to
+        // undefined when the native handler fires.
+        let state_this_prop = Regex::new(r"\$\.this\.(\w+)").unwrap();
+        Self::rewrite_node_recursive(node, &binding_regex, &this_prop, &state_this_prop, component_id);
+    }
 
-        // Recursively walk the node and all descendants
-        Self::rewrite_node_recursive(node, &this_regex, component_id);
+    /// Resolve `this.` to `componentId.` inside every `@[...]` binding in a string.
+    fn rewrite_bindings(s: &str, binding_regex: &Regex, this_prop: &Regex, component_id: &str) -> String {
+        let replacement = format!("{}.", component_id);
+        binding_regex
+            .replace_all(s, |caps: &regex::Captures| {
+                this_prop.replace_all(&caps[0], replacement.as_str()).to_string()
+            })
+            .to_string()
     }
 
-    /// Recursively rewrite this.property in text nodes and attributes
-    fn rewrite_node_recursive(node: &Handle, regex: &Regex, component_id: &str) {
-        // Rewrite text content
+    /// Recursively rewrite this.property in text, attributes, and directive comments
+    fn rewrite_node_recursive(node: &Handle, binding_regex: &Regex, this_prop: &Regex, state_this_prop: &Regex, component_id: &str) {
+        // Rewrite text content bindings
         if let NodeData::Text { ref contents } = node.data {
             let mut text = contents.borrow_mut();
-            let new_text = regex.replace_all(&text, format!("@[{}.$1]", component_id));
-            *text = new_text.to_string().into();
+            let new_text = Self::rewrite_bindings(&text, binding_regex, this_prop, component_id);
+            *text = new_text.into();
         }
 
-        // Rewrite attributes
+        // Rewrite attribute bindings (`@[...]`) and event-handler `$.this.X` writes.
         if let NodeData::Element { ref attrs, .. } = node.data {
             let mut attrs_mut = attrs.borrow_mut();
             for attr in attrs_mut.iter_mut() {
-                let new_value = regex.replace_all(&attr.value, format!("@[{}.$1]", component_id));
-                attr.value = new_value.to_string().into();
+                let mut new_value = Self::rewrite_bindings(&attr.value, binding_regex, this_prop, component_id);
+                if new_value.contains("$.this.") {
+                    new_value = state_this_prop
+                        .replace_all(&new_value, |c: &regex::Captures| format!("$.{}.{}", component_id, &c[1]))
+                        .to_string();
+                }
+                attr.value = new_value.into();
+            }
+        }
+
+        // Directive comments are immutable in the RcDom, so swap any if/each/else-if
+        // comment carrying a `this.` expression for a freshly-built comment node.
+        {
+            let mut children = node.children.borrow_mut();
+            for child in children.iter_mut() {
+                if let NodeData::Comment { ref contents } = child.data {
+                    let text = contents.to_string();
+                    let trimmed = text.trim_start();
+                    let is_directive = trimmed.starts_with("if ")
+                        || trimmed.starts_with("each ")
+                        || trimmed.starts_with("else if ");
+                    if is_directive && text.contains("this.") {
+                        let new_text = this_prop
+                            .replace_all(&text, format!("{}.", component_id).as_str())
+                            .to_string();
+                        *child = Node::new(NodeData::Comment { contents: new_text.into() });
+                    }
+                }
             }
         }
 
         // Recurse into children
         for child in node.children.borrow().iter() {
-            Self::rewrite_node_recursive(child, regex, component_id);
+            Self::rewrite_node_recursive(child, binding_regex, this_prop, state_this_prop, component_id);
         }
     }
 }
@@ -238,6 +297,10 @@ impl ComponentTagger {
 mod tests {
     use super::*;
 
+
+
+
+
     #[test]
     fn tag_single_component() {
         let html = r#"<!DOCTYPE html><html><body><component><script>component({ count: 0 })</script><div>@[this.count]</div></component></body></html>"#;
@@ -248,6 +311,40 @@ mod tests {
         assert!(result.html.contains("data-vibe-component-id=\"_c0\""));
     }
 
+    #[test]
+    fn rewrites_this_in_directive_comments_and_nested_bindings() {
+        // Conditionals/iterations keep `this.` in their directive comments and
+        // bindings can be nested (this.x.y). Compiled (manifest-restored) pages
+        // can't resolve `this.` via a runtime wrapper-tag lookup, so the compiler
+        // must resolve it to the component id at build time.
+        let html = r#"<!DOCTYPE html><html><body><component><script>const s = { x: null }; component(s);</script><page-content><!-- if this.x --><span>@[this.x.name]</span><!-- /if --><!-- each this.items as it --><b>@[it]</b><!-- /each --></page-content></component></body></html>"#;
+
+        let result = ComponentTagger::tag_components(html, &PathBuf::from(".")).unwrap();
+
+        assert!(result.html.contains("if _c0.x"), "if comment not rewritten: {}", result.html);
+        assert!(result.html.contains("@[_c0.x.name]"), "nested binding not rewritten: {}", result.html);
+        assert!(result.html.contains("each _c0.items as it"), "each comment not rewritten: {}", result.html);
+        // A non-this global expression must be left alone.
+        assert!(!result.html.contains("_c0.items as _c0"), "over-rewrote loop alias: {}", result.html);
+    }
+
+    #[test]
+    fn tag_component_called_with_variable() {
+        // BrawlerDetailContent shape: state held in a `const`, passed to
+        // component(state) as a bare identifier, with a top-level
+        // `<!-- if this.X -->`. The wrapper must still be tagged so the
+        // conditional can resolve `this.` at runtime.
+        let html = r#"<!DOCTYPE html><html><body><component><script>const state = { currentCharacter: null }; component(state);</script><page-content><!-- if this.currentCharacter --><span>@[this.currentCharacter]</span><!-- /if --></page-content></component></body></html>"#;
+
+        let result = ComponentTagger::tag_components(html, &PathBuf::from(".")).unwrap();
+
+        assert!(
+            result.html.contains("data-vibe-component-id=\"_c0\""),
+            "wrapper not tagged; html: {}",
+            result.html
+        );
+    }
+
     #[test]
     fn tag_multiple_components() {
         let html = r#"<!DOCTYPE html><html><body><component></component><component></component><component></component></body></html>"#;

package/compiler/src/compiler/js_analyzer.rs

@@ -554,6 +554,63 @@ mod tests {
         assert_eq!(state["c"].as_f64().unwrap(), 3.0);
     }
 
+    #[test]
+    fn test_component_called_with_variable() {
+        // component(state) — the whole argument is a variable bound to an object
+        // literal above (BrawlerDetailContent does exactly this). The extractor
+        // must resolve the variable; otherwise the component wrapper is never
+        // tagged and its `this.` conditionals can't resolve at runtime.
+        let mut analyzer = JsAnalyzer::new(PathBuf::from("."));
+        let script = r#"
+            const state = {
+              currentCharacter: null,
+              currentSlots: [],
+              currentLastTickEnd: 0,
+            };
+            setupCharacter(state);
+            const id = component(state);
+        "#;
+
+        let state = analyzer.extract_state(script).expect("state should be extracted");
+        assert!(state.get("currentCharacter").is_some(), "got: {state}");
+        assert_eq!(state["currentLastTickEnd"].as_f64().unwrap(), 0.0);
+    }
+
+    #[test]
+    fn test_component_var_amid_realistic_script() {
+        // Mirrors BrawlerDetailContent's script shape: top-level imports, a
+        // dynamic import().then(), an empty `catch {}`, optional chaining, and
+        // `component(state)`. A parse failure on any of these makes extract_state
+        // return None and the component goes untagged.
+        let mut analyzer = JsAnalyzer::new(PathBuf::from("."));
+        let script = r#"
+            import CHARACTERS from '/js/constants/CHARACTERS.js';
+            import { buildEquipmentSlots, unequip } from '/js/equipment.js';
+
+            const backParam = new URLSearchParams(location.search).get('back') || '';
+            const state = {
+              currentCharacter: null,
+              currentSlots: [],
+              currentLastTickEnd: 0,
+              backUrl: backParam.startsWith('/') ? backParam : '',
+            };
+
+            const setupCharacter = (target) => {
+              const ref = $.characters?.[0];
+              try { ref.foo(); } catch {}
+              target.currentCharacter = ref;
+            };
+
+            setupCharacter(state);
+            const id = component(state);
+
+            import('/js/dnd.js').then(({ default: dnd }) => { dnd.init(); });
+        "#;
+
+        let state = analyzer.extract_state(script).expect("state should be extracted");
+        assert!(state.get("currentCharacter").is_some(), "got: {state}");
+    }
+
     #[test]
     fn test_absolute_path_import() {
         let mut analyzer = JsAnalyzer::new(PathBuf::from("/tmp"));

package/compiler/src/parser/html.rs

@@ -261,7 +261,11 @@ impl HtmlParser {
     fn find_matching_close(content: &str, after_open: usize, tag_name: &str) -> Option<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();
-        let close_re = regex::Regex::new(&format!(r"</{}>", regex::escape(tag_name))).unwrap();
+        // `\s*>` tolerates whitespace before the `>` of an end tag — HTML allows
+        // it, and whitespace-controlled markup splits end tags across lines
+        // (`</component\n>`). `\s*` can't bridge into `</component-foo>` (the `-`
+        // is neither whitespace nor `>`), so this stays exact on the tag name.
+        let close_re = regex::Regex::new(&format!(r"</{}\s*>", regex::escape(tag_name))).unwrap();
 
         let mut depth = 1i32;
         let mut cursor = after_open;
@@ -744,3 +748,31 @@ fn transform_custom_tags_to_divs(content: &str, reserved_elements: &[String]) ->
 
     result
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn find_matching_close_tolerates_whitespace_in_end_tag() {
+        // Whitespace-controlled markup splits an end tag across lines, e.g.
+        //   <icon-cell
+        //     ><component src="x"></component
+        //   ></icon-cell>
+        // which reaches the inliner as `</component\n>`. HTML permits
+        // whitespace before the `>` of an end tag, so the depth counter must
+        // treat `</component\n>` as the nested close. If it doesn't, the nested
+        // open is counted but never closed and the OUTER close search overshoots,
+        // swallowing every following sibling into the component.
+        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")
+            .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");
+    }
+}

package/package.json

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

package/runtime/pre-compiled-manifest.js

@@ -126,6 +126,98 @@ export const buildHyperspeedManifest = (parsedTree) => {
 let hyperspeedData = null;
 let hyperspeedDetectionAttempted = false;
 
+/**
+ * Build the ordered list of manifest URLs to try for a page, most-likely first.
+ *
+ * `pathname` is window.location.pathname; `route` is the optional route template
+ * the page declares (window.__ROUTE__, e.g. "/brawlers/:index"). When the route
+ * marks a segment dynamic with `:param`, the compiler has collapsed that segment
+ * to `$` in the manifest path — so we point straight at the tokenized manifest
+ * instead of probing literal paths (`/brawlers/0.html.manifest.js`) that are
+ * guaranteed to 404. Without the route hint the original literal-first strategies
+ * apply unchanged. The result is de-duplicated (subdirectory pages otherwise
+ * produce the same candidate twice).
+ *
+ * @param {string} pathname
+ * @param {string|null|undefined} route
+ * @returns {string[]}
+ */
+export const buildManifestCandidatePaths = (pathname, route) => {
+  let pagePath = pathname;
+
+  // Normalize path: handle directory URLs and missing extensions
+  if (pagePath.endsWith("/")) {
+    pagePath = pagePath + "index.html";
+  } else if (!pagePath.includes(".")) {
+    const lastSlash = pagePath.lastIndexOf("/");
+    const lastSegment = pagePath.substring(lastSlash + 1);
+    if (lastSegment && !lastSegment.includes(".")) {
+      pagePath = pagePath + ".html";
+    }
+  }
+
+  const pathSegments = pagePath.split("/").filter((s) => s);
+  if (pathSegments.length === 0) return [];
+
+  const fileName = pathSegments[pathSegments.length - 1];
+  const dirSegments = pathSegments.slice(0, -1);
+
+  const possiblePaths = [];
+
+  // Route-aware fast path: a `:segment` in the declared route is a dynamic param
+  // the compiler tokenized to `$`. Tokenize exactly those positions (params can
+  // sit mid-path, e.g. /a/:id/b) and try that manifest first — a direct hit, no
+  // 404 probing. Skipped entirely when no route is declared.
+  const routeSegments = route ? route.split("/").filter((s) => s) : null;
+  if (routeSegments && routeSegments.some((s) => s.startsWith(":"))) {
+    const tokenized = pathSegments.map((seg, i) => {
+      if (!routeSegments[i]?.startsWith(":")) return seg;
+      const dot = seg.indexOf(".");
+      return dot >= 0 ? "$" + seg.slice(dot) : "$";
+    });
+    possiblePaths.push(`/vibe-hyperspeed/${tokenized.join("/")}.manifest.js`);
+  }
+
+  // Strategy 1: vibe-hyperspeed at the same level as parent directory
+  // /compiled/playground/test.html -> /compiled/vibe-hyperspeed/playground/test.html.manifest.js
+  if (dirSegments.length >= 1) {
+    const subPath = dirSegments.slice(1).join("/"); // Everything after first dir
+    const baseDir = "/" + dirSegments[0]; // First directory segment
+    possiblePaths.push(
+      `${baseDir}/vibe-hyperspeed/${subPath ? subPath + "/" : ""}${fileName}.manifest.js`,
+    );
+  }
+
+  // Strategy 2: vibe-hyperspeed at web root (original behavior)
+  // /compiled/playground/test.html -> /vibe-hyperspeed/compiled/playground/test.html.manifest.js
+  possiblePaths.push(`/vibe-hyperspeed${pagePath}.manifest.js`);
+
+  // Strategy 3: vibe-hyperspeed relative to immediate parent
+  // /playground/test.html -> /vibe-hyperspeed/playground/test.html.manifest.js
+  if (dirSegments.length > 0) {
+    const relativePath = dirSegments.join("/");
+    possiblePaths.push(
+      `/vibe-hyperspeed/${relativePath}/${fileName}.manifest.js`,
+    );
+  }
+
+  // Strategy 4: dynamic routes without a declared route. The compiler collapses a
+  // `$param` segment to a single `$` token (the-arena/$id.html ->
+  // the-arena/$.html.manifest.js), so a concrete URL only matches once its
+  // trailing segment is tokenized. Tried after the literal strategies, so static
+  // pages still win on an exact hit.
+  const dot = fileName.indexOf(".");
+  const tokenized = dot >= 0 ? "$" + fileName.slice(dot) : "$";
+  if (tokenized !== fileName) {
+    const dirPrefix = dirSegments.length ? `/${dirSegments.join("/")}` : "";
+    possiblePaths.push(`/vibe-hyperspeed${dirPrefix}/${tokenized}.manifest.js`);
+  }
+
+  // Subdirectory pages make strategies 2 and 3 collapse to the same URL — probe
+  // each candidate once.
+  return [...new Set(possiblePaths)];
+};
+
 /**
  * Detect page-specific manifest (async, cached after first call)
  * Returns { manifest, path } or null
@@ -143,66 +235,15 @@ const detectHyperspeed = async () => {
   const skipNetwork = !!document.querySelector("[vibe-fouc], .vibe-fouc");
 
   try {
-    let pagePath = window.location.pathname;
-
-    // Normalize path: handle directory URLs and missing extensions
-    if (pagePath.endsWith("/")) {
-      // /compiled/ -> /compiled/index.html
-      pagePath = pagePath + "index.html";
-    } else if (!pagePath.includes(".")) {
-      // /compiled/mypage -> /compiled/mypage.html
-      const lastSlash = pagePath.lastIndexOf("/");
-      const lastSegment = pagePath.substring(lastSlash + 1);
-      if (lastSegment && !lastSegment.includes(".")) {
-        pagePath = pagePath + ".html";
-      }
-    }
-
-    const pathSegments = pagePath.split("/").filter((s) => s);
-
-    if (pathSegments.length === 0) return null;
-
-    // Extract file name and directory parts
-    // For /compiled/playground/test.html -> ['compiled', 'playground', 'test.html']
-    const fileName = pathSegments[pathSegments.length - 1];
-    const dirSegments = pathSegments.slice(0, -1); // All parts except filename
-
-    // Build possible manifest paths
-    const possiblePaths = [];
-
-    // Strategy 1: vibe-hyperspeed at the same level as parent directory
-    // /compiled/playground/test.html -> /compiled/vibe-hyperspeed/playground/test.html.manifest.js
-    if (dirSegments.length >= 1) {
-      const subPath = dirSegments.slice(1).join("/"); // Everything after first dir
-      const baseDir = "/" + dirSegments[0]; // First directory segment
-      possiblePaths.push(
-        `${baseDir}/vibe-hyperspeed/${subPath ? subPath + "/" : ""}${fileName}.manifest.js`,
-      );
-    }
-
-    // Strategy 2: vibe-hyperspeed at web root (original behavior)
-    // /compiled/playground/test.html -> /vibe-hyperspeed/compiled/playground/test.html.manifest.js
-    possiblePaths.push(`/vibe-hyperspeed${pagePath}.manifest.js`);
-
-    // Strategy 3: vibe-hyperspeed relative to immediate parent
-    // /playground/test.html -> /vibe-hyperspeed/playground/test.html.manifest.js
-    if (dirSegments.length > 0) {
-      const relativePath = dirSegments.join("/");
-      possiblePaths.push(
-        `/vibe-hyperspeed/${relativePath}/${fileName}.manifest.js`,
-      );
-    }
-
-    // Strategy 4: dynamic routes. The compiler collapses a `$param` segment to a
-    // single `$` token (the-arena/$id.html -> the-arena/$.html.manifest.js), so a
-    // concrete URL only matches once its trailing segment is tokenized. Tried
-    // after the literal strategies, so static pages still win on an exact hit.
-    const dot = fileName.indexOf(".");
-    const tokenized = dot >= 0 ? "$" + fileName.slice(dot) : "$";
-    if (tokenized !== fileName) {
-      const dirPrefix = dirSegments.length ? `/${dirSegments.join("/")}` : "";
-      possiblePaths.push(`/vibe-hyperspeed${dirPrefix}/${tokenized}.manifest.js`);
-    }
+    // window.__ROUTE__ is the page's route template (e.g. "/brawlers/:index"),
+    // injected by the compiler/dev server for dynamic pages. It lets us resolve
+    // the tokenized `$` manifest directly instead of probing literal 404s.
+    const possiblePaths = buildManifestCandidatePaths(
+      window.location.pathname,
+      typeof window !== "undefined" ? window.__ROUTE__ : null,
+    );
+
+    if (possiblePaths.length === 0) return null;
 
     if (!skipNetwork) {
       // Fully-runtime dynamic import. Hidden behind `new Function` so any

package/runtime/pre-compiled-manifest.test.mjs

@@ -0,0 +1,58 @@
+import assert from 'node:assert';
+
+// The module runs a top-level `await detectHyperspeed()` that touches the DOM,
+// so stub the globals before importing it. querySelector returns truthy →
+// skipNetwork → no import() probing during module init.
+globalThis.window = { location: { pathname: '/' }, __ROUTE__: undefined };
+globalThis.document = { querySelector: () => ({}) };
+
+const { buildManifestCandidatePaths } = await import('./pre-compiled-manifest.js');
+
+let passed = 0;
+const test = (name, fn) => {
+  fn();
+  passed++;
+  console.log(`  ok - ${name}`);
+};
+
+// Dynamic route: window.__ROUTE__ tells us the trailing segment is a param, so
+// the very first candidate must be the tokenized `$` manifest — no literal
+// `0.html.manifest.js` probes that are guaranteed to 404.
+test('dynamic route resolves the $ manifest first (no literal probing)', () => {
+  const paths = buildManifestCandidatePaths('/brawlers/0', '/brawlers/:index');
+  assert.strictEqual(paths[0], '/vibe-hyperspeed/brawlers/$.html.manifest.js');
+  assert.ok(
+    !paths.includes('/vibe-hyperspeed/brawlers/0.html.manifest.js') ||
+      paths.indexOf('/vibe-hyperspeed/brawlers/$.html.manifest.js') <
+        paths.indexOf('/vibe-hyperspeed/brawlers/0.html.manifest.js'),
+    'tokenized path must come before any literal path',
+  );
+});
+
+// Mid-path params tokenize by position, not just the filename.
+test('tokenizes only the param segments named by the route', () => {
+  const paths = buildManifestCandidatePaths(
+    '/_internal/characters/troll',
+    '/_internal/characters/:key',
+  );
+  assert.strictEqual(
+    paths[0],
+    '/vibe-hyperspeed/_internal/characters/$.html.manifest.js',
+  );
+});
+
+// Static page: no route hint, behaviour unchanged, no duplicate candidates.
+test('static top-level page resolves cleanly with no duplicates', () => {
+  const paths = buildManifestCandidatePaths('/armory', null);
+  assert.ok(paths.includes('/vibe-hyperspeed/armory.html.manifest.js'));
+  assert.strictEqual(paths.length, new Set(paths).size, 'no duplicate candidates');
+});
+
+// Subdirectory static page: strategies 2 and 3 collapse to the same URL — it
+// must be probed once, not twice.
+test('subdirectory page dedupes identical candidates', () => {
+  const paths = buildManifestCandidatePaths('/foo/bar', null);
+  assert.strictEqual(paths.length, new Set(paths).size, 'no duplicate candidates');
+});
+
+console.log(`\n${passed} passed`);