bosia 0.5.7 → 0.5.9

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bosia",
-	"version": "0.5.7",
+	"version": "0.5.9",
 	"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/appHtml.ts

@@ -0,0 +1,106 @@
+import { existsSync, readFileSync } from "fs";
+import { join } from "path";
+
+// ─── Types ────────────────────────────────────────────────
+
+export type AppHtmlSegments = {
+	headOpen: string;
+	headClose: string;
+	tail: string;
+	hasCustomFavicon: boolean;
+};
+
+// ─── Cached Singleton ─────────────────────────────────────
+
+let cachedSegments: AppHtmlSegments | undefined;
+
+// ─── Parse & Validate ─────────────────────────────────────
+
+export function loadAppHtmlTemplate(cwd: string = process.cwd()): AppHtmlSegments {
+	const templatePath = join(cwd, "src", "app.html");
+
+	if (!existsSync(templatePath)) {
+		throw new Error(
+			`src/app.html is required but not found. Create src/app.html with %bosia.head% and %bosia.body% placeholders.`,
+		);
+	}
+
+	let template = readFileSync(templatePath, "utf-8");
+
+	// Replace static placeholders at parse time
+	template = replaceStaticPlaceholders(template);
+
+	// Validate required placeholders
+	const missingPlaceholders: string[] = [];
+	if (!template.includes("%bosia.head%")) missingPlaceholders.push("%bosia.head%");
+	if (!template.includes("%bosia.body%")) missingPlaceholders.push("%bosia.body%");
+
+	if (missingPlaceholders.length > 0) {
+		throw new Error(
+			`src/app.html is missing required placeholder(s): ${missingPlaceholders.join(", ")}. ` +
+				`Both %bosia.head% and %bosia.body% must be present.`,
+		);
+	}
+
+	// Split into segments
+	const [headOpen, rest1] = template.split("%bosia.head%", 2);
+	const [headClose, tail] = rest1.split("%bosia.body%", 2);
+
+	// Check for custom favicon
+	const hasCustomFavicon = headOpen.includes('rel="icon"');
+
+	return {
+		headOpen,
+		headClose,
+		tail,
+		hasCustomFavicon,
+	};
+}
+
+function replaceStaticPlaceholders(template: string): string {
+	// Replace %bosia.assets% with BOSIA_ASSETS_BASE env var
+	const assetsBase = process.env.BOSIA_ASSETS_BASE || "";
+	template = template.replaceAll("%bosia.assets%", assetsBase);
+
+	// Replace %bosia.env.PUBLIC_FOO% with process.env.PUBLIC_FOO
+	template = template.replace(/%bosia\.env\.(PUBLIC_[A-Z0-9_]+)%/g, (_match, key: string) => {
+		return process.env[key] ?? "";
+	});
+
+	return template;
+}
+
+// ─── Cached Getter ────────────────────────────────────────
+
+export function getAppHtmlSegments(cwd: string = process.cwd()): AppHtmlSegments {
+	if (cachedSegments !== undefined) {
+		return cachedSegments;
+	}
+	cachedSegments = loadAppHtmlTemplate(cwd);
+	return cachedSegments;
+}
+
+// ─── Cache Invalidation ───────────────────────────────────
+
+export function invalidateAppHtmlCache(): void {
+	cachedSegments = undefined;
+}
+
+// ─── Runtime Interpolation ────────────────────────────────
+
+export function interpolateSegment(
+	segment: string,
+	vars: { nonce?: string; lang?: string },
+): string {
+	let result = segment;
+
+	if (vars.lang) {
+		result = result.replaceAll("%bosia.lang%", vars.lang);
+	}
+
+	if (vars.nonce) {
+		result = result.replaceAll("%bosia.nonce%", vars.nonce);
+	}
+
+	return result;
+}

package/src/core/build.ts

@@ -5,13 +5,14 @@ import { scanRoutes } from "./scanner.ts";
 import { generateRoutesFile } from "./routeFile.ts";
 import { generateRouteTypes, ensureRootDirs } from "./routeTypes.ts";
 import { makeBosiaPlugin } from "./plugin.ts";
-import { makeBosiaSvelteCompiler } from "./svelteCompiler.ts";
+import { makeBosiaSvelteCompiler, svelteMapCache } from "./svelteCompiler.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 { loadPlugins } from "./config.ts";
 import type { BuildContext } from "./types/plugin.ts";
+import { loadAppHtmlTemplate } from "./appHtml.ts";
 
 // Resolved from this file's location inside the bosia package
 const CORE_DIR = import.meta.dir;
@@ -79,6 +80,20 @@ if (manifest.apis.length > 0) {
 	}
 }
 
+// 1b. Load & validate src/app.html template (required)
+let appHtml: any;
+try {
+	appHtml = loadAppHtmlTemplate(process.cwd());
+	console.log(
+		"📄 Loaded src/app.html (favicon override: " +
+			(appHtml.hasCustomFavicon ? "yes" : "no") +
+			")",
+	);
+} catch (err) {
+	console.error(`❌ src/app.html validation failed:\n${(err as Error).message}`);
+	process.exit(1);
+}
+
 for (const p of userPlugins) {
 	if (p.build?.postScan) {
 		await p.build.postScan(manifest, buildCtx);
@@ -187,6 +202,18 @@ if (!serverResult.success) {
 	process.exit(1);
 }
 
+// Persist the per-file Svelte compile maps so the inspector's runtime stack
+// resolver can chain bundle-map → svelte-map to land on original source. We
+// cannot chain at bundle time because Bun's bundle maps reference intermediate
+// JS positions that are mostly absent from Svelte's sparse compile map —
+// post-build remapping nukes mappings. Instead we keep both maps separate and
+// do a two-stage lookup with `bias` interpolation in the resolver.
+if (!isProduction && svelteMapCache.size > 0) {
+	const entries: Record<string, unknown> = {};
+	for (const [k, v] of svelteMapCache) entries[k] = v;
+	writeFileSync(`${OUT_DIR}/svelte-maps.json`, JSON.stringify(entries));
+}
+
 // 6. Collect output files for dist/manifest.json
 const jsFiles: string[] = [];
 const cssFiles: string[] = [];

package/src/core/html.ts

@@ -2,6 +2,8 @@ import { existsSync, readFileSync } from "fs";
 import { getDeclaredEnvKeys } from "./env.ts";
 import { nonceAttr } from "./csp.ts";
 import { OUT_DIR } from "./paths.ts";
+import type { AppHtmlSegments } from "./appHtml.ts";
+import { interpolateSegment } from "./appHtml.ts";
 
 // ─── Dist Manifest ───────────────────────────────────────
 // Maps hashed filenames → script/link tags.
@@ -98,6 +100,7 @@ export function buildHtml(
 	pageDeps: any = null,
 	layoutDeps: any[] | null = null,
 	bodyEndExtras?: string[],
+	segments?: AppHtmlSegments,
 ): string {
 	const cssLinks = (distManifest.css ?? [])
 		.map((f: string) => `<link rel="stylesheet" href="/dist/client/${f}">`)
@@ -138,6 +141,31 @@ export function buildHtml(
 
 	const bodyEnd = bodyEndExtras?.length ? "\n  " + bodyEndExtras.join("\n  ") : "";
 
+	if (segments) {
+		const safeKey = safeLang(lang);
+		const headOpenInterpolated = interpolateSegment(segments.headOpen, {
+			lang: safeKey,
+			nonce,
+		});
+		const headCloseInterpolated = interpolateSegment(segments.headClose, { nonce });
+		const tailInterpolated = interpolateSegment(segments.tail, { nonce });
+		const faviconLine = segments.hasCustomFavicon
+			? ""
+			: `  <link rel="icon" type="image/svg+xml" href="/favicon.svg">\n`;
+
+		return (
+			headOpenInterpolated +
+			`\n  ${faviconLine}${cssLinks}\n` +
+			`  <link rel="stylesheet" href="/bosia-tw.css${cacheBust}">\n` +
+			`  <script${n}>try{var t=localStorage.getItem('theme');if(t==='dark'||(!t&&window.matchMedia('(prefers-color-scheme: dark)').matches))document.documentElement.classList.add('dark');else document.documentElement.classList.remove('dark')}catch(_){}</script>\n` +
+			`  ${fallbackTitle}${head}` +
+			headCloseInterpolated +
+			`\n${SPINNER}` +
+			`\n  <div id="app">${body}</div>${scripts}${bodyEnd}` +
+			tailInterpolated
+		);
+	}
+
 	return `<!DOCTYPE html>
 <html lang="${safeLang(lang)}">
 <head>
@@ -161,12 +189,31 @@ export function buildHtml(
 import type { Metadata } from "./hooks.ts";
 
 /** Chunk 1: everything from <!DOCTYPE> through CSS/modulepreload links (head still open) */
-export function buildHtmlShellOpen(lang?: string, nonce?: string): string {
+export function buildHtmlShellOpen(
+	lang?: string,
+	nonce?: string,
+	segments?: AppHtmlSegments,
+): string {
 	const key = safeLang(lang);
 	const n = nonceAttr(nonce);
 	const cssLinks = (distManifest.css ?? [])
 		.map((f: string) => `<link rel="stylesheet" href="/dist/client/${f}">`)
 		.join("\n  ");
+
+	if (segments) {
+		const headOpenInterpolated = interpolateSegment(segments.headOpen, { lang: key, nonce });
+		const faviconLine = segments.hasCustomFavicon
+			? ""
+			: `  <link rel="icon" type="image/svg+xml" href="/favicon.svg">\n`;
+		return (
+			headOpenInterpolated +
+			`\n  ${faviconLine}${cssLinks}\n` +
+			`  <link rel="stylesheet" href="/bosia-tw.css${cacheBust}">\n` +
+			`  <script${n}>try{var t=localStorage.getItem('theme');if(t==='dark'||(!t&&window.matchMedia('(prefers-color-scheme: dark)').matches))document.documentElement.classList.add('dark');else document.documentElement.classList.remove('dark')}catch(_){}</script>\n` +
+			`  <link rel="modulepreload" href="/dist/client/${distManifest.entry}${cacheBust}">`
+		);
+	}
+
 	return (
 		`<!DOCTYPE html>\n<html lang="${key}">\n<head>\n` +
 		`  <meta charset="UTF-8">\n` +
@@ -188,7 +235,11 @@ const SPINNER =
 	`@keyframes __bs__{to{transform:rotate(360deg)}}</style><i></i></div>`;
 
 /** Chunk 2: metadata tags + close </head> + open <body> + spinner */
-export function buildMetadataChunk(metadata: Metadata | null, headExtras?: string[]): string {
+export function buildMetadataChunk(
+	metadata: Metadata | null,
+	headExtras?: string[],
+	segments?: AppHtmlSegments,
+): string {
 	let out = "\n";
 	if (metadata) {
 		if (metadata.title) out += `  <title>${escapeHtml(metadata.title)}</title>\n`;
@@ -218,7 +269,14 @@ export function buildMetadataChunk(metadata: Metadata | null, headExtras?: strin
 			if (fragment) out += `  ${fragment}\n`;
 		}
 	}
-	out += `</head>\n<body>\n${SPINNER}`;
+
+	if (segments) {
+		const headCloseInterpolated = interpolateSegment(segments.headClose, {});
+		out += headCloseInterpolated + `\n${SPINNER}`;
+	} else {
+		out += `</head>\n<body>\n${SPINNER}`;
+	}
+
 	return out;
 }
 
@@ -246,6 +304,7 @@ export function buildHtmlTail(
 	nonce?: string,
 	pageDeps: any = null,
 	layoutDeps: any[] | null = null,
+	segments?: AppHtmlSegments,
 ): string {
 	const n = nonceAttr(nonce);
 	let out = `<script${n}>document.getElementById('__bs__').remove()</script>`;
@@ -279,7 +338,14 @@ export function buildHtmlTail(
 			if (fragment) out += `\n${fragment}`;
 		}
 	}
-	out += `\n</body>\n</html>`;
+
+	if (segments) {
+		const tailInterpolated = interpolateSegment(segments.tail, { nonce });
+		out += `\n${tailInterpolated}`;
+	} else {
+		out += `\n</body>\n</html>`;
+	}
+
 	return out;
 }
 

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

@@ -2,6 +2,7 @@ import { parse, compile } from "svelte/compiler";
 import MagicString from "magic-string";
 import { basename, relative } from "node:path";
 import type { BunPlugin } from "bun";
+import { svelteMapCache } from "../../svelteCompiler.ts";
 
 const VIRTUAL_NS = "bosia-inspector-css";
 
@@ -87,6 +88,21 @@ export interface InspectorBunPluginOptions {
 	dev: boolean;
 }
 
+// Svelte 5 dev compile emits named `function get()` / `function set($$value)`
+// expressions inside `$.bind_*` calls (for nicer `$inspect` stack traces). Bun's
+// bundler destructures `import * as $ from "svelte/internal/client"` into named
+// imports, so `$.get(search)` becomes plain `get(search)` — which collides with
+// the wrapping function name and recurses into itself → RangeError. Prod compile
+// uses anonymous arrow functions and is unaffected.
+//
+// Rename to `$$g` / `$$s` (3 chars — length-preserving so cached svelte source
+// map columns stay accurate). These names aren't present in svelte/internal/client.
+function fixBindShadow(code: string): string {
+	return code
+		.replace(/\bfunction get\(\)/g, () => "function $$g()")
+		.replace(/\bfunction set\(\$\$value\)/g, () => "function $$s($$value)");
+}
+
 const fnv = (s: string): string => {
 	let h = 2166136261;
 	for (let i = 0; i < s.length; i++) {
@@ -120,13 +136,37 @@ export function createInspectorBunPlugin(opts: InspectorBunPluginOptions): BunPl
 					cssHash: ({ css }) => `svelte-${fnv(css)}`,
 				});
 
-				let js = result.js.code;
-				// Skip empty CSS — multiple +page.svelte routes with no <style> would
-				// otherwise each emit an empty CSS chunk, all hashing to the same
-				// content → Bun fails with "Multiple files share the same output path".
-				// Also strip dots from basename: Bun's `[name]-[hash].[ext]` chunk
-				// naming treats the first `.` as the extension boundary, so
-				// `+page.svelte-…` collapses to `[name]="+page"` for every route.
+				// Store Svelte's compile-step map. Bun's bundler doesn't chain
+				// onLoad sourcemaps, so the final bundle map resolves stack frames
+				// to the post-svelte-compile JS intermediate (`$.next()` /
+				// `$.append()` calls) using the .svelte filename — line numbers
+				// land past EOF. The inspector's runtime resolver chases bundle
+				// map → this svelte map (with bias-interpolated lookup) to refine
+				// to original source. `injectLocs` only shifts column offsets
+				// inside HTML open tags, never script-block line numbers, so we
+				// accept the small column drift to skip a second map chain.
+				//
+				// Only cache for the client target — server (Bun) and client builds
+				// share `svelteMapCache` keyed by abs path, but their compile output
+				// line numbers differ. The resolver translates browser-side stack
+				// frames (delivered via SSE), which run client code.
+				if (dev && generate === "client" && result.js.map) {
+					const m =
+						typeof result.js.map === "string"
+							? JSON.parse(result.js.map)
+							: result.js.map;
+					svelteMapCache.set(args.path, m);
+				}
+
+				let js = dev ? fixBindShadow(result.js.code) : result.js.code;
+				// Inject component <style> blocks via runtime JS, not CSS chunks.
+				// Bun's `splitting: true` names CSS chunks after the importing JS
+				// chunk's `[name]`, not the virtual module's uid — so when several
+				// routes (e.g. multiple `+page.svelte`) transitively import the same
+				// styled component, each route emits its own CSS sidecar named
+				// `+page-<contentHash>.css`. Identical content → identical hash →
+				// "Multiple files share the same output path". Runtime injection
+				// avoids CSS chunking entirely.
 				if (result.css?.code?.trim() && generate !== "server") {
 					const safeBase = basename(args.path).replace(/\./g, "_");
 					const uid = `${safeBase}-${fnv(args.path)}-style.css`;
@@ -146,7 +186,10 @@ export function createInspectorBunPlugin(opts: InspectorBunPluginOptions): BunPl
 			build.onLoad({ filter: /.*/, namespace: VIRTUAL_NS }, (args) => {
 				const css = virtualCss.get(args.path) ?? "";
 				virtualCss.delete(args.path);
-				return { contents: css, loader: "css" };
+				const contents = css
+					? `(()=>{const s=document.createElement('style');s.textContent=${JSON.stringify(css)};document.head.appendChild(s);})();`
+					: "";
+				return { contents, loader: "js" };
 			});
 		},
 	};

package/src/core/plugins/inspector/sourcemap.ts

@@ -1,10 +1,37 @@
-import { TraceMap, originalPositionFor } from "@jridgewell/trace-mapping";
+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";
 
 const cache = new Map<string, TraceMap | null>();
 
+// Per-`.svelte` (absolute path) compile maps written by the build step. The
+// bundle map only resolves a stack frame to the post-svelte-compile JS
+// position labeled with the .svelte filename; a second lookup against this
+// map (with `bias: GREATEST_LOWER_BOUND` to interpolate sparse mappings)
+// translates that intermediate position to original source line/col.
+let svelteMaps: Map<string, TraceMap> | null = null;
+let svelteMapsLoaded = false;
+
+function loadSvelteMaps(): Map<string, TraceMap> | null {
+	if (svelteMapsLoaded) return svelteMaps;
+	svelteMapsLoaded = true;
+	try {
+		const p = pathResolve(process.cwd(), OUT_DIR, "svelte-maps.json");
+		if (!existsSync(p)) return null;
+		const raw = JSON.parse(readFileSync(p, "utf8")) as Record<string, unknown>;
+		svelteMaps = new Map();
+		for (const [absPath, m] of Object.entries(raw)) {
+			try {
+				svelteMaps.set(absPath, new TraceMap(m as never));
+			} catch {}
+		}
+		return svelteMaps;
+	} catch {
+		return null;
+	}
+}
+
 function loadMap(mapPath: string): TraceMap | null {
 	if (cache.has(mapPath)) return cache.get(mapPath)!;
 	try {
@@ -57,6 +84,39 @@ export function resolveFrame(
 	const pos = originalPositionFor(tm, { line, column: col });
 	if (!pos.source || pos.line == null) return null;
 	const abs = pathResolve(dirname(mp), pos.source);
+
+	// Bundle map points at the post-svelte-compile JS position labeled with the
+	// .svelte filename. Refine by chasing through the cached svelte compile map
+	// to the real source position. Svelte's map is sparse — a given line may
+	// only carry mappings starting at some column. Try the exact column first,
+	// then fall back to the rightmost mapping on the same line, so we never lose
+	// a frame just because the bundle's reported column lands in a gap.
+	if (abs.endsWith(".svelte") || abs.endsWith(".svelte.ts") || abs.endsWith(".svelte.js")) {
+		const maps = loadSvelteMaps();
+		const svelteMap = maps?.get(abs);
+		if (svelteMap) {
+			let refined = originalPositionFor(svelteMap, {
+				line: pos.line,
+				column: pos.column ?? 0,
+				bias: GREATEST_LOWER_BOUND,
+			});
+			if (!refined.source) {
+				refined = originalPositionFor(svelteMap, {
+					line: pos.line,
+					column: Number.MAX_SAFE_INTEGER,
+					bias: GREATEST_LOWER_BOUND,
+				});
+			}
+			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 };
+			}
+		}
+	}
+
 	const rel = abs.startsWith(process.cwd() + "/") ? abs.slice(process.cwd().length + 1) : abs;
 	return { file: rel, line: pos.line, col: pos.column ?? 1 };
 }

package/src/core/renderer.ts

@@ -20,6 +20,8 @@ import type { Metadata } from "./hooks.ts";
 import { loadPlugins } from "./config.ts";
 import { reportDevErrorFromCatch } from "./devErrorReport.ts";
 import type { BosiaPlugin, RenderContext } from "./types/plugin.ts";
+import { getAppHtmlSegments } from "./appHtml.ts";
+import type { AppHtmlSegments } from "./appHtml.ts";
 
 // Plugins are loaded once per process at module init via top-level await elsewhere
 // (server.ts), but renderer is also reachable from build/prerender contexts where
@@ -99,6 +101,11 @@ if (INTERNAL_HOSTS.size > 0) {
 	console.log(`🍪 Internal hosts (cookies forwarded): ${[...INTERNAL_HOSTS].join(", ")}`);
 }
 
+// ─── App HTML Template ───────────────────────────────────
+// Required; loaded once per process; cached singleton with invalidation for HMR
+
+const appHtmlSegments: AppHtmlSegments = getAppHtmlSegments();
+
 // ─── Session-Aware Fetch ─────────────────────────────────
 // Passed to load() functions so they can call internal APIs with the
 // current user's cookies automatically forwarded. Cookie is attached
@@ -607,8 +614,8 @@ export async function renderSSRStream(
 			);
 		}
 		const html =
-			buildHtmlShellOpen(metadata?.lang, nonce) +
-			buildMetadataChunk(metadata, headExtras) +
+			buildHtmlShellOpen(metadata?.lang, nonce, appHtmlSegments) +
+			buildMetadataChunk(metadata, headExtras, appHtmlSegments) +
 			buildHtmlTail(
 				"",
 				"",
@@ -621,6 +628,7 @@ export async function renderSSRStream(
 				nonce,
 				data.pageDeps,
 				data.layoutDeps,
+				appHtmlSegments,
 			);
 		return new Response(html, {
 			headers: { "Content-Type": "text/html; charset=utf-8" },
@@ -659,8 +667,8 @@ export async function renderSSRStream(
 
 	// Pre-compute all chunks; pull-based stream gives Bun native backpressure.
 	const chunks: Uint8Array[] = [
-		enc.encode(buildHtmlShellOpen(metadata?.lang, nonce)),
-		enc.encode(buildMetadataChunk(metadata, headExtras)),
+		enc.encode(buildHtmlShellOpen(metadata?.lang, nonce, appHtmlSegments)),
+		enc.encode(buildMetadataChunk(metadata, headExtras, appHtmlSegments)),
 		enc.encode(
 			buildHtmlTail(
 				body,
@@ -674,6 +682,7 @@ export async function renderSSRStream(
 				nonce,
 				data.pageDeps,
 				data.layoutDeps,
+				appHtmlSegments,
 			),
 		),
 	];
@@ -781,6 +790,8 @@ export async function renderPageWithFormData(
 			nonce,
 			data.pageDeps,
 			data.layoutDeps,
+			undefined,
+			appHtmlSegments,
 		);
 		return compress(html, "text/html; charset=utf-8", req, status);
 	}
@@ -808,6 +819,8 @@ export async function renderPageWithFormData(
 		nonce,
 		data.pageDeps,
 		data.layoutDeps,
+		undefined,
+		appHtmlSegments,
 	);
 	return compress(html, "text/html; charset=utf-8", req, status);
 }
@@ -887,6 +900,7 @@ export async function renderErrorPage(
 					null,
 					null,
 					bodyEndExtras,
+					appHtmlSegments,
 				);
 				return compress(html, "text/html; charset=utf-8", req, status);
 			} catch (err) {
@@ -924,6 +938,7 @@ export async function renderErrorPage(
 				null,
 				null,
 				bodyEndExtras,
+				appHtmlSegments,
 			);
 			return compress(html, "text/html; charset=utf-8", req, status);
 		} catch (err) {

package/src/core/svelteCompiler.ts

@@ -3,6 +3,29 @@ import type { BunPlugin } from "bun";
 
 const svelteHash = (s: string) => Bun.hash(s, 5381).toString(36);
 
+// Bun's bundler does not chain sourcemaps from `onLoad` results, so the final
+// bundle map points at the compiled svelte output (e.g. `$.next()`) using the
+// .svelte filename — runtime stacks resolve to nonsense line numbers past EOF.
+// We capture each per-file svelte compile map here, keyed by absolute source
+// path; `remapBundleSourcemaps()` reads these after `Bun.build` and rewrites
+// the output `.map` files to chain back to original source positions.
+export const svelteMapCache = new Map<string, unknown>();
+
+// Svelte 5 dev compile emits named `function get()` / `function set($$value)`
+// expressions inside `$.bind_*` calls (for nicer `$inspect` stack traces). Bun's
+// bundler destructures `import * as $ from "svelte/internal/client"` into named
+// imports, so `$.get(search)` becomes plain `get(search)` — which collides with
+// the wrapping function name and recurses into itself → RangeError. Prod compile
+// uses anonymous arrow functions and is unaffected.
+//
+// Rename to `$$g` / `$$s` (3 chars — length-preserving so cached svelte source
+// map columns stay accurate). These names aren't present in svelte/internal/client.
+function fixBindShadow(code: string): string {
+	return code
+		.replace(/\bfunction get\(\)/g, () => "function $$g()")
+		.replace(/\bfunction set\(\$\$value\)/g, () => "function $$s($$value)");
+}
+
 export function makeBosiaSvelteCompiler(target: "browser" | "bun"): BunPlugin {
 	const generate = target === "browser" ? "client" : "server";
 	const dev = process.env.NODE_ENV !== "production";
@@ -25,7 +48,19 @@ export function makeBosiaSvelteCompiler(target: "browser" | "bun"): BunPlugin {
 					cssHash: ({ css }) => `svelte-${svelteHash(css)}`,
 					filename: args.path,
 				});
-				return { contents: result.js.code, loader: "ts" };
+				// Only the client target's map is useful to the inspector's runtime
+				// resolver — browser-side stack frames are what we need to translate.
+				// Server (Bun) compile output has different line numbers and would
+				// clobber the client entry under the same cache key.
+				if (dev && target === "browser" && result.js.map) {
+					const m =
+						typeof result.js.map === "string"
+							? JSON.parse(result.js.map)
+							: result.js.map;
+					svelteMapCache.set(args.path, m);
+				}
+				const contents = dev ? fixBindShadow(result.js.code) : result.js.code;
+				return { contents, loader: "ts" };
 			});
 
 			build.onLoad({ filter: /\.svelte\.[tj]s$/ }, async (args) => {
@@ -38,6 +73,13 @@ export function makeBosiaSvelteCompiler(target: "browser" | "bun"): BunPlugin {
 					dev,
 					filename: args.path,
 				});
+				if (dev && target === "browser" && result.js.map) {
+					const m =
+						typeof result.js.map === "string"
+							? JSON.parse(result.js.map)
+							: result.js.map;
+					svelteMapCache.set(args.path, m);
+				}
 				return { contents: result.js.code, loader: "js" };
 			});
 		},

package/templates/default/src/app.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="%bosia.lang%">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		%bosia.head%
+	</head>
+	<body>
+		%bosia.body%
+	</body>
+</html>

package/templates/demo/src/app.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="%bosia.lang%" data-theme="neutral">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		%bosia.head%
+	</head>
+	<body>
+		%bosia.body%
+	</body>
+</html>

package/templates/todo/src/app.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="%bosia.lang%">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		%bosia.head%
+	</head>
+	<body>
+		%bosia.body%
+	</body>
+</html>