@firecms/core 3.0.0-canary.248 → 3.0.0-canary.249

package/dist/index.umd.js

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react-compiler-runtime"), require("react"), require("@firecms/ui"), require("notistack"), require("object-hash"), require("@firecms/formex"), require("react-router-dom"), require("fuse.js"), require("react-fast-compare"), require("date-fns"), require("date-fns/locale"), require("react-use-measure"), require("yup"), require("react-window"), require("@dnd-kit/core"), require("@dnd-kit/modifiers"), require("@dnd-kit/sortable"), require("@dnd-kit/utilities"), require("react-dropzone"), require("react-image-file-resizer"), require("@firecms/editor"), require("prism-react-renderer"), require("react-router"), require("@radix-ui/react-portal")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react-compiler-runtime", "react", "@firecms/ui", "notistack", "object-hash", "@firecms/formex", "react-router-dom", "fuse.js", "react-fast-compare", "date-fns", "date-fns/locale", "react-use-measure", "yup", "react-window", "@dnd-kit/core", "@dnd-kit/modifiers", "@dnd-kit/sortable", "@dnd-kit/utilities", "react-dropzone", "react-image-file-resizer", "@firecms/editor", "prism-react-renderer", "react-router", "@radix-ui/react-portal"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["FireCMS Core"] = {}, global.jsxRuntime, global.reactCompilerRuntime, global.React, global.ui, global.notistack, global.hash, global.formex, global.reactRouterDom, global.Fuse, global.equal, global.dateFns, global.locales, global.useMeasure, global.yup, global.reactWindow, global.core, global.modifiers, global.sortable, global.utilities, global.reactDropzone, global.Resizer, global.editor, global.prismReactRenderer, global.reactRouter, global.Portal));
-})(this, function(exports2, jsxRuntime, reactCompilerRuntime, React, ui, notistack, hash, formex, reactRouterDom, Fuse, equal, dateFns, locales, useMeasure, yup, reactWindow, core, modifiers, sortable, utilities, reactDropzone, Resizer, editor, prismReactRenderer, reactRouter, Portal) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react-compiler-runtime"), require("react"), require("@firecms/ui"), require("notistack"), require("object-hash"), require("@firecms/formex"), require("react-router-dom"), require("fuse.js"), require("react-fast-compare"), require("date-fns"), require("date-fns/locale"), require("react-use-measure"), require("yup"), require("react-window"), require("@dnd-kit/core"), require("@dnd-kit/sortable"), require("@dnd-kit/utilities"), require("@dnd-kit/modifiers"), require("react-dropzone"), require("react-image-file-resizer"), require("@firecms/editor"), require("prism-react-renderer"), require("react-router"), require("@radix-ui/react-portal")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react-compiler-runtime", "react", "@firecms/ui", "notistack", "object-hash", "@firecms/formex", "react-router-dom", "fuse.js", "react-fast-compare", "date-fns", "date-fns/locale", "react-use-measure", "yup", "react-window", "@dnd-kit/core", "@dnd-kit/sortable", "@dnd-kit/utilities", "@dnd-kit/modifiers", "react-dropzone", "react-image-file-resizer", "@firecms/editor", "prism-react-renderer", "react-router", "@radix-ui/react-portal"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["FireCMS Core"] = {}, global.jsxRuntime, global.reactCompilerRuntime, global.React, global.ui, global.notistack, global.hash, global.formex, global.reactRouterDom, global.Fuse, global.equal, global.dateFns, global.locales, global.useMeasure, global.yup, global.reactWindow, global.core, global.sortable, global.utilities, global.modifiers, global.reactDropzone, global.Resizer, global.editor, global.prismReactRenderer, global.reactRouter, global.Portal));
+})(this, function(exports2, jsxRuntime, reactCompilerRuntime, React, ui, notistack, hash, formex, reactRouterDom, Fuse, equal, dateFns, locales, useMeasure, yup, reactWindow, core, sortable, utilities, modifiers, reactDropzone, Resizer, editor, prismReactRenderer, reactRouter, Portal) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -3183,16 +3183,16 @@
     }
     return Math.abs(hash2);
   }
-  function getIcon(iconKey, className, color) {
+  function getIcon(iconKey, className, color, size) {
     if (!iconKey) return void 0;
     iconKey = slugify(iconKey);
     if (!(iconKey in iconKeysMap)) {
       return void 0;
     }
-    return iconKey in iconKeysMap ? /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { iconKey, size: "medium", className, color }) : void 0;
+    return iconKey in iconKeysMap ? /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { iconKey, size, className, color }) : void 0;
   }
   const IconForView = React.memo(function IconForView2(t0) {
-    const $ = reactCompilerRuntime.c(14);
+    const $ = reactCompilerRuntime.c(15);
     const {
       collectionOrView,
       className,
@@ -3211,14 +3211,15 @@
       return t22;
     }
     let t2;
-    if ($[1] !== className || $[2] !== collectionOrView.icon || $[3] !== color) {
-      t2 = getIcon(collectionOrView.icon, className, color);
+    if ($[1] !== className || $[2] !== collectionOrView.icon || $[3] !== color || $[4] !== size) {
+      t2 = getIcon(collectionOrView.icon, className, color, size);
       $[1] = className;
       $[2] = collectionOrView.icon;
       $[3] = color;
-      $[4] = t2;
+      $[4] = size;
+      $[5] = t2;
     } else {
-      t2 = $[4];
+      t2 = $[5];
     }
     const icon = t2;
     if (collectionOrView?.icon && icon) {
@@ -3226,12 +3227,12 @@
     }
     const t3 = ("singularName" in collectionOrView ? collectionOrView.singularName : void 0) ?? collectionOrView.name;
     let t4;
-    if ($[5] !== t3) {
+    if ($[6] !== t3) {
       t4 = slugify(t3);
-      $[5] = t3;
-      $[6] = t4;
+      $[6] = t3;
+      $[7] = t4;
     } else {
-      t4 = $[6];
+      t4 = $[7];
     }
     let slugName = t4;
     let key;
@@ -3240,12 +3241,12 @@
     }
     if (!key) {
       let t52;
-      if ($[7] !== collectionOrView.path) {
+      if ($[8] !== collectionOrView.path) {
         t52 = slugify(collectionOrView.path);
-        $[7] = collectionOrView.path;
-        $[8] = t52;
+        $[8] = collectionOrView.path;
+        $[9] = t52;
       } else {
-        t52 = $[8];
+        t52 = $[9];
       }
       slugName = t52;
       if (slugName in iconKeysMap) {
@@ -3257,15 +3258,15 @@
       key = ui.coolIconKeys[hashString(collectionOrView.path) % iconsCount];
     }
     let t5;
-    if ($[9] !== className || $[10] !== color || $[11] !== key || $[12] !== size) {
+    if ($[10] !== className || $[11] !== color || $[12] !== key || $[13] !== size) {
       t5 = /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { iconKey: key, size, className, color });
-      $[9] = className;
-      $[10] = color;
-      $[11] = key;
-      $[12] = size;
-      $[13] = t5;
+      $[10] = className;
+      $[11] = color;
+      $[12] = key;
+      $[13] = size;
+      $[14] = t5;
     } else {
-      t5 = $[13];
+      t5 = $[14];
     }
     return t5;
   }, (prevProps, nextProps) => {
@@ -4142,7 +4143,7 @@
           }
           setDataLoading(false);
           setDataLoadingError(void 0);
-          setData(entities.map(_temp$s));
+          setData(entities.map(_temp$r));
           setNoMoreToLoad(!itemCount || entities.length < itemCount);
         };
         const onError = (error) => {
@@ -4175,7 +4176,7 @@
             orderBy: sortByProperty,
             order: currentSort
           }).then(onEntitiesUpdate).catch(onError);
-          return _temp2$e;
+          return _temp2$d;
         }
       };
       $[4] = collection;
@@ -4223,9 +4224,9 @@
     }
     return t5;
   }
-  function _temp2$e() {
+  function _temp2$d() {
   }
-  function _temp$s(e_0) {
+  function _temp$r(e_0) {
     return {
       ...e_0
     };
@@ -4290,7 +4291,7 @@
           setEntity(CACHE[`${path}/${entityId}`]);
           setDataLoading(false);
           setDataLoadingError(void 0);
-          return _temp$r;
+          return _temp$q;
         } else {
           if (entityId && path && collection) {
             if (dataSource.listenEntity) {
@@ -4309,11 +4310,11 @@
                 databaseId,
                 collection
               }).then(onEntityUpdate).catch(onError);
-              return _temp2$d;
+              return _temp2$c;
             }
           } else {
             onEntityUpdate(void 0);
-            return _temp3$5;
+            return _temp3$4;
           }
         }
       };
@@ -4354,11 +4355,11 @@
     }
     return t5;
   }
