@firecms/core 3.0.0-rc.1 → 3.0.0-rc.3

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/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) {
+  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("compressorjs"), 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", "compressorjs", "@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.Compressor, 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, Compressor, editor, prismReactRenderer, reactRouter, Portal) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -208,9 +208,14 @@
      * to the root of the database).
      */
     path;
-    constructor(id, path) {
+    /**
+     * Optional database ID where the entity is stored (if multiple databases are used)
+     */
+    databaseId;
+    constructor(id, path, databaseId) {
       this.id = id;
       this.path = path;
+      this.databaseId = databaseId;
     }
     get pathWithId() {
       return `${this.path}/${this.id}`;
@@ -248,6 +253,13 @@
   function isObject(item) {
     return item && typeof item === "object" && !Array.isArray(item);
   }
+  function isPlainObject(obj) {
+    if (typeof obj !== "object" || obj === null || Array.isArray(obj)) {
+      return false;
+    }
+    const proto = Object.getPrototypeOf(obj);
+    return proto === Object.prototype;
+  }
   function mergeDeep(target, source, ignoreUndefined = false) {
     if (!isObject(target)) {
       return target;
@@ -268,7 +280,28 @@
         if (sourceValue instanceof Date) {
           output[key] = new Date(sourceValue.getTime());
         } else if (Array.isArray(sourceValue)) {
-          output[key] = [...sourceValue];
+          if (Array.isArray(outputValue)) {
+            const newArray = [];
+            const maxLength = Math.max(outputValue.length, sourceValue.length);
+            for (let i = 0; i < maxLength; i++) {
+              const sourceItem = sourceValue[i];
+              const targetItem = outputValue[i];
+              if (i >= sourceValue.length) {
+                newArray[i] = targetItem;
+              } else if (i >= outputValue.length) {
+                newArray[i] = sourceItem;
+              } else if (sourceItem === null) {
+                newArray[i] = targetItem;
+              } else if (isObject(sourceItem) && isObject(targetItem)) {
+                newArray[i] = mergeDeep(targetItem, sourceItem, ignoreUndefined);
+              } else {
+                newArray[i] = sourceItem;
+              }
+            }
+            output[key] = newArray;
+          } else {
+            output[key] = [...sourceValue];
+          }
         } else if (isObject(sourceValue)) {
           if (isObject(outputValue)) {
             output[key] = mergeDeep(outputValue, sourceValue, ignoreUndefined);
@@ -515,7 +548,7 @@
     return result;
   }
   function getReferenceFrom(entity) {
-    return new EntityReference(entity.id, entity.path);
+    return new EntityReference(entity.id, entity.path, entity.databaseId);
   }
   function traverseValuesProperties(inputValues, properties, operation) {
     const updatedValues = Object.entries(properties).map(([key, property]) => {
@@ -1047,6 +1080,12 @@
       };
     });
   };
+  function getLocalChangesBackup(collection) {
+    if (!collection.localChangesBackup) {
+      return "manual_apply";
+    }
+    return collection.localChangesBackup;
+  }
   const kebabCaseRegex = /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g;
   const toKebabCase = (str) => {
     const regExpMatchArray = str.match(kebabCaseRegex);
@@ -3503,26 +3542,6 @@
     });
     return properties;
   }
-  function makePropertiesNonEditable(properties) {
-    return Object.entries(properties).reduce((acc, [key, property]) => {
-      if (!isPropertyBuilder(property) && property.dataType === "map" && property.properties) {
-        const updated = {
-          ...property,
-          properties: makePropertiesNonEditable(property.properties)
-        };
-        acc[key] = updated;
-      }
-      if (isPropertyBuilder(property)) {
-        acc[key] = property;
-      } else {
-        acc[key] = {
-          ...property,
-          editable: false
-        };
-      }
-      return acc;
-    }, {});
-  }
   function applyModifyFunction(modifyCollection, collection, parentPaths) {
     if (modifyCollection) {
       const modified = modifyCollection({
@@ -3604,8 +3623,8 @@
       return target;
     } else {
       const mergedProperty = mergeDeep(target, source);
-      const targetEditable = Boolean(target.editable);
-      const sourceEditable = Boolean(source.editable);
+      const targetEditable = target.editable === void 0 ? true : Boolean(target.editable);
+      const sourceEditable = source.editable === void 0 ? true : Boolean(source.editable);
       if (source.dataType === "map" && source.properties) {
         const targetProperties = "properties" in target ? target.properties : {};
         const sourceProperties = "properties" in source ? source.properties : {};
@@ -4066,6 +4085,10 @@
   const useAnalyticsController = () => {
     return React.useContext(AnalyticsContext);
   };
+  const InternalUserManagementContext = React.createContext({});
+  const useInternalUserManagementController = () => {
+    return React.useContext(InternalUserManagementContext);
+  };
   const useFireCMSContext = () => {
     const authController = useAuthController();
     const sideDialogsController = useSideDialogsController();
@@ -4078,6 +4101,7 @@
     const dialogsController = useDialogsController();
     const customizationController = useCustomizationController();
     const analyticsController = useAnalyticsController();
+    const userManagement = useInternalUserManagementController();
     const fireCMSContextRef = React.useRef({
       authController,
       sideDialogsController,
@@ -4089,7 +4113,8 @@
       userConfigPersistence,
       dialogsController,
       customizationController,
-      analyticsController
+      analyticsController,
+      userManagement
     });
     React.useEffect(() => {
       fireCMSContextRef.current = {
@@ -4103,7 +4128,8 @@
         userConfigPersistence,
         dialogsController,
         customizationController,
-        analyticsController
+        analyticsController,
+        userManagement
       };
     }, [authController, dialogsController, navigation, sideDialogsController]);
     return fireCMSContextRef.current;
@@ -4164,7 +4190,7 @@
           }
           setDataLoading(false);
           setDataLoadingError(void 0);
-          setData(entities.map(_temp$r));
+          setData(entities.map(_temp$t));
           setNoMoreToLoad(!itemCount || entities.length < itemCount);
         };
         const onError = (error) => {
@@ -4197,7 +4223,7 @@
             orderBy: sortByProperty,
             order: currentSort
           }).then(onEntitiesUpdate).catch(onError);
-          return _temp2$d;
+          return _temp2$e;
         }
       };
       $[4] = collection;
@@ -4245,9 +4271,9 @@
     }
     return t5;
   }
-  function _temp2$d() {
+  function _temp2$e() {
   }
-  function _temp$r(e_0) {
+  function _temp$t(e_0) {
     return {
       ...e_0
     };
@@ -4312,7 +4338,7 @@
           setEntity(CACHE[`${path}/${entityId}`]);
           setDataLoading(false);
           setDataLoadingError(void 0);
-          return _temp$q;
+          return _temp$s;
         } else {
           if (entityId && path && collection) {
             if (dataSource.listenEntity) {
@@ -4331,7 +4357,7 @@
                 databaseId,
                 collection
               }).then(onEntityUpdate).catch(onError);
-              return _temp2$c;
+              return _temp2$d;
             }
           } else {
             onEntityUpdate(void 0);
@@ -4378,9 +4404,9 @@
   }
   function _temp3$4() {
   }
-  function _temp2$c() {
+  function _temp2$d() {
   }
-  function _temp$q() {
+  function _temp$s() {
   }
   async function saveEntityWithCallbacks({
     collection,
@@ -4760,6 +4786,48 @@
     if (typeof window === "undefined") return false;
     return window.matchMedia(`(min-width: ${breakpoints[breakpoint] + 1}px)`).matches;
   }
+  function useCollapsedGroups(groupNames) {
+    const [collapsedGroups, setCollapsedGroups] = React.useState(() => {
+      try {
+        const stored = localStorage.getItem("firecms-collapsed-groups");
+        return stored ? JSON.parse(stored) : {};
+      } catch {
+        return {};
+      }
+    });
+    React.useEffect(() => {
+      try {
+        localStorage.setItem("firecms-collapsed-groups", JSON.stringify(collapsedGroups));
+      } catch {
+      }
+    }, [collapsedGroups]);
+    React.useEffect(() => {
+      if (groupNames.length === 0) return;
+      const currentGroupNames = new Set(groupNames);
+      setCollapsedGroups((prev) => {
+        const cleaned = Object.fromEntries(Object.entries(prev).filter(([groupName]) => currentGroupNames.has(groupName)));
+        const prevKeys = Object.keys(prev);
+        const cleanedKeys = Object.keys(cleaned);
+        if (prevKeys.length === cleanedKeys.length && prevKeys.every((key) => cleanedKeys.includes(key))) {
+          return prev;
+        }
+        return cleaned;
+      });
+    }, [groupNames]);
+    const isGroupCollapsed = React.useCallback((name) => {
+      return !!collapsedGroups[name];
+    }, [collapsedGroups]);
+    const toggleGroupCollapsed = React.useCallback((name_0) => {
+      setCollapsedGroups((prev_0) => ({
+        ...prev_0,
+        [name_0]: !prev_0[name_0]
+      }));
+    }, []);
+    return {
+      isGroupCollapsed,
+      toggleGroupCollapsed
+    };
+  }
   function ErrorTooltip(props) {
     const $ = reactCompilerRuntime.c(2);
     let t0;
@@ -4780,6 +4848,7 @@
       tooltip
     } = t0;
     const component = error instanceof Error ? error.message : error;
+    console.warn("ErrorView", JSON.stringify(error));
     let t1;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
       t1 = /* @__PURE__ */ jsxRuntime.jsx(ui.ErrorIcon, { className: "mx-2", size: "small", color: "error" });
@@ -4964,7 +5033,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$p, 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$r, children: t8 }) });
       $[16] = url;
       $[17] = t9;
     } else {
@@ -4998,7 +5067,7 @@
     }
     return t11;
   }
-  function _temp$p(e_0) {
+  function _temp$r(e_0) {
     return e_0.stopPropagation();
   }
   function UrlComponentPreview(t0) {
@@ -5031,7 +5100,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$o, 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$q, target: "_blank", children: [
           t2,
           url
         ] });
@@ -5134,7 +5203,7 @@
           }
           let t7;
           if ($[24] !== t4 || $[25] !== t6 || $[26] !== url) {
-            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: [
+            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: [
               t5,
               t6
             ] });
@@ -5159,10 +5228,10 @@
       }
     }
   }
-  function _temp2$b(e_0) {
+  function _temp2$c(e_0) {
     return e_0.stopPropagation();
   }
-  function _temp$o(e) {
+  function _temp$q(e) {
     e.preventDefault();
   }
   function VideoPreview(t0) {
@@ -5296,7 +5365,7 @@
           if (Array.isArray(arrayProperty.of)) {
             let t1;
             if ($[6] !== arrayProperty.of) {
-              t1 = arrayProperty.of.map(_temp$n);
+              t1 = arrayProperty.of.map(_temp$p);
               $[6] = arrayProperty.of;
               $[7] = t1;
             } else {
@@ -5434,7 +5503,7 @@
     }
     return content || null;
   }
-  function _temp$n(p, i) {
+  function _temp$p(p, i) {
     return renderGenericArrayCell(p, i);
   }
   function renderMap(property, size) {
@@ -5793,7 +5862,7 @@
     }
     let t3;
     if ($[11] !== t2) {
-      t3 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: t2 });
+      t3 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex flex-col gap-2", children: t2 });
       $[11] = t2;
       $[12] = t3;
     } else {
@@ -6005,7 +6074,7 @@
     }
     let t0;
     if ($[8] !== props) {
-      t0 = /* @__PURE__ */ jsxRuntime.jsx(ReferencePreviewInternal, { ...props });
+      t0 = /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(ReferencePreviewInternal, { ...props }) });
       $[8] = props;
       $[9] = t0;
     } else {
@@ -6581,7 +6650,7 @@
         const isArrayOrMap = childProperty.dataType === "map" || childProperty === "array";
         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: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-[140px] w-[25%] py-1", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "font-mono break-words", color: "secondary", children: childProperty.name }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-[140px] w-[25%] py-1", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "break-words font-semibold", color: "secondary", children: childProperty.name }) }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow max-w-[75%]", children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: !isArrayOrMap && /* @__PURE__ */ jsxRuntime.jsx(PropertyPreview, { propertyKey: key_0, value: value[key_0], property: childProperty, size }) }) })
           ] }),
           isArrayOrMap && /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls(ui.defaultBorderMixin, "border-l pl-4 ml-2 my-2"), children: /* @__PURE__ */ jsxRuntime.jsx(PropertyPreview, { propertyKey: key_0, value: value[key_0], property: childProperty, size }) })
@@ -6617,7 +6686,7 @@
     }
     let t1;
     if ($[1] !== value) {
-      t1 = Object.entries(value).map(_temp$m);
+      t1 = Object.entries(value).map(_temp$o);
       $[1] = value;
       $[2] = t1;
     } else {
@@ -6633,11 +6702,11 @@
     }
     return t2;
   }
-  function _temp$m(t0) {
+  function _temp$o(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: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-[140px] w-[25%] py-1", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "font-mono break-words", color: "secondary", children: key }) }, `table-cell-title-${key}-${key}`),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-[140px] w-[25%] py-1", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "font-semibold break-words", color: "secondary", children: key }) }, `table-cell-title-${key}-${key}`),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow max-w-[75%]", children: childValue && typeof childValue !== "object" && /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: childValue.toString() }) }) })
       ] }),
       typeof childValue === "object" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls(ui.defaultBorderMixin, "border-l pl-4"), children: /* @__PURE__ */ jsxRuntime.jsx(KeyValuePreview, { value: childValue }) })
@@ -6714,7 +6783,7 @@
     return t3;
   }
   function NumberPropertyPreview(t0) {
-    const $ = reactCompilerRuntime.c(10);
+    const $ = reactCompilerRuntime.c(12);
     const {
       value,
       property,
@@ -6732,39 +6801,178 @@
       }
       const enumValues = t1;
       if (!enumValues) {
-        let t22;
-        if ($[2] !== value) {
-          t22 = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: value });
-          $[2] = value;
-          $[3] = t22;
+        const t22 = size === "small" ? "text-sm" : "";
+        let t32;
+        if ($[2] !== t22 || $[3] !== value) {
+          t32 = /* @__PURE__ */ jsxRuntime.jsx("span", { className: t22, children: value });
+          $[2] = t22;
+          $[3] = value;
+          $[4] = t32;
         } else {
-          t22 = $[3];
+          t32 = $[4];
         }
-        return t22;
+        return t32;
       }
       const t2 = size !== "medium" ? "small" : "medium";
       let t3;
-      if ($[4] !== enumKey || $[5] !== enumValues || $[6] !== t2) {
+      if ($[5] !== enumKey || $[6] !== enumValues || $[7] !== t2) {
         t3 = /* @__PURE__ */ jsxRuntime.jsx(EnumValuesChip, { enumKey, enumValues, size: t2 });
-        $[4] = enumKey;
-        $[5] = enumValues;
-        $[6] = t2;
-        $[7] = t3;
+        $[5] = enumKey;
+        $[6] = enumValues;
+        $[7] = t2;
+        $[8] = t3;
       } else {
-        t3 = $[7];
+        t3 = $[8];
       }
       return t3;
     } else {
-      let t1;
-      if ($[8] !== value) {
-        t1 = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: value });
-        $[8] = value;
+      const t1 = size === "small" ? "text-sm" : "";
+      let t2;
+      if ($[9] !== t1 || $[10] !== value) {
+        t2 = /* @__PURE__ */ jsxRuntime.jsx("span", { className: t1, children: value });
         $[9] = t1;
+        $[10] = value;
+        $[11] = t2;
+      } else {
+        t2 = $[11];
+      }
+      return t2;
+    }
+  }
+  function UserDisplay(t0) {
+    const $ = reactCompilerRuntime.c(18);
+    const {
+      user
+    } = t0;
+    if (!user) {
+      let t12;
+      if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t12 = /* @__PURE__ */ jsxRuntime.jsx(EmptyValue, {});
+        $[0] = t12;
+      } else {
+        t12 = $[0];
+      }
+      return t12;
+    }
+    let t1;
+    if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+      t1 = ui.cls("inline-flex items-center gap-4 px-2 py-1 rounded-xl", "bg-surface-accent-100 dark:bg-surface-accent-800", "border", ui.defaultBorderMixin);
+      $[1] = t1;
+    } else {
+      t1 = $[1];
+    }
+    let t2;
+    if ($[2] !== user.displayName || $[3] !== user.email || $[4] !== user.photoURL) {
+      t2 = user.photoURL ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: user.photoURL, alt: user.displayName || user.email || "User", className: ui.cls("rounded-full object-cover", "w-6 h-6") }) : /* @__PURE__ */ jsxRuntime.jsx(ui.AccountCircleIcon, { className: ui.cls("text-text-secondary dark:text-text-secondary-dark", "w-6 h-6") });
+      $[2] = user.displayName;
+      $[3] = user.email;
+      $[4] = user.photoURL;
+      $[5] = t2;
+    } else {
+      t2 = $[5];
+    }
+    let t3;
+    if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+      t3 = ui.cls("font-regular truncate", "text-sm");
+      $[6] = t3;
+    } else {
+      t3 = $[6];
+    }
+    const t4 = user.displayName || user.email || "-";
+    let t5;
+    if ($[7] !== t4) {
+      t5 = /* @__PURE__ */ jsxRuntime.jsx("span", { className: t3, children: t4 });
+      $[7] = t4;
+      $[8] = t5;
+    } else {
+      t5 = $[8];
+    }
+    let t6;
+    if ($[9] !== user.displayName || $[10] !== user.email) {
+      t6 = user.displayName && user.email && /* @__PURE__ */ jsxRuntime.jsx("span", { className: ui.cls("text-text-secondary dark:text-text-secondary-dark truncate", "text-xs"), children: user.email });
+      $[9] = user.displayName;
+      $[10] = user.email;
+      $[11] = t6;
+    } else {
+      t6 = $[11];
+    }
+    let t7;
+    if ($[12] !== t5 || $[13] !== t6) {
+      t7 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0", children: [
+        t5,
+        t6
+      ] });
+      $[12] = t5;
+      $[13] = t6;
+      $[14] = t7;
+    } else {
+      t7 = $[14];
+    }
+    let t8;
+    if ($[15] !== t2 || $[16] !== t7) {
+      t8 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t1, children: [
+        t2,
+        t7
+      ] });
+      $[15] = t2;
+      $[16] = t7;
+      $[17] = t8;
+    } else {
+      t8 = $[17];
+    }
+    return t8;
+  }
+  function UserPreview(t0) {
+    const $ = reactCompilerRuntime.c(8);
+    const {
+      value
+    } = t0;
+    const {
+      getUser
+    } = useInternalUserManagementController();
+    if (!value) {
+      let t12;
+      if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t12 = /* @__PURE__ */ jsxRuntime.jsx(EmptyValue, {});
+        $[0] = t12;
+      } else {
+        t12 = $[0];
+      }
+      return t12;
+    }
+    let t1;
+    if ($[1] !== getUser || $[2] !== value) {
+      t1 = getUser(value);
+      $[1] = getUser;
+      $[2] = value;
+      $[3] = t1;
+    } else {
+      t1 = $[3];
+    }
+    const user = t1;
+    if (!user) {
+      let t22;
+      if ($[4] !== value) {
+        t22 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Typography, { variant: "caption", color: "secondary", children: [
+          "User not found: ",
+          value
+        ] });
+        $[4] = value;
+        $[5] = t22;
       } else {
-        t1 = $[9];
+        t22 = $[5];
       }
-      return t1;
+      return t22;
     }
+    let t2;
+    if ($[6] !== user) {
+      t2 = /* @__PURE__ */ jsxRuntime.jsx(UserDisplay, { user });
+      $[6] = user;
+      $[7] = t2;
+    } else {
+      t2 = $[7];
+    }
+    return t2;
   }
   const PropertyPreview = React.memo(function PropertyPreview2(props) {
     const $ = reactCompilerRuntime.c(31);
@@ -6866,21 +7074,25 @@
                       }
                       content = t02;
                     } else {
-                      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;
+                      if (stringProperty.userSelect) {
+                        content = /* @__PURE__ */ jsxRuntime.jsx(UserPreview, { value, property: stringProperty, propertyKey, size: props.size });
+                      } else {
+                        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 {
-                            t02 = $[23];
+                            let t02;
+                            if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+                              t02 = /* @__PURE__ */ jsxRuntime.jsx(EmptyValue, {});
+                              $[23] = t02;
+                            } else {
+                              t02 = $[23];
+                            }
+                            content = t02;
                           }
-                          content = t02;
+                        } else {
+                          content = /* @__PURE__ */ jsxRuntime.jsx(StringPropertyPreview, { ...props, property: stringProperty, value });
                         }
-                      } else {
-                        content = /* @__PURE__ */ jsxRuntime.jsx(StringPropertyPreview, { ...props, property: stringProperty, value });
                       }
                     }
                   }
@@ -7173,98 +7385,467 @@
     }
     return t3;
   });
