camox 0.44.0 → 0.46.0

package/dist/features/preview/CamoxPreview.js

@@ -1,30 +1,38 @@
-import { useLocation, useNavigate } from "../navigation/navigation.js";
 import { actionsStore } from "../provider/actionsStore.js";
-import { useIsAuthenticated, useProjectSlug } from "../../lib/auth.js";
-import { getApiClient } from "../../lib/api-client.js";
-import { NormalizedDataProvider, seedBlockCaches, usePageBlocks } from "../../lib/normalized-data.js";
-import { BlockErrorBoundary } from "./components/BlockErrorBoundary.js";
+import { useIsAuthenticated, useProjectUuid } from "../../lib/auth.js";
+import { parseLocalePath } from "../../lib/locale-path.js";
+import { useCurrentDraftId, withoutDraft } from "../../lib/draft-scope.js";
+import { useViewLocale } from "../../lib/view-locale-context.js";
+import { useLocation, useNavigate } from "../navigation/navigation.js";
 import { useCamoxApp } from "../provider/components/CamoxAppContext.js";
-import { blockQueries } from "../../lib/queries.js";
-import { usePageDestinations } from "../../hooks/use-page-destinations.js";
+import { NormalizedDataProvider, usePageBlocks } from "../../lib/normalized-data.js";
+import { reads, useRead, useStudioCache } from "../../lib/studio-reads.js";
+import { BlockErrorBoundary } from "./components/BlockErrorBoundary.js";
+import { CollectionItemSheetProvider } from "../content/CollectionItemSheetContext.js";
 import { cn } from "../../lib/utils.js";
-import { SharedChromeContext } from "../runtime/SharedChromeContext.js";
-import { areCommentsEnabled } from "./commentsEnabled.js";
-import { previewStore, selectIsCommentMode, selectIsEditMode, selectPreviewSource } from "./previewStore.js";
-import { Navbar } from "../studio/components/Navbar.js";
+import { ContentCollectionItemSheet } from "../content/ContentCollection.js";
+import { usePageDestinations } from "../../hooks/use-page-destinations.js";
+import { useLocalePath, useLocalizedPath } from "../../lib/view-locale.js";
+import { canvasStore } from "../canvas/canvasStore.js";
+import { SHOW_WHOLE_CANVAS_SHORTCUT, TOGGLE_CANVAS_SHORTCUT } from "./previewConstants.js";
+import { CanvasSidebarSkeleton } from "../canvas/sidebar/CanvasSidebarSkeleton.js";
+import { DerivedPageContent } from "../page/DerivedPageContent.js";
+import { STUDIO_CANVAS_PATH } from "../studio/routes.js";
+import { studioStore } from "../studio/studioStore.js";
+import { previewStore, selectIsCanvasShown } from "./previewStore.js";
+import { AddBlockSheet } from "./components/AddBlockSheet.js";
+import { CanvasPreview, prefetchCanvas } from "./components/CanvasPreview.js";
 import { CreatePageModal } from "./components/CreatePageModal.js";
-import { EDIT_MODE_SHORTCUT } from "./previewConstants.js";
-import { LeftSidebar } from "./components/LeftSidebar.js";
-import { PeekedBlock } from "./components/PeekedBlock.js";
+import { PreviewEditingOwnerContext } from "./previewSelection.js";
+import { PageRecordContext, getPageRecord, useDerivedPageResult, useFollowPageRecord } from "./pageRecord.js";
 import { PreviewPanel } from "./components/PreviewPanel.js";
-import { PreviewToolbarSpacer } from "./components/PreviewToolbarSpacer.js";
-import { RightSidebar } from "./components/RightSidebar.js";
+import { RemovedBlockPlaceholder } from "./components/RemovedBlockPlaceholder.js";
+import { usePreviewViewportActions } from "./usePreviewViewportActions.js";
 import { c } from "react/compiler-runtime";
-import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
 import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useSelector } from "@xstate/store-react";
-import { queryKeys } from "@camox/api-contract/query-keys";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useQueryClient } from "@tanstack/react-query";
 
 //#region src/features/preview/CamoxPreview.tsx
 const MOBILE_STUDIO_QUERY = "(max-width: 767px)";
