bosia 0.3.3 → 0.3.4

package/package.json

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

package/src/core/client/App.svelte

@@ -4,6 +4,7 @@
 	import { clientRoutes } from "bosia:routes";
 	import { consumePrefetch, prefetchCache, dataUrl } from "./prefetch.ts";
 	import { appState } from "./appState.svelte.ts";
+	import { pickErrorPage } from "../errorMatch.ts";
 
 	let {
 		ssrMode = false,
@@ -12,6 +13,9 @@
 		ssrPageData = {},
 		ssrLayoutData = [],
 		ssrFormData = null,
+		ssrErrorComponent = null,
+		ssrErrorProps = null,
+		ssrErrorDepth = null,
 	}: {
 		ssrMode?: boolean;
 		ssrPageComponent?: any;
@@ -19,6 +23,9 @@
 		ssrPageData?: Record<string, any>;
 		ssrLayoutData?: Record<string, any>[];
 		ssrFormData?: any;
+		ssrErrorComponent?: any;
+		ssrErrorProps?: { error: { status: number; message: string } } | null;
+		ssrErrorDepth?: number | null;
 	} = $props();
 
 	let PageComponent = $state<any>(ssrPageComponent);
@@ -30,6 +37,9 @@
 	const layoutData = $derived(ssrMode ? (ssrLayoutData ?? []) : appState.layoutData);
 	const routeParams = $derived(ssrMode ? (ssrPageData?.params ?? {}) : appState.routeParams);
 	const formData = $derived(ssrMode ? ssrFormData : appState.form);
+	const ErrorComponent = $derived(ssrMode ? ssrErrorComponent : appState.errorComponent);
+	const errorProps = $derived(ssrMode ? ssrErrorProps : appState.errorProps);
+	const errorDepth = $derived(ssrMode ? ssrErrorDepth : appState.errorDepth);
 	let navigating = $state(false);
 	let navDone = $state(false);
 	// Skip bar on the very first effect run (initial hydration — data already present)
@@ -74,7 +84,7 @@
 			match.route.page(),
 			Promise.all(match.route.layouts.map((l: any) => l())),
 			dataFetch,