-  function EntityView({
-    entity,
-    collection,
-    path,
-    className
-  }) {
-    const authController = useAuthController();
-    const customizationController = useCustomizationController();
-    const resolvedCollection = React.useMemo(() => resolveCollection({
-      collection,
-      path,
-      entityId: entity.id,
-      values: entity.values,
-      propertyConfigs: customizationController.propertyConfigs,
-      authController
-    }), [collection, path, entity, customizationController.propertyConfigs]);
-    const properties = resolvedCollection.properties;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full " + className, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full mb-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls(ui.defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0"), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center w-1/4", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pl-2 text-sm text-surface-600", children: "Id" }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-grow p-2 ml-2 w-3/4 text-surface-900 dark:text-white min-h-[56px] flex items-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-grow mr-2", children: entity.id }),
-          customizationController?.entityLinkBuilder && /* @__PURE__ */ jsxRuntime.jsx("a", { href: customizationController.entityLinkBuilder({
-            entity
-          }), rel: "noopener noreferrer", target: "_blank", children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.OpenInNewIcon, { size: "small" }) }) })
-        ] })
-      ] }),
-      Object.entries(properties).map(([key, property]) => {
-        const value = entity.values?.[key];
-        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls(ui.defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0"), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center w-1/4", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pl-2 text-sm text-surface-600", children: property.name }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow p-2 ml-2 w-3/4 text-surface-900 dark:text-white min-h-[56px] flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-            PropertyPreview,
-            {
-              propertyKey: key,
-              value,
-              property,
-              size: "medium"
-            }
-          ) })
-        ] }, `reference_previews_${key}`);
-      })
-    ] }) });
+  function buildPropertyLabelAndGetProperty(properties, key) {
+    if (!key) return {
+      label: "",
+      property: void 0
+    };
+    const segments = [];
+    const re = /([^[.\]]+)|\[(\d+)\]/g;
+    let m;
+    while ((m = re.exec(key)) !== null) {
+      if (m[1] !== void 0) segments.push(m[1]);
+      else if (m[2] !== void 0) segments.push(Number(m[2]));
+    }
+    let currentProps = properties;
+    let currentProp;
+    let lastLabel = "";
+    const getArrayOfProp = (p) => {
+      if (!p || p.dataType !== "array") return void 0;
+      return Array.isArray(p.of) ? p.of[0] : p.of;
+    };
+    for (const seg of segments) {
+      if (typeof seg === "number") {
+        lastLabel = `[${seg}]`;
+        if (currentProp?.dataType === "array") {
+          currentProp = getArrayOfProp(currentProp);
+          if (currentProp?.dataType === "map" && currentProp.properties) {
+            currentProps = currentProp.properties;
+          } else {
+            currentProps = void 0;
+          }
+        } else {
+          currentProp = void 0;
+          currentProps = void 0;
+        }
+        continue;
+      }
+      if (currentProps && currentProps[seg]) {
+        const nextProp = currentProps[seg];
+        currentProp = nextProp;
+        lastLabel = nextProp.name || String(seg);
+        if (nextProp.dataType === "map" && nextProp.properties) {
+          currentProps = nextProp.properties;
+        } else if (nextProp.dataType === "array") {
+          currentProps = void 0;
+        } else {
+          currentProps = void 0;
+        }
+      } else {
+        currentProp = void 0;
+        currentProps = void 0;
+        lastLabel = String(seg);
+      }
+    }
+    return {
+      label: lastLabel,
+      property: currentProp
+    };
   }
-  function VirtualTableInput(props) {
-    const $ = reactCompilerRuntime.c(22);
-    const ref = React.useRef(null);
+  const pathEndsWithIndex = (p) => /\[\d+\]$/.test(p);
+  const PropertyCollectionView = (t0) => {
+    const $ = reactCompilerRuntime.c(89);
     const {
-      value,
-      multiline,
-      updateValue,
-      focused
-    } = props;
-    const prevValue = React.useRef(value);
-    const [internalValue, setInternalValue] = React.useState(value);
-    const focusedState = React.useRef(false);
-    let t0;
-    if ($[0] !== internalValue || $[1] !== value) {
-      t0 = () => {
-        if (prevValue.current !== value && value !== internalValue) {
-          setInternalValue(value);
+      data,
+      properties,
+      baseKey: t1,
+      suppressHeader: t2,
+      size: t3
+    } = t0;
+    const baseKey = t1 === void 0 ? "" : t1;
+    const suppressHeader = t2 === void 0 ? false : t2;
+    const size = t3 === void 0 ? "small" : t3;
+    const isTopLevel = !!baseKey && !baseKey.includes(".") && !baseKey.includes("[");
+    if (Array.isArray(data)) {
+      let t4;
+      if ($[0] !== baseKey || $[1] !== properties) {
+        t4 = baseKey ? buildPropertyLabelAndGetProperty(properties, baseKey) : {
+          label: "",
+          property: void 0
+        };
+        $[0] = baseKey;
+        $[1] = properties;
+        $[2] = t4;
+      } else {
+        t4 = $[2];
+      }
+      const {
+        label: arrayLabel,
+        property
+      } = t4;
+      const ofProp = property?.dataType === "array" ? Array.isArray(property.of) ? property.of[0] : property.of : void 0;
+      const isArrayOfMaps = ofProp?.dataType === "map";
+      const isArrayOfPrimitives = property?.dataType === "array" && ofProp && ofProp.dataType !== "map";
+      if (baseKey && property && isArrayOfPrimitives) {
+        const t52 = `grid grid-cols-12 gap-x-4 ${isTopLevel ? "py-4" : "py-2"} items-start ${isTopLevel ? `border-b ${ui.defaultBorderMixin} last:border-b-0` : ""}`;
+        let t62;
+        if ($[3] !== arrayLabel) {
+          t62 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-4 pr-2", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", color: "secondary", component: "span", className: "break-words", children: arrayLabel }) });
+          $[3] = arrayLabel;
+          $[4] = t62;
+        } else {
+          t62 = $[4];
         }
-        prevValue.current = value;
-      };
-      $[0] = internalValue;
-      $[1] = value;
-      $[2] = t0;
-    } else {
-      t0 = $[2];
-    }
-    let t1;
-    if ($[3] !== value) {
-      t1 = [value];
-      $[3] = value;
-      $[4] = t1;
-    } else {
-      t1 = $[4];
-    }
-    React.useEffect(t0, t1);
-    let t2;
-    if ($[5] !== internalValue || $[6] !== updateValue || $[7] !== value) {
-      t2 = () => {
-        const emptyInitialValue = !value;
-        if (emptyInitialValue && !internalValue) {
-          return;
+        let t72;
+        if ($[5] !== baseKey || $[6] !== data || $[7] !== property || $[8] !== size) {
+          t72 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-8", children: /* @__PURE__ */ jsxRuntime.jsx(PropertyPreview, { propertyKey: baseKey, value: data, property, size }) });
+          $[5] = baseKey;
+          $[6] = data;
+          $[7] = property;
+          $[8] = size;
+          $[9] = t72;
+        } else {
+          t72 = $[9];
         }
-        if (internalValue !== value) {
-          prevValue.current = internalValue;
-          updateValue(internalValue);
+        let t82;
+        if ($[10] !== t52 || $[11] !== t62 || $[12] !== t72) {
+          t82 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t52, children: [
+            t62,
+            t72
+          ] });
+          $[10] = t52;
+          $[11] = t62;
+          $[12] = t72;
+          $[13] = t82;
+        } else {
+          t82 = $[13];
         }
-      };
-      $[5] = internalValue;
+        return t82;
+      }
+      const t5 = `${isTopLevel ? "py-4" : "py-1"} ${isTopLevel ? `border-b ${ui.defaultBorderMixin} last:border-b-0` : ""}`;
+      let t6;
+      if ($[14] !== arrayLabel || $[15] !== baseKey || $[16] !== suppressHeader) {
+        t6 = baseKey && arrayLabel && !suppressHeader && /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", color: "secondary", component: "span", children: arrayLabel });
+        $[14] = arrayLabel;
+        $[15] = baseKey;
+        $[16] = suppressHeader;
+        $[17] = t6;
+      } else {
+        t6 = $[17];
+      }
+      const t7 = baseKey ? `pl-4 mt-1 border-l ${ui.defaultBorderMixin}` : "";
+      let t8;
+      if ($[18] !== baseKey || $[19] !== data || $[20] !== isArrayOfMaps || $[21] !== ofProp || $[22] !== properties || $[23] !== size) {
+        let t92;
+        if ($[25] !== baseKey || $[26] !== isArrayOfMaps || $[27] !== ofProp || $[28] !== properties || $[29] !== size) {
+          t92 = (item, index) => {
+            if (item === null || item === void 0) {
+              return null;
+            }
+            const currentKey = baseKey ? `${baseKey}[${index}]` : `[${index}]`;
+            const itemHeader = isArrayOfMaps && ofProp?.name ? `${ofProp.name} [${index}]` : `[${index}]`;
+            return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", color: "secondary", component: "span", children: itemHeader }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: `pl-4 mt-1 border-l ${ui.defaultBorderMixin}`, children: /* @__PURE__ */ jsxRuntime.jsx(PropertyCollectionView, { data: item, properties, baseKey: currentKey, suppressHeader: true, size }) })
+            ] }, currentKey);
+          };
+          $[25] = baseKey;
+          $[26] = isArrayOfMaps;
+          $[27] = ofProp;
+          $[28] = properties;
+          $[29] = size;
+          $[30] = t92;
+        } else {
+          t92 = $[30];
+        }
+        t8 = data.map(t92);
+        $[18] = baseKey;
+        $[19] = data;
+        $[20] = isArrayOfMaps;
+        $[21] = ofProp;
+        $[22] = properties;
+        $[23] = size;
+        $[24] = t8;
+      } else {
+        t8 = $[24];
+      }
+      let t9;
+      if ($[31] !== t7 || $[32] !== t8) {
+        t9 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t7, children: t8 });
+        $[31] = t7;
+        $[32] = t8;
+        $[33] = t9;
+      } else {
+        t9 = $[33];
+      }
+      let t10;
+      if ($[34] !== t5 || $[35] !== t6 || $[36] !== t9) {
+        t10 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t5, children: [
+          t6,
+          t9
+        ] });
+        $[34] = t5;
+        $[35] = t6;
+        $[36] = t9;
+        $[37] = t10;
+      } else {
+        t10 = $[37];
+      }
+      return t10;
+    }
+    if (typeof data === "object" && data !== null) {
+      let t4;
+      if ($[38] !== baseKey || $[39] !== properties) {
+        t4 = baseKey ? buildPropertyLabelAndGetProperty(properties, baseKey) : {
+          label: "",
+          property: void 0
+        };
+        $[38] = baseKey;
+        $[39] = properties;
+        $[40] = t4;
+      } else {
+        t4 = $[40];
+      }
+      const {
+        label,
+        property: property_0
+      } = t4;
+      if (baseKey && (!property_0 || property_0.dataType !== "map" || !property_0.properties)) {
+        if (!property_0) {
+          return null;
+        }
+        const t52 = `grid grid-cols-12 gap-x-4 ${isTopLevel ? "py-4" : "py-2"} items-start ${isTopLevel ? `border-b ${ui.defaultBorderMixin} last:border-b-0` : ""}`;
+        let t62;
+        if ($[41] !== label) {
+          t62 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-4 pr-2", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", color: "secondary", component: "span", className: "break-words", children: label }) });
+          $[41] = label;
+          $[42] = t62;
+        } else {
+          t62 = $[42];
+        }
+        let t72;
+        if ($[43] !== baseKey || $[44] !== data || $[45] !== property_0 || $[46] !== size) {
+          t72 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-8", children: /* @__PURE__ */ jsxRuntime.jsx(PropertyPreview, { propertyKey: baseKey, value: data, property: property_0, size }) });
+          $[43] = baseKey;
+          $[44] = data;
+          $[45] = property_0;
+          $[46] = size;
+          $[47] = t72;
+        } else {
+          t72 = $[47];
+        }
+        let t82;
+        if ($[48] !== t52 || $[49] !== t62 || $[50] !== t72) {
+          t82 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t52, children: [
+            t62,
+            t72
+          ] });
+          $[48] = t52;
+          $[49] = t62;
+          $[50] = t72;
+          $[51] = t82;
+        } else {
+          t82 = $[51];
+        }
+        return t82;
+      }
+      let t5;
+      if ($[52] !== baseKey || $[53] !== property_0 || $[54] !== suppressHeader) {
+        t5 = baseKey && !suppressHeader && property_0?.dataType === "map" && (property_0.name || !pathEndsWithIndex(baseKey));
+        $[52] = baseKey;
+        $[53] = property_0;
+        $[54] = suppressHeader;
+        $[55] = t5;
+      } else {
+        t5 = $[55];
+      }
+      const showMapHeader = t5;
+      const headerText = property_0?.name || label;
+      const t6 = `${isTopLevel ? "py-4" : "py-1"} ${isTopLevel ? `border-b ${ui.defaultBorderMixin} last:border-b-0` : ""}`;
+      let t7;
+      if ($[56] !== headerText || $[57] !== showMapHeader) {
+        t7 = showMapHeader && /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", color: "secondary", component: "span", children: headerText });
+        $[56] = headerText;
+        $[57] = showMapHeader;
+        $[58] = t7;
+      } else {
+        t7 = $[58];
+      }
+      const t8 = baseKey ? `pl-4 mt-1 border-l ${ui.defaultBorderMixin}` : "";
+      let t9;
+      if ($[59] !== baseKey || $[60] !== data || $[61] !== properties || $[62] !== size) {
+        let t102;
+        if ($[64] !== baseKey || $[65] !== properties || $[66] !== size) {
+          t102 = (t112) => {
+            const [key, value] = t112;
+            if (value === null || value === void 0) {
+              return null;
+            }
+            const currentKey_0 = baseKey ? `${baseKey}.${key}` : key;
+            return /* @__PURE__ */ jsxRuntime.jsx(PropertyCollectionView, { data: value, properties, baseKey: currentKey_0, size }, currentKey_0);
+          };
+          $[64] = baseKey;
+          $[65] = properties;
+          $[66] = size;
+          $[67] = t102;
+        } else {
+          t102 = $[67];
+        }
+        t9 = Object.entries(data).map(t102);
+        $[59] = baseKey;
+        $[60] = data;
+        $[61] = properties;
+        $[62] = size;
+        $[63] = t9;
+      } else {
+        t9 = $[63];
+      }
+      let t10;
+      if ($[68] !== t8 || $[69] !== t9) {
+        t10 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t8, children: t9 });
+        $[68] = t8;
+        $[69] = t9;
+        $[70] = t10;
+      } else {
+        t10 = $[70];
+      }
+      let t11;
+      if ($[71] !== t10 || $[72] !== t6 || $[73] !== t7) {
+        t11 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t6, children: [
+          t7,
+          t10
+        ] });
+        $[71] = t10;
+        $[72] = t6;
+        $[73] = t7;
+        $[74] = t11;
+      } else {
+        t11 = $[74];
+      }
+      return t11;
+    }
+    if (baseKey) {
+      let t4;
+      if ($[75] !== baseKey || $[76] !== properties) {
+        t4 = buildPropertyLabelAndGetProperty(properties, baseKey);
+        $[75] = baseKey;
+        $[76] = properties;
+        $[77] = t4;
+      } else {
+        t4 = $[77];
+      }
+      const {
+        label: label_0,
+        property: property_1
+      } = t4;
+      if (!property_1) {
+        return null;
+      }
+      const t5 = `grid grid-cols-12 gap-x-4 ${isTopLevel ? "py-4" : "py-2"} items-start ${isTopLevel ? `border-b ${ui.defaultBorderMixin} last:border-b-0` : ""}`;
+      let t6;
+      if ($[78] !== label_0) {
+        t6 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-4 pr-2", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", color: "secondary", component: "span", className: "break-words", children: label_0 }) });
+        $[78] = label_0;
+        $[79] = t6;
+      } else {
+        t6 = $[79];
+      }
+      let t7;
+      if ($[80] !== baseKey || $[81] !== data || $[82] !== property_1 || $[83] !== size) {
+        t7 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-8", children: /* @__PURE__ */ jsxRuntime.jsx(PropertyPreview, { propertyKey: baseKey, value: data, property: property_1, size }) });
+        $[80] = baseKey;
+        $[81] = data;
+        $[82] = property_1;
+        $[83] = size;
+        $[84] = t7;
+      } else {
+        t7 = $[84];
+      }
+      let t8;
+      if ($[85] !== t5 || $[86] !== t6 || $[87] !== t7) {
+        t8 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t5, children: [
+          t6,
+          t7
+        ] });
+        $[85] = t5;
+        $[86] = t6;
+        $[87] = t7;
+        $[88] = t8;
+      } else {
+        t8 = $[88];
+      }
+      return t8;
+    }
+    return null;
+  };
+  function EntityView({
+    entity,
+    collection,
+    path,
+    className
+  }) {
+    const authController = useAuthController();
+    const customizationController = useCustomizationController();
+    const resolvedCollection = React.useMemo(() => resolveCollection({
+      collection,
+      path,
+      entityId: entity.id,
+      values: entity.values,
+      propertyConfigs: customizationController.propertyConfigs,
+      authController
+    }), [collection, path, entity, customizationController.propertyConfigs]);
+    const properties = resolvedCollection.properties;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full " + className, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full mb-4 p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `grid grid-cols-12 gap-x-4 py-4 items-start border-b ${ui.defaultBorderMixin}`, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-4 pr-2", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", color: "secondary", component: "span", className: "break-words", children: "Id" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-grow text-surface-900 dark:text-white flex items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-grow mr-2", children: entity.id }),
+          customizationController?.entityLinkBuilder && /* @__PURE__ */ jsxRuntime.jsx("a", { href: customizationController.entityLinkBuilder({
+            entity
+          }), rel: "noopener noreferrer", target: "_blank", children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.OpenInNewIcon, { size: "small" }) }) })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(PropertyCollectionView, { data: entity.values, properties, size: "medium" })
+    ] }) });
+  }
+  function VirtualTableInput(props) {
+    const $ = reactCompilerRuntime.c(22);
+    const ref = React.useRef(null);
+    const {
+      value,
+      multiline,
+      updateValue,
+      focused
+    } = props;
+    const prevValue = React.useRef(value);
+    const [internalValue, setInternalValue] = React.useState(value);
+    const focusedState = React.useRef(false);
+    let t0;
+    if ($[0] !== internalValue || $[1] !== value) {
+      t0 = () => {
+        if (prevValue.current !== value && value !== internalValue) {
+          setInternalValue(value);
+        }
+        prevValue.current = value;
+      };
+      $[0] = internalValue;
+      $[1] = value;
+      $[2] = t0;
+    } else {
+      t0 = $[2];
+    }
+    let t1;
+    if ($[3] !== value) {
+      t1 = [value];
+      $[3] = value;
+      $[4] = t1;
+    } else {
+      t1 = $[4];
+    }
+    React.useEffect(t0, t1);
+    let t2;
+    if ($[5] !== internalValue || $[6] !== updateValue || $[7] !== value) {
+      t2 = () => {
+        const emptyInitialValue = !value;
+        if (emptyInitialValue && !internalValue) {
+          return;
+        }
+        if (internalValue !== value) {
+          prevValue.current = internalValue;
+          updateValue(internalValue);
+        }
+      };
+      $[5] = internalValue;
       $[6] = updateValue;
       $[7] = value;
       $[8] = t2;
@@ -7401,7 +7982,7 @@
         console.trace("onChange");
         if (valueType === "number") {
           if (multiple) {
-            const newValue = updatedValue.map(_temp$l);
+            const newValue = updatedValue.map(_temp$n);
             updateValue(newValue);
           } else {
             updateValue(parseFloat(updatedValue));
@@ -7438,7 +8019,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$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)) });
+      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)) });
       $[10] = disabled;
       $[11] = enumValues;
       $[12] = internalValue;
@@ -7453,10 +8034,10 @@
     }
     return t4;
   }
