@firecms/collection_editor 3.0.0-beta.13 → 3.0.0-beta.15

package/dist/index.umd.js

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react-compiler-runtime"), require("@firecms/core"), require("react"), require("react-fast-compare"), require("@firecms/ui"), require("yup"), require("@firecms/formex"), require("@firecms/schema_inference"), require("@hello-pangea/dnd"), require("json5"), require("prism-react-renderer"), require("@firecms/data_import_export"), require("react-router")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react-compiler-runtime", "@firecms/core", "react", "react-fast-compare", "@firecms/ui", "yup", "@firecms/formex", "@firecms/schema_inference", "@hello-pangea/dnd", "json5", "prism-react-renderer", "@firecms/data_import_export", "react-router"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["FireCMS collection editor"] = {}, global.jsxRuntime, global.reactCompilerRuntime, global.core, global.React, global.equal, global.ui, global.Yup, global.formex, global.schema_inference, global.dnd, global.JSON5, global.prismReactRenderer, global.data_import_export, global.reactRouter));
-})(this, function(exports2, jsxRuntime, reactCompilerRuntime, core, React, equal, ui, Yup, formex, schema_inference, dnd, JSON5, prismReactRenderer, data_import_export, reactRouter) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react-compiler-runtime"), require("@firecms/core"), require("react"), require("react-fast-compare"), require("@firecms/ui"), require("yup"), require("@firecms/formex"), require("@firecms/schema_inference"), require("@dnd-kit/core"), require("@dnd-kit/sortable"), require("@dnd-kit/modifiers"), require("@dnd-kit/utilities"), require("json5"), require("prism-react-renderer"), require("@firecms/data_import_export"), require("react-router")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react-compiler-runtime", "@firecms/core", "react", "react-fast-compare", "@firecms/ui", "yup", "@firecms/formex", "@firecms/schema_inference", "@dnd-kit/core", "@dnd-kit/sortable", "@dnd-kit/modifiers", "@dnd-kit/utilities", "json5", "prism-react-renderer", "@firecms/data_import_export", "react-router"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["FireCMS collection editor"] = {}, global.jsxRuntime, global.reactCompilerRuntime, global.core, global.React, global.equal, global.ui, global.Yup, global.formex, global.schema_inference, global.core$1, global.sortable, global.modifiers, global.utilities, global.JSON5, global.prismReactRenderer, global.data_import_export, global.reactRouter));
+})(this, function(exports2, jsxRuntime, reactCompilerRuntime, core, React, equal, ui, Yup, formex, schema_inference, core$1, sortable, modifiers, utilities, JSON5, prismReactRenderer, data_import_export, reactRouter) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -169,7 +169,7 @@
     return t18;
   }
   function CollectionDetailsForm(t0) {
-    const $ = reactCompilerRuntime.c(176);
+    const $ = reactCompilerRuntime.c(192);
     const {
       isNewCollection,
       reservedGroups,
@@ -185,7 +185,6 @@
       touched,
       errors,
       setFieldTouched,
-      isSubmitting,
       submitCount
     } = formex.useFormex();
     useCollectionEditorController();
@@ -253,7 +252,7 @@
       t5 = $[10];
     }
     const collectionIcon = t5;
-    const groupOptions = groups?.filter((group) => !reservedGroups?.includes(group));
+    groups?.filter((group) => !reservedGroups?.includes(group));
     let t6;
     if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
       t6 = {
@@ -263,10 +262,7 @@
     } else {
       t6 = $[11];
     }
-    const {
-      autoCompleteOpen,
-      setAutoCompleteOpen
-    } = ui.useAutoComplete(t6);
+    ui.useAutoComplete(t6);
     const isSubcollection = !!parentCollection;
     let customIdValue;
     if (typeof values.customId === "object") {
@@ -285,290 +281,316 @@
       }
     }
     const showErrors = submitCount > 0;
-    const t7 = "overflow-auto my-auto";
-    const T0 = ui.Container;
-    const t8 = "4xl";
-    const t9 = "flex flex-col gap-4 p-8 m-auto";
-    const t10 = !isNewCollection ? "h5" : "h4";
-    const t11 = isNewCollection ? "New collection" : `${values?.name} collection`;
-    let t12;
-    if ($[12] !== t10 || $[13] !== t11) {
-      t12 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: t10, className: "flex-grow", children: t11 });
-      $[12] = t10;
-      $[13] = t11;
-      $[14] = t12;
+    const t7 = !isNewCollection ? "h5" : "h4";
+    const t8 = isNewCollection ? "New collection" : `${values?.name} collection`;
+    let t9;
+    if ($[12] !== t7 || $[13] !== t8) {
+      t9 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: t7, className: "flex-grow", children: t8 });
+      $[12] = t7;
+      $[13] = t8;
+      $[14] = t9;
     } else {
-      t12 = $[14];
+      t9 = $[14];
     }
-    let t13;
+    let t10;
     if ($[15] !== updateDatabaseId || $[16] !== values.databaseId) {
-      t13 = /* @__PURE__ */ jsxRuntime.jsx(DefaultDatabaseField, { databaseId: values.databaseId, onDatabaseIdUpdate: updateDatabaseId });
+      t10 = /* @__PURE__ */ jsxRuntime.jsx(DefaultDatabaseField, { databaseId: values.databaseId, onDatabaseIdUpdate: updateDatabaseId });
       $[15] = updateDatabaseId;
       $[16] = values.databaseId;
-      $[17] = t13;
+      $[17] = t10;
     } else {
-      t13 = $[17];
+      t10 = $[17];
     }
-    let t14;
+    let t11;
     if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
-      t14 = () => setIconDialogOpen(true);
-      $[18] = t14;
+      t11 = () => setIconDialogOpen(true);
+      $[18] = t11;
     } else {
-      t14 = $[18];
+      t11 = $[18];
     }
-    let t15;
+    let t12;
     if ($[19] !== collectionIcon) {
-      t15 = /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Change icon", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { shape: "square", onClick: t14, children: collectionIcon }) });
+      t12 = /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Change icon", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { shape: "square", onClick: t11, children: collectionIcon }) });
       $[19] = collectionIcon;
-      $[20] = t15;
+      $[20] = t12;
     } else {
-      t15 = $[20];
+      t12 = $[20];
     }
-    let t16;
-    if ($[21] !== t12 || $[22] !== t13 || $[23] !== t15) {
-      t16 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-2 py-2 pt-3 items-center", children: [
-        t12,
-        t13,
-        t15
+    let t13;
+    if ($[21] !== t10 || $[22] !== t12 || $[23] !== t9) {
+      t13 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-2 py-2 pt-3 items-center", children: [
+        t9,
+        t10,
+        t12
       ] });
-      $[21] = t12;
-      $[22] = t13;
-      $[23] = t15;
-      $[24] = t16;
+      $[21] = t10;
+      $[22] = t12;
+      $[23] = t9;
+      $[24] = t13;
     } else {
-      t16 = $[24];
+      t13 = $[24];
     }
-    let t17;
+    let t14;
     if ($[25] !== parentCollection) {
-      t17 = parentCollection && /* @__PURE__ */ jsxRuntime.jsx(ui.Chip, { colorScheme: "tealDarker", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Typography, { variant: "caption", children: [
+      t14 = parentCollection && /* @__PURE__ */ jsxRuntime.jsx(ui.Chip, { colorScheme: "tealDarker", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Typography, { variant: "caption", children: [
         "This is a subcollection of ",
         /* @__PURE__ */ jsxRuntime.jsx("b", { children: parentCollection.name })
       ] }) });
       $[25] = parentCollection;
-      $[26] = t17;
+      $[26] = t14;
     } else {
-      t17 = $[26];
+      t14 = $[26];
     }
-    let t18;
-    if ($[27] !== t16 || $[28] !== t17) {
-      t18 = /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        t16,
-        t17
+    let t15;
+    if ($[27] !== t13 || $[28] !== t14) {
+      t15 = /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        t13,
+        t14
       ] });
-      $[27] = t16;
-      $[28] = t17;
-      $[29] = t18;
+      $[27] = t13;
+      $[28] = t14;
+      $[29] = t15;
     } else {
-      t18 = $[29];
+      t15 = $[29];
     }
-    const t19 = "grid grid-cols-12 gap-4";
-    const t20 = values.name ?? "";
-    let t21;
+    const t16 = values.name ?? "";
+    let t17;
     if ($[30] !== updateName) {
-      t21 = (e) => updateName(e.target.value);
+      t17 = (e) => updateName(e.target.value);
       $[30] = updateName;
-      $[31] = t21;
+      $[31] = t17;
+    } else {
+      t17 = $[31];
+    }
+    const t18 = showErrors && Boolean(errors.name);
+    let t19;
+    if ($[32] !== t16 || $[33] !== t17 || $[34] !== t18) {
+      t19 = /* @__PURE__ */ jsxRuntime.jsx(ui.TextField, { value: t16, onChange: t17, label: "Name", autoFocus: true, required: true, error: t18 });
+      $[32] = t16;
+      $[33] = t17;
+      $[34] = t18;
+      $[35] = t19;
     } else {
-      t21 = $[31];
+      t19 = $[35];
+    }
+    const t20 = touched.name && Boolean(errors.name);
+    const t21 = touched.name && Boolean(errors.name) ? errors.name : "Name of this collection, usually a plural name (e.g. Products)";
+    let t22;
+    if ($[36] !== t20 || $[37] !== t21) {
+      t22 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { error: t20, children: t21 });
+      $[36] = t20;
+      $[37] = t21;
+      $[38] = t22;
+    } else {
+      t22 = $[38];
     }
-    const t22 = showErrors && Boolean(errors.name);
     let t23;
-    if ($[32] !== t20 || $[33] !== t21 || $[34] !== t22) {
-      t23 = /* @__PURE__ */ jsxRuntime.jsx(ui.TextField, { value: t20, onChange: t21, label: "Name", autoFocus: true, required: true, error: t22 });
-      $[32] = t20;
-      $[33] = t21;
-      $[34] = t22;
-      $[35] = t23;
+    if ($[39] !== t19 || $[40] !== t22) {
+      t23 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
+        t19,
+        t22
+      ] });
+      $[39] = t19;
+      $[40] = t22;
+      $[41] = t23;
     } else {
-      t23 = $[35];
+      t23 = $[41];
     }
-    const t24 = touched.name && Boolean(errors.name);
-    const t25 = touched.name && Boolean(errors.name) ? errors.name : "Name of this collection, usually a plural name (e.g. Products)";
-    let t26;
-    if ($[36] !== t24 || $[37] !== t25) {
-      t26 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { error: t24, children: t25 });
-      $[36] = t24;
-      $[37] = t25;
-      $[38] = t26;
+    let t24;
+    if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
+      t24 = ui.cls("col-span-12 ");
+      $[42] = t24;
     } else {
-      t26 = $[38];
+      t24 = $[42];
     }
+    const t25 = !isNewCollection;
+    const t26 = showErrors && Boolean(errors.path);
     let t27;
-    if ($[39] !== t23 || $[40] !== t26) {
-      t27 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
-        t23,
-        t26
+    if ($[43] !== t25 || $[44] !== t26) {
+      t27 = /* @__PURE__ */ jsxRuntime.jsx(formex.Field, { name: "path", as: ui.DebouncedTextField, label: "Path", disabled: t25, required: true, error: t26 });
+      $[43] = t25;
+      $[44] = t26;
+      $[45] = t27;
+    } else {
+      t27 = $[45];
+    }
+    const t28 = touched.path && Boolean(errors.path);
+    const t29 = touched.path && Boolean(errors.path) ? errors.path : isSubcollection ? "Relative path to the parent (no need to include the parent path)" : "Path that this collection is stored in, in the database";
+    let t30;
+    if ($[46] !== t28 || $[47] !== t29) {
+      t30 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { error: t28, children: t29 });
+      $[46] = t28;
+      $[47] = t29;
+      $[48] = t30;
+    } else {
+      t30 = $[48];
+    }
+    let t31;
+    if ($[49] !== t27 || $[50] !== t30) {
+      t31 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t24, children: [
+        t27,
+        t30
       ] });
-      $[39] = t23;
-      $[40] = t26;
-      $[41] = t27;
+      $[49] = t27;
+      $[50] = t30;
+      $[51] = t31;
     } else {
-      t27 = $[41];
+      t31 = $[51];
     }
-    const t28 = isSubcollection ? "" : "sm:col-span-8";
-    let t29;
-    if ($[42] !== t28) {
-      t29 = ui.cls("col-span-12 ", t28);
-      $[42] = t28;
-      $[43] = t29;
-    } else {
-      t29 = $[43];
-    }
-    const t30 = !isNewCollection;
-    const t31 = showErrors && Boolean(errors.path);
-    let t32;
-    if ($[44] !== t30 || $[45] !== t31) {
-      t32 = /* @__PURE__ */ jsxRuntime.jsx(formex.Field, { name: "path", as: ui.DebouncedTextField, label: "Path", disabled: t30, required: true, error: t31 });
-      $[44] = t30;
-      $[45] = t31;
-      $[46] = t32;
-    } else {
-      t32 = $[46];
-    }
-    const t33 = touched.path && Boolean(errors.path);
-    const t34 = touched.path && Boolean(errors.path) ? errors.path : isSubcollection ? "Relative path to the parent (no need to include the parent path)" : "Path that this collection is stored in, in the database";
-    let t35;
-    if ($[47] !== t33 || $[48] !== t34) {
-      t35 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { error: t33, children: t34 });
-      $[47] = t33;
-      $[48] = t34;
-      $[49] = t35;
-    } else {
-      t35 = $[49];
+    const t32 = values.openEntityMode ?? "side_panel";
+    let t33;
+    if ($[52] !== setFieldValue) {
+      t33 = (value) => setFieldValue("openEntityMode", value);
+      $[52] = setFieldValue;
+      $[53] = t33;
+    } else {
+      t33 = $[53];
     }
+    let t34;
+    if ($[54] !== t32 || $[55] !== t33) {
+      t34 = /* @__PURE__ */ jsxRuntime.jsx(LayoutModeSwitch, { className: "col-span-12", value: t32, onChange: t33 });
+      $[54] = t32;
+      $[55] = t33;
+      $[56] = t34;
+    } else {
+      t34 = $[56];
+    }
+    const t35 = values.history === null || values.history === void 0 ? "Document history revisions enabled if enabled globally" : values.history ? "Document history revisions ENABLED" : "Document history revisions NOT enabled";
     let t36;
-    if ($[50] !== t29 || $[51] !== t32 || $[52] !== t35) {
-      t36 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t29, children: [
-        t32,
-        t35
-      ] });
-      $[50] = t29;
-      $[51] = t32;
-      $[52] = t35;
-      $[53] = t36;
-    } else {
-      t36 = $[53];
-    }
-    const t37 = !isSubcollection && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12 sm:col-span-4 relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.TextField, { error: showErrors && Boolean(errors.group), disabled: isSubmitting, value: values.group ?? "", autoComplete: "off", onChange: (event) => setFieldValue("group", event.target.value), name: "group", inputRef: groupRef, label: "Group" }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Autocomplete, { open: autoCompleteOpen && (groupOptions ?? []).length > 0, setOpen: setAutoCompleteOpen, children: groupOptions?.map((group_0, index) => /* @__PURE__ */ jsxRuntime.jsx(ui.AutocompleteItem, { onClick: () => {
-        setAutoCompleteOpen(false);
-        setFieldValue("group", group_0 ?? null);
-      }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow", children: group_0 }) }, index + "_" + group_0)) }),
-      /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: showErrors && Boolean(errors.group) ? errors.group : "Group in the home page" })
-    ] });
-    const t38 = values.openEntityMode ?? "side_panel";
+    if ($[57] !== setFieldValue) {
+      t36 = (v) => setFieldValue("history", v);
+      $[57] = setFieldValue;
+      $[58] = t36;
+    } else {
+      t36 = $[58];
+    }
+    const t37 = values.history === void 0 ? null : values.history;
+    let t38;
+    if ($[59] !== t35 || $[60] !== t36 || $[61] !== t37) {
+      t38 = /* @__PURE__ */ jsxRuntime.jsx(ui.BooleanSwitchWithLabel, { position: "start", size: "large", allowIndeterminate: true, label: t35, onValueChange: t36, value: t37 });
+      $[59] = t35;
+      $[60] = t36;
+      $[61] = t37;
+      $[62] = t38;
+    } else {
+      t38 = $[62];
+    }
     let t39;
-    if ($[54] !== setFieldValue) {
-      t39 = (value) => setFieldValue("openEntityMode", value);
-      $[54] = setFieldValue;
-      $[55] = t39;
+    if ($[63] === Symbol.for("react.memo_cache_sentinel")) {
+      t39 = /* @__PURE__ */ jsxRuntime.jsxs(core.FieldCaption, { children: [
+        "When enabled, each document in this collection will have a history of changes. This is useful for auditing purposes. The data is stored in a subcollection of the document in your database, called ",
+        /* @__PURE__ */ jsxRuntime.jsx("b", { children: "__history" }),
+        "."
+      ] });
+      $[63] = t39;
     } else {
-      t39 = $[55];
+      t39 = $[63];
     }
     let t40;
-    if ($[56] !== t38 || $[57] !== t39) {
-      t40 = /* @__PURE__ */ jsxRuntime.jsx(LayoutModeSwitch, { className: "col-span-12", value: t38, onChange: t39 });
-      $[56] = t38;
-      $[57] = t39;
-      $[58] = t40;
+    if ($[64] !== t38) {
+      t40 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
+        t38,
+        t39
+      ] });
+      $[64] = t38;
+      $[65] = t40;
     } else {
-      t40 = $[58];
+      t40 = $[65];
     }
     let t41;
-    if ($[59] === Symbol.for("react.memo_cache_sentinel")) {
+    if ($[66] === Symbol.for("react.memo_cache_sentinel")) {
       t41 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row text-surface-500", children: [
         /* @__PURE__ */ jsxRuntime.jsx(ui.SettingsIcon, {}),
         /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "subtitle2", className: "ml-2", children: "Advanced" })
       ] });
-      $[59] = t41;
+      $[66] = t41;
     } else {
-      t41 = $[59];
+      t41 = $[66];
     }
     const t42 = !isNewCollection;
     const t43 = showErrors && Boolean(errors.id);
     let t44;
-    if ($[60] !== t42 || $[61] !== t43) {
+    if ($[67] !== t42 || $[68] !== t43) {
       t44 = /* @__PURE__ */ jsxRuntime.jsx(formex.Field, { name: "id", as: ui.DebouncedTextField, disabled: t42, label: "Collection id", error: t43 });
-      $[60] = t42;
-      $[61] = t43;
-      $[62] = t44;
+      $[67] = t42;
+      $[68] = t43;
+      $[69] = t44;
     } else {
-      t44 = $[62];
+      t44 = $[69];
     }
     const t45 = touched.id && Boolean(errors.id);
     const t46 = touched.id && Boolean(errors.id) ? errors.id : "This id identifies this collection. Typically the same as the path.";
     let t47;
-    if ($[63] !== t45 || $[64] !== t46) {
+    if ($[70] !== t45 || $[71] !== t46) {
       t47 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { error: t45, children: t46 });
-      $[63] = t45;
-      $[64] = t46;
-      $[65] = t47;
+      $[70] = t45;
+      $[71] = t46;
+      $[72] = t47;
     } else {
-      t47 = $[65];
+      t47 = $[72];
     }
     let t48;
-    if ($[66] !== t44 || $[67] !== t47) {
+    if ($[73] !== t44 || $[74] !== t47) {
       t48 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
         t44,
         t47
       ] });
