@pracht/core 0.4.0 → 0.6.0

package/README.md

@@ -28,8 +28,8 @@ Route modules may export the page as a function default export or as a named
 `handlePrachtRequest()` sanitizes unexpected 5xx errors by default so raw server
 messages do not leak into SSR HTML or route-state JSON. Explicit
 `PrachtHttpError` 4xx messages are preserved. Pass `debugErrors: true` to expose
-raw details intentionally during debugging; `@pracht/core` does not infer this
-from environment variables. Debug responses also attach `error.diagnostics`
+raw details intentionally during debugging; the flag is ignored when
+`NODE_ENV=production`. Debug responses also attach `error.diagnostics`
 metadata for the failure phase and matched framework files when available.
 
 ### Client

package/dist/index.d.mts

@@ -78,10 +78,11 @@ interface ApiConfig {
   middleware?: string[];
   /**
    * When `true` (the default), state-changing API requests
-   * (POST/PUT/PATCH/DELETE) are rejected unless the browser signals a
-   * same-origin/same-site fetch (Sec-Fetch-Site) or the request Origin
-   * matches the request URL's origin. Set to `false` to opt out if you
-   * build your own CSRF protection into middleware.
+   * (POST/PUT/PATCH/DELETE) are rejected unless the browser signals an
+   * exact same-origin fetch (`Sec-Fetch-Site: same-origin`) or the request
+   * Origin/Referer matches the request URL's origin. `same-site` is not
+   * accepted by default because sibling subdomains can be attacker-controlled.
+   * Set to `false` to opt out if you build your own CSRF protection into middleware.
    */
   requireSameOrigin?: boolean;
 }
