camox 0.32.0 → 0.33.0

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

@@ -1,8 +1,7 @@
-import { previewStore } from "../previewStore.js";
-import { useIsPreviewSheetOpen } from "./PreviewSideSheet.js";
 import { actionsStore } from "../../provider/actionsStore.js";
-import { checkIfInputFocused } from "../../../lib/utils.js";
+import { checkIfInputFocused, cn } from "../../../lib/utils.js";
 import { Frame, useFrame } from "./Frame.js";
+import { previewStore } from "../previewStore.js";
 import { useBlockActionsShortcuts } from "./BlockActionsPopover.js";
 import { FieldOverlayStyles } from "./FieldOverlayStyles.js";
 import { FieldToolbar } from "./FieldToolbar.js";
@@ -18,9 +17,9 @@ import { PanelContent } from "@camox/ui/panel";
 //#region src/features/preview/components/PreviewPanel.tsx
 const PreviewFrame = (t0) => {
 	const $ = c(9);
-	if ($[0] !== "a461a48603db73fa17ba8571e013d5de18c35d1f481b8ee66c35e485f2bdef70") {
+	if ($[0] !== "730f56a45d2b6c768058a961ac2ddb25f186cbd0a88cb4389cd59d3a0fda899d") {
 		for (let $i = 0; $i < 9; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "a461a48603db73fa17ba8571e013d5de18c35d1f481b8ee66c35e485f2bdef70";
+		$[0] = "730f56a45d2b6c768058a961ac2ddb25f186cbd0a88cb4389cd59d3a0fda899d";
 	}
 	const { children, style, className, onIframeReady } = t0;
 	let t1;
@@ -61,9 +60,9 @@ const PreviewFrame = (t0) => {
 };
 const KeyDownForwarder = () => {
 	const $ = c(5);
-	if ($[0] !== "a461a48603db73fa17ba8571e013d5de18c35d1f481b8ee66c35e485f2bdef70") {
+	if ($[0] !== "730f56a45d2b6c768058a961ac2ddb25f186cbd0a88cb4389cd59d3a0fda899d") {
 		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "a461a48603db73fa17ba8571e013d5de18c35d1f481b8ee66c35e485f2bdef70";
+		$[0] = "730f56a45d2b6c768058a961ac2ddb25f186cbd0a88cb4389cd59d3a0fda899d";
 	}
 	const { window: iframeWindow } = useFrame();
 	const actions = useSelector(actionsStore, _temp);
@@ -73,11 +72,6 @@ const KeyDownForwarder = () => {
 		t0 = () => {
 			if (!iframeWindow || !iframeWindow.parent || iframeWindow.parent === iframeWindow) return;
 			const handleKeyDown = (e) => {
-				if (e.key.toLowerCase() === "l" && !e.repeat && !checkIfInputFocused(iframeWindow.document)) {
-					e.preventDefault();
-					iframeWindow.parent.postMessage({ type: "holdLockContent" }, "*");
-					return;
-				}
 				const matchingAction = actions.find((action) => {
 					if (!action.shortcut) return false;
 					if (!action.checkIfAvailable()) return false;
@@ -96,14 +90,9 @@ const KeyDownForwarder = () => {
 					}, "*");
 				}
 			};
-			const handleKeyUp = (e_0) => {
-				if (e_0.key.toLowerCase() === "l") iframeWindow.parent.postMessage({ type: "releaseLockContent" }, "*");
-			};
 			iframeWindow.addEventListener("keydown", handleKeyDown);
-			iframeWindow.addEventListener("keyup", handleKeyUp);
 			return () => {
 				iframeWindow.removeEventListener("keydown", handleKeyDown);
-				iframeWindow.removeEventListener("keyup", handleKeyUp);
 			};
 		};
 		t1 = [iframeWindow, actions];
@@ -118,113 +107,68 @@ const KeyDownForwarder = () => {
 	React.useEffect(t0, t1);
 	return null;
 };
+const viewportClassName = {
+	tablet: "h-[1024px] w-[768px] max-h-full max-w-full",
+	mobile: "h-175 w-[393px] max-h-full max-w-full"
+};
 const PreviewPanel = (t0) => {
-	const $ = c(14);
-	if ($[0] !== "a461a48603db73fa17ba8571e013d5de18c35d1f481b8ee66c35e485f2bdef70") {
-		for (let $i = 0; $i < 14; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "a461a48603db73fa17ba8571e013d5de18c35d1f481b8ee66c35e485f2bdef70";
+	const $ = c(8);
+	if ($[0] !== "730f56a45d2b6c768058a961ac2ddb25f186cbd0a88cb4389cd59d3a0fda899d") {
+		for (let $i = 0; $i < 8; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "730f56a45d2b6c768058a961ac2ddb25f186cbd0a88cb4389cd59d3a0fda899d";
 	}
-	const { children } = t0;
+	const { children, toolbarProps } = t0;
 	useBlockActionsShortcuts();
 	const iframeElement = useSelector(previewStore, _temp2);
 	const handleIframeReady = _temp3;
-	const isMobileMode = useSelector(previewStore, _temp4);
-	const isAnySideSheetOpen = useIsPreviewSheetOpen();
-	const wrapperRef = React.useRef(null);
-	const [panelWidth, setPanelWidth] = React.useState(0);
-	const [panelLeft, setPanelLeft] = React.useState(0);
+	const viewportMode = useSelector(previewStore, _temp4);
+	const isEditMode = useSelector(previewStore, _temp5);
 	let t1;
-	let t2;
 	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = () => {
-			const el = wrapperRef.current?.parentElement;
-			if (!el) return;
-			const update = () => {
-				const rect = el.getBoundingClientRect();
-				setPanelWidth(rect.width);
-				setPanelLeft(rect.left);
-			};
-			update();
-			const observer = new ResizeObserver(update);
-			observer.observe(el);
-			return () => observer.disconnect();
-		};
-		t2 = [];
+		t1 = [];
 		$[1] = t1;
-		$[2] = t2;
-	} else {
-		t1 = $[1];
-		t2 = $[2];
-	}
-	React.useEffect(t1, t2);
-	const sheetOverlap = Math.max(0, 400 - panelLeft);
-	const sheetOpenScale = panelWidth > 0 ? (panelWidth - sheetOverlap) / panelWidth : 1;
-	let t3;
-	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: t5
-		};
-		$[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", {
-					className: "relative mt-8 h-175 w-[393px] overflow-hidden",
-					children: [/* @__PURE__ */ jsx(PreviewFrame, {
-						className: "overflow-auto",
-						onIframeReady: handleIframeReady,
-						children
-					}), /* @__PURE__ */ jsx(Overlays, { iframeElement })]
-				}),
-				/* @__PURE__ */ jsx(FieldToolbar, {}),
-				/* @__PURE__ */ jsx(PreviewToolbar, {})
-			]
-		}) : /* @__PURE__ */ jsxs(Fragment, { children: [
-			/* @__PURE__ */ jsx(PreviewFrame, {
-				className: "checkered h-full w-full",
-				onIframeReady: handleIframeReady,
-				children
-			}),
-			/* @__PURE__ */ jsx(Overlays, { iframeElement }),
-			/* @__PURE__ */ jsx(FieldToolbar, {}),
-			/* @__PURE__ */ jsx(PreviewToolbar, {})
-		] });
-		$[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, {
+	} else t1 = $[1];
+	React.useEffect(_temp17, t1);
+	let t2;
+	if ($[2] !== children || $[3] !== iframeElement || $[4] !== isEditMode || $[5] !== toolbarProps || $[6] !== viewportMode) {
+		t2 = /* @__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: t6,
-				children: t7
+				className: "absolute inset-0",
+				children: viewportMode === "full" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(PreviewFrame, {
+						className: "checkered h-full w-full",
+						onIframeReady: handleIframeReady,
+						children
+					}),
+					isEditMode && /* @__PURE__ */ jsx(Overlays, { iframeElement }),
+					isEditMode && /* @__PURE__ */ jsx(FieldToolbar, {}),
+					/* @__PURE__ */ jsx(PreviewToolbar, { ...toolbarProps })
+				] }) : /* @__PURE__ */ jsxs("div", {
+					className: cn("checkered flex h-full justify-center", isEditMode ? "items-start" : "items-center"),
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: cn("relative overflow-hidden", viewportClassName[viewportMode], isEditMode && "mt-8"),
+							children: [/* @__PURE__ */ jsx(PreviewFrame, {
+								className: "overflow-auto",
+								onIframeReady: handleIframeReady,
+								children
+							}), isEditMode && /* @__PURE__ */ jsx(Overlays, { iframeElement })]
+						}),
+						isEditMode && /* @__PURE__ */ jsx(FieldToolbar, {}),
+						/* @__PURE__ */ jsx(PreviewToolbar, { ...toolbarProps })
+					]
+				})
 			})
 		}) });