-      $[66] = t44;
-      $[67] = t47;
-      $[68] = t48;
+      $[73] = t44;
+      $[74] = t47;
+      $[75] = t48;
     } else {
-      t48 = $[68];
+      t48 = $[75];
     }
     const t49 = showErrors && Boolean(errors.singularName);
     let t50;
-    if ($[69] !== handleChange || $[70] !== setFieldTouched) {
+    if ($[76] !== handleChange || $[77] !== setFieldTouched) {
       t50 = (e_0) => {
         setFieldTouched("singularName", true);
         return handleChange(e_0);
       };
-      $[69] = handleChange;
-      $[70] = setFieldTouched;
-      $[71] = t50;
+      $[76] = handleChange;
+      $[77] = setFieldTouched;
+      $[78] = t50;
     } else {
-      t50 = $[71];
+      t50 = $[78];
     }
     const t51 = values.singularName ?? "";
     let t52;
-    if ($[72] !== t49 || $[73] !== t50 || $[74] !== t51) {
+    if ($[79] !== t49 || $[80] !== t50 || $[81] !== t51) {
       t52 = /* @__PURE__ */ jsxRuntime.jsx(ui.TextField, { error: t49, name: "singularName", "aria-describedby": "singularName-helper", onChange: t50, value: t51, label: "Singular name" });
-      $[72] = t49;
-      $[73] = t50;
-      $[74] = t51;
-      $[75] = t52;
+      $[79] = t49;
+      $[80] = t50;
+      $[81] = t51;
+      $[82] = t52;
     } else {
-      t52 = $[75];
+      t52 = $[82];
     }
     const t53 = showErrors && Boolean(errors.singularName);
     const t54 = showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define a singular name for your entities";
     let t55;
-    if ($[76] !== t53 || $[77] !== t54) {
+    if ($[83] !== t53 || $[84] !== t54) {
       t55 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { error: t53, children: t54 });
-      $[76] = t53;
-      $[77] = t54;
-      $[78] = t55;
+      $[83] = t53;
+      $[84] = t54;
+      $[85] = t55;
     } else {
-      t55 = $[78];
+      t55 = $[85];
     }
     let t56;
-    if ($[79] !== t52 || $[80] !== t55) {
+    if ($[86] !== t52 || $[87] !== t55) {
       t56 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
         t52,
         t55
       ] });
-      $[79] = t52;
-      $[80] = t55;
-      $[81] = t56;
+      $[86] = t52;
+      $[87] = t55;
+      $[88] = t56;
     } else {
-      t56 = $[81];
+      t56 = $[88];
     }
     const t57 = showErrors && Boolean(errors.sideDialogWidth);
     let t58;
-    if ($[82] !== setFieldTouched || $[83] !== setFieldValue) {
+    if ($[89] !== setFieldTouched || $[90] !== setFieldValue) {
       t58 = (e_1) => {
         setFieldTouched("sideDialogWidth", true);
         const value_0 = e_1.target.value;
@@ -580,362 +602,402 @@
           }
         }
       };
-      $[82] = setFieldTouched;
-      $[83] = setFieldValue;
-      $[84] = t58;
+      $[89] = setFieldTouched;
+      $[90] = setFieldValue;
+      $[91] = t58;
     } else {
-      t58 = $[84];
+      t58 = $[91];
     }
     let t59;
-    if ($[85] !== setFieldValue) {
+    if ($[92] !== setFieldValue) {
       t59 = () => {
         setFieldValue("sideDialogWidth", null);
       };
-      $[85] = setFieldValue;
-      $[86] = t59;
+      $[92] = setFieldValue;
+      $[93] = t59;
     } else {
-      t59 = $[86];
+      t59 = $[93];
     }
     const t60 = !values.sideDialogWidth;
     let t61;
-    if ($[87] === Symbol.for("react.memo_cache_sentinel")) {
+    if ($[94] === Symbol.for("react.memo_cache_sentinel")) {
       t61 = /* @__PURE__ */ jsxRuntime.jsx(ui.CloseIcon, { size: "small" });
-      $[87] = t61;
+      $[94] = t61;
     } else {
-      t61 = $[87];
+      t61 = $[94];
     }
     let t62;
-    if ($[88] !== t59 || $[89] !== t60) {
+    if ($[95] !== t59 || $[96] !== t60) {
       t62 = /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: t59, disabled: t60, children: t61 });
-      $[88] = t59;
-      $[89] = t60;
-      $[90] = t62;
+      $[95] = t59;
+      $[96] = t60;
+      $[97] = t62;
     } else {
-      t62 = $[90];
+      t62 = $[97];
     }
     const t63 = values.sideDialogWidth ?? "";
     let t64;
-    if ($[91] !== t57 || $[92] !== t58 || $[93] !== t62 || $[94] !== t63) {
+    if ($[98] !== t57 || $[99] !== t58 || $[100] !== t62 || $[101] !== t63) {
       t64 = /* @__PURE__ */ jsxRuntime.jsx(ui.TextField, { error: t57, name: "sideDialogWidth", type: "number", "aria-describedby": "sideDialogWidth-helper", onChange: t58, endAdornment: t62, value: t63, label: "Side dialog width" });
-      $[91] = t57;
-      $[92] = t58;
-      $[93] = t62;
-      $[94] = t63;
-      $[95] = t64;
+      $[98] = t57;
+      $[99] = t58;
+      $[100] = t62;
+      $[101] = t63;
+      $[102] = t64;
     } else {
-      t64 = $[95];
+      t64 = $[102];
     }
     const t65 = showErrors && Boolean(errors.singularName);
     const t66 = showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define the width (in pixels) of entities side dialog. Default is 768px";
     let t67;
-    if ($[96] !== t65 || $[97] !== t66) {
+    if ($[103] !== t65 || $[104] !== t66) {
       t67 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { error: t65, children: t66 });
-      $[96] = t65;
-      $[97] = t66;
-      $[98] = t67;
+      $[103] = t65;
+      $[104] = t66;
+      $[105] = t67;
     } else {
-      t67 = $[98];
+      t67 = $[105];
     }
     let t68;
-    if ($[99] !== t64 || $[100] !== t67) {
+    if ($[106] !== t64 || $[107] !== t67) {
       t68 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
         t64,
         t67
       ] });
-      $[99] = t64;
-      $[100] = t67;
-      $[101] = t68;
+      $[106] = t64;
+      $[107] = t67;
+      $[108] = t68;
     } else {
-      t68 = $[101];
+      t68 = $[108];
     }
     const t69 = showErrors && Boolean(errors.description);
     const t70 = values.description ?? "";
     let t71;
-    if ($[102] !== handleChange || $[103] !== t69 || $[104] !== t70) {
+    if ($[109] !== handleChange || $[110] !== t69 || $[111] !== t70) {
       t71 = /* @__PURE__ */ jsxRuntime.jsx(ui.TextField, { error: t69, name: "description", value: t70, onChange: handleChange, multiline: true, minRows: 2, "aria-describedby": "description-helper-text", label: "Description" });
-      $[102] = handleChange;
-      $[103] = t69;
-      $[104] = t70;
-      $[105] = t71;
+      $[109] = handleChange;
+      $[110] = t69;
+      $[111] = t70;
+      $[112] = t71;
     } else {
-      t71 = $[105];
+      t71 = $[112];
     }
     const t72 = showErrors && Boolean(errors.description);
     const t73 = showErrors && Boolean(errors.description) ? errors.description : "Description of the collection, you can use markdown";
     let t74;
-    if ($[106] !== t72 || $[107] !== t73) {
+    if ($[113] !== t72 || $[114] !== t73) {
       t74 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { error: t72, children: t73 });
-      $[106] = t72;
-      $[107] = t73;
-      $[108] = t74;
+      $[113] = t72;
+      $[114] = t73;
+      $[115] = t74;
     } else {
-      t74 = $[108];
+      t74 = $[115];
     }
     let t75;
-    if ($[109] !== t71 || $[110] !== t74) {
+    if ($[116] !== t71 || $[117] !== t74) {
       t75 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
         t71,
         t74
       ] });
-      $[109] = t71;
-      $[110] = t74;
-      $[111] = t75;
+      $[116] = t71;
+      $[117] = t74;
+      $[118] = t75;
     } else {
-      t75 = $[111];
+      t75 = $[118];
     }
     const t76 = values.defaultSize ?? "";
     let t77;
-    if ($[112] === Symbol.for("react.memo_cache_sentinel")) {
-      t77 = ["xs", "s", "m", "l", "xl"].map(_temp2$7);
-      $[112] = t77;
+    if ($[119] === Symbol.for("react.memo_cache_sentinel")) {
+      t77 = ["xs", "s", "m", "l", "xl"].map(_temp2$8);
+      $[119] = t77;
     } else {
-      t77 = $[112];
+      t77 = $[119];
     }
     let t78;
-    if ($[113] !== handleChange || $[114] !== t76) {
-      t78 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { name: "defaultSize", size: "large", fullWidth: true, label: "Default row size", position: "item-aligned", onChange: handleChange, value: t76, renderValue: _temp$b, children: t77 }) });
-      $[113] = handleChange;
-      $[114] = t76;
-      $[115] = t78;
+    if ($[120] !== handleChange || $[121] !== t76) {
+      t78 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { name: "defaultSize", size: "large", fullWidth: true, label: "Default row size", position: "item-aligned", onChange: handleChange, value: t76, renderValue: _temp$c, children: t77 }) });
+      $[120] = handleChange;
+      $[121] = t76;
+      $[122] = t78;
     } else {
-      t78 = $[115];
+      t78 = $[122];
     }
-    const t79 = customIdValue === "code_defined";
+    const t79 = values.includeJsonView === void 0 || values.includeJsonView ? "Include JSON view" : "Do not include JSON view";
     let t80;
-    if ($[116] !== setFieldValue) {
-      t80 = (v) => {
-        if (v === "code_defined") {
-          throw new Error("This should not happen");
-        }
-        setFieldValue("customId", v);
-      };
-      $[116] = setFieldValue;
-      $[117] = t80;
+    if ($[123] !== setFieldValue) {
+      t80 = (v_0) => setFieldValue("includeJsonView", v_0);
+      $[123] = setFieldValue;
+      $[124] = t80;
     } else {
-      t80 = $[117];
+      t80 = $[124];
     }
-    const t81 = customIdValue ?? "";
+    const t81 = values.includeJsonView === void 0 ? true : values.includeJsonView;
     let t82;
+    if ($[125] !== t79 || $[126] !== t80 || $[127] !== t81) {
+      t82 = /* @__PURE__ */ jsxRuntime.jsx(ui.BooleanSwitchWithLabel, { position: "start", size: "large", label: t79, onValueChange: t80, value: t81 });
+      $[125] = t79;
+      $[126] = t80;
+      $[127] = t81;
+      $[128] = t82;
+    } else {
+      t82 = $[128];
+    }
     let t83;
+    if ($[129] === Symbol.for("react.memo_cache_sentinel")) {
+      t83 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: "Include the JSON representation of the document." });
+      $[129] = t83;
+    } else {
+      t83 = $[129];
+    }
     let t84;
-    if ($[118] === Symbol.for("react.memo_cache_sentinel")) {
-      t82 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "false", children: "Document ID is generated automatically" });
-      t83 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "true", children: "Users must define an ID" });
-      t84 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "optional", children: "Users can define an ID, but it is not required" });
-      $[118] = t82;
-      $[119] = t83;
-      $[120] = t84;
-    } else {
-      t82 = $[118];
-      t83 = $[119];
-      t84 = $[120];
-    }
-    let t85;
-    if ($[121] !== t79 || $[122] !== t80 || $[123] !== t81) {
-      t85 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { name: "customId", label: "Document IDs generation", position: "item-aligned", size: "large", fullWidth: true, disabled: t79, onValueChange: t80, value: t81, renderValue: _temp3$4, children: [
+    if ($[130] !== t82) {
+      t84 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
         t82,
-        t83,
-        t84
-      ] }) });
-      $[121] = t79;
-      $[122] = t80;
-      $[123] = t81;
-      $[124] = t85;
+        t83
+      ] });
+      $[130] = t82;
+      $[131] = t84;
     } else {
-      t85 = $[124];
+      t84 = $[131];
     }
+    const t85 = customIdValue === "code_defined";
     let t86;
-    if ($[125] !== setFieldValue) {
-      t86 = (v_0) => setFieldValue("collectionGroup", v_0);
-      $[125] = setFieldValue;
-      $[126] = t86;
+    if ($[132] !== setFieldValue) {
+      t86 = (v_1) => {
+        if (v_1 === "code_defined") {
+          throw new Error("This should not happen");
+        }
+        setFieldValue("customId", v_1);
+      };
+      $[132] = setFieldValue;
+      $[133] = t86;
     } else {
-      t86 = $[126];
+      t86 = $[133];
     }
-    const t87 = values.collectionGroup ?? false;
+    const t87 = customIdValue ?? "";
     let t88;
-    if ($[127] !== t86 || $[128] !== t87) {
-      t88 = /* @__PURE__ */ jsxRuntime.jsx(ui.BooleanSwitchWithLabel, { position: "start", size: "large", label: "Collection group", onValueChange: t86, value: t87 });
-      $[127] = t86;
-      $[128] = t87;
-      $[129] = t88;
+    let t89;
+    let t90;
+    if ($[134] === Symbol.for("react.memo_cache_sentinel")) {
+      t88 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "false", children: "Document ID is generated automatically" });
+      t89 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "true", children: "Users must define an ID" });
+      t90 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "optional", children: "Users can define an ID, but it is not required" });
+      $[134] = t88;
+      $[135] = t89;
+      $[136] = t90;
+    } else {
+      t88 = $[134];
+      t89 = $[135];
+      t90 = $[136];
+    }
+    let t91;
+    if ($[137] !== t85 || $[138] !== t86 || $[139] !== t87) {
+      t91 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { name: "customId", label: "Document IDs generation", position: "item-aligned", size: "large", fullWidth: true, disabled: t85, onValueChange: t86, value: t87, renderValue: _temp3$5, children: [
+        t88,
+        t89,
+        t90
+      ] }) });
+      $[137] = t85;
+      $[138] = t86;
+      $[139] = t87;
+      $[140] = t91;
     } else {
-      t88 = $[129];
+      t91 = $[140];
     }
-    let t89;
-    if ($[130] === Symbol.for("react.memo_cache_sentinel")) {
-      t89 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: "A collection group consists of all collections with the same path. This allows you to query over multiple collections at once." });
-      $[130] = t89;
+    let t92;
+    if ($[141] !== setFieldValue) {
+      t92 = (v_2) => setFieldValue("collectionGroup", v_2);
+      $[141] = setFieldValue;
+      $[142] = t92;
     } else {
-      t89 = $[130];
+      t92 = $[142];
     }
-    let t90;
-    if ($[131] !== t88) {
-      t90 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12 mt-4", children: [
-        t88,
-        t89
+    const t93 = values.collectionGroup ?? false;
+    let t94;
+    if ($[143] !== t92 || $[144] !== t93) {
+      t94 = /* @__PURE__ */ jsxRuntime.jsx(ui.BooleanSwitchWithLabel, { position: "start", size: "large", label: "Collection group", onValueChange: t92, value: t93 });
+      $[143] = t92;
+      $[144] = t93;
+      $[145] = t94;
+    } else {
+      t94 = $[145];
+    }
+    let t95;
+    if ($[146] === Symbol.for("react.memo_cache_sentinel")) {
+      t95 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: "A collection group consists of all collections with the same path. This allows you to query over multiple collections at once." });
+      $[146] = t95;
+    } else {
+      t95 = $[146];
+    }
+    let t96;
+    if ($[147] !== t94) {
+      t96 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12 mt-4", children: [
+        t94,
+        t95
       ] });
-      $[131] = t88;
-      $[132] = t90;
+      $[147] = t94;
+      $[148] = t96;
     } else {
-      t90 = $[132];
+      t96 = $[148];
     }
-    let t91;
-    if ($[133] !== setFieldValue) {
-      t91 = (v_1) => setFieldValue("textSearchEnabled", v_1);
-      $[133] = setFieldValue;
-      $[134] = t91;
+    let t97;
+    if ($[149] !== setFieldValue) {
+      t97 = (v_3) => setFieldValue("textSearchEnabled", v_3);
+      $[149] = setFieldValue;
+      $[150] = t97;
     } else {
-      t91 = $[134];
+      t97 = $[150];
     }
-    const t92 = values.textSearchEnabled ?? false;
-    let t93;
-    if ($[135] !== t91 || $[136] !== t92) {
-      t93 = /* @__PURE__ */ jsxRuntime.jsx(ui.BooleanSwitchWithLabel, { position: "start", size: "large", label: "Enable text search for this collection", onValueChange: t91, value: t92 });
-      $[135] = t91;
-      $[136] = t92;
-      $[137] = t93;
+    const t98 = values.textSearchEnabled ?? false;
+    let t99;
+    if ($[151] !== t97 || $[152] !== t98) {
+      t99 = /* @__PURE__ */ jsxRuntime.jsx(ui.BooleanSwitchWithLabel, { position: "start", size: "large", label: "Enable text search for this collection", onValueChange: t97, value: t98 });
+      $[151] = t97;
+      $[152] = t98;
+      $[153] = t99;
     } else {
-      t93 = $[137];
+      t99 = $[153];
     }
-    let t94;
-    if ($[138] === Symbol.for("react.memo_cache_sentinel")) {
-      t94 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: "Allow text search for this collection. If you have not specified a text search delegate, this will use the built-in local text search. This is not recommended for large collections, as it may incur in performance and cost issues." });
-      $[138] = t94;
+    let t100;
+    if ($[154] === Symbol.for("react.memo_cache_sentinel")) {
+      t100 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: "Allow text search for this collection. If you have not specified a text search delegate, this will use the built-in local text search. This is not recommended for large collections, as it may incur in performance and cost issues." });
+      $[154] = t100;
     } else {
-      t94 = $[138];
+      t100 = $[154];
     }
-    let t95;
-    if ($[139] !== t93) {
-      t95 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
-        t93,
-        t94
+    let t101;
+    if ($[155] !== t99) {
+      t101 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
+        t99,
+        t100
       ] });
-      $[139] = t93;
-      $[140] = t95;
+      $[155] = t99;
+      $[156] = t101;
     } else {
-      t95 = $[140];
+      t101 = $[156];
     }
