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

package/dist/index.umd.js

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react-compiler-runtime"), require("react"), require("@firecms/ui"), require("notistack"), require("object-hash"), require("@firecms/formex"), require("react-router-dom"), require("fuse.js"), require("react-fast-compare"), require("date-fns"), require("date-fns/locale"), require("react-use-measure"), require("yup"), require("react-window"), require("@dnd-kit/core"), require("@dnd-kit/modifiers"), require("@dnd-kit/sortable"), require("@dnd-kit/utilities"), require("react-dropzone"), require("react-image-file-resizer"), require("@firecms/editor"), require("prism-react-renderer"), require("react-router"), require("@radix-ui/react-portal")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react-compiler-runtime", "react", "@firecms/ui", "notistack", "object-hash", "@firecms/formex", "react-router-dom", "fuse.js", "react-fast-compare", "date-fns", "date-fns/locale", "react-use-measure", "yup", "react-window", "@dnd-kit/core", "@dnd-kit/modifiers", "@dnd-kit/sortable", "@dnd-kit/utilities", "react-dropzone", "react-image-file-resizer", "@firecms/editor", "prism-react-renderer", "react-router", "@radix-ui/react-portal"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["FireCMS Core"] = {}, global.jsxRuntime, global.reactCompilerRuntime, global.React, global.ui, global.notistack, global.hash, global.formex, global.reactRouterDom, global.Fuse, global.equal, global.dateFns, global.locales, global.useMeasure, global.yup, global.reactWindow, global.core, global.modifiers, global.sortable, global.utilities, global.reactDropzone, global.Resizer, global.editor, global.prismReactRenderer, global.reactRouter, global.Portal));
-})(this, function(exports2, jsxRuntime, reactCompilerRuntime, React, ui, notistack, hash, formex, reactRouterDom, Fuse, equal, dateFns, locales, useMeasure, yup, reactWindow, core, modifiers, sortable, utilities, reactDropzone, Resizer, editor, prismReactRenderer, reactRouter, Portal) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react-compiler-runtime"), require("react"), require("@firecms/ui"), require("notistack"), require("object-hash"), require("@firecms/formex"), require("react-router-dom"), require("fuse.js"), require("react-fast-compare"), require("date-fns"), require("date-fns/locale"), require("react-use-measure"), require("yup"), require("react-window"), require("@dnd-kit/core"), require("@dnd-kit/sortable"), require("@dnd-kit/utilities"), require("@dnd-kit/modifiers"), require("react-dropzone"), require("react-image-file-resizer"), require("@firecms/editor"), require("prism-react-renderer"), require("react-router"), require("@radix-ui/react-portal")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react-compiler-runtime", "react", "@firecms/ui", "notistack", "object-hash", "@firecms/formex", "react-router-dom", "fuse.js", "react-fast-compare", "date-fns", "date-fns/locale", "react-use-measure", "yup", "react-window", "@dnd-kit/core", "@dnd-kit/sortable", "@dnd-kit/utilities", "@dnd-kit/modifiers", "react-dropzone", "react-image-file-resizer", "@firecms/editor", "prism-react-renderer", "react-router", "@radix-ui/react-portal"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["FireCMS Core"] = {}, global.jsxRuntime, global.reactCompilerRuntime, global.React, global.ui, global.notistack, global.hash, global.formex, global.reactRouterDom, global.Fuse, global.equal, global.dateFns, global.locales, global.useMeasure, global.yup, global.reactWindow, global.core, global.sortable, global.utilities, global.modifiers, global.reactDropzone, global.Resizer, global.editor, global.prismReactRenderer, global.reactRouter, global.Portal));
+})(this, function(exports2, jsxRuntime, reactCompilerRuntime, React, ui, notistack, hash, formex, reactRouterDom, Fuse, equal, dateFns, locales, useMeasure, yup, reactWindow, core, sortable, utilities, modifiers, reactDropzone, Resizer, editor, prismReactRenderer, reactRouter, Portal) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -176,8 +176,8 @@
     if (openEntityMode === "side_panel") {
       sideEntityController.open({
         entityId,
-        path: fullIdPath ?? path,
-        // fullIdPath,
+        path,
+        fullIdPath,
         copy,
         selectedTab,
         collection,
@@ -906,6 +906,13 @@
       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);
@@ -920,7 +927,8 @@
     const {
       path,
       collections = [],
-      currentFullPath
+      currentFullPath,
+      currentFullIdPath
     } = props;
     const subpaths = removeInitialAndTrailingSlashes(path).split("/");
     const subpathCombinations = getCollectionPathsCombinations(subpaths);
@@ -933,13 +941,14 @@
         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, ""));
@@ -951,6 +960,7 @@
             type: "entity",
             entityId,
             path: collectionPath,
+            fullIdPath,
             fullPath,
             parentCollection: collection
           });
@@ -966,6 +976,7 @@
                 type: "custom_view",
                 path: collectionPath,
                 entityId,
+                fullIdPath,
                 fullPath: fullPath + "/" + customView.key,
                 view: customView
               });
@@ -974,6 +985,7 @@
                 path: newPath,
                 collections: collection.subcollections,
                 currentFullPath: fullPath,
+                currentFullIdPath: fullIdPath,
                 contextEntityViews: props.contextEntityViews
               }));
             }
@@ -3183,16 +3195,23 @@
     }
     return Math.abs(hash2);
   }
-  function getIcon(iconKey, className, color) {
+  function getIcon(iconKey, className, color, size) {
+    if (React.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__ */ jsxRuntime.jsx(ui.Icon, { iconKey: usedIconKey, size, className, color }) : void 0;
     }
-    return iconKey in iconKeysMap ? /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { iconKey, size: "medium", className, color }) : void 0;
+    console.warn("Invalid icon key provided:", iconKey);
+    return void 0;
   }
   const IconForView = React.memo(function IconForView2(t0) {
-    const $ = reactCompilerRuntime.c(14);
+    const $ = reactCompilerRuntime.c(15);
     const {
       collectionOrView,
       className,
@@ -3211,14 +3230,15 @@
       return t22;
     }
     let t2;
-    if ($[1] !== className || $[2] !== collectionOrView.icon || $[3] !== color) {
-      t2 = getIcon(collectionOrView.icon, className, color);
+    if ($[1] !== className || $[2] !== collectionOrView.icon || $[3] !== color || $[4] !== size) {
+      t2 = getIcon(collectionOrView.icon, className, color, size);
       $[1] = className;
       $[2] = collectionOrView.icon;
       $[3] = color;
-      $[4] = t2;
+      $[4] = size;
+      $[5] = t2;
     } else {
-      t2 = $[4];
+      t2 = $[5];
     }
     const icon = t2;
     if (collectionOrView?.icon && icon) {
@@ -3226,12 +3246,12 @@
     }
     const t3 = ("singularName" in collectionOrView ? collectionOrView.singularName : void 0) ?? collectionOrView.name;
     let t4;
-    if ($[5] !== t3) {
+    if ($[6] !== t3) {
       t4 = slugify(t3);
-      $[5] = t3;
-      $[6] = t4;
+      $[6] = t3;
+      $[7] = t4;
     } else {
-      t4 = $[6];
+      t4 = $[7];
     }
     let slugName = t4;
     let key;
@@ -3240,12 +3260,12 @@
     }
     if (!key) {
       let t52;
-      if ($[7] !== collectionOrView.path) {
+      if ($[8] !== collectionOrView.path) {
         t52 = slugify(collectionOrView.path);
-        $[7] = collectionOrView.path;
-        $[8] = t52;
+        $[8] = collectionOrView.path;
+        $[9] = t52;
       } else {
-        t52 = $[8];
+        t52 = $[9];
       }
       slugName = t52;
       if (slugName in iconKeysMap) {
@@ -3257,15 +3277,15 @@
       key = ui.coolIconKeys[hashString(collectionOrView.path) % iconsCount];
     }
     let t5;
-    if ($[9] !== className || $[10] !== color || $[11] !== key || $[12] !== size) {
+    if ($[10] !== className || $[11] !== color || $[12] !== key || $[13] !== size) {
       t5 = /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { iconKey: key, size, className, color });
-      $[9] = className;
-      $[10] = color;
-      $[11] = key;
-      $[12] = size;
-      $[13] = t5;
+      $[10] = className;
+      $[11] = color;
+      $[12] = key;
+      $[13] = size;
+      $[14] = t5;
     } else {
-      t5 = $[13];
+      t5 = $[14];
     }
     return t5;
   }, (prevProps, nextProps) => {
@@ -3558,12 +3578,14 @@
     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({
@@ -4142,7 +4164,7 @@
           }
           setDataLoading(false);
           setDataLoadingError(void 0);
-          setData(entities.map(_temp$s));
+          setData(entities.map(_temp$r));
           setNoMoreToLoad(!itemCount || entities.length < itemCount);
         };
         const onError = (error) => {
@@ -4175,7 +4197,7 @@
             orderBy: sortByProperty,
             order: currentSort
           }).then(onEntitiesUpdate).catch(onError);
-          return _temp2$e;
+          return _temp2$d;
         }
       };
       $[4] = collection;
@@ -4223,9 +4245,9 @@
     }
     return t5;
   }
-  function _temp2$e() {
+  function _temp2$d() {
   }
-  function _temp$s(e_0) {
+  function _temp$r(e_0) {
     return {
       ...e_0
     };
@@ -4290,7 +4312,7 @@
           setEntity(CACHE[`${path}/${entityId}`]);
           setDataLoading(false);
           setDataLoadingError(void 0);
-          return _temp$r;
+          return _temp$q;
         } else {
           if (entityId && path && collection) {
             if (dataSource.listenEntity) {
@@ -4309,11 +4331,11 @@
                 databaseId,
                 collection
               }).then(onEntityUpdate).catch(onError);
-              return _temp2$d;
+              return _temp2$c;
             }
           } else {
             onEntityUpdate(void 0);
-            return _temp3$5;
+            return _temp3$4;
           }
         }
       };
@@ -4354,11 +4376,11 @@
     }
     return t5;
   }