-  function _temp3$5() {
+  function _temp3$4() {
   }
-  function _temp2$d() {
+  function _temp2$c() {
   }
-  function _temp$r() {
+  function _temp$q() {
   }
   async function saveEntityWithCallbacks({
     collection,
@@ -4942,7 +4943,7 @@
     }
     let t9;
     if ($[16] !== url) {
-      t9 = /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Open image in new tab", side: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { className: "invisible group-hover:visible", variant: "filled", component: "a", href: url, rel: "noopener noreferrer", target: "_blank", size: "smallest", onClick: _temp$q, children: t8 }) });
+      t9 = /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Open image in new tab", side: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { className: "invisible group-hover:visible", variant: "filled", component: "a", href: url, rel: "noopener noreferrer", target: "_blank", size: "smallest", onClick: _temp$p, children: t8 }) });
       $[16] = url;
       $[17] = t9;
     } else {
@@ -4976,7 +4977,7 @@
     }
     return t11;
   }
-  function _temp$q(e_0) {
+  function _temp$p(e_0) {
     return e_0.stopPropagation();
   }
   function UrlComponentPreview(t0) {
@@ -5009,7 +5010,7 @@
       }
       let t3;
       if ($[2] !== url) {
-        t3 = /* @__PURE__ */ jsxRuntime.jsxs("a", { className: "flex gap-4 break-words items-center font-medium text-primary visited:text-primary dark:visited:text-primary dark:text-primary", href: url, rel: "noopener noreferrer", onMouseDown: _temp$p, target: "_blank", children: [
+        t3 = /* @__PURE__ */ jsxRuntime.jsxs("a", { className: "flex gap-4 break-words items-center font-medium text-primary visited:text-primary dark:visited:text-primary dark:text-primary", href: url, rel: "noopener noreferrer", onMouseDown: _temp$o, target: "_blank", children: [
           t2,
           url
         ] });
@@ -5112,7 +5113,7 @@
           }
           let t7;
           if ($[24] !== t4 || $[25] !== t6 || $[26] !== url) {
-            t7 = /* @__PURE__ */ jsxRuntime.jsxs("a", { href: url, rel: "noopener noreferrer", target: "_blank", onClick: _temp2$c, className: "flex flex-col items-center justify-center", style: t4, children: [
+            t7 = /* @__PURE__ */ jsxRuntime.jsxs("a", { href: url, rel: "noopener noreferrer", target: "_blank", onClick: _temp2$b, className: "flex flex-col items-center justify-center", style: t4, children: [
               t5,
               t6
             ] });
@@ -5137,10 +5138,10 @@
       }
     }
   }
-  function _temp2$c(e_0) {
+  function _temp2$b(e_0) {
     return e_0.stopPropagation();
   }
-  function _temp$p(e) {
+  function _temp$o(e) {
     e.preventDefault();
   }
   function VideoPreview(t0) {
@@ -5274,7 +5275,7 @@
           if (Array.isArray(arrayProperty.of)) {
             let t1;
             if ($[6] !== arrayProperty.of) {
-              t1 = arrayProperty.of.map(_temp$o);
+              t1 = arrayProperty.of.map(_temp$n);
               $[6] = arrayProperty.of;
               $[7] = t1;
             } else {
@@ -5412,7 +5413,7 @@
     }
     return content || null;
   }
-  function _temp$o(p, i) {
+  function _temp$n(p, i) {
     return renderGenericArrayCell(p, i);
   }
   function renderMap(property, size) {
@@ -6594,7 +6595,7 @@
     }
     let t1;
     if ($[1] !== value) {
-      t1 = Object.entries(value).map(_temp$n);
+      t1 = Object.entries(value).map(_temp$m);
       $[1] = value;
       $[2] = t1;
     } else {
@@ -6610,7 +6611,7 @@
     }
     return t2;
   }
-  function _temp$n(t0) {
+  function _temp$m(t0) {
     const [key, childValue] = t0;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls(ui.defaultBorderMixin, "last:border-b-0 border-b"), children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row pt-0.5 pb-0.5 gap-2", children: [
@@ -6744,7 +6745,7 @@
     }
   }
   const PropertyPreview = React.memo(function PropertyPreview2(props) {
-    const $ = reactCompilerRuntime.c(30);
+    const $ = reactCompilerRuntime.c(31);
     const authController = useAuthController();
     const customizationController = useCustomizationController();
     let content;
@@ -6843,7 +6844,22 @@
                       }
                       content = t02;
                     } else {
-                      content = /* @__PURE__ */ jsxRuntime.jsx(StringPropertyPreview, { ...props, property: stringProperty, value });
+                      if (stringProperty.reference) {
+                        if (typeof stringProperty.reference.path === "string") {
+                          content = /* @__PURE__ */ jsxRuntime.jsx(ReferencePreview, { disabled: !stringProperty.reference.path, previewProperties: stringProperty.reference.previewProperties, includeId: stringProperty.reference.includeId, includeEntityLink: stringProperty.reference.includeEntityLink, size: props.size, reference: new EntityReference(value, stringProperty.reference.path) });
+                        } else {
+                          let t02;
+                          if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+                            t02 = /* @__PURE__ */ jsxRuntime.jsx(EmptyValue, {});
+                            $[23] = t02;
+                          } else {
+                            t02 = $[23];
+                          }
+                          content = t02;
+                        }
+                      } else {
+                        content = /* @__PURE__ */ jsxRuntime.jsx(StringPropertyPreview, { ...props, property: stringProperty, value });
+                      }
                     }
                   }
                 }
@@ -6902,12 +6918,12 @@
                   if (property.dataType === "date") {
                     if (value instanceof Date) {
                       let t02;
-                      if ($[23] !== value) {
+                      if ($[24] !== value) {
                         t02 = /* @__PURE__ */ jsxRuntime.jsx(DatePreview, { date: value });
-                        $[23] = value;
-                        $[24] = t02;
+                        $[24] = value;
+                        $[25] = t02;
                       } else {
-                        t02 = $[24];
+                        t02 = $[25];
                       }
                       content = t02;
                     } else {
@@ -6923,11 +6939,11 @@
                         }
                       } else {
                         let t02;
-                        if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+                        if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
                           t02 = /* @__PURE__ */ jsxRuntime.jsx(EmptyValue, {});
-                          $[25] = t02;
+                          $[26] = t02;
                         } else {
-                          t02 = $[25];
+                          t02 = $[26];
                         }
                         content = t02;
                       }
@@ -6947,12 +6963,12 @@
                           }
                         } else {
                           let t02;
-                          if ($[26] !== value) {
+                          if ($[27] !== value) {
                             t02 = JSON.stringify(value);
-                            $[26] = value;
-                            $[27] = t02;
+                            $[27] = value;
+                            $[28] = t02;
                           } else {
-                            t02 = $[27];
+                            t02 = $[28];
                           }
                           content = t02;
                         }
@@ -6980,12 +6996,12 @@
       content = $[10];
     }
     let t0;
-    if ($[28] !== content) {
+    if ($[29] !== content) {
       t0 = content === void 0 || content === null || Array.isArray(content) && content.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(EmptyValue, {}) : content;
-      $[28] = content;
-      $[29] = t0;
+      $[29] = content;
+      $[30] = t0;
     } else {
-      t0 = $[29];
+      t0 = $[30];
     }
     return t0;
   }, equal);
@@ -7363,7 +7379,7 @@
         console.trace("onChange");
         if (valueType === "number") {
           if (multiple) {
-            const newValue = updatedValue.map(_temp$m);
+            const newValue = updatedValue.map(_temp$l);
             updateValue(newValue);
           } else {
             updateValue(parseFloat(updatedValue));
@@ -7400,7 +7416,7 @@
     const renderValue = t3;
     let t4;
     if ($[10] !== disabled || $[11] !== enumValues || $[12] !== internalValue || $[13] !== multiple || $[14] !== onChange || $[15] !== renderValue || $[16] !== small || $[17] !== validValue) {
-      t4 = multiple ? /* @__PURE__ */ jsxRuntime.jsx(ui.MultiSelect, { inputRef: ref, className: "w-full h-full p-0 bg-transparent", position: "item-aligned", disabled, includeClear: false, useChips: false, value: validValue ? internalValue.map(_temp2$b) : [], onValueChange: onChange, children: enumValues?.map((enumConfig) => /* @__PURE__ */ jsxRuntime.jsx(ui.MultiSelectItem, { value: String(enumConfig.id), children: /* @__PURE__ */ jsxRuntime.jsx(EnumValuesChip, { enumKey: enumConfig.id, enumValues, size: small ? "small" : "medium" }) }, enumConfig.id)) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { inputRef: ref, size: "large", fullWidth: true, className: "w-full h-full p-0 bg-transparent", position: "item-aligned", disabled, padding: false, value: validValue ? internalValue?.toString() : "", onValueChange: onChange, renderValue, children: enumValues?.map((enumConfig_0) => /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: String(enumConfig_0.id), children: /* @__PURE__ */ jsxRuntime.jsx(EnumValuesChip, { enumKey: enumConfig_0.id, enumValues, size: small ? "small" : "medium" }) }, enumConfig_0.id)) });
+      t4 = multiple ? /* @__PURE__ */ jsxRuntime.jsx(ui.MultiSelect, { inputRef: ref, className: "w-full h-full p-0 bg-transparent", position: "item-aligned", disabled, includeClear: false, useChips: false, value: validValue ? internalValue.map(_temp2$a) : [], onValueChange: onChange, children: enumValues?.map((enumConfig) => /* @__PURE__ */ jsxRuntime.jsx(ui.MultiSelectItem, { value: String(enumConfig.id), children: /* @__PURE__ */ jsxRuntime.jsx(EnumValuesChip, { enumKey: enumConfig.id, enumValues, size: small ? "small" : "medium" }) }, enumConfig.id)) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { inputRef: ref, size: "large", fullWidth: true, className: "w-full h-full p-0 bg-transparent", position: "item-aligned", disabled, padding: false, value: validValue ? internalValue?.toString() : "", onValueChange: onChange, renderValue, children: enumValues?.map((enumConfig_0) => /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: String(enumConfig_0.id), children: /* @__PURE__ */ jsxRuntime.jsx(EnumValuesChip, { enumKey: enumConfig_0.id, enumValues, size: small ? "small" : "medium" }) }, enumConfig_0.id)) });
       $[10] = disabled;
       $[11] = enumValues;
       $[12] = internalValue;
@@ -7415,10 +7431,10 @@
     }
     return t4;
   }
-  function _temp2$b(v_0) {
+  function _temp2$a(v_0) {
     return v_0.toString();
   }
-  function _temp$m(v) {
+  function _temp$l(v) {
     return parseFloat(v);
   }
   function VirtualTableNumberInput(props) {
@@ -7977,7 +7993,7 @@
     const snackbarContext = useSnackbarController();
     let t1;
     if ($[0] !== storage.acceptedFiles) {
-      t1 = storage.acceptedFiles ? storage.acceptedFiles.map(_temp$l).reduce(_temp2$a, {}) : void 0;
+      t1 = storage.acceptedFiles ? storage.acceptedFiles.map(_temp$k).reduce(_temp2$9, {}) : void 0;
       $[0] = storage.acceptedFiles;
       $[1] = t1;
     } else {
@@ -8200,13 +8216,13 @@
     }
     return t20;
   }
-  function _temp2$a(a, b) {
+  function _temp2$9(a, b) {
     return {
       ...a,
       ...b
     };
   }
-  function _temp$l(e) {
+  function _temp$k(e) {
     return {
       [e]: []
     };
@@ -8313,7 +8329,7 @@
     let t1;
     if ($[2] !== updateValue) {
       t1 = (entities) => {
-        updateValue(entities.map(_temp$k));
+        updateValue(entities.map(_temp$j));
       };
       $[2] = updateValue;
       $[3] = t1;
@@ -8323,7 +8339,7 @@
     const onMultipleEntitiesSelected = t1;
     let t2;
     if ($[4] !== internalValue) {
-      t2 = internalValue ? Array.isArray(internalValue) ? internalValue.map(_temp2$9) : internalValue.id ? [internalValue.id] : [] : [];
+      t2 = internalValue ? Array.isArray(internalValue) ? internalValue.map(_temp2$8) : internalValue.id ? [internalValue.id] : [] : [];
       $[4] = internalValue;
       $[5] = t2;
     } else {
@@ -8474,10 +8490,10 @@
     }
     return t10;
   }, equal);
-  function _temp$k(e) {
+  function _temp$j(e) {
     return getReferenceFrom(e);
   }
-  function _temp2$9(ref) {
+  function _temp2$8(ref) {
     return ref.id;
   }
   yup__namespace.addMethod(yup__namespace.array, "uniqueInArray", function(mapper = (a) => a, message) {
@@ -9309,7 +9325,14 @@
     }
     if (!customField && (!customPreview || selected)) {
       const isAStorageProperty = isStorageProperty(property);
-      if (isAStorageProperty) {
+      if (property.dataType === "string" && property.reference?.path) {
+        const stringProperty = property;
+        const path_0 = stringProperty.reference?.path;
+        const referenceProperty = stringProperty.reference;
+        const referenceValue = internalValue ? new EntityReference(internalValue, path_0) : void 0;
+        innerComponent = /* @__PURE__ */ jsxRuntime.jsx(TableReferenceField, { name: propertyKey, internalValue: referenceValue, updateValue: (v) => updateValue(v ? v.id : null), disabled, size, path: path_0, multiselect: false, previewProperties: referenceProperty.previewProperties, includeId: referenceProperty.includeId, includeEntityLink: referenceProperty.includeEntityLink, title: stringProperty.name, forceFilter: referenceProperty.forceFilter });
+        allowScroll = false;
+      } else if (isAStorageProperty) {
         innerComponent = /* @__PURE__ */ jsxRuntime.jsx(TableStorageUpload, { error: validationError ?? error, disabled, focused: selected, selected, openPopup: setPopupCell ? openPopup : void 0, property, entity, path, value: internalValue, previewSize: getPreviewSizeFrom(size), updateValue, propertyKey });
         includeActions = false;
         showExpandIcon = true;
@@ -9325,12 +9348,12 @@
           allowScroll = true;
         }
       } else if (selected && property.dataType === "string") {
-        const stringProperty = property;
-        if (stringProperty.enumValues) {
-          innerComponent = /* @__PURE__ */ jsxRuntime.jsx(VirtualTableSelect, { name: propertyKey, multiple: false, focused: selected, disabled, valueType: "string", small: getPreviewSizeFrom(size) !== "medium", enumValues: stringProperty.enumValues, error: validationError ?? error, internalValue, updateValue });
+        const stringProperty_0 = property;
+        if (stringProperty_0.enumValues) {
+          innerComponent = /* @__PURE__ */ jsxRuntime.jsx(VirtualTableSelect, { name: propertyKey, multiple: false, focused: selected, disabled, valueType: "string", small: getPreviewSizeFrom(size) !== "medium", enumValues: stringProperty_0.enumValues, error: validationError ?? error, internalValue, updateValue });
           fullHeight = true;
-        } else if (stringProperty.markdown || !stringProperty.storage) {
-          const multiline = Boolean(stringProperty.multiline) || Boolean(stringProperty.markdown);
+        } else if (stringProperty_0.markdown || !stringProperty_0.storage || !stringProperty_0.reference) {
+          const multiline = Boolean(stringProperty_0.multiline) || Boolean(stringProperty_0.markdown);
           innerComponent = /* @__PURE__ */ jsxRuntime.jsx(VirtualTableInput, { error: validationError ?? error, disabled, multiline, focused: selected, value: internalValue, updateValue });
           allowScroll = true;
         }
@@ -9617,14 +9640,14 @@
     }
     let t5;
     if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-      t5 = ["xs", "s", "m", "l", "xl"].map(_temp2$8);
+      t5 = ["xs", "s", "m", "l", "xl"].map(_temp2$7);
       $[5] = t5;
     } else {
       t5 = $[5];
     }
     let t6;
     if ($[6] !== t3 || $[7] !== t4) {
-      t6 = /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Table row size", side: "right", sideOffset: 4, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { value: t3, className: "w-16 ml-2", size: "small", onValueChange: t4, renderValue: _temp$j, children: t5 }) });
+      t6 = /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Table row size", side: "right", sideOffset: 4, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { value: t3, className: "w-16 ml-2", size: "small", onValueChange: t4, renderValue: _temp$i, children: t5 }) });
       $[6] = t3;
       $[7] = t4;
       $[8] = t6;
@@ -9708,10 +9731,10 @@
     }
     return t13;
   }
-  function _temp2$8(size_0) {
+  function _temp2$7(size_0) {
     return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: size_0, className: "w-12 font-medium text-center", children: size_0.toUpperCase() }, size_0);
   }
-  function _temp$j(v_0) {
+  function _temp$i(v_0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: v_0.toUpperCase() });
   }
   function getTableCellAlignment(property) {
@@ -10831,7 +10854,7 @@
     let t1;
     if ($[0] !== text) {
       const urlRegex = /https?:\/\/[^\s]+/g;
-      t1 = text.replace(urlRegex, _temp$i);
+      t1 = text.replace(urlRegex, _temp$h);
       $[0] = text;
       $[1] = t1;
     } else {
@@ -10850,7 +10873,7 @@
     }
     return t2;
   };
-  function _temp$i(url) {
+  function _temp$h(url) {
     return `<a href="${url}" class="underline" target="_blank">Link</a><br/>`;
   }
   const operationLabels$2 = {
@@ -11050,7 +11073,7 @@
     }
     let t5;
     if ($[14] !== possibleOperations) {
-      t5 = possibleOperations.map(_temp2$7);
+      t5 = possibleOperations.map(_temp2$6);
       $[14] = possibleOperations;
       $[15] = t5;
     } else {
@@ -11058,7 +11081,7 @@
     }
     let t6;
     if ($[16] !== operation || $[17] !== t4 || $[18] !== t5) {
-      t6 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[80px]", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { value: operation, fullWidth: true, position: "item-aligned", onValueChange: t4, renderValue: _temp$h, children: t5 }) });
+      t6 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[80px]", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { value: operation, fullWidth: true, position: "item-aligned", onValueChange: t4, renderValue: _temp$g, children: t5 }) });
       $[16] = operation;
       $[17] = t4;
       $[18] = t5;
@@ -11109,8 +11132,8 @@
     }
     let t9;
     if ($[34] !== dataType || $[35] !== enumValues || $[36] !== internalValue || $[37] !== multiple || $[38] !== name || $[39] !== operation || $[40] !== updateFilter) {
-      t9 = enumValues && multiple && /* @__PURE__ */ jsxRuntime.jsx(ui.MultiSelect, { position: "item-aligned", value: Array.isArray(internalValue) ? internalValue.map(_temp3$4) : [], onValueChange: (value_2) => {
-        updateFilter(operation, dataType === "number" ? value_2.map(_temp4$3) : value_2);
+      t9 = enumValues && multiple && /* @__PURE__ */ jsxRuntime.jsx(ui.MultiSelect, { position: "item-aligned", value: Array.isArray(internalValue) ? internalValue.map(_temp3$3) : [], onValueChange: (value_2) => {
+        updateFilter(operation, dataType === "number" ? value_2.map(_temp4$2) : value_2);
       }, multiple, endAdornment: internalValue && /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { className: "absolute right-2 top-3", onClick: (e_2) => updateFilter(operation, void 0), children: /* @__PURE__ */ jsxRuntime.jsx(ui.CloseIcon, {}) }), children: enumValues.map((enumConfig_0) => /* @__PURE__ */ jsxRuntime.jsx(ui.MultiSelectItem, { value: String(enumConfig_0.id), children: /* @__PURE__ */ jsxRuntime.jsx(EnumValuesChip, { enumKey: String(enumConfig_0.id), enumValues, size: "small" }) }, `select_value_${name}_${enumConfig_0.id}`)) });
       $[34] = dataType;
       $[35] = enumValues;
@@ -11173,16 +11196,16 @@
     }
     return t12;
   }
-  function _temp4$3(v) {
+  function _temp4$2(v) {
     return parseInt(v);
   }
-  function _temp3$4(e_1) {
+  function _temp3$3(e_1) {
     return String(e_1);
   }
-  function _temp2$7(op_1) {
+  function _temp2$6(op_1) {
     return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: op_1, children: operationLabels$1[op_1] }, op_1);
   }
-  function _temp$h(op_0) {
+  function _temp$g(op_0) {
     return operationLabels$1[op_0];
   }
   function BooleanFilterField(t0) {
@@ -11313,7 +11336,7 @@
     }
     let t5;
     if ($[11] !== possibleOperations) {
-      t5 = possibleOperations.map(_temp2$6);
+      t5 = possibleOperations.map(_temp2$5);
       $[11] = possibleOperations;
       $[12] = t5;
     } else {
@@ -11321,7 +11344,7 @@
     }
     let t6;
     if ($[13] !== operation || $[14] !== t4 || $[15] !== t5) {
-      t6 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[80px]", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { value: operation, size: "large", fullWidth: true, onValueChange: t4, renderValue: _temp$g, children: t5 }) });
+      t6 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[80px]", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { value: operation, size: "large", fullWidth: true, onValueChange: t4, renderValue: _temp$f, children: t5 }) });
       $[13] = operation;
       $[14] = t4;
       $[15] = t5;
@@ -11407,10 +11430,10 @@
     }
     return t14;
   }
-  function _temp2$6(op_1) {
+  function _temp2$5(op_1) {
     return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: op_1, children: operationLabels[op_1] }, op_1);
   }
-  function _temp$g(op_0) {
+  function _temp$f(op_0) {
     return operationLabels[op_0];
   }
   const SelectableTable = function SelectableTable2({
@@ -12114,7 +12137,7 @@
       const searchBlocked = t12;
       let t2;
       if ($[15] !== customizationController.plugins || $[16] !== dataSource?.initTextSearch) {
-        t2 = Boolean(dataSource?.initTextSearch) || customizationController.plugins?.find(_temp$f);
+        t2 = Boolean(dataSource?.initTextSearch) || customizationController.plugins?.find(_temp$e);
         $[15] = customizationController.plugins;
         $[16] = dataSource?.initTextSearch;
         $[17] = t2;
@@ -12206,7 +12229,7 @@
     }
     return t1;
   }
-  function _temp$f(p_0) {
+  function _temp$e(p_0) {
     return Boolean(p_0.collectionView?.onTextSearchClick);
   }
   function DeleteEntityDialog({
@@ -12676,198 +12699,415 @@
   function toArray(input) {
     return Array.isArray(input) ? input : input ? [input] : [];
   }
-  function NavigationGroup(t0) {
-    const $ = reactCompilerRuntime.c(14);
+  function NavigationChip(t0) {
+    const $ = reactCompilerRuntime.c(18);
     const {
-      children,
-      group
+      entry
     } = t0;
+    const navigate = reactRouterDom.useNavigate();
     const userConfigurationPersistence = useUserConfigurationPersistence();
-    const t1 = !(userConfigurationPersistence?.collapsedGroups ?? []).includes(group ?? "ungrouped");
+    if (!userConfigurationPersistence) {
+      return null;
+    }
+    let t1;
+    if ($[0] !== entry.path || $[1] !== userConfigurationPersistence.favouritePaths) {
+      t1 = userConfigurationPersistence.favouritePaths.includes(entry.path);
+      $[0] = entry.path;
+      $[1] = userConfigurationPersistence.favouritePaths;
+      $[2] = t1;
+    } else {
+      t1 = $[2];
+    }
+    const favourite = t1;
     let t2;
-    if ($[0] !== group || $[1] !== userConfigurationPersistence) {
-      t2 = (expanded) => {
-        if (userConfigurationPersistence) {
-          if (!expanded) {
-            const paths = (userConfigurationPersistence.collapsedGroups ?? []).concat(group ?? "ungrouped");
-            userConfigurationPersistence.setCollapsedGroups(paths);
-          } else {
-            userConfigurationPersistence.setCollapsedGroups((userConfigurationPersistence.collapsedGroups ?? []).filter((g) => g !== (group ?? "ungrouped")));
-          }
+    if ($[3] !== entry.path || $[4] !== favourite || $[5] !== userConfigurationPersistence) {
+      t2 = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (favourite) {
+          userConfigurationPersistence.setFavouritePaths(userConfigurationPersistence.favouritePaths.filter((p) => p !== entry.path));
+        } else {
+          userConfigurationPersistence.setFavouritePaths([...userConfigurationPersistence.favouritePaths, entry.path]);
         }
       };
-      $[0] = group;
-      $[1] = userConfigurationPersistence;
-      $[2] = t2;
+      $[3] = entry.path;
+      $[4] = favourite;
+      $[5] = userConfigurationPersistence;
+      $[6] = t2;
     } else {
-      t2 = $[2];
+      t2 = $[6];
     }
+    const onIconClick = t2;
     let t3;
-    if ($[3] !== group) {
-      t3 = group?.toUpperCase() ?? "Views".toUpperCase();
-      $[3] = group;
-      $[4] = t3;
-    } else {
-      t3 = $[4];
-    }
-    let t4;
-    if ($[5] !== t3) {
-      t4 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { color: "secondary", className: "font-medium ml-1", children: t3 });
-      $[5] = t3;
-      $[6] = t4;
+    if ($[7] !== entry.url || $[8] !== navigate) {
+      t3 = () => navigate(entry.url);
+      $[7] = entry.url;
+      $[8] = navigate;
+      $[9] = t3;
     } else {
-      t4 = $[6];
+      t3 = $[9];
     }
+    const t4 = favourite ? "text-secondary" : "text-surface-400 dark:text-surface-500";
     let t5;
-    if ($[7] !== children) {
-      t5 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8", children });
-      $[7] = children;
-      $[8] = t5;
+    if ($[10] !== onIconClick || $[11] !== t4) {
+      t5 = /* @__PURE__ */ jsxRuntime.jsx(ui.StarIcon, { onClick: onIconClick, size: 18, className: t4 });
+      $[10] = onIconClick;
+      $[11] = t4;
+      $[12] = t5;
     } else {
-      t5 = $[8];
+      t5 = $[12];
     }
     let t6;
-    if ($[9] !== t1 || $[10] !== t2 || $[11] !== t4 || $[12] !== t5) {
-      t6 = /* @__PURE__ */ jsxRuntime.jsx(ui.ExpandablePanel, { invisible: true, titleClassName: "font-medium text-sm text-surface-600 dark:text-surface-400", innerClassName: "py-4", initiallyExpanded: t1, onExpandedChange: t2, title: t4, children: t5 });
-      $[9] = t1;
-      $[10] = t2;
-      $[11] = t4;
-      $[12] = t5;
-      $[13] = t6;
+    if ($[13] !== entry.name || $[14] !== entry.path || $[15] !== t3 || $[16] !== t5) {
+      t6 = /* @__PURE__ */ jsxRuntime.jsx(ui.Chip, { onClick: t3, icon: t5, children: entry.name }, entry.path);
+      $[13] = entry.name;
+      $[14] = entry.path;
+      $[15] = t3;
+      $[16] = t5;
+      $[17] = t6;
     } else {
-      t6 = $[13];
+      t6 = $[17];
     }
     return t6;
   }
-  function NavigationCard(t0) {
-    const $ = reactCompilerRuntime.c(23);
-    const {
-      name,
-      description,
-      icon,
-      actions,
-      onClick
-    } = t0;
+  function FavouritesView(t0) {
+    const $ = reactCompilerRuntime.c(17);
+    const navigationController = useNavigationController();
+    const userConfigurationPersistence = useUserConfigurationPersistence();
+    if (!userConfigurationPersistence) {
+      return null;
+    }
     let t1;
-    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-      t1 = ui.cls("h-full p-4 cursor-pointer min-h-[230px]");
-      $[0] = t1;
+    if ($[0] !== userConfigurationPersistence?.favouritePaths) {
+      t1 = userConfigurationPersistence?.favouritePaths ?? [];
+      $[0] = userConfigurationPersistence?.favouritePaths;
+      $[1] = t1;
     } else {
-      t1 = $[0];
+      t1 = $[1];
     }
+    let T0;
     let t2;
-    if ($[1] !== onClick) {
-      t2 = () => {
-        onClick?.();
-      };
-      $[1] = onClick;
-      $[2] = t2;
-    } else {
-      t2 = $[2];
-    }
     let t3;
-    if ($[3] !== actions) {
-      t3 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", onClick: _temp$e, children: actions });
-      $[3] = actions;
-      $[4] = t3;
-    } else {
-      t3 = $[4];
-    }
     let t4;
-    if ($[5] !== icon || $[6] !== t3) {
-      t4 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-10 flex items-center w-full justify-between text-surface-300 dark:text-surface-600", children: [
-        icon,
-        t3
-      ] });
-      $[5] = icon;
+    if ($[2] !== navigationController.topLevelNavigation?.navigationEntries || $[3] !== t1) {
+      let t52;
+      if ($[8] !== navigationController.topLevelNavigation?.navigationEntries) {
+        t52 = (path) => navigationController.topLevelNavigation?.navigationEntries.find((entry) => entry.path === path);
+        $[8] = navigationController.topLevelNavigation?.navigationEntries;
+        $[9] = t52;
+      } else {
+        t52 = $[9];
+      }
+      const favouriteCollections = t1.map(t52).filter(Boolean);
+      T0 = ui.Collapse;
+      t4 = favouriteCollections.length > 0;
+      t2 = "flex flex-row flex-wrap gap-2 pb-2 min-h-[32px]";
+      t3 = favouriteCollections.map(_temp$d);
+      $[2] = navigationController.topLevelNavigation?.navigationEntries;
+      $[3] = t1;
+      $[4] = T0;
+      $[5] = t2;
       $[6] = t3;
       $[7] = t4;
     } else {
+      T0 = $[4];
+      t2 = $[5];
+      t3 = $[6];
       t4 = $[7];
     }
     let t5;
-    if ($[8] !== name) {
-      t5 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { gutterBottom: true, variant: "h5", component: "h2", children: name });
-      $[8] = name;
-      $[9] = t5;
+    if ($[10] !== t2 || $[11] !== t3) {
+      t5 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t2, children: t3 });
+      $[10] = t2;
+      $[11] = t3;
+      $[12] = t5;
     } else {
-      t5 = $[9];
+      t5 = $[12];
     }
     let t6;
-    if ($[10] !== description) {
-      t6 = description && /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", color: "secondary", component: "div", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Markdown, { source: description, size: "small" }) });
-      $[10] = description;
-      $[11] = t6;
-    } else {
-      t6 = $[11];
-    }
-    let t7;
-    if ($[12] !== t4 || $[13] !== t5 || $[14] !== t6) {
-      t7 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-grow w-full", children: [
-        t4,
-        t5,
-        t6
-      ] });
-      $[12] = t4;
-      $[13] = t5;
-      $[14] = t6;
-      $[15] = t7;
-    } else {
-      t7 = $[15];
-    }
-    let t8;
-    if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
-      t8 = {
-        alignSelf: "flex-end"
-      };
-      $[16] = t8;
-    } else {
-      t8 = $[16];
-    }
-    let t9;
-    if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-      t9 = /* @__PURE__ */ jsxRuntime.jsx("div", { style: t8, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(ui.ArrowForwardIcon, { className: "text-primary" }) }) });
-      $[17] = t9;
-    } else {
-      t9 = $[17];
-    }
-    let t10;
-    if ($[18] !== t7) {
-      t10 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start h-full", children: [
-        t7,
-        t9
-      ] });
-      $[18] = t7;
-      $[19] = t10;
-    } else {
-      t10 = $[19];
-    }
-    let t11;
-    if ($[20] !== t10 || $[21] !== t2) {
-      t11 = /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { className: t1, onClick: t2, children: t10 });
-      $[20] = t10;
-      $[21] = t2;
-      $[22] = t11;
+    if ($[13] !== T0 || $[14] !== t4 || $[15] !== t5) {
+      t6 = /* @__PURE__ */ jsxRuntime.jsx(T0, { in: t4, children: t5 });
+      $[13] = T0;
+      $[14] = t4;
+      $[15] = t5;
+      $[16] = t6;
     } else {
-      t11 = $[22];
+      t6 = $[16];
     }
-    return t11;
+    return t6;
   }
-  function _temp$e(event) {
-    event.preventDefault();
-    event.stopPropagation();
+  function _temp$d(entry_0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(NavigationChip, { entry: entry_0 }, entry_0.path);
   }
-  function SmallNavigationCard(t0) {
-    const $ = reactCompilerRuntime.c(10);
-    const {
-      name,
-      url,
-      icon
-    } = t0;
-    let t1;
-    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-      t1 = ui.cls(ui.cardMixin, ui.cardClickableMixin, "cursor-pointer flex flex-row items-center px-4 py-2 text-inherit dark:text-inherit visited:text-inherit visited:dark:text-inherit hover:text-inherit hover:dark:text-inherit ");
-      $[0] = t1;
+  const scrollsMap = {};
+  function useRestoreScroll() {
+    const location = reactRouterDom.useLocation();
+    const containerRef = React.useRef(null);
+    const [scroll, setScroll] = React.useState(0);
+    const [direction, setDirection] = React.useState("down");
+    const handleScroll = React.useCallback(() => {
+      if (!containerRef.current || !location.key) return;
+      scrollsMap[location.key] = containerRef.current.scrollTop;
+      setScroll(containerRef.current.scrollTop);
+      setDirection(containerRef.current.scrollTop > scroll ? "down" : "up");
+    }, [containerRef, location.key, scroll]);
+    React.useEffect(() => {
+      const container = containerRef.current;
+      if (!container) return;
+      container.addEventListener("scroll", handleScroll, {
+        passive: true
+      });
+      return () => {
+        if (container) container.removeEventListener("scroll", handleScroll);
+      };
+    }, [containerRef, handleScroll, location]);
+    React.useEffect(() => {
+      if (!containerRef.current || !scrollsMap[location.key]) return;
+      containerRef.current.scrollTo({
+        top: scrollsMap[location.key],
+        behavior: "auto"
+      });
+    }, [location]);
+    return {
+      containerRef,
+      scroll,
+      direction
+    };
+  }
+  function NavigationGroup(t0) {
+    const $ = reactCompilerRuntime.c(26);
+    const {
+      children,
+      group,
+      minimised,
+      isPreview,
+      isPotentialCardDropTarget,
+      onEditGroup,
+      dndDisabled
+    } = t0;
+    const [isHovered, setIsHovered] = React.useState(false);
+    const currentGroupName = group ?? "Views";
+    const t1 = !isPotentialCardDropTarget ? "my-10" : "my-6";
+    let t2;
+    if ($[0] !== t1) {
+      t2 = ui.cls(t1, "transition-all duration-200 ease-in-out");
+      $[0] = t1;
+      $[1] = t2;
+    } else {
+      t2 = $[1];
+    }
+    const t3 = `flex items-center ${isPreview ? "px-1 py-0.5 m-0" : "ml-3.5 mt-6"} `;
+    let t4;
+    let t5;
+    if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+      t4 = () => setIsHovered(true);
+      t5 = () => setIsHovered(false);
+      $[2] = t4;
+      $[3] = t5;
+    } else {
+      t4 = $[2];
+      t5 = $[3];
+    }
+    const t6 = isPreview ? "body2" : "caption";
+    const t7 = `${isPreview ? "px-1 py-0.5" : "ml-3.5"} font-medium uppercase text-sm text-surface-600 dark:text-surface-400`;
+    let t8;
+    if ($[4] !== currentGroupName || $[5] !== t6 || $[6] !== t7) {
+      t8 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: t6, component: "h2", color: "secondary", className: t7, children: currentGroupName });
+      $[4] = currentGroupName;
+      $[5] = t6;
+      $[6] = t7;
+      $[7] = t8;
+    } else {
+      t8 = $[7];
+    }
+    let t9;
+    if ($[8] !== currentGroupName || $[9] !== dndDisabled || $[10] !== isHovered || $[11] !== isPreview || $[12] !== onEditGroup) {
+      t9 = !isPreview && onEditGroup && !dndDisabled && /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "smallest", onClick: (e) => {
+        e.stopPropagation();
+        onEditGroup(currentGroupName);
+      }, className: ui.cls("ml-2 ", isHovered ? "opacity-100" : "opacity-0", "transition-opacity duration-100"), children: /* @__PURE__ */ jsxRuntime.jsx(ui.EditIcon, { size: "smallest" }) });
+      $[8] = currentGroupName;
+      $[9] = dndDisabled;
+      $[10] = isHovered;
+      $[11] = isPreview;
+      $[12] = onEditGroup;
+      $[13] = t9;
+    } else {
+      t9 = $[13];
+    }
+    let t10;
+    if ($[14] !== t3 || $[15] !== t8 || $[16] !== t9) {
+      t10 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t3, onMouseEnter: t4, onMouseLeave: t5, children: [
+        t8,
+        t9
+      ] });
+      $[14] = t3;
+      $[15] = t8;
+      $[16] = t9;
+      $[17] = t10;
+    } else {
+      t10 = $[17];
+    }
+    let t11;
+    if ($[18] !== children || $[19] !== isPreview || $[20] !== minimised) {
+      t11 = isPreview ? children : minimised ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls("mt-4 p-8 bg-surface-accent-200 dark:bg-surface-accent-800 rounded-lg"), style: {
+        minHeight: "50px"
+      } }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls("mt-4", !minimised ? "pt-0" : ""), children });
+      $[18] = children;
+      $[19] = isPreview;
+      $[20] = minimised;
+      $[21] = t11;
+    } else {
+      t11 = $[21];
+    }
+    let t12;
+    if ($[22] !== t10 || $[23] !== t11 || $[24] !== t2) {
+      t12 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t2, children: [
+        t10,
+        t11
+      ] });
+      $[22] = t10;
+      $[23] = t11;
+      $[24] = t2;
+      $[25] = t12;
+    } else {
+      t12 = $[25];
+    }
+    return t12;
+  }
+  const NavigationCard = React.memo(function NavigationCard2(t0) {
+    const $ = reactCompilerRuntime.c(25);
+    const {
+      name,
+      description,
+      icon,
+      actions,
+      onClick,
+      shrink
+    } = t0;
+    const t1 = shrink && "w-full max-w-full min-h-0 scale-75";
+    let t2;
+    if ($[0] !== t1) {
+      t2 = ui.cls("h-full p-4 cursor-pointer min-h-[230px] transition-all duration-200 ease-in-out", t1);
+      $[0] = t1;
+      $[1] = t2;
+    } else {
+      t2 = $[1];
+    }
+    let t3;
+    if ($[2] !== onClick) {
+      t3 = () => {
+        onClick?.();
+      };
+      $[2] = onClick;
+      $[3] = t3;
+    } else {
+      t3 = $[3];
+    }
+    let t4;
+    if ($[4] !== actions) {
+      t4 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", onClick: _temp$c, children: actions });
+      $[4] = actions;
+      $[5] = t4;
+    } else {
+      t4 = $[5];
+    }
+    let t5;
+    if ($[6] !== icon || $[7] !== t4) {
+      t5 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-10 flex items-center w-full justify-between text-surface-300 dark:text-surface-600", children: [
+        icon,
+        t4
+      ] });
+      $[6] = icon;
+      $[7] = t4;
+      $[8] = t5;
+    } else {
+      t5 = $[8];
+    }
+    let t6;
+    if ($[9] !== name) {
+      t6 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { gutterBottom: true, variant: "h5", component: "h2", children: name });
+      $[9] = name;
+      $[10] = t6;
+    } else {
+      t6 = $[10];
+    }
+    let t7;
+    if ($[11] !== description) {
+      t7 = description && /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", color: "secondary", component: "div", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Markdown, { source: description, size: "small" }) });
+      $[11] = description;
+      $[12] = t7;
+    } else {
+      t7 = $[12];
+    }
+    let t8;
+    if ($[13] !== t5 || $[14] !== t6 || $[15] !== t7) {
+      t8 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-grow w-full", children: [
+        t5,
+        t6,
+        t7
+      ] });
+      $[13] = t5;
+      $[14] = t6;
+      $[15] = t7;
+      $[16] = t8;
+    } else {
+      t8 = $[16];
+    }
+    let t9;
+    if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+      t9 = {
+        alignSelf: "flex-end"
+      };
+      $[17] = t9;
+    } else {
+      t9 = $[17];
+    }
+    let t10;
+    if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+      t10 = /* @__PURE__ */ jsxRuntime.jsx("div", { style: t9, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(ui.ArrowForwardIcon, { className: "text-primary" }) }) });
+      $[18] = t10;
+    } else {
+      t10 = $[18];
+    }
+    let t11;
+    if ($[19] !== t8) {
+      t11 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start h-full", children: [
+        t8,
+        t10
+      ] });
+      $[19] = t8;
+      $[20] = t11;
+    } else {
+      t11 = $[20];
+    }
+    let t12;
+    if ($[21] !== t11 || $[22] !== t2 || $[23] !== t3) {
+      t12 = /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { className: t2, onClick: t3, children: t11 });
+      $[21] = t11;
+      $[22] = t2;
+      $[23] = t3;
+      $[24] = t12;
+    } else {
+      t12 = $[24];
+    }
+    return t12;
+  });
+  function _temp$c(event) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+  function SmallNavigationCard(t0) {
+    const $ = reactCompilerRuntime.c(10);
+    const {
+      name,
+      url,
+      icon
+    } = t0;
+    let t1;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t1 = ui.cls(ui.cardMixin, ui.cardClickableMixin, "cursor-pointer flex flex-row items-center px-4 py-2 text-inherit dark:text-inherit visited:text-inherit visited:dark:text-inherit hover:text-inherit hover:dark:text-inherit ");
+      $[0] = t1;
     } else {
       t1 = $[0];
     }
