camox 0.40.0 → 0.41.1

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

@@ -0,0 +1,78 @@
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/features/preview/components/PreviewActivation.tsx
+/** A replacement preview must load its document and commit before we reveal it. */
+const PreviewActivationContext = React.createContext(void 0);
+function PreviewActivation(t0) {
+	const $ = c(16);
+	if ($[0] !== "7173efcb0430a426f5e87095e95173285c836e918e936cfcdfbdaa6d172fdb6a") {
+		for (let $i = 0; $i < 16; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "7173efcb0430a426f5e87095e95173285c836e918e936cfcdfbdaa6d172fdb6a";
+	}
+	const { fallback, children } = t0;
+	const [ready, setReady] = React.useState(false);
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = () => setReady(true);
+		$[1] = t1;
+	} else t1 = $[1];
+	const activate = t1;
+	const t2 = ready ? void 0 : "hidden";
+	let t3;
+	if ($[2] !== t2) {
+		t3 = { visibility: t2 };
+		$[2] = t2;
+		$[3] = t3;
+	} else t3 = $[3];
+	const t4 = ready ? fallback : null;
+	let t5;
+	if ($[4] !== children || $[5] !== t4) {
+		t5 = /* @__PURE__ */ jsx(PreviewActivationContext.Provider, {
+			value: activate,
+			children: /* @__PURE__ */ jsx(React.Suspense, {
+				fallback: t4,
+				children
+			})
+		});
+		$[4] = children;
+		$[5] = t4;
+		$[6] = t5;
+	} else t5 = $[6];
+	let t6;
+	if ($[7] !== t3 || $[8] !== t5) {
+		t6 = /* @__PURE__ */ jsx("div", {
+			className: "flex min-h-0 flex-1 flex-col",
+			style: t3,
+			children: t5
+		});
+		$[7] = t3;
+		$[8] = t5;
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[10] !== fallback || $[11] !== ready) {
+		t7 = !ready && /* @__PURE__ */ jsx("div", {
+			className: "absolute inset-0",
+			children: fallback
+		});
+		$[10] = fallback;
+		$[11] = ready;
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== t6 || $[14] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("div", {
+			className: "relative flex min-h-0 flex-1 flex-col",
+			children: [t6, t7]
+		});
+		$[13] = t6;
+		$[14] = t7;
+		$[15] = t8;
+	} else t8 = $[15];
+	return t8;
+}
+
+//#endregion
+export { PreviewActivation, PreviewActivationContext };

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

@@ -1,6 +1,7 @@
 import { actionsStore } from "../../provider/actionsStore.js";
 import { checkIfInputFocused, cn } from "../../../lib/utils.js";
-import { previewStore } from "../previewStore.js";
+import { SharedChromeContext } from "../../runtime/SharedChromeContext.js";
+import { previewStore, selectIsEditMode } from "../previewStore.js";
 import { useBlockActionsShortcuts } from "./BlockActionsPopover.js";
 import { FieldOverlayStyles } from "./FieldOverlayStyles.js";
 import { FieldToolbar } from "./FieldToolbar.js";
