camox 0.24.1 → 0.26.0

package/dist/features/preview/CamoxPreview.js

@@ -3,7 +3,7 @@ import { actionsStore } from "../provider/actionsStore.js";
 import { useIsAuthenticated, useProjectSlug } from "../../lib/auth.js";
 import { getApiClient } from "../../lib/api-client.js";
 import { blockQueries, pageQueries, projectQueries } from "../../lib/queries.js";
-import { formatPathSegment } from "../../lib/utils.js";
+import { cn, formatPathSegment } from "../../lib/utils.js";
 import { NormalizedDataProvider, seedBlockCaches, usePageBlocks } from "../../lib/normalized-data.js";
 import { BlockErrorBoundary } from "./components/BlockErrorBoundary.js";
 import { useCamoxApp } from "../provider/components/CamoxAppContext.js";
@@ -11,13 +11,16 @@ import { Navbar } from "../studio/components/Navbar.js";
 import { AddBlockSheet } from "./components/AddBlockSheet.js";
 import { AgentChatSheet } from "./components/AgentChatSheet.js";
 import { CreatePageModal } from "./components/CreatePageModal.js";
+import { DraftSwitchDialog } from "./components/DraftSwitchDialog.js";
 import { EditPageModal } from "./components/EditPageModal.js";
 import { PageContentSheet } from "./components/PageContentSheet.js";
 import { PagePicker } from "./components/PagePicker.js";
 import { PageTree } from "./components/PageTree.js";
 import { PeekedBlock } from "./components/PeekedBlock.js";
 import { PreviewFrame, PreviewPanel } from "./components/PreviewPanel.js";
+import { PublishDialog } from "./components/PublishDialog.js";
 import { c } from "react/compiler-runtime";
