@moku-labs/web 1.15.1 → 1.16.1

package/dist/browser.mjs

@@ -2218,6 +2218,18 @@ function createApi(ctx) {
 		*/
 		current() {
 			return ctx.state.currentUrl;
+		},
+		/**
+		* Resolve a registered island's api by name (the cross-island seam). Returns
+		* `undefined` when no provider with that name is currently registered.
+		*
+		* @param name - The provider island's component name.
+		* @returns The provider's api, or `undefined`.
+		* @example
+		* app.spa.component("lightbox");
+		*/
+		component(name) {
+			return ctx.state.componentApis.get(name);
 		}
 	};
 }
@@ -2506,10 +2518,26 @@ const COMPONENT_HOOK_NAMES = [
 ];
 //#endregion
 //#region src/plugins/spa/components.ts
+/**
+* @file spa plugin — component lifecycle, mounting, the plugin-mirror authoring
+* surface (`createComponent` with a typed `{ state, render, events, api }` spec),
+* the per-instance state + microtask-batched render scheduler, declarative
+* delegated events, and the cross-island api registry.
+* @see README.md
+*/
 /** Error prefix for spa fail-fast failures (spec/11 Part-3). */
 const ERROR_PREFIX$2 = "[web]";
 /** The set of legal hook names, frozen for O(1) membership checks. */
 const HOOK_NAME_SET = new Set(COMPONENT_HOOK_NAMES);