@@ -12913,7 +13153,7 @@
     return t5;
   }
   function NavigationCardBinding(t0) {
-    const $ = reactCompilerRuntime.c(34);
+    const $ = reactCompilerRuntime.c(35);
     const {
       path,
       collection,
@@ -12922,7 +13162,8 @@
       name,
       description,
       onClick,
-      type
+      type,
+      shrink
     } = t0;
     const userConfigurationPersistence = useUserConfigurationPersistence();
     const t1 = collection ?? view;
@@ -13029,533 +13270,1030 @@
       t6 = $[27];
     }
     let t7;
-    if ($[28] !== actions || $[29] !== collectionIcon || $[30] !== description || $[31] !== name || $[32] !== t6) {
-      t7 = /* @__PURE__ */ jsxRuntime.jsx(NavigationCard, { icon: collectionIcon, name, description, actions, onClick: t6 });
+    if ($[28] !== actions || $[29] !== collectionIcon || $[30] !== description || $[31] !== name || $[32] !== shrink || $[33] !== t6) {
+      t7 = /* @__PURE__ */ jsxRuntime.jsx(NavigationCard, { icon: collectionIcon, name, description, actions, onClick: t6, shrink });
       $[28] = actions;
       $[29] = collectionIcon;
       $[30] = description;
       $[31] = name;
-      $[32] = t6;
-      $[33] = t7;
+      $[32] = shrink;
+      $[33] = t6;
+      $[34] = t7;
     } else {
-      t7 = $[33];
+      t7 = $[34];
     }
     return t7;
   }
