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

package/dist/index.es.js

@@ -1,14 +1,17 @@
 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, isEmptyObject, ConfirmationDialog, useLargeLayout, makePropertiesEditable, resolveEntityView, useAuthController, useSelectionController, CircularProgressCenter, EntityCollectionTable, slugify, randomString, removeUndefined, ErrorView, removeInitialAndTrailingSlashes, getDefaultPropertiesOrder, joinCollectionLists } from "@firecms/core";
+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 * 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, 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 { 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 * as Yup from "yup";
 import { useFormex, getIn, Field, useCreateFormex, Formex, clone } from "@firecms/formex";
 import { extractEnumFromValues, buildPropertyFromData, buildEntityPropertiesFromData } from "@firecms/schema_inference";
-import { Draggable, Droppable, DragDropContext } from "@hello-pangea/dnd";
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from "@dnd-kit/core";
+import { useSortable, sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { CSS } from "@dnd-kit/utilities";
 import JSON5 from "json5";
 import { Highlight, themes } from "prism-react-renderer";
 import { ImportFileUpload, getInferenceType, ImportNewPropertyFieldPreview, DataNewPropertiesMapping, convertDataToEntity, useImportConfig, ImportSaveInProgress } from "@firecms/data_import_export";
@@ -162,7 +165,7 @@ function LayoutModeSwitch(t0) {
   return t18;
 }
 function CollectionDetailsForm(t0) {
-  const $ = c(176);
+  const $ = c(196);
   const {
     isNewCollection,
     reservedGroups,
@@ -444,7 +447,7 @@ function CollectionDetailsForm(t0) {
   }
   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, { onClick: () => {
+    /* @__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)) }),
@@ -468,101 +471,143 @@ function CollectionDetailsForm(t0) {
   } 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" })
-    ] });
-    $[59] = t41;
-  } else {
-    t41 = $[59];
-  }
-  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 });
+  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;
-    $[61] = t43;
-    $[62] = t44;
   } else {
-    t44 = $[62];
+    t42 = $[60];
   }
-  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;
+  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: [
+      "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;
   } else {
-    t47 = $[65];
+    t45 = $[65];
   }
-  let t48;
-  if ($[66] !== t44 || $[67] !== t47) {
-    t48 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+  let t46;
+  if ($[66] !== t44) {
+    t46 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
       t44,
-      t47
+      t45
     ] });
     $[66] = t44;
-    $[67] = t47;
-    $[68] = t48;
+    $[67] = t46;
+  } else {
+    t46 = $[67];
+  }
+  let t47;
+  if ($[68] === Symbol.for("react.memo_cache_sentinel")) {
+    t47 = /* @__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;
   } else {
-    t48 = $[68];
+    t47 = $[68];
   }
-  const t49 = showErrors && Boolean(errors.singularName);
+  const t48 = !isNewCollection;
+  const t49 = showErrors && Boolean(errors.id);
   let t50;
-  if ($[69] !== handleChange || $[70] !== setFieldTouched) {
-    t50 = (e_0) => {
-      setFieldTouched("singularName", true);
-      return handleChange(e_0);
-    };
-    $[69] = handleChange;
-    $[70] = setFieldTouched;
+  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 = 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 {
-    t52 = $[75];
-  }
-  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 });
+  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;
-    $[78] = t55;
   } else {
-    t55 = $[78];
+    t54 = $[77];
   }
+  const t55 = showErrors && Boolean(errors.singularName);
   let t56;
-  if ($[79] !== t52 || $[80] !== t55) {
-    t56 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-      t52,
-      t55
-    ] });
-    $[79] = t52;
-    $[80] = t55;
-    $[81] = t56;
+  if ($[78] !== handleChange || $[79] !== setFieldTouched) {
+    t56 = (e_0) => {
+      setFieldTouched("singularName", true);
+      return handleChange(e_0);
+    };
+    $[78] = handleChange;
+    $[79] = setFieldTouched;
+    $[80] = t56;
   } else {
-    t56 = $[81];
+    t56 = $[80];
   }
-  const t57 = showErrors && Boolean(errors.sideDialogWidth);
+  const t57 = values.singularName ?? "";
   let t58;
-  if ($[82] !== setFieldTouched || $[83] !== setFieldValue) {
-    t58 = (e_1) => {
+  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;
+  } else {
+    t58 = $[84];
+  }
+  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;
+  } else {
+    t61 = $[87];
+  }
+  let t62;
+  if ($[88] !== t58 || $[89] !== t61) {
+    t62 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t58,
+      t61
+    ] });
+    $[88] = t58;
+    $[89] = t61;
+    $[90] = t62;
+  } else {
+    t62 = $[90];
+  }
+  const t63 = showErrors && Boolean(errors.sideDialogWidth);
+  let t64;
+  if ($[91] !== setFieldTouched || $[92] !== setFieldValue) {
+    t64 = (e_1) => {
       setFieldTouched("sideDialogWidth", true);
       const value_0 = e_1.target.value;
       if (!value_0) {
@@ -573,360 +618,402 @@ function CollectionDetailsForm(t0) {
         }
       }
     };
-    $[82] = setFieldTouched;
-    $[83] = setFieldValue;
-    $[84] = t58;
+    $[91] = setFieldTouched;
+    $[92] = setFieldValue;
+    $[93] = t64;
   } else {
-    t58 = $[84];
+    t64 = $[93];
   }
-  let t59;
-  if ($[85] !== setFieldValue) {
-    t59 = () => {
+  let t65;
+  if ($[94] !== setFieldValue) {
+    t65 = () => {
       setFieldValue("sideDialogWidth", null);
     };
-    $[85] = setFieldValue;
-    $[86] = t59;
+    $[94] = setFieldValue;
+    $[95] = t65;
   } else {
-    t59 = $[86];
+    t65 = $[95];
   }
-  const t60 = !values.sideDialogWidth;
-  let t61;
-  if ($[87] === Symbol.for("react.memo_cache_sentinel")) {
-    t61 = /* @__PURE__ */ jsx(CloseIcon, { size: "small" });
-    $[87] = t61;
-  } else {
-    t61 = $[87];
-  }
-  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 {
-    t62 = $[90];
-  }
-  const t63 = values.sideDialogWidth ?? "";
-  let t64;
-  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";
+  const t66 = !values.sideDialogWidth;
   let t67;
-  if ($[96] !== t65 || $[97] !== t66) {
-    t67 = /* @__PURE__ */ jsx(FieldCaption, { error: t65, children: t66 });
-    $[96] = t65;
-    $[97] = t66;
-    $[98] = t67;
+  if ($[96] === Symbol.for("react.memo_cache_sentinel")) {
+    t67 = /* @__PURE__ */ jsx(CloseIcon, { size: "small" });
+    $[96] = t67;
   } else {
-    t67 = $[98];
+    t67 = $[96];
   }
   let t68;
-  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 = values.description ?? "";
-  let t71;
-  if ($[102] !== handleChange || $[103] !== t69 || $[104] !== t70) {
-    t71 = /* @__PURE__ */ jsx(TextField, { error: t69, name: "description", value: t70, onChange: handleChange, multiline: true, minRows: 2, "aria-describedby": "description-helper-text", label: "Description" });
-    $[102] = handleChange;
+  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;
-    $[105] = t71;
   } else {
-    t71 = $[105];
+    t70 = $[104];
   }
-  const t72 = showErrors && Boolean(errors.description);
-  const t73 = showErrors && Boolean(errors.description) ? errors.description : "Description of the collection, you can use markdown";
-  let t74;
-  if ($[106] !== t72 || $[107] !== t73) {
-    t74 = /* @__PURE__ */ jsx(FieldCaption, { error: t72, children: t73 });
+  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;
-    $[108] = t74;
   } else {
-    t74 = $[108];
+    t73 = $[107];
   }
-  let t75;
-  if ($[109] !== t71 || $[110] !== t74) {
-    t75 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-      t71,
-      t74
+  let t74;
+  if ($[108] !== t70 || $[109] !== t73) {
+    t74 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t70,
+      t73
     ] });
-    $[109] = t71;
+    $[108] = t70;
+    $[109] = t73;
     $[110] = t74;
-    $[111] = t75;
   } else {
-    t75 = $[111];
+    t74 = $[110];
   }
-  const t76 = values.defaultSize ?? "";
+  const t75 = showErrors && Boolean(errors.description);
+  const t76 = values.description ?? "";
   let t77;
-  if ($[112] === Symbol.for("react.memo_cache_sentinel")) {
-    t77 = ["xs", "s", "m", "l", "xl"].map(_temp2$7);
-    $[112] = 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;
   } else {
-    t77 = $[112];
+    t77 = $[114];
   }
-  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";
+  const t78 = showErrors && Boolean(errors.description);
+  const t79 = showErrors && Boolean(errors.description) ? errors.description : "Description of the collection, you can use markdown";
   let t80;
-  if ($[116] !== setFieldValue) {
-    t80 = (v) => {
-      if (v === "code_defined") {
-        throw new Error("This should not happen");
-      }
-      setFieldValue("customId", v);
-    };
-    $[116] = setFieldValue;
+  if ($[115] !== t78 || $[116] !== t79) {
+    t80 = /* @__PURE__ */ jsx(FieldCaption, { error: t78, children: t79 });
+    $[115] = t78;
+    $[116] = t79;
     $[117] = t80;
   } else {
     t80 = $[117];
   }
-  const t81 = customIdValue ?? "";
-  let t82;
+  let t81;
+  if ($[118] !== t77 || $[119] !== t80) {
+    t81 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t77,
+      t80
+    ] });
+    $[118] = t77;
+    $[119] = t80;
+    $[120] = t81;
+  } else {
+    t81 = $[120];
+  }
+  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;
+  } else {
+    t83 = $[121];
+  }
   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];
