camox 0.6.1 → 0.7.0

package/dist/core/createBlock.js

@@ -2,7 +2,7 @@ import { previewStore } from "../features/preview/previewStore.js";
 import { useIsPreviewSheetOpen } from "../features/preview/components/PreviewSideSheet.js";
 import { useProjectSlug } from "../lib/auth.js";
 import { blockMutations, pageQueries, projectQueries, repeatableItemMutations } from "../lib/queries.js";
-import { LAYOUT_OVERLAY_COLORS, OVERLAY_COLORS, OVERLAY_OFFSETS, OVERLAY_WIDTHS } from "../features/preview/overlayConstants.js";
+import { useFrame } from "../features/preview/components/Frame.js";
 import { postOverlayMessage } from "../features/preview/overlayMessages.js";
 import { isFileMarker, isItemMarker, resolveFileMarker, useNormalizedData } from "../lib/normalized-data.js";
 import { AddBlockControlBar } from "./components/AddBlockControlBar.js";
@@ -13,13 +13,11 @@ import { useOverlayMessage } from "./hooks/useOverlayMessage.js";
 import { Type } from "./lib/contentType.js";
 import { markdownToReactNodes } from "./lib/lexicalReact.js";
 import { c } from "react/compiler-runtime";
-import { useFrame } from "@camox/ui/frame";
 import { Input } from "@camox/ui/input";
 import { Kbd } from "@camox/ui/kbd";
 import { Label } from "@camox/ui/label";