-  function _temp3$5() {
+  function _temp3$4() {
   }
-  function _temp2$d() {
+  function _temp2$c() {
   }
-  function _temp$r() {
+  function _temp$q() {
   }
   async function saveEntityWithCallbacks({
     collection,
@@ -4942,7 +4964,7 @@
     }
     let t9;
     if ($[16] !== url) {
-      t9 = /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Open image in new tab", side: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { className: "invisible group-hover:visible", variant: "filled", component: "a", href: url, rel: "noopener noreferrer", target: "_blank", size: "smallest", onClick: _temp$q, children: t8 }) });
+      t9 = /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Open image in new tab", side: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { className: "invisible group-hover:visible", variant: "filled", component: "a", href: url, rel: "noopener noreferrer", target: "_blank", size: "smallest", onClick: _temp$p, children: t8 }) });
       $[16] = url;
       $[17] = t9;
     } else {
@@ -4976,7 +4998,7 @@
     }
     return t11;
   }
-  function _temp$q(e_0) {
+  function _temp$p(e_0) {
     return e_0.stopPropagation();
   }
   function UrlComponentPreview(t0) {
@@ -5009,7 +5031,7 @@
       }
       let t3;
       if ($[2] !== url) {
-        t3 = /* @__PURE__ */ jsxRuntime.jsxs("a", { className: "flex gap-4 break-words items-center font-medium text-primary visited:text-primary dark:visited:text-primary dark:text-primary", href: url, rel: "noopener noreferrer", onMouseDown: _temp$p, target: "_blank", children: [
+        t3 = /* @__PURE__ */ jsxRuntime.jsxs("a", { className: "flex gap-4 break-words items-center font-medium text-primary visited:text-primary dark:visited:text-primary dark:text-primary", href: url, rel: "noopener noreferrer", onMouseDown: _temp$o, target: "_blank", children: [
           t2,
           url
         ] });
@@ -5112,7 +5134,7 @@
           }
           let t7;
           if ($[24] !== t4 || $[25] !== t6 || $[26] !== url) {
-            t7 = /* @__PURE__ */ jsxRuntime.jsxs("a", { href: url, rel: "noopener noreferrer", target: "_blank", onClick: _temp2$c, className: "flex flex-col items-center justify-center", style: t4, children: [
+            t7 = /* @__PURE__ */ jsxRuntime.jsxs("a", { href: url, rel: "noopener noreferrer", target: "_blank", onClick: _temp2$b, className: "flex flex-col items-center justify-center", style: t4, children: [
               t5,
               t6
             ] });
@@ -5137,10 +5159,10 @@
       }
     }
   }
-  function _temp2$c(e_0) {
+  function _temp2$b(e_0) {
     return e_0.stopPropagation();
   }
-  function _temp$p(e) {
+  function _temp$o(e) {
     e.preventDefault();
   }
   function VideoPreview(t0) {
@@ -5274,7 +5296,7 @@
           if (Array.isArray(arrayProperty.of)) {
             let t1;
             if ($[6] !== arrayProperty.of) {
-              t1 = arrayProperty.of.map(_temp$o);
+              t1 = arrayProperty.of.map(_temp$n);
               $[6] = arrayProperty.of;
               $[7] = t1;
             } else {
@@ -5412,7 +5434,7 @@
     }
     return content || null;
   }
-  function _temp$o(p, i) {
+  function _temp$n(p, i) {
     return renderGenericArrayCell(p, i);
   }
   function renderMap(property, size) {
@@ -6594,7 +6616,7 @@
     }
     let t1;
     if ($[1] !== value) {
-      t1 = Object.entries(value).map(_temp$n);
+      t1 = Object.entries(value).map(_temp$m);
       $[1] = value;
       $[2] = t1;
     } else {
@@ -6610,7 +6632,7 @@
     }
     return t2;
   }
-  function _temp$n(t0) {
+  function _temp$m(t0) {
     const [key, childValue] = t0;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls(ui.defaultBorderMixin, "last:border-b-0 border-b"), children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row pt-0.5 pb-0.5 gap-2", children: [
@@ -6744,7 +6766,7 @@
     }
   }
   const PropertyPreview = React.memo(function PropertyPreview2(props) {
-    const $ = reactCompilerRuntime.c(30);
+    const $ = reactCompilerRuntime.c(31);
     const authController = useAuthController();
     const customizationController = useCustomizationController();
     let content;
@@ -6843,7 +6865,22 @@
                       }
                       content = t02;
                     } else {
-                      content = /* @__PURE__ */ jsxRuntime.jsx(StringPropertyPreview, { ...props, property: stringProperty, value });
+                      if (stringProperty.reference) {
+                        if (typeof stringProperty.reference.path === "string") {
+                          content = /* @__PURE__ */ jsxRuntime.jsx(ReferencePreview, { disabled: !stringProperty.reference.path, previewProperties: stringProperty.reference.previewProperties, includeId: stringProperty.reference.includeId, includeEntityLink: stringProperty.reference.includeEntityLink, size: props.size, reference: new EntityReference(value, stringProperty.reference.path) });
+                        } else {
+                          let t02;
+                          if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+                            t02 = /* @__PURE__ */ jsxRuntime.jsx(EmptyValue, {});
+                            $[23] = t02;
+                          } else {
+                            t02 = $[23];
+                          }
+                          content = t02;
+                        }
+                      } else {
+                        content = /* @__PURE__ */ jsxRuntime.jsx(StringPropertyPreview, { ...props, property: stringProperty, value });
+                      }
                     }
                   }
                 }
@@ -6902,12 +6939,12 @@
                   if (property.dataType === "date") {
                     if (value instanceof Date) {
                       let t02;
-                      if ($[23] !== value) {
+                      if ($[24] !== value) {
                         t02 = /* @__PURE__ */ jsxRuntime.jsx(DatePreview, { date: value });
-                        $[23] = value;
-                        $[24] = t02;
+                        $[24] = value;
+                        $[25] = t02;
                       } else {
-                        t02 = $[24];
+                        t02 = $[25];
                       }
                       content = t02;
                     } else {
@@ -6923,11 +6960,11 @@
                         }
                       } else {
                         let t02;
-                        if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+                        if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
                           t02 = /* @__PURE__ */ jsxRuntime.jsx(EmptyValue, {});
-                          $[25] = t02;
+                          $[26] = t02;
                         } else {
-                          t02 = $[25];
+                          t02 = $[26];
                         }
                         content = t02;
                       }
@@ -6947,12 +6984,12 @@
                           }
                         } else {
                           let t02;
-                          if ($[26] !== value) {
+                          if ($[27] !== value) {
                             t02 = JSON.stringify(value);
-                            $[26] = value;
-                            $[27] = t02;
+                            $[27] = value;
+                            $[28] = t02;
                           } else {
-                            t02 = $[27];
+                            t02 = $[28];
                           }
                           content = t02;
                         }
@@ -6980,12 +7017,12 @@
       content = $[10];
     }
     let t0;
-    if ($[28] !== content) {
+    if ($[29] !== content) {
       t0 = content === void 0 || content === null || Array.isArray(content) && content.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(EmptyValue, {}) : content;
-      $[28] = content;
-      $[29] = t0;
+      $[29] = content;
+      $[30] = t0;
     } else {
-      t0 = $[29];
+      t0 = $[30];
     }
     return t0;
   }, equal);
@@ -7363,7 +7400,7 @@
         console.trace("onChange");
         if (valueType === "number") {
           if (multiple) {
-            const newValue = updatedValue.map(_temp$m);
+            const newValue = updatedValue.map(_temp$l);
             updateValue(newValue);
           } else {
             updateValue(parseFloat(updatedValue));
@@ -7400,7 +7437,7 @@
     const renderValue = t3;
     let t4;
     if ($[10] !== disabled || $[11] !== enumValues || $[12] !== internalValue || $[13] !== multiple || $[14] !== onChange || $[15] !== renderValue || $[16] !== small || $[17] !== validValue) {
-      t4 = multiple ? /* @__PURE__ */ jsxRuntime.jsx(ui.MultiSelect, { inputRef: ref, className: "w-full h-full p-0 bg-transparent", position: "item-aligned", disabled, includeClear: false, useChips: false, value: validValue ? internalValue.map(_temp2$b) : [], onValueChange: onChange, children: enumValues?.map((enumConfig) => /* @__PURE__ */ jsxRuntime.jsx(ui.MultiSelectItem, { value: String(enumConfig.id), children: /* @__PURE__ */ jsxRuntime.jsx(EnumValuesChip, { enumKey: enumConfig.id, enumValues, size: small ? "small" : "medium" }) }, enumConfig.id)) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { inputRef: ref, size: "large", fullWidth: true, className: "w-full h-full p-0 bg-transparent", position: "item-aligned", disabled, padding: false, value: validValue ? internalValue?.toString() : "", onValueChange: onChange, renderValue, children: enumValues?.map((enumConfig_0) => /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: String(enumConfig_0.id), children: /* @__PURE__ */ jsxRuntime.jsx(EnumValuesChip, { enumKey: enumConfig_0.id, enumValues, size: small ? "small" : "medium" }) }, enumConfig_0.id)) });
+      t4 = multiple ? /* @__PURE__ */ jsxRuntime.jsx(ui.MultiSelect, { inputRef: ref, className: "w-full h-full p-0 bg-transparent", position: "item-aligned", disabled, includeClear: false, useChips: false, value: validValue ? internalValue.map(_temp2$a) : [], onValueChange: onChange, children: enumValues?.map((enumConfig) => /* @__PURE__ */ jsxRuntime.jsx(ui.MultiSelectItem, { value: String(enumConfig.id), children: /* @__PURE__ */ jsxRuntime.jsx(EnumValuesChip, { enumKey: enumConfig.id, enumValues, size: small ? "small" : "medium" }) }, enumConfig.id)) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { inputRef: ref, size: "large", fullWidth: true, className: "w-full h-full p-0 bg-transparent", position: "item-aligned", disabled, padding: false, value: validValue ? internalValue?.toString() : "", onValueChange: onChange, renderValue, children: enumValues?.map((enumConfig_0) => /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: String(enumConfig_0.id), children: /* @__PURE__ */ jsxRuntime.jsx(EnumValuesChip, { enumKey: enumConfig_0.id, enumValues, size: small ? "small" : "medium" }) }, enumConfig_0.id)) });
       $[10] = disabled;
       $[11] = enumValues;
       $[12] = internalValue;
@@ -7415,10 +7452,10 @@
     }
     return t4;
   }
-  function _temp2$b(v_0) {
+  function _temp2$a(v_0) {
     return v_0.toString();
   }
-  function _temp$m(v) {
+  function _temp$l(v) {
     return parseFloat(v);
   }
   function VirtualTableNumberInput(props) {
@@ -7818,10 +7855,10 @@
       };
     }, [entry.file, entry.fileName, upload]);
     if (simple) {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `m-4 w-${imageSize} h-${imageSize}`, children: loading && /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: `w-${imageSize} h-${imageSize}` }) });
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-${imageSize} h-${imageSize}`, children: loading && /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: `w-${imageSize} h-${imageSize}` }) });
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls(ui.paperMixin, "relative m-4 border-box flex items-center justify-center", `min-w-[${imageSize}px] min-h-[${imageSize}px]`), children: [
-      loading && /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "m-4 w-full h-full" }),
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls(ui.paperMixin, "p-4 relative border-box flex items-center justify-center", `min-w-[${imageSize}px] min-h-[${imageSize}px]`), children: [
+      loading && /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "w-full h-full" }),
       error && /* @__PURE__ */ jsxRuntime.jsx(ErrorView, { title: "Error uploading file", error })
     ] });
   }
@@ -7977,7 +8014,7 @@
     const snackbarContext = useSnackbarController();
     let t1;
     if ($[0] !== storage.acceptedFiles) {
-      t1 = storage.acceptedFiles ? storage.acceptedFiles.map(_temp$l).reduce(_temp2$a, {}) : void 0;
+      t1 = storage.acceptedFiles ? storage.acceptedFiles.map(_temp$k).reduce(_temp2$9, {}) : void 0;
       $[0] = storage.acceptedFiles;
       $[1] = t1;
     } else {
@@ -8200,13 +8237,13 @@
     }
     return t20;
   }
-  function _temp2$a(a, b) {
+  function _temp2$9(a, b) {
     return {
       ...a,
       ...b
     };
   }
-  function _temp$l(e) {
+  function _temp$k(e) {
     return {
       [e]: []
     };
@@ -8313,7 +8350,7 @@
     let t1;
     if ($[2] !== updateValue) {
       t1 = (entities) => {
-        updateValue(entities.map(_temp$k));
+        updateValue(entities.map(_temp$j));
       };
       $[2] = updateValue;
       $[3] = t1;
@@ -8323,7 +8360,7 @@
     const onMultipleEntitiesSelected = t1;
     let t2;
     if ($[4] !== internalValue) {
-      t2 = internalValue ? Array.isArray(internalValue) ? internalValue.map(_temp2$9) : internalValue.id ? [internalValue.id] : [] : [];
+      t2 = internalValue ? Array.isArray(internalValue) ? internalValue.map(_temp2$8) : internalValue.id ? [internalValue.id] : [] : [];
       $[4] = internalValue;
       $[5] = t2;
     } else {
@@ -8474,10 +8511,10 @@
     }
     return t10;
   }, equal);
-  function _temp$k(e) {
+  function _temp$j(e) {
     return getReferenceFrom(e);
   }
-  function _temp2$9(ref) {
+  function _temp2$8(ref) {
     return ref.id;
   }
   yup__namespace.addMethod(yup__namespace.array, "uniqueInArray", function(mapper = (a) => a, message) {
@@ -9309,7 +9346,14 @@
     }
     if (!customField && (!customPreview || selected)) {
       const isAStorageProperty = isStorageProperty(property);
-      if (isAStorageProperty) {
+      if (property.dataType === "string" && property.reference?.path) {
+        const stringProperty = property;
+        const path_0 = stringProperty.reference?.path;
+        const referenceProperty = stringProperty.reference;
+        const referenceValue = internalValue ? new EntityReference(internalValue, path_0) : void 0;
+        innerComponent = /* @__PURE__ */ jsxRuntime.jsx(TableReferenceField, { name: propertyKey, internalValue: referenceValue, updateValue: (v) => updateValue(v ? v.id : null), disabled, size, path: path_0, multiselect: false, previewProperties: referenceProperty.previewProperties, includeId: referenceProperty.includeId, includeEntityLink: referenceProperty.includeEntityLink, title: stringProperty.name, forceFilter: referenceProperty.forceFilter });
+        allowScroll = false;
+      } else if (isAStorageProperty) {
         innerComponent = /* @__PURE__ */ jsxRuntime.jsx(TableStorageUpload, { error: validationError ?? error, disabled, focused: selected, selected, openPopup: setPopupCell ? openPopup : void 0, property, entity, path, value: internalValue, previewSize: getPreviewSizeFrom(size), updateValue, propertyKey });
         includeActions = false;
         showExpandIcon = true;
@@ -9325,12 +9369,12 @@
           allowScroll = true;
         }
       } else if (selected && property.dataType === "string") {
-        const stringProperty = property;
-        if (stringProperty.enumValues) {
-          innerComponent = /* @__PURE__ */ jsxRuntime.jsx(VirtualTableSelect, { name: propertyKey, multiple: false, focused: selected, disabled, valueType: "string", small: getPreviewSizeFrom(size) !== "medium", enumValues: stringProperty.enumValues, error: validationError ?? error, internalValue, updateValue });
+        const stringProperty_0 = property;
+        if (stringProperty_0.enumValues) {
+          innerComponent = /* @__PURE__ */ jsxRuntime.jsx(VirtualTableSelect, { name: propertyKey, multiple: false, focused: selected, disabled, valueType: "string", small: getPreviewSizeFrom(size) !== "medium", enumValues: stringProperty_0.enumValues, error: validationError ?? error, internalValue, updateValue });
           fullHeight = true;
-        } else if (stringProperty.markdown || !stringProperty.storage) {
-          const multiline = Boolean(stringProperty.multiline) || Boolean(stringProperty.markdown);
+        } else if (stringProperty_0.markdown || !stringProperty_0.storage || !stringProperty_0.reference) {
+          const multiline = Boolean(stringProperty_0.multiline) || Boolean(stringProperty_0.markdown);
           innerComponent = /* @__PURE__ */ jsxRuntime.jsx(VirtualTableInput, { error: validationError ?? error, disabled, multiline, focused: selected, value: internalValue, updateValue });
           allowScroll = true;
         }
@@ -9499,6 +9543,7 @@
     entity,
     collection,
     fullPath,
+    fullIdPath,
     width,
     frozen,
     isSelected,
@@ -9534,8 +9579,10 @@
         uncollapsedActions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: action.name, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { onClick: (event_0) => {
           event_0.stopPropagation();
           action.onClick({
+            view: "collection",
             entity,
             fullPath,
+            fullIdPath,
             collection,
             context,
             selectionController,
@@ -9548,8 +9595,10 @@
         hasCollapsedActions && /* @__PURE__ */ jsxRuntime.jsx(ui.Menu, { trigger: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: largeLayout ? "medium" : "small", children: /* @__PURE__ */ jsxRuntime.jsx(ui.MoreVertIcon, {}) }), children: collapsedActions.map((action_0, index_0) => /* @__PURE__ */ jsxRuntime.jsxs(ui.MenuItem, { onClick: (e) => {
           e.stopPropagation();
           action_0.onClick({
+            view: "collection",
             entity,
             fullPath,
+            fullIdPath,
             collection,
             context,
             selectionController,
@@ -9617,14 +9666,14 @@
     }
     let t5;
     if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-      t5 = ["xs", "s", "m", "l", "xl"].map(_temp2$8);
+      t5 = ["xs", "s", "m", "l", "xl"].map(_temp2$7);
       $[5] = t5;
     } else {
       t5 = $[5];
     }
     let t6;
     if ($[6] !== t3 || $[7] !== t4) {
-      t6 = /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Table row size", side: "right", sideOffset: 4, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { value: t3, className: "w-16 ml-2", size: "small", onValueChange: t4, renderValue: _temp$j, children: t5 }) });
+      t6 = /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Table row size", side: "right", sideOffset: 4, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { value: t3, className: "w-16 ml-2", size: "small", onValueChange: t4, renderValue: _temp$i, children: t5 }) });
       $[6] = t3;
       $[7] = t4;
       $[8] = t6;
@@ -9649,7 +9698,7 @@
     }
     let t9;
     if ($[12] !== actionsStart || $[13] !== sizeSelect || $[14] !== t8) {
-      t9 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 md:mr-4 mr-2", children: [
+      t9 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 md:mr-4 mr-2", children: [
         t8,
         sizeSelect,
         actionsStart
@@ -9682,7 +9731,7 @@
     }
     let t12;
     if ($[23] !== actions || $[24] !== t10 || $[25] !== t11) {
-      t12 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      t12 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
         t10,
         t11,
         actions
@@ -9708,10 +9757,10 @@
     }
     return t13;
   }
-  function _temp2$8(size_0) {
+  function _temp2$7(size_0) {
     return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: size_0, className: "w-12 font-medium text-center", children: size_0.toUpperCase() }, size_0);
   }
-  function _temp$j(v_0) {
+  function _temp$i(v_0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: v_0.toUpperCase() });
   }
   function getTableCellAlignment(property) {
@@ -10831,7 +10880,7 @@
     let t1;
     if ($[0] !== text) {
       const urlRegex = /https?:\/\/[^\s]+/g;
-      t1 = text.replace(urlRegex, _temp$i);
+      t1 = text.replace(urlRegex, _temp$h);
       $[0] = text;
       $[1] = t1;
     } else {
@@ -10850,7 +10899,7 @@
     }
     return t2;
   };
-  function _temp$i(url) {
+  function _temp$h(url) {
     return `<a href="${url}" class="underline" target="_blank">Link</a><br/>`;
   }
   const operationLabels$2 = {
@@ -11050,7 +11099,7 @@
     }
     let t5;
     if ($[14] !== possibleOperations) {
-      t5 = possibleOperations.map(_temp2$7);
+      t5 = possibleOperations.map(_temp2$6);
       $[14] = possibleOperations;
       $[15] = t5;
     } else {
@@ -11058,7 +11107,7 @@
     }
     let t6;
     if ($[16] !== operation || $[17] !== t4 || $[18] !== t5) {
-      t6 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[80px]", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { value: operation, fullWidth: true, position: "item-aligned", onValueChange: t4, renderValue: _temp$h, children: t5 }) });
+      t6 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[80px]", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { value: operation, fullWidth: true, position: "item-aligned", onValueChange: t4, renderValue: _temp$g, children: t5 }) });
       $[16] = operation;
       $[17] = t4;
       $[18] = t5;
@@ -11109,8 +11158,8 @@
     }
     let t9;
     if ($[34] !== dataType || $[35] !== enumValues || $[36] !== internalValue || $[37] !== multiple || $[38] !== name || $[39] !== operation || $[40] !== updateFilter) {
-      t9 = enumValues && multiple && /* @__PURE__ */ jsxRuntime.jsx(ui.MultiSelect, { position: "item-aligned", value: Array.isArray(internalValue) ? internalValue.map(_temp3$4) : [], onValueChange: (value_2) => {
-        updateFilter(operation, dataType === "number" ? value_2.map(_temp4$3) : value_2);
+      t9 = enumValues && multiple && /* @__PURE__ */ jsxRuntime.jsx(ui.MultiSelect, { position: "item-aligned", value: Array.isArray(internalValue) ? internalValue.map(_temp3$3) : [], onValueChange: (value_2) => {
+        updateFilter(operation, dataType === "number" ? value_2.map(_temp4$2) : value_2);
       }, multiple, endAdornment: internalValue && /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { className: "absolute right-2 top-3", onClick: (e_2) => updateFilter(operation, void 0), children: /* @__PURE__ */ jsxRuntime.jsx(ui.CloseIcon, {}) }), children: enumValues.map((enumConfig_0) => /* @__PURE__ */ jsxRuntime.jsx(ui.MultiSelectItem, { value: String(enumConfig_0.id), children: /* @__PURE__ */ jsxRuntime.jsx(EnumValuesChip, { enumKey: String(enumConfig_0.id), enumValues, size: "small" }) }, `select_value_${name}_${enumConfig_0.id}`)) });
       $[34] = dataType;
       $[35] = enumValues;
@@ -11173,16 +11222,16 @@
     }
     return t12;
   }
-  function _temp4$3(v) {
+  function _temp4$2(v) {
     return parseInt(v);
   }
-  function _temp3$4(e_1) {
+  function _temp3$3(e_1) {
     return String(e_1);
   }
-  function _temp2$7(op_1) {
+  function _temp2$6(op_1) {
     return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: op_1, children: operationLabels$1[op_1] }, op_1);
   }
-  function _temp$h(op_0) {
+  function _temp$g(op_0) {
     return operationLabels$1[op_0];
   }
   function BooleanFilterField(t0) {
@@ -11313,7 +11362,7 @@
     }
     let t5;
     if ($[11] !== possibleOperations) {
-      t5 = possibleOperations.map(_temp2$6);
+      t5 = possibleOperations.map(_temp2$5);
       $[11] = possibleOperations;
       $[12] = t5;
     } else {
@@ -11321,7 +11370,7 @@
     }
     let t6;
     if ($[13] !== operation || $[14] !== t4 || $[15] !== t5) {
-      t6 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[80px]", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { value: operation, size: "large", fullWidth: true, onValueChange: t4, renderValue: _temp$g, children: t5 }) });
+      t6 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[80px]", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { value: operation, size: "large", fullWidth: true, onValueChange: t4, renderValue: _temp$f, children: t5 }) });
       $[13] = operation;
       $[14] = t4;
       $[15] = t5;
@@ -11407,10 +11456,10 @@
     }
     return t14;
   }
-  function _temp2$6(op_1) {
+  function _temp2$5(op_1) {
     return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: op_1, children: operationLabels[op_1] }, op_1);
   }
-  function _temp$g(op_0) {
+  function _temp$f(op_0) {
     return operationLabels[op_0];
   }
   const SelectableTable = function SelectableTable2({
@@ -11785,7 +11834,7 @@
       sortBy: initialSortUrl
     } = parseFilterAndSort(window.location.search);
     const [filterValues_0, setFilterValues] = React.useState(forceFilter ?? (updateUrl ? initialFilterUrl : void 0) ?? initialFilter ?? void 0);
-    const [sortBy_0, setSortBy] = React.useState(initialSortUrl ?? initialSortInternal);
+    const [sortBy_0, setSortBy] = React.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;
@@ -11971,7 +12020,7 @@
           }
           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";
           }
         }
       });
@@ -12114,7 +12163,7 @@
       const searchBlocked = t12;
       let t2;
       if ($[15] !== customizationController.plugins || $[16] !== dataSource?.initTextSearch) {
-        t2 = Boolean(dataSource?.initTextSearch) || customizationController.plugins?.find(_temp$f);
+        t2 = Boolean(dataSource?.initTextSearch) || customizationController.plugins?.find(_temp$e);
         $[15] = customizationController.plugins;
         $[16] = dataSource?.initTextSearch;
         $[17] = t2;
@@ -12206,7 +12255,7 @@
     }
     return t1;
   }
-  function _temp$f(p_0) {
+  function _temp$e(p_0) {
     return Boolean(p_0.collectionView?.onTextSearchClick);
   }
   function DeleteEntityDialog({
@@ -12351,19 +12400,26 @@
     return JSON.parse(stored);
   }
   const editEntityAction = {
-    icon: /* @__PURE__ */ jsxRuntime.jsx(ui.EditIcon, {}),
+    icon: /* @__PURE__ */ jsxRuntime.jsx(ui.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,
@@ -12372,7 +12428,8 @@
       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
@@ -12382,7 +12439,7 @@
         collection,
         entityId: entity.id,
         path,
-        fullIdPath: path,
+        fullIdPath: newFullIdPath,
         sideEntityController: context.sideEntityController,
         onClose: () => unhighlightEntity?.(entity),
         navigation: context.navigation,
@@ -12392,9 +12449,12 @@
     }
   };
   const copyEntityAction = {
-    icon: /* @__PURE__ */ jsxRuntime.jsx(ui.FileCopyIcon, {}),
+    icon: /* @__PURE__ */ jsxRuntime.jsx(ui.FileCopyIcon, { size: "small" }),
     name: "Copy",
     key: "copy",
+    isEnabled: ({
+      entity
+    }) => Boolean(entity),
     onClick({
       entity,
       collection,
@@ -12404,18 +12464,22 @@
       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),
@@ -12425,9 +12489,12 @@
     }
   };
   const deleteEntityAction = {
-    icon: /* @__PURE__ */ jsxRuntime.jsx(ui.DeleteIcon, {}),
+    icon: /* @__PURE__ */ jsxRuntime.jsx(ui.DeleteIcon, { size: "small" }),
     name: "Delete",
     key: "delete",
+    isEnabled: ({
+      entity
+    }) => Boolean(entity),
     onClick({
       entity,
       fullPath,
@@ -12435,8 +12502,11 @@
       context,
       selectionController,
       onCollectionChange,
-      sideEntityController
+      navigateBack
     }) {
+      if (!entity) {
+        throw new Error("INTERNAL: deleteEntityAction: Entity is undefined");
+      }
       const {
         closeDialog
       } = context.dialogsController.open({
@@ -12451,7 +12521,7 @@
             });
             selectionController?.setSelectedEntities(selectionController.selectedEntities.filter((e) => e.id !== entity.id));
             onCollectionChange?.();
-            sideEntityController?.close();
+            navigateBack?.();
           }, onClose: closeDialog });
         }
       });
@@ -12676,184 +12746,401 @@
   function toArray(input) {
     return Array.isArray(input) ? input : input ? [input] : [];
   }
-  function NavigationGroup(t0) {
-    const $ = reactCompilerRuntime.c(14);
+  function NavigationChip(t0) {
+    const $ = reactCompilerRuntime.c(18);
     const {
-      children,
-      group
+      entry
     } = t0;
+    const navigate = reactRouterDom.useNavigate();
     const userConfigurationPersistence = useUserConfigurationPersistence();
-    const t1 = !(userConfigurationPersistence?.collapsedGroups ?? []).includes(group ?? "ungrouped");
+    if (!userConfigurationPersistence) {
+      return null;
+    }
+    let t1;
+    if ($[0] !== entry.path || $[1] !== userConfigurationPersistence.favouritePaths) {
+      t1 = userConfigurationPersistence.favouritePaths.includes(entry.path);
+      $[0] = entry.path;
+      $[1] = userConfigurationPersistence.favouritePaths;
+      $[2] = t1;
+    } else {
+      t1 = $[2];
+    }
+    const favourite = t1;
     let t2;
-    if ($[0] !== group || $[1] !== userConfigurationPersistence) {
-      t2 = (expanded) => {
-        if (userConfigurationPersistence) {
-          if (!expanded) {
-            const paths = (userConfigurationPersistence.collapsedGroups ?? []).concat(group ?? "ungrouped");
-            userConfigurationPersistence.setCollapsedGroups(paths);
-          } else {
-            userConfigurationPersistence.setCollapsedGroups((userConfigurationPersistence.collapsedGroups ?? []).filter((g) => g !== (group ?? "ungrouped")));
-          }
+    if ($[3] !== entry.path || $[4] !== favourite || $[5] !== userConfigurationPersistence) {
+      t2 = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (favourite) {
+          userConfigurationPersistence.setFavouritePaths(userConfigurationPersistence.favouritePaths.filter((p) => p !== entry.path));
+        } else {
+          userConfigurationPersistence.setFavouritePaths([...userConfigurationPersistence.favouritePaths, entry.path]);
         }
       };
-      $[0] = group;
-      $[1] = userConfigurationPersistence;
-      $[2] = t2;
+      $[3] = entry.path;
+      $[4] = favourite;
+      $[5] = userConfigurationPersistence;
+      $[6] = t2;
     } else {
-      t2 = $[2];
+      t2 = $[6];
     }
+    const onIconClick = t2;
     let t3;
-    if ($[3] !== group) {
-      t3 = group?.toUpperCase() ?? "Views".toUpperCase();
-      $[3] = group;
-      $[4] = t3;
-    } else {
-      t3 = $[4];
-    }
-    let t4;
-    if ($[5] !== t3) {
-      t4 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { color: "secondary", className: "font-medium ml-1", children: t3 });
-      $[5] = t3;
-      $[6] = t4;
+    if ($[7] !== entry.url || $[8] !== navigate) {
+      t3 = () => navigate(entry.url);
+      $[7] = entry.url;
+      $[8] = navigate;
+      $[9] = t3;
     } else {
-      t4 = $[6];
+      t3 = $[9];
     }
+    const t4 = favourite ? "text-secondary" : "text-surface-400 dark:text-surface-500";
     let t5;
-    if ($[7] !== children) {
-      t5 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8", children });
-      $[7] = children;
-      $[8] = t5;
+    if ($[10] !== onIconClick || $[11] !== t4) {
+      t5 = /* @__PURE__ */ jsxRuntime.jsx(ui.StarIcon, { onClick: onIconClick, size: 18, className: t4 });
+      $[10] = onIconClick;
+      $[11] = t4;
+      $[12] = t5;
     } else {
-      t5 = $[8];
+      t5 = $[12];
     }
     let t6;
-    if ($[9] !== t1 || $[10] !== t2 || $[11] !== t4 || $[12] !== t5) {
-      t6 = /* @__PURE__ */ jsxRuntime.jsx(ui.ExpandablePanel, { invisible: true, titleClassName: "font-medium text-sm text-surface-600 dark:text-surface-400", innerClassName: "py-4", initiallyExpanded: t1, onExpandedChange: t2, title: t4, children: t5 });
-      $[9] = t1;
-      $[10] = t2;
-      $[11] = t4;
-      $[12] = t5;
-      $[13] = t6;
+    if ($[13] !== entry.name || $[14] !== entry.path || $[15] !== t3 || $[16] !== t5) {
+      t6 = /* @__PURE__ */ jsxRuntime.jsx(ui.Chip, { onClick: t3, icon: t5, children: entry.name }, entry.path);
+      $[13] = entry.name;
+      $[14] = entry.path;
+      $[15] = t3;
+      $[16] = t5;
+      $[17] = t6;
     } else {
-      t6 = $[13];
+      t6 = $[17];
     }
     return t6;
   }
-  function NavigationCard(t0) {
-    const $ = reactCompilerRuntime.c(23);
-    const {
-      name,
-      description,
-      icon,
-      actions,
-      onClick
-    } = t0;
+  function FavouritesView(t0) {
+    const $ = reactCompilerRuntime.c(17);
+    const navigationController = useNavigationController();
+    const userConfigurationPersistence = useUserConfigurationPersistence();
+    if (!userConfigurationPersistence) {
+      return null;
+    }
     let t1;
-    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-      t1 = ui.cls("h-full p-4 cursor-pointer min-h-[230px]");
-      $[0] = t1;
+    if ($[0] !== userConfigurationPersistence?.favouritePaths) {
+      t1 = userConfigurationPersistence?.favouritePaths ?? [];
+      $[0] = userConfigurationPersistence?.favouritePaths;
+      $[1] = t1;
     } else {
-      t1 = $[0];
+      t1 = $[1];
     }
+    let T0;
     let t2;
-    if ($[1] !== onClick) {
-      t2 = () => {
-        onClick?.();
-      };
-      $[1] = onClick;
-      $[2] = t2;
-    } else {
-      t2 = $[2];
-    }
     let t3;
-    if ($[3] !== actions) {
-      t3 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", onClick: _temp$e, children: actions });
-      $[3] = actions;
-      $[4] = t3;
-    } else {
-      t3 = $[4];
-    }
     let t4;
-    if ($[5] !== icon || $[6] !== t3) {
-      t4 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-10 flex items-center w-full justify-between text-surface-300 dark:text-surface-600", children: [
-        icon,
-        t3
-      ] });
-      $[5] = icon;
+    if ($[2] !== navigationController.topLevelNavigation?.navigationEntries || $[3] !== t1) {
+      let t52;
+      if ($[8] !== navigationController.topLevelNavigation?.navigationEntries) {
+        t52 = (path) => navigationController.topLevelNavigation?.navigationEntries.find((entry) => entry.path === path);
+        $[8] = navigationController.topLevelNavigation?.navigationEntries;
+        $[9] = t52;
+      } else {
+        t52 = $[9];
+      }
+      const favouriteCollections = t1.map(t52).filter(Boolean);
+      T0 = ui.Collapse;
+      t4 = favouriteCollections.length > 0;
+      t2 = "flex flex-row flex-wrap gap-2 pb-2 min-h-[32px]";
+      t3 = favouriteCollections.map(_temp$d);
+      $[2] = navigationController.topLevelNavigation?.navigationEntries;
+      $[3] = t1;
+      $[4] = T0;
+      $[5] = t2;
       $[6] = t3;
       $[7] = t4;
     } else {
+      T0 = $[4];
+      t2 = $[5];
+      t3 = $[6];
       t4 = $[7];
     }
     let t5;
-    if ($[8] !== name) {
-      t5 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { gutterBottom: true, variant: "h5", component: "h2", children: name });
-      $[8] = name;
-      $[9] = t5;
+    if ($[10] !== t2 || $[11] !== t3) {
+      t5 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t2, children: t3 });
+      $[10] = t2;
+      $[11] = t3;
+      $[12] = t5;
     } else {
-      t5 = $[9];
+      t5 = $[12];
     }
     let t6;
-    if ($[10] !== description) {
-      t6 = description && /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", color: "secondary", component: "div", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Markdown, { source: description, size: "small" }) });
-      $[10] = description;
-      $[11] = t6;
-    } else {
-      t6 = $[11];
-    }
-    let t7;
-    if ($[12] !== t4 || $[13] !== t5 || $[14] !== t6) {
-      t7 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-grow w-full", children: [
-        t4,
-        t5,
-        t6
-      ] });
-      $[12] = t4;
-      $[13] = t5;
-      $[14] = t6;
-      $[15] = t7;
+    if ($[13] !== T0 || $[14] !== t4 || $[15] !== t5) {
+      t6 = /* @__PURE__ */ jsxRuntime.jsx(T0, { in: t4, children: t5 });
+      $[13] = T0;
+      $[14] = t4;
+      $[15] = t5;
+      $[16] = t6;
     } else {
-      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__ */ jsxRuntime.jsx(NavigationChip, { entry: entry_0 }, entry_0.path);
+  }
+  const scrollsMap = {};
+  function useRestoreScroll() {
+    const location = reactRouterDom.useLocation();
+    const containerRef = React.useRef(null);
+    const [scroll, setScroll] = React.useState(0);
+    const [direction, setDirection] = React.useState("down");
+    const handleScroll = React.useCallback(() => {
+      if (!containerRef.current || !location.key) return;
+      scrollsMap[location.key] = containerRef.current.scrollTop;
+      setScroll(containerRef.current.scrollTop);
+      setDirection(containerRef.current.scrollTop > scroll ? "down" : "up");
+    }, [containerRef, location.key, scroll]);
+    React.useEffect(() => {
+      const container = containerRef.current;
+      if (!container) return;
+      container.addEventListener("scroll", handleScroll, {
+        passive: true
+      });
+      return () => {
+        if (container) container.removeEventListener("scroll", handleScroll);
       };
-      $[16] = t8;
+    }, [containerRef, handleScroll, location]);
+    React.useEffect(() => {
+      if (!containerRef.current || !scrollsMap[location.key]) return;
+      containerRef.current.scrollTo({
+        top: scrollsMap[location.key],
+        behavior: "auto"
+      });
+    }, [location]);
+    return {
+      containerRef,
+      scroll,
+      direction
+    };
+  }
+  function NavigationGroup(t0) {
+    const $ = reactCompilerRuntime.c(26);
+    const {
+      children,
+      group,
+      minimised,
+      isPreview,
+      isPotentialCardDropTarget,
+      onEditGroup,
+      dndDisabled
+    } = t0;
+    const [isHovered, setIsHovered] = React.useState(false);
+    const currentGroupName = group ?? "Views";
+    const t1 = !isPotentialCardDropTarget ? "my-10" : "my-6";
+    let t2;
+    if ($[0] !== t1) {
+      t2 = ui.cls(t1, "transition-all duration-200 ease-in-out");
+      $[0] = t1;
+      $[1] = t2;
+    } else {
+      t2 = $[1];
+    }
+    const t3 = `flex items-center ${isPreview ? "px-1 py-0.5 m-0" : "ml-3.5 mt-6"} `;
+    let t4;
+    let t5;
+    if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+      t4 = () => setIsHovered(true);
+      t5 = () => setIsHovered(false);
+      $[2] = t4;
+      $[3] = t5;
+    } else {
+      t4 = $[2];
+      t5 = $[3];
+    }
+    const t6 = isPreview ? "body2" : "caption";
+    const t7 = `${isPreview ? "px-1 py-0.5" : "ml-3.5"} font-medium uppercase text-sm text-surface-600 dark:text-surface-400`;
+    let t8;
+    if ($[4] !== currentGroupName || $[5] !== t6 || $[6] !== t7) {
+      t8 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: t6, component: "h2", color: "secondary", className: t7, children: currentGroupName });
+      $[4] = currentGroupName;
+      $[5] = t6;
+      $[6] = t7;
+      $[7] = t8;
+    } else {
+      t8 = $[7];
+    }
+    let t9;
+    if ($[8] !== currentGroupName || $[9] !== dndDisabled || $[10] !== isHovered || $[11] !== isPreview || $[12] !== onEditGroup) {
+      t9 = !isPreview && onEditGroup && !dndDisabled && /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "smallest", onClick: (e) => {
+        e.stopPropagation();
+        onEditGroup(currentGroupName);
+      }, className: ui.cls("ml-2 ", isHovered ? "opacity-100" : "opacity-0", "transition-opacity duration-100"), children: /* @__PURE__ */ jsxRuntime.jsx(ui.EditIcon, { size: "smallest" }) });
+      $[8] = currentGroupName;
+      $[9] = dndDisabled;
+      $[10] = isHovered;
+      $[11] = isPreview;
+      $[12] = onEditGroup;
+      $[13] = t9;
+    } else {
+      t9 = $[13];
+    }
+    let t10;
+    if ($[14] !== t3 || $[15] !== t8 || $[16] !== t9) {
+      t10 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t3, onMouseEnter: t4, onMouseLeave: t5, children: [
+        t8,
+        t9
+      ] });
+      $[14] = t3;
+      $[15] = t8;
+      $[16] = t9;
+      $[17] = t10;
+    } else {
+      t10 = $[17];
+    }
+    let t11;
+    if ($[18] !== children || $[19] !== isPreview || $[20] !== minimised) {
+      t11 = isPreview ? children : minimised ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls("mt-4 p-8 bg-surface-accent-200 dark:bg-surface-accent-800 rounded-lg"), style: {
+        minHeight: "50px"
+      } }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls("mt-4", !minimised ? "pt-0" : ""), children });
+      $[18] = children;
+      $[19] = isPreview;
+      $[20] = minimised;
+      $[21] = t11;
+    } else {
+      t11 = $[21];
+    }
+    let t12;
+    if ($[22] !== t10 || $[23] !== t11 || $[24] !== t2) {
+      t12 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t2, children: [
+        t10,
+        t11
+      ] });
+      $[22] = t10;
+      $[23] = t11;
+      $[24] = t2;
+      $[25] = t12;
+    } else {
+      t12 = $[25];
+    }
+    return t12;
+  }
+  const NavigationCard = React.memo(function NavigationCard2(t0) {
+    const $ = reactCompilerRuntime.c(25);
+    const {
+      name,
+      description,
+      icon,
+      actions,
+      onClick,
+      shrink
+    } = t0;
+    const t1 = shrink && "w-full max-w-full min-h-0 scale-75";
+    let t2;
+    if ($[0] !== t1) {
+      t2 = ui.cls("h-full p-4 cursor-pointer min-h-[230px] transition-all duration-200 ease-in-out", t1);
+      $[0] = t1;
+      $[1] = t2;
+    } else {
+      t2 = $[1];
+    }
+    let t3;
+    if ($[2] !== onClick) {
+      t3 = () => {
+        onClick?.();
+      };
+      $[2] = onClick;
+      $[3] = t3;
+    } else {
+      t3 = $[3];
+    }
+    let t4;
+    if ($[4] !== actions) {
+      t4 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", onClick: _temp$c, children: actions });
+      $[4] = actions;
+      $[5] = t4;
+    } else {
+      t4 = $[5];
+    }
+    let t5;
+    if ($[6] !== icon || $[7] !== t4) {
+      t5 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-10 flex items-center w-full justify-between text-surface-300 dark:text-surface-600", children: [
+        icon,
+        t4
+      ] });
+      $[6] = icon;
+      $[7] = t4;
+      $[8] = t5;
+    } else {
+      t5 = $[8];
+    }
+    let t6;
+    if ($[9] !== name) {
+      t6 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { gutterBottom: true, variant: "h5", component: "h2", children: name });
+      $[9] = name;
+      $[10] = t6;
+    } else {
+      t6 = $[10];
+    }
+    let t7;
+    if ($[11] !== description) {
+      t7 = description && /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", color: "secondary", component: "div", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Markdown, { source: description, size: "small" }) });
+      $[11] = description;
+      $[12] = t7;
+    } else {
+      t7 = $[12];
+    }
+    let t8;
+    if ($[13] !== t5 || $[14] !== t6 || $[15] !== t7) {
+      t8 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-grow w-full", children: [
+        t5,
+        t6,
+        t7
+      ] });
+      $[13] = t5;
+      $[14] = t6;
+      $[15] = t7;
+      $[16] = t8;
     } else {
       t8 = $[16];
     }
     let t9;
     if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-      t9 = /* @__PURE__ */ jsxRuntime.jsx("div", { style: t8, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(ui.ArrowForwardIcon, { className: "text-primary" }) }) });
+      t9 = {
+        alignSelf: "flex-end"
+      };
       $[17] = t9;
     } else {
       t9 = $[17];
     }
     let t10;
-    if ($[18] !== t7) {
-      t10 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start h-full", children: [
-        t7,
-        t9
-      ] });
-      $[18] = t7;
-      $[19] = t10;
+    if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+      t10 = /* @__PURE__ */ jsxRuntime.jsx("div", { style: t9, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(ui.ArrowForwardIcon, { className: "text-primary" }) }) });
+      $[18] = t10;
     } else {
-      t10 = $[19];
+      t10 = $[18];
     }
     let t11;
-    if ($[20] !== t10 || $[21] !== t2) {
-      t11 = /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { className: t1, onClick: t2, children: t10 });
-      $[20] = t10;
-      $[21] = t2;
-      $[22] = t11;
+    if ($[19] !== t8) {
+      t11 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.Card, { className: t2, onClick: t3, children: t11 });
+      $[21] = t11;
+      $[22] = t2;
+      $[23] = t3;
+      $[24] = t12;
+    } else {
+      t12 = $[24];
+    }
+    return t12;
+  });
+  function _temp$c(event) {
     event.preventDefault();
     event.stopPropagation();
   }
@@ -12913,7 +13200,7 @@
     return t5;
   }
   function NavigationCardBinding(t0) {
-    const $ = reactCompilerRuntime.c(34);
+    const $ = reactCompilerRuntime.c(35);
     const {
       path,
       collection,
@@ -12922,7 +13209,8 @@
       name,
       description,
       onClick,
-      type
+      type,
+      shrink
     } = t0;
     const userConfigurationPersistence = useUserConfigurationPersistence();
     const t1 = collection ?? view;
@@ -13029,533 +13317,1030 @@
       t6 = $[27];
     }
     let t7;
-    if ($[28] !== actions || $[29] !== collectionIcon || $[30] !== description || $[31] !== name || $[32] !== t6) {
-      t7 = /* @__PURE__ */ jsxRuntime.jsx(NavigationCard, { icon: collectionIcon, name, description, actions, onClick: t6 });
+    if ($[28] !== actions || $[29] !== collectionIcon || $[30] !== description || $[31] !== name || $[32] !== shrink || $[33] !== t6) {
+      t7 = /* @__PURE__ */ jsxRuntime.jsx(NavigationCard, { icon: collectionIcon, name, description, actions, onClick: t6, shrink });
       $[28] = actions;
       $[29] = collectionIcon;
       $[30] = description;
       $[31] = name;
-      $[32] = t6;
-      $[33] = t7;
+      $[32] = shrink;
+      $[33] = t6;
+      $[34] = t7;
     } else {
-      t7 = $[33];
+      t7 = $[34];
     }
     return t7;
   }
-  function NavigationChip(t0) {
-    const $ = reactCompilerRuntime.c(18);
+  const animateLayoutChanges = (args) => sortable.defaultAnimateLayoutChanges({
+    ...args,
+    wasDragging: true
+  });
+  const dropAnimationConfig = {};
+  const cloneSerializableNavigationEntry = (entry) => {
+    const clonedEntry = {
+      id: entry.id,
+      path: entry.path,
+      url: entry.url,
+      name: entry.name,
+      type: entry.type,
+      collection: entry.collection ? {
+        ...entry.collection
+      } : void 0,
+      view: entry.view ? {
+        ...entry.view
+      } : void 0,
+      ...entry.group && {
+        group: entry.group
+      },
+      ...entry.description && {
+        description: entry.description
+      }
+    };
+    return clonedEntry;
+  };
+  const cloneItemsForDnd = (items) => items.map((g) => ({
+    name: g.name,
+    entries: g.entries.map(cloneSerializableNavigationEntry)
+  }));
+  function SortableNavigationCard(t0) {
+    const $ = reactCompilerRuntime.c(17);
     const {
-      entry
+      entry,
+      onClick
     } = t0;
-    const navigate = reactRouterDom.useNavigate();
-    const userConfigurationPersistence = useUserConfigurationPersistence();
-    if (!userConfigurationPersistence) {
-      return null;
-    }
     let t1;
-    if ($[0] !== entry.path || $[1] !== userConfigurationPersistence.favouritePaths) {
-      t1 = userConfigurationPersistence.favouritePaths.includes(entry.path);
-      $[0] = entry.path;
-      $[1] = userConfigurationPersistence.favouritePaths;
-      $[2] = t1;
+    if ($[0] !== entry.url) {
+      t1 = {
+        id: entry.url,
+        animateLayoutChanges
+      };
+      $[0] = entry.url;
+      $[1] = t1;
     } else {
-      t1 = $[2];
+      t1 = $[1];
     }
-    const favourite = t1;
+    const {
+      setNodeRef,
+      listeners: listeners2,
+      attributes,
+      transform,
+      transition,
+      isDragging
+    } = sortable.useSortable(t1);
     let t2;
-    if ($[3] !== entry.path || $[4] !== favourite || $[5] !== userConfigurationPersistence) {
-      t2 = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (favourite) {
-          userConfigurationPersistence.setFavouritePaths(userConfigurationPersistence.favouritePaths.filter((p) => p !== entry.path));
-        } else {
-          userConfigurationPersistence.setFavouritePaths([...userConfigurationPersistence.favouritePaths, entry.path]);
-        }
-      };
-      $[3] = entry.path;
-      $[4] = favourite;
-      $[5] = userConfigurationPersistence;
-      $[6] = t2;
+    if ($[2] !== transform) {
+      t2 = transform ? utilities.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__ */ jsxRuntime.jsx(ui.StarIcon, { onClick: onIconClick, size: 18, className: t4 });
-      $[10] = onIconClick;
-      $[11] = t4;
-      $[12] = t5;
+    if ($[8] !== entry || $[9] !== onClick) {
+      t5 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.Chip, { onClick: t3, icon: t5, children: entry.name }, entry.path);
-      $[13] = entry.name;
-      $[14] = entry.path;
-      $[15] = t3;
-      $[16] = t5;
-      $[17] = t6;
+    if ($[11] !== attributes || $[12] !== listeners2 || $[13] !== setNodeRef || $[14] !== style || $[15] !== t5) {
+      t6 = /* @__PURE__ */ jsxRuntime.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 $ = reactCompilerRuntime.c(17);
-    const navigationController = useNavigationController();
-    const userConfigurationPersistence = useUserConfigurationPersistence();
-    if (!userConfigurationPersistence) {
-      return null;
+  function NavigationGroupDroppable(t0) {
+    const $ = reactCompilerRuntime.c(11);
+    const {
+      id,
+      itemIds,
+      children,
+      isPotentialCardDropTarget: t1
+    } = t0;
+    const isPotentialCardDropTarget = t1 === void 0 ? false : t1;
+    let t2;
+    if ($[0] !== id) {
+      t2 = {
+        id
+      };
+      $[0] = id;
+      $[1] = t2;
+    } else {
+      t2 = $[1];
     }
+    const {
+      setNodeRef
+    } = core.useDroppable(t2);
+    const t3 = isPotentialCardDropTarget ? "p-2 bg-surface-accent-200 dark:bg-surface-accent-800 rounded-lg" : void 0;
+    let t4;
+    if ($[2] !== t3) {
+      t4 = ui.cls(t3, "transition-all duration-200 ease-in-out");
+      $[2] = t3;
+      $[3] = t4;
+    } else {
+      t4 = $[3];
+    }
+    let t5;
+    if ($[4] !== children || $[5] !== itemIds) {
+      t5 = /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: itemIds, strategy: sortable.rectSortingStrategy, children });
+      $[4] = children;
+      $[5] = itemIds;
+      $[6] = t5;
+    } else {
+      t5 = $[6];
+    }
+    let t6;
+    if ($[7] !== setNodeRef || $[8] !== t4 || $[9] !== t5) {
+      t6 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setNodeRef, className: t4, children: t5 });
+      $[7] = setNodeRef;
+      $[8] = t4;
+      $[9] = t5;
+      $[10] = t6;
+    } else {
+      t6 = $[10];
+    }
+    return t6;
+  }
+  function SortableNavigationGroup(t0) {
+    const $ = reactCompilerRuntime.c(15);
+    const {
+      groupName,
+      children,
+      disabled
+    } = t0;
     let t1;
-    if ($[0] !== userConfigurationPersistence?.favouritePaths) {
-      t1 = userConfigurationPersistence?.favouritePaths ?? [];
-      $[0] = userConfigurationPersistence?.favouritePaths;
-      $[1] = t1;
+    if ($[0] !== disabled || $[1] !== groupName) {
+      t1 = {
+        id: groupName,
+        animateLayoutChanges,
+        disabled
+      };
+      $[0] = disabled;
+      $[1] = groupName;
+      $[2] = t1;
     } else {
-      t1 = $[1];
+      t1 = $[2];
     }
-    let T0;
+    const {
+      attributes,
+      listeners: listeners2,
+      setNodeRef,
+      transform,
+      transition,
+      isDragging
+    } = sortable.useSortable(t1);
     let t2;
-    let t3;
+    if ($[3] !== transform) {
+      t2 = transform ? utilities.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 = ui.Collapse;
-      t4 = favouriteCollections.length > 0;
-      t2 = "flex flex-row flex-wrap gap-2 pb-2 min-h-[32px]";
-      t3 = favouriteCollections.map(_temp$d);
-      $[2] = navigationController.topLevelNavigation?.navigationEntries;
-      $[3] = t1;
-      $[4] = T0;
+    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__ */ jsxRuntime.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__ */ jsxRuntime.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] = React.useState(null);
+    const [activeIsGroup, setActiveIsGroup] = React.useState(false);
+    const [currentDraggingGroupId, setCurrentDraggingGroupId] = React.useState(null);
+    const [dndKitActiveNode, setDndKitActiveNode] = React.useState(null);
+    const [isDraggingCardOnly, setIsDraggingCardOnly] = React.useState(false);
+    const [dialogOpenForGroup, setDialogOpenForGroup] = React.useState(null);
+    const [isHoveringNewGroupDropZone, setIsHoveringNewGroupDropZone] = React.useState(false);
+    const interimItemsRef = React.useRef(null);
+    React.useEffect(() => {
+      interimItemsRef.current = dndItems;
+    }, [dndItems]);
+    const mouseSensor = core.useSensor(core.MouseSensor, {
+      activationConstraint: {
+        distance: 10
+      }
+    });
+    const touchSensor = core.useSensor(core.TouchSensor, {
+      activationConstraint: {
+        delay: 150,
+        tolerance: 5
+      }
+    });
+    const keyboardSensor = core.useSensor(core.KeyboardSensor);
+    const sensors = core.useSensors(mouseSensor, touchSensor, keyboardSensor);
+    const dndContainers = dndItems.map((g) => g.name);
+    const findDndContainer = React.useCallback((id) => {
+      if (!id) return void 0;
+      const group = dndItems.find((g_0) => g_0.name === id);
+      if (group) return group.name;
+      for (const g_1 of dndItems) {
+        if (g_1.entries.some((e) => e.url === id)) return g_1.name;
+      }
+      return void 0;
+    }, [dndItems]);
+    const lastOverId = React.useRef(null);
+    const recentlyMovedToNewContainer = React.useRef(false);
+    const collisionDetection = React.useCallback((args) => {
+      if (disabled || !activeId) return [];
+      if (activeIsGroup) {
+        const groups = args.droppableContainers.filter((c) => dndItems.some((g_2) => g_2.name === c.id));
+        if (!groups.length) return [];
+        return core.closestCenter({
+          ...args,
+          droppableContainers: groups
+        });
+      }
+      const pointer = core.pointerWithin(args);
+      if (pointer.length) {
+        const zone = pointer.find((c_0) => c_0.id === "new-group-drop-zone");
+        if (zone) return [zone];
+        const container = pointer.find((c_1) => dndItems.some((g_3) => g_3.name === c_1.id));
+        if (container) {
+          const itemsIn = dndItems.find((g_4) => g_4.name === container.id)?.entries;
+          if (itemsIn?.length) {
+            const closest = core.closestCorners({
+              ...args,
+              droppableContainers: args.droppableContainers.filter((c_2) => itemsIn.some((e_0) => e_0.url === c_2.id))
+            });
+            if (closest.length) return closest;
+          }
+          return [container];
+        }
+        const first = core.getFirstCollision(pointer, "id");
+        if (first) return [{
+          id: first
+        }];
+      }
+      const rects = core.rectIntersection(args);
+      const zoneRect = rects.find((c_3) => c_3.id === "new-group-drop-zone");
+      if (zoneRect) return [zoneRect];
+      let overId = core.getFirstCollision(rects, "id");
+      if (overId != null) {
+        const overIsContainer = dndItems.some((g_5) => g_5.name === overId);
+        if (overIsContainer) {
+          const itemsIn_0 = dndItems.find((g_6) => g_6.name === overId)?.entries;
+          if (itemsIn_0?.length) {
+            const closestItem = core.closestCorners({
+              ...args,
+              droppableContainers: args.droppableContainers.filter((c_4) => itemsIn_0.some((e_1) => e_1.url === c_4.id))
+            })[0]?.id;
+            if (closestItem) overId = closestItem;
+          }
+        }
+        lastOverId.current = overId;
+        return [{
+          id: overId
+        }];
+      }
+      if (recentlyMovedToNewContainer.current && lastOverId.current && !activeIsGroup) return [{
+        id: lastOverId.current
+      }];
+      return [];
+    }, [activeId, dndItems, disabled, activeIsGroup]);
+    const handleDragStart = ({
+      active
+    }) => {
+      setDndKitActiveNode(active);
+      if (disabled) return;
+      const isGroup = dndItems.some((g_7) => g_7.name === active.id);
+      if (!active.data.current) active.data.current = {};
+      active.data.current.type = isGroup ? "group" : "item";
+      setActiveId(active.id);
+      setActiveIsGroup(isGroup);
+      setIsDraggingCardOnly(!isGroup);
+      if (isGroup) setCurrentDraggingGroupId(active.id);
+      recentlyMovedToNewContainer.current = false;
+    };
+    const handleDragOver = ({
+      active: active_0,
+      over
+    }) => {
+      if (disabled || !over) return;
+      const activeIdNow = active_0.id;
+      const overIdNow = over.id;
+      if (activeIdNow === overIdNow) return;
+      if (activeIsGroup) return;
+      const activeCont = findDndContainer(activeIdNow);
+      const overCont = findDndContainer(overIdNow);
+      if (!activeCont) return;
+      if (overCont && activeCont !== overCont) {
+        recentlyMovedToNewContainer.current = true;
+        const newState = cloneItemsForDnd(dndItems);
+        const srcIdx = newState.findIndex((g_8) => g_8.name === activeCont);
+        const tgtIdx = newState.findIndex((g_9) => g_9.name === overCont);
+        if (srcIdx === -1 || tgtIdx === -1) return;
+        const src = newState[srcIdx];
+        const tgt = newState[tgtIdx];
+        const idxInSrc = src.entries.findIndex((e_2) => e_2.url === activeIdNow);
+        if (idxInSrc === -1) return;
+        const [moved] = src.entries.splice(idxInSrc, 1);
+        tgt.entries.push(moved);
+        interimItemsRef.current = newState;
+        setDndItems(newState);
+      } else if (activeCont === overCont) {
+        recentlyMovedToNewContainer.current = false;
+      }
+    };
+    const handleDragEnd = ({
+      active: active_1,
+      over: over_0
+    }) => {
+      if (disabled || !over_0) {
+        resetDragState();
+        return;
+      }
+      const activeIdNow_0 = active_1.id;
+      const overIdNow_0 = over_0.id;
+      if (activeIsGroup) {
+        if (activeIdNow_0 !== overIdNow_0 && dndItems.some((g_12) => g_12.name === overIdNow_0)) {
+          const from = dndItems.findIndex((g_10) => g_10.name === activeIdNow_0);
+          const to = dndItems.findIndex((g_11) => g_11.name === overIdNow_0);
+          if (from !== -1 && to !== -1) {
+            const newState_0 = sortable.arrayMove(dndItems, from, to);
+            setDndItems(newState_0);
+            onPersist?.(newState_0);
+            onGroupMoved?.(activeIdNow_0, from, to);
+          }
+        }
+      } else {
+        const activeCont_0 = findDndContainer(activeIdNow_0);
+        if (overIdNow_0 === "new-group-drop-zone") {
+          if (activeCont_0) {
+            const newState_1 = cloneItemsForDnd(dndItems);
+            const srcIdx_0 = newState_1.findIndex((g_13) => g_13.name === activeCont_0);
+            if (srcIdx_0 !== -1) {
+              const src_0 = newState_1[srcIdx_0];
+              const idxInSrc_0 = src_0.entries.findIndex((e_3) => e_3.url === activeIdNow_0);
+              if (idxInSrc_0 !== -1) {
+                const [dragged] = src_0.entries.splice(idxInSrc_0, 1);
+                if (src_0.entries.length === 0) newState_1.splice(srcIdx_0, 1);
+                let tentative = "New Group";
+                let counter = 1;
+                while (newState_1.some((g_14) => g_14.name === tentative)) tentative = `New Group ${counter++}`;
+                newState_1.push({
+                  name: tentative,
+                  entries: [dragged]
+                });
+                setDndItems(newState_1);
+                onPersist?.(newState_1);
+                setDialogOpenForGroup(tentative);
+                onNewGroupDrop?.();
+              }
+            }
+          }
+        } else {
+          const overCont_0 = findDndContainer(overIdNow_0);
+          if (activeCont_0 === overCont_0) {
+            const grpIdx = dndItems.findIndex((g_15) => g_15.name === activeCont_0);
+            if (grpIdx !== -1) {
+              const group_0 = dndItems[grpIdx];
+              const oldIdx = group_0.entries.findIndex((e_4) => e_4.url === activeIdNow_0);
+              let newIdx = group_0.entries.findIndex((e_5) => e_5.url === overIdNow_0);
+              if (newIdx === -1 && overIdNow_0 === activeCont_0) newIdx = group_0.entries.length - 1;
+              if (oldIdx !== -1 && newIdx !== -1 && oldIdx !== newIdx) {
+                const reordered = sortable.arrayMove(group_0.entries, oldIdx, newIdx);
+                const newState_2 = [...dndItems];
+                newState_2[grpIdx] = {
+                  ...group_0,
+                  entries: reordered
+                };
+                setDndItems(newState_2);
+                onPersist?.(newState_2);
+              }
+            }
+          } else if (recentlyMovedToNewContainer.current && interimItemsRef.current) {
+            onPersist?.(interimItemsRef.current);
+          }
+          onCardMovedBetweenGroups?.(dndItems.flatMap((g_16) => g_16.entries).find((e_6) => e_6.url === activeIdNow_0));
+        }
+      }
+      resetDragState();
+    };
+    const resetDragState = () => {
+      setDndKitActiveNode(null);
+      setActiveId(null);
+      setActiveIsGroup(false);
+      setCurrentDraggingGroupId(null);
+      setIsDraggingCardOnly(false);
+      recentlyMovedToNewContainer.current = false;
+    };
+    const handleDragCancel = () => resetDragState();
+    const handleRenameGroup = (oldName, newName) => {
+      setDndItems((current) => {
+        const idx = current.findIndex((g_17) => g_17.name === oldName);
+        if (idx === -1) return current;
+        if (current.some((g_18) => g_18.name === newName && g_18.name !== oldName)) return current;
+        const updated = [...current];
+        updated[idx] = {
+          ...updated[idx],
+          name: newName
+        };
+        onPersist?.(updated);
+        return updated;
+      });
+    };
+    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 $ = reactCompilerRuntime.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
+    } = core.useDroppable(t1);
+    const [isVisible, setIsVisible] = React.useState(false);
+    let t2;
+    if ($[2] !== disabled) {
+      t2 = {
+        onDragStart(t32) {
+          const {
+            active
+          } = t32;
+          if (disabled) {
+            return;
+          }
+          const tp = active.data.current?.type;
+          setIsVisible(tp === "item");
+        },
+        onDragEnd() {
+          setIsVisible(false);
+        },
+        onDragCancel() {
+          setIsVisible(false);
+        }
+      };
+      $[2] = disabled;
+      $[3] = t2;
+    } else {
+      t2 = $[3];
+    }
+    core.useDndMonitor(t2);
+    let t3;
+    let t4;
+    if ($[4] !== isOver || $[5] !== isVisible || $[6] !== setIsHovering) {
+      t3 = () => {
+        setIsHovering(isOver && isVisible);
+      };
+      t4 = [isOver, isVisible, setIsHovering];
+      $[4] = isOver;
+      $[5] = isVisible;
+      $[6] = setIsHovering;
+      $[7] = t3;
+      $[8] = t4;
+    } else {
+      t3 = $[7];
+      t4 = $[8];
+    }
+    React.useEffect(t3, t4);
+    if (!isVisible || disabled) {
+      return null;
+    }
+    const t5 = isOver ? "bg-surface-accent-100 dark:bg-surface-accent-800 border-surface-300 dark:border-surface-600" : "bg-surface-50 dark:bg-surface-900 border-surface-200 dark:border-surface-700";
     let t6;
-    if ($[13] !== T0 || $[14] !== t4 || $[15] !== t5) {
-      t6 = /* @__PURE__ */ jsxRuntime.jsx(T0, { in: t4, children: t5 });
-      $[13] = T0;
-      $[14] = t4;
+    if ($[9] !== t5) {
+      t6 = ui.cls("fixed right-8 top-1/2 -translate-y-1/2 w-[200px] h-[120px] border border-dashed rounded-lg flex items-center justify-center transition-all", t5);
+      $[9] = t5;
+      $[10] = t6;
+    } else {
+      t6 = $[10];
+    }
+    let t7;
+    if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+      t7 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center p-4", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block font-medium text-sm", children: "Drop here to create a new group" }) });
+      $[11] = t7;
+    } else {
+      t7 = $[11];
+    }
+    let t8;
+    if ($[12] !== setNodeRef || $[13] !== t6) {
+      t8 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setNodeRef, className: t6, children: t7 });
+      $[12] = setNodeRef;
+      $[13] = t6;
+      $[14] = t8;
+    } else {
+      t8 = $[14];
+    }
+    return t8;
+  }
+  function RenameGroupDialog(t0) {
+    const $ = reactCompilerRuntime.c(41);
+    const {
+      open,
+      initialName,
+      existingGroupNames,
+      onClose,
+      onRename
+    } = t0;
+    const [name, setName] = React.useState(initialName);
+    const [error, setError] = React.useState(null);
+    const inputRef = React.useRef(null);
+    let t1;
+    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];
+    }
+    React.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__ */ jsxRuntime.jsx(ui.DialogTitle, { children: "Rename Group" });
       $[16] = t6;
     } else {
       t6 = $[16];
     }
-    return t6;
-  }
-  function _temp$d(entry_0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(NavigationChip, { entry: entry_0 }, entry_0.path);
-  }
-  const scrollsMap = {};
-  function useRestoreScroll() {
-    const location = reactRouterDom.useLocation();
-    const containerRef = React.useRef(null);
-    const [scroll, setScroll] = React.useState(0);
-    const [direction, setDirection] = React.useState("down");
-    const handleScroll = React.useCallback(() => {
-      if (!containerRef.current || !location.key) return;
-      scrollsMap[location.key] = containerRef.current.scrollTop;
-      setScroll(containerRef.current.scrollTop);
-      setDirection(containerRef.current.scrollTop > scroll ? "down" : "up");
-    }, [containerRef, location.key, scroll]);
-    React.useEffect(() => {
-      const container = containerRef.current;
-      if (!container) return;
-      container.addEventListener("scroll", handleScroll, {
-        passive: true
-      });
-      return () => {
-        if (container) container.removeEventListener("scroll", handleScroll);
-      };
-    }, [containerRef, handleScroll, location]);
-    React.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__ */ jsxRuntime.jsx(ui.TextField, { inputRef, label: "Group Name", value: name, onChange: handleNameChange, onKeyDown: handleKeyDown, error: t7, "aria-describedby": t8 });
+      $[17] = handleKeyDown;
+      $[18] = handleNameChange;
+      $[19] = name;
+      $[20] = t7;
+      $[21] = t8;
+      $[22] = t9;
+    } else {
+      t9 = $[22];
+    }
+    let t10;
+    if ($[23] !== error) {
+      t10 = error && /* @__PURE__ */ jsxRuntime.jsx("p", { id: "group-name-error", style: {
+        display: "none"
+      }, children: error });
+      $[23] = error;
+      $[24] = t10;
+    } else {
+      t10 = $[24];
+    }
+    let t11;
+    if ($[25] !== t10 || $[26] !== t9) {
+      t11 = /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogContent, { children: [
+        t9,
+        t10
+      ] });
+      $[25] = t10;
+      $[26] = t9;
+      $[27] = t11;
+    } else {
+      t11 = $[27];
+    }
+    let t12;
+    if ($[28] !== onClose) {
+      t12 = /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: onClose, 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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsxs(ui.DialogActions, { children: [
+        t12,
+        t14
+      ] });
+      $[33] = t12;
+      $[34] = t14;
+      $[35] = t15;
+    } else {
+      t15 = $[35];
+    }
+    let t16;
+    if ($[36] !== onClose || $[37] !== open || $[38] !== t11 || $[39] !== t15) {
+      t16 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Dialog, { open, onOpenChange: onClose, children: [
+        t6,
+        t11,
+        t15
+      ] });
+      $[36] = onClose;
+      $[37] = open;
+      $[38] = t11;
+      $[39] = t15;
+      $[40] = t16;
+    } else {
+      t16 = $[40];
+    }
+    return t16;
   }
-  function DefaultHomePage(t0) {
-    const $ = reactCompilerRuntime.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 = React.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 = React.useRef(null);
     const [filteredUrls, setFilteredUrls] = React.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 = React.useMemo(() => {
+      return filteredUrls ? rawNavigationEntries.filter((e) => filteredUrls.includes(e.url)) : rawNavigationEntries;
+    }, [filteredUrls, rawNavigationEntries]);
+    React.useEffect(() => {
+      fuse.current = new Fuse(rawNavigationEntries, {
+        keys: ["name", "description", "group", "path"]
+      });
+    }, [rawNavigationEntries]);
+    const updateSearch = React.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] = React.useState([]);
+    const [adminGroupData, setAdminGroupData] = React.useState(null);
+    const processedGroups = React.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];
-    }
-    React.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]);
+    React.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" ? [modifiers.restrictToVerticalAxis, modifiers.restrictToWindowEdges] : [modifiers.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__ */ jsxRuntime.jsx(NavigationGroup, { group: section.title, children: section.children }, `plugin_section_${plugin_0.key}`);
-          });
-          $[29] = context;
-          $[30] = customizationController.plugins;
-          $[31] = t143;
-        } else {
-          t143 = $[31];
-        }
-        let t153;
-        if ($[32] !== t143) {
-          t153 = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: t143 });
-          $[32] = t143;
-          $[33] = t153;
-        } else {
-          t153 = $[33];
-        }
-        additionalPluginSections = t153;
-        let t162;
-        if ($[34] !== customizationController.plugins) {
-          t162 = customizationController.plugins.filter(_temp5$2).map(_temp6$2);
-          $[34] = customizationController.plugins;
-          $[35] = t162;
-        } else {
-          t162 = $[35];
-        }
-        let t172;
-        if ($[36] !== t162) {
-          t172 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: t162 });
-          $[36] = t162;
-          $[37] = t172;
-        } else {
-          t172 = $[37];
-        }
-        additionalPluginChildrenStart = t172;
-        let t18;
-        if ($[38] !== customizationController.plugins) {
-          t18 = customizationController.plugins.filter(_temp7$1).map(_temp8);
-          $[38] = customizationController.plugins;
-          $[39] = t18;
-        } else {
-          t18 = $[39];
-        }
-        let t19;
-        if ($[40] !== t18) {
-          t19 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: t18 });
-          $[40] = t18;
-          $[41] = t19;
-        } else {
-          t19 = $[41];
-        }
-        additionalPluginChildrenEnd = t19;
-      }
-      t11 = "home_page";
-      t12 = containerRef;
-      t13 = "py-2 overflow-auto h-full w-full";
-      T0 = ui.Container;
-      t5 = "6xl";
-      const t142 = direction === "down" ? -84 : 0;
-      let t152;
-      if ($[42] !== t142) {
-        t152 = {
-          top: t142
-        };
-        $[42] = t142;
-        $[43] = t152;
-      } else {
-        t152 = $[43];
-      }
-      let t16;
-      if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
-        t16 = /* @__PURE__ */ jsxRuntime.jsx(ui.SearchBar, { onTextSearch: updateSearchResults, placeholder: "Search collections", large: false, autoFocus: true, innerClassName: "w-full", className: "w-full flex-grow" });
-        $[44] = t16;
-      } else {
-        t16 = $[44];
-      }
-      if ($[45] !== additionalActions || $[46] !== t152) {
-        t6 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full sticky py-4 transition-all duration-400 ease-in-out top-0 z-10 flex flex-row gap-4", style: t152, children: [
-          t16,
+    if (customizationController.plugins) {
+      const sectionProps = {
+        context
+      };
+      additionalPluginSections = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: customizationController.plugins.filter((p_0) => p_0.homePage?.includeSection).map((plugin) => {
+        const section = plugin.homePage.includeSection(sectionProps);
+        return /* @__PURE__ */ jsxRuntime.jsx(NavigationGroup, { group: section.title, children: section.children }, `plugin_section_${plugin.key}`);
+      }) });
+      additionalPluginChildrenStart = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: customizationController.plugins.filter((p_1) => p_1.homePage?.additionalChildrenStart).map((plugin_0, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: plugin_0.homePage.additionalChildrenStart }, `plugin_children_start_${i}`)) });
+      additionalPluginChildrenEnd = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: customizationController.plugins.filter((p_2) => p_2.homePage?.additionalChildrenEnd).map((plugin_1, i_0) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: plugin_1.homePage.additionalChildrenEnd }, `plugin_children_end_${i_0}`)) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: "py-2 overflow-auto h-full w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { maxWidth: "6xl", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full sticky py-4 transition-all duration-400 ease-in-out top-0 z-10 flex flex-row gap-4", style: {
+          top: direction === "down" ? -84 : 0
+        }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.SearchBar, { onTextSearch: updateSearch, placeholder: "Search collections", autoFocus: true, innerClassName: "w-full", className: "w-full flex-grow" }),
           additionalActions
-        ] });
-        $[45] = additionalActions;
-        $[46] = t152;
-        $[47] = t6;
-      } else {
-        t6 = $[47];
-      }
-      if ($[48] !== performingSearch) {
-        t7 = /* @__PURE__ */ jsxRuntime.jsx(FavouritesView, { hidden: performingSearch });
-        $[48] = performingSearch;
-        $[49] = t7;
-      } else {
-        t7 = $[49];
-      }
-      t8 = additionalChildrenStart;
-      t9 = additionalPluginChildrenStart;
-      let t17;
-      if ($[50] !== context || $[51] !== customizationController.plugins || $[52] !== filteredNavigationEntries || $[53] !== performingSearch) {
-        t17 = (group_0, index_0) => {
-          const AdditionalCards = [];
-          const actionProps = {
-            group: group_0,
-            context
-          };
-          if (customizationController.plugins) {
-            customizationController.plugins.forEach((plugin_5) => {
-              if (plugin_5.homePage?.AdditionalCards) {
-                AdditionalCards.push(...toArray(plugin_5.homePage?.AdditionalCards));
-              }
-            });
-          }
-          const thisGroupCollections = filteredNavigationEntries.filter((entry_0) => entry_0.group === group_0 || !entry_0.group && group_0 === void 0);
-          if (thisGroupCollections.length === 0 && (AdditionalCards.length === 0 || performingSearch)) {
-            return null;
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(FavouritesView, { hidden: performingSearch }),
+        additionalChildrenStart,
+        additionalPluginChildrenStart,
+        /* @__PURE__ */ jsxRuntime.jsxs(core.DndContext, { sensors, collisionDetection, measuring: {
+          droppable: {
+            strategy: core.MeasuringStrategy.Always,
+            frequency: 500
           }
-          return /* @__PURE__ */ jsxRuntime.jsx(NavigationGroup, { group: group_0, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: [
-            thisGroupCollections.map((entry_1) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-1", children: /* @__PURE__ */ jsxRuntime.jsx(NavigationCardBinding, { ...entry_1, onClick: () => {
-              let event;
-              if (entry_1.type === "collection") {
-                event = "home_navigate_to_collection";
-              } else {
-                if (entry_1.type === "view") {
-                  event = "home_navigate_to_view";
-                } else {
-                  if (entry_1.type === "admin") {
-                    event = "home_navigate_to_admin_view";
-                  } else {
-                    event = "unmapped_event";
-                  }
-                }
-              }
-              context.analyticsController?.onAnalyticsEvent?.(event, {
-                path: entry_1.path
-              });
-            } }) }, `nav_${entry_1.group}_${entry_1.path}_${entry_1.name}`)),
-            group_0?.toLowerCase() !== "admin" && AdditionalCards && AdditionalCards.map((AdditionalCard, i_2) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AdditionalCard, { ...actionProps }) }, `nav_${group_0}_add_${i_2}`))
-          ] }) }, `plugin_section_${group_0}`);
-        };
-        $[50] = context;
-        $[51] = customizationController.plugins;
-        $[52] = filteredNavigationEntries;
-        $[53] = performingSearch;
-        $[54] = t17;
-      } else {
-        t17 = $[54];
-      }
-      t10 = allGroups.map(t17);
-      $[7] = additionalActions;
-      $[8] = additionalChildrenStart;
-      $[9] = containerRef;
-      $[10] = context;
-      $[11] = customizationController.plugins;
-      $[12] = direction;
-      $[13] = filteredNavigationEntries;
-      $[14] = filteredUrls;
-      $[15] = groups;
-      $[16] = performingSearch;
-      $[17] = T0;
-      $[18] = additionalPluginChildrenEnd;
-      $[19] = additionalPluginSections;
-      $[20] = t10;
-      $[21] = t11;
-      $[22] = t12;
-      $[23] = t13;
-      $[24] = t5;
-      $[25] = t6;
-      $[26] = t7;
-      $[27] = t8;
-      $[28] = t9;
-    } else {
-      T0 = $[17];
-      additionalPluginChildrenEnd = $[18];
-      additionalPluginSections = $[19];
-      t10 = $[20];
-      t11 = $[21];
-      t12 = $[22];
-      t13 = $[23];
-      t5 = $[24];
-      t6 = $[25];
-      t7 = $[26];
-      t8 = $[27];
-      t9 = $[28];
-    }
-    let t14;
-    if ($[55] !== T0 || $[56] !== additionalChildrenEnd || $[57] !== additionalPluginChildrenEnd || $[58] !== additionalPluginSections || $[59] !== t10 || $[60] !== t5 || $[61] !== t6 || $[62] !== t7 || $[63] !== t8 || $[64] !== t9) {
-      t14 = /* @__PURE__ */ jsxRuntime.jsxs(T0, { maxWidth: t5, children: [
-        t6,
-        t7,
-        t8,
-        t9,
-        t10,
+        }, onDragStart, onDragOver, onDragEnd, onDragCancel, modifiers: dndModifiers, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: containers, strategy: sortable.verticalListSortingStrategy, children: items.map((groupData) => {
+            const groupKey = groupData.name;
+            const entriesInGroup = groupData.entries;
+            const AdditionalCards = [];
+            customizationController.plugins?.forEach((p_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__ */ jsxRuntime.jsx(SortableNavigationGroup, { groupName: groupKey, disabled: dndDisabled, children: /* @__PURE__ */ jsxRuntime.jsx(NavigationGroup, { group: groupKey === DEFAULT_GROUP_NAME ? void 0 : groupKey, minimised: draggingGroupId === groupKey && !isDraggingCardOnly, isPotentialCardDropTarget: isDraggingCardOnly, dndDisabled, onEditGroup: () => {
+              if (dndDisabled) return;
+              setDialogOpenForGroup(groupKey);
+            }, children: /* @__PURE__ */ jsxRuntime.jsx(NavigationGroupDroppable, { id: groupKey, itemIds: entriesInGroup.map((e_4) => e_4.url), isPotentialCardDropTarget: isDraggingCardOnly, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 ", children: [
+              entriesInGroup.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(SortableNavigationCard, { entry, onClick: () => {
+                let event = "unmapped_event";
+                if (entry.type === "collection") event = "home_navigate_to_collection";
+                else if (entry.type === "view") event = "home_navigate_to_view";
+                else if (entry.type === "admin") event = "home_navigate_to_admin_view";
+                context.analyticsController?.onAnalyticsEvent?.(event, {
+                  path: entry.path
+                });
+              } }, entry.url)),
+              !performingSearch && groupKey.toLowerCase() !== ADMIN_GROUP_NAME.toLowerCase() && AdditionalCards.map((C, i_1) => /* @__PURE__ */ jsxRuntime.jsx(C, { ...actionProps }, `extra_${groupKey}_${i_1}`))
+            ] }) }) }) }, groupKey);
+          }) }, JSON.stringify(containers)),
+          /* @__PURE__ */ jsxRuntime.jsx(NewGroupDropZone, { disabled: dndDisabled, setIsHovering: setIsHoveringNewGroupDropZone }),
+          /* @__PURE__ */ jsxRuntime.jsx(core.DragOverlay, { adjustScale: false, dropAnimation, children: activeGroupData && draggingGroupId === activeGroupData.name ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg bg-transparent", style: {
+            padding: 0,
+            margin: 0
+          }, children: /* @__PURE__ */ jsxRuntime.jsx(NavigationGroup, { group: activeGroupData.name === DEFAULT_GROUP_NAME ? void 0 : activeGroupData.name, isPreview: false, minimised: true }) }) : activeItemForOverlay ? /* @__PURE__ */ jsxRuntime.jsx(NavigationCardBinding, { ...activeItemForOverlay, shrink: isHoveringNewGroupDropZone }) : null })
+        ] }),
+        !performingSearch && adminGroupData && /* @__PURE__ */ jsxRuntime.jsx(NavigationGroup, { group: adminGroupData.name, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 ", children: adminGroupData.entries.map((entry_0) => /* @__PURE__ */ jsxRuntime.jsx(NavigationCardBinding, { ...entry_0, onClick: () => {
+          let event_0 = "unmapped_event";
+          if (entry_0.type === "collection") event_0 = "home_navigate_to_collection";
+          else if (entry_0.type === "view") event_0 = "home_navigate_to_view";
+          else if (entry_0.type === "admin") event_0 = "home_navigate_to_admin_view";
+          context.analyticsController?.onAnalyticsEvent?.(event_0, {
+            path: entry_0.path
+          });
+        } }, entry_0.url)) }) }),
         additionalPluginSections,
         additionalPluginChildrenEnd,
         additionalChildrenEnd
-      ] });
-      $[55] = T0;
-      $[56] = additionalChildrenEnd;
-      $[57] = additionalPluginChildrenEnd;
-      $[58] = additionalPluginSections;
-      $[59] = t10;
-      $[60] = t5;
-      $[61] = t6;
-      $[62] = t7;
-      $[63] = t8;
-      $[64] = t9;
-      $[65] = t14;
-    } else {
-      t14 = $[65];
-    }
-    let t15;
-    if ($[66] !== t11 || $[67] !== t12 || $[68] !== t13 || $[69] !== t14) {
-      t15 = /* @__PURE__ */ jsxRuntime.jsx("div", { id: t11, ref: t12, className: t13, children: t14 });
-      $[66] = t11;
-      $[67] = t12;
-      $[68] = t13;
-      $[69] = t14;
-      $[70] = t15;
-    } else {
-      t15 = $[70];
-    }
-    return t15;
-  }
-  function _temp8(plugin_4, i_1) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { children: plugin_4.homePage.additionalChildrenEnd }, `plugin_children_start_${i_1}`);
-  }
-  function _temp7$1(plugin_3) {
-    return plugin_3.homePage?.additionalChildrenEnd;
-  }
-  function _temp6$2(plugin_2, i_0) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { children: plugin_2.homePage.additionalChildrenStart }, `plugin_children_start_${i_0}`);
-  }
-  function _temp5$2(plugin_1) {
-    return plugin_1.homePage?.additionalChildrenStart;
-  }
-  function _temp4$2(plugin) {
-    return plugin.homePage?.includeSection;
-  }
-  function _temp3$3(e_1) {
-    return !e_1.group;
-  }
-  function _temp2$5(entry) {
-    return entry.group;
-  }
-  function _temp$c(e_0) {
-    return e_0.item.url;
+      ] }),
+      dialogOpenForGroup && /* @__PURE__ */ jsxRuntime.jsx(RenameGroupDialog, { open: true, initialName: dialogOpenForGroup, existingGroupNames: items.map((g_9) => g_9.name).filter((n) => n !== dialogOpenForGroup), onClose: () => setDialogOpenForGroup(null), onRename: (newName) => {
+        handleRenameGroup(dialogOpenForGroup, newName);
+        setDialogOpenForGroup(null);
+      } })
+    ] });
   }
   function EntityCollectionViewActions(t0) {
     const $ = reactCompilerRuntime.c(41);
@@ -13616,11 +14401,11 @@
     if (selectionEnabled) {
       let t42;
       if ($[12] !== largeLayout || $[13] !== multipleDeleteEnabled || $[14] !== onMultipleDeleteClick || $[15] !== selectedEntities?.length) {
-        t42 = largeLayout ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "text", disabled: !selectedEntities?.length || !multipleDeleteEnabled, startIcon: /* @__PURE__ */ jsxRuntime.jsx(ui.DeleteIcon, {}), onClick: onMultipleDeleteClick, color: "primary", className: "lg:w-20", children: [
+        t42 = largeLayout ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "text", disabled: !selectedEntities?.length || !multipleDeleteEnabled, startIcon: /* @__PURE__ */ jsxRuntime.jsx(ui.DeleteIcon, { size: "small" }), onClick: onMultipleDeleteClick, color: "primary", className: "lg:w-20", children: [
           "(",
           selectedEntities?.length,
           ")"
-        ] }) : /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { color: "primary", disabled: !selectedEntities?.length || !multipleDeleteEnabled, onClick: onMultipleDeleteClick, children: /* @__PURE__ */ jsxRuntime.jsx(ui.DeleteIcon, {}) });
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", color: "primary", disabled: !selectedEntities?.length || !multipleDeleteEnabled, onClick: onMultipleDeleteClick, children: /* @__PURE__ */ jsxRuntime.jsx(ui.DeleteIcon, { size: "small" }) });
         $[12] = largeLayout;
         $[13] = multipleDeleteEnabled;
         $[14] = onMultipleDeleteClick;
@@ -13932,8 +14717,10 @@
     return !ele || ele === document.body ? document.body : isScrollable(ele) ? ele : getScrollableParent(ele.parentNode);
   };
   function EntityFormActions(t0) {
-    const $ = reactCompilerRuntime.c(12);
+    const $ = reactCompilerRuntime.c(16);
     const {
+      fullPath,
+      fullIdPath,
       collection,
       entity,
       layout,
@@ -13942,13 +14729,17 @@
       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] !== formex2.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] !== formex2.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,
@@ -13958,8 +14749,12 @@
         disabled,
         status,
         pluginActions,
-        openEntityMode
+        openEntityMode,
+        navigateBack,
+        formContext
       }) : buildSideActions$1({
+        fullPath,
+        fullIdPath,
         savingError,
         entity,
         collection,
@@ -13969,28 +14764,36 @@
         disabled,
         status,
         pluginActions,
-        openEntityMode
+        openEntityMode,
+        navigateBack,
+        formContext
       });
       $[0] = collection;
       $[1] = context;
       $[2] = disabled;
       $[3] = entity;
-      $[4] = formex2.isSubmitting;
-      $[5] = layout;
-      $[6] = openEntityMode;
-      $[7] = pluginActions;
-      $[8] = savingError;
-      $[9] = sideEntityController;
-      $[10] = status;
-      $[11] = t1;
+      $[4] = formContext;
+      $[5] = formex2.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,
@@ -13999,23 +14802,29 @@
     disabled,
     status,
     pluginActions,
-    openEntityMode
+    openEntityMode,
+    navigateBack,
+    formContext
   }) {
     return /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogActions, { position: "absolute", children: [
       savingError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { color: "error", children: savingError.message }) }),
       entity && (formActions ?? []).length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow flex overflow-auto no-scrollbar", children: (formActions ?? []).map((action) => /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ui.Button, { variant: "text", disabled: disabled || isSubmitting, type: "reset", children: status === "existing" ? "Discard" : "Clear" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", disabled: disabled || isSubmitting, color: "primary", type: "reset", children: status === "existing" ? "Discard" : "Clear" }),
       /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "filled", color: "primary", type: "submit", disabled: disabled || isSubmitting, children: [
         status === "existing" && "Save",
         status === "copy" && "Create copy",
@@ -14027,6 +14836,9 @@
     savingError,
     entity,
     formActions,
+    fullPath,
+    fullIdPath,
+    openEntityMode,
     collection,
     context,
     sideEntityController,
@@ -14048,6 +14860,7 @@
   }
   function EntityForm({
     path,
+    fullIdPath,
     entityId: entityIdProp,
     collection,
     onValuesModified,
@@ -14073,6 +14886,15 @@
     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 = React.useCallback(() => {
+      if (openEntityMode === "side_panel") {
+        sideEntityController.close();
+      } else {
+        window.history.back();
+      }
+    }, []);
     const authController = useAuthController();
     const [status, setStatus] = React.useState(initialStatus);
     const updateStatus = (status_0) => {
@@ -14323,14 +15145,15 @@
     const pluginActions = [];
     const plugins = customizationController.plugins;
     const actionsDisabled = disabled || formex$1.isSubmitting || status === "existing" && !formex$1.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
@@ -14442,13 +15265,15 @@
     const formView = /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       !Builder && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full py-2 flex flex-col items-start my-4 lg:my-6", children: [
         /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { className: "my-4 flex-grow line-clamp-1 " + (collection.hideIdFromForm ? "mb-6" : ""), variant: "h4", children: title ?? collection.singularName ?? collection.name }),
-        showEntityPath && /* @__PURE__ */ jsxRuntime.jsx(ui.Alert, { color: "base", className: "w-full", size: "small", children: /* @__PURE__ */ jsxRuntime.jsxs("code", { className: "text-xs select-all text-text-secondary dark:text-text-secondary-dark", children: [
+        !entity?.values && initialStatus === "existing" && /* @__PURE__ */ jsxRuntime.jsx(ui.Alert, { color: "warning", size: "small", outerClassName: "w-full mb-4 text-xs", children: "This entity does not exist in the database" }),
+        showEntityPath && /* @__PURE__ */ jsxRuntime.jsx(ui.Alert, { color: "base", outerClassName: "w-full", size: "small", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.Alert, { color: "info", size: "small", children: "This entity does not exist in the database" }),
       !Builder && !collection.hideIdFromForm && /* @__PURE__ */ jsxRuntime.jsx(CustomIdField, { customId: collection.customId, entityId, status, onChange: setEntityId, error: entityIdError, loading: customIdLoading, entity }),
       entityId && formContext && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-12 flex flex-col gap-8", ref: formRef, children: [
         formFields(),
@@ -14462,7 +15287,7 @@
     if (!resolvedCollection || !path) {
       throw Error("INTERNAL: Collection and path must be defined in form context");
     }
-    const dialogActions = /* @__PURE__ */ jsxRuntime.jsx(EntityFormActionsComponent, { collection: resolvedCollection, path, entity, layout: forceActionsAtTheBottom ? "bottom" : "side", savingError, formex: formex$1, disabled: actionsDisabled, status, pluginActions, openEntityMode, showDefaultActions });
+    const dialogActions = /* @__PURE__ */ jsxRuntime.jsx(EntityFormActionsComponent, { collection: resolvedCollection, path, fullPath: path, fullIdPath, entity, layout: forceActionsAtTheBottom ? "bottom" : "side", savingError, formex: formex$1, disabled: actionsDisabled, status, pluginActions, openEntityMode, showDefaultActions, navigateBack, formContext });
     return /* @__PURE__ */ jsxRuntime.jsx(formex.Formex, { value: formex$1, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: formex$1.handleSubmit, onReset: () => formex$1.resetForm({
       values: getInitialEntityValues(authController, collection, path, status, entity, customizationController.propertyConfigs)
     }), noValidate: true, className: ui.cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", className), children: [
@@ -15152,7 +15977,7 @@
     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 = ui.cls(ui.paperMixin, "relative m-4 border-box flex items-center justify-center", t1, className);
+      t2 = ui.cls(ui.paperMixin, "relative border-box flex items-center justify-center", t1, className);
       $[0] = className;
       $[1] = t1;
       $[2] = t2;
@@ -15317,7 +16142,7 @@
     const resolvedProperty = t6;
     let t7;
     if ($[21] !== minimalistView || $[22] !== property || $[23] !== propertyKey) {
-      t7 = !minimalistView && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(LabelWithIconAndTooltip, { propertyKey, icon: getIconForProperty(property, "small"), required: property.validation?.required, title: property.name, className: "h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5" });
       $[21] = minimalistView;
       $[22] = property;
       $[23] = propertyKey;
@@ -15375,7 +16200,7 @@
     return t12;
   }
   function SortableStorageItem(t0) {
-    const $ = reactCompilerRuntime.c(35);
+    const $ = reactCompilerRuntime.c(34);
     const {
       id,
       entry,
@@ -15413,98 +16238,95 @@
       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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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 = ui.cls("rounded-md m-1");
-      $[28] = t6;
+    let t5;
+    if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+      t5 = ui.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__ */ jsxRuntime.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__ */ jsxRuntime.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) {
@@ -15523,7 +16345,7 @@
     }
   }
   function FileDropComponent(t0) {
-    const $ = reactCompilerRuntime.c(63);
+    const $ = reactCompilerRuntime.c(61);
     const {
       storage,
       disabled,
@@ -15614,7 +16436,7 @@
     }
     const t6 = disabled ? ui.fieldBackgroundDisabledMixin : ui.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;
@@ -15638,107 +16460,103 @@
     } 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 = ui.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 = ui.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__ */ jsxRuntime.jsx("input", { autoFocus, ...t17 });
-      $[29] = autoFocus;
-      $[30] = t17;
-      $[31] = t18;
+    let t16;
+    if ($[27] !== autoFocus || $[28] !== t15) {
+      t16 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: t16, children: [
-        t18,
-        t19
+    let t18;
+    if ($[49] !== t14 || $[50] !== t16 || $[51] !== t17) {
+      t18 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex-grow min-h-[38px] box-border m-2 text-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx("div", { className: "flex-grow min-h-[38px] box-border m-2 text-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsxs("div", { ...t5, className: t11, children: [
-        t20,
-        t22
+    let t21;
+    if ($[56] !== t11 || $[57] !== t18 || $[58] !== t20 || $[59] !== t5) {
+      t21 = /* @__PURE__ */ jsxRuntime.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 {
@@ -16530,6 +17348,92 @@
       /* @__PURE__ */ jsxRuntime.jsx(FieldHelperText, { includeDescription, showError, error, disabled, property })
     ] });
   }
+  function ReferenceAsStringFieldBinding(props) {
+    const $ = reactCompilerRuntime.c(4);
+    if (typeof props.property.reference?.path !== "string") {
+      let t02;
+      if ($[0] !== props) {
+        t02 = /* @__PURE__ */ jsxRuntime.jsx(ReadOnlyFieldBinding, { ...props });
+        $[0] = props;
+        $[1] = t02;
+      } else {
+        t02 = $[1];
+      }
+      return t02;
+    }
+    let t0;
+    if ($[2] !== props) {
+      t0 = /* @__PURE__ */ jsxRuntime.jsx(ReferenceAsStringFieldBindingInternal, { ...props });
+      $[2] = props;
+      $[3] = t0;
+    } else {
+      t0 = $[3];
+    }
+    return t0;
+  }
+  function ReferenceAsStringFieldBindingInternal({
+    propertyKey,
+    value,
+    setValue,
+    error,
+    showError,
+    isSubmitting,
+    disabled,
+    minimalistView,
+    property,
+    includeDescription,
+    size = "medium"
+  }) {
+    if (!property.reference?.path) {
+      throw new Error("Property path is required for ReferenceAsStringFieldBinding");
+    }
+    useClearRestoreValue({
+      property,
+      value,
+      setValue
+    });
+    const navigationController = useNavigationController();
+    const path = property.reference.path;
+    const collection = React.useMemo(() => {
+      return path ? navigationController.getCollection(path) : void 0;
+    }, [path]);
+    const referenceValue = React.useMemo(() => {
+      if (value && path) {
+        return new EntityReference(value, path);
+      }
+      return void 0;
+    }, [value, path]);
+    if (!collection) {
+      throw Error(`Couldn't find the corresponding collection for the path: ${path}`);
+    }
+    const onSingleEntitySelected = React.useCallback((e) => {
+      setValue(e ? e.id : null);
+    }, [setValue]);
+    const referenceDialogController = useReferenceDialog({
+      multiselect: false,
+      path,
+      collection,
+      onSingleEntitySelected,
+      selectedEntityIds: value ? [value] : void 0,
+      forceFilter: property.reference.forceFilter
+    });
+    const onEntryClick = (e_0) => {
+      e_0.preventDefault();
+      referenceDialogController.open();
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      !minimalistView && /* @__PURE__ */ jsxRuntime.jsx(LabelWithIconAndTooltip, { propertyKey, icon: getIconForProperty(property, "small"), required: property.validation?.required, title: property.name, className: "h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5" }),
+      !collection && /* @__PURE__ */ jsxRuntime.jsx(ErrorView, { error: "The specified collection does not exist. Check console" }),
+      collection && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        referenceValue && /* @__PURE__ */ jsxRuntime.jsx(ReferencePreview, { disabled: !path, previewProperties: property.reference?.previewProperties, hover: !disabled, size, onClick: disabled || isSubmitting ? void 0 : onEntryClick, reference: referenceValue, includeEntityLink: property.reference?.includeEntityLink, includeId: property.reference?.includeId }),
+        !value && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "justify-center text-left", children: /* @__PURE__ */ jsxRuntime.jsxs(EntityPreviewContainer, { className: ui.cls("px-6 h-16 text-sm font-medium flex items-center gap-6", disabled || isSubmitting ? "text-surface-accent-500" : "cursor-pointer text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800"), onClick: onEntryClick, size: "medium", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(IconForView, { collectionOrView: collection, className: "text-surface-300 dark:text-surface-600" }),
+          `Edit ${property.name}`.toUpperCase()
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(FieldHelperText, { includeDescription, showError, error, disabled, property })
+    ] });
+  }
   const PropertyFieldBinding = React.memo(PropertyFieldBindingInternal, (a, b) => {
     if (a.propertyKey !== b.propertyKey) {
       return false;
@@ -17772,7 +18676,6 @@
           minimalistView: false,
           autoFocus: internalId === lastAddedId
         };
-        console.debug("Building entry for", index, fieldProps);
         return /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(PropertyFieldBinding, { ...fieldProps, index }) });
       };
       $[4] = context;
