@firecms/collection_editor 3.0.0-tw4.1 → 3.0.0-tw4.13

package/dist/index.umd.js

@@ -3978,7 +3978,7 @@
         const newIdValue = e_0.target.value;
         const nameTouched = formex.getIn(touched, "name");
         if (!nameTouched && autoUpdateId) {
-          setFieldValue("name", newIdValue ? core.unslugify(newIdValue) : "");
+          setFieldValue("name", newIdValue ? core.prettifyIdentifier(newIdValue) : "");
         }
         setFieldValue("id", newIdValue, true);
         setFieldTouched("id", true);
@@ -8593,265 +8593,202 @@
     }
   };
   function CollectionEditorWelcomeView(t0) {
-    const $ = reactCompilerRuntime.c(56);
+    const $ = reactCompilerRuntime.c(39);
     const {
-      path,
-      pathSuggestions,
       parentCollection,
       onContinue,
       existingCollectionPaths
     } = t0;
-    const [loadingPathSuggestions, setLoadingPathSuggestions] = React.useState(false);
-    const [filteredPathSuggestions, setFilteredPathSuggestions] = React.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((c) => c.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((c) => c.trim().toLowerCase() === s.trim().toLowerCase());
+      $[2] = existingCollectionPaths;
+      $[3] = t2;
     } else {
-      t1 = $[3];
-      t2 = $[4];
+      t2 = $[3];
     }
-    React.useEffect(t1, t2);
+    const filteredSuggestions = t1.filter(t2);
     const {
       setFieldValue,
       setValues
     } = formex.useFormex();
-    const noSuggestions = !loadingPathSuggestions && (filteredPathSuggestions ?? [])?.length === 0;
-    if (!noSuggestions) {
-      return null;
-    }
-    let t3;
-    if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-      t3 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row py-2 pt-3 items-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "h4", className: "flex-grow", children: "New collection" }) });
-      $[5] = t3;
+    const t3 = "overflow-auto my-auto";
+    const T0 = ui.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__ */ jsxRuntime.jsx("div", { className: "flex flex-row py-2 pt-3 items-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "h4", className: "flex-grow", children: "New collection" }) });
+      $[4] = t6;
     } else {
-      t3 = $[5];
+      t6 = $[4];
     }
-    let t4;
-    if ($[6] !== parentCollection) {
-      t4 = parentCollection && /* @__PURE__ */ jsxRuntime.jsx(ui.Chip, { colorScheme: "tealDarker", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Typography, { variant: "caption", children: [
+    let t7;
+    if ($[5] !== parentCollection) {
+      t7 = parentCollection && /* @__PURE__ */ jsxRuntime.jsx(ui.Chip, { colorScheme: "tealDarker", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Typography, { variant: "caption", children: [
         "This is a subcollection of ",
         /* @__PURE__ */ jsxRuntime.jsx("b", { children: parentCollection.name })
       ] }) });
-      $[6] = parentCollection;
-      $[7] = t4;
-    } else {
-      t4 = $[7];
-    }
-    let t5;
-    if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-      t5 = /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ui.Chip, { colorScheme: "cyanLighter", onClick: () => {
-        setFieldValue("name", core.unslugify(suggestion));
+    const t8 = (filteredSuggestions ?? []).length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", color: "secondary", children: "● Use one of the existing paths in your database:" }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.Chip, { colorScheme: "cyanLighter", onClick: () => {
+        setFieldValue("name", core.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsxs("div", { className: "my-2", children: [
-        t5,
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", color: "secondary", children: "● Select a template:" });
-      $[23] = t10;
+    if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+      t10 = /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ui.Icon, { size: "small", iconKey: productsCollectionTemplate.icon });
-      $[24] = t11;
-    } else {
-      t11 = $[24];
-    }
-    let t12;
-    if ($[25] !== onContinue || $[26] !== setValues) {
-      t12 = /* @__PURE__ */ jsxRuntime.jsx(TemplateButton, { title: "Products", subtitle: "A collection of products with images, prices and stock", icon: t11, onClick: () => {
+    if ($[9] !== onContinue || $[10] !== setValues) {
+      t11 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.Icon, { size: "small", iconKey: usersCollectionTemplate.icon });
-      $[28] = t13;
+    let t12;
+    if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+      t12 = /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { size: "small", iconKey: usersCollectionTemplate.icon });
+      $[12] = t12;
     } else {
-      t13 = $[28];
+      t12 = $[12];
     }
-    let t14;
-    if ($[29] !== onContinue || $[30] !== setValues) {
-      t14 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.Icon, { size: "small", iconKey: blogCollectionTemplate.icon });
-      $[32] = t15;
+    let t14;
+    if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+      t14 = /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { size: "small", iconKey: blogCollectionTemplate.icon });
+      $[16] = t14;
     } else {
-      t15 = $[32];
+      t14 = $[16];
     }
-    let t16;
-    if ($[33] !== onContinue || $[34] !== setValues) {
-      t16 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.Icon, { size: "small", iconKey: pagesCollectionTemplate.icon });
-      $[36] = t17;
+    let t16;
+    if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+      t16 = /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { size: "small", iconKey: pagesCollectionTemplate.icon });
+      $[20] = t16;
     } else {
-      t17 = $[36];
+      t16 = $[20];
     }
-    let t18;
-    if ($[37] !== onContinue || $[38] !== setValues) {
-      t18 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "my-2", children: [
-        t10,
+    let t18;
+    if ($[24] !== t11 || $[25] !== t13 || $[26] !== t15 || $[27] !== t17) {
+      t18 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-2", children: [
+        t9,
         /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { children: [
+    let t19;
+    if ($[29] !== onContinue || $[30] !== parentCollection) {
+      t19 = !parentCollection && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", color: "secondary", className: "mb-2", children: "● Create a collection from a file (csv, json, xls, xslx...)" }),
         /* @__PURE__ */ jsxRuntime.jsx(data_import.ImportFileUpload, { onDataAdded: (data, propertiesOrder) => onContinue(data, propertiesOrder) })
       ] });
-      $[45] = onContinue;
-      $[46] = parentCollection;
-      $[47] = t20;
-    } else {
-      t20 = $[47];
-    }
-    let t21;
-    if ($[48] !== onContinue) {
-      t21 = /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx("div", { className: "overflow-auto my-auto", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { maxWidth: "4xl", className: "flex flex-col gap-4 p-8 m-auto", children: [
-        t3,
-        t4,
-        t9,
-        t19,
-        t20,
-        t21
+    let t20;
+    if ($[32] !== T0 || $[33] !== t18 || $[34] !== t19 || $[35] !== t6 || $[36] !== t7 || $[37] !== t8) {
+      t20 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t3, children: /* @__PURE__ */ jsxRuntime.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 $ = reactCompilerRuntime.c(10);
@@ -9989,7 +9926,6 @@
     extraView,
     handleCancel,
     setFormDirty,
-    pathSuggestions,
     getUser,
     parentCollection,
     getData,
@@ -10268,6 +10204,14 @@
         });
       });
     };
+    const onWelcomeScreenContinue = (importData, propertiesOrder_0) => {
+      if (importData) {
+        onImportDataSet(importData, propertiesOrder_0);
+        setCurrentView("import_data_mapping");
+      } else {
+        setCurrentView("details");
+      }
+    };
     return /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogContent, { fullHeight: true, children: [
       /* @__PURE__ */ jsxRuntime.jsx(formex.Formex, { value: formController, children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         !isNewCollection && /* @__PURE__ */ jsxRuntime.jsxs(ui.Tabs, { value: currentView, innerClassName: ui.cls(ui.defaultBorderMixin, "px-4 h-14 w-full justify-end bg-surface-50 dark:bg-surface-950 border-b"), onValueChange: (v) => setCurrentView(v), children: [
@@ -10279,14 +10223,7 @@
         /* @__PURE__ */ jsxRuntime.jsxs("form", { noValidate: true, onSubmit: formController.handleSubmit, className: ui.cls(isNewCollection ? "h-full" : "h-[calc(100%-48px)]", "flex-grow flex flex-col relative"), children: [
           currentView === "loading" && /* @__PURE__ */ jsxRuntime.jsx(core.CircularProgressCenter, {}),
           currentView === "extra_view" && path && extraView?.View && /* @__PURE__ */ jsxRuntime.jsx(extraView.View, { path }),
-          currentView === "welcome" && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(CollectionEditorWelcomeView, { path, onContinue: onWelcomeScreenContinue, existingCollectionPaths: existingPaths, parentCollection }),
           currentView === "import_data_mapping" && importConfig && /* @__PURE__ */ jsxRuntime.jsx(CollectionEditorImportMapping, { importConfig, collectionEditable, propertyConfigs }),
           currentView === "import_data_preview" && importConfig && /* @__PURE__ */ jsxRuntime.jsx(CollectionEditorImportDataPreview, { importConfig, properties: values_1.properties, propertiesOrder: values_1.propertiesOrder }),
           currentView === "import_data_saving" && importConfig && /* @__PURE__ */ jsxRuntime.jsx(data_import.ImportSaveInProgress, { importConfig, collection: values_1, path, onImportSuccess: async (importedCollection) => {
@@ -10313,7 +10250,7 @@
             propertyErrorsRef.current = current;
             formController.validate();
           }, getUser, getData: getDataWithPath, doCollectionInference, propertyConfigs, collectionEditable, extraIcon: extraView?.icon && /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { color: "primary", onClick: () => setCurrentView("extra_view"), children: extraView.icon }) }),
-          currentView !== "welcome" && /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogActions, { position: "absolute", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogActions, { position: "absolute", children: [
             error && /* @__PURE__ */ jsxRuntime.jsx(core.ErrorView, { error }),
             isNewCollection && includeTemplates && currentView === "import_data_mapping" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "text", type: "button", color: "primary", onClick: () => {
               importConfig.setInUse(false);
@@ -10328,17 +10265,18 @@
               /* @__PURE__ */ jsxRuntime.jsx(ui.ArrowBackIcon, {}),
               "Back"
             ] }),
-            isNewCollection && includeTemplates && currentView === "details" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "text", color: "primary", type: "button", onClick: () => setCurrentView("welcome"), children: [
+            isNewCollection && includeTemplates && currentView === "details" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "text", color: "neutral", type: "button", onClick: () => setCurrentView("welcome"), children: [
               /* @__PURE__ */ jsxRuntime.jsx(ui.ArrowBackIcon, {}),
               "Back"
             ] }),
-            isNewCollection && currentView === "properties" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "text", type: "button", color: "primary", onClick: () => setCurrentView("details"), children: [
+            isNewCollection && currentView === "properties" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "text", type: "button", color: "neutral", onClick: () => setCurrentView("details"), children: [
               /* @__PURE__ */ jsxRuntime.jsx(ui.ArrowBackIcon, {}),
               "Back"
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", color: "primary", onClick: () => {
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", color: "neutral", onClick: () => {
               handleCancel();
             }, children: "Cancel" }),
+            currentView === "welcome" && /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", onClick: () => onWelcomeScreenContinue(), children: "Continue from scratch" }),
             isNewCollection && currentView === "import_data_mapping" && /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "filled", color: "primary", onClick: onImportMappingComplete, children: "Next" }),
             isNewCollection && currentView === "import_data_preview" && /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "filled", color: "primary", onClick: () => {
               setNextMode();
@@ -10420,7 +10358,7 @@
   const ConfigControllerContext = React.createContext({});
   const CollectionEditorContext = React.createContext({});
   const ConfigControllerProvider = React.memo(function ConfigControllerProvider2(t0) {
-    const $ = reactCompilerRuntime.c(65);
+    const $ = reactCompilerRuntime.c(68);
     const {
       children,
       collectionConfigController,
@@ -10430,7 +10368,8 @@
       extraView,
       getUser,
       getData,
-      onAnalyticsEvent
+      onAnalyticsEvent,
+      pathSuggestions
     } = t0;
     const navigation = core.useNavigationController();
     const navigate = reactRouter.useNavigate();
@@ -10442,7 +10381,7 @@
     const [currentPropertyDialog, setCurrentPropertyDialog] = React.useState();
     const defaultConfigPermissions = _temp;
     let t1;
-    if ($[0] !== onAnalyticsEvent) {
+    if ($[0] !== onAnalyticsEvent || $[1] !== pathSuggestions) {
       t1 = (t26) => {
         const {
           id,
@@ -10463,17 +10402,19 @@
           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,
@@ -10502,14 +10443,14 @@
           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,
@@ -10537,35 +10478,39 @@
           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) {
@@ -10575,28 +10520,28 @@
         }
         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__ */ jsxRuntime.jsx(CollectionEditorDialog, { open: t6, configController: collectionConfigController, isNewCollection: false, collectionInference, ...currentDialog, getData, reservedGroups, extraView, getUser, handleClose: t7 });
-      $[15] = collectionConfigController;
-      $[16] = collectionInference;
-      $[17] = currentDialog;
-      $[18] = extraView;
-      $[19] = getData;
-      $[20] = getUser;
-      $[21] = reservedGroups;
-      $[22] = t6;
-      $[23] = t7;
-      $[24] = t8;
+      $[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);
@@ -10604,21 +10549,21 @@
     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,
@@ -10647,15 +10592,15 @@
           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;
@@ -10678,21 +10623,21 @@
           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);
       };
@@ -10700,64 +10645,64 @@
         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__ */ jsxRuntime.jsx(PropertyFormDialog, { open: t9, includeIdAndName: true, existingProperty: t10, autoUpdateId: t11, autoOpenTypeSelect: t12, inArray: false, collectionEditable: t13, getData: t14, onPropertyChanged: t15, onPropertyChangedImmediate: false, onDelete: t16, onError: _temp2, onOkClicked: t17, onCancel: t18, initialErrors: t19, forceShowErrors: false, existingPropertyKeys: t20, allowDataInference: true, propertyConfigs, property: t21, propertyKey: t22 });
-      $[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__ */ jsxRuntime.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__ */ jsxRuntime.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);
@@ -11464,7 +11409,7 @@
     return t9;
   }
   function useCollectionEditorPlugin(t0) {
-    const $ = reactCompilerRuntime.c(22);
+    const $ = reactCompilerRuntime.c(23);
     const {
       collectionConfigController,
       configPermissions,
@@ -11474,11 +11419,12 @@
       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: {
@@ -11489,7 +11435,8 @@
           extraView,
           getUser,
           getData,
-          onAnalyticsEvent
+          onAnalyticsEvent,
+          pathSuggestions
         }
       };
       $[0] = collectionConfigController;
@@ -11499,28 +11446,29 @@
       $[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__ */ jsxRuntime.jsx(NewCollectionButton, {});
-      $[9] = t3;
+      $[10] = t3;
     } else {
-      t3 = $[9];
+      t3 = $[10];
     }
     let t4;
-    if ($[10] !== includeIntroView) {
+    if ($[11] !== includeIntroView) {
       t4 = includeIntroView ? /* @__PURE__ */ jsxRuntime.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,
@@ -11530,16 +11478,16 @@
         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,
@@ -11549,14 +11497,14 @@
       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,
@@ -11565,12 +11513,12 @@
         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;
   }
@@ -11702,7 +11650,7 @@
         collectionEditor.createCollection({
           initialValues: {
             path,
-            name: core.unslugify(path)
+            name: core.prettifyIdentifier(path)
           },
           parentCollectionIds,
           redirect: false,