camox 0.42.0 → 0.44.0

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

@@ -1,7 +1,7 @@
 import { useProjectSlug } from "../../../lib/auth.js";
 import { usePageBlocks } from "../../../lib/normalized-data.js";
-import { layoutQueries, projectQueries } from "../../../lib/queries.js";
 import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
+import { layoutQueries, projectQueries } from "../../../lib/queries.js";
 import { previewStore, selectPreviewSource } from "../previewStore.js";
 import { PagePicker } from "./PagePicker.js";
 import { LayoutBlockItem } from "./PageTree.js";
@@ -16,10 +16,10 @@ import { PanelContent, PanelHeader } from "@camox/ui/panel";
 //#region src/features/preview/components/DerivedLayoutSidebar.tsx
 const EMPTY_PAGE = { blockIds: [] };
 function DerivedLayoutSidebar(t0) {
-	const $ = c(32);
-	if ($[0] !== "2c7da8bd37fd1558e1c31149d4435d439cdd1425cb374116d681960617531266") {
-		for (let $i = 0; $i < 32; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "2c7da8bd37fd1558e1c31149d4435d439cdd1425cb374116d681960617531266";
+	const $ = c(39);
+	if ($[0] !== "c2b47a0ded5e80952966193136846d2771f48746af4a761ba4e0ef778f954b27") {
+		for (let $i = 0; $i < 39; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "c2b47a0ded5e80952966193136846d2771f48746af4a761ba4e0ef778f954b27";
 	}
 	const { layout } = t0;
 	const source = useSelector(previewStore, selectPreviewSource);
@@ -36,12 +36,14 @@ function DerivedLayoutSidebar(t0) {
 	const app = useCamoxApp();
 	let t2;
 	if ($[3] !== app || $[4] !== layout.layoutId) {
-		t2 = app.getLayoutById(layout.layoutId)?._internal.title ?? layout.layoutId;
+		t2 = app.getLayoutById(layout.layoutId);
 		$[3] = app;
 		$[4] = layout.layoutId;
 		$[5] = t2;
 	} else t2 = $[5];
-	const layoutName = t2;
+	const definition = t2;
+	const layoutName = definition?._internal.title ?? layout.layoutId;
+	const singleton = definition?._internal.kind === "singleton";
 	const projectSlug = useProjectSlug();
 	let t3;
 	if ($[6] !== projectSlug) {
@@ -132,28 +134,45 @@ function DerivedLayoutSidebar(t0) {
 		$[24] = layoutName;
 		$[25] = t11;
 	} else t11 = $[25];
-	let t12;
-	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
-		t12 = /* @__PURE__ */ jsxs(Alert, { children: [/* @__PURE__ */ jsx(AlertTitle, { children: "Shared layout blocks" }), /* @__PURE__ */ jsx(AlertDescription, { children: "Changes apply to every page using this layout. The generated page content is managed outside the studio." })] });
-		$[26] = t12;
-	} else t12 = $[26];
+	const t12 = singleton ? "Code-owned page" : "Shared layout blocks";
 	let t13;
-	if ($[27] !== t11) {
-		t13 = /* @__PURE__ */ jsxs(PanelContent, {
+	if ($[26] !== t12) {
+		t13 = /* @__PURE__ */ jsx(AlertTitle, { children: t12 });
+		$[26] = t12;
+		$[27] = t13;
+	} else t13 = $[27];
+	const t14 = singleton ? "Edit and publish this page’s blocks here. Its URL and structure are defined in code. Synced blocks share content with their other instances." : "Changes apply to every page using this layout. The generated page content is managed outside the studio.";
+	let t15;
+	if ($[28] !== t14) {
+		t15 = /* @__PURE__ */ jsx(AlertDescription, { children: t14 });
+		$[28] = t14;
+		$[29] = t15;
+	} else t15 = $[29];
+	let t16;
+	if ($[30] !== t13 || $[31] !== t15) {
+		t16 = /* @__PURE__ */ jsxs(Alert, { children: [t13, t15] });
+		$[30] = t13;
+		$[31] = t15;
+		$[32] = t16;
+	} else t16 = $[32];
+	let t17;
+	if ($[33] !== t11 || $[34] !== t16) {
+		t17 = /* @__PURE__ */ jsxs(PanelContent, {
 			className: "flex grow basis-0 flex-col gap-4 overflow-auto p-2",
-			children: [t11, t12]
+			children: [t11, t16]
 		});
-		$[27] = t11;
-		$[28] = t13;
-	} else t13 = $[28];
-	let t14;
-	if ($[29] !== t10 || $[30] !== t13) {
-		t14 = /* @__PURE__ */ jsxs(Fragment, { children: [t10, t13] });
-		$[29] = t10;
-		$[30] = t13;
-		$[31] = t14;
-	} else t14 = $[31];
-	return t14;
+		$[33] = t11;
+		$[34] = t16;
+		$[35] = t17;
+	} else t17 = $[35];
+	let t18;
+	if ($[36] !== t10 || $[37] !== t17) {
+		t18 = /* @__PURE__ */ jsxs(Fragment, { children: [t10, t17] });
+		$[36] = t10;
+		$[37] = t17;
+		$[38] = t18;
+	} else t18 = $[38];
+	return t18;
 }
 
 //#endregion

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

@@ -1,14 +1,14 @@
 import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
 import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Alert, AlertDescription, AlertTitle } from "@camox/ui/alert";
 
 //#region src/features/preview/components/DerivedPageInfoSidebar.tsx
 function DerivedPageInfoSidebar(t0) {
-	const $ = c(8);
-	if ($[0] !== "188f548de856db3a863c0d74a6e937ddbe5a25be65cd852330ec33162eb56ebf") {
-		for (let $i = 0; $i < 8; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "188f548de856db3a863c0d74a6e937ddbe5a25be65cd852330ec33162eb56ebf";
+	const $ = c(13);
+	if ($[0] !== "4055e1683cf89ee8b21c17d486a36f5d2dcf14d6cea02195afa4565d830e71cf") {
+		for (let $i = 0; $i < 13; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "4055e1683cf89ee8b21c17d486a36f5d2dcf14d6cea02195afa4565d830e71cf";
 	}
 	const { layoutId } = t0;
 	const camoxApp = useCamoxApp();
@@ -19,7 +19,9 @@ function DerivedPageInfoSidebar(t0) {
 		$[2] = layoutId;
 		$[3] = t1;
 	} else t1 = $[3];
-	const layoutName = t1?._internal.title ?? layoutId;
+	const layout = t1;
+	const layoutName = layout?._internal.title ?? layoutId;
+	const singleton = layout?._internal.kind === "singleton";
 	let t2;
 	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
 		t2 = /* @__PURE__ */ jsx("p", {
@@ -28,29 +30,39 @@ function DerivedPageInfoSidebar(t0) {
 		});
 		$[4] = t2;
 	} else t2 = $[4];
-	let t3;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = /* @__PURE__ */ jsx(AlertTitle, { children: "Derived page" });
-		$[5] = t3;
-	} else t3 = $[5];
+	const t3 = singleton ? "Singleton page" : "Derived page";
 	let t4;
-	if ($[6] !== layoutName) {
-		t4 = /* @__PURE__ */ jsxs("div", {
+	if ($[5] !== t3) {
+		t4 = /* @__PURE__ */ jsx(AlertTitle, { children: t3 });
+		$[5] = t3;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== layoutName || $[8] !== singleton) {
+		t5 = /* @__PURE__ */ jsx(AlertDescription, { children: singleton ? /* @__PURE__ */ jsx(Fragment, { children: "This page and its URL are defined in code. Select a block in the preview to edit its content. The page cannot be deleted or moved in Studio." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+			"This page is generated using the",
+			" ",
+			/* @__PURE__ */ jsx("strong", {
+				className: "font-semibold italic",
+				children: layoutName
+			}),
+			" layout. Select a shared block in the preview to edit it."
+		] }) });
+		$[7] = layoutName;
+		$[8] = singleton;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t4 || $[11] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("div", {
 			className: "flex-1 space-y-4 p-2 pt-4",
-			children: [t2, /* @__PURE__ */ jsxs(Alert, { children: [t3, /* @__PURE__ */ jsxs(AlertDescription, { children: [
-				"This page is generated using the",
-				" ",
-				/* @__PURE__ */ jsx("strong", {
-					className: "font-semibold italic",
-					children: layoutName
-				}),
-				" layout. Select a shared block in the preview to edit it."
-			] })] })]
+			children: [t2, /* @__PURE__ */ jsxs(Alert, { children: [t4, t5] })]
 		});
-		$[6] = layoutName;
-		$[7] = t4;
-	} else t4 = $[7];
-	return t4;
+		$[10] = t4;
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	return t6;
 }
 
 //#endregion

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

@@ -1,20 +1,40 @@
+import { observeOverlayHighlights } from "../overlayHighlights.js";
+import { useFrame } from "./Frame.js";
 import { c } from "react/compiler-runtime";
+import { useLayoutEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 import overlayStyles from "virtual:camox-overlay-css";
 
 //#region src/features/preview/components/FieldOverlayStyles.tsx
 const FieldOverlayStyles = () => {
-	const $ = c(2);
-	if ($[0] !== "83d25ec6adf4086440810b5b8470ed59a6027bd66aa8eceb3fd93db084e20139") {
-		for (let $i = 0; $i < 2; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "83d25ec6adf4086440810b5b8470ed59a6027bd66aa8eceb3fd93db084e20139";
+	const $ = c(5);
+	if ($[0] !== "1aef50f61b41fbdb91f283373fd928447f799905d1774e36dd8b81214d12c471") {
+		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "1aef50f61b41fbdb91f283373fd928447f799905d1774e36dd8b81214d12c471";
 	}
+	const { window } = useFrame();
 	let t0;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsx("style", { children: overlayStyles });
-		$[1] = t0;
-	} else t0 = $[1];
-	return t0;
+	let t1;
+	if ($[1] !== window) {
+		t0 = () => {
+			if (!window) return;
+			return observeOverlayHighlights(window.document);
+		};
+		t1 = [window];
+		$[1] = window;
+		$[2] = t0;
+		$[3] = t1;
+	} else {
+		t0 = $[2];
+		t1 = $[3];
+	}
+	useLayoutEffect(t0, t1);
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx("style", { children: overlayStyles });
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
 };
 
 //#endregion

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

@@ -9,7 +9,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useSelector } from "@xstate/store-react";
 import { Kbd } from "@camox/ui/kbd";
 import { Button } from "@camox/ui/button";
-import { Blend, Bold, Italic, Underline } from "lucide-react";
+import { Bold, Highlighter, Italic, Strikethrough } from "lucide-react";
 import * as Tooltip$1 from "@camox/ui/tooltip";
 import { ButtonGroup } from "@camox/ui/button-group";
 import { FloatingToolbar } from "@camox/ui/floating-toolbar";
@@ -32,25 +32,25 @@ const FORMAT_BUTTONS = [
 		shortcut: "⌘ I"
 	},
 	{
-		key: "underline",
-		flag: FORMAT_FLAGS.underline,
-		icon: Underline,
-		label: "Underline",
-		shortcut: "⌘ U"
+		key: "strikethrough",
+		flag: FORMAT_FLAGS.strikethrough,
+		icon: Strikethrough,
+		label: "Strikethrough",
+		shortcut: null
 	},
 	{
-		key: "gradient",
-		flag: FORMAT_FLAGS.gradient,
-		icon: Blend,
-		label: "Gradient",
+		key: "highlight",
+		flag: FORMAT_FLAGS.highlight,
+		icon: Highlighter,
+		label: "Highlight",
 		shortcut: null
 	}
 ];
 const FieldToolbar = () => {
 	const $ = c(28);
-	if ($[0] !== "62fc88dbf76bce176e1b9d35a550f78886d467e61d1692885683da9874bf34dd") {
+	if ($[0] !== "d1e889a3597708ac2bc6872804f1131756eb2e3aa358ca08ef83b3491906d96a") {
 		for (let $i = 0; $i < 28; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "62fc88dbf76bce176e1b9d35a550f78886d467e61d1692885683da9874bf34dd";
+		$[0] = "d1e889a3597708ac2bc6872804f1131756eb2e3aa358ca08ef83b3491906d96a";
 	}
 	const iframeElement = useSelector(previewStore, _temp);
 	const [hasSelection, setHasSelection] = React.useState(false);

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

@@ -0,0 +1,231 @@
+import { IconSvg } from "../../../core/lib/icons.js";
+import { c } from "react/compiler-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@camox/ui/button";
+import { ChevronsUpDown, SearchIcon } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "@camox/ui/input-group";
+import { commandFilter } from "@camox/ui/command";
+import { Combobox } from "@base-ui/react/combobox";
+import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
+
+//#region src/features/preview/components/IconFieldEditor.tsx
+const COLUMNS = 7;
+const ROW_HEIGHT = 44;
+function IconPicker({ value, ids, onSelect }) {
+	"use no memo";
+	const scrollRef = useRef(null);
+	const [ready, setReady] = useState(false);
+	useEffect(() => setReady(true), []);
+	const [search, setSearch] = useState("");
+	const [activeId, setActiveId] = useState(value);
+	const filteredIds = useMemo(() => {
+		const query = search.trim();
+		if (!query) return ids;
+		return ids.map((id) => ({
+			id,
+			score: commandFilter(id, query)
+		})).filter(({ score }) => score > 0).sort((a, b) => b.score - a.score).map(({ id: id_0 }) => id_0);
+	}, [ids, search]);
+	const activeIndex = Math.max(0, filteredIds.indexOf(activeId));
+	const activeRow = Math.floor(activeIndex / COLUMNS);
+	const virtualizer = useVirtualizer({
+		count: Math.ceil(filteredIds.length / COLUMNS),
+		getScrollElement: () => scrollRef.current,
+		estimateSize: () => ROW_HEIGHT,
+		overscan: 2,
+		initialOffset: () => activeRow * ROW_HEIGHT,
+		rangeExtractor: (range) => [...new Set([...defaultRangeExtractor(range), activeRow])].sort((a_0, b_0) => a_0 - b_0)
+	});
+	return /* @__PURE__ */ jsx(Combobox.Root, {
+		inline: true,
+		open: ready,
+		grid: true,
+		virtualized: true,
+		autoHighlight: true,
+		loopFocus: false,
+		items: ids,
+		filteredItems: filteredIds,
+		value,
+		inputValue: search,
+		onInputValueChange: (nextSearch) => {
+			setSearch(nextSearch);
+			setActiveId("");
+			virtualizer.scrollToOffset(0);
+		},
+		onItemHighlighted: (id_1, { index, reason }) => {
+			setActiveId(id_1 ?? "");
+			if (index < 0 || reason === "pointer") return;
+			virtualizer.scrollToIndex(Math.floor(index / COLUMNS), { align: "auto" });
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-1 p-1",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "p-1 pb-0",
+				children: /* @__PURE__ */ jsxs(InputGroup, {
+					className: "border-input/30 bg-input/30 h-8 rounded-lg shadow-none",
+					children: [/* @__PURE__ */ jsx(Combobox.Input, {
+						render: /* @__PURE__ */ jsx(InputGroupInput, {}),
+						"aria-label": "Search icons",
+						placeholder: "Search icons…"
+					}), /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(SearchIcon, { className: "size-4" }) })]
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "p-1",
+				children: [/* @__PURE__ */ jsx(Combobox.List, {
+					ref: scrollRef,
+					"aria-rowcount": Math.ceil(filteredIds.length / COLUMNS),
+					"aria-colcount": COLUMNS,
+					"aria-label": "Choose icon",
+					className: "no-scrollbar max-h-72 overflow-x-hidden overflow-y-auto",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "relative",
+						style: { height: virtualizer.getTotalSize() },
+						children: virtualizer.getVirtualItems().map((row) => /* @__PURE__ */ jsx(Combobox.Row, {
+							"aria-rowindex": row.index + 1,
+							className: "absolute top-0 left-0 grid w-full grid-cols-7 gap-1",
+							style: {
+								height: ROW_HEIGHT - 4,
+								transform: `translateY(${row.start}px)`
+							},
+							children: filteredIds.slice(row.index * COLUMNS, (row.index + 1) * COLUMNS).map((id_2, column) => {
+								const index_0 = row.index * COLUMNS + column;
+								return /* @__PURE__ */ jsx(Combobox.Item, {
+									value: id_2,
+									index: index_0,
+									"aria-colindex": column + 1,
+									onClick: () => onSelect(id_2),
+									title: id_2,
+									"aria-label": id_2,
+									className: "text-muted-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground data-selected:bg-accent data-selected:text-accent-foreground flex cursor-default items-center justify-center rounded-sm p-2 outline-none",
+									children: /* @__PURE__ */ jsx(IconSvg, {
+										iconId: id_2,
+										className: "size-5"
+									})
+								}, id_2);
+							})
+						}, row.key))
+					})
+				}), !filteredIds.length && /* @__PURE__ */ jsx("div", {
+					role: "status",
+					className: "py-6 text-center text-sm",
+					children: "No matching icons."
+				})]
+			})]
+		})
+	});
+}
+function IconFieldEditor(t0) {
+	const $ = c(25);
+	if ($[0] !== "06a7f09856913d7ee595c1cdc9745a723a0630fd9b9973c23b1dc93d15da4da5") {
+		for (let $i = 0; $i < 25; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "06a7f09856913d7ee595c1cdc9745a723a0630fd9b9973c23b1dc93d15da4da5";
+	}
+	const { value, ids, onChange } = t0;
+	const [open, setOpen] = useState(false);
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			role: "combobox",
+			"aria-label": "Choose icon",
+			className: "w-full justify-between"
+		});
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== value) {
+		t2 = /* @__PURE__ */ jsx(IconSvg, {
+			iconId: value,
+			className: "size-4 shrink-0"
+		});
+		$[2] = value;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== value) {
+		t3 = value.split(":")[1] ?? value;
+		$[4] = value;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== t3) {
+		t4 = /* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: t3
+		});
+		$[6] = t3;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t2 || $[9] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 items-center gap-2",
+			children: [t2, t4]
+		});
+		$[8] = t2;
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-4 shrink-0 opacity-50" });
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== t5) {
+		t7 = /* @__PURE__ */ jsxs(PopoverTrigger, {
+			render: t1,
+			children: [t5, t6]
+		});
+		$[12] = t5;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== ids || $[15] !== onChange || $[16] !== open || $[17] !== value) {
+		t8 = open && /* @__PURE__ */ jsx(IconPicker, {
+			value,
+			ids,
+			onSelect: (id) => {
+				onChange(id);
+				setOpen(false);
+			}
+		});
+		$[14] = ids;
+		$[15] = onChange;
+		$[16] = open;
+		$[17] = value;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] !== t8) {
+		t9 = /* @__PURE__ */ jsx(PopoverContent, {
+			align: "start",
+			side: "bottom",
+			className: "w-80 p-0",
+			children: t8
+		});
+		$[19] = t8;
+		$[20] = t9;
+	} else t9 = $[20];
+	let t10;
+	if ($[21] !== open || $[22] !== t7 || $[23] !== t9) {
+		t10 = /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col",
+			children: /* @__PURE__ */ jsxs(Popover, {
+				open,
+				onOpenChange: setOpen,
+				children: [t7, t9]
+			})
+		});
+		$[21] = open;
+		$[22] = t7;
+		$[23] = t9;
+		$[24] = t10;
+	} else t10 = $[24];
+	return t10;
+}
+
+//#endregion
+export { IconFieldEditor };

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

@@ -2,6 +2,7 @@ import { isFileMarker, isItemMarker, resolveFileMarker } from "../../../lib/norm
 import { lexicalStateToPlainText } from "../../../core/lib/lexicalState.js";
 import { previewStore } from "../previewStore.js";
 import { SidebarLexicalEditor } from "../../../core/components/lexical/SidebarLexicalEditor.js";
+import { IconFieldEditor } from "./IconFieldEditor.js";
 import { RepeatableItemsList } from "./RepeatableItemsList.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
@@ -35,9 +36,9 @@ const getSchemaFieldsInOrder = (schema) => {
 };
 const DrillRow = (t0) => {
 	const $ = c(28);
-	if ($[0] !== "b2eb497558ebaf4700b0ba067f5c7a528445a839255d88cef77056524cd2971c") {
+	if ($[0] !== "75fc5969a4033b113dd269f700cf2eca07d78852485b78d36d0f7631827b7b66") {
 		for (let $i = 0; $i < 28; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "b2eb497558ebaf4700b0ba067f5c7a528445a839255d88cef77056524cd2971c";
+		$[0] = "75fc5969a4033b113dd269f700cf2eca07d78852485b78d36d0f7631827b7b66";
 	}
 	const { label, preview, Icon, onClick, hover, postToIframe } = t0;
 	let t1;
@@ -140,9 +141,9 @@ const DrillRow = (t0) => {
 };
 const ItemFieldsEditor = (t0) => {
 	const $ = c(46);
-	if ($[0] !== "b2eb497558ebaf4700b0ba067f5c7a528445a839255d88cef77056524cd2971c") {
+	if ($[0] !== "75fc5969a4033b113dd269f700cf2eca07d78852485b78d36d0f7631827b7b66") {
 		for (let $i = 0; $i < 46; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "b2eb497558ebaf4700b0ba067f5c7a528445a839255d88cef77056524cd2971c";
+		$[0] = "75fc5969a4033b113dd269f700cf2eca07d78852485b78d36d0f7631827b7b66";
 	}
 	const { selectedFieldName, schema, data, blockId, itemId, onFieldChange, postToIframe, filesMap, itemsMap, fieldIdPrefix } = t0;
 	let t1;
@@ -314,7 +315,8 @@ const ItemFieldsEditor = (t0) => {
 					"Embed",
 					"Repeater",
 					"Enum",
-					"Boolean"
+					"Boolean",
+					"Icon"
 				].includes(field_0.fieldType)) {
 					const value_0 = data[field_0.name];
 					return /* @__PURE__ */ jsx(DrillRow, {
@@ -333,6 +335,11 @@ const ItemFieldsEditor = (t0) => {
 						postToIframe
 					}, field_0.name);
 				}
+				if (field_0.fieldType === "Icon") return /* @__PURE__ */ jsx(IconFieldEditor, {
+					value: String(data[field_0.name] ?? schema?.properties?.[field_0.name]?.default ?? ""),
+					ids: field_0.enumValues ?? [],
+					onChange: (value_1) => onFieldChange(field_0.name, value_1)
+				}, field_0.name);
 				if (field_0.fieldType === "Boolean") return /* @__PURE__ */ jsxs("div", {
 					className: "flex items-center justify-between",
 					children: [/* @__PURE__ */ jsx(Label, {
@@ -341,7 +348,7 @@ const ItemFieldsEditor = (t0) => {
 					}), /* @__PURE__ */ jsx(Switch, {
 						id: getFieldElementId(field_0.name),
 						checked: Boolean(data[field_0.name]),
-						onCheckedChange: (value_1) => onFieldChange(field_0.name, value_1)
+						onCheckedChange: (value_2) => onFieldChange(field_0.name, value_2)
 					})]
 				}, field_0.name);
 				if (field_0.fieldType === "Enum") return /* @__PURE__ */ jsxs("div", {
@@ -351,14 +358,14 @@ const ItemFieldsEditor = (t0) => {
 						children: label
 					}), /* @__PURE__ */ jsxs(Select, {
 						value: typeof data[field_0.name] === "string" ? data[field_0.name] : "",
-						onValueChange: (value_2) => onFieldChange(field_0.name, value_2),
+						onValueChange: (value_3) => onFieldChange(field_0.name, value_3),
 						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)) })]
+						}), /* @__PURE__ */ jsx(SelectContent, { children: field_0.enumValues?.map((value_4) => /* @__PURE__ */ jsx(SelectItem, {
+							value: value_4,
+							children: field_0.enumLabels?.[value_4] ?? value_4
+						}, value_4)) })]
 					})]
 				}, field_0.name);
 				if (field_0.fieldType === "String") return /* @__PURE__ */ jsx(form.Field, {
@@ -379,7 +386,7 @@ const ItemFieldsEditor = (t0) => {
 						}), /* @__PURE__ */ jsx(SidebarLexicalEditor, {
 							id: getFieldElementId(field_0.name),
 							value: fieldApi_0.state.value,
-							onChange: (value_4) => handleScalarChange(field_0.name, value_4, fieldApi_0),
+							onChange: (value_5) => handleScalarChange(field_0.name, value_5, fieldApi_0),
 							onFocus: () => handleFieldFocus(field_0.name, field_0.fieldType),
 							onBlur: () => handleFieldBlur(field_0.name)
 						})]
@@ -425,8 +432,8 @@ const ItemFieldsEditor = (t0) => {
 					}, 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 value_6 = data[field_0.name];
+					const count = Array.isArray(value_6) ? value_6.length : 0;
 					const isImage = field_0.fieldType === "ImageList";
 					const noun = isImage ? "image" : "file";
 					let preview_1;