camox 0.32.0 → 0.33.1

package/dist/features/preview/CamoxPreview.js

@@ -1,42 +1,27 @@
-import { trackClientEvent } from "../../lib/telemetry-client.js";
-import { previewStore } from "./previewStore.js";
 import { actionsStore } from "../provider/actionsStore.js";
 import { useIsAuthenticated, useProjectSlug } from "../../lib/auth.js";
 import { getApiClient } from "../../lib/api-client.js";
-import { blockQueries, pageMutations, pageQueries, projectQueries } from "../../lib/queries.js";
+import { blockQueries, pageQueries, projectQueries } from "../../lib/queries.js";
 import { cn } from "../../lib/utils.js";
+import { previewStore } from "./previewStore.js";
 import { NormalizedDataProvider, seedBlockCaches, usePageBlocks } from "../../lib/normalized-data.js";
 import { BlockErrorBoundary } from "./components/BlockErrorBoundary.js";
-import { AgentChatSheet } from "../agent-chat/components/AgentChatSheet.js";
 import { useCamoxApp } from "../provider/components/CamoxAppContext.js";
 import { Navbar } from "../studio/components/Navbar.js";
-import { AddBlockSheet } from "./components/AddBlockSheet.js";
 import { CreatePageModal } from "./components/CreatePageModal.js";
 import { DraftSwitchDialog } from "./components/DraftSwitchDialog.js";
-import { PageContentSheet } from "./components/PageContentSheet.js";
-import { PageMetadataModal } from "./components/PageMetadataModal.js";
-import { PagePicker } from "./components/PagePicker.js";
-import { PageTree } from "./components/PageTree.js";
+import { pageFullQueryFn } from "./previewQueryFns.js";
+import { LeftSidebar } from "./components/LeftSidebar.js";
 import { PeekedBlock } from "./components/PeekedBlock.js";
-import { PreviewFrame, PreviewPanel } from "./components/PreviewPanel.js";
-import { PublishDialog } from "./components/PublishDialog.js";
+import { PreviewPanel } from "./components/PreviewPanel.js";
+import { RightSidebar } from "./components/RightSidebar.js";
 import { c } from "react/compiler-runtime";
-import { Label } from "@camox/ui/label";
-import { toast } from "@camox/ui/toaster";
-import { keepPreviousData, useMutation, useQuery, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
+import { keepPreviousData, useQuery, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
 import { useLocation, useNavigate } from "@tanstack/react-router";
 import { useSelector } from "@xstate/store-react";
 import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { queryKeys } from "@camox/api-contract/query-keys";
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
-import { Button } from "@camox/ui/button";
-import { ButtonGroup } from "@camox/ui/button-group";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@camox/ui/dropdown-menu";
-import { PanelContent, PanelHeader } from "@camox/ui/panel";
-import { Switch } from "@camox/ui/switch";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@camox/ui/tooltip";
-import { Info, MoreHorizontal } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/features/preview/CamoxPreview.tsx
 /**
@@ -64,31 +49,11 @@ function pageStructureQueryFn(path, projectSlug, source) {
 		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, source) {
-	return async () => {
-		const data = await getApiClient().pages.getByPath({
-			path,
-			projectSlug,
-			source
-		});
-		seedBlockCaches(queryClient, data, source);
-		return {
-			page: data.page,
-			layout: data.layout,
-			projectName: data.projectName,
-			project: data.project
-		};
-	};
-}
 function usePreviewedPage() {
 	const $ = c(26);
-	if ($[0] !== "1f8b3d930e363e9f026de778e54437825e294d4a0094b6a999e795efbcd37f98") {
+	if ($[0] !== "368878cc357f559a41241bfa8387ebbcf6457dabf75b71445e9ead672ed8deb3") {
 		for (let $i = 0; $i < 26; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "1f8b3d930e363e9f026de778e54437825e294d4a0094b6a999e795efbcd37f98";
+		$[0] = "368878cc357f559a41241bfa8387ebbcf6457dabf75b71445e9ead672ed8deb3";
 	}
 	const { pathname } = useLocation();
 	const queryClient = useQueryClient();
@@ -185,9 +150,9 @@ function _temp(state) {
 }
 const BlockRenderer = (t0) => {
 	const $ = c(23);
-	if ($[0] !== "1f8b3d930e363e9f026de778e54437825e294d4a0094b6a999e795efbcd37f98") {
+	if ($[0] !== "368878cc357f559a41241bfa8387ebbcf6457dabf75b71445e9ead672ed8deb3") {
 		for (let $i = 0; $i < 23; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "1f8b3d930e363e9f026de778e54437825e294d4a0094b6a999e795efbcd37f98";
+		$[0] = "368878cc357f559a41241bfa8387ebbcf6457dabf75b71445e9ead672ed8deb3";
 	}
 	const { blockId, mode, showAddBlockTop, showAddBlockBottom } = t0;
 	const previewSource = useSelector(previewStore, _temp3);
@@ -328,504 +293,11 @@ const PageContent = () => {
 		children: pageBlocksContent
 	});
 };
-const SidebarPublishRow = (t0) => {
-	const $ = c(102);
-	if ($[0] !== "1f8b3d930e363e9f026de778e54437825e294d4a0094b6a999e795efbcd37f98") {
-		for (let $i = 0; $i < 102; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "1f8b3d930e363e9f026de778e54437825e294d4a0094b6a999e795efbcd37f98";
-	}
-	const { page } = t0;
-	const previewSource = useSelector(previewStore, _temp4);
-	const queryClient = useQueryClient();
-	const projectSlug = useProjectSlug();
-	const { pathname } = useLocation();
-	const [isPublishDialogOpen, setIsPublishDialogOpen] = React.useState(false);
-	const [isUnpublishDialogOpen, setIsUnpublishDialogOpen] = React.useState(false);
-	const [isDiscardDialogOpen, setIsDiscardDialogOpen] = React.useState(false);
-	let t1;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = pageMutations.unpublish();
-		$[1] = t1;
-	} else t1 = $[1];
-	const unpublishPage = useMutation(t1);
-	let t2;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = pageMutations.discardChanges();
-		$[2] = t2;
-	} else t2 = $[2];
-	const discardChanges = useMutation(t2);
-	const hasLiveCheckpoint = page.livePublishedCheckpointId != null;
-	const isHomePage = page.fullPath === "/";
-	const otherSource = previewSource === "draft" ? "live" : "draft";
-	const canPrefetchOther = otherSource === "draft" || hasLiveCheckpoint;
-	let t3;
-	if ($[3] !== canPrefetchOther || $[4] !== otherSource || $[5] !== pathname || $[6] !== projectSlug || $[7] !== queryClient) {
-		t3 = () => {
-			if (!canPrefetchOther) return;
-			queryClient.prefetchQuery({
-				queryKey: queryKeys.pages.getByPath(pathname, otherSource),
-				queryFn: pageFullQueryFn(queryClient, pathname, projectSlug, otherSource),
-				staleTime: Infinity
-			});
-		};
-		$[3] = canPrefetchOther;
-		$[4] = otherSource;
-		$[5] = pathname;
-		$[6] = projectSlug;
-		$[7] = queryClient;
-		$[8] = t3;
-	} else t3 = $[8];
-	const prefetchOtherSource = t3;
-	const canPublish = (page.status === "draft" || page.status === "modified") && previewSource === "draft";
-	const canDiscardChanges = page.status === "modified";
-	let t4;
-	if ($[9] !== page.modifiedReason) {
-		t4 = page.modifiedReason && (page.modifiedReason.reason === "layout" || page.modifiedReason.reason === "both") ? {
-			layoutHandle: page.modifiedReason.layoutHandle,
-			affectedPagesCount: page.modifiedReason.affectedPagesCount
-		} : null;
-		$[9] = page.modifiedReason;
-		$[10] = t4;
-	} else t4 = $[10];
-	const layoutCascade = t4;
-	const publishLabel = page.status === "modified" ? "Publish changes" : "Publish page";
-	let t5;
-	let t6;
-	if ($[11] !== canDiscardChanges || $[12] !== canPublish || $[13] !== discardChanges.isPending || $[14] !== hasLiveCheckpoint || $[15] !== isHomePage || $[16] !== publishLabel || $[17] !== unpublishPage.isPending) {
-		t5 = () => {
-			const actions = [
-				{
-					id: "publish-current-page",
-					label: publishLabel,
-					aliases: [
-						"Publish",
-						"Publish page",
-						"Make live"
-					],
-					groupLabel: "Preview",
-					checkIfAvailable: () => canPublish,
-					execute: () => setIsPublishDialogOpen(true)
-				},
-				{
-					id: "unpublish-current-page",
-					label: "Unpublish page",
-					aliases: [
-						"Take offline",
-						"Remove from live",
-						"Hide page"
-					],
-					groupLabel: "Preview",
-					checkIfAvailable: () => hasLiveCheckpoint && !isHomePage && !unpublishPage.isPending,
-					execute: () => setIsUnpublishDialogOpen(true)
-				},
-				{
-					id: "discard-current-page-changes",
-					label: "Discard page changes",
-					aliases: [
-						"Revert page",
-						"Reset page",
-						"Discard draft"
-					],
-					groupLabel: "Preview",
-					checkIfAvailable: () => canDiscardChanges && !discardChanges.isPending,
-					execute: () => setIsDiscardDialogOpen(true)
-				}
-			];
-			actionsStore.send({
-				type: "registerManyActions",
-				actions
-			});
-			return () => {
-				actionsStore.send({
-					type: "unregisterManyActions",
-					ids: actions.map(_temp5)
-				});
-			};
-		};
-		t6 = [
-			canDiscardChanges,
-			canPublish,
-			discardChanges.isPending,
-			hasLiveCheckpoint,
-			isHomePage,
-			publishLabel,
-			unpublishPage.isPending
-		];
-		$[11] = canDiscardChanges;
-		$[12] = canPublish;
-		$[13] = discardChanges.isPending;
-		$[14] = hasLiveCheckpoint;
-		$[15] = isHomePage;
-		$[16] = publishLabel;
-		$[17] = unpublishPage.isPending;
-		$[18] = t5;
-		$[19] = t6;
-	} else {
-		t5 = $[18];
-		t6 = $[19];
-	}
-	React.useEffect(t5, t6);
-	let t7;
-	if ($[20] !== isHomePage || $[21] !== page.id || $[22] !== pathname || $[23] !== queryClient || $[24] !== unpublishPage) {
-		t7 = async () => {
-			if (isHomePage) return;
-			try {
-				await unpublishPage.mutateAsync({ id: page.id });
-				queryClient.setQueryData(queryKeys.pages.getByPath(pathname, "draft"), _temp6);
-				queryClient.setQueryData(queryKeys.pages.list, (current_0) => current_0?.map((item) => item.id === page.id ? {
-					...item,
-					livePublishedCheckpointId: null,
-					status: "draft",
-					modifiedReason: null
-				} : item));
-				previewStore.send({
-					type: "setPreviewSource",
-					source: "draft"
-				});
-				trackClientEvent("page_unpublished", { pageId: page.id });
-				toast.success("Unpublished this page");
-				setIsUnpublishDialogOpen(false);
-			} catch (t8) {
-				console.error("Failed to unpublish page:", t8);
-				toast.error("Could not unpublish this page");
-			}
-		};
-		$[20] = isHomePage;
-		$[21] = page.id;
-		$[22] = pathname;
-		$[23] = queryClient;
-		$[24] = unpublishPage;
-		$[25] = t7;
-	} else t7 = $[25];
-	const handleUnpublish = t7;
-	let t8;
-	if ($[26] !== discardChanges || $[27] !== page.id) {
-		t8 = async () => {
-			try {
-				await discardChanges.mutateAsync({ id: page.id });
-				previewStore.send({
-					type: "setPreviewSource",
-					source: "draft"
-				});
-				trackClientEvent("page_changes_discarded", { pageId: page.id });
-				toast.success("Discarded draft changes");
-				setIsDiscardDialogOpen(false);
-			} catch (t9) {
-				console.error("Failed to discard page changes:", t9);
-				toast.error("Could not discard draft changes");
-			}
-		};
-		$[26] = discardChanges;
-		$[27] = page.id;
-		$[28] = t8;
-	} else t8 = $[28];
-	const handleDiscardChanges = t8;
-	const t9 = !canPublish;
-	let t10;
-	if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
-		t10 = () => setIsPublishDialogOpen(true);
-		$[29] = t10;
-	} else t10 = $[29];
-	let t11;
-	if ($[30] !== publishLabel || $[31] !== t9) {
-		t11 = /* @__PURE__ */ jsx(Button, {
-			variant: "outline",
-			type: "button",
-			disabled: t9,
-			onClick: t10,
-			className: "flex-1",
-			children: publishLabel
-		});
-		$[30] = publishLabel;
-		$[31] = t9;
-		$[32] = t11;
-	} else t11 = $[32];
-	let t12;
-	if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
-		t12 = /* @__PURE__ */ jsx(DropdownMenuTrigger, {
-			render: /* @__PURE__ */ jsx(Button, {
-				type: "button",
-				variant: "outline",
-				size: "icon",
-				"aria-label": "More publish actions"
-			}),
-			children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "text-muted-foreground" })
-		});
-		$[33] = t12;
-	} else t12 = $[33];
-	const t13 = !hasLiveCheckpoint || isHomePage || unpublishPage.isPending;
-	let t14;
-	if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
-		t14 = () => setIsUnpublishDialogOpen(true);
-		$[34] = t14;
-	} else t14 = $[34];
-	let t15;
-	if ($[35] !== t13) {
-		t15 = /* @__PURE__ */ jsx(DropdownMenuItem, {
-			disabled: t13,
-			onClick: t14,
-			children: "Unpublish"
-		});
-		$[35] = t13;
-		$[36] = t15;
-	} else t15 = $[36];
-	const t16 = !canDiscardChanges || discardChanges.isPending;
-	let t17;
-	if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
-		t17 = () => setIsDiscardDialogOpen(true);
-		$[37] = t17;
-	} else t17 = $[37];
-	let t18;
-	if ($[38] !== t16) {
-		t18 = /* @__PURE__ */ jsx(DropdownMenuItem, {
-			disabled: t16,
-			onClick: t17,
-			children: "Discard changes"
-		});
-		$[38] = t16;
-		$[39] = t18;
-	} else t18 = $[39];
-	let t19;
-	if ($[40] !== t15 || $[41] !== t18) {
-		t19 = /* @__PURE__ */ jsxs(DropdownMenu, { children: [t12, /* @__PURE__ */ jsxs(DropdownMenuContent, {
-			align: "end",
-			className: "w-42",
-			children: [t15, t18]
-		})] });
-		$[40] = t15;
-		$[41] = t18;
-		$[42] = t19;
-	} else t19 = $[42];
-	let t20;
-	if ($[43] !== t11 || $[44] !== t19) {
-		t20 = /* @__PURE__ */ jsxs(ButtonGroup, {
-			className: "w-full",
-			children: [t11, t19]
-		});
-		$[43] = t11;
-		$[44] = t19;
-		$[45] = t20;
-	} else t20 = $[45];
-	const t21 = !hasLiveCheckpoint;
-	const t22 = previewSource === "draft";
-	let t23;
-	if ($[46] !== t21 || $[47] !== t22) {
-		t23 = /* @__PURE__ */ jsx(Switch, {
-			id: "draft-content",
-			disabled: t21,
-			checked: t22,
-			onCheckedChange: _temp7
-		});
-		$[46] = t21;
-		$[47] = t22;
-		$[48] = t23;
-	} else t23 = $[48];
-	let t24;
-	if ($[49] === Symbol.for("react.memo_cache_sentinel")) {
-		t24 = /* @__PURE__ */ jsx(Label, {
-			htmlFor: "draft-content",
-			children: "Draft content"
-		});
-		$[49] = t24;
-	} else t24 = $[49];
-	let t25;
-	if ($[50] !== prefetchOtherSource || $[51] !== t23) {
-		t25 = /* @__PURE__ */ jsxs("div", {
-			className: "mt-1 flex items-center gap-2",
-			onMouseEnter: prefetchOtherSource,
-			onFocus: prefetchOtherSource,
-			children: [t23, t24]
-		});
-		$[50] = prefetchOtherSource;
-		$[51] = t23;
-		$[52] = t25;
-	} else t25 = $[52];
-	let t26;
-	if ($[53] !== t20 || $[54] !== t25) {
-		t26 = /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-2",
-			children: [t20, t25]
-		});
-		$[53] = t20;
-		$[54] = t25;
-		$[55] = t26;
-	} else t26 = $[55];
-	const t27 = isPublishDialogOpen ? page : null;
-	let t28;
-	if ($[56] !== isPublishDialogOpen || $[57] !== layoutCascade || $[58] !== page.status || $[59] !== t27) {
-		t28 = /* @__PURE__ */ jsx(PublishDialog, {
-			page: t27,
-			pageStatus: page.status,
-			alsoPublishLayout: layoutCascade,
-			open: isPublishDialogOpen,
-			onOpenChange: setIsPublishDialogOpen
-		});
-		$[56] = isPublishDialogOpen;
-		$[57] = layoutCascade;
-		$[58] = page.status;
-		$[59] = t27;
-		$[60] = t28;
-	} else t28 = $[60];
-	let t29;
-	if ($[61] === Symbol.for("react.memo_cache_sentinel")) {
-		t29 = /* @__PURE__ */ jsx(AlertDialogTitle, { children: "Unpublish page" });
-		$[61] = t29;
-	} else t29 = $[61];
-	let t30;
-	if ($[62] !== page.fullPath) {
-		t30 = /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [t29, /* @__PURE__ */ jsxs(AlertDialogDescription, { children: [
-			"Visitors at",
-			" ",
-			/* @__PURE__ */ jsx("code", {
-				className: "bg-muted rounded px-1 py-0.5 font-mono text-xs",
-				children: page.fullPath
-			}),
-			" ",
-			"will get a 404. The draft stays available in Camox Studio."
-		] })] });
-		$[62] = page.fullPath;
-		$[63] = t30;
-	} else t30 = $[63];
-	let t31;
-	if ($[64] !== unpublishPage.isPending) {
-		t31 = /* @__PURE__ */ jsx(AlertDialogCancel, {
-			variant: "outline",
-			size: "default",
-			disabled: unpublishPage.isPending,
-			children: "Cancel"
-		});
-		$[64] = unpublishPage.isPending;
-		$[65] = t31;
-	} else t31 = $[65];
-	const t32 = isHomePage || unpublishPage.isPending;
-	const t33 = unpublishPage.isPending ? "Unpublishing…" : "Unpublish";
-	let t34;
-	if ($[66] !== handleUnpublish || $[67] !== t32 || $[68] !== t33) {
-		t34 = /* @__PURE__ */ jsx(AlertDialogAction, {
-			onClick: handleUnpublish,
-			disabled: t32,
-			children: t33
-		});
-		$[66] = handleUnpublish;
-		$[67] = t32;
-		$[68] = t33;
-		$[69] = t34;
-	} else t34 = $[69];
-	let t35;
-	if ($[70] !== t31 || $[71] !== t34) {
-		t35 = /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [t31, t34] });
-		$[70] = t31;
-		$[71] = t34;
-		$[72] = t35;
-	} else t35 = $[72];
-	let t36;
-	if ($[73] !== t30 || $[74] !== t35) {
-		t36 = /* @__PURE__ */ jsxs(AlertDialogContent, { children: [t30, t35] });
-		$[73] = t30;
-		$[74] = t35;
-		$[75] = t36;
-	} else t36 = $[75];
-	let t37;
-	if ($[76] !== isUnpublishDialogOpen || $[77] !== t36) {
-		t37 = /* @__PURE__ */ jsx(AlertDialog, {
-			open: isUnpublishDialogOpen,
-			onOpenChange: setIsUnpublishDialogOpen,
-			children: t36
-		});
-		$[76] = isUnpublishDialogOpen;
-		$[77] = t36;
-		$[78] = t37;
-	} else t37 = $[78];
-	let t38;
-	if ($[79] === Symbol.for("react.memo_cache_sentinel")) {
-		t38 = /* @__PURE__ */ jsx(AlertDialogTitle, { children: "Discard draft changes" });
-		$[79] = t38;
-	} else t38 = $[79];
-	let t39;
-	if ($[80] !== page.fullPath) {
-		t39 = /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [t38, /* @__PURE__ */ jsxs(AlertDialogDescription, { children: [
-			"The draft for",
-			" ",
-			/* @__PURE__ */ jsx("code", {
-				className: "bg-muted rounded px-1 py-0.5 font-mono text-xs",
-				children: page.fullPath
-			}),
-			" ",
-			"will be reset to match the currently published version. This does not change what visitors see."
-		] })] });
-		$[80] = page.fullPath;
-		$[81] = t39;
-	} else t39 = $[81];
-	let t40;
-	if ($[82] !== discardChanges.isPending) {
-		t40 = /* @__PURE__ */ jsx(AlertDialogCancel, {
-			variant: "outline",
-			size: "default",
-			disabled: discardChanges.isPending,
-			children: "Cancel"
-		});
-		$[82] = discardChanges.isPending;
-		$[83] = t40;
-	} else t40 = $[83];
-	const t41 = discardChanges.isPending ? "Discarding…" : "Discard changes";
-	let t42;
-	if ($[84] !== discardChanges.isPending || $[85] !== handleDiscardChanges || $[86] !== t41) {
-		t42 = /* @__PURE__ */ jsx(AlertDialogAction, {
-			onClick: handleDiscardChanges,
-			disabled: discardChanges.isPending,
-			children: t41
-		});
-		$[84] = discardChanges.isPending;
-		$[85] = handleDiscardChanges;
-		$[86] = t41;
-		$[87] = t42;
-	} else t42 = $[87];
-	let t43;
-	if ($[88] !== t40 || $[89] !== t42) {
-		t43 = /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [t40, t42] });
-		$[88] = t40;
-		$[89] = t42;
-		$[90] = t43;
-	} else t43 = $[90];
-	let t44;
-	if ($[91] !== t39 || $[92] !== t43) {
-		t44 = /* @__PURE__ */ jsxs(AlertDialogContent, { children: [t39, t43] });
-		$[91] = t39;
-		$[92] = t43;
-		$[93] = t44;
-	} else t44 = $[93];
-	let t45;
-	if ($[94] !== isDiscardDialogOpen || $[95] !== t44) {
-		t45 = /* @__PURE__ */ jsx(AlertDialog, {
-			open: isDiscardDialogOpen,
-			onOpenChange: setIsDiscardDialogOpen,
-			children: t44
-		});
-		$[94] = isDiscardDialogOpen;
-		$[95] = t44;
-		$[96] = t45;
-	} else t45 = $[96];
-	let t46;
-	if ($[97] !== t26 || $[98] !== t28 || $[99] !== t37 || $[100] !== t45) {
-		t46 = /* @__PURE__ */ jsxs(Fragment, { children: [
-			t26,
-			t28,
-			t37,
-			t45
-		] });
-		$[97] = t26;
-		$[98] = t28;
-		$[99] = t37;
-		$[100] = t45;
-		$[101] = t46;
-	} else t46 = $[101];
-	return t46;
-};
 function useHydrateDraftCache() {
 	const $ = c(7);
-	if ($[0] !== "1f8b3d930e363e9f026de778e54437825e294d4a0094b6a999e795efbcd37f98") {
+	if ($[0] !== "368878cc357f559a41241bfa8387ebbcf6457dabf75b71445e9ead672ed8deb3") {
 		for (let $i = 0; $i < 7; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "1f8b3d930e363e9f026de778e54437825e294d4a0094b6a999e795efbcd37f98";
+		$[0] = "368878cc357f559a41241bfa8387ebbcf6457dabf75b71445e9ead672ed8deb3";
 	}
 	const isAuthenticated = useIsAuthenticated();
 	const queryClient = useQueryClient();
@@ -850,7 +322,7 @@ function useHydrateDraftCache() {
 					projectName: data.projectName,
 					project: data.project
 				});
-			}).catch(_temp8);
+			}).catch(_temp4);
 			return () => {
 				cancelled = true;
 			};
@@ -873,53 +345,53 @@ function useHydrateDraftCache() {
 	}
 	React.useEffect(t0, t1);
 }
-function _temp8() {}
+function _temp4() {}
 const CamoxPreview = (t0) => {
-	const $ = c(32);
-	if ($[0] !== "1f8b3d930e363e9f026de778e54437825e294d4a0094b6a999e795efbcd37f98") {
-		for (let $i = 0; $i < 32; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "1f8b3d930e363e9f026de778e54437825e294d4a0094b6a999e795efbcd37f98";
+	const $ = c(35);
+	if ($[0] !== "368878cc357f559a41241bfa8387ebbcf6457dabf75b71445e9ead672ed8deb3") {
+		for (let $i = 0; $i < 35; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "368878cc357f559a41241bfa8387ebbcf6457dabf75b71445e9ead672ed8deb3";
 	}
 	const { children } = t0;
 	const isAuthenticated = useIsAuthenticated();
-	const isPresentationMode = useSelector(previewStore, _temp9);
-	const isSidebarOpen = useSelector(previewStore, _temp0);
-	const previewSource = useSelector(previewStore, _temp1);
+	const isEditMode = useSelector(previewStore, _temp5);
+	const previewSource = useSelector(previewStore, _temp6);
 	const pageData = usePreviewedPage();
 	useHydrateDraftCache();
 	const hasLiveCheckpoint = pageData.page.livePublishedCheckpointId != null;
 	let t1;
 	let t2;
-	if ($[1] !== hasLiveCheckpoint || $[2] !== isAuthenticated || $[3] !== isPresentationMode || $[4] !== previewSource) {
+	if ($[1] !== hasLiveCheckpoint || $[2] !== isAuthenticated || $[3] !== isEditMode || $[4] !== previewSource) {
 		t1 = () => {
 			const actions = [
 				{
-					id: "enter-presentation-mode",
-					label: "Hide Camox Studio",
+					id: "exit-edit-mode",
+					label: "Exit edit mode",
 					aliases: [
+						"Hide Camox Studio",
 						"Hide studio",
 						"Preview only",
-						"Presentation mode"
+						"View mode"
 					],
 					groupLabel: "Preview",
-					checkIfAvailable: () => isAuthenticated && !isPresentationMode,
-					execute: _temp10,
+					checkIfAvailable: () => isAuthenticated && isEditMode,
+					execute: _temp7,
 					shortcut: {
 						key: "Enter",
 						withMeta: true
 					}
 				},
 				{
-					id: "exit-presentation-mode",
-					label: "Show Camox Studio",
+					id: "enter-edit-mode",
+					label: "Enter edit mode",
 					aliases: [
+						"Show Camox Studio",
 						"Show studio",
-						"Exit presentation",
 						"Edit mode"
 					],
 					groupLabel: "Preview",
-					checkIfAvailable: () => isAuthenticated && isPresentationMode,
-					execute: _temp11,
+					checkIfAvailable: () => isAuthenticated && !isEditMode,
+					execute: _temp8,
 					shortcut: {
 						key: "Enter",
 						withMeta: true
@@ -935,7 +407,7 @@ const CamoxPreview = (t0) => {
 					],
 					groupLabel: "Preview",
 					checkIfAvailable: () => isAuthenticated && previewSource === "draft" && hasLiveCheckpoint,
-					execute: _temp12,
+					execute: _temp9,
 					shortcut: {
 						key: "d",
 						withAlt: true
@@ -951,7 +423,7 @@ const CamoxPreview = (t0) => {
 					],
 					groupLabel: "Preview",
 					checkIfAvailable: () => isAuthenticated && previewSource === "live",
-					execute: _temp13,
+					execute: _temp0,
 					shortcut: {
 						key: "d",
 						withAlt: true
@@ -962,8 +434,8 @@ const CamoxPreview = (t0) => {
 					label: "Clear selection",
 					aliases: ["Deselect", "Unselect"],
 					groupLabel: "Preview",
-					checkIfAvailable: _temp14,
-					execute: _temp15,
+					checkIfAvailable: _temp1,
+					execute: _temp10,
 					shortcut: { key: "Escape" }
 				}
 			];
@@ -974,19 +446,19 @@ const CamoxPreview = (t0) => {
 			return () => {
 				actionsStore.send({
 					type: "unregisterManyActions",
-					ids: actions.map(_temp16)
+					ids: actions.map(_temp11)
 				});
 			};
 		};
 		t2 = [
-			isPresentationMode,
+			isEditMode,
 			isAuthenticated,
 			previewSource,
 			hasLiveCheckpoint
 		];
 		$[1] = hasLiveCheckpoint;
 		$[2] = isAuthenticated;
-		$[3] = isPresentationMode;
+		$[3] = isEditMode;
 		$[4] = previewSource;
 		$[5] = t1;
 		$[6] = t2;
@@ -995,141 +467,103 @@ const CamoxPreview = (t0) => {
 		t2 = $[6];
 	}
 	React.useEffect(t1, t2);
-	if (isPresentationMode) {
+	if (!isAuthenticated) {
 		let t3;
 		if ($[7] !== children) {
-			t3 = /* @__PURE__ */ jsx(PreviewFrame, {
-				className: "h-screen w-full",
-				children
-			});
+			t3 = /* @__PURE__ */ jsx(Fragment, { children });
 			$[7] = children;
 			$[8] = t3;
 		} else t3 = $[8];
 		return t3;
 	}
-	if (!isAuthenticated) {
-		let t3;
-		if ($[9] !== children) {
-			t3 = /* @__PURE__ */ jsx(Fragment, { children });
-			$[9] = children;
-			$[10] = t3;
-		} else t3 = $[10];
-		return t3;
-	}
-	let t3;
-	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = /* @__PURE__ */ jsx(Navbar, {});
-		$[11] = t3;
-	} else t3 = $[11];
+	const shouldShowStudioChrome = isEditMode;
+	const t3 = !isEditMode && "bg-black";
 	let t4;
-	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: cn("flex flex-col gap-2 px-2 pt-2 pb-3"),
-				children: [/* @__PURE__ */ jsxs(ButtonGroup, {
-					className: "w-full",
-					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" })] })]
-				}), /* @__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, {})
-			})]
-		});
-		$[12] = isSidebarOpen;
-		$[13] = pageData.page;
-		$[14] = t4;
-	} else t4 = $[14];
+	if ($[9] !== t3) {
+		t4 = cn("bg-background flex h-screen flex-col overflow-hidden", t3);
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
 	let t5;
-	if ($[15] !== isAuthenticated || $[16] !== isPresentationMode) {
-		t5 = !isPresentationMode && isAuthenticated && /* @__PURE__ */ jsx("div", { style: {
+	if ($[11] !== shouldShowStudioChrome) {
+		t5 = shouldShowStudioChrome && /* @__PURE__ */ jsx(Navbar, {});
+		$[11] = shouldShowStudioChrome;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== pageData.page || $[14] !== shouldShowStudioChrome) {
+		t6 = shouldShowStudioChrome && /* @__PURE__ */ jsx(LeftSidebar, { page: pageData.page });
+		$[13] = pageData.page;
+		$[14] = shouldShowStudioChrome;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] !== shouldShowStudioChrome) {
+		t7 = shouldShowStudioChrome && /* @__PURE__ */ jsx("div", { style: {
 			height: "80px",
 			background: "transparent"
 		} });
-		$[15] = isAuthenticated;
-		$[16] = isPresentationMode;
-		$[17] = t5;
-	} else t5 = $[17];
-	let t6;
-	if ($[18] !== children || $[19] !== t5) {
-		t6 = /* @__PURE__ */ jsxs(PreviewPanel, { children: [children, t5] });
+		$[16] = shouldShowStudioChrome;
+		$[17] = t7;
+	} else t7 = $[17];
+	let t8;
+	if ($[18] !== children || $[19] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(PreviewPanel, { children: [children, t7] });
 		$[18] = children;
-		$[19] = t5;
-		$[20] = t6;
-	} else t6 = $[20];
-	let t7;
-	if ($[21] !== t4 || $[22] !== t6) {
-		t7 = /* @__PURE__ */ jsxs("div", {
+		$[19] = t7;
+		$[20] = t8;
+	} else t8 = $[20];
+	let t9;
+	if ($[21] !== pageData.page.id || $[22] !== shouldShowStudioChrome) {
+		t9 = shouldShowStudioChrome && /* @__PURE__ */ jsx(RightSidebar, { pageId: pageData.page.id });
+		$[21] = pageData.page.id;
+		$[22] = shouldShowStudioChrome;
+		$[23] = t9;
+	} else t9 = $[23];
+	let t10;
+	if ($[24] !== t6 || $[25] !== t8 || $[26] !== t9) {
+		t10 = /* @__PURE__ */ jsxs("div", {
 			className: "flex h-full flex-row items-stretch",
-			children: [t4, t6]
+			children: [
+				t6,
+				t8,
+				t9
+			]
 		});
-		$[21] = t4;
-		$[22] = t6;
-		$[23] = t7;
-	} else t7 = $[23];
-	let t10;
+		$[24] = t6;
+		$[25] = t8;
+		$[26] = t9;
+		$[27] = t10;
+	} else t10 = $[27];
 	let t11;
+	if ($[28] !== shouldShowStudioChrome) {
+		t11 = shouldShowStudioChrome && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CreatePageModal, {}), /* @__PURE__ */ jsx(DraftSwitchDialog, {})] });
+		$[28] = shouldShowStudioChrome;
+		$[29] = t11;
+	} else t11 = $[29];
 	let t12;
-	let t13;
-	let t8;
-	let t9;
-	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(PageMetadataModal, {});
-		t13 = /* @__PURE__ */ jsx(DraftSwitchDialog, {});
-		$[24] = t10;
-		$[25] = t11;
-		$[26] = t12;
-		$[27] = t13;
-		$[28] = t8;
-		$[29] = t9;
-	} else {
-		t10 = $[24];
-		t11 = $[25];
-		t12 = $[26];
-		t13 = $[27];
-		t8 = $[28];
-		t9 = $[29];
-	}
-	let t14;
-	if ($[30] !== t7) {
-		t14 = /* @__PURE__ */ jsxs("div", {
-			className: "bg-background flex h-screen flex-col overflow-hidden",
+	if ($[30] !== t10 || $[31] !== t11 || $[32] !== t4 || $[33] !== t5) {
+		t12 = /* @__PURE__ */ jsxs("div", {
+			className: t4,
 			children: [
-				t3,
-				t7,
-				t8,
-				t9,
+				t5,
 				t10,
-				t11,
-				t12,
-				t13
+				t11
 			]
 		});
-		$[30] = t7;
-		$[31] = t14;
-	} else t14 = $[31];
-	return t14;
+		$[30] = t10;
+		$[31] = t11;
+		$[32] = t4;
+		$[33] = t5;
+		$[34] = t12;
+	} else t12 = $[34];
+	return t12;
 };
 function usePreviewPagesActions() {
 	const $ = c(13);
-	if ($[0] !== "1f8b3d930e363e9f026de778e54437825e294d4a0094b6a999e795efbcd37f98") {
+	if ($[0] !== "368878cc357f559a41241bfa8387ebbcf6457dabf75b71445e9ead672ed8deb3") {
 		for (let $i = 0; $i < 13; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "1f8b3d930e363e9f026de778e54437825e294d4a0094b6a999e795efbcd37f98";
+		$[0] = "368878cc357f559a41241bfa8387ebbcf6457dabf75b71445e9ead672ed8deb3";
 	}
 	const navigate = useNavigate();
 	const { pathname } = useLocation();
@@ -1170,8 +604,8 @@ function usePreviewPagesActions() {
 					label: "Create page",
 					aliases: ["New page", "Add page"],
 					groupLabel: "Preview",
-					checkIfAvailable: _temp17,
-					execute: _temp18
+					checkIfAvailable: _temp12,
+					execute: _temp13
 				},
 				{
 					id: "edit-current-page",
@@ -1202,14 +636,14 @@ function usePreviewPagesActions() {
 					groupLabel: "Preview",
 					checkIfAvailable: () => !!pages,
 					hasChildren: true,
-					execute: _temp19
+					execute: _temp14
 				},
 				...pages ? pages.map((page) => ({
 					id: `go-to-page-${page.id}`,
 					parentActionId: "go-to-page",
 					label: `Go to "${page.nickname}"`,
 					groupLabel: "Preview",
-					checkIfAvailable: _temp20,
+					checkIfAvailable: _temp15,
 					execute: () => navigate({ to: page.fullPath })
 				})) : []
 			];
@@ -1220,7 +654,7 @@ function usePreviewPagesActions() {
 			return () => {
 				actionsStore.send({
 					type: "unregisterManyActions",
-					ids: actions.map(_temp21)
+					ids: actions.map(_temp16)
 				});
 			};
 		};
@@ -1240,79 +674,53 @@ function usePreviewPagesActions() {
 	}
 	React.useEffect(t4, t5);
 }
-function _temp21(a) {
+function _temp16(a) {
 	return a.id;
 }
-function _temp20() {
+function _temp15() {
 	return true;
 }
-function _temp19() {}
-function _temp18() {
+function _temp14() {}
+function _temp13() {
 	return previewStore.send({ type: "openCreatePageModal" });
 }
-function _temp17() {
+function _temp12() {
 	return true;
 }
 function _temp3(state) {
 	return state.context.previewSource;
 }
-function _temp4(state) {
-	return state.context.previewSource;
-}
-function _temp5(action) {
-	return action.id;
-}
-function _temp6(current) {
-	return current ? {
-		...current,
-		page: {
-			...current.page,
-			livePublishedCheckpointId: null,
-			status: "draft",
-			modifiedReason: null
-		}
-	} : current;
-}
-function _temp7(checked) {
-	previewStore.send({
-		type: "setPreviewSource",
-		source: checked ? "draft" : "live"
-	});
-}
-function _temp9(state) {
-	return state.context.isPresentationMode;
+function _temp5(state) {
+	return state.context.isEditMode;
 }
-function _temp0(state_0) {
-	return state_0.context.isSidebarOpen;
-}
-function _temp1(state_1) {
-	return state_1.context.previewSource;
+function _temp6(state_0) {
+	return state_0.context.previewSource;
 }
-function _temp10() {
-	return previewStore.send({ type: "enterPresentationMode" });
+function _temp7() {
+	return previewStore.send({ type: "exitEditMode" });
 }
-function _temp11() {
-	return previewStore.send({ type: "exitPresentationMode" });
+function _temp8() {
+	return previewStore.send({ type: "enterEditMode" });
 }
-function _temp12() {
+function _temp9() {
 	return previewStore.send({
 		type: "setPreviewSource",
 		source: "live"
 	});
 }
-function _temp13() {
+function _temp0() {
 	return previewStore.send({
 		type: "setPreviewSource",
 		source: "draft"
 	});
 }
-function _temp14() {
+function _temp1() {
 	return true;
 }
-function _temp15() {
-	console.log("clear selection");
+function _temp10() {
+	previewStore.send({ type: "clearSelection" });
 }
-function _temp16(a) {
+function _temp11(a) {
 	return a.id;
 }