-  }
-  let 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;
+  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;
   } else {
-    t85 = $[124];
+    t84 = $[124];
   }
+  const t85 = values.includeJsonView === void 0 || values.includeJsonView ? "Include JSON view" : "Do not include JSON view";
   let t86;
   if ($[125] !== setFieldValue) {
-    t86 = (v_0) => setFieldValue("collectionGroup", v_0);
+    t86 = (v_0) => setFieldValue("includeJsonView", v_0);
     $[125] = setFieldValue;
     $[126] = t86;
   } else {
     t86 = $[126];
   }
-  const t87 = values.collectionGroup ?? false;
+  const t87 = values.includeJsonView === void 0 ? true : values.includeJsonView;
   let t88;
-  if ($[127] !== t86 || $[128] !== t87) {
-    t88 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", size: "large", label: "Collection group", onValueChange: t86, value: t87 });
-    $[127] = t86;
-    $[128] = t87;
-    $[129] = 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 = $[129];
+    t88 = $[130];
   }
   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;
+  if ($[131] === Symbol.for("react.memo_cache_sentinel")) {
+    t89 = /* @__PURE__ */ jsx(FieldCaption, { children: "Include the JSON representation of the document." });
+    $[131] = t89;
   } else {
-    t89 = $[130];
+    t89 = $[131];
   }
   let t90;
-  if ($[131] !== t88) {
-    t90 = /* @__PURE__ */ jsxs("div", { className: "col-span-12 mt-4", children: [
+  if ($[132] !== t88) {
+    t90 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
       t88,
       t89
     ] });
-    $[131] = t88;
-    $[132] = t90;
+    $[132] = t88;
+    $[133] = t90;
   } else {
-    t90 = $[132];
+    t90 = $[133];
   }
-  let t91;
-  if ($[133] !== setFieldValue) {
-    t91 = (v_1) => setFieldValue("textSearchEnabled", v_1);
-    $[133] = setFieldValue;
-    $[134] = t91;
+  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;
   } else {
-    t91 = $[134];
+    t92 = $[135];
   }
-  const t92 = values.textSearchEnabled ?? false;
-  let t93;
-  if ($[135] !== t91 || $[136] !== t92) {
-    t93 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", size: "large", label: "Enable text search for this collection", onValueChange: t91, value: t92 });
-    $[135] = t91;
-    $[136] = t92;
-    $[137] = t93;
+  const t93 = customIdValue ?? "";
+  let t94;
+  let t95;
+  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];
+  }
+  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;
   } else {
-    t93 = $[137];
+    t97 = $[142];
   }
-  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;
+  let t98;
+  if ($[143] !== setFieldValue) {
+    t98 = (v_2) => setFieldValue("collectionGroup", v_2);
+    $[143] = setFieldValue;
+    $[144] = t98;
   } else {
-    t94 = $[138];
+    t98 = $[144];
   }
-  let t95;
-  if ($[139] !== t93) {
-    t95 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-      t93,
-      t94
-    ] });
-    $[139] = t93;
-    $[140] = t95;
+  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;
   } else {
-    t95 = $[140];
+    t100 = $[147];
   }
-  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,
-      t78,
-      t85,
-      t90,
-      t95
-    ] });
-    $[141] = t48;
-    $[142] = t56;
-    $[143] = t68;
-    $[144] = t75;
-    $[145] = t78;
-    $[146] = t85;
-    $[147] = t90;
-    $[148] = t95;
-    $[149] = t96;
-  } else {
-    t96 = $[149];
+  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;
+  } else {
+    t101 = $[148];
   }
-  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;
+  let t102;
+  if ($[149] !== t100) {
+    t102 = /* @__PURE__ */ jsxs("div", { className: "col-span-12 mt-4", children: [
+      t100,
+      t101
+    ] });
+    $[149] = t100;
+    $[150] = t102;
   } else {
-    t97 = $[152];
+    t102 = $[150];
   }
-  let t98;
-  if ($[153] !== children || $[154] !== t97) {
-    t98 = /* @__PURE__ */ jsxs("div", { className: "col-span-12 mt-8", children: [
+  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,
       children
     ] });
-    $[153] = children;
-    $[154] = t97;
-    $[155] = t98;
+    $[172] = children;
+    $[173] = t109;
+    $[174] = t110;
   } else {
-    t98 = $[155];
+    t110 = $[174];
   }
-  let t99;
-  if ($[156] !== t27 || $[157] !== t36 || $[158] !== t37 || $[159] !== t40 || $[160] !== t98) {
-    t99 = /* @__PURE__ */ jsxs("div", { className: t19, children: [
+  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,
       t40,
-      t98
+      t46,
+      t110
     ] });
-    $[156] = t27;
-    $[157] = t36;
-    $[158] = t37;
-    $[159] = t40;
-    $[160] = t98;
-    $[161] = t99;
-  } else {
-    t99 = $[161];
-  }
-  let t100;
-  if ($[162] === Symbol.for("react.memo_cache_sentinel")) {
-    t100 = /* @__PURE__ */ jsx("div", { style: {
+    $[175] = t110;
+    $[176] = t27;
+    $[177] = t36;
+    $[178] = t37;
+    $[179] = t40;
+    $[180] = t46;
+    $[181] = t111;
+  } else {
+    t111 = $[181];
+  }
+  let t112;
+  if ($[182] === Symbol.for("react.memo_cache_sentinel")) {
+    t112 = /* @__PURE__ */ jsx("div", { style: {
       height: "52px"
     } });
-    $[162] = t100;
+    $[182] = t112;
   } else {
-    t100 = $[162];
+    t112 = $[182];
   }
-  let t101;
-  if ($[163] !== setFieldValue) {
-    t101 = (icon) => {
+  let t113;
+  if ($[183] !== setFieldValue) {
+    t113 = (icon) => {
       setIconDialogOpen(false);
       setFieldValue("icon", icon);
     };
-    $[163] = setFieldValue;
-    $[164] = t101;
+    $[183] = setFieldValue;
+    $[184] = t113;
   } else {
-    t101 = $[164];
+    t113 = $[184];
   }
-  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;
+  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;
   } else {
-    t102 = $[167];
+    t114 = $[187];
   }
-  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;
+  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;
   } else {
-    t103 = $[170];
+    t115 = $[190];
   }
-  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: [
+  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,
-      t99,
-      t100,
-      t103
+      t111,
+      t112,
+      t115
     ] }) });
-    $[171] = T0;
-    $[172] = t103;
-    $[173] = t18;
-    $[174] = t99;
-    $[175] = t104;
+    $[191] = T0;
+    $[192] = t111;
+    $[193] = t115;
+    $[194] = t18;
+    $[195] = t116;
   } else {
-    t104 = $[175];
+    t116 = $[195];
   }
