@firecms/core 3.0.0-beta.14 → 3.0.0-beta.15

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";
@@ -178,8 +178,8 @@ function navigateToEntity({
   if (openEntityMode === "side_panel") {
     sideEntityController.open({
       entityId,
-      path: fullIdPath ?? path,
-      // fullIdPath,
+      path,
+      fullIdPath,
       copy,
       selectedTab,
       collection,
@@ -908,6 +908,13 @@ function resolveEntityView(entityView, contextEntityViews) {
     return entityView;
   }
 }
+function resolveEntityAction(entityAction, contextEntityActions) {
+  if (typeof entityAction === "string") {
+    return contextEntityActions?.find((entry) => entry.key === entityAction);
+  } else {
+    return entityAction;
+  }
+}
 function resolvedSelectedEntityView(customViews, customizationController, selectedTab, canEdit) {
   const resolvedEntityViews = customViews ? customViews.map((e) => resolveEntityView(e, customizationController.entityViews)).filter((e) => Boolean(e)) : [];
   const selectedEntityView = resolvedEntityViews.find((e) => e.key === selectedTab);
@@ -922,7 +929,8 @@ function getNavigationEntriesFromPath(props) {
   const {
     path,
     collections = [],
-    currentFullPath
+    currentFullPath,
+    currentFullIdPath
   } = props;
   const subpaths = removeInitialAndTrailingSlashes(path).split("/");
   const subpathCombinations = getCollectionPathsCombinations(subpaths);
@@ -935,13 +943,14 @@ function getNavigationEntriesFromPath(props) {
       collection = collections && collections.find((entry) => entry.path === subpathCombination);
     }
     if (collection) {
-      const pathOrAlias = collection.id ?? collection.path;
-      const collectionPath = currentFullPath && currentFullPath.length > 0 ? currentFullPath + "/" + pathOrAlias : pathOrAlias;
+      const collectionPath = currentFullPath && currentFullPath.length > 0 ? currentFullPath + "/" + collection.path : collection.path;
+      const fullIdPath = currentFullIdPath && currentFullIdPath.length > 0 ? currentFullIdPath + "/" + collection.id : collection.id;
       result.push({
         type: "collection",
         id: collection.id,
         path: collectionPath,
         fullPath: collectionPath,
+        fullIdPath,
         collection
       });
       const restOfThePath = removeInitialAndTrailingSlashes(removeInitialAndTrailingSlashes(path).replace(subpathCombination, ""));
@@ -953,6 +962,7 @@ function getNavigationEntriesFromPath(props) {
           type: "entity",
           entityId,
           path: collectionPath,
+          fullIdPath,
           fullPath,
           parentCollection: collection
         });
@@ -968,6 +978,7 @@ function getNavigationEntriesFromPath(props) {
               type: "custom_view",
               path: collectionPath,
               entityId,
+              fullIdPath,
               fullPath: fullPath + "/" + customView.key,
               view: customView
             });
@@ -976,6 +987,7 @@ function getNavigationEntriesFromPath(props) {
               path: newPath,
               collections: collection.subcollections,
               currentFullPath: fullPath,
+              currentFullIdPath: fullIdPath,
               contextEntityViews: props.contextEntityViews
             }));
           }
@@ -3185,16 +3197,23 @@ function hashString(str) {
   }
   return Math.abs(hash2);
 }
-function getIcon(iconKey, className, color) {
+function getIcon(iconKey, className, color, size) {
+  if (React__default.isValidElement(iconKey)) {
+    return iconKey;
+  }
   if (!iconKey) return void 0;
-  iconKey = slugify(iconKey);
-  if (!(iconKey in iconKeysMap)) {
-    return void 0;
+  if (typeof iconKey === "string") {
+    const usedIconKey = slugify(iconKey);
+    if (!(usedIconKey in iconKeysMap)) {
+      return void 0;
+    }
+    return usedIconKey in iconKeysMap ? /* @__PURE__ */ jsx(Icon, { iconKey: usedIconKey, size, className, color }) : void 0;
   }
-  return iconKey in iconKeysMap ? /* @__PURE__ */ jsx(Icon, { iconKey, size: "medium", className, color }) : void 0;
+  console.warn("Invalid icon key provided:", iconKey);
+  return void 0;
 }
 const IconForView = React__default.memo(function IconForView2(t0) {
-  const $ = c(14);
+  const $ = c(15);
   const {
     collectionOrView,
     className,
@@ -3213,14 +3232,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 +3248,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 +3262,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 +3279,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) => {
@@ -3560,12 +3580,14 @@ function mergeCollection(target, source, parentPaths = [], modifyCollection) {
   const sourcePropertiesOrder = getCollectionKeys(source);
   const mergedPropertiesOrder = [.../* @__PURE__ */ new Set([...sourcePropertiesOrder, ...targetPropertiesOrder])];
   const mergedEntityViews = [.../* @__PURE__ */ new Set([...target.entityViews ?? [], ...source.entityViews ?? []])];
+  const mergedEntityActions = [.../* @__PURE__ */ new Set([...target.entityActions ?? [], ...source.entityActions ?? []])];
   let resultCollection = {
     ...mergedCollection,
     subcollections: subcollectionsMerged,
     properties: sortProperties(propertiesMerged, mergedPropertiesOrder),
     propertiesOrder: mergedPropertiesOrder,
-    entityViews: mergedEntityViews
+    entityViews: mergedEntityViews,
+    entityActions: mergedEntityActions
   };
   if (modifyCollection) {
     const modifiedCollection = modifyCollection({
@@ -4144,7 +4166,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 +4199,7 @@ function useCollectionFetch(t0) {
           orderBy: sortByProperty,
           order: currentSort
         }).then(onEntitiesUpdate).catch(onError);
-        return _temp2$e;
+        return _temp2$d;
       }
     };
     $[4] = collection;
@@ -4225,9 +4247,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 +4314,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 +4333,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 +4378,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 +4966,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 +5000,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 +5033,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 +5136,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 +5161,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 +5298,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 +5436,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 +6618,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 +6634,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 +6768,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 +6867,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 +6941,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 +6962,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 +6986,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 +7019,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 +7402,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 +7439,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 +7454,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) {
@@ -7820,10 +7857,10 @@ function StorageUploadProgress({
     };
   }, [entry.file, entry.fileName, upload]);
   if (simple) {
-    return /* @__PURE__ */ jsx("div", { className: `m-4 w-${imageSize} h-${imageSize}`, children: loading && /* @__PURE__ */ jsx(Skeleton, { className: `w-${imageSize} h-${imageSize}` }) });
+    return /* @__PURE__ */ jsx("div", { className: `w-${imageSize} h-${imageSize}`, children: loading && /* @__PURE__ */ jsx(Skeleton, { className: `w-${imageSize} h-${imageSize}` }) });
   }
-  return /* @__PURE__ */ jsxs("div", { className: cls(paperMixin, "relative m-4 border-box flex items-center justify-center", `min-w-[${imageSize}px] min-h-[${imageSize}px]`), children: [
-    loading && /* @__PURE__ */ jsx(Skeleton, { className: "m-4 w-full h-full" }),
+  return /* @__PURE__ */ jsxs("div", { className: cls(paperMixin, "p-4 relative border-box flex items-center justify-center", `min-w-[${imageSize}px] min-h-[${imageSize}px]`), children: [
+    loading && /* @__PURE__ */ jsx(Skeleton, { className: "w-full h-full" }),
     error && /* @__PURE__ */ jsx(ErrorView, { title: "Error uploading file", error })
   ] });
 }
@@ -7979,7 +8016,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 +8239,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 +8352,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 +8362,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 +8513,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 +9348,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 +9371,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;
       }
@@ -9501,6 +9545,7 @@ const EntityCollectionRowActions = function EntityCollectionRowActions2({
   entity,
   collection,
   fullPath,
+  fullIdPath,
   width,
   frozen,
   isSelected,
@@ -9536,8 +9581,10 @@ const EntityCollectionRowActions = function EntityCollectionRowActions2({
       uncollapsedActions.map((action, index) => /* @__PURE__ */ jsx(Tooltip, { title: action.name, asChild: true, children: /* @__PURE__ */ jsx(IconButton, { onClick: (event_0) => {
         event_0.stopPropagation();
         action.onClick({
+          view: "collection",
           entity,
           fullPath,
+          fullIdPath,
           collection,
           context,
           selectionController,
@@ -9550,8 +9597,10 @@ const EntityCollectionRowActions = function EntityCollectionRowActions2({
       hasCollapsedActions && /* @__PURE__ */ jsx(Menu, { trigger: /* @__PURE__ */ jsx(IconButton, { size: largeLayout ? "medium" : "small", children: /* @__PURE__ */ jsx(MoreVertIcon, {}) }), children: collapsedActions.map((action_0, index_0) => /* @__PURE__ */ jsxs(MenuItem, { onClick: (e) => {
         e.stopPropagation();
         action_0.onClick({
+          view: "collection",
           entity,
           fullPath,
+          fullIdPath,
           collection,
           context,
           selectionController,
@@ -9619,14 +9668,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;
@@ -9651,7 +9700,7 @@ function CollectionTableToolbar(t0) {
   }
   let t9;
   if ($[12] !== actionsStart || $[13] !== sizeSelect || $[14] !== t8) {
-    t9 = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 md:mr-4 mr-2", children: [
+    t9 = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 md:mr-4 mr-2", children: [
       t8,
       sizeSelect,
       actionsStart
@@ -9684,7 +9733,7 @@ function CollectionTableToolbar(t0) {
   }
   let t12;
   if ($[23] !== actions || $[24] !== t10 || $[25] !== t11) {
-    t12 = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    t12 = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
       t10,
       t11,
       actions
@@ -9710,10 +9759,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 +10882,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 +10901,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 +11101,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 +11109,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 +11160,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 +11224,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 +11364,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 +11372,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 +11458,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({
@@ -11787,7 +11836,7 @@ function useDataSourceTableController({
     sortBy: initialSortUrl
   } = parseFilterAndSort(window.location.search);
   const [filterValues_0, setFilterValues] = React__default.useState(forceFilter ?? (updateUrl ? initialFilterUrl : void 0) ?? initialFilter ?? void 0);
-  const [sortBy_0, setSortBy] = React__default.useState(initialSortUrl ?? initialSortInternal);
+  const [sortBy_0, setSortBy] = React__default.useState((updateUrl ? initialSortUrl : void 0) ?? initialSortInternal);
   useUpdateUrl(filterValues_0, sortBy_0, searchString, updateUrl);
   const collectionScroll = scrollRestoration?.getCollectionScroll(fullPath, filterValues_0);
   const initialItemCount = collectionScroll?.data.length ?? pageSize;
@@ -11973,7 +12022,7 @@ function encodeFilterAndSort(filterValues, sortBy) {
         }
         if (encodedValue !== void 0) {
           entries[encodeURIComponent(`${key}_op`)] = encodeURIComponent(op);
-          entries[encodeURIComponent(`${key}_value`)] = encodeURIComponent(encodedValue.toString());
+          entries[encodeURIComponent(`${key}_value`)] = encodedValue ? encodeURIComponent(encodedValue.toString()) : "null";
         }
       }
     });
@@ -12116,7 +12165,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 +12257,7 @@ function useTableSearchHelper(t0) {
   }
   return t1;
 }
-function _temp$f(p_0) {
+function _temp$e(p_0) {
   return Boolean(p_0.collectionView?.onTextSearchClick);
 }
 function DeleteEntityDialog({
@@ -12353,19 +12402,26 @@ function getRecentIds(collectionId) {
   return JSON.parse(stored);
 }
 const editEntityAction = {
-  icon: /* @__PURE__ */ jsx(EditIcon, {}),
+  icon: /* @__PURE__ */ jsx(EditIcon, { size: "small" }),
   key: "edit",
   name: "Edit",
   collapsed: false,
+  isEnabled: ({
+    entity
+  }) => Boolean(entity),
   onClick({
     entity,
     collection,
     fullPath,
+    fullIdPath,
     context,
     highlightEntity,
     unhighlightEntity,
     openEntityMode
   }) {
+    if (!entity) {
+      throw new Error("INTERNAL: editEntityAction: Entity is undefined");
+    }
     highlightEntity?.(entity);
     context.analyticsController?.onAnalyticsEvent?.("entity_click", {
       path: entity.path,
@@ -12374,7 +12430,8 @@ const editEntityAction = {
     if (collection) {
       addRecentId(collection.id, entity.id);
     }
-    const path = collection?.collectionGroup ? collection.id : fullPath ?? collection?.id ?? entity.path;
+    const path = collection?.collectionGroup ? entity.path : fullPath ?? collection?.path ?? entity.path;
+    const newFullIdPath = collection?.collectionGroup ? collection.id : fullIdPath ?? collection?.id ?? entity.path;
     const defaultSelectedView = resolveDefaultSelectedView(collection ? collection.defaultSelectedView : void 0, {
       status: "existing",
       entityId: entity.id
@@ -12384,7 +12441,7 @@ const editEntityAction = {
       collection,
       entityId: entity.id,
       path,
-      fullIdPath: path,
+      fullIdPath: newFullIdPath,
       sideEntityController: context.sideEntityController,
       onClose: () => unhighlightEntity?.(entity),
       navigation: context.navigation,
@@ -12394,9 +12451,12 @@ const editEntityAction = {
   }
 };
 const copyEntityAction = {
-  icon: /* @__PURE__ */ jsx(FileCopyIcon, {}),
+  icon: /* @__PURE__ */ jsx(FileCopyIcon, { size: "small" }),
   name: "Copy",
   key: "copy",
+  isEnabled: ({
+    entity
+  }) => Boolean(entity),
   onClick({
     entity,
     collection,
@@ -12406,18 +12466,22 @@ const copyEntityAction = {
     unhighlightEntity,
     openEntityMode
   }) {
+    if (!entity) {
+      throw new Error("INTERNAL: copyEntityAction: Entity is undefined");
+    }
     highlightEntity?.(entity);
     context.analyticsController?.onAnalyticsEvent?.("copy_entity_click", {
       path: entity.path,
       entityId: entity.id
     });
-    const path = collection?.collectionGroup ? collection.id : fullPath ?? collection?.id ?? entity.path;
+    const path = collection?.collectionGroup ? collection.path : fullPath ?? collection?.path ?? entity.path;
+    const fullIdPath = collection?.collectionGroup ? collection.id : fullPath ?? collection?.id ?? entity.path;
     navigateToEntity({
       openEntityMode,
       collection,
       entityId: entity.id,
       path,
-      fullIdPath: path,
+      fullIdPath,
       copy: true,
       sideEntityController: context.sideEntityController,
       onClose: () => unhighlightEntity?.(entity),
@@ -12427,9 +12491,12 @@ const copyEntityAction = {
   }
 };
 const deleteEntityAction = {
-  icon: /* @__PURE__ */ jsx(DeleteIcon, {}),
+  icon: /* @__PURE__ */ jsx(DeleteIcon, { size: "small" }),
   name: "Delete",
   key: "delete",
+  isEnabled: ({
+    entity
+  }) => Boolean(entity),
   onClick({
     entity,
     fullPath,
@@ -12437,8 +12504,11 @@ const deleteEntityAction = {
     context,
     selectionController,
     onCollectionChange,
-    sideEntityController
+    navigateBack
   }) {
+    if (!entity) {
+      throw new Error("INTERNAL: deleteEntityAction: Entity is undefined");
+    }
     const {
       closeDialog
     } = context.dialogsController.open({
@@ -12453,7 +12523,7 @@ const deleteEntityAction = {
           });
           selectionController?.setSelectedEntities(selectionController.selectedEntities.filter((e) => e.id !== entity.id));
           onCollectionChange?.();
-          sideEntityController?.close();
+          navigateBack?.();
         }, onClose: closeDialog });
       }
     });
@@ -12678,184 +12748,401 @@ 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;
+  if ($[13] !== T0 || $[14] !== t4 || $[15] !== t5) {
+    t6 = /* @__PURE__ */ jsx(T0, { in: t4, children: t5 });
+    $[13] = T0;
+    $[14] = t4;
+    $[15] = t5;
+    $[16] = t6;
   } else {
-    t7 = $[15];
+    t6 = $[16];
   }
-  let t8;
-  if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
-    t8 = {
-      alignSelf: "flex-end"
+  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);
     };
-    $[16] = t8;
+  }, [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 = /* @__PURE__ */ jsx("div", { style: t8, children: /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(ArrowForwardIcon, { className: "text-primary" }) }) });
+    t9 = {
+      alignSelf: "flex-end"
+    };
     $[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;
+  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 = $[19];
+    t10 = $[18];
   }
   let t11;
-  if ($[20] !== t10 || $[21] !== t2) {
-    t11 = /* @__PURE__ */ jsx(Card, { className: t1, onClick: t2, children: t10 });
-    $[20] = t10;
-    $[21] = t2;
-    $[22] = 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 = $[22];
+    t11 = $[20];
   }
-  return t11;
-}
-function _temp$e(event) {
+  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();
 }
@@ -12915,7 +13202,7 @@ function SmallNavigationCard(t0) {
   return t5;
 }
 function NavigationCardBinding(t0) {
-  const $ = c(34);
+  const $ = c(35);
   const {
     path,
     collection,
@@ -12924,7 +13211,8 @@ function NavigationCardBinding(t0) {
     name,
     description,
     onClick,
-    type
+    type,
+    shrink
   } = t0;
   const userConfigurationPersistence = useUserConfigurationPersistence();
   const t1 = collection ?? view;
@@ -13031,533 +13319,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;
+  if ($[2] !== transform) {
+    t2 = transform ? CSS.Transform.toString(transform) : void 0;
+    $[2] = transform;
+    $[3] = t2;
   } else {
-    t2 = $[6];
+    t2 = $[3];
   }
-  const onIconClick = t2;
-  let t3;
-  if ($[7] !== entry.url || $[8] !== navigate) {
-    t3 = () => navigate(entry.url);
-    $[7] = entry.url;
-    $[8] = navigate;
-    $[9] = t3;
+  const t3 = isDragging ? 0 : 1;
+  let t4;
+  if ($[4] !== t2 || $[5] !== t3 || $[6] !== transition) {
+    t4 = {
+      transform: t2,
+      transition,
+      opacity: t3
+    };
+    $[4] = t2;
+    $[5] = t3;
+    $[6] = transition;
+    $[7] = t4;
   } else {
-    t3 = $[9];
+    t4 = $[7];
   }
-  const t4 = favourite ? "text-secondary" : "text-surface-400 dark:text-surface-500";
+  const style = t4;
   let t5;
-  if ($[10] !== onIconClick || $[11] !== t4) {
-    t5 = /* @__PURE__ */ jsx(StarIcon, { onClick: onIconClick, size: 18, className: t4 });
-    $[10] = onIconClick;
-    $[11] = t4;
-    $[12] = t5;
+  if ($[8] !== entry || $[9] !== onClick) {
+    t5 = /* @__PURE__ */ jsx(NavigationCardBinding, { ...entry, onClick });
+    $[8] = entry;
+    $[9] = onClick;
+    $[10] = t5;
   } else {
-    t5 = $[12];
+    t5 = $[10];
   }
   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 ($[11] !== attributes || $[12] !== listeners2 || $[13] !== setNodeRef || $[14] !== style || $[15] !== t5) {
+    t6 = /* @__PURE__ */ jsx("div", { ref: setNodeRef, style, ...attributes, ...listeners2, children: t5 });
+    $[11] = attributes;
+    $[12] = listeners2;
+    $[13] = setNodeRef;
+    $[14] = style;
+    $[15] = t5;
+    $[16] = t6;
   } else {
-    t6 = $[17];
+    t6 = $[16];
   }
   return t6;
 }
-function FavouritesView(t0) {
-  const $ = c(17);
-  const navigationController = useNavigationController();
-  const userConfigurationPersistence = useUserConfigurationPersistence();
-  if (!userConfigurationPersistence) {
-    return null;
+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];
+  }
+  let t5;
+  if ($[4] !== children || $[5] !== itemIds) {
+    t5 = /* @__PURE__ */ jsx(SortableContext, { items: itemIds, strategy: rectSortingStrategy, children });
+    $[4] = children;
+    $[5] = itemIds;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  let 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 = $[10];
+  }
+  return t6;
+}
+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;
+  if ($[3] !== transform) {
+    t2 = transform ? CSS.Transform.toString(transform) : void 0;
+    $[3] = transform;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const t3 = isDragging ? 0 : 1;
   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;
+  if ($[5] !== t2 || $[6] !== t3 || $[7] !== transition) {
+    t4 = {
+      transform: t2,
+      transition,
+      opacity: t3
+    };
     $[5] = t2;
     $[6] = t3;
-    $[7] = t4;
+    $[7] = transition;
+    $[8] = t4;
   } else {
-    T0 = $[4];
-    t2 = $[5];
-    t3 = $[6];
-    t4 = $[7];
+    t4 = $[8];
   }
+  const style = t4;
   let t5;
-  if ($[10] !== t2 || $[11] !== t3) {
-    t5 = /* @__PURE__ */ jsx("div", { className: t2, children: t3 });
-    $[10] = t2;
-    $[11] = t3;
-    $[12] = t5;
+  if ($[9] !== attributes || $[10] !== children || $[11] !== listeners2 || $[12] !== setNodeRef || $[13] !== style) {
+    t5 = /* @__PURE__ */ jsx("div", { ref: setNodeRef, style, ...attributes, ...listeners2, children });
+    $[9] = attributes;
+    $[10] = children;
+    $[11] = listeners2;
+    $[12] = setNodeRef;
+    $[13] = style;
+    $[14] = t5;
   } else {
-    t5 = $[12];
+    t5 = $[14];
+  }
+  return t5;
+}
+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(() => {
+    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(mouseSensor, touchSensor, keyboardSensor);
+  const dndContainers = dndItems.map((g) => g.name);
+  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;
+    });
+  };
+  const activeItemForOverlay = disabled || !activeId || activeIsGroup ? null : dndItems.flatMap((g_19) => g_19.entries).find((e_7) => e_7.url === activeId) || null;
+  const activeGroupData = disabled || !activeId || !activeIsGroup ? null : dndItems.find((g_20) => g_20.name === activeId) || null;
+  return {
+    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 NewGroupDropZone(t0) {
+  const $ = c(15);
+  const {
+    disabled,
+    setIsHovering
+  } = t0;
+  let t1;
+  if ($[0] !== disabled) {
+    t1 = {
+      id: "new-group-drop-zone",
+      disabled
+    };
+    $[0] = disabled;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
   }
+  const {
+    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 ($[13] !== T0 || $[14] !== t4 || $[15] !== t5) {
-    t6 = /* @__PURE__ */ jsx(T0, { in: t4, children: t5 });
-    $[13] = T0;
-    $[14] = t4;
+  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 {
+    open,
+    initialName,
+    existingGroupNames,
+    onClose,
+    onRename
+  } = t0;
+  const [name, setName] = useState(initialName);
+  const [error, setError] = useState(null);
+  const inputRef = useRef(null);
+  let t1;
+  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];
+  }
+  useEffect(t1, t2);
+  let t3;
+  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);
+        }
+      }
+    };
+    $[4] = existingGroupNames;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  const handleNameChange = t3;
+  let t4;
+  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);
+          }
+        }
+      }
+    };
+    $[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];
   }
-  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]);
-  useEffect(() => {
-    if (!containerRef.current || !scrollsMap[location.key]) return;
-    containerRef.current.scrollTo({
-      top: scrollsMap[location.key],
-      behavior: "auto"
-    });
-  }, [location]);
-  return {
-    containerRef,
-    scroll,
-    direction
-  };
+  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, color: "primary", 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, color: "primary", 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 {
+    t16 = $[40];
+  }
+  return t16;
 }
-function DefaultHomePage(t0) {
-  const $ = c(71);
-  const {
-    additionalActions,
-    additionalChildrenStart,
-    additionalChildrenEnd
-  } = t0;
+const DEFAULT_GROUP_NAME = "Views";
+const ADMIN_GROUP_NAME = "Admin";
+function DefaultHomePage({
+  additionalActions,
+  additionalChildrenStart,
+  additionalChildrenEnd
+}) {
   const context = useFireCMSContext();
   const customizationController = useCustomizationController();
   const navigationController = useNavigationController();
-  const fuse = useRef(null);
-  if (!navigationController.topLevelNavigation) {
-    throw Error("Navigation not ready in FireCMSHomePage");
-  }
-  const {
-    containerRef,
-    direction
-  } = useRestoreScroll();
+  if (!navigationController.topLevelNavigation) throw Error("Navigation not ready");
   const {
-    navigationEntries,
-    groups
+    allowDragAndDrop,
+    navigationEntries: rawNavigationEntries,
+    groups: groupOrderFromNavController,
+    onNavigationEntriesUpdate
   } = navigationController.topLevelNavigation;
+  const fuse = useRef(null);
   const [filteredUrls, setFilteredUrls] = useState(null);
   const performingSearch = Boolean(filteredUrls);
-  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;
-    $[2] = t1;
-  } else {
-    t1 = $[2];
-  }
-  const filteredNavigationEntries = t1;
-  let t2;
-  let t3;
-  if ($[3] !== navigationEntries) {
-    t2 = () => {
-      fuse.current = new Fuse(navigationEntries, {
-        keys: ["name", "description", "group", "path"]
+  const filteredNavigationEntries = useMemo(() => {
+    return filteredUrls ? rawNavigationEntries.filter((e) => filteredUrls.includes(e.url)) : rawNavigationEntries;
+  }, [filteredUrls, rawNavigationEntries]);
+  useEffect(() => {
+    fuse.current = new Fuse(rawNavigationEntries, {
+      keys: ["name", "description", "group", "path"]
+    });
+  }, [rawNavigationEntries]);
+  const updateSearch = useCallback((v) => {
+    if (!v?.trim()) {
+      setFilteredUrls(null);
+      return;
+    }
+    const results = fuse.current?.search(v.trim());
+    setFilteredUrls(results ? results.map((x) => x.item.url) : []);
+  }, []);
+  const [items, setItems] = useState([]);
+  const [adminGroupData, setAdminGroupData] = useState(null);
+  const processedGroups = useMemo(() => {
+    const src = filteredNavigationEntries;
+    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);
+    });
+    const hasPluginAdditionalCards = customizationController.plugins?.some((p) => p.homePage?.AdditionalCards);
+    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 {
+      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]
+        });
       });
-    };
-    t3 = [navigationEntries];
-    $[3] = navigationEntries;
-    $[4] = t2;
-    $[5] = t3;
-  } else {
-    t2 = $[4];
-    t3 = $[5];
-  }
-  useEffect(t2, 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 (hasPluginAdditionalCards && !allProcessed.some((g_3) => g_3.name === DEFAULT_GROUP_NAME)) {
+        allProcessed.push({
+          name: DEFAULT_GROUP_NAME,
+          entries: []
+        });
       }
+      allProcessed = allProcessed.filter((g_4) => g_4.entries.length || groupOrderFromNavController.includes(g_4.name) || g_4.name === DEFAULT_GROUP_NAME && hasPluginAdditionalCards);
+    }
+    const admin = allProcessed.find((g_5) => g_5.name === ADMIN_GROUP_NAME);
+    return {
+      adminGroupData: admin || null,
+      items: allProcessed.filter((g_6) => g_6.name !== ADMIN_GROUP_NAME)
     };
-    $[6] = t4;
-  } else {
-    t4 = $[6];
-  }
-  const updateSearchResults = t4;
-  let T0;
+  }, [filteredNavigationEntries, performingSearch, groupOrderFromNavController, customizationController.plugins]);
+  useEffect(() => {
+    setAdminGroupData(processedGroups.adminGroupData);
+    setItems(processedGroups.items);
+  }, [processedGroups]);
+  const updateItems = (updater) => {
+    setItems(updater);
+  };
+  const persistNavigationGroups = (latest) => {
+    const draggable = latest.map((g_7) => ({
+      name: g_7.name,
+      entries: g_7.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_8) => context.analyticsController?.onAnalyticsEvent?.("home_move_group", {
+      name: g_8
+    }),
+    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 = dndKitActiveNode?.data.current?.type === "group" ? [restrictToVerticalAxis, restrictToWindowEdges] : [restrictToWindowEdges];
+  let additionalPluginChildrenStart;
   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;
-    } else {
-      t152 = $[43];
-    }
-    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;
-    } else {
-      t16 = $[44];
-    }
-    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,
+  if (customizationController.plugins) {
+    const sectionProps = {
+      context
+    };
+    additionalPluginSections = /* @__PURE__ */ jsx(Fragment, { children: customizationController.plugins.filter((p_0) => p_0.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_1) => p_1.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_2) => p_2.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_3) => {
+            if (p_3.homePage?.AdditionalCards) AdditionalCards.push(...toArray(p_3.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_9) => g_9.name).filter((n) => n !== dialogOpenForGroup), onClose: () => setDialogOpenForGroup(null), onRename: (newName) => {
+      handleRenameGroup(dialogOpenForGroup, newName);
+      setDialogOpenForGroup(null);
+    } })
+  ] });
 }
 function EntityCollectionViewActions(t0) {
   const $ = c(41);
@@ -13618,11 +14403,11 @@ function EntityCollectionViewActions(t0) {
   if (selectionEnabled) {
     let t42;
     if ($[12] !== largeLayout || $[13] !== multipleDeleteEnabled || $[14] !== onMultipleDeleteClick || $[15] !== selectedEntities?.length) {
-      t42 = largeLayout ? /* @__PURE__ */ jsxs(Button, { variant: "text", disabled: !selectedEntities?.length || !multipleDeleteEnabled, startIcon: /* @__PURE__ */ jsx(DeleteIcon, {}), onClick: onMultipleDeleteClick, color: "primary", className: "lg:w-20", children: [
+      t42 = largeLayout ? /* @__PURE__ */ jsxs(Button, { variant: "text", disabled: !selectedEntities?.length || !multipleDeleteEnabled, startIcon: /* @__PURE__ */ jsx(DeleteIcon, { size: "small" }), onClick: onMultipleDeleteClick, color: "primary", className: "lg:w-20", children: [
         "(",
         selectedEntities?.length,
         ")"
-      ] }) : /* @__PURE__ */ jsx(IconButton, { color: "primary", disabled: !selectedEntities?.length || !multipleDeleteEnabled, onClick: onMultipleDeleteClick, children: /* @__PURE__ */ jsx(DeleteIcon, {}) });
+      ] }) : /* @__PURE__ */ jsx(IconButton, { size: "small", color: "primary", disabled: !selectedEntities?.length || !multipleDeleteEnabled, onClick: onMultipleDeleteClick, children: /* @__PURE__ */ jsx(DeleteIcon, { size: "small" }) });
       $[12] = largeLayout;
       $[13] = multipleDeleteEnabled;
       $[14] = onMultipleDeleteClick;
@@ -13934,8 +14719,10 @@ const getScrollableParent = (ele) => {
   return !ele || ele === document.body ? document.body : isScrollable(ele) ? ele : getScrollableParent(ele.parentNode);
 };
 function EntityFormActions(t0) {
-  const $ = c(12);
+  const $ = c(16);
   const {
+    fullPath,
+    fullIdPath,
     collection,
     entity,
     layout,
@@ -13944,13 +14731,17 @@ function EntityFormActions(t0) {
     disabled,
     status,
     pluginActions,
-    openEntityMode
+    openEntityMode,
+    navigateBack,
+    formContext
   } = t0;
   const context = useFireCMSContext();
   const sideEntityController = useSideEntityController();
   let t1;
-  if ($[0] !== collection || $[1] !== context || $[2] !== disabled || $[3] !== entity || $[4] !== formex.isSubmitting || $[5] !== layout || $[6] !== openEntityMode || $[7] !== pluginActions || $[8] !== savingError || $[9] !== sideEntityController || $[10] !== status) {
+  if ($[0] !== collection || $[1] !== context || $[2] !== disabled || $[3] !== entity || $[4] !== formContext || $[5] !== formex.isSubmitting || $[6] !== fullIdPath || $[7] !== fullPath || $[8] !== layout || $[9] !== navigateBack || $[10] !== openEntityMode || $[11] !== pluginActions || $[12] !== savingError || $[13] !== sideEntityController || $[14] !== status) {
     t1 = layout === "bottom" ? buildBottomActions$1({
+      fullPath,
+      fullIdPath,
       savingError,
       entity,
       collection,
@@ -13960,8 +14751,12 @@ function EntityFormActions(t0) {
       disabled,
       status,
       pluginActions,
-      openEntityMode
+      openEntityMode,
+      navigateBack,
+      formContext
     }) : buildSideActions$1({
+      fullPath,
+      fullIdPath,
       savingError,
       entity,
       collection,
@@ -13971,28 +14766,36 @@ function EntityFormActions(t0) {
       disabled,
       status,
       pluginActions,
-      openEntityMode
+      openEntityMode,
+      navigateBack,
+      formContext
     });
     $[0] = collection;
     $[1] = context;
     $[2] = disabled;
     $[3] = entity;
-    $[4] = formex.isSubmitting;
-    $[5] = layout;
-    $[6] = openEntityMode;
-    $[7] = pluginActions;
-    $[8] = savingError;
-    $[9] = sideEntityController;
-    $[10] = status;
-    $[11] = t1;
+    $[4] = formContext;
+    $[5] = formex.isSubmitting;
+    $[6] = fullIdPath;
+    $[7] = fullPath;
+    $[8] = layout;
+    $[9] = navigateBack;
+    $[10] = openEntityMode;
+    $[11] = pluginActions;
+    $[12] = savingError;
+    $[13] = sideEntityController;
+    $[14] = status;
+    $[15] = t1;
   } else {
-    t1 = $[11];
+    t1 = $[15];
   }
   return t1;
 }
 function buildBottomActions$1({
   savingError,
   entity,
+  fullPath,
+  fullIdPath,
   formActions,
   collection,
   context,
@@ -14001,23 +14804,29 @@ function buildBottomActions$1({
   disabled,
   status,
   pluginActions,
-  openEntityMode
+  openEntityMode,
+  navigateBack,
+  formContext
 }) {
   return /* @__PURE__ */ jsxs(DialogActions, { position: "absolute", children: [
     savingError && /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsx(Typography, { color: "error", children: savingError.message }) }),
     entity && (formActions ?? []).length > 0 && /* @__PURE__ */ jsx("div", { className: "flex-grow flex overflow-auto no-scrollbar", children: (formActions ?? []).map((action) => /* @__PURE__ */ jsx(IconButton, { color: "primary", onClick: (event) => {
       event.stopPropagation();
       if (entity) action.onClick({
+        view: "form",
         entity,
-        fullPath: collection.path,
+        fullPath: fullPath ?? collection.path,
+        fullIdPath: fullIdPath ?? collection.id,
         collection,
         context,
         sideEntityController,
-        openEntityMode
+        openEntityMode,
+        navigateBack,
+        formContext
       });
     }, children: action.icon }, action.name)) }),
     pluginActions,
-    /* @__PURE__ */ jsx(Button, { variant: "text", disabled: disabled || isSubmitting, type: "reset", children: status === "existing" ? "Discard" : "Clear" }),
+    /* @__PURE__ */ jsx(Button, { variant: "text", disabled: disabled || isSubmitting, color: "primary", type: "reset", children: status === "existing" ? "Discard" : "Clear" }),
     /* @__PURE__ */ jsxs(Button, { variant: "filled", color: "primary", type: "submit", disabled: disabled || isSubmitting, children: [
       status === "existing" && "Save",
       status === "copy" && "Create copy",
@@ -14029,6 +14838,9 @@ function buildSideActions$1({
   savingError,
   entity,
   formActions,
+  fullPath,
+  fullIdPath,
+  openEntityMode,
   collection,
   context,
   sideEntityController,
@@ -14050,6 +14862,7 @@ function buildSideActions$1({
 }
 function EntityForm({
   path,
+  fullIdPath,
   entityId: entityIdProp,
   collection,
   onValuesModified,
@@ -14075,6 +14888,15 @@ function EntityForm({
   if (collection.customId && collection.formAutoSave) {
     console.warn(`The collection ${collection.path} has customId and formAutoSave enabled. This is not supported and formAutoSave will be ignored`);
   }
+  const sideEntityController = useSideEntityController();
+  const navigationController = useNavigationController();
+  const navigateBack = useCallback(() => {
+    if (openEntityMode === "side_panel") {
+      sideEntityController.close();
+    } else {
+      window.history.back();
+    }
+  }, []);
   const authController = useAuthController();
   const [status, setStatus] = useState(initialStatus);
   const updateStatus = (status_0) => {
@@ -14325,14 +15147,15 @@ function EntityForm({
   const pluginActions = [];
   const plugins = customizationController.plugins;
   const actionsDisabled = disabled || formex.isSubmitting || status === "existing" && !formex.dirty || Boolean(disabledProp);
+  const parentCollectionIds = navigationController.getParentCollectionIds(path);
   if (plugins && collection) {
     const actionProps = {
       entityId,
+      parentCollectionIds,
       path,
       status,
       collection,
       context,
-      currentEntityId: entityId,
       formContext,
       openEntityMode,
       disabled: actionsDisabled
@@ -14444,13 +15267,15 @@ function EntityForm({
   const formView = /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxs(Fragment, { children: [
     !Builder && /* @__PURE__ */ jsxs("div", { className: "w-full py-2 flex flex-col items-start my-4 lg:my-6", children: [
       /* @__PURE__ */ jsx(Typography, { className: "my-4 flex-grow line-clamp-1 " + (collection.hideIdFromForm ? "mb-6" : ""), variant: "h4", children: title ?? collection.singularName ?? collection.name }),
-      showEntityPath && /* @__PURE__ */ jsx(Alert, { color: "base", className: "w-full", size: "small", children: /* @__PURE__ */ jsxs("code", { className: "text-xs select-all text-text-secondary dark:text-text-secondary-dark", children: [
+      !entity?.values && initialStatus === "existing" && /* @__PURE__ */ jsx(Alert, { color: "warning", size: "small", outerClassName: "w-full mb-4 text-xs", children: "This entity does not exist in the database" }),
+      showEntityPath && /* @__PURE__ */ jsx(Alert, { color: "base", outerClassName: "w-full", size: "small", children: /* @__PURE__ */ jsxs("code", { className: "text-xs select-all text-text-secondary dark:text-text-secondary-dark", children: [
         entity?.path ?? path,
         "/",
         entityId
       ] }) })
     ] }),
     children,
+    initialEntityId && !entity && initialStatus !== "new" && /* @__PURE__ */ jsx(Alert, { color: "info", size: "small", children: "This entity does not exist in the database" }),
     !Builder && !collection.hideIdFromForm && /* @__PURE__ */ jsx(CustomIdField, { customId: collection.customId, entityId, status, onChange: setEntityId, error: entityIdError, loading: customIdLoading, entity }),
     entityId && formContext && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "mt-12 flex flex-col gap-8", ref: formRef, children: [
       formFields(),
@@ -14464,7 +15289,7 @@ function EntityForm({
   if (!resolvedCollection || !path) {
     throw Error("INTERNAL: Collection and path must be defined in form context");
   }
-  const dialogActions = /* @__PURE__ */ jsx(EntityFormActionsComponent, { collection: resolvedCollection, path, entity, layout: forceActionsAtTheBottom ? "bottom" : "side", savingError, formex, disabled: actionsDisabled, status, pluginActions, openEntityMode, showDefaultActions });
+  const dialogActions = /* @__PURE__ */ jsx(EntityFormActionsComponent, { collection: resolvedCollection, path, fullPath: path, fullIdPath, entity, layout: forceActionsAtTheBottom ? "bottom" : "side", savingError, formex, disabled: actionsDisabled, status, pluginActions, openEntityMode, showDefaultActions, navigateBack, formContext });
   return /* @__PURE__ */ jsx(Formex, { value: formex, children: /* @__PURE__ */ jsxs("form", { onSubmit: formex.handleSubmit, onReset: () => formex.resetForm({
     values: getInitialEntityValues(authController, collection, path, status, entity, customizationController.propertyConfigs)
   }), noValidate: true, className: cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", className), children: [
@@ -15154,7 +15979,7 @@ function StorageItemPreview(t0) {
   const t1 = size === "large" ? "min-w-[220px] min-h-[220px] max-w-[220px]" : "min-w-[118px] min-h-[118px] max-w-[118px]";
   let t2;
   if ($[0] !== className || $[1] !== t1) {
-    t2 = cls(paperMixin, "relative m-4 border-box flex items-center justify-center", t1, className);
+    t2 = cls(paperMixin, "relative border-box flex items-center justify-center", t1, className);
     $[0] = className;
     $[1] = t1;
     $[2] = t2;
@@ -15319,7 +16144,7 @@ function StorageUploadFieldBinding(t0) {
   const resolvedProperty = t6;
   let t7;
   if ($[21] !== minimalistView || $[22] !== property || $[23] !== propertyKey) {
-    t7 = !minimalistView && /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey, icon: getIconForProperty(property, "small"), required: property.validation?.required, title: property.name, className: "h-8text-text-secondary dark:text-text-secondary-dark ml-3.5" });
+    t7 = !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" });
     $[21] = minimalistView;
     $[22] = property;
     $[23] = propertyKey;
@@ -15377,7 +16202,7 @@ function StorageUploadFieldBinding(t0) {
   return t12;
 }
 function SortableStorageItem(t0) {
-  const $ = c(35);
+  const $ = c(34);
   const {
     id,
     entry,
@@ -15415,98 +16240,95 @@ function SortableStorageItem(t0) {
     t2 = $[3];
   }
   const t3 = isDragging ? 100 : void 0;
-  const t4 = isDragging ? 0.8 : 1;
-  let t5;
-  if ($[4] !== t2 || $[5] !== t3 || $[6] !== t4 || $[7] !== transition) {
-    t5 = {
+  let t4;
+  if ($[4] !== t2 || $[5] !== t3 || $[6] !== transition) {
+    t4 = {
       transform: t2,
       transition,
-      zIndex: t3,
-      opacity: t4
+      zIndex: t3
     };
     $[4] = t2;
     $[5] = t3;
-    $[6] = t4;
-    $[7] = transition;
-    $[8] = t5;
+    $[6] = transition;
+    $[7] = t4;
   } else {
-    t5 = $[8];
+    t4 = $[7];
   }
-  const style = t5;
+  const style = t4;
   const getImageSizeNumber = _temp$a;
   let child;
   if (entry.storagePathOrDownloadUrl) {
-    const t62 = `storage_preview_${entry.storagePathOrDownloadUrl}`;
-    let t72;
-    if ($[9] !== entry.storagePathOrDownloadUrl || $[10] !== onClear) {
-      t72 = () => onClear(entry.storagePathOrDownloadUrl);
-      $[9] = entry.storagePathOrDownloadUrl;
-      $[10] = onClear;
-      $[11] = t72;
+    const t52 = `storage_preview_${entry.storagePathOrDownloadUrl}`;
+    let t62;
+    if ($[8] !== entry.storagePathOrDownloadUrl || $[9] !== onClear) {
+      t62 = () => onClear(entry.storagePathOrDownloadUrl);
+      $[8] = entry.storagePathOrDownloadUrl;
+      $[9] = onClear;
+      $[10] = t62;
     } else {
-      t72 = $[11];
+      t62 = $[10];
     }
-    let t8;
-    if ($[12] !== disabled || $[13] !== entry.size || $[14] !== entry.storagePathOrDownloadUrl || $[15] !== property || $[16] !== t62 || $[17] !== t72) {
-      t8 = /* @__PURE__ */ jsx(StorageItemPreview, { name: t62, property, disabled, value: entry.storagePathOrDownloadUrl, onRemove: t72, size: entry.size });
-      $[12] = disabled;
-      $[13] = entry.size;
-      $[14] = entry.storagePathOrDownloadUrl;
-      $[15] = property;
+    let t7;
+    if ($[11] !== disabled || $[12] !== entry.size || $[13] !== entry.storagePathOrDownloadUrl || $[14] !== property || $[15] !== t52 || $[16] !== t62) {
+      t7 = /* @__PURE__ */ jsx(StorageItemPreview, { name: t52, property, disabled, value: entry.storagePathOrDownloadUrl, onRemove: t62, size: entry.size });
+      $[11] = disabled;
+      $[12] = entry.size;
+      $[13] = entry.storagePathOrDownloadUrl;
+      $[14] = property;
+      $[15] = t52;
       $[16] = t62;
-      $[17] = t72;
-      $[18] = t8;
+      $[17] = t7;
     } else {
-      t8 = $[18];
+      t7 = $[17];
     }
-    child = t8;
+    child = t7;
   } else {
     if (entry.file) {
-      let t62;
-      if ($[19] !== entry.file || $[20] !== storagePathBuilder) {
-        t62 = storagePathBuilder(entry.file);
-        $[19] = entry.file;
-        $[20] = storagePathBuilder;
-        $[21] = t62;
+      let t52;
+      if ($[18] !== entry.file || $[19] !== storagePathBuilder) {
+        t52 = storagePathBuilder(entry.file);
+        $[18] = entry.file;
+        $[19] = storagePathBuilder;
+        $[20] = t52;
       } else {
-        t62 = $[21];
+        t52 = $[20];
       }
-      const t72 = getImageSizeNumber(entry.size);
-      let t8;
-      if ($[22] !== entry || $[23] !== metadata || $[24] !== onFileUploadComplete || $[25] !== t62 || $[26] !== t72) {
-        t8 = /* @__PURE__ */ jsx(StorageUploadProgress, { entry, metadata, storagePath: t62, onFileUploadComplete, imageSize: t72, simple: false });
-        $[22] = entry;
-        $[23] = metadata;
-        $[24] = onFileUploadComplete;
+      const t62 = getImageSizeNumber(entry.size);
+      let t7;
+      if ($[21] !== entry || $[22] !== metadata || $[23] !== onFileUploadComplete || $[24] !== t52 || $[25] !== t62) {
+        t7 = /* @__PURE__ */ jsx(StorageUploadProgress, { entry, metadata, storagePath: t52, onFileUploadComplete, imageSize: t62, simple: false });
+        $[21] = entry;
+        $[22] = metadata;
+        $[23] = onFileUploadComplete;
+        $[24] = t52;
         $[25] = t62;
-        $[26] = t72;
-        $[27] = t8;
+        $[26] = t7;
       } else {
-        t8 = $[27];
+        t7 = $[26];
       }
-      child = t8;
+      child = t7;
     }
   }
-  let t6;
-  if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
-    t6 = cls("rounded-md m-1");
-    $[28] = t6;
+  let t5;
+  if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = cls("rounded-md m-1");
+    $[27] = t5;
   } else {
-    t6 = $[28];
+    t5 = $[27];
   }
-  let t7;
-  if ($[29] !== attributes || $[30] !== child || $[31] !== listeners2 || $[32] !== setNodeRef || $[33] !== style) {
-    t7 = /* @__PURE__ */ jsx("div", { ref: setNodeRef, style, ...attributes, ...listeners2, className: t6, tabIndex: -1, children: child });
-    $[29] = attributes;
-    $[30] = child;
-    $[31] = listeners2;
-    $[32] = setNodeRef;
-    $[33] = style;
-    $[34] = t7;
+  let t6;
+  if ($[28] !== attributes || $[29] !== child || $[30] !== listeners2 || $[31] !== setNodeRef || $[32] !== style) {
+    t6 = /* @__PURE__ */ jsx("div", { ref: setNodeRef, style, ...attributes, ...listeners2, className: t5, tabIndex: -1, children: child });
+    $[28] = attributes;
+    $[29] = child;
+    $[30] = listeners2;
+    $[31] = setNodeRef;
+    $[32] = style;
+    $[33] = t6;
   } else {
-    t7 = $[34];
+    t6 = $[33];
   }
-  return t7;
+  return t6;
 }
 function _temp$a(previewSize) {
   switch (previewSize) {
@@ -15525,7 +16347,7 @@ function _temp$a(previewSize) {
   }
 }
 function FileDropComponent(t0) {
-  const $ = c(63);
+  const $ = c(61);
   const {
     storage,
     disabled,
@@ -15616,7 +16438,7 @@ function FileDropComponent(t0) {
   }
   const t6 = disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin;
   const t7 = disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : "";
-  const t8 = multipleFilesSupported && internalValue.length === 0 && "flex";
+  const t8 = multipleFilesSupported && internalValue.length ? "" : "flex";
   const t9 = !isDragActive;
   const t10 = disabled || isDndItemDragging;
   let t11;
@@ -15640,107 +16462,103 @@ function FileDropComponent(t0) {
   } else {
     t11 = $[21];
   }
-  const t12 = multipleFilesSupported && internalValue.length ? "flex-row overflow-x-auto" : "flex-col";
-  const t13 = internalValue.length === 0 && "min-h-[250px] justify-center";
-  const t14 = multipleFilesSupported && internalValue.length > 0 && "min-h-[180px]";
-  const t15 = !multipleFilesSupported && internalValue.length > 0 && "min-h-[250px]";
-  let t16;
-  if ($[22] !== t12 || $[23] !== t13 || $[24] !== t14 || $[25] !== t15) {
-    t16 = cls("flex items-center p-1 no-scrollbar", t12, t13, t14, t15);
+  const t12 = multipleFilesSupported && internalValue.length ? "overflow-auto" : "";
+  const t13 = multipleFilesSupported && internalValue.length ? "min-h-[180px]" : "min-h-[250px]";
+  let t14;
+  if ($[22] !== t12 || $[23] !== t13) {
+    t14 = cls("flex items-center p-1 px-4 no-scrollbar", t12, t13);
     $[22] = t12;
     $[23] = t13;
     $[24] = t14;
-    $[25] = t15;
-    $[26] = t16;
   } else {
-    t16 = $[26];
+    t14 = $[24];
   }
-  let t17;
-  if ($[27] !== getInputProps) {
-    t17 = getInputProps();
-    $[27] = getInputProps;
-    $[28] = t17;
+  let t15;
+  if ($[25] !== getInputProps) {
+    t15 = getInputProps();
+    $[25] = getInputProps;
+    $[26] = t15;
   } else {
-    t17 = $[28];
+    t15 = $[26];
   }
-  let t18;
-  if ($[29] !== autoFocus || $[30] !== t17) {
-    t18 = /* @__PURE__ */ jsx("input", { autoFocus, ...t17 });
-    $[29] = autoFocus;
-    $[30] = t17;
-    $[31] = t18;
+  let t16;
+  if ($[27] !== autoFocus || $[28] !== t15) {
+    t16 = /* @__PURE__ */ jsx("input", { autoFocus, ...t15 });
+    $[27] = autoFocus;
+    $[28] = t15;
+    $[29] = t16;
   } else {
-    t18 = $[31];
+    t16 = $[29];
   }
-  let t19;
-  if ($[32] !== disabled || $[33] !== internalValue || $[34] !== metadata || $[35] !== multipleFilesSupported || $[36] !== name || $[37] !== onClear || $[38] !== onFileUploadComplete || $[39] !== property || $[40] !== storagePathBuilder) {
-    let t202;
-    if ($[42] !== disabled || $[43] !== metadata || $[44] !== multipleFilesSupported || $[45] !== name || $[46] !== onClear || $[47] !== onFileUploadComplete || $[48] !== property || $[49] !== storagePathBuilder) {
-      t202 = (entry) => /* @__PURE__ */ jsx(SortableStorageItem, { id: entry.id, entry, property, name, metadata, storagePathBuilder, onFileUploadComplete, onClear, disabled, isSortable: multipleFilesSupported }, entry.id);
-      $[42] = disabled;
-      $[43] = metadata;
-      $[44] = multipleFilesSupported;
-      $[45] = name;
-      $[46] = onClear;
-      $[47] = onFileUploadComplete;
-      $[48] = property;
-      $[49] = storagePathBuilder;
-      $[50] = t202;
+  let t17;
+  if ($[30] !== disabled || $[31] !== internalValue || $[32] !== metadata || $[33] !== multipleFilesSupported || $[34] !== name || $[35] !== onClear || $[36] !== onFileUploadComplete || $[37] !== property || $[38] !== storagePathBuilder) {
+    let t182;
+    if ($[40] !== disabled || $[41] !== metadata || $[42] !== multipleFilesSupported || $[43] !== name || $[44] !== onClear || $[45] !== onFileUploadComplete || $[46] !== property || $[47] !== storagePathBuilder) {
+      t182 = (entry) => /* @__PURE__ */ jsx(SortableStorageItem, { id: entry.id, entry, property, name, metadata, storagePathBuilder, onFileUploadComplete, onClear, disabled, isSortable: multipleFilesSupported }, entry.id);
+      $[40] = disabled;
+      $[41] = metadata;
+      $[42] = multipleFilesSupported;
+      $[43] = name;
+      $[44] = onClear;
+      $[45] = onFileUploadComplete;
+      $[46] = property;
+      $[47] = storagePathBuilder;
+      $[48] = t182;
     } else {
-      t202 = $[50];
-    }
-    t19 = internalValue.map(t202);
-    $[32] = disabled;
-    $[33] = internalValue;
-    $[34] = metadata;
-    $[35] = multipleFilesSupported;
-    $[36] = name;
-    $[37] = onClear;
-    $[38] = onFileUploadComplete;
-    $[39] = property;
-    $[40] = storagePathBuilder;
-    $[41] = t19;
-  } else {
-    t19 = $[41];
+      t182 = $[48];
+    }
+    t17 = internalValue.map(t182);
+    $[30] = disabled;
+    $[31] = internalValue;
+    $[32] = metadata;
+    $[33] = multipleFilesSupported;
+    $[34] = name;
+    $[35] = onClear;
+    $[36] = onFileUploadComplete;
+    $[37] = property;
+    $[38] = storagePathBuilder;
+    $[39] = t17;
+  } else {
+    t17 = $[39];
   }
-  let t20;
-  if ($[51] !== t16 || $[52] !== t18 || $[53] !== t19) {
-    t20 = /* @__PURE__ */ jsxs("div", { className: t16, children: [
-      t18,
-      t19
+  let t18;
+  if ($[49] !== t14 || $[50] !== t16 || $[51] !== t17) {
+    t18 = /* @__PURE__ */ jsxs("div", { className: t14, children: [
+      t16,
+      t17
     ] });
-    $[51] = t16;
+    $[49] = t14;
+    $[50] = t16;
+    $[51] = t17;
     $[52] = t18;
-    $[53] = t19;
-    $[54] = t20;
   } else {
-    t20 = $[54];
+    t18 = $[52];
   }
-  const t21 = disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : "";
-  let t22;
-  if ($[55] !== helpText || $[56] !== t21) {
-    t22 = /* @__PURE__ */ jsx("div", { className: "flex-grow min-h-[38px] box-border m-2 text-center", children: /* @__PURE__ */ jsx(Typography, { align: "center", variant: "label", className: t21, children: helpText }) });
-    $[55] = helpText;
-    $[56] = t21;
-    $[57] = t22;
+  const t19 = disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : "";
+  let t20;
+  if ($[53] !== helpText || $[54] !== t19) {
+    t20 = /* @__PURE__ */ jsx("div", { className: "flex-grow min-h-[38px] box-border m-2 text-center", children: /* @__PURE__ */ jsx(Typography, { align: "center", variant: "label", className: t19, children: helpText }) });
+    $[53] = helpText;
+    $[54] = t19;
+    $[55] = t20;
   } else {
-    t22 = $[57];
+    t20 = $[55];
   }
-  let t23;
-  if ($[58] !== t11 || $[59] !== t20 || $[60] !== t22 || $[61] !== t5) {
-    t23 = /* @__PURE__ */ jsxs("div", { ...t5, className: t11, children: [
-      t20,
-      t22
+  let t21;
+  if ($[56] !== t11 || $[57] !== t18 || $[58] !== t20 || $[59] !== t5) {
+    t21 = /* @__PURE__ */ jsxs("div", { ...t5, className: t11, children: [
+      t18,
+      t20
     ] });
-    $[58] = t11;
-    $[59] = t20;
-    $[60] = t22;
-    $[61] = t5;
-    $[62] = t23;
+    $[56] = t11;
+    $[57] = t18;
+    $[58] = t20;
+    $[59] = t5;
+    $[60] = t21;
   } else {
-    t23 = $[62];
+    t21 = $[60];
   }
-  return t23;
+  return t21;
 }
 function _temp2$4(acc, ext) {
   return {
@@ -16532,6 +17350,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 +18678,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;
@@ -18147,6 +19050,9 @@ function MarkdownEditorFieldBinding({
   const [fieldVersion, setFieldVersion] = useState(0);
   const internalValue = useRef(value);
   const onContentChange = useCallback((content) => {
+    if (content === value || value === null && content === "") {
+      return;
+    }
     internalValue.current = content;
     setValue(content);
   }, [setValue]);
@@ -19146,11 +20052,12 @@ const EntityCollectionView = React__default.memo(function EntityCollectionView2(
     frozen
   }) => {
     const isSelected = Boolean(usedSelectionController.selectedEntities.find((e_1) => e_1.id == entity_6.id && e_1.path == entity_6.path));
+    const customEntityActions_0 = (collection.entityActions ?? []).map((action) => resolveEntityAction(action, customizationController.entityActions)).filter(Boolean);
     const actions_0 = getActionsForEntity({
       entity: entity_6,
-      customEntityActions: collection.entityActions
+      customEntityActions: customEntityActions_0
     });
-    return /* @__PURE__ */ jsx(EntityCollectionRowActions, { entity: entity_6, width: width_0, frozen, isSelected, selectionEnabled, size: size_0, highlightEntity: setHighlightedEntity, unhighlightEntity: unselectNavigatedEntity, collection, fullPath: fullIdPath ?? fullPath, actions: actions_0, hideId: collection?.hideIdFromCollection, onCollectionChange: updateLastDeleteTimestamp, selectionController: usedSelectionController, openEntityMode });
+    return /* @__PURE__ */ jsx(EntityCollectionRowActions, { entity: entity_6, width: width_0, frozen, isSelected, selectionEnabled, size: size_0, highlightEntity: setHighlightedEntity, unhighlightEntity: unselectNavigatedEntity, collection, fullPath, fullIdPath, actions: actions_0, hideId: collection?.hideIdFromCollection, onCollectionChange: updateLastDeleteTimestamp, selectionController: usedSelectionController, openEntityMode });
   }, [updateLastDeleteTimestamp, usedSelectionController]);
   const title = /* @__PURE__ */ jsx(Popover, { open: popOverOpen, onOpenChange: setPopOverOpen, enabled: Boolean(collection.description), trigger: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start", children: [
     /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", className: `leading-none truncate max-w-[160px] lg:max-w-[240px] ${collection.description ? "cursor-pointer" : "cursor-auto"}`, onClick: collection.description ? (e_2) => {
@@ -19508,7 +20415,7 @@ function ConfirmationDialog(t0) {
   }
   let t4;
   if ($[6] !== onCancel) {
-    t4 = /* @__PURE__ */ jsx(Button, { variant: "text", onClick: onCancel, autoFocus: true, children: "Cancel" });
+    t4 = /* @__PURE__ */ jsx(Button, { color: "primary", variant: "text", onClick: onCancel, autoFocus: true, children: "Cancel" });
     $[6] = onCancel;
     $[7] = t4;
   } else {
@@ -19554,7 +20461,7 @@ function ConfirmationDialog(t0) {
   return t7;
 }
 function FireCMSLogo(t0) {
-  const $ = c(9);
+  const $ = c(8);
   const {
     width,
     height,
@@ -19564,70 +20471,36 @@ function FireCMSLogo(t0) {
   const t1 = width ?? "100%";
   const t2 = height ?? "100%";
   let t3;
+  let t4;
+  let t5;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t3 = /* @__PURE__ */ jsxs("radialGradient", { cx: "28.6213569%", cy: "43.1133328%", fx: "28.6213569%", fy: "43.1133328%", r: "71.5003456%", gradientTransform: "translate(0.286214,0.431133),rotate(3.343450),scale(1.000000,0.996175),translate(-0.286214,-0.431133)", id: "radialGradient-1", children: [
-      /* @__PURE__ */ jsx("stop", { stopColor: "#FF5B79", offset: "0%" }),
-      /* @__PURE__ */ jsx("stop", { stopColor: "#FA5574", offset: "28.0930803%" }),
-      /* @__PURE__ */ jsx("stop", { stopColor: "#EC4C51", offset: "44.7242531%" }),
-      /* @__PURE__ */ jsx("stop", { stopColor: "#9543C1", offset: "71.4578165%" }),
-      /* @__PURE__ */ jsx("stop", { stopColor: "#3857B3", offset: "100%" })
-    ] });
+    t3 = /* @__PURE__ */ jsx("circle", { cx: "291.5", cy: "291.5", r: "291.5", fill: "#0070F4" });
+    t4 = /* @__PURE__ */ jsx("ellipse", { cx: "292", cy: "291.5", rx: "173", ry: "173.5", fill: "#FF3773" });
+    t5 = /* @__PURE__ */ jsx("path", { d: "M465 291.5C465 268.847 460.525 246.416 451.831 225.487C443.137 204.558 430.394 185.542 414.329 169.524C398.265 153.506 379.194 140.8 358.204 132.131C337.215 123.462 314.719 119 292 119C269.281 119 246.785 123.462 225.796 132.131C204.806 140.8 185.735 153.506 169.671 169.524C153.606 185.542 140.863 204.558 132.169 225.487C123.475 246.416 119 268.847 119 291.5L292 291.5H465Z", fill: "#FFA400" });
     $[0] = t3;
-  } else {
-    t3 = $[0];
-  }
-  let t4;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-    t4 = /* @__PURE__ */ jsxs("radialGradient", { cx: "53.6205516%", cy: "47.2473036%", fx: "53.6205516%", fy: "47.2473036%", r: "50.8229649%", gradientTransform: "translate(0.536206,0.472473),rotate(90.000000),scale(1.000000,1.206631),translate(-0.536206,-0.472473)", id: "radialGradient-2", children: [
-      /* @__PURE__ */ jsx("stop", { stopColor: "#68294F", stopOpacity: "0", offset: "0%" }),
-      /* @__PURE__ */ jsx("stop", { stopColor: "#5E2548", stopOpacity: "0.04641108", offset: "75.3503173%" }),
-      /* @__PURE__ */ jsx("stop", { stopColor: "#0D060B", stopOpacity: "0.437431709", offset: "100%" })
-    ] });
     $[1] = t4;
-  } else {
-    t4 = $[1];
-  }
-  let t5;
-  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-    t5 = /* @__PURE__ */ jsxs("defs", { children: [
-      t3,
-      t4,
-      /* @__PURE__ */ jsxs("radialGradient", { cx: "53.8605015%", cy: "48.1990423%", fx: "53.8605015%", fy: "48.1990423%", r: "59.9151549%", gradientTransform: "translate(0.538605,0.481990),rotate(180.000000),scale(1.000000,0.925027),translate(-0.538605,-0.481990)", id: "radialGradient-3", children: [
-        /* @__PURE__ */ jsx("stop", { stopColor: "#68294F", stopOpacity: "0", offset: "0%" }),
-        /* @__PURE__ */ jsx("stop", { stopColor: "#5E2548", stopOpacity: "0.04641108", offset: "84.0867343%" }),
-        /* @__PURE__ */ jsx("stop", { stopColor: "#FF0000", stopOpacity: "0.567324765", offset: "100%" })
-      ] })
-    ] });
     $[2] = t5;
   } else {
+    t3 = $[0];
+    t4 = $[1];
     t5 = $[2];
   }
   let t6;
-  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-    t6 = /* @__PURE__ */ jsx("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs("g", { id: "firecms_logo", children: [
-      /* @__PURE__ */ jsx("circle", { fill: "url(#radialGradient-1)", cx: "299.5", cy: "299.5", r: "299.5" }),
-      /* @__PURE__ */ jsx("circle", { fill: "url(#radialGradient-2)", cx: "299.5", cy: "299.5", r: "299.5" }),
-      /* @__PURE__ */ jsx("circle", { fill: "url(#radialGradient-3)", cx: "299.5", cy: "299.5", r: "299.5" })
-    ] }) });
-    $[3] = t6;
-  } else {
-    t6 = $[3];
-  }
-  let t7;
-  if ($[4] !== className || $[5] !== style || $[6] !== t1 || $[7] !== t2) {
-    t7 = /* @__PURE__ */ jsxs("svg", { width: t1, height: t2, viewBox: "0 0 599 599", version: "1.1", style, className, xmlns: "http://www.w3.org/2000/svg", children: [
-      t5,
-      t6
+  if ($[3] !== className || $[4] !== style || $[5] !== t1 || $[6] !== t2) {
+    t6 = /* @__PURE__ */ jsxs("svg", { width: t1, height: t2, version: "1.1", style, className, viewBox: "0 0 583 583", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+      t3,
+      t4,
+      t5
     ] });
-    $[4] = className;
-    $[5] = style;
-    $[6] = t1;
-    $[7] = t2;
-    $[8] = t7;
+    $[3] = className;
+    $[4] = style;
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = t6;
   } else {
-    t7 = $[8];
+    t6 = $[7];
   }
-  return t7;
+  return t6;
 }
 const AppContext = React__default.createContext({
   hasDrawer: false,
@@ -20568,6 +21441,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 +21456,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 +21474,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 +21613,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 +21823,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 +21851,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;
@@ -21338,7 +22318,7 @@ function UnsavedChangesDialog(t0) {
   }
   let t5;
   if ($[7] !== handleCancel) {
-    t5 = /* @__PURE__ */ jsx(Button, { variant: "text", onClick: handleCancel, autoFocus: true, children: " Cancel " });
+    t5 = /* @__PURE__ */ jsx(Button, { variant: "text", color: "primary", onClick: handleCancel, autoFocus: true, children: " Cancel " });
     $[7] = handleCancel;
     $[8] = t5;
   } else {
@@ -21346,7 +22326,7 @@ function UnsavedChangesDialog(t0) {
   }
   let t6;
   if ($[9] !== handleOk) {
-    t6 = /* @__PURE__ */ jsx(Button, { onClick: handleOk, children: " Ok " });
+    t6 = /* @__PURE__ */ jsx(Button, { color: "primary", onClick: handleOk, children: " Ok " });
     $[9] = handleOk;
     $[10] = t6;
   } else {
@@ -21490,14 +22470,17 @@ function EntityEditViewFormActions({
   status,
   pluginActions,
   openEntityMode,
-  showDefaultActions = true
+  showDefaultActions = true,
+  navigateBack,
+  formContext
 }) {
   const authController = useAuthController();
   const context = useFireCMSContext();
   const sideEntityController = useSideEntityController();
   const sideDialogContext = useSideDialogContext();
+  const customizationController = useCustomizationController();
   const entityActions = useMemo(() => {
-    const customEntityActions = collection.entityActions;
+    const customEntityActions = (collection.entityActions ?? []).map((action) => resolveEntityAction(action, customizationController.entityActions)).filter(Boolean);
     const createEnabled = canCreateEntity(collection, authController, path, null);
     const deleteEnabled = entity ? canDeleteEntity(collection, authController, path, entity) : false;
     const actions = [];
@@ -21505,7 +22488,7 @@ function EntityEditViewFormActions({
     if (deleteEnabled) actions.push(deleteEntityAction);
     if (customEntityActions) return mergeEntityActions(actions, customEntityActions);
     return actions;
-  }, [authController, collection, path]);
+  }, [authController, collection, path, customizationController.entityActions?.length]);
   const formActions = showDefaultActions ? entityActions.filter((a) => a.includeInForm === void 0 || a.includeInForm) : [];
   return layout === "bottom" ? buildBottomActions({
     savingError,
@@ -21519,7 +22502,9 @@ function EntityEditViewFormActions({
     status,
     sideDialogContext,
     pluginActions,
-    openEntityMode
+    openEntityMode,
+    navigateBack,
+    formContext
   }) : buildSideActions({
     savingError,
     entity,
@@ -21532,7 +22517,9 @@ function EntityEditViewFormActions({
     disabled,
     status,
     pluginActions,
-    openEntityMode
+    openEntityMode,
+    navigateBack,
+    formContext
   });
 }
 function buildBottomActions({
@@ -21547,22 +22534,28 @@ function buildBottomActions({
   status,
   sideDialogContext,
   pluginActions,
-  openEntityMode
+  openEntityMode,
+  navigateBack,
+  formContext
 }) {
   const canClose = openEntityMode === "side_panel";
   return /* @__PURE__ */ jsxs(DialogActions, { position: "absolute", children: [
     savingError && /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsx(Typography, { color: "error", children: savingError.message }) }),
-    entity && formActions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex-grow flex overflow-auto no-scrollbar", children: formActions.map((action) => /* @__PURE__ */ jsx(IconButton, { color: "primary", onClick: (event) => {
-      event.stopPropagation();
-      if (entity) action.onClick({
+    formActions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex-grow flex overflow-auto no-scrollbar", children: formActions.map((action) => {
+      const props = {
+        view: "form",
         entity,
         fullPath: collection.path,
         collection,
         context,
         sideEntityController,
-        openEntityMode
-      });
-    }, children: action.icon }, action.name)) }),
+        openEntityMode,
+        navigateBack,
+        formContext
+      };
+      const isEnabled = !action.isEnabled || action.isEnabled(props);
+      return /* @__PURE__ */ jsx(EntityActionButton, { action, enabled: isEnabled, props }, action.key);
+    }) }),
     pluginActions,
     /* @__PURE__ */ jsx(Button, { variant: "text", disabled: disabled || isSubmitting, type: "reset", children: status === "existing" ? "Discard" : "Clear" }),
     /* @__PURE__ */ jsxs(Button, { variant: canClose ? "text" : "filled", color: "primary", type: "submit", disabled: disabled || isSubmitting, onClick: () => {
@@ -21592,7 +22585,10 @@ function buildSideActions({
   disabled,
   status,
   sideDialogContext,
-  pluginActions
+  pluginActions,
+  openEntityMode,
+  navigateBack,
+  formContext
 }) {
   return /* @__PURE__ */ jsxs("div", { className: cls("overflow-auto h-full flex flex-col gap-2 w-80 2xl:w-96 px-4 py-16 sticky top-0 border-l", defaultBorderMixin), children: [
     /* @__PURE__ */ jsxs(LoadingButton, { fullWidth: true, variant: "filled", color: "primary", type: "submit", size: "large", disabled: disabled || isSubmitting, onClick: () => {
@@ -21604,9 +22600,104 @@ function buildSideActions({
     ] }),
     /* @__PURE__ */ jsx(Button, { fullWidth: true, variant: "text", disabled: disabled || isSubmitting, type: "reset", children: status === "existing" ? "Discard" : "Clear" }),
     pluginActions,
+    formActions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-row flex-wrap mt-2", children: formActions.map((action) => {
+      const props = {
+        view: "form",
+        entity,
+        fullPath: collection.path,
+        collection,
+        context,
+        sideEntityController,
+        openEntityMode,
+        navigateBack,
+        formContext
+      };
+      const isEnabled = !action.isEnabled || action.isEnabled(props);
+      return /* @__PURE__ */ jsx(EntityActionButton, { action, enabled: isEnabled, props }, action.key);
+    }) }),
     savingError && /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsx(Typography, { color: "error", children: savingError.message }) })
   ] });
 }
+function EntityActionButton(t0) {
+  const $ = c(14);
+  const {
+    action,
+    enabled,
+    props
+  } = t0;
+  const snackbarController = useSnackbarController();
+  const [loading, setLoading] = React__default.useState(false);
+  const t1 = !enabled;
+  let t2;
+  if ($[0] !== action || $[1] !== props || $[2] !== snackbarController) {
+    t2 = (event) => {
+      console.debug("Executing action", action.key, props);
+      try {
+        event.stopPropagation();
+        if (props.entity) {
+          const onClick = action.onClick(props);
+          if (onClick instanceof Promise) {
+            setLoading(true);
+            onClick.catch((error) => {
+              console.error("Error executing action", action.key, error);
+              snackbarController.open({
+                message: `Error executing action: ${error.message}`,
+                type: "error"
+              });
+            }).finally(() => setLoading(false));
+          } else {
+            snackbarController.open({
+              message: `Action ${action.name} executed successfully`,
+              type: "success"
+            });
+          }
+        }
+      } catch (t32) {
+        const e = t32;
+        console.error("Error executing action", action.key, e);
+        snackbarController.open({
+          message: `Error executing action: ${e.message}`,
+          type: "error"
+        });
+      }
+    };
+    $[0] = action;
+    $[1] = props;
+    $[2] = snackbarController;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== action.icon || $[5] !== loading) {
+    t3 = loading ? /* @__PURE__ */ jsx(CircularProgress, { size: "smallest" }) : action.icon;
+    $[4] = action.icon;
+    $[5] = loading;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== t1 || $[8] !== t2 || $[9] !== t3) {
+    t4 = /* @__PURE__ */ jsx(IconButton, { color: "primary", disabled: t1, onClick: t2, children: t3 });
+    $[7] = t1;
+    $[8] = t2;
+    $[9] = t3;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  let t5;
+  if ($[11] !== action.name || $[12] !== t4) {
+    t5 = /* @__PURE__ */ jsx(Tooltip, { title: action.name, children: t4 });
+    $[11] = action.name;
+    $[12] = t4;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  return t5;
+}
 function EntityJsonPreview(t0) {
   const $ = c(6);
   const {
@@ -21782,6 +22873,22 @@ function EntityEditViewInner({
   const [formContext, setFormContext] = useState(void 0);
   const largeLayout = useLargeLayout();
   const customizationController = useCustomizationController();
+  const plugins = customizationController.plugins;
+  const pluginActionsTop = [];
+  if (plugins && collection) {
+    const actionProps = {
+      entityId,
+      parentCollectionIds,
+      path,
+      status,
+      collection,
+      context,
+      formContext,
+      openEntityMode: layout,
+      disabled: false
+    };
+    pluginActionsTop.push(...plugins.map((plugin) => plugin.form?.ActionsTop ? /* @__PURE__ */ jsx(plugin.form.ActionsTop, { ...actionProps }, `actions_${plugin.key}`) : null).filter(Boolean));
+  }
   const defaultSelectedView = useMemo(() => resolveDefaultSelectedView(collection ? collection.defaultSelectedView : void 0, {
     status,
     entityId
@@ -21798,7 +22905,6 @@ function EntityEditViewInner({
   const customViewsCount = customViews?.length ?? 0;
   const includeJsonView = collection.includeJsonView === void 0 ? true : collection.includeJsonView;
   const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0 || includeJsonView;
-  const plugins = customizationController.plugins;
   const {
     resolvedEntityViews,
     selectedEntityView,
@@ -21854,7 +22960,7 @@ function EntityEditViewInner({
   }), role: "tabpanel", children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(EntityJsonPreview, { values: formContext?.values ?? entity?.values ?? {} }) }) }, "json_view");
   const subCollectionsViews = subcollections && subcollections.map((subcollection) => {
     const subcollectionId = subcollection.id ?? subcollection.path;
-    const newFullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollectionId)}` : void 0;
+    const newFullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollection.path)}` : void 0;
     const newFullIdPath = fullIdPath ? `${fullIdPath}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollectionId)}` : void 0;
     if (selectedTab !== subcollectionId) return null;
     return /* @__PURE__ */ jsxs("div", { className: "relative flex-1 h-full overflow-auto w-full", role: "tabpanel", children: [
@@ -21878,7 +22984,7 @@ function EntityEditViewInner({
     /* @__PURE__ */ jsx(EntityView, { className: "px-8 h-full overflow-auto", entity, path, collection }),
     /* @__PURE__ */ jsx("div", { className: "h-16" })
   ] }) }) : null;
-  const entityView = /* @__PURE__ */ jsx(EntityForm, { collection, path, entityId: entityId ?? usedEntity?.id, onValuesModified, entity, initialDirtyValues: cachedDirtyValues, openEntityMode: layout, forceActionsAtTheBottom: actionsAtTheBottom, initialStatus: status, className: cls((!mainViewVisible || !canEdit) && !selectedSecondaryForm ? "hidden" : "", formProps?.className), EntityFormActionsComponent: EntityEditViewFormActions, disabled: !canEdit, ...formProps, onEntityChange: (entity_0) => {
+  const entityView = /* @__PURE__ */ jsx(EntityForm, { fullIdPath, collection, path, entityId: entityId ?? usedEntity?.id, onValuesModified, entity, initialDirtyValues: cachedDirtyValues, openEntityMode: layout, forceActionsAtTheBottom: actionsAtTheBottom, initialStatus: status, className: cls((!mainViewVisible || !canEdit) && !selectedSecondaryForm ? "hidden" : "", formProps?.className), EntityFormActionsComponent: EntityEditViewFormActions, disabled: !canEdit, ...formProps, onEntityChange: (entity_0) => {
     setUsedEntity(entity_0);
     formProps?.onEntityChange?.(entity_0);
   }, onStatusChange: (status_0) => {
@@ -21900,11 +23006,12 @@ function EntityEditViewInner({
   const customViewTabsEnd = resolvedEntityViews.filter((view_1) => !view_1.position || view_1.position === "end").map((view_2) => /* @__PURE__ */ jsx(Tab, { className: !view_2.tabComponent ? "text-sm min-w-[120px]" : void 0, value: view_2.key, children: view_2.tabComponent ?? view_2.name }, `entity_detail_collection_tab_${view_2.name}`));
   const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews;
   let result = /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col h-full w-full bg-white dark:bg-surface-900", children: [
-    shouldShowTopBar && /* @__PURE__ */ jsxs("div", { className: cls("h-14 flex overflow-visible overflow-x-scroll w-full no-scrollbar h-14 border-b pl-2 pr-2 pt-1 flex items-end bg-surface-50 dark:bg-surface-900", defaultBorderMixin), children: [
+    shouldShowTopBar && /* @__PURE__ */ jsxs("div", { className: cls("h-14 items-center flex overflow-visible overflow-x-scroll w-full no-scrollbar h-14 border-b pl-2 pr-2 pt-1 flex bg-surface-50 dark:bg-surface-900", defaultBorderMixin), children: [
       barActions,
       /* @__PURE__ */ jsx("div", { className: "flex-grow" }),
+      pluginActionsTop,
       globalLoading && /* @__PURE__ */ jsx("div", { className: "self-center", children: /* @__PURE__ */ jsx(CircularProgress, { size: "small" }) }),
-      hasAdditionalViews && /* @__PURE__ */ jsxs(Tabs, { value: selectedTab, onValueChange: (value_1) => {
+      hasAdditionalViews && /* @__PURE__ */ jsxs(Tabs, { className: "self-end", value: selectedTab, onValueChange: (value_1) => {
         onSideTabClick(value_1);
       }, children: [
         includeJsonView && /* @__PURE__ */ jsx(Tab, { disabled: !hasAdditionalViews, value: JSON_TAB_VALUE, className: "text-sm", children: /* @__PURE__ */ jsx(CodeIcon, { size: "small" }) }),
@@ -21923,9 +23030,9 @@ function EntityEditViewInner({
     subCollectionsViews
   ] });
   if (plugins) {
-    plugins.forEach((plugin) => {
-      if (plugin.form?.provider) {
-        result = /* @__PURE__ */ jsx(plugin.form.provider.Component, { status, path, collection, entity: usedEntity, context, formContext, ...plugin.form.provider.props, children: result });
+    plugins.forEach((plugin_0) => {
+      if (plugin_0.form?.provider) {
+        result = /* @__PURE__ */ jsx(plugin_0.form.provider.Component, { status, path, collection, entity: usedEntity, context, formContext, ...plugin_0.form.provider.props, children: result });
       }
     });
   }
@@ -21936,6 +23043,7 @@ function EntitySidePanel(props) {
     allowFullScreen = true,
     path,
     entityId,
+    fullIdPath,
     formProps
   } = props;
   const {
@@ -21964,6 +23072,7 @@ function EntitySidePanel(props) {
       sideEntityController.replace({
         path: params.path,
         entityId: params.entityId,
+        fullIdPath: props.fullIdPath,
         selectedTab: params.selectedTab,
         updateUrl: true,
         collection: params.collection
@@ -21977,7 +23086,7 @@ function EntitySidePanel(props) {
   const parentCollectionIds = useMemo(() => {
     return navigationController.getParentCollectionIds(path);
   }, [navigationController, path]);
-  const collection = props.collection ?? navigationController.getCollection(path);
+  const collection = navigationController.getCollection(fullIdPath ?? path) ?? props.collection;
   useEffect(() => {
     function beforeunload(e) {
       if (blocked && collection) {
@@ -22001,21 +23110,21 @@ function EntitySidePanel(props) {
   if (!props || !collection) {
     return /* @__PURE__ */ jsx("div", { className: "w-full" });
   }
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(EntityEditView, { ...props, layout: "side_panel", collection, parentCollectionIds, onValuesModified, onSaved: onUpdate, barActions: /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(EntityEditView, { ...props, fullIdPath, layout: "side_panel", collection, parentCollectionIds, onValuesModified, onSaved: onUpdate, barActions: /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(IconButton, { className: "self-center", onClick: onClose, children: /* @__PURE__ */ jsx(CloseIcon, { size: "small" }) }),
     allowFullScreen && /* @__PURE__ */ jsx(IconButton, { className: "self-center", onClick: () => {
       if (entityId) navigate(location.pathname);
       else navigate(location.pathname + "#new");
     }, children: /* @__PURE__ */ jsx(OpenInFullIcon, { size: "small" }) })
   ] }), onTabChange: ({
-    path: path_0,
     entityId: entityId_0,
     selectedTab,
     collection: collection_0
   }) => {
     sideEntityController.replace({
-      path: path_0,
+      path,
       entityId: entityId_0,
+      fullIdPath: props.fullIdPath,
       selectedTab,
       updateUrl: true,
       collection: collection_0
@@ -22172,16 +23281,18 @@ function buildSidePanelsFromUrl(path, collections, newFlag) {
   });
   let sidePanel = void 0;
   let lastCollectionPath = "";
+  let lastCollectionId = void 0;
   for (let i = 0; i < navigationViewsForPath.length; i++) {
     const navigationEntry = navigationViewsForPath[i];
     if (navigationEntry.type === "collection") {
       lastCollectionPath = navigationEntry.path;
+      lastCollectionId = navigationEntry.collection.id;
     }
     const previousEntry = navigationViewsForPath[i - 1];
     if (navigationEntry.type === "entity") {
       sidePanel = {
         path: navigationEntry.path,
-        // fullIdPath: navigationEntry.path,
+        fullIdPath: navigationEntry.fullIdPath,
         entityId: navigationEntry.entityId,
         copy: false,
         width: navigationEntry.parentCollection?.sideDialogWidth
@@ -22199,7 +23310,7 @@ function buildSidePanelsFromUrl(path, collections, newFlag) {
   if (newFlag) {
     sidePanel = {
       path: lastCollectionPath,
-      // fullIdPath: lastCollectionPath,
+      fullIdPath: lastCollectionId,
       copy: false
     };
   }
@@ -22207,7 +23318,7 @@ function buildSidePanelsFromUrl(path, collections, newFlag) {
 }
 const propsToSidePanel = (props, buildUrlCollectionPath, resolveIdsFrom, smallLayout, customizationController, authController) => {
   const collectionPath = removeInitialAndTrailingSlashes(props.path);
-  const newPath = props.entityId ? buildUrlCollectionPath(`${collectionPath}/${props.entityId}${props.selectedTab ? "/" + props.selectedTab : ""}#${SIDE_URL_HASH}`) : buildUrlCollectionPath(`${collectionPath}#${NEW_URL_HASH}`);
+  const urlPath = props.entityId ? buildUrlCollectionPath(`${collectionPath}/${props.entityId}${props.selectedTab ? "/" + props.selectedTab : ""}#${SIDE_URL_HASH}`) : buildUrlCollectionPath(`${collectionPath}#${NEW_URL_HASH}`);
   const resolvedPanelProps = {
     ...props,
     formProps: props.formProps
@@ -22216,7 +23327,7 @@ const propsToSidePanel = (props, buildUrlCollectionPath, resolveIdsFrom, smallLa
   return {
     key: `${props.path}/${props.entityId}`,
     component: /* @__PURE__ */ jsx(EntitySidePanel, { ...resolvedPanelProps }),
-    urlPath: newPath,
+    urlPath,
     parentUrlPath: buildUrlCollectionPath(collectionPath),
     width: entityViewWidth,
     onClose: props.onClose,
@@ -22757,6 +23868,7 @@ function FireCMS(props) {
     onAnalyticsEvent,
     propertyConfigs,
     entityViews,
+    entityActions,
     components,
     navigationController,
     apiKey
@@ -22775,6 +23887,7 @@ function FireCMS(props) {
     entityLinkBuilder,
     plugins,
     entityViews: entityViews ?? [],
+    entityActions: entityActions ?? [],
     propertyConfigs: propertyConfigs ?? {},
     components
   };
@@ -22893,7 +24006,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 +24166,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 +24220,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 +24479,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 +24624,8 @@ function getDefaultFieldId(property) {
       return "email";
     } else if (property.enumValues) {
       return "select";
+    } else if (property.reference) {
+      return "reference_as_string";
     } else {
       return "text_field";
     }
@@ -23675,7 +24801,7 @@ function FireCMSRoute() {
         } else {
           t8 = $[22];
         }
-        t62 = /* @__PURE__ */ jsx(EntityCollectionView, { isSubCollection: false, parentCollectionIds: t8, fullPath: collection.id, updateUrl: true, ...collection, Actions: toArray(collection.Actions) }, `collection_view_${collection.id ?? collection.path}`);
+        t62 = /* @__PURE__ */ jsx(EntityCollectionView, { isSubCollection: false, parentCollectionIds: t8, fullPath: collection.path, fullIdPath: collection.id, updateUrl: true, ...collection, Actions: toArray(collection.Actions) }, `collection_view_${collection.id ?? collection.path}`);
       }
       $[18] = navigation;
       $[19] = navigationEntries;
@@ -23715,7 +24841,7 @@ function FireCMSRoute() {
           } else {
             t8 = $[27];
           }
-          t62 = /* @__PURE__ */ jsx(EntityCollectionView, { fullIdPath: collection_0.id, isSubCollection: false, parentCollectionIds: t8, fullPath: collection_0.id, updateUrl: true, ...collection_0, Actions: toArray(collection_0.Actions) }, `collection_view_${collection_0.id ?? collection_0.path}`);
+          t62 = /* @__PURE__ */ jsx(EntityCollectionView, { fullIdPath: collection_0.id, isSubCollection: false, parentCollectionIds: t8, fullPath: collection_0.path, updateUrl: true, ...collection_0, Actions: toArray(collection_0.Actions) }, `collection_view_${collection_0.id ?? collection_0.path}`);
         }
         $[23] = navigation;
         $[24] = navigationEntries;
@@ -24431,6 +25557,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 +25582,7 @@ export {
   CircularProgressCenter,
   ConfirmationDialog,
   DEFAULT_FIELD_CONFIGS,
+  DEFAULT_GROUP_NAME,
   DRAWER_WIDTH,
   DatePreview,
   DateTimeFieldBinding,
@@ -24497,6 +25625,8 @@ export {
   ModeControllerContext,
   ModeControllerProvider,
   MultiSelectFieldBinding,
+  NAVIGATION_ADMIN_GROUP_NAME,
+  NAVIGATION_DEFAULT_GROUP_NAME,
   NavigationCard,
   NavigationCardBinding,
   NavigationGroup,
@@ -24510,6 +25640,7 @@ export {
   PropertyPreview,
   PropertyTableCell,
   ReadOnlyFieldBinding,
+  ReferenceAsStringFieldBinding,
   ReferenceFieldBinding,
   ReferencePreview,
   ReferenceSelectionTable,
@@ -24632,6 +25763,7 @@ export {
   resolveCollection,
   resolveCollectionPathIds,
   resolveDefaultSelectedView,
+  resolveEntityAction,
   resolveEntityView,
   resolveEnumValues,
   resolveNavigationFrom,