@@ -18,9 +19,9 @@ import { PanelContent } from "@camox/ui/panel";
 //#region src/features/preview/components/PreviewPanel.tsx
 const PreviewFrame = (t0) => {
 	const $ = c(9);
-	if ($[0] !== "e11c3b34ca0f5fb034c9be15c118c7ca06abc87dbf81a94c0e4b32239a67ad26") {
+	if ($[0] !== "647d74b06c71c6ab8b55c8d5a27ecde77d7de427871f875c0c983ee0b4506ad2") {
 		for (let $i = 0; $i < 9; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "e11c3b34ca0f5fb034c9be15c118c7ca06abc87dbf81a94c0e4b32239a67ad26";
+		$[0] = "647d74b06c71c6ab8b55c8d5a27ecde77d7de427871f875c0c983ee0b4506ad2";
 	}
 	const { children, style, className, onIframeReady } = t0;
 	let t1;
@@ -61,9 +62,9 @@ const PreviewFrame = (t0) => {
 };
 const KeyDownForwarder = () => {
 	const $ = c(5);
-	if ($[0] !== "e11c3b34ca0f5fb034c9be15c118c7ca06abc87dbf81a94c0e4b32239a67ad26") {
+	if ($[0] !== "647d74b06c71c6ab8b55c8d5a27ecde77d7de427871f875c0c983ee0b4506ad2") {
 		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "e11c3b34ca0f5fb034c9be15c118c7ca06abc87dbf81a94c0e4b32239a67ad26";
+		$[0] = "647d74b06c71c6ab8b55c8d5a27ecde77d7de427871f875c0c983ee0b4506ad2";
 	}
 	const { window: iframeWindow } = useFrame();
 	const actions = useSelector(actionsStore, _temp);
@@ -85,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];
@@ -112,29 +114,37 @@ const viewportClassName = {
 	tablet: "h-[1024px] w-[768px] max-h-full max-w-full",
 	mobile: "h-175 w-[393px] max-h-full max-w-full"
 };
+function CuratedBlockShortcuts() {
+	const $ = c(1);
+	if ($[0] !== "647d74b06c71c6ab8b55c8d5a27ecde77d7de427871f875c0c983ee0b4506ad2") {
+		for (let $i = 0; $i < 1; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "647d74b06c71c6ab8b55c8d5a27ecde77d7de427871f875c0c983ee0b4506ad2";
+	}
+	useBlockActionsShortcuts();
+	return null;
+}
 const PreviewPanel = (t0) => {
-	const $ = c(17);
-	if ($[0] !== "e11c3b34ca0f5fb034c9be15c118c7ca06abc87dbf81a94c0e4b32239a67ad26") {
-		for (let $i = 0; $i < 17; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "e11c3b34ca0f5fb034c9be15c118c7ca06abc87dbf81a94c0e4b32239a67ad26";
+	const $ = c(26);
+	if ($[0] !== "647d74b06c71c6ab8b55c8d5a27ecde77d7de427871f875c0c983ee0b4506ad2") {
+		for (let $i = 0; $i < 26; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "647d74b06c71c6ab8b55c8d5a27ecde77d7de427871f875c0c983ee0b4506ad2";
 	}
 	const { children, isMobileExperience: t1, page, projectName: t2, toolbarProps } = t0;
 	const isMobileExperience = t1 === void 0 ? false : t1;
 	const projectName = t2 === void 0 ? "Project" : t2;
-	useBlockActionsShortcuts();
+	const sharedChrome = React.useContext(SharedChromeContext);
 	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) {
-		if (!page) return null;
 		let t4;
 		if ($[2] !== children) {
 			t4 = /* @__PURE__ */ jsx("div", {
@@ -149,31 +159,39 @@ const PreviewPanel = (t0) => {
 			$[3] = t4;
 		} else t4 = $[3];
 		let t5;
-		if ($[4] !== isToolbarHidden || $[5] !== page || $[6] !== projectName) {
-			t5 = !isToolbarHidden && /* @__PURE__ */ jsx(MobilePreviewDrawer, {
+		if ($[4] !== isToolbarHidden || $[5] !== page || $[6] !== projectName || $[7] !== sharedChrome || $[8] !== toolbarProps) {
+			t5 = !isToolbarHidden && (page ? /* @__PURE__ */ jsx(MobilePreviewDrawer, {
 				page,
 				projectName
-			});
+			}) : !sharedChrome && /* @__PURE__ */ jsx(PreviewToolbar, { ...toolbarProps }));
 			$[4] = isToolbarHidden;
 			$[5] = page;
 			$[6] = projectName;
-			$[7] = t5;
-		} else t5 = $[7];
+			$[7] = sharedChrome;
+			$[8] = toolbarProps;
+			$[9] = t5;
+		} else t5 = $[9];
 		let t6;
-		if ($[8] !== t4 || $[9] !== t5) {
+		if ($[10] !== t4 || $[11] !== t5) {
 			t6 = /* @__PURE__ */ jsxs(PanelContent, {
 				className: "flex min-h-0 flex-col overflow-hidden bg-black",
 				children: [t4, t5]
 			});
-			$[8] = t4;
-			$[9] = t5;
-			$[10] = t6;
-		} else t6 = $[10];
+			$[10] = t4;
+			$[11] = t5;
+			$[12] = t6;
+		} else t6 = $[12];
 		return t6;
 	}
 	let t4;
-	if ($[11] !== children || $[12] !== iframeElement || $[13] !== isEditMode || $[14] !== toolbarProps || $[15] !== viewportMode) {
-		t4 = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(PanelContent, {
+	if ($[13] !== page) {
+		t4 = page && /* @__PURE__ */ jsx(CuratedBlockShortcuts, {});
+		$[13] = page;
+		$[14] = t4;
+	} else t4 = $[14];
+	let t5;
+	if ($[15] !== children || $[16] !== iframeElement || $[17] !== isEditMode || $[18] !== page || $[19] !== sharedChrome || $[20] !== toolbarProps || $[21] !== viewportMode) {
+		t5 = /* @__PURE__ */ jsx(PanelContent, {
 			className: "relative overflow-hidden bg-black",
 			children: /* @__PURE__ */ jsx("div", {
 				className: "absolute inset-0",
@@ -183,9 +201,12 @@ const PreviewPanel = (t0) => {
 						onIframeReady: handleIframeReady,
 						children
 					}),
-					isEditMode && /* @__PURE__ */ jsx(Overlays, { iframeElement }),
+					isEditMode && /* @__PURE__ */ jsx(Overlays, {
+						iframeElement,
+						canAddBlocks: !!page
+					}),
 					isEditMode && /* @__PURE__ */ jsx(FieldToolbar, {}),
-					/* @__PURE__ */ jsx(PreviewToolbar, { ...toolbarProps })
+					!sharedChrome && /* @__PURE__ */ jsx(PreviewToolbar, { ...toolbarProps })
 				] }) : /* @__PURE__ */ jsxs("div", {
 					className: cn("checkered flex h-full justify-center", isEditMode ? "items-start" : "items-center"),
 					children: [
@@ -195,22 +216,34 @@ const PreviewPanel = (t0) => {
 								className: "overflow-auto",
 								onIframeReady: handleIframeReady,
 								children
-							}), isEditMode && /* @__PURE__ */ jsx(Overlays, { iframeElement })]
+							}), isEditMode && /* @__PURE__ */ jsx(Overlays, {
+								iframeElement,
+								canAddBlocks: !!page
+							})]
 						}),
 						isEditMode && /* @__PURE__ */ jsx(FieldToolbar, {}),
-						/* @__PURE__ */ jsx(PreviewToolbar, { ...toolbarProps })
+						!sharedChrome && /* @__PURE__ */ jsx(PreviewToolbar, { ...toolbarProps })
 					]
 				})
 			})
-		}) });
-		$[11] = children;
-		$[12] = iframeElement;
-		$[13] = isEditMode;
-		$[14] = toolbarProps;
-		$[15] = viewportMode;
-		$[16] = t4;
-	} else t4 = $[16];
-	return t4;
+		});
+		$[15] = children;
+		$[16] = iframeElement;
+		$[17] = isEditMode;
+		$[18] = page;
+		$[19] = sharedChrome;
+		$[20] = toolbarProps;
+		$[21] = viewportMode;
+		$[22] = t5;
+	} else t5 = $[22];
+	let t6;
+	if ($[23] !== t4 || $[24] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Fragment, { children: [t4, t5] });
+		$[23] = t4;
+		$[24] = t5;
+		$[25] = t6;
+	} else t6 = $[25];
+	return t6;
 };
 function _temp(state) {
 	return state.context.actions;
@@ -228,54 +261,51 @@ function _temp4(state_0) {
 	return state_0.context.viewportMode;
 }
 function _temp5(state_1) {
-	return state_1.context.isEditMode;
-}
-function _temp6(state_2) {
-	return state_2.context.isToolbarHidden;
+	return state_1.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",
@@ -286,8 +316,8 @@ function _temp16() {
 				"Device preview"
 			],
 			groupLabel: "Preview",
-			checkIfAvailable: _temp7,
-			execute: _temp8,
+			checkIfAvailable: _temp6,
+			execute: _temp7,
 			shortcut: { key: "m" }
 		},
 		{
@@ -299,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",
@@ -319,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" }
 		}
 	];
@@ -339,7 +369,7 @@ function _temp16() {
 	return () => {
 		actionsStore.send({
 			type: "unregisterManyActions",
-			ids: actions.map(_temp15)
+			ids: actions.map(_temp14)
 		});
 	};
 }