-  function NavigationChip(t0) {
-    const $ = reactCompilerRuntime.c(18);
+  const animateLayoutChanges = (args) => sortable.defaultAnimateLayoutChanges({
+    ...args,
+    wasDragging: true
+  });
+  const dropAnimationConfig = {};
+  const cloneSerializableNavigationEntry = (entry) => {
+    const clonedEntry = {
+      id: entry.id,
+      path: entry.path,
+      url: entry.url,
+      name: entry.name,
+      type: entry.type,
+      collection: entry.collection ? {
+        ...entry.collection
+      } : void 0,
+      view: entry.view ? {
+        ...entry.view
+      } : void 0,
+      ...entry.group && {
+        group: entry.group
+      },
+      ...entry.description && {
+        description: entry.description
+      }
+    };
+    return clonedEntry;
+  };
+  const cloneItemsForDnd = (items) => items.map((g) => ({
+    name: g.name,
+    entries: g.entries.map(cloneSerializableNavigationEntry)
+  }));
+  function SortableNavigationCard(t0) {
+    const $ = reactCompilerRuntime.c(17);
     const {
-      entry
+      entry,
+      onClick
     } = t0;
-    const navigate = reactRouterDom.useNavigate();
-    const userConfigurationPersistence = useUserConfigurationPersistence();
-    if (!userConfigurationPersistence) {
-      return null;
-    }
     let t1;
-    if ($[0] !== entry.path || $[1] !== userConfigurationPersistence.favouritePaths) {
-      t1 = userConfigurationPersistence.favouritePaths.includes(entry.path);
-      $[0] = entry.path;
-      $[1] = userConfigurationPersistence.favouritePaths;
-      $[2] = t1;
+    if ($[0] !== entry.url) {
+      t1 = {
+        id: entry.url,
+        animateLayoutChanges
+      };
+      $[0] = entry.url;
+      $[1] = t1;
     } else {
-      t1 = $[2];
+      t1 = $[1];
     }
-    const favourite = t1;
+    const {
+      setNodeRef,
+      listeners: listeners2,
+      attributes,
+      transform,
+      transition,
+      isDragging
+    } = sortable.useSortable(t1);
     let t2;
-    if ($[3] !== entry.path || $[4] !== favourite || $[5] !== userConfigurationPersistence) {
-      t2 = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (favourite) {
-          userConfigurationPersistence.setFavouritePaths(userConfigurationPersistence.favouritePaths.filter((p) => p !== entry.path));
-        } else {
-          userConfigurationPersistence.setFavouritePaths([...userConfigurationPersistence.favouritePaths, entry.path]);
-        }
-      };
-      $[3] = entry.path;
-      $[4] = favourite;
-      $[5] = userConfigurationPersistence;
-      $[6] = t2;
+    let t3;
+    if ($[2] !== transform) {
+      t3 = transform ? utilities.CSS.Transform.toString(transform) : void 0;
+      $[2] = transform;
+      $[3] = t3;
     } else {
-      t2 = $[6];
+      t3 = $[3];
     }
-    const onIconClick = t2;
-    let t3;
-    if ($[7] !== entry.url || $[8] !== navigate) {
-      t3 = () => navigate(entry.url);
-      $[7] = entry.url;
-      $[8] = navigate;
-      $[9] = t3;
+    const t4 = isDragging ? 0 : 1;
+    let t5;
+    if ($[4] !== t3 || $[5] !== t4 || $[6] !== transition) {
+      t5 = {
+        transform: t3,
+        transition,
+        opacity: t4
+      };
+      $[4] = t3;
+      $[5] = t4;
+      $[6] = transition;
+      $[7] = t5;
     } else {
-      t3 = $[9];
+      t5 = $[7];
+    }
+    t2 = t5;
+    const style = t2;
+    let t6;
+    if ($[8] !== entry || $[9] !== onClick) {
+      t6 = /* @__PURE__ */ jsxRuntime.jsx(NavigationCardBinding, { ...entry, onClick });
+      $[8] = entry;
+      $[9] = onClick;
+      $[10] = t6;
+    } else {
+      t6 = $[10];
+    }
+    let t7;
+    if ($[11] !== attributes || $[12] !== listeners2 || $[13] !== setNodeRef || $[14] !== style || $[15] !== t6) {
+      t7 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setNodeRef, style, ...attributes, ...listeners2, children: t6 });
+      $[11] = attributes;
+      $[12] = listeners2;
+      $[13] = setNodeRef;
+      $[14] = style;
+      $[15] = t6;
+      $[16] = t7;
+    } else {
+      t7 = $[16];
+    }
+    return t7;
+  }
+  function NavigationGroupDroppable(t0) {
+    const $ = reactCompilerRuntime.c(11);
+    const {
+      id,
+      itemIds,
+      children,
+      isPotentialCardDropTarget: t1
+    } = t0;
+    const isPotentialCardDropTarget = t1 === void 0 ? false : t1;
+    let t2;
+    if ($[0] !== id) {
+      t2 = {
+        id
+      };
+      $[0] = id;
+      $[1] = t2;
+    } else {
+      t2 = $[1];
+    }
+    const {
+      setNodeRef
+    } = core.useDroppable(t2);
+    const t3 = isPotentialCardDropTarget ? "p-2 bg-surface-accent-200 dark:bg-surface-accent-800 rounded-lg" : void 0;
+    let t4;
+    if ($[2] !== t3) {
+      t4 = ui.cls(t3, "transition-all duration-200 ease-in-out");
+      $[2] = t3;
+      $[3] = t4;
+    } else {
+      t4 = $[3];
     }
-    const t4 = favourite ? "text-secondary" : "text-surface-400 dark:text-surface-500";
     let t5;
-    if ($[10] !== onIconClick || $[11] !== t4) {
-      t5 = /* @__PURE__ */ jsxRuntime.jsx(ui.StarIcon, { onClick: onIconClick, size: 18, className: t4 });
-      $[10] = onIconClick;
-      $[11] = t4;
-      $[12] = t5;
+    if ($[4] !== children || $[5] !== itemIds) {
+      t5 = /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: itemIds, strategy: sortable.rectSortingStrategy, children });
+      $[4] = children;
+      $[5] = itemIds;
+      $[6] = t5;
     } else {
-      t5 = $[12];
+      t5 = $[6];
     }
     let t6;
-    if ($[13] !== entry.name || $[14] !== entry.path || $[15] !== t3 || $[16] !== t5) {
-      t6 = /* @__PURE__ */ jsxRuntime.jsx(ui.Chip, { onClick: t3, icon: t5, children: entry.name }, entry.path);
-      $[13] = entry.name;
-      $[14] = entry.path;
-      $[15] = t3;
-      $[16] = t5;
-      $[17] = t6;
+    if ($[7] !== setNodeRef || $[8] !== t4 || $[9] !== t5) {
+      t6 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setNodeRef, className: t4, children: t5 });
+      $[7] = setNodeRef;
+      $[8] = t4;
+      $[9] = t5;
+      $[10] = t6;
     } else {
-      t6 = $[17];
+      t6 = $[10];
     }
     return t6;
   }
