camox 0.3.0 → 0.3.1

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

@@ -7,6 +7,7 @@ import { AssetLightbox } from "./AssetLightbox.js";
 import { AssetPickerGrid } from "./AssetPickerGrid.js";
 import { UnlinkAssetButton } from "./UnlinkAssetButton.js";
 import { AssetActionButtons } from "./AssetFieldEditor.js";
+import { c } from "react/compiler-runtime";
 import { useQuery } from "@tanstack/react-query";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -17,62 +18,184 @@ import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 //#region src/features/preview/components/MultipleAssetFieldEditor.tsx
-var SortableAssetItem = ({ asset, assetType, onRemove, onAssetOpen }) => {
-	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: String(asset._fileId) });
-	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", {
-		ref: setNodeRef,
-		style: {
-			transform: CSS.Transform.toString(transform),
+var SortableAssetItem = (t0) => {
+	const $ = c(42);
+	const { asset, assetType, onRemove, onAssetOpen } = t0;
+	const t1 = String(asset._fileId);
+	let t2;
+	if ($[0] !== t1) {
+		t2 = { id: t1 };
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable(t2);
+	let t3;
+	if ($[2] !== transform) {
+		t3 = CSS.Transform.toString(transform);
+		$[2] = transform;
+		$[3] = t3;
+	} else t3 = $[3];
+	const t4 = isDragging ? .5 : 1;
+	let t5;
+	if ($[4] !== t3 || $[5] !== t4 || $[6] !== transition) {
+		t5 = {
+			transform: t3,
 			transition,
-			opacity: isDragging ? .5 : 1
-		},
-		className: cn("flex flex-row items-center gap-2 px-1 py-1 max-w-full rounded-lg text-foreground transition-none group", !isDragging && "hover:bg-accent/75"),
-		children: [
-			/* @__PURE__ */ jsx(Button, {
-				type: "button",
-				variant: "ghost",
-				size: "icon-sm",
-				className: "text-muted-foreground hover:text-foreground flex shrink-0 cursor-grab active:cursor-grabbing",
-				...attributes,
-				...listeners,
-				children: /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4" })
-			}),
-			/* @__PURE__ */ jsxs("button", {
-				type: "button",
-				className: "flex min-w-0 flex-1 cursor-zoom-in items-center gap-2",
-				onClick: () => onAssetOpen(asset),
-				children: [assetType === "Image" ? /* @__PURE__ */ jsx("div", {
-					className: "border-border h-12 w-12 shrink-0 overflow-hidden rounded border",
-					children: /* @__PURE__ */ jsx("img", {
-						src: asset.url,
-						alt: asset.alt || asset.filename,
-						className: "h-full w-full object-cover"
-					})
-				}) : /* @__PURE__ */ jsx("div", {
-					className: "border-border bg-muted flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded border",
-					children: /* @__PURE__ */ jsx(FileIcon, { className: "text-muted-foreground h-6 w-6" })
-				}), /* @__PURE__ */ jsx("p", {
-					className: "flex-1 truncate text-left text-sm",
-					title: asset.filename,
-					children: asset.filename || "Untitled"
-				})]
-			}),
-			/* @__PURE__ */ jsx(UnlinkAssetButton, {
-				fileId: asset._fileId,
-				onUnlink: () => onRemove(asset._fileId),
-				className: "hidden group-focus-within:flex group-hover:flex"
+			opacity: t4
+		};
+		$[4] = t3;
+		$[5] = t4;
+		$[6] = transition;
+		$[7] = t5;
+	} else t5 = $[7];
+	const style = t5;
+	const t6 = !isDragging && "hover:bg-accent/75";
+	let t7;
+	if ($[8] !== t6) {
+		t7 = cn("flex flex-row items-center gap-2 px-1 py-1 max-w-full rounded-lg text-foreground transition-none group", t6);
+		$[8] = t6;
+		$[9] = t7;
+	} else t7 = $[9];
+	let t8;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4" });
+		$[10] = t8;
+	} else t8 = $[10];
+	let t9;
+	if ($[11] !== attributes || $[12] !== listeners) {
+		t9 = /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			size: "icon-sm",
+			className: "text-muted-foreground hover:text-foreground flex shrink-0 cursor-grab active:cursor-grabbing",
+			...attributes,
+			...listeners,
+			children: t8
+		});
+		$[11] = attributes;
+		$[12] = listeners;
+		$[13] = t9;
+	} else t9 = $[13];
+	let t10;
+	if ($[14] !== asset || $[15] !== onAssetOpen) {
+		t10 = () => onAssetOpen(asset);
+		$[14] = asset;
+		$[15] = onAssetOpen;
+		$[16] = t10;
+	} else t10 = $[16];
+	let t11;
+	if ($[17] !== asset.alt || $[18] !== asset.filename || $[19] !== asset.url || $[20] !== assetType) {
+		t11 = assetType === "Image" ? /* @__PURE__ */ jsx("div", {
+			className: "border-border h-12 w-12 shrink-0 overflow-hidden rounded border",
+			children: /* @__PURE__ */ jsx("img", {
+				src: asset.url,
+				alt: asset.alt || asset.filename,
+				className: "h-full w-full object-cover"
 			})
-		]
-	}) });
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "border-border bg-muted flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded border",
+			children: /* @__PURE__ */ jsx(FileIcon, { className: "text-muted-foreground h-6 w-6" })
+		});
+		$[17] = asset.alt;
+		$[18] = asset.filename;
+		$[19] = asset.url;
+		$[20] = assetType;
+		$[21] = t11;
+	} else t11 = $[21];
+	const t12 = asset.filename || "Untitled";
+	let t13;
+	if ($[22] !== asset.filename || $[23] !== t12) {
+		t13 = /* @__PURE__ */ jsx("p", {
+			className: "flex-1 truncate text-left text-sm",
+			title: asset.filename,
+			children: t12
+		});
+		$[22] = asset.filename;
+		$[23] = t12;
+		$[24] = t13;
+	} else t13 = $[24];
+	let t14;
+	if ($[25] !== t10 || $[26] !== t11 || $[27] !== t13) {
+		t14 = /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "flex min-w-0 flex-1 cursor-zoom-in items-center gap-2",
+			onClick: t10,
+			children: [t11, t13]
+		});
+		$[25] = t10;
+		$[26] = t11;
+		$[27] = t13;
+		$[28] = t14;
+	} else t14 = $[28];
+	let t15;
+	if ($[29] !== asset._fileId || $[30] !== onRemove) {
+		t15 = () => onRemove(asset._fileId);
+		$[29] = asset._fileId;
+		$[30] = onRemove;
+		$[31] = t15;
+	} else t15 = $[31];
+	let t16;
+	if ($[32] !== asset._fileId || $[33] !== t15) {
+		t16 = /* @__PURE__ */ jsx(UnlinkAssetButton, {
+			fileId: asset._fileId,
+			onUnlink: t15,
+			className: "hidden group-focus-within:flex group-hover:flex"
+		});
+		$[32] = asset._fileId;
+		$[33] = t15;
+		$[34] = t16;
+	} else t16 = $[34];
+	let t17;
+	if ($[35] !== setNodeRef || $[36] !== style || $[37] !== t14 || $[38] !== t16 || $[39] !== t7 || $[40] !== t9) {
+		t17 = /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", {
+			ref: setNodeRef,
+			style,
+			className: t7,
+			children: [
+				t9,
+				t14,
+				t16
+			]
+		}) });
+		$[35] = setNodeRef;
+		$[36] = style;
+		$[37] = t14;
+		$[38] = t16;
+		$[39] = t7;
+		$[40] = t9;
+		$[41] = t17;
+	} else t17 = $[41];
+	return t17;
 };