@@ -18145,6 +19048,9 @@
     const [fieldVersion, setFieldVersion] = React.useState(0);
     const internalValue = React.useRef(value);
     const onContentChange = React.useCallback((content) => {
+      if (content === value || value === null && content === "") {
+        return;
+      }
       internalValue.current = content;
       setValue(content);
     }, [setValue]);
@@ -19144,11 +20050,12 @@
       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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.Popover, { open: popOverOpen, onOpenChange: setPopOverOpen, enabled: Boolean(collection.description), trigger: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start", children: [
       /* @__PURE__ */ jsxRuntime.jsx(ui.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) => {
@@ -19506,7 +20413,7 @@
     }
     let t4;
     if ($[6] !== onCancel) {
-      t4 = /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", onClick: onCancel, autoFocus: true, children: "Cancel" });
+      t4 = /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { color: "primary", variant: "text", onClick: onCancel, autoFocus: true, children: "Cancel" });
       $[6] = onCancel;
       $[7] = t4;
     } else {
@@ -19552,7 +20459,7 @@
     return t7;
   }
   function FireCMSLogo(t0) {
-    const $ = reactCompilerRuntime.c(9);
+    const $ = reactCompilerRuntime.c(8);
     const {
       width,
       height,
@@ -19562,70 +20469,36 @@
     const t1 = width ?? "100%";
     const t2 = height ?? "100%";
     let t3;
+    let t4;
+    let t5;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-      t3 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("stop", { stopColor: "#FF5B79", offset: "0%" }),
-        /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#FA5574", offset: "28.0930803%" }),
-        /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#EC4C51", offset: "44.7242531%" }),
-        /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#9543C1", offset: "71.4578165%" }),
-        /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#3857B3", offset: "100%" })
-      ] });
+      t3 = /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "291.5", cy: "291.5", r: "291.5", fill: "#0070F4" });
+      t4 = /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "292", cy: "291.5", rx: "173", ry: "173.5", fill: "#FF3773" });
+      t5 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("stop", { stopColor: "#68294F", stopOpacity: "0", offset: "0%" }),
-        /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#5E2548", stopOpacity: "0.04641108", offset: "75.3503173%" }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("defs", { children: [
-        t3,
-        t4,
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("stop", { stopColor: "#68294F", stopOpacity: "0", offset: "0%" }),
-          /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#5E2548", stopOpacity: "0.04641108", offset: "84.0867343%" }),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxRuntime.jsxs("g", { id: "firecms_logo", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { fill: "url(#radialGradient-1)", cx: "299.5", cy: "299.5", r: "299.5" }),
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { fill: "url(#radialGradient-2)", cx: "299.5", cy: "299.5", r: "299.5" }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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.createContext({
     hasDrawer: false,
@@ -20566,6 +21439,8 @@
   }
   const DEFAULT_BASE_PATH = "/";
   const DEFAULT_COLLECTION_PATH = "/c";
+  const NAVIGATION_DEFAULT_GROUP_NAME = "Views";
+  const NAVIGATION_ADMIN_GROUP_NAME = "Admin";
   function useBuildNavigationController(props) {
     const {
       basePath = DEFAULT_BASE_PATH,
@@ -20579,12 +21454,14 @@
       plugins,
       userConfigPersistence,
       dataSourceDelegate,
-      disabled
+      disabled,
+      navigationGroupMappings
     } = props;
     const navigate = reactRouterDom.useNavigate();
     const collectionsRef = React.useRef();
     const viewsRef = React.useRef();
     const adminViewsRef = React.useRef();
+    const navigationEntriesOrderRef = React.useRef();
     const [initialised, setInitialised] = React.useState(false);
     const [topLevelNavigation, setTopLevelNavigation] = React.useState(void 0);
     const [navigationLoading, setNavigationLoading] = React.useState(true);
@@ -20595,80 +21472,127 @@
     const fullCollectionPath = cleanBasePath ? `/${cleanBasePath}/${cleanBaseCollectionPath}` : `/${cleanBaseCollectionPath}`;
     const buildCMSUrlPath = React.useCallback((path) => cleanBasePath ? `/${cleanBasePath}/${encodePath(path)}` : `/${encodePath(path)}`, [cleanBasePath]);
     const buildUrlCollectionPath = React.useCallback((path_0) => `${removeInitialAndTrailingSlashes(baseCollectionPath)}/${encodePath(path_0)}`, [baseCollectionPath]);
+    const allPluginGroups = plugins?.flatMap((plugin) => plugin.homePage?.navigationEntries ? plugin.homePage.navigationEntries.map((e) => e.name) : []) ?? [];
+    const pluginGroups = [...new Set(allPluginGroups)];
+    const onNavigationEntriesOrderUpdate = React.useCallback((entries) => {
+      if (!plugins) {
+        return;
+      }
+      const filteredEntries = entries.filter((entry) => entry.entries.length > 0);
+      if (plugins.some((plugin_1) => plugin_1.homePage?.onNavigationEntriesUpdate)) {
+        plugins.forEach((plugin_0) => {
+          if (plugin_0.homePage?.onNavigationEntriesUpdate) {
+            plugin_0.homePage.onNavigationEntriesUpdate(filteredEntries);
+          }
+        });
+      }
+    }, [plugins]);
     const computeTopNavigation = React.useCallback((collections, views, adminViews, viewsOrder_0) => {
-      let navigationEntries = [...(collections ?? []).map((collection) => !collection.hideFromNavigation ? {
-        url: buildUrlCollectionPath(collection.id ?? collection.path),
-        type: "collection",
-        name: collection.name.trim(),
-        path: collection.id ?? collection.path,
-        collection,
-        description: collection.description?.trim(),
-        group: getGroup(collection)
-      } : void 0).filter(Boolean), ...(views ?? []).map((view) => !view.hideFromNavigation ? {
-        url: buildCMSUrlPath(Array.isArray(view.path) ? view.path[0] : view.path),
-        name: view.name.trim(),
-        type: "view",
-        path: view.path,
-        view,
-        description: view.description?.trim(),
-        group: getGroup(view)
-      } : void 0).filter(Boolean), ...(adminViews ?? []).map((view_0) => !view_0.hideFromNavigation ? {
-        url: buildCMSUrlPath(Array.isArray(view_0.path) ? view_0.path[0] : view_0.path),
-        name: view_0.name.trim(),
-        type: "admin",
-        path: view_0.path,
-        view: view_0,
-        description: view_0.description?.trim(),
-        group: "Admin"
-      } : void 0).filter(Boolean)];
-      navigationEntries = navigationEntries.sort((a, b) => {
-        if (a.group !== "Views" && a.group !== "Admin" && (b.group === "Views" || b.group === "Admin")) {
-          return -1;
-        }
-        if (b.group !== "Views" && b.group !== "Admin" && (a.group === "Views" || a.group === "Admin")) {
-          return 1;
-        }
-        if (a.group === "Admin" && b.group !== "Admin") {
-          return 1;
-        }
-        if (a.group !== "Admin" && b.group === "Admin") {
-          return -1;
-        }
-        if (a.group === "Views" && b.group !== "Views") {
-          return -1;
+      const finalNavigationGroupMappings = computeNavigationGroups({
+        navigationGroupMappings,
+        collections,
+        views,
+        plugins
+      });
+      const allPluginNavigationEntries = finalNavigationGroupMappings.map((g) => g.entries).flat() ?? [];
+      const navigationEntriesOrder = [...new Set(allPluginNavigationEntries)];
+      let navigationEntries = [...(collections ?? []).reduce((acc, collection) => {
+        if (collection.hideFromNavigation) return acc;
+        const pathKey = collection.id ?? collection.path;
+        let groupName = getGroup(collection);
+        if (finalNavigationGroupMappings) {
+          for (const pluginGroupDef of finalNavigationGroupMappings) {
+            if (pluginGroupDef.entries.includes(pathKey)) {
+              groupName = pluginGroupDef.name;
+              break;
+            }
+          }
         }
-        if (a.group !== "Views" && b.group === "Views") {
-          return 1;
+        acc.push({
+          id: `collection:${pathKey}`,
+          url: buildUrlCollectionPath(pathKey),
+          type: "collection",
+          name: collection.name.trim(),
+          path: pathKey,
+          collection,
+          description: collection.description?.trim(),
+          group: groupName ?? NAVIGATION_DEFAULT_GROUP_NAME
+        });
+        return acc;
+      }, []), ...(views ?? []).reduce((acc_0, view) => {
+        if (view.hideFromNavigation) return acc_0;
+        const pathKey_0 = Array.isArray(view.path) ? view.path[0] : view.path;
+        let groupName_0 = getGroup(view);
+        if (finalNavigationGroupMappings) {
+          for (const pluginGroupDef_0 of finalNavigationGroupMappings) {
+            if (pluginGroupDef_0.entries.includes(pathKey_0)) {
+              groupName_0 = pluginGroupDef_0.name;
+              break;
+            }
+          }
         }
+        acc_0.push({
+          id: `view:${pathKey_0}`,
+          url: buildCMSUrlPath(pathKey_0),
+          name: view.name.trim(),
+          type: "view",
+          path: view.path,
+          view,
+          description: view.description?.trim(),
+          group: groupName_0 ?? NAVIGATION_DEFAULT_GROUP_NAME
+        });
+        return acc_0;
+      }, []), ...(adminViews ?? []).reduce((acc_1, view_0) => {
+        if (view_0.hideFromNavigation) return acc_1;
+        const pathKey_1 = Array.isArray(view_0.path) ? view_0.path[0] : view_0.path;
+        const groupName_1 = NAVIGATION_ADMIN_GROUP_NAME;
+        acc_1.push({
+          id: `admin:${pathKey_1}`,
+          url: buildCMSUrlPath(pathKey_1),
+          name: view_0.name.trim(),
+          type: "admin",
+          path: view_0.path,
+          view: view_0,
+          description: view_0.description?.trim(),
+          group: groupName_1
+        });
+        return acc_1;
+      }, [])];
+      const groupOrderValue = (groupName_2) => {
+        if (groupName_2 === NAVIGATION_ADMIN_GROUP_NAME) return 1;
         return 0;
+      };
+      navigationEntries = navigationEntries.sort((a, b) => {
+        return groupOrderValue(a.group) - groupOrderValue(b.group);
       });
-      if (viewsOrder_0) {
+      const usedViewsOrder = viewsOrder_0 ?? navigationEntriesOrder;
+      if (usedViewsOrder) {
         navigationEntries = navigationEntries.sort((a_0, b_0) => {
-          const aIndex = viewsOrder_0.indexOf(a_0.path);
-          const bIndex = viewsOrder_0.indexOf(b_0.path);
-          if (aIndex === -1 && bIndex === -1) {
-            return 0;
-          }
-          if (aIndex === -1) {
-            return 1;
-          }
-          if (bIndex === -1) {
-            return -1;
-          }
+          const getSortPath = (navEntry) => typeof navEntry.path === "string" ? navEntry.path : navEntry.path[0];
+          const aIndex = usedViewsOrder.indexOf(getSortPath(a_0));
+          const bIndex = usedViewsOrder.indexOf(getSortPath(b_0));
+          if (aIndex === -1 && bIndex === -1) return 0;
+          if (aIndex === -1) return 1;
+          if (bIndex === -1) return -1;
           return aIndex - bIndex;
         });
       }
-      const groups = Object.values(navigationEntries).map((e) => e.group).filter(Boolean).filter((value, index, array) => array.indexOf(value) === index);
+      const collectedGroupsFromEntries = navigationEntries.map((e_0) => e_0.group).filter(Boolean);
+      const allDefinedGroups = [...pluginGroups, ...collectedGroupsFromEntries];
+      const uniqueGroups = [...new Set(allDefinedGroups)].sort((a_1, b_1) => groupOrderValue(a_1) - groupOrderValue(b_1));
       return {
+        allowDragAndDrop: plugins?.some((plugin_2) => plugin_2.homePage?.allowDragAndDrop) ?? false,
         navigationEntries,
-        groups
+        groups: uniqueGroups,
+        onNavigationEntriesUpdate: onNavigationEntriesOrderUpdate
       };
-    }, [buildCMSUrlPath, buildUrlCollectionPath]);
+    }, [navigationGroupMappings, buildCMSUrlPath, buildUrlCollectionPath, pluginGroups, onNavigationEntriesOrderUpdate]);
     const refreshNavigation = React.useCallback(async () => {
       if (disabled || authController.initialLoading) return;
       console.debug("Refreshing navigation");
       try {
         const [resolvedCollections = [], resolvedViews, resolvedAdminViews = []] = await Promise.all([resolveCollections(collectionsProp, collectionPermissions, authController, dataSourceDelegate, plugins), resolveCMSViews(viewsProp, authController, dataSourceDelegate), resolveCMSViews(adminViewsProp, authController, dataSourceDelegate)]);
+        const computedTopLevelNav = computeTopNavigation(resolvedCollections, resolvedViews, resolvedAdminViews, viewsOrder);
         let shouldUpdateTopLevelNav = false;
         if (!areCollectionListsEqual(collectionsRef.current ?? [], resolvedCollections)) {
           collectionsRef.current = resolvedCollections;
@@ -20687,13 +21611,17 @@
           adminViewsRef.current = resolvedAdminViews;
           shouldUpdateTopLevelNav = true;
         }
-        const computedTopLevelNav = computeTopNavigation(resolvedCollections, resolvedViews, resolvedAdminViews, viewsOrder);
+        const navigationEntriesOrder_0 = computedTopLevelNav.navigationEntries.map((e_2) => e_2.id);
+        if (!equal(navigationEntriesOrderRef.current, navigationEntriesOrder_0)) {
+          navigationEntriesOrderRef.current = navigationEntriesOrder_0;
+          shouldUpdateTopLevelNav = true;
+        }
         if (shouldUpdateTopLevelNav && !equal(topLevelNavigation, computedTopLevelNav)) {
           setTopLevelNavigation(computedTopLevelNav);
         }
-      } catch (e_0) {
-        console.error(e_0);
-        setNavigationLoadingError(e_0);
+      } catch (e_1) {
+        console.error(e_1);
+        setNavigationLoadingError(e_1);
       }
       if (navigationLoading) setNavigationLoading(false);
       if (!initialised) setInitialised(true);
@@ -20893,9 +21821,9 @@
   function getGroup(collectionOrView) {
     const trimmed = collectionOrView.group?.trim();
     if (!trimmed || trimmed === "") {
-      return "Views";
+      return NAVIGATION_DEFAULT_GROUP_NAME;
     }
-    return trimmed ?? "Views";
+    return trimmed ?? NAVIGATION_DEFAULT_GROUP_NAME;
   }
   function areCollectionListsEqual(a, b) {
     if (a.length !== b.length) {
@@ -20921,6 +21849,58 @@
     }
     return equal(removeFunctions(restA), removeFunctions(restB));
   }
+  function computeNavigationGroups({
+    navigationGroupMappings,
+    collections,
+    views,
+    plugins
+  }) {
+    let result = navigationGroupMappings;
+    result = plugins ? plugins?.reduce((acc, plugin) => {
+      if (plugin.homePage?.navigationEntries) {
+        plugin.homePage.navigationEntries.forEach((entry) => {
+          const {
+            name,
+            entries
+          } = entry;
+          const existingGroup = acc.find((entry2) => entry2.name === name);
+          if (existingGroup) {
+            existingGroup.entries.push(...entries);
+          } else {
+            acc.push({
+              name,
+              entries: [...entries]
+            });
+          }
+        });
+      }
+      return acc;
+    }, [...result ?? []]) : result;
+    if (!result) {
+      result = [];
+      const groupMap = {};
+      (collections ?? []).forEach((collection) => {
+        const name = getGroup(collection);
+        const entry = collection.id ?? collection.path;
+        if (!groupMap[name]) groupMap[name] = [];
+        groupMap[name].push(entry);
+      });
+      (views ?? []).forEach((view) => {
+        const name = getGroup(view);
+        const entry = Array.isArray(view.path) ? view.path[0] : view.path;
+        if (!groupMap[name]) groupMap[name] = [];
+        groupMap[name].push(entry);
+      });
+      result = Object.entries(groupMap).map(([name, entries]) => ({
+        name,
+        entries
+      }));
+    }
+    result.forEach((group) => {
+      group.entries = [...new Set(group.entries)];
+    });
+    return result;
+  }
   function useBuildLocalConfigurationPersistence() {
     const $ = reactCompilerRuntime.c(15);
     let t0;
@@ -21336,7 +22316,7 @@
     }
     let t5;
     if ($[7] !== handleCancel) {
-      t5 = /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", onClick: handleCancel, autoFocus: true, children: " Cancel " });
+      t5 = /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", color: "primary", onClick: handleCancel, autoFocus: true, children: " Cancel " });
       $[7] = handleCancel;
       $[8] = t5;
     } else {
@@ -21344,7 +22324,7 @@
     }
     let t6;
     if ($[9] !== handleOk) {
-      t6 = /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: handleOk, children: " Ok " });
+      t6 = /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { color: "primary", onClick: handleOk, children: " Ok " });
       $[9] = handleOk;
       $[10] = t6;
     } else {
@@ -21488,14 +22468,17 @@
     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 = React.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 = [];
@@ -21503,7 +22486,7 @@
       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,
@@ -21517,7 +22500,9 @@
       status,
       sideDialogContext,
       pluginActions,
-      openEntityMode
+      openEntityMode,
+      navigateBack,
+      formContext
     }) : buildSideActions({
       savingError,
       entity,
@@ -21530,7 +22515,9 @@
       disabled,
       status,
       pluginActions,
-      openEntityMode
+      openEntityMode,
+      navigateBack,
+      formContext
     });
   }
   function buildBottomActions({
@@ -21545,22 +22532,28 @@
     status,
     sideDialogContext,
     pluginActions,
-    openEntityMode
+    openEntityMode,
+    navigateBack,
+    formContext
   }) {
     const canClose = openEntityMode === "side_panel";
     return /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogActions, { position: "absolute", children: [
       savingError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { color: "error", children: savingError.message }) }),
-      entity && formActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow flex overflow-auto no-scrollbar", children: formActions.map((action) => /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { color: "primary", onClick: (event) => {
-        event.stopPropagation();
-        if (entity) action.onClick({
+      formActions.length > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(EntityActionButton, { action, enabled: isEnabled, props }, action.key);
+      }) }),
       pluginActions,
       /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", disabled: disabled || isSubmitting, type: "reset", children: status === "existing" ? "Discard" : "Clear" }),
       /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: canClose ? "text" : "filled", color: "primary", type: "submit", disabled: disabled || isSubmitting, onClick: () => {
@@ -21590,7 +22583,10 @@
     disabled,
     status,
     sideDialogContext,
-    pluginActions
+    pluginActions,
+    openEntityMode,
+    navigateBack,
+    formContext
   }) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("overflow-auto h-full flex flex-col gap-2 w-80 2xl:w-96 px-4 py-16 sticky top-0 border-l", ui.defaultBorderMixin), children: [
       /* @__PURE__ */ jsxRuntime.jsxs(ui.LoadingButton, { fullWidth: true, variant: "filled", color: "primary", type: "submit", size: "large", disabled: disabled || isSubmitting, onClick: () => {
@@ -21602,9 +22598,104 @@
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { fullWidth: true, variant: "text", disabled: disabled || isSubmitting, type: "reset", children: status === "existing" ? "Discard" : "Clear" }),
       pluginActions,
+      formActions.length > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(EntityActionButton, { action, enabled: isEnabled, props }, action.key);
+      }) }),
       savingError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { color: "error", children: savingError.message }) })
     ] });
   }
