bosia 1.1.6 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bosia",
-	"version": "1.1.6",
+	"version": "1.2.0",
 	"type": "module",
 	"engines": {
 		"bun": ">=1.4"

package/src/core/appHtml.ts

@@ -62,6 +62,23 @@ export function loadAppHtmlTemplate(cwd: string = process.cwd()): AppHtmlSegment
 	};
 }
 
+// Comments and <script>/<style> bodies are matched only to be skipped; the
+// first real `</head …>` or, when the optional </head> is left out, `<body`
+// is where the head ends.
+const HEAD_END_RE =
+	/<!--[\s\S]*?(?:-->|$)|<(script|style)\b[\s\S]*?(?:<\/\1\s*>|$)|<\/head\s*>|<body[\s>/]/gi;
+
+/** Index in headClose (which runs on to %bosia.body%) where the head ends, or -1.
+ *  Matches case-insensitively on the original string: lowercasing a copy can
+ *  change its length (`İ`) and shift the index. */
+export function findHeadEnd(headClose: string): number {
+	for (const m of headClose.matchAll(HEAD_END_RE)) {
+		if (m[0].startsWith("<!--") || m[1]) continue;
+		return m.index;
+	}
+	return -1;
+}
+
 function replaceStaticPlaceholders(template: string): string {
 	// Replace %bosia.assets% with BOSIA_ASSETS_BASE env var
 	const assetsBase = process.env.BOSIA_ASSETS_BASE || "";

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

@@ -90,8 +90,7 @@ export const router = new (class Router {
 	pendingScroll: { x: number; y: number } | null = null;
 	/** Set by App.svelte; returns the mounted page's `export const snapshot` (if any) at capture time. */
 	getPageSnapshot:
-		| (() => { capture: () => unknown; restore: (v: any) => void } | undefined)
-		| null = null;
+		(() => { capture: () => unknown; restore: (v: any) => void } | undefined) | null = null;
 	/** Captured snapshot for the entry a popstate/reload landed on; consumed once by App.svelte. `undefined` = nothing to restore. */
 	pendingSnapshot: unknown = undefined;
 

package/src/core/html.ts

@@ -5,7 +5,7 @@ import { nonceAttr } from "./csp.ts";
 import { rebaseHtmlAttrs } from "./basePath.ts";
 import { currentBase } from "./appBase.ts";
 import type { AppHtmlSegments } from "./appHtml.ts";
-import { interpolateSegment } from "./appHtml.ts";
+import { findHeadEnd, interpolateSegment } from "./appHtml.ts";
 import type { Metadata } from "./hooks.ts";
 
 // Workers compresses any body sent with a Content-Encoding header — again, if it
@@ -249,6 +249,8 @@ export function buildHtml(
 	segments?: AppHtmlSegments,
 	metadata?: Metadata | null,
 	pattern?: string,
+	headExtras?: string[],
+	fallbackTitle = DEFAULT_TITLE,
 ): string {
 	// An app writes <a href="/masuk">; under a base the browser has to be handed
 	// /sso/masuk or it walks off this app entirely. Only the rendered markup is
@@ -258,11 +260,11 @@ export function buildHtml(
 	head = rebaseHtmlAttrs(B, head);
 
 	// Metadata goes in before `head`: the first <title> in the document wins, and
-	// the streaming path already puts metadata() ahead of <svelte:head> content
-	// (which arrives later via buildHtmlTail). Same order = same winner on both paths.
+	// buildMetadataChunk uses the same order on the streaming path, so both paths
+	// pick the same winner.
 	const metaTags = rebaseHtmlAttrs(B, metadataTags(metadata ?? null));
-	const fallbackTitle =
-		metaTags.includes("<title>") || head.includes("<title>") ? "" : "<title>Bosia App</title>";
+	const extras = rebaseHtmlAttrs(B, headExtraTags(headExtras));
+	const fallback = titleFallback(segments, metadata, fallbackTitle, extras, head);
 
 	const n = nonceAttr(nonce);
 	const publicEnv = getPublicDynamicEnv();
@@ -307,7 +309,6 @@ export function buildHtml(
 			lang: safeKey,
 			nonce,
 		});
-		const headCloseInterpolated = interpolateSegment(segments.headClose, { nonce });
 		const tailInterpolated = interpolateSegment(segments.tail, { nonce });
 		const faviconLine = segments.hasCustomFavicon
 			? ""
@@ -319,8 +320,8 @@ export function buildHtml(
 			componentCssLinks() +
 			`  <script${n}>${THEME_INIT_JS}</script>\n` +
 			preloads +
-			`  ${fallbackTitle}${metaTags}${head}` +
-			headCloseInterpolated +
+			`  ${metaTags}${extras}` +
+			closeHead(segments, lateHead(head, fallback), nonce) +
 			(body ? "" : `\n${SPINNER}`) +
 			`\n  <div id="app">${body}</div>${scripts}${bodyEnd}` +
 			tailInterpolated
@@ -332,10 +333,8 @@ export function buildHtml(
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  ${fallbackTitle}
   <link rel="icon" type="image/svg+xml" href="${FAVICON}">
-${metaTags}  ${head}
-  ${twCssLink()}
+${metaTags}${extras}${lateHead(head, fallback)}  ${twCssLink()}
 ${componentCssLinks()}  <script${n}>${THEME_INIT_JS}</script>
 ${preloads}</head>
 <body>
@@ -424,29 +423,213 @@ export function metadataTags(metadata: Metadata | null): string {
 	return out;
 }
 
+/** app.html's headClose with `late` inserted just before its `</head>`, after any
+ *  markup the app put after %bosia.head%, so <svelte:head> stays last in <head>
+ *  and a page's styles and meta win over app.html's, as they did when it was
+ *  injected client-side. No `</head>` in the segment → `late` goes first. */
+function closeHead(segments: AppHtmlSegments, late: string, nonce?: string): string {
+	const { before, after } = headSplit(segments);
+	return (
+		(before ? interpolateSegment(before, { nonce }) : "") +
+		late +
+		interpolateSegment(after, { nonce })
+	);
+}
+
+type HeadSplit = { before: string; after: string; hasTitle: boolean };
+
+// app.html never changes after it is parsed, so split it and check it for a
+// title once per segments object instead of on every render. Kept in memory,
+// not in dist/app-html.json, so it can't go stale against headClose.
+const headSplits = new WeakMap<AppHtmlSegments, HeadSplit>();
+
+function headSplit(segments: AppHtmlSegments): HeadSplit {
+	let split = headSplits.get(segments);
+	if (!split) {
+		const { headOpen, headClose } = segments;
+		const i = findHeadEnd(headClose);
+		const before = i < 0 ? "" : headClose.slice(0, i);
+		const after = i < 0 ? headClose : headClose.slice(i);
+		split = { before, after, hasTitle: hasTitle(headOpen) || hasTitle(before) };
+		headSplits.set(segments, split);
+	}
+	return split;
+}
+
+/** Whether a chunk of head markup already sets the document title. Matches a
+ *  <title> with attributes too. Ignores one in a comment, an attribute value, a
+ *  script or JSON-LD string, <style>, <noscript>, <template>, or an inline <svg>
+ *  (which only labels the icon). */
+export function hasTitle(html: string): boolean {
+	// A single forward scan, not a regex: a lazy `<script…</script>` match retries
+	// from every unclosed `<script` and goes quadratic on hostile {@html} output.
+	// Each tag is skipped whole, quotes included, so nothing inside an attribute
+	// looks like a tag. This is a heuristic, not a full HTML tokenizer.
+	let unclosed: Set<string> | undefined;
+	let i = 0;
+	while ((i = html.indexOf("<", i)) !== -1) {
+		if (html.startsWith("<!--", i)) {
+			i = commentEnd(html, i);
+			if (i === -1) return false; // unclosed comment runs to the end
+			continue;
+		}
+		if (!isAsciiAlpha(html.charCodeAt(i + 1))) {
+			i++;
+			continue;
+		}
+		const nameEnd = tagNameEnd(html, i + 1);
+		const tagEnd = openTagEnd(html, nameEnd);
+		if (tagEnd === -1) return false; // the rest is inside an unfinished tag
+		const name = nameEnd - i - 1 <= MAX_NAME ? html.slice(i + 1, nameEnd).toLowerCase() : "";
+		if (name === "title") return true;
+		i = tagEnd;
+		const close = SKIPPED_TAGS.get(name);
+		// Only foreign content like <svg/> honors the self-closing slash.
+		const selfClosed = name === "svg" && html.charCodeAt(tagEnd - 2) === 47;
+		if (!close || selfClosed || unclosed?.has(name)) continue;
+		// An opener with no closer is read as a plain tag, and remembered, so
+		// later openers of that tag don't search to the end again.
+		close.lastIndex = tagEnd;
+		const gt = close.exec(html) ? html.indexOf(">", close.lastIndex) : -1;
+		if (gt === -1) (unclosed ??= new Set()).add(name);
+		else i = gt + 1;
+	}
+	return false;
+}
+
+/** `</tag` followed by whitespace, `/` or `>`; the caller finds the `>` itself,
+ *  since a `[^>]*>` here would rescan to the end for every candidate. */
+const SKIPPED_TAGS = new Map(
+	["script", "style", "noscript", "template", "svg"].map((t) => [
+		t,
+		new RegExp(`</${t}(?=[\\t\\n\\f\\r />])`, "gi"),
+	]),
+);
+
+/** Longest tag name hasTitle needs to tell apart; longer names are never sliced. */
+const MAX_NAME = Math.max("title".length, ...[...SKIPPED_TAGS.keys()].map((t) => t.length));
+
+/** Index just past the comment opening at `start`, or -1 when it never closes.
+ *  `<!-->` and `<!--->` are complete empty comments. */
+function commentEnd(html: string, start: number): number {
+	if (html.startsWith(">", start + 4)) return start + 5;
+	if (html.startsWith("->", start + 4)) return start + 6;
+	const end = html.indexOf("-->", start + 4);
+	return end === -1 ? -1 : end + 3;
+}
+
+/** End of the tag name starting at `start`: the first whitespace, `/` or `>`. */
+function tagNameEnd(html: string, start: number): number {
+	let j = start;
+	while (j < html.length) {
+		const c = html.charCodeAt(j);
+		if (isHtmlSpace(c) || c === 47 || c === 62) break;
+		j++;
+	}
+	return j;
+}
+
+/** Index just past the `>` closing a start tag, skipping quoted attribute
+ *  values, or -1 when the tag never closes. */
+function openTagEnd(html: string, from: number): number {
+	for (let j = from; j < html.length; j++) {
+		const c = html.charCodeAt(j);
+		if (c === 62) return j + 1;
+		if (c !== 61) continue; // `=` starts a value
+		do j++;
+		while (j < html.length && isHtmlSpace(html.charCodeAt(j)));
+		const q = html.charCodeAt(j);
+		if (q === 34 || q === 39) {
+			j = html.indexOf(html[j]!, j + 1);
+			if (j === -1) return -1;
+			continue;
+		}
+		// Unquoted: runs to whitespace or `>`, quotes and `=` included.
+		while (j < html.length && !isHtmlSpace(html.charCodeAt(j)) && html.charCodeAt(j) !== 62) j++;
+		j--;
+	}
+	return -1;
+}
+
+/** HTML whitespace: tab, LF, FF, CR, space. Not \s, which also matches NBSP. */
+function isHtmlSpace(c: number): boolean {
+	return c === 32 || c === 9 || c === 10 || c === 12 || c === 13;
+}
+
+function isAsciiAlpha(c: number): boolean {
+	return (c >= 65 && c <= 90) || (c >= 97 && c <= 122);
+}
+
+/** Plugin `head` fragments, one per line, empty ones skipped. */
+function headExtraTags(headExtras?: string[]): string {
+	let out = "";
+	for (const fragment of headExtras ?? []) {
+		if (fragment) out += `  ${fragment}\n`;
+	}
+	return out;
+}
+
+/** The title a page gets when nothing else sets one. */
+const DEFAULT_TITLE = "Bosia App";
+
+/** `<title>{text}</title>` unless app.html or one of the head parts already
+ *  has a title. Shared by buildHtml and buildMetadataChunk so both paths make
+ *  the same call; each passes every part it writes into <head> (metadata,
+ *  plugin extras, <svelte:head>). */
+function titleFallback(
+	segments: AppHtmlSegments | undefined,
+	metadata: Metadata | null | undefined,
+	text: string,
+	...parts: string[]
+): string {
+	if (metadata?.title || (segments && appHtmlHasTitle(segments))) return "";
+	return parts.some(hasTitle) ? "" : `<title>${escapeHtml(text)}</title>`;
+}
+
+/** Whether app.html sets its own <title> in its head. */
+export function appHtmlHasTitle(segments: AppHtmlSegments): boolean {
+	return headSplit(segments).hasTitle;
+}
+
+/** <svelte:head>, then the fallback title, for the very end of <head>. The
+ *  fallback goes last so that if hasTitle ever misses a real <title>, the real
+ *  one still comes first and wins; the cost is a spare tag, not a wrong title. */
+function lateHead(head: string, fallbackTitle: string): string {
+	return (head ? `  ${head}\n` : "") + (fallbackTitle ? `  ${fallbackTitle}\n` : "");
+}
+
+export type MetadataChunkOptions = {
+	/** Plugin `head` fragments; they go right after the metadata() tags. */
+	headExtras?: string[];
+	segments?: AppHtmlSegments;
+	/** <svelte:head> output; it goes last, just before app.html's </head>. */
+	head?: string;
+	nonce?: string;
+};
+
 /** Chunk 2: metadata tags + close </head> + open <body> + spinner */
 export function buildMetadataChunk(
 	metadata: Metadata | null,
-	headExtras?: string[],
-	segments?: AppHtmlSegments,
+	{ headExtras, segments, head = "", nonce }: MetadataChunkOptions = {},
 ): string {
-	let out = "\n";
-	out += metadata ? metadataTags(metadata) : `  <title>Bosia App</title>\n`;
-	if (headExtras?.length) {
-		for (const fragment of headExtras) {
-			if (fragment) out += `  ${fragment}\n`;
-		}
-	}
+	// `head` goes in the real <head>, not in a script, so crawlers that don't run
+	// JS still see JSON-LD, icons and og tags. Same order as buildHtml: metadata,
+	// plugin extras, app.html's own head markup, then <svelte:head>.
+	const metaTags = metadataTags(metadata);
+	const extras = headExtraTags(headExtras);
+	const fallbackTitle = titleFallback(segments, metadata, DEFAULT_TITLE, extras, head);
+	let out = "\n" + metaTags + extras;
+	const late = lateHead(head, fallbackTitle);
 
 	if (segments) {
-		const headCloseInterpolated = interpolateSegment(segments.headClose, {});
-		out += headCloseInterpolated + `\n${SPINNER}`;
+		out += closeHead(segments, late, nonce) + `\n${SPINNER}`;
 	} else {
-		out += `</head>\n<body>\n${SPINNER}`;
+		out += `${late}</head>\n<body>\n${SPINNER}`;
 	}
 
-	// All markup, no data islands — safe to rebase wholesale, which is what picks
-	// up an app's own headExtras (a canonical link, an og:image on a local file).
+	// No loader data islands here, so it's safe to rebase wholesale. That picks up
+	// an app's own headExtras (a canonical link, an og:image on a local file) and
+	// <svelte:head> output, which buildHtml rebases the same way.
 	return rebaseHtmlAttrs(B, out);
 }
 
@@ -464,7 +647,6 @@ export function escapeAttr(s: string): string {
 
 export function buildHtmlTail(
 	body: string,
-	head: string,
 	pageData: any,
 	layoutData: any[],
 	csr: boolean,
@@ -478,13 +660,10 @@ export function buildHtmlTail(
 ): string {
 	// Same rebase as buildHtml — the streamed tail carries the identical markup.
 	body = rebaseHtmlAttrs(B, body);
-	head = rebaseHtmlAttrs(B, head);
 
 	const n = nonceAttr(nonce);
 	let out = `<script${n}>document.getElementById('__bs__').remove()</script>`;
 	out += `\n<div id="app">${body}</div>`;
-	if (head)
-		out += `\n<script${n}>document.head.insertAdjacentHTML('beforeend',${safeJsonStringify(head)})</script>`;
 	if (csr) {
 		out += baseScript(nonce);
 		const publicEnv = getPublicDynamicEnv();

package/src/core/renderer.ts

@@ -33,6 +33,8 @@ import {
 	compress,
 	compressBytes,
 	encodeForRequest,
+	appHtmlHasTitle,
+	hasTitle,
 	isDev,
 	withPreloadLink,
 	type Encoded,
@@ -358,6 +360,14 @@ function makeDepends(deps: LoaderDeps): (...keys: string[]) => void {
 // Runs layout + page server loaders for a given URL.
 // Used by both SSR and the /__bosia/data JSON endpoint.
 //
+// Every loader starts at once (SvelteKit's model). `parent()` is what orders
+// them: it waits for the layers above and returns their merged data, so only a
+// loader that asks for it waits. Results are still settled root → leaf, so the
+// root-most failure decides the response, exactly as when they ran in turn.
+// The cost: page code that runs before `await parent()` runs even when a layout
+// guard redirects — its output never ships, but its side effects happen. Guard
+// in hooks, or `await parent()` first.
+//
 // `mask` controls which layers' data the client data endpoint sends back:
 //   - undefined → send everything (SSR, first nav)
 //   - layouts[i] === false → the layout still RUNS, but its slot is emitted as
@@ -375,6 +385,8 @@ export type LoaderMask = {
 	layouts: boolean[];
 };
 
+type LayerResult = { data: Record<string, any>; deps: LoaderDeps };
+
 export async function loadRouteData(
 	url: URL,
 	locals: Record<string, any>,
@@ -392,25 +404,61 @@ export async function loadRouteData(
 	const origin = url.origin;
 	const layoutData: (Record<string, any> | null)[] = [];
 	const layoutDeps: (LoaderDeps | null)[] = [];
-	let parentData: Record<string, any> = {};
 	// Shared across layout + page loaders so cross-loader duplicate
 	// setHeaders() calls throw. Keys stored lowercased.
 	const loaderHeaders: Record<string, string> = {};
 	const setHeaders = makeSetHeaders(loaderHeaders);
 
-	// Run layout server loaders root → leaf, each gets parent() data
+	// Merged data of the first `n` layout layers. A fresh object per call, so
+	// loaders cannot mutate what the others see.
+	const layers: Promise<LayerResult>[] = [];
+	const parentOf = (n: number) => async () => {
+		const above = await Promise.all(layers.slice(0, n));
+		return Object.assign({}, ...above.map((l) => l.data));
+	};
+
 	for (const ls of route.layoutServers) {
-		// Runs regardless of the mask — see the trust note above loadRouteData.
-		const omit = mask && mask.layouts[ls.depth] === false;
-		try {
+		const parent = parentOf(layers.length);
+		const layer = (async (): Promise<LayerResult> => {
 			const mod = await ls.loader();
-			if (typeof mod.load === "function" && !warmingUp) {
-				// Snapshot per layer so loaders cannot mutate the shared accumulator,
-				// preserving the same isolation semantics as the previous merge-on-call code.
-				const snapshot = { ...parentData };
-				const parent = async () => snapshot;
+			if (typeof mod.load !== "function" || warmingUp) return { data: {}, deps: emptyDeps() };
+			const deps = emptyDeps();
+			const data =
+				(await withTimeout(
+					mod.load({
+						params: trackedParams(params, deps),
+						route: { id: route.id },
+						url: trackedUrl(url, deps),
+						locals,
+						cookies: trackedCookies(cookies, deps),
+						parent,
+						fetch: trackedFetch(fetch, origin, deps),
+						metadata: null,
+						depends: makeDepends(deps),
+						platform: getPlatform(),
+						setHeaders,
+					}),
+					LOAD_TIMEOUT,
+					`layout load (depth=${ls.depth}, ${url.pathname})`,
+				)) ?? {};
+			return { data, deps };
+		})();
+		// Settled in order below; a rejection must not be reported as unhandled
+		// while an earlier layer is still being awaited.
+		layer.catch(() => {});
+		layers.push(layer);
+	}
+
+	const skipPage = mask && mask.page === false;
+	const pageP = route.pageServer
+		? (async () => {
+				const mod = await route.pageServer!();
+				const flags = { csr: mod.csr !== false, ssr: mod.ssr !== false };
+				if (skipPage) return { ...flags, data: null, deps: null };
+				if (typeof mod.load !== "function" || warmingUp)
+					return { ...flags, data: {}, deps: emptyDeps() };
 				const deps = emptyDeps();
-				const result =
+				const data =
 					(await withTimeout(
 						mod.load({
 							params: trackedParams(params, deps),
@@ -418,23 +466,35 @@ export async function loadRouteData(
 							url: trackedUrl(url, deps),
 							locals,
 							cookies: trackedCookies(cookies, deps),
-							parent,
+							parent: parentOf(layers.length),
 							fetch: trackedFetch(fetch, origin, deps),
-							metadata: null,
+							metadata: await metadataData,
 							depends: makeDepends(deps),
 							platform: getPlatform(),
 							setHeaders,
 						}),
 						LOAD_TIMEOUT,
-						`layout load (depth=${ls.depth}, ${url.pathname})`,
+						`page load (${url.pathname})`,
 					)) ?? {};
-				layoutData[ls.depth] = omit ? null : result;
-				layoutDeps[ls.depth] = omit ? null : deps;
-				parentData = { ...parentData, ...result };
-			} else {
-				layoutData[ls.depth] = omit ? null : {};
-				layoutDeps[ls.depth] = omit ? null : emptyDeps();
-			}
+				return {
+					...flags,
+					data: data as Record<string, any> | null,
+					deps: deps as LoaderDeps | null,
+				};
+			})()
+		: null;
+	pageP?.catch(() => {});
+
+	// Settle root → leaf. The first failure wins, carrying the data of the
+	// layers above it — the same error a serial run would have produced.
+	for (let i = 0; i < route.layoutServers.length; i++) {
+		const ls = route.layoutServers[i]!;
+		// Runs regardless of the mask — see the trust note above loadRouteData.
+		const omit = mask && mask.layouts[ls.depth] === false;
+		try {
+			const { data, deps } = await layers[i]!;
+			layoutData[ls.depth] = omit ? null : data;
+			layoutDeps[ls.depth] = omit ? null : deps;
 		} catch (err) {
 			if (isRedirect(err)) throw err;
 			if (isHttpError(err)) {
@@ -460,47 +520,13 @@ export async function loadRouteData(
 		}
 	}
 
-	// Run page server loader
-	let pageData: Record<string, any> | null = null;
-	let pageDeps: LoaderDeps | null = null;
+	let pageData: Record<string, any> | null = {};
+	let pageDeps: LoaderDeps | null = emptyDeps();
 	let csr = true;
 	let ssr = true;
-	const skipPage = mask && mask.page === false;
-	if (route.pageServer) {
+	if (pageP) {
 		try {
-			const mod = await route.pageServer();
-			if (mod.csr === false) csr = false;
-			if (mod.ssr === false) ssr = false;
-			if (skipPage) {
-				pageData = null;
-				pageDeps = null;
-			} else if (typeof mod.load === "function" && !warmingUp) {
-				const snapshot = { ...parentData };
-				const parent = async () => snapshot;
-				const deps = emptyDeps();
-				pageData =
-					(await withTimeout(
-						mod.load({
-							params: trackedParams(params, deps),
-							route: { id: route.id },
-							url: trackedUrl(url, deps),
-							locals,
-							cookies: trackedCookies(cookies, deps),
-							parent,
-							fetch: trackedFetch(fetch, origin, deps),
-							metadata: await metadataData,
-							depends: makeDepends(deps),
-							platform: getPlatform(),
-							setHeaders,
-						}),
-						LOAD_TIMEOUT,
-						`page load (${url.pathname})`,
-					)) ?? {};
-				pageDeps = deps;
-			} else {
-				pageData = {};
-				pageDeps = emptyDeps();
-			}
+			({ data: pageData, deps: pageDeps, csr, ssr } = await pageP);
 		} catch (err) {
 			if (isRedirect(err)) throw err;
 			if (isHttpError(err)) {
@@ -524,9 +550,6 @@ export async function loadRouteData(
 			);
 			throw wrapped;
 		}
-	} else {
-		pageData = {};
-		pageDeps = emptyDeps();
 	}
 
 	// `params` are always attached to pageData for client-side router consumption.
@@ -655,8 +678,7 @@ export async function renderSSRStream(
 		// ── Pre-stream phase: metadata(), loaders, module imports and plugin
 		// fragments all start together, and all settle before committing to a 200,
 		// so a Redirect/HttpError from any of them still gets a proper response.
-		// Layout loaders still run in order before the page load(), which also
-		// waits for metadata.data (see loadRouteData).
+		// The page load() alone waits for metadata.data (see loadRouteData).
 		const metadataP = loadMetadata(route, params, url, locals, cookies, req).then(
 			(value) => ({ ok: true as const, value }),
 			(err: unknown) => ({ ok: false as const, err }),
@@ -795,9 +817,8 @@ export async function renderSSRStream(
 			}
 			const html =
 				buildHtmlShellOpen(metadata?.lang, nonce, appHtmlSegments, route.pattern) +
-				buildMetadataChunk(metadata, headExtras, appHtmlSegments) +
+				buildMetadataChunk(metadata, { headExtras, segments: appHtmlSegments, nonce }) +
 				buildHtmlTail(
-					"",
 					"",
 					pageDataFull,
 					layoutDataFull,
@@ -866,10 +887,9 @@ export async function renderSSRStream(
 				appHtmlSegments,
 				data.csr ? route.pattern : undefined,
 			) +
-				buildMetadataChunk(metadata, headExtras, appHtmlSegments) +
+				buildMetadataChunk(metadata, { headExtras, segments: appHtmlSegments, head, nonce }) +
 				buildHtmlTail(
 					body,
-					head,
 					pageDataFull,
 					layoutDataFull,
 					data.csr,
@@ -972,11 +992,34 @@ export async function renderPageWithFormData(
 
 	const { route, params } = match;
 
-	// Serial, not parallel: metadata.data feeds the loader below.
+	// Same overlap as the GET path: metadata() and the loaders start together,
+	// and only the page load() waits for metadata.data. A metadata redirect or
+	// error() still answers first.
+	const metadataP = loadMetadata(route, params, url, locals, cookies, req).then(
+		(value) => ({ ok: true as const, value }),
+		(err: unknown) => ({ ok: false as const, err }),
+	);
+	const loadP = Promise.all([
+		loadRouteData(
+			url,
+			locals,
+			req,
+			cookies,
+			metadataP.then((m) => (m.ok ? (m.value?.data ?? null) : null)),
+			match,
+		),
+		route.pageModule(),
+		Promise.all(route.layoutModules.map((l: () => Promise<any>) => l())),
+	]);
+	// Settled by the early returns below without being read.
+	loadP.catch(() => {});
+
 	let metadata: Metadata | null = null;
-	try {
-		metadata = await loadMetadata(route, params, url, locals, cookies, req);
-	} catch (err) {
+	const meta = await metadataP;
+	if (meta.ok) {
+		metadata = meta.value;
+	} else {
+		const err = meta.err;
 		if (isRedirect(err))
 			return new Response(null, { status: err.status, headers: { Location: err.location } });
 		if (isHttpError(err)) {
@@ -998,12 +1041,7 @@ export async function renderPageWithFormData(
 		// Continue with null metadata — don't break the page for a metadata failure
 	}
 
-	// Load components + data in parallel
-	const [data, pageMod, layoutMods] = await Promise.all([
-		loadRouteData(url, locals, req, cookies, metadata?.data ?? null, match),
-		route.pageModule(),
-		Promise.all(route.layoutModules.map((l: () => Promise<any>) => l())),
-	]);
+	const [data, pageMod, layoutMods] = await loadP;
 
 	if (!data)
 		return renderErrorPage(
@@ -1028,13 +1066,6 @@ export async function renderPageWithFormData(
 		pluginRenderFragments("head", renderCtx),
 		pluginRenderFragments("bodyEnd", renderCtx),
 	]);
-	// buildHtml has no headExtras slot; fold them in ahead of the SSR head, which
-	// is where buildMetadataChunk puts them on the streaming path.
-	const headWithExtras = (ssrHead: string) => {
-		const extras = headExtras.filter(Boolean);
-		return extras.length ? `${extras.join("\n  ")}\n  ${ssrHead}` : ssrHead;
-	};
-
 	// Form-action re-render always runs every loader (no client mask).
 	const layoutDataFull = (data.layoutData as Record<string, any>[]).map((d) => d ?? {});
 	const pageDataFull = data.pageData ?? {};
@@ -1047,7 +1078,7 @@ export async function renderPageWithFormData(
 		}
 		const html = buildHtml(
 			"",
-			headWithExtras(""),
+			"",
 			pageDataFull,
 			layoutDataFull,
 			true,
@@ -1061,6 +1092,7 @@ export async function renderPageWithFormData(
 			appHtmlSegments,
 			metadata,
 			route.pattern,
+			headExtras,
 		);
 		return compress(html, "text/html; charset=utf-8", req, status, data.loaderHeaders);
 	}
@@ -1082,7 +1114,7 @@ export async function renderPageWithFormData(
 
 	const html = buildHtml(
 		body,
-		headWithExtras(head),
+		head,
 		pageDataFull,
 		layoutDataFull,
 		data.csr,
@@ -1096,6 +1128,7 @@ export async function renderPageWithFormData(
 		appHtmlSegments,
 		metadata,
 		route.pattern,
+		headExtras,
 	);
 	return compress(html, "text/html; charset=utf-8", req, status, data.loaderHeaders);
 }
@@ -1124,9 +1157,13 @@ export async function renderErrorPage(
 	// The route's own metadata() is deliberately NOT run here — the route may be
 	// what failed, and a 404 has no route at all. Synthesize a status title only
 	// when the error component didn't set one, so <svelte:head><title> in a custom
-	// +error.svelte still wins.
+	// +error.svelte still wins. It is the late fallback (after the component's
+	// head, so a real title hasTitle misses still comes first), except when
+	// app.html has its own <title>: that would come first, so the status title
+	// takes the metadata slot ahead of it instead.
+	const statusTitle = `${status} — ${message}`;
 	const errMeta = (head: string): Metadata | null =>
-		head.includes("<title>") ? null : { title: `${status} — ${message}` };
+		appHtmlHasTitle(appHtmlSegments) && !hasTitle(head) ? { title: statusTitle } : null;
 
 	// Inspector overlay and other plugin bodyEnd fragments must be injected
 	// on error pages too — otherwise SSE never connects and runtime errors
@@ -1135,7 +1172,7 @@ export async function renderErrorPage(
 		request: req,
 		url,
 		route: route ? { pattern: route.pattern } : { pattern: "" },
-		metadata: errMeta(""),
+		metadata: { title: statusTitle },
 	};
 	const bodyEndExtras = await pluginRenderFragments("bodyEnd", renderCtx);
 
@@ -1192,6 +1229,9 @@ export async function renderErrorPage(
 					bodyEndExtras,
 					appHtmlSegments,
 					errMeta(head),
+					undefined,
+					undefined,
+					statusTitle,
 				);
 				return compress(html, "text/html; charset=utf-8", req, status);
 			} catch (err) {
@@ -1230,6 +1270,9 @@ export async function renderErrorPage(
 				bodyEndExtras,
 				appHtmlSegments,
 				errMeta(head),
+				undefined,
+				undefined,
+				statusTitle,
 			);
 			return compress(html, "text/html; charset=utf-8", req, status);
 		} catch (err) {

package/src/core/server.ts

@@ -404,33 +404,39 @@ async function resolve(event: RequestEvent): Promise<Response> {
 					)
 				: undefined;
 			const runLoad = async () => {
-				const data = await loadRouteData(routeUrl, locals, request, cookies, null, pageMatch, mask);
-
-				let metadata = null;
-				if (pageMatch) {
-					try {
-						const meta = await loadMetadata(
+				// metadata() runs alongside the loaders; the page load() gets its
+				// `data`, as on SSR. A failure stays non-fatal here.
+				const metaP = pageMatch
+					? loadMetadata(
 							pageMatch.route,
 							pageMatch.params,
 							routeUrl,
 							locals,
 							cookies,
 							request,
-						);
-						// Explicit whitelist, not a spread: `metadata.data` feeds load() on the
-						// server and may hold secrets — it must not reach the client.
-						if (meta)
-							metadata = {
-								title: meta.title,
-								description: meta.description,
-								meta: meta.meta,
-								link: meta.link,
-								lang: meta.lang,
-							};
-					} catch {
-						/* non-fatal */
-					}
-				}
+						).catch(() => null)
+					: Promise.resolve(null);
+				const data = await loadRouteData(
+					routeUrl,
+					locals,
+					request,
+					cookies,
+					metaP.then((m) => m?.data ?? null),
+					pageMatch,
+					mask,
+				);
+				const meta = await metaP;
+				// Explicit whitelist, not a spread: `metadata.data` feeds load() on the
+				// server and may hold secrets — it must not reach the client.
+				const metadata = meta
+					? {
+							title: meta.title,
+							description: meta.description,
+							meta: meta.meta,
+							link: meta.link,
+							lang: meta.lang,
+						}
+					: null;
 
 				return { data, metadata, cookiesAccessed: (cookies as CookieJar).accessed };
 			};
@@ -1041,6 +1047,69 @@ if (_xfoDisabled) {
 	console.log("🪟  X-Frame-Options disabled (DISABLE_X_FRAME_OPTIONS=true)");
 }
 
+// Security headers, CSP, CORS and the request's Set-Cookie headers, applied to
+// every response handleRequest hands back — resolved ones and the ones a hook
+// threw (redirect / error()).
+function finalizeResponse(
+	response: Response,
+	request: Request,
+	nonce: string,
+	cookieJar: CookieJar,
+): Response {
+	// Set on the response itself when its headers are mutable, which every
+	// Response the framework builds has. Copying them and rebuilding the
+	// Response cost a Headers copy plus a body re-wrap on every request.
+	// Responses with immutable headers (`fetch()`, `Response.redirect()`)
+	// still get the copy.
+	// On Workers (compressionOn is false only there) an already-encoded body
+	// is rebuilt as before, since the rebuild is what marks it PRECOMPRESSED.
+	let mutable: Headers | null = null;
+	if (compressionOn || !response.headers.has("content-encoding")) {
+		try {
+			response.headers.set("X-Content-Type-Options", SECURITY_HEADERS["X-Content-Type-Options"]!);
+			mutable = response.headers;
+		} catch {
+			// immutable — copied below
+		}
+	}
+	const inPlace = mutable !== null;
+	const headers = mutable ?? new Headers(response.headers);
+	// A handle can mark a response (e.g. a proxied embeddable preview) to opt
+	// out of the frame guard. Strip the internal marker so it never ships, and
+	// skip only X-Frame-Options for that response — other security headers stay.
+	const skipFrameGuard = headers.has(NO_FRAME_GUARD_HEADER);
+	headers.delete(NO_FRAME_GUARD_HEADER);
+	for (const [k, v] of Object.entries(SECURITY_HEADERS)) {
+		if (skipFrameGuard && k === "X-Frame-Options") continue;
+		headers.set(k, v);
+	}
+	const cspHeader = buildCspHeader(nonce);
+	if (cspHeader) headers.set("Content-Security-Policy", cspHeader);
+	// Apply CORS headers for allowed origins. `Vary: Origin` is set whenever
+	// CORS is configured — even on responses to non-allowed origins — so
+	// downstream caches (CDNs, browser HTTP cache) key on the Origin header
+	// instead of serving an Access-Control-Allow-Origin response across origins.
+	if (CORS_CONFIG) {
+		applyCorsVary(headers);
+		const corsHeaders = getCorsHeaders(request, CORS_CONFIG);
+		if (corsHeaders) {
+			for (const [k, v] of Object.entries(corsHeaders)) headers.set(k, v);
+		}
+	}
+	// Apply any Set-Cookie headers accumulated during the request
+	for (const cookie of cookieJar.outgoing) headers.append("Set-Cookie", cookie);
+	if (inPlace) return response;
+	return new Response(response.body, {
+		// A Content-Encoding here means the body is already compressed (cache
+		// hit, compress()); rebuilding drops that flag and Workers would
+		// compress it again.
+		...(headers.has("content-encoding") ? PRECOMPRESSED : {}),
+		status: response.status,
+		statusText: response.statusText,
+		headers,
+	});
+}
+
 async function handleRequest(request: Request, url: URL): Promise<Response> {
 	// Behind a trusted proxy the inbound `Host`/scheme is the proxy's inner hop
 	// (e.g. `localhost:PORT` over plain HTTP), so `url` built from `request.url`
@@ -1188,58 +1257,7 @@ async function handleRequest(request: Request, url: URL): Promise<Response> {
 			}
 		}
 
-		// Set on the response itself when its headers are mutable, which every
-		// Response the framework builds has. Copying them and rebuilding the
-		// Response cost a Headers copy plus a body re-wrap on every request.
-		// Responses with immutable headers (`fetch()`, `Response.redirect()`)
-		// still get the copy.
-		// On Workers (compressionOn is false only there) an already-encoded body
-		// is rebuilt as before, since the rebuild is what marks it PRECOMPRESSED.
-		let mutable: Headers | null = null;
-		if (compressionOn || !response.headers.has("content-encoding")) {
-			try {
-				response.headers.set("X-Content-Type-Options", SECURITY_HEADERS["X-Content-Type-Options"]!);
-				mutable = response.headers;
-			} catch {
-				// immutable — copied below
-			}
-		}
-		const inPlace = mutable !== null;
-		const headers = mutable ?? new Headers(response.headers);
-		// A handle can mark a response (e.g. a proxied embeddable preview) to opt
-		// out of the frame guard. Strip the internal marker so it never ships, and
-		// skip only X-Frame-Options for that response — other security headers stay.
-		const skipFrameGuard = headers.has(NO_FRAME_GUARD_HEADER);
-		headers.delete(NO_FRAME_GUARD_HEADER);
-		for (const [k, v] of Object.entries(SECURITY_HEADERS)) {
-			if (skipFrameGuard && k === "X-Frame-Options") continue;
-			headers.set(k, v);
-		}
-		const cspHeader = buildCspHeader(nonce);
-		if (cspHeader) headers.set("Content-Security-Policy", cspHeader);
-		// Apply CORS headers for allowed origins. `Vary: Origin` is set whenever
-		// CORS is configured — even on responses to non-allowed origins — so
-		// downstream caches (CDNs, browser HTTP cache) key on the Origin header
-		// instead of serving an Access-Control-Allow-Origin response across origins.
-		if (CORS_CONFIG) {
-			applyCorsVary(headers);
-			const corsHeaders = getCorsHeaders(request, CORS_CONFIG);
-			if (corsHeaders) {
-				for (const [k, v] of Object.entries(corsHeaders)) headers.set(k, v);
-			}
-		}
-		// Apply any Set-Cookie headers accumulated during the request
-		for (const cookie of cookieJar.outgoing) headers.append("Set-Cookie", cookie);
-		if (inPlace) return response;
-		return new Response(response.body, {
-			// A Content-Encoding here means the body is already compressed (cache
-			// hit, compress()); rebuilding drops that flag and Workers would
-			// compress it again.
-			...(headers.has("content-encoding") ? PRECOMPRESSED : {}),
-			status: response.status,
-			statusText: response.statusText,
-			headers,
-		});
+		return finalizeResponse(response, request, nonce, cookieJar);
 	} catch (err) {
 		// `throw redirect()` / `throw error()` from a hook lands here — the same
 		// escape hatch loaders have always had. Without these branches both fall
@@ -1273,13 +1291,10 @@ async function handleRequest(request: Request, url: URL): Promise<Response> {
 							undefined,
 							nonce,
 						);
-			// A hook that expires the session before throwing must not lose the
-			// Set-Cookie that does it — the redirect above is a fresh Response,
-			// so the jar is re-applied by hand here.
-			if (cookieJar) {
-				for (const cookie of cookieJar.outgoing) out.headers.append("Set-Cookie", cookie);
-			}
-			return out;
+			// The same finishing pass as a resolved response: security headers,
+			// CSP, CORS, and the jar's Set-Cookie — a hook that expires the session
+			// before throwing must not lose the cookie that does it.
+			return cookieJar ? finalizeResponse(out, request, nonce, cookieJar) : out;
 		}
 		if (isDev) console.error("Unhandled request error:", err);
 		else console.error("Unhandled request error:", (err as Error).message ?? err);

package/src/lib/utils.ts

@@ -3,14 +3,7 @@ import { twMerge } from "tailwind-merge";
 type ClassDictionary = Record<string, any>;
 type ClassArray = ClassValue[];
 type ClassValue =
-	| ClassArray
-	| ClassDictionary
-	| string
-	| number
-	| bigint
-	| null
-	| boolean
-	| undefined;
+	ClassArray | ClassDictionary | string | number | bigint | null | boolean | undefined;
 
 function clsx(...inputs: ClassValue[]): string {
 	let str = "";

package/templates/default/package.json

@@ -20,8 +20,8 @@
 	},
 	"devDependencies": {
 		"@types/bun": "latest",
-		"prettier": "^3.3.0",
-		"prettier-plugin-svelte": "^3.2.0",
+		"prettier": "3.9.9",
+		"prettier-plugin-svelte": "3.5.2",
 		"svelte-check": "^4.4.8",
 		"typescript": "^5"
 	}

package/templates/demo/package.json

@@ -20,8 +20,8 @@
 	},
 	"devDependencies": {
 		"@types/bun": "latest",
-		"prettier": "^3.3.0",
-		"prettier-plugin-svelte": "^3.2.0",
+		"prettier": "3.9.9",
+		"prettier-plugin-svelte": "3.5.2",
 		"typescript": "^5"
 	}
 }

package/templates/shop/package.json

@@ -21,8 +21,8 @@
 	},
 	"devDependencies": {
 		"@types/bun": "latest",
-		"prettier": "^3.3.0",
-		"prettier-plugin-svelte": "^3.2.0",
+		"prettier": "3.9.9",
+		"prettier-plugin-svelte": "3.5.2",
 		"typescript": "^5",
 		"drizzle-kit": "^0.31.0"
 	}

package/templates/shop/src/routes/(private)/dashboard/files/+page.svelte

@@ -0,0 +1,9 @@
+<!-- EDIT THIS FILE: uploaded files (the file-upload feature). -->
+<svelte:head>
+	<title>Files</title>
+</svelte:head>
+
+<div class="flex flex-col gap-4">
+	<h1 class="text-2xl font-bold tracking-tight">Files</h1>
+	<p class="text-muted-foreground text-sm">Nothing here yet. Build this page when you need it.</p>
+</div>

package/templates/shop/src/routes/(private)/dashboard/orders/+page.svelte

@@ -0,0 +1,9 @@
+<!-- EDIT THIS FILE: list orders and open their details (OrderService in src/features/shop). -->
+<svelte:head>
+	<title>Orders</title>
+</svelte:head>
+
+<div class="flex flex-col gap-4">
+	<h1 class="text-2xl font-bold tracking-tight">Orders</h1>
+	<p class="text-muted-foreground text-sm">Nothing here yet. Build this page when you need it.</p>
+</div>

package/templates/shop/src/routes/(private)/dashboard/orders/pending/+page.svelte

@@ -0,0 +1,9 @@
+<!-- EDIT THIS FILE: orders waiting to be paid or shipped. -->
+<svelte:head>
+	<title>Pending orders</title>
+</svelte:head>
+
+<div class="flex flex-col gap-4">
+	<h1 class="text-2xl font-bold tracking-tight">Pending orders</h1>
+	<p class="text-muted-foreground text-sm">Nothing here yet. Build this page when you need it.</p>
+</div>

package/templates/shop/src/routes/(private)/dashboard/orders/refunds/+page.svelte

@@ -0,0 +1,9 @@
+<!-- EDIT THIS FILE: refund requests and refunded orders. -->
+<svelte:head>
+	<title>Refunds</title>
+</svelte:head>
+
+<div class="flex flex-col gap-4">
+	<h1 class="text-2xl font-bold tracking-tight">Refunds</h1>
+	<p class="text-muted-foreground text-sm">Nothing here yet. Build this page when you need it.</p>
+</div>

package/templates/shop/src/routes/(private)/dashboard/products/+page.svelte

@@ -0,0 +1,9 @@
+<!-- EDIT THIS FILE: list, create and edit products (ProductService in src/features/shop). -->
+<svelte:head>
+	<title>Products</title>
+</svelte:head>
+
+<div class="flex flex-col gap-4">
+	<h1 class="text-2xl font-bold tracking-tight">Products</h1>
+	<p class="text-muted-foreground text-sm">Nothing here yet. Build this page when you need it.</p>
+</div>

package/templates/shop/src/routes/(private)/dashboard/profile/+page.svelte

@@ -0,0 +1,9 @@
+<!-- EDIT THIS FILE: the signed-in user's name, email and password. -->
+<svelte:head>
+	<title>Profile</title>
+</svelte:head>
+
+<div class="flex flex-col gap-4">
+	<h1 class="text-2xl font-bold tracking-tight">Profile</h1>
+	<p class="text-muted-foreground text-sm">Nothing here yet. Build this page when you need it.</p>
+</div>

package/templates/shop/src/routes/(private)/dashboard/settings/+page.svelte

@@ -0,0 +1,9 @@
+<!-- EDIT THIS FILE: store settings. -->
+<svelte:head>
+	<title>Settings</title>
+</svelte:head>
+
+<div class="flex flex-col gap-4">
+	<h1 class="text-2xl font-bold tracking-tight">Settings</h1>
+	<p class="text-muted-foreground text-sm">Nothing here yet. Build this page when you need it.</p>
+</div>

package/templates/shop/src/routes/(private)/dashboard/users/+page.svelte

@@ -0,0 +1,9 @@
+<!-- EDIT THIS FILE: users and their roles (the auth and rbac features). -->
+<svelte:head>
+	<title>Users</title>
+</svelte:head>
+
+<div class="flex flex-col gap-4">
+	<h1 class="text-2xl font-bold tracking-tight">Users</h1>
+	<p class="text-muted-foreground text-sm">Nothing here yet. Build this page when you need it.</p>
+</div>

package/templates/store/package.json

@@ -21,8 +21,8 @@
 	},
 	"devDependencies": {
 		"@types/bun": "latest",
-		"prettier": "^3.3.0",
-		"prettier-plugin-svelte": "^3.2.0",
+		"prettier": "3.9.9",
+		"prettier-plugin-svelte": "3.5.2",
 		"typescript": "^5",
 		"drizzle-kit": "^0.31.0"
 	}

package/templates/store/src/routes/(private)/dashboard/files/+page.svelte

@@ -0,0 +1,9 @@
+<!-- EDIT THIS FILE: uploaded files (the file-upload feature). -->
+<svelte:head>
+	<title>Files</title>
+</svelte:head>
+
+<div class="flex flex-col gap-4">
+	<h1 class="text-2xl font-bold tracking-tight">Files</h1>
+	<p class="text-muted-foreground text-sm">Nothing here yet. Build this page when you need it.</p>
+</div>

package/templates/store/src/routes/(private)/dashboard/orders/+page.svelte

@@ -0,0 +1,9 @@
+<!-- EDIT THIS FILE: list orders and open their details (OrderService in src/features/shop). -->
+<svelte:head>
+	<title>Orders</title>
+</svelte:head>
+
+<div class="flex flex-col gap-4">
+	<h1 class="text-2xl font-bold tracking-tight">Orders</h1>
+	<p class="text-muted-foreground text-sm">Nothing here yet. Build this page when you need it.</p>
+</div>

package/templates/store/src/routes/(private)/dashboard/orders/pending/+page.svelte

@@ -0,0 +1,9 @@
+<!-- EDIT THIS FILE: orders waiting to be paid or shipped. -->
+<svelte:head>
+	<title>Pending orders</title>
+</svelte:head>
+
+<div class="flex flex-col gap-4">
+	<h1 class="text-2xl font-bold tracking-tight">Pending orders</h1>
+	<p class="text-muted-foreground text-sm">Nothing here yet. Build this page when you need it.</p>
+</div>

package/templates/store/src/routes/(private)/dashboard/orders/refunds/+page.svelte

@@ -0,0 +1,9 @@
+<!-- EDIT THIS FILE: refund requests and refunded orders. -->
+<svelte:head>
+	<title>Refunds</title>
+</svelte:head>
+
+<div class="flex flex-col gap-4">
+	<h1 class="text-2xl font-bold tracking-tight">Refunds</h1>
+	<p class="text-muted-foreground text-sm">Nothing here yet. Build this page when you need it.</p>
+</div>

package/templates/store/src/routes/(private)/dashboard/products/+page.svelte

@@ -0,0 +1,9 @@
+<!-- EDIT THIS FILE: list, create and edit products (ProductService in src/features/shop). -->
+<svelte:head>
+	<title>Products</title>
+</svelte:head>
+
+<div class="flex flex-col gap-4">
+	<h1 class="text-2xl font-bold tracking-tight">Products</h1>
+	<p class="text-muted-foreground text-sm">Nothing here yet. Build this page when you need it.</p>
+</div>

package/templates/store/src/routes/(private)/dashboard/profile/+page.svelte

@@ -0,0 +1,9 @@
+<!-- EDIT THIS FILE: the signed-in user's name, email and password. -->
+<svelte:head>
+	<title>Profile</title>
+</svelte:head>
+
+<div class="flex flex-col gap-4">
+	<h1 class="text-2xl font-bold tracking-tight">Profile</h1>
+	<p class="text-muted-foreground text-sm">Nothing here yet. Build this page when you need it.</p>
+</div>

package/templates/store/src/routes/(private)/dashboard/settings/+page.svelte

@@ -0,0 +1,9 @@
+<!-- EDIT THIS FILE: store settings. -->
+<svelte:head>
+	<title>Settings</title>
+</svelte:head>
+
+<div class="flex flex-col gap-4">
+	<h1 class="text-2xl font-bold tracking-tight">Settings</h1>
+	<p class="text-muted-foreground text-sm">Nothing here yet. Build this page when you need it.</p>
+</div>

package/templates/store/src/routes/(private)/dashboard/users/+page.svelte

@@ -0,0 +1,9 @@
+<!-- EDIT THIS FILE: users and their roles (the auth and rbac features). -->
+<svelte:head>
+	<title>Users</title>
+</svelte:head>
+
+<div class="flex flex-col gap-4">
+	<h1 class="text-2xl font-bold tracking-tight">Users</h1>
+	<p class="text-muted-foreground text-sm">Nothing here yet. Build this page when you need it.</p>
+</div>