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

package/dist/index.es.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { c } from "react-compiler-runtime";
-import { FieldCaption, SearchIconsView, toSnakeCase, singular, IconForView, ArrayContainer, serializeRegExp, useSnackbarController, resolveEnumValues, isPropertyBuilder, useCustomizationController, getFieldConfig, ErrorBoundary, PropertyConfigBadge, unslugify, useNavigationController, mergeDeep, DEFAULT_FIELD_CONFIGS, getFieldId, isValidRegExp, ConfirmationDialog, isEmptyObject, useLargeLayout, makePropertiesEditable, resolveEntityView, useAuthController, useSelectionController, CircularProgressCenter, EntityCollectionTable, slugify, randomString, removeUndefined, ErrorView, removeInitialAndTrailingSlashes, getDefaultPropertiesOrder, joinCollectionLists } from "@firecms/core";
+import { toSnakeCase, singular, IconForView, FieldCaption, SearchIconsView, ArrayContainer, serializeRegExp, useSnackbarController, resolveEnumValues, isPropertyBuilder, useCustomizationController, getFieldConfig, ErrorBoundary, PropertyConfigBadge, unslugify, useNavigationController, mergeDeep, DEFAULT_FIELD_CONFIGS, getFieldId, isValidRegExp, ConfirmationDialog, isEmptyObject, useLargeLayout, makePropertiesEditable, resolveEntityView, useAuthController, useSelectionController, CircularProgressCenter, EntityCollectionTable, slugify, resolveEntityAction, randomString, removeUndefined, ErrorView, removeInitialAndTrailingSlashes, getDefaultPropertiesOrder, joinCollectionLists } from "@firecms/core";
 import * as React from "react";
 import React__default, { useContext, useState, useEffect, useMemo, useRef, useDeferredValue } from "react";
 import equal from "react-fast-compare";
-import { cls, Typography, VerticalSplitIcon, Tooltip, Card, SquareIcon, useAutoComplete, Chip, TextField, Autocomplete, AutocompleteItem, SelectItem, Container, IconButton, DebouncedTextField, BooleanSwitchWithLabel, SettingsIcon, CloseIcon, Select, ExpandablePanel, Dialog, Badge, AutorenewIcon, ListIcon, Button, CircularProgress, Paper, DialogTitle, DialogContent, DialogActions, RuleIcon, MultiSelectItem, CloudUploadIcon, MultiSelect, cardMixin, cardClickableMixin, cardSelectedMixin, FunctionsIcon, DoNotDisturbOnIcon, DragHandleIcon, defaultBorderMixin, RemoveIcon, AddIcon, SelectGroup, DeleteIcon, InfoLabel, fieldBackgroundMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, WarningIcon, ContentCopyIcon, CodeIcon, Table, TableBody, TableRow, TableCell, Alert, Icon, coolIconKeys, Tabs, Tab, ArrowBackIcon, LoadingButton, CheckIcon, Menu, MoreVertIcon, MenuItem, UndoIcon, SaveIcon } from "@firecms/ui";
+import { cls, Typography, VerticalSplitIcon, Tooltip, Card, SquareIcon, useAutoComplete, Chip, SelectItem, IconButton, TextField, DebouncedTextField, BooleanSwitchWithLabel, SettingsIcon, CloseIcon, Select, ExpandablePanel, Dialog, Container, Badge, AutorenewIcon, ListIcon, Button, CircularProgress, Paper, DialogTitle, DialogContent, DialogActions, RuleIcon, MultiSelectItem, CloudUploadIcon, MultiSelect, cardMixin, cardClickableMixin, cardSelectedMixin, FunctionsIcon, DoNotDisturbOnIcon, DragHandleIcon, defaultBorderMixin, RemoveIcon, AddIcon, SelectGroup, DeleteIcon, InfoLabel, fieldBackgroundMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, WarningIcon, ContentCopyIcon, CodeIcon, Table, TableBody, TableRow, TableCell, Alert, Icon, coolIconKeys, Tabs, Tab, ArrowBackIcon, LoadingButton, CheckIcon, Menu, MoreVertIcon, MenuItem, UndoIcon, SaveIcon } from "@firecms/ui";
 import * as Yup from "yup";
 import { useFormex, getIn, Field, useCreateFormex, Formex, clone } from "@firecms/formex";
 import { extractEnumFromValues, buildPropertyFromData, buildEntityPropertiesFromData } from "@firecms/schema_inference";