-  function _temp2$a(v_0) {
+  function _temp2$b(v_0) {
     return v_0.toString();
   }
-  function _temp$l(v) {
+  function _temp$n(v) {
     return parseFloat(v);
   }
   function VirtualTableNumberInput(props) {
@@ -7587,6 +8168,89 @@
     }
     return t4;
   }
+  function VirtualTableUserSelect(props) {
+    const $ = reactCompilerRuntime.c(15);
+    const {
+      internalValue,
+      disabled,
+      focused,
+      updateValue,
+      multiple
+    } = props;
+    const {
+      users,
+      getUser
+    } = useInternalUserManagementController();
+    const validValue = Array.isArray(internalValue) && multiple || !Array.isArray(internalValue) && !multiple;
+    const ref = React.useRef(null);
+    let t0;
+    let t1;
+    if ($[0] !== focused) {
+      t0 = () => {
+        if (ref.current && focused) {
+          ref.current?.focus({
+            preventScroll: true
+          });
+        }
+      };
+      t1 = [focused, ref];
+      $[0] = focused;
+      $[1] = t0;
+      $[2] = t1;
+    } else {
+      t0 = $[1];
+      t1 = $[2];
+    }
+    React.useEffect(t0, t1);
+    let t2;
+    if ($[3] !== updateValue) {
+      t2 = (updatedValue) => {
+        if (!updatedValue) {
+          updateValue(null);
+        } else {
+          updateValue(updatedValue);
+        }
+      };
+      $[3] = updateValue;
+      $[4] = t2;
+    } else {
+      t2 = $[4];
+    }
+    const onChange = t2;
+    let t3;
+    if ($[5] !== getUser) {
+      t3 = (userId) => {
+        const user = getUser(userId);
+        return /* @__PURE__ */ jsxRuntime.jsx(UserDisplay, { user });
+      };
+      $[5] = getUser;
+      $[6] = t3;
+    } else {
+      t3 = $[6];
+    }
+    const renderValue = t3;
+    let t4;
+    if ($[7] !== disabled || $[8] !== internalValue || $[9] !== multiple || $[10] !== onChange || $[11] !== renderValue || $[12] !== users || $[13] !== 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 : [], onValueChange: onChange, children: users?.map(_temp$m) }) : /* @__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 : "", onValueChange: onChange, renderValue, children: users?.map(_temp2$a) });
+      $[7] = disabled;
+      $[8] = internalValue;
+      $[9] = multiple;
+      $[10] = onChange;
+      $[11] = renderValue;
+      $[12] = users;
+      $[13] = validValue;
+      $[14] = t4;
+    } else {
+      t4 = $[14];
+    }
+    return t4;
+  }
+  function _temp2$a(user_1) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: user_1.uid, children: /* @__PURE__ */ jsxRuntime.jsx(UserDisplay, { user: user_1 }) }, user_1.uid);
+  }
+  function _temp$m(user_0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.MultiSelectItem, { value: user_0.uid, children: /* @__PURE__ */ jsxRuntime.jsx(UserDisplay, { user: user_0 }) }, user_0.uid);
+  }
   class ErrorBoundary extends React.Component {
     constructor(props) {
       super(props);
@@ -7634,7 +8298,8 @@
     const processFile = storage?.processFile;
     const metadata = storage?.metadata;
     const size = multipleFilesSupported ? "medium" : "large";
-    const compression = storage?.imageCompression;
+    const imageResize = storage?.imageResize;
+    const legacyCompression = storage?.imageCompression;
     const internalInitialValue = getInternalInitialValue(multipleFilesSupported, value, metadata, size);
     const [initialValue, setInitialValue] = React.useState(value);
     const [internalValue, setInternalValue] = React.useState(internalInitialValue);
@@ -7706,6 +8371,11 @@
         onChange(fieldValue ? fieldValue[0] : null);
       }
     }, [internalValue, multipleFilesSupported, onChange, storage, storageSource]);
+    const onFileUploadError = React.useCallback((entry_0) => {
+      console.debug("onFileUploadError", entry_0);
+      const newValue_0 = internalValue.filter((item) => item.id !== entry_0.id);
+      setInternalValue(newValue_0);
+    }, [internalValue]);
     const onFilesAdded = React.useCallback(async (acceptedFiles) => {
       if (!acceptedFiles.length || disabled) return;
       if (processFile) {
@@ -7724,8 +8394,8 @@
       let newInternalValue;
       if (multipleFilesSupported) {
         newInternalValue = [...internalValue, ...await Promise.all(acceptedFiles.map(async (file_2) => {
-          if (compression && compressionFormat(file_2)) {
-            file_2 = await resizeAndCompressImage(file_2, compression);
+          if ((imageResize || legacyCompression) && isImageFile(file_2)) {
+            file_2 = await resizeImage(file_2, imageResize, legacyCompression);
           }
           return {
             id: getRandomId$2(),
@@ -7737,8 +8407,8 @@
         }))];
       } else {
         let file_3 = acceptedFiles[0];
-        if (compression && compressionFormat(file_3)) {
-          file_3 = await resizeAndCompressImage(file_3, compression);
+        if ((imageResize || legacyCompression) && isImageFile(file_3)) {
+          file_3 = await resizeImage(file_3, imageResize, legacyCompression);
         }
         newInternalValue = [{
           id: getRandomId$2(),
@@ -7750,7 +8420,7 @@
       }
       newInternalValue = removeDuplicates(newInternalValue);
       setInternalValue(newInternalValue);
-    }, [disabled, fileNameBuilder, internalValue, metadata, multipleFilesSupported, size]);
+    }, [disabled, fileNameBuilder, internalValue, metadata, multipleFilesSupported, size, imageResize, legacyCompression]);
     return {
       internalValue,
       setInternalValue,
@@ -7758,6 +8428,7 @@
       fileNameBuilder,
       storagePathBuilder,
       onFileUploadComplete,
+      onFileUploadError,
       onFilesAdded,
       multipleFilesSupported
     };
@@ -7788,22 +8459,42 @@
   function getRandomId$2() {
     return Math.floor(Math.random() * Math.floor(Number.MAX_SAFE_INTEGER));
   }
-  const supportedTypes = {
-    "image/jpeg": "JPEG",
-    "image/png": "PNG",
-    "image/webp": "WEBP"
-  };
-  const compressionFormat = (file) => supportedTypes[file.type] ? supportedTypes[file.type] : null;
-  const defaultQuality = 100;
-  const resizeAndCompressImage = (file, compression) => new Promise((resolve) => {
-    const inputQuality = compression.quality === void 0 ? defaultQuality : compression.quality;
-    const quality = inputQuality >= 0 ? inputQuality <= 100 ? inputQuality : 100 : 100;
-    const format = compressionFormat(file);
-    if (!format) {
-      throw Error("resizeAndCompressImage: Unsupported image format");
-    }
-    Resizer.imageFileResizer(file, compression.maxWidth || Number.MAX_VALUE, compression.maxHeight || Number.MAX_VALUE, format, quality, 0, (file2) => resolve(file2), "file");
-  });
+  function isImageFile(file) {
+    return file.type === "image/jpeg" || file.type === "image/png" || file.type === "image/webp";
+  }
+  async function resizeImage(file, imageResize, legacyCompression) {
+    const maxWidth = imageResize?.maxWidth ?? legacyCompression?.maxWidth;
+    const maxHeight = imageResize?.maxHeight ?? legacyCompression?.maxHeight;
+    const quality = (imageResize?.quality ?? legacyCompression?.quality ?? 80) / 100;
+    const mode = imageResize?.mode ?? "contain";
+    let mimeType = file.type;
+    if (imageResize?.format && imageResize.format !== "original") {
+      mimeType = `image/${imageResize.format}`;
+    }
+    return new Promise((resolve, reject) => {
+      new Compressor(file, {
+        quality,
+        maxWidth,
+        maxHeight,
+        mimeType,
+        // Use cover mode if specified (crops to fit)
+        // Otherwise use contain mode (scales to fit)
+        ...mode === "cover" || mode === void 0 ? {
+          width: maxWidth,
+          height: maxHeight,
+          resize: "cover"
+        } : {},
+        success: (result) => {
+          const compressedFile = new File([result], file.name, {
+            type: result.type,
+            lastModified: Date.now()
+          });
+          resolve(compressedFile);
+        },
+        error: reject
+      });
+    });
+  }
   function StorageUploadProgress({
     storagePath,
     entry,
@@ -8015,7 +8706,7 @@
     const snackbarContext = useSnackbarController();
     let t1;
     if ($[0] !== storage.acceptedFiles) {
-      t1 = storage.acceptedFiles ? storage.acceptedFiles.map(_temp$k).reduce(_temp2$9, {}) : void 0;
+      t1 = storage.acceptedFiles ? storage.acceptedFiles.map(_temp$l).reduce(_temp2$9, {}) : void 0;
       $[0] = storage.acceptedFiles;
       $[1] = t1;
     } else {
@@ -8244,7 +8935,7 @@
       ...b
     };
   }
-  function _temp$k(e) {
+  function _temp$l(e) {
     return {
       [e]: []
     };
@@ -8351,7 +9042,7 @@
     let t1;
     if ($[2] !== updateValue) {
       t1 = (entities) => {
-        updateValue(entities.map(_temp$j));
+        updateValue(entities.map(_temp$k));
       };
       $[2] = updateValue;
       $[3] = t1;
@@ -8512,7 +9203,7 @@
     }
     return t10;
   }, equal);
-  function _temp$j(e) {
+  function _temp$k(e) {
     return getReferenceFrom(e);
   }
   function _temp2$8(ref) {
@@ -9374,6 +10065,9 @@
         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_0.userSelect) {
+          innerComponent = /* @__PURE__ */ jsxRuntime.jsx(VirtualTableUserSelect, { name: propertyKey, multiple: false, focused: selected, disabled, small: getPreviewSizeFrom(size) !== "medium", error: validationError ?? error, internalValue, updateValue });
+          fullHeight = true;
         } 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 });
@@ -9438,7 +10132,8 @@
       return {
         __type: "EntityReference",
         id: value.id,
-        path: value.path
+        path: value.path,
+        databaseId: value.databaseId
       };
     }
     if (value instanceof GeoPoint) {
@@ -9462,7 +10157,7 @@
         case "Date":
           return new Date(value.value);
         case "EntityReference":
-          return new EntityReference(value.id, value.path);
+          return new EntityReference(value.id, value.path, value.databaseId);
         case "GeoPoint":
           return new GeoPoint(value.latitude, value.longitude);
         case "Vector":
@@ -9473,50 +10168,41 @@
     }
     return value;
   }
-  if (isLocalStorageAvailable) {
-    try {
-      for (let i = 0; i < localStorage.length; i++) {
-        const fullKey = localStorage.key(i);
-        if (fullKey && fullKey.startsWith(LOCAL_STORAGE_PREFIX)) {
-          const path = fullKey.substring(LOCAL_STORAGE_PREFIX.length);
-          const entityString = localStorage.getItem(fullKey);
-          if (entityString) {
-            try {
-              const entity = JSON.parse(entityString, customReviver);
-              entityCache.set(path, entity);
-            } catch (parseError) {
-              console.error(`Failed to parse entity for path "${path}" from localStorage:`, parseError);
-            }
-          }
-        }
-      }
-    } catch (error) {
-      console.error("Error accessing localStorage during initialization:", error);
-    }
-  }
   function saveEntityToCache(path, data) {
-    entityCache.set(path, data);
     if (isLocalStorageAvailable) {
       try {
         const key = LOCAL_STORAGE_PREFIX + path;
         const entityString = JSON.stringify(data, customReplacer);
+        console.log("Saving entity to localStorage:", {
+          key,
+          entityString
+        });
         localStorage.setItem(key, entityString);
       } catch (error) {
         console.error(`Failed to save entity for path "${path}" to localStorage:`, error);
       }
     }
   }
+  function removeEntityFromMemoryCache(path) {
+    entityCache.delete(path);
+  }
+  function saveEntityToMemoryCache(path, data) {
+    entityCache.set(path, data);
+  }
+  function getEntityFromMemoryCache(path) {
+    return entityCache.get(path);
+  }
   function getEntityFromCache(path) {
-    if (entityCache.has(path)) {
-      return entityCache.get(path);
-    }
     if (isLocalStorageAvailable) {
       try {
         const key = LOCAL_STORAGE_PREFIX + path;
         const entityString = localStorage.getItem(key);
         if (entityString) {
           const entity = JSON.parse(entityString, customReviver);
-          entityCache.set(path, entity);
+          console.log("Loaded entity from localStorage:", {
+            key,
+            entity
+          });
           return entity;
         }
       } catch (error) {
@@ -9525,12 +10211,7 @@
     }
     return void 0;
   }
-  function hasEntityInCache(path) {
-    return entityCache.has(path);
-  }
   function removeEntityFromCache(path) {
-    console.debug("Removing entity from cache", path);
-    entityCache.delete(path);
     if (isLocalStorageAvailable) {
       try {
         const key = LOCAL_STORAGE_PREFIX + path;
@@ -9540,6 +10221,26 @@
       }
     }
   }
+  function flattenKeys(obj, prefix = "", result = []) {
+    if (isObject(obj) || Array.isArray(obj)) {
+      const plainObject = isPlainObject(obj);
+      if (!plainObject && prefix) {
+        result.push(prefix);
+      } else {
+        for (const key in obj) {
+          if (Object.prototype.hasOwnProperty.call(obj, key)) {
+            const newKey = prefix ? Array.isArray(obj) ? `${prefix}[${key}]` : `${prefix}.${key}` : key;
+            if (isObject(obj[key]) || Array.isArray(obj[key])) {
+              flattenKeys(obj[key], newKey, result);
+            } else {
+              result.push(newKey);
+            }
+          }
+        }
+      }
+    }
+    return result;
+  }
   const EntityCollectionRowActions = function EntityCollectionRowActions2({
     entity,
     collection,
@@ -9567,7 +10268,9 @@
     const hasCollapsedActions = actions.some((a) => a.collapsed || a.collapsed === void 0);
     const collapsedActions = actions.filter((a_0) => a_0.collapsed || a_0.collapsed === void 0);
     const uncollapsedActions = actions.filter((a_1) => a_1.collapsed === false);
-    const hasDraft = hasEntityInCache(fullPath + "/" + entity.id);
+    const enableLocalChangesBackup = collection ? getLocalChangesBackup(collection) : false;
+    const hasDraft = enableLocalChangesBackup ? getEntityFromCache(fullPath + "/" + entity.id) : false;
+    const iconSize = largeLayout && (size === "m" || size === "l" || size == "xl") ? "medium" : "small";
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("h-full flex items-center justify-center flex-col bg-surface-50 dark:bg-surface-900 bg-opacity-90 dark:bg-opacity-90 z-10", frozen ? "sticky left-0" : ""), onClick: React.useCallback((event) => {
       event.stopPropagation();
     }, []), style: {
@@ -9577,23 +10280,31 @@
       contain: "strict"
     }, children: [
       (hasActions || selectionEnabled) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-34 flex justify-center", children: [
-        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,
-            highlightEntity,
-            unhighlightEntity,
-            onCollectionChange,
-            openEntityMode: openEntityMode ?? collection?.openEntityMode
-          });
-        }, size: largeLayout ? "medium" : "small", children: action.icon }) }, index)),
-        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) => {
+        uncollapsedActions.map((action, index) => {
+          const isEditAction = action.key === "edit";
+          const tooltip = isEditAction && hasDraft ? "Local unsaved changes" : action.name;
+          let iconButton = /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { onClick: (event_0) => {
+            event_0.stopPropagation();
+            action.onClick({
+              view: "collection",
+              entity,
+              fullPath,
+              fullIdPath,
+              collection,
+              context,
+              selectionController,
+              highlightEntity,
+              unhighlightEntity,
+              onCollectionChange,
+              openEntityMode: openEntityMode ?? collection?.openEntityMode
+            });
+          }, size: iconSize, children: action.icon });
+          if (isEditAction && hasDraft) {
+            iconButton = /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "warning", children: iconButton });
+          }
+          return /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: tooltip, asChild: true, children: iconButton }, index);
+        }),
+        hasCollapsedActions && /* @__PURE__ */ jsxRuntime.jsx(ui.Menu, { trigger: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: iconSize, 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",
@@ -9612,14 +10323,11 @@
           action_0.icon,
           action_0.name
         ] }, index_0)) }),
-        selectionEnabled && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: `Select ${entity.id}`, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Checkbox, { size: largeLayout ? "medium" : "small", checked: Boolean(isSelected), onCheckedChange }) })
+        selectionEnabled && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: `Select ${entity.id}`, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Checkbox, { size: iconSize, checked: Boolean(isSelected), onCheckedChange }) })
       ] }),
-      !hideId && size !== "xs" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-[138px] overflow-hidden truncate font-mono text-xs text-text-secondary dark:text-text-secondary-dark max-w-full text-ellipsis px-2 align-center justify-center flex items-center gap-1", onClick: (event_1) => {
+      !hideId && size !== "xs" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[138px] overflow-hidden truncate font-mono text-xs text-text-secondary dark:text-text-secondary-dark max-w-full text-ellipsis px-2 align-center justify-center flex items-center gap-1", onClick: (event_1) => {
         event_1.stopPropagation();
-      }, children: [
-        hasDraft && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Local unsaved changes", className: "inline", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Chip, { colorScheme: "orangeDarker", className: "p-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(ui.EditIcon, { size: 12 }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate text-center", children: entity ? entity.id : /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, {}) })
-      ] })
+      }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate text-center", children: entity ? entity.id : /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, {}) }) })
     ] });
   };
   function CollectionTableToolbar(t0) {
@@ -9674,7 +10382,7 @@
     }
     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$i, 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$j, children: t5 }) });
       $[6] = t3;
       $[7] = t4;
       $[8] = t6;
@@ -9761,7 +10469,7 @@
   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$i(v_0) {
+  function _temp$j(v_0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: v_0.toUpperCase() });
   }
   function getTableCellAlignment(property) {
@@ -9833,21 +10541,15 @@
     let t0;
     bb0: {
       if (collection.propertiesOrder) {
-        let propertyColumnConfigs;
+        let t12;
         if ($[0] !== collection) {
-          propertyColumnConfigs = hideAndExpandKeys(collection, collection.propertiesOrder);
-          if (collection.collectionGroup) {
-            propertyColumnConfigs.push({
-              key: COLLECTION_GROUP_PARENT_ID,
-              disabled: true
-            });
-          }
+          t12 = hideAndExpandKeys(collection, collection.propertiesOrder);
           $[0] = collection;
-          $[1] = propertyColumnConfigs;
+          $[1] = t12;
         } else {
-          propertyColumnConfigs = $[1];
+          t12 = $[1];
         }
-        t0 = propertyColumnConfigs;
+        t0 = t12;
         break bb0;
       }
       let t1;
@@ -10881,7 +11583,7 @@
     let t1;
     if ($[0] !== text) {
       const urlRegex = /https?:\/\/[^\s]+/g;
-      t1 = text.replace(urlRegex, _temp$h);
+      t1 = text.replace(urlRegex, _temp$i);
       $[0] = text;
       $[1] = t1;
     } else {
@@ -10900,7 +11602,7 @@
     }
     return t2;
   };
-  function _temp$h(url) {
+  function _temp$i(url) {
     return `<a href="${url}" class="underline" target="_blank">Link</a><br/>`;
   }
   const operationLabels$2 = {
@@ -11108,7 +11810,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$g, 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$h, children: t5 }) });
       $[16] = operation;
       $[17] = t4;
       $[18] = t5;
@@ -11121,7 +11823,7 @@
       t7 = !enumValues && /* @__PURE__ */ jsxRuntime.jsx(ui.TextField, { type: dataType === "number" ? "number" : void 0, value: internalValue !== void 0 && internalValue != null ? String(internalValue) : "", onChange: (evt) => {
         const val_0 = dataType === "number" ? parseFloat(evt.target.value) : evt.target.value;
         updateFilter(operation, val_0);
-      }, endAdornment: internalValue && /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { onClick: (e) => updateFilter(operation, void 0), children: /* @__PURE__ */ jsxRuntime.jsx(ui.CloseIcon, {}) }) });
+      }, endAdornment: internalValue !== void 0 && internalValue != null && /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { onClick: (e) => updateFilter(operation, void 0), children: /* @__PURE__ */ jsxRuntime.jsx(ui.CloseIcon, {}) }) });
       $[20] = dataType;
       $[21] = enumValues;
       $[22] = internalValue;
@@ -11137,7 +11839,7 @@
         if (value_1 !== "") {
           updateFilter(operation, dataType === "number" ? parseInt(value_1) : value_1);
         }
-      }, endAdornment: internalValue && /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { className: "absolute right-2 top-3", onClick: (e_0) => updateFilter(operation, void 0), children: /* @__PURE__ */ jsxRuntime.jsx(ui.CloseIcon, {}) }), renderValue: (enumKey) => {
+      }, endAdornment: internalValue && /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { onClick: (e_0) => updateFilter(operation, void 0), children: /* @__PURE__ */ jsxRuntime.jsx(ui.CloseIcon, {}) }), renderValue: (enumKey) => {
         if (enumKey === null) {
           return "Filter for null values";
         }
@@ -11232,7 +11934,7 @@
   function _temp2$6(op_1) {
     return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: op_1, children: operationLabels$1[op_1] }, op_1);
   }
-  function _temp$g(op_0) {
+  function _temp$h(op_0) {
     return operationLabels$1[op_0];
   }
   function BooleanFilterField(t0) {
@@ -11294,7 +11996,7 @@
   };
   const multipleSelectOperations = ["array-contains-any", "in"];
   function DateTimeFilterField(t0) {
-    const $ = reactCompilerRuntime.c(38);
+    const $ = reactCompilerRuntime.c(39);
     const {
       isArray,
       mode,
@@ -11335,7 +12037,7 @@
           newValue = newOpIsArray ? val ? [val] : [] : "";
         }
         setOperation(op);
-        setInternalValue(newValue === null ? void 0 : newValue);
+        setInternalValue(newValue);
         const hasNewValue = newValue !== null && Array.isArray(newValue) ? newValue.length > 0 : newValue !== void 0;
         if (op && hasNewValue) {
           setValue([op, newValue]);
@@ -11371,7 +12073,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$f, 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$g, children: t5 }) });
       $[13] = operation;
       $[14] = t4;
       $[15] = t5;
@@ -11379,88 +12081,90 @@
     } else {
       t6 = $[16];
     }
