camox 0.3.0 → 0.3.1

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

@@ -2,6 +2,7 @@ import { previewStore } from "../previewStore.js";
 import { isFileMarker, isItemMarker, resolveFileMarker } from "../../../lib/normalized-data.js";
 import { SidebarLexicalEditor } from "../../../core/components/lexical/SidebarLexicalEditor.js";
 import { RepeatableItemsList } from "./RepeatableItemsList.js";
+import { c } from "react/compiler-runtime";
 import { Input } from "@camox/ui/input";
 import { Label } from "@camox/ui/label";
 import * as React from "react";
@@ -27,113 +28,173 @@ var getSchemaFieldsInOrder = (schema) => {
 		};
 	});
 };
-var ItemFieldsEditor = ({ schema, data, blockId, itemId, onFieldChange, postToIframe, filesMap, itemsMap }) => {
-	const fields = React.useMemo(() => getSchemaFieldsInOrder(schema), [schema]);
+var ItemFieldsEditor = (t0) => {
+	const $ = c(38);
+	const { schema, data, blockId, itemId, onFieldChange, postToIframe, filesMap, itemsMap } = t0;
+	let t1;
+	if ($[0] !== schema) {
+		t1 = getSchemaFieldsInOrder(schema);
+		$[0] = schema;
+		$[1] = t1;
+	} else t1 = $[1];
+	const fields = t1;
 	const timerRef = React.useRef(null);
 	const focusedFieldIdRef = React.useRef(null);
-	const getFieldId = (fieldName) => {
-		if (itemId) return `${blockId}__${itemId}__${fieldName}`;
-		return `${blockId}__${fieldName}`;
-	};
-	const scalarFields = React.useMemo(() => {
-		return fields.filter((f) => f.fieldType === "String" || f.fieldType === "Embed").map((f) => f.name);
-	}, [fields]);
-	const defaultValues = React.useMemo(() => {
-		const values = {};
-		for (const fieldName of scalarFields) values[fieldName] = data[fieldName] ?? "";
-		return values;
-	}, [data, scalarFields]);
-	const form = useForm({ defaultValues });
-	React.useEffect(() => {
-		form.update({ defaultValues });
-	}, [defaultValues, form]);
-	React.useEffect(() => {
-		return () => {
+	let t2;
+	if ($[2] !== blockId || $[3] !== itemId) {
+		t2 = (fieldName) => {
+			if (itemId) return `${blockId}__${itemId}__${fieldName}`;
+			return `${blockId}__${fieldName}`;
+		};
+		$[2] = blockId;
+		$[3] = itemId;
+		$[4] = t2;
+	} else t2 = $[4];
+	const getFieldId = t2;
+	let t3;
+	if ($[5] !== fields) {
+		t3 = fields.filter(_temp).map(_temp2);
+		$[5] = fields;
+		$[6] = t3;
+	} else t3 = $[6];
+	const scalarFields = t3;
+	let values;
+	if ($[7] !== data || $[8] !== scalarFields) {
+		values = {};
+		for (const fieldName_0 of scalarFields) values[fieldName_0] = data[fieldName_0] ?? "";
+		$[7] = data;
+		$[8] = scalarFields;
+		$[9] = values;
+	} else values = $[9];
+	const defaultValues = values;
+	let t4;
+	if ($[10] !== defaultValues) {
+		t4 = { defaultValues };
+		$[10] = defaultValues;
+		$[11] = t4;
+	} else t4 = $[11];
+	const form = useForm(t4);
+	let t5;
+	let t6;
+	if ($[12] !== defaultValues || $[13] !== form) {
+		t5 = () => {
+			form.update({ defaultValues });
+		};
+		t6 = [defaultValues, form];
+		$[12] = defaultValues;
+		$[13] = form;
+		$[14] = t5;
+		$[15] = t6;
+	} else {
+		t5 = $[14];
+		t6 = $[15];
+	}
+	React.useEffect(t5, t6);
+	let t7;
+	let t8;
+	if ($[16] !== postToIframe) {
+		t7 = () => () => {
 			if (timerRef.current) clearTimeout(timerRef.current);
 			if (focusedFieldIdRef.current) postToIframe({
 				type: "CAMOX_FOCUS_FIELD_END",
 				fieldId: focusedFieldIdRef.current
 			});
 		};
-	}, [postToIframe]);
-	const handleScalarChange = (fieldName, value, fieldApi) => {
-		fieldApi.handleChange(value);
-		if (timerRef.current) clearTimeout(timerRef.current);
-		timerRef.current = window.setTimeout(() => {
-			onFieldChange(fieldName, value);
-		}, 500);
-	};
-	const handleFieldFocus = (fieldName, fieldType) => {
-		const fieldId = getFieldId(fieldName);
-		focusedFieldIdRef.current = fieldId;
-		postToIframe({
-			type: "CAMOX_FOCUS_FIELD",
-			fieldId
-		});
-		if (itemId) previewStore.send({
-			type: "selectItemField",
-			blockId,
-			itemId,
-			fieldName,
-			fieldType
-		});
-		else previewStore.send({
-			type: "selectBlockField",
-			blockId,
-			fieldName,
-			fieldType
-		});
-	};
-	const handleFieldBlur = (fieldName) => {
-		const fieldId = getFieldId(fieldName);
-		focusedFieldIdRef.current = null;
-		postToIframe({
-			type: "CAMOX_FOCUS_FIELD_END",
-			fieldId
-		});
-		requestAnimationFrame(() => {
-			if (!focusedFieldIdRef.current) previewStore.send({ type: "selectParent" });
-		});
-	};
-	/** Dispatch the correct drill-into event depending on whether we're at block or item level. */
-	const drillIntoField = (fieldName, fieldType) => {
-		if (itemId) previewStore.send({
-			type: "selectItemField",
-			blockId,
-			itemId,
-			fieldName,
-			fieldType
-		});
-		else previewStore.send({
-			type: "selectBlockField",
-			blockId,
-			fieldName,
-			fieldType
-		});
-	};
-	return /* @__PURE__ */ jsx("form", {
-		className: "space-y-4 px-4 py-4",
-		children: fields.map((field) => {
+		t8 = [postToIframe];
+		$[16] = postToIframe;
+		$[17] = t7;
+		$[18] = t8;
+	} else {
+		t7 = $[17];
+		t8 = $[18];
+	}
+	React.useEffect(t7, t8);
+	let t10;
+	let t9;
+	if ($[19] !== blockId || $[20] !== data || $[21] !== fields || $[22] !== filesMap || $[23] !== form || $[24] !== getFieldId || $[25] !== itemId || $[26] !== itemsMap || $[27] !== onFieldChange || $[28] !== postToIframe || $[29] !== schema) {
+		const handleScalarChange = (fieldName_1, value, fieldApi) => {
+			fieldApi.handleChange(value);
+			if (timerRef.current) clearTimeout(timerRef.current);
+			timerRef.current = window.setTimeout(() => {
+				onFieldChange(fieldName_1, value);
+			}, 500);
+		};
+		const handleFieldFocus = (fieldName_2, fieldType) => {
+			const fieldId = getFieldId(fieldName_2);
+			focusedFieldIdRef.current = fieldId;
+			postToIframe({
+				type: "CAMOX_FOCUS_FIELD",
+				fieldId
+			});
+			if (itemId) previewStore.send({
+				type: "selectItemField",
+				blockId,
+				itemId,
+				fieldName: fieldName_2,
+				fieldType
+			});
+			else previewStore.send({
+				type: "selectBlockField",
+				blockId,
+				fieldName: fieldName_2,
+				fieldType
+			});
+		};
+		const handleFieldBlur = (fieldName_3) => {
+			const fieldId_0 = getFieldId(fieldName_3);
+			focusedFieldIdRef.current = null;
+			postToIframe({
+				type: "CAMOX_FOCUS_FIELD_END",
+				fieldId: fieldId_0
+			});
+			requestAnimationFrame(() => {
+				if (!focusedFieldIdRef.current) previewStore.send({ type: "selectParent" });
+			});
+		};
+		let t11;
+		if ($[32] !== blockId || $[33] !== itemId) {
+			t11 = (fieldName_4, fieldType_0) => {
+				if (itemId) previewStore.send({
+					type: "selectItemField",
+					blockId,
+					itemId,
+					fieldName: fieldName_4,
+					fieldType: fieldType_0
+				});
+				else previewStore.send({
+					type: "selectBlockField",
+					blockId,
+					fieldName: fieldName_4,
+					fieldType: fieldType_0
+				});
+			};
+			$[32] = blockId;
+			$[33] = itemId;
+			$[34] = t11;
+		} else t11 = $[34];
+		const drillIntoField = t11;
+		t9 = "space-y-4 px-4 py-4";
+		t10 = fields.map((field) => {
 			const label = field.label ?? formatFieldName(field.name);
-			const fieldId = getFieldId(field.name);
+			const fieldId_1 = getFieldId(field.name);
 			if (field.fieldType === "String") return /* @__PURE__ */ jsx(form.Field, {
 				name: field.name,
-				children: (fieldApi) => /* @__PURE__ */ jsxs("div", {
+				children: (fieldApi_0) => /* @__PURE__ */ jsxs("div", {
 					className: "space-y-2",
 					onMouseEnter: () => postToIframe({
 						type: "CAMOX_HOVER_FIELD",
-						fieldId
+						fieldId: fieldId_1
 					}),
 					onMouseLeave: () => postToIframe({
 						type: "CAMOX_HOVER_FIELD_END",
-						fieldId
+						fieldId: fieldId_1
 					}),
 					children: [/* @__PURE__ */ jsx(Label, {
 						htmlFor: field.name,
 						children: label
 					}), /* @__PURE__ */ jsx(SidebarLexicalEditor, {
-						value: fieldApi.state.value,
-						onChange: (value) => handleScalarChange(field.name, value, fieldApi),
+						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)
 					})]
@@ -141,15 +202,15 @@ var ItemFieldsEditor = ({ schema, data, blockId, itemId, onFieldChange, postToIf
 			}, field.name);
 			if (field.fieldType === "Embed") return /* @__PURE__ */ jsx(form.Field, {
 				name: field.name,
-				children: (fieldApi) => /* @__PURE__ */ jsxs("div", {
+				children: (fieldApi_1) => /* @__PURE__ */ jsxs("div", {
 					className: "space-y-2",
 					onMouseEnter: () => postToIframe({
 						type: "CAMOX_HOVER_FIELD",
-						fieldId
+						fieldId: fieldId_1
 					}),
 					onMouseLeave: () => postToIframe({
 						type: "CAMOX_HOVER_FIELD_END",
-						fieldId
+						fieldId: fieldId_1
 					}),
 					children: [/* @__PURE__ */ jsx(Label, {
 						htmlFor: field.name,
@@ -157,8 +218,8 @@ var ItemFieldsEditor = ({ schema, data, blockId, itemId, onFieldChange, postToIf
 					}), /* @__PURE__ */ jsx(Input, {
 						id: field.name,
 						type: "url",
-						value: fieldApi.state.value,
-						onChange: (e) => handleScalarChange(field.name, e.target.value, fieldApi),
+						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)
 					})]
@@ -171,11 +232,11 @@ var ItemFieldsEditor = ({ schema, data, blockId, itemId, onFieldChange, postToIf
 					className: "space-y-2",
 					onMouseEnter: () => postToIframe({
 						type: "CAMOX_HOVER_FIELD",
-						fieldId
+						fieldId: fieldId_1
 					}),
 					onMouseLeave: () => postToIframe({
 						type: "CAMOX_HOVER_FIELD_END",
-						fieldId
+						fieldId: fieldId_1
 					}),
 					children: [/* @__PURE__ */ jsx(Label, { children: label }), /* @__PURE__ */ jsxs("button", {
 						type: "button",
@@ -190,10 +251,10 @@ var ItemFieldsEditor = ({ schema, data, blockId, itemId, onFieldChange, postToIf
 			}
 			if (field.fieldType === "RepeatableItem" && field.arrayItemType === "Image") {
 				const count = (data[field.name] ?? []).length;
-				let preview;
-				if (count === 0) preview = "No images";
-				else if (count === 1) preview = "1 image";
-				else preview = `${count} images`;
+				let preview_0;
+				if (count === 0) preview_0 = "No images";
+				else if (count === 1) preview_0 = "1 image";
+				else preview_0 = `${count} images`;
 				return /* @__PURE__ */ jsxs("div", {
 					className: "space-y-2",
 					onMouseEnter: () => postToIframe({
@@ -212,17 +273,17 @@ var ItemFieldsEditor = ({ schema, data, blockId, itemId, onFieldChange, postToIf
 						onClick: () => drillIntoField(field.name, "Image"),
 						children: [/* @__PURE__ */ jsx(Images, { className: "text-muted-foreground h-4 w-4 shrink-0" }), /* @__PURE__ */ jsx("span", {
 							className: "truncate",
-							children: preview
+							children: preview_0
 						})]
 					})]
 				}, field.name);
 			}
 			if (field.fieldType === "RepeatableItem" && field.arrayItemType === "File") {
-				const count = (data[field.name] ?? []).length;
-				let preview;
-				if (count === 0) preview = "No files";
-				else if (count === 1) preview = "1 file";
-				else preview = `${count} files`;
+				const count_0 = (data[field.name] ?? []).length;
+				let preview_1;
+				if (count_0 === 0) preview_1 = "No files";
+				else if (count_0 === 1) preview_1 = "1 file";
+				else preview_1 = `${count_0} files`;
 				return /* @__PURE__ */ jsxs("div", {
 					className: "space-y-2",
 					onMouseEnter: () => postToIframe({
@@ -241,23 +302,23 @@ var ItemFieldsEditor = ({ schema, data, blockId, itemId, onFieldChange, postToIf
 						onClick: () => drillIntoField(field.name, "File"),
 						children: [/* @__PURE__ */ jsx(FileIcon, { className: "text-muted-foreground h-4 w-4 shrink-0" }), /* @__PURE__ */ jsx("span", {
 							className: "truncate",
-							children: preview
+							children: preview_1
 						})]
 					})]
 				}, field.name);
 			}
 			if (field.fieldType === "Image") {
 				const rawImage = data[field.name];
-				const preview = (isFileMarker(rawImage) ? resolveFileMarker(rawImage, filesMap) : rawImage)?.filename || "No image";
+				const preview_2 = (isFileMarker(rawImage) ? resolveFileMarker(rawImage, filesMap) : rawImage)?.filename || "No image";
 				return /* @__PURE__ */ jsxs("div", {
 					className: "space-y-2",
 					onMouseEnter: () => postToIframe({
 						type: "CAMOX_HOVER_FIELD",
-						fieldId
+						fieldId: fieldId_1
 					}),
 					onMouseLeave: () => postToIframe({
 						type: "CAMOX_HOVER_FIELD_END",
-						fieldId
+						fieldId: fieldId_1
 					}),
 					children: [/* @__PURE__ */ jsx(Label, { children: label }), /* @__PURE__ */ jsxs("button", {
 						type: "button",
@@ -265,23 +326,23 @@ var ItemFieldsEditor = ({ schema, data, blockId, itemId, onFieldChange, postToIf
 						onClick: () => drillIntoField(field.name, "Image"),
 						children: [/* @__PURE__ */ jsx(ImageIcon, { className: "text-muted-foreground h-4 w-4 shrink-0" }), /* @__PURE__ */ jsx("span", {
 							className: "truncate",
-							children: preview
+							children: preview_2
 						})]
 					})]
 				}, field.name);
 			}
 			if (field.fieldType === "File") {
 				const rawFile = data[field.name];
-				const preview = (isFileMarker(rawFile) ? resolveFileMarker(rawFile, filesMap) : rawFile)?.filename || "No file";
+				const preview_3 = (isFileMarker(rawFile) ? resolveFileMarker(rawFile, filesMap) : rawFile)?.filename || "No file";
 				return /* @__PURE__ */ jsxs("div", {
 					className: "space-y-2",
 					onMouseEnter: () => postToIframe({
 						type: "CAMOX_HOVER_FIELD",
-						fieldId
+						fieldId: fieldId_1
 					}),
 					onMouseLeave: () => postToIframe({
 						type: "CAMOX_HOVER_FIELD_END",
-						fieldId
+						fieldId: fieldId_1
 					}),
 					children: [/* @__PURE__ */ jsx(Label, { children: label }), /* @__PURE__ */ jsxs("button", {
 						type: "button",
@@ -289,13 +350,13 @@ var ItemFieldsEditor = ({ schema, data, blockId, itemId, onFieldChange, postToIf
 						onClick: () => drillIntoField(field.name, "File"),
 						children: [/* @__PURE__ */ jsx(FileIcon, { className: "text-muted-foreground h-4 w-4 shrink-0" }), /* @__PURE__ */ jsx("span", {
 							className: "truncate",
-							children: preview
+							children: preview_3
 						})]
 					})]
 				}, field.name);
 			}
 			if (field.fieldType === "RepeatableItem") {
-				const items = (data[field.name] ?? []).map((item) => {
+				const items_1 = (data[field.name] ?? []).map((item) => {
 					if (isItemMarker(item)) return itemsMap.get(item._itemId) ?? null;
 					return item;
 				}).filter(Boolean);
@@ -303,7 +364,7 @@ var ItemFieldsEditor = ({ schema, data, blockId, itemId, onFieldChange, postToIf
 				return /* @__PURE__ */ jsxs("div", {
 					className: "space-y-2",
 					children: [/* @__PURE__ */ jsx(Label, { children: label }), /* @__PURE__ */ jsx(RepeatableItemsList, {
-						items,
+						items: items_1,
 						blockId,
 						fieldName: field.name,
 						minItems: field.minItems,
@@ -313,8 +374,41 @@ var ItemFieldsEditor = ({ schema, data, blockId, itemId, onFieldChange, postToIf
 				}, field.name);
 			}
 			return null;
-		})
-	});
+		});
+		$[19] = blockId;
+		$[20] = data;
+		$[21] = fields;
+		$[22] = filesMap;
+		$[23] = form;
+		$[24] = getFieldId;
+		$[25] = itemId;
+		$[26] = itemsMap;
+		$[27] = onFieldChange;
+		$[28] = postToIframe;
+		$[29] = schema;
+		$[30] = t10;
+		$[31] = t9;
+	} else {
+		t10 = $[30];
+		t9 = $[31];
+	}
+	let t11;
+	if ($[35] !== t10 || $[36] !== t9) {
+		t11 = /* @__PURE__ */ jsx("form", {
+			className: t9,
+			children: t10
+		});
+		$[35] = t10;
+		$[36] = t9;
+		$[37] = t11;
+	} else t11 = $[37];
+	return t11;
 };
+function _temp(f) {
+	return f.fieldType === "String" || f.fieldType === "Embed";
+}
+function _temp2(f_0) {
+	return f_0.name;
+}
 //#endregion
 export { ItemFieldsEditor, formatFieldName };