camox 0.43.0 → 0.45.0

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

@@ -0,0 +1,993 @@
+import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
+import { isFileMarker } from "../../../lib/normalized-data.js";
+import { reads, useReadQueries, useReadQuery } from "../../../lib/studio-reads.js";
+import { cn } from "../../../lib/utils.js";
+import { blockMutations, repeatableItemMutations } from "../../../lib/queries.js";
+import { SingleAssetFieldEditor } from "./AssetFieldEditor.js";
+import { MultipleAssetFieldEditor } from "./MultipleAssetFieldEditor.js";
+import { editorAssetField } from "../../content/collection-form.js";
+import { isBlockPlacement, previewStore, recordPlacement, selectionBlockId, selectionField, selectionForOwner, selectionItemId } from "../previewStore.js";
+import { useEditingFrame } from "../editingFrame.js";
+import { PreviewEditingOwnerContext } from "../previewSelection.js";
+import { fieldTypesDictionary } from "../../../core/lib/fieldTypes.js";
+import { selectionHoverMessage } from "../overlayMessages.js";
+import { usePageRecordPlacer } from "../pageRecord.js";
+import { contentFieldSchema } from "./contentFieldSchema.js";
+import { useRepeatableItemActions } from "./useRepeatableItemActions.js";
+import { ItemFieldsEditor, formatFieldName } from "./ItemFieldsEditor.js";
+import { LinkFieldEditor } from "./LinkFieldEditor.js";
+import { SidebarSection, SidebarSectionContent, SidebarSectionHeader } from "./SidebarSection.js";
+import { useFieldWriter } from "./useFieldWriter.js";
+import { useRecordView } from "./useRecordView.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { useSelector } from "@xstate/store-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMutation } from "@tanstack/react-query";
+import { Button } from "@camox/ui/button";
+import { Label } from "@camox/ui/label";
+import { Switch } from "@camox/ui/switch";
+import { CirclePlus, Trash2 } from "lucide-react";
+import { ButtonGroup } from "@camox/ui/button-group";
+import { Spinner } from "@camox/ui/spinner";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@camox/ui/select";
+
+//#region src/features/preview/components/SelectionEditor.tsx
+const EMPTY_CONTENT = {};
+const getSettingsFields = (schema) => {
+	const properties = schema?.properties;
+	if (!properties) return [];
+	return Object.keys(properties).map((fieldName) => {
+		const prop = properties[fieldName];
+		return {
+			name: fieldName,
+			fieldType: prop.fieldType,
+			label: prop.title,
+			enumLabels: prop.enumLabels,
+			enumValues: prop.enum
+		};
+	});
+};
+/**
+* Builds the path of fieldNames from the block root to the given item,
+* then walks the schema down that path to return the sub-schema for the item's fields.
+*/
+const getSchemaForItem = (contentSchema, itemId, itemsMap) => {
+	const path = [];
+	let current = itemsMap.get(itemId);
+	while (current) {
+		path.unshift(current.fieldName);
+		current = current.parentItemId ? itemsMap.get(current.parentItemId) : void 0;
+	}
+	let schema = contentSchema;
+	for (const fieldName of path) {
+		const prop = schema?.properties?.[fieldName];
+		if (!prop?.items) return null;
+		schema = prop.items;
+	}
+	return schema;
+};
+/**
+* Like `getSchemaForItem` but returns the **array** schema (one level above
+* the items schema), where per-item settings metadata lives.
+*/
+const getArraySchemaForItem = (contentSchema, itemId, itemsMap) => {
+	const path = [];
+	let current = itemsMap.get(itemId);
+	while (current) {
+		path.unshift(current.fieldName);
+		current = current.parentItemId ? itemsMap.get(current.parentItemId) : void 0;
+	}
+	let schema = contentSchema;
+	for (let i = 0; i < path.length; i++) {
+		const prop = schema?.properties?.[path[i]];
+		if (!prop?.items) return null;
+		if (i === path.length - 1) return prop;
+		schema = prop.items;
+	}
+	return null;
+};
+/**
+* Builds the ancestor chain from root to this item (inclusive).
+* Returns items in order from root-most ancestor to the item itself.
+*/
+const buildAncestorChain = (itemId, itemsMap) => {
+	const chain = [];
+	let current = itemsMap.get(itemId);
+	while (current) {
+		chain.unshift(current);
+		current = current.parentItemId ? itemsMap.get(current.parentItemId) : void 0;
+	}
+	return chain;
+};
+const SelectionEditor = () => {
+	const $ = c(2);
+	const owner = React.useContext(PreviewEditingOwnerContext);
+	if (owner == null) return null;
+	let t0;
+	if ($[0] !== owner) {
+		t0 = /* @__PURE__ */ jsx(SelectionEditorContent, { owner });
+		$[0] = owner;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+};
+const SelectionEditorContent = (t0) => {
+	const $ = c(131);
+	const { owner } = t0;
+	const camoxApp = useCamoxApp();
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = blockMutations.updateSettings();
+		$[0] = t1;
+	} else t1 = $[0];
+	const updateSettings = useMutation(t1);
+	let t2;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = repeatableItemMutations.updateSettings();
+		$[1] = t2;
+	} else t2 = $[1];
+	const updateRepeatableSettings = useMutation(t2);
+	let t3;
+	if ($[2] !== owner) {
+		t3 = (state) => selectionForOwner(state.context, owner);
+		$[2] = owner;
+		$[3] = t3;
+	} else t3 = $[3];
+	const selection = useSelector(previewStore, t3);
+	const { send } = useEditingFrame();
+	const [hoveredBreadcrumb, setHoveredBreadcrumb] = React.useState(null);
+	let t4;
+	let t5;
+	if ($[4] !== hoveredBreadcrumb || $[5] !== selection || $[6] !== send) {
+		t4 = () => {
+			if (!hoveredBreadcrumb || hoveredBreadcrumb.selection !== selection) return;
+			send(selectionHoverMessage(hoveredBreadcrumb.target, true));
+			return () => send(selectionHoverMessage(hoveredBreadcrumb.target, false));
+		};
+		t5 = [
+			hoveredBreadcrumb,
+			send,
+			selection
+		];
+		$[4] = hoveredBreadcrumb;
+		$[5] = selection;
+		$[6] = send;
+		$[7] = t4;
+		$[8] = t5;
+	} else {
+		t4 = $[7];
+		t5 = $[8];
+	}
+	React.useEffect(t4, t5);
+	let blockId;
+	let currentItemId;
+	let t6;
+	let t7;
+	if ($[9] !== selection) {
+		blockId = selectionBlockId(selection);
+		currentItemId = selectionItemId(selection);
+		t6 = useReadQuery;
+		t7 = reads.blockBundle(blockId);
+		$[9] = selection;
+		$[10] = blockId;
+		$[11] = currentItemId;
+		$[12] = t6;
+		$[13] = t7;
+	} else {
+		blockId = $[10];
+		currentItemId = $[11];
+		t6 = $[12];
+		t7 = $[13];
+	}
+	const t8 = blockId != null;
+	let t9;
+	if ($[14] !== t8) {
+		t9 = { enabled: t8 };
+		$[14] = t8;
+		$[15] = t9;
+	} else t9 = $[15];
+	const { data: blockBundle } = t6(t7, t9);
+	const block = blockBundle?.block ?? null;
+	blockBundle?.repeatableItems;
+	let t10;
+	if ($[16] !== blockBundle?.repeatableItems) {
+		t10 = blockBundle?.repeatableItems ?? [];
+		$[16] = blockBundle?.repeatableItems;
+		$[17] = t10;
+	} else t10 = $[17];
+	let t11;
+	if ($[18] !== t10) {
+		t11 = new Map(t10.map(_temp));
+		$[18] = t10;
+		$[19] = t11;
+	} else t11 = $[19];
+	const itemsMap = t11;
+	let t12;
+	if ($[20] !== blockBundle?.files) {
+		t12 = () => (blockBundle?.files ?? []).map(_temp2);
+		$[20] = blockBundle?.files;
+		$[21] = t12;
+	} else t12 = $[21];
+	blockBundle?.files;
+	let t13;
+	if ($[22] !== t12) {
+		t13 = t12();
+		$[22] = t12;
+		$[23] = t13;
+	} else t13 = $[23];
+	const fileIds = t13;
+	let t14;
+	if ($[24] !== fileIds) {
+		t14 = fileIds.map(_temp3);
+		$[24] = fileIds;
+		$[25] = t14;
+	} else t14 = $[25];
+	const fileResults = useReadQueries(t14);
+	blockBundle?.files;
+	let t15;
+	if ($[26] !== blockBundle?.files) {
+		t15 = blockBundle?.files ?? [];
+		$[26] = blockBundle?.files;
+		$[27] = t15;
+	} else t15 = $[27];
+	let map;
+	if ($[28] !== fileIds.length || $[29] !== fileResults || $[30] !== t15) {
+		map = new Map(t15.map(_temp4));
+		for (let i_0 = 0; i_0 < fileIds.length; i_0++) {
+			const data = fileResults[i_0]?.data;
+			if (data) map.set(data.id, data);
+		}
+		$[28] = fileIds.length;
+		$[29] = fileResults;
+		$[30] = t15;
+		$[31] = map;
+	} else map = $[31];
+	const filesMap = map;
+	let t16;
+	if ($[32] !== block || $[33] !== camoxApp) {
+		t16 = block ? camoxApp.getBlockById(block.type) : null;
+		$[32] = block;
+		$[33] = camoxApp;
+		$[34] = t16;
+	} else t16 = $[34];
+	const blockDef = t16;
+	const pagePlacer = usePageRecordPlacer();
+	const layoutRecordSelected = (selection?.type === "record" || selection?.type === "record-field") && !isBlockPlacement(selection);
+	let t17;
+	if ($[35] !== currentItemId || $[36] !== itemsMap) {
+		t17 = currentItemId != null ? itemsMap.get(currentItemId) : void 0;
+		$[35] = currentItemId;
+		$[36] = itemsMap;
+		$[37] = t17;
+	} else t17 = $[37];
+	const placerItem = t17;
+	let t18;
+	bb0: {
+		if (!block || !blockDef) {
+			t18 = null;
+			break bb0;
+		}
+		if (currentItemId == null) {
+			let t19;
+			if ($[38] !== block || $[39] !== blockDef._internal.contentSchema) {
+				t19 = {
+					...block,
+					contentSchema: blockDef._internal.contentSchema
+				};
+				$[38] = block;
+				$[39] = blockDef._internal.contentSchema;
+				$[40] = t19;
+			} else t19 = $[40];
+			t18 = t19;
+			break bb0;
+		}
+		if (!placerItem) {
+			t18 = null;
+			break bb0;
+		}
+		let t19;
+		if ($[41] !== blockDef._internal.contentSchema || $[42] !== currentItemId || $[43] !== itemsMap) {
+			t19 = getSchemaForItem(blockDef._internal.contentSchema, currentItemId, itemsMap);
+			$[41] = blockDef._internal.contentSchema;
+			$[42] = currentItemId;
+			$[43] = itemsMap;
+			$[44] = t19;
+		} else t19 = $[44];
+		let t20;
+		if ($[45] !== placerItem || $[46] !== t19) {
+			t20 = {
+				...placerItem,
+				contentSchema: t19
+			};
+			$[45] = placerItem;
+			$[46] = t19;
+			$[47] = t20;
+		} else t20 = $[47];
+		t18 = t20;
+	}
+	const t19 = layoutRecordSelected ? pagePlacer : t18;
+	let t20;
+	if ($[48] !== owner || $[49] !== selection || $[50] !== t19) {
+		t20 = {
+			owner,
+			selection,
+			placer: t19
+		};
+		$[48] = owner;
+		$[49] = selection;
+		$[50] = t19;
+		$[51] = t20;
+	} else t20 = $[51];
+	const { recordView, viewSelection, recordCrumbs } = useRecordView(t20);
+	const selectedField = recordView?.selection.type === "record-field" ? {
+		fieldName: recordView.selection.recordFieldName,
+		fieldType: recordView.selection.recordFieldType
+	} : selectionField(viewSelection);
+	let t21;
+	if ($[52] !== blockDef) {
+		t21 = blockDef ? getSettingsFields(blockDef._internal.settingsSchema) : [];
+		$[52] = blockDef;
+		$[53] = t21;
+	} else t21 = $[53];
+	const settingsFields = t21;
+	let t22;
+	bb1: {
+		if (!blockDef || currentItemId == null) {
+			t22 = null;
+			break bb1;
+		}
+		let t23;
+		if ($[54] !== blockDef._internal.contentSchema || $[55] !== currentItemId || $[56] !== itemsMap) {
+			t23 = getArraySchemaForItem(blockDef._internal.contentSchema, currentItemId, itemsMap);
+			$[54] = blockDef._internal.contentSchema;
+			$[55] = currentItemId;
+			$[56] = itemsMap;
+			$[57] = t23;
+		} else t23 = $[57];
+		t22 = t23;
+	}
+	const itemArraySchema = t22;
+	const t23 = itemArraySchema?.itemSettingsSchema;
+	let t24;
+	if ($[58] !== t23) {
+		t24 = getSettingsFields(t23);
+		$[58] = t23;
+		$[59] = t24;
+	} else t24 = $[59];
+	const itemSettingsFields = t24;
+	const recordSchema = recordView?.collection._internal.contentSchema;
+	const recordInList = recordView?.inList === true;
+	let t25;
+	bb2: {
+		if (recordSchema) {
+			t25 = recordSchema;
+			break bb2;
+		}
+		if (!blockDef) {
+			t25 = null;
+			break bb2;
+		}
+		if (currentItemId == null) {
+			t25 = blockDef._internal.contentSchema;
+			break bb2;
+		}
+		let t26;
+		if ($[60] !== blockDef._internal.contentSchema || $[61] !== currentItemId || $[62] !== itemsMap) {
+			t26 = getSchemaForItem(blockDef._internal.contentSchema, currentItemId, itemsMap);
+			$[60] = blockDef._internal.contentSchema;
+			$[61] = currentItemId;
+			$[62] = itemsMap;
+			$[63] = t26;
+		} else t26 = $[63];
+		t25 = t26;
+	}
+	const currentSchema = t25;
+	let t26;
+	if ($[64] !== currentItemId || $[65] !== itemsMap) {
+		t26 = currentItemId != null ? itemsMap.get(currentItemId) : null;
+		$[64] = currentItemId;
+		$[65] = itemsMap;
+		$[66] = t26;
+	} else t26 = $[66];
+	const currentItem = t26;
+	const isItemLoading = currentItemId != null && !currentItem;
+	let t27;
+	bb3: {
+		if (!currentItem) {
+			t27 = 0;
+			break bb3;
+		}
+		let count = 0;
+		for (const it of itemsMap.values()) if (it.fieldName === currentItem.fieldName && it.parentItemId === currentItem.parentItemId) count++;
+		t27 = count;
+	}
+	const siblingCount = t27;
+	const t28 = block?.id ?? "";
+	const t29 = currentItem?.fieldName ?? "";
+	const t30 = currentItem?.parentItemId ?? null;
+	const t31 = itemArraySchema;
+	let t32;
+	if ($[67] !== siblingCount || $[68] !== t28 || $[69] !== t29 || $[70] !== t30 || $[71] !== t31) {
+		t32 = {
+			blockId: t28,
+			fieldName: t29,
+			parentItemId: t30,
+			arraySchema: t31,
+			siblingCount
+		};
+		$[67] = siblingCount;
+		$[68] = t28;
+		$[69] = t29;
+		$[70] = t30;
+		$[71] = t31;
+		$[72] = t32;
+	} else t32 = $[72];
+	const { canAdd: canAddSibling, addItem: addSibling, canRemove: canRemoveCurrent, removeItem: removeCurrent } = useRepeatableItemActions(t32);
+	const recordContent = recordView?.record.content;
+	const rawCurrentData = currentItem ? currentItem.content : block?.content ?? EMPTY_CONTENT;
+	let t33;
+	bb4: {
+		if (recordContent) {
+			let t34;
+			if ($[73] !== recordContent || $[74] !== recordSchema) {
+				t34 = Object.fromEntries(Object.entries(recordContent).map((t35) => {
+					const [key, value] = t35;
+					return [key, editorAssetField(contentFieldSchema(recordSchema, key)?.fieldType, value)];
+				}));
+				$[73] = recordContent;
+				$[74] = recordSchema;
+				$[75] = t34;
+			} else t34 = $[75];
+			t33 = t34;
+			break bb4;
+		}
+		let t34;
+		if ($[76] !== filesMap) {
+			t34 = (marker) => {
+				const file = filesMap.get(marker._fileId);
+				return file ? {
+					url: file.url,
+					alt: file.alt,
+					filename: file.filename,
+					mimeType: file.mimeType,
+					_fileId: marker._fileId
+				} : {
+					url: "",
+					alt: "",
+					filename: "",
+					mimeType: ""
+				};
+			};
+			$[76] = filesMap;
+			$[77] = t34;
+		} else t34 = $[77];
+		const resolveFile = t34;
+		let resolved_0;
+		if ($[78] !== rawCurrentData || $[79] !== resolveFile) {
+			const resolveValue = (value_0) => {
+				if (isFileMarker(value_0)) return resolveFile(value_0);
+				if (Array.isArray(value_0)) return value_0.map(resolveValue);
+				if (value_0 && typeof value_0 === "object" && !Array.isArray(value_0)) {
+					const obj = value_0;
+					const resolved = {};
+					for (const [k, v] of Object.entries(obj)) resolved[k] = resolveValue(v);
+					return resolved;
+				}
+				return value_0;
+			};
+			resolved_0 = {};
+			for (const [key_0, value_1] of Object.entries(rawCurrentData)) resolved_0[key_0] = resolveValue(value_1);
+			$[78] = rawCurrentData;
+			$[79] = resolveFile;
+			$[80] = resolved_0;
+		} else resolved_0 = $[80];
+		t33 = resolved_0;
+	}
+	const currentData = t33;
+	const fieldInfo = selectedField ? {
+		...selectedField,
+		fieldType: contentFieldSchema(currentSchema, selectedField.fieldName)?.fieldType ?? selectedField.fieldType
+	} : null;
+	const isViewingLink = fieldInfo?.fieldType === "Link";
+	const linkFieldName = isViewingLink ? fieldInfo.fieldName : null;
+	const isViewingImage = fieldInfo?.fieldType === "Image" || fieldInfo?.fieldType === "ImageList";
+	const imageFieldName = isViewingImage ? fieldInfo.fieldName : null;
+	const isViewingFile = fieldInfo?.fieldType === "File" || fieldInfo?.fieldType === "FileList";
+	const fileFieldName = isViewingFile ? fieldInfo.fieldName : null;
+	const isViewingAsset = isViewingImage || isViewingFile;
+	const assetFieldName = imageFieldName ?? fileFieldName;
+	const assetType = isViewingImage ? "Image" : "File";
+	const multipleAssetType = isViewingAsset && assetFieldName ? contentFieldSchema(currentSchema, assetFieldName)?.fieldType : void 0;
+	const isMultipleAsset = multipleAssetType === "ImageList" || multipleAssetType === "FileList";
+	const assetProperty = recordView && assetFieldName ? contentFieldSchema(currentSchema, assetFieldName) : void 0;
+	const assetAccept = assetProperty?.items?.accept ?? assetProperty?.accept;
+	const fieldIdPrefix = React.useId();
+	const blockIdForWrites = block?.id;
+	const recordForWrites = recordView?.record;
+	let t34;
+	bb5: {
+		if (recordForWrites) {
+			let t35;
+			if ($[81] !== recordForWrites) {
+				t35 = {
+					kind: "record",
+					record: recordForWrites
+				};
+				$[81] = recordForWrites;
+				$[82] = t35;
+			} else t35 = $[82];
+			t34 = t35;
+			break bb5;
+		}
+		if (blockIdForWrites == null) {
+			t34 = null;
+			break bb5;
+		}
+		if (currentItemId == null) {
+			let t35;
+			if ($[83] !== blockIdForWrites) {
+				t35 = {
+					kind: "block",
+					blockId: blockIdForWrites
+				};
+				$[83] = blockIdForWrites;
+				$[84] = t35;
+			} else t35 = $[84];
+			t34 = t35;
+			break bb5;
+		}
+		let t35;
+		if ($[85] !== blockIdForWrites || $[86] !== currentItemId) {
+			t35 = {
+				kind: "item",
+				blockId: blockIdForWrites,
+				itemId: currentItemId
+			};
+			$[85] = blockIdForWrites;
+			$[86] = currentItemId;
+			$[87] = t35;
+		} else t35 = $[87];
+		t34 = t35;
+	}
+	const writeField = useFieldWriter(t34, currentSchema);
+	const ancestorChain = currentItemId != null ? buildAncestorChain(currentItemId, itemsMap) : [];
+	if (!currentSchema || !recordView && (!block || !blockDef)) {
+		let t35;
+		if ($[88] === Symbol.for("react.memo_cache_sentinel")) {
+			t35 = /* @__PURE__ */ jsxs("div", {
+				className: "text-muted-foreground flex flex-1 items-center justify-center px-2 text-sm",
+				children: [/* @__PURE__ */ jsx(Spinner, { className: "mr-2 size-3.5" }), " Loading block..."]
+			});
+			$[88] = t35;
+		} else t35 = $[88];
+		return t35;
+	}
+	const fieldHasOwnView = fieldInfo ? fieldTypesDictionary[fieldInfo.fieldType].hasOwnView : false;
+	const blockCrumbs = (block_0, blockDef_0) => [{
+		key: "block",
+		label: blockDef_0._internal.title,
+		isCurrent: ancestorChain.length === 0 && !fieldHasOwnView && !recordView,
+		onClick: () => previewStore.send({
+			type: "setFocusedBlock",
+			...owner,
+			blockId: block_0.id
+		}),
+		hoverTarget: {
+			type: "block",
+			blockId: block_0.id
+		}
+	}, ...ancestorChain.flatMap((ancestor) => [{
+		key: `repeater-${ancestor.id}`,
+		label: getArraySchemaForItem(blockDef_0._internal.contentSchema, ancestor.id, itemsMap)?.title ?? formatFieldName(ancestor.fieldName),
+		isCurrent: false,
+		hoverTarget: {
+			type: "block-field",
+			blockId: block_0.id,
+			fieldName: ancestor.fieldName,
+			fieldType: "Repeater"
+		},
+		onClick: () => previewStore.send({
+			type: "selectTarget",
+			...owner,
+			selection: ancestor.parentItemId == null ? {
+				type: "block-field",
+				blockId: block_0.id,
+				fieldName: ancestor.fieldName,
+				fieldType: "Repeater"
+			} : {
+				type: "item-field",
+				blockId: block_0.id,
+				itemId: ancestor.parentItemId,
+				fieldName: ancestor.fieldName,
+				fieldType: "Repeater"
+			}
+		})
+	}, {
+		key: `item-${ancestor.id}`,
+		label: ancestor.summary || "Item",
+		hoverTarget: {
+			type: "item",
+			blockId: block_0.id,
+			itemId: ancestor.id
+		},
+		isCurrent: ancestor.id === currentItemId && !fieldHasOwnView && !recordView && ancestor.id === ancestorChain[ancestorChain.length - 1]?.id,
+		onClick: () => previewStore.send({
+			type: "selectItem",
+			...owner,
+			blockId: block_0.id,
+			itemId: ancestor.id
+		})
+	}])];
+	const navigationItems = [
+		{
+			key: "page",
+			hoverTarget: null,
+			label: owner.kind === "page" ? "Page" : "Layout",
+			isCurrent: false,
+			onClick: _temp5
+		},
+		...block && blockDef ? blockCrumbs(block, blockDef) : [],
+		...recordCrumbs(fieldHasOwnView),
+		...fieldHasOwnView && fieldInfo ? [{
+			key: `field-${fieldInfo.fieldName}`,
+			label: contentFieldSchema(currentSchema, fieldInfo.fieldName)?.title ?? formatFieldName(fieldInfo.fieldName),
+			isCurrent: true,
+			onClick: void 0,
+			hoverTarget: selection ?? void 0
+		}] : []
+	];
+	const T0 = SidebarSection;
+	const t35 = "bottom";
+	const t36 = "pt-3";
+	const t37 = "Selection path";
+	const t38 = "text-muted-foreground text-sm";
+	const t39 = "flex flex-col";
+	const t40 = navigationItems.map((item, index) => {
+		const isFirstItem = index === 0;
+		const isLastItem = index === navigationItems.length - 1;
+		return /* @__PURE__ */ jsxs("li", {
+			className: "relative min-w-0 pl-6",
+			onMouseEnter: () => setHoveredBreadcrumb(!item.isCurrent && item.hoverTarget !== void 0 ? {
+				target: item.hoverTarget,
+				selection
+			} : null),
+			onMouseLeave: () => setHoveredBreadcrumb(null),
+			onClickCapture: () => setHoveredBreadcrumb(null),
+			children: [/* @__PURE__ */ jsxs("svg", {
+				"aria-hidden": "true",
+				className: "text-muted-foreground pointer-events-none absolute top-0 left-0 h-7 w-4",
+				fill: "none",
+				preserveAspectRatio: "none",
+				viewBox: "0 0 16 28",
+				children: [
+					!isFirstItem && /* @__PURE__ */ jsx("path", {
+						d: "M8 0 V10",
+						stroke: "currentColor",
+						strokeWidth: "1.5",
+						vectorEffect: "non-scaling-stroke"
+					}),
+					!isLastItem && /* @__PURE__ */ jsx("path", {
+						d: "M8 18 V28",
+						stroke: "currentColor",
+						strokeWidth: "1.5",
+						vectorEffect: "non-scaling-stroke"
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						className: "fill-background",
+						cx: "8",
+						cy: "14",
+						r: "4",
+						stroke: "currentColor",
+						strokeWidth: "1.5",
+						vectorEffect: "non-scaling-stroke"
+					})
+				]
+			}), item.onClick ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: cn("hover:text-foreground flex h-7 min-w-0 cursor-pointer items-center truncate text-left transition-colors", item.isCurrent && "text-foreground font-medium"),
+				onClick: item.onClick,
+				children: item.label
+			}) : /* @__PURE__ */ jsx("span", {
+				className: "text-foreground block h-7 min-w-0 truncate leading-7 font-medium",
+				children: item.label
+			})]
+		}, item.key);
+	});
+	let t41;
+	if ($[89] !== t40) {
+		t41 = /* @__PURE__ */ jsx("nav", {
+			"aria-label": t37,
+			className: t38,
+			children: /* @__PURE__ */ jsx("ol", {
+				className: t39,
+				children: t40
+			})
+		});
+		$[89] = t40;
+		$[90] = t41;
+	} else t41 = $[90];
+	let t42;
+	if ($[91] !== T0 || $[92] !== t41) {
+		t42 = /* @__PURE__ */ jsx(T0, {
+			divider: t35,
+			className: t36,
+			children: t41
+		});
+		$[91] = T0;
+		$[92] = t41;
+		$[93] = t42;
+	} else t42 = $[93];
+	let t43;
+	if ($[94] !== addSibling || $[95] !== assetAccept || $[96] !== assetFieldName || $[97] !== assetType || $[98] !== block || $[99] !== blockDef || $[100] !== canAddSibling || $[101] !== canRemoveCurrent || $[102] !== currentData || $[103] !== currentItem || $[104] !== currentItemId || $[105] !== currentSchema || $[106] !== fieldHasOwnView || $[107] !== fieldIdPrefix || $[108] !== fieldInfo?.fieldName || $[109] !== filesMap || $[110] !== isItemLoading || $[111] !== isMultipleAsset || $[112] !== isViewingAsset || $[113] !== isViewingLink || $[114] !== itemArraySchema || $[115] !== itemSettingsFields || $[116] !== itemsMap || $[117] !== linkFieldName || $[118] !== owner || $[119] !== recordInList || $[120] !== recordView || $[121] !== removeCurrent || $[122] !== send || $[123] !== settingsFields || $[124] !== updateRepeatableSettings || $[125] !== updateSettings || $[126] !== writeField) {
+		t43 = /* @__PURE__ */ jsx("div", {
+			className: "relative min-w-0 flex-1 overflow-x-hidden overflow-y-auto",
+			children: /* @__PURE__ */ jsx("div", { children: isItemLoading ? /* @__PURE__ */ jsx("div", {
+				className: "flex h-full items-center justify-center py-12",
+				children: /* @__PURE__ */ jsx(Spinner, {})
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+				!fieldHasOwnView && !recordView && currentItemId != null && currentItem && /* @__PURE__ */ jsxs(SidebarSection, {
+					divider: "bottom",
+					"aria-label": "List actions",
+					children: [/* @__PURE__ */ jsx(SidebarSectionHeader, { children: "List actions" }), /* @__PURE__ */ jsx(SidebarSectionContent, { children: /* @__PURE__ */ jsxs(ButtonGroup, {
+						"aria-label": "List actions",
+						children: [/* @__PURE__ */ jsxs(Button, {
+							type: "button",
+							variant: "outline",
+							size: "sm",
+							disabled: !canAddSibling,
+							onClick: () => {
+								if (!canAddSibling) return;
+								addSibling({ afterPosition: currentItem.position });
+							},
+							children: [/* @__PURE__ */ jsx(CirclePlus, { className: "text-muted-foreground h-4 w-4" }), "Add sibling"]
+						}), /* @__PURE__ */ jsxs(Button, {
+							type: "button",
+							variant: "outline",
+							size: "sm",
+							disabled: !canRemoveCurrent,
+							onClick: () => {
+								if (!canRemoveCurrent) return;
+								removeCurrent(currentItemId, { onSuccess: () => {
+									const selected = selectionForOwner(previewStore.getSnapshot().context, owner);
+									if (selectionItemId(selected) !== currentItemId) return;
+									previewStore.send({ type: "selectParent" });
+								} });
+							},
+							children: [/* @__PURE__ */ jsx(Trash2, { className: "text-muted-foreground h-4 w-4" }), "Delete"]
+						})]
+					}) })]
+				}),
+				recordView && !fieldHasOwnView && recordInList && /* @__PURE__ */ jsx(SidebarSection, {
+					divider: "bottom",
+					"aria-label": "Shared record",
+					children: /* @__PURE__ */ jsxs("div", {
+						"data-shared-record": true,
+						className: "space-y-1 px-2 py-3",
+						children: [/* @__PURE__ */ jsxs("p", {
+							className: "min-w-0 truncate text-sm font-medium",
+							children: ["Shared · ", recordView.collection._internal.title]
+						}), /* @__PURE__ */ jsx("p", {
+							className: "text-muted-foreground text-xs",
+							children: "Edits apply everywhere this record is used."
+						})]
+					})
+				}),
+				block && blockDef && currentItemId == null && !recordView && !fieldHasOwnView && settingsFields.length > 0 && /* @__PURE__ */ jsxs(SidebarSection, {
+					divider: "bottom",
+					"aria-label": "Block settings",
+					children: [/* @__PURE__ */ jsx(SidebarSectionHeader, { children: "Settings" }), /* @__PURE__ */ jsx(SidebarSectionContent, { children: settingsFields.map((field) => {
+						const label = field.label ?? formatFieldName(field.name);
+						const settingsValues = block.settings ?? {};
+						if (field.fieldType === "Enum") {
+							const value_2 = settingsValues[field.name] ?? (blockDef._internal.settingsSchema?.properties?.[field.name])?.default ?? "";
+							return /* @__PURE__ */ jsxs("div", {
+								className: "space-y-2",
+								children: [/* @__PURE__ */ jsx(Label, {
+									htmlFor: `setting-${field.name}`,
+									children: label
+								}), /* @__PURE__ */ jsxs(Select, {
+									value: value_2,
+									onValueChange: (newValue) => {
+										updateSettings.mutate({
+											id: block.id,
+											settings: { [field.name]: newValue }
+										});
+									},
+									children: [/* @__PURE__ */ jsx(SelectTrigger, {
+										id: `setting-${field.name}`,
+										children: /* @__PURE__ */ jsx(SelectValue, {})
+									}), /* @__PURE__ */ jsx(SelectContent, { children: field.enumValues?.map((enumValue) => /* @__PURE__ */ jsx(SelectItem, {
+										value: enumValue,
+										children: field.enumLabels?.[enumValue] ?? enumValue
+									}, enumValue)) })]
+								})]
+							}, field.name);
+						}
+						if (field.fieldType === "Boolean") {
+							const checked = settingsValues[field.name] ?? (blockDef._internal.settingsSchema?.properties?.[field.name])?.default ?? false;
+							return /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center justify-between",
+								children: [/* @__PURE__ */ jsx(Label, {
+									htmlFor: `setting-${field.name}`,
+									children: label
+								}), /* @__PURE__ */ jsx(Switch, {
+									id: `setting-${field.name}`,
+									checked,
+									onCheckedChange: (newValue_0) => {
+										updateSettings.mutate({
+											id: block.id,
+											settings: { [field.name]: newValue_0 }
+										});
+									}
+								})]
+							}, field.name);
+						}
+						return null;
+					}) })]
+				}),
+				currentItemId != null && !recordView && !fieldHasOwnView && itemSettingsFields.length > 0 && /* @__PURE__ */ jsxs(SidebarSection, {
+					divider: "bottom",
+					"aria-label": "Item settings",
+					children: [/* @__PURE__ */ jsx(SidebarSectionHeader, { children: "Settings" }), /* @__PURE__ */ jsx(SidebarSectionContent, { children: itemSettingsFields.map((field_0) => {
+						const label_0 = field_0.label ?? formatFieldName(field_0.name);
+						const itemSettingsValues = currentItem?.settings ?? {};
+						const itemSettingsSchemaProps = itemArraySchema?.itemSettingsSchema?.properties;
+						if (field_0.fieldType === "Enum") {
+							const value_3 = itemSettingsValues[field_0.name] ?? itemSettingsSchemaProps?.[field_0.name]?.default ?? "";
+							return /* @__PURE__ */ jsxs("div", {
+								className: "space-y-2",
+								children: [/* @__PURE__ */ jsx(Label, {
+									htmlFor: `item-setting-${field_0.name}`,
+									children: label_0
+								}), /* @__PURE__ */ jsxs(Select, {
+									value: value_3,
+									onValueChange: (newValue_1) => {
+										updateRepeatableSettings.mutate({
+											id: currentItemId,
+											settings: { [field_0.name]: newValue_1 }
+										});
+									},
+									children: [/* @__PURE__ */ jsx(SelectTrigger, {
+										id: `item-setting-${field_0.name}`,
+										children: /* @__PURE__ */ jsx(SelectValue, {})
+									}), /* @__PURE__ */ jsx(SelectContent, { children: field_0.enumValues?.map((enumValue_0) => /* @__PURE__ */ jsx(SelectItem, {
+										value: enumValue_0,
+										children: field_0.enumLabels?.[enumValue_0] ?? enumValue_0
+									}, enumValue_0)) })]
+								})]
+							}, field_0.name);
+						}
+						if (field_0.fieldType === "Boolean") {
+							const checked_0 = itemSettingsValues[field_0.name] ?? itemSettingsSchemaProps?.[field_0.name]?.default ?? false;
+							return /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center justify-between",
+								children: [/* @__PURE__ */ jsx(Label, {
+									htmlFor: `item-setting-${field_0.name}`,
+									children: label_0
+								}), /* @__PURE__ */ jsx(Switch, {
+									id: `item-setting-${field_0.name}`,
+									checked: checked_0,
+									onCheckedChange: (newValue_2) => {
+										updateRepeatableSettings.mutate({
+											id: currentItemId,
+											settings: { [field_0.name]: newValue_2 }
+										});
+									}
+								})]
+							}, field_0.name);
+						}
+						return null;
+					}) })]
+				}),
+				isViewingAsset && assetFieldName && isMultipleAsset && /* @__PURE__ */ jsx(MultipleAssetFieldEditor, {
+					fieldName: assetFieldName,
+					assetType,
+					currentData,
+					onFieldChange: writeField,
+					resolveLocally: recordView != null,
+					offerDelete: recordView == null,
+					accept: assetAccept
+				}),
+				isViewingAsset && assetFieldName && !isMultipleAsset && /* @__PURE__ */ jsx(SingleAssetFieldEditor, {
+					fieldName: assetFieldName,
+					assetType,
+					currentData,
+					onFieldChange: writeField,
+					resolveLocally: recordView != null,
+					offerDelete: recordView == null,
+					accept: assetAccept
+				}),
+				!isViewingAsset && isViewingLink && linkFieldName && /* @__PURE__ */ jsx("div", {
+					className: "px-2 py-4",
+					children: /* @__PURE__ */ jsx(LinkFieldEditor, {
+						fieldName: linkFieldName,
+						linkValue: currentData[linkFieldName] ?? {
+							type: "external",
+							text: "",
+							href: "",
+							newTab: false
+						},
+						onSave: (fieldName, value_4) => {
+							writeField(fieldName, value_4);
+						}
+					})
+				}),
+				!isViewingAsset && !isViewingLink && (currentItemId == null || currentItem) && /* @__PURE__ */ jsx(ItemFieldsEditor, {
+					selectedFieldName: fieldInfo?.fieldName,
+					schema: currentSchema,
+					data: currentData,
+					blockId: block?.id ?? "",
+					itemId: currentItemId ?? void 0,
+					onFieldChange: writeField,
+					postToIframe: send,
+					filesMap,
+					itemsMap,
+					references: recordView ? recordView.record.references : (currentItem ?? block)?.references,
+					placement: recordView ? recordPlacement(recordView.selection) : void 0,
+					fieldIdPrefix
+				}, `${block?.id ?? "layout"}-${recordView ? `record-${recordView.record.id}` : currentItemId ?? "block"}-${fieldInfo?.fieldName ?? "fields"}`)
+			] }) })
+		});
+		$[94] = addSibling;
+		$[95] = assetAccept;
+		$[96] = assetFieldName;
+		$[97] = assetType;
+		$[98] = block;
+		$[99] = blockDef;
+		$[100] = canAddSibling;
+		$[101] = canRemoveCurrent;
+		$[102] = currentData;
+		$[103] = currentItem;
+		$[104] = currentItemId;
+		$[105] = currentSchema;
+		$[106] = fieldHasOwnView;
+		$[107] = fieldIdPrefix;
+		$[108] = fieldInfo?.fieldName;
+		$[109] = filesMap;
+		$[110] = isItemLoading;
+		$[111] = isMultipleAsset;
+		$[112] = isViewingAsset;
+		$[113] = isViewingLink;
+		$[114] = itemArraySchema;
+		$[115] = itemSettingsFields;
+		$[116] = itemsMap;
+		$[117] = linkFieldName;
+		$[118] = owner;
+		$[119] = recordInList;
+		$[120] = recordView;
+		$[121] = removeCurrent;
+		$[122] = send;
+		$[123] = settingsFields;
+		$[124] = updateRepeatableSettings;
+		$[125] = updateSettings;
+		$[126] = writeField;
+		$[127] = t43;
+	} else t43 = $[127];
+	let t44;
+	if ($[128] !== t42 || $[129] !== t43) {
+		t44 = /* @__PURE__ */ jsxs(Fragment, { children: [t42, t43] });
+		$[128] = t42;
+		$[129] = t43;
+		$[130] = t44;
+	} else t44 = $[130];
+	return t44;
+};
+function _temp(i) {
+	return [i.id, i];
+}
+function _temp2(f) {
+	return f.id;
+}
+function _temp3(id) {
+	return reads.file(id);
+}
+function _temp4(f_0) {
+	return [f_0.id, f_0];
+}
+function _temp5() {
+	return previewStore.send({ type: "clearSelection" });
+}
+
+//#endregion
+export { SelectionEditor };