@firecms/collection_editor 3.0.0-tw4.2 → 3.0.0-tw4.4

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { c } from "react-compiler-runtime";
-import { toSnakeCase, singular, IconForView, FieldCaption, SearchIconsView, ArrayContainer, serializeRegExp, useSnackbarController, resolveEnumValues, isPropertyBuilder, useCustomizationController, getFieldConfig, ErrorBoundary, PropertyConfigBadge, unslugify, useNavigationController, mergeDeep, DEFAULT_FIELD_CONFIGS, getFieldId, ConfirmationDialog, isValidRegExp, isEmptyObject, useLargeLayout, makePropertiesEditable, resolveEntityView, useAuthController, useSelectionController, CircularProgressCenter, EntityCollectionTable, slugify, resolveEntityAction, randomString, removeUndefined, ErrorView, removeInitialAndTrailingSlashes, getDefaultPropertiesOrder, joinCollectionLists } from "@firecms/core";
+import { toSnakeCase, singular, IconForView, FieldCaption, SearchIconsView, ArrayContainer, serializeRegExp, useSnackbarController, resolveEnumValues, isPropertyBuilder, useCustomizationController, getFieldConfig, ErrorBoundary, PropertyConfigBadge, prettifyIdentifier, useNavigationController, mergeDeep, DEFAULT_FIELD_CONFIGS, getFieldId, ConfirmationDialog, isValidRegExp, isEmptyObject, useLargeLayout, makePropertiesEditable, resolveEntityView, useAuthController, useSelectionController, CircularProgressCenter, EntityCollectionTable, slugify, resolveEntityAction, randomString, removeUndefined, ErrorView, removeInitialAndTrailingSlashes, getDefaultPropertiesOrder, joinCollectionLists } from "@firecms/core";
 import * as React from "react";
 import React__default, { useContext, useState, useEffect, useMemo, useRef, useDeferredValue } from "react";
 import equal from "react-fast-compare";
