camox 0.14.2 → 0.16.0

package/dist/core/createBlock.js

@@ -274,7 +274,11 @@ function createBlock(options) {
 		}, fieldData) });
 	};
 	const Embed = (t0) => {
-		const $ = c(58);
+		const $ = c(59);
+		if ($[0] !== "8cc8be56750b20682f66c3aa201873fa6c45d7eaa41d36f57252a78bdb19fa7e") {
+			for (let $i = 0; $i < 59; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+			$[0] = "8cc8be56750b20682f66c3aa201873fa6c45d7eaa41d36f57252a78bdb19fa7e";
+		}
 		const { name, children } = t0;
 		const blockContext = React.use(Context);
 		if (!blockContext) throw new Error("Embed must be used within a Block Component");
@@ -285,84 +289,84 @@ function createBlock(options) {
 		const fieldValue = repeaterContext ? repeaterContext.itemContent[name] : content[name];
 		const t1 = String(name);
 		let t2;
-		if ($[0] !== blockId || $[1] !== repeaterContext || $[2] !== t1) {
+		if ($[1] !== blockId || $[2] !== repeaterContext || $[3] !== t1) {
 			t2 = getOverlayFieldId(blockId, repeaterContext, t1);
-			$[0] = blockId;
-			$[1] = repeaterContext;
-			$[2] = t1;
-			$[3] = t2;
-		} else t2 = $[3];
+			$[1] = blockId;
+			$[2] = repeaterContext;
+			$[3] = t1;
+			$[4] = t2;
+		} else t2 = $[4];
 		const fieldId = t2;
 		const [isOpen, setIsOpen] = React.useState(false);
 		const [urlValue, setUrlValue] = React.useState(fieldValue);
 		const [isHovered, setIsHovered] = React.useState(false);
 		const timerRef = React.useRef(null);
 		let t3;
-		if ($[4] !== fieldId) {
+		if ($[5] !== fieldId) {
 			t3 = { fieldId };
-			$[4] = fieldId;
-			$[5] = t3;
-		} else t3 = $[5];
+			$[5] = fieldId;
+			$[6] = t3;
+		} else t3 = $[6];
 		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", t3);
 		let t4;
 		let t5;
-		if ($[6] !== isHoveredFromSidebar) {
+		if ($[7] !== isHoveredFromSidebar) {
 			t4 = () => {
 				setIsHovered(isHoveredFromSidebar);
 			};
 			t5 = [isHoveredFromSidebar];
-			$[6] = isHoveredFromSidebar;
-			$[7] = t4;
-			$[8] = t5;
+			$[7] = isHoveredFromSidebar;
+			$[8] = t4;
+			$[9] = t5;
 		} else {
-			t4 = $[7];
-			t5 = $[8];
+			t4 = $[8];
+			t5 = $[9];
 		}
 		React.useEffect(t4, t5);
 		let t6;
-		if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
 			t6 = blockMutations.updateContent();
-			$[9] = t6;
-		} else t6 = $[9];
+			$[10] = t6;
+		} else t6 = $[10];
 		const updateBlockContent = useMutation(t6);
 		let t7;
-		if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
 			t7 = repeatableItemMutations.updateContent();
-			$[10] = t7;
-		} else t7 = $[10];
+			$[11] = t7;
+		} else t7 = $[11];
 		const updateRepeatableContent = useMutation(t7);
 		let t8;
 		let t9;
-		if ($[11] !== fieldValue || $[12] !== isOpen) {
+		if ($[12] !== fieldValue || $[13] !== isOpen) {
 			t8 = () => {
 				if (!isOpen) setUrlValue(fieldValue);
 			};
 			t9 = [fieldValue, isOpen];
-			$[11] = fieldValue;
-			$[12] = isOpen;
-			$[13] = t8;
-			$[14] = t9;
+			$[12] = fieldValue;
+			$[13] = isOpen;
+			$[14] = t8;
+			$[15] = t9;
 		} else {
-			t8 = $[13];
-			t9 = $[14];
+			t8 = $[14];
+			t9 = $[15];
 		}
 		React.useEffect(t8, t9);
 		let t10;
 		let t11;
-		if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
 			t10 = () => () => {
 				if (timerRef.current) clearTimeout(timerRef.current);
 			};
 			t11 = [];
-			$[15] = t10;
-			$[16] = t11;
+			$[16] = t10;
+			$[17] = t11;
 		} else {
-			t10 = $[15];
-			t11 = $[16];
+			t10 = $[16];
+			t11 = $[17];
 		}
 		React.useEffect(t10, t11);
 		let t12;
-		if ($[17] !== blockId || $[18] !== name || $[19] !== repeaterContext || $[20] !== updateBlockContent || $[21] !== updateRepeatableContent) {
+		if ($[18] !== blockId || $[19] !== name || $[20] !== repeaterContext || $[21] !== updateBlockContent || $[22] !== updateRepeatableContent) {
 			t12 = (e) => {
 				const newValue = e.target.value;
 				setUrlValue(newValue);
@@ -378,16 +382,16 @@ function createBlock(options) {
 					});
 				}, 500);
 			};
-			$[17] = blockId;
-			$[18] = name;
-			$[19] = repeaterContext;
-			$[20] = updateBlockContent;
-			$[21] = updateRepeatableContent;
-			$[22] = t12;
-		} else t12 = $[22];
+			$[18] = blockId;
+			$[19] = name;
+			$[20] = repeaterContext;
+			$[21] = updateBlockContent;
+			$[22] = updateRepeatableContent;
+			$[23] = t12;
+		} else t12 = $[23];
 		const handleUrlChange = t12;
 		let t13;