-    let t96;
-    if ($[141] !== t48 || $[142] !== t56 || $[143] !== t68 || $[144] !== t75 || $[145] !== t78 || $[146] !== t85 || $[147] !== t90 || $[148] !== t95) {
-      t96 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 gap-4 p-4", children: [
+    let t102;
+    if ($[157] !== t101 || $[158] !== t48 || $[159] !== t56 || $[160] !== t68 || $[161] !== t75 || $[162] !== t78 || $[163] !== t84 || $[164] !== t91 || $[165] !== t96) {
+      t102 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 gap-4 p-4", children: [
         t48,
         t56,
         t68,
         t75,
         t78,
-        t85,
-        t90,
-        t95
+        t84,
+        t91,
+        t96,
+        t101
       ] });
-      $[141] = t48;
-      $[142] = t56;
-      $[143] = t68;
-      $[144] = t75;
-      $[145] = t78;
-      $[146] = t85;
-      $[147] = t90;
-      $[148] = t95;
-      $[149] = t96;
+      $[157] = t101;
+      $[158] = t48;
+      $[159] = t56;
+      $[160] = t68;
+      $[161] = t75;
+      $[162] = t78;
+      $[163] = t84;
+      $[164] = t91;
+      $[165] = t96;
+      $[166] = t102;
+    } else {
+      t102 = $[166];
+    }
+    let t103;
+    if ($[167] !== advancedPanelExpanded || $[168] !== t102) {
+      t103 = /* @__PURE__ */ jsxRuntime.jsx(ui.ExpandablePanel, { expanded: advancedPanelExpanded, onExpandedChange: setAdvancedPanelExpanded, title: t41, initiallyExpanded: false, children: t102 });
+      $[167] = advancedPanelExpanded;
+      $[168] = t102;
+      $[169] = t103;
     } else {
-      t96 = $[149];
+      t103 = $[169];
     }
-    let t97;
-    if ($[150] !== advancedPanelExpanded || $[151] !== t96) {
-      t97 = /* @__PURE__ */ jsxRuntime.jsx(ui.ExpandablePanel, { expanded: advancedPanelExpanded, onExpandedChange: setAdvancedPanelExpanded, title: t41, initiallyExpanded: false, children: t96 });
-      $[150] = advancedPanelExpanded;
-      $[151] = t96;
-      $[152] = t97;
-    } else {
-      t97 = $[152];
-    }
-    let t98;
-    if ($[153] !== children || $[154] !== t97) {
-      t98 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12 mt-8", children: [
-        t97,
+    let t104;
+    if ($[170] !== children || $[171] !== t103) {
+      t104 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12 mt-8", children: [
+        t103,
         children
       ] });
-      $[153] = children;
-      $[154] = t97;
-      $[155] = t98;
+      $[170] = children;
+      $[171] = t103;
+      $[172] = t104;
     } else {
-      t98 = $[155];
+      t104 = $[172];
     }
-    let t99;
-    if ($[156] !== t27 || $[157] !== t36 || $[158] !== t37 || $[159] !== t40 || $[160] !== t98) {
-      t99 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t19, children: [
-        t27,
-        t36,
-        t37,
+    let t105;
+    if ($[173] !== t104 || $[174] !== t23 || $[175] !== t31 || $[176] !== t34 || $[177] !== t40) {
+      t105 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 gap-4", children: [
+        t23,
+        t31,
+        t34,
         t40,
-        t98
+        t104
       ] });
-      $[156] = t27;
-      $[157] = t36;
-      $[158] = t37;
-      $[159] = t40;
-      $[160] = t98;
-      $[161] = t99;
-    } else {
-      t99 = $[161];
-    }
-    let t100;
-    if ($[162] === Symbol.for("react.memo_cache_sentinel")) {
-      t100 = /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      $[173] = t104;
+      $[174] = t23;
+      $[175] = t31;
+      $[176] = t34;
+      $[177] = t40;
+      $[178] = t105;
+    } else {
+      t105 = $[178];
+    }
+    let t106;
+    if ($[179] === Symbol.for("react.memo_cache_sentinel")) {
+      t106 = /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
         height: "52px"
       } });
-      $[162] = t100;
+      $[179] = t106;
     } else {
-      t100 = $[162];
+      t106 = $[179];
     }
-    let t101;
-    if ($[163] !== setFieldValue) {
-      t101 = (icon) => {
+    const t107 = typeof values.icon === "string" ? values.icon : void 0;
+    let t108;
+    if ($[180] !== setFieldValue) {
+      t108 = (icon) => {
         setIconDialogOpen(false);
         setFieldValue("icon", icon);
       };
-      $[163] = setFieldValue;
-      $[164] = t101;
+      $[180] = setFieldValue;
+      $[181] = t108;
     } else {
-      t101 = $[164];
+      t108 = $[181];
     }
-    let t102;
-    if ($[165] !== t101 || $[166] !== values.icon) {
-      t102 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 overflow-auto min-h-[200px]", children: /* @__PURE__ */ jsxRuntime.jsx(core.SearchIconsView, { selectedIcon: values.icon, onIconSelected: t101 }) });
-      $[165] = t101;
-      $[166] = values.icon;
-      $[167] = t102;
+    let t109;
+    if ($[182] !== t107 || $[183] !== t108) {
+      t109 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 overflow-auto min-h-[200px]", children: /* @__PURE__ */ jsxRuntime.jsx(core.SearchIconsView, { selectedIcon: t107, onIconSelected: t108 }) });
+      $[182] = t107;
+      $[183] = t108;
+      $[184] = t109;
     } else {
-      t102 = $[167];
+      t109 = $[184];
     }
-    let t103;
-    if ($[168] !== iconDialogOpen || $[169] !== t102) {
-      t103 = /* @__PURE__ */ jsxRuntime.jsx(ui.Dialog, { open: iconDialogOpen, onOpenChange: setIconDialogOpen, maxWidth: "xl", fullWidth: true, children: t102 });
-      $[168] = iconDialogOpen;
-      $[169] = t102;
-      $[170] = t103;
+    let t110;
+    if ($[185] !== iconDialogOpen || $[186] !== t109) {
+      t110 = /* @__PURE__ */ jsxRuntime.jsx(ui.Dialog, { open: iconDialogOpen, onOpenChange: setIconDialogOpen, maxWidth: "xl", fullWidth: true, children: t109 });
+      $[185] = iconDialogOpen;
+      $[186] = t109;
+      $[187] = t110;
     } else {
-      t103 = $[170];
+      t110 = $[187];
     }
-    let t104;
-    if ($[171] !== T0 || $[172] !== t103 || $[173] !== t18 || $[174] !== t99) {
-      t104 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t7, children: /* @__PURE__ */ jsxRuntime.jsxs(T0, { maxWidth: t8, className: t9, children: [
-        t18,
-        t99,
-        t100,
-        t103
+    let t111;
+    if ($[188] !== t105 || $[189] !== t110 || $[190] !== t15) {
+      t111 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-auto my-auto", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { maxWidth: "4xl", className: "flex flex-col gap-4 p-8 m-auto", children: [
+        t15,
+        t105,
+        t106,
+        t110
       ] }) });
-      $[171] = T0;
-      $[172] = t103;
-      $[173] = t18;
-      $[174] = t99;
-      $[175] = t104;
+      $[188] = t105;
+      $[189] = t110;
+      $[190] = t15;
+      $[191] = t111;
     } else {
-      t104 = $[175];
+      t111 = $[191];
     }
-    return t104;
+    return t111;
   }
-  function _temp3$4(value_3) {
+  function _temp3$5(value_3) {
     if (value_3 === "code_defined") {
       return "Code defined";
     } else {
@@ -950,10 +1012,10 @@
       }
     }
   }
-  function _temp2$7(value_2) {
+  function _temp2$8(value_2) {
     return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: value_2, children: value_2.toUpperCase() }, `size-select-${value_2}`);
   }
-  function _temp$b(value_1) {
+  function _temp$c(value_1) {
     return value_1.toUpperCase();
   }
   function DefaultDatabaseField(t0) {
@@ -1178,7 +1240,7 @@
             inferredValues.add(enumValue_0.id);
           });
           setFieldValue(enumValuesPath, [...newEnumValues, ...currentEnumValues], true);
-        }).catch(_temp$a).finally(() => setInferring(false));
+        }).catch(_temp$b).finally(() => setInferring(false));
       };
       $[8] = enumValuesPath;
       $[9] = getData;
@@ -1301,7 +1363,7 @@
     }
     return t15;
   }
-  function _temp$a(e) {
+  function _temp$b(e) {
     console.error(e);
   }
   const EnumEntry = React.memo(function EnumEntryInternal(t0) {
@@ -2090,7 +2152,7 @@
         t192 = $[42];
       }
       if ($[43] !== acceptedFiles || $[44] !== disabled || $[45] !== handleTypesChange || $[46] !== t172 || $[47] !== t182 || $[48] !== t192) {
-        t10 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsx(ui.MultiSelect, { className: "w-full", placeholder: "All file types allowed", disabled, name: acceptedFiles, value: t172, onValueChange: handleTypesChange, label: t182, renderValues: _temp3$3, children: t192 }) });
+        t10 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsx(ui.MultiSelect, { className: "w-full", placeholder: "All file types allowed", disabled, name: acceptedFiles, value: t172, onValueChange: handleTypesChange, label: t182, renderValues: _temp3$4, children: t192 }) });
         $[43] = acceptedFiles;
         $[44] = disabled;
         $[45] = handleTypesChange;
@@ -2353,16 +2415,16 @@
     }
     return t24;
   }
-  function _temp3$3(selected) {
+  function _temp3$4(selected) {
     if (!selected || selected.length === 0) {
       return "All file types allowed";
     }
-    return selected.map(_temp$9).filter(_temp2$6).join(", ");
+    return selected.map(_temp$a).filter(_temp2$7).join(", ");
   }
-  function _temp2$6(v_0) {
+  function _temp2$7(v_0) {
     return Boolean(v_0);
   }
-  function _temp$9(v) {
+  function _temp$a(v) {
     return fileTypes[v];
   }
   function editableProperty(property) {
@@ -2434,7 +2496,7 @@
     const t4 = selected ? ui.cardSelectedMixin : "";
     let t5;
     if ($[5] !== borderColorClass || $[6] !== t3 || $[7] !== t4) {
-      t5 = ui.cls("border", "pl-2 w-full flex flex-row gap-4 items-center", ui.cardMixin, t3, t4, "flex-grow p-4 border transition-colors duration-200", borderColorClass);
+      t5 = ui.cls("m-1", "border", "pl-2 w-full flex flex-row gap-4 items-center", ui.cardMixin, t3, t4, "flex-grow p-4 border transition-colors duration-200", borderColorClass);
       $[5] = borderColorClass;
       $[6] = t3;
       $[7] = t4;
@@ -2694,7 +2756,7 @@
     return t19;
   }
   const PropertyTree = React.memo(function PropertyTree2(t0) {
-    const $ = reactCompilerRuntime.c(26);
+    const $ = reactCompilerRuntime.c(37);
     const {
       namespace,
       selectedPropertyKey,
@@ -2720,94 +2782,152 @@
     }
     const propertiesOrder = t1;
     let t2;
-    if ($[3] !== namespace || $[4] !== onPropertyMove || $[5] !== propertiesOrder) {
-      t2 = (result) => {
-        if (!result.destination) {
-          return;
-        }
-        const startIndex = result.source.index;
-        const endIndex = result.destination.index;
-        const newPropertiesOrder = Array.from(propertiesOrder);
-        const [removed] = newPropertiesOrder.splice(startIndex, 1);
-        newPropertiesOrder.splice(endIndex, 0, removed);
-        if (onPropertyMove) {
-          onPropertyMove(newPropertiesOrder, namespace);
+    if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+      t2 = {
+        activationConstraint: {
+          distance: 5
         }
       };
-      $[3] = namespace;
-      $[4] = onPropertyMove;
-      $[5] = propertiesOrder;
-      $[6] = t2;
+      $[3] = t2;
     } else {
-      t2 = $[6];
+      t2 = $[3];
+    }
+    let t3;
+    if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+      t3 = {
+        coordinateGetter: sortable.sortableKeyboardCoordinates
+      };
+      $[4] = t3;
+    } else {
+      t3 = $[4];
     }
-    const onDragEnd = t2;
-    const t3 = `droppable_${namespace}`;
+    const sensors = core$1.useSensors(core$1.useSensor(core$1.PointerSensor, t2), core$1.useSensor(core$1.KeyboardSensor, t3));
     let t4;
-    if ($[7] !== additionalFields || $[8] !== className || $[9] !== collectionEditable || $[10] !== errors || $[11] !== inferredPropertyKeys || $[12] !== namespace || $[13] !== onPropertyClick || $[14] !== onPropertyMove || $[15] !== onPropertyRemove || $[16] !== properties || $[17] !== propertiesOrder || $[18] !== selectedPropertyKey) {
-      t4 = (droppableProvided, droppableSnapshot) => /* @__PURE__ */ jsxRuntime.jsxs("div", { ...droppableProvided.droppableProps, ref: droppableProvided.innerRef, className, children: [
-        propertiesOrder && propertiesOrder.map((propertyKey, index) => {
-          const property = properties[propertyKey];
-          const additionalField = additionalFields?.find((field) => field.key === propertyKey);
-          if (!property && !additionalField) {
-            console.warn(`Property ${propertyKey} not found in properties or additionalFields`);
-            return null;
+    if ($[5] !== namespace || $[6] !== onPropertyMove || $[7] !== propertiesOrder) {
+      t4 = (event) => {
+        const {
+          active,
+          over
+        } = event;
+        if (!over || active.id === over.id) {
+          return;
+        }
+        const activeId = String(active.id);
+        const overId = String(over.id);
+        const activeKey = activeId.includes(".") ? activeId.split(".").pop() : activeId;
+        const overKey = overId.includes(".") ? overId.split(".").pop() : overId;
+        if (!activeKey || !overKey) {
+          return;
+        }
+        const oldIndex = propertiesOrder.indexOf(activeKey);
+        const newIndex = propertiesOrder.indexOf(overKey);
+        if (oldIndex !== -1 && newIndex !== -1) {
+          const newPropertiesOrder = [...propertiesOrder];
+          const [removed] = newPropertiesOrder.splice(oldIndex, 1);
+          newPropertiesOrder.splice(newIndex, 0, removed);
+          if (onPropertyMove) {
+            onPropertyMove(newPropertiesOrder, namespace);
           }
-          return /* @__PURE__ */ jsxRuntime.jsx(dnd.Draggable, { draggableId: `array_field_${namespace}_${propertyKey}}`, index, children: (provided, snapshot) => /* @__PURE__ */ jsxRuntime.jsx(core.ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(PropertyTreeEntry, { propertyKey, propertyOrBuilder: property, additionalField, provided, errors, namespace, inferredPropertyKeys, onPropertyMove, onPropertyRemove, onPropertyClick: snapshot.isDragging ? void 0 : onPropertyClick, selectedPropertyKey, collectionEditable }) }) }, `array_field_${namespace}_${propertyKey}}`);
-        }).filter(Boolean),
-        droppableProvided.placeholder
-      ] });
-      $[7] = additionalFields;
-      $[8] = className;
-      $[9] = collectionEditable;
-      $[10] = errors;
-      $[11] = inferredPropertyKeys;
-      $[12] = namespace;
-      $[13] = onPropertyClick;
-      $[14] = onPropertyMove;
-      $[15] = onPropertyRemove;
-      $[16] = properties;
-      $[17] = propertiesOrder;
-      $[18] = selectedPropertyKey;
-      $[19] = t4;
-    } else {
-      t4 = $[19];
+        }
+      };
+      $[5] = namespace;
+      $[6] = onPropertyMove;
+      $[7] = propertiesOrder;
+      $[8] = t4;
+    } else {
+      t4 = $[8];
     }
+    const handleDragEnd = t4;
     let t5;
-    if ($[20] !== t3 || $[21] !== t4) {
-      t5 = /* @__PURE__ */ jsxRuntime.jsx(dnd.Droppable, { droppableId: t3, children: t4 });
-      $[20] = t3;
-      $[21] = t4;
-      $[22] = t5;
+    if ($[9] !== namespace || $[10] !== propertiesOrder) {
+      let t62;
+      if ($[12] !== namespace) {
+        t62 = (key) => getFullId(key, namespace);
+        $[12] = namespace;
+        $[13] = t62;
+      } else {
+        t62 = $[13];
+      }
+      t5 = propertiesOrder.map(t62);
+      $[9] = namespace;
+      $[10] = propertiesOrder;
+      $[11] = t5;
     } else {
-      t5 = $[22];
+      t5 = $[11];
     }
+    const items = t5;
     let t6;
-    if ($[23] !== onDragEnd || $[24] !== t5) {
-      t6 = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(dnd.DragDropContext, { onDragEnd, children: t5 }) });
-      $[23] = onDragEnd;
-      $[24] = t5;
-      $[25] = t6;
+    if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+      t6 = [modifiers.restrictToVerticalAxis];
+      $[14] = t6;
     } else {
-      t6 = $[25];
+      t6 = $[14];
     }
-    return t6;
-  }, (prevProps, nextProps) => {
-    const isSelected = nextProps.selectedPropertyKey?.startsWith(nextProps.namespace ?? "");
-    const wasSelected = prevProps.selectedPropertyKey?.startsWith(prevProps.namespace ?? "");
-    if (isSelected || wasSelected) return false;
-    return equal(prevProps.properties, nextProps.properties) && prevProps.propertiesOrder === nextProps.propertiesOrder && equal(prevProps.additionalFields, nextProps.additionalFields) && equal(prevProps.errors, nextProps.errors) && equal(prevProps.onPropertyClick, nextProps.onPropertyClick) && // equal(prevProps.onPropertyMove, nextProps.onPropertyMove) &&
-    // equal(prevProps.onPropertyRemove, nextProps.onPropertyRemove) &&
-    prevProps.namespace === nextProps.namespace && prevProps.collectionEditable === nextProps.collectionEditable;
-  });
+    let t7;
+    if ($[15] !== additionalFields || $[16] !== collectionEditable || $[17] !== errors || $[18] !== inferredPropertyKeys || $[19] !== namespace || $[20] !== onPropertyClick || $[21] !== onPropertyMove || $[22] !== onPropertyRemove || $[23] !== properties || $[24] !== propertiesOrder || $[25] !== selectedPropertyKey) {
+      t7 = propertiesOrder && propertiesOrder.map((propertyKey, index) => {
+        const property = properties[propertyKey];
+        const additionalField = additionalFields?.find((field) => field.key === propertyKey);
+        if (!property && !additionalField) {
+          console.warn(`Property ${propertyKey} not found in properties or additionalFields`);
+          return null;
+        }
+        const id = getFullId(propertyKey, namespace);
+        return /* @__PURE__ */ jsxRuntime.jsx(PropertyTreeEntry, { id, propertyKey, propertyOrBuilder: property, additionalField, errors, namespace, inferredPropertyKeys, onPropertyMove, onPropertyRemove, onPropertyClick, selectedPropertyKey, collectionEditable }, id);
+      }).filter(Boolean);
+      $[15] = additionalFields;
+      $[16] = collectionEditable;
+      $[17] = errors;
+      $[18] = inferredPropertyKeys;
+      $[19] = namespace;
+      $[20] = onPropertyClick;
+      $[21] = onPropertyMove;
+      $[22] = onPropertyRemove;
+      $[23] = properties;
+      $[24] = propertiesOrder;
+      $[25] = selectedPropertyKey;
+      $[26] = t7;
+    } else {
+      t7 = $[26];
+    }
+    let t8;
+    if ($[27] !== className || $[28] !== t7) {
+      t8 = /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: t7 });
+      $[27] = className;
+      $[28] = t7;
+      $[29] = t8;
+    } else {
+      t8 = $[29];
+    }
+    let t9;
+    if ($[30] !== items || $[31] !== t8) {
+      t9 = /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items, strategy: sortable.verticalListSortingStrategy, children: t8 });
+      $[30] = items;
+      $[31] = t8;
+      $[32] = t9;
+    } else {
+      t9 = $[32];
+    }
+    let t10;
+    if ($[33] !== handleDragEnd || $[34] !== sensors || $[35] !== t9) {
+      t10 = /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection: core$1.closestCenter, onDragEnd: handleDragEnd, modifiers: t6, children: t9 });
+      $[33] = handleDragEnd;
+      $[34] = sensors;
+      $[35] = t9;
+      $[36] = t10;
+    } else {
+      t10 = $[36];
+    }
+    return t10;
+  }, equal);
   function PropertyTreeEntry(t0) {
-    const $ = reactCompilerRuntime.c(53);
+    const $ = reactCompilerRuntime.c(62);
     const {
+      id,
       propertyKey,
       namespace,
       propertyOrBuilder,
       additionalField,
-      provided,
       selectedPropertyKey,
       errors,
       onPropertyClick,
@@ -2817,157 +2937,201 @@
       collectionEditable
     } = t0;
     let t1;
-    if ($[0] !== inferredPropertyKeys || $[1] !== namespace || $[2] !== propertyKey) {
-      t1 = inferredPropertyKeys?.includes(namespace ? `${namespace}.${propertyKey}` : propertyKey);
-      $[0] = inferredPropertyKeys;
-      $[1] = namespace;
-      $[2] = propertyKey;
-      $[3] = t1;
+    if ($[0] !== id) {
+      t1 = {
+        id
+      };
+      $[0] = id;
+      $[1] = t1;
     } else {
-      t1 = $[3];
+      t1 = $[1];
     }
-    const isPropertyInferred = t1;
+    const {
+      attributes,
+      listeners,
+      setNodeRef,
+      transform,
+      transition,
+      isDragging
+    } = sortable.useSortable(t1);
     let t2;
-    if ($[4] !== namespace || $[5] !== propertyKey) {
-      t2 = getFullId(propertyKey, namespace);
-      $[4] = namespace;
-      $[5] = propertyKey;
-      $[6] = t2;
+    if ($[2] !== transform) {
+      t2 = utilities.CSS.Translate.toString(transform);
+      $[2] = transform;
+      $[3] = t2;
     } else {
-      t2 = $[6];
+      t2 = $[3];
+    }
+    const t3 = isDragging ? 10 : void 0;
+    let t4;
+    if ($[4] !== t2 || $[5] !== t3 || $[6] !== transition) {
+      t4 = {
+        transform: t2,
+        transition,
+        zIndex: t3,
+        position: "relative"
+      };
+      $[4] = t2;
+      $[5] = t3;
+      $[6] = transition;
+      $[7] = t4;
+    } else {
+      t4 = $[7];
+    }
+    const style = t4;
+    let t5;
+    if ($[8] !== inferredPropertyKeys || $[9] !== namespace || $[10] !== propertyKey) {
+      t5 = inferredPropertyKeys?.includes(namespace ? `${namespace}.${propertyKey}` : propertyKey);
+      $[8] = inferredPropertyKeys;
+      $[9] = namespace;
+      $[10] = propertyKey;
+      $[11] = t5;
+    } else {
+      t5 = $[11];
     }
-    const fullId = t2;
+    const isPropertyInferred = t5;
+    const fullId = id;
     const fullIdPath = getFullIdPath(propertyKey, namespace);
     const hasError = fullIdPath in errors;
     let subtree;
     if (typeof propertyOrBuilder === "object") {
       const property = propertyOrBuilder;
       if (property.dataType === "map" && property.properties) {
-        let t32;
-        if ($[7] !== collectionEditable || $[8] !== errors || $[9] !== fullId || $[10] !== onPropertyClick || $[11] !== onPropertyMove || $[12] !== onPropertyRemove || $[13] !== property.properties || $[14] !== property.propertiesOrder || $[15] !== selectedPropertyKey) {
-          t32 = /* @__PURE__ */ jsxRuntime.jsx(PropertyTree, { selectedPropertyKey, namespace: fullId, properties: property.properties, propertiesOrder: property.propertiesOrder, errors, onPropertyClick, onPropertyMove, onPropertyRemove, collectionEditable });
-          $[7] = collectionEditable;
-          $[8] = errors;
-          $[9] = fullId;
-          $[10] = onPropertyClick;
-          $[11] = onPropertyMove;
-          $[12] = onPropertyRemove;
-          $[13] = property.properties;
-          $[14] = property.propertiesOrder;
-          $[15] = selectedPropertyKey;
-          $[16] = t32;
+        let t62;
+        if ($[12] !== collectionEditable || $[13] !== errors || $[14] !== fullId || $[15] !== onPropertyClick || $[16] !== onPropertyMove || $[17] !== onPropertyRemove || $[18] !== property.properties || $[19] !== property.propertiesOrder || $[20] !== selectedPropertyKey) {
+          t62 = /* @__PURE__ */ jsxRuntime.jsx(PropertyTree, { selectedPropertyKey, namespace: fullId, properties: property.properties, propertiesOrder: property.propertiesOrder, errors, onPropertyClick, onPropertyMove, onPropertyRemove, collectionEditable });
+          $[12] = collectionEditable;
+          $[13] = errors;
+          $[14] = fullId;
+          $[15] = onPropertyClick;
+          $[16] = onPropertyMove;
+          $[17] = onPropertyRemove;
+          $[18] = property.properties;
+          $[19] = property.propertiesOrder;
+          $[20] = selectedPropertyKey;
+          $[21] = t62;
         } else {
-          t32 = $[16];
+          t62 = $[21];
         }
-        subtree = t32;
+        subtree = t62;
       }
     }
     const selected = selectedPropertyKey === fullId;
-    let t3;
-    if ($[17] !== collectionEditable || $[18] !== propertyOrBuilder) {
-      t3 = propertyOrBuilder && (collectionEditable && !core.isPropertyBuilder(propertyOrBuilder) || editableProperty(propertyOrBuilder));
-      $[17] = collectionEditable;
-      $[18] = propertyOrBuilder;
-      $[19] = t3;
+    let t6;
+    if ($[22] !== collectionEditable || $[23] !== propertyOrBuilder) {
+      t6 = propertyOrBuilder && (collectionEditable && !core.isPropertyBuilder(propertyOrBuilder) || editableProperty(propertyOrBuilder));
+      $[22] = collectionEditable;
+      $[23] = propertyOrBuilder;
+      $[24] = t6;
     } else {
-      t3 = $[19];
+      t6 = $[24];
     }
-    const editable = t3;
-    let t4;
-    if ($[20] !== subtree) {
-      t4 = subtree && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute border-l " + ui.defaultBorderMixin, style: {
+    const editable = t6;
+    let t7;
+    if ($[25] !== subtree) {
+      t7 = subtree && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute border-l " + ui.defaultBorderMixin, style: {
         left: "32px",
         top: "64px",
         bottom: "16px"
       } });
-      $[20] = subtree;
-      $[21] = t4;
+      $[25] = subtree;
+      $[26] = t7;
     } else {
-      t4 = $[21];
-    }
-    let t5;
-    if ($[22] !== additionalField || $[23] !== editable || $[24] !== hasError || $[25] !== namespace || $[26] !== onPropertyClick || $[27] !== propertyKey || $[28] !== propertyOrBuilder || $[29] !== selected) {
-      t5 = !core.isPropertyBuilder(propertyOrBuilder) && !additionalField && editable ? /* @__PURE__ */ jsxRuntime.jsx(PropertyFieldPreview, { property: propertyOrBuilder, onClick: onPropertyClick ? () => onPropertyClick(propertyKey, namespace) : void 0, includeName: true, selected, hasError }) : /* @__PURE__ */ jsxRuntime.jsx(NonEditablePropertyPreview, { name: propertyKey, property: propertyOrBuilder, onClick: onPropertyClick ? () => onPropertyClick(propertyKey, namespace) : void 0, selected });
-      $[22] = additionalField;
-      $[23] = editable;
-      $[24] = hasError;
-      $[25] = namespace;
-      $[26] = onPropertyClick;
-      $[27] = propertyKey;
-      $[28] = propertyOrBuilder;
-      $[29] = selected;
-      $[30] = t5;
-    } else {
-      t5 = $[30];
-    }
-    let t6;
-    if ($[31] !== isPropertyInferred) {
-      t6 = isPropertyInferred && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Inferred property", children: /* @__PURE__ */ jsxRuntime.jsx(ui.AutorenewIcon, { size: "small", className: "p-2" }) });
-      $[31] = isPropertyInferred;
-      $[32] = t6;
-    } else {
-      t6 = $[32];
-    }
-    let t7;
-    if ($[33] !== namespace || $[34] !== onPropertyRemove || $[35] !== propertyKey) {
-      t7 = onPropertyRemove && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Remove", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", color: "inherit", onClick: () => onPropertyRemove(propertyKey, namespace), children: /* @__PURE__ */ jsxRuntime.jsx(ui.RemoveIcon, { size: "small" }) }) });
-      $[33] = namespace;
-      $[34] = onPropertyRemove;
-      $[35] = propertyKey;
-      $[36] = t7;
-    } else {
-      t7 = $[36];
+      t7 = $[26];
     }
     let t8;
