@ape-egg/vibe 2.1.21 → 2.1.22

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [2.1.22] - 2026-07-02
+
+### Added
+
+- **`$.on('unmount', callback)` — scope-resolved teardown event** (`runtime/component.js`, `runtime/index.js`, `index.js`) — one event name, one concept ("this context is going away"), resolved by where you subscribe. **In a component `<script>`**: the callback runs when THAT component unmounts (conditional toggle, iteration removal, reactive-src swap) and before an HMR re-run of the same component id — the scoped-`$` proxy intercepts the event name and rides the exact registry `$.on(...)` unsubscribes already use (`__vibeComponentCleanups`, drained by `releaseOrphanedComponentState`/`runComponentCleanups`). No new lifecycle machinery. **At page level**: the same subscription fires on `pagehide` — the visitor navigating away or closing the tab. Deliberately NOT `visibilitychange`: a tab switch is not an unmount, the visitor comes back (separate `hide`/`show` visibility events can be added later without touching this). Closes the SPA-mode gap where a component-owned side effect (`setInterval`, `addEventListener`, a socket) outlived its component because nothing could reach the handle: `const t = setInterval(…); $.on('unmount', () => clearInterval(t))` is the whole story. Both scopes return an unsubscribe like every other `$.on`; the pre-boot placeholder queues `unmount` subscriptions like the other events (`index.js` `_pendingListeners`), so page-level registrations made before boot aren't dropped. Works identically in runtime and compiled modes (compiled `vibe-module` scripts run through the same scoped-`$` path). Tests: `e2e-runtime/component-unmount.html` + `tests/e2e/component-unmount.spec.js` (both modes: callback fires exactly once per component unmount, interval verifiably stops, remount registers fresh, page-level fires on pagehide via localStorage trace, unsubscribe cancels).
+- **Reactive component src — `<component src="@[page.src]">`** (`runtime/parse.js`, `runtime/hydrate.js`, `runtime/component.js`) — the SPA routing primitive: one wrapper that fetches whatever the bound state resolves to and **re-mounts when it changes**, replacing the `<!-- if -->`-ladder-per-route pattern. `parse.js` captures ONLY the `src` binding on fetched components (every other attribute is still a raw prop owned by processComponent); initial hydration resolves the binding *before* the fetch scan, so the first mount rides the normal pipeline unchanged. On a state change, hydrate routes the update to `remountComponent`, which aborts any in-flight fetch (`pendingFetches` deletes are now ownership-guarded so an aborted fetch's cleanup can't wipe a newer fetch's controller), re-fetches, and re-mounts; the authored props and slot content ride a remount context finalize stashes on each wrapper (`_vibeMountedSrc`/`_vibeRemountProps`/`_vibeSlotContent`), and the outgoing component's state is evicted by the existing removal pass. The subtle part: every mount **replaces** the wrapper, and the observer's removal handling prunes the replaced element's tree node — taking the binding knowledge with it. So the authored binding travels ON the wrapper as `data-vibe-src` (same transport idea as `data-vibe-namebind`): the replacement's reparse recaptures it from the DOM alone, keeping the knowledge alive across arbitrarily many navigations — DOM-first, no tree surgery. A state change landing inside the swap window still resolves through the `_vibeReplacedBy` chain (now path-compressed so detached intermediates stay collectable). Compiled mode works through the same runtime path with zero compiler changes: inlining structurally skips a bound src (the target is unknowable at build time), the stamper resolves the initial value, and the manifest carries the binding — locked in by `tests/compiler/component-src-binding/`. Tests: `tests/unit/parse.test.js` (bound-src + data-vibe-src capture), `e2e-runtime/component-src-binding.html` + `tests/e2e/component-src-binding.spec.js` (both modes: initial mount, swap, prop/slot survival across re-mounts, state eviction, same-src no-op, post-swap interactivity).
+
+### Fixed
+
+- **Deep-link reloads on catch-all routes hydrated blank — manifest resolution didn't understand `:name*`** (`runtime/pre-compiled-manifest.js`) — the route-aware manifest fast path tokenizes `:param` positions of `window.__ROUTE__` *by segment index*, which is meaningless for a trailing catch-all that matches zero-or-more segments: for `/x/fighter/7` under route `/x/:route*` it produced `/vibe-hyperspeed/x/$/7.html.manifest.js` (and the literal fallbacks 404'd too), so a compiled catch-all page (`pages/x/$$route.html`, the SPA-shell convention) went blank on every reload/deep link while client-side navigation worked. The compiler collapses `$$name.html` to the same `$` manifest token as a single `$param`, so there is exactly ONE manifest for every depth — `buildManifestCandidatePaths` now detects a trailing `:name*` and emits `<static-prefix>/$.html.manifest.js` (prefix `:param`s still tokenized), built from the raw pathname so the zero-extra-segments case (`/x` itself) resolves identically. One direct-hit request, no 404 probing. Tests: `tests/unit/pre-compiled-manifest.test.js` (locks single-param and mid-path-param behavior, catch-all at three depths, catch-all after a mid-path param); verified live: reload on `/…/fighter/7`, `/…/timer`, and the bare base all hydrate with a single 200 manifest fetch.
+- **Watch mode dropped edits to runtime-fetched components** (`compiler/src/compiler/compile.rs`, `compiler/src/compiler/watcher.rs`, compiler 2.0.2 → 2.0.3) — the full build always mirrors `components/` verbatim into the output, because runtime-fetched components (iter-prop each-roots, `components_as_is`, and now `<component src="@[page.src]">` targets) are served from that mirror at request time — but the watch loop never honored that contract. A changed component only triggered recompiles of its *dependent pages* (refreshing their inlined copies); the mirror itself was never rewritten, and a component that **no page inlines** — exactly what every reactive-src routing target is — mapped to zero dependents and was silently dropped: no log line, no output write, stale bytes served until the next full build (observed in Battle Brawlers: SPA-demo components edited under `dev:compiled` never reached the browser, while page edits landed fine). The watch loop now re-mirrors every changed `components/` file into the output via the new `mirror_component_files` (atomic tmp+rename, same torn-read discipline as compiled pages, parent dirs created for components born mid-session), removes deleted components from the mirror, and logs the change even with zero dependents. Tests: `compile.rs` (`changed_component_is_remirrored_to_output`); verified end-to-end against a live `--watch` process (edit → mirror updates, delete → mirror entry removed).
+
 ## [2.1.21] - 2026-07-01
 
 ### Fixed

