camox 0.40.0 → 0.41.1

package/dist/features/preview/CamoxPreview.js

@@ -7,17 +7,18 @@ import { BlockErrorBoundary } from "./components/BlockErrorBoundary.js";
 import { blockQueries, pageQueries, projectQueries } from "../../lib/queries.js";
 import { cn } from "../../lib/utils.js";
 import { useCamoxApp } from "../provider/components/CamoxAppContext.js";
-import { previewStore } from "./previewStore.js";
+import { SharedChromeContext } from "../runtime/SharedChromeContext.js";
+import { previewStore, selectIsEditMode, selectPreviewSource } from "./previewStore.js";
 import { Navbar } from "../studio/components/Navbar.js";
 import { CreatePageModal } from "./components/CreatePageModal.js";
-import { DraftSwitchDialog } from "./components/DraftSwitchDialog.js";
+import { EDIT_MODE_SHORTCUT } from "./previewConstants.js";
 import { LeftSidebar } from "./components/LeftSidebar.js";
 import { PeekedBlock } from "./components/PeekedBlock.js";
 import { PreviewPanel } from "./components/PreviewPanel.js";
+import { PreviewToolbarSpacer } from "./components/PreviewToolbarSpacer.js";
 import { RightSidebar } from "./components/RightSidebar.js";
-import { pageFullQueryFn } from "./previewQueryFns.js";
 import { c } from "react/compiler-runtime";
