camox 0.32.0 → 0.33.0

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

@@ -5,7 +5,7 @@ import { transformImageUrl } from "../../../core/lib/imageTransform.js";
 import { UploadDropZone } from "../../content/components/UploadDropZone.js";
 import { useFileUpload } from "../../../hooks/use-file-upload.js";
 import { AssetLightbox } from "./AssetLightbox.js";
-import { AssetPickerGrid } from "./AssetPickerGrid.js";
+import { AssetPickerModal } from "./AssetPickerModal.js";
 import { UnlinkAssetButton } from "./UnlinkAssetButton.js";
 import { AssetActionButtons } from "./AssetFieldEditor.js";
 import { c } from "react/compiler-runtime";
@@ -22,9 +22,9 @@ import { CSS } from "@dnd-kit/utilities";
 //#region src/features/preview/components/MultipleAssetFieldEditor.tsx
 const SortableAssetItem = (t0) => {
 	const $ = c(45);
-	if ($[0] !== "3cf038d410d44a905bb67a7755e19d8146b75274d1d91e2ad5f7a0d2580bec80") {
+	if ($[0] !== "0caea1891823f5fc9c0479c2355a3624a6f7a738eac9bd06dae08f7338ed3b58") {
 		for (let $i = 0; $i < 45; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "3cf038d410d44a905bb67a7755e19d8146b75274d1d91e2ad5f7a0d2580bec80";
+		$[0] = "0caea1891823f5fc9c0479c2355a3624a6f7a738eac9bd06dae08f7338ed3b58";
 	}
 	const { asset, assetType, onRemove, onAssetOpen } = t0;
 	const t1 = String(asset._fileId);
@@ -180,10 +180,10 @@ const SortableAssetItem = (t0) => {
 	return t17;
 };
 const MultipleAssetFieldEditor = (t0) => {
-	const $ = c(12);
-	if ($[0] !== "3cf038d410d44a905bb67a7755e19d8146b75274d1d91e2ad5f7a0d2580bec80") {
-		for (let $i = 0; $i < 12; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "3cf038d410d44a905bb67a7755e19d8146b75274d1d91e2ad5f7a0d2580bec80";
+	const $ = c(28);
+	if ($[0] !== "0caea1891823f5fc9c0479c2355a3624a6f7a738eac9bd06dae08f7338ed3b58") {
+		for (let $i = 0; $i < 28; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "0caea1891823f5fc9c0479c2355a3624a6f7a738eac9bd06dae08f7338ed3b58";
 	}
 	const { fieldName, assetType, currentData, onFieldChange } = t0;
 	const isImage = assetType === "Image";
@@ -234,67 +234,105 @@ const MultipleAssetFieldEditor = (t0) => {
 		setPickerOpen(false);
 	};
 	const T0 = UploadDropZone;
-	const t3 = pickerOpen ? /* @__PURE__ */ jsx(AssetPickerGrid, {
-		assetType,
-		mode: "multiple",
-		onSelectSingle: _temp5,
-		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(_temp6),
-				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 t3 = "space-y-4 px-2 py-4";
+	const t4 = items.length > 0 && /* @__PURE__ */ jsx(DndContext, {
+		sensors,
+		collisionDetection: closestCenter,
+		onDragEnd: handleDragEnd,
+		modifiers: [restrictToVerticalAxis],
+		children: /* @__PURE__ */ jsx(SortableContext, {
+			items: items.map(_temp5),
+			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, {
+		})
+	});
+	let t5;
+	if ($[4] !== setPickerOpen) {
+		t5 = () => setPickerOpen(true);
+		$[4] = setPickerOpen;
+		$[5] = t5;
+	} else t5 = $[5];
+	let t6;
+	if ($[6] !== isImage || $[7] !== t5 || $[8] !== uploadFiles || $[9] !== uploads) {
+		t6 = /* @__PURE__ */ jsx(AssetActionButtons, {
 			isImage,
 			multiple: true,
 			fileInputRef,
-			onPickerOpen: () => setPickerOpen(true),
+			onPickerOpen: t5,
 			onFilesSelected: uploadFiles,
 			uploads
-		})]
-	});
-	let t4;
-	if ($[4] !== lightboxAsset || $[5] !== setLightboxAsset) {
-		t4 = lightboxAsset && /* @__PURE__ */ jsx(AssetLightbox, {
+		});
+		$[6] = isImage;
+		$[7] = t5;
+		$[8] = uploadFiles;
+		$[9] = uploads;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== t4 || $[12] !== t6) {
+		t7 = /* @__PURE__ */ jsxs("div", {
+			className: t3,
+			children: [t4, t6]
+		});
+		$[11] = t4;
+		$[12] = t6;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== assetType || $[15] !== handleSelectMultiple || $[16] !== pickerOpen || $[17] !== setPickerOpen) {
+		t8 = /* @__PURE__ */ jsx(AssetPickerModal, {
+			open: pickerOpen,
+			onOpenChange: setPickerOpen,
+			assetType,
+			mode: "multiple",
+			onSelectSingle: _temp6,
+			onSelectMultiple: handleSelectMultiple
+		});
+		$[14] = assetType;
+		$[15] = handleSelectMultiple;
+		$[16] = pickerOpen;
+		$[17] = setPickerOpen;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] !== lightboxAsset || $[20] !== setLightboxAsset) {
+		t9 = lightboxAsset && /* @__PURE__ */ jsx(AssetLightbox, {
 			open: !!lightboxAsset,
 			onOpenChange: (open) => {
 				if (!open) setLightboxAsset(null);
 			},
 			fileId: lightboxAsset._fileId
 		});
-		$[4] = lightboxAsset;
-		$[5] = setLightboxAsset;
-		$[6] = t4;
-	} else t4 = $[6];
-	let t5;
-	if ($[7] !== T0 || $[8] !== t3 || $[9] !== t4 || $[10] !== uploadFiles) {
-		t5 = /* @__PURE__ */ jsxs(T0, {
+		$[19] = lightboxAsset;
+		$[20] = setLightboxAsset;
+		$[21] = t9;
+	} else t9 = $[21];
+	let t10;
+	if ($[22] !== T0 || $[23] !== t7 || $[24] !== t8 || $[25] !== t9 || $[26] !== uploadFiles) {
+		t10 = /* @__PURE__ */ jsxs(T0, {
 			onDrop: uploadFiles,
-			children: [t3, t4]
+			children: [
+				t7,
+				t8,
+				t9
+			]
 		});
-		$[7] = T0;
-		$[8] = t3;
-		$[9] = t4;
-		$[10] = uploadFiles;
-		$[11] = t5;
-	} else t5 = $[11];
-	return t5;
+		$[22] = T0;
+		$[23] = t7;
+		$[24] = t8;
+		$[25] = t9;
+		$[26] = uploadFiles;
+		$[27] = t10;
+	} else t10 = $[27];
+	return t10;
 };
 function _temp(a) {
 	return !!a && !!a.url;
@@ -308,10 +346,10 @@ function _temp3(assets) {
 function _temp4(f) {
 	return { _fileId: f.id };
 }
-function _temp5() {}
-function _temp6(a_4) {
+function _temp5(a_4) {
 	return String(a_4._fileId);
 }
+function _temp6() {}
 
 //#endregion
 export { MultipleAssetFieldEditor };

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

@@ -1,6 +1,6 @@
-import { previewStore } from "../previewStore.js";
 import { useFrame } from "./Frame.js";
 import { isOverlayMessage } from "../overlayMessages.js";
+import { previewStore } from "../previewStore.js";
 import { c } from "react/compiler-runtime";
 import { useSelector } from "@xstate/store-react";
 import * as React from "react";
@@ -12,25 +12,25 @@ import * as React from "react";
 */
 const OverlayTracker = () => {
 	const $ = c(9);
-	if ($[0] !== "e30e2d44ddd11434fba7914649cce579c7f2cb5f9cba2ea52958570ba7530abf") {
+	if ($[0] !== "e0ea417a1efc597e2017b6de423987462b3c414f4a8241a5bd4f2de04d2dd29e") {
 		for (let $i = 0; $i < 9; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "e30e2d44ddd11434fba7914649cce579c7f2cb5f9cba2ea52958570ba7530abf";
+		$[0] = "e0ea417a1efc597e2017b6de423987462b3c414f4a8241a5bd4f2de04d2dd29e";
 	}
 	const { window: iframeWindow } = useFrame();
-	const isPageContentSheetOpen = useSelector(previewStore, _temp);
-	const isAddBlockSheetOpen = useSelector(previewStore, _temp2);
+	const isPageEditorSidebarOpen = useSelector(previewStore, _temp);
+	const isAddBlockSidebarOpen = useSelector(previewStore, _temp2);
 	let t0;
 	let t1;
-	if ($[1] !== iframeWindow || $[2] !== isAddBlockSheetOpen) {
+	if ($[1] !== iframeWindow || $[2] !== isAddBlockSidebarOpen) {
 		t0 = () => {
-			if (!iframeWindow || !isAddBlockSheetOpen) return;
+			if (!iframeWindow || !isAddBlockSidebarOpen) return;
 			const handleClick = _temp3;
 			iframeWindow.document.addEventListener("click", handleClick);
 			return () => iframeWindow.document.removeEventListener("click", handleClick);
 		};
-		t1 = [iframeWindow, isAddBlockSheetOpen];
+		t1 = [iframeWindow, isAddBlockSidebarOpen];
 		$[1] = iframeWindow;
-		$[2] = isAddBlockSheetOpen;
+		$[2] = isAddBlockSidebarOpen;
 		$[3] = t0;
 		$[4] = t1;
 	} else {
@@ -40,14 +40,14 @@ const OverlayTracker = () => {
 	React.useEffect(t0, t1);
 	let t2;
 	let t3;
-	if ($[5] !== iframeWindow || $[6] !== isPageContentSheetOpen) {
+	if ($[5] !== iframeWindow || $[6] !== isPageEditorSidebarOpen) {
 		t2 = () => {
 			if (!iframeWindow) return;
 			const handleMessage = (event) => {
 				if (!isOverlayMessage(event.data)) return;
 				const { type } = event.data;
 				if (type === "CAMOX_FOCUS_FIELD") {
-					if (isPageContentSheetOpen) return;
+					if (isPageEditorSidebarOpen) return;
 					const { fieldId } = event.data;
 					const element = iframeWindow.document.querySelector(`[data-camox-field-id="${fieldId}"]`);
 					if (element) element.focus();
@@ -56,9 +56,9 @@ const OverlayTracker = () => {
 			iframeWindow.addEventListener("message", handleMessage);
 			return () => iframeWindow.removeEventListener("message", handleMessage);
 		};
-		t3 = [iframeWindow, isPageContentSheetOpen];
+		t3 = [iframeWindow, isPageEditorSidebarOpen];
 		$[5] = iframeWindow;
-		$[6] = isPageContentSheetOpen;
+		$[6] = isPageEditorSidebarOpen;
 		$[7] = t2;
 		$[8] = t3;
 	} else {
@@ -69,10 +69,10 @@ const OverlayTracker = () => {
 	return null;
 };
 function _temp(state) {
-	return state.context.isPageContentSheetOpen;
+	return state.context.isPageEditorSidebarOpen;
 }
 function _temp2(state_0) {
-	return state_0.context.isAddBlockSheetOpen;
+	return state_0.context.isAddBlockSidebarOpen;
 }
 function _temp3() {
 	previewStore.send({ type: "exitPeekedBlock" });

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

@@ -1,5 +1,5 @@
-import { previewStore } from "../previewStore.js";
 import { isOverlayMessage } from "../overlayMessages.js";
+import { previewStore } from "../previewStore.js";
 import { usePageBlocks } from "../../../lib/normalized-data.js";
 import { usePreviewedPage } from "../CamoxPreview.js";
 import { c } from "react/compiler-runtime";
@@ -9,12 +9,12 @@ import * as React from "react";
 //#region src/features/preview/components/Overlays.tsx
 const Overlays = (t0) => {
 	const $ = c(15);
-	if ($[0] !== "6b8884e7d682d7edd8d7ea97e0dfb6a690c2fd0b3e00f8e55354ffd5d743702c") {
+	if ($[0] !== "a159f5febae53b051adcfa6973022c237bd738c0db1dc2c0c91aace28d405412") {
 		for (let $i = 0; $i < 15; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "6b8884e7d682d7edd8d7ea97e0dfb6a690c2fd0b3e00f8e55354ffd5d743702c";
+		$[0] = "a159f5febae53b051adcfa6973022c237bd738c0db1dc2c0c91aace28d405412";
 	}
 	const { iframeElement } = t0;
-	const isPageContentSheetOpen = useSelector(previewStore, _temp);
+	const isPageEditorSidebarOpen = useSelector(previewStore, _temp);
 	const selection = useSelector(previewStore, _temp2);
 	const peekedBlock = useSelector(previewStore, _temp3);
 	const page = usePreviewedPage();
@@ -40,7 +40,7 @@ const Overlays = (t0) => {
 						else if (blockIndex === 0) afterPosition = "";
 					}
 					previewStore.send({
-						type: "openAddBlockSheet",
+						type: "openAddBlockSidebar",
 						afterPosition,
 						via: "overlay"
 					});
@@ -60,9 +60,9 @@ const Overlays = (t0) => {
 	} else t2 = $[4];
 	React.useEffect(t1, t2);
 	let t3;
-	if ($[5] !== iframeElement?.contentWindow || $[6] !== isPageContentSheetOpen || $[7] !== peekedBlock || $[8] !== selection) {
+	if ($[5] !== iframeElement?.contentWindow || $[6] !== isPageEditorSidebarOpen || $[7] !== peekedBlock || $[8] !== selection) {
 		t3 = () => {
-			if (isPageContentSheetOpen) return;
+			if (isPageEditorSidebarOpen) return;
 			if (peekedBlock) return;
 			if (!selection) return;
 			if (selection.type !== "block-field" && selection.type !== "item-field") return;
@@ -76,21 +76,21 @@ const Overlays = (t0) => {
 			iframeElement?.contentWindow?.postMessage(message_0, "*");
 		};
 		$[5] = iframeElement?.contentWindow;
-		$[6] = isPageContentSheetOpen;
+		$[6] = isPageEditorSidebarOpen;
 		$[7] = peekedBlock;
 		$[8] = selection;
 		$[9] = t3;
 	} else t3 = $[9];
 	let t4;
-	if ($[10] !== iframeElement || $[11] !== isPageContentSheetOpen || $[12] !== peekedBlock || $[13] !== selection) {
+	if ($[10] !== iframeElement || $[11] !== isPageEditorSidebarOpen || $[12] !== peekedBlock || $[13] !== selection) {
 		t4 = [
 			selection,
-			isPageContentSheetOpen,
+			isPageEditorSidebarOpen,
 			peekedBlock,
 			iframeElement
 		];
 		$[10] = iframeElement;
-		$[11] = isPageContentSheetOpen;
+		$[11] = isPageEditorSidebarOpen;
 		$[12] = peekedBlock;
 		$[13] = selection;
 		$[14] = t4;
@@ -99,7 +99,7 @@ const Overlays = (t0) => {
 	return null;
 };
 function _temp(state) {
-	return state.context.isPageContentSheetOpen;
+	return state.context.isPageEditorSidebarOpen;
 }
 function _temp2(state_0) {
 	return state_0.context.selection;