@@ -123,7 +124,7 @@ interface ParamRouteSegment {
 }
 interface CatchAllRouteSegment {
   type: "catchall";
-  name: "*";
+  name: string;
 }
 type RouteSegment = StaticRouteSegment | ParamRouteSegment | CatchAllRouteSegment;
 interface ResolvedRoute extends Omit<RouteMeta, "middleware"> {
@@ -155,11 +156,16 @@ interface BaseRouteArgs<TContext = RegisteredContext> {
 }
 interface LoaderArgs<TContext = RegisteredContext> extends BaseRouteArgs<TContext> {}
 interface MiddlewareArgs<TContext = RegisteredContext> extends BaseRouteArgs<TContext> {}
+type HeadAttributes = Record<string, string | undefined>;
+interface HeadScriptDescriptor extends HeadAttributes {
+  children?: string;
+}
 interface HeadMetadata {
   title?: string;
   lang?: string;
-  meta?: Array<Record<string, string>>;
-  link?: Array<Record<string, string>>;
+  meta?: HeadAttributes[];
+  link?: HeadAttributes[];
+  script?: HeadScriptDescriptor[];
 }
 type MaybePromise<T> = T | Promise<T>;
 type LoaderLike = ((args: LoaderArgs<any>) => unknown) | undefined;
@@ -175,7 +181,10 @@ interface RouteComponentProps<TLoader extends LoaderLike = undefined> {
   params: RouteParams;
 }
 interface ErrorBoundaryProps {
-  error: Error;
+  error: Error & {
+    diagnostics?: unknown;
+    status?: number;
+  };
 }
 interface ShellProps {
   children: ComponentChildren;
@@ -194,6 +203,7 @@ interface RouteModule<TContext = any, TLoader extends LoaderLike = undefined> {
 interface ShellModule<TContext = any> {
   Shell: FunctionComponent<ShellProps>;
   Loading?: FunctionComponent;
+  ErrorBoundary?: FunctionComponent<ErrorBoundaryProps>;
   head?: (args: BaseRouteArgs<TContext>) => MaybePromise<HeadMetadata>;
   headers?: (args: BaseRouteArgs<TContext>) => MaybePromise<HeadersInit>;
 }
@@ -339,6 +349,7 @@ declare function PrachtRuntimeProvider<TData>({
 }>;
 declare function startApp<TData = unknown>(options?: StartAppOptions<TData>): TData | undefined;
 declare function readHydrationState<TData = unknown>(): PrachtHydrationState<TData> | undefined;
+declare function useRouteData<TLoader extends LoaderLike>(): LoaderData<TLoader>;
 declare function useRouteData<TData = unknown>(): TData;
 declare function useLocation(): Location;
 declare function useParams(): RouteParams;
@@ -395,6 +406,8 @@ interface PrerenderAppOptions {
   cssManifest?: Record<string, string[]>;
   /** Per-source-file JS map produced by the vite plugin for modulepreload hints. */
   jsManifest?: Record<string, string[]>;
+  /** Maximum number of pages rendered concurrently. Defaults to 10. */
+  concurrency?: number;
 }
 declare function prerenderApp(options: PrerenderAppOptions): Promise<PrerenderResult[]>;
 declare function prerenderApp(options: PrerenderAppOptions & {
@@ -423,4 +436,4 @@ interface InitClientRouterOptions {
 }
 declare function initClientRouter(options: InitClientRouterOptions): Promise<void>;
 //#endregion
-export { type ApiConfig, type ApiRouteArgs, type ApiRouteHandler, type ApiRouteMatch, type ApiRouteModule, type BaseRouteArgs, type DataModule, type ErrorBoundaryProps, Form, type FormProps, type GroupDefinition, type GroupMeta, type HandlePrachtRequestOptions, type HeadArgs, type HeadMetadata, type HeadersArgs, type HttpMethod, type ISGManifestEntry, type InitClientRouterOptions, type LoaderArgs, type LoaderData, type LoaderFn, type Location, type MiddlewareArgs, type MiddlewareFn, type MiddlewareModule, type MiddlewareResult, type ModuleImporter, type ModuleRef, type ModuleRegistry, type NavigateFn, type PrachtApp, type PrachtAppConfig, PrachtHttpError, type PrachtHydrationState, type PrachtRuntimeDiagnosticPhase, type PrachtRuntimeDiagnostics, PrachtRuntimeProvider, type PrefetchStrategy, type PrerenderAppOptions, type PrerenderAppResult, type PrerenderResult, type Register, type RenderMode, type ResolvedApiRoute, type ResolvedPrachtApp, type ResolvedRoute, type RouteComponentProps, type RouteConfig, type RouteDefinition, type RouteMatch, type RouteMeta, type RouteModule, type RouteParams, type RouteRevalidate, type RouteStateResult, type RouteTreeNode, type SerializedRouteError, type ShellModule, type ShellProps, type StartAppOptions, Suspense, type TimeRevalidatePolicy, applyDefaultSecurityHeaders, buildPathFromSegments, defineApp, forwardRef, group, handlePrachtRequest, initClientRouter, lazy, matchApiRoute, matchAppRoute, prerenderApp, readHydrationState, resolveApiRoutes, resolveApp, route, startApp, timeRevalidate, useIsHydrated, useLocation, useNavigate, useParams, useRevalidate, useRouteData };
+export { type ApiConfig, type ApiRouteArgs, type ApiRouteHandler, type ApiRouteMatch, type ApiRouteModule, type BaseRouteArgs, type DataModule, type ErrorBoundaryProps, Form, type FormProps, type GroupDefinition, type GroupMeta, type HandlePrachtRequestOptions, type HeadArgs, type HeadAttributes, type HeadMetadata, type HeadScriptDescriptor, type HeadersArgs, type HttpMethod, type ISGManifestEntry, type InitClientRouterOptions, type LoaderArgs, type LoaderData, type LoaderFn, type Location, type MiddlewareArgs, type MiddlewareFn, type MiddlewareModule, type MiddlewareResult, type ModuleImporter, type ModuleRef, type ModuleRegistry, type NavigateFn, type PrachtApp, type PrachtAppConfig, PrachtHttpError, type PrachtHydrationState, type PrachtRuntimeDiagnosticPhase, type PrachtRuntimeDiagnostics, PrachtRuntimeProvider, type PrefetchStrategy, type PrerenderAppOptions, type PrerenderAppResult, type PrerenderResult, type Register, type RenderMode, type ResolvedApiRoute, type ResolvedPrachtApp, type ResolvedRoute, type RouteComponentProps, type RouteConfig, type RouteDefinition, type RouteMatch, type RouteMeta, type RouteModule, type RouteParams, type RouteRevalidate, type RouteStateResult, type RouteTreeNode, type SerializedRouteError, type ShellModule, type ShellProps, type StartAppOptions, Suspense, type TimeRevalidatePolicy, applyDefaultSecurityHeaders, buildPathFromSegments, defineApp, forwardRef, group, handlePrachtRequest, initClientRouter, lazy, matchApiRoute, matchAppRoute, prerenderApp, readHydrationState, resolveApiRoutes, resolveApp, route, startApp, timeRevalidate, useIsHydrated, useLocation, useNavigate, useParams, useRevalidate, useRouteData };

package/dist/index.mjs

@@ -119,7 +119,11 @@ function matchRouteSegments(routeSegments, targetSegments) {
 	while (routeIndex < routeSegments.length) {
 		const currentSegment = routeSegments[routeIndex];
 		if (currentSegment.type === "catchall") {
-			params[currentSegment.name] = targetSegments.slice(targetIndex).join("/");
+			try {
+				params[currentSegment.name] = targetSegments.slice(targetIndex).map(decodeURIComponent).join("/");
+			} catch {
+				return null;
+			}
 			return params;
 		}
 		const targetSegment = targetSegments[targetIndex];
@@ -142,10 +146,15 @@ function parseRouteSegments(path) {
 			type: "catchall",
 			name: "*"
 		};
+		if (segment.startsWith(":") && segment.endsWith("*")) return {
+			type: "catchall",
+			name: segment.slice(1, -1) || "*"
+		};
 		if (segment.startsWith(":")) return {
 			type: "param",
 			name: segment.slice(1)
 		};
+		assertSafeStaticRouteSegment(segment);
 		return {
 			type: "static",
 			value: segment
@@ -155,6 +164,10 @@ function parseRouteSegments(path) {
 function splitPathSegments(path) {
 	return normalizeRoutePath(path).split("/").filter(Boolean);
 }
+function assertSafeStaticRouteSegment(segment) {
+	if (segment === "." || segment === "..") throw new Error(`Unsafe static route segment "${segment}" is not allowed.`);
+	if (segment.includes("\0") || /[\r\n\\]/.test(segment)) throw new Error(`Unsafe static route segment "${segment}" contains a forbidden character.`);
+}
 function mergeRoutePaths(prefix, path) {
 	if (!path) return normalizeRoutePath(prefix);
 	const normalizedPrefix = normalizeRoutePath(prefix);
@@ -171,19 +184,18 @@ function normalizeRoutePath(path) {
 function buildPathFromSegments(segments, params) {
 	return normalizeRoutePath("/" + segments.map((segment) => {
 		if (segment.type === "static") return segment.value;
-		if (segment.type === "param") return encodeURIComponent(params[segment.name] ?? "");
-		return (params["*"] ?? "").split("/").map((part) => encodeCatchAllSegment(part)).join("/");
+		if (segment.type === "param") return encodeDynamicPathSegment(params[segment.name] ?? "");
+		return (params[segment.name] ?? params["*"] ?? "").split("/").map((part) => encodeDynamicPathSegment(part)).join("/");
 	}).join("/"));
 }
 /**
-* Encode a single path segment for a catch-all route. `encodeURIComponent`
-* leaves unreserved characters (including `.`) intact, so `..` would
-* round-trip unchanged and still resolve as parent-dir in `path.join`.
-* Explicitly percent-encode `.` / `..` segments to neutralise them.
+* Encode one dynamic URL path segment for SSG/ISG output. `encodeURIComponent`
+* leaves unreserved characters (including `.`) intact, and even percent-encoded
+* dot segments are normalized by URL parsers. Reject exact `.` / `..` segments
+* instead of allowing them to reach filesystem output path construction.
 */
-function encodeCatchAllSegment(part) {
-	if (part === ".") return "%2E";
-	if (part === "..") return "%2E%2E";
+function encodeDynamicPathSegment(part) {
+	if (part === "." || part === "..") throw new Error(`Unsafe dynamic route param segment "${part}" is not allowed.`);
 	return encodeURIComponent(part);
 }
 /**
@@ -530,7 +542,8 @@ async function fetchPrachtRouteState(url, options) {
 			[ROUTE_STATE_REQUEST_HEADER]: "1",
 			"Cache-Control": "no-cache"
 		},
-		redirect: "manual"
+		redirect: "manual",
+		signal: options?.signal
 	});
 	if (response.type === "opaqueredirect" || response.status >= 300 && response.status < 400) return {
 		location: response.headers.get("location") ?? url,
@@ -572,6 +585,153 @@ async function navigateToClientLocation(location, options) {
 	window.location.href = targetUrl.toString();
 }
 //#endregion
+//#region src/prefetch.ts
+const CACHE_TTL_MS = 3e4;
+const MAX_PREFETCH_CACHE_ENTRIES = 100;
+const MAX_MATCH_CACHE_ENTRIES = 250;
+const prefetchCache = /* @__PURE__ */ new Map();
+function clearPrefetchCache() {
+	prefetchCache.clear();
+}
+function getCachedRouteState(url) {
+	const entry = prefetchCache.get(url);
+	if (!entry) return null;
+	if (Date.now() - entry.timestamp > CACHE_TTL_MS) {
+		prefetchCache.delete(url);
+		return null;
+	}
+	prefetchCache.delete(url);
+	prefetchCache.set(url, entry);
+	return entry.promise;
+}
+function prefetchRouteState(url) {
+	const cached = getCachedRouteState(url);
+	if (cached) return cached;
+	sweepPrefetchCache();
+	const promise = fetchPrachtRouteState(url);
+	prefetchCache.set(url, {
+		promise,
+		timestamp: Date.now()
+	});
+	trimMapToSize(prefetchCache, MAX_PREFETCH_CACHE_ENTRIES);
+	return promise;
+}
+function setupPrefetching(app, warmModules) {
+	let hoverTimer = null;
+	const observedViewportAnchors = /* @__PURE__ */ new WeakSet();
+	const matchCache = /* @__PURE__ */ new Map();
+	function getRoutePathname(url) {
+		try {
+			return new URL(url, window.location.origin).pathname;
+		} catch {
+			return null;
+		}
+	}
+	function getInternalHref(anchor) {
+		const href = anchor.getAttribute("href");
+		if (!href || href.startsWith("#")) return null;
+		let url;
+		try {
+			url = new URL(href, window.location.origin);
+		} catch {
+			return null;
+		}
+		if (url.origin !== window.location.origin) return null;
+		return url.pathname + url.search;
+	}
+	function getMatchEntry(href) {
+		const cached = matchCache.get(href);
+		if (cached) {
+			matchCache.delete(href);
+			matchCache.set(href, cached);
+			return cached;
+		}
+		const routePathname = getRoutePathname(href);
+		const match = routePathname ? matchAppRoute(app, routePathname) ?? null : null;
+		const entry = {
+			match,
+			strategy: match ? match.route.prefetch ?? "intent" : "none"
+		};
+		matchCache.set(href, entry);
+		trimMapToSize(matchCache, MAX_MATCH_CACHE_ENTRIES);
+		return entry;
+	}
+	function prefetchHref(href) {
+		prefetchRouteState(href);
+		if (!warmModules) return;
+		const match = getMatchEntry(href).match;
+		if (match) warmModules(match);
+	}
+	document.addEventListener("mouseenter", (e) => {
+		const anchor = e.target.closest?.("a");
+		if (!anchor) return;
+		const href = getInternalHref(anchor);
+		if (!href) return;
+		const strategy = getMatchEntry(href).strategy;
+		if (strategy !== "hover" && strategy !== "intent") return;
+		if (hoverTimer) clearTimeout(hoverTimer);
+		hoverTimer = setTimeout(() => {
+			prefetchHref(href);
+		}, 50);
+	}, true);
+	document.addEventListener("mouseleave", (e) => {
+		if (!e.target.closest?.("a")) return;
+		if (hoverTimer) {
+			clearTimeout(hoverTimer);
+			hoverTimer = null;
+		}
+	}, true);
+	document.addEventListener("focusin", (e) => {
+		const anchor = e.target.closest?.("a");
+		if (!anchor) return;
+		const href = getInternalHref(anchor);
+		if (!href) return;
+		const strategy = getMatchEntry(href).strategy;
+		if (strategy !== "hover" && strategy !== "intent") return;
+		prefetchHref(href);
+	}, true);
+	if (typeof IntersectionObserver === "undefined") return;
+	const observer = new IntersectionObserver((entries) => {
+		for (const entry of entries) {
+			if (!entry.isIntersecting) continue;
+			const anchor = entry.target;
+			const href = getInternalHref(anchor);
+			if (!href) continue;
+			prefetchHref(href);
+			observer.unobserve(anchor);
+		}
+	}, { rootMargin: "200px" });
+	function observeAnchor(anchor) {
+		if (observedViewportAnchors.has(anchor)) return;
+		const href = getInternalHref(anchor);
+		if (!href) return;
+		if (getMatchEntry(href).strategy !== "viewport") return;
+		observedViewportAnchors.add(anchor);
+		observer.observe(anchor);
+	}
+	function observeViewportLinks(root) {
+		if (root instanceof HTMLAnchorElement) observeAnchor(root);
+		for (const anchor of root.querySelectorAll("a[href]")) observeAnchor(anchor);
+	}
+	observeViewportLinks(document.body);
+	new MutationObserver((records) => {
+		for (const record of records) for (const node of record.addedNodes) if (node instanceof HTMLElement || node instanceof DocumentFragment) observeViewportLinks(node);
+	}).observe(document.body, {
+		childList: true,
+		subtree: true
+	});
+}
+function sweepPrefetchCache(now = Date.now()) {
+	for (const [url, entry] of prefetchCache) if (now - entry.timestamp > CACHE_TTL_MS) prefetchCache.delete(url);
+}
+function trimMapToSize(map, maxEntries) {
+	while (map.size > maxEntries) {
+		const first = map.keys().next();
+		if (first.done) return;
+		map.delete(first.value);
+	}
+}
+//#endregion
 //#region src/runtime-hooks.ts
 const RouteDataContext = createContext(void 0);
 function PrachtRuntimeProvider({ children, data, params = EMPTY_ROUTE_PARAMS, routeId, stateVersion = 0, url }) {
@@ -664,6 +824,7 @@ function Form(props) {
 			const formMethod = (method ?? form.method ?? "post").toUpperCase();
 			if (SAFE_METHODS.has(formMethod)) return;
 			event.preventDefault();
+			clearPrefetchCache();
 			const response = await fetch(props.action ?? form.action, {
 				method: formMethod,
 				body: new FormData(form),
@@ -693,13 +854,75 @@ function escapeHtml(str) {
 	return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
 function serializeJsonForHtml(value) {
-	return JSON.stringify(value).replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+	return escapeScriptText(JSON.stringify(value) ?? "null");
+}
+function escapeScriptText(value) {
+	return value.replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+}
+const SAFE_ATTRIBUTE_NAME_RE = /^[A-Za-z_:][A-Za-z0-9:._-]*$/;
+const GLOBAL_HEAD_ATTRIBUTE_PREFIXES = ["data-", "aria-"];
+const META_ATTRIBUTES = new Set([
+	"charset",
+	"content",
+	"http-equiv",
+	"itemprop",
+	"media",
+	"name",
+	"property"
+]);
+const LINK_ATTRIBUTES = new Set([
+	"as",
+	"blocking",
+	"color",
+	"crossorigin",
+	"disabled",
+	"fetchpriority",
+	"href",
+	"hreflang",
+	"imagesizes",
+	"imagesrcset",
+	"integrity",
+	"media",
+	"referrerpolicy",
+	"rel",
+	"sizes",
+	"title",
+	"type"
+]);
+const SCRIPT_ATTRIBUTES = new Set([
+	"async",
+	"blocking",
+	"class",
+	"crossorigin",
+	"defer",
+	"fetchpriority",
+	"id",
+	"integrity",
+	"nomodule",
+	"nonce",
+	"referrerpolicy",
+	"src",
+	"type"
+]);
+function renderAttributes(attributes, allowedAttributes) {
+	return Object.entries(attributes).filter(([key, value]) => isAllowedHeadAttribute(key, value, allowedAttributes)).map(([key, value]) => `${key}="${escapeHtml(value ?? "")}"`).join(" ");
+}
+function isAllowedHeadAttribute(key, value, allowedAttributes) {
+	if (key === "children" || typeof value === "undefined" || !SAFE_ATTRIBUTE_NAME_RE.test(key)) return false;
+	const normalized = key.toLowerCase();
+	if (normalized.startsWith("on")) return false;
+	return allowedAttributes.has(normalized) || GLOBAL_HEAD_ATTRIBUTE_PREFIXES.some((prefix) => normalized.startsWith(prefix));
 }
 function buildHtmlDocument(options) {
 	const { head, body, hydrationState, clientEntryUrl, cssUrls = [], modulePreloadUrls = [], routeStatePreloadUrl } = options;
 	const titleTag = head.title ? `<title>${escapeHtml(head.title)}</title>` : "";
-	const metaTags = (head.meta ?? []).map((m) => `<meta ${Object.entries(m).map(([k, v]) => `${k}="${escapeHtml(v)}"`).join(" ")}>`).join("\n    ");
-	const linkTags = (head.link ?? []).map((l) => `<link ${Object.entries(l).map(([k, v]) => `${k}="${escapeHtml(v)}"`).join(" ")}>`).join("\n    ");
+	const metaTags = (head.meta ?? []).map((m) => renderAttributes(m, META_ATTRIBUTES)).filter(Boolean).map((attrs) => `<meta ${attrs}>`).join("\n    ");
+	const linkTags = (head.link ?? []).map((l) => renderAttributes(l, LINK_ATTRIBUTES)).filter(Boolean).map((attrs) => `<link ${attrs}>`).join("\n    ");
+	const scriptTags = (head.script ?? []).map((script) => {
+		const attrs = renderAttributes(script, SCRIPT_ATTRIBUTES);
+		const children = script.children ? escapeScriptText(script.children) : "";
+		return attrs ? `<script ${attrs}>${children}<\/script>` : `<script>${children}<\/script>`;
+	}).join("\n    ");
 	const cssTags = cssUrls.map((url) => `<link rel="stylesheet" href="${escapeHtml(url)}">`).join("\n    ");
 	const modulePreloadTags = modulePreloadUrls.map((url) => `<link rel="modulepreload" href="${escapeHtml(url)}">`).join("\n    ");
 	const routeStatePreloadTag = routeStatePreloadUrl ? `<link rel="preload" as="fetch" href="${escapeHtml(routeStatePreloadUrl)}" crossorigin="anonymous">` : "";
@@ -712,6 +935,7 @@ function buildHtmlDocument(options) {
     ${titleTag}
     ${metaTags}
     ${linkTags}
+    ${scriptTags}
     ${cssTags}
     ${modulePreloadTags}
     ${routeStatePreloadTag}
@@ -870,7 +1094,8 @@ async function mergeHeadMetadata(shellModule, routeModule, routeArgs, data) {
 		title: routeHead.title ?? shellHead.title,
 		lang: routeHead.lang ?? shellHead.lang,
 		meta: [...shellHead.meta ?? [], ...routeHead.meta ?? []],
-		link: [...shellHead.link ?? [], ...routeHead.link ?? []]
+		link: [...shellHead.link ?? [], ...routeHead.link ?? []],
+		script: [...shellHead.script ?? [], ...routeHead.script ?? []]
 	};
 }
 async function mergeDocumentHeaders(shellModule, routeModule, routeArgs, data) {
@@ -949,25 +1174,26 @@ async function renderRouteErrorResponse(options) {
 			status: routeError.status
 		})
 	} : routeError;
-	if (!options.routeModule?.ErrorBoundary) {
-		if (options.isRouteStateRequest) return jsonErrorResponse(routeErrorWithDiagnostics, { isRouteStateRequest: true });
-		const message = routeErrorWithDiagnostics.status >= 500 ? "Internal Server Error" : routeErrorWithDiagnostics.message;
-		return withDefaultSecurityHeaders(new Response(message, {
+	if (options.isRouteStateRequest) return jsonErrorResponse(routeErrorWithDiagnostics, { isRouteStateRequest: true });
+	const shellModule = options.shellModule ?? (options.shellFile ? await resolveRegistryModule(options.options.registry?.shellModules, options.shellFile) : void 0);
+	const ErrorBoundary = options.routeModule?.ErrorBoundary ?? shellModule?.ErrorBoundary;
+	if (!ErrorBoundary) {
+		const message = routeErrorWithDiagnostics.status >= 500 && !exposeDetails ? "Internal Server Error" : routeErrorWithDiagnostics.message;
+		const diagnostics = exposeDetails && routeErrorWithDiagnostics.diagnostics ? `\n\n${JSON.stringify(routeErrorWithDiagnostics.diagnostics, null, 2)}` : "";
+		return withDefaultSecurityHeaders(new Response(`${message}${diagnostics}`, {
 			status: routeErrorWithDiagnostics.status,
 			headers: { "content-type": "text/plain; charset=utf-8" }
 		}));
 	}
-	if (options.isRouteStateRequest) return jsonErrorResponse(routeErrorWithDiagnostics, { isRouteStateRequest: true });
-	const shellModule = options.shellModule ?? (options.shellFile ? await resolveRegistryModule(options.options.registry?.shellModules, options.shellFile) : void 0);
 	const head = shellModule?.head ? await shellModule.head(options.routeArgs) : {};
 	const documentHeaders = await mergeDocumentHeaders(shellModule, void 0, options.routeArgs, void 0);
 	const cssUrls = resolvePageCssUrls(options.options.cssManifest, options.shellFile, options.routeArgs.route.file);
 	const modulePreloadUrls = resolvePageJsUrls(options.options.jsManifest, options.shellFile, options.routeArgs.route.file);
 	const renderToString = await getRenderToStringAsync();
-	const ErrorBoundary = options.routeModule.ErrorBoundary;
+	const Boundary = ErrorBoundary;
 	const Shell = shellModule?.Shell;
 	const errorValue = deserializeRouteError(routeErrorWithDiagnostics);
-	const componentTree = Shell ? h(Shell, null, h(ErrorBoundary, { error: errorValue })) : h(ErrorBoundary, { error: errorValue });
+	const componentTree = Shell ? h(Shell, null, h(Boundary, { error: errorValue })) : h(Boundary, { error: errorValue });
 	return htmlResponse(buildHtmlDocument({
 		head,
 		body: await renderToString(h(PrachtRuntimeProvider, {
@@ -1034,25 +1260,25 @@ function markdownResponse(source) {
 }
 //#endregion
 //#region src/runtime.ts
-const FIRST_PARTY_FETCH_SITES = new Set(["same-origin", "same-site"]);
+const SAME_ORIGIN_FETCH_SITE = "same-origin";
 /**
 * Stricter variant of first-party detection used for CSRF protection on
-* state-changing API requests. Unlike `isFirstPartyFetch`, this *only*
-* accepts explicit positive evidence that the request came from this
-* origin — a cross-origin form POST will send `Origin` from the
-* attacker, and a missing `Origin` on POST is unusual enough to block.
-* Non-browser callers (curl, server-to-server) should set the header
-* explicitly or pre-flight via middleware.
+* state-changing API requests. It rejects any browser signal that points
+* outside this exact origin — a cross-origin form POST will send `Origin`
+* from the attacker, and `Sec-Fetch-Site: same-site` is not enough because
+* sibling subdomains can be attacker-controlled. Requests with no browser
+* provenance headers are treated as non-browser callers.
 */
 function isSameOriginMutation(request, url) {
 	const site = request.headers.get("sec-fetch-site");
-	if (site) return FIRST_PARTY_FETCH_SITES.has(site);
+	if (site && site !== SAME_ORIGIN_FETCH_SITE) return false;
 	const origin = request.headers.get("origin");
 	if (origin) try {
 		return new URL(origin).origin === url.origin;
 	} catch {
 		return false;
 	}
+	if (site === SAME_ORIGIN_FETCH_SITE) return true;
 	const referer = request.headers.get("referer");
 	if (referer) try {
 		return new URL(referer).origin === url.origin;
@@ -1067,27 +1293,31 @@ function isSameOriginMutation(request, url) {
 * otherwise reachable via any cross-origin `<a href>` / redirect.
 *
 * Accepts a request as first-party when:
-*   - Sec-Fetch-Site is `same-origin` or `same-site` (modern browsers),
+*   - Sec-Fetch-Site is `same-origin` (modern browsers),
 *   - OR Sec-Fetch-Site is absent AND the Origin header matches the
 *     request URL's origin (older clients that still send Origin),
-*   - OR no Origin/Sec-Fetch-Site is present AND there is no Referer
-*     (non-browser clients like curl — CSRF is not the threat model
-*     there; blocking would break tests and CLIs).
-*
-* Cross-origin browser navigations set Sec-Fetch-Site to `cross-site`
-* or `none` (for user-typed URLs Sec-Fetch-Site: none, Referer absent,
-* Origin absent — handled by the "no headers → allow" branch since that
-* matches a first-party typed URL too).
+*   - OR Sec-Fetch-Site/Origin are absent AND Referer matches the request
+*     URL's origin,
+*   - OR no Origin/Sec-Fetch-Site/Referer is present (non-browser clients like
+*     curl — CSRF is not the threat model there; blocking would break
+*     tests and CLIs).
 */
 function isFirstPartyFetch(request) {
 	const site = request.headers.get("sec-fetch-site");
-	if (site) return FIRST_PARTY_FETCH_SITES.has(site);
+	if (site && site !== SAME_ORIGIN_FETCH_SITE) return false;
 	const origin = request.headers.get("origin");
 	if (origin) try {
 		return new URL(origin).origin === new URL(request.url).origin;
 	} catch {
 		return false;
 	}
+	if (site === SAME_ORIGIN_FETCH_SITE) return true;
+	const referer = request.headers.get("referer");
+	if (referer) try {
+		return new URL(referer).origin === new URL(request.url).origin;
+	} catch {
+		return false;
+	}
 	return true;
 }
 async function handlePrachtRequest(options) {
@@ -1318,9 +1548,10 @@ async function prerenderApp(options) {
 			revalidate: route.revalidate
 		});
 	}
-	const CONCURRENCY = 10;
-	for (let i = 0; i < work.length; i += CONCURRENCY) {
-		const batch = work.slice(i, i + CONCURRENCY);
+	const concurrency = options.concurrency ?? 10;
+	if (!Number.isInteger(concurrency) || concurrency <= 0) throw new Error("prerenderApp({ concurrency }) expects a positive integer.");
+	for (let i = 0; i < work.length; i += concurrency) {
+		const batch = work.slice(i, i + concurrency);
 		const batchResults = await Promise.all(batch.map(async (item) => {
 			const url = new URL(item.pathname, "http://localhost");
 			const request = new Request(url, { method: "GET" });
@@ -1369,127 +1600,70 @@ async function collectSSGPaths(route, registry) {
 	return (await routeModule.getStaticPaths()).map((params) => buildPathFromSegments(route.segments, params));
 }
 //#endregion
-//#region src/prefetch.ts
-const CACHE_TTL_MS = 3e4;
-const prefetchCache = /* @__PURE__ */ new Map();
-function getCachedRouteState(url) {
-	const entry = prefetchCache.get(url);
-	if (!entry) return null;
-	if (Date.now() - entry.timestamp > CACHE_TTL_MS) {
-		prefetchCache.delete(url);
-		return null;
-	}
-	return entry.promise;
-}
-function prefetchRouteState(url) {
-	const cached = getCachedRouteState(url);
-	if (cached) return cached;
-	const promise = fetchPrachtRouteState(url);
-	prefetchCache.set(url, {
-		promise,
-		timestamp: Date.now()
-	});
-	return promise;
+//#region src/hydration-mismatch.ts
+const HYDRATION_BANNER_ID = "__pracht_hydration_mismatch__";
+let installed = false;
+function installHydrationMismatchWarning() {
+	if (installed) return;
+	installed = true;
+	const prev = options.__m;
+	options.__m = function(vnode) {
+		appendHydrationWarning(vnode);
+		if (prev) prev(vnode);
+	};
 }
-function setupPrefetching(app, warmModules) {
-	let hoverTimer = null;
-	function getRoutePathname(url) {
-		try {
-			return new URL(url, window.location.origin).pathname;
-		} catch {
-			return null;
-		}
-	}
-	function getInternalHref(anchor) {
-		const href = anchor.getAttribute("href");
-		if (!href || href.startsWith("#")) return null;
-		let url;
-		try {
-			url = new URL(href, window.location.origin);
-		} catch {
-			return null;
+function appendHydrationWarning(vnode) {
+	if (typeof document === "undefined") return;
+	const componentName = getVNodeName(vnode);
+	let banner = document.getElementById(HYDRATION_BANNER_ID);
+	const message = `Hydration mismatch detected on <${componentName}>. The server-rendered HTML did not match the client.`;
+	if (banner) {
+		const list = banner.querySelector(`[data-pracht-mismatch-list]`);
+		if (list) {
+			const item = document.createElement("li");
+			item.textContent = message;
+			list.appendChild(item);
 		}
-		if (url.origin !== window.location.origin) return null;
-		return url.pathname + url.search;
-	}
-	function getPrefetchStrategy(pathname) {
-		const routePathname = getRoutePathname(pathname);
-		if (!routePathname) return "none";
-		const match = matchAppRoute(app, routePathname);
-		if (!match) return "none";
-		if (match.route.prefetch) return match.route.prefetch;
-		return "intent";
+		return;
 	}
-	document.addEventListener("mouseenter", (e) => {
-		const anchor = e.target.closest?.("a");
-		if (!anchor) return;
-		const href = getInternalHref(anchor);
-		if (!href) return;
-		const strategy = getPrefetchStrategy(href);
-		if (strategy !== "hover" && strategy !== "intent") return;
-		if (hoverTimer) clearTimeout(hoverTimer);
-		hoverTimer = setTimeout(() => {
-			prefetchRouteState(href);
-			if (warmModules) {
-				const pathname = getRoutePathname(href);
-				const m = pathname ? matchAppRoute(app, pathname) : void 0;
-				if (m) warmModules(m);
-			}
-		}, 50);
-	}, true);
-	document.addEventListener("mouseleave", (e) => {
-		if (!e.target.closest?.("a")) return;
-		if (hoverTimer) {
-			clearTimeout(hoverTimer);
-			hoverTimer = null;
-		}
-	}, true);
-	document.addEventListener("focusin", (e) => {
-		const anchor = e.target.closest?.("a");
-		if (!anchor) return;
-		const href = getInternalHref(anchor);
-		if (!href) return;
-		const strategy = getPrefetchStrategy(href);
-		if (strategy !== "hover" && strategy !== "intent") return;
-		prefetchRouteState(href);
-		if (warmModules) {
-			const pathname = getRoutePathname(href);
-			const m = pathname ? matchAppRoute(app, pathname) : void 0;
-			if (m) warmModules(m);
-		}
-	}, true);
-	if (typeof IntersectionObserver === "undefined") return;
-	const observer = new IntersectionObserver((entries) => {
-		for (const entry of entries) {
-			if (!entry.isIntersecting) continue;
-			const anchor = entry.target;
-			const href = getInternalHref(anchor);
-			if (!href) continue;
-			prefetchRouteState(href);
-			if (warmModules) {
-				const pathname = getRoutePathname(href);
-				const m = pathname ? matchAppRoute(app, pathname) : void 0;
-				if (m) warmModules(m);
-			}
-			observer.unobserve(anchor);
-		}
-	}, { rootMargin: "200px" });
-	function observeViewportLinks() {
-		const anchors = document.querySelectorAll("a[href]");
-		for (const anchor of anchors) {
-			const href = getInternalHref(anchor);
-			if (!href) continue;
-			if (getPrefetchStrategy(href) !== "viewport") continue;
-			observer.observe(anchor);
-		}
+	banner = document.createElement("div");
+	banner.id = HYDRATION_BANNER_ID;
+	banner.setAttribute("role", "alert");
+	banner.style.cssText = [
+		"position:fixed",
+		"top:0",
+		"left:0",
+		"right:0",
+		"z-index:2147483647",
+		"background:#1a1a2e",
+		"color:#ff6b6b",
+		"padding:12px 16px",
+		"font:12px/1.5 ui-monospace,Menlo,Consolas,monospace",
+		"border-bottom:2px solid #e74c3c",
+		"box-shadow:0 2px 8px rgba(0,0,0,0.3)"
+	].join(";");
+	const title = document.createElement("strong");
+	title.textContent = "pracht: hydration mismatch";
+	title.style.cssText = "display:block;margin-bottom:4px;color:#fff";
+	banner.appendChild(title);
+	const list = document.createElement("ul");
+	list.setAttribute("data-pracht-mismatch-list", "");
+	list.style.cssText = "margin:0;padding-left:18px";
+	const item = document.createElement("li");
+	item.textContent = message;
+	list.appendChild(item);
+	banner.appendChild(list);
+	document.body.appendChild(banner);
+}
+function getVNodeName(vnode) {
+	if (!vnode) return "Unknown";
+	const type = vnode.type;
+	if (typeof type === "string") return type;
+	if (typeof type === "function") {
+		const fn = type;
+		return fn.displayName || fn.name || "Component";
 	}
-	observeViewportLinks();
-	new MutationObserver(() => {
-		observeViewportLinks();
-	}).observe(document.body, {
-		childList: true,
-		subtree: true
-	});
+	return "Unknown";
 }
 //#endregion
 //#region src/router.ts
@@ -1499,6 +1673,7 @@ function useNavigate() {
 }
 async function initClientRouter(options) {
 	const { app, routeModules, shellModules, root, findModuleKey } = options;
+	if (import.meta.env?.DEV) installHydrationMismatchWarning();
 	const moduleCache = /* @__PURE__ */ new Map();
 	function loadModule(modules, key) {
 		let cached = moduleCache.get(key);
@@ -1521,6 +1696,8 @@ async function initClientRouter(options) {
 	}
 	let updateRouteState = null;
 	let routeStateVersion = 0;
+	let latestNavigationId = 0;
+	let activeNavigationAbort = null;
 	function RouterRoot({ initialState }) {
 		const [routeState, setRouteState] = useState(initialState);
 		updateRouteState = setRouteState;
@@ -1549,7 +1726,8 @@ async function initClientRouter(options) {
 		const resolvedShell = await (shellModPromise ?? startShellImport(match));
 		if (resolvedShell) Shell = resolvedShell.Shell;
 		const DefaultComponent = typeof routeMod.default === "function" ? routeMod.default : void 0;
-		const Component = state.error ? routeMod.ErrorBoundary : routeMod.Component ?? DefaultComponent;
+		const ErrorBoundary = routeMod.ErrorBoundary ?? resolvedShell?.ErrorBoundary;
+		const Component = state.error ? ErrorBoundary : routeMod.Component ?? DefaultComponent;
 		if (!Component) return null;
 		const componentProps = state.error ? { error: deserializeRouteError(state.error) } : {
 			data: state.data,
@@ -1607,6 +1785,10 @@ async function initClientRouter(options) {
 		};
 	}
 	async function navigate(to, opts) {
+		const navigationId = ++latestNavigationId;
+		activeNavigationAbort?.abort();
+		const abortController = new AbortController();
+		activeNavigationAbort = abortController;
 		const target = resolveBrowserRouteTarget(to);
 		if (!target) {
 			window.location.href = to;
@@ -1617,7 +1799,7 @@ async function initClientRouter(options) {
 			window.location.href = target.browserUrl;
 			return;
 		}
-		const statePromise = getCachedRouteState(target.requestUrl) ?? fetchPrachtRouteState(target.requestUrl);
+		const statePromise = getCachedRouteState(target.requestUrl) ?? fetchPrachtRouteState(target.requestUrl, { signal: abortController.signal });
 		const routeModPromise = startRouteImport(match);
 		const shellModPromise = startShellImport(match);
 		let state = {
@@ -1626,6 +1808,7 @@ async function initClientRouter(options) {
 		};
 		try {
 			const result = await statePromise;
+			if (navigationId !== latestNavigationId) return;
 			if (result.type === "redirect") {
 				if (result.location) {
 					const redirect = resolveRedirectTarget(result.location);
@@ -1661,12 +1844,15 @@ async function initClientRouter(options) {
 				error: null
 			};
 		} catch {
+			if (abortController.signal.aborted || navigationId !== latestNavigationId) return;
 			window.location.href = target.browserUrl;
 			return;
 		}
+		if (navigationId !== latestNavigationId) return;
 		if (!opts?._popstate) if (opts?.replace) history.replaceState(null, "", target.browserUrl);
 		else history.pushState(null, "", target.browserUrl);
 		const routeState = await resolveRouteState(match, state, target.requestUrl, routeModPromise, shellModPromise);
+		if (navigationId !== latestNavigationId) return;
 		if (routeState) {
 			applyRouteState(routeState);
 			window.scrollTo(0, 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pracht/core",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "license": "MIT",
   "homepage": "https://github.com/JoviDeCroock/pracht/tree/main/packages/framework",
   "bugs": {