+import { Label } from "@camox/ui/label";
 import { keepPreviousData, useQuery, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
 import { useLocation, useNavigate } from "@tanstack/react-router";
 import { useSelector } from "@xstate/store-react";
@@ -26,6 +29,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { queryKeys } from "@camox/api-contract/query-keys";
 import { Button } from "@camox/ui/button";
 import { PanelContent, PanelHeader } from "@camox/ui/panel";
+import { Switch } from "@camox/ui/switch";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@camox/ui/tooltip";
 import { Info } from "lucide-react";
 
@@ -41,24 +45,32 @@ import { Info } from "lucide-react";
 /**
 * 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 pageStructureQueryFn(path, projectSlug) {
+function pageStructureQueryFn(path, projectSlug, source) {
 	return () => getApiClient().pages.getStructure({
 		path,
-		projectSlug
+		projectSlug,
+		source
 	});
 }
 /**
 * Full queryFn that fetches all page data and seeds block caches.
 * Used for peeked pages where block caches may not be populated yet.
 */
-function pageFullQueryFn(queryClient, path, projectSlug) {
+function pageFullQueryFn(queryClient, path, projectSlug, source) {
 	return async () => {
 		const data = await getApiClient().pages.getByPath({
 			path,
-			projectSlug
+			projectSlug,
+			source
 		});
-		seedBlockCaches(queryClient, data);
+		seedBlockCaches(queryClient, data, source);
 		return {
 			page: data.page,
 			layout: data.layout,
@@ -68,15 +80,16 @@ function pageFullQueryFn(queryClient, path, projectSlug) {
 	};
 }
 function usePreviewedPage() {
-	const $ = c(22);
-	if ($[0] !== "069eff6982da6e4159df17e8edcf4b3a08c7294570ccd8f684892ed8c223d55f") {
-		for (let $i = 0; $i < 22; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "069eff6982da6e4159df17e8edcf4b3a08c7294570ccd8f684892ed8c223d55f";
+	const $ = c(26);
+	if ($[0] !== "db8d810f3b089d82690f0e1b5661e44e1ec1bfed6c53c9605ab4126a4f1e25b8") {
+		for (let $i = 0; $i < 26; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "db8d810f3b089d82690f0e1b5661e44e1ec1bfed6c53c9605ab4126a4f1e25b8";
 	}
 	const { pathname } = useLocation();
 	const queryClient = useQueryClient();
 	const projectSlug = useProjectSlug();
 	const peekedPagePathname = useSelector(previewStore, _temp);
+	const previewSource = useSelector(previewStore, _temp2);
 	const prevPathnameRef = React.useRef(pathname);
 	let t0;
 	let t1;
@@ -97,49 +110,53 @@ function usePreviewedPage() {
 	}
 	React.useEffect(t0, t1);
 	let t2;
-	if ($[4] !== pathname) {
-		t2 = queryKeys.pages.getByPath(pathname);
+	if ($[4] !== pathname || $[5] !== previewSource) {
+		t2 = queryKeys.pages.getByPath(pathname, previewSource);
 		$[4] = pathname;
-		$[5] = t2;
-	} else t2 = $[5];
+		$[5] = previewSource;
+		$[6] = t2;
+	} else t2 = $[6];
 	let t3;
-	if ($[6] !== pathname || $[7] !== projectSlug) {
-		t3 = pageStructureQueryFn(pathname, projectSlug);
-		$[6] = pathname;
-		$[7] = projectSlug;
-		$[8] = t3;
-	} else t3 = $[8];
+	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 ($[9] !== t2 || $[10] !== t3) {
+	if ($[11] !== t2 || $[12] !== t3) {
 		t4 = {
 			queryKey: t2,
 			queryFn: t3,
 			staleTime: Infinity
 		};
-		$[9] = t2;
-		$[10] = t3;
-		$[11] = t4;
-	} else t4 = $[11];
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
 	const { data: currentPage } = useSuspenseQuery(t4);
 	const isAuthenticated = useIsAuthenticated();
 	let t5;
-	if ($[12] !== peekedPagePathname) {
-		t5 = queryKeys.pages.getByPath(peekedPagePathname ?? "");
-		$[12] = peekedPagePathname;
-		$[13] = t5;
-	} else t5 = $[13];
+	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 ($[14] !== projectSlug || $[15] !== queryClient || $[16] !== t6) {
-		t7 = pageFullQueryFn(queryClient, t6, projectSlug);
-		$[14] = projectSlug;
-		$[15] = queryClient;
-		$[16] = t6;
-		$[17] = t7;
-	} else t7 = $[17];
+	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 ($[18] !== t5 || $[19] !== t7 || $[20] !== t8) {
+	if ($[22] !== t5 || $[23] !== t7 || $[24] !== t8) {
 		t9 = {
 			queryKey: t5,
 			queryFn: t7,
@@ -147,39 +164,44 @@ function usePreviewedPage() {
 			placeholderData: keepPreviousData,
 			staleTime: Infinity
 		};
-		$[18] = t5;
-		$[19] = t7;
-		$[20] = t8;
-		$[21] = t9;
-	} else t9 = $[21];
+		$[22] = t5;
+		$[23] = t7;
+		$[24] = t8;
+		$[25] = t9;
+	} else t9 = $[25];
 	const { data: peekedPage } = useQuery(t9);
 	return peekedPagePathname ? peekedPage ?? currentPage : currentPage;
 }
+function _temp2(state_0) {
+	return state_0.context.previewSource;
+}
 function _temp(state) {
 	return state.context.peekedPagePathname;
 }
 const BlockRenderer = (t0) => {
-	const $ = c(22);
-	if ($[0] !== "069eff6982da6e4159df17e8edcf4b3a08c7294570ccd8f684892ed8c223d55f") {
-		for (let $i = 0; $i < 22; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "069eff6982da6e4159df17e8edcf4b3a08c7294570ccd8f684892ed8c223d55f";
+	const $ = c(23);
+	if ($[0] !== "db8d810f3b089d82690f0e1b5661e44e1ec1bfed6c53c9605ab4126a4f1e25b8") {
+		for (let $i = 0; $i < 23; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "db8d810f3b089d82690f0e1b5661e44e1ec1bfed6c53c9605ab4126a4f1e25b8";
 	}
 	const { blockId, mode, showAddBlockTop, showAddBlockBottom } = t0;
+	const previewSource = useSelector(previewStore, _temp3);
 	let t1;
-	if ($[1] !== blockId) {
-		t1 = blockQueries.get(blockId);
+	if ($[1] !== blockId || $[2] !== previewSource) {
+		t1 = blockQueries.get(blockId, previewSource);
 		$[1] = blockId;
-		$[2] = t1;
-	} else t1 = $[2];
+		$[2] = previewSource;
+		$[3] = t1;
+	} else t1 = $[3];
 	const { data } = useSuspenseQuery(t1);
 	const camoxApp = useCamoxApp();
 	let t2;
-	if ($[3] !== camoxApp || $[4] !== data.block.type) {
+	if ($[4] !== camoxApp || $[5] !== data.block.type) {
 		t2 = camoxApp.getBlockById(data.block.type);
-		$[3] = camoxApp;
-		$[4] = data.block.type;
-		$[5] = t2;
-	} else t2 = $[5];
+		$[4] = camoxApp;
+		$[5] = data.block.type;
+		$[6] = t2;
+	} else t2 = $[6];
 	const blockDef = t2;
 	if (!blockDef) return null;
 	const t3 = data.files;
@@ -191,7 +213,7 @@ const BlockRenderer = (t0) => {
 	const t8 = data.block.settings;
 	const t9 = String(data.block.position);
 	let t10;
-	if ($[6] !== data.block.id || $[7] !== data.block.type || $[8] !== t7 || $[9] !== t8 || $[10] !== t9) {
+	if ($[7] !== data.block.id || $[8] !== data.block.type || $[9] !== t7 || $[10] !== t8 || $[11] !== t9) {
 		t10 = {
 			_id: t5,
 			type: t6,
@@ -199,46 +221,46 @@ const BlockRenderer = (t0) => {
 			settings: t8,
 			position: t9
 		};
-		$[6] = data.block.id;
-		$[7] = data.block.type;
-		$[8] = t7;
-		$[9] = t8;
-		$[10] = t9;
-		$[11] = t10;
-	} else t10 = $[11];
+		$[7] = data.block.id;
+		$[8] = data.block.type;
+		$[9] = t7;
+		$[10] = t8;
+		$[11] = t9;
+		$[12] = t10;
+	} else t10 = $[12];
 	let t11;
-	if ($[12] !== blockDef._internal.Component || $[13] !== mode || $[14] !== showAddBlockBottom || $[15] !== showAddBlockTop || $[16] !== t10) {
+	if ($[13] !== blockDef._internal.Component || $[14] !== mode || $[15] !== showAddBlockBottom || $[16] !== showAddBlockTop || $[17] !== t10) {
 		t11 = /* @__PURE__ */ jsx(T0, {
 			blockData: t10,
 			mode,
 			showAddBlockTop,
 			showAddBlockBottom
 		});
-		$[12] = blockDef._internal.Component;
-		$[13] = mode;
-		$[14] = showAddBlockBottom;
-		$[15] = showAddBlockTop;
-		$[16] = t10;
-		$[17] = t11;
-	} else t11 = $[17];
+		$[13] = blockDef._internal.Component;
+		$[14] = mode;
+		$[15] = showAddBlockBottom;
+		$[16] = showAddBlockTop;
+		$[17] = t10;
+		$[18] = t11;
+	} else t11 = $[18];
 	let t12;
-	if ($[18] !== data.files || $[19] !== data.repeatableItems || $[20] !== t11) {
+	if ($[19] !== data.files || $[20] !== data.repeatableItems || $[21] !== t11) {
 		t12 = /* @__PURE__ */ jsx(NormalizedDataProvider, {
 			files: t3,
 			repeatableItems: t4,
 			children: t11
 		});
-		$[18] = data.files;
-		$[19] = data.repeatableItems;
-		$[20] = t11;
-		$[21] = t12;
-	} else t12 = $[21];
+		$[19] = data.files;
+		$[20] = data.repeatableItems;
+		$[21] = t11;
+		$[22] = t12;
+	} else t12 = $[22];
 	return t12;
 };
 const PageContent = () => {
 	const pageData = usePreviewedPage();
-	const { pageBlocks, beforeBlocks, afterBlocks, layoutFiles, layoutItems } = usePageBlocks(pageData);
-	const peekedBlockPosition = useSelector(previewStore, (state) => state.context.peekedBlockPosition);
+	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 displayedPositionRef = React.useRef(null);
 	if (peekedBlockPosition !== null) displayedPositionRef.current = peekedBlockPosition;
 	const effectivePosition = peekedBlockPosition ?? displayedPositionRef.current;
@@ -301,20 +323,207 @@ const PageContent = () => {
 		children: pageBlocksContent
 	});
 };
+const SidebarPublishRow = (t0) => {
+	const $ = c(30);
+	if ($[0] !== "db8d810f3b089d82690f0e1b5661e44e1ec1bfed6c53c9605ab4126a4f1e25b8") {
+		for (let $i = 0; $i < 30; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "db8d810f3b089d82690f0e1b5661e44e1ec1bfed6c53c9605ab4126a4f1e25b8";
+	}
+	const { page } = t0;
+	const previewSource = useSelector(previewStore, _temp4);
+	const queryClient = useQueryClient();
+	const projectSlug = useProjectSlug();
+	const { pathname } = useLocation();
+	const [isPublishDialogOpen, setIsPublishDialogOpen] = React.useState(false);
+	const hasLiveCheckpoint = page.livePublishedCheckpointId != null;
+	const otherSource = previewSource === "draft" ? "live" : "draft";
+	const canPrefetchOther = otherSource === "draft" || hasLiveCheckpoint;
+	let t1;
+	if ($[1] !== canPrefetchOther || $[2] !== otherSource || $[3] !== pathname || $[4] !== projectSlug || $[5] !== queryClient) {
+		t1 = () => {
+			if (!canPrefetchOther) return;
+			queryClient.prefetchQuery({
+				queryKey: queryKeys.pages.getByPath(pathname, otherSource),
+				queryFn: pageFullQueryFn(queryClient, pathname, projectSlug, otherSource),
+				staleTime: Infinity
+			});
+		};
+		$[1] = canPrefetchOther;
+		$[2] = otherSource;
+		$[3] = pathname;
+		$[4] = projectSlug;
+		$[5] = queryClient;
+		$[6] = t1;
+	} else t1 = $[6];
+	const prefetchOtherSource = t1;
+	const canPublish = (page.status === "draft" || page.status === "modified") && previewSource === "draft";
+	let t2;
+	if ($[7] !== page.modifiedReason) {
+		t2 = page.modifiedReason && (page.modifiedReason.reason === "layout" || page.modifiedReason.reason === "both") ? {
+			layoutHandle: page.modifiedReason.layoutHandle,
+			affectedPagesCount: page.modifiedReason.affectedPagesCount
+		} : null;
+		$[7] = page.modifiedReason;
+		$[8] = t2;
+	} else t2 = $[8];
+	const layoutCascade = t2;
+	const t3 = !hasLiveCheckpoint;
+	const t4 = previewSource === "draft";
+	let t5;
+	if ($[9] !== t3 || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Switch, {
+			id: "draft-content",
+			disabled: t3,
+			checked: t4,
+			onCheckedChange: _temp5
+		});
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(Label, {
+			htmlFor: "draft-content",
+			children: "Draft content"
+		});
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== prefetchOtherSource || $[14] !== t5) {
+		t7 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			onMouseEnter: prefetchOtherSource,
+			onFocus: prefetchOtherSource,
+			children: [t5, t6]
+		});
+		$[13] = prefetchOtherSource;
+		$[14] = t5;
+		$[15] = t7;
+	} else t7 = $[15];
+	const t8 = !canPublish;
+	let t9;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = () => setIsPublishDialogOpen(true);
+		$[16] = t9;
+	} else t9 = $[16];
+	let t10;
+	if ($[17] !== t8) {
+		t10 = /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			size: "sm",
+			disabled: t8,
+			onClick: t9,
+			children: "Publish"
+		});
+		$[17] = t8;
+		$[18] = t10;
+	} else t10 = $[18];
+	let t11;
+	if ($[19] !== t10 || $[20] !== t7) {
+		t11 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between gap-2",
+			children: [t7, t10]
+		});
+		$[19] = t10;
+		$[20] = t7;
+		$[21] = t11;
+	} else t11 = $[21];
+	const t12 = isPublishDialogOpen ? page : null;
+	let t13;
+	if ($[22] !== isPublishDialogOpen || $[23] !== layoutCascade || $[24] !== page.status || $[25] !== t12) {
+		t13 = /* @__PURE__ */ jsx(PublishDialog, {
+			page: t12,
+			pageStatus: page.status,
+			alsoPublishLayout: layoutCascade,
+			open: isPublishDialogOpen,
+			onOpenChange: setIsPublishDialogOpen
+		});
+		$[22] = isPublishDialogOpen;
+		$[23] = layoutCascade;
+		$[24] = page.status;
+		$[25] = t12;
+		$[26] = t13;
+	} else t13 = $[26];
+	let t14;
+	if ($[27] !== t11 || $[28] !== t13) {
+		t14 = /* @__PURE__ */ jsxs(Fragment, { children: [t11, t13] });
+		$[27] = t11;
+		$[28] = t13;
+		$[29] = t14;
+	} else t14 = $[29];
+	return t14;
+};
+function useHydrateDraftCache() {
+	const $ = c(7);
+	if ($[0] !== "db8d810f3b089d82690f0e1b5661e44e1ec1bfed6c53c9605ab4126a4f1e25b8") {
+		for (let $i = 0; $i < 7; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "db8d810f3b089d82690f0e1b5661e44e1ec1bfed6c53c9605ab4126a4f1e25b8";
+	}
+	const isAuthenticated = useIsAuthenticated();
+	const queryClient = useQueryClient();
+	const projectSlug = useProjectSlug();
+	const { pathname } = useLocation();
+	let t0;
+	let t1;
+	if ($[1] !== isAuthenticated || $[2] !== pathname || $[3] !== projectSlug || $[4] !== queryClient) {
+		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(_temp6);
+			return () => {
+				cancelled = true;
+			};
+		};
+		t1 = [
+			isAuthenticated,
+			pathname,
+			projectSlug,
+			queryClient
+		];
+		$[1] = isAuthenticated;
+		$[2] = pathname;
+		$[3] = projectSlug;
+		$[4] = queryClient;
+		$[5] = t0;
+		$[6] = t1;
+	} else {
+		t0 = $[5];
+		t1 = $[6];
+	}
+	React.useEffect(t0, t1);
+}
+function _temp6() {}
 const CamoxPreview = (t0) => {
-	const $ = c(29);
-	if ($[0] !== "069eff6982da6e4159df17e8edcf4b3a08c7294570ccd8f684892ed8c223d55f") {
-		for (let $i = 0; $i < 29; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "069eff6982da6e4159df17e8edcf4b3a08c7294570ccd8f684892ed8c223d55f";
+	const $ = c(32);
+	if ($[0] !== "db8d810f3b089d82690f0e1b5661e44e1ec1bfed6c53c9605ab4126a4f1e25b8") {
+		for (let $i = 0; $i < 32; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "db8d810f3b089d82690f0e1b5661e44e1ec1bfed6c53c9605ab4126a4f1e25b8";
 	}
 	const { children } = t0;
 	const isAuthenticated = useIsAuthenticated();
-	const isPresentationMode = useSelector(previewStore, _temp2);
-	const isSidebarOpen = useSelector(previewStore, _temp3);
+	const isPresentationMode = useSelector(previewStore, _temp7);
+	const isSidebarOpen = useSelector(previewStore, _temp8);
+	const previewSource = useSelector(previewStore, _temp9);
 	const pageData = usePreviewedPage();
+	useHydrateDraftCache();
+	const hasLiveCheckpoint = pageData.page.livePublishedCheckpointId != null;
 	let t1;
 	let t2;
-	if ($[1] !== isAuthenticated || $[2] !== isPresentationMode) {
+	if ($[1] !== hasLiveCheckpoint || $[2] !== isAuthenticated || $[3] !== isPresentationMode || $[4] !== previewSource) {
 		t1 = () => {
 			const actions = [
 				{
@@ -322,7 +531,7 @@ const CamoxPreview = (t0) => {
 					label: "Hide Camox Studio",
 					groupLabel: "Preview",
 					checkIfAvailable: () => isAuthenticated && !isPresentationMode,
-					execute: _temp4,
+					execute: _temp0,
 					shortcut: {
 						key: "Enter",
 						withMeta: true
@@ -333,18 +542,40 @@ const CamoxPreview = (t0) => {
 					label: "Show Camox Studio",
 					groupLabel: "Preview",
 					checkIfAvailable: () => isAuthenticated && isPresentationMode,
-					execute: _temp5,
+					execute: _temp1,
 					shortcut: {
 						key: "Enter",
 						withMeta: true
 					}
 				},
+				{
+					id: "preview-live-content",
+					label: "Preview live content",
+					groupLabel: "Preview",
+					checkIfAvailable: () => isAuthenticated && previewSource === "draft" && hasLiveCheckpoint,
+					execute: _temp10,
+					shortcut: {
+						key: "d",
+						withAlt: true
+					}
+				},
+				{
+					id: "preview-draft-content",
+					label: "Preview draft content",
+					groupLabel: "Preview",
+					checkIfAvailable: () => isAuthenticated && previewSource === "live",
+					execute: _temp11,
+					shortcut: {
+						key: "d",
+						withAlt: true
+					}
+				},
 				{
 					id: "clear-selection",
 					label: "Clear selection",
 					groupLabel: "Preview",
-					checkIfAvailable: _temp6,
-					execute: _temp7,
+					checkIfAvailable: _temp12,
+					execute: _temp13,
 					shortcut: { key: "Escape" }
 				}
 			];
@@ -355,126 +586,140 @@ const CamoxPreview = (t0) => {
 			return () => {
 				actionsStore.send({
 					type: "unregisterManyActions",
-					ids: actions.map(_temp8)
+					ids: actions.map(_temp14)
 				});
 			};
 		};
-		t2 = [isPresentationMode, isAuthenticated];
-		$[1] = isAuthenticated;
-		$[2] = isPresentationMode;
-		$[3] = t1;
-		$[4] = t2;
+		t2 = [
+			isPresentationMode,
+			isAuthenticated,
+			previewSource,
+			hasLiveCheckpoint
+		];
+		$[1] = hasLiveCheckpoint;
+		$[2] = isAuthenticated;
+		$[3] = isPresentationMode;
+		$[4] = previewSource;
+		$[5] = t1;
+		$[6] = t2;
 	} else {
-		t1 = $[3];
-		t2 = $[4];
+		t1 = $[5];
+		t2 = $[6];
 	}
 	React.useEffect(t1, t2);
 	if (isPresentationMode) {
 		let t3;
-		if ($[5] !== children) {
+		if ($[7] !== children) {
 			t3 = /* @__PURE__ */ jsx(PreviewFrame, {
 				className: "h-screen w-full",
 				children
 			});
-			$[5] = children;
-			$[6] = t3;
-		} else t3 = $[6];
+			$[7] = children;
+			$[8] = t3;
+		} else t3 = $[8];
 		return t3;
 	}
 	if (!isAuthenticated) {
 		let t3;
-		if ($[7] !== children) {
+		if ($[9] !== children) {
 			t3 = /* @__PURE__ */ jsx(Fragment, { children });
-			$[7] = children;
-			$[8] = t3;
-		} else t3 = $[8];
+			$[9] = children;
+			$[10] = t3;
+		} else t3 = $[10];
 		return t3;
 	}
 	let t3;
-	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
 		t3 = /* @__PURE__ */ jsx(Navbar, {});
-		$[9] = t3;
-	} else t3 = $[9];
+		$[11] = t3;
+	} else t3 = $[11];
 	let t4;
-	if ($[10] !== isSidebarOpen || $[11] !== pageData) {
+	if ($[12] !== isSidebarOpen || $[13] !== pageData.page) {
 		t4 = isSidebarOpen && /* @__PURE__ */ jsxs("div", {
 			className: "flex w-[300px] flex-col border-r-2",
 			children: [/* @__PURE__ */ jsxs(PanelHeader, {
-				className: "flew-row flex gap-2 px-2 py-2",
-				children: [/* @__PURE__ */ jsx(PagePicker, {}), /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-					render: /* @__PURE__ */ jsx(Button, {
-						type: "button",
-						variant: "outline",
-						size: "icon",
-						onClick: () => previewStore.send({
-							type: "openEditPageModal",
-							pageId: pageData.page.id
-						})
-					}),
-					children: /* @__PURE__ */ jsx(Info, { className: "text-muted-foreground size-4" })
-				}), /* @__PURE__ */ jsx(TooltipContent, { children: "Page metadata, SEO and markdown" })] })]
+				className: cn("flex flex-col gap-2 px-2 py-2"),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-row gap-2",
+					children: [/* @__PURE__ */ jsx(PagePicker, {}), /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+						render: /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "outline",
+							size: "icon",
+							onClick: () => previewStore.send({
+								type: "openEditPageModal",
+								pageId: pageData.page.id
+							})
+						}),
+						children: /* @__PURE__ */ jsx(Info, { className: "text-muted-foreground size-4" })
+					}), /* @__PURE__ */ jsx(TooltipContent, { children: "Page metadata, SEO and markdown" })] })]
+				}), /* @__PURE__ */ jsx(SidebarPublishRow, { page: pageData.page })]
 			}), /* @__PURE__ */ jsx(PanelContent, {
 				className: "flex grow basis-0 flex-col gap-2 overflow-auto p-2",
 				children: /* @__PURE__ */ jsx(PageTree, {})
 			})]
 		});