-    const t7 = internalValue ?? void 0;
-    let t8;
+    const t7 = internalValue === null;
+    const t8 = internalValue ?? void 0;
+    let t9;
     if ($[17] !== operation || $[18] !== updateFilter) {
-      t8 = (dateValue) => {
+      t9 = (dateValue) => {
         updateFilter(operation, dateValue === null ? void 0 : dateValue);
       };
       $[17] = operation;
       $[18] = updateFilter;
-      $[19] = t8;
+      $[19] = t9;
     } else {
-      t8 = $[19];
+      t9 = $[19];
     }
-    let t9;
-    if ($[20] !== locale || $[21] !== mode || $[22] !== t7 || $[23] !== t8) {
-      t9 = /* @__PURE__ */ jsxRuntime.jsx(ui.DateTimeField, { mode, size: "large", locale, value: t7, onChange: t8, clearable: true });
+    let t10;
+    if ($[20] !== locale || $[21] !== mode || $[22] !== t7 || $[23] !== t8 || $[24] !== t9) {
+      t10 = /* @__PURE__ */ jsxRuntime.jsx(ui.DateTimeField, { mode, size: "large", locale, disabled: t7, value: t8, onChange: t9, clearable: true });
       $[20] = locale;
       $[21] = mode;
       $[22] = t7;
       $[23] = t8;
       $[24] = t9;
+      $[25] = t10;
     } else {
-      t9 = $[24];
+      t10 = $[25];
     }
-    const t10 = internalValue === null;
-    let t11;
-    if ($[25] !== internalValue || $[26] !== operation || $[27] !== updateFilter) {
-      t11 = (checked) => {
+    const t11 = internalValue === null;
+    let t12;
+    if ($[26] !== internalValue || $[27] !== operation || $[28] !== updateFilter) {
+      t12 = (checked) => {
         if (internalValue !== null) {
           updateFilter(operation, null);
         } else {
           updateFilter(operation, void 0);
         }
       };
-      $[25] = internalValue;
-      $[26] = operation;
-      $[27] = updateFilter;
-      $[28] = t11;
+      $[26] = internalValue;
+      $[27] = operation;
+      $[28] = updateFilter;
+      $[29] = t12;
     } else {
-      t11 = $[28];
+      t12 = $[29];
     }
-    let t12;
-    if ($[29] !== t10 || $[30] !== t11) {
-      t12 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Label, { className: "border cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-surface-100 dark:[&:has(:checked)]:bg-surface-800", htmlFor: "null-filter", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Checkbox, { id: "null-filter", checked: t10, size: "small", onCheckedChange: t11 }),
+    let t13;
+    if ($[30] !== t11 || $[31] !== t12) {
+      t13 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Label, { className: "border cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-surface-100 dark:[&:has(:checked)]:bg-surface-800", htmlFor: "null-filter", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Checkbox, { id: "null-filter", checked: t11, size: "small", onCheckedChange: t12 }),
         "Filter for null values"
       ] });
-      $[29] = t10;
       $[30] = t11;
       $[31] = t12;
+      $[32] = t13;
     } else {
-      t12 = $[31];
+      t13 = $[32];
     }
-    let t13;
-    if ($[32] !== t12 || $[33] !== t9) {
-      t13 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-grow ml-2 flex flex-col gap-2", children: [
-        t9,
-        t12
+    let t14;
+    if ($[33] !== t10 || $[34] !== t13) {
+      t14 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-grow ml-2 flex flex-col gap-2", children: [
+        t10,
+        t13
       ] });
-      $[32] = t12;
-      $[33] = t9;
+      $[33] = t10;
       $[34] = t13;
+      $[35] = t14;
     } else {
-      t13 = $[34];
+      t14 = $[35];
     }
-    let t14;
-    if ($[35] !== t13 || $[36] !== t6) {
-      t14 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-[440px]", children: [
+    let t15;
+    if ($[36] !== t14 || $[37] !== t6) {
+      t15 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-[440px]", children: [
         t6,
-        t13
+        t14
       ] });
-      $[35] = t13;
-      $[36] = t6;
-      $[37] = t14;
+      $[36] = t14;
+      $[37] = t6;
+      $[38] = t15;
     } else {
-      t14 = $[37];
+      t15 = $[38];
     }
-    return t14;
+    return t15;
   }
   function _temp2$5(op_1) {
     return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: op_1, children: operationLabels[op_1] }, op_1);
   }
-  function _temp$f(op_0) {
+  function _temp$g(op_0) {
     return operationLabels[op_0];
   }
   const SelectableTable = function SelectableTable2({
@@ -12164,7 +12868,7 @@
       const searchBlocked = t12;
       let t2;
       if ($[15] !== customizationController.plugins || $[16] !== dataSource?.initTextSearch) {
-        t2 = Boolean(dataSource?.initTextSearch) || customizationController.plugins?.find(_temp$e);
+        t2 = Boolean(dataSource?.initTextSearch) || customizationController.plugins?.find(_temp$f);
         $[15] = customizationController.plugins;
         $[16] = dataSource?.initTextSearch;
         $[17] = t2;
@@ -12256,7 +12960,7 @@
     }
     return t1;
   }
-  function _temp$e(p_0) {
+  function _temp$f(p_0) {
     return Boolean(p_0.collectionView?.onTextSearchClick);
   }
   function DeleteEntityDialog({
@@ -12849,7 +13553,7 @@
       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);
+      t3 = favouriteCollections.map(_temp$e);
       $[2] = navigationController;
       $[3] = t1;
       $[4] = T0;
@@ -12883,7 +13587,7 @@
     }
     return t6;
   }
-  function _temp$d(entry_0) {
+  function _temp$e(entry_0) {
     return /* @__PURE__ */ jsxRuntime.jsx(NavigationChip, { entry: entry_0 }, entry_0.path);
   }
   const scrollsMap = {};
@@ -13100,7 +13804,7 @@
     }
     let t4;
     if ($[4] !== actions) {
-      t4 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", onClick: _temp$c, children: actions });
+      t4 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", onClick: _temp$d, children: actions });
       $[4] = actions;
       $[5] = t4;
     } else {
@@ -13187,7 +13891,7 @@
     }
     return t12;
   });
-  function _temp$c(event) {
+  function _temp$d(event) {
     event.preventDefault();
     event.stopPropagation();
   }
@@ -13600,14 +14304,16 @@
     return t5;
   }
   function useHomePageDnd({
-    items: dndItems,
-    setItems: setDndItems,
+    items,
+    setItems,
     disabled,
     onCardMovedBetweenGroups,
     onGroupMoved,
     onNewGroupDrop,
     onPersist
   }) {
+    const dndItems = items;
+    const setDndItems = setItems;
     const [activeId, setActiveId] = React.useState(null);
     const [activeIsGroup, setActiveIsGroup] = React.useState(false);
     const [currentDraggingGroupId, setCurrentDraggingGroupId] = React.useState(null);
@@ -13615,6 +14321,9 @@
     const [isDraggingCardOnly, setIsDraggingCardOnly] = React.useState(false);
     const [dialogOpenForGroup, setDialogOpenForGroup] = React.useState(null);
     const [isHoveringNewGroupDropZone, setIsHoveringNewGroupDropZone] = React.useState(false);
+    const [pendingNewGroupName, setPendingNewGroupName] = React.useState(null);
+    const [stateBeforeNewGroup, setStateBeforeNewGroup] = React.useState(null);
+    const preDragItemsRef = React.useRef(null);
     const interimItemsRef = React.useRef(null);
     React.useEffect(() => {
       interimItemsRef.current = dndItems;
@@ -13649,32 +14358,6 @@
       if (activeIsGroup) {
         const groups = args.droppableContainers.filter((c) => dndItems.some((g_2) => g_2.name === c.id));
         if (!groups.length) return [];
-        if (groups.length > 0) {
-          const firstGroup = groups[0];
-          const firstGroupRect = firstGroup.rect.current;
-          const {
-            x,
-            y
-          } = args.pointerCoordinates || {
-            x: 0,
-            y: 0
-          };
-          if (firstGroupRect && y < firstGroupRect.top + 20) {
-            return [{
-              id: firstGroup.id,
-              data: {
-                insertBefore: true
-              }
-            }];
-          }
-        }
-        const cornersResult = core.closestCorners({
-          ...args,
-          droppableContainers: groups
-        });
-        if (cornersResult.length) {
-          return cornersResult;
-        }
         return core.closestCenter({
           ...args,
           droppableContainers: groups
@@ -13732,6 +14415,7 @@
     }) => {
       setDndKitActiveNode(active);
       if (disabled) return;
+      preDragItemsRef.current = cloneItemsForDnd(dndItems);
       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";
@@ -13755,18 +14439,30 @@
       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);
+        lastOverId.current = overIdNow;
+        setDndItems((current) => {
+          const newState = cloneItemsForDnd(current);
+          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 current;
+          const src = newState[srcIdx];
+          const tgt = newState[tgtIdx];
+          const idxInSrc = src.entries.findIndex((e_2) => e_2.url === activeIdNow);
+          if (idxInSrc === -1) return current;
+          const [moved] = src.entries.splice(idxInSrc, 1);
+          const overIsContainer_0 = overIdNow === overCont;
+          if (overIsContainer_0) {
+            tgt.entries.push(moved);
+          } else {
+            const overIdx = tgt.entries.findIndex((e_3) => e_3.url === overIdNow);
+            if (overIdx !== -1) {
+              tgt.entries.splice(overIdx, 0, moved);
+            } else {
+              tgt.entries.push(moved);
+            }
+          }
+          return newState;
+        });
       } else if (activeCont === overCont) {
         recentlyMovedToNewContainer.current = false;
       }
@@ -13782,75 +14478,112 @@
       const activeIdNow_0 = active_1.id;
       const overIdNow_0 = over_0.id;
       if (activeIsGroup) {
-        const insertBefore = over_0.data?.current?.insertBefore;
-        if (insertBefore && activeIdNow_0 !== overIdNow_0) {
+        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);
-          if (from !== -1 && from !== 0) {
-            const newState_0 = sortable.arrayMove(dndItems, from, 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, 0);
-          }
-        } else if (activeIdNow_0 !== overIdNow_0 && dndItems.some((g_13) => g_13.name === overIdNow_0)) {
-          const from_0 = dndItems.findIndex((g_11) => g_11.name === activeIdNow_0);
-          const to = dndItems.findIndex((g_12) => g_12.name === overIdNow_0);
-          if (from_0 !== -1 && to !== -1) {
-            const newState_1 = sortable.arrayMove(dndItems, from_0, to);
-            setDndItems(newState_1);
-            onPersist?.(newState_1);
-            onGroupMoved?.(activeIdNow_0, from_0, to);
+            onGroupMoved?.(activeIdNow_0, from, to);
           }
         }
       } else {
-        const activeCont_0 = findDndContainer(activeIdNow_0);
+        const findContainerInState = (id_0, state) => {
+          const group_0 = state.find((g_13) => g_13.name === id_0);
+          if (group_0) return group_0.name;
+          for (const g_14 of state) {
+            if (g_14.entries.some((e_4) => e_4.url === id_0)) return g_14.name;
+          }
+          return void 0;
+        };
+        const sourceState = preDragItemsRef.current || dndItems;
+        const activeCont_0 = findContainerInState(activeIdNow_0, sourceState);
+        findDndContainer(overIdNow_0);
         if (overIdNow_0 === "new-group-drop-zone") {
           if (activeCont_0) {
-            const newState_2 = cloneItemsForDnd(dndItems);
-            const srcIdx_0 = newState_2.findIndex((g_14) => g_14.name === activeCont_0);
+            setStateBeforeNewGroup(cloneItemsForDnd(dndItems));
+            const newState_1 = cloneItemsForDnd(dndItems);
+            const srcIdx_0 = newState_1.findIndex((g_15) => g_15.name === activeCont_0);
             if (srcIdx_0 !== -1) {
-              const src_0 = newState_2[srcIdx_0];
-              const idxInSrc_0 = src_0.entries.findIndex((e_3) => e_3.url === activeIdNow_0);
+              const src_0 = newState_1[srcIdx_0];
+              const idxInSrc_0 = src_0.entries.findIndex((e_5) => e_5.url === activeIdNow_0);
               if (idxInSrc_0 !== -1) {
                 const [dragged] = src_0.entries.splice(idxInSrc_0, 1);
-                if (src_0.entries.length === 0) newState_2.splice(srcIdx_0, 1);
+                if (src_0.entries.length === 0) newState_1.splice(srcIdx_0, 1);
                 let tentative = "New Group";
                 let counter = 1;
-                while (newState_2.some((g_15) => g_15.name === tentative)) tentative = `New Group ${counter++}`;
-                newState_2.push({
+                while (newState_1.some((g_16) => g_16.name === tentative)) tentative = `New Group ${counter++}`;
+                newState_1.push({
                   name: tentative,
                   entries: [dragged]
                 });
-                setDndItems(newState_2);
-                onPersist?.(newState_2);
+                setDndItems(newState_1);
+                setPendingNewGroupName(tentative);
                 setDialogOpenForGroup(tentative);
                 onNewGroupDrop?.();
               }
             }
           }
         } else {
-          const overCont_0 = findDndContainer(overIdNow_0);
-          if (activeCont_0 === overCont_0) {
-            const grpIdx = dndItems.findIndex((g_16) => g_16.name === activeCont_0);
+          const overCont_1 = findDndContainer(overIdNow_0);
+          if (activeCont_0 === overCont_1) {
+            const grpIdx = dndItems.findIndex((g_17) => g_17.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;
+              const group_1 = dndItems[grpIdx];
+              const oldIdx = group_1.entries.findIndex((e_6) => e_6.url === activeIdNow_0);
+              let newIdx = group_1.entries.findIndex((e_7) => e_7.url === overIdNow_0);
+              if (newIdx === -1 && overIdNow_0 === activeCont_0) newIdx = group_1.entries.length - 1;
               if (oldIdx !== -1 && newIdx !== -1 && oldIdx !== newIdx) {
-                const reordered = sortable.arrayMove(group_0.entries, oldIdx, newIdx);
-                const newState_3 = [...dndItems];
-                newState_3[grpIdx] = {
-                  ...group_0,
+                const reordered = sortable.arrayMove(group_1.entries, oldIdx, newIdx);
+                const newState_2 = [...dndItems];
+                newState_2[grpIdx] = {
+                  ...group_1,
                   entries: reordered
                 };
-                setDndItems(newState_3);
-                onPersist?.(newState_3);
+                setDndItems(newState_2);
+                onPersist?.(newState_2);
+              }
+            }
+          } else if (overCont_1 && activeCont_0 !== overCont_1) {
+            const finalState = cloneItemsForDnd(sourceState);
+            const finalOverId = lastOverId.current || overIdNow_0;
+            const cleanOverCont = findContainerInState(finalOverId, sourceState) || overCont_1;
+            const srcIdx_1 = finalState.findIndex((g_18) => g_18.name === activeCont_0);
+            const tgtIdx_0 = finalState.findIndex((g_19) => g_19.name === cleanOverCont);
+            if (srcIdx_1 !== -1 && tgtIdx_0 !== -1) {
+              const src_1 = finalState[srcIdx_1];
+              const tgt_0 = finalState[tgtIdx_0];
+              const idxInSrc_1 = src_1.entries.findIndex((e_8) => e_8.url === activeIdNow_0);
+              if (idxInSrc_1 !== -1) {
+                const [moved_0] = src_1.entries.splice(idxInSrc_1, 1);
+                const overIsContainer_1 = finalOverId === cleanOverCont;
+                if (overIsContainer_1) {
+                  tgt_0.entries.push(moved_0);
+                } else {
+                  const overIdx_0 = tgt_0.entries.findIndex((e_9) => e_9.url === finalOverId);
+                  if (overIdx_0 !== -1) {
+                    tgt_0.entries.splice(overIdx_0, 0, moved_0);
+                  } else {
+                    tgt_0.entries.push(moved_0);
+                  }
+                }
+                if (src_1.entries.length === 0) {
+                  finalState.splice(srcIdx_1, 1);
+                }
+                setDndItems(finalState);
+                onPersist?.(finalState);
+                onCardMovedBetweenGroups?.(moved_0);
               }
             }
-          } else if (recentlyMovedToNewContainer.current && interimItemsRef.current) {
-            onPersist?.(interimItemsRef.current);
+          } else if (recentlyMovedToNewContainer.current) {
+            console.error("Move between containers detected but conditions not met", {
+              activeCont: activeCont_0,
+              overCont: overCont_1,
+              activeIdNow: activeIdNow_0,
+              overIdNow: overIdNow_0
+            });
           }
-          onCardMovedBetweenGroups?.(dndItems.flatMap((g_17) => g_17.entries).find((e_6) => e_6.url === activeIdNow_0));
         }
       }
       resetDragState();
@@ -13863,15 +14596,13 @@
       setIsDraggingCardOnly(false);
       recentlyMovedToNewContainer.current = false;
     };
-    const handleDragCancel = () => {
-      resetDragState();
-    };
+    const handleDragCancel = () => resetDragState();
     const handleRenameGroup = (oldName, newName) => {
-      setDndItems((current) => {
-        const idx = current.findIndex((g_18) => g_18.name === oldName);
-        if (idx === -1) return current;
-        if (current.some((g_19) => g_19.name === newName && g_19.name !== oldName)) return current;
-        const updated = [...current];
+      setDndItems((current_0) => {
+        const idx = current_0.findIndex((g_20) => g_20.name === oldName);
+        if (idx === -1) return current_0;
+        if (current_0.some((g_21) => g_21.name === newName && g_21.name !== oldName)) return current_0;
+        const updated = [...current_0];
         updated[idx] = {
           ...updated[idx],
           name: newName
@@ -13879,9 +14610,20 @@
         onPersist?.(updated);
         return updated;
       });
+      setPendingNewGroupName(null);
+      setStateBeforeNewGroup(null);
+      setDialogOpenForGroup(null);
     };
-    const activeItemForOverlay = disabled || !activeId || activeIsGroup ? null : dndItems.flatMap((g_20) => g_20.entries).find((e_7) => e_7.url === activeId) || null;
-    const activeGroupData = disabled || !activeId || !activeIsGroup ? null : dndItems.find((g_21) => g_21.name === activeId) || null;
+    const handleDialogClose = () => {
+      if (pendingNewGroupName && dialogOpenForGroup === pendingNewGroupName && stateBeforeNewGroup) {
+        setDndItems(stateBeforeNewGroup);
+      }
+      setPendingNewGroupName(null);
+      setStateBeforeNewGroup(null);
+      setDialogOpenForGroup(null);
+    };
+    const activeItemForOverlay = disabled || !activeId || activeIsGroup ? null : dndItems.flatMap((g_22) => g_22.entries).find((e_10) => e_10.url === activeId) || null;
+    const activeGroupData = disabled || !activeId || !activeIsGroup ? null : dndItems.find((g_23) => g_23.name === activeId) || null;
     return {
       sensors,
       collisionDetection,
@@ -13899,6 +14641,7 @@
       dialogOpenForGroup,
       setDialogOpenForGroup,
       handleRenameGroup,
+      handleDialogClose,
       isHoveringNewGroupDropZone,
       setIsHoveringNewGroupDropZone
     };
@@ -13999,7 +14742,7 @@
     return t8;
   }
   function RenameGroupDialog(t0) {
-    const $ = reactCompilerRuntime.c(41);
+    const $ = reactCompilerRuntime.c(40);
     const {
       open,
       initialName,
@@ -14191,19 +14934,18 @@
       t15 = $[35];
     }
     let t16;
-    if ($[36] !== onClose || $[37] !== open || $[38] !== t11 || $[39] !== t15) {
-      t16 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Dialog, { open, onOpenChange: onClose, children: [
+    if ($[36] !== open || $[37] !== t11 || $[38] !== t15) {
+      t16 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Dialog, { open, children: [
         t6,
         t11,
         t15
       ] });
-      $[36] = onClose;
-      $[37] = open;
-      $[38] = t11;
-      $[39] = t15;
-      $[40] = t16;
+      $[36] = open;
+      $[37] = t11;
+      $[38] = t15;
+      $[39] = t16;
     } else {
-      t16 = $[40];
+      t16 = $[39];
     }
     return t16;
   }
@@ -14277,7 +15019,7 @@
             entries: []
           });
         }
-        allProcessed = allProcessed.filter((g_4) => g_4.entries.length || groupOrderFromNavController.includes(g_4.name) || g_4.name === DEFAULT_GROUP_NAME && hasPluginAdditionalCards);
+        allProcessed = allProcessed.filter((g_4) => g_4.entries.length || g_4.name === DEFAULT_GROUP_NAME && hasPluginAdditionalCards);
       }
       const admin = allProcessed.find((g_5) => g_5.name === ADMIN_GROUP_NAME);
       return {
@@ -14303,16 +15045,11 @@
       }] : draggable;
       onNavigationEntriesUpdate(all);
     };
-    const [collapsedGroups, setCollapsedGroups] = React.useState({});
-    const isGroupCollapsed = React.useCallback((name_0) => {
-      return !!collapsedGroups[name_0];
-    }, [collapsedGroups]);
-    const toggleGroupCollapsed = React.useCallback((name_1) => {
-      setCollapsedGroups((prev) => ({
-        ...prev,
-        [name_1]: !prev[name_1]
-      }));
-    }, []);
+    const groupNames = React.useMemo(() => [...items.map((item) => item.name), ...adminGroupData ? [adminGroupData.name] : []], [items, adminGroupData]);
+    const {
+      isGroupCollapsed,
+      toggleGroupCollapsed
+    } = useCollapsedGroups(groupNames);
     const {
       sensors,
       collisionDetection,
@@ -14330,6 +15067,7 @@
       dialogOpenForGroup,
       setDialogOpenForGroup,
       handleRenameGroup,
+      handleDialogClose,
       isHoveringNewGroupDropZone,
       setIsHoveringNewGroupDropZone
     } = useHomePageDnd({
@@ -14337,22 +15075,12 @@
       setItems: updateItems,
       disabled: !allowDragAndDrop || performingSearch,
       onPersist: persistNavigationGroups,
-      // ——► persistence here
       onGroupMoved: (g_8) => context.analyticsController?.onAnalyticsEvent?.("home_move_group", {
         name: g_8
       }),
-      onCardMovedBetweenGroups: (card) => {
-        let targetGroup = items.find((group) => group.entries.some((entry) => entry.url === card.url));
-        if (!targetGroup && adminGroupData?.entries.some((entry_0) => entry_0.url === card.url)) {
-          targetGroup = adminGroupData;
-        }
-        if (targetGroup && isGroupCollapsed(targetGroup.name)) {
-          toggleGroupCollapsed(targetGroup.name);
-        }
-        context.analyticsController?.onAnalyticsEvent?.("home_move_card", {
-          id: card.id
-        });
-      },
+      onCardMovedBetweenGroups: (card) => context.analyticsController?.onAnalyticsEvent?.("home_move_card", {
+        id: card.id
+      }),
       onNewGroupDrop: () => context.analyticsController?.onAnalyticsEvent?.("home_drop_new_group")
     });
     const {
@@ -14392,7 +15120,7 @@
             frequency: 500
           }
         }, onDragStart, onDragOver, onDragEnd, onDragCancel, modifiers: dndModifiers, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: containers, strategy: sortable.verticalListSortingStrategy, children: items.map((groupData) => {
+          /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: containers, strategy: sortable.verticalListSortingStrategy, children: items.map((groupData, groupIndex) => {
             const groupKey = groupData.name;
             const entriesInGroup = groupData.entries;
             const AdditionalCards = [];
@@ -14403,22 +15131,22 @@
               group: groupKey === DEFAULT_GROUP_NAME ? void 0 : groupKey,
               context
             };
-            if (entriesInGroup.length === 0 && (AdditionalCards.length === 0 || performingSearch) && !groupOrderFromNavController.includes(groupKey)) return null;
+            if (entriesInGroup.length === 0 && (AdditionalCards.length === 0 || performingSearch)) 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);
             }, collapsed: isGroupCollapsed(groupKey), onToggleCollapsed: () => toggleGroupCollapsed(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_1) => /* @__PURE__ */ jsxRuntime.jsx(SortableNavigationCard, { entry: entry_1, onClick: () => {
+              entriesInGroup.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(SortableNavigationCard, { entry, onClick: () => {
                 let event = "unmapped_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";
+                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_1.path
+                  path: entry.path
                 });
-              } }, entry_1.url)),
+              } }, entry.url)),
               !performingSearch && groupKey.toLowerCase() !== ADMIN_GROUP_NAME.toLowerCase() && AdditionalCards.map((C, i_1) => /* @__PURE__ */ jsxRuntime.jsx(C, { ...actionProps }, `extra_${groupKey}_${i_1}`))