-  function FavouritesView(t0) {
-    const $ = reactCompilerRuntime.c(17);
-    const navigationController = useNavigationController();
-    const userConfigurationPersistence = useUserConfigurationPersistence();
-    if (!userConfigurationPersistence) {
-      return null;
-    }
+  function SortableNavigationGroup(t0) {
+    const $ = reactCompilerRuntime.c(15);
+    const {
+      groupName,
+      children,
+      disabled
+    } = t0;
     let t1;
-    if ($[0] !== userConfigurationPersistence?.favouritePaths) {
-      t1 = userConfigurationPersistence?.favouritePaths ?? [];
-      $[0] = userConfigurationPersistence?.favouritePaths;
-      $[1] = t1;
+    if ($[0] !== disabled || $[1] !== groupName) {
+      t1 = {
+        id: groupName,
+        animateLayoutChanges,
+        disabled
+      };
+      $[0] = disabled;
+      $[1] = groupName;
+      $[2] = t1;
     } else {
-      t1 = $[1];
+      t1 = $[2];
     }
-    let T0;
+    const {
+      attributes,
+      listeners: listeners2,
+      setNodeRef,
+      transform,
+      transition,
+      isDragging
+    } = sortable.useSortable(t1);
     let t2;
     let t3;
-    let t4;
-    if ($[2] !== navigationController.topLevelNavigation?.navigationEntries || $[3] !== t1) {
-      let t52;
-      if ($[8] !== navigationController.topLevelNavigation?.navigationEntries) {
-        t52 = (path) => navigationController.topLevelNavigation?.navigationEntries.find((entry) => entry.path === path);
-        $[8] = navigationController.topLevelNavigation?.navigationEntries;
-        $[9] = t52;
-      } else {
-        t52 = $[9];
-      }
-      const favouriteCollections = t1.map(t52).filter(Boolean);
-      T0 = ui.Collapse;
-      t4 = favouriteCollections.length > 0;
-      t2 = "flex flex-row flex-wrap gap-2 pb-2 min-h-[32px]";
-      t3 = favouriteCollections.map(_temp$d);
-      $[2] = navigationController.topLevelNavigation?.navigationEntries;
-      $[3] = t1;
-      $[4] = T0;
-      $[5] = t2;
-      $[6] = t3;
-      $[7] = t4;
+    if ($[3] !== transform) {
+      t3 = transform ? utilities.CSS.Transform.toString(transform) : void 0;
+      $[3] = transform;
+      $[4] = t3;
     } else {
-      T0 = $[4];
-      t2 = $[5];
-      t3 = $[6];
-      t4 = $[7];
+      t3 = $[4];
     }
+    const t4 = isDragging ? 0 : 1;
     let t5;
-    if ($[10] !== t2 || $[11] !== t3) {
-      t5 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t2, children: t3 });
-      $[10] = t2;
-      $[11] = t3;
-      $[12] = t5;
+    if ($[5] !== t3 || $[6] !== t4 || $[7] !== transition) {
+      t5 = {
+        transform: t3,
+        transition,
+        opacity: t4
+      };
+      $[5] = t3;
+      $[6] = t4;
+      $[7] = transition;
+      $[8] = t5;
     } else {
-      t5 = $[12];
+      t5 = $[8];
     }
+    t2 = t5;
+    const style = t2;
     let t6;
-    if ($[13] !== T0 || $[14] !== t4 || $[15] !== t5) {
-      t6 = /* @__PURE__ */ jsxRuntime.jsx(T0, { in: t4, children: t5 });
-      $[13] = T0;
-      $[14] = t4;
-      $[15] = t5;
-      $[16] = t6;
+    if ($[9] !== attributes || $[10] !== children || $[11] !== listeners2 || $[12] !== setNodeRef || $[13] !== style) {
+      t6 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setNodeRef, style, ...attributes, ...listeners2, children });
+      $[9] = attributes;
+      $[10] = children;
+      $[11] = listeners2;
+      $[12] = setNodeRef;
+      $[13] = style;
+      $[14] = t6;
     } else {
-      t6 = $[16];
+      t6 = $[14];
     }
     return t6;
   }
-  function _temp$d(entry_0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(NavigationChip, { entry: entry_0 }, entry_0.path);
-  }
-  const scrollsMap = {};
-  function useRestoreScroll() {
-    const location = reactRouterDom.useLocation();
-    const containerRef = React.useRef(null);
-    const [scroll, setScroll] = React.useState(0);
-    const [direction, setDirection] = React.useState("down");
-    const handleScroll = React.useCallback(() => {
-      if (!containerRef.current || !location.key) return;
-      scrollsMap[location.key] = containerRef.current.scrollTop;
-      setScroll(containerRef.current.scrollTop);
-      setDirection(containerRef.current.scrollTop > scroll ? "down" : "up");
-    }, [containerRef, location.key, scroll]);
-    React.useEffect(() => {
-      const container = containerRef.current;
-      if (!container) return;
-      container.addEventListener("scroll", handleScroll, {
-        passive: true
-      });
-      return () => {
-        if (container) container.removeEventListener("scroll", handleScroll);
-      };
-    }, [containerRef, handleScroll, location]);
+  function useHomePageDnd({
+    items: dndItems,
+    setItems: setDndItems,
+    disabled,
+    onCardMovedBetweenGroups,
+    onGroupMoved,
+    onNewGroupDrop,
+    onPersist
+  }) {
+    const [activeId, setActiveId] = React.useState(null);
+    const [activeIsGroup, setActiveIsGroup] = React.useState(false);
+    const [currentDraggingGroupId, setCurrentDraggingGroupId] = React.useState(null);
+    const [dndKitActiveNode, setDndKitActiveNode] = React.useState(null);
+    const [isDraggingCardOnly, setIsDraggingCardOnly] = React.useState(false);
+    const [dialogOpenForGroup, setDialogOpenForGroup] = React.useState(null);
+    const [isHoveringNewGroupDropZone, setIsHoveringNewGroupDropZone] = React.useState(false);
+    const interimItemsRef = React.useRef(null);
     React.useEffect(() => {
-      if (!containerRef.current || !scrollsMap[location.key]) return;
-      containerRef.current.scrollTo({
-        top: scrollsMap[location.key],
-        behavior: "auto"
+      interimItemsRef.current = dndItems;
+    }, [dndItems]);
+    const mouseSensor = core.useSensor(core.MouseSensor, {
+      activationConstraint: {
+        distance: 10
+      }
+    });
+    const touchSensor = core.useSensor(core.TouchSensor, {
+      activationConstraint: {
+        delay: 150,
+        tolerance: 5
+      }
+    });
+    const keyboardSensor = core.useSensor(core.KeyboardSensor);
+    const sensors = core.useSensors(...disabled ? [] : [mouseSensor, touchSensor, keyboardSensor]);
+    const dndContainers = React.useMemo(() => dndItems.map((g) => g.name), [dndItems]);
+    const findDndContainer = React.useCallback((id) => {
+      if (!id) return void 0;
+      const group = dndItems.find((g_0) => g_0.name === id);
+      if (group) return group.name;
+      for (const g_1 of dndItems) {
+        if (g_1.entries.some((e) => e.url === id)) return g_1.name;
+      }
+      return void 0;
+    }, [dndItems]);
+    const lastOverId = React.useRef(null);
+    const recentlyMovedToNewContainer = React.useRef(false);
+    const collisionDetection = React.useCallback((args) => {
+      if (disabled || !activeId) return [];
+      if (activeIsGroup) {
+        const groups = args.droppableContainers.filter((c) => dndItems.some((g_2) => g_2.name === c.id));
+        if (!groups.length) return [];
+        return core.closestCenter({
+          ...args,
+          droppableContainers: groups
+        });
+      }
+      const pointer = core.pointerWithin(args);
+      if (pointer.length) {
+        const zone = pointer.find((c_0) => c_0.id === "new-group-drop-zone");
+        if (zone) return [zone];
+        const container = pointer.find((c_1) => dndItems.some((g_3) => g_3.name === c_1.id));
+        if (container) {
+          const itemsIn = dndItems.find((g_4) => g_4.name === container.id)?.entries;
+          if (itemsIn?.length) {
+            const closest = core.closestCorners({
+              ...args,
+              droppableContainers: args.droppableContainers.filter((c_2) => itemsIn.some((e_0) => e_0.url === c_2.id))
+            });
+            if (closest.length) return closest;
+          }
+          return [container];
+        }
+        const first = core.getFirstCollision(pointer, "id");
+        if (first) return [{
+          id: first
+        }];
+      }
+      const rects = core.rectIntersection(args);
+      const zoneRect = rects.find((c_3) => c_3.id === "new-group-drop-zone");
+      if (zoneRect) return [zoneRect];
+      let overId = core.getFirstCollision(rects, "id");
+      if (overId != null) {
+        const overIsContainer = dndItems.some((g_5) => g_5.name === overId);
+        if (overIsContainer) {
+          const itemsIn_0 = dndItems.find((g_6) => g_6.name === overId)?.entries;
+          if (itemsIn_0?.length) {
+            const closestItem = core.closestCorners({
+              ...args,
+              droppableContainers: args.droppableContainers.filter((c_4) => itemsIn_0.some((e_1) => e_1.url === c_4.id))
+            })[0]?.id;
+            if (closestItem) overId = closestItem;
+          }
+        }
+        lastOverId.current = overId;
+        return [{
+          id: overId
+        }];
+      }
+      if (recentlyMovedToNewContainer.current && lastOverId.current && !activeIsGroup) return [{
+        id: lastOverId.current
+      }];
+      return [];
+    }, [activeId, dndItems, disabled, activeIsGroup]);
+    const handleDragStart = ({
+      active
+    }) => {
+      setDndKitActiveNode(active);
+      if (disabled) return;
+      const isGroup = dndItems.some((g_7) => g_7.name === active.id);
+      if (!active.data.current) active.data.current = {};
+      active.data.current.type = isGroup ? "group" : "item";
+      setActiveId(active.id);
+      setActiveIsGroup(isGroup);
+      setIsDraggingCardOnly(!isGroup);
+      if (isGroup) setCurrentDraggingGroupId(active.id);
+      recentlyMovedToNewContainer.current = false;
+    };
+    const handleDragOver = ({
+      active: active_0,
+      over
+    }) => {
+      if (disabled || !over) return;
+      const activeIdNow = active_0.id;
+      const overIdNow = over.id;
+      if (activeIdNow === overIdNow) return;
+      if (activeIsGroup) return;
+      const activeCont = findDndContainer(activeIdNow);
+      const overCont = findDndContainer(overIdNow);
+      if (!activeCont) return;
+      if (overCont && activeCont !== overCont) {
+        recentlyMovedToNewContainer.current = true;
+        const newState = cloneItemsForDnd(dndItems);
+        const srcIdx = newState.findIndex((g_8) => g_8.name === activeCont);
+        const tgtIdx = newState.findIndex((g_9) => g_9.name === overCont);
+        if (srcIdx === -1 || tgtIdx === -1) return;
+        const src = newState[srcIdx];
+        const tgt = newState[tgtIdx];
+        const idxInSrc = src.entries.findIndex((e_2) => e_2.url === activeIdNow);
+        if (idxInSrc === -1) return;
+        const [moved] = src.entries.splice(idxInSrc, 1);
+        tgt.entries.push(moved);
+        interimItemsRef.current = newState;
+        setDndItems(newState);
+      } else if (activeCont === overCont) {
+        recentlyMovedToNewContainer.current = false;
+      }
+    };
+    const handleDragEnd = ({
+      active: active_1,
+      over: over_0
+    }) => {
+      if (disabled || !over_0) {
+        resetDragState();
+        return;
+      }
+      const activeIdNow_0 = active_1.id;
+      const overIdNow_0 = over_0.id;
+      if (activeIsGroup) {
+        if (activeIdNow_0 !== overIdNow_0 && dndItems.some((g_12) => g_12.name === overIdNow_0)) {
+          const from = dndItems.findIndex((g_10) => g_10.name === activeIdNow_0);
+          const to = dndItems.findIndex((g_11) => g_11.name === overIdNow_0);
+          if (from !== -1 && to !== -1) {
+            const newState_0 = sortable.arrayMove(dndItems, from, to);
+            setDndItems(newState_0);
+            onPersist?.(newState_0);
+            onGroupMoved?.(activeIdNow_0, from, to);
+          }
+        }
+      } else {
+        const activeCont_0 = findDndContainer(activeIdNow_0);
+        if (overIdNow_0 === "new-group-drop-zone") {
+          if (activeCont_0) {
+            const newState_1 = cloneItemsForDnd(dndItems);
+            const srcIdx_0 = newState_1.findIndex((g_13) => g_13.name === activeCont_0);
+            if (srcIdx_0 !== -1) {
+              const src_0 = newState_1[srcIdx_0];
+              const idxInSrc_0 = src_0.entries.findIndex((e_3) => e_3.url === activeIdNow_0);
+              if (idxInSrc_0 !== -1) {
+                const [dragged] = src_0.entries.splice(idxInSrc_0, 1);
+                if (src_0.entries.length === 0) newState_1.splice(srcIdx_0, 1);
+                let tentative = "New Group";
+                let counter = 1;
+                while (newState_1.some((g_14) => g_14.name === tentative)) tentative = `New Group ${counter++}`;
+                newState_1.push({
+                  name: tentative,
+                  entries: [dragged]
+                });
+                setDndItems(newState_1);
+                onPersist?.(newState_1);
+                setDialogOpenForGroup(tentative);
+                onNewGroupDrop?.();
+              }
+            }
+          }
+        } else {
+          const overCont_0 = findDndContainer(overIdNow_0);
+          if (activeCont_0 === overCont_0) {
+            const grpIdx = dndItems.findIndex((g_15) => g_15.name === activeCont_0);
+            if (grpIdx !== -1) {
+              const group_0 = dndItems[grpIdx];
+              const oldIdx = group_0.entries.findIndex((e_4) => e_4.url === activeIdNow_0);
+              let newIdx = group_0.entries.findIndex((e_5) => e_5.url === overIdNow_0);
+              if (newIdx === -1 && overIdNow_0 === activeCont_0) newIdx = group_0.entries.length - 1;
+              if (oldIdx !== -1 && newIdx !== -1 && oldIdx !== newIdx) {
+                const reordered = sortable.arrayMove(group_0.entries, oldIdx, newIdx);
+                const newState_2 = [...dndItems];
+                newState_2[grpIdx] = {
+                  ...group_0,
+                  entries: reordered
+                };
+                setDndItems(newState_2);
+                onPersist?.(newState_2);
+              }
+            }
+          } else if (recentlyMovedToNewContainer.current && interimItemsRef.current) {
+            onPersist?.(interimItemsRef.current);
+          }
+          onCardMovedBetweenGroups?.(dndItems.flatMap((g_16) => g_16.entries).find((e_6) => e_6.url === activeIdNow_0));
+        }
+      }
+      resetDragState();
+    };
+    const resetDragState = () => {
+      setDndKitActiveNode(null);
+      setActiveId(null);
+      setActiveIsGroup(false);
+      setCurrentDraggingGroupId(null);
+      setIsDraggingCardOnly(false);
+      recentlyMovedToNewContainer.current = false;
+    };
+    const handleDragCancel = () => resetDragState();
+    const handleRenameGroup = (oldName, newName) => {
+      setDndItems((current) => {
+        const idx = current.findIndex((g_17) => g_17.name === oldName);
+        if (idx === -1) return current;
+        if (current.some((g_18) => g_18.name === newName && g_18.name !== oldName)) return current;
+        const updated = [...current];
+        updated[idx] = {
+          ...updated[idx],
+          name: newName
+        };
+        onPersist?.(updated);
+        return updated;
       });
-    }, [location]);
+    };
+    const activeItemForOverlay = React.useMemo(() => {
+      if (disabled || !activeId || activeIsGroup) return null;
+      return dndItems.flatMap((g_19) => g_19.entries).find((e_7) => e_7.url === activeId) || null;
+    }, [activeId, dndItems, disabled, activeIsGroup]);
+    const activeGroupData = React.useMemo(() => {
+      if (disabled || !activeId || !activeIsGroup) return null;
+      return dndItems.find((g_20) => g_20.name === activeId) || null;
+    }, [activeId, dndItems, disabled, activeIsGroup]);
     return {
-      containerRef,
-      scroll,
-      direction
+      sensors,
+      collisionDetection,
+      onDragStart: handleDragStart,
+      onDragOver: handleDragOver,
+      onDragEnd: handleDragEnd,
+      onDragCancel: handleDragCancel,
+      dropAnimation: dropAnimationConfig,
+      activeItemForOverlay,
+      activeGroupData,
+      draggingGroupId: currentDraggingGroupId,
+      containers: dndContainers,
+      dndKitActiveNode,
+      isDraggingCardOnly,
+      dialogOpenForGroup,
+      setDialogOpenForGroup,
+      handleRenameGroup,
+      isHoveringNewGroupDropZone,
+      setIsHoveringNewGroupDropZone
     };
   }
-  function DefaultHomePage(t0) {
-    const $ = reactCompilerRuntime.c(71);
+  function NewGroupDropZone(t0) {
+    const $ = reactCompilerRuntime.c(15);
     const {
-      additionalActions,
-      additionalChildrenStart,
-      additionalChildrenEnd
+      disabled,
+      setIsHovering
     } = t0;
-    const context = useFireCMSContext();
-    const customizationController = useCustomizationController();
-    const navigationController = useNavigationController();
-    const fuse = React.useRef(null);
-    if (!navigationController.topLevelNavigation) {
-      throw Error("Navigation not ready in FireCMSHomePage");
+    let t1;
+    if ($[0] !== disabled) {
+      t1 = {
+        id: "new-group-drop-zone",
+        disabled
+      };
+      $[0] = disabled;
+      $[1] = t1;
+    } else {
+      t1 = $[1];
     }
     const {
-      containerRef,
-      direction
-    } = useRestoreScroll();
+      setNodeRef,
+      isOver
+    } = core.useDroppable(t1);
+    const [isVisible, setIsVisible] = React.useState(false);
+    let t2;
+    if ($[2] !== disabled) {
+      t2 = {
+        onDragStart(t32) {
+          const {
+            active
+          } = t32;
+          if (disabled) {
+            return;
+          }
+          const tp = active.data.current?.type;
+          setIsVisible(tp === "item");
+        },
+        onDragEnd() {
+          setIsVisible(false);
+        },
+        onDragCancel() {
+          setIsVisible(false);
+        }
+      };
+      $[2] = disabled;
+      $[3] = t2;
+    } else {
+      t2 = $[3];
+    }
+    core.useDndMonitor(t2);
+    let t3;
+    let t4;
+    if ($[4] !== isOver || $[5] !== isVisible || $[6] !== setIsHovering) {
+      t3 = () => {
+        setIsHovering(isOver && isVisible);
+      };
+      t4 = [isOver, isVisible, setIsHovering];
+      $[4] = isOver;
+      $[5] = isVisible;
+      $[6] = setIsHovering;
+      $[7] = t3;
+      $[8] = t4;
+    } else {
+      t3 = $[7];
+      t4 = $[8];
+    }
+    React.useEffect(t3, t4);
+    if (!isVisible || disabled) {
+      return null;
+    }
+    const t5 = isOver ? "bg-surface-accent-100 dark:bg-surface-accent-800 border-surface-300 dark:border-surface-600" : "bg-surface-50 dark:bg-surface-900 border-surface-200 dark:border-surface-700";
+    let t6;
+    if ($[9] !== t5) {
+      t6 = ui.cls("fixed right-8 top-1/2 -translate-y-1/2 w-[200px] h-[120px] border border-dashed rounded-lg flex items-center justify-center transition-all", t5);
+      $[9] = t5;
+      $[10] = t6;
+    } else {
+      t6 = $[10];
+    }
+    let t7;
+    if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+      t7 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center p-4", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block font-medium text-sm", children: "Drop here to create a new group" }) });
+      $[11] = t7;
+    } else {
+      t7 = $[11];
+    }
+    let t8;
+    if ($[12] !== setNodeRef || $[13] !== t6) {
+      t8 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setNodeRef, className: t6, children: t7 });
+      $[12] = setNodeRef;
+      $[13] = t6;
+      $[14] = t8;
+    } else {
+      t8 = $[14];
+    }
+    return t8;
+  }
+  function RenameGroupDialog(t0) {
+    const $ = reactCompilerRuntime.c(41);
     const {
-      navigationEntries,
-      groups
-    } = navigationController.topLevelNavigation;
-    const [filteredUrls, setFilteredUrls] = React.useState(null);
-    const performingSearch = Boolean(filteredUrls);
+      open,
+      initialName,
+      existingGroupNames,
+      onClose,
+      onRename
+    } = t0;
+    const [name, setName] = React.useState(initialName);
+    const [error, setError] = React.useState(null);
+    const inputRef = React.useRef(null);
     let t1;
-    if ($[0] !== filteredUrls || $[1] !== navigationEntries) {
-      t1 = filteredUrls ? filteredUrls.map((url) => navigationEntries.find((e) => e.url === url)).filter(Boolean) : navigationEntries;
-      $[0] = filteredUrls;
-      $[1] = navigationEntries;
+    let t2;
+    if ($[0] !== initialName || $[1] !== open) {
+      t1 = () => {
+        if (open) {
+          setName(initialName);
+          setError(null);
+          setTimeout(() => {
+            if (inputRef.current) {
+              inputRef.current.focus();
+              inputRef.current.select();
+            }
+          }, 100);
+        }
+      };
+      t2 = [initialName, open];
+      $[0] = initialName;
+      $[1] = open;
       $[2] = t1;
+      $[3] = t2;
     } else {
       t1 = $[2];
+      t2 = $[3];
     }
-    const filteredNavigationEntries = t1;
-    let t2;
+    React.useEffect(t1, t2);
     let t3;
-    if ($[3] !== navigationEntries) {
-      t2 = () => {
-        fuse.current = new Fuse(navigationEntries, {
-          keys: ["name", "description", "group", "path"]
-        });
+    if ($[4] !== existingGroupNames) {
+      t3 = (event) => {
+        const newName = event.target.value;
+        setName(newName);
+        if (!newName.trim()) {
+          setError("Group name cannot be empty.");
+        } else {
+          if (existingGroupNames.includes(newName.trim())) {
+            setError("This group name already exists.");
+          } else {
+            setError(null);
+          }
+        }
       };
-      t3 = [navigationEntries];
-      $[3] = navigationEntries;
-      $[4] = t2;
+      $[4] = existingGroupNames;
       $[5] = t3;
     } else {
-      t2 = $[4];
       t3 = $[5];
     }
-    React.useEffect(t2, t3);
+    const handleNameChange = t3;
     let t4;
-    if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-      t4 = (value) => {
-        if (!value || value === "") {
-          setFilteredUrls(null);
-        } else {
-          const searchResult = fuse.current?.search(value);
-          if (searchResult) {
-            setFilteredUrls(searchResult.map(_temp$c));
+    if ($[6] !== error || $[7] !== existingGroupNames || $[8] !== name || $[9] !== onClose || $[10] !== onRename) {
+      t4 = () => {
+        const trimmedName = name.trim();
+        if (!trimmedName) {
+          setError("Group name cannot be empty.");
+          return;
+        }
+        if (existingGroupNames.includes(trimmedName)) {
+          setError("This group name already exists.");
+          return;
+        }
+        if (!error) {
+          onRename(trimmedName);
+          onClose();
+        }
+      };
+      $[6] = error;
+      $[7] = existingGroupNames;
+      $[8] = name;
+      $[9] = onClose;
+      $[10] = onRename;
+      $[11] = t4;
+    } else {
+      t4 = $[11];
+    }
+    const handleSave = t4;
+    let t5;
+    if ($[12] !== existingGroupNames || $[13] !== handleSave || $[14] !== name) {
+      t5 = (event_0) => {
+        if (event_0.key === "Enter") {
+          event_0.preventDefault();
+          const trimmedName_0 = name.trim();
+          let currentError = null;
+          if (!trimmedName_0) {
+            currentError = "Group name cannot be empty.";
+          } else {
+            if (existingGroupNames.includes(trimmedName_0)) {
+              currentError = "This group name already exists.";
+            }
+          }
+          if (!currentError && trimmedName_0) {
+            handleSave();
+          } else {
+            if (currentError) {
+              setError(currentError);
+            }
           }
         }
       };
-      $[6] = t4;
+      $[12] = existingGroupNames;
+      $[13] = handleSave;
+      $[14] = name;
+      $[15] = t5;
+    } else {
+      t5 = $[15];
+    }
+    const handleKeyDown = t5;
+    if (!open) {
+      return null;
+    }
+    let t6;
+    if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+      t6 = /* @__PURE__ */ jsxRuntime.jsx(ui.DialogTitle, { children: "Rename Group" });
+      $[16] = t6;
+    } else {
+      t6 = $[16];
+    }
+    const t7 = !!error;
+    const t8 = error ? "group-name-error" : void 0;
+    let t9;
+    if ($[17] !== handleKeyDown || $[18] !== handleNameChange || $[19] !== name || $[20] !== t7 || $[21] !== t8) {
+      t9 = /* @__PURE__ */ jsxRuntime.jsx(ui.TextField, { inputRef, label: "Group Name", value: name, onChange: handleNameChange, onKeyDown: handleKeyDown, error: t7, "aria-describedby": t8 });
+      $[17] = handleKeyDown;
+      $[18] = handleNameChange;
+      $[19] = name;
+      $[20] = t7;
+      $[21] = t8;
+      $[22] = t9;
+    } else {
+      t9 = $[22];
+    }
+    let t10;
+    if ($[23] !== error) {
+      t10 = error && /* @__PURE__ */ jsxRuntime.jsx("p", { id: "group-name-error", style: {
+        display: "none"
+      }, children: error });
+      $[23] = error;
+      $[24] = t10;
+    } else {
+      t10 = $[24];
+    }
+    let t11;
+    if ($[25] !== t10 || $[26] !== t9) {
+      t11 = /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogContent, { children: [
+        t9,
+        t10
+      ] });
+      $[25] = t10;
+      $[26] = t9;
+      $[27] = t11;
+    } else {
+      t11 = $[27];
+    }
+    let t12;
+    if ($[28] !== onClose) {
+      t12 = /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: onClose, variant: "text", children: "Cancel" });
+      $[28] = onClose;
+      $[29] = t12;
+    } else {
+      t12 = $[29];
+    }
+    const t13 = !!error || !name.trim();
+    let t14;
+    if ($[30] !== handleSave || $[31] !== t13) {
+      t14 = /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: handleSave, disabled: t13, children: "Save" });
+      $[30] = handleSave;
+      $[31] = t13;
+      $[32] = t14;
+    } else {
+      t14 = $[32];
+    }
+    let t15;
+    if ($[33] !== t12 || $[34] !== t14) {
+      t15 = /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogActions, { children: [
+        t12,
+        t14
+      ] });
+      $[33] = t12;
+      $[34] = t14;
+      $[35] = t15;
+    } else {
+      t15 = $[35];
+    }
+    let t16;
+    if ($[36] !== onClose || $[37] !== open || $[38] !== t11 || $[39] !== t15) {
+      t16 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Dialog, { open, onOpenChange: onClose, children: [
+        t6,
+        t11,
+        t15
+      ] });
+      $[36] = onClose;
+      $[37] = open;
+      $[38] = t11;
+      $[39] = t15;
+      $[40] = t16;
     } else {
-      t4 = $[6];
+      t16 = $[40];
     }
