bosia 0.9.5 → 0.9.7

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bosia",
-	"version": "0.9.5",
+	"version": "0.9.7",
 	"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/cli/create.ts

@@ -5,6 +5,7 @@ import { spawn } from "bun";
 import * as p from "@clack/prompts";
 import { installFeature, initFeatRegistry, resolveLocalRegistry } from "./feat.ts";
 import { initAddRegistry } from "./add.ts";
+import { toPosix } from "../core/paths.ts";
 
 // ─── bun x bosia@latest create <name> [--template <name>] ─
 
@@ -283,7 +284,7 @@ function copyDir(src: string, dest: string, projectName: string, isLocal: boolea
 
 			if (entry.name === "package.json" && isLocal) {
 				const bosiaPath = resolve(import.meta.dir, "../../");
-				const relPath = relative(dest, bosiaPath);
+				const relPath = toPosix(relative(dest, bosiaPath));
 				content = content.replaceAll('"^{{BOSIA_VERSION}}"', `"file:${relPath}"`);
 			} else {
 				content = content.replaceAll("{{BOSIA_VERSION}}", BOSIA_VERSION);

package/src/cli/registry.ts

@@ -21,7 +21,7 @@ export interface InstallOptions {
 // ─── Local registry resolution ────────────────────────────
 
 export function resolveLocalRegistry(): string {
-	let dir = dirname(new URL(import.meta.url).pathname);
+	let dir = import.meta.dir;
 	for (let i = 0; i < 10; i++) {
 		const candidate = join(dir, "registry");
 		if (existsSync(join(candidate, "index.json"))) return candidate;

package/src/core/build.ts

@@ -1,5 +1,5 @@
 import { writeFileSync, readFileSync, rmSync, mkdirSync, existsSync } from "fs";
-import { join, relative } from "path";
+import { basename, join, relative } from "path";
 import type { RouteManifest } from "./types.ts";
 
 import { scanRoutes } from "./scanner.ts";
@@ -7,10 +7,11 @@ 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";
-import { BOSIA_NODE_PATH, OUT_DIR, resolveBosiaBin } from "./paths.ts";
+import { BOSIA_NODE_PATH, OUT_DIR, resolveBosiaBin, toPosix } from "./paths.ts";
 import { currentBase } from "./appBase.ts";
 import { finalizeTailwindCss, TW_TEMP_BASENAME } from "./twHash.ts";
 import { loadPlugins } from "./config.ts";
@@ -250,7 +251,7 @@ const cssFiles: string[] = [];
 // `output.kind === "entry-point"` instead so we pin the actual entry.
 let clientEntry: string | null = null;
 for (const output of clientResult.outputs) {
-	const rel = relative(`${OUT_DIR}/client`, output.path);
+	const rel = toPosix(relative(`${OUT_DIR}/client`, output.path)); // URL path, not fs path
 	if (output.path.endsWith(".js")) jsFiles.push(rel);
 	if (output.path.endsWith(".css")) cssFiles.push(rel);
 	if ((output as { kind?: string }).kind === "entry-point" && output.path.endsWith(".js")) {
@@ -258,12 +259,20 @@ 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
-		.find((o) => o.path.endsWith("index.js"))
-		?.path.split("/")
-		.pop() ?? "index.js";
+const serverEntryOutput = serverResult.outputs.find((o) => o.path.endsWith("index.js"));
+const serverEntry = serverEntryOutput ? basename(serverEntryOutput.path) : "index.js";
 
 // 8. Write dist/manifest.json
 mkdirSync(OUT_DIR, { recursive: true });

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/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/paths.ts

@@ -1,4 +1,4 @@
-import { join, dirname } from "path";
+import { join, dirname, delimiter } from "path";
 import { existsSync } from "fs";
 
 // This file lives at src/core/paths.ts → package root is ../..
@@ -26,18 +26,31 @@ const ANCESTOR_NM = collectAncestorNodeModules(dirname(BOSIA_PKG_DIR));
 const ALL_NM = [NESTED_NM, ...ANCESTOR_NM];
 
 /** NODE_PATH value covering nested and every ancestor node_modules */
-export const BOSIA_NODE_PATH = ALL_NM.join(":");
+export const BOSIA_NODE_PATH = ALL_NM.join(delimiter); // ";" on Windows, ":" elsewhere
 
 // On-disk output directory. URL namespace (/dist/client/...) stays stable;
 // only the on-disk location moves so dev (.bosia/dev) and a parallel
 // `bun run build` (./dist) don't clobber each other.
 export const OUT_DIR = process.env.BOSIA_OUT_DIR ?? "./dist";
 
+/** Normalize a filesystem path to forward slashes (for URLs, manifests, imports). */
+export function toPosix(p: string): string {
+	return p.replace(/\\/g, "/");
+}
+
+/** `.bin` file names to try for `name`. Windows shims carry an extension. */
+export function binCandidates(name: string, platform: string = process.platform): string[] {
+	return platform === "win32" ? [`${name}.exe`, `${name}.cmd`, `${name}.bunx`, name] : [name];
+}
+
 /** Find a binary from bosia's dependencies (handles hoisting) */
 export function resolveBosiaBin(name: string): string {
+	const candidates = binCandidates(name);
 	for (const nm of ALL_NM) {
-		const bin = join(nm, ".bin", name);
-		if (existsSync(bin)) return bin;
+		for (const file of candidates) {
+			const bin = join(nm, ".bin", file);
+			if (existsSync(bin)) return bin;
+		}
 	}
-	return join(NESTED_NM, ".bin", name); // fallback — will produce a clear ENOENT
+	return join(NESTED_NM, ".bin", candidates[0]); // fallback — will produce a clear ENOENT
 }

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

@@ -4,6 +4,8 @@ import { relative } from "node:path";
 import type { BunPlugin } from "bun";
 import { svelteMapCache } from "../../svelteCompiler.ts";
 import { lineColFromOffset } from "../../sourceLoc.ts";
+import { toPosix } from "../../paths.ts";
+import { collectComponentCss } from "../../componentCss.ts";
 
 type AnyNode = {
 	type?: string;
@@ -128,7 +130,7 @@ export function createInspectorBunPlugin(opts: InspectorBunPluginOptions): BunPl
 		setup(build) {
 			build.onLoad({ filter: /\.svelte$/ }, async (args) => {
 				const source = await Bun.file(args.path).text();
-				const rel = relative(cwd, args.path);
+				const rel = toPosix(relative(cwd, args.path));
 				const transformed = injectLocs(source, rel);
 
 				const result = compile(transformed, {
@@ -136,11 +138,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 +168,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/plugins/inspector/sourcemap.ts

@@ -1,7 +1,7 @@
 import { TraceMap, originalPositionFor, GREATEST_LOWER_BOUND } from "@jridgewell/trace-mapping";
 import { readFileSync, existsSync } from "node:fs";
-import { dirname, resolve as pathResolve } from "node:path";
-import { OUT_DIR } from "../../paths.ts";
+import { dirname, isAbsolute, relative, resolve as pathResolve } from "node:path";
+import { OUT_DIR, toPosix } from "../../paths.ts";
 
 const cache = new Map<string, TraceMap | null>();
 
@@ -64,7 +64,7 @@ function mapPathFor(file: string): string | null {
 			? OUT_DIR + pathname.slice("/dist".length)
 			: "." + pathname;
 		fsPath = pathResolve(process.cwd(), relFromCwd);
-	} else if (file.startsWith("/")) {
+	} else if (isAbsolute(file)) {
 		fsPath = file;
 	} else {
 		fsPath = pathResolve(process.cwd(), file);
@@ -109,16 +109,18 @@ export function resolveFrame(
 			}
 			if (refined.source && refined.line != null) {
 				const refinedAbs = pathResolve(dirname(abs), refined.source);
-				const rel = refinedAbs.startsWith(process.cwd() + "/")
-					? refinedAbs.slice(process.cwd().length + 1)
-					: refinedAbs;
-				return { file: rel, line: refined.line, col: refined.column ?? 1 };
+				return { file: relToCwd(refinedAbs), line: refined.line, col: refined.column ?? 1 };
 			}
 		}
 	}
 
-	const rel = abs.startsWith(process.cwd() + "/") ? abs.slice(process.cwd().length + 1) : abs;
-	return { file: rel, line: pos.line, col: pos.column ?? 1 };
+	return { file: relToCwd(abs), line: pos.line, col: pos.column ?? 1 };
+}
+
+// cwd-relative "/"-separated path when `abs` is inside cwd, else `abs` unchanged.
+function relToCwd(abs: string): string {
+	const rel = relative(process.cwd(), abs);
+	return rel && !rel.startsWith("..") && !isAbsolute(rel) ? toPosix(rel) : abs;
 }
 
 // Rewrite frames in stack strings: "(url:L:C)", "at url:L:C", "@url:L:C".

package/src/core/port.ts

@@ -1,16 +1,38 @@
-/** PIDs listening on `port`. Fails open to [] — lsof may be absent. */
+/** PIDs listening on `port`. Fails open to [] — lsof / netstat may be absent. */
 export async function pidsOnPort(port: number): Promise<number[]> {
+	const isWindows = process.platform === "win32";
 	try {
-		const proc = Bun.spawn(["lsof", "-ti", `tcp:${port}`, "-sTCP:LISTEN"], {
-			stdout: "pipe",
-			stderr: "ignore",
-		});
+		const cmd = isWindows ? ["netstat", "-ano"] : ["lsof", "-ti", `tcp:${port}`, "-sTCP:LISTEN"];
+		const proc = Bun.spawn(cmd, { stdout: "pipe", stderr: "ignore" });
 		const out = await new Response(proc.stdout).text();
 		await proc.exited;
-		return [...new Set(out.split("\n").map((s) => s.trim()))]
-			.map(Number)
-			.filter((pid) => Number.isInteger(pid) && pid > 0);
+		return isWindows ? parseNetstat(out, port) : parseLsof(out);
 	} catch {
 		return [];
 	}
 }
+
+/** `lsof -t` output: one PID per line. */
+export function parseLsof(out: string): number[] {
+	return uniquePids(out.split("\n").map((s) => s.trim()));
+}
+
+/**
+ * `netstat -ano` (Windows) rows: `TCP  0.0.0.0:3000  0.0.0.0:0  LISTENING  1234`.
+ * The state column is localized on non-English Windows, so a listener is
+ * detected by its foreign address ending in `:0` instead of the word LISTENING.
+ */
+export function parseNetstat(out: string, port: number): number[] {
+	const pids: string[] = [];
+	for (const line of out.split(/\r?\n/)) {
+		const cols = line.trim().split(/\s+/);
+		if (cols.length < 5 || cols[0].toUpperCase() !== "TCP") continue;
+		const [, local, foreign] = cols;
+		if (local.endsWith(`:${port}`) && foreign.endsWith(":0")) pids.push(cols[cols.length - 1]);
+	}
+	return uniquePids(pids);
+}
+
+function uniquePids(raw: string[]): number[] {
+	return [...new Set(raw)].map(Number).filter((pid) => Number.isInteger(pid) && pid > 0);
+}

package/src/core/routeFile.ts

@@ -1,6 +1,7 @@
 import { writeFileSync, mkdirSync } from "fs";
 import type { RouteManifest } from "./types.ts";
 import { currentBase } from "./appBase.ts";
+import { toPosix } from "./paths.ts";
 
 /**
  * The pattern the *client* router matches against. It sees real browser URLs, so
@@ -250,5 +251,5 @@ function generateClientRoutesFile(
 
 // Import path from .bosia/routes.ts to src/routes/<routePath>
 function toImportPath(routePath: string): string {
-	return "../src/routes/" + routePath.replace(/\\/g, "/");
+	return "../src/routes/" + toPosix(routePath);
 }

package/src/core/routeTypes.ts

@@ -1,6 +1,7 @@
 import { writeFileSync, readFileSync, existsSync, mkdirSync } from "fs";
 import { join } from "path";
 import type { RouteManifest } from "./types.ts";
+import { toPosix } from "./paths.ts";
 
 // ─── Route Types Generator ────────────────────────────────
 // Generates .bosia/types/src/routes/**/$types.d.ts for each
@@ -9,7 +10,7 @@ import type { RouteManifest } from "./types.ts";
 // work in +page.svelte files — identical to SvelteKit's API.
 
 function routeDirOf(filePath: string): string {
-	const parts = filePath.replace(/\\/g, "/").split("/");
+	const parts = toPosix(filePath).split("/");
 	parts.pop();
 	return parts.join("/") || ".";
 }

package/src/core/safePath.ts

@@ -1,4 +1,4 @@
-import { join, resolve as resolvePath } from "path";
+import { join, resolve as resolvePath, sep } from "path";
 
 /**
  * Resolve `untrusted` relative to `base` and verify the result stays inside
@@ -10,5 +10,5 @@ import { join, resolve as resolvePath } from "path";
 export function safePath(base: string, untrusted: string): string | null {
 	const root = resolvePath(base);
 	const full = resolvePath(join(base, untrusted));
-	return full.startsWith(root + "/") || full === root ? full : null;
+	return full.startsWith(root + sep) || full === root ? full : null;
 }

package/src/core/scanner.ts

@@ -65,10 +65,15 @@ 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;
 
+		// Manifest paths are always "/"-separated (they become import specifiers),
+		// so build them by hand — path.join would emit "\" on Windows.
+		const rel = (name: string) => (dir ? `${dir}/${name}` : name);
+
 		const items = readdirSync(fullDir, { withFileTypes: true });
 
 		// Accumulate layouts for this level
@@ -76,12 +81,18 @@ 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")
+			? rel("+loading.svelte")
+			: inheritedLoading;
 
 		if (items.some((i) => i.isFile() && i.name === "+layout.svelte")) {
-			currentLayouts.push(join(dir, "+layout.svelte"));
+			currentLayouts.push(rel("+layout.svelte"));
 		}
 		if (items.some((i) => i.isFile() && i.name === "+layout.server.ts")) {
-			const layoutServerPath = join(dir, "+layout.server.ts");
+			const layoutServerPath = rel("+layout.server.ts");
 			currentLayoutServers.push({
 				path: layoutServerPath,
 				depth: currentLayouts.length - 1,
@@ -93,7 +104,7 @@ export function scanRoutes(): RouteManifest {
 			// depth = number of layouts wrapping this dir (this dir's layout included).
 			// An error page at depth K renders inside layouts[0..K-1].
 			currentErrorPages.push({
-				path: join(dir, "+error.svelte"),
+				path: rel("+error.svelte"),
 				depth: currentLayouts.length,
 			});
 		}
@@ -102,30 +113,26 @@ export function scanRoutes(): RouteManifest {
 		if (items.some((i) => i.isFile() && i.name === "+server.ts")) {
 			apis.push({
 				pattern: toUrlPath(urlSegments),
-				server: join(dir, "+server.ts"),
+				server: rel("+server.ts"),
 			});
 		}
 
 		// Page route (+page.svelte)
 		if (items.some((i) => i.isFile() && i.name === "+page.svelte")) {
 			const pageServerFile = items.some((i) => i.isFile() && i.name === "+page.server.ts")
-				? join(dir, "+page.server.ts")
-				: null;
-
-			const loadingFile = items.some((i) => i.isFile() && i.name === "+loading.svelte")
-				? join(dir, "+loading.svelte")
+				? rel("+page.server.ts")
 				: null;
 
 			const pageTs = pageServerFile ? readTrailingSlash(join(ROUTES_DIR, pageServerFile)) : null;
 			const effectiveTs: TrailingSlash = pageTs ?? currentTrailingSlash;
 
-			const pageFile = join(dir, "+page.svelte");
+			const pageFile = rel("+page.svelte");
 			pages.push({
 				pattern: toUrlPath(urlSegments),
 				page: pageFile,
 				layouts: [...currentLayouts],
 				pageServer: pageServerFile,
-				loading: loadingFile,
+				loading: currentLoading,
 				layoutServers: [...currentLayoutServers],
 				errorPages: [...currentErrorPages],
 				trailingSlash: effectiveTs,
@@ -143,17 +150,18 @@ export function scanRoutes(): RouteManifest {
 			const isGroup = /^\(.*\)$/.test(dirName);
 
 			walk(
-				dir ? join(dir, dirName) : dirName,
+				rel(dirName),
 				isGroup ? [...urlSegments] : [...urlSegments, dirName],
 				currentLayouts,
 				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/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;