camox 0.44.0 → 0.45.0

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

@@ -1,11 +1,13 @@
-import { repeatableItemMutations } from "../../../lib/queries.js";
 import { cn } from "../../../lib/utils.js";
+import { repeatableItemMutations } from "../../../lib/queries.js";
 import { previewStore, selectionItemId } from "../previewStore.js";
+import { useEditingFrame } from "../editingFrame.js";
+import { PreviewEditingOwnerContext, usePreviewTargetSelection } from "../previewSelection.js";
 import { useRepeatableItemActions } from "./useRepeatableItemActions.js";
 import { c } from "react/compiler-runtime";
-import { useMutation } from "@tanstack/react-query";
+import { useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useSelector } from "@xstate/store-react";
+import { useMutation } from "@tanstack/react-query";
 import { Button } from "@camox/ui/button";
 import { CircleMinus, CirclePlus, GripVertical } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@camox/ui/tooltip";
@@ -17,98 +19,87 @@ import { CSS } from "@dnd-kit/utilities";
 //#region src/features/preview/components/RepeatableItemsList.tsx
 const SortableRepeatableItem = (t0) => {
 	const $ = c(47);
-	if ($[0] !== "1ee75e44cc1535553f2a0db7a9c51ae835ec57f2adce6c4034b28916cd743097") {
-		for (let $i = 0; $i < 47; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "1ee75e44cc1535553f2a0db7a9c51ae835ec57f2adce6c4034b28916cd743097";
-	}
 	const { item, fieldName, blockId, canRemove, onRemove } = t0;
-	const t1 = String(item.id);
-	let t2;
-	if ($[1] !== t1) {
-		t2 = { id: t1 };
+	const owner = useContext(PreviewEditingOwnerContext);
+	let t1;
+	if ($[0] !== item.id) {
+		t1 = { id: item.id };
+		$[0] = item.id;
 		$[1] = t1;
-		$[2] = t2;
-	} else t2 = $[2];
-	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable(t2);
-	let t3;
-	if ($[3] !== transform) {
-		t3 = CSS.Transform.toString(transform);
-		$[3] = transform;
-		$[4] = t3;
-	} else t3 = $[4];
-	const t4 = isDragging ? .5 : 1;
-	let t5;
-	if ($[5] !== t3 || $[6] !== t4 || $[7] !== transition) {
-		t5 = {
-			transform: t3,
+	} else t1 = $[1];
+	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable(t1);
+	let t2;
+	if ($[2] !== transform) {
+		t2 = CSS.Transform.toString(transform);
+		$[2] = transform;
+		$[3] = t2;
+	} else t2 = $[3];
+	const t3 = isDragging ? .5 : 1;
+	let t4;
+	if ($[4] !== t2 || $[5] !== t3 || $[6] !== transition) {
+		t4 = {
+			transform: t2,
 			transition,
-			opacity: t4
+			opacity: t3
 		};
+		$[4] = t2;
 		$[5] = t3;
-		$[6] = t4;
-		$[7] = transition;
-		$[8] = t5;
-	} else t5 = $[8];
-	const style = t5;
+		$[6] = transition;
+		$[7] = t4;
+	} else t4 = $[7];
+	const style = t4;
+	const t5 = usePreviewTargetSelection();
 	let t6;
-	if ($[9] !== item.id) {
-		t6 = (state) => selectionItemId(state.context.selection) === item.id;
-		$[9] = item.id;
-		$[10] = t6;
-	} else t6 = $[10];
-	const isSelected = useSelector(previewStore, t6);
-	const iframeElement = useSelector(previewStore, _temp);
+	if ($[8] !== t5) {
+		t6 = selectionItemId(t5);
+		$[8] = t5;
+		$[9] = t6;
+	} else t6 = $[9];
+	const isSelected = t6 === item.id;
+	const { send } = useEditingFrame();
 	const shouldShowHover = !isDragging && !isSelected;
 	let t7;
-	if ($[11] !== blockId || $[12] !== iframeElement || $[13] !== item.id) {
-		t7 = () => {
-			if (!iframeElement?.contentWindow) return;
-			const message = {
-				type: "CAMOX_HOVER_REPEATER_ITEM",
-				blockId: String(blockId),
-				itemId: String(item.id)
-			};
-			iframeElement.contentWindow.postMessage(message, "*");
-		};
-		$[11] = blockId;
-		$[12] = iframeElement;
-		$[13] = item.id;
-		$[14] = t7;
-	} else t7 = $[14];
+	if ($[10] !== blockId || $[11] !== item.id || $[12] !== send) {
+		t7 = () => send({
+			type: "CAMOX_HOVER_REPEATABLE_ITEM",
+			blockId,
+			itemId: item.id
+		});
+		$[10] = blockId;
+		$[11] = item.id;
+		$[12] = send;
+		$[13] = t7;
+	} else t7 = $[13];
 	const handleMouseEnter = t7;
 	let t8;
-	if ($[15] !== blockId || $[16] !== iframeElement || $[17] !== item.id) {
-		t8 = () => {
-			if (!iframeElement?.contentWindow) return;
-			const message_0 = {
-				type: "CAMOX_HOVER_REPEATER_ITEM_END",
-				blockId: String(blockId),
-				itemId: String(item.id)
-			};
-			iframeElement.contentWindow.postMessage(message_0, "*");
-		};
-		$[15] = blockId;
-		$[16] = iframeElement;
-		$[17] = item.id;
-		$[18] = t8;
-	} else t8 = $[18];
+	if ($[14] !== blockId || $[15] !== item.id || $[16] !== send) {
+		t8 = () => send({
+			type: "CAMOX_HOVER_REPEATABLE_ITEM_END",
+			blockId,
+			itemId: item.id
+		});
+		$[14] = blockId;
+		$[15] = item.id;
+		$[16] = send;
+		$[17] = t8;
+	} else t8 = $[17];
 	const handleMouseLeave = t8;
 	const t9 = shouldShowHover && "hover:bg-accent/75";
 	const t10 = isSelected && "bg-accent text-accent-foreground";
 	let t11;
-	if ($[19] !== t10 || $[20] !== t9) {
+	if ($[18] !== t10 || $[19] !== t9) {
 		t11 = cn("flex flex-row justify-between items-center gap-2 px-1 py-1 max-w-full rounded-lg text-foreground transition-none group", t9, t10);
-		$[19] = t10;
-		$[20] = t9;
-		$[21] = t11;
-	} else t11 = $[21];
+		$[18] = t10;
+		$[19] = t9;
+		$[20] = t11;
+	} else t11 = $[20];
 	let t12;
-	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
 		t12 = /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4" });
-		$[22] = t12;
-	} else t12 = $[22];
+		$[21] = t12;
+	} else t12 = $[21];
 	let t13;
-	if ($[23] !== attributes || $[24] !== listeners) {
+	if ($[22] !== attributes || $[23] !== listeners) {
 		t13 = /* @__PURE__ */ jsx(Button, {
 			type: "button",
 			variant: "ghost",
@@ -118,23 +109,26 @@ const SortableRepeatableItem = (t0) => {
 			...listeners,
 			children: t12
 		});
-		$[23] = attributes;
-		$[24] = listeners;
-		$[25] = t13;
-	} else t13 = $[25];
+		$[22] = attributes;
+		$[23] = listeners;
+		$[24] = t13;
+	} else t13 = $[24];
 	let t14;
-	if ($[26] !== blockId || $[27] !== handleMouseLeave || $[28] !== item.id) {
+	if ($[25] !== blockId || $[26] !== handleMouseLeave || $[27] !== item.id || $[28] !== owner) {
 		t14 = () => {
+			if (owner === null) return;
 			handleMouseLeave();
 			previewStore.send({
 				type: "selectItem",
+				...owner,
 				blockId,
 				itemId: item.id
 			});
 		};
-		$[26] = blockId;
-		$[27] = handleMouseLeave;
-		$[28] = item.id;
+		$[25] = blockId;
+		$[26] = handleMouseLeave;
+		$[27] = item.id;
+		$[28] = owner;
 		$[29] = t14;
 	} else t14 = $[29];
 	const t15 = item.summary || `${fieldName} (${item.id})`;
@@ -204,47 +198,43 @@ const SortableRepeatableItem = (t0) => {
 	return t18;
 };
 const RepeatableItemsList = (t0) => {
-	const $ = c(25);
-	if ($[0] !== "1ee75e44cc1535553f2a0db7a9c51ae835ec57f2adce6c4034b28916cd743097") {
-		for (let $i = 0; $i < 25; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "1ee75e44cc1535553f2a0db7a9c51ae835ec57f2adce6c4034b28916cd743097";
-	}
+	const $ = c(24);
 	const { items, blockId, fieldName, schema } = t0;
 	let t1;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = repeatableItemMutations.updatePosition();
-		$[1] = t1;
-	} else t1 = $[1];
+		$[0] = t1;
+	} else t1 = $[0];
 	const updateRepeatablePosition = useMutation(t1);
 	const t2 = schema;
 	let t3;
-	if ($[2] !== blockId || $[3] !== fieldName || $[4] !== items.length || $[5] !== t2) {
+	if ($[1] !== blockId || $[2] !== fieldName || $[3] !== items.length || $[4] !== t2) {
 		t3 = {
 			blockId,
 			fieldName,
 			arraySchema: t2,
 			siblingCount: items.length
 		};
-		$[2] = blockId;
-		$[3] = fieldName;
-		$[4] = items.length;
-		$[5] = t2;
-		$[6] = t3;
-	} else t3 = $[6];
+		$[1] = blockId;
+		$[2] = fieldName;
+		$[3] = items.length;
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
 	const { canAdd, addItem, canRemove, removeItem } = useRepeatableItemActions(t3);
 	let t4;
-	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
 		t4 = { coordinateGetter: sortableKeyboardCoordinates };
-		$[7] = t4;
-	} else t4 = $[7];
+		$[6] = t4;
+	} else t4 = $[6];
 	const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, t4));
 	let t5;
