camox 0.76.0 → 0.77.0

package/dist/core/editing/createEditableBlock.js

@@ -12,19 +12,16 @@ import { renderImagePlaceholder } from "../lib/imagePlaceholder.js";
 import { buildImageSrcSet, getDefaultImageSizes, getDefaultImageWidth, transformImageUrl } from "../lib/imageTransform.js";
 import { markdownToReactNodes } from "../lib/lexicalReact.js";
 import { resolveReference, resolveReferenceList } from "../lib/reference.js";
+import { placementId, placementThrough, sameTarget, slotSelection } from "./fieldSlot.js";
 import { selectionBlockId } from "../../features/preview/previewStore.js";
-import { overlayFieldId, recordPlacementId } from "../../features/preview/overlayMessages.js";
-import { useIsEditable } from "../hooks/useIsEditable.js";
-import { CanvasWorkspaceContext } from "../../features/canvas/canvasZoom.js";
-import { PreviewEditingOwnerContext, usePreviewSelection, usePreviewTargetSelection } from "../../features/preview/previewSelection.js";
-import { useApplyContentEdit } from "./contentEdits.js";
 import { useFrame } from "../../features/preview/components/Frame.js";
+import { PreviewEditingOwnerContext } from "../../features/preview/previewSelection.js";
+import { FieldScopeContext, useEditingSelection, useFieldScope, useFieldSlot, useIsEditable, useSelectTarget, useSidebarHover } from "./useFieldSlot.js";
+import { CanvasWorkspaceContext } from "../../features/canvas/canvasZoom.js";
 import { useLatestRecord } from "./useLatestRecord.js";
 import { registerRepeatableItem } from "../../features/preview/repeatableItemTargets.js";
 import { revealScrollDelta } from "../../features/preview/selectionReveal.js";
 import { InlineLexicalEditor } from "../components/lexical/InlineLexicalEditor.js";
-import { useFieldSelection, useRecordSelection } from "../hooks/useFieldSelection.js";
-import { useOverlayMessage } from "../hooks/useOverlayMessage.js";
 import { useOverlayState } from "../hooks/useOverlayState.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
@@ -33,8 +30,6 @@ import { Type } from "@sinclair/typebox";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/core/editing/createEditableBlock.tsx
-/** Inline field writes report no failure: the field keeps what was typed. */
-const ignore = () => {};
 /** The pages links lead to in the locale viewed, for the studio's editors, who read the project. */
 function useEditorLinkPages() {
 	const $ = c(1);
@@ -88,203 +83,98 @@ function createEditableBlock(options) {
 	const emptySettings = emptyFieldValues(settingsTypeboxSchema);
 	const ToReact = options.toReact;
 	const Context = React.createContext(null);
-	const RepeatableItemContext = React.createContext(null);
-	const ReferenceContext = React.createContext(null);
+	const ItemNestingContext = React.createContext(null);
 	const RepeaterHoverContext = React.createContext(null);
-	const getOverlayFieldId = (blockId, fieldName, scope = {}) => scope.reference ? overlayFieldId(blockId, fieldName, { placement: scope.reference.placement }) : overlayFieldId(blockId, fieldName, { itemId: scope.itemId });
+	const useScope = (primitive) => {
+		const scope = useFieldScope();
+		if (!scope) throw new Error(`${primitive} must be used within a Block Component`);
+		return scope;
+	};
 	const Field = (t0) => {
-		const $ = c(37);
+		const $ = c(17);
 		const { name, textStyle, linkStyle, children } = t0;
-		const selectTarget = usePreviewSelection();
-		const blockContext = React.use(Context);
-		if (!blockContext) throw new Error("Field must be used within a Block Component");
-		const { blockId, content } = blockContext;
-		const isContentEditable = useIsEditable();
+		useScope("Field");
+		const [isEditorFocused, setIsEditorFocused] = React.useState(false);
+		let t1;
+		if ($[0] !== isEditorFocused) {
+			t1 = { editing: isEditorFocused };
+			$[0] = isEditorFocused;
+			$[1] = t1;
+		} else t1 = $[1];
+		const field = useFieldSlot(String(name), "String", t1);
 		const elementRef = React.useRef(null);
-		const { window: iframeWindow } = useFrame();
 		const pages = useEditorLinkPages();
-		let t1;
-		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-			t1 = { select: _temp };
-			$[0] = t1;
-		} else t1 = $[0];
-		const currentPathname = useLocation(t1);
-		const repeaterContext = React.use(RepeatableItemContext);
-		const reference = React.use(ReferenceContext);
-		const fieldId = getOverlayFieldId(blockId, String(name), {
-			itemId: repeaterContext?.itemId,
-			reference
-		});
-		const fieldValue = repeaterContext ? repeaterContext.itemContent[name] : content[name];
-		const [isHovered, setIsHovered] = React.useState(false);
-		const [isEditorFocused, setIsEditorFocused] = React.useState(false);
-		const isBlockFieldSelected = useFieldSelection(blockId, String(name), "String", repeaterContext?.itemId);
-		const isRecordFieldSelected = useRecordSelection(reference?.placement ?? null, String(name));
-		const overlayState = useOverlayState(isHovered, isEditorFocused || (reference ? isRecordFieldSelected : isBlockFieldSelected));
-		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", { fieldId });
-		const [prevSidebarHover, setPrevSidebarHover] = React.useState(isHoveredFromSidebar);
-		if (prevSidebarHover !== isHoveredFromSidebar) {
-			setPrevSidebarHover(isHoveredFromSidebar);
-			setIsHovered(isHoveredFromSidebar);
-		}
-		const applyEdit = useApplyContentEdit();
 		let t2;
-		if ($[1] !== applyEdit || $[2] !== blockId || $[3] !== name || $[4] !== reference || $[5] !== repeaterContext) {
-			t2 = (newValue) => {
-				if (reference) {
-					reference.update(String(name), newValue);
-					return;
-				}
-				const content_0 = { [name]: newValue };
-				if (repeaterContext) {
-					const { itemId } = repeaterContext;
-					if (itemId != null) applyEdit({
-						type: "itemContent",
-						itemId,
-						content: content_0
-					}).catch(ignore);
-				} else applyEdit({
-					type: "blockContent",
-					blockId,
-					content: content_0
-				}).catch(ignore);
-			};
-			$[1] = applyEdit;
-			$[2] = blockId;
-			$[3] = name;
-			$[4] = reference;
-			$[5] = repeaterContext;
-			$[6] = t2;
-		} else t2 = $[6];
-		const handleChange = t2;
-		let t3;
-		if ($[7] !== blockId || $[8] !== name || $[9] !== reference || $[10] !== repeaterContext || $[11] !== selectTarget) {
-			t3 = () => {
-				if (reference) {
-					reference.selectRecordField(String(name), "String");
-					return;
-				}
-				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"
-				});
-			};
-			$[7] = blockId;
-			$[8] = name;
-			$[9] = reference;
-			$[10] = repeaterContext;
-			$[11] = selectTarget;
-			$[12] = t3;
-		} else t3 = $[12];
-		const selectField = t3;
-		let t4;
-		if ($[13] !== selectField) {
-			t4 = () => {
-				setIsEditorFocused(true);
-				selectField();
-			};
-			$[13] = selectField;
-			$[14] = t4;
-		} else t4 = $[14];
-		const handleFocus = t4;
-		let t5;
-		if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
-			t5 = () => {
-				setIsEditorFocused(false);
-			};
-			$[15] = t5;
-		} else t5 = $[15];
-		const handleBlur = t5;
-		let t6;
-		if ($[16] !== isContentEditable) {
-			t6 = () => {
-				if (isContentEditable) setIsHovered(true);
-			};
-			$[16] = isContentEditable;
-			$[17] = t6;
-		} else t6 = $[17];
-		const handleMouseEnter = t6;
-		let t7;
-		if ($[18] !== isContentEditable) {
-			t7 = () => {
-				if (isContentEditable) setIsHovered(false);
-			};
-			$[18] = isContentEditable;
-			$[19] = t7;
-		} else t7 = $[19];
-		const handleMouseLeave = t7;
+		if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+			t2 = { select: _temp };
+			$[2] = t2;
+		} else t2 = $[2];
+		const currentPathname = useLocation(t2);
+		const fieldValue = field.value;
 		const fieldData = { text: fieldValue };