-var MultipleAssetFieldEditor = ({ fieldName, assetType, currentData, onFieldChange }) => {
+var MultipleAssetFieldEditor = (t0) => {
+	const $ = c(15);
+	const { fieldName, assetType, currentData, onFieldChange } = t0;
 	const contentKey = assetType === "Image" ? "image" : "file";
 	const isImage = assetType === "Image";
 	const fileInputRef = React.useRef(null);
 	const projectSlug = useProjectSlug();
-	const { data: project } = useQuery(projectQueries.getBySlug(projectSlug));
-	const items = (currentData[fieldName] ?? []).map((item) => item[contentKey]).filter((a) => !!a?.url);
-	const toStorageFormat = (assets) => assets.map((a) => ({ [contentKey]: { _fileId: a._fileId } }));
+	let t1;
+	if ($[0] !== projectSlug) {
+		t1 = projectQueries.getBySlug(projectSlug);
+		$[0] = projectSlug;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { data: project } = useQuery(t1);
+	const rawItems = currentData[fieldName] ?? [];
+	let t2;
+	if ($[2] !== contentKey) {
+		t2 = (item) => item[contentKey];
+		$[2] = contentKey;
+		$[3] = t2;
+	} else t2 = $[3];
+	const items = rawItems.map(t2).filter(_temp);
+	let t3;
+	if ($[4] !== contentKey) {
+		t3 = (assets) => assets.map((a_0) => ({ [contentKey]: { _fileId: a_0._fileId } }));
+		$[4] = contentKey;
+		$[5] = t3;
+	} else t3 = $[5];
+	const toStorageFormat = t3;
 	const addFileId = (fileId) => {
 		onFieldChange(fieldName, [...toStorageFormat(items), { [contentKey]: { _fileId: fileId } }]);
 	};
@@ -84,69 +207,99 @@ var MultipleAssetFieldEditor = ({ fieldName, assetType, currentData, onFieldChan
 	});
 	const [pickerOpen, setPickerOpen] = React.useState(false);
 	const [lightboxAsset, setLightboxAsset] = React.useState(null);
-	const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	let t4;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = { coordinateGetter: sortableKeyboardCoordinates };
+		$[6] = t4;
+	} else t4 = $[6];
+	const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, t4));
 	const handleDragEnd = (event) => {
 		const { active, over } = event;
 		if (!over || active.id === over.id) return;
-		const oldIndex = items.findIndex((a) => String(a._fileId) === active.id);
-		const newIndex = items.findIndex((a) => String(a._fileId) === over.id);
+		const oldIndex = items.findIndex((a_1) => String(a_1._fileId) === active.id);
+		const newIndex = items.findIndex((a_2) => String(a_2._fileId) === over.id);
 		if (oldIndex === -1 || newIndex === -1) return;
 		const reordered = [...items];
 		const [moved] = reordered.splice(oldIndex, 1);
 		reordered.splice(newIndex, 0, moved);
 		onFieldChange(fieldName, toStorageFormat(reordered));
 	};