-	if ($[8] !== items || $[9] !== updateRepeatablePosition) {
+	if ($[7] !== items || $[8] !== updateRepeatablePosition) {
 		t5 = async (event) => {
 			const { active, over } = event;
 			if (!over || active.id === over.id) return;
-			const oldIndex = items.findIndex((item) => String(item.id) === active.id);
-			const newIndex = items.findIndex((item_0) => String(item_0.id) === over.id);
+			const oldIndex = items.findIndex((item) => item.id === active.id);
+			const newIndex = items.findIndex((item_0) => item_0.id === over.id);
 			if (oldIndex === -1 || newIndex === -1) return;
 			let afterPosition;
 			let beforePosition;
@@ -256,25 +246,25 @@ const RepeatableItemsList = (t0) => {
 				beforePosition = items[newIndex].position;
 			}
 			await updateRepeatablePosition.mutateAsync({
-				id: Number(active.id),
+				id: String(active.id),
 				afterPosition,
 				beforePosition
 			});
 		};
-		$[8] = items;
-		$[9] = updateRepeatablePosition;
-		$[10] = t5;
-	} else t5 = $[10];
+		$[7] = items;
+		$[8] = updateRepeatablePosition;
+		$[9] = t5;
+	} else t5 = $[9];
 	const handleDragEnd = t5;
 	let t6;
