@sigil-dev/grimoire 0.7.7 → 0.8.0

package/package.json

@@ -3,7 +3,7 @@
   "module": "index.ts",
   "type": "module",
   "private": false,
-  "version": "0.7.7",
+  "version": "0.8.0",
   "exports": {
     ".": "./index.ts",
     "./server": "./server.ts",
@@ -32,13 +32,13 @@
     "vite": "^8.0.16"
   },
   "peerDependencies": {
-    "@sigil-dev/compiler": "0.7.7",
-    "@sigil-dev/runtime": "0.7.7",
+    "@sigil-dev/compiler": "0.8.0",
+    "@sigil-dev/runtime": "0.8.0",
     "typescript": "^5"
   },
   "devDependencies": {
     "@types/bun": "latest",
-    "@sigil-dev/compiler": "0.7.7",
-    "@sigil-dev/runtime": "0.7.7"
+    "@sigil-dev/compiler": "0.8.0",
+    "@sigil-dev/runtime": "0.8.0"
   }
 }

package/src/client/router.ts

@@ -1,290 +1,291 @@
-import { popHydrationNodes, pushHydrationNodes } from "@sigil-dev/runtime";
-import { withEffectScope } from "./scope";
-
-let routeMap: Record<
-	string,
-	((props: any) => any) & { load?: (ctx: any) => Promise<any> }
-> = {};
-let layoutList: { path: string; component: (props: any) => any }[] = [];
-let disposeCurrentPage: (() => void) | null = null;
-let currentPath = location.pathname;
-
-// C1: Navigation hooks
-let beforeNavigateCb: ((url: URL) => boolean | void) | null = null;
-let onNavigateCb: ((url: URL) => void) | null = null;
-let afterNavigateCb: ((url: URL) => void) | null = null;
-
-// // HMR
-// (globalThis as any).__grimoire_routes__ = routeMap;
-// (globalThis as any).__grimoire_current_pattern__ = currentPath;
-// (globalThis as any).__grimoire_navigate__ = navigate;
-
-export async function hmrRerender(): Promise<void> {
-	if (!lastState) {
-		location.reload();
-		return;
-	}
-	disposeCurrentPage?.();
-	pushHydrationNodes([]);
-	let rootNode: any;
-	disposeCurrentPage = withEffectScope(() => {
-		rootNode = buildRouteTree(lastState!);
-	});
-	popHydrationNodes();
-	document.getElementById("grimoire-root")?.replaceChildren(rootNode);
-}
-
-// (globalThis as any).__grimoire_rerender__ = hmrRerender;
-
-export function beforeNavigate(cb: (url: URL) => boolean | void): void {
-	beforeNavigateCb = cb;
-}
-
-export function onNavigate(cb: (url: URL) => void): void {
-	onNavigateCb = cb;
-}
-
-export function afterNavigate(cb: (url: URL) => void): void {
-	afterNavigateCb = cb;
-}
-
-// C2: Scroll restoration
-const scrollPositions = new Map<string, number>();
-
-function saveScrollPosition(): void {
-	scrollPositions.set(currentPath, window.scrollY);
-}
-
-function restoreScrollPosition(path: string): void {
-	const saved = scrollPositions.get(path);
-	if (saved !== undefined) {
-		requestAnimationFrame(() => window.scrollTo(0, saved));
-	} else {
-		requestAnimationFrame(() => window.scrollTo(0, 0));
-	}
-}
-
-// C3: Preloading
-let preloadTimer: Timer | null = null;
-
-function setupPreload(): void {
-	document.addEventListener("mouseover", (e) => {
-		const a = (e.target as Element).closest("a");
-		if (!a) return;
-		const href = a.getAttribute("href");
-		if (!href) return;
-		if (/^(https?:\/\/|\/\/|#|mailto:|tel:)/.test(href)) return;
-
-		const preloadData = a.hasAttribute("data-sigil-preload-data");
-		const preloadCode = a.hasAttribute("data-sigil-preload-code");
-		if (!preloadData && !preloadCode) return;
-
-		if (preloadTimer) clearTimeout(preloadTimer);
-		preloadTimer = setTimeout(() => {
-			if (preloadCode) {
-				const link = document.createElement("link");
-				link.rel = "prefetch";
-				link.href = href;
-				document.head.appendChild(link);
-			}
-			if (preloadData) {
-				fetch(href, {
-					headers: { "x-grimoire-navigate": "1" },
-					priority: "low",
-				}).catch(() => {});
-			}
-		}, 80);
-	});
-
-	document.addEventListener("mouseout", (e) => {
-		const a = (e.target as Element).closest("a");
-		if (!a) return;
-		if (preloadTimer) clearTimeout(preloadTimer);
-	});
-}
-
-let lastState: {
-	data: any;
-	layoutData: any[];
-	params: any;
-	pattern: string;
-} | null = null;
-
-function buildRouteTree(state: typeof lastState): any {
-	const { data, layoutData, params, pattern } = state!;
-	const Page = routeMap[pattern];
-	if (!Page) throw new Error(`no component for pattern ${pattern}`);
-
-	const matchedLayouts = layoutList
-		.filter(
-			(l) =>
-				l.path === "/" ||
-				pattern === l.path ||
-				pattern.startsWith(l.path + "/"),
-		)
-		.sort((a, b) => a.path.length - b.path.length);
-
-	let renderFn = () => {
-		const pageNode = Page({ data, params });
-		const pageDiv = document.createElement("div");
-		pageDiv.id = "grimoire-page";
-		pageDiv.appendChild(pageNode);
-		return pageDiv;
-	};
-
-	for (let i = matchedLayouts.length - 1; i >= 0; i--) {
-		const LayoutComponent = matchedLayouts[i].component;
-		const innerRender = renderFn;
-		const currentLayoutData = layoutData?.[i];
-		renderFn = () => {
-			const childNode = innerRender();
-			return LayoutComponent({
-				data: currentLayoutData,
-				params,
-				children: childNode,
-			});
-		};
-	}
-
-	return renderFn();
-}
-
-export async function navigate(path: string) {
-	const url = new URL(path, location.origin);
-
-	if (beforeNavigateCb) {
-		const shouldProceed = beforeNavigateCb(url);
-		if (shouldProceed === false) return;
-	}
-	onNavigateCb?.(url);
-	saveScrollPosition();
-
-	const res = await fetch(path, { headers: { "x-grimoire-navigate": "1" } });
-	const contentType = res.headers.get("content-type") ?? "";
-	if (!contentType.includes("application/json")) {
-		window.location.href = path;
-		return;
-	}
-	const json = await res.json();
-	const { data, layoutData, params, pattern, head } = json;
-	const Page = routeMap[pattern];
-	if (!Page) {
-		window.location.href = path;
-		return;
-	}
-
-	let mergedData = data;
-	if (Page.load) {
-		try {
-			const clientData = await Page.load({
-				params,
-				url,
-				request: new Request(url),
-			});
-			mergedData = { ...clientData, ...data };
-		} catch (e: any) {
-			if (e?.location) {
-				window.location.href = e.location;
-				return;
-			}
-			console.error("[grimoire] universal load error:", e);
-		}
-	}
-
-	// track state for HMR rerender
-	lastState = { data: mergedData, layoutData, params, pattern };
-	(globalThis as any).__grimoire_current_pattern__ = pattern;
-
-	disposeCurrentPage?.();
-	disposeCurrentPage = null;
-	pushHydrationNodes([]);
-	let rootNode: any;
-	disposeCurrentPage = withEffectScope(() => {
-		try {
-			rootNode = buildRouteTree(lastState!);
-		} catch (e) {
-			console.error(e);
-		}
-	});
-	popHydrationNodes();
-
-	updateHead(head);
-	document.title = head?.title ?? document.title;
-	document.getElementById("grimoire-root")?.replaceChildren(rootNode);
-	currentPath = path;
-	restoreScrollPosition(path);
-	afterNavigateCb?.(url);
-}
-
-export function initRouter(
-	routes: Record<
-		string,
-		((props: any) => any) & { load?: (ctx: any) => Promise<any> }
-	>,
-	layouts: any[],
-	initialDispose?: () => void,
-) {
-	routeMap = routes;
-	layoutList = layouts;
-	disposeCurrentPage = initialDispose ?? null;
-	currentPath = location.pathname;
-
-	// set initial HMR state from SSR
-	const stateEl = document.getElementById("__grimoire_state__");
-	if (stateEl) {
-		const state = JSON.parse(stateEl.textContent!);
-		lastState = {
-			data: state.data,
-			layoutData: state.layoutData,
-			params: state.params,
-			pattern: state.pattern,
-		};
-		(globalThis as any).__grimoire_current_pattern__ = state.pattern;
-		(globalThis as any).__grimoire_routes__ = routeMap;
-		(globalThis as any).__grimoire_rerender__ = hmrRerender;
-		(globalThis as any).__grimoire_navigate__ = (path: string) =>
-			navigate(path);
-	}
-
-	saveScrollPosition();
-	document.addEventListener("click", handleClick);
-	window.addEventListener("popstate", () => {
-		if (location.pathname !== currentPath) {
-			saveScrollPosition();
-			currentPath = location.pathname;
-			navigate(location.pathname);
-		}
-	});
-	setupPreload();
-}
-
-function updateHead(headHtml: string) {
-	document
-		.querySelectorAll("[data-grimoire-head]")
-		//biome-ignore lint/suspicious/useIterableCallbackReturn: shut up
-		.forEach((el) => el.remove());
-	const parsed = headHtml
-		? new DOMParser().parseFromString(`<head>${headHtml}</head>`, "text/html")
-		: null;
-	const incomingTitle = parsed?.querySelector("title");
-	//biome-ignore lint/suspicious/useIterableCallbackReturn: shut up
-	document.querySelectorAll("title").forEach((el) => el.remove());
-	document.title = incomingTitle?.textContent ?? document.title;
-	if (parsed) {
-		for (const el of Array.from(parsed.head.children)) {
-			if (el.tagName === "TITLE") continue;
-			(el as HTMLElement).dataset.grimoireHead = "1";
-			document.head.appendChild(el);
-		}
-	}
-}
-
-function handleClick(e: MouseEvent) {
-	const a = (e.target as Element).closest("a");
-	if (!a) return;
-	const href = a.getAttribute("href");
-	if (!href) return;
-	if (/^(https?:\/\/|\/\/|#|mailto:|tel:)/.test(href)) return;
-	e.preventDefault();
-	navigate(href);
-}
+import { popHydrationNodes, pushHydrationNodes } from "@sigil-dev/runtime";
+import { withEffectScope } from "./scope";
+
+let routeMap: Record<
+	string,
+	((props: any) => any) & { load?: (ctx: any) => Promise<any> }
+> = {};
+let layoutList: { path: string; component: (props: any) => any }[] = [];
+let disposeCurrentPage: (() => void) | null = null;
+let currentPath = location.pathname;
+
+// C1: Navigation hooks
+let beforeNavigateCb: ((url: URL) => boolean | void) | null = null;
+let onNavigateCb: ((url: URL) => void) | null = null;
+let afterNavigateCb: ((url: URL) => void) | null = null;
+
+// // HMR
+// (globalThis as any).__grimoire_routes__ = routeMap;
+// (globalThis as any).__grimoire_current_pattern__ = currentPath;
+// (globalThis as any).__grimoire_navigate__ = navigate;
+
+export async function hmrRerender(): Promise<void> {
+	if (!lastState) {
+		location.reload();
+		return;
+	}
+	disposeCurrentPage?.();
+	pushHydrationNodes([]);
+	let rootNode: any;
+	disposeCurrentPage = withEffectScope(() => {
+		rootNode = buildRouteTree(lastState!);
+	});
+	popHydrationNodes();
+	document.getElementById("grimoire-root")?.replaceChildren(rootNode);
+}
+
+// (globalThis as any).__grimoire_rerender__ = hmrRerender;
+
+export function beforeNavigate(cb: (url: URL) => boolean | void): void {
+	beforeNavigateCb = cb;
+}
+
+export function onNavigate(cb: (url: URL) => void): void {
+	onNavigateCb = cb;
+}
+
+export function afterNavigate(cb: (url: URL) => void): void {
+	afterNavigateCb = cb;
+}
+
+// C2: Scroll restoration
+const scrollPositions = new Map<string, number>();
+
+function saveScrollPosition(): void {
+	scrollPositions.set(currentPath, window.scrollY);
+}
+
+function restoreScrollPosition(path: string): void {
+	const saved = scrollPositions.get(path);
+	if (saved !== undefined) {
+		requestAnimationFrame(() => window.scrollTo(0, saved));
+	} else {
+		requestAnimationFrame(() => window.scrollTo(0, 0));
+	}
+}
+
+// C3: Preloading
+let preloadTimer: Timer | null = null;
+
+function setupPreload(): void {
+	document.addEventListener("mouseover", (e) => {
+		const a = (e.target as Element).closest("a");
+		if (!a) return;
+		const href = a.getAttribute("href");
+		if (!href) return;
+		if (/^(https?:\/\/|\/\/|#|mailto:|tel:)/.test(href)) return;
+
+		const preloadData = a.hasAttribute("data-sigil-preload-data");
+		const preloadCode = a.hasAttribute("data-sigil-preload-code");
+		if (!preloadData && !preloadCode) return;
+
+		if (preloadTimer) clearTimeout(preloadTimer);
+		preloadTimer = setTimeout(() => {
+			if (preloadCode) {
+				const link = document.createElement("link");
+				link.rel = "prefetch";
+				link.href = href;
+				document.head.appendChild(link);
+			}
+			if (preloadData) {
+				fetch(href, {
+					headers: { "x-grimoire-navigate": "1" },
+					priority: "low",
+				}).catch(() => {});
+			}
+		}, 80);
+	});
+
+	document.addEventListener("mouseout", (e) => {
+		const a = (e.target as Element).closest("a");
+		if (!a) return;
+		if (preloadTimer) clearTimeout(preloadTimer);
+	});
+}
+
+let lastState: {
+	data: any;
+	layoutData: any[];
+	params: any;
+	pattern: string;
+} | null = null;
+
+function buildRouteTree(state: typeof lastState): any {
+	const { data, layoutData, params, pattern } = state!;
+	const Page = routeMap[pattern];
+	if (!Page) throw new Error(`no component for pattern ${pattern}`);
+
+	const matchedLayouts = layoutList
+		.filter(
+			(l) =>
+				l.path === "/" ||
+				pattern === l.path ||
+				pattern.startsWith(l.path + "/"),
+		)
+		.sort((a, b) => a.path.length - b.path.length);
+
+	let renderFn = () => {
+		const pageNode = Page({ data, params });
+		const pageDiv = document.createElement("div");
+		pageDiv.id = "grimoire-page";
+		pageDiv.appendChild(pageNode);
+		return pageDiv;
+	};
+
+	for (let i = matchedLayouts.length - 1; i >= 0; i--) {
+		const LayoutComponent = matchedLayouts[i].component;
+		const innerRender = renderFn;
+		const currentLayoutData = layoutData?.[i];
+		renderFn = () => {
+			const childNode = innerRender();
+			return LayoutComponent({
+				data: currentLayoutData,
+				params,
+				children: childNode,
+			});
+		};
+	}
+
+	return renderFn();
+}
+
+export async function navigate(path: string) {
+	const url = new URL(path, location.origin);
+
+	if (beforeNavigateCb) {
+		const shouldProceed = beforeNavigateCb(url);
+		if (shouldProceed === false) return;
+	}
+	onNavigateCb?.(url);
+	saveScrollPosition();
+
+	const res = await fetch(path, { headers: { "x-grimoire-navigate": "1" } });
+	const contentType = res.headers.get("content-type") ?? "";
+	if (!contentType.includes("application/json")) {
+		window.location.href = path;
+		return;
+	}
+	const json = await res.json();
+	const { data, layoutData, params, pattern, head } = json;
+	const Page = routeMap[pattern];
+	if (!Page) {
+		window.location.href = path;
+		return;
+	}
+
+	let mergedData = data;
+	if (Page.load) {
+		try {
+			const clientData = await Page.load({
+				params,
+				url,
+				request: new Request(url),
+			});
+			mergedData = { ...clientData, ...data };
+		} catch (e: any) {
+			if (e?.location) {
+				window.location.href = e.location;
+				return;
+			}
+			console.error("[grimoire] universal load error:", e);
+		}
+	}
+
+	// track state for HMR rerender
+	lastState = { data: mergedData, layoutData, params, pattern };
+	(globalThis as any).__grimoire_current_pattern__ = pattern;
+
+	disposeCurrentPage?.();
+	disposeCurrentPage = null;
+	pushHydrationNodes([]);
+	let rootNode: any;
+	disposeCurrentPage = withEffectScope(() => {
+		try {
+			rootNode = buildRouteTree(lastState!);
+		} catch (e) {
+			console.error(e);
+		}
+	});
+	popHydrationNodes();
+
+	updateHead(head);
+	document.title = head?.title ?? document.title;
+	document.getElementById("grimoire-root")?.replaceChildren(rootNode);
+	currentPath = path;
+	history.pushState(null, "", path);
+	restoreScrollPosition(path);
+	afterNavigateCb?.(url);
+}
+
+export function initRouter(
+	routes: Record<
+		string,
+		((props: any) => any) & { load?: (ctx: any) => Promise<any> }
+	>,
+	layouts: any[],
+	initialDispose?: () => void,
+) {
+	routeMap = routes;
+	layoutList = layouts;
+	disposeCurrentPage = initialDispose ?? null;
+	currentPath = location.pathname;
+
+	// set initial HMR state from SSR
+	const stateEl = document.getElementById("__grimoire_state__");
+	if (stateEl) {
+		const state = JSON.parse(stateEl.textContent!);
+		lastState = {
+			data: state.data,
+			layoutData: state.layoutData,
+			params: state.params,
+			pattern: state.pattern,
+		};
+		(globalThis as any).__grimoire_current_pattern__ = state.pattern;
+		(globalThis as any).__grimoire_routes__ = routeMap;
+		(globalThis as any).__grimoire_rerender__ = hmrRerender;
+		(globalThis as any).__grimoire_navigate__ = (path: string) =>
+			navigate(path);
+	}
+
+	saveScrollPosition();
+	document.addEventListener("click", handleClick);
+	window.addEventListener("popstate", () => {
+		if (location.pathname !== currentPath) {
+			saveScrollPosition();
+			currentPath = location.pathname;
+			navigate(location.pathname);
+		}
+	});
+	setupPreload();
+}
+
+function updateHead(headHtml: string) {
+	document
+		.querySelectorAll("[data-grimoire-head]")
+		//biome-ignore lint/suspicious/useIterableCallbackReturn: shut up
+		.forEach((el) => el.remove());
+	const parsed = headHtml
+		? new DOMParser().parseFromString(`<head>${headHtml}</head>`, "text/html")
+		: null;
+	const incomingTitle = parsed?.querySelector("title");
+	//biome-ignore lint/suspicious/useIterableCallbackReturn: shut up
+	document.querySelectorAll("title").forEach((el) => el.remove());
+	document.title = incomingTitle?.textContent ?? document.title;
+	if (parsed) {
+		for (const el of Array.from(parsed.head.children)) {
+			if (el.tagName === "TITLE") continue;
+			(el as HTMLElement).dataset.grimoireHead = "1";
+			document.head.appendChild(el);
+		}
+	}
+}
+
+function handleClick(e: MouseEvent) {
+	const a = (e.target as Element).closest("a");
+	if (!a) return;
+	const href = a.getAttribute("href");
+	if (!href) return;
+	if (/^(https?:\/\/|\/\/|#|mailto:|tel:)/.test(href)) return;
+	e.preventDefault();
+	navigate(href);
+}

package/src/rendering/hydrate.ts

@@ -1,120 +1,119 @@
-//@ts-expect-error compiler generated
-
-import {
-	claim,
-	getHydrationNodes,
-	insert,
-	popHydrationNodes,
-	pushHydrationNodes,
-} from "@sigil-dev/runtime";
-import { layouts, routes } from "#grimoire-routes";
-import {
-	afterNavigate,
-	beforeNavigate,
-	navigate,
-	onNavigate,
-} from "../client/router";
-import { initRouter } from "../client/router.ts";
-import { withEffectScope } from "../client/scope.ts";
-import { Head } from "./head";
-
-// expose for HMR module shim
-(globalThis as any).__grimoire_Head__ = Head;
-(globalThis as any).__grimoire_navigate__ = navigate;
-(globalThis as any).__grimoire_beforeNavigate__ = beforeNavigate;
-(globalThis as any).__grimoire_onNavigate__ = onNavigate;
-(globalThis as any).__grimoire_afterNavigate__ = afterNavigate;
-
-const stateEl = document.getElementById("__grimoire_state__");
-let initialDispose: (() => void) | undefined;
-
-if (stateEl) {
-	const state = JSON.parse(stateEl.textContent!);
-	const Page = routes[state.pattern];
-	if (Page) {
-		const slot = document.getElementById("grimoire-root");
-		if (slot) {
-			const matchedLayouts = layouts
-				.filter(
-					(l: any) =>
-						l.path === "/" ||
-						state.pattern === l.path ||
-						state.pattern.startsWith(l.path + "/"),
-				)
-				.sort((a: any, b: any) => a.path.length - b.path.length);
-
-			// When layouts are involved, nested <!--g--> delimiters in the flat SSR pool
-			// cause anchor-mount to claim the wrong anchor and remove layout DOM nodes.
-			// Clear SSR content and re-render in DOM mode (empty pool) instead.
-			const hasLayouts = matchedLayouts.length > 0;
-			if (hasLayouts) {
-				slot.replaceChildren();
-			}
-
-			const ssrClones = hasLayouts
-				? []
-				: Array.from(slot.childNodes).map((n) => n.cloneNode(true));
-			pushHydrationNodes(
-				hasLayouts ? [] : (Array.from(slot.childNodes) as ChildNode[]),
-			);
-			try {
-				initialDispose = withEffectScope(() => {
-					try {
-						let renderFn = () => {
-							const pageDiv = claim(getHydrationNodes(), "div");
-							pageDiv.id = "grimoire-page";
-
-							if (pageDiv.childNodes.length > 0) {
-								pushHydrationNodes(
-									Array.from(pageDiv.childNodes) as ChildNode[],
-								);
-								const pageNode = Page({
-									data: state.data,
-									params: state.params,
-								});
-								popHydrationNodes();
-								insert(pageDiv, pageNode);
-							} else {
-								const pageNode = Page({
-									data: state.data,
-									params: state.params,
-								});
-								insert(pageDiv, pageNode);
-							}
-
-							return pageDiv;
-						};
-
-						for (let i = matchedLayouts.length - 1; i >= 0; i--) {
-							const LayoutComponent = matchedLayouts[i].component;
-							const innerRender = renderFn;
-							const layoutData = state.layoutData?.[i];
-							renderFn = () => {
-								// Pre-render inner content so children is a Node (insert() doesn't call functions)
-								const childNode = innerRender();
-								return LayoutComponent({
-									data: layoutData,
-									params: state.params,
-									children: childNode,
-								});
-							};
-						}
-
-						const rootNode = renderFn();
-						insert(slot, rootNode);
-					} finally {
-						popHydrationNodes();
-					}
-				});
-			} catch (e) {
-				console.warn("[grimoire] hydration error:", e);
-			}
-
-			if (!slot.hasChildNodes() && ssrClones.length > 0) {
-				slot.replaceChildren(...ssrClones);
-			}
-		}
-	}
-}
-
-initRouter(routes, layouts, initialDispose);
+import {
+	claim,
+	getHydrationNodes,
+	insert,
+	popHydrationNodes,
+	pushHydrationNodes,
+} from "@sigil-dev/runtime";
+//@ts-expect-error compiler generated
+import { layouts, routes } from "#grimoire-routes";
+import {
+	afterNavigate,
+	beforeNavigate,
+	navigate,
+	onNavigate,
+} from "../client/router";
+import { initRouter } from "../client/router.ts";
+import { withEffectScope } from "../client/scope.ts";
+import { Head } from "./head";
+
+// expose for HMR module shim
+(globalThis as any).__grimoire_Head__ = Head;
+(globalThis as any).__grimoire_navigate__ = navigate;
+(globalThis as any).__grimoire_beforeNavigate__ = beforeNavigate;
+(globalThis as any).__grimoire_onNavigate__ = onNavigate;
+(globalThis as any).__grimoire_afterNavigate__ = afterNavigate;
+
+const stateEl = document.getElementById("__grimoire_state__");
+let initialDispose: (() => void) | undefined;
+
+if (stateEl) {
+	const state = JSON.parse(stateEl.textContent!);
+	const Page = routes[state.pattern];
+	if (Page) {
+		const slot = document.getElementById("grimoire-root");
+		if (slot) {
+			const matchedLayouts = layouts
+				.filter(
+					(l: any) =>
+						l.path === "/" ||
+						state.pattern === l.path ||
+						state.pattern.startsWith(l.path + "/"),
+				)
+				.sort((a: any, b: any) => a.path.length - b.path.length);
+
+			// When layouts are involved, nested <!--g--> delimiters in the flat SSR pool
+			// cause anchor-mount to claim the wrong anchor and remove layout DOM nodes.
+			// Clear SSR content and re-render in DOM mode (empty pool) instead.
+			const hasLayouts = matchedLayouts.length > 0;
+			if (hasLayouts) {
+				slot.replaceChildren();
+			}
+
+			const ssrClones = hasLayouts
+				? []
+				: Array.from(slot.childNodes).map((n) => n.cloneNode(true));
+			pushHydrationNodes(
+				hasLayouts ? [] : (Array.from(slot.childNodes) as ChildNode[]),
+			);
+			try {
+				initialDispose = withEffectScope(() => {
+					try {
+						let renderFn = () => {
+							const pageDiv = claim(getHydrationNodes(), "div");
+							pageDiv.id = "grimoire-page";
+
+							if (pageDiv.childNodes.length > 0) {
+								pushHydrationNodes(
+									Array.from(pageDiv.childNodes) as ChildNode[],
+								);
+								const pageNode = Page({
+									data: state.data,
+									params: state.params,
+								});
+								popHydrationNodes();
+								insert(pageDiv, pageNode);
+							} else {
+								const pageNode = Page({
+									data: state.data,
+									params: state.params,
+								});
+								insert(pageDiv, pageNode);
+							}
+
+							return pageDiv;
+						};
+
+						for (let i = matchedLayouts.length - 1; i >= 0; i--) {
+							const LayoutComponent = matchedLayouts[i].component;
+							const innerRender = renderFn;
+							const layoutData = state.layoutData?.[i];
+							renderFn = () => {
+								// Pre-render inner content so children is a Node (insert() doesn't call functions)
+								const childNode = innerRender();
+								return LayoutComponent({
+									data: layoutData,
+									params: state.params,
+									children: childNode,
+								});
+							};
+						}
+
+						const rootNode = renderFn();
+						insert(slot, rootNode);
+					} finally {
+						popHydrationNodes();
+					}
+				});
+			} catch (e) {
+				console.warn("[grimoire] hydration error:", e);
+			}
+
+			if (!slot.hasChildNodes() && ssrClones.length > 0) {
+				slot.replaceChildren(...ssrClones);
+			}
+		}
+	}
+}
+
+initRouter(routes, layouts, initialDispose);