camox 0.44.0 → 0.45.0

package/dist/core/editing/createEditableBlock.js

@@ -1,31 +1,54 @@
-import { useLocation } from "../../features/navigation/navigation.js";
-import { useProjectSlug } from "../../lib/auth.js";
-import { isFileMarker, isItemMarker, resolveFileMarker, useNormalizedData } from "../../lib/normalized-data.js";
-import { Type as Type$1, resolveToMarkdown } from "../lib/contentType.js";
+import { artifactFrameProps, artifactPlaceholderProps, artifactStandInProps, isArtifactSource } from "../lib/artifact.js";
+import { artifactData } from "../lib/artifactData.js";
+import { resolveBlockFields, resolveToMarkdown } from "../lib/contentType.js";
+import { useProjectUuid } from "../../lib/auth.js";
+import { useLocation, useNavigate } from "../../features/navigation/navigation.js";
+import { useOptionalCamoxApp } from "../../features/provider/components/CamoxAppContext.js";
+import { LinkedRecordsProvider, isItemMarker, queryResultIds, resolveAssetValue, useNormalizedData } from "../../lib/normalized-data.js";
+import { reads, useStudioCache } from "../../lib/studio-reads.js";
+import { useLinkPages } from "../../lib/link-pages.js";
+import { ArtifactsRunContext, useArtifactHost, useInitialArtifactData } from "../hooks/useArtifactHost.js";
 import { IconSvg } from "../lib/icons.js";
+import { renderImagePlaceholder } from "../lib/imagePlaceholder.js";
 import { buildImageSrcSet, getDefaultImageSizes, getDefaultImageWidth, transformImageUrl } from "../lib/imageTransform.js";
 import { markdownToReactNodes } from "../lib/lexicalReact.js";
-import { blockMutations, pageQueries, projectQueries, repeatableItemMutations } from "../../lib/queries.js";
-import { previewStore, selectIsCommentMode } from "../../features/preview/previewStore.js";
-import { usePreviewSelection } from "../../features/preview/previewSelection.js";
+import { resolveReference, resolveReferenceList } from "../lib/reference.js";
+import { blockMutations, collectionMutations, repeatableItemMutations } from "../../lib/queries.js";
+import { referencePickerFocus } from "../../features/preview/referencePickerFocus.js";
+import { invalidateCollectionRecordViews } from "../../lib/collection-cache.js";
+import { selectionBlockId } from "../../features/preview/previewStore.js";
 import { useFrame } from "../../features/preview/components/Frame.js";
-import { postOverlayMessage } from "../../features/preview/overlayMessages.js";
-import { AddBlockControlBar } from "../components/AddBlockControlBar.js";
-import { InlineLexicalEditor } from "../components/lexical/InlineLexicalEditor.js";
-import { useFieldSelection } from "../hooks/useFieldSelection.js";
 import { useIsEditable } from "../hooks/useIsEditable.js";
+import { CanvasWorkspaceContext } from "../../features/canvas/canvasZoom.js";
+import { PreviewEditingOwnerContext, usePreviewSelection, usePreviewTargetSelection } from "../../features/preview/previewSelection.js";
+import { overlayFieldId, recordPlacementId } from "../../features/preview/overlayMessages.js";
+import { useLatestRecord } from "./useLatestRecord.js";
+import { referenceWritesFor } from "./referenceWrites.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";
+import { isQueryBacked } from "@camox/api-contract";
 import { Type } from "@sinclair/typebox";
-import { useMutation, useQuery } from "@tanstack/react-query";
 import { generateKeyBetween } from "fractional-indexing";