-    const updateSearchResults = t4;
-    let T0;
-    let additionalPluginChildrenEnd;
-    let additionalPluginSections;
-    let t10;
-    let t11;
-    let t12;
-    let t13;
-    let t5;
-    let t6;
-    let t7;
-    let t8;
-    let t9;
-    if ($[7] !== additionalActions || $[8] !== additionalChildrenStart || $[9] !== containerRef || $[10] !== context || $[11] !== customizationController.plugins || $[12] !== direction || $[13] !== filteredNavigationEntries || $[14] !== filteredUrls || $[15] !== groups || $[16] !== performingSearch) {
-      const filteredGroups = filteredUrls ? filteredNavigationEntries.map(_temp2$5) : [];
-      const allGroups = filteredUrls ? filteredGroups.filter((group, index) => filteredGroups.indexOf(group) === index) : [...groups];
-      if (filteredNavigationEntries.filter(_temp3$3).length > 0 || filteredNavigationEntries.length === 0) {
-        allGroups.push(void 0);
-      }
-      let additionalPluginChildrenStart;
-      if (customizationController.plugins) {
-        let t143;
-        if ($[29] !== context || $[30] !== customizationController.plugins) {
-          const sectionProps = {
-            context
-          };
-          t143 = customizationController.plugins.filter(_temp4$2).map((plugin_0, i) => {
-            const section = plugin_0.homePage.includeSection(sectionProps);
-            return /* @__PURE__ */ jsxRuntime.jsx(NavigationGroup, { group: section.title, children: section.children }, `plugin_section_${plugin_0.key}`);
-          });
-          $[29] = context;
-          $[30] = customizationController.plugins;
-          $[31] = t143;
-        } else {
-          t143 = $[31];
-        }
-        let t153;
-        if ($[32] !== t143) {
-          t153 = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: t143 });
-          $[32] = t143;
-          $[33] = t153;
-        } else {
-          t153 = $[33];
-        }
-        additionalPluginSections = t153;
-        let t162;
-        if ($[34] !== customizationController.plugins) {
-          t162 = customizationController.plugins.filter(_temp5$2).map(_temp6$2);
-          $[34] = customizationController.plugins;
-          $[35] = t162;
-        } else {
-          t162 = $[35];
-        }
-        let t172;
-        if ($[36] !== t162) {
-          t172 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: t162 });
-          $[36] = t162;
-          $[37] = t172;
-        } else {
-          t172 = $[37];
-        }
-        additionalPluginChildrenStart = t172;
-        let t18;
-        if ($[38] !== customizationController.plugins) {
-          t18 = customizationController.plugins.filter(_temp7$1).map(_temp8);
-          $[38] = customizationController.plugins;
-          $[39] = t18;
-        } else {
-          t18 = $[39];
-        }
-        let t19;
-        if ($[40] !== t18) {
-          t19 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: t18 });
-          $[40] = t18;
-          $[41] = t19;
-        } else {
-          t19 = $[41];
-        }
-        additionalPluginChildrenEnd = t19;
-      }
-      t11 = "home_page";
-      t12 = containerRef;
-      t13 = "py-2 overflow-auto h-full w-full";
-      T0 = ui.Container;
-      t5 = "6xl";
-      const t142 = direction === "down" ? -84 : 0;
-      let t152;
-      if ($[42] !== t142) {
-        t152 = {
-          top: t142
-        };
-        $[42] = t142;
-        $[43] = t152;
+    return t16;
+  }
+  const DEFAULT_GROUP_NAME = "Views";
+  const ADMIN_GROUP_NAME = "Admin";
+  function DefaultHomePage({
+    additionalActions,
+    additionalChildrenStart,
+    additionalChildrenEnd
+  }) {
+    const context = useFireCMSContext();
+    const customizationController = useCustomizationController();
+    const navigationController = useNavigationController();
+    if (!navigationController.topLevelNavigation) throw Error("Navigation not ready");
+    const {
+      allowDragAndDrop,
+      navigationEntries: rawNavigationEntries,
+      groups: groupOrderFromNavController,
+      onNavigationEntriesUpdate
+    } = navigationController.topLevelNavigation;
+    const fuse = React.useRef(null);
+    const [filteredUrls, setFilteredUrls] = React.useState(null);
+    const performingSearch = Boolean(filteredUrls);
+    const filteredNavigationEntries = filteredUrls ? rawNavigationEntries.filter((e) => filteredUrls.includes(e.url)) : rawNavigationEntries;
+    React.useEffect(() => {
+      fuse.current = new Fuse(rawNavigationEntries, {
+        keys: ["name", "description", "group", "path"]
+      });
+    }, [rawNavigationEntries]);
+    const updateSearch = React.useCallback((v) => {
+      if (!v?.trim()) return setFilteredUrls(null);
+      const r = fuse.current?.search(v.trim());
+      setFilteredUrls(r ? r.map((x) => x.item.url) : []);
+    }, []);
+    const [items, setItems] = React.useState([]);
+    const [adminGroupData, setAdminGroupData] = React.useState(null);
+    React.useEffect(() => {
+      const src = performingSearch ? filteredNavigationEntries : rawNavigationEntries;
+      const entriesByGroup = {};
+      src.forEach((e_0) => {
+        const g = e_0.type === "admin" ? ADMIN_GROUP_NAME : e_0.group ?? DEFAULT_GROUP_NAME;
+        (entriesByGroup[g] ??= []).push(e_0);
+      });
+      let allProcessed;
+      if (performingSearch) {
+        const ordered = [...new Set(src.map((e_1) => e_1.group ?? DEFAULT_GROUP_NAME))];
+        allProcessed = ordered.map((name) => ({
+          name,
+          entries: entriesByGroup[name] || []
+        })).filter((g_0) => g_0.entries.length);
       } else {
-        t152 = $[43];
+        allProcessed = groupOrderFromNavController.map((g_1) => ({
+          name: g_1,
+          entries: entriesByGroup[g_1] || []
+        }));
+        Object.keys(entriesByGroup).forEach((g_2) => {
+          if (!groupOrderFromNavController.includes(g_2)) allProcessed.push({
+            name: g_2,
+            entries: entriesByGroup[g_2]
+          });
+        });
+        allProcessed = allProcessed.filter((g_3) => g_3.entries.length || groupOrderFromNavController.includes(g_3.name));
       }
-      let t16;
-      if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
-        t16 = /* @__PURE__ */ jsxRuntime.jsx(ui.SearchBar, { onTextSearch: updateSearchResults, placeholder: "Search collections", large: false, autoFocus: true, innerClassName: "w-full", className: "w-full flex-grow" });
-        $[44] = t16;
+      const admin = allProcessed.find((g_4) => g_4.name === ADMIN_GROUP_NAME);
+      if (admin) {
+        setAdminGroupData(admin);
+        setItems(allProcessed.filter((g_5) => g_5.name !== ADMIN_GROUP_NAME));
       } else {
-        t16 = $[44];
+        setAdminGroupData(null);
+        setItems(allProcessed);
       }
-      if ($[45] !== additionalActions || $[46] !== t152) {
-        t6 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full sticky py-4 transition-all duration-400 ease-in-out top-0 z-10 flex flex-row gap-4", style: t152, children: [
-          t16,
+    }, [performingSearch, filteredNavigationEntries, rawNavigationEntries, groupOrderFromNavController]);
+    const updateItems = (updater) => {
+      setItems(updater);
+    };
+    const persistNavigationGroups = (latest) => {
+      const draggable = latest.map((g_6) => ({
+        name: g_6.name,
+        entries: g_6.entries.map((e_2) => e_2.path)
+      }));
+      const all = adminGroupData ? [...draggable, {
+        name: adminGroupData.name,
+        entries: adminGroupData.entries.map((e_3) => e_3.path)
+      }] : draggable;
+      onNavigationEntriesUpdate(all);
+    };
+    const {
+      sensors,
+      collisionDetection,
+      onDragStart,
+      onDragOver,
+      onDragEnd,
+      dropAnimation,
+      activeItemForOverlay,
+      activeGroupData,
+      draggingGroupId,
+      containers,
+      dndKitActiveNode,
+      onDragCancel,
+      isDraggingCardOnly,
+      dialogOpenForGroup,
+      setDialogOpenForGroup,
+      handleRenameGroup,
+      isHoveringNewGroupDropZone,
+      setIsHoveringNewGroupDropZone
+    } = useHomePageDnd({
+      items,
+      setItems: updateItems,
+      disabled: !allowDragAndDrop || performingSearch,
+      onPersist: persistNavigationGroups,
+      // ——► persistence here
+      onGroupMoved: (g_7) => context.analyticsController?.onAnalyticsEvent?.("home_move_group", {
+        name: g_7
+      }),
+      onCardMovedBetweenGroups: (card) => context.analyticsController?.onAnalyticsEvent?.("home_move_card", {
+        id: card.id
+      }),
+      onNewGroupDrop: () => context.analyticsController?.onAnalyticsEvent?.("home_drop_new_group")
+    });
+    const {
+      containerRef,
+      direction
+    } = useRestoreScroll();
+    const dndDisabled = !allowDragAndDrop || performingSearch;
+    const dndModifiers = React.useMemo(() => {
+      if (dndKitActiveNode?.data.current?.type === "group") return [modifiers.restrictToVerticalAxis, modifiers.restrictToWindowEdges];
+      return [modifiers.restrictToWindowEdges];
+    }, [dndKitActiveNode]);
+    let additionalPluginChildrenStart;
+    let additionalPluginChildrenEnd;
+    let additionalPluginSections;
+    if (customizationController.plugins) {
+      const sectionProps = {
+        context
+      };
+      additionalPluginSections = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: customizationController.plugins.filter((p) => p.homePage?.includeSection).map((plugin) => {
+        const section = plugin.homePage.includeSection(sectionProps);
+        return /* @__PURE__ */ jsxRuntime.jsx(NavigationGroup, { group: section.title, children: section.children }, `plugin_section_${plugin.key}`);
+      }) });
+      additionalPluginChildrenStart = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: customizationController.plugins.filter((p_0) => p_0.homePage?.additionalChildrenStart).map((plugin_0, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: plugin_0.homePage.additionalChildrenStart }, `plugin_children_start_${i}`)) });
+      additionalPluginChildrenEnd = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: customizationController.plugins.filter((p_1) => p_1.homePage?.additionalChildrenEnd).map((plugin_1, i_0) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: plugin_1.homePage.additionalChildrenEnd }, `plugin_children_end_${i_0}`)) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: "py-2 overflow-auto h-full w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { maxWidth: "6xl", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full sticky py-4 transition-all duration-400 ease-in-out top-0 z-10 flex flex-row gap-4", style: {
+          top: direction === "down" ? -84 : 0
+        }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.SearchBar, { onTextSearch: updateSearch, placeholder: "Search collections", autoFocus: true, innerClassName: "w-full", className: "w-full flex-grow" }),
           additionalActions
