camox 0.48.0 → 0.51.0

package/dist/core/layoutContext.d.ts

@@ -1,3 +1,4 @@
+import "../lib/locale-path.js";
 //#region src/core/layoutContext.d.ts
 /**
  * The context every layout `to*` option receives. Each name always means the same thing and is

package/dist/features/canvas/sidebar/CanvasInspector.js

@@ -1,4 +1,4 @@
-import { formatShortcut } from "../../../lib/utils.js";
+import { formatShortcut } from "../../../lib/shortcuts.js";
 import "../../preview/components/PageNicknameField.js";
 import { SHOW_WHOLE_CANVAS_SHORTCUT } from "../../preview/previewConstants.js";
 import { c } from "react/compiler-runtime";

package/dist/features/content/ContentAssets.js

@@ -1,6 +1,5 @@
 import { useProjectUuid } from "../../lib/auth.js";
 import { reads, useReadQuery } from "../../lib/studio-reads.js";
-import { checkIfInputFocused } from "../../lib/utils.js";
 import { UploadDropZone } from "./components/UploadDropZone.js";
 import { UploadProgressDrawer } from "./components/UploadProgressDrawer.js";
 import { useFileUpload } from "../../hooks/use-file-upload.js";
@@ -10,12 +9,13 @@ import { AssetCard } from "./components/AssetCard.js";
 import { useMarqueeSelection } from "../../hooks/use-marquee-selection.js";
 import { AssetCardSkeleton } from "./components/AssetCardSkeleton.js";
 import { c } from "react/compiler-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMutation } from "@tanstack/react-query";
 import { Button } from "@camox/ui/button";
 import { PanelContent } from "@camox/ui/panel";
 import { ImageIcon, UploadIcon } from "lucide-react";
+import { useHotkey } from "@tanstack/react-hotkeys";
 import { FloatingToolbar } from "@camox/ui/floating-toolbar";
 
 //#region src/features/content/ContentAssets.tsx
@@ -74,31 +74,27 @@ const ContentAssets = () => {
 		$[10] = t8;
 	} else t8 = $[10];
 	const { selectionRect, didDragRef, handlers } = useMarqueeSelection(containerRef, t8);
-	let t10;
 	let t9;
-	if ($[11] !== lightboxFileId) {
-		t9 = () => {
-			const handleKeyDown = (event) => {
-				if (event.key !== "Escape") return;
-				if (lightboxFileId !== null) return;
-				if (checkIfInputFocused()) return;
-				setSelectedIds(_temp);
-			};
-			document.addEventListener("keydown", handleKeyDown);
-			return () => document.removeEventListener("keydown", handleKeyDown);
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = () => setSelectedIds(_temp);
+		$[11] = t9;
+	} else t9 = $[11];
+	const t10 = lightboxFileId === null;
+	let t11;
+	if ($[12] !== t10) {
+		t11 = {
+			enabled: t10,
+			ignoreInputs: true,
+			preventDefault: false,
+			stopPropagation: false
 		};
-		t10 = [lightboxFileId];
-		$[11] = lightboxFileId;
 		$[12] = t10;
-		$[13] = t9;
-	} else {
-		t10 = $[12];
-		t9 = $[13];
-	}
-	useEffect(t9, t10);
-	let t11;
+		$[13] = t11;
+	} else t11 = $[13];
+	useHotkey("Escape", t9, t11);
+	let t12;
 	if ($[14] !== didDragRef) {
-		t11 = () => {
+		t12 = () => {
 			if (didDragRef.current) {
 				didDragRef.current = false;
 				return;
@@ -106,20 +102,20 @@ const ContentAssets = () => {
 			setSelectedIds(/* @__PURE__ */ new Set());
 		};
 		$[14] = didDragRef;
