camox 0.41.1 → 0.42.0

package/dist/core/editing/createEditableBlock.js

@@ -5,8 +5,8 @@ import { Type as Type$1, resolveToMarkdown } from "../lib/contentType.js";
 import { buildImageSrcSet, getDefaultImageSizes, getDefaultImageWidth, transformImageUrl } from "../lib/imageTransform.js";
 import { markdownToReactNodes } from "../lib/lexicalReact.js";
 import { blockMutations, pageQueries, projectQueries, repeatableItemMutations } from "../../lib/queries.js";
-import { trackClientEvent } from "../../lib/telemetry-client.js";
-import { previewStore } from "../../features/preview/previewStore.js";
+import { previewStore, selectIsCommentMode } from "../../features/preview/previewStore.js";
+import { usePreviewSelection } from "../../features/preview/previewSelection.js";
 import { postOverlayMessage } from "../../features/preview/overlayMessages.js";
 import { useFrame } from "../../features/preview/components/Frame.js";
 import { AddBlockControlBar } from "../components/AddBlockControlBar.js";
@@ -14,6 +14,7 @@ import { InlineLexicalEditor } from "../components/lexical/InlineLexicalEditor.j
 import { useFieldSelection } from "../hooks/useFieldSelection.js";
 import { useIsEditable } from "../hooks/useIsEditable.js";
 import { useOverlayMessage } from "../hooks/useOverlayMessage.js";
+import { useOverlayState } from "../hooks/useOverlayState.js";
 import { c } from "react/compiler-runtime";
 import { Type } from "@sinclair/typebox";
 import { useMutation, useQuery } from "@tanstack/react-query";
@@ -182,7 +183,15 @@ function createEditableBlock(options) {
 		if (repeaterContext?.itemId != null) return `${blockId}__${repeaterContext.itemId}__${fieldName}`;
 		return `${blockId}__${fieldName}`;
 	};