-    if ($[37] !== onPropertyMove) {
-      t8 = onPropertyMove && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Move", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { component: "span", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(ui.DragHandleIcon, { size: "small" }) }) });
-      $[37] = onPropertyMove;
-      $[38] = t8;
+    if ($[27] !== additionalField || $[28] !== editable || $[29] !== hasError || $[30] !== namespace || $[31] !== onPropertyClick || $[32] !== propertyKey || $[33] !== propertyOrBuilder || $[34] !== selected) {
+      t8 = /* @__PURE__ */ jsxRuntime.jsx("div", { children: !core.isPropertyBuilder(propertyOrBuilder) && !additionalField && editable ? /* @__PURE__ */ jsxRuntime.jsx(PropertyFieldPreview, { property: propertyOrBuilder, onClick: onPropertyClick ? () => onPropertyClick(propertyKey, namespace) : void 0, includeName: true, selected, hasError }) : /* @__PURE__ */ jsxRuntime.jsx(NonEditablePropertyPreview, { name: propertyKey, property: propertyOrBuilder, onClick: onPropertyClick ? () => onPropertyClick(propertyKey, namespace) : void 0, selected }) });
+      $[27] = additionalField;
+      $[28] = editable;
+      $[29] = hasError;
+      $[30] = namespace;
+      $[31] = onPropertyClick;
+      $[32] = propertyKey;
+      $[33] = propertyOrBuilder;
+      $[34] = selected;
+      $[35] = t8;
     } else {
-      t8 = $[38];
+      t8 = $[35];
     }
     let t9;
-    if ($[39] !== t6 || $[40] !== t7 || $[41] !== t8) {
-      t9 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-2 right-2 flex flex-row ", children: [
-        t6,
-        t7,
-        t8
-      ] });
-      $[39] = t6;
-      $[40] = t7;
-      $[41] = t8;
-      $[42] = t9;
+    if ($[36] !== isPropertyInferred) {
+      t9 = isPropertyInferred && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Inferred property", children: /* @__PURE__ */ jsxRuntime.jsx(ui.AutorenewIcon, { size: "small", className: "p-2" }) });
+      $[36] = isPropertyInferred;
+      $[37] = t9;
     } else {
-      t9 = $[42];
+      t9 = $[37];
     }
     let t10;
-    if ($[43] !== subtree) {
-      t10 = subtree && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-16", children: subtree });
-      $[43] = subtree;
-      $[44] = t10;
+    if ($[38] !== isPropertyInferred || $[39] !== namespace || $[40] !== onPropertyRemove || $[41] !== propertyKey) {
+      t10 = onPropertyRemove && !isPropertyInferred && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Remove", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", color: "inherit", onClick: () => onPropertyRemove(propertyKey, namespace), children: /* @__PURE__ */ jsxRuntime.jsx(ui.RemoveIcon, { size: "small" }) }) });
+      $[38] = isPropertyInferred;
+      $[39] = namespace;
+      $[40] = onPropertyRemove;
+      $[41] = propertyKey;
+      $[42] = t10;
     } else {
-      t10 = $[44];
+      t10 = $[42];
     }
     let t11;
-    if ($[45] !== provided.dragHandleProps || $[46] !== provided.draggableProps || $[47] !== provided.innerRef || $[48] !== t10 || $[49] !== t4 || $[50] !== t5 || $[51] !== t9) {
-      t11 = /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, className: "relative -ml-8", children: [
-        t4,
-        t5,
+    if ($[43] !== attributes || $[44] !== listeners || $[45] !== onPropertyMove) {
+      t11 = onPropertyMove && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Move", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { component: "span", size: "small", ...attributes, ...listeners, children: /* @__PURE__ */ jsxRuntime.jsx(ui.DragHandleIcon, { size: "small" }) }) });
+      $[43] = attributes;
+      $[44] = listeners;
+      $[45] = onPropertyMove;
+      $[46] = t11;
+    } else {
+      t11 = $[46];
+    }
+    let t12;
+    if ($[47] !== t10 || $[48] !== t11 || $[49] !== t9) {
+      t12 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-2 right-2 flex flex-row", children: [
         t9,
-        t10
+        t10,
+        t11
       ] });
-      $[45] = provided.dragHandleProps;
-      $[46] = provided.draggableProps;
-      $[47] = provided.innerRef;
-      $[48] = t10;
-      $[49] = t4;
-      $[50] = t5;
-      $[51] = t9;
-      $[52] = t11;
+      $[47] = t10;
+      $[48] = t11;
+      $[49] = t9;
+      $[50] = t12;
     } else {
-      t11 = $[52];
+      t12 = $[50];
     }
-    return t11;
+    let t13;
+    if ($[51] !== subtree) {
+      t13 = subtree && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-16", children: subtree });
+      $[51] = subtree;
+      $[52] = t13;
+    } else {
+      t13 = $[52];
+    }
+    let t14;
+    if ($[53] !== t12 || $[54] !== t13 || $[55] !== t7 || $[56] !== t8) {
+      t14 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        t7,
+        t8,
+        t12,
+        t13
+      ] });
+      $[53] = t12;
+      $[54] = t13;
+      $[55] = t7;
+      $[56] = t8;
+      $[57] = t14;
+    } else {
+      t14 = $[57];
+    }
+    let t15;
+    if ($[58] !== setNodeRef || $[59] !== style || $[60] !== t14) {
+      t15 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setNodeRef, style, className: "relative -ml-8", children: t14 });
+      $[58] = setNodeRef;
+      $[59] = style;
+      $[60] = t14;
+      $[61] = t15;
+    } else {
+      t15 = $[61];
+    }
+    return t15;
   }
   function MapPropertyField(t0) {
     const $ = reactCompilerRuntime.c(67);
@@ -3181,7 +3345,7 @@
     const t19 = values.spreadChildren ?? false;
     let t20;
     if ($[40] !== t18 || $[41] !== t19) {
-      t20 = /* @__PURE__ */ jsxRuntime.jsx(ui.BooleanSwitchWithLabel, { position: "start", size: "small", label: "Spread children as columns", onValueChange: t18, value: t19 });
+      t20 = /* @__PURE__ */ jsxRuntime.jsx(ui.BooleanSwitchWithLabel, { position: "start", size: "medium", label: "Spread children as columns", onValueChange: t18, value: t19 });
       $[40] = t18;
       $[41] = t19;
       $[42] = t20;
@@ -4226,7 +4390,8 @@
       existing,
       multiple,
       disabled,
-      showErrors
+      showErrors,
+      asString
     } = t0;
     const {
       values,
@@ -4244,7 +4409,7 @@
       }
       return t12;
     }
-    const pathPath = multiple ? "of.path" : "path";
+    const pathPath = asString ? "reference.path" : multiple ? "of.path" : "path";
     let t1;
     if ($[1] !== pathPath || $[2] !== values) {
       t1 = formex.getIn(values, pathPath);
@@ -4335,8 +4500,8 @@
     const collections = t1;
     let t2;
     if ($[10] !== collections || $[11] !== disabled || $[12] !== error || $[13] !== handleChange || $[14] !== pathPath || $[15] !== props || $[16] !== value) {
-      const groups = Array.from(new Set(Object.values(collections).map(_temp$8).filter(Boolean)).values());
-      const ungroupedCollections = collections.filter(_temp2$5);
+      const groups = Array.from(new Set(Object.values(collections).map(_temp$9).filter(Boolean)).values());
+      const ungroupedCollections = collections.filter(_temp2$6);
       let t32;
       if ($[18] !== collections) {
         t32 = (selected) => {
@@ -4367,7 +4532,7 @@
       }
       t2 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { error: Boolean(error), disabled, value: value ?? "", position: "item-aligned", name: pathPath, size: "large", fullWidth: true, onChange: handleChange, label: "Target collection", renderValue: t32, ...props, children: [
         groups.flatMap(t42),
-        ungroupedCollections && /* @__PURE__ */ jsxRuntime.jsx(ui.SelectGroup, { label: "Views", children: ungroupedCollections.map(_temp3$2) })
+        ungroupedCollections && /* @__PURE__ */ jsxRuntime.jsx(ui.SelectGroup, { label: "Views", children: ungroupedCollections.map(_temp3$3) })
       ] });
       $[10] = collections;
       $[11] = disabled;
@@ -4400,16 +4565,16 @@
     }
     return t4;
   }
-  function _temp3$2(collection_2) {
+  function _temp3$3(collection_2) {
     return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: collection_2.id ?? collection_2.path, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row", children: [
       /* @__PURE__ */ jsxRuntime.jsx(core.IconForView, { collectionOrView: collection_2 }),
       /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "subtitle2", className: "font-medium ml-4", children: collection_2?.name.toUpperCase() })
     ] }) }, collection_2.id ?? collection_2.path);
   }