-		$[15] = t11;
-	} else t11 = $[15];
-	let t12;
+		$[15] = t12;
+	} else t12 = $[15];
+	let t13;
 	if ($[16] !== files) {
-		t12 = files === void 0 && /* @__PURE__ */ jsx("div", {
+		t13 = files === void 0 && /* @__PURE__ */ jsx("div", {
 			className: "grid grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-4",
 			children: Array.from({ length: 12 }, _temp2)
 		});
 		$[16] = files;
-		$[17] = t12;
-	} else t12 = $[17];
-	let t13;
+		$[17] = t13;
+	} else t13 = $[17];
+	let t14;
 	if ($[18] !== files?.length || $[19] !== uploadFiles) {
-		t13 = files?.length === 0 && /* @__PURE__ */ jsx("div", {
+		t14 = files?.length === 0 && /* @__PURE__ */ jsx("div", {
 			className: "flex h-full items-center justify-center",
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "flex max-w-sm flex-col items-center gap-2 text-center",
@@ -150,9 +146,9 @@ const ContentAssets = () => {
 								type: "file",
 								className: "sr-only",
 								multiple: true,
-								onChange: (event_0) => {
-									if (event_0.target.files) uploadFiles(event_0.target.files);
-									event_0.target.value = "";
+								onChange: (event) => {
+									if (event.target.files) uploadFiles(event.target.files);
+									event.target.value = "";
 								}
 							})
 						]
@@ -162,11 +158,11 @@ const ContentAssets = () => {
 		});
 		$[18] = files?.length;
 		$[19] = uploadFiles;
-		$[20] = t13;
-	} else t13 = $[20];
-	let t14;
+		$[20] = t14;
+	} else t14 = $[20];
+	let t15;
 	if ($[21] !== files || $[22] !== selectedIds) {
-		t14 = files && files.length > 0 && /* @__PURE__ */ jsx("div", {
+		t15 = files && files.length > 0 && /* @__PURE__ */ jsx("div", {
 			className: "grid grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-4",
 			children: files.map((file) => /* @__PURE__ */ jsx(AssetCard, {
 				file,
@@ -184,11 +180,11 @@ const ContentAssets = () => {
 		});
 		$[21] = files;
 		$[22] = selectedIds;
-		$[23] = t14;
-	} else t14 = $[23];
-	let t15;
+		$[23] = t15;
+	} else t15 = $[23];
+	let t16;
 	if ($[24] !== selectionRect) {
-		t15 = selectionRect && /* @__PURE__ */ jsx("div", {
+		t16 = selectionRect && /* @__PURE__ */ jsx("div", {
 			className: "border-primary bg-primary/10 pointer-events-none absolute z-50 border",
 			style: {
 				left: selectionRect.left,
@@ -198,61 +194,61 @@ const ContentAssets = () => {
 			}
 		});
 		$[24] = selectionRect;
-		$[25] = t15;
-	} else t15 = $[25];
-	let t16;
-	if ($[26] !== handlers.onPointerDown || $[27] !== handlers.onPointerMove || $[28] !== handlers.onPointerUp || $[29] !== t11 || $[30] !== t12 || $[31] !== t13 || $[32] !== t14 || $[33] !== t15) {
-		t16 = /* @__PURE__ */ jsxs(PanelContent, {
+		$[25] = t16;
+	} else t16 = $[25];
+	let t17;
+	if ($[26] !== handlers.onPointerDown || $[27] !== handlers.onPointerMove || $[28] !== handlers.onPointerUp || $[29] !== t12 || $[30] !== t13 || $[31] !== t14 || $[32] !== t15 || $[33] !== t16) {
+		t17 = /* @__PURE__ */ jsxs(PanelContent, {
 			ref: containerRef,
 			className: "relative p-4 select-none",
-			onClick: t11,
+			onClick: t12,
 			onPointerDown: handlers.onPointerDown,
 			onPointerMove: handlers.onPointerMove,
 			onPointerUp: handlers.onPointerUp,
 			children: [
-				t12,
 				t13,
 				t14,
-				t15
+				t15,
+				t16
 			]
 		});
 		$[26] = handlers.onPointerDown;
 		$[27] = handlers.onPointerMove;
 		$[28] = handlers.onPointerUp;
-		$[29] = t11;
-		$[30] = t12;
-		$[31] = t13;
-		$[32] = t14;
-		$[33] = t15;
-		$[34] = t16;
-	} else t16 = $[34];
-	let t17;
-	if ($[35] !== t16 || $[36] !== uploadFiles) {
-		t17 = /* @__PURE__ */ jsx("div", {
+		$[29] = t12;
+		$[30] = t13;
+		$[31] = t14;
+		$[32] = t15;
+		$[33] = t16;
+		$[34] = t17;
+	} else t17 = $[34];
+	let t18;
+	if ($[35] !== t17 || $[36] !== uploadFiles) {
+		t18 = /* @__PURE__ */ jsx("div", {
 			className: "flex min-h-0 min-w-0 flex-1 flex-col",
 			children: /* @__PURE__ */ jsx(UploadDropZone, {
 				onDrop: uploadFiles,
 				className: "flex min-h-0 flex-1 flex-col",
-				children: t16
+				children: t17
 			})
 		});
-		$[35] = t16;
+		$[35] = t17;
 		$[36] = uploadFiles;
-		$[37] = t17;
-	} else t17 = $[37];
-	let t18;
+		$[37] = t18;
+	} else t18 = $[37];
+	let t19;
 	if ($[38] !== clearAll || $[39] !== uploads) {
-		t18 = /* @__PURE__ */ jsx(UploadProgressDrawer, {
+		t19 = /* @__PURE__ */ jsx(UploadProgressDrawer, {
 			uploads,
 			onClose: clearAll
 		});
 		$[38] = clearAll;
 		$[39] = uploads;
-		$[40] = t18;
-	} else t18 = $[40];
-	let t19;
+		$[40] = t19;
+	} else t19 = $[40];
+	let t20;
 	if ($[41] !== deleteFiles || $[42] !== selectedIds) {
-		t19 = selectedIds.size > 0 && /* @__PURE__ */ jsxs(FloatingToolbar, {
+		t20 = selectedIds.size > 0 && /* @__PURE__ */ jsxs(FloatingToolbar, {
 			className: "bottom-4 min-w-xs justify-between gap-4 pl-3",
 			children: [/* @__PURE__ */ jsxs("span", {
 				className: "text-muted-foreground",
@@ -274,11 +270,11 @@ const ContentAssets = () => {
 		});
 		$[41] = deleteFiles;
 		$[42] = selectedIds;
-		$[43] = t19;
-	} else t19 = $[43];
-	let t20;
+		$[43] = t20;
+	} else t20 = $[43];
+	let t21;
 	if ($[44] !== lightboxFileId) {
-		t20 = lightboxFileId && /* @__PURE__ */ jsx(AssetLightbox, {
+		t21 = lightboxFileId && /* @__PURE__ */ jsx(AssetLightbox, {
 			open: true,
 			onOpenChange: (open) => {
 				if (!open) setLightboxFileId(null);
@@ -286,23 +282,23 @@ const ContentAssets = () => {
 			fileId: lightboxFileId
 		});
 		$[44] = lightboxFileId;
-		$[45] = t20;
-	} else t20 = $[45];
-	let t21;
-	if ($[46] !== t17 || $[47] !== t18 || $[48] !== t19 || $[49] !== t20) {
-		t21 = /* @__PURE__ */ jsxs(Fragment, { children: [
-			t17,
+		$[45] = t21;
+	} else t21 = $[45];
+	let t22;
+	if ($[46] !== t18 || $[47] !== t19 || $[48] !== t20 || $[49] !== t21) {
+		t22 = /* @__PURE__ */ jsxs(Fragment, { children: [
 			t18,
 			t19,
-			t20
+			t20,
+			t21
 		] });
-		$[46] = t17;
-		$[47] = t18;
-		$[48] = t19;
-		$[49] = t20;
-		$[50] = t21;
-	} else t21 = $[50];
-	return t21;
+		$[46] = t18;
+		$[47] = t19;
+		$[48] = t20;
+		$[49] = t21;
+		$[50] = t22;
+	} else t22 = $[50];
+	return t22;
 };
 function _temp(prev) {
 	return prev.size === 0 ? prev : /* @__PURE__ */ new Set();

package/dist/features/preview/CamoxPreview.js

@@ -749,7 +749,7 @@ const PreviewShell = (t0) => {
 					groupLabel: "Website",
 					checkIfAvailable: _temp6,
 					execute: _temp7,
-					shortcut: { key: "Escape" }
+					shortcut: "Escape"
 				}
 			];
 			actionsStore.send({

package/dist/features/preview/EditablePageExperience.js

@@ -4,16 +4,23 @@ import { AuthenticatedCamoxProvider } from "../provider/AuthenticatedCamoxProvid
 import { CamoxStudio } from "../studio/CamoxStudio.js";
 import "./EditablePageContent.js";
 import { CompleteBlockEditingRuntimeProvider } from "../../core/editing/CompleteBlockEditingRuntime.js";
+import { CamoxSettings } from "../settings/CamoxSettings.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/features/preview/EditablePageExperience.tsx
+/** The studio section each studio route shows. */
+const STUDIO_SECTIONS = {
+	"studio-content": CamoxContent,
+	"studio-settings": CamoxSettings
+};
 function EditablePageExperience(t0) {
-	const $ = c(5);
+	const $ = c(6);
 	const { input } = t0;
+	const StudioSection = input.routeKind && STUDIO_SECTIONS[input.routeKind];
 	let t1;
-	if ($[0] !== input.canvasOnly || $[1] !== input.derived || $[2] !== input.routeKind || $[3] !== input.runtimeBasePath) {
-		t1 = /* @__PURE__ */ jsx(AuthenticatedCamoxProvider, { children: /* @__PURE__ */ jsx(CompleteBlockEditingRuntimeProvider, { children: input.routeKind ? /* @__PURE__ */ jsx(CamoxStudio, { children: input.routeKind === "studio-content" ? /* @__PURE__ */ jsx(CamoxContent, {}) : /* @__PURE__ */ jsx("div", {
+	if ($[0] !== StudioSection || $[1] !== input.canvasOnly || $[2] !== input.derived || $[3] !== input.routeKind || $[4] !== input.runtimeBasePath) {
+		t1 = /* @__PURE__ */ jsx(AuthenticatedCamoxProvider, { children: /* @__PURE__ */ jsx(CompleteBlockEditingRuntimeProvider, { children: input.routeKind ? /* @__PURE__ */ jsx(CamoxStudio, { children: StudioSection ? /* @__PURE__ */ jsx(StudioSection, {}) : /* @__PURE__ */ jsx("div", {
 			className: "text-muted-foreground p-6 text-sm",
 			children: "Studio page not found"
 		}) }) : /* @__PURE__ */ jsx(CamoxPreview, {
@@ -22,12 +29,13 @@ function EditablePageExperience(t0) {
 			runtimeBasePath: input.runtimeBasePath,
 			children: /* @__PURE__ */ jsx(PageContent, {})
 		}) }) });
-		$[0] = input.canvasOnly;
-		$[1] = input.derived;
-		$[2] = input.routeKind;
-		$[3] = input.runtimeBasePath;
-		$[4] = t1;
-	} else t1 = $[4];
+		$[0] = StudioSection;
+		$[1] = input.canvasOnly;
+		$[2] = input.derived;
+		$[3] = input.routeKind;
+		$[4] = input.runtimeBasePath;
+		$[5] = t1;
+	} else t1 = $[5];
 	return t1;
 }
 

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

@@ -1,8 +1,8 @@
 import { actionsStore } from "../../provider/actionsStore.js";
 import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
 import { usePageBlocks } from "../../../lib/normalized-data.js";
-import { formatShortcut } from "../../../lib/utils.js";
 import { blockMutations, repeatableItemMutations } from "../../../lib/queries.js";
+import { formatShortcut } from "../../../lib/shortcuts.js";
 import { isBlockSelection, previewStore, selectionForPage, selectionItemId } from "../previewStore.js";
 import { entityName } from "../entityName.js";
 import { useUpdateBlockPosition } from "./useUpdateBlockPosition.js";
@@ -139,7 +139,7 @@ const BlockActionsPopover = ({ block, children, open, onOpenChange, align = "sta
 							children: [/* @__PURE__ */ jsxs("div", {
 								className: "flex items-center gap-2",
 								children: [/* @__PURE__ */ jsx("span", { className: "w-4" }), "Add block below"]
-							}), /* @__PURE__ */ jsx(CommandShortcut, { children: formatShortcut({ key: "o" }) })]
+							}), /* @__PURE__ */ jsx(CommandShortcut, { children: formatShortcut("O") })]
 						}), /* @__PURE__ */ jsxs(CommandItem, {
 							className: "justify-between",
 							onSelect: () => {
@@ -149,10 +149,7 @@ const BlockActionsPopover = ({ block, children, open, onOpenChange, align = "sta
 							children: [/* @__PURE__ */ jsxs("div", {
 								className: "flex items-center gap-2",
 								children: [/* @__PURE__ */ jsx("span", { className: "w-4" }), "Add block above"]
-							}), /* @__PURE__ */ jsx(CommandShortcut, { children: formatShortcut({
-								key: "o",
-								withShift: true
-							}) })]
+							}), /* @__PURE__ */ jsx(CommandShortcut, { children: formatShortcut("Shift+O") })]
 						})] }),
 						/* @__PURE__ */ jsx(CommandSeparator, {}),
 						/* @__PURE__ */ jsx(CommandGroup, { children: /* @__PURE__ */ jsxs(CommandItem, {
@@ -164,10 +161,7 @@ const BlockActionsPopover = ({ block, children, open, onOpenChange, align = "sta
 							children: [/* @__PURE__ */ jsxs("div", {
 								className: "flex items-center gap-2",
 								children: [/* @__PURE__ */ jsx(Copy, { className: "h-4 w-4" }), "Duplicate block"]
-							}), /* @__PURE__ */ jsx(CommandShortcut, { children: formatShortcut({
-								key: "d",
-								withMeta: true
-							}) })]
+							}), /* @__PURE__ */ jsx(CommandShortcut, { children: formatShortcut("Mod+D") })]
 						}) }),
 						/* @__PURE__ */ jsx(CommandSeparator, {}),
 						/* @__PURE__ */ jsxs(CommandGroup, { children: [
@@ -196,10 +190,7 @@ const BlockActionsPopover = ({ block, children, open, onOpenChange, align = "sta
 								children: [/* @__PURE__ */ jsxs("div", {
 									className: "flex items-center gap-2",
 									children: [/* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" }), "Delete block"]
-								}), /* @__PURE__ */ jsx(CommandShortcut, { children: formatShortcut({
-									key: "Backspace",
-									withMeta: true
-								}) })]
+								}), /* @__PURE__ */ jsx(CommandShortcut, { children: formatShortcut("Mod+Backspace") })]
 							})
 						] })
 					] })
@@ -279,10 +270,7 @@ function useBlockActionsShortcuts() {
 					id: "delete-selected",
 					label: "Delete selected",
 					groupLabel: "Website",
-					shortcut: {
-						key: "Backspace",
-						withMeta: true
-					},
+					shortcut: "Mod+Backspace",
 					checkIfAvailable: () => {
 						const ctx = previewStore.getSnapshot().context;
 						if (ctx.view !== "canvas") return false;
@@ -320,10 +308,7 @@ function useBlockActionsShortcuts() {
 					id: "duplicate-selected",
 					label: "Duplicate selected",
 					groupLabel: "Website",
-					shortcut: {
-						key: "d",
-						withMeta: true
-					},
+					shortcut: "Mod+D",
 					checkIfAvailable: () => {
 						const ctx_0 = previewStore.getSnapshot().context;
 						if (ctx_0.view !== "canvas") return false;
@@ -348,10 +333,7 @@ function useBlockActionsShortcuts() {
 					id: "move-block-up",
 					label: "Move block up",
 					groupLabel: "Website",
-					shortcut: {
-						key: "ArrowUp",
-						withAlt: true
-					},
+					shortcut: "Alt+ArrowUp",
 					checkIfAvailable: () => {
 						const ctx_1 = previewStore.getSnapshot().context;
 						if (ctx_1.view !== "canvas") return false;
@@ -378,10 +360,7 @@ function useBlockActionsShortcuts() {
 					id: "move-block-down",
 					label: "Move block down",
 					groupLabel: "Website",
-					shortcut: {
-						key: "ArrowDown",
-						withAlt: true
-					},
+					shortcut: "Alt+ArrowDown",
 					checkIfAvailable: () => {
 						const ctx_2 = previewStore.getSnapshot().context;
 						if (ctx_2.view !== "canvas") return false;
@@ -409,7 +388,7 @@ function useBlockActionsShortcuts() {
 					id: "add-block-below",
 					label: "Add block below",
 					groupLabel: "Website",
-					shortcut: { key: "o" },
+					shortcut: "O",
 					checkIfAvailable: () => {
 						const ctx_3 = previewStore.getSnapshot().context;
 						if (ctx_3.view !== "canvas") return false;
@@ -430,10 +409,7 @@ function useBlockActionsShortcuts() {
 					id: "add-block-above",
 					label: "Add block above",
 					groupLabel: "Website",
-					shortcut: {
-						key: "o",
-						withShift: true
-					},
+					shortcut: "Shift+O",
 					checkIfAvailable: () => {
 						const ctx_4 = previewStore.getSnapshot().context;
 						if (ctx_4.view !== "canvas") return false;

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

@@ -7,9 +7,9 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
 import { Bold, Highlighter, Italic, Strikethrough } from "lucide-react";
-import { Kbd } from "@camox/ui/kbd";
 import { ButtonGroup } from "@camox/ui/button-group";
 import * as Tooltip$1 from "@camox/ui/tooltip";
+import { Kbd } from "@camox/ui/kbd";
 import { FloatingToolbar } from "@camox/ui/floating-toolbar";
 import { Toggle } from "@camox/ui/toggle";
 

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

@@ -1,6 +1,7 @@
-import { useAuthContext } from "../../../lib/auth.js";
-import { reads, useReadQuery } from "../../../lib/studio-reads.js";
+import { useNavigate } from "../../navigation/navigation.js";
 import { cn } from "../../../lib/utils.js";
+import { useLocalizedPath } from "../../../lib/view-locale.js";
+import { STUDIO_SETTINGS_PATH } from "../../studio/routes.js";
 import { previewStore, selectionBlockId, selectionForPage } from "../previewStore.js";
 import { UserButton } from "../../studio/components/UserButton.js";
 import { PageInfo, PageMarkdownContent, PageSeoContent } from "./PageInfo.js";
@@ -28,8 +29,8 @@ function MobilePreviewDrawer({ page, projectName }) {
 	const [isExpanded, setIsExpanded] = React.useState(false);
 	const [isDragging, setIsDragging] = React.useState(false);
 	const [screen, setScreen] = React.useState("root");
-	const authCtx = useAuthContext();
-	const { data: project } = useReadQuery(reads.project({ projectUuid: authCtx.projectUuid }));
+	const navigate = useNavigate();
+	const localized = useLocalizedPath();
 	const dragStartRef = React.useRef({
 		y: 0,
 		height: COLLAPSED_HEIGHT
@@ -200,11 +201,7 @@ function MobilePreviewDrawer({ page, projectName }) {
 								/* @__PURE__ */ jsx(DrawerTile, {
 									title: "Project settings",
 									icon: Settings,
-									onClick: () => {
-										if (!project) return;
-										window.open(`${authCtx.authenticationUrl}/${project.organizationSlug}/${project.slug}/overview`, "_blank", "noopener,noreferrer");
-									},
-									disabled: !project
+									onClick: () => void navigate({ to: localized("/camox/settings") })
 								})
 							]
 						})]

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

@@ -1,7 +1,6 @@
-import { actionsStore } from "../../provider/actionsStore.js";
 import { NavigationDisabled, NavigationLocation } from "../../navigation/navigation.js";
 import { ArtifactStudioContext } from "../../../core/hooks/useArtifactHost.js";
-import { checkIfInputFocused, cn } from "../../../lib/utils.js";
+import { cn } from "../../../lib/utils.js";
 import { previewStore } from "../previewStore.js";
 import { useEditingFrameClaim, useEditingOwner } from "../editingFrame.js";
 import { Frame, useFrame } from "./Frame.js";
@@ -10,6 +9,7 @@ import { EditableSurfaceContext } from "../../../core/hooks/useIsEditable.js";
 import { adoptCanvasDocument, pauseCanvasDocument } from "../../canvas/canvasFrameDocument.js";
 import { CanvasWorkspaceContext } from "../../canvas/canvasZoom.js";
 import { forwardCanvasWheel, useCanvasFrameInput } from "../../canvas/useCanvasFrameInput.js";
+import { useActionShortcuts } from "../../provider/useAdminShortcuts.js";
 import { PreviewEditingOwnerContext } from "../previewSelection.js";
 import { useBlockActionsShortcuts } from "./BlockActionsPopover.js";
 import { FieldOverlayStyles } from "./FieldOverlayStyles.js";
@@ -67,60 +67,9 @@ const PreviewFrameEffects = () => {
 	return t0;
 };
 const KeyDownForwarder = () => {
-	const $ = c(4);
 	const { window: iframeWindow } = useFrame();
-	const actions = useSelector(actionsStore, _temp);
-	let t0;
-	let t1;
-	if ($[0] !== actions || $[1] !== iframeWindow) {
-		t0 = () => {
-			if (!iframeWindow || !iframeWindow.parent || iframeWindow.parent === iframeWindow) return;
-			const handleKeyDown = (e) => {
-				const matchingAction = actions.find((action) => {
-					if (!action.shortcut) return false;
-					if (!action.checkIfAvailable()) return false;
-					if (checkIfInputFocused(iframeWindow.document)) {
-						if (action.shortcut.key !== "Escape" && !action.shortcut.withMeta && !action.shortcut.withAlt) return false;
-						if (action.shortcut.key === "Backspace") return false;
-					}
-					const { key, withMeta, withAlt, withShift } = action.shortcut;
-					return (withAlt && key.length === 1 && /[a-z]/i.test(key) ? e.code === `Key${key.toUpperCase()}` : key.toLowerCase() === e.key.toLowerCase()) && !!withMeta === (e.metaKey || e.ctrlKey) && !!withAlt === e.altKey && !!withShift === e.shiftKey;
-				});
-				if (matchingAction) {
-					e.preventDefault();
-					e.stopPropagation();
-					if (e.key === "Escape" && checkIfInputFocused(iframeWindow.document)) iframeWindow.document.activeElement.blur();
-					iframeWindow.parent.postMessage({
-						type: "executeAction",
-						actionId: matchingAction.id
-					}, "*");
-				}
-			};
-			const handleCapturedKeyDown = (event) => {
-				if (event.key === "Escape") return;
-				handleKeyDown(event);
-			};
-			const handleEscape = (event_0) => {
-				if (event_0.key !== "Escape" || event_0.defaultPrevented) return;
-				handleKeyDown(event_0);
-			};
-			iframeWindow.addEventListener("keydown", handleCapturedKeyDown, true);
-			iframeWindow.addEventListener("keydown", handleEscape);
-			return () => {
-				iframeWindow.removeEventListener("keydown", handleCapturedKeyDown, true);
-				iframeWindow.removeEventListener("keydown", handleEscape);
-			};
-		};
-		t1 = [iframeWindow, actions];
-		$[0] = actions;
-		$[1] = iframeWindow;
-		$[2] = t0;
-		$[3] = t1;
-	} else {
-		t0 = $[2];
-		t1 = $[3];
-	}
-	React.useEffect(t0, t1);
+	const inIframe = !!iframeWindow?.parent && iframeWindow.parent !== iframeWindow;
+	useActionShortcuts(inIframe ? iframeWindow : null);
 	return null;
 };
 /** The preview's read-only tree is never editable, whether or not the Canvas shows. */
@@ -227,7 +176,7 @@ function PreviewPageCanvasEffects(t0) {
 		t7 = () => {
 			const doc = root?.ownerDocument;
 			if (!doc || !onInteract) return;
-			const preventLinkNavigation = _temp2;
+			const preventLinkNavigation = _temp;
 			for (const type of [
 				"pointerdown",
 				"focusin",
@@ -304,7 +253,7 @@ function PreviewPageCanvasEffects(t0) {
 	} else t14 = $[29];
 	return t14;
 }
-function _temp2(event) {
+function _temp(event) {
 	if (event.target?.closest?.("a")) event.preventDefault();
 }
 const PreviewPanel = (t0) => {
@@ -349,8 +298,8 @@ const PreviewPanel = (t0) => {
 		$[9] = t7;
 	} else t7 = $[9];
 	React.useLayoutEffect(t6, t7);
-	const viewportMode = useSelector(previewStore, _temp3);
-	const isToolbarHidden = useSelector(previewStore, _temp4);
+	const viewportMode = useSelector(previewStore, _temp2);
+	const isToolbarHidden = useSelector(previewStore, _temp3);
 	const { frame, slot, inCanvas, revealed } = usePreviewPageFrame();
 	const placed = !isMobileExperience && inCanvas ? slot : null;
 	const underCanvas = revealed && !isMobileExperience;
@@ -709,13 +658,10 @@ function PreviewPageClip(t0) {
 	} else t10 = $[18];
 	return t10;
 }
-function _temp(state) {
-	return state.context.actions;
-}
-function _temp3(state) {
+function _temp2(state) {
 	return state.context.viewportMode;
 }
-function _temp4(state_0) {
+function _temp3(state_0) {
 	return state_0.context.isToolbarHidden;
 }
 

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

@@ -1,4 +1,4 @@
-import { formatShortcut } from "../../../lib/utils.js";
+import { formatShortcut } from "../../../lib/shortcuts.js";
 import { TOGGLE_CANVAS_SHORTCUT } from "../previewConstants.js";
 import { previewStore, selectIsCanvasShown } from "../previewStore.js";
 import { prefetchCanvas } from "./CanvasPreview.js";