-		if ($[23] !== blockId || $[24] !== name || $[25] !== repeaterContext) {
+		if ($[24] !== blockId || $[25] !== name || $[26] !== repeaterContext) {
 			t13 = (open, _eventDetails) => {
 				setIsOpen(open);
 				if (open) if (repeaterContext?.itemId != null) previewStore.send({
@@ -404,11 +408,11 @@ function createBlock(options) {
 					fieldType: "Embed"
 				});
 			};
-			$[23] = blockId;
-			$[24] = name;
-			$[25] = repeaterContext;
-			$[26] = t13;
-		} else t13 = $[26];
+			$[24] = blockId;
+			$[25] = name;
+			$[26] = repeaterContext;
+			$[27] = t13;
+		} else t13 = $[27];
 		const handleOpenChange = t13;
 		const t14 = isContentEditable ? isOpen : false;
 		const t15 = isContentEditable ? handleOpenChange : void 0;
@@ -418,19 +422,19 @@ function createBlock(options) {
 		const t19 = isContentEditable && isOpen || void 0;
 		const t20 = mode === "layout" ? "layout" : void 0;
 		let t21;
-		if ($[27] !== isContentEditable) {
+		if ($[28] !== isContentEditable) {
 			t21 = isContentEditable ? () => setIsHovered(true) : void 0;
-			$[27] = isContentEditable;
-			$[28] = t21;
-		} else t21 = $[28];
+			$[28] = isContentEditable;
+			$[29] = t21;
+		} else t21 = $[29];
 		let t22;
-		if ($[29] !== isContentEditable) {
+		if ($[30] !== isContentEditable) {
 			t22 = isContentEditable ? () => setIsHovered(false) : void 0;
-			$[29] = isContentEditable;
-			$[30] = t22;
-		} else t22 = $[30];
+			$[30] = isContentEditable;
+			$[31] = t22;
+		} else t22 = $[31];
 		let t23;
-		if ($[31] !== t16 || $[32] !== t17 || $[33] !== t18 || $[34] !== t19 || $[35] !== t20 || $[36] !== t21 || $[37] !== t22) {
+		if ($[32] !== t16 || $[33] !== t17 || $[34] !== t18 || $[35] !== t19 || $[36] !== t20 || $[37] !== t21 || $[38] !== t22) {
 			t23 = /* @__PURE__ */ jsx("div", {
 				"data-camox-field-id": t16,
 				"data-camox-field-type": t17,
@@ -440,24 +444,24 @@ function createBlock(options) {
 				onMouseEnter: t21,
 				onMouseLeave: t22
 			});
-			$[31] = t16;
-			$[32] = t17;
-			$[33] = t18;
-			$[34] = t19;
-			$[35] = t20;
-			$[36] = t21;
-			$[37] = t22;
-			$[38] = t23;
-		} else t23 = $[38];
+			$[32] = t16;
+			$[33] = t17;
+			$[34] = t18;
+			$[35] = t19;
+			$[36] = t20;
+			$[37] = t21;
+			$[38] = t22;
+			$[39] = t23;
+		} else t23 = $[39];
 		let t24;
-		if ($[39] !== children || $[40] !== fieldValue) {
+		if ($[40] !== children || $[41] !== fieldValue) {
 			t24 = children({ src: fieldValue }, { url: fieldValue });
-			$[39] = children;
-			$[40] = fieldValue;
-			$[41] = t24;
-		} else t24 = $[41];
+			$[40] = children;
+			$[41] = fieldValue;
+			$[42] = t24;
+		} else t24 = $[42];
 		let t25;
-		if ($[42] !== isContentEditable) {
+		if ($[43] !== isContentEditable) {
 			t25 = isContentEditable && /* @__PURE__ */ jsx("div", {
 				style: {
 					position: "absolute",
@@ -466,23 +470,23 @@ function createBlock(options) {
 				},
 				onClick: _temp
 			});
-			$[42] = isContentEditable;
-			$[43] = t25;
-		} else t25 = $[43];
+			$[43] = isContentEditable;
+			$[44] = t25;
+		} else t25 = $[44];
 		let t26;
-		if ($[44] !== t23 || $[45] !== t24 || $[46] !== t25) {
+		if ($[45] !== t23 || $[46] !== t24 || $[47] !== t25) {
 			t26 = /* @__PURE__ */ jsxs(PopoverTrigger, {
 				render: t23,
 				nativeButton: false,
 				children: [t24, t25]
 			});
-			$[44] = t23;
-			$[45] = t24;
-			$[46] = t25;
-			$[47] = t26;
-		} else t26 = $[47];
+			$[45] = t23;
+			$[46] = t24;
+			$[47] = t25;
+			$[48] = t26;
+		} else t26 = $[48];
 		let t27;
-		if ($[48] !== handleUrlChange || $[49] !== isContentEditable || $[50] !== name || $[51] !== urlValue) {
+		if ($[49] !== handleUrlChange || $[50] !== isContentEditable || $[51] !== name || $[52] !== urlValue) {
 			t27 = isContentEditable && /* @__PURE__ */ jsx(PopoverContent, {
 				className: "w-96 gap-2",
 				children: /* @__PURE__ */ jsxs("form", {
@@ -498,29 +502,33 @@ function createBlock(options) {
 					})]
 				})
 			});
-			$[48] = handleUrlChange;
-			$[49] = isContentEditable;
-			$[50] = name;
-			$[51] = urlValue;
-			$[52] = t27;
-		} else t27 = $[52];
+			$[49] = handleUrlChange;
+			$[50] = isContentEditable;
+			$[51] = name;
+			$[52] = urlValue;
+			$[53] = t27;
+		} else t27 = $[53];
 		let t28;
-		if ($[53] !== t14 || $[54] !== t15 || $[55] !== t26 || $[56] !== t27) {
+		if ($[54] !== t14 || $[55] !== t15 || $[56] !== t26 || $[57] !== t27) {
 			t28 = /* @__PURE__ */ jsxs(Popover, {
 				open: t14,
 				onOpenChange: t15,
 				children: [t26, t27]
 			});
-			$[53] = t14;
-			$[54] = t15;
-			$[55] = t26;
-			$[56] = t27;
-			$[57] = t28;
-		} else t28 = $[57];
+			$[54] = t14;
+			$[55] = t15;
+			$[56] = t26;
+			$[57] = t27;
+			$[58] = t28;
+		} else t28 = $[58];
 		return t28;
 	};
 	const Link = (t0) => {
-		const $ = c(37);
+		const $ = c(38);
+		if ($[0] !== "8cc8be56750b20682f66c3aa201873fa6c45d7eaa41d36f57252a78bdb19fa7e") {
+			for (let $i = 0; $i < 38; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+			$[0] = "8cc8be56750b20682f66c3aa201873fa6c45d7eaa41d36f57252a78bdb19fa7e";
+		}
 		const { name, children } = t0;
 		const blockContext = React.use(Context);
 		if (!blockContext) throw new Error("Link must be used within a Block Component");
@@ -531,48 +539,48 @@ function createBlock(options) {
 		const repeaterContext = React.use(RepeaterItemContext);
 		const fieldValue = normalizeLinkValue(repeaterContext ? repeaterContext.itemContent[name] : content[name]);
 		let t1;
-		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
 			t1 = blockMutations.updateContent();
-			$[0] = t1;
-		} else t1 = $[0];
+			$[1] = t1;
+		} else t1 = $[1];
 		const updateBlockContent = useMutation(t1);
 		let t2;
-		if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
 			t2 = repeatableItemMutations.updateContent();
-			$[1] = t2;
-		} else t2 = $[1];
+			$[2] = t2;
+		} else t2 = $[2];
 		const updateRepeatableContent = useMutation(t2);
 		const projectSlug = useProjectSlug();
 		let t3;
-		if ($[2] !== projectSlug) {
+		if ($[3] !== projectSlug) {
 			t3 = projectQueries.getBySlug(projectSlug);
-			$[2] = projectSlug;
-			$[3] = t3;
-		} else t3 = $[3];
+			$[3] = projectSlug;
+			$[4] = t3;
+		} else t3 = $[4];
 		const { data: project } = useQuery(t3);
 		let t4;
-		if ($[4] !== project?.id) {
+		if ($[5] !== project?.id) {
 			t4 = pageQueries.list(project?.id ?? 0);
-			$[4] = project?.id;
-			$[5] = t4;
-		} else t4 = $[5];
+			$[5] = project?.id;
+			$[6] = t4;
+		} else t4 = $[6];
 		const t5 = !!project;
 		let t6;
-		if ($[6] !== t4 || $[7] !== t5) {
+		if ($[7] !== t4 || $[8] !== t5) {
 			t6 = {
 				...t4,
 				enabled: t5
 			};
-			$[6] = t4;
-			$[7] = t5;
-			$[8] = t6;
-		} else t6 = $[8];
+			$[7] = t4;
+			$[8] = t5;
+			$[9] = t6;
+		} else t6 = $[9];
 		const { data: pages } = useQuery(t6);
 		let t7;
-		if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
 			t7 = { select: _temp2 };
-			$[9] = t7;
-		} else t7 = $[9];
+			$[10] = t7;
+		} else t7 = $[10];
 		const resolvedHref = resolveLinkHref(fieldValue, pages, useLocation(t7));
 		const fieldId = getOverlayFieldId(blockId, repeaterContext, String(name));
 		const [isEditing, setIsEditing] = React.useState(false);