-  function _temp2$5(col) {
+  function _temp2$6(col) {
     return !col.group;
   }
-  function _temp$8(e) {
+  function _temp$9(e) {
     return e.group;
   }
   function DateTimePropertyField(t0) {
@@ -4484,7 +4649,7 @@
     }
     let t10;
     if ($[14] !== disabled || $[15] !== t5 || $[16] !== t6 || $[17] !== t7) {
-      t10 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { name: "mode", value: t5, error: t6, size: "large", onValueChange: t7, label: "Mode", fullWidth: true, renderValue: _temp$7, disabled, children: [
+      t10 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { name: "mode", value: t5, error: t6, size: "large", onValueChange: t7, label: "Mode", fullWidth: true, renderValue: _temp$8, disabled, children: [
         t8,
         t9
       ] });
@@ -4545,7 +4710,7 @@
     }
     let t20;
     if ($[30] !== disabled || $[31] !== t14 || $[32] !== t15 || $[33] !== t16) {
-      t20 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { name: "autoValue", disabled, size: "large", fullWidth: true, value: t14, onValueChange: t15, renderValue: _temp2$4, error: t16, label: "Automatic value", children: [
+      t20 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { name: "autoValue", disabled, size: "large", fullWidth: true, value: t14, onValueChange: t15, renderValue: _temp2$5, error: t16, label: "Automatic value", children: [
         t17,
         t18,
         t19
@@ -4615,7 +4780,7 @@
     }
     return t27;
   }
-  function _temp2$4(v_2) {
+  function _temp2$5(v_2) {
     switch (v_2) {
       case "on_create": {
         return "On create";
@@ -4628,7 +4793,7 @@
       }
     }
   }
-  function _temp$7(v_0) {
+  function _temp$8(v_0) {
     switch (v_0) {
       case "date_time": {
         return "Date/Time";
@@ -4653,7 +4818,7 @@
           field,
           form
         } = t22;
-        return /* @__PURE__ */ jsxRuntime.jsx(SwitchControl, { label: "Hide from collection", disabled, form, tooltip: "Hide this field from the collection view. It will still be visible in the form view", field });
+        return /* @__PURE__ */ jsxRuntime.jsx(SwitchControl, { label: "Hide from collection", size: "medium", disabled, form, tooltip: "Hide this field from the collection view. It will still be visible in the form view", field });
       } }) });
       $[0] = disabled;
       $[1] = t1;
@@ -4667,7 +4832,7 @@
           field: field_0,
           form: form_0
         } = t32;
-        return /* @__PURE__ */ jsxRuntime.jsx(SwitchControl, { label: "Read only", disabled, tooltip: "Is this a read only field. Display only as a preview", form: form_0, field: field_0 });
+        return /* @__PURE__ */ jsxRuntime.jsx(SwitchControl, { label: "Read only", size: "medium", disabled, tooltip: "Is this a read only field. Display only as a preview", form: form_0, field: field_0 });
       } }) });
       $[2] = disabled;
       $[3] = t2;
@@ -4853,6 +5018,12 @@
         propertyConfig: "reference",
         editable: propertyData.editable !== void 0 ? propertyData.editable : true
       });
+    } else if (selectedWidgetId === "reference_as_string") {
+      updatedProperty = core.mergeDeep(propertyData, {
+        dataType: "string",
+        propertyConfig: "reference_as_string",
+        editable: propertyData.editable !== void 0 ? propertyData.editable : true
+      });
     } else if (selectedWidgetId === "multi_references") {
       updatedProperty = core.mergeDeep(propertyData, {
         dataType: "array",
@@ -4953,7 +5124,7 @@
     }
     let t8;
     if ($[8] !== disabled || $[9] !== t2 || $[10] !== t3) {
-      t8 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { disabled, position: "item-aligned", fullWidth: true, onValueChange: t2, label: "Preview type", renderValue: _temp$6, value: t3, children: [
+      t8 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { disabled, position: "item-aligned", fullWidth: true, onValueChange: t2, label: "Preview type", renderValue: _temp$7, value: t3, children: [
         t4,
         t5,
         t6,
@@ -5019,7 +5190,7 @@
     }
     return t13;
   }
-  function _temp$6(value_0) {
+  function _temp$7(value_0) {
     switch (value_0) {
       case "image": {
         return "Image";
@@ -5035,7 +5206,7 @@
       }
     }
   }
-  const supportedFieldsIds = ["text_field", "multiline", "markdown", "url", "email", "select", "multi_select", "number_input", "number_select", "multi_number_select", "file_upload", "multi_file_upload", "reference", "multi_references", "switch", "date_time", "group", "key_value", "repeat", "block"];
+  const supportedFieldsIds = ["text_field", "multiline", "markdown", "url", "email", "select", "multi_select", "number_input", "number_select", "multi_number_select", "file_upload", "multi_file_upload", "reference", "reference_as_string", "multi_references", "switch", "date_time", "group", "key_value", "repeat", "block"];
   const supportedFields = Object.entries(core.DEFAULT_FIELD_CONFIGS).filter(([id]) => supportedFieldsIds.includes(id)).map(([id, config]) => ({
     [id]: config
   })).reduce((a, b) => ({
@@ -5659,7 +5830,7 @@
     }
     let t7;
     if ($[20] !== onCancel) {
-      t7 = onCancel && /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", onClick: () => {
+      t7 = onCancel && /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", color: "primary", onClick: () => {
         onCancel();
         formexRef.current?.resetForm();
       }, children: "Cancel" });
@@ -5711,7 +5882,7 @@
     return t11;
   }
   function PropertyEditFormFields(t0) {
-    const $ = reactCompilerRuntime.c(142);
+    const $ = reactCompilerRuntime.c(146);
     const {
       values,
       errors,
@@ -5800,7 +5971,7 @@
     let t6;
     if ($[14] !== errors || $[15] !== onError || $[16] !== propertyNamespace || $[17] !== values?.id) {
       t6 = () => {
-        if (values?.id && onError && !core.isEmptyObject(errors)) {
+        if (values?.id && onError) {
           onError(values?.id, propertyNamespace, errors);
         }
       };
@@ -6000,59 +6171,73 @@
                             }
                             childComponent = t102;
                           } else {
-                            if (selectedFieldConfigId === "date_time") {
+                            if (selectedFieldConfigId === "reference_as_string") {
                               let t102;
-                              if ($[75] !== disabled) {
-                                t102 = /* @__PURE__ */ jsxRuntime.jsx(DateTimePropertyField, { disabled });
+                              if ($[75] !== disabled || $[76] !== existing || $[77] !== showErrors) {
+                                t102 = /* @__PURE__ */ jsxRuntime.jsx(ReferencePropertyField, { showErrors, existing, asString: true, multiple: false, disabled });
                                 $[75] = disabled;
-                                $[76] = t102;
+                                $[76] = existing;
+                                $[77] = showErrors;
+                                $[78] = t102;
                               } else {
-                                t102 = $[76];
+                                t102 = $[78];
                               }
                               childComponent = t102;
                             } else {
-                              if (selectedFieldConfigId === "multi_references") {
+                              if (selectedFieldConfigId === "date_time") {
                                 let t102;
-                                if ($[77] !== disabled || $[78] !== existing || $[79] !== showErrors) {
-                                  t102 = /* @__PURE__ */ jsxRuntime.jsx(ReferencePropertyField, { showErrors, existing, multiple: true, disabled });
-                                  $[77] = disabled;
-                                  $[78] = existing;
-                                  $[79] = showErrors;
+                                if ($[79] !== disabled) {
+                                  t102 = /* @__PURE__ */ jsxRuntime.jsx(DateTimePropertyField, { disabled });
+                                  $[79] = disabled;
                                   $[80] = t102;
                                 } else {
                                   t102 = $[80];
                                 }
                                 childComponent = t102;
                               } else {
-                                if (selectedFieldConfigId === "repeat") {
+                                if (selectedFieldConfigId === "multi_references") {
                                   let t102;
-                                  if ($[81] !== allowDataInference || $[82] !== collectionEditable || $[83] !== disabled || $[84] !== existing || $[85] !== getData || $[86] !== propertyConfigs || $[87] !== showErrors) {
-                                    t102 = /* @__PURE__ */ jsxRuntime.jsx(RepeatPropertyField, { showErrors, existing, getData, allowDataInference, disabled, collectionEditable, propertyConfigs });
-                                    $[81] = allowDataInference;
-                                    $[82] = collectionEditable;
-                                    $[83] = disabled;
-                                    $[84] = existing;
-                                    $[85] = getData;
-                                    $[86] = propertyConfigs;
-                                    $[87] = showErrors;
-                                    $[88] = t102;
+                                  if ($[81] !== disabled || $[82] !== existing || $[83] !== showErrors) {
+                                    t102 = /* @__PURE__ */ jsxRuntime.jsx(ReferencePropertyField, { showErrors, existing, multiple: true, disabled });
+                                    $[81] = disabled;
+                                    $[82] = existing;
+                                    $[83] = showErrors;
+                                    $[84] = t102;
                                   } else {
-                                    t102 = $[88];
+                                    t102 = $[84];
                                   }
                                   childComponent = t102;
                                 } else {
-                                  if (selectedFieldConfigId === "key_value") {
+                                  if (selectedFieldConfigId === "repeat") {
                                     let t102;
-                                    if ($[89] !== disabled) {
-                                      t102 = /* @__PURE__ */ jsxRuntime.jsx(KeyValuePropertyField, { disabled });
-                                      $[89] = disabled;
-                                      $[90] = t102;
+                                    if ($[85] !== allowDataInference || $[86] !== collectionEditable || $[87] !== disabled || $[88] !== existing || $[89] !== getData || $[90] !== propertyConfigs || $[91] !== showErrors) {
+                                      t102 = /* @__PURE__ */ jsxRuntime.jsx(RepeatPropertyField, { showErrors, existing, getData, allowDataInference, disabled, collectionEditable, propertyConfigs });
+                                      $[85] = allowDataInference;
+                                      $[86] = collectionEditable;
+                                      $[87] = disabled;
+                                      $[88] = existing;
+                                      $[89] = getData;
+                                      $[90] = propertyConfigs;
+                                      $[91] = showErrors;
+                                      $[92] = t102;
                                     } else {
-                                      t102 = $[90];
+                                      t102 = $[92];
                                     }
                                     childComponent = t102;
                                   } else {
-                                    childComponent = null;
+                                    if (selectedFieldConfigId === "key_value") {
+                                      let t102;
+                                      if ($[93] !== disabled) {
+                                        t102 = /* @__PURE__ */ jsxRuntime.jsx(KeyValuePropertyField, { disabled });
+                                        $[93] = disabled;
+                                        $[94] = t102;
+                                      } else {
+                                        t102 = $[94];
+                                      }
+                                      childComponent = t102;
+                                    } else {
+                                      childComponent = null;
+                                    }
                                   }
                                 }
                               }
@@ -6070,7 +6255,7 @@
       }
     }
     let t10;
-    if ($[91] !== disabled) {
+    if ($[95] !== disabled) {
       t10 = disabled && /* @__PURE__ */ jsxRuntime.jsxs(ui.InfoLabel, { mode: "warn", children: [
         /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { children: "This property can't be edited" }),
         /* @__PURE__ */ jsxRuntime.jsxs(ui.Typography, { variant: "caption", children: [
@@ -6079,157 +6264,157 @@
           " flag"
         ] })
       ] });
-      $[91] = disabled;
-      $[92] = t10;
+      $[95] = disabled;
+      $[96] = t10;
     } else {
-      t10 = $[92];
+      t10 = $[96];
     }
     const t11 = selectedFieldConfigId;
     let t12;
-    if ($[93] !== onWidgetSelectChanged) {
+    if ($[97] !== onWidgetSelectChanged) {
       t12 = (value) => onWidgetSelectChanged(value);
-      $[93] = onWidgetSelectChanged;
-      $[94] = t12;
+      $[97] = onWidgetSelectChanged;
+      $[98] = t12;
     } else {
-      t12 = $[94];
+      t12 = $[98];
     }
     let t13;
-    if ($[95] !== onDismiss) {
+    if ($[99] !== onDismiss) {
       t13 = (open, hasValue) => {
         if (!hasValue) {
           onDismiss?.();
         }
         setSelectOpen(open);
       };
-      $[95] = onDismiss;
-      $[96] = t13;
+      $[99] = onDismiss;
+      $[100] = t13;
     } else {
-      t13 = $[96];
+      t13 = $[100];
     }
     const t14 = Boolean(selectedWidgetError);
     let t15;
-    if ($[97] !== disabled || $[98] !== existing || $[99] !== inArray || $[100] !== propertyConfigs || $[101] !== selectOpen || $[102] !== t11 || $[103] !== t12 || $[104] !== t13 || $[105] !== t14 || $[106] !== values) {
+    if ($[101] !== disabled || $[102] !== existing || $[103] !== inArray || $[104] !== propertyConfigs || $[105] !== selectOpen || $[106] !== t11 || $[107] !== t12 || $[108] !== t13 || $[109] !== t14 || $[110] !== values) {
       t15 = /* @__PURE__ */ jsxRuntime.jsx(WidgetSelectView, { initialProperty: values, value: t11, onValueChange: t12, open: selectOpen, onOpenChange: t13, disabled, showError: t14, existing, propertyConfigs, inArray });
-      $[97] = disabled;
-      $[98] = existing;
-      $[99] = inArray;
-      $[100] = propertyConfigs;
-      $[101] = selectOpen;
-      $[102] = t11;
-      $[103] = t12;
-      $[104] = t13;
-      $[105] = t14;
-      $[106] = values;
-      $[107] = t15;
-    } else {
-      t15 = $[107];
+      $[101] = disabled;
+      $[102] = existing;
+      $[103] = inArray;
+      $[104] = propertyConfigs;
+      $[105] = selectOpen;
+      $[106] = t11;
+      $[107] = t12;
+      $[108] = t13;
+      $[109] = t14;
+      $[110] = values;
+      $[111] = t15;
+    } else {
+      t15 = $[111];
     }
     let t16;
-    if ($[108] !== selectedWidgetError) {
+    if ($[112] !== selectedWidgetError) {
       t16 = selectedWidgetError && /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "ml-3.5", color: "error", children: "Required" });
-      $[108] = selectedWidgetError;
-      $[109] = t16;
+      $[112] = selectedWidgetError;
+      $[113] = t16;
     } else {
-      t16 = $[109];
+      t16 = $[113];
     }
     let t17;
-    if ($[110] !== t15 || $[111] !== t16) {
+    if ($[114] !== t15 || $[115] !== t16) {
       t17 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col gap-2", children: [
         t15,
         t16
       ] });
-      $[110] = t15;
-      $[111] = t16;
-      $[112] = t17;
+      $[114] = t15;
+      $[115] = t16;
+      $[116] = t17;
     } else {
-      t17 = $[112];
+      t17 = $[116];
     }
     let t18;
-    if ($[113] !== disabled || $[114] !== onDelete || $[115] !== values?.id) {
+    if ($[117] !== disabled || $[118] !== onDelete || $[119] !== values?.id) {
       t18 = onDelete && values?.id && /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { variant: "ghost", className: "m-4", disabled, onClick: () => setDeleteDialogOpen(true), children: /* @__PURE__ */ jsxRuntime.jsx(ui.DeleteIcon, {}) });
-      $[113] = disabled;
-      $[114] = onDelete;
-      $[115] = values?.id;
-      $[116] = t18;
+      $[117] = disabled;
+      $[118] = onDelete;
+      $[119] = values?.id;
+      $[120] = t18;
     } else {
-      t18 = $[116];
+      t18 = $[120];
     }
     let t19;
-    if ($[117] !== t17 || $[118] !== t18) {
+    if ($[121] !== t17 || $[122] !== t18) {
       t19 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex mt-2 justify-between", children: [
         t17,
         t18
       ] });
-      $[117] = t17;
-      $[118] = t18;
-      $[119] = t19;
+      $[121] = t17;
+      $[122] = t18;
+      $[123] = t19;
     } else {
-      t19 = $[119];
+      t19 = $[123];
     }
     let t20;
-    if ($[120] !== autoUpdateId || $[121] !== disabled || $[122] !== existing || $[123] !== includeIdAndTitle || $[124] !== showErrors) {
+    if ($[124] !== autoUpdateId || $[125] !== disabled || $[126] !== existing || $[127] !== includeIdAndTitle || $[128] !== showErrors) {
       t20 = includeIdAndTitle && /* @__PURE__ */ jsxRuntime.jsx(CommonPropertyFields, { showErrors, disabledId: existing, isNewProperty: !existing, disabled, autoUpdateId, ref: nameFieldRef });
-      $[120] = autoUpdateId;
-      $[121] = disabled;
-      $[122] = existing;
-      $[123] = includeIdAndTitle;
-      $[124] = showErrors;
-      $[125] = t20;
+      $[124] = autoUpdateId;
+      $[125] = disabled;
+      $[126] = existing;
+      $[127] = includeIdAndTitle;
+      $[128] = showErrors;
+      $[129] = t20;
     } else {
-      t20 = $[125];
+      t20 = $[129];
     }
     let t21;
-    if ($[126] !== disabled) {
+    if ($[130] !== disabled) {
       t21 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsx(AdvancedPropertyValidation, { disabled }) });
-      $[126] = disabled;
-      $[127] = t21;
+      $[130] = disabled;
+      $[131] = t21;
     } else {
-      t21 = $[127];
+      t21 = $[131];
     }
     let t22;
-    if ($[128] !== childComponent || $[129] !== t20 || $[130] !== t21) {
+    if ($[132] !== childComponent || $[133] !== t20 || $[134] !== t21) {
       t22 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 gap-y-12 mt-8 mb-8", children: [
         t20,
         childComponent,
         t21
       ] });
-      $[128] = childComponent;
-      $[129] = t20;
-      $[130] = t21;
-      $[131] = t22;
+      $[132] = childComponent;
+      $[133] = t20;
+      $[134] = t21;
+      $[135] = t22;
     } else {
-      t22 = $[131];
+      t22 = $[135];
     }
     let t23;
-    if ($[132] !== deleteDialogOpen || $[133] !== onDelete || $[134] !== propertyNamespace || $[135] !== values?.id) {
+    if ($[136] !== deleteDialogOpen || $[137] !== onDelete || $[138] !== propertyNamespace || $[139] !== values?.id) {
       t23 = onDelete && /* @__PURE__ */ jsxRuntime.jsx(core.ConfirmationDialog, { open: deleteDialogOpen, onAccept: () => onDelete(values?.id, propertyNamespace), onCancel: () => setDeleteDialogOpen(false), title: /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Delete this property?" }), body: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         " This will ",
         /* @__PURE__ */ jsxRuntime.jsx("b", { children: "not delete any data" }),
         ", only modify the collection."
       ] }) });
-      $[132] = deleteDialogOpen;
-      $[133] = onDelete;
-      $[134] = propertyNamespace;
-      $[135] = values?.id;
-      $[136] = t23;
+      $[136] = deleteDialogOpen;
+      $[137] = onDelete;
+      $[138] = propertyNamespace;
+      $[139] = values?.id;
+      $[140] = t23;
     } else {
-      t23 = $[136];
+      t23 = $[140];
     }
     let t24;
-    if ($[137] !== t10 || $[138] !== t19 || $[139] !== t22 || $[140] !== t23) {
+    if ($[141] !== t10 || $[142] !== t19 || $[143] !== t22 || $[144] !== t23) {
       t24 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         t10,
         t19,
         t22,
         t23
       ] });
-      $[137] = t10;
-      $[138] = t19;
-      $[139] = t22;
-      $[140] = t23;
-      $[141] = t24;
+      $[141] = t10;
+      $[142] = t19;
+      $[143] = t22;
+      $[144] = t23;
+      $[145] = t24;
     } else {
-      t24 = $[141];
+      t24 = $[145];
     }
     return t24;
   }
@@ -6269,6 +6454,7 @@
     file_upload: "File",
     multi_file_upload: "File",
     reference: "Reference",
+    reference_as_string: "Text",
     multi_references: "Reference",
     date_time: "Date",
     group: "Group",
@@ -6300,7 +6486,7 @@
     let t6;
     if ($[0] !== disabled || $[1] !== existing || $[2] !== inArray || $[3] !== initialProperty || $[4] !== onOpenChange || $[5] !== onValueChange || $[6] !== open || $[7] !== propertyConfigs || $[8] !== value) {
       const allSupportedFields = Object.entries(supportedFields).concat(Object.entries(propertyConfigs));
-      const displayedWidgets = (inArray ? allSupportedFields.filter(_temp$5) : allSupportedFields).map(_temp2$3).reduce(_temp3$1, {});
+      const displayedWidgets = (inArray ? allSupportedFields.filter(_temp$6) : allSupportedFields).map(_temp2$4).reduce(_temp3$2, {});
       const key_0 = value;
       const propertyConfig_1 = key_0 ? core.DEFAULT_FIELD_CONFIGS[key_0] ?? propertyConfigs[key_0] : void 0;
       const baseProperty = propertyConfig_1?.property;
@@ -6482,19 +6668,19 @@
     }
     return "Custom/Other";
   }
-  function _temp3$1(a, b) {
+  function _temp3$2(a, b) {
     return {
       ...a,
       ...b
     };
   }
-  function _temp2$3(t0) {
+  function _temp2$4(t0) {
     const [key, propertyConfig_0] = t0;
     return {
       [key]: propertyConfig_0
     };
   }
-  function _temp$5(t0) {
+  function _temp$6(t0) {
     const [, propertyConfig] = t0;
     return !core.isPropertyBuilder(propertyConfig.property) && propertyConfig.property?.dataType !== "array";
   }
@@ -6588,7 +6774,7 @@
     }
     let t10;
     if ($[20] !== onClick || $[21] !== t9) {
-      t10 = /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { onClick, className: "flex flex-row items-center px-4 py-2", children: t9 });
+      t10 = /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { onClick, className: "flex flex-row items-center px-4 py-2 m-1", children: t9 });
       $[20] = onClick;
       $[21] = t9;
       $[22] = t10;
@@ -6642,7 +6828,7 @@
     if ($[3] !== code) {
       t3 = /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogContent, { children: [
         t2,
-        /* @__PURE__ */ jsxRuntime.jsx(prismReactRenderer.Highlight, { theme: prismReactRenderer.themes.vsDark, code, language: "typescript", children: _temp$4 })
+        /* @__PURE__ */ jsxRuntime.jsx(prismReactRenderer.Highlight, { theme: prismReactRenderer.themes.vsDark, code, language: "typescript", children: _temp$5 })
       ] });
       $[3] = code;
       $[4] = t3;
@@ -6656,7 +6842,7 @@
         e.preventDefault();
         snackbarController.open({
           type: "success",
-          message: `Copied`
+          message: "Copied"
         });
         return navigator.clipboard.writeText(code);
       };
@@ -6675,7 +6861,7 @@
     }
     let t6;
     if ($[9] !== t4) {
-      t6 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "text", size: "small", onClick: t4, children: [
+      t6 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "text", size: "small", color: "primary", onClick: t4, children: [
         t5,
         "Copy to clipboard"
       ] });
@@ -6722,7 +6908,7 @@
     }
     return t9;
   }
-  function _temp$4(t0) {
+  function _temp$5(t0) {
     const {
       style,
       tokens,
@@ -6835,6 +7021,7 @@
     const inferPropertiesFromData = doCollectionInference ? () => {
       if (!doCollectionInference) return;
       setInferringProperties(true);
+      console.debug("CollectionEditor: inferring properties from data", doCollectionInference, values);
       doCollectionInference(values).then((newCollection) => {
         if (newCollection) core.makePropertiesEditable(newCollection.properties);
         if (!newCollection) {
@@ -6977,8 +7164,8 @@
       setSelectedPropertyKey(propertyKey_2);
       setSelectedPropertyNamespace(namespace_5);
     };
-    const body = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 gap-2 h-full bg-surface-50 dark:bg-surface-900", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("p-4 md:p-8 pb-20 md:pb-20", "col-span-12 lg:col-span-5 h-full overflow-auto", !asDialog && "border-r " + ui.defaultBorderMixin), children: [
+    const body = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 gap-2 h-full bg-white dark:bg-surface-950", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("bg-surface-50 dark:bg-surface-900", "p-4 md:p-8 pb-20 md:pb-20", "col-span-12 lg:col-span-5 h-full overflow-auto", !asDialog && "border-r " + ui.defaultBorderMixin), children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex my-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-grow mb-4", children: [
             /* @__PURE__ */ jsxRuntime.jsx(formex.Field, { name: "name", as: ui.DebouncedTextField, invisible: true, className: "-ml-1", inputClassName: "text-2xl font-headers", placeholder: "Collection name", size: "small", required: true, error: Boolean(errors?.name) }),
@@ -6997,7 +7184,7 @@
         /* @__PURE__ */ jsxRuntime.jsx(core.ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(PropertyTree, { className: "pl-8", inferredPropertyKeys, selectedPropertyKey: selectedPropertyKey ? getFullId(selectedPropertyKey, selectedPropertyNamespace) : void 0, properties: values.properties, additionalFields: values.additionalFields, propertiesOrder: usedPropertiesOrder, onPropertyClick, onPropertyMove, onPropertyRemove: isNewCollection ? deleteProperty : void 0, collectionEditable, errors }) }),
         /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { className: "mt-8 w-full", color: "primary", variant: "outlined", size: "large", onClick: () => setNewPropertyDialogOpen(true), startIcon: /* @__PURE__ */ jsxRuntime.jsx(ui.AddIcon, {}), children: "Add new property" })
       ] }),
-      !asDialog && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12 lg:col-span-7 p-4 md:py-8 md:px-4 h-full overflow-auto pb-20 md:pb-20", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Paper, { className: "sticky top-8 p-4 min-h-full border border-transparent w-full flex flex-col justify-center ", children: [
+      !asDialog && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12 lg:col-span-7 p-4 md:py-8 md:px-4 h-full overflow-auto pb-20 md:pb-20", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-8 min-h-full w-full flex flex-col justify-center", children: [
         selectedPropertyFullId && selectedProperty && !core.isPropertyBuilder(selectedProperty) && /* @__PURE__ */ jsxRuntime.jsx(PropertyForm, { inArray: false, existingProperty: !isNewCollection, autoUpdateId: false, allowDataInference: !isNewCollection, autoOpenTypeSelect: false, propertyKey: selectedPropertyKey, propertyNamespace: selectedPropertyNamespace, property: selectedProperty, onPropertyChanged, onDelete: deleteProperty, onError: onPropertyErrorInternal, forceShowErrors: showErrors, initialErrors, getData, propertyConfigs, collectionEditable }, `edit_view_${selectedPropertyIndex}`),
         !selectedProperty && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col items-center justify-center h-full gap-4", children: [
           /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "label", className: "", children: emptyCollection ? "Now you can add your first property" : "Select a property to edit it" }),
@@ -7071,7 +7258,7 @@
     }
     let t7;
     if ($[10] !== handleCancel) {
-      t7 = /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", onClick: handleCancel, autoFocus: true, children: " Cancel " });
+      t7 = /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", color: "primary", onClick: handleCancel, autoFocus: true, children: " Cancel " });
       $[10] = handleCancel;
       $[11] = t7;
     } else {
@@ -7079,7 +7266,7 @@
     }
     let t8;
     if ($[12] !== handleOk) {
-      t8 = /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: handleOk, children: " Ok " });
+      t8 = /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { color: "primary", onClick: handleOk, children: " Ok " });
       $[12] = handleOk;
       $[13] = t8;
     } else {
@@ -7147,7 +7334,7 @@
     }
     let t3;
     if ($[4] !== entityViews) {
-      t3 = (entityViews ?? []).length === 0 && /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", children: "No custom views defined" });
+      t3 = (entityViews ?? []).length === 0 && /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", children: "No custom views defined. Define your custom views in the customization settings, before using this dialog." });
       $[4] = entityViews;
       $[5] = t3;
     } else {
@@ -7167,7 +7354,7 @@
     }
     let t5;
     if ($[9] !== onClose) {
-      t5 = /* @__PURE__ */ jsxRuntime.jsx(ui.DialogActions, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "outlined", onClick: () => onClose(), children: "Cancel" }) });
+      t5 = /* @__PURE__ */ jsxRuntime.jsx(ui.DialogActions, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "outlined", color: "primary", onClick: () => onClose(), children: "Cancel" }) });
       $[9] = onClose;
       $[10] = t5;
     } else {
@@ -7234,8 +7421,8 @@
     let t8;
     let t9;
     if ($[2] !== collection.entityViews || $[3] !== contextEntityViews || $[4] !== subcollections || $[5] !== values.entityViews || $[6] !== values.name) {
-      const resolvedEntityViews = values.entityViews?.filter(_temp$3).map((e_0) => core.resolveEntityView(e_0, contextEntityViews)).filter(Boolean) ?? [];
-      const hardCodedEntityViews = collection.entityViews?.filter(_temp2$2) ?? [];
+      const resolvedEntityViews = values.entityViews?.filter(_temp$4).map((e_0) => core.resolveEntityView(e_0, contextEntityViews)).filter(Boolean) ?? [];
+      const hardCodedEntityViews = collection.entityViews?.filter(_temp2$3) ?? [];
       const totalEntityViews = resolvedEntityViews.length + hardCodedEntityViews.length;
       t12 = "overflow-auto my-auto";
       T3 = ui.Container;
@@ -7344,7 +7531,7 @@
         t182 = $[36];
       }
       t2 = resolvedEntityViews.map(t182);
-      t3 = hardCodedEntityViews.map(_temp3);
+      t3 = hardCodedEntityViews.map(_temp3$1);
       $[2] = collection.entityViews;
       $[3] = contextEntityViews;
       $[4] = subcollections;
@@ -7618,7 +7805,7 @@
   function _temp4(e_6) {
     return e_6.id;
   }
-  function _temp3(view_0) {
+  function _temp3$1(view_0) {
     return /* @__PURE__ */ jsxRuntime.jsx(ui.TableRow, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.TableCell, { align: "left", children: [
       /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "subtitle2", className: "flex-grow", children: view_0.name }),
       /* @__PURE__ */ jsxRuntime.jsxs(ui.Typography, { variant: "caption", className: "flex-grow", children: [
@@ -7627,10 +7814,10 @@
       ] })
     ] }) }, view_0.key);
   }
