@pyreon/router 0.14.0 → 0.16.0

package/lib/analysis/index.js.html

@@ -5386,7 +5386,7 @@ var drawChart = (function (exports) {
   </script>
   <script>
     /*<!--*/
-    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src","children":[{"uid":"007eb862-1","name":"loader.ts"},{"uid":"007eb862-3","name":"match.ts"},{"uid":"007eb862-5","name":"scroll.ts"},{"uid":"007eb862-7","name":"types.ts"},{"uid":"007eb862-9","name":"router.ts"},{"uid":"007eb862-11","name":"components.tsx"},{"uid":"007eb862-13","name":"not-found.ts"},{"uid":"007eb862-15","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"007eb862-1":{"renderedLength":2974,"gzipLength":1310,"brotliLength":0,"metaUid":"007eb862-0"},"007eb862-3":{"renderedLength":12965,"gzipLength":3914,"brotliLength":0,"metaUid":"007eb862-2"},"007eb862-5":{"renderedLength":2194,"gzipLength":899,"brotliLength":0,"metaUid":"007eb862-4"},"007eb862-7":{"renderedLength":385,"gzipLength":246,"brotliLength":0,"metaUid":"007eb862-6"},"007eb862-9":{"renderedLength":27519,"gzipLength":7633,"brotliLength":0,"metaUid":"007eb862-8"},"007eb862-11":{"renderedLength":9851,"gzipLength":3302,"brotliLength":0,"metaUid":"007eb862-10"},"007eb862-13":{"renderedLength":1315,"gzipLength":682,"brotliLength":0,"metaUid":"007eb862-12"},"007eb862-15":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"007eb862-14"}},"nodeMetas":{"007eb862-0":{"id":"/src/loader.ts","moduleParts":{"index.js":"007eb862-1"},"imported":[{"uid":"007eb862-16"}],"importedBy":[{"uid":"007eb862-14"},{"uid":"007eb862-10"}]},"007eb862-2":{"id":"/src/match.ts","moduleParts":{"index.js":"007eb862-3"},"imported":[],"importedBy":[{"uid":"007eb862-14"},{"uid":"007eb862-8"}]},"007eb862-4":{"id":"/src/scroll.ts","moduleParts":{"index.js":"007eb862-5"},"imported":[],"importedBy":[{"uid":"007eb862-8"}]},"007eb862-6":{"id":"/src/types.ts","moduleParts":{"index.js":"007eb862-7"},"imported":[],"importedBy":[{"uid":"007eb862-14"},{"uid":"007eb862-8"}]},"007eb862-8":{"id":"/src/router.ts","moduleParts":{"index.js":"007eb862-9"},"imported":[{"uid":"007eb862-16"},{"uid":"007eb862-17"},{"uid":"007eb862-2"},{"uid":"007eb862-4"},{"uid":"007eb862-6"}],"importedBy":[{"uid":"007eb862-14"},{"uid":"007eb862-10"}]},"007eb862-10":{"id":"/src/components.tsx","moduleParts":{"index.js":"007eb862-11"},"imported":[{"uid":"007eb862-16"},{"uid":"007eb862-17"},{"uid":"007eb862-0"},{"uid":"007eb862-8"}],"importedBy":[{"uid":"007eb862-14"}]},"007eb862-12":{"id":"/src/not-found.ts","moduleParts":{"index.js":"007eb862-13"},"imported":[{"uid":"007eb862-16"}],"importedBy":[{"uid":"007eb862-14"}]},"007eb862-14":{"id":"/src/index.ts","moduleParts":{"index.js":"007eb862-15"},"imported":[{"uid":"007eb862-10"},{"uid":"007eb862-12"},{"uid":"007eb862-0"},{"uid":"007eb862-2"},{"uid":"007eb862-8"},{"uid":"007eb862-6"}],"importedBy":[],"isEntry":true},"007eb862-16":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"007eb862-10"},{"uid":"007eb862-12"},{"uid":"007eb862-0"},{"uid":"007eb862-8"}]},"007eb862-17":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"007eb862-10"},{"uid":"007eb862-8"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
+    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src","children":[{"uid":"93e1055e-1","name":"loader.ts"},{"uid":"93e1055e-3","name":"match.ts"},{"uid":"93e1055e-5","name":"redirect.ts"},{"uid":"93e1055e-7","name":"scroll.ts"},{"uid":"93e1055e-9","name":"types.ts"},{"uid":"93e1055e-11","name":"router.ts"},{"uid":"93e1055e-13","name":"components.tsx"},{"uid":"93e1055e-15","name":"not-found.ts"},{"uid":"93e1055e-17","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"93e1055e-1":{"renderedLength":5692,"gzipLength":2467,"brotliLength":0,"metaUid":"93e1055e-0"},"93e1055e-3":{"renderedLength":16699,"gzipLength":5143,"brotliLength":0,"metaUid":"93e1055e-2"},"93e1055e-5":{"renderedLength":1966,"gzipLength":1043,"brotliLength":0,"metaUid":"93e1055e-4"},"93e1055e-7":{"renderedLength":2194,"gzipLength":899,"brotliLength":0,"metaUid":"93e1055e-6"},"93e1055e-9":{"renderedLength":385,"gzipLength":246,"brotliLength":0,"metaUid":"93e1055e-8"},"93e1055e-11":{"renderedLength":29175,"gzipLength":8093,"brotliLength":0,"metaUid":"93e1055e-10"},"93e1055e-13":{"renderedLength":10756,"gzipLength":3576,"brotliLength":0,"metaUid":"93e1055e-12"},"93e1055e-15":{"renderedLength":1315,"gzipLength":682,"brotliLength":0,"metaUid":"93e1055e-14"},"93e1055e-17":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"93e1055e-16"}},"nodeMetas":{"93e1055e-0":{"id":"/src/loader.ts","moduleParts":{"index.js":"93e1055e-1"},"imported":[{"uid":"93e1055e-18"}],"importedBy":[{"uid":"93e1055e-16"},{"uid":"93e1055e-12"}]},"93e1055e-2":{"id":"/src/match.ts","moduleParts":{"index.js":"93e1055e-3"},"imported":[],"importedBy":[{"uid":"93e1055e-16"},{"uid":"93e1055e-12"},{"uid":"93e1055e-10"}]},"93e1055e-4":{"id":"/src/redirect.ts","moduleParts":{"index.js":"93e1055e-5"},"imported":[],"importedBy":[{"uid":"93e1055e-16"},{"uid":"93e1055e-10"}]},"93e1055e-6":{"id":"/src/scroll.ts","moduleParts":{"index.js":"93e1055e-7"},"imported":[],"importedBy":[{"uid":"93e1055e-10"}]},"93e1055e-8":{"id":"/src/types.ts","moduleParts":{"index.js":"93e1055e-9"},"imported":[],"importedBy":[{"uid":"93e1055e-16"},{"uid":"93e1055e-10"}]},"93e1055e-10":{"id":"/src/router.ts","moduleParts":{"index.js":"93e1055e-11"},"imported":[{"uid":"93e1055e-18"},{"uid":"93e1055e-19"},{"uid":"93e1055e-2"},{"uid":"93e1055e-4"},{"uid":"93e1055e-6"},{"uid":"93e1055e-8"}],"importedBy":[{"uid":"93e1055e-16"},{"uid":"93e1055e-12"}]},"93e1055e-12":{"id":"/src/components.tsx","moduleParts":{"index.js":"93e1055e-13"},"imported":[{"uid":"93e1055e-18"},{"uid":"93e1055e-19"},{"uid":"93e1055e-0"},{"uid":"93e1055e-2"},{"uid":"93e1055e-10"}],"importedBy":[{"uid":"93e1055e-16"}]},"93e1055e-14":{"id":"/src/not-found.ts","moduleParts":{"index.js":"93e1055e-15"},"imported":[{"uid":"93e1055e-18"}],"importedBy":[{"uid":"93e1055e-16"}]},"93e1055e-16":{"id":"/src/index.ts","moduleParts":{"index.js":"93e1055e-17"},"imported":[{"uid":"93e1055e-12"},{"uid":"93e1055e-14"},{"uid":"93e1055e-4"},{"uid":"93e1055e-0"},{"uid":"93e1055e-2"},{"uid":"93e1055e-10"},{"uid":"93e1055e-8"}],"importedBy":[],"isEntry":true},"93e1055e-18":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"93e1055e-12"},{"uid":"93e1055e-14"},{"uid":"93e1055e-0"},{"uid":"93e1055e-10"}]},"93e1055e-19":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"93e1055e-12"},{"uid":"93e1055e-10"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/lib/index.js

@@ -1,8 +1,8 @@
-import { ErrorBoundary, createContext, createRef, h, onUnmount, provide, useContext } from "@pyreon/core";
+import { ErrorBoundary, createContext, createRef, cx, h, nativeCompat, onUnmount, provide, useContext } from "@pyreon/core";
 import { computed, signal } from "@pyreon/reactivity";
 
 //#region src/loader.ts
-const __DEV__$1 = import.meta.env?.DEV === true;
+const __DEV__$1 = process.env.NODE_ENV !== "production";
 const _countSink$1 = globalThis;
 /**
 * Context frame that holds the loader data for the currently rendered route record.
@@ -28,12 +28,18 @@ function useLoaderData() {
 * SSR helper: pre-run all loaders for the given path before rendering.
 * Call this before `renderToString` so route components can read data via `useLoaderData()`.
 *
+* The optional `request` is forwarded to each loader's `LoaderContext.request`,
+* letting server-side loaders read cookies / auth headers and `throw redirect()`
+* before the layout renders. A loader that throws `redirect()` propagates the
+* thrown error here — the SSR handler's `catch` converts it into a 302/307
+* `Location:` Response.
+*
 * @example
 * const router = createRouter({ routes, url: req.url })
-* await prefetchLoaderData(router, req.url)
+* await prefetchLoaderData(router, req.url, request)
 * const html = await renderToString(h(App, { router }))
 */
-async function prefetchLoaderData(router, path) {
+async function prefetchLoaderData(router, path, request) {
 	if (__DEV__$1) _countSink$1.__pyreon_count__?.("router.prefetch");
 	const route = router._resolve(path);
 	const ac = new AbortController();
@@ -41,7 +47,8 @@ async function prefetchLoaderData(router, path) {
 		const data = await r.loader?.({
 			params: route.params,
 			query: route.query,
-			signal: ac.signal
+			signal: ac.signal,
+			...request ? { request } : {}
 		});
 		router._loaderData.set(r, data);
 	}));
@@ -63,6 +70,51 @@ function serializeLoaderData(router) {
 	return result;
 }
 /**
+* Serialize loader data to JSON for embedding in an SSR `<script>` tag.
+*
+* M2.2 — Drop-in replacement for `JSON.stringify(serializeLoaderData(router))`
+* with three correctness wins:
+*   1. **Strips functions / symbols / undefined values silently** so a loader
+*      that accidentally returns `{ data, fn: () => {} }` doesn't crash
+*      hydration — `JSON.stringify` drops these by default for the value
+*      itself but THROWS on circular references containing them. The custom
+*      replacer drops them inline so the surrounding object survives.
+*   2. **Detects circular references** with a WeakSet and emits a clear
+*      `[Pyreon] Loader returned circular reference at key "<path>"` error
+*      naming the offending key instead of `Converting circular structure
+*      to JSON` (which doesn't tell the user which loader is broken).
+*   3. **Escapes `</`** so embedding the JSON inside `<script>` can't break
+*      out of the script tag — already done at every call site but now
+*      centralised so all four callers (handler string-mode, handler stream-
+*      mode, SSG entry, dev SSR) get the escape uniformly.
+*
+* Returns the safely-escaped JSON string ready to drop into a `<script>`
+* tag's body. Throws (with the Pyreon-prefixed error) on circular refs so
+* the caller's existing try/catch wraps it correctly — silent serialization
+* failures were the pre-fix shape.
+*
+* @example
+* const json = stringifyLoaderData(serializeLoaderData(router))
+* const tag = `<script>window.__PYREON_LOADER_DATA__=${json}<\/script>`
+*/
+function stringifyLoaderData(loaderData) {
+	const seen = /* @__PURE__ */ new WeakSet();
+	const keyStack = [];
+	const replacer = (key, value) => {
+		if (key !== "") keyStack.push(key);
+		if (typeof value === "function" || typeof value === "symbol") return;
+		if (value && typeof value === "object") {
+			if (seen.has(value)) {
+				const path = keyStack.join(".") || "<root>";
+				throw new Error(`[Pyreon] Loader returned circular reference at "${path}". Loaders must return JSON-serializable data (no cycles, no functions, no Date/Map/Set without a custom replacer). Common cause: returning a Mongo/Prisma model with back-references intact.`);
+			}
+			seen.add(value);
+		}
+		return value;
+	};
+	return JSON.stringify(loaderData, replacer).replace(/<\//g, "<\\/");
+}
+/**
 * Hydrate loader data from a serialized object (e.g. `window.__PYREON_LOADER_DATA__`).
 * Populates the router's internal `_loaderData` map so the initial render uses
 * server-fetched data without re-running loaders on the client.
@@ -83,6 +135,18 @@ function hydrateLoaderData(router, serialized) {
 
 //#endregion
 //#region src/match.ts
+let _defaultChromeLayout = null;
+/**
+* Register the synthetic "default chrome" layout used when a page-level
+* `notFoundComponent` is the closest fallback (layout-less single-page-
+* app shape). Called once at module load from `./components.tsx`. Pyreon
+* apps shouldn't need to call this themselves.
+*
+* @internal
+*/
+function _setDefaultChromeLayout(component) {
+	_defaultChromeLayout = component;
+}
 /**
 * Parse a query string into key-value pairs. Duplicate keys are overwritten
 * (last value wins). Use `parseQueryMulti` to preserve duplicates as arrays.
@@ -275,7 +339,8 @@ function flattenOne(result, c, parentSegments, chain, meta) {
 		if (c.children && c.children.length > 0) flattenWalk(result, c.children, parentSegments, chain, meta);
 		return;
 	}
-	const joined = [...parentSegments, ...c.segments];
+	const childPath = c.route.path;
+	const joined = typeof childPath === "string" && childPath.startsWith("/") ? c.segments : [...parentSegments, ...c.segments];
 	if (c.children && c.children.length > 0) flattenWalk(result, c.children, joined, chain, meta);
 	result.push(makeFlatEntry(joined, chain, meta, false));
 }
@@ -446,6 +511,17 @@ function resolveRoute(rawPath, routes) {
 		meta: w.meta,
 		search: runValidateSearch(w.matchedChain, query)
 	};
+	const nfb = findNotFoundFallback(routes, cleanPath);
+	if (nfb) return {
+		path: cleanPath,
+		params: {},
+		query,
+		hash,
+		matched: nfb,
+		meta: mergeMeta(nfb),
+		search: {},
+		isNotFound: true
+	};
 	return {
 		path: cleanPath,
 		params: {},
@@ -456,6 +532,86 @@ function resolveRoute(rawPath, routes) {
 		search: {}
 	};
 }
+/** Synthetic leaf RouteRecord used by the 404 fallback. Carries no real
+* path matching — the resolver inserts it at the end of the chain when
+* a parent `notFoundComponent` is the closest fallback for the URL. */
+const SYNTHETIC_NOT_FOUND_PATH = "__pyreon_not_found_leaf__";
+/**
+* Walk the route tree finding records with `notFoundComponent`. Return
+* the chain `[...ancestors, parentWithNotFound, syntheticLeaf]` for the
+* DEEPEST record whose URL path is a prefix of `urlPath`.
+*
+* The path-prefix check: a record at `'/de'` applies to `/de/unknown`
+* and `/de` itself but NOT to `/about` or `/encyclopedia` (full-segment
+* boundary required, not substring). A record at `'/'` (root layout)
+* applies to every URL. Deeper matches win — `/de` layout takes
+* precedence over root layout for URLs under `/de/...`.
+*
+* Returns `null` when no record has `notFoundComponent`.
+*/
+function findNotFoundFallback(routes, urlPath) {
+	let best = null;
+	let pageBest = null;
+	function walk(records, parentChain, parentPath) {
+		for (const r of records) {
+			const rawPath = typeof r.path === "string" ? r.path : "";
+			const fullPath = rawPath.startsWith("/") ? rawPath : `${parentPath}/${rawPath}`.replace(/\/+/g, "/");
+			const chain = [...parentChain, r];
+			const isLayout = Array.isArray(r.children) && r.children.length > 0;
+			if (typeof r.notFoundComponent === "function") {
+				if (pathPrefixApplies(fullPath, urlPath)) {
+					const specificity = countSegments(fullPath);
+					if (isLayout) {
+						if (!best || chain.length > best.depth || chain.length === best.depth && specificity > best.specificity) best = {
+							chain,
+							record: r,
+							depth: chain.length,
+							specificity
+						};
+					} else if (!pageBest || chain.length > pageBest.depth || chain.length === pageBest.depth && specificity > pageBest.specificity) pageBest = {
+						record: r,
+						depth: chain.length,
+						specificity,
+						fullPath
+					};
+				}
+			}
+			if (Array.isArray(r.children)) walk(r.children, chain, fullPath);
+		}
+	}
+	walk(routes, [], "");
+	if (best) {
+		const found = best;
+		const syntheticLeaf = {
+			path: SYNTHETIC_NOT_FOUND_PATH,
+			component: found.record.notFoundComponent
+		};
+		return [...found.chain, syntheticLeaf];
+	}
+	if (pageBest && _defaultChromeLayout) {
+		const found = pageBest;
+		return [{
+			path: found.fullPath,
+			component: _defaultChromeLayout
+		}, {
+			path: SYNTHETIC_NOT_FOUND_PATH,
+			component: found.record.notFoundComponent
+		}];
+	}
+	return null;
+}
+/** Check whether `prefixPath` is a path-prefix of `urlPath` at segment boundaries. */
+function pathPrefixApplies(prefixPath, urlPath) {
+	if (prefixPath === "/" || prefixPath === "") return true;
+	if (urlPath === prefixPath) return true;
+	return urlPath.startsWith(`${prefixPath}/`);
+}
+/** Count `/`-separated path segments. `/` → 0; `/de` → 1; `/de/about` → 2. */
+function countSegments(path) {
+	let count = 0;
+	for (let i = 0; i < path.length; i++) if (path.charCodeAt(i) === 47 && i + 1 < path.length) count++;
+	return count;
+}
 /** Run validateSearch from the deepest matched route that has one. */
 function runValidateSearch(matched, query) {
 	for (let i = matched.length - 1; i >= 0; i--) {
@@ -513,6 +669,58 @@ function buildNameIndex(routes) {
 	return index;
 }
 
+//#endregion
+//#region src/redirect.ts
+const REDIRECT = Symbol.for("pyreon.redirect");
+/**
+* Throw inside a route loader to redirect the navigation server-side
+* (during SSR returns a 302/307 `Location:` response) and client-side
+* (during CSR triggers `router.replace()` before the layout renders).
+*
+* The auth-gate use case: replaces the fragile `onMount + router.push()`
+* workaround. `onMount` doesn't fire reliably under nested-layout dev SSR +
+* hydration — so the layout renders briefly before the push happens, leaking
+* authenticated UI to unauthenticated users. `redirect()` runs in the loader
+* BEFORE the layout's component is invoked, so the unauthenticated UI never
+* mounts in the first place.
+*
+* @example
+* ```ts
+* // src/routes/app/_layout.tsx
+* export const loader = async ({ request }) => {
+*   const session = await getSession(request)
+*   if (!session) redirect('/login')
+*   return { user: session.user }
+* }
+* ```
+*
+* @param url - Target URL (typically a path like `/login` or absolute URL for cross-origin).
+* @param status - HTTP redirect status. Default `307` (Temporary Redirect, method-preserving).
+*   Use `301`/`308` for permanent moves, `302`/`303` to force GET on the target.
+*/
+function redirect(url, status = 307) {
+	const err = /* @__PURE__ */ new Error(`Redirect to ${url}`);
+	err[REDIRECT] = {
+		url,
+		status
+	};
+	throw err;
+}
+/** Check if an error is a RedirectError thrown by `redirect()`. */
+function isRedirectError(err) {
+	return typeof err === "object" && err !== null && typeof err[REDIRECT] === "object";
+}
+/**
+* Extract the redirect URL and status from a thrown RedirectError. Returns
+* `null` if `err` isn't a RedirectError. Used by the router's loader-runner
+* (CSR) and the SSR handler to convert the thrown error into the right kind
+* of response (a `router.replace()` call or a `302`/`307` Response).
+*/
+function getRedirectInfo(err) {
+	if (!isRedirectError(err)) return null;
+	return err[REDIRECT] ?? null;
+}
+
 //#endregion
 //#region src/scroll.ts
 /**
@@ -611,7 +819,7 @@ function isLazy(c) {
 //#endregion
 //#region src/router.ts
 const _isBrowser = typeof window !== "undefined";
-const __DEV__ = import.meta.env?.DEV === true;
+const __DEV__ = process.env.NODE_ENV !== "production";
 const _countSink = globalThis;
 const RouterContext = createContext(null);
 let _activeRouter = null;
@@ -992,14 +1200,19 @@ function createRouter(options) {
 	function processLoaderResult(result, record, ac, to) {
 		if (result.status === "fulfilled") {
 			router._loaderData.set(record, result.value);
-			return true;
+			return { action: "continue" };
 		}
-		if (ac.signal.aborted) return true;
+		if (ac.signal.aborted) return { action: "continue" };
+		const info = getRedirectInfo(result.reason);
+		if (info) return {
+			action: "redirect",
+			target: info.url
+		};
 		if (router._onError) {
-			if (router._onError(result.reason, to) === false) return false;
+			if (router._onError(result.reason, to) === false) return { action: "cancel" };
 		}
 		router._loaderData.set(record, void 0);
-		return true;
+		return { action: "continue" };
 	}
 	function syncBrowserUrl(path, replace) {
 		if (!_isBrowser) return;
@@ -1034,6 +1247,26 @@ function createRouter(options) {
 		return Date.now() - entry.timestamp < gcTime;
 	}
 	/**
+	* Bounded set into `_loaderCache`: evicts the oldest entry (insertion-order
+	* FIFO) when the cap is exceeded. The `gcTime` TTL handles staleness, but
+	* without a size cap a long-running SPA navigating across many distinct
+	* loader keys (e.g. `/posts/:id` with hundreds of unique IDs) would
+	* accumulate cache entries indefinitely until manual `invalidateLoader()`
+	* — `_maxCacheSize` was wired through from `RouterOptions.maxCacheSize`
+	* (default 100) but the loader cache write paths never read it. Mirrors
+	* the same pattern used for `_componentCache` in `components.tsx`.
+	*/
+	function loaderCacheSet(key, data) {
+		router._loaderCache.set(key, {
+			data,
+			timestamp: Date.now()
+		});
+		if (router._loaderCache.size > router._maxCacheSize) {
+			const oldest = router._loaderCache.keys().next().value;
+			if (oldest !== void 0) router._loaderCache.delete(oldest);
+		}
+	}
+	/**
 	* Execute a loader with cache + dedup:
 	* 1. Cache hit + fresh → return cached data (skip loader entirely)
 	* 2. In-flight for same key → dedup (return existing promise)
@@ -1050,20 +1283,20 @@ function createRouter(options) {
 			}
 		}
 		const inflight = router._loaderInflight.get(key);
-		if (inflight) return inflight;
+		if (inflight && !inflight.signal.aborted) return inflight.promise;
 		if (__DEV__) _countSink.__pyreon_count__?.("router.loaderRun");
-		const promise = record.loader(loaderCtx).then((data) => {
-			router._loaderCache.set(key, {
-				data,
-				timestamp: Date.now()
-			});
-			router._loaderInflight.delete(key);
+		const promise = Promise.resolve().then(() => record.loader(loaderCtx)).then((data) => {
+			loaderCacheSet(key, data);
+			if (router._loaderInflight.get(key)?.promise === promise) router._loaderInflight.delete(key);
 			return data;
 		}).catch((err) => {
-			router._loaderInflight.delete(key);
+			if (router._loaderInflight.get(key)?.promise === promise) router._loaderInflight.delete(key);
 			throw err;
 		});
-		router._loaderInflight.set(key, promise);
+		router._loaderInflight.set(key, {
+			promise,
+			signal: loaderCtx.signal
+		});
 		return promise;
 	}
 	async function runBlockingLoaders(records, to, gen, ac) {
@@ -1073,14 +1306,15 @@ function createRouter(options) {
 			signal: ac.signal
 		};
 		const results = await Promise.allSettled(records.map((r) => executeLoader(r, loaderCtx)));
-		if (gen !== _navGen) return false;
+		if (gen !== _navGen) return { action: "cancel" };
 		for (let i = 0; i < records.length; i++) {
 			const result = results[i];
 			const record = records[i];
 			if (!result || !record) continue;
-			if (!processLoaderResult(result, record, ac, to)) return false;
+			const outcome = processLoaderResult(result, record, ac, to);
+			if (outcome.action !== "continue") return outcome;
 		}
-		return true;
+		return { action: "continue" };
 	}
 	/** Fire-and-forget background revalidation for stale-while-revalidate routes. */
 	function revalidateSwrLoaders(records, to, ac) {
@@ -1094,11 +1328,7 @@ function createRouter(options) {
 			r.loader(loaderCtx).then((data) => {
 				if (!ac.signal.aborted) {
 					router._loaderData.set(r, data);
-					const key = getCacheKey(r, loaderCtx);
-					router._loaderCache.set(key, {
-						data,
-						timestamp: Date.now()
-					});
+					loaderCacheSet(getCacheKey(r, loaderCtx), data);
 					loadingSignal.update((n) => n + 1);
 					loadingSignal.update((n) => n - 1);
 				}
@@ -1107,16 +1337,17 @@ function createRouter(options) {
 	}
 	async function runLoaders(to, gen, ac) {
 		const loadableRecords = to.matched.filter((r) => r.loader);
-		if (loadableRecords.length === 0) return true;
+		if (loadableRecords.length === 0) return { action: "continue" };
 		const blocking = [];
 		const swr = [];
 		for (const r of loadableRecords) if (r.staleWhileRevalidate && router._loaderData.has(r)) swr.push(r);
 		else blocking.push(r);
 		if (blocking.length > 0) {
-			if (!await runBlockingLoaders(blocking, to, gen, ac)) return false;
+			const outcome = await runBlockingLoaders(blocking, to, gen, ac);
+			if (outcome.action !== "continue") return outcome;
 		}
 		if (swr.length > 0) revalidateSwrLoaders(swr, to, ac);
-		return true;
+		return { action: "continue" };
 	}
 	async function commitNavigation(path, replace, to, from) {
 		scrollManager.save(from.path);
@@ -1211,8 +1442,10 @@ function createRouter(options) {
 		router._abortController?.abort();
 		const ac = new AbortController();
 		router._abortController = ac;
-		if (!await runLoaders(to, gen, ac)) {
+		const loaderOutcome = await runLoaders(to, gen, ac);
+		if (loaderOutcome.action !== "continue") {
 			loadingSignal.update((n) => n - 1);
+			if (loaderOutcome.action === "redirect") return navigate(sanitizePath(loaderOutcome.target), replace, redirectDepth + 1);
 			return;
 		}
 		await commitNavigation(path, replace, to, from);
@@ -1280,7 +1513,7 @@ function createRouter(options) {
 		isReady() {
 			return router._readyPromise;
 		},
-		async preload(path) {
+		async preload(path, request, options) {
 			const resolved = resolveRoute(path, routes);
 			await Promise.all(resolved.matched.map(async (record) => {
 				if (componentCache.has(record)) return;
@@ -1293,13 +1526,15 @@ function createRouter(options) {
 				const comp = typeof mod === "function" ? mod : mod.default;
 				componentCache.set(record, comp);
 			}));
+			if (options?.skipLoaders) return;
 			const ac = new AbortController();
 			await Promise.all(resolved.matched.filter((r) => r.loader).map(async (r) => {
-				const data = await r.loader?.({
+				const data = await Promise.resolve().then(() => r.loader({
 					params: resolved.params,
 					query: resolved.query,
-					signal: ac.signal
-				});
+					signal: ac.signal,
+					...request ? { request } : {}
+				}));
 				router._loaderData.set(r, data);
 			}));
 		},
@@ -1454,20 +1689,51 @@ const RouterView = (props) => {
 	onUnmount(() => {
 		router._viewDepth--;
 	});
-	const child = () => {
-		router._loadingSignal();
+	const depthEntry = computed(() => {
 		const route = router.currentRoute();
-		if (route.matched.length === 0) return null;
-		const record = route.matched[depth];
-		if (!record) return null;
-		const cached = router._componentCache.get(record);
-		if (cached) return renderWithLoader(router, record, cached, route);
-		const raw = record.component;
+		const rec = route.matched[depth] ?? null;
+		if (!rec) return {
+			rec: null,
+			comp: null,
+			errored: false,
+			route
+		};
+		router._loadingSignal();
+		if (router._erroredChunks.has(rec)) return {
+			rec,
+			comp: null,
+			errored: true,
+			route
+		};
+		const cached = router._componentCache.get(rec);
+		if (cached) return {
+			rec,
+			comp: cached,
+			errored: false,
+			route
+		};
+		const raw = rec.component;
 		if (!isLazy(raw)) {
-			cacheSet(router, record, raw);
-			return renderWithLoader(router, record, raw, route);
+			cacheSet(router, rec, raw);
+			return {
+				rec,
+				comp: raw,
+				errored: false,
+				route
+			};
 		}
-		return renderLazyRoute(router, record, raw);
+		return {
+			rec,
+			comp: null,
+			errored: false,
+			route
+		};
+	}, { equals: (a, b) => a.rec === b.rec && a.comp === b.comp && a.errored === b.errored && a.route === b.route });
+	const child = () => {
+		const { rec, comp, route } = depthEntry();
+		if (!rec) return null;
+		if (comp) return renderWithLoader(router, rec, comp, route);
+		return renderLazyRoute(router, rec, rec.component);
 	};
 	return h("div", { "data-pyreon-router-view": true }, child);
 };
@@ -1491,7 +1757,7 @@ const RouterLink = (props) => {
 		if (prefetchMode === "intent") triggerPrefetch();
 	};
 	const inst = router;
-	const href = inst?.mode === "history" ? `${inst._base}${props.to}` : `#${props.to}`;
+	const href = () => inst?.mode === "history" ? `${inst._base}${props.to}` : `#${props.to}`;
 	const isExactMatch = () => {
 		if (!router) return false;
 		const target = props.to;
@@ -1525,12 +1791,15 @@ const RouterLink = (props) => {
 		});
 		onUnmount(() => observer.disconnect());
 	}
-	const { to: _to, replace: _replace, activeClass: _ac, exactActiveClass: _eac, exact: _exact, prefetch: _prefetch, children, ...rest } = props;
+	const { to: _to, replace: _replace, activeClass: _ac, exactActiveClass: _eac, exact: _exact, prefetch: _prefetch, class: userClass, children, ...rest } = props;
+	const mergedClass = () => {
+		return cx([typeof userClass === "function" ? userClass() : userClass, activeClass()]);
+	};
 	return h("a", {
 		...rest,
 		ref,
 		href,
-		class: activeClass,
+		class: mergedClass,
 		"aria-current": ariaCurrent,
 		onClick: handleClick,
 		onMouseEnter: handleMouseEnter,
@@ -1712,6 +1981,12 @@ function isStaleChunk(err) {
 	if (err instanceof SyntaxError) return true;
 	return false;
 }
+nativeCompat(RouterProvider);
+nativeCompat(RouterView);
+nativeCompat(RouterLink);
+const DefaultChromeLayout = () => h("main", { "data-pyreon-default-chrome": "" }, h(RouterView, null));
+nativeCompat(DefaultChromeLayout);
+_setDefaultChromeLayout(DefaultChromeLayout);
 
 //#endregion
 //#region src/not-found.ts
@@ -1764,5 +2039,5 @@ const NotFoundBoundary = (props) => {
 };
 
 //#endregion
-export { NotFoundBoundary, RouterContext, RouterLink, RouterProvider, RouterView, buildPath, createRouter, findRouteByName, hydrateLoaderData, isNotFoundError, lazy, notFound, onBeforeRouteLeave, onBeforeRouteUpdate, parseQuery, parseQueryMulti, prefetchLoaderData, resolveRoute, serializeLoaderData, stringifyQuery, useBlocker, useIsActive, useLoaderData, useMiddlewareData, useRoute, useRouter, useSearchParams, useTransition, useTypedSearchParams, useValidatedSearch };
+export { NotFoundBoundary, RouterContext, RouterLink, RouterProvider, RouterView, buildPath, createRouter, findRouteByName, getRedirectInfo, hydrateLoaderData, isNotFoundError, isRedirectError, lazy, notFound, onBeforeRouteLeave, onBeforeRouteUpdate, parseQuery, parseQueryMulti, prefetchLoaderData, redirect, resolveRoute, serializeLoaderData, stringifyLoaderData, stringifyQuery, useBlocker, useIsActive, useLoaderData, useMiddlewareData, useRoute, useRouter, useSearchParams, useTransition, useTypedSearchParams, useValidatedSearch };
 //# sourceMappingURL=index.js.map