camox 0.3.0 → 0.4.0

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

@@ -7,182 +7,305 @@ import { Overlays } from "./Overlays.js";
 import { OverlayTracker } from "./OverlayTracker.js";
 import { PreviewToolbar } from "./PreviewToolbar.js";
 import { TextFormatToolbar } from "./TextFormatToolbar.js";
+import { c } from "react/compiler-runtime";
 import { Frame, useFrame } from "@camox/ui/frame";
 import { useSelector } from "@xstate/store/react";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { PanelContent } from "@camox/ui/panel";
 //#region src/features/preview/components/PreviewPanel.tsx
-var PreviewFrame = ({ children, style, className, onIframeReady }) => {
-	return /* @__PURE__ */ jsxs(Frame, {
-		className,
-		style,
-		onIframeReady,
-		children: [
-			children,
-			/* @__PURE__ */ jsx(KeyDownForwarder, {}),
-			/* @__PURE__ */ jsx(OverlayTracker, {})
-		]
-	});
+var PreviewFrame = (t0) => {
+	const $ = c(7);
+	const { children, style, className, onIframeReady } = t0;
+	let t1;
+	let t2;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(KeyDownForwarder, {});
+		t2 = /* @__PURE__ */ jsx(OverlayTracker, {});
+		$[0] = t1;
+		$[1] = t2;
+	} else {
+		t1 = $[0];
+		t2 = $[1];
+	}
+	let t3;
+	if ($[2] !== children || $[3] !== className || $[4] !== onIframeReady || $[5] !== style) {
+		t3 = /* @__PURE__ */ jsxs(Frame, {
+			className,
+			style,
+			onIframeReady,
+			children: [
+				children,
+				t1,
+				t2
+			]
+		});
+		$[2] = children;
+		$[3] = className;
+		$[4] = onIframeReady;
+		$[5] = style;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
 };
 var KeyDownForwarder = () => {
+	const $ = c(4);
 	const { window: iframeWindow } = useFrame();
-	const actions = useSelector(actionsStore, (state) => state.context.actions);
-	React.useEffect(() => {
-		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;
-				if (checkIfInputFocused(iframeWindow.document)) {
-					if (!action.shortcut.withMeta && !action.shortcut.withAlt) return false;
-					if (action.shortcut.key === "Backspace") return false;
+	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) => {
+				if (e.key.toLowerCase() === "l" && !e.repeat && !checkIfInputFocused(iframeWindow.document)) {
+					e.preventDefault();
+					iframeWindow.parent.postMessage({ type: "holdLockContent" }, "*");
+					return;
 				}
-				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();
-				iframeWindow.parent.postMessage({
-					type: "executeAction",
-					actionId: matchingAction.id
-				}, "*");
-			}
-		};
-		const handleKeyUp = (e) => {
-			if (e.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);
+				const matchingAction = actions.find((action) => {
+					if (!action.shortcut) return false;
+					if (!action.checkIfAvailable()) return false;
+					if (checkIfInputFocused(iframeWindow.document)) {
+						if (!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();
+					iframeWindow.parent.postMessage({
+						type: "executeAction",
+						actionId: matchingAction.id
+					}, "*");
+				}
+			};
+			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);
+			};
 		};
-	}, [iframeWindow, actions]);
+		t1 = [iframeWindow, actions];
+		$[0] = actions;
+		$[1] = iframeWindow;
+		$[2] = t0;
+		$[3] = t1;
+	} else {
+		t0 = $[2];
+		t1 = $[3];
+	}
+	React.useEffect(t0, t1);
 	return null;
 };
