camox 0.41.0 → 0.42.0

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

@@ -1,14 +1,17 @@
 import { isFileMarker, isItemMarker, resolveFileMarker } from "../../../lib/normalized-data.js";
+import { lexicalStateToPlainText } from "../../../core/lib/lexicalState.js";
 import { previewStore } from "../previewStore.js";
 import { SidebarLexicalEditor } from "../../../core/components/lexical/SidebarLexicalEditor.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 { FileIcon, ImageIcon, Images, Link2 } from "lucide-react";
+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 { Switch } from "@camox/ui/switch";
 
 //#region src/features/preview/components/ItemFieldsEditor.tsx
 const formatFieldName = (fieldName) => {
@@ -23,6 +26,8 @@ const getSchemaFieldsInOrder = (schema) => {
 			name: fieldName,
 			fieldType: prop.fieldType,
 			label: prop.title,
+			enumLabels: prop.enumLabels,
+			enumValues: prop.enum,
 			minItems: prop.minItems,
 			maxItems: prop.maxItems
 		};
@@ -30,9 +35,9 @@ const getSchemaFieldsInOrder = (schema) => {
 };
 const DrillRow = (t0) => {
 	const $ = c(28);
-	if ($[0] !== "44742e36c00267829eb7bcad0f4d0df91633b9d7bdc99a829f13e3d1db5d9c2b") {
+	if ($[0] !== "b2eb497558ebaf4700b0ba067f5c7a528445a839255d88cef77056524cd2971c") {
 		for (let $i = 0; $i < 28; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "44742e36c00267829eb7bcad0f4d0df91633b9d7bdc99a829f13e3d1db5d9c2b";
+		$[0] = "b2eb497558ebaf4700b0ba067f5c7a528445a839255d88cef77056524cd2971c";
 	}
 	const { label, preview, Icon, onClick, hover, postToIframe } = t0;
 	let t1;
@@ -134,105 +139,118 @@ const DrillRow = (t0) => {
 	return t7;
 };
 const ItemFieldsEditor = (t0) => {
-	const $ = c(42);
-	if ($[0] !== "44742e36c00267829eb7bcad0f4d0df91633b9d7bdc99a829f13e3d1db5d9c2b") {
-		for (let $i = 0; $i < 42; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "44742e36c00267829eb7bcad0f4d0df91633b9d7bdc99a829f13e3d1db5d9c2b";
+	const $ = c(46);
+	if ($[0] !== "b2eb497558ebaf4700b0ba067f5c7a528445a839255d88cef77056524cd2971c") {
+		for (let $i = 0; $i < 46; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "b2eb497558ebaf4700b0ba067f5c7a528445a839255d88cef77056524cd2971c";
 	}
-	const { schema, data, blockId, itemId, onFieldChange, postToIframe, filesMap, itemsMap, fieldIdPrefix } = t0;
+	const { selectedFieldName, schema, data, blockId, itemId, onFieldChange, postToIframe, filesMap, itemsMap, fieldIdPrefix } = t0;
 	let t1;
-	if ($[1] !== schema) {
-		t1 = getSchemaFieldsInOrder(schema);
+	if ($[1] !== schema || $[2] !== selectedFieldName) {
+		let t2;
+		if ($[4] !== selectedFieldName) {
+			t2 = (field) => !selectedFieldName || field.name === selectedFieldName;
+			$[4] = selectedFieldName;
+			$[5] = t2;
+		} else t2 = $[5];
+		t1 = getSchemaFieldsInOrder(schema).filter(t2);
 		$[1] = schema;
-		$[2] = t1;
-	} else t1 = $[2];
+		$[2] = selectedFieldName;
+		$[3] = t1;
+	} else t1 = $[3];
 	const fields = t1;
+	const pendingSaveRef = React.useRef(null);
 	const timerRef = React.useRef(null);
 	const focusedFieldIdRef = React.useRef(null);
 	let t2;
-	if ($[3] !== blockId || $[4] !== itemId) {
+	if ($[6] !== blockId || $[7] !== itemId) {
 		t2 = (fieldName) => {
 			if (itemId != null) return `${blockId}__${itemId}__${fieldName}`;
 			return `${blockId}__${fieldName}`;
 		};
-		$[3] = blockId;
-		$[4] = itemId;
-		$[5] = t2;
-	} else t2 = $[5];
+		$[6] = blockId;
+		$[7] = itemId;
+		$[8] = t2;
+	} else t2 = $[8];
 	const getFieldId = t2;
 	let t3;
-	if ($[6] !== fieldIdPrefix) {
+	if ($[9] !== fieldIdPrefix) {
 		t3 = (fieldName_0) => `${fieldIdPrefix}-${fieldName_0}`;
-		$[6] = fieldIdPrefix;
-		$[7] = t3;
-	} else t3 = $[7];
+		$[9] = fieldIdPrefix;
+		$[10] = t3;
+	} else t3 = $[10];
 	const getFieldElementId = t3;
 	let t4;
-	if ($[8] !== fields) {
+	if ($[11] !== fields) {
 		t4 = fields.filter(_temp).map(_temp2);
-		$[8] = fields;
-		$[9] = t4;
-	} else t4 = $[9];
+		$[11] = fields;
+		$[12] = t4;
+	} else t4 = $[12];
 	const scalarFields = t4;
 	let values;
-	if ($[10] !== data || $[11] !== scalarFields) {
+	if ($[13] !== data || $[14] !== scalarFields) {
 		values = {};
 		for (const fieldName_1 of scalarFields) values[fieldName_1] = data[fieldName_1] ?? "";
-		$[10] = data;
-		$[11] = scalarFields;
-		$[12] = values;
-	} else values = $[12];
+		$[13] = data;
+		$[14] = scalarFields;
+		$[15] = values;
+	} else values = $[15];
 	const defaultValues = values;
 	let t5;
-	if ($[13] !== defaultValues) {
+	if ($[16] !== defaultValues) {
 		t5 = { defaultValues };
-		$[13] = defaultValues;
-		$[14] = t5;
-	} else t5 = $[14];
+		$[16] = defaultValues;
+		$[17] = t5;
+	} else t5 = $[17];
 	const form = useForm(t5);
 	let t6;
 	let t7;
-	if ($[15] !== defaultValues || $[16] !== form) {
+	if ($[18] !== defaultValues || $[19] !== form) {
 		t6 = () => {
 			form.update({ defaultValues });
 		};
 		t7 = [defaultValues, form];
-		$[15] = defaultValues;
-		$[16] = form;
-		$[17] = t6;
-		$[18] = t7;
+		$[18] = defaultValues;
+		$[19] = form;
+		$[20] = t6;
+		$[21] = t7;
 	} else {
-		t6 = $[17];
-		t7 = $[18];
+		t6 = $[20];
+		t7 = $[21];
 	}
 	React.useEffect(t6, t7);
 	let t8;
 	let t9;
-	if ($[19] !== postToIframe) {
+	if ($[22] !== postToIframe) {
 		t8 = () => () => {
 			if (timerRef.current) clearTimeout(timerRef.current);
+			pendingSaveRef.current?.();
+			pendingSaveRef.current = null;
 			if (focusedFieldIdRef.current) postToIframe({
 				type: "CAMOX_FOCUS_FIELD_END",
 				fieldId: focusedFieldIdRef.current
 			});
 		};
 		t9 = [postToIframe];
-		$[19] = postToIframe;
-		$[20] = t8;
-		$[21] = t9;
+		$[22] = postToIframe;
+		$[23] = t8;
+		$[24] = t9;
 	} else {
-		t8 = $[20];
-		t9 = $[21];
+		t8 = $[23];
+		t9 = $[24];
 	}
 	React.useEffect(t8, t9);
 	let t10;
 	let t11;
-	if ($[22] !== blockId || $[23] !== data || $[24] !== fields || $[25] !== filesMap || $[26] !== form || $[27] !== getFieldElementId || $[28] !== getFieldId || $[29] !== itemId || $[30] !== itemsMap || $[31] !== onFieldChange || $[32] !== postToIframe || $[33] !== schema) {
+	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) {
 		const handleScalarChange = (fieldName_2, value, fieldApi) => {
 			fieldApi.handleChange(value);
 			if (timerRef.current) clearTimeout(timerRef.current);
+			pendingSaveRef.current = () => onFieldChange(fieldName_2, value);
 			timerRef.current = window.setTimeout(() => {
-				onFieldChange(fieldName_2, value);
+				pendingSaveRef.current?.();
+				pendingSaveRef.current = null;
+				timerRef.current = null;
 			}, 500);
 		};
 		const handleFieldFocus = (fieldName_3, fieldType) => {
@@ -263,12 +281,9 @@ const ItemFieldsEditor = (t0) => {
 				type: "CAMOX_FOCUS_FIELD_END",
 				fieldId: fieldId_0
 			});
-			requestAnimationFrame(() => {
-				if (!focusedFieldIdRef.current) previewStore.send({ type: "selectParent" });
-			});
 		};
 		let t12;
-		if ($[36] !== blockId || $[37] !== itemId) {
+		if ($[40] !== blockId || $[41] !== itemId) {
 			t12 = (fieldName_5, fieldType_0) => {
 				if (itemId != null) previewStore.send({
 					type: "selectItemField",
@@ -284,174 +299,230 @@ const ItemFieldsEditor = (t0) => {
 					fieldType: fieldType_0
 				});
 			};
-			$[36] = blockId;
-			$[37] = itemId;
-			$[38] = t12;
-		} else t12 = $[38];
+			$[40] = blockId;
+			$[41] = itemId;
+			$[42] = t12;
+		} else t12 = $[42];
 		const drillIntoField = t12;
 		t10 = "space-y-4 px-2 py-4";
-		t11 = fields.map((field) => {
-			const label = field.label ?? formatFieldName(field.name);
-			const fieldId_1 = getFieldId(field.name);
-			if (field.fieldType === "String") return /* @__PURE__ */ jsx(form.Field, {
-				name: field.name,
-				children: (fieldApi_0) => /* @__PURE__ */ jsxs("div", {
-					className: "space-y-2",
-					onMouseEnter: () => postToIframe({
-						type: "CAMOX_HOVER_FIELD",
-						fieldId: fieldId_1
-					}),
-					onMouseLeave: () => postToIframe({
-						type: "CAMOX_HOVER_FIELD_END",
-						fieldId: fieldId_1
-					}),
+		t11 = fields.map((field_0) => {
+			const label = field_0.label ?? formatFieldName(field_0.name);
+			const fieldId_1 = getFieldId(field_0.name);
+			const renderField = () => {
+				if (!selectedFieldName && [
+					"String",
+					"Embed",
+					"Repeater",
+					"Enum",
+					"Boolean"
+				].includes(field_0.fieldType)) {
+					const value_0 = data[field_0.name];
+					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",
+						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),
+						hover: field_0.fieldType === "Repeater" ? {
+							variant: "repeater",
+							blockId,
+							fieldName: field_0.name
+						} : {
+							variant: "field",
+							fieldId: fieldId_1
+						},
+						postToIframe
+					}, field_0.name);
+				}
+				if (field_0.fieldType === "Boolean") return /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between",
 					children: [/* @__PURE__ */ jsx(Label, {
-						htmlFor: getFieldElementId(field.name),
+						htmlFor: getFieldElementId(field_0.name),
 						children: label
-					}), /* @__PURE__ */ jsx(SidebarLexicalEditor, {
-						id: getFieldElementId(field.name),
-						value: fieldApi_0.state.value,
-						onChange: (value_0) => handleScalarChange(field.name, value_0, fieldApi_0),
-						onFocus: () => handleFieldFocus(field.name, field.fieldType),
-						onBlur: () => handleFieldBlur(field.name)
+					}), /* @__PURE__ */ jsx(Switch, {
+						id: getFieldElementId(field_0.name),
+						checked: Boolean(data[field_0.name]),
+						onCheckedChange: (value_1) => onFieldChange(field_0.name, value_1)
 					})]
-				})
-			}, field.name);
-			if (field.fieldType === "Embed") return /* @__PURE__ */ jsx(form.Field, {
-				name: field.name,
-				children: (fieldApi_1) => /* @__PURE__ */ jsxs("div", {
+				}, field_0.name);
+				if (field_0.fieldType === "Enum") return /* @__PURE__ */ jsxs("div", {
 					className: "space-y-2",
-					onMouseEnter: () => postToIframe({
-						type: "CAMOX_HOVER_FIELD",
-						fieldId: fieldId_1
-					}),
-					onMouseLeave: () => postToIframe({
-						type: "CAMOX_HOVER_FIELD_END",
-						fieldId: fieldId_1
-					}),
 					children: [/* @__PURE__ */ jsx(Label, {
-						htmlFor: getFieldElementId(field.name),
+						htmlFor: getFieldElementId(field_0.name),
 						children: label
-					}), /* @__PURE__ */ jsx(Input, {
-						id: getFieldElementId(field.name),
-						type: "url",
-						value: fieldApi_1.state.value,
-						onChange: (e) => handleScalarChange(field.name, e.target.value, fieldApi_1),
-						onFocus: () => handleFieldFocus(field.name, field.fieldType),
-						onBlur: () => handleFieldBlur(field.name)
-					})]
-				})
-			}, field.name);
-			if (field.fieldType === "Link") {
-				const linkValue = data[field.name];
-				return /* @__PURE__ */ jsx(DrillRow, {
-					label,
-					preview: linkValue?.text || linkValue?.href || "Empty link",
-					Icon: Link2,
-					onClick: () => drillIntoField(field.name, "Link"),
-					hover: {
-						variant: "field",
-						fieldId: fieldId_1
-					},
-					postToIframe
-				}, field.name);
-			}
-			if (field.fieldType === "ImageList" || field.fieldType === "FileList") {
-				const value_1 = data[field.name];
-				const count = Array.isArray(value_1) ? value_1.length : 0;
-				const isImage = field.fieldType === "ImageList";
-				const noun = isImage ? "image" : "file";
-				let preview_0;
-				if (count === 0) preview_0 = isImage ? "No images" : "No files";
-				else if (count === 1) preview_0 = `1 ${noun}`;
-				else preview_0 = `${count} ${noun}s`;
-				return /* @__PURE__ */ jsx(DrillRow, {
-					label,
-					preview: preview_0,
-					Icon: isImage ? Images : FileIcon,
-					onClick: () => drillIntoField(field.name, isImage ? "Image" : "File"),
-					hover: {
-						variant: "repeater",
-						blockId,
-						fieldName: field.name
-					},
-					postToIframe
-				}, field.name);
-			}
-			if (field.fieldType === "Image") {
-				const rawImage = data[field.name];
-				return /* @__PURE__ */ jsx(DrillRow, {
-					label,
-					preview: (isFileMarker(rawImage) ? resolveFileMarker(rawImage, filesMap) : rawImage)?.filename || "No image",
-					Icon: ImageIcon,
-					onClick: () => drillIntoField(field.name, "Image"),
-					hover: {
-						variant: "field",
-						fieldId: fieldId_1
-					},
-					postToIframe
-				}, field.name);
-			}
-			if (field.fieldType === "File") {
-				const rawFile = data[field.name];
-				return /* @__PURE__ */ jsx(DrillRow, {
-					label,
-					preview: (isFileMarker(rawFile) ? resolveFileMarker(rawFile, filesMap) : rawFile)?.filename || "No file",
-					Icon: FileIcon,
-					onClick: () => drillIntoField(field.name, "File"),
-					hover: {
-						variant: "field",
-						fieldId: fieldId_1
-					},
-					postToIframe
-				}, field.name);
-			}
-			if (field.fieldType === "Repeater") {
-				const items = (data[field.name] ?? []).map((item) => {
-					if (isItemMarker(item)) return itemsMap.get(item._itemId) ?? null;
-					return item;
-				}).filter(Boolean);
-				const fieldSchema = schema?.properties?.[field.name];
-				return /* @__PURE__ */ jsxs("div", {
-					className: "space-y-2",
-					children: [/* @__PURE__ */ jsx(Label, { children: label }), /* @__PURE__ */ jsx(RepeatableItemsList, {
-						items,
-						blockId,
-						fieldName: field.name,
-						schema: fieldSchema
+					}), /* @__PURE__ */ jsxs(Select, {
+						value: typeof data[field_0.name] === "string" ? data[field_0.name] : "",
+						onValueChange: (value_2) => onFieldChange(field_0.name, value_2),
+						children: [/* @__PURE__ */ jsx(SelectTrigger, {
+							id: getFieldElementId(field_0.name),
+							children: /* @__PURE__ */ jsx(SelectValue, {})
+						}), /* @__PURE__ */ jsx(SelectContent, { children: field_0.enumValues?.map((value_3) => /* @__PURE__ */ jsx(SelectItem, {
+							value: value_3,
+							children: field_0.enumLabels?.[value_3] ?? value_3
+						}, value_3)) })]
 					})]
-				}, field.name);
-			}
-			return null;
+				}, field_0.name);
+				if (field_0.fieldType === "String") return /* @__PURE__ */ jsx(form.Field, {
+					name: field_0.name,
+					children: (fieldApi_0) => /* @__PURE__ */ jsxs("div", {
+						className: "space-y-2",
+						onMouseEnter: () => postToIframe({
+							type: "CAMOX_HOVER_FIELD",
+							fieldId: fieldId_1
+						}),
+						onMouseLeave: () => postToIframe({
+							type: "CAMOX_HOVER_FIELD_END",
+							fieldId: fieldId_1
+						}),
+						children: [/* @__PURE__ */ jsx(Label, {
+							htmlFor: getFieldElementId(field_0.name),
+							children: label
+						}), /* @__PURE__ */ jsx(SidebarLexicalEditor, {
+							id: getFieldElementId(field_0.name),
+							value: fieldApi_0.state.value,
+							onChange: (value_4) => handleScalarChange(field_0.name, value_4, fieldApi_0),
+							onFocus: () => handleFieldFocus(field_0.name, field_0.fieldType),
+							onBlur: () => handleFieldBlur(field_0.name)
+						})]
+					})
+				}, field_0.name);
+				if (field_0.fieldType === "Embed") return /* @__PURE__ */ jsx(form.Field, {
+					name: field_0.name,
+					children: (fieldApi_1) => /* @__PURE__ */ jsxs("div", {
+						className: "space-y-2",
+						onMouseEnter: () => postToIframe({
+							type: "CAMOX_HOVER_FIELD",
+							fieldId: fieldId_1
+						}),
+						onMouseLeave: () => postToIframe({
+							type: "CAMOX_HOVER_FIELD_END",
+							fieldId: fieldId_1
+						}),
+						children: [/* @__PURE__ */ jsx(Label, {
+							htmlFor: getFieldElementId(field_0.name),
+							children: label
+						}), /* @__PURE__ */ jsx(Input, {
+							id: getFieldElementId(field_0.name),
+							type: "url",
+							value: fieldApi_1.state.value,
+							onChange: (e) => handleScalarChange(field_0.name, e.target.value, fieldApi_1),
+							onFocus: () => handleFieldFocus(field_0.name, field_0.fieldType),
+							onBlur: () => handleFieldBlur(field_0.name)
+						})]
+					})
+				}, field_0.name);
+				if (field_0.fieldType === "Link") {
+					const linkValue = data[field_0.name];
+					return /* @__PURE__ */ jsx(DrillRow, {
+						label,
+						preview: linkValue?.text || linkValue?.href || "Empty link",
+						Icon: Link2,
+						onClick: () => drillIntoField(field_0.name, "Link"),
+						hover: {
+							variant: "field",
+							fieldId: fieldId_1
+						},
+						postToIframe
+					}, field_0.name);
+				}
+				if (field_0.fieldType === "ImageList" || field_0.fieldType === "FileList") {
+					const value_5 = data[field_0.name];
+					const count = Array.isArray(value_5) ? value_5.length : 0;
+					const isImage = field_0.fieldType === "ImageList";
+					const noun = isImage ? "image" : "file";
+					let preview_1;
+					if (count === 0) preview_1 = isImage ? "No images" : "No files";
+					else if (count === 1) preview_1 = `1 ${noun}`;
+					else preview_1 = `${count} ${noun}s`;
+					return /* @__PURE__ */ jsx(DrillRow, {
+						label,
+						preview: preview_1,
+						Icon: isImage ? Images : FileIcon,
+						onClick: () => drillIntoField(field_0.name, isImage ? "Image" : "File"),
+						hover: {
+							variant: "repeater",
+							blockId,
+							fieldName: field_0.name
+						},
+						postToIframe
+					}, field_0.name);
+				}
+				if (field_0.fieldType === "Image") {
+					const rawImage = data[field_0.name];
+					return /* @__PURE__ */ jsx(DrillRow, {
+						label,
+						preview: (isFileMarker(rawImage) ? resolveFileMarker(rawImage, filesMap) : rawImage)?.filename || "No image",
+						Icon: ImageIcon,
+						onClick: () => drillIntoField(field_0.name, "Image"),
+						hover: {
+							variant: "field",
+							fieldId: fieldId_1
+						},
+						postToIframe
+					}, field_0.name);
+				}
+				if (field_0.fieldType === "File") {
+					const rawFile = data[field_0.name];
+					return /* @__PURE__ */ jsx(DrillRow, {
+						label,
+						preview: (isFileMarker(rawFile) ? resolveFileMarker(rawFile, filesMap) : rawFile)?.filename || "No file",
+						Icon: FileIcon,
+						onClick: () => drillIntoField(field_0.name, "File"),
+						hover: {
+							variant: "field",
+							fieldId: fieldId_1
+						},
+						postToIframe
+					}, field_0.name);
+				}
+				if (field_0.fieldType === "Repeater") {
+					const items = (data[field_0.name] ?? []).map((item) => {
+						if (isItemMarker(item)) return itemsMap.get(item._itemId) ?? null;
+						return item;
+					}).filter(Boolean);
+					const fieldSchema = schema?.properties?.[field_0.name];
+					return /* @__PURE__ */ jsxs("div", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ jsx(Label, { children: label }), /* @__PURE__ */ jsx(RepeatableItemsList, {
+							items,
+							blockId,
+							fieldName: field_0.name,
+							schema: fieldSchema
+						})]
+					}, field_0.name);
+				}
+				return null;
+			};
+			return renderField();
 		});
-		$[22] = blockId;
-		$[23] = data;
-		$[24] = fields;
-		$[25] = filesMap;
-		$[26] = form;
-		$[27] = getFieldElementId;
-		$[28] = getFieldId;
-		$[29] = itemId;
-		$[30] = itemsMap;
-		$[31] = onFieldChange;
-		$[32] = postToIframe;
-		$[33] = schema;
-		$[34] = t10;
-		$[35] = t11;
+		$[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;
+		$[38] = t10;
+		$[39] = t11;
 	} else {
-		t10 = $[34];
-		t11 = $[35];
+		t10 = $[38];
+		t11 = $[39];
 	}
 	let t12;
-	if ($[39] !== t10 || $[40] !== t11) {
+	if ($[43] !== t10 || $[44] !== t11) {
 		t12 = /* @__PURE__ */ jsx("form", {
 			className: t10,
 			children: t11
 		});
-		$[39] = t10;
-		$[40] = t11;
-		$[41] = t12;
-	} else t12 = $[41];
+		$[43] = t10;
+		$[44] = t11;
+		$[45] = t12;
+	} else t12 = $[45];
 	return t12;
 };
 function _temp(f) {

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

@@ -8,9 +8,9 @@ import { useSelector } from "@xstate/store-react";
 //#region src/features/preview/components/LeftSidebar.tsx
 const LeftSidebar = (t0) => {
 	const $ = c(13);
-	if ($[0] !== "c0b8051f9d03df681e369c0b2954359f21e672e526188e45d0de7a395154e9cc") {
+	if ($[0] !== "37ec3b3a552e4e78e19e0a065e3326f676f367215b0ebda4b733ddd4a69ab079") {
 		for (let $i = 0; $i < 13; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "c0b8051f9d03df681e369c0b2954359f21e672e526188e45d0de7a395154e9cc";
+		$[0] = "37ec3b3a552e4e78e19e0a065e3326f676f367215b0ebda4b733ddd4a69ab079";
 	}
 	const { page, derivedLayout } = t0;
 	const isAddBlockSidebarOpen = useSelector(previewStore, _temp);
@@ -37,28 +37,28 @@ const LeftSidebar = (t0) => {
 		$[6] = t2;
 		$[7] = t3;
 	} else t3 = $[7];
-	let t4;
-	if ($[8] !== isAddBlockSidebarOpen) {
-		t4 = isAddBlockSidebarOpen && /* @__PURE__ */ jsx("div", {
-			className: "absolute inset-0 z-20 cursor-not-allowed",
-			style: { background: "rgba(0, 0, 0, 0.5)" },
+	const t4 = `absolute inset-0 z-20 bg-black/50 transition-opacity duration-200 motion-reduce:transition-none ${isAddBlockSidebarOpen ? "cursor-not-allowed opacity-100" : "pointer-events-none opacity-0"}`;
+	let t5;
+	if ($[8] !== t4) {
+		t5 = /* @__PURE__ */ jsx("div", {
+			className: t4,
 			"aria-hidden": "true"
 		});
-		$[8] = isAddBlockSidebarOpen;
-		$[9] = t4;
-	} else t4 = $[9];
-	let t5;
-	if ($[10] !== t3 || $[11] !== t4) {
-		t5 = /* @__PURE__ */ jsxs("aside", {
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t3 || $[11] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("aside", {
 			className: "relative flex shrink-0 flex-col border-r-2",
 			style: t1,
-			children: [t3, t4]
+			children: [t3, t5]
 		});
 		$[10] = t3;
-		$[11] = t4;
-		$[12] = t5;
-	} else t5 = $[12];
-	return t5;
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	return t6;
 };
 function _temp(state) {
 	return state.context.isAddBlockSidebarOpen;

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

@@ -26,9 +26,9 @@ const normalizeLinkValue = (value) => {
 };
 const LinkFieldEditor = (t0) => {
 	const $ = c(74);
-	if ($[0] !== "d6e76ca161ece5e3c3ab2fca39477fdbca4669ce2a59cab1e307374e6d56bc57") {
+	if ($[0] !== "cdb2f56fb4805e0de235a068b1342c61e1eade64737868f8170208f1ecf497ab") {
 		for (let $i = 0; $i < 74; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "d6e76ca161ece5e3c3ab2fca39477fdbca4669ce2a59cab1e307374e6d56bc57";
+		$[0] = "cdb2f56fb4805e0de235a068b1342c61e1eade64737868f8170208f1ecf497ab";
 	}
 	const { fieldName, linkValue: rawLinkValue, onSave } = t0;
 	let t1;
@@ -173,8 +173,7 @@ const LinkFieldEditor = (t0) => {
 			value: textField.value,
 			onChange: t16,
 			onFocus: textField.onFocus,
-			onBlur: textField.onBlur,
-			autoFocus: true
+			onBlur: textField.onBlur
 		});
 		$[33] = t15;
 		$[34] = t16;