-        ] });
-        $[45] = additionalActions;
-        $[46] = t152;
-        $[47] = t6;
-      } else {
-        t6 = $[47];
-      }
-      if ($[48] !== performingSearch) {
-        t7 = /* @__PURE__ */ jsxRuntime.jsx(FavouritesView, { hidden: performingSearch });
-        $[48] = performingSearch;
-        $[49] = t7;
-      } else {
-        t7 = $[49];
-      }
-      t8 = additionalChildrenStart;
-      t9 = additionalPluginChildrenStart;
-      let t17;
-      if ($[50] !== context || $[51] !== customizationController.plugins || $[52] !== filteredNavigationEntries || $[53] !== performingSearch) {
-        t17 = (group_0, index_0) => {
-          const AdditionalCards = [];
-          const actionProps = {
-            group: group_0,
-            context
-          };
-          if (customizationController.plugins) {
-            customizationController.plugins.forEach((plugin_5) => {
-              if (plugin_5.homePage?.AdditionalCards) {
-                AdditionalCards.push(...toArray(plugin_5.homePage?.AdditionalCards));
-              }
-            });
-          }
-          const thisGroupCollections = filteredNavigationEntries.filter((entry_0) => entry_0.group === group_0 || !entry_0.group && group_0 === void 0);
-          if (thisGroupCollections.length === 0 && (AdditionalCards.length === 0 || performingSearch)) {
-            return null;
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(FavouritesView, { hidden: performingSearch }),
+        additionalChildrenStart,
+        additionalPluginChildrenStart,
+        /* @__PURE__ */ jsxRuntime.jsxs(core.DndContext, { sensors, collisionDetection, measuring: {
+          droppable: {
+            strategy: core.MeasuringStrategy.Always,
+            frequency: 500
           }
-          return /* @__PURE__ */ jsxRuntime.jsx(NavigationGroup, { group: group_0, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: [
-            thisGroupCollections.map((entry_1) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-1", children: /* @__PURE__ */ jsxRuntime.jsx(NavigationCardBinding, { ...entry_1, onClick: () => {
-              let event;
-              if (entry_1.type === "collection") {
-                event = "home_navigate_to_collection";
-              } else {
-                if (entry_1.type === "view") {
-                  event = "home_navigate_to_view";
-                } else {
-                  if (entry_1.type === "admin") {
-                    event = "home_navigate_to_admin_view";
-                  } else {
-                    event = "unmapped_event";
-                  }
-                }
-              }
-              context.analyticsController?.onAnalyticsEvent?.(event, {
-                path: entry_1.path
-              });
-            } }) }, `nav_${entry_1.group}_${entry_1.path}_${entry_1.name}`)),
-            group_0?.toLowerCase() !== "admin" && AdditionalCards && AdditionalCards.map((AdditionalCard, i_2) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AdditionalCard, { ...actionProps }) }, `nav_${group_0}_add_${i_2}`))
-          ] }) }, `plugin_section_${group_0}`);
-        };
-        $[50] = context;
-        $[51] = customizationController.plugins;
-        $[52] = filteredNavigationEntries;
-        $[53] = performingSearch;
-        $[54] = t17;
-      } else {
-        t17 = $[54];
-      }
-      t10 = allGroups.map(t17);
-      $[7] = additionalActions;
-      $[8] = additionalChildrenStart;
-      $[9] = containerRef;
-      $[10] = context;
-      $[11] = customizationController.plugins;
-      $[12] = direction;
-      $[13] = filteredNavigationEntries;
-      $[14] = filteredUrls;
-      $[15] = groups;
-      $[16] = performingSearch;
-      $[17] = T0;
-      $[18] = additionalPluginChildrenEnd;
-      $[19] = additionalPluginSections;
-      $[20] = t10;
-      $[21] = t11;
-      $[22] = t12;
-      $[23] = t13;
-      $[24] = t5;
-      $[25] = t6;
-      $[26] = t7;
-      $[27] = t8;
-      $[28] = t9;
-    } else {
-      T0 = $[17];
-      additionalPluginChildrenEnd = $[18];
-      additionalPluginSections = $[19];
-      t10 = $[20];
-      t11 = $[21];
-      t12 = $[22];
-      t13 = $[23];
-      t5 = $[24];
-      t6 = $[25];
-      t7 = $[26];
-      t8 = $[27];
-      t9 = $[28];
-    }
-    let t14;
-    if ($[55] !== T0 || $[56] !== additionalChildrenEnd || $[57] !== additionalPluginChildrenEnd || $[58] !== additionalPluginSections || $[59] !== t10 || $[60] !== t5 || $[61] !== t6 || $[62] !== t7 || $[63] !== t8 || $[64] !== t9) {
-      t14 = /* @__PURE__ */ jsxRuntime.jsxs(T0, { maxWidth: t5, children: [
-        t6,
-        t7,
-        t8,
-        t9,
-        t10,
+        }, onDragStart, onDragOver, onDragEnd, onDragCancel, modifiers: dndModifiers, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: containers, strategy: sortable.verticalListSortingStrategy, children: items.map((groupData) => {
+            const groupKey = groupData.name;
+            const entriesInGroup = groupData.entries;
+            const AdditionalCards = [];
+            customizationController.plugins?.forEach((p_2) => {
+              if (p_2.homePage?.AdditionalCards) AdditionalCards.push(...toArray(p_2.homePage.AdditionalCards));
+            });
+            const actionProps = {
+              group: groupKey === DEFAULT_GROUP_NAME ? void 0 : groupKey,
+              context
+            };
+            if (entriesInGroup.length === 0 && (AdditionalCards.length === 0 || performingSearch) && !groupOrderFromNavController.includes(groupKey)) return null;
+            return /* @__PURE__ */ jsxRuntime.jsx(SortableNavigationGroup, { groupName: groupKey, disabled: dndDisabled, children: /* @__PURE__ */ jsxRuntime.jsx(NavigationGroup, { group: groupKey === DEFAULT_GROUP_NAME ? void 0 : groupKey, minimised: draggingGroupId === groupKey && !isDraggingCardOnly, isPotentialCardDropTarget: isDraggingCardOnly, dndDisabled, onEditGroup: () => {
+              if (dndDisabled) return;
+              setDialogOpenForGroup(groupKey);
+            }, children: /* @__PURE__ */ jsxRuntime.jsx(NavigationGroupDroppable, { id: groupKey, itemIds: entriesInGroup.map((e_4) => e_4.url), isPotentialCardDropTarget: isDraggingCardOnly, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 ", children: [
+              entriesInGroup.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(SortableNavigationCard, { entry, onClick: () => {
+                let event = "unmapped_event";
+                if (entry.type === "collection") event = "home_navigate_to_collection";
+                else if (entry.type === "view") event = "home_navigate_to_view";
+                else if (entry.type === "admin") event = "home_navigate_to_admin_view";
+                context.analyticsController?.onAnalyticsEvent?.(event, {
+                  path: entry.path
+                });
+              } }, entry.url)),
+              !performingSearch && groupKey.toLowerCase() !== ADMIN_GROUP_NAME.toLowerCase() && AdditionalCards.map((C, i_1) => /* @__PURE__ */ jsxRuntime.jsx(C, { ...actionProps }, `extra_${groupKey}_${i_1}`))
+            ] }) }) }) }, groupKey);
+          }) }, JSON.stringify(containers)),
+          /* @__PURE__ */ jsxRuntime.jsx(NewGroupDropZone, { disabled: dndDisabled, setIsHovering: setIsHoveringNewGroupDropZone }),
+          /* @__PURE__ */ jsxRuntime.jsx(core.DragOverlay, { adjustScale: false, dropAnimation, children: activeGroupData && draggingGroupId === activeGroupData.name ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg bg-transparent", style: {
+            padding: 0,
+            margin: 0
+          }, children: /* @__PURE__ */ jsxRuntime.jsx(NavigationGroup, { group: activeGroupData.name === DEFAULT_GROUP_NAME ? void 0 : activeGroupData.name, isPreview: false, minimised: true }) }) : activeItemForOverlay ? /* @__PURE__ */ jsxRuntime.jsx(NavigationCardBinding, { ...activeItemForOverlay, shrink: isHoveringNewGroupDropZone }) : null })
+        ] }),
+        !performingSearch && adminGroupData && /* @__PURE__ */ jsxRuntime.jsx(NavigationGroup, { group: adminGroupData.name, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 ", children: adminGroupData.entries.map((entry_0) => /* @__PURE__ */ jsxRuntime.jsx(NavigationCardBinding, { ...entry_0, onClick: () => {
+          let event_0 = "unmapped_event";
+          if (entry_0.type === "collection") event_0 = "home_navigate_to_collection";
+          else if (entry_0.type === "view") event_0 = "home_navigate_to_view";
+          else if (entry_0.type === "admin") event_0 = "home_navigate_to_admin_view";
+          context.analyticsController?.onAnalyticsEvent?.(event_0, {
+            path: entry_0.path
+          });
+        } }, entry_0.url)) }) }),
         additionalPluginSections,
         additionalPluginChildrenEnd,
         additionalChildrenEnd
-      ] });
-      $[55] = T0;
-      $[56] = additionalChildrenEnd;
-      $[57] = additionalPluginChildrenEnd;
-      $[58] = additionalPluginSections;
-      $[59] = t10;
-      $[60] = t5;
-      $[61] = t6;
-      $[62] = t7;
-      $[63] = t8;
-      $[64] = t9;
-      $[65] = t14;
-    } else {
-      t14 = $[65];
-    }
-    let t15;
-    if ($[66] !== t11 || $[67] !== t12 || $[68] !== t13 || $[69] !== t14) {
-      t15 = /* @__PURE__ */ jsxRuntime.jsx("div", { id: t11, ref: t12, className: t13, children: t14 });
-      $[66] = t11;
-      $[67] = t12;
-      $[68] = t13;
-      $[69] = t14;
-      $[70] = t15;
-    } else {
-      t15 = $[70];
-    }
-    return t15;
-  }
-  function _temp8(plugin_4, i_1) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { children: plugin_4.homePage.additionalChildrenEnd }, `plugin_children_start_${i_1}`);
-  }
-  function _temp7$1(plugin_3) {
-    return plugin_3.homePage?.additionalChildrenEnd;
-  }
-  function _temp6$2(plugin_2, i_0) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { children: plugin_2.homePage.additionalChildrenStart }, `plugin_children_start_${i_0}`);
-  }
-  function _temp5$2(plugin_1) {
-    return plugin_1.homePage?.additionalChildrenStart;
-  }
-  function _temp4$2(plugin) {
-    return plugin.homePage?.includeSection;
-  }
-  function _temp3$3(e_1) {
-    return !e_1.group;
-  }
-  function _temp2$5(entry) {
-    return entry.group;
-  }
-  function _temp$c(e_0) {
-    return e_0.item.url;
+      ] }),
+      dialogOpenForGroup && /* @__PURE__ */ jsxRuntime.jsx(RenameGroupDialog, { open: true, initialName: dialogOpenForGroup, existingGroupNames: items.map((g_8) => g_8.name).filter((n) => n !== dialogOpenForGroup), onClose: () => setDialogOpenForGroup(null), onRename: (newName) => {
+        handleRenameGroup(dialogOpenForGroup, newName);
+        setDialogOpenForGroup(null);
+      } })
+    ] });
   }
   function EntityCollectionViewActions(t0) {
     const $ = reactCompilerRuntime.c(41);
@@ -16530,6 +17268,92 @@
       /* @__PURE__ */ jsxRuntime.jsx(FieldHelperText, { includeDescription, showError, error, disabled, property })
     ] });
   }
+  function ReferenceAsStringFieldBinding(props) {
+    const $ = reactCompilerRuntime.c(4);
+    if (typeof props.property.reference?.path !== "string") {
+      let t02;
+      if ($[0] !== props) {
+        t02 = /* @__PURE__ */ jsxRuntime.jsx(ReadOnlyFieldBinding, { ...props });
+        $[0] = props;
+        $[1] = t02;
+      } else {
+        t02 = $[1];
+      }
+      return t02;
+    }
+    let t0;
+    if ($[2] !== props) {
+      t0 = /* @__PURE__ */ jsxRuntime.jsx(ReferenceAsStringFieldBindingInternal, { ...props });
+      $[2] = props;
+      $[3] = t0;
+    } else {
+      t0 = $[3];
+    }
+    return t0;
+  }
+  function ReferenceAsStringFieldBindingInternal({
+    propertyKey,
+    value,
+    setValue,
+    error,
+    showError,
+    isSubmitting,
+    disabled,
+    minimalistView,
+    property,
+    includeDescription,
+    size = "medium"
+  }) {
+    if (!property.reference?.path) {
+      throw new Error("Property path is required for ReferenceAsStringFieldBinding");
+    }
+    useClearRestoreValue({
+      property,
+      value,
+      setValue
+    });
+    const navigationController = useNavigationController();
+    const path = property.reference.path;
+    const collection = React.useMemo(() => {
+      return path ? navigationController.getCollection(path) : void 0;
+    }, [path]);
+    const referenceValue = React.useMemo(() => {
+      if (value && path) {
+        return new EntityReference(value, path);
+      }
+      return void 0;
+    }, [value, path]);
+    if (!collection) {
+      throw Error(`Couldn't find the corresponding collection for the path: ${path}`);
+    }
+    const onSingleEntitySelected = React.useCallback((e) => {
+      setValue(e ? e.id : null);
+    }, [setValue]);
+    const referenceDialogController = useReferenceDialog({
+      multiselect: false,
+      path,
+      collection,
+      onSingleEntitySelected,
+      selectedEntityIds: value ? [value] : void 0,
+      forceFilter: property.reference.forceFilter
+    });
+    const onEntryClick = (e_0) => {
+      e_0.preventDefault();
+      referenceDialogController.open();
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      !minimalistView && /* @__PURE__ */ jsxRuntime.jsx(LabelWithIconAndTooltip, { propertyKey, icon: getIconForProperty(property, "small"), required: property.validation?.required, title: property.name, className: "h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5" }),
+      !collection && /* @__PURE__ */ jsxRuntime.jsx(ErrorView, { error: "The specified collection does not exist. Check console" }),
+      collection && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        referenceValue && /* @__PURE__ */ jsxRuntime.jsx(ReferencePreview, { disabled: !path, previewProperties: property.reference?.previewProperties, hover: !disabled, size, onClick: disabled || isSubmitting ? void 0 : onEntryClick, reference: referenceValue, includeEntityLink: property.reference?.includeEntityLink, includeId: property.reference?.includeId }),
+        !value && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "justify-center text-left", children: /* @__PURE__ */ jsxRuntime.jsxs(EntityPreviewContainer, { className: ui.cls("px-6 h-16 text-sm font-medium flex items-center gap-6", disabled || isSubmitting ? "text-surface-accent-500" : "cursor-pointer text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800"), onClick: onEntryClick, size: "medium", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(IconForView, { collectionOrView: collection, className: "text-surface-300 dark:text-surface-600" }),
+          `Edit ${property.name}`.toUpperCase()
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(FieldHelperText, { includeDescription, showError, error, disabled, property })
+    ] });
+  }
   const PropertyFieldBinding = React.memo(PropertyFieldBindingInternal, (a, b) => {
     if (a.propertyKey !== b.propertyKey) {
       return false;
@@ -17772,7 +18596,6 @@
           minimalistView: false,
           autoFocus: internalId === lastAddedId
         };
-        console.debug("Building entry for", index, fieldProps);
         return /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(PropertyFieldBinding, { ...fieldProps, index }) });
       };
       $[4] = context;
@@ -20566,6 +21389,8 @@
   }
   const DEFAULT_BASE_PATH = "/";
   const DEFAULT_COLLECTION_PATH = "/c";
