bosia 0.6.24 → 0.6.25

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bosia",
-	"version": "0.6.24",
+	"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[];
 }
 
@@ -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/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)
@@ -139,6 +144,8 @@ Examples:
   bun x bosia@latest add shop/cart           → src/lib/components/shop/cart/
   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/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/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/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 {