+  function EntityActionButton(t0) {
+    const $ = reactCompilerRuntime.c(14);
+    const {
+      action,
+      enabled,
+      props
+    } = t0;
+    const snackbarController = useSnackbarController();
+    const [loading, setLoading] = React.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ui.Tooltip, { title: action.name, children: t4 });
+      $[11] = action.name;
+      $[12] = t4;
+      $[13] = t5;
+    } else {
+      t5 = $[13];
+    }
+    return t5;
+  }
   function EntityJsonPreview(t0) {
     const $ = reactCompilerRuntime.c(6);
     const {
@@ -21780,6 +22871,22 @@
     const [formContext, setFormContext] = React.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__ */ jsxRuntime.jsx(plugin.form.ActionsTop, { ...actionProps }, `actions_${plugin.key}`) : null).filter(Boolean));
+    }
     const defaultSelectedView = React.useMemo(() => resolveDefaultSelectedView(collection ? collection.defaultSelectedView : void 0, {
       status,
       entityId
@@ -21796,7 +22903,6 @@
     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,
@@ -21852,7 +22958,7 @@
     }), role: "tabpanel", children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 h-full overflow-auto w-full", role: "tabpanel", children: [
@@ -21876,7 +22982,7 @@
       /* @__PURE__ */ jsxRuntime.jsx(EntityView, { className: "px-8 h-full overflow-auto", entity, path, collection }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-16" })
     ] }) }) : null;