+  const NAVIGATION_DEFAULT_GROUP_NAME = "Views";
+  const NAVIGATION_ADMIN_GROUP_NAME = "Admin";
   function useBuildNavigationController(props) {
     const {
       basePath = DEFAULT_BASE_PATH,
@@ -20579,12 +21404,14 @@
       plugins,
       userConfigPersistence,
       dataSourceDelegate,
-      disabled
+      disabled,
+      navigationGroupMappings
     } = props;
     const navigate = reactRouterDom.useNavigate();
     const collectionsRef = React.useRef();
     const viewsRef = React.useRef();
     const adminViewsRef = React.useRef();
+    const navigationEntriesOrderRef = React.useRef();
     const [initialised, setInitialised] = React.useState(false);
     const [topLevelNavigation, setTopLevelNavigation] = React.useState(void 0);
     const [navigationLoading, setNavigationLoading] = React.useState(true);
@@ -20595,80 +21422,127 @@
     const fullCollectionPath = cleanBasePath ? `/${cleanBasePath}/${cleanBaseCollectionPath}` : `/${cleanBaseCollectionPath}`;
     const buildCMSUrlPath = React.useCallback((path) => cleanBasePath ? `/${cleanBasePath}/${encodePath(path)}` : `/${encodePath(path)}`, [cleanBasePath]);
     const buildUrlCollectionPath = React.useCallback((path_0) => `${removeInitialAndTrailingSlashes(baseCollectionPath)}/${encodePath(path_0)}`, [baseCollectionPath]);
+    const allPluginGroups = plugins?.flatMap((plugin) => plugin.homePage?.navigationEntries ? plugin.homePage.navigationEntries.map((e) => e.name) : []) ?? [];
+    const pluginGroups = [...new Set(allPluginGroups)];
+    const onNavigationEntriesOrderUpdate = React.useCallback((entries) => {
+      if (!plugins) {
+        return;
+      }
+      const filteredEntries = entries.filter((entry) => entry.entries.length > 0);
+      if (plugins.some((plugin_1) => plugin_1.homePage?.onNavigationEntriesUpdate)) {
+        plugins.forEach((plugin_0) => {
+          if (plugin_0.homePage?.onNavigationEntriesUpdate) {
+            plugin_0.homePage.onNavigationEntriesUpdate(filteredEntries);
+          }
+        });
+      }
+    }, [plugins]);
     const computeTopNavigation = React.useCallback((collections, views, adminViews, viewsOrder_0) => {
-      let navigationEntries = [...(collections ?? []).map((collection) => !collection.hideFromNavigation ? {
-        url: buildUrlCollectionPath(collection.id ?? collection.path),
-        type: "collection",
-        name: collection.name.trim(),
-        path: collection.id ?? collection.path,
-        collection,
-        description: collection.description?.trim(),
-        group: getGroup(collection)
-      } : void 0).filter(Boolean), ...(views ?? []).map((view) => !view.hideFromNavigation ? {
-        url: buildCMSUrlPath(Array.isArray(view.path) ? view.path[0] : view.path),
-        name: view.name.trim(),
-        type: "view",
-        path: view.path,
-        view,
-        description: view.description?.trim(),
-        group: getGroup(view)
-      } : void 0).filter(Boolean), ...(adminViews ?? []).map((view_0) => !view_0.hideFromNavigation ? {
-        url: buildCMSUrlPath(Array.isArray(view_0.path) ? view_0.path[0] : view_0.path),
-        name: view_0.name.trim(),
-        type: "admin",
-        path: view_0.path,
-        view: view_0,
-        description: view_0.description?.trim(),
-        group: "Admin"
-      } : void 0).filter(Boolean)];
-      navigationEntries = navigationEntries.sort((a, b) => {
-        if (a.group !== "Views" && a.group !== "Admin" && (b.group === "Views" || b.group === "Admin")) {
-          return -1;
-        }
-        if (b.group !== "Views" && b.group !== "Admin" && (a.group === "Views" || a.group === "Admin")) {
-          return 1;
-        }
-        if (a.group === "Admin" && b.group !== "Admin") {
-          return 1;
-        }
-        if (a.group !== "Admin" && b.group === "Admin") {
-          return -1;
-        }
-        if (a.group === "Views" && b.group !== "Views") {
-          return -1;
+      const finalNavigationGroupMappings = computeNavigationGroups({
+        navigationGroupMappings,
+        collections,
+        views,
+        plugins
+      });
+      const allPluginNavigationEntries = finalNavigationGroupMappings.map((g) => g.entries).flat() ?? [];
+      const navigationEntriesOrder = [...new Set(allPluginNavigationEntries)];
+      let navigationEntries = [...(collections ?? []).reduce((acc, collection) => {
+        if (collection.hideFromNavigation) return acc;
+        const pathKey = collection.id ?? collection.path;
+        let groupName = getGroup(collection);
+        if (finalNavigationGroupMappings) {
+          for (const pluginGroupDef of finalNavigationGroupMappings) {
+            if (pluginGroupDef.entries.includes(pathKey)) {
+              groupName = pluginGroupDef.name;
+              break;
+            }
+          }
         }
-        if (a.group !== "Views" && b.group === "Views") {
-          return 1;
+        acc.push({
+          id: `collection:${pathKey}`,
+          url: buildUrlCollectionPath(pathKey),
+          type: "collection",
+          name: collection.name.trim(),
+          path: pathKey,
+          collection,
+          description: collection.description?.trim(),
+          group: groupName ?? NAVIGATION_DEFAULT_GROUP_NAME
+        });
+        return acc;
+      }, []), ...(views ?? []).reduce((acc_0, view) => {
+        if (view.hideFromNavigation) return acc_0;
+        const pathKey_0 = Array.isArray(view.path) ? view.path[0] : view.path;
+        let groupName_0 = getGroup(view);
+        if (finalNavigationGroupMappings) {
+          for (const pluginGroupDef_0 of finalNavigationGroupMappings) {
+            if (pluginGroupDef_0.entries.includes(pathKey_0)) {
+              groupName_0 = pluginGroupDef_0.name;
+              break;
+            }
+          }
         }
+        acc_0.push({
+          id: `view:${pathKey_0}`,
+          url: buildCMSUrlPath(pathKey_0),
+          name: view.name.trim(),
+          type: "view",
+          path: view.path,
+          view,
+          description: view.description?.trim(),
+          group: groupName_0 ?? NAVIGATION_DEFAULT_GROUP_NAME
+        });
+        return acc_0;
+      }, []), ...(adminViews ?? []).reduce((acc_1, view_0) => {
+        if (view_0.hideFromNavigation) return acc_1;
+        const pathKey_1 = Array.isArray(view_0.path) ? view_0.path[0] : view_0.path;
+        const groupName_1 = NAVIGATION_ADMIN_GROUP_NAME;
+        acc_1.push({
+          id: `admin:${pathKey_1}`,
+          url: buildCMSUrlPath(pathKey_1),
+          name: view_0.name.trim(),
+          type: "admin",
+          path: view_0.path,
+          view: view_0,
+          description: view_0.description?.trim(),
+          group: groupName_1
+        });
+        return acc_1;
+      }, [])];
+      const groupOrderValue = (groupName_2) => {
+        if (groupName_2 === NAVIGATION_ADMIN_GROUP_NAME) return 1;
         return 0;
+      };
+      navigationEntries = navigationEntries.sort((a, b) => {
+        return groupOrderValue(a.group) - groupOrderValue(b.group);
       });
-      if (viewsOrder_0) {
+      const usedViewsOrder = viewsOrder_0 ?? navigationEntriesOrder;
+      if (usedViewsOrder) {
         navigationEntries = navigationEntries.sort((a_0, b_0) => {
-          const aIndex = viewsOrder_0.indexOf(a_0.path);
-          const bIndex = viewsOrder_0.indexOf(b_0.path);
-          if (aIndex === -1 && bIndex === -1) {
-            return 0;
-          }
-          if (aIndex === -1) {
-            return 1;
-          }
-          if (bIndex === -1) {
-            return -1;
-          }
+          const getSortPath = (navEntry) => typeof navEntry.path === "string" ? navEntry.path : navEntry.path[0];
+          const aIndex = usedViewsOrder.indexOf(getSortPath(a_0));
+          const bIndex = usedViewsOrder.indexOf(getSortPath(b_0));
+          if (aIndex === -1 && bIndex === -1) return 0;
+          if (aIndex === -1) return 1;
+          if (bIndex === -1) return -1;
           return aIndex - bIndex;
         });
       }
-      const groups = Object.values(navigationEntries).map((e) => e.group).filter(Boolean).filter((value, index, array) => array.indexOf(value) === index);
+      const collectedGroupsFromEntries = navigationEntries.map((e_0) => e_0.group).filter(Boolean);
+      const allDefinedGroups = [...pluginGroups, ...collectedGroupsFromEntries];
+      const uniqueGroups = [...new Set(allDefinedGroups)].sort((a_1, b_1) => groupOrderValue(a_1) - groupOrderValue(b_1));
       return {
+        allowDragAndDrop: plugins?.some((plugin_2) => plugin_2.homePage?.allowDragAndDrop) ?? false,
         navigationEntries,
-        groups
+        groups: uniqueGroups,
+        onNavigationEntriesUpdate: onNavigationEntriesOrderUpdate
       };
-    }, [buildCMSUrlPath, buildUrlCollectionPath]);
+    }, [navigationGroupMappings, buildCMSUrlPath, buildUrlCollectionPath, pluginGroups, onNavigationEntriesOrderUpdate]);
     const refreshNavigation = React.useCallback(async () => {
       if (disabled || authController.initialLoading) return;
       console.debug("Refreshing navigation");
       try {
         const [resolvedCollections = [], resolvedViews, resolvedAdminViews = []] = await Promise.all([resolveCollections(collectionsProp, collectionPermissions, authController, dataSourceDelegate, plugins), resolveCMSViews(viewsProp, authController, dataSourceDelegate), resolveCMSViews(adminViewsProp, authController, dataSourceDelegate)]);
+        const computedTopLevelNav = computeTopNavigation(resolvedCollections, resolvedViews, resolvedAdminViews, viewsOrder);
         let shouldUpdateTopLevelNav = false;
         if (!areCollectionListsEqual(collectionsRef.current ?? [], resolvedCollections)) {
           collectionsRef.current = resolvedCollections;
@@ -20687,13 +21561,17 @@
           adminViewsRef.current = resolvedAdminViews;
           shouldUpdateTopLevelNav = true;
         }
-        const computedTopLevelNav = computeTopNavigation(resolvedCollections, resolvedViews, resolvedAdminViews, viewsOrder);
+        const navigationEntriesOrder_0 = computedTopLevelNav.navigationEntries.map((e_2) => e_2.id);
+        if (!equal(navigationEntriesOrderRef.current, navigationEntriesOrder_0)) {
+          navigationEntriesOrderRef.current = navigationEntriesOrder_0;
+          shouldUpdateTopLevelNav = true;
+        }
         if (shouldUpdateTopLevelNav && !equal(topLevelNavigation, computedTopLevelNav)) {
           setTopLevelNavigation(computedTopLevelNav);
         }
-      } catch (e_0) {
-        console.error(e_0);
-        setNavigationLoadingError(e_0);
+      } catch (e_1) {
+        console.error(e_1);
+        setNavigationLoadingError(e_1);
       }
       if (navigationLoading) setNavigationLoading(false);
       if (!initialised) setInitialised(true);
@@ -20893,9 +21771,9 @@
   function getGroup(collectionOrView) {
     const trimmed = collectionOrView.group?.trim();
     if (!trimmed || trimmed === "") {
-      return "Views";
+      return NAVIGATION_DEFAULT_GROUP_NAME;
     }
-    return trimmed ?? "Views";
+    return trimmed ?? NAVIGATION_DEFAULT_GROUP_NAME;
   }
   function areCollectionListsEqual(a, b) {
     if (a.length !== b.length) {
@@ -20921,6 +21799,58 @@
     }
     return equal(removeFunctions(restA), removeFunctions(restB));
   }
+  function computeNavigationGroups({
+    navigationGroupMappings,
+    collections,
+    views,
+    plugins
+  }) {
+    let result = navigationGroupMappings;
+    result = plugins ? plugins?.reduce((acc, plugin) => {
+      if (plugin.homePage?.navigationEntries) {
+        plugin.homePage.navigationEntries.forEach((entry) => {
+          const {
+            name,
+            entries
+          } = entry;
+          const existingGroup = acc.find((entry2) => entry2.name === name);
+          if (existingGroup) {
+            existingGroup.entries.push(...entries);
+          } else {
+            acc.push({
+              name,
+              entries: [...entries]
+            });
+          }
+        });
+      }
+      return acc;
+    }, [...result ?? []]) : result;
+    if (!result) {
+      result = [];
+      const groupMap = {};
+      (collections ?? []).forEach((collection) => {
+        const name = getGroup(collection);
+        const entry = collection.id ?? collection.path;
+        if (!groupMap[name]) groupMap[name] = [];
+        groupMap[name].push(entry);
+      });
+      (views ?? []).forEach((view) => {
+        const name = getGroup(view);
+        const entry = Array.isArray(view.path) ? view.path[0] : view.path;
+        if (!groupMap[name]) groupMap[name] = [];
+        groupMap[name].push(entry);
+      });
+      result = Object.entries(groupMap).map(([name, entries]) => ({
+        name,
+        entries
+      }));
+    }
+    result.forEach((group) => {
+      group.entries = [...new Set(group.entries)];
+    });
+    return result;
+  }
   function useBuildLocalConfigurationPersistence() {
     const $ = reactCompilerRuntime.c(15);
     let t0;
@@ -22891,7 +23821,7 @@
         const {
           isActive
         } = t52;
-        return ui.cls("rounded-lg truncate", "hover:bg-surface-accent-300 hover:bg-opacity-75 dark:hover:bg-surface-accent-800 dark:hover:bg-opacity-75 text-text-primary dark:text-surface-200 hover:text-surface-900 hover:dark:text-white", "flex flex-row items-center mr-8", drawerOpen ? "pl-4 h-12" : "pl-4 h-11", "font-semibold text-xs", isActive ? "bg-surface-accent-200 bg-opacity-60 dark:bg-surface-800 dark:bg-opacity-50" : "");
+        return ui.cls("rounded-lg truncate", "hover:bg-surface-accent-300 hover:bg-opacity-75 dark:hover:bg-surface-accent-800 dark:hover:bg-opacity-75 text-text-primary dark:text-surface-200 hover:text-surface-900 hover:dark:text-white", "flex flex-row items-center mr-8", drawerOpen ? "pl-4 h-10" : "pl-4 h-9", "font-semibold text-xs", isActive ? "bg-surface-accent-200 bg-opacity-60 dark:bg-surface-800 dark:bg-opacity-50" : "");
       };
       $[4] = drawerOpen;
       $[5] = t4;
@@ -23051,7 +23981,7 @@
         if ($[41] !== adminMenuOpen || $[42] !== buildGroupHeader || $[43] !== drawerOpen || $[44] !== navigationEntries || $[45] !== onClick || $[46] !== tooltipsOpen) {
           t10 = (group_0) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface-50 dark:bg-surface-800 dark:bg-opacity-30 my-4 rounded-lg ml-3 mr-1", children: [
             buildGroupHeader(group_0),
-            Object.values(navigationEntries).filter((e_0) => e_0.group === group_0).map((view_0, index) => /* @__PURE__ */ jsxRuntime.jsx(DrawerNavigationItem, { icon: /* @__PURE__ */ jsxRuntime.jsx(IconForView, { collectionOrView: view_0.collection ?? view_0.view, size: "small" }), tooltipsOpen, adminMenuOpen, drawerOpen, onClick: () => onClick(view_0), url: view_0.url, name: view_0.name }, `navigation_${index}`))
+            Object.values(navigationEntries).filter((e_0) => e_0.group === group_0).map((view_0) => /* @__PURE__ */ jsxRuntime.jsx(DrawerNavigationItem, { icon: /* @__PURE__ */ jsxRuntime.jsx(IconForView, { collectionOrView: view_0.collection ?? view_0.view, size: "small" }), tooltipsOpen, adminMenuOpen, drawerOpen, onClick: () => onClick(view_0), url: view_0.url, name: view_0.name }, view_0.id))
           ] }, `drawer_group_${group_0}`);
           $[41] = adminMenuOpen;
           $[42] = buildGroupHeader;
@@ -23105,13 +24035,13 @@
         adminViews.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ui.Menu, { side: "right", open: adminMenuOpen, onOpenChange: setAdminMenuOpen, trigger: /* @__PURE__ */ jsxRuntime.jsxs(ui.IconButton, { shape: "square", className: "m-4 text-surface-900 dark:text-white w-fit", children: [
           /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Admin", open: tooltipsOpen, side: "right", sideOffset: 28, children: /* @__PURE__ */ jsxRuntime.jsx(ui.MoreVertIcon, {}) }),
           drawerOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls(drawerOpen ? "opacity-100" : "opacity-0 hidden", "mx-4 font-inherit text-inherit"), children: "ADMIN" })
-        ] }), children: adminViews.map((entry, index_0) => /* @__PURE__ */ jsxRuntime.jsxs(ui.MenuItem, { onClick: (event) => {
+        ] }), children: adminViews.map((entry) => /* @__PURE__ */ jsxRuntime.jsxs(ui.MenuItem, { onClick: (event) => {
           event.preventDefault();
-          navigate(entry.path);
+          navigate(entry.url);
         }, children: [
           /* @__PURE__ */ jsxRuntime.jsx(IconForView, { collectionOrView: entry.view }),
           entry.name
-        ] }, `navigation_${index_0}`)) })
+        ] }, entry.id)) })
       ] }) });
       $[0] = adminMenuOpen;
       $[1] = analyticsController;
@@ -23364,10 +24294,21 @@
         Field: StorageUploadFieldBinding
       }
     },
+    reference_as_string: {
+      key: "reference_as_string",
+      name: "Reference (as string)",
+      description: "The value refers to a different collection (it is saved as a string)",
+      Icon: ui.LinkIcon,
+      color: "#154fb3",
+      property: {
+        dataType: "string",
+        Field: ReferenceAsStringFieldBinding
+      }
+    },
     reference: {
       key: "reference",
       name: "Reference",
-      description: "The value refers to a different collection",
+      description: "The value refers to a different collection (it is saved as a reference)",
       Icon: ui.LinkIcon,
       color: "#ff0042",
       property: {
@@ -23498,6 +24439,8 @@
         return "email";
       } else if (property.enumValues) {
         return "select";
+      } else if (property.reference) {
+        return "reference_as_string";
       } else {
         return "text_field";
       }
@@ -24428,6 +25371,7 @@
   function _temp3(child_1) {
     return child_1.type.componentType !== "Drawer" && child_1.type.componentType !== "AppBar";
   }
+  exports2.ADMIN_GROUP_NAME = ADMIN_GROUP_NAME;
   exports2.AppBar = AppBar;
   exports2.AppContext = AppContext;
   exports2.ArrayContainer = ArrayContainer;
@@ -24452,6 +25396,7 @@
   exports2.CircularProgressCenter = CircularProgressCenter;
   exports2.ConfirmationDialog = ConfirmationDialog;
   exports2.DEFAULT_FIELD_CONFIGS = DEFAULT_FIELD_CONFIGS;
+  exports2.DEFAULT_GROUP_NAME = DEFAULT_GROUP_NAME;
   exports2.DRAWER_WIDTH = DRAWER_WIDTH;
   exports2.DatePreview = DatePreview;
   exports2.DateTimeFieldBinding = DateTimeFieldBinding;
@@ -24494,6 +25439,8 @@
   exports2.ModeControllerContext = ModeControllerContext;
   exports2.ModeControllerProvider = ModeControllerProvider;
   exports2.MultiSelectFieldBinding = MultiSelectFieldBinding;
+  exports2.NAVIGATION_ADMIN_GROUP_NAME = NAVIGATION_ADMIN_GROUP_NAME;
+  exports2.NAVIGATION_DEFAULT_GROUP_NAME = NAVIGATION_DEFAULT_GROUP_NAME;
   exports2.NavigationCard = NavigationCard;
   exports2.NavigationCardBinding = NavigationCardBinding;
   exports2.NavigationGroup = NavigationGroup;
@@ -24507,6 +25454,7 @@
   exports2.PropertyPreview = PropertyPreview;
   exports2.PropertyTableCell = PropertyTableCell;
   exports2.ReadOnlyFieldBinding = ReadOnlyFieldBinding;
+  exports2.ReferenceAsStringFieldBinding = ReferenceAsStringFieldBinding;
   exports2.ReferenceFieldBinding = ReferenceFieldBinding;
   exports2.ReferencePreview = ReferencePreview;
   exports2.ReferenceSelectionTable = ReferenceSelectionTable;