camox 0.40.0 → 0.41.1

package/dist/features/runtime/pageApp.js

@@ -1,7 +1,12 @@
-import { useAuthState } from "../../lib/auth.js";
+import { useAuthState, useSignInRedirect } from "../../lib/auth.js";
+import { PreviewDocumentContext } from "./PreviewDocumentContext.js";
+import { PreviewActivation } from "../preview/components/PreviewActivation.js";
+import { Frame } from "../preview/components/Frame.js";
 import { CoreCamoxProvider, isLocalhostPreview } from "../provider/CoreCamoxProvider.js";
+import { DerivedPageContent } from "../page/DerivedPageContent.js";
 import { PublishedPageExperience } from "../page/PublishedPageExperience.js";
 import { PageNavigationProvider } from "./pageNavigation.js";
+import { RuntimeChrome } from "./RuntimeChrome.js";
 import { c } from "react/compiler-runtime";
 import { HydrationBoundary, QueryClientProvider } from "@tanstack/react-query";
 import * as React from "react";
@@ -9,76 +14,75 @@ import { jsx } from "react/jsx-runtime";
 
 //#region src/features/runtime/pageApp.tsx
 function PageApp(t0) {
-	const $ = c(22);
-	if ($[0] !== "41b609b6b6e9223ab6f76c85adfea25789d9d089bc02ca12ea1dd789dd8294d1") {
-		for (let $i = 0; $i < 22; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "41b609b6b6e9223ab6f76c85adfea25789d9d089bc02ca12ea1dd789dd8294d1";
+	const $ = c(19);
+	if ($[0] !== "9929b5234f34e8dc8642da9eb491a90e9a57f3ab875ddfc1a186f42f4452f2f5") {
+		for (let $i = 0; $i < 19; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "9929b5234f34e8dc8642da9eb491a90e9a57f3ab875ddfc1a186f42f4452f2f5";
 	}
 	const { camoxApp, input, queryClient } = t0;
 	const t1 = input.dehydratedState;
 	let t2;
-	if ($[1] !== camoxApp || $[2] !== input || $[3] !== queryClient) {
-		t2 = /* @__PURE__ */ jsx(PageExperience, {
-			camoxApp,
-			input,
-			queryClient
-		});
-		$[1] = camoxApp;
-		$[2] = input;
-		$[3] = queryClient;
-		$[4] = t2;
-	} else t2 = $[4];
-	let t3;
-	if ($[5] !== camoxApp || $[6] !== input.apiUrl || $[7] !== input.authenticationUrl || $[8] !== input.environmentName || $[9] !== input.projectSlug || $[10] !== t2) {
-		t3 = /* @__PURE__ */ jsx(CoreCamoxProvider, {
+	if ($[1] !== camoxApp || $[2] !== input.apiUrl || $[3] !== input.authenticationUrl || $[4] !== input.environmentName || $[5] !== input.presentation || $[6] !== input.projectSlug || $[7] !== queryClient) {
+		t2 = (currentInput) => /* @__PURE__ */ jsx(CoreCamoxProvider, {
 			camoxApp,
 			authenticationUrl: input.authenticationUrl,
 			apiUrl: input.apiUrl,
 			projectSlug: input.projectSlug,
 			environmentName: input.environmentName,
-			children: t2
+			initialAuthenticated: input.presentation === "studio",
+			initialProject: currentInput.project,
+			children: /* @__PURE__ */ jsx(PreviewDocumentContext.Provider, {
+				value: currentInput.previewDocument,
+				children: /* @__PURE__ */ jsx(PageExperience, {
+					camoxApp,
+					input: currentInput,
+					queryClient,
+					studioDocument: input.presentation === "studio"
+				})
+			})
 		});
-		$[5] = camoxApp;
-		$[6] = input.apiUrl;
-		$[7] = input.authenticationUrl;
-		$[8] = input.environmentName;
-		$[9] = input.projectSlug;
-		$[10] = t2;
-		$[11] = t3;
-	} else t3 = $[11];
-	let t4;
-	if ($[12] !== input || $[13] !== queryClient || $[14] !== t3) {
-		t4 = /* @__PURE__ */ jsx(PageNavigationProvider, {
+		$[1] = camoxApp;
+		$[2] = input.apiUrl;
+		$[3] = input.authenticationUrl;
+		$[4] = input.environmentName;
+		$[5] = input.presentation;
+		$[6] = input.projectSlug;
+		$[7] = queryClient;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== input || $[10] !== queryClient || $[11] !== t2) {
+		t3 = /* @__PURE__ */ jsx(PageNavigationProvider, {
 			initialInput: input,
 			queryClient,
+			children: t2
+		});
+		$[9] = input;
+		$[10] = queryClient;
+		$[11] = t2;
+		$[12] = t3;
+	} else t3 = $[12];
+	let t4;
+	if ($[13] !== t1 || $[14] !== t3) {
+		t4 = /* @__PURE__ */ jsx(HydrationBoundary, {
+			state: t1,
 			children: t3
 		});
-		$[12] = input;
-		$[13] = queryClient;
+		$[13] = t1;
 		$[14] = t3;
 		$[15] = t4;
 	} else t4 = $[15];
 	let t5;
-	if ($[16] !== t1 || $[17] !== t4) {
-		t5 = /* @__PURE__ */ jsx(HydrationBoundary, {
-			state: t1,
+	if ($[16] !== queryClient || $[17] !== t4) {
+		t5 = /* @__PURE__ */ jsx(QueryClientProvider, {
+			client: queryClient,
 			children: t4
 		});
-		$[16] = t1;
+		$[16] = queryClient;
 		$[17] = t4;
 		$[18] = t5;
 	} else t5 = $[18];
-	let t6;
-	if ($[19] !== queryClient || $[20] !== t5) {
-		t6 = /* @__PURE__ */ jsx(QueryClientProvider, {
-			client: queryClient,
-			children: t5
-		});
-		$[19] = queryClient;
-		$[20] = t5;
-		$[21] = t6;
-	} else t6 = $[21];
-	return t6;
+	return t5;
 }
 const LazyEditablePageExperience = React.lazy(() => import("../preview/EditablePageExperience.js").then((module) => ({ default: module.EditablePageExperience })));
 const LazyLocalhostPreviewProvider = React.lazy(() => import("../provider/LocalhostPreviewProvider.js").then((module) => ({ default: module.LocalhostPreviewProvider })));
@@ -88,100 +92,171 @@ var EditingActivationBoundary = class extends React.Component {
 		return { failed: true };
 	}
 	componentDidCatch(error) {
-		console.error("Camox editing runtime failed to load; keeping the published page visible.", error);
+		console.error("Camox editing runtime failed to load.", error);
 	}
 	render() {
-		if (this.state.failed) return this.props.fallback;
-		return this.props.children;
+		return this.state.failed ? this.props.fallback : this.props.children;
 	}
 };
+const subscribeToHydration = () => () => {};
 function PageExperience(t0) {
-	const $ = c(21);
-	if ($[0] !== "41b609b6b6e9223ab6f76c85adfea25789d9d089bc02ca12ea1dd789dd8294d1") {
-		for (let $i = 0; $i < 21; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "41b609b6b6e9223ab6f76c85adfea25789d9d089bc02ca12ea1dd789dd8294d1";
+	const $ = c(39);
+	if ($[0] !== "9929b5234f34e8dc8642da9eb491a90e9a57f3ab875ddfc1a186f42f4452f2f5") {
+		for (let $i = 0; $i < 39; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "9929b5234f34e8dc8642da9eb491a90e9a57f3ab875ddfc1a186f42f4452f2f5";
 	}
-	const { camoxApp, input, queryClient } = t0;
-	const { isAuthenticated } = useAuthState();
-	const [hasOtt] = React.useState(_temp);
-	const local = isLocalhostPreview();
-	const shouldActivateEditing = isAuthenticated || input.source === "draft" || hasOtt;
+	const { camoxApp, input, queryClient, studioDocument } = t0;
+	const { isAuthenticated, isLoading } = useAuthState();
+	const hasHydrated = React.useSyncExternalStore(subscribeToHydration, _temp, _temp2);
+	const signIn = useSignInRedirect();
 	let t1;
-	if ($[1] !== input.source) {
-		t1 = /* @__PURE__ */ jsx(PublishedPageExperience, { source: input.source });
-		$[1] = input.source;
-		$[2] = t1;
-	} else t1 = $[2];
-	const published = t1;
-	if (shouldActivateEditing) {
-		let t2;
-		if ($[3] !== camoxApp || $[4] !== input || $[5] !== queryClient) {
-			t2 = /* @__PURE__ */ jsx(LazyEditablePageExperience, {
+	let t2;
+	if ($[1] !== input.routeKind || $[2] !== isAuthenticated || $[3] !== isLoading || $[4] !== signIn) {
+		t1 = () => {
+			if (input.routeKind && !isAuthenticated && !isLoading) signIn();
+		};
+		t2 = [
+			input.routeKind,
+			isAuthenticated,
+			isLoading,
+			signIn
+		];
+		$[1] = input.routeKind;
+		$[2] = isAuthenticated;
+		$[3] = isLoading;
+		$[4] = signIn;
+		$[5] = t1;
+		$[6] = t2;
+	} else {
+		t1 = $[5];
+		t2 = $[6];
+	}
+	React.useEffect(t1, t2);
+	let t3;
+	if ($[7] !== camoxApp || $[8] !== input.derived || $[9] !== input.routeKind || $[10] !== input.source) {
+		t3 = input.routeKind ? /* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground p-6 text-sm",
+			children: "Loading Studio…"
+		}) : input.derived ? /* @__PURE__ */ jsx(DerivedPageContent, {
+			camoxApp,
+			derived: input.derived,
+			source: input.source
+		}) : /* @__PURE__ */ jsx(PublishedPageExperience, { source: input.source });
+		$[7] = camoxApp;
+		$[8] = input.derived;
+		$[9] = input.routeKind;
+		$[10] = input.source;
+		$[11] = t3;
+	} else t3 = $[11];
+	const published = t3;
+	let t4;
+	if ($[12] !== published) {
+		t4 = /* @__PURE__ */ jsx(Frame, { children: published });
+		$[12] = published;
+		$[13] = t4;
+	} else t4 = $[13];
+	const isolatedPage = t4;
+	const fallback = input.routeKind ? published : isolatedPage;
+	if (isAuthenticated) {
+		let t5;
+		if ($[14] !== camoxApp || $[15] !== hasHydrated || $[16] !== input || $[17] !== queryClient) {
+			t5 = hasHydrated ? /* @__PURE__ */ jsx(LazyEditablePageExperience, {
 				camoxApp,
 				input,
 				queryClient
+			}) : null;
+			$[14] = camoxApp;
+			$[15] = hasHydrated;
+			$[16] = input;
+			$[17] = queryClient;
+			$[18] = t5;
+		} else t5 = $[18];
+		const editor = t5;
+		let t6;
+		if ($[19] !== editor || $[20] !== fallback || $[21] !== input.previewDocument || $[22] !== input.routeKind || $[23] !== published) {
+			t6 = input.routeKind ? /* @__PURE__ */ jsx(React.Suspense, {
+				fallback,
+				children: editor ?? fallback
+			}) : /* @__PURE__ */ jsx(PreviewActivation, {
+				fallback: /* @__PURE__ */ jsx(Frame, {
+					serverOnly: !!input.previewDocument,
+					children: published
+				}),
+				children: editor
 			});
-			$[3] = camoxApp;
-			$[4] = input;
-			$[5] = queryClient;
-			$[6] = t2;
-		} else t2 = $[6];
-		let t3;
-		if ($[7] !== published || $[8] !== t2) {
-			t3 = /* @__PURE__ */ jsx(React.Suspense, {
-				fallback: published,
-				children: t2
+			$[19] = editor;
+			$[20] = fallback;
+			$[21] = input.previewDocument;
+			$[22] = input.routeKind;
+			$[23] = published;
+			$[24] = t6;
+		} else t6 = $[24];
+		let t7;
+		if ($[25] !== fallback || $[26] !== t6) {
+			t7 = /* @__PURE__ */ jsx(EditingActivationBoundary, {
+				fallback,
+				children: t6
 			});
-			$[7] = published;
-			$[8] = t2;
-			$[9] = t3;
-		} else t3 = $[9];
-		let t4;
-		if ($[10] !== published || $[11] !== t3) {
-			t4 = /* @__PURE__ */ jsx(EditingActivationBoundary, {
-				fallback: published,
-				children: t3
+			$[25] = fallback;
+			$[26] = t6;
+			$[27] = t7;
+		} else t7 = $[27];
+		let t8;
+		if ($[28] !== input || $[29] !== t7) {
+			t8 = /* @__PURE__ */ jsx(RuntimeChrome, {
+				input,
+				children: t7
 			});
-			$[10] = published;
-			$[11] = t3;
-			$[12] = t4;
-		} else t4 = $[12];
-		return t4;
+			$[28] = input;
+			$[29] = t7;
+			$[30] = t8;
+		} else t8 = $[30];
+		return t8;
 	}
-	if (local) {
-		let t2;
-		if ($[13] !== published) {
-			t2 = /* @__PURE__ */ jsx(LazyLocalhostPreviewProvider, { children: published });
-			$[13] = published;
-			$[14] = t2;
-		} else t2 = $[14];
-		let t3;
-		if ($[15] !== published || $[16] !== t2) {
-			t3 = /* @__PURE__ */ jsx(React.Suspense, {
+	if (input.routeKind) return null;
+	if (hasHydrated && isLocalhostPreview()) {
+		let t5;
+		if ($[31] !== published) {
+			t5 = /* @__PURE__ */ jsx(LazyLocalhostPreviewProvider, { children: published });
+			$[31] = published;
+			$[32] = t5;
+		} else t5 = $[32];
+		let t6;
+		if ($[33] !== published || $[34] !== t5) {
+			t6 = /* @__PURE__ */ jsx(React.Suspense, {
 				fallback: published,
-				children: t2
+				children: t5
 			});
-			$[15] = published;
-			$[16] = t2;
-			$[17] = t3;
-		} else t3 = $[17];
-		let t4;
-		if ($[18] !== published || $[19] !== t3) {
-			t4 = /* @__PURE__ */ jsx(EditingActivationBoundary, {
-				fallback: published,
-				children: t3
+			$[33] = published;
+			$[34] = t5;
+			$[35] = t6;
+		} else t6 = $[35];
+		return t6;
+	}
+	if (studioDocument) {
+		let t5;
+		if ($[36] === Symbol.for("react.memo_cache_sentinel")) {
+			t5 = { height: "100vh" };
+			$[36] = t5;
+		} else t5 = $[36];
+		let t6;
+		if ($[37] !== isolatedPage) {
+			t6 = /* @__PURE__ */ jsx("div", {
+				style: t5,
+				children: isolatedPage
 			});
-			$[18] = published;
-			$[19] = t3;
-			$[20] = t4;
-		} else t4 = $[20];
-		return t4;
+			$[37] = isolatedPage;
+			$[38] = t6;
+		} else t6 = $[38];
+		return t6;
 	}
 	return published;
 }
+function _temp2() {
+	return false;
+}
 function _temp() {
-	if (typeof window === "undefined") return false;
-	return new URL(window.location.href).searchParams.has("ott");
+	return true;
 }
 
 //#endregion

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;