camox 0.41.0 → 0.41.1

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

@@ -1,7 +1,7 @@
 import { actionsStore } from "../../provider/actionsStore.js";
 import { checkIfInputFocused, cn } from "../../../lib/utils.js";
 import { SharedChromeContext } from "../../runtime/SharedChromeContext.js";
-import { previewStore } from "../previewStore.js";
+import { previewStore, selectIsEditMode } from "../previewStore.js";
 import { useBlockActionsShortcuts } from "./BlockActionsPopover.js";
 import { FieldOverlayStyles } from "./FieldOverlayStyles.js";
 import { FieldToolbar } from "./FieldToolbar.js";
@@ -19,9 +19,9 @@ import { PanelContent } from "@camox/ui/panel";
 //#region src/features/preview/components/PreviewPanel.tsx
 const PreviewFrame = (t0) => {
 	const $ = c(9);
-	if ($[0] !== "d1fef758f47859e4d6ac1a8436e009a46839990f032b83d1c6b20b946ff84297") {
+	if ($[0] !== "647d74b06c71c6ab8b55c8d5a27ecde77d7de427871f875c0c983ee0b4506ad2") {
 		for (let $i = 0; $i < 9; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "d1fef758f47859e4d6ac1a8436e009a46839990f032b83d1c6b20b946ff84297";
+		$[0] = "647d74b06c71c6ab8b55c8d5a27ecde77d7de427871f875c0c983ee0b4506ad2";
 	}
 	const { children, style, className, onIframeReady } = t0;
 	let t1;
@@ -62,9 +62,9 @@ const PreviewFrame = (t0) => {
 };
 const KeyDownForwarder = () => {
 	const $ = c(5);
-	if ($[0] !== "d1fef758f47859e4d6ac1a8436e009a46839990f032b83d1c6b20b946ff84297") {
+	if ($[0] !== "647d74b06c71c6ab8b55c8d5a27ecde77d7de427871f875c0c983ee0b4506ad2") {
 		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "d1fef758f47859e4d6ac1a8436e009a46839990f032b83d1c6b20b946ff84297";
+		$[0] = "647d74b06c71c6ab8b55c8d5a27ecde77d7de427871f875c0c983ee0b4506ad2";
 	}
 	const { window: iframeWindow } = useFrame();
 	const actions = useSelector(actionsStore, _temp);
@@ -86,15 +86,16 @@ const KeyDownForwarder = () => {
 				});
 				if (matchingAction) {
 					e.preventDefault();
+					e.stopPropagation();
 					iframeWindow.parent.postMessage({
 						type: "executeAction",
 						actionId: matchingAction.id
 					}, "*");
 				}
 			};
-			iframeWindow.addEventListener("keydown", handleKeyDown);
+			iframeWindow.addEventListener("keydown", handleKeyDown, true);
 			return () => {
-				iframeWindow.removeEventListener("keydown", handleKeyDown);
+				iframeWindow.removeEventListener("keydown", handleKeyDown, true);
 			};
 		};
 		t1 = [iframeWindow, actions];
@@ -115,18 +116,18 @@ const viewportClassName = {
 };
 function CuratedBlockShortcuts() {
 	const $ = c(1);
-	if ($[0] !== "d1fef758f47859e4d6ac1a8436e009a46839990f032b83d1c6b20b946ff84297") {
+	if ($[0] !== "647d74b06c71c6ab8b55c8d5a27ecde77d7de427871f875c0c983ee0b4506ad2") {
 		for (let $i = 0; $i < 1; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "d1fef758f47859e4d6ac1a8436e009a46839990f032b83d1c6b20b946ff84297";
+		$[0] = "647d74b06c71c6ab8b55c8d5a27ecde77d7de427871f875c0c983ee0b4506ad2";
 	}
 	useBlockActionsShortcuts();
 	return null;
 }
 const PreviewPanel = (t0) => {
 	const $ = c(26);
-	if ($[0] !== "d1fef758f47859e4d6ac1a8436e009a46839990f032b83d1c6b20b946ff84297") {
+	if ($[0] !== "647d74b06c71c6ab8b55c8d5a27ecde77d7de427871f875c0c983ee0b4506ad2") {
 		for (let $i = 0; $i < 26; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "d1fef758f47859e4d6ac1a8436e009a46839990f032b83d1c6b20b946ff84297";
+		$[0] = "647d74b06c71c6ab8b55c8d5a27ecde77d7de427871f875c0c983ee0b4506ad2";
 	}
 	const { children, isMobileExperience: t1, page, projectName: t2, toolbarProps } = t0;
 	const isMobileExperience = t1 === void 0 ? false : t1;
@@ -135,14 +136,14 @@ const PreviewPanel = (t0) => {
 	const iframeElement = useSelector(previewStore, _temp2);
 	const handleIframeReady = _temp3;
 	const viewportMode = useSelector(previewStore, _temp4);
-	const isEditMode = useSelector(previewStore, _temp5);
-	const isToolbarHidden = useSelector(previewStore, _temp6);
+	const isEditMode = useSelector(previewStore, selectIsEditMode);
+	const isToolbarHidden = useSelector(previewStore, _temp5);
 	let t3;
 	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
 		t3 = [];
 		$[1] = t3;
 	} else t3 = $[1];
-	React.useEffect(_temp16, t3);
+	React.useEffect(_temp15, t3);
 	if (isMobileExperience) {
 		let t4;
 		if ($[2] !== children) {
@@ -260,54 +261,51 @@ function _temp4(state_0) {
 	return state_0.context.viewportMode;
 }
 function _temp5(state_1) {
-	return state_1.context.isEditMode;
+	return state_1.context.isToolbarHidden;
 }
-function _temp6(state_2) {
-	return state_2.context.isToolbarHidden;
-}
-function _temp7() {
+function _temp6() {
 	return true;
 }
-function _temp8() {
+function _temp7() {
 	return previewStore.send({ type: "cycleViewportMode" });
 }
-function _temp9() {
+function _temp8() {
 	return true;
 }
-function _temp0() {
+function _temp9() {
 	return previewStore.send({
 		type: "setViewportMode",
 		mode: "full"
 	});
 }
-function _temp1() {
+function _temp0() {
 	return true;
 }
-function _temp10() {
+function _temp1() {
 	return previewStore.send({
 		type: "setViewportMode",
 		mode: "tablet"
 	});
 }
-function _temp11() {
+function _temp10() {
 	return true;
 }
-function _temp12() {
+function _temp11() {
 	return previewStore.send({
 		type: "setViewportMode",
 		mode: "mobile"
 	});
 }
-function _temp13() {
+function _temp12() {
 	return true;
 }
-function _temp14() {
+function _temp13() {
 	previewStore.send({ type: "clearSelection" });
 }
-function _temp15(a) {
+function _temp14(a) {
 	return a.id;
 }
-function _temp16() {
+function _temp15() {
 	const actions = [
 		{
 			id: "cycle-viewport-mode",
@@ -318,8 +316,8 @@ function _temp16() {
 				"Device preview"
 			],
 			groupLabel: "Preview",
-			checkIfAvailable: _temp7,
-			execute: _temp8,
+			checkIfAvailable: _temp6,
+			execute: _temp7,
 			shortcut: { key: "m" }
 		},
 		{
@@ -331,16 +329,16 @@ function _temp16() {
 				"Full width preview"
 			],
 			groupLabel: "Preview",
-			checkIfAvailable: _temp9,
-			execute: _temp0
+			checkIfAvailable: _temp8,
+			execute: _temp9
 		},
 		{
 			id: "set-viewport-tablet",
 			label: "Set tablet viewport",
 			aliases: ["Tablet preview", "Responsive preview"],
 			groupLabel: "Preview",
-			checkIfAvailable: _temp1,
-			execute: _temp10
+			checkIfAvailable: _temp0,
+			execute: _temp1
 		},
 		{
 			id: "set-viewport-mobile",
@@ -351,16 +349,16 @@ function _temp16() {
 				"Responsive preview"
 			],
 			groupLabel: "Preview",
-			checkIfAvailable: _temp11,
-			execute: _temp12
+			checkIfAvailable: _temp10,
+			execute: _temp11
 		},
 		{
 			id: "clear-selection",
 			label: "Clear selection",
 			aliases: ["Deselect", "Unselect"],
 			groupLabel: "Preview",
-			checkIfAvailable: _temp13,
-			execute: _temp14,
+			checkIfAvailable: _temp12,
+			execute: _temp13,
 			shortcut: { key: "Escape" }
 		}
 	];
@@ -371,7 +369,7 @@ function _temp16() {
 	return () => {
 		actionsStore.send({
 			type: "unregisterManyActions",
-			ids: actions.map(_temp15)
+			ids: actions.map(_temp14)
 		});
 	};
 }

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

@@ -1,5 +1,5 @@
 import { formatShortcut } from "../../../lib/utils.js";
-import { previewStore } from "../previewStore.js";
+import { previewStore, selectIsEditMode } from "../previewStore.js";
 import { EDIT_MODE_SHORTCUT } from "../previewConstants.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -16,15 +16,15 @@ import { Toggle } from "@camox/ui/toggle";
 //#region src/features/preview/components/PreviewToolbar.tsx
 const PreviewToolbar = (t0) => {
 	const $ = c(69);
-	if ($[0] !== "28b5aba454e9e27b527d788b0a718f0f7279d24fb295ca9356bcc28d27dd3df0") {
+	if ($[0] !== "fb98dbcd5b77e1b92293b563eda01ddd23323e31658e31434745ec2447418130") {
 		for (let $i = 0; $i < 69; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "28b5aba454e9e27b527d788b0a718f0f7279d24fb295ca9356bcc28d27dd3df0";
+		$[0] = "fb98dbcd5b77e1b92293b563eda01ddd23323e31658e31434745ec2447418130";
 	}
 	const { onEditModeChange, pageStatus, hasLiveVersion } = t0;
-	const isEditMode = useSelector(previewStore, _temp);
-	const isToolbarHidden = useSelector(previewStore, _temp2);
-	const peekedBlock = useSelector(previewStore, _temp3);
-	const viewportMode = useSelector(previewStore, _temp4);
+	const isEditMode = useSelector(previewStore, selectIsEditMode);
+	const isToolbarHidden = useSelector(previewStore, _temp);
+	const peekedBlock = useSelector(previewStore, _temp2);
+	const viewportMode = useSelector(previewStore, _temp3);
 	if (isToolbarHidden || peekedBlock) return null;
 	let t1;
 	if ($[1] !== onEditModeChange) {
@@ -241,8 +241,8 @@ const PreviewToolbar = (t0) => {
 			type: "button",
 			variant: "outline",
 			disabled: pageStatus === "published" || !hasLiveVersion,
-			onClick: _temp5,
-			children: "View published page"
+			onClick: _temp4,
+			children: "View live page"
 		});
 		$[49] = hasLiveVersion;
 		$[50] = pageStatus;
@@ -255,7 +255,7 @@ const PreviewToolbar = (t0) => {
 			variant: "ghost",
 			size: "icon",
 			disabled: isEditMode,
-			onClick: _temp6,
+			onClick: _temp5,
 			"aria-label": "Hide toolbar",
 			className: "text-muted-foreground"
 		});
@@ -320,21 +320,18 @@ const PreviewToolbar = (t0) => {
 	return t38;
 };
 function _temp(state) {
-	return state.context.isEditMode;
+	return state.context.isToolbarHidden;
 }
 function _temp2(state_0) {
-	return state_0.context.isToolbarHidden;
+	return state_0.context.peekedBlock;
 }
 function _temp3(state_1) {
-	return state_1.context.peekedBlock;
-}
-function _temp4(state_2) {
-	return state_2.context.viewportMode;
+	return state_1.context.viewportMode;
 }
-function _temp5() {
+function _temp4() {
 	return previewStore.send({ type: "viewLivePage" });
 }
-function _temp6() {
+function _temp5() {
 	return previewStore.send({ type: "hideToolbar" });
 }
 

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

@@ -0,0 +1,43 @@
+import { useFrame } from "./Frame.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/features/preview/components/PreviewToolbarSpacer.tsx
+/** Reserve scroll space without painting the site's document background over it. */
+function PreviewToolbarSpacer() {
+	const { window: frameWindow, iframeElement } = useFrame();
+	const spacerRef = React.useRef(null);
+	React.useLayoutEffect(() => {
+		const spacer = spacerRef.current;
+		if (!frameWindow || !iframeElement || !spacer) return;
+		const previousClipPath = iframeElement.style.clipPath;
+		const updateClip = () => {
+			const { top, height } = spacer.getBoundingClientRect();
+			const visibleHeight = Math.max(0, Math.min(height, frameWindow.innerHeight - top));
+			iframeElement.style.clipPath = `inset(0 0 ${visibleHeight}px 0)`;
+		};
+		const observer = new ResizeObserver(updateClip);
+		observer.observe(frameWindow.document.documentElement);
+		observer.observe(spacer.parentElement);
+		frameWindow.addEventListener("scroll", updateClip);
+		frameWindow.addEventListener("resize", updateClip);
+		updateClip();
+		return () => {
+			observer.disconnect();
+			frameWindow.removeEventListener("scroll", updateClip);
+			frameWindow.removeEventListener("resize", updateClip);
+			iframeElement.style.clipPath = previousClipPath;
+		};
+	}, [frameWindow, iframeElement]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: spacerRef,
+		"aria-hidden": true,
+		style: {
+			height: 80,
+			flexShrink: 0
+		}
+	});
+}
+
+//#endregion
+export { PreviewToolbarSpacer };

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

@@ -1,7 +1,7 @@
 import { actionsStore } from "../../provider/actionsStore.js";
 import { getApiClient } from "../../../lib/api-client.js";
 import { trackClientEvent } from "../../../lib/telemetry-client.js";
-import { previewStore } from "../previewStore.js";
+import { previewStore, selectPreviewSource } from "../previewStore.js";
 import { buildPublicationPlan, getPublicationCapabilities, getPublicationRequest } from "../publication.js";
 import { PublishDialog } from "./PublishDialog.js";
 import { c } from "react/compiler-runtime";
@@ -20,9 +20,9 @@ import { ButtonGroup } from "@camox/ui/button-group";
 //#region src/features/preview/components/PublicationRow.tsx
 function PublicationRow(t0) {
 	const $ = c(4);
-	if ($[0] !== "bef0702fd89aac7465952e09d43979741129da566cd392625f8739ebc2b0b2f9") {
+	if ($[0] !== "21f8ad447322b8ca3d57008039e0bedc782b582388e82eacae91c1f0ad25aee6") {
 		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "bef0702fd89aac7465952e09d43979741129da566cd392625f8739ebc2b0b2f9";
+		$[0] = "21f8ad447322b8ca3d57008039e0bedc782b582388e82eacae91c1f0ad25aee6";
 	}
 	const { target } = t0;
 	const identity = target ? `${target.kind}:${target.kind === "page" ? target.page.id : target.layout.id}` : "loading";
@@ -37,12 +37,12 @@ function PublicationRow(t0) {
 }
 function PublicationControls(t0) {
 	const $ = c(78);
-	if ($[0] !== "bef0702fd89aac7465952e09d43979741129da566cd392625f8739ebc2b0b2f9") {
+	if ($[0] !== "21f8ad447322b8ca3d57008039e0bedc782b582388e82eacae91c1f0ad25aee6") {
 		for (let $i = 0; $i < 78; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "bef0702fd89aac7465952e09d43979741129da566cd392625f8739ebc2b0b2f9";
+		$[0] = "21f8ad447322b8ca3d57008039e0bedc782b582388e82eacae91c1f0ad25aee6";
 	}
 	const { target } = t0;
-	const source = useSelector(previewStore, _temp);
+	const source = useSelector(previewStore, selectPreviewSource);
 	const queryClient = useQueryClient();
 	const [action, setAction] = React.useState(null);
 	let t1;
@@ -100,10 +100,7 @@ function PublicationControls(t0) {
 	if ($[9] !== queryClient) {
 		t4 = async (_, t5) => {
 			const { operation: operation_0 } = t5;
-			if (operation_0 !== "publish") previewStore.send({
-				type: "setPreviewSource",
-				source: "draft"
-			});
+			if (operation_0 !== "publish") previewStore.send({ type: "viewDraftPage" });
 			setAction(null);
 			toast.success(operation_0 === "publish" ? "Published selected changes" : operation_0 === "unpublish" ? "Unpublished successfully" : "Discarded draft changes");
 			await Promise.all([
@@ -130,7 +127,7 @@ function PublicationControls(t0) {
 		t5 = {
 			mutationFn: t3,
 			onSuccess: t4,
-			onError: _temp2
+			onError: _temp
 		};
 		$[11] = t3;
 		$[12] = t4;
@@ -180,7 +177,7 @@ function PublicationControls(t0) {
 			});
 			return () => actionsStore.send({
 				type: "unregisterManyActions",
-				ids: actions.map(_temp3)
+				ids: actions.map(_temp2)
 			});
 		};
 		t7 = [
@@ -417,15 +414,12 @@ function PublicationControls(t0) {
 	} else t33 = $[77];
 	return t33;
 }
-function _temp3(item) {
+function _temp2(item) {
 	return item.id;
 }
-function _temp2() {
+function _temp() {
 	return toast.error("Could not complete this action. Please try again.");
 }
-function _temp(state) {
-	return state.context.previewSource;
-}
 
 //#endregion
 export { PublicationRow };

package/dist/features/preview/previewStore.js

@@ -22,43 +22,43 @@ function selectionField(sel) {
 	};
 	return null;
 }
+const selectIsEditMode = (state) => state.context.mode === "editing-draft";
+const selectPreviewSource = (state) => state.context.mode === "previewing-live" ? "live" : "draft";
 const previewStore = createStore({
 	context: {
-		isEditMode: false,
+		mode: "previewing-draft",
 		isToolbarHidden: false,
 		isPageEditorSidebarOpen: false,
 		isAddBlockSidebarOpen: false,
 		addBlockSource: null,
 		isCreatePageModalOpen: false,
 		editingPageId: null,
-		isDraftSwitchDialogOpen: false,
 		viewportMode: "full",
 		peekedBlock: null,
 		peekedBlockPosition: null,
 		skipPeekedBlockExitAnimation: false,
 		selection: null,
-		iframeElement: null,
-		previewSource: "draft"
+		iframeElement: null
 	},
 	on: {
 		exitEditMode: (context, _, enqueue) => {
-			if (!context.isEditMode) return context;
+			if (context.mode !== "editing-draft") return context;
 			enqueue.effect(() => {
 				trackClientEvent("edit_mode_toggled", { enabled: false });
 			});
 			return {
 				...context,
-				isEditMode: false
+				mode: "previewing-draft"
 			};
 		},
 		enterEditMode: (context, _, enqueue) => {
-			if (context.isEditMode) return context;
+			if (context.mode === "editing-draft") return context;
 			enqueue.effect(() => {
 				trackClientEvent("edit_mode_toggled", { enabled: true });
 			});
 			return {
 				...context,
-				isEditMode: true,
+				mode: "editing-draft",
 				isToolbarHidden: false
 			};
 		},
@@ -68,14 +68,13 @@ const previewStore = createStore({
 		}),
 		viewLivePage: (context, _, enqueue) => {
 			enqueue.effect(() => {
-				if (context.isEditMode) trackClientEvent("edit_mode_toggled", { enabled: false });
+				if (context.mode === "editing-draft") trackClientEvent("edit_mode_toggled", { enabled: false });
 				toast("Viewing live version of the site");
 			});
 			return {
 				...context,
-				isEditMode: false,
-				isToolbarHidden: true,
-				previewSource: "live"
+				mode: "previewing-live",
+				isToolbarHidden: true
 			};
 		},
 		setViewportMode: (context, event) => {
@@ -255,29 +254,19 @@ const previewStore = createStore({
 			...context,
 			iframeElement: event.element
 		}),
-		setPreviewSource: (context, event, enqueue) => {
-			if (event.source === context.previewSource) return context;
+		viewDraftPage: (context, _, enqueue) => {
+			if (context.mode !== "previewing-live") return context;
 			enqueue.effect(() => {
-				toast(event.source === "draft" ? "Previewing draft content" : "Previewing live content", { duration: 2500 });
+				toast("Previewing draft content", { duration: 2500 });
 			});
 			return {
 				...context,
-				previewSource: event.source
-			};
-		},
-		requestDraftSwitch: (context) => {
-			if (context.previewSource === "draft") return context;
-			return {
-				...context,
-				isDraftSwitchDialogOpen: true
+				mode: "previewing-draft",
+				isToolbarHidden: false
 			};
-		},
-		dismissDraftSwitch: (context) => ({
-			...context,
-			isDraftSwitchDialogOpen: false
-		})
+		}
 	}
 });
 
 //#endregion
-export { previewStore, selectionBlockId, selectionField, selectionItemId };
+export { previewStore, selectIsEditMode, selectPreviewSource, selectionBlockId, selectionField, selectionItemId };

package/dist/features/provider/useAdminShortcuts.js

@@ -10,9 +10,9 @@ import { useSelector } from "@xstate/store-react";
 */
 function useAdminShortcuts() {
 	const $ = c(4);
-	if ($[0] !== "e5d3a4bbb325cbcce579826abdfc85cc9e0df725cd31dd3b6fd2c699d88a926c") {
+	if ($[0] !== "0255d4249a070c82da3a967d899d13f2ef37b37575822c7a0d008029181a2db4") {
 		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "e5d3a4bbb325cbcce579826abdfc85cc9e0df725cd31dd3b6fd2c699d88a926c";
+		$[0] = "0255d4249a070c82da3a967d899d13f2ef37b37575822c7a0d008029181a2db4";
 	}
 	const actions = useSelector(actionsStore, _temp);
 	let t0;
@@ -33,6 +33,7 @@ function useAdminShortcuts() {
 					if (shortcut.key === "Backspace") return;
 				}
 				event.preventDefault();
+				event.stopPropagation();
 				matchingAction.execute();
 			};
 			const handleMessage = (event_0) => {
@@ -42,10 +43,10 @@ function useAdminShortcuts() {
 					if (action_0) action_0.execute();
 				}
 			};
-			document.addEventListener("keydown", handleKeyDown);
+			document.addEventListener("keydown", handleKeyDown, true);
 			window.addEventListener("message", handleMessage);
 			return () => {
-				document.removeEventListener("keydown", handleKeyDown);
+				document.removeEventListener("keydown", handleKeyDown, true);
 				window.removeEventListener("message", handleMessage);
 			};
 		};