-var PreviewPanel = ({ children }) => {
+var PreviewPanel = (t0) => {
+	const $ = c(15);
+	const { children } = t0;
 	useBlockActionsShortcuts();
-	const iframeElement = useSelector(previewStore, (state) => state.context.iframeElement);
-	const handleIframeReady = React.useCallback((element) => {
-		previewStore.send({
-			type: "setIframeElement",
-			element
-		});
-	}, []);
-	const isMobileMode = useSelector(previewStore, (state) => state.context.isMobileMode);
-	const isAgentChatSheetOpen = useSelector(previewStore, (state) => state.context.isAgentChatSheetOpen);
+	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);
 	const [panelLeft, setPanelLeft] = React.useState(0);
-	React.useEffect(() => {
-		const el = wrapperRef.current?.parentElement;
-		if (!el) return;
-		const update = () => {
-			const rect = el.getBoundingClientRect();
-			setPanelWidth(rect.width);
-			setPanelLeft(rect.left);
+	let t1;
+	let t2;
+	if ($[0] === 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();
 		};
-		update();
-		const observer = new ResizeObserver(update);
-		observer.observe(el);
-		return () => observer.disconnect();
-	}, []);
+		t2 = [];
+		$[0] = t1;
+		$[1] = t2;
+	} else {
+		t1 = $[0];
+		t2 = $[1];
+	}
+	React.useEffect(t1, t2);
 	const sheetOverlap = Math.max(0, 400 - panelLeft);
 	const sheetOpenScale = panelWidth > 0 ? (panelWidth - sheetOverlap) / panelWidth : 1;
-	React.useEffect(() => {
-		const actions = [
-			{
-				id: "toggle-editing-panel",
-				label: "Toggle editing panel",
-				groupLabel: "Preview",
-				checkIfAvailable: () => true,
-				execute: () => previewStore.send({ type: "toggleSidebar" }),
-				shortcut: {
-					key: "b",
-					withAlt: true
-				}
-			},
-			{
-				id: "toggle-lock-content",
-				label: "Toggle lock content",
-				groupLabel: "Preview",
-				checkIfAvailable: () => true,
-				execute: () => previewStore.send({ type: "toggleLockContent" })
-			},
-			{
-				id: "toggle-mobile-mode",
-				label: "Toggle mobile mode",
-				groupLabel: "Preview",
-				checkIfAvailable: () => true,
-				execute: () => previewStore.send({ type: "toggleMobileMode" }),
-				shortcut: { key: "m" }
-			},
-			{
-				id: "open-agent-chat",
-				label: "Ask for changes",
-				groupLabel: "Preview",
-				checkIfAvailable: () => !isAgentChatSheetOpen,
-				execute: () => previewStore.send({ type: "openAgentChatSheet" }),
-				shortcut: {
-					key: "i",
-					withAlt: true
+	let t3;
+	let t4;
+	if ($[2] !== 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
+					}
 				}
-			}
-		];
-		actionsStore.send({
-			type: "registerManyActions",
-			actions
-		});
-		return () => {
+			];
 			actionsStore.send({
-				type: "unregisterManyActions",
-				ids: actions.map((a) => a.id)
+				type: "registerManyActions",
+				actions
 			});
+			return () => {
+				actionsStore.send({
+					type: "unregisterManyActions",
+					ids: actions.map(_temp11)
+				});
+			};
 		};
-	}, [isAgentChatSheetOpen]);
-	return /* @__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: {
-				height: isAnySideSheetOpen ? `${100 / sheetOpenScale}%` : "100%",
-				transformOrigin: "top right",
-				transform: isAnySideSheetOpen ? `scale(${sheetOpenScale})` : "scale(1)"
-			},
-			children: isMobileMode ? /* @__PURE__ */ jsxs("div", {
-				className: "checkered flex h-full justify-center",
-				children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: "relative mt-8 h-[700px] w-[393px] overflow-hidden",
-						children: [/* @__PURE__ */ jsx(PreviewFrame, {
-							className: "overflow-auto",
-							onIframeReady: handleIframeReady,
-							children
-						}), /* @__PURE__ */ jsx(Overlays, { iframeElement })]
-					}),
-					/* @__PURE__ */ jsx(TextFormatToolbar, {}),
-					/* @__PURE__ */ jsx(PreviewToolbar, {})
-				]
-			}) : /* @__PURE__ */ jsxs(Fragment, { children: [
-				/* @__PURE__ */ jsx(PreviewFrame, {
-					className: "checkered h-full w-full",
-					onIframeReady: handleIframeReady,
-					children
+		t4 = [isAgentChatSheetOpen];
+		$[2] = isAgentChatSheetOpen;
+		$[3] = t3;
+		$[4] = t4;
+	} else {
+		t3 = $[3];
+		t4 = $[4];
+	}
+	React.useEffect(t3, t4);
+	const t5 = isAnySideSheetOpen ? `${100 / sheetOpenScale}%` : "100%";
+	const t6 = isAnySideSheetOpen ? `scale(${sheetOpenScale})` : "scale(1)";
+	let t7;
+	if ($[5] !== t5 || $[6] !== t6) {
+		t7 = {
+			height: t5,
+			transformOrigin: "top right",
+			transform: t6
+		};
+		$[5] = t5;
+		$[6] = t6;
+		$[7] = t7;
+	} else t7 = $[7];
+	let t8;
+	if ($[8] !== children || $[9] !== iframeElement || $[10] !== isMobileMode) {
+		t8 = isMobileMode ? /* @__PURE__ */ jsxs("div", {
+			className: "checkered flex h-full justify-center",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "relative mt-8 h-[700px] w-[393px] overflow-hidden",
+					children: [/* @__PURE__ */ jsx(PreviewFrame, {
+						className: "overflow-auto",
+						onIframeReady: handleIframeReady,
+						children
+					}), /* @__PURE__ */ jsx(Overlays, { iframeElement })]
 				}),
-				/* @__PURE__ */ jsx(Overlays, { iframeElement }),
 				/* @__PURE__ */ jsx(TextFormatToolbar, {}),
 				/* @__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(TextFormatToolbar, {}),
+			/* @__PURE__ */ jsx(PreviewToolbar, {})
+		] });
+		$[8] = children;
+		$[9] = iframeElement;
+		$[10] = isMobileMode;
+		$[11] = t8;
+	} else t8 = $[11];
+	let t9;
+	if ($[12] !== t7 || $[13] !== t8) {
+		t9 = /* @__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
+			})
+		}) });
+		$[12] = t7;
+		$[13] = t8;
+		$[14] = t9;
+	} else t9 = $[14];
+	return t9;
 };
+function _temp(state) {
+	return state.context.actions;
+}
+function _temp2(state) {
+	return state.context.iframeElement;
+}
+function _temp3(element) {
+	previewStore.send({
+		type: "setIframeElement",
+		element
+	});
+}
+function _temp4(state_0) {
+	return state_0.context.isMobileMode;
+}
+function _temp5(state_1) {
+	return state_1.context.isAgentChatSheetOpen;
+}
+function _temp6() {
+	return true;
+}
+function _temp7() {
+	return previewStore.send({ type: "toggleSidebar" });
+}
+function _temp8() {
+	return true;
+}
+function _temp9() {
+	return previewStore.send({ type: "toggleLockContent" });
+}
+function _temp0() {
+	return true;
+}
+function _temp1() {
+	return previewStore.send({ type: "toggleMobileMode" });
+}
+function _temp10() {
+	return previewStore.send({ type: "openAgentChatSheet" });
+}
+function _temp11(a) {
+	return a.id;
+}
 //#endregion
 export { PreviewFrame, PreviewPanel };

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

@@ -1,28 +1,61 @@
 import { previewStore } from "../previewStore.js";
+import { c } from "react/compiler-runtime";
 import { useSelector } from "@xstate/store/react";
 import "react";
 import * as Sheet from "@camox/ui/sheet";
 import { jsx } from "react/jsx-runtime";
 //#region src/features/preview/components/PreviewSideSheet.tsx
-var PreviewSideSheet = ({ open, onOpenChange, onOpenAutoFocus, children, className }) => {
-	return /* @__PURE__ */ jsx(Sheet.Sheet, {
-		open,
-		onOpenChange,
-		children: /* @__PURE__ */ jsx(Sheet.SheetContent, {
+var PreviewSideSheet = (t0) => {
+	const $ = c(9);
+	const { open, onOpenChange, onOpenAutoFocus, children, className } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = { minWidth: 400 };
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== children || $[2] !== className || $[3] !== onOpenAutoFocus) {
+		t2 = /* @__PURE__ */ jsx(Sheet.SheetContent, {
 			className,
 			side: "left",
 			overlayClassName: "bg-black/0",
-			style: { minWidth: 400 },
+			style: t1,
 			onOpenAutoFocus,
 			children
-		})
-	});
+		});
+		$[1] = children;
+		$[2] = className;
+		$[3] = onOpenAutoFocus;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== onOpenChange || $[6] !== open || $[7] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Sheet.Sheet, {
+			open,
+			onOpenChange,
+			children: t2
+		});
+		$[5] = onOpenChange;
+		$[6] = open;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
 };
 function useIsPreviewSheetOpen() {
-	const isPageContentSheetOpen = useSelector(previewStore, (state) => state.context.isPageContentSheetOpen);
-	const isPeekingBlock = useSelector(previewStore, (state) => state.context.peekedBlock != null);
-	const isAgentChatSheetOpen = useSelector(previewStore, (state) => state.context.isAgentChatSheetOpen);
+	const isPageContentSheetOpen = useSelector(previewStore, _temp);
+	const isPeekingBlock = useSelector(previewStore, _temp2);
+	const isAgentChatSheetOpen = useSelector(previewStore, _temp3);
 	return isPageContentSheetOpen || isPeekingBlock || isAgentChatSheetOpen;
 }
+function _temp3(state_1) {
+	return state_1.context.isAgentChatSheetOpen;
+}
+function _temp2(state_0) {
+	return state_0.context.peekedBlock != null;
+}
+function _temp(state) {
+	return state.context.isPageContentSheetOpen;
+}
 //#endregion
 export { PreviewSideSheet, Sheet, useIsPreviewSheetOpen };