camox 0.9.1 → 0.10.1

package/dist/features/preview/components/{CreatePageSheet.js → CreatePageModal.js}

@@ -7,21 +7,21 @@ import { PageLocationFieldset } from "./PageLocationFieldset.js";
 import { Label } from "@camox/ui/label";
 import { toast } from "@camox/ui/toaster";
 import { useMutation, useQuery } from "@tanstack/react-query";
+import { useNavigate } from "@tanstack/react-router";
 import { useSelector } from "@xstate/store/react";
 import { useEffect } from "react";
-import * as Sheet from "@camox/ui/sheet";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
-import { useNavigate } from "@tanstack/react-router";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@camox/ui/dialog";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@camox/ui/select";
 import { Spinner } from "@camox/ui/spinner";
 import { Textarea } from "@camox/ui/textarea";
 import { useForm } from "@tanstack/react-form";
 
-//#region src/features/preview/components/CreatePageSheet.tsx
-const CreatePageSheet = () => {
+//#region src/features/preview/components/CreatePageModal.tsx
+const CreatePageModal = () => {
 	const projectSlug = useProjectSlug();
-	const open = useSelector(previewStore, (state) => state.context.isCreatePageSheetOpen);
+	const open = useSelector(previewStore, (state) => state.context.isCreatePageModalOpen);
 	const createPage = useMutation(pageMutations.create());
 	const { data: project } = useQuery(projectQueries.getBySlug(projectSlug));
 	const { data: pages } = useQuery({
@@ -66,7 +66,7 @@ const CreatePageSheet = () => {
 					layoutId: values.value.layoutId,
 					hasContentDescription: !!values.value.contentDescription
 				});
-				previewStore.send({ type: "closeCreatePageSheet" });
+				previewStore.send({ type: "closeCreatePageModal" });
 				form.reset();
 				await new Promise((resolve) => setTimeout(resolve, 50));
 				navigate({ to: fullPath });
@@ -79,23 +79,20 @@ const CreatePageSheet = () => {
 	useEffect(() => {
 		if (layouts && layouts.length > 0 && !form.getFieldValue("layoutId")) form.setFieldValue("layoutId", String(layouts[0].id));
 	}, [layouts, form]);
-	return /* @__PURE__ */ jsx(Sheet.Sheet, {
+	return /* @__PURE__ */ jsx(Dialog, {
 		open,
 		onOpenChange: (value) => {
-			if (!value) previewStore.send({ type: "closeCreatePageSheet" });
+			if (!value) previewStore.send({ type: "closeCreatePageModal" });
 		},
-		children: /* @__PURE__ */ jsxs(Sheet.SheetContent, {
-			className: "flex max-h-dvh min-w-[500px] flex-col",
-			children: [/* @__PURE__ */ jsxs(Sheet.SheetHeader, {
-				className: "border-border border-b",
-				children: [/* @__PURE__ */ jsx(Sheet.SheetTitle, { children: "Create page" }), /* @__PURE__ */ jsx(Sheet.SheetDescription, { children: "Fill in the details to create a new page. It will be created as a draft." })]
-			}), /* @__PURE__ */ jsxs("form", {
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: "flex max-h-[90vh] flex-col sm:max-w-lg",
+			children: [/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: "Create page" }), /* @__PURE__ */ jsx(DialogDescription, { children: "Fill in the details to create a new page. It will be created as a draft." })] }), /* @__PURE__ */ jsxs("form", {
 				onSubmit: (e) => {
 					e.preventDefault();
 					e.stopPropagation();
 					form.handleSubmit();
 				},
-				className: "space-y-4 overflow-y-auto px-4 py-4",
+				className: "-mx-1 space-y-4 overflow-y-auto px-1 py-2",
 				children: [
 					/* @__PURE__ */ jsx(form.Field, {
 						name: "parentPageId",
@@ -106,7 +103,8 @@ const CreatePageSheet = () => {
 								onParentPageIdChange: parentField.handleChange,
 								pathSegment: pathField.state.value,
 								onPathSegmentChange: pathField.handleChange,
-								pages
+								pages,
+								autoFocusPathSegment: true
 							})
 						})
 					}),
@@ -125,11 +123,11 @@ const CreatePageSheet = () => {
 								disabled: layouts != null && layouts.length <= 1,
 								items: layouts?.map((t) => ({
 									value: String(t.id),
-									label: camoxApp.getLayoutById(t.layoutId)?.title ?? t.layoutId
+									label: camoxApp.getLayoutById(t.layoutId)?._internal.title ?? t.layoutId
 								})),
 								children: [/* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select a layout" }) }), /* @__PURE__ */ jsx(SelectContent, { children: layouts?.map((t_0) => /* @__PURE__ */ jsx(SelectItem, {
 									value: String(t_0.id),
-									children: camoxApp.getLayoutById(t_0.layoutId)?.title ?? t_0.layoutId
+									children: camoxApp.getLayoutById(t_0.layoutId)?._internal.title ?? t_0.layoutId
 								}, t_0.id)) })]
 							})]
 						})
@@ -172,4 +170,4 @@ const CreatePageSheet = () => {
 };
 
 //#endregion
-export { CreatePageSheet };
+export { CreatePageModal };

package/dist/features/preview/components/{EditPageSheet.js → EditPageModal.js}

@@ -11,33 +11,33 @@ import { c } from "react/compiler-runtime";
 import { Label } from "@camox/ui/label";
 import { toast } from "@camox/ui/toaster";
 import { useMutation, useQuery } from "@tanstack/react-query";
+import { useNavigate } from "@tanstack/react-router";
 import { useSelector } from "@xstate/store/react";
 import * as React from "react";
-import * as Sheet from "@camox/ui/sheet";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@camox/ui/tooltip";
-import { useNavigate } from "@tanstack/react-router";
 import { Globe, Info } from "lucide-react";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@camox/ui/dialog";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@camox/ui/select";
 import { Spinner } from "@camox/ui/spinner";
 import { useForm } from "@tanstack/react-form";
 import { Alert, AlertDescription, AlertTitle } from "@camox/ui/alert";
 import { Switch } from "@camox/ui/switch";
 
-//#region src/features/preview/components/EditPageSheet.tsx
-const EditPageSheet = () => {
+//#region src/features/preview/components/EditPageModal.tsx
+const EditPageModal = () => {
 	const $ = c(2);
 	const editingPageId = useSelector(previewStore, _temp);
 	let t0;
 	if ($[0] !== editingPageId) {
-		t0 = /* @__PURE__ */ jsx(EditPageSheetContent, { pageId: editingPageId });
+		t0 = /* @__PURE__ */ jsx(EditPageModalContent, { pageId: editingPageId });
 		$[0] = editingPageId;
 		$[1] = t0;
 	} else t0 = $[1];
 	return t0;
 };
-const EditPageSheetContent = ({ pageId }) => {
+const EditPageModalContent = ({ pageId }) => {
 	const projectSlug = useProjectSlug();
 	const updatePage = useMutation(pageMutations.update());
 	const setLayout = useMutation(pageMutations.setLayout());
@@ -87,7 +87,7 @@ const EditPageSheetContent = ({ pageId }) => {
 				});
 				const displayName = page.metaTitle ?? formatPathSegment(values.value.pathSegment);
 				toast.success(`Updated ${displayName} page`);
-				previewStore.send({ type: "closeEditPageSheet" });
+				previewStore.send({ type: "closeEditPageModal" });
 				form.reset();
 				navigate({ to: fullPath });
 			} catch (error) {
@@ -114,26 +114,26 @@ const EditPageSheetContent = ({ pageId }) => {
 	const isRootPage = page?.fullPath === "/";
 	const pageLayoutRecord = layouts?.find((l) => l.id === page?.layoutId);
 	const layoutDef = pageLayoutRecord ? camoxApp.getLayoutById(pageLayoutRecord.layoutId) : void 0;
-	const metaTitle = layoutDef && page ? layoutDef.buildMetaTitle({
+	const metaTitle = layoutDef && page ? layoutDef._internal.buildMetaTitle({
 		pageMetaTitle: page.metaTitle ?? "",
 		projectName: project?.name ?? "",
 		pageFullPath: page.fullPath
 	}) : page?.metaTitle ?? "";
-	return /* @__PURE__ */ jsx(Sheet.Sheet, {
+	return /* @__PURE__ */ jsx(Dialog, {
 		open: isOpen,
 		onOpenChange: (value) => {
-			if (!value) previewStore.send({ type: "closeEditPageSheet" });
+			if (!value) previewStore.send({ type: "closeEditPageModal" });
 		},
-		children: /* @__PURE__ */ jsxs(Sheet.SheetContent, {
-			className: "min-w-[880px] gap-0 overflow-hidden",
-			children: [/* @__PURE__ */ jsxs(Sheet.SheetHeader, {
-				className: "border-border border-b",
-				children: [/* @__PURE__ */ jsx(Sheet.SheetTitle, { children: "Edit page" }), /* @__PURE__ */ jsx(Sheet.SheetDescription, { children: "Update the page details." })]
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: "flex max-h-[90vh] flex-col gap-0 overflow-hidden p-0 sm:max-w-5xl",
+			children: [/* @__PURE__ */ jsxs(DialogHeader, {
+				className: "border-border border-b p-4",
+				children: [/* @__PURE__ */ jsx(DialogTitle, { children: "Edit page" }), /* @__PURE__ */ jsx(DialogDescription, { children: "Update the page details." })]
 			}), page && /* @__PURE__ */ jsxs("div", {
 				className: "flex-1 overflow-y-auto",
 				children: [
 					/* @__PURE__ */ jsxs("div", {
-						className: "border-border grid grid-cols-[200px_1fr] gap-x-8 border-b px-4 py-4",
+						className: "border-border grid grid-cols-[200px_1fr] gap-x-16 border-b px-4 py-4",
 						children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
 							className: "text-sm font-medium",
 							children: "Page structure"
@@ -148,7 +148,7 @@ const EditPageSheetContent = ({ pageId }) => {
 									e.stopPropagation();
 									form.handleSubmit();
 								},
-								className: "space-y-4",
+								className: "-mx-1 space-y-4 px-1",
 								children: [
 									isRootPage ? /* @__PURE__ */ jsxs(Alert, { children: [
 										/* @__PURE__ */ jsx(Info, { className: "size-4" }),
@@ -177,11 +177,11 @@ const EditPageSheetContent = ({ pageId }) => {
 												onValueChange: (value_0) => field.handleChange(Number(value_0)),
 												items: layouts.map((t) => ({
 													value: String(t.id),
-													label: camoxApp.getLayoutById(t.layoutId)?.title ?? t.layoutId
+													label: camoxApp.getLayoutById(t.layoutId)?._internal.title ?? t.layoutId
 												})),
 												children: [/* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select a layout" }) }), /* @__PURE__ */ jsx(SelectContent, { children: layouts.map((t_0) => /* @__PURE__ */ jsx(SelectItem, {
 													value: String(t_0.id),
-													children: camoxApp.getLayoutById(t_0.layoutId)?.title ?? t_0.layoutId
+													children: camoxApp.getLayoutById(t_0.layoutId)?._internal.title ?? t_0.layoutId
 												}, t_0.id)) })]
 											})]
 										})
@@ -206,7 +206,7 @@ const EditPageSheetContent = ({ pageId }) => {
 						})]
 					}),
 					/* @__PURE__ */ jsxs("div", {
-						className: "grid grid-cols-[200px_1fr] gap-x-8 px-4 py-4",
+						className: "grid grid-cols-[200px_1fr] gap-x-16 px-4 py-4",
 						children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
 							className: "text-sm font-medium",
 							children: "SEO data"
@@ -267,7 +267,7 @@ const EditPageSheetContent = ({ pageId }) => {
 						})]
 					}),
 					/* @__PURE__ */ jsxs("div", {
-						className: "border-border grid grid-cols-[200px_1fr] gap-x-8 border-t px-4 py-4",
+						className: "border-border grid grid-cols-[200px_1fr] gap-x-16 border-t px-4 py-4",
 						children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
 							className: "text-sm font-medium",
 							children: "Markdown content"
@@ -302,7 +302,10 @@ const SearchEnginePreview = (t0) => {
 	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
 		t2 = /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-1.5",
-			children: [t1, /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(Info, { className: "text-muted-foreground size-3.5" }) }), /* @__PURE__ */ jsx(TooltipContent, { children: "Titles are cropped after 60 characters and descriptions after 155, like Google typically does." })] })]
+			children: [t1, /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+				delay: 50,
+				render: /* @__PURE__ */ jsx(Info, { className: "text-muted-foreground size-3.5" })
+			}), /* @__PURE__ */ jsx(TooltipContent, { children: "Titles are cropped after 60 characters and descriptions after 155, like Google typically does." })] })]
 		});
 		$[1] = t2;
 	} else t2 = $[1];
@@ -466,7 +469,7 @@ const SocialPreviewSection = (t0) => {
 		t11 = /* @__PURE__ */ jsxs("div", {
 			className: "space-y-2 pt-2",
 			children: [t2, /* @__PURE__ */ jsxs("div", {
-				className: "border-border overflow-hidden rounded-lg border",
+				className: "border-border max-w-xl overflow-hidden rounded-lg border",
 				children: [t3, t10]
 			})]
 		});
@@ -525,4 +528,4 @@ function _temp(state) {
 }
 
 //#endregion
-export { EditPageSheet };
+export { EditPageModal };

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

@@ -67,7 +67,7 @@ const Frame = (t0) => {
 	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
 		t4 = () => {
 			const checkForOpenPopup = () => {
-				setHasOpenPopup(document.body.querySelector(":scope > [data-open]") !== null);
+				setHasOpenPopup(document.body.querySelector("[data-base-ui-portal] [data-open]") !== null);
 			};
 			checkForOpenPopup();
 			const observer = new MutationObserver(checkForOpenPopup);

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

@@ -30,8 +30,8 @@ const getSchemaFieldsInOrder = (schema) => {
 	});
 };
 const ItemFieldsEditor = (t0) => {
-	const $ = c(38);
-	const { schema, data, blockId, itemId, onFieldChange, postToIframe, filesMap, itemsMap } = t0;
+	const $ = c(46);
+	const { schema, data, blockId, itemId, onFieldChange, postToIframe, filesMap, itemsMap, fieldIdPrefix, autoFocusFieldName } = t0;
 	let t1;
 	if ($[0] !== schema) {
 		t1 = getSchemaFieldsInOrder(schema);
@@ -44,7 +44,7 @@ const ItemFieldsEditor = (t0) => {
 	let t2;
 	if ($[2] !== blockId || $[3] !== itemId) {
 		t2 = (fieldName) => {
-			if (itemId) return `${blockId}__${itemId}__${fieldName}`;
+			if (itemId != null) return `${blockId}__${itemId}__${fieldName}`;
 			return `${blockId}__${fieldName}`;
 		};
 		$[2] = blockId;
@@ -53,96 +53,130 @@ const ItemFieldsEditor = (t0) => {
 	} else t2 = $[4];
 	const getFieldId = t2;
 	let t3;
-	if ($[5] !== fields) {
-		t3 = fields.filter(_temp).map(_temp2);
-		$[5] = fields;
+	if ($[5] !== fieldIdPrefix) {
+		t3 = (fieldName_0) => `${fieldIdPrefix}-${fieldName_0}`;
+		$[5] = fieldIdPrefix;
 		$[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;
+	const getFieldElementId = t3;
 	let t4;
-	if ($[10] !== defaultValues) {
-		t4 = { defaultValues };
-		$[10] = defaultValues;
-		$[11] = t4;
-	} else t4 = $[11];
-	const form = useForm(t4);
+	if ($[7] !== autoFocusFieldName || $[8] !== fieldIdPrefix) {
+		t4 = {
+			fieldName: autoFocusFieldName,
+			prefix: fieldIdPrefix
+		};
+		$[7] = autoFocusFieldName;
+		$[8] = fieldIdPrefix;
+		$[9] = t4;
+	} else t4 = $[9];
+	const initialAutoFocusRef = React.useRef(t4);
 	let t5;
 	let t6;
-	if ($[12] !== defaultValues || $[13] !== form) {
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
 		t5 = () => {
-			form.update({ defaultValues });
+			const { fieldName: fieldName_1, prefix } = initialAutoFocusRef.current;
+			if (!fieldName_1) return;
+			document.getElementById(`${prefix}-${fieldName_1}`)?.focus();
 		};
-		t6 = [defaultValues, form];
-		$[12] = defaultValues;
-		$[13] = form;
-		$[14] = t5;
-		$[15] = t6;
+		t6 = [];
+		$[10] = t5;
+		$[11] = t6;
 	} else {
-		t5 = $[14];
-		t6 = $[15];
+		t5 = $[10];
+		t6 = $[11];
 	}
-	React.useEffect(t5, t6);
+	React.useLayoutEffect(t5, t6);
 	let t7;
+	if ($[12] !== fields) {
+		t7 = fields.filter(_temp).map(_temp2);
+		$[12] = fields;
+		$[13] = t7;
+	} else t7 = $[13];
+	const scalarFields = t7;
+	let values;
+	if ($[14] !== data || $[15] !== scalarFields) {
+		values = {};
+		for (const fieldName_2 of scalarFields) values[fieldName_2] = data[fieldName_2] ?? "";
+		$[14] = data;
+		$[15] = scalarFields;
+		$[16] = values;
+	} else values = $[16];
+	const defaultValues = values;
 	let t8;
-	if ($[16] !== postToIframe) {
-		t7 = () => () => {
+	if ($[17] !== defaultValues) {
+		t8 = { defaultValues };
+		$[17] = defaultValues;
+		$[18] = t8;
+	} else t8 = $[18];
+	const form = useForm(t8);
+	let t10;
+	let t9;
+	if ($[19] !== defaultValues || $[20] !== form) {
+		t9 = () => {
+			form.update({ defaultValues });
+		};
+		t10 = [defaultValues, form];
+		$[19] = defaultValues;
+		$[20] = form;
+		$[21] = t10;
+		$[22] = t9;
+	} else {
+		t10 = $[21];
+		t9 = $[22];
+	}
+	React.useEffect(t9, t10);
+	let t11;
+	let t12;
+	if ($[23] !== postToIframe) {
+		t11 = () => () => {
 			if (timerRef.current) clearTimeout(timerRef.current);
 			if (focusedFieldIdRef.current) postToIframe({
 				type: "CAMOX_FOCUS_FIELD_END",
 				fieldId: focusedFieldIdRef.current
 			});
 		};
-		t8 = [postToIframe];
-		$[16] = postToIframe;
-		$[17] = t7;
-		$[18] = t8;
+		t12 = [postToIframe];
+		$[23] = postToIframe;
+		$[24] = t11;
+		$[25] = t12;
 	} else {
-		t7 = $[17];
-		t8 = $[18];
+		t11 = $[24];
+		t12 = $[25];
 	}
-	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) => {
+	React.useEffect(t11, t12);
+	let t13;
+	let t14;
+	if ($[26] !== blockId || $[27] !== data || $[28] !== fields || $[29] !== filesMap || $[30] !== form || $[31] !== getFieldElementId || $[32] !== getFieldId || $[33] !== itemId || $[34] !== itemsMap || $[35] !== onFieldChange || $[36] !== postToIframe || $[37] !== schema) {
+		const handleScalarChange = (fieldName_3, value, fieldApi) => {
 			fieldApi.handleChange(value);
 			if (timerRef.current) clearTimeout(timerRef.current);
 			timerRef.current = window.setTimeout(() => {
-				onFieldChange(fieldName_1, value);
+				onFieldChange(fieldName_3, value);
 			}, 500);
 		};
-		const handleFieldFocus = (fieldName_2, fieldType) => {
-			const fieldId = getFieldId(fieldName_2);
+		const handleFieldFocus = (fieldName_4, fieldType) => {
+			const fieldId = getFieldId(fieldName_4);
 			focusedFieldIdRef.current = fieldId;
 			postToIframe({
 				type: "CAMOX_FOCUS_FIELD",
 				fieldId
 			});
-			if (itemId) previewStore.send({
+			if (itemId != null) previewStore.send({
 				type: "selectItemField",
 				blockId,
 				itemId,
-				fieldName: fieldName_2,
+				fieldName: fieldName_4,
 				fieldType
 			});
 			else previewStore.send({
 				type: "selectBlockField",
 				blockId,
-				fieldName: fieldName_2,
+				fieldName: fieldName_4,
 				fieldType
 			});
 		};
-		const handleFieldBlur = (fieldName_3) => {
-			const fieldId_0 = getFieldId(fieldName_3);
+		const handleFieldBlur = (fieldName_5) => {
+			const fieldId_0 = getFieldId(fieldName_5);
 			focusedFieldIdRef.current = null;
 			postToIframe({
 				type: "CAMOX_FOCUS_FIELD_END",
@@ -152,30 +186,30 @@ const ItemFieldsEditor = (t0) => {
 				if (!focusedFieldIdRef.current) previewStore.send({ type: "selectParent" });
 			});
 		};
-		let t11;
-		if ($[32] !== blockId || $[33] !== itemId) {
-			t11 = (fieldName_4, fieldType_0) => {
-				if (itemId) previewStore.send({
+		let t15;
+		if ($[40] !== blockId || $[41] !== itemId) {
+			t15 = (fieldName_6, fieldType_0) => {
+				if (itemId != null) previewStore.send({
 					type: "selectItemField",
 					blockId,
 					itemId,
-					fieldName: fieldName_4,
+					fieldName: fieldName_6,
 					fieldType: fieldType_0
 				});
 				else previewStore.send({
 					type: "selectBlockField",
 					blockId,
-					fieldName: fieldName_4,
+					fieldName: fieldName_6,
 					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) => {
+			$[40] = blockId;
+			$[41] = itemId;
+			$[42] = t15;
+		} else t15 = $[42];
+		const drillIntoField = t15;
+		t13 = "space-y-4 px-4 py-4";
+		t14 = 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, {
@@ -191,9 +225,10 @@ const ItemFieldsEditor = (t0) => {
 						fieldId: fieldId_1
 					}),
 					children: [/* @__PURE__ */ jsx(Label, {
-						htmlFor: field.name,
+						htmlFor: getFieldElementId(field.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),
@@ -214,10 +249,10 @@ const ItemFieldsEditor = (t0) => {
 						fieldId: fieldId_1
 					}),
 					children: [/* @__PURE__ */ jsx(Label, {
-						htmlFor: field.name,
+						htmlFor: getFieldElementId(field.name),
 						children: label
 					}), /* @__PURE__ */ jsx(Input, {
-						id: field.name,
+						id: getFieldElementId(field.name),
 						type: "url",
 						value: fieldApi_1.state.value,
 						onChange: (e) => handleScalarChange(field.name, e.target.value, fieldApi_1),
@@ -260,12 +295,12 @@ const ItemFieldsEditor = (t0) => {
 					className: "space-y-2",
 					onMouseEnter: () => postToIframe({
 						type: "CAMOX_HOVER_REPEATER",
-						blockId,
+						blockId: String(blockId),
 						fieldName: field.name
 					}),
 					onMouseLeave: () => postToIframe({
 						type: "CAMOX_HOVER_REPEATER_END",
-						blockId,
+						blockId: String(blockId),
 						fieldName: field.name
 					}),
 					children: [/* @__PURE__ */ jsx(Label, { children: label }), /* @__PURE__ */ jsxs("button", {
@@ -289,12 +324,12 @@ const ItemFieldsEditor = (t0) => {
 					className: "space-y-2",
 					onMouseEnter: () => postToIframe({
 						type: "CAMOX_HOVER_REPEATER",
-						blockId,
+						blockId: String(blockId),
 						fieldName: field.name
 					}),
 					onMouseLeave: () => postToIframe({
 						type: "CAMOX_HOVER_REPEATER_END",
-						blockId,
+						blockId: String(blockId),
 						fieldName: field.name
 					}),
 					children: [/* @__PURE__ */ jsx(Label, { children: label }), /* @__PURE__ */ jsxs("button", {
@@ -376,34 +411,35 @@ const ItemFieldsEditor = (t0) => {
 			}
 			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;
+		$[26] = blockId;
+		$[27] = data;
+		$[28] = fields;
+		$[29] = filesMap;
+		$[30] = form;
+		$[31] = getFieldElementId;
+		$[32] = getFieldId;
+		$[33] = itemId;
+		$[34] = itemsMap;
+		$[35] = onFieldChange;
+		$[36] = postToIframe;
+		$[37] = schema;
+		$[38] = t13;
+		$[39] = t14;
 	} else {
-		t10 = $[30];
-		t9 = $[31];
+		t13 = $[38];
+		t14 = $[39];
 	}
-	let t11;
-	if ($[35] !== t10 || $[36] !== t9) {
-		t11 = /* @__PURE__ */ jsx("form", {
-			className: t9,
-			children: t10
+	let t15;
+	if ($[43] !== t13 || $[44] !== t14) {
+		t15 = /* @__PURE__ */ jsx("form", {
+			className: t13,
+			children: t14
 		});
-		$[35] = t10;
-		$[36] = t9;
-		$[37] = t11;
-	} else t11 = $[37];
-	return t11;
+		$[43] = t13;
+		$[44] = t14;
+		$[45] = t15;
+	} else t15 = $[45];
+	return t15;
 };
 function _temp(f) {
 	return f.fieldType === "String" || f.fieldType === "Embed";