@@ -3974,7 +3974,7 @@ const CommonPropertyFields = React__default.forwardRef(function CommonPropertyFi
       const newIdValue = e_0.target.value;
       const nameTouched = getIn(touched, "name");
       if (!nameTouched && autoUpdateId) {
-        setFieldValue("name", newIdValue ? unslugify(newIdValue) : "");
+        setFieldValue("name", newIdValue ? prettifyIdentifier(newIdValue) : "");
       }
       setFieldValue("id", newIdValue, true);
       setFieldTouched("id", true);
@@ -8589,265 +8589,202 @@ const pagesCollectionTemplate = {
   }
 };
 function CollectionEditorWelcomeView(t0) {
-  const $ = c(56);
+  const $ = c(39);
   const {
-    path,
-    pathSuggestions,
     parentCollection,
     onContinue,
     existingCollectionPaths
   } = t0;
-  const [loadingPathSuggestions, setLoadingPathSuggestions] = useState(false);
-  const [filteredPathSuggestions, setFilteredPathSuggestions] = useState();
+  const {
+    pathSuggestions
+  } = useCollectionEditorController();
   let t1;
+  if ($[0] !== pathSuggestions) {
+    t1 = pathSuggestions ?? [];
+    $[0] = pathSuggestions;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
   let t2;
-  if ($[0] !== existingCollectionPaths || $[1] !== path || $[2] !== pathSuggestions) {
-    t1 = () => {
-      if (pathSuggestions && existingCollectionPaths) {
-        setLoadingPathSuggestions(true);
-        pathSuggestions(path).then((suggestions) => {
-          const filteredSuggestions = suggestions.filter((s) => !(existingCollectionPaths ?? []).find((c2) => c2.trim().toLowerCase() === s.trim().toLowerCase()));
-          setFilteredPathSuggestions(filteredSuggestions);
-        }).finally(() => setLoadingPathSuggestions(false));
-      }
-    };
-    t2 = [existingCollectionPaths, path, pathSuggestions];
-    $[0] = existingCollectionPaths;
-    $[1] = path;
-    $[2] = pathSuggestions;
-    $[3] = t1;
-    $[4] = t2;
+  if ($[2] !== existingCollectionPaths) {
+    t2 = (s) => !(existingCollectionPaths ?? []).find((c2) => c2.trim().toLowerCase() === s.trim().toLowerCase());
+    $[2] = existingCollectionPaths;
+    $[3] = t2;
   } else {
-    t1 = $[3];
-    t2 = $[4];
+    t2 = $[3];
   }
-  useEffect(t1, t2);
+  const filteredSuggestions = t1.filter(t2);
   const {
     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" }) });
-    $[5] = t3;
+  const t3 = "overflow-auto my-auto";
+  const T0 = Container;
+  const t4 = "4xl";
+  const t5 = "flex flex-col gap-4 p-8 m-auto";
+  let t6;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = /* @__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" }) });
+    $[4] = t6;
   } else {
-    t3 = $[5];
+    t6 = $[4];
   }
-  let t4;
-  if ($[6] !== parentCollection) {
-    t4 = parentCollection && /* @__PURE__ */ jsx(Chip, { colorScheme: "tealDarker", children: /* @__PURE__ */ jsxs(Typography, { variant: "caption", children: [
+  let t7;
+  if ($[5] !== parentCollection) {
+    t7 = parentCollection && /* @__PURE__ */ jsx(Chip, { colorScheme: "tealDarker", children: /* @__PURE__ */ jsxs(Typography, { variant: "caption", children: [
       "This is a subcollection of ",
       /* @__PURE__ */ jsx("b", { children: parentCollection.name })
     ] }) });
-    $[6] = parentCollection;
-    $[7] = t4;
-  } else {
-    t4 = $[7];
-  }
-  let t5;
-  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-    t5 = /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: "● Use one of the existing paths in your database:" });
-    $[8] = t5;
-  } else {
-    t5 = $[8];
-  }
-  let t6;
-  if ($[9] !== filteredPathSuggestions || $[10] !== loadingPathSuggestions) {
-    t6 = loadingPathSuggestions && !filteredPathSuggestions && /* @__PURE__ */ jsx(CircularProgress, { size: "small" });
-    $[9] = filteredPathSuggestions;
-    $[10] = loadingPathSuggestions;
-    $[11] = t6;
+    $[5] = parentCollection;
+    $[6] = t7;
   } else {
-    t6 = $[11];
+    t7 = $[6];
   }
-  let t7;
-  if ($[12] !== filteredPathSuggestions || $[13] !== onContinue || $[14] !== setFieldValue) {
-    t7 = filteredPathSuggestions?.map((suggestion, index) => /* @__PURE__ */ jsx(Chip, { colorScheme: "cyanLighter", onClick: () => {
-      setFieldValue("name", unslugify(suggestion));
+  const t8 = (filteredSuggestions ?? []).length > 0 && /* @__PURE__ */ jsxs("div", { className: "my-2", children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: "● Use one of the existing paths in your database:" }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-x-2 gap-y-1 items-center my-2 min-h-7", children: filteredSuggestions?.map((suggestion, index) => /* @__PURE__ */ jsx(Chip, { colorScheme: "cyanLighter", onClick: () => {
+      setFieldValue("name", prettifyIdentifier(suggestion));
       setFieldValue("id", suggestion);
       setFieldValue("path", suggestion);
       setFieldValue("properties", void 0);
       onContinue();
-    }, size: "small", children: suggestion }, suggestion));
-    $[12] = filteredPathSuggestions;
-    $[13] = onContinue;
-    $[14] = setFieldValue;
-    $[15] = t7;
-  } else {
-    t7 = $[15];
-  }
-  let t8;
-  if ($[16] !== filteredPathSuggestions || $[17] !== loadingPathSuggestions) {
-    t8 = (filteredPathSuggestions ?? []).length === 0 && !loadingPathSuggestions && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: "No existing paths found" });
-    $[16] = filteredPathSuggestions;
-    $[17] = loadingPathSuggestions;
-    $[18] = t8;
-  } else {
-    t8 = $[18];
-  }
+    }, size: "small", children: suggestion }, suggestion)) })
+  ] });
   let t9;
-  if ($[19] !== t6 || $[20] !== t7 || $[21] !== t8) {
-    t9 = /* @__PURE__ */ jsxs("div", { className: "my-2", children: [
-      t5,
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-x-2 gap-y-1 items-center my-2 min-h-7", children: [
-        t6,
-        t7,
-        t8
-      ] })
-    ] });
-    $[19] = t6;
-    $[20] = t7;
-    $[21] = t8;
-    $[22] = t9;
+  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: "● Select a template:" });
+    $[7] = t9;
   } else {
-    t9 = $[22];
+    t9 = $[7];
   }
   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 ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: productsCollectionTemplate.icon });
+    $[8] = t10;
   } else {
-    t10 = $[23];
+    t10 = $[8];
   }
   let t11;
