bosia 0.9.4 → 0.9.6

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bosia",
-	"version": "0.9.4",
+	"version": "0.9.6",
 	"type": "module",
 	"description": "A fast, batteries-included fullstack framework — SSR · Svelte 5 Runes · Bun · ElysiaJS. File-based routing No Node.js, no Vite, no adapters.",
 	"keywords": [

package/src/core/build.ts

@@ -7,6 +7,7 @@ import { generateRoutesFile } from "./routeFile.ts";
 import { generateRouteTypes, ensureRootDirs } from "./routeTypes.ts";
 import { makeBosiaPlugin } from "./plugin.ts";
 import { makeBosiaSvelteCompiler, svelteMapCache } from "./svelteCompiler.ts";
+import { finalizeComponentCss } from "./componentCss.ts";
 import { prerenderStaticRoutes, generateStaticSite } from "./prerender.ts";
 import { loadEnv, classifyEnvVars } from "./env.ts";
 import { generateEnvModules } from "./envCodegen.ts";
@@ -258,6 +259,17 @@ for (const output of clientResult.outputs) {
 	}
 }
 
+// Scoped component `<style>` blocks, harvested during the client compile and
+// written as one stylesheet the head can link. Before this they rode inside the
+// JS bundle, so every SSR'd page painted unstyled until hydration. Must land
+// before the manifest write below: prerenderStaticRoutes() boots the built
+// server, which reads manifest.json once at startup.
+const componentCssFile = finalizeComponentCss(`${OUT_DIR}/client`);
+if (componentCssFile) {
+	cssFiles.push(componentCssFile);
+	console.log(`✅ Component CSS built: ${OUT_DIR}/client/${componentCssFile}`);
+}
+
 // Entry is always "index.js" due to naming: { entry: "index.[ext]" }
 const serverEntry =
 	serverResult.outputs

package/src/core/client/App.svelte

@@ -3,7 +3,13 @@
 	import { router, scrollToHash } from "./router.svelte.ts";
 	import { findMatch } from "../matcher.ts";
 	import { clientRoutes } from "bosia:routes";
-	import { consumePrefetch, prefetchCache, dataUrl, buildParentSnapshots } from "./prefetch.ts";
+	import {
+		consumePrefetch,
+		prefetchCache,
+		dataUrl,
+		buildParentSnapshots,
+		readDataResponse,
+	} from "./prefetch.ts";
 	import { appState, clearDirty } from "./appState.svelte.ts";
 	import { captureSnapshot, liveContext, shouldRerun, type CacheEntry } from "./loaderCache.ts";
 	import { pickErrorPage } from "../errorMatch.ts";
@@ -226,7 +232,9 @@
 			? Promise.resolve(cached)
 			: match.route.hasServerData
 				? fetch(dataUrl(path, maskBits), dataInit)
-						.then((r) => r.json())
+						.then(readDataResponse)
+						// Only a failed request reaches here now — offline, DNS, aborted.
+						// A response that arrived is read for what it says, not discarded.
 						.catch(() => null)
 				: Promise.resolve(null);
 

package/src/core/client/prefetch.ts

@@ -86,6 +86,52 @@ export function dataUrl(path: string, invalidatedBits?: string): string {
 	return `${base}/__bosia/data${p || "/index"}.json${qs}`;
 }
 
+/** True when the body is JSON we can parse — not a redirect target's HTML. */
+function isJsonResponse(res: Response): boolean {
+	return (res.headers.get("content-type") ?? "").includes("application/json");
+}
+
+/**
+ * Read a `/__bosia/data/…` response into the payload the router consumes.
+ *
+ * Anything that is not JSON used to collapse to `null`, and `null` means "the
+ * loader crashed" one branch later — so a hook redirecting an unauthenticated
+ * visitor to /login rendered a 500 that no server ever sent. The response says
+ * exactly what happened; this reads it instead of discarding it.
+ */
+export async function readDataResponse(res: Response): Promise<any> {
+	// `fetch` follows redirects, so a hook's 303 arrives as the login page's HTML
+	// at status 200. `redirected` is the only surviving trace of the redirect.
+	if (res.redirected) {
+		const target = new URL(res.url, window.location.origin);
+		return {
+			redirect:
+				target.origin === window.location.origin
+					? target.pathname + target.search + target.hash
+					: target.href,
+		};
+	}
+	if (isJsonResponse(res)) {
+		try {
+			return await res.json();
+		} catch {
+			// Claimed JSON, wasn't — a truncated or proxy-mangled body.
+			return { error: { status: errorStatus(res), message: errorMessage(res) } };
+		}
+	}
+	// A non-JSON body the router can't use: a hook answering with text/plain 404,
+	// an HTML error page from a proxy. Report the status the server actually sent.
+	return { error: { status: errorStatus(res), message: errorMessage(res) } };
+}
+
+function errorStatus(res: Response): number {
+	return res.status >= 400 ? res.status : 500;
+}
+
+function errorMessage(res: Response): string {
+	return res.statusText || "Internal Server Error";
+}
+
 export const prefetchCache = new Map<string, { data: any; ts: number }>();
 const MAX_PREFETCH_ENTRIES = 50;
 