package/compiler/src/Cargo.lock

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

package/compiler/src/Cargo.toml

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

package/compiler/src/compiler/compile.rs

@@ -1493,6 +1493,47 @@ impl Compiler {
         Ok(())
     }
 
+    /// Re-mirror specific source files under the components directory into the
+    /// output. The full build always mirrors components/ verbatim (see
+    /// process_directory_assets_only): runtime-fetched components —
+    /// `<component src="@[page.src]">` targets, iter-prop each-roots,
+    /// components_as_is — are served from that mirror at request time. Watch
+    /// mode calls this for every changed component so the mirror tracks edits
+    /// and deletions even when no page inlines the component (zero graph
+    /// dependents). Writes are atomic (same tmp+rename as compiled pages) so a
+    /// runtime fetch mid-copy never sees a torn file. Returns how many files
+    /// were copied.
+    pub fn mirror_component_files(&self, files: &[PathBuf]) -> Result<usize, CompileError> {
+        let mut copied = 0;
+        for path in files {
+            let relative = path.strip_prefix(&self.config.source).unwrap_or(path);
+            let output_path = self.config.output.join(relative);
+            if path.exists() {
+                if let Some(parent) = output_path.parent() {
+                    fs::create_dir_all(parent).map_err(|e| CompileError::WriteError {
+                        path: parent.display().to_string(),
+                        source: e,
+                    })?;
+                }
+                let contents = fs::read_to_string(path).map_err(|e| CompileError::ReadError {
+                    path: path.display().to_string(),
+                    source: e,
+                })?;
+                atomic_write(&output_path, &contents).map_err(|e| CompileError::WriteError {
+                    path: output_path.display().to_string(),
+                    source: e,
+                })?;
+                copied += 1;
+            } else if output_path.exists() {
+                fs::remove_file(&output_path).map_err(|e| CompileError::WriteError {
+                    path: output_path.display().to_string(),
+                    source: e,
+                })?;
+            }
+        }
+        Ok(copied)
+    }
+
     /// Fetch components only for specific files (used in incremental compilation)
     fn fetch_components_for_files(&mut self, files: &[PathBuf], parser: &HtmlParser) -> Result<(), CompileError> {
         for html_file in files {
@@ -2370,6 +2411,57 @@ mod tests {
         (config, page_src, page_out, manifest)
     }
 
+    // The full build always mirrors components/ verbatim into the output —
+    // runtime-fetched components (`<component src="@[page.src]">`, iter-prop
+    // roots, components_as_is) are served from that mirror. Watch mode must
+    // keep the same contract: an edited component reaches the mirror even when
+    // NO page inlines it (zero dependents), and a deleted component leaves it.
+    #[test]
+    fn changed_component_is_remirrored_to_output() {
+        let (config, _page_src, _page_out, _manifest) = manifest_test_project("component_mirror");
+        let source_component = config.source.join("components").join("widget.html");
+        let mirrored = config.output.join("components").join("widget.html");
+        let nested_src = config.source.join("components").join("spa").join("pane.html");
+        let nested_out = config.output.join("components").join("spa").join("pane.html");
+        fs::write(&source_component, "<spa-widget>v1</spa-widget>\n").unwrap();
+
+        let mut compiler = Compiler::new(config, false);
+        compiler.compile().expect("compile should succeed");
+        assert_eq!(
+            fs::read_to_string(&mirrored).unwrap(),
+            "<spa-widget>v1</spa-widget>\n",
+            "sanity: full build mirrors the component"
+        );
+
+        // Edit the component — no page references it, so the dependency graph
+        // maps it to zero pages; the mirror must still track the change.
+        fs::write(&source_component, "<spa-widget>v2</spa-widget>\n").unwrap();
+        let copied = compiler
+            .mirror_component_files(&[source_component.clone()])
+            .expect("mirroring should succeed");
+        assert_eq!(copied, 1);
+        assert_eq!(
+            fs::read_to_string(&mirrored).unwrap(),
+            "<spa-widget>v2</spa-widget>\n",
+            "edited component did not reach the output mirror"
+        );
+
+        // A component created mid-session (parent dirs may not exist yet).
+        fs::create_dir_all(nested_src.parent().unwrap()).unwrap();
+        fs::write(&nested_src, "<spa-pane>new</spa-pane>\n").unwrap();
+        compiler
+            .mirror_component_files(&[nested_src.clone()])
+            .expect("mirroring a new nested component should succeed");
+        assert_eq!(fs::read_to_string(&nested_out).unwrap(), "<spa-pane>new</spa-pane>\n");
+
+        // Deleting the source removes the mirrored copy.
+        fs::remove_file(&source_component).unwrap();
+        compiler
+            .mirror_component_files(&[source_component])
+            .expect("mirroring a deletion should succeed");
+        assert!(!mirrored.exists(), "deleted component still present in the output mirror");
+    }
+
     // The watcher race: another writer truncates/rewrites a compiled page on
     // disk between our compile and our manifest pass. The manifest must be
     // built from the HTML this compiler just produced in memory — never from a

package/compiler/src/compiler/watcher.rs

@@ -598,6 +598,11 @@ pub fn watch(config: Config, verbose: bool) -> std::result::Result<(), Box<dyn s
                         // component plus the ancestors that inline it. Everything
                         // else stays cached and is reused.
                         let mut stale_component_keys: HashSet<String> = HashSet::new();
+                        // Changed component files to re-mirror into the output —
+                        // runtime-fetched components are served from that mirror,
+                        // so it must track every edit/deletion even when no page
+                        // inlines the component (zero graph dependents).
+                        let mut components_to_mirror: Vec<PathBuf> = Vec::new();
 
                         for path in &changed_paths {
                             // Skip files in output directory (avoid infinite loop)
@@ -620,6 +625,17 @@ pub fn watch(config: Config, verbose: bool) -> std::result::Result<(), Box<dyn s
                                 // Canonicalize to match how dependencies were stored (handles case sensitivity)
                                 let path_canonical = path.canonicalize().unwrap_or_else(|_| path.clone());
 
+                                // The output's components mirror tracks every change,
+                                // dependents or not: a component nothing inlines is
+                                // still fetched from the mirror at runtime
+                                // (`<component src="@[page.src]">`, iter-prop roots).
+                                if path.exists() {
+                                    println!("{} {} changed", "[watch]".cyan(), relative_path.display());
+                                } else {
+                                    println!("{} {} deleted", "[watch]".yellow(), relative_path.display());
+                                }
+                                components_to_mirror.push(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
@@ -641,8 +657,6 @@ pub fn watch(config: Config, verbose: bool) -> std::result::Result<(), Box<dyn s
 
                                 let dependent_pages = graph.get_all_dependent_pages(&path_canonical);
                                 if !dependent_pages.is_empty() {
-                                    println!("{} {} changed", "[watch]".cyan(), relative_path.display());
-
                                     // Invalidate only the edited component and the
                                     // components whose cached inlined content embeds it
                                     // (its ancestors). Every other component stays cached,
@@ -762,7 +776,7 @@ pub fn watch(config: Config, verbose: bool) -> std::result::Result<(), Box<dyn s
                             }
                         }
 
-                        if html_files.is_empty() && asset_files.is_empty() {
+                        if html_files.is_empty() && asset_files.is_empty() && components_to_mirror.is_empty() {
                             continue;
                         }
 
@@ -851,6 +865,23 @@ pub fn watch(config: Config, verbose: bool) -> std::result::Result<(), Box<dyn s
                             }
                         }
 
+                        // Keep the output's components mirror in sync — changed
+                        // components reach it even with zero dependent pages, and
+                        // deleted ones leave it (see mirror_component_files).
+                        if !components_to_mirror.is_empty() && !had_errors {
+                            match watch_compiler.mirror_component_files(&components_to_mirror) {
+                                Ok(copied) => {
+                                    total_stats.files_copied += copied;
+                                }
+                                Err(e) => {
+                                    eprintln!("{}: {}", "Error".red(), e);
+                                    eprintln!("Fix the errors and save to retry.");
+                                    println!();
+                                    had_errors = true;
+                                }
+                            }
+                        }
+
                         if !had_errors {
                             // Show what was updated
                             if total_stats.files_compiled > 0 {

package/compiler/src/main.rs

@@ -25,7 +25,7 @@ struct ConfigOverrides {
 #[derive(ClapParser, Debug)]
 #[command(name = "vibe-compile")]
 #[command(author = "Kim Korte")]
-#[command(version = "1.6.1")]
+#[command(version)]
 #[command(about = "Compiles Vibe source files into optimized output")]
 struct Args {
     /// Working directory (defaults to current directory)

package/index.js

@@ -8,7 +8,7 @@ let vibeInstance = null;
 let resolveInstanceReady = null;
 
 const createVibeInstance = () => ({
-  _pendingListeners: { afterUpdate: [], afterDomMutation: [], ready: [] },
+  _pendingListeners: { afterUpdate: [], afterDomMutation: [], ready: [], unmount: [] },
   // Promise that resolves when the real $.ready resolves post-boot. Lets
   // consumers holding the pre-boot placeholder (e.g. tests awaiting
   // `window.$.ready` before boot has replaced $ with the reactive proxy)

package/package.json

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

package/runtime/component.js

@@ -71,6 +71,23 @@ const createScopedDollar = (componentId) => {
     get(target, prop, receiver) {
       if (prop === 'on') {
         return (event, callback) => {
+          // 'unmount' is scope-resolved: in a component script it means THIS
+          // component's unmount (conditional toggle, iteration removal,
+          // reactive src swap — and before an HMR re-run of the same id).
+          // The callback rides the same per-component cleanup registry the
+          // global-event unsubscribes below ride, so a component owns
+          // arbitrary side effects (intervals, listeners, sockets) without
+          // leaking them past its lifetime. At page level the root's `on`
+          // resolves the same event name to pagehide instead.
+          if (event === 'unmount') {
+            if (!window.__vibeComponentCleanups) window.__vibeComponentCleanups = {};
+            const slot = window.__vibeComponentCleanups[componentId] || (window.__vibeComponentCleanups[componentId] = []);
+            slot.push(callback);
+            return () => {
+              const i = slot.indexOf(callback);
+              if (i >= 0) slot.splice(i, 1);
+            };
+          }
           const unsub = target.on(event, callback);
           if (!window.__vibeComponentCleanups) window.__vibeComponentCleanups = {};
           const slot = window.__vibeComponentCleanups[componentId] || (window.__vibeComponentCleanups[componentId] = []);
@@ -261,6 +278,48 @@ export const abortComponentFetch = (element) => {
   }
 };
 
+// A fetched-component host: `<component>` or `<div class="component">`.
+export const isComponentWrapper = (el) =>
+  el.nodeName === 'COMPONENT' ||
+  (el.nodeName === 'DIV' && el.classList?.contains('component'));
+
+// The live element a reactive src binding acts on. The manifest tree keeps the
+// ORIGINAL element, but every (re)mount replaces the wrapper (finalize's
+// replaceWith), leaving a `_vibeReplacedBy` link behind. Follow the chain and
+// compress it so intermediate detached wrappers stay collectable.
+export const liveComponentWrapper = (element) => {
+  let live = element;
+  while (live._vibeReplacedBy) live = live._vibeReplacedBy;
+  if (live !== element) element._vibeReplacedBy = live;
+  return live;
+};
+
+// (Re)mount a component for a reactive src binding (`src="@[page.src]"`).
+// Three phases of a wrapper's life, one entry point:
+// - Unprocessed element (no fetch yet): write the resolved src — the pending
+//   boot/observer processComponent pass fetches it.
+// - Fetch in flight: abort it and fetch the new src.
+// - Mounted wrapper (src consumed by finalize): re-fetch and re-mount; the
+//   authored props + slot content re-apply via the remount context finalize
+//   stashed on the wrapper, and the outgoing component's state is evicted by
+//   the removal pass when replaceWith drops the old wrapper.
+export const remountComponent = (el, src, debug = false) => {
+  const wasFetching = pendingFetches.has(el);
+  // Compare against the LATEST requested src: with a fetch in flight the src
+  // attribute holds it (rapid navigation A→B→A must abort B, not no-op on A);
+  // mounted and idle, the finalize-stashed value does.
+  const current = wasFetching
+    ? el.getAttribute('src')
+    : (el._vibeMountedSrc ?? el.getAttribute('src'));
+  if (src === current) return;
+  abortComponentFetch(el);
+  el.setAttribute('src', src);
+  // Pre-fetch element: the boot/observer processComponent pass that hasn't
+  // reached it yet will pick up the new value — nothing to redo.
+  if (el._vibeMountedSrc === undefined && !wasFetching) return;
+  processSingle(el, debug);
+};
+
 // Check if an element is nested inside another unprocessed component[src]
 const isNestedInUnprocessedComponent = (el, rootElement) => {
   let parent = el.parentElement;
@@ -473,16 +532,22 @@ const processSingle = (el, debug) => {
 
   const src = el.getAttribute('src');
 
-  // Use pre-hydration slot content if available (saved by index.js before hydration ran),
-  // otherwise fall back to current innerHTML (e.g. runtime-only usage without boot).
+  // Use pre-hydration slot content if available (saved by index.js before
+  // hydration ran, or re-stashed by finalize for reactive-src re-mounts),
+  // otherwise fall back to current innerHTML (e.g. runtime-only usage without
+  // boot). Kept on the element — a re-mount consumes the same authored slot.
   const children = (el._vibeSlotContent !== undefined ? el._vibeSlotContent : el.innerHTML).trim();
-  delete el._vibeSlotContent;
-  const props = {};
-  Array.from(el.attributes).forEach((attr) => {
-    if (attr.name !== 'src') {
-      props[attr.name] = attr.value;
-    }
-  });
+  // A re-mounted wrapper carries no prop attributes (finalize stripped them) —
+  // its authored props ride the remount context stashed at the previous mount.
+  let props = el._vibeRemountProps;
+  if (!props) {
+    props = {};
+    Array.from(el.attributes).forEach((attr) => {
+      if (attr.name !== 'src') {
+        props[attr.name] = attr.value;
+      }
+    });
+  }
 
   // Capture cache state before the fetch so the debug layer can tell a real
   // network fetch from a runtime-cache hit (the call below would make them
@@ -591,8 +656,10 @@ const processSingle = (el, debug) => {
         // Delegate prop substitution + slot inlining to shared helper.
         const transformedHtml = renderPropsAndSlot(temp, props, children);
 
-        // Clean up pending fetch tracker
-        pendingFetches.delete(el);
+        // Clean up pending fetch tracker — only if this fetch still owns the
+        // slot (a reactive-src re-mount may have aborted us and registered a
+        // newer controller for the same element).
+        if (pendingFetches.get(el) === controller) pendingFetches.delete(el);
 
         // Replace with clean component wrapper (no src, no props)
         // Check if element still has a parent (might have been removed during fetch)
@@ -615,6 +682,21 @@ const processSingle = (el, debug) => {
           // the plugin would have nothing to compare against). Vibe itself
           // never reads this; it's purely for the plugin spy.
           newWrapper._vibeRawSource = html;
+          // Remount context for reactive src bindings (src="@[page.src]"):
+          // the mounted src (no-op detection), the authored props, and the
+          // authored slot content. Each re-mount consumes these and finalize
+          // stashes them onto the next wrapper — self-sustaining across
+          // arbitrarily many navigations.
+          newWrapper._vibeMountedSrc = src;
+          newWrapper._vibeRemountProps = props;
+          newWrapper._vibeSlotContent = children;
+          // The authored binding travels ON the wrapper (data-vibe-src, same
+          // transport idea as data-vibe-namebind): the original tree node is
+          // pruned when this replaceWith's removal mutation is processed, and
+          // the replacement's reparse recaptures the binding from this
+          // attribute — the DOM alone carries the knowledge across swaps.
+          const srcBinding = el._vibeSrcBinding ?? el.getAttribute('data-vibe-src');
+          if (srcBinding) newWrapper.setAttribute('data-vibe-src', srcBinding);
           // Transfer iteration-prop registry ownership from the soon-to-be-
           // detached `<component src>` to the new wrapper. The detached element
           // would otherwise trigger releaseOrphanedIterationProps and free the
@@ -676,10 +758,10 @@ const processSingle = (el, debug) => {
       finalize();
     })
     .catch((error) => {
-      // Clean up pending fetch tracker
-      pendingFetches.delete(el);
+      // Clean up pending fetch tracker — ownership-guarded (see finalize)
+      if (pendingFetches.get(el) === controller) pendingFetches.delete(el);
 
-      // If fetch was aborted (element removed), silently skip
+      // If fetch was aborted (element removed or re-mounted), silently skip
       if (error.name === 'AbortError') {
         return;
       }

package/runtime/hydrate.js

@@ -1,5 +1,6 @@
 import { updateIteration } from './iterate.js';
 import { updateConditional, managedNodes } from './conditionals.js';
+import { isComponentWrapper, liveComponentWrapper, remountComponent } from './component.js';
 import { VALUE_ATTRS, DOM_PROPERTIES, BINDING_REGEX, PURE_BINDING_REGEX } from './constants.js';
 import { evalInScope, resolveCaseInsensitivePath } from './utils.js';
 import { RawHtml } from './raw-html.js';
@@ -82,6 +83,24 @@ export default (affected, state, manifest = {}, oldState = {}) => {
     if (aff.type === 'attribute') {
       const { attrName, attrValue, element } = aff;
       try {
+        // Reactive component src (`<component src="@[page.src]">`): resolve
+        // the binding and (re)mount through component.js. The binding rides
+        // along so finalize can stamp it onto the replacement wrapper
+        // (data-vibe-src) — the tree node holding it is pruned when the
+        // wrapper swap's removal mutation lands, and the fresh wrapper's
+        // reparse rebuilds the knowledge from that attribute. A state change
+        // landing inside the swap window still resolves through the
+        // replacement chain.
+        if (attrName === 'src' && isComponentWrapper(element)) {
+          const live = liveComponentWrapper(element);
+          const newSrc = attrValue.replace(BINDING_REGEX, (_, expr) =>
+            evalInScope(expr, effectiveState, live),
+          );
+          live._vibeSrcBinding = attrValue;
+          remountComponent(live, newSrc);
+          return;
+        }
+
         // Check if this is a pure binding (e.g., value="@[inputValue]")
         const isPureBinding = attrValue.match(PURE_BINDING_REGEX);
         const isDomProperty = DOM_PROPERTIES.includes(attrName);

package/runtime/index.js

@@ -568,8 +568,20 @@ const main = (s, config = {}, stringSelector = '') => {
     afterUpdate: [],
     afterDomMutation: [],
     ready: [],
+    unmount: [],
   };
 
+  // Page-scope 'unmount': the visitor actually leaving — pagehide (navigation
+  // away, tab close). Deliberately NOT visibilitychange: a tab switch is not
+  // an unmount, the visitor comes back. Inside a component script the same
+  // event name resolves to that component's unmount instead (the scoped `$`
+  // proxy in component.js intercepts it before it reaches this hook).
+  if (typeof window !== 'undefined') {
+    window.addEventListener('pagehide', () => {
+      hooks.unmount.forEach((callback) => callback());
+    });
+  }
+
   // Extract plain values from proxy (removes proxy wrappers)
   // Optimized: indexed loops, Object.keys (no prototype walk), inline primitive check
   const extractPlainValue = (obj) => {

package/runtime/parse.js

@@ -21,16 +21,30 @@ const findComponentIdForElement = (element) => {
 // Single source of truth for reading attribute/name bindings off an element.
 // Called from both the root handler and recursive() so they can't drift. Any
 // element classified as a fetched component (`<component src>` or
-// `<div class="component" src>`) returns nulls — its attributes are props
-// owned by processComponent and must stay raw; hydrating them would coerce
-// objects to "[object Object]" or strip boolean-like attrs to empty.
+// `<div class="component" src>`) captures ONLY a bound src (`src="@[page.src]"`
+// — resolved by hydration before the fetch, re-mounted on change); every other
+// attribute is a prop owned by processComponent and must stay raw — hydrating
+// them would coerce objects to "[object Object]" or strip boolean-like attrs
+// to empty. A mounted wrapper carries the authored binding in data-vibe-src
+// (stamped by finalize — the src attribute was consumed by the fetch), so the
+// knowledge survives every wrapper replacement: reparsing the live DOM alone
+// rebuilds it.
 const captureAttributeBindings = (element, aliasSet) => {
   const nodeName = element.nodeName;
   const isFetchedComponent =
     (nodeName === 'COMPONENT' || (nodeName === 'DIV' && element.classList?.contains('component'))) &&
-    element.hasAttribute?.('src');
+    (element.hasAttribute?.('src') || element.hasAttribute?.('data-vibe-src'));
 
-  if (isFetchedComponent || !element.attributes || element.attributes.length === 0) {
+  if (isFetchedComponent) {
+    const src = element.getAttribute?.('data-vibe-src') ?? element.getAttribute?.('src');
+    BINDING_REGEX.lastIndex = 0;
+    return {
+      attributes: BINDING_REGEX.test(src) ? { src } : null,
+      nameBindings: null,
+    };
+  }
+
+  if (!element.attributes || element.attributes.length === 0) {
     return { attributes: null, nameBindings: null };
   }
 

package/runtime/pre-compiled-manifest.js

@@ -169,7 +169,24 @@ export const buildManifestCandidatePaths = (pathname, route) => {
   // 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 isCatchAll =
+    routeSegments &&
+    routeSegments[routeSegments.length - 1]?.startsWith(":") &&
+    routeSegments[routeSegments.length - 1]?.endsWith("*");
+  if (isCatchAll) {
+    // A trailing `:name*` catch-all (pages/x/$$name.html) swallows every
+    // remaining URL segment — zero or more — so tokenizing by position is
+    // meaningless past the static prefix. The compiler collapses the whole
+    // `$$name.html` file to the same `$` token as a single `$param`, giving
+    // ONE manifest for every depth: <static-prefix>/$.html.manifest.js.
+    // Built from the raw pathname: with zero extra segments the .html
+    // normalization above has already mutated the prefix's last segment.
+    const rawSegments = pathname.split("/").filter((s) => s);
+    const prefix = rawSegments
+      .slice(0, routeSegments.length - 1)
+      .map((seg, i) => (routeSegments[i].startsWith(":") ? "$" : seg));
+    possiblePaths.push(`/vibe-hyperspeed/${[...prefix, "$"].join("/")}.html.manifest.js`);
+  } else if (routeSegments && routeSegments.some((s) => s.startsWith(":"))) {
     const tokenized = pathSegments.map((seg, i) => {
       if (!routeSegments[i]?.startsWith(":")) return seg;
       const dot = seg.indexOf(".");