-		]).then(([pageMod, layoutMods, result]: [any, any[], any]) => {
+		]).then(async ([pageMod, layoutMods, result]: [any, any[], any]) => {
 			if (cancelled) return;
 			navigating = false;
 			navDone = true;
@@ -86,8 +96,49 @@
 				return;
 			}
 			if (result?.error || (result === null && match.route.hasServerData)) {
-				// Data fetch failed (e.g. static hosting with no server) — full page load
-				window.location.href = path;
+				// New shape: { error: { status, message }, errorDepth, errorOrigin }
+				const errInfo = result?.error;
+				const errStatus =
+					typeof errInfo === "object" && errInfo !== null
+						? (errInfo.status ?? 500)
+						: (result?.status ?? 500);
+				const errMessage =
+					typeof errInfo === "object" && errInfo !== null
+						? (errInfo.message ?? "Internal Server Error")
+						: typeof errInfo === "string"
+							? errInfo
+							: "Internal Server Error";
+				const errDepth: number =
+					typeof result?.errorDepth === "number"
+						? result.errorDepth
+						: match.route.layouts.length;
+				const errOrigin = result?.errorOrigin === "layout" ? "layout" : "page";
+				const picked = pickErrorPage(match.route.errorPages ?? [], errDepth, errOrigin);
+				if (!picked) {
+					// No nested boundary — full reload so server can render global error page
+					window.location.href = path;
+					return;
+				}
+				try {
+					const K = picked.depth;
+					const [errMod, ...layoutModsForError] = await Promise.all([
+						picked.loader(),
+						...match.route.layouts.slice(0, K).map((l: any) => l()),
+					]);
+					if (cancelled) return;
+					layoutComponents = layoutModsForError.map((m: any) => m.default);
+					const newLayoutData: Record<string, any>[] = [];
+					for (let i = 0; i < K; i++) newLayoutData.push({});
+					appState.layoutData = newLayoutData;
+					appState.pageData = {};
+					appState.routeParams = match.params;
+					appState.errorComponent = errMod.default;
+					appState.errorProps = { error: { status: errStatus, message: errMessage } };
+					appState.errorDepth = K;
+					if (router.isPush) window.scrollTo(0, 0);
+				} catch {
+					window.location.href = path;
+				}
 				return;
 			}
 			PageComponent = pageMod.default;
@@ -95,6 +146,10 @@
 			appState.pageData = result?.pageData ?? {};
 			appState.layoutData = result?.layoutData ?? [];
 			appState.routeParams = result?.pageData?.params ?? match.params;
+			// Successful navigation — clear any prior error state.
+			appState.errorComponent = null;
+			appState.errorProps = null;
+			appState.errorDepth = null;
 
 			// Scroll to top on forward navigation (not on popstate/back-forward)
 			if (router.isPush) window.scrollTo(0, 0);
@@ -133,25 +188,34 @@
 	<div class="bosia-bar done"></div>
 {/if}
 
-{#if layoutComponents.length > 0}
-	{@render renderLayout(0)}
+{#if ErrorComponent}
+	{@const depth = errorDepth ?? 0}
+	{#if depth > 0 && layoutComponents.length > 0}
+		{@render renderLayout(0, depth)}
+	{:else}
+		<ErrorComponent {...errorProps ?? {}} />
+	{/if}
+{:else if layoutComponents.length > 0}
+	{@render renderLayout(0, layoutComponents.length)}
 {:else if PageComponent}
 	<PageComponent data={{ ...pageData, params: routeParams }} form={formData} />
 {:else}
 	<p>Loading...</p>
 {/if}
 
-{#snippet renderLayout(index: number)}
+{#snippet renderLayout(index: number, leafDepth: number)}
 	{@const Layout = layoutComponents[index]}
 	{@const data = layoutData[index] ?? {}}
 
-	{#if index < layoutComponents.length - 1}
+	{#if index < leafDepth - 1}
 		<Layout {data}>
-			{@render renderLayout(index + 1)}
+			{@render renderLayout(index + 1, leafDepth)}
 		</Layout>
 	{:else}
 		<Layout {data}>
-			{#if PageComponent}
+			{#if ErrorComponent}
+				<ErrorComponent {...errorProps ?? {}} />
+			{:else if PageComponent}
 				<PageComponent data={{ ...pageData, params: routeParams }} form={formData} />
 			{:else}
 				<p>Loading...</p>

package/src/core/client/appState.svelte.ts

@@ -15,6 +15,12 @@ class AppState {
 	layoutData = $state<Record<string, any>[]>([]);
 	routeParams = $state<Record<string, string>>({});
 	form = $state<any>(null);
+	// Nested-error boundary state — set when a client navigation hits an
+	// error and a matching +error.svelte is found. Cleared on every
+	// successful navigation in App.svelte.
+	errorComponent = $state<any>(null);
+	errorProps = $state<{ error: { status: number; message: string } } | null>(null);
+	errorDepth = $state<number | null>(null);
 }
 
 export const appState = new AppState();

package/src/core/dev.ts

@@ -163,7 +163,7 @@ function scheduleBuild() {
 // Owns the SSE connection so it survives app server restarts.
 // All other requests are proxied to the app server.
 
-Bun.serve({
+const devServer = Bun.serve({
 	port: DEV_PORT,
 	idleTimeout: 255,
 	async fetch(req) {
@@ -242,7 +242,7 @@ function isGenerated(path: string): boolean {
 	return GENERATED.some((g) => path.startsWith(g));
 }
 
-watch(join(process.cwd(), "src"), { recursive: true }, (_event, filename) => {
+const srcWatcher = watch(join(process.cwd(), "src"), { recursive: true }, (_event, filename) => {
 	if (!filename) return;
 	const abs = join(process.cwd(), "src", filename);
 	if (isGenerated(abs)) return;
@@ -257,7 +257,7 @@ watch(join(process.cwd(), "src"), { recursive: true }, (_event, filename) => {
 
 const ENV_FILES = new Set([".env", ".env.local", ".env.development", ".env.development.local"]);
 
-watch(process.cwd(), { recursive: false }, (_event, filename) => {
+const envWatcher = watch(process.cwd(), { recursive: false }, (_event, filename) => {
 	if (!filename || !ENV_FILES.has(filename)) return;
 	console.log(`[watch] env changed: ${filename}`);
 	reloadEnv();
@@ -274,14 +274,23 @@ console.log("👀 Watching src/ for changes...\n");
 
 let shuttingDown = false;
 async function shutdown() {
-	if (shuttingDown) process.exit(130);
+	if (shuttingDown) return; // re-entry from process-group signals or impatient ^C — drain is already running
 	shuttingDown = true;
 	intentionalKill = true;
+
+	if (buildTimer) clearTimeout(buildTimer);
+	srcWatcher.close();
+	envWatcher.close();
+	devServer.stop(true); // closes SSE conns → abort listeners clear ping intervals
+
 	if (appProcess) {
 		appProcess.kill("SIGTERM");
 		await Promise.race([appProcess.exited, Bun.sleep(2_500)]);
 	}
-	process.exit(0);
+
+	// Safety net: if any stray handle still holds the loop, force clean exit.
+	// .unref() so the timer itself doesn't keep the loop alive when drain succeeds.
+	setTimeout(() => process.exit(0), 1_500).unref();
 }
 
 process.on("SIGINT", shutdown);

package/src/core/errorMatch.ts

@@ -0,0 +1,33 @@
+// ─── Nested Error-Page Matcher ────────────────────────────
+// Picks the deepest +error.svelte boundary that protects the failing
+// code. Shared by SSR (renderer.ts) and CSR (App.svelte) so client
+// and server agree on which boundary catches a thrown error.
+//
+// Catch rules (SvelteKit-compatible):
+//   - "page"   origin: error in +page / +page.server at depth = layouts.length
+//              → caught by deepest entry where `depth ≤ errorDepth`.
+//   - "layout" origin: error in +layout.server (or layout render) at depth L
+//              → caught by deepest entry where `depth < errorDepth`. An error
+//              page in the same dir as the failing layout cannot catch its own
+//              layout — it would render *inside* the broken layout.
+
+export type ErrorOrigin = "page" | "layout";
+
+export interface ErrorPageEntry<L = unknown> {
+	loader: L;
+	depth: number;
+}
+
+export function pickErrorPage<L>(
+	errorPages: readonly ErrorPageEntry<L>[],
+	errorDepth: number,
+	origin: ErrorOrigin,
+): ErrorPageEntry<L> | null {
+	let best: ErrorPageEntry<L> | null = null;
+	for (const ep of errorPages) {
+		const ok = origin === "page" ? ep.depth <= errorDepth : ep.depth < errorDepth;
+		if (!ok) continue;
+		if (!best || ep.depth > best.depth) best = ep;
+	}
+	return best;
+}

package/src/core/renderer.ts

@@ -4,6 +4,7 @@ import { findMatch } from "./matcher.ts";
 import { serverRoutes, errorPage } from "bosia:routes";
 import type { Cookies } from "./hooks.ts";
 import { HttpError, Redirect } from "./errors.ts";
+import { pickErrorPage, type ErrorOrigin } from "./errorMatch.ts";
 import App from "./client/App.svelte";
 import {
 	buildHtml,
@@ -107,6 +108,28 @@ function makeFetch(req: Request, url: URL) {
 	};
 }
 
+// ─── Error Context Stamping ──────────────────────────────
+// Annotate an HttpError with the layout depth and origin where it was
+// thrown, plus the partial layoutData accumulated so far. The data
+// endpoint forwards this to the client; the SSR catch sites use it to
+// render the right nested boundary inside the right layout chain.
+
+function stampErrorContext(
+	err: HttpError,
+	depth: number,
+	origin: ErrorOrigin,
+	partialLayoutData: Record<string, any>[],
+): void {
+	const e = err as HttpError & {
+		errorDepth?: number;
+		errorOrigin?: ErrorOrigin;
+		partialLayoutData?: Record<string, any>[];
+	};
+	e.errorDepth ??= depth;
+	e.errorOrigin ??= origin;
+	e.partialLayoutData ??= [...partialLayoutData];
+}
+
 // ─── Route Data Loader ───────────────────────────────────
 // Runs layout + page server loaders for a given URL.
 // Used by both SSR and the /__bosia/data JSON endpoint.
@@ -143,10 +166,16 @@ export async function loadRouteData(
 					)) ?? {};
 			}
 		} catch (err) {
-			if (err instanceof HttpError || err instanceof Redirect) throw err;
+			if (err instanceof Redirect) throw err;
+			if (err instanceof HttpError) {
+				stampErrorContext(err, ls.depth, "layout", layoutData);
+				throw err;
+			}
 			if (isDev) console.error("Layout server load error:", err);
 			else console.error("Layout server load error:", (err as Error).message ?? err);
-			throw new HttpError(500, "Internal Server Error");
+			const wrapped = new HttpError(500, "Internal Server Error");
+			stampErrorContext(wrapped, ls.depth, "layout", layoutData);
+			throw wrapped;
 		}
 	}
 
@@ -181,10 +210,16 @@ export async function loadRouteData(
 					)) ?? {};
 			}
 		} catch (err) {
-			if (err instanceof HttpError || err instanceof Redirect) throw err;
+			if (err instanceof Redirect) throw err;
+			if (err instanceof HttpError) {
+				stampErrorContext(err, route.layoutModules.length, "page", layoutData);
+				throw err;
+			}
 			if (isDev) console.error("Page server load error:", err);
 			else console.error("Page server load error:", (err as Error).message ?? err);
-			throw new HttpError(500, "Internal Server Error");
+			const wrapped = new HttpError(500, "Internal Server Error");
+			stampErrorContext(wrapped, route.layoutModules.length, "page", layoutData);
+			throw wrapped;
 		}
 	}
 
@@ -244,7 +279,7 @@ export async function renderSSRStream(
 			return Response.redirect(err.location, err.status);
 		}
 		if (err instanceof HttpError) {
-			return renderErrorPage(err.status, err.message, url, req);
+			return renderErrorPage(err.status, err.message, url, req, route);
 		}
 		if (isDev) console.error("Metadata load error:", err);
 		else console.error("Metadata load error:", (err as Error).message ?? err);
@@ -266,10 +301,26 @@ export async function renderSSRStream(
 		]);
 	} catch (err) {
 		if (err instanceof Redirect) return Response.redirect(err.location, err.status);
-		if (err instanceof HttpError) return renderErrorPage(err.status, err.message, url, req);
+		if (err instanceof HttpError) {
+			const e = err as HttpError & {
+				errorDepth?: number;
+				errorOrigin?: ErrorOrigin;
+				partialLayoutData?: Record<string, any>[];
+			};
+			return renderErrorPage(
+				err.status,
+				err.message,
+				url,
+				req,
+				route,
+				e.errorDepth,
+				e.errorOrigin,
+				e.partialLayoutData,
+			);
+		}
 		if (isDev) console.error("SSR load error:", err);
 		else console.error("SSR load error:", (err as Error).message ?? err);
-		return renderErrorPage(500, "Internal Server Error", url, req);
+		return renderErrorPage(500, "Internal Server Error", url, req, route);
 	}
 
 	if (!data) return renderErrorPage(404, "Not Found", url, req);
@@ -309,7 +360,17 @@ export async function renderSSRStream(
 	} catch (err) {
 		if (isDev) console.error("SSR render error:", err);
 		else console.error("SSR render error:", (err as Error).message ?? err);
-		return renderErrorPage(500, "Internal Server Error", url, req);
+		// Render-phase errors fall through to deepest boundary like a page error.
+		return renderErrorPage(
+			500,
+			"Internal Server Error",
+			url,
+			req,
+			route,
+			route.layoutModules.length,
+			"page",
+			data.layoutData,
+		);
 	}
 
 	// Pre-compute all chunks; pull-based stream gives Bun native backpressure.
@@ -411,18 +472,71 @@ export async function renderPageWithFormData(
 }
 
 // ─── Error Page Renderer ──────────────────────────────────
+// 1. If a route is known, try the nearest nested +error.svelte and render
+//    it inside the matching prefix of the layout chain.
+// 2. Otherwise fall back to the global root +error.svelte.
+// 3. Otherwise return a plain-text response.
 
 export async function renderErrorPage(
 	status: number,
 	message: string,
 	url: URL,
 	req: Request,
+	route?: any,
+	errorDepth?: number,
+	errorOrigin?: ErrorOrigin,
+	partialLayoutData?: Record<string, any>[],
 ): Promise<Response> {
+	// 1. Nested boundary
+	if (route && errorDepth !== undefined && route.errorPages?.length) {
+		const origin = errorOrigin ?? "page";
+		const picked = pickErrorPage<() => Promise<any>>(
+			route.errorPages as { loader: () => Promise<any>; depth: number }[],
+			errorDepth,
+			origin,
+		);
+		if (picked) {
+			try {
+				const K = picked.depth;
+				const [errorMod, layoutMods] = await Promise.all([
+					picked.loader(),
+					Promise.all(
+						route.layoutModules.slice(0, K).map((l: () => Promise<any>) => l()),
+					),
+				]);
+				const layoutData: Record<string, any>[] = [];
+				for (let i = 0; i < K; i++) layoutData.push(partialLayoutData?.[i] ?? {});
+				const { body, head } = render(App, {
+					props: {
+						ssrMode: true,
+						ssrLayoutComponents: layoutMods.map((m: any) => m.default),
+						ssrLayoutData: layoutData,
+						ssrErrorComponent: errorMod.default,
+						ssrErrorProps: { error: { status, message } },
+						ssrErrorDepth: K,
+					},
+				});
+				// csr=false: no client hydration on the error page itself.
+				const html = buildHtml(body, head, { status, message }, layoutData, false);
+				return compress(html, "text/html; charset=utf-8", req, status);
+			} catch (err) {
+				if (isDev) console.error("Nested error page render failed:", err);
+				else
+					console.error(
+						"Nested error page render failed:",
+						(err as Error).message ?? err,
+					);
+				// fall through to global / text fallback
+			}
+		}
+	}
+
+	// 2. Global root error page
 	if (errorPage) {
 		try {
 			const mod = await errorPage();
 			// Render the error component directly — NOT through App.svelte.
-			// App.svelte always remaps ssrPageData to a `data` prop, but +error.svelte
+			// App.svelte remaps ssrPageData to a `data` prop, but +error.svelte
 			// expects `error` as a direct prop: `let { error } = $props()`.
 			const { body, head } = render(mod.default, {
 				props: { error: { status, message } },

package/src/core/routeFile.ts

@@ -37,6 +37,7 @@ export function generateRoutesFile(manifest: RouteManifest): void {
 	lines.push("  pattern: string;");
 	lines.push("  page: () => Promise<any>;");
 	lines.push("  layouts: (() => Promise<any>)[];");
+	lines.push("  errorPages: { loader: () => Promise<any>; depth: number }[];");
 	lines.push("  hasServerData: boolean;");
 	lines.push('  trailingSlash: "never" | "always" | "ignore";');
 	lines.push("}> = [");
@@ -44,11 +45,18 @@ export function generateRoutesFile(manifest: RouteManifest): void {
 		const layoutImports = r.layouts
 			.map((l) => `() => import(${JSON.stringify(toImportPath(l))})`)
 			.join(", ");
+		const errorPageImports = r.errorPages
+			.map(
+				(ep) =>
+					`{ loader: () => import(${JSON.stringify(toImportPath(ep.path))}), depth: ${ep.depth} }`,
+			)
+			.join(", ");
 		const hasServerData = !!(r.pageServer || r.layoutServers.length > 0);
 		lines.push("  {");
 		lines.push(`    pattern: ${JSON.stringify(r.pattern)},`);
 		lines.push(`    page: () => import(${JSON.stringify(toImportPath(r.page))}),`);
 		lines.push(`    layouts: [${layoutImports}],`);
+		lines.push(`    errorPages: [${errorPageImports}],`);
 		lines.push(`    hasServerData: ${hasServerData},`);
 		lines.push(`    trailingSlash: ${JSON.stringify(r.trailingSlash)},`);
 		lines.push("  },");
@@ -62,6 +70,7 @@ export function generateRoutesFile(manifest: RouteManifest): void {
 	lines.push("  layoutModules: (() => Promise<any>)[];");
 	lines.push("  pageServer: (() => Promise<any>) | null;");
 	lines.push("  layoutServers: { loader: () => Promise<any>; depth: number }[];");
+	lines.push("  errorPages: { loader: () => Promise<any>; depth: number }[];");
 	lines.push('  trailingSlash: "never" | "always" | "ignore";');
 	lines.push('  scope: "public" | "private";');
 	lines.push("}> = [");
@@ -75,6 +84,12 @@ export function generateRoutesFile(manifest: RouteManifest): void {
 					`{ loader: () => import(${JSON.stringify(toImportPath(ls.path))}), depth: ${ls.depth} }`,
 			)
 			.join(", ");
+		const errorPageImports = r.errorPages
+			.map(
+				(ep) =>
+					`{ loader: () => import(${JSON.stringify(toImportPath(ep.path))}), depth: ${ep.depth} }`,
+			)
+			.join(", ");
 		lines.push("  {");
 		lines.push(`    pattern: ${JSON.stringify(r.pattern)},`);
 		lines.push(`    pageModule: () => import(${JSON.stringify(toImportPath(r.page))}),`);
@@ -83,6 +98,7 @@ export function generateRoutesFile(manifest: RouteManifest): void {
 			`    pageServer: ${r.pageServer ? `() => import(${JSON.stringify(toImportPath(r.pageServer))})` : "null"},`,
 		);
 		lines.push(`    layoutServers: [${layoutServerImports}],`);
+		lines.push(`    errorPages: [${errorPageImports}],`);
 		lines.push(`    trailingSlash: ${JSON.stringify(r.trailingSlash)},`);
 		lines.push(`    scope: ${JSON.stringify(r.scope)},`);
 		lines.push("  },");
@@ -138,6 +154,7 @@ function generateClientRoutesFile(
 	lines.push("  pattern: string;");
 	lines.push("  page: () => Promise<any>;");
 	lines.push("  layouts: (() => Promise<any>)[];");
+	lines.push("  errorPages: { loader: () => Promise<any>; depth: number }[];");
 	lines.push("  hasServerData: boolean;");
 	lines.push('  trailingSlash: "never" | "always" | "ignore";');
 	lines.push("}> = [");
@@ -145,11 +162,18 @@ function generateClientRoutesFile(
 		const layoutImports = r.layouts
 			.map((l) => `() => import(${JSON.stringify(toImportPath(l))})`)
 			.join(", ");
+		const errorPageImports = r.errorPages
+			.map(
+				(ep) =>
+					`{ loader: () => import(${JSON.stringify(toImportPath(ep.path))}), depth: ${ep.depth} }`,
+			)
+			.join(", ");
 		const hasServerData = !!(r.pageServer || r.layoutServers.length > 0);
 		lines.push("  {");
 		lines.push(`    pattern: ${JSON.stringify(r.pattern)},`);
 		lines.push(`    page: () => import(${JSON.stringify(toImportPath(r.page))}),`);
 		lines.push(`    layouts: [${layoutImports}],`);
+		lines.push(`    errorPages: [${errorPageImports}],`);
 		lines.push(`    hasServerData: ${hasServerData},`);
 		lines.push(`    trailingSlash: ${JSON.stringify(r.trailingSlash)},`);
 		lines.push("  },");

package/src/core/routeTypes.ts

@@ -34,8 +34,11 @@ function paramsForDir(dir: string): string[] {
 }
 
 export function generateRouteTypes(manifest: RouteManifest): void {
-	// Collect { dir → { pageServer?, layoutServer? } }
-	const dirs = new Map<string, { pageServer?: string; layoutServer?: string }>();
+	// Collect { dir → { pageServer?, layoutServer?, hasErrorPage? } }
+	const dirs = new Map<
+		string,
+		{ pageServer?: string; layoutServer?: string; hasErrorPage?: boolean }
+	>();
 
 	for (const route of manifest.pages) {
 		const pageDir = routeDirOf(route.page);
@@ -48,9 +51,17 @@ export function generateRouteTypes(manifest: RouteManifest): void {
 			if (!dirs.has(lsDir)) dirs.set(lsDir, {});
 			dirs.get(lsDir)!.layoutServer = ls.path;
 		}
+		for (const ep of route.errorPages ?? []) {
+			const epDir = routeDirOf(ep.path);
+			if (!dirs.has(epDir)) dirs.set(epDir, {});
+			dirs.get(epDir)!.hasErrorPage = true;
+		}
 	}
 
-	if (manifest.errorPage && !dirs.has(".")) dirs.set(".", {});
+	if (manifest.errorPage) {
+		if (!dirs.has(".")) dirs.set(".", {});
+		dirs.get(".")!.hasErrorPage = true;
+	}
 
 	for (const [dir, info] of dirs) {
 		// Path segments of the route dir (empty array for root ".")
@@ -98,7 +109,7 @@ export function generateRouteTypes(manifest: RouteManifest): void {
 		}
 		lines.push(`export type PageProps = { data: PageData };`);
 
-		if (dir === "." && manifest.errorPage) {
+		if (info.hasErrorPage) {
 			lines.push(``);
 			lines.push(`export type PageError = { status: number; message: string };`);
 			lines.push(`export type ErrorProps = { error: PageError };`);

package/src/core/scanner.ts

@@ -43,6 +43,7 @@ export function scanRoutes(): RouteManifest {
 		urlSegments: string[],
 		layoutChain: string[],
 		layoutServerChain: { path: string; depth: number }[],
+		errorPageChain: { path: string; depth: number }[],
 		inheritedTrailingSlash: TrailingSlash,
 		inheritedScope: "public" | "private",
 	) {
@@ -54,6 +55,7 @@ export function scanRoutes(): RouteManifest {
 		// Accumulate layouts for this level
 		const currentLayouts = [...layoutChain];
 		const currentLayoutServers = [...layoutServerChain];
+		const currentErrorPages = [...errorPageChain];
 		let currentTrailingSlash = inheritedTrailingSlash;
 
 		if (items.some((i) => i.isFile() && i.name === "+layout.svelte")) {
@@ -68,6 +70,14 @@ export function scanRoutes(): RouteManifest {
 			const ts = readTrailingSlash(join(ROUTES_DIR, layoutServerPath));
 			if (ts) currentTrailingSlash = ts;
 		}
+		if (items.some((i) => i.isFile() && i.name === "+error.svelte")) {
+			// 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"),
+				depth: currentLayouts.length,
+			});
+		}
 
 		// API route (+server.ts)
 		if (items.some((i) => i.isFile() && i.name === "+server.ts")) {
@@ -94,6 +104,7 @@ export function scanRoutes(): RouteManifest {
 				layouts: [...currentLayouts],
 				pageServer: pageServerFile,
 				layoutServers: [...currentLayoutServers],
+				errorPages: [...currentErrorPages],
 				trailingSlash: effectiveTs,
 				scope: inheritedScope,
 			});
@@ -116,13 +127,14 @@ export function scanRoutes(): RouteManifest {
 				isGroup ? [...urlSegments] : [...urlSegments, dirName],
 				currentLayouts,
 				currentLayoutServers,
+				currentErrorPages,
 				currentTrailingSlash,
 				childScope,
 			);
 		}
 	}
 
-	walk("", [], [], [], "never", "public");
+	walk("", [], [], [], [], "never", "public");
 
 	// 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

@@ -210,8 +210,16 @@ async function resolve(event: RequestEvent): Promise<Response> {
 				);
 			}
 			if (err instanceof HttpError) {
+				const e = err as HttpError & {
+					errorDepth?: number;
+					errorOrigin?: "page" | "layout";
+				};
 				return compress(
-					JSON.stringify({ error: err.message, status: err.status }),
+					JSON.stringify({
+						error: { status: err.status, message: err.message },
+						errorDepth: e.errorDepth ?? null,
+						errorOrigin: e.errorOrigin ?? null,
+					}),
 					"application/json",
 					request,
 					err.status,

package/src/core/types.ts

@@ -15,6 +15,13 @@ export interface PageRoute {
 	pageServer: string | null;
 	/** Chain of +layout.server.ts files root → leaf, with their layout depth */
 	layoutServers: { path: string; depth: number }[];
+	/**
+	 * Chain of +error.svelte files root → leaf. `depth` is the layout depth this
+	 * boundary protects: errors thrown by code at depth ≥ `depth` (page) or
+	 * depth > `depth` (layout) are caught by this page. Depth 0 = wrapped by no
+	 * layouts; depth N = wrapped by layouts[0..N-1].
+	 */
+	errorPages: { path: string; depth: number }[];
 	/** Effective trailing-slash mode (page wins over layout chain). Defaults to "never". */
 	trailingSlash: TrailingSlash;
 	/**