@@ -132,7 +178,9 @@ export async function prefetchPath(path: string): Promise<void> {
 					}
 				: {};
 		const res = await fetch(dataUrl(path, maskBits), init);
-		if (res.ok) {
+		// `ok` alone would cache a guard's login page (200 after the redirect was
+		// followed) as if it were this route's data.
+		if (res.ok && !res.redirected && isJsonResponse(res)) {
 			if (prefetchCache.size >= MAX_PREFETCH_ENTRIES) {
 				const oldest = prefetchCache.keys().next().value;
 				if (oldest !== undefined) prefetchCache.delete(oldest);

package/src/core/componentCss.ts

@@ -0,0 +1,54 @@
+import { writeFileSync } from "fs";
+import { join } from "path";
+import { rebaseCssUrls } from "./basePath.ts";
+import { currentBase } from "./appBase.ts";
+
+/**
+ * Scoped `<style>` blocks harvested from every `.svelte` file the client build
+ * touches, keyed by absolute source path so a recompile of the same file
+ * replaces its rules rather than appending a second copy.
+ *
+ * Why a hand-rolled collector rather than letting Bun emit the CSS: with
+ * `splitting: true` a `css: "external"` compile makes Bun write one CSS sidecar
+ * per dynamic-imported chunk, which is the "Multiple files share the same
+ * output path" failure that 0.4.4 fought (see `test/svelte-build.test.ts`).
+ * Collecting here keeps the client build's CSS-output count at zero — the
+ * invariant that test pins — while still producing a real stylesheet.
+ */
+const collected = new Map<string, string>();
+
+export function collectComponentCss(filePath: string, css: string): void {
+	collected.set(filePath, css);
+}
+
+/**
+ * Concatenate everything collected into one content-hashed stylesheet in
+ * `clientDir`, and return its basename — or `null` when the app has no scoped
+ * styles at all, in which case nothing is written and nothing is linked.
+ *
+ * Mirrors `finalizeTailwindCss` (twHash.ts) deliberately: same rebase-then-hash
+ * order, same hash length, same `-<hash>.css` shape that staticManifest's
+ * HASHED_BASENAME rule reads as immutable.
+ */
+export function finalizeComponentCss(clientDir: string): string | null {
+	if (collected.size === 0) return null;
+
+	// Sorted by path: the bundler visits modules in whatever order resolution
+	// happens to take, and an unstable order means an unstable hash means every
+	// build busts a cache that did not need busting.
+	const css = [...collected.keys()]
+		.sort()
+		.map((k) => collected.get(k)!)
+		.join("\n");
+
+	// Rebase before hashing, so the hash describes the bytes actually served —
+	// same reasoning as twHash: a `url(/img/x.png)` inside a component's
+	// `<style>` resolves against the origin and would land outside the mount.
+	const base = currentBase();
+	const bytes = base ? rebaseCssUrls(base, css) : css;
+
+	const hash = new Bun.CryptoHasher("sha256").update(bytes).digest("hex").slice(0, 10);
+	const name = `bosia-css-${hash}.css`;
+	writeFileSync(join(clientDir, name), bytes);
+	return name;
+}

package/src/core/errors.ts

@@ -4,6 +4,17 @@
 import { withBase } from "./basePath.ts";
 import { currentBase } from "./appBase.ts";
 
+// Identity across bundle boundaries. `dist/hooks.server.js` keeps "bosia"
+// external (build.ts BOSIA_RUNTIME_EXTERNALS), so a hook's `redirect()` builds
+// its Redirect from the app's node_modules while the server bundle carries its
+// own copy of this file. Two class objects, one `instanceof` — always false, so
+// a hook throwing redirect() or error() fell through to a 500 no matter how many
+// catch branches were added. `Symbol.for` lives in a process-wide registry, so
+// the brand is the same value in both copies. Use isRedirect()/isHttpError()
+// rather than `instanceof` for anything that can cross that boundary.
+export const REDIRECT_BRAND = Symbol.for("bosia.Redirect");
+export const HTTP_ERROR_BRAND = Symbol.for("bosia.HttpError");
+
 export class HttpError extends Error {
 	constructor(
 		public status: number,
@@ -14,6 +25,14 @@ export class HttpError extends Error {
 	}
 }
 
+export function isHttpError(err: unknown): err is HttpError {
+	return typeof err === "object" && err !== null && (err as any)[HTTP_ERROR_BRAND] === true;
+}
+
+export function isRedirect(err: unknown): err is Redirect {
+	return typeof err === "object" && err !== null && (err as any)[REDIRECT_BRAND] === true;
+}
+
 export interface RedirectOptions {
 	/** Set to `true` to allow redirects to external origins (e.g. OAuth providers). */
 	allowExternal?: boolean;
@@ -35,6 +54,11 @@ export class Redirect {
 	}
 }
 
+// Stamped on the prototypes rather than declared as class fields: a plain
+// assignment needs no `unique symbol` gymnastics and covers subclasses too.
+(HttpError.prototype as any)[HTTP_ERROR_BRAND] = true;
+(Redirect.prototype as any)[REDIRECT_BRAND] = true;
+
 const DANGEROUS_SCHEMES = /^(javascript|data|vbscript):/i;
 
 function validateRedirectLocation(location: string, options?: RedirectOptions): void {

package/src/core/hooks.ts

@@ -46,6 +46,16 @@ export type RequestEvent = {
 	locals: Record<string, any> & { nonce?: string };
 	params: Record<string, string>;
 	cookies: Cookies;
+	/**
+	 * True when the client router is fetching this page's loader data for a
+	 * client-side navigation instead of the browser loading the page itself.
+	 *
+	 * `url` is the page URL either way — a guard never has to know which kind of
+	 * request it is looking at. This is here for the cases that genuinely differ
+	 * (skipping work that only matters for a full document render), not for
+	 * authorization: a check that runs on one kind and not the other is a hole.
+	 */
+	isDataRequest: boolean;
 };
 
 export type LoadEvent = {
@@ -117,6 +127,16 @@ export type LoaderDeps = {
 
 export type ResolveFunction = (event: RequestEvent) => MaybePromise<Response>;
 
+/**
+ * Middleware wrapping every request. Mutate `event.locals`, short-circuit with
+ * a `Response` / `throw redirect()` / `throw error()`, or call `resolve(event)`
+ * to continue.
+ *
+ * Pass on the `event.request` you were given. The framework keys per-request
+ * state off that exact `Request` instance, so handing `resolve()` an event
+ * carrying a freshly constructed `Request` detaches it from that state and a
+ * client-navigation data fetch comes back as page HTML.
+ */
 export type Handle = (input: {
 	event: RequestEvent;
 	resolve: ResolveFunction;

package/src/core/html.ts

@@ -56,6 +56,19 @@ function twCssLink(): string {
 		: `<link rel="stylesheet" href="${TW_CSS}${cacheBust}">`;
 }
 
+/** The build-time component stylesheet (scoped `<style>` blocks, concatenated).
+ *  Emitted AFTER `twCssLink()` on every path: these rules used to be appended to
+ *  `document.head` at hydration, i.e. last, and the app stylesheets Tailwind
+ *  inlines (`tokens.css`, `components.css`) are unlayered, so a tie between them
+ *  is settled on source order. Linking before Tailwind would silently flip
+ *  which one wins. Each entry carries its own indent and newline, so an app with
+ *  no scoped styles at all contributes nothing rather than a blank line. */
+function componentCssLinks(): string {
+	return (distManifest.css ?? [])
+		.map((f: string) => `  <link rel="stylesheet" href="${DIST}/${f}">\n`)
+		.join("");
+}
+
 /** Inline theme bootstrap — runs before paint to avoid FOUC. theme ∈ light|dark|system (missing = system). */
 const THEME_INIT_JS =
 	"try{var t=localStorage.getItem('theme');" +
@@ -153,10 +166,6 @@ export function buildHtml(
 	body = rebaseHtmlAttrs(B, body);
 	head = rebaseHtmlAttrs(B, head);
 
-	const cssLinks = (distManifest.css ?? [])
-		.map((f: string) => `<link rel="stylesheet" href="${DIST}/${f}">`)
-		.join("\n  ");
-
 	// Metadata goes in before `head`: the first <title> in the document wins, and
 	// the streaming path already puts metadata() ahead of <svelte:head> content
 	// (which arrives later via buildHtmlTail). Same order = same winner on both paths.
@@ -210,8 +219,8 @@ export function buildHtml(
 
 		return (
 			headOpenInterpolated +
-			`\n  ${faviconLine}${cssLinks}\n` +
-			`  ${twCssLink()}\n` +
+			`\n  ${faviconLine}${twCssLink()}\n` +
+			componentCssLinks() +
 			`  <script${n}>${THEME_INIT_JS}</script>\n` +
 			`  ${fallbackTitle}${metaTags}${head}` +
 			headCloseInterpolated +
@@ -229,9 +238,8 @@ export function buildHtml(
   ${fallbackTitle}
   <link rel="icon" type="image/svg+xml" href="${FAVICON}">
 ${metaTags}  ${head}
-  ${cssLinks}
   ${twCssLink()}
-  <script${n}>${THEME_INIT_JS}</script>
+${componentCssLinks()}  <script${n}>${THEME_INIT_JS}</script>
 </head>
 <body>
   <div id="app">${body}</div>${scripts}${bodyEnd}
@@ -249,10 +257,6 @@ export function buildHtmlShellOpen(
 ): string {
 	const key = safeLang(lang);
 	const n = nonceAttr(nonce);
-	const cssLinks = (distManifest.css ?? [])
-		.map((f: string) => `<link rel="stylesheet" href="${DIST}/${f}">`)
-		.join("\n  ");
-
 	if (segments) {
 		const headOpenInterpolated = interpolateSegment(segments.headOpen, { lang: key, nonce });
 		const faviconLine = segments.hasCustomFavicon
@@ -260,8 +264,8 @@ export function buildHtmlShellOpen(
 			: `  <link rel="icon" type="image/svg+xml" href="${FAVICON}">\n`;
 		return (
 			headOpenInterpolated +
-			`\n  ${faviconLine}${cssLinks}\n` +
-			`  ${twCssLink()}\n` +
+			`\n  ${faviconLine}${twCssLink()}\n` +
+			componentCssLinks() +
 			`  <script${n}>${THEME_INIT_JS}</script>\n` +
 			`  <link rel="modulepreload" href="${DIST}/${distManifest.entry}${cacheBust}">`
 		);
@@ -272,8 +276,8 @@ export function buildHtmlShellOpen(
 		`  <meta charset="UTF-8">\n` +
 		`  <meta name="viewport" content="width=device-width, initial-scale=1.0">\n` +
 		`  <link rel="icon" type="image/svg+xml" href="${FAVICON}">\n` +
-		`  ${cssLinks}\n` +
 		`  ${twCssLink()}\n` +
+		componentCssLinks() +
 		`  <script${n}>${THEME_INIT_JS}</script>\n` +
 		`  <link rel="modulepreload" href="${DIST}/${distManifest.entry}${cacheBust}">`
 	);

package/src/core/plugins/inspector/bun-plugin.ts

@@ -4,6 +4,7 @@ import { relative } from "node:path";
 import type { BunPlugin } from "bun";
 import { svelteMapCache } from "../../svelteCompiler.ts";
 import { lineColFromOffset } from "../../sourceLoc.ts";
+import { collectComponentCss } from "../../componentCss.ts";
 
 type AnyNode = {
 	type?: string;
@@ -136,11 +137,12 @@ export function createInspectorBunPlugin(opts: InspectorBunPluginOptions): BunPl
 					generate,
 					dev,
 					hmr: dev,
-					// Mirror the prod compiler (svelteCompiler.ts): client injects scoped
-					// CSS into the JS via `append_styles`, server discards it. No CSS
-					// chunks means Bun's `splitting:true` output-path collisions can't
-					// arise, so no runtime-injection workaround is needed.
-					css: generate === "client" ? "injected" : "external",
+					// Mirror the prod compiler (svelteCompiler.ts): external on both
+					// targets, with the client's rules harvested into one stylesheet
+					// that the head links. This plugin registers ahead of the main
+					// compiler and its onLoad wins in dev, so letting the two drift
+					// here is how dev and prod stop agreeing about first paint.
+					css: "external",
 					preserveWhitespace: dev,
 					preserveComments: dev,
 					cssHash: ({ css }) => `svelte-${fnv(css)}`,
@@ -165,6 +167,11 @@ export function createInspectorBunPlugin(opts: InspectorBunPluginOptions): BunPl
 					svelteMapCache.set(args.path, m);
 				}
 
+				// Client only — see the same guard in svelteCompiler.ts.
+				if (generate === "client" && result.css?.code) {
+					collectComponentCss(args.path, result.css.code);
+				}
+
 				const js = dev ? fixBindShadow(result.js.code) : result.js.code;
 				return { contents: js, loader: "ts" };
 			});

package/src/core/renderer.ts

@@ -19,7 +19,7 @@ import {
 	serveCached,
 } from "./cache.ts";
 import type { CookieJar } from "./cookies.ts";
-import { HttpError, Redirect } from "./errors.ts";
+import { HttpError, Redirect, isHttpError, isRedirect } from "./errors.ts";
 import { pickErrorPage, type ErrorOrigin } from "./errorMatch.ts";
 import App from "./client/App.svelte";
 import { router } from "./client/router.svelte.ts";
@@ -449,8 +449,8 @@ export async function loadRouteData(
 				layoutDeps[ls.depth] = emptyDeps();
 			}
 		} catch (err) {
-			if (err instanceof Redirect) throw err;
-			if (err instanceof HttpError) {
+			if (isRedirect(err)) throw err;
+			if (isHttpError(err)) {
 				stampErrorContext(
 					err,
 					ls.depth,
@@ -513,8 +513,8 @@ export async function loadRouteData(
 				pageDeps = emptyDeps();
 			}
 		} catch (err) {
-			if (err instanceof Redirect) throw err;
-			if (err instanceof HttpError) {
+			if (isRedirect(err)) throw err;
+			if (isHttpError(err)) {
 				stampErrorContext(
 					err,
 					route.layoutModules.length,
@@ -573,7 +573,7 @@ export async function loadMetadata(
 	} catch (err) {
 		// Control flow thrown from metadata() is intent, not failure — swallowing it
 		// here made every caller's Redirect/HttpError branch dead code.
-		if (err instanceof Redirect || err instanceof HttpError) throw err;
+		if (isRedirect(err) || isHttpError(err)) throw err;
 		if (isDev) console.error("Metadata load error:", err);
 		else console.error("Metadata load error:", (err as Error).message ?? err);
 		if (isDev) reportDevErrorFromCatch(err);
@@ -651,10 +651,10 @@ export async function renderSSRStream(
 		try {
 			metadata = await loadMetadata(route, params, url, locals, cookies, req);
 		} catch (err) {
-			if (err instanceof Redirect) {
+			if (isRedirect(err)) {
 				return Response.redirect(err.location, err.status);
 			}
-			if (err instanceof HttpError) {
+			if (isHttpError(err)) {
 				return renderErrorPage(
 					err.status,
 					err.message,
@@ -690,8 +690,8 @@ export async function renderSSRStream(
 			]);
 			pageMod = pm;
 		} catch (err) {
-			if (err instanceof Redirect) return Response.redirect(err.location, err.status);
-			if (err instanceof HttpError) {
+			if (isRedirect(err)) return Response.redirect(err.location, err.status);
+			if (isHttpError(err)) {
 				const e = err as HttpError & {
 					errorDepth?: number;
 					errorOrigin?: ErrorOrigin;
@@ -950,8 +950,8 @@ export async function renderPageWithFormData(
 	try {
 		metadata = await loadMetadata(route, params, url, locals, cookies, req);
 	} catch (err) {
-		if (err instanceof Redirect) return Response.redirect(err.location, err.status);
-		if (err instanceof HttpError) {
+		if (isRedirect(err)) return Response.redirect(err.location, err.status);
+		if (isHttpError(err)) {
 			return renderErrorPage(
 				err.status,
 				err.message,

package/src/core/scanner.ts

@@ -65,6 +65,7 @@ export function scanRoutes(): RouteManifest {
 		layoutServerChain: { path: string; depth: number }[],
 		errorPageChain: { path: string; depth: number }[],
 		inheritedTrailingSlash: TrailingSlash,
+		inheritedLoading: string | null,
 	) {
 		const fullDir = join(ROUTES_DIR, dir);
 		if (!existsSync(fullDir)) return;
@@ -76,6 +77,12 @@ export function scanRoutes(): RouteManifest {
 		const currentLayoutServers = [...layoutServerChain];
 		const currentErrorPages = [...errorPageChain];
 		let currentTrailingSlash = inheritedTrailingSlash;
+		// Cascades to every page below, nearest ancestor winning — the same shape
+		// as the layout chain. Without this a section with 40 routes needed 40
+		// identical +loading.svelte files to cover its navigations.
+		const currentLoading = items.some((i) => i.isFile() && i.name === "+loading.svelte")
+			? join(dir, "+loading.svelte")
+			: inheritedLoading;
 
 		if (items.some((i) => i.isFile() && i.name === "+layout.svelte")) {
 			currentLayouts.push(join(dir, "+layout.svelte"));
@@ -112,10 +119,6 @@ export function scanRoutes(): RouteManifest {
 				? join(dir, "+page.server.ts")
 				: null;
 
-			const loadingFile = items.some((i) => i.isFile() && i.name === "+loading.svelte")
-				? join(dir, "+loading.svelte")
-				: null;
-
 			const pageTs = pageServerFile ? readTrailingSlash(join(ROUTES_DIR, pageServerFile)) : null;
 			const effectiveTs: TrailingSlash = pageTs ?? currentTrailingSlash;
 
@@ -125,7 +128,7 @@ export function scanRoutes(): RouteManifest {
 				page: pageFile,
 				layouts: [...currentLayouts],
 				pageServer: pageServerFile,
-				loading: loadingFile,
+				loading: currentLoading,
 				layoutServers: [...currentLayoutServers],
 				errorPages: [...currentErrorPages],
 				trailingSlash: effectiveTs,
@@ -149,11 +152,12 @@ export function scanRoutes(): RouteManifest {
 				currentLayoutServers,
 				currentErrorPages,
 				currentTrailingSlash,
+				currentLoading,
 			);
 		}
 	}
 
-	walk("", [], [], [], [], "never");
+	walk("", [], [], [], [], "never", null);
 
 	// Warn when a catch-all exists but no exact route covers its prefix.
 	// e.g. "/[...slug]" matches everything EXCEPT "/" (which needs its own +page.svelte).

package/src/core/server.ts

@@ -13,7 +13,7 @@ import type { RouteManifest } from "./types.ts";
 compileRoutes(apiRoutes);
 compileRoutes(serverRoutes);
 import { NO_FRAME_GUARD_HEADER, type Handle, type RequestEvent } from "./hooks.ts";
-import { HttpError, Redirect, ActionFailure } from "./errors.ts";
+import { HttpError, Redirect, ActionFailure, isHttpError, isRedirect } from "./errors.ts";
 import { CookieJar } from "./cookies.ts";
 import { safePath } from "./safePath.ts";
 import { checkCsrf } from "./csrf.ts";
@@ -184,6 +184,54 @@ function isValidRoutePath(path: string, origin: string): boolean {
 	}
 }
 
+type DataRequest = { routeUrl: URL; invalidatedBits: string | null };
+
+/**
+ * Decode `/__bosia/data/<route>.json` into the page URL it stands for.
+ * `null` = not a data request, `"invalid"` = 400.
+ *
+ * Called before the hooks run, not inside `resolve()`, so `event.url` is the
+ * page the visitor asked for no matter how the request arrived. A guard reading
+ * `event.url.pathname` sees `/admin` for a link click and for an address-bar
+ * load alike; when it only saw the transport path on one of them, the loaders
+ * ran unguarded for every client navigation.
+ */
+function parseDataRequest(url: URL): DataRequest | "invalid" | null {
+	if (!url.pathname.startsWith("/__bosia/data/")) return null;
+
+	const routePathStr =
+		url.pathname
+			.slice("/__bosia/data".length)
+			.replace(/\.json$/, "")
+			.replace(/^\/index$/, "/") || "/";
+
+	if (!isValidRoutePath(routePathStr, url.origin)) return "invalid";
+
+	const routeUrl = new URL(routePathStr, url.origin);
+	let invalidatedBits: string | null = null;
+	for (const [key, val] of url.searchParams.entries()) {
+		if (key === "_invalidated") {
+			invalidatedBits = val;
+			continue;
+		}
+		routeUrl.searchParams.append(key, val);
+	}
+	return { routeUrl, invalidatedBits };
+}
+
+/**
+ * Per-request parse, parked here because `resolve()` can no longer recover it:
+ * `event.url` is the page URL by then, and hooks call `resolve(event)`
+ * themselves so there is no parameter to thread it through. `event.locals` is
+ * user scratch space and off limits for framework state.
+ *
+ * Keyed on the incoming `Request`, which is the one object that stays identical
+ * across the whole chain. A hook that swaps in a fabricated `Request` detaches
+ * its event from this record — documented on `Handle`, pinned by
+ * `test/hooks-redirect.test.ts`.
+ */
+const dataRequests = new WeakMap<Request, DataRequest>();
+
 /**
  * Decode an `_invalidated` bitmask string. Char 0 = page, char i+1 = layout
  * depth i, '1' = run, '0' = skip. Missing/extra chars default to run.
@@ -230,28 +278,12 @@ async function resolve(event: RequestEvent): Promise<Response> {
 		return Response.json({ status: "ok", timestamp, timezone });
 	}
 
-	// Data endpoint — returns server loader data as JSON for client-side navigation
-	if (path.startsWith("/__bosia/data/")) {
-		const routePathStr =
-			path
-				.slice("/__bosia/data".length)
-				.replace(/\.json$/, "")
-				.replace(/^\/index$/, "/") || "/";
-
-		if (!isValidRoutePath(routePathStr, url.origin)) {
-			return Response.json({ error: "Invalid path", status: 400 }, { status: 400 });
-		}
-		const routeUrl = new URL(routePathStr, url.origin);
-		let invalidatedBits: string | null = null;
-		for (const [key, val] of url.searchParams.entries()) {
-			if (key === "_invalidated") {
-				invalidatedBits = val;
-				continue;
-			}
-			routeUrl.searchParams.append(key, val);
-		}
-		// Rewrite event.url so logging middleware sees the real page path, not /__bosia/data
-		event.url = routeUrl;
+	// Data endpoint — returns server loader data as JSON for client-side navigation.
+	// The URL no longer says so (it is the page URL, for the hooks' benefit), so
+	// the parse handleRequest parked before the hooks ran is what identifies it.
+	const dataReq = dataRequests.get(request);
+	if (dataReq) {
+		const { routeUrl, invalidatedBits } = dataReq;
 		try {
 			const pageMatch = findMatch(serverRoutes, routeUrl.pathname);
 			// Build mask from `?_invalidated=<bits>` where char 0 = page,
@@ -360,14 +392,14 @@ async function resolve(event: RequestEvent): Promise<Response> {
 				extra,
 			);
 		} catch (err) {
-			if (err instanceof Redirect) {
+			if (isRedirect(err)) {
 				return compress(
 					JSON.stringify({ redirect: err.location, status: err.status }),
 					"application/json",
 					request,
 				);
 			}
-			if (err instanceof HttpError) {
+			if (isHttpError(err)) {
 				const e = err as HttpError & {
 					errorDepth?: number;
 					errorOrigin?: "page" | "layout";
@@ -471,10 +503,13 @@ async function resolve(event: RequestEvent): Promise<Response> {
 				url,
 				locals,
 				cookies,
+				// An API route is reached through its own URL, never through the
+				// client router's data endpoint.
+				isDataRequest: false,
 			});
 
 			// Redirect returned (not thrown) — convert to a 303 Response.
-			if (handlerResult instanceof Redirect) {
+			if (isRedirect(handlerResult)) {
 				return new Response(null, {
 					status: handlerResult.status,
 					headers: { Location: handlerResult.location },
@@ -546,13 +581,13 @@ async function resolve(event: RequestEvent): Promise<Response> {
 		} catch (err) {
 			// `throw redirect(303, "/")` from a +server.ts handler — turn it into
 			// a real 303 instead of a 500. Mirrors the page-action handler below.
-			if (err instanceof Redirect) {
+			if (isRedirect(err)) {
 				return new Response(null, {
 					status: err.status,
 					headers: { Location: err.location },
 				});
 			}
-			if (err instanceof HttpError) {
+			if (isHttpError(err)) {
 				return Response.json({ error: err.message }, { status: err.status });
 			}
 			if (isDev) console.error("API route error:", err);
@@ -704,7 +739,7 @@ async function resolve(event: RequestEvent): Promise<Response> {
 					try {
 						result = await action(event);
 					} catch (err) {
-						if (err instanceof Redirect) {
+						if (isRedirect(err)) {
 							if (isEnhanced) {
 								return Response.json({
 									type: "redirect",
@@ -717,7 +752,7 @@ async function resolve(event: RequestEvent): Promise<Response> {
 								headers: { Location: err.location },
 							});
 						}
-						if (err instanceof HttpError) {
+						if (isHttpError(err)) {
 							if (isEnhanced) {
 								return Response.json(
 									{ type: "error", status: err.status, message: err.message },
@@ -740,7 +775,7 @@ async function resolve(event: RequestEvent): Promise<Response> {
 					}
 
 					// Redirect returned (not thrown)
-					if (result instanceof Redirect) {
+					if (isRedirect(result)) {
 						if (isEnhanced) {
 							return Response.json({
 								type: "redirect",
@@ -792,7 +827,7 @@ async function resolve(event: RequestEvent): Promise<Response> {
 					);
 				}
 			} catch (err) {
-				if (err instanceof Redirect) {
+				if (isRedirect(err)) {
 					if (isEnhanced) {
 						return Response.json({
 							type: "redirect",
@@ -805,7 +840,7 @@ async function resolve(event: RequestEvent): Promise<Response> {
 						headers: { Location: err.location },
 					});
 				}
-				if (err instanceof HttpError) {
+				if (isHttpError(err)) {
 					if (isEnhanced) {
 						return Response.json(
 							{ type: "error", status: err.status, message: err.message },
@@ -921,6 +956,11 @@ async function handleRequest(request: Request, url: URL): Promise<Response> {
 	}
 
 	inFlight++;
+	// Hoisted so the catch below can tell a data request from a page request and
+	// reuse the same nonce when it renders an error page.
+	let dataReq: DataRequest | null = null;
+	let nonce = "";
+	let cookieJar: CookieJar | null = null;
 	try {
 		// Handle CORS preflight before CSRF check (OPTIONS is CSRF-exempt)
 		if (CORS_CONFIG && request.method === "OPTIONS") {
@@ -937,16 +977,50 @@ async function handleRequest(request: Request, url: URL): Promise<Response> {
 		const isHttps =
 			(TRUST_PROXY && request.headers.get("x-forwarded-proto") === "https") ||
 			url.protocol === "https:";
-		const cookieJar = new CookieJar(request.headers.get("cookie") ?? "", isHttps);
-		const nonce = CSP_ENABLED ? generateNonce() : "";
+		cookieJar = new CookieJar(request.headers.get("cookie") ?? "", isHttps);
+		nonce = CSP_ENABLED ? generateNonce() : "";
+
+		// Decode the data endpoint before the hooks, not inside resolve(): a guard
+		// runs *before* `await resolve(event)`, so a rewrite in there reaches
+		// logging middleware and never reaches the check that gates the route.
+		const parsed = parseDataRequest(url);
+		if (parsed === "invalid") {
+			return Response.json({ error: "Invalid path", status: 400 }, { status: 400 });
+		}
+		dataReq = parsed;
+		if (dataReq) dataRequests.set(request, dataReq);
+
 		const event: RequestEvent = {
 			request,
-			url,
+			url: dataReq ? dataReq.routeUrl : url,
 			locals: { nonce },
 			params: {},
 			cookies: cookieJar,
+			isDataRequest: dataReq !== null,
 		};
-		const response = userHandle ? await userHandle({ event, resolve }) : await resolve(event);
+		let response = userHandle ? await userHandle({ event, resolve }) : await resolve(event);
+
+		// A hook that short-circuits a data request with a redirect is answering
+		// the client router, which speaks JSON — an unconverted 3xx is followed by
+		// `fetch` and the router receives the redirect target's HTML instead.
+		// `Location` is copied verbatim: `redirect()` already rebased it through
+		// `withBase()`, and a raw `Response.redirect` under a BASE_PATH carries the
+		// base by hand, so rebasing here would double the prefix on both.
+		if (dataReq && response.status >= 300 && response.status < 400) {
+			const location = response.headers.get("location");
+			if (location) {
+				const carried = new Headers(response.headers);
+				carried.delete("location");
+				carried.delete("content-type");
+				carried.delete("content-length");
+				carried.delete("content-encoding");
+				carried.set("content-type", "application/json");
+				response = new Response(JSON.stringify({ redirect: location, status: response.status }), {
+					status: 200,
+					headers: carried,
+				});
+			}
+		}
 
 		const headers = new Headers(response.headers);
 		// A handle can mark a response (e.g. a proxied embeddable preview) to opt
@@ -979,6 +1053,45 @@ async function handleRequest(request: Request, url: URL): Promise<Response> {
 			headers,
 		});
 	} catch (err) {
+		// `throw redirect()` / `throw error()` from a hook lands here — the same
+		// escape hatch loaders have always had. Without these branches both fall
+		// through to the 500 below, which is why the docs could only ever suggest
+		// returning a raw `Response.redirect`.
+		if (isRedirect(err) || isHttpError(err)) {
+			const out = isRedirect(err)
+				? dataReq
+					? // Shape-identical to the loader conversion below, so the
+						// router has one payload contract regardless of who redirected.
+						Response.json({ redirect: err.location, status: err.status })
+					: Response.redirect(err.location, err.status)
+				: dataReq
+					? Response.json(
+							{
+								error: { status: err.status, message: err.message },
+								errorDepth: null,
+								errorOrigin: null,
+							},
+							{ status: err.status },
+						)
+					: await renderErrorPage(
+							err.status,
+							err.message,
+							url,
+							request,
+							undefined,
+							undefined,
+							undefined,
+							undefined,
+							nonce,
+						);
+			// A hook that expires the session before throwing must not lose the
+			// Set-Cookie that does it — `Response.redirect` builds a fresh Response,
+			// so the jar is re-applied by hand here.
+			if (cookieJar) {
+				for (const cookie of cookieJar.outgoing) out.headers.append("Set-Cookie", cookie);
+			}
+			return out;
+		}
 		if (isDev) console.error("Unhandled request error:", err);
 		else console.error("Unhandled request error:", (err as Error).message ?? err);
 		if (isDev) reportDevErrorFromCatch(err);

package/src/core/svelteCompiler.ts

@@ -2,6 +2,7 @@ import { compile, compileModule } from "svelte/compiler";
 import type { BunPlugin } from "bun";
 
 import { auditSvelteSource } from "./svelteAudit.ts";
+import { collectComponentCss } from "./componentCss.ts";
 import { rebaseHtmlAttrs } from "./basePath.ts";
 import { currentBase } from "./appBase.ts";
 import { loadBosiaConfig } from "./config.ts";
@@ -110,7 +111,12 @@ export function makeBosiaSvelteCompiler(target: "browser" | "bun"): BunPlugin {
 				const source = await Bun.file(args.path).text();
 				const result = compile(rebaseSvelteMarkup(source), {
 					generate,
-					css: target === "browser" ? "injected" : "external",
+					// External on both targets. The browser used to get "injected",
+					// which put every scoped rule inside the JS bundle — so an
+					// SSR'd page painted before its own layout CSS existed and
+					// snapped into place at hydration. `collectComponentCss` below
+					// gathers the rules into one stylesheet the head can link.
+					css: "external",
 					dev,
 					hmr: false,
 					cssHash: ({ css }) => `svelte-${svelteHash(css)}`,
@@ -119,6 +125,12 @@ export function makeBosiaSvelteCompiler(target: "browser" | "bun"): BunPlugin {
 					// rather than the legacy `html`. The audit walker assumes modern.
 					modernAst: true,
 				});
+				// Browser only: both plugin instances share module state and the
+				// client and server builds run concurrently, so collecting from
+				// each would emit every rule twice.
+				if (target === "browser" && result.css?.code) {
+					collectComponentCss(args.path, result.css.code);
+				}
 				const existing = auditInflight.get(args.path);
 				if (existing) {
 					await existing;