@kimesh/router-runtime 0.0.1

package/dist/index.mjs

@@ -0,0 +1,1298 @@
+import { KeepAlive, Suspense, Transition, computed, createApp, defineComponent, h, inject, isRef, nextTick, onErrorCaptured, reactive, ref, toRef } from "vue";
+import { RouterLink, RouterView, createRouter, createWebHashHistory, createWebHistory, onBeforeRouteLeave, onBeforeRouteUpdate, useLink, useRoute, useRoute as useRoute$1, useRouter, useRouter as useRouter$1 } from "vue-router";
+import { QueryClient, VueQueryPlugin } from "@tanstack/vue-query";
+import { createHooks } from "hookable";
+
+//#region src/guards/loader-guard.ts
+/**
+* Safely parse input with schema, returning input on failure
+*/
+function safeParse(schema, input) {
+	try {
+		return schema.parse(input);
+	} catch {
+		return input;
+	}
+}
+/**
+* Validate search params using the provided schema
+*/
+function validateSearchParams(query, schema) {
+	if (!schema) return query;
+	if (schema.safeParse) {
+		const result = schema.safeParse(query);
+		if (result.success && result.data !== void 0) return result.data;
+		return safeParse(schema, {});
+	}
+	const parsed = safeParse(schema, query);
+	if (parsed !== query) return parsed;
+	const defaults = safeParse(schema, {});
+	return defaults !== query ? defaults : query;
+}
+/**
+* Collect loaders from matched route records
+*/
+function collectLoaders(to) {
+	const loaders = [];
+	for (const record of to.matched) {
+		const routeDef = record.meta?.__kimesh;
+		if (routeDef?.loader) loaders.push({
+			loader: routeDef.loader,
+			routeDef
+		});
+	}
+	return loaders;
+}
+/**
+* Check if error is an AbortError
+*/
+function isAbortError(error) {
+	return error instanceof Error && error.name === "AbortError";
+}
+/**
+* Create the loader navigation guard
+*/
+function createLoaderGuard(context, options = {}) {
+	const { onError } = options;
+	return async function loaderGuard(to, _from, abortController) {
+		const loaders = collectLoaders(to);
+		if (loaders.length === 0) return;
+		await Promise.all(loaders.map(async ({ loader, routeDef }) => {
+			const search = validateSearchParams(to.query, routeDef.validateSearch);
+			const loaderContext = {
+				params: to.params,
+				search,
+				context,
+				signal: abortController.signal
+			};
+			try {
+				await loader(loaderContext);
+			} catch (error) {
+				if (isAbortError(error)) throw error;
+				console.error("[kimesh] Loader error:", error);
+				onError?.(error, to);
+				to.meta.__kimeshError = error;
+			}
+		}));
+	};
+}
+/**
+* Install loader guard on router
+*/
+function installLoaderGuard(router, context, options) {
+	let abortController = null;
+	const removeBeforeEach = router.beforeEach(() => {
+		abortController?.abort();
+		abortController = new AbortController();
+	});
+	const removeBeforeResolve = router.beforeResolve(async (to, from) => {
+		if (!abortController) abortController = new AbortController();
+		const guard = createLoaderGuard(context, { onError: options?.onError });
+		try {
+			await guard(to, from, abortController);
+		} catch (error) {
+			if (error.name === "AbortError") return false;
+			throw error;
+		}
+	});
+	const removeAfterEach = router.afterEach(() => {
+		abortController = null;
+	});
+	return () => {
+		removeBeforeEach();
+		removeBeforeResolve();
+		removeAfterEach();
+	};
+}
+
+//#endregion
+//#region src/runtime-plugin.ts
+const KIMESH_PLUGIN_INDICATOR = "__kimesh_plugin";
+/**
+* Define a Kimesh runtime plugin
+*
+* @example Function-style plugin
+* ```ts
+* export default defineKimeshRuntimePlugin((app) => {
+*   const analytics = new AnalyticsService()
+*   app.router.afterEach((to) => analytics.trackPageView(to.path))
+*   return { provide: { analytics } }
+* })
+* ```
+*
+* @example Object-style plugin with hooks
+* ```ts
+* export default defineKimeshRuntimePlugin({
+*   name: 'my-plugin',
+*   enforce: 'pre',
+*   hooks: {
+*     'app:mounted': () => console.log('App mounted!')
+*   },
+*   setup(app) {
+*     return { provide: { myService: new MyService() } }
+*   }
+* })
+* ```
+*/
+function defineKimeshRuntimePlugin(plugin) {
+	if (typeof plugin === "function") {
+		plugin[KIMESH_PLUGIN_INDICATOR] = true;
+		return plugin;
+	}
+	const { name, enforce, order, dependsOn, parallel, hooks, setup } = plugin;
+	const pluginFn = setup ?? (() => {});
+	pluginFn[KIMESH_PLUGIN_INDICATOR] = true;
+	pluginFn._name = name;
+	pluginFn.meta = {
+		name,
+		enforce,
+		order,
+		dependsOn,
+		parallel
+	};
+	pluginFn.hooks = hooks;
+	return pluginFn;
+}
+/**
+* Check if a value is a Kimesh runtime plugin
+*/
+function isKimeshRuntimePlugin(value) {
+	return typeof value === "function" && value[KIMESH_PLUGIN_INDICATOR] === true;
+}
+/**
+* Get plugin metadata
+*/
+function getPluginMeta(plugin) {
+	return plugin.meta ?? {};
+}
+/**
+* Get plugin name
+*/
+function getPluginName(plugin) {
+	return plugin._name ?? plugin.meta?.name ?? "anonymous";
+}
+/**
+* Get plugin hooks
+*/
+function getPluginHooks(plugin) {
+	return plugin.hooks;
+}
+
+//#endregion
+//#region src/plugin-executor.ts
+const ORDER_MAP = {
+	pre: -20,
+	default: 0,
+	post: 20
+};
+/**
+* Apply a single plugin to the app context
+*/
+async function applyPlugin(app, plugin) {
+	const pluginName = getPluginName(plugin);
+	try {
+		const hooks = getPluginHooks(plugin);
+		if (hooks) app.hooks.addHooks(hooks);
+		const result = await app.runWithContext(() => plugin(app));
+		if (result?.provide) for (const [key, value] of Object.entries(result.provide)) app.provide(key, value);
+	} catch (error) {
+		console.error(`[Kimesh] Plugin "${pluginName}" failed:`, error);
+		await app.hooks.callHook("app:error", error);
+		throw error;
+	}
+}
+/**
+* Sort plugins by their execution order
+*/
+function sortPluginsByOrder(plugins) {
+	return [...plugins].sort((a, b) => {
+		const aMeta = getPluginMeta(a);
+		const bMeta = getPluginMeta(b);
+		return (aMeta.order ?? ORDER_MAP[aMeta.enforce ?? "default"]) - (bMeta.order ?? ORDER_MAP[bMeta.enforce ?? "default"]);
+	});
+}
+/**
+* Mark a plugin as resolved if it has a name
+*/
+function markResolved(resolved, plugin) {
+	const name = getPluginName(plugin);
+	if (name !== "anonymous") resolved.add(name);
+}
+/**
+* Remove resolved dependencies from a pending plugin entry
+*/
+function updatePendingDeps(entry, resolved) {
+	for (const dep of entry.deps) if (resolved.has(dep)) entry.deps.delete(dep);
+}
+/**
+* Apply all plugins to the app context with dependency resolution
+*/
+async function applyPlugins(app, plugins) {
+	const sortedPlugins = sortPluginsByOrder(plugins);
+	const resolved = /* @__PURE__ */ new Set();
+	const pending = [];
+	async function tryResolvePending() {
+		let madeProgress = true;
+		while (madeProgress) {
+			madeProgress = false;
+			const stillPending = [];
+			for (const entry of pending) {
+				updatePendingDeps(entry, resolved);
+				if (entry.deps.size === 0) {
+					await applyPlugin(app, entry.plugin);
+					markResolved(resolved, entry.plugin);
+					madeProgress = true;
+				} else stillPending.push(entry);
+			}
+			pending.length = 0;
+			pending.push(...stillPending);
+		}
+	}
+	for (const plugin of sortedPlugins) {
+		const unresolvedDeps = getPluginMeta(plugin).dependsOn?.filter((dep) => !resolved.has(dep)) ?? [];
+		if (unresolvedDeps.length > 0) pending.push({
+			plugin,
+			deps: new Set(unresolvedDeps)
+		});
+		else {
+			await applyPlugin(app, plugin);
+			markResolved(resolved, plugin);
+			await tryResolvePending();
+		}
+	}
+	for (const { plugin, deps } of pending) console.warn(`[Kimesh] Plugin "${getPluginName(plugin)}" has unresolved dependencies: ${[...deps].join(", ")}`);
+}
+/**
+* Apply plugins with parallel support.
+* Plugins with parallel: true run concurrently within their group.
+*/
+async function applyPluginsWithParallel(app, plugins) {
+	const sortedPlugins = sortPluginsByOrder(plugins);
+	const groups = [];
+	for (const plugin of sortedPlugins) {
+		const isParallel = getPluginMeta(plugin).parallel ?? false;
+		const lastGroup = groups[groups.length - 1];
+		if (lastGroup?.parallel === isParallel) lastGroup.plugins.push(plugin);
+		else groups.push({
+			parallel: isParallel,
+			plugins: [plugin]
+		});
+	}
+	for (const group of groups) if (group.parallel) await Promise.all(group.plugins.map((p) => applyPlugin(app, p)));
+	else for (const plugin of group.plugins) await applyPlugin(app, plugin);
+}
+
+//#endregion
+//#region src/types.ts
+/**
+* Injection key for Kimesh context
+*/
+const KIMESH_CONTEXT_KEY = Symbol("kimesh-context");
+
+//#endregion
+//#region src/create-app.ts
+const KIMESH_APP_CONTEXT_KEY = Symbol("kimesh-app-context");
+const DEFAULT_SCROLL_BEHAVIOR = (to, _from, savedPosition) => {
+	if (savedPosition) return savedPosition;
+	if (to.hash) return {
+		el: to.hash,
+		behavior: "smooth"
+	};
+	return { top: 0 };
+};
+/**
+* Create a Kimesh application with router, query client, and runtime plugins
+*/
+async function createKimeshApp(options) {
+	const { rootComponent, routes, base = "/", history = "web", scrollBehavior = DEFAULT_SCROLL_BEHAVIOR, queryClientConfig, context: userContext, plugins = [], runtimeConfig = {}, layersConfig = {} } = options;
+	const queryClient = new QueryClient(queryClientConfig ?? { defaultOptions: { queries: {
+		staleTime: 1e3 * 60 * 5,
+		gcTime: 1e3 * 60 * 30
+	} } });
+	const fullContext = {
+		queryClient,
+		...typeof userContext === "function" ? userContext() : userContext ?? {}
+	};
+	const router = createRouter({
+		history: history === "hash" ? createWebHashHistory(base) : createWebHistory(base),
+		routes,
+		scrollBehavior
+	});
+	const removeLoaderGuard = installLoaderGuard(router, fullContext, { onError: (error, to) => console.error(`[Kimesh] Loader error for ${to.path}:`, error) });
+	const vueApp = createApp({ render: () => h(rootComponent) });
+	const hooks = createHooks();
+	const appContext = {
+		vueApp,
+		router,
+		queryClient,
+		hooks,
+		$config: runtimeConfig,
+		$layersConfig: layersConfig,
+		isHydrating: false,
+		_state: reactive({}),
+		provide(name, value) {
+			const $name = `$${name}`;
+			Object.defineProperty(vueApp.config.globalProperties, $name, {
+				get: () => value,
+				configurable: true
+			});
+			vueApp.provide($name, value);
+		},
+		runWithContext(fn) {
+			return vueApp.runWithContext(fn);
+		}
+	};
+	if (plugins.length > 0) await applyPlugins(appContext, plugins);
+	await hooks.callHook("app:created", vueApp);
+	vueApp.provide(KIMESH_CONTEXT_KEY, fullContext);
+	vueApp.provide(KIMESH_APP_CONTEXT_KEY, appContext);
+	vueApp.use(router);
+	vueApp.use(VueQueryPlugin, { queryClient });
+	router.beforeEach(() => hooks.callHook("page:start"));
+	router.afterEach(() => hooks.callHook("page:finish"));
+	const kimeshApp = {
+		app: vueApp,
+		router,
+		queryClient,
+		context: appContext,
+		async mount(container) {
+			await hooks.callHook("app:beforeMount", vueApp);
+			vueApp.mount(container);
+			await hooks.callHook("app:mounted", vueApp);
+			return kimeshApp;
+		},
+		unmount() {
+			removeLoaderGuard();
+			vueApp.unmount();
+		}
+	};
+	return kimeshApp;
+}
+
+//#endregion
+//#region src/create-file-route.ts
+/**
+* Create a file-based route definition
+*
+* @example
+* ```ts
+* // In routes/about.vue
+* export const Route = createFileRoute('/about')({
+*   meta: { title: 'About Us' },
+*   loader: async () => {
+*     return { data: await fetchAboutData() }
+*   },
+*   head: {
+*     title: 'About Us',
+*     meta: [{ name: 'description', content: 'Learn about us' }]
+*   }
+* })
+* ```
+*/
+function createFileRoute(path) {
+	return (options = {}) => ({
+		path,
+		meta: options.meta,
+		loader: options.loader,
+		validateSearch: options.validateSearch,
+		beforeLoad: options.beforeLoad,
+		head: options.head,
+		transition: options.transition,
+		viewTransition: options.viewTransition,
+		keepalive: options.keepalive
+	});
+}
+/**
+* Define route for use in Vue SFC
+* Alternative syntax for createFileRoute
+*/
+function defineRoute(options) {
+	return options;
+}
+
+//#endregion
+//#region src/context.ts
+/**
+* Define app context with type inference
+* 
+* @example
+* ```ts
+* // src/app.context.ts
+* import { defineContext } from '@kimesh/router-runtime'
+* 
+* export default defineContext(() => ({
+*   auth: useAuthStore(),
+*   i18n: createI18n(),
+* }))
+* ```
+*/
+function defineContext(factory) {
+	return factory;
+}
+/**
+* Use Kimesh context in components
+* 
+* @example
+* ```vue
+* <script setup>
+* const ctx = useKimeshContext()
+* ctx.auth.logout()
+* <\/script>
+* ```
+*/
+function useKimeshContext() {
+	const context = inject(KIMESH_CONTEXT_KEY);
+	if (!context) throw new Error("[Kimesh] Context not found. Make sure you are using this inside a Kimesh app.");
+	return context;
+}
+
+//#endregion
+//#region src/plugins/core.ts
+/**
+* @kimesh/router-runtime - Core Plugins
+*
+* Built-in runtime plugins for Kimesh.
+*/
+/**
+* Router plugin that wires Vue Router guards to Kimesh hook system
+*
+* This plugin runs with `enforce: 'pre'` to ensure router hooks
+* are available to all other plugins.
+*/
+const routerPlugin = defineKimeshRuntimePlugin({
+	name: "kimesh:router",
+	enforce: "pre",
+	setup({ router, hooks }) {
+		const callHook = hooks.callHook.bind(hooks);
+		router.beforeEach(async (to, from) => {
+			const ctx = {
+				to,
+				from
+			};
+			try {
+				await callHook("navigate:before", ctx);
+			} catch (error) {
+				await callHook("navigate:error", {
+					error,
+					to,
+					from
+				});
+				throw error;
+			}
+		});
+		router.afterEach((to, from, failure) => {
+			callHook("navigate:after", {
+				to,
+				from,
+				failure: failure ?? void 0
+			});
+		});
+		router.onError((error, to, from) => {
+			callHook("navigate:error", {
+				error,
+				to,
+				from
+			});
+		});
+	}
+});
+/**
+* Query plugin that sets up prefetching on navigation
+*
+* Note: QueryClient is already initialized in createKimeshApp,
+* this plugin adds navigation-based prefetching.
+*/
+const queryPlugin = defineKimeshRuntimePlugin({
+	name: "kimesh:query",
+	enforce: "pre",
+	dependsOn: ["kimesh:router"],
+	setup() {}
+});
+/**
+* Get the default core plugins for a Kimesh app
+*/
+function getCorePlugins() {
+	return [routerPlugin, queryPlugin];
+}
+
+//#endregion
+//#region src/components/utils.ts
+/**
+* Wrap content in Vue KeepAlive component
+*
+* @param config - KeepAlive configuration or boolean
+* @param content - Content to wrap (VNode)
+* @returns Wrapped VNode
+*/
+function wrapInKeepAlive(config, content) {
+	if (!config) return content;
+	return h(KeepAlive, config === true ? {} : config, { default: () => content });
+}
+/**
+* Merge multiple transition props into one
+* Later props override earlier ones
+*
+* @param propsArray - Array of transition props to merge
+* @returns Merged transition props
+*/
+function mergeTransitionProps(propsArray) {
+	const merged = {};
+	for (const props of propsArray) {
+		if (!props || props === true) continue;
+		Object.assign(merged, props);
+	}
+	return merged;
+}
+/**
+* Check if route is changing based on path and matched components
+* Used to determine if View Transitions API should be triggered
+*
+* @param to - Target route
+* @param from - Current route
+* @returns True if route is actually changing
+*/
+function isChangingPage(to, from) {
+	if (to === from) return false;
+	if (to.path === from.path) return false;
+	return !to.matched.every((comp, index) => comp.components?.default === from.matched[index]?.components?.default);
+}
+/**
+* Generate unique route key for transition identification
+* Based on Nuxt's generateRouteKey implementation
+*
+* @param routeProps - RouterView slot props
+* @param override - Optional key override
+* @returns Unique route key
+*/
+const ROUTE_KEY_PARENTHESES_RE = /(:\w+)\([^)]+\)/g;
+const ROUTE_KEY_SYMBOLS_RE = /(:\w+)[?+*]/g;
+const ROUTE_KEY_NORMAL_RE = /:\w+/g;
+function generateRouteKey(routeProps, override) {
+	const matchedRoute = routeProps.route.matched.find((m) => m.components?.default === routeProps.Component?.type);
+	const source = override ?? matchedRoute?.meta.key ?? (matchedRoute && interpolatePath(routeProps.route, matchedRoute));
+	return typeof source === "function" ? source(routeProps.route) : source;
+}
+function interpolatePath(route, match) {
+	return match.path.replace(ROUTE_KEY_PARENTHESES_RE, "$1").replace(ROUTE_KEY_SYMBOLS_RE, "$1").replace(ROUTE_KEY_NORMAL_RE, (r) => route.params[r.slice(1)]?.toString() || "");
+}
+
+//#endregion
+//#region src/plugins/view-transitions.ts
+/**
+* View Transitions API Plugin
+* Enables native browser View Transitions for smooth page navigation
+*
+* @see https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
+*
+* @example
+* ```ts
+* import { viewTransitionsPlugin } from '@kimesh/router-runtime/plugins/view-transitions'
+*
+* createKimeshApp({
+*   plugins: [viewTransitionsPlugin]
+* })
+* ```
+*/
+const viewTransitionsPlugin = defineKimeshRuntimePlugin({
+	name: "kimesh:view-transitions",
+	enforce: "pre",
+	setup(app) {
+		if (typeof document === "undefined" || !document.startViewTransition) {
+			if (process.env.NODE_ENV === "development") console.warn("[Kimesh View Transitions] Browser does not support View Transitions API");
+			return;
+		}
+		let transition;
+		let hasUAVisualTransition = false;
+		let finishTransition;
+		let abortTransition;
+		const resetTransitionState = () => {
+			transition = void 0;
+			hasUAVisualTransition = false;
+			abortTransition = void 0;
+			finishTransition = void 0;
+		};
+		if (typeof window !== "undefined") window.addEventListener("popstate", (event) => {
+			hasUAVisualTransition = event.hasUAVisualTransition || false;
+			if (hasUAVisualTransition) transition?.skipTransition();
+		});
+		app.router.beforeResolve(async (to, from) => {
+			const viewTransitionMode = to.meta.__kimesh?.viewTransition;
+			const prefersNoTransition = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches && viewTransitionMode !== "always";
+			if (viewTransitionMode === false || prefersNoTransition || hasUAVisualTransition || !isChangingPage(to, from)) return;
+			const promise = new Promise((resolve, reject) => {
+				finishTransition = resolve;
+				abortTransition = reject;
+			});
+			let changeRoute;
+			const ready = new Promise((resolve) => changeRoute = resolve);
+			transition = document.startViewTransition(() => {
+				changeRoute();
+				return promise;
+			});
+			transition.finished.then(resetTransitionState).catch(resetTransitionState);
+			await app.hooks.callHook("page:view-transition:start", transition);
+			return ready;
+		});
+		app.hooks.hook("app:error", () => {
+			abortTransition?.();
+			resetTransitionState();
+		});
+		app.hooks.hook("page:finish", () => {
+			finishTransition?.();
+		});
+	}
+});
+
+//#endregion
+//#region src/components/KmOutlet.ts
+/**
+* Check if View Transitions API is supported
+*/
+const supportsViewTransitions = () => typeof document !== "undefined" && "startViewTransition" in document;
+/**
+* KmOutlet - Router view wrapper component
+* Renders the matched route component with optional transitions and keepalive
+*
+* Transition options for async pages (useSuspenseQuery):
+* 
+* 1. viewTransition: true (Recommended)
+*    - Uses View Transitions API (Chrome 111+, Edge 111+, Opera 97+)
+*    - Works perfectly with async pages
+*    - Falls back to instant transition on unsupported browsers
+* 
+* 2. transition: { name: 'fade' } (without mode: 'out-in')
+*    - Uses Vue Transition with default mode (cross-fade)
+*    - Both pages exist during transition (old fades out, new fades in)
+*    - Requires CSS: .page-leave-active { position: absolute }
+* 
+* 3. transition: { name: 'fade', mode: 'out-in' }
+*    - ⚠️ NOT recommended for async pages - may cause blank screen
+*/
+const KmOutlet = defineComponent({
+	name: "KmOutlet",
+	props: {
+		name: {
+			type: String,
+			default: "default"
+		},
+		transition: {
+			type: [Boolean, Object],
+			default: void 0
+		},
+		viewTransition: {
+			type: Boolean,
+			default: false
+		},
+		keepalive: {
+			type: [Boolean, Object],
+			default: void 0
+		},
+		pageKey: {
+			type: [Function, String],
+			default: null
+		}
+	},
+	setup(props, { slots }) {
+		const kimeshApp = inject(KIMESH_APP_CONTEXT_KEY, null);
+		const router = useRouter$1();
+		let cachedVNode;
+		const isPending = ref(false);
+		let viewTransitionAbort = null;
+		if (props.viewTransition && supportsViewTransitions()) router.beforeResolve(async () => {
+			if (viewTransitionAbort) return;
+			let resolveTransition;
+			const transitionReady = new Promise((resolve) => {
+				resolveTransition = resolve;
+			});
+			const transition = document.startViewTransition(async () => {
+				await transitionReady;
+			});
+			viewTransitionAbort = () => {
+				transition.skipTransition();
+				viewTransitionAbort = null;
+			};
+			await nextTick();
+			resolveTransition();
+			try {
+				await transition.finished;
+			} finally {
+				viewTransitionAbort = null;
+			}
+		});
+		return () => {
+			return h(RouterView, { name: props.name }, { default: (routeProps) => {
+				if (slots.default) return slots.default(routeProps);
+				if (!routeProps.Component) return cachedVNode;
+				const routeKey = generateRouteKey(routeProps, props.pageKey) || routeProps.route.path;
+				const routeTransition = routeProps.route.meta.__kimesh?.transition;
+				const hasVueTransition = !props.viewTransition && !!(props.transition ?? routeTransition ?? false);
+				const transitionProps = hasVueTransition ? mergeTransitionProps([
+					props.transition,
+					routeTransition,
+					{ onAfterLeave: () => {
+						if (kimeshApp) delete kimeshApp._runningTransition;
+						kimeshApp?.hooks.callHook("page:transition:finish");
+					} }
+				]) : void 0;
+				const keepaliveConfig = props.keepalive ?? routeProps.route.meta.__kimesh?.keepalive;
+				const componentNode = h(routeProps.Component, { key: routeKey });
+				const wrappedNode = wrapInKeepAlive(keepaliveConfig, h(Suspense, {
+					suspensible: true,
+					onPending: () => {
+						isPending.value = true;
+						if (hasVueTransition && kimeshApp) kimeshApp._runningTransition = true;
+						kimeshApp?.hooks.callHook("page:start");
+					},
+					onResolve: async () => {
+						await nextTick();
+						isPending.value = false;
+						if (kimeshApp) delete kimeshApp._runningTransition;
+						await kimeshApp?.hooks.callHook("page:finish");
+					}
+				}, { default: () => componentNode }));
+				if (props.viewTransition) {
+					const pageVNode$1 = h("div", {
+						key: routeKey,
+						class: "km-outlet-page",
+						style: { viewTransitionName: "km-page" }
+					}, [wrappedNode]);
+					cachedVNode = pageVNode$1;
+					return pageVNode$1;
+				}
+				if (!hasVueTransition || !transitionProps) {
+					cachedVNode = wrappedNode;
+					return wrappedNode;
+				}
+				const pageVNode = h("div", {
+					key: routeKey,
+					class: "km-outlet-page"
+				}, [wrappedNode]);
+				cachedVNode = pageVNode;
+				return h(Transition, {
+					...transitionProps,
+					appear: transitionProps.appear ?? false
+				}, { default: () => pageVNode });
+			} });
+		};
+	}
+});
+
+//#endregion
+//#region src/components/KmLink.ts
+/**
+* Resolve path by replacing param placeholders with actual values
+*/
+function resolvePath(path, params) {
+	if (!params) return path;
+	let resolved = path;
+	for (const [key, value] of Object.entries(params)) resolved = resolved.replace(`:${key}`, String(value));
+	return resolved;
+}
+/**
+* KmLink - Type-safe router link component
+*
+* @example
+* ```vue
+* <!-- Static route -->
+* <KmLink to="/posts">Posts</KmLink>
+*
+* <!-- Dynamic route with params -->
+* <KmLink to="/posts/:postId" :params="{ postId: '123' }">
+*   Post 123
+* </KmLink>
+* ```
+*/
+const KmLink = defineComponent({
+	name: "KmLink",
+	props: {
+		to: {
+			type: String,
+			required: true
+		},
+		params: {
+			type: Object,
+			default: void 0
+		},
+		replace: {
+			type: Boolean,
+			default: false
+		},
+		activeClass: {
+			type: String,
+			default: "km-link-active"
+		},
+		exactActiveClass: {
+			type: String,
+			default: "km-link-exact-active"
+		},
+		prefetch: {
+			type: Boolean,
+			default: true
+		},
+		tag: {
+			type: String,
+			default: "a"
+		}
+	},
+	setup(props, { slots, attrs }) {
+		const route = useRoute$1();
+		const resolvedPath = computed(() => resolvePath(props.to, props.params));
+		const isActive = computed(() => route.path.startsWith(resolvedPath.value));
+		const isExactActive = computed(() => route.path === resolvedPath.value);
+		const isCustomTag = computed(() => props.tag !== "a");
+		return () => {
+			const renderSlotContent = slots.default ? { default: (linkProps) => {
+				if (!isCustomTag.value) return slots.default?.(linkProps);
+				return h(props.tag, {
+					onClick: linkProps.navigate,
+					class: {
+						[props.activeClass]: isActive.value,
+						[props.exactActiveClass]: isExactActive.value
+					}
+				}, slots.default?.(linkProps));
+			} } : void 0;
+			return h(RouterLink, {
+				to: resolvedPath.value,
+				replace: props.replace,
+				activeClass: props.activeClass,
+				exactActiveClass: props.exactActiveClass,
+				custom: isCustomTag.value,
+				...attrs
+			}, renderSlotContent);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/KmDeferred.ts
+/**
+* KmDeferred - Suspense wrapper with error handling
+*
+* Wraps Vue's <Suspense> with error boundary functionality.
+* Use with useSuspenseQuery for progressive data loading.
+*
+* @example
+* ```vue
+* <KmDeferred :timeout="200">
+*   <AsyncDataComponent />
+*   <template #fallback>
+*     <Skeleton />
+*   </template>
+*   <template #error="{ error, retry }">
+*     <ErrorCard :error="error" @retry="retry" />
+*   </template>
+* </KmDeferred>
+* ```
+*/
+const KmDeferred = defineComponent({
+	name: "KmDeferred",
+	props: { timeout: {
+		type: Number,
+		default: 0
+	} },
+	setup(props, { slots, expose }) {
+		const error = ref(null);
+		const key = ref(0);
+		onErrorCaptured((err) => {
+			error.value = err instanceof Error ? err : new Error(String(err));
+			return false;
+		});
+		function retry() {
+			error.value = null;
+			key.value++;
+		}
+		expose({
+			retry,
+			error
+		});
+		return () => {
+			if (error.value) {
+				if (slots.error) return h("div", { class: "km-deferred-error-wrapper" }, slots.error({
+					error: error.value,
+					retry
+				}));
+				return h("div", { class: "km-deferred-error" }, [h("p", error.value.message), h("button", { onClick: retry }, "Retry")]);
+			}
+			const fallbackContent = slots.fallback ? slots.fallback() : h("div", { class: "km-deferred-loading" }, "Loading...");
+			return h(Suspense, {
+				key: key.value,
+				timeout: props.timeout
+			}, {
+				default: () => slots.default?.(),
+				fallback: () => fallbackContent
+			});
+		};
+	}
+});
+
+//#endregion
+//#region src/composables/use-search.ts
+/**
+* Convert an object to a query string record, filtering out null/undefined values
+*/
+function toQueryRecord(obj) {
+	const query = {};
+	for (const [key, value] of Object.entries(obj)) if (value !== void 0 && value !== null) query[key] = String(value);
+	return query;
+}
+/**
+* Parse with schema, falling back to defaults or empty object
+*/
+function parseWithDefaults(schema, input) {
+	try {
+		return schema.parse(input);
+	} catch {
+		return {};
+	}
+}
+/**
+* Access and update validated search params
+*
+* @example
+* ```vue
+* <script setup>
+* import { useSearch } from '@kimesh/router-runtime'
+* import { z } from 'zod'
+*
+* const searchSchema = z.object({
+*   page: z.coerce.number().default(1),
+*   sort: z.enum(['asc', 'desc']).default('desc')
+* })
+*
+* const { search, setSearch } = useSearch(searchSchema)
+* <\/script>
+* ```
+*/
+function useSearch(schema) {
+	const route = useRoute$1();
+	const router = useRouter$1();
+	const defaults = parseWithDefaults(schema, {});
+	const search = computed(() => parseWithDefaults(schema, route.query));
+	function setSearch(key, value) {
+		router.replace({ query: {
+			...route.query,
+			[key]: String(value)
+		} });
+	}
+	function setAllSearch(params) {
+		const merged = {
+			...search.value,
+			...params
+		};
+		router.replace({ query: toQueryRecord(merged) });
+	}
+	function resetSearch() {
+		router.replace({ query: toQueryRecord(defaults) });
+	}
+	return {
+		search,
+		setSearch,
+		setAllSearch,
+		resetSearch
+	};
+}
+
+//#endregion
+//#region src/composables/use-params.ts
+/**
+* Get typed route params (non-reactive snapshot)
+*
+* @example
+* ```ts
+* // In /posts/:postId page
+* const params = useParams<'/posts/:postId'>()
+* // params is typed as { postId: string }
+* console.log(params.postId)
+* ```
+*/
+function useParams() {
+	return useRoute$1().params;
+}
+/**
+* Get reactive typed route params
+*
+* @example
+* ```ts
+* // In /posts/:postId page
+* const params = useReactiveParams<'/posts/:postId'>()
+* // params.value is typed as { postId: string }
+* watchEffect(() => {
+*   console.log(params.value.postId)
+* })
+* ```
+*/
+function useReactiveParams() {
+	const route = useRoute$1();
+	return computed(() => route.params);
+}
+
+//#endregion
+//#region src/composables/use-navigate.ts
+/**
+* Type-safe navigation composable
+*
+* @example
+* ```ts
+* const { navigate } = useNavigate()
+*
+* // Navigate to static route
+* navigate({ to: '/posts' })
+*
+* // Navigate to dynamic route with params
+* navigate({ to: '/posts/:postId', params: { postId: '123' } })
+*
+* // Replace instead of push
+* navigate({ to: '/posts', replace: true })
+* ```
+*/
+function useNavigate() {
+	const router = useRouter$1();
+	/**
+	* Navigate to a route with type-safe params
+	*/
+	function navigate(options) {
+		let path = options.to;
+		if (options.params) for (const [key, value] of Object.entries(options.params)) path = path.replace(`:${key}`, String(value));
+		if (options.replace) return router.replace(path);
+		return router.push(path);
+	}
+	/**
+	* Navigate back in history
+	*/
+	function back() {
+		return router.back();
+	}
+	/**
+	* Navigate forward in history
+	*/
+	function forward() {
+		return router.forward();
+	}
+	/**
+	* Navigate to a specific position in history
+	*/
+	function go(delta) {
+		return router.go(delta);
+	}
+	return {
+		navigate,
+		back,
+		forward,
+		go,
+		router
+	};
+}
+
+//#endregion
+//#region src/composables/use-runtime-config.ts
+let _config;
+/**
+* Access runtime configuration.
+*
+* Returns the runtime config that was injected at build time via Vite's `define`.
+* Values can be overridden using `KIMESH_*` environment variables during build.
+*
+* @returns Frozen runtime config object
+*
+* @example
+* ```vue
+* <script setup>
+* const config = useRuntimeConfig()
+* console.log(config.apiBase)
+* console.log(config.debug)
+* <\/script>
+* ```
+*
+* @example
+* ```ts
+* // In a composable
+* export function useApi() {
+*   const config = useRuntimeConfig()
+*
+*   async function fetch<T>(endpoint: string): Promise<T> {
+*     const url = `${config.apiBase}${endpoint}`
+*     const response = await globalThis.fetch(url)
+*     return response.json()
+*   }
+*
+*   return { fetch }
+* }
+* ```
+*/
+function useRuntimeConfig() {
+	if (!_config) try {
+		_config = Object.freeze({ ...__KIMESH_CONFIG__ ?? {} });
+	} catch {
+		_config = Object.freeze({});
+	}
+	return _config;
+}
+
+//#endregion
+//#region src/composables/use-kimesh-app.ts
+/**
+* @kimesh/router-runtime - useKimeshApp Composable
+*
+* Provides access to the Kimesh app context from within components.
+*/
+/**
+* Get the Kimesh app context
+*
+* @example
+* ```ts
+* const { router, queryClient, $config } = useKimeshApp()
+* console.log($config.apiUrl)
+* ```
+*
+* @throws Error if called outside a Kimesh app
+*/
+function useKimeshApp() {
+	const context = inject(KIMESH_APP_CONTEXT_KEY);
+	if (!context) throw new Error("[Kimesh] useKimeshApp() must be called within a Kimesh app. Make sure you have created the app with createKimeshApp().");
+	return context;
+}
+/**
+* Try to get the Kimesh app context without throwing
+*/
+function tryUseKimeshApp() {
+	return inject(KIMESH_APP_CONTEXT_KEY);
+}
+
+//#endregion
+//#region src/composables/useState.ts
+/**
+* @kimesh/router-runtime - useState Composable
+*
+* Centralized reactive state management for Kimesh applications.
+* CSR-optimized alternative to Nuxt's useState.
+*/
+const STATE_KEY_PREFIX = "$s_";
+/**
+* Get all state keys (without prefix).
+*/
+function getKmStateKeys() {
+	const app = tryUseKimeshApp();
+	if (!app?._state) return [];
+	return Object.keys(app._state).filter((k) => k.startsWith(STATE_KEY_PREFIX)).map((k) => k.slice(3));
+}
+/**
+* Check if a state exists.
+*/
+function hasKmState(key) {
+	const app = tryUseKimeshApp();
+	if (!app?._state) return false;
+	const prefixedKey = STATE_KEY_PREFIX + key;
+	return prefixedKey in app._state && app._state[prefixedKey] !== void 0;
+}
+/**
+* Clear Kimesh state by key(s) or predicate.
+* Pass undefined to clear all state, a string for single key,
+* an array for multiple keys, or a predicate function.
+*/
+function clearKmState(keys) {
+	const app = tryUseKimeshApp();
+	if (!app?._state) return;
+	const allStateKeys = getKmStateKeys();
+	const keysToDelete = keys === void 0 ? allStateKeys : typeof keys === "function" ? allStateKeys.filter(keys) : Array.isArray(keys) ? keys : [keys];
+	for (const key of keysToDelete) {
+		const prefixedKey = STATE_KEY_PREFIX + key;
+		if (prefixedKey in app._state) delete app._state[prefixedKey];
+	}
+}
+/**
+* Get or create reactive state by key.
+*
+* @throws TypeError if key is not a non-empty string or init is not a function
+* @throws Error if _state is not initialized
+*/
+function useState(key, init) {
+	if (!key || typeof key !== "string") throw new TypeError("[Kimesh] [useState] key must be a non-empty string");
+	if (init !== void 0 && typeof init !== "function") throw new TypeError("[Kimesh] [useState] init must be a function");
+	const app = useKimeshApp();
+	if (!app._state) throw new Error("[Kimesh] [useState] _state not initialized. Make sure you are using Kimesh v1.0+ with state support.");
+	const prefixedKey = STATE_KEY_PREFIX + key;
+	const state = toRef(app._state, prefixedKey);
+	if (state.value === void 0 && init) {
+		const initialValue = init();
+		if (isRef(initialValue)) {
+			app._state[prefixedKey] = initialValue;
+			return initialValue;
+		}
+		state.value = initialValue;
+	}
+	return state;
+}
+
+//#endregion
+//#region src/composables/use-navigation-middleware.ts
+/**
+* Register navigation middleware using the hook system
+*
+* @example
+* ```ts
+* // In a plugin or component setup
+* const { remove } = useNavigationMiddleware({
+*   before: ({ to }) => {
+*     if (!isAuthenticated() && to.meta.requiresAuth) {
+*       return false // Cancel navigation
+*     }
+*   },
+*   after: ({ to }) => {
+*     analytics.trackPageView(to.path)
+*   },
+*   error: ({ error }) => {
+*     console.error('Navigation failed:', error)
+*   },
+* })
+*
+* // Cleanup when done
+* onUnmounted(() => remove())
+* ```
+*
+* @returns Object with remove function to cleanup hooks
+*/
+function useNavigationMiddleware(options) {
+	const { hooks } = useKimeshApp();
+	const cleanups = [];
+	if (options.before) cleanups.push(hooks.hook("navigate:before", options.before));
+	if (options.after) cleanups.push(hooks.hook("navigate:after", options.after));
+	if (options.error) cleanups.push(hooks.hook("navigate:error", options.error));
+	return { remove() {
+		for (const cleanup of cleanups) cleanup();
+	} };
+}
+/**
+* Create a navigation guard that runs before navigation
+*
+* @example
+* ```ts
+* // Auth guard plugin
+* export default defineKimeshRuntimePlugin({
+*   name: 'auth-guard',
+*   setup(app) {
+*     app.runWithContext(() => {
+*       useNavigationGuard(({ to }) => {
+*         if (to.meta.requiresAuth && !isAuthenticated()) {
+*           return false
+*         }
+*       })
+*     })
+*   }
+* })
+* ```
+*/
+function useNavigationGuard(guard) {
+	const { hooks } = useKimeshApp();
+	return hooks.hook("navigate:before", guard);
+}
+/**
+* Register a callback for after navigation
+*/
+function useAfterNavigation(callback) {
+	const { hooks } = useKimeshApp();
+	return hooks.hook("navigate:after", callback);
+}
+
+//#endregion
+export { KIMESH_APP_CONTEXT_KEY, KIMESH_CONTEXT_KEY, KIMESH_PLUGIN_INDICATOR, KmDeferred, KmLink, KmOutlet, STATE_KEY_PREFIX, applyPlugin, applyPlugins, applyPluginsWithParallel, clearKmState, createFileRoute, createKimeshApp, createLoaderGuard, defineContext, defineKimeshRuntimePlugin, defineRoute, getCorePlugins, getKmStateKeys, getPluginHooks, getPluginMeta, getPluginName, hasKmState, installLoaderGuard, isKimeshRuntimePlugin, onBeforeRouteLeave, onBeforeRouteUpdate, queryPlugin, routerPlugin, tryUseKimeshApp, useAfterNavigation, useKimeshApp, useKimeshContext, useLink, useNavigate, useNavigationGuard, useNavigationMiddleware, useParams, useReactiveParams, useRoute, useRouter, useRuntimeConfig, useSearch, useState };
+//# sourceMappingURL=index.mjs.map