@@ -587,21 +595,21 @@ function createBlock(options) {
 		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", { fieldId });
 		let t8;
 		let t9;
-		if ($[10] !== isHoveredFromSidebar) {
+		if ($[11] !== isHoveredFromSidebar) {
 			t8 = () => {
 				setIsHovered(isHoveredFromSidebar);
 			};
 			t9 = [isHoveredFromSidebar];
-			$[10] = isHoveredFromSidebar;
-			$[11] = t8;
-			$[12] = t9;
+			$[11] = isHoveredFromSidebar;
+			$[12] = t8;
+			$[13] = t9;
 		} else {
-			t8 = $[11];
-			t9 = $[12];
+			t8 = $[12];
+			t9 = $[13];
 		}
 		React.useEffect(t8, t9);
 		let t10;
-		if ($[13] !== blockId || $[14] !== name || $[15] !== repeaterContext || $[16] !== updateBlockContent || $[17] !== updateRepeatableContent) {
+		if ($[14] !== blockId || $[15] !== name || $[16] !== repeaterContext || $[17] !== updateBlockContent || $[18] !== updateRepeatableContent) {
 			t10 = (newLinkValue) => {
 				if (repeaterContext?.itemId != null) updateRepeatableContent.mutate({
 					id: repeaterContext.itemId,
@@ -612,13 +620,13 @@ function createBlock(options) {
 					content: { [name]: newLinkValue }
 				});
 			};
-			$[13] = blockId;
-			$[14] = name;
-			$[15] = repeaterContext;
-			$[16] = updateBlockContent;
-			$[17] = updateRepeatableContent;
-			$[18] = t10;
-		} else t10 = $[18];
+			$[14] = blockId;
+			$[15] = name;
+			$[16] = repeaterContext;
+			$[17] = updateBlockContent;
+			$[18] = updateRepeatableContent;
+			$[19] = t10;
+		} else t10 = $[19];
 		const saveLinkValue = t10;
 		const handleInput = (e) => {
 			const newText = e.target.textContent || "";
@@ -628,7 +636,7 @@ function createBlock(options) {
 			});
 		};
 		let t11;
-		if ($[19] !== blockId || $[20] !== name || $[21] !== repeaterContext) {
+		if ($[20] !== blockId || $[21] !== name || $[22] !== repeaterContext) {
 			t11 = () => {
 				setIsEditing(true);
 				setIsEditorFocused(true);
@@ -646,31 +654,31 @@ function createBlock(options) {
 					fieldType: "Link"
 				});
 			};
-			$[19] = blockId;
-			$[20] = name;
-			$[21] = repeaterContext;
-			$[22] = t11;
-		} else t11 = $[22];
+			$[20] = blockId;
+			$[21] = name;
+			$[22] = repeaterContext;
+			$[23] = t11;
+		} else t11 = $[23];
 		const handleFocus = t11;
 		let t12;
-		if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+		if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
 			t12 = () => {
 				setIsEditing(false);
 				setIsEditorFocused(false);
 			};
-			$[23] = t12;
-		} else t12 = $[23];
+			$[24] = t12;
+		} else t12 = $[24];
 		const handleBlur = t12;
 		let t13;
-		if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+		if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
 			t13 = (e_0) => {
 				e_0.stopPropagation();
 				previewStore.send({ type: "toggleContentSheet" });
 				setIsEditorFocused(false);
 				setIsEditing(false);
 			};
-			$[24] = t13;
-		} else t13 = $[24];
+			$[25] = t13;
+		} else t13 = $[25];
 		const handleEditLink = t13;
 		const linkData = {
 			text: displayText,
@@ -685,14 +693,14 @@ function createBlock(options) {
 		}, linkData) });
 		let t14;
 		let t15;
-		if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+		if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
 			t14 = () => setIsHovered(true);
 			t15 = () => setIsHovered(false);
