bosia 0.4.3 → 0.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bosia",
-	"version": "0.4.3",
+	"version": "0.4.6",
 	"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/cli/add.ts

@@ -27,9 +27,11 @@ interface ComponentMeta {
 	npmDeps: Record<string, string>;
 }
 
-interface RegistryIndex {
+export interface RegistryIndex {
 	components: string[];
 	features: string[];
+	blocks?: string[];
+	themes?: string[];
 }
 
 // Track already-installed components within a session to avoid re-running deps
@@ -193,7 +195,7 @@ export function cn(...inputs: ClassValue[]) {
 }
 `;
 
-function ensureUtils() {
+export function ensureUtils() {
 	const utilsPath = join(process.cwd(), "src", "lib", "utils.ts");
 	if (!existsSync(utilsPath)) {
 		mkdirSync(dirname(utilsPath), { recursive: true });

package/src/cli/block.ts

@@ -0,0 +1,94 @@
+import { join, dirname } from "path";
+import { mkdirSync, writeFileSync, existsSync } from "fs";
+import * as p from "@clack/prompts";
+import {
+	resolveLocalRegistryOrExit,
+	readRegistryJSON,
+	readRegistryFile,
+	bunAdd,
+} from "./registry.ts";
+import { addComponent, initAddRegistry, ensureUtils } from "./add.ts";
+import { mergeFontImports } from "./fonts.ts";
+
+// ─── bun x bosia@latest add block <category>/<name> ──────
+// Installs a composed block into src/lib/blocks/<path>/.
+// Recursively installs primitive component dependencies and
+// optional Google Fonts @imports into app.css.
+
+interface BlockMeta {
+	name: string;
+	description: string;
+	category: string;
+	themes?: string[];
+	dependencies: string[]; // primitive component names
+	files: string[];
+	fonts?: Record<string, string>; // family → @import URL
+	npmDeps: Record<string, string>;
+}
+
+export async function runAddBlock(name: string | undefined, flags: string[] = []) {
+	if (!name || !name.includes("/")) {
+		console.error(
+			"❌ Please provide a block path.\n   Usage: bun x bosia@latest add block <category>/<name> [--local]",
+		);
+		process.exit(1);
+	}
+
+	const local = flags.includes("--local");
+	const registryRoot = local ? resolveLocalRegistryOrExit() : null;
+	if (local) console.log(`⬡ Using local registry: ${registryRoot}\n`);
+
+	await initAddRegistry(registryRoot);
+	ensureUtils();
+
+	console.log(`⬡ Installing block: ${name}\n`);
+
+	const meta = await readRegistryJSON<BlockMeta>(registryRoot, "blocks", name, "meta.json");
+
+	// 1. Install primitive dependencies first
+	for (const dep of meta.dependencies ?? []) {
+		await addComponent(dep, false);
+	}
+
+	// 2. Copy block files to src/lib/blocks/<path>/
+	const cwd = process.cwd();
+	const destDir = join(cwd, "src", "lib", "blocks", name);
+
+	if (existsSync(destDir)) {
+		const replace = await p.confirm({
+			message: `Block "${name}" already exists at src/lib/blocks/${name}/. Replace it?`,
+		});
+		if (p.isCancel(replace) || !replace) {
+			console.log(`   ⏭️  Skipped ${name}`);
+			return;
+		}
+	}
+
+	mkdirSync(destDir, { recursive: true });
+
+	for (const file of meta.files) {
+		const content = await readRegistryFile(registryRoot, "blocks", name, file);
+		const dest = join(destDir, file);
+		if (file.includes("/")) mkdirSync(dirname(dest), { recursive: true });
+		writeFileSync(dest, content, "utf-8");
+		console.log(`   ✍️  src/lib/blocks/${name}/${file}`);
+	}
+
+	// 3. Merge font @imports into app.css (idempotent)
+	if (meta.fonts && Object.keys(meta.fonts).length > 0) {
+		const cssPath = join(cwd, "src", "app.css");
+		if (existsSync(cssPath)) {
+			const added = mergeFontImports(cssPath, meta.fonts);
+			if (added.length > 0) {
+				console.log(`   🔤 Added fonts to app.css: ${added.join(", ")}`);
+			}
+		}
+	}
+
+	// 4. npm deps
+	if (meta.npmDeps && Object.keys(meta.npmDeps).length > 0) {
+		await bunAdd(cwd, meta.npmDeps);
+	}
+
+	console.log(`\n✅ ${name} installed at src/lib/blocks/${name}/`);
+}

package/src/cli/fonts.ts

@@ -0,0 +1,61 @@
+import { readFileSync, writeFileSync } from "fs";
+
+// ─── Font @import management for app.css ──────────────────
+// Merges Google-Fonts (or any) @import lines into app.css idempotently.
+// Each font URL is bracketed with a marker comment so we can detect and skip
+// duplicates without parsing real CSS.
+
+const MARK_PREFIX = "/* bosia-font:";
+
+export interface FontEntry {
+	[family: string]: string; // family → @import URL
+}
+
+/**
+ * Inserts `@import url("…");` lines for each font that is not already present.
+ * Returns the list of family names that were newly added (empty if no-op).
+ */
+export function mergeFontImports(cssPath: string, fonts: FontEntry): string[] {
+	const existing = readFileSync(cssPath, "utf-8");
+	const added: string[] = [];
+	const lines: string[] = [];
+
+	for (const [family, url] of Object.entries(fonts)) {
+		const marker = `${MARK_PREFIX} ${family} */`;
+		if (existing.includes(marker)) continue;
+		lines.push(`${marker}\n@import url("${url}");`);
+		added.push(family);
+	}
+
+	if (lines.length === 0) return [];
+
+	// Prepend after any opening comment block; simplest: prepend to top.
+	const next = lines.join("\n") + "\n" + existing;
+	writeFileSync(cssPath, next, "utf-8");
+	return added;
+}
+
+/**
+ * Remove font @imports inserted by Bosia by family name. Used when switching themes.
+ */
+export function removeFontImports(cssPath: string, families: string[]): string[] {
+	const existing = readFileSync(cssPath, "utf-8");
+	let next = existing;
+	const removed: string[] = [];
+
+	for (const family of families) {
+		const marker = `${MARK_PREFIX} ${family} */`;
+		const re = new RegExp(`${escapeRegExp(marker)}\\n@import url\\("[^"]+"\\);\\n?`, "g");
+		if (re.test(next)) {
+			next = next.replace(re, "");
+			removed.push(family);
+		}
+	}
+
+	if (removed.length > 0) writeFileSync(cssPath, next, "utf-8");
+	return removed;
+}
+
+function escapeRegExp(s: string): string {
+	return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}

