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

package/dist/index.es.js

@@ -2,11 +2,11 @@ import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { c } from "react-compiler-runtime";
 import * as React from "react";
 import React__default, { useRef, useEffect, useContext, useCallback, useMemo, useState, createElement, createRef, createContext, forwardRef, useLayoutEffect, useDeferredValue } from "react";
-import { getColorSchemeForSeed, CHIP_COLORS, CircleIcon, FunctionsIcon, iconKeys, coolIconKeys, Icon, Tooltip, ErrorIcon, Typography, IconButton, ContentCopyIcon, OpenInNewIcon, DescriptionIcon, cls, Skeleton, Chip, defaultBorderMixin, KeyboardTabIcon, Checkbox, Markdown, TextareaAutosize, focusedDisabled, MultiSelect, MultiSelectItem, Select, SelectItem, BooleanSwitch, DateTimeField, paperMixin, EditIcon, DoNotDisturbOnIcon, Menu, MoreVertIcon, MenuItem, CircularProgress, SearchBar, Badge, ArrowUpwardIcon, Popover, FilterListIcon, Button, CenteredView, AssignmentIcon, Label, CloseIcon, TextField, BooleanSwitchWithLabel, useOutsideAlerter, Dialog, DialogTitle, DialogContent, DialogActions, FileCopyIcon, DeleteIcon, AddIcon, ExpandablePanel, ArrowForwardIcon, Card, cardMixin, cardClickableMixin, StarIcon, Collapse, Container, LoadingButton, Alert, CheckIcon, NotesIcon, InfoIcon, fieldBackgroundMixin, RemoveIcon, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, ArrowDropDownIcon, FilterListOffIcon, SearchIcon, Avatar, DarkModeIcon, LightModeIcon, BrightnessMediumIcon, LogoutIcon, HandleIcon, KeyboardArrowUpIcon, KeyboardArrowDownIcon, debounce, Sheet, Tab, Tabs, CodeIcon, OpenInFullIcon, ShortTextIcon, SubjectIcon, FormatQuoteIcon, HttpIcon, MailIcon, FlagIcon, ListIcon, ListAltIcon, NumbersIcon, FormatListNumberedIcon, UploadFileIcon, DriveFolderUploadIcon, LinkIcon, AddLinkIcon, ScheduleIcon, BallotIcon, RepeatIcon, ViewStreamIcon, MenuIcon, ChevronLeftIcon } from "@firecms/ui";
+import { getColorSchemeForSeed, CHIP_COLORS, CircleIcon, FunctionsIcon, iconKeys, coolIconKeys, Icon, Tooltip, ErrorIcon, Typography, IconButton, ContentCopyIcon, OpenInNewIcon, DescriptionIcon, cls, Skeleton, Chip, defaultBorderMixin, KeyboardTabIcon, Checkbox, Markdown, TextareaAutosize, focusedDisabled, MultiSelect, MultiSelectItem, Select, SelectItem, BooleanSwitch, DateTimeField, paperMixin, EditIcon, DoNotDisturbOnIcon, Menu, MoreVertIcon, MenuItem, CircularProgress, SearchBar, Badge, ArrowUpwardIcon, Popover, FilterListIcon, Button, CenteredView, AssignmentIcon, Label, CloseIcon, TextField, BooleanSwitchWithLabel, useOutsideAlerter, Dialog, DialogTitle, DialogContent, DialogActions, FileCopyIcon, DeleteIcon, AddIcon, Collapse, StarIcon, ArrowForwardIcon, Card, cardMixin, cardClickableMixin, Container, LoadingButton, Alert, CheckIcon, NotesIcon, InfoIcon, ExpandablePanel, fieldBackgroundMixin, RemoveIcon, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, ArrowDropDownIcon, FilterListOffIcon, SearchIcon, Avatar, DarkModeIcon, LightModeIcon, BrightnessMediumIcon, LogoutIcon, HandleIcon, KeyboardArrowUpIcon, KeyboardArrowDownIcon, debounce, Sheet, Tab, Tabs, CodeIcon, OpenInFullIcon, ShortTextIcon, SubjectIcon, FormatQuoteIcon, HttpIcon, MailIcon, FlagIcon, ListIcon, ListAltIcon, NumbersIcon, FormatListNumberedIcon, UploadFileIcon, DriveFolderUploadIcon, LinkIcon, AddLinkIcon, ScheduleIcon, BallotIcon, RepeatIcon, ViewStreamIcon, MenuIcon, ChevronLeftIcon } from "@firecms/ui";
 import { SnackbarProvider as SnackbarProvider$1, useSnackbar } from "notistack";
 import hash from "object-hash";
 import { getIn, useFormex, useCreateFormex, Formex, setIn, Field } from "@firecms/formex";
-import { Link, useNavigate, useLocation, NavLink, Routes, Route, createBrowserRouter, RouterProvider } from "react-router-dom";
+import { useNavigate, useLocation, Link, NavLink, Routes, Route, createBrowserRouter, RouterProvider } from "react-router-dom";
 import Fuse from "fuse.js";
 import equal from "react-fast-compare";
 import { format } from "date-fns";
@@ -14,10 +14,10 @@ import * as locales from "date-fns/locale";
 import useMeasure from "react-use-measure";
 import * as yup from "yup";
 import { FixedSizeList } from "react-window";
