camox 0.40.0 → 0.41.0

package/dist/features/runtime/pageNavigation.js

@@ -1,168 +1,117 @@
 import { NavigationProvider } from "../navigation/navigation.js";
 import { createPageHeadInput } from "./runtime.js";
+import { createNavigationRequestTracker } from "./navigationRequest.js";
+import { getNavigationTarget, runtimePath } from "./navigationTarget.js";
 import { hydrate } from "@tanstack/react-query";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { createHead, renderDOMHead } from "@unhead/react/client";
 
 //#region src/features/runtime/pageNavigation.tsx
-function normalizeRuntimeBasePath(basePath) {
-	if (!basePath || basePath === "/") return "";
-	return basePath.startsWith("/") ? basePath.replace(/\/+$/, "") : `/${basePath.replace(/\/+$/, "")}`;
-}
-function normalizePagePath(pathname, runtimeBasePath) {
-	const basePath = normalizeRuntimeBasePath(runtimeBasePath);
-	if (!basePath) return pathname || "/";
-	if (pathname === basePath) return "/";
-	if (pathname.startsWith(`${basePath}/`)) return pathname.slice(basePath.length) || "/";
-	return pathname || "/";
-}
-function toRuntimePathname(pagePathname, runtimeBasePath) {
-	const basePath = normalizeRuntimeBasePath(runtimeBasePath);
-	const normalizedPathname = pagePathname.startsWith("/") ? pagePathname : `/${pagePathname}`;
-	if (!basePath) return normalizedPathname;
-	if (normalizedPathname === "/") return `${basePath}/`;
-	if (normalizedPathname.startsWith(`${basePath}/`)) return normalizedPathname;
-	return `${basePath}${normalizedPathname}`;
-}
-function getRuntimeLocation(runtimeBasePath) {
-	return {
-		hash: window.location.hash,
-		href: window.location.href,
-		pathname: normalizePagePath(window.location.pathname, runtimeBasePath),
-		search: window.location.search
-	};
-}
-function isReservedPagePath(pathname) {
-	return pathname.startsWith("/_camox/") || pathname === "/_camox" || pathname === "/camox" || pathname.startsWith("/camox/") || pathname === "/og" || pathname === "/sitemap.xml";
-}
-function getClientNavigationTarget(to, runtimeBasePath) {
-	const url = new URL(to, window.location.href);
-	if (url.origin !== window.location.origin) return null;
-	const pagePathname = normalizePagePath(url.pathname, runtimeBasePath);
-	if (isReservedPagePath(pagePathname)) return null;
-	url.pathname = toRuntimePathname(pagePathname, runtimeBasePath);
-	return url;
-}
-async function fetchPageData(pagePathname, runtimeBasePath) {
-	const dataUrl = new URL(toRuntimePathname("/_camox/data", runtimeBasePath), window.location.origin);
-	dataUrl.searchParams.set("path", pagePathname);
-	const response = await fetch(dataUrl, {
-		headers: { Accept: "application/json" },
-		credentials: "same-origin"
-	});
-	if (!response.ok) throw new Error(`Page data request failed: ${response.status}`);
-	return await response.json();
-}
-function isPageHead(head) {
-	return !!head && typeof head === "object";
-}
-function updateHead(head, manager) {
-	if (!isPageHead(head)) return;
-	if (!manager.removedServerPageHead) {
-		document.querySelectorAll("[data-camox-page-head]").forEach((element) => element.remove());
-		manager.removedServerPageHead = true;
-	}
-	manager.entry?.dispose();
-	manager.entry = manager.head.push(createPageHeadInput(head));
-	renderDOMHead(manager.head);
-}
-function hasSameLayoutIdentity(current, next) {
-	return !!current && !!next && current.id === next.id && current.layoutId === next.layoutId && current.version === next.version;
-}
-function isLayoutBlockQuery(query, layoutBlockIds) {
-	if (!query || typeof query !== "object") return false;
-	const queryKey = query.queryKey;
-	return Array.isArray(queryKey) && queryKey[0] === "camox" && queryKey[1] === "blocks" && queryKey[2] === "get" && typeof queryKey[3] === "number" && layoutBlockIds.has(queryKey[3]);
-}
-function preserveStableLayoutBlockCaches(dehydratedState, currentLayout, nextLayout) {
-	if (!hasSameLayoutIdentity(currentLayout, nextLayout)) return dehydratedState;
-	if (!dehydratedState || typeof dehydratedState !== "object") return dehydratedState;
-	if (!Array.isArray(dehydratedState.queries)) return dehydratedState;
-	const layoutBlockIds = new Set(currentLayout?.blockIds ?? []);
+function preserveStableLayoutBlockCaches(dehydratedState, current, next) {
+	if (!current || !next || current.id !== next.id || current.layoutId !== next.layoutId || current.version !== next.version) return dehydratedState;
+	if (!dehydratedState || typeof dehydratedState !== "object" || !("queries" in dehydratedState) || !Array.isArray(dehydratedState.queries)) return dehydratedState;
+	const ids = new Set(current.blockIds);
 	return {
 		...dehydratedState,
-		queries: dehydratedState.queries.filter((query) => !isLayoutBlockQuery(query, layoutBlockIds))
+		queries: dehydratedState.queries.filter((query) => {
+			const key = query.queryKey;
+			return !(key?.[0] === "camox" && key[1] === "blocks" && key[2] === "get" && typeof key[3] === "number" && ids.has(key[3]));
+		})
 	};
 }
 function PageNavigationProvider({ children, initialInput, queryClient }) {
-	const headManagerRef = React.useRef(null);
-	if (!headManagerRef.current) headManagerRef.current = {
-		head: createHead(),
-		removedServerPageHead: false
-	};
-	const headManager = headManagerRef.current;
-	const currentLayoutIdentityRef = React.useRef(initialInput.layoutIdentity);
-	const navigate = React.useCallback(async ({ replace, to }) => {
-		const target = getClientNavigationTarget(to, initialInput.runtimeBasePath);
+	const [input, setInput] = React.useState(initialInput);
+	const current = React.useRef(initialInput);
+	const [requests] = React.useState(createNavigationRequestTracker);
+	const headManager = React.useRef(null);
+	const navigate = React.useCallback(async ({ to, replace, pop = false }) => {
+		const request = requests.begin();
+		const target = getNavigationTarget(to, window.location.href, initialInput.runtimeBasePath);
 		if (!target) {
-			window.location.assign(to);
+			if (replace) window.location.replace(to);
+			else window.location.assign(to);
 			return;
 		}
-		const pagePathname = normalizePagePath(target.pathname, initialInput.runtimeBasePath);
 		try {
-			const data = await fetchPageData(pagePathname, initialInput.runtimeBasePath);
-			if (data.dehydratedState) hydrate(queryClient, preserveStableLayoutBlockCaches(data.dehydratedState, currentLayoutIdentityRef.current, data.layoutIdentity));
-			currentLayoutIdentityRef.current = data.layoutIdentity ?? null;
-			updateHead(data.head, headManager);
+			let next = current.current;
+			if (target.pathname !== next.pathname || pop) {
+				const url = new URL(runtimePath("/_camox/data", initialInput.runtimeBasePath), window.location.origin);
+				url.searchParams.set("path", target.pathname);
+				const response = await fetch(url, {
+					credentials: "same-origin",
+					headers: { Accept: "application/json" },
+					signal: request.signal
+				});
+				if (!response.ok) throw new Error(`Navigation failed: ${response.status}`);
+				next = await response.json();
+				if (next.pathname !== target.pathname || !next.dehydratedState) throw new Error("Invalid navigation response");
+			}
+			if (!request.isCurrent()) return;
+			hydrate(queryClient, preserveStableLayoutBlockCaches(next.dehydratedState, current.current.layoutIdentity, next.layoutIdentity));
+			next = {
+				...next,
+				href: target.url.href
+			};
+			current.current = next;
+			if (!pop) if (replace) window.history.replaceState(null, "", target.url.href);
+			else window.history.pushState(null, "", target.url.href);
+			if (!headManager.current) {
+				document.querySelectorAll("[data-camox-page-head]").forEach((element) => element.remove());
+				headManager.current = { head: createHead() };
+			}
+			const manager = headManager.current;
+			manager.entry?.dispose();
+			manager.entry = manager.head.push(createPageHeadInput(next.head ?? {}));
+			renderDOMHead(manager.head);
+			React.startTransition(() => setInput(next));
+			if (!pop && !replace && !target.url.hash) window.scrollTo({ top: 0 });
 		} catch {
-			window.location.assign(target.href);
-			return;
+			if (!request.isCurrent()) return;
+			if (pop) window.location.reload();
+			else if (replace) window.location.replace(target.url.href);
+			else window.location.assign(target.url.href);
 		}
-		if (replace) window.history.replaceState(null, "", target.href);
-		else {
-			window.history.pushState(null, "", target.href);
-			window.scrollTo({ top: 0 });
-		}
-		window.dispatchEvent(new Event("camox:navigation"));
 	}, [
-		headManager,
 		initialInput.runtimeBasePath,
-		queryClient
+		queryClient,
+		requests
 	]);
 	React.useEffect(() => {
 		const onClick = (event) => {
-			if (event.defaultPrevented) return;
-			if (event.button !== 0) return;
-			if (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) return;
+			if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
 			const anchor = event.target?.closest("a");
-			if (!anchor) return;
-			if (anchor.hasAttribute("download")) return;
-			if (anchor.target && anchor.target !== "_self") return;
-			const target_0 = getClientNavigationTarget(anchor.href, initialInput.runtimeBasePath);
-			if (!target_0) return;
+			if (!anchor || anchor.hasAttribute("download") || anchor.target && anchor.target !== "_self") return;
+			if (!getNavigationTarget(anchor.href, window.location.href, initialInput.runtimeBasePath)) return;
 			event.preventDefault();
-			navigate({ to: target_0.href });
+			navigate({ to: anchor.href });
 		};
+		const onPopState = () => void navigate({
+			to: window.location.href,
+			pop: true
+		});
 		document.addEventListener("click", onClick);
-		return () => document.removeEventListener("click", onClick);
-	}, [navigate]);
-	React.useEffect(() => {
-		const onPopState = () => {
-			fetchPageData(normalizePagePath(window.location.pathname, initialInput.runtimeBasePath), initialInput.runtimeBasePath).then((data_0) => {
-				if (data_0.dehydratedState) hydrate(queryClient, preserveStableLayoutBlockCaches(data_0.dehydratedState, currentLayoutIdentityRef.current, data_0.layoutIdentity));
-				currentLayoutIdentityRef.current = data_0.layoutIdentity ?? null;
-				updateHead(data_0.head, headManager);
-				window.dispatchEvent(new Event("camox:navigation"));
-			}).catch(() => window.location.reload());
-		};
 		window.addEventListener("popstate", onPopState);
-		return () => window.removeEventListener("popstate", onPopState);
+		return () => {
+			document.removeEventListener("click", onClick);
+			window.removeEventListener("popstate", onPopState);
+			requests.cancel();
+		};
 	}, [
-		headManager,
+		navigate,
 		initialInput.runtimeBasePath,
-		queryClient
+		requests
 	]);
+	const url_0 = new URL(input.href);
 	return /* @__PURE__ */ jsx(NavigationProvider, {
-		getLocation: React.useCallback(() => getRuntimeLocation(initialInput.runtimeBasePath), [initialInput.runtimeBasePath]),
-		initialLocation: {
-			hash: new URL(initialInput.href).hash,
-			href: initialInput.href,
-			pathname: initialInput.pathname,
-			search: new URL(initialInput.href).search
+		location: {
+			href: input.href,
+			pathname: input.pathname,
+			hash: url_0.hash,
+			search: url_0.search
 		},
 		navigate,
-		children
+		children: children(input)
 	});
 }
 

package/dist/features/runtime/runtime.d.ts

@@ -1,5 +1,6 @@
 import { CamoxApp } from "../../core/createApp.js";
 import { CamoxDocument } from "../../core/defineDocument.js";
+import { createServerApiClient } from "../routes/pageRuntime.js";
 import { StudioRenderInput } from "./studioApp.js";
 import { UseHeadInput } from "unhead/types";
 
@@ -16,6 +17,15 @@ interface LayoutIdentity {
   version: string;
 }
 interface PageRenderInput {
+  previewDocument?: string;
+  routeKind?: "studio" | "studio-content" | "studio-nested";
+  project?: Awaited<ReturnType<ReturnType<typeof createServerApiClient>["projects"]["getBySlug"]>>;
+  presentation?: "public" | "studio";
+  derived?: {
+    layoutId: string;
+    data: unknown;
+    layout: Awaited<ReturnType<ReturnType<typeof createServerApiClient>["layouts"]["get"]>>["layout"];
+  };
   apiUrl: string;
   authenticationUrl: string;
   dehydratedState: unknown;
@@ -42,6 +52,7 @@ interface RuntimeOptions {
   renderStudio?: (input: StudioRenderInput) => Promise<string>;
   runtimeBasePath?: string;
   stylesheetUrl?: string;
+  studioStylesheetUrl?: string;
 }
 declare function getRuntimePathname(url: string, runtimeBasePath?: string): string | null;
 declare function matchRuntimeRoute(pathname: string): RuntimeRouteMatch;

package/dist/features/runtime/runtime.js

@@ -1,4 +1,7 @@
-import { buildCamoxPageHead, createMarkdownResponse, createServerApiClient, isNotFoundError, loadCamoxPageForRequest } from "../routes/pageRuntime.js";
+import { PLATFORM_SCRIPT } from "../../lib/platform.js";
+import { STUDIO_THEME_SCRIPT } from "../studio/studioTheme.js";
+import { matchDerivedLayout } from "../../core/derivedRoutes.js";
+import { buildCamoxPageHead, createMarkdownResponse, createServerApiClient, isAuthSessionError, isNotFoundError, loadCamoxPageForRequest, seedBlockCaches } from "../routes/pageRuntime.js";
 import { QueryClient, dehydrate } from "@tanstack/react-query";
 import { createHead, renderSSRHead } from "@unhead/react/server";
 
@@ -40,8 +43,7 @@ function normalizePagePath(path) {
 	if (!path) return "/";
 	return path.startsWith("/") ? path : `/${path}`;
 }
-function getLayoutIdentity(data, source) {
-	const layout = data.page.layout;
+function getLayoutIdentity(layout, source) {
 	if (!layout) return null;
 	const version = source === "live" ? String(layout.livePublishedCheckpointId ?? "none") : String(layout.contentUpdatedAt ?? layout.updatedAt);
 	return {
@@ -173,10 +175,15 @@ function createPageHeadInput(head) {
 		link: pageLinks
 	};
 }
-function renderHead(document, pageHead, stylesheetUrl) {
+function renderHead(document, pageHead, stylesheetUrl, studioStylesheetUrl) {
 	const head = createHead();
 	head.push(createDefaultHeadInput(stylesheetUrl));
 	head.push(document);
+	if (studioStylesheetUrl) head.push({ link: [{
+		rel: "stylesheet",
+		href: studioStylesheetUrl,
+		"data-camox-studio": "true"
+	}] });
 	head.push(pageHead);
 	return renderSSRHead(head);
 }
@@ -187,6 +194,20 @@ function renderClientEntryScript(src) {
 	if (!src) return "";
 	return `<script type="module" src="${escapeXml(src)}"><\/script>`;
 }
+async function preparePreviewDocument(input, options, document, content) {
+	const siteHead = renderHead(document, createPageHeadInput(input.head ?? {}), options.stylesheetUrl);
+	const href = new URL(withRuntimeBasePath(input.pathname, options.runtimeBasePath), input.href).href;
+	const siteHtml = content ?? (options.renderPage ? await options.renderPage({
+		...input,
+		href,
+		presentation: "public",
+		previewDocument: void 0
+	}) : "");
+	input.previewDocument = `<!doctype html><html${siteHead.htmlAttrs}><head><base href="${escapeXml(href)}">${siteHead.headTags}</head><body${siteHead.bodyAttrs}>${siteHead.bodyTagsOpen}<div id="root" data-camox-preview-root>${siteHtml}</div>${siteHead.bodyTags}</body></html>`;
+}
+function renderStudioThemeScript(enabled) {
+	return enabled ? `<script data-camox-studio>${STUDIO_THEME_SCRIPT}${PLATFORM_SCRIPT}<\/script>` : "";
+}
 async function createPageHtmlResponse({ options, pathname, request }) {
 	if (!options.apiUrl || !options.authenticationUrl || !options.projectSlug || !options.renderPage) return createPageDataResponse({
 		options,
@@ -204,31 +225,39 @@ async function createPageHtmlResponse({ options, pathname, request }) {
 			projectSlug: options.projectSlug,
 			queryClient
 		});
-		const headers = new Headers({ "Content-Type": "text/html; charset=utf-8" });
+		const headers = new Headers({
+			"Content-Type": "text/html; charset=utf-8",
+			Vary: "Cookie"
+		});
+		if (getServerAuthCookieHeader(request.headers)) headers.set("Cache-Control", "private, no-store");
 		if (result.shouldClearAuthCookie) headers.append("Set-Cookie", buildClearServerAuthCookieHeader());
 		const camoxApp = await options.getCamoxApp?.();
 		const document = await options.getDocument?.() ?? {};
 		const head = camoxApp ? buildCamoxPageHead(camoxApp, result.data) : {};
 		const dehydratedState = dehydrate(queryClient);
 		const pageRenderInput = {
+			project: result.source === "draft" ? await createServerApiClient(options.apiUrl, options.environmentName, { authCookieHeader: getServerAuthCookieHeader(request.headers) }).projects.getBySlug({ slug: options.projectSlug }) : void 0,
+			presentation: result.source === "draft" ? "studio" : "public",
 			apiUrl: options.apiUrl,
 			authenticationUrl: options.authenticationUrl,
 			dehydratedState,
 			environmentName: options.environmentName,
 			head,
 			href: new URL(request.url).href,
-			layoutIdentity: getLayoutIdentity(result.data, result.source),
+			layoutIdentity: getLayoutIdentity(result.data.page.layout, result.source),
 			loaderData: result.data,
 			pathname,
 			projectSlug: options.projectSlug,
 			runtimeBasePath: normalizeRuntimeBasePath(options.runtimeBasePath),
 			source: result.source
 		};
+		await preparePreviewDocument(pageRenderInput, options, document, result.source === "live" ? "" : void 0);
 		const appHtml = await options.renderPage(pageRenderInput);
-		const renderedHead = renderHead(document, createPageHeadInput(head), options.stylesheetUrl);
+		const renderedHead = renderHead(result.source === "draft" ? {} : document, createPageHeadInput(head), result.source === "draft" ? void 0 : options.stylesheetUrl, result.source === "draft" ? options.studioStylesheetUrl : void 0);
 		return new Response(`<!doctype html>
 <html${renderedHead.htmlAttrs}>
 <head>
+${renderStudioThemeScript(result.source === "draft")}
 ${renderedHead.headTags}
 <script id="__CAMOX_DATA__" type="application/json">${serializeJsonForHtml(pageRenderInput)}<\/script>
 </head>
@@ -240,18 +269,102 @@ ${renderClientEntryScript(options.pageClientEntryUrl)}
 </body>
 </html>`, { headers });
 	} catch (error) {
-		if (isNotFoundError(error)) return new Response("No Camox page on this path", { status: 404 });
+		if (isNotFoundError(error)) {
+			const derived = await createDerivedResponse(options, pathname, request);
+			if (derived) return derived;
+			return new Response("No Camox page on this path", { status: 404 });
+		}
+		throw error;
+	}
+}
+async function createDerivedResponse(options, pathname, request, dataOnly = false) {
+	const app = await options.getCamoxApp?.();
+	const match = app && matchDerivedLayout(app.getLayouts(), pathname);
+	if (!match || !dataOnly && !options.renderPage) return null;
+	try {
+		const data = await match.layout._internal.loader({ params: match.params });
+		const serializedData = JSON.parse(JSON.stringify(data));
+		const queryClient = new QueryClient();
+		const authCookieHeader = getServerAuthCookieHeader(request.headers);
+		let source = authCookieHeader ? "draft" : "live";
+		let clearAuthCookie = false;
+		const loadLayout = (source) => createServerApiClient(options.apiUrl, options.environmentName, { authCookieHeader: source === "draft" ? authCookieHeader : void 0 }).layouts.get({
+			projectSlug: options.projectSlug,
+			layoutId: match.layout._internal.id,
+			source
+		});
+		const shared = await loadLayout(source).catch(async (error) => {
+			if (source !== "draft" || !isAuthSessionError(error)) throw error;
+			source = "live";
+			clearAuthCookie = true;
+			return loadLayout("live");
+		});
+		seedBlockCaches(queryClient, shared, source);
+		const input = {
+			project: source === "draft" ? await createServerApiClient(options.apiUrl, options.environmentName, { authCookieHeader }).projects.getBySlug({ slug: options.projectSlug }) : void 0,
+			presentation: source === "draft" ? "studio" : "public",
+			apiUrl: options.apiUrl,
+			authenticationUrl: options.authenticationUrl,
+			projectSlug: options.projectSlug,
+			environmentName: options.environmentName,
+			dehydratedState: dehydrate(queryClient),
+			head: { meta: [{ title: match.layout._internal.title }] },
+			href: request.url,
+			layoutIdentity: getLayoutIdentity(shared.layout, source),
+			loaderData: null,
+			pathname,
+			runtimeBasePath: normalizeRuntimeBasePath(options.runtimeBasePath),
+			source,
+			derived: {
+				layoutId: match.layout._internal.id,
+				data: serializedData,
+				layout: shared.layout
+			}
+		};
+		const document = await options.getDocument?.() ?? {};
+		await preparePreviewDocument(input, options, document, source === "live" && !dataOnly ? "" : void 0);
+		if (dataOnly) return Response.json(input, { headers: {
+			"Cache-Control": "private, no-store",
+			Vary: "Cookie",
+			...clearAuthCookie ? { "Set-Cookie": buildClearServerAuthCookieHeader() } : {}
+		} });
+		const html = await options.renderPage(input);
+		const head = renderHead(source === "draft" ? {} : document, { title: match.layout._internal.title }, source === "draft" ? void 0 : options.stylesheetUrl, source === "draft" ? options.studioStylesheetUrl : void 0);
+		return new Response(`<!doctype html><html${head.htmlAttrs}><head>${renderStudioThemeScript(source === "draft")}${head.headTags}<script id="__CAMOX_DATA__" type="application/json">${serializeJsonForHtml(input)}<\/script></head><body${head.bodyAttrs}>${head.bodyTagsOpen}<div id="root">${html}</div>${head.bodyTags}${renderClientEntryScript(options.pageClientEntryUrl)}</body></html>`, { headers: {
+			"Content-Type": "text/html; charset=utf-8",
+			Vary: "Cookie",
+			...authCookieHeader ? { "Cache-Control": "private, no-store" } : {},
+			...clearAuthCookie ? { "Set-Cookie": buildClearServerAuthCookieHeader() } : {}
+		} });
+	} catch (error) {
+		if (isNotFoundError(error)) return new Response("Page not found", { status: 404 });
 		throw error;
 	}
 }
-async function createStudioHtmlResponse({ match, options, request }) {
-	if (!options.apiUrl || !options.authenticationUrl || !options.projectSlug || !options.renderStudio) return Response.json({
+async function createStudioHtmlResponse({ match, options, request, dataOnly = false }) {
+	if (!options.apiUrl || !options.authenticationUrl || !options.projectSlug || !dataOnly && !options.renderStudio) return Response.json({
 		message: "Camox Studio renderer is not configured.",
 		...match
 	}, { status: 500 });
 	const queryClient = new QueryClient();
-	const document = await options.getDocument?.() ?? {};
+	const authCookieHeader = getServerAuthCookieHeader(request.headers);
+	let project;
+	let presentation = "public";
+	let clearAuthCookie = false;
+	if (authCookieHeader) try {
+		project = await createServerApiClient(options.apiUrl, options.environmentName, { authCookieHeader }).projects.getBySlug({ slug: options.projectSlug });
+		presentation = "studio";
+	} catch (error) {
+		if (!isAuthSessionError(error)) throw error;
+		clearAuthCookie = true;
+	}
 	const studioRenderInput = {
+		project,
+		source: "live",
+		head: { meta: [{ title: "Camox Studio" }] },
+		layoutIdentity: null,
+		loaderData: null,
+		presentation,
 		apiUrl: options.apiUrl,
 		authenticationUrl: options.authenticationUrl,
 		dehydratedState: dehydrate(queryClient),
@@ -262,11 +375,17 @@ async function createStudioHtmlResponse({ match, options, request }) {
 		routeKind: match.kind,
 		runtimeBasePath: normalizeRuntimeBasePath(options.runtimeBasePath)
 	};
+	if (dataOnly) return Response.json(studioRenderInput, { headers: {
+		"Cache-Control": "private, no-store",
+		Vary: "Cookie",
+		...clearAuthCookie ? { "Set-Cookie": buildClearServerAuthCookieHeader() } : {}
+	} });
 	const appHtml = await options.renderStudio(studioRenderInput);
-	const renderedHead = renderHead(document, {}, options.stylesheetUrl);
+	const renderedHead = renderHead({}, { title: "Camox Studio" }, void 0, presentation === "studio" ? options.studioStylesheetUrl : void 0);
 	return new Response(`<!doctype html>
 <html${renderedHead.htmlAttrs}>
 <head>
+${renderStudioThemeScript(presentation === "studio")}
 ${renderedHead.headTags}
 <script id="__CAMOX_DATA__" type="application/json">${serializeJsonForHtml(studioRenderInput)}<\/script>
 </head>
@@ -276,7 +395,12 @@ ${renderedHead.bodyTagsOpen}
 ${renderedHead.bodyTags}
 ${renderClientEntryScript(options.studioClientEntryUrl)}
 </body>
-</html>`, { headers: { "Content-Type": "text/html; charset=utf-8" } });
+</html>`, { headers: {
+		"Content-Type": "text/html; charset=utf-8",
+		"Cache-Control": "private, no-store",
+		Vary: "Cookie",
+		...clearAuthCookie ? { "Set-Cookie": buildClearServerAuthCookieHeader() } : {}
+	} });
 }
 async function createPageDataResponse({ options, pathname, request }) {
 	if (!options.apiUrl || !options.projectSlug) return Response.json({ message: "Camox page loader is not configured." }, { status: 500 });
@@ -291,43 +415,44 @@ async function createPageDataResponse({ options, pathname, request }) {
 			projectSlug: options.projectSlug,
 			queryClient
 		});
-		const headers = new Headers({ "Content-Type": "application/json; charset=utf-8" });
+		const headers = new Headers({
+			"Content-Type": "application/json; charset=utf-8",
+			"Cache-Control": "private, no-store",
+			Vary: "Cookie"
+		});
 		if (result.shouldClearAuthCookie) headers.append("Set-Cookie", buildClearServerAuthCookieHeader());
 		const camoxApp = await options.getCamoxApp?.();
 		const head = camoxApp ? buildCamoxPageHead(camoxApp, result.data) : null;
 		const dehydratedState = dehydrate(queryClient);
-		const { page, layout, projectName, project } = result.data.page;
-		return new Response(`${JSON.stringify({
-			kind: "page",
+		const project = result.source === "draft" ? await createServerApiClient(options.apiUrl, options.environmentName, { authCookieHeader: getServerAuthCookieHeader(request.headers) }).projects.getBySlug({ slug: options.projectSlug }) : void 0;
+		const input = {
+			apiUrl: options.apiUrl,
+			authenticationUrl: options.authenticationUrl ?? "",
+			environmentName: options.environmentName,
+			projectSlug: options.projectSlug,
+			runtimeBasePath: normalizeRuntimeBasePath(options.runtimeBasePath),
+			href: request.url,
+			presentation: result.source === "draft" ? "studio" : "public",
+			source: result.source,
 			pathname,
-			page: {
-				id: page.id,
-				fullPath: page.fullPath,
-				metaTitle: page.metaTitle,
-				metaDescription: page.metaDescription
-			},
-			layout: layout ? {
-				id: layout.id,
-				layoutId: layout.layoutId
-			} : null,
-			layoutIdentity: getLayoutIdentity(result.data, result.source),
-			project: {
-				id: project.id,
-				name: projectName
-			},
-			loaderData: {
-				faviconUrl: result.data.faviconUrl,
-				origin: result.data.origin
-			},
+			layoutIdentity: getLayoutIdentity(result.data.page.layout, result.source),
+			project,
+			loaderData: result.data,
 			head,
 			dehydratedState
-		}, null, 2)}\n`, { headers });
+		};
+		await preparePreviewDocument(input, options, await options.getDocument?.() ?? {});
+		return Response.json(input, { headers });
 	} catch (error) {
-		if (isNotFoundError(error)) return Response.json({
-			kind: "page",
-			message: "No Camox page on this path",
-			pathname
-		}, { status: 404 });
+		if (isNotFoundError(error)) {
+			const derived = await createDerivedResponse(options, pathname, request, true);
+			if (derived) return derived;
+			return Response.json({
+				kind: "page",
+				message: "No Camox page on this path",
+				pathname
+			}, { status: 404 });
+		}
 		throw error;
 	}
 }
@@ -346,11 +471,22 @@ async function handleCamoxRequest(request, options = {}) {
 	}
 	if (match.kind === "og") return createOgResponse(request, options);
 	if (match.kind === "sitemap") return createSitemapResponse(request, options);
-	if (match.kind === "data") return createPageDataResponse({
-		options,
-		pathname: normalizePagePath(new URL(request.url).searchParams.get("path")),
-		request
-	});
+	if (match.kind === "data") {
+		const targetPathname = normalizePagePath(new URL(request.url).searchParams.get("path"));
+		const targetMatch = matchRuntimeRoute(targetPathname);
+		if (targetMatch.kind.startsWith("studio")) return createStudioHtmlResponse({
+			match: targetMatch,
+			options,
+			request,
+			dataOnly: true
+		});
+		if (targetMatch.kind !== "page") return new Response("Not found", { status: 404 });
+		return createPageDataResponse({
+			options,
+			pathname: targetPathname,
+			request
+		});
+	}
 	if (match.kind === "studio" || match.kind === "studio-content" || match.kind === "studio-nested") return createStudioHtmlResponse({
 		match,
 		options,

package/dist/features/runtime/studioApp.d.ts

@@ -1,15 +1,6 @@
+import { PageRenderInput } from "./runtime.js";
 import { QueryClient } from "@tanstack/react-query";
 //#region src/features/runtime/studioApp.d.ts
-interface StudioRenderInput {
-  apiUrl: string;
-  authenticationUrl: string;
-  dehydratedState: unknown;
-  environmentName?: string;
-  href: string;
-  pathname: string;
-  projectSlug: string;
-  routeKind: "studio" | "studio-content" | "studio-nested";
-  runtimeBasePath: string;
-}
+type StudioRenderInput = PageRenderInput;
 //#endregion
 export { StudioRenderInput };