+/** The spec-only keys that select the plugin-mirror form of {@link createComponent}. */
+const SPEC_KEYS = new Set([
+	"state",
+	"render",
+	"events",
+	"api"
+]);
+/** Synchronous re-entrancy cap for the render scheduler (a render that calls `ctx.flush`). */
+const MAX_RENDER_DEPTH = 25;
 /**
 * No-op link builder for the {@link EMPTY_ROUTE} slice (used when no route matched).
 *
@@ -2528,40 +2556,346 @@ const EMPTY_ROUTE = {
 	url: noUrl
 };
 /**
+* No-op placeholder for an instance's `flush` slot until the real one is bound at mount.
+*
+* @example
+* const instance = { flush: noop };
+*/
+function noop() {}
+/** Cached promise for the lazy `./render` chunk (loaded at most once per module). */
+let renderChunk;
+/** The resolved VNode committer once the chunk loads (undefined until then). */
+let commitVNodeFunction;
+/**
+* Load the lazy `./render` chunk (once) and cache its `commitVNode` for synchronous
+* use by later renders. Awaited by a component's `mountPromise` so the test harness's
+* `settle()` can deterministically flush a VNode render.
+*
+* @returns A promise that resolves once `commitVNode` is available.
+* @example
+* await loadRenderChunk();
+*/
+async function loadRenderChunk() {
+	renderChunk ??= import("./render-UO4nimWr.mjs");
+	commitVNodeFunction = (await renderChunk).commitVNode;
+}
+/**
+* Commit a {@link RenderResult} into a host: `string` → `innerHTML`, `Node` →
+* `replaceChildren`, `void`/`undefined` → no-op (the render mutated the DOM itself), and
+* a Preact `VNode` → committed through the lazy gate (loading it on demand if needed).
+*
+* @param host - The island host element to render into.
+* @param result - The value returned by the component's `render`.
+* @example
+* commitResult(host, h(View, { items }));
+*/
+function commitResult(host, result) {
+	if (result === void 0) return;
+	if (typeof result === "string") {
+		host.innerHTML = result;
+		return;
+	}
+	if (result instanceof Node) {
+		host.replaceChildren(result);
+		return;
+	}
+	const vnode = result;
+	if (commitVNodeFunction) {
+		commitVNodeFunction(vnode, host);
+		return;
+	}
+	loadRenderChunk().then(() => commitVNodeFunction?.(vnode, host)).catch(() => {});
+}
+/**
+* Run a component's `render(state, ctx)` and commit the result now. Guards against
+* synchronous re-entrancy (a render that calls `ctx.flush`) with a depth cap.
+*
+* @param instance - The instance to render.
+* @throws {Error} When the synchronous render depth exceeds {@link MAX_RENDER_DEPTH}.
+* @example
+* runRender(instance);
+*/
+function runRender(instance) {
+	const render = instance.def.spec?.render;
+	if (!render) return;
+	if (instance.renderDepth > MAX_RENDER_DEPTH) throw new Error(`${ERROR_PREFIX$2} component "${instance.def.name}" render re-entered ${MAX_RENDER_DEPTH}+ times\n  → a render must not synchronously trigger its own render (avoid ctx.flush() inside render)`);
+	instance.renderDepth += 1;
+	try {
+		commitResult(instance.el, render(instance.state ?? {}, instance.ctx));
+	} finally {
+		instance.renderDepth -= 1;
+	}
+}
+/**
+* Schedule a microtask-batched render for an instance (no-op when it has no `render`).
+* Multiple `ctx.set` calls in the same tick coalesce into a single render.
+*
+* @param instance - The instance to schedule a render for.
+* @example
+* scheduleRender(instance);
+*/
+function scheduleRender(instance) {
+	if (!instance.def.spec?.render || instance.renderScheduled) return;
+	instance.renderScheduled = true;
+	queueMicrotask(() => {
+		if (!instance.renderScheduled) return;
+		instance.renderScheduled = false;
+		runRender(instance);
+	});
+}
+/**
+* Build the single per-instance {@link ComponentContext} reused by every hook, event
+* handler, and render. Route fields (`params`/`meta`/`locale`/`url`) and `data` read
+* through the instance so a navigation update is reflected without rebuilding the ctx;
+* `state`/`set`/`flush`/`cleanup`/`component` are bound to the instance + plugin state.
+*
+* @param state - The plugin state (for the cross-island `component` resolver).
+* @param instance - The instance the context is bound to.
+* @returns The instance-bound context.
+* @example
+* instance.ctx = buildContext(state, instance);
+*/
+function buildContext(state, instance) {
+	return {
+		el: instance.el,
+		/**
+		* The current page data payload (live; updated across navigations).
+		*
+		* @returns The page data.
+		* @example
+		* ctx.data;
+		*/
+		get data() {
+			return instance.data;
+		},
+		/**
+		* The matched route's path params (live; updated across navigations).
+		*
+		* @returns The route params.
+		* @example
+		* ctx.params.id;
+		*/
+		get params() {
+			return instance.route.params;
+		},
+		/**
+		* The matched route's `.meta()` bag (live; updated across navigations).
+		*
+		* @returns The route meta.
+		* @example
+		* ctx.meta.focus;
+		*/
+		get meta() {
+			return instance.route.meta;
+		},
+		/**
+		* The active locale for the current route (live; updated across navigations).
+		*
+		* @returns The locale code.
+		* @example
+		* ctx.locale;
+		*/
+		get locale() {
+			return instance.route.locale;
+		},
+		/**
+		* The named-route link builder for the current route.
+		*
+		* @returns The link builder.
+		* @example
+		* ctx.url("board", { id });
+		*/
+		get url() {
+			return instance.route.url;
+		},
+		/**
+		* The live per-instance state (`undefined` for legacy hooks-only islands).
+		*
+		* @returns The current state.
+		* @example
+		* ctx.state.count;
+		*/
+		get state() {
+			return instance.state;
+		},
+		/**
+		* Merge a patch into the per-instance state and schedule one batched render.
+		*
+		* @param patch - A partial state object, or an updater `(prev) => partial`.
+		* @example
+		* ctx.set(prev => ({ count: prev.count + 1 }));
+		*/
+		set(patch) {
+			const previous = instance.state ?? {};
+			const next = typeof patch === "function" ? patch(previous) : patch;
+			instance.state = Object.assign({}, previous, next);
+			scheduleRender(instance);
+		},
+		/**
+		* Force a synchronous render now (drains any pending scheduled render).
+		*
+		* @example
+		* ctx.flush();
+		*/
+		flush() {
+			instance.flush();
+		},
+		/**
+		* Register a disposer run on destroy (subscriptions, timers, manual listeners).
+		*
+		* @param dispose - The teardown function.
+		* @example
+		* ctx.cleanup(off);
+		*/
+		cleanup(dispose) {
+			instance.cleanups.push(dispose);
+		},
+		/**
+		* Resolve another island's registered api by name (`undefined` when absent).
+		*
+		* @param name - The provider island's component name.
+		* @returns The provider's api, or `undefined`.
+		* @example
+		* ctx.component("lightbox");
+		*/
+		component(name) {
+			return state.componentApis.get(name);
+		}
+	};
+}
+/**
+* Resolve the element a delegated handler should receive for an event: the host for a
+* host-level binding (empty selector), else the nearest ancestor of `event.target`
+* matching the selector that is still inside the host.
+*
+* @param host - The island host element.
+* @param event - The dispatched DOM event.
+* @param selector - The key's selector (empty string → host-level).
+* @returns The matched element, or `undefined` when nothing matches inside the host.
+* @example
+* const target = matchTarget(host, event, "[data-action]");
+*/
+function matchTarget(host, event, selector) {
+	if (selector === "") return host;
+	const target = event.target;
+	if (!(target instanceof Element)) return void 0;
+	const matched = target.closest(selector);
+	return matched && host.contains(matched) ? matched : void 0;
+}
+/**
+* Attach a component's declarative `events` map: one real listener per event TYPE on
+* the host (dispatch walks `closest(selector)` for each registered selector), each
+* removed via the instance's cleanup registry on destroy.
+*
+* @param instance - The instance whose host the listeners attach to.
+* @param events - The declarative `{ "<type> <selector>": handler }` map.
+* @throws {Error} When a key has no event type.
+* @example
+* attachEvents(instance, { "click [data-action]": (ctx, e, el) => {} });
+*/
+function attachEvents(instance, events) {
+	const host = instance.el;
+	const byType = /* @__PURE__ */ new Map();
+	for (const [key, handler] of Object.entries(events)) {
+		const space = key.indexOf(" ");
+		const type = (space === -1 ? key : key.slice(0, space)).trim();
+		const selector = space === -1 ? "" : key.slice(space + 1).trim();
+		if (type === "") throw new Error(`${ERROR_PREFIX$2} component "${instance.def.name}" event key must start with an event type: "${key}"\n  → use "<type>" or "<type> <selector>" (e.g. "click [data-action]")`);
+		const list = byType.get(type) ?? [];
+		list.push({
+			selector,
+			handler
+		});
+		byType.set(type, list);
+	}
+	for (const [type, handlers] of byType) {
+		const listener = (event) => {
+			for (const { selector, handler } of handlers) {
+				const target = matchTarget(host, event, selector);
+				if (target) handler(instance.ctx, event, target);
+			}
+		};
+		host.addEventListener(type, listener);
+		instance.cleanups.push(() => host.removeEventListener(type, listener));
+	}
+}
+/**
 * Validate a single hook entry: its key must be a known hook name and its value
 * must be a function. Throws fail-fast on the first violation.
 *
 * @param componentName - The owning component name (for error messages).
-* @param hooks - The hooks object being validated.
+* @param source - The raw authoring object being validated.
 * @param key - The hook key to validate.
 * @throws {Error} If `key` is not in `COMPONENT_HOOK_NAMES`.
 * @throws {TypeError} If the hook value is not a function.
 * @example
-* validateHookEntry("counter", hooks, "onMount");
+* validateHookEntry("counter", source, "onMount");
 */
