bosia 0.4.4 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bosia",
-	"version": "0.4.4",
+	"version": "0.5.0",
 	"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/client/App.svelte

@@ -3,7 +3,8 @@
 	import { findMatch } from "../matcher.ts";
 	import { clientRoutes } from "bosia:routes";
 	import { consumePrefetch, prefetchCache, dataUrl } from "./prefetch.ts";
-	import { appState } from "./appState.svelte.ts";
+	import { appState, clearDirty } from "./appState.svelte.ts";
+	import { captureSnapshot, liveContext, shouldRerun, type CacheEntry } from "./loaderCache.ts";
 	import { pickErrorPage } from "../errorMatch.ts";
 
 	let {
@@ -49,6 +50,10 @@
 	$effect(() => {
 		if (ssrMode) return;
 
+		// Subscribe to `invalidationTick` so `invalidate()` can wake the effect
+		// without a URL change.
+		void appState.invalidationTick;
+
 		const path = router.currentRoute;
 		const pathname = path.split("?")[0].split("#")[0];
 		const match = findMatch(clientRoutes, pathname);
@@ -68,6 +73,43 @@
 		navDone = false;
 		navigating = true;
 
+		// ─── Loader cache: decide which loaders need to re-run ─────────────
+		// For each layout depth + the page, compare the cached entry (if any)
+		// against the live URL/params and the dirty set. If everything is
+		// cacheable, skip the fetch entirely.
+		const url = new URL(path, window.location.origin);
+		const ctx = liveContext(pathname, match.params, url);
+		const layoutIds = (match.route as any).layoutIds as (string | null)[];
+		const pageId = (match.route as any).pageId as string | null;
+
+		const layoutRunFlags: boolean[] = layoutIds.map((id) => {
+			if (id === null) return false; // no server loader at this depth
+			const entry = appState.loaderCache.layouts[id];
+			if (!entry) return true; // never loaded → must run
+			return shouldRerun(entry, appState.dirty, ctx);
+		});
+
+		let pageRun = false;
+		if (pageId !== null) {
+			const entry = appState.loaderCache.page;
+			if (!entry || entry.nodeId !== pageId) {
+				pageRun = true;
+			} else {
+				pageRun = shouldRerun(entry, appState.dirty, ctx);
+			}
+		}
+
+		// Build `_invalidated=<bits>` — char 0 = page, char i+1 = layouts[i].
+		// '1' = run, '0' = skip. Always sent so the server honors cached layers.
+		// We always issue the fetch (even when all loaders skip) so page-level
+		// metadata stays fresh on every navigation; only the loaders flagged in
+		// the mask actually run server-side.
+		const maskBits =
+			(pageRun ? "1" : "0") + layoutRunFlags.map((b) => (b ? "1" : "0")).join("");
+
+		// Clear dirty set now — we've baked it into the mask.
+		clearDirty();
+
 		// Load components + data in parallel, then update state atomically
 		// to avoid a flash of stale/empty data before the fetch completes.
 		const cached = match.route.hasServerData ? consumePrefetch(path) : null;
@@ -75,7 +117,7 @@
 		const dataFetch = cached
 			? Promise.resolve(cached)
 			: match.route.hasServerData
-				? fetch(dataUrl(path))
+				? fetch(dataUrl(path, maskBits))
 						.then((r) => r.json())
 						.catch(() => null)
 				: Promise.resolve(null);
@@ -143,9 +185,83 @@
 			}
 			PageComponent = pageMod.default;
 			layoutComponents = layoutMods.map((m: any) => m.default);
-			appState.pageData = result?.pageData ?? {};
-			appState.layoutData = result?.layoutData ?? [];
-			appState.routeParams = result?.pageData?.params ?? match.params;
+
+			// Merge sparse server response with the existing client cache.
+			// Slots the server returned null for were intentionally skipped — we
+			// must pull their data from the cache to keep rendering correct.
+			const respLayoutData: (Record<string, any> | null)[] = result?.layoutData ?? [];
+			const respLayoutDeps: (any | null)[] = result?.layoutDeps ?? [];
+			const respPageData: Record<string, any> | null | undefined = result?.pageData;
+			const respPageDeps: any = result?.pageDeps ?? null;
+
+			const mergedLayoutData: Record<string, any>[] = [];
+			for (let i = 0; i < layoutIds.length; i++) {
+				const id = layoutIds[i];
+				if (id === null) {
+					mergedLayoutData.push({});
+					continue;
+				}
+				if (respLayoutData[i] !== null && respLayoutData[i] !== undefined) {
+					const entry: CacheEntry = {
+						nodeId: id,
+						data: respLayoutData[i] as Record<string, any>,
+						deps: respLayoutDeps[i] ?? {
+							keys: [],
+							urls: [],
+							params: [],
+							searchParams: [],
+							cookies: [],
+							uses_url: false,
+						},
+						snapshot: captureSnapshot(
+							respLayoutDeps[i] ?? {
+								keys: [],
+								urls: [],
+								params: [],
+								searchParams: [],
+								cookies: [],
+								uses_url: false,
+							},
+							ctx,
+						),
+					};
+					appState.loaderCache.layouts[id] = entry;
+					mergedLayoutData.push(entry.data);
+				} else {
+					const cachedEntry = appState.loaderCache.layouts[id];
+					mergedLayoutData.push(cachedEntry?.data ?? {});
+				}
+			}
+
+			let mergedPageData: Record<string, any>;
+			if (respPageData !== null && respPageData !== undefined) {
+				const deps = respPageDeps ?? {
+					keys: [],
+					urls: [],
+					params: [],
+					searchParams: [],
+					cookies: [],
+					uses_url: false,
+				};
+				const entry: CacheEntry = {
+					nodeId: pageId ?? "",
+					data: respPageData,
+					deps,
+					snapshot: captureSnapshot(deps, ctx),
+				};
+				if (pageId !== null) appState.loaderCache.page = entry;
+				mergedPageData = respPageData;
+			} else if (appState.loaderCache.page && appState.loaderCache.page.nodeId === pageId) {
+				mergedPageData = appState.loaderCache.page.data;
+			} else {
+				mergedPageData = {};
+			}
+
+			// Always overlay current match.params — cached pageData carries the
+			// stale params from when the loader ran, so trust the live match.
+			appState.pageData = { ...mergedPageData, params: match.params };
+			appState.layoutData = mergedLayoutData;
+			appState.routeParams = match.params;
 			// Successful navigation — clear any prior error state.
 			appState.errorComponent = null;
 			appState.errorProps = null;

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

@@ -7,8 +7,7 @@
 // `ssrMode` and reads from `ssrXxx` props directly during SSR,
 // so concurrent requests don't share these cells.
 
-import { dataUrl } from "./prefetch.ts";
-import { router } from "./router.svelte.ts";
+import type { CacheEntry, DirtyState } from "./loaderCache.ts";
 
 class AppState {
 	pageData = $state<Record<string, any>>({});
@@ -21,43 +20,31 @@ class AppState {
 	errorComponent = $state<any>(null);
 	errorProps = $state<{ error: { status: number; message: string } } | null>(null);
 	errorDepth = $state<number | null>(null);
+	// Loader cache — keyed by stable id (codegen-emitted server file path).
+	// Mirrors the most recent successful run of each layout/page server loader.
+	// Wiped on hard refresh, never persisted.
+	loaderCache: { page: CacheEntry | null; layouts: Record<string, CacheEntry> } = {
+		page: null,
+		layouts: {},
+	};
+	// Pending invalidations consumed by the next data fetch. Mutated by
+	// `invalidate()` / `invalidateAll()` and cleared after the request fires.
+	dirty: DirtyState = {
+		all: false,
+		keys: new Set<string>(),
+		urls: new Set<string>(),
+		urlMatchers: [],
+	};
+	// Bumped by `invalidate*()` to wake the App.svelte nav effect, so calling
+	// `invalidate("k")` re-runs the loader pipeline without changing the URL.
+	invalidationTick = $state(0);
 }
 
 export const appState = new AppState();
 
-/**
- * Re-fetch loader data for the given path and apply to `appState`.
- * Used by `use:enhance` after a successful action — mirrors SvelteKit's
- * `invalidateAll` default. No-op if the fetch fails or returns an error.
- */
-export async function refreshData(path: string): Promise<void> {
-	try {
-		const res = await fetch(dataUrl(path));
-		if (!res.ok) return;
-		const result = await res.json();
-		if (result?.redirect) {
-			router.navigate(result.redirect);
-			return;
-		}
-		if (result?.error) return;
-		appState.pageData = result?.pageData ?? {};
-		appState.layoutData = result?.layoutData ?? [];
-		appState.routeParams = result?.pageData?.params ?? appState.routeParams;
-		if (result?.metadata) {
-			if (result.metadata.title) document.title = result.metadata.title;
-			if (result.metadata.description) {
-				let meta = document.querySelector(
-					'meta[name="description"]',
-				) as HTMLMetaElement | null;
-				if (!meta) {
-					meta = document.createElement("meta");
-					meta.name = "description";
-					document.head.appendChild(meta);
-				}
-				meta.content = result.metadata.description;
-			}
-		}
-	} catch {
-		// best-effort — silently swallow
-	}
+export function clearDirty(): void {
+	appState.dirty.all = false;
+	appState.dirty.keys.clear();
+	appState.dirty.urls.clear();
+	appState.dirty.urlMatchers = [];
 }

package/src/core/client/enhance.ts

@@ -5,7 +5,7 @@
 // full page reload. Falls back to native form submission when JS is
 // disabled because nothing is wired up until this action runs.
 
-import { appState, refreshData } from "./appState.svelte.ts";
+import { appState } from "./appState.svelte.ts";
 import { router } from "./router.svelte.ts";
 
 export type ActionResult =
@@ -53,7 +53,11 @@ async function applyResult(
 	appState.form = result.data;
 	if (reset) form.reset();
 	if (invalidateAll) {
-		await refreshData(window.location.pathname + window.location.search);
+		// Form actions invalidate the page loader only by default — layouts
+		// stay cached. Loaders that need to react to a mutation should call
+		// `invalidate("app:key")` from the action's submit handler.
+		appState.loaderCache.page = null;
+		appState.invalidationTick = appState.invalidationTick + 1;
 	}
 }
 

package/src/core/client/hydrate.ts

@@ -5,10 +5,22 @@ import { initPrefetch } from "./prefetch.ts";
 import { findMatch, compileRoutes, canonicalPathname } from "../matcher.ts";
 import { clientRoutes } from "bosia:routes";
 import { appState } from "./appState.svelte.ts";
+import { captureSnapshot, liveContext, type CacheEntry } from "./loaderCache.ts";
+import type { LoaderDeps } from "../hooks.ts";
 
 // Pre-compile route patterns into RegExp at startup (shared by App.svelte and router via module reference)
 compileRoutes(clientRoutes);
 
+function readJsonScript<T>(id: string): T | null {
+	const el = document.getElementById(id);
+	if (!el) return null;
+	try {
+		return JSON.parse(el.textContent ?? "null") as T;
+	} catch {
+		return null;
+	}
+}
+
 // ─── Hydration ────────────────────────────────────────────
 
 async function main() {
@@ -49,9 +61,9 @@ async function main() {
 		router.params = match.params;
 	}
 
-	const ssrPageData = (window as any).__BOSIA_PAGE_DATA__ ?? {};
-	const ssrLayoutData = (window as any).__BOSIA_LAYOUT_DATA__ ?? [];
-	const ssrFormData = (window as any).__BOSIA_FORM_DATA__ ?? null;
+	const ssrPageData = readJsonScript<Record<string, any>>("__bosia-page-data__") ?? {};
+	const ssrLayoutData = readJsonScript<Record<string, any>[]>("__bosia-layout-data__") ?? [];
+	const ssrFormData = readJsonScript<Record<string, any>>("__bosia-form-data__");
 
 	// Seed shared client state so `use:enhance` and other helpers
 	// start from the same values App.svelte renders during hydration.
@@ -60,6 +72,42 @@ async function main() {
 	appState.routeParams = ssrPageData?.params ?? match?.params ?? {};
 	appState.form = ssrFormData;
 
+	// Seed the loader cache from window globals emitted server-side so the
+	// next client navigation can decide which loaders to skip without an
+	// extra fetch round-trip.
+	if (match) {
+		const url = new URL(window.location.href);
+		const ctx = liveContext(window.location.pathname, match.params, url);
+		const ssrPageDeps: LoaderDeps | null = (window as any).__BOSIA_PAGE_DEPS__ ?? null;
+		const ssrLayoutDeps: (LoaderDeps | null)[] = (window as any).__BOSIA_LAYOUT_DEPS__ ?? [];
+		const pageId = (match.route as any).pageId as string | null;
+		const layoutIds = (match.route as any).layoutIds as (string | null)[];
+
+		if (pageId !== null && ssrPageDeps && ssrPageData) {
+			const entry: CacheEntry = {
+				nodeId: pageId,
+				data: ssrPageData,
+				deps: ssrPageDeps,
+				snapshot: captureSnapshot(ssrPageDeps, ctx),
+			};
+			appState.loaderCache.page = entry;
+		}
+		for (let i = 0; i < layoutIds.length; i++) {
+			const id = layoutIds[i];
+			if (id === null) continue;
+			const deps = ssrLayoutDeps[i];
+			const data = ssrLayoutData[i];
+			if (!deps || !data) continue;
+			const entry: CacheEntry = {
+				nodeId: id,
+				data,
+				deps,
+				snapshot: captureSnapshot(deps, ctx),
+			};
+			appState.loaderCache.layouts[id] = entry;
+		}
+	}
+
 	const target = document.getElementById("app")!;
 	const props = {
 		ssrMode: false,