-		$[11] = t6;
-		$[12] = t7;
-		$[13] = t8;
-	} else t8 = $[13];
-	return t8;
+		$[2] = children;
+		$[3] = iframeElement;
+		$[4] = isEditMode;
+		$[5] = toolbarProps;
+		$[6] = viewportMode;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
 };
 function _temp(state) {
 	return state.context.actions;
@@ -239,85 +183,106 @@ function _temp3(element) {
 	});
 }
 function _temp4(state_0) {
-	return state_0.context.isMobileMode;
+	return state_0.context.viewportMode;
 }
-function _temp5() {
-	return true;
+function _temp5(state_1) {
+	return state_1.context.isEditMode;
 }
 function _temp6() {
-	return previewStore.send({ type: "toggleSidebar" });
+	return true;
 }
 function _temp7() {
-	return true;
+	return previewStore.send({ type: "cycleViewportMode" });
 }
 function _temp8() {
-	return previewStore.send({ type: "toggleLockContent" });
+	return true;
 }
 function _temp9() {
-	return true;
+	return previewStore.send({
+		type: "setViewportMode",
+		mode: "full"
+	});
 }
 function _temp0() {
-	return previewStore.send({ type: "toggleMobileMode" });
+	return true;
 }
 function _temp1() {
-	return true;
+	return previewStore.send({
+		type: "setViewportMode",
+		mode: "tablet"
+	});
 }
 function _temp10() {
-	const { isAgentChatSheetOpen } = previewStore.getSnapshot().context;
-	previewStore.send({ type: isAgentChatSheetOpen ? "closeAgentChatSheet" : "openAgentChatSheet" });
+	return true;
 }
 function _temp11() {
-	return true;
+	return previewStore.send({
+		type: "setViewportMode",
+		mode: "mobile"
+	});
 }
 function _temp12() {
+	return true;
+}
+function _temp13() {
+	const { isAgentChatSidebarOpen } = previewStore.getSnapshot().context;
+	previewStore.send({ type: isAgentChatSidebarOpen ? "closeAgentChatSidebar" : "openAgentChatSidebar" });
+}
+function _temp14() {
+	return true;
+}
+function _temp15() {
 	previewStore.send({ type: "clearSelection" });
 }
-function _temp13(a) {
+function _temp16(a) {
 	return a.id;
 }
-function _temp14() {
+function _temp17() {
 	const actions = [
 		{
-			id: "toggle-editing-panel",
-			label: "Toggle editing panel",
+			id: "cycle-viewport-mode",
+			label: "Cycle viewport mode",
 			aliases: [
-				"Sidebar",
-				"Toggle sidebar",
-				"Show sidebar",
-				"Hide sidebar"
+				"Responsive preview",
+				"Viewport preview",
+				"Device preview"
 			],
 			groupLabel: "Preview",
-			checkIfAvailable: _temp5,
-			execute: _temp6,
-			shortcut: {
-				key: "b",
-				withAlt: true
-			}
+			checkIfAvailable: _temp6,
+			execute: _temp7,
+			shortcut: { key: "m" }
 		},
 		{
-			id: "toggle-lock-content",
-			label: "Toggle lock content",
+			id: "set-viewport-full",
+			label: "Set full viewport",
 			aliases: [
-				"Lock editing",
-				"Unlock content",
-				"Lock page"
+				"Full preview",
+				"Desktop preview",
+				"Full width preview"
 			],
 			groupLabel: "Preview",
-			checkIfAvailable: _temp7,
-			execute: _temp8
+			checkIfAvailable: _temp8,
+			execute: _temp9
+		},
+		{
+			id: "set-viewport-tablet",
+			label: "Set tablet viewport",
+			aliases: ["Tablet preview", "Responsive preview"],
+			groupLabel: "Preview",
+			checkIfAvailable: _temp0,
+			execute: _temp1
 		},
 		{
-			id: "toggle-mobile-mode",
-			label: "Toggle mobile mode",
+			id: "set-viewport-mobile",
+			label: "Set mobile viewport",
 			aliases: [
 				"Mobile preview",
-				"Responsive preview",
-				"Phone preview"
+				"Phone preview",
+				"Responsive preview"
 			],
 			groupLabel: "Preview",
-			checkIfAvailable: _temp9,
-			execute: _temp0,
-			shortcut: { key: "m" }
+			checkIfAvailable: _temp10,
+			execute: _temp11
 		},
 		{
 			id: "toggle-agent-chat",
@@ -329,8 +294,8 @@ function _temp14() {
 				"Open chat"
 			],
 			groupLabel: "Preview",
-			checkIfAvailable: _temp1,
-			execute: _temp10,
+			checkIfAvailable: _temp12,
+			execute: _temp13,
 			shortcut: {
 				key: "i",
 				withAlt: true
@@ -341,8 +306,8 @@ function _temp14() {
 			label: "Clear selection",
 			aliases: ["Deselect", "Unselect"],
 			groupLabel: "Preview",
-			checkIfAvailable: _temp11,
-			execute: _temp12,
+			checkIfAvailable: _temp14,
+			execute: _temp15,
 			shortcut: { key: "Escape" }
 		}
 	];
@@ -353,10 +318,10 @@ function _temp14() {
 	return () => {
 		actionsStore.send({
 			type: "unregisterManyActions",
-			ids: actions.map(_temp13)
+			ids: actions.map(_temp16)
 		});
 	};
 }
 
 //#endregion
-export { PreviewFrame, PreviewPanel };
+export { PreviewPanel };