-            ] }) }) }) }, groupKey);
+            ] }) }) }) }, `group-${groupIndex}`);
           }) }, 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: {
@@ -14426,22 +15154,21 @@
             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, collapsed: isGroupCollapsed(adminGroupData.name), onToggleCollapsed: () => toggleGroupCollapsed(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_2) => /* @__PURE__ */ jsxRuntime.jsx(NavigationCardBinding, { ...entry_2, onClick: () => {
+        !performingSearch && adminGroupData && /* @__PURE__ */ jsxRuntime.jsx(NavigationGroup, { group: adminGroupData.name, collapsed: isGroupCollapsed(adminGroupData.name), onToggleCollapsed: () => toggleGroupCollapsed(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_2.type === "collection") event_0 = "home_navigate_to_collection";
-          else if (entry_2.type === "view") event_0 = "home_navigate_to_view";
-          else if (entry_2.type === "admin") event_0 = "home_navigate_to_admin_view";
+          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_2.path
+            path: entry_0.path
           });
-        } }, entry_2.url)) }) }),
+        } }, entry_0.url)) }) }),
         additionalPluginSections,
         additionalPluginChildrenEnd,
         additionalChildrenEnd
       ] }),
-      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) => {
+      dialogOpenForGroup && /* @__PURE__ */ jsxRuntime.jsx(RenameGroupDialog, { open: true, initialName: dialogOpenForGroup, existingGroupNames: items.map((g_9) => g_9.name).filter((n) => n !== dialogOpenForGroup), onClose: handleDialogClose, onRename: (newName) => {
         handleRenameGroup(dialogOpenForGroup, newName);
-        setDialogOpenForGroup(null);
       } })
     ] });
   }
@@ -14764,61 +15491,60 @@
     ] });
   }
   const ErrorFocus = (t0) => {
-    const $ = reactCompilerRuntime.c(6);
+    const $ = reactCompilerRuntime.c(10);
     const {
       containerRef
     } = t0;
     const {
-      isSubmitting,
       isValidating,
-      errors
+      errors,
+      version
     } = formex.useFormex();
+    const prevVersion = React.useRef(version);
     let t1;
-    let t2;
-    if ($[0] !== containerRef || $[1] !== errors || $[2] !== isSubmitting || $[3] !== isValidating) {
+    if ($[0] !== containerRef?.current || $[1] !== errors || $[2] !== isValidating || $[3] !== version) {
       t1 = () => {
+        if (version === prevVersion.current) {
+          return;
+        }
         const keys = Object.keys(errors);
-        if (keys.length > 0 && isSubmitting && !isValidating) {
+        if (!isValidating && keys.length > 0) {
           const errorElement = containerRef?.current?.querySelector(`#form_field_${keys[0]}`);
-          if (errorElement && containerRef?.current) {
-            const scrollableParent = getScrollableParent(containerRef.current);
-            if (scrollableParent) {
-              const top = errorElement.getBoundingClientRect().top;
-              scrollableParent.scrollTo({
-                top: scrollableParent.scrollTop + top - 196,
-                behavior: "smooth"
-              });
-            }
+          if (errorElement) {
+            errorElement.scrollIntoView({
+              behavior: "smooth",
+              block: "center"
+            });
             const input = errorElement.querySelector("input");
             if (input) {
               input.focus();
             }
           }
+          prevVersion.current = version;
         }
       };
-      t2 = [isSubmitting, isValidating, errors, containerRef];
-      $[0] = containerRef;
+      $[0] = containerRef?.current;
       $[1] = errors;
-      $[2] = isSubmitting;
-      $[3] = isValidating;
+      $[2] = isValidating;
+      $[3] = version;
       $[4] = t1;
-      $[5] = t2;
     } else {
       t1 = $[4];
-      t2 = $[5];
+    }
+    let t2;
+    if ($[5] !== containerRef || $[6] !== errors || $[7] !== isValidating || $[8] !== version) {
+      t2 = [isValidating, errors, containerRef, version];
+      $[5] = containerRef;
+      $[6] = errors;
+      $[7] = isValidating;
+      $[8] = version;
+      $[9] = t2;
+    } else {
+      t2 = $[9];
     }
     React.useEffect(t1, t2);
     return null;
   };
-  const isScrollable = (ele) => {
-    const hasScrollableContent = ele && ele.scrollHeight > ele.clientHeight;
-    const overflowYStyle = ele ? window.getComputedStyle(ele).overflowY : null;
-    const isOverflowHidden = overflowYStyle && overflowYStyle.indexOf("hidden") !== -1;
-    return hasScrollableContent && !isOverflowHidden;
-  };
-  const getScrollableParent = (ele) => {
-    return !ele || ele === document.body ? document.body : isScrollable(ele) ? ele : getScrollableParent(ele.parentNode);
-  };
   function EntityFormActions(t0) {
     const $ = reactCompilerRuntime.c(16);
     const {
@@ -14839,7 +15565,7 @@
     const context = useFireCMSContext();
     const sideEntityController = useSideEntityController();
     let t1;
-    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) {
+    if ($[0] !== collection || $[1] !== context || $[2] !== disabled || $[3] !== entity || $[4] !== formContext || $[5] !== formex2 || $[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,
@@ -14848,13 +15574,13 @@
         collection,
         context,
         sideEntityController,
-        isSubmitting: formex2.isSubmitting,
         disabled,
         status,
         pluginActions,
         openEntityMode,
         navigateBack,
-        formContext
+        formContext,
+        formex: formex2
       }) : buildSideActions$1({
         fullPath,
         fullIdPath,
@@ -14863,18 +15589,18 @@
         collection,
         context,
         sideEntityController,
-        isSubmitting: formex2.isSubmitting,
         disabled,
         status,
         pluginActions,
-        openEntityMode
+        openEntityMode,
+        formex: formex2
       });
       $[0] = collection;
       $[1] = context;
       $[2] = disabled;
       $[3] = entity;
       $[4] = formContext;
-      $[5] = formex2.isSubmitting;
+      $[5] = formex2;
       $[6] = fullIdPath;
       $[7] = fullPath;
       $[8] = layout;
@@ -14899,14 +15625,15 @@
     collection,
     context,
     sideEntityController,
-    isSubmitting,
     disabled,
     status,
     pluginActions,
     openEntityMode,
     navigateBack,
-    formContext
+    formContext,
+    formex: formex2
   }) {
+    const hasErrors = Object.keys(formex2.errors).length > 0 && formex2.submitCount > 0;
     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) => {
@@ -14925,39 +15652,361 @@
         });
       }, children: action.icon }, action.name)) }),
       pluginActions,
-      /* @__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: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", disabled: disabled || formex2.isSubmitting, color: "primary", type: "reset", children: status === "existing" ? "Discard" : "Clear" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "filled", color: "primary", type: "submit", disabled: disabled || formex2.isSubmitting, startIcon: hasErrors ? /* @__PURE__ */ jsxRuntime.jsx(ui.ErrorIcon, {}) : void 0, children: [
         status === "existing" && "Save",
         status === "copy" && "Create copy",
         status === "new" && "Create"
       ] })
     ] });
   }