package/src/cli/index.ts

@@ -37,10 +37,19 @@ async function main() {
 			break;
 		}
 		case "add": {
-			const { runAdd } = await import("./add.ts");
-			const addName = args.find((a) => !a.startsWith("--"));
-			const addFlags = args.filter((a) => a.startsWith("--"));
-			await runAdd(addName, addFlags);
+			const positional = args.filter((a) => !a.startsWith("--"));
+			const flags = args.filter((a) => a.startsWith("--"));
+			const sub = positional[0];
+			if (sub === "block") {
+				const { runAddBlock } = await import("./block.ts");
+				await runAddBlock(positional[1], flags);
+			} else if (sub === "theme") {
+				const { runAddTheme } = await import("./theme.ts");
+				await runAddTheme(positional[1], flags);
+			} else {
+				const { runAdd } = await import("./add.ts");
+				await runAdd(sub, flags);
+			}
 			break;
 		}
 		case "feat": {
@@ -63,8 +72,10 @@ Commands:
   build               Build for production
   start               Run the production server
   test [args]         Run tests with bun test (auto-loads .env.test, sets BOSIA_ENV=test)
-  add <component>     Add a UI component from the registry
-  feat <feature>      Add a feature scaffold from the registry [--local]
+  add <component>           Add a UI component from the registry
+  add block <cat>/<name>    Add a composed block from the registry
+  add theme <name>          Add a theme (tokens.css) from the registry
+  feat <feature>            Add a feature scaffold from the registry [--local]
 
 Examples:
   bun x bosia@latest create my-app
@@ -77,6 +88,8 @@ Examples:
   bun x bosia test --coverage
   bun x bosia@latest add button              → src/lib/components/ui/button/
   bun x bosia@latest add shop/cart           → src/lib/components/shop/cart/
+  bun x bosia@latest add block cards/feature-editorial
+  bun x bosia@latest add theme editorial
   bun x bosia@latest feat login
 `);
 			break;

package/src/cli/theme.ts

@@ -0,0 +1,88 @@
+import { join } from "path";
+import { mkdirSync, writeFileSync, readFileSync, existsSync } from "fs";
+import { resolveLocalRegistryOrExit, readRegistryJSON, readRegistryFile } from "./registry.ts";
+import { mergeFontImports } from "./fonts.ts";
+
+// ─── bun x bosia@latest add theme <name> ─────────────────
+// Installs a theme tokens.css to src/lib/themes/<name>.css and
+// rewrites the active theme @import in src/app.css. One theme
+// active at a time (v1 assumption).
+
+interface ThemeMeta {
+	name: string;
+	description: string;
+	files: string[];
+	fonts?: Record<string, string>;
+	npmDeps?: Record<string, string>;
+}
+
+const THEME_IMPORT_RE = /^@import\s+["']\.\/lib\/themes\/[^"']+["'];?\s*$/m;
+const THEME_MARKER = "/* bosia-theme */";
+
+export async function runAddTheme(name: string | undefined, flags: string[] = []) {
+	if (!name) {
+		console.error(
+			"❌ Please provide a theme name.\n   Usage: bun x bosia@latest add theme <name> [--local]",
+		);
+		process.exit(1);
+	}
+
+	const local = flags.includes("--local");
+	const registryRoot = local ? resolveLocalRegistryOrExit() : null;
+	if (local) console.log(`⬡ Using local registry: ${registryRoot}\n`);
+
+	console.log(`⬡ Installing theme: ${name}\n`);
+
+	const meta = await readRegistryJSON<ThemeMeta>(registryRoot, "themes", name, "meta.json");
+
+	const cwd = process.cwd();
+	const themesDir = join(cwd, "src", "lib", "themes");
+	mkdirSync(themesDir, { recursive: true });
+
+	// Copy tokens.css (and any other files) to src/lib/themes/<name>.css
+	// Convention: first file is the tokens file, written as <name>.css.
+	const tokensFile = meta.files[0] ?? "tokens.css";
+	const content = await readRegistryFile(registryRoot, "themes", name, tokensFile);
+	const tokensDest = join(themesDir, `${name}.css`);
+	writeFileSync(tokensDest, content, "utf-8");
+	console.log(`   ✍️  src/lib/themes/${name}.css`);
+
+	// Patch app.css: swap any existing ./lib/themes/*.css import for this one
+	const appCssPath = join(cwd, "src", "app.css");
+	if (existsSync(appCssPath)) {
+		patchAppCssThemeImport(appCssPath, name);
+		console.log(`   🎨 app.css → @import "./lib/themes/${name}.css"`);
+	} else {
+		console.warn(`   ⚠️  src/app.css not found — theme import not wired automatically.`);
+	}
+
+	// Font @imports
+	if (meta.fonts && Object.keys(meta.fonts).length > 0 && existsSync(appCssPath)) {
+		const added = mergeFontImports(appCssPath, meta.fonts);
+		if (added.length > 0) console.log(`   🔤 Added fonts: ${added.join(", ")}`);
+	}
+
+	console.log(`\n✅ ${name} theme installed.`);
+}
+
+function patchAppCssThemeImport(appCssPath: string, themeName: string) {
+	const src = readFileSync(appCssPath, "utf-8");
+	const newImport = `${THEME_MARKER}\n@import "./lib/themes/${themeName}.css";`;
+
+	let next: string;
+	if (THEME_IMPORT_RE.test(src)) {
+		next = src.replace(THEME_IMPORT_RE, `@import "./lib/themes/${themeName}.css";`);
+		if (!next.includes(THEME_MARKER)) {
+			next = next.replace(`@import "./lib/themes/${themeName}.css";`, newImport);
+		}
+	} else {
+		// Insert after the tailwindcss @import line so @theme {} is processed correctly.
+		const tw = /^(@import\s+["']tailwindcss["'];\s*\n)/m;
+		if (tw.test(src)) {
+			next = src.replace(tw, `$1${newImport}\n`);
+		} else {
+			next = `${newImport}\n${src}`;
+		}
+	}
+	writeFileSync(appCssPath, next, "utf-8");
+}

package/src/core/cors.ts

@@ -13,8 +13,24 @@ export interface CorsConfig {
 	maxAge?: number;
 }
 
-const DEFAULT_METHODS = "GET, HEAD, PUT, PATCH, POST, DELETE";
-const DEFAULT_HEADERS = "Content-Type, Authorization";
+const DEFAULT_METHODS = ["GET", "HEAD", "PUT", "PATCH", "POST", "DELETE"];
+const DEFAULT_HEADERS = ["Content-Type", "Authorization"];
+
+function parseHeaderList(value: string): string[] {
+	return value
+		.split(",")
+		.map((s) => s.trim())
+		.filter(Boolean);
+}
+
+/**
+ * Headers applied to *every* response when CORS is configured, regardless of
+ * whether the request Origin is allowed. Keeps caches/CDNs from serving a
+ * response with `Access-Control-Allow-Origin: X` to a different origin Y.
+ */
+export function applyCorsVary(headers: Headers): void {
+	headers.set("Vary", "Origin");
+}
 
 /**
  * Returns CORS response headers if the request Origin is in the allowed list.
@@ -48,22 +64,52 @@ export function getCorsHeaders(
 
 /**
  * Handles OPTIONS preflight requests.
- * Returns a 204 response with CORS headers, or null if the origin is not allowed.
+ *
+ * - Returns `null` if the request's Origin is missing or not allowed — the
+ *   caller treats this as "not a CORS preflight we serve", avoiding leaking
+ *   policy details to unknown origins.
+ * - Returns a 403 (carrying `Access-Control-Allow-Origin` + `Vary: Origin`)
+ *   when the requested method or any requested header falls outside the
+ *   configured allow-list. A 403 surfaces a clearer "not allowed by CORS
+ *   policy" message in the browser than letting the OPTIONS request fall
+ *   through to the default handler.
+ * - Otherwise returns a 204 with the standard preflight headers.
  */
 export function handlePreflight(request: Request, config: CorsConfig): Response | null {
 	const base = getCorsHeaders(request, config);
 	if (!base) return null;
 
+	const allowedMethods = config.allowedMethods ?? DEFAULT_METHODS;
+	const allowedHeaders = config.allowedHeaders ?? DEFAULT_HEADERS;
+
+	const requestedMethod = request.headers.get("access-control-request-method");
+	if (requestedMethod) {
+		const upper = requestedMethod.toUpperCase();
+		const allowedUpper = allowedMethods.map((m) => m.toUpperCase());
+		if (!allowedUpper.includes(upper)) {
+			return rejectPreflight(base, `Method ${requestedMethod} not allowed by CORS policy`);
+		}
+	}
+
+	const requestedHeadersRaw = request.headers.get("access-control-request-headers");
+	if (requestedHeadersRaw) {
+		const requested = parseHeaderList(requestedHeadersRaw).map((h) => h.toLowerCase());
+		const allowedLower = allowedHeaders.map((h) => h.toLowerCase());
+		const disallowed = requested.find((h) => !allowedLower.includes(h));
+		if (disallowed) {
+			return rejectPreflight(base, `Header ${disallowed} not allowed by CORS policy`);
+		}
+	}
+
 	const headers = new Headers(base as HeadersInit);
-	headers.set(
-		"Access-Control-Allow-Methods",
-		config.allowedMethods?.join(", ") ?? DEFAULT_METHODS,
-	);
-	headers.set(
-		"Access-Control-Allow-Headers",
-		config.allowedHeaders?.join(", ") ?? DEFAULT_HEADERS,
-	);
+	headers.set("Access-Control-Allow-Methods", allowedMethods.join(", "));
+	headers.set("Access-Control-Allow-Headers", allowedHeaders.join(", "));
 	headers.set("Access-Control-Max-Age", String(config.maxAge ?? 86400));
 
 	return new Response(null, { status: 204, headers });
 }
+
+function rejectPreflight(base: Record<string, string>, reason: string): Response {
+	const headers = new Headers(base as HeadersInit);
+	return new Response(reason, { status: 403, headers });
+}

package/src/core/csp.ts

@@ -0,0 +1,47 @@
+// ─── CSP Nonce ───────────────────────────────────────────
+// Per-request cryptographic nonce. Embedded as `nonce="..."` on every
+// framework-emitted <script> tag so that user code (or operators) can
+// configure a `Content-Security-Policy` header with `script-src 'nonce-…'`
+// and lock down inline-script execution without breaking framework
+// hydration.
+//
+// 16 random bytes → base64 (22 chars after stripping `=` padding) gives
+// the 128 bits of entropy recommended by the CSP spec.
+
+const NONCE_BYTES = 16;
+
+export function generateNonce(): string {
+	const bytes = new Uint8Array(NONCE_BYTES);
+	crypto.getRandomValues(bytes);
+	let binary = "";
+	for (let i = 0; i < bytes.length; i++) binary += String.fromCharCode(bytes[i]);
+	return btoa(binary).replace(/=+$/, "");
+}
+
+/** Returns ` nonce="…"` (with leading space) when `nonce` is non-empty, otherwise `""`. */
+export function nonceAttr(nonce: string | undefined): string {
+	return nonce ? ` nonce="${nonce}"` : "";
+}
+
+// ─── Optional CSP Header ─────────────────────────────────
+// Opt-in via `CSP_DIRECTIVES` env. The literal `{nonce}` placeholder in
+// the configured value is replaced with the per-request nonce on each
+// response. Empty/unset env → no `Content-Security-Policy` header.
+//
+// Example:
+//   CSP_DIRECTIVES="default-src 'self'; script-src 'self' 'nonce-{nonce}'"
+
+export const CSP_DIRECTIVES_TEMPLATE: string | null = process.env.CSP_DIRECTIVES?.trim() || null;
+
+/**
+ * `true` when an operator has opted into CSP via `CSP_DIRECTIVES`. The
+ * framework gates *all* nonce-related wire output on this flag — without a
+ * matching `Content-Security-Policy` header the nonce attribute is just dead
+ * bytes, so we omit it.
+ */
+export const CSP_ENABLED: boolean = CSP_DIRECTIVES_TEMPLATE !== null;
+
+export function buildCspHeader(nonce: string): string | null {
+	if (!CSP_DIRECTIVES_TEMPLATE) return null;
+	return CSP_DIRECTIVES_TEMPLATE.replace(/\{nonce\}/g, nonce);
+}

package/src/core/csrf.ts

@@ -31,12 +31,15 @@ export function checkCsrf(
 	if (SAFE_METHODS.has(request.method.toUpperCase())) return null;
 
 	// Derive the expected origin.
-	// In dev, the browser hits the proxy on DEV_PORT (e.g. localhost:9000)
-	// while the Elysia server sees url.origin as localhost:9001.
-	// X-Forwarded-Host / Host headers reflect the actual host the client used.
-	const forwardedHost = request.headers.get("x-forwarded-host");
+	// `X-Forwarded-*` headers are only trusted when `TRUST_PROXY=true`, since a
+	// directly-exposed server would otherwise let a client spoof its own origin
+	// via attacker-controlled forwarded headers. Behind a real reverse proxy
+	// (nginx, Caddy, Cloudflare) the operator opts in by setting the env.
+	const trustProxy = process.env.TRUST_PROXY === "true";
+	const forwardedHost = trustProxy ? request.headers.get("x-forwarded-host") : null;
 	const host = forwardedHost ?? request.headers.get("host");
-	const protocol = request.headers.get("x-forwarded-proto") ?? url.protocol.replace(":", "");
+	const forwardedProto = trustProxy ? request.headers.get("x-forwarded-proto") : null;
+	const protocol = forwardedProto ?? url.protocol.replace(":", "");
 	const expectedOrigin = host ? `${protocol}://${host}` : url.origin;
 
 	const allowedOrigins = new Set([expectedOrigin, ...(config.allowedOrigins ?? [])]);

package/src/core/dev.ts

@@ -94,6 +94,10 @@ async function startAppServer() {
 			PORT: String(APP_PORT),
 			// Allow externalized deps (elysia, etc.) to resolve from bosia's node_modules
 			NODE_PATH: BOSIA_NODE_PATH,
+			// Dev proxy injects X-Forwarded-Host/Proto reflecting the public DEV_PORT, so CSRF
+			// origin checks must honour them. Safe in dev because the proxy controls these
+			// headers — no untrusted client can spoof them.
+			TRUST_PROXY: "true",
 		},
 	});
 