-	const Field = ({ name, textStyle, linkStyle, children }) => {
+	const Field = (t0) => {
+		const $ = c(34);
+		if ($[0] !== "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883") {
+			for (let $i = 0; $i < 34; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+			$[0] = "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883";
+		}
+		const { name, textStyle, linkStyle, children } = t0;
+		const selectTarget = usePreviewSelection();
+		const isCommentMode = useSelector(previewStore, selectIsCommentMode);
 		const blockContext = React.use(Context);
 		if (!blockContext) throw new Error("Field must be used within a Block Component");
 		const { blockId, content, mode } = blockContext;
@@ -190,77 +199,154 @@ function createEditableBlock(options) {
 		const elementRef = React.useRef(null);
 		const { window: iframeWindow } = useFrame();
 		const projectSlug = useProjectSlug();
-		const { data: project } = useQuery(projectQueries.getBySlug(projectSlug));
-		const { data: pages } = useQuery({
-			...pageQueries.list(project?.id ?? 0),
-			enabled: !!project
-		});
-		const currentPathname = useLocation({ select: (l) => l.pathname });
+		let t1;
+		if ($[1] !== projectSlug) {
+			t1 = projectQueries.getBySlug(projectSlug);
+			$[1] = projectSlug;
+			$[2] = t1;
+		} else t1 = $[2];
+		const { data: project } = useQuery(t1);
+		let t2;
+		if ($[3] !== project?.id) {
+			t2 = pageQueries.list(project?.id ?? 0);
+			$[3] = project?.id;
+			$[4] = t2;
+		} else t2 = $[4];
+		const t3 = !!project;
+		let t4;
+		if ($[5] !== t2 || $[6] !== t3) {
+			t4 = {
+				...t2,
+				enabled: t3
+			};
+			$[5] = t2;
+			$[6] = t3;
+			$[7] = t4;
+		} else t4 = $[7];
+		const { data: pages } = useQuery(t4);
+		let t5;
+		if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+			t5 = { select: _temp };
+			$[8] = t5;
+		} else t5 = $[8];
+		const currentPathname = useLocation(t5);
 		const repeaterContext = React.use(RepeaterItemContext);
 		const fieldId = getOverlayFieldId(blockId, repeaterContext, String(name));
 		const fieldValue = repeaterContext ? repeaterContext.itemContent[name] : content[name];
 		const [isHovered, setIsHovered] = React.useState(false);
 		const [isEditorFocused, setIsEditorFocused] = React.useState(false);
 		const isSelectedFromSelection = useFieldSelection(blockId, String(name), "String", repeaterContext?.itemId);
-		const isFocused = isEditorFocused || isSelectedFromSelection;
+		const overlayState = useOverlayState(isHovered, isEditorFocused || isSelectedFromSelection);
 		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", { fieldId });
-		React.useEffect(() => {
-			setIsHovered(isHoveredFromSidebar);
-		}, [isHoveredFromSidebar]);
-		const updateBlockContent = useMutation(blockMutations.updateContent());
-		const updateRepeatableContent = useMutation(repeatableItemMutations.updateContent());
-		const handleChange = React.useCallback((newValue) => {
-			if (repeaterContext) {
-				const { itemId } = repeaterContext;
-				if (itemId != null) updateRepeatableContent.mutate({
-					id: itemId,
+		let t6;
+		let t7;
+		if ($[9] !== isHoveredFromSidebar) {
+			t6 = () => {
+				setIsHovered(isHoveredFromSidebar);
+			};
+			t7 = [isHoveredFromSidebar];
+			$[9] = isHoveredFromSidebar;
+			$[10] = t6;
+			$[11] = t7;
+		} else {
+			t6 = $[10];
+			t7 = $[11];
+		}
+		React.useEffect(t6, t7);
+		let t8;
+		if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+			t8 = blockMutations.updateContent();
+			$[12] = t8;
+		} else t8 = $[12];
+		const updateBlockContent = useMutation(t8);
+		let t9;
+		if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+			t9 = repeatableItemMutations.updateContent();
+			$[13] = t9;
+		} else t9 = $[13];
+		const updateRepeatableContent = useMutation(t9);
+		let t10;
+		if ($[14] !== blockId || $[15] !== name || $[16] !== repeaterContext || $[17] !== updateBlockContent || $[18] !== updateRepeatableContent) {
+			t10 = (newValue) => {
+				if (repeaterContext) {
+					const { itemId } = repeaterContext;
+					if (itemId != null) updateRepeatableContent.mutate({
+						id: itemId,
+						content: { [name]: newValue }
+					});
+				} else updateBlockContent.mutate({
+					id: blockId,
 					content: { [name]: newValue }
 				});
-			} else updateBlockContent.mutate({
-				id: blockId,
-				content: { [name]: newValue }
-			});
-		}, [
-			blockId,
-			name,
-			repeaterContext,
-			updateBlockContent,
-			updateRepeatableContent
-		]);
-		const handleFocus = React.useCallback(() => {
-			setIsEditorFocused(true);
-			if (repeaterContext?.itemId != null) previewStore.send({
-				type: "selectItemField",
-				blockId,
-				itemId: repeaterContext.itemId,
-				fieldName: name.toString(),
-				fieldType: "String"
-			});
-			else previewStore.send({
-				type: "selectBlockField",
-				blockId,
-				fieldName: name.toString(),
-				fieldType: "String"
-			});
-		}, [
-			blockId,
-			name,
-			repeaterContext?.itemId
-		]);
-		const handleBlur = React.useCallback((wasEdited) => {
-			setIsEditorFocused(false);
-			if (wasEdited) trackClientEvent("block_edited", {
-				via: "inline-lexical",
-				blockType: options.id,
-				field: String(name)
-			});
-		}, [name]);
-		const handleMouseEnter = () => {
-			if (isContentEditable) setIsHovered(true);
-		};
-		const handleMouseLeave = () => {
-			if (isContentEditable) setIsHovered(false);
-		};
+			};
+			$[14] = blockId;
+			$[15] = name;
+			$[16] = repeaterContext;
+			$[17] = updateBlockContent;
+			$[18] = updateRepeatableContent;
+			$[19] = t10;
+		} else t10 = $[19];
+		const handleChange = t10;
+		let t11;
+		if ($[20] !== blockId || $[21] !== name || $[22] !== repeaterContext || $[23] !== selectTarget) {
+			t11 = (event) => {
+				selectTarget(repeaterContext?.itemId != null ? {
+					type: "item-field",
+					blockId,
+					itemId: repeaterContext.itemId,
+					fieldName: String(name),
+					fieldType: "String"
+				} : {
+					type: "block-field",
+					blockId,
+					fieldName: String(name),
+					fieldType: "String"
+				}, event);
+			};
+			$[20] = blockId;
+			$[21] = name;
+			$[22] = repeaterContext;
+			$[23] = selectTarget;
+			$[24] = t11;
+		} else t11 = $[24];
+		const selectField = t11;
+		let t12;
+		if ($[25] !== selectField) {
+			t12 = () => {
+				if (selectIsCommentMode(previewStore.getSnapshot())) return;
+				setIsEditorFocused(true);
+				selectField();
+			};
+			$[25] = selectField;
+			$[26] = t12;
+		} else t12 = $[26];
+		const handleFocus = t12;
+		let t13;
+		if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+			t13 = () => {
+				setIsEditorFocused(false);
+			};
+			$[27] = t13;
+		} else t13 = $[27];
+		const handleBlur = t13;
+		let t14;
+		if ($[28] !== isContentEditable) {
+			t14 = () => {
+				if (isContentEditable) setIsHovered(true);
+			};
+			$[28] = isContentEditable;
+			$[29] = t14;
+		} else t14 = $[29];
+		const handleMouseEnter = t14;
+		let t15;
+		if ($[30] !== isContentEditable) {
+			t15 = () => {
+				if (isContentEditable) setIsHovered(false);
+			};
+			$[30] = isContentEditable;
+			$[31] = t15;
+		} else t15 = $[31];
+		const handleMouseLeave = t15;
 		const fieldData = { text: fieldValue };
 		if (!isContentEditable) return /* @__PURE__ */ jsx(Fragment, { children: children({ children: markdownToReactNodes(fieldValue, {
 			pages,
@@ -268,15 +354,20 @@ function createEditableBlock(options) {
 			textStyle,
 			linkStyle
 		}) }, fieldData) });
-		return /* @__PURE__ */ jsx(Fragment, { children: children({
+		const t16 = children({
 			ref: elementRef,
 			"data-camox-field-id": fieldId,
-			"data-camox-hovered": isHovered || void 0,
-			"data-camox-focused": isFocused || void 0,
+			...overlayState,
 			"data-camox-overlay-mode": options.synced ? "synced" : void 0,
 			onMouseEnter: handleMouseEnter,
 			onMouseLeave: handleMouseLeave,
-			children: /* @__PURE__ */ jsx(InlineLexicalEditor, {
+			onClickCapture: selectField,
+			children: isCommentMode ? markdownToReactNodes(fieldValue, {
+				pages,
+				fallbackHref: currentPathname,
+				textStyle,
+				linkStyle
+			}) : /* @__PURE__ */ jsx(InlineLexicalEditor, {
 				textStyle,
 				linkStyle,
 				pages,
@@ -287,15 +378,23 @@ function createEditableBlock(options) {
 				onFocus: handleFocus,
 				onBlur: handleBlur
 			})
-		}, fieldData) });
+		}, fieldData);
+		let t17;
+		if ($[32] !== t16) {
+			t17 = /* @__PURE__ */ jsx(Fragment, { children: t16 });
+			$[32] = t16;
+			$[33] = t17;
+		} else t17 = $[33];
+		return t17;
 	};
 	const Embed = (t0) => {
-		const $ = c(35);
-		if ($[0] !== "d6c181312c1800a4e5ae8a8c97d5ce89a20fae6d141b3bb8b9dd5c16e3c88316") {
-			for (let $i = 0; $i < 35; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "d6c181312c1800a4e5ae8a8c97d5ce89a20fae6d141b3bb8b9dd5c16e3c88316";
+		const $ = c(39);
+		if ($[0] !== "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883") {
+			for (let $i = 0; $i < 39; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+			$[0] = "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883";
 		}
 		const { name, children } = t0;
+		const selectTarget = usePreviewSelection();
 		const blockContext = React.use(Context);
 		if (!blockContext) throw new Error("Embed must be used within a Block Component");
 		const { blockId, content, mode } = blockContext;
@@ -314,39 +413,37 @@ function createEditableBlock(options) {
 		} else t2 = $[4];
 		const fieldId = t2;
 		const [isHovered, setIsHovered] = React.useState(false);
+		const overlayState = useOverlayState(isHovered);
 		const embedRef = React.useRef(null);
 		const itemId = repeaterContext?.itemId;
 		let t3;
-		if ($[5] !== blockId || $[6] !== isContentEditable || $[7] !== itemId || $[8] !== name) {
-			t3 = () => {
+		if ($[5] !== blockId || $[6] !== isContentEditable || $[7] !== itemId || $[8] !== name || $[9] !== selectTarget) {
+			t3 = (event) => {
 				if (!isContentEditable) return;
-				if (itemId != null) {
-					previewStore.send({
-						type: "selectItemField",
-						blockId,
-						itemId,
-						fieldName: String(name),
-						fieldType: "Embed"
-					});
-					return;
-				}
-				previewStore.send({
-					type: "selectBlockField",
+				selectTarget(itemId != null ? {
+					type: "item-field",
 					blockId,
+					itemId,
 					fieldName: String(name),
 					fieldType: "Embed"
-				});
+				} : {
+					type: "block-field",
+					blockId,
+					fieldName: String(name),
+					fieldType: "Embed"
+				}, event);
 			};
 			$[5] = blockId;
 			$[6] = isContentEditable;
 			$[7] = itemId;
 			$[8] = name;
-			$[9] = t3;
-		} else t3 = $[9];
+			$[9] = selectTarget;
+			$[10] = t3;
+		} else t3 = $[10];
 		const selectField = t3;
 		let t4;
 		let t5;
-		if ($[10] !== iframeWindow || $[11] !== isContentEditable || $[12] !== selectField) {
+		if ($[11] !== iframeWindow || $[12] !== isContentEditable || $[13] !== selectField) {
 			t4 = () => {
 				if (!isContentEditable || !iframeWindow) return;
 				let timer;
@@ -355,7 +452,12 @@ function createEditableBlock(options) {
 					timer = iframeWindow.setTimeout(() => {
 						const activeElement = iframeWindow.document.activeElement;
 						if (activeElement?.tagName !== "IFRAME") return;
-						if (embedRef.current?.contains(activeElement)) selectField();
+						if (!embedRef.current?.contains(activeElement)) return;
+						selectField({
+							currentTarget: embedRef.current,
+							preventDefault() {},
+							stopPropagation() {}
+						});
 					}, 0);
 				};
 				iframeWindow.addEventListener("blur", handleBlur);
@@ -369,91 +471,99 @@ function createEditableBlock(options) {
 				iframeWindow,
 				selectField
 			];
-			$[10] = iframeWindow;
-			$[11] = isContentEditable;
-			$[12] = selectField;
-			$[13] = t4;
-			$[14] = t5;
+			$[11] = iframeWindow;
+			$[12] = isContentEditable;
+			$[13] = selectField;
+			$[14] = t4;
+			$[15] = t5;
 		} else {
-			t4 = $[13];
-			t5 = $[14];
+			t4 = $[14];
+			t5 = $[15];
 		}
 		React.useEffect(t4, t5);
 		let t6;
-		if ($[15] !== fieldId) {
+		if ($[16] !== fieldId) {
 			t6 = { fieldId };
-			$[15] = fieldId;
-			$[16] = t6;
-		} else t6 = $[16];
+			$[16] = fieldId;
+			$[17] = t6;
+		} else t6 = $[17];
 		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", t6);
 		let t7;
 		let t8;
-		if ($[17] !== isHoveredFromSidebar) {
+		if ($[18] !== isHoveredFromSidebar) {
 			t7 = () => {
 				setIsHovered(isHoveredFromSidebar);
 			};
 			t8 = [isHoveredFromSidebar];
-			$[17] = isHoveredFromSidebar;
-			$[18] = t7;
-			$[19] = t8;
+			$[18] = isHoveredFromSidebar;
+			$[19] = t7;
+			$[20] = t8;
 		} else {
-			t7 = $[18];
-			t8 = $[19];
+			t7 = $[19];
+			t8 = $[20];
 		}
 		React.useEffect(t7, t8);
 		const t9 = isContentEditable ? fieldId : void 0;
 		const t10 = isContentEditable ? "embed" : void 0;
-		const t11 = isContentEditable && isHovered || void 0;
+		let t11;
+		if ($[21] !== isContentEditable || $[22] !== overlayState) {
+			t11 = isContentEditable ? overlayState : {};
+			$[21] = isContentEditable;
+			$[22] = overlayState;
+			$[23] = t11;
+		} else t11 = $[23];
 		let t12;
-		if ($[20] !== isContentEditable) {
+		if ($[24] !== isContentEditable) {
 			t12 = isContentEditable ? () => setIsHovered(true) : void 0;
-			$[20] = isContentEditable;
-			$[21] = t12;
-		} else t12 = $[21];
+			$[24] = isContentEditable;
+			$[25] = t12;
+		} else t12 = $[25];
 		let t13;
-		if ($[22] !== isContentEditable) {
+		if ($[26] !== isContentEditable) {
 			t13 = isContentEditable ? () => setIsHovered(false) : void 0;
-			$[22] = isContentEditable;
-			$[23] = t13;
-		} else t13 = $[23];
+			$[26] = isContentEditable;
+			$[27] = t13;
+		} else t13 = $[27];
 		let t14;
-		if ($[24] !== children || $[25] !== fieldValue) {
+		if ($[28] !== children || $[29] !== fieldValue) {
 			t14 = children({ src: fieldValue }, { url: fieldValue });
-			$[24] = children;
-			$[25] = fieldValue;
-			$[26] = t14;
-		} else t14 = $[26];
+			$[28] = children;
+			$[29] = fieldValue;
+			$[30] = t14;
+		} else t14 = $[30];
 		let t15;
-		if ($[27] !== selectField || $[28] !== t10 || $[29] !== t11 || $[30] !== t12 || $[31] !== t13 || $[32] !== t14 || $[33] !== t9) {
+		if ($[31] !== selectField || $[32] !== t10 || $[33] !== t11 || $[34] !== t12 || $[35] !== t13 || $[36] !== t14 || $[37] !== t9) {
 			t15 = /* @__PURE__ */ jsx("div", {
 				ref: embedRef,
 				onClickCapture: selectField,
 				"data-camox-field-id": t9,
 				"data-camox-field-type": t10,
-				"data-camox-hovered": t11,
+				...t11,
 				"data-camox-overlay-mode": options.synced ? "synced" : void 0,
 				onMouseEnter: t12,
 				onMouseLeave: t13,
 				children: t14
 			});
-			$[27] = selectField;
-			$[28] = t10;
-			$[29] = t11;
-			$[30] = t12;
-			$[31] = t13;
-			$[32] = t14;
-			$[33] = t9;
-			$[34] = t15;
-		} else t15 = $[34];
+			$[31] = selectField;
+			$[32] = t10;
+			$[33] = t11;
+			$[34] = t12;
+			$[35] = t13;
+			$[36] = t14;
+			$[37] = t9;
+			$[38] = t15;
+		} else t15 = $[38];
 		return t15;
 	};
 	const Link = (t0) => {
-		const $ = c(29);
-		if ($[0] !== "d6c181312c1800a4e5ae8a8c97d5ce89a20fae6d141b3bb8b9dd5c16e3c88316") {
-			for (let $i = 0; $i < 29; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "d6c181312c1800a4e5ae8a8c97d5ce89a20fae6d141b3bb8b9dd5c16e3c88316";
+		const $ = c(32);
+		if ($[0] !== "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883") {
+			for (let $i = 0; $i < 32; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+			$[0] = "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883";
 		}
 		const { name, children } = t0;
+		const selectTarget = usePreviewSelection();
+		const isCommentMode = useSelector(previewStore, selectIsCommentMode);
 		const blockContext = React.use(Context);
 		if (!blockContext) throw new Error("Link must be used within a Block Component");
 		const { blockId, content, mode } = blockContext;
@@ -502,7 +612,7 @@ function createEditableBlock(options) {
 		const { data: pages } = useQuery(t6);
 		let t7;
 		if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-			t7 = { select: _temp };
+			t7 = { select: _temp2 };
 			$[10] = t7;
 		} else t7 = $[10];
 		const resolvedHref = resolveLinkHref(fieldValue, pages, useLocation(t7));
@@ -512,7 +622,7 @@ function createEditableBlock(options) {
 		const [isHovered, setIsHovered] = React.useState(false);
 		const [isEditorFocused, setIsEditorFocused] = React.useState(false);
 		const isSelectedFromSelection = useFieldSelection(blockId, String(name), "Link", repeaterContext?.itemId);
-		const isFocused = isEditorFocused || isSelectedFromSelection;
+		const overlayState = useOverlayState(isHovered, isEditorFocused || isSelectedFromSelection);
 		React.useEffect(() => {
 			if (!isEditing) setDisplayText(fieldValue.text);
 		}, [fieldValue.text, isEditing]);
@@ -560,39 +670,49 @@ function createEditableBlock(options) {
 			});
 		};
 		let t11;
-		if ($[20] !== blockId || $[21] !== name || $[22] !== repeaterContext) {
-			t11 = () => {
-				setIsEditing(true);
-				setIsEditorFocused(true);
-				if (repeaterContext?.itemId != null) previewStore.send({
-					type: "selectItemField",
+		if ($[20] !== blockId || $[21] !== name || $[22] !== repeaterContext || $[23] !== selectTarget) {
+			t11 = (event) => {
+				selectTarget(repeaterContext?.itemId != null ? {
+					type: "item-field",
 					blockId,
 					itemId: repeaterContext.itemId,
 					fieldName: String(name),
 					fieldType: "Link"
-				});
-				else previewStore.send({
-					type: "selectBlockField",
+				} : {
+					type: "block-field",
 					blockId,
 					fieldName: String(name),
 					fieldType: "Link"
-				});
+				}, event);
 			};
 			$[20] = blockId;
 			$[21] = name;
 			$[22] = repeaterContext;
-			$[23] = t11;
-		} else t11 = $[23];
-		const handleFocus = t11;
+			$[23] = selectTarget;
+			$[24] = t11;
+		} else t11 = $[24];
+		const selectField = t11;
 		let t12;
-		if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+		if ($[25] !== selectField) {
 			t12 = () => {
+				if (selectIsCommentMode(previewStore.getSnapshot())) return;
+				setIsEditing(true);
+				setIsEditorFocused(true);
+				selectField();
+			};
+			$[25] = selectField;
+			$[26] = t12;
+		} else t12 = $[26];
+		const handleFocus = t12;
+		let t13;
+		if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+			t13 = () => {
 				setIsEditing(false);
 				setIsEditorFocused(false);
 			};
-			$[24] = t12;
-		} else t12 = $[24];
-		const handleBlur = t12;
+			$[27] = t13;
+		} else t13 = $[27];
+		const handleBlur = t13;
 		const linkData = {
 			text: displayText,
 			href: resolvedHref,
@@ -604,53 +724,54 @@ function createEditableBlock(options) {
 			rel: fieldValue.newTab ? "noreferrer" : void 0,
 			children: fieldValue.text
 		}, linkData) });
-		let t13;
 		let t14;
-		if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
-			t13 = () => setIsHovered(true);
-			t14 = () => setIsHovered(false);
-			$[25] = t13;
-			$[26] = t14;
+		let t15;
+		if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+			t14 = () => setIsHovered(true);
+			t15 = () => setIsHovered(false);
+			$[28] = t14;
+			$[29] = t15;
 		} else {
-			t13 = $[25];
-			t14 = $[26];
+			t14 = $[28];
+			t15 = $[29];
 		}
-		const t15 = children({
+		const t16 = children({
 			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,
+			...overlayState,
 			"data-camox-overlay-mode": options.synced ? "synced" : void 0,
-			contentEditable: true,
-			onClick: _temp2,
+			contentEditable: !isCommentMode,
+			onClickCapture: selectField,
+			onClick: _temp3,
 			onInput: handleInput,
 			onFocus: handleFocus,
 			onBlur: handleBlur,
-			onMouseEnter: t13,
-			onMouseLeave: t14,
-			onKeyDown: _temp3,
+			onMouseEnter: t14,
+			onMouseLeave: t15,
+			onKeyDown: _temp4,
 			spellCheck: false,
 			suppressContentEditableWarning: true
 		}, linkData);
-		let t16;
-		if ($[27] !== t15) {
-			t16 = /* @__PURE__ */ jsx(Fragment, { children: t15 });
-			$[27] = t15;
-			$[28] = t16;
-		} else t16 = $[28];
-		return t16;
+		let t17;
+		if ($[30] !== t16) {
+			t17 = /* @__PURE__ */ jsx(Fragment, { children: t16 });
+			$[30] = t16;
+			$[31] = t17;
+		} else t17 = $[31];
+		return t17;
 	};
 	const Image = (t0) => {
 		const $ = c(22);
-		if ($[0] !== "d6c181312c1800a4e5ae8a8c97d5ce89a20fae6d141b3bb8b9dd5c16e3c88316") {
+		if ($[0] !== "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883") {
 			for (let $i = 0; $i < 22; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "d6c181312c1800a4e5ae8a8c97d5ce89a20fae6d141b3bb8b9dd5c16e3c88316";
+			$[0] = "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883";
 		}
 		const { name, children } = t0;
+		const selectTarget = usePreviewSelection();
 		const blockContext = React.use(Context);
 		if (!blockContext) throw new Error("Image must be used within a Block Component");
 		const { blockId, content, mode } = blockContext;
@@ -667,7 +788,7 @@ function createEditableBlock(options) {
 		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, overlayFieldName, "Image", overlayItemId);
+		const overlayState = useOverlayState(isHovered, useFieldSelection(blockId, overlayFieldName, "Image", overlayItemId));
 		let t1;
 		if ($[1] !== fieldId) {
 			t1 = { fieldId };
@@ -691,30 +812,29 @@ function createEditableBlock(options) {
 		}
 		React.useEffect(t2, t3);
 		let t4;
-		if ($[6] !== blockId || $[7] !== isContentEditable || $[8] !== overlayFieldName || $[9] !== overlayItemId) {
-			t4 = () => {
+		if ($[6] !== blockId || $[7] !== isContentEditable || $[8] !== overlayFieldName || $[9] !== overlayItemId || $[10] !== selectTarget) {
+			t4 = (event) => {
 				if (!isContentEditable) return;
-				if (overlayItemId != null) previewStore.send({
-					type: "selectItemField",
+				selectTarget(overlayItemId != null ? {
+					type: "item-field",
 					blockId,
 					itemId: overlayItemId,
 					fieldName: overlayFieldName,
 					fieldType: "Image"
-				});
-				else previewStore.send({
-					type: "selectBlockField",
+				} : {
+					type: "block-field",
 					blockId,
 					fieldName: overlayFieldName,
 					fieldType: "Image"
-				});
-				previewStore.send({ type: "toggleContentSheet" });
+				}, event);
 			};
 			$[6] = blockId;
 			$[7] = isContentEditable;
 			$[8] = overlayFieldName;
 			$[9] = overlayItemId;
-			$[10] = t4;
-		} else t4 = $[10];
+			$[10] = selectTarget;
+			$[11] = t4;
+		} else t4 = $[11];
 		const handleClick = t4;
 		const imageProps = {
 			src: transformImageUrl(fieldValue.url, {
@@ -728,51 +848,47 @@ function createEditableBlock(options) {
 		};
 		if (!isContentEditable) return /* @__PURE__ */ jsx(Fragment, { children: children(imageProps, fieldValue) });
 		const t5 = "image";
-		const t6 = isHovered || void 0;
-		const t7 = isFocused || void 0;
-		const t8 = options.synced ? "synced" : void 0;
-		let t10;
-		let t9;
-		if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-			t9 = () => setIsHovered(true);
-			t10 = () => setIsHovered(false);
-			$[11] = t10;
-			$[12] = t9;
+		const t6 = options.synced ? "synced" : void 0;
+		let t7;
+		let t8;
+		if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+			t7 = () => setIsHovered(true);
+			t8 = () => setIsHovered(false);
+			$[12] = t7;
+			$[13] = t8;
 		} else {
-			t10 = $[11];
-			t9 = $[12];
+			t7 = $[12];
+			t8 = $[13];
 		}
-		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", {
+		const t9 = children(imageProps, fieldValue);
+		let t10;
+		if ($[14] !== fieldId || $[15] !== handleClick || $[16] !== overlayState || $[17] !== t6 || $[18] !== t7 || $[19] !== t8 || $[20] !== t9) {
+			t10 = /* @__PURE__ */ jsx("div", {
 				"data-camox-field-id": fieldId,
 				"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: t11
+				...overlayState,
+				"data-camox-overlay-mode": t6,
+				onMouseEnter: t7,
+				onMouseLeave: t8,
+				onClickCapture: handleClick,
+				children: t9
 			});
-			$[13] = fieldId;
-			$[14] = handleClick;
-			$[15] = t10;
-			$[16] = t11;
+			$[14] = fieldId;
+			$[15] = handleClick;
+			$[16] = overlayState;
 			$[17] = t6;
 			$[18] = t7;
 			$[19] = t8;
 			$[20] = t9;
-			$[21] = t12;
-		} else t12 = $[21];
-		return t12;
+			$[21] = t10;
+		} else t10 = $[21];
+		return t10;
 	};
 	const File = (t0) => {
 		const $ = c(9);
-		if ($[0] !== "d6c181312c1800a4e5ae8a8c97d5ce89a20fae6d141b3bb8b9dd5c16e3c88316") {
+		if ($[0] !== "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883") {
 			for (let $i = 0; $i < 9; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "d6c181312c1800a4e5ae8a8c97d5ce89a20fae6d141b3bb8b9dd5c16e3c88316";
+			$[0] = "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883";
 		}
 		const { name, children } = t0;
 		const blockContext = React.use(Context);
@@ -846,14 +962,17 @@ function createEditableBlock(options) {
 	const ImageList = _AssetList;
 	const FileList = _AssetList;
 	const RepeaterItemWrapper = (t0) => {
-		const $ = c(8);
-		if ($[0] !== "d6c181312c1800a4e5ae8a8c97d5ce89a20fae6d141b3bb8b9dd5c16e3c88316") {
-			for (let $i = 0; $i < 8; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "d6c181312c1800a4e5ae8a8c97d5ce89a20fae6d141b3bb8b9dd5c16e3c88316";
+		const $ = c(20);
+		if ($[0] !== "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883") {
+			for (let $i = 0; $i < 20; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+			$[0] = "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883";
 		}
 		const { itemId, blockId, mode, children } = t0;
 		const isContentEditable = useIsEditable(mode);
 		const { window: iframeWindow } = useFrame();
+		const selectTarget = usePreviewSelection();
+		const isCommentMode = useSelector(previewStore, selectIsCommentMode);
+		const [isLocallyHovered, setIsLocallyHovered] = React.useState(false);
 		const isRepeaterHovered = React.useContext(RepeaterHoverContext);
 		const t1 = String(blockId);
 		const t2 = String(itemId);
@@ -867,30 +986,71 @@ function createEditableBlock(options) {
 			$[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 overlayState = useOverlayState(useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_REPEATER_ITEM", "CAMOX_HOVER_REPEATER_ITEM_END", t3) || isRepeaterHovered || isCommentMode && isLocallyHovered);
+		let t4;
+		if ($[4] !== blockId || $[5] !== isCommentMode || $[6] !== isContentEditable || $[7] !== itemId || $[8] !== selectTarget) {
+			t4 = (event) => {
+				if (!isContentEditable || !isCommentMode || itemId == null) return;
+				const target = event.target;
+				if (target.closest("[data-camox-field-id]")) return;
+				if (target.closest("[data-camox-repeater-item-id], [data-camox-block-id], [data-camox-comment-block-id]") !== event.currentTarget) return;
+				selectTarget({
+					type: "item",
+					blockId,
+					itemId
+				}, event);
+			};
+			$[4] = blockId;
+			$[5] = isCommentMode;
+			$[6] = isContentEditable;
+			$[7] = itemId;
+			$[8] = selectTarget;
+			$[9] = t4;
+		} else t4 = $[9];
+		const handleClick = t4;
+		const t5 = isContentEditable ? itemId : void 0;
 		let t6;
-		if ($[4] !== children || $[5] !== t4 || $[6] !== t5) {
-			t6 = /* @__PURE__ */ jsx("div", {
-				"data-camox-repeater-item-id": t4,
-				"data-camox-hovered": t5,
+		let t7;
+		if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+			t6 = () => setIsLocallyHovered(true);
+			t7 = () => setIsLocallyHovered(false);
+			$[10] = t6;
+			$[11] = t7;
+		} else {
+			t6 = $[10];
+			t7 = $[11];
+		}
+		let t8;
+		if ($[12] !== isContentEditable || $[13] !== overlayState) {
+			t8 = isContentEditable ? overlayState : {};
+			$[12] = isContentEditable;
+			$[13] = overlayState;
+			$[14] = t8;
+		} else t8 = $[14];
+		let t9;
+		if ($[15] !== children || $[16] !== handleClick || $[17] !== t5 || $[18] !== t8) {
+			t9 = /* @__PURE__ */ jsx("div", {
+				"data-camox-repeater-item-id": t5,
+				onClickCapture: handleClick,
+				onMouseEnter: t6,
+				onMouseLeave: t7,
+				...t8,
 				"data-camox-overlay-mode": options.synced ? "synced" : void 0,
 				children
 			});
-			$[4] = children;
-			$[5] = t4;
-			$[6] = t5;
-			$[7] = t6;
-		} else t6 = $[7];
-		return t6;
+			$[15] = children;
+			$[16] = handleClick;
+			$[17] = t5;
+			$[18] = t8;
+			$[19] = t9;
+		} else t9 = $[19];
+		return t9;
 	};
 	const RepeaterHoverProvider = (t0) => {
 		const $ = c(7);
-		if ($[0] !== "d6c181312c1800a4e5ae8a8c97d5ce89a20fae6d141b3bb8b9dd5c16e3c88316") {
+		if ($[0] !== "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883") {
 			for (let $i = 0; $i < 7; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "d6c181312c1800a4e5ae8a8c97d5ce89a20fae6d141b3bb8b9dd5c16e3c88316";
+			$[0] = "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883";
 		}
 		const { blockId, fieldName, children } = t0;
 		const isContentEditable = useIsEditable("site");
@@ -921,9 +1081,9 @@ function createEditableBlock(options) {
 	};
 	const Repeater = (t0) => {
 		const $ = c(27);
-		if ($[0] !== "d6c181312c1800a4e5ae8a8c97d5ce89a20fae6d141b3bb8b9dd5c16e3c88316") {
+		if ($[0] !== "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883") {
 			for (let $i = 0; $i < 27; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "d6c181312c1800a4e5ae8a8c97d5ce89a20fae6d141b3bb8b9dd5c16e3c88316";
+			$[0] = "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883";
 		}
 		const { name, children } = t0;
 		const blockContext = React.use(Context);
@@ -1047,19 +1207,21 @@ function createEditableBlock(options) {
 		return t4;
 	};
 	const BlockComponent = (t0) => {
-		const $ = c(70);
-		if ($[0] !== "d6c181312c1800a4e5ae8a8c97d5ce89a20fae6d141b3bb8b9dd5c16e3c88316") {
-			for (let $i = 0; $i < 70; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "d6c181312c1800a4e5ae8a8c97d5ce89a20fae6d141b3bb8b9dd5c16e3c88316";
+		const $ = c(74);
+		if ($[0] !== "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883") {
+			for (let $i = 0; $i < 74; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+			$[0] = "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883";
 		}
 		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, _temp4);
-		const isPageEditorSidebarOpen = useSelector(previewStore, _temp5);
+		const isCommentMode = useSelector(previewStore, selectIsCommentMode);
+		const selection = useSelector(previewStore, _temp5);
 		const isAddBlockSidebarOpen = useSelector(previewStore, _temp6);
+		const selectTarget = usePreviewSelection();
 		const isBlockSelected = selection?.blockId === blockData._id;
+		const overlayState = useOverlayState(isHovered && !isBlockSelected, isBlockSelected);
 		const ref = React.useRef(null);
 		const [isFirstRender, setIsFirstRender] = React.useState(true);
 		let t1;
@@ -1091,89 +1253,92 @@ function createEditableBlock(options) {
 			$[6] = t3;
 		} else t3 = $[6];
 		let t4;
-		if ($[7] !== blockData._id || $[8] !== isBlockSelected || $[9] !== isFirstRender || $[10] !== isPageEditorSidebarOpen) {
+		if ($[7] !== blockData._id || $[8] !== isBlockSelected || $[9] !== isFirstRender) {
 			t4 = [
 				blockData._id,
 				isBlockSelected,
-				isFirstRender,
-				isPageEditorSidebarOpen
+				isFirstRender
 			];
 			$[7] = blockData._id;
 			$[8] = isBlockSelected;
 			$[9] = isFirstRender;
-			$[10] = isPageEditorSidebarOpen;
-			$[11] = t4;
-		} else t4 = $[11];
+			$[10] = t4;
+		} else t4 = $[10];
 		React.useEffect(t3, t4);
 		const t5 = String(blockData._id);
 		let t6;
-		if ($[12] !== t5) {
+		if ($[11] !== t5) {
 			t6 = { blockId: t5 };
-			$[12] = t5;
-			$[13] = t6;
-		} else t6 = $[13];
+			$[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 ($[14] !== isHoveredFromSidebar) {
+		if ($[13] !== isHoveredFromSidebar) {
 			t7 = () => {
 				setIsHovered(isHoveredFromSidebar);
 			};
 			t8 = [isHoveredFromSidebar];
-			$[14] = isHoveredFromSidebar;
-			$[15] = t7;
-			$[16] = t8;
+			$[13] = isHoveredFromSidebar;
+			$[14] = t7;
+			$[15] = t8;
 		} else {
-			t7 = $[15];
-			t8 = $[16];
+			t7 = $[14];
+			t8 = $[15];
 		}
 		React.useEffect(t7, t8);
 		let result;
-		if ($[17] !== 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(_temp7);
 			}
-			$[17] = blockData.content;
-			$[18] = result;
-		} else result = $[18];
+			$[16] = blockData.content;
+			$[17] = result;
+		} else result = $[17];
 		const normalizedContent = result;
 		let t9;
-		if ($[19] !== blockData._id || $[20] !== isContentEditable) {
+		if ($[18] !== blockData._id || $[19] !== isCommentMode || $[20] !== isContentEditable || $[21] !== selectTarget) {
 			t9 = (e) => {
 				if (!isContentEditable) return;
-				if (e.target.closest("[data-camox-field-id]")) return;
-				previewStore.send({
-					type: "setFocusedBlock",
+				const target = e.target;
+				if (target.closest("[data-camox-field-id]")) return;
+				if (isCommentMode && target.closest("[data-camox-repeater-item-id]")) return;
+				if (target.closest("[data-camox-block-id], [data-camox-comment-block-id]") !== e.currentTarget) return;
+				selectTarget({
+					type: "block",
 					blockId: blockData._id
-				});
+				}, e);
 			};
-			$[19] = blockData._id;
+			$[18] = blockData._id;
+			$[19] = isCommentMode;
 			$[20] = isContentEditable;
-			$[21] = t9;
-		} else t9 = $[21];
+			$[21] = selectTarget;
+			$[22] = t9;
+		} else t9 = $[22];
 		const handleClick = t9;
 		let t10;
-		if ($[22] !== isContentEditable) {
+		if ($[23] !== isContentEditable) {
 			t10 = () => {
 				if (isContentEditable) setIsHovered(true);
 			};
-			$[22] = isContentEditable;
-			$[23] = t10;
-		} else t10 = $[23];
+			$[23] = isContentEditable;
+			$[24] = t10;
+		} else t10 = $[24];
 		const handleMouseEnter = t10;
 		let t11;
-		if ($[24] !== isContentEditable) {
+		if ($[25] !== isContentEditable) {
 			t11 = () => {
 				if (isContentEditable) setIsHovered(false);
 			};
-			$[24] = isContentEditable;
-			$[25] = t11;
-		} else t11 = $[25];
+			$[25] = isContentEditable;
+			$[26] = t11;
+		} else t11 = $[26];
 		const handleMouseLeave = t11;
 		let t12;
-		if ($[26] !== addBlockAfterPosition || $[27] !== blockData.position) {
+		if ($[27] !== addBlockAfterPosition || $[28] !== blockData.position) {
 			t12 = (insertPosition) => {
 				postOverlayMessage({
 					type: "CAMOX_ADD_BLOCK_REQUEST",
@@ -1182,113 +1347,118 @@ function createEditableBlock(options) {
 					...addBlockAfterPosition !== void 0 && { afterPosition: addBlockAfterPosition }
 				});
 			};
-			$[26] = addBlockAfterPosition;
-			$[27] = blockData.position;
-			$[28] = t12;
-		} else t12 = $[28];
+			$[27] = addBlockAfterPosition;
+			$[28] = blockData.position;
+			$[29] = t12;
+		} else t12 = $[29];
 		const handleAddBlockClick = t12;
-		const shouldShowOverlay = isContentEditable && (isHovered || isBlockSelected) && !isAddBlockSidebarOpen;
+		const shouldShowOverlay = isContentEditable && (overlayState["data-camox-hovered"] || overlayState["data-camox-focused"]) && !isAddBlockSidebarOpen;
 		const shouldShowAddBlockOverlay = isAddBlockSidebarOpen && mode !== "peek";
 		let t13;
-		if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+		if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
 			t13 = {
 				position: "relative",
 				scrollMargin: "5rem",
 				background: "var(--background)"
 			};
-			$[29] = t13;
-		} else t13 = $[29];
+			$[30] = t13;
+		} else t13 = $[30];
 		const t14 = isContentEditable ? blockData._id : void 0;
-		const t15 = shouldShowOverlay && !isBlockSelected || void 0;
-		const t16 = shouldShowOverlay && isBlockSelected || void 0;
-		const t17 = blockData._id;
-		let t18;
-		if ($[30] !== blockData.content) {
-			t18 = {
+		let t15;
+		if ($[31] !== overlayState || $[32] !== shouldShowOverlay) {
+			t15 = shouldShowOverlay ? overlayState : {};
+			$[31] = overlayState;
+			$[32] = shouldShowOverlay;
+			$[33] = t15;
+		} else t15 = $[33];
+		const t16 = blockData._id;
+		let t17;
+		if ($[34] !== blockData.content) {
+			t17 = {
 				...contentDefaults,
 				...blockData.content
 			};
-			$[30] = blockData.content;
-			$[31] = t18;
-		} else t18 = $[31];
-		const merged = t18;
+			$[34] = blockData.content;
+			$[35] = t17;
+		} else t17 = $[35];
+		const merged = t17;
 		let overrides;
-		if ($[32] !== merged) {
+		if ($[36] !== 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];
 			}
-			$[32] = merged;
-			$[33] = overrides;
-		} else overrides = $[33];
-		let t19;
-		if ($[34] !== merged || $[35] !== overrides) {
-			t19 = {
+			$[36] = merged;
+			$[37] = overrides;
+		} else overrides = $[37];
+		let t18;
+		if ($[38] !== merged || $[39] !== overrides) {
+			t18 = {
 				...merged,
 				...overrides
 			};
-			$[34] = merged;
-			$[35] = overrides;
-			$[36] = t19;
-		} else t19 = $[36];
-		const t20 = t19;
-		let t21;
-		if ($[37] !== blockData.settings) {
-			t21 = {
+			$[38] = merged;
+			$[39] = overrides;
+			$[40] = t18;
+		} else t18 = $[40];
+		const t19 = t18;
+		let t20;
+		if ($[41] !== blockData.settings) {
+			t20 = {
 				...settingsDefaults,
 				...blockData.settings
 			};
-			$[37] = blockData.settings;
-			$[38] = t21;
-		} else t21 = $[38];
-		const t22 = t21;
-		let t23;
-		if ($[39] !== blockData._id || $[40] !== isHovered || $[41] !== mode || $[42] !== t20 || $[43] !== t22) {
-			t23 = {
-				blockId: t17,
-				content: t20,
-				settings: t22,
+			$[41] = blockData.settings;
+			$[42] = t20;
+		} else t20 = $[42];
+		const t21 = t20;
+		let t22;
+		if ($[43] !== blockData._id || $[44] !== isHovered || $[45] !== mode || $[46] !== t19 || $[47] !== t21) {
+			t22 = {
+				blockId: t16,
+				content: t19,
+				settings: t21,
 				mode,
 				isHovered,
 				setIsHovered
 			};
-			$[39] = blockData._id;
-			$[40] = isHovered;
-			$[41] = mode;
-			$[42] = t20;
-			$[43] = t22;
-			$[44] = t23;
-		} else t23 = $[44];
+			$[43] = blockData._id;
+			$[44] = isHovered;
+			$[45] = mode;
+			$[46] = t19;
+			$[47] = t21;
+			$[48] = t22;
+		} else t22 = $[48];
+		let t23;
+		if ($[49] !== normalizedContent) {
+			t23 = /* @__PURE__ */ jsx(options.component, { content: normalizedContent });
+			$[49] = normalizedContent;
+			$[50] = t23;
+		} else t23 = $[50];
 		let t24;
-		if ($[45] !== normalizedContent) {
-			t24 = /* @__PURE__ */ jsx(options.component, { content: normalizedContent });
-			$[45] = normalizedContent;
-			$[46] = t24;
-		} else t24 = $[46];
-		let t25;
-		if ($[47] !== t23 || $[48] !== t24) {
-			t25 = /* @__PURE__ */ jsx(Context.Provider, {
-				value: t23,
-				children: t24
+		if ($[51] !== t22 || $[52] !== t23) {
+			t24 = /* @__PURE__ */ jsx(Context.Provider, {
+				value: t22,
+				children: t23
 			});
-			$[47] = t23;
-			$[48] = t24;
-			$[49] = t25;
-		} else t25 = $[49];
-		const t26 = shouldShowAddBlockOverlay || void 0;
-		let t27;
-		if ($[50] !== t26) {
-			t27 = /* @__PURE__ */ jsx("div", {
+			$[51] = t22;
+			$[52] = t23;
+			$[53] = t24;
+		} else t24 = $[53];
+		const t25 = shouldShowAddBlockOverlay || void 0;
+		let t26;
+		if ($[54] !== t25) {
+			t26 = /* @__PURE__ */ jsx("div", {
 				className: "camox-sheet-overlay",
-				"data-camox-visible": t26
+				"data-camox-visible": t25
 			});
-			$[50] = t26;
-			$[51] = t27;
-		} else t27 = $[51];
-		let t28;
-		if ($[52] !== handleAddBlockClick || $[53] !== isAddBlockSidebarOpen || $[54] !== isFirstBlock || $[55] !== mode || $[56] !== shouldShowOverlay || $[57] !== showAddBlockBottom || $[58] !== showAddBlockTop) {
-			t28 = shouldShowOverlay && /* @__PURE__ */ jsxs(Fragment, { children: [(showAddBlockTop ?? (mode !== "layout" && !isFirstBlock)) && /* @__PURE__ */ jsx(AddBlockControlBar, {
+			$[54] = t25;
+			$[55] = t26;
+		} else t26 = $[55];
+		let t27;
+		if ($[56] !== handleAddBlockClick || $[57] !== isAddBlockSidebarOpen || $[58] !== isCommentMode || $[59] !== isFirstBlock || $[60] !== mode || $[61] !== shouldShowOverlay || $[62] !== showAddBlockBottom || $[63] !== showAddBlockTop) {
+			t27 = shouldShowOverlay && !isCommentMode && /* @__PURE__ */ jsxs(Fragment, { children: [(showAddBlockTop ?? (mode !== "layout" && !isFirstBlock)) && /* @__PURE__ */ jsx(AddBlockControlBar, {
 				position: "top",
 				hidden: isAddBlockSidebarOpen,
 				onMouseLeave: () => setIsHovered(false),
@@ -1299,46 +1469,45 @@ function createEditableBlock(options) {
 				onMouseLeave: () => setIsHovered(false),
 				onClick: () => handleAddBlockClick("after")
 			})] });
-			$[52] = handleAddBlockClick;
-			$[53] = isAddBlockSidebarOpen;
-			$[54] = isFirstBlock;
-			$[55] = mode;
-			$[56] = shouldShowOverlay;
-			$[57] = showAddBlockBottom;
-			$[58] = showAddBlockTop;
-			$[59] = t28;
-		} else t28 = $[59];
-		let t29;
-		if ($[60] !== handleClick || $[61] !== handleMouseEnter || $[62] !== handleMouseLeave || $[63] !== t14 || $[64] !== t15 || $[65] !== t16 || $[66] !== t25 || $[67] !== t27 || $[68] !== t28) {
-			t29 = /* @__PURE__ */ jsxs("div", {
+			$[56] = handleAddBlockClick;
+			$[57] = isAddBlockSidebarOpen;
+			$[58] = isCommentMode;
+			$[59] = isFirstBlock;
+			$[60] = mode;
+			$[61] = shouldShowOverlay;
+			$[62] = showAddBlockBottom;
+			$[63] = showAddBlockTop;
+			$[64] = t27;
+		} else t27 = $[64];
+		let t28;
+		if ($[65] !== handleClick || $[66] !== handleMouseEnter || $[67] !== handleMouseLeave || $[68] !== t14 || $[69] !== t15 || $[70] !== t24 || $[71] !== t26 || $[72] !== t27) {
+			t28 = /* @__PURE__ */ jsxs("div", {
 				className: "group visual-editing-block",
 				ref,
 				style: t13,
 				"data-camox-block-id": t14,
-				"data-camox-hovered": t15,
-				"data-camox-focused": t16,
+				...t15,
 				"data-camox-overlay-mode": options.synced ? "synced" : void 0,
-				onClick: handleClick,
+				onClickCapture: handleClick,
 				onMouseEnter: handleMouseEnter,
 				onMouseLeave: handleMouseLeave,
 				children: [
-					t25,
-					t27,
-					t28
+					t24,
+					t26,
+					t27
 				]
 			});
-			$[60] = handleClick;
-			$[61] = handleMouseEnter;
-			$[62] = handleMouseLeave;
-			$[63] = t14;
-			$[64] = t15;
-			$[65] = t16;
-			$[66] = t25;
-			$[67] = t27;
-			$[68] = t28;
-			$[69] = t29;
-		} else t29 = $[69];
-		return t29;
+			$[65] = handleClick;
+			$[66] = handleMouseEnter;
+			$[67] = handleMouseLeave;
+			$[68] = t14;
+			$[69] = t15;
+			$[70] = t24;
+			$[71] = t26;
+			$[72] = t27;
+			$[73] = t28;
+		} else t28 = $[73];
+		return t28;
 	};
 	const useSetting = (name) => {
 		const ctx = React.use(Context);
@@ -1350,10 +1519,10 @@ function createEditableBlock(options) {
 	* Provides the same hover, selection, and sheet overlays as the main BlockComponent.
 	*/
 	const Detached = (t0) => {
-		const $ = c(30);
-		if ($[0] !== "d6c181312c1800a4e5ae8a8c97d5ce89a20fae6d141b3bb8b9dd5c16e3c88316") {
-			for (let $i = 0; $i < 30; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "d6c181312c1800a4e5ae8a8c97d5ce89a20fae6d141b3bb8b9dd5c16e3c88316";
+		const $ = c(32);
+		if ($[0] !== "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883") {
+			for (let $i = 0; $i < 32; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+			$[0] = "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883";
 		}
 		const { children } = t0;
 		const ctx = React.use(Context);
@@ -1363,7 +1532,9 @@ function createEditableBlock(options) {
 		const { window: iframeWindow } = useFrame();
 		const selection = useSelector(previewStore, _temp8);
 		const isAddBlockSidebarOpen = useSelector(previewStore, _temp9);
+		const selectTarget = usePreviewSelection();
 		const isBlockSelected = selection?.blockId === blockId;
+		const overlayState = useOverlayState(isHovered && !isBlockSelected, isBlockSelected);
 		const t1 = String(blockId);
 		let t2;
 		if ($[1] !== t1) {
@@ -1388,68 +1559,74 @@ function createEditableBlock(options) {
 			t4 = $[6];
 		}
 		React.useEffect(t3, t4);
-		const shouldShowOverlay = isContentEditable && (isHovered || isBlockSelected) && !isAddBlockSidebarOpen;
+		const shouldShowOverlay = isContentEditable && (overlayState["data-camox-hovered"] || overlayState["data-camox-focused"]) && !isAddBlockSidebarOpen;
 		const shouldHideForAddBlockSidebar = isAddBlockSidebarOpen && mode !== "peek";
 		let t5;
-		if ($[7] !== blockId || $[8] !== isContentEditable) {
+		if ($[7] !== blockId || $[8] !== isContentEditable || $[9] !== selectTarget) {
 			t5 = (e) => {
 				if (!isContentEditable) return;
-				e.stopPropagation();
-				previewStore.send({
-					type: "setFocusedBlock",
+				const target = e.target;
+				if (target.closest("[data-camox-field-id]")) return;
+				if (selectIsCommentMode(previewStore.getSnapshot()) && target.closest("[data-camox-repeater-item-id]")) return;
+				if (target.closest("[data-camox-block-id], [data-camox-comment-block-id]") !== e.currentTarget) return;
+				selectTarget({
+					type: "block",
 					blockId
-				});
+				}, e);
 			};
 			$[7] = blockId;
 			$[8] = isContentEditable;
-			$[9] = t5;
-		} else t5 = $[9];
+			$[9] = selectTarget;
+			$[10] = t5;
+		} else t5 = $[10];
 		const handleClick = t5;
 		let t6;
-		if ($[10] !== isContentEditable || $[11] !== setIsHovered) {
+		if ($[11] !== isContentEditable || $[12] !== setIsHovered) {
 			t6 = () => {
 				if (isContentEditable) setIsHovered(true);
 			};
-			$[10] = isContentEditable;
-			$[11] = setIsHovered;
-			$[12] = t6;
-		} else t6 = $[12];
+			$[11] = isContentEditable;
+			$[12] = setIsHovered;
+			$[13] = t6;
+		} else t6 = $[13];
 		const handleMouseEnter = t6;
 		let t7;
-		if ($[13] !== isContentEditable || $[14] !== setIsHovered) {
+		if ($[14] !== isContentEditable || $[15] !== setIsHovered) {
 			t7 = () => {
 				if (isContentEditable) setIsHovered(false);
 			};
-			$[13] = isContentEditable;
-			$[14] = setIsHovered;
-			$[15] = t7;
-		} else t7 = $[15];
+			$[14] = isContentEditable;
+			$[15] = setIsHovered;
+			$[16] = t7;
+		} else t7 = $[16];
 		const handleMouseLeave = t7;
 		const [container, setContainer] = React.useState(null);
-		const t8 = shouldHideForAddBlockSidebar ? 0 : 1;
-		let t9;
-		if ($[16] !== children || $[17] !== handleClick || $[18] !== handleMouseEnter || $[19] !== handleMouseLeave || $[20] !== t8) {
-			t9 = children({
+		const t8 = isContentEditable ? blockId : void 0;
+		const t9 = shouldHideForAddBlockSidebar ? 0 : 1;
+		let t10;
+		if ($[17] !== children || $[18] !== handleClick || $[19] !== handleMouseEnter || $[20] !== handleMouseLeave || $[21] !== t8 || $[22] !== t9) {
+			t10 = children({
+				"data-camox-comment-block-id": t8,
 				ref: setContainer,
-				style: { opacity: t8 },
-				onClick: handleClick,
+				style: { opacity: t9 },
+				onClickCapture: handleClick,
 				onMouseEnter: handleMouseEnter,
 				onMouseLeave: handleMouseLeave
 			});
-			$[16] = children;
-			$[17] = handleClick;
-			$[18] = handleMouseEnter;
-			$[19] = handleMouseLeave;
-			$[20] = t8;
-			$[21] = t9;
-		} else t9 = $[21];
-		let t10;
-		if ($[22] !== blockId || $[23] !== container || $[24] !== isBlockSelected || $[25] !== shouldShowOverlay) {
-			t10 = container && createPortal(/* @__PURE__ */ jsx(Fragment, { children: shouldShowOverlay && /* @__PURE__ */ jsx("div", {
+			$[17] = children;
+			$[18] = handleClick;
+			$[19] = handleMouseEnter;
+			$[20] = handleMouseLeave;
+			$[21] = t8;
+			$[22] = t9;
+			$[23] = t10;
+		} else t10 = $[23];
+		let t11;
+		if ($[24] !== blockId || $[25] !== container || $[26] !== overlayState || $[27] !== shouldShowOverlay) {
+			t11 = 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,
+				...overlayState,
 				"data-camox-overlay-mode": options.synced ? "synced" : void 0,
 				style: {
 					position: "absolute",
@@ -1457,20 +1634,20 @@ function createEditableBlock(options) {
 					zIndex: 10
 				}
 			}) }), container);
-			$[22] = blockId;
-			$[23] = container;
-			$[24] = isBlockSelected;
-			$[25] = shouldShowOverlay;
-			$[26] = t10;
-		} else t10 = $[26];
-		let t11;
-		if ($[27] !== t10 || $[28] !== t9) {
-			t11 = /* @__PURE__ */ jsxs(Fragment, { children: [t9, t10] });
-			$[27] = t10;
-			$[28] = t9;
-			$[29] = t11;
-		} else t11 = $[29];
-		return t11;
+			$[24] = blockId;
+			$[25] = container;
+			$[26] = overlayState;
+			$[27] = shouldShowOverlay;
+			$[28] = t11;
+		} else t11 = $[28];
+		let t12;
+		if ($[29] !== t10 || $[30] !== t11) {
+			t12 = /* @__PURE__ */ jsxs(Fragment, { children: [t10, t11] });
+			$[29] = t10;
+			$[30] = t11;
+			$[31] = t12;
+		} else t12 = $[31];
+		return t12;
 	};
 	return {
 		Detached,
@@ -1550,20 +1727,20 @@ function createEditableBlock(options) {
 function _temp(l) {
 	return l.pathname;
 }
-function _temp2(e_0) {
+function _temp2(l) {
+	return l.pathname;
+}
+function _temp3(e_0) {
 	return e_0.preventDefault();
 }
-function _temp3(e_1) {
+function _temp4(e_1) {
 	if (e_1.key === "Escape") e_1.target.blur();
 }
-function _temp4(state) {
+function _temp5(state) {
 	return state.context.selection;
 }
-function _temp5(state_0) {
-	return state_0.context.isPageEditorSidebarOpen;
-}
-function _temp6(state_1) {
-	return state_1.context.isAddBlockSidebarOpen;
+function _temp6(state_0) {
+	return state_0.context.isAddBlockSidebarOpen;
 }
 function _temp7(item) {
 	return item.content;