@@ -37,422 +45,679 @@ function getMobileStudioSnapshot() {
 	return window.matchMedia(MOBILE_STUDIO_QUERY).matches;
 }
 function useIsMobileStudio() {
-	const $ = c(1);
-	if ($[0] !== "1f7f5b8cfc80775a4d8d5a69dedeb5c289bf8de78288daf387d6edc5d5f0b09c") {
-		for (let $i = 0; $i < 1; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "1f7f5b8cfc80775a4d8d5a69dedeb5c289bf8de78288daf387d6edc5d5f0b09c";
-	}
 	return React.useSyncExternalStore(subscribeToMobileStudio, getMobileStudioSnapshot, _temp);
 }
-/**
-* Fetches the current page being previewed, with live updates for authenticated users.
-*
-* Data for the current route is guaranteed in queryClient cache from the loader's
-* ensureQueryData. Live updates are gated by useProjectRoom only running in
-* AuthenticatedCamoxProvider — unauthenticated users get SSR data that never refetches.
-*/
-/**
-* Lightweight queryFn for client-side refetches — only fetches structural data.
-* Used after initial SSR load when block caches are already populated.
-*
-* Source is threaded from the studio's source select (previewStore). Each
-* source has its own cache slot, so toggling Draft↔Live is instant once both
-* have been seeded. Public visitors never invalidate (no project room) so
-* this query function doesn't run for them — they stay on the SSR-seeded
-* 'live' data.
-*/
 function _temp() {
 	return false;
 }
-function pageStructureQueryFn(path, projectSlug, source) {
-	return () => getApiClient().pages.getStructure({
-		path,
-		projectSlug,
-		source
-	});
-}
+/** The page the Preview shows: as the server rendered it, then following edits. */
 function usePreviewedPage() {
-	const $ = c(11);
-	if ($[0] !== "1f7f5b8cfc80775a4d8d5a69dedeb5c289bf8de78288daf387d6edc5d5f0b09c") {
-		for (let $i = 0; $i < 11; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "1f7f5b8cfc80775a4d8d5a69dedeb5c289bf8de78288daf387d6edc5d5f0b09c";
-	}
-	const { pathname } = useLocation();
-	const projectSlug = useProjectSlug();
-	const previewSource = useSelector(previewStore, selectPreviewSource);
+	const $ = c(3);
+	const pathname = useLocalePath();
+	const projectUuid = useProjectUuid();
 	let t0;
-	if ($[1] !== pathname || $[2] !== previewSource) {
-		t0 = queryKeys.pages.getByPath(pathname, previewSource);
-		$[1] = pathname;
-		$[2] = previewSource;
-		$[3] = t0;
-	} else t0 = $[3];
-	let t1;
-	if ($[4] !== pathname || $[5] !== previewSource || $[6] !== projectSlug) {
-		t1 = pageStructureQueryFn(pathname, projectSlug, previewSource);
-		$[4] = pathname;
-		$[5] = previewSource;
-		$[6] = projectSlug;
-		$[7] = t1;
-	} else t1 = $[7];
-	let t2;
-	if ($[8] !== t0 || $[9] !== t1) {
-		t2 = {
-			queryKey: t0,
-			queryFn: t1,
-			staleTime: Infinity
-		};
-		$[8] = t0;
-		$[9] = t1;
-		$[10] = t2;
-	} else t2 = $[10];
-	const { data: currentPage } = useSuspenseQuery(t2);
-	return currentPage;
+	if ($[0] !== pathname || $[1] !== projectUuid) {
+		t0 = reads.pageStructure({
+			path: pathname,
+			projectUuid
+		});
+		$[0] = pathname;
+		$[1] = projectUuid;
+		$[2] = t0;
+	} else t0 = $[2];
+	return useRead(t0);
 }
 const BlockRenderer = (t0) => {
-	const $ = c(23);
-	if ($[0] !== "1f7f5b8cfc80775a4d8d5a69dedeb5c289bf8de78288daf387d6edc5d5f0b09c") {
-		for (let $i = 0; $i < 23; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "1f7f5b8cfc80775a4d8d5a69dedeb5c289bf8de78288daf387d6edc5d5f0b09c";
-	}
+	const $ = c(28);
 	const { blockId, mode, showAddBlockTop, showAddBlockBottom } = t0;
-	const previewSource = useSelector(previewStore, selectPreviewSource);
 	let t1;
-	if ($[1] !== blockId || $[2] !== previewSource) {
-		t1 = blockQueries.get(blockId, previewSource);
-		$[1] = blockId;
-		$[2] = previewSource;
-		$[3] = t1;
-	} else t1 = $[3];
-	const { data } = useSuspenseQuery(t1);
+	if ($[0] !== blockId) {
+		t1 = reads.blockBundle(blockId);
+		$[0] = blockId;
+		$[1] = t1;
+	} else t1 = $[1];
+	const data = useRead(t1);
 	const camoxApp = useCamoxApp();
 	let t2;
-	if ($[4] !== camoxApp || $[5] !== data.block.type) {
+	if ($[2] !== camoxApp || $[3] !== data.block.type) {
 		t2 = camoxApp.getBlockById(data.block.type);
-		$[4] = camoxApp;
-		$[5] = data.block.type;
-		$[6] = t2;
-	} else t2 = $[6];
+		$[2] = camoxApp;
+		$[3] = data.block.type;
+		$[4] = t2;
+	} else t2 = $[4];
 	const blockDef = t2;
-	if (!blockDef) return null;
+	if (!blockDef) {
+		let t3;
+		if ($[5] !== blockId || $[6] !== data.block.type || $[7] !== mode) {
+			t3 = /* @__PURE__ */ jsx(RemovedBlockPlaceholder, {
+				blockId,
+				type: data.block.type,
+				mode
+			});
+			$[5] = blockId;
+			$[6] = data.block.type;
+			$[7] = mode;
+			$[8] = t3;
+		} else t3 = $[8];
+		return t3;
+	}
 	const t3 = data.files;
 	const t4 = data.repeatableItems;
+	let t5;
+	if ($[9] !== data.block) {
+		t5 = [data.block];
+		$[9] = data.block;
+		$[10] = t5;
+	} else t5 = $[10];
 	const T0 = blockDef._internal.Component;
-	const t5 = data.block.id;
-	const t6 = data.block.type;
-	const t7 = data.block.content;
-	const t8 = data.block.settings;
-	const t9 = String(data.block.position);
-	let t10;
-	if ($[7] !== data.block.id || $[8] !== data.block.type || $[9] !== t7 || $[10] !== t8 || $[11] !== t9) {
-		t10 = {
-			_id: t5,
-			type: t6,
-			content: t7,
-			settings: t8,
-			position: t9
-		};
-		$[7] = data.block.id;
-		$[8] = data.block.type;
-		$[9] = t7;
-		$[10] = t8;
-		$[11] = t9;
-		$[12] = t10;
-	} else t10 = $[12];
+	const t6 = data.block.id;
+	const t7 = data.block.type;
+	const t8 = data.block.content;
+	const t9 = data.block.settings;
+	const t10 = String(data.block.position);
 	let t11;
-	if ($[13] !== blockDef._internal.Component || $[14] !== mode || $[15] !== showAddBlockBottom || $[16] !== showAddBlockTop || $[17] !== t10) {
-		t11 = /* @__PURE__ */ jsx(T0, {
-			blockData: t10,
+	if ($[11] !== data.block.id || $[12] !== data.block.type || $[13] !== t10 || $[14] !== t8 || $[15] !== t9) {
+		t11 = {
+			_id: t6,
+			type: t7,
+			content: t8,
+			settings: t9,
+			position: t10
+		};
+		$[11] = data.block.id;
+		$[12] = data.block.type;
+		$[13] = t10;
+		$[14] = t8;
+		$[15] = t9;
+		$[16] = t11;
+	} else t11 = $[16];
+	let t12;
+	if ($[17] !== blockDef._internal.Component || $[18] !== mode || $[19] !== showAddBlockBottom || $[20] !== showAddBlockTop || $[21] !== t11) {
+		t12 = /* @__PURE__ */ jsx(T0, {
+			blockData: t11,
 			mode,
 			showAddBlockTop,
 			showAddBlockBottom
 		});
-		$[13] = blockDef._internal.Component;
-		$[14] = mode;
-		$[15] = showAddBlockBottom;
-		$[16] = showAddBlockTop;
-		$[17] = t10;
-		$[18] = t11;
-	} else t11 = $[18];
-	let t12;
-	if ($[19] !== data.files || $[20] !== data.repeatableItems || $[21] !== t11) {
-		t12 = /* @__PURE__ */ jsx(NormalizedDataProvider, {
-			files: t3,
-			repeatableItems: t4,
-			children: t11
-		});
-		$[19] = data.files;
-		$[20] = data.repeatableItems;
+		$[17] = blockDef._internal.Component;
+		$[18] = mode;
+		$[19] = showAddBlockBottom;
+		$[20] = showAddBlockTop;
 		$[21] = t11;
 		$[22] = t12;
 	} else t12 = $[22];
-	return t12;
+	let t13;
+	if ($[23] !== data.files || $[24] !== data.repeatableItems || $[25] !== t12 || $[26] !== t5) {
+		t13 = /* @__PURE__ */ jsx(NormalizedDataProvider, {
+			files: t3,
+			repeatableItems: t4,
+			blocks: t5,
+			children: t12
+		});
+		$[23] = data.files;
+		$[24] = data.repeatableItems;
+		$[25] = t12;
+		$[26] = t5;
+		$[27] = t13;
+	} else t13 = $[27];
+	return t13;
 };
 const PageContent = () => {
+	const $ = c(30);
 	const pageData = usePreviewedPage();
-	const { pageBlocks, beforeBlocks, afterBlocks, layoutFiles, layoutItems } = usePageBlocks(pageData, useSelector(previewStore, selectPreviewSource));
-	const peekedBlockPosition = useSelector(previewStore, (state) => state.context.peekedBlockPosition);
-	const displayedPositionRef = React.useRef(null);
-	if (peekedBlockPosition !== null) displayedPositionRef.current = peekedBlockPosition;
-	const effectivePosition = peekedBlockPosition ?? displayedPositionRef.current;
-	const onExitComplete = React.useCallback(() => {
-		displayedPositionRef.current = null;
-	}, []);
+	const { pageBlocks, beforeBlocks, afterBlocks, layoutFiles, layoutItems } = usePageBlocks(pageData);
 	const camoxApp = useCamoxApp();
-	const peekedBlockIndex = React.useMemo(() => {
-		if (effectivePosition === "") return 0;
-		if (effectivePosition === null) return pageBlocks.length;
-		const afterBlockIndex = pageBlocks.findIndex((block) => String(block.position) === effectivePosition);
-		if (afterBlockIndex === -1) return pageBlocks.length;
-		return afterBlockIndex + 1;
-	}, [pageBlocks, effectivePosition]);
-	const layout = pageData.layout ? camoxApp.getLayoutById(pageData.layout.layoutId) : void 0;
-	const layoutBlocksMap = React.useMemo(() => {
-		if (!pageData.layout) return null;
-		const allLayoutBlocks = [...beforeBlocks, ...afterBlocks];
-		const blocks = {};
-		for (const block_0 of allLayoutBlocks) blocks[block_0.type] = {
-			_id: block_0.id,
-			type: block_0.type,
-			content: block_0.content,
-			settings: block_0.settings,
-			position: String(block_0.position)
-		};
-		return blocks;
-	}, [
-		pageData.layout,
-		beforeBlocks,
-		afterBlocks
-	]);
-	const pageBlocksContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-		peekedBlockIndex === 0 && pageBlocks.length > 0 && /* @__PURE__ */ jsx(PeekedBlock, { onExitComplete }),
-		pageBlocks.map((blockData, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx(BlockErrorBoundary, {
+	let layout;
+	let layoutBlocksMap;
+	let t0;
+	if ($[0] !== afterBlocks || $[1] !== beforeBlocks || $[2] !== camoxApp || $[3] !== pageBlocks || $[4] !== pageData) {
+		layout = pageData.layout ? camoxApp.getLayoutById(pageData.layout.layoutId) : void 0;
+		let t1;
+		bb0: {
+			if (!pageData.layout) {
+				t1 = null;
+				break bb0;
+			}
+			let blocks;
+			if ($[8] !== afterBlocks || $[9] !== beforeBlocks) {
+				const allLayoutBlocks = [...beforeBlocks, ...afterBlocks];
+				blocks = {};
+				for (const block of allLayoutBlocks) blocks[block.type] = {
+					_id: block.id,
+					type: block.type,
+					content: block.content,
+					settings: block.settings,
+					position: String(block.position)
+				};
+				$[8] = afterBlocks;
+				$[9] = beforeBlocks;
+				$[10] = blocks;
+			} else blocks = $[10];
+			t1 = blocks;
+		}
+		layoutBlocksMap = t1;
+		t0 = pageBlocks.map((blockData, index) => /* @__PURE__ */ jsx(BlockErrorBoundary, {
 			blockId: blockData.id,
 			blockType: blockData.type,
 			children: /* @__PURE__ */ jsx(BlockRenderer, {
 				blockId: blockData.id,
 				mode: "site",
-				showAddBlockTop: index === 0 ? layout?._internal.blockDefinitions.some((b) => b.placement === "before") ?? false : true,
+				showAddBlockTop: index === 0 ? layout?._internal.blockDefinitions.some(_temp2) ?? false : true,
 				showAddBlockBottom: true
 			})
-		}), index === peekedBlockIndex - 1 && /* @__PURE__ */ jsx(PeekedBlock, { onExitComplete })] }, blockData.id)),
-		pageBlocks.length === 0 && /* @__PURE__ */ jsx(PeekedBlock, { onExitComplete })
-	] });
+		}, blockData.id));
+		$[0] = afterBlocks;
+		$[1] = beforeBlocks;
+		$[2] = camoxApp;
+		$[3] = pageBlocks;
+		$[4] = pageData;
+		$[5] = layout;
+		$[6] = layoutBlocksMap;
+		$[7] = t0;
+	} else {
+		layout = $[5];
+		layoutBlocksMap = $[6];
+		t0 = $[7];
+	}
+	let t1;
+	if ($[11] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Fragment, { children: t0 });
+		$[11] = t0;
+		$[12] = t1;
+	} else t1 = $[12];
+	const pageBlocksContent = t1;
 	if (layout && layoutBlocksMap) {
 		const LayoutComponent = layout._internal.component;
-		return /* @__PURE__ */ jsx(NormalizedDataProvider, {
-			files: layoutFiles,
-			repeatableItems: layoutItems,
-			children: /* @__PURE__ */ jsx(layout._internal.Provider, {
+		let t2;
+		if ($[13] !== afterBlocks || $[14] !== beforeBlocks) {
+			t2 = [...beforeBlocks, ...afterBlocks];
+			$[13] = afterBlocks;
+			$[14] = beforeBlocks;
+			$[15] = t2;
+		} else t2 = $[15];
+		let t3;
+		if ($[16] !== LayoutComponent || $[17] !== pageBlocksContent) {
+			t3 = /* @__PURE__ */ jsx(LayoutComponent, { children: pageBlocksContent });
+			$[16] = LayoutComponent;
+			$[17] = pageBlocksContent;
+			$[18] = t3;
+		} else t3 = $[18];
+		let t4;
+		if ($[19] !== layout._internal.Provider || $[20] !== layoutBlocksMap || $[21] !== t3) {
+			t4 = /* @__PURE__ */ jsx(layout._internal.Provider, {
 				layoutBlocks: layoutBlocksMap,
-				children: /* @__PURE__ */ jsx(LayoutComponent, { children: pageBlocksContent })
-			})
-		});
+				children: t3
+			});
+			$[19] = layout._internal.Provider;
+			$[20] = layoutBlocksMap;
+			$[21] = t3;
+			$[22] = t4;
+		} else t4 = $[22];
+		let t5;
+		if ($[23] !== layoutFiles || $[24] !== layoutItems || $[25] !== t2 || $[26] !== t4) {
+			t5 = /* @__PURE__ */ jsx(NormalizedDataProvider, {
+				files: layoutFiles,
+				repeatableItems: layoutItems,
+				blocks: t2,
+				children: t4
+			});
+			$[23] = layoutFiles;
+			$[24] = layoutItems;
+			$[25] = t2;
+			$[26] = t4;
+			$[27] = t5;
+		} else t5 = $[27];
+		return t5;
 	}
-	return /* @__PURE__ */ jsx("main", {
-		className: "flex min-h-screen flex-col",
-		children: pageBlocksContent
-	});
+	let t2;
+	if ($[28] !== pageBlocksContent) {
+		t2 = /* @__PURE__ */ jsx("main", {
+			className: "flex min-h-screen flex-col",
+			children: pageBlocksContent
+		});
+		$[28] = pageBlocksContent;
+		$[29] = t2;
+	} else t2 = $[29];
+	return t2;
 };