@@ -204,16 +208,24 @@ const devServer = Bun.serve({
 			);
 		}
 
-		// Proxy everything else to the app server
+		// Proxy everything else to the app server. Inject X-Forwarded-Host/Proto so
+		// the app's CSRF origin check (gated behind TRUST_PROXY=true, also set in the
+		// app env above) reconstructs the public-facing origin from the dev proxy
+		// rather than the inner-app's host (localhost:APP_PORT).
 		try {
+			const reqUrl = new URL(req.url);
 			const target = new URL(req.url);
 			target.hostname = "localhost";
 			target.port = String(APP_PORT);
 
+			const forwardedHeaders = new Headers(req.headers);
+			forwardedHeaders.set("x-forwarded-host", reqUrl.host);
+			forwardedHeaders.set("x-forwarded-proto", reqUrl.protocol.replace(":", ""));
+
 			return await fetch(
 				new Request(target.toString(), {
 					method: req.method,
-					headers: req.headers,
+					headers: forwardedHeaders,
 					body: req.body,
 					redirect: "manual",
 				}),

package/src/core/errors.ts

@@ -29,11 +29,10 @@ export class Redirect {
 const DANGEROUS_SCHEMES = /^(javascript|data|vbscript):/i;
 
 function validateRedirectLocation(location: string, options?: RedirectOptions): void {
-	if (options?.allowExternal) return;
-
 	const trimmed = location.trim();
 
-	// Reject dangerous schemes
+	// Dangerous schemes are rejected even when `allowExternal: true` —
+	// `javascript:` / `data:` / `vbscript:` are never legitimate redirect targets.
 	if (DANGEROUS_SCHEMES.test(trimmed)) {
 		throw new Error(
 			`redirect(): dangerous scheme in URL "${location}". ` +
@@ -41,6 +40,8 @@ function validateRedirectLocation(location: string, options?: RedirectOptions):
 		);
 	}
 
+	if (options?.allowExternal) return;
+
 	// Reject protocol-relative URLs (//evil.com)
 	if (trimmed.startsWith("//")) {
 		throw new Error(

package/src/core/hooks.ts

@@ -34,7 +34,16 @@ export interface Cookies {
 export type RequestEvent = {
 	request: Request;
 	url: URL;
-	locals: Record<string, any>;
+	/**
+	 * Per-request scratch object for user hooks/load functions.
+	 *
+	 * `locals.nonce` is populated by the framework with a fresh per-request
+	 * cryptographic nonce (base64, 128 bits of entropy) and is safe to embed
+	 * as `nonce="${event.locals.nonce}"` on user-authored inline scripts when
+	 * the operator enables a `Content-Security-Policy` via the
+	 * `CSP_DIRECTIVES` env var.
+	 */
+	locals: Record<string, any> & { nonce?: string };
 	params: Record<string, string>;
 	cookies: Cookies;
 };

package/src/core/html.ts

@@ -1,5 +1,6 @@
 import { existsSync, readFileSync } from "fs";
 import { getDeclaredEnvKeys } from "./env.ts";
+import { nonceAttr } from "./csp.ts";
 
 // ─── Dist Manifest ───────────────────────────────────────
 // Maps hashed filenames → script/link tags.
@@ -76,6 +77,7 @@ export function buildHtml(
 	formData: any = null,
 	lang?: string,
 	ssr = true,
+	nonce?: string,
 ): string {
 	const cssLinks = (distManifest.css ?? [])
 		.map((f: string) => `<link rel="stylesheet" href="/dist/client/${f}">`)
@@ -83,10 +85,11 @@ export function buildHtml(
 
 	const fallbackTitle = head.includes("<title>") ? "" : "<title>Bosia App</title>";
 
+	const n = nonceAttr(nonce);
 	const publicEnv = getPublicDynamicEnv();
 	const envScript =
 		Object.keys(publicEnv).length > 0
-			? `\n  <script>window.__BOSIA_ENV__=${safeJsonStringify(publicEnv)};</script>`
+			? `\n  <script${n}>window.__BOSIA_ENV__=${safeJsonStringify(publicEnv)};</script>`
 			: "";
 
 	const formScript =
@@ -94,9 +97,9 @@ export function buildHtml(
 	const ssrFlag = ssr ? "" : "window.__BOSIA_SSR__=false;";
 
 	const scripts = csr
-		? `${envScript}\n  <script>${ssrFlag}window.__BOSIA_PAGE_DATA__=${safeJsonStringify(pageData)};window.__BOSIA_LAYOUT_DATA__=${safeJsonStringify(layoutData)};${formScript}</script>\n  <script type="module" src="/dist/client/${distManifest.entry}${cacheBust}"></script>`
+		? `${envScript}\n  <script${n}>${ssrFlag}window.__BOSIA_PAGE_DATA__=${safeJsonStringify(pageData)};window.__BOSIA_LAYOUT_DATA__=${safeJsonStringify(layoutData)};${formScript}</script>\n  <script${n} type="module" src="/dist/client/${distManifest.entry}${cacheBust}"></script>`
 		: isDev
-			? `\n  <script>!function r(){var e=new EventSource("/__bosia/sse");e.addEventListener("reload",()=>location.reload());e.onopen=()=>r._ok||(r._ok=1);e.onerror=()=>{e.close();setTimeout(r,2000)}}()</script>`
+			? `\n  <script${n}>!function r(){var e=new EventSource("/__bosia/sse");e.addEventListener("reload",()=>location.reload());e.onopen=()=>r._ok||(r._ok=1);e.onerror=()=>{e.close();setTimeout(r,2000)}}()</script>`
 			: "";
 
 	return `<!DOCTYPE html>
@@ -109,7 +112,7 @@ export function buildHtml(
   ${head}
   ${cssLinks}
   <link rel="stylesheet" href="/bosia-tw.css${cacheBust}">
-  <script>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>
+  <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>
 </head>
 <body>
   <div id="app">${body}</div>${scripts}
@@ -121,27 +124,23 @@ export function buildHtml(
 
 import type { Metadata } from "./hooks.ts";
 
-const _shellOpenCache = new Map<string, string>();
-
 /** Chunk 1: everything from <!DOCTYPE> through CSS/modulepreload links (head still open) */
-export function buildHtmlShellOpen(lang?: string): string {
+export function buildHtmlShellOpen(lang?: string, nonce?: string): string {
 	const key = safeLang(lang);
-	const cached = _shellOpenCache.get(key);
-	if (cached) return cached;
+	const n = nonceAttr(nonce);
 	const cssLinks = (distManifest.css ?? [])
 		.map((f: string) => `<link rel="stylesheet" href="/dist/client/${f}">`)
 		.join("\n  ");
-	const result =
+	return (
 		`<!DOCTYPE html>\n<html lang="${key}">\n<head>\n` +
 		`  <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.svg">\n` +
 		`  ${cssLinks}\n` +
 		`  <link rel="stylesheet" href="/bosia-tw.css${cacheBust}">\n` +
-		`  <script>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}">`;
-	_shellOpenCache.set(key, result);
-	return result;
+		`  <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}">`
+	);
 }
 
 const SPINNER =
@@ -208,25 +207,27 @@ export function buildHtmlTail(
 	formData: any = null,
 	ssr = true,
 	bodyEndExtras?: string[],
+	nonce?: string,
 ): string {
-	let out = `<script>document.getElementById('__bs__').remove()</script>`;
+	const n = nonceAttr(nonce);
+	let out = `<script${n}>document.getElementById('__bs__').remove()</script>`;
 	out += `\n<div id="app">${body}</div>`;
 	if (head)
-		out += `\n<script>document.head.insertAdjacentHTML('beforeend',${safeJsonStringify(head)})</script>`;
+		out += `\n<script${n}>document.head.insertAdjacentHTML('beforeend',${safeJsonStringify(head)})</script>`;
 	if (csr) {
 		const publicEnv = getPublicDynamicEnv();
 		if (Object.keys(publicEnv).length > 0) {
-			out += `\n<script>window.__BOSIA_ENV__=${safeJsonStringify(publicEnv)};</script>`;
+			out += `\n<script${n}>window.__BOSIA_ENV__=${safeJsonStringify(publicEnv)};</script>`;
 		}
 		const formInject =
 			formData != null ? `window.__BOSIA_FORM_DATA__=${safeJsonStringify(formData)};` : "";
 		const ssrFlag = ssr ? "" : "window.__BOSIA_SSR__=false;";
 		out +=
-			`\n<script>${ssrFlag}window.__BOSIA_PAGE_DATA__=${safeJsonStringify(pageData)};` +
+			`\n<script${n}>${ssrFlag}window.__BOSIA_PAGE_DATA__=${safeJsonStringify(pageData)};` +
 			`window.__BOSIA_LAYOUT_DATA__=${safeJsonStringify(layoutData)};${formInject}</script>`;
-		out += `\n<script type="module" src="/dist/client/${distManifest.entry}${cacheBust}"></script>`;
+		out += `\n<script${n} type="module" src="/dist/client/${distManifest.entry}${cacheBust}"></script>`;
 	} else if (isDev) {
-		out += `\n<script>!function r(){var e=new EventSource("/__bosia/sse");e.addEventListener("reload",()=>location.reload());e.onopen=()=>r._ok||(r._ok=1);e.onerror=()=>{e.close();setTimeout(r,2000)}}()</script>`;
+		out += `\n<script${n}>!function r(){var e=new EventSource("/__bosia/sse");e.addEventListener("reload",()=>location.reload());e.onopen=()=>r._ok||(r._ok=1);e.onerror=()=>{e.close();setTimeout(r,2000)}}()</script>`;
 	}
 	if (bodyEndExtras?.length) {
 		for (const fragment of bodyEndExtras) {

package/src/core/plugin.ts

@@ -126,6 +126,19 @@ export function makeBosiaPlugin(target: "browser" | "bun" = "bun") {
 				path: "tailwindcss",
 				namespace: "bosia-empty-css",
 			}));
+			// app.css is processed by Tailwind CLI into public/bosia-tw.css and
+			// loaded via <link> tag in HTML. User layouts often `import "../app.css"`
+			// for IDE/Tailwind tooling — bundle as JS no-op so Bun doesn't emit a
+			// CSS chunk per dynamic-imported route (identical content → output
+			// collision under splitting:true).
+			build.onResolve({ filter: /(?:^|.*\/)app\.css$/ }, () => ({
+				path: "app.css",
+				namespace: "bosia-empty-app-css",
+			}));
+			build.onLoad({ filter: /.*/, namespace: "bosia-empty-app-css" }, () => ({
+				contents: "",
+				loader: "js",
+			}));
 			build.onLoad({ filter: /.*/, namespace: "bosia-empty-css" }, () => ({
 				contents: "",
 				loader: "css",

package/src/core/prerender.ts

@@ -44,6 +44,17 @@ interface PrerenderTarget {
 export function substituteParams(pattern: string, entry: Record<string, string>): string {
 	let resolved = pattern;
 	for (const [key, value] of Object.entries(entry)) {
+		// `..` and `\` are never legitimate in a route segment — they let a build
+		// emit prerendered HTML outside the intended output tree. Forward slashes
+		// are only allowed for catch-all (`[...key]`) segments, which by design
+		// expand to multiple path parts. Validate accordingly.
+		const isRest = pattern.includes(`[...${key}]`);
+		if (/\\|\.\./.test(value) || (!isRest && value.includes("/"))) {
+			throw new Error(
+				`Prerender entries(): unsafe value "${value}" for [${key}] — ` +
+					`path traversal characters are not allowed in dynamic segment values.`,
+			);
+		}
 		resolved = resolved.replace(`[...${key}]`, value);
 		resolved = resolved.replace(`[${key}]`, value);
 	}

package/src/core/renderer.ts

@@ -4,6 +4,7 @@ import { findMatch } from "./matcher.ts";
 import { serverRoutes, errorPage } from "bosia:routes";
 import type { RouteMatch } from "./types.ts";
 import type { Cookies } from "./hooks.ts";
+import { CSP_ENABLED } from "./csp.ts";
 import { HttpError, Redirect } from "./errors.ts";
 import { pickErrorPage, type ErrorOrigin } from "./errorMatch.ts";
 import App from "./client/App.svelte";
@@ -296,6 +297,7 @@ export async function renderSSRStream(
 	if (!match) return null;
 
 	const { route, params } = match;
+	const nonce = CSP_ENABLED && typeof locals.nonce === "string" ? locals.nonce : undefined;
 
 	// ── Pre-stream phase: resolve metadata before committing to a 200 ──
 	// Errors here return a proper error response with correct status code.
@@ -307,7 +309,17 @@ export async function renderSSRStream(
 			return Response.redirect(err.location, err.status);
 		}
 		if (err instanceof HttpError) {
-			return renderErrorPage(err.status, err.message, url, req, route);
+			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);
@@ -344,14 +356,36 @@ export async function renderSSRStream(
 				e.errorDepth,
 				e.errorOrigin,
 				e.partialLayoutData,
+				nonce,
 			);
 		}
 		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, route);
+		return renderErrorPage(
+			500,
+			"Internal Server Error",
+			url,
+			req,
+			route,
+			undefined,
+			undefined,
+			undefined,
+			nonce,
+		);
 	}
 
-	if (!data) return renderErrorPage(404, "Not Found", url, req);
+	if (!data)
+		return renderErrorPage(
+			404,
+			"Not Found",
+			url,
+			req,
+			undefined,
+			undefined,
+			undefined,
+			undefined,
+			nonce,
+		);
 
 	const enc = new TextEncoder();
 	const renderCtx: RenderContext = {
@@ -374,9 +408,19 @@ export async function renderSSRStream(
 			);
 		}
 		const html =
-			buildHtmlShellOpen(metadata?.lang) +
+			buildHtmlShellOpen(metadata?.lang, nonce) +
 			buildMetadataChunk(metadata, headExtras) +
-			buildHtmlTail("", "", data.pageData, data.layoutData, true, null, false, bodyEndExtras);
+			buildHtmlTail(
+				"",
+				"",
+				data.pageData,
+				data.layoutData,
+				true,
+				null,
+				false,
+				bodyEndExtras,
+				nonce,
+			);
 		return new Response(html, {
 			headers: { "Content-Type": "text/html; charset=utf-8" },
 		});
@@ -408,12 +452,13 @@ export async function renderSSRStream(
 			route.layoutModules.length,
 			"page",
 			data.layoutData,
+			nonce,
 		);
 	}
 
 	// Pre-compute all chunks; pull-based stream gives Bun native backpressure.
 	const chunks: Uint8Array[] = [
-		enc.encode(buildHtmlShellOpen(metadata?.lang)),
+		enc.encode(buildHtmlShellOpen(metadata?.lang, nonce)),
 		enc.encode(buildMetadataChunk(metadata, headExtras)),
 		enc.encode(
 			buildHtmlTail(
@@ -425,6 +470,7 @@ export async function renderSSRStream(
 				null,
 				true,
 				bodyEndExtras,
+				nonce,
 			),
 		),
 	];
@@ -473,8 +519,20 @@ export async function renderPageWithFormData(
 	status: number,
 	match?: RouteMatch<(typeof serverRoutes)[number]> | null,
 ): Promise<Response> {
+	const nonce = CSP_ENABLED && typeof locals.nonce === "string" ? locals.nonce : undefined;
 	match ??= findMatch(serverRoutes, url.pathname);
-	if (!match) return renderErrorPage(404, "Not Found", url, req);
+	if (!match)
+		return renderErrorPage(
+			404,
+			"Not Found",
+			url,
+			req,
+			undefined,
+			undefined,
+			undefined,
+			undefined,
+			nonce,
+		);
 
 	const { route } = match;
 
@@ -485,7 +543,18 @@ export async function renderPageWithFormData(
 		Promise.all(route.layoutModules.map((l: () => Promise<any>) => l())),
 	]);
 
-	if (!data) return renderErrorPage(404, "Not Found", url, req);
+	if (!data)
+		return renderErrorPage(
+			404,
+			"Not Found",
+			url,
+			req,
+			undefined,
+			undefined,
+			undefined,
+			undefined,
+			nonce,
+		);
 
 	if (!data.ssr) {
 		if (!data.csr && isDev) {
@@ -502,6 +571,7 @@ export async function renderPageWithFormData(
 			formData,
 			undefined,
 			false,
+			nonce,
 		);
 		return compress(html, "text/html; charset=utf-8", req, status);
 	}
@@ -517,7 +587,17 @@ export async function renderPageWithFormData(
 		},
 	});
 
-	const html = buildHtml(body, head, data.pageData, data.layoutData, data.csr, formData);
+	const html = buildHtml(
+		body,
+		head,
+		data.pageData,
+		data.layoutData,
+		data.csr,
+		formData,
+		undefined,
+		true,
+		nonce,
+	);
 	return compress(html, "text/html; charset=utf-8", req, status);
 }
 
@@ -536,7 +616,11 @@ export async function renderErrorPage(
 	errorDepth?: number,
 	errorOrigin?: ErrorOrigin,
 	partialLayoutData?: Record<string, any>[],
+	nonce?: string,
 ): Promise<Response> {
+	// Strip the nonce from emitted scripts when CSP is off — the attribute
+	// is dead bytes without a matching policy header.
+	if (!CSP_ENABLED) nonce = undefined;
 	// 1. Nested boundary
 	if (route && errorDepth !== undefined && route.errorPages?.length) {
 		const origin = errorOrigin ?? "page";
@@ -567,7 +651,17 @@ export async function renderErrorPage(
 					},
 				});
 				// csr=false: no client hydration on the error page itself.
-				const html = buildHtml(body, head, { status, message }, layoutData, false);
+				const html = buildHtml(
+					body,
+					head,
+					{ status, message },
+					layoutData,
+					false,
+					null,
+					undefined,
+					true,
+					nonce,
+				);
 				return compress(html, "text/html; charset=utf-8", req, status);
 			} catch (err) {
 				if (isDev) console.error("Nested error page render failed:", err);
@@ -591,7 +685,17 @@ export async function renderErrorPage(
 			const { body, head } = render(mod.default, {
 				props: { error: { status, message } },
 			});
-			const html = buildHtml(body, head, { status, message }, [], false);
+			const html = buildHtml(
+				body,
+				head,
+				{ status, message },
+				[],
+				false,
+				null,
+				undefined,
+				true,
+				nonce,
+			);
 			return compress(html, "text/html; charset=utf-8", req, status);
 		} catch (err) {
 			if (isDev) console.error("Error page render failed:", err);

package/src/core/safePath.ts

@@ -0,0 +1,14 @@
+import { join, resolve as resolvePath } from "path";
+
+/**
+ * Resolve `untrusted` relative to `base` and verify the result stays inside
+ * `base`. Returns the absolute resolved path on success, or `null` when the
+ * resolved location escapes the base directory (traversal, absolute path
+ * pointing elsewhere, etc.). Use this on every untrusted path segment before
+ * touching the filesystem.
+ */
+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;
+}

package/src/core/server.ts

@@ -1,7 +1,7 @@
 import { Elysia } from "elysia";
 
 import { existsSync, readFileSync } from "fs";
-import { join, resolve as resolvePath } from "path";
+import { join } from "path";
 
 import { findMatch, compileRoutes, canonicalPathname } from "./matcher.ts";
 import { apiRoutes, serverRoutes } from "bosia:routes";
@@ -14,10 +14,12 @@ compileRoutes(serverRoutes);
 import type { Handle, RequestEvent } from "./hooks.ts";
 import { HttpError, Redirect, ActionFailure } from "./errors.ts";
 import { CookieJar } from "./cookies.ts";
+import { safePath } from "./safePath.ts";
 import { checkCsrf } from "./csrf.ts";
 import type { CsrfConfig } from "./csrf.ts";
-import { getCorsHeaders, handlePreflight } from "./cors.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 { dedup, dedupKey } from "./dedup.ts";
 import {
@@ -93,6 +95,12 @@ if (_corsAllowedOrigins?.length) {
 	console.log(`🌐 CORS allowed origins: ${_corsAllowedOrigins.join(", ")}`);
 }
 
+// ─── CSP Config ──────────────────────────────────────────
+
+if (CSP_DIRECTIVES_TEMPLATE) {
+	console.log(`🔒 CSP: opt-in header active`);
+}
+
 // ─── Core Request Resolver ────────────────────────────────
 // This is the inner handler that hooks wrap around.
 
@@ -104,13 +112,6 @@ function isValidRoutePath(path: string, origin: string): boolean {
 	}
 }
 
-/** Resolve a file path and verify it stays within the allowed base directory. Returns null if traversal detected. */
-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;
-}
-
 /** Extract action name from URL searchParams — `?/login` → "login", no slash key → "default". */
 function parseActionName(url: URL): string {
 	for (const key of url.searchParams.keys()) {
@@ -359,6 +360,11 @@ async function resolve(event: RequestEvent): Promise<Response> {
 							`Action "${actionName}" not found`,
 							url,
 							request,
+							undefined,
+							undefined,
+							undefined,
+							undefined,
+							locals.nonce,
 						);
 					}
 
@@ -387,7 +393,17 @@ async function resolve(event: RequestEvent): Promise<Response> {
 									{ status: err.status },
 								);
 							}
-							return renderErrorPage(err.status, err.message, url, request);
+							return renderErrorPage(
+								err.status,
+								err.message,
+								url,
+								request,
+								undefined,
+								undefined,
+								undefined,
+								undefined,
+								locals.nonce,
+							);
 						}
 						throw err;
 					}
@@ -482,7 +498,18 @@ async function resolve(event: RequestEvent): Promise<Response> {
 
 	// SSR pages (+page.svelte) — streaming by default
 	const streamResponse = await renderSSRStream(url, locals, request, cookies, pageMatch);
-	if (!streamResponse) return renderErrorPage(404, "Not Found", url, request);
+	if (!streamResponse)
+		return renderErrorPage(
+			404,
+			"Not Found",
+			url,
+			request,
+			undefined,
+			undefined,
+			undefined,
+			undefined,
+			locals.nonce,
+		);
 	return streamResponse;
 }
 
@@ -518,13 +545,26 @@ async function handleRequest(request: Request, url: URL): Promise<Response> {
 		}
 
 		const cookieJar = new CookieJar(request.headers.get("cookie") ?? "", isDev);
-		const event: RequestEvent = { request, url, locals: {}, params: {}, cookies: cookieJar };
+		const nonce = CSP_ENABLED ? generateNonce() : "";
+		const event: RequestEvent = {
+			request,
+			url,
+			locals: { nonce },
+			params: {},
+			cookies: cookieJar,
+		};
 		const response = userHandle ? await userHandle({ event, resolve }) : await resolve(event);
 
 		const headers = new Headers(response.headers);
 		for (const [k, v] of Object.entries(SECURITY_HEADERS)) headers.set(k, v);
-		// Apply CORS headers for allowed origins
+		const cspHeader = buildCspHeader(nonce);
+		if (cspHeader) headers.set("Content-Security-Policy", cspHeader);
+		// Apply CORS headers for allowed origins. `Vary: Origin` is set whenever
+		// CORS is configured — even on responses to non-allowed origins — so
+		// downstream caches (CDNs, browser HTTP cache) key on the Origin header
+		// instead of serving an Access-Control-Allow-Origin response across origins.
 		if (CORS_CONFIG) {
+			applyCorsVary(headers);
 			const corsHeaders = getCorsHeaders(request, CORS_CONFIG);
 			if (corsHeaders) {
 				for (const [k, v] of Object.entries(corsHeaders)) headers.set(k, v);