-import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from "@dnd-kit/core";
-import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
-import { sortableKeyboardCoordinates, SortableContext, horizontalListSortingStrategy, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { useDroppable, useSensor, MouseSensor, TouchSensor, KeyboardSensor, useSensors, closestCenter, pointerWithin, closestCorners, getFirstCollision, rectIntersection, useDndMonitor, DndContext, MeasuringStrategy, DragOverlay, PointerSensor } from "@dnd-kit/core";
+import { useSortable, defaultAnimateLayoutChanges, SortableContext, rectSortingStrategy, arrayMove as arrayMove$1, verticalListSortingStrategy, sortableKeyboardCoordinates, horizontalListSortingStrategy } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
+import { restrictToVerticalAxis, restrictToWindowEdges } from "@dnd-kit/modifiers";
 import { useDropzone } from "react-dropzone";
 import Resizer from "react-image-file-resizer";
 import { FireCMSEditor } from "@firecms/editor";
@@ -3185,16 +3185,16 @@ function hashString(str) {
   }
   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__ */ jsx(Icon, { iconKey, size: "medium", className, color }) : void 0;
+  return iconKey in iconKeysMap ? /* @__PURE__ */ jsx(Icon, { iconKey, size, className, color }) : void 0;
 }
 const IconForView = React__default.memo(function IconForView2(t0) {
-  const $ = c(14);
+  const $ = c(15);
   const {
     collectionOrView,
     className,
@@ -3213,14 +3213,15 @@ const IconForView = React__default.memo(function IconForView2(t0) {
     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) {
@@ -3228,12 +3229,12 @@ const IconForView = React__default.memo(function IconForView2(t0) {
   }
   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;
@@ -3242,12 +3243,12 @@ const IconForView = React__default.memo(function IconForView2(t0) {
   }
   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) {
@@ -3259,15 +3260,15 @@ const IconForView = React__default.memo(function IconForView2(t0) {
     key = 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__ */ jsx(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) => {
@@ -4144,7 +4145,7 @@ function useCollectionFetch(t0) {
         }
         setDataLoading(false);
         setDataLoadingError(void 0);
-        setData(entities.map(_temp$s));
+        setData(entities.map(_temp$r));
         setNoMoreToLoad(!itemCount || entities.length < itemCount);
       };
       const onError = (error) => {
@@ -4177,7 +4178,7 @@ function useCollectionFetch(t0) {
           orderBy: sortByProperty,
           order: currentSort
         }).then(onEntitiesUpdate).catch(onError);
-        return _temp2$e;
+        return _temp2$d;
       }
     };
     $[4] = collection;
@@ -4225,9 +4226,9 @@ function useCollectionFetch(t0) {
   }
   return t5;
 }
-function _temp2$e() {
+function _temp2$d() {
 }
-function _temp$s(e_0) {
+function _temp$r(e_0) {
   return {
     ...e_0
   };
@@ -4292,7 +4293,7 @@ function useEntityFetch(t0) {
         setEntity(CACHE[`${path}/${entityId}`]);
         setDataLoading(false);
         setDataLoadingError(void 0);
-        return _temp$r;
+        return _temp$q;
       } else {
         if (entityId && path && collection) {
           if (dataSource.listenEntity) {
@@ -4311,11 +4312,11 @@ function useEntityFetch(t0) {
               databaseId,
               collection
             }).then(onEntityUpdate).catch(onError);
-            return _temp2$d;
+            return _temp2$c;
           }
         } else {
           onEntityUpdate(void 0);
-          return _temp3$5;
+          return _temp3$4;
         }
       }
     };
@@ -4356,11 +4357,11 @@ function useEntityFetch(t0) {
   }
   return t5;
 }
-function _temp3$5() {
+function _temp3$4() {
 }
-function _temp2$d() {
+function _temp2$c() {
 }
-function _temp$r() {
+function _temp$q() {
 }
 async function saveEntityWithCallbacks({
   collection,
@@ -4944,7 +4945,7 @@ function ImagePreview(t0) {
   }
   let t9;
   if ($[16] !== url) {
-    t9 = /* @__PURE__ */ jsx(Tooltip, { title: "Open image in new tab", side: "bottom", children: /* @__PURE__ */ jsx(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__ */ jsx(Tooltip, { title: "Open image in new tab", side: "bottom", children: /* @__PURE__ */ jsx(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 {
@@ -4978,7 +4979,7 @@ function ImagePreview(t0) {
   }
   return t11;
 }
-function _temp$q(e_0) {
+function _temp$p(e_0) {
   return e_0.stopPropagation();
 }
 function UrlComponentPreview(t0) {
@@ -5011,7 +5012,7 @@ function UrlComponentPreview(t0) {
     }
     let t3;
     if ($[2] !== url) {
-      t3 = /* @__PURE__ */ 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__ */ 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
       ] });
@@ -5114,7 +5115,7 @@ function UrlComponentPreview(t0) {
         }
         let t7;
         if ($[24] !== t4 || $[25] !== t6 || $[26] !== url) {
-          t7 = /* @__PURE__ */ 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__ */ 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
           ] });
@@ -5139,10 +5140,10 @@ function UrlComponentPreview(t0) {
     }
   }
 }
-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) {
@@ -5276,7 +5277,7 @@ function SkeletonPropertyComponent(t0) {
         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 {
@@ -5414,7 +5415,7 @@ function SkeletonPropertyComponent(t0) {
   }
   return content || null;
 }
-function _temp$o(p, i) {
+function _temp$n(p, i) {
   return renderGenericArrayCell(p, i);
 }
 function renderMap(property, size) {
@@ -6596,7 +6597,7 @@ function KeyValuePreview(t0) {
   }
   let t1;
   if ($[1] !== value) {
-    t1 = Object.entries(value).map(_temp$n);
+    t1 = Object.entries(value).map(_temp$m);
     $[1] = value;
     $[2] = t1;
   } else {
@@ -6612,7 +6613,7 @@ function KeyValuePreview(t0) {
   }
   return t2;
 }
-function _temp$n(t0) {
+function _temp$m(t0) {
   const [key, childValue] = t0;
   return /* @__PURE__ */ jsxs("div", { className: cls(defaultBorderMixin, "last:border-b-0 border-b"), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row pt-0.5 pb-0.5 gap-2", children: [
@@ -6746,7 +6747,7 @@ function NumberPropertyPreview(t0) {
   }
 }
 const PropertyPreview = React__default.memo(function PropertyPreview2(props) {
-  const $ = c(30);
+  const $ = c(31);
   const authController = useAuthController();
   const customizationController = useCustomizationController();
   let content;
@@ -6845,7 +6846,22 @@ const PropertyPreview = React__default.memo(function PropertyPreview2(props) {
                     }
                     content = t02;
                   } else {
-                    content = /* @__PURE__ */ jsx(StringPropertyPreview, { ...props, property: stringProperty, value });
+                    if (stringProperty.reference) {
+                      if (typeof stringProperty.reference.path === "string") {
+                        content = /* @__PURE__ */ 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__ */ jsx(EmptyValue, {});
+                          $[23] = t02;
+                        } else {
+                          t02 = $[23];
+                        }
+                        content = t02;
+                      }
+                    } else {
+                      content = /* @__PURE__ */ jsx(StringPropertyPreview, { ...props, property: stringProperty, value });
+                    }
                   }
                 }
               }
@@ -6904,12 +6920,12 @@ const PropertyPreview = React__default.memo(function PropertyPreview2(props) {
                 if (property.dataType === "date") {
                   if (value instanceof Date) {
                     let t02;
-                    if ($[23] !== value) {
+                    if ($[24] !== value) {
                       t02 = /* @__PURE__ */ jsx(DatePreview, { date: value });
-                      $[23] = value;
-                      $[24] = t02;
+                      $[24] = value;
+                      $[25] = t02;
                     } else {
-                      t02 = $[24];
+                      t02 = $[25];
                     }
                     content = t02;
                   } else {
@@ -6925,11 +6941,11 @@ const PropertyPreview = React__default.memo(function PropertyPreview2(props) {
                       }
                     } else {
                       let t02;
-                      if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+                      if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
                         t02 = /* @__PURE__ */ jsx(EmptyValue, {});
-                        $[25] = t02;
+                        $[26] = t02;
                       } else {
-                        t02 = $[25];
+                        t02 = $[26];
                       }
                       content = t02;
                     }
@@ -6949,12 +6965,12 @@ const PropertyPreview = React__default.memo(function PropertyPreview2(props) {
                         }
                       } 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;
                       }
@@ -6982,12 +6998,12 @@ const PropertyPreview = React__default.memo(function PropertyPreview2(props) {
     content = $[10];
   }
   let t0;
-  if ($[28] !== content) {
+  if ($[29] !== content) {
     t0 = content === void 0 || content === null || Array.isArray(content) && content.length === 0 ? /* @__PURE__ */ jsx(EmptyValue, {}) : content;
-    $[28] = content;
-    $[29] = t0;
+    $[29] = content;
+    $[30] = t0;
   } else {
-    t0 = $[29];
+    t0 = $[30];
   }
   return t0;
 }, equal);
@@ -7365,7 +7381,7 @@ function VirtualTableSelect(props) {
       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));
@@ -7402,7 +7418,7 @@ function VirtualTableSelect(props) {
   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__ */ jsx(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__ */ jsx(MultiSelectItem, { value: String(enumConfig.id), children: /* @__PURE__ */ jsx(EnumValuesChip, { enumKey: enumConfig.id, enumValues, size: small ? "small" : "medium" }) }, enumConfig.id)) }) : /* @__PURE__ */ jsx(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__ */ jsx(SelectItem, { value: String(enumConfig_0.id), children: /* @__PURE__ */ jsx(EnumValuesChip, { enumKey: enumConfig_0.id, enumValues, size: small ? "small" : "medium" }) }, enumConfig_0.id)) });
+    t4 = multiple ? /* @__PURE__ */ jsx(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__ */ jsx(MultiSelectItem, { value: String(enumConfig.id), children: /* @__PURE__ */ jsx(EnumValuesChip, { enumKey: enumConfig.id, enumValues, size: small ? "small" : "medium" }) }, enumConfig.id)) }) : /* @__PURE__ */ jsx(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__ */ jsx(SelectItem, { value: String(enumConfig_0.id), children: /* @__PURE__ */ jsx(EnumValuesChip, { enumKey: enumConfig_0.id, enumValues, size: small ? "small" : "medium" }) }, enumConfig_0.id)) });
     $[10] = disabled;
     $[11] = enumValues;
     $[12] = internalValue;
@@ -7417,10 +7433,10 @@ function VirtualTableSelect(props) {
   }
   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) {
@@ -7979,7 +7995,7 @@ function StorageUpload$1(t0) {
   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 {
@@ -8202,13 +8218,13 @@ function StorageUpload$1(t0) {
   }
   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]: []
   };
@@ -8315,7 +8331,7 @@ const TableReferenceFieldInternal = React__default.memo(function TableReferenceF
   let t1;
   if ($[2] !== updateValue) {
     t1 = (entities) => {
-      updateValue(entities.map(_temp$k));
+      updateValue(entities.map(_temp$j));
     };
     $[2] = updateValue;
     $[3] = t1;
@@ -8325,7 +8341,7 @@ const TableReferenceFieldInternal = React__default.memo(function TableReferenceF
   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 {
@@ -8476,10 +8492,10 @@ const TableReferenceFieldInternal = React__default.memo(function TableReferenceF
   }
   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.addMethod(yup.array, "uniqueInArray", function(mapper = (a) => a, message) {
@@ -9311,7 +9327,14 @@ const PropertyTableCell = React__default.memo(function PropertyTableCell2({
   }
   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__ */ 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__ */ 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;
@@ -9327,12 +9350,12 @@ const PropertyTableCell = React__default.memo(function PropertyTableCell2({
         allowScroll = true;
       }
     } else if (selected && property.dataType === "string") {
-      const stringProperty = property;
-      if (stringProperty.enumValues) {
-        innerComponent = /* @__PURE__ */ 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__ */ 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__ */ jsx(VirtualTableInput, { error: validationError ?? error, disabled, multiline, focused: selected, value: internalValue, updateValue });
         allowScroll = true;
       }
@@ -9619,14 +9642,14 @@ function CollectionTableToolbar(t0) {
   }
   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__ */ jsx(Tooltip, { title: "Table row size", side: "right", sideOffset: 4, children: /* @__PURE__ */ jsx(Select, { value: t3, className: "w-16 ml-2", size: "small", onValueChange: t4, renderValue: _temp$j, children: t5 }) });
+    t6 = /* @__PURE__ */ jsx(Tooltip, { title: "Table row size", side: "right", sideOffset: 4, children: /* @__PURE__ */ jsx(Select, { value: t3, className: "w-16 ml-2", size: "small", onValueChange: t4, renderValue: _temp$i, children: t5 }) });
     $[6] = t3;
     $[7] = t4;
     $[8] = t6;
@@ -9710,10 +9733,10 @@ function CollectionTableToolbar(t0) {
   }
   return t13;
 }
-function _temp2$8(size_0) {
+function _temp2$7(size_0) {
   return /* @__PURE__ */ jsx(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__ */ jsx("div", { className: "font-medium", children: v_0.toUpperCase() });
 }
 function getTableCellAlignment(property) {
@@ -10833,7 +10856,7 @@ const SafeLinkRenderer = (t0) => {
   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 {
@@ -10852,7 +10875,7 @@ const SafeLinkRenderer = (t0) => {
   }
   return t2;
 };
-function _temp$i(url) {
+function _temp$h(url) {
   return `<a href="${url}" class="underline" target="_blank">Link</a><br/>`;
 }
 const operationLabels$2 = {
@@ -11052,7 +11075,7 @@ function StringNumberFilterField(t0) {
   }
   let t5;
   if ($[14] !== possibleOperations) {
-    t5 = possibleOperations.map(_temp2$7);
+    t5 = possibleOperations.map(_temp2$6);
     $[14] = possibleOperations;
     $[15] = t5;
   } else {
@@ -11060,7 +11083,7 @@ function StringNumberFilterField(t0) {
   }
   let t6;
   if ($[16] !== operation || $[17] !== t4 || $[18] !== t5) {
-    t6 = /* @__PURE__ */ jsx("div", { className: "w-[80px]", children: /* @__PURE__ */ jsx(Select, { value: operation, fullWidth: true, position: "item-aligned", onValueChange: t4, renderValue: _temp$h, children: t5 }) });
+    t6 = /* @__PURE__ */ jsx("div", { className: "w-[80px]", children: /* @__PURE__ */ jsx(Select, { value: operation, fullWidth: true, position: "item-aligned", onValueChange: t4, renderValue: _temp$g, children: t5 }) });
     $[16] = operation;
     $[17] = t4;
     $[18] = t5;
@@ -11111,8 +11134,8 @@ function StringNumberFilterField(t0) {
   }
   let t9;
   if ($[34] !== dataType || $[35] !== enumValues || $[36] !== internalValue || $[37] !== multiple || $[38] !== name || $[39] !== operation || $[40] !== updateFilter) {
-    t9 = enumValues && multiple && /* @__PURE__ */ jsx(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__ */ jsx(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__ */ jsx(IconButton, { className: "absolute right-2 top-3", onClick: (e_2) => updateFilter(operation, void 0), children: /* @__PURE__ */ jsx(CloseIcon, {}) }), children: enumValues.map((enumConfig_0) => /* @__PURE__ */ jsx(MultiSelectItem, { value: String(enumConfig_0.id), children: /* @__PURE__ */ jsx(EnumValuesChip, { enumKey: String(enumConfig_0.id), enumValues, size: "small" }) }, `select_value_${name}_${enumConfig_0.id}`)) });
     $[34] = dataType;
     $[35] = enumValues;
@@ -11175,16 +11198,16 @@ function StringNumberFilterField(t0) {
   }
   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__ */ jsx(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) {
@@ -11315,7 +11338,7 @@ function DateTimeFilterField(t0) {
   }
   let t5;
   if ($[11] !== possibleOperations) {
-    t5 = possibleOperations.map(_temp2$6);
+    t5 = possibleOperations.map(_temp2$5);
     $[11] = possibleOperations;
     $[12] = t5;
   } else {
@@ -11323,7 +11346,7 @@ function DateTimeFilterField(t0) {
   }
   let t6;
   if ($[13] !== operation || $[14] !== t4 || $[15] !== t5) {
-    t6 = /* @__PURE__ */ jsx("div", { className: "w-[80px]", children: /* @__PURE__ */ jsx(Select, { value: operation, size: "large", fullWidth: true, onValueChange: t4, renderValue: _temp$g, children: t5 }) });
+    t6 = /* @__PURE__ */ jsx("div", { className: "w-[80px]", children: /* @__PURE__ */ jsx(Select, { value: operation, size: "large", fullWidth: true, onValueChange: t4, renderValue: _temp$f, children: t5 }) });
     $[13] = operation;
     $[14] = t4;
     $[15] = t5;
@@ -11409,10 +11432,10 @@ function DateTimeFilterField(t0) {
   }
   return t14;
 }
-function _temp2$6(op_1) {
+function _temp2$5(op_1) {
   return /* @__PURE__ */ jsx(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({
@@ -12116,7 +12139,7 @@ function useTableSearchHelper(t0) {
     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;
@@ -12208,7 +12231,7 @@ function useTableSearchHelper(t0) {
   }
   return t1;
 }
-function _temp$f(p_0) {
+function _temp$e(p_0) {
   return Boolean(p_0.collectionView?.onTextSearchClick);
 }
 function DeleteEntityDialog({
@@ -12678,198 +12701,415 @@ function ReferenceDialogActions(t0) {
 function toArray(input) {
   return Array.isArray(input) ? input : input ? [input] : [];
 }
-function NavigationGroup(t0) {
-  const $ = c(14);
+function NavigationChip(t0) {
+  const $ = c(18);
   const {
-    children,
-    group
+    entry
   } = t0;
+  const navigate = 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__ */ jsx(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__ */ jsx("div", { className: "mb-8", children });
-    $[7] = children;
-    $[8] = t5;
+  if ($[10] !== onIconClick || $[11] !== t4) {
+    t5 = /* @__PURE__ */ jsx(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__ */ jsx(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__ */ jsx(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 $ = c(23);
-  const {
-    name,
-    description,
-    icon,
-    actions,
-    onClick
-  } = t0;
+function FavouritesView(t0) {
+  const $ = c(17);
+  const navigationController = useNavigationController();
+  const userConfigurationPersistence = useUserConfigurationPersistence();
+  if (!userConfigurationPersistence) {
+    return null;
+  }
   let t1;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = 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__ */ 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__ */ 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 = 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__ */ jsx(Typography, { gutterBottom: true, variant: "h5", component: "h2", children: name });
-    $[8] = name;
-    $[9] = t5;
+  if ($[10] !== t2 || $[11] !== t3) {
+    t5 = /* @__PURE__ */ 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__ */ jsx(Typography, { variant: "body2", color: "secondary", component: "div", children: /* @__PURE__ */ jsx(Markdown, { source: description, size: "small" }) });
-    $[10] = description;
-    $[11] = t6;
-  } else {
-    t6 = $[11];
-  }
-  let t7;
-  if ($[12] !== t4 || $[13] !== t5 || $[14] !== t6) {
-    t7 = /* @__PURE__ */ 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__ */ jsx("div", { style: t8, children: /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(ArrowForwardIcon, { className: "text-primary" }) }) });
-    $[17] = t9;
-  } else {
-    t9 = $[17];
-  }
-  let t10;
-  if ($[18] !== t7) {
-    t10 = /* @__PURE__ */ 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__ */ jsx(Card, { className: t1, onClick: t2, children: t10 });
-    $[20] = t10;
-    $[21] = t2;
-    $[22] = t11;
+  if ($[13] !== T0 || $[14] !== t4 || $[15] !== t5) {
+    t6 = /* @__PURE__ */ 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__ */ jsx(NavigationChip, { entry: entry_0 }, entry_0.path);
 }
-function SmallNavigationCard(t0) {
-  const $ = c(10);
-  const {
-    name,
-    url,
-    icon
-  } = t0;
-  let t1;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = cls(cardMixin, 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 = useLocation();
+  const containerRef = React__default.useRef(null);
+  const [scroll, setScroll] = React__default.useState(0);
+  const [direction, setDirection] = React__default.useState("down");
+  const handleScroll = 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]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    container.addEventListener("scroll", handleScroll, {
+      passive: true
+    });
+    return () => {
+      if (container) container.removeEventListener("scroll", handleScroll);
+    };
+  }, [containerRef, handleScroll, location]);
+  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 $ = c(26);
+  const {
+    children,
+    group,
+    minimised,
+    isPreview,
+    isPotentialCardDropTarget,
+    onEditGroup,
+    dndDisabled
+  } = t0;
+  const [isHovered, setIsHovered] = useState(false);
+  const currentGroupName = group ?? "Views";
+  const t1 = !isPotentialCardDropTarget ? "my-10" : "my-6";
+  let t2;
+  if ($[0] !== t1) {
+    t2 = 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__ */ jsx(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__ */ jsx(IconButton, { size: "smallest", onClick: (e) => {
+      e.stopPropagation();
+      onEditGroup(currentGroupName);
+    }, className: cls("ml-2 ", isHovered ? "opacity-100" : "opacity-0", "transition-opacity duration-100"), children: /* @__PURE__ */ jsx(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__ */ 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__ */ jsx("div", { className: cls("mt-4 p-8 bg-surface-accent-200 dark:bg-surface-accent-800 rounded-lg"), style: {
+      minHeight: "50px"
+    } }) : /* @__PURE__ */ jsx("div", { className: 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__ */ jsxs("div", { className: t2, children: [
+      t10,
+      t11
+    ] });
+    $[22] = t10;
+    $[23] = t11;
+    $[24] = t2;
+    $[25] = t12;
+  } else {
+    t12 = $[25];
+  }
+  return t12;
+}
+const NavigationCard = React__default.memo(function NavigationCard2(t0) {
+  const $ = 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 = 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__ */ 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__ */ 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__ */ jsx(Typography, { gutterBottom: true, variant: "h5", component: "h2", children: name });
+    $[9] = name;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  let t7;
+  if ($[11] !== description) {
+    t7 = description && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "secondary", component: "div", children: /* @__PURE__ */ jsx(Markdown, { source: description, size: "small" }) });
+    $[11] = description;
+    $[12] = t7;
+  } else {
+    t7 = $[12];
+  }
+  let t8;
+  if ($[13] !== t5 || $[14] !== t6 || $[15] !== t7) {
+    t8 = /* @__PURE__ */ 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__ */ jsx("div", { style: t9, children: /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(ArrowForwardIcon, { className: "text-primary" }) }) });
+    $[18] = t10;
+  } else {
+    t10 = $[18];
+  }
+  let t11;
+  if ($[19] !== t8) {
+    t11 = /* @__PURE__ */ 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__ */ jsx(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 $ = c(10);
+  const {
+    name,
+    url,
+    icon
+  } = t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = cls(cardMixin, 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];
   }
@@ -12915,7 +13155,7 @@ function SmallNavigationCard(t0) {
   return t5;
 }
 function NavigationCardBinding(t0) {
-  const $ = c(34);
+  const $ = c(35);
   const {
     path,
     collection,
@@ -12924,7 +13164,8 @@ function NavigationCardBinding(t0) {
     name,
     description,
     onClick,
-    type
+    type,
+    shrink
   } = t0;
   const userConfigurationPersistence = useUserConfigurationPersistence();
   const t1 = collection ?? view;
@@ -13031,533 +13272,1030 @@ function NavigationCardBinding(t0) {
     t6 = $[27];
   }
   let t7;
-  if ($[28] !== actions || $[29] !== collectionIcon || $[30] !== description || $[31] !== name || $[32] !== t6) {
-    t7 = /* @__PURE__ */ jsx(NavigationCard, { icon: collectionIcon, name, description, actions, onClick: t6 });
+  if ($[28] !== actions || $[29] !== collectionIcon || $[30] !== description || $[31] !== name || $[32] !== shrink || $[33] !== t6) {
+    t7 = /* @__PURE__ */ 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 $ = c(18);
+const animateLayoutChanges = (args) => 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 $ = c(17);
   const {
-    entry
+    entry,
+    onClick
   } = t0;
-  const navigate = 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
+  } = 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 ? 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__ */ 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__ */ 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 $ = 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
+  } = 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 = 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__ */ jsx(StarIcon, { onClick: onIconClick, size: 18, className: t4 });
-    $[10] = onIconClick;
-    $[11] = t4;
-    $[12] = t5;
+  if ($[4] !== children || $[5] !== itemIds) {
+    t5 = /* @__PURE__ */ jsx(SortableContext, { items: itemIds, strategy: 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__ */ jsx(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__ */ 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 $ = c(17);
-  const navigationController = useNavigationController();
-  const userConfigurationPersistence = useUserConfigurationPersistence();
-  if (!userConfigurationPersistence) {
-    return null;
-  }
+function SortableNavigationGroup(t0) {
+  const $ = 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
+  } = 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 = 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 ? 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__ */ 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__ */ 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__ */ 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__ */ jsx(NavigationChip, { entry: entry_0 }, entry_0.path);
-}
-const scrollsMap = {};
-function useRestoreScroll() {
-  const location = useLocation();
-  const containerRef = React__default.useRef(null);
-  const [scroll, setScroll] = React__default.useState(0);
-  const [direction, setDirection] = React__default.useState("down");
-  const handleScroll = 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]);
-  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] = useState(null);
+  const [activeIsGroup, setActiveIsGroup] = useState(false);
+  const [currentDraggingGroupId, setCurrentDraggingGroupId] = useState(null);
+  const [dndKitActiveNode, setDndKitActiveNode] = useState(null);
+  const [isDraggingCardOnly, setIsDraggingCardOnly] = useState(false);
+  const [dialogOpenForGroup, setDialogOpenForGroup] = useState(null);
+  const [isHoveringNewGroupDropZone, setIsHoveringNewGroupDropZone] = useState(false);
+  const interimItemsRef = useRef(null);
   useEffect(() => {
-    if (!containerRef.current || !scrollsMap[location.key]) return;
-    containerRef.current.scrollTo({
-      top: scrollsMap[location.key],
-      behavior: "auto"
+    interimItemsRef.current = dndItems;
+  }, [dndItems]);
+  const mouseSensor = useSensor(MouseSensor, {
+    activationConstraint: {
+      distance: 10
+    }
+  });
+  const touchSensor = useSensor(TouchSensor, {
+    activationConstraint: {
+      delay: 150,
+      tolerance: 5
+    }
+  });
+  const keyboardSensor = useSensor(KeyboardSensor);
+  const sensors = useSensors(...disabled ? [] : [mouseSensor, touchSensor, keyboardSensor]);
+  const dndContainers = useMemo(() => dndItems.map((g) => g.name), [dndItems]);
+  const findDndContainer = 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 = useRef(null);
+  const recentlyMovedToNewContainer = useRef(false);
+  const collisionDetection = useCallback((args) => {
+    if (disabled || !activeId) return [];
+    if (activeIsGroup) {
+      const groups = args.droppableContainers.filter((c2) => dndItems.some((g_2) => g_2.name === c2.id));
+      if (!groups.length) return [];
+      return closestCenter({
+        ...args,
+        droppableContainers: groups
+      });
+    }
+    const pointer = 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 = 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 = getFirstCollision(pointer, "id");
+      if (first) return [{
+        id: first
+      }];
+    }
+    const rects = rectIntersection(args);
+    const zoneRect = rects.find((c_3) => c_3.id === "new-group-drop-zone");
+    if (zoneRect) return [zoneRect];
+    let overId = 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 = 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 = arrayMove$1(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 = arrayMove$1(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 = 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 = 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 $ = c(71);
+function NewGroupDropZone(t0) {
+  const $ = c(15);
   const {
-    additionalActions,
-    additionalChildrenStart,
-    additionalChildrenEnd
+    disabled,
+    setIsHovering
   } = t0;
-  const context = useFireCMSContext();
-  const customizationController = useCustomizationController();
-  const navigationController = useNavigationController();
-  const fuse = 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
+  } = useDroppable(t1);
+  const [isVisible, setIsVisible] = 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];
+  }
+  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];
+  }
+  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 = 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__ */ jsx("div", { className: "text-center p-4", children: /* @__PURE__ */ 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__ */ jsx("div", { ref: setNodeRef, className: t6, children: t7 });
+    $[12] = setNodeRef;
+    $[13] = t6;
+    $[14] = t8;
+  } else {
+    t8 = $[14];
+  }
+  return t8;
+}
+function RenameGroupDialog(t0) {
+  const $ = c(41);
   const {
-    navigationEntries,
-    groups
-  } = navigationController.topLevelNavigation;
-  const [filteredUrls, setFilteredUrls] = useState(null);
-  const performingSearch = Boolean(filteredUrls);
+    open,
+    initialName,
+    existingGroupNames,
+    onClose,
+    onRename
+  } = t0;
+  const [name, setName] = useState(initialName);
+  const [error, setError] = useState(null);
+  const inputRef = 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;
+  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];
   }
-  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__ */ jsx(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__ */ jsx(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__ */ 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__ */ jsxs(DialogContent, { children: [
+      t9,
+      t10
+    ] });
+    $[25] = t10;
+    $[26] = t9;
+    $[27] = t11;
+  } else {
+    t11 = $[27];
+  }
+  let t12;
+  if ($[28] !== onClose) {
+    t12 = /* @__PURE__ */ jsx(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__ */ jsx(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__ */ jsxs(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__ */ jsxs(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__ */ 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__ */ jsx(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__ */ 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__ */ 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 = 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 = useRef(null);
+  const [filteredUrls, setFilteredUrls] = useState(null);
+  const performingSearch = Boolean(filteredUrls);
+  const filteredNavigationEntries = filteredUrls ? rawNavigationEntries.filter((e) => filteredUrls.includes(e.url)) : rawNavigationEntries;
+  useEffect(() => {
+    fuse.current = new Fuse(rawNavigationEntries, {
+      keys: ["name", "description", "group", "path"]
+    });
+  }, [rawNavigationEntries]);
+  const updateSearch = 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] = useState([]);
+  const [adminGroupData, setAdminGroupData] = useState(null);
+  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__ */ jsx(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__ */ 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 = useMemo(() => {
+    if (dndKitActiveNode?.data.current?.type === "group") return [restrictToVerticalAxis, restrictToWindowEdges];
+    return [restrictToWindowEdges];
+  }, [dndKitActiveNode]);
+  let additionalPluginChildrenStart;
+  let additionalPluginChildrenEnd;
+  let additionalPluginSections;
+  if (customizationController.plugins) {
+    const sectionProps = {
+      context
+    };
+    additionalPluginSections = /* @__PURE__ */ jsx(Fragment, { children: customizationController.plugins.filter((p) => p.homePage?.includeSection).map((plugin) => {
+      const section = plugin.homePage.includeSection(sectionProps);
+      return /* @__PURE__ */ jsx(NavigationGroup, { group: section.title, children: section.children }, `plugin_section_${plugin.key}`);
+    }) });
+    additionalPluginChildrenStart = /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: customizationController.plugins.filter((p_0) => p_0.homePage?.additionalChildrenStart).map((plugin_0, i) => /* @__PURE__ */ jsx("div", { children: plugin_0.homePage.additionalChildrenStart }, `plugin_children_start_${i}`)) });
+    additionalPluginChildrenEnd = /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: customizationController.plugins.filter((p_1) => p_1.homePage?.additionalChildrenEnd).map((plugin_1, i_0) => /* @__PURE__ */ jsx("div", { children: plugin_1.homePage.additionalChildrenEnd }, `plugin_children_end_${i_0}`)) });
+  }
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "py-2 overflow-auto h-full w-full", children: [
+    /* @__PURE__ */ jsxs(Container, { maxWidth: "6xl", children: [
+      /* @__PURE__ */ 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__ */ jsx(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__ */ 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__ */ jsx(FavouritesView, { hidden: performingSearch }),
+      additionalChildrenStart,
+      additionalPluginChildrenStart,
+      /* @__PURE__ */ jsxs(DndContext, { sensors, collisionDetection, measuring: {
+        droppable: {
+          strategy: MeasuringStrategy.Always,
+          frequency: 500
         }
-        return /* @__PURE__ */ jsx(NavigationGroup, { group: group_0, children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: [
-          thisGroupCollections.map((entry_1) => /* @__PURE__ */ jsx("div", { className: "col-span-1", children: /* @__PURE__ */ 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__ */ jsx("div", { children: /* @__PURE__ */ 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__ */ jsxs(T0, { maxWidth: t5, children: [
-      t6,
-      t7,
-      t8,
-      t9,
-      t10,
+      }, onDragStart, onDragOver, onDragEnd, onDragCancel, modifiers: dndModifiers, children: [
+        /* @__PURE__ */ jsx(SortableContext, { items: containers, strategy: 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__ */ jsx(SortableNavigationGroup, { groupName: groupKey, disabled: dndDisabled, children: /* @__PURE__ */ 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__ */ jsx(NavigationGroupDroppable, { id: groupKey, itemIds: entriesInGroup.map((e_4) => e_4.url), isPotentialCardDropTarget: isDraggingCardOnly, children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 ", children: [
+            entriesInGroup.map((entry) => /* @__PURE__ */ 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__ */ jsx(C, { ...actionProps }, `extra_${groupKey}_${i_1}`))
+          ] }) }) }) }, groupKey);
+        }) }, JSON.stringify(containers)),
+        /* @__PURE__ */ jsx(NewGroupDropZone, { disabled: dndDisabled, setIsHovering: setIsHoveringNewGroupDropZone }),
+        /* @__PURE__ */ jsx(DragOverlay, { adjustScale: false, dropAnimation, children: activeGroupData && draggingGroupId === activeGroupData.name ? /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-transparent", style: {
+          padding: 0,
+          margin: 0
+        }, children: /* @__PURE__ */ jsx(NavigationGroup, { group: activeGroupData.name === DEFAULT_GROUP_NAME ? void 0 : activeGroupData.name, isPreview: false, minimised: true }) }) : activeItemForOverlay ? /* @__PURE__ */ jsx(NavigationCardBinding, { ...activeItemForOverlay, shrink: isHoveringNewGroupDropZone }) : null })
+      ] }),
+      !performingSearch && adminGroupData && /* @__PURE__ */ jsx(NavigationGroup, { group: adminGroupData.name, children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 ", children: adminGroupData.entries.map((entry_0) => /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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 $ = c(41);
@@ -16532,6 +17270,92 @@ function ReferenceFieldBindingInternal({
     /* @__PURE__ */ jsx(FieldHelperText, { includeDescription, showError, error, disabled, property })
   ] });
 }
+function ReferenceAsStringFieldBinding(props) {
+  const $ = c(4);
+  if (typeof props.property.reference?.path !== "string") {
+    let t02;
+    if ($[0] !== props) {
+      t02 = /* @__PURE__ */ jsx(ReadOnlyFieldBinding, { ...props });
+      $[0] = props;
+      $[1] = t02;
+    } else {
+      t02 = $[1];
+    }
+    return t02;
+  }
+  let t0;
+  if ($[2] !== props) {
+    t0 = /* @__PURE__ */ 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 = useMemo(() => {
+    return path ? navigationController.getCollection(path) : void 0;
+  }, [path]);
+  const referenceValue = 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 = 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__ */ jsxs(Fragment, { children: [
+    !minimalistView && /* @__PURE__ */ 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__ */ jsx(ErrorView, { error: "The specified collection does not exist. Check console" }),
+    collection && /* @__PURE__ */ jsxs(Fragment, { children: [
+      referenceValue && /* @__PURE__ */ 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__ */ jsx("div", { className: "justify-center text-left", children: /* @__PURE__ */ jsxs(EntityPreviewContainer, { className: 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__ */ jsx(IconForView, { collectionOrView: collection, className: "text-surface-300 dark:text-surface-600" }),
+        `Edit ${property.name}`.toUpperCase()
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx(FieldHelperText, { includeDescription, showError, error, disabled, property })
+  ] });
+}
 const PropertyFieldBinding = React__default.memo(PropertyFieldBindingInternal, (a, b) => {
   if (a.propertyKey !== b.propertyKey) {
     return false;
@@ -17774,7 +18598,6 @@ function RepeatFieldBinding(t0) {
         minimalistView: false,
         autoFocus: internalId === lastAddedId
       };
-      console.debug("Building entry for", index, fieldProps);
       return /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(PropertyFieldBinding, { ...fieldProps, index }) });
     };
     $[4] = context;
@@ -20568,6 +21391,8 @@ function getParentReferencesFromPath(props) {
 }
 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,
@@ -20581,12 +21406,14 @@ function useBuildNavigationController(props) {
     plugins,
     userConfigPersistence,
     dataSourceDelegate,
-    disabled
+    disabled,
+    navigationGroupMappings
   } = props;
   const navigate = useNavigate();
   const collectionsRef = useRef();
   const viewsRef = useRef();
   const adminViewsRef = useRef();
+  const navigationEntriesOrderRef = useRef();
   const [initialised, setInitialised] = useState(false);
   const [topLevelNavigation, setTopLevelNavigation] = useState(void 0);
   const [navigationLoading, setNavigationLoading] = useState(true);
@@ -20597,80 +21424,127 @@ function useBuildNavigationController(props) {
   const fullCollectionPath = cleanBasePath ? `/${cleanBasePath}/${cleanBaseCollectionPath}` : `/${cleanBaseCollectionPath}`;
   const buildCMSUrlPath = useCallback((path) => cleanBasePath ? `/${cleanBasePath}/${encodePath(path)}` : `/${encodePath(path)}`, [cleanBasePath]);
   const buildUrlCollectionPath = 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 = 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 = 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 = 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;
@@ -20689,13 +21563,17 @@ function useBuildNavigationController(props) {
         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);
@@ -20895,9 +21773,9 @@ async function resolveCMSViews(baseViews, authController, dataSource) {
 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) {
@@ -20923,6 +21801,58 @@ function areCollectionsEqual(a, b) {
   }
   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 $ = c(15);
   let t0;
@@ -22893,7 +23823,7 @@ function DrawerNavigationItem(t0) {
       const {
         isActive
       } = t52;
-      return 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 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;
@@ -23053,7 +23983,7 @@ function DefaultDrawer(t0) {
       if ($[41] !== adminMenuOpen || $[42] !== buildGroupHeader || $[43] !== drawerOpen || $[44] !== navigationEntries || $[45] !== onClick || $[46] !== tooltipsOpen) {
         t10 = (group_0) => /* @__PURE__ */ 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__ */ jsx(DrawerNavigationItem, { icon: /* @__PURE__ */ 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__ */ jsx(DrawerNavigationItem, { icon: /* @__PURE__ */ 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;
@@ -23107,13 +24037,13 @@ function DefaultDrawer(t0) {
       adminViews.length > 0 && /* @__PURE__ */ jsx(Menu, { side: "right", open: adminMenuOpen, onOpenChange: setAdminMenuOpen, trigger: /* @__PURE__ */ jsxs(IconButton, { shape: "square", className: "m-4 text-surface-900 dark:text-white w-fit", children: [
         /* @__PURE__ */ jsx(Tooltip, { title: "Admin", open: tooltipsOpen, side: "right", sideOffset: 28, children: /* @__PURE__ */ jsx(MoreVertIcon, {}) }),
         drawerOpen && /* @__PURE__ */ jsx("div", { className: cls(drawerOpen ? "opacity-100" : "opacity-0 hidden", "mx-4 font-inherit text-inherit"), children: "ADMIN" })
-      ] }), children: adminViews.map((entry, index_0) => /* @__PURE__ */ jsxs(MenuItem, { onClick: (event) => {
+      ] }), children: adminViews.map((entry) => /* @__PURE__ */ jsxs(MenuItem, { onClick: (event) => {
         event.preventDefault();
-        navigate(entry.path);
+        navigate(entry.url);
       }, children: [
         /* @__PURE__ */ jsx(IconForView, { collectionOrView: entry.view }),
         entry.name
-      ] }, `navigation_${index_0}`)) })
+      ] }, entry.id)) })
     ] }) });
     $[0] = adminMenuOpen;
     $[1] = analyticsController;
@@ -23366,10 +24296,21 @@ const DEFAULT_FIELD_CONFIGS = {
       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: 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: LinkIcon,
     color: "#ff0042",
     property: {
@@ -23500,6 +24441,8 @@ function getDefaultFieldId(property) {
       return "email";
     } else if (property.enumValues) {
       return "select";
+    } else if (property.reference) {
+      return "reference_as_string";
     } else {
       return "text_field";
     }
@@ -24431,6 +25374,7 @@ function _temp3(child_1) {
   return child_1.type.componentType !== "Drawer" && child_1.type.componentType !== "AppBar";
 }
 export {
+  ADMIN_GROUP_NAME,
   AppBar,
   AppContext,
   ArrayContainer,
@@ -24455,6 +25399,7 @@ export {
   CircularProgressCenter,
   ConfirmationDialog,
   DEFAULT_FIELD_CONFIGS,
+  DEFAULT_GROUP_NAME,
   DRAWER_WIDTH,
   DatePreview,
   DateTimeFieldBinding,
@@ -24497,6 +25442,8 @@ export {
   ModeControllerContext,
   ModeControllerProvider,
   MultiSelectFieldBinding,
+  NAVIGATION_ADMIN_GROUP_NAME,
+  NAVIGATION_DEFAULT_GROUP_NAME,
   NavigationCard,
   NavigationCardBinding,
   NavigationGroup,
@@ -24510,6 +25457,7 @@ export {
   PropertyPreview,
   PropertyTableCell,
   ReadOnlyFieldBinding,
+  ReferenceAsStringFieldBinding,
   ReferenceFieldBinding,
   ReferencePreview,
   ReferenceSelectionTable,