-		const fieldSchema = repeaterContext ? repeaterContext.itemSchema?.[name] : (blockContext.sourceSchema ?? typeboxSchema.properties)[name];
-		let t8;
-		if ($[20] !== currentPathname || $[21] !== fieldValue || $[22] !== linkStyle || $[23] !== pages || $[24] !== textStyle) {
-			t8 = () => markdownToReactNodes(fieldValue, {
+		if (!field.editable) {
+			const text = markdownToReactNodes(fieldValue, {
 				pages,
 				fallbackHref: currentPathname,
 				textStyle,
 				linkStyle
 			});
-			$[20] = currentPathname;
-			$[21] = fieldValue;
-			$[22] = linkStyle;
-			$[23] = pages;
-			$[24] = textStyle;
-			$[25] = t8;
-		} else t8 = $[25];
-		const text = t8;
-		if (!isContentEditable) return /* @__PURE__ */ jsx(Fragment, { children: children({ children: text() }, fieldData) });
-		const t9 = fieldSchema?.maxLength;
-		let t10;
-		if ($[26] !== currentPathname || $[27] !== fieldValue || $[28] !== handleChange || $[29] !== handleFocus || $[30] !== linkStyle || $[31] !== pages || $[32] !== t9 || $[33] !== textStyle) {
-			t10 = /* @__PURE__ */ jsx(InlineLexicalEditor, {
+			return /* @__PURE__ */ jsx(Fragment, { children: children({ children: text }, fieldData) });
+		}
+		const t3 = field.schema?.maxLength;
+		let t4;
+		if ($[3] !== field) {
+			t4 = () => {
+				setIsEditorFocused(true);
+				field.select();
+			};
+			$[3] = field;
+			$[4] = t4;
+		} else t4 = $[4];
+		let t5;
+		if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+			t5 = () => setIsEditorFocused(false);
+			$[5] = t5;
+		} else t5 = $[5];
+		let t6;
+		if ($[6] !== currentPathname || $[7] !== field.write || $[8] !== fieldValue || $[9] !== linkStyle || $[10] !== pages || $[11] !== t3 || $[12] !== t4 || $[13] !== textStyle) {
+			t6 = /* @__PURE__ */ jsx(InlineLexicalEditor, {
 				textStyle,
 				linkStyle,
 				pages,
 				fallbackHref: currentPathname,
 				initialState: fieldValue,
 				externalState: fieldValue,
-				maxLength: t9,
-				onChange: handleChange,
-				onFocus: handleFocus,
-				onBlur: handleBlur
+				maxLength: t3,
+				onChange: field.write,
+				onFocus: t4,
+				onBlur: t5
 			});
-			$[26] = currentPathname;
-			$[27] = fieldValue;
-			$[28] = handleChange;
-			$[29] = handleFocus;
-			$[30] = linkStyle;
-			$[31] = pages;
-			$[32] = t9;
-			$[33] = textStyle;
-			$[34] = t10;
-		} else t10 = $[34];
-		const t11 = children({
+			$[6] = currentPathname;
+			$[7] = field.write;
+			$[8] = fieldValue;
+			$[9] = linkStyle;
+			$[10] = pages;
+			$[11] = t3;
+			$[12] = t4;
+			$[13] = textStyle;
+			$[14] = t6;
+		} else t6 = $[14];
+		const t7 = children({
 			ref: elementRef,
-			"data-camox-field-id": fieldId,
-			...overlayState,
-			"data-camox-overlay-mode": reference ? "reference" : options.synced ? "synced" : void 0,
-			onMouseEnter: handleMouseEnter,
-			onMouseLeave: handleMouseLeave,
-			onClickCapture: selectField,
-			children: t10
+			...field.overlayProps,
+			children: t6
 		}, fieldData);
-		let t12;
-		if ($[35] !== t11) {
-			t12 = /* @__PURE__ */ jsx(Fragment, { children: t11 });
-			$[35] = t11;
-			$[36] = t12;
-		} else t12 = $[36];
-		return t12;
+		let t8;
+		if ($[15] !== t7) {
+			t8 = /* @__PURE__ */ jsx(Fragment, { children: t7 });
+			$[15] = t7;
+			$[16] = t8;
+		} else t8 = $[16];
+		return t8;
 	};
 	const Icon = (t0) => {
-		const $ = c(33);
+		const $ = c(18);
 		let name;
 		let props;
 		if ($[0] !== t0) {
@@ -296,178 +186,75 @@ function createEditableBlock(options) {
 			name = $[1];
 			props = $[2];
 		}
-		const block = React.use(Context);
-		const item = React.use(RepeatableItemContext);
-		const selectTarget = usePreviewSelection();
-		if (!block) throw new Error("Icon must be used within a Block Component");
-		const editable = useIsEditable();
-		const fieldName = String(name);
-		const value = item ? item.itemContent[name] : block.content[name];
-		const t1 = item?.itemId;
+		useScope("Icon");
+		const field = useFieldSlot(String(name), "Icon");
+		const { overlayProps } = field;
+		const t1 = field.value;
 		let t2;
-		if ($[3] !== block.blockId || $[4] !== fieldName || $[5] !== t1) {
-			t2 = getOverlayFieldId(block.blockId, fieldName, { itemId: t1 });
-			$[3] = block.blockId;
-			$[4] = fieldName;
-			$[5] = t1;
-			$[6] = t2;
-		} else t2 = $[6];
-		const fieldId = t2;
-		const { window: iframeWindow } = useFrame();
-		const [isHovered, setIsHovered] = React.useState(false);
-		const isFocused = useFieldSelection(block.blockId, fieldName, "Icon", item?.itemId);
+		if ($[3] !== field.editable || $[4] !== overlayProps) {
+			t2 = field.editable ? {
+				...overlayProps,
+				"data-camox-field-type": "icon"
+			} : {};
+			$[3] = field.editable;
+			$[4] = overlayProps;
+			$[5] = t2;
+		} else t2 = $[5];
 		let t3;
-		if ($[7] !== fieldId) {
-			t3 = { fieldId };
-			$[7] = fieldId;
-			$[8] = t3;
-		} else t3 = $[8];
-		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, editable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", t3);
-		const overlayState = useOverlayState(isHovered || isHoveredFromSidebar, isFocused);
-		const t4 = editable ? fieldId : void 0;
-		const t5 = editable ? "icon" : void 0;
-		let t6;
-		if ($[9] !== editable || $[10] !== overlayState) {
-			t6 = editable ? overlayState : {};
-			$[9] = editable;
-			$[10] = overlayState;
-			$[11] = t6;
-		} else t6 = $[11];
-		const t7 = editable && options.synced ? "synced" : void 0;
-		let t8;
-		let t9;
-		if ($[12] !== editable || $[13] !== props) {
-			t8 = (event) => {
-				if (editable) setIsHovered(true);
+		let t4;
+		if ($[6] !== field.editable || $[7] !== overlayProps || $[8] !== props) {
+			t3 = (event) => {
+				if (field.editable) overlayProps.onMouseEnter();
 				props.onMouseEnter?.(event);
 			};
-			t9 = (event_0) => {
-				if (editable) setIsHovered(false);
+			t4 = (event_0) => {
+				if (field.editable) overlayProps.onMouseLeave();
 				props.onMouseLeave?.(event_0);
 			};
-			$[12] = editable;
-			$[13] = props;
-			$[14] = t8;
-			$[15] = t9;
+			$[6] = field.editable;
+			$[7] = overlayProps;
+			$[8] = props;
+			$[9] = t3;
+			$[10] = t4;
 		} else {
-			t8 = $[14];
-			t9 = $[15];
+			t3 = $[9];
+			t4 = $[10];
 		}
-		let t10;
-		if ($[16] !== block.blockId || $[17] !== editable || $[18] !== fieldName || $[19] !== item || $[20] !== props.onClickCapture || $[21] !== selectTarget) {
-			t10 = editable ? () => selectTarget(item?.itemId != null ? {
-				type: "item-field",
-				blockId: block.blockId,
-				itemId: item.itemId,
-				fieldName,
-				fieldType: "Icon"
-			} : {
-				type: "block-field",
-				blockId: block.blockId,
-				fieldName,
-				fieldType: "Icon"
-			}) : props.onClickCapture;
-			$[16] = block.blockId;
-			$[17] = editable;
-			$[18] = fieldName;
-			$[19] = item;
-			$[20] = props.onClickCapture;
-			$[21] = selectTarget;
-			$[22] = t10;
-		} else t10 = $[22];
-		let t11;
-		if ($[23] !== props || $[24] !== t10 || $[25] !== t4 || $[26] !== t5 || $[27] !== t6 || $[28] !== t7 || $[29] !== t8 || $[30] !== t9 || $[31] !== value) {
-			t11 = /* @__PURE__ */ jsx(IconSvg, {
+		const t5 = field.editable ? overlayProps.onClickCapture : props.onClickCapture;
+		let t6;
+		if ($[11] !== props || $[12] !== t1 || $[13] !== t2 || $[14] !== t3 || $[15] !== t4 || $[16] !== t5) {
+			t6 = /* @__PURE__ */ jsx(IconSvg, {
 				...props,
-				iconId: value,
-				"data-camox-field-id": t4,
-				"data-camox-field-type": t5,
-				...t6,
-				"data-camox-overlay-mode": t7,
-				onMouseEnter: t8,
-				onMouseLeave: t9,
-				onClickCapture: t10
+				iconId: t1,
+				...t2,
+				onMouseEnter: t3,
+				onMouseLeave: t4,
+				onClickCapture: t5
 			});
-			$[23] = props;
-			$[24] = t10;
-			$[25] = t4;
-			$[26] = t5;
-			$[27] = t6;
-			$[28] = t7;
-			$[29] = t8;
-			$[30] = t9;
-			$[31] = value;
-			$[32] = t11;
-		} else t11 = $[32];
-		return t11;
+			$[11] = props;
+			$[12] = t1;
+			$[13] = t2;
+			$[14] = t3;
+			$[15] = t4;
+			$[16] = t5;
+			$[17] = t6;
+		} else t6 = $[17];
+		return t6;
 	};
 	const Embed = (t0) => {
-		const $ = c(40);
+		const $ = c(14);
 		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 } = blockContext;
-		const isContentEditable = useIsEditable();
+		useScope("Embed");
+		const field = useFieldSlot(String(name), "Embed");
+		const { editable, select } = field;
 		const { window: iframeWindow } = useFrame();
-		const repeaterContext = React.use(RepeatableItemContext);
-		const fieldValue = repeaterContext ? repeaterContext.itemContent[name] : content[name];
-		const reference = React.use(ReferenceContext);
-		const t1 = String(name);
-		const t2 = repeaterContext?.itemId;
-		let t3;
-		if ($[0] !== blockId || $[1] !== reference || $[2] !== t1 || $[3] !== t2) {
-			t3 = getOverlayFieldId(blockId, t1, {
-				itemId: t2,
-				reference
-			});
-			$[0] = blockId;
-			$[1] = reference;
-			$[2] = t1;
-			$[3] = t2;
-			$[4] = t3;
-		} else t3 = $[4];
-		const fieldId = t3;
-		const [isHovered, setIsHovered] = React.useState(false);
-		const isRecordFieldSelected = useRecordSelection(reference?.placement ?? null, String(name));
-		const overlayState = useOverlayState(isHovered, reference != null && isRecordFieldSelected);
+		const fieldValue = field.value;
 		const embedRef = React.useRef(null);
-		const itemId = repeaterContext?.itemId;
-		let t4;
-		if ($[5] !== blockId || $[6] !== isContentEditable || $[7] !== itemId || $[8] !== name || $[9] !== reference || $[10] !== selectTarget) {
-			t4 = () => {
-				if (!isContentEditable) return;
-				if (reference) {
-					reference.selectRecordField(String(name), "Embed");
-					return;
-				}
-				selectTarget(itemId != null ? {
-					type: "item-field",
-					blockId,
-					itemId,
-					fieldName: String(name),
-					fieldType: "Embed"
-				} : {
-					type: "block-field",
-					blockId,
-					fieldName: String(name),
-					fieldType: "Embed"
-				});
-			};
-			$[5] = blockId;
-			$[6] = isContentEditable;
-			$[7] = itemId;
-			$[8] = name;
-			$[9] = reference;
-			$[10] = selectTarget;
-			$[11] = t4;
-		} else t4 = $[11];
-		const selectField = t4;
-		let t5;
-		let t6;
-		if ($[12] !== iframeWindow || $[13] !== isContentEditable || $[14] !== selectField) {
-			t5 = () => {
-				if (!isContentEditable || !iframeWindow) return;
+		let t1;
+		let t2;
+		if ($[0] !== editable || $[1] !== iframeWindow || $[2] !== select) {
+			t1 = () => {
+				if (!editable || !iframeWindow) return;
 				let timer;
 				const handleBlur = () => {
 					iframeWindow.clearTimeout(timer);
@@ -475,7 +262,7 @@ function createEditableBlock(options) {
 						const activeElement = iframeWindow.document.activeElement;
 						if (activeElement?.tagName !== "IFRAME") return;
 						if (!embedRef.current?.contains(activeElement)) return;
-						selectField();
+						select();
 					}, 0);
 				};
 				iframeWindow.addEventListener("blur", handleBlur);
@@ -484,219 +271,125 @@ function createEditableBlock(options) {
 					iframeWindow.removeEventListener("blur", handleBlur);
 				};
 			};
-			t6 = [
-				isContentEditable,
+			t2 = [
+				editable,
 				iframeWindow,
-				selectField
+				select
 			];
-			$[12] = iframeWindow;
-			$[13] = isContentEditable;
-			$[14] = selectField;
-			$[15] = t5;
-			$[16] = t6;
+			$[0] = editable;
+			$[1] = iframeWindow;
+			$[2] = select;
+			$[3] = t1;
+			$[4] = t2;
 		} else {
-			t5 = $[15];
-			t6 = $[16];
+			t1 = $[3];
+			t2 = $[4];
 		}
-		React.useEffect(t5, t6);
-		let t7;
-		if ($[17] !== fieldId) {
-			t7 = { fieldId };
-			$[17] = fieldId;
-			$[18] = t7;
-		} else t7 = $[18];
-		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", t7);
-		const [prevSidebarHover, setPrevSidebarHover] = React.useState(isHoveredFromSidebar);
-		if (prevSidebarHover !== isHoveredFromSidebar) {
-			setPrevSidebarHover(isHoveredFromSidebar);
-			setIsHovered(isHoveredFromSidebar);
-		}
-		const t8 = isContentEditable ? fieldId : void 0;
-		const t9 = isContentEditable ? "embed" : void 0;
-		let t10;
-		if ($[19] !== isContentEditable || $[20] !== overlayState) {
-			t10 = isContentEditable ? overlayState : {};
-			$[19] = isContentEditable;
-			$[20] = overlayState;
-			$[21] = t10;
-		} else t10 = $[21];
-		let t11;
-		if ($[22] !== reference) {
-			t11 = assetOverlayMode(reference);
-			$[22] = reference;
-			$[23] = t11;
-		} else t11 = $[23];
-		let t12;
-		if ($[24] !== isContentEditable) {
-			t12 = isContentEditable ? () => setIsHovered(true) : void 0;
-			$[24] = isContentEditable;
-			$[25] = t12;
-		} else t12 = $[25];
-		let t13;
-		if ($[26] !== isContentEditable) {
-			t13 = isContentEditable ? () => setIsHovered(false) : void 0;
-			$[26] = isContentEditable;
-			$[27] = t13;
-		} else t13 = $[27];
-		let t14;
-		if ($[28] !== children || $[29] !== fieldValue) {
-			t14 = children({ src: fieldValue }, { url: fieldValue });
-			$[28] = children;
-			$[29] = fieldValue;
-			$[30] = t14;
-		} else t14 = $[30];
-		let t15;
-		if ($[31] !== selectField || $[32] !== t10 || $[33] !== t11 || $[34] !== t12 || $[35] !== t13 || $[36] !== t14 || $[37] !== t8 || $[38] !== t9) {
-			t15 = /* @__PURE__ */ jsx("div", {
+		React.useEffect(t1, t2);
+		let t3;
+		if ($[5] !== editable || $[6] !== field.overlayProps) {
+			t3 = editable ? {
+				...field.overlayProps,
+				"data-camox-field-type": "embed"
+			} : {};
+			$[5] = editable;
+			$[6] = field.overlayProps;
+			$[7] = t3;
+		} else t3 = $[7];
+		let t4;
+		if ($[8] !== children || $[9] !== fieldValue) {
+			t4 = children({ src: fieldValue }, { url: fieldValue });
+			$[8] = children;
+			$[9] = fieldValue;
+			$[10] = t4;
+		} else t4 = $[10];
+		let t5;
+		if ($[11] !== t3 || $[12] !== t4) {
+			t5 = /* @__PURE__ */ jsx("div", {
 				ref: embedRef,
-				onClickCapture: selectField,
-				"data-camox-field-id": t8,
-				"data-camox-field-type": t9,
-				...t10,
-				"data-camox-overlay-mode": t11,
-				onMouseEnter: t12,
-				onMouseLeave: t13,
-				children: t14
+				...t3,
+				children: t4
 			});
-			$[31] = selectField;
-			$[32] = t10;
-			$[33] = t11;
-			$[34] = t12;
-			$[35] = t13;
-			$[36] = t14;
-			$[37] = t8;
-			$[38] = t9;
-			$[39] = t15;
-		} else t15 = $[39];
-		return t15;
+			$[11] = t3;
+			$[12] = t4;
+			$[13] = t5;
+		} else t5 = $[13];
+		return t5;
 	};
 	const Artifact = (t0) => {
-		const $ = c(53);
+		const $ = c(31);
 		const { name, children } = t0;
-		const selectTarget = usePreviewSelection();
-		const blockContext = React.use(Context);
-		if (!blockContext) throw new Error("Artifact must be used within a Block Component");
-		const { blockId, content } = blockContext;
-		const isContentEditable = useIsEditable();
-		const { window: iframeWindow } = useFrame();
-		const repeaterContext = React.use(RepeatableItemContext);
-		const value = repeaterContext ? repeaterContext.itemContent[name] : content[name];
-		const itemId = repeaterContext?.itemId;
-		const fieldName = String(name);
-		let t1;
-		if ($[0] !== blockId || $[1] !== fieldName || $[2] !== itemId) {
-			t1 = getOverlayFieldId(blockId, fieldName, { itemId });
-			$[0] = blockId;
-			$[1] = fieldName;
-			$[2] = itemId;
-			$[3] = t1;
-		} else t1 = $[3];
-		const fieldId = t1;
-		const [isHovered, setIsHovered] = React.useState(false);
-		let t2;
-		if ($[4] !== fieldId) {
-			t2 = { fieldId };
-			$[4] = fieldId;
-			$[5] = t2;
-		} else t2 = $[5];
-		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", t2);
-		const isFocused = useFieldSelection(blockId, fieldName, "Artifact", itemId);
-		const overlayState = useOverlayState(isHovered || isHoveredFromSidebar, isFocused);
-		let t3;
-		if ($[6] !== blockId || $[7] !== fieldName || $[8] !== itemId || $[9] !== selectTarget) {
-			t3 = () => {
-				selectTarget(itemId != null ? {
-					type: "item-field",
-					blockId,
-					itemId,
-					fieldName,
-					fieldType: "Artifact"
-				} : {
-					type: "block-field",
-					blockId,
-					fieldName,
-					fieldType: "Artifact"
-				});
-			};
-			$[6] = blockId;
-			$[7] = fieldName;
-			$[8] = itemId;
-			$[9] = selectTarget;
-			$[10] = t3;
-		} else t3 = $[10];
-		const selectField = t3;
+		const scope = useScope("Artifact");
+		const field = useFieldSlot(String(name), "Artifact");
+		const { editable } = field;
+		const value = field.value;
 		const { filesMap } = useNormalizedData();
 		const pages = useEditorLinkPages();
-		let t4;
-		if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-			t4 = { select: _temp2 };
-			$[11] = t4;
-		} else t4 = $[11];
-		const currentPathname = useLocation(t4);
-		let t5;
-		if ($[12] !== blockContext.settings || $[13] !== content || $[14] !== currentPathname || $[15] !== fieldName || $[16] !== filesMap || $[17] !== pages || $[18] !== repeaterContext) {
-			let t6;
-			if ($[20] !== currentPathname || $[21] !== pages) {
-				t6 = (link) => resolveLinkHref(normalizeLinkValue(link), pages, currentPathname);
-				$[20] = currentPathname;
-				$[21] = pages;
-				$[22] = t6;
-			} else t6 = $[22];
-			let t7;
-			if ($[23] !== filesMap) {
-				t7 = (asset) => resolveAssetValue(asset, filesMap);
-				$[23] = filesMap;
-				$[24] = t7;
-			} else t7 = $[24];
-			t5 = artifactData(repeaterContext ? repeaterContext.itemSchema?.[fieldName] : typeboxSchema.properties[fieldName], repeaterContext ? {
-				content: repeaterContext.itemContent,
-				settings: repeaterContext.itemSettings
-			} : {
-				content,
-				settings: blockContext.settings
+		let t1;
+		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = { select: _temp2 };
+			$[0] = t1;
+		} else t1 = $[0];
+		const currentPathname = useLocation(t1);
+		let t2;
+		if ($[1] !== currentPathname || $[2] !== field.schema || $[3] !== filesMap || $[4] !== pages || $[5] !== scope.content || $[6] !== scope.settings) {
+			let t3;
+			if ($[8] !== currentPathname || $[9] !== pages) {
+				t3 = (link) => resolveLinkHref(normalizeLinkValue(link), pages, currentPathname);
+				$[8] = currentPathname;
+				$[9] = pages;
+				$[10] = t3;
+			} else t3 = $[10];
+			let t4;
+			if ($[11] !== filesMap) {
+				t4 = (asset) => resolveAssetValue(asset, filesMap);
+				$[11] = filesMap;
+				$[12] = t4;
+			} else t4 = $[12];
+			t2 = artifactData(field.schema, {
+				content: scope.content,
+				settings: scope.settings
 			}, {
-				linkHref: t6,
-				asset: t7
+				linkHref: t3,
+				asset: t4
 			});
-			$[12] = blockContext.settings;
-			$[13] = content;
-			$[14] = currentPathname;
-			$[15] = fieldName;
-			$[16] = filesMap;
-			$[17] = pages;
-			$[18] = repeaterContext;
-			$[19] = t5;
-		} else t5 = $[19];
-		const data = t5;
+			$[1] = currentPathname;
+			$[2] = field.schema;
+			$[3] = filesMap;
+			$[4] = pages;
+			$[5] = scope.content;
+			$[6] = scope.settings;
+			$[7] = t2;
+		} else t2 = $[7];
+		const data = t2;
 		const canvas = React.use(CanvasWorkspaceContext) !== null;
-		const fieldSchema = repeaterContext ? repeaterContext.itemSchema?.[fieldName] : (blockContext.sourceSchema ?? typeboxSchema.properties)[fieldName];
-		let t6;
-		if ($[25] !== canvas || $[26] !== isContentEditable) {
-			t6 = {
-				editing: isContentEditable,
+		let t3;
+		if ($[13] !== canvas || $[14] !== editable) {
+			t3 = {
+				editing: editable,
 				canvas
 			};
-			$[25] = canvas;
-			$[26] = isContentEditable;
-			$[27] = t6;
-		} else t6 = $[27];
-		const t7 = fieldSchema?.size;
-		const t8 = useNavigate();
-		let t9;
-		if ($[28] !== data || $[29] !== t6 || $[30] !== t7 || $[31] !== t8) {
-			t9 = {
-				studio: t6,
+			$[13] = canvas;
+			$[14] = editable;
+			$[15] = t3;
+		} else t3 = $[15];
+		const t4 = field.schema?.size;
+		const t5 = useNavigate();
+		let t6;
+		if ($[16] !== data || $[17] !== t3 || $[18] !== t4 || $[19] !== t5) {
+			t6 = {
+				studio: t3,
 				data,
-				size: t7,
-				navigate: t8
+				size: t4,
+				navigate: t5
 			};
-			$[28] = data;
-			$[29] = t6;
-			$[30] = t7;
-			$[31] = t8;
-			$[32] = t9;
-		} else t9 = $[32];
-		const hostProps = useArtifactHost(t9);
+			$[16] = data;
+			$[17] = t3;
+			$[18] = t4;
+			$[19] = t5;
+			$[20] = t6;
+		} else t6 = $[20];
+		const hostProps = useArtifactHost(t6);
 		const initialData = useInitialArtifactData(value, data);
 		const fontLinks = useOptionalCamoxApp()?.getArtifactFontLinks();
 		const runs = React.use(ArtifactsRunContext);
@@ -707,44 +400,27 @@ function createEditableBlock(options) {
 			}) : artifactStandInProps(value),
 			...hostProps
 		});
-		let t10;
-		if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
-			t10 = {
+		let t7;
+		if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+			t7 = {
 				position: "relative",
 				height: "100%"
 			};
-			$[33] = t10;
-		} else t10 = $[33];
-		const t11 = isContentEditable ? selectField : void 0;
-		const t12 = isContentEditable ? fieldId : void 0;
-		const t13 = isContentEditable ? "artifact" : void 0;
-		let t14;
-		if ($[34] !== isContentEditable || $[35] !== overlayState) {
-			t14 = isContentEditable ? overlayState : {};
-			$[34] = isContentEditable;
-			$[35] = overlayState;
-			$[36] = t14;
-		} else t14 = $[36];
-		let t15;
-		if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
-			t15 = assetOverlayMode(null);
-			$[37] = t15;
-		} else t15 = $[37];
-		let t16;
-		if ($[38] !== isContentEditable) {
-			t16 = isContentEditable ? () => setIsHovered(true) : void 0;
-			$[38] = isContentEditable;
-			$[39] = t16;
-		} else t16 = $[39];
-		let t17;
-		if ($[40] !== isContentEditable) {
-			t17 = isContentEditable ? () => setIsHovered(false) : void 0;
-			$[40] = isContentEditable;
-			$[41] = t17;
-		} else t17 = $[41];
-		let t18;
-		if ($[42] !== isContentEditable) {
-			t18 = isContentEditable && /* @__PURE__ */ jsx("div", {
+			$[21] = t7;
+		} else t7 = $[21];
+		let t8;
+		if ($[22] !== editable || $[23] !== field.overlayProps) {
+			t8 = editable ? {
+				...field.overlayProps,
+				"data-camox-field-type": "artifact"
+			} : {};
+			$[22] = editable;
+			$[23] = field.overlayProps;
+			$[24] = t8;
+		} else t8 = $[24];
+		let t9;
+		if ($[25] !== editable) {
+			t9 = editable && /* @__PURE__ */ jsx("div", {
 				"aria-hidden": true,
 				"data-camox-artifact-layer": "",
 				style: {
@@ -753,63 +429,46 @@ function createEditableBlock(options) {
 					cursor: "default"
 				}
 			});
-			$[42] = isContentEditable;
-			$[43] = t18;
-		} else t18 = $[43];
-		let t19;
-		if ($[44] !== frame || $[45] !== t11 || $[46] !== t12 || $[47] !== t13 || $[48] !== t14 || $[49] !== t16 || $[50] !== t17 || $[51] !== t18) {
-			t19 = /* @__PURE__ */ jsxs("div", {
-				style: t10,
-				onClickCapture: t11,
-				"data-camox-field-id": t12,
-				"data-camox-field-type": t13,
-				...t14,
-				"data-camox-overlay-mode": t15,
-				onMouseEnter: t16,
-				onMouseLeave: t17,
-				children: [frame, t18]
+			$[25] = editable;
+			$[26] = t9;
+		} else t9 = $[26];
+		let t10;
+		if ($[27] !== frame || $[28] !== t8 || $[29] !== t9) {
+			t10 = /* @__PURE__ */ jsxs("div", {
+				style: t7,
+				...t8,
+				children: [frame, t9]
 			});
-			$[44] = frame;
-			$[45] = t11;
-			$[46] = t12;
-			$[47] = t13;
-			$[48] = t14;
-			$[49] = t16;
-			$[50] = t17;
-			$[51] = t18;
-			$[52] = t19;
-		} else t19 = $[52];
-		return t19;
+			$[27] = frame;
+			$[28] = t8;
+			$[29] = t9;
+			$[30] = t10;
+		} else t10 = $[30];
+		return t10;
 	};
 	const Link = (t0) => {
-		const $ = c(18);
+		const $ = c(8);
 		const { name, children } = t0;
-		const selectTarget = usePreviewSelection();
-		const blockContext = React.use(Context);
-		if (!blockContext) throw new Error("Link must be used within a Block Component");
-		const { blockId, content } = blockContext;
-		const isContentEditable = useIsEditable();
+		useScope("Link");
+		const [isEditing, setIsEditing] = React.useState(false);
+		let t1;
+		if ($[0] !== isEditing) {
+			t1 = { editing: isEditing };
+			$[0] = isEditing;
+			$[1] = t1;
+		} else t1 = $[1];
+		const field = useFieldSlot(String(name), "Link", t1);
 		const elementRef = React.useRef(null);
-		const { window: iframeWindow } = useFrame();
-		const repeaterContext = React.use(RepeatableItemContext);
-		const rawFieldValue = repeaterContext ? repeaterContext.itemContent[name] : content[name];
-		const fieldValue = normalizeLinkValue(rawFieldValue);
-		const applyEdit = useApplyContentEdit();
+		const fieldValue = normalizeLinkValue(field.value);
 		const pages = useEditorLinkPages();
-		let t1;
-		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-			t1 = { select: _temp3 };
-			$[0] = t1;
-		} else t1 = $[0];
-		const currentPathname = useLocation(t1);
+		let t2;
+		if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+			t2 = { select: _temp3 };
+			$[2] = t2;
+		} else t2 = $[2];
+		const currentPathname = useLocation(t2);
 		const resolvedHref = resolveLinkHref(fieldValue, pages, currentPathname);
-		const fieldId = getOverlayFieldId(blockId, String(name), { itemId: repeaterContext?.itemId });
-		const [isEditing, setIsEditing] = React.useState(false);
 		const [displayText, setDisplayText] = React.useState(fieldValue.text);
-		const [isHovered, setIsHovered] = React.useState(false);
-		const [isEditorFocused, setIsEditorFocused] = React.useState(false);
-		const isSelectedFromSelection = useFieldSelection(blockId, String(name), "Link", repeaterContext?.itemId);
-		const overlayState = useOverlayState(isHovered, isEditorFocused || isSelectedFromSelection);
 		const [syncedText, setSyncedText] = React.useState({
 			text: fieldValue.text,
 			isEditing
@@ -821,355 +480,188 @@ function createEditableBlock(options) {
 			});
 			if (!isEditing) setDisplayText(fieldValue.text);
 		}
-		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", { fieldId });
-		const [prevSidebarHover, setPrevSidebarHover] = React.useState(isHoveredFromSidebar);
-		if (prevSidebarHover !== isHoveredFromSidebar) {
-			setPrevSidebarHover(isHoveredFromSidebar);
-			setIsHovered(isHoveredFromSidebar);
-		}
-		let t2;
-		if ($[1] !== applyEdit || $[2] !== blockId || $[3] !== name || $[4] !== repeaterContext?.itemId) {
-			t2 = (newLinkValue) => {
-				const content_0 = { [name]: newLinkValue };
-				const itemId = repeaterContext?.itemId;
-				applyEdit(itemId != null ? {
-					type: "itemContent",
-					itemId,
-					content: content_0
-				} : {
-					type: "blockContent",
-					blockId,
-					content: content_0
-				}).catch(ignore);
-			};
-			$[1] = applyEdit;
-			$[2] = blockId;
-			$[3] = name;
-			$[4] = repeaterContext?.itemId;
-			$[5] = t2;
-		} else t2 = $[5];
-		const saveLinkValue = t2;
 		const handleInput = (e) => {
 			const newText = e.target.textContent || "";
-			saveLinkValue({
+			field.write({
 				...fieldValue,
 				text: newText
 			});
 		};
-		let t3;
-		if ($[6] !== blockId || $[7] !== name || $[8] !== repeaterContext || $[9] !== selectTarget) {
-			t3 = () => {
-				selectTarget(repeaterContext?.itemId != null ? {
-					type: "item-field",
-					blockId,
-					itemId: repeaterContext.itemId,
-					fieldName: String(name),
-					fieldType: "Link"
-				} : {
-					type: "block-field",
-					blockId,
-					fieldName: String(name),
-					fieldType: "Link"
-				});
-			};
-			$[6] = blockId;
-			$[7] = name;
-			$[8] = repeaterContext;
-			$[9] = selectTarget;
-			$[10] = t3;
-		} else t3 = $[10];
-		const selectField = t3;
-		let t4;
-		if ($[11] !== selectField) {
-			t4 = () => {
-				setIsEditing(true);
-				setIsEditorFocused(true);
-				selectField();
-			};
-			$[11] = selectField;
-			$[12] = t4;
-		} else t4 = $[12];
-		const handleFocus = t4;
-		let t5;
-		if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
-			t5 = () => {
-				setIsEditing(false);
-				setIsEditorFocused(false);
-			};
-			$[13] = t5;
-		} else t5 = $[13];
-		const handleBlur = t5;
 		const linkData = {
 			text: displayText,
 			href: resolvedHref,
 			newTab: fieldValue.newTab
 		};
-		if (!isContentEditable) return /* @__PURE__ */ jsx(Fragment, { children: children({
+		if (!field.editable) 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 t6;
-		let t7;
-		if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-			t6 = () => setIsHovered(true);
-			t7 = () => setIsHovered(false);
-			$[14] = t6;
-			$[15] = t7;
-		} else {
-			t6 = $[14];
-			t7 = $[15];
-		}
-		const t8 = children({
+		let t3;
+		if ($[3] !== field) {
+			t3 = () => {
+				setIsEditing(true);
+				field.select();
+			};
+			$[3] = field;
+			$[4] = t3;
+		} else t3 = $[4];
+		let t4;
+		if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+			t4 = () => setIsEditing(false);
+			$[5] = t4;
+		} else t4 = $[5];
+		const t5 = children({
 			ref: elementRef,
 			to: resolvedHref,
 			target: fieldValue.newTab ? "_blank" : void 0,
 			rel: fieldValue.newTab ? "noreferrer" : void 0,
 			children: displayText,
-			"data-camox-field-id": fieldId,
-			...overlayState,
-			"data-camox-overlay-mode": options.synced ? "synced" : void 0,
+			...field.overlayProps,
 			contentEditable: true,
-			onClickCapture: selectField,
 			onClick: _temp4,
 			onInput: handleInput,
-			onFocus: handleFocus,
-			onBlur: handleBlur,
-			onMouseEnter: t6,
-			onMouseLeave: t7,
+			onFocus: t3,
+			onBlur: t4,
 			onKeyDown: _temp5,
 			spellCheck: false,
 			suppressContentEditableWarning: true
 		}, linkData);
-		let t9;
-		if ($[16] !== t8) {
-			t9 = /* @__PURE__ */ jsx(Fragment, { children: t8 });
-			$[16] = t8;
-			$[17] = t9;
-		} else t9 = $[17];
-		return t9;
-	};
-	const assetOverlayMode = (reference) => {
-		if (reference) return "reference";
-		return options.synced ? "synced" : void 0;
+		let t6;
+		if ($[6] !== t5) {
+			t6 = /* @__PURE__ */ jsx(Fragment, { children: t5 });
+			$[6] = t5;
+			$[7] = t6;
+		} else t6 = $[7];
+		return t6;
 	};
 	const Image = (t0) => {
-		const $ = c(30);
+		const $ = c(10);
 		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 } = blockContext;
-		const isContentEditable = useIsEditable();
-		const { window: iframeWindow } = useFrame();
-		const repeaterContext = React.use(RepeatableItemContext);
+		useScope("Image");
+		const field = useFieldSlot(String(name), "Image");
 		const { filesMap } = useNormalizedData();
-		const rawSource = repeaterContext ? repeaterContext.itemContent[name] : content[name];
-		const rawValue = resolveAssetValue(rawSource, filesMap);
-		const fieldSchema = repeaterContext ? repeaterContext.itemSchema?.[name] : (blockContext.sourceSchema ?? typeboxSchema.properties)[name];
-		const fieldValue = rawValue?.url ? rawValue : placeholderImage(fieldSchema?.title);
-		const isInlineArrayItem = repeaterContext != null && repeaterContext.itemId == null;
-		const overlayFieldName = isInlineArrayItem ? repeaterContext.arrayFieldName : String(name);
-		const overlayItemId = isInlineArrayItem ? repeaterContext.containerItemId : repeaterContext?.itemId;
-		const reference = React.use(ReferenceContext);
 		let t1;
-		if ($[0] !== blockId || $[1] !== overlayFieldName || $[2] !== overlayItemId || $[3] !== reference) {
-			t1 = getOverlayFieldId(blockId, overlayFieldName, {
-				itemId: overlayItemId,
-				reference
-			});
-			$[0] = blockId;
-			$[1] = overlayFieldName;
-			$[2] = overlayItemId;
-			$[3] = reference;
+		if ($[0] !== children || $[1] !== field.schema?.title || $[2] !== field.value || $[3] !== filesMap) {
+			const rawValue = resolveAssetValue(field.value, filesMap);
+			const fieldValue = rawValue?.url ? rawValue : placeholderImage(field.schema?.title);
+			const imageProps = {
+				src: transformImageUrl(fieldValue.url, {
+					width: getDefaultImageWidth(),
+					mimeType: fieldValue.mimeType,
+					size: fieldValue.size
+				}),
+				srcSet: buildImageSrcSet(fieldValue.url, fieldValue.mimeType, fieldValue.size),
+				sizes: getDefaultImageSizes(),
+				alt: fieldValue.alt
+			};
+			t1 = renderImagePlaceholder(fieldValue, children(imageProps, fieldValue));
+			$[0] = children;
+			$[1] = field.schema?.title;
+			$[2] = field.value;
+			$[3] = filesMap;
 			$[4] = t1;
 		} else t1 = $[4];
-		const fieldId = t1;
-		const [isHovered, setIsHovered] = React.useState(false);
-		const isBlockFieldSelected = useFieldSelection(blockId, overlayFieldName, "Image", overlayItemId);
-		const isRecordFieldSelected = useRecordSelection(reference?.placement ?? null, overlayFieldName);
-		const overlayState = useOverlayState(isHovered, reference ? isRecordFieldSelected : isBlockFieldSelected);
-		let t2;
-		if ($[5] !== fieldId) {
-			t2 = { fieldId };
-			$[5] = fieldId;
-			$[6] = t2;
-		} else t2 = $[6];
-		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", t2);
-		const [prevSidebarHover, setPrevSidebarHover] = React.useState(isHoveredFromSidebar);
-		if (prevSidebarHover !== isHoveredFromSidebar) {
-			setPrevSidebarHover(isHoveredFromSidebar);
-			setIsHovered(isHoveredFromSidebar);
+		const renderedImage = t1;
+		if (!field.editable) {
+			let t2;
+			if ($[5] !== renderedImage) {
+				t2 = /* @__PURE__ */ jsx(Fragment, { children: renderedImage });
+				$[5] = renderedImage;
+				$[6] = t2;
+			} else t2 = $[6];
+			return t2;
 		}
-		let t3;
-		if ($[7] !== blockId || $[8] !== isContentEditable || $[9] !== isInlineArrayItem || $[10] !== overlayFieldName || $[11] !== overlayItemId || $[12] !== reference || $[13] !== selectTarget) {
-			t3 = () => {
-				if (!isContentEditable) return;
-				if (reference) {
-					reference.selectRecordField(overlayFieldName, isInlineArrayItem ? "ImageList" : "Image");
-					return;
-				}
-				selectTarget(overlayItemId != null ? {
-					type: "item-field",
-					blockId,
-					itemId: overlayItemId,
-					fieldName: overlayFieldName,
-					fieldType: "Image"
-				} : {
-					type: "block-field",
-					blockId,
-					fieldName: overlayFieldName,
-					fieldType: "Image"
-				});
-			};
-			$[7] = blockId;
-			$[8] = isContentEditable;
-			$[9] = isInlineArrayItem;
-			$[10] = overlayFieldName;
-			$[11] = overlayItemId;
-			$[12] = reference;
-			$[13] = selectTarget;
-			$[14] = t3;
-		} else t3 = $[14];
-		const handleClick = t3;
-		const imageProps = {
-			src: transformImageUrl(fieldValue.url, {
-				width: getDefaultImageWidth(),
-				mimeType: fieldValue.mimeType,
-				size: fieldValue.size
-			}),
-			srcSet: buildImageSrcSet(fieldValue.url, fieldValue.mimeType, fieldValue.size),
-			sizes: getDefaultImageSizes(),
-			alt: fieldValue.alt
-		};
-		const renderedImage = renderImagePlaceholder(fieldValue, children(imageProps, fieldValue));
-		if (!isContentEditable) {
-			let t4;
-			if ($[15] !== renderedImage) {
-				t4 = /* @__PURE__ */ jsx(Fragment, { children: renderedImage });
-				$[15] = renderedImage;
-				$[16] = t4;
-			} else t4 = $[16];
-			return t4;
-		}
-		let t4;
-		if ($[17] !== reference) {
-			t4 = assetOverlayMode(reference);
-			$[17] = reference;
-			$[18] = t4;
-		} else t4 = $[18];
-		let t5;
-		let t6;
-		if ($[19] !== setIsHovered) {
-			t5 = () => setIsHovered(true);
-			t6 = () => setIsHovered(false);
-			$[19] = setIsHovered;
-			$[20] = t5;
-			$[21] = t6;
-		} else {
-			t5 = $[20];
-			t6 = $[21];
-		}
-		let t7;
-		if ($[22] !== fieldId || $[23] !== handleClick || $[24] !== overlayState || $[25] !== renderedImage || $[26] !== t4 || $[27] !== t5 || $[28] !== t6) {
-			t7 = /* @__PURE__ */ jsx("div", {
-				"data-camox-field-id": fieldId,
+		let t2;
+		if ($[7] !== field.overlayProps || $[8] !== renderedImage) {
+			t2 = /* @__PURE__ */ jsx("div", {
+				...field.overlayProps,
 				"data-camox-field-type": "image",
-				...overlayState,
-				"data-camox-overlay-mode": t4,
-				onMouseEnter: t5,
-				onMouseLeave: t6,
-				onClickCapture: handleClick,
 				children: renderedImage
 			});
-			$[22] = fieldId;
-			$[23] = handleClick;
-			$[24] = overlayState;
-			$[25] = renderedImage;
-			$[26] = t4;
-			$[27] = t5;
-			$[28] = t6;
-			$[29] = t7;
-		} else t7 = $[29];
-		return t7;
+			$[7] = field.overlayProps;
+			$[8] = renderedImage;
+			$[9] = t2;
+		} else t2 = $[9];
+		return t2;
 	};
 	const File = (t0) => {
-		const $ = c(2);
+		const $ = c(11);
 		const { name, children } = t0;
-		const blockContext = React.use(Context);
-		if (!blockContext) throw new Error("File must be used within a Block Component");
-		const { blockId, content } = blockContext;
-		const isContentEditable = useIsEditable();
-		const { window: iframeWindow } = useFrame();
-		const repeaterContext = React.use(RepeatableItemContext);
-		const reference = React.use(ReferenceContext);
-		const { filesMap } = useNormalizedData();
-		const rawSource = repeaterContext ? repeaterContext.itemContent[name] : content[name];
-		const fieldValue = resolveAssetValue(rawSource, filesMap);
-		const isInlineArrayItem = repeaterContext != null && repeaterContext.itemId == null;
-		const overlayFieldName = isInlineArrayItem ? repeaterContext.arrayFieldName : String(name);
-		const fieldId = getOverlayFieldId(blockId, overlayFieldName, { reference });
-		const selectable = reference != null && isContentEditable;
-		const [isHovered, setIsHovered] = React.useState(false);
-		const isFocused = useRecordSelection(reference?.placement ?? null, overlayFieldName);
-		const overlayState = useOverlayState(isHovered, isFocused);
-		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, selectable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", { fieldId });
-		const [prevSidebarHover, setPrevSidebarHover] = React.useState(isHoveredFromSidebar);
-		if (prevSidebarHover !== isHoveredFromSidebar) {
-			setPrevSidebarHover(isHoveredFromSidebar);
-			setIsHovered(isHoveredFromSidebar);
-		}
-		if (!fieldValue?.url) return null;
-		const linkProps = {
-			href: fieldValue.url,
-			download: fieldValue.filename
-		};
-		const editableLinkProps = selectable ? {
-			"data-camox-field-id": fieldId,
-			"data-camox-field-type": "file",
-			...overlayState,
-			"data-camox-overlay-mode": assetOverlayMode(reference),
-			onMouseEnter: () => setIsHovered(true),
-			onMouseLeave: () => setIsHovered(false),
-			onClickCapture: () => reference.selectRecordField(overlayFieldName, isInlineArrayItem ? "FileList" : "File"),
-			onClick: _temp6
-		} : null;
-		const t1 = children({
-			...linkProps,
-			...editableLinkProps
-		}, fieldValue);
+		const t1 = useScope("File").owner.kind === "record";
 		let t2;
 		if ($[0] !== t1) {
-			t2 = /* @__PURE__ */ jsx(Fragment, { children: t1 });
+			t2 = { enabled: t1 };
 			$[0] = t1;
 			$[1] = t2;
 		} else t2 = $[1];
-		return t2;
+		const field = useFieldSlot(String(name), "File", t2);
+		const { filesMap } = useNormalizedData();
+		let t3;
+		let t4;
+		if ($[2] !== children || $[3] !== field.editable || $[4] !== field.overlayProps || $[5] !== field.value || $[6] !== filesMap) {
+			t4 = Symbol.for("react.early_return_sentinel");
+			bb0: {
+				const fieldValue = resolveAssetValue(field.value, filesMap);
+				if (!fieldValue?.url) {
+					t4 = null;
+					break bb0;
+				}
+				const linkProps = {
+					href: fieldValue.url,
+					download: fieldValue.filename
+				};
+				const editableLinkProps = field.editable ? {
+					...field.overlayProps,
+					"data-camox-field-type": "file",
+					onClick: _temp6
+				} : null;
+				t3 = children({
+					...linkProps,
+					...editableLinkProps
+				}, fieldValue);
+			}
+			$[2] = children;
+			$[3] = field.editable;
+			$[4] = field.overlayProps;
+			$[5] = field.value;
+			$[6] = filesMap;
+			$[7] = t3;
+			$[8] = t4;
+		} else {
+			t3 = $[7];
+			t4 = $[8];
+		}
+		if (t4 !== Symbol.for("react.early_return_sentinel")) return t4;
+		let t5;
+		if ($[9] !== t3) {
+			t5 = /* @__PURE__ */ jsx(Fragment, { children: t3 });
+			$[9] = t3;
+			$[10] = t5;
+		} else t5 = $[10];
+		return t5;
 	};
 	const ASSET_LIST_SELF_KEY = "__camox_asset_self__";
 	const _AssetList = ({ name, children }) => {
-		const blockContext = React.use(Context);
-		if (!blockContext) throw new Error("ImageList/FileList must be used within a Block Component");
-		const parentRepeaterContext = React.use(RepeatableItemContext);
+		const scope = useScope("ImageList/FileList");
 		const { filesMap } = useNormalizedData();
 		const fieldName = String(name);
-		const ft = (parentRepeaterContext ? typeboxSchema.properties[parentRepeaterContext.arrayFieldName]?.items?.properties?.[fieldName] : (blockContext.sourceSchema ?? typeboxSchema.properties)[fieldName])?.fieldType;
+		const ft = scope.schema?.[fieldName]?.fieldType;
 		if (ft !== "ImageList" && ft !== "FileList") throw new Error(`"${fieldName}" is not an imageList or fileList field`);
-		const source = parentRepeaterContext ? parentRepeaterContext.itemContent[fieldName] : blockContext.content[fieldName];
+		const source = scope.content[fieldName];
 		const resolved = (Array.isArray(source) ? source : []).map((v) => resolveAssetValue(v, filesMap)).filter((v) => v != null && typeof v === "object" && "url" in v);
 		const Single = ft === "ImageList" ? Image : File;
 		return /* @__PURE__ */ jsx(RepeaterHoverProvider, {
-			blockId: blockContext.blockId,
 			fieldName,
-			children: resolved.map((value, index) => /* @__PURE__ */ jsx(RepeatableItemContext.Provider, {
+			children: resolved.map((value, index) => /* @__PURE__ */ jsx(FieldScopeContext, {
 				value: {
-					arrayFieldName: fieldName,
-					itemIndex: index,
-					itemContent: { [ASSET_LIST_SELF_KEY]: value },
-					itemSettings: {},
-					itemId: void 0,
-					containerItemId: parentRepeaterContext?.itemId ?? parentRepeaterContext?.containerItemId
+					...scope,
+					content: { [ASSET_LIST_SELF_KEY]: value },
+					list: {
+						name: fieldName,
+						type: ft
+					}
 				},
 				children: /* @__PURE__ */ jsx(Single, {
 					name: ASSET_LIST_SELF_KEY,
@@ -1181,7 +673,7 @@ function createEditableBlock(options) {
 	const ImageList = _AssetList;
 	const FileList = _AssetList;
 	const RepeatableItemWrapper = (t0) => {
-		const $ = c(21);
+		const $ = c(18);
 		const { itemId, blockId, nesting, children } = t0;
 		const isContentEditable = useIsEditable();
 		const { window: iframeWindow } = useFrame();
@@ -1189,40 +681,32 @@ function createEditableBlock(options) {
 		const registrationRef = React.useRef(null);
 		const [isLocallyHovered, setIsLocallyHovered] = React.useState(false);
 		const hoveredRepeaterGroup = React.useContext(RepeaterHoverContext);
-		const selection = usePreviewTargetSelection();
-		const isSelected = selection?.type === "item" && selection.blockId === blockId && selection.itemId === itemId;
-		const t1 = String(blockId);
-		const t2 = String(itemId);
-		let t3;
-		if ($[0] !== t1 || $[1] !== t2) {
-			t3 = {
-				blockId: t1,
-				itemId: t2
-			};
-			$[0] = t1;
-			$[1] = t2;
-			$[2] = t3;
-		} else t3 = $[2];
-		const t4 = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_REPEATABLE_ITEM", "CAMOX_HOVER_REPEATABLE_ITEM_END", t3) || hoveredRepeaterGroup !== null || isLocallyHovered;
-		let t5;
-		if ($[3] !== hoveredRepeaterGroup || $[4] !== isSelected || $[5] !== t4) {
-			t5 = {
-				hovered: t4,
+		const target = itemId == null ? null : {
+			type: "item",
+			blockId,
+			itemId
+		};
+		const isSelected = sameTarget(useEditingSelection(), target);
+		const t1 = useSidebarHover(target, isContentEditable) || hoveredRepeaterGroup !== null || isLocallyHovered;
+		let t2;
+		if ($[0] !== hoveredRepeaterGroup || $[1] !== isSelected || $[2] !== t1) {
+			t2 = {
+				hovered: t1,
 				focused: isSelected,
 				hoverGroup: hoveredRepeaterGroup,
 				synced: !!options.synced
 			};
-			$[3] = hoveredRepeaterGroup;
-			$[4] = isSelected;
-			$[5] = t4;
-			$[6] = t5;
-		} else t5 = $[6];
-		const overlayState = t5;
+			$[0] = hoveredRepeaterGroup;
+			$[1] = isSelected;
+			$[2] = t1;
+			$[3] = t2;
+		} else t2 = $[3];
+		const overlayState = t2;
 		const document = iframeWindow?.document;
-		let t6;
-		let t7;
-		if ($[7] !== blockId || $[8] !== document || $[9] !== isContentEditable || $[10] !== itemId || $[11] !== nesting) {
-			t6 = () => {
+		let t3;
+		let t4;
+		if ($[4] !== blockId || $[5] !== document || $[6] !== isContentEditable || $[7] !== itemId || $[8] !== nesting) {
+			t3 = () => {
 				const fragment = fragmentRef.current;
 				if (!isContentEditable || itemId == null || !document || !fragment) return;
 				const registration = registerRepeatableItem(document, {
@@ -1241,38 +725,38 @@ function createEditableBlock(options) {
 					registration.unregister();
 				};
 			};
-			t7 = [
+			t4 = [
 				isContentEditable,
 				document,
 				blockId,
 				itemId,
 				nesting
 			];
-			$[7] = blockId;
-			$[8] = document;
-			$[9] = isContentEditable;
-			$[10] = itemId;
-			$[11] = nesting;
-			$[12] = t6;
-			$[13] = t7;
+			$[4] = blockId;
+			$[5] = document;
+			$[6] = isContentEditable;
+			$[7] = itemId;
+			$[8] = nesting;
+			$[9] = t3;
+			$[10] = t4;
 		} else {
-			t6 = $[12];
-			t7 = $[13];
+			t3 = $[9];
+			t4 = $[10];
 		}
-		React.useLayoutEffect(t6, t7);
-		let t8;
-		if ($[14] !== overlayState) {
-			t8 = () => {
+		React.useLayoutEffect(t3, t4);
+		let t5;
+		if ($[11] !== overlayState) {
+			t5 = () => {
 				registrationRef.current?.update(overlayState);
 			};
-			$[14] = overlayState;
-			$[15] = t8;
-		} else t8 = $[15];
-		React.useLayoutEffect(t8);
-		let t10;
-		let t9;
-		if ($[16] !== isContentEditable) {
-			t9 = () => {
+			$[11] = overlayState;
+			$[12] = t5;
+		} else t5 = $[12];
+		React.useLayoutEffect(t5);
+		let t6;
+		let t7;
+		if ($[13] !== isContentEditable) {
+			t6 = () => {
 				const fragment_0 = fragmentRef.current;
 				if (!isContentEditable || !fragment_0) return;
 				const enter = () => setIsLocallyHovered(true);
@@ -1284,65 +768,66 @@ function createEditableBlock(options) {
 					fragment_0.removeEventListener("mouseleave", leave);
 				};
 			};
-			t10 = [isContentEditable];
-			$[16] = isContentEditable;
-			$[17] = t10;
-			$[18] = t9;
+			t7 = [isContentEditable];
+			$[13] = isContentEditable;
+			$[14] = t6;
+			$[15] = t7;
 		} else {
-			t10 = $[17];
-			t9 = $[18];
+			t6 = $[14];
+			t7 = $[15];
 		}
-		React.useEffect(t9, t10);
-		let t11;
-		if ($[19] !== children) {
-			t11 = /* @__PURE__ */ jsx(React.Fragment, {
+		React.useEffect(t6, t7);
+		let t8;
+		if ($[16] !== children) {
+			t8 = /* @__PURE__ */ jsx(React.Fragment, {
 				ref: fragmentRef,
 				children
 			});
-			$[19] = children;
-			$[20] = t11;
-		} else t11 = $[20];
-		return t11;
+			$[16] = children;
+			$[17] = t8;
+		} else t8 = $[17];
+		return t8;
 	};
 	const RepeaterHoverProvider = (t0) => {
 		const $ = c(6);
-		const { blockId, fieldName, children } = t0;
+		const { fieldName, children } = t0;
+		const scope = useScope("Repeater");
 		const isContentEditable = useIsEditable();
-		const { window: iframeWindow } = useFrame();
 		const hoverGroup = React.useId();
-		const t1 = String(blockId);
-		let t2;
-		if ($[0] !== fieldName || $[1] !== t1) {
-			t2 = {
-				blockId: t1,
-				fieldName
-			};
+		let t1;
+		if ($[0] !== fieldName || $[1] !== scope.owner) {
+			t1 = slotSelection({
+				owner: scope.owner,
+				name: fieldName,
+				type: "Repeater"
+			});
 			$[0] = fieldName;
-			$[1] = t1;
-			$[2] = t2;
-		} else t2 = $[2];
-		const t3 = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_REPEATER", "CAMOX_HOVER_REPEATER_END", t2) ? hoverGroup : null;
-		let t4;
-		if ($[3] !== children || $[4] !== t3) {
-			t4 = /* @__PURE__ */ jsx(RepeaterHoverContext.Provider, {
-				value: t3,
+			$[1] = scope.owner;
+			$[2] = t1;
+		} else t1 = $[2];
+		const t2 = useSidebarHover(t1, isContentEditable) ? hoverGroup : null;
+		let t3;
+		if ($[3] !== children || $[4] !== t2) {
+			t3 = /* @__PURE__ */ jsx(RepeaterHoverContext.Provider, {
+				value: t2,
 				children
 			});
 			$[3] = children;
-			$[4] = t3;
-			$[5] = t4;
-		} else t4 = $[5];
-		return t4;
+			$[4] = t2;
+			$[5] = t3;
+		} else t3 = $[5];
+		return t3;
 	};
 	const RepeaterImpl = (t0) => {
-		const $ = c(19);
+		const $ = c(20);
 		const { name, children } = t0;
 		const blockContext = React.use(Context);
 		if (!blockContext) throw new Error("Repeater must be used within a Block Component");
-		const { blockId, content } = blockContext;
-		const parentRepeaterContext = React.use(RepeatableItemContext);
+		const scope = useScope("Repeater");
+		const { blockId } = blockContext;
+		const parentNesting = React.use(ItemNestingContext);
 		const fieldName = String(name);
-		const source = parentRepeaterContext ? parentRepeaterContext.itemContent[fieldName] : content[fieldName];
+		const source = scope.content[fieldName];
 		const { itemsMap } = useNormalizedData();
 		let t1;
 		if ($[0] !== source) {
@@ -1355,27 +840,25 @@ function createEditableBlock(options) {
 		let T0;
 		let t2;
 		let t3;
-		let t4;
-		if ($[2] !== blockId || $[3] !== children || $[4] !== fieldName || $[5] !== itemsMap || $[6] !== parentRepeaterContext || $[7] !== storedValue) {
-			let t5;
-			if ($[12] !== itemsMap) {
-				t5 = (item) => {
+		if ($[2] !== blockId || $[3] !== children || $[4] !== fieldName || $[5] !== itemsMap || $[6] !== parentNesting || $[7] !== scope.owner || $[8] !== scope.schema || $[9] !== scope.synced || $[10] !== storedValue) {
+			let t4;
+			if ($[14] !== itemsMap) {
+				t4 = (item) => {
 					if (isItemMarker(item)) return itemsMap.get(item._itemId) ?? null;
 					return item;
 				};
-				$[12] = itemsMap;
-				$[13] = t5;
-			} else t5 = $[13];
-			const arrayValue = storedValue.map(t5).filter(Boolean);
-			const fieldSchema = parentRepeaterContext ? parentRepeaterContext.itemSchema?.[fieldName] : typeboxSchema.properties[fieldName];
+				$[14] = itemsMap;
+				$[15] = t4;
+			} else t4 = $[15];
+			const arrayValue = storedValue.map(t4).filter(Boolean);
+			const fieldSchema = scope.schema?.[fieldName];
 			const itemSchema = fieldSchema?.items?.properties;
 			const emptyItem = emptyFieldValues(fieldSchema?.items);
 			const emptyItemSettings = emptyFieldValues(fieldSchema?.itemSettingsSchema);
-			const nesting = parentRepeaterContext ? (parentRepeaterContext.nesting ?? 0) + 1 : 0;
+			const nesting = parentNesting == null ? 0 : parentNesting + 1;
 			T0 = RepeaterHoverProvider;
-			t2 = blockId;
-			t3 = fieldName;
-			t4 = arrayValue.map((item_0, index) => {
+			t2 = fieldName;
+			t3 = arrayValue.map((item_0, index) => {
 				const isDbItem = item_0.content !== void 0 && item_0.id != null;
 				const itemContent = {
 					...emptyItem,
@@ -1387,37 +870,43 @@ function createEditableBlock(options) {
 				};
 				const itemId = isDbItem ? item_0.id : void 0;
 				const useItemSetting = (settingName) => itemSettings[settingName];
-				const itemApi = {
-					Field,
-					Link,
-					Icon,
-					Embed,
-					Artifact,
-					Image,
-					File,
-					ImageList: _AssetList,
-					FileList: _AssetList,
-					Repeater: RepeaterImpl,
-					Reference: ReferenceImpl,
-					ReferenceList: ReferenceListImpl,
-					useSetting: useItemSetting
+				const owner = itemId == null ? scope.owner : {
+					kind: "item",
+					blockId,
+					itemId
 				};
-				return /* @__PURE__ */ jsx(RepeatableItemContext.Provider, {
-					value: {
-						arrayFieldName: fieldName,
-						itemIndex: index,
-						itemContent,
-						itemSettings,
-						itemId,
-						containerItemId: itemId ?? parentRepeaterContext?.containerItemId,
-						itemSchema,
-						nesting
-					},
-					children: /* @__PURE__ */ jsx(RepeatableItemWrapper, {
-						itemId,
-						blockId,
-						nesting,
-						children: children(itemApi, index)
+				const itemScope = {
+					owner,
+					target: owner.kind === "item" ? owner : null,
+					content: itemContent,
+					settings: itemSettings,
+					schema: itemSchema,
+					synced: scope.synced
+				};
+				return /* @__PURE__ */ jsx(FieldScopeContext, {
+					value: itemScope,
+					children: /* @__PURE__ */ jsx(ItemNestingContext, {
+						value: nesting,
+						children: /* @__PURE__ */ jsx(RepeatableItemWrapper, {
+							itemId,
+							blockId,
+							nesting,
+							children: children({
+								Field,
+								Link,
+								Icon,
+								Embed,
+								Artifact,
+								Image,
+								File,
+								ImageList: _AssetList,
+								FileList: _AssetList,
+								Repeater: RepeaterImpl,
+								Reference: ReferenceImpl,
+								ReferenceList: ReferenceListImpl,
+								useSetting: useItemSetting
+							}, index)
+						})
 					})
 				}, itemId ?? index);
 			});
@@ -1425,42 +914,40 @@ function createEditableBlock(options) {
 			$[3] = children;
 			$[4] = fieldName;
 			$[5] = itemsMap;
-			$[6] = parentRepeaterContext;
-			$[7] = storedValue;
-			$[8] = T0;
-			$[9] = t2;
-			$[10] = t3;
-			$[11] = t4;
+			$[6] = parentNesting;
+			$[7] = scope.owner;
+			$[8] = scope.schema;
+			$[9] = scope.synced;
+			$[10] = storedValue;
+			$[11] = T0;
+			$[12] = t2;
+			$[13] = t3;
 		} else {
-			T0 = $[8];
-			t2 = $[9];
-			t3 = $[10];
-			t4 = $[11];
+			T0 = $[11];
+			t2 = $[12];
+			t3 = $[13];
 		}
-		let t5;
-		if ($[14] !== T0 || $[15] !== t2 || $[16] !== t3 || $[17] !== t4) {
-			t5 = /* @__PURE__ */ jsx(T0, {
-				blockId: t2,
-				fieldName: t3,
-				children: t4
+		let t4;
+		if ($[16] !== T0 || $[17] !== t2 || $[18] !== t3) {
+			t4 = /* @__PURE__ */ jsx(T0, {
+				fieldName: t2,
+				children: t3
 			});
-			$[14] = T0;
-			$[15] = t2;
-			$[16] = t3;
-			$[17] = t4;
-			$[18] = t5;
-		} else t5 = $[18];
-		return t5;
+			$[16] = T0;
+			$[17] = t2;
+			$[18] = t3;
+			$[19] = t4;
+		} else t4 = $[19];
+		return t4;
 	};
 	const Repeater = RepeaterImpl;
 	const BlockComponent = (t0) => {
-		const $ = c(48);
+		const $ = c(56);
 		const { blockData } = t0;
 		const isContentEditable = useIsEditable();
-		const { window: iframeWindow } = useFrame();
 		const [isHovered, setIsHovered] = React.useState(false);
-		const selection = usePreviewTargetSelection();
-		const selectTarget = usePreviewSelection();
+		const selection = useEditingSelection();
+		const selectTarget = useSelectTarget();
 		let t1;
 		if ($[0] !== selection) {
 			t1 = selectionBlockId(selection);
@@ -1468,7 +955,6 @@ function createEditableBlock(options) {
 			$[1] = t1;
 		} else t1 = $[1];
 		const isBlockSelected = t1 === blockData._id;
-		const overlayState = useOverlayState(isHovered, isBlockSelected);
 		const ref = React.useRef(null);
 		const canvasWorkspace = React.use(CanvasWorkspaceContext);
 		const mounted = React.useRef(false);
@@ -1512,29 +998,27 @@ function createEditableBlock(options) {
 			$[8] = t3;
 		} else t3 = $[8];
 		React.useEffect(t2, t3);
-		const t4 = String(blockData._id);
+		let t4;
+		if ($[9] !== blockData._id) {
+			t4 = {
+				type: "block",
+				blockId: blockData._id
+			};
+			$[9] = blockData._id;
+			$[10] = t4;
+		} else t4 = $[10];
+		const isHoveredFromSidebar = useSidebarHover(t4, isContentEditable);
+		const overlayState = useOverlayState(isHovered || isHoveredFromSidebar, isBlockSelected);
 		let t5;
-		if ($[9] !== t4) {
-			t5 = { blockId: t4 };
-			$[9] = t4;
-			$[10] = t5;
-		} else t5 = $[10];
-		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_BLOCK", "CAMOX_HOVER_BLOCK_END", t5);
-		const [prevSidebarHover, setPrevSidebarHover] = React.useState(isHoveredFromSidebar);
-		if (prevSidebarHover !== isHoveredFromSidebar) {
-			setPrevSidebarHover(isHoveredFromSidebar);
-			setIsHovered(isHoveredFromSidebar);
-		}
-		let t6;
 		if ($[11] !== blockData.settings) {
-			t6 = {
+			t5 = {
 				...emptySettings,
 				...blockData.settings
 			};
 			$[11] = blockData.settings;
-			$[12] = t6;
-		} else t6 = $[12];
-		const blockSettings = t6;
+			$[12] = t5;
+		} else t5 = $[12];
+		const blockSettings = t5;
 		let result;
 		if ($[13] !== blockData.content) {
 			result = {
@@ -1549,9 +1033,9 @@ function createEditableBlock(options) {
 			$[14] = result;
 		} else result = $[14];
 		const normalizedContent = result;
-		let t7;
+		let t6;
 		if ($[15] !== blockData._id || $[16] !== isContentEditable || $[17] !== selectTarget) {
-			t7 = (e) => {
+			t6 = (e) => {
 				if (!isContentEditable) return;
 				const target = e.target;
 				if (target.closest("[data-camox-field-id]")) return;
@@ -1564,94 +1048,127 @@ function createEditableBlock(options) {
 			$[15] = blockData._id;
 			$[16] = isContentEditable;
 			$[17] = selectTarget;
-			$[18] = t7;
-		} else t7 = $[18];
-		const handleClick = t7;
-		let t8;
+			$[18] = t6;
+		} else t6 = $[18];
+		const handleClick = t6;
+		let t7;
 		if ($[19] !== isContentEditable) {
-			t8 = () => {
+			t7 = () => {
 				if (!isContentEditable) return;
 				setIsHovered(true);
 			};
 			$[19] = isContentEditable;
-			$[20] = t8;
-		} else t8 = $[20];
-		const handleMouseEnter = t8;
-		let t9;
+			$[20] = t7;
+		} else t7 = $[20];
+		const handleMouseEnter = t7;
+		let t8;
 		if ($[21] !== isContentEditable) {
-			t9 = () => {
+			t8 = () => {
 				if (!isContentEditable) return;
 				setIsHovered(false);
 			};
 			$[21] = isContentEditable;
-			$[22] = t9;
-		} else t9 = $[22];
-		const handleMouseLeave = t9;
+			$[22] = t8;
+		} else t8 = $[22];
+		const handleMouseLeave = t8;
 		const shouldShowOverlay = isContentEditable && (overlayState["data-camox-hovered"] || overlayState["data-camox-focused"]);
+		let t9;
+		if ($[23] !== blockData._id) {
+			t9 = {
+				kind: "block",
+				blockId: blockData._id
+			};
+			$[23] = blockData._id;
+			$[24] = t9;
+		} else t9 = $[24];
+		const owner = t9;
 		let t10;
-		if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+		if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
 			t10 = {
 				position: "relative",
 				scrollMargin: "5rem"
 			};
-			$[23] = t10;
-		} else t10 = $[23];
+			$[25] = t10;
+		} else t10 = $[25];
 		const t11 = isContentEditable ? blockData._id : void 0;
 		let t12;
-		if ($[24] !== overlayState || $[25] !== shouldShowOverlay) {
+		if ($[26] !== overlayState || $[27] !== shouldShowOverlay) {
 			t12 = shouldShowOverlay ? overlayState : {};
-			$[24] = overlayState;
-			$[25] = shouldShowOverlay;
-			$[26] = t12;
-		} else t12 = $[26];
-		let t13;
-		if ($[27] !== blockData.content) {
-			t13 = {
-				...emptyContent,
-				...blockData.content
-			};
-			$[27] = blockData.content;
-			$[28] = t13;
-		} else t13 = $[28];
-		const t14 = t13;
-		let t15;
-		if ($[29] !== blockData._id || $[30] !== blockSettings || $[31] !== isHovered || $[32] !== t14) {
-			t15 = {
+			$[26] = overlayState;
+			$[27] = shouldShowOverlay;
+			$[28] = t12;
+		} else t12 = $[28];
+		const t13 = isHovered || isHoveredFromSidebar;
+		let t14;
+		if ($[29] !== blockData._id || $[30] !== blockSettings || $[31] !== t13) {
+			t14 = {
 				blockId: blockData._id,
-				content: t14,
 				settings: blockSettings,
-				isHovered,
+				isHovered: t13,
 				setIsHovered
 			};
 			$[29] = blockData._id;
 			$[30] = blockSettings;
-			$[31] = isHovered;
+			$[31] = t13;
 			$[32] = t14;
-			$[33] = t15;
-		} else t15 = $[33];
+		} else t14 = $[32];
+		let t15;
+		if ($[33] !== blockData.content) {
+			t15 = {
+				...emptyContent,
+				...blockData.content
+			};
+			$[33] = blockData.content;
+			$[34] = t15;
+		} else t15 = $[34];
 		let t16;
-		if ($[34] !== blockSettings || $[35] !== normalizedContent) {
-			t16 = /* @__PURE__ */ jsx(ToReact, {
+		if ($[35] !== blockSettings || $[36] !== owner || $[37] !== t15) {
+			t16 = {
+				owner,
+				target: owner,
+				content: t15,
+				settings: blockSettings,
+				schema: typeboxSchema.properties,
+				synced: !!options.synced
+			};
+			$[35] = blockSettings;
+			$[36] = owner;
+			$[37] = t15;
+			$[38] = t16;
+		} else t16 = $[38];
+		let t17;
+		if ($[39] !== blockSettings || $[40] !== normalizedContent) {
+			t17 = /* @__PURE__ */ jsx(ToReact, {
 				content: normalizedContent,
 				settings: blockSettings
 			});
-			$[34] = blockSettings;
-			$[35] = normalizedContent;
-			$[36] = t16;
-		} else t16 = $[36];
-		let t17;
-		if ($[37] !== t15 || $[38] !== t16) {
-			t17 = /* @__PURE__ */ jsx(Context.Provider, {
-				value: t15,
-				children: t16
-			});
-			$[37] = t15;
-			$[38] = t16;
-			$[39] = t17;
-		} else t17 = $[39];
+			$[39] = blockSettings;
+			$[40] = normalizedContent;
+			$[41] = t17;
+		} else t17 = $[41];
 		let t18;
-		if ($[40] !== blockData._id || $[41] !== handleClick || $[42] !== handleMouseEnter || $[43] !== handleMouseLeave || $[44] !== t11 || $[45] !== t12 || $[46] !== t17) {
-			t18 = /* @__PURE__ */ jsx("div", {
+		if ($[42] !== t16 || $[43] !== t17) {
+			t18 = /* @__PURE__ */ jsx(FieldScopeContext, {
+				value: t16,
+				children: t17
+			});
+			$[42] = t16;
+			$[43] = t17;
+			$[44] = t18;
+		} else t18 = $[44];
+		let t19;
+		if ($[45] !== t14 || $[46] !== t18) {
+			t19 = /* @__PURE__ */ jsx(Context.Provider, {
+				value: t14,
+				children: t18
+			});
+			$[45] = t14;
+			$[46] = t18;
+			$[47] = t19;
+		} else t19 = $[47];
+		let t20;
+		if ($[48] !== blockData._id || $[49] !== handleClick || $[50] !== handleMouseEnter || $[51] !== handleMouseLeave || $[52] !== t11 || $[53] !== t12 || $[54] !== t19) {
+			t20 = /* @__PURE__ */ jsx("div", {
 				className: "group visual-editing-block",
 				"data-camox-viewport-block": blockData._id,
 				ref,
@@ -1662,18 +1179,18 @@ function createEditableBlock(options) {
 				onClickCapture: handleClick,
 				onMouseEnter: handleMouseEnter,
 				onMouseLeave: handleMouseLeave,
-				children: t17
+				children: t19
 			});
-			$[40] = blockData._id;
-			$[41] = handleClick;
-			$[42] = handleMouseEnter;
-			$[43] = handleMouseLeave;
-			$[44] = t11;
-			$[45] = t12;
-			$[46] = t17;
-			$[47] = t18;
-		} else t18 = $[47];
-		return t18;
+			$[48] = blockData._id;
+			$[49] = handleClick;
+			$[50] = handleMouseEnter;
+			$[51] = handleMouseLeave;
+			$[52] = t11;
+			$[53] = t12;
+			$[54] = t19;
+			$[55] = t20;
+		} else t20 = $[55];
+		return t20;
 	};
 	const useSetting = (name) => {
 		const ctx = React.use(Context);
@@ -1693,7 +1210,7 @@ function createEditableBlock(options) {
 			Primitive = $[1];
 			props = $[2];
 		}
-		if (React.use(Context).content[props.name] == null) return null;
+		if (useScope("Reference").content[props.name] == null) return null;
 		let t1;
 		if ($[3] !== Primitive || $[4] !== props) {
 			t1 = /* @__PURE__ */ jsx(Primitive, { ...props });
@@ -1768,186 +1285,134 @@ function createEditableBlock(options) {
 		} else t0 = $[1];
 		return t0;
 	};
-	const placementOf = (block, owner, fieldName, recordId) => {
-		if (owner.layoutId != null) return {
-			layoutId: owner.layoutId,
-			recordId
-		};
-		if (owner.outer) return {
-			...owner.outer,
-			nested: {
-				fieldName,
-				recordId
-			}
-		};
-		return {
-			blockId: block.blockId,
-			...owner.itemId == null ? {} : { itemId: owner.itemId },
-			fieldName,
-			recordId
-		};
-	};
-	const usePlacedRecord = (block, owner, fieldName, record) => {
-		const $ = c(37);
-		const selectTarget = usePreviewSelection();
-		const projectUuid = useProjectUuid();
-		const applyEdit = useApplyContentEdit();
+	const usePlacedRecord = (placement) => {
+		const $ = c(15);
+		const editable = useIsEditable();
+		const selectTarget = useSelectTarget();
 		const [error, setError] = React.useState(null);
 		const [pointerHovered, setPointerHovered] = React.useState(false);
-		const editable = useIsEditable();
+		const target = placement ? {
+			type: "record",
+			...placement
+		} : null;
+		const selected = sameTarget(useEditingSelection(), target);
+		const sidebarHovered = useSidebarHover(target, editable);
 		let t0;
-		if ($[0] !== block || $[1] !== fieldName || $[2] !== owner || $[3] !== record) {
-			t0 = record ? placementOf(block, owner, fieldName, record.id) : null;
-			$[0] = block;
-			$[1] = fieldName;
-			$[2] = owner;
-			$[3] = record;
-			$[4] = t0;
-		} else t0 = $[4];
-		const placement = t0;
-		const selected = useRecordSelection(placement);
-		const { window: iframeWindow } = useFrame();
-		let t1;
-		if ($[5] !== placement) {
-			t1 = placement ? recordPlacementId(placement) : void 0;
-			$[5] = placement;
-			$[6] = t1;
-		} else t1 = $[6];
-		let t2;
-		if ($[7] !== t1) {
-			t2 = { fieldId: t1 };
-			$[7] = t1;
-			$[8] = t2;
-		} else t2 = $[8];
-		const sidebarHovered = useOverlayMessage(iframeWindow, editable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", t2);
-		let t3;
-		if ($[9] !== editable || $[10] !== placement || $[11] !== selectTarget) {
-			t3 = (event) => {
-				if (!editable || !placement) return;
+		if ($[0] !== editable || $[1] !== selectTarget || $[2] !== target) {
+			t0 = (event) => {
+				if (!editable || !target) return;
 				if (event.target.closest("[data-camox-field-id]") !== event.currentTarget) return;
-				selectTarget({
-					type: "record",
-					...placement
-				});
+				selectTarget(target);
 			};
-			$[9] = editable;
-			$[10] = placement;
-			$[11] = selectTarget;
-			$[12] = t3;
-		} else t3 = $[12];
-		const selectRecord = t3;
-		let t4;
-		if ($[13] !== editable || $[14] !== placement || $[15] !== selectTarget) {
-			t4 = (recordFieldName, recordFieldType) => {
-				if (!editable || !placement) return;
-				selectTarget({
-					type: "record-field",
-					...placement,
-					recordFieldName,
-					recordFieldType
-				});
-			};
-			$[13] = editable;
-			$[14] = placement;
-			$[15] = selectTarget;
-			$[16] = t4;
-		} else t4 = $[16];
-		const selectRecordField = t4;
-		let t5;
-		if ($[17] !== applyEdit || $[18] !== editable || $[19] !== projectUuid || $[20] !== record) {
-			t5 = (field, value) => {
-				if (!record || !editable) return;
+			$[0] = editable;
+			$[1] = selectTarget;
+			$[2] = target;
+			$[3] = t0;
+		} else t0 = $[3];
+		const selectRecord = t0;
+		let t1;
+		if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = (writing) => {
 				setError(null);
-				applyEdit({
-					type: "recordField",
-					projectUuid,
-					record,
-					field,
-					value
-				}).catch((cause) => {
+				writing.catch((cause) => {
 					setError(cause instanceof Error ? cause.message : "Could not save item");
 				});
 			};
-			$[17] = applyEdit;
-			$[18] = editable;
-			$[19] = projectUuid;
-			$[20] = record;
-			$[21] = t5;
-		} else t5 = $[21];
-		const update = t5;
-		const t6 = pointerHovered || sidebarHovered;
-		let t7;
-		if ($[22] !== placement || $[23] !== selectRecordField || $[24] !== update) {
-			t7 = placement ? {
-				placement,
-				selectRecordField,
-				update
-			} : null;
-			$[22] = placement;
-			$[23] = selectRecordField;
-			$[24] = update;
-			$[25] = t7;
-		} else t7 = $[25];
-		let t8;
-		let t9;
-		if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
-			t8 = () => setPointerHovered(true);
-			t9 = () => setPointerHovered(false);
-			$[26] = t8;
-			$[27] = t9;
+			$[4] = t1;
+		} else t1 = $[4];
+		const onWrite = t1;
+		const t2 = pointerHovered || sidebarHovered;
+		let t3;
+		let t4;
+		if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+			t3 = () => setPointerHovered(true);
+			t4 = () => setPointerHovered(false);
+			$[5] = t3;
+			$[6] = t4;
 		} else {
-			t8 = $[26];
-			t9 = $[27];
+			t3 = $[5];
+			t4 = $[6];
 		}
-		let t10;
-		if ($[28] !== selectRecord) {
-			t10 = {
+		let t5;
+		if ($[7] !== selectRecord) {
+			t5 = {
 				onClickCapture: selectRecord,
-				onMouseEnter: t8,
-				onMouseLeave: t9
+				onMouseEnter: t3,
+				onMouseLeave: t4
 			};
-			$[28] = selectRecord;
-			$[29] = t10;
-		} else t10 = $[29];
-		let t11;
-		if ($[30] !== editable || $[31] !== error || $[32] !== selected || $[33] !== t10 || $[34] !== t6 || $[35] !== t7) {
-			t11 = {
+			$[7] = selectRecord;
+			$[8] = t5;
+		} else t5 = $[8];
+		let t6;
+		if ($[9] !== editable || $[10] !== error || $[11] !== selected || $[12] !== t2 || $[13] !== t5) {
+			t6 = {
 				editable,
 				error,
 				selected,
-				hovered: t6,
-				reference: t7,
-				wrapperProps: t10
+				hovered: t2,
+				onWrite,
+				wrapperProps: t5
 			};
-			$[30] = editable;
-			$[31] = error;
-			$[32] = selected;
-			$[33] = t10;
-			$[34] = t6;
-			$[35] = t7;
-			$[36] = t11;
-		} else t11 = $[36];
-		return t11;
+			$[9] = editable;
+			$[10] = error;
+			$[11] = selected;
+			$[12] = t2;
+			$[13] = t5;
+			$[14] = t6;
+		} else t6 = $[14];
+		return t6;
 	};
 	const RecordScope = (t0) => {
-		const $ = c(16);
-		const { block, field, record, reference, children } = t0;
-		const t1 = record.content;
+		const $ = c(21);
+		const { schema, record, placement, placedRecord, children } = t0;
+		const projectUuid = useProjectUuid();
+		let t1;
+		if ($[0] !== placement) {
+			t1 = {
+				kind: "record",
+				placement
+			};
+			$[0] = placement;
+			$[1] = t1;
+		} else t1 = $[1];
 		let t2;
-		if ($[0] !== block || $[1] !== field.referenceSchema.properties || $[2] !== t1) {
+		if ($[2] !== projectUuid || $[3] !== record) {
 			t2 = {
-				...block,
-				content: t1,
-				sourceSchema: field.referenceSchema.properties
+				kind: "record",
+				record,
+				projectUuid
 			};
-			$[0] = block;
-			$[1] = field.referenceSchema.properties;
-			$[2] = t1;
-			$[3] = t2;
-		} else t2 = $[3];
-		let t3;
-		if ($[4] !== children || $[5] !== record.description || $[6] !== record.id || $[7] !== record.title || $[8] !== reference.placement.nested) {
-			t3 = children({
+			$[2] = projectUuid;
+			$[3] = record;
+			$[4] = t2;
+		} else t2 = $[4];
+		const t3 = record.content;
+		let t4;
+		if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+			t4 = {};
+			$[5] = t4;
+		} else t4 = $[5];
+		let t5;
+		if ($[6] !== placedRecord.onWrite || $[7] !== schema || $[8] !== t1 || $[9] !== t2 || $[10] !== t3) {
+			t5 = {
+				owner: t1,
+				target: t2,
+				content: t3,
+				settings: t4,
+				schema,
+				synced: false,
+				onWrite: placedRecord.onWrite
+			};
+			$[6] = placedRecord.onWrite;
+			$[7] = schema;
+			$[8] = t1;
+			$[9] = t2;
+			$[10] = t3;
+			$[11] = t5;
+		} else t5 = $[11];
+		let t6;
+		if ($[12] !== children || $[13] !== placement.nested || $[14] !== record.description || $[15] !== record.id || $[16] !== record.title) {
+			t6 = children({
 				id: record.id,
 				title: record.title,
 				description: record.description,
@@ -1957,303 +1422,268 @@ function createEditableBlock(options) {
 				Embed: ReferenceEmbed,
 				ImageList: ReferenceImageList,
 				FileList: ReferenceFileList,
-				...reference.placement.nested ? {} : {
+				...placement.nested ? {} : {
 					Reference,
 					ReferenceList
 				}
 			});
-			$[4] = children;
-			$[5] = record.description;
-			$[6] = record.id;
-			$[7] = record.title;
-			$[8] = reference.placement.nested;
-			$[9] = t3;
-		} else t3 = $[9];
-		let t4;
-		if ($[10] !== t2 || $[11] !== t3) {
-			t4 = /* @__PURE__ */ jsx(RepeatableItemContext.Provider, {
-				value: null,
-				children: /* @__PURE__ */ jsx(Context.Provider, {
-					value: t2,
-					children: t3
-				})
-			});
-			$[10] = t2;
-			$[11] = t3;
-			$[12] = t4;
-		} else t4 = $[12];
-		let t5;
-		if ($[13] !== reference || $[14] !== t4) {
-			t5 = /* @__PURE__ */ jsx(ReferenceContext.Provider, {
-				value: reference,
-				children: t4
+			$[12] = children;
+			$[13] = placement.nested;
+			$[14] = record.description;
+			$[15] = record.id;
+			$[16] = record.title;
+			$[17] = t6;
+		} else t6 = $[17];
+		let t7;
+		if ($[18] !== t5 || $[19] !== t6) {
+			t7 = /* @__PURE__ */ jsx(FieldScopeContext, {
+				value: t5,
+				children: t6
 			});
-			$[13] = reference;
-			$[14] = t4;
-			$[15] = t5;
-		} else t5 = $[15];
-		return t5;
-	};
-	const useReferenceField = (block, fieldName) => {
-		const item = React.use(RepeatableItemContext);
-		const outer = React.use(ReferenceContext)?.placement ?? null;
-		const owner = {
-			itemId: item?.itemId,
-			outer
-		};
-		const fieldType = "Reference";
-		const recordFieldSelected = useRecordSelection(outer, fieldName);
-		const blockFieldSelected = useFieldSelection(block.blockId, fieldName, fieldType, owner.itemId);
-		return {
-			owner,
-			field: item ? item.itemSchema?.[fieldName] : (block.sourceSchema ?? typeboxSchema.properties)[fieldName],
-			stored: item ? item.itemContent[fieldName] : block.content[fieldName],
-			fieldId: outer ? overlayFieldId(block.blockId, fieldName, { placement: outer }) : overlayFieldId(block.blockId, fieldName, { itemId: owner.itemId }),
-			fieldSelected: outer ? recordFieldSelected : blockFieldSelected
-		};
+			$[18] = t5;
+			$[19] = t6;
+			$[20] = t7;
+		} else t7 = $[20];
+		return t7;
 	};
 	const PlacedRecordWrapper = (t0) => {
-		const $ = c(10);
-		const { fieldId, record, placedRecord, overlay, children } = t0;
-		let t1;
+		const $ = c(11);
+		const { fieldId, record, placedRecord, hovered, focused, children } = t0;
+		const t1 = hovered || void 0;
+		const t2 = focused || void 0;
+		let t3;
 		if ($[0] !== placedRecord.error) {
-			t1 = placedRecord.error && /* @__PURE__ */ jsxs("p", {
+			t3 = placedRecord.error && /* @__PURE__ */ jsxs("p", {
 				role: "alert",
 				children: ["Could not save item. ", placedRecord.error]
 			});
 			$[0] = placedRecord.error;
-			$[1] = t1;
-		} else t1 = $[1];
-		let t2;
-		if ($[2] !== children || $[3] !== fieldId || $[4] !== overlay || $[5] !== placedRecord.wrapperProps || $[6] !== record.id || $[7] !== record.title || $[8] !== t1) {
-			t2 = /* @__PURE__ */ jsxs("div", {
+			$[1] = t3;
+		} else t3 = $[1];
+		let t4;
+		if ($[2] !== children || $[3] !== fieldId || $[4] !== placedRecord.wrapperProps || $[5] !== record.id || $[6] !== record.title || $[7] !== t1 || $[8] !== t2 || $[9] !== t3) {
+			t4 = /* @__PURE__ */ jsxs("div", {
 				"data-camox-field-id": fieldId,
 				"data-camox-collection-record-id": record.id,
 				"data-camox-reference-label": record.title,
 				"data-camox-overlay-mode": "reference",
-				...overlay,
+				"data-camox-hovered": t1,
+				"data-camox-focused": t2,
 				...placedRecord.wrapperProps,
-				children: [children, t1]
+				children: [children, t3]
 			});
 			$[2] = children;
 			$[3] = fieldId;
-			$[4] = overlay;
-			$[5] = placedRecord.wrapperProps;
-			$[6] = record.id;
-			$[7] = record.title;
-			$[8] = t1;
-			$[9] = t2;
-		} else t2 = $[9];
-		return t2;
+			$[4] = placedRecord.wrapperProps;
+			$[5] = record.id;
+			$[6] = record.title;
+			$[7] = t1;
+			$[8] = t2;
+			$[9] = t3;
+			$[10] = t4;
+		} else t4 = $[10];
+		return t4;
 	};
 	const ReferenceImpl = (t0) => {
-		const $ = c(18);
+		const $ = c(20);
 		const { name, children } = t0;
-		const block = React.use(Context);
+		const scope = useScope("Reference");
 		const { recordsMap } = useNormalizedData();
-		const { window: iframeWindow } = useFrame();
-		if (!block) throw new Error("Reference must be used within a Block Component");
 		const fieldName = String(name);
-		const { owner, field, stored, fieldId, fieldSelected } = useReferenceField(block, fieldName);
+		const field = useFieldSlot(fieldName, "Reference");
+		let record;
 		let t1;
-		if ($[0] !== field.collectionId || $[1] !== recordsMap || $[2] !== stored) {
-			t1 = resolveReference(stored, field.collectionId, recordsMap);
-			$[0] = field.collectionId;
-			$[1] = recordsMap;
-			$[2] = stored;
-			$[3] = t1;
-		} else t1 = $[3];
-		const record = t1;
-		const placedRecord = usePlacedRecord(block, owner, fieldName, record);
-		const { editable } = placedRecord;
+		if ($[0] !== field.schema.collectionId || $[1] !== field.value || $[2] !== fieldName || $[3] !== recordsMap || $[4] !== scope) {
+			record = resolveReference(field.value, field.schema.collectionId, recordsMap);
+			t1 = record ? placementThrough(scope.owner, fieldName, record.id) : null;
+			$[0] = field.schema.collectionId;
+			$[1] = field.value;
+			$[2] = fieldName;
+			$[3] = recordsMap;
+			$[4] = scope;
+			$[5] = record;
+			$[6] = t1;
+		} else {
+			record = $[5];
+			t1 = $[6];
+		}
+		const placement = t1;
+		const placedRecord = usePlacedRecord(placement);
+		if (!record || !placement) return null;
 		let t2;
-		if ($[4] !== fieldId) {
-			t2 = { fieldId };
-			$[4] = fieldId;
-			$[5] = t2;
-		} else t2 = $[5];
-		const fieldHovered = useOverlayMessage(iframeWindow, editable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", t2);
-		const overlay = useOverlayState(placedRecord.hovered || fieldHovered, fieldSelected || placedRecord.selected);
-		if (!record || !placedRecord.reference) return null;
-		let t3;
-		if ($[6] !== block || $[7] !== children || $[8] !== field || $[9] !== placedRecord.reference || $[10] !== record) {
-			t3 = /* @__PURE__ */ jsx(RecordScope, {
-				block,
-				field,
+		if ($[7] !== children || $[8] !== field.schema.referenceSchema.properties || $[9] !== placedRecord || $[10] !== placement || $[11] !== record) {
+			t2 = /* @__PURE__ */ jsx(RecordScope, {
+				schema: field.schema.referenceSchema.properties,
 				record,
-				reference: placedRecord.reference,
+				placement,
+				placedRecord,
 				children
 			});
-			$[6] = block;
 			$[7] = children;
-			$[8] = field;
-			$[9] = placedRecord.reference;
-			$[10] = record;
-			$[11] = t3;
-		} else t3 = $[11];
-		const rendered = t3;
-		if (!editable) return rendered;
-		let t4;
-		if ($[12] !== fieldId || $[13] !== overlay || $[14] !== placedRecord || $[15] !== record || $[16] !== rendered) {
-			t4 = /* @__PURE__ */ jsx(PlacedRecordWrapper, {
-				fieldId,
+			$[8] = field.schema.referenceSchema.properties;
+			$[9] = placedRecord;
+			$[10] = placement;
+			$[11] = record;
+			$[12] = t2;
+		} else t2 = $[12];
+		const rendered = t2;
+		if (!field.editable) return rendered;
+		const t3 = placedRecord.hovered || field.hovered;
+		const t4 = field.selected || placedRecord.selected;
+		let t5;
+		if ($[13] !== field.id || $[14] !== placedRecord || $[15] !== record || $[16] !== rendered || $[17] !== t3 || $[18] !== t4) {
+			t5 = /* @__PURE__ */ jsx(PlacedRecordWrapper, {
+				fieldId: field.id,
 				record,
 				placedRecord,
-				overlay,
+				hovered: t3,
+				focused: t4,
 				children: rendered
 			});
-			$[12] = fieldId;
-			$[13] = overlay;
+			$[13] = field.id;
 			$[14] = placedRecord;
 			$[15] = record;
 			$[16] = rendered;
-			$[17] = t4;
-		} else t4 = $[17];
-		return t4;
+			$[17] = t3;
+			$[18] = t4;
+			$[19] = t5;
+		} else t5 = $[19];
+		return t5;
 	};
 	const Reference = ReferenceImpl;
 	const ListedRecord = (t0) => {
 		const $ = c(14);
-		const { block, owner, field, fieldName, record, listHovered, children } = t0;
-		const placedRecord = usePlacedRecord(block, owner, fieldName, record);
-		const overlay = useOverlayState(placedRecord.hovered || listHovered, placedRecord.selected);
-		if (!placedRecord.reference) return null;
+		const { placement, schema, record, listHovered, children } = t0;
+		const placedRecord = usePlacedRecord(placement);
 		let t1;
-		if ($[0] !== block || $[1] !== children || $[2] !== field || $[3] !== placedRecord.reference || $[4] !== record) {
+		if ($[0] !== children || $[1] !== placedRecord || $[2] !== placement || $[3] !== record || $[4] !== schema) {
 			t1 = /* @__PURE__ */ jsx(RecordScope, {
-				block,
-				field,
+				schema,
 				record,
-				reference: placedRecord.reference,
+				placement,
+				placedRecord,
 				children
 			});
-			$[0] = block;
-			$[1] = children;
-			$[2] = field;
-			$[3] = placedRecord.reference;
-			$[4] = record;
+			$[0] = children;
+			$[1] = placedRecord;
+			$[2] = placement;
+			$[3] = record;
+			$[4] = schema;
 			$[5] = t1;
 		} else t1 = $[5];
 		const rendered = t1;
 		if (!placedRecord.editable) return rendered;
 		let t2;
-		if ($[6] !== placedRecord.reference.placement) {
-			t2 = recordPlacementId(placedRecord.reference.placement);
-			$[6] = placedRecord.reference.placement;
+		if ($[6] !== placement) {
+			t2 = placementId(placement);
+			$[6] = placement;
 			$[7] = t2;
 		} else t2 = $[7];
-		let t3;
-		if ($[8] !== overlay || $[9] !== placedRecord || $[10] !== record || $[11] !== rendered || $[12] !== t2) {
-			t3 = /* @__PURE__ */ jsx(PlacedRecordWrapper, {
+		const t3 = placedRecord.hovered || listHovered;
+		let t4;
+		if ($[8] !== placedRecord || $[9] !== record || $[10] !== rendered || $[11] !== t2 || $[12] !== t3) {
+			t4 = /* @__PURE__ */ jsx(PlacedRecordWrapper, {
 				fieldId: t2,
 				record,
 				placedRecord,
-				overlay,
+				hovered: t3,
+				focused: placedRecord.selected,
 				children: rendered
 			});
-			$[8] = overlay;
-			$[9] = placedRecord;
-			$[10] = record;
-			$[11] = rendered;
-			$[12] = t2;
-			$[13] = t3;
-		} else t3 = $[13];
-		return t3;
+			$[8] = placedRecord;
+			$[9] = record;
+			$[10] = rendered;
+			$[11] = t2;
+			$[12] = t3;
+			$[13] = t4;
+		} else t4 = $[13];
+		return t4;
 	};
 	const LayoutRecord = (t0) => {
-		const $ = c(25);
+		const $ = c(21);
 		const { layoutId, record, properties, children } = t0;
-		const t1 = record.content;
-		let t2;
+		let t1;
 		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-			t2 = {};
-			$[0] = t2;
-		} else t2 = $[0];
-		let t3;
-		if ($[1] !== properties || $[2] !== t1) {
-			t3 = {
+			t1 = {};
+			$[0] = t1;
+		} else t1 = $[0];
+		let t2;
+		if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+			t2 = {
 				blockId: "",
-				content: t1,
-				sourceSchema: properties,
-				settings: t2,
+				settings: t1,
 				isHovered: false,
 				setIsHovered: _temp8
 			};
-			$[1] = properties;
-			$[2] = t1;
-			$[3] = t3;
-		} else t3 = $[3];
-		const block = t3;
-		let t4;
-		if ($[4] !== layoutId) {
-			t4 = {
-				itemId: void 0,
-				outer: null,
-				layoutId
+			$[1] = t2;
+		} else t2 = $[1];
+		const block = t2;
+		let t3;
+		if ($[2] !== layoutId || $[3] !== record.id) {
+			t3 = {
+				layoutId,
+				recordId: record.id
 			};
-			$[4] = layoutId;
-			$[5] = t4;
-		} else t4 = $[5];
-		const placedRecord = usePlacedRecord(block, t4, "", record);
-		const overlay = useOverlayState(placedRecord.hovered, placedRecord.selected);
-		if (!placedRecord.reference) return null;
-		let t5;
-		if ($[6] !== properties) {
-			t5 = { referenceSchema: { properties } };
-			$[6] = properties;
-			$[7] = t5;
-		} else t5 = $[7];
-		let t6;
-		if ($[8] !== block || $[9] !== children || $[10] !== placedRecord.reference || $[11] !== record || $[12] !== t5) {
-			t6 = /* @__PURE__ */ jsx(RecordScope, {
-				block,
-				field: t5,
+			$[2] = layoutId;
+			$[3] = record.id;
+			$[4] = t3;
+		} else t3 = $[4];
+		const placement = t3;
+		const placedRecord = usePlacedRecord(placement);
+		let t4;
+		if ($[5] !== children || $[6] !== placedRecord || $[7] !== placement || $[8] !== properties || $[9] !== record) {
+			t4 = /* @__PURE__ */ jsx(RecordScope, {
+				schema: properties,
 				record,
-				reference: placedRecord.reference,
+				placement,
+				placedRecord,
 				children
 			});
-			$[8] = block;
-			$[9] = children;
-			$[10] = placedRecord.reference;
-			$[11] = record;
-			$[12] = t5;
-			$[13] = t6;
-		} else t6 = $[13];
-		let t7;
-		if ($[14] !== record.references || $[15] !== t6) {
-			t7 = /* @__PURE__ */ jsx(LinkedRecordsProvider, {
-				references: record.references,
-				children: t6
+			$[5] = children;
+			$[6] = placedRecord;
+			$[7] = placement;
+			$[8] = properties;
+			$[9] = record;
+			$[10] = t4;
+		} else t4 = $[10];
+		let t5;
+		if ($[11] !== record.references || $[12] !== t4) {
+			t5 = /* @__PURE__ */ jsx(Context.Provider, {
+				value: block,
+				children: /* @__PURE__ */ jsx(LinkedRecordsProvider, {
+					references: record.references,
+					children: t4
+				})
 			});
-			$[14] = record.references;
-			$[15] = t6;
-			$[16] = t7;
-		} else t7 = $[16];
-		const rendered = t7;
+			$[11] = record.references;
+			$[12] = t4;
+			$[13] = t5;
+		} else t5 = $[13];
+		const rendered = t5;
 		if (!placedRecord.editable) return rendered;
-		let t8;
-		if ($[17] !== placedRecord.reference.placement) {
-			t8 = recordPlacementId(placedRecord.reference.placement);
-			$[17] = placedRecord.reference.placement;
-			$[18] = t8;
-		} else t8 = $[18];
-		let t9;
-		if ($[19] !== overlay || $[20] !== placedRecord || $[21] !== record || $[22] !== rendered || $[23] !== t8) {
-			t9 = /* @__PURE__ */ jsx(PlacedRecordWrapper, {
-				fieldId: t8,
+		let t6;
+		if ($[14] !== placement) {
+			t6 = placementId(placement);
+			$[14] = placement;
+			$[15] = t6;
+		} else t6 = $[15];
+		let t7;
+		if ($[16] !== placedRecord || $[17] !== record || $[18] !== rendered || $[19] !== t6) {
+			t7 = /* @__PURE__ */ jsx(PlacedRecordWrapper, {
+				fieldId: t6,
 				record,
 				placedRecord,
-				overlay,
+				hovered: placedRecord.hovered,
+				focused: placedRecord.selected,
 				children: rendered
 			});
-			$[19] = overlay;
-			$[20] = placedRecord;
-			$[21] = record;
-			$[22] = rendered;
-			$[23] = t8;
-			$[24] = t9;
-		} else t9 = $[24];
-		return t9;
+			$[16] = placedRecord;
+			$[17] = record;
+			$[18] = rendered;
+			$[19] = t6;
+			$[20] = t7;
+		} else t7 = $[20];
+		return t7;
 	};
 	const LayoutItem = (t0) => {
 		const $ = c(9);
@@ -2291,119 +1721,85 @@ function createEditableBlock(options) {
 		return t3;
 	};
 	const ReferenceListImpl = (t0) => {
-		const $ = c(25);
+		const $ = c(22);
 		const { name, children } = t0;
 		const block = React.use(Context);
+		const scope = useScope("ReferenceList");
 		const normalizedData = useNormalizedData();
 		const { recordsMap } = normalizedData;
-		const { window: iframeWindow } = useFrame();
 		if (!block) throw new Error("ReferenceList must be used within a Block Component");
-		const editable = useIsEditable();
 		const fieldName = String(name);
-		const { owner, field, stored, fieldId } = useReferenceField(block, fieldName);
+		const field = useFieldSlot(fieldName, "ReferenceList");
+		const itemId = scope.owner.kind === "item" ? scope.owner.itemId : void 0;
 		let t1;
-		if ($[0] !== fieldId) {
-			t1 = { fieldId };
-			$[0] = fieldId;
-			$[1] = t1;
-		} else t1 = $[1];
-		const listHovered = useOverlayMessage(iframeWindow, editable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", t1);
-		let t2;
-		if ($[2] !== block || $[3] !== field || $[4] !== fieldName || $[5] !== normalizedData || $[6] !== owner || $[7] !== stored) {
-			t2 = isQueryBacked(field) ? queryResultIds(normalizedData, {
+		if ($[0] !== block || $[1] !== field.schema || $[2] !== field.value || $[3] !== fieldName || $[4] !== itemId || $[5] !== normalizedData) {
+			t1 = isQueryBacked(field.schema) ? queryResultIds(normalizedData, {
 				blockId: block.blockId,
-				itemId: owner.itemId
-			}, fieldName) : stored;
-			$[2] = block;
-			$[3] = field;
-			$[4] = fieldName;
+				itemId
+			}, fieldName) : field.value;
+			$[0] = block;
+			$[1] = field.schema;
+			$[2] = field.value;
+			$[3] = fieldName;
+			$[4] = itemId;
 			$[5] = normalizedData;
-			$[6] = owner;
-			$[7] = stored;
-			$[8] = t2;
-		} else t2 = $[8];
-		const ids = t2;
-		let t3;
-		if ($[9] !== block || $[10] !== children || $[11] !== field || $[12] !== fieldName || $[13] !== ids || $[14] !== listHovered || $[15] !== owner || $[16] !== recordsMap) {
-			const records = resolveReferenceList(ids, field.collectionId, recordsMap);
-			let t4;
-			if ($[18] !== block || $[19] !== children || $[20] !== field || $[21] !== fieldName || $[22] !== listHovered || $[23] !== owner) {
-				t4 = (record) => /* @__PURE__ */ jsx(ListedRecord, {
-					block,
-					owner,
-					field,
-					fieldName,
+			$[6] = t1;
+		} else t1 = $[6];
+		const ids = t1;
+		let t2;
+		if ($[7] !== children || $[8] !== field.hovered || $[9] !== field.schema.collectionId || $[10] !== field.schema.referenceSchema.properties || $[11] !== fieldName || $[12] !== ids || $[13] !== recordsMap || $[14] !== scope.owner) {
+			const records = resolveReferenceList(ids, field.schema.collectionId, recordsMap);
+			const schema = field.schema.referenceSchema.properties;
+			let t3;
+			if ($[16] !== children || $[17] !== field.hovered || $[18] !== fieldName || $[19] !== schema || $[20] !== scope.owner) {
+				t3 = (record) => /* @__PURE__ */ jsx(ListedRecord, {
+					placement: placementThrough(scope.owner, fieldName, record.id),
+					schema,
 					record,
-					listHovered,
+					listHovered: field.hovered,
 					children
 				}, record.id);
-				$[18] = block;
-				$[19] = children;
-				$[20] = field;
-				$[21] = fieldName;
-				$[22] = listHovered;
-				$[23] = owner;
-				$[24] = t4;
-			} else t4 = $[24];
-			t3 = records.map(t4);
-			$[9] = block;
-			$[10] = children;
-			$[11] = field;
-			$[12] = fieldName;
-			$[13] = ids;
-			$[14] = listHovered;
-			$[15] = owner;
-			$[16] = recordsMap;
-			$[17] = t3;
-		} else t3 = $[17];
-		return t3;
+				$[16] = children;
+				$[17] = field.hovered;
+				$[18] = fieldName;
+				$[19] = schema;
+				$[20] = scope.owner;
+				$[21] = t3;
+			} else t3 = $[21];
+			t2 = records.map(t3);
+			$[7] = children;
+			$[8] = field.hovered;
+			$[9] = field.schema.collectionId;
+			$[10] = field.schema.referenceSchema.properties;
+			$[11] = fieldName;
+			$[12] = ids;
+			$[13] = recordsMap;
+			$[14] = scope.owner;
+			$[15] = t2;
+		} else t2 = $[15];
+		return t2;
 	};
 	const ReferenceList = ReferenceListImpl;
 	const Detached = (t0) => {
-		const $ = c(30);
+		const $ = c(24);
 		const { children } = t0;
 		const ctx = React.use(Context);
 		if (!ctx) throw new Error("Detached must be used within a Block Component");
 		const { blockId, isHovered, setIsHovered } = ctx;
 		const isContentEditable = useIsEditable();
-		const { window: iframeWindow } = useFrame();
-		const selection = usePreviewTargetSelection();
-		const selectTarget = usePreviewSelection();
-		let t1;
-		if ($[0] !== selection) {
-			t1 = selectionBlockId(selection);
-			$[0] = selection;
-			$[1] = t1;
-		} else t1 = $[1];
-		const overlayState = useOverlayState(isHovered, t1 === blockId);
-		const t2 = String(blockId);
-		let t3;
-		if ($[2] !== t2) {
-			t3 = { blockId: t2 };
-			$[2] = t2;
-			$[3] = t3;
-		} else t3 = $[3];
-		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_BLOCK", "CAMOX_HOVER_BLOCK_END", t3);
-		let t4;
-		let t5;
-		if ($[4] !== isHoveredFromSidebar || $[5] !== setIsHovered) {
-			t4 = () => {
-				setIsHovered(isHoveredFromSidebar);
-			};
-			t5 = [isHoveredFromSidebar, setIsHovered];
-			$[4] = isHoveredFromSidebar;
-			$[5] = setIsHovered;
-			$[6] = t4;
-			$[7] = t5;
-		} else {
-			t4 = $[6];
-			t5 = $[7];
-		}
-		React.useEffect(t4, t5);
+		const selectTarget = useSelectTarget();
+		const t1 = useEditingSelection();
+		let t2;
+		if ($[0] !== t1) {
+			t2 = selectionBlockId(t1);
+			$[0] = t1;
+			$[1] = t2;
+		} else t2 = $[1];
+		const overlayState = useOverlayState(isHovered, t2 === blockId);
 		const shouldShowOverlay = isContentEditable && (overlayState["data-camox-hovered"] || overlayState["data-camox-focused"]);
-		let t6;
-		if ($[8] !== blockId || $[9] !== isContentEditable || $[10] !== selectTarget) {
-			t6 = (e) => {
+		let t3;
+		if ($[2] !== blockId || $[3] !== isContentEditable || $[4] !== selectTarget) {
+			t3 = (e) => {
 				if (!isContentEditable) return;
 				const target = e.target;
 				if (target.closest("[data-camox-field-id]")) return;
@@ -2413,65 +1809,65 @@ function createEditableBlock(options) {
 					blockId
 				});
 			};
-			$[8] = blockId;
-			$[9] = isContentEditable;
-			$[10] = selectTarget;
-			$[11] = t6;
-		} else t6 = $[11];
-		const handleClick = t6;
-		let t7;
-		if ($[12] !== isContentEditable || $[13] !== setIsHovered) {
-			t7 = () => {
+			$[2] = blockId;
+			$[3] = isContentEditable;
+			$[4] = selectTarget;
+			$[5] = t3;
+		} else t3 = $[5];
+		const handleClick = t3;
+		let t4;
+		if ($[6] !== isContentEditable || $[7] !== setIsHovered) {
+			t4 = () => {
 				if (isContentEditable) setIsHovered(true);
 			};
-			$[12] = isContentEditable;
-			$[13] = setIsHovered;
+			$[6] = isContentEditable;
+			$[7] = setIsHovered;
+			$[8] = t4;
+		} else t4 = $[8];
+		const handleMouseEnter = t4;
+		let t5;
+		if ($[9] !== isContentEditable || $[10] !== setIsHovered) {
+			t5 = () => {
+				if (isContentEditable) setIsHovered(false);
+			};
+			$[9] = isContentEditable;
+			$[10] = setIsHovered;
+			$[11] = t5;
+		} else t5 = $[11];
+		const handleMouseLeave = t5;
+		const t6 = isContentEditable ? blockId : void 0;
+		let t7;
+		if ($[12] !== overlayState || $[13] !== shouldShowOverlay) {
+			t7 = shouldShowOverlay ? overlayState : {};
+			$[12] = overlayState;
+			$[13] = shouldShowOverlay;
 			$[14] = t7;
 		} else t7 = $[14];
-		const handleMouseEnter = t7;
 		let t8;
-		if ($[15] !== isContentEditable || $[16] !== setIsHovered) {
-			t8 = () => {
-				if (isContentEditable) setIsHovered(false);
-			};
-			$[15] = isContentEditable;
-			$[16] = setIsHovered;
-			$[17] = t8;
-		} else t8 = $[17];
-		const handleMouseLeave = t8;
-		const t9 = isContentEditable ? blockId : void 0;
-		let t10;
-		if ($[18] !== overlayState || $[19] !== shouldShowOverlay) {
-			t10 = shouldShowOverlay ? overlayState : {};
-			$[18] = overlayState;
-			$[19] = shouldShowOverlay;
-			$[20] = t10;
-		} else t10 = $[20];
-		let t11;
-		if ($[21] !== children || $[22] !== handleClick || $[23] !== handleMouseEnter || $[24] !== handleMouseLeave || $[25] !== t10 || $[26] !== t9) {
-			t11 = children({
-				"data-camox-block-id": t9,
-				...t10,
+		if ($[15] !== children || $[16] !== handleClick || $[17] !== handleMouseEnter || $[18] !== handleMouseLeave || $[19] !== t6 || $[20] !== t7) {
+			t8 = children({
+				"data-camox-block-id": t6,
+				...t7,
 				"data-camox-overlay-mode": options.synced ? "synced" : void 0,
 				onClickCapture: handleClick,
 				onMouseEnter: handleMouseEnter,
 				onMouseLeave: handleMouseLeave
 			});
-			$[21] = children;
-			$[22] = handleClick;
-			$[23] = handleMouseEnter;
-			$[24] = handleMouseLeave;
-			$[25] = t10;
-			$[26] = t9;
-			$[27] = t11;
-		} else t11 = $[27];
-		let t12;
-		if ($[28] !== t11) {
-			t12 = /* @__PURE__ */ jsx(Fragment, { children: t11 });
-			$[28] = t11;
-			$[29] = t12;
-		} else t12 = $[29];
-		return t12;
+			$[15] = children;
+			$[16] = handleClick;
+			$[17] = handleMouseEnter;
+			$[18] = handleMouseLeave;
+			$[19] = t6;
+			$[20] = t7;
+			$[21] = t8;
+		} else t8 = $[21];
+		let t9;
+		if ($[22] !== t8) {
+			t9 = /* @__PURE__ */ jsx(Fragment, { children: t8 });
+			$[22] = t8;
+			$[23] = t9;
+		} else t9 = $[23];
+		return t9;
 	};
 	return {
 		Detached,