-import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useSelector } from "@xstate/store-react";
-import { createPortal } from "react-dom";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 //#region src/core/editing/createEditableBlock.tsx
+/** The pages links lead to in the locale viewed, for the studio's editors, who read the project. */
+function useEditorLinkPages() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = { fetchProject: true };
+		$[0] = t0;
+	} else t0 = $[0];
+	return useLinkPages(useProjectUuid(), t0);
+}
 /** Normalize legacy links (no `type` field) to the new union shape */
 const normalizeLinkValue = (value) => {
 	if (!value.type) return {
@@ -42,7 +65,7 @@ const normalizeLinkValue = (value) => {
 * resolves inconsistently across environments, causing hydration mismatches.
 */
 const resolveLinkHref = (link, pages, currentPathname) => {
-	if (link.type === "page") return (pages?.find((p) => String(p.id) === link.pageId))?.fullPath ?? currentPathname;
+	if (link.type === "page") return (pages?.find((p) => p.id === link.pageId))?.fullPath ?? currentPathname;
 	if (!link.href || link.href.startsWith("#")) return `${currentPathname}${link.href ?? ""}`;
 	return link.href;
 };
@@ -106,7 +129,7 @@ function buildPeekItems(properties, blockId, parentItemId, content, allItems, co
 		const markers = [];
 		let prevPosition = null;
 		for (let i = 0; i < defaultCount; i++) {
-			const itemId = --counter.value;
+			const itemId = `peek_${++counter.value}`;
 			const position = generateKeyBetween(prevPosition, null);
 			prevPosition = position;
 			allItems.push({
@@ -119,7 +142,10 @@ function buildPeekItems(properties, blockId, parentItemId, content, allItems, co
 				summary: "",
 				position,
 				createdAt: 0,
-				updatedAt: 0
+				updatedAt: 0,
+				projectId: null,
+				sharedContentType: null,
+				references: {}
 			});
 			markers.push({ _itemId: itemId });
 			const nestedContent = {};
@@ -134,20 +160,21 @@ function buildPeekItems(properties, blockId, parentItemId, content, allItems, co
 	}
 }
 function createEditableBlock(options) {
-	const typeboxSchema = Type.Object(options.content);
+	const fields = resolveBlockFields(options);
+	const typeboxSchema = Type.Object(fields.content);
 	const contentSchema = {
 		type: "object",
 		title: options.title,
 		description: options.description,
 		properties: typeboxSchema.properties,
-		required: Object.keys(options.content),
-		toMarkdown: resolveToMarkdown(options.toMarkdown, options.settings, "block")
+		required: Object.keys(fields.content),
+		toMarkdown: resolveToMarkdown(options.toMarkdown, fields.settings, "block", fields.content)
 	};
-	const settingsTypeboxSchema = options.settings ? Type.Object(options.settings) : null;
+	const settingsTypeboxSchema = fields.settings ? Type.Object(fields.settings) : null;
 	const settingsSchema = settingsTypeboxSchema ? {
 		type: "object",
 		properties: settingsTypeboxSchema.properties,
-		required: Object.keys(options.settings)
+		required: Object.keys(fields.settings)
 	} : void 0;
 	const contentDefaults = {};
 	const contentDefaultsForStorage = {};
@@ -173,102 +200,64 @@ function createEditableBlock(options) {
 		for (const [key, prop] of Object.entries(settingsTypeboxSchema.properties)) if ("default" in prop) settingsDefaults[key] = prop.default;
 	}
 	const Context = React.createContext(null);
-	const RepeaterItemContext = React.createContext(null);
-	const RepeaterHoverContext = React.createContext(false);
-	/**
-	* Build a field ID that matches the sidebar's `getFieldId` format.
-	* Root fields:          blockId__fieldName
-	* Repeater item fields: blockId__itemId__fieldName
-	*/
-	const getOverlayFieldId = (blockId, repeaterContext, fieldName) => {
-		if (repeaterContext?.itemId != null) return `${blockId}__${repeaterContext.itemId}__${fieldName}`;
-		return `${blockId}__${fieldName}`;
-	};
+	const RepeatableItemContext = React.createContext(null);
+	const ReferenceContext = 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 Field = (t0) => {
-		const $ = c(34);
-		if ($[0] !== "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6") {
-			for (let $i = 0; $i < 34; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6";
-		}
+		const $ = c(40);
 		const { name, textStyle, linkStyle, children } = t0;
 		const selectTarget = usePreviewSelection();
-		const isCommentMode = useSelector(previewStore, selectIsCommentMode);
 		const blockContext = React.use(Context);
 		if (!blockContext) throw new Error("Field must be used within a Block Component");
 		const { blockId, content, mode } = blockContext;
 		const isContentEditable = useIsEditable(mode);
 		const elementRef = React.useRef(null);
 		const { window: iframeWindow } = useFrame();
-		const projectSlug = useProjectSlug();
+		const pages = useEditorLinkPages();
 		let t1;
-		if ($[1] !== projectSlug) {
-			t1 = projectQueries.getBySlug(projectSlug);
-			$[1] = projectSlug;
-			$[2] = t1;
-		} else t1 = $[2];
-		const { data: project } = useQuery(t1);
-		let t2;
-		if ($[3] !== project?.id) {
-			t2 = pageQueries.list(project?.id ?? 0);
-			$[3] = project?.id;
-			$[4] = t2;
-		} else t2 = $[4];
-		const t3 = !!project;
-		let t4;
-		if ($[5] !== t2 || $[6] !== t3) {
-			t4 = {
-				...t2,
-				enabled: t3
-			};
-			$[5] = t2;
-			$[6] = t3;
-			$[7] = t4;
-		} else t4 = $[7];
-		const { data: pages } = useQuery(t4);
-		let t5;
-		if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-			t5 = { select: _temp };
-			$[8] = t5;
-		} else t5 = $[8];
-		const currentPathname = useLocation(t5);
-		const repeaterContext = React.use(RepeaterItemContext);
-		const fieldId = getOverlayFieldId(blockId, repeaterContext, String(name));
+		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 isSelectedFromSelection = useFieldSelection(blockId, String(name), "String", repeaterContext?.itemId);
-		const overlayState = useOverlayState(isHovered, isEditorFocused || isSelectedFromSelection);
+		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 });
-		let t6;
-		let t7;
-		if ($[9] !== isHoveredFromSidebar) {
-			t6 = () => {
-				setIsHovered(isHoveredFromSidebar);
-			};
-			t7 = [isHoveredFromSidebar];
-			$[9] = isHoveredFromSidebar;
-			$[10] = t6;
-			$[11] = t7;
-		} else {
-			t6 = $[10];
-			t7 = $[11];
+		const [prevSidebarHover, setPrevSidebarHover] = React.useState(isHoveredFromSidebar);
+		if (prevSidebarHover !== isHoveredFromSidebar) {
+			setPrevSidebarHover(isHoveredFromSidebar);
+			setIsHovered(isHoveredFromSidebar);
 		}
-		React.useEffect(t6, t7);
-		let t8;
-		if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-			t8 = blockMutations.updateContent();
-			$[12] = t8;
-		} else t8 = $[12];
-		const updateBlockContent = useMutation(t8);
-		let t9;
-		if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
-			t9 = repeatableItemMutations.updateContent();
-			$[13] = t9;
-		} else t9 = $[13];
-		const updateRepeatableContent = useMutation(t9);
-		let t10;
-		if ($[14] !== blockId || $[15] !== name || $[16] !== repeaterContext || $[17] !== updateBlockContent || $[18] !== updateRepeatableContent) {
-			t10 = (newValue) => {
+		let t2;
+		if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+			t2 = blockMutations.updateContent();
+			$[1] = t2;
+		} else t2 = $[1];
+		const updateBlockContent = useMutation(t2);
+		let t3;
+		if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+			t3 = repeatableItemMutations.updateContent();
+			$[2] = t3;
+		} else t3 = $[2];
+		const updateRepeatableContent = useMutation(t3);
+		let t4;
+		if ($[3] !== blockId || $[4] !== name || $[5] !== reference || $[6] !== repeaterContext || $[7] !== updateBlockContent || $[8] !== updateRepeatableContent) {
+			t4 = (newValue) => {
+				if (reference) {
+					reference.update(String(name), newValue);
+					return;
+				}
 				if (repeaterContext) {
 					const { itemId } = repeaterContext;
 					if (itemId != null) updateRepeatableContent.mutate({
@@ -280,17 +269,22 @@ function createEditableBlock(options) {
 					content: { [name]: newValue }
 				});
 			};
-			$[14] = blockId;
-			$[15] = name;
-			$[16] = repeaterContext;
-			$[17] = updateBlockContent;
-			$[18] = updateRepeatableContent;
-			$[19] = t10;
-		} else t10 = $[19];
-		const handleChange = t10;
-		let t11;
-		if ($[20] !== blockId || $[21] !== name || $[22] !== repeaterContext || $[23] !== selectTarget) {
-			t11 = (event) => {
+			$[3] = blockId;
+			$[4] = name;
+			$[5] = reference;
+			$[6] = repeaterContext;
+			$[7] = updateBlockContent;
+			$[8] = updateRepeatableContent;
+			$[9] = t4;
+		} else t4 = $[9];
+		const handleChange = t4;
+		let t5;
+		if ($[10] !== blockId || $[11] !== name || $[12] !== reference || $[13] !== repeaterContext || $[14] !== selectTarget) {
+			t5 = () => {
+				if (reference) {
+					reference.selectRecordField(String(name), "String");
+					return;
+				}
 				selectTarget(repeaterContext?.itemId != null ? {
 					type: "item-field",
 					blockId,
@@ -302,168 +296,187 @@ function createEditableBlock(options) {
 					blockId,
 					fieldName: String(name),
 					fieldType: "String"
-				}, event);
+				});
 			};
-			$[20] = blockId;
-			$[21] = name;
-			$[22] = repeaterContext;
-			$[23] = selectTarget;
-			$[24] = t11;
-		} else t11 = $[24];
-		const selectField = t11;
-		let t12;
-		if ($[25] !== selectField) {
-			t12 = () => {
-				if (selectIsCommentMode(previewStore.getSnapshot())) return;
+			$[10] = blockId;
+			$[11] = name;
+			$[12] = reference;
+			$[13] = repeaterContext;
+			$[14] = selectTarget;
+			$[15] = t5;
+		} else t5 = $[15];
+		const selectField = t5;
+		let t6;
+		if ($[16] !== selectField) {
+			t6 = () => {
 				setIsEditorFocused(true);
 				selectField();
 			};
-			$[25] = selectField;
-			$[26] = t12;
-		} else t12 = $[26];
-		const handleFocus = t12;
-		let t13;
-		if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
-			t13 = () => {
+			$[16] = selectField;
+			$[17] = t6;
+		} else t6 = $[17];
+		const handleFocus = t6;
+		let t7;
+		if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+			t7 = () => {
 				setIsEditorFocused(false);
 			};
-			$[27] = t13;
-		} else t13 = $[27];
-		const handleBlur = t13;
-		let t14;
-		if ($[28] !== isContentEditable) {
-			t14 = () => {
+			$[18] = t7;
+		} else t7 = $[18];
+		const handleBlur = t7;
+		let t8;
+		if ($[19] !== isContentEditable) {
+			t8 = () => {
 				if (isContentEditable) setIsHovered(true);
 			};
-			$[28] = isContentEditable;
-			$[29] = t14;
-		} else t14 = $[29];
-		const handleMouseEnter = t14;
-		let t15;
-		if ($[30] !== isContentEditable) {
-			t15 = () => {
+			$[19] = isContentEditable;
+			$[20] = t8;
+		} else t8 = $[20];
+		const handleMouseEnter = t8;
+		let t9;
+		if ($[21] !== isContentEditable) {
+			t9 = () => {
 				if (isContentEditable) setIsHovered(false);
 			};
-			$[30] = isContentEditable;
-			$[31] = t15;
-		} else t15 = $[31];
-		const handleMouseLeave = t15;
+			$[21] = isContentEditable;
+			$[22] = t9;
+		} else t9 = $[22];
+		const handleMouseLeave = t9;
 		const fieldData = { text: fieldValue };
-		if (!isContentEditable) return /* @__PURE__ */ jsx(Fragment, { children: children({ children: markdownToReactNodes(fieldValue, {
-			pages,
-			fallbackHref: currentPathname,
-			textStyle,
-			linkStyle
-		}) }, fieldData) });
-		const t16 = children({
-			ref: elementRef,
-			"data-camox-field-id": fieldId,
-			...overlayState,
-			"data-camox-overlay-mode": options.synced ? "synced" : void 0,
-			onMouseEnter: handleMouseEnter,
-			onMouseLeave: handleMouseLeave,
-			onClickCapture: selectField,
-			children: isCommentMode ? markdownToReactNodes(fieldValue, {
+		const fieldSchema = repeaterContext ? repeaterContext.itemSchema?.[name] : (blockContext.sourceSchema ?? typeboxSchema.properties)[name];
+		let t10;
+		if ($[23] !== currentPathname || $[24] !== fieldValue || $[25] !== linkStyle || $[26] !== pages || $[27] !== textStyle) {
+			t10 = () => markdownToReactNodes(fieldValue, {
 				pages,
 				fallbackHref: currentPathname,
 				textStyle,
 				linkStyle
-			}) : /* @__PURE__ */ jsx(InlineLexicalEditor, {
+			});
+			$[23] = currentPathname;
+			$[24] = fieldValue;
+			$[25] = linkStyle;
+			$[26] = pages;
+			$[27] = textStyle;
+			$[28] = t10;
+		} else t10 = $[28];
+		const text = t10;
+		if (!isContentEditable) return /* @__PURE__ */ jsx(Fragment, { children: children({ children: text() }, fieldData) });
+		const t11 = fieldSchema?.maxLength;
+		let t12;
+		if ($[29] !== currentPathname || $[30] !== fieldValue || $[31] !== handleChange || $[32] !== handleFocus || $[33] !== linkStyle || $[34] !== pages || $[35] !== t11 || $[36] !== textStyle) {
+			t12 = /* @__PURE__ */ jsx(InlineLexicalEditor, {
 				textStyle,
 				linkStyle,
 				pages,
 				fallbackHref: currentPathname,
 				initialState: fieldValue,
 				externalState: fieldValue,
+				maxLength: t11,
 				onChange: handleChange,
 				onFocus: handleFocus,
 				onBlur: handleBlur
-			})
+			});
+			$[29] = currentPathname;
+			$[30] = fieldValue;
+			$[31] = handleChange;
+			$[32] = handleFocus;
+			$[33] = linkStyle;
+			$[34] = pages;
+			$[35] = t11;
+			$[36] = textStyle;
+			$[37] = t12;
+		} else t12 = $[37];
+		const t13 = 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: t12
 		}, fieldData);
-		let t17;
-		if ($[32] !== t16) {
-			t17 = /* @__PURE__ */ jsx(Fragment, { children: t16 });
-			$[32] = t16;
-			$[33] = t17;
-		} else t17 = $[33];
-		return t17;
+		let t14;
+		if ($[38] !== t13) {
+			t14 = /* @__PURE__ */ jsx(Fragment, { children: t13 });
+			$[38] = t13;
+			$[39] = t14;
+		} else t14 = $[39];
+		return t14;
 	};
 	const Icon = (t0) => {
-		const $ = c(34);
-		if ($[0] !== "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6") {
-			for (let $i = 0; $i < 34; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6";
-		}
+		const $ = c(33);
 		let name;
 		let props;
-		if ($[1] !== t0) {
+		if ($[0] !== t0) {
 			({name, ...props} = t0);
-			$[1] = t0;
-			$[2] = name;
-			$[3] = props;
+			$[0] = t0;
+			$[1] = name;
+			$[2] = props;
 		} else {
-			name = $[2];
-			props = $[3];
+			name = $[1];
+			props = $[2];
 		}
 		const block = React.use(Context);
-		const item = React.use(RepeaterItemContext);
+		const item = React.use(RepeatableItemContext);
 		const selectTarget = usePreviewSelection();
 		if (!block) throw new Error("Icon must be used within a Block Component");
 		const editable = useIsEditable(block.mode);
 		const fieldName = String(name);
 		const value = item ? item.itemContent[name] : block.content[name];
-		let t1;
-		if ($[4] !== block.blockId || $[5] !== fieldName || $[6] !== item) {
-			t1 = getOverlayFieldId(block.blockId, item, fieldName);
-			$[4] = block.blockId;
-			$[5] = fieldName;
-			$[6] = item;
-			$[7] = t1;
-		} else t1 = $[7];
-		const fieldId = t1;
+		const t1 = item?.itemId;
+		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);
-		let t2;
-		if ($[8] !== fieldId) {
-			t2 = { fieldId };
-			$[8] = fieldId;
-			$[9] = t2;
-		} else t2 = $[9];
-		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, editable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", t2);
+		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 t3 = editable ? fieldId : void 0;
-		const t4 = editable ? "icon" : void 0;
-		let t5;
-		if ($[10] !== editable || $[11] !== overlayState) {
-			t5 = editable ? overlayState : {};
-			$[10] = editable;
-			$[11] = overlayState;
-			$[12] = t5;
-		} else t5 = $[12];
-		const t6 = editable && options.synced ? "synced" : void 0;
-		let t7;
+		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;
-		if ($[13] !== editable || $[14] !== props) {
-			t7 = (event) => {
+		let t9;
+		if ($[12] !== editable || $[13] !== props) {
+			t8 = (event) => {
 				if (editable) setIsHovered(true);
 				props.onMouseEnter?.(event);
 			};
-			t8 = (event_0) => {
+			t9 = (event_0) => {
 				if (editable) setIsHovered(false);
 				props.onMouseLeave?.(event_0);
 			};
-			$[13] = editable;
-			$[14] = props;
-			$[15] = t7;
-			$[16] = t8;
+			$[12] = editable;
+			$[13] = props;
+			$[14] = t8;
+			$[15] = t9;
 		} else {
-			t7 = $[15];
-			t8 = $[16];
+			t8 = $[14];
+			t9 = $[15];
 		}
-		let t9;
-		if ($[17] !== block.blockId || $[18] !== editable || $[19] !== fieldName || $[20] !== item || $[21] !== props.onClickCapture || $[22] !== selectTarget) {
-			t9 = editable ? (event_1) => selectTarget(item?.itemId != null ? {
+		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,
@@ -474,47 +487,43 @@ function createEditableBlock(options) {
 				blockId: block.blockId,
 				fieldName,
 				fieldType: "Icon"
-			}, event_1) : props.onClickCapture;
-			$[17] = block.blockId;
-			$[18] = editable;
-			$[19] = fieldName;
-			$[20] = item;
-			$[21] = props.onClickCapture;
-			$[22] = selectTarget;
-			$[23] = t9;
-		} else t9 = $[23];
-		let t10;
-		if ($[24] !== props || $[25] !== t3 || $[26] !== t4 || $[27] !== t5 || $[28] !== t6 || $[29] !== t7 || $[30] !== t8 || $[31] !== t9 || $[32] !== value) {
-			t10 = /* @__PURE__ */ jsx(IconSvg, {
+			}) : 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, {
 				...props,
 				iconId: value,
-				"data-camox-field-id": t3,
-				"data-camox-field-type": t4,
-				...t5,
-				"data-camox-overlay-mode": t6,
-				onMouseEnter: t7,
-				onMouseLeave: t8,
-				onClickCapture: t9
+				"data-camox-field-id": t4,
+				"data-camox-field-type": t5,
+				...t6,
+				"data-camox-overlay-mode": t7,
+				onMouseEnter: t8,
+				onMouseLeave: t9,
+				onClickCapture: t10
 			});
-			$[24] = props;
-			$[25] = t3;
-			$[26] = t4;
-			$[27] = t5;
-			$[28] = t6;
-			$[29] = t7;
-			$[30] = t8;
-			$[31] = t9;
-			$[32] = value;
-			$[33] = t10;
-		} else t10 = $[33];
-		return t10;
+			$[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;
 	};
 	const Embed = (t0) => {
-		const $ = c(39);
-		if ($[0] !== "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6") {
-			for (let $i = 0; $i < 39; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6";
-		}
+		const $ = c(40);
 		const { name, children } = t0;
 		const selectTarget = usePreviewSelection();
 		const blockContext = React.use(Context);
@@ -522,26 +531,37 @@ function createEditableBlock(options) {
 		const { blockId, content, mode } = blockContext;
 		const isContentEditable = useIsEditable(mode);
 		const { window: iframeWindow } = useFrame();
-		const repeaterContext = React.use(RepeaterItemContext);
+		const repeaterContext = React.use(RepeatableItemContext);
 		const fieldValue = repeaterContext ? repeaterContext.itemContent[name] : content[name];
+		const reference = React.use(ReferenceContext);
 		const t1 = String(name);
-		let t2;
-		if ($[1] !== blockId || $[2] !== repeaterContext || $[3] !== t1) {
-			t2 = getOverlayFieldId(blockId, repeaterContext, t1);
-			$[1] = blockId;
-			$[2] = repeaterContext;
-			$[3] = t1;
-			$[4] = t2;
-		} else t2 = $[4];
-		const fieldId = t2;
+		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 overlayState = useOverlayState(isHovered);
+		const isRecordFieldSelected = useRecordSelection(reference?.placement ?? null, String(name));
+		const overlayState = useOverlayState(isHovered, reference != null && isRecordFieldSelected);
 		const embedRef = React.useRef(null);
 		const itemId = repeaterContext?.itemId;
-		let t3;
-		if ($[5] !== blockId || $[6] !== isContentEditable || $[7] !== itemId || $[8] !== name || $[9] !== selectTarget) {
-			t3 = (event) => {
+		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,
@@ -553,20 +573,21 @@ function createEditableBlock(options) {
 					blockId,
 					fieldName: String(name),
 					fieldType: "Embed"
-				}, event);
+				});
 			};
 			$[5] = blockId;
 			$[6] = isContentEditable;
 			$[7] = itemId;
 			$[8] = name;
-			$[9] = selectTarget;
-			$[10] = t3;
-		} else t3 = $[10];
-		const selectField = t3;
-		let t4;
+			$[9] = reference;
+			$[10] = selectTarget;
+			$[11] = t4;
+		} else t4 = $[11];
+		const selectField = t4;
 		let t5;
-		if ($[11] !== iframeWindow || $[12] !== isContentEditable || $[13] !== selectField) {
-			t4 = () => {
+		let t6;
+		if ($[12] !== iframeWindow || $[13] !== isContentEditable || $[14] !== selectField) {
+			t5 = () => {
 				if (!isContentEditable || !iframeWindow) return;
 				let timer;
 				const handleBlur = () => {
@@ -575,11 +596,7 @@ function createEditableBlock(options) {
 						const activeElement = iframeWindow.document.activeElement;
 						if (activeElement?.tagName !== "IFRAME") return;
 						if (!embedRef.current?.contains(activeElement)) return;
-						selectField({
-							currentTarget: embedRef.current,
-							preventDefault() {},
-							stopPropagation() {}
-						});
+						selectField();
 					}, 0);
 				};
 				iframeWindow.addEventListener("blur", handleBlur);
@@ -588,50 +605,46 @@ function createEditableBlock(options) {
 					iframeWindow.removeEventListener("blur", handleBlur);
 				};
 			};
-			t5 = [
+			t6 = [
 				isContentEditable,
 				iframeWindow,
 				selectField
 			];
-			$[11] = iframeWindow;
-			$[12] = isContentEditable;
-			$[13] = selectField;
-			$[14] = t4;
+			$[12] = iframeWindow;
+			$[13] = isContentEditable;
+			$[14] = selectField;
 			$[15] = t5;
+			$[16] = t6;
 		} else {
-			t4 = $[14];
 			t5 = $[15];
+			t6 = $[16];
 		}
-		React.useEffect(t4, t5);
-		let t6;
-		if ($[16] !== fieldId) {
-			t6 = { fieldId };
-			$[16] = fieldId;
-			$[17] = t6;
-		} else t6 = $[17];
-		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", t6);
+		React.useEffect(t5, t6);
 		let t7;
-		let t8;
-		if ($[18] !== isHoveredFromSidebar) {
-			t7 = () => {
-				setIsHovered(isHoveredFromSidebar);
-			};
-			t8 = [isHoveredFromSidebar];
-			$[18] = isHoveredFromSidebar;
-			$[19] = t7;
-			$[20] = t8;
-		} else {
-			t7 = $[19];
-			t8 = $[20];
+		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);
 		}
-		React.useEffect(t7, t8);
-		const t9 = isContentEditable ? fieldId : void 0;
-		const t10 = isContentEditable ? "embed" : void 0;
+		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 ($[21] !== isContentEditable || $[22] !== overlayState) {
-			t11 = isContentEditable ? overlayState : {};
-			$[21] = isContentEditable;
-			$[22] = overlayState;
+		if ($[22] !== reference) {
+			t11 = assetOverlayMode(reference);
+			$[22] = reference;
 			$[23] = t11;
 		} else t11 = $[23];
 		let t12;
@@ -654,14 +667,14 @@ function createEditableBlock(options) {
 			$[30] = t14;
 		} else t14 = $[30];
 		let t15;
-		if ($[31] !== selectField || $[32] !== t10 || $[33] !== t11 || $[34] !== t12 || $[35] !== t13 || $[36] !== t14 || $[37] !== t9) {
+		if ($[31] !== selectField || $[32] !== t10 || $[33] !== t11 || $[34] !== t12 || $[35] !== t13 || $[36] !== t14 || $[37] !== t8 || $[38] !== t9) {
 			t15 = /* @__PURE__ */ jsx("div", {
 				ref: embedRef,
 				onClickCapture: selectField,
-				"data-camox-field-id": t9,
-				"data-camox-field-type": t10,
-				...t11,
-				"data-camox-overlay-mode": options.synced ? "synced" : void 0,
+				"data-camox-field-id": t8,
+				"data-camox-field-type": t9,
+				...t10,
+				"data-camox-overlay-mode": t11,
 				onMouseEnter: t12,
 				onMouseLeave: t13,
 				children: t14
@@ -672,101 +685,282 @@ function createEditableBlock(options) {
 			$[34] = t12;
 			$[35] = t13;
 			$[36] = t14;
-			$[37] = t9;
-			$[38] = t15;
-		} else t15 = $[38];
+			$[37] = t8;
+			$[38] = t9;
+			$[39] = t15;
+		} else t15 = $[39];
 		return t15;
 	};
+	const Artifact = (t0) => {
+		const $ = c(53);
+		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, mode } = blockContext;
+		const isContentEditable = useIsEditable(mode);
+		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 overlayState = useOverlayState(isHovered || isHoveredFromSidebar);
+		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 { 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
+			}, {
+				linkHref: t6,
+				asset: t7
+			});
+			$[12] = blockContext.settings;
+			$[13] = content;
+			$[14] = currentPathname;
+			$[15] = fieldName;
+			$[16] = filesMap;
+			$[17] = pages;
+			$[18] = repeaterContext;
+			$[19] = t5;
+		} else t5 = $[19];
+		const data = t5;
+		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,
+				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,
+				data,
+				size: t7,
+				navigate: t8
+			};
+			$[28] = data;
+			$[29] = t6;
+			$[30] = t7;
+			$[31] = t8;
+			$[32] = t9;
+		} else t9 = $[32];
+		const hostProps = useArtifactHost(t9);
+		const initialData = useInitialArtifactData(value, data);
+		const fontLinks = useOptionalCamoxApp()?.getArtifactFontLinks();
+		const runs = React.use(ArtifactsRunContext);
+		const frame = children({
+			...!isArtifactSource(value) ? artifactPlaceholderProps() : runs ? artifactFrameProps(value, {
+				fontLinks,
+				data: initialData
+			}) : artifactStandInProps(value),
+			...hostProps
+		});
+		let t10;
+		if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+			t10 = {
+				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", {
+				"aria-hidden": true,
+				"data-camox-artifact-layer": "",
+				style: {
+					position: "absolute",
+					inset: 0,
+					cursor: "pointer"
+				}
+			});
+			$[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]
+			});
+			$[44] = frame;
+			$[45] = t11;
+			$[46] = t12;
+			$[47] = t13;
+			$[48] = t14;
+			$[49] = t16;
+			$[50] = t17;
+			$[51] = t18;
+			$[52] = t19;
+		} else t19 = $[52];
+		return t19;
+	};
 	const Link = (t0) => {
-		const $ = c(32);
-		if ($[0] !== "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6") {
-			for (let $i = 0; $i < 32; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6";
-		}
+		const $ = c(21);
 		const { name, children } = t0;
 		const selectTarget = usePreviewSelection();
-		const isCommentMode = useSelector(previewStore, selectIsCommentMode);
 		const blockContext = React.use(Context);
 		if (!blockContext) throw new Error("Link must be used within a Block Component");
 		const { blockId, content, mode } = blockContext;
 		const isContentEditable = useIsEditable(mode);
 		const elementRef = React.useRef(null);
 		const { window: iframeWindow } = useFrame();
-		const repeaterContext = React.use(RepeaterItemContext);
-		const fieldValue = normalizeLinkValue(repeaterContext ? repeaterContext.itemContent[name] : content[name]);
+		const repeaterContext = React.use(RepeatableItemContext);
+		const rawFieldValue = repeaterContext ? repeaterContext.itemContent[name] : content[name];
+		const fieldValue = normalizeLinkValue(rawFieldValue);
 		let t1;
-		if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 			t1 = blockMutations.updateContent();
-			$[1] = t1;
-		} else t1 = $[1];
+			$[0] = t1;
+		} else t1 = $[0];
 		const updateBlockContent = useMutation(t1);
 		let t2;
-		if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
 			t2 = repeatableItemMutations.updateContent();
-			$[2] = t2;
-		} else t2 = $[2];
+			$[1] = t2;
+		} else t2 = $[1];
 		const updateRepeatableContent = useMutation(t2);
-		const projectSlug = useProjectSlug();
+		const pages = useEditorLinkPages();
 		let t3;
-		if ($[3] !== projectSlug) {
-			t3 = projectQueries.getBySlug(projectSlug);
-			$[3] = projectSlug;
-			$[4] = t3;
-		} else t3 = $[4];
-		const { data: project } = useQuery(t3);
-		let t4;
-		if ($[5] !== project?.id) {
-			t4 = pageQueries.list(project?.id ?? 0);
-			$[5] = project?.id;
-			$[6] = t4;
-		} else t4 = $[6];
-		const t5 = !!project;
-		let t6;
-		if ($[7] !== t4 || $[8] !== t5) {
-			t6 = {
-				...t4,
-				enabled: t5
-			};
-			$[7] = t4;
-			$[8] = t5;
-			$[9] = t6;
-		} else t6 = $[9];
-		const { data: pages } = useQuery(t6);
-		let t7;
-		if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-			t7 = { select: _temp2 };
-			$[10] = t7;
-		} else t7 = $[10];
-		const resolvedHref = resolveLinkHref(fieldValue, pages, useLocation(t7));
-		const fieldId = getOverlayFieldId(blockId, repeaterContext, String(name));
+		if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+			t3 = { select: _temp3 };
+			$[2] = t3;
+		} else t3 = $[2];
+		const currentPathname = useLocation(t3);
+		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);
-		React.useEffect(() => {
+		const [syncedText, setSyncedText] = React.useState({
+			text: fieldValue.text,
+			isEditing
+		});
+		if (syncedText.text !== fieldValue.text || syncedText.isEditing !== isEditing) {
+			setSyncedText({
+				text: fieldValue.text,
+				isEditing
+			});
 			if (!isEditing) setDisplayText(fieldValue.text);
-		}, [fieldValue.text, isEditing]);
+		}
 		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", { fieldId });
-		let t8;
-		let t9;
-		if ($[11] !== isHoveredFromSidebar) {
-			t8 = () => {
-				setIsHovered(isHoveredFromSidebar);
-			};
-			t9 = [isHoveredFromSidebar];
-			$[11] = isHoveredFromSidebar;
-			$[12] = t8;
-			$[13] = t9;
-		} else {
-			t8 = $[12];
-			t9 = $[13];
+		const [prevSidebarHover, setPrevSidebarHover] = React.useState(isHoveredFromSidebar);
+		if (prevSidebarHover !== isHoveredFromSidebar) {
+			setPrevSidebarHover(isHoveredFromSidebar);
+			setIsHovered(isHoveredFromSidebar);
 		}
-		React.useEffect(t8, t9);
-		let t10;
-		if ($[14] !== blockId || $[15] !== name || $[16] !== repeaterContext || $[17] !== updateBlockContent || $[18] !== updateRepeatableContent) {
-			t10 = (newLinkValue) => {
+		let t4;
+		if ($[3] !== blockId || $[4] !== name || $[5] !== repeaterContext || $[6] !== updateBlockContent || $[7] !== updateRepeatableContent) {
+			t4 = (newLinkValue) => {
 				if (repeaterContext?.itemId != null) updateRepeatableContent.mutate({
 					id: repeaterContext.itemId,
 					content: { [name]: newLinkValue }
@@ -776,14 +970,14 @@ function createEditableBlock(options) {
 					content: { [name]: newLinkValue }
 				});
 			};
-			$[14] = blockId;
-			$[15] = name;
-			$[16] = repeaterContext;
-			$[17] = updateBlockContent;
-			$[18] = updateRepeatableContent;
-			$[19] = t10;
-		} else t10 = $[19];
-		const saveLinkValue = t10;
+			$[3] = blockId;
+			$[4] = name;
+			$[5] = repeaterContext;
+			$[6] = updateBlockContent;
+			$[7] = updateRepeatableContent;
+			$[8] = t4;
+		} else t4 = $[8];
+		const saveLinkValue = t4;
 		const handleInput = (e) => {
 			const newText = e.target.textContent || "";
 			saveLinkValue({
@@ -791,9 +985,9 @@ function createEditableBlock(options) {
 				text: newText
 			});
 		};
-		let t11;
-		if ($[20] !== blockId || $[21] !== name || $[22] !== repeaterContext || $[23] !== selectTarget) {
-			t11 = (event) => {
+		let t5;
+		if ($[9] !== blockId || $[10] !== name || $[11] !== repeaterContext || $[12] !== selectTarget) {
+			t5 = () => {
 				selectTarget(repeaterContext?.itemId != null ? {
 					type: "item-field",
 					blockId,
@@ -805,36 +999,35 @@ function createEditableBlock(options) {
 					blockId,
 					fieldName: String(name),
 					fieldType: "Link"
-				}, event);
+				});
 			};
-			$[20] = blockId;
-			$[21] = name;
-			$[22] = repeaterContext;
-			$[23] = selectTarget;
-			$[24] = t11;
-		} else t11 = $[24];
-		const selectField = t11;
-		let t12;
-		if ($[25] !== selectField) {
-			t12 = () => {
-				if (selectIsCommentMode(previewStore.getSnapshot())) return;
+			$[9] = blockId;
+			$[10] = name;
+			$[11] = repeaterContext;
+			$[12] = selectTarget;
+			$[13] = t5;
+		} else t5 = $[13];
+		const selectField = t5;
+		let t6;
+		if ($[14] !== selectField) {
+			t6 = () => {
 				setIsEditing(true);
 				setIsEditorFocused(true);
 				selectField();
 			};
-			$[25] = selectField;
-			$[26] = t12;
-		} else t12 = $[26];
-		const handleFocus = t12;
-		let t13;
-		if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
-			t13 = () => {
+			$[14] = selectField;
+			$[15] = t6;
+		} else t6 = $[15];
+		const handleFocus = t6;
+		let t7;
+		if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+			t7 = () => {
 				setIsEditing(false);
 				setIsEditorFocused(false);
 			};
-			$[27] = t13;
-		} else t13 = $[27];
-		const handleBlur = t13;
+			$[16] = t7;
+		} else t7 = $[16];
+		const handleBlur = t7;
 		const linkData = {
 			text: displayText,
 			href: resolvedHref,
@@ -846,18 +1039,18 @@ function createEditableBlock(options) {
 			rel: fieldValue.newTab ? "noreferrer" : void 0,
 			children: fieldValue.text
 		}, linkData) });
-		let t14;
-		let t15;
-		if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
-			t14 = () => setIsHovered(true);
-			t15 = () => setIsHovered(false);
-			$[28] = t14;
-			$[29] = t15;
+		let t8;
+		let t9;
+		if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+			t8 = () => setIsHovered(true);
+			t9 = () => setIsHovered(false);
+			$[17] = t8;
+			$[18] = t9;
 		} else {
-			t14 = $[28];
-			t15 = $[29];
+			t8 = $[17];
+			t9 = $[18];
 		}
-		const t16 = children({
+		const t10 = children({
 			ref: elementRef,
 			to: resolvedHref,
 			target: fieldValue.newTab ? "_blank" : void 0,
@@ -866,32 +1059,32 @@ function createEditableBlock(options) {
 			"data-camox-field-id": fieldId,
 			...overlayState,
 			"data-camox-overlay-mode": options.synced ? "synced" : void 0,
-			contentEditable: !isCommentMode,
+			contentEditable: true,
 			onClickCapture: selectField,
-			onClick: _temp3,
+			onClick: _temp4,
 			onInput: handleInput,
 			onFocus: handleFocus,
 			onBlur: handleBlur,
-			onMouseEnter: t14,
-			onMouseLeave: t15,
-			onKeyDown: _temp4,
+			onMouseEnter: t8,
+			onMouseLeave: t9,
+			onKeyDown: _temp5,
 			spellCheck: false,
 			suppressContentEditableWarning: true
 		}, linkData);
-		let t17;
-		if ($[30] !== t16) {
-			t17 = /* @__PURE__ */ jsx(Fragment, { children: t16 });
-			$[30] = t16;
-			$[31] = t17;
-		} else t17 = $[31];
-		return t17;
+		let t11;
+		if ($[19] !== t10) {
+			t11 = /* @__PURE__ */ jsx(Fragment, { children: t10 });
+			$[19] = t10;
+			$[20] = t11;
+		} else t11 = $[20];
+		return t11;
+	};
+	const assetOverlayMode = (reference) => {
+		if (reference) return "reference";
+		return options.synced ? "synced" : void 0;
 	};
 	const Image = (t0) => {
-		const $ = c(22);
-		if ($[0] !== "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6") {
-			for (let $i = 0; $i < 22; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6";
-		}
+		const $ = c(30);
 		const { name, children } = t0;
 		const selectTarget = usePreviewSelection();
 		const blockContext = React.use(Context);
@@ -899,44 +1092,53 @@ function createEditableBlock(options) {
 		const { blockId, content, mode } = blockContext;
 		const isContentEditable = useIsEditable(mode);
 		const { window: iframeWindow } = useFrame();
-		const repeaterContext = React.use(RepeaterItemContext);
+		const repeaterContext = React.use(RepeatableItemContext);
 		const { filesMap } = useNormalizedData();
 		const rawSource = repeaterContext ? repeaterContext.itemContent[name] : content[name];
-		const rawValue = isFileMarker(rawSource) ? resolveFileMarker(rawSource, filesMap) : rawSource;
+		const rawValue = resolveAssetValue(rawSource, filesMap);
 		const defaultValue = repeaterContext ? repeatableItemDefaults[repeaterContext.arrayFieldName]?.[String(name)] : contentDefaults[String(name)];
 		const fieldValue = rawValue ?? defaultValue;
 		const isInlineArrayItem = repeaterContext != null && repeaterContext.itemId == null;
 		const overlayFieldName = isInlineArrayItem ? repeaterContext.arrayFieldName : String(name);
 		const overlayItemId = isInlineArrayItem ? repeaterContext.containerItemId : repeaterContext?.itemId;
-		const fieldId = overlayItemId != null ? `${blockId}__${overlayItemId}__${overlayFieldName}` : `${blockId}__${overlayFieldName}`;
-		const [isHovered, setIsHovered] = React.useState(false);
-		const overlayState = useOverlayState(isHovered, useFieldSelection(blockId, overlayFieldName, "Image", overlayItemId));
+		const reference = React.use(ReferenceContext);
 		let t1;
-		if ($[1] !== fieldId) {
-			t1 = { fieldId };
-			$[1] = fieldId;
-			$[2] = t1;
-		} else t1 = $[2];
-		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", t1);
+		if ($[0] !== blockId || $[1] !== overlayFieldName || $[2] !== overlayItemId || $[3] !== reference) {
+			t1 = getOverlayFieldId(blockId, overlayFieldName, {
+				itemId: overlayItemId,
+				reference
+			});
+			$[0] = blockId;
+			$[1] = overlayFieldName;
+			$[2] = overlayItemId;
+			$[3] = reference;
+			$[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;
-		let t3;
-		if ($[3] !== isHoveredFromSidebar) {
-			t2 = () => {
-				setIsHovered(isHoveredFromSidebar);
-			};
-			t3 = [isHoveredFromSidebar];
-			$[3] = isHoveredFromSidebar;
-			$[4] = t2;
-			$[5] = t3;
-		} else {
-			t2 = $[4];
-			t3 = $[5];
+		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);
 		}
-		React.useEffect(t2, t3);
-		let t4;
-		if ($[6] !== blockId || $[7] !== isContentEditable || $[8] !== overlayFieldName || $[9] !== overlayItemId || $[10] !== selectTarget) {
-			t4 = (event) => {
+		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,
@@ -948,16 +1150,18 @@ function createEditableBlock(options) {
 					blockId,
 					fieldName: overlayFieldName,
 					fieldType: "Image"
-				}, event);
+				});
 			};
-			$[6] = blockId;
-			$[7] = isContentEditable;
-			$[8] = overlayFieldName;
-			$[9] = overlayItemId;
-			$[10] = selectTarget;
-			$[11] = t4;
-		} else t4 = $[11];
-		const handleClick = t4;
+			$[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(),
@@ -968,91 +1172,121 @@ function createEditableBlock(options) {
 			sizes: getDefaultImageSizes(),
 			alt: fieldValue.alt
 		};
-		if (!isContentEditable) return /* @__PURE__ */ jsx(Fragment, { children: children(imageProps, fieldValue) });
-		const t5 = "image";
-		const t6 = options.synced ? "synced" : void 0;
-		let t7;
-		let t8;
-		if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-			t7 = () => setIsHovered(true);
-			t8 = () => setIsHovered(false);
-			$[12] = t7;
-			$[13] = t8;
+		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 {
-			t7 = $[12];
-			t8 = $[13];
+			t5 = $[20];
+			t6 = $[21];
 		}
-		const t9 = children(imageProps, fieldValue);
-		let t10;
-		if ($[14] !== fieldId || $[15] !== handleClick || $[16] !== overlayState || $[17] !== t6 || $[18] !== t7 || $[19] !== t8 || $[20] !== t9) {
-			t10 = /* @__PURE__ */ jsx("div", {
+		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,
-				"data-camox-field-type": t5,
+				"data-camox-field-type": "image",
 				...overlayState,
-				"data-camox-overlay-mode": t6,
-				onMouseEnter: t7,
-				onMouseLeave: t8,
+				"data-camox-overlay-mode": t4,
+				onMouseEnter: t5,
+				onMouseLeave: t6,
 				onClickCapture: handleClick,
-				children: t9
+				children: renderedImage
 			});
-			$[14] = fieldId;
-			$[15] = handleClick;
-			$[16] = overlayState;
-			$[17] = t6;
-			$[18] = t7;
-			$[19] = t8;
-			$[20] = t9;
-			$[21] = t10;
-		} else t10 = $[21];
-		return t10;
+			$[22] = fieldId;
+			$[23] = handleClick;
+			$[24] = overlayState;
+			$[25] = renderedImage;
+			$[26] = t4;
+			$[27] = t5;
+			$[28] = t6;
+			$[29] = t7;
+		} else t7 = $[29];
+		return t7;
 	};
 	const File = (t0) => {
-		const $ = c(9);
-		if ($[0] !== "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6") {
-			for (let $i = 0; $i < 9; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6";
-		}
+		const $ = c(2);
 		const { name, children } = t0;
 		const blockContext = React.use(Context);
 		if (!blockContext) throw new Error("File must be used within a Block Component");
-		const { content } = blockContext;
-		const repeaterContext = React.use(RepeaterItemContext);
+		const { blockId, content, mode } = blockContext;
+		const isContentEditable = useIsEditable(mode);
+		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];
-		let t1;
-		if ($[1] !== children || $[2] !== filesMap || $[3] !== name || $[4] !== rawSource || $[5] !== repeaterContext) {
-			const rawValue = isFileMarker(rawSource) ? resolveFileMarker(rawSource, filesMap) : rawSource;
-			const defaultValue = repeaterContext ? repeatableItemDefaults[repeaterContext.arrayFieldName]?.[String(name)] : contentDefaults[String(name)];
-			const fieldValue = rawValue ?? defaultValue;
-			t1 = children({
-				href: fieldValue.url,
-				download: fieldValue.filename
-			}, fieldValue);
-			$[1] = children;
-			$[2] = filesMap;
-			$[3] = name;
-			$[4] = rawSource;
-			$[5] = repeaterContext;
-			$[6] = t1;
-		} else t1 = $[6];
+		const rawValue = resolveAssetValue(rawSource, filesMap);
+		const defaultValue = repeaterContext ? repeatableItemDefaults[repeaterContext.arrayFieldName]?.[String(name)] : contentDefaults[String(name)];
+		const fieldValue = rawValue ?? defaultValue;
+		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);
+		}
+		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);
 		let t2;
-		if ($[7] !== t1) {
+		if ($[0] !== t1) {
 			t2 = /* @__PURE__ */ jsx(Fragment, { children: t1 });
-			$[7] = t1;
-			$[8] = t2;
-		} else t2 = $[8];
+			$[0] = t1;
+			$[1] = t2;
+		} else t2 = $[1];
 		return t2;
 	};
 	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(RepeaterItemContext);
+		const parentRepeaterContext = React.use(RepeatableItemContext);
 		const { filesMap } = useNormalizedData();
 		const fieldName = String(name);
-		const fieldSchema = parentRepeaterContext ? typeboxSchema.properties[parentRepeaterContext.arrayFieldName]?.items?.properties?.[fieldName] : typeboxSchema.properties[fieldName];
+		const fieldSchema = parentRepeaterContext ? typeboxSchema.properties[parentRepeaterContext.arrayFieldName]?.items?.properties?.[fieldName] : (blockContext.sourceSchema ?? typeboxSchema.properties)[fieldName];
 		const ft = fieldSchema?.fieldType;
-		if (ft !== "ImageList" && ft !== "FileList") throw new Error(`"${fieldName}" is not a Type.ImageList or Type.FileList field`);
+		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];
 		let arr = Array.isArray(source) ? source : [];
 		if (arr.length === 0) {
@@ -1060,12 +1294,12 @@ function createEditableBlock(options) {
 			const itemDefault = fieldSchema.items?.default;
 			if (defaultCount > 0 && itemDefault) arr = Array.from({ length: defaultCount }, () => itemDefault);
 		}
-		const resolved = arr.map((v) => isFileMarker(v) ? resolveFileMarker(v, filesMap) : v).filter((v) => v != null && typeof v === "object" && "url" in v);
+		const resolved = arr.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(RepeaterItemContext.Provider, {
+			children: resolved.map((value, index) => /* @__PURE__ */ jsx(RepeatableItemContext.Provider, {
 				value: {
 					arrayFieldName: fieldName,
 					itemIndex: index,
@@ -1083,150 +1317,172 @@ function createEditableBlock(options) {
 	};
 	const ImageList = _AssetList;
 	const FileList = _AssetList;
-	const RepeaterItemWrapper = (t0) => {
-		const $ = c(23);
-		if ($[0] !== "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6") {
-			for (let $i = 0; $i < 23; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6";
-		}
-		const { itemId, blockId, mode, children } = t0;
+	const RepeatableItemWrapper = (t0) => {
+		const $ = c(21);
+		const { itemId, blockId, nesting, mode, children } = t0;
 		const isContentEditable = useIsEditable(mode);
 		const { window: iframeWindow } = useFrame();
-		const selectTarget = usePreviewSelection();
-		const isCommentMode = useSelector(previewStore, selectIsCommentMode);
+		const fragmentRef = React.useRef(null);
+		const registrationRef = React.useRef(null);
 		const [isLocallyHovered, setIsLocallyHovered] = React.useState(false);
-		const isRepeaterHovered = React.useContext(RepeaterHoverContext);
-		let t1;
-		if ($[1] !== blockId || $[2] !== itemId) {
-			t1 = (state) => {
-				const selection = state.context.selection;
-				return selection?.type === "item" && selection.blockId === blockId && selection.itemId === itemId;
-			};
-			$[1] = blockId;
-			$[2] = itemId;
-			$[3] = t1;
-		} else t1 = $[3];
-		const isSelected = useSelector(previewStore, t1);
-		const t2 = String(blockId);
-		const t3 = String(itemId);
-		let t4;
-		if ($[4] !== t2 || $[5] !== t3) {
-			t4 = {
-				blockId: t2,
-				itemId: t3
+		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
 			};
-			$[4] = t2;
-			$[5] = t3;
-			$[6] = t4;
-		} else t4 = $[6];
-		const overlayState = useOverlayState(useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_REPEATER_ITEM", "CAMOX_HOVER_REPEATER_ITEM_END", t4) || isRepeaterHovered || isCommentMode && isLocallyHovered, isSelected);
+			$[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 ($[7] !== blockId || $[8] !== isCommentMode || $[9] !== isContentEditable || $[10] !== itemId || $[11] !== selectTarget) {
-			t5 = (event) => {
-				if (!isContentEditable || !isCommentMode || itemId == null) return;
-				const target = event.target;
-				if (target.closest("[data-camox-field-id]")) return;
-				if (target.closest("[data-camox-repeater-item-id], [data-camox-block-id], [data-camox-comment-block-id]") !== event.currentTarget) return;
-				selectTarget({
-					type: "item",
+		if ($[3] !== hoveredRepeaterGroup || $[4] !== isSelected || $[5] !== t4) {
+			t5 = {
+				hovered: t4,
+				focused: isSelected,
+				hoverGroup: hoveredRepeaterGroup,
+				synced: !!options.synced
+			};
+			$[3] = hoveredRepeaterGroup;
+			$[4] = isSelected;
+			$[5] = t4;
+			$[6] = t5;
+		} else t5 = $[6];
+		const overlayState = t5;
+		const document = iframeWindow?.document;
+		let t6;
+		let t7;
+		if ($[7] !== blockId || $[8] !== document || $[9] !== isContentEditable || $[10] !== itemId || $[11] !== nesting) {
+			t6 = () => {
+				const fragment = fragmentRef.current;
+				if (!isContentEditable || itemId == null || !document || !fragment) return;
+				const registration = registerRepeatableItem(document, {
+					hovered: false,
+					focused: false,
+					hoverGroup: null,
+					synced: false,
+					fragment,
 					blockId,
-					itemId
-				}, event);
+					itemId,
+					nesting
+				});
+				registrationRef.current = registration;
+				return () => {
+					registrationRef.current = null;
+					registration.unregister();
+				};
 			};
+			t7 = [
+				isContentEditable,
+				document,
+				blockId,
+				itemId,
+				nesting
+			];
 			$[7] = blockId;
-			$[8] = isCommentMode;
+			$[8] = document;
 			$[9] = isContentEditable;
 			$[10] = itemId;
-			$[11] = selectTarget;
-			$[12] = t5;
-		} else t5 = $[12];
-		const handleClick = t5;
-		const t6 = isContentEditable ? itemId : void 0;
-		let t7;
-		let t8;
-		if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
-			t7 = () => setIsLocallyHovered(true);
-			t8 = () => setIsLocallyHovered(false);
+			$[11] = nesting;
+			$[12] = t6;
 			$[13] = t7;
-			$[14] = t8;
 		} else {
+			t6 = $[12];
 			t7 = $[13];
-			t8 = $[14];
 		}
-		let t9;
-		if ($[15] !== isContentEditable || $[16] !== overlayState) {
-			t9 = isContentEditable ? overlayState : {};
-			$[15] = isContentEditable;
-			$[16] = overlayState;
-			$[17] = t9;
-		} else t9 = $[17];
+		React.useLayoutEffect(t6, t7);
+		let t8;
+		if ($[14] !== overlayState) {
+			t8 = () => {
+				registrationRef.current?.update(overlayState);
+			};
+			$[14] = overlayState;
+			$[15] = t8;
+		} else t8 = $[15];
+		React.useLayoutEffect(t8);
 		let t10;
-		if ($[18] !== children || $[19] !== handleClick || $[20] !== t6 || $[21] !== t9) {
-			t10 = /* @__PURE__ */ jsx("div", {
-				"data-camox-repeater-item-id": t6,
-				onClickCapture: handleClick,
-				onMouseEnter: t7,
-				onMouseLeave: t8,
-				...t9,
-				"data-camox-overlay-mode": options.synced ? "synced" : void 0,
+		let t9;
+		if ($[16] !== isContentEditable) {
+			t9 = () => {
+				const fragment_0 = fragmentRef.current;
+				if (!isContentEditable || !fragment_0) return;
+				const enter = () => setIsLocallyHovered(true);
+				const leave = () => setIsLocallyHovered(false);
+				fragment_0.addEventListener("mouseenter", enter);
+				fragment_0.addEventListener("mouseleave", leave);
+				return () => {
+					fragment_0.removeEventListener("mouseenter", enter);
+					fragment_0.removeEventListener("mouseleave", leave);
+				};
+			};
+			t10 = [isContentEditable];
+			$[16] = isContentEditable;
+			$[17] = t10;
+			$[18] = t9;
+		} else {
+			t10 = $[17];
+			t9 = $[18];
+		}
+		React.useEffect(t9, t10);
+		let t11;
+		if ($[19] !== children) {
+			t11 = /* @__PURE__ */ jsx(React.Fragment, {
+				ref: fragmentRef,
 				children
 			});
-			$[18] = children;
-			$[19] = handleClick;
-			$[20] = t6;
-			$[21] = t9;
-			$[22] = t10;
-		} else t10 = $[22];
-		return t10;
+			$[19] = children;
+			$[20] = t11;
+		} else t11 = $[20];
+		return t11;
 	};
 	const RepeaterHoverProvider = (t0) => {
-		const $ = c(7);
-		if ($[0] !== "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6") {
-			for (let $i = 0; $i < 7; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6";
-		}
+		const $ = c(6);
 		const { blockId, fieldName, children } = t0;
 		const isContentEditable = useIsEditable("site");
 		const { window: iframeWindow } = useFrame();
+		const hoverGroup = React.useId();
 		const t1 = String(blockId);
 		let t2;
-		if ($[1] !== fieldName || $[2] !== t1) {
+		if ($[0] !== fieldName || $[1] !== t1) {
 			t2 = {
 				blockId: t1,
 				fieldName
 			};
-			$[1] = fieldName;
-			$[2] = t1;
-			$[3] = t2;
-		} else t2 = $[3];
-		const isHovered = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_REPEATER", "CAMOX_HOVER_REPEATER_END", t2);
-		let t3;
-		if ($[4] !== children || $[5] !== isHovered) {
-			t3 = /* @__PURE__ */ jsx(RepeaterHoverContext.Provider, {
-				value: isHovered,
+			$[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,
 				children
 			});
-			$[4] = children;
-			$[5] = isHovered;
-			$[6] = t3;
-		} else t3 = $[6];
-		return t3;
+			$[3] = children;
+			$[4] = t3;
+			$[5] = t4;
+		} else t4 = $[5];
+		return t4;
 	};
 	const Repeater = (t0) => {
-		const $ = c(27);
-		if ($[0] !== "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6") {
-			for (let $i = 0; $i < 27; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6";
-		}
+		const $ = c(29);
 		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, mode } = blockContext;
-		const parentRepeaterContext = React.use(RepeaterItemContext);
+		const parentRepeaterContext = React.use(RepeatableItemContext);
 		const fieldName = String(name);
 		const ItemField = Field;
 		const ItemLink = Link;
 		const ItemEmbed = Embed;
+		const ItemArtifact = Artifact;
 		const ItemImage = Image;
 		const ItemImageList = _AssetList;
 		const ItemFileList = _AssetList;
@@ -1234,30 +1490,38 @@ function createEditableBlock(options) {
 		const ItemRepeater = Repeater;
 		const source = parentRepeaterContext ? parentRepeaterContext.itemContent[name] : content[name];
 		const { itemsMap } = useNormalizedData();
-		let T0;
 		let t1;
+		if ($[0] !== source) {
+			t1 = source ?? [];
+			$[0] = source;
+			$[1] = t1;
+		} else t1 = $[1];
+		const storedValue = t1;
+		if (!Array.isArray(storedValue)) throw new Error(`Field "${String(name)}" is not an array`);
+		let T0;
 		let t2;
 		let t3;
-		if ($[1] !== blockId || $[2] !== children || $[3] !== fieldName || $[4] !== itemsMap || $[5] !== mode || $[6] !== name || $[7] !== parentRepeaterContext?.containerItemId || $[8] !== source) {
-			let arrayValue = source ?? [];
-			if (!Array.isArray(arrayValue)) throw new Error(`Field "${String(name)}" is not an array`);
-			let t4;
+		let t4;
+		if ($[2] !== blockId || $[3] !== children || $[4] !== fieldName || $[5] !== itemsMap || $[6] !== mode || $[7] !== parentRepeaterContext || $[8] !== storedValue) {
+			let t5;
 			if ($[13] !== itemsMap) {
-				t4 = (item) => {
+				t5 = (item) => {
 					if (isItemMarker(item)) return itemsMap.get(item._itemId) ?? null;
 					return item;
 				};
 				$[13] = itemsMap;
-				$[14] = t4;
-			} else t4 = $[14];
-			arrayValue = arrayValue.map(t4).filter(Boolean);
+				$[14] = t5;
+			} else t5 = $[14];
+			const arrayValue = storedValue.map(t5).filter(Boolean);
 			const settingsDefaultsForField = repeatableItemSettingsDefaults[fieldName];
+			const itemSchema = (parentRepeaterContext ? parentRepeaterContext.itemSchema?.[fieldName] : typeboxSchema.properties[fieldName])?.items?.properties;
+			const nesting = parentRepeaterContext ? (parentRepeaterContext.nesting ?? 0) + 1 : 0;
 			T0 = RepeaterHoverProvider;
-			t1 = blockId;
-			t2 = fieldName;
-			let t5;
-			if ($[15] !== blockId || $[16] !== children || $[17] !== fieldName || $[18] !== mode || $[19] !== parentRepeaterContext?.containerItemId || $[20] !== settingsDefaultsForField) {
-				t5 = (item_0, index) => {
+			t2 = blockId;
+			t3 = fieldName;
+			let t6;
+			if ($[15] !== blockId || $[16] !== children || $[17] !== fieldName || $[18] !== itemSchema || $[19] !== mode || $[20] !== nesting || $[21] !== parentRepeaterContext?.containerItemId || $[22] !== settingsDefaultsForField) {
+				t6 = (item_0, index) => {
 					const isDbItem = item_0.content !== void 0 && item_0.id != null;
 					const itemContent = {
 						...repeatableItemDefaults[fieldName],
@@ -1274,25 +1538,31 @@ function createEditableBlock(options) {
 						Link: ItemLink,
 						Icon,
 						Embed: ItemEmbed,
+						Artifact: ItemArtifact,
 						Image: ItemImage,
 						File: ItemFile,
 						ImageList: ItemImageList,
 						FileList: ItemFileList,
 						Repeater: ItemRepeater,
+						Reference,
+						ReferenceList,
 						useSetting: useItemSetting
 					};
-					return /* @__PURE__ */ jsx(RepeaterItemContext.Provider, {
+					return /* @__PURE__ */ jsx(RepeatableItemContext.Provider, {
 						value: {
 							arrayFieldName: fieldName,
 							itemIndex: index,
 							itemContent,
 							itemSettings,
 							itemId,
-							containerItemId: itemId ?? parentRepeaterContext?.containerItemId
+							containerItemId: itemId ?? parentRepeaterContext?.containerItemId,
+							itemSchema,
+							nesting
 						},
-						children: /* @__PURE__ */ jsx(RepeaterItemWrapper, {
+						children: /* @__PURE__ */ jsx(RepeatableItemWrapper, {
 							itemId,
 							blockId,
+							nesting,
 							mode,
 							children: children(itemApi, index)
 						})
@@ -1301,486 +1571,1269 @@ function createEditableBlock(options) {
 				$[15] = blockId;
 				$[16] = children;
 				$[17] = fieldName;
-				$[18] = mode;
-				$[19] = parentRepeaterContext?.containerItemId;
-				$[20] = settingsDefaultsForField;
-				$[21] = t5;
-			} else t5 = $[21];
-			t3 = arrayValue.map(t5);
-			$[1] = blockId;
-			$[2] = children;
-			$[3] = fieldName;
-			$[4] = itemsMap;
-			$[5] = mode;
-			$[6] = name;
-			$[7] = parentRepeaterContext?.containerItemId;
-			$[8] = source;
+				$[18] = itemSchema;
+				$[19] = mode;
+				$[20] = nesting;
+				$[21] = parentRepeaterContext?.containerItemId;
+				$[22] = settingsDefaultsForField;
+				$[23] = t6;
+			} else t6 = $[23];
+			t4 = arrayValue.map(t6);
+			$[2] = blockId;
+			$[3] = children;
+			$[4] = fieldName;
+			$[5] = itemsMap;
+			$[6] = mode;
+			$[7] = parentRepeaterContext;
+			$[8] = storedValue;
 			$[9] = T0;
-			$[10] = t1;
-			$[11] = t2;
-			$[12] = t3;
+			$[10] = t2;
+			$[11] = t3;
+			$[12] = t4;
 		} else {
 			T0 = $[9];
-			t1 = $[10];
-			t2 = $[11];
-			t3 = $[12];
+			t2 = $[10];
+			t3 = $[11];
+			t4 = $[12];
 		}
-		let t4;
-		if ($[22] !== T0 || $[23] !== t1 || $[24] !== t2 || $[25] !== t3) {
-			t4 = /* @__PURE__ */ jsx(T0, {
-				blockId: t1,
-				fieldName: t2,
-				children: t3
+		let t5;
+		if ($[24] !== T0 || $[25] !== t2 || $[26] !== t3 || $[27] !== t4) {
+			t5 = /* @__PURE__ */ jsx(T0, {
+				blockId: t2,
+				fieldName: t3,
+				children: t4
 			});
-			$[22] = T0;
-			$[23] = t1;
-			$[24] = t2;
-			$[25] = t3;
-			$[26] = t4;
-		} else t4 = $[26];
-		return t4;
+			$[24] = T0;
+			$[25] = t2;
+			$[26] = t3;
+			$[27] = t4;
+			$[28] = t5;
+		} else t5 = $[28];
+		return t5;
 	};
 	const BlockComponent = (t0) => {
-		const $ = c(74);
-		if ($[0] !== "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6") {
-			for (let $i = 0; $i < 74; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6";
-		}
+		const $ = c(62);
 		const { blockData, mode, isFirstBlock, showAddBlockTop, showAddBlockBottom, addBlockAfterPosition } = t0;
 		const isContentEditable = useIsEditable(mode);
 		const { window: iframeWindow } = useFrame();
 		const [isHovered, setIsHovered] = React.useState(false);
-		const isCommentMode = useSelector(previewStore, selectIsCommentMode);
-		const selection = useSelector(previewStore, _temp5);
-		const isAddBlockSidebarOpen = useSelector(previewStore, _temp6);
+		const selection = usePreviewTargetSelection();
 		const selectTarget = usePreviewSelection();
-		const isBlockSelected = selection?.blockId === blockData._id;
-		const overlayState = useOverlayState(isHovered && !isBlockSelected, isBlockSelected);
-		const ref = React.useRef(null);
-		const [isFirstRender, setIsFirstRender] = React.useState(true);
 		let t1;
+		if ($[0] !== selection) {
+			t1 = selectionBlockId(selection);
+			$[0] = selection;
+			$[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);
 		let t2;
-		if ($[1] !== isFirstRender) {
-			t1 = () => {
-				if (isFirstRender) setIsFirstRender(false);
-			};
-			t2 = [isFirstRender];
-			$[1] = isFirstRender;
-			$[2] = t1;
-			$[3] = t2;
-		} else {
-			t1 = $[2];
-			t2 = $[3];
-		}
-		React.useEffect(t1, t2);
-		let t3;
-		if ($[4] !== isBlockSelected || $[5] !== isFirstRender) {
-			t3 = () => {
-				if (!isBlockSelected || !ref.current) return;
-				ref.current.scrollIntoView({
-					behavior: isFirstRender ? "instant" : "smooth",
-					block: isFirstRender ? "start" : "nearest"
+		if ($[2] !== canvasWorkspace || $[3] !== isBlockSelected) {
+			t2 = () => {
+				const element = ref.current;
+				const immediate = !mounted.current;
+				mounted.current = true;
+				if (!isBlockSelected || !element) return;
+				if (canvasWorkspace) {
+					canvasWorkspace.reveal(element, immediate);
+					return;
+				}
+				const view = element.ownerDocument.defaultView;
+				if (!view) return;
+				const rect = element.getBoundingClientRect();
+				const top = revealScrollDelta(rect, {
+					top: 0,
+					bottom: view.innerHeight
+				});
+				if (top) view.scrollBy({
+					top,
+					behavior: immediate ? "instant" : "smooth"
 				});
 			};
-			$[4] = isBlockSelected;
-			$[5] = isFirstRender;
-			$[6] = t3;
-		} else t3 = $[6];
-		let t4;
-		if ($[7] !== blockData._id || $[8] !== isBlockSelected || $[9] !== isFirstRender) {
-			t4 = [
+			$[2] = canvasWorkspace;
+			$[3] = isBlockSelected;
+			$[4] = t2;
+		} else t2 = $[4];
+		let t3;
+		if ($[5] !== blockData._id || $[6] !== canvasWorkspace || $[7] !== isBlockSelected) {
+			t3 = [
 				blockData._id,
 				isBlockSelected,
-				isFirstRender
+				canvasWorkspace
 			];
-			$[7] = blockData._id;
-			$[8] = isBlockSelected;
-			$[9] = isFirstRender;
-			$[10] = t4;
-		} else t4 = $[10];
-		React.useEffect(t3, t4);
-		const t5 = String(blockData._id);
-		let t6;
-		if ($[11] !== t5) {
-			t6 = { blockId: t5 };
-			$[11] = t5;
-			$[12] = t6;
-		} else t6 = $[12];
-		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_BLOCK", "CAMOX_HOVER_BLOCK_END", t6);
-		let t7;
-		let t8;
-		if ($[13] !== isHoveredFromSidebar) {
-			t7 = () => {
-				setIsHovered(isHoveredFromSidebar);
-			};
-			t8 = [isHoveredFromSidebar];
-			$[13] = isHoveredFromSidebar;
-			$[14] = t7;
-			$[15] = t8;
-		} else {
-			t7 = $[14];
-			t8 = $[15];
+			$[5] = blockData._id;
+			$[6] = canvasWorkspace;
+			$[7] = isBlockSelected;
+			$[8] = t3;
+		} else t3 = $[8];
+		React.useEffect(t2, t3);
+		const t4 = String(blockData._id);
+		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);
 		}
-		React.useEffect(t7, t8);
 		let result;
-		if ($[16] !== blockData.content) {
+		if ($[11] !== blockData.content) {
 			result = { ...blockData.content };
 			for (const key in result) {
 				const value = result[key];
 				if (Array.isArray(value) && value.length > 0 && value[0]?.content !== void 0) result[key] = value.map(_temp7);
 			}
-			$[16] = blockData.content;
-			$[17] = result;
-		} else result = $[17];
+			$[11] = blockData.content;
+			$[12] = result;
+		} else result = $[12];
 		const normalizedContent = result;
-		let t9;
-		if ($[18] !== blockData._id || $[19] !== isCommentMode || $[20] !== isContentEditable || $[21] !== selectTarget) {
-			t9 = (e) => {
+		let t6;
+		if ($[13] !== blockData._id || $[14] !== isContentEditable || $[15] !== selectTarget) {
+			t6 = (e) => {
 				if (!isContentEditable) return;
 				const target = e.target;
 				if (target.closest("[data-camox-field-id]")) return;
-				if (isCommentMode && target.closest("[data-camox-repeater-item-id]")) return;
-				if (target.closest("[data-camox-block-id], [data-camox-comment-block-id]") !== e.currentTarget) return;
+				if (target.closest("[data-camox-block-id]") !== e.currentTarget) return;
 				selectTarget({
 					type: "block",
 					blockId: blockData._id
-				}, e);
+				});
 			};
-			$[18] = blockData._id;
-			$[19] = isCommentMode;
-			$[20] = isContentEditable;
-			$[21] = selectTarget;
-			$[22] = t9;
-		} else t9 = $[22];
-		const handleClick = t9;
-		let t10;
-		if ($[23] !== isContentEditable) {
-			t10 = () => {
-				if (isContentEditable) setIsHovered(true);
+			$[13] = blockData._id;
+			$[14] = isContentEditable;
+			$[15] = selectTarget;
+			$[16] = t6;
+		} else t6 = $[16];
+		const handleClick = t6;
+		let t7;
+		if ($[17] !== isContentEditable) {
+			t7 = () => {
+				if (!isContentEditable) return;
+				setIsHovered(true);
 			};
-			$[23] = isContentEditable;
-			$[24] = t10;
-		} else t10 = $[24];
-		const handleMouseEnter = t10;
-		let t11;
-		if ($[25] !== isContentEditable) {
-			t11 = () => {
-				if (isContentEditable) setIsHovered(false);
+			$[17] = isContentEditable;
+			$[18] = t7;
+		} else t7 = $[18];
+		const handleMouseEnter = t7;
+		let t8;
+		if ($[19] !== isContentEditable) {
+			t8 = () => {
+				if (!isContentEditable) return;
+				setIsHovered(false);
 			};
-			$[25] = isContentEditable;
-			$[26] = t11;
-		} else t11 = $[26];
-		const handleMouseLeave = t11;
-		let t12;
-		if ($[27] !== addBlockAfterPosition || $[28] !== blockData.position) {
-			t12 = (insertPosition) => {
-				postOverlayMessage({
-					type: "CAMOX_ADD_BLOCK_REQUEST",
-					blockPosition: blockData.position,
-					insertPosition,
-					...addBlockAfterPosition !== void 0 && { afterPosition: addBlockAfterPosition }
-				});
+			$[19] = isContentEditable;
+			$[20] = t8;
+		} else t8 = $[20];
+		const handleMouseLeave = t8;
+		const shouldShowOverlay = isContentEditable && (overlayState["data-camox-hovered"] || overlayState["data-camox-focused"]);
+		const t9 = blockData._id;
+		let t10;
+		if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+			t10 = {
+				position: "relative",
+				scrollMargin: "5rem"
 			};
-			$[27] = addBlockAfterPosition;
-			$[28] = blockData.position;
+			$[21] = t10;
+		} else t10 = $[21];
+		const t11 = isContentEditable ? blockData._id : void 0;
+		let t12;
+		if ($[22] !== addBlockAfterPosition || $[23] !== blockData.position || $[24] !== isContentEditable || $[25] !== isFirstBlock || $[26] !== mode || $[27] !== showAddBlockBottom || $[28] !== showAddBlockTop) {
+			t12 = isContentEditable ? JSON.stringify({
+				position: blockData.position,
+				before: showAddBlockTop ?? (mode !== "layout" && !isFirstBlock),
+				after: showAddBlockBottom ?? mode !== "layout",
+				...addBlockAfterPosition !== void 0 ? { afterPosition: addBlockAfterPosition } : {}
+			}) : void 0;
+			$[22] = addBlockAfterPosition;
+			$[23] = blockData.position;
+			$[24] = isContentEditable;
+			$[25] = isFirstBlock;
+			$[26] = mode;
+			$[27] = showAddBlockBottom;
+			$[28] = showAddBlockTop;
 			$[29] = t12;
 		} else t12 = $[29];
-		const handleAddBlockClick = t12;
-		const shouldShowOverlay = isContentEditable && (overlayState["data-camox-hovered"] || overlayState["data-camox-focused"]) && !isAddBlockSidebarOpen;
-		const shouldShowAddBlockOverlay = isAddBlockSidebarOpen && mode !== "peek";
 		let t13;
-		if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
-			t13 = {
-				position: "relative",
-				scrollMargin: "5rem",
-				background: "var(--background)"
-			};
-			$[30] = t13;
-		} else t13 = $[30];
-		const t14 = isContentEditable ? blockData._id : void 0;
+		if ($[30] !== overlayState || $[31] !== shouldShowOverlay) {
+			t13 = shouldShowOverlay ? overlayState : {};
+			$[30] = overlayState;
+			$[31] = shouldShowOverlay;
+			$[32] = t13;
+		} else t13 = $[32];
+		const t14 = blockData._id;
 		let t15;
-		if ($[31] !== overlayState || $[32] !== shouldShowOverlay) {
-			t15 = shouldShowOverlay ? overlayState : {};
-			$[31] = overlayState;
-			$[32] = shouldShowOverlay;
-			$[33] = t15;
-		} else t15 = $[33];
-		const t16 = blockData._id;
-		let t17;
-		if ($[34] !== blockData.content) {
-			t17 = {
+		if ($[33] !== blockData.content) {
+			t15 = {
 				...contentDefaults,
 				...blockData.content
 			};
-			$[34] = blockData.content;
-			$[35] = t17;
-		} else t17 = $[35];
-		const merged = t17;
+			$[33] = blockData.content;
+			$[34] = t15;
+		} else t15 = $[34];
+		const merged = t15;
 		let overrides;
-		if ($[36] !== merged) {
+		if ($[35] !== merged) {
 			overrides = {};
 			for (const key_0 in merged) {
 				const val = merged[key_0];
 				if (val && typeof val === "object" && "url" in val && !val.url && contentDefaults[key_0]) overrides[key_0] = contentDefaults[key_0];
 			}
-			$[36] = merged;
-			$[37] = overrides;
-		} else overrides = $[37];
-		let t18;
-		if ($[38] !== merged || $[39] !== overrides) {
-			t18 = {
+			$[35] = merged;
+			$[36] = overrides;
+		} else overrides = $[36];
+		let t16;
+		if ($[37] !== merged || $[38] !== overrides) {
+			t16 = {
 				...merged,
 				...overrides
 			};
-			$[38] = merged;
-			$[39] = overrides;
-			$[40] = t18;
-		} else t18 = $[40];
-		const t19 = t18;
-		let t20;
-		if ($[41] !== blockData.settings) {
-			t20 = {
+			$[37] = merged;
+			$[38] = overrides;
+			$[39] = t16;
+		} else t16 = $[39];
+		const t17 = t16;
+		let t18;
+		if ($[40] !== blockData.settings) {
+			t18 = {
 				...settingsDefaults,
 				...blockData.settings
 			};
-			$[41] = blockData.settings;
-			$[42] = t20;
-		} else t20 = $[42];
-		const t21 = t20;
-		let t22;
-		if ($[43] !== blockData._id || $[44] !== isHovered || $[45] !== mode || $[46] !== t19 || $[47] !== t21) {
-			t22 = {
-				blockId: t16,
-				content: t19,
-				settings: t21,
+			$[40] = blockData.settings;
+			$[41] = t18;
+		} else t18 = $[41];
+		const t19 = t18;
+		let t20;
+		if ($[42] !== blockData._id || $[43] !== isHovered || $[44] !== mode || $[45] !== t17 || $[46] !== t19) {
+			t20 = {
+				blockId: t14,
+				content: t17,
+				settings: t19,
 				mode,
 				isHovered,
 				setIsHovered
 			};
-			$[43] = blockData._id;
-			$[44] = isHovered;
-			$[45] = mode;
+			$[42] = blockData._id;
+			$[43] = isHovered;
+			$[44] = mode;
+			$[45] = t17;
 			$[46] = t19;
-			$[47] = t21;
-			$[48] = t22;
-		} else t22 = $[48];
-		let t23;
-		if ($[49] !== normalizedContent) {
-			t23 = /* @__PURE__ */ jsx(options.component, { content: normalizedContent });
-			$[49] = normalizedContent;
-			$[50] = t23;
-		} else t23 = $[50];
-		let t24;
-		if ($[51] !== t22 || $[52] !== t23) {
-			t24 = /* @__PURE__ */ jsx(Context.Provider, {
-				value: t22,
-				children: t23
-			});
-			$[51] = t22;
-			$[52] = t23;
-			$[53] = t24;
-		} else t24 = $[53];
-		const t25 = shouldShowAddBlockOverlay || void 0;
-		let t26;
-		if ($[54] !== t25) {
-			t26 = /* @__PURE__ */ jsx("div", {
-				className: "camox-sheet-overlay",
-				"data-camox-visible": t25
+			$[47] = t20;
+		} else t20 = $[47];
+		let t21;
+		if ($[48] !== normalizedContent) {
+			t21 = /* @__PURE__ */ jsx(options.component, { content: normalizedContent });
+			$[48] = normalizedContent;
+			$[49] = t21;
+		} else t21 = $[49];
+		let t22;
+		if ($[50] !== t20 || $[51] !== t21) {
+			t22 = /* @__PURE__ */ jsx(Context.Provider, {
+				value: t20,
+				children: t21
 			});
-			$[54] = t25;
-			$[55] = t26;
-		} else t26 = $[55];
-		let t27;
-		if ($[56] !== handleAddBlockClick || $[57] !== isAddBlockSidebarOpen || $[58] !== isCommentMode || $[59] !== isFirstBlock || $[60] !== mode || $[61] !== shouldShowOverlay || $[62] !== showAddBlockBottom || $[63] !== showAddBlockTop) {
-			t27 = shouldShowOverlay && !isCommentMode && /* @__PURE__ */ jsxs(Fragment, { children: [(showAddBlockTop ?? (mode !== "layout" && !isFirstBlock)) && /* @__PURE__ */ jsx(AddBlockControlBar, {
-				position: "top",
-				hidden: isAddBlockSidebarOpen,
-				onMouseLeave: () => setIsHovered(false),
-				onClick: () => handleAddBlockClick("before")
-			}), (showAddBlockBottom ?? mode !== "layout") && /* @__PURE__ */ jsx(AddBlockControlBar, {
-				position: "bottom",
-				hidden: isAddBlockSidebarOpen,
-				onMouseLeave: () => setIsHovered(false),
-				onClick: () => handleAddBlockClick("after")
-			})] });
-			$[56] = handleAddBlockClick;
-			$[57] = isAddBlockSidebarOpen;
-			$[58] = isCommentMode;
-			$[59] = isFirstBlock;
-			$[60] = mode;
-			$[61] = shouldShowOverlay;
-			$[62] = showAddBlockBottom;
-			$[63] = showAddBlockTop;
-			$[64] = t27;
-		} else t27 = $[64];
-		let t28;
-		if ($[65] !== handleClick || $[66] !== handleMouseEnter || $[67] !== handleMouseLeave || $[68] !== t14 || $[69] !== t15 || $[70] !== t24 || $[71] !== t26 || $[72] !== t27) {
-			t28 = /* @__PURE__ */ jsxs("div", {
+			$[50] = t20;
+			$[51] = t21;
+			$[52] = t22;
+		} else t22 = $[52];
+		let t23;
+		if ($[53] !== blockData._id || $[54] !== handleClick || $[55] !== handleMouseEnter || $[56] !== handleMouseLeave || $[57] !== t11 || $[58] !== t12 || $[59] !== t13 || $[60] !== t22) {
+			t23 = /* @__PURE__ */ jsx("div", {
 				className: "group visual-editing-block",
+				"data-camox-viewport-block": t9,
 				ref,
-				style: t13,
-				"data-camox-block-id": t14,
-				...t15,
+				style: t10,
+				"data-camox-block-id": t11,
+				"data-camox-block-insertion": t12,
+				...t13,
 				"data-camox-overlay-mode": options.synced ? "synced" : void 0,
 				onClickCapture: handleClick,
 				onMouseEnter: handleMouseEnter,
 				onMouseLeave: handleMouseLeave,
-				children: [
-					t24,
-					t26,
-					t27
-				]
+				children: t22
 			});
-			$[65] = handleClick;
-			$[66] = handleMouseEnter;
-			$[67] = handleMouseLeave;
-			$[68] = t14;
-			$[69] = t15;
-			$[70] = t24;
-			$[71] = t26;
-			$[72] = t27;
-			$[73] = t28;
-		} else t28 = $[73];
-		return t28;
+			$[53] = blockData._id;
+			$[54] = handleClick;
+			$[55] = handleMouseEnter;
+			$[56] = handleMouseLeave;
+			$[57] = t11;
+			$[58] = t12;
+			$[59] = t13;
+			$[60] = t22;
+			$[61] = t23;
+		} else t23 = $[61];
+		return t23;
 	};
 	const useSetting = (name) => {
 		const ctx = React.use(Context);
 		if (!ctx) throw new Error("useSetting must be used within a Block Component");
 		return ctx.settings[name];
 	};
-	/**
-	* Wraps block content that renders outside the block's visual bounds (fixed navbars, modals, portals, etc.).
-	* Provides the same hover, selection, and sheet overlays as the main BlockComponent.
-	*/
-	const Detached = (t0) => {
-		const $ = c(32);
-		if ($[0] !== "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6") {
-			for (let $i = 0; $i < 32; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6";
+	const ReferencePrimitive = (t0) => {
+		const $ = c(6);
+		let Primitive;
+		let props;
+		if ($[0] !== t0) {
+			({primitive: Primitive, ...props} = t0);
+			$[0] = t0;
+			$[1] = Primitive;
+			$[2] = props;
+		} else {
+			Primitive = $[1];
+			props = $[2];
 		}
+		if (React.use(Context).content[props.name] == null) return null;
+		let t1;
+		if ($[3] !== Primitive || $[4] !== props) {
+			t1 = /* @__PURE__ */ jsx(Primitive, { ...props });
+			$[3] = Primitive;
+			$[4] = props;
+			$[5] = t1;
+		} else t1 = $[5];
+		return t1;
+	};
+	const ReferenceImage = (props) => {
+		const $ = c(2);
+		let t0;
+		if ($[0] !== props) {
+			t0 = /* @__PURE__ */ jsx(ReferencePrimitive, {
+				primitive: Image,
+				...props
+			});
+			$[0] = props;
+			$[1] = t0;
+		} else t0 = $[1];
+		return t0;
+	};
+	const ReferenceFile = (props) => {
+		const $ = c(2);
+		let t0;
+		if ($[0] !== props) {
+			t0 = /* @__PURE__ */ jsx(ReferencePrimitive, {
+				primitive: File,
+				...props
+			});
+			$[0] = props;
+			$[1] = t0;
+		} else t0 = $[1];
+		return t0;
+	};
+	const ReferenceEmbed = (props) => {
+		const $ = c(2);
+		let t0;
+		if ($[0] !== props) {
+			t0 = /* @__PURE__ */ jsx(ReferencePrimitive, {
+				primitive: Embed,
+				...props
+			});
+			$[0] = props;
+			$[1] = t0;
+		} else t0 = $[1];
+		return t0;
+	};
+	const ReferenceImageList = (props) => {
+		const $ = c(2);
+		let t0;
+		if ($[0] !== props) {
+			t0 = /* @__PURE__ */ jsx(ReferencePrimitive, {
+				primitive: ImageList,
+				...props
+			});
+			$[0] = props;
+			$[1] = t0;
+		} else t0 = $[1];
+		return t0;
+	};
+	const ReferenceFileList = (props) => {
+		const $ = c(2);
+		let t0;
+		if ($[0] !== props) {
+			t0 = /* @__PURE__ */ jsx(ReferencePrimitive, {
+				primitive: FileList,
+				...props
+			});
+			$[0] = props;
+			$[1] = t0;
+		} 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(40);
+		const studioCache = useStudioCache();
+		const selectTarget = usePreviewSelection();
+		const projectUuid = useProjectUuid();
+		const queryClient = useQueryClient();
+		let t0;
+		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+			t0 = collectionMutations.edit();
+			$[0] = t0;
+		} else t0 = $[0];
+		const mutation = useMutation(t0);
+		const [error, setError] = React.useState(null);
+		const [pointerHovered, setPointerHovered] = React.useState(false);
+		const editable = useIsEditable(block.mode);
+		let t1;
+		if ($[1] !== block || $[2] !== fieldName || $[3] !== owner || $[4] !== record) {
+			t1 = record ? placementOf(block, owner, fieldName, record.id) : null;
+			$[1] = block;
+			$[2] = fieldName;
+			$[3] = owner;
+			$[4] = record;
+			$[5] = t1;
+		} else t1 = $[5];
+		const placement = t1;
+		const selected = useRecordSelection(placement);
+		const { window: iframeWindow } = useFrame();
+		let t2;
+		if ($[6] !== placement) {
+			t2 = placement ? recordPlacementId(placement) : void 0;
+			$[6] = placement;
+			$[7] = t2;
+		} else t2 = $[7];
+		let t3;
+		if ($[8] !== t2) {
+			t3 = { fieldId: t2 };
+			$[8] = t2;
+			$[9] = t3;
+		} else t3 = $[9];
+		const sidebarHovered = useOverlayMessage(iframeWindow, editable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", t3);
+		let t4;
+		if ($[10] !== editable || $[11] !== placement || $[12] !== selectTarget) {
+			t4 = (event) => {
+				if (!editable || !placement) return;
+				if (event.target.closest("[data-camox-field-id]") !== event.currentTarget) return;
+				selectTarget({
+					type: "record",
+					...placement
+				});
+			};
+			$[10] = editable;
+			$[11] = placement;
+			$[12] = selectTarget;
+			$[13] = t4;
+		} else t4 = $[13];
+		const selectRecord = t4;
+		let t5;
+		if ($[14] !== editable || $[15] !== placement || $[16] !== selectTarget) {
+			t5 = (recordFieldName, recordFieldType) => {
+				if (!editable || !placement) return;
+				selectTarget({
+					type: "record-field",
+					...placement,
+					recordFieldName,
+					recordFieldType
+				});
+			};
+			$[14] = editable;
+			$[15] = placement;
+			$[16] = selectTarget;
+			$[17] = t5;
+		} else t5 = $[17];
+		const selectRecordField = t5;
+		let t6;
+		if ($[18] !== editable || $[19] !== mutation || $[20] !== projectUuid || $[21] !== queryClient || $[22] !== record || $[23] !== studioCache) {
+			t6 = (field, value) => {
+				if (!record || !editable) return;
+				setError(null);
+				referenceWritesFor(queryClient).save(record, field, value, async (input) => {
+					const saved = await mutation.mutateAsync({
+						...input,
+						projectUuid
+					});
+					studioCache.set(reads.record({
+						projectUuid,
+						collectionId: record.collectionId,
+						id: record.id
+					}), saved);
+					invalidateCollectionRecordViews(studioCache, projectUuid, record.collectionId);
+					return saved;
+				}).catch((cause) => {
+					setError(cause instanceof Error ? cause.message : "Could not save item");
+				});
+			};
+			$[18] = editable;
+			$[19] = mutation;
+			$[20] = projectUuid;
+			$[21] = queryClient;
+			$[22] = record;
+			$[23] = studioCache;
+			$[24] = t6;
+		} else t6 = $[24];
+		const update = t6;
+		const t7 = pointerHovered || sidebarHovered;
+		let t8;
+		if ($[25] !== placement || $[26] !== selectRecordField || $[27] !== update) {
+			t8 = placement ? {
+				placement,
+				selectRecordField,
+				update
+			} : null;
+			$[25] = placement;
+			$[26] = selectRecordField;
+			$[27] = update;
+			$[28] = t8;
+		} else t8 = $[28];
+		let t10;
+		let t9;
+		if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+			t9 = () => setPointerHovered(true);
+			t10 = () => setPointerHovered(false);
+			$[29] = t10;
+			$[30] = t9;
+		} else {
+			t10 = $[29];
+			t9 = $[30];
+		}
+		let t11;
+		if ($[31] !== selectRecord) {
+			t11 = {
+				onClickCapture: selectRecord,
+				onMouseEnter: t9,
+				onMouseLeave: t10
+			};
+			$[31] = selectRecord;
+			$[32] = t11;
+		} else t11 = $[32];
+		let t12;
+		if ($[33] !== editable || $[34] !== error || $[35] !== selected || $[36] !== t11 || $[37] !== t7 || $[38] !== t8) {
+			t12 = {
+				editable,
+				error,
+				selected,
+				hovered: t7,
+				reference: t8,
+				wrapperProps: t11
+			};
+			$[33] = editable;
+			$[34] = error;
+			$[35] = selected;
+			$[36] = t11;
+			$[37] = t7;
+			$[38] = t8;
+			$[39] = t12;
+		} else t12 = $[39];
+		return t12;
+	};
+	const RecordScope = (t0) => {
+		const $ = c(15);
+		const { block, field, record, reference, children } = t0;
+		const t1 = record.content;
+		let t2;
+		if ($[0] !== block || $[1] !== field.referenceSchema.properties || $[2] !== t1) {
+			t2 = {
+				...block,
+				content: t1,
+				sourceSchema: field.referenceSchema.properties
+			};
+			$[0] = block;
+			$[1] = field.referenceSchema.properties;
+			$[2] = t1;
+			$[3] = t2;
+		} else t2 = $[3];
+		let t3;
+		if ($[4] !== children || $[5] !== record.id || $[6] !== record.label || $[7] !== reference.placement.nested) {
+			t3 = children({
+				id: record.id,
+				label: record.label,
+				Field,
+				Image: ReferenceImage,
+				File: ReferenceFile,
+				Embed: ReferenceEmbed,
+				ImageList: ReferenceImageList,
+				FileList: ReferenceFileList,
+				...reference.placement.nested ? {} : {
+					Reference,
+					ReferenceList
+				}
+			});
+			$[4] = children;
+			$[5] = record.id;
+			$[6] = record.label;
+			$[7] = reference.placement.nested;
+			$[8] = t3;
+		} else t3 = $[8];
+		let t4;
+		if ($[9] !== t2 || $[10] !== t3) {
+			t4 = /* @__PURE__ */ jsx(RepeatableItemContext.Provider, {
+				value: null,
+				children: /* @__PURE__ */ jsx(Context.Provider, {
+					value: t2,
+					children: t3
+				})
+			});
+			$[9] = t2;
+			$[10] = t3;
+			$[11] = t4;
+		} else t4 = $[11];
+		let t5;
+		if ($[12] !== reference || $[13] !== t4) {
+			t5 = /* @__PURE__ */ jsx(ReferenceContext.Provider, {
+				value: reference,
+				children: t4
+			});
+			$[12] = reference;
+			$[13] = t4;
+			$[14] = t5;
+		} else t5 = $[14];
+		return t5;
+	};
+	const useCollectionTitle = (fieldName, field) => {
+		const $ = c(4);
+		const camoxApp = useOptionalCamoxApp();
+		let t0;
+		if ($[0] !== camoxApp || $[1] !== field || $[2] !== fieldName) {
+			t0 = camoxApp?.getCollectionById(field.collectionId)?._internal.title ?? field.title ?? fieldName;
+			$[0] = camoxApp;
+			$[1] = field;
+			$[2] = fieldName;
+			$[3] = t0;
+		} else t0 = $[3];
+		return t0;
+	};
+	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);
+		const fieldSelection = outer ? {
+			type: "record-field",
+			...outer,
+			recordFieldName: fieldName,
+			recordFieldType: fieldType
+		} : owner.itemId == null ? {
+			type: "block-field",
+			blockId: block.blockId,
+			fieldName,
+			fieldType
+		} : {
+			type: "item-field",
+			blockId: block.blockId,
+			itemId: owner.itemId,
+			fieldName,
+			fieldType
+		};
+		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 }),
+			fieldSelection,
+			fieldSelected: outer ? recordFieldSelected : blockFieldSelected
+		};
+	};
+	const ReferencePlaceholder = (t0) => {
+		const $ = c(13);
+		let children;
+		let fieldId;
+		let fieldSelection;
+		let props;
+		if ($[0] !== t0) {
+			({fieldId, fieldSelection, children, ...props} = t0);
+			$[0] = t0;
+			$[1] = children;
+			$[2] = fieldId;
+			$[3] = fieldSelection;
+			$[4] = props;
+		} else {
+			children = $[1];
+			fieldId = $[2];
+			fieldSelection = $[3];
+			props = $[4];
+		}
+		const selectTarget = usePreviewSelection();
+		let t1;
+		if ($[5] !== fieldId || $[6] !== fieldSelection || $[7] !== selectTarget) {
+			t1 = () => {
+				selectTarget(fieldSelection);
+				referencePickerFocus.send({
+					type: "request",
+					fieldId
+				});
+			};
+			$[5] = fieldId;
+			$[6] = fieldSelection;
+			$[7] = selectTarget;
+			$[8] = t1;
+		} else t1 = $[8];
+		let t2;
+		if ($[9] !== children || $[10] !== props || $[11] !== t1) {
+			t2 = /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-camox-reference-placeholder": "",
+				className: "camox-reference-placeholder",
+				...props,
+				onClick: t1,
+				children
+			});
+			$[9] = children;
+			$[10] = props;
+			$[11] = t1;
+			$[12] = t2;
+		} else t2 = $[12];
+		return t2;
+	};
+	const PlacedRecordWrapper = (t0) => {
+		const $ = c(10);
+		const { fieldId, record, placedRecord, overlay, children } = t0;
+		const t1 = record?.id;
+		const t2 = record?.label;
+		let t3;
+		if ($[0] !== placedRecord.error) {
+			t3 = placedRecord.error && /* @__PURE__ */ jsxs("p", {
+				role: "alert",
+				children: ["Could not save item. ", placedRecord.error]
+			});
+			$[0] = placedRecord.error;
+			$[1] = t3;
+		} else t3 = $[1];
+		let t4;
+		if ($[2] !== children || $[3] !== fieldId || $[4] !== overlay || $[5] !== placedRecord.wrapperProps || $[6] !== t1 || $[7] !== t2 || $[8] !== t3) {
+			t4 = /* @__PURE__ */ jsxs("div", {
+				"data-camox-field-id": fieldId,
+				"data-camox-collection-record-id": t1,
+				"data-camox-reference-label": t2,
+				"data-camox-overlay-mode": "reference",
+				...overlay,
+				...placedRecord.wrapperProps,
+				children: [children, t3]
+			});
+			$[2] = children;
+			$[3] = fieldId;
+			$[4] = overlay;
+			$[5] = placedRecord.wrapperProps;
+			$[6] = t1;
+			$[7] = t2;
+			$[8] = t3;
+			$[9] = t4;
+		} else t4 = $[9];
+		return t4;
+	};
+	const Reference = (t0) => {
+		const $ = c(21);
+		const { name, children } = t0;
+		const block = React.use(Context);
+		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, fieldSelection, fieldSelected } = useReferenceField(block, fieldName);
+		const collectionTitle = useCollectionTitle(fieldName, field);
+		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;
+		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 && !editable) return null;
+		let t3;
+		if ($[6] !== block || $[7] !== children || $[8] !== collectionTitle || $[9] !== field || $[10] !== fieldId || $[11] !== fieldSelection || $[12] !== placedRecord.reference || $[13] !== record) {
+			t3 = record && placedRecord.reference ? /* @__PURE__ */ jsx(RecordScope, {
+				block,
+				field,
+				record,
+				reference: placedRecord.reference,
+				children
+			}) : /* @__PURE__ */ jsxs(ReferencePlaceholder, {
+				fieldId,
+				fieldSelection,
+				children: ["Select ", collectionTitle]
+			});
+			$[6] = block;
+			$[7] = children;
+			$[8] = collectionTitle;
+			$[9] = field;
+			$[10] = fieldId;
+			$[11] = fieldSelection;
+			$[12] = placedRecord.reference;
+			$[13] = record;
+			$[14] = t3;
+		} else t3 = $[14];
+		const rendered = t3;
+		if (!editable) return rendered;
+		let t4;
+		if ($[15] !== fieldId || $[16] !== overlay || $[17] !== placedRecord || $[18] !== record || $[19] !== rendered) {
+			t4 = /* @__PURE__ */ jsx(PlacedRecordWrapper, {
+				fieldId,
+				record,
+				placedRecord,
+				overlay,
+				children: rendered
+			});
+			$[15] = fieldId;
+			$[16] = overlay;
+			$[17] = placedRecord;
+			$[18] = record;
+			$[19] = rendered;
+			$[20] = t4;
+		} else t4 = $[20];
+		return t4;
+	};
+	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;
+		let t1;
+		if ($[0] !== block || $[1] !== children || $[2] !== field || $[3] !== placedRecord.reference || $[4] !== record) {
+			t1 = /* @__PURE__ */ jsx(RecordScope, {
+				block,
+				field,
+				record,
+				reference: placedRecord.reference,
+				children
+			});
+			$[0] = block;
+			$[1] = children;
+			$[2] = field;
+			$[3] = placedRecord.reference;
+			$[4] = record;
+			$[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;
+			$[7] = t2;
+		} else t2 = $[7];
+		let t3;
+		if ($[8] !== overlay || $[9] !== placedRecord || $[10] !== record || $[11] !== rendered || $[12] !== t2) {
+			t3 = /* @__PURE__ */ jsx(PlacedRecordWrapper, {
+				fieldId: t2,
+				record,
+				placedRecord,
+				overlay,
+				children: rendered
+			});
+			$[8] = overlay;
+			$[9] = placedRecord;
+			$[10] = record;
+			$[11] = rendered;
+			$[12] = t2;
+			$[13] = t3;
+		} else t3 = $[13];
+		return t3;
+	};
+	const LayoutRecord = (t0) => {
+		const $ = c(25);
+		const { layoutId, record, properties, children } = t0;
+		const t1 = record.content;
+		let t2;
+		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+			t2 = {};
+			$[0] = t2;
+		} else t2 = $[0];
+		let t3;
+		if ($[1] !== properties || $[2] !== t1) {
+			t3 = {
+				blockId: "",
+				content: t1,
+				sourceSchema: properties,
+				settings: t2,
+				isHovered: false,
+				setIsHovered: _temp8,
+				mode: "layout"
+			};
+			$[1] = properties;
+			$[2] = t1;
+			$[3] = t3;
+		} else t3 = $[3];
+		const block = t3;
+		let t4;
+		if ($[4] !== layoutId) {
+			t4 = {
+				itemId: void 0,
+				outer: null,
+				layoutId
+			};
+			$[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,
+				record,
+				reference: placedRecord.reference,
+				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
+			});
+			$[14] = record.references;
+			$[15] = t6;
+			$[16] = t7;
+		} else t7 = $[16];
+		const rendered = t7;
+		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,
+				record,
+				placedRecord,
+				overlay,
+				children: rendered
+			});
+			$[19] = overlay;
+			$[20] = placedRecord;
+			$[21] = record;
+			$[22] = rendered;
+			$[23] = t8;
+			$[24] = t9;
+		} else t9 = $[24];
+		return t9;
+	};
+	const LayoutItem = (t0) => {
+		const $ = c(9);
+		const { collectionId, labelField, properties, record, children, fallback } = t0;
+		const editingOwner = React.use(PreviewEditingOwnerContext);
+		let t1;
+		if ($[0] !== collectionId || $[1] !== labelField || $[2] !== record) {
+			t1 = {
+				collectionId,
+				labelField,
+				loaded: record
+			};
+			$[0] = collectionId;
+			$[1] = labelField;
+			$[2] = record;
+			$[3] = t1;
+		} else t1 = $[3];
+		const latest = useLatestRecord(t1);
+		if (editingOwner?.kind !== "layout" || !latest) return fallback;
+		let t2;
+		if ($[4] !== children || $[5] !== editingOwner.layoutId || $[6] !== latest || $[7] !== properties) {
+			t2 = /* @__PURE__ */ jsx(LayoutRecord, {
+				layoutId: editingOwner.layoutId,
+				properties,
+				record: latest,
+				children
+			});
+			$[4] = children;
+			$[5] = editingOwner.layoutId;
+			$[6] = latest;
+			$[7] = properties;
+			$[8] = t2;
+		} else t2 = $[8];
+		return t2;
+	};
+	const ReferenceList = (t0) => {
+		const $ = c(44);
+		const { name, children } = t0;
+		const block = React.use(Context);
+		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(block.mode);
+		const fieldName = String(name);
+		const { owner, field, stored, fieldId, fieldSelection } = useReferenceField(block, fieldName);
+		const collectionTitle = useCollectionTitle(fieldName, field);
+		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);
+		const placeholderOverlay = useOverlayState(listHovered);
+		let t2;
+		if ($[2] !== field) {
+			t2 = isQueryBacked(field);
+			$[2] = field;
+			$[3] = t2;
+		} else t2 = $[3];
+		const queryBacked = t2;
+		let t3;
+		if ($[4] !== block.blockId || $[5] !== fieldName || $[6] !== normalizedData || $[7] !== owner || $[8] !== queryBacked || $[9] !== stored) {
+			t3 = queryBacked ? queryResultIds(normalizedData, {
+				blockId: block.blockId,
+				itemId: owner.itemId
+			}, fieldName) : stored;
+			$[4] = block.blockId;
+			$[5] = fieldName;
+			$[6] = normalizedData;
+			$[7] = owner;
+			$[8] = queryBacked;
+			$[9] = stored;
+			$[10] = t3;
+		} else t3 = $[10];
+		const ids = t3;
+		let t4;
+		let t5;
+		if ($[11] !== block || $[12] !== children || $[13] !== collectionTitle || $[14] !== editable || $[15] !== field || $[16] !== fieldId || $[17] !== fieldName || $[18] !== fieldSelection || $[19] !== ids || $[20] !== listHovered || $[21] !== owner || $[22] !== placeholderOverlay || $[23] !== queryBacked || $[24] !== recordsMap) {
+			t5 = Symbol.for("react.early_return_sentinel");
+			bb0: {
+				const records = resolveReferenceList(ids, field.collectionId, recordsMap);
+				if (records.length === 0) {
+					if (!editable || queryBacked) {
+						t5 = null;
+						break bb0;
+					}
+					let t6;
+					if ($[27] !== fieldSelection.type) {
+						t6 = fieldSelection.type === "record-field" ? { recordFieldType: "ReferenceList" } : { fieldType: "ReferenceList" };
+						$[27] = fieldSelection.type;
+						$[28] = t6;
+					} else t6 = $[28];
+					let t7;
+					if ($[29] !== fieldSelection || $[30] !== t6) {
+						t7 = {
+							...fieldSelection,
+							...t6
+						};
+						$[29] = fieldSelection;
+						$[30] = t6;
+						$[31] = t7;
+					} else t7 = $[31];
+					const t8 = t7;
+					let t9;
+					if ($[32] !== collectionTitle || $[33] !== fieldId || $[34] !== placeholderOverlay || $[35] !== t8) {
+						t9 = /* @__PURE__ */ jsxs(ReferencePlaceholder, {
+							fieldId,
+							fieldSelection: t8,
+							"data-camox-field-id": fieldId,
+							"data-camox-overlay-mode": "reference",
+							...placeholderOverlay,
+							children: ["Add ", collectionTitle]
+						});
+						$[32] = collectionTitle;
+						$[33] = fieldId;
+						$[34] = placeholderOverlay;
+						$[35] = t8;
+						$[36] = t9;
+					} else t9 = $[36];
+					t5 = t9;
+					break bb0;
+				}
+				let t6;
+				if ($[37] !== block || $[38] !== children || $[39] !== field || $[40] !== fieldName || $[41] !== listHovered || $[42] !== owner) {
+					t6 = (record) => /* @__PURE__ */ jsx(ListedRecord, {
+						block,
+						owner,
+						field,
+						fieldName,
+						record,
+						listHovered,
+						children
+					}, record.id);
+					$[37] = block;
+					$[38] = children;
+					$[39] = field;
+					$[40] = fieldName;
+					$[41] = listHovered;
+					$[42] = owner;
+					$[43] = t6;
+				} else t6 = $[43];
+				t4 = records.map(t6);
+			}
+			$[11] = block;
+			$[12] = children;
+			$[13] = collectionTitle;
+			$[14] = editable;
+			$[15] = field;
+			$[16] = fieldId;
+			$[17] = fieldName;
+			$[18] = fieldSelection;
+			$[19] = ids;
+			$[20] = listHovered;
+			$[21] = owner;
+			$[22] = placeholderOverlay;
+			$[23] = queryBacked;
+			$[24] = recordsMap;
+			$[25] = t4;
+			$[26] = t5;
+		} else {
+			t4 = $[25];
+			t5 = $[26];
+		}
+		if (t5 !== Symbol.for("react.early_return_sentinel")) return t5;
+		return t4;
+	};
+	const Detached = (t0) => {
+		const $ = c(30);
 		const { children } = t0;
 		const ctx = React.use(Context);
 		if (!ctx) throw new Error("Detached must be used within a Block Component");
 		const { blockId, mode, isHovered, setIsHovered } = ctx;
 		const isContentEditable = useIsEditable(mode);
 		const { window: iframeWindow } = useFrame();
-		const selection = useSelector(previewStore, _temp8);
-		const isAddBlockSidebarOpen = useSelector(previewStore, _temp9);
+		const selection = usePreviewTargetSelection();
 		const selectTarget = usePreviewSelection();
-		const isBlockSelected = selection?.blockId === blockId;
-		const overlayState = useOverlayState(isHovered && !isBlockSelected, isBlockSelected);
-		const t1 = String(blockId);
-		let t2;
-		if ($[1] !== t1) {
-			t2 = { blockId: t1 };
+		let t1;
+		if ($[0] !== selection) {
+			t1 = selectionBlockId(selection);
+			$[0] = selection;
 			$[1] = t1;
-			$[2] = t2;
-		} else t2 = $[2];
-		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_BLOCK", "CAMOX_HOVER_BLOCK_END", t2);
+		} 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;
-		if ($[3] !== isHoveredFromSidebar || $[4] !== setIsHovered) {
-			t3 = () => {
+		let t5;
+		if ($[4] !== isHoveredFromSidebar || $[5] !== setIsHovered) {
+			t4 = () => {
 				setIsHovered(isHoveredFromSidebar);
 			};
-			t4 = [isHoveredFromSidebar, setIsHovered];
-			$[3] = isHoveredFromSidebar;
-			$[4] = setIsHovered;
-			$[5] = t3;
+			t5 = [isHoveredFromSidebar, setIsHovered];
+			$[4] = isHoveredFromSidebar;
+			$[5] = setIsHovered;
 			$[6] = t4;
+			$[7] = t5;
 		} else {
-			t3 = $[5];
 			t4 = $[6];
+			t5 = $[7];
 		}
-		React.useEffect(t3, t4);
-		const shouldShowOverlay = isContentEditable && (overlayState["data-camox-hovered"] || overlayState["data-camox-focused"]) && !isAddBlockSidebarOpen;
-		const shouldHideForAddBlockSidebar = isAddBlockSidebarOpen && mode !== "peek";
-		let t5;
-		if ($[7] !== blockId || $[8] !== isContentEditable || $[9] !== selectTarget) {
-			t5 = (e) => {
+		React.useEffect(t4, t5);
+		const shouldShowOverlay = isContentEditable && (overlayState["data-camox-hovered"] || overlayState["data-camox-focused"]);
+		let t6;
+		if ($[8] !== blockId || $[9] !== isContentEditable || $[10] !== selectTarget) {
+			t6 = (e) => {
 				if (!isContentEditable) return;
 				const target = e.target;
 				if (target.closest("[data-camox-field-id]")) return;
-				if (selectIsCommentMode(previewStore.getSnapshot()) && target.closest("[data-camox-repeater-item-id]")) return;
-				if (target.closest("[data-camox-block-id], [data-camox-comment-block-id]") !== e.currentTarget) return;
+				if (target.closest("[data-camox-block-id]") !== e.currentTarget) return;
 				selectTarget({
 					type: "block",
 					blockId
-				}, e);
-			};
-			$[7] = blockId;
-			$[8] = isContentEditable;
-			$[9] = selectTarget;
-			$[10] = t5;
-		} else t5 = $[10];
-		const handleClick = t5;
-		let t6;
-		if ($[11] !== isContentEditable || $[12] !== setIsHovered) {
-			t6 = () => {
-				if (isContentEditable) setIsHovered(true);
+				});
 			};
-			$[11] = isContentEditable;
-			$[12] = setIsHovered;
-			$[13] = t6;
-		} else t6 = $[13];
-		const handleMouseEnter = t6;
+			$[8] = blockId;
+			$[9] = isContentEditable;
+			$[10] = selectTarget;
+			$[11] = t6;
+		} else t6 = $[11];
+		const handleClick = t6;
 		let t7;
-		if ($[14] !== isContentEditable || $[15] !== setIsHovered) {
+		if ($[12] !== isContentEditable || $[13] !== setIsHovered) {
 			t7 = () => {
+				if (isContentEditable) setIsHovered(true);
+			};
+			$[12] = isContentEditable;
+			$[13] = setIsHovered;
+			$[14] = t7;
+		} else t7 = $[14];
+		const handleMouseEnter = t7;
+		let t8;
+		if ($[15] !== isContentEditable || $[16] !== setIsHovered) {
+			t8 = () => {
 				if (isContentEditable) setIsHovered(false);
 			};
-			$[14] = isContentEditable;
-			$[15] = setIsHovered;
-			$[16] = t7;
-		} else t7 = $[16];
-		const handleMouseLeave = t7;
-		const [container, setContainer] = React.useState(null);
-		const t8 = isContentEditable ? blockId : void 0;
-		const t9 = shouldHideForAddBlockSidebar ? 0 : 1;
+			$[15] = isContentEditable;
+			$[16] = setIsHovered;
+			$[17] = t8;
+		} else t8 = $[17];
+		const handleMouseLeave = t8;
+		const t9 = isContentEditable ? blockId : void 0;
 		let t10;
-		if ($[17] !== children || $[18] !== handleClick || $[19] !== handleMouseEnter || $[20] !== handleMouseLeave || $[21] !== t8 || $[22] !== t9) {
-			t10 = children({
-				"data-camox-comment-block-id": t8,
-				ref: setContainer,
-				style: { opacity: t9 },
+		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,
+				"data-camox-overlay-mode": options.synced ? "synced" : void 0,
 				onClickCapture: handleClick,
 				onMouseEnter: handleMouseEnter,
 				onMouseLeave: handleMouseLeave
 			});
-			$[17] = children;
-			$[18] = handleClick;
-			$[19] = handleMouseEnter;
-			$[20] = handleMouseLeave;
-			$[21] = t8;
-			$[22] = t9;
-			$[23] = t10;
-		} else t10 = $[23];
-		let t11;
-		if ($[24] !== blockId || $[25] !== container || $[26] !== overlayState || $[27] !== shouldShowOverlay) {
-			t11 = container && createPortal(/* @__PURE__ */ jsx(Fragment, { children: shouldShowOverlay && /* @__PURE__ */ jsx("div", {
-				"data-camox-block-id": blockId,
-				"data-camox-detached": true,
-				...overlayState,
-				"data-camox-overlay-mode": options.synced ? "synced" : void 0,
-				style: {
-					position: "absolute",
-					pointerEvents: "none",
-					zIndex: 10
-				}
-			}) }), container);
-			$[24] = blockId;
-			$[25] = container;
-			$[26] = overlayState;
-			$[27] = shouldShowOverlay;
-			$[28] = t11;
-		} else t11 = $[28];
+			$[21] = children;
+			$[22] = handleClick;
+			$[23] = handleMouseEnter;
+			$[24] = handleMouseLeave;
+			$[25] = t10;
+			$[26] = t9;
+			$[27] = t11;
+		} else t11 = $[27];
 		let t12;
-		if ($[29] !== t10 || $[30] !== t11) {
-			t12 = /* @__PURE__ */ jsxs(Fragment, { children: [t10, t11] });
-			$[29] = t10;
-			$[30] = t11;
-			$[31] = t12;
-		} else t12 = $[31];
+		if ($[28] !== t11) {
+			t12 = /* @__PURE__ */ jsx(Fragment, { children: t11 });
+			$[28] = t11;
+			$[29] = t12;
+		} else t12 = $[29];
 		return t12;
 	};
 	return {
@@ -1788,20 +2841,19 @@ function createEditableBlock(options) {
 		Icon,
 		Field,
 		Embed,
+		Artifact,
 		Link,
 		Image,
 		File,
 		ImageList,
 		FileList,
 		Repeater,
+		Reference,
+		ReferenceList,
 		useSetting,
 		_internal: {
-			/**
-			* The react component to be used at the page level when mapping on blocks content.
-			* It exposes context that will be consumed by the Field component, and provides visual editing
-			* capabilities (e.g. delete and reorder blocks).
-			*/
 			Component: BlockComponent,
+			LayoutItem,
 			id: options.id,
 			title: options.title,
 			description: options.description,
@@ -1833,7 +2885,7 @@ function createEditableBlock(options) {
 				return { ...settingsDefaults };
 			},
 			getPeekBundle: () => {
-				const PEEK_BLOCK_ID = -1;
+				const PEEK_BLOCK_ID = "peek";
 				const counter = { value: 0 };
 				const allItems = [];
 				const content = { ...contentDefaults };
@@ -1846,7 +2898,7 @@ function createEditableBlock(options) {
 						type: options.id,
 						content,
 						settings: settingsDefaults,
-						placement: null,
+						slot: null,
 						summary: "",
 						position: "",
 						createdAt: 0,
@@ -1865,27 +2917,22 @@ function _temp(l) {
 function _temp2(l) {
 	return l.pathname;
 }
-function _temp3(e_0) {
+function _temp3(l) {
+	return l.pathname;
+}
+function _temp4(e_0) {
 	return e_0.preventDefault();
 }
-function _temp4(e_1) {
+function _temp5(e_1) {
 	if (e_1.key === "Escape") e_1.target.blur();
 }
-function _temp5(state) {
-	return state.context.selection;
-}
-function _temp6(state_0) {
-	return state_0.context.isAddBlockSidebarOpen;
+function _temp6(event) {
+	return event.preventDefault();
 }
 function _temp7(item) {
 	return item.content;
 }
-function _temp8(state) {
-	return state.context.selection;
-}
-function _temp9(state_0) {
-	return state_0.context.isAddBlockSidebarOpen;
-}
+function _temp8() {}
 
 //#endregion
 export { createEditableBlock };