camox 0.48.0 → 0.52.1

package/dist/core/editing/createEditableBlock.js

@@ -5,7 +5,6 @@ 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";
@@ -13,17 +12,15 @@ import { renderImagePlaceholder } from "../lib/imagePlaceholder.js";
 import { buildImageSrcSet, getDefaultImageSizes, getDefaultImageWidth, transformImageUrl } from "../lib/imageTransform.js";
 import { markdownToReactNodes } from "../lib/lexicalReact.js";
 import { resolveReference, resolveReferenceList } from "../lib/reference.js";
-import { 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 { useIsEditable } from "../hooks/useIsEditable.js";
 import { CanvasWorkspaceContext } from "../../features/canvas/canvasZoom.js";
 import { PreviewEditingOwnerContext, usePreviewSelection, usePreviewTargetSelection } from "../../features/preview/previewSelection.js";
+import { useApplyContentEdit } from "./contentEdits.js";
+import { useFrame } from "../../features/preview/components/Frame.js";
 import { 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";
@@ -36,9 +33,10 @@ import { isQueryBacked } from "@camox/api-contract";
 import { Type } from "@sinclair/typebox";
 import { generateKeyBetween } from "fractional-indexing";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 //#region src/core/editing/createEditableBlock.tsx
+/** Inline field writes report no failure: the field keeps what was typed. */
+const ignore = () => {};
 /** The pages links lead to in the locale viewed, for the studio's editors, who read the project. */
 function useEditorLinkPages() {
 	const $ = c(1);
@@ -209,7 +207,7 @@ function createEditableBlock(options) {
 	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(40);
+		const $ = c(37);
 		const { name, textStyle, linkStyle, children } = t0;
 		const selectTarget = usePreviewSelection();
 		const blockContext = React.use(Context);
@@ -243,48 +241,39 @@ function createEditableBlock(options) {
 			setPrevSidebarHover(isHoveredFromSidebar);
 			setIsHovered(isHoveredFromSidebar);
 		}
+		const applyEdit = useApplyContentEdit();
 		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 ($[1] !== applyEdit || $[2] !== blockId || $[3] !== name || $[4] !== reference || $[5] !== repeaterContext) {
+			t2 = (newValue) => {
 				if (reference) {
 					reference.update(String(name), newValue);
 					return;
 				}
+				const content_0 = { [name]: newValue };
 				if (repeaterContext) {
 					const { itemId } = repeaterContext;
-					if (itemId != null) updateRepeatableContent.mutate({
-						id: itemId,
-						content: { [name]: newValue }
-					});
-				} else updateBlockContent.mutate({
-					id: blockId,
-					content: { [name]: newValue }
-				});
+					if (itemId != null) applyEdit({
+						type: "itemContent",
+						itemId,
+						content: content_0
+					}).catch(ignore);
+				} else applyEdit({
+					type: "blockContent",
+					blockId,
+					content: content_0
+				}).catch(ignore);
 			};
-			$[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 = () => {
+			$[1] = applyEdit;
+			$[2] = blockId;
+			$[3] = name;
+			$[4] = reference;
+			$[5] = repeaterContext;
+			$[6] = t2;
+		} else t2 = $[6];
+		const handleChange = t2;
+		let t3;
+		if ($[7] !== blockId || $[8] !== name || $[9] !== reference || $[10] !== repeaterContext || $[11] !== selectTarget) {
+			t3 = () => {
 				if (reference) {
 					reference.selectRecordField(String(name), "String");
 					return;
@@ -302,95 +291,95 @@ function createEditableBlock(options) {
 					fieldType: "String"
 				});
 			};
-			$[10] = blockId;
-			$[11] = name;
-			$[12] = reference;
-			$[13] = repeaterContext;
-			$[14] = selectTarget;
+			$[7] = blockId;
+			$[8] = name;
+			$[9] = reference;
+			$[10] = repeaterContext;
+			$[11] = selectTarget;
+			$[12] = t3;
+		} else t3 = $[12];
+		const selectField = t3;
+		let t4;
+		if ($[13] !== selectField) {
+			t4 = () => {
+				setIsEditorFocused(true);
+				selectField();
+			};
+			$[13] = selectField;
+			$[14] = t4;
+		} else t4 = $[14];
+		const handleFocus = t4;
+		let t5;
+		if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+			t5 = () => {
+				setIsEditorFocused(false);
+			};
 			$[15] = t5;
 		} else t5 = $[15];
-		const selectField = t5;
+		const handleBlur = t5;
 		let t6;
-		if ($[16] !== selectField) {
+		if ($[16] !== isContentEditable) {
 			t6 = () => {
-				setIsEditorFocused(true);
-				selectField();
+				if (isContentEditable) setIsHovered(true);
 			};
-			$[16] = selectField;
+			$[16] = isContentEditable;
 			$[17] = t6;
 		} else t6 = $[17];
-		const handleFocus = t6;
+		const handleMouseEnter = t6;
 		let t7;
-		if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		if ($[18] !== isContentEditable) {
 			t7 = () => {
-				setIsEditorFocused(false);
-			};
-			$[18] = t7;
-		} else t7 = $[18];
-		const handleBlur = t7;
-		let t8;
-		if ($[19] !== isContentEditable) {
-			t8 = () => {
-				if (isContentEditable) setIsHovered(true);
-			};
-			$[19] = isContentEditable;
-			$[20] = t8;
-		} else t8 = $[20];
-		const handleMouseEnter = t8;
-		let t9;
-		if ($[21] !== isContentEditable) {
-			t9 = () => {
 				if (isContentEditable) setIsHovered(false);
 			};
-			$[21] = isContentEditable;
-			$[22] = t9;
-		} else t9 = $[22];
-		const handleMouseLeave = t9;
+			$[18] = isContentEditable;
+			$[19] = t7;
+		} else t7 = $[19];
+		const handleMouseLeave = t7;
 		const fieldData = { text: 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, {
+		let t8;
+		if ($[20] !== currentPathname || $[21] !== fieldValue || $[22] !== linkStyle || $[23] !== pages || $[24] !== textStyle) {
+			t8 = () => markdownToReactNodes(fieldValue, {
 				pages,
 				fallbackHref: currentPathname,
 				textStyle,
 				linkStyle
 			});
-			$[23] = currentPathname;
-			$[24] = fieldValue;
-			$[25] = linkStyle;
-			$[26] = pages;
-			$[27] = textStyle;
-			$[28] = t10;
-		} else t10 = $[28];
-		const text = t10;
+			$[20] = currentPathname;
+			$[21] = fieldValue;
+			$[22] = linkStyle;
+			$[23] = pages;
+			$[24] = textStyle;
+			$[25] = t8;
+		} else t8 = $[25];
+		const text = t8;
 		if (!isContentEditable) return /* @__PURE__ */ jsx(Fragment, { children: children({ children: text() }, fieldData) });
-		const 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, {
+		const t9 = fieldSchema?.maxLength;
+		let t10;
+		if ($[26] !== currentPathname || $[27] !== fieldValue || $[28] !== handleChange || $[29] !== handleFocus || $[30] !== linkStyle || $[31] !== pages || $[32] !== t9 || $[33] !== textStyle) {
+			t10 = /* @__PURE__ */ jsx(InlineLexicalEditor, {
 				textStyle,
 				linkStyle,
 				pages,
 				fallbackHref: currentPathname,
 				initialState: fieldValue,
 				externalState: fieldValue,
-				maxLength: t11,
+				maxLength: t9,
 				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({
+			$[26] = currentPathname;
+			$[27] = fieldValue;
+			$[28] = handleChange;
+			$[29] = handleFocus;
+			$[30] = linkStyle;
+			$[31] = pages;
+			$[32] = t9;
+			$[33] = textStyle;
+			$[34] = t10;
+		} else t10 = $[34];
+		const t11 = children({
 			ref: elementRef,
 			"data-camox-field-id": fieldId,
 			...overlayState,
@@ -398,15 +387,15 @@ function createEditableBlock(options) {
 			onMouseEnter: handleMouseEnter,
 			onMouseLeave: handleMouseLeave,
 			onClickCapture: selectField,
-			children: t12
+			children: t10
 		}, fieldData);
-		let t14;
-		if ($[38] !== t13) {
-			t14 = /* @__PURE__ */ jsx(Fragment, { children: t13 });
-			$[38] = t13;
-			$[39] = t14;
-		} else t14 = $[39];
-		return t14;
+		let t12;
+		if ($[35] !== t11) {
+			t12 = /* @__PURE__ */ jsx(Fragment, { children: t11 });
+			$[35] = t11;
+			$[36] = t12;
+		} else t12 = $[36];
+		return t12;
 	};
 	const Icon = (t0) => {
 		const $ = c(33);
@@ -906,7 +895,7 @@ function createEditableBlock(options) {
 		return t19;
 	};
 	const Link = (t0) => {
-		const $ = c(21);
+		const $ = c(18);
 		const { name, children } = t0;
 		const selectTarget = usePreviewSelection();
 		const blockContext = React.use(Context);
@@ -918,25 +907,14 @@ function createEditableBlock(options) {
 		const repeaterContext = React.use(RepeatableItemContext);
 		const rawFieldValue = repeaterContext ? repeaterContext.itemContent[name] : content[name];
 		const fieldValue = normalizeLinkValue(rawFieldValue);
+		const applyEdit = useApplyContentEdit();
+		const pages = useEditorLinkPages();
 		let t1;
 		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-			t1 = blockMutations.updateContent();
+			t1 = { select: _temp3 };
 			$[0] = t1;
 		} else t1 = $[0];
-		const updateBlockContent = useMutation(t1);
-		let t2;
-		if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-			t2 = repeatableItemMutations.updateContent();
-			$[1] = t2;
-		} else t2 = $[1];
-		const updateRepeatableContent = useMutation(t2);
-		const pages = useEditorLinkPages();
-		let t3;
-		if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-			t3 = { select: _temp3 };
-			$[2] = t3;
-		} else t3 = $[2];
-		const currentPathname = useLocation(t3);
+		const currentPathname = useLocation(t1);
 		const resolvedHref = resolveLinkHref(fieldValue, pages, currentPathname);
 		const fieldId = getOverlayFieldId(blockId, String(name), { itemId: repeaterContext?.itemId });
 		const [isEditing, setIsEditing] = React.useState(false);
@@ -962,26 +940,28 @@ function createEditableBlock(options) {
 			setPrevSidebarHover(isHoveredFromSidebar);
 			setIsHovered(isHoveredFromSidebar);
 		}
-		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 }
-				});
-				else updateBlockContent.mutate({
-					id: blockId,
-					content: { [name]: newLinkValue }
-				});
+		let t2;
+		if ($[1] !== applyEdit || $[2] !== blockId || $[3] !== name || $[4] !== repeaterContext?.itemId) {
+			t2 = (newLinkValue) => {
+				const content_0 = { [name]: newLinkValue };
+				const itemId = repeaterContext?.itemId;
+				applyEdit(itemId != null ? {
+					type: "itemContent",
+					itemId,
+					content: content_0
+				} : {
+					type: "blockContent",
+					blockId,
+					content: content_0
+				}).catch(ignore);
 			};
-			$[3] = blockId;
-			$[4] = name;
-			$[5] = repeaterContext;
-			$[6] = updateBlockContent;
-			$[7] = updateRepeatableContent;
-			$[8] = t4;
-		} else t4 = $[8];
-		const saveLinkValue = t4;
+			$[1] = applyEdit;
+			$[2] = blockId;
+			$[3] = name;
+			$[4] = repeaterContext?.itemId;
+			$[5] = t2;
+		} else t2 = $[5];
+		const saveLinkValue = t2;
 		const handleInput = (e) => {
 			const newText = e.target.textContent || "";
 			saveLinkValue({
@@ -989,9 +969,9 @@ function createEditableBlock(options) {
 				text: newText
 			});
 		};
-		let t5;
-		if ($[9] !== blockId || $[10] !== name || $[11] !== repeaterContext || $[12] !== selectTarget) {
-			t5 = () => {
+		let t3;
+		if ($[6] !== blockId || $[7] !== name || $[8] !== repeaterContext || $[9] !== selectTarget) {
+			t3 = () => {
 				selectTarget(repeaterContext?.itemId != null ? {
 					type: "item-field",
 					blockId,
@@ -1005,33 +985,33 @@ function createEditableBlock(options) {
 					fieldType: "Link"
 				});
 			};
-			$[9] = blockId;
-			$[10] = name;
-			$[11] = repeaterContext;
-			$[12] = selectTarget;
-			$[13] = t5;
-		} else t5 = $[13];
-		const selectField = t5;
-		let t6;
-		if ($[14] !== selectField) {
-			t6 = () => {
+			$[6] = blockId;
+			$[7] = name;
+			$[8] = repeaterContext;
+			$[9] = selectTarget;
+			$[10] = t3;
+		} else t3 = $[10];
+		const selectField = t3;
+		let t4;
+		if ($[11] !== selectField) {
+			t4 = () => {
 				setIsEditing(true);
 				setIsEditorFocused(true);
 				selectField();
 			};
-			$[14] = selectField;
-			$[15] = t6;
-		} else t6 = $[15];
-		const handleFocus = t6;
-		let t7;
-		if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
-			t7 = () => {
+			$[11] = selectField;
+			$[12] = t4;
+		} else t4 = $[12];
+		const handleFocus = t4;
+		let t5;
+		if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+			t5 = () => {
 				setIsEditing(false);
 				setIsEditorFocused(false);
 			};
-			$[16] = t7;
-		} else t7 = $[16];
-		const handleBlur = t7;
+			$[13] = t5;
+		} else t5 = $[13];
+		const handleBlur = t5;
 		const linkData = {
 			text: displayText,
 			href: resolvedHref,
@@ -1043,18 +1023,18 @@ function createEditableBlock(options) {
 			rel: fieldValue.newTab ? "noreferrer" : void 0,
 			children: fieldValue.text
 		}, linkData) });
-		let t8;
-		let t9;
-		if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-			t8 = () => setIsHovered(true);
-			t9 = () => setIsHovered(false);
-			$[17] = t8;
-			$[18] = t9;
+		let t6;
+		let t7;
+		if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+			t6 = () => setIsHovered(true);
+			t7 = () => setIsHovered(false);
+			$[14] = t6;
+			$[15] = t7;
 		} else {
-			t8 = $[17];
-			t9 = $[18];
+			t6 = $[14];
+			t7 = $[15];
 		}
-		const t10 = children({
+		const t8 = children({
 			ref: elementRef,
 			to: resolvedHref,
 			target: fieldValue.newTab ? "_blank" : void 0,
@@ -1069,19 +1049,19 @@ function createEditableBlock(options) {
 			onInput: handleInput,
 			onFocus: handleFocus,
 			onBlur: handleBlur,
-			onMouseEnter: t8,
-			onMouseLeave: t9,
+			onMouseEnter: t6,
+			onMouseLeave: t7,
 			onKeyDown: _temp5,
 			spellCheck: false,
 			suppressContentEditableWarning: true
 		}, linkData);
-		let t11;
-		if ($[19] !== t10) {
-			t11 = /* @__PURE__ */ jsx(Fragment, { children: t10 });
-			$[19] = t10;
-			$[20] = t11;
-		} else t11 = $[20];
-		return t11;
+		let t9;
+		if ($[16] !== t8) {
+			t9 = /* @__PURE__ */ jsx(Fragment, { children: t8 });
+			$[16] = t8;
+			$[17] = t9;
+		} else t9 = $[17];
+		return t9;
 	};
 	const assetOverlayMode = (reference) => {
 		if (reference) return "reference";
@@ -1991,48 +1971,41 @@ function createEditableBlock(options) {
 		};
 	};
 	const usePlacedRecord = (block, owner, fieldName, record) => {
-		const $ = c(40);
-		const studioCache = useStudioCache();
+		const $ = c(37);
 		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 applyEdit = useApplyContentEdit();
 		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;
+		let t0;
+		if ($[0] !== block || $[1] !== fieldName || $[2] !== owner || $[3] !== record) {
+			t0 = record ? placementOf(block, owner, fieldName, record.id) : null;
+			$[0] = block;
+			$[1] = fieldName;
+			$[2] = owner;
+			$[3] = record;
+			$[4] = t0;
+		} else t0 = $[4];
+		const placement = t0;
 		const selected = useRecordSelection(placement);
 		const { window: iframeWindow } = useFrame();
+		let t1;
+		if ($[5] !== placement) {
+			t1 = placement ? recordPlacementId(placement) : void 0;
+			$[5] = placement;
+			$[6] = t1;
+		} else t1 = $[6];
 		let t2;
-		if ($[6] !== placement) {
-			t2 = placement ? recordPlacementId(placement) : void 0;
-			$[6] = placement;
-			$[7] = t2;
-		} else t2 = $[7];
-		let t3;
-		if ($[8] !== t2) {
-			t3 = { fieldId: t2 };
+		if ($[7] !== t1) {
+			t2 = { fieldId: t1 };
+			$[7] = t1;
 			$[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) => {
+		} else t2 = $[8];
+		const sidebarHovered = useOverlayMessage(iframeWindow, editable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", t2);
+		let t3;
+		if ($[9] !== editable || $[10] !== placement || $[11] !== selectTarget) {
+			t3 = (event) => {
 				if (!editable || !placement) return;
 				if (event.target.closest("[data-camox-field-id]") !== event.currentTarget) return;
 				selectTarget({
@@ -2040,15 +2013,15 @@ function createEditableBlock(options) {
 					...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) => {
+			$[9] = editable;
+			$[10] = placement;
+			$[11] = selectTarget;
+			$[12] = t3;
+		} else t3 = $[12];
+		const selectRecord = t3;
+		let t4;
+		if ($[13] !== editable || $[14] !== placement || $[15] !== selectTarget) {
+			t4 = (recordFieldName, recordFieldType) => {
 				if (!editable || !placement) return;
 				selectTarget({
 					type: "record-field",
@@ -2057,95 +2030,87 @@ function createEditableBlock(options) {
 					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) => {
+			$[13] = editable;
+			$[14] = placement;
+			$[15] = selectTarget;
+			$[16] = t4;
+		} else t4 = $[16];
+		const selectRecordField = t4;
+		let t5;
+		if ($[17] !== applyEdit || $[18] !== editable || $[19] !== projectUuid || $[20] !== record) {
+			t5 = (field, value) => {
 				if (!record || !editable) return;
 				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;
+				applyEdit({
+					type: "recordField",
+					projectUuid,
+					record,
+					field,
+					value
 				}).catch((cause) => {
 					setError(cause instanceof Error ? cause.message : "Could not save item");
 				});
 			};
+			$[17] = applyEdit;
 			$[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 ? {
+			$[19] = projectUuid;
+			$[20] = record;
+			$[21] = t5;
+		} else t5 = $[21];
+		const update = t5;
+		const t6 = pointerHovered || sidebarHovered;
+		let t7;
+		if ($[22] !== placement || $[23] !== selectRecordField || $[24] !== update) {
+			t7 = placement ? {
 				placement,
 				selectRecordField,
 				update
 			} : null;
-			$[25] = placement;
-			$[26] = selectRecordField;
-			$[27] = update;
-			$[28] = t8;
-		} else t8 = $[28];
-		let t10;
+			$[22] = placement;
+			$[23] = selectRecordField;
+			$[24] = update;
+			$[25] = t7;
+		} else t7 = $[25];
+		let t8;
 		let t9;
-		if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
-			t9 = () => setPointerHovered(true);
-			t10 = () => setPointerHovered(false);
-			$[29] = t10;
-			$[30] = t9;
+		if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+			t8 = () => setPointerHovered(true);
+			t9 = () => setPointerHovered(false);
+			$[26] = t8;
+			$[27] = t9;
 		} else {
-			t10 = $[29];
-			t9 = $[30];
+			t8 = $[26];
+			t9 = $[27];
 		}
-		let t11;
-		if ($[31] !== selectRecord) {
-			t11 = {
+		let t10;
+		if ($[28] !== selectRecord) {
+			t10 = {
 				onClickCapture: selectRecord,
-				onMouseEnter: t9,
-				onMouseLeave: t10
+				onMouseEnter: t8,
+				onMouseLeave: t9
 			};
-			$[31] = selectRecord;
-			$[32] = t11;
-		} else t11 = $[32];
-		let t12;
-		if ($[33] !== editable || $[34] !== error || $[35] !== selected || $[36] !== t11 || $[37] !== t7 || $[38] !== t8) {
-			t12 = {
+			$[28] = selectRecord;
+			$[29] = t10;
+		} else t10 = $[29];
+		let t11;
+		if ($[30] !== editable || $[31] !== error || $[32] !== selected || $[33] !== t10 || $[34] !== t6 || $[35] !== t7) {
+			t11 = {
 				editable,
 				error,
 				selected,
-				hovered: t7,
-				reference: t8,
-				wrapperProps: t11
+				hovered: t6,
+				reference: t7,
+				wrapperProps: t10
 			};
-			$[33] = editable;
-			$[34] = error;
-			$[35] = selected;
+			$[30] = editable;
+			$[31] = error;
+			$[32] = selected;
+			$[33] = t10;
+			$[34] = t6;
+			$[35] = t7;
 			$[36] = t11;
-			$[37] = t7;
-			$[38] = t8;
-			$[39] = t12;
-		} else t12 = $[39];
-		return t12;
+		} else t11 = $[36];
+		return t11;
 	};
 	const RecordScope = (t0) => {
 		const $ = c(16);
@@ -2569,23 +2534,24 @@ function createEditableBlock(options) {
 		const $ = c(9);
 		const { collectionId, collection, properties, record, children, fallback } = t0;
 		const editingOwner = React.use(PreviewEditingOwnerContext);
-		let t1;
-		if ($[0] !== collection || $[1] !== collectionId || $[2] !== record) {
-			t1 = {
+		const t1 = collection?._internal;
+		let t2;
+		if ($[0] !== collectionId || $[1] !== record || $[2] !== t1) {
+			t2 = {
 				collectionId,
-				collection,
+				collection: t1,
 				loaded: record
 			};
-			$[0] = collection;
-			$[1] = collectionId;
-			$[2] = record;
-			$[3] = t1;
-		} else t1 = $[3];
-		const latest = useLatestRecord(t1);
+			$[0] = collectionId;
+			$[1] = record;
+			$[2] = t1;
+			$[3] = t2;
+		} else t2 = $[3];
+		const latest = useLatestRecord(t2);
 		if (editingOwner?.kind !== "layout" || !latest) return fallback;
-		let t2;
+		let t3;
 		if ($[4] !== children || $[5] !== editingOwner.layoutId || $[6] !== latest || $[7] !== properties) {
-			t2 = /* @__PURE__ */ jsx(LayoutRecord, {
+			t3 = /* @__PURE__ */ jsx(LayoutRecord, {
 				layoutId: editingOwner.layoutId,
 				properties,
 				record: latest,
@@ -2595,9 +2561,9 @@ function createEditableBlock(options) {
 			$[5] = editingOwner.layoutId;
 			$[6] = latest;
 			$[7] = properties;
-			$[8] = t2;
-		} else t2 = $[8];
-		return t2;
+			$[8] = t3;
+		} else t3 = $[8];
+		return t3;
 	};
 	const ReferenceList = (t0) => {
 		const $ = c(44);