-  if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
-    t11 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: productsCollectionTemplate.icon });
-    $[24] = t11;
-  } else {
-    t11 = $[24];
-  }
-  let t12;
-  if ($[25] !== onContinue || $[26] !== setValues) {
-    t12 = /* @__PURE__ */ jsx(TemplateButton, { title: "Products", subtitle: "A collection of products with images, prices and stock", icon: t11, onClick: () => {
+  if ($[9] !== onContinue || $[10] !== setValues) {
+    t11 = /* @__PURE__ */ jsx(TemplateButton, { title: "Products", subtitle: "A collection of products with images, prices and stock", icon: t10, onClick: () => {
       setValues(productsCollectionTemplate);
       onContinue();
     } });
-    $[25] = onContinue;
-    $[26] = setValues;
-    $[27] = t12;
+    $[9] = onContinue;
+    $[10] = setValues;
+    $[11] = t11;
   } else {
-    t12 = $[27];
+    t11 = $[11];
   }
-  let t13;
-  if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
-    t13 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: usersCollectionTemplate.icon });
-    $[28] = t13;
+  let t12;
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+    t12 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: usersCollectionTemplate.icon });
+    $[12] = t12;
   } else {
-    t13 = $[28];
+    t12 = $[12];
   }
-  let t14;
-  if ($[29] !== onContinue || $[30] !== setValues) {
-    t14 = /* @__PURE__ */ jsx(TemplateButton, { title: "Users", subtitle: "A collection of users with emails, names and roles", icon: t13, onClick: () => {
+  let t13;
+  if ($[13] !== onContinue || $[14] !== setValues) {
+    t13 = /* @__PURE__ */ jsx(TemplateButton, { title: "Users", subtitle: "A collection of users with emails, names and roles", icon: t12, onClick: () => {
       setValues(usersCollectionTemplate);
       onContinue();
     } });
-    $[29] = onContinue;
-    $[30] = setValues;
-    $[31] = t14;
+    $[13] = onContinue;
+    $[14] = setValues;
+    $[15] = t13;
   } else {
-    t14 = $[31];
+    t13 = $[15];
   }
-  let t15;
-  if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
-    t15 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: blogCollectionTemplate.icon });
-    $[32] = t15;
+  let t14;
+  if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+    t14 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: blogCollectionTemplate.icon });
+    $[16] = t14;
   } else {
-    t15 = $[32];
+    t14 = $[16];
   }
-  let t16;
-  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: () => {
+  let t15;
+  if ($[17] !== onContinue || $[18] !== setValues) {
+    t15 = /* @__PURE__ */ jsx(TemplateButton, { title: "Blog posts", subtitle: "A collection of blog posts with images, authors and complex content", icon: t14, onClick: () => {
       setValues(blogCollectionTemplate);
       onContinue();
     } });
-    $[33] = onContinue;
-    $[34] = setValues;
-    $[35] = t16;
+    $[17] = onContinue;
+    $[18] = setValues;
+    $[19] = t15;
   } else {
-    t16 = $[35];
+    t15 = $[19];
   }
-  let t17;
-  if ($[36] === Symbol.for("react.memo_cache_sentinel")) {
-    t17 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: pagesCollectionTemplate.icon });
-    $[36] = t17;
+  let t16;
+  if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+    t16 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: pagesCollectionTemplate.icon });
+    $[20] = t16;
   } else {
-    t17 = $[36];
+    t16 = $[20];
   }