-function useHydrateDraftCache() {
-	const $ = c(7);
-	if ($[0] !== "1f7f5b8cfc80775a4d8d5a69dedeb5c289bf8de78288daf387d6edc5d5f0b09c") {
-		for (let $i = 0; $i < 7; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "1f7f5b8cfc80775a4d8d5a69dedeb5c289bf8de78288daf387d6edc5d5f0b09c";
-	}
+/**
+* The read of the page the Preview shows: a curated page's structure, or a layout page's layout. A
+* Canvas-only location, opened first, has no page to show.
+*/
+function pageRead(projectUuid, pathname, derived) {
+	if (pathname === void 0) return null;
+	if (derived) return reads.layoutStructure({
+		projectUuid,
+		layoutId: derived.layoutId
+	});
+	return reads.pageStructure({
+		path: pathname,
+		projectUuid
+	});
+}
+function useRefreshMemberRead(read) {
+	const $ = c(13);
 	const isAuthenticated = useIsAuthenticated();
-	const queryClient = useQueryClient();
-	const projectSlug = useProjectSlug();
-	const { pathname } = useLocation();
+	const studioCache = useStudioCache();
+	const draftId = useCurrentDraftId();
+	let t0;
+	if ($[0] !== draftId || $[1] !== read || $[2] !== studioCache) {
+		t0 = read ? JSON.stringify(studioCache.options(read, { in: draftId }).queryKey) : null;
+		$[0] = draftId;
+		$[1] = read;
+		$[2] = studioCache;
+		$[3] = t0;
+	} else t0 = $[3];
+	const identity = t0;
+	let t1;
+	if ($[4] !== isAuthenticated || $[5] !== read || $[6] !== studioCache) {
+		t1 = () => {
+			if (!isAuthenticated || !read) return;
+			studioCache.reload(read).catch(_temp3);
+		};
+		$[4] = isAuthenticated;
+		$[5] = read;
+		$[6] = studioCache;
+		$[7] = t1;
+	} else t1 = $[7];
+	const reload = React.useEffectEvent(t1);
+	let t2;
+	if ($[8] !== reload) {
+		t2 = () => reload();
+		$[8] = reload;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== identity || $[11] !== isAuthenticated) {
+		t3 = [identity, isAuthenticated];
+		$[10] = identity;
+		$[11] = isAuthenticated;
+		$[12] = t3;
+	} else t3 = $[12];
+	React.useEffect(t2, t3);
+}
+function _temp3() {}
+/**
+* The page the Preview shows: the current one, or on a Canvas-only location,
+* which has none, the last one. The Canvas keeps showing that page in its slot
+* when nothing is selected, so it stays mounted rather than flash as it remounts.
+*/
+function useShownPage(location, derived, canvasOnly) {
+	const $ = c(3);
+	const [last, setLast] = React.useState(null);
+	if (canvasOnly) return last;
+	if (!!last && last.location.href === location.href && last.location.pathname === location.pathname && last.derived === derived) return last;
+	let t0;
+	if ($[0] !== derived || $[1] !== location) {
+		t0 = {
+			location,
+			derived
+		};
+		$[0] = derived;
+		$[1] = location;
+		$[2] = t0;
+	} else t0 = $[2];
+	const current = t0;
+	setLast(current);
+	return current;
+}
+/** Remembers where the Website Section is, so that going back to it from the Studio lands there. */
+function useRememberWebsiteLocation(location) {
+	const $ = c(5);
+	const { locale, locales } = useViewLocale();
 	let t0;
 	let t1;
-	if ($[1] !== isAuthenticated || $[2] !== pathname || $[3] !== projectSlug || $[4] !== queryClient) {
+	if ($[0] !== locale.tag || $[1] !== locales || $[2] !== location) {
 		t0 = () => {
-			if (!isAuthenticated) return;
-			let cancelled = false;
-			getApiClient().pages.getByPath({
-				path: pathname,
-				projectSlug,
-				source: "draft"
-			}).then((data) => {
-				if (cancelled) return;
-				seedBlockCaches(queryClient, data, "draft");
-				queryClient.setQueryData(queryKeys.pages.getByPath(pathname, "draft"), {
-					page: data.page,
-					layout: data.layout,
-					projectName: data.projectName,
-					project: data.project
-				});
-			}).catch(_temp2);
-			return () => {
-				cancelled = true;
-			};
+			const { pathname, search, hash } = location;
+			const url = new URL(withoutDraft(new URL(`${pathname}${search}`, "http://camox.local").href));
+			studioStore.send({
+				type: "rememberWebsiteLocation",
+				location: {
+					locale: locale.tag,
+					path: parseLocalePath(pathname, locales).path,
+					search: url.search,
+					hash
+				}
+			});
 		};
 		t1 = [
-			isAuthenticated,
-			pathname,
-			projectSlug,
-			queryClient
+			location,
+			locale.tag,
+			locales
 		];
-		$[1] = isAuthenticated;
-		$[2] = pathname;
-		$[3] = projectSlug;
-		$[4] = queryClient;
-		$[5] = t0;
-		$[6] = t1;
+		$[0] = locale.tag;
+		$[1] = locales;
+		$[2] = location;
+		$[3] = t0;
+		$[4] = t1;
 	} else {
-		t0 = $[5];
-		t1 = $[6];
+		t0 = $[3];
+		t1 = $[4];
 	}
 	React.useEffect(t0, t1);
 }
-function _temp2() {}
 const CamoxPreview = (t0) => {
-	const $ = c(4);
-	if ($[0] !== "1f7f5b8cfc80775a4d8d5a69dedeb5c289bf8de78288daf387d6edc5d5f0b09c") {
-		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "1f7f5b8cfc80775a4d8d5a69dedeb5c289bf8de78288daf387d6edc5d5f0b09c";
-	}
-	const { children } = t0;
-	const pageData = usePreviewedPage();
-	useHydrateDraftCache();
+	const $ = c(36);
+	const { children, runtimeBasePath, derived, canvasOnly } = t0;
+	const camoxApp = useCamoxApp();
+	const location = useLocation();
+	useRememberWebsiteLocation(location);
+	const shown = useShownPage(location, derived, !!canvasOnly);
+	const pathname = shown?.location.pathname;
+	const shownDerived = shown?.derived;
+	const projectUuid = useProjectUuid();
+	const { locales } = useViewLocale();
 	let t1;
-	if ($[1] !== children || $[2] !== pageData) {
-		t1 = /* @__PURE__ */ jsx(PreviewShell, {
+	if ($[0] !== locales || $[1] !== pathname || $[2] !== projectUuid || $[3] !== shownDerived) {
+		t1 = pageRead(projectUuid, pathname === void 0 ? void 0 : parseLocalePath(pathname, locales).path, shownDerived);
+		$[0] = locales;
+		$[1] = pathname;
+		$[2] = projectUuid;
+		$[3] = shownDerived;
+		$[4] = t1;
+	} else t1 = $[4];
+	const shownRead = t1;
+	const data = useRead(shownRead);
+	useRefreshMemberRead(shownRead);
+	const t2 = runtimeBasePath ?? "";
+	const t3 = pathname ?? location.pathname;
+	let t4;
+	if ($[5] !== shownDerived) {
+		t4 = shownDerived ? { result: shownDerived.result } : void 0;
+		$[5] = shownDerived;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== projectUuid || $[8] !== t2 || $[9] !== t3 || $[10] !== t4) {
+		t5 = {
+			projectUuid,
+			runtimeBasePath: t2,
+			pathname: t3,
+			loaded: t4
+		};
+		$[7] = projectUuid;
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	const derivedResult = useDerivedPageResult(t5);
+	let t6;
+	if ($[12] !== derivedResult) {
+		t6 = getPageRecord(derivedResult);
+		$[12] = derivedResult;
+		$[13] = t6;
+	} else t6 = $[13];
+	const pageRecord = t6;
+	const t7 = runtimeBasePath ?? "";
+	const t8 = shownDerived?.layoutId;
+	let t9;
+	if ($[14] !== pageRecord || $[15] !== projectUuid || $[16] !== t7 || $[17] !== t8) {
+		t9 = {
+			projectUuid,
+			runtimeBasePath: t7,
+			layoutId: t8,
+			record: pageRecord
+		};
+		$[14] = pageRecord;
+		$[15] = projectUuid;
+		$[16] = t7;
+		$[17] = t8;
+		$[18] = t9;
+	} else t9 = $[18];
+	useFollowPageRecord(t9);
+	const pageData = data && "page" in data ? data : void 0;
+	const layout = data && !("page" in data) ? data : void 0;
+	const t10 = shown?.location;
+	let t11;
+	if ($[19] !== camoxApp || $[20] !== children || $[21] !== derivedResult || $[22] !== layout || $[23] !== shown || $[24] !== shownDerived) {
+		t11 = shownDerived && layout ? /* @__PURE__ */ jsx(DerivedPageContent, {
+			camoxApp,
+			derived: {
+				...shownDerived,
+				layout,
+				result: derivedResult
+			}
+		}) : shown ? children : null;
+		$[19] = camoxApp;
+		$[20] = children;
+		$[21] = derivedResult;
+		$[22] = layout;
+		$[23] = shown;
+		$[24] = shownDerived;
+		$[25] = t11;
+	} else t11 = $[25];
+	let t12;
+	if ($[26] !== canvasOnly || $[27] !== layout || $[28] !== pageData || $[29] !== runtimeBasePath || $[30] !== t10 || $[31] !== t11) {
+		t12 = /* @__PURE__ */ jsx(PreviewShell, {
 			pageData,
-			children
+			derivedLayout: layout,
+			pageLocation: t10,
+			canvasOnly,
+			runtimeBasePath,
+			children: t11
+		});
+		$[26] = canvasOnly;
+		$[27] = layout;
+		$[28] = pageData;
+		$[29] = runtimeBasePath;
+		$[30] = t10;
+		$[31] = t11;
+		$[32] = t12;
+	} else t12 = $[32];
+	let t13;
+	if ($[33] !== derivedResult || $[34] !== t12) {
+		t13 = /* @__PURE__ */ jsx(PageRecordContext, {
+			value: derivedResult,
+			children: t12
 		});
-		$[1] = children;
-		$[2] = pageData;
-		$[3] = t1;
-	} else t1 = $[3];
-	return t1;
+		$[33] = derivedResult;
+		$[34] = t12;
+		$[35] = t13;
+	} else t13 = $[35];
+	return t13;
 };
+/**
+* A Canvas-only location only exists on the Canvas. Opening one
+* shows the Canvas, while hiding the Canvas, or a Studio without the Canvas,
+* goes back to the last page shown, or home without one, so Preview always shows a real Page.
+*/
+function useCanvasOnlyLocation(canvasOnly, isCanvasShown, isMobileStudio, lastPage) {
+	const $ = c(10);
+	const navigate = useNavigate();
+	const wasCanvasShown = React.useRef(isCanvasShown);
+	const localized = useLocalizedPath();
+	let t0;
+	if ($[0] !== lastPage || $[1] !== localized) {
+		t0 = lastPage ? `${lastPage.pathname}${lastPage.search}${lastPage.hash}` : localized("/");
+		$[0] = lastPage;
+		$[1] = localized;
+		$[2] = t0;
+	} else t0 = $[2];
+	const lastPageHref = t0;
+	let t1;
+	let t2;
+	if ($[3] !== canvasOnly || $[4] !== isCanvasShown || $[5] !== isMobileStudio || $[6] !== lastPageHref || $[7] !== navigate) {
+		t1 = () => {
+			const left = wasCanvasShown.current && !isCanvasShown;
+			wasCanvasShown.current = isCanvasShown;
+			if (!canvasOnly || isCanvasShown) return;
+			if (isMobileStudio || left) {
+				navigate({
+					to: lastPageHref,
+					replace: true
+				});
+				return;
+			}
+			previewStore.send({ type: "showCanvas" });
+		};
+		t2 = [
+			canvasOnly,
+			isCanvasShown,
+			isMobileStudio,
+			navigate,
+			lastPageHref
+		];
+		$[3] = canvasOnly;
+		$[4] = isCanvasShown;
+		$[5] = isMobileStudio;
+		$[6] = lastPageHref;
+		$[7] = navigate;
+		$[8] = t1;
+		$[9] = t2;
+	} else {
+		t1 = $[8];
+		t2 = $[9];
+	}
+	React.useEffect(t1, t2);
+}
+/**
+* Once the signed-in Studio is idle, loads what showing the Canvas waits for: its code, and
+* the project and page list it lays out. The first show then skips most of its loading.
+*/
+function usePrefetchCanvas(enabled, projectUuid) {
+	const $ = c(6);
+	const queryClient = useQueryClient();
+	const studioCache = useStudioCache();
+	let t0;
+	let t1;
+	if ($[0] !== enabled || $[1] !== projectUuid || $[2] !== queryClient || $[3] !== studioCache) {
+		t0 = () => {
+			if (!enabled) return;
+			const prefetch = async () => {
+				prefetchCanvas();
+				await queryClient.prefetchQuery(studioCache.options(reads.project({ projectUuid })));
+				await queryClient.prefetchQuery(studioCache.options(reads.pageList({ projectUuid })));
+			};
+			if (typeof window.requestIdleCallback === "function") {
+				const id = window.requestIdleCallback(() => void prefetch(), { timeout: 5e3 });
+				return () => window.cancelIdleCallback(id);
+			}
+			const id_0 = window.setTimeout(() => void prefetch(), 2e3);
+			return () => window.clearTimeout(id_0);
+		};
+		t1 = [
+			enabled,
+			projectUuid,
+			queryClient,
+			studioCache
+		];
+		$[0] = enabled;
+		$[1] = projectUuid;
+		$[2] = queryClient;
+		$[3] = studioCache;
+		$[4] = t0;
+		$[5] = t1;
+	} else {
+		t0 = $[4];
+		t1 = $[5];
+	}
+	React.useEffect(t0, t1);
+}
 /** Studio chrome is shared; only curated previews require a Camox page record. */
 const PreviewShell = (t0) => {
-	const $ = c(61);
-	if ($[0] !== "1f7f5b8cfc80775a4d8d5a69dedeb5c289bf8de78288daf387d6edc5d5f0b09c") {
-		for (let $i = 0; $i < 61; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "1f7f5b8cfc80775a4d8d5a69dedeb5c289bf8de78288daf387d6edc5d5f0b09c";
-	}
-	const { children, pageData, hasLiveVersion: t1, derivedLayoutId, derivedLayout } = t0;
-	const hasLiveVersion = t1 === void 0 ? false : t1;
+	const $ = c(49);
+	const { children, pageData, derivedLayout, pageLocation, canvasOnly, runtimeBasePath: t1 } = t0;
+	const runtimeBasePath = t1 === void 0 ? "" : t1;
 	const isAuthenticated = useIsAuthenticated();
+	const projectUuid = useProjectUuid();
 	const isMobileStudio = useIsMobileStudio();
-	const sharedChrome = React.useContext(SharedChromeContext);
-	const isEditMode = useSelector(previewStore, selectIsEditMode);
-	const isCommentMode = useSelector(previewStore, selectIsCommentMode);
-	const isToolbarHidden = useSelector(previewStore, _temp3);
-	const isAddBlockSidebarOpen = useSelector(previewStore, _temp4);
-	const previewSource = useSelector(previewStore, selectPreviewSource);
-	const hasLiveCheckpoint = pageData ? pageData.page.livePublishedCheckpointId != null : hasLiveVersion;
+	const isCanvasShown = useSelector(previewStore, selectIsCanvasShown);
+	usePreviewViewportActions();
+	const isCanvasEnabled = !isMobileStudio && isCanvasShown;
+	usePrefetchCanvas(isAuthenticated && !isMobileStudio, projectUuid);
+	const { pathname } = useLocation();
+	const pageId = canvasOnly ? void 0 : pageData?.page.id;
+	const layoutId = canvasOnly ? void 0 : derivedLayout?.layoutId;
 	let t2;
+	bb0: {
+		if (pageId != null) {
+			let t3;
+			if ($[0] !== pageId) {
+				t3 = {
+					kind: "page",
+					pageId
+				};
+				$[0] = pageId;
+				$[1] = t3;
+			} else t3 = $[1];
+			t2 = t3;
+			break bb0;
+		}
+		if (layoutId != null) {
+			let t3;
+			if ($[2] !== layoutId) {
+				t3 = {
+					kind: "layout",
+					layoutId
+				};
+				$[2] = layoutId;
+				$[3] = t3;
+			} else t3 = $[3];
+			t2 = t3;
+			break bb0;
+		}
+		t2 = null;
+	}
+	const editingOwner = t2;
 	let t3;
-	if ($[1] !== isMobileStudio) {
-		t2 = () => {
+	let t4;
+	if ($[4] !== isMobileStudio) {
+		t3 = () => {
 			if (!isMobileStudio) return;
-			previewStore.send({ type: "exitEditMode" });
-			previewStore.send({ type: "closeAddBlockSidebar" });
+			previewStore.send({ type: "hideCanvas" });
+			previewStore.send({ type: "closeAddBlockSheet" });
 		};
-		t3 = [isMobileStudio];
-		$[1] = isMobileStudio;
-		$[2] = t2;
-		$[3] = t3;
+		t4 = [isMobileStudio];
+		$[4] = isMobileStudio;
+		$[5] = t3;
+		$[6] = t4;
 	} else {
-		t2 = $[2];
-		t3 = $[3];
+		t3 = $[5];
+		t4 = $[6];
 	}
-	React.useEffect(t2, t3);
-	let t4;
+	React.useEffect(t3, t4);
+	useCanvasOnlyLocation(!!canvasOnly && isAuthenticated, isCanvasShown, isMobileStudio, pageLocation);
 	let t5;
-	if ($[4] !== hasLiveCheckpoint || $[5] !== isAuthenticated || $[6] !== isCommentMode || $[7] !== isEditMode || $[8] !== isMobileStudio || $[9] !== pageData || $[10] !== previewSource) {
-		t4 = () => {
+	let t6;
+	if ($[7] !== isAuthenticated || $[8] !== isCanvasShown || $[9] !== isMobileStudio) {
+		t5 = () => {
 			const actions = [
 				{
-					id: "exit-edit-mode",
-					label: "Exit edit mode",
+					id: "hide-canvas",
+					label: "Hide canvas",
 					aliases: [
+						"Preview",
+						"Exit edit mode",
 						"Hide Camox Studio",
-						"Hide studio",
-						"Preview only",
-						"View mode"
+						"Hide studio"
 					],
-					groupLabel: "Preview",
-					checkIfAvailable: () => isAuthenticated && isEditMode,
-					execute: _temp5,
-					shortcut: EDIT_MODE_SHORTCUT
+					groupLabel: "Website",
+					checkIfAvailable: () => isAuthenticated && isCanvasShown,
+					execute: _temp4,
+					shortcut: TOGGLE_CANVAS_SHORTCUT
 				},
 				{
-					id: "enter-edit-mode",
-					label: "Enter edit mode",
+					id: "show-canvas",
+					label: "Show canvas",
 					aliases: [
+						"Edit mode",
 						"Show Camox Studio",
-						"Show studio",
-						"Edit mode"
-					],
-					groupLabel: "Preview",
-					checkIfAvailable: () => isAuthenticated && !isEditMode && !isMobileStudio,
-					execute: _temp6,
-					shortcut: EDIT_MODE_SHORTCUT
-				},
-				{
-					id: "enter-comment-mode",
-					label: "Leave feedback",
-					aliases: [
-						"Comment",
-						"Comment mode",
-						"Show feedback"
-					],
-					groupLabel: "Preview",
-					checkIfAvailable: () => isAuthenticated && !isMobileStudio && pageData != null && areCommentsEnabled() && !isCommentMode,
-					execute: () => {
-						if (!isEditMode) previewStore.send({ type: "enterEditMode" });
-						previewStore.send({
-							type: "setCommentMode",
-							enabled: true
-						});
-					},
-					shortcut: { key: "c" }
-				},
-				{
-					id: "preview-live-content",
-					label: "Preview live content",
-					aliases: [
-						"Live",
-						"View live",
-						"Published content"
+						"Show studio"
 					],
-					groupLabel: "Preview",
-					checkIfAvailable: () => isAuthenticated && previewSource === "draft" && hasLiveCheckpoint,
-					execute: _temp7,
-					shortcut: {
-						key: "d",
-						withAlt: true
-					}
-				},
-				{
-					id: "preview-draft-content",
-					label: "Preview draft content",
-					aliases: [
-						"Draft",
-						"View draft",
-						"Unpublished content"
-					],
-					groupLabel: "Preview",
-					checkIfAvailable: () => isAuthenticated && previewSource === "live",
-					execute: _temp8,
-					shortcut: {
-						key: "d",
-						withAlt: true
-					}
+					groupLabel: "Website",
+					checkIfAvailable: () => isAuthenticated && !isCanvasShown && !isMobileStudio,
+					execute: _temp5,
+					shortcut: TOGGLE_CANVAS_SHORTCUT
 				},
 				{
 					id: "clear-selection",
 					label: "Clear selection",
 					aliases: ["Deselect", "Unselect"],
-					groupLabel: "Preview",
-					checkIfAvailable: _temp9,
-					execute: _temp0,
+					groupLabel: "Website",
+					checkIfAvailable: _temp6,
+					execute: _temp7,
 					shortcut: { key: "Escape" }
 				}
 			];
@@ -463,188 +728,215 @@ const PreviewShell = (t0) => {
 			return () => {
 				actionsStore.send({
 					type: "unregisterManyActions",
-					ids: actions.map(_temp1)
+					ids: actions.map(_temp8)
 				});
 			};
 		};
-		t5 = [
-			isEditMode,
-			isCommentMode,
+		t6 = [
+			isCanvasShown,
 			isAuthenticated,
-			isMobileStudio,
-			pageData,
-			previewSource,
-			hasLiveCheckpoint
+			isMobileStudio
 		];
-		$[4] = hasLiveCheckpoint;
-		$[5] = isAuthenticated;
-		$[6] = isCommentMode;
-		$[7] = isEditMode;
-		$[8] = isMobileStudio;
-		$[9] = pageData;
-		$[10] = previewSource;
-		$[11] = t4;
-		$[12] = t5;
+		$[7] = isAuthenticated;
+		$[8] = isCanvasShown;
+		$[9] = isMobileStudio;
+		$[10] = t5;
+		$[11] = t6;
 	} else {
-		t4 = $[11];
-		t5 = $[12];
+		t5 = $[10];
+		t6 = $[11];
 	}
-	React.useEffect(t4, t5);
+	React.useEffect(t5, t6);
 	if (!isAuthenticated) {
-		let t6;
-		if ($[13] !== children) {
-			t6 = /* @__PURE__ */ jsx(Fragment, { children });
-			$[13] = children;
-			$[14] = t6;
-		} else t6 = $[14];
-		return t6;
+		let t7;
+		if ($[12] !== children) {
+			t7 = /* @__PURE__ */ jsx(Fragment, { children });
+			$[12] = children;
+			$[13] = t7;
+		} else t7 = $[13];
+		return t7;
 	}
-	const t6 = sharedChrome ? "h-full" : "h-screen";
-	const t7 = !isEditMode && "bg-black";
+	const t7 = !isCanvasShown && "bg-black";
 	let t8;
-	if ($[15] !== t6 || $[16] !== t7) {
-		t8 = cn("bg-background flex flex-col overflow-hidden", t6, t7);
-		$[15] = t6;
-		$[16] = t7;
-		$[17] = t8;
-	} else t8 = $[17];
-	let t9;
-	if ($[18] !== isAddBlockSidebarOpen || $[19] !== isMobileStudio || $[20] !== isToolbarHidden || $[21] !== pageData || $[22] !== sharedChrome) {
-		t9 = !sharedChrome && !isMobileStudio && !isToolbarHidden && /* @__PURE__ */ jsxs("div", {
-			className: "relative",
-			children: [/* @__PURE__ */ jsx(Navbar, { isPreview: true }), pageData && isAddBlockSidebarOpen && /* @__PURE__ */ jsx("div", {
-				className: "absolute inset-0 z-20",
-				style: { background: "rgba(0, 0, 0, 0.66)" },
-				onClick: _temp10
-			})]
-		});
-		$[18] = isAddBlockSidebarOpen;
-		$[19] = isMobileStudio;
-		$[20] = isToolbarHidden;
-		$[21] = pageData;
-		$[22] = sharedChrome;
-		$[23] = t9;
-	} else t9 = $[23];
-	let t10;
-	if ($[24] !== derivedLayout || $[25] !== derivedLayoutId || $[26] !== isEditMode || $[27] !== isMobileStudio || $[28] !== pageData) {
-		t10 = !isMobileStudio && (pageData || derivedLayoutId) && /* @__PURE__ */ jsx("div", {
-			className: isEditMode ? "contents" : "hidden",
-			children: /* @__PURE__ */ jsx(LeftSidebar, {
-				page: pageData?.page,
-				derivedLayout
-			})
+	if ($[14] !== t7) {
+		t8 = cn("bg-background relative flex h-full min-h-0 flex-1 flex-col overflow-hidden", t7);
+		$[14] = t7;
+		$[15] = t8;
+	} else t8 = $[15];
+	const t9 = pageLocation?.pathname;
+	const t10 = !canvasOnly;
+	const t11 = !!derivedLayout;
+	let t12;
+	if ($[16] !== t10 || $[17] !== t11) {
+		t12 = /* @__PURE__ */ jsx(CanvasSidebarSkeleton, {
+			page: t10,
+			layoutPage: t11
 		});
-		$[24] = derivedLayout;
-		$[25] = derivedLayoutId;
-		$[26] = isEditMode;
-		$[27] = isMobileStudio;
-		$[28] = pageData;
-		$[29] = t10;
-	} else t10 = $[29];
-	const t11 = pageData?.page;
-	const t12 = pageData?.projectName;
-	const t13 = pageData?.page.id;
-	const t14 = pageData?.page.status;
-	let t15;
-	if ($[30] !== hasLiveCheckpoint || $[31] !== t13 || $[32] !== t14) {
-		t15 = {
-			pageId: t13,
-			pageStatus: t14,
-			hasLiveVersion: hasLiveCheckpoint
-		};
-		$[30] = hasLiveCheckpoint;
-		$[31] = t13;
-		$[32] = t14;
-		$[33] = t15;
-	} else t15 = $[33];
-	let t16;
-	if ($[34] !== isEditMode || $[35] !== isMobileStudio) {
-		t16 = !isMobileStudio && isEditMode && /* @__PURE__ */ jsx(PreviewToolbarSpacer, {});
-		$[34] = isEditMode;
-		$[35] = isMobileStudio;
-		$[36] = t16;
-	} else t16 = $[36];
+		$[16] = t10;
+		$[17] = t11;
+		$[18] = t12;
+	} else t12 = $[18];
+	const t13 = !isCanvasEnabled;
+	const t14 = pageData?.page;
+	const t15 = derivedLayout?.layoutId;
+	const t16 = pageData?.projectName;
 	let t17;
-	if ($[37] !== children || $[38] !== isMobileStudio || $[39] !== t11 || $[40] !== t12 || $[41] !== t15 || $[42] !== t16) {
-		t17 = /* @__PURE__ */ jsxs(PreviewPanel, {
-			isMobileExperience: isMobileStudio,
-			page: t11,
-			projectName: t12,
-			toolbarProps: t15,
-			children: [children, t16]
+	if ($[19] !== children || $[20] !== isMobileStudio || $[21] !== pageLocation || $[22] !== t13 || $[23] !== t14 || $[24] !== t15 || $[25] !== t16) {
+		t17 = /* @__PURE__ */ jsx("div", {
+			className: "flex min-h-0 flex-1 flex-row items-stretch",
+			children: /* @__PURE__ */ jsx(PreviewPanel, {
+				active: t13,
+				isMobileExperience: isMobileStudio,
+				page: t14,
+				layoutId: t15,
+				pageLocation,
+				projectName: t16,
+				children
+			})
 		});
-		$[37] = children;
-		$[38] = isMobileStudio;
-		$[39] = t11;
-		$[40] = t12;
-		$[41] = t15;
-		$[42] = t16;
-		$[43] = t17;
-	} else t17 = $[43];
+		$[19] = children;
+		$[20] = isMobileStudio;
+		$[21] = pageLocation;
+		$[22] = t13;
+		$[23] = t14;
+		$[24] = t15;
+		$[25] = t16;
+		$[26] = t17;
+	} else t17 = $[26];
 	let t18;
-	if ($[44] !== derivedLayoutId || $[45] !== isEditMode || $[46] !== isMobileStudio || $[47] !== pageData?.page) {
-		t18 = !isMobileStudio && isEditMode && /* @__PURE__ */ jsx(RightSidebar, {
-			pageId: pageData?.page.id,
-			derivedLayoutId
+	if ($[27] !== isCanvasEnabled || $[28] !== pathname || $[29] !== runtimeBasePath || $[30] !== t12 || $[31] !== t17 || $[32] !== t9) {
+		t18 = /* @__PURE__ */ jsx(CanvasPreview, {
+			enabled: isCanvasEnabled,
+			pathname,
+			pagePathname: t9,
+			runtimeBasePath,
+			placeholder: t12,
+			children: t17
 		});
-		$[44] = derivedLayoutId;
-		$[45] = isEditMode;
-		$[46] = isMobileStudio;
-		$[47] = pageData?.page;
-		$[48] = t18;
-	} else t18 = $[48];
+		$[27] = isCanvasEnabled;
+		$[28] = pathname;
+		$[29] = runtimeBasePath;
+		$[30] = t12;
+		$[31] = t17;
+		$[32] = t9;
+		$[33] = t18;
+	} else t18 = $[33];
 	let t19;
-	if ($[49] !== t10 || $[50] !== t17 || $[51] !== t18) {
-		t19 = /* @__PURE__ */ jsxs("div", {
-			className: "flex h-full flex-row items-stretch",
-			children: [
-				t10,
-				t17,
-				t18
-			]
-		});
-		$[49] = t10;
-		$[50] = t17;
-		$[51] = t18;
-		$[52] = t19;
-	} else t19 = $[52];
+	if ($[34] !== isCanvasEnabled || $[35] !== pageId) {
+		t19 = !isCanvasEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CreatePageModal, {}), pageId != null && /* @__PURE__ */ jsx(AddBlockSheet, {})] });
+		$[34] = isCanvasEnabled;
+		$[35] = pageId;
+		$[36] = t19;
+	} else t19 = $[36];
 	let t20;
-	if ($[53] !== isEditMode || $[54] !== isMobileStudio) {
-		t20 = (isMobileStudio || isEditMode) && /* @__PURE__ */ jsx(CreatePageModal, {});
-		$[53] = isEditMode;
-		$[54] = isMobileStudio;
-		$[55] = t20;
-	} else t20 = $[55];
-	let t21;
-	if ($[56] !== t19 || $[57] !== t20 || $[58] !== t8 || $[59] !== t9) {
-		t21 = /* @__PURE__ */ jsxs("div", {
+	if ($[37] !== t18 || $[38] !== t19 || $[39] !== t8) {
+		t20 = /* @__PURE__ */ jsxs("div", {
 			className: t8,
-			children: [
-				t9,
-				t19,
-				t20
-			]
+			children: [t18, t19]
 		});
-		$[56] = t19;
-		$[57] = t20;
-		$[58] = t8;
-		$[59] = t9;
-		$[60] = t21;
-	} else t21 = $[60];
-	return t21;
+		$[37] = t18;
+		$[38] = t19;
+		$[39] = t8;
+		$[40] = t20;
+	} else t20 = $[40];
+	let t21;
+	if ($[41] !== editingOwner || $[42] !== t20) {
+		t21 = /* @__PURE__ */ jsx(PreviewEditingOwnerContext, {
+			value: editingOwner,
+			children: t20
+		});
+		$[41] = editingOwner;
+		$[42] = t20;
+		$[43] = t21;
+	} else t21 = $[43];
+	let t22;
+	if ($[44] !== projectUuid) {
+		t22 = /* @__PURE__ */ jsx(ContentCollectionItemSheet, { projectUuid });
+		$[44] = projectUuid;
+		$[45] = t22;
+	} else t22 = $[45];
+	let t23;
+	if ($[46] !== t21 || $[47] !== t22) {
+		t23 = /* @__PURE__ */ jsxs(CollectionItemSheetProvider, {
+			onRouteTargetClose: _temp9,
+			children: [t21, t22]
+		});
+		$[46] = t21;
+		$[47] = t22;
+		$[48] = t23;
+	} else t23 = $[48];
+	return t23;
 };
-function usePreviewPagesActions() {
+/** Zooms out to the whole Canvas, from anywhere in the site or the Studio. */
+function useShowCanvasAction() {
 	const $ = c(6);
-	if ($[0] !== "1f7f5b8cfc80775a4d8d5a69dedeb5c289bf8de78288daf387d6edc5d5f0b09c") {
-		for (let $i = 0; $i < 6; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "1f7f5b8cfc80775a4d8d5a69dedeb5c289bf8de78288daf387d6edc5d5f0b09c";
+	const navigate = useNavigate();
+	const pathname = useLocalePath();
+	const localized = useLocalizedPath();
+	const isMobileStudio = useIsMobileStudio();
+	let t0;
+	let t1;
+	if ($[0] !== isMobileStudio || $[1] !== localized || $[2] !== navigate || $[3] !== pathname) {
+		t0 = () => {
+			const actions = [{
+				id: "show-whole-canvas",
+				label: "Show whole canvas",
+				aliases: [
+					"Canvas",
+					"Zoom out",
+					"Canvas overview",
+					"Back to the canvas"
+				],
+				groupLabel: "Navigation",
+				checkIfAvailable: () => !isMobileStudio,
+				execute: () => {
+					previewStore.send({ type: "showCanvas" });
+					if (pathname !== "/camox/canvas") navigate({ to: localized(STUDIO_CANVAS_PATH) });
+					canvasStore.send({ type: "requestOverview" });
+				},
+				shortcut: SHOW_WHOLE_CANVAS_SHORTCUT
+			}];
+			actionsStore.send({
+				type: "registerManyActions",
+				actions
+			});
+			return () => {
+				actionsStore.send({
+					type: "unregisterManyActions",
+					ids: actions.map(_temp10)
+				});
+			};
+		};
+		t1 = [
+			localized,
+			navigate,
+			pathname,
+			isMobileStudio
+		];
+		$[0] = isMobileStudio;
+		$[1] = localized;
+		$[2] = navigate;
+		$[3] = pathname;
+		$[4] = t0;
+		$[5] = t1;
+	} else {
+		t0 = $[4];
+		t1 = $[5];
 	}
+	React.useEffect(t0, t1);
+}
+function _temp10(a) {
+	return a.id;
+}
+function usePreviewPagesActions() {
+	const $ = c(6);
 	const navigate = useNavigate();
-	const { pathname } = useLocation();
+	const pathname = useLocalePath();
+	const localized = useLocalizedPath();
 	const pages = usePageDestinations();
 	let t0;
 	let t1;
-	if ($[1] !== navigate || $[2] !== pages || $[3] !== pathname) {
+	if ($[0] !== localized || $[1] !== navigate || $[2] !== pages || $[3] !== pathname) {
 		t0 = () => {
 			const currentPage = pages.find((p) => p.kind === "curated" && p.fullPath === pathname);
 			const actions = [
@@ -652,7 +944,7 @@ function usePreviewPagesActions() {
 					id: "create-page",
 					label: "Create page",
 					aliases: ["New page", "Add page"],
-					groupLabel: "Preview",
+					groupLabel: "Website",
 					checkIfAvailable: _temp11,
 					execute: _temp12
 				},
@@ -664,7 +956,7 @@ function usePreviewPagesActions() {
 						"Edit page settings",
 						"Page metadata"
 					],
-					groupLabel: "Preview",
+					groupLabel: "Website",
 					checkIfAvailable: () => currentPage?.kind === "curated",
 					execute: () => {
 						if (currentPage?.kind !== "curated") return;
@@ -682,7 +974,7 @@ function usePreviewPagesActions() {
 						"Navigate page",
 						"Switch page"
 					],
-					groupLabel: "Preview",
+					groupLabel: "Website",
 					checkIfAvailable: () => pages.length > 0,
 					hasChildren: true,
 					execute: _temp13
@@ -692,9 +984,9 @@ function usePreviewPagesActions() {
 					parentActionId: "go-to-page",
 					label: `Go to "${page.title}"`,
 					aliases: [page.fullPath],
-					groupLabel: "Preview",
+					groupLabel: "Website",
 					checkIfAvailable: _temp14,
-					execute: () => navigate({ to: page.fullPath })
+					execute: () => navigate({ to: localized(page.fullPath) })
 				}))
 			];
 			actionsStore.send({
@@ -709,10 +1001,12 @@ function usePreviewPagesActions() {
 			};
 		};
 		t1 = [
+			localized,
 			navigate,
 			pages,
 			pathname
 		];
+		$[0] = localized;
 		$[1] = navigate;
 		$[2] = pages;
 		$[3] = pathname;
@@ -737,40 +1031,25 @@ function _temp12() {
 function _temp11() {
 	return true;
 }
-function _temp3(state) {
-	return state.context.isToolbarHidden;
+function _temp2(b) {
+	return b.slot === "before";
 }
-function _temp4(state_0) {
-	return state_0.context.isAddBlockSidebarOpen;
+function _temp4() {
+	return previewStore.send({ type: "hideCanvas" });
 }
 function _temp5() {
-	return previewStore.send({ type: "exitEditMode" });
+	return previewStore.send({ type: "showCanvas" });
 }
 function _temp6() {
-	return previewStore.send({ type: "enterEditMode" });
-}
-function _temp7() {
-	return previewStore.send({ type: "viewLivePage" });
-}
-function _temp8() {
-	return previewStore.send({ type: "viewDraftPage" });
-}
-function _temp9() {
 	return true;
 }
-function _temp0() {
-	previewStore.send({
-		type: "setCommentMode",
-		enabled: false
-	});
-	previewStore.send({ type: "clearSelection" });
+function _temp7() {
+	return previewStore.send({ type: "clearSelection" });
 }
-function _temp1(a) {
+function _temp8(a) {
 	return a.id;
 }
-function _temp10() {
-	return previewStore.send({ type: "closeAddBlockSidebar" });
-}
+function _temp9() {}
 
 //#endregion
-export { CamoxPreview, PageContent, PreviewShell, usePreviewPagesActions, usePreviewedPage };
+export { CamoxPreview, PageContent, PreviewShell, usePreviewPagesActions, usePreviewedPage, useShowCanvasAction };