-			$[25] = t14;
-			$[26] = t15;
+			$[26] = t14;
+			$[27] = t15;
 		} else {
-			t14 = $[25];
-			t15 = $[26];
+			t14 = $[26];
+			t15 = $[27];
 		}
 		const linkProps = {
 			ref: elementRef,
@@ -718,7 +726,7 @@ function createBlock(options) {
 		const T0 = Popover;
 		const t16 = children(linkProps, linkData);
 		let t17;
-		if ($[27] !== handleEditLink) {
+		if ($[28] !== handleEditLink) {
 			t17 = /* @__PURE__ */ jsx("button", {
 				type: "button",
 				className: "hover:bg-accent flex items-center gap-1.5 rounded-md px-2 py-1 text-sm transition-colors",
@@ -726,11 +734,11 @@ function createBlock(options) {
 				onClick: handleEditLink,
 				children: "Edit link"
 			});
-			$[27] = handleEditLink;
-			$[28] = t17;
-		} else t17 = $[28];
+			$[28] = handleEditLink;
+			$[29] = t17;
+		} else t17 = $[29];
 		let t18;
-		if ($[29] !== elementRef || $[30] !== t17) {
+		if ($[30] !== elementRef || $[31] !== t17) {
 			t18 = /* @__PURE__ */ jsx(PopoverContent, {
 				className: "w-auto p-2",
 				initialFocus: false,
@@ -738,26 +746,30 @@ function createBlock(options) {
 				align: "end",
 				children: t17
 			});
-			$[29] = elementRef;
-			$[30] = t17;
-			$[31] = t18;
-		} else t18 = $[31];
+			$[30] = elementRef;
+			$[31] = t17;
+			$[32] = t18;
+		} else t18 = $[32];
 		let t19;
-		if ($[32] !== T0 || $[33] !== isEditorFocused || $[34] !== t16 || $[35] !== t18) {
+		if ($[33] !== T0 || $[34] !== isEditorFocused || $[35] !== t16 || $[36] !== t18) {
 			t19 = /* @__PURE__ */ jsxs(T0, {
 				open: isEditorFocused,
 				children: [t16, t18]
 			});
-			$[32] = T0;
-			$[33] = isEditorFocused;
-			$[34] = t16;
-			$[35] = t18;
-			$[36] = t19;
-		} else t19 = $[36];
+			$[33] = T0;
+			$[34] = isEditorFocused;
+			$[35] = t16;
+			$[36] = t18;
+			$[37] = t19;
+		} else t19 = $[37];
 		return t19;
 	};
 	const Image = (t0) => {
-		const $ = c(25);
+		const $ = c(22);
+		if ($[0] !== "8cc8be56750b20682f66c3aa201873fa6c45d7eaa41d36f57252a78bdb19fa7e") {
+			for (let $i = 0; $i < 22; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+			$[0] = "8cc8be56750b20682f66c3aa201873fa6c45d7eaa41d36f57252a78bdb19fa7e";
+		}
 		const { name, children } = t0;
 		const blockContext = React.use(Context);
 		if (!blockContext) throw new Error("Image must be used within a Block Component");
@@ -770,115 +782,112 @@ function createBlock(options) {
 		const rawValue = isFileMarker(rawSource) ? resolveFileMarker(rawSource, filesMap) : rawSource;
 		const defaultValue = repeaterContext ? repeatableItemDefaults[repeaterContext.arrayFieldName]?.[String(name)] : contentDefaults[String(name)];
 		const fieldValue = rawValue ?? defaultValue;
-		const t1 = String(name);
-		let t2;
-		if ($[0] !== blockId || $[1] !== repeaterContext || $[2] !== t1) {
-			t2 = getOverlayFieldId(blockId, repeaterContext, t1);
-			$[0] = blockId;
-			$[1] = repeaterContext;
-			$[2] = t1;
-			$[3] = t2;
-		} else t2 = $[3];
-		const fieldId = t2;
+		const isInlineArrayItem = repeaterContext != null && repeaterContext.itemId == null;
+		const overlayFieldName = isInlineArrayItem ? repeaterContext.arrayFieldName : String(name);
+		const overlayItemId = isInlineArrayItem ? repeaterContext.containerItemId : repeaterContext?.itemId;
+		const fieldId = overlayItemId != null ? `${blockId}__${overlayItemId}__${overlayFieldName}` : `${blockId}__${overlayFieldName}`;
 		const [isHovered, setIsHovered] = React.useState(false);
-		const isFocused = useFieldSelection(blockId, String(name), "Image", repeaterContext?.itemId);
+		const isFocused = useFieldSelection(blockId, overlayFieldName, "Image", overlayItemId);
+		let t1;
+		if ($[1] !== fieldId) {
+			t1 = { fieldId };
+			$[1] = fieldId;
+			$[2] = t1;
+		} else t1 = $[2];
+		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", t1);
+		let t2;
 		let t3;
-		if ($[4] !== fieldId) {
-			t3 = { fieldId };
-			$[4] = fieldId;
-			$[5] = t3;
-		} else t3 = $[5];
-		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", t3);
-		let t4;
-		let t5;
-		if ($[6] !== isHoveredFromSidebar) {
-			t4 = () => {
+		if ($[3] !== isHoveredFromSidebar) {
+			t2 = () => {
 				setIsHovered(isHoveredFromSidebar);
 			};
-			t5 = [isHoveredFromSidebar];
-			$[6] = isHoveredFromSidebar;
-			$[7] = t4;
-			$[8] = t5;
+			t3 = [isHoveredFromSidebar];
+			$[3] = isHoveredFromSidebar;
+			$[4] = t2;
+			$[5] = t3;
 		} else {
-			t4 = $[7];
-			t5 = $[8];
+			t2 = $[4];
+			t3 = $[5];
 		}
-		React.useEffect(t4, t5);
-		let t6;
-		if ($[9] !== blockId || $[10] !== isContentEditable || $[11] !== name || $[12] !== repeaterContext) {
-			t6 = () => {
+		React.useEffect(t2, t3);
+		let t4;
+		if ($[6] !== blockId || $[7] !== isContentEditable || $[8] !== overlayFieldName || $[9] !== overlayItemId) {
+			t4 = () => {
 				if (!isContentEditable) return;
-				const imageFieldName = repeaterContext && repeaterContext.itemId == null ? repeaterContext.arrayFieldName : String(name);
-				if (repeaterContext?.itemId != null) previewStore.send({
+				if (overlayItemId != null) previewStore.send({
 					type: "selectItemField",
 					blockId,
-					itemId: repeaterContext.itemId,
-					fieldName: imageFieldName,
+					itemId: overlayItemId,
+					fieldName: overlayFieldName,
 					fieldType: "Image"
 				});
 				else previewStore.send({
 					type: "selectBlockField",
 					blockId,
-					fieldName: imageFieldName,
+					fieldName: overlayFieldName,
 					fieldType: "Image"
 				});
 				previewStore.send({ type: "toggleContentSheet" });
 			};
-			$[9] = blockId;
-			$[10] = isContentEditable;
-			$[11] = name;
-			$[12] = repeaterContext;
-			$[13] = t6;
-		} else t6 = $[13];
-		const handleClick = t6;
+			$[6] = blockId;
+			$[7] = isContentEditable;
+			$[8] = overlayFieldName;
+			$[9] = overlayItemId;
+			$[10] = t4;
+		} else t4 = $[10];
+		const handleClick = t4;
 		const imageProps = {
 			src: fieldValue.url,
 			alt: fieldValue.alt
 		};
 		if (!isContentEditable) return /* @__PURE__ */ jsx(Fragment, { children: children(imageProps, fieldValue) });
-		const t7 = "image";
-		const t8 = isHovered || void 0;
-		const t9 = isFocused || void 0;
-		const t10 = mode === "layout" ? "layout" : void 0;
-		let t11;
-		let t12;
-		if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-			t11 = () => setIsHovered(true);
-			t12 = () => setIsHovered(false);
-			$[14] = t11;
-			$[15] = t12;
+		const t5 = "image";
+		const t6 = isHovered || void 0;
+		const t7 = isFocused || void 0;
+		const t8 = mode === "layout" ? "layout" : void 0;
+		let t10;
+		let t9;
+		if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+			t9 = () => setIsHovered(true);
+			t10 = () => setIsHovered(false);
+			$[11] = t10;
+			$[12] = t9;
 		} else {
-			t11 = $[14];
-			t12 = $[15];
+			t10 = $[11];
+			t9 = $[12];
 		}
-		const t13 = children(imageProps, fieldValue);
-		let t14;
-		if ($[16] !== fieldId || $[17] !== handleClick || $[18] !== t10 || $[19] !== t11 || $[20] !== t12 || $[21] !== t13 || $[22] !== t8 || $[23] !== t9) {
-			t14 = /* @__PURE__ */ jsx("div", {
+		const t11 = children(imageProps, fieldValue);
+		let t12;
+		if ($[13] !== fieldId || $[14] !== handleClick || $[15] !== t10 || $[16] !== t11 || $[17] !== t6 || $[18] !== t7 || $[19] !== t8 || $[20] !== t9) {
+			t12 = /* @__PURE__ */ jsx("div", {
 				"data-camox-field-id": fieldId,
-				"data-camox-field-type": t7,
-				"data-camox-hovered": t8,
-				"data-camox-focused": t9,
-				"data-camox-overlay-mode": t10,
-				onMouseEnter: t11,
-				onMouseLeave: t12,
+				"data-camox-field-type": t5,
+				"data-camox-hovered": t6,
+				"data-camox-focused": t7,
+				"data-camox-overlay-mode": t8,
+				onMouseEnter: t9,
+				onMouseLeave: t10,
 				onClick: handleClick,
-				children: t13
+				children: t11
 			});
-			$[16] = fieldId;
-			$[17] = handleClick;
-			$[18] = t10;
-			$[19] = t11;
-			$[20] = t12;
-			$[21] = t13;
-			$[22] = t8;
-			$[23] = t9;
-			$[24] = t14;
-		} else t14 = $[24];
-		return t14;
+			$[13] = fieldId;
+			$[14] = handleClick;
+			$[15] = t10;
+			$[16] = t11;
+			$[17] = t6;
+			$[18] = t7;
+			$[19] = t8;
+			$[20] = t9;
+			$[21] = t12;
+		} else t12 = $[21];
+		return t12;
 	};
 	const File = (t0) => {
-		const $ = c(8);
+		const $ = c(9);
+		if ($[0] !== "8cc8be56750b20682f66c3aa201873fa6c45d7eaa41d36f57252a78bdb19fa7e") {
+			for (let $i = 0; $i < 9; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+			$[0] = "8cc8be56750b20682f66c3aa201873fa6c45d7eaa41d36f57252a78bdb19fa7e";
+		}
 		const { name, children } = t0;
 		const blockContext = React.use(Context);
 		if (!blockContext) throw new Error("File must be used within a Block Component");
@@ -887,7 +896,7 @@ function createBlock(options) {
 		const { filesMap } = useNormalizedData();
 		const rawSource = repeaterContext ? repeaterContext.itemContent[name] : content[name];
 		let t1;
-		if ($[0] !== children || $[1] !== filesMap || $[2] !== name || $[3] !== rawSource || $[4] !== repeaterContext) {
+		if ($[1] !== children || $[2] !== filesMap || $[3] !== name || $[4] !== rawSource || $[5] !== repeaterContext) {
 			const rawValue = isFileMarker(rawSource) ? resolveFileMarker(rawSource, filesMap) : rawSource;
 			const defaultValue = repeaterContext ? repeatableItemDefaults[repeaterContext.arrayFieldName]?.[String(name)] : contentDefaults[String(name)];
 			const fieldValue = rawValue ?? defaultValue;
@@ -895,23 +904,27 @@ function createBlock(options) {
 				href: fieldValue.url,
 				download: fieldValue.filename
 			}, fieldValue);
-			$[0] = children;
-			$[1] = filesMap;
-			$[2] = name;
-			$[3] = rawSource;
-			$[4] = repeaterContext;
-			$[5] = t1;
-		} else t1 = $[5];
+			$[1] = children;
+			$[2] = filesMap;
+			$[3] = name;
+			$[4] = rawSource;
+			$[5] = repeaterContext;
+			$[6] = t1;
+		} else t1 = $[6];
 		let t2;
-		if ($[6] !== t1) {
+		if ($[7] !== t1) {
 			t2 = /* @__PURE__ */ jsx(Fragment, { children: t1 });
-			$[6] = t1;
-			$[7] = t2;
-		} else t2 = $[7];
+			$[7] = t1;
+			$[8] = t2;
+		} else t2 = $[8];
 		return t2;
 	};
 	const RepeaterItemWrapper = (t0) => {
-		const $ = c(8);
+		const $ = c(9);
+		if ($[0] !== "8cc8be56750b20682f66c3aa201873fa6c45d7eaa41d36f57252a78bdb19fa7e") {
+			for (let $i = 0; $i < 9; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+			$[0] = "8cc8be56750b20682f66c3aa201873fa6c45d7eaa41d36f57252a78bdb19fa7e";
+		}
 		const { itemId, blockId, mode, children } = t0;
 		const isContentEditable = useIsEditable(mode);
 		const { window: iframeWindow } = useFrame();
@@ -919,67 +932,75 @@ function createBlock(options) {
 		const t1 = String(blockId);
 		const t2 = String(itemId);
 		let t3;
-		if ($[0] !== t1 || $[1] !== t2) {
+		if ($[1] !== t1 || $[2] !== t2) {
 			t3 = {
 				blockId: t1,
 				itemId: t2
 			};
-			$[0] = t1;
-			$[1] = t2;
-			$[2] = t3;
-		} else t3 = $[2];
+			$[1] = t1;
+			$[2] = t2;
+			$[3] = t3;
+		} else t3 = $[3];
 		const isHovered = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_REPEATER_ITEM", "CAMOX_HOVER_REPEATER_ITEM_END", t3);
 		const showOverlay = isContentEditable && (isHovered || isRepeaterHovered);
 		const t4 = isContentEditable ? itemId : void 0;
 		const t5 = showOverlay || void 0;
 		const t6 = mode === "layout" ? "layout" : void 0;
 		let t7;
-		if ($[3] !== children || $[4] !== t4 || $[5] !== t5 || $[6] !== t6) {
+		if ($[4] !== children || $[5] !== t4 || $[6] !== t5 || $[7] !== t6) {
 			t7 = /* @__PURE__ */ jsx("div", {
 				"data-camox-repeater-item-id": t4,
 				"data-camox-hovered": t5,
 				"data-camox-overlay-mode": t6,
 				children
 			});
-			$[3] = children;
-			$[4] = t4;
-			$[5] = t5;
-			$[6] = t6;
-			$[7] = t7;
-		} else t7 = $[7];
+			$[4] = children;
+			$[5] = t4;
+			$[6] = t5;
+			$[7] = t6;
+			$[8] = t7;
+		} else t7 = $[8];
 		return t7;
 	};
 	const RepeaterHoverProvider = (t0) => {
-		const $ = c(6);
+		const $ = c(7);
+		if ($[0] !== "8cc8be56750b20682f66c3aa201873fa6c45d7eaa41d36f57252a78bdb19fa7e") {
+			for (let $i = 0; $i < 7; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+			$[0] = "8cc8be56750b20682f66c3aa201873fa6c45d7eaa41d36f57252a78bdb19fa7e";
+		}
 		const { blockId, fieldName, children } = t0;
 		const isContentEditable = useIsEditable("site");
 		const { window: iframeWindow } = useFrame();
 		const t1 = String(blockId);
 		let t2;
-		if ($[0] !== fieldName || $[1] !== t1) {
+		if ($[1] !== fieldName || $[2] !== t1) {
 			t2 = {
 				blockId: t1,
 				fieldName
 			};
-			$[0] = fieldName;
-			$[1] = t1;
-			$[2] = t2;
-		} else t2 = $[2];
+			$[1] = fieldName;
+			$[2] = t1;
+			$[3] = t2;
+		} else t2 = $[3];
 		const isHovered = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_REPEATER", "CAMOX_HOVER_REPEATER_END", t2);
 		let t3;
-		if ($[3] !== children || $[4] !== isHovered) {
+		if ($[4] !== children || $[5] !== isHovered) {
 			t3 = /* @__PURE__ */ jsx(RepeaterHoverContext.Provider, {
 				value: isHovered,
 				children
 			});
-			$[3] = children;
-			$[4] = isHovered;
-			$[5] = t3;
-		} else t3 = $[5];
+			$[4] = children;
+			$[5] = isHovered;
+			$[6] = t3;
+		} else t3 = $[6];
 		return t3;
 	};
 	const Repeater = (t0) => {
-		const $ = c(28);
+		const $ = c(30);
+		if ($[0] !== "8cc8be56750b20682f66c3aa201873fa6c45d7eaa41d36f57252a78bdb19fa7e") {
+			for (let $i = 0; $i < 30; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+			$[0] = "8cc8be56750b20682f66c3aa201873fa6c45d7eaa41d36f57252a78bdb19fa7e";
+		}
 		const { name, children } = t0;
 		const blockContext = React.use(Context);
 		if (!blockContext) throw new Error("Repeater must be used within a Block Component");
@@ -998,18 +1019,18 @@ function createBlock(options) {
 		let t1;
 		let t2;
 		let t3;
-		if ($[0] !== blockId || $[1] !== children || $[2] !== fieldName || $[3] !== itemsMap || $[4] !== mode || $[5] !== name || $[6] !== parentRepeaterContext || $[7] !== source) {
+		if ($[1] !== blockId || $[2] !== children || $[3] !== fieldName || $[4] !== itemsMap || $[5] !== mode || $[6] !== name || $[7] !== parentRepeaterContext || $[8] !== source) {
 			let arrayValue = source ?? [];
 			if (!Array.isArray(arrayValue)) throw new Error(`Field "${String(name)}" is not an array`);
 			let t4;
-			if ($[12] !== itemsMap) {
+			if ($[13] !== itemsMap) {
 				t4 = (item) => {
 					if (isItemMarker(item)) return itemsMap.get(item._itemId) ?? null;
 					return item;
 				};
-				$[12] = itemsMap;
-				$[13] = t4;
-			} else t4 = $[13];
+				$[13] = itemsMap;
+				$[14] = t4;
+			} else t4 = $[14];
 			arrayValue = arrayValue.map(t4).filter(Boolean);
 			if (arrayValue.length === 0) {
 				const fieldSchema = parentRepeaterContext ? typeboxSchema.properties[parentRepeaterContext.arrayFieldName]?.items?.properties?.[fieldName] : typeboxSchema.properties[fieldName];
@@ -1019,14 +1040,14 @@ function createBlock(options) {
 					const itemProps = fieldSchema.items?.properties;
 					if (defaultCount > 0 && itemProps) {
 						let t5;
-						if ($[14] !== defaultCount || $[15] !== itemProps) {
+						if ($[15] !== defaultCount || $[16] !== itemProps) {
 							const itemContent = {};
 							for (const [propName, propSchema] of Object.entries(itemProps)) if (propSchema && typeof propSchema === "object" && "default" in propSchema) itemContent[propName] = propSchema.default;
 							t5 = Array.from({ length: defaultCount }, () => ({ ...itemContent }));
-							$[14] = defaultCount;
-							$[15] = itemProps;
-							$[16] = t5;
-						} else t5 = $[16];
+							$[15] = defaultCount;
+							$[16] = itemProps;
+							$[17] = t5;
+						} else t5 = $[17];
 						arrayValue = t5;
 					}
 				}
@@ -1036,7 +1057,7 @@ function createBlock(options) {
 			t1 = blockId;
 			t2 = fieldName;
 			let t5;
-			if ($[17] !== blockId || $[18] !== children || $[19] !== fieldName || $[20] !== mode || $[21] !== settingsDefaultsForField) {
+			if ($[18] !== blockId || $[19] !== children || $[20] !== fieldName || $[21] !== mode || $[22] !== parentRepeaterContext?.containerItemId || $[23] !== settingsDefaultsForField) {
 				t5 = (item_0, index) => {
 					const isDbItem = item_0.content !== void 0 && item_0.id != null;
 					const itemContent_0 = {
@@ -1045,7 +1066,7 @@ function createBlock(options) {
 					};
 					const itemSettings = {
 						...settingsDefaultsForField,
-						...(isDbItem ? item_0.settings : null) ?? {}
+						...isDbItem ? item_0.settings : null
 					};
 					const itemId = isDbItem ? item_0.id : void 0;
 					const useItemSetting = (settingName) => itemSettings[settingName];
@@ -1064,7 +1085,8 @@ function createBlock(options) {
 							itemIndex: index,
 							itemContent: itemContent_0,
 							itemSettings,
-							itemId
+							itemId,
+							containerItemId: itemId ?? parentRepeaterContext?.containerItemId
 						},
 						children: /* @__PURE__ */ jsx(RepeaterItemWrapper, {
 							itemId,
@@ -1074,49 +1096,54 @@ function createBlock(options) {
 						})
 					}, itemId ?? index);
 				};
-				$[17] = blockId;
-				$[18] = children;
-				$[19] = fieldName;
-				$[20] = mode;
-				$[21] = settingsDefaultsForField;
-				$[22] = t5;
-			} else t5 = $[22];
+				$[18] = blockId;
+				$[19] = children;
+				$[20] = fieldName;
+				$[21] = mode;
+				$[22] = parentRepeaterContext?.containerItemId;
+				$[23] = settingsDefaultsForField;
+				$[24] = t5;
+			} else t5 = $[24];
 			t3 = arrayValue.map(t5);
-			$[0] = blockId;
-			$[1] = children;
-			$[2] = fieldName;
-			$[3] = itemsMap;
-			$[4] = mode;
-			$[5] = name;
-			$[6] = parentRepeaterContext;
-			$[7] = source;
-			$[8] = T0;
-			$[9] = t1;
-			$[10] = t2;
-			$[11] = t3;
+			$[1] = blockId;
+			$[2] = children;
+			$[3] = fieldName;
+			$[4] = itemsMap;
+			$[5] = mode;
+			$[6] = name;
+			$[7] = parentRepeaterContext;
+			$[8] = source;
+			$[9] = T0;
+			$[10] = t1;
+			$[11] = t2;
+			$[12] = t3;
 		} else {
-			T0 = $[8];
-			t1 = $[9];
-			t2 = $[10];
-			t3 = $[11];
+			T0 = $[9];
+			t1 = $[10];
+			t2 = $[11];
+			t3 = $[12];
 		}
 		let t4;
-		if ($[23] !== T0 || $[24] !== t1 || $[25] !== t2 || $[26] !== t3) {
+		if ($[25] !== T0 || $[26] !== t1 || $[27] !== t2 || $[28] !== t3) {
 			t4 = /* @__PURE__ */ jsx(T0, {
 				blockId: t1,
 				fieldName: t2,
 				children: t3
 			});
-			$[23] = T0;
-			$[24] = t1;
-			$[25] = t2;
-			$[26] = t3;
-			$[27] = t4;
-		} else t4 = $[27];
+			$[25] = T0;
+			$[26] = t1;
+			$[27] = t2;
+			$[28] = t3;
+			$[29] = t4;
+		} else t4 = $[29];
 		return t4;
 	};
 	const BlockComponent = (t0) => {
-		const $ = c(69);
+		const $ = c(70);
+		if ($[0] !== "8cc8be56750b20682f66c3aa201873fa6c45d7eaa41d36f57252a78bdb19fa7e") {
+			for (let $i = 0; $i < 70; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+			$[0] = "8cc8be56750b20682f66c3aa201873fa6c45d7eaa41d36f57252a78bdb19fa7e";
+		}
 		const { blockData, mode, isFirstBlock, showAddBlockTop, showAddBlockBottom, addBlockAfterPosition } = t0;
 		const isContentEditable = useIsEditable(mode);
 		const { window: iframeWindow } = useFrame();
@@ -1130,80 +1157,80 @@ function createBlock(options) {
 		const [isFirstRender, setIsFirstRender] = React.useState(true);
 		let t1;
 		let t2;
-		if ($[0] !== isFirstRender) {
+		if ($[1] !== isFirstRender) {
 			t1 = () => {
 				if (isFirstRender) setIsFirstRender(false);
 			};
 			t2 = [isFirstRender];
-			$[0] = isFirstRender;
-			$[1] = t1;
-			$[2] = t2;
+			$[1] = isFirstRender;
+			$[2] = t1;
+			$[3] = t2;
 		} else {
-			t1 = $[1];
-			t2 = $[2];
+			t1 = $[2];
+			t2 = $[3];
 		}
 		React.useEffect(t1, t2);
 		let t3;
-		if ($[3] !== isBlockSelected || $[4] !== isFirstRender) {
+		if ($[4] !== isBlockSelected || $[5] !== isFirstRender) {
 			t3 = () => {
 				if (isBlockSelected && ref.current) ref.current.scrollIntoView({
 					behavior: isFirstRender ? "instant" : "smooth",
 					block: isFirstRender ? "start" : "nearest"
 				});
 			};
-			$[3] = isBlockSelected;
-			$[4] = isFirstRender;
-			$[5] = t3;
-		} else t3 = $[5];
+			$[4] = isBlockSelected;
+			$[5] = isFirstRender;
+			$[6] = t3;
+		} else t3 = $[6];
 		let t4;
-		if ($[6] !== isBlockSelected || $[7] !== isFirstRender || $[8] !== isPageContentSheetOpen) {
+		if ($[7] !== isBlockSelected || $[8] !== isFirstRender || $[9] !== isPageContentSheetOpen) {
 			t4 = [
 				isBlockSelected,
 				isFirstRender,
 				isPageContentSheetOpen
 			];
-			$[6] = isBlockSelected;
-			$[7] = isFirstRender;
-			$[8] = isPageContentSheetOpen;
-			$[9] = t4;
-		} else t4 = $[9];
+			$[7] = isBlockSelected;
+			$[8] = isFirstRender;
+			$[9] = isPageContentSheetOpen;
+			$[10] = t4;
+		} else t4 = $[10];
 		React.useEffect(t3, t4);
 		const t5 = String(blockData._id);
 		let t6;
-		if ($[10] !== t5) {
+		if ($[11] !== t5) {
 			t6 = { blockId: t5 };
-			$[10] = t5;
-			$[11] = t6;
-		} else t6 = $[11];
+			$[11] = t5;
+			$[12] = t6;
+		} else t6 = $[12];
 		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_BLOCK", "CAMOX_HOVER_BLOCK_END", t6);
 		let t7;
 		let t8;
-		if ($[12] !== isHoveredFromSidebar) {
+		if ($[13] !== isHoveredFromSidebar) {
 			t7 = () => {
 				setIsHovered(isHoveredFromSidebar);
 			};
 			t8 = [isHoveredFromSidebar];
-			$[12] = isHoveredFromSidebar;
-			$[13] = t7;
-			$[14] = t8;
+			$[13] = isHoveredFromSidebar;
+			$[14] = t7;
+			$[15] = t8;
 		} else {
-			t7 = $[13];
-			t8 = $[14];
+			t7 = $[14];
+			t8 = $[15];
 		}
 		React.useEffect(t7, t8);
 		let result;
-		if ($[15] !== blockData.content) {
+		if ($[16] !== blockData.content) {
 			result = { ...blockData.content };
 			for (const key in result) {
 				const value = result[key];
 				if (Array.isArray(value) && value.length > 0 && value[0]?.content !== void 0) result[key] = value.map(_temp9);
 			}
-			$[15] = blockData.content;
-			$[16] = result;
-		} else result = $[16];
+			$[16] = blockData.content;
+			$[17] = result;
+		} else result = $[17];
 		const normalizedContent = result;
 		let t9;
-		if ($[17] !== blockData._id || $[18] !== isContentEditable) {
+		if ($[18] !== blockData._id || $[19] !== isContentEditable) {
 			t9 = (e) => {
 				if (!isContentEditable) return;
 				if (e.target.closest("[data-camox-field-id]")) return;
@@ -1212,31 +1239,31 @@ function createBlock(options) {
 					blockId: blockData._id
 				});
 			};
-			$[17] = blockData._id;
-			$[18] = isContentEditable;
-			$[19] = t9;
-		} else t9 = $[19];
+			$[18] = blockData._id;
+			$[19] = isContentEditable;
+			$[20] = t9;
+		} else t9 = $[20];
 		const handleClick = t9;
 		let t10;
-		if ($[20] !== isContentEditable) {
+		if ($[21] !== isContentEditable) {
 			t10 = () => {
 				if (isContentEditable) setIsHovered(true);
 			};
-			$[20] = isContentEditable;
-			$[21] = t10;
-		} else t10 = $[21];
+			$[21] = isContentEditable;
+			$[22] = t10;
+		} else t10 = $[22];
 		const handleMouseEnter = t10;
 		let t11;
-		if ($[22] !== isContentEditable) {
+		if ($[23] !== isContentEditable) {
 			t11 = () => {
 				if (isContentEditable) setIsHovered(false);
 			};
-			$[22] = isContentEditable;
-			$[23] = t11;
-		} else t11 = $[23];
+			$[23] = isContentEditable;
+			$[24] = t11;
+		} else t11 = $[24];
 		const handleMouseLeave = t11;
 		let t12;
-		if ($[24] !== addBlockAfterPosition || $[25] !== blockData.position) {
+		if ($[25] !== addBlockAfterPosition || $[26] !== blockData.position) {
 			t12 = (insertPosition) => {
 				postOverlayMessage({
 					type: "CAMOX_ADD_BLOCK_REQUEST",
@@ -1245,70 +1272,70 @@ function createBlock(options) {
 					...addBlockAfterPosition !== void 0 && { afterPosition: addBlockAfterPosition }
 				});
 			};
-			$[24] = addBlockAfterPosition;
-			$[25] = blockData.position;
-			$[26] = t12;
-		} else t12 = $[26];
+			$[25] = addBlockAfterPosition;
+			$[26] = blockData.position;
+			$[27] = t12;
+		} else t12 = $[27];
 		const handleAddBlockClick = t12;
 		const shouldShowOverlay = isContentEditable && (isHovered || isBlockSelected) && !isAddBlockSheetOpen;
 		const shouldShowSheetOverlay = isAddBlockSheetOpen && mode !== "peek" || isPageContentSheetOpen && !isBlockSelected;
 		let t13;
-		if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+		if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
 			t13 = {
 				position: "relative",
 				scrollMargin: "5rem",
 				background: "var(--background)"
 			};
-			$[27] = t13;
-		} else t13 = $[27];
+			$[28] = t13;
+		} else t13 = $[28];
 		const t14 = isContentEditable ? blockData._id : void 0;
 		const t15 = shouldShowOverlay && !isBlockSelected || void 0;
 		const t16 = shouldShowOverlay && isBlockSelected || void 0;
 		const t17 = mode === "layout" ? "layout" : void 0;
 		const t18 = blockData._id;
 		let t19;
-		if ($[28] !== blockData.content) {
+		if ($[29] !== blockData.content) {
 			t19 = {
 				...contentDefaults,
 				...blockData.content
 			};
-			$[28] = blockData.content;
-			$[29] = t19;
-		} else t19 = $[29];
+			$[29] = blockData.content;
+			$[30] = t19;
+		} else t19 = $[30];
 		const merged = t19;
 		let overrides;
-		if ($[30] !== merged) {
+		if ($[31] !== merged) {
 			overrides = {};
 			for (const key_0 in merged) {
 				const val = merged[key_0];
 				if (val && typeof val === "object" && "url" in val && !val.url && contentDefaults[key_0]) overrides[key_0] = contentDefaults[key_0];
 			}
-			$[30] = merged;
-			$[31] = overrides;
-		} else overrides = $[31];
+			$[31] = merged;
+			$[32] = overrides;
+		} else overrides = $[32];
 		let t20;
-		if ($[32] !== merged || $[33] !== overrides) {
+		if ($[33] !== merged || $[34] !== overrides) {
 			t20 = {
 				...merged,
 				...overrides
 			};
-			$[32] = merged;
-			$[33] = overrides;
-			$[34] = t20;
-		} else t20 = $[34];
+			$[33] = merged;
+			$[34] = overrides;
+			$[35] = t20;
+		} else t20 = $[35];
 		const t21 = t20;
 		let t22;
-		if ($[35] !== blockData.settings) {
+		if ($[36] !== blockData.settings) {
 			t22 = {
 				...settingsDefaults,
 				...blockData.settings
 			};
-			$[35] = blockData.settings;
-			$[36] = t22;
-		} else t22 = $[36];
+			$[36] = blockData.settings;
+			$[37] = t22;
+		} else t22 = $[37];
 		const t23 = t22;
 		let t24;
-		if ($[37] !== blockData._id || $[38] !== isHovered || $[39] !== mode || $[40] !== t21 || $[41] !== t23) {
+		if ($[38] !== blockData._id || $[39] !== isHovered || $[40] !== mode || $[41] !== t21 || $[42] !== t23) {
 			t24 = {
 				blockId: t18,
 				content: t21,
@@ -1317,40 +1344,40 @@ function createBlock(options) {
 				isHovered,
 				setIsHovered
 			};
-			$[37] = blockData._id;
-			$[38] = isHovered;
-			$[39] = mode;
-			$[40] = t21;
-			$[41] = t23;
-			$[42] = t24;
-		} else t24 = $[42];
+			$[38] = blockData._id;
+			$[39] = isHovered;
+			$[40] = mode;
+			$[41] = t21;
+			$[42] = t23;
+			$[43] = t24;
+		} else t24 = $[43];
 		let t25;
-		if ($[43] !== normalizedContent) {
+		if ($[44] !== normalizedContent) {
 			t25 = /* @__PURE__ */ jsx(options.component, { content: normalizedContent });
-			$[43] = normalizedContent;
-			$[44] = t25;
-		} else t25 = $[44];
+			$[44] = normalizedContent;
+			$[45] = t25;
+		} else t25 = $[45];
 		let t26;
-		if ($[45] !== t24 || $[46] !== t25) {
+		if ($[46] !== t24 || $[47] !== t25) {
 			t26 = /* @__PURE__ */ jsx(Context.Provider, {
 				value: t24,
 				children: t25
 			});
-			$[45] = t24;
-			$[46] = t25;
-			$[47] = t26;
-		} else t26 = $[47];
+			$[46] = t24;
+			$[47] = t25;
+			$[48] = t26;
+		} else t26 = $[48];
 		let t27;
-		if ($[48] !== shouldShowSheetOverlay) {
+		if ($[49] !== shouldShowSheetOverlay) {
 			t27 = /* @__PURE__ */ jsx("div", {
 				className: "camox-sheet-overlay",
 				...shouldShowSheetOverlay ? { "data-camox-visible": "" } : {}
 			});
-			$[48] = shouldShowSheetOverlay;
-			$[49] = t27;
-		} else t27 = $[49];
+			$[49] = shouldShowSheetOverlay;
+			$[50] = t27;
+		} else t27 = $[50];
 		let t28;
-		if ($[50] !== handleAddBlockClick || $[51] !== isAnySideSheetOpen || $[52] !== isFirstBlock || $[53] !== mode || $[54] !== shouldShowOverlay || $[55] !== showAddBlockBottom || $[56] !== showAddBlockTop) {
+		if ($[51] !== handleAddBlockClick || $[52] !== isAnySideSheetOpen || $[53] !== isFirstBlock || $[54] !== mode || $[55] !== shouldShowOverlay || $[56] !== showAddBlockBottom || $[57] !== showAddBlockTop) {
 			t28 = shouldShowOverlay && /* @__PURE__ */ jsxs(Fragment, { children: [(showAddBlockTop ?? (mode !== "layout" && !isFirstBlock)) && /* @__PURE__ */ jsx(AddBlockControlBar, {
 				position: "top",
 				hidden: isAnySideSheetOpen,
@@ -1362,17 +1389,17 @@ function createBlock(options) {
 				onMouseLeave: () => setIsHovered(false),
 				onClick: () => handleAddBlockClick("after")
 			})] });
-			$[50] = handleAddBlockClick;
-			$[51] = isAnySideSheetOpen;
-			$[52] = isFirstBlock;
-			$[53] = mode;
-			$[54] = shouldShowOverlay;
-			$[55] = showAddBlockBottom;
-			$[56] = showAddBlockTop;
-			$[57] = t28;
-		} else t28 = $[57];
+			$[51] = handleAddBlockClick;
+			$[52] = isAnySideSheetOpen;
+			$[53] = isFirstBlock;
+			$[54] = mode;
+			$[55] = shouldShowOverlay;
+			$[56] = showAddBlockBottom;
+			$[57] = showAddBlockTop;
+			$[58] = t28;
+		} else t28 = $[58];
 		let t29;
-		if ($[58] !== handleClick || $[59] !== handleMouseEnter || $[60] !== handleMouseLeave || $[61] !== t14 || $[62] !== t15 || $[63] !== t16 || $[64] !== t17 || $[65] !== t26 || $[66] !== t27 || $[67] !== t28) {
+		if ($[59] !== handleClick || $[60] !== handleMouseEnter || $[61] !== handleMouseLeave || $[62] !== t14 || $[63] !== t15 || $[64] !== t16 || $[65] !== t17 || $[66] !== t26 || $[67] !== t27 || $[68] !== t28) {
 			t29 = /* @__PURE__ */ jsxs("div", {
 				className: "group visual-editing-block",
 				ref,
@@ -1390,18 +1417,18 @@ function createBlock(options) {
 					t28
 				]
 			});
-			$[58] = handleClick;
-			$[59] = handleMouseEnter;
-			$[60] = handleMouseLeave;
-			$[61] = t14;
-			$[62] = t15;
-			$[63] = t16;
-			$[64] = t17;
-			$[65] = t26;
-			$[66] = t27;
-			$[67] = t28;
-			$[68] = t29;
-		} else t29 = $[68];
+			$[59] = handleClick;
+			$[60] = handleMouseEnter;
+			$[61] = handleMouseLeave;
+			$[62] = t14;
+			$[63] = t15;
+			$[64] = t16;
+			$[65] = t17;
+			$[66] = t26;
+			$[67] = t27;
+			$[68] = t28;
+			$[69] = t29;
+		} else t29 = $[69];
 		return t29;
 	};
 	const useSetting = (name) => {
@@ -1414,7 +1441,11 @@ function createBlock(options) {
 	* Provides the same hover, selection, and sheet overlays as the main BlockComponent.
 	*/
 	const Detached = (t0) => {
-		const $ = c(30);
+		const $ = c(31);
+		if ($[0] !== "8cc8be56750b20682f66c3aa201873fa6c45d7eaa41d36f57252a78bdb19fa7e") {
+			for (let $i = 0; $i < 31; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+			$[0] = "8cc8be56750b20682f66c3aa201873fa6c45d7eaa41d36f57252a78bdb19fa7e";
+		}
 		const { children } = t0;
 		const ctx = React.use(Context);
 		if (!ctx) throw new Error("Detached must be used within a Block Component");
@@ -1427,32 +1458,32 @@ function createBlock(options) {
 		const isBlockSelected = selection?.blockId === blockId;
 		const t1 = String(blockId);
 		let t2;
-		if ($[0] !== t1) {
+		if ($[1] !== t1) {
 			t2 = { blockId: t1 };
-			$[0] = t1;
-			$[1] = t2;
-		} else t2 = $[1];
+			$[1] = t1;
+			$[2] = t2;
+		} else t2 = $[2];
 		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_BLOCK", "CAMOX_HOVER_BLOCK_END", t2);
 		let t3;
 		let t4;
-		if ($[2] !== isHoveredFromSidebar || $[3] !== setIsHovered) {
+		if ($[3] !== isHoveredFromSidebar || $[4] !== setIsHovered) {
 			t3 = () => {
 				setIsHovered(isHoveredFromSidebar);
 			};
 			t4 = [isHoveredFromSidebar, setIsHovered];
-			$[2] = isHoveredFromSidebar;
-			$[3] = setIsHovered;
-			$[4] = t3;
-			$[5] = t4;
+			$[3] = isHoveredFromSidebar;
+			$[4] = setIsHovered;
+			$[5] = t3;
+			$[6] = t4;
 		} else {
-			t3 = $[4];
-			t4 = $[5];
+			t3 = $[5];
+			t4 = $[6];
 		}
 		React.useEffect(t3, t4);
 		const shouldShowOverlay = isContentEditable && (isHovered || isBlockSelected) && !isAddBlockSheetOpen;
 		const shouldShowSheetOverlay = isAddBlockSheetOpen && mode !== "peek" || isPageContentSheetOpen && !isBlockSelected;
 		let t5;
-		if ($[6] !== blockId || $[7] !== isContentEditable) {
+		if ($[7] !== blockId || $[8] !== isContentEditable) {
 			t5 = (e) => {
 				if (!isContentEditable) return;
 				e.stopPropagation();
@@ -1461,35 +1492,35 @@ function createBlock(options) {
 					blockId
 				});
 			};
-			$[6] = blockId;
-			$[7] = isContentEditable;
-			$[8] = t5;
-		} else t5 = $[8];
+			$[7] = blockId;
+			$[8] = isContentEditable;
+			$[9] = t5;
+		} else t5 = $[9];
 		const handleClick = t5;
 		let t6;
-		if ($[9] !== isContentEditable || $[10] !== setIsHovered) {
+		if ($[10] !== isContentEditable || $[11] !== setIsHovered) {
 			t6 = () => {
 				if (isContentEditable) setIsHovered(true);
 			};
-			$[9] = isContentEditable;
-			$[10] = setIsHovered;
-			$[11] = t6;
-		} else t6 = $[11];
+			$[10] = isContentEditable;
+			$[11] = setIsHovered;
+			$[12] = t6;
+		} else t6 = $[12];
 		const handleMouseEnter = t6;
 		let t7;
-		if ($[12] !== isContentEditable || $[13] !== setIsHovered) {
+		if ($[13] !== isContentEditable || $[14] !== setIsHovered) {
 			t7 = () => {
 				if (isContentEditable) setIsHovered(false);
 			};
-			$[12] = isContentEditable;
-			$[13] = setIsHovered;
-			$[14] = t7;
-		} else t7 = $[14];
+			$[13] = isContentEditable;
+			$[14] = setIsHovered;
+			$[15] = t7;
+		} else t7 = $[15];
 		const handleMouseLeave = t7;
 		const [container, setContainer] = React.useState(null);
 		const t8 = shouldShowSheetOverlay ? 0 : 1;
 		let t9;
-		if ($[15] !== children || $[16] !== handleClick || $[17] !== handleMouseEnter || $[18] !== handleMouseLeave || $[19] !== t8) {
+		if ($[16] !== children || $[17] !== handleClick || $[18] !== handleMouseEnter || $[19] !== handleMouseLeave || $[20] !== t8) {
 			t9 = children({
 				ref: setContainer,
 				style: { opacity: t8 },
@@ -1497,15 +1528,15 @@ function createBlock(options) {
 				onMouseEnter: handleMouseEnter,
 				onMouseLeave: handleMouseLeave
 			});
-			$[15] = children;
-			$[16] = handleClick;
-			$[17] = handleMouseEnter;
-			$[18] = handleMouseLeave;
-			$[19] = t8;
-			$[20] = t9;
-		} else t9 = $[20];
+			$[16] = children;
+			$[17] = handleClick;
+			$[18] = handleMouseEnter;
+			$[19] = handleMouseLeave;
+			$[20] = t8;
+			$[21] = t9;
+		} else t9 = $[21];
 		let t10;
-		if ($[21] !== blockId || $[22] !== container || $[23] !== isBlockSelected || $[24] !== mode || $[25] !== shouldShowOverlay) {
+		if ($[22] !== blockId || $[23] !== container || $[24] !== isBlockSelected || $[25] !== mode || $[26] !== shouldShowOverlay) {
 			t10 = container && createPortal(/* @__PURE__ */ jsx(Fragment, { children: shouldShowOverlay && /* @__PURE__ */ jsx("div", {
 				"data-camox-block-id": blockId,
 				"data-camox-detached": true,
@@ -1518,20 +1549,20 @@ function createBlock(options) {
 					zIndex: 10
 				}
 			}) }), container);
-			$[21] = blockId;
-			$[22] = container;
-			$[23] = isBlockSelected;
-			$[24] = mode;
-			$[25] = shouldShowOverlay;
-			$[26] = t10;
-		} else t10 = $[26];
+			$[22] = blockId;
+			$[23] = container;
+			$[24] = isBlockSelected;
+			$[25] = mode;
+			$[26] = shouldShowOverlay;
+			$[27] = t10;
+		} else t10 = $[27];
 		let t11;
-		if ($[27] !== t10 || $[28] !== t9) {
+		if ($[28] !== t10 || $[29] !== t9) {
 			t11 = /* @__PURE__ */ jsxs(Fragment, { children: [t9, t10] });
-			$[27] = t10;
-			$[28] = t9;
-			$[29] = t11;
-		} else t11 = $[29];
+			$[28] = t10;
+			$[29] = t9;
+			$[30] = t11;
+		} else t11 = $[30];
 		return t11;
 	};
 	return {
@@ -1544,6 +1575,11 @@ function createBlock(options) {
 		Repeater,
 		useSetting,
 		_internal: {
+			/**
+			* The react component to be used at the page level when mapping on blocks content.
+			* It exposes context that will be consumed by the Field component, and provides visual editing
+			* capabilities (e.g. delete and reorder blocks).
+			*/
 			Component: BlockComponent,
 			id: options.id,
 			title: options.title,