-  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: () => {
+  let t17;
+  if ($[21] !== onContinue || $[22] !== setValues) {
+    t17 = /* @__PURE__ */ jsx(TemplateButton, { title: "Pages", subtitle: "A collection of pages with images, authors and complex content", icon: t16, onClick: () => {
       setValues(pagesCollectionTemplate);
       onContinue();
     } });
-    $[37] = onContinue;
-    $[38] = setValues;
-    $[39] = t18;
+    $[21] = onContinue;
+    $[22] = setValues;
+    $[23] = t17;
   } else {
-    t18 = $[39];
+    t17 = $[23];
   }
-  let t19;
-  if ($[40] !== t12 || $[41] !== t14 || $[42] !== t16 || $[43] !== t18) {
-    t19 = /* @__PURE__ */ jsxs("div", { className: "my-2", children: [
-      t10,
+  let t18;
+  if ($[24] !== t11 || $[25] !== t13 || $[26] !== t15 || $[27] !== 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;
+    $[24] = t11;
+    $[25] = t13;
+    $[26] = t15;
+    $[27] = t17;
+    $[28] = t18;
   } else {
-    t19 = $[44];
+    t18 = $[28];
   }
-  let t20;
-  if ($[45] !== onContinue || $[46] !== parentCollection) {
-    t20 = !parentCollection && /* @__PURE__ */ jsxs("div", { children: [
+  let t19;
+  if ($[29] !== onContinue || $[30] !== 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;
-  } else {
-    t20 = $[47];
-  }
-  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;
+    $[29] = onContinue;
+    $[30] = parentCollection;
+    $[31] = t19;
   } else {
-    t21 = $[49];
+    t19 = $[31];
   }
-  let t22;
-  if ($[50] !== t19 || $[51] !== t20 || $[52] !== t21 || $[53] !== t4 || $[54] !== t9) {
-    t22 = /* @__PURE__ */ jsx("div", { className: "overflow-auto my-auto", children: /* @__PURE__ */ jsxs(Container, { maxWidth: "4xl", className: "flex flex-col gap-4 p-8 m-auto", children: [
-      t3,
-      t4,
-      t9,
-      t19,
-      t20,
-      t21
+  let t20;
+  if ($[32] !== T0 || $[33] !== t18 || $[34] !== t19 || $[35] !== t6 || $[36] !== t7 || $[37] !== t8) {
+    t20 = /* @__PURE__ */ jsx("div", { className: t3, children: /* @__PURE__ */ jsxs(T0, { maxWidth: t4, className: t5, children: [
+      t6,
+      t7,
+      t8,
+      t18,
+      t19
     ] }) });
-    $[50] = t19;
-    $[51] = t20;
-    $[52] = t21;
-    $[53] = t4;
-    $[54] = t9;
-    $[55] = t22;
+    $[32] = T0;
+    $[33] = t18;
+    $[34] = t19;
+    $[35] = t6;
+    $[36] = t7;
+    $[37] = t8;
+    $[38] = t20;
   } else {
-    t22 = $[55];
+    t20 = $[38];
   }
-  return t22;
+  return t20;
 }
 function TemplateButton(t0) {
   const $ = c(10);
@@ -9985,7 +9922,6 @@ function CollectionEditorInternal({
   extraView,
   handleCancel,
   setFormDirty,
-  pathSuggestions,
   getUser,
   parentCollection,
   getData,
@@ -10264,6 +10200,14 @@ function CollectionEditorInternal({
       });
     });
   };
+  const onWelcomeScreenContinue = (importData, propertiesOrder_0) => {
+    if (importData) {
+      onImportDataSet(importData, propertiesOrder_0);
+      setCurrentView("import_data_mapping");
+    } else {
+      setCurrentView("details");
+    }
+  };
   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: [
@@ -10275,14 +10219,7 @@ function CollectionEditorInternal({
       /* @__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 === "welcome" && /* @__PURE__ */ jsx(CollectionEditorWelcomeView, { path, onContinue: onWelcomeScreenContinue, existingCollectionPaths: existingPaths, parentCollection }),
         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) => {
@@ -10309,7 +10246,7 @@ function CollectionEditorInternal({
           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: [
+        /* @__PURE__ */ jsxs(DialogActions, { position: "absolute", children: [
           error && /* @__PURE__ */ jsx(ErrorView, { error }),
           isNewCollection && includeTemplates && currentView === "import_data_mapping" && /* @__PURE__ */ jsxs(Button, { variant: "text", type: "button", color: "primary", onClick: () => {
             importConfig.setInUse(false);
@@ -10324,17 +10261,18 @@ function CollectionEditorInternal({
             /* @__PURE__ */ jsx(ArrowBackIcon, {}),
             "Back"
           ] }),
-          isNewCollection && includeTemplates && currentView === "details" && /* @__PURE__ */ jsxs(Button, { variant: "text", color: "primary", type: "button", onClick: () => setCurrentView("welcome"), children: [
+          isNewCollection && includeTemplates && currentView === "details" && /* @__PURE__ */ jsxs(Button, { variant: "text", color: "neutral", type: "button", onClick: () => setCurrentView("welcome"), children: [
             /* @__PURE__ */ jsx(ArrowBackIcon, {}),
             "Back"
           ] }),
-          isNewCollection && currentView === "properties" && /* @__PURE__ */ jsxs(Button, { variant: "text", type: "button", color: "primary", onClick: () => setCurrentView("details"), children: [
+          isNewCollection && currentView === "properties" && /* @__PURE__ */ jsxs(Button, { variant: "text", type: "button", color: "neutral", onClick: () => setCurrentView("details"), children: [
             /* @__PURE__ */ jsx(ArrowBackIcon, {}),
             "Back"
           ] }),
-          /* @__PURE__ */ jsx(Button, { variant: "text", color: "primary", onClick: () => {
+          /* @__PURE__ */ jsx(Button, { variant: "text", color: "neutral", onClick: () => {
             handleCancel();
           }, children: "Cancel" }),
+          currentView === "welcome" && /* @__PURE__ */ jsx(Button, { variant: "text", onClick: () => onWelcomeScreenContinue(), children: "Continue from scratch" }),
           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();
@@ -10416,7 +10354,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(65);
+  const $ = c(68);
   const {
     children,
     collectionConfigController,
@@ -10426,7 +10364,8 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
     extraView,
     getUser,
     getData,
-    onAnalyticsEvent
+    onAnalyticsEvent,
+    pathSuggestions
   } = t0;
   const navigation = useNavigationController();
   const navigate = useNavigate();
@@ -10438,7 +10377,7 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
   const [currentPropertyDialog, setCurrentPropertyDialog] = React__default.useState();
   const defaultConfigPermissions = _temp;
   let t1;
-  if ($[0] !== onAnalyticsEvent) {
+  if ($[0] !== onAnalyticsEvent || $[1] !== pathSuggestions) {
     t1 = (t26) => {
       const {
         id,
@@ -10459,17 +10398,19 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
         isNewCollection: false,
         parentCollection,
         redirect: false,
-        existingEntities
+        existingEntities,
+        pathSuggestions
       });
     };
     $[0] = onAnalyticsEvent;
-    $[1] = t1;
+    $[1] = pathSuggestions;
+    $[2] = t1;
   } else {
-    t1 = $[1];
+    t1 = $[2];
   }
   const editCollection = t1;
   let t2;
-  if ($[2] !== onAnalyticsEvent) {
+  if ($[3] !== onAnalyticsEvent) {
     t2 = (t32) => {
       const {
         propertyKey,
@@ -10498,14 +10439,14 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
         existingEntities: existingEntities_0
       });
     };
-    $[2] = onAnalyticsEvent;
-    $[3] = t2;
+    $[3] = onAnalyticsEvent;
+    $[4] = t2;
   } else {
-    t2 = $[3];
+    t2 = $[4];
   }
   const editProperty = t2;
   let t3;
-  if ($[4] !== onAnalyticsEvent) {
+  if ($[5] !== onAnalyticsEvent || $[6] !== pathSuggestions) {
     t3 = (t42) => {
       const {
         parentCollectionIds: parentCollectionIds_1,
@@ -10533,35 +10474,39 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
         parentCollectionIds: parentCollectionIds_1,
         parentCollection: parentCollection_0,
         initialValues,
-        redirect
+        redirect,
+        pathSuggestions
       });
     };
-    $[4] = onAnalyticsEvent;
-    $[5] = t3;
+    $[5] = onAnalyticsEvent;
+    $[6] = pathSuggestions;
+    $[7] = t3;
   } else {
-    t3 = $[5];
+    t3 = $[7];
   }
   const createCollection = t3;
   const t4 = configPermissions ?? defaultConfigPermissions;
   let t5;
-  if ($[6] !== createCollection || $[7] !== editCollection || $[8] !== editProperty || $[9] !== t4) {
+  if ($[8] !== createCollection || $[9] !== editCollection || $[10] !== editProperty || $[11] !== pathSuggestions || $[12] !== t4) {
     t5 = {
       editCollection,
       createCollection,
       editProperty,
-      configPermissions: t4
+      configPermissions: t4,
+      pathSuggestions
     };
-    $[6] = createCollection;
-    $[7] = editCollection;
-    $[8] = editProperty;
-    $[9] = t4;
-    $[10] = t5;
+    $[8] = createCollection;
+    $[9] = editCollection;
+    $[10] = editProperty;
+    $[11] = pathSuggestions;
+    $[12] = t4;
+    $[13] = t5;
   } else {
-    t5 = $[10];
+    t5 = $[13];
   }
   const t6 = Boolean(currentDialog);
   let t7;
-  if ($[11] !== currentDialog || $[12] !== navigate || $[13] !== navigation) {
+  if ($[14] !== currentDialog || $[15] !== navigate || $[16] !== navigation) {
     t7 = (collection_0) => {
       if (currentDialog?.redirect) {
         if (collection_0 && currentDialog?.isNewCollection && !currentDialog.parentCollectionIds.length) {
@@ -10571,28 +10516,28 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
       }
       setCurrentDialog(void 0);
     };
-    $[11] = currentDialog;
-    $[12] = navigate;
-    $[13] = navigation;
-    $[14] = t7;
+    $[14] = currentDialog;
+    $[15] = navigate;
+    $[16] = navigation;
+    $[17] = t7;
   } else {
-    t7 = $[14];
+    t7 = $[17];
   }
   let t8;
-  if ($[15] !== collectionConfigController || $[16] !== collectionInference || $[17] !== currentDialog || $[18] !== extraView || $[19] !== getData || $[20] !== getUser || $[21] !== reservedGroups || $[22] !== t6 || $[23] !== t7) {
+  if ($[18] !== collectionConfigController || $[19] !== collectionInference || $[20] !== currentDialog || $[21] !== extraView || $[22] !== getData || $[23] !== getUser || $[24] !== reservedGroups || $[25] !== t6 || $[26] !== 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;
+    $[18] = collectionConfigController;
+    $[19] = collectionInference;
+    $[20] = currentDialog;
+    $[21] = extraView;
+    $[22] = getData;
+    $[23] = getUser;
+    $[24] = reservedGroups;
+    $[25] = t6;
+    $[26] = t7;
+    $[27] = t8;
   } else {
-    t8 = $[24];
+    t8 = $[27];
   }
   const t9 = Boolean(currentPropertyDialog);
   const t10 = Boolean(currentPropertyDialog?.propertyKey);
@@ -10600,21 +10545,21 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
   const t12 = !currentPropertyDialog ? false : !currentPropertyDialog?.propertyKey;
   const t13 = currentPropertyDialog?.collectionEditable ?? false;
   let t14;
-  if ($[25] !== currentPropertyDialog || $[26] !== getData || $[27] !== navigation) {
+  if ($[28] !== currentPropertyDialog || $[29] !== getData || $[30] !== navigation) {
     t14 = getData && currentPropertyDialog?.editedCollectionId ? () => {
       console.debug("get data for property", currentPropertyDialog?.editedCollectionId);
       const resolvedPath = navigation.resolveIdsFrom(currentPropertyDialog.editedCollectionId);
       return getData(resolvedPath, []);
     } : void 0;
-    $[25] = currentPropertyDialog;
-    $[26] = getData;
-    $[27] = navigation;
-    $[28] = t14;
+    $[28] = currentPropertyDialog;
+    $[29] = getData;
+    $[30] = navigation;
+    $[31] = t14;
   } else {
-    t14 = $[28];
+    t14 = $[31];
   }
   let t15;
-  if ($[29] !== collectionConfigController || $[30] !== currentPropertyDialog || $[31] !== snackbarController) {
+  if ($[32] !== collectionConfigController || $[33] !== currentPropertyDialog || $[34] !== snackbarController) {
     t15 = (t162) => {
       const {
         id: id_0,
@@ -10643,15 +10588,15 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
         return false;
       });
     };
-    $[29] = collectionConfigController;
-    $[30] = currentPropertyDialog;
-    $[31] = snackbarController;
-    $[32] = t15;
+    $[32] = collectionConfigController;
+    $[33] = currentPropertyDialog;
+    $[34] = snackbarController;
+    $[35] = t15;
   } else {
-    t15 = $[32];
+    t15 = $[35];
   }
   let t16;
-  if ($[33] !== collectionConfigController || $[34] !== currentPropertyDialog?.currentPropertiesOrder || $[35] !== currentPropertyDialog?.editedCollectionId || $[36] !== currentPropertyDialog?.namespace || $[37] !== currentPropertyDialog?.parentCollectionIds || $[38] !== currentPropertyDialog?.propertyKey || $[39] !== snackbarController) {
+  if ($[36] !== collectionConfigController || $[37] !== currentPropertyDialog?.currentPropertiesOrder || $[38] !== currentPropertyDialog?.editedCollectionId || $[39] !== currentPropertyDialog?.namespace || $[40] !== currentPropertyDialog?.parentCollectionIds || $[41] !== currentPropertyDialog?.propertyKey || $[42] !== snackbarController) {
     t16 = () => {
       if (!currentPropertyDialog?.propertyKey) {
         return;
@@ -10674,21 +10619,21 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
         return false;
       });
     };
-    $[33] = collectionConfigController;
-    $[34] = currentPropertyDialog?.currentPropertiesOrder;
-    $[35] = currentPropertyDialog?.editedCollectionId;
-    $[36] = currentPropertyDialog?.namespace;
-    $[37] = currentPropertyDialog?.parentCollectionIds;
-    $[38] = currentPropertyDialog?.propertyKey;
-    $[39] = snackbarController;
-    $[40] = t16;
+    $[36] = collectionConfigController;
+    $[37] = currentPropertyDialog?.currentPropertiesOrder;
+    $[38] = currentPropertyDialog?.editedCollectionId;
+    $[39] = currentPropertyDialog?.namespace;
+    $[40] = currentPropertyDialog?.parentCollectionIds;
+    $[41] = currentPropertyDialog?.propertyKey;
+    $[42] = snackbarController;
+    $[43] = t16;
   } else {
-    t16 = $[40];
+    t16 = $[43];
   }
   let t17;
   let t18;
   let t19;
-  if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
     t17 = () => {
       setCurrentPropertyDialog(void 0);
     };
@@ -10696,64 +10641,64 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
       setCurrentPropertyDialog(void 0);
     };
     t19 = {};
-    $[41] = t17;
-    $[42] = t18;
-    $[43] = t19;
+    $[44] = t17;
+    $[45] = t18;
+    $[46] = t19;
   } else {
-    t17 = $[41];
-    t18 = $[42];
-    t19 = $[43];
+    t17 = $[44];
+    t18 = $[45];
+    t19 = $[46];
   }
   let t20;
-  if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[47] === Symbol.for("react.memo_cache_sentinel")) {
     t20 = [];
-    $[44] = t20;
+    $[47] = t20;
   } else {
-    t20 = $[44];
+    t20 = $[47];
   }
   const t21 = currentPropertyDialog?.property;
   const t22 = currentPropertyDialog?.propertyKey;
   let t23;
-  if ($[45] !== propertyConfigs || $[46] !== t10 || $[47] !== t11 || $[48] !== t12 || $[49] !== t13 || $[50] !== t14 || $[51] !== t15 || $[52] !== t16 || $[53] !== t21 || $[54] !== t22 || $[55] !== t9) {
+  if ($[48] !== propertyConfigs || $[49] !== t10 || $[50] !== t11 || $[51] !== t12 || $[52] !== t13 || $[53] !== t14 || $[54] !== t15 || $[55] !== t16 || $[56] !== t21 || $[57] !== t22 || $[58] !== 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 });
-    $[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];
+    $[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];
   }
   let t24;
-  if ($[57] !== children || $[58] !== t23 || $[59] !== t5 || $[60] !== t8) {
+  if ($[60] !== children || $[61] !== t23 || $[62] !== t5 || $[63] !== t8) {
     t24 = /* @__PURE__ */ jsxs(CollectionEditorContext.Provider, { value: t5, children: [
       children,
       t8,
       t23
     ] });
-    $[57] = children;
-    $[58] = t23;
-    $[59] = t5;
-    $[60] = t8;
-    $[61] = t24;
+    $[60] = children;
+    $[61] = t23;
+    $[62] = t5;
+    $[63] = t8;
+    $[64] = t24;
   } else {
-    t24 = $[61];
+    t24 = $[64];
   }
   let t25;
-  if ($[62] !== collectionConfigController || $[63] !== t24) {
+  if ($[65] !== collectionConfigController || $[66] !== t24) {
     t25 = /* @__PURE__ */ jsx(ConfigControllerContext.Provider, { value: collectionConfigController, children: t24 });
-    $[62] = collectionConfigController;
-    $[63] = t24;
-    $[64] = t25;
+    $[65] = collectionConfigController;
+    $[66] = t24;
+    $[67] = t25;
   } else {
-    t25 = $[64];
+    t25 = $[67];
   }
   return t25;
 }, equal);
@@ -11460,7 +11405,7 @@ function EditorEntityAction(t0) {
   return t9;
 }
 function useCollectionEditorPlugin(t0) {
-  const $ = c(22);
+  const $ = c(23);
   const {
     collectionConfigController,
     configPermissions,
@@ -11470,11 +11415,12 @@ function useCollectionEditorPlugin(t0) {
     collectionInference,
     getData,
     onAnalyticsEvent,
-    includeIntroView: t1
+    includeIntroView: t1,
+    pathSuggestions
   } = t0;
   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) {
+  if ($[0] !== collectionConfigController || $[1] !== collectionInference || $[2] !== configPermissions || $[3] !== extraView || $[4] !== getData || $[5] !== getUser || $[6] !== onAnalyticsEvent || $[7] !== pathSuggestions || $[8] !== reservedGroups) {
     t2 = {
       Component: ConfigControllerProvider,
       props: {
@@ -11485,7 +11431,8 @@ function useCollectionEditorPlugin(t0) {
         extraView,
         getUser,
         getData,
-        onAnalyticsEvent
+        onAnalyticsEvent,
+        pathSuggestions
       }
     };
     $[0] = collectionConfigController;
@@ -11495,28 +11442,29 @@ function useCollectionEditorPlugin(t0) {
     $[4] = getData;
     $[5] = getUser;
     $[6] = onAnalyticsEvent;
-    $[7] = reservedGroups;
-    $[8] = t2;
+    $[7] = pathSuggestions;
+    $[8] = reservedGroups;
+    $[9] = t2;
   } else {
-    t2 = $[8];
+    t2 = $[9];
   }
   let t3;
-  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
     t3 = /* @__PURE__ */ jsx(NewCollectionButton, {});
-    $[9] = t3;
+    $[10] = t3;
   } else {
-    t3 = $[9];
+    t3 = $[10];
   }
   let t4;
-  if ($[10] !== includeIntroView) {
+  if ($[11] !== includeIntroView) {
     t4 = includeIntroView ? /* @__PURE__ */ jsx(IntroWidget, {}) : void 0;
-    $[10] = includeIntroView;
-    $[11] = t4;
+    $[11] = includeIntroView;
+    $[12] = t4;
   } else {
-    t4 = $[11];
+    t4 = $[12];
   }
   let t5;
-  if ($[12] !== collectionConfigController.navigationEntries || $[13] !== collectionConfigController.saveNavigationEntries || $[14] !== t4) {
+  if ($[13] !== collectionConfigController.navigationEntries || $[14] !== collectionConfigController.saveNavigationEntries || $[15] !== t4) {
     t5 = {
       additionalActions: t3,
       additionalChildrenStart: t4,
@@ -11526,16 +11474,16 @@ function useCollectionEditorPlugin(t0) {
       navigationEntries: collectionConfigController.navigationEntries,
       onNavigationEntriesUpdate: collectionConfigController.saveNavigationEntries
     };
-    $[12] = collectionConfigController.navigationEntries;
-    $[13] = collectionConfigController.saveNavigationEntries;
-    $[14] = t4;
-    $[15] = t5;
+    $[13] = collectionConfigController.navigationEntries;
+    $[14] = collectionConfigController.saveNavigationEntries;
+    $[15] = t4;
+    $[16] = t5;
   } else {
-    t5 = $[15];
+    t5 = $[16];
   }
   let t6;
   let t7;
-  if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
     t6 = {
       CollectionActionsStart: EditorCollectionActionStart,
       CollectionActions: EditorCollectionAction,
@@ -11545,14 +11493,14 @@ function useCollectionEditorPlugin(t0) {
     t7 = {
       ActionsTop: EditorEntityAction
     };
-    $[16] = t6;
-    $[17] = t7;
+    $[17] = t6;
+    $[18] = t7;
   } else {
-    t6 = $[16];
-    t7 = $[17];
+    t6 = $[17];
+    t7 = $[18];
   }
   let t8;
-  if ($[18] !== collectionConfigController.loading || $[19] !== t2 || $[20] !== t5) {
+  if ($[19] !== collectionConfigController.loading || $[20] !== t2 || $[21] !== t5) {
     t8 = {
       key: "collection_editor",
       loading: collectionConfigController.loading,
@@ -11561,12 +11509,12 @@ function useCollectionEditorPlugin(t0) {
       collectionView: t6,
       form: t7
     };
-    $[18] = collectionConfigController.loading;
-    $[19] = t2;
-    $[20] = t5;
-    $[21] = t8;
+    $[19] = collectionConfigController.loading;
+    $[20] = t2;
+    $[21] = t5;
+    $[22] = t8;
   } else {
-    t8 = $[21];
+    t8 = $[22];
   }
   return t8;
 }
@@ -11698,7 +11646,7 @@ function MissingReferenceWidget(t0) {
       collectionEditor.createCollection({
         initialValues: {
           path,
-          name: unslugify(path)
+          name: prettifyIdentifier(path)
         },
         parentCollectionIds,
         redirect: false,