@@ -165,7 +165,7 @@ function LayoutModeSwitch(t0) {
   return t18;
 }
 function CollectionDetailsForm(t0) {
-  const $ = c(196);
+  const $ = c(192);
   const {
     isNewCollection,
     reservedGroups,
@@ -181,7 +181,6 @@ function CollectionDetailsForm(t0) {
     touched,
     errors,
     setFieldTouched,
-    isSubmitting,
     submitCount
   } = useFormex();
   useCollectionEditorController();
@@ -249,7 +248,7 @@ function CollectionDetailsForm(t0) {
     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 = {
@@ -259,10 +258,7 @@ function CollectionDetailsForm(t0) {
   } else {
     t6 = $[11];
   }
-  const {
-    autoCompleteOpen,
-    setAutoCompleteOpen
-  } = useAutoComplete(t6);
+  useAutoComplete(t6);
   const isSubcollection = !!parentCollection;
   let customIdValue;
   if (typeof values.customId === "object") {
@@ -281,333 +277,317 @@ function CollectionDetailsForm(t0) {
     }
   }
   const showErrors = submitCount > 0;
-  const t7 = "overflow-auto my-auto";
-  const T0 = 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__ */ jsx(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__ */ jsx(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__ */ jsx(DefaultDatabaseField, { databaseId: values.databaseId, onDatabaseIdUpdate: updateDatabaseId });
+    t10 = /* @__PURE__ */ 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__ */ jsx(Tooltip, { title: "Change icon", asChild: true, children: /* @__PURE__ */ jsx(IconButton, { shape: "square", onClick: t14, children: collectionIcon }) });
+    t12 = /* @__PURE__ */ jsx(Tooltip, { title: "Change icon", asChild: true, children: /* @__PURE__ */ jsx(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__ */ 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__ */ 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__ */ jsx(Chip, { colorScheme: "tealDarker", children: /* @__PURE__ */ jsxs(Typography, { variant: "caption", children: [
+    t14 = parentCollection && /* @__PURE__ */ jsx(Chip, { colorScheme: "tealDarker", children: /* @__PURE__ */ jsxs(Typography, { variant: "caption", children: [
       "This is a subcollection of ",
       /* @__PURE__ */ 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__ */ jsxs("div", { children: [
-      t16,
-      t17
+  let t15;
+  if ($[27] !== t13 || $[28] !== t14) {
+    t15 = /* @__PURE__ */ 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__ */ jsx(TextField, { value: t16, onChange: t17, label: "Name", autoFocus: true, required: true, error: t18 });
+    $[32] = t16;
+    $[33] = t17;
+    $[34] = t18;
+    $[35] = t19;
+  } else {
+    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__ */ jsx(FieldCaption, { error: t20, children: t21 });
+    $[36] = t20;
+    $[37] = t21;
+    $[38] = t22;
   } else {
-    t21 = $[31];
+    t22 = $[38];
   }
-  const t22 = showErrors && Boolean(errors.name);
   let t23;
-  if ($[32] !== t20 || $[33] !== t21 || $[34] !== t22) {
-    t23 = /* @__PURE__ */ jsx(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__ */ 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__ */ jsx(FieldCaption, { error: t24, children: t25 });
-    $[36] = t24;
-    $[37] = t25;
-    $[38] = t26;
+  let t24;
+  if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
+    t24 = 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__ */ jsxs("div", { className: "col-span-12", children: [
-      t23,
-      t26
+  if ($[43] !== t25 || $[44] !== t26) {
+    t27 = /* @__PURE__ */ jsx(Field, { name: "path", as: 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__ */ jsx(FieldCaption, { error: t28, children: t29 });
+    $[46] = t28;
+    $[47] = t29;
+    $[48] = t30;
+  } else {
+    t30 = $[48];
+  }
+  let t31;
+  if ($[49] !== t27 || $[50] !== t30) {
+    t31 = /* @__PURE__ */ 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 = 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__ */ jsx(Field, { name: "path", as: 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__ */ jsx(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 t36;
-  if ($[50] !== t29 || $[51] !== t32 || $[52] !== t35) {
-    t36 = /* @__PURE__ */ jsxs("div", { className: t29, children: [
-      t32,
-      t35
-    ] });
-    $[50] = t29;
-    $[51] = t32;
-    $[52] = t35;
-    $[53] = t36;
-  } else {
-    t36 = $[53];
-  }
-  const t37 = !isSubcollection && /* @__PURE__ */ jsxs("div", { className: "col-span-12 sm:col-span-4 relative", children: [
-    /* @__PURE__ */ jsx(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__ */ jsx(Autocomplete, { open: autoCompleteOpen && (groupOptions ?? []).length > 0, setOpen: setAutoCompleteOpen, children: groupOptions?.map((group_0, index) => /* @__PURE__ */ jsx(AutocompleteItem, { className: "pr-6 pl-14", onClick: () => {
-      setAutoCompleteOpen(false);
-      setFieldValue("group", group_0 ?? null);
-    }, children: /* @__PURE__ */ jsx("div", { className: "flex-grow", children: group_0 }) }, index + "_" + group_0)) }),
-    /* @__PURE__ */ jsx(FieldCaption, { children: showErrors && Boolean(errors.group) ? errors.group : "Group in the home page" })
-  ] });
-  const t38 = values.openEntityMode ?? "side_panel";
-  let t39;
-  if ($[54] !== setFieldValue) {
-    t39 = (value) => setFieldValue("openEntityMode", value);
-    $[54] = setFieldValue;
-    $[55] = t39;
+  let t34;
+  if ($[54] !== t32 || $[55] !== t33) {
+    t34 = /* @__PURE__ */ jsx(LayoutModeSwitch, { className: "col-span-12", value: t32, onChange: t33 });
+    $[54] = t32;
+    $[55] = t33;
+    $[56] = t34;
   } else {
-    t39 = $[55];
+    t34 = $[56];
   }
-  let t40;
-  if ($[56] !== t38 || $[57] !== t39) {
-    t40 = /* @__PURE__ */ jsx(LayoutModeSwitch, { className: "col-span-12", value: t38, onChange: t39 });
-    $[56] = t38;
-    $[57] = t39;
-    $[58] = t40;
+  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 ($[57] !== setFieldValue) {
+    t36 = (v) => setFieldValue("history", v);
+    $[57] = setFieldValue;
+    $[58] = t36;
   } else {
-    t40 = $[58];
+    t36 = $[58];
   }
-  const t41 = 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 t42;
-  if ($[59] !== setFieldValue) {
-    t42 = (v) => setFieldValue("history", v);
-    $[59] = setFieldValue;
-    $[60] = t42;
+  const t37 = values.history === void 0 ? null : values.history;
+  let t38;
+  if ($[59] !== t35 || $[60] !== t36 || $[61] !== t37) {
+    t38 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", size: "large", allowIndeterminate: true, label: t35, onValueChange: t36, value: t37 });
+    $[59] = t35;
+    $[60] = t36;
+    $[61] = t37;
+    $[62] = t38;
   } else {
-    t42 = $[60];
+    t38 = $[62];
   }
-  const t43 = values.history === void 0 ? null : values.history;
-  let t44;
-  if ($[61] !== t41 || $[62] !== t42 || $[63] !== t43) {
-    t44 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", size: "large", allowIndeterminate: true, label: t41, onValueChange: t42, value: t43 });
-    $[61] = t41;
-    $[62] = t42;
-    $[63] = t43;
-    $[64] = t44;
-  } else {
-    t44 = $[64];
-  }
-  let t45;
-  if ($[65] === Symbol.for("react.memo_cache_sentinel")) {
-    t45 = /* @__PURE__ */ jsxs(FieldCaption, { children: [
+  let t39;
+  if ($[63] === Symbol.for("react.memo_cache_sentinel")) {
+    t39 = /* @__PURE__ */ jsxs(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__ */ jsx("b", { children: "__history" }),
       "."
     ] });
-    $[65] = t45;
+    $[63] = t39;
   } else {
-    t45 = $[65];
+    t39 = $[63];
   }
-  let t46;
-  if ($[66] !== t44) {
-    t46 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-      t44,
-      t45
+  let t40;
+  if ($[64] !== t38) {
+    t40 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t38,
+      t39
     ] });
-    $[66] = t44;
-    $[67] = t46;
+    $[64] = t38;
+    $[65] = t40;
   } else {
-    t46 = $[67];
+    t40 = $[65];
   }
-  let t47;
-  if ($[68] === Symbol.for("react.memo_cache_sentinel")) {
-    t47 = /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-surface-500", children: [
+  let t41;
+  if ($[66] === Symbol.for("react.memo_cache_sentinel")) {
+    t41 = /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-surface-500", children: [
       /* @__PURE__ */ jsx(SettingsIcon, {}),
       /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: "ml-2", children: "Advanced" })
     ] });
-    $[68] = t47;
+    $[66] = t41;
   } else {
-    t47 = $[68];
+    t41 = $[66];
   }
-  const t48 = !isNewCollection;
-  const t49 = showErrors && Boolean(errors.id);
-  let t50;
-  if ($[69] !== t48 || $[70] !== t49) {
-    t50 = /* @__PURE__ */ jsx(Field, { name: "id", as: DebouncedTextField, disabled: t48, label: "Collection id", error: t49 });
-    $[69] = t48;
-    $[70] = t49;
-    $[71] = t50;
-  } else {
-    t50 = $[71];
-  }
-  const t51 = touched.id && Boolean(errors.id);
-  const t52 = touched.id && Boolean(errors.id) ? errors.id : "This id identifies this collection. Typically the same as the path.";
-  let t53;
-  if ($[72] !== t51 || $[73] !== t52) {
-    t53 = /* @__PURE__ */ jsx(FieldCaption, { error: t51, children: t52 });
-    $[72] = t51;
-    $[73] = t52;
-    $[74] = t53;
-  } else {
-    t53 = $[74];
-  }
-  let t54;
-  if ($[75] !== t50 || $[76] !== t53) {
-    t54 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-      t50,
-      t53
-    ] });
-    $[75] = t50;
-    $[76] = t53;
-    $[77] = t54;
-  } else {
-    t54 = $[77];
-  }
-  const t55 = showErrors && Boolean(errors.singularName);
-  let t56;
-  if ($[78] !== handleChange || $[79] !== setFieldTouched) {
-    t56 = (e_0) => {
-      setFieldTouched("singularName", true);
-      return handleChange(e_0);
-    };
-    $[78] = handleChange;
-    $[79] = setFieldTouched;
-    $[80] = t56;
+  const t42 = !isNewCollection;
+  const t43 = showErrors && Boolean(errors.id);
+  let t44;
+  if ($[67] !== t42 || $[68] !== t43) {
+    t44 = /* @__PURE__ */ jsx(Field, { name: "id", as: DebouncedTextField, disabled: t42, label: "Collection id", error: t43 });
+    $[67] = t42;
+    $[68] = t43;
+    $[69] = t44;
   } else {
-    t56 = $[80];
+    t44 = $[69];
   }
-  const t57 = values.singularName ?? "";
-  let t58;
-  if ($[81] !== t55 || $[82] !== t56 || $[83] !== t57) {
-    t58 = /* @__PURE__ */ jsx(TextField, { error: t55, name: "singularName", "aria-describedby": "singularName-helper", onChange: t56, value: t57, label: "Singular name" });
-    $[81] = t55;
-    $[82] = t56;
-    $[83] = t57;
-    $[84] = t58;
+  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 ($[70] !== t45 || $[71] !== t46) {
+    t47 = /* @__PURE__ */ jsx(FieldCaption, { error: t45, children: t46 });
+    $[70] = t45;
+    $[71] = t46;
+    $[72] = t47;
   } else {
-    t58 = $[84];
+    t47 = $[72];
   }
-  const t59 = showErrors && Boolean(errors.singularName);
-  const t60 = showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define a singular name for your entities";
-  let t61;
-  if ($[85] !== t59 || $[86] !== t60) {
-    t61 = /* @__PURE__ */ jsx(FieldCaption, { error: t59, children: t60 });
-    $[85] = t59;
-    $[86] = t60;
-    $[87] = t61;
+  let t48;
+  if ($[73] !== t44 || $[74] !== t47) {
+    t48 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t44,
+      t47
+    ] });
+    $[73] = t44;
+    $[74] = t47;
+    $[75] = t48;
   } else {
-    t61 = $[87];
+    t48 = $[75];
   }
-  let t62;
-  if ($[88] !== t58 || $[89] !== t61) {
-    t62 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-      t58,
-      t61
+  const t49 = showErrors && Boolean(errors.singularName);
+  let t50;
+  if ($[76] !== handleChange || $[77] !== setFieldTouched) {
+    t50 = (e_0) => {
+      setFieldTouched("singularName", true);
+      return handleChange(e_0);
+    };
+    $[76] = handleChange;
+    $[77] = setFieldTouched;
+    $[78] = t50;
+  } else {
+    t50 = $[78];
+  }
+  const t51 = values.singularName ?? "";
+  let t52;
+  if ($[79] !== t49 || $[80] !== t50 || $[81] !== t51) {
+    t52 = /* @__PURE__ */ jsx(TextField, { error: t49, name: "singularName", "aria-describedby": "singularName-helper", onChange: t50, value: t51, label: "Singular name" });
+    $[79] = t49;
+    $[80] = t50;
+    $[81] = t51;
+    $[82] = t52;
+  } else {
+    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 ($[83] !== t53 || $[84] !== t54) {
+    t55 = /* @__PURE__ */ jsx(FieldCaption, { error: t53, children: t54 });
+    $[83] = t53;
+    $[84] = t54;
+    $[85] = t55;
+  } else {
+    t55 = $[85];
+  }
+  let t56;
+  if ($[86] !== t52 || $[87] !== t55) {
+    t56 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t52,
+      t55
     ] });
-    $[88] = t58;
-    $[89] = t61;
-    $[90] = t62;
+    $[86] = t52;
+    $[87] = t55;
+    $[88] = t56;
   } else {
-    t62 = $[90];
+    t56 = $[88];
   }
-  const t63 = showErrors && Boolean(errors.sideDialogWidth);
-  let t64;
-  if ($[91] !== setFieldTouched || $[92] !== setFieldValue) {
-    t64 = (e_1) => {
+  const t57 = showErrors && Boolean(errors.sideDialogWidth);
+  let t58;
+  if ($[89] !== setFieldTouched || $[90] !== setFieldValue) {
+    t58 = (e_1) => {
       setFieldTouched("sideDialogWidth", true);
       const value_0 = e_1.target.value;
       if (!value_0) {
@@ -618,404 +598,402 @@ function CollectionDetailsForm(t0) {
         }
       }
     };
-    $[91] = setFieldTouched;
-    $[92] = setFieldValue;
-    $[93] = t64;
+    $[89] = setFieldTouched;
+    $[90] = setFieldValue;
+    $[91] = t58;
   } else {
-    t64 = $[93];
+    t58 = $[91];
   }
-  let t65;
-  if ($[94] !== setFieldValue) {
-    t65 = () => {
+  let t59;
+  if ($[92] !== setFieldValue) {
+    t59 = () => {
       setFieldValue("sideDialogWidth", null);
     };
-    $[94] = setFieldValue;
-    $[95] = t65;
+    $[92] = setFieldValue;
+    $[93] = t59;
+  } else {
+    t59 = $[93];
+  }
+  const t60 = !values.sideDialogWidth;
+  let t61;
+  if ($[94] === Symbol.for("react.memo_cache_sentinel")) {
+    t61 = /* @__PURE__ */ jsx(CloseIcon, { size: "small" });
+    $[94] = t61;
+  } else {
+    t61 = $[94];
+  }
+  let t62;
+  if ($[95] !== t59 || $[96] !== t60) {
+    t62 = /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: t59, disabled: t60, children: t61 });
+    $[95] = t59;
+    $[96] = t60;
+    $[97] = t62;
   } else {
-    t65 = $[95];
+    t62 = $[97];
   }
-  const t66 = !values.sideDialogWidth;
+  const t63 = values.sideDialogWidth ?? "";
+  let t64;
+  if ($[98] !== t57 || $[99] !== t58 || $[100] !== t62 || $[101] !== t63) {
+    t64 = /* @__PURE__ */ jsx(TextField, { error: t57, name: "sideDialogWidth", type: "number", "aria-describedby": "sideDialogWidth-helper", onChange: t58, endAdornment: t62, value: t63, label: "Side dialog width" });
+    $[98] = t57;
+    $[99] = t58;
+    $[100] = t62;
+    $[101] = t63;
+    $[102] = t64;
+  } else {
+    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] === Symbol.for("react.memo_cache_sentinel")) {
-    t67 = /* @__PURE__ */ jsx(CloseIcon, { size: "small" });
-    $[96] = t67;
+  if ($[103] !== t65 || $[104] !== t66) {
+    t67 = /* @__PURE__ */ jsx(FieldCaption, { error: t65, children: t66 });
+    $[103] = t65;
+    $[104] = t66;
+    $[105] = t67;
   } else {
-    t67 = $[96];
+    t67 = $[105];
   }
   let t68;
-  if ($[97] !== t65 || $[98] !== t66) {
-    t68 = /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: t65, disabled: t66, children: t67 });
-    $[97] = t65;
-    $[98] = t66;
-    $[99] = t68;
-  } else {
-    t68 = $[99];
-  }
-  const t69 = values.sideDialogWidth ?? "";
-  let t70;
-  if ($[100] !== t63 || $[101] !== t64 || $[102] !== t68 || $[103] !== t69) {
-    t70 = /* @__PURE__ */ jsx(TextField, { error: t63, name: "sideDialogWidth", type: "number", "aria-describedby": "sideDialogWidth-helper", onChange: t64, endAdornment: t68, value: t69, label: "Side dialog width" });
-    $[100] = t63;
-    $[101] = t64;
-    $[102] = t68;
-    $[103] = t69;
-    $[104] = t70;
-  } else {
-    t70 = $[104];
-  }
-  const t71 = showErrors && Boolean(errors.singularName);
-  const t72 = showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define the width (in pixels) of entities side dialog. Default is 768px";
-  let t73;
-  if ($[105] !== t71 || $[106] !== t72) {
-    t73 = /* @__PURE__ */ jsx(FieldCaption, { error: t71, children: t72 });
-    $[105] = t71;
-    $[106] = t72;
-    $[107] = t73;
-  } else {
-    t73 = $[107];
-  }
+  if ($[106] !== t64 || $[107] !== t67) {
+    t68 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t64,
+      t67
+    ] });
+    $[106] = t64;
+    $[107] = t67;
+    $[108] = t68;
+  } else {
+    t68 = $[108];
+  }
+  const t69 = showErrors && Boolean(errors.description);
+  const t70 = values.description ?? "";
+  let t71;
+  if ($[109] !== handleChange || $[110] !== t69 || $[111] !== t70) {
+    t71 = /* @__PURE__ */ jsx(TextField, { error: t69, name: "description", value: t70, onChange: handleChange, multiline: true, minRows: 2, "aria-describedby": "description-helper-text", label: "Description" });
+    $[109] = handleChange;
+    $[110] = t69;
+    $[111] = t70;
+    $[112] = t71;
+  } else {
+    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 ($[108] !== t70 || $[109] !== t73) {
-    t74 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-      t70,
-      t73
+  if ($[113] !== t72 || $[114] !== t73) {
+    t74 = /* @__PURE__ */ jsx(FieldCaption, { error: t72, children: t73 });
+    $[113] = t72;
+    $[114] = t73;
+    $[115] = t74;
+  } else {
+    t74 = $[115];
+  }
+  let t75;
+  if ($[116] !== t71 || $[117] !== t74) {
+    t75 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t71,
+      t74
     ] });
-    $[108] = t70;
-    $[109] = t73;
-    $[110] = t74;
+    $[116] = t71;
+    $[117] = t74;
+    $[118] = t75;
   } else {
-    t74 = $[110];
+    t75 = $[118];
   }
-  const t75 = showErrors && Boolean(errors.description);
-  const t76 = values.description ?? "";
+  const t76 = values.defaultSize ?? "";
   let t77;
-  if ($[111] !== handleChange || $[112] !== t75 || $[113] !== t76) {
-    t77 = /* @__PURE__ */ jsx(TextField, { error: t75, name: "description", value: t76, onChange: handleChange, multiline: true, minRows: 2, "aria-describedby": "description-helper-text", label: "Description" });
-    $[111] = handleChange;
-    $[112] = t75;
-    $[113] = t76;
-    $[114] = t77;
+  if ($[119] === Symbol.for("react.memo_cache_sentinel")) {
+    t77 = ["xs", "s", "m", "l", "xl"].map(_temp2$8);
+    $[119] = t77;
+  } else {
+    t77 = $[119];
+  }
+  let t78;
+  if ($[120] !== handleChange || $[121] !== t76) {
+    t78 = /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(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 {
-    t77 = $[114];
+    t78 = $[122];
   }
-  const t78 = showErrors && Boolean(errors.description);
-  const t79 = showErrors && Boolean(errors.description) ? errors.description : "Description of the collection, you can use markdown";
+  const t79 = values.includeJsonView === void 0 || values.includeJsonView ? "Include JSON view" : "Do not include JSON view";
   let t80;
-  if ($[115] !== t78 || $[116] !== t79) {
-    t80 = /* @__PURE__ */ jsx(FieldCaption, { error: t78, children: t79 });
-    $[115] = t78;
-    $[116] = t79;
-    $[117] = t80;
+  if ($[123] !== setFieldValue) {
+    t80 = (v_0) => setFieldValue("includeJsonView", v_0);
+    $[123] = setFieldValue;
+    $[124] = t80;
   } else {
-    t80 = $[117];
+    t80 = $[124];
   }
-  let t81;
-  if ($[118] !== t77 || $[119] !== t80) {
-    t81 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-      t77,
-      t80
-    ] });
-    $[118] = t77;
-    $[119] = t80;
-    $[120] = t81;
+  const t81 = values.includeJsonView === void 0 ? true : values.includeJsonView;
+  let t82;
+  if ($[125] !== t79 || $[126] !== t80 || $[127] !== t81) {
+    t82 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", size: "large", label: t79, onValueChange: t80, value: t81 });
+    $[125] = t79;
+    $[126] = t80;
+    $[127] = t81;
+    $[128] = t82;
   } else {
-    t81 = $[120];
+    t82 = $[128];
   }
-  const t82 = values.defaultSize ?? "";
   let t83;
-  if ($[121] === Symbol.for("react.memo_cache_sentinel")) {
-    t83 = ["xs", "s", "m", "l", "xl"].map(_temp2$7);
-    $[121] = t83;
+  if ($[129] === Symbol.for("react.memo_cache_sentinel")) {
+    t83 = /* @__PURE__ */ jsx(FieldCaption, { children: "Include the JSON representation of the document." });
+    $[129] = t83;
   } else {
-    t83 = $[121];
+    t83 = $[129];
   }
   let t84;
-  if ($[122] !== handleChange || $[123] !== t82) {
-    t84 = /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(Select, { name: "defaultSize", size: "large", fullWidth: true, label: "Default row size", position: "item-aligned", onChange: handleChange, value: t82, renderValue: _temp$b, children: t83 }) });
-    $[122] = handleChange;
-    $[123] = t82;
-    $[124] = t84;
+  if ($[130] !== t82) {
+    t84 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t82,
+      t83
+    ] });
+    $[130] = t82;
+    $[131] = t84;
   } else {
-    t84 = $[124];
+    t84 = $[131];
   }
-  const t85 = values.includeJsonView === void 0 || values.includeJsonView ? "Include JSON view" : "Do not include JSON view";
+  const t85 = customIdValue === "code_defined";
   let t86;
-  if ($[125] !== setFieldValue) {
-    t86 = (v_0) => setFieldValue("includeJsonView", 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.includeJsonView === void 0 ? true : values.includeJsonView;
+  const t87 = customIdValue ?? "";
   let t88;
-  if ($[127] !== t85 || $[128] !== t86 || $[129] !== t87) {
-    t88 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", size: "large", label: t85, onValueChange: t86, value: t87 });
-    $[127] = t85;
-    $[128] = t86;
-    $[129] = t87;
-    $[130] = t88;
-  } else {
-    t88 = $[130];
-  }
   let t89;
-  if ($[131] === Symbol.for("react.memo_cache_sentinel")) {
-    t89 = /* @__PURE__ */ jsx(FieldCaption, { children: "Include the JSON representation of the document." });
-    $[131] = t89;
-  } else {
-    t89 = $[131];
-  }
   let t90;
-  if ($[132] !== t88) {
-    t90 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+  if ($[134] === Symbol.for("react.memo_cache_sentinel")) {
+    t88 = /* @__PURE__ */ jsx(SelectItem, { value: "false", children: "Document ID is generated automatically" });
+    t89 = /* @__PURE__ */ jsx(SelectItem, { value: "true", children: "Users must define an ID" });
+    t90 = /* @__PURE__ */ jsx(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__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxs(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
-    ] });
-    $[132] = t88;
-    $[133] = t90;
+      t89,
+      t90
+    ] }) });
+    $[137] = t85;
+    $[138] = t86;
+    $[139] = t87;
+    $[140] = t91;
   } else {
-    t90 = $[133];
+    t91 = $[140];
   }
-  const t91 = customIdValue === "code_defined";
   let t92;
-  if ($[134] !== setFieldValue) {
-    t92 = (v_1) => {
-      if (v_1 === "code_defined") {
-        throw new Error("This should not happen");
-      }
-      setFieldValue("customId", v_1);
-    };
-    $[134] = setFieldValue;
-    $[135] = t92;
+  if ($[141] !== setFieldValue) {
+    t92 = (v_2) => setFieldValue("collectionGroup", v_2);
+    $[141] = setFieldValue;
+    $[142] = t92;
   } else {
-    t92 = $[135];
+    t92 = $[142];
   }
-  const t93 = customIdValue ?? "";
+  const t93 = values.collectionGroup ?? false;
   let t94;
+  if ($[143] !== t92 || $[144] !== t93) {
+    t94 = /* @__PURE__ */ jsx(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__ */ jsx(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 ($[136] === Symbol.for("react.memo_cache_sentinel")) {
-    t94 = /* @__PURE__ */ jsx(SelectItem, { value: "false", children: "Document ID is generated automatically" });
-    t95 = /* @__PURE__ */ jsx(SelectItem, { value: "true", children: "Users must define an ID" });
-    t96 = /* @__PURE__ */ jsx(SelectItem, { value: "optional", children: "Users can define an ID, but it is not required" });
-    $[136] = t94;
-    $[137] = t95;
-    $[138] = t96;
-  } else {
-    t94 = $[136];
-    t95 = $[137];
-    t96 = $[138];
+  if ($[147] !== t94) {
+    t96 = /* @__PURE__ */ jsxs("div", { className: "col-span-12 mt-4", children: [
+      t94,
+      t95
+    ] });
+    $[147] = t94;
+    $[148] = t96;
+  } else {
+    t96 = $[148];
   }
   let t97;
-  if ($[139] !== t91 || $[140] !== t92 || $[141] !== t93) {
-    t97 = /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxs(Select, { name: "customId", label: "Document IDs generation", position: "item-aligned", size: "large", fullWidth: true, disabled: t91, onValueChange: t92, value: t93, renderValue: _temp3$4, children: [
-      t94,
-      t95,
-      t96
-    ] }) });
-    $[139] = t91;
-    $[140] = t92;
-    $[141] = t93;
-    $[142] = t97;
+  if ($[149] !== setFieldValue) {
+    t97 = (v_3) => setFieldValue("textSearchEnabled", v_3);
+    $[149] = setFieldValue;
+    $[150] = t97;
   } else {
-    t97 = $[142];
+    t97 = $[150];
   }
-  let t98;
-  if ($[143] !== setFieldValue) {
-    t98 = (v_2) => setFieldValue("collectionGroup", v_2);
-    $[143] = setFieldValue;
-    $[144] = t98;
+  const t98 = values.textSearchEnabled ?? false;
+  let t99;
+  if ($[151] !== t97 || $[152] !== t98) {
+    t99 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", size: "large", label: "Enable text search for this collection", onValueChange: t97, value: t98 });
+    $[151] = t97;
+    $[152] = t98;
+    $[153] = t99;
   } else {
-    t98 = $[144];
+    t99 = $[153];
   }
-  const t99 = values.collectionGroup ?? false;
   let t100;
-  if ($[145] !== t98 || $[146] !== t99) {
-    t100 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", size: "large", label: "Collection group", onValueChange: t98, value: t99 });
-    $[145] = t98;
-    $[146] = t99;
-    $[147] = t100;
+  if ($[154] === Symbol.for("react.memo_cache_sentinel")) {
+    t100 = /* @__PURE__ */ jsx(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 {
-    t100 = $[147];
+    t100 = $[154];
   }
   let t101;
-  if ($[148] === Symbol.for("react.memo_cache_sentinel")) {
-    t101 = /* @__PURE__ */ jsx(FieldCaption, { children: "A collection group consists of all collections with the same path. This allows you to query over multiple collections at once." });
-    $[148] = t101;
+  if ($[155] !== t99) {
+    t101 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t99,
+      t100
+    ] });
+    $[155] = t99;
+    $[156] = t101;
   } else {
-    t101 = $[148];
+    t101 = $[156];
   }
   let t102;
-  if ($[149] !== t100) {
-    t102 = /* @__PURE__ */ jsxs("div", { className: "col-span-12 mt-4", children: [
-      t100,
+  if ($[157] !== t101 || $[158] !== t48 || $[159] !== t56 || $[160] !== t68 || $[161] !== t75 || $[162] !== t78 || $[163] !== t84 || $[164] !== t91 || $[165] !== t96) {
+    t102 = /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-4 p-4", children: [
+      t48,
+      t56,
+      t68,
+      t75,
+      t78,
+      t84,
+      t91,
+      t96,
       t101
     ] });
-    $[149] = t100;
-    $[150] = t102;
-  } else {
-    t102 = $[150];
+    $[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 ($[151] !== setFieldValue) {
-    t103 = (v_3) => setFieldValue("textSearchEnabled", v_3);
-    $[151] = setFieldValue;
-    $[152] = t103;
-  } else {
-    t103 = $[152];
-  }
-  const t104 = values.textSearchEnabled ?? false;
-  let t105;
-  if ($[153] !== t103 || $[154] !== t104) {
-    t105 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", size: "large", label: "Enable text search for this collection", onValueChange: t103, value: t104 });
-    $[153] = t103;
-    $[154] = t104;
-    $[155] = t105;
-  } else {
-    t105 = $[155];
-  }
-  let t106;
-  if ($[156] === Symbol.for("react.memo_cache_sentinel")) {
-    t106 = /* @__PURE__ */ jsx(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." });
-    $[156] = t106;
-  } else {
-    t106 = $[156];
-  }
-  let t107;
-  if ($[157] !== t105) {
-    t107 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-      t105,
-      t106
-    ] });
-    $[157] = t105;
-    $[158] = t107;
-  } else {
-    t107 = $[158];
-  }
-  let t108;
-  if ($[159] !== t102 || $[160] !== t107 || $[161] !== t54 || $[162] !== t62 || $[163] !== t74 || $[164] !== t81 || $[165] !== t84 || $[166] !== t90 || $[167] !== t97) {
-    t108 = /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-4 p-4", children: [
-      t54,
-      t62,
-      t74,
-      t81,
-      t84,
-      t90,
-      t97,
-      t102,
-      t107
-    ] });
-    $[159] = t102;
-    $[160] = t107;
-    $[161] = t54;
-    $[162] = t62;
-    $[163] = t74;
-    $[164] = t81;
-    $[165] = t84;
-    $[166] = t90;
-    $[167] = t97;
-    $[168] = t108;
-  } else {
-    t108 = $[168];
-  }
-  let t109;
-  if ($[169] !== advancedPanelExpanded || $[170] !== t108) {
-    t109 = /* @__PURE__ */ jsx(ExpandablePanel, { expanded: advancedPanelExpanded, onExpandedChange: setAdvancedPanelExpanded, title: t47, initiallyExpanded: false, children: t108 });
-    $[169] = advancedPanelExpanded;
-    $[170] = t108;
-    $[171] = t109;
-  } else {
-    t109 = $[171];
-  }
-  let t110;
-  if ($[172] !== children || $[173] !== t109) {
-    t110 = /* @__PURE__ */ jsxs("div", { className: "col-span-12 mt-8", children: [
-      t109,
+  if ($[167] !== advancedPanelExpanded || $[168] !== t102) {
+    t103 = /* @__PURE__ */ jsx(ExpandablePanel, { expanded: advancedPanelExpanded, onExpandedChange: setAdvancedPanelExpanded, title: t41, initiallyExpanded: false, children: t102 });
+    $[167] = advancedPanelExpanded;
+    $[168] = t102;
+    $[169] = t103;
+  } else {
+    t103 = $[169];
+  }
+  let t104;
+  if ($[170] !== children || $[171] !== t103) {
+    t104 = /* @__PURE__ */ jsxs("div", { className: "col-span-12 mt-8", children: [
+      t103,
       children
     ] });
-    $[172] = children;
-    $[173] = t109;
-    $[174] = t110;
+    $[170] = children;
+    $[171] = t103;
+    $[172] = t104;
   } else {
-    t110 = $[174];
+    t104 = $[172];
   }
-  let t111;
-  if ($[175] !== t110 || $[176] !== t27 || $[177] !== t36 || $[178] !== t37 || $[179] !== t40 || $[180] !== t46) {
-    t111 = /* @__PURE__ */ jsxs("div", { className: t19, children: [
-      t27,
-      t36,
-      t37,
+  let t105;
+  if ($[173] !== t104 || $[174] !== t23 || $[175] !== t31 || $[176] !== t34 || $[177] !== t40) {
+    t105 = /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-4", children: [
+      t23,
+      t31,
+      t34,
       t40,
-      t46,
-      t110
+      t104
     ] });
-    $[175] = t110;
-    $[176] = t27;
-    $[177] = t36;
-    $[178] = t37;
-    $[179] = t40;
-    $[180] = t46;
-    $[181] = t111;
+    $[173] = t104;
+    $[174] = t23;
+    $[175] = t31;
+    $[176] = t34;
+    $[177] = t40;
+    $[178] = t105;
   } else {
-    t111 = $[181];
+    t105 = $[178];
   }
-  let t112;
-  if ($[182] === Symbol.for("react.memo_cache_sentinel")) {
-    t112 = /* @__PURE__ */ jsx("div", { style: {
+  let t106;
+  if ($[179] === Symbol.for("react.memo_cache_sentinel")) {
+    t106 = /* @__PURE__ */ jsx("div", { style: {
       height: "52px"
     } });
-    $[182] = t112;
+    $[179] = t106;
   } else {
-    t112 = $[182];
+    t106 = $[179];
   }
-  let t113;
-  if ($[183] !== setFieldValue) {
-    t113 = (icon) => {
+  const t107 = typeof values.icon === "string" ? values.icon : void 0;
+  let t108;
+  if ($[180] !== setFieldValue) {
+    t108 = (icon) => {
       setIconDialogOpen(false);
       setFieldValue("icon", icon);
     };
-    $[183] = setFieldValue;
-    $[184] = t113;
+    $[180] = setFieldValue;
+    $[181] = t108;
   } else {
-    t113 = $[184];
+    t108 = $[181];
   }
-  let t114;
-  if ($[185] !== t113 || $[186] !== values.icon) {
-    t114 = /* @__PURE__ */ jsx("div", { className: "p-4 overflow-auto min-h-[200px]", children: /* @__PURE__ */ jsx(SearchIconsView, { selectedIcon: values.icon, onIconSelected: t113 }) });
-    $[185] = t113;
-    $[186] = values.icon;
-    $[187] = t114;
+  let t109;
+  if ($[182] !== t107 || $[183] !== t108) {
+    t109 = /* @__PURE__ */ jsx("div", { className: "p-4 overflow-auto min-h-[200px]", children: /* @__PURE__ */ jsx(SearchIconsView, { selectedIcon: t107, onIconSelected: t108 }) });
+    $[182] = t107;
+    $[183] = t108;
+    $[184] = t109;
   } else {
-    t114 = $[187];
+    t109 = $[184];
   }
-  let t115;
-  if ($[188] !== iconDialogOpen || $[189] !== t114) {
-    t115 = /* @__PURE__ */ jsx(Dialog, { open: iconDialogOpen, onOpenChange: setIconDialogOpen, maxWidth: "xl", fullWidth: true, children: t114 });
-    $[188] = iconDialogOpen;
-    $[189] = t114;
-    $[190] = t115;
+  let t110;
+  if ($[185] !== iconDialogOpen || $[186] !== t109) {
+    t110 = /* @__PURE__ */ jsx(Dialog, { open: iconDialogOpen, onOpenChange: setIconDialogOpen, maxWidth: "xl", fullWidth: true, children: t109 });
+    $[185] = iconDialogOpen;
+    $[186] = t109;
+    $[187] = t110;
   } else {
-    t115 = $[190];
+    t110 = $[187];
   }
-  let t116;
-  if ($[191] !== T0 || $[192] !== t111 || $[193] !== t115 || $[194] !== t18) {
-    t116 = /* @__PURE__ */ jsx("div", { className: t7, children: /* @__PURE__ */ jsxs(T0, { maxWidth: t8, className: t9, children: [
-      t18,
-      t111,
-      t112,
-      t115
+  let t111;
+  if ($[188] !== t105 || $[189] !== t110 || $[190] !== t15) {
+    t111 = /* @__PURE__ */ jsx("div", { className: "overflow-auto my-auto", children: /* @__PURE__ */ jsxs(Container, { maxWidth: "4xl", className: "flex flex-col gap-4 p-8 m-auto", children: [
+      t15,
+      t105,
+      t106,
+      t110
     ] }) });
-    $[191] = T0;
-    $[192] = t111;
-    $[193] = t115;
-    $[194] = t18;
-    $[195] = t116;
+    $[188] = t105;
+    $[189] = t110;
+    $[190] = t15;
+    $[191] = t111;
   } else {
-    t116 = $[195];
+    t111 = $[191];
   }
-  return t116;
+  return t111;
 }
-function _temp3$4(value_3) {
+function _temp3$5(value_3) {
   if (value_3 === "code_defined") {
     return "Code defined";
   } else {
@@ -1030,10 +1008,10 @@ function _temp3$4(value_3) {
     }
   }
 }
-function _temp2$7(value_2) {
+function _temp2$8(value_2) {
   return /* @__PURE__ */ jsx(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) {
@@ -1258,7 +1236,7 @@ function EnumFormFields(t0) {
           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;
@@ -1381,7 +1359,7 @@ function EnumFormFields(t0) {
   }
   return t15;
 }
-function _temp$a(e) {
+function _temp$b(e) {
   console.error(e);
 }
 const EnumEntry = React__default.memo(function EnumEntryInternal(t0) {
@@ -2170,7 +2148,7 @@ function StoragePropertyField(t0) {
       t192 = $[42];
     }
     if ($[43] !== acceptedFiles || $[44] !== disabled || $[45] !== handleTypesChange || $[46] !== t172 || $[47] !== t182 || $[48] !== t192) {
-      t10 = /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(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__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(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;
@@ -2433,16 +2411,16 @@ function StoragePropertyField(t0) {
   }
   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) {
@@ -2514,7 +2492,7 @@ function PropertyFieldPreview(t0) {
   const t4 = selected ? cardSelectedMixin : "";
   let t5;
   if ($[5] !== borderColorClass || $[6] !== t3 || $[7] !== t4) {
-    t5 = cls("border", "pl-2 w-full flex flex-row gap-4 items-center", cardMixin, t3, t4, "flex-grow p-4 border transition-colors duration-200", borderColorClass);
+    t5 = cls("m-1", "border", "pl-2 w-full flex flex-row gap-4 items-center", cardMixin, t3, t4, "flex-grow p-4 border transition-colors duration-200", borderColorClass);
     $[5] = borderColorClass;
     $[6] = t3;
     $[7] = t4;
@@ -4408,7 +4386,8 @@ function ReferencePropertyField(t0) {
     existing,
     multiple,
     disabled,
-    showErrors
+    showErrors,
+    asString
   } = t0;
   const {
     values,
@@ -4426,7 +4405,7 @@ function ReferencePropertyField(t0) {
     }
     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 = getIn(values, pathPath);
@@ -4517,8 +4496,8 @@ function CollectionsSelect(t0) {
   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) => {
@@ -4549,7 +4528,7 @@ function CollectionsSelect(t0) {
     }
     t2 = /* @__PURE__ */ jsxs(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__ */ jsx(SelectGroup, { label: "Views", children: ungroupedCollections.map(_temp3$2) })
+      ungroupedCollections && /* @__PURE__ */ jsx(SelectGroup, { label: "Views", children: ungroupedCollections.map(_temp3$3) })
     ] });
     $[10] = collections;
     $[11] = disabled;
@@ -4582,16 +4561,16 @@ function CollectionsSelect(t0) {
   }
   return t4;
 }
-function _temp3$2(collection_2) {
+function _temp3$3(collection_2) {
   return /* @__PURE__ */ jsx(SelectItem, { value: collection_2.id ?? collection_2.path, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row", children: [
     /* @__PURE__ */ jsx(IconForView, { collectionOrView: collection_2 }),
     /* @__PURE__ */ jsx(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) {
@@ -4666,7 +4645,7 @@ function DateTimePropertyField(t0) {
   }
   let t10;
   if ($[14] !== disabled || $[15] !== t5 || $[16] !== t6 || $[17] !== t7) {
-    t10 = /* @__PURE__ */ jsxs(Select, { name: "mode", value: t5, error: t6, size: "large", onValueChange: t7, label: "Mode", fullWidth: true, renderValue: _temp$7, disabled, children: [
+    t10 = /* @__PURE__ */ jsxs(Select, { name: "mode", value: t5, error: t6, size: "large", onValueChange: t7, label: "Mode", fullWidth: true, renderValue: _temp$8, disabled, children: [
       t8,
       t9
     ] });
@@ -4727,7 +4706,7 @@ function DateTimePropertyField(t0) {
   }
   let t20;
   if ($[30] !== disabled || $[31] !== t14 || $[32] !== t15 || $[33] !== t16) {
-    t20 = /* @__PURE__ */ jsxs(Select, { name: "autoValue", disabled, size: "large", fullWidth: true, value: t14, onValueChange: t15, renderValue: _temp2$4, error: t16, label: "Automatic value", children: [
+    t20 = /* @__PURE__ */ jsxs(Select, { name: "autoValue", disabled, size: "large", fullWidth: true, value: t14, onValueChange: t15, renderValue: _temp2$5, error: t16, label: "Automatic value", children: [
       t17,
       t18,
       t19
@@ -4797,7 +4776,7 @@ function DateTimePropertyField(t0) {
   }
   return t27;
 }
-function _temp2$4(v_2) {
+function _temp2$5(v_2) {
   switch (v_2) {
     case "on_create": {
       return "On create";
@@ -4810,7 +4789,7 @@ function _temp2$4(v_2) {
     }
   }
 }
-function _temp$7(v_0) {
+function _temp$8(v_0) {
   switch (v_0) {
     case "date_time": {
       return "Date/Time";
@@ -5035,6 +5014,12 @@ function updatePropertyFromWidget(propertyData, selectedWidgetId, propertyConfig
       propertyConfig: "reference",
       editable: propertyData.editable !== void 0 ? propertyData.editable : true
     });
+  } else if (selectedWidgetId === "reference_as_string") {
+    updatedProperty = mergeDeep(propertyData, {
+      dataType: "string",
+      propertyConfig: "reference_as_string",
+      editable: propertyData.editable !== void 0 ? propertyData.editable : true
+    });
   } else if (selectedWidgetId === "multi_references") {
     updatedProperty = mergeDeep(propertyData, {
       dataType: "array",
@@ -5135,7 +5120,7 @@ function UrlPropertyField(t0) {
   }
   let t8;
   if ($[8] !== disabled || $[9] !== t2 || $[10] !== t3) {
-    t8 = /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxs(Select, { disabled, position: "item-aligned", fullWidth: true, onValueChange: t2, label: "Preview type", renderValue: _temp$6, value: t3, children: [
+    t8 = /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxs(Select, { disabled, position: "item-aligned", fullWidth: true, onValueChange: t2, label: "Preview type", renderValue: _temp$7, value: t3, children: [
       t4,
       t5,
       t6,
@@ -5201,7 +5186,7 @@ function UrlPropertyField(t0) {
   }
   return t13;
 }
-function _temp$6(value_0) {
+function _temp$7(value_0) {
   switch (value_0) {
     case "image": {
       return "Image";
@@ -5217,7 +5202,7 @@ function _temp$6(value_0) {
     }
   }
 }
-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(DEFAULT_FIELD_CONFIGS).filter(([id]) => supportedFieldsIds.includes(id)).map(([id, config]) => ({
   [id]: config
 })).reduce((a, b) => ({
@@ -5841,7 +5826,7 @@ function PropertyFormDialog(t0) {
   }
   let t7;
   if ($[20] !== onCancel) {
-    t7 = onCancel && /* @__PURE__ */ jsx(Button, { variant: "text", onClick: () => {
+    t7 = onCancel && /* @__PURE__ */ jsx(Button, { variant: "text", color: "primary", onClick: () => {
       onCancel();
       formexRef.current?.resetForm();
     }, children: "Cancel" });
@@ -5893,7 +5878,7 @@ function PropertyFormDialog(t0) {
   return t11;
 }
 function PropertyEditFormFields(t0) {
-  const $ = c(142);
+  const $ = c(146);
   const {
     values,
     errors,
@@ -6182,59 +6167,73 @@ function PropertyEditFormFields(t0) {
                           }
                           childComponent = t102;
                         } else {
-                          if (selectedFieldConfigId === "date_time") {
+                          if (selectedFieldConfigId === "reference_as_string") {
                             let t102;
-                            if ($[75] !== disabled) {
-                              t102 = /* @__PURE__ */ jsx(DateTimePropertyField, { disabled });
+                            if ($[75] !== disabled || $[76] !== existing || $[77] !== showErrors) {
+                              t102 = /* @__PURE__ */ 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__ */ jsx(ReferencePropertyField, { showErrors, existing, multiple: true, disabled });
-                                $[77] = disabled;
-                                $[78] = existing;
-                                $[79] = showErrors;
+                              if ($[79] !== disabled) {
+                                t102 = /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(KeyValuePropertyField, { disabled });
-                                    $[89] = disabled;
-                                    $[90] = t102;
+                                  if ($[85] !== allowDataInference || $[86] !== collectionEditable || $[87] !== disabled || $[88] !== existing || $[89] !== getData || $[90] !== propertyConfigs || $[91] !== showErrors) {
+                                    t102 = /* @__PURE__ */ 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__ */ jsx(KeyValuePropertyField, { disabled });
+                                      $[93] = disabled;
+                                      $[94] = t102;
+                                    } else {
+                                      t102 = $[94];
+                                    }
+                                    childComponent = t102;
+                                  } else {
+                                    childComponent = null;
+                                  }
                                 }
                               }
                             }
@@ -6252,7 +6251,7 @@ function PropertyEditFormFields(t0) {
     }
   }
   let t10;
-  if ($[91] !== disabled) {
+  if ($[95] !== disabled) {
     t10 = disabled && /* @__PURE__ */ jsxs(InfoLabel, { mode: "warn", children: [
       /* @__PURE__ */ jsx(Typography, { children: "This property can't be edited" }),
       /* @__PURE__ */ jsxs(Typography, { variant: "caption", children: [
@@ -6261,157 +6260,157 @@ function PropertyEditFormFields(t0) {
         " 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__ */ 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__ */ jsx(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__ */ 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__ */ jsx(IconButton, { variant: "ghost", className: "m-4", disabled, onClick: () => setDeleteDialogOpen(true), children: /* @__PURE__ */ jsx(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__ */ 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__ */ 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__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ 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__ */ 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__ */ jsx(ConfirmationDialog, { open: deleteDialogOpen, onAccept: () => onDelete(values?.id, propertyNamespace), onCancel: () => setDeleteDialogOpen(false), title: /* @__PURE__ */ jsx("div", { children: "Delete this property?" }), body: /* @__PURE__ */ jsxs("div", { children: [
       " This will ",
       /* @__PURE__ */ 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__ */ jsxs(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;
 }
@@ -6451,6 +6450,7 @@ const WIDGET_TYPE_MAP = {
   file_upload: "File",
   multi_file_upload: "File",
   reference: "Reference",
+  reference_as_string: "Text",
   multi_references: "Reference",
   date_time: "Date",
   group: "Group",
@@ -6482,7 +6482,7 @@ function WidgetSelectView(t0) {
   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 ? DEFAULT_FIELD_CONFIGS[key_0] ?? propertyConfigs[key_0] : void 0;
     const baseProperty = propertyConfig_1?.property;
@@ -6664,19 +6664,19 @@ function _temp4$1(key_1) {
   }
   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 !isPropertyBuilder(propertyConfig.property) && propertyConfig.property?.dataType !== "array";
 }
@@ -6770,7 +6770,7 @@ function WidgetSelectViewItem(t0) {
   }
   let t10;
   if ($[20] !== onClick || $[21] !== t9) {
-    t10 = /* @__PURE__ */ jsx(Card, { onClick, className: "flex flex-row items-center px-4 py-2", children: t9 });
+    t10 = /* @__PURE__ */ jsx(Card, { onClick, className: "flex flex-row items-center px-4 py-2 m-1", children: t9 });
     $[20] = onClick;
     $[21] = t9;
     $[22] = t10;
@@ -6824,7 +6824,7 @@ function GetCodeDialog(t0) {
   if ($[3] !== code) {
     t3 = /* @__PURE__ */ jsxs(DialogContent, { children: [
       t2,
-      /* @__PURE__ */ jsx(Highlight, { theme: themes.vsDark, code, language: "typescript", children: _temp$4 })
+      /* @__PURE__ */ jsx(Highlight, { theme: themes.vsDark, code, language: "typescript", children: _temp$5 })
     ] });
     $[3] = code;
     $[4] = t3;
@@ -6838,7 +6838,7 @@ function GetCodeDialog(t0) {
       e.preventDefault();
       snackbarController.open({
         type: "success",
-        message: `Copied`
+        message: "Copied"
       });
       return navigator.clipboard.writeText(code);
     };
@@ -6857,7 +6857,7 @@ function GetCodeDialog(t0) {
   }
   let t6;
   if ($[9] !== t4) {
-    t6 = /* @__PURE__ */ jsxs(Button, { variant: "text", size: "small", onClick: t4, children: [
+    t6 = /* @__PURE__ */ jsxs(Button, { variant: "text", size: "small", color: "primary", onClick: t4, children: [
       t5,
       "Copy to clipboard"
     ] });
@@ -6904,7 +6904,7 @@ function GetCodeDialog(t0) {
   }
   return t9;
 }
-function _temp$4(t0) {
+function _temp$5(t0) {
   const {
     style,
     tokens,
@@ -7017,6 +7017,7 @@ function CollectionPropertiesEditorForm({
   const inferPropertiesFromData = doCollectionInference ? () => {
     if (!doCollectionInference) return;
     setInferringProperties(true);
+    console.debug("CollectionEditor: inferring properties from data", doCollectionInference, values);
     doCollectionInference(values).then((newCollection) => {
       if (newCollection) makePropertiesEditable(newCollection.properties);
       if (!newCollection) {
@@ -7253,7 +7254,7 @@ function UnsavedChangesDialog(t0) {
   }
   let t7;
   if ($[10] !== handleCancel) {
-    t7 = /* @__PURE__ */ jsx(Button, { variant: "text", onClick: handleCancel, autoFocus: true, children: " Cancel " });
+    t7 = /* @__PURE__ */ jsx(Button, { variant: "text", color: "primary", onClick: handleCancel, autoFocus: true, children: " Cancel " });
     $[10] = handleCancel;
     $[11] = t7;
   } else {
@@ -7261,7 +7262,7 @@ function UnsavedChangesDialog(t0) {
   }
   let t8;
   if ($[12] !== handleOk) {
-    t8 = /* @__PURE__ */ jsx(Button, { onClick: handleOk, children: " Ok " });
+    t8 = /* @__PURE__ */ jsx(Button, { color: "primary", onClick: handleOk, children: " Ok " });
     $[12] = handleOk;
     $[13] = t8;
   } else {
@@ -7329,7 +7330,7 @@ function EntityCustomViewsSelectDialog(t0) {
   }
   let t3;
   if ($[4] !== entityViews) {
-    t3 = (entityViews ?? []).length === 0 && /* @__PURE__ */ jsx(Typography, { variant: "body2", children: "No custom views defined" });
+    t3 = (entityViews ?? []).length === 0 && /* @__PURE__ */ jsx(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 {
@@ -7349,7 +7350,7 @@ function EntityCustomViewsSelectDialog(t0) {
   }
   let t5;
   if ($[9] !== onClose) {
-    t5 = /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: () => onClose(), children: "Cancel" }) });
+    t5 = /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsx(Button, { variant: "outlined", color: "primary", onClick: () => onClose(), children: "Cancel" }) });
     $[9] = onClose;
     $[10] = t5;
   } else {
@@ -7416,8 +7417,8 @@ function SubcollectionsEditTab(t0) {
   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) => resolveEntityView(e_0, contextEntityViews)).filter(Boolean) ?? [];
-    const hardCodedEntityViews = collection.entityViews?.filter(_temp2$2) ?? [];
+    const resolvedEntityViews = values.entityViews?.filter(_temp$4).map((e_0) => 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 = Container;
@@ -7526,7 +7527,7 @@ function SubcollectionsEditTab(t0) {
       t182 = $[36];
     }
     t2 = resolvedEntityViews.map(t182);
-    t3 = hardCodedEntityViews.map(_temp3);
+    t3 = hardCodedEntityViews.map(_temp3$1);
     $[2] = collection.entityViews;
     $[3] = contextEntityViews;
     $[4] = subcollections;
@@ -7800,7 +7801,7 @@ function SubcollectionsEditTab(t0) {
 function _temp4(e_6) {
   return e_6.id;
 }
-function _temp3(view_0) {
+function _temp3$1(view_0) {
   return /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsxs(TableCell, { align: "left", children: [
     /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: "flex-grow", children: view_0.name }),
     /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "flex-grow", children: [
@@ -7809,10 +7810,10 @@ function _temp3(view_0) {
     ] })
   ] }) }, 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 = {
@@ -8254,7 +8255,7 @@ const pagesCollectionTemplate = {
   }
 };
 function CollectionEditorWelcomeView(t0) {
-  const $ = c(52);
+  const $ = c(56);
   const {
     path,
     pathSuggestions,
@@ -8346,162 +8347,173 @@ function CollectionEditorWelcomeView(t0) {
     t7 = $[15];
   }
   let t8;
-  if ($[16] !== t6 || $[17] !== t7) {
-    t8 = /* @__PURE__ */ jsxs("div", { className: "my-2", children: [
-      t5,
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-x-2 gap-y-1 items-center my-2 min-h-7", children: [
-        t6,
-        t7
-      ] })
-    ] });
-    $[16] = t6;
-    $[17] = t7;
+  if ($[16] !== filteredPathSuggestions || $[17] !== loadingPathSuggestions) {
+    t8 = (filteredPathSuggestions ?? []).length === 0 && !loadingPathSuggestions && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: "No existing paths found" });
+    $[16] = filteredPathSuggestions;
+    $[17] = loadingPathSuggestions;
     $[18] = t8;
   } else {
     t8 = $[18];
   }
   let t9;
-  if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
-    t9 = /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: "● Select a template:" });
-    $[19] = t9;
+  if ($[19] !== t6 || $[20] !== t7 || $[21] !== t8) {
+    t9 = /* @__PURE__ */ jsxs("div", { className: "my-2", children: [
+      t5,
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-x-2 gap-y-1 items-center my-2 min-h-7", children: [
+        t6,
+        t7,
+        t8
+      ] })
+    ] });
+    $[19] = t6;
+    $[20] = t7;
+    $[21] = t8;
+    $[22] = t9;
   } else {
-    t9 = $[19];
+    t9 = $[22];
   }
   let t10;
-  if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
-    t10 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: productsCollectionTemplate.icon });
-    $[20] = t10;
+  if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: "● Select a template:" });
+    $[23] = t10;
   } else {
-    t10 = $[20];
+    t10 = $[23];
   }
   let t11;
-  if ($[21] !== onContinue || $[22] !== setValues) {
-    t11 = /* @__PURE__ */ jsx(TemplateButton, { title: "Products", subtitle: "A collection of products with images, prices and stock", icon: t10, onClick: () => {
-      setValues(productsCollectionTemplate);
-      onContinue();
-    } });
-    $[21] = onContinue;
-    $[22] = setValues;
-    $[23] = t11;
-  } else {
-    t11 = $[23];
-  }
-  let t12;
   if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
-    t12 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: usersCollectionTemplate.icon });
-    $[24] = t12;
+    t11 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: productsCollectionTemplate.icon });
+    $[24] = t11;
   } else {
-    t12 = $[24];
+    t11 = $[24];
   }
-  let t13;
+  let t12;
   if ($[25] !== onContinue || $[26] !== setValues) {
-    t13 = /* @__PURE__ */ jsx(TemplateButton, { title: "Users", subtitle: "A collection of users with emails, names and roles", icon: t12, onClick: () => {
-      setValues(usersCollectionTemplate);
+    t12 = /* @__PURE__ */ jsx(TemplateButton, { title: "Products", subtitle: "A collection of products with images, prices and stock", icon: t11, onClick: () => {
+      setValues(productsCollectionTemplate);
       onContinue();
     } });
     $[25] = onContinue;
     $[26] = setValues;
-    $[27] = t13;
+    $[27] = t12;
   } else {
-    t13 = $[27];
+    t12 = $[27];
   }
-  let t14;
+  let t13;
   if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
-    t14 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: blogCollectionTemplate.icon });
-    $[28] = t14;
+    t13 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: usersCollectionTemplate.icon });
+    $[28] = t13;
   } else {
-    t14 = $[28];
+    t13 = $[28];
   }
-  let t15;
+  let t14;
   if ($[29] !== onContinue || $[30] !== setValues) {
-    t15 = /* @__PURE__ */ jsx(TemplateButton, { title: "Blog posts", subtitle: "A collection of blog posts with images, authors and complex content", icon: t14, onClick: () => {
-      setValues(blogCollectionTemplate);
+    t14 = /* @__PURE__ */ jsx(TemplateButton, { title: "Users", subtitle: "A collection of users with emails, names and roles", icon: t13, onClick: () => {
+      setValues(usersCollectionTemplate);
       onContinue();
     } });
     $[29] = onContinue;
     $[30] = setValues;
-    $[31] = t15;
+    $[31] = t14;
   } else {
-    t15 = $[31];
+    t14 = $[31];
   }
-  let t16;
+  let t15;
   if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
-    t16 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: pagesCollectionTemplate.icon });
-    $[32] = t16;
+    t15 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: blogCollectionTemplate.icon });
+    $[32] = t15;
   } else {
-    t16 = $[32];
+    t15 = $[32];
   }
-  let t17;
+  let t16;
   if ($[33] !== onContinue || $[34] !== setValues) {
-    t17 = /* @__PURE__ */ jsx(TemplateButton, { title: "Pages", subtitle: "A collection of pages with images, authors and complex content", icon: t16, onClick: () => {
-      setValues(pagesCollectionTemplate);
+    t16 = /* @__PURE__ */ jsx(TemplateButton, { title: "Blog posts", subtitle: "A collection of blog posts with images, authors and complex content", icon: t15, onClick: () => {
+      setValues(blogCollectionTemplate);
       onContinue();
     } });
     $[33] = onContinue;
     $[34] = setValues;
-    $[35] = t17;
+    $[35] = t16;
+  } else {
+    t16 = $[35];
+  }
+  let t17;
+  if ($[36] === Symbol.for("react.memo_cache_sentinel")) {
+    t17 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: pagesCollectionTemplate.icon });
+    $[36] = t17;
   } else {
-    t17 = $[35];
+    t17 = $[36];
   }
   let t18;
-  if ($[36] !== t11 || $[37] !== t13 || $[38] !== t15 || $[39] !== t17) {
-    t18 = /* @__PURE__ */ jsxs("div", { className: "my-2", children: [
-      t9,
+  if ($[37] !== onContinue || $[38] !== setValues) {
+    t18 = /* @__PURE__ */ jsx(TemplateButton, { title: "Pages", subtitle: "A collection of pages with images, authors and complex content", icon: t17, onClick: () => {
+      setValues(pagesCollectionTemplate);
+      onContinue();
+    } });
+    $[37] = onContinue;
+    $[38] = setValues;
+    $[39] = t18;
+  } else {
+    t18 = $[39];
+  }
+  let t19;
+  if ($[40] !== t12 || $[41] !== t14 || $[42] !== t16 || $[43] !== t18) {
+    t19 = /* @__PURE__ */ jsxs("div", { className: "my-2", children: [
+      t10,
       /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
-        t11,
-        t13,
-        t15,
-        t17
+        t12,
+        t14,
+        t16,
+        t18
       ] })
     ] });
-    $[36] = t11;
-    $[37] = t13;
-    $[38] = t15;
-    $[39] = t17;
-    $[40] = t18;
+    $[40] = t12;
+    $[41] = t14;
+    $[42] = t16;
+    $[43] = t18;
+    $[44] = t19;
   } else {
-    t18 = $[40];
+    t19 = $[44];
   }
-  let t19;
-  if ($[41] !== onContinue || $[42] !== parentCollection) {
-    t19 = !parentCollection && /* @__PURE__ */ jsxs("div", { children: [
+  let t20;
+  if ($[45] !== onContinue || $[46] !== parentCollection) {
+    t20 = !parentCollection && /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", className: "mb-2", children: "● Create a collection from a file (csv, json, xls, xslx...)" }),
       /* @__PURE__ */ jsx(ImportFileUpload, { onDataAdded: (data, propertiesOrder) => onContinue(data, propertiesOrder) })
     ] });
-    $[41] = onContinue;
-    $[42] = parentCollection;
-    $[43] = t19;
+    $[45] = onContinue;
+    $[46] = parentCollection;
+    $[47] = t20;
   } else {
-    t19 = $[43];
+    t20 = $[47];
   }
-  let t20;
-  if ($[44] !== onContinue) {
-    t20 = /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { variant: "text", onClick: () => onContinue(), className: "my-2", children: "Continue from scratch" }) });
-    $[44] = onContinue;
-    $[45] = t20;
+  let t21;
+  if ($[48] !== onContinue) {
+    t21 = /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { variant: "text", onClick: () => onContinue(), className: "my-2", children: "Continue from scratch" }) });
+    $[48] = onContinue;
+    $[49] = t21;
   } else {
-    t20 = $[45];
+    t21 = $[49];
   }
-  let t21;
-  if ($[46] !== t18 || $[47] !== t19 || $[48] !== t20 || $[49] !== t4 || $[50] !== t8) {
-    t21 = /* @__PURE__ */ jsx("div", { className: "overflow-auto my-auto", children: /* @__PURE__ */ jsxs(Container, { maxWidth: "4xl", className: "flex flex-col gap-4 p-8 m-auto", children: [
+  let t22;
+  if ($[50] !== t19 || $[51] !== t20 || $[52] !== t21 || $[53] !== t4 || $[54] !== t9) {
+    t22 = /* @__PURE__ */ jsx("div", { className: "overflow-auto my-auto", children: /* @__PURE__ */ jsxs(Container, { maxWidth: "4xl", className: "flex flex-col gap-4 p-8 m-auto", children: [
       t3,
       t4,
-      t8,
-      t18,
+      t9,
       t19,
-      t20
+      t20,
+      t21
     ] }) });
-    $[46] = t18;
-    $[47] = t19;
-    $[48] = t20;
-    $[49] = t4;
-    $[50] = t8;
-    $[51] = t21;
+    $[50] = t19;
+    $[51] = t20;
+    $[52] = t21;
+    $[53] = t4;
+    $[54] = t9;
+    $[55] = t22;
   } else {
-    t21 = $[51];
+    t22 = $[55];
   }
-  return t21;
+  return t22;
 }
 function TemplateButton(t0) {
   const $ = c(10);
@@ -8602,7 +8614,7 @@ function CollectionEditorImportMapping(t0) {
         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
@@ -8768,7 +8780,7 @@ function CollectionEditorImportMapping(t0) {
   }
   return t13;
 }
-function _temp$2(p_0) {
+function _temp$3(p_0) {
   return p_0 !== void 0;
 }
 function PropertySelect(t0) {
@@ -8841,7 +8853,7 @@ function PropertySelect(t0) {
   }
   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];
@@ -8871,7 +8883,7 @@ function PropertySelect(t0) {
   }
   return t11;
 }
-function _temp2$1(t0) {
+function _temp2$2(t0) {
   const [key, widget_0] = t0;
   return /* @__PURE__ */ jsx(PropertySelectItem, { value: key, optionDisabled: false, propertyConfig: widget_0, existing: false }, key);
 }
@@ -9037,7 +9049,7 @@ function CollectionEditorImportDataPreview(t0) {
   }
   let t7;
   if ($[12] !== propertiesOrder) {
-    t7 = propertiesOrder.map(_temp$1);
+    t7 = propertiesOrder.map(_temp$2);
     $[12] = propertiesOrder;
     $[13] = t7;
   } else {
@@ -9056,7 +9068,7 @@ function CollectionEditorImportDataPreview(t0) {
   }
   return t8;
 }
-function _temp$1(p) {
+function _temp$2(p) {
   return {
     key: p,
     disabled: false
@@ -9110,6 +9122,355 @@ function cleanPropertiesFromImport(properties, parentSlug = "") {
     idColumn
   };
 }
+function EntityActionsSelectDialog(t0) {
+  const $ = c(15);
+  const {
+    open,
+    onClose
+  } = t0;
+  const {
+    entityActions
+  } = useCustomizationController();
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = /* @__PURE__ */ jsx(DialogTitle, { children: "Select custom action" });
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  let t2;
+  if ($[1] !== entityActions || $[2] !== onClose) {
+    t2 = entityActions?.map((action) => /* @__PURE__ */ jsxs(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__ */ jsx(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__ */ jsxs(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__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsx(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__ */ jsxs(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 $ = c(64);
+  const {
+    collection
+  } = t0;
+  const {
+    entityActions: contextEntityActions
+  } = useCustomizationController();
+  const [addEntityActionDialogOpen, setAddEntityActionDialogOpen] = React__default.useState(false);
+  const [actionToDelete, setActionToDelete] = React__default.useState();
+  const {
+    values,
+    setFieldValue
+  } = 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) => 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 = 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__ */ jsx(Typography, { variant: "h5", children: "Custom actions" });
+      $[17] = t5;
+    } else {
+      t5 = $[17];
+    }
+    if ($[18] !== totalEntityActions) {
+      t6 = totalEntityActions === 0 && /* @__PURE__ */ jsx(Alert, { action: /* @__PURE__ */ jsx(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 = Paper;
+    t3 = "flex flex-col gap-4 p-2 w-full";
+    T1 = Table;
+    T0 = TableBody;
+    let t112;
+    if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+      t112 = (action) => /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { align: "left", children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: "flex-grow", children: action.name }) }),
+        /* @__PURE__ */ jsx(TableCell, { align: "right", children: /* @__PURE__ */ jsx(Tooltip, { title: "Remove", asChild: true, children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: (e_2) => {
+          e_2.preventDefault();
+          e_2.stopPropagation();
+          setActionToDelete(action.key);
+        }, color: "inherit", children: /* @__PURE__ */ jsx(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__ */ 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__ */ 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__ */ jsx(Button, { onClick: t13, variant: "text", startIcon: /* @__PURE__ */ jsx(AddIcon, {}), children: "Add custom entity action" });
+    $[29] = t14;
+  } else {
+    t14 = $[29];
+  }
+  let t15;
+  if ($[30] !== T2 || $[31] !== t12 || $[32] !== t3) {
+    t15 = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx("div", { style: {
+      height: "52px"
+    } });
+    $[47] = t19;
+  } else {
+    t19 = $[47];
+  }
+  let t20;
+  if ($[48] !== actionToDelete || $[49] !== setFieldValue || $[50] !== values.entityActions) {
+    t20 = actionToDelete && /* @__PURE__ */ jsx(ConfirmationDialog, { open: Boolean(actionToDelete), onAccept: () => {
+      setFieldValue("entityActions", values.entityActions?.filter((e_3) => e_3 !== actionToDelete));
+      setActionToDelete(void 0);
+    }, onCancel: () => setActionToDelete(void 0), title: /* @__PURE__ */ jsx(Fragment, { children: "Remove this action?" }), body: /* @__PURE__ */ jsxs(Fragment, { children: [
+      "This will ",
+      /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(TableRow, { children: /* @__PURE__ */ jsxs(TableCell, { align: "left", children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: "flex-grow", children: action_0.name }),
+    /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "flex-grow", children: [
+      "This action is defined in code with key ",
+      /* @__PURE__ */ 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 $ = c(24);
   const open = props.open;
@@ -9348,10 +9709,10 @@ function CollectionEditorInternal({
       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) {
@@ -9570,7 +9931,8 @@ function CollectionEditorInternal({
       !isNewCollection && /* @__PURE__ */ jsxs(Tabs, { value: currentView, innerClassName: cls(defaultBorderMixin, "px-4 h-14 w-full justify-end bg-surface-50 dark:bg-surface-950 border-b"), onValueChange: (v) => setCurrentView(v), children: [
         /* @__PURE__ */ jsx(Tab, { value: "details", children: "Details" }),
         /* @__PURE__ */ jsx(Tab, { value: "properties", children: "Properties" }),
-        /* @__PURE__ */ jsx(Tab, { value: "subcollections", children: "Additional views" })
+        /* @__PURE__ */ jsx(Tab, { value: "subcollections", children: "Additional views" }),
+        /* @__PURE__ */ jsx(Tab, { value: "custom_actions", children: "Custom actions" })
       ] }),
       /* @__PURE__ */ jsxs("form", { noValidate: true, onSubmit: formController.handleSubmit, className: cls(isNewCollection ? "h-full" : "h-[calc(100%-48px)]", "flex-grow flex flex-col relative"), children: [
         currentView === "loading" && /* @__PURE__ */ jsx(CircularProgressCenter, {}),
@@ -9599,6 +9961,7 @@ function CollectionEditorInternal({
             setDeleteRequested(true);
           }, children: "Reset to code" })
         ] }) }),
+        currentView === "custom_actions" && collection && /* @__PURE__ */ jsx(EntityActionsEditTab, { collection }),
         currentView === "subcollections" && collection && /* @__PURE__ */ jsx(SubcollectionsEditTab, { parentCollection, configController, getUser, collectionInference, parentCollectionIds, collection }),
         currentView === "properties" && /* @__PURE__ */ jsx(CollectionPropertiesEditorForm, { showErrors: submitCount > 0, isNewCollection, reservedGroups, onPropertyError: (propertyKey, namespace, error_0) => {
           const current = removeUndefined({
@@ -9610,28 +9973,28 @@ function CollectionEditorInternal({
         }, getUser, getData: getDataWithPath, doCollectionInference, propertyConfigs, collectionEditable, extraIcon: extraView?.icon && /* @__PURE__ */ jsx(IconButton, { color: "primary", onClick: () => setCurrentView("extra_view"), children: extraView.icon }) }),
         currentView !== "welcome" && /* @__PURE__ */ jsxs(DialogActions, { position: "absolute", children: [
           error && /* @__PURE__ */ jsx(ErrorView, { error }),
-          isNewCollection && includeTemplates && currentView === "import_data_mapping" && /* @__PURE__ */ jsxs(Button, { variant: "text", type: "button", onClick: () => {
+          isNewCollection && includeTemplates && currentView === "import_data_mapping" && /* @__PURE__ */ jsxs(Button, { variant: "text", type: "button", color: "primary", onClick: () => {
             importConfig.setInUse(false);
             return setCurrentView("welcome");
           }, children: [
             /* @__PURE__ */ jsx(ArrowBackIcon, {}),
             "Back"
           ] }),
-          isNewCollection && includeTemplates && currentView === "import_data_preview" && /* @__PURE__ */ jsxs(Button, { variant: "text", type: "button", onClick: () => {
+          isNewCollection && includeTemplates && currentView === "import_data_preview" && /* @__PURE__ */ jsxs(Button, { variant: "text", type: "button", color: "primary", onClick: () => {
             setCurrentView("import_data_mapping");
           }, children: [
             /* @__PURE__ */ jsx(ArrowBackIcon, {}),
             "Back"
           ] }),
-          isNewCollection && includeTemplates && currentView === "details" && /* @__PURE__ */ jsxs(Button, { variant: "text", type: "button", onClick: () => setCurrentView("welcome"), children: [
+          isNewCollection && includeTemplates && currentView === "details" && /* @__PURE__ */ jsxs(Button, { variant: "text", color: "primary", type: "button", onClick: () => setCurrentView("welcome"), children: [
             /* @__PURE__ */ jsx(ArrowBackIcon, {}),
             "Back"
           ] }),
-          isNewCollection && currentView === "properties" && /* @__PURE__ */ jsxs(Button, { variant: "text", type: "button", onClick: () => setCurrentView("details"), children: [
+          isNewCollection && currentView === "properties" && /* @__PURE__ */ jsxs(Button, { variant: "text", type: "button", color: "primary", onClick: () => setCurrentView("details"), children: [
             /* @__PURE__ */ jsx(ArrowBackIcon, {}),
             "Back"
           ] }),
-          /* @__PURE__ */ jsx(Button, { variant: "text", onClick: () => {
+          /* @__PURE__ */ jsx(Button, { variant: "text", color: "primary", onClick: () => {
             handleCancel();
           }, children: "Cancel" }),
           isNewCollection && currentView === "import_data_mapping" && /* @__PURE__ */ jsx(Button, { variant: "filled", color: "primary", onClick: onImportMappingComplete, children: "Next" }),
@@ -10124,14 +10487,14 @@ function EditorCollectionAction(t0) {
   }
   let t6;
   if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
-    t6 = /* @__PURE__ */ jsx(SettingsIcon, {});
+    t6 = /* @__PURE__ */ jsx(SettingsIcon, { size: "small" });
     $[15] = t6;
   } else {
     t6 = $[15];
   }
   let t7;
   if ($[16] !== t4 || $[17] !== t5) {
-    t7 = /* @__PURE__ */ jsx(IconButton, { color: "primary", disabled: t4, onClick: t5, children: t6 });
+    t7 = /* @__PURE__ */ jsx(IconButton, { size: "small", color: "primary", disabled: t4, onClick: t5, children: t6 });
     $[16] = t4;
     $[17] = t5;
     $[18] = t7;
@@ -10666,8 +11029,100 @@ function NewCollectionCard(t0) {
   }
   return t8;
 }
+function EditorEntityAction(t0) {
+  const $ = c(23);
+  const {
+    path: fullPath,
+    parentCollectionIds,
+    collection,
+    formContext
+  } = t0;
+  const authController = useAuthController();
+  const navigationController = 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__ */ jsx(SettingsIcon, { size: "small" });
+    $[14] = t6;
+  } else {
+    t6 = $[14];
+  }
+  let t7;
+  if ($[15] !== t4 || $[16] !== t5) {
+    t7 = /* @__PURE__ */ jsx(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__ */ jsx(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__ */ jsx(Fragment, { children: editorButton });
+    $[21] = editorButton;
+    $[22] = t9;
+  } else {
+    t9 = $[22];
+  }
+  return t9;
+}
 function useCollectionEditorPlugin(t0) {
-  const $ = c(19);
+  const $ = c(22);
   const {
     collectionConfigController,
     configPermissions,
@@ -10723,47 +11178,59 @@ function useCollectionEditorPlugin(t0) {
     t4 = $[11];
   }
   let t5;
-  if ($[12] !== t4) {
+  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
     };
-    $[12] = t4;
-    $[13] = t5;
+    $[12] = collectionConfigController.navigationEntries;
+    $[13] = collectionConfigController.saveNavigationEntries;
+    $[14] = t4;
+    $[15] = t5;
   } else {
-    t5 = $[13];
+    t5 = $[15];
   }
   let t6;
-  if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+  let t7;
+  if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
     t6 = {
       CollectionActionsStart: EditorCollectionActionStart,
       CollectionActions: EditorCollectionAction,
       HeaderAction: CollectionViewHeaderAction,
       AddColumnComponent: PropertyAddColumnComponent
     };
-    $[14] = t6;
+    t7 = {
+      ActionsTop: EditorEntityAction
+    };
+    $[16] = t6;
+    $[17] = t7;
   } else {
-    t6 = $[14];
+    t6 = $[16];
+    t7 = $[17];
   }
-  let t7;
-  if ($[15] !== collectionConfigController.loading || $[16] !== t2 || $[17] !== t5) {
-    t7 = {
+  let t8;
+  if ($[18] !== collectionConfigController.loading || $[19] !== t2 || $[20] !== t5) {
+    t8 = {
       key: "collection_editor",
       loading: collectionConfigController.loading,
       provider: t2,
       homePage: t5,
-      collectionView: t6
+      collectionView: t6,
+      form: t7
     };
-    $[15] = collectionConfigController.loading;
-    $[16] = t2;
-    $[17] = t5;
-    $[18] = t7;
+    $[18] = collectionConfigController.loading;
+    $[19] = t2;
+    $[20] = t5;
+    $[21] = t8;
   } else {
-    t7 = $[18];
+    t8 = $[21];
   }
-  return t7;
+  return t8;
 }
 function IntroWidget() {
   const $ = c(11);
@@ -10844,11 +11311,19 @@ const mergeCollections = (baseCollections, backendCollections = [], modifyCollec
   };
   backendCollections.forEach(markAsEditable);
   const result = joinCollectionLists(baseCollections, backendCollections, [], modifyCollection);
-  result.sort((a, b) => baseCollections.findIndex((c2) => c2.id === a.id) - baseCollections.findIndex((c2) => c2.id === b.id));
-  console.debug("Collections result", {
-    baseCollections,
-    backendCollections,
-    result
+  result.sort((a, b) => {
+    const indexA = baseCollections.findIndex((c2) => c2.id === a.id);
+    const indexB = baseCollections.findIndex((c2) => c2.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;
 };