bosia 0.6.23 → 0.6.25

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bosia",
-	"version": "0.6.23",
+	"version": "0.6.25",
 	"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

@@ -33,6 +33,7 @@ export interface RegistryIndex {
 	components: string[];
 	features: string[];
 	blocks?: string[];
+	pages?: string[];
 	themes?: string[];
 }
 
@@ -75,7 +76,7 @@ export async function runAdd(names: string[], flags: string[] = []) {
 
 /**
  * Resolve the full registry path for a component using the index.
- * - "todo"       → "todo"          (exact match in index)
+ * - "<name>"     → "<name>"        (exact match in index)
  * - "button"     → "ui/button"     (suffix match in index)
  * - "shop/cart"  → "shop/cart"     (explicit path used as-is)
  */
@@ -83,7 +84,7 @@ function resolveDestPath(name: string): string {
 	if (name.includes("/")) return name;
 
 	if (registryIndex) {
-		// Exact match (e.g. "todo" → "todo")
+		// Exact match (bare name present in index)
 		if (registryIndex.components.includes(name)) return name;
 		// Suffix match (e.g. "button" → "ui/button")
 		const match = registryIndex.components.find((c) => c.endsWith(`/${name}`));
@@ -181,9 +182,10 @@ export function runAddList(): void {
 	const manifest = readManifest();
 	const components = Object.entries(manifest.components);
 	const blocks = Object.entries(manifest.blocks);
+	const pages = Object.entries(manifest.pages);
 
-	if (components.length === 0 && blocks.length === 0) {
-		console.log("No components or blocks installed.");
+	if (components.length === 0 && blocks.length === 0 && pages.length === 0) {
+		console.log("No components, blocks, or pages installed.");
 		console.log("Install one with: bun x bosia@latest add <component>");
 		return;
 	}
@@ -204,6 +206,15 @@ export function runAddList(): void {
 			console.log(`  ${name.padEnd(w)}  ${entry.installedAt.slice(0, 10)}`);
 		}
 	}
+
+	if (pages.length > 0) {
+		if (components.length > 0 || blocks.length > 0) console.log("");
+		console.log(`⬡ Installed pages (${pages.length}):\n`);
+		const w = Math.max(...pages.map(([n]) => n.length));
+		for (const [name, entry] of pages) {
+			console.log(`  ${name.padEnd(w)}  ${entry.installedAt.slice(0, 10)}`);
+		}
+	}
 }
 
 // ─── Ensure $lib/utils.ts exists ─────────────────────────────

package/src/cli/addRouter.ts

@@ -5,6 +5,7 @@
 export interface AddRunners {
 	runAdd: (names: string[], flags: string[]) => Promise<void> | void;
 	runAddBlock: (name: string | undefined, flags: string[]) => Promise<void> | void;
+	runAddPage: (name: string | undefined, flags: string[]) => Promise<void> | void;
 	runAddTheme: (name: string | undefined, flags: string[]) => Promise<void> | void;
 	runAddFont: (family: string | undefined, url: string | undefined) => Promise<void> | void;
 	runAddList: () => Promise<void> | void;
@@ -19,6 +20,10 @@ export async function routeAdd(args: string[], runners: AddRunners): Promise<voi
 		await runners.runAddBlock(positional[1], flags);
 		return;
 	}
+	if (sub === "page") {
+		await runners.runAddPage(positional[1], flags);
+		return;
+	}
 	if (sub === "theme") {
 		const themeFlags = args.filter((a) => a.startsWith("--"));
 		await runners.runAddTheme(positional[1], themeFlags);
@@ -33,19 +38,25 @@ export async function routeAdd(args: string[], runners: AddRunners): Promise<voi
 		return;
 	}
 
-	// Alias: `blocks/<cat>/<name>` tokens dispatch to runAddBlock.
-	// Skills/AI agents frequently emit the plural `blocks/...` form alongside
-	// `ui/*` components; route those to the block installer transparently
-	// and let any remaining plain component names fall through to runAdd.
+	// Alias: `blocks/<cat>/<name>` / `pages/<cat>/<name>` tokens dispatch to the
+	// matching installer. Skills/AI agents frequently emit these plural forms
+	// alongside `ui/*` components; route those transparently and let any
+	// remaining plain component names fall through to runAdd.
 	const blockTokens = positional.filter((p) => p.startsWith("blocks/"));
-	const componentTokens = positional.filter((p) => !p.startsWith("blocks/"));
-	if (blockTokens.length > 0) {
+	const pageTokens = positional.filter((p) => p.startsWith("pages/"));
+	const componentTokens = positional.filter(
+		(p) => !p.startsWith("blocks/") && !p.startsWith("pages/"),
+	);
+	if (blockTokens.length > 0 || pageTokens.length > 0) {
 		if (componentTokens.length > 0) {
 			await runners.runAdd(componentTokens, flags);
 		}
 		for (const token of blockTokens) {
 			await runners.runAddBlock(token.slice("blocks/".length), flags);
 		}
+		for (const token of pageTokens) {
+			await runners.runAddPage(token.slice("pages/".length), flags);
+		}
 		return;
 	}
 

package/src/cli/block.ts

@@ -30,6 +30,10 @@ interface BlockMeta {
 	npmDeps: Record<string, string>;
 }
 
+// Track already-installed blocks within a session to avoid redundant work
+// when multiple features/blocks declare the same block dependency.
+const installed = new Set<string>();
+
 export async function runAddBlock(
 	name: string | undefined,
 	flags: string[] = [],
@@ -58,6 +62,9 @@ export async function runAddBlock(
 	await initAddRegistry(registryRoot);
 	ensureUtils(resolvedOptions.cwd);
 
+	if (installed.has(name)) return;
+	installed.add(name);
+
 	console.log(`⬡ Installing block: ${name}\n`);
 
 	const meta = await readRegistryJSON<BlockMeta>(registryRoot, "blocks", name, "meta.json");

package/src/cli/create.ts

@@ -14,7 +14,6 @@ const BOSIA_VERSION: string = BOSIA_PKG.version;
 const TEMPLATE_DESCRIPTIONS: Record<string, string> = {
 	default: "Minimal starter with routing and Tailwind",
 	demo: "Full-featured demo with hooks, API routes, form actions, and more",
-	todo: "Todo app with PostgreSQL + Drizzle ORM",
 	shop: "Online store starter with auth, RBAC, S3 uploads, products/orders/cart",
 };
 

package/src/cli/feat.ts

@@ -16,7 +16,7 @@ import { recordFeature, readManifest } from "./manifest.ts";
 // ─── bun x bosia@latest feat <feature> [--local] ─────────
 // Fetches a feature scaffold from the GitHub registry (or local
 // registry with --local) and copies route/lib files, installs npm deps.
-// Supports nested feature dependencies (e.g. todo → drizzle).
+// Supports nested feature dependencies (e.g. shop → auth).
 
 type FileStrategy =
 	| "write" // overwrite (prompt if interactive)

package/src/cli/index.ts

@@ -69,6 +69,10 @@ async function main() {
 					const { runAddBlock } = await import("./block.ts");
 					await runAddBlock(name, flags);
 				},
+				runAddPage: async (name, flags) => {
+					const { runAddPage } = await import("./page.ts");
+					await runAddPage(name, flags);
+				},
 				runAddTheme: async (name, flags) => {
 					const { runAddTheme } = await import("./theme.ts");
 					await runAddTheme(name, flags);
@@ -116,6 +120,7 @@ Commands:
   test [args]         Run tests with bun test (auto-loads .env.test, sets BOSIA_ENV=test)
   add <component...> [-y]   Add one or more UI components from the registry
   add block <cat>/<name>    Add a composed block from the registry
+  add page <cat>/<name>     Add a full page (a group of blocks) from the registry
   add theme <name>          Add a theme (tokens.css) from the registry
   add font <family> <url>   Prepend an @import url(...) for a font family to src/app.css
   add list                  List installed components and blocks (reads bosia.json)
@@ -126,7 +131,7 @@ Commands:
 
 Examples:
   bun x bosia@latest create my-app
-  bun x bosia@latest create my-app --template todo
+  bun x bosia@latest create my-app --template shop
   bun x bosia dev
   bun x bosia build
   bun x bosia start
@@ -137,8 +142,10 @@ Examples:
   bun x bosia@latest add button card input   → install multiple at once
   bun x bosia@latest add -y button card      → auto-confirm overwrites (CI / scripts)
   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 blocks/cards/feature-editorial   (alias for: add block cards/feature-editorial)
+  bun x bosia@latest add block cards/feature
+  bun x bosia@latest add blocks/cards/feature   (alias for: add block cards/feature)
+  bun x bosia@latest add page storefront/home
+  bun x bosia@latest add pages/storefront/home  (alias for: add page storefront/home)
   bun x bosia@latest add theme editorial
   bun x bosia@latest add font "Fredoka" "https://fonts.googleapis.com/css2?family=Fredoka:wght@400;700&display=swap"
   bun x bosia@latest feat login

package/src/cli/manifest.ts

@@ -38,15 +38,19 @@ export interface BlockManifestEntry {
 	fonts?: string[];
 }
 
+// A page is a group of blocks (no backend); reuse the block entry shape.
+export type PageManifestEntry = BlockManifestEntry;
+
 export interface Manifest {
 	version: number;
 	features: Record<string, FeatureManifestEntry>;
 	components: Record<string, ComponentManifestEntry>;
 	blocks: Record<string, BlockManifestEntry>;
+	pages: Record<string, PageManifestEntry>;
 }
 
 function emptyManifest(): Manifest {
-	return { version: MANIFEST_VERSION, features: {}, components: {}, blocks: {} };
+	return { version: MANIFEST_VERSION, features: {}, components: {}, blocks: {}, pages: {} };
 }
 
 export function readManifest(cwd: string = process.cwd()): Manifest {
@@ -59,6 +63,7 @@ export function readManifest(cwd: string = process.cwd()): Manifest {
 			features: parsed.features ?? {},
 			components: parsed.components ?? {},
 			blocks: parsed.blocks ?? {},
+			pages: parsed.pages ?? {},
 		};
 	} catch {
 		return emptyManifest();
@@ -99,3 +104,13 @@ export function recordBlock(
 	manifest.blocks[name] = { installedAt: new Date().toISOString(), ...entry };
 	writeManifest(manifest, cwd);
 }
+
+export function recordPage(
+	cwd: string,
+	name: string,
+	entry: Omit<PageManifestEntry, "installedAt">,
+): void {
+	const manifest = readManifest(cwd);
+	manifest.pages[name] = { installedAt: new Date().toISOString(), ...entry };
+	writeManifest(manifest, cwd);
+}

package/src/cli/page.ts

@@ -0,0 +1,141 @@
+import { join, dirname } from "path";
+import { mkdirSync, existsSync } from "fs";
+import * as p from "@clack/prompts";
+import {
+	type InstallOptions,
+	resolveLocalRegistryOrExit,
+	readRegistryJSON,
+	readRegistryFile,
+	writeRegistryFile,
+	mergePkgJson,
+	bunAdd,
+} from "./registry.ts";
+import { addComponent, initAddRegistry, ensureUtils } from "./add.ts";
+import { runAddBlock } from "./block.ts";
+import { mergeFontImports } from "./fonts.ts";
+import { recordPage } from "./manifest.ts";
+
+// ─── bun x bosia@latest add page <category>/<name> ───────
+// Installs a full page (a group of blocks, no backend) into
+// src/lib/pages/<path>/. Recursively installs the block and
+// component dependencies the page composes, plus npm deps and
+// optional Google Fonts @imports into app.css.
+
+interface PageMeta {
+	name: string;
+	description: string;
+	category: string;
+	themes?: string[];
+	dependencies: string[]; // "blocks/..." or "ui/..." entries
+	files: string[];
+	fonts?: Record<string, string>; // family → @import URL
+	npmDeps: Record<string, string>;
+}
+
+// Track already-installed pages within a session to avoid redundant work.
+const installed = new Set<string>();
+
+export async function runAddPage(
+	name: string | undefined,
+	flags: string[] = [],
+	options?: InstallOptions,
+) {
+	if (!name || !name.includes("/")) {
+		console.error(
+			"❌ Please provide a page path.\n   Usage: bun x bosia@latest add page <category>/<name> [-y] [--local]",
+		);
+		process.exit(1);
+	}
+
+	const local = flags.includes("--local");
+	const flagYes = flags.includes("-y") || flags.includes("--yes");
+	const inheritedRoot = options?.registryRoot ?? null;
+	const registryRoot = inheritedRoot ?? (local ? resolveLocalRegistryOrExit() : null);
+	if (local && !inheritedRoot) console.log(`⬡ Using local registry: ${registryRoot}\n`);
+
+	const resolvedOptions: InstallOptions = {
+		...(options ?? {}),
+		registryRoot,
+		skipPrompts: options?.skipPrompts ?? flagYes,
+	};
+
+	await initAddRegistry(registryRoot);
+	ensureUtils(resolvedOptions.cwd);
+
+	if (installed.has(name)) return;
+	installed.add(name);
+
+	console.log(`⬡ Installing page: ${name}\n`);
+
+	const meta = await readRegistryJSON<PageMeta>(registryRoot, "pages", name, "meta.json");
+
+	// 1. Install dependencies first.
+	// Block deps (e.g. "blocks/storefront/header") recurse into runAddBlock.
+	// Component deps (e.g. "ui/button") go through addComponent.
+	for (const dep of meta.dependencies ?? []) {
+		if (dep.startsWith("blocks/")) {
+			await runAddBlock(dep.slice("blocks/".length), [], resolvedOptions);
+		} else {
+			await addComponent(dep, false, resolvedOptions);
+		}
+	}
+
+	// 2. Copy page files to src/lib/pages/<path>/
+	const cwd = resolvedOptions.cwd ?? process.cwd();
+	const destDir = join(cwd, "src", "lib", "pages", name);
+
+	if (!resolvedOptions.skipPrompts && existsSync(destDir)) {
+		const replace = await p.confirm({
+			message: `Page "${name}" already exists at src/lib/pages/${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, "pages", name, file);
+		const dest = join(destDir, file);
+		if (file.includes("/")) mkdirSync(dirname(dest), { recursive: true });
+		writeRegistryFile(dest, content);
+		console.log(`   ✍️  src/lib/pages/${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) {
+		if (resolvedOptions.skipInstall) {
+			const { addedDeps } = mergePkgJson(cwd, { deps: meta.npmDeps });
+			if (addedDeps.length > 0) console.log(`   📥 Added to package.json: ${addedDeps.join(", ")}`);
+		} else {
+			await bunAdd(cwd, meta.npmDeps);
+		}
+	}
+
+	// 5. Record install in bosia.json manifest.
+	recordPage(cwd, name, {
+		files: meta.files,
+		...(meta.npmDeps && Object.keys(meta.npmDeps).length > 0
+			? { npmDeps: Object.keys(meta.npmDeps) }
+			: {}),
+		...(meta.dependencies && meta.dependencies.length > 0
+			? { dependencies: meta.dependencies }
+			: {}),
+		...(meta.fonts && Object.keys(meta.fonts).length > 0 ? { fonts: Object.keys(meta.fonts) } : {}),
+	});
+
+	console.log(`\n✅ ${name} installed at src/lib/pages/${name}/`);
+}

package/src/cli/theme.ts

@@ -18,6 +18,9 @@ interface ThemeMeta {
 
 const THEME_IMPORT_RE = /^@import\s+["']\.\/lib\/themes\/[^"']+["'];?\s*$/m;
 const THEME_MARKER = "/* bosia-theme */";
+// Sentinel-bounded :root/.dark block the templates ship (see templates/*/src/app.css).
+// Removing it targets exactly the template defaults and never user-authored :root rules.
+const THEME_VARS_RE = /\/\* bosia-theme-vars[\s\S]*?\/\* \/bosia-theme-vars \*\//;
 
 export async function runAddTheme(name: string | undefined, flags: string[] = []) {
 	if (!name) {
@@ -52,6 +55,11 @@ export async function runAddTheme(name: string | undefined, flags: string[] = []
 	if (existsSync(appCssPath)) {
 		patchAppCssThemeImport(appCssPath, name);
 		console.log(`   🎨 app.css → @import "./lib/themes/${name}.css"`);
+		// The installed theme css owns :root/.dark now — drop the template's default
+		// block so two same-specificity :root rules don't fight (template wins by order).
+		if (stripTemplateThemeVars(appCssPath)) {
+			console.log(`   🧹 app.css → removed template :root/.dark vars (theme owns them)`);
+		}
 	} else {
 		console.warn(`   ⚠️  src/app.css not found — theme import not wired automatically.`);
 	}
@@ -86,3 +94,15 @@ function patchAppCssThemeImport(appCssPath: string, themeName: string) {
 	}
 	writeFileSync(appCssPath, next, "utf-8");
 }
+
+// Strip the sentinel-bounded template :root/.dark block. Idempotent: once removed
+// (or on an app that never had it), the marker is gone and this is a no-op. Only
+// the raw token blocks go — `@theme {}` (Tailwind mapping) lives above the markers
+// and is untouched.
+function stripTemplateThemeVars(appCssPath: string): boolean {
+	const src = readFileSync(appCssPath, "utf-8");
+	if (!THEME_VARS_RE.test(src)) return false;
+	const next = src.replace(THEME_VARS_RE, "").replace(/\n{3,}/g, "\n\n");
+	writeFileSync(appCssPath, next, "utf-8");
+	return true;
+}

package/src/core/dev.ts

@@ -42,7 +42,27 @@ const BACKOFF_SCHEDULE_MS = [500, 1_000, 2_000, 4_000, 5_000];
 
 // ─── SSE Broadcast ────────────────────────────────────────
 
+// Reload-hold control (driven by titoko via /__bosia/hold + /__bosia/resume).
+// While held, rebuilds keep happening (latest code stays ready) but the reload
+// broadcast is suppressed; on resume a single reload is flushed if any rebuild
+// fired meanwhile. Defaults to off, so a plain `bosia dev` developer never sees
+// any behaviour change.
+let reloadHeld = false;
+let reloadQueuedWhileHeld = false;
+let holdSafetyTimer: ReturnType<typeof setTimeout> | null = null;
+// Safety net for a *dead* orchestrator only — NOT a task duration cap. While an
+// agent run is healthy the orchestrator heartbeats `/__bosia/hold` (re-arming
+// this timer), so it never fires mid-task no matter how long the task runs. It
+// fires only if the heartbeats stop (titoko crash, network partition), so a
+// missed resume can't freeze the preview forever. Must comfortably exceed the
+// heartbeat interval so one dropped ping doesn't trip it.
+const HOLD_SAFETY_MS = 90_000;
+
 function broadcastReload() {
+	if (reloadHeld) {
+		reloadQueuedWhileHeld = true;
+		return;
+	}
 	const msg = new TextEncoder().encode("event: reload\ndata: ok\n\n");
 	for (const ctrl of sseClients) {
 		try {
@@ -56,6 +76,41 @@ function broadcastReload() {
 	}
 }
 
+// 503 body served while the inner app server is mid-restart (rebuild after an
+// edit). Must be HTML carrying the SAME SSE reload client as the dev-500 page —
+// the bare text/plain version had no live `/__bosia/sse` connection, so once an
+// iframe landed here (e.g. a reload racing into a rebuild window) it stayed stuck
+// until a manual reload. With the client, the next `broadcastReload()` once the
+// app binds reloads this page automatically. Keep the literal phrase
+// "App server is starting" in the body: titoko's proxy retry matches on it.
+const STARTING_PAGE = `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Starting…</title>
+  <style>
+    html,body{margin:0;padding:0;height:100%;background:#0a0a0a;color:#e5e5e5;font:14px/1.5 ui-sans-serif,system-ui,-apple-system,sans-serif}
+    .wrap{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}
+    .dot{display:inline-block;width:10px;height:10px;background:#16a34a;border-radius:50%;margin-right:8px;vertical-align:middle;animation:p 1.4s ease-in-out infinite}
+    @keyframes p{0%,100%{opacity:1}50%{opacity:.3}}
+    h1{font-size:16px;font-weight:600;margin:0}
+  </style>
+</head>
+<body>
+  <div class="wrap"><h1><span class="dot"></span>App server is starting…</h1></div>
+  <script>
+    !function r(){
+      try{
+        var e=new EventSource("/__bosia/sse");
+        e.addEventListener("reload",function(){location.reload()});
+        e.onerror=function(){e.close();setTimeout(r,2000)};
+      }catch(_){setTimeout(r,2000)}
+    }();
+  </script>
+</body>
+</html>`;
+
 // ─── Build ────────────────────────────────────────────────
 
 const BUILD_SCRIPT = join(import.meta.dir, "build.ts");
@@ -235,6 +290,47 @@ const devServer = Bun.serve({
 			);
 		}
 
+		// Reload-hold control — host orchestrator (titoko) brackets an AI agent run
+		// so the preview reloads once when the agent finishes, not once per file
+		// edit. Both routes are idempotent and return small JSON.
+		//
+		// POST /__bosia/hold doubles as the heartbeat: the FIRST hold opens a fresh
+		// window (clears any stale queued reload); subsequent holds only re-arm the
+		// safety timer and MUST preserve `reloadQueuedWhileHeld`, or a heartbeat
+		// landing after a suppressed rebuild would drop the pending reload and
+		// resume would flush nothing.
+		if (url.pathname === "/__bosia/hold" && req.method === "POST") {
+			if (!reloadHeld) {
+				reloadHeld = true;
+				reloadQueuedWhileHeld = false;
+			}
+			if (holdSafetyTimer) clearTimeout(holdSafetyTimer);
+			holdSafetyTimer = setTimeout(() => {
+				holdSafetyTimer = null;
+				if (!reloadHeld) return;
+				console.warn("⏱️  Reload hold safety timeout — auto-resuming");
+				reloadHeld = false;
+				if (reloadQueuedWhileHeld) {
+					reloadQueuedWhileHeld = false;
+					broadcastReload();
+				}
+			}, HOLD_SAFETY_MS);
+			holdSafetyTimer.unref?.();
+			return Response.json({ ok: true, held: true });
+		}
+
+		if (url.pathname === "/__bosia/resume" && req.method === "POST") {
+			if (holdSafetyTimer) {
+				clearTimeout(holdSafetyTimer);
+				holdSafetyTimer = null;
+			}
+			reloadHeld = false;
+			const flushed = reloadQueuedWhileHeld;
+			reloadQueuedWhileHeld = false;
+			if (flushed) broadcastReload();
+			return Response.json({ ok: true, held: false, flushed });
+		}
+
 		// 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
@@ -283,9 +379,9 @@ const devServer = Bun.serve({
 					await Bun.sleep(250);
 					continue;
 				}
-				return new Response("App server is starting...", {
+				return new Response(STARTING_PAGE, {
 					status: 503,
-					headers: { "Content-Type": "text/plain", "Retry-After": "1" },
+					headers: { "Content-Type": "text/html; charset=utf-8", "Retry-After": "1" },
 				});
 			}
 		}

package/src/core/html.ts

@@ -19,6 +19,12 @@ export const distManifest: { js: string[]; css: string[]; entry: string } = (()
 export const isDev = process.env.NODE_ENV !== "production";
 const cacheBust = isDev ? `?v=${Date.now()}` : "";
 
+/** Inline theme bootstrap — runs before paint to avoid FOUC. theme ∈ light|dark|system (missing = system). */
+const THEME_INIT_JS =
+	"try{var t=localStorage.getItem('theme');" +
+	"document.documentElement.classList.toggle('dark'," +
+	"t==='dark'||((t===null||t==='system')&&window.matchMedia('(prefers-color-scheme: dark)').matches))}catch(_){}";
+
 // ─── Safe JSON Serialization ──────────────────────────────
 
 /** Escapes JSON for safe embedding inside <script> tags. Prevents XSS via </script> injection. */
@@ -156,7 +162,7 @@ export function buildHtml(
 			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` +
+			`  <script${n}>${THEME_INIT_JS}</script>\n` +
 			`  ${fallbackTitle}${head}` +
 			headCloseInterpolated +
 			(body ? "" : `\n${SPINNER}`) +
@@ -175,7 +181,7 @@ export function buildHtml(
   ${head}
   ${cssLinks}
   <link rel="stylesheet" href="/bosia-tw.css${cacheBust}">
-  <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>
+  <script${n}>${THEME_INIT_JS}</script>
 </head>
 <body>
   <div id="app">${body}</div>${scripts}${bodyEnd}
@@ -208,7 +214,7 @@ export function buildHtmlShellOpen(
 			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` +
+			`  <script${n}>${THEME_INIT_JS}</script>\n` +
 			`  <link rel="modulepreload" href="/dist/client/${distManifest.entry}${cacheBust}">`
 		);
 	}
@@ -220,7 +226,7 @@ export function buildHtmlShellOpen(
 		`  <link rel="icon" type="image/svg+xml" href="/favicon.svg">\n` +
 		`  ${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` +
+		`  <script${n}>${THEME_INIT_JS}</script>\n` +
 		`  <link rel="modulepreload" href="/dist/client/${distManifest.entry}${cacheBust}">`
 	);
 }

package/templates/default/package.json

@@ -12,7 +12,7 @@
 	},
 	"dependencies": {
 		"bosia": "^{{BOSIA_VERSION}}",
-		"svelte": "^5.20.0",
+		"svelte": "^5.56.3",
 		"tailwind-merge": "^3.5.0"
 	},
 	"devDependencies": {

package/templates/default/src/app.css

@@ -44,6 +44,10 @@
 	--radius-xl: calc(var(--radius) + 4px);
 }
 
+/* bosia-theme-vars: template default tokens. `bosia add theme` strips everything
+   between these markers (the installed theme owns these tokens). Do NOT add your
+   own :root rules inside the markers — put custom overrides after the close tag. */
+
 /* ─── Light Theme (Default) ─────────────────────────────── */
 
 :root {
@@ -110,6 +114,8 @@
 	--ring: 212.7 26.8% 83.9%;
 }
 
+/* /bosia-theme-vars */
+
 /* ─── Base Styles ────────────────────────────────────────── */
 
 @layer base {

package/templates/demo/package.json

@@ -12,7 +12,7 @@
 	},
 	"dependencies": {
 		"bosia": "^{{BOSIA_VERSION}}",
-		"svelte": "^5.20.0",
+		"svelte": "^5.56.3",
 		"tailwind-merge": "^3.5.0"
 	},
 	"devDependencies": {

package/templates/demo/src/app.css

@@ -44,6 +44,10 @@
 	--radius-xl: calc(var(--radius) + 4px);
 }
 
+/* bosia-theme-vars: template default tokens. `bosia add theme` strips everything
+   between these markers (the installed theme owns these tokens). Do NOT add your
+   own :root rules inside the markers — put custom overrides after the close tag. */
+
 /* ─── Light Theme (Default) ─────────────────────────────── */
 
 :root {
@@ -110,6 +114,8 @@
 	--ring: 212.7 26.8% 83.9%;
 }
 
+/* /bosia-theme-vars */
+
 /* ─── Base Styles ────────────────────────────────────────── */
 
 @layer base {

package/templates/shop/package.json

@@ -12,7 +12,7 @@
 	},
 	"dependencies": {
 		"bosia": "^{{BOSIA_VERSION}}",
-		"svelte": "^5.20.0",
+		"svelte": "^5.56.3",
 		"tailwind-merge": "^3.5.0",
 		"drizzle-orm": "^0.44.0"
 	},

package/templates/shop/src/app.css

@@ -44,6 +44,10 @@
 	--radius-xl: calc(var(--radius) + 4px);
 }
 
+/* bosia-theme-vars: template default tokens. `bosia add theme` strips everything
+   between these markers (the installed theme owns these tokens). Do NOT add your
+   own :root rules inside the markers — put custom overrides after the close tag. */
+
 /* ─── Light Theme (Default) ─────────────────────────────── */
 
 :root {
@@ -110,6 +114,8 @@
 	--ring: 212.7 26.8% 83.9%;
 }
 
+/* /bosia-theme-vars */
+
 /* ─── Base Styles ────────────────────────────────────────── */
 
 @layer base {

package/templates/todo/.env.example

@@ -1,2 +0,0 @@
-# Database
-DATABASE_URL=postgresql://postgres:postgres@localhost:5432/{{PROJECT_NAME}}

package/templates/todo/.prettierignore

@@ -1,7 +0,0 @@
-node_modules
-dist
-build
-.bosia
-bun.lock
-public/bosia-tw.css
-bosia.json

package/templates/todo/.prettierrc.json

@@ -1,9 +0,0 @@
-{
-	"useTabs": true,
-	"tabWidth": 2,
-	"singleQuote": false,
-	"trailingComma": "all",
-	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
-	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
-}

package/templates/todo/README.md

@@ -1,69 +0,0 @@
-# {{PROJECT_NAME}}
-
-A fullstack app built with [Bosia](https://github.com/bosapi/bosia) + Drizzle ORM + PostgreSQL.
-
-## Prerequisites
-
-- [Bun](https://bun.sh/) v1.1+
-- [PostgreSQL](https://www.postgresql.org/) running locally or remotely
-
-## Getting Started
-
-```bash
-# Copy env and set your DATABASE_URL
-cp .env.example .env
-
-# Push schema to database
-bun run db:push
-
-# Seed initial data
-bun run db:seed
-
-# Start dev server
-bun x bosia dev
-```
-
-Visit [http://localhost:9000](http://localhost:9000) to see the app.
-
-## Scripts
-
-| Command               | Description                            |
-| --------------------- | -------------------------------------- |
-| `bun x bosia dev`     | Start dev server with HMR              |
-| `bun x bosia build`   | Production build                       |
-| `bun x bosia start`   | Start production server                |
-| `bun run db:generate` | Generate migration from schema changes |
-| `bun run db:migrate`  | Apply pending migrations               |
-| `bun run db:push`     | Push schema directly (dev shortcut)    |
-| `bun run db:studio`   | Open Drizzle Studio GUI                |
-| `bun run db:seed`     | Run pending seed files                 |
-
-## Project Structure
-
-```
-src/
-├── features/
-│   ├── drizzle/          # DB infrastructure
-│   │   ├── index.ts      # Connection singleton
-│   │   ├── schemas.ts    # Schema aggregator
-│   │   ├── migrations/   # Drizzle Kit output
-│   │   └── seeds/        # Seed files + runner
-│   └── todo/             # Business feature
-│       ├── schemas/      # Table definitions
-│       ├── queries.ts    # Typed CRUD
-│       └── types.ts      # Inferred types
-├── lib/components/todo/  # UI components
-└── routes/
-    ├── todos/            # CRUD page with form actions
-    └── api/todos/        # REST API
-```
-
-## Adding Features
-
-```bash
-# Add DB support to any Bosia app
-bosia feat drizzle
-
-# Add the todo feature (requires drizzle)
-bosia feat todo
-```

package/templates/todo/_gitignore

@@ -1,12 +0,0 @@
-node_modules/
-dist/
-.bosia/
-.DS_Store
-*.log
-
-# Generated Tailwind output
-public/bosia-tw.css
-
-# Local env overrides — never commit secrets
-.env*.local
-.env

package/templates/todo/bosia.config.ts

@@ -1,10 +0,0 @@
-import { defineConfig } from "bosia";
-import { inspector } from "bosia/plugins/inspector";
-
-export default defineConfig({
-	plugins: [
-		// Dev-only: Alt+click any element on the page to open its source in your editor.
-		// Change `editor` to "cursor" or "zed" if you don't use VS Code.
-		inspector({ editor: "code" }),
-	],
-});

package/templates/todo/instructions.txt

@@ -1,3 +0,0 @@
-Update .env with your DATABASE_URL
-bun run db:generate
-bun run db:migrate

package/templates/todo/package.json

@@ -1,24 +0,0 @@
-{
-	"name": "{{PROJECT_NAME}}",
-	"private": true,
-	"type": "module",
-	"scripts": {
-		"dev": "bosia dev",
-		"build": "bosia build",
-		"start": "bosia start",
-		"check": "tsc --noEmit && prettier --check .",
-		"format": "prettier --write .",
-		"format:check": "prettier --check ."
-	},
-	"dependencies": {
-		"bosia": "^{{BOSIA_VERSION}}",
-		"svelte": "^5.20.0",
-		"tailwind-merge": "^3.5.0"
-	},
-	"devDependencies": {
-		"@types/bun": "latest",
-		"prettier": "^3.3.0",
-		"prettier-plugin-svelte": "^3.2.0",
-		"typescript": "^5"
-	}
-}

package/templates/todo/public/favicon.svg

@@ -1,14 +0,0 @@
-<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
-  <!-- Top block -->
-  <rect fill="currentColor" x="50" y="50" width="28" height="28" rx="6"/>
-  <rect fill="currentColor" x="86" y="50" width="60" height="28" rx="6"/>
-
-  <!-- Middle block -->
-  <rect fill="currentColor" x="86" y="86" width="72" height="28" rx="6"/>
-
-  <!-- Bottom block -->
-  <rect fill="currentColor" x="86" y="122" width="60" height="28" rx="6"/>
-
-  <!-- Connector bar on left -->
-  <rect fill="currentColor" x="50" y="50" width="28" height="100" rx="6"/>
-</svg>

package/templates/todo/public/logo-dark.svg

@@ -1,14 +0,0 @@
-<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
-  <!-- Top block -->
-  <rect fill="#f0f0f0" x="50" y="50" width="28" height="28" rx="6"/>
-  <rect fill="#f0f0f0" x="86" y="50" width="60" height="28" rx="6"/>
-
-  <!-- Middle block -->
-  <rect fill="#f0f0f0" x="86" y="86" width="72" height="28" rx="6"/>
-
-  <!-- Bottom block -->
-  <rect fill="#f0f0f0" x="86" y="122" width="60" height="28" rx="6"/>
-
-  <!-- Connector bar on left -->
-  <rect fill="#f0f0f0" x="50" y="50" width="28" height="100" rx="6"/>
-</svg>

package/templates/todo/public/logo-light.svg

@@ -1,14 +0,0 @@
-<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
-  <!-- Top block -->
-  <rect fill="#1a1a1a" x="50" y="50" width="28" height="28" rx="6"/>
-  <rect fill="#1a1a1a" x="86" y="50" width="60" height="28" rx="6"/>
-
-  <!-- Middle block -->
-  <rect fill="#1a1a1a" x="86" y="86" width="72" height="28" rx="6"/>
-
-  <!-- Bottom block -->
-  <rect fill="#1a1a1a" x="86" y="122" width="60" height="28" rx="6"/>
-
-  <!-- Connector bar on left -->
-  <rect fill="#1a1a1a" x="50" y="50" width="28" height="100" rx="6"/>
-</svg>

package/templates/todo/src/app.css

@@ -1,134 +0,0 @@
-@import "tailwindcss";
-@source "../src";
-
-@custom-variant dark (&:where(.dark, .dark *));
-
-/*
- * ─── shadcn-inspired Design Tokens ──────────────────────
- * CSS custom properties for light & dark themes.
- * Uses HSL values so Tailwind can apply opacity modifiers.
- */
-
-@theme {
-	--color-background: hsl(var(--background));
-	--color-foreground: hsl(var(--foreground));
-
-	--color-card: hsl(var(--card));
-	--color-card-foreground: hsl(var(--card-foreground));
-
-	--color-popover: hsl(var(--popover));
-	--color-popover-foreground: hsl(var(--popover-foreground));
-
-	--color-primary: hsl(var(--primary));
-	--color-primary-foreground: hsl(var(--primary-foreground));
-
-	--color-secondary: hsl(var(--secondary));
-	--color-secondary-foreground: hsl(var(--secondary-foreground));
-
-	--color-muted: hsl(var(--muted));
-	--color-muted-foreground: hsl(var(--muted-foreground));
-
-	--color-accent: hsl(var(--accent));
-	--color-accent-foreground: hsl(var(--accent-foreground));
-
-	--color-destructive: hsl(var(--destructive));
-	--color-destructive-foreground: hsl(var(--destructive-foreground));
-
-	--color-border: hsl(var(--border));
-	--color-input: hsl(var(--input));
-	--color-ring: hsl(var(--ring));
-
-	--radius-sm: calc(var(--radius) - 4px);
-	--radius-md: calc(var(--radius) - 2px);
-	--radius-lg: var(--radius);
-	--radius-xl: calc(var(--radius) + 4px);
-}
-
-/* ─── Light Theme (Default) ─────────────────────────────── */
-
-:root {
-	--background: 0 0% 100%;
-	--foreground: 222.2 84% 4.9%;
-
-	--card: 0 0% 100%;
-	--card-foreground: 222.2 84% 4.9%;
-
-	--popover: 0 0% 100%;
-	--popover-foreground: 222.2 84% 4.9%;
-
-	--primary: 222.2 47.4% 11.2%;
-	--primary-foreground: 210 40% 98%;
-
-	--secondary: 210 40% 96.1%;
-	--secondary-foreground: 222.2 47.4% 11.2%;
-
-	--muted: 210 40% 96.1%;
-	--muted-foreground: 215.4 16.3% 46.9%;
-
-	--accent: 210 40% 96.1%;
-	--accent-foreground: 222.2 47.4% 11.2%;
-
-	--destructive: 0 84.2% 60.2%;
-	--destructive-foreground: 210 40% 98%;
-
-	--border: 214.3 31.8% 91.4%;
-	--input: 214.3 31.8% 91.4%;
-	--ring: 222.2 84% 4.9%;
-
-	--radius: 0.5rem;
-}
-
-/* ─── Dark Theme ─────────────────────────────────────────── */
-
-.dark {
-	--background: 222.2 84% 4.9%;
-	--foreground: 210 40% 98%;
-
-	--card: 222.2 84% 4.9%;
-	--card-foreground: 210 40% 98%;
-
-	--popover: 222.2 84% 4.9%;
-	--popover-foreground: 210 40% 98%;
-
-	--primary: 210 40% 98%;
-	--primary-foreground: 222.2 47.4% 11.2%;
-
-	--secondary: 217.2 32.6% 17.5%;
-	--secondary-foreground: 210 40% 98%;
-
-	--muted: 217.2 32.6% 17.5%;
-	--muted-foreground: 215 20.2% 65.1%;
-
-	--accent: 217.2 32.6% 17.5%;
-	--accent-foreground: 210 40% 98%;
-
-	--destructive: 0 62.8% 30.6%;
-	--destructive-foreground: 210 40% 98%;
-
-	--border: 217.2 32.6% 17.5%;
-	--input: 217.2 32.6% 17.5%;
-	--ring: 212.7 26.8% 83.9%;
-}
-
-/* ─── Base Styles ────────────────────────────────────────── */
-
-@layer base {
-	* {
-		border-color: theme(--color-border);
-	}
-
-	body {
-		background-color: theme(--color-background);
-		color: theme(--color-foreground);
-		font-family:
-			"Inter",
-			system-ui,
-			-apple-system,
-			BlinkMacSystemFont,
-			"Segoe UI",
-			Roboto,
-			"Helvetica Neue",
-			Arial,
-			sans-serif;
-	}
-}

package/templates/todo/src/app.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="svelte" />
-
-declare module "*.svelte" {
-	import type { Component } from "svelte";
-	const component: Component<Record<string, any>, Record<string, any>, any>;
-	export default component;
-}
-
-declare namespace App {
-	interface Locals {
-		db: import("./features/drizzle").Database;
-		requestTime: number;
-	}
-}

package/templates/todo/src/app.html

@@ -1,11 +0,0 @@
-<!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/todo/src/hooks.server.ts

@@ -1,20 +0,0 @@
-import { sequence } from "bosia";
-import type { Handle } from "bosia";
-import { db } from "./features/drizzle";
-
-const dbHandle: Handle = async ({ event, resolve }) => {
-	event.locals.db = db;
-	return resolve(event);
-};
-
-const loggingHandle: Handle = async ({ event, resolve }) => {
-	const start = Date.now();
-	event.locals.requestTime = start;
-	const res = await resolve(event);
-	const ms = Date.now() - start;
-	console.log(`[${event.request.method}] ${event.url.pathname} ${res.status} (${ms}ms)`);
-	res.headers.set("X-Response-Time", `${ms}ms`);
-	return res;
-};
-
-export const handle = sequence(dbHandle, loggingHandle);

package/templates/todo/src/lib/utils.ts

@@ -1 +0,0 @@
-export { cn } from "bosia";

package/templates/todo/src/routes/(public)/+page.svelte

@@ -1,53 +0,0 @@
-<script lang="ts">
-	import type { LayoutData } from "./$types";
-	let { data }: { data: LayoutData } = $props();
-</script>
-
-<svelte:head>
-	<title>{data.appName}</title>
-</svelte:head>
-
-<div class="flex min-h-screen flex-col bg-background text-foreground">
-	<div class="flex flex-1 flex-col items-center justify-center gap-8 px-4">
-		<div class="text-center">
-			<img src="/favicon.svg" alt="" class="mx-auto mb-6 size-16" />
-			<h1 class="text-4xl font-bold tracking-tight">{data.appName}</h1>
-			<p class="mt-2 text-lg text-muted-foreground">
-				Fullstack app powered by Bosia + Drizzle ORM + PostgreSQL
-			</p>
-		</div>
-
-		<div class="flex gap-4">
-			<a
-				href="/todos"
-				class="inline-flex items-center justify-center rounded-md bg-primary px-6 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
-			>
-				Todo App
-			</a>
-			<a
-				href="/api/todos"
-				target="_blank"
-				class="inline-flex items-center justify-center rounded-md border border-input bg-background px-6 py-3 text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors"
-			>
-				REST API
-			</a>
-		</div>
-
-		<div class="mt-8 grid max-w-2xl grid-cols-1 gap-4 sm:grid-cols-3">
-			<div class="rounded-lg border border-border p-4 text-center">
-				<p class="text-sm font-medium">Bosia</p>
-				<p class="mt-1 text-xs text-muted-foreground">Bun + Svelte 5 + Elysia</p>
-			</div>
-			<div class="rounded-lg border border-border p-4 text-center">
-				<p class="text-sm font-medium">Drizzle ORM</p>
-				<p class="mt-1 text-xs text-muted-foreground">Type-safe SQL queries</p>
-			</div>
-			<div class="rounded-lg border border-border p-4 text-center">
-				<p class="text-sm font-medium">PostgreSQL</p>
-				<p class="mt-1 text-xs text-muted-foreground">Production-ready database</p>
-			</div>
-		</div>
-	</div>
-
-	<footer class="border-t py-4 text-center text-sm text-muted-foreground">Powered by Bosia</footer>
-</div>

package/templates/todo/src/routes/+error.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-	import type { ErrorProps } from "./$types";
-	let { error }: ErrorProps = $props();
-</script>
-
-<svelte:head>
-	<title>{error.status} — {error.message}</title>
-</svelte:head>
-
-<div class="min-h-screen flex flex-col items-center justify-center gap-4 text-center px-4">
-	<p class="text-8xl font-bold text-gray-200">{error.status}</p>
-	<p class="text-2xl font-semibold text-gray-700">{error.message}</p>
-	<a
-		href="/"
-		class="mt-4 px-5 py-2 rounded-lg bg-gray-900 text-white text-sm hover:bg-gray-700 transition-colors"
-	>
-		Go home
-	</a>
-</div>

package/templates/todo/src/routes/+layout.server.ts

@@ -1,8 +0,0 @@
-import type { LoadEvent } from "bosia";
-
-export async function load({ locals }: LoadEvent) {
-	return {
-		appName: "Bosia Todo",
-		requestTime: (locals.requestTime as number | null) ?? null,
-	};
-}

package/templates/todo/src/routes/+layout.svelte

@@ -1,6 +0,0 @@
-<script lang="ts">
-	import "../app.css";
-	let { children }: { children: any } = $props();
-</script>
-
-{@render children()}

package/templates/todo/template.json

@@ -1,6 +0,0 @@
-{
-	"features": ["todo"],
-	"featureOptions": {
-		"drizzle.dialect": "postgres"
-	}
-}

package/templates/todo/tsconfig.json

@@ -1,22 +0,0 @@
-{
-	"compilerOptions": {
-		"target": "ESNext",
-		"module": "ESNext",
-		"moduleResolution": "bundler",
-		"strict": true,
-		"allowJs": true,
-		"skipLibCheck": true,
-		"allowImportingTsExtensions": true,
-		"noEmit": true,
-		"verbatimModuleSyntax": true,
-		"types": ["bun-types"],
-		"lib": ["dom", "dom.iterable", "esnext"],
-		"rootDirs": [".", ".bosia/types"],
-		"paths": {
-			"$lib": ["./src/lib"],
-			"$lib/*": ["./src/lib/*"]
-		}
-	},
-	"include": ["src/**/*"],
-	"exclude": ["node_modules", "dist"]
-}