@firecms/collection_editor 3.0.0-beta.11 → 3.0.0-beta.12

package/dist/index.es.js

@@ -4,7 +4,7 @@ import { FieldCaption, SearchIconsView, toSnakeCase, singular, IconForView, Arra
 import * as React from "react";
 import React__default, { useContext, useState, useEffect, useMemo, useRef, useDeferredValue } from "react";
 import equal from "react-fast-compare";
-import { useAutoComplete, Chip, Typography, cls, TextField, Autocomplete, AutocompleteItem, SelectItem, Container, Tooltip, IconButton, DebouncedTextField, SettingsIcon, CloseIcon, Select, BooleanSwitchWithLabel, ExpandablePanel, Dialog, Badge, AutorenewIcon, ListIcon, Button, CircularProgress, Paper, DialogTitle, DialogContent, DialogActions, RuleIcon, MultiSelectItem, CloudUploadIcon, MultiSelect, cardMixin, cardClickableMixin, cardSelectedMixin, FunctionsIcon, DoNotDisturbOnIcon, defaultBorderMixin, RemoveIcon, DragHandleIcon, AddIcon, SelectGroup, DeleteIcon, InfoLabel, fieldBackgroundMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, WarningIcon, Card, 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, TextField, Autocomplete, AutocompleteItem, SelectItem, Container, IconButton, DebouncedTextField, SettingsIcon, CloseIcon, Select, BooleanSwitchWithLabel, ExpandablePanel, Dialog, Badge, AutorenewIcon, ListIcon, Button, CircularProgress, Paper, DialogTitle, DialogContent, DialogActions, RuleIcon, MultiSelectItem, CloudUploadIcon, MultiSelect, cardMixin, cardClickableMixin, cardSelectedMixin, FunctionsIcon, DoNotDisturbOnIcon, defaultBorderMixin, RemoveIcon, DragHandleIcon, 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";
@@ -21,13 +21,154 @@ const YupSchema = Yup.object().shape({
 const useCollectionEditorController = () => {
   return useContext(CollectionEditorContext);
 };
+function LayoutModeSwitch(t0) {
+  const $ = c(29);
+  const {
+    value,
+    onChange,
+    className
+  } = t0;
+  let t1;
+  if ($[0] !== className) {
+    t1 = cls(className);
+    $[0] = className;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  let t3;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = /* @__PURE__ */ jsx(Typography, { variant: "label", color: "secondary", className: "ml-3.5", children: "Document view" });
+    t3 = cls("flex flex-row gap-4");
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t2 = $[2];
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== onChange) {
+    t4 = () => onChange("side_panel");
+    $[4] = onChange;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  const t5 = value === "side_panel" ? "border-primary dark:border-primary" : "border-surface-400 dark:border-surface-600";
+  let t6;
+  if ($[6] !== t5) {
+    t6 = cls("my-2 rounded-md mx-0 p-4 focus:outline-none transition ease-in-out duration-150 flex flex-row gap-4 items-center", "text-surface-700 dark:text-surface-accent-300", "hover:text-primary-dark dark:hover:text-primary focus:ring-primary hover:ring-1 hover:ring-primary", t5);
+    $[6] = t5;
+    $[7] = t6;
+  } else {
+    t6 = $[7];
+  }
+  let t7;
+  let t8;
+  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = /* @__PURE__ */ jsx(VerticalSplitIcon, {});
+    t8 = /* @__PURE__ */ jsx(Typography, { variant: "label", children: "Side panel" });
+    $[8] = t7;
+    $[9] = t8;
+  } else {
+    t7 = $[8];
+    t8 = $[9];
+  }
+  let t9;
+  if ($[10] !== t4 || $[11] !== t6) {
+    t9 = /* @__PURE__ */ jsx(Tooltip, { title: "Documents are open in a side panel", children: /* @__PURE__ */ jsxs(Card, { onClick: t4, className: t6, children: [
+      t7,
+      t8
+    ] }) });
+    $[10] = t4;
+    $[11] = t6;
+    $[12] = t9;
+  } else {
+    t9 = $[12];
+  }
+  let t10;
+  if ($[13] !== onChange) {
+    t10 = () => onChange("full_screen");
+    $[13] = onChange;
+    $[14] = t10;
+  } else {
+    t10 = $[14];
+  }
+  const t11 = value === "full_screen" ? "border-primary dark:border-primary" : "border-surface-400 dark:border-surface-600";
+  let t12;
+  if ($[15] !== t11) {
+    t12 = cls("my-2 rounded-md mx-0 p-4 focus:outline-none transition ease-in-out duration-150 flex flex-row gap-4 items-center", "text-surface-700 dark:text-surface-accent-300", "hover:text-primary-dark dark:hover:text-primary focus:ring-primary hover:ring-1 hover:ring-primary", t11);
+    $[15] = t11;
+    $[16] = t12;
+  } else {
+    t12 = $[16];
+  }
+  let t13;
+  let t14;
+  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+    t13 = /* @__PURE__ */ jsx(SquareIcon, {});
+    t14 = /* @__PURE__ */ jsx(Typography, { variant: "label", children: "Full screen" });
+    $[17] = t13;
+    $[18] = t14;
+  } else {
+    t13 = $[17];
+    t14 = $[18];
+  }
+  let t15;
+  if ($[19] !== t10 || $[20] !== t12) {
+    t15 = /* @__PURE__ */ jsx(Tooltip, { title: "Documents are open full-screen", children: /* @__PURE__ */ jsxs(Card, { onClick: t10, className: t12, children: [
+      t13,
+      t14
+    ] }) });
+    $[19] = t10;
+    $[20] = t12;
+    $[21] = t15;
+  } else {
+    t15 = $[21];
+  }
+  let t16;
+  if ($[22] !== t15 || $[23] !== t9) {
+    t16 = /* @__PURE__ */ jsxs("div", { className: t3, children: [
+      t9,
+      t15
+    ] });
+    $[22] = t15;
+    $[23] = t9;
+    $[24] = t16;
+  } else {
+    t16 = $[24];
+  }
+  let t17;
+  if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+    t17 = /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", className: "ml-3.5", children: "Should documents be opened full screen or in an inline side dialog" });
+    $[25] = t17;
+  } else {
+    t17 = $[25];
+  }
+  let t18;
+  if ($[26] !== t1 || $[27] !== t16) {
+    t18 = /* @__PURE__ */ jsxs("div", { className: t1, children: [
+      t2,
+      t16,
+      t17
+    ] });
+    $[26] = t1;
+    $[27] = t16;
+    $[28] = t18;
+  } else {
+    t18 = $[28];
+  }
+  return t18;
+}
 function CollectionDetailsForm(t0) {
-  const $ = c(168);
+  const $ = c(176);
   const {
     isNewCollection,
     reservedGroups,
     groups,
-    parentCollection
+    parentCollection,
+    children
   } = t0;
   const groupRef = React__default.useRef(null);
   const {
@@ -40,7 +181,7 @@ function CollectionDetailsForm(t0) {
     isSubmitting,
     submitCount
   } = useFormex();
-  const collectionEditor = useCollectionEditorController();
+  useCollectionEditorController();
   const [iconDialogOpen, setIconDialogOpen] = useState(false);
   const [advancedPanelExpanded, setAdvancedPanelExpanded] = useState(false);
   let t1;
@@ -96,7 +237,6 @@ function CollectionDetailsForm(t0) {
     t4 = $[8];
   }
   useEffect(t3, t4);
-  const DatabaseField = collectionEditor.components?.DatabaseField ?? DefaultDatabaseField;
   let t5;
   if ($[9] !== values) {
     t5 = /* @__PURE__ */ jsx(IconForView, { collectionOrView: values });
@@ -154,154 +294,153 @@ function CollectionDetailsForm(t0) {
     t12 = $[14];
   }
   let t13;
-  if ($[15] !== DatabaseField || $[16] !== updateDatabaseId || $[17] !== values.databaseId) {
-    t13 = /* @__PURE__ */ jsx(DatabaseField, { databaseId: values.databaseId, onDatabaseIdUpdate: updateDatabaseId });
-    $[15] = DatabaseField;
-    $[16] = updateDatabaseId;
-    $[17] = values.databaseId;
-    $[18] = t13;
+  if ($[15] !== updateDatabaseId || $[16] !== values.databaseId) {
+    t13 = /* @__PURE__ */ jsx(DefaultDatabaseField, { databaseId: values.databaseId, onDatabaseIdUpdate: updateDatabaseId });
+    $[15] = updateDatabaseId;
+    $[16] = values.databaseId;
+    $[17] = t13;
   } else {
-    t13 = $[18];
+    t13 = $[17];
   }
   let t14;
-  if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
     t14 = () => setIconDialogOpen(true);
-    $[19] = t14;
+    $[18] = t14;
   } else {
-    t14 = $[19];
+    t14 = $[18];
   }
   let t15;
-  if ($[20] !== collectionIcon) {
+  if ($[19] !== collectionIcon) {
     t15 = /* @__PURE__ */ jsx(Tooltip, { title: "Change icon", asChild: true, children: /* @__PURE__ */ jsx(IconButton, { shape: "square", onClick: t14, children: collectionIcon }) });
-    $[20] = collectionIcon;
-    $[21] = t15;
+    $[19] = collectionIcon;
+    $[20] = t15;
   } else {
-    t15 = $[21];
+    t15 = $[20];
   }
   let t16;
-  if ($[22] !== t12 || $[23] !== t13 || $[24] !== t15) {
+  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
     ] });
-    $[22] = t12;
-    $[23] = t13;
-    $[24] = t15;
-    $[25] = t16;
+    $[21] = t12;
+    $[22] = t13;
+    $[23] = t15;
+    $[24] = t16;
   } else {
-    t16 = $[25];
+    t16 = $[24];
   }
   let t17;
-  if ($[26] !== parentCollection) {
+  if ($[25] !== parentCollection) {
     t17 = parentCollection && /* @__PURE__ */ jsx(Chip, { colorScheme: "tealDarker", children: /* @__PURE__ */ jsxs(Typography, { variant: "caption", children: [
       "This is a subcollection of ",
       /* @__PURE__ */ jsx("b", { children: parentCollection.name })
     ] }) });
-    $[26] = parentCollection;
-    $[27] = t17;
+    $[25] = parentCollection;
+    $[26] = t17;
   } else {
-    t17 = $[27];
+    t17 = $[26];
   }
   let t18;
-  if ($[28] !== t16 || $[29] !== t17) {
+  if ($[27] !== t16 || $[28] !== t17) {
     t18 = /* @__PURE__ */ jsxs("div", { children: [
       t16,
       t17
     ] });
-    $[28] = t16;
-    $[29] = t17;
-    $[30] = t18;
+    $[27] = t16;
+    $[28] = t17;
+    $[29] = t18;
   } else {
-    t18 = $[30];
+    t18 = $[29];
   }
   const t19 = "grid grid-cols-12 gap-4";
   const t20 = values.name ?? "";
   let t21;
-  if ($[31] !== updateName) {
+  if ($[30] !== updateName) {
     t21 = (e) => updateName(e.target.value);
-    $[31] = updateName;
-    $[32] = t21;
+    $[30] = updateName;
+    $[31] = t21;
   } else {
-    t21 = $[32];
+    t21 = $[31];
   }
   const t22 = showErrors && Boolean(errors.name);
   let t23;
-  if ($[33] !== t20 || $[34] !== t21 || $[35] !== t22) {
+  if ($[32] !== t20 || $[33] !== t21 || $[34] !== t22) {
     t23 = /* @__PURE__ */ jsx(TextField, { value: t20, onChange: t21, label: "Name", autoFocus: true, required: true, error: t22 });
-    $[33] = t20;
-    $[34] = t21;
-    $[35] = t22;
-    $[36] = t23;
+    $[32] = t20;
+    $[33] = t21;
+    $[34] = t22;
+    $[35] = t23;
   } else {
-    t23 = $[36];
+    t23 = $[35];
   }
   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 ($[37] !== t24 || $[38] !== t25) {
+  if ($[36] !== t24 || $[37] !== t25) {
     t26 = /* @__PURE__ */ jsx(FieldCaption, { error: t24, children: t25 });
-    $[37] = t24;
-    $[38] = t25;
-    $[39] = t26;
+    $[36] = t24;
+    $[37] = t25;
+    $[38] = t26;
   } else {
-    t26 = $[39];
+    t26 = $[38];
   }
   let t27;
-  if ($[40] !== t23 || $[41] !== t26) {
+  if ($[39] !== t23 || $[40] !== t26) {
     t27 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
       t23,
       t26
     ] });
-    $[40] = t23;
-    $[41] = t26;
-    $[42] = t27;
+    $[39] = t23;
+    $[40] = t26;
+    $[41] = t27;
   } else {
-    t27 = $[42];
+    t27 = $[41];
   }
   const t28 = isSubcollection ? "" : "sm:col-span-8";
   let t29;
-  if ($[43] !== t28) {
+  if ($[42] !== t28) {
     t29 = cls("col-span-12 ", t28);
-    $[43] = t28;
-    $[44] = t29;
+    $[42] = t28;
+    $[43] = t29;
   } else {
-    t29 = $[44];
+    t29 = $[43];
   }
   const t30 = !isNewCollection;
   const t31 = showErrors && Boolean(errors.path);
   let t32;
-  if ($[45] !== t30 || $[46] !== t31) {
+  if ($[44] !== t30 || $[45] !== t31) {
     t32 = /* @__PURE__ */ jsx(Field, { name: "path", as: DebouncedTextField, label: "Path", disabled: t30, required: true, error: t31 });
-    $[45] = t30;
-    $[46] = t31;
-    $[47] = t32;
+    $[44] = t30;
+    $[45] = t31;
+    $[46] = t32;
   } else {
-    t32 = $[47];
+    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 ($[48] !== t33 || $[49] !== t34) {
+  if ($[47] !== t33 || $[48] !== t34) {
     t35 = /* @__PURE__ */ jsx(FieldCaption, { error: t33, children: t34 });
-    $[48] = t33;
-    $[49] = t34;
-    $[50] = t35;
+    $[47] = t33;
+    $[48] = t34;
+    $[49] = t35;
   } else {
-    t35 = $[50];
+    t35 = $[49];
   }
   let t36;
-  if ($[51] !== t29 || $[52] !== t32 || $[53] !== t35) {
+  if ($[50] !== t29 || $[51] !== t32 || $[52] !== t35) {
     t36 = /* @__PURE__ */ jsxs("div", { className: t29, children: [
       t32,
       t35
     ] });
-    $[51] = t29;
-    $[52] = t32;
-    $[53] = t35;
-    $[54] = t36;
+    $[50] = t29;
+    $[51] = t32;
+    $[52] = t35;
+    $[53] = t36;
   } else {
-    t36 = $[54];
+    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" }),
@@ -311,235 +450,253 @@ function CollectionDetailsForm(t0) {
     }, 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" })
   ] });
-  let t38;
-  if ($[55] === Symbol.for("react.memo_cache_sentinel")) {
-    t38 = /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-surface-500", children: [
+  const t38 = values.openEntityMode ?? "side_panel";
+  let t39;
+  if ($[54] !== setFieldValue) {
+    t39 = (value) => setFieldValue("openEntityMode", value);
+    $[54] = setFieldValue;
+    $[55] = t39;
+  } else {
+    t39 = $[55];
+  }
+  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;
+  } else {
+    t40 = $[58];
+  }
+  let t41;
+  if ($[59] === 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" })
     ] });
-    $[55] = t38;
+    $[59] = t41;
   } else {
-    t38 = $[55];
+    t41 = $[59];
   }
-  const t39 = !isNewCollection;
-  const t40 = showErrors && Boolean(errors.id);
-  let t41;
-  if ($[56] !== t39 || $[57] !== t40) {
-    t41 = /* @__PURE__ */ jsx(Field, { name: "id", as: DebouncedTextField, disabled: t39, label: "Collection id", error: t40 });
-    $[56] = t39;
-    $[57] = t40;
-    $[58] = t41;
+  const t42 = !isNewCollection;
+  const t43 = showErrors && Boolean(errors.id);
+  let t44;
+  if ($[60] !== t42 || $[61] !== t43) {
+    t44 = /* @__PURE__ */ jsx(Field, { name: "id", as: DebouncedTextField, disabled: t42, label: "Collection id", error: t43 });
+    $[60] = t42;
+    $[61] = t43;
+    $[62] = t44;
   } else {
-    t41 = $[58];
+    t44 = $[62];
   }
-  const t42 = touched.id && Boolean(errors.id);
-  const t43 = touched.id && Boolean(errors.id) ? errors.id : "This id identifies this collection. Typically the same as the path.";
-  let t44;
-  if ($[59] !== t42 || $[60] !== t43) {
-    t44 = /* @__PURE__ */ jsx(FieldCaption, { error: t42, children: t43 });
-    $[59] = t42;
-    $[60] = t43;
-    $[61] = t44;
-  } else {
-    t44 = $[61];
-  }
-  let t45;
-  if ($[62] !== t41 || $[63] !== t44) {
-    t45 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-      t41,
-      t44
+  const t45 = touched.id && Boolean(errors.id);
+  const t46 = touched.id && Boolean(errors.id) ? errors.id : "This id identifies this collection. Typically the same as the path.";
+  let t47;
+  if ($[63] !== t45 || $[64] !== t46) {
+    t47 = /* @__PURE__ */ jsx(FieldCaption, { error: t45, children: t46 });
+    $[63] = t45;
+    $[64] = t46;
+    $[65] = t47;
+  } else {
+    t47 = $[65];
+  }
+  let t48;
+  if ($[66] !== t44 || $[67] !== t47) {
+    t48 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t44,
+      t47
     ] });
-    $[62] = t41;
-    $[63] = t44;
-    $[64] = t45;
+    $[66] = t44;
+    $[67] = t47;
+    $[68] = t48;
   } else {
-    t45 = $[64];
+    t48 = $[68];
   }
-  const t46 = showErrors && Boolean(errors.singularName);
-  let t47;
-  if ($[65] !== handleChange || $[66] !== setFieldTouched) {
-    t47 = (e_0) => {
+  const t49 = showErrors && Boolean(errors.singularName);
+  let t50;
+  if ($[69] !== handleChange || $[70] !== setFieldTouched) {
+    t50 = (e_0) => {
       setFieldTouched("singularName", true);
       return handleChange(e_0);
     };
-    $[65] = handleChange;
-    $[66] = setFieldTouched;
-    $[67] = t47;
+    $[69] = handleChange;
+    $[70] = setFieldTouched;
+    $[71] = t50;
   } else {
-    t47 = $[67];
+    t50 = $[71];
   }
-  const t48 = values.singularName ?? "";
-  let t49;
-  if ($[68] !== t46 || $[69] !== t47 || $[70] !== t48) {
-    t49 = /* @__PURE__ */ jsx(TextField, { error: t46, name: "singularName", "aria-describedby": "singularName-helper", onChange: t47, value: t48, label: "Singular name" });
-    $[68] = t46;
-    $[69] = t47;
-    $[70] = t48;
-    $[71] = t49;
+  const t51 = values.singularName ?? "";
+  let t52;
+  if ($[72] !== t49 || $[73] !== t50 || $[74] !== t51) {
+    t52 = /* @__PURE__ */ jsx(TextField, { error: t49, name: "singularName", "aria-describedby": "singularName-helper", onChange: t50, value: t51, label: "Singular name" });
+    $[72] = t49;
+    $[73] = t50;
+    $[74] = t51;
+    $[75] = t52;
   } else {
-    t49 = $[71];
+    t52 = $[75];
   }
-  const t50 = showErrors && Boolean(errors.singularName);
-  const t51 = showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define a singular name for your entities";
-  let t52;
-  if ($[72] !== t50 || $[73] !== t51) {
-    t52 = /* @__PURE__ */ jsx(FieldCaption, { error: t50, children: t51 });
-    $[72] = t50;
-    $[73] = t51;
-    $[74] = t52;
-  } else {
-    t52 = $[74];
-  }
-  let t53;
-  if ($[75] !== t49 || $[76] !== t52) {
-    t53 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-      t49,
-      t52
+  const t53 = showErrors && Boolean(errors.singularName);
+  const t54 = showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define a singular name for your entities";
+  let t55;
+  if ($[76] !== t53 || $[77] !== t54) {
+    t55 = /* @__PURE__ */ jsx(FieldCaption, { error: t53, children: t54 });
+    $[76] = t53;
+    $[77] = t54;
+    $[78] = t55;
+  } else {
+    t55 = $[78];
+  }
+  let t56;
+  if ($[79] !== t52 || $[80] !== t55) {
+    t56 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t52,
+      t55
     ] });
-    $[75] = t49;
-    $[76] = t52;
-    $[77] = t53;
+    $[79] = t52;
+    $[80] = t55;
+    $[81] = t56;
   } else {
-    t53 = $[77];
+    t56 = $[81];
   }
-  const t54 = showErrors && Boolean(errors.sideDialogWidth);
-  let t55;
-  if ($[78] !== setFieldTouched || $[79] !== setFieldValue) {
-    t55 = (e_1) => {
+  const t57 = showErrors && Boolean(errors.sideDialogWidth);
+  let t58;
+  if ($[82] !== setFieldTouched || $[83] !== setFieldValue) {
+    t58 = (e_1) => {
       setFieldTouched("sideDialogWidth", true);
-      const value = e_1.target.value;
-      if (!value) {
+      const value_0 = e_1.target.value;
+      if (!value_0) {
         setFieldValue("sideDialogWidth", null);
       } else {
-        if (!isNaN(Number(value))) {
-          setFieldValue("sideDialogWidth", Number(value));
+        if (!isNaN(Number(value_0))) {
+          setFieldValue("sideDialogWidth", Number(value_0));
         }
       }
     };
-    $[78] = setFieldTouched;
-    $[79] = setFieldValue;
-    $[80] = t55;
+    $[82] = setFieldTouched;
+    $[83] = setFieldValue;
+    $[84] = t58;
   } else {
-    t55 = $[80];
+    t58 = $[84];
   }
-  let t56;
-  if ($[81] !== setFieldValue) {
-    t56 = () => {
+  let t59;
+  if ($[85] !== setFieldValue) {
+    t59 = () => {
       setFieldValue("sideDialogWidth", null);
     };
-    $[81] = setFieldValue;
-    $[82] = t56;
+    $[85] = setFieldValue;
+    $[86] = t59;
   } else {
-    t56 = $[82];
+    t59 = $[86];
   }
-  const t57 = !values.sideDialogWidth;
-  let t58;
-  if ($[83] === Symbol.for("react.memo_cache_sentinel")) {
-    t58 = /* @__PURE__ */ jsx(CloseIcon, { size: "small" });
-    $[83] = t58;
+  const t60 = !values.sideDialogWidth;
+  let t61;
+  if ($[87] === Symbol.for("react.memo_cache_sentinel")) {
+    t61 = /* @__PURE__ */ jsx(CloseIcon, { size: "small" });
+    $[87] = t61;
   } else {
-    t58 = $[83];
+    t61 = $[87];
   }
-  let t59;
-  if ($[84] !== t56 || $[85] !== t57) {
-    t59 = /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: t56, disabled: t57, children: t58 });
-    $[84] = t56;
-    $[85] = t57;
-    $[86] = t59;
+  let t62;
+  if ($[88] !== t59 || $[89] !== t60) {
+    t62 = /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: t59, disabled: t60, children: t61 });
+    $[88] = t59;
+    $[89] = t60;
+    $[90] = t62;
   } else {
-    t59 = $[86];
+    t62 = $[90];
   }
-  const t60 = values.sideDialogWidth ?? "";
-  let t61;
-  if ($[87] !== t54 || $[88] !== t55 || $[89] !== t59 || $[90] !== t60) {
-    t61 = /* @__PURE__ */ jsx(TextField, { error: t54, name: "sideDialogWidth", type: "number", "aria-describedby": "sideDialogWidth-helper", onChange: t55, endAdornment: t59, value: t60, label: "Side dialog width" });
-    $[87] = t54;
-    $[88] = t55;
-    $[89] = t59;
-    $[90] = t60;
-    $[91] = t61;
-  } else {
-    t61 = $[91];
-  }
-  const t62 = showErrors && Boolean(errors.singularName);
-  const t63 = showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define the width (in pixels) of entities side dialog. Default is 768px";
+  const t63 = values.sideDialogWidth ?? "";
   let t64;
-  if ($[92] !== t62 || $[93] !== t63) {
-    t64 = /* @__PURE__ */ jsx(FieldCaption, { error: t62, children: t63 });
-    $[92] = t62;
-    $[93] = t63;
-    $[94] = t64;
-  } else {
-    t64 = $[94];
-  }
-  let t65;
-  if ($[95] !== t61 || $[96] !== t64) {
-    t65 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-      t61,
-      t64
-    ] });
-    $[95] = t61;
-    $[96] = t64;
-    $[97] = t65;
-  } else {
-    t65 = $[97];
+  if ($[91] !== t57 || $[92] !== t58 || $[93] !== t62 || $[94] !== 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" });
+    $[91] = t57;
+    $[92] = t58;
+    $[93] = t62;
+    $[94] = t63;
+    $[95] = t64;
+  } else {
+    t64 = $[95];
+  }
+  const t65 = showErrors && Boolean(errors.singularName);
+  const t66 = showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define the width (in pixels) of entities side dialog. Default is 768px";
+  let t67;
+  if ($[96] !== t65 || $[97] !== t66) {
+    t67 = /* @__PURE__ */ jsx(FieldCaption, { error: t65, children: t66 });
+    $[96] = t65;
+    $[97] = t66;
+    $[98] = t67;
+  } else {
+    t67 = $[98];
   }
-  const t66 = showErrors && Boolean(errors.description);
-  const t67 = values.description ?? "";
   let t68;
-  if ($[98] !== handleChange || $[99] !== t66 || $[100] !== t67) {
-    t68 = /* @__PURE__ */ jsx(TextField, { error: t66, name: "description", value: t67, onChange: handleChange, multiline: true, rows: 2, "aria-describedby": "description-helper-text", label: "Description" });
-    $[98] = handleChange;
-    $[99] = t66;
+  if ($[99] !== t64 || $[100] !== t67) {
+    t68 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t64,
+      t67
+    ] });
+    $[99] = t64;
     $[100] = t67;
     $[101] = t68;
   } else {
     t68 = $[101];
   }
   const t69 = showErrors && Boolean(errors.description);
-  const t70 = showErrors && Boolean(errors.description) ? errors.description : "Description of the collection, you can use markdown";
+  const t70 = values.description ?? "";
   let t71;
-  if ($[102] !== t69 || $[103] !== t70) {
-    t71 = /* @__PURE__ */ jsx(FieldCaption, { error: t69, children: t70 });
-    $[102] = t69;
-    $[103] = t70;
-    $[104] = t71;
-  } else {
-    t71 = $[104];
-  }
-  let t72;
-  if ($[105] !== t68 || $[106] !== t71) {
-    t72 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-      t68,
-      t71
-    ] });
-    $[105] = t68;
-    $[106] = t71;
-    $[107] = t72;
+  if ($[102] !== handleChange || $[103] !== t69 || $[104] !== t70) {
+    t71 = /* @__PURE__ */ jsx(TextField, { error: t69, name: "description", value: t70, onChange: handleChange, multiline: true, rows: 2, "aria-describedby": "description-helper-text", label: "Description" });
+    $[102] = handleChange;
+    $[103] = t69;
+    $[104] = t70;
+    $[105] = t71;
   } else {
-    t72 = $[107];
+    t71 = $[105];
   }
-  const t73 = values.defaultSize ?? "";
+  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] === Symbol.for("react.memo_cache_sentinel")) {
-    t74 = ["xs", "s", "m", "l", "xl"].map(_temp2$7);
+  if ($[106] !== t72 || $[107] !== t73) {
+    t74 = /* @__PURE__ */ jsx(FieldCaption, { error: t72, children: t73 });
+    $[106] = t72;
+    $[107] = t73;
     $[108] = t74;
   } else {
     t74 = $[108];
   }
   let t75;
-  if ($[109] !== handleChange || $[110] !== t73) {
-    t75 = /* @__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: t73, renderValue: _temp$b, children: t74 }) });
-    $[109] = handleChange;
-    $[110] = t73;
+  if ($[109] !== t71 || $[110] !== t74) {
+    t75 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t71,
+      t74
+    ] });
+    $[109] = t71;
+    $[110] = t74;
     $[111] = t75;
   } else {
     t75 = $[111];
   }
-  const t76 = customIdValue === "code_defined";
+  const t76 = values.defaultSize ?? "";
   let t77;
-  if ($[112] !== setFieldValue) {
-    t77 = (v) => {
+  if ($[112] === Symbol.for("react.memo_cache_sentinel")) {
+    t77 = ["xs", "s", "m", "l", "xl"].map(_temp2$7);
+    $[112] = t77;
+  } else {
+    t77 = $[112];
+  }
+  let t78;
+  if ($[113] !== handleChange || $[114] !== 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$b, children: t77 }) });
+    $[113] = handleChange;
+    $[114] = t76;
+    $[115] = t78;
+  } else {
+    t78 = $[115];
+  }
+  const t79 = customIdValue === "code_defined";
+  let t80;
+  if ($[116] !== setFieldValue) {
+    t80 = (v) => {
       if (v === "code_defined") {
         throw new Error("This should not happen");
       } else {
@@ -556,226 +713,240 @@ function CollectionDetailsForm(t0) {
         }
       }
     };
-    $[112] = setFieldValue;
-    $[113] = t77;
+    $[116] = setFieldValue;
+    $[117] = t80;
   } else {
-    t77 = $[113];
-  }
-  const t78 = customIdValue ?? "";
-  let t79;
-  let t80;
-  let t81;
-  if ($[114] === Symbol.for("react.memo_cache_sentinel")) {
-    t79 = /* @__PURE__ */ jsx(SelectItem, { value: "false", children: "Document ID is generated automatically" });
-    t80 = /* @__PURE__ */ jsx(SelectItem, { value: "true", children: "Users must define an ID" });
-    t81 = /* @__PURE__ */ jsx(SelectItem, { value: "optional", children: "Users can define an ID, but it is not required" });
-    $[114] = t79;
-    $[115] = t80;
-    $[116] = t81;
-  } else {
-    t79 = $[114];
-    t80 = $[115];
-    t81 = $[116];
+    t80 = $[117];
   }
+  const t81 = customIdValue ?? "";
   let t82;
-  if ($[117] !== t76 || $[118] !== t77 || $[119] !== t78) {
-    t82 = /* @__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: t76, onValueChange: t77, value: t78, renderValue: _temp3$4, children: [
-      t79,
-      t80,
-      t81
-    ] }) });
-    $[117] = t76;
-    $[118] = t77;
-    $[119] = t78;
-    $[120] = t82;
-  } else {
-    t82 = $[120];
-  }
   let t83;
-  if ($[121] !== setFieldValue) {
-    t83 = (v_0) => setFieldValue("collectionGroup", v_0);
-    $[121] = setFieldValue;
-    $[122] = t83;
-  } else {
-    t83 = $[122];
+  let t84;
+  if ($[118] === Symbol.for("react.memo_cache_sentinel")) {
+    t82 = /* @__PURE__ */ jsx(SelectItem, { value: "false", children: "Document ID is generated automatically" });
+    t83 = /* @__PURE__ */ jsx(SelectItem, { value: "true", children: "Users must define an ID" });
+    t84 = /* @__PURE__ */ jsx(SelectItem, { value: "optional", children: "Users can define an ID, but it is not required" });
+    $[118] = t82;
+    $[119] = t83;
+    $[120] = t84;
+  } else {
+    t82 = $[118];
+    t83 = $[119];
+    t84 = $[120];
   }
-  const t84 = values.collectionGroup ?? false;
   let t85;
-  if ($[123] !== t83 || $[124] !== t84) {
-    t85 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", label: "Collection group", onValueChange: t83, value: t84 });
-    $[123] = t83;
-    $[124] = t84;
-    $[125] = t85;
+  if ($[121] !== t79 || $[122] !== t80 || $[123] !== t81) {
+    t85 = /* @__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: t79, onValueChange: t80, value: t81, renderValue: _temp3$4, children: [
+      t82,
+      t83,
+      t84
+    ] }) });
+    $[121] = t79;
+    $[122] = t80;
+    $[123] = t81;
+    $[124] = t85;
   } else {
-    t85 = $[125];
+    t85 = $[124];
   }
   let t86;
-  if ($[126] === Symbol.for("react.memo_cache_sentinel")) {
-    t86 = /* @__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." });
+  if ($[125] !== setFieldValue) {
+    t86 = (v_0) => setFieldValue("collectionGroup", v_0);
+    $[125] = setFieldValue;
     $[126] = t86;
   } else {
     t86 = $[126];
   }
-  let t87;
-  if ($[127] !== t85) {
-    t87 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-      t85,
-      t86
-    ] });
-    $[127] = t85;
+  const t87 = values.collectionGroup ?? false;
+  let t88;
+  if ($[127] !== t86 || $[128] !== t87) {
+    t88 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", label: "Collection group", onValueChange: t86, value: t87 });
+    $[127] = t86;
     $[128] = t87;
+    $[129] = t88;
   } else {
-    t87 = $[128];
+    t88 = $[129];
   }
-  let t88;
-  if ($[129] !== setFieldValue) {
-    t88 = (v_1) => setFieldValue("textSearchEnabled", v_1);
-    $[129] = setFieldValue;
-    $[130] = t88;
+  let t89;
+  if ($[130] === Symbol.for("react.memo_cache_sentinel")) {
+    t89 = /* @__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." });
+    $[130] = t89;
   } else {
-    t88 = $[130];
+    t89 = $[130];
   }
-  const t89 = values.textSearchEnabled ?? false;
   let t90;
-  if ($[131] !== t88 || $[132] !== t89) {
-    t90 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", label: "Enable text search for this collection", onValueChange: t88, value: t89 });
+  if ($[131] !== t88) {
+    t90 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t88,
+      t89
+    ] });
     $[131] = t88;
-    $[132] = t89;
-    $[133] = t90;
+    $[132] = t90;
   } else {
-    t90 = $[133];
+    t90 = $[132];
   }
   let t91;
-  if ($[134] === Symbol.for("react.memo_cache_sentinel")) {
-    t91 = /* @__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." });
+  if ($[133] !== setFieldValue) {
+    t91 = (v_1) => setFieldValue("textSearchEnabled", v_1);
+    $[133] = setFieldValue;
     $[134] = t91;
   } else {
     t91 = $[134];
   }
-  let t92;
-  if ($[135] !== t90) {
-    t92 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-      t90,
-      t91
-    ] });
-    $[135] = t90;
+  const t92 = values.textSearchEnabled ?? false;
+  let t93;
+  if ($[135] !== t91 || $[136] !== t92) {
+    t93 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", label: "Enable text search for this collection", onValueChange: t91, value: t92 });
+    $[135] = t91;
     $[136] = t92;
+    $[137] = t93;
   } else {
-    t92 = $[136];
+    t93 = $[137];
   }
-  let t93;
-  if ($[137] !== t45 || $[138] !== t53 || $[139] !== t65 || $[140] !== t72 || $[141] !== t75 || $[142] !== t82 || $[143] !== t87 || $[144] !== t92) {
-    t93 = /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-4 p-4", children: [
-      t45,
-      t53,
-      t65,
-      t72,
+  let t94;
+  if ($[138] === Symbol.for("react.memo_cache_sentinel")) {
+    t94 = /* @__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." });
+    $[138] = t94;
+  } else {
+    t94 = $[138];
+  }
+  let t95;
+  if ($[139] !== t93) {
+    t95 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t93,
+      t94
+    ] });
+    $[139] = t93;
+    $[140] = t95;
+  } else {
+    t95 = $[140];
+  }
+  let t96;
+  if ($[141] !== t48 || $[142] !== t56 || $[143] !== t68 || $[144] !== t75 || $[145] !== t78 || $[146] !== t85 || $[147] !== t90 || $[148] !== t95) {
+    t96 = /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-4 p-4", children: [
+      t48,
+      t56,
+      t68,
       t75,
-      t82,
-      t87,
-      t92
+      t78,
+      t85,
+      t90,
+      t95
     ] });
-    $[137] = t45;
-    $[138] = t53;
-    $[139] = t65;
-    $[140] = t72;
-    $[141] = t75;
-    $[142] = t82;
-    $[143] = t87;
-    $[144] = t92;
-    $[145] = t93;
-  } else {
-    t93 = $[145];
+    $[141] = t48;
+    $[142] = t56;
+    $[143] = t68;
+    $[144] = t75;
+    $[145] = t78;
+    $[146] = t85;
+    $[147] = t90;
+    $[148] = t95;
+    $[149] = t96;
+  } else {
+    t96 = $[149];
   }
-  let t94;
-  if ($[146] !== advancedPanelExpanded || $[147] !== t93) {
-    t94 = /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(ExpandablePanel, { expanded: advancedPanelExpanded, onExpandedChange: setAdvancedPanelExpanded, title: t38, initiallyExpanded: false, children: t93 }) });
-    $[146] = advancedPanelExpanded;
-    $[147] = t93;
-    $[148] = t94;
+  let t97;
+  if ($[150] !== advancedPanelExpanded || $[151] !== t96) {
+    t97 = /* @__PURE__ */ jsx(ExpandablePanel, { expanded: advancedPanelExpanded, onExpandedChange: setAdvancedPanelExpanded, title: t41, initiallyExpanded: false, children: t96 });
+    $[150] = advancedPanelExpanded;
+    $[151] = t96;
+    $[152] = t97;
   } else {
-    t94 = $[148];
+    t97 = $[152];
   }
-  let t95;
-  if ($[149] !== t27 || $[150] !== t36 || $[151] !== t37 || $[152] !== t94) {
-    t95 = /* @__PURE__ */ jsxs("div", { className: t19, children: [
+  let t98;
+  if ($[153] !== children || $[154] !== t97) {
+    t98 = /* @__PURE__ */ jsxs("div", { className: "col-span-12 mt-8", children: [
+      t97,
+      children
+    ] });
+    $[153] = children;
+    $[154] = t97;
+    $[155] = t98;
+  } else {
+    t98 = $[155];
+  }
+  let t99;
+  if ($[156] !== t27 || $[157] !== t36 || $[158] !== t37 || $[159] !== t40 || $[160] !== t98) {
+    t99 = /* @__PURE__ */ jsxs("div", { className: t19, children: [
       t27,
       t36,
       t37,
-      t94
+      t40,
+      t98
     ] });
-    $[149] = t27;
-    $[150] = t36;
-    $[151] = t37;
-    $[152] = t94;
-    $[153] = t95;
+    $[156] = t27;
+    $[157] = t36;
+    $[158] = t37;
+    $[159] = t40;
+    $[160] = t98;
+    $[161] = t99;
   } else {
-    t95 = $[153];
+    t99 = $[161];
   }
-  let t96;
-  if ($[154] === Symbol.for("react.memo_cache_sentinel")) {
-    t96 = /* @__PURE__ */ jsx("div", { style: {
+  let t100;
+  if ($[162] === Symbol.for("react.memo_cache_sentinel")) {
+    t100 = /* @__PURE__ */ jsx("div", { style: {
       height: "52px"
     } });
-    $[154] = t96;
+    $[162] = t100;
   } else {
-    t96 = $[154];
+    t100 = $[162];
   }
-  let t97;
-  if ($[155] !== setFieldValue) {
-    t97 = (icon) => {
+  let t101;
+  if ($[163] !== setFieldValue) {
+    t101 = (icon) => {
       setIconDialogOpen(false);
       setFieldValue("icon", icon);
     };
-    $[155] = setFieldValue;
-    $[156] = t97;
+    $[163] = setFieldValue;
+    $[164] = t101;
   } else {
-    t97 = $[156];
+    t101 = $[164];
   }
-  let t98;
-  if ($[157] !== t97 || $[158] !== values.icon) {
-    t98 = /* @__PURE__ */ jsx("div", { className: "p-4 overflow-auto min-h-[200px]", children: /* @__PURE__ */ jsx(SearchIconsView, { selectedIcon: values.icon, onIconSelected: t97 }) });
-    $[157] = t97;
-    $[158] = values.icon;
-    $[159] = t98;
+  let t102;
+  if ($[165] !== t101 || $[166] !== values.icon) {
+    t102 = /* @__PURE__ */ jsx("div", { className: "p-4 overflow-auto min-h-[200px]", children: /* @__PURE__ */ jsx(SearchIconsView, { selectedIcon: values.icon, onIconSelected: t101 }) });
+    $[165] = t101;
+    $[166] = values.icon;
+    $[167] = t102;
   } else {
-    t98 = $[159];
+    t102 = $[167];
   }
-  let t99;
-  if ($[160] !== iconDialogOpen || $[161] !== t98) {
-    t99 = /* @__PURE__ */ jsx(Dialog, { open: iconDialogOpen, onOpenChange: setIconDialogOpen, maxWidth: "xl", fullWidth: true, children: t98 });
-    $[160] = iconDialogOpen;
-    $[161] = t98;
-    $[162] = t99;
+  let t103;
+  if ($[168] !== iconDialogOpen || $[169] !== t102) {
+    t103 = /* @__PURE__ */ jsx(Dialog, { open: iconDialogOpen, onOpenChange: setIconDialogOpen, maxWidth: "xl", fullWidth: true, children: t102 });
+    $[168] = iconDialogOpen;
+    $[169] = t102;
+    $[170] = t103;
   } else {
-    t99 = $[162];
+    t103 = $[170];
   }
-  let t100;
-  if ($[163] !== T0 || $[164] !== t18 || $[165] !== t95 || $[166] !== t99) {
-    t100 = /* @__PURE__ */ jsx("div", { className: t7, children: /* @__PURE__ */ jsxs(T0, { maxWidth: t8, className: t9, children: [
+  let t104;
+  if ($[171] !== T0 || $[172] !== t103 || $[173] !== t18 || $[174] !== t99) {
+    t104 = /* @__PURE__ */ jsx("div", { className: t7, children: /* @__PURE__ */ jsxs(T0, { maxWidth: t8, className: t9, children: [
       t18,
-      t95,
-      t96,
-      t99
+      t99,
+      t100,
+      t103
     ] }) });
-    $[163] = T0;
-    $[164] = t18;
-    $[165] = t95;
-    $[166] = t99;
-    $[167] = t100;
+    $[171] = T0;
+    $[172] = t103;
+    $[173] = t18;
+    $[174] = t99;
+    $[175] = t104;
   } else {
-    t100 = $[167];
+    t104 = $[175];
   }
-  return t100;
+  return t104;
 }
-function _temp3$4(value_2) {
-  if (value_2 === "code_defined") {
+function _temp3$4(value_3) {
+  if (value_3 === "code_defined") {
     return "Code defined";
   } else {
-    if (value_2 === "true") {
+    if (value_3 === "true") {
       return "Users must define an ID";
     } else {
-      if (value_2 === "optional") {
+      if (value_3 === "optional") {
         return "Users can define an ID, but it is not required";
       } else {
         return "Document ID is generated automatically";
@@ -783,11 +954,11 @@ function _temp3$4(value_2) {
     }
   }
 }
-function _temp2$7(value_1) {
-  return /* @__PURE__ */ jsx(SelectItem, { value: value_1, children: value_1.toUpperCase() }, `size-select-${value_1}`);
+function _temp2$7(value_2) {
+  return /* @__PURE__ */ jsx(SelectItem, { value: value_2, children: value_2.toUpperCase() }, `size-select-${value_2}`);
 }
-function _temp$b(value_0) {
-  return value_0.toUpperCase();
+function _temp$b(value_1) {
+  return value_1.toUpperCase();
 }
 function DefaultDatabaseField(t0) {
   const $ = c(5);
@@ -1036,7 +1207,7 @@ function EnumFormFields(t0) {
   let t6;
   if ($[15] !== allowDataInference || $[16] !== disabled || $[17] !== inferValues || $[18] !== inferring) {
     t6 = allowDataInference && /* @__PURE__ */ jsxs(Button, { loading: inferring, disabled: disabled || inferring, variant: "text", size: "small", onClick: inferValues, children: [
-      inferring ? /* @__PURE__ */ jsx(CircularProgress, { size: "small" }) : /* @__PURE__ */ jsx(AutorenewIcon, {}),
+      inferring ? /* @__PURE__ */ jsx(CircularProgress, { size: "smallest" }) : /* @__PURE__ */ jsx(AutorenewIcon, {}),
       "Infer values from data"
     ] });
     $[15] = allowDataInference;
@@ -6462,7 +6633,7 @@ function GetCodeDialog(t0) {
   if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
     t2 = /* @__PURE__ */ jsxs(Typography, { variant: "body2", className: "my-4 mb-8", children: [
       "If you want to customise the collection in code, you can add this collection code to your CMS app configuration. More info in the ",
-      /* @__PURE__ */ jsx("a", { rel: "noopener noreferrer", href: "https://firecms.co/docs/customization_quickstart", children: "docs" }),
+      /* @__PURE__ */ jsx("a", { rel: "noopener noreferrer", href: "https://firecms.co/docs/cloud/quickstart", children: "docs" }),
       "."
     ] });
     $[2] = t2;
@@ -6750,7 +6921,6 @@ function CollectionPropertiesEditorForm({
     previousId,
     namespace: namespace_3
   }) => {
-    console.log("!!!!!! onPropertyChanged", property_0);
     const fullId_0 = id_0 ? getFullId(id_0, namespace_3) : void 0;
     const propertyPath = fullId_0 ? idToPropertiesPath(fullId_0) : void 0;
     if (previousId && previousId !== id_0) {
@@ -8304,10 +8474,8 @@ function CollectionEditorImportMapping(t0) {
         editable: true
       };
       if (propertyPath_0) {
-        if (inferredNewProperty) {
+        {
           setFieldValue(propertyPath_0, inferredNewProperty, false);
-        } else {
-          setFieldValue(propertyPath_0, property_1, false);
         }
         setFieldTouched(propertyPath_0, true, false);
       }
@@ -8702,7 +8870,7 @@ function CollectionEditorImportDataPreview(t0) {
   }
   let t8;
   if ($[13] !== properties || $[14] !== selectionController || $[15] !== t5 || $[16] !== t7) {
-    t8 = /* @__PURE__ */ jsx(EntityCollectionTable, { title: t4, tableController: t5, endAdornment: t6, filterable: false, sortable: false, selectionController, displayedColumnIds: t7, properties, enablePopupIcon: false });
+    t8 = /* @__PURE__ */ jsx(EntityCollectionTable, { title: t4, tableController: t5, endAdornment: t6, filterable: false, sortable: false, selectionController, displayedColumnIds: t7, openEntityMode: "side_panel", properties, enablePopupIcon: false });
     $[13] = properties;
     $[14] = selectionController;
     $[15] = t5;
@@ -9169,7 +9337,7 @@ function CollectionEditorInternal({
   const updatedFullPath = fullPath?.includes("/") ? fullPath?.split("/").slice(0, -1).join("/") + "/" + path : path;
   const pathError_0 = validatePath(path, isNewCollection, existingPaths, values_1.id);
   const parentPaths = !pathError_0 && parentCollectionIds ? navigation.convertIdsToPaths(parentCollectionIds) : void 0;
-  const resolvedPath = !pathError_0 ? navigation.resolveAliasesFrom(updatedFullPath) : void 0;
+  const resolvedPath = !pathError_0 ? navigation.resolveIdsFrom(updatedFullPath) : void 0;
   const getDataWithPath = resolvedPath && getData ? async () => {
     const data = await getData(resolvedPath, parentPaths ?? []);
     if (existingEntities) {
@@ -9206,82 +9374,109 @@ function CollectionEditorInternal({
     setNextMode();
   };
   const editable = collection?.editable === void 0 || collection?.editable === true;
+  const isMergedCollection = collection?.merged ?? false;
   const collectionEditable = editable || isNewCollection;
-  return /* @__PURE__ */ jsx(DialogContent, { fullHeight: true, children: /* @__PURE__ */ jsx(Formex, { value: formController, children: /* @__PURE__ */ jsxs(Fragment, { children: [
-    !isNewCollection && /* @__PURE__ */ jsxs(Tabs, { value: currentView, innerClassName: cls(defaultBorderMixin, "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__ */ 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, {}),
-      currentView === "extra_view" && path && extraView?.View && /* @__PURE__ */ jsx(extraView.View, { path }),
-      currentView === "welcome" && /* @__PURE__ */ jsx(CollectionEditorWelcomeView, { path, onContinue: (importData, propertiesOrder_0) => {
-        if (importData) {
-          onImportDataSet(importData, propertiesOrder_0);
-          setCurrentView("import_data_mapping");
-        } else {
-          setCurrentView("details");
-        }
-      }, existingCollectionPaths: existingPaths, parentCollection, pathSuggestions }),
-      currentView === "import_data_mapping" && importConfig && /* @__PURE__ */ jsx(CollectionEditorImportMapping, { importConfig, collectionEditable, propertyConfigs }),
-      currentView === "import_data_preview" && importConfig && /* @__PURE__ */ jsx(CollectionEditorImportDataPreview, { importConfig, properties: values_1.properties, propertiesOrder: values_1.propertiesOrder }),
-      currentView === "import_data_saving" && importConfig && /* @__PURE__ */ jsx(ImportSaveInProgress, { importConfig, collection: values_1, path, onImportSuccess: async (importedCollection) => {
-        snackbarController.open({
-          type: "info",
-          message: "Data imported successfully"
-        });
-        await saveCollection(values_1);
-        handleClose(importedCollection);
-      } }),
-      currentView === "details" && /* @__PURE__ */ jsx(CollectionDetailsForm, { existingPaths, existingIds, groups, parentCollectionIds, parentCollection, isNewCollection }),
-      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({
-          ...propertyErrorsRef.current,
-          [getFullIdPath(propertyKey, namespace)]: removeUndefined(error_0, true)
-        }, true);
-        propertyErrorsRef.current = current;
-        formController.validate();
-      }, 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: () => {
-          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: () => {
-          setCurrentView("import_data_mapping");
-        }, children: [
-          /* @__PURE__ */ jsx(ArrowBackIcon, {}),
-          "Back"
-        ] }),
-        isNewCollection && includeTemplates && currentView === "details" && /* @__PURE__ */ jsxs(Button, { variant: "text", type: "button", onClick: () => setCurrentView("welcome"), children: [
-          /* @__PURE__ */ jsx(ArrowBackIcon, {}),
-          "Back"
-        ] }),
-        isNewCollection && currentView === "properties" && /* @__PURE__ */ jsxs(Button, { variant: "text", type: "button", onClick: () => setCurrentView("details"), children: [
-          /* @__PURE__ */ jsx(ArrowBackIcon, {}),
-          "Back"
-        ] }),
-        /* @__PURE__ */ jsx(Button, { variant: "text", onClick: () => {
-          handleCancel();
-        }, children: "Cancel" }),
-        isNewCollection && currentView === "import_data_mapping" && /* @__PURE__ */ jsx(Button, { variant: "filled", color: "primary", onClick: onImportMappingComplete, children: "Next" }),
-        isNewCollection && currentView === "import_data_preview" && /* @__PURE__ */ jsx(Button, { variant: "filled", color: "primary", onClick: () => {
-          setNextMode();
-        }, children: "Next" }),
-        isNewCollection && (currentView === "details" || currentView === "properties") && /* @__PURE__ */ jsxs(LoadingButton, { variant: "filled", color: "primary", type: "submit", loading: isSubmitting, disabled: isSubmitting || currentView === "details" && !validValues, startIcon: currentView === "properties" ? /* @__PURE__ */ jsx(CheckIcon, {}) : void 0, children: [
-          currentView === "details" && "Next",
-          currentView === "properties" && "Create collection"
-        ] }),
-        !isNewCollection && /* @__PURE__ */ jsx(LoadingButton, { variant: "filled", color: "primary", type: "submit", loading: isSubmitting, children: "Update collection" })
+  const [deleteRequested, setDeleteRequested] = useState(false);
+  const deleteCollection = () => {
+    if (!collection) return;
+    configController?.deleteCollection({
+      id: collection.id
+    }).then(() => {
+      setDeleteRequested(false);
+      handleCancel();
+      snackbarController.open({
+        message: "Collection deleted",
+        type: "success"
+      });
+    });
+  };
+  return /* @__PURE__ */ jsxs(DialogContent, { fullHeight: true, children: [
+    /* @__PURE__ */ jsx(Formex, { value: formController, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      !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__ */ 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, {}),
+        currentView === "extra_view" && path && extraView?.View && /* @__PURE__ */ jsx(extraView.View, { path }),
+        currentView === "welcome" && /* @__PURE__ */ jsx(CollectionEditorWelcomeView, { path, onContinue: (importData, propertiesOrder_0) => {
+          if (importData) {
+            onImportDataSet(importData, propertiesOrder_0);
+            setCurrentView("import_data_mapping");
+          } else {
+            setCurrentView("details");
+          }
+        }, existingCollectionPaths: existingPaths, parentCollection, pathSuggestions }),
+        currentView === "import_data_mapping" && importConfig && /* @__PURE__ */ jsx(CollectionEditorImportMapping, { importConfig, collectionEditable, propertyConfigs }),
+        currentView === "import_data_preview" && importConfig && /* @__PURE__ */ jsx(CollectionEditorImportDataPreview, { importConfig, properties: values_1.properties, propertiesOrder: values_1.propertiesOrder }),
+        currentView === "import_data_saving" && importConfig && /* @__PURE__ */ jsx(ImportSaveInProgress, { importConfig, collection: values_1, path, onImportSuccess: async (importedCollection) => {
+          snackbarController.open({
+            type: "info",
+            message: "Data imported successfully"
+          });
+          await saveCollection(values_1);
+          handleClose(importedCollection);
+        } }),
+        currentView === "details" && /* @__PURE__ */ jsx(CollectionDetailsForm, { existingPaths, existingIds, groups, parentCollectionIds, parentCollection, isNewCollection, children: !isNewCollection && isMergedCollection && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mt-8", children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "secondary", children: "This collection is defined in code. The changes done in this editor will override the properties defined in code. You can delete the overridden values to revert to the state defined in code." }),
+          /* @__PURE__ */ jsx(Button, { variant: "neutral", onClick: () => {
+            setDeleteRequested(true);
+          }, children: "Reset to code" })
+        ] }) }),
+        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({
+            ...propertyErrorsRef.current,
+            [getFullIdPath(propertyKey, namespace)]: removeUndefined(error_0, true)
+          }, true);
+          propertyErrorsRef.current = current;
+          formController.validate();
+        }, 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: () => {
+            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: () => {
+            setCurrentView("import_data_mapping");
+          }, children: [
+            /* @__PURE__ */ jsx(ArrowBackIcon, {}),
+            "Back"
+          ] }),
+          isNewCollection && includeTemplates && currentView === "details" && /* @__PURE__ */ jsxs(Button, { variant: "text", type: "button", onClick: () => setCurrentView("welcome"), children: [
+            /* @__PURE__ */ jsx(ArrowBackIcon, {}),
+            "Back"
+          ] }),
+          isNewCollection && currentView === "properties" && /* @__PURE__ */ jsxs(Button, { variant: "text", type: "button", onClick: () => setCurrentView("details"), children: [
+            /* @__PURE__ */ jsx(ArrowBackIcon, {}),
+            "Back"
+          ] }),
+          /* @__PURE__ */ jsx(Button, { variant: "text", onClick: () => {
+            handleCancel();
+          }, children: "Cancel" }),
+          isNewCollection && currentView === "import_data_mapping" && /* @__PURE__ */ jsx(Button, { variant: "filled", color: "primary", onClick: onImportMappingComplete, children: "Next" }),
+          isNewCollection && currentView === "import_data_preview" && /* @__PURE__ */ jsx(Button, { variant: "filled", color: "primary", onClick: () => {
+            setNextMode();
+          }, children: "Next" }),
+          isNewCollection && (currentView === "details" || currentView === "properties") && /* @__PURE__ */ jsxs(LoadingButton, { variant: "filled", color: "primary", type: "submit", loading: isSubmitting, disabled: isSubmitting || currentView === "details" && !validValues, startIcon: currentView === "properties" ? /* @__PURE__ */ jsx(CheckIcon, {}) : void 0, children: [
+            currentView === "details" && "Next",
+            currentView === "properties" && "Create collection"
+          ] }),
+          !isNewCollection && /* @__PURE__ */ jsx(LoadingButton, { variant: "filled", color: "primary", type: "submit", loading: isSubmitting, children: "Update collection" })
+        ] })
       ] })
-    ] })
-  ] }) }) });
+    ] }) }),
+    /* @__PURE__ */ jsx(ConfirmationDialog, { open: deleteRequested, onAccept: deleteCollection, onCancel: () => setDeleteRequested(false), title: /* @__PURE__ */ jsx(Fragment, { children: "Delete the stored config?" }), body: /* @__PURE__ */ jsxs(Fragment, { children: [
+      " This will ",
+      /* @__PURE__ */ jsx("b", { children: "not delete any data" }),
+      ", only the stored config, and reset to the code state."
+    ] }) })
+  ] });
 }
 function applyPropertyConfigs(collection, propertyConfigs) {
   const {
@@ -9345,7 +9540,7 @@ const validateId = (value, isNewCollection, existingPaths, existingIds) => {
 const ConfigControllerContext = React__default.createContext({});
 const CollectionEditorContext = React__default.createContext({});
 const ConfigControllerProvider = React__default.memo(function ConfigControllerProvider2(t0) {
-  const $ = c(68);
+  const $ = c(67);
   const {
     children,
     collectionConfigController,
@@ -9356,8 +9551,7 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
     getPathSuggestions,
     getUser,
     getData,
-    onAnalyticsEvent,
-    components
+    onAnalyticsEvent
   } = t0;
   const navigation = useNavigationController();
   const navigate = useNavigate();
@@ -9475,28 +9669,26 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
   const createCollection = t3;
   const t4 = configPermissions ?? defaultConfigPermissions;
   let t5;
-  if ($[6] !== components || $[7] !== createCollection || $[8] !== editCollection || $[9] !== editProperty || $[10] !== getPathSuggestions || $[11] !== t4) {
+  if ($[6] !== createCollection || $[7] !== editCollection || $[8] !== editProperty || $[9] !== getPathSuggestions || $[10] !== t4) {
     t5 = {
       editCollection,
       createCollection,
       editProperty,
       configPermissions: t4,
-      getPathSuggestions,
-      components
+      getPathSuggestions
     };
-    $[6] = components;
-    $[7] = createCollection;
-    $[8] = editCollection;
-    $[9] = editProperty;
-    $[10] = getPathSuggestions;
-    $[11] = t4;
-    $[12] = t5;
+    $[6] = createCollection;
+    $[7] = editCollection;
+    $[8] = editProperty;
+    $[9] = getPathSuggestions;
+    $[10] = t4;
+    $[11] = t5;
   } else {
-    t5 = $[12];
+    t5 = $[11];
   }
   const t6 = Boolean(currentDialog);
   let t7;
-  if ($[13] !== currentDialog || $[14] !== navigate || $[15] !== navigation) {
+  if ($[12] !== currentDialog || $[13] !== navigate || $[14] !== navigation) {
     t7 = (collection_0) => {
       if (currentDialog?.redirect) {
         if (collection_0 && currentDialog?.isNewCollection && !currentDialog.parentCollectionIds.length) {
@@ -9506,29 +9698,29 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
       }
       setCurrentDialog(void 0);
     };
-    $[13] = currentDialog;
-    $[14] = navigate;
-    $[15] = navigation;
-    $[16] = t7;
+    $[12] = currentDialog;
+    $[13] = navigate;
+    $[14] = navigation;
+    $[15] = t7;
   } else {
-    t7 = $[16];
+    t7 = $[15];
   }
   let t8;
-  if ($[17] !== collectionConfigController || $[18] !== collectionInference || $[19] !== currentDialog || $[20] !== extraView || $[21] !== getData || $[22] !== getPathSuggestions || $[23] !== getUser || $[24] !== reservedGroups || $[25] !== t6 || $[26] !== t7) {
+  if ($[16] !== collectionConfigController || $[17] !== collectionInference || $[18] !== currentDialog || $[19] !== extraView || $[20] !== getData || $[21] !== getPathSuggestions || $[22] !== getUser || $[23] !== reservedGroups || $[24] !== t6 || $[25] !== t7) {
     t8 = /* @__PURE__ */ jsx(CollectionEditorDialog, { open: t6, configController: collectionConfigController, isNewCollection: false, collectionInference, ...currentDialog, getData, reservedGroups, extraView, pathSuggestions: getPathSuggestions, getUser, handleClose: t7 });
-    $[17] = collectionConfigController;
-    $[18] = collectionInference;
-    $[19] = currentDialog;
-    $[20] = extraView;
-    $[21] = getData;
-    $[22] = getPathSuggestions;
-    $[23] = getUser;
-    $[24] = reservedGroups;
-    $[25] = t6;
-    $[26] = t7;
-    $[27] = t8;
+    $[16] = collectionConfigController;
+    $[17] = collectionInference;
+    $[18] = currentDialog;
+    $[19] = extraView;
+    $[20] = getData;
+    $[21] = getPathSuggestions;
+    $[22] = getUser;
+    $[23] = reservedGroups;
+    $[24] = t6;
+    $[25] = t7;
+    $[26] = t8;
   } else {
-    t8 = $[27];
+    t8 = $[26];
   }
   const t9 = Boolean(currentPropertyDialog);
   const t10 = Boolean(currentPropertyDialog?.propertyKey);
@@ -9536,21 +9728,21 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
   const t12 = !currentPropertyDialog ? false : !currentPropertyDialog?.propertyKey;
   const t13 = currentPropertyDialog?.collectionEditable ?? false;
   let t14;
-  if ($[28] !== currentPropertyDialog || $[29] !== getData || $[30] !== navigation) {
+  if ($[27] !== currentPropertyDialog || $[28] !== getData || $[29] !== navigation) {
     t14 = getData && currentPropertyDialog?.editedCollectionId ? () => {
       console.debug("get data for property", currentPropertyDialog?.editedCollectionId);
-      const resolvedPath = navigation.resolveAliasesFrom(currentPropertyDialog.editedCollectionId);
+      const resolvedPath = navigation.resolveIdsFrom(currentPropertyDialog.editedCollectionId);
       return getData(resolvedPath, []);
     } : void 0;
-    $[28] = currentPropertyDialog;
-    $[29] = getData;
-    $[30] = navigation;
-    $[31] = t14;
+    $[27] = currentPropertyDialog;
+    $[28] = getData;
+    $[29] = navigation;
+    $[30] = t14;
   } else {
-    t14 = $[31];
+    t14 = $[30];
   }
   let t15;
-  if ($[32] !== collectionConfigController || $[33] !== currentPropertyDialog || $[34] !== snackbarController) {
+  if ($[31] !== collectionConfigController || $[32] !== currentPropertyDialog || $[33] !== snackbarController) {
     t15 = (t162) => {
       const {
         id: id_0,
@@ -9579,15 +9771,15 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
         return false;
       });
     };
-    $[32] = collectionConfigController;
-    $[33] = currentPropertyDialog;
-    $[34] = snackbarController;
-    $[35] = t15;
+    $[31] = collectionConfigController;
+    $[32] = currentPropertyDialog;
+    $[33] = snackbarController;
+    $[34] = t15;
   } else {
-    t15 = $[35];
+    t15 = $[34];
   }
   let t16;
-  if ($[36] !== collectionConfigController || $[37] !== currentPropertyDialog?.currentPropertiesOrder || $[38] !== currentPropertyDialog?.editedCollectionId || $[39] !== currentPropertyDialog?.namespace || $[40] !== currentPropertyDialog?.parentCollectionIds || $[41] !== currentPropertyDialog?.propertyKey || $[42] !== snackbarController) {
+  if ($[35] !== collectionConfigController || $[36] !== currentPropertyDialog?.currentPropertiesOrder || $[37] !== currentPropertyDialog?.editedCollectionId || $[38] !== currentPropertyDialog?.namespace || $[39] !== currentPropertyDialog?.parentCollectionIds || $[40] !== currentPropertyDialog?.propertyKey || $[41] !== snackbarController) {
     t16 = () => {
       if (!currentPropertyDialog?.propertyKey) {
         return;
@@ -9610,21 +9802,21 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
         return false;
       });
     };
-    $[36] = collectionConfigController;
-    $[37] = currentPropertyDialog?.currentPropertiesOrder;
-    $[38] = currentPropertyDialog?.editedCollectionId;
-    $[39] = currentPropertyDialog?.namespace;
-    $[40] = currentPropertyDialog?.parentCollectionIds;
-    $[41] = currentPropertyDialog?.propertyKey;
-    $[42] = snackbarController;
-    $[43] = t16;
+    $[35] = collectionConfigController;
+    $[36] = currentPropertyDialog?.currentPropertiesOrder;
+    $[37] = currentPropertyDialog?.editedCollectionId;
+    $[38] = currentPropertyDialog?.namespace;
+    $[39] = currentPropertyDialog?.parentCollectionIds;
+    $[40] = currentPropertyDialog?.propertyKey;
+    $[41] = snackbarController;
+    $[42] = t16;
   } else {
-    t16 = $[43];
+    t16 = $[42];
   }
   let t17;
   let t18;
   let t19;
-  if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
     t17 = () => {
       setCurrentPropertyDialog(void 0);
     };
@@ -9632,64 +9824,64 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
       setCurrentPropertyDialog(void 0);
     };
     t19 = {};
-    $[44] = t17;
-    $[45] = t18;
-    $[46] = t19;
+    $[43] = t17;
+    $[44] = t18;
+    $[45] = t19;
   } else {
-    t17 = $[44];
-    t18 = $[45];
-    t19 = $[46];
+    t17 = $[43];
+    t18 = $[44];
+    t19 = $[45];
   }
   let t20;
-  if ($[47] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[46] === Symbol.for("react.memo_cache_sentinel")) {
     t20 = [];
-    $[47] = t20;
+    $[46] = t20;
   } else {
-    t20 = $[47];
+    t20 = $[46];
   }
   const t21 = currentPropertyDialog?.property;
   const t22 = currentPropertyDialog?.propertyKey;
   let t23;
-  if ($[48] !== propertyConfigs || $[49] !== t10 || $[50] !== t11 || $[51] !== t12 || $[52] !== t13 || $[53] !== t14 || $[54] !== t15 || $[55] !== t16 || $[56] !== t21 || $[57] !== t22 || $[58] !== t9) {
+  if ($[47] !== propertyConfigs || $[48] !== t10 || $[49] !== t11 || $[50] !== t12 || $[51] !== t13 || $[52] !== t14 || $[53] !== t15 || $[54] !== t16 || $[55] !== t21 || $[56] !== t22 || $[57] !== t9) {
     t23 = /* @__PURE__ */ jsx(PropertyFormDialog, { open: t9, includeIdAndName: true, existingProperty: t10, autoUpdateId: t11, autoOpenTypeSelect: t12, inArray: false, collectionEditable: t13, getData: t14, onPropertyChanged: t15, onPropertyChangedImmediate: false, onDelete: t16, onError: _temp2, onOkClicked: t17, onCancel: t18, initialErrors: t19, forceShowErrors: false, existingPropertyKeys: t20, allowDataInference: true, propertyConfigs, property: t21, propertyKey: t22 });
-    $[48] = propertyConfigs;
-    $[49] = t10;
-    $[50] = t11;
-    $[51] = t12;
-    $[52] = t13;
-    $[53] = t14;
-    $[54] = t15;
-    $[55] = t16;
-    $[56] = t21;
-    $[57] = t22;
-    $[58] = t9;
-    $[59] = t23;
-  } else {
-    t23 = $[59];
+    $[47] = propertyConfigs;
+    $[48] = t10;
+    $[49] = t11;
+    $[50] = t12;
+    $[51] = t13;
+    $[52] = t14;
+    $[53] = t15;
+    $[54] = t16;
+    $[55] = t21;
+    $[56] = t22;
+    $[57] = t9;
+    $[58] = t23;
+  } else {
+    t23 = $[58];
   }
   let t24;
-  if ($[60] !== children || $[61] !== t23 || $[62] !== t5 || $[63] !== t8) {
+  if ($[59] !== children || $[60] !== t23 || $[61] !== t5 || $[62] !== t8) {
     t24 = /* @__PURE__ */ jsxs(CollectionEditorContext.Provider, { value: t5, children: [
       children,
       t8,
       t23
     ] });
-    $[60] = children;
-    $[61] = t23;
-    $[62] = t5;
-    $[63] = t8;
-    $[64] = t24;
+    $[59] = children;
+    $[60] = t23;
+    $[61] = t5;
+    $[62] = t8;
+    $[63] = t24;
   } else {
-    t24 = $[64];
+    t24 = $[63];
   }
   let t25;
-  if ($[65] !== collectionConfigController || $[66] !== t24) {
+  if ($[64] !== collectionConfigController || $[65] !== t24) {
     t25 = /* @__PURE__ */ jsx(ConfigControllerContext.Provider, { value: collectionConfigController, children: t24 });
-    $[65] = collectionConfigController;
-    $[66] = t24;
-    $[67] = t25;
+    $[64] = collectionConfigController;
+    $[65] = t24;
+    $[66] = t25;
   } else {
-    t25 = $[67];
+    t25 = $[66];
   }
   return t25;
 }, equal);
@@ -10304,7 +10496,7 @@ function NewCollectionCard(t0) {
   return t8;
 }
 function useCollectionEditorPlugin(t0) {
-  const $ = c(16);
+  const $ = c(15);
   const {
     collectionConfigController,
     configPermissions,
@@ -10314,11 +10506,10 @@ function useCollectionEditorPlugin(t0) {
     getUser,
     collectionInference,
     getData,
-    onAnalyticsEvent,
-    components
+    onAnalyticsEvent
   } = t0;
   let t1;
-  if ($[0] !== collectionConfigController || $[1] !== collectionInference || $[2] !== components || $[3] !== configPermissions || $[4] !== extraView || $[5] !== getData || $[6] !== getPathSuggestions || $[7] !== getUser || $[8] !== onAnalyticsEvent || $[9] !== reservedGroups) {
+  if ($[0] !== collectionConfigController || $[1] !== collectionInference || $[2] !== configPermissions || $[3] !== extraView || $[4] !== getData || $[5] !== getPathSuggestions || $[6] !== getUser || $[7] !== onAnalyticsEvent || $[8] !== reservedGroups) {
     t1 = {
       Component: ConfigControllerProvider,
       props: {
@@ -10330,27 +10521,25 @@ function useCollectionEditorPlugin(t0) {
         getPathSuggestions,
         getUser,
         getData,
-        onAnalyticsEvent,
-        components
+        onAnalyticsEvent
       }
     };
     $[0] = collectionConfigController;
     $[1] = collectionInference;
-    $[2] = components;
-    $[3] = configPermissions;
-    $[4] = extraView;
-    $[5] = getData;
-    $[6] = getPathSuggestions;
-    $[7] = getUser;
-    $[8] = onAnalyticsEvent;
-    $[9] = reservedGroups;
-    $[10] = t1;
+    $[2] = configPermissions;
+    $[3] = extraView;
+    $[4] = getData;
+    $[5] = getPathSuggestions;
+    $[6] = getUser;
+    $[7] = onAnalyticsEvent;
+    $[8] = reservedGroups;
+    $[9] = t1;
   } else {
-    t1 = $[10];
+    t1 = $[9];
   }
   let t2;
   let t3;
-  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
     t2 = {
       additionalActions: /* @__PURE__ */ jsx(NewCollectionButton, {}),
       additionalChildrenStart: /* @__PURE__ */ jsx(IntroWidget, {}),
@@ -10363,14 +10552,14 @@ function useCollectionEditorPlugin(t0) {
       HeaderAction: CollectionViewHeaderAction,
       AddColumnComponent: PropertyAddColumnComponent
     };
-    $[11] = t2;
-    $[12] = t3;
+    $[10] = t2;
+    $[11] = t3;
   } else {
-    t2 = $[11];
-    t3 = $[12];
+    t2 = $[10];
+    t3 = $[11];
   }
   let t4;
-  if ($[13] !== collectionConfigController.loading || $[14] !== t1) {
+  if ($[12] !== collectionConfigController.loading || $[13] !== t1) {
     t4 = {
       key: "collection_editor",
       loading: collectionConfigController.loading,
@@ -10378,11 +10567,11 @@ function useCollectionEditorPlugin(t0) {
       homePage: t2,
       collectionView: t3
     };
-    $[13] = collectionConfigController.loading;
-    $[14] = t1;
-    $[15] = t4;
+    $[12] = collectionConfigController.loading;
+    $[13] = t1;
+    $[14] = t4;
   } else {
-    t4 = $[15];
+    t4 = $[14];
   }
   return t4;
 }
@@ -10458,17 +10647,19 @@ function IntroWidget(t0) {
   }
   return t6;
 }
-const mergeCollections = (baseCollections, backendCollections, modifyCollection) => {
+const mergeCollections = (baseCollections, backendCollections = [], modifyCollection) => {
   const markAsEditable = (c2) => {
     makePropertiesEditable(c2.properties);
     c2.subcollections?.forEach(markAsEditable);
   };
-  const storedCollections = backendCollections ?? [];
-  storedCollections.forEach(markAsEditable);
-  console.debug("Collections specified in code:", baseCollections);
-  console.debug("Collections stored in the backend", storedCollections);
-  const result = joinCollectionLists(baseCollections, storedCollections, [], modifyCollection);
-  console.debug("Collections after joining:", result);
+  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
+  });
   return result;
 };
 function MissingReferenceWidget(t0) {