-  function buildSideActions$1({
-    savingError,
-    entity,
-    formActions,
-    fullPath,
-    fullIdPath,
-    openEntityMode,
-    collection,
-    context,
-    sideEntityController,
-    isSubmitting,
-    disabled,
-    status,
-    pluginActions
-  }) {
-    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, children: [
-        status === "existing" && "Save",
-        status === "copy" && "Create copy",
-        status === "new" && "Create"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { fullWidth: true, variant: "text", disabled: disabled || isSubmitting, type: "reset", children: status === "existing" ? "Discard" : "Clear" }),
-      pluginActions,
-      savingError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { color: "error", children: savingError.message }) })
-    ] });
+  function buildSideActions$1({
+    savingError,
+    entity,
+    formActions,
+    fullPath,
+    fullIdPath,
+    openEntityMode,
+    collection,
+    context,
+    sideEntityController,
+    disabled,
+    status,
+    pluginActions,
+    formex: formex2
+  }) {
+    const hasErrors = Object.keys(formex2.errors).length > 0 && formex2.submitCount > 0;
+    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", startIcon: hasErrors ? /* @__PURE__ */ jsxRuntime.jsx(ui.ErrorIcon, {}) : void 0, disabled: disabled || formex2.isSubmitting, children: [
+        status === "existing" && "Save",
+        status === "copy" && "Create copy",
+        status === "new" && "Create"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { fullWidth: true, variant: "text", disabled: disabled || formex2.isSubmitting, type: "reset", children: status === "existing" ? "Discard" : "Clear" }),
+      pluginActions,
+      savingError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { color: "error", children: savingError.message }) })
+    ] });
+  }
+  function LocalChangesMenu(t0) {
+    const $ = reactCompilerRuntime.c(42);
+    const {
+      localChangesData,
+      formex: formex2,
+      onClearLocalChanges,
+      cacheKey,
+      properties
+    } = t0;
+    const snackbarController = useSnackbarController();
+    const [previewDialogOpen, setPreviewDialogOpen] = React.useState(false);
+    const [open, setOpen] = React.useState(false);
+    let t1;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t1 = () => setOpen(true);
+      $[0] = t1;
+    } else {
+      t1 = $[0];
+    }
+    const handleOpenMenu = t1;
+    let t2;
+    if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+      t2 = () => setOpen(false);
+      $[1] = t2;
+    } else {
+      t2 = $[1];
+    }
+    const handleCloseMenu = t2;
+    let t3;
+    if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+      t3 = () => {
+        setPreviewDialogOpen(true);
+        handleCloseMenu();
+      };
+      $[2] = t3;
+    } else {
+      t3 = $[2];
+    }
+    const handlePreview = t3;
+    let t4;
+    if ($[3] !== formex2 || $[4] !== localChangesData || $[5] !== onClearLocalChanges || $[6] !== snackbarController) {
+      t4 = () => {
+        const mergedValues = mergeDeep(formex2.values, localChangesData);
+        const touched = {
+          ...formex2.touched
+        };
+        const previewKeys = flattenKeys(localChangesData);
+        previewKeys.forEach((key) => {
+          touched[key] = true;
+        });
+        formex2.setTouched(touched);
+        formex2.setValues(mergedValues);
+        snackbarController.open({
+          type: "info",
+          message: "Local changes applied to the form"
+        });
+        handleCloseMenu();
+        onClearLocalChanges?.();
+      };
+      $[3] = formex2;
+      $[4] = localChangesData;
+      $[5] = onClearLocalChanges;
+      $[6] = snackbarController;
+      $[7] = t4;
+    } else {
+      t4 = $[7];
+    }
+    const handleApply = t4;
+    let t5;
+    if ($[8] !== cacheKey || $[9] !== onClearLocalChanges || $[10] !== snackbarController) {
+      t5 = () => {
+        removeEntityFromCache(cacheKey);
+        snackbarController.open({
+          type: "info",
+          message: "Local changes discarded"
+        });
+        handleCloseMenu();
+        onClearLocalChanges?.();
+      };
+      $[8] = cacheKey;
+      $[9] = onClearLocalChanges;
+      $[10] = snackbarController;
+      $[11] = t5;
+    } else {
+      t5 = $[11];
+    }
+    const handleDiscard = t5;
+    let t6;
+    if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+      t6 = /* @__PURE__ */ jsxRuntime.jsx(ui.WarningIcon, { size: "smallest", className: "mr-1 text-yellow-600 dark:text-yellow-400" });
+      $[12] = t6;
+    } else {
+      t6 = $[12];
+    }
+    let t7;
+    if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+      t7 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { size: "small", className: "font-semibold text-xs rounded-full px-4 py-1 bg-yellow-200 dark:bg-yellow-900 hover:bg-yellow-300 dark:hover:bg-yellow-800 text-yellow-800 dark:text-yellow-200", onClick: handleOpenMenu, children: [
+        t6,
+        "Unsaved Local changes",
+        /* @__PURE__ */ jsxRuntime.jsx(ui.KeyboardArrowDownIcon, { size: "smallest" })
+      ] });
+      $[13] = t7;
+    } else {
+      t7 = $[13];
+    }
+    let t8;
+    if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+      t8 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-xs px-4 py-4 text-sm text-gray-700 dark:text-gray-300", children: "This document was edited locally and has unsaved changes. These local changes will be lost if you don't apply them." });
+      $[14] = t8;
+    } else {
+      t8 = $[14];
+    }
+    let t9;
+    if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+      t9 = /* @__PURE__ */ jsxRuntime.jsxs(ui.MenuItem, { dense: true, onClick: handlePreview, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.VisibilityIcon, { size: "small" }),
+        "Preview Changes"
+      ] });
+      $[15] = t9;
+    } else {
+      t9 = $[15];
+    }
+    let t10;
+    if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+      t10 = /* @__PURE__ */ jsxRuntime.jsx(ui.CheckIcon, { size: "small" });
+      $[16] = t10;
+    } else {
+      t10 = $[16];
+    }
+    let t11;
+    if ($[17] !== handleApply) {
+      t11 = /* @__PURE__ */ jsxRuntime.jsxs(ui.MenuItem, { dense: true, onClick: handleApply, children: [
+        t10,
+        "Apply Changes"
+      ] });
+      $[17] = handleApply;
+      $[18] = t11;
+    } else {
+      t11 = $[18];
+    }
+    let t12;
+    if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+      t12 = /* @__PURE__ */ jsxRuntime.jsx(ui.CancelIcon, { size: "small" });
+      $[19] = t12;
+    } else {
+      t12 = $[19];
+    }
+    let t13;
+    if ($[20] !== handleDiscard) {
+      t13 = /* @__PURE__ */ jsxRuntime.jsxs(ui.MenuItem, { dense: true, onClick: handleDiscard, children: [
+        t12,
+        "Discard Local Changes"
+      ] });
+      $[20] = handleDiscard;
+      $[21] = t13;
+    } else {
+      t13 = $[21];
+    }
+    let t14;
+    if ($[22] !== open || $[23] !== t11 || $[24] !== t13) {
+      t14 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Menu, { trigger: t7, open, onOpenChange: setOpen, children: [
+        t8,
+        t9,
+        t11,
+        t13
+      ] });
+      $[22] = open;
+      $[23] = t11;
+      $[24] = t13;
+      $[25] = t14;
+    } else {
+      t14 = $[25];
+    }
+    let t15;
+    if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+      t15 = /* @__PURE__ */ jsxRuntime.jsx(ui.DialogTitle, { variant: "h6", children: "Preview Local Changes" });
+      $[26] = t15;
+    } else {
+      t15 = $[26];
+    }
+    let t16;
+    if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+      t16 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", className: "mb-4", children: "These are the local changes that will be applied to the form." });
+      $[27] = t16;
+    } else {
+      t16 = $[27];
+    }
+    let t17;
+    if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+      t17 = {
+        maxHeight: 520,
+        overflow: "auto"
+      };
+      $[28] = t17;
+    } else {
+      t17 = $[28];
+    }
+    const t18 = properties;
+    let t19;
+    if ($[29] !== localChangesData || $[30] !== t18) {
+      t19 = /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogContent, { className: "my-4", children: [
+        t16,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `border rounded-lg ${ui.defaultBorderMixin}`, style: t17, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(PropertyCollectionView, { data: localChangesData, properties: t18 }) }) })
+      ] });
+      $[29] = localChangesData;
+      $[30] = t18;
+      $[31] = t19;
+    } else {
+      t19 = $[31];
+    }
+    let t20;
+    if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+      t20 = /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: () => setPreviewDialogOpen(false), children: "Close" });
+      $[32] = t20;
+    } else {
+      t20 = $[32];
+    }
+    let t21;
+    if ($[33] !== handleApply) {
+      t21 = /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogActions, { children: [
+        t20,
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "filled", onClick: () => {
+          handleApply();
+          setPreviewDialogOpen(false);
+        }, children: "Apply changes" })
+      ] });
+      $[33] = handleApply;
+      $[34] = t21;
+    } else {
+      t21 = $[34];
+    }
+    let t22;
+    if ($[35] !== previewDialogOpen || $[36] !== t19 || $[37] !== t21) {
+      t22 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Dialog, { open: previewDialogOpen, onOpenChange: setPreviewDialogOpen, maxWidth: "4xl", children: [
+        t15,
+        t19,
+        t21
+      ] });
+      $[35] = previewDialogOpen;
+      $[36] = t19;
+      $[37] = t21;
+      $[38] = t22;
+    } else {
+      t22 = $[38];
+    }
+    let t23;
+    if ($[39] !== t14 || $[40] !== t22) {
+      t23 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        t14,
+        t22
+      ] });
+      $[39] = t14;
+      $[40] = t22;
+      $[41] = t23;
+    } else {
+      t23 = $[41];
+    }
+    return t23;
+  }
+  function extractTouchedValues(values, touched) {
+    let acc = {};
+    if (!touched || typeof touched !== "object") {
+      return acc;
+    }
+    Object.entries(touched).forEach(([key, value]) => {
+      if (value) {
+        acc = formex.setIn(acc, key, formex.getIn(values, key));
+      }
+    });
+    return acc;
+  }
+  function getChanges(source, comparison) {
+    const changes = {};
+    if (!source) {
+      return {};
+    }
+    if (!comparison) {
+      return source;
+    }
+    const allKeys = Array.from(/* @__PURE__ */ new Set([...Object.keys(source), ...Object.keys(comparison)]));
+    for (const key of allKeys) {
+      const sourceValue = source[key];
+      const comparisonValue = comparison[key];
+      if (equal(sourceValue, comparisonValue)) {
+        continue;
+      }
+      const sourceHasKey = source && typeof source === "object" && Object.prototype.hasOwnProperty.call(source, key);
+      const comparisonHasKey = comparison && typeof comparison === "object" && Object.prototype.hasOwnProperty.call(comparison, key);
+      if (comparisonHasKey && !sourceHasKey) {
+        changes[key] = void 0;
+      } else if (Array.isArray(sourceValue)) {
+        const comparisonArray = Array.isArray(comparisonValue) ? comparisonValue : [];
+        if (sourceValue.length < comparisonArray.length) {
+          changes[key] = sourceValue;
+          continue;
+        }
+        const changedArray = sourceValue.map((item, index) => {
+          const comparisonItem = comparisonArray[index];
+          if (equal(item, comparisonItem)) {
+            return null;
+          }
+          if (isObject(item) && item && isObject(comparisonItem) && comparisonItem) {
+            const nestedChanges = getChanges(item, comparisonItem);
+            return Object.keys(nestedChanges).length > 0 ? nestedChanges : item;
+          }
+          return item;
+        });
+        if (changedArray.some((item) => item !== null) || sourceValue.length > comparisonArray.length) {
+          changes[key] = changedArray;
+        }
+      } else if (isObject(sourceValue) && sourceValue && isObject(comparisonValue) && comparisonValue) {
+        const nestedChanges = getChanges(sourceValue, comparisonValue);
+        if (Object.keys(nestedChanges).length > 0) {
+          changes[key] = nestedChanges;
+        }
+      } else {
+        changes[key] = sourceValue;
+      }
+    }
+    return changes;
   }
   function EntityForm({
     path,
@@ -15016,7 +16065,7 @@
     const customizationController = useCustomizationController();
     const context = useFireCMSContext();
     const analyticsController = useAnalyticsController();
-    const [underlyingChanges, setUnderlyingChanges] = React.useState({});
+    const [underlyingChanges] = React.useState({});
     const [customIdLoading, setCustomIdLoading] = React.useState(false);
     const mustSetCustomId = (status === "new" || status === "copy") && Boolean(collection.customId) && collection.customId !== "optional";
     const initialEntityId = React.useMemo(() => {
@@ -15034,6 +16083,12 @@
     const [entityIdError, setEntityIdError] = React.useState(false);
     const [savingError, setSavingError] = React.useState();
     const autoSave = collection.formAutoSave && !collection.customId;
+    const baseInitialValues = React.useMemo(() => getInitialEntityValues(authController, collection, path, status, entity, customizationController.propertyConfigs), [authController, collection, path, status, entity, customizationController.propertyConfigs]);
+    const localChangesDataRaw = React.useMemo(() => entityId ? getEntityFromCache(path + "/" + entityId) : getEntityFromCache(path + "#new"), [entityId, path]);
+    const [localChangesCleared, setLocalChangesCleared] = React.useState(false);
+    const localChangesBackup = getLocalChangesBackup(collection);
+    const autoApplyLocalChanges = localChangesBackup === "auto_apply";
+    const manualApplyLocalChanges = localChangesBackup === "manual_apply";
     const onSubmit = (values, formexController) => {
       if (mustSetCustomId && !entityId) {
         console.error("Missing custom Id");
@@ -15064,16 +16119,40 @@
         formexController.setSubmitting(false);
       });
     };
+    const [initialValues_0, initialDirty_0] = React.useMemo(() => {
+      const initialValuesWithLocalChanges = autoApplyLocalChanges && localChangesDataRaw ? mergeDeep(baseInitialValues, localChangesDataRaw) : baseInitialValues;
+      const initialValues = initialDirtyValues ? mergeDeep(initialValuesWithLocalChanges, initialDirtyValues) : initialValuesWithLocalChanges;
+      const initialDirty = Boolean(initialDirtyValues) && initialDirtyValues && Object.keys(initialDirtyValues).length > 0;
+      return [initialValues, initialDirty];
+    }, [autoApplyLocalChanges, localChangesDataRaw, baseInitialValues, initialDirtyValues]);
+    const localChangesData = React.useMemo(() => {
+      if (!localChangesDataRaw) {
+        return void 0;
+      }
+      return getChanges(localChangesDataRaw, initialValues_0);
+    }, [localChangesDataRaw, initialValues_0]);
+    const hasLocalChanges = !localChangesCleared && localChangesData && Object.keys(localChangesData).length > 0;
     const formex$1 = formexProp ?? formex.useCreateFormex({
-      initialValues: initialDirtyValues ?? getInitialEntityValues(authController, collection, path, status, entity, customizationController.propertyConfigs),
-      initialDirty: Boolean(initialDirtyValues),
+      initialValues: initialValues_0,
+      initialDirty: initialDirty_0,
+      initialTouched: initialDirtyValues ? flattenKeys(initialDirtyValues).reduce((previousValue, currentValue) => ({
+        ...previousValue,
+        [currentValue]: true
+      }), {}) : {},
       onSubmit,
       onReset: () => {
         clearDirtyCache();
-        onValuesModified?.(false);
+        onValuesModified?.(false, initialValues_0);
       },
-      validation: (values_0) => {
-        return validationSchema?.validate(values_0, {
+      onValuesChangeDeferred: (values_0, controller) => {
+        const key = status === "new" || status === "copy" ? path + "#new" : path + "/" + entityId;
+        if (controller.dirty) {
+          const touchedValues = extractTouchedValues(values_0, controller.touched);
+          saveEntityToCache(key, touchedValues);
+        }
+      },
+      validation: (values_1) => {
+        return validationSchema?.validate(values_1, {
           abortEarly: false
         }).then(() => {
           return {};
@@ -15122,14 +16201,16 @@
     }, [snackbarController]);
     function clearDirtyCache() {
       if (status === "new" || status === "copy") {
+        removeEntityFromMemoryCache(path + "#new");
         removeEntityFromCache(path + "#new");
       } else {
+        removeEntityFromMemoryCache(path + "/" + entityId);
         removeEntityFromCache(path + "/" + entityId);
       }
     }
     const onSaveSuccess = (updatedEntity) => {
       clearDirtyCache();
-      onValuesModified?.(false);
+      onValuesModified?.(false, updatedEntity.values);
       if (!autoSave) snackbarController.open({
         type: "success",
         message: `${collection.singularName ?? collection.name}: Saved correctly`
@@ -15156,7 +16237,7 @@
       console.error(e_3);
     }, [entityId, path, snackbarController]);
     const saveEntity = ({
-      values: values_1,
+      values: values_2,
       previousValues,
       entityId: entityId_0,
       collection: collection_0,
@@ -15165,7 +16246,7 @@
       return saveEntityWithCallbacks({
         path: path_0,
         entityId: entityId_0,
-        values: values_1,
+        values: values_2,
         previousValues,
         collection: collection_0,
         status,
@@ -15181,34 +16262,34 @@
       collection: collection_1,
       path: path_1,
       entityId: entityId_1,
-      values: values_2,
+      values: values_3,
       previousValues: previousValues_0,
       autoSave: autoSave_0
     }) => {
       if (!status) return;
       if (autoSave_0) {
-        setValuesToBeSaved(values_2);
+        setValuesToBeSaved(values_3);
       } else {
         return saveEntity({
           collection: collection_1,
           path: path_1,
           entityId: entityId_1,
-          values: values_2,
+          values: values_3,
           previousValues: previousValues_0
         });
       }
     };
     const lastSavedValues = React.useRef(entity?.values);
-    const save = (values_3) => {
-      lastSavedValues.current = values_3;
+    const save = (values_4) => {
+      lastSavedValues.current = values_4;
       return onSaveEntityRequest({
         collection: resolvedCollection,
         path,
         entityId,
-        values: values_3,
+        values: values_4,
         previousValues: entity?.values,
         autoSave: autoSave ?? false
-      }).then((res) => {
+      }).then(() => {
         const eventName = status === "new" ? "new_entity_saved" : status === "copy" ? "entity_copied" : status === "existing" ? "entity_edited" : "unmapped_event";
         analyticsController.onAnalyticsEvent?.(eventName, {
           path
@@ -15242,7 +16323,8 @@
         type: "error",
         message: "Error updating id, check the console"
       });
-    }, []);
+      console.error(error);
+    }, [snackbarController]);
     const pluginActions = [];
     const plugins = customizationController.plugins;
     const actionsDisabled = disabled || formex$1.isSubmitting || status === "existing" && !formex$1.dirty || Boolean(disabledProp);
@@ -15288,23 +16370,15 @@
     }, [doOnIdUpdate]);
     React.useEffect(() => {
       if (!autoSave) {
-        onValuesModified?.(modified);
+        onValuesModified?.(modified, formex$1.values);
       }
     }, [formex$1.dirty]);
-    const deferredValues = React.useDeferredValue(formex$1.values);
     const modified = formex$1.dirty;
     const uniqueFieldValidator = React.useCallback(({
       name,
-      value,
-      property
+      value
     }) => dataSource.checkUniqueField(path, name, value, entityId, collection), [dataSource, path, entityId]);
     const validationSchema = React.useMemo(() => entityId ? getYupEntitySchema(entityId, resolvedCollection.properties, uniqueFieldValidator) : void 0, [entityId, resolvedCollection.properties, uniqueFieldValidator]);
-    React.useEffect(() => {
-      const key = status === "new" || status === "copy" ? path + "#new" : path + "/" + entityId;
-      if (modified) {
-        saveEntityToCache(key, deferredValues);
-      }
-    }, [deferredValues, modified, path, entityId, status]);
     useOnAutoSave(autoSave, formex$1, lastSavedValues, save);
     React.useEffect(() => {
       if (!autoSave && !formex$1.isSubmitting && underlyingChanges && entity) {
@@ -15323,18 +16397,18 @@
         return /* @__PURE__ */ jsxRuntime.jsx(Builder, { collection, entity, modifiedValues: formex$1.values, formContext });
       }
       return /* @__PURE__ */ jsxRuntime.jsx(FormLayout, { children: formFieldKeys.map((key_1) => {
-        const property_0 = resolvedCollection.properties[key_1];
-        if (property_0) {
+        const property = resolvedCollection.properties[key_1];
+        if (property) {
           const underlyingValueHasChanged = !!underlyingChanges && Object.keys(underlyingChanges).includes(key_1) && formex$1.touched[key_1];
-          const disabled_0 = disabledProp || !autoSave && formex$1.isSubmitting || isReadOnly(property_0) || Boolean(property_0.disabled);
-          const hidden = isHidden(property_0);
+          const disabled_0 = disabledProp || !autoSave && formex$1.isSubmitting || isReadOnly(property) || Boolean(property.disabled);
+          const hidden = isHidden(property);
           if (hidden) return null;
-          const widthPercentage = property_0.widthPercentage ?? 100;
+          const widthPercentage = property.widthPercentage ?? 100;
           const cmsFormFieldProps = {
             propertyKey: key_1,
             disabled: disabled_0,
-            property: property_0,
-            includeDescription: property_0.description || property_0.longDescription,
+            property,
+            includeDescription: property.description || property.longDescription,
             underlyingValueHasChanged: underlyingValueHasChanged && !autoSave,
             context: formContext,
             partOfArray: false,
@@ -15390,10 +16464,13 @@
     }
     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: 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)
+      values: baseInitialValues
     }), noValidate: true, className: ui.cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", className), children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { id: `form_${path}`, className: ui.cls("relative flex flex-row max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit"), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("flex flex-col w-full pt-12 pb-16 px-4 sm:px-8 md:px-10"), children: [
-        formex$1.dirty ? /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Local unsaved changes", className: "self-end sticky top-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Chip, { size: "small", colorScheme: "orangeDarker", children: /* @__PURE__ */ jsxRuntime.jsx(ui.EditIcon, { size: "smallest" }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "In sync with the database", className: "self-end sticky top-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Chip, { size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(ui.CheckIcon, { size: "smallest" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-4 self-end sticky top-4 z-10", children: [
+          manualApplyLocalChanges && hasLocalChanges && /* @__PURE__ */ jsxRuntime.jsx(LocalChangesMenu, { cacheKey: status === "new" || status === "copy" ? path + "#new" : path + "/" + entityId, properties: resolvedCollection.properties, localChangesData, formex: formex$1, onClearLocalChanges: () => setLocalChangesCleared(true) }),
+          formex$1.dirty ? /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "There are local unsaved changes", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Chip, { size: "small", className: "py-1", colorScheme: "orangeDarker", children: /* @__PURE__ */ jsxRuntime.jsx(ui.EditIcon, { size: "smallest" }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "The current form is in sync with the database", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Chip, { size: "small", className: "py-1", children: /* @__PURE__ */ jsxRuntime.jsx(ui.CheckIcon, { size: "smallest" }) }) })
+        ] }),
         formView
       ] }) }),
       dialogActions
@@ -16113,7 +17190,7 @@
     }
     let t5;
     if ($[14] !== placeholder) {
-      t5 = placeholder && /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: _temp$b, className: "flex flex-col items-center justify-center w-full h-full", children: /* @__PURE__ */ jsxRuntime.jsx(ui.DescriptionIcon, { className: "text-surface-700 dark:text-surface-300" }) });
+      t5 = placeholder && /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: _temp$c, className: "flex flex-col items-center justify-center w-full h-full", children: /* @__PURE__ */ jsxRuntime.jsx(ui.DescriptionIcon, { className: "text-surface-700 dark:text-surface-300" }) });
       $[14] = placeholder;
       $[15] = t5;
     } else {
@@ -16136,7 +17213,7 @@
     }
     return t6;
   }
-  function _temp$b(e) {
+  function _temp$c(e) {
     return e.stopPropagation();
   }
   const dropZoneClasses = "box-border relative pt-[2px] items-center border border-transparent min-h-[254px] outline-none rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid";
@@ -16354,7 +17431,7 @@
       t4 = $[7];
     }
     const style = t4;
-    const getImageSizeNumber = _temp$a;
+    const getImageSizeNumber = _temp$b;
     let child;
     if (entry.storagePathOrDownloadUrl) {
       const t52 = `storage_preview_${entry.storagePathOrDownloadUrl}`;
@@ -16429,7 +17506,7 @@
     }
     return t6;
   }
-  function _temp$a(previewSize) {
+  function _temp$b(previewSize) {
     switch (previewSize) {
       case "small": {
         return 40;
@@ -17574,6 +18651,13 @@
     } = t0;
     const authController = useAuthController();
     const customizationController = useCustomizationController();
+    if (propertyKey === "created_by") {
+      console.log("Rendering field for created_by", {
+        propertyKey,
+        property,
+        context
+      });
+    }
     let t1;
     if ($[0] !== authController || $[1] !== autoFocus || $[2] !== context || $[3] !== customizationController.propertyConfigs || $[4] !== disabledProp || $[5] !== includeDescription || $[6] !== index || $[7] !== minimalistView || $[8] !== onPropertyChange || $[9] !== partOfArray || $[10] !== property || $[11] !== propertyKey || $[12] !== size || $[13] !== underlyingValueHasChanged) {
       t1 = (fieldProps) => {
@@ -17885,7 +18969,7 @@
       } else {
         t42 = $[20];
       }
-      t3 = Object.entries(mapProperties).filter(_temp$9).map(t42);
+      t3 = Object.entries(mapProperties).filter(_temp$a).map(t42);
       $[6] = autoFocus;
       $[7] = context;
       $[8] = disabled;
@@ -17955,7 +19039,7 @@
     }
     return t10;
   }
-  function _temp$9(t0) {
+  function _temp$a(t0) {
     const [, property_0] = t0;
     return !isHidden(property_0);
   }
@@ -19025,7 +20109,7 @@
     const property = t4;
     let t5;
     if ($[9] !== properties) {
-      t5 = Object.entries(properties).map(_temp$8);
+      t5 = Object.entries(properties).map(_temp$9);
       $[9] = properties;
       $[10] = t5;
     } else {
@@ -19116,7 +20200,7 @@
     }
     return t11;
   }
-  function _temp$8(t0) {
+  function _temp$9(t0) {
     const [key, property_0] = t0;
     return {
       id: key,
@@ -20053,6 +21137,11 @@
           console.error("Save failure");
           console.error(e_0);
           setError(e_0);
+        },
+        onPreSaveHookError: (e_1) => {
+          console.error("Pre-save hook error");
+          console.error(e_1);
+          setError(e_1);
         }
       });
     };
@@ -20150,7 +21239,7 @@
       width: width_0,
       frozen
     }) => {
-      const isSelected = Boolean(usedSelectionController.selectedEntities.find((e_1) => e_1.id == entity_6.id && e_1.path == entity_6.path));
+      const isSelected = Boolean(usedSelectionController.selectedEntities.find((e_2) => e_2.id == entity_6.id && e_2.path == entity_6.path));
       const customEntityActions_0 = (collection.entityActions ?? []).map((action) => resolveEntityAction(action, customizationController.entityActions)).filter(Boolean);
       const actions_0 = getActionsForEntity({
         entity: entity_6,
@@ -20159,9 +21248,9 @@
       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) => {
+      /* @__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_3) => {
         setPopOverOpen(true);
-        e_2.stopPropagation();
+        e_3.stopPropagation();
       } : void 0, children: `${collection.name}` }),
       /* @__PURE__ */ jsxRuntime.jsx(EntitiesCount, { fullPath, collection, filter: tableController.filterValues, sortBy: tableController.sortBy, onCountChange: setDocsCount })
     ] }), children: collection.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "m-4 text-surface-900 dark:text-white", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Markdown, { source: collection.description }) }) });
@@ -20196,7 +21285,7 @@
         /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "subtitle2", children: "So empty..." }),
         /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { color: "primary", variant: "outlined", onClick: onNewClick, className: "mt-4", children: [
           /* @__PURE__ */ jsxRuntime.jsx(ui.AddIcon, {}),
-          "Create your first entity"
+          "Create your first entry"
         ] })
       ] }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "label", children: "No results with the applied filter/sort" }), hoverRow, inlineEditing: checkInlineEditing(), AdditionalHeaderWidget: buildAdditionalHeaderWidget, AddColumnComponent: addColumnComponentInternal, getIdColumnWidth, additionalIDHeaderWidget: /* @__PURE__ */ jsxRuntime.jsx(EntityIdHeaderWidget, { path: fullPath, fullIdPath: fullIdPath ?? fullPath, collection }), openEntityMode }, `collection_table_${fullPath}`),
       popupCell && /* @__PURE__ */ jsxRuntime.jsx(PopupFormField, { open: Boolean(popupCell), onClose: onPopupClose, cellRect: popupCell?.cellRect, propertyKey: popupCell?.propertyKey, collection, entityId: popupCell.entityId, tableKey: tableKey.current, customFieldValidator: uniqueFieldValidator, path: resolvedFullPath, onCellValueChange: onValueChange, container: containerRef.current }, `popup_form_${popupCell?.propertyKey}_${popupCell?.entityId}`),
@@ -20438,7 +21527,7 @@
       propertyConfig,
       disabled
     } = t0;
-    const classes = "h-8 w-8 p-1 rounded-full shadow text-white " + (disabled ? "bg-surface-400 dark:bg-surface-600" : "");
+    const classes = "h-8 w-8 flex items-center justify-center rounded-full shadow text-white " + (disabled ? "bg-surface-400 dark:bg-surface-600" : "");
     let t1;
     if ($[0] !== classes || $[1] !== disabled || $[2] !== propertyConfig) {
       const defaultPropertyConfig = typeof propertyConfig?.property === "object" ? getDefaultFieldConfig(propertyConfig.property) : void 0;
@@ -20453,7 +21542,7 @@
       } else {
         t3 = $[5];
       }
-      t1 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes, style: t3, children: propertyConfig?.Icon ? getIconForWidget(propertyConfig, "medium") : getIconForWidget(defaultPropertyConfig, "medium") });
+      t1 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes, style: t3, children: propertyConfig?.Icon ? getIconForWidget(propertyConfig, "small") : getIconForWidget(defaultPropertyConfig, "small") });
       $[0] = classes;
       $[1] = disabled;
       $[2] = propertyConfig;
@@ -20773,7 +21862,7 @@
     }
     let t7;
     if ($[18] !== breadcrumbs.breadcrumbs) {
-      t7 = (breadcrumbs.breadcrumbs ?? []).length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mr-8 hidden lg:block", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row gap-2", children: breadcrumbs.breadcrumbs.map(_temp$7) }) });
+      t7 = (breadcrumbs.breadcrumbs ?? []).length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mr-8 hidden lg:block", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row gap-2", children: breadcrumbs.breadcrumbs.map(_temp$8) }) });
       $[18] = breadcrumbs.breadcrumbs;
       $[19] = t7;
     } else {
@@ -20885,7 +21974,7 @@
     }
     return t14;
   };
-  function _temp$7(breadcrumb, index) {
+  function _temp$8(breadcrumb, index) {
     return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", color: "secondary", children: "/" }),
       /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Link, { className: "visited:text-inherit visited:dark:text-inherit block", to: breadcrumb.url, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", color: "secondary", children: breadcrumb.title }) }, index)
@@ -21319,7 +22408,7 @@
         } else {
           const searchResult = iconsSearch.search(value);
           const limited = searchResult.slice(0, 50);
-          setKeys(limited.map(_temp$6));
+          setKeys(limited.map(_temp$7));
         }
       }, UPDATE_SEARCH_INDEX_WAIT_MS);
       $[0] = t3;
@@ -21386,7 +22475,7 @@
     }
     return t8;
   }
-  function _temp$6(e) {
+  function _temp$7(e) {
     return e.item.key;
   }
   function FieldCaption(t0) {
@@ -21470,7 +22559,7 @@
     }
     return t2;
   }