-	const handleRemove = (fileId) => {
-		onFieldChange(fieldName, toStorageFormat(items.filter((a) => a._fileId !== fileId)));
+	const handleRemove = (fileId_0) => {
+		onFieldChange(fieldName, toStorageFormat(items.filter((a_3) => a_3._fileId !== fileId_0)));
 	};
 	const handleSelectMultiple = (files) => {
 		onFieldChange(fieldName, [...toStorageFormat(items), ...files.map((f) => ({ [contentKey]: { _fileId: f.id } }))]);
 		setPickerOpen(false);
 	};
-	return /* @__PURE__ */ jsxs(UploadDropZone, {
-		onDrop: uploadFiles,
-		children: [pickerOpen ? /* @__PURE__ */ jsx(AssetPickerGrid, {
-			assetType,
-			mode: "multiple",
-			onSelectSingle: () => {},
-			onSelectMultiple: handleSelectMultiple,
-			onClose: () => setPickerOpen(false)
-		}) : /* @__PURE__ */ jsxs("div", {
-			className: "space-y-4 px-4 py-4",
-			children: [items.length > 0 && /* @__PURE__ */ jsx(DndContext, {
-				sensors,
-				collisionDetection: closestCenter,
-				onDragEnd: handleDragEnd,
-				modifiers: [restrictToVerticalAxis],
-				children: /* @__PURE__ */ jsx(SortableContext, {
-					items: items.map((a) => String(a._fileId)),
-					strategy: verticalListSortingStrategy,
-					children: /* @__PURE__ */ jsx("ul", {
-						className: "flex flex-col gap-1",
-						children: items.map((asset) => /* @__PURE__ */ jsx(SortableAssetItem, {
-							asset,
-							assetType,
-							onRemove: handleRemove,
-							onAssetOpen: setLightboxAsset
-						}, asset._fileId))
-					})
+	const T0 = UploadDropZone;
+	const t5 = pickerOpen ? /* @__PURE__ */ jsx(AssetPickerGrid, {
+		assetType,
+		mode: "multiple",
+		onSelectSingle: _temp2,
+		onSelectMultiple: handleSelectMultiple,
+		onClose: () => setPickerOpen(false)
+	}) : /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4 px-4 py-4",
+		children: [items.length > 0 && /* @__PURE__ */ jsx(DndContext, {
+			sensors,
+			collisionDetection: closestCenter,
+			onDragEnd: handleDragEnd,
+			modifiers: [restrictToVerticalAxis],
+			children: /* @__PURE__ */ jsx(SortableContext, {
+				items: items.map(_temp3),
+				strategy: verticalListSortingStrategy,
+				children: /* @__PURE__ */ jsx("ul", {
+					className: "flex flex-col gap-1",
+					children: items.map((asset) => /* @__PURE__ */ jsx(SortableAssetItem, {
+						asset,
+						assetType,
+						onRemove: handleRemove,
+						onAssetOpen: setLightboxAsset
+					}, asset._fileId))
 				})
-			}), /* @__PURE__ */ jsx(AssetActionButtons, {
-				isImage,
-				multiple: true,
-				fileInputRef,
-				onPickerOpen: () => setPickerOpen(true),
-				onFilesSelected: uploadFiles,
-				uploads
-			})]
-		}), lightboxAsset && /* @__PURE__ */ jsx(AssetLightbox, {
+			})
+		}), /* @__PURE__ */ jsx(AssetActionButtons, {
+			isImage,
+			multiple: true,
+			fileInputRef,
+			onPickerOpen: () => setPickerOpen(true),
+			onFilesSelected: uploadFiles,
+			uploads
+		})]
+	});
+	let t6;
+	if ($[7] !== lightboxAsset || $[8] !== setLightboxAsset) {
+		t6 = lightboxAsset && /* @__PURE__ */ jsx(AssetLightbox, {
 			open: !!lightboxAsset,
 			onOpenChange: (open) => {
 				if (!open) setLightboxAsset(null);
 			},
 			fileId: lightboxAsset._fileId
-		})]
-	});
+		});
+		$[7] = lightboxAsset;
+		$[8] = setLightboxAsset;
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[10] !== T0 || $[11] !== t5 || $[12] !== t6 || $[13] !== uploadFiles) {
+		t7 = /* @__PURE__ */ jsxs(T0, {
+			onDrop: uploadFiles,
+			children: [t5, t6]
+		});
+		$[10] = T0;
+		$[11] = t5;
+		$[12] = t6;
+		$[13] = uploadFiles;
+		$[14] = t7;
+	} else t7 = $[14];
+	return t7;
 };