-  function _temp2$2(e_1) {
+  function _temp2$3(e_1) {
     return typeof e_1 !== "string";
   }
-  function _temp$3(e) {
+  function _temp$4(e) {
     return typeof e === "string";
   }
   const productsCollectionTemplate = {
@@ -8109,6 +8296,10 @@
       setFieldValue,
       setValues
     } = formex.useFormex();
+    const noSuggestions = !loadingPathSuggestions && (filteredPathSuggestions ?? [])?.length === 0;
+    if (!noSuggestions) {
+      return null;
+    }
     let t3;
     if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
       t3 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row py-2 pt-3 items-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "h4", className: "flex-grow", children: "New collection" }) });
@@ -8161,7 +8352,7 @@
     }
     let t8;
     if ($[16] !== filteredPathSuggestions || $[17] !== loadingPathSuggestions) {
-      t8 = !loadingPathSuggestions && (filteredPathSuggestions ?? [])?.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", children: "No suggestions" });
+      t8 = (filteredPathSuggestions ?? []).length === 0 && !loadingPathSuggestions && /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", color: "secondary", children: "No existing paths found" });
       $[16] = filteredPathSuggestions;
       $[17] = loadingPathSuggestions;
       $[18] = t8;
@@ -8427,7 +8618,7 @@
           const previousFullId = getFullId(previousId, namespace);
           const previousPropertyPath = idToPropertiesPath(previousFullId);
           const currentPropertiesOrder = getCurrentPropertiesOrder(namespace);
-          const newPropertiesOrder_0 = currentPropertiesOrder.map((p) => p === previousId ? id : p).filter(_temp$2);
+          const newPropertiesOrder_0 = currentPropertiesOrder.map((p) => p === previousId ? id : p).filter(_temp$3);
           updatePropertiesOrder(newPropertiesOrder_0, namespace);
           const newHeadersMapping = {
             ...importConfig.headersMapping
@@ -8593,7 +8784,7 @@
     }
     return t13;
   }
-  function _temp$2(p_0) {
+  function _temp$3(p_0) {
     return p_0 !== void 0;
   }
   function PropertySelect(t0) {
@@ -8666,7 +8857,7 @@
     }
     let t9;
     if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-      t9 = Object.entries(supportedFields).map(_temp2$1);
+      t9 = Object.entries(supportedFields).map(_temp2$2);
       $[12] = t9;
     } else {
       t9 = $[12];
@@ -8696,7 +8887,7 @@
     }
     return t11;
   }
-  function _temp2$1(t0) {
+  function _temp2$2(t0) {
     const [key, widget_0] = t0;
     return /* @__PURE__ */ jsxRuntime.jsx(PropertySelectItem, { value: key, optionDisabled: false, propertyConfig: widget_0, existing: false }, key);
   }
@@ -8862,7 +9053,7 @@
     }
     let t7;
     if ($[12] !== propertiesOrder) {
-      t7 = propertiesOrder.map(_temp$1);
+      t7 = propertiesOrder.map(_temp$2);
       $[12] = propertiesOrder;
       $[13] = t7;
     } else {
@@ -8881,7 +9072,7 @@
     }
     return t8;
   }