-import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
+import { Popover, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
 import { toast } from "@camox/ui/toaster";
-import { Slot } from "@radix-ui/react-slot";
 import { Type as Type$1 } from "@sinclair/typebox";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { useSelector } from "@xstate/store/react";
@@ -179,7 +177,6 @@ function createBlock(options) {
 		if (!blockContext) throw new Error("Field must be used within a Block Component");
 		const { blockId, content, mode } = blockContext;
 		const isContentEditable = useIsEditable(mode);
-		const colors = mode === "layout" ? LAYOUT_OVERLAY_COLORS : OVERLAY_COLORS;
 		const elementRef = React.useRef(null);
 		const { window: iframeWindow } = useFrame();
 		const repeaterContext = React.use(RepeaterItemContext);
@@ -242,34 +239,32 @@ function createBlock(options) {
 		const handleMouseLeave = () => {
 			if (isContentEditable) setIsHovered(false);
 		};
-		const overlayStyle = isContentEditable && (isHovered || isFocused) ? {
-			outline: `${isFocused ? OVERLAY_WIDTHS.selected : OVERLAY_WIDTHS.hover} solid ${isFocused ? colors.selected : colors.hover}`,
-			outlineOffset: isFocused ? OVERLAY_OFFSETS.fieldSelected : OVERLAY_OFFSETS.fieldHover
-		} : void 0;
-		if (!isContentEditable) return /* @__PURE__ */ jsx(Fragment, { children: children(markdownToReactNodes(fieldValue)) });
-		return /* @__PURE__ */ jsx(Slot, {
+		const fieldData = { text: fieldValue };
+		if (!isContentEditable) return /* @__PURE__ */ jsx(Fragment, { children: children({ children: markdownToReactNodes(fieldValue) }, fieldData) });
+		return /* @__PURE__ */ jsx(Fragment, { children: children({
 			ref: elementRef,
 			"data-camox-field-id": fieldId,
+			"data-camox-hovered": isHovered || void 0,
+			"data-camox-focused": isFocused || void 0,
+			"data-camox-overlay-mode": mode === "layout" ? "layout" : void 0,
 			onMouseEnter: handleMouseEnter,
 			onMouseLeave: handleMouseLeave,
-			style: overlayStyle,
-			children: children(/* @__PURE__ */ jsx(InlineLexicalEditor, {
+			children: /* @__PURE__ */ jsx(InlineLexicalEditor, {
 				initialState: fieldValue,
 				externalState: fieldValue,
 				onChange: handleChange,
 				onFocus: handleFocus,
 				onBlur: handleBlur
-			}))
-		});
+			})
+		}, fieldData) });
 	};
 	const Embed = (t0) => {
-		const $ = c(55);
+		const $ = c(58);
 		const { name, children } = t0;
 		const blockContext = React.use(Context);
 		if (!blockContext) throw new Error("Embed must be used within a Block Component");
 		const { blockId, content, mode } = blockContext;
 		const isContentEditable = useIsEditable(mode);
-		const colors = mode === "layout" ? LAYOUT_OVERLAY_COLORS : OVERLAY_COLORS;
 		const { window: iframeWindow } = useFrame();
 		const repeaterContext = React.use(RepeaterItemContext);
 		const fieldValue = repeaterContext ? repeaterContext.itemContent[name] : content[name];
@@ -378,7 +373,7 @@ function createBlock(options) {
 		const handleUrlChange = t12;
 		let t13;
 		if ($[23] !== blockId || $[24] !== name || $[25] !== repeaterContext) {
-			t13 = (open) => {
+			t13 = (open, _eventDetails) => {
 				setIsOpen(open);
 				if (open) if (repeaterContext?.itemId) previewStore.send({
 					type: "selectItemField",
@@ -402,72 +397,78 @@ function createBlock(options) {
 		const handleOpenChange = t13;
 		const t14 = isContentEditable ? isOpen : false;
 		const t15 = isContentEditable ? handleOpenChange : void 0;
-		let t16;
-		if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
-			t16 = { position: "relative" };
-			$[27] = t16;
-		} else t16 = $[27];
-		let t17;
-		if ($[28] !== isContentEditable) {
-			t17 = isContentEditable ? () => setIsHovered(true) : void 0;
-			$[28] = isContentEditable;
-			$[29] = t17;
-		} else t17 = $[29];
-		let t18;
-		if ($[30] !== isContentEditable) {
-			t18 = isContentEditable ? () => setIsHovered(false) : void 0;
-			$[30] = isContentEditable;
-			$[31] = t18;
-		} else t18 = $[31];
-		let t19;
-		if ($[32] !== children || $[33] !== fieldValue) {
-			t19 = children(fieldValue);
-			$[32] = children;
-			$[33] = fieldValue;
+		const t16 = isContentEditable ? fieldId : void 0;
+		const t17 = isContentEditable ? "embed" : void 0;
+		const t18 = isContentEditable && isHovered || void 0;
+		const t19 = isContentEditable && isOpen || void 0;
+		const t20 = mode === "layout" ? "layout" : void 0;
+		let t21;
+		if ($[27] !== isContentEditable) {
+			t21 = isContentEditable ? () => setIsHovered(true) : void 0;
+			$[27] = isContentEditable;
+			$[28] = t21;
+		} else t21 = $[28];
+		let t22;
+		if ($[29] !== isContentEditable) {
+			t22 = isContentEditable ? () => setIsHovered(false) : void 0;
+			$[29] = isContentEditable;
+			$[30] = t22;
+		} else t22 = $[30];
+		let t23;
+		if ($[31] !== t16 || $[32] !== t17 || $[33] !== t18 || $[34] !== t19 || $[35] !== t20 || $[36] !== t21 || $[37] !== t22) {
+			t23 = /* @__PURE__ */ jsx("div", {
+				"data-camox-field-id": t16,
+				"data-camox-field-type": t17,
+				"data-camox-hovered": t18,
+				"data-camox-focused": t19,
+				"data-camox-overlay-mode": t20,
+				onMouseEnter: t21,
+				onMouseLeave: t22
+			});
+			$[31] = t16;
+			$[32] = t17;
+			$[33] = t18;
 			$[34] = t19;
-		} else t19 = $[34];
-		let t20;
-		if ($[35] !== colors || $[36] !== isContentEditable || $[37] !== isHovered || $[38] !== isOpen) {
-			t20 = isContentEditable && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			$[35] = t20;
+			$[36] = t21;
+			$[37] = t22;
+			$[38] = t23;
+		} else t23 = $[38];
+		let t24;
+		if ($[39] !== children || $[40] !== fieldValue) {
+			t24 = children({ src: fieldValue }, { url: fieldValue });
+			$[39] = children;
+			$[40] = fieldValue;
+			$[41] = t24;
+		} else t24 = $[41];
+		let t25;
+		if ($[42] !== isContentEditable) {
+			t25 = isContentEditable && /* @__PURE__ */ jsx("div", {
 				style: {
 					position: "absolute",
 					inset: 0,
 					zIndex: 10
 				},
 				onClick: _temp
-			}), (isHovered || isOpen) && /* @__PURE__ */ jsx("div", { style: {
-				position: "absolute",
-				inset: isOpen ? OVERLAY_OFFSETS.blockSelected : OVERLAY_OFFSETS.blockHover,
-				border: `${isOpen ? OVERLAY_WIDTHS.selected : OVERLAY_WIDTHS.hover} solid ${isOpen ? colors.selected : colors.hover}`,
-				pointerEvents: "none",
-				zIndex: 11
-			} })] });
-			$[35] = colors;
-			$[36] = isContentEditable;
-			$[37] = isHovered;
-			$[38] = isOpen;
-			$[39] = t20;
-		} else t20 = $[39];
-		let t21;
-		if ($[40] !== t17 || $[41] !== t18 || $[42] !== t19 || $[43] !== t20) {
-			t21 = /* @__PURE__ */ jsx(PopoverTrigger, {
-				asChild: true,
-				children: /* @__PURE__ */ jsxs("div", {
-					style: t16,
-					onMouseEnter: t17,
-					onMouseLeave: t18,
-					children: [t19, t20]
-				})
 			});
-			$[40] = t17;
-			$[41] = t18;
-			$[42] = t19;
-			$[43] = t20;
-			$[44] = t21;
-		} else t21 = $[44];
-		let t22;
-		if ($[45] !== handleUrlChange || $[46] !== isContentEditable || $[47] !== name || $[48] !== urlValue) {
-			t22 = isContentEditable && /* @__PURE__ */ jsx(PopoverContent, {
+			$[42] = isContentEditable;
+			$[43] = t25;
+		} else t25 = $[43];
+		let t26;
+		if ($[44] !== t23 || $[45] !== t24 || $[46] !== t25) {
+			t26 = /* @__PURE__ */ jsxs(PopoverTrigger, {
+				render: t23,
+				nativeButton: false,
+				children: [t24, t25]
+			});
+			$[44] = t23;
+			$[45] = t24;
+			$[46] = t25;
+			$[47] = t26;
+		} else t26 = $[47];
+		let t27;
+		if ($[48] !== handleUrlChange || $[49] !== isContentEditable || $[50] !== name || $[51] !== urlValue) {
+			t27 = isContentEditable && /* @__PURE__ */ jsx(PopoverContent, {
 				className: "w-96 gap-2",
 				children: /* @__PURE__ */ jsxs("form", {
 					className: "grid gap-2",
@@ -482,35 +483,34 @@ function createBlock(options) {
 					})]
 				})
 			});
-			$[45] = handleUrlChange;
-			$[46] = isContentEditable;
-			$[47] = name;
-			$[48] = urlValue;
-			$[49] = t22;
-		} else t22 = $[49];
-		let t23;
-		if ($[50] !== t14 || $[51] !== t15 || $[52] !== t21 || $[53] !== t22) {
-			t23 = /* @__PURE__ */ jsxs(Popover, {
+			$[48] = handleUrlChange;
+			$[49] = isContentEditable;
+			$[50] = name;
+			$[51] = urlValue;
+			$[52] = t27;
+		} else t27 = $[52];
+		let t28;
+		if ($[53] !== t14 || $[54] !== t15 || $[55] !== t26 || $[56] !== t27) {
+			t28 = /* @__PURE__ */ jsxs(Popover, {
 				open: t14,
 				onOpenChange: t15,
-				children: [t21, t22]
+				children: [t26, t27]
 			});
-			$[50] = t14;
-			$[51] = t15;
-			$[52] = t21;
-			$[53] = t22;
-			$[54] = t23;
-		} else t23 = $[54];
-		return t23;
+			$[53] = t14;
+			$[54] = t15;
+			$[55] = t26;
+			$[56] = t27;
+			$[57] = t28;
+		} else t28 = $[57];
+		return t28;
 	};
 	const Link = (t0) => {
-		const $ = c(63);
+		const $ = c(36);
 		const { name, children } = t0;
 		const blockContext = React.use(Context);
 		if (!blockContext) throw new Error("Link must be used within a Block Component");
 		const { blockId, content, mode } = blockContext;
 		const isContentEditable = useIsEditable(mode);
-		const colors = mode === "layout" ? LAYOUT_OVERLAY_COLORS : OVERLAY_COLORS;
 		const elementRef = React.useRef(null);
 		const { window: iframeWindow } = useFrame();
 		const repeaterContext = React.use(RepeaterItemContext);
@@ -554,16 +554,7 @@ function createBlock(options) {
 		} else t6 = $[8];
 		const { data: pages } = useQuery(t6);
 		const resolvedHref = resolveLinkHref(fieldValue, pages);
-		const t7 = String(name);
-		let t8;
-		if ($[9] !== blockId || $[10] !== repeaterContext || $[11] !== t7) {
-			t8 = getOverlayFieldId(blockId, repeaterContext, t7);
-			$[9] = blockId;
-			$[10] = repeaterContext;
-			$[11] = t7;
-			$[12] = t8;
-		} else t8 = $[12];
-		const fieldId = t8;
+		const fieldId = getOverlayFieldId(blockId, repeaterContext, String(name));
 		const [isEditing, setIsEditing] = React.useState(false);
 		const [displayText, setDisplayText] = React.useState(fieldValue.text);
 		const [isHovered, setIsHovered] = React.useState(false);
@@ -573,31 +564,25 @@ function createBlock(options) {
 		React.useEffect(() => {
 			if (!isEditing) setDisplayText(fieldValue.text);
 		}, [fieldValue.text, isEditing]);
-		let t9;
-		if ($[13] !== fieldId) {
-			t9 = { fieldId };
-			$[13] = fieldId;
-			$[14] = t9;
-		} else t9 = $[14];
-		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", t9);
-		let t10;
-		let t11;
-		if ($[15] !== isHoveredFromSidebar) {
-			t10 = () => {
+		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", { fieldId });
+		let t7;
+		let t8;
+		if ($[9] !== isHoveredFromSidebar) {
+			t7 = () => {
 				setIsHovered(isHoveredFromSidebar);
 			};
-			t11 = [isHoveredFromSidebar];
-			$[15] = isHoveredFromSidebar;
-			$[16] = t10;
-			$[17] = t11;
+			t8 = [isHoveredFromSidebar];
+			$[9] = isHoveredFromSidebar;
+			$[10] = t7;
+			$[11] = t8;
 		} else {
-			t10 = $[16];
-			t11 = $[17];
+			t7 = $[10];
+			t8 = $[11];
 		}
-		React.useEffect(t10, t11);
-		let t12;
-		if ($[18] !== blockId || $[19] !== name || $[20] !== repeaterContext || $[21] !== updateBlockContent || $[22] !== updateRepeatableContent) {
-			t12 = (newLinkValue) => {
+		React.useEffect(t7, t8);
+		let t9;
+		if ($[12] !== blockId || $[13] !== name || $[14] !== repeaterContext || $[15] !== updateBlockContent || $[16] !== updateRepeatableContent) {
+			t9 = (newLinkValue) => {
 				if (repeaterContext?.itemId) updateRepeatableContent.mutate({
 					id: Number(repeaterContext.itemId),
 					content: { [name]: newLinkValue }
@@ -607,14 +592,14 @@ function createBlock(options) {
 					content: { [name]: newLinkValue }
 				});
 			};
-			$[18] = blockId;
-			$[19] = name;
-			$[20] = repeaterContext;
-			$[21] = updateBlockContent;
-			$[22] = updateRepeatableContent;
-			$[23] = t12;
-		} else t12 = $[23];
-		const saveLinkValue = t12;
+			$[12] = blockId;
+			$[13] = name;
+			$[14] = repeaterContext;
+			$[15] = updateBlockContent;
+			$[16] = updateRepeatableContent;
+			$[17] = t9;
+		} else t9 = $[17];
+		const saveLinkValue = t9;
 		const handleInput = (e) => {
 			const newText = e.target.textContent || "";
 			saveLinkValue({
@@ -622,9 +607,9 @@ function createBlock(options) {
 				text: newText
 			});
 		};
-		let t13;
-		if ($[24] !== blockId || $[25] !== name || $[26] !== repeaterContext) {
-			t13 = () => {
+		let t10;
+		if ($[18] !== blockId || $[19] !== name || $[20] !== repeaterContext) {
+			t10 = () => {
 				setIsEditing(true);
 				setIsEditorFocused(true);
 				if (repeaterContext?.itemId) previewStore.send({
@@ -641,202 +626,165 @@ function createBlock(options) {
 					fieldType: "Link"
 				});
 			};
-			$[24] = blockId;
-			$[25] = name;
-			$[26] = repeaterContext;
-			$[27] = t13;
-		} else t13 = $[27];
-		const handleFocus = t13;
-		let t14;
-		if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
-			t14 = () => {
+			$[18] = blockId;
+			$[19] = name;
+			$[20] = repeaterContext;
+			$[21] = t10;
+		} else t10 = $[21];
+		const handleFocus = t10;
+		let t11;
+		if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+			t11 = () => {
 				setIsEditing(false);
 				setIsEditorFocused(false);
 			};
-			$[28] = t14;
-		} else t14 = $[28];
-		const handleBlur = t14;
-		let t15;
-		if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
-			t15 = (e_0) => {
+			$[22] = t11;
+		} else t11 = $[22];
+		const handleBlur = t11;
+		let t12;
+		if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+			t12 = (e_0) => {
 				e_0.stopPropagation();
 				previewStore.send({ type: "toggleContentSheet" });
 				setIsEditorFocused(false);
 				setIsEditing(false);
 			};
-			$[29] = t15;
-		} else t15 = $[29];
-		const handleEditLink = t15;
-		const T0 = Popover;
-		const t16 = isContentEditable && isEditorFocused;
-		const T1 = PopoverAnchor;
-		const t17 = true;
-		const T2 = Slot;
-		const t18 = isContentEditable ? fieldId : void 0;
-		const t19 = isContentEditable ? _temp2 : void 0;
-		let t20;
-		if ($[30] !== isContentEditable) {
-			t20 = isContentEditable ? () => setIsHovered(true) : void 0;
-			$[30] = isContentEditable;
-			$[31] = t20;
-		} else t20 = $[31];
-		let t21;
-		if ($[32] !== isContentEditable) {
-			t21 = isContentEditable ? () => setIsHovered(false) : void 0;
-			$[32] = isContentEditable;
-			$[33] = t21;
-		} else t21 = $[33];
-		const t22 = _temp3;
-		const t23 = false;
-		const t24 = true;
-		let t25;
-		if ($[34] !== colors || $[35] !== isContentEditable || $[36] !== isFocused || $[37] !== isHovered) {
-			t25 = isContentEditable && (isHovered || isFocused) ? {
-				outline: `${isFocused ? OVERLAY_WIDTHS.selected : OVERLAY_WIDTHS.hover} solid ${isFocused ? colors.selected : colors.hover}`,
-				outlineOffset: isFocused ? OVERLAY_OFFSETS.fieldSelected : OVERLAY_OFFSETS.fieldHover
-			} : void 0;
-			$[34] = colors;
-			$[35] = isContentEditable;
-			$[36] = isFocused;
-			$[37] = isHovered;
-			$[38] = t25;
-		} else t25 = $[38];
-		const t26 = children({
+			$[23] = t12;
+		} else t12 = $[23];
+		const handleEditLink = t12;
+		const linkData = {
 			text: displayText,
 			href: resolvedHref,
 			newTab: fieldValue.newTab
-		});
-		let t27;
-		if ($[39] !== T2 || $[40] !== handleBlur || $[41] !== handleFocus || $[42] !== handleInput || $[43] !== isContentEditable || $[44] !== t18 || $[45] !== t19 || $[46] !== t20 || $[47] !== t21 || $[48] !== t22 || $[49] !== t25 || $[50] !== t26) {
-			t27 = /* @__PURE__ */ jsx(T2, {
-				ref: elementRef,
-				"data-camox-field-id": t18,
-				contentEditable: isContentEditable,
-				onClick: t19,
-				onInput: handleInput,
-				onFocus: handleFocus,
-				onBlur: handleBlur,
-				onMouseEnter: t20,
-				onMouseLeave: t21,
-				onKeyDown: t22,
-				spellCheck: t23,
-				suppressContentEditableWarning: t24,
-				style: t25,
-				children: t26
-			});
-			$[39] = T2;
-			$[40] = handleBlur;
-			$[41] = handleFocus;
-			$[42] = handleInput;
-			$[43] = isContentEditable;
-			$[44] = t18;
-			$[45] = t19;
-			$[46] = t20;
-			$[47] = t21;
-			$[48] = t22;
-			$[49] = t25;
-			$[50] = t26;
-			$[51] = t27;
-		} else t27 = $[51];
-		let t28;
-		if ($[52] !== T1 || $[53] !== t27) {
-			t28 = /* @__PURE__ */ jsx(T1, {
-				asChild: t17,
-				children: t27
+		};
+		if (!isContentEditable) return /* @__PURE__ */ jsx(Fragment, { children: children({
+			to: resolvedHref,
+			target: fieldValue.newTab ? "_blank" : void 0,
+			rel: fieldValue.newTab ? "noreferrer" : void 0,
+			children: fieldValue.text
+		}, linkData) });
+		let t13;
+		let t14;
+		if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+			t13 = () => setIsHovered(true);
+			t14 = () => setIsHovered(false);
+			$[24] = t13;
+			$[25] = t14;
+		} else {
+			t13 = $[24];
+			t14 = $[25];
+		}
+		const linkProps = {
+			ref: elementRef,
+			to: resolvedHref,
+			target: fieldValue.newTab ? "_blank" : void 0,
+			rel: fieldValue.newTab ? "noreferrer" : void 0,
+			children: displayText,
+			"data-camox-field-id": fieldId,
+			"data-camox-hovered": isHovered || void 0,
+			"data-camox-focused": isFocused || void 0,
+			"data-camox-overlay-mode": mode === "layout" ? "layout" : void 0,
+			contentEditable: true,
+			onClick: _temp2,
+			onInput: handleInput,
+			onFocus: handleFocus,
+			onBlur: handleBlur,
+			onMouseEnter: t13,
+			onMouseLeave: t14,
+			onKeyDown: _temp3,
+			spellCheck: false,
+			suppressContentEditableWarning: true
+		};
+		const T0 = Popover;
+		const t15 = children(linkProps, linkData);
+		let t16;
+		if ($[26] !== handleEditLink) {
+			t16 = /* @__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",
+				onMouseDown: _temp4,
+				onClick: handleEditLink,
+				children: "Edit link"
 			});
-			$[52] = T1;
-			$[53] = t27;
-			$[54] = t28;
-		} else t28 = $[54];
-		let t29;
-		if ($[55] !== handleEditLink || $[56] !== isContentEditable) {
-			t29 = isContentEditable && /* @__PURE__ */ jsx(PopoverContent, {
+			$[26] = handleEditLink;
+			$[27] = t16;
+		} else t16 = $[27];
+		let t17;
+		if ($[28] !== elementRef || $[29] !== t16) {
+			t17 = /* @__PURE__ */ jsx(PopoverContent, {
 				className: "w-auto p-2",
-				onOpenAutoFocus: _temp4,
+				initialFocus: false,
+				anchor: elementRef,
 				align: "end",
-				children: /* @__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",
-					onMouseDown: _temp5,
-					onClick: handleEditLink,
-					children: "Edit link"
-				})
+				children: t16
 			});
-			$[55] = handleEditLink;
-			$[56] = isContentEditable;
-			$[57] = t29;
-		} else t29 = $[57];
-		let t30;
-		if ($[58] !== T0 || $[59] !== t16 || $[60] !== t28 || $[61] !== t29) {
-			t30 = /* @__PURE__ */ jsxs(T0, {
-				open: t16,
-				children: [t28, t29]
+			$[28] = elementRef;
+			$[29] = t16;
+			$[30] = t17;
+		} else t17 = $[30];
+		let t18;
+		if ($[31] !== T0 || $[32] !== isEditorFocused || $[33] !== t15 || $[34] !== t17) {
+			t18 = /* @__PURE__ */ jsxs(T0, {
+				open: isEditorFocused,
+				children: [t15, t17]
 			});
-			$[58] = T0;
-			$[59] = t16;
-			$[60] = t28;
-			$[61] = t29;
-			$[62] = t30;
-		} else t30 = $[62];
-		return t30;
+			$[31] = T0;
+			$[32] = isEditorFocused;
+			$[33] = t15;
+			$[34] = t17;
+			$[35] = t18;
+		} else t18 = $[35];
+		return t18;
 	};
 	const Image = (t0) => {
-		const $ = c(37);
+		const $ = c(25);
 		const { name, children } = t0;
 		const blockContext = React.use(Context);
 		if (!blockContext) throw new Error("Image must be used within a Block Component");
 		const { blockId, content, mode } = blockContext;
 		const isContentEditable = useIsEditable(mode);
-		const colors = mode === "layout" ? LAYOUT_OVERLAY_COLORS : OVERLAY_COLORS;
 		const { window: iframeWindow } = useFrame();
 		const repeaterContext = React.use(RepeaterItemContext);
 		const { filesMap } = useNormalizedData();
 		const rawSource = repeaterContext ? repeaterContext.itemContent[name] : content[name];
-		let t1;
-		if ($[0] !== filesMap || $[1] !== rawSource) {
-			t1 = isFileMarker(rawSource) ? resolveFileMarker(rawSource, filesMap) : rawSource;
-			$[0] = filesMap;
-			$[1] = rawSource;
+		const fieldValue = (isFileMarker(rawSource) ? resolveFileMarker(rawSource, filesMap) : rawSource) ?? contentDefaults[String(name)];
+		const t1 = String(name);
+		let t2;
+		if ($[0] !== blockId || $[1] !== repeaterContext || $[2] !== t1) {
+			t2 = getOverlayFieldId(blockId, repeaterContext, t1);
+			$[0] = blockId;
+			$[1] = repeaterContext;
 			$[2] = t1;
-		} else t1 = $[2];
-		const fieldValue = t1 ?? contentDefaults[String(name)];
-		const t2 = String(name);
-		let t3;
-		if ($[3] !== blockId || $[4] !== repeaterContext || $[5] !== t2) {
-			t3 = getOverlayFieldId(blockId, repeaterContext, t2);
-			$[3] = blockId;
-			$[4] = repeaterContext;
-			$[5] = t2;
-			$[6] = t3;
-		} else t3 = $[6];
-		const fieldId = t3;
+			$[3] = t2;
+		} else t2 = $[3];
+		const fieldId = t2;
 		const [isHovered, setIsHovered] = React.useState(false);
 		const isFocused = useFieldSelection(blockId, String(name), "Image", repeaterContext?.itemId);
+		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;
-		if ($[7] !== fieldId) {
-			t4 = { fieldId };
-			$[7] = fieldId;
-			$[8] = t4;
-		} else t4 = $[8];
-		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", t4);
 		let t5;
-		let t6;
-		if ($[9] !== isHoveredFromSidebar) {
-			t5 = () => {
+		if ($[6] !== isHoveredFromSidebar) {
+			t4 = () => {
 				setIsHovered(isHoveredFromSidebar);
 			};
-			t6 = [isHoveredFromSidebar];
-			$[9] = isHoveredFromSidebar;
-			$[10] = t5;
-			$[11] = t6;
+			t5 = [isHoveredFromSidebar];
+			$[6] = isHoveredFromSidebar;
+			$[7] = t4;
+			$[8] = t5;
 		} else {
-			t5 = $[10];
-			t6 = $[11];
+			t4 = $[7];
+			t5 = $[8];
 		}
-		React.useEffect(t5, t6);
-		let t7;
-		if ($[12] !== blockId || $[13] !== isContentEditable || $[14] !== name || $[15] !== repeaterContext) {
-			t7 = () => {
+		React.useEffect(t4, t5);
+		let t6;
+		if ($[9] !== blockId || $[10] !== isContentEditable || $[11] !== name || $[12] !== repeaterContext) {
+			t6 = () => {
 				if (!isContentEditable) return;
 				const imageFieldName = repeaterContext && !repeaterContext.itemId ? repeaterContext.arrayFieldName : String(name);
 				if (repeaterContext?.itemId) previewStore.send({
@@ -854,87 +802,61 @@ function createBlock(options) {
 				});
 				previewStore.send({ type: "toggleContentSheet" });
 			};
-			$[12] = blockId;
-			$[13] = isContentEditable;
-			$[14] = name;
-			$[15] = repeaterContext;
-			$[16] = t7;
-		} else t7 = $[16];
-		const handleClick = t7;
-		if (!isContentEditable) {
-			let t8;
-			if ($[17] !== children || $[18] !== fieldValue) {
-				t8 = children(fieldValue);
-				$[17] = children;
-				$[18] = fieldValue;
-				$[19] = t8;
-			} else t8 = $[19];
-			let t9;
-			if ($[20] !== t8) {
-				t9 = /* @__PURE__ */ jsx(Fragment, { children: t8 });
-				$[20] = t8;
-				$[21] = t9;
-			} else t9 = $[21];
-			return t9;
-		}
-		const showOverlay = isHovered || isFocused;
-		let t8;
-		if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
-			t8 = { position: "relative" };
-			$[22] = t8;
-		} else t8 = $[22];
-		let t10;
-		let t9;
-		if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
-			t9 = () => setIsHovered(true);
-			t10 = () => setIsHovered(false);
-			$[23] = t10;
-			$[24] = t9;
-		} else {
-			t10 = $[23];
-			t9 = $[24];
-		}
+			$[9] = blockId;
+			$[10] = isContentEditable;
+			$[11] = name;
+			$[12] = repeaterContext;
+			$[13] = t6;
+		} else t6 = $[13];
+		const handleClick = t6;
+		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;
-		if ($[25] !== children || $[26] !== fieldValue) {
-			t11 = children(fieldValue);
-			$[25] = children;
-			$[26] = fieldValue;
-			$[27] = t11;
-		} else t11 = $[27];
 		let t12;
-		if ($[28] !== colors || $[29] !== isFocused || $[30] !== showOverlay) {
-			t12 = showOverlay && /* @__PURE__ */ jsx("div", { style: {
-				position: "absolute",
-				inset: isFocused ? OVERLAY_OFFSETS.blockSelected : OVERLAY_OFFSETS.blockHover,
-				border: `${isFocused ? OVERLAY_WIDTHS.selected : OVERLAY_WIDTHS.hover} solid ${isFocused ? colors.selected : colors.hover}`,
-				pointerEvents: "none",
-				zIndex: 10
-			} });
-			$[28] = colors;
-			$[29] = isFocused;
-			$[30] = showOverlay;
-			$[31] = t12;
-		} else t12 = $[31];
-		let t13;
-		if ($[32] !== fieldId || $[33] !== handleClick || $[34] !== t11 || $[35] !== t12) {
-			t13 = /* @__PURE__ */ jsxs("div", {
-				style: t8,
+		if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+			t11 = () => setIsHovered(true);
+			t12 = () => setIsHovered(false);
+			$[14] = t11;
+			$[15] = t12;
+		} else {
+			t11 = $[14];
+			t12 = $[15];
+		}
+		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", {
 				"data-camox-field-id": fieldId,
-				onMouseEnter: t9,
-				onMouseLeave: t10,
+				"data-camox-field-type": t7,
+				"data-camox-hovered": t8,
+				"data-camox-focused": t9,
+				"data-camox-overlay-mode": t10,
+				onMouseEnter: t11,
+				onMouseLeave: t12,
 				onClick: handleClick,
-				children: [t11, t12]
+				children: t13
 			});
-			$[32] = fieldId;
-			$[33] = handleClick;
-			$[34] = t11;
-			$[35] = t12;
-			$[36] = t13;
-		} else t13 = $[36];
-		return t13;
+			$[16] = fieldId;
+			$[17] = handleClick;
+			$[18] = t10;
+			$[19] = t11;
+			$[20] = t12;
+			$[21] = t13;
+			$[22] = t8;
+			$[23] = t9;
+			$[24] = t14;
+		} else t14 = $[24];
+		return t14;
 	};
 	const File = (t0) => {
-		const $ = c(8);
+		const $ = c(7);
 		const { name, children } = t0;
 		const blockContext = React.use(Context);
 		if (!blockContext) throw new Error("File must be used within a Block Component");
@@ -943,33 +865,30 @@ function createBlock(options) {
 		const { filesMap } = useNormalizedData();
 		const rawSource = repeaterContext ? repeaterContext.itemContent[name] : content[name];
 		let t1;
-		if ($[0] !== filesMap || $[1] !== rawSource) {
-			t1 = isFileMarker(rawSource) ? resolveFileMarker(rawSource, filesMap) : rawSource;
-			$[0] = filesMap;
-			$[1] = rawSource;
-			$[2] = t1;
-		} else t1 = $[2];
-		const fieldValue = t1 ?? contentDefaults[String(name)];
+		if ($[0] !== children || $[1] !== filesMap || $[2] !== name || $[3] !== rawSource) {
+			const fieldValue = (isFileMarker(rawSource) ? resolveFileMarker(rawSource, filesMap) : rawSource) ?? contentDefaults[String(name)];
+			t1 = children({
+				href: fieldValue.url,
+				download: fieldValue.filename
+			}, fieldValue);
+			$[0] = children;
+			$[1] = filesMap;
+			$[2] = name;
+			$[3] = rawSource;
+			$[4] = t1;
+		} else t1 = $[4];
 		let t2;
-		if ($[3] !== children || $[4] !== fieldValue) {
-			t2 = children(fieldValue);
-			$[3] = children;
-			$[4] = fieldValue;
-			$[5] = t2;
-		} else t2 = $[5];
-		let t3;
-		if ($[6] !== t2) {
-			t3 = /* @__PURE__ */ jsx(Fragment, { children: t2 });
+		if ($[5] !== t1) {
+			t2 = /* @__PURE__ */ jsx(Fragment, { children: t1 });
+			$[5] = t1;
 			$[6] = t2;
-			$[7] = t3;
-		} else t3 = $[7];
-		return t3;
+		} else t2 = $[6];
+		return t2;
 	};
 	const RepeaterItemWrapper = (t0) => {
-		const $ = c(11);
+		const $ = c(8);
 		const { itemId, blockId, mode, children } = t0;
 		const isContentEditable = useIsEditable(mode);
-		const colors = mode === "layout" ? LAYOUT_OVERLAY_COLORS : OVERLAY_COLORS;
 		const { window: iframeWindow } = useFrame();
 		const isRepeaterHovered = React.useContext(RepeaterHoverContext);
 		let t1;
@@ -984,37 +903,23 @@ function createBlock(options) {
 		} else t1 = $[2];
 		const isHovered = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_REPEATER_ITEM", "CAMOX_HOVER_REPEATER_ITEM_END", t1);
 		const showOverlay = isContentEditable && (isHovered || isRepeaterHovered);
-		let t2;
-		if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-			t2 = { position: "relative" };
-			$[3] = t2;
-		} else t2 = $[3];
-		const t3 = isContentEditable ? itemId : void 0;
-		let t4;
-		if ($[4] !== colors || $[5] !== showOverlay) {
-			t4 = showOverlay && /* @__PURE__ */ jsx("div", { style: {
-				position: "absolute",
-				inset: OVERLAY_OFFSETS.blockHover,
-				border: `${OVERLAY_WIDTHS.hover} solid ${colors.hover}`,
-				pointerEvents: "none",
-				zIndex: 10
-			} });
-			$[4] = colors;
-			$[5] = showOverlay;
-			$[6] = t4;
-		} else t4 = $[6];
+		const t2 = isContentEditable ? itemId : void 0;
+		const t3 = showOverlay || void 0;
+		const t4 = mode === "layout" ? "layout" : void 0;
 		let t5;
-		if ($[7] !== children || $[8] !== t3 || $[9] !== t4) {
-			t5 = /* @__PURE__ */ jsxs("div", {
-				style: t2,
-				"data-camox-repeater-item-id": t3,
-				children: [children, t4]
+		if ($[3] !== children || $[4] !== t2 || $[5] !== t3 || $[6] !== t4) {
+			t5 = /* @__PURE__ */ jsx("div", {
+				"data-camox-repeater-item-id": t2,
+				"data-camox-hovered": t3,
+				"data-camox-overlay-mode": t4,
+				children
 			});
-			$[7] = children;
-			$[8] = t3;
-			$[9] = t4;
-			$[10] = t5;
-		} else t5 = $[10];
+			$[3] = children;
+			$[4] = t2;
+			$[5] = t3;
+			$[6] = t4;
+			$[7] = t5;
+		} else t5 = $[7];
 		return t5;
 	};
 	const RepeaterHoverProvider = (t0) => {
@@ -1134,14 +1039,14 @@ function createBlock(options) {
 		return t3;
 	};
 	const BlockComponent = (t0) => {
-		const $ = c(67);
+		const $ = c(69);
 		const { blockData, mode, isFirstBlock, showAddBlockTop, showAddBlockBottom, addBlockAfterPosition } = t0;
 		const isContentEditable = useIsEditable(mode);
 		const { window: iframeWindow } = useFrame();
 		const [isHovered, setIsHovered] = React.useState(false);
-		const selection = useSelector(previewStore, _temp6);
-		const isPageContentSheetOpen = useSelector(previewStore, _temp7);
-		const isAddBlockSheetOpen = useSelector(previewStore, _temp8);
+		const selection = useSelector(previewStore, _temp5);
+		const isPageContentSheetOpen = useSelector(previewStore, _temp6);
+		const isAddBlockSheetOpen = useSelector(previewStore, _temp7);
 		const isAnySideSheetOpen = useIsPreviewSheetOpen();
 		const isBlockSelected = selection?.blockId === blockData._id;
 		const ref = React.useRef(null);
@@ -1213,7 +1118,7 @@ function createBlock(options) {
 			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);
+				if (Array.isArray(value) && value.length > 0 && value[0]?.content !== void 0) result[key] = value.map(_temp8);
 			}
 			$[15] = blockData.content;
 			$[16] = result;
@@ -1279,17 +1184,20 @@ function createBlock(options) {
 			$[27] = t12;
 		} else t12 = $[27];
 		const t13 = isContentEditable ? blockData._id : void 0;
-		const t14 = blockData._id;
-		let t15;
+		const t14 = shouldShowOverlay && !isBlockSelected || void 0;
+		const t15 = shouldShowOverlay && isBlockSelected || void 0;
+		const t16 = mode === "layout" ? "layout" : void 0;
+		const t17 = blockData._id;
+		let t18;
 		if ($[28] !== blockData.content) {
-			t15 = {
+			t18 = {
 				...contentDefaults,
 				...blockData.content
 			};
 			$[28] = blockData.content;
-			$[29] = t15;
-		} else t15 = $[29];
-		const merged = t15;
+			$[29] = t18;
+		} else t18 = $[29];
+		const merged = t18;
 		let overrides;
 		if ($[30] !== merged) {
 			overrides = {};
@@ -1300,33 +1208,33 @@ function createBlock(options) {
 			$[30] = merged;
 			$[31] = overrides;
 		} else overrides = $[31];
-		let t16;
+		let t19;
 		if ($[32] !== merged || $[33] !== overrides) {
-			t16 = {
+			t19 = {
 				...merged,
 				...overrides
 			};
 			$[32] = merged;
 			$[33] = overrides;
-			$[34] = t16;
-		} else t16 = $[34];
-		const t17 = t16;
-		let t18;
+			$[34] = t19;
+		} else t19 = $[34];
+		const t20 = t19;
+		let t21;
 		if ($[35] !== blockData.settings) {
-			t18 = {
+			t21 = {
 				...settingsDefaults,
 				...blockData.settings
 			};
 			$[35] = blockData.settings;
-			$[36] = t18;
-		} else t18 = $[36];
-		const t19 = t18;
-		let t20;
-		if ($[37] !== blockData._id || $[38] !== isHovered || $[39] !== mode || $[40] !== t17 || $[41] !== t19) {
-			t20 = {
-				blockId: t14,
-				content: t17,
-				settings: t19,
+			$[36] = t21;
+		} else t21 = $[36];
+		const t22 = t21;
+		let t23;
+		if ($[37] !== blockData._id || $[38] !== isHovered || $[39] !== mode || $[40] !== t20 || $[41] !== t22) {
+			t23 = {
+				blockId: t17,
+				content: t20,
+				settings: t22,
 				mode,
 				isHovered,
 				setIsHovered
@@ -1334,105 +1242,89 @@ function createBlock(options) {
 			$[37] = blockData._id;
 			$[38] = isHovered;
 			$[39] = mode;
-			$[40] = t17;
-			$[41] = t19;
-			$[42] = t20;
-		} else t20 = $[42];
-		let t21;
+			$[40] = t20;
+			$[41] = t22;
+			$[42] = t23;
+		} else t23 = $[42];
+		let t24;
 		if ($[43] !== normalizedContent) {
-			t21 = /* @__PURE__ */ jsx(options.component, { content: normalizedContent });
+			t24 = /* @__PURE__ */ jsx(options.component, { content: normalizedContent });
 			$[43] = normalizedContent;
-			$[44] = t21;
-		} else t21 = $[44];
-		let t22;
-		if ($[45] !== t20 || $[46] !== t21) {
-			t22 = /* @__PURE__ */ jsx(Context.Provider, {
-				value: t20,
-				children: t21
+			$[44] = t24;
+		} else t24 = $[44];
+		let t25;
+		if ($[45] !== t23 || $[46] !== t24) {
+			t25 = /* @__PURE__ */ jsx(Context.Provider, {
+				value: t23,
+				children: t24
 			});
-			$[45] = t20;
-			$[46] = t21;
-			$[47] = t22;
-		} else t22 = $[47];
-		const t23 = shouldShowSheetOverlay ? .6 : 0;
-		let t24;
-		if ($[48] !== t23) {
-			t24 = /* @__PURE__ */ jsx("div", {
-				style: {
-					position: "absolute",
-					width: "100%",
-					height: "100%",
-					top: 0,
-					left: 0,
-					background: "#000",
-					opacity: t23,
-					transition: "opacity 0.3s ease-in-out",
-					pointerEvents: "none",
-					zIndex: 20
-				},
-				id: "hello"
+			$[45] = t23;
+			$[46] = t24;
+			$[47] = t25;
+		} else t25 = $[47];
+		let t26;
+		if ($[48] !== shouldShowSheetOverlay) {
+			t26 = /* @__PURE__ */ jsx("div", {
+				className: "camox-sheet-overlay",
+				...shouldShowSheetOverlay ? { "data-camox-visible": "" } : {}
 			});
-			$[48] = t23;
-			$[49] = t24;
-		} else t24 = $[49];
-		let t25;
-		if ($[50] !== handleAddBlockClick || $[51] !== isAnySideSheetOpen || $[52] !== isBlockSelected || $[53] !== isFirstBlock || $[54] !== mode || $[55] !== shouldShowOverlay || $[56] !== showAddBlockBottom || $[57] !== showAddBlockTop) {
-			t25 = shouldShowOverlay && (() => {
-				const colors = mode === "layout" ? LAYOUT_OVERLAY_COLORS : OVERLAY_COLORS;
-				return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { style: {
-					position: "absolute",
-					inset: isBlockSelected ? OVERLAY_OFFSETS.blockSelected : OVERLAY_OFFSETS.blockHover,
-					border: `${isBlockSelected ? OVERLAY_WIDTHS.selected : OVERLAY_WIDTHS.hover} solid ${isBlockSelected ? colors.selected : colors.hover}`,
-					pointerEvents: "none",
-					zIndex: 10
-				} }), /* @__PURE__ */ jsxs(Fragment, { children: [(showAddBlockTop ?? (mode !== "layout" && !isFirstBlock)) && /* @__PURE__ */ jsx(AddBlockControlBar, {
-					position: "top",
-					hidden: isAnySideSheetOpen,
-					onMouseLeave: () => setIsHovered(false),
-					onClick: () => handleAddBlockClick("before")
-				}), (showAddBlockBottom ?? mode !== "layout") && /* @__PURE__ */ jsx(AddBlockControlBar, {
-					position: "bottom",
-					hidden: isAnySideSheetOpen,
-					onMouseLeave: () => setIsHovered(false),
-					onClick: () => handleAddBlockClick("after")
-				})] })] });
-			})();
+			$[48] = shouldShowSheetOverlay;
+			$[49] = t26;
+		} else t26 = $[49];
+		let t27;
+		if ($[50] !== handleAddBlockClick || $[51] !== isAnySideSheetOpen || $[52] !== isFirstBlock || $[53] !== mode || $[54] !== shouldShowOverlay || $[55] !== showAddBlockBottom || $[56] !== showAddBlockTop) {
+			t27 = shouldShowOverlay && /* @__PURE__ */ jsxs(Fragment, { children: [(showAddBlockTop ?? (mode !== "layout" && !isFirstBlock)) && /* @__PURE__ */ jsx(AddBlockControlBar, {
+				position: "top",
+				hidden: isAnySideSheetOpen,
+				onMouseLeave: () => setIsHovered(false),
+				onClick: () => handleAddBlockClick("before")
+			}), (showAddBlockBottom ?? mode !== "layout") && /* @__PURE__ */ jsx(AddBlockControlBar, {
+				position: "bottom",
+				hidden: isAnySideSheetOpen,
+				onMouseLeave: () => setIsHovered(false),
+				onClick: () => handleAddBlockClick("after")
+			})] });
 			$[50] = handleAddBlockClick;
 			$[51] = isAnySideSheetOpen;
-			$[52] = isBlockSelected;
-			$[53] = isFirstBlock;
-			$[54] = mode;
-			$[55] = shouldShowOverlay;
-			$[56] = showAddBlockBottom;
-			$[57] = showAddBlockTop;
-			$[58] = t25;
-		} else t25 = $[58];
-		let t26;
-		if ($[59] !== handleClick || $[60] !== handleMouseEnter || $[61] !== handleMouseLeave || $[62] !== t13 || $[63] !== t22 || $[64] !== t24 || $[65] !== t25) {
-			t26 = /* @__PURE__ */ jsxs("div", {
+			$[52] = isFirstBlock;
+			$[53] = mode;
+			$[54] = shouldShowOverlay;
+			$[55] = showAddBlockBottom;
+			$[56] = showAddBlockTop;
+			$[57] = t27;
+		} else t27 = $[57];
+		let t28;
+		if ($[58] !== handleClick || $[59] !== handleMouseEnter || $[60] !== handleMouseLeave || $[61] !== t13 || $[62] !== t14 || $[63] !== t15 || $[64] !== t16 || $[65] !== t25 || $[66] !== t26 || $[67] !== t27) {
+			t28 = /* @__PURE__ */ jsxs("div", {
 				className: "group visual-editing-block",
 				ref,
 				style: t12,
 				"data-camox-block-id": t13,
+				"data-camox-hovered": t14,
+				"data-camox-focused": t15,
+				"data-camox-overlay-mode": t16,
 				onClick: handleClick,
 				onMouseEnter: handleMouseEnter,
 				onMouseLeave: handleMouseLeave,
 				children: [
-					t22,
-					t24,
-					t25
+					t25,
+					t26,
+					t27
 				]
 			});
-			$[59] = handleClick;
-			$[60] = handleMouseEnter;
-			$[61] = handleMouseLeave;
-			$[62] = t13;
-			$[63] = t22;
-			$[64] = t24;
+			$[58] = handleClick;
+			$[59] = handleMouseEnter;
+			$[60] = handleMouseLeave;
+			$[61] = t13;
+			$[62] = t14;
+			$[63] = t15;
+			$[64] = t16;
 			$[65] = t25;
 			$[66] = t26;
-		} else t26 = $[66];
-		return t26;
+			$[67] = t27;
+			$[68] = t28;
+		} else t28 = $[68];
+		return t28;
 	};
 	const useSetting = (name) => {
 		const ctx = React.use(Context);
@@ -1444,16 +1336,16 @@ function createBlock(options) {
 	* Provides the same hover, selection, and sheet overlays as the main BlockComponent.
 	*/
 	const Detached = (t0) => {
-		const $ = c(29);
+		const $ = c(30);
 		const { children } = t0;
 		const ctx = React.use(Context);
 		if (!ctx) throw new Error("Detached must be used within a Block Component");
 		const { blockId, mode, isHovered, setIsHovered } = ctx;
 		const isContentEditable = useIsEditable(mode);
 		const { window: iframeWindow } = useFrame();
-		const selection = useSelector(previewStore, _temp0);
-		const isAddBlockSheetOpen = useSelector(previewStore, _temp1);
-		const isPageContentSheetOpen = useSelector(previewStore, _temp10);
+		const selection = useSelector(previewStore, _temp9);
+		const isAddBlockSheetOpen = useSelector(previewStore, _temp0);
+		const isPageContentSheetOpen = useSelector(previewStore, _temp1);
 		const isBlockSelected = selection?.blockId === blockId;
 		let t1;
 		if ($[0] !== blockId) {
@@ -1516,56 +1408,55 @@ function createBlock(options) {
 		} else t6 = $[14];
 		const handleMouseLeave = t6;
 		const [container, setContainer] = React.useState(null);
-		let t7;
-		if ($[15] !== children || $[16] !== handleClick || $[17] !== handleMouseEnter || $[18] !== handleMouseLeave) {
-			t7 = /* @__PURE__ */ jsx(Slot, {
+		const t7 = shouldShowSheetOverlay ? 0 : 1;
+		let t8;
+		if ($[15] !== children || $[16] !== handleClick || $[17] !== handleMouseEnter || $[18] !== handleMouseLeave || $[19] !== t7) {
+			t8 = children({
 				ref: setContainer,
+				style: {
+					opacity: t7,
+					transition: "opacity 0.3s ease-in-out"
+				},
 				onClick: handleClick,
 				onMouseEnter: handleMouseEnter,
-				onMouseLeave: handleMouseLeave,
-				children
+				onMouseLeave: handleMouseLeave
 			});
 			$[15] = children;
 			$[16] = handleClick;
 			$[17] = handleMouseEnter;
 			$[18] = handleMouseLeave;
 			$[19] = t7;
-		} else t7 = $[19];
-		let t8;
-		if ($[20] !== container || $[21] !== isBlockSelected || $[22] !== mode || $[23] !== shouldShowOverlay || $[24] !== shouldShowSheetOverlay) {
-			t8 = container && createPortal(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { style: {
-				position: "absolute",
-				inset: 0,
-				background: "#000",
-				opacity: shouldShowSheetOverlay ? .6 : 0,
-				transition: "opacity 0.3s ease-in-out",
-				pointerEvents: "none",
-				zIndex: 20
-			} }), shouldShowOverlay && (() => {
-				const colors = mode === "layout" ? LAYOUT_OVERLAY_COLORS : OVERLAY_COLORS;
-				return /* @__PURE__ */ jsx("div", { style: {
+			$[20] = t8;
+		} else t8 = $[20];
+		let t9;
+		if ($[21] !== blockId || $[22] !== container || $[23] !== isBlockSelected || $[24] !== mode || $[25] !== shouldShowOverlay) {
+			t9 = container && createPortal(/* @__PURE__ */ jsx(Fragment, { children: shouldShowOverlay && /* @__PURE__ */ jsx("div", {
+				"data-camox-block-id": blockId,
+				"data-camox-detached": true,
+				"data-camox-hovered": !isBlockSelected || void 0,
+				"data-camox-focused": isBlockSelected || void 0,
+				"data-camox-overlay-mode": mode === "layout" ? "layout" : void 0,
+				style: {
 					position: "absolute",
-					inset: isBlockSelected ? OVERLAY_OFFSETS.blockSelected : OVERLAY_OFFSETS.blockHover,
-					border: `${isBlockSelected ? OVERLAY_WIDTHS.selected : OVERLAY_WIDTHS.hover} solid ${isBlockSelected ? colors.selected : colors.hover}`,
 					pointerEvents: "none",
 					zIndex: 10
-				} });
-			})()] }), container);
-			$[20] = container;
-			$[21] = isBlockSelected;
-			$[22] = mode;
-			$[23] = shouldShowOverlay;
-			$[24] = shouldShowSheetOverlay;
-			$[25] = t8;
-		} else t8 = $[25];
-		let t9;
-		if ($[26] !== t7 || $[27] !== t8) {
-			t9 = /* @__PURE__ */ jsxs(Fragment, { children: [t7, t8] });
-			$[26] = t7;
+				}
+			}) }), container);
+			$[21] = blockId;
+			$[22] = container;
+			$[23] = isBlockSelected;
+			$[24] = mode;
+			$[25] = shouldShowOverlay;
+			$[26] = t9;
+		} else t9 = $[26];
+		let t10;
+		if ($[27] !== t8 || $[28] !== t9) {
+			t10 = /* @__PURE__ */ jsxs(Fragment, { children: [t8, t9] });
 			$[27] = t8;
 			$[28] = t9;
-		} else t9 = $[28];
-		return t9;
+			$[29] = t10;
+		} else t10 = $[29];
+		return t10;
 	};
 	return {
 		Component: BlockComponent,
@@ -1651,28 +1542,25 @@ function _temp3(e_2) {
 function _temp4(e_3) {
 	return e_3.preventDefault();
 }
-function _temp5(e_4) {
-	return e_4.preventDefault();
-}
-function _temp6(state) {
+function _temp5(state) {
 	return state.context.selection;
 }
-function _temp7(state_0) {
+function _temp6(state_0) {
 	return state_0.context.isPageContentSheetOpen;
 }
-function _temp8(state_1) {
+function _temp7(state_1) {
 	return state_1.context.isAddBlockSheetOpen;
 }
-function _temp9(item) {
+function _temp8(item) {
 	return item.content;
 }
-function _temp0(state) {
+function _temp9(state) {
 	return state.context.selection;
 }
-function _temp1(state_0) {
+function _temp0(state_0) {
 	return state_0.context.isAddBlockSheetOpen;
 }
-function _temp10(state_1) {
+function _temp1(state_1) {
 	return state_1.context.isPageContentSheetOpen;
 }
 //#endregion