-  const fireCMSLogo = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAuDSURBVHgB7Z1fTFvXHcd/GDAk2RaHpmmTjMUVaE3bEJyHRO221OYp6VQJ8zaqSpg+beokHKnStIcKo0rrSyXgIdWeipFa8YjR+tA8YbKHTclDvJCp05QoZGuTaVsTp9vCf9j9XueCjX3te+17f+dc+3yki7EhIvbve35/zu+cc5u2NajOWHq4RenbW/R4eZsy97cou5x7Lbu8/fTnxW85sK9Ju4zH3BXsIAoe8lHvcR+FtAuv1RtNXheAYeyFO5uU+XpLv9wCAgjpYmiicFczRbqbPS8KzwkAozi1uKkbHI/GqBYFBBHp9lH/qRZdEF7DEwIwjD59fUMf4aKNbkawo0kXwdBZ74hBagGkb2/S3K0NSl4TP9LtAjEkLvgprHmHYIePZEVKAcDwY1fW9cd6IHauhUYvtEopBKkEkLy2oRl+rWSWXg/IKAQpBFDvht+LTEIQKoB6c/V2kUEIQgSAhA6Gn1hYp0bHSBaHNDGIgF0AqcUNGp5Z81xW7zYoG6cG/ezegE0AMDgMDwEoSoNZRXiDkTCfN2ARAGL88MxqwyR5tcKZG7gugMmrGxSfXSWFPZAbzL/b7roIXBMAXP6l1Jpe4imqZyLa5mpIcEUAcPUDn6y42plrJBIX/XpIcAPHBQDj911eVvHeYeLhVhqP+slpHBWAMr67IDmcGmwjJ3FMAMr4PER7WvT5AqcWojiSYirj84F5FCTXTlGzAJTx+UFlhXkVJ6hJAMr44oAInPAEVQsAdT5KPWV8caCZhqZaLVQtAPxhVeeLJ/FFbf2VqgSgWrlygSYblsdXg+0yEKP+zEfL5FUCLVkKND/Ofa894lpa+4H+fGn1BHkVLE9H78BueWhLAF5K+mDo0L5F7bpJvQdu6t8H/X/TXy9HdiNAmeUeym4epIVvz2vfn6b0f86TF6hmttCWAFB6yNzcgXFjHZ9R/6HPdYNXMrZVIIr0f39Cc4/e1B7PS+0p4AXs7EmwLAAna0+niQY+p5HnLlPku78nDlLZN2n632/rj7KBNvKN9/ZZDgWWBCCj68foHjnyMcW1y6mRbhd4grH7v6bkN2+TTNgJBZYEIJvrx2hPHP1QmOH3IqMQrIaCigLAqH/hgyckA3DxU8GfU7DtHslI5slpGrgzI0WOgFBw9/39FX+v4jwAXL9oMNLHO39F8y++Ia3xQWj/Tbrb8wqNHvsNiQYDd3Khstcu6wFkSPxg8Pkf/lRqw5cCpePw0m+FegMkgnffL58QlvUA2K4lkmjgd3TjpR97zvgA4Uq0cNGvmawwY2sqAIx+kVk/Er3Z7kFpEr1qgPFvvPwjvUwVxcTVjbKbcEwFIHL0I4ZOaDG/HsBU82z3z2jo8KckgkpeoKQARI5+GD8hQRLlNEmtehElgnJeoKQAcBSLCOrV+AYQAddsZT4w/rTJPE6RANDtE7FdGx9MPRvfAOFARGKYulXapkUCmLzK3+fHB4IJnkYAOQGqA6MlzQUGdamBXSQAnMbFjRfr/FrAex0XkOTOlVg5VCAAJH/c+/YR9xvJ+AYxLSGMa6UuJ8nrxaetFQgAR7JxAsM3Qtw3A+LnDAUw/t51nL78H3K7/9muQWpkYHzuvsHeamBHAAvMmX/smU/15kmjE2dcyAL2VgM+sx+4zeixD0mRg9MLwNPnVwM7AuCs/TH6GzHxMwMegNML5FcDugCQGHBO/Y489zEpChlhrAgy93dtvSMALqB0FfuLQceQqyKAtzfKQV0AOHufi6HDn5GiNJzzAsagf+oB+AQQ+Q5/M8QrhBnzgD8VCoAn/sP9q+TPHM7PZ8cDcMZ/5f4rw7V6CDfTAr57D/kEgH16ivJwlYNG1cfmAZDhquy/Mlx5AKoAbCn3cXX/lPGtgYHClQfgfoq+pUdKALLBFSpRCfiyTBt/sDdfYY1gG99n5VtiSgJ7lQewDNdg0XMAYoJ7DZyXOci0GQb5n4+rCaQEYB0uD6AngcSEl7d41TNsN6cJ/LVT+9pJCgs08X1ObALIpvspsLFCCgscDBK9TCywhYBsSzsp5MPn1LnzCm+iCYBYWPIHSGENrs8K5wixhYB77UoAVuH8rHxctyrNNqscwCqZA88TB7C9L3iIJwfIHDhKCmtkm3ni8gmEAK4cIP29ICmskdnP4wFQALCFgKW2gCoFLQD3z/U56UkgvnDBpWwvs8DkKTH6dQ/Qe9z60eK1MvfMSVKUJ9XxEnEQOpbz/LoH4JoMSh4+Qwpz4Pq5cqXQ8ZzNfbknTKUg4xv0IqlDfB4y/PQk8ZwAjvHlASoMmDN9hM9DGsm//tXOLUZqBWFAVQPFoEpKMyaAhtfXv4YZBQDjTx59lRSFjHVGiItI1669dQFAEaxe4FmVDOaD0c/5mUS6d3O+ne8iXWx9If0NKy+wC+foB/ke31fqRQ4S3+9TuQDxj36U/flV364H0ATAuThE5QI5uEd/9FThQC/w+7Gz/F6Aq/UpI8lnQ+z50NC51oLnBQLo72FbI7rDcPcANSJw/WOdfcTJXvcPCp4hDBhThFygQXQp+AY1GnD9EAEn8ddbi14rSv2jp/i9wISWC3DOgokGI19EKdzfUxziiwQwEm4lESuF4ycuNkQ+kOo4qeU+EeImdraFSq39KHoFxudOBgGqgoEXB9ndIicId8NdYnKeoXOlPXvJ2R8RySCA8fteGa5LEeA9DZwcFDL3geTPbKa3pADwy5Fufi8A6lEEGPlnTv9C2HsavWB+J3Gf+T9qJVHUkwgQ8/FeRM16YvTHzpl7dFMBiPQCAMbHqJk+EiKvMnn0NT2vETnlXW70g7I3j8YRcmc+En/38MRXaRr9+zx5BRgcyR5Gv0is3EK+rADApdlV/c6TogmuZmn+z1P6o8ykDwZ148sQvm68t6/icr+KAsA5Mi98sMx+NzEz4g/+SCMP/iCdEGBwzGiKHvUGqPun3mqr+HsVBQAmFtbpUkrsreTzgfETX83T0D8zJJpcV/M1mnj+VWna23D98++2k5VNP5YEAPourwi5pWw5IAR4hP6HX7J7BBkNbzA12FY288/HsgBwmhgSQllCwV5i/8pQ/6MvKfrNX8gtYGi4+GltHl/W5e1Y7zf/S+uCtCwAIFsoKAXOIYp8u0RRTQy9//sHhbSrFtCfwHYt7NjBhI7Mq5jsuH4DWwIAA5+sUmpRfFVgFQgi9EQTwpMHFFzJ0sHNlZLhAobFGQaPtQtb2WF4nNThpWVrdly/gW0BIAQgFHDeZUxRGczcJi76bf8720uB0S2cfaed1OFS8oBavxrjg6rWguMPjker+4MKZ0Hcn32ncr1vRtWbARBrRDaMFDlvbDfp20tNu0HgduKvi1k7oEDS56daT3ipeTvQ+ECb6WoThXsg4486sHDHkf1gSe0/I7J13Ggg9MYcGnSObQhEIqI8gfsg+a424y+F7XmASsRmVmn6mncmirxENRM9lXBcACDxxRqNXVknhTPk5l7cCbOu+GzDRSkR1E6uzm937RwnVzyAAXoGwzNr0nYQZQdGx8h38zBPVwUA0DPou6x6B3YZ0eZXJgaqn+GziusCMJBlbaHsIN5jgifKtDmHTQAgqVUHY1fWlDcwAYs5pt7yE9f5zYBVAADGH9OqhOR15Q0MMOoxuRMP8/dW2AVggAQRq4sa3Rtg9e74gF9Ye12YAAwaNSzA3Y9ebBU+hS5cAADGT15bp2ktLNS7EGQxvIEUAjCoZyHIZngDqQSQT72EBlkNbyCtAAywGQXNpdStTc/MKOJGXOiMxgUdt2MH6QWQDyqHucVNKcUAo0d7mvXTVby0NsJTAsgHnmFOE0Tm621K3+HfsqYfsK2593C3Tzc85+SNk3hWAPnAG+AsA1wLt7e0vEG7Hm075iUwumFgnKGIeyzhtG2vGnwvdSEAMwxh4BHJ5OOngjBLLI07qJ3QjIv7KaIbZ9xdq175P/vCeAzHXKL0AAAAAElFTkSuQmCC";
+  const fireCMSLogo = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAa9SURBVHgB7Z1NbBNHFMf/a7uBEgMOHy2pSlnUql+oEG7lgNgcqZAgR9RKSU5tT9mcqp6SXNoj5tBzHAmk3ggSUo/Ziko9skXqoVIlJm3Von4IhzhAIIk7b9ab+COJvZ63610nP8netWx5Z//73syb2Zm3BjqJXc4BixaQMgHjDFCWW5iVb83aH5eL8jdC7lS2a/Ny3wGyLvJGER3CQJRsCHZBfrqCBpHaRkCJuXYb2O9EKWg0AtpKtDF5gnJr5BA+BSVm/sAsQiY8AZW1PSHR7IhE2wwhX1NAWlrlywIhwC9gPISrR8iyFJDvnQIzvALapRH5PgG+uo0bAbLIfLYAJngEtJ+awOq03LOQCAxZN6bGOdw6BV3GyV1X7iEx4hFlGQGs3qt4jBbtW6Cq65bIXW0km7x06XG0SXsCei57S+4NoDtwZUs91I5LBxfQE28O8W0o2kVIEQeDihhMwO4Vz0cEFbF1AbtfPB8RRMTWBNw54vmIVkVsMYxRDYaJnYOpztl+1LQn1VxAu3QN3dPaBkGe80sTzX60vQt7geY0IsDcMw8r+wPO9N6H2TOPXHpBbn9DcfWgehHu09OYf/YGnNJ5uE9OIyJkjyWb3+rLrQVU9R71MMIbELD238XlvjsYOXQTuUywIbziSg6zC5cw8+/HcBbPI0RkwdJnt6oPtxFw6ZbX5eFn5PANDB+5qQTkQCyfwNSfX6Lw3ycICTkclh3c7IvNBQzJdUmwide+YhOunpCFHN1sFGcrAR+AsdUl95zo/xr2q98gCkhAEpIEZUQAL6Qr99XUNY2tsL3EOp5HjcPc2x9FJh5BVQQdk47NiAlkGgZOai2QOWD2xWM+kZah1nvwl+84W2xpfS9OVlthnQWuWugS8QgKhebeuYiBfffBRK7eCutduGng2ApxEM+HX0RjrPrThoD2Y7b7tHERz4dEvPXmVbXl+DvvNq1HlQWmLoMBClPiJJ4PlWn65KfgIbVuhV4jojrNLz2CJlTIBx+cQpwZ+vVbzBYvQZP1xqRigWkLDEybnyHuXDv+BYcrS4PrsWinIqC++17J3Qmth8EJeQlPTErTVDbqQAuajEUYKOsyfPgm9DGU0Rkc9V8S6r56KMDWH8V50SctMKM9WErumzSGj9yAPj0WubAFTXhcIlp4LnrZTFVmhbYNtWiMXaXI4Cm3cUYKmNIa80mieD76UYOyQGgN2SdZQLrnovsXJKAJDRgK0TE4upzaFpjLsHTQO8JB/R6JmYEuyz3A4gEkkuW90EVfwLvyZtXffUgkB03gfWihP0N1h0MCCmhQTOu7QadY0C97UdsCxd64rGQIjtijXXahbYHuvn4kFbf3GDQhC1zTCobcfdqF6Bhur+7FN8gCUy40KGb2wjlgImmQ++pf/LV5skABTb6ncCBhMF10Rwq46kCT/LFzSBozr5yFPituqjJNQUCDpLkxuS9DeUXVXbnybWgydXwQSWHquAUGHHrzBXSgCV3RJFghWV/hKIf7GsroKgKqelB7mfzoW0OIO0zWJ3nu0LsnoKoH9a2Qru64eRFxpXB0gMn6UPCnuFV35a6DgXz/h7F0Zd6La6y3GXUTLEt0f1i7g2guFzH387TaxgESb/DUKEffV/0d8tmT/oe6wYQyixUyF1gLCrGG3r3KWZaavAt1Aq7QghIWs4mDiCQelYGxvy5UBpAqagX0GhMWK1RHq4jIMOrR1rHPnv6cebCjPFO/4KZxmYM3V4ZyIJhgZPIPBxO/zyEKrvefw+TrlrJARmrqPp9IF9qE3biQ1VEsGlIUEGChDWGXyFwshMDIPy7G/voRA0sPwQFVEddl+MQU422CMYt876a9hCaLDVfJlUNrBQaePIQthbywIAJbJbnnjAyMZw+9F3LcSVnjMm0sNiTsEq2JuIYIIDHNZ0VYjx/gxPMicivPar4nweZ7cmoUmSwuwpHw0e0yHTVf8m8v5uvXRuwcZESS379tXpwW7sqtTELlVdlxuM3EI5oLqGLDNFWgAjsHUTnnpuymPWlE8Kc98dlNvNNAMAGJ3dRPNQSf2qEOkKYbIN3UsLjtiEcEt8BquiLEocGT7GS7mX/1BCS8fjMF2wmbZaTyUk9tlxOmFfQFJLwcM1JE4wqSgSNddpQjBSiPgD67SWiZsBcn5V8PIzZCkrvSTTPprsxZzsMRkPDCHQsdtcjwhPMJT8BqvHwM8pUaRuiQaCkHWKOBAAchE42APusPI1Bi0gMJTPAgvPk9NDmgGx9GsBVK0NIA1Mg3rdlTCx9z3rYha5zY2NLjMMo/eXMboxWsnv8Br15XnnLWoGsAAAAASUVORK5CYII=";
   function useBrowserTitleAndIcon(name, logo) {
     const $ = reactCompilerRuntime.c(4);
     let t0;
@@ -21575,22 +22664,9 @@
     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) => {
+    const computeTopNavigation = React.useCallback((collections, views, adminViews, viewsOrder_0, navigationGroupMappingsOverride, onNavigationEntriesUpdateCallback) => {
       const finalNavigationGroupMappings = computeNavigationGroups({
-        navigationGroupMappings,
+        navigationGroupMappings: navigationGroupMappingsOverride ?? navigationGroupMappings,
         collections,
         views,
         plugins
@@ -21622,7 +22698,7 @@
         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;
+        const pathKey_0 = view.path;
         let groupName_0 = getGroup(view);
         if (finalNavigationGroupMappings) {
           for (const pluginGroupDef_0 of finalNavigationGroupMappings) {
@@ -21645,7 +22721,7 @@
         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 pathKey_1 = view_0.path;
         const groupName_1 = NAVIGATION_ADMIN_GROUP_NAME;
         acc_1.push({
           id: `admin:${pathKey_1}`,
@@ -21679,21 +22755,43 @@
         });
       }
       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));
+      const groupsFromMappings = finalNavigationGroupMappings.map((g_0) => g_0.name);
+      const additionalGroups = collectedGroupsFromEntries.filter((g_1) => !groupsFromMappings.includes(g_1));
+      const allDefinedGroups = [...pluginGroups ?? [], ...groupsFromMappings, ...additionalGroups];
+      const uniqueGroupsArray = [...new Set(allDefinedGroups)];
+      const adminGroups = uniqueGroupsArray.filter((g_2) => g_2 === NAVIGATION_ADMIN_GROUP_NAME);
+      const nonAdminGroups = uniqueGroupsArray.filter((g_3) => g_3 !== NAVIGATION_ADMIN_GROUP_NAME);
+      const uniqueGroups = [...nonAdminGroups, ...adminGroups];
       return {
-        allowDragAndDrop: plugins?.some((plugin_2) => plugin_2.homePage?.allowDragAndDrop) ?? false,
+        allowDragAndDrop: plugins?.some((plugin_0) => plugin_0.homePage?.allowDragAndDrop) ?? false,
         navigationEntries,
         groups: uniqueGroups,
-        onNavigationEntriesUpdate: onNavigationEntriesOrderUpdate
+        onNavigationEntriesUpdate: onNavigationEntriesUpdateCallback
       };
-    }, [navigationGroupMappings, buildCMSUrlPath, buildUrlCollectionPath, pluginGroups, onNavigationEntriesOrderUpdate]);
+    }, [navigationGroupMappings, buildCMSUrlPath, buildUrlCollectionPath, pluginGroups]);
+    const onNavigationEntriesOrderUpdate = React.useCallback((entries) => {
+      if (!plugins) {
+        return;
+      }
+      const filteredEntries = entries.filter((entry) => entry.entries.length > 0);
+      if (collectionsRef.current && viewsRef.current) {
+        const updatedNav = computeTopNavigation(collectionsRef.current, viewsRef.current, adminViewsRef.current ?? [], viewsOrder, filteredEntries, onNavigationEntriesOrderUpdate);
+        setTopLevelNavigation(updatedNav);
+      }
+      if (plugins.some((plugin_2) => plugin_2.homePage?.onNavigationEntriesUpdate)) {
+        plugins.forEach((plugin_1) => {
+          if (plugin_1.homePage?.onNavigationEntriesUpdate) {
+            plugin_1.homePage.onNavigationEntriesUpdate(filteredEntries);
+          }
+        });
+      }
+    }, [plugins, computeTopNavigation, viewsOrder]);
     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);
+        const computedTopLevelNav = computeTopNavigation(resolvedCollections, resolvedViews, resolvedAdminViews, viewsOrder, void 0, onNavigationEntriesOrderUpdate);
         let shouldUpdateTopLevelNav = false;
         if (!areCollectionListsEqual(collectionsRef.current ?? [], resolvedCollections)) {
           collectionsRef.current = resolvedCollections;
@@ -21789,7 +22887,8 @@
     }, []);
     const isUrlCollectionPath = React.useCallback((path_1) => removeInitialAndTrailingSlashes(path_1 + "/").startsWith(removeInitialAndTrailingSlashes(fullCollectionPath) + "/"), [fullCollectionPath]);
     const urlPathToDataPath = React.useCallback((path_2) => {
-      if (path_2.startsWith(fullCollectionPath)) return path_2.replace(fullCollectionPath, "");
+      const decodedPath = decodeURIComponent(path_2);
+      if (decodedPath.startsWith(fullCollectionPath)) return decodedPath.replace(fullCollectionPath, "");
       throw Error("Expected path starting with " + fullCollectionPath);
     }, [fullCollectionPath]);
     const resolveIdsFrom = React.useCallback((path_3) => {
@@ -21977,6 +23076,42 @@
       }
       return acc;
     }, [...result ?? []]) : result;
+    const assignedEntries = /* @__PURE__ */ new Set();
+    if (result) {
+      result.forEach((group) => {
+        group.entries.forEach((entry) => assignedEntries.add(entry));
+      });
+    }
+    const unassignedGroupMap = {};
+    (collections ?? []).forEach((collection) => {
+      const entry = collection.id ?? collection.path;
+      if (!assignedEntries.has(entry)) {
+        const groupName = getGroup(collection);
+        if (!unassignedGroupMap[groupName]) unassignedGroupMap[groupName] = [];
+        unassignedGroupMap[groupName].push(entry);
+      }
+    });
+    (views ?? []).forEach((view) => {
+      const entry = view.path;
+      if (!assignedEntries.has(entry)) {
+        const groupName = getGroup(view);
+        if (!unassignedGroupMap[groupName]) unassignedGroupMap[groupName] = [];
+        unassignedGroupMap[groupName].push(entry);
+      }
+    });
+    Object.entries(unassignedGroupMap).forEach(([groupName, entries]) => {
+      if (result) {
+        const existingGroup = result.find((g) => g.name === groupName);
+        if (existingGroup) {
+          existingGroup.entries.push(...entries);
+        } else {
+          result.push({
+            name: groupName,
+            entries
+          });
+        }
+      }
+    });
     if (!result) {
       result = [];
       const groupMap = {};
@@ -21988,7 +23123,7 @@
       });
       (views ?? []).forEach((view) => {
         const name = getGroup(view);
-        const entry = Array.isArray(view.path) ? view.path[0] : view.path;
+        const entry = view.path;
         if (!groupMap[name]) groupMap[name] = [];
         groupMap[name].push(entry);
       });
@@ -22012,7 +23147,7 @@
       t0 = $[0];
     }
     const configCache = React.useRef(t0);
-    const getCollectionFromStorage = _temp$5;
+    const getCollectionFromStorage = _temp$6;
     let t1;
     if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
       t1 = (path) => {
@@ -22135,7 +23270,7 @@
     }
     return t11;
   }
-  function _temp$5(storageKey) {
+  function _temp$6(storageKey) {
     const item = localStorage.getItem(storageKey);
     return item ? JSON.parse(item) : {};
   }
@@ -22595,14 +23730,14 @@
       collection,
       context,
       sideEntityController,
-      isSubmitting: formex2.isSubmitting,
       disabled,
       status,
       sideDialogContext,
       pluginActions,
       openEntityMode,
       navigateBack,
-      formContext
+      formContext,
+      formex: formex2
     }) : buildSideActions({
       savingError,
       entity,
@@ -22610,14 +23745,14 @@
       collection,
       context,
       sideEntityController,
-      isSubmitting: formex2.isSubmitting,
       sideDialogContext,
       disabled,
       status,
       pluginActions,
       openEntityMode,
       navigateBack,
-      formContext
+      formContext,
+      formex: formex2
     });
   }
   function buildBottomActions({
@@ -22627,15 +23762,16 @@
     collection,
     context,
     sideEntityController,
-    isSubmitting,
     disabled,
     status,
     sideDialogContext,
     pluginActions,
     openEntityMode,
     navigateBack,
-    formContext
+    formContext,
+    formex: formex2
   }) {
+    const hasErrors = Object.keys(formex2.errors).length > 0 && formex2.submitCount > 0;
     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 }) }),