+function _temp(a) {
+	return !!a?.url;
+}
+function _temp2() {}
+function _temp3(a_4) {
+	return String(a_4._fileId);
+}
 //#endregion
 export { MultipleAssetFieldEditor };

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

@@ -1,5 +1,6 @@
 import { previewStore } from "../previewStore.js";
 import { isOverlayMessage } from "../overlayMessages.js";
+import { c } from "react/compiler-runtime";
 import { useFrame } from "@camox/ui/frame";
 import { useSelector } from "@xstate/store/react";
 import * as React from "react";
@@ -9,33 +10,67 @@ import * as React from "react";
 * Listening for focus commands from parent (for sidebar-triggered focus)
 */
 var OverlayTracker = () => {
+	const $ = c(8);
 	const { window: iframeWindow } = useFrame();
-	const isPageContentSheetOpen = useSelector(previewStore, (state) => state.context.isPageContentSheetOpen);
-	const isAddBlockSheetOpen = useSelector(previewStore, (state) => state.context.isAddBlockSheetOpen);
-	React.useEffect(() => {
-		if (!iframeWindow || !isAddBlockSheetOpen) return;
-		const handleClick = () => {
-			previewStore.send({ type: "exitPeekedBlock" });
+	const isPageContentSheetOpen = useSelector(previewStore, _temp);
+	const isAddBlockSheetOpen = useSelector(previewStore, _temp2);
+	let t0;
+	let t1;
+	if ($[0] !== iframeWindow || $[1] !== isAddBlockSheetOpen) {
+		t0 = () => {
+			if (!iframeWindow || !isAddBlockSheetOpen) return;
+			const handleClick = _temp3;
+			iframeWindow.document.addEventListener("click", handleClick);
+			return () => iframeWindow.document.removeEventListener("click", handleClick);
 		};
-		iframeWindow.document.addEventListener("click", handleClick);
-		return () => iframeWindow.document.removeEventListener("click", handleClick);
-	}, [iframeWindow, isAddBlockSheetOpen]);
-	React.useEffect(() => {
-		if (!iframeWindow) return;
-		const handleMessage = (event) => {
-			if (!isOverlayMessage(event.data)) return;
-			const { type } = event.data;
-			if (type === "CAMOX_FOCUS_FIELD") {
-				if (isPageContentSheetOpen) return;
-				const { fieldId } = event.data;
-				const element = iframeWindow.document.querySelector(`[data-camox-field-id="${fieldId}"]`);
-				if (element) element.focus();
-			}
+		t1 = [iframeWindow, isAddBlockSheetOpen];
+		$[0] = iframeWindow;
+		$[1] = isAddBlockSheetOpen;
+		$[2] = t0;
+		$[3] = t1;
+	} else {
+		t0 = $[2];
+		t1 = $[3];
+	}
+	React.useEffect(t0, t1);
+	let t2;
+	let t3;
+	if ($[4] !== iframeWindow || $[5] !== isPageContentSheetOpen) {
+		t2 = () => {
+			if (!iframeWindow) return;
+			const handleMessage = (event) => {
+				if (!isOverlayMessage(event.data)) return;
+				const { type } = event.data;
+				if (type === "CAMOX_FOCUS_FIELD") {
+					if (isPageContentSheetOpen) return;
+					const { fieldId } = event.data;
+					const element = iframeWindow.document.querySelector(`[data-camox-field-id="${fieldId}"]`);
+					if (element) element.focus();
+				}
+			};
+			iframeWindow.addEventListener("message", handleMessage);
+			return () => iframeWindow.removeEventListener("message", handleMessage);
 		};
-		iframeWindow.addEventListener("message", handleMessage);
-		return () => iframeWindow.removeEventListener("message", handleMessage);
-	}, [iframeWindow, isPageContentSheetOpen]);
+		t3 = [iframeWindow, isPageContentSheetOpen];
+		$[4] = iframeWindow;
+		$[5] = isPageContentSheetOpen;
+		$[6] = t2;
+		$[7] = t3;
+	} else {
+		t2 = $[6];
+		t3 = $[7];
+	}
+	React.useEffect(t2, t3);
 	return null;
 };
+function _temp(state) {
+	return state.context.isPageContentSheetOpen;
+}
+function _temp2(state_0) {
+	return state_0.context.isAddBlockSheetOpen;
+}
+function _temp3() {
+	previewStore.send({ type: "exitPeekedBlock" });
+}
 //#endregion
 export { OverlayTracker };

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

@@ -2,58 +2,100 @@ import { previewStore } from "../previewStore.js";
 import { isOverlayMessage } from "../overlayMessages.js";
 import { usePageBlocks } from "../../../lib/normalized-data.js";
 import { usePreviewedPage } from "../CamoxPreview.js";
+import { c } from "react/compiler-runtime";
 import { useSelector } from "@xstate/store/react";
 import * as React from "react";
 //#region src/features/preview/components/Overlays.tsx
-var Overlays = ({ iframeElement }) => {
-	const isPageContentSheetOpen = useSelector(previewStore, (state) => state.context.isPageContentSheetOpen);
-	const selection = useSelector(previewStore, (state) => state.context.selection);
-	const peekedBlock = useSelector(previewStore, (state) => state.context.peekedBlock);
+var Overlays = (t0) => {
+	const $ = c(14);
+	const { iframeElement } = t0;
+	const isPageContentSheetOpen = useSelector(previewStore, _temp);
+	const selection = useSelector(previewStore, _temp2);
+	const peekedBlock = useSelector(previewStore, _temp3);
 	const page = usePreviewedPage();
 	const { pageBlocks } = usePageBlocks(page);
-	React.useEffect(() => {
-		const handleMessage = (event) => {
-			if (!isOverlayMessage(event.data)) return;
-			const message = event.data;
-			if (message.type === "CAMOX_ADD_BLOCK_REQUEST") {
-				const { blockPosition, insertPosition } = message;
-				let afterPosition = null;
-				if (message.afterPosition !== void 0) afterPosition = message.afterPosition;
-				else if (insertPosition === "after") afterPosition = blockPosition;
-				else {
-					const blockIndex = pageBlocks.findIndex((b) => b.position === blockPosition);
-					if (blockIndex > 0) afterPosition = pageBlocks[blockIndex - 1].position ?? null;
-					else if (blockIndex === 0) afterPosition = "";
+	let t1;
+	if ($[0] !== pageBlocks) {
+		t1 = () => {
+			const handleMessage = (event) => {
+				if (!isOverlayMessage(event.data)) return;
+				const message = event.data;
+				if (message.type === "CAMOX_ADD_BLOCK_REQUEST") {
+					const { blockPosition, insertPosition } = message;
+					let afterPosition = null;
+					if (message.afterPosition !== void 0) afterPosition = message.afterPosition;
+					else if (insertPosition === "after") afterPosition = blockPosition;
+					else {
+						const blockIndex = pageBlocks.findIndex((b) => b.position === blockPosition);
+						if (blockIndex > 0) afterPosition = pageBlocks[blockIndex - 1].position ?? null;
+						else if (blockIndex === 0) afterPosition = "";
+					}
+					previewStore.send({
+						type: "openAddBlockSheet",
+						afterPosition
+					});
 				}
-				previewStore.send({
-					type: "openAddBlockSheet",
-					afterPosition
-				});
-			}
+			};
+			window.addEventListener("message", handleMessage);
+			return () => window.removeEventListener("message", handleMessage);
 		};
-		window.addEventListener("message", handleMessage);
-		return () => window.removeEventListener("message", handleMessage);
-	}, [page]);
-	React.useEffect(() => {
-		if (isPageContentSheetOpen) return;
-		if (peekedBlock) return;
-		if (!selection) return;
-		if (selection.type !== "block-field" && selection.type !== "item-field") return;
-		if (selection.fieldType !== "String") return;
-		const blockId = selection.blockId;
-		const fieldName = selection.fieldName;
-		const message = {
-			type: "CAMOX_FOCUS_FIELD",
-			fieldId: selection.type === "item-field" ? `${blockId}__${selection.itemId}__${fieldName}` : `${blockId}__${fieldName}`
+		$[0] = pageBlocks;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== page) {
+		t2 = [page];
+		$[2] = page;
+		$[3] = t2;
+	} else t2 = $[3];
+	React.useEffect(t1, t2);
+	let t3;
+	if ($[4] !== iframeElement?.contentWindow || $[5] !== isPageContentSheetOpen || $[6] !== peekedBlock || $[7] !== selection) {
+		t3 = () => {
+			if (isPageContentSheetOpen) return;
+			if (peekedBlock) return;
+			if (!selection) return;
+			if (selection.type !== "block-field" && selection.type !== "item-field") return;
+			if (selection.fieldType !== "String") return;
+			const blockId = selection.blockId;
+			const fieldName = selection.fieldName;
+			const message_0 = {
+				type: "CAMOX_FOCUS_FIELD",
+				fieldId: selection.type === "item-field" ? `${blockId}__${selection.itemId}__${fieldName}` : `${blockId}__${fieldName}`
+			};
+			iframeElement?.contentWindow?.postMessage(message_0, "*");
 		};
-		iframeElement?.contentWindow?.postMessage(message, "*");
-	}, [
-		selection,
-		isPageContentSheetOpen,
-		peekedBlock,
-		iframeElement
-	]);
+		$[4] = iframeElement?.contentWindow;
+		$[5] = isPageContentSheetOpen;
+		$[6] = peekedBlock;
+		$[7] = selection;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== iframeElement || $[10] !== isPageContentSheetOpen || $[11] !== peekedBlock || $[12] !== selection) {
+		t4 = [
+			selection,
+			isPageContentSheetOpen,
+			peekedBlock,
+			iframeElement
+		];
+		$[9] = iframeElement;
+		$[10] = isPageContentSheetOpen;
+		$[11] = peekedBlock;
+		$[12] = selection;
+		$[13] = t4;
+	} else t4 = $[13];
+	React.useEffect(t3, t4);
 	return null;
 };
+function _temp(state) {
+	return state.context.isPageContentSheetOpen;
+}
+function _temp2(state_0) {
+	return state_0.context.selection;
+}
+function _temp3(state_1) {
+	return state_1.context.peekedBlock;
+}
 //#endregion
 export { Overlays };