-    const entityView = /* @__PURE__ */ jsxRuntime.jsx(EntityForm, { collection, path, entityId: entityId ?? usedEntity?.id, onValuesModified, entity, initialDirtyValues: cachedDirtyValues, openEntityMode: layout, forceActionsAtTheBottom: actionsAtTheBottom, initialStatus: status, className: ui.cls((!mainViewVisible || !canEdit) && !selectedSecondaryForm ? "hidden" : "", formProps?.className), EntityFormActionsComponent: EntityEditViewFormActions, disabled: !canEdit, ...formProps, onEntityChange: (entity_0) => {
+    const entityView = /* @__PURE__ */ jsxRuntime.jsx(EntityForm, { fullIdPath, collection, path, entityId: entityId ?? usedEntity?.id, onValuesModified, entity, initialDirtyValues: cachedDirtyValues, openEntityMode: layout, forceActionsAtTheBottom: actionsAtTheBottom, initialStatus: status, className: ui.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) => {
@@ -21898,11 +23004,12 @@
     const customViewTabsEnd = resolvedEntityViews.filter((view_1) => !view_1.position || view_1.position === "end").map((view_2) => /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col h-full w-full bg-white dark:bg-surface-900", children: [
-      shouldShowTopBar && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.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", ui.defaultBorderMixin), children: [
+      shouldShowTopBar && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.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", ui.defaultBorderMixin), children: [
         barActions,
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow" }),
+        pluginActionsTop,
         globalLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.CircularProgress, { size: "small" }) }),
-        hasAdditionalViews && /* @__PURE__ */ jsxRuntime.jsxs(ui.Tabs, { value: selectedTab, onValueChange: (value_1) => {
+        hasAdditionalViews && /* @__PURE__ */ jsxRuntime.jsxs(ui.Tabs, { className: "self-end", value: selectedTab, onValueChange: (value_1) => {
           onSideTabClick(value_1);
         }, children: [
           includeJsonView && /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { disabled: !hasAdditionalViews, value: JSON_TAB_VALUE, className: "text-sm", children: /* @__PURE__ */ jsxRuntime.jsx(ui.CodeIcon, { size: "small" }) }),
@@ -21921,9 +23028,9 @@
       subCollectionsViews
     ] });
     if (plugins) {
-      plugins.forEach((plugin) => {
-        if (plugin.form?.provider) {
-          result = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(plugin_0.form.provider.Component, { status, path, collection, entity: usedEntity, context, formContext, ...plugin_0.form.provider.props, children: result });
         }
       });
     }
@@ -21934,6 +23041,7 @@
       allowFullScreen = true,
       path,
       entityId,
+      fullIdPath,
       formProps
     } = props;
     const {
@@ -21962,6 +23070,7 @@
         sideEntityController.replace({
           path: params.path,
           entityId: params.entityId,
+          fullIdPath: props.fullIdPath,
           selectedTab: params.selectedTab,
           updateUrl: true,
           collection: params.collection
@@ -21975,7 +23084,7 @@
     const parentCollectionIds = React.useMemo(() => {
       return navigationController.getParentCollectionIds(path);
     }, [navigationController, path]);
-    const collection = props.collection ?? navigationController.getCollection(path);
+    const collection = navigationController.getCollection(fullIdPath ?? path) ?? props.collection;
     React.useEffect(() => {
       function beforeunload(e) {
         if (blocked && collection) {
@@ -21999,21 +23108,21 @@
     if (!props || !collection) {
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full" });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(EntityEditView, { ...props, layout: "side_panel", collection, parentCollectionIds, onValuesModified, onSaved: onUpdate, barActions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(EntityEditView, { ...props, fullIdPath, layout: "side_panel", collection, parentCollectionIds, onValuesModified, onSaved: onUpdate, barActions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { className: "self-center", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(ui.CloseIcon, { size: "small" }) }),
       allowFullScreen && /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { className: "self-center", onClick: () => {
         if (entityId) navigate(location.pathname);
         else navigate(location.pathname + "#new");
       }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.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
@@ -22170,16 +23279,18 @@
     });
     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
@@ -22197,7 +23308,7 @@
     if (newFlag) {
       sidePanel = {
         path: lastCollectionPath,
-        // fullIdPath: lastCollectionPath,
+        fullIdPath: lastCollectionId,
         copy: false
       };
     }
@@ -22205,7 +23316,7 @@
   }
   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
@@ -22214,7 +23325,7 @@
     return {
       key: `${props.path}/${props.entityId}`,
       component: /* @__PURE__ */ jsxRuntime.jsx(EntitySidePanel, { ...resolvedPanelProps }),
-      urlPath: newPath,
+      urlPath,
       parentUrlPath: buildUrlCollectionPath(collectionPath),
       width: entityViewWidth,
       onClose: props.onClose,
@@ -22755,6 +23866,7 @@
       onAnalyticsEvent,
       propertyConfigs,
       entityViews,
+      entityActions,
       components,
       navigationController,
       apiKey
@@ -22773,6 +23885,7 @@
       entityLinkBuilder,
       plugins,
       entityViews: entityViews ?? [],
+      entityActions: entityActions ?? [],
       propertyConfigs: propertyConfigs ?? {},
       components
     };
@@ -22891,7 +24004,7 @@
         const {
           isActive
         } = t52;
-        return ui.cls("rounded-lg truncate", "hover:bg-surface-accent-300 hover:bg-opacity-75 dark:hover:bg-surface-accent-800 dark:hover:bg-opacity-75 text-text-primary dark:text-surface-200 hover:text-surface-900 hover:dark:text-white", "flex flex-row items-center mr-8", drawerOpen ? "pl-4 h-12" : "pl-4 h-11", "font-semibold text-xs", isActive ? "bg-surface-accent-200 bg-opacity-60 dark:bg-surface-800 dark:bg-opacity-50" : "");
+        return ui.cls("rounded-lg truncate", "hover:bg-surface-accent-300 hover:bg-opacity-75 dark:hover:bg-surface-accent-800 dark:hover:bg-opacity-75 text-text-primary dark:text-surface-200 hover:text-surface-900 hover:dark:text-white", "flex flex-row items-center mr-8", drawerOpen ? "pl-4 h-10" : "pl-4 h-9", "font-semibold text-xs", isActive ? "bg-surface-accent-200 bg-opacity-60 dark:bg-surface-800 dark:bg-opacity-50" : "");
       };
       $[4] = drawerOpen;
       $[5] = t4;
@@ -23051,7 +24164,7 @@
         if ($[41] !== adminMenuOpen || $[42] !== buildGroupHeader || $[43] !== drawerOpen || $[44] !== navigationEntries || $[45] !== onClick || $[46] !== tooltipsOpen) {
           t10 = (group_0) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface-50 dark:bg-surface-800 dark:bg-opacity-30 my-4 rounded-lg ml-3 mr-1", children: [
             buildGroupHeader(group_0),
-            Object.values(navigationEntries).filter((e_0) => e_0.group === group_0).map((view_0, index) => /* @__PURE__ */ jsxRuntime.jsx(DrawerNavigationItem, { icon: /* @__PURE__ */ jsxRuntime.jsx(IconForView, { collectionOrView: view_0.collection ?? view_0.view, size: "small" }), tooltipsOpen, adminMenuOpen, drawerOpen, onClick: () => onClick(view_0), url: view_0.url, name: view_0.name }, `navigation_${index}`))
+            Object.values(navigationEntries).filter((e_0) => e_0.group === group_0).map((view_0) => /* @__PURE__ */ jsxRuntime.jsx(DrawerNavigationItem, { icon: /* @__PURE__ */ jsxRuntime.jsx(IconForView, { collectionOrView: view_0.collection ?? view_0.view, size: "small" }), tooltipsOpen, adminMenuOpen, drawerOpen, onClick: () => onClick(view_0), url: view_0.url, name: view_0.name }, view_0.id))
           ] }, `drawer_group_${group_0}`);
           $[41] = adminMenuOpen;
           $[42] = buildGroupHeader;
@@ -23105,13 +24218,13 @@
         adminViews.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ui.Menu, { side: "right", open: adminMenuOpen, onOpenChange: setAdminMenuOpen, trigger: /* @__PURE__ */ jsxRuntime.jsxs(ui.IconButton, { shape: "square", className: "m-4 text-surface-900 dark:text-white w-fit", children: [
           /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Admin", open: tooltipsOpen, side: "right", sideOffset: 28, children: /* @__PURE__ */ jsxRuntime.jsx(ui.MoreVertIcon, {}) }),
           drawerOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls(drawerOpen ? "opacity-100" : "opacity-0 hidden", "mx-4 font-inherit text-inherit"), children: "ADMIN" })
-        ] }), children: adminViews.map((entry, index_0) => /* @__PURE__ */ jsxRuntime.jsxs(ui.MenuItem, { onClick: (event) => {
+        ] }), children: adminViews.map((entry) => /* @__PURE__ */ jsxRuntime.jsxs(ui.MenuItem, { onClick: (event) => {
           event.preventDefault();
-          navigate(entry.path);
+          navigate(entry.url);
         }, children: [
           /* @__PURE__ */ jsxRuntime.jsx(IconForView, { collectionOrView: entry.view }),
           entry.name
-        ] }, `navigation_${index_0}`)) })
+        ] }, entry.id)) })
       ] }) });
       $[0] = adminMenuOpen;
       $[1] = analyticsController;