-  function _temp$1(p) {
+  function _temp$2(p) {
     return {
       key: p,
       disabled: false
@@ -8935,6 +9126,355 @@
       idColumn
     };
   }
+  function EntityActionsSelectDialog(t0) {
+    const $ = reactCompilerRuntime.c(15);
+    const {
+      open,
+      onClose
+    } = t0;
+    const {
+      entityActions
+    } = core.useCustomizationController();
+    let t1;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t1 = /* @__PURE__ */ jsxRuntime.jsx(ui.DialogTitle, { children: "Select custom action" });
+      $[0] = t1;
+    } else {
+      t1 = $[0];
+    }
+    let t2;
+    if ($[1] !== entityActions || $[2] !== onClose) {
+      t2 = entityActions?.map((action) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { onClick: () => onClose(action.key), fullWidth: true, variant: "text", children: [
+        action.name,
+        " (",
+        action.key,
+        ")"
+      ] }, action.key));
+      $[1] = entityActions;
+      $[2] = onClose;
+      $[3] = t2;
+    } else {
+      t2 = $[3];
+    }
+    let t3;
+    if ($[4] !== entityActions) {
+      t3 = (entityActions ?? []).length === 0 && /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", children: "No custom actions defined. Define your custom actions in the customization settings, before using this dialog." });
+      $[4] = entityActions;
+      $[5] = t3;
+    } else {
+      t3 = $[5];
+    }
+    let t4;
+    if ($[6] !== t2 || $[7] !== t3) {
+      t4 = /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogContent, { className: "flex flex-col gap-4", children: [
+        t2,
+        t3
+      ] });
+      $[6] = t2;
+      $[7] = t3;
+      $[8] = t4;
+    } else {
+      t4 = $[8];
+    }
+    let t5;
+    if ($[9] !== onClose) {
+      t5 = /* @__PURE__ */ jsxRuntime.jsx(ui.DialogActions, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "outlined", color: "primary", onClick: () => onClose(), children: "Cancel" }) });
+      $[9] = onClose;
+      $[10] = t5;
+    } else {
+      t5 = $[10];
+    }
+    let t6;
+    if ($[11] !== open || $[12] !== t4 || $[13] !== t5) {
+      t6 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Dialog, { maxWidth: "md", open, children: [
+        t1,
+        t4,
+        t5
+      ] });
+      $[11] = open;
+      $[12] = t4;
+      $[13] = t5;
+      $[14] = t6;
+    } else {
+      t6 = $[14];
+    }
+    return t6;
+  }
+  function EntityActionsEditTab(t0) {
+    const $ = reactCompilerRuntime.c(64);
+    const {
+      collection
+    } = t0;
+    const {
+      entityActions: contextEntityActions
+    } = core.useCustomizationController();
+    const [addEntityActionDialogOpen, setAddEntityActionDialogOpen] = React.useState(false);
+    const [actionToDelete, setActionToDelete] = React.useState();
+    const {
+      values,
+      setFieldValue
+    } = formex.useFormex();
+    let T0;
+    let T1;
+    let T2;
+    let T3;
+    let t1;
+    let t10;
+    let t2;
+    let t3;
+    let t4;
+    let t5;
+    let t6;
+    let t7;
+    let t8;
+    let t9;
+    if ($[0] !== collection.entityActions || $[1] !== contextEntityActions || $[2] !== values.entityActions) {
+      const resolvedEntityActions = values.entityActions?.filter(_temp$1).map((e_0) => core.resolveEntityAction(e_0, contextEntityActions)).filter(Boolean) ?? [];
+      const hardCodedEntityActions = collection.entityActions?.filter(_temp2$1) ?? [];
+      const totalEntityActions = resolvedEntityActions.length + hardCodedEntityActions.length;
+      t10 = "overflow-auto my-auto";
+      T3 = ui.Container;
+      t8 = "2xl";
+      t9 = "flex flex-col gap-4 p-8 m-auto";
+      t7 = "flex  flex-col gap-16";
+      t4 = "flex-grow  flex flex-col gap-4 items-start";
+      if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+        t5 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "h5", children: "Custom actions" });
+        $[17] = t5;
+      } else {
+        t5 = $[17];
+      }
+      if ($[18] !== totalEntityActions) {
+        t6 = totalEntityActions === 0 && /* @__PURE__ */ jsxRuntime.jsx(ui.Alert, { action: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", size: "small", href: "https://firecms.co/docs/custom_actions", component: "a", rel: "noopener noreferrer", target: "_blank", children: "More info" }), children: "Define your own custom actions by uploading them with the CLI." });
+        $[18] = totalEntityActions;
+        $[19] = t6;
+      } else {
+        t6 = $[19];
+      }
+      T2 = ui.Paper;
+      t3 = "flex flex-col gap-4 p-2 w-full";
+      T1 = ui.Table;
+      T0 = ui.TableBody;
+      let t112;
+      if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+        t112 = (action) => /* @__PURE__ */ jsxRuntime.jsxs(ui.TableRow, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { align: "left", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "subtitle2", className: "flex-grow", children: action.name }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { align: "right", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Remove", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: (e_2) => {
+            e_2.preventDefault();
+            e_2.stopPropagation();
+            setActionToDelete(action.key);
+          }, color: "inherit", children: /* @__PURE__ */ jsxRuntime.jsx(ui.DeleteIcon, { size: "small" }) }) }) })
+        ] }, action.key);
+        $[20] = t112;
+      } else {
+        t112 = $[20];
+      }
+      t1 = resolvedEntityActions.map(t112);
+      t2 = hardCodedEntityActions.map(_temp3);
+      $[0] = collection.entityActions;
+      $[1] = contextEntityActions;
+      $[2] = values.entityActions;
+      $[3] = T0;
+      $[4] = T1;
+      $[5] = T2;
+      $[6] = T3;
+      $[7] = t1;
+      $[8] = t10;
+      $[9] = t2;
+      $[10] = t3;
+      $[11] = t4;
+      $[12] = t5;
+      $[13] = t6;
+      $[14] = t7;
+      $[15] = t8;
+      $[16] = t9;
+    } else {
+      T0 = $[3];
+      T1 = $[4];
+      T2 = $[5];
+      T3 = $[6];
+      t1 = $[7];
+      t10 = $[8];
+      t2 = $[9];
+      t3 = $[10];
+      t4 = $[11];
+      t5 = $[12];
+      t6 = $[13];
+      t7 = $[14];
+      t8 = $[15];
+      t9 = $[16];
+    }
+    let t11;
+    if ($[21] !== T0 || $[22] !== t1 || $[23] !== t2) {
+      t11 = /* @__PURE__ */ jsxRuntime.jsxs(T0, { children: [
+        t1,
+        t2
+      ] });
+      $[21] = T0;
+      $[22] = t1;
+      $[23] = t2;
+      $[24] = t11;
+    } else {
+      t11 = $[24];
+    }
+    let t12;
+    if ($[25] !== T1 || $[26] !== t11) {
+      t12 = /* @__PURE__ */ jsxRuntime.jsx(T1, { children: t11 });
+      $[25] = T1;
+      $[26] = t11;
+      $[27] = t12;
+    } else {
+      t12 = $[27];
+    }
+    let t13;
+    if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+      t13 = () => {
+        setAddEntityActionDialogOpen(true);
+      };
+      $[28] = t13;
+    } else {
+      t13 = $[28];
+    }
+    let t14;
+    if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+      t14 = /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: t13, variant: "text", startIcon: /* @__PURE__ */ jsxRuntime.jsx(ui.AddIcon, {}), children: "Add custom entity action" });
+      $[29] = t14;
+    } else {
+      t14 = $[29];
+    }
+    let t15;
+    if ($[30] !== T2 || $[31] !== t12 || $[32] !== t3) {
+      t15 = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(T2, { className: t3, children: [
+        t12,
+        t14
+      ] }) });
+      $[30] = T2;
+      $[31] = t12;
+      $[32] = t3;
+      $[33] = t15;
+    } else {
+      t15 = $[33];
+    }
+    let t16;
+    if ($[34] !== t15 || $[35] !== t4 || $[36] !== t5 || $[37] !== t6) {
+      t16 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t4, children: [
+        t5,
+        t6,
+        t15
+      ] });
+      $[34] = t15;
+      $[35] = t4;
+      $[36] = t5;
+      $[37] = t6;
+      $[38] = t16;
+    } else {
+      t16 = $[38];
+    }
+    let t17;
+    if ($[39] !== t16 || $[40] !== t7) {
+      t17 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t7, children: t16 });
+      $[39] = t16;
+      $[40] = t7;
+      $[41] = t17;
+    } else {
+      t17 = $[41];
+    }
+    let t18;
+    if ($[42] !== T3 || $[43] !== t17 || $[44] !== t8 || $[45] !== t9) {
+      t18 = /* @__PURE__ */ jsxRuntime.jsx(T3, { maxWidth: t8, className: t9, children: t17 });
+      $[42] = T3;
+      $[43] = t17;
+      $[44] = t8;
+      $[45] = t9;
+      $[46] = t18;
+    } else {
+      t18 = $[46];
+    }
+    let t19;
+    if ($[47] === Symbol.for("react.memo_cache_sentinel")) {
+      t19 = /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+        height: "52px"
+      } });
+      $[47] = t19;
+    } else {
+      t19 = $[47];
+    }
+    let t20;
+    if ($[48] !== actionToDelete || $[49] !== setFieldValue || $[50] !== values.entityActions) {
+      t20 = actionToDelete && /* @__PURE__ */ jsxRuntime.jsx(core.ConfirmationDialog, { open: Boolean(actionToDelete), onAccept: () => {
+        setFieldValue("entityActions", values.entityActions?.filter((e_3) => e_3 !== actionToDelete));
+        setActionToDelete(void 0);
+      }, onCancel: () => setActionToDelete(void 0), title: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Remove this action?" }), body: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        "This will ",
+        /* @__PURE__ */ jsxRuntime.jsx("b", { children: "not delete any data" }),
+        ", only the action in the CMS"
+      ] }) });
+      $[48] = actionToDelete;
+      $[49] = setFieldValue;
+      $[50] = values.entityActions;
+      $[51] = t20;
+    } else {
+      t20 = $[51];
+    }
+    let t21;
+    if ($[52] !== contextEntityActions || $[53] !== setFieldValue || $[54] !== values.entityActions) {
+      t21 = (selectedActionKey) => {
+        if (selectedActionKey) {
+          console.log("Selected action key:", selectedActionKey);
+          const value = [...values.entityActions ?? [], selectedActionKey].filter((e_4) => typeof e_4 === "string" && (contextEntityActions ?? []).some((action_1) => action_1.key === e_4));
+          setFieldValue("entityActions", value);
+        }
+        setAddEntityActionDialogOpen(false);
+      };
+      $[52] = contextEntityActions;
+      $[53] = setFieldValue;
+      $[54] = values.entityActions;
+      $[55] = t21;
+    } else {
+      t21 = $[55];
+    }
+    let t22;
+    if ($[56] !== addEntityActionDialogOpen || $[57] !== t21) {
+      t22 = /* @__PURE__ */ jsxRuntime.jsx(EntityActionsSelectDialog, { open: addEntityActionDialogOpen, onClose: t21 });
+      $[56] = addEntityActionDialogOpen;
+      $[57] = t21;
+      $[58] = t22;
+    } else {
+      t22 = $[58];
+    }
+    let t23;
+    if ($[59] !== t10 || $[60] !== t18 || $[61] !== t20 || $[62] !== t22) {
+      t23 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t10, children: [
+        t18,
+        t19,
+        t20,
+        t22
+      ] });
+      $[59] = t10;
+      $[60] = t18;
+      $[61] = t20;
+      $[62] = t22;
+      $[63] = t23;
+    } else {
+      t23 = $[63];
+    }
+    return t23;
+  }
+  function _temp3(action_0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.TableRow, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.TableCell, { align: "left", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "subtitle2", className: "flex-grow", children: action_0.name }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Typography, { variant: "caption", className: "flex-grow", children: [
+        "This action is defined in code with key ",
+        /* @__PURE__ */ jsxRuntime.jsx("code", { children: action_0.key })
+      ] })
+    ] }) }, action_0.key);
+  }
+  function _temp2$1(e_1) {
+    return typeof e_1 !== "string";
+  }
+  function _temp$1(e) {
+    return typeof e === "string";
+  }
   function CollectionEditorDialog(props) {
     const $ = reactCompilerRuntime.c(24);
     const open = props.open;
@@ -9173,10 +9713,10 @@
         setCurrentView("details");
       }
     };
-    const doCollectionInference = (collection_0) => {
+    const doCollectionInference = collectionInference ? (collection_0) => {
       if (!collectionInference) return void 0;
       return collectionInference?.(collection_0.path, collection_0.collectionGroup ?? false, parentPaths ?? []);
-    };
+    } : void 0;
     const inferCollectionFromData = async (newCollection) => {
       try {
         if (!doCollectionInference) {
@@ -9395,7 +9935,8 @@
         !isNewCollection && /* @__PURE__ */ jsxRuntime.jsxs(ui.Tabs, { value: currentView, innerClassName: ui.cls(ui.defaultBorderMixin, "px-4 h-14 w-full justify-end bg-surface-50 dark:bg-surface-950 border-b"), onValueChange: (v) => setCurrentView(v), children: [
           /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { value: "details", children: "Details" }),
           /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { value: "properties", children: "Properties" }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { value: "subcollections", children: "Additional views" })
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { value: "subcollections", children: "Additional views" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { value: "custom_actions", children: "Custom actions" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("form", { noValidate: true, onSubmit: formController.handleSubmit, className: ui.cls(isNewCollection ? "h-full" : "h-[calc(100%-48px)]", "flex-grow flex flex-col relative"), children: [
           currentView === "loading" && /* @__PURE__ */ jsxRuntime.jsx(core.CircularProgressCenter, {}),
@@ -9424,6 +9965,7 @@
               setDeleteRequested(true);
             }, children: "Reset to code" })
           ] }) }),
+          currentView === "custom_actions" && collection && /* @__PURE__ */ jsxRuntime.jsx(EntityActionsEditTab, { collection }),
           currentView === "subcollections" && collection && /* @__PURE__ */ jsxRuntime.jsx(SubcollectionsEditTab, { parentCollection, configController, getUser, collectionInference, parentCollectionIds, collection }),
           currentView === "properties" && /* @__PURE__ */ jsxRuntime.jsx(CollectionPropertiesEditorForm, { showErrors: submitCount > 0, isNewCollection, reservedGroups, onPropertyError: (propertyKey, namespace, error_0) => {
             const current = core.removeUndefined({
@@ -9435,28 +9977,28 @@
           }, getUser, getData: getDataWithPath, doCollectionInference, propertyConfigs, collectionEditable, extraIcon: extraView?.icon && /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { color: "primary", onClick: () => setCurrentView("extra_view"), children: extraView.icon }) }),
           currentView !== "welcome" && /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogActions, { position: "absolute", children: [
             error && /* @__PURE__ */ jsxRuntime.jsx(core.ErrorView, { error }),
-            isNewCollection && includeTemplates && currentView === "import_data_mapping" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "text", type: "button", onClick: () => {
+            isNewCollection && includeTemplates && currentView === "import_data_mapping" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "text", type: "button", color: "primary", onClick: () => {
               importConfig.setInUse(false);
               return setCurrentView("welcome");
             }, children: [
               /* @__PURE__ */ jsxRuntime.jsx(ui.ArrowBackIcon, {}),
               "Back"
             ] }),
-            isNewCollection && includeTemplates && currentView === "import_data_preview" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "text", type: "button", onClick: () => {
+            isNewCollection && includeTemplates && currentView === "import_data_preview" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "text", type: "button", color: "primary", onClick: () => {
               setCurrentView("import_data_mapping");
             }, children: [
               /* @__PURE__ */ jsxRuntime.jsx(ui.ArrowBackIcon, {}),
               "Back"
             ] }),
-            isNewCollection && includeTemplates && currentView === "details" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "text", type: "button", onClick: () => setCurrentView("welcome"), children: [
+            isNewCollection && includeTemplates && currentView === "details" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "text", color: "primary", type: "button", onClick: () => setCurrentView("welcome"), children: [
               /* @__PURE__ */ jsxRuntime.jsx(ui.ArrowBackIcon, {}),
               "Back"
             ] }),
-            isNewCollection && currentView === "properties" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "text", type: "button", onClick: () => setCurrentView("details"), children: [
+            isNewCollection && currentView === "properties" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "text", type: "button", color: "primary", onClick: () => setCurrentView("details"), children: [
               /* @__PURE__ */ jsxRuntime.jsx(ui.ArrowBackIcon, {}),
               "Back"
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", onClick: () => {
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", color: "primary", onClick: () => {
               handleCancel();
             }, children: "Cancel" }),
             isNewCollection && currentView === "import_data_mapping" && /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "filled", color: "primary", onClick: onImportMappingComplete, children: "Next" }),