-import { keepPreviousData, useQuery, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
+import { useQuery, 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";
@@ -35,15 +36,14 @@ function getMobileStudioSnapshot() {
 }
 function useIsMobileStudio() {
 	const $ = c(1);
-	if ($[0] !== "29f1dc43006b541048efc4a08454742012d6157baa9fc62d4636c9c9d20b2ab3") {
+	if ($[0] !== "11649479464867dae9140a3e12df376e886901a1c7db652f3f404c61e069d60d") {
 		for (let $i = 0; $i < 1; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "29f1dc43006b541048efc4a08454742012d6157baa9fc62d4636c9c9d20b2ab3";
+		$[0] = "11649479464867dae9140a3e12df376e886901a1c7db652f3f404c61e069d60d";
 	}
 	return React.useSyncExternalStore(subscribeToMobileStudio, getMobileStudioSnapshot, _temp);
 }
 /**
 * Fetches the current page being previewed, with live updates for authenticated users.
-* Also will switch to peeked page data if there is one.
 *
 * Data for the current route is guaranteed in queryClient cache from the loader's
 * ensureQueryData. Live updates are gated by useProjectRoom only running in
@@ -70,112 +70,51 @@ function pageStructureQueryFn(path, projectSlug, source) {
 	});
 }
 function usePreviewedPage() {
-	const $ = c(26);
-	if ($[0] !== "29f1dc43006b541048efc4a08454742012d6157baa9fc62d4636c9c9d20b2ab3") {
-		for (let $i = 0; $i < 26; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "29f1dc43006b541048efc4a08454742012d6157baa9fc62d4636c9c9d20b2ab3";
+	const $ = c(11);
+	if ($[0] !== "11649479464867dae9140a3e12df376e886901a1c7db652f3f404c61e069d60d") {
+		for (let $i = 0; $i < 11; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "11649479464867dae9140a3e12df376e886901a1c7db652f3f404c61e069d60d";
 	}
 	const { pathname } = useLocation();
-	const queryClient = useQueryClient();
 	const projectSlug = useProjectSlug();
-	const peekedPagePathname = useSelector(previewStore, _temp2);
-	const previewSource = useSelector(previewStore, _temp3);
-	const prevPathnameRef = React.useRef(pathname);
+	const previewSource = useSelector(previewStore, selectPreviewSource);
 	let t0;
-	let t1;
-	if ($[1] !== pathname) {
-		t0 = () => {
-			if (prevPathnameRef.current !== pathname) {
-				prevPathnameRef.current = pathname;
-				previewStore.send({ type: "clearPeekedPage" });
-			}
-		};
-		t1 = [pathname];
+	if ($[1] !== pathname || $[2] !== previewSource) {
+		t0 = queryKeys.pages.getByPath(pathname, previewSource);
 		$[1] = pathname;
-		$[2] = t0;
-		$[3] = t1;
-	} else {
-		t0 = $[2];
-		t1 = $[3];
-	}
-	React.useEffect(t0, t1);
-	let t2;
-	if ($[4] !== pathname || $[5] !== previewSource) {
-		t2 = queryKeys.pages.getByPath(pathname, previewSource);
+		$[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] = t2;
-	} else t2 = $[6];
-	let t3;
-	if ($[7] !== pathname || $[8] !== previewSource || $[9] !== projectSlug) {
-		t3 = pageStructureQueryFn(pathname, projectSlug, previewSource);
-		$[7] = pathname;
-		$[8] = previewSource;
-		$[9] = projectSlug;
-		$[10] = t3;
-	} else t3 = $[10];
-	let t4;
-	if ($[11] !== t2 || $[12] !== t3) {
-		t4 = {
-			queryKey: t2,
-			queryFn: t3,
-			staleTime: Infinity
-		};
-		$[11] = t2;
-		$[12] = t3;
-		$[13] = t4;
-	} else t4 = $[13];
-	const { data: currentPage } = useSuspenseQuery(t4);
-	const isAuthenticated = useIsAuthenticated();
-	let t5;
-	if ($[14] !== peekedPagePathname || $[15] !== previewSource) {
-		t5 = queryKeys.pages.getByPath(peekedPagePathname ?? "", previewSource);
-		$[14] = peekedPagePathname;
-		$[15] = previewSource;
-		$[16] = t5;
-	} else t5 = $[16];
-	const t6 = peekedPagePathname ?? "";
-	let t7;
-	if ($[17] !== previewSource || $[18] !== projectSlug || $[19] !== queryClient || $[20] !== t6) {
-		t7 = pageFullQueryFn(queryClient, t6, projectSlug, previewSource);
-		$[17] = previewSource;
-		$[18] = projectSlug;
-		$[19] = queryClient;
-		$[20] = t6;
-		$[21] = t7;
-	} else t7 = $[21];
-	const t8 = isAuthenticated && !!peekedPagePathname;
-	let t9;
-	if ($[22] !== t5 || $[23] !== t7 || $[24] !== t8) {
-		t9 = {
-			queryKey: t5,
-			queryFn: t7,
-			enabled: t8,
-			placeholderData: keepPreviousData,
+		$[6] = projectSlug;
+		$[7] = t1;
+	} else t1 = $[7];
+	let t2;
+	if ($[8] !== t0 || $[9] !== t1) {
+		t2 = {
+			queryKey: t0,
+			queryFn: t1,
 			staleTime: Infinity
 		};
-		$[22] = t5;
-		$[23] = t7;
-		$[24] = t8;
-		$[25] = t9;
-	} else t9 = $[25];
-	const { data: peekedPage } = useQuery(t9);
-	return peekedPagePathname ? peekedPage ?? currentPage : currentPage;
-}
-function _temp3(state_0) {
-	return state_0.context.previewSource;
-}
-function _temp2(state) {
-	return state.context.peekedPagePathname;
+		$[8] = t0;
+		$[9] = t1;
+		$[10] = t2;
+	} else t2 = $[10];
+	const { data: currentPage } = useSuspenseQuery(t2);
+	return currentPage;
 }
 const BlockRenderer = (t0) => {
 	const $ = c(23);
-	if ($[0] !== "29f1dc43006b541048efc4a08454742012d6157baa9fc62d4636c9c9d20b2ab3") {
+	if ($[0] !== "11649479464867dae9140a3e12df376e886901a1c7db652f3f404c61e069d60d") {
 		for (let $i = 0; $i < 23; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "29f1dc43006b541048efc4a08454742012d6157baa9fc62d4636c9c9d20b2ab3";
+		$[0] = "11649479464867dae9140a3e12df376e886901a1c7db652f3f404c61e069d60d";
 	}
 	const { blockId, mode, showAddBlockTop, showAddBlockBottom } = t0;
-	const previewSource = useSelector(previewStore, _temp4);
+	const previewSource = useSelector(previewStore, selectPreviewSource);
 	let t1;
 	if ($[1] !== blockId || $[2] !== previewSource) {
 		t1 = blockQueries.get(blockId, previewSource);
@@ -249,8 +188,8 @@ const BlockRenderer = (t0) => {
 };
 const PageContent = () => {
 	const pageData = usePreviewedPage();
-	const { pageBlocks, beforeBlocks, afterBlocks, layoutFiles, layoutItems } = usePageBlocks(pageData, useSelector(previewStore, (state) => state.context.previewSource));
-	const peekedBlockPosition = useSelector(previewStore, (state_0) => state_0.context.peekedBlockPosition);
+	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;
@@ -315,9 +254,9 @@ const PageContent = () => {
 };
 function useHydrateDraftCache() {
 	const $ = c(7);
-	if ($[0] !== "29f1dc43006b541048efc4a08454742012d6157baa9fc62d4636c9c9d20b2ab3") {
+	if ($[0] !== "11649479464867dae9140a3e12df376e886901a1c7db652f3f404c61e069d60d") {
 		for (let $i = 0; $i < 7; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "29f1dc43006b541048efc4a08454742012d6157baa9fc62d4636c9c9d20b2ab3";
+		$[0] = "11649479464867dae9140a3e12df376e886901a1c7db652f3f404c61e069d60d";
 	}
 	const isAuthenticated = useIsAuthenticated();
 	const queryClient = useQueryClient();
@@ -342,7 +281,7 @@ function useHydrateDraftCache() {
 					projectName: data.projectName,
 					project: data.project
 				});
-			}).catch(_temp5);
+			}).catch(_temp2);
 			return () => {
 				cancelled = true;
 			};
@@ -365,44 +304,66 @@ function useHydrateDraftCache() {
 	}
 	React.useEffect(t0, t1);
 }
-function _temp5() {}
+function _temp2() {}
 const CamoxPreview = (t0) => {
-	const $ = c(52);
-	if ($[0] !== "29f1dc43006b541048efc4a08454742012d6157baa9fc62d4636c9c9d20b2ab3") {
-		for (let $i = 0; $i < 52; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "29f1dc43006b541048efc4a08454742012d6157baa9fc62d4636c9c9d20b2ab3";
+	const $ = c(4);
+	if ($[0] !== "11649479464867dae9140a3e12df376e886901a1c7db652f3f404c61e069d60d") {
+		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "11649479464867dae9140a3e12df376e886901a1c7db652f3f404c61e069d60d";
 	}
 	const { children } = t0;
-	const isAuthenticated = useIsAuthenticated();
-	const isMobileStudio = useIsMobileStudio();
-	const isEditMode = useSelector(previewStore, _temp6);
-	const isToolbarHidden = useSelector(previewStore, _temp7);
-	const isAddBlockSidebarOpen = useSelector(previewStore, _temp8);
-	const previewSource = useSelector(previewStore, _temp9);
 	const pageData = usePreviewedPage();
 	useHydrateDraftCache();
-	const hasLiveCheckpoint = pageData.page.livePublishedCheckpointId != null;
 	let t1;
+	if ($[1] !== children || $[2] !== pageData) {
+		t1 = /* @__PURE__ */ jsx(PreviewShell, {
+			pageData,
+			children
+		});
+		$[1] = children;
+		$[2] = pageData;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+};
+/** Studio chrome is shared; only curated previews require a Camox page record. */
+const PreviewShell = (t0) => {
+	const $ = c(58);
+	if ($[0] !== "11649479464867dae9140a3e12df376e886901a1c7db652f3f404c61e069d60d") {
+		for (let $i = 0; $i < 58; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "11649479464867dae9140a3e12df376e886901a1c7db652f3f404c61e069d60d";
+	}
+	const { children, pageData, hasLiveVersion: t1, derivedLayoutId, derivedLayout } = t0;
+	const hasLiveVersion = t1 === void 0 ? false : t1;
+	const isAuthenticated = useIsAuthenticated();
+	const isMobileStudio = useIsMobileStudio();
+	const sharedChrome = React.useContext(SharedChromeContext);
+	const isEditMode = useSelector(previewStore, selectIsEditMode);
+	const isToolbarHidden = useSelector(previewStore, _temp3);
+	const isAddBlockSidebarOpen = useSelector(previewStore, _temp4);
+	const previewSource = useSelector(previewStore, selectPreviewSource);
+	const hasLiveCheckpoint = pageData ? pageData.page.livePublishedCheckpointId != null : hasLiveVersion;
 	let t2;
+	let t3;
 	if ($[1] !== isMobileStudio) {
-		t1 = () => {
+		t2 = () => {
 			if (!isMobileStudio) return;
 			previewStore.send({ type: "exitEditMode" });
 			previewStore.send({ type: "closeAddBlockSidebar" });
 		};
-		t2 = [isMobileStudio];
+		t3 = [isMobileStudio];
 		$[1] = isMobileStudio;
-		$[2] = t1;
-		$[3] = t2;
+		$[2] = t2;
+		$[3] = t3;
 	} else {
-		t1 = $[2];
-		t2 = $[3];
+		t2 = $[2];
+		t3 = $[3];
 	}
-	React.useEffect(t1, t2);
-	let t3;
+	React.useEffect(t2, t3);
 	let t4;
+	let t5;
 	if ($[4] !== hasLiveCheckpoint || $[5] !== isAuthenticated || $[6] !== isEditMode || $[7] !== isMobileStudio || $[8] !== previewSource) {
-		t3 = () => {
+		t4 = () => {
 			const actions = [
 				{
 					id: "exit-edit-mode",
@@ -415,11 +376,8 @@ const CamoxPreview = (t0) => {
 					],
 					groupLabel: "Preview",
 					checkIfAvailable: () => isAuthenticated && isEditMode,
-					execute: _temp0,
-					shortcut: {
-						key: "Enter",
-						withMeta: true
-					}
+					execute: _temp5,
+					shortcut: EDIT_MODE_SHORTCUT
 				},
 				{
 					id: "enter-edit-mode",
@@ -431,11 +389,8 @@ const CamoxPreview = (t0) => {
 					],
 					groupLabel: "Preview",
 					checkIfAvailable: () => isAuthenticated && !isEditMode && !isMobileStudio,
-					execute: _temp1,
-					shortcut: {
-						key: "Enter",
-						withMeta: true
-					}
+					execute: _temp6,
+					shortcut: EDIT_MODE_SHORTCUT
 				},
 				{
 					id: "preview-live-content",
@@ -447,7 +402,7 @@ const CamoxPreview = (t0) => {
 					],
 					groupLabel: "Preview",
 					checkIfAvailable: () => isAuthenticated && previewSource === "draft" && hasLiveCheckpoint,
-					execute: _temp10,
+					execute: _temp7,
 					shortcut: {
 						key: "d",
 						withAlt: true
@@ -463,7 +418,7 @@ const CamoxPreview = (t0) => {
 					],
 					groupLabel: "Preview",
 					checkIfAvailable: () => isAuthenticated && previewSource === "live",
-					execute: _temp11,
+					execute: _temp8,
 					shortcut: {
 						key: "d",
 						withAlt: true
@@ -474,8 +429,8 @@ const CamoxPreview = (t0) => {
 					label: "Clear selection",
 					aliases: ["Deselect", "Unselect"],
 					groupLabel: "Preview",
-					checkIfAvailable: _temp12,
-					execute: _temp13,
+					checkIfAvailable: _temp9,
+					execute: _temp0,
 					shortcut: { key: "Escape" }
 				}
 			];
@@ -486,11 +441,11 @@ const CamoxPreview = (t0) => {
 			return () => {
 				actionsStore.send({
 					type: "unregisterManyActions",
-					ids: actions.map(_temp14)
+					ids: actions.map(_temp1)
 				});
 			};
 		};
-		t4 = [
+		t5 = [
 			isEditMode,
 			isAuthenticated,
 			isMobileStudio,
@@ -502,142 +457,158 @@ const CamoxPreview = (t0) => {
 		$[6] = isEditMode;
 		$[7] = isMobileStudio;
 		$[8] = previewSource;
-		$[9] = t3;
-		$[10] = t4;
+		$[9] = t4;
+		$[10] = t5;
 	} else {
-		t3 = $[9];
-		t4 = $[10];
+		t4 = $[9];
+		t5 = $[10];
 	}
-	React.useEffect(t3, t4);
+	React.useEffect(t4, t5);
 	if (!isAuthenticated) {
-		let t5;
+		let t6;
 		if ($[11] !== children) {
-			t5 = /* @__PURE__ */ jsx(Fragment, { children });
+			t6 = /* @__PURE__ */ jsx(Fragment, { children });
 			$[11] = children;
-			$[12] = t5;
-		} else t5 = $[12];
-		return t5;
+			$[12] = t6;
+		} else t6 = $[12];
+		return t6;
 	}
-	const t5 = !isEditMode && "bg-black";
-	let t6;
-	if ($[13] !== t5) {
-		t6 = cn("bg-background flex h-screen flex-col overflow-hidden", t5);
-		$[13] = t5;
-		$[14] = t6;
-	} else t6 = $[14];
-	let t7;
-	if ($[15] !== isAddBlockSidebarOpen || $[16] !== isMobileStudio || $[17] !== isToolbarHidden) {
-		t7 = !isMobileStudio && !isToolbarHidden && /* @__PURE__ */ jsxs("div", {
+	const t6 = sharedChrome ? "h-full" : "h-screen";
+	const t7 = !isEditMode && "bg-black";
+	let t8;
+	if ($[13] !== t6 || $[14] !== t7) {
+		t8 = cn("bg-background flex flex-col overflow-hidden", t6, t7);
+		$[13] = t6;
+		$[14] = t7;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== isAddBlockSidebarOpen || $[17] !== isMobileStudio || $[18] !== isToolbarHidden || $[19] !== pageData || $[20] !== sharedChrome) {
+		t9 = !sharedChrome && !isMobileStudio && !isToolbarHidden && /* @__PURE__ */ jsxs("div", {
 			className: "relative",
-			children: [/* @__PURE__ */ jsx(Navbar, {}), isAddBlockSidebarOpen && /* @__PURE__ */ jsx("div", {
+			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: _temp15
+				onClick: _temp10
 			})]
 		});
-		$[15] = isAddBlockSidebarOpen;
-		$[16] = isMobileStudio;
-		$[17] = isToolbarHidden;
-		$[18] = t7;
-	} else t7 = $[18];
-	let t8;
-	if ($[19] !== isEditMode || $[20] !== isMobileStudio || $[21] !== pageData.page) {
-		t8 = !isMobileStudio && isEditMode && /* @__PURE__ */ jsx(LeftSidebar, { page: pageData.page });
-		$[19] = isEditMode;
-		$[20] = isMobileStudio;
-		$[21] = pageData.page;
-		$[22] = t8;
-	} else t8 = $[22];
-	let t9;
-	if ($[23] !== hasLiveCheckpoint || $[24] !== pageData.page.status) {
-		t9 = {
-			pageStatus: pageData.page.status,
+		$[16] = isAddBlockSidebarOpen;
+		$[17] = isMobileStudio;
+		$[18] = isToolbarHidden;
+		$[19] = pageData;
+		$[20] = sharedChrome;
+		$[21] = t9;
+	} else t9 = $[21];
+	let t10;
+	if ($[22] !== derivedLayout || $[23] !== derivedLayoutId || $[24] !== isEditMode || $[25] !== isMobileStudio || $[26] !== pageData) {
+		t10 = !isMobileStudio && (pageData || derivedLayoutId) && /* @__PURE__ */ jsx("div", {
+			className: isEditMode ? "contents" : "hidden",
+			children: /* @__PURE__ */ jsx(LeftSidebar, {
+				page: pageData?.page,
+				derivedLayout
+			})
+		});
+		$[22] = derivedLayout;
+		$[23] = derivedLayoutId;
+		$[24] = isEditMode;
+		$[25] = isMobileStudio;
+		$[26] = pageData;
+		$[27] = t10;
+	} else t10 = $[27];
+	const t11 = pageData?.page;
+	const t12 = pageData?.projectName;
+	const t13 = pageData?.page.status;
+	let t14;
+	if ($[28] !== hasLiveCheckpoint || $[29] !== t13) {
+		t14 = {
+			pageStatus: t13,
 			hasLiveVersion: hasLiveCheckpoint
 		};
-		$[23] = hasLiveCheckpoint;
-		$[24] = pageData.page.status;
-		$[25] = t9;
-	} else t9 = $[25];
-	let t10;
-	if ($[26] !== isEditMode || $[27] !== isMobileStudio) {
-		t10 = !isMobileStudio && isEditMode && /* @__PURE__ */ jsx("div", { style: {
-			height: "80px",
-			background: "transparent"
-		} });
-		$[26] = isEditMode;
-		$[27] = isMobileStudio;
-		$[28] = t10;
-	} else t10 = $[28];
-	let t11;
-	if ($[29] !== children || $[30] !== isMobileStudio || $[31] !== pageData.page || $[32] !== pageData.projectName || $[33] !== t10 || $[34] !== t9) {
-		t11 = /* @__PURE__ */ jsxs(PreviewPanel, {
+		$[28] = hasLiveCheckpoint;
+		$[29] = t13;
+		$[30] = t14;
+	} else t14 = $[30];
+	let t15;
+	if ($[31] !== isEditMode || $[32] !== isMobileStudio) {
+		t15 = !isMobileStudio && isEditMode && /* @__PURE__ */ jsx(PreviewToolbarSpacer, {});
+		$[31] = isEditMode;
+		$[32] = isMobileStudio;
+		$[33] = t15;
+	} else t15 = $[33];
+	let t16;
+	if ($[34] !== children || $[35] !== isMobileStudio || $[36] !== t11 || $[37] !== t12 || $[38] !== t14 || $[39] !== t15) {
+		t16 = /* @__PURE__ */ jsxs(PreviewPanel, {
 			isMobileExperience: isMobileStudio,
-			page: pageData.page,
-			projectName: pageData.projectName,
-			toolbarProps: t9,
-			children: [children, t10]
+			page: t11,
+			projectName: t12,
+			toolbarProps: t14,
+			children: [children, t15]
 		});
-		$[29] = children;
-		$[30] = isMobileStudio;
-		$[31] = pageData.page;
-		$[32] = pageData.projectName;
-		$[33] = t10;
-		$[34] = t9;
-		$[35] = t11;
-	} else t11 = $[35];
-	let t12;
-	if ($[36] !== isEditMode || $[37] !== isMobileStudio || $[38] !== pageData.page.id) {
-		t12 = !isMobileStudio && isEditMode && /* @__PURE__ */ jsx(RightSidebar, { pageId: pageData.page.id });
-		$[36] = isEditMode;
-		$[37] = isMobileStudio;
-		$[38] = pageData.page.id;
-		$[39] = t12;
-	} else t12 = $[39];
-	let t13;
-	if ($[40] !== t11 || $[41] !== t12 || $[42] !== t8) {
-		t13 = /* @__PURE__ */ jsxs("div", {
+		$[34] = children;
+		$[35] = isMobileStudio;
+		$[36] = t11;
+		$[37] = t12;
+		$[38] = t14;
+		$[39] = t15;
+		$[40] = t16;
+	} else t16 = $[40];
+	let t17;
+	if ($[41] !== derivedLayoutId || $[42] !== isEditMode || $[43] !== isMobileStudio || $[44] !== pageData?.page) {
+		t17 = !isMobileStudio && isEditMode && /* @__PURE__ */ jsx(RightSidebar, {
+			pageId: pageData?.page.id,
+			derivedLayoutId
+		});
+		$[41] = derivedLayoutId;
+		$[42] = isEditMode;
+		$[43] = isMobileStudio;
+		$[44] = pageData?.page;
+		$[45] = t17;
+	} else t17 = $[45];
+	let t18;
+	if ($[46] !== t10 || $[47] !== t16 || $[48] !== t17) {
+		t18 = /* @__PURE__ */ jsxs("div", {
 			className: "flex h-full flex-row items-stretch",
 			children: [
-				t8,
-				t11,
-				t12
+				t10,
+				t16,
+				t17
 			]
 		});
-		$[40] = t11;
-		$[41] = t12;
-		$[42] = t8;
-		$[43] = t13;
-	} else t13 = $[43];
-	let t14;
-	if ($[44] !== isEditMode || $[45] !== isMobileStudio) {
-		t14 = (isMobileStudio || isEditMode) && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CreatePageModal, {}), /* @__PURE__ */ jsx(DraftSwitchDialog, {})] });
-		$[44] = isEditMode;
-		$[45] = isMobileStudio;
-		$[46] = t14;
-	} else t14 = $[46];
-	let t15;
-	if ($[47] !== t13 || $[48] !== t14 || $[49] !== t6 || $[50] !== t7) {
-		t15 = /* @__PURE__ */ jsxs("div", {
-			className: t6,
+		$[46] = t10;
+		$[47] = t16;
+		$[48] = t17;
+		$[49] = t18;
+	} else t18 = $[49];
+	let t19;
+	if ($[50] !== isEditMode || $[51] !== isMobileStudio) {
+		t19 = (isMobileStudio || isEditMode) && /* @__PURE__ */ jsx(CreatePageModal, {});
+		$[50] = isEditMode;
+		$[51] = isMobileStudio;
+		$[52] = t19;
+	} else t19 = $[52];
+	let t20;
+	if ($[53] !== t18 || $[54] !== t19 || $[55] !== t8 || $[56] !== t9) {
+		t20 = /* @__PURE__ */ jsxs("div", {
+			className: t8,
 			children: [
-				t7,
-				t13,
-				t14
+				t9,
+				t18,
+				t19
 			]
 		});
-		$[47] = t13;
-		$[48] = t14;
-		$[49] = t6;
-		$[50] = t7;
-		$[51] = t15;
-	} else t15 = $[51];
-	return t15;
+		$[53] = t18;
+		$[54] = t19;
+		$[55] = t8;
+		$[56] = t9;
+		$[57] = t20;
+	} else t20 = $[57];
+	return t20;
 };
 function usePreviewPagesActions() {
 	const $ = c(13);
-	if ($[0] !== "29f1dc43006b541048efc4a08454742012d6157baa9fc62d4636c9c9d20b2ab3") {
+	if ($[0] !== "11649479464867dae9140a3e12df376e886901a1c7db652f3f404c61e069d60d") {
 		for (let $i = 0; $i < 13; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "29f1dc43006b541048efc4a08454742012d6157baa9fc62d4636c9c9d20b2ab3";
+		$[0] = "11649479464867dae9140a3e12df376e886901a1c7db652f3f404c61e069d60d";
 	}
 	const navigate = useNavigate();
 	const { pathname } = useLocation();
@@ -678,8 +649,8 @@ function usePreviewPagesActions() {
 					label: "Create page",
 					aliases: ["New page", "Add page"],
 					groupLabel: "Preview",
-					checkIfAvailable: _temp16,
-					execute: _temp17
+					checkIfAvailable: _temp11,
+					execute: _temp12
 				},
 				{
 					id: "edit-current-page",
@@ -710,14 +681,14 @@ function usePreviewPagesActions() {
 					groupLabel: "Preview",
 					checkIfAvailable: () => !!pages,
 					hasChildren: true,
-					execute: _temp18
+					execute: _temp13
 				},
 				...pages ? pages.map((page) => ({
 					id: `go-to-page-${page.id}`,
 					parentActionId: "go-to-page",
 					label: `Go to "${page.nickname}"`,
 					groupLabel: "Preview",
-					checkIfAvailable: _temp19,
+					checkIfAvailable: _temp14,
 					execute: () => navigate({ to: page.fullPath })
 				})) : []
 			];
@@ -728,7 +699,7 @@ function usePreviewPagesActions() {
 			return () => {
 				actionsStore.send({
 					type: "unregisterManyActions",
-					ids: actions.map(_temp20)
+					ids: actions.map(_temp15)
 				});
 			};
 		};
@@ -748,64 +719,49 @@ function usePreviewPagesActions() {
 	}
 	React.useEffect(t4, t5);
 }
-function _temp20(a) {
+function _temp15(a) {
 	return a.id;
 }
-function _temp19() {
+function _temp14() {
 	return true;
 }
-function _temp18() {}
-function _temp17() {
+function _temp13() {}
+function _temp12() {
 	return previewStore.send({ type: "openCreatePageModal" });
 }
-function _temp16() {
+function _temp11() {
 	return true;
 }
-function _temp4(state) {
-	return state.context.previewSource;
-}
-function _temp6(state) {
-	return state.context.isEditMode;
-}
-function _temp7(state_0) {
-	return state_0.context.isToolbarHidden;
+function _temp3(state) {
+	return state.context.isToolbarHidden;
 }
-function _temp8(state_1) {
-	return state_1.context.isAddBlockSidebarOpen;
+function _temp4(state_0) {
+	return state_0.context.isAddBlockSidebarOpen;
 }
-function _temp9(state_2) {
-	return state_2.context.previewSource;
-}
-function _temp0() {
+function _temp5() {
 	return previewStore.send({ type: "exitEditMode" });
 }
-function _temp1() {
+function _temp6() {
 	return previewStore.send({ type: "enterEditMode" });
 }
-function _temp10() {
-	return previewStore.send({
-		type: "setPreviewSource",
-		source: "live"
-	});
+function _temp7() {
+	return previewStore.send({ type: "viewLivePage" });
 }
-function _temp11() {
-	return previewStore.send({
-		type: "setPreviewSource",
-		source: "draft"
-	});
+function _temp8() {
+	return previewStore.send({ type: "viewDraftPage" });
 }
-function _temp12() {
+function _temp9() {
 	return true;
 }
-function _temp13() {
+function _temp0() {
 	previewStore.send({ type: "clearSelection" });
 }
-function _temp14(a) {
+function _temp1(a) {
 	return a.id;
 }
-function _temp15() {
+function _temp10() {
 	return previewStore.send({ type: "closeAddBlockSidebar" });
 }
 
 //#endregion
-export { CamoxPreview, PageContent, usePreviewPagesActions, usePreviewedPage };
+export { CamoxPreview, PageContent, PreviewShell, usePreviewPagesActions, usePreviewedPage };