-function validateHookEntry(componentName, hooks, key) {
-	if (!HOOK_NAME_SET.has(key)) throw new Error(`${ERROR_PREFIX$2} unknown component hook "${key}" on "${componentName}"\n  → valid hooks: ${COMPONENT_HOOK_NAMES.join(", ")}`);
-	if (typeof hooks[key] !== "function") throw new TypeError(`${ERROR_PREFIX$2} component hook "${key}" on "${componentName}" must be a function\n  → provide a function or omit the hook`);
+function validateHookEntry(componentName, source, key) {
+	if (!HOOK_NAME_SET.has(key)) throw new Error(`${ERROR_PREFIX$2} unknown component hook "${key}" on "${componentName}"\n  → valid hooks: ${COMPONENT_HOOK_NAMES.join(", ")}\n  → spec keys: state, render, events, api`);
+	if (typeof source[key] !== "function") throw new TypeError(`${ERROR_PREFIX$2} component hook "${key}" on "${componentName}" must be a function\n  → provide a function or omit the hook`);
+}
+/**
+* Validate the spec extras (`state`/`render`/`api` must be functions; `events` must be
+* a plain object of functions). Throws fail-fast on the first violation.
+*
+* @param componentName - The owning component name (for error messages).
+* @param extras - The partitioned spec extras to validate.
+* @throws {TypeError} If a present extra has the wrong shape.
+* @example
+* validateSpecExtras("board", { state: () => ({}) });
+*/
+function validateSpecExtras(componentName, extras) {
+	for (const key of [
+		"state",
+		"render",
+		"api"
+	]) if (extras[key] !== void 0 && typeof extras[key] !== "function") throw new TypeError(`${ERROR_PREFIX$2} component "${key}" on "${componentName}" must be a function\n  → provide a function or omit it`);
+	if (extras.events !== void 0) {
+		const events = extras.events;
+		if (!(typeof events === "object")) throw new TypeError(`${ERROR_PREFIX$2} component "events" on "${componentName}" must be an object of handlers`);
+		for (const [key, handler] of Object.entries(events)) if (typeof handler !== "function") throw new TypeError(`${ERROR_PREFIX$2} component event "${key}" on "${componentName}" must be a function`);
+	}
 }
 /**
-* Create a validated component definition. Validates hook names at registration
-* for fail-fast typo detection (e.g. `onMout` throws immediately) and asserts
-* each provided hook is a function.
+* Create a validated component definition. Accepts either the legacy hooks-only form
+* (`createComponent("counter", { onMount() {} })`) or the plugin-mirror spec form
+* (`createComponent("board", { state, render, events, api, ...hooks })`). Spec-only
+* keys (`state`/`render`/`events`/`api`) are partitioned out before hook-name
+* validation, so a real typo (e.g. `onMout`) still throws immediately while the spec
+* keys are accepted.
 *
 * @param name - Unique component name.
-* @param hooks - Lifecycle hook implementations.
+* @param spec - Lifecycle hooks, or the `{ state, render, events, api, ...hooks }` spec.
 * @returns A `ComponentDef` ready to `register`.
-* @throws {Error} If `name` is empty, any hook key is not in
-*   `COMPONENT_HOOK_NAMES`, or any provided hook value is not a function.
+* @throws {Error} If `name` is empty, a hook key is unknown, or an extra/hook value has the wrong shape.
+* @example
+* const counter = createComponent("counter", { onMount({ el }) { el.textContent = "0"; } });
 * @example
-* const counter = createComponent("counter", {
-*   onMount({ el }) { el.textContent = "0"; }
+* const list = createComponent<{ items: string[] }>("list", {
+*   state: () => ({ items: [] }),
+*   render: (s) => h(List, { items: s.items })
 * });
 */
-function createComponent(name, hooks) {
+function createComponent(name, spec) {
 	if (name.trim() === "") throw new Error(`${ERROR_PREFIX$2} component name must be a non-empty string\n  → pass a unique name to createComponent("name", hooks)`);
-	for (const key of Object.keys(hooks)) validateHookEntry(name, hooks, key);
-	return {
+	const source = spec;
+	const hooks = {};
+	const extras = {};
+	for (const key of Object.keys(source)) {
+		if (SPEC_KEYS.has(key)) {
+			extras[key] = source[key];
+			continue;
+		}
+		validateHookEntry(name, source, key);
+		hooks[key] = source[key];
+	}
+	validateSpecExtras(name, extras);
+	return Object.keys(extras).length > 0 ? {
+		name,
+		hooks,
+		spec: extras
+	} : {
 		name,
 		hooks
 	};
@@ -2585,64 +2919,53 @@ function extractPageData(doc) {
 	}
 }
 /**
-* Builds a live component instance bound to an element.
+* Read the current page data, or `{}` in a headless (non-browser) context.
 *
-* @param definition - The component definition.
-* @param element - The element the instance binds to.
-* @param persistent - Whether the instance survives navigation.
-* @returns The constructed (not-yet-mounted) instance.
+* @returns The current page data payload.
 * @example
-* const inst = createInstance(definition, element, false);
+* const data = currentPageData();
 */
-function createInstance(definition, element, persistent) {
-	return {
-		def: definition,
-		el: element,
-		persistent
-	};
+function currentPageData() {
+	return typeof document === "undefined" ? {} : extractPageData(document);
 }
 /**
-* Invokes a single lifecycle hook on an instance with its component context.
-* Missing hooks are skipped silently.
+* Invokes a single lifecycle hook on an instance with its bound context. Missing
+* hooks are skipped silently.
 *
 * @param instance - The instance whose hook to run.
 * @param hook - The hook name to invoke.
-* @param ctx - The component context passed to the hook.
 * @example
-* runHook(instance, "onMount", ctx);
+* runHook(instance, "onDestroy");
 */
-function runHook(instance, hook, ctx) {
-	instance.def.hooks[hook]?.(ctx);
+function runHook(instance, hook) {
+	instance.def.hooks[hook]?.(instance.ctx);
 }
 /**
-* Builds the component context handed to a hook: the bound element + page data, merged
-* with the matched route's slice (params/meta/locale/url). Defaults to {@link EMPTY_ROUTE}
-* when no route is supplied (headless, tests, public `scan()`).
+* Run an instance's registered cleanup disposers (LIFO) and unregister its api. Each
+* disposer runs in isolation so a throwing one never strands the others during teardown.
 *
-* @param element - The element the instance is bound to.
-* @param data - The current page data payload.
-* @param route - The matched-route slice for the current URL.
-* @returns The hook context.
+* @param state - The plugin state (for the api registry).
+* @param instance - The instance being disposed.
 * @example
-* const ctx = makeContext(element, data, route);
+* disposeInstance(state, instance);
 */
-function makeContext(element, data, route = EMPTY_ROUTE) {
-	return {
-		el: element,
-		data,
-		params: route.params,
-		meta: route.meta,
-		locale: route.locale,
-		url: route.url
-	};
+function disposeInstance(state, instance) {
+	for (let index = instance.cleanups.length - 1; index >= 0; index -= 1) try {
+		instance.cleanups[index]?.();
+	} catch {}
+	instance.cleanups.length = 0;
+	instance.renderScheduled = false;
+	if (instance.api !== void 0 && state.componentApis.get(instance.def.name) === instance.api) state.componentApis.delete(instance.def.name);
 }
 /**
-* Mounts a single `data-component` element: classifies persistent vs
-* page-specific, builds the instance, fires `onCreate` then `onMount`, records
-* it in state, and emits `spa:component-mount`. No-ops if the element is already
+* Mounts a single `data-component` element: classifies persistent vs page-specific,
+* builds the instance + its bound context, initializes per-instance `state`, registers
+* its `api`, attaches declarative `events`, fires `onCreate` then `onMount` (capturing
+* an async `onMount` + render-chunk load as `mountPromise`), schedules the initial
+* render, records it, and emits `spa:component-mount`. No-ops if the element is already
 * mounted, has no component name, or names an unregistered component.
 *
-* @param state - The plugin state (registeredComponents + instances).
+* @param state - The plugin state (registeredComponents + instances + componentApis).
 * @param emit - The event emitter for spa:component-mount.
 * @param swapArea - The swap-region element, or null when none was found.
 * @param data - The current page data payload.
@@ -2657,10 +2980,40 @@ function mountElement(state, emit, swapArea, data, element, route = EMPTY_ROUTE)
 	if (!name) return;
 	const definition = state.registeredComponents.get(name);
 	if (!definition) return;
-	const instance = createInstance(definition, element, swapArea ? !swapArea.contains(element) : true);
-	const ctx = makeContext(element, data, route);
-	runHook(instance, "onCreate", ctx);
-	runHook(instance, "onMount", ctx);
+	const instance = {
+		def: definition,
+		el: element,
+		persistent: swapArea ? !swapArea.contains(element) : true,
+		ctx: void 0,
+		state: void 0,
+		api: void 0,
+		route,
+		data,
+		cleanups: [],
+		flush: noop,
+		renderScheduled: false,
+		renderDepth: 0,
+		mountPromise: void 0
+	};
+	instance.ctx = buildContext(state, instance);
+	instance.flush = () => {
+		instance.renderScheduled = false;
+		runRender(instance);
+	};
+	const spec = definition.spec;
+	if (spec?.state) instance.state = spec.state(instance.ctx);
+	if (spec?.api) {
+		instance.api = spec.api(instance.ctx);
+		state.componentApis.set(definition.name, instance.api);
+	}
+	if (spec?.events) attachEvents(instance, spec.events);
+	runHook(instance, "onCreate");
+	const onMountResult = definition.hooks.onMount?.(instance.ctx);
+	if (spec?.render) scheduleRender(instance);
+	const pending = [];
+	if (spec?.render) pending.push(loadRenderChunk());
+	if (onMountResult && typeof onMountResult.then === "function") pending.push(onMountResult);
+	instance.mountPromise = pending.length > 0 ? Promise.all(pending).then(() => {}) : void 0;
 	state.instances.set(element, instance);
 	emit("spa:component-mount", {
 		name: definition.name,
@@ -2668,12 +3021,12 @@ function mountElement(state, emit, swapArea, data, element, route = EMPTY_ROUTE)
 	});
 }
 /**
-* Scans the swap region, mounts components for matching `data-component`
-* elements, classifies persistent (outside swap area) vs page-specific (inside),
-* fires `onCreate` then `onMount`, and emits `spa:component-mount` per instance.
+* Scans the swap region, mounts components for matching `data-component` elements,
+* classifies persistent (outside swap area) vs page-specific (inside), runs
+* `onCreate`/`onMount` + initial render, and emits `spa:component-mount` per instance.
 * Already-mounted elements are skipped.
 *
-* @param state - The plugin state (registeredComponents + instances).
+* @param state - The plugin state (registeredComponents + instances + componentApis).
 * @param emit - The event emitter for spa:component-mount.
 * @param swapSelector - CSS selector bounding page-specific components.
 * @param route - The matched-route slice for the current URL (params/meta/locale/url).
@@ -2687,9 +3040,10 @@ function scanAndMount(state, emit, swapSelector, route = EMPTY_ROUTE) {
 	for (const element of document.querySelectorAll("[data-component]")) mountElement(state, emit, swapArea, data, element, route);
 }
 /**
-* Unmounts page-specific instances inside the swap region (runs `onUnMount`
-* then `onDestroy`), removes them from state, and emits `spa:component-unmount`.
-* Persistent instances (outside the swap area) are left in place.
+* Unmounts page-specific instances inside the swap region (runs `onUnMount` then
+* `onDestroy`, then their cleanup disposers + api unregister), removes them from state,
+* and emits `spa:component-unmount`. Persistent instances (outside the swap area) are
+* left in place.
 *
 * @param state - The plugin state holding live instances.
 * @param emit - The event emitter for spa:component-unmount.
@@ -2697,12 +3051,13 @@ function scanAndMount(state, emit, swapSelector, route = EMPTY_ROUTE) {
 * unmountPageSpecific(state, emit);
 */
 function unmountPageSpecific(state, emit) {
-	const data = typeof document === "undefined" ? {} : extractPageData(document);
+	const data = currentPageData();
 	for (const [element, instance] of state.instances) {
 		if (instance.persistent) continue;
-		const ctx = makeContext(element, data);
-		runHook(instance, "onUnMount", ctx);
-		runHook(instance, "onDestroy", ctx);
+		instance.data = data;
+		runHook(instance, "onUnMount");
+		runHook(instance, "onDestroy");
+		disposeInstance(state, instance);
 		state.instances.delete(element);
 		emit("spa:component-unmount", {
 			name: instance.def.name,
@@ -2711,9 +3066,10 @@ function unmountPageSpecific(state, emit) {
 	}
 }
 /**
-* Disposes ALL live instances (persistent and page-specific) on teardown:
-* runs `onUnMount` then `onDestroy`, emits `spa:component-unmount`, and clears
-* the instance map. Used by the kernel's `dispose` on plugin stop.
+* Disposes ALL live instances (persistent and page-specific) on teardown: runs
+* `onUnMount` then `onDestroy`, then their cleanup disposers + api unregister, emits
+* `spa:component-unmount`, and clears the instance + api maps. Used by the kernel's
+* `dispose` on plugin stop.
 *
 * @param state - The plugin state holding live instances.
 * @param emit - The event emitter for spa:component-unmount.
@@ -2721,17 +3077,19 @@ function unmountPageSpecific(state, emit) {
 * unmountAll(state, emit);
 */
 function unmountAll(state, emit) {
-	const data = typeof document === "undefined" ? {} : extractPageData(document);
+	const data = currentPageData();
 	for (const [element, instance] of state.instances) {
-		const ctx = makeContext(element, data);
-		runHook(instance, "onUnMount", ctx);
-		runHook(instance, "onDestroy", ctx);
+		instance.data = data;
+		runHook(instance, "onUnMount");
+		runHook(instance, "onDestroy");
+		disposeInstance(state, instance);
 		emit("spa:component-unmount", {
 			name: instance.def.name,
 			el: element
 		});
 	}
 	state.instances.clear();
+	state.componentApis.clear();
 }
 /**
 * Fires `onNavStart` on every currently-mounted instance (persistent instances
@@ -2742,12 +3100,16 @@ function unmountAll(state, emit) {
 * notifyNavStart(state);
 */
 function notifyNavStart(state) {
-	const data = typeof document === "undefined" ? {} : extractPageData(document);
-	for (const [element, instance] of state.instances) runHook(instance, "onNavStart", makeContext(element, data));
+	const data = currentPageData();
+	for (const instance of state.instances.values()) {
+		instance.data = data;
+		runHook(instance, "onNavStart");
+	}
 }
 /**
 * Fires `onNavEnd` on persistent instances that survived the swap (page-specific
-* instances were already destroyed and re-created by the swap).
+* instances were already destroyed and re-created by the swap), updating their route
+* slice to the destination first.
 *
 * @param state - The plugin state holding live instances.
 * @param route - The matched-route slice for the destination URL (params/meta/locale/url).
@@ -2755,8 +3117,13 @@ function notifyNavStart(state) {
 * notifyNavEnd(state, route);
 */
 function notifyNavEnd(state, route = EMPTY_ROUTE) {
-	const data = typeof document === "undefined" ? {} : extractPageData(document);
-	for (const [element, instance] of state.instances) if (instance.persistent) runHook(instance, "onNavEnd", makeContext(element, data, route));
+	const data = currentPageData();
+	for (const instance of state.instances.values()) {
+		if (!instance.persistent) continue;
+		instance.data = data;
+		instance.route = route;
+		runHook(instance, "onNavEnd");
+	}
 }
 //#endregion
 //#region src/plugins/spa/head.ts
@@ -3297,6 +3664,7 @@ function createState(_ctx) {
 	return {
 		registeredComponents: /* @__PURE__ */ new Map(),
 		instances: /* @__PURE__ */ new Map(),
+		componentApis: /* @__PURE__ */ new Map(),
 		currentUrl: "",
 		destroyRouter: null,
 		started: false,
@@ -3535,7 +3903,7 @@ function createSpaKernel(state, config, emit, deps) {
 	const commitDataRender = async (pathname, resolvedRender, signal) => {
 		if (signal?.aborted) return;
 		const { route, vnode, routeContext, region } = resolvedRender;
-		const { renderVNode } = await import("./render-BNe0s7fr.mjs");
+		const { renderVNode } = await import("./render-UO4nimWr.mjs");
 		if (signal?.aborted) return;
 		syncDataHead(deps.head, route, routeContext);
 		unmountPageSpecific(state, emit);
@@ -3604,7 +3972,7 @@ function createSpaKernel(state, config, emit, deps) {
 			return;
 		}
 		const { vnode, region } = resolvedRender;
-		const { renderVNode } = await import("./render-BNe0s7fr.mjs");
+		const { renderVNode } = await import("./render-UO4nimWr.mjs");
 		renderVNode(vnode, region);
 		scanAndMount(state, emit, resolved.swapSelector, routeSlice);
 	};