-	if ($[11] !== blockId || $[12] !== canRemove || $[13] !== fieldName || $[14] !== handleDragEnd || $[15] !== items || $[16] !== removeItem || $[17] !== sensors) {
+	if ($[10] !== blockId || $[11] !== canRemove || $[12] !== fieldName || $[13] !== handleDragEnd || $[14] !== items || $[15] !== removeItem || $[16] !== sensors) {
 		t6 = items.length > 0 && /* @__PURE__ */ jsx(DndContext, {
 			sensors,
 			collisionDetection: closestCenter,
 			onDragEnd: handleDragEnd,
 			modifiers: [restrictToVerticalAxis],
 			children: /* @__PURE__ */ jsx(SortableContext, {
-				items: items.map(_temp2),
+				items: items.map(_temp),
 				strategy: verticalListSortingStrategy,
 				children: /* @__PURE__ */ jsx("ul", {
 					className: "flex flex-col gap-1",
@@ -284,21 +274,21 @@ const RepeatableItemsList = (t0) => {
 						fieldName,
 						canRemove,
 						onRemove: removeItem
-					}, String(item_2.id)))
+					}, item_2.id))
 				})
 			})
 		});
-		$[11] = blockId;
-		$[12] = canRemove;
-		$[13] = fieldName;
-		$[14] = handleDragEnd;
-		$[15] = items;
-		$[16] = removeItem;
-		$[17] = sensors;
-		$[18] = t6;
-	} else t6 = $[18];
+		$[10] = blockId;
+		$[11] = canRemove;
+		$[12] = fieldName;
+		$[13] = handleDragEnd;
+		$[14] = items;
+		$[15] = removeItem;
+		$[16] = sensors;
+		$[17] = t6;
+	} else t6 = $[17];
 	let t7;
-	if ($[19] !== addItem || $[20] !== canAdd) {
+	if ($[18] !== addItem || $[19] !== canAdd) {
 		t7 = canAdd && /* @__PURE__ */ jsxs(Button, {
 			type: "button",
 			variant: "ghost",
@@ -307,27 +297,24 @@ const RepeatableItemsList = (t0) => {
 			onClick: () => addItem(),
 			children: [/* @__PURE__ */ jsx(CirclePlus, { className: "h-4 w-4" }), "Add item"]
 		});
-		$[19] = addItem;
-		$[20] = canAdd;
-		$[21] = t7;
-	} else t7 = $[21];
+		$[18] = addItem;
+		$[19] = canAdd;
+		$[20] = t7;
+	} else t7 = $[20];
 	let t8;
-	if ($[22] !== t6 || $[23] !== t7) {
+	if ($[21] !== t6 || $[22] !== t7) {
 		t8 = /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-1",
 			children: [t6, t7]
 		});
-		$[22] = t6;
-		$[23] = t7;
-		$[24] = t8;
-	} else t8 = $[24];
+		$[21] = t6;
+		$[22] = t7;
+		$[23] = t8;
+	} else t8 = $[23];
 	return t8;
 };
-function _temp(state_0) {
-	return state_0.context.iframeElement;
-}
-function _temp2(item_1) {
-	return String(item_1.id);
+function _temp(item_1) {
+	return item_1.id;
 }
 
 //#endregion