@@ -23364,10 +24477,21 @@
         Field: StorageUploadFieldBinding
       }
     },
+    reference_as_string: {
+      key: "reference_as_string",
+      name: "Reference (as string)",
+      description: "The value refers to a different collection (it is saved as a string)",
+      Icon: ui.LinkIcon,
+      color: "#154fb3",
+      property: {
+        dataType: "string",
+        Field: ReferenceAsStringFieldBinding
+      }
+    },
     reference: {
       key: "reference",
       name: "Reference",
-      description: "The value refers to a different collection",
+      description: "The value refers to a different collection (it is saved as a reference)",
       Icon: ui.LinkIcon,
       color: "#ff0042",
       property: {
@@ -23498,6 +24622,8 @@
         return "email";
       } else if (property.enumValues) {
         return "select";
+      } else if (property.reference) {
+        return "reference_as_string";
       } else {
         return "text_field";
       }
@@ -23673,7 +24799,7 @@
           } else {
             t8 = $[22];
           }
-          t62 = /* @__PURE__ */ jsxRuntime.jsx(EntityCollectionView, { isSubCollection: false, parentCollectionIds: t8, fullPath: collection.id, updateUrl: true, ...collection, Actions: toArray(collection.Actions) }, `collection_view_${collection.id ?? collection.path}`);
+          t62 = /* @__PURE__ */ jsxRuntime.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;
@@ -23713,7 +24839,7 @@
             } else {
               t8 = $[27];
             }