@@ -9540,7 +10082,7 @@
   const ConfigControllerContext = React.createContext({});
   const CollectionEditorContext = React.createContext({});
   const ConfigControllerProvider = React.memo(function ConfigControllerProvider2(t0) {
-    const $ = reactCompilerRuntime.c(67);
+    const $ = reactCompilerRuntime.c(65);
     const {
       children,
       collectionConfigController,
@@ -9548,7 +10090,6 @@
       reservedGroups,
       collectionInference,
       extraView,
-      getPathSuggestions,
       getUser,
       getData,
       onAnalyticsEvent
@@ -9669,26 +10210,24 @@
     const createCollection = t3;
     const t4 = configPermissions ?? defaultConfigPermissions;
     let t5;
-    if ($[6] !== createCollection || $[7] !== editCollection || $[8] !== editProperty || $[9] !== getPathSuggestions || $[10] !== t4) {
+    if ($[6] !== createCollection || $[7] !== editCollection || $[8] !== editProperty || $[9] !== t4) {
       t5 = {
         editCollection,
         createCollection,
         editProperty,
-        configPermissions: t4,
-        getPathSuggestions
+        configPermissions: t4
       };
       $[6] = createCollection;
       $[7] = editCollection;
       $[8] = editProperty;
-      $[9] = getPathSuggestions;
-      $[10] = t4;
-      $[11] = t5;
+      $[9] = t4;
+      $[10] = t5;
     } else {
-      t5 = $[11];
+      t5 = $[10];
     }
     const t6 = Boolean(currentDialog);
     let t7;
-    if ($[12] !== currentDialog || $[13] !== navigate || $[14] !== navigation) {
+    if ($[11] !== currentDialog || $[12] !== navigate || $[13] !== navigation) {
       t7 = (collection_0) => {
         if (currentDialog?.redirect) {
           if (collection_0 && currentDialog?.isNewCollection && !currentDialog.parentCollectionIds.length) {
@@ -9698,29 +10237,28 @@
         }
         setCurrentDialog(void 0);
       };
-      $[12] = currentDialog;
-      $[13] = navigate;
-      $[14] = navigation;
-      $[15] = t7;
+      $[11] = currentDialog;
+      $[12] = navigate;
+      $[13] = navigation;
+      $[14] = t7;
     } else {
-      t7 = $[15];
+      t7 = $[14];
     }
     let t8;
-    if ($[16] !== collectionConfigController || $[17] !== collectionInference || $[18] !== currentDialog || $[19] !== extraView || $[20] !== getData || $[21] !== getPathSuggestions || $[22] !== getUser || $[23] !== reservedGroups || $[24] !== t6 || $[25] !== t7) {
-      t8 = /* @__PURE__ */ jsxRuntime.jsx(CollectionEditorDialog, { open: t6, configController: collectionConfigController, isNewCollection: false, collectionInference, ...currentDialog, getData, reservedGroups, extraView, pathSuggestions: getPathSuggestions, getUser, handleClose: t7 });
-      $[16] = collectionConfigController;
-      $[17] = collectionInference;
-      $[18] = currentDialog;
-      $[19] = extraView;
-      $[20] = getData;
-      $[21] = getPathSuggestions;
-      $[22] = getUser;
-      $[23] = reservedGroups;
-      $[24] = t6;
-      $[25] = t7;
-      $[26] = t8;
+    if ($[15] !== collectionConfigController || $[16] !== collectionInference || $[17] !== currentDialog || $[18] !== extraView || $[19] !== getData || $[20] !== getUser || $[21] !== reservedGroups || $[22] !== t6 || $[23] !== t7) {
+      t8 = /* @__PURE__ */ jsxRuntime.jsx(CollectionEditorDialog, { open: t6, configController: collectionConfigController, isNewCollection: false, collectionInference, ...currentDialog, getData, reservedGroups, extraView, getUser, handleClose: t7 });
+      $[15] = collectionConfigController;
+      $[16] = collectionInference;
+      $[17] = currentDialog;
+      $[18] = extraView;
+      $[19] = getData;
+      $[20] = getUser;
+      $[21] = reservedGroups;
+      $[22] = t6;
+      $[23] = t7;
+      $[24] = t8;
     } else {
-      t8 = $[26];
+      t8 = $[24];
     }
     const t9 = Boolean(currentPropertyDialog);
     const t10 = Boolean(currentPropertyDialog?.propertyKey);
@@ -9728,21 +10266,21 @@
     const t12 = !currentPropertyDialog ? false : !currentPropertyDialog?.propertyKey;
     const t13 = currentPropertyDialog?.collectionEditable ?? false;
     let t14;
-    if ($[27] !== currentPropertyDialog || $[28] !== getData || $[29] !== navigation) {
+    if ($[25] !== currentPropertyDialog || $[26] !== getData || $[27] !== navigation) {
       t14 = getData && currentPropertyDialog?.editedCollectionId ? () => {
         console.debug("get data for property", currentPropertyDialog?.editedCollectionId);
         const resolvedPath = navigation.resolveIdsFrom(currentPropertyDialog.editedCollectionId);
         return getData(resolvedPath, []);
       } : void 0;
-      $[27] = currentPropertyDialog;
-      $[28] = getData;
-      $[29] = navigation;
-      $[30] = t14;
+      $[25] = currentPropertyDialog;
+      $[26] = getData;
+      $[27] = navigation;
+      $[28] = t14;
     } else {
-      t14 = $[30];
+      t14 = $[28];
     }
     let t15;
-    if ($[31] !== collectionConfigController || $[32] !== currentPropertyDialog || $[33] !== snackbarController) {
+    if ($[29] !== collectionConfigController || $[30] !== currentPropertyDialog || $[31] !== snackbarController) {
       t15 = (t162) => {
         const {
           id: id_0,
@@ -9771,15 +10309,15 @@
           return false;
         });
       };
-      $[31] = collectionConfigController;
-      $[32] = currentPropertyDialog;
-      $[33] = snackbarController;
-      $[34] = t15;
+      $[29] = collectionConfigController;
+      $[30] = currentPropertyDialog;
+      $[31] = snackbarController;
+      $[32] = t15;
     } else {
-      t15 = $[34];
+      t15 = $[32];
     }
     let t16;
-    if ($[35] !== collectionConfigController || $[36] !== currentPropertyDialog?.currentPropertiesOrder || $[37] !== currentPropertyDialog?.editedCollectionId || $[38] !== currentPropertyDialog?.namespace || $[39] !== currentPropertyDialog?.parentCollectionIds || $[40] !== currentPropertyDialog?.propertyKey || $[41] !== snackbarController) {
+    if ($[33] !== collectionConfigController || $[34] !== currentPropertyDialog?.currentPropertiesOrder || $[35] !== currentPropertyDialog?.editedCollectionId || $[36] !== currentPropertyDialog?.namespace || $[37] !== currentPropertyDialog?.parentCollectionIds || $[38] !== currentPropertyDialog?.propertyKey || $[39] !== snackbarController) {
       t16 = () => {
         if (!currentPropertyDialog?.propertyKey) {
           return;
@@ -9802,21 +10340,21 @@
           return false;
         });
       };
-      $[35] = collectionConfigController;
-      $[36] = currentPropertyDialog?.currentPropertiesOrder;
-      $[37] = currentPropertyDialog?.editedCollectionId;
-      $[38] = currentPropertyDialog?.namespace;
-      $[39] = currentPropertyDialog?.parentCollectionIds;
-      $[40] = currentPropertyDialog?.propertyKey;
-      $[41] = snackbarController;
-      $[42] = t16;
+      $[33] = collectionConfigController;
+      $[34] = currentPropertyDialog?.currentPropertiesOrder;
+      $[35] = currentPropertyDialog?.editedCollectionId;
+      $[36] = currentPropertyDialog?.namespace;
+      $[37] = currentPropertyDialog?.parentCollectionIds;
+      $[38] = currentPropertyDialog?.propertyKey;
+      $[39] = snackbarController;
+      $[40] = t16;
     } else {
-      t16 = $[42];
+      t16 = $[40];
     }
     let t17;
     let t18;
     let t19;
-    if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
+    if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
       t17 = () => {
         setCurrentPropertyDialog(void 0);
       };
@@ -9824,64 +10362,64 @@
         setCurrentPropertyDialog(void 0);
       };
       t19 = {};
-      $[43] = t17;
-      $[44] = t18;
-      $[45] = t19;
+      $[41] = t17;
+      $[42] = t18;
+      $[43] = t19;
     } else {
-      t17 = $[43];
-      t18 = $[44];
-      t19 = $[45];
+      t17 = $[41];
+      t18 = $[42];
+      t19 = $[43];
     }
     let t20;
-    if ($[46] === Symbol.for("react.memo_cache_sentinel")) {
+    if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
       t20 = [];
-      $[46] = t20;
+      $[44] = t20;
     } else {
-      t20 = $[46];
+      t20 = $[44];
     }
     const t21 = currentPropertyDialog?.property;
     const t22 = currentPropertyDialog?.propertyKey;
     let t23;
-    if ($[47] !== propertyConfigs || $[48] !== t10 || $[49] !== t11 || $[50] !== t12 || $[51] !== t13 || $[52] !== t14 || $[53] !== t15 || $[54] !== t16 || $[55] !== t21 || $[56] !== t22 || $[57] !== t9) {
+    if ($[45] !== propertyConfigs || $[46] !== t10 || $[47] !== t11 || $[48] !== t12 || $[49] !== t13 || $[50] !== t14 || $[51] !== t15 || $[52] !== t16 || $[53] !== t21 || $[54] !== t22 || $[55] !== t9) {
       t23 = /* @__PURE__ */ jsxRuntime.jsx(PropertyFormDialog, { open: t9, includeIdAndName: true, existingProperty: t10, autoUpdateId: t11, autoOpenTypeSelect: t12, inArray: false, collectionEditable: t13, getData: t14, onPropertyChanged: t15, onPropertyChangedImmediate: false, onDelete: t16, onError: _temp2, onOkClicked: t17, onCancel: t18, initialErrors: t19, forceShowErrors: false, existingPropertyKeys: t20, allowDataInference: true, propertyConfigs, property: t21, propertyKey: t22 });
-      $[47] = propertyConfigs;
-      $[48] = t10;
-      $[49] = t11;
-      $[50] = t12;
-      $[51] = t13;
-      $[52] = t14;
-      $[53] = t15;
-      $[54] = t16;
-      $[55] = t21;
-      $[56] = t22;
-      $[57] = t9;
-      $[58] = t23;
-    } else {
-      t23 = $[58];
+      $[45] = propertyConfigs;
+      $[46] = t10;
+      $[47] = t11;
+      $[48] = t12;
+      $[49] = t13;
+      $[50] = t14;
+      $[51] = t15;
+      $[52] = t16;
+      $[53] = t21;
+      $[54] = t22;
+      $[55] = t9;
+      $[56] = t23;
+    } else {
+      t23 = $[56];
     }
     let t24;
-    if ($[59] !== children || $[60] !== t23 || $[61] !== t5 || $[62] !== t8) {
+    if ($[57] !== children || $[58] !== t23 || $[59] !== t5 || $[60] !== t8) {
       t24 = /* @__PURE__ */ jsxRuntime.jsxs(CollectionEditorContext.Provider, { value: t5, children: [
         children,
         t8,
         t23
       ] });
-      $[59] = children;
-      $[60] = t23;
-      $[61] = t5;
-      $[62] = t8;
-      $[63] = t24;
+      $[57] = children;
+      $[58] = t23;
+      $[59] = t5;
+      $[60] = t8;
+      $[61] = t24;
     } else {
-      t24 = $[63];
+      t24 = $[61];
     }
     let t25;
-    if ($[64] !== collectionConfigController || $[65] !== t24) {
+    if ($[62] !== collectionConfigController || $[63] !== t24) {
       t25 = /* @__PURE__ */ jsxRuntime.jsx(ConfigControllerContext.Provider, { value: collectionConfigController, children: t24 });
-      $[64] = collectionConfigController;
-      $[65] = t24;
-      $[66] = t25;
+      $[62] = collectionConfigController;
+      $[63] = t24;
+      $[64] = t25;
     } else {
-      t25 = $[66];
+      t25 = $[64];
     }
     return t25;
   }, equal);
@@ -9953,14 +10491,14 @@
     }
     let t6;
     if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
-      t6 = /* @__PURE__ */ jsxRuntime.jsx(ui.SettingsIcon, {});
+      t6 = /* @__PURE__ */ jsxRuntime.jsx(ui.SettingsIcon, { size: "small" });
       $[15] = t6;
     } else {
       t6 = $[15];
     }
     let t7;
     if ($[16] !== t4 || $[17] !== t5) {
-      t7 = /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { color: "primary", disabled: t4, onClick: t5, children: t6 });
+      t7 = /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", color: "primary", disabled: t4, onClick: t5, children: t6 });
       $[16] = t4;
       $[17] = t5;
       $[18] = t7;
@@ -10052,7 +10590,7 @@
     const deleteCollection = t3;
     let t4;
     if ($[11] !== permissions.deleteCollections) {
-      t4 = permissions.deleteCollections && /* @__PURE__ */ jsxRuntime.jsx(ui.Menu, { trigger: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.MoreVertIcon, { size: "small" }) }), children: /* @__PURE__ */ jsxRuntime.jsxs(ui.MenuItem, { dense: true, onClick: (event) => {
+      t4 = permissions.deleteCollections && /* @__PURE__ */ jsxRuntime.jsx(ui.Menu, { trigger: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(ui.MoreVertIcon, { size: "small" }) }), children: /* @__PURE__ */ jsxRuntime.jsxs(ui.MenuItem, { dense: true, onClick: (event) => {
         event.preventDefault();
         event.stopPropagation();
         setDeleteRequested(true);
@@ -10067,7 +10605,7 @@
     }
     let t5;
     if ($[13] !== onEditCollectionClicked || $[14] !== permissions.editCollections) {
-      t5 = permissions.editCollections && /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { onClick: (event_0) => {
+      t5 = permissions.editCollections && /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: (event_0) => {
         onEditCollectionClicked();
       }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.SettingsIcon, { size: "small" }) });
       $[13] = onEditCollectionClicked;
@@ -10495,22 +11033,115 @@
     }
     return t8;
   }
+  function EditorEntityAction(t0) {
+    const $ = reactCompilerRuntime.c(23);
+    const {
+      path: fullPath,
+      parentCollectionIds,
+      collection,
+      formContext
+    } = t0;
+    const authController = core.useAuthController();
+    const navigationController = core.useNavigationController();
+    const collectionEditorController = useCollectionEditorController();
+    let t1;
+    if ($[0] !== navigationController || $[1] !== parentCollectionIds) {
+      t1 = navigationController.getCollectionFromIds(parentCollectionIds);
+      $[0] = navigationController;
+      $[1] = parentCollectionIds;
+      $[2] = t1;
+    } else {
+      t1 = $[2];
+    }
+    const parentCollection = t1;
+    let t2;
+    if ($[3] !== authController || $[4] !== collection || $[5] !== collectionEditorController) {
+      t2 = collectionEditorController.configPermissions ? collectionEditorController.configPermissions({
+        user: authController.user,
+        collection
+      }).editCollections : true;
+      $[3] = authController;
+      $[4] = collection;
+      $[5] = collectionEditorController;
+      $[6] = t2;
+    } else {
+      t2 = $[6];
+    }
+    const canEditCollection = t2;
+    const isDirty = formContext?.formex.dirty ?? false;
+    const t3 = canEditCollection ? isDirty ? "You need to save the document before changing the schema" : "Edit schema for this form" : "You don't have permissions to edit this collection";
+    const t4 = !canEditCollection || isDirty;
+    let t5;
+    if ($[7] !== canEditCollection || $[8] !== collection || $[9] !== collectionEditorController || $[10] !== fullPath || $[11] !== parentCollection || $[12] !== parentCollectionIds) {
+      t5 = canEditCollection ? () => collectionEditorController?.editCollection({
+        id: collection.id,
+        fullPath,
+        parentCollectionIds,
+        parentCollection
+      }) : void 0;
+      $[7] = canEditCollection;
+      $[8] = collection;
+      $[9] = collectionEditorController;
+      $[10] = fullPath;
+      $[11] = parentCollection;
+      $[12] = parentCollectionIds;
+      $[13] = t5;
+    } else {
+      t5 = $[13];
+    }
+    let t6;
+    if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+      t6 = /* @__PURE__ */ jsxRuntime.jsx(ui.SettingsIcon, { size: "small" });
+      $[14] = t6;
+    } else {
+      t6 = $[14];
+    }
+    let t7;
+    if ($[15] !== t4 || $[16] !== t5) {
+      t7 = /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { color: "primary", disabled: t4, onClick: t5, children: t6 });
+      $[15] = t4;
+      $[16] = t5;
+      $[17] = t7;
+    } else {
+      t7 = $[17];
+    }
+    let t8;
+    if ($[18] !== t3 || $[19] !== t7) {
+      t8 = /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { asChild: true, title: t3, children: t7 });
+      $[18] = t3;
+      $[19] = t7;
+      $[20] = t8;
+    } else {
+      t8 = $[20];
+    }
+    const editorButton = t8;
+    let t9;
+    if ($[21] !== editorButton) {
+      t9 = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: editorButton });
+      $[21] = editorButton;
+      $[22] = t9;
+    } else {
+      t9 = $[22];
+    }
+    return t9;
+  }
   function useCollectionEditorPlugin(t0) {
-    const $ = reactCompilerRuntime.c(15);
+    const $ = reactCompilerRuntime.c(22);
     const {
       collectionConfigController,
       configPermissions,
       reservedGroups,
       extraView,
-      getPathSuggestions,
       getUser,
       collectionInference,
       getData,
-      onAnalyticsEvent
+      onAnalyticsEvent,
+      includeIntroView: t1
     } = t0;
-    let t1;
-    if ($[0] !== collectionConfigController || $[1] !== collectionInference || $[2] !== configPermissions || $[3] !== extraView || $[4] !== getData || $[5] !== getPathSuggestions || $[6] !== getUser || $[7] !== onAnalyticsEvent || $[8] !== reservedGroups) {
-      t1 = {
+    const includeIntroView = t1 === void 0 ? true : t1;
+    let t2;
+    if ($[0] !== collectionConfigController || $[1] !== collectionInference || $[2] !== configPermissions || $[3] !== extraView || $[4] !== getData || $[5] !== getUser || $[6] !== onAnalyticsEvent || $[7] !== reservedGroups) {
+      t2 = {
         Component: ConfigControllerProvider,
         props: {
           collectionConfigController,
@@ -10518,7 +11149,6 @@
           collectionInference,
           reservedGroups,
           extraView,
-          getPathSuggestions,
           getUser,
           getData,
           onAnalyticsEvent
@@ -10529,53 +11159,84 @@
       $[2] = configPermissions;
       $[3] = extraView;
       $[4] = getData;
-      $[5] = getPathSuggestions;
-      $[6] = getUser;
-      $[7] = onAnalyticsEvent;
-      $[8] = reservedGroups;
-      $[9] = t1;
+      $[5] = getUser;
+      $[6] = onAnalyticsEvent;
+      $[7] = reservedGroups;
+      $[8] = t2;
     } else {
-      t1 = $[9];
+      t2 = $[8];
     }
-    let t2;
     let t3;
-    if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-      t2 = {
-        additionalActions: /* @__PURE__ */ jsxRuntime.jsx(NewCollectionButton, {}),
-        additionalChildrenStart: /* @__PURE__ */ jsxRuntime.jsx(IntroWidget, {}),
+    if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+      t3 = /* @__PURE__ */ jsxRuntime.jsx(NewCollectionButton, {});
+      $[9] = t3;
+    } else {
+      t3 = $[9];
+    }
+    let t4;
+    if ($[10] !== includeIntroView) {
+      t4 = includeIntroView ? /* @__PURE__ */ jsxRuntime.jsx(IntroWidget, {}) : void 0;
+      $[10] = includeIntroView;
+      $[11] = t4;
+    } else {
+      t4 = $[11];
+    }
+    let t5;
+    if ($[12] !== collectionConfigController.navigationEntries || $[13] !== collectionConfigController.saveNavigationEntries || $[14] !== t4) {
+      t5 = {
+        additionalActions: t3,
+        additionalChildrenStart: t4,
         CollectionActions: HomePageEditorCollectionAction,
-        AdditionalCards: NewCollectionCard
+        AdditionalCards: NewCollectionCard,
+        allowDragAndDrop: true,
+        navigationEntries: collectionConfigController.navigationEntries,
+        onNavigationEntriesUpdate: collectionConfigController.saveNavigationEntries
       };
-      t3 = {
+      $[12] = collectionConfigController.navigationEntries;
+      $[13] = collectionConfigController.saveNavigationEntries;
+      $[14] = t4;
+      $[15] = t5;
+    } else {
+      t5 = $[15];
+    }
+    let t6;
+    let t7;
+    if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+      t6 = {
         CollectionActionsStart: EditorCollectionActionStart,
         CollectionActions: EditorCollectionAction,
         HeaderAction: CollectionViewHeaderAction,
         AddColumnComponent: PropertyAddColumnComponent
       };
-      $[10] = t2;
-      $[11] = t3;
+      t7 = {
+        ActionsTop: EditorEntityAction
+      };
+      $[16] = t6;
+      $[17] = t7;
     } else {
-      t2 = $[10];
-      t3 = $[11];
+      t6 = $[16];
+      t7 = $[17];
     }
-    let t4;
-    if ($[12] !== collectionConfigController.loading || $[13] !== t1) {
-      t4 = {
+    let t8;
+    if ($[18] !== collectionConfigController.loading || $[19] !== t2 || $[20] !== t5) {
+      t8 = {
         key: "collection_editor",
         loading: collectionConfigController.loading,
-        provider: t1,
-        homePage: t2,
-        collectionView: t3
+        provider: t2,
+        homePage: t5,
+        collectionView: t6,
+        form: t7
       };
-      $[12] = collectionConfigController.loading;
-      $[13] = t1;
-      $[14] = t4;
+      $[18] = collectionConfigController.loading;
+      $[19] = t2;
+      $[20] = t5;
+      $[21] = t8;
     } else {
-      t4 = $[14];
+      t8 = $[21];
     }
-    return t4;
+    return t8;
   }
-  function IntroWidget(t0) {
+  function IntroWidget() {
     const $ = reactCompilerRuntime.c(11);
     const navigation = core.useNavigationController();
     if (!navigation.topLevelNavigation) {
@@ -10583,35 +11244,35 @@
     }
     const authController = core.useAuthController();
     const collectionEditorController = useCollectionEditorController();
-    let t1;
+    let t0;
     if ($[0] !== authController || $[1] !== collectionEditorController) {
-      t1 = collectionEditorController.configPermissions ? collectionEditorController.configPermissions({
+      t0 = collectionEditorController.configPermissions ? collectionEditorController.configPermissions({
         user: authController.user
       }).createCollections : true;
       $[0] = authController;
       $[1] = collectionEditorController;
-      $[2] = t1;
+      $[2] = t0;
     } else {
-      t1 = $[2];
+      t0 = $[2];
     }
-    const canCreateCollections = t1;
+    const canCreateCollections = t0;
     if (!navigation.initialised || (navigation.collections ?? []).length > 0) {
       return null;
     }
+    let t1;
     let t2;
-    let t3;
     if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-      t2 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "subtitle2", className: "uppercase", children: "No collections found" });
-      t3 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { children: "Start building collections in FireCMS easily. Map them to your existing database data, import from files, or use our templates." });
-      $[3] = t2;
-      $[4] = t3;
+      t1 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "subtitle2", className: "uppercase", children: "No collections found" });
+      t2 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { children: "Start building collections in FireCMS easily. Map them to your existing database data, import from files, or use our templates." });
+      $[3] = t1;
+      $[4] = t2;
     } else {
-      t2 = $[3];
-      t3 = $[4];
+      t1 = $[3];
+      t2 = $[4];
     }
-    let t4;
+    let t3;
     if ($[5] !== canCreateCollections || $[6] !== collectionEditorController) {
-      t4 = canCreateCollections && /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { onClick: collectionEditorController && canCreateCollections ? () => collectionEditorController.createCollection({
+      t3 = canCreateCollections && /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { onClick: collectionEditorController && canCreateCollections ? () => collectionEditorController.createCollection({
         parentCollectionIds: [],
         redirect: true,
         sourceClick: "new_collection_card"
@@ -10621,31 +11282,31 @@
       ] });
       $[5] = canCreateCollections;
       $[6] = collectionEditorController;
-      $[7] = t4;
+      $[7] = t3;
     } else {
-      t4 = $[7];
+      t3 = $[7];
     }
-    let t5;
+    let t4;
     if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-      t5 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { color: "secondary", children: "You can also define collections programmatically." });
-      $[8] = t5;
+      t4 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { color: "secondary", children: "You can also define collections programmatically." });
+      $[8] = t4;
     } else {
-      t5 = $[8];
+      t4 = $[8];
     }
-    let t6;
-    if ($[9] !== t4) {
-      t6 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Paper, { className: "my-4 px-4 py-6 flex flex-col  bg-white dark:bg-surface-accent-800 gap-2", children: [
+    let t5;
+    if ($[9] !== t3) {
+      t5 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Paper, { className: "my-4 px-4 py-6 flex flex-col  bg-white dark:bg-surface-accent-800 gap-2", children: [
+        t1,
         t2,
         t3,
-        t4,
-        t5
+        t4
       ] });
-      $[9] = t4;
-      $[10] = t6;
+      $[9] = t3;
+      $[10] = t5;
     } else {
-      t6 = $[10];
+      t5 = $[10];
     }
-    return t6;
+    return t5;
   }
   const mergeCollections = (baseCollections, backendCollections = [], modifyCollection) => {
     const markAsEditable = (c) => {
@@ -10654,11 +11315,19 @@
     };
     backendCollections.forEach(markAsEditable);
     const result = core.joinCollectionLists(baseCollections, backendCollections, [], modifyCollection);
-    result.sort((a, b) => baseCollections.findIndex((c) => c.id === a.id) - baseCollections.findIndex((c) => c.id === b.id));
-    console.debug("Collections result", {
-      baseCollections,
-      backendCollections,
-      result
+    result.sort((a, b) => {
+      const indexA = baseCollections.findIndex((c) => c.id === a.id);
+      const indexB = baseCollections.findIndex((c) => c.id === b.id);
+      if (indexA === -1 && indexB === -1) {
+        return 0;
+      }
+      if (indexA === -1) {
+        return 1;
+      }
+      if (indexB === -1) {
+        return -1;
+      }
+      return indexA - indexB;
     });
     return result;
   };