-		$[10] = isSidebarOpen;
-		$[11] = pageData;
-		$[12] = t4;
-	} else t4 = $[12];
+		$[12] = isSidebarOpen;
+		$[13] = pageData.page;
+		$[14] = t4;
+	} else t4 = $[14];
 	let t5;
-	if ($[13] !== isAuthenticated || $[14] !== isPresentationMode) {
+	if ($[15] !== isAuthenticated || $[16] !== isPresentationMode) {
 		t5 = !isPresentationMode && isAuthenticated && /* @__PURE__ */ jsx("div", { style: {
 			height: "80px",
 			background: "transparent"
 		} });
-		$[13] = isAuthenticated;
-		$[14] = isPresentationMode;
-		$[15] = t5;
-	} else t5 = $[15];
+		$[15] = isAuthenticated;
+		$[16] = isPresentationMode;
+		$[17] = t5;
+	} else t5 = $[17];
 	let t6;
-	if ($[16] !== children || $[17] !== t5) {
+	if ($[18] !== children || $[19] !== t5) {
 		t6 = /* @__PURE__ */ jsxs(PreviewPanel, { children: [children, t5] });
-		$[16] = children;
-		$[17] = t5;
-		$[18] = t6;
-	} else t6 = $[18];
+		$[18] = children;
+		$[19] = t5;
+		$[20] = t6;
+	} else t6 = $[20];
 	let t7;
-	if ($[19] !== t4 || $[20] !== t6) {
+	if ($[21] !== t4 || $[22] !== t6) {
 		t7 = /* @__PURE__ */ jsxs("div", {
 			className: "flex h-full flex-row items-stretch",
 			children: [t4, t6]
 		});
-		$[19] = t4;
-		$[20] = t6;
-		$[21] = t7;
-	} else t7 = $[21];
+		$[21] = t4;
+		$[22] = t6;
+		$[23] = t7;
+	} else t7 = $[23];
 	let t10;
 	let t11;
 	let t12;
+	let t13;
 	let t8;
 	let t9;
-	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
 		t8 = /* @__PURE__ */ jsx(PageContentSheet, {});
 		t9 = /* @__PURE__ */ jsx(AddBlockSheet, {});
 		t10 = /* @__PURE__ */ jsx(AgentChatSheet, {});
 		t11 = /* @__PURE__ */ jsx(CreatePageModal, {});
 		t12 = /* @__PURE__ */ jsx(EditPageModal, {});
-		$[22] = t10;
-		$[23] = t11;
-		$[24] = t12;
-		$[25] = t8;
-		$[26] = t9;
+		t13 = /* @__PURE__ */ jsx(DraftSwitchDialog, {});
+		$[24] = t10;
+		$[25] = t11;
+		$[26] = t12;
+		$[27] = t13;
+		$[28] = t8;
+		$[29] = t9;
 	} else {
-		t10 = $[22];
-		t11 = $[23];
-		t12 = $[24];
-		t8 = $[25];
-		t9 = $[26];
+		t10 = $[24];
+		t11 = $[25];
+		t12 = $[26];
+		t13 = $[27];
+		t8 = $[28];
+		t9 = $[29];
 	}
-	let t13;
-	if ($[27] !== t7) {
-		t13 = /* @__PURE__ */ jsxs("div", {
+	let t14;
+	if ($[30] !== t7) {
+		t14 = /* @__PURE__ */ jsxs("div", {
 			className: "bg-background flex h-screen flex-col overflow-hidden",
 			children: [
 				t3,
@@ -483,19 +728,20 @@ const CamoxPreview = (t0) => {
 				t9,
 				t10,
 				t11,
-				t12
+				t12,
+				t13
 			]
 		});
-		$[27] = t7;
-		$[28] = t13;
-	} else t13 = $[28];
-	return t13;
+		$[30] = t7;
+		$[31] = t14;
+	} else t14 = $[31];
+	return t14;
 };
 function usePreviewPagesActions() {
 	const $ = c(13);
-	if ($[0] !== "069eff6982da6e4159df17e8edcf4b3a08c7294570ccd8f684892ed8c223d55f") {
+	if ($[0] !== "db8d810f3b089d82690f0e1b5661e44e1ec1bfed6c53c9605ab4126a4f1e25b8") {
 		for (let $i = 0; $i < 13; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "069eff6982da6e4159df17e8edcf4b3a08c7294570ccd8f684892ed8c223d55f";
+		$[0] = "db8d810f3b089d82690f0e1b5661e44e1ec1bfed6c53c9605ab4126a4f1e25b8";
 	}
 	const navigate = useNavigate();
 	const { pathname } = useLocation();
@@ -535,8 +781,8 @@ function usePreviewPagesActions() {
 					id: "create-page",
 					label: "Create page",
 					groupLabel: "Preview",
-					checkIfAvailable: _temp9,
-					execute: _temp0
+					checkIfAvailable: _temp15,
+					execute: _temp16
 				},
 				{
 					id: "edit-current-page",
@@ -557,14 +803,14 @@ function usePreviewPagesActions() {
 					groupLabel: "Preview",
 					checkIfAvailable: () => !!pages,
 					hasChildren: true,
-					execute: _temp1
+					execute: _temp17
 				},
 				...pages ? pages.map((page) => ({
 					id: `go-to-page-${page.id}`,
 					parentActionId: "go-to-page",
 					label: `Go to "${page.metaTitle ?? formatPathSegment(page.pathSegment)}"`,
 					groupLabel: "Preview",
-					checkIfAvailable: _temp10,
+					checkIfAvailable: _temp18,
 					execute: () => navigate({ to: page.fullPath })
 				})) : []
 			];
@@ -575,7 +821,7 @@ function usePreviewPagesActions() {
 			return () => {
 				actionsStore.send({
 					type: "unregisterManyActions",
-					ids: actions.map(_temp11)
+					ids: actions.map(_temp19)
 				});
 			};
 		};
@@ -595,38 +841,65 @@ function usePreviewPagesActions() {
 	}
 	React.useEffect(t4, t5);
 }
-function _temp11(a) {
+function _temp19(a) {
 	return a.id;
 }
-function _temp10() {
+function _temp18() {
 	return true;
 }
-function _temp1() {}
-function _temp0() {
+function _temp17() {}
+function _temp16() {
 	return previewStore.send({ type: "openCreatePageModal" });
 }
-function _temp9() {
+function _temp15() {
 	return true;
 }
-function _temp2(state) {
+function _temp3(state) {
+	return state.context.previewSource;
+}
+function _temp4(state) {
+	return state.context.previewSource;
+}
+function _temp5(checked) {
+	previewStore.send({
+		type: "setPreviewSource",
+		source: checked ? "draft" : "live"
+	});
+}
+function _temp7(state) {
 	return state.context.isPresentationMode;
 }
-function _temp3(state_0) {
+function _temp8(state_0) {
 	return state_0.context.isSidebarOpen;
 }
-function _temp4() {
+function _temp9(state_1) {
+	return state_1.context.previewSource;
+}
+function _temp0() {
 	return previewStore.send({ type: "enterPresentationMode" });
 }
-function _temp5() {
+function _temp1() {
 	return previewStore.send({ type: "exitPresentationMode" });
 }
-function _temp6() {
+function _temp10() {
+	return previewStore.send({
+		type: "setPreviewSource",
+		source: "live"
+	});
+}
+function _temp11() {
+	return previewStore.send({
+		type: "setPreviewSource",
+		source: "draft"
+	});
+}
+function _temp12() {
 	return true;
 }
-function _temp7() {
+function _temp13() {
 	console.log("clear selection");
 }
-function _temp8(a) {
+function _temp14(a) {
 	return a.id;
 }