-            t62 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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;
@@ -24428,6 +25554,7 @@
   function _temp3(child_1) {
     return child_1.type.componentType !== "Drawer" && child_1.type.componentType !== "AppBar";
   }
+  exports2.ADMIN_GROUP_NAME = ADMIN_GROUP_NAME;
   exports2.AppBar = AppBar;
   exports2.AppContext = AppContext;
   exports2.ArrayContainer = ArrayContainer;
@@ -24452,6 +25579,7 @@
   exports2.CircularProgressCenter = CircularProgressCenter;
   exports2.ConfirmationDialog = ConfirmationDialog;
   exports2.DEFAULT_FIELD_CONFIGS = DEFAULT_FIELD_CONFIGS;
+  exports2.DEFAULT_GROUP_NAME = DEFAULT_GROUP_NAME;
   exports2.DRAWER_WIDTH = DRAWER_WIDTH;
   exports2.DatePreview = DatePreview;
   exports2.DateTimeFieldBinding = DateTimeFieldBinding;
@@ -24494,6 +25622,8 @@
   exports2.ModeControllerContext = ModeControllerContext;
   exports2.ModeControllerProvider = ModeControllerProvider;
   exports2.MultiSelectFieldBinding = MultiSelectFieldBinding;
+  exports2.NAVIGATION_ADMIN_GROUP_NAME = NAVIGATION_ADMIN_GROUP_NAME;
+  exports2.NAVIGATION_DEFAULT_GROUP_NAME = NAVIGATION_DEFAULT_GROUP_NAME;
   exports2.NavigationCard = NavigationCard;
   exports2.NavigationCardBinding = NavigationCardBinding;
   exports2.NavigationGroup = NavigationGroup;
@@ -24507,6 +25637,7 @@
   exports2.PropertyPreview = PropertyPreview;
   exports2.PropertyTableCell = PropertyTableCell;
   exports2.ReadOnlyFieldBinding = ReadOnlyFieldBinding;
+  exports2.ReferenceAsStringFieldBinding = ReferenceAsStringFieldBinding;
   exports2.ReferenceFieldBinding = ReferenceFieldBinding;
   exports2.ReferencePreview = ReferencePreview;
   exports2.ReferenceSelectionTable = ReferenceSelectionTable;
@@ -24629,6 +25760,7 @@
   exports2.resolveCollection = resolveCollection;
   exports2.resolveCollectionPathIds = resolveCollectionPathIds;
   exports2.resolveDefaultSelectedView = resolveDefaultSelectedView;
+  exports2.resolveEntityAction = resolveEntityAction;
   exports2.resolveEntityView = resolveEntityView;
   exports2.resolveEnumValues = resolveEnumValues;
   exports2.resolveNavigationFrom = resolveNavigationFrom;