@@ -22655,15 +23791,16 @@
         return /* @__PURE__ */ jsxRuntime.jsx(EntityActionButton, { action, enabled: isEnabled, props }, action.key);
       }) }),
       pluginActions,
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", color: "primary", 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: () => {
+      hasErrors ? /* @__PURE__ */ jsxRuntime.jsx(ErrorTooltip, { title: "This form has errors", children: /* @__PURE__ */ jsxRuntime.jsx(ui.ErrorIcon, { className: "ml-4", color: "error", size: "smallest" }) }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", color: "primary", disabled: disabled || formex2.isSubmitting, type: "reset", children: status === "existing" ? "Discard" : "Clear" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: canClose ? "text" : "filled", color: "primary", type: "submit", disabled: disabled || formex2.isSubmitting, onClick: () => {
         sideDialogContext.setPendingClose(false);
       }, children: [
         status === "existing" && "Save",
         status === "copy" && "Create copy",
         status === "new" && "Create"
       ] }),
-      canClose && /* @__PURE__ */ jsxRuntime.jsxs(ui.LoadingButton, { variant: "filled", color: "primary", type: "submit", loading: isSubmitting, disabled, onClick: () => {
+      canClose && /* @__PURE__ */ jsxRuntime.jsxs(ui.LoadingButton, { variant: "filled", color: "primary", type: "submit", loading: formex2.isSubmitting, disabled, onClick: () => {
         sideDialogContext.setPendingClose?.(true);
       }, children: [
         status === "existing" && "Save and close",
@@ -22679,24 +23816,25 @@
     collection,
     context,
     sideEntityController,
-    isSubmitting,
     disabled,
     status,
     sideDialogContext,
     pluginActions,
     openEntityMode,
     navigateBack,
-    formContext
+    formContext,
+    formex: formex2
   }) {
+    const hasErrors = Object.keys(formex2.errors).length > 0 && formex2.submitCount > 0;
     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: () => {
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.LoadingButton, { fullWidth: true, variant: "filled", color: "primary", type: "submit", size: "large", startIcon: hasErrors ? /* @__PURE__ */ jsxRuntime.jsx(ui.ErrorIcon, {}) : void 0, disabled: disabled || formex2.isSubmitting, onClick: () => {
         sideDialogContext.setPendingClose?.(false);
       }, children: [
         status === "existing" && "Save",
         status === "copy" && "Create copy",
         status === "new" && "Create"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { fullWidth: true, variant: "text", disabled: disabled || isSubmitting, type: "reset", children: status === "existing" ? "Discard" : "Clear" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { fullWidth: true, variant: "text", disabled: disabled || formex2.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 = {
@@ -22851,6 +23989,7 @@
   function createFormexStub(values) {
     const errorMessage = "You are in a read-only context. You cannot modify the formex controller.";
     return {
+      debugId: "",
       values,
       initialValues: values,
       touched: {},
@@ -22865,6 +24004,9 @@
       setValues: () => {
         throw new Error(errorMessage);
       },
+      setTouched(touched) {
+        throw new Error(errorMessage);
+      },
       setFieldValue: () => {
         throw new Error(errorMessage);
       },
@@ -22924,7 +24066,7 @@
       databaseId: props.databaseId,
       useCache: false
     });
-    const cachedValues = entityId ? getEntityFromCache(props.path + "/" + entityId) : getEntityFromCache(props.path + "#new");
+    const initialDirtyValues = entityId ? getEntityFromMemoryCache(props.path + "/" + entityId) : getEntityFromMemoryCache(props.path + "#new");
     const authController = useAuthController();
     const initialStatus = props.copy ? "copy" : entityId ? "existing" : "new";
     const [status, setStatus] = React.useState(initialStatus);
@@ -22935,13 +24077,13 @@
         return entity ? canEditEntity(props.collection, authController, props.path, entity ?? null) : void 0;
       }
     }, [authController, entity, status]);
-    if (dataLoading && !cachedValues || (!entity || canEdit === void 0) && (status === "existing" || status === "copy")) {
+    if (dataLoading && !initialDirtyValues || (!entity || canEdit === void 0) && (status === "existing" || status === "copy")) {
       return /* @__PURE__ */ jsxRuntime.jsx(CircularProgressCenter, {});
     }
-    if (entityId && !entity && !cachedValues) {
+    if (entityId && !entity && !initialDirtyValues) {
       console.error(`Entity with id ${entityId} not found in collection ${props.path}`);
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(EntityEditViewInner, { ...props, entityId, entity, cachedDirtyValues: cachedValues, dataLoading, status, setStatus, canEdit });
+    return /* @__PURE__ */ jsxRuntime.jsx(EntityEditViewInner, { ...props, entityId, entity, initialDirtyValues, dataLoading, status, setStatus, canEdit });
   }
   function EntityEditViewInner({
     path,
@@ -22954,7 +24096,7 @@
     onSaved,
     onTabChange,
     entity,
-    cachedDirtyValues,
+    initialDirtyValues,
     dataLoading,
     layout = "side_panel",
     barActions,
@@ -23082,7 +24224,8 @@
       /* @__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, { 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) => {
+    const entityView = /* @__PURE__ */ jsxRuntime.jsx(EntityForm, { fullIdPath, collection, path, entityId: entityId ?? usedEntity?.id, onValuesModified, entity, initialDirtyValues, openEntityMode: layout, forceActionsAtTheBottom: actionsAtTheBottom, initialStatus: status, className: ui.cls((!mainViewVisible || !canEdit) && !selectedSecondaryForm ? "hidden" : "", formProps?.className), EntityFormActionsComponent: EntityEditViewFormActions, disabled: !canEdit, ...formProps, onEntityChange: (entity_0) => {
+      console.log("333 EntityEditView onEntityChange:", entity_0);
       setUsedEntity(entity_0);
       formProps?.onEntityChange?.(entity_0);
     }, onStatusChange: (status_0) => {
@@ -23105,7 +24248,12 @@
     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 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,
+        barActions?.({
+          path: fullIdPath ?? path,
+          entityId,
+          values: formContext?.values ?? usedEntity?.values ?? {},
+          status
+        }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow" }),
         pluginActionsTop,
         globalLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.CircularProgress, { size: "small" }) }),
@@ -23208,9 +24356,14 @@
     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, fullIdPath, 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: ({
+      status,
+      values
+    }) => /* @__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: () => {
+        const key = status === "new" || status === "copy" ? path + "#new" : path + "/" + entityId;
+        saveEntityToMemoryCache(key, values);
         if (entityId) navigate(location.pathname);
         else navigate(location.pathname + "#new");
       }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.OpenInFullIcon, { size: "small" }) })
@@ -23470,7 +24623,7 @@
       t3 = () => {
         const state = location.state;
         const panelKeys = state?.panels ?? [];
-        const newPanels_0 = panelKeys.map((key) => routesStore.current[key]).filter(_temp$4);
+        const newPanels_0 = panelKeys.map((key) => routesStore.current[key]).filter(_temp$5);
         if (!equal(sidePanelsRef.current.map(_temp2$3), newPanels_0.map(_temp3$1))) {
           updateSidePanels(newPanels_0);
         }
@@ -23618,7 +24771,7 @@
   function _temp2$3(p_0) {
     return p_0.key;
   }
-  function _temp$4(p) {
+  function _temp$5(p) {
     return Boolean(p);
   }
   function useBuildDataSource({
@@ -23913,7 +25066,7 @@
     const dataSourceKey = dataSourceDelegate.key;
     let t1;
     if ($[0] !== plugins) {
-      t1 = plugins?.map(_temp$3);
+      t1 = plugins?.map(_temp$4);
       $[0] = plugins;
       $[1] = t1;
     } else {
@@ -23949,7 +25102,7 @@
     React.useEffect(t2, t3);
     return accessResponse;
   }
-  function _temp$3(plugin) {
+  function _temp$4(plugin) {
     return plugin.key;
   }
   function FireCMS(props) {
@@ -23962,22 +25115,27 @@
       authController,
       storageSource,
       dataSourceDelegate,
-      plugins: pluginsProp,
+      plugins: _pluginsProp,
       onAnalyticsEvent,
       propertyConfigs,
       entityViews,
       entityActions,
       components,
       navigationController,
-      apiKey
+      apiKey,
+      userManagement: _userManagement
     } = props;
-    if (pluginsProp) {
+    if (_pluginsProp) {
       console.warn("The `plugins` prop is deprecated in the FireCMS component. You should pass your plugins to `useBuildNavigationController` instead.");
     }
-    const plugins = navigationController.plugins ?? pluginsProp;
+    const plugins = navigationController.plugins ?? _pluginsProp;
+    const userManagement = plugins?.find((p) => p.userManagement)?.userManagement ?? _userManagement ?? {
+      users: [],
+      getUser: (uid) => null
+    };
     const sideDialogsController = useBuildSideDialogsController();
     const sideEntityController = useBuildSideEntityController(navigationController, sideDialogsController, authController);
-    const pluginsLoading = plugins?.some((p) => p.loading) ?? false;
+    const pluginsLoading = plugins?.some((p_0) => p_0.loading) ?? false;
     const loading = authController.initialLoading || navigationController.loading || pluginsLoading;
     const customizationController = {
       dateTimeFormat,
@@ -24024,7 +25182,7 @@
         accessResponse?.message && /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { children: accessResponse?.message })
       ] });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(AnalyticsContext.Provider, { value: analyticsController, children: /* @__PURE__ */ jsxRuntime.jsx(CustomizationControllerContext.Provider, { value: customizationController, children: /* @__PURE__ */ jsxRuntime.jsx(UserConfigurationPersistenceContext.Provider, { value: userConfigPersistence, children: /* @__PURE__ */ jsxRuntime.jsx(StorageSourceContext.Provider, { value: storageSource, children: /* @__PURE__ */ jsxRuntime.jsx(DataSourceContext.Provider, { value: dataSource, children: /* @__PURE__ */ jsxRuntime.jsx(AuthControllerContext.Provider, { value: authController, children: /* @__PURE__ */ jsxRuntime.jsx(SideDialogsControllerContext.Provider, { value: sideDialogsController, children: /* @__PURE__ */ jsxRuntime.jsx(SideEntityControllerContext.Provider, { value: sideEntityController, children: /* @__PURE__ */ jsxRuntime.jsx(NavigationContext.Provider, { value: navigationController, children: /* @__PURE__ */ jsxRuntime.jsx(DialogsProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbsProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(FireCMSInternal, { loading, children }) }) }) }) }) }) }) }) }) }) }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(AnalyticsContext.Provider, { value: analyticsController, children: /* @__PURE__ */ jsxRuntime.jsx(CustomizationControllerContext.Provider, { value: customizationController, children: /* @__PURE__ */ jsxRuntime.jsx(UserConfigurationPersistenceContext.Provider, { value: userConfigPersistence, children: /* @__PURE__ */ jsxRuntime.jsx(StorageSourceContext.Provider, { value: storageSource, children: /* @__PURE__ */ jsxRuntime.jsx(DataSourceContext.Provider, { value: dataSource, children: /* @__PURE__ */ jsxRuntime.jsx(AuthControllerContext.Provider, { value: authController, children: /* @__PURE__ */ jsxRuntime.jsx(SideDialogsControllerContext.Provider, { value: sideDialogsController, children: /* @__PURE__ */ jsxRuntime.jsx(SideEntityControllerContext.Provider, { value: sideEntityController, children: /* @__PURE__ */ jsxRuntime.jsx(NavigationContext.Provider, { value: navigationController, children: /* @__PURE__ */ jsxRuntime.jsx(InternalUserManagementContext.Provider, { value: userManagement, children: /* @__PURE__ */ jsxRuntime.jsx(DialogsProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbsProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(FireCMSInternal, { loading, children }) }) }) }) }) }) }) }) }) }) }) }) });
   }
   function FireCMSInternal(t0) {
     const $ = reactCompilerRuntime.c(7);
@@ -24194,7 +25352,7 @@
     } = navigation.topLevelNavigation;
     let t1;
     if ($[0] !== adminMenuOpen || $[1] !== analyticsController || $[2] !== className || $[3] !== closeDrawer || $[4] !== drawerOpen || $[5] !== groups || $[6] !== largeLayout || $[7] !== logo || $[8] !== navigate || $[9] !== navigationEntries || $[10] !== style || $[11] !== tooltipsOpen) {
-      const adminViews = navigationEntries.filter(_temp$2) ?? [];
+      const adminViews = navigationEntries.filter(_temp$3) ?? [];
       let t2;
       let t3;
       let t4;
@@ -24347,7 +25505,7 @@
   function _temp2$2(g) {
     return g !== "Admin";
   }
-  function _temp$2(e) {
+  function _temp$3(e) {
     return e.type === "admin";
   }
   function DrawerLogo(t0) {
@@ -24407,6 +25565,165 @@
     }
     return t6;
   }
+  function UserSelectFieldBinding(t0) {
+    const $ = reactCompilerRuntime.c(43);
+    const {
+      propertyKey,
+      value,
+      setValue,
+      error,
+      showError,
+      disabled,
+      property,
+      includeDescription,
+      size: t1
+    } = t0;
+    const size = t1 === void 0 ? "large" : t1;
+    const {
+      users,
+      getUser
+    } = useInternalUserManagementController();
+    let t2;
+    if ($[0] !== setValue) {
+      t2 = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        setValue(null);
+      };
+      $[0] = setValue;
+      $[1] = t2;
+    } else {
+      t2 = $[1];
+    }
+    const handleClearClick = t2;
+    let t3;
+    if ($[2] !== value) {
+      t3 = value !== void 0 && value != null ? value.toString() : "";
+      $[2] = value;
+      $[3] = t3;
+    } else {
+      t3 = $[3];
+    }
+    let t4;
+    if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+      t4 = ui.cls("w-full");
+      $[4] = t4;
+    } else {
+      t4 = $[4];
+    }
+    let t5;
+    if ($[5] !== property) {
+      t5 = getIconForProperty(property, "small");
+      $[5] = property;
+      $[6] = t5;
+    } else {
+      t5 = $[6];
+    }
+    const t6 = property.validation?.required;
+    let t7;
+    if ($[7] !== property.name || $[8] !== t5 || $[9] !== t6) {
+      t7 = /* @__PURE__ */ jsxRuntime.jsx(LabelWithIcon, { icon: t5, required: t6, title: property.name, className: "h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5 my-0" });
+      $[7] = property.name;
+      $[8] = t5;
+      $[9] = t6;
+      $[10] = t7;
+    } else {
+      t7 = $[10];
+    }
+    let t8;
+    if ($[11] !== propertyKey || $[12] !== t7) {
+      t8 = /* @__PURE__ */ jsxRuntime.jsx(PropertyIdCopyTooltip, { propertyKey, children: t7 });
+      $[11] = propertyKey;
+      $[12] = t7;
+      $[13] = t8;
+    } else {
+      t8 = $[13];
+    }
+    let t9;
+    if ($[14] !== disabled || $[15] !== handleClearClick || $[16] !== property.clearable || $[17] !== value) {
+      t9 = property.clearable && !disabled && value && /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: handleClearClick, children: /* @__PURE__ */ jsxRuntime.jsx(ui.CloseIcon, { size: "small" }) });
+      $[14] = disabled;
+      $[15] = handleClearClick;
+      $[16] = property.clearable;
+      $[17] = value;
+      $[18] = t9;
+    } else {
+      t9 = $[18];
+    }
+    let t10;
+    if ($[19] !== setValue) {
+      t10 = (updatedValue) => {
+        const newValue = updatedValue || null;
+        return setValue(newValue);
+      };
+      $[19] = setValue;
+      $[20] = t10;
+    } else {
+      t10 = $[20];
+    }
+    let t11;
+    if ($[21] !== getUser) {
+      t11 = (userId) => {
+        const user = getUser(userId);
+        return /* @__PURE__ */ jsxRuntime.jsx(UserDisplay, { user });
+      };
+      $[21] = getUser;
+      $[22] = t11;
+    } else {
+      t11 = $[22];
+    }
+    let t12;
+    if ($[23] !== users) {
+      t12 = users && users.map(_temp$2);
+      $[23] = users;
+      $[24] = t12;
+    } else {
+      t12 = $[24];
+    }
+    let t13;
+    if ($[25] !== disabled || $[26] !== size || $[27] !== t10 || $[28] !== t11 || $[29] !== t12 || $[30] !== t3 || $[31] !== t8 || $[32] !== t9) {
+      t13 = /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { value: t3, disabled, size, fullWidth: true, position: "item-aligned", inputClassName: t4, label: t8, endAdornment: t9, onValueChange: t10, renderValue: t11, children: t12 });
+      $[25] = disabled;
+      $[26] = size;
+      $[27] = t10;
+      $[28] = t11;
+      $[29] = t12;
+      $[30] = t3;
+      $[31] = t8;
+      $[32] = t9;
+      $[33] = t13;
+    } else {
+      t13 = $[33];
+    }
+    let t14;
+    if ($[34] !== disabled || $[35] !== error || $[36] !== includeDescription || $[37] !== property || $[38] !== showError) {
+      t14 = /* @__PURE__ */ jsxRuntime.jsx(FieldHelperText, { includeDescription, showError, error, disabled, property });
+      $[34] = disabled;
+      $[35] = error;
+      $[36] = includeDescription;
+      $[37] = property;
+      $[38] = showError;
+      $[39] = t14;
+    } else {
+      t14 = $[39];
+    }
+    let t15;
+    if ($[40] !== t13 || $[41] !== t14) {
+      t15 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        t13,
+        t14
+      ] });
+      $[40] = t13;
+      $[41] = t14;
+      $[42] = t15;
+    } else {
+      t15 = $[42];
+    }
+    return t15;
+  }
+  function _temp$2(user_0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: user_0.uid, children: /* @__PURE__ */ jsxRuntime.jsx(UserDisplay, { user: user_0 }) }, user_0.uid);
+  }
   function isDefaultFieldConfigId(id) {
     return Object.keys(DEFAULT_FIELD_CONFIGS).includes(id);
   }
@@ -24508,6 +25825,16 @@
         Field: MultiSelectFieldBinding
       }
     },
+    user_select: {
+      key: "user_select",
+      name: "User select",
+      description: "Select a user from the user management system. Store the user ID.",
+      Icon: ui.PersonIcon,
+      property: {
+        dataType: "string",
+        Field: UserSelectFieldBinding
+      }
+    },
     number_input: {
       key: "number_input",
       name: "Number input",
@@ -24722,6 +26049,8 @@
         return "email";
       } else if (property.enumValues) {
         return "select";
+      } else if (property.userSelect) {
+        return "user_select";
       } else if (property.reference) {
         return "reference_as_string";
       } else {
@@ -25760,6 +27089,7 @@
   exports2.SwitchFieldBinding = SwitchFieldBinding;
   exports2.TextFieldBinding = TextFieldBinding;
   exports2.UrlComponentPreview = UrlComponentPreview;
+  exports2.UserPreview = UserPreview;
   exports2.Vector = Vector;
   exports2.VirtualTable = VirtualTable;
   exports2.addInitialSlash = addInitialSlash;
@@ -25813,6 +27143,7 @@
   exports2.getIdIcon = getIdIcon;
   exports2.getLabelOrConfigFrom = getLabelOrConfigFrom;
   exports2.getLastSegment = getLastSegment;
+  exports2.getLocalChangesBackup = getLocalChangesBackup;
   exports2.getPropertiesWithPropertiesOrder = getPropertiesWithPropertiesOrder;
   exports2.getPropertyInPath = getPropertyInPath;
   exports2.getRandomId = getRandomId;
@@ -25827,13 +27158,13 @@
   exports2.isEnumValueDisabled = isEnumValueDisabled;
   exports2.isHidden = isHidden;
   exports2.isObject = isObject;
+  exports2.isPlainObject = isPlainObject;
   exports2.isPropertyBuilder = isPropertyBuilder;
   exports2.isReadOnly = isReadOnly;
   exports2.isReferenceProperty = isReferenceProperty;
   exports2.isValidRegExp = isValidRegExp;
   exports2.joinCollectionLists = joinCollectionLists;
   exports2.makePropertiesEditable = makePropertiesEditable;
-  exports2.makePropertiesNonEditable = makePropertiesNonEditable;
   exports2.mergeCallbacks = mergeCallbacks;
   exports2.mergeCollection = mergeCollection;
   exports2.mergeDeep = mergeDeep;
@@ -25894,6 +27225,7 @@
   exports2.useBuildNavigationController = useBuildNavigationController;
   exports2.useClearRestoreValue = useClearRestoreValue;
   exports2.useClipboard = useClipboard;
+  exports2.useCollapsedGroups = useCollapsedGroups;
   exports2.useCollectionFetch = useCollectionFetch;
   exports2.useColumnIds = useColumnIds;
   exports2.useCustomizationController = useCustomizationController;
@@ -25904,6 +27236,7 @@
   exports2.useDialogsController = useDialogsController;
   exports2.useEntityFetch = useEntityFetch;
   exports2.useFireCMSContext = useFireCMSContext;
+  exports2.useInternalUserManagementController = useInternalUserManagementController;
   exports2.useLargeLayout = useLargeLayout;
   exports2.useModeController = useModeController;
   exports2.useNavigationController = useNavigationController;