camox 0.44.0 → 0.45.0

package/dist/features/preview/components/ItemFieldsEditor.js

@@ -1,18 +1,24 @@
-import { isFileMarker, isItemMarker, resolveFileMarker } from "../../../lib/normalized-data.js";
+import { artifactTitle, isArtifactSource } from "../../../core/lib/artifact.js";
+import { isItemMarker, referenceList, resolveAssetValue, singleReference } from "../../../lib/normalized-data.js";
 import { lexicalStateToPlainText } from "../../../core/lib/lexicalState.js";
+import { DrillRow } from "./DrillRow.js";
+import { ReferenceFieldEditor } from "./ReferenceFieldEditor.js";
+import { ReferenceListFieldEditor } from "./ReferenceListFieldEditor.js";
 import { previewStore } from "../previewStore.js";
+import { PreviewEditingOwnerContext } from "../previewSelection.js";
+import { overlayFieldId, recordPlacementId } from "../overlayMessages.js";
 import { SidebarLexicalEditor } from "../../../core/components/lexical/SidebarLexicalEditor.js";
 import { IconFieldEditor } from "./IconFieldEditor.js";
 import { RepeatableItemsList } from "./RepeatableItemsList.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Code, FileIcon, ImageIcon, Images, Link2, List, ListFilter, ToggleLeft, Type } from "lucide-react";
-import { Label } from "@camox/ui/label";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@camox/ui/select";
-import { useForm } from "@tanstack/react-form";
 import { Input } from "@camox/ui/input";
+import { Label } from "@camox/ui/label";
 import { Switch } from "@camox/ui/switch";
+import { useForm } from "@tanstack/react-form";
+import { AppWindow, Code, FileIcon, ImageIcon, Images, Link2, List, ListFilter, ToggleLeft, Type } from "lucide-react";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@camox/ui/select";
 
 //#region src/features/preview/components/ItemFieldsEditor.tsx
 const formatFieldName = (fieldName) => {
@@ -30,147 +36,44 @@ const getSchemaFieldsInOrder = (schema) => {
 			enumLabels: prop.enumLabels,
 			enumValues: prop.enum,
 			minItems: prop.minItems,
-			maxItems: prop.maxItems
+			maxItems: prop.maxItems,
+			maxLength: prop.maxLength,
+			collectionId: prop.collectionId,
+			required: prop.required === true,
+			query: prop.query
 		};
 	});
 };
-const DrillRow = (t0) => {
-	const $ = c(28);
-	if ($[0] !== "75fc5969a4033b113dd269f700cf2eca07d78852485b78d36d0f7631827b7b66") {
-		for (let $i = 0; $i < 28; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "75fc5969a4033b113dd269f700cf2eca07d78852485b78d36d0f7631827b7b66";
-	}
-	const { label, preview, Icon, onClick, hover, postToIframe } = t0;
-	let t1;
-	if ($[1] !== hover.blockId || $[2] !== hover.fieldId || $[3] !== hover.fieldName || $[4] !== hover.variant || $[5] !== postToIframe) {
-		t1 = () => {
-			if (hover.variant === "field") {
-				postToIframe({
-					type: "CAMOX_HOVER_FIELD",
-					fieldId: hover.fieldId
-				});
-				return;
-			}
-			postToIframe({
-				type: "CAMOX_HOVER_REPEATER",
-				blockId: String(hover.blockId),
-				fieldName: hover.fieldName
-			});
-		};
-		$[1] = hover.blockId;
-		$[2] = hover.fieldId;
-		$[3] = hover.fieldName;
-		$[4] = hover.variant;
-		$[5] = postToIframe;
-		$[6] = t1;
-	} else t1 = $[6];
-	const handleMouseEnter = t1;
-	let t2;
-	if ($[7] !== hover.blockId || $[8] !== hover.fieldId || $[9] !== hover.fieldName || $[10] !== hover.variant || $[11] !== postToIframe) {
-		t2 = () => {
-			if (hover.variant === "field") {
-				postToIframe({
-					type: "CAMOX_HOVER_FIELD_END",
-					fieldId: hover.fieldId
-				});
-				return;
-			}
-			postToIframe({
-				type: "CAMOX_HOVER_REPEATER_END",
-				blockId: String(hover.blockId),
-				fieldName: hover.fieldName
-			});
-		};
-		$[7] = hover.blockId;
-		$[8] = hover.fieldId;
-		$[9] = hover.fieldName;
-		$[10] = hover.variant;
-		$[11] = postToIframe;
-		$[12] = t2;
-	} else t2 = $[12];
-	const handleMouseLeave = t2;
-	let t3;
-	if ($[13] !== label) {
-		t3 = /* @__PURE__ */ jsx(Label, { children: label });
-		$[13] = label;
-		$[14] = t3;
-	} else t3 = $[14];
-	let t4;
-	if ($[15] !== Icon) {
-		t4 = /* @__PURE__ */ jsx(Icon, { className: "text-muted-foreground h-4 w-4 shrink-0" });
-		$[15] = Icon;
-		$[16] = t4;
-	} else t4 = $[16];
-	let t5;
-	if ($[17] !== preview) {
-		t5 = /* @__PURE__ */ jsx("span", {
-			className: "truncate",
-			children: preview
-		});
-		$[17] = preview;
-		$[18] = t5;
-	} else t5 = $[18];
-	let t6;
-	if ($[19] !== onClick || $[20] !== t4 || $[21] !== t5) {
-		t6 = /* @__PURE__ */ jsxs("button", {
-			type: "button",
-			className: "hover:bg-accent/75 flex w-full items-center gap-2 rounded-lg px-2 py-2 text-left text-sm transition-colors",
-			onClick,
-			children: [t4, t5]
-		});
-		$[19] = onClick;
-		$[20] = t4;
-		$[21] = t5;
-		$[22] = t6;
-	} else t6 = $[22];
-	let t7;
-	if ($[23] !== handleMouseEnter || $[24] !== handleMouseLeave || $[25] !== t3 || $[26] !== t6) {
-		t7 = /* @__PURE__ */ jsxs("div", {
-			className: "space-y-2",
-			onMouseEnter: handleMouseEnter,
-			onMouseLeave: handleMouseLeave,
-			children: [t3, t6]
-		});
-		$[23] = handleMouseEnter;
-		$[24] = handleMouseLeave;
-		$[25] = t3;
-		$[26] = t6;
-		$[27] = t7;
-	} else t7 = $[27];
-	return t7;
-};
 const ItemFieldsEditor = (t0) => {
-	const $ = c(46);
-	if ($[0] !== "75fc5969a4033b113dd269f700cf2eca07d78852485b78d36d0f7631827b7b66") {
-		for (let $i = 0; $i < 46; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "75fc5969a4033b113dd269f700cf2eca07d78852485b78d36d0f7631827b7b66";
-	}
-	const { selectedFieldName, schema, data, blockId, itemId, onFieldChange, postToIframe, filesMap, itemsMap, fieldIdPrefix } = t0;
+	const $ = c(58);
+	const { selectedFieldName, schema, data, blockId, itemId, onFieldChange, postToIframe, filesMap, itemsMap, references, placement, fieldIdPrefix } = t0;
+	const owner = React.useContext(PreviewEditingOwnerContext);
 	let t1;
-	if ($[1] !== schema || $[2] !== selectedFieldName) {
+	if ($[0] !== schema || $[1] !== selectedFieldName) {
 		let t2;
-		if ($[4] !== selectedFieldName) {
+		if ($[3] !== selectedFieldName) {
 			t2 = (field) => !selectedFieldName || field.name === selectedFieldName;
-			$[4] = selectedFieldName;
-			$[5] = t2;
-		} else t2 = $[5];
+			$[3] = selectedFieldName;
+			$[4] = t2;
+		} else t2 = $[4];
 		t1 = getSchemaFieldsInOrder(schema).filter(t2);
-		$[1] = schema;
-		$[2] = selectedFieldName;
-		$[3] = t1;
-	} else t1 = $[3];
+		$[0] = schema;
+		$[1] = selectedFieldName;
+		$[2] = t1;
+	} else t1 = $[2];
 	const fields = t1;
 	const pendingSaveRef = React.useRef(null);
 	const timerRef = React.useRef(null);
 	const focusedFieldIdRef = React.useRef(null);
 	let t2;
-	if ($[6] !== blockId || $[7] !== itemId) {
-		t2 = (fieldName) => {
-			if (itemId != null) return `${blockId}__${itemId}__${fieldName}`;
-			return `${blockId}__${fieldName}`;
-		};
-		$[6] = blockId;
-		$[7] = itemId;
+	if ($[5] !== blockId || $[6] !== itemId || $[7] !== placement) {
+		t2 = (fieldName) => overlayFieldId(blockId, fieldName, {
+			itemId,
+			placement
+		});
+		$[5] = blockId;
+		$[6] = itemId;
+		$[7] = placement;
 		$[8] = t2;
 	} else t2 = $[8];
 	const getFieldId = t2;
@@ -243,7 +146,7 @@ const ItemFieldsEditor = (t0) => {
 	React.useEffect(t8, t9);
 	let t10;
 	let t11;
-	if ($[25] !== blockId || $[26] !== data || $[27] !== fields || $[28] !== filesMap || $[29] !== form || $[30] !== getFieldElementId || $[31] !== getFieldId || $[32] !== itemId || $[33] !== itemsMap || $[34] !== onFieldChange || $[35] !== postToIframe || $[36] !== schema || $[37] !== selectedFieldName) {
+	if ($[25] !== blockId || $[26] !== data || $[27] !== fields || $[28] !== filesMap || $[29] !== form || $[30] !== getFieldElementId || $[31] !== getFieldId || $[32] !== itemId || $[33] !== itemsMap || $[34] !== onFieldChange || $[35] !== owner || $[36] !== placement || $[37] !== postToIframe || $[38] !== references || $[39] !== schema || $[40] !== selectedFieldName) {
 		const handleScalarChange = (fieldName_2, value, fieldApi) => {
 			fieldApi.handleChange(value);
 			if (timerRef.current) clearTimeout(timerRef.current);
@@ -254,62 +157,179 @@ const ItemFieldsEditor = (t0) => {
 				timerRef.current = null;
 			}, 500);
 		};
-		const handleFieldFocus = (fieldName_3, fieldType) => {
-			const fieldId = getFieldId(fieldName_3);
+		let t12;
+		if ($[43] !== blockId || $[44] !== itemId || $[45] !== owner || $[46] !== placement) {
+			t12 = (fieldName_3, fieldType) => {
+				if (owner === null) return;
+				if (placement) {
+					previewStore.send({
+						type: "selectRecordField",
+						...owner,
+						...placement,
+						recordFieldName: fieldName_3,
+						recordFieldType: fieldType
+					});
+					return;
+				}
+				if (itemId != null) {
+					previewStore.send({
+						type: "selectItemField",
+						...owner,
+						blockId,
+						itemId,
+						fieldName: fieldName_3,
+						fieldType
+					});
+					return;
+				}
+				previewStore.send({
+					type: "selectBlockField",
+					...owner,
+					blockId,
+					fieldName: fieldName_3,
+					fieldType
+				});
+			};
+			$[43] = blockId;
+			$[44] = itemId;
+			$[45] = owner;
+			$[46] = placement;
+			$[47] = t12;
+		} else t12 = $[47];
+		const selectField = t12;
+		const handleFieldFocus = (fieldName_4, fieldType_0) => {
+			if (owner === null) return;
+			const fieldId = getFieldId(fieldName_4);
 			focusedFieldIdRef.current = fieldId;
 			postToIframe({
 				type: "CAMOX_FOCUS_FIELD",
 				fieldId
 			});
-			if (itemId != null) previewStore.send({
-				type: "selectItemField",
-				blockId,
-				itemId,
-				fieldName: fieldName_3,
-				fieldType
-			});
-			else previewStore.send({
-				type: "selectBlockField",
-				blockId,
-				fieldName: fieldName_3,
-				fieldType
-			});
+			selectField(fieldName_4, fieldType_0);
 		};
-		const handleFieldBlur = (fieldName_4) => {
-			const fieldId_0 = getFieldId(fieldName_4);
+		const handleFieldBlur = (fieldName_5) => {
+			const fieldId_0 = getFieldId(fieldName_5);
 			focusedFieldIdRef.current = null;
 			postToIframe({
 				type: "CAMOX_FOCUS_FIELD_END",
 				fieldId: fieldId_0
 			});
 		};
-		let t12;
-		if ($[40] !== blockId || $[41] !== itemId) {
-			t12 = (fieldName_5, fieldType_0) => {
-				if (itemId != null) previewStore.send({
-					type: "selectItemField",
-					blockId,
-					itemId,
-					fieldName: fieldName_5,
-					fieldType: fieldType_0
-				});
-				else previewStore.send({
-					type: "selectBlockField",
-					blockId,
-					fieldName: fieldName_5,
-					fieldType: fieldType_0
+		let t13;
+		if ($[48] !== blockId || $[49] !== itemId || $[50] !== placement) {
+			t13 = (fieldName_6, recordId) => placement ? {
+				...placement,
+				nested: {
+					fieldName: fieldName_6,
+					recordId
+				}
+			} : {
+				blockId,
+				...itemId == null ? {} : { itemId },
+				fieldName: fieldName_6,
+				recordId
+			};
+			$[48] = blockId;
+			$[49] = itemId;
+			$[50] = placement;
+			$[51] = t13;
+		} else t13 = $[51];
+		const placementOf = t13;
+		const opensRecords = !placement?.nested;
+		let t14;
+		if ($[52] !== owner || $[53] !== placementOf) {
+			t14 = (fieldName_7, recordId_0) => {
+				if (owner === null) return;
+				previewStore.send({
+					type: "selectRecord",
+					...owner,
+					...placementOf(fieldName_7, recordId_0)
 				});
 			};
-			$[40] = blockId;
-			$[41] = itemId;
-			$[42] = t12;
-		} else t12 = $[42];
-		const drillIntoField = t12;
+			$[52] = owner;
+			$[53] = placementOf;
+			$[54] = t14;
+		} else t14 = $[54];
+		const openRecord = t14;
 		t10 = "space-y-4 px-2 py-4";
 		t11 = fields.map((field_0) => {
 			const label = field_0.label ?? formatFieldName(field_0.name);
 			const fieldId_1 = getFieldId(field_0.name);
 			const renderField = () => {
+				if (field_0.fieldType === "Reference" && field_0.collectionId) return /* @__PURE__ */ jsx(ReferenceFieldEditor, {
+					collectionId: field_0.collectionId,
+					fieldId: fieldId_1,
+					value: data[field_0.name],
+					required: field_0.required,
+					record: singleReference(references, field_0.name),
+					onChange: (value_0) => onFieldChange(field_0.name, value_0),
+					onOpenRecord: opensRecords ? (recordId_1) => openRecord(field_0.name, recordId_1) : void 0,
+					drill: selectedFieldName ? void 0 : {
+						label,
+						fieldId: fieldId_1,
+						onClick: () => selectField(field_0.name, field_0.fieldType),
+						postToIframe
+					}
+				}, field_0.name);
+				if (field_0.fieldType === "ReferenceList" && field_0.collectionId) return /* @__PURE__ */ jsx(ReferenceListFieldEditor, {
+					collectionId: field_0.collectionId,
+					fieldId: fieldId_1,
+					value: data[field_0.name],
+					maxItems: field_0.maxItems,
+					query: field_0.query,
+					records: referenceList(references, field_0.name),
+					onChange: (ids) => onFieldChange(field_0.name, ids),
+					onOpenRecord: opensRecords ? (recordId_2) => openRecord(field_0.name, recordId_2) : void 0,
+					recordHover: opensRecords ? {
+						fieldId: (recordId_3) => recordPlacementId(placementOf(field_0.name, recordId_3)),
+						postToIframe
+					} : void 0,
+					drill: selectedFieldName ? void 0 : {
+						label,
+						fieldId: fieldId_1,
+						onClick: () => selectField(field_0.name, field_0.fieldType),
+						postToIframe
+					}
+				}, field_0.name);
+				if (field_0.fieldType === "Artifact") {
+					const value_1 = data[field_0.name];
+					const title = isArtifactSource(value_1) ? artifactTitle(value_1) : null;
+					if (!selectedFieldName) return /* @__PURE__ */ jsx(DrillRow, {
+						label,
+						preview: title ?? "Empty",
+						Icon: AppWindow,
+						onClick: () => selectField(field_0.name, field_0.fieldType),
+						hover: {
+							variant: "field",
+							fieldId: fieldId_1
+						},
+						postToIframe
+					}, field_0.name);
+					return /* @__PURE__ */ jsxs("div", {
+						className: "flex items-start gap-2 rounded-lg border px-3 py-2 text-sm",
+						onMouseEnter: () => postToIframe({
+							type: "CAMOX_HOVER_FIELD",
+							fieldId: fieldId_1
+						}),
+						onMouseLeave: () => postToIframe({
+							type: "CAMOX_HOVER_FIELD_END",
+							fieldId: fieldId_1
+						}),
+						children: [/* @__PURE__ */ jsx(AppWindow, { className: "text-muted-foreground mt-0.5 h-4 w-4 shrink-0" }), title === null ? /* @__PURE__ */ jsx("p", {
+							className: "text-muted-foreground",
+							children: "Empty"
+						}) : /* @__PURE__ */ jsxs("div", {
+							className: "min-w-0 space-y-0.5",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "truncate font-medium",
+								children: title
+							}), /* @__PURE__ */ jsx("p", {
+								className: "text-muted-foreground text-xs",
+								children: "Created and edited by agents"
+							})]
+						})]
+					}, field_0.name);
+				}
 				if (!selectedFieldName && [
 					"String",
 					"Embed",
@@ -318,12 +338,13 @@ const ItemFieldsEditor = (t0) => {
 					"Boolean",
 					"Icon"
 				].includes(field_0.fieldType)) {
-					const value_0 = data[field_0.name];
+					const value_2 = data[field_0.name];
+					const preview = field_0.fieldType === "String" ? lexicalStateToPlainText(value_2 ?? "") || "Empty text" : field_0.fieldType === "Repeater" ? `${Array.isArray(value_2) ? value_2.length : 0} items` : field_0.fieldType === "Boolean" ? value_2 ? "On" : "Off" : typeof value_2 === "string" && value_2 ? value_2 : "Empty";
 					return /* @__PURE__ */ jsx(DrillRow, {
 						label,
-						preview: field_0.fieldType === "String" ? lexicalStateToPlainText(value_0 ?? "") || "Empty text" : field_0.fieldType === "Repeater" ? `${Array.isArray(value_0) ? value_0.length : 0} items` : field_0.fieldType === "Boolean" ? value_0 ? "On" : "Off" : typeof value_0 === "string" && value_0 ? value_0 : "Empty",
+						preview,
 						Icon: field_0.fieldType === "String" ? Type : field_0.fieldType === "Repeater" ? List : field_0.fieldType === "Embed" ? Code : field_0.fieldType === "Boolean" ? ToggleLeft : ListFilter,
-						onClick: () => drillIntoField(field_0.name, field_0.fieldType),
+						onClick: () => selectField(field_0.name, field_0.fieldType),
 						hover: field_0.fieldType === "Repeater" ? {
 							variant: "repeater",
 							blockId,
@@ -338,7 +359,7 @@ const ItemFieldsEditor = (t0) => {
 				if (field_0.fieldType === "Icon") return /* @__PURE__ */ jsx(IconFieldEditor, {
 					value: String(data[field_0.name] ?? schema?.properties?.[field_0.name]?.default ?? ""),
 					ids: field_0.enumValues ?? [],
-					onChange: (value_1) => onFieldChange(field_0.name, value_1)
+					onChange: (value_3) => onFieldChange(field_0.name, value_3)
 				}, field_0.name);
 				if (field_0.fieldType === "Boolean") return /* @__PURE__ */ jsxs("div", {
 					className: "flex items-center justify-between",
@@ -348,7 +369,7 @@ const ItemFieldsEditor = (t0) => {
 					}), /* @__PURE__ */ jsx(Switch, {
 						id: getFieldElementId(field_0.name),
 						checked: Boolean(data[field_0.name]),
-						onCheckedChange: (value_2) => onFieldChange(field_0.name, value_2)
+						onCheckedChange: (value_4) => onFieldChange(field_0.name, value_4)
 					})]
 				}, field_0.name);
 				if (field_0.fieldType === "Enum") return /* @__PURE__ */ jsxs("div", {
@@ -358,14 +379,14 @@ const ItemFieldsEditor = (t0) => {
 						children: label
 					}), /* @__PURE__ */ jsxs(Select, {
 						value: typeof data[field_0.name] === "string" ? data[field_0.name] : "",
-						onValueChange: (value_3) => onFieldChange(field_0.name, value_3),
+						onValueChange: (value_5) => onFieldChange(field_0.name, value_5),
 						children: [/* @__PURE__ */ jsx(SelectTrigger, {
 							id: getFieldElementId(field_0.name),
 							children: /* @__PURE__ */ jsx(SelectValue, {})
-						}), /* @__PURE__ */ jsx(SelectContent, { children: field_0.enumValues?.map((value_4) => /* @__PURE__ */ jsx(SelectItem, {
-							value: value_4,
-							children: field_0.enumLabels?.[value_4] ?? value_4
-						}, value_4)) })]
+						}), /* @__PURE__ */ jsx(SelectContent, { children: field_0.enumValues?.map((value_6) => /* @__PURE__ */ jsx(SelectItem, {
+							value: value_6,
+							children: field_0.enumLabels?.[value_6] ?? value_6
+						}, value_6)) })]
 					})]
 				}, field_0.name);
 				if (field_0.fieldType === "String") return /* @__PURE__ */ jsx(form.Field, {
@@ -386,7 +407,8 @@ const ItemFieldsEditor = (t0) => {
 						}), /* @__PURE__ */ jsx(SidebarLexicalEditor, {
 							id: getFieldElementId(field_0.name),
 							value: fieldApi_0.state.value,
-							onChange: (value_5) => handleScalarChange(field_0.name, value_5, fieldApi_0),
+							maxLength: field_0.maxLength,
+							onChange: (value_7) => handleScalarChange(field_0.name, value_7, fieldApi_0),
 							onFocus: () => handleFieldFocus(field_0.name, field_0.fieldType),
 							onBlur: () => handleFieldBlur(field_0.name)
 						})]
@@ -419,11 +441,12 @@ const ItemFieldsEditor = (t0) => {
 				}, field_0.name);
 				if (field_0.fieldType === "Link") {
 					const linkValue = data[field_0.name];
+					const preview_0 = linkValue?.text || linkValue?.href || "Empty link";
 					return /* @__PURE__ */ jsx(DrillRow, {
 						label,
-						preview: linkValue?.text || linkValue?.href || "Empty link",
+						preview: preview_0,
 						Icon: Link2,
-						onClick: () => drillIntoField(field_0.name, "Link"),
+						onClick: () => selectField(field_0.name, "Link"),
 						hover: {
 							variant: "field",
 							fieldId: fieldId_1
@@ -432,8 +455,8 @@ const ItemFieldsEditor = (t0) => {
 					}, field_0.name);
 				}
 				if (field_0.fieldType === "ImageList" || field_0.fieldType === "FileList") {
-					const value_6 = data[field_0.name];
-					const count = Array.isArray(value_6) ? value_6.length : 0;
+					const value_8 = data[field_0.name];
+					const count = Array.isArray(value_8) ? value_8.length : 0;
 					const isImage = field_0.fieldType === "ImageList";
 					const noun = isImage ? "image" : "file";
 					let preview_1;
@@ -444,7 +467,7 @@ const ItemFieldsEditor = (t0) => {
 						label,
 						preview: preview_1,
 						Icon: isImage ? Images : FileIcon,
-						onClick: () => drillIntoField(field_0.name, isImage ? "Image" : "File"),
+						onClick: () => selectField(field_0.name, isImage ? "Image" : "File"),
 						hover: {
 							variant: "repeater",
 							blockId,
@@ -454,12 +477,12 @@ const ItemFieldsEditor = (t0) => {
 					}, field_0.name);
 				}
 				if (field_0.fieldType === "Image") {
-					const rawImage = data[field_0.name];
+					const preview_2 = resolveAssetValue(data[field_0.name], filesMap)?.filename || "No image";
 					return /* @__PURE__ */ jsx(DrillRow, {
 						label,
-						preview: (isFileMarker(rawImage) ? resolveFileMarker(rawImage, filesMap) : rawImage)?.filename || "No image",
+						preview: preview_2,
 						Icon: ImageIcon,
-						onClick: () => drillIntoField(field_0.name, "Image"),
+						onClick: () => selectField(field_0.name, "Image"),
 						hover: {
 							variant: "field",
 							fieldId: fieldId_1
@@ -468,12 +491,12 @@ const ItemFieldsEditor = (t0) => {
 					}, field_0.name);
 				}
 				if (field_0.fieldType === "File") {
-					const rawFile = data[field_0.name];
+					const preview_3 = resolveAssetValue(data[field_0.name], filesMap)?.filename || "No file";
 					return /* @__PURE__ */ jsx(DrillRow, {
 						label,
-						preview: (isFileMarker(rawFile) ? resolveFileMarker(rawFile, filesMap) : rawFile)?.filename || "No file",
+						preview: preview_3,
 						Icon: FileIcon,
-						onClick: () => drillIntoField(field_0.name, "File"),
+						onClick: () => selectField(field_0.name, "File"),
 						hover: {
 							variant: "field",
 							fieldId: fieldId_1
@@ -511,25 +534,28 @@ const ItemFieldsEditor = (t0) => {
 		$[32] = itemId;
 		$[33] = itemsMap;
 		$[34] = onFieldChange;
-		$[35] = postToIframe;
-		$[36] = schema;
-		$[37] = selectedFieldName;
-		$[38] = t10;
-		$[39] = t11;
+		$[35] = owner;
+		$[36] = placement;
+		$[37] = postToIframe;
+		$[38] = references;
+		$[39] = schema;
+		$[40] = selectedFieldName;
+		$[41] = t10;
+		$[42] = t11;
 	} else {
-		t10 = $[38];
-		t11 = $[39];
+		t10 = $[41];
+		t11 = $[42];
 	}
 	let t12;
-	if ($[43] !== t10 || $[44] !== t11) {
+	if ($[55] !== t10 || $[56] !== t11) {
 		t12 = /* @__PURE__ */ jsx("form", {
 			className: t10,
 			children: t11
 		});
-		$[43] = t10;
-		$[44] = t11;
-		$[45] = t12;
-	} else t12 = $[45];
+		$[55] = t10;
+		$[56] = t11;
+		$[57] = t12;
+	} else t12 = $[57];
 	return t12;
 };
 function _temp(f) {