-  return t104;
+  return t116;
 }
 function _temp3$4(value_3) {
   if (value_3 === "code_defined") {
@@ -2687,7 +2774,7 @@ function NonEditablePropertyPreview(t0) {
   return t19;
 }
 const PropertyTree = React__default.memo(function PropertyTree2(t0) {
-  const $ = c(26);
+  const $ = c(37);
   const {
     namespace,
     selectedPropertyKey,
@@ -2713,94 +2800,152 @@ const PropertyTree = React__default.memo(function PropertyTree2(t0) {
   }
   const propertiesOrder = t1;
   let t2;
-  if ($[3] !== namespace || $[4] !== onPropertyMove || $[5] !== propertiesOrder) {
-    t2 = (result) => {
-      if (!result.destination) {
-        return;
-      }
-      const startIndex = result.source.index;
-      const endIndex = result.destination.index;
-      const newPropertiesOrder = Array.from(propertiesOrder);
-      const [removed] = newPropertiesOrder.splice(startIndex, 1);
-      newPropertiesOrder.splice(endIndex, 0, removed);
-      if (onPropertyMove) {
-        onPropertyMove(newPropertiesOrder, namespace);
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = {
+      activationConstraint: {
+        distance: 5
       }
     };
-    $[3] = namespace;
-    $[4] = onPropertyMove;
-    $[5] = propertiesOrder;
-    $[6] = t2;
+    $[3] = t2;
   } else {
-    t2 = $[6];
+    t2 = $[3];
   }
-  const onDragEnd = t2;
-  const t3 = `droppable_${namespace}`;
+  let t3;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {
+      coordinateGetter: sortableKeyboardCoordinates
+    };
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  const sensors = useSensors(useSensor(PointerSensor, t2), useSensor(KeyboardSensor, t3));
   let t4;
-  if ($[7] !== additionalFields || $[8] !== className || $[9] !== collectionEditable || $[10] !== errors || $[11] !== inferredPropertyKeys || $[12] !== namespace || $[13] !== onPropertyClick || $[14] !== onPropertyMove || $[15] !== onPropertyRemove || $[16] !== properties || $[17] !== propertiesOrder || $[18] !== selectedPropertyKey) {
-    t4 = (droppableProvided, droppableSnapshot) => /* @__PURE__ */ jsxs("div", { ...droppableProvided.droppableProps, ref: droppableProvided.innerRef, className, children: [
-      propertiesOrder && propertiesOrder.map((propertyKey, index) => {
-        const property = properties[propertyKey];
-        const additionalField = additionalFields?.find((field) => field.key === propertyKey);
-        if (!property && !additionalField) {
-          console.warn(`Property ${propertyKey} not found in properties or additionalFields`);
-          return null;
+  if ($[5] !== namespace || $[6] !== onPropertyMove || $[7] !== propertiesOrder) {
+    t4 = (event) => {
+      const {
+        active,
+        over
+      } = event;
+      if (!over || active.id === over.id) {
+        return;
+      }
+      const activeId = String(active.id);
+      const overId = String(over.id);
+      const activeKey = activeId.includes(".") ? activeId.split(".").pop() : activeId;
+      const overKey = overId.includes(".") ? overId.split(".").pop() : overId;
+      if (!activeKey || !overKey) {
+        return;
+      }
+      const oldIndex = propertiesOrder.indexOf(activeKey);
+      const newIndex = propertiesOrder.indexOf(overKey);
+      if (oldIndex !== -1 && newIndex !== -1) {
+        const newPropertiesOrder = [...propertiesOrder];
+        const [removed] = newPropertiesOrder.splice(oldIndex, 1);
+        newPropertiesOrder.splice(newIndex, 0, removed);
+        if (onPropertyMove) {
+          onPropertyMove(newPropertiesOrder, namespace);
         }
-        return /* @__PURE__ */ jsx(Draggable, { draggableId: `array_field_${namespace}_${propertyKey}}`, index, children: (provided, snapshot) => /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(PropertyTreeEntry, { propertyKey, propertyOrBuilder: property, additionalField, provided, errors, namespace, inferredPropertyKeys, onPropertyMove, onPropertyRemove, onPropertyClick: snapshot.isDragging ? void 0 : onPropertyClick, selectedPropertyKey, collectionEditable }) }) }, `array_field_${namespace}_${propertyKey}}`);
-      }).filter(Boolean),
-      droppableProvided.placeholder
-    ] });
-    $[7] = additionalFields;
-    $[8] = className;
-    $[9] = collectionEditable;
-    $[10] = errors;
-    $[11] = inferredPropertyKeys;
-    $[12] = namespace;
-    $[13] = onPropertyClick;
-    $[14] = onPropertyMove;
-    $[15] = onPropertyRemove;
-    $[16] = properties;
-    $[17] = propertiesOrder;
-    $[18] = selectedPropertyKey;
-    $[19] = t4;
-  } else {
-    t4 = $[19];
+      }
+    };
+    $[5] = namespace;
+    $[6] = onPropertyMove;
+    $[7] = propertiesOrder;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
   }
+  const handleDragEnd = t4;
   let t5;
-  if ($[20] !== t3 || $[21] !== t4) {
-    t5 = /* @__PURE__ */ jsx(Droppable, { droppableId: t3, children: t4 });
-    $[20] = t3;
-    $[21] = t4;
-    $[22] = t5;
+  if ($[9] !== namespace || $[10] !== propertiesOrder) {
+    let t62;
+    if ($[12] !== namespace) {
+      t62 = (key) => getFullId(key, namespace);
+      $[12] = namespace;
+      $[13] = t62;
+    } else {
+      t62 = $[13];
+    }
+    t5 = propertiesOrder.map(t62);
+    $[9] = namespace;
+    $[10] = propertiesOrder;
+    $[11] = t5;
   } else {
-    t5 = $[22];
+    t5 = $[11];
   }
+  const items = t5;
   let t6;
-  if ($[23] !== onDragEnd || $[24] !== t5) {
-    t6 = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(DragDropContext, { onDragEnd, children: t5 }) });
-    $[23] = onDragEnd;
-    $[24] = t5;
-    $[25] = t6;
+  if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = [restrictToVerticalAxis];
+    $[14] = t6;
   } else {
-    t6 = $[25];
+    t6 = $[14];
   }
-  return t6;
-}, (prevProps, nextProps) => {
-  const isSelected = nextProps.selectedPropertyKey?.startsWith(nextProps.namespace ?? "");
-  const wasSelected = prevProps.selectedPropertyKey?.startsWith(prevProps.namespace ?? "");
-  if (isSelected || wasSelected) return false;
-  return equal(prevProps.properties, nextProps.properties) && prevProps.propertiesOrder === nextProps.propertiesOrder && equal(prevProps.additionalFields, nextProps.additionalFields) && equal(prevProps.errors, nextProps.errors) && equal(prevProps.onPropertyClick, nextProps.onPropertyClick) && // equal(prevProps.onPropertyMove, nextProps.onPropertyMove) &&
-  // equal(prevProps.onPropertyRemove, nextProps.onPropertyRemove) &&
-  prevProps.namespace === nextProps.namespace && prevProps.collectionEditable === nextProps.collectionEditable;
-});
+  let t7;
+  if ($[15] !== additionalFields || $[16] !== collectionEditable || $[17] !== errors || $[18] !== inferredPropertyKeys || $[19] !== namespace || $[20] !== onPropertyClick || $[21] !== onPropertyMove || $[22] !== onPropertyRemove || $[23] !== properties || $[24] !== propertiesOrder || $[25] !== selectedPropertyKey) {
+    t7 = propertiesOrder && propertiesOrder.map((propertyKey, index) => {
+      const property = properties[propertyKey];
+      const additionalField = additionalFields?.find((field) => field.key === propertyKey);
+      if (!property && !additionalField) {
+        console.warn(`Property ${propertyKey} not found in properties or additionalFields`);
+        return null;
+      }
+      const id = getFullId(propertyKey, namespace);
+      return /* @__PURE__ */ jsx(PropertyTreeEntry, { id, propertyKey, propertyOrBuilder: property, additionalField, errors, namespace, inferredPropertyKeys, onPropertyMove, onPropertyRemove, onPropertyClick, selectedPropertyKey, collectionEditable }, id);
+    }).filter(Boolean);
+    $[15] = additionalFields;
+    $[16] = collectionEditable;
+    $[17] = errors;
+    $[18] = inferredPropertyKeys;
+    $[19] = namespace;
+    $[20] = onPropertyClick;
+    $[21] = onPropertyMove;
+    $[22] = onPropertyRemove;
+    $[23] = properties;
+    $[24] = propertiesOrder;
+    $[25] = selectedPropertyKey;
+    $[26] = t7;
+  } else {
+    t7 = $[26];
+  }
+  let t8;
+  if ($[27] !== className || $[28] !== t7) {
+    t8 = /* @__PURE__ */ jsx("div", { className, children: t7 });
+    $[27] = className;
+    $[28] = t7;
+    $[29] = t8;
+  } else {
+    t8 = $[29];
+  }
+  let t9;
+  if ($[30] !== items || $[31] !== t8) {
+    t9 = /* @__PURE__ */ jsx(SortableContext, { items, strategy: verticalListSortingStrategy, children: t8 });
+    $[30] = items;
+    $[31] = t8;
+    $[32] = t9;
+  } else {
+    t9 = $[32];
+  }
+  let t10;
+  if ($[33] !== handleDragEnd || $[34] !== sensors || $[35] !== t9) {
+    t10 = /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, modifiers: t6, children: t9 });
+    $[33] = handleDragEnd;
+    $[34] = sensors;
+    $[35] = t9;
+    $[36] = t10;
+  } else {
+    t10 = $[36];
+  }
+  return t10;
+}, equal);
 function PropertyTreeEntry(t0) {
-  const $ = c(53);
+  const $ = c(62);
   const {
+    id,
     propertyKey,
     namespace,
     propertyOrBuilder,
     additionalField,
-    provided,
     selectedPropertyKey,
     errors,
     onPropertyClick,
@@ -2810,157 +2955,201 @@ function PropertyTreeEntry(t0) {
     collectionEditable
   } = t0;
   let t1;
-  if ($[0] !== inferredPropertyKeys || $[1] !== namespace || $[2] !== propertyKey) {
-    t1 = inferredPropertyKeys?.includes(namespace ? `${namespace}.${propertyKey}` : propertyKey);
-    $[0] = inferredPropertyKeys;
-    $[1] = namespace;
-    $[2] = propertyKey;
-    $[3] = t1;
+  if ($[0] !== id) {
+    t1 = {
+      id
+    };
+    $[0] = id;
+    $[1] = t1;
   } else {
-    t1 = $[3];
+    t1 = $[1];
   }
-  const isPropertyInferred = t1;
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable(t1);
   let t2;
-  if ($[4] !== namespace || $[5] !== propertyKey) {
-    t2 = getFullId(propertyKey, namespace);
-    $[4] = namespace;
-    $[5] = propertyKey;
-    $[6] = t2;
+  if ($[2] !== transform) {
+    t2 = CSS.Translate.toString(transform);
+    $[2] = transform;
+    $[3] = t2;
   } else {
-    t2 = $[6];
+    t2 = $[3];
   }
-  const fullId = t2;
+  const t3 = isDragging ? 10 : void 0;
+  let t4;
+  if ($[4] !== t2 || $[5] !== t3 || $[6] !== transition) {
+    t4 = {
+      transform: t2,
+      transition,
+      zIndex: t3,
+      position: "relative"
+    };
+    $[4] = t2;
+    $[5] = t3;
+    $[6] = transition;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  const style = t4;
+  let t5;
+  if ($[8] !== inferredPropertyKeys || $[9] !== namespace || $[10] !== propertyKey) {
+    t5 = inferredPropertyKeys?.includes(namespace ? `${namespace}.${propertyKey}` : propertyKey);
+    $[8] = inferredPropertyKeys;
+    $[9] = namespace;
+    $[10] = propertyKey;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  const isPropertyInferred = t5;
+  const fullId = id;
   const fullIdPath = getFullIdPath(propertyKey, namespace);
   const hasError = fullIdPath in errors;
   let subtree;
   if (typeof propertyOrBuilder === "object") {
     const property = propertyOrBuilder;
     if (property.dataType === "map" && property.properties) {
-      let t32;
-      if ($[7] !== collectionEditable || $[8] !== errors || $[9] !== fullId || $[10] !== onPropertyClick || $[11] !== onPropertyMove || $[12] !== onPropertyRemove || $[13] !== property.properties || $[14] !== property.propertiesOrder || $[15] !== selectedPropertyKey) {
-        t32 = /* @__PURE__ */ jsx(PropertyTree, { selectedPropertyKey, namespace: fullId, properties: property.properties, propertiesOrder: property.propertiesOrder, errors, onPropertyClick, onPropertyMove, onPropertyRemove, collectionEditable });
-        $[7] = collectionEditable;
-        $[8] = errors;
-        $[9] = fullId;
-        $[10] = onPropertyClick;
-        $[11] = onPropertyMove;
-        $[12] = onPropertyRemove;
-        $[13] = property.properties;
-        $[14] = property.propertiesOrder;
-        $[15] = selectedPropertyKey;
-        $[16] = t32;
+      let t62;
+      if ($[12] !== collectionEditable || $[13] !== errors || $[14] !== fullId || $[15] !== onPropertyClick || $[16] !== onPropertyMove || $[17] !== onPropertyRemove || $[18] !== property.properties || $[19] !== property.propertiesOrder || $[20] !== selectedPropertyKey) {
+        t62 = /* @__PURE__ */ jsx(PropertyTree, { selectedPropertyKey, namespace: fullId, properties: property.properties, propertiesOrder: property.propertiesOrder, errors, onPropertyClick, onPropertyMove, onPropertyRemove, collectionEditable });
+        $[12] = collectionEditable;
+        $[13] = errors;
+        $[14] = fullId;
+        $[15] = onPropertyClick;
+        $[16] = onPropertyMove;
+        $[17] = onPropertyRemove;
+        $[18] = property.properties;
+        $[19] = property.propertiesOrder;
+        $[20] = selectedPropertyKey;
+        $[21] = t62;
       } else {
-        t32 = $[16];
+        t62 = $[21];
       }
-      subtree = t32;
+      subtree = t62;
     }
   }
   const selected = selectedPropertyKey === fullId;
-  let t3;
-  if ($[17] !== collectionEditable || $[18] !== propertyOrBuilder) {
-    t3 = propertyOrBuilder && (collectionEditable && !isPropertyBuilder(propertyOrBuilder) || editableProperty(propertyOrBuilder));
-    $[17] = collectionEditable;
-    $[18] = propertyOrBuilder;
-    $[19] = t3;
+  let t6;
+  if ($[22] !== collectionEditable || $[23] !== propertyOrBuilder) {
+    t6 = propertyOrBuilder && (collectionEditable && !isPropertyBuilder(propertyOrBuilder) || editableProperty(propertyOrBuilder));
+    $[22] = collectionEditable;
+    $[23] = propertyOrBuilder;
+    $[24] = t6;
   } else {
-    t3 = $[19];
+    t6 = $[24];
   }
-  const editable = t3;
-  let t4;
-  if ($[20] !== subtree) {
-    t4 = subtree && /* @__PURE__ */ jsx("div", { className: "absolute border-l " + defaultBorderMixin, style: {
+  const editable = t6;
+  let t7;
+  if ($[25] !== subtree) {
+    t7 = subtree && /* @__PURE__ */ jsx("div", { className: "absolute border-l " + defaultBorderMixin, style: {
       left: "32px",
       top: "64px",
       bottom: "16px"
     } });
-    $[20] = subtree;
-    $[21] = t4;
+    $[25] = subtree;
+    $[26] = t7;
   } else {
-    t4 = $[21];
+    t7 = $[26];
   }
-  let t5;
-  if ($[22] !== additionalField || $[23] !== editable || $[24] !== hasError || $[25] !== namespace || $[26] !== onPropertyClick || $[27] !== propertyKey || $[28] !== propertyOrBuilder || $[29] !== selected) {
-    t5 = !isPropertyBuilder(propertyOrBuilder) && !additionalField && editable ? /* @__PURE__ */ jsx(PropertyFieldPreview, { property: propertyOrBuilder, onClick: onPropertyClick ? () => onPropertyClick(propertyKey, namespace) : void 0, includeName: true, selected, hasError }) : /* @__PURE__ */ jsx(NonEditablePropertyPreview, { name: propertyKey, property: propertyOrBuilder, onClick: onPropertyClick ? () => onPropertyClick(propertyKey, namespace) : void 0, selected });
-    $[22] = additionalField;
-    $[23] = editable;
-    $[24] = hasError;
-    $[25] = namespace;
-    $[26] = onPropertyClick;
-    $[27] = propertyKey;
-    $[28] = propertyOrBuilder;
-    $[29] = selected;
-    $[30] = t5;
-  } else {
-    t5 = $[30];
+  let t8;
+  if ($[27] !== additionalField || $[28] !== editable || $[29] !== hasError || $[30] !== namespace || $[31] !== onPropertyClick || $[32] !== propertyKey || $[33] !== propertyOrBuilder || $[34] !== selected) {
+    t8 = /* @__PURE__ */ jsx("div", { children: !isPropertyBuilder(propertyOrBuilder) && !additionalField && editable ? /* @__PURE__ */ jsx(PropertyFieldPreview, { property: propertyOrBuilder, onClick: onPropertyClick ? () => onPropertyClick(propertyKey, namespace) : void 0, includeName: true, selected, hasError }) : /* @__PURE__ */ jsx(NonEditablePropertyPreview, { name: propertyKey, property: propertyOrBuilder, onClick: onPropertyClick ? () => onPropertyClick(propertyKey, namespace) : void 0, selected }) });
+    $[27] = additionalField;
+    $[28] = editable;
+    $[29] = hasError;
+    $[30] = namespace;
+    $[31] = onPropertyClick;
+    $[32] = propertyKey;
+    $[33] = propertyOrBuilder;
+    $[34] = selected;
+    $[35] = t8;
+  } else {
+    t8 = $[35];
   }
-  let t6;
-  if ($[31] !== isPropertyInferred) {
-    t6 = isPropertyInferred && /* @__PURE__ */ jsx(Tooltip, { title: "Inferred property", children: /* @__PURE__ */ jsx(AutorenewIcon, { size: "small", className: "p-2" }) });
-    $[31] = isPropertyInferred;
-    $[32] = t6;
+  let t9;
+  if ($[36] !== isPropertyInferred) {
+    t9 = isPropertyInferred && /* @__PURE__ */ jsx(Tooltip, { title: "Inferred property", children: /* @__PURE__ */ jsx(AutorenewIcon, { size: "small", className: "p-2" }) });
+    $[36] = isPropertyInferred;
+    $[37] = t9;
   } else {
-    t6 = $[32];
+    t9 = $[37];
   }
-  let t7;
-  if ($[33] !== namespace || $[34] !== onPropertyRemove || $[35] !== propertyKey) {
-    t7 = onPropertyRemove && /* @__PURE__ */ jsx(Tooltip, { title: "Remove", asChild: true, children: /* @__PURE__ */ jsx(IconButton, { size: "small", color: "inherit", onClick: () => onPropertyRemove(propertyKey, namespace), children: /* @__PURE__ */ jsx(RemoveIcon, { size: "small" }) }) });
-    $[33] = namespace;
-    $[34] = onPropertyRemove;
-    $[35] = propertyKey;
-    $[36] = t7;
+  let t10;
+  if ($[38] !== isPropertyInferred || $[39] !== namespace || $[40] !== onPropertyRemove || $[41] !== propertyKey) {
+    t10 = onPropertyRemove && !isPropertyInferred && /* @__PURE__ */ jsx(Tooltip, { title: "Remove", asChild: true, children: /* @__PURE__ */ jsx(IconButton, { size: "small", color: "inherit", onClick: () => onPropertyRemove(propertyKey, namespace), children: /* @__PURE__ */ jsx(RemoveIcon, { size: "small" }) }) });
+    $[38] = isPropertyInferred;
+    $[39] = namespace;
+    $[40] = onPropertyRemove;
+    $[41] = propertyKey;
+    $[42] = t10;
   } else {
-    t7 = $[36];
+    t10 = $[42];
   }
-  let t8;
-  if ($[37] !== onPropertyMove) {
-    t8 = onPropertyMove && /* @__PURE__ */ jsx(Tooltip, { title: "Move", asChild: true, children: /* @__PURE__ */ jsx(IconButton, { component: "span", size: "small", children: /* @__PURE__ */ jsx(DragHandleIcon, { size: "small" }) }) });
-    $[37] = onPropertyMove;
-    $[38] = t8;
+  let t11;
+  if ($[43] !== attributes || $[44] !== listeners || $[45] !== onPropertyMove) {
+    t11 = onPropertyMove && /* @__PURE__ */ jsx(Tooltip, { title: "Move", asChild: true, children: /* @__PURE__ */ jsx(IconButton, { component: "span", size: "small", ...attributes, ...listeners, children: /* @__PURE__ */ jsx(DragHandleIcon, { size: "small" }) }) });
+    $[43] = attributes;
+    $[44] = listeners;
+    $[45] = onPropertyMove;
+    $[46] = t11;
   } else {
-    t8 = $[38];
+    t11 = $[46];
   }
-  let t9;
-  if ($[39] !== t6 || $[40] !== t7 || $[41] !== t8) {
-    t9 = /* @__PURE__ */ jsxs("div", { className: "absolute top-2 right-2 flex flex-row ", children: [
-      t6,
-      t7,
-      t8
+  let t12;
+  if ($[47] !== t10 || $[48] !== t11 || $[49] !== t9) {
+    t12 = /* @__PURE__ */ jsxs("div", { className: "absolute top-2 right-2 flex flex-row", children: [
+      t9,
+      t10,
+      t11
     ] });
-    $[39] = t6;
-    $[40] = t7;
-    $[41] = t8;
-    $[42] = t9;
+    $[47] = t10;
+    $[48] = t11;
+    $[49] = t9;
+    $[50] = t12;
   } else {
-    t9 = $[42];
+    t12 = $[50];
   }
-  let t10;
-  if ($[43] !== subtree) {
-    t10 = subtree && /* @__PURE__ */ jsx("div", { className: "ml-16", children: subtree });
-    $[43] = subtree;
-    $[44] = t10;
+  let t13;
+  if ($[51] !== subtree) {
+    t13 = subtree && /* @__PURE__ */ jsx("div", { className: "ml-16", children: subtree });
+    $[51] = subtree;
+    $[52] = t13;
   } else {
-    t10 = $[44];
+    t13 = $[52];
   }
-  let t11;
-  if ($[45] !== provided.dragHandleProps || $[46] !== provided.draggableProps || $[47] !== provided.innerRef || $[48] !== t10 || $[49] !== t4 || $[50] !== t5 || $[51] !== t9) {
-    t11 = /* @__PURE__ */ jsxs("div", { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, className: "relative -ml-8", children: [
-      t4,
-      t5,
-      t9,
-      t10
+  let t14;
+  if ($[53] !== t12 || $[54] !== t13 || $[55] !== t7 || $[56] !== t8) {
+    t14 = /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      t7,
+      t8,
+      t12,
+      t13
     ] });
-    $[45] = provided.dragHandleProps;
-    $[46] = provided.draggableProps;
-    $[47] = provided.innerRef;
-    $[48] = t10;
-    $[49] = t4;
-    $[50] = t5;
-    $[51] = t9;
-    $[52] = t11;
+    $[53] = t12;
+    $[54] = t13;
+    $[55] = t7;
+    $[56] = t8;
+    $[57] = t14;
   } else {
-    t11 = $[52];
+    t14 = $[57];
   }
-  return t11;
+  let t15;
+  if ($[58] !== setNodeRef || $[59] !== style || $[60] !== t14) {
+    t15 = /* @__PURE__ */ jsx("div", { ref: setNodeRef, style, className: "relative -ml-8", children: t14 });
+    $[58] = setNodeRef;
+    $[59] = style;
+    $[60] = t14;
+    $[61] = t15;
+  } else {
+    t15 = $[61];
+  }
+  return t15;
 }
 function MapPropertyField(t0) {
   const $ = c(67);
@@ -3174,7 +3363,7 @@ function MapPropertyField(t0) {
   const t19 = values.spreadChildren ?? false;
   let t20;
   if ($[40] !== t18 || $[41] !== t19) {
-    t20 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", size: "small", label: "Spread children as columns", onValueChange: t18, value: t19 });
+    t20 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", size: "medium", label: "Spread children as columns", onValueChange: t18, value: t19 });
     $[40] = t18;
     $[41] = t19;
     $[42] = t20;
@@ -4646,7 +4835,7 @@ function AdvancedPropertyValidation(t0) {
         field,
         form
       } = t22;
-      return /* @__PURE__ */ jsx(SwitchControl, { label: "Hide from collection", disabled, form, tooltip: "Hide this field from the collection view. It will still be visible in the form view", field });
+      return /* @__PURE__ */ jsx(SwitchControl, { label: "Hide from collection", size: "medium", disabled, form, tooltip: "Hide this field from the collection view. It will still be visible in the form view", field });
     } }) });
     $[0] = disabled;
     $[1] = t1;
@@ -4660,7 +4849,7 @@ function AdvancedPropertyValidation(t0) {
         field: field_0,
         form: form_0
       } = t32;
-      return /* @__PURE__ */ jsx(SwitchControl, { label: "Read only", disabled, tooltip: "Is this a read only field. Display only as a preview", form: form_0, field: field_0 });
+      return /* @__PURE__ */ jsx(SwitchControl, { label: "Read only", size: "medium", disabled, tooltip: "Is this a read only field. Display only as a preview", form: form_0, field: field_0 });
     } }) });
     $[2] = disabled;
     $[3] = t2;
@@ -5793,7 +5982,7 @@ function PropertyEditFormFields(t0) {
   let t6;
   if ($[14] !== errors || $[15] !== onError || $[16] !== propertyNamespace || $[17] !== values?.id) {
     t6 = () => {
-      if (values?.id && onError && !isEmptyObject(errors)) {
+      if (values?.id && onError) {
         onError(values?.id, propertyNamespace, errors);
       }
     };
@@ -6970,8 +7159,8 @@ function CollectionPropertiesEditorForm({
     setSelectedPropertyKey(propertyKey_2);
     setSelectedPropertyNamespace(namespace_5);
   };
-  const body = /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-2 h-full bg-surface-50 dark:bg-surface-900", children: [
-    /* @__PURE__ */ jsxs("div", { className: cls("p-4 md:p-8 pb-20 md:pb-20", "col-span-12 lg:col-span-5 h-full overflow-auto", !asDialog && "border-r " + defaultBorderMixin), children: [
+  const body = /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-2 h-full bg-white dark:bg-surface-950", children: [
+    /* @__PURE__ */ jsxs("div", { className: cls("bg-surface-50 dark:bg-surface-900", "p-4 md:p-8 pb-20 md:pb-20", "col-span-12 lg:col-span-5 h-full overflow-auto", !asDialog && "border-r " + defaultBorderMixin), children: [
       /* @__PURE__ */ jsxs("div", { className: "flex my-2", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex-grow mb-4", children: [
           /* @__PURE__ */ jsx(Field, { name: "name", as: DebouncedTextField, invisible: true, className: "-ml-1", inputClassName: "text-2xl font-headers", placeholder: "Collection name", size: "small", required: true, error: Boolean(errors?.name) }),
@@ -6990,7 +7179,7 @@ function CollectionPropertiesEditorForm({
       /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(PropertyTree, { className: "pl-8", inferredPropertyKeys, selectedPropertyKey: selectedPropertyKey ? getFullId(selectedPropertyKey, selectedPropertyNamespace) : void 0, properties: values.properties, additionalFields: values.additionalFields, propertiesOrder: usedPropertiesOrder, onPropertyClick, onPropertyMove, onPropertyRemove: isNewCollection ? deleteProperty : void 0, collectionEditable, errors }) }),
       /* @__PURE__ */ jsx(Button, { className: "mt-8 w-full", color: "primary", variant: "outlined", size: "large", onClick: () => setNewPropertyDialogOpen(true), startIcon: /* @__PURE__ */ jsx(AddIcon, {}), children: "Add new property" })
     ] }),
-    !asDialog && /* @__PURE__ */ jsx("div", { className: "col-span-12 lg:col-span-7 p-4 md:py-8 md:px-4 h-full overflow-auto pb-20 md:pb-20", children: /* @__PURE__ */ jsxs(Paper, { className: "sticky top-8 p-4 min-h-full border border-transparent w-full flex flex-col justify-center ", children: [
+    !asDialog && /* @__PURE__ */ jsx("div", { className: "col-span-12 lg:col-span-7 p-4 md:py-8 md:px-4 h-full overflow-auto pb-20 md:pb-20", children: /* @__PURE__ */ jsxs("div", { className: "sticky top-8 min-h-full w-full flex flex-col justify-center", children: [
       selectedPropertyFullId && selectedProperty && !isPropertyBuilder(selectedProperty) && /* @__PURE__ */ jsx(PropertyForm, { inArray: false, existingProperty: !isNewCollection, autoUpdateId: false, allowDataInference: !isNewCollection, autoOpenTypeSelect: false, propertyKey: selectedPropertyKey, propertyNamespace: selectedPropertyNamespace, property: selectedProperty, onPropertyChanged, onDelete: deleteProperty, onError: onPropertyErrorInternal, forceShowErrors: showErrors, initialErrors, getData, propertyConfigs, collectionEditable }, `edit_view_${selectedPropertyIndex}`),
       !selectedProperty && /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col items-center justify-center h-full gap-4", children: [
         /* @__PURE__ */ jsx(Typography, { variant: "label", className: "", children: emptyCollection ? "Now you can add your first property" : "Select a property to edit it" }),
@@ -8065,7 +8254,7 @@ const pagesCollectionTemplate = {
   }
 };
 function CollectionEditorWelcomeView(t0) {
-  const $ = c(56);
+  const $ = c(52);
   const {
     path,
     pathSuggestions,
@@ -8102,6 +8291,10 @@ function CollectionEditorWelcomeView(t0) {
     setFieldValue,
     setValues
   } = useFormex();
+  const noSuggestions = !loadingPathSuggestions && (filteredPathSuggestions ?? [])?.length === 0;
+  if (!noSuggestions) {
+    return null;
+  }
   let t3;
   if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
     t3 = /* @__PURE__ */ jsx("div", { className: "flex flex-row py-2 pt-3 items-center", children: /* @__PURE__ */ jsx(Typography, { variant: "h4", className: "flex-grow", children: "New collection" }) });
@@ -8153,173 +8346,162 @@ function CollectionEditorWelcomeView(t0) {
     t7 = $[15];
   }
   let t8;
-  if ($[16] !== filteredPathSuggestions || $[17] !== loadingPathSuggestions) {
-    t8 = !loadingPathSuggestions && (filteredPathSuggestions ?? [])?.length === 0 && /* @__PURE__ */ jsx(Typography, { variant: "caption", children: "No suggestions" });
-    $[16] = filteredPathSuggestions;
-    $[17] = loadingPathSuggestions;
-    $[18] = t8;
-  } else {
-    t8 = $[18];
-  }
-  let t9;
-  if ($[19] !== t6 || $[20] !== t7 || $[21] !== t8) {
-    t9 = /* @__PURE__ */ jsxs("div", { className: "my-2", children: [
+  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,
-        t8
+        t7
       ] })
     ] });
-    $[19] = t6;
-    $[20] = t7;
-    $[21] = t8;
-    $[22] = t9;
+    $[16] = t6;
+    $[17] = t7;
+    $[18] = t8;
   } else {
-    t9 = $[22];
+    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;
+  } else {
+    t9 = $[19];
   }
   let t10;
-  if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
-    t10 = /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: "● Select a template:" });
-    $[23] = t10;
+  if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: productsCollectionTemplate.icon });
+    $[20] = t10;
   } else {
-    t10 = $[23];
+    t10 = $[20];
   }
   let t11;
-  if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
-    t11 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: productsCollectionTemplate.icon });
-    $[24] = 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 = $[24];
+    t11 = $[23];
   }
   let t12;
+  if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+    t12 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: usersCollectionTemplate.icon });
+    $[24] = t12;
+  } else {
+    t12 = $[24];
+  }
+  let t13;
   if ($[25] !== onContinue || $[26] !== setValues) {
-    t12 = /* @__PURE__ */ jsx(TemplateButton, { title: "Products", subtitle: "A collection of products with images, prices and stock", icon: t11, onClick: () => {
-      setValues(productsCollectionTemplate);
+    t13 = /* @__PURE__ */ jsx(TemplateButton, { title: "Users", subtitle: "A collection of users with emails, names and roles", icon: t12, onClick: () => {
+      setValues(usersCollectionTemplate);
       onContinue();
     } });
     $[25] = onContinue;
     $[26] = setValues;
-    $[27] = t12;
+    $[27] = t13;
   } else {
-    t12 = $[27];
+    t13 = $[27];
   }
-  let t13;
+  let t14;
   if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
-    t13 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: usersCollectionTemplate.icon });
-    $[28] = t13;
+    t14 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: blogCollectionTemplate.icon });
+    $[28] = t14;
   } else {
-    t13 = $[28];
+    t14 = $[28];
   }
-  let t14;
+  let t15;
   if ($[29] !== onContinue || $[30] !== setValues) {
-    t14 = /* @__PURE__ */ jsx(TemplateButton, { title: "Users", subtitle: "A collection of users with emails, names and roles", icon: t13, onClick: () => {
-      setValues(usersCollectionTemplate);
+    t15 = /* @__PURE__ */ jsx(TemplateButton, { title: "Blog posts", subtitle: "A collection of blog posts with images, authors and complex content", icon: t14, onClick: () => {
+      setValues(blogCollectionTemplate);
       onContinue();
     } });
     $[29] = onContinue;
     $[30] = setValues;
-    $[31] = t14;
+    $[31] = t15;
   } else {
-    t14 = $[31];
+    t15 = $[31];
   }
-  let t15;
+  let t16;
   if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
-    t15 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: blogCollectionTemplate.icon });
-    $[32] = t15;
+    t16 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: pagesCollectionTemplate.icon });
+    $[32] = t16;
   } else {
-    t15 = $[32];
+    t16 = $[32];
   }
-  let t16;
+  let t17;
   if ($[33] !== onContinue || $[34] !== setValues) {
-    t16 = /* @__PURE__ */ jsx(TemplateButton, { title: "Blog posts", subtitle: "A collection of blog posts with images, authors and complex content", icon: t15, onClick: () => {
-      setValues(blogCollectionTemplate);
+    t17 = /* @__PURE__ */ jsx(TemplateButton, { title: "Pages", subtitle: "A collection of pages with images, authors and complex content", icon: t16, onClick: () => {
+      setValues(pagesCollectionTemplate);
       onContinue();
     } });
     $[33] = onContinue;
     $[34] = setValues;
-    $[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;
+    $[35] = t17;
   } else {
-    t17 = $[36];
+    t17 = $[35];
   }
   let t18;
-  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,
+  if ($[36] !== t11 || $[37] !== t13 || $[38] !== t15 || $[39] !== t17) {
+    t18 = /* @__PURE__ */ jsxs("div", { className: "my-2", children: [
+      t9,
       /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
-        t12,
-        t14,
-        t16,
-        t18
+        t11,
+        t13,
+        t15,
+        t17
       ] })
     ] });
-    $[40] = t12;
-    $[41] = t14;
-    $[42] = t16;
-    $[43] = t18;
-    $[44] = t19;
+    $[36] = t11;
+    $[37] = t13;
+    $[38] = t15;
+    $[39] = t17;
+    $[40] = t18;
   } else {
-    t19 = $[44];
+    t18 = $[40];
   }
-  let t20;
-  if ($[45] !== onContinue || $[46] !== parentCollection) {
-    t20 = !parentCollection && /* @__PURE__ */ jsxs("div", { children: [
+  let t19;
+  if ($[41] !== onContinue || $[42] !== parentCollection) {
+    t19 = !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) })
     ] });
-    $[45] = onContinue;
-    $[46] = parentCollection;
-    $[47] = t20;
+    $[41] = onContinue;
+    $[42] = parentCollection;
+    $[43] = t19;
   } else {
-    t20 = $[47];
+    t19 = $[43];
   }
-  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;
+  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;
   } else {
-    t21 = $[49];
+    t20 = $[45];
   }
-  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: [
+  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: [
       t3,
       t4,
-      t9,
+      t8,
+      t18,
       t19,
-      t20,
-      t21
+      t20
     ] }) });
-    $[50] = t19;
-    $[51] = t20;
-    $[52] = t21;
-    $[53] = t4;
-    $[54] = t9;
-    $[55] = t22;
+    $[46] = t18;
+    $[47] = t19;
+    $[48] = t20;
+    $[49] = t4;
+    $[50] = t8;
+    $[51] = t21;
   } else {
-    t22 = $[55];
+    t21 = $[51];
   }
-  return t22;
+  return t21;
 }
 function TemplateButton(t0) {
   const $ = c(10);
@@ -9533,7 +9715,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(67);
+  const $ = c(65);
   const {
     children,
     collectionConfigController,
@@ -9541,7 +9723,6 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
     reservedGroups,
     collectionInference,
     extraView,
-    getPathSuggestions,
     getUser,
     getData,
     onAnalyticsEvent
@@ -9662,26 +9843,24 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
   const createCollection = t3;
   const t4 = configPermissions ?? defaultConfigPermissions;
   let t5;
-  if ($[6] !== createCollection || $[7] !== editCollection || $[8] !== editProperty || $[9] !== getPathSuggestions || $[10] !== t4) {
+  if ($[6] !== createCollection || $[7] !== editCollection || $[8] !== editProperty || $[9] !== t4) {
     t5 = {
       editCollection,
       createCollection,
       editProperty,
-      configPermissions: t4,
-      getPathSuggestions
+      configPermissions: t4
     };
     $[6] = createCollection;
     $[7] = editCollection;
     $[8] = editProperty;
-    $[9] = getPathSuggestions;
-    $[10] = t4;
-    $[11] = t5;
+    $[9] = t4;
+    $[10] = t5;
   } else {
-    t5 = $[11];
+    t5 = $[10];
   }
   const t6 = Boolean(currentDialog);
   let t7;
-  if ($[12] !== currentDialog || $[13] !== navigate || $[14] !== navigation) {
+  if ($[11] !== currentDialog || $[12] !== navigate || $[13] !== navigation) {
     t7 = (collection_0) => {
       if (currentDialog?.redirect) {
         if (collection_0 && currentDialog?.isNewCollection && !currentDialog.parentCollectionIds.length) {
@@ -9691,29 +9870,28 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
       }
       setCurrentDialog(void 0);
     };
-    $[12] = currentDialog;
-    $[13] = navigate;
-    $[14] = navigation;
-    $[15] = t7;
+    $[11] = currentDialog;
+    $[12] = navigate;
+    $[13] = navigation;
+    $[14] = t7;
   } else {
-    t7 = $[15];
+    t7 = $[14];
   }
   let t8;
-  if ($[16] !== collectionConfigController || $[17] !== collectionInference || $[18] !== currentDialog || $[19] !== extraView || $[20] !== getData || $[21] !== getPathSuggestions || $[22] !== getUser || $[23] !== reservedGroups || $[24] !== t6 || $[25] !== t7) {
-    t8 = /* @__PURE__ */ jsx(CollectionEditorDialog, { open: t6, configController: collectionConfigController, isNewCollection: false, collectionInference, ...currentDialog, getData, reservedGroups, extraView, pathSuggestions: getPathSuggestions, getUser, handleClose: t7 });
-    $[16] = collectionConfigController;
-    $[17] = collectionInference;
-    $[18] = currentDialog;
-    $[19] = extraView;
-    $[20] = getData;
-    $[21] = getPathSuggestions;
-    $[22] = getUser;
-    $[23] = reservedGroups;
-    $[24] = t6;
-    $[25] = t7;
-    $[26] = t8;
+  if ($[15] !== collectionConfigController || $[16] !== collectionInference || $[17] !== currentDialog || $[18] !== extraView || $[19] !== getData || $[20] !== getUser || $[21] !== reservedGroups || $[22] !== t6 || $[23] !== t7) {
+    t8 = /* @__PURE__ */ jsx(CollectionEditorDialog, { open: t6, configController: collectionConfigController, isNewCollection: false, collectionInference, ...currentDialog, getData, reservedGroups, extraView, getUser, handleClose: t7 });
+    $[15] = collectionConfigController;
+    $[16] = collectionInference;
+    $[17] = currentDialog;
+    $[18] = extraView;
+    $[19] = getData;
+    $[20] = getUser;
+    $[21] = reservedGroups;
+    $[22] = t6;
+    $[23] = t7;
+    $[24] = t8;
   } else {
-    t8 = $[26];
+    t8 = $[24];
   }
   const t9 = Boolean(currentPropertyDialog);
   const t10 = Boolean(currentPropertyDialog?.propertyKey);
@@ -9721,21 +9899,21 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
   const t12 = !currentPropertyDialog ? false : !currentPropertyDialog?.propertyKey;
   const t13 = currentPropertyDialog?.collectionEditable ?? false;
   let t14;
-  if ($[27] !== currentPropertyDialog || $[28] !== getData || $[29] !== navigation) {
+  if ($[25] !== currentPropertyDialog || $[26] !== getData || $[27] !== navigation) {
     t14 = getData && currentPropertyDialog?.editedCollectionId ? () => {
       console.debug("get data for property", currentPropertyDialog?.editedCollectionId);
       const resolvedPath = navigation.resolveIdsFrom(currentPropertyDialog.editedCollectionId);
       return getData(resolvedPath, []);
     } : void 0;
-    $[27] = currentPropertyDialog;
-    $[28] = getData;
-    $[29] = navigation;
-    $[30] = t14;
+    $[25] = currentPropertyDialog;
+    $[26] = getData;
+    $[27] = navigation;
+    $[28] = t14;
   } else {
-    t14 = $[30];
+    t14 = $[28];
   }
   let t15;
-  if ($[31] !== collectionConfigController || $[32] !== currentPropertyDialog || $[33] !== snackbarController) {
+  if ($[29] !== collectionConfigController || $[30] !== currentPropertyDialog || $[31] !== snackbarController) {
     t15 = (t162) => {
       const {
         id: id_0,
@@ -9764,15 +9942,15 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
         return false;
       });
     };
-    $[31] = collectionConfigController;
-    $[32] = currentPropertyDialog;
-    $[33] = snackbarController;
-    $[34] = t15;
+    $[29] = collectionConfigController;
+    $[30] = currentPropertyDialog;
+    $[31] = snackbarController;
+    $[32] = t15;
   } else {
-    t15 = $[34];
+    t15 = $[32];
   }
   let t16;
-  if ($[35] !== collectionConfigController || $[36] !== currentPropertyDialog?.currentPropertiesOrder || $[37] !== currentPropertyDialog?.editedCollectionId || $[38] !== currentPropertyDialog?.namespace || $[39] !== currentPropertyDialog?.parentCollectionIds || $[40] !== currentPropertyDialog?.propertyKey || $[41] !== snackbarController) {
+  if ($[33] !== collectionConfigController || $[34] !== currentPropertyDialog?.currentPropertiesOrder || $[35] !== currentPropertyDialog?.editedCollectionId || $[36] !== currentPropertyDialog?.namespace || $[37] !== currentPropertyDialog?.parentCollectionIds || $[38] !== currentPropertyDialog?.propertyKey || $[39] !== snackbarController) {
     t16 = () => {
       if (!currentPropertyDialog?.propertyKey) {
         return;
@@ -9795,21 +9973,21 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
         return false;
       });
     };
-    $[35] = collectionConfigController;
-    $[36] = currentPropertyDialog?.currentPropertiesOrder;
-    $[37] = currentPropertyDialog?.editedCollectionId;
-    $[38] = currentPropertyDialog?.namespace;
-    $[39] = currentPropertyDialog?.parentCollectionIds;
-    $[40] = currentPropertyDialog?.propertyKey;
-    $[41] = snackbarController;
-    $[42] = t16;
+    $[33] = collectionConfigController;
+    $[34] = currentPropertyDialog?.currentPropertiesOrder;
+    $[35] = currentPropertyDialog?.editedCollectionId;
+    $[36] = currentPropertyDialog?.namespace;
+    $[37] = currentPropertyDialog?.parentCollectionIds;
+    $[38] = currentPropertyDialog?.propertyKey;
+    $[39] = snackbarController;
+    $[40] = t16;
   } else {
-    t16 = $[42];
+    t16 = $[40];
   }
   let t17;
   let t18;
   let t19;
-  if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
     t17 = () => {
       setCurrentPropertyDialog(void 0);
     };
@@ -9817,64 +9995,64 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
       setCurrentPropertyDialog(void 0);
     };
     t19 = {};
-    $[43] = t17;
-    $[44] = t18;
-    $[45] = t19;
+    $[41] = t17;
+    $[42] = t18;
+    $[43] = t19;
   } else {
-    t17 = $[43];
-    t18 = $[44];
-    t19 = $[45];
+    t17 = $[41];
+    t18 = $[42];
+    t19 = $[43];
   }
   let t20;
-  if ($[46] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
     t20 = [];
-    $[46] = t20;
+    $[44] = t20;
   } else {
-    t20 = $[46];
+    t20 = $[44];
   }
   const t21 = currentPropertyDialog?.property;
   const t22 = currentPropertyDialog?.propertyKey;
   let t23;
-  if ($[47] !== propertyConfigs || $[48] !== t10 || $[49] !== t11 || $[50] !== t12 || $[51] !== t13 || $[52] !== t14 || $[53] !== t15 || $[54] !== t16 || $[55] !== t21 || $[56] !== t22 || $[57] !== t9) {
+  if ($[45] !== propertyConfigs || $[46] !== t10 || $[47] !== t11 || $[48] !== t12 || $[49] !== t13 || $[50] !== t14 || $[51] !== t15 || $[52] !== t16 || $[53] !== t21 || $[54] !== t22 || $[55] !== t9) {
     t23 = /* @__PURE__ */ jsx(PropertyFormDialog, { open: t9, includeIdAndName: true, existingProperty: t10, autoUpdateId: t11, autoOpenTypeSelect: t12, inArray: false, collectionEditable: t13, getData: t14, onPropertyChanged: t15, onPropertyChangedImmediate: false, onDelete: t16, onError: _temp2, onOkClicked: t17, onCancel: t18, initialErrors: t19, forceShowErrors: false, existingPropertyKeys: t20, allowDataInference: true, propertyConfigs, property: t21, propertyKey: t22 });
-    $[47] = propertyConfigs;
-    $[48] = t10;
-    $[49] = t11;
-    $[50] = t12;
-    $[51] = t13;
-    $[52] = t14;
-    $[53] = t15;
-    $[54] = t16;
-    $[55] = t21;
-    $[56] = t22;
-    $[57] = t9;
-    $[58] = t23;
-  } else {
-    t23 = $[58];
+    $[45] = propertyConfigs;
+    $[46] = t10;
+    $[47] = t11;
+    $[48] = t12;
+    $[49] = t13;
+    $[50] = t14;
+    $[51] = t15;
+    $[52] = t16;
+    $[53] = t21;
+    $[54] = t22;
+    $[55] = t9;
+    $[56] = t23;
+  } else {
+    t23 = $[56];
   }
   let t24;
-  if ($[59] !== children || $[60] !== t23 || $[61] !== t5 || $[62] !== t8) {
+  if ($[57] !== children || $[58] !== t23 || $[59] !== t5 || $[60] !== t8) {
     t24 = /* @__PURE__ */ jsxs(CollectionEditorContext.Provider, { value: t5, children: [
       children,
       t8,
       t23
     ] });
-    $[59] = children;
-    $[60] = t23;
-    $[61] = t5;
-    $[62] = t8;
-    $[63] = t24;
+    $[57] = children;
+    $[58] = t23;
+    $[59] = t5;
+    $[60] = t8;
+    $[61] = t24;
   } else {
-    t24 = $[63];
+    t24 = $[61];
   }
   let t25;
-  if ($[64] !== collectionConfigController || $[65] !== t24) {
+  if ($[62] !== collectionConfigController || $[63] !== t24) {
     t25 = /* @__PURE__ */ jsx(ConfigControllerContext.Provider, { value: collectionConfigController, children: t24 });
-    $[64] = collectionConfigController;
-    $[65] = t24;
-    $[66] = t25;
+    $[62] = collectionConfigController;
+    $[63] = t24;
+    $[64] = t25;
   } else {
-    t25 = $[66];
+    t25 = $[64];
   }
   return t25;
 }, equal);
@@ -10045,7 +10223,7 @@ function HomePageEditorCollectionAction(t0) {
   const deleteCollection = t3;
   let t4;
   if ($[11] !== permissions.deleteCollections) {
-    t4 = permissions.deleteCollections && /* @__PURE__ */ jsx(Menu, { trigger: /* @__PURE__ */ jsx(IconButton, { children: /* @__PURE__ */ jsx(MoreVertIcon, { size: "small" }) }), children: /* @__PURE__ */ jsxs(MenuItem, { dense: true, onClick: (event) => {
+    t4 = permissions.deleteCollections && /* @__PURE__ */ jsx(Menu, { trigger: /* @__PURE__ */ jsx(IconButton, { size: "small", children: /* @__PURE__ */ jsx(MoreVertIcon, { size: "small" }) }), children: /* @__PURE__ */ jsxs(MenuItem, { dense: true, onClick: (event) => {
       event.preventDefault();
       event.stopPropagation();
       setDeleteRequested(true);
@@ -10060,7 +10238,7 @@ function HomePageEditorCollectionAction(t0) {
   }
   let t5;
   if ($[13] !== onEditCollectionClicked || $[14] !== permissions.editCollections) {
-    t5 = permissions.editCollections && /* @__PURE__ */ jsx(IconButton, { onClick: (event_0) => {
+    t5 = permissions.editCollections && /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: (event_0) => {
       onEditCollectionClicked();
     }, children: /* @__PURE__ */ jsx(SettingsIcon, { size: "small" }) });
     $[13] = onEditCollectionClicked;
@@ -10489,21 +10667,22 @@ function NewCollectionCard(t0) {
   return t8;
 }
 function useCollectionEditorPlugin(t0) {
-  const $ = c(15);
+  const $ = c(19);
   const {
     collectionConfigController,
     configPermissions,
     reservedGroups,
     extraView,
-    getPathSuggestions,
     getUser,
     collectionInference,
     getData,
-    onAnalyticsEvent
+    onAnalyticsEvent,
+    includeIntroView: t1
   } = t0;
-  let t1;
-  if ($[0] !== collectionConfigController || $[1] !== collectionInference || $[2] !== configPermissions || $[3] !== extraView || $[4] !== getData || $[5] !== getPathSuggestions || $[6] !== getUser || $[7] !== onAnalyticsEvent || $[8] !== reservedGroups) {
-    t1 = {
+  const includeIntroView = t1 === void 0 ? true : t1;
+  let t2;
+  if ($[0] !== collectionConfigController || $[1] !== collectionInference || $[2] !== configPermissions || $[3] !== extraView || $[4] !== getData || $[5] !== getUser || $[6] !== onAnalyticsEvent || $[7] !== reservedGroups) {
+    t2 = {
       Component: ConfigControllerProvider,
       props: {
         collectionConfigController,
@@ -10511,7 +10690,6 @@ function useCollectionEditorPlugin(t0) {
         collectionInference,
         reservedGroups,
         extraView,
-        getPathSuggestions,
         getUser,
         getData,
         onAnalyticsEvent
@@ -10522,53 +10700,72 @@ function useCollectionEditorPlugin(t0) {
     $[2] = configPermissions;
     $[3] = extraView;
     $[4] = getData;
-    $[5] = getPathSuggestions;
-    $[6] = getUser;
-    $[7] = onAnalyticsEvent;
-    $[8] = reservedGroups;
-    $[9] = t1;
+    $[5] = getUser;
+    $[6] = onAnalyticsEvent;
+    $[7] = reservedGroups;
+    $[8] = t2;
   } else {
-    t1 = $[9];
+    t2 = $[8];
   }
-  let t2;
   let t3;
-  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-    t2 = {
-      additionalActions: /* @__PURE__ */ jsx(NewCollectionButton, {}),
-      additionalChildrenStart: /* @__PURE__ */ jsx(IntroWidget, {}),
+  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = /* @__PURE__ */ jsx(NewCollectionButton, {});
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  let t4;
+  if ($[10] !== includeIntroView) {
+    t4 = includeIntroView ? /* @__PURE__ */ jsx(IntroWidget, {}) : void 0;
+    $[10] = includeIntroView;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  let t5;
+  if ($[12] !== t4) {
+    t5 = {
+      additionalActions: t3,
+      additionalChildrenStart: t4,
       CollectionActions: HomePageEditorCollectionAction,
       AdditionalCards: NewCollectionCard
     };
-    t3 = {
+    $[12] = t4;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  let t6;
+  if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = {
       CollectionActionsStart: EditorCollectionActionStart,
       CollectionActions: EditorCollectionAction,
       HeaderAction: CollectionViewHeaderAction,
       AddColumnComponent: PropertyAddColumnComponent
     };
-    $[10] = t2;
-    $[11] = t3;
+    $[14] = t6;
   } else {
-    t2 = $[10];
-    t3 = $[11];
+    t6 = $[14];
   }
-  let t4;
-  if ($[12] !== collectionConfigController.loading || $[13] !== t1) {
-    t4 = {
+  let t7;
+  if ($[15] !== collectionConfigController.loading || $[16] !== t2 || $[17] !== t5) {
+    t7 = {
       key: "collection_editor",
       loading: collectionConfigController.loading,
-      provider: t1,
-      homePage: t2,
-      collectionView: t3
+      provider: t2,
+      homePage: t5,
+      collectionView: t6
     };
-    $[12] = collectionConfigController.loading;
-    $[13] = t1;
-    $[14] = t4;
+    $[15] = collectionConfigController.loading;
+    $[16] = t2;
+    $[17] = t5;
+    $[18] = t7;
   } else {
-    t4 = $[14];
+    t7 = $[18];
   }
-  return t4;
+  return t7;
 }
-function IntroWidget(t0) {
+function IntroWidget() {
   const $ = c(11);
   const navigation = useNavigationController();
   if (!navigation.topLevelNavigation) {
@@ -10576,35 +10773,35 @@ function IntroWidget(t0) {
   }
   const authController = useAuthController();
   const collectionEditorController = useCollectionEditorController();
-  let t1;
+  let t0;
   if ($[0] !== authController || $[1] !== collectionEditorController) {
-    t1 = collectionEditorController.configPermissions ? collectionEditorController.configPermissions({
+    t0 = collectionEditorController.configPermissions ? collectionEditorController.configPermissions({
       user: authController.user
     }).createCollections : true;
     $[0] = authController;
     $[1] = collectionEditorController;
-    $[2] = t1;
+    $[2] = t0;
   } else {
-    t1 = $[2];
+    t0 = $[2];
   }
-  const canCreateCollections = t1;
+  const canCreateCollections = t0;
   if (!navigation.initialised || (navigation.collections ?? []).length > 0) {
     return null;
   }
+  let t1;
   let t2;
-  let t3;
   if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-    t2 = /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: "uppercase", children: "No collections found" });
-    t3 = /* @__PURE__ */ jsx(Typography, { children: "Start building collections in FireCMS easily. Map them to your existing database data, import from files, or use our templates." });
-    $[3] = t2;
-    $[4] = t3;
+    t1 = /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: "uppercase", children: "No collections found" });
+    t2 = /* @__PURE__ */ jsx(Typography, { children: "Start building collections in FireCMS easily. Map them to your existing database data, import from files, or use our templates." });
+    $[3] = t1;
+    $[4] = t2;
   } else {
-    t2 = $[3];
-    t3 = $[4];
+    t1 = $[3];
+    t2 = $[4];
   }
-  let t4;
+  let t3;
   if ($[5] !== canCreateCollections || $[6] !== collectionEditorController) {
-    t4 = canCreateCollections && /* @__PURE__ */ jsxs(Button, { onClick: collectionEditorController && canCreateCollections ? () => collectionEditorController.createCollection({
+    t3 = canCreateCollections && /* @__PURE__ */ jsxs(Button, { onClick: collectionEditorController && canCreateCollections ? () => collectionEditorController.createCollection({
       parentCollectionIds: [],
       redirect: true,
       sourceClick: "new_collection_card"
@@ -10614,31 +10811,31 @@ function IntroWidget(t0) {
     ] });
     $[5] = canCreateCollections;
     $[6] = collectionEditorController;
-    $[7] = t4;
+    $[7] = t3;
   } else {
-    t4 = $[7];
+    t3 = $[7];
   }
-  let t5;
+  let t4;
   if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-    t5 = /* @__PURE__ */ jsx(Typography, { color: "secondary", children: "You can also define collections programmatically." });
-    $[8] = t5;
+    t4 = /* @__PURE__ */ jsx(Typography, { color: "secondary", children: "You can also define collections programmatically." });
+    $[8] = t4;
   } else {
-    t5 = $[8];
+    t4 = $[8];
   }
-  let t6;
-  if ($[9] !== t4) {
-    t6 = /* @__PURE__ */ jsxs(Paper, { className: "my-4 px-4 py-6 flex flex-col  bg-white dark:bg-surface-accent-800 gap-2", children: [
+  let t5;
+  if ($[9] !== t3) {
+    t5 = /* @__PURE__ */ jsxs(Paper, { className: "my-4 px-4 py-6 flex flex-col  bg-white dark:bg-surface-accent-800 gap-2", children: [
+      t1,
       t2,
       t3,
-      t4,
-      t5
+      t4
     ] });
-    $[9] = t4;
-    $[10] = t6;
+    $[9] = t3;
+    $[10] = t5;
   } else {
-    t6 = $[10];
+    t5 = $[10];
   }
-  return t6;
+  return t5;
 }
 const mergeCollections = (baseCollections, backendCollections = [], modifyCollection) => {
   const markAsEditable = (c2) => {