bosia 0.9.0 → 0.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bosia",
-	"version": "0.9.0",
+	"version": "0.9.2",
 	"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/basePath.ts

@@ -52,27 +52,61 @@ const ROOT_ABSOLUTE_ATTR = /\b(href|src|action|formaction)=("|')(\/(?!\/)[^"']*)
 // error, so this one is easy to miss.
 const CSS_URL_ROOT = /(url\(\s*(?:"|'|'|["'])?)(\/(?!\/)[^)"'&\s]*)/gi;
 
+// Responsive image candidates. Each is "url" plus an optional `2x` / `640w`
+// descriptor, comma-separated, so the value needs splitting before `withBase`
+// can see a path.
+const SRCSET_ATTR = /\b(srcset|imagesrcset)=("|')([^"']*)\2/gi;
+
+// Leading whitespace + the url token of one candidate; the descriptor that may
+// follow is left exactly as written.
+const SRCSET_CANDIDATE = /^(\s*)(\S+)/;
+
+/**
+ * Rebase every candidate url in one `srcset` value.
+ *
+ * A `data:` URI can contain commas of its own (base64 padding aside, any
+ * `text/plain,a,b` does), and splitting on those would shred it. Nothing
+ * root-absolute can live inside a data URI anyway, so the whole value is left
+ * alone when one appears — split on top-level commas only if an app ever mixes
+ * a data URI with a root-absolute candidate in the same attribute.
+ */
+function rebaseSrcset(base: string, value: string): string {
+	if (value.includes("data:")) return value;
+	return value
+		.split(",")
+		.map((candidate) =>
+			candidate.replace(
+				SRCSET_CANDIDATE,
+				(_m, space: string, url: string) => space + withBase(base, url),
+			),
+		)
+		.join(",");
+}
+
 /**
- * Rewrite root-absolute `href`/`src`/`action` in rendered markup so an app that
- * writes `<a href="/masuk">` keeps working under a base with no code change.
+ * Rewrite root-absolute `href`/`src`/`action`/`srcset` in rendered markup so an
+ * app that writes `<a href="/masuk">` keeps working under a base with no code
+ * change.
  *
  * Only ever called on the SSR'd body and head, never on the JSON data islands —
  * those carry loader output, and a blind rewrite there would corrupt any string
  * that merely looked like a path.
- *
- * Does not touch `srcset` — comma-separated candidates with descriptors, and
- * nothing in the framework emits one root-absolute. An app that does needs
- * `base` from "bosia".
  */
 export function rebaseHtmlAttrs(base: string, html: string): string {
 	if (!base) return html;
 	return rebaseCssUrls(
 		base,
-		html.replace(
-			ROOT_ABSOLUTE_ATTR,
-			(_match, attr: string, quote: string, path: string) =>
-				`${attr}=${quote}${withBase(base, path)}${quote}`,
-		),
+		html
+			.replace(
+				ROOT_ABSOLUTE_ATTR,
+				(_match, attr: string, quote: string, path: string) =>
+					`${attr}=${quote}${withBase(base, path)}${quote}`,
+			)
+			.replace(
+				SRCSET_ATTR,
+				(_match, attr: string, quote: string, value: string) =>
+					`${attr}=${quote}${rebaseSrcset(base, value)}${quote}`,
+			),
 	);
 }
 

package/src/core/build.ts

@@ -11,6 +11,7 @@ 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 { currentBase } from "./appBase.ts";
 import { finalizeTailwindCss, TW_TEMP_BASENAME } from "./twHash.ts";
 import { loadPlugins } from "./config.ts";
 import type { BuildContext } from "./types/plugin.ts";
@@ -276,6 +277,9 @@ const distManifest = {
 		"hydrate.js",
 	serverEntry,
 	tw: twFile,
+	// The CSS urls and the client route table are baked in with this prefix.
+	// Stamped so the server can warn when it boots with a different one.
+	basePath: currentBase(),
 };
 writeFileSync(`${OUT_DIR}/manifest.json`, JSON.stringify(distManifest, null, 2));
 console.log(`✅ Client bundle: ${jsFiles.join(", ")}`);

package/src/core/client/base.ts

@@ -1,4 +1,4 @@
-import { normalizeBase } from "../basePath.ts";
+import { currentBase } from "../appBase.ts";
 
 /**
  * The prefix this app is mounted under, handed over by the inline script
@@ -9,11 +9,7 @@ import { normalizeBase } from "../basePath.ts";
  * table are all the same strings — a click pushes exactly the URL that was in
  * the link, and nothing rewrites a path after the user acts on it.
  *
- * It is needed only to build the `/__bosia/data` endpoint URL, where the mount
- * prefix sits in front of the endpoint rather than in front of the route.
+ * It is needed only to build the `/__bosia/data` and `/__bosia/sse` URLs, where
+ * the mount prefix sits in front of the endpoint rather than in front of the route.
  */
-export const base: string = normalizeBase(
-	typeof window !== "undefined"
-		? (window as unknown as { __BOSIA_BASE__?: string }).__BOSIA_BASE__
-		: "",
-);
+export const base: string = currentBase();

package/src/core/client/hydrate.ts

@@ -7,6 +7,7 @@ import { clientRoutes } from "bosia:routes";
 import { appState } from "./appState.svelte.ts";
 import { captureSnapshot, liveContext, type CacheEntry } from "./loaderCache.ts";
 import type { LoaderDeps } from "../hooks.ts";
+import { base } from "./base.ts";
 
 // Pre-compile route patterns into RegExp at startup (shared by App.svelte and router via module reference)
 compileRoutes(clientRoutes);
@@ -182,7 +183,7 @@ if (process.env.NODE_ENV !== "production") {
 	let retryDelay = 1000;
 
 	function connectSSE() {
-		const es = new EventSource("/__bosia/sse");
+		const es = new EventSource(`${base}/__bosia/sse`);
 
 		es.addEventListener("reload", () => {
 			console.log("[Bosia] Reloading...");

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

@@ -5,6 +5,8 @@
 import { findMatch, canonicalPathname } from "../matcher.ts";
 import { clientRoutes } from "bosia:routes";
 import { fireBeforeNavigate, type Navigation } from "./navListeners.ts";
+import { base } from "./base.ts";
+import { withBase } from "../basePath.ts";
 
 // Everything here is a real browser path, base and all. Under a BASE_PATH mount
 // the generated `clientRoutes` carry the prefix too, so an anchor's href, the
@@ -98,6 +100,19 @@ export const router = new (class Router {
 		const pathname = path.split("?")[0].split("#")[0];
 		const match = findMatch(clientRoutes, pathname);
 		if (!match) {
+			// Every nav — goto, link, form — falls through here before leaving the
+			// app. Under a mount, a path that would have matched *with* the prefix is
+			// an app-space path handed to goto(); warn instead of rewriting, since the
+			// shipped design is that the router converts nothing.
+			if (
+				process.env.NODE_ENV !== "production" &&
+				base &&
+				findMatch(clientRoutes, withBase(base, pathname))
+			) {
+				console.warn(
+					`[bosia] "${path}" matched no route and is leaving the app — it is mounted at "${base}". Use "${withBase(base, path)}".`,
+				);
+			}
 			window.location.href = path;
 			return;
 		}

package/src/core/html.ts

@@ -1,16 +1,24 @@
 import { existsSync, readFileSync } from "fs";
 import { getDeclaredEnvKeys } from "./env.ts";
 import { nonceAttr } from "./csp.ts";
-import { BASE_PATH, OUT_DIR } from "./paths.ts";
+import { OUT_DIR } from "./paths.ts";
 import { rebaseHtmlAttrs } from "./basePath.ts";
+import { currentBase } from "./appBase.ts";
 import type { AppHtmlSegments } from "./appHtml.ts";
 import { interpolateSegment } from "./appHtml.ts";
+import type { Metadata } from "./hooks.ts";
 
 // ─── Dist Manifest ───────────────────────────────────────
 // Maps hashed filenames → script/link tags.
 // Cached at startup; server restarts on rebuild in dev anyway.
 
-export const distManifest: { js: string[]; css: string[]; entry: string; tw?: string } = (() => {
+export const distManifest: {
+	js: string[];
+	css: string[];
+	entry: string;
+	tw?: string;
+	basePath?: string;
+} = (() => {
 	const p = `${OUT_DIR}/manifest.json`;
 	return existsSync(p)
 		? JSON.parse(readFileSync(p, "utf-8"))
@@ -23,10 +31,11 @@ const cacheBust = isDev ? `?v=${Date.now()}` : "";
 // Every URL the framework itself emits into the document, prefixed once here so
 // mounting under a BASE_PATH is not thirteen separate string edits. All four are
 // "" + the original path when no base is set.
-const DIST = `${BASE_PATH}/dist/client`;
-const TW_CSS = `${BASE_PATH}/bosia-tw.css`;
-const FAVICON = `${BASE_PATH}/favicon.svg`;
-const SSE = `${BASE_PATH}/__bosia/sse`;
+const B = currentBase();
+const DIST = `${B}/dist/client`;
+const TW_CSS = `${B}/bosia-tw.css`;
+const FAVICON = `${B}/favicon.svg`;
+const SSE = `${B}/__bosia/sse`;
 
 /**
  * Handed to the client bundle so its router strips the same prefix the server
@@ -34,8 +43,8 @@ const SSE = `${BASE_PATH}/__bosia/sse`;
  * root so a root-mounted app carries no extra bytes.
  */
 export function baseScript(nonce?: string): string {
-	return BASE_PATH
-		? `\n  <script${nonceAttr(nonce)}>window.__BOSIA_BASE__=${JSON.stringify(BASE_PATH)};</script>`
+	return B
+		? `\n  <script${nonceAttr(nonce)}>window.__BOSIA_BASE__=${JSON.stringify(B)};</script>`
 		: "";
 }
 
@@ -135,19 +144,25 @@ export function buildHtml(
 	layoutDeps: any[] | null = null,
 	bodyEndExtras?: string[],
 	segments?: AppHtmlSegments,
+	metadata?: Metadata | null,
 ): string {
 	// An app writes <a href="/masuk">; under a base the browser has to be handed
 	// /sso/masuk or it walks off this app entirely. Only the rendered markup is
 	// touched — never the JSON data islands below, whose strings are loader
 	// output and would be corrupted by a path rewrite.
-	body = rebaseHtmlAttrs(BASE_PATH, body);
-	head = rebaseHtmlAttrs(BASE_PATH, head);
+	body = rebaseHtmlAttrs(B, body);
+	head = rebaseHtmlAttrs(B, head);
 
 	const cssLinks = (distManifest.css ?? [])
 		.map((f: string) => `<link rel="stylesheet" href="${DIST}/${f}">`)
 		.join("\n  ");
 
-	const fallbackTitle = head.includes("<title>") ? "" : "<title>Bosia App</title>";
+	// 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.
+	const metaTags = rebaseHtmlAttrs(B, metadataTags(metadata ?? null));
+	const fallbackTitle =
+		metaTags.includes("<title>") || head.includes("<title>") ? "" : "<title>Bosia App</title>";
 
 	const n = nonceAttr(nonce);
 	const publicEnv = getPublicDynamicEnv();
@@ -198,7 +213,7 @@ export function buildHtml(
 			`\n  ${faviconLine}${cssLinks}\n` +
 			`  ${twCssLink()}\n` +
 			`  <script${n}>${THEME_INIT_JS}</script>\n` +
-			`  ${fallbackTitle}${head}` +
+			`  ${fallbackTitle}${metaTags}${head}` +
 			headCloseInterpolated +
 			(body ? "" : `\n${SPINNER}`) +
 			`\n  <div id="app">${body}</div>${scripts}${bodyEnd}` +
@@ -213,7 +228,7 @@ export function buildHtml(
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   ${fallbackTitle}
   <link rel="icon" type="image/svg+xml" href="${FAVICON}">
-  ${head}
+${metaTags}  ${head}
   ${cssLinks}
   ${twCssLink()}
   <script${n}>${THEME_INIT_JS}</script>
@@ -226,8 +241,6 @@ export function buildHtml(
 
 // ─── Streaming HTML Helpers ──────────────────────────────
 
-import type { Metadata } from "./hooks.ts";
-
 /** Chunk 1: everything from <!DOCTYPE> through CSS/modulepreload links (head still open) */
 export function buildHtmlShellOpen(
 	lang?: string,
@@ -274,6 +287,34 @@ const SPINNER =
 	`border-radius:50%;animation:__bs__ .8s linear infinite}` +
 	`@keyframes __bs__{to{transform:rotate(360deg)}}</style><i></i></div>`;
 
+/** The `metadata()` tags themselves, indented head-ready. Shared by the streaming
+ *  path (buildMetadataChunk) and the non-streaming one (buildHtml) so the two
+ *  renderers cannot drift on what `metadata()` emits. */
+export function metadataTags(metadata: Metadata | null): string {
+	if (!metadata) return "";
+	let out = "";
+	if (metadata.title) out += `  <title>${escapeHtml(metadata.title)}</title>\n`;
+	if (metadata.description) {
+		out += `  <meta name="description" content="${escapeAttr(metadata.description)}">\n`;
+	}
+	if (metadata.meta) {
+		for (const m of metadata.meta) {
+			const attrs = m.name
+				? `name="${escapeAttr(m.name)}"`
+				: `property="${escapeAttr(m.property ?? "")}"`;
+			out += `  <meta ${attrs} content="${escapeAttr(m.content)}">\n`;
+		}
+	}
+	if (metadata.link) {
+		for (const l of metadata.link) {
+			let attrs = `rel="${escapeAttr(l.rel)}" href="${escapeAttr(l.href)}"`;
+			if (l.hreflang) attrs += ` hreflang="${escapeAttr(l.hreflang)}"`;
+			out += `  <link ${attrs}>\n`;
+		}
+	}
+	return out;
+}
+
 /** Chunk 2: metadata tags + close </head> + open <body> + spinner */
 export function buildMetadataChunk(
 	metadata: Metadata | null,
@@ -281,29 +322,7 @@ export function buildMetadataChunk(
 	segments?: AppHtmlSegments,
 ): string {
 	let out = "\n";
-	if (metadata) {
-		if (metadata.title) out += `  <title>${escapeHtml(metadata.title)}</title>\n`;
-		if (metadata.description) {
-			out += `  <meta name="description" content="${escapeAttr(metadata.description)}">\n`;
-		}
-		if (metadata.meta) {
-			for (const m of metadata.meta) {
-				const attrs = m.name
-					? `name="${escapeAttr(m.name)}"`
-					: `property="${escapeAttr(m.property ?? "")}"`;
-				out += `  <meta ${attrs} content="${escapeAttr(m.content)}">\n`;
-			}
-		}
-		if (metadata.link) {
-			for (const l of metadata.link) {
-				let attrs = `rel="${escapeAttr(l.rel)}" href="${escapeAttr(l.href)}"`;
-				if (l.hreflang) attrs += ` hreflang="${escapeAttr(l.hreflang)}"`;
-				out += `  <link ${attrs}>\n`;
-			}
-		}
-	} else {
-		out += `  <title>Bosia App</title>\n`;
-	}
+	out += metadata ? metadataTags(metadata) : `  <title>Bosia App</title>\n`;
 	if (headExtras?.length) {
 		for (const fragment of headExtras) {
 			if (fragment) out += `  ${fragment}\n`;
@@ -319,7 +338,7 @@ export function buildMetadataChunk(
 
 	// All markup, no data islands — safe to rebase wholesale, which is what picks
 	// up an app's own headExtras (a canonical link, an og:image on a local file).
-	return rebaseHtmlAttrs(BASE_PATH, out);
+	return rebaseHtmlAttrs(B, out);
 }
 
 export function escapeHtml(s: string): string {
@@ -349,8 +368,8 @@ export function buildHtmlTail(
 	segments?: AppHtmlSegments,
 ): string {
 	// Same rebase as buildHtml — the streamed tail carries the identical markup.
-	body = rebaseHtmlAttrs(BASE_PATH, body);
-	head = rebaseHtmlAttrs(BASE_PATH, head);
+	body = rebaseHtmlAttrs(B, body);
+	head = rebaseHtmlAttrs(B, head);
 
 	const n = nonceAttr(nonce);
 	let out = `<script${n}>document.getElementById('__bs__').remove()</script>`;

package/src/core/paths.ts

@@ -1,6 +1,5 @@
 import { join, dirname } from "path";
 import { existsSync } from "fs";
-import { normalizeBase } from "./basePath.ts";
 
 // This file lives at src/core/paths.ts → package root is ../..
 const BOSIA_PKG_DIR = join(import.meta.dir, "..", "..");
@@ -34,15 +33,6 @@ export const BOSIA_NODE_PATH = ALL_NM.join(":");
 // `bun run build` (./dist) don't clobber each other.
 export const OUT_DIR = process.env.BOSIA_OUT_DIR ?? "./dist";
 
-/**
- * URL prefix the whole app is mounted under — `""` (origin root) unless
- * `BASE_PATH` says otherwise. Read once here so every consumer agrees; the
- * browser half gets the same value through `window.__BOSIA_BASE__`.
- *
- * Server-only: this module reaches for `fs`, so it never enters a client bundle.
- */
-export const BASE_PATH = normalizeBase(process.env.BASE_PATH);
-
 /** Find a binary from bosia's dependencies (handles hoisting) */
 export function resolveBosiaBin(name: string): string {
 	for (const nm of ALL_NM) {

package/src/core/prerender.ts

@@ -3,7 +3,8 @@ import { createServer } from "net";
 import { join } from "path";
 import type { RouteManifest, TrailingSlash } from "./types.ts";
 
-import { BASE_PATH, BOSIA_NODE_PATH, OUT_DIR } from "./paths.ts";
+import { BOSIA_NODE_PATH, OUT_DIR } from "./paths.ts";
+import { currentBase } from "./appBase.ts";
 
 /** Acquire an OS-assigned ephemeral port. Tiny TOCTOU race window; acceptable for build-time use. */
 export function getEphemeralPort(): Promise<number> {
@@ -187,7 +188,7 @@ export async function prerenderStaticRoutes(manifest: RouteManifest): Promise<vo
 		// The child inherits BASE_PATH, so it 404s anything outside the mount —
 		// including /_health. Prefix here and every fetch below follows; the files
 		// we write stay app-space, which is what the server looks them up by.
-		const base = `http://localhost:${port}${BASE_PATH}`;
+		const base = `http://localhost:${port}${currentBase()}`;
 		let ready = false;
 		const deadline = Date.now() + 10_000;
 		while (Date.now() < deadline) {

package/src/core/renderer.ts

@@ -509,6 +509,9 @@ 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 (isDev) console.error("Metadata load error:", err);
 		else console.error("Metadata load error:", (err as Error).message ?? err);
 		if (isDev) reportDevErrorFromCatch(err);
@@ -845,7 +848,9 @@ export async function renderSSRStream(
 
 // ─── Form Action Page Renderer ───────────────────────────
 // Re-runs load functions after a form action, renders with form data.
-// Uses non-streaming buildHtml so we can control the status code.
+// Uses non-streaming buildHtml so we can control the status code. Resolves
+// metadata() here too — the GET path's title, meta/link tags, lang and
+// metadata.data must survive a submit, or the page changes under the user.
 
 export async function renderPageWithFormData(
 	url: URL,
@@ -871,11 +876,36 @@ export async function renderPageWithFormData(
 			nonce,
 		);
 
-	const { route } = match;
+	const { route, params } = match;
+
+	// Serial, not parallel: metadata.data feeds the loader below.
+	let metadata: Metadata | null = null;
+	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) {
+			return renderErrorPage(
+				err.status,
+				err.message,
+				url,
+				req,
+				route,
+				undefined,
+				undefined,
+				undefined,
+				nonce,
+			);
+		}
+		if (isDev) console.error("Metadata load error:", err);
+		else console.error("Metadata load error:", (err as Error).message ?? err);
+		if (isDev) reportDevErrorFromCatch(err);
+		// Continue with null metadata — don't break the page for a metadata failure
+	}
 
 	// Load components + data in parallel
 	const [data, pageMod, layoutMods] = await Promise.all([
-		loadRouteData(url, locals, req, cookies, null, match),
+		loadRouteData(url, locals, req, cookies, metadata?.data ?? null, match),
 		route.pageModule(),
 		Promise.all(route.layoutModules.map((l: () => Promise<any>) => l())),
 	]);
@@ -893,6 +923,23 @@ export async function renderPageWithFormData(
 			nonce,
 		);
 
+	const renderCtx: RenderContext = {
+		request: req,
+		url,
+		route: { pattern: route.pattern },
+		metadata,
+	};
+	const [headExtras, bodyEndExtras] = await Promise.all([
+		pluginRenderFragments("head", renderCtx),
+		pluginRenderFragments("bodyEnd", renderCtx),
+	]);
+	// buildHtml has no headExtras slot; fold them in ahead of the SSR head, which
+	// is where buildMetadataChunk puts them on the streaming path.
+	const headWithExtras = (ssrHead: string) => {
+		const extras = headExtras.filter(Boolean);
+		return extras.length ? `${extras.join("\n  ")}\n  ${ssrHead}` : ssrHead;
+	};
+
 	// Form-action re-render always runs every loader (no client mask).
 	const layoutDataFull = (data.layoutData as Record<string, any>[]).map((d) => d ?? {});
 	const pageDataFull = data.pageData ?? {};
@@ -905,18 +952,19 @@ export async function renderPageWithFormData(
 		}
 		const html = buildHtml(
 			"",
-			"",
+			headWithExtras(""),
 			pageDataFull,
 			layoutDataFull,
 			true,
 			formData,
-			undefined,
+			metadata?.lang,
 			false,
 			nonce,
 			data.pageDeps,
 			data.layoutDeps,
-			undefined,
+			bodyEndExtras,
 			appHtmlSegments,
+			metadata,
 		);
 		return compress(html, "text/html; charset=utf-8", req, status, data.loaderHeaders);
 	}
@@ -934,18 +982,19 @@ export async function renderPageWithFormData(
 
 	const html = buildHtml(
 		body,
-		head,
+		headWithExtras(head),
 		pageDataFull,
 		layoutDataFull,
 		data.csr,
 		formData,
-		undefined,
+		metadata?.lang,
 		true,
 		nonce,
 		data.pageDeps,
 		data.layoutDeps,
-		undefined,
+		bodyEndExtras,
 		appHtmlSegments,
+		metadata,
 	);
 	return compress(html, "text/html; charset=utf-8", req, status, data.loaderHeaders);
 }
@@ -971,6 +1020,13 @@ export async function renderErrorPage(
 	// is dead bytes without a matching policy header.
 	if (!CSP_ENABLED) nonce = undefined;
 
+	// The route's own metadata() is deliberately NOT run here — the route may be
+	// what failed, and a 404 has no route at all. Synthesize a status title only
+	// when the error component didn't set one, so <svelte:head><title> in a custom
+	// +error.svelte still wins.
+	const errMeta = (head: string): Metadata | null =>
+		head.includes("<title>") ? null : { title: `${status} — ${message}` };
+
 	// Inspector overlay and other plugin bodyEnd fragments must be injected
 	// on error pages too — otherwise SSE never connects and runtime errors
 	// from the failing render are invisible in the UI.
@@ -978,7 +1034,7 @@ export async function renderErrorPage(
 		request: req,
 		url,
 		route: route ? { pattern: route.pattern } : { pattern: "" },
-		metadata: null,
+		metadata: errMeta(""),
 	};
 	const bodyEndExtras = await pluginRenderFragments("bodyEnd", renderCtx);
 
@@ -1024,6 +1080,7 @@ export async function renderErrorPage(
 					null,
 					bodyEndExtras,
 					appHtmlSegments,
+					errMeta(head),
 				);
 				return compress(html, "text/html; charset=utf-8", req, status);
 			} catch (err) {
@@ -1059,6 +1116,7 @@ export async function renderErrorPage(
 				null,
 				bodyEndExtras,
 				appHtmlSegments,
+				errMeta(head),
 			);
 			return compress(html, "text/html; charset=utf-8", req, status);
 		} catch (err) {

package/src/core/server.ts

@@ -21,10 +21,11 @@ import type { CsrfConfig } from "./csrf.ts";
 import { applyCorsVary, getCorsHeaders, handlePreflight } from "./cors.ts";
 import type { CorsConfig } from "./cors.ts";
 import { buildCspHeader, CSP_DIRECTIVES_TEMPLATE, CSP_ENABLED, generateNonce } from "./csp.ts";
-import { isDev, compress, isStaticPath } from "./html.ts";
+import { isDev, compress, isStaticPath, distManifest } from "./html.ts";
 import { dev500WithPlugins } from "./dev-500.ts";
-import { BASE_PATH, OUT_DIR } from "./paths.ts";
+import { OUT_DIR } from "./paths.ts";
 import { stripBase, withBase } from "./basePath.ts";
+import { currentBase } from "./appBase.ts";
 import { pidsOnPort } from "./port.ts";
 import { buildPrerenderManifest, buildStaticManifest, lookupStatic } from "./staticManifest.ts";
 import { dedup } from "./dedup.ts";
@@ -159,8 +160,17 @@ if (CSP_DIRECTIVES_TEMPLATE) {
 	console.log(`🔒 CSP: opt-in header active`);
 }
 
-if (BASE_PATH) {
-	console.log(`📍 Mounted under ${BASE_PATH} (BASE_PATH)`);
+if (currentBase()) {
+	console.log(`📍 Mounted under ${currentBase()} (BASE_PATH)`);
+}
+
+// The CSS urls and the client route table are baked in at build time, so a
+// build and the server running it have to agree. Older dist/ artifacts carry no
+// `basePath` field — stay quiet for those rather than warn about nothing.
+if (distManifest.basePath !== undefined && distManifest.basePath !== currentBase()) {
+	console.warn(
+		`⚠️  Built for BASE_PATH="${distManifest.basePath}" but running with "${currentBase()}" — CSS urls and the client route table are baked in and will not match.`,
+	);
 }
 
 // ─── Core Request Resolver ────────────────────────────────
@@ -640,7 +650,7 @@ async function resolve(event: RequestEvent): Promise<Response> {
 				// `path` is app-space — the base came off at the top of handleRequest.
 				// This Location goes back to the browser, so it has to be put back on,
 				// or a `trailingSlash: "always"` route 308s every request off the mount.
-				headers: { Location: withBase(BASE_PATH, canonical) + url.search + url.hash },
+				headers: { Location: withBase(currentBase(), canonical) + url.search + url.hash },
 			});
 		}
 	}
@@ -876,8 +886,9 @@ async function handleRequest(request: Request, url: URL): Promise<Response> {
 	// /_health and /__bosia tests below — works in app space, so the prefix comes
 	// off exactly once, here, before anything reads a pathname. A request that is
 	// not under the base was never this app's to answer.
-	if (BASE_PATH) {
-		const appPath = stripBase(BASE_PATH, url.pathname);
+	const base = currentBase();
+	if (base) {
+		const appPath = stripBase(base, url.pathname);
 		if (appPath === null) return new Response("Not Found", { status: 404 });
 		url.pathname = appPath;
 	}

package/src/core/twHash.ts

@@ -1,7 +1,7 @@
 import { readFileSync, renameSync, writeFileSync } from "fs";
 import { join, dirname } from "path";
 import { rebaseCssUrls } from "./basePath.ts";
-import { BASE_PATH } from "./paths.ts";
+import { currentBase } from "./appBase.ts";
 
 /** Temp filename Tailwind CLI writes to before the content-hash rename. */
 export const TW_TEMP_BASENAME = ".bosia-tw.build.css";
@@ -16,8 +16,13 @@ export function finalizeTailwindCss(tempPath: string): string {
 	// @font-face src or mask-image written as url(/fonts/…) resolves against the
 	// origin and would land outside the mount — silently, as a fallback font or a
 	// blank icon rather than an error.
-	if (BASE_PATH) {
-		const rebased = rebaseCssUrls(BASE_PATH, readFileSync(tempPath, "utf-8"));
+	//
+	// Read here, not at import: build.ts calls loadEnv() after its imports, so a
+	// BASE_PATH that lives in .env.production is not in process.env yet when this
+	// module loads.
+	const base = currentBase();
+	if (base) {
+		const rebased = rebaseCssUrls(base, readFileSync(tempPath, "utf-8"));
 		writeFileSync(tempPath, rebased);
 	}