camox 0.25.0 → 0.27.0

package/dist/features/preview/CamoxPreview.js

@@ -1,9 +1,10 @@
+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, pageQueries, projectQueries } from "../../lib/queries.js";
-import { cn, formatPathSegment } from "../../lib/utils.js";
+import { blockQueries, pageMutations, pageQueries, projectQueries } from "../../lib/queries.js";
+import { cn } 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";
@@ -12,8 +13,8 @@ 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 { PageMetadataModal } from "./components/PageMetadataModal.js";
 import { PagePicker } from "./components/PagePicker.js";
 import { PageTree } from "./components/PageTree.js";
 import { PeekedBlock } from "./components/PeekedBlock.js";
@@ -21,17 +22,21 @@ 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 { toast } from "@camox/ui/toaster";
+import { keepPreviousData, useMutation, 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 } from "lucide-react";
+import { Info, MoreHorizontal } from "lucide-react";
 
 //#region src/features/preview/CamoxPreview.tsx
 /**
@@ -81,9 +86,9 @@ function pageFullQueryFn(queryClient, path, projectSlug, source) {
 }
 function usePreviewedPage() {
 	const $ = c(26);
-	if ($[0] !== "db8d810f3b089d82690f0e1b5661e44e1ec1bfed6c53c9605ab4126a4f1e25b8") {
+	if ($[0] !== "fe382a0b044a84ab3280ebb086ded75a3135ffd01e1c594e94a37233c1b7e49b") {
 		for (let $i = 0; $i < 26; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "db8d810f3b089d82690f0e1b5661e44e1ec1bfed6c53c9605ab4126a4f1e25b8";
+		$[0] = "fe382a0b044a84ab3280ebb086ded75a3135ffd01e1c594e94a37233c1b7e49b";
 	}
 	const { pathname } = useLocation();
 	const queryClient = useQueryClient();
@@ -180,9 +185,9 @@ function _temp(state) {
 }
 const BlockRenderer = (t0) => {
 	const $ = c(23);
-	if ($[0] !== "db8d810f3b089d82690f0e1b5661e44e1ec1bfed6c53c9605ab4126a4f1e25b8") {
+	if ($[0] !== "fe382a0b044a84ab3280ebb086ded75a3135ffd01e1c594e94a37233c1b7e49b") {
 		for (let $i = 0; $i < 23; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "db8d810f3b089d82690f0e1b5661e44e1ec1bfed6c53c9605ab4126a4f1e25b8";
+		$[0] = "fe382a0b044a84ab3280ebb086ded75a3135ffd01e1c594e94a37233c1b7e49b";
 	}
 	const { blockId, mode, showAddBlockTop, showAddBlockBottom } = t0;
 	const previewSource = useSelector(previewStore, _temp3);
@@ -324,10 +329,10 @@ const PageContent = () => {
 	});
 };
 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 $ = c(100);
+	if ($[0] !== "fe382a0b044a84ab3280ebb086ded75a3135ffd01e1c594e94a37233c1b7e49b") {
+		for (let $i = 0; $i < 100; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "fe382a0b044a84ab3280ebb086ded75a3135ffd01e1c594e94a37233c1b7e49b";
 	}
 	const { page } = t0;
 	const previewSource = useSelector(previewStore, _temp4);
@@ -335,12 +340,26 @@ const SidebarPublishRow = (t0) => {
 	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 otherSource = previewSource === "draft" ? "live" : "draft";
 	const canPrefetchOther = otherSource === "draft" || hasLiveCheckpoint;
-	let t1;
-	if ($[1] !== canPrefetchOther || $[2] !== otherSource || $[3] !== pathname || $[4] !== projectSlug || $[5] !== queryClient) {
-		t1 = () => {
+	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),
@@ -348,117 +367,444 @@ const SidebarPublishRow = (t0) => {
 				staleTime: Infinity
 			});
 		};
-		$[1] = canPrefetchOther;
-		$[2] = otherSource;
-		$[3] = pathname;
-		$[4] = projectSlug;
-		$[5] = queryClient;
-		$[6] = t1;
-	} else t1 = $[6];
-	const prefetchOtherSource = t1;
+		$[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";
-	let t2;
-	if ($[7] !== page.modifiedReason) {
-		t2 = page.modifiedReason && (page.modifiedReason.reason === "layout" || page.modifiedReason.reason === "both") ? {
+	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;
-		$[7] = page.modifiedReason;
-		$[8] = t2;
-	} else t2 = $[8];
-	const layoutCascade = t2;
-	const t3 = !hasLiveCheckpoint;
-	const t4 = previewSource === "draft";
+		$[9] = page.modifiedReason;
+		$[10] = t4;
+	} else t4 = $[10];
+	const layoutCascade = t4;
+	const publishLabel = page.status === "modified" ? "Publish changes" : "Publish page";
 	let t5;
-	if ($[9] !== t3 || $[10] !== t4) {
-		t5 = /* @__PURE__ */ jsx(Switch, {
+	let t6;
+	if ($[11] !== canDiscardChanges || $[12] !== canPublish || $[13] !== discardChanges.isPending || $[14] !== hasLiveCheckpoint || $[15] !== publishLabel || $[16] !== unpublishPage.isPending) {
+		t5 = () => {
+			const actions = [
+				{
+					id: "publish-current-page",
+					label: publishLabel,
+					groupLabel: "Preview",
+					checkIfAvailable: () => canPublish,
+					execute: () => setIsPublishDialogOpen(true)
+				},
+				{
+					id: "unpublish-current-page",
+					label: "Unpublish page",
+					groupLabel: "Preview",
+					checkIfAvailable: () => hasLiveCheckpoint && !unpublishPage.isPending,
+					execute: () => setIsUnpublishDialogOpen(true)
+				},
+				{
+					id: "discard-current-page-changes",
+					label: "Discard page changes",
+					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,
+			publishLabel,
+			unpublishPage.isPending
+		];
+		$[11] = canDiscardChanges;
+		$[12] = canPublish;
+		$[13] = discardChanges.isPending;
+		$[14] = hasLiveCheckpoint;
+		$[15] = publishLabel;
+		$[16] = unpublishPage.isPending;
+		$[17] = t5;
+		$[18] = t6;
+	} else {
+		t5 = $[17];
+		t6 = $[18];
+	}
+	React.useEffect(t5, t6);
+	let t7;
+	if ($[19] !== page.id || $[20] !== pathname || $[21] !== queryClient || $[22] !== unpublishPage) {
+		t7 = async () => {
+			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");
+			}
+		};
+		$[19] = page.id;
+		$[20] = pathname;
+		$[21] = queryClient;
+		$[22] = unpublishPage;
+		$[23] = t7;
+	} else t7 = $[23];
+	const handleUnpublish = t7;
+	let t8;
+	if ($[24] !== discardChanges || $[25] !== 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");
+			}
+		};
+		$[24] = discardChanges;
+		$[25] = page.id;
+		$[26] = t8;
+	} else t8 = $[26];
+	const handleDiscardChanges = t8;
+	const t9 = !canPublish;
+	let t10;
+	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = () => setIsPublishDialogOpen(true);
+		$[27] = t10;
+	} else t10 = $[27];
+	let t11;
+	if ($[28] !== publishLabel || $[29] !== t9) {
+		t11 = /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			type: "button",
+			disabled: t9,
+			onClick: t10,
+			className: "flex-1",
+			children: publishLabel
+		});
+		$[28] = publishLabel;
+		$[29] = t9;
+		$[30] = t11;
+	} else t11 = $[30];
+	let t12;
+	if ($[31] === 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" })
+		});
+		$[31] = t12;
+	} else t12 = $[31];
+	const t13 = !hasLiveCheckpoint || unpublishPage.isPending;
+	let t14;
+	if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = () => setIsUnpublishDialogOpen(true);
+		$[32] = t14;
+	} else t14 = $[32];
+	let t15;
+	if ($[33] !== t13) {
+		t15 = /* @__PURE__ */ jsx(DropdownMenuItem, {
+			disabled: t13,
+			onClick: t14,
+			children: "Unpublish"
+		});
+		$[33] = t13;
+		$[34] = t15;
+	} else t15 = $[34];
+	const t16 = !canDiscardChanges || discardChanges.isPending;
+	let t17;
+	if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = () => setIsDiscardDialogOpen(true);
+		$[35] = t17;
+	} else t17 = $[35];
+	let t18;
+	if ($[36] !== t16) {
+		t18 = /* @__PURE__ */ jsx(DropdownMenuItem, {
+			disabled: t16,
+			onClick: t17,
+			children: "Discard changes"
+		});
+		$[36] = t16;
+		$[37] = t18;
+	} else t18 = $[37];
+	let t19;
+	if ($[38] !== t15 || $[39] !== t18) {
+		t19 = /* @__PURE__ */ jsxs(DropdownMenu, { children: [t12, /* @__PURE__ */ jsxs(DropdownMenuContent, {
+			align: "end",
+			className: "w-42",
+			children: [t15, t18]
+		})] });
+		$[38] = t15;
+		$[39] = t18;
+		$[40] = t19;
+	} else t19 = $[40];
+	let t20;
+	if ($[41] !== t11 || $[42] !== t19) {
+		t20 = /* @__PURE__ */ jsxs(ButtonGroup, {
+			className: "w-full",
+			children: [t11, t19]
+		});
+		$[41] = t11;
+		$[42] = t19;
+		$[43] = t20;
+	} else t20 = $[43];
+	const t21 = !hasLiveCheckpoint;
+	const t22 = previewSource === "draft";
+	let t23;
+	if ($[44] !== t21 || $[45] !== t22) {
+		t23 = /* @__PURE__ */ jsx(Switch, {
 			id: "draft-content",
-			disabled: t3,
-			checked: t4,
-			onCheckedChange: _temp5
+			disabled: t21,
+			checked: t22,
+			onCheckedChange: _temp7
 		});
-		$[9] = t3;
-		$[10] = t4;
-		$[11] = t5;
-	} else t5 = $[11];
-	let t6;
-	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = /* @__PURE__ */ jsx(Label, {
+		$[44] = t21;
+		$[45] = t22;
+		$[46] = t23;
+	} else t23 = $[46];
+	let t24;
+	if ($[47] === Symbol.for("react.memo_cache_sentinel")) {
+		t24 = /* @__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",
+		$[47] = t24;
+	} else t24 = $[47];
+	let t25;
+	if ($[48] !== prefetchOtherSource || $[49] !== t23) {
+		t25 = /* @__PURE__ */ jsxs("div", {
+			className: "mt-1 flex items-center gap-2",
 			onMouseEnter: prefetchOtherSource,
 			onFocus: prefetchOtherSource,
-			children: [t5, t6]
+			children: [t23, t24]
 		});
-		$[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"
+		$[48] = prefetchOtherSource;
+		$[49] = t23;
+		$[50] = t25;
+	} else t25 = $[50];
+	let t26;
+	if ($[51] !== t20 || $[52] !== t25) {
+		t26 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2",
+			children: [t20, t25]
 		});
-		$[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,
+		$[51] = t20;
+		$[52] = t25;
+		$[53] = t26;
+	} else t26 = $[53];
+	const t27 = isPublishDialogOpen ? page : null;
+	let t28;
+	if ($[54] !== isPublishDialogOpen || $[55] !== layoutCascade || $[56] !== page.status || $[57] !== t27) {
+		t28 = /* @__PURE__ */ jsx(PublishDialog, {
+			page: t27,
 			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;
+		$[54] = isPublishDialogOpen;
+		$[55] = layoutCascade;
+		$[56] = page.status;
+		$[57] = t27;
+		$[58] = t28;
+	} else t28 = $[58];
+	let t29;
+	if ($[59] === Symbol.for("react.memo_cache_sentinel")) {
+		t29 = /* @__PURE__ */ jsx(AlertDialogTitle, { children: "Unpublish page" });
+		$[59] = t29;
+	} else t29 = $[59];
+	let t30;
+	if ($[60] !== 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."
+		] })] });
+		$[60] = page.fullPath;
+		$[61] = t30;
+	} else t30 = $[61];
+	let t31;
+	if ($[62] !== unpublishPage.isPending) {
+		t31 = /* @__PURE__ */ jsx(AlertDialogCancel, {
+			variant: "outline",
+			size: "default",
+			disabled: unpublishPage.isPending,
+			children: "Cancel"
+		});
+		$[62] = unpublishPage.isPending;
+		$[63] = t31;
+	} else t31 = $[63];
+	const t32 = unpublishPage.isPending ? "Unpublishing…" : "Unpublish";
+	let t33;
+	if ($[64] !== handleUnpublish || $[65] !== t32 || $[66] !== unpublishPage.isPending) {
+		t33 = /* @__PURE__ */ jsx(AlertDialogAction, {
+			onClick: handleUnpublish,
+			disabled: unpublishPage.isPending,
+			children: t32
+		});
+		$[64] = handleUnpublish;
+		$[65] = t32;
+		$[66] = unpublishPage.isPending;
+		$[67] = t33;
+	} else t33 = $[67];
+	let t34;
+	if ($[68] !== t31 || $[69] !== t33) {
+		t34 = /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [t31, t33] });
+		$[68] = t31;
+		$[69] = t33;
+		$[70] = t34;
+	} else t34 = $[70];
+	let t35;
+	if ($[71] !== t30 || $[72] !== t34) {
+		t35 = /* @__PURE__ */ jsxs(AlertDialogContent, { children: [t30, t34] });
+		$[71] = t30;
+		$[72] = t34;
+		$[73] = t35;
+	} else t35 = $[73];
+	let t36;
+	if ($[74] !== isUnpublishDialogOpen || $[75] !== t35) {
+		t36 = /* @__PURE__ */ jsx(AlertDialog, {
+			open: isUnpublishDialogOpen,
+			onOpenChange: setIsUnpublishDialogOpen,
+			children: t35
+		});
+		$[74] = isUnpublishDialogOpen;
+		$[75] = t35;
+		$[76] = t36;
+	} else t36 = $[76];
+	let t37;
+	if ($[77] === Symbol.for("react.memo_cache_sentinel")) {
+		t37 = /* @__PURE__ */ jsx(AlertDialogTitle, { children: "Discard draft changes" });
+		$[77] = t37;
+	} else t37 = $[77];
+	let t38;
+	if ($[78] !== page.fullPath) {
+		t38 = /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [t37, /* @__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."
+		] })] });
+		$[78] = page.fullPath;
+		$[79] = t38;
+	} else t38 = $[79];
+	let t39;
+	if ($[80] !== discardChanges.isPending) {
+		t39 = /* @__PURE__ */ jsx(AlertDialogCancel, {
+			variant: "outline",
+			size: "default",
+			disabled: discardChanges.isPending,
+			children: "Cancel"
+		});
+		$[80] = discardChanges.isPending;
+		$[81] = t39;
+	} else t39 = $[81];
+	const t40 = discardChanges.isPending ? "Discarding…" : "Discard changes";
+	let t41;
+	if ($[82] !== discardChanges.isPending || $[83] !== handleDiscardChanges || $[84] !== t40) {
+		t41 = /* @__PURE__ */ jsx(AlertDialogAction, {
+			onClick: handleDiscardChanges,
+			disabled: discardChanges.isPending,
+			children: t40
+		});
+		$[82] = discardChanges.isPending;
+		$[83] = handleDiscardChanges;
+		$[84] = t40;
+		$[85] = t41;
+	} else t41 = $[85];
+	let t42;
+	if ($[86] !== t39 || $[87] !== t41) {
+		t42 = /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [t39, t41] });
+		$[86] = t39;
+		$[87] = t41;
+		$[88] = t42;
+	} else t42 = $[88];
+	let t43;
+	if ($[89] !== t38 || $[90] !== t42) {
+		t43 = /* @__PURE__ */ jsxs(AlertDialogContent, { children: [t38, t42] });
+		$[89] = t38;
+		$[90] = t42;
+		$[91] = t43;
+	} else t43 = $[91];
+	let t44;
+	if ($[92] !== isDiscardDialogOpen || $[93] !== t43) {
+		t44 = /* @__PURE__ */ jsx(AlertDialog, {
+			open: isDiscardDialogOpen,
+			onOpenChange: setIsDiscardDialogOpen,
+			children: t43
+		});
+		$[92] = isDiscardDialogOpen;
+		$[93] = t43;
+		$[94] = t44;
+	} else t44 = $[94];
+	let t45;
+	if ($[95] !== t26 || $[96] !== t28 || $[97] !== t36 || $[98] !== t44) {
+		t45 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t26,
+			t28,
+			t36,
+			t44
+		] });
+		$[95] = t26;
+		$[96] = t28;
+		$[97] = t36;
+		$[98] = t44;
+		$[99] = t45;
+	} else t45 = $[99];
+	return t45;
 };
 function useHydrateDraftCache() {
 	const $ = c(7);
-	if ($[0] !== "db8d810f3b089d82690f0e1b5661e44e1ec1bfed6c53c9605ab4126a4f1e25b8") {
+	if ($[0] !== "fe382a0b044a84ab3280ebb086ded75a3135ffd01e1c594e94a37233c1b7e49b") {
 		for (let $i = 0; $i < 7; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "db8d810f3b089d82690f0e1b5661e44e1ec1bfed6c53c9605ab4126a4f1e25b8";
+		$[0] = "fe382a0b044a84ab3280ebb086ded75a3135ffd01e1c594e94a37233c1b7e49b";
 	}
 	const isAuthenticated = useIsAuthenticated();
 	const queryClient = useQueryClient();
@@ -483,7 +829,7 @@ function useHydrateDraftCache() {
 					projectName: data.projectName,
 					project: data.project
 				});
-			}).catch(_temp6);
+			}).catch(_temp8);
 			return () => {
 				cancelled = true;
 			};
@@ -506,18 +852,18 @@ function useHydrateDraftCache() {
 	}
 	React.useEffect(t0, t1);
 }
-function _temp6() {}
+function _temp8() {}
 const CamoxPreview = (t0) => {
 	const $ = c(32);
-	if ($[0] !== "db8d810f3b089d82690f0e1b5661e44e1ec1bfed6c53c9605ab4126a4f1e25b8") {
+	if ($[0] !== "fe382a0b044a84ab3280ebb086ded75a3135ffd01e1c594e94a37233c1b7e49b") {
 		for (let $i = 0; $i < 32; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "db8d810f3b089d82690f0e1b5661e44e1ec1bfed6c53c9605ab4126a4f1e25b8";
+		$[0] = "fe382a0b044a84ab3280ebb086ded75a3135ffd01e1c594e94a37233c1b7e49b";
 	}
 	const { children } = t0;
 	const isAuthenticated = useIsAuthenticated();
-	const isPresentationMode = useSelector(previewStore, _temp7);
-	const isSidebarOpen = useSelector(previewStore, _temp8);
-	const previewSource = useSelector(previewStore, _temp9);
+	const isPresentationMode = useSelector(previewStore, _temp9);
+	const isSidebarOpen = useSelector(previewStore, _temp0);
+	const previewSource = useSelector(previewStore, _temp1);
 	const pageData = usePreviewedPage();
 	useHydrateDraftCache();
 	const hasLiveCheckpoint = pageData.page.livePublishedCheckpointId != null;
@@ -531,7 +877,7 @@ const CamoxPreview = (t0) => {
 					label: "Hide Camox Studio",
 					groupLabel: "Preview",
 					checkIfAvailable: () => isAuthenticated && !isPresentationMode,
-					execute: _temp0,
+					execute: _temp10,
 					shortcut: {
 						key: "Enter",
 						withMeta: true
@@ -542,7 +888,7 @@ const CamoxPreview = (t0) => {
 					label: "Show Camox Studio",
 					groupLabel: "Preview",
 					checkIfAvailable: () => isAuthenticated && isPresentationMode,
-					execute: _temp1,
+					execute: _temp11,
 					shortcut: {
 						key: "Enter",
 						withMeta: true
@@ -553,7 +899,7 @@ const CamoxPreview = (t0) => {
 					label: "Preview live content",
 					groupLabel: "Preview",
 					checkIfAvailable: () => isAuthenticated && previewSource === "draft" && hasLiveCheckpoint,
-					execute: _temp10,
+					execute: _temp12,
 					shortcut: {
 						key: "d",
 						withAlt: true
@@ -564,7 +910,7 @@ const CamoxPreview = (t0) => {
 					label: "Preview draft content",
 					groupLabel: "Preview",
 					checkIfAvailable: () => isAuthenticated && previewSource === "live",
-					execute: _temp11,
+					execute: _temp13,
 					shortcut: {
 						key: "d",
 						withAlt: true
@@ -574,8 +920,8 @@ const CamoxPreview = (t0) => {
 					id: "clear-selection",
 					label: "Clear selection",
 					groupLabel: "Preview",
-					checkIfAvailable: _temp12,
-					execute: _temp13,
+					checkIfAvailable: _temp14,
+					execute: _temp15,
 					shortcut: { key: "Escape" }
 				}
 			];
@@ -586,7 +932,7 @@ const CamoxPreview = (t0) => {
 			return () => {
 				actionsStore.send({
 					type: "unregisterManyActions",
-					ids: actions.map(_temp14)
+					ids: actions.map(_temp16)
 				});
 			};
 		};
@@ -638,9 +984,9 @@ const CamoxPreview = (t0) => {
 		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 py-2"),
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex flex-row gap-2",
+				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",
@@ -652,7 +998,7 @@ const CamoxPreview = (t0) => {
 							})
 						}),
 						children: /* @__PURE__ */ jsx(Info, { className: "text-muted-foreground size-4" })
-					}), /* @__PURE__ */ jsx(TooltipContent, { children: "Page metadata, SEO and markdown" })] })]
+					}), /* @__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",
@@ -701,7 +1047,7 @@ const CamoxPreview = (t0) => {
 		t9 = /* @__PURE__ */ jsx(AddBlockSheet, {});
 		t10 = /* @__PURE__ */ jsx(AgentChatSheet, {});
 		t11 = /* @__PURE__ */ jsx(CreatePageModal, {});
-		t12 = /* @__PURE__ */ jsx(EditPageModal, {});
+		t12 = /* @__PURE__ */ jsx(PageMetadataModal, {});
 		t13 = /* @__PURE__ */ jsx(DraftSwitchDialog, {});
 		$[24] = t10;
 		$[25] = t11;
@@ -739,9 +1085,9 @@ const CamoxPreview = (t0) => {
 };
 function usePreviewPagesActions() {
 	const $ = c(13);
-	if ($[0] !== "db8d810f3b089d82690f0e1b5661e44e1ec1bfed6c53c9605ab4126a4f1e25b8") {
+	if ($[0] !== "fe382a0b044a84ab3280ebb086ded75a3135ffd01e1c594e94a37233c1b7e49b") {
 		for (let $i = 0; $i < 13; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "db8d810f3b089d82690f0e1b5661e44e1ec1bfed6c53c9605ab4126a4f1e25b8";
+		$[0] = "fe382a0b044a84ab3280ebb086ded75a3135ffd01e1c594e94a37233c1b7e49b";
 	}
 	const navigate = useNavigate();
 	const { pathname } = useLocation();
@@ -781,8 +1127,8 @@ function usePreviewPagesActions() {
 					id: "create-page",
 					label: "Create page",
 					groupLabel: "Preview",
-					checkIfAvailable: _temp15,
-					execute: _temp16
+					checkIfAvailable: _temp17,
+					execute: _temp18
 				},
 				{
 					id: "edit-current-page",
@@ -803,14 +1149,14 @@ function usePreviewPagesActions() {
 					groupLabel: "Preview",
 					checkIfAvailable: () => !!pages,
 					hasChildren: true,
-					execute: _temp17
+					execute: _temp19
 				},
 				...pages ? pages.map((page) => ({
 					id: `go-to-page-${page.id}`,
 					parentActionId: "go-to-page",
-					label: `Go to "${page.metaTitle ?? formatPathSegment(page.pathSegment)}"`,
+					label: `Go to "${page.nickname}"`,
 					groupLabel: "Preview",
-					checkIfAvailable: _temp18,
+					checkIfAvailable: _temp20,
 					execute: () => navigate({ to: page.fullPath })
 				})) : []
 			];
@@ -821,7 +1167,7 @@ function usePreviewPagesActions() {
 			return () => {
 				actionsStore.send({
 					type: "unregisterManyActions",
-					ids: actions.map(_temp19)
+					ids: actions.map(_temp21)
 				});
 			};
 		};
@@ -841,17 +1187,17 @@ function usePreviewPagesActions() {
 	}
 	React.useEffect(t4, t5);
 }
-function _temp19(a) {
+function _temp21(a) {
 	return a.id;
 }
-function _temp18() {
+function _temp20() {
 	return true;
 }
-function _temp17() {}
-function _temp16() {
+function _temp19() {}
+function _temp18() {
 	return previewStore.send({ type: "openCreatePageModal" });
 }
-function _temp15() {
+function _temp17() {
 	return true;
 }
 function _temp3(state) {
@@ -860,46 +1206,60 @@ function _temp3(state) {
 function _temp4(state) {
 	return state.context.previewSource;
 }
-function _temp5(checked) {
+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 _temp7(state) {
+function _temp9(state) {
 	return state.context.isPresentationMode;
 }
-function _temp8(state_0) {
+function _temp0(state_0) {
 	return state_0.context.isSidebarOpen;
 }
-function _temp9(state_1) {
+function _temp1(state_1) {
 	return state_1.context.previewSource;
 }
-function _temp0() {
+function _temp10() {
 	return previewStore.send({ type: "enterPresentationMode" });
 }
-function _temp1() {
+function _temp11() {
 	return previewStore.send({ type: "exitPresentationMode" });
 }
-function _temp10() {
+function _temp12() {
 	return previewStore.send({
 		type: "setPreviewSource",
 		source: "live"
 	});
 }
-function _temp11() {
+function _temp13() {
 	return previewStore.send({
 		type: "setPreviewSource",
 		source: "draft"
 	});
 }
-function _temp12() {
+function _temp14() {
 	return true;
 }
-function _temp13() {
+function _temp15() {
 	console.log("clear selection");
 }
-function _temp14(a) {
+function _temp16(a) {
 	return a.id;
 }