camox 0.26.0 → 0.28.0

package/dist/features/preview/components/PageNicknameField.js

@@ -0,0 +1,69 @@
+import { c } from "react/compiler-runtime";
+import { Input } from "@camox/ui/input";
+import { Label } from "@camox/ui/label";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/features/preview/components/PageNicknameField.tsx
+const PAGE_NICKNAME_MAX_LENGTH = 80;
+const PageNicknameField = (t0) => {
+	const $ = c(11);
+	if ($[0] !== "162dc2b9b16d70dc0796d14680eaaca4d0c3fb2e642401f82c11c475d9d72a71") {
+		for (let $i = 0; $i < 11; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "162dc2b9b16d70dc0796d14680eaaca4d0c3fb2e642401f82c11c475d9d72a71";
+	}
+	const { value, onChange, autoFocus } = t0;
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Label, {
+			htmlFor: "pageNickname",
+			children: "Nickname"
+		});
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== onChange) {
+		t2 = (e) => onChange(e.target.value);
+		$[2] = onChange;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== autoFocus || $[5] !== t2 || $[6] !== value) {
+		t3 = /* @__PURE__ */ jsx(Input, {
+			id: "pageNickname",
+			value,
+			onChange: t2,
+			placeholder: "e.g. Home, Pricing, About",
+			maxLength: 80,
+			autoFocus
+		});
+		$[4] = autoFocus;
+		$[5] = t2;
+		$[6] = value;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-xs",
+			children: "A short internal name used in Camox Studio. It does not affect the public page or SEO."
+		});
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t3) {
+		t5 = /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2",
+			children: [
+				t1,
+				t3,
+				t4
+			]
+		});
+		$[9] = t3;
+		$[10] = t5;
+	} else t5 = $[10];
+	return t5;
+};
+
+//#endregion
+export { PageNicknameField };

package/dist/features/preview/components/PagePicker.js

@@ -1,8 +1,8 @@
 import { previewStore } from "../previewStore.js";
 import { useProjectSlug } from "../../../lib/auth.js";
 import { pageMutations, pageQueries, projectQueries } from "../../../lib/queries.js";
-import { cn, formatPathSegment } from "../../../lib/utils.js";
-import { c } from "react/compiler-runtime";
+import { cn } from "../../../lib/utils.js";
+import { PageStatusBadge } from "./PageStatusBadge.js";
 import { Popover, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
 import { toast } from "@camox/ui/toaster";
 import { useMutation, useQuery } from "@tanstack/react-query";
@@ -10,87 +10,13 @@ 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 { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
 import { Button } from "@camox/ui/button";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@camox/ui/tooltip";
 import { Check, ChevronsUpDown, Pencil, Plus, Trash2 } from "lucide-react";
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
-import { Badge } from "@camox/ui/badge";
 import { Skeleton } from "@camox/ui/skeleton";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "@camox/ui/command";
 
 //#region src/features/preview/components/PagePicker.tsx
-const StatusBadge = (t0) => {
-	const $ = c(9);
-	if ($[0] !== "b1d62d8bb85e72a5793231a5fd9f232264a809f20c92f8c88b773f51f15623ec") {
-		for (let $i = 0; $i < 9; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "b1d62d8bb85e72a5793231a5fd9f232264a809f20c92f8c88b773f51f15623ec";
-	}
-	const { page } = t0;
-	if (page.status === "draft") {
-		let t1;
-		if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-			t1 = /* @__PURE__ */ jsx(Badge, {
-				variant: "outline",
-				className: "h-4 shrink-0 px-1.5",
-				children: "Draft"
-			});
-			$[1] = t1;
-		} else t1 = $[1];
-		return t1;
-	}
-	if (page.status === "published") {
-		let t1;
-		if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-			t1 = /* @__PURE__ */ jsx(Badge, {
-				variant: "secondary",
-				className: "h-4 shrink-0 px-1.5",
-				children: "Published"
-			});
-			$[2] = t1;
-		} else t1 = $[2];
-		return t1;
-	}
-	const reason = page.modifiedReason;
-	let t1;
-	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = /* @__PURE__ */ jsx(Badge, {
-			variant: "default",
-			className: "h-4 shrink-0 px-1.5",
-			children: "Modified"
-		});
-		$[3] = t1;
-	} else t1 = $[3];
-	const badge = t1;
-	if (reason && (reason.reason === "layout" || reason.reason === "both")) {
-		const pluralized = reason.affectedPagesCount === 1 ? "page" : "pages";
-		const headline = reason.reason === "layout" ? `Layout ${reason.layoutHandle} has unpublished changes` : `This page and layout ${reason.layoutHandle} both have unpublished changes`;
-		let t2;
-		if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-			t2 = /* @__PURE__ */ jsx(TooltipTrigger, {
-				render: /* @__PURE__ */ jsx("span", { className: "shrink-0" }),
-				children: badge
-			});
-			$[4] = t2;
-		} else t2 = $[4];
-		let t3;
-		if ($[5] !== headline || $[6] !== pluralized || $[7] !== reason.affectedPagesCount) {
-			t3 = /* @__PURE__ */ jsxs(Tooltip, { children: [t2, /* @__PURE__ */ jsxs(TooltipContent, { children: [
-				headline,
-				" (affects ",
-				reason.affectedPagesCount,
-				" ",
-				pluralized,
-				")"
-			] })] });
-			$[5] = headline;
-			$[6] = pluralized;
-			$[7] = reason.affectedPagesCount;
-			$[8] = t3;
-		} else t3 = $[8];
-		return t3;
-	}
-	return badge;
-};
 const CREATE_PAGE_VALUE = "__create_page__";
 const PagePicker = () => {
 	const [open, setOpen] = React.useState(false);
@@ -110,7 +36,7 @@ const PagePicker = () => {
 		setOpen(false);
 	};
 	const handleDeletePage = async (page) => {
-		const displayName = page.metaTitle ?? formatPathSegment(page.pathSegment);
+		const displayName = page.nickname;
 		try {
 			await deletePage.mutateAsync({ id: page.id });
 			toast.success(`Deleted ${displayName} page`);
@@ -145,9 +71,16 @@ const PagePicker = () => {
 				role: "combobox",
 				className: "min-w-0 flex-1 justify-between"
 			}),
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "truncate",
-				children: currentPage.metaTitle ?? currentPage.fullPath
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 items-center gap-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: currentPage.nickname
+				}), /* @__PURE__ */ jsx(PageStatusBadge, {
+					size: "sm",
+					status: currentPage.status,
+					modifiedReason: currentPage.modifiedReason
+				})]
 			}), /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })]
 		}), /* @__PURE__ */ jsx(PopoverContent, {
 			className: "flex h-[300px] w-[400px] flex-col p-0",
@@ -187,13 +120,17 @@ const PagePicker = () => {
 									className: "flex min-w-0 flex-col",
 									children: [/* @__PURE__ */ jsx("p", {
 										className: "truncate",
-										children: page_1.metaTitle ?? formatPathSegment(page_1.pathSegment)
+										children: page_1.nickname
 									}), /* @__PURE__ */ jsxs("div", {
 										className: "flex min-w-0 items-center gap-1.5",
 										children: [/* @__PURE__ */ jsx("p", {
 											className: "text-muted-foreground truncate font-mono text-xs",
 											children: page_1.fullPath
-										}), /* @__PURE__ */ jsx(StatusBadge, { page: page_1 })]
+										}), /* @__PURE__ */ jsx(PageStatusBadge, {
+											size: "sm",
+											status: page_1.status,
+											modifiedReason: page_1.modifiedReason
+										})]
 									})]
 								})]
 							}), /* @__PURE__ */ jsxs("div", {
@@ -258,7 +195,7 @@ const PagePicker = () => {
 		children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: "Delete page" }), /* @__PURE__ */ jsxs(AlertDialogDescription, { children: [
 			"Are you sure you want to delete",
 			" ",
-			/* @__PURE__ */ jsx("strong", { children: pageToDelete ? pageToDelete.metaTitle ?? formatPathSegment(pageToDelete.pathSegment) : "" }),
+			/* @__PURE__ */ jsx("strong", { children: pageToDelete ? pageToDelete.nickname : "" }),
 			"? This action cannot be undone."
 		] })] }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogCancel, {
 			variant: "outline",

package/dist/features/preview/components/PageStatusBadge.js

@@ -0,0 +1,97 @@
+import { cn } from "../../../lib/utils.js";
+import { c } from "react/compiler-runtime";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@camox/ui/tooltip";
+import { Badge } from "@camox/ui/badge";
+
+//#region src/features/preview/components/PageStatusBadge.tsx
+const statusStyles = {
+	draft: {
+		className: "bg-blue-500/10 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400",
+		label: "Draft"
+	},
+	published: {
+		className: "bg-primary/10 text-primary dark:bg-primary/20",
+		label: "Published"
+	},
+	modified: {
+		className: "bg-purple-500/10 text-purple-700 dark:bg-purple-500/20 dark:text-purple-400",
+		label: "Modified"
+	}
+};
+const PageStatusBadge = (t0) => {
+	const $ = c(18);
+	if ($[0] !== "9168a870b9514df0e89a2bb3f4bf1b341d85dcccf45743f1d6f9b68bbb30a7d4") {
+		for (let $i = 0; $i < 18; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "9168a870b9514df0e89a2bb3f4bf1b341d85dcccf45743f1d6f9b68bbb30a7d4";
+	}
+	const { status, modifiedReason, size: t1, className } = t0;
+	const size = t1 === void 0 ? "default" : t1;
+	const { className: statusClassName, label } = statusStyles[status];
+	let t2;
+	if ($[1] !== className || $[2] !== statusClassName) {
+		t2 = cn(statusClassName, className);
+		$[1] = className;
+		$[2] = statusClassName;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== label || $[5] !== size || $[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Badge, {
+			size,
+			className: t2,
+			children: label
+		});
+		$[4] = label;
+		$[5] = size;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	const badge = t3;
+	if (status === "modified" && modifiedReason && (modifiedReason.reason === "layout" || modifiedReason.reason === "both")) {
+		const pluralized = modifiedReason.affectedPagesCount === 1 ? "page" : "pages";
+		const headline = modifiedReason.reason === "layout" ? `Layout ${modifiedReason.layoutHandle} has unpublished changes` : `This page and layout ${modifiedReason.layoutHandle} both have unpublished changes`;
+		let t4;
+		if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+			t4 = /* @__PURE__ */ jsx("span", { className: "shrink-0" });
+			$[8] = t4;
+		} else t4 = $[8];
+		let t5;
+		if ($[9] !== badge) {
+			t5 = /* @__PURE__ */ jsx(TooltipTrigger, {
+				render: t4,
+				children: badge
+			});
+			$[9] = badge;
+			$[10] = t5;
+		} else t5 = $[10];
+		let t6;
+		if ($[11] !== headline || $[12] !== modifiedReason.affectedPagesCount || $[13] !== pluralized) {
+			t6 = /* @__PURE__ */ jsxs(TooltipContent, { children: [
+				headline,
+				" (affects ",
+				modifiedReason.affectedPagesCount,
+				" ",
+				pluralized,
+				")"
+			] });
+			$[11] = headline;
+			$[12] = modifiedReason.affectedPagesCount;
+			$[13] = pluralized;
+			$[14] = t6;
+		} else t6 = $[14];
+		let t7;
+		if ($[15] !== t5 || $[16] !== t6) {
+			t7 = /* @__PURE__ */ jsxs(Tooltip, { children: [t5, t6] });
+			$[15] = t5;
+			$[16] = t6;
+			$[17] = t7;
+		} else t7 = $[17];
+		return t7;
+	}
+	return badge;
+};
+
+//#endregion
+export { PageStatusBadge };

package/dist/features/preview/components/PreviewPanel.js

@@ -18,9 +18,9 @@ import { PanelContent } from "@camox/ui/panel";
 //#region src/features/preview/components/PreviewPanel.tsx
 const PreviewFrame = (t0) => {
 	const $ = c(9);
-	if ($[0] !== "0ff00f7e0a48a9512a0a40e1f9f3e978f0fd159929e643b5036b8a98b2f79fe4") {
+	if ($[0] !== "d799d12f8899aeada62843d5bb83029c25038cd1566b1870e63b1f293c26d992") {
 		for (let $i = 0; $i < 9; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "0ff00f7e0a48a9512a0a40e1f9f3e978f0fd159929e643b5036b8a98b2f79fe4";
+		$[0] = "d799d12f8899aeada62843d5bb83029c25038cd1566b1870e63b1f293c26d992";
 	}
 	const { children, style, className, onIframeReady } = t0;
 	let t1;
@@ -61,9 +61,9 @@ const PreviewFrame = (t0) => {
 };
 const KeyDownForwarder = () => {
 	const $ = c(5);
-	if ($[0] !== "0ff00f7e0a48a9512a0a40e1f9f3e978f0fd159929e643b5036b8a98b2f79fe4") {
+	if ($[0] !== "d799d12f8899aeada62843d5bb83029c25038cd1566b1870e63b1f293c26d992") {
 		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "0ff00f7e0a48a9512a0a40e1f9f3e978f0fd159929e643b5036b8a98b2f79fe4";
+		$[0] = "d799d12f8899aeada62843d5bb83029c25038cd1566b1870e63b1f293c26d992";
 	}
 	const { window: iframeWindow } = useFrame();
 	const actions = useSelector(actionsStore, _temp);
@@ -119,17 +119,16 @@ const KeyDownForwarder = () => {
 	return null;
 };
 const PreviewPanel = (t0) => {
-	const $ = c(16);
-	if ($[0] !== "0ff00f7e0a48a9512a0a40e1f9f3e978f0fd159929e643b5036b8a98b2f79fe4") {
-		for (let $i = 0; $i < 16; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "0ff00f7e0a48a9512a0a40e1f9f3e978f0fd159929e643b5036b8a98b2f79fe4";
+	const $ = c(14);
+	if ($[0] !== "d799d12f8899aeada62843d5bb83029c25038cd1566b1870e63b1f293c26d992") {
+		for (let $i = 0; $i < 14; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "d799d12f8899aeada62843d5bb83029c25038cd1566b1870e63b1f293c26d992";
 	}
 	const { children } = t0;
 	useBlockActionsShortcuts();
 	const iframeElement = useSelector(previewStore, _temp2);
 	const handleIframeReady = _temp3;
 	const isMobileMode = useSelector(previewStore, _temp4);
-	const isAgentChatSheetOpen = useSelector(previewStore, _temp5);
 	const isAnySideSheetOpen = useIsPreviewSheetOpen();
 	const wrapperRef = React.useRef(null);
 	const [panelWidth, setPanelWidth] = React.useState(0);
@@ -161,92 +160,27 @@ const PreviewPanel = (t0) => {
 	const sheetOverlap = Math.max(0, 400 - panelLeft);
 	const sheetOpenScale = panelWidth > 0 ? (panelWidth - sheetOverlap) / panelWidth : 1;
 	let t3;
-	let t4;
-	if ($[3] !== isAgentChatSheetOpen) {
-		t3 = () => {
-			const actions = [
-				{
-					id: "toggle-editing-panel",
-					label: "Toggle editing panel",
-					groupLabel: "Preview",
-					checkIfAvailable: _temp6,
-					execute: _temp7,
-					shortcut: {
-						key: "b",
-						withAlt: true
-					}
-				},
-				{
-					id: "toggle-lock-content",
-					label: "Toggle lock content",
-					groupLabel: "Preview",
-					checkIfAvailable: _temp8,
-					execute: _temp9
-				},
-				{
-					id: "toggle-mobile-mode",
-					label: "Toggle mobile mode",
-					groupLabel: "Preview",
-					checkIfAvailable: _temp0,
-					execute: _temp1,
-					shortcut: { key: "m" }
-				},
-				{
-					id: "open-agent-chat",
-					label: "Ask for changes",
-					groupLabel: "Preview",
-					checkIfAvailable: () => !isAgentChatSheetOpen,
-					execute: _temp10,
-					shortcut: {
-						key: "i",
-						withAlt: true
-					}
-				},
-				{
-					id: "clear-selection",
-					label: "Clear selection",
-					groupLabel: "Preview",
-					checkIfAvailable: _temp11,
-					execute: _temp12,
-					shortcut: { key: "Escape" }
-				}
-			];
-			actionsStore.send({
-				type: "registerManyActions",
-				actions
-			});
-			return () => {
-				actionsStore.send({
-					type: "unregisterManyActions",
-					ids: actions.map(_temp13)
-				});
-			};
-		};
-		t4 = [isAgentChatSheetOpen];
-		$[3] = isAgentChatSheetOpen;
-		$[4] = t3;
-		$[5] = t4;
-	} else {
-		t3 = $[4];
-		t4 = $[5];
-	}
-	React.useEffect(t3, t4);
-	const t5 = isAnySideSheetOpen ? `${100 / sheetOpenScale}%` : "100%";
-	const t6 = isAnySideSheetOpen ? `scale(${sheetOpenScale})` : "scale(1)";
-	let t7;
-	if ($[6] !== t5 || $[7] !== t6) {
-		t7 = {
-			height: t5,
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = [];
+		$[3] = t3;
+	} else t3 = $[3];
+	React.useEffect(_temp14, t3);
+	const t4 = isAnySideSheetOpen ? `${100 / sheetOpenScale}%` : "100%";
+	const t5 = isAnySideSheetOpen ? `scale(${sheetOpenScale})` : "scale(1)";
+	let t6;
+	if ($[4] !== t4 || $[5] !== t5) {
+		t6 = {
+			height: t4,
 			transformOrigin: "top right",
-			transform: t6
+			transform: t5
 		};
-		$[6] = t5;
-		$[7] = t6;
-		$[8] = t7;
-	} else t7 = $[8];
-	let t8;
-	if ($[9] !== children || $[10] !== iframeElement || $[11] !== isMobileMode) {
-		t8 = isMobileMode ? /* @__PURE__ */ jsxs("div", {
+		$[4] = t4;
+		$[5] = t5;
+		$[6] = t6;
+	} else t6 = $[6];
+	let t7;
+	if ($[7] !== children || $[8] !== iframeElement || $[9] !== isMobileMode) {
+		t7 = isMobileMode ? /* @__PURE__ */ jsxs("div", {
 			className: "checkered flex h-full justify-center",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
@@ -270,27 +204,27 @@ const PreviewPanel = (t0) => {
 			/* @__PURE__ */ jsx(FieldToolbar, {}),
 			/* @__PURE__ */ jsx(PreviewToolbar, {})
 		] });
-		$[9] = children;
-		$[10] = iframeElement;
-		$[11] = isMobileMode;
-		$[12] = t8;
-	} else t8 = $[12];
-	let t9;
-	if ($[13] !== t7 || $[14] !== t8) {
-		t9 = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(PanelContent, {
+		$[7] = children;
+		$[8] = iframeElement;
+		$[9] = isMobileMode;
+		$[10] = t7;
+	} else t7 = $[10];
+	let t8;
+	if ($[11] !== t6 || $[12] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(PanelContent, {
 			className: "relative overflow-hidden bg-black",
 			children: /* @__PURE__ */ jsx("div", {
 				ref: wrapperRef,
 				className: "absolute inset-0 transition-[transform,height] duration-500 ease-in-out will-change-transform",
-				style: t7,
-				children: t8
+				style: t6,
+				children: t7
 			})
 		}) });
-		$[13] = t7;
-		$[14] = t8;
-		$[15] = t9;
-	} else t9 = $[15];
-	return t9;
+		$[11] = t6;
+		$[12] = t7;
+		$[13] = t8;
+	} else t8 = $[13];
+	return t8;
 };
 function _temp(state) {
 	return state.context.actions;
@@ -307,29 +241,30 @@ function _temp3(element) {
 function _temp4(state_0) {
 	return state_0.context.isMobileMode;
 }
-function _temp5(state_1) {
-	return state_1.context.isAgentChatSheetOpen;
+function _temp5() {
+	return true;
 }
 function _temp6() {
-	return true;
+	return previewStore.send({ type: "toggleSidebar" });
 }
 function _temp7() {
-	return previewStore.send({ type: "toggleSidebar" });
+	return true;
 }
 function _temp8() {
-	return true;
+	return previewStore.send({ type: "toggleLockContent" });
 }
 function _temp9() {
-	return previewStore.send({ type: "toggleLockContent" });
+	return true;
 }
 function _temp0() {
-	return true;
+	return previewStore.send({ type: "toggleMobileMode" });
 }
 function _temp1() {
-	return previewStore.send({ type: "toggleMobileMode" });
+	return true;
 }
 function _temp10() {
-	return previewStore.send({ type: "openAgentChatSheet" });
+	const { isAgentChatSheetOpen } = previewStore.getSnapshot().context;
+	previewStore.send({ type: isAgentChatSheetOpen ? "closeAgentChatSheet" : "openAgentChatSheet" });
 }
 function _temp11() {
 	return true;
@@ -340,6 +275,65 @@ function _temp12() {
 function _temp13(a) {
 	return a.id;
 }
+function _temp14() {
+	const actions = [
+		{
+			id: "toggle-editing-panel",
+			label: "Toggle editing panel",
+			groupLabel: "Preview",
+			checkIfAvailable: _temp5,
+			execute: _temp6,
+			shortcut: {
+				key: "b",
+				withAlt: true
+			}
+		},
+		{
+			id: "toggle-lock-content",
+			label: "Toggle lock content",
+			groupLabel: "Preview",
+			checkIfAvailable: _temp7,
+			execute: _temp8
+		},
+		{
+			id: "toggle-mobile-mode",
+			label: "Toggle mobile mode",
+			groupLabel: "Preview",
+			checkIfAvailable: _temp9,
+			execute: _temp0,
+			shortcut: { key: "m" }
+		},
+		{
+			id: "toggle-agent-chat",
+			label: "Toggle agent chat",
+			groupLabel: "Preview",
+			checkIfAvailable: _temp1,
+			execute: _temp10,
+			shortcut: {
+				key: "i",
+				withAlt: true
+			}
+		},
+		{
+			id: "clear-selection",
+			label: "Clear selection",
+			groupLabel: "Preview",
+			checkIfAvailable: _temp11,
+			execute: _temp12,
+			shortcut: { key: "Escape" }
+		}
+	];
+	actionsStore.send({
+		type: "registerManyActions",
+		actions
+	});
+	return () => {
+		actionsStore.send({
+			type: "unregisterManyActions",
+			ids: actions.map(_temp13)
+		});
+	};
+}
 
 //#endregion
 export { PreviewFrame, PreviewPanel };

package/dist/features/preview/components/PreviewToolbar.js

@@ -6,18 +6,18 @@ import { Kbd } from "@camox/ui/kbd";
 import { useSelector } from "@xstate/store-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
+import { ButtonGroup } from "@camox/ui/button-group";
 import * as Tooltip$1 from "@camox/ui/tooltip";
 import { Lock, MonitorPlay, PanelRight, TabletSmartphone } from "lucide-react";
-import { ButtonGroup } from "@camox/ui/button-group";
 import { FloatingToolbar } from "@camox/ui/floating-toolbar";
 import { Toggle } from "@camox/ui/toggle";
 
 //#region src/features/preview/components/PreviewToolbar.tsx
 const PreviewToolbar = () => {
 	const $ = c(70);
-	if ($[0] !== "3f4ab1b23a0c71433f448a6d697143e0a49bc26edf45de5fcefe147aab349d48") {
+	if ($[0] !== "9eb26d2e74b59f556130f84b8d22fd9907b3e87a936f560c3c15b54462b76f83") {
 		for (let $i = 0; $i < 70; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "3f4ab1b23a0c71433f448a6d697143e0a49bc26edf45de5fcefe147aab349d48";
+		$[0] = "9eb26d2e74b59f556130f84b8d22fd9907b3e87a936f560c3c15b54462b76f83";
 	}
 	const isEditingLocked = useSelector(previewStore, _temp);
 	const isEditingPanelOpen = useSelector(previewStore, _temp2);
@@ -247,7 +247,7 @@ const PreviewToolbar = () => {
 	} else t32 = $[61];
 	let t33;
 	if ($[62] !== actions) {
-		t33 = getActionShortcut(actions, "open-agent-chat");
+		t33 = getActionShortcut(actions, "toggle-agent-chat");
 		$[62] = actions;
 		$[63] = t33;
 	} else t33 = $[63];

package/dist/features/preview/components/PublishDialog.js

@@ -5,8 +5,8 @@ import { toast } from "@camox/ui/toaster";
 import { useMutation } from "@tanstack/react-query";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Switch } from "@camox/ui/switch";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
+import { Switch } from "@camox/ui/switch";
 
 //#region src/features/preview/components/PublishDialog.tsx
 /**

package/dist/features/preview/components/UnlinkAssetButton.js

@@ -4,10 +4,10 @@ import { c } from "react/compiler-runtime";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AlertDialog, AlertDialogAction, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
 import { Button } from "@camox/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@camox/ui/tooltip";
 import { X } from "lucide-react";
-import { AlertDialog, AlertDialogAction, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
 
 //#region src/features/preview/components/UnlinkAssetButton.tsx
 const UnlinkAssetButton = (t0) => {