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

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("@hello-pangea/dnd"), 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", "@hello-pangea/dnd", "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.dnd, 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, dnd, 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/modifiers"), require("@dnd-kit/sortable"), require("@dnd-kit/utilities"), require("react-dropzone"), require("react-image-file-resizer"), require("@firecms/editor"), require("prism-react-renderer"), require("react-router"), require("@radix-ui/react-portal")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react-compiler-runtime", "react", "@firecms/ui", "notistack", "object-hash", "@firecms/formex", "react-router-dom", "fuse.js", "react-fast-compare", "date-fns", "date-fns/locale", "react-use-measure", "yup", "react-window", "@dnd-kit/core", "@dnd-kit/modifiers", "@dnd-kit/sortable", "@dnd-kit/utilities", "react-dropzone", "react-image-file-resizer", "@firecms/editor", "prism-react-renderer", "react-router", "@radix-ui/react-portal"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["FireCMS Core"] = {}, global.jsxRuntime, global.reactCompilerRuntime, global.React, global.ui, global.notistack, global.hash, global.formex, global.reactRouterDom, global.Fuse, global.equal, global.dateFns, global.locales, global.useMeasure, global.yup, global.reactWindow, global.core, global.modifiers, global.sortable, global.utilities, global.reactDropzone, global.Resizer, global.editor, global.prismReactRenderer, global.reactRouter, global.Portal));
+})(this, function(exports2, jsxRuntime, reactCompilerRuntime, React, ui, notistack, hash, formex, reactRouterDom, Fuse, equal, dateFns, locales, useMeasure, yup, reactWindow, core, modifiers, sortable, utilities, reactDropzone, Resizer, editor, prismReactRenderer, reactRouter, Portal) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -69,49 +69,66 @@
     return cleanPath;
   }
   function resolveCollectionPathIds(path, allCollections) {
-    const cleanPath = removeInitialAndTrailingSlashes(path);
-    const subpaths = cleanPath.split("/");
-    if (subpaths.length % 2 === 0) {
-      throw Error(`resolveCollectionPathIds: Collection paths must have an odd number of segments: ${path}`);
-    }
-    const exactMatch = allCollections.find((col) => col.path === cleanPath);
-    if (exactMatch) {
-      return exactMatch.path;
-    }
-    if (subpaths.length === 1) {
-      const aliasedCollection = allCollections.find((col) => col.id === subpaths[0]);
-      return aliasedCollection?.path ?? subpaths[0];
-    }
-    let matchingCollection;
-    let entityIndex = 1;
-    for (const collection of allCollections) {
-      const pathSegments = collection.path.split("/");
-      if (pathSegments.length > 1 && subpaths.slice(0, pathSegments.length).join("/") === collection.path) {
-        matchingCollection = collection;
-        entityIndex = pathSegments.length;
+    let remainingPath = removeInitialAndTrailingSlashes(path);
+    if (!remainingPath) {
+      return "";
+    }
+    let currentCollections = allCollections;
+    const resolvedPathParts = [];
+    while (remainingPath.length > 0) {
+      if (!currentCollections || currentCollections.length === 0) {
+        console.warn(`resolveCollectionPathIds: Path structure implies subcollections, but none found before segment starting with "${remainingPath}" in original path "${path}". Appending remaining original path.`);
+        resolvedPathParts.push(remainingPath);
+        remainingPath = "";
         break;
       }
-    }
-    if (!matchingCollection) {
-      const matchingCollections = allCollections.filter((col) => col.id === subpaths[0] || col.path === subpaths[0]);
-      if (!matchingCollections.length) {
-        return cleanPath;
+      let foundMatch = false;
+      const potentialMatches = currentCollections.flatMap((col) => [{
+        col,
+        match: col.path
+      }, {
+        col,
+        match: col.id
+      }]).filter((p) => p.match && remainingPath.startsWith(p.match)).sort((a, b) => b.match.length - a.match.length);
+      if (potentialMatches.length > 0) {
+        const {
+          col: foundCollection,
+          match: matchString
+        } = potentialMatches[0];
+        resolvedPathParts.push(foundCollection.path);
+        remainingPath = removeInitialSlash(remainingPath.substring(matchString.length));
+        if (remainingPath.length === 0) {
+          foundMatch = true;
+          break;
+        }
+        const idSeparatorIndex = remainingPath.indexOf("/");
+        let entityId;
+        if (idSeparatorIndex > -1) {
+          entityId = remainingPath.substring(0, idSeparatorIndex);
+          remainingPath = remainingPath.substring(idSeparatorIndex + 1);
+        } else {
+          entityId = remainingPath;
+          remainingPath = "";
+          console.warn(`resolveCollectionPathIds: Path seems to end with an entity ID "${entityId}" instead of a collection segment in original path "${path}". This might indicate an invalid input path.`);
+        }
+        resolvedPathParts.push(entityId);
+        currentCollections = foundCollection.subcollections;
+        foundMatch = true;
+        if (!currentCollections && remainingPath.length > 0) {
+          console.warn(`resolveCollectionPathIds: Path continues after entity ID "${entityId}", but no subcollections are defined for the preceding collection "${foundCollection.path}" in path "${path}". Appending remaining original path.`);
+          resolvedPathParts.push(remainingPath);
+          remainingPath = "";
+          break;
+        }
       }
-      matchingCollection = matchingCollections[0];
-    }
-    const entityId = subpaths[entityIndex];
-    const remainingPath = subpaths.slice(entityIndex + 1);
-    if (remainingPath.length > 0) {
-      const subcollectionId = remainingPath[0];
-      const subcollection = matchingCollection.subcollections?.find((subcol) => subcol.id === subcollectionId);
-      if (subcollection) {
-        return `${matchingCollection.path}/${entityId}/${subcollection.path}`;
+      if (!foundMatch) {
+        console.warn(`resolveCollectionPathIds: Collection definition not found for segment starting with "${remainingPath}" in original path "${path}". Appending remaining original path.`);
+        resolvedPathParts.push(remainingPath);
+        remainingPath = "";
+        break;
       }
     }
-    if (remainingPath.length === 0) {
-      return `${matchingCollection.path}/${entityId}`;
-    }
-    return `${matchingCollection.path}/${entityId}/${remainingPath.join("/")}`;
+    return resolvedPathParts.join("/");
   }
   function getCollectionByPathOrId(pathOrId, collections) {
     const subpaths = removeInitialAndTrailingSlashes(pathOrId).split("/");
@@ -232,31 +249,36 @@
     return item && typeof item === "object" && !Array.isArray(item);
   }
   function mergeDeep(target, source, ignoreUndefined = false) {
-    const targetIsObject = isObject(target);
-    const output = targetIsObject ? {
+    if (!isObject(target)) {
+      return target;
+    }
+    const output = {
       ...target
-    } : target;
-    if (targetIsObject && isObject(source)) {
-      Object.keys(source).forEach((key) => {
-        const sourceElement = source[key];
-        if (ignoreUndefined && sourceElement === void 0) {
-          return;
+    };
+    if (!isObject(source)) {
+      return output;
+    }
+    for (const key in source) {
+      if (Object.prototype.hasOwnProperty.call(source, key)) {
+        const sourceValue = source[key];
+        const outputValue = output[key];
+        if (ignoreUndefined && sourceValue === void 0) {
+          continue;
         }
-        if (sourceElement instanceof Date) {
-          Object.assign(output, {
-            [key]: new Date(sourceElement.getTime())
-          });
-        } else if (isObject(sourceElement)) {
-          if (!(key in target)) Object.assign(output, {
-            [key]: sourceElement
-          });
-          else output[key] = mergeDeep(target[key], sourceElement);
+        if (sourceValue instanceof Date) {
+          output[key] = new Date(sourceValue.getTime());
+        } else if (Array.isArray(sourceValue)) {
+          output[key] = [...sourceValue];
+        } else if (isObject(sourceValue)) {
+          if (isObject(outputValue)) {
+            output[key] = mergeDeep(outputValue, sourceValue, ignoreUndefined);
+          } else {
+            output[key] = sourceValue;
+          }
         } else {
-          Object.assign(output, {
-            [key]: sourceElement
-          });
+          output[key] = sourceValue;
         }
-      });
+      }
     }
     return output;
   }
@@ -3748,6 +3770,108 @@
     if (!result) result = randomString() + "_" + file.name;
     return result;
   }
+  const mergeCallbacks = (baseCallbacks = {}, pluginCallbacks = {}) => {
+    if (!baseCallbacks && !pluginCallbacks) {
+      return void 0;
+    }
+    const mergedCallbacks = {};
+    if (baseCallbacks.onFetch || pluginCallbacks.onFetch) {
+      mergedCallbacks.onFetch = async (props) => {
+        let entity = props.entity;
+        if (baseCallbacks.onFetch) {
+          entity = await Promise.resolve(baseCallbacks.onFetch(props));
+        }
+        if (pluginCallbacks.onFetch) {
+          entity = await Promise.resolve(pluginCallbacks.onFetch({
+            ...props,
+            entity
+          }));
+        }
+        return entity;
+      };
+    }
+    if (baseCallbacks.onSaveSuccess || pluginCallbacks.onSaveSuccess) {
+      mergedCallbacks.onSaveSuccess = async (props) => {
+        if (baseCallbacks.onSaveSuccess) {
+          await Promise.resolve(baseCallbacks.onSaveSuccess(props));
+        }
+        if (pluginCallbacks.onSaveSuccess) {
+          await Promise.resolve(pluginCallbacks.onSaveSuccess(props));
+        }
+      };
+    }
+    if (baseCallbacks.onSaveFailure || pluginCallbacks.onSaveFailure) {
+      mergedCallbacks.onSaveFailure = async (props) => {
+        if (baseCallbacks.onSaveFailure) {
+          await Promise.resolve(baseCallbacks.onSaveFailure(props));
+        }
+        if (pluginCallbacks.onSaveFailure) {
+          await Promise.resolve(pluginCallbacks.onSaveFailure(props));
+        }
+      };
+    }
+    if (baseCallbacks.onPreSave || pluginCallbacks.onPreSave) {
+      mergedCallbacks.onPreSave = async (props) => {
+        let values = {
+          ...props.values
+        };
+        if (baseCallbacks.onPreSave) {
+          const baseValues = await Promise.resolve(baseCallbacks.onPreSave(props));
+          values = {
+            ...values,
+            ...baseValues
+          };
+        }
+        if (pluginCallbacks.onPreSave) {
+          const pluginValues = await Promise.resolve(pluginCallbacks.onPreSave({
+            ...props,
+            values
+          }));
+          values = {
+            ...values,
+            ...pluginValues
+          };
+        }
+        return values;
+      };
+    }
+    if (baseCallbacks.onPreDelete || pluginCallbacks.onPreDelete) {
+      mergedCallbacks.onPreDelete = (props) => {
+        if (baseCallbacks.onPreDelete) {
+          baseCallbacks.onPreDelete(props);
+        }
+        if (pluginCallbacks.onPreDelete) {
+          pluginCallbacks.onPreDelete(props);
+        }
+      };
+    }
+    if (baseCallbacks.onDelete || pluginCallbacks.onDelete) {
+      mergedCallbacks.onDelete = (props) => {
+        if (baseCallbacks.onDelete) {
+          baseCallbacks.onDelete(props);
+        }
+        if (pluginCallbacks.onDelete) {
+          pluginCallbacks.onDelete(props);
+        }
+      };
+    }
+    if (baseCallbacks.onIdUpdate || pluginCallbacks.onIdUpdate) {
+      mergedCallbacks.onIdUpdate = async (props) => {
+        let id = props.entityId || "";
+        if (baseCallbacks.onIdUpdate) {
+          id = await Promise.resolve(baseCallbacks.onIdUpdate(props));
+        }
+        if (pluginCallbacks.onIdUpdate) {
+          id = await Promise.resolve(pluginCallbacks.onIdUpdate({
+            ...props,
+            entityId: id
+          }));
+        }
+        return id;
+      };
+    }
+    return Object.keys(mergedCallbacks).length > 0 ? mergedCallbacks : void 0;
+  };
   const CONTAINER_FULL_WIDTH = "100vw";
   const ADDITIONAL_TAB_WIDTH = "55vw";
   const FORM_CONTAINER_WIDTH = "768px";
@@ -4189,7 +4313,7 @@
             }
           } else {
             onEntityUpdate(void 0);
-            return _temp3$4;
+            return _temp3$5;
           }
         }
       };
@@ -4230,7 +4354,7 @@
     }
     return t5;
   }
-  function _temp3$4() {
+  function _temp3$5() {
   }
   function _temp2$d() {
   }
@@ -4285,11 +4409,6 @@
     } else {
       updatedValues = values;
     }
-    console.debug("Saving entity", {
-      entityId,
-      updatedValues,
-      collection
-    });
     return dataSource.saveEntity({
       collection,
       path: resolvedPath,
@@ -4324,7 +4443,6 @@
       }
       if (onSaveSuccess) onSaveSuccess(entity);
     }).catch((e) => {
-      console.error("!!!", e);
       if (callbacks?.onSaveFailure) {
         const resolvedCollection = resolveCollection({
           collection,
@@ -4640,7 +4758,6 @@
       tooltip
     } = t0;
     const component = error instanceof Error ? error.message : error;
-    console.warn("ErrorView", error);
     let t1;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
       t1 = /* @__PURE__ */ jsxRuntime.jsx(ui.ErrorIcon, { className: "mx-2", size: "small", color: "error" });
@@ -4806,7 +4923,7 @@
     }
     let t7;
     if ($[13] !== url) {
-      t7 = navigator && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { asChild: true, title: "Copy url to clipboard", side: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { variant: "filled", size: "small", onClick: (e) => {
+      t7 = navigator && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { asChild: true, title: "Copy url to clipboard", side: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { variant: "filled", size: "smallest", onClick: (e) => {
         e.stopPropagation();
         e.preventDefault();
         return navigator.clipboard.writeText(url);
@@ -4825,7 +4942,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: "small", onClick: _temp$q, children: t8 }) });
+      t9 = /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Open image in new tab", side: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { className: "invisible group-hover:visible", variant: "filled", component: "a", href: url, rel: "noopener noreferrer", target: "_blank", size: "smallest", onClick: _temp$q, children: t8 }) });
       $[16] = url;
       $[17] = t9;
     } else {
@@ -5178,9 +5295,9 @@
           } else {
             if (arrayProperty.of.dataType === "map" && arrayProperty.of.properties) {
               let t1;
-              if ($[10] !== arrayProperty.of.previewProperties || $[11] !== arrayProperty.of.properties || $[12] !== size) {
-                t1 = renderArrayOfMaps(arrayProperty.of.properties, size, arrayProperty.of.previewProperties);
-                $[10] = arrayProperty.of.previewProperties;
+              if ($[10] !== arrayProperty.of.previewKeys || $[11] !== arrayProperty.of.properties || $[12] !== size) {
+                t1 = renderArrayOfMaps(arrayProperty.of.properties, size, arrayProperty.of.previewKeys);
+                $[10] = arrayProperty.of.previewKeys;
                 $[11] = arrayProperty.of.properties;
                 $[12] = size;
                 $[13] = t1;
@@ -5584,7 +5701,7 @@
           let t1;
           if ($[17] !== size || $[18] !== value) {
             const lines = value.split("\n");
-            t1 = value && value.includes("\n") ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls("overflow-x-scroll", size === "small" ? "text-sm" : ""), children: lines.map((str, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+            t1 = value && value.includes("\n") ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls("overflow-x-scroll overflow-hidden", size === "small" ? "text-sm" : ""), children: lines.map((str, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: str }),
               index !== lines.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("br", {})
             ] }, `string_preview_${index}`)) }) : size === "small" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: value }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: value });
@@ -5667,11 +5784,13 @@
     disabled,
     hover,
     collection: collectionProp,
-    previewProperties,
+    previewKeys,
     onClick,
     size,
     includeId = true,
+    includeTitle = true,
     includeEntityLink = true,
+    includeImage = true,
     entity
   }) {
     const authController = useAuthController();
@@ -5690,9 +5809,9 @@
       propertyConfigs: customizationController.propertyConfigs,
       authController
     }), [collection]);
-    const listProperties = React.useMemo(() => getEntityPreviewKeys(authController, resolvedCollection, customizationController.propertyConfigs, previewProperties, size === "medium" || size === "large" ? 3 : 1), [previewProperties, resolvedCollection, size]);
-    const titleProperty = getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs);
-    const imagePropertyKey = getEntityImagePreviewPropertyKey(resolvedCollection);
+    const listProperties = React.useMemo(() => previewKeys ?? getEntityPreviewKeys(authController, resolvedCollection, customizationController.propertyConfigs, previewKeys, size === "medium" || size === "large" ? 3 : 1), [previewKeys, resolvedCollection, size]);
+    const titleProperty = includeTitle ? getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs) : void 0;
+    const imagePropertyKey = includeImage ? getEntityImagePreviewPropertyKey(resolvedCollection) : void 0;
     const imageProperty = imagePropertyKey ? resolvedCollection.properties[imagePropertyKey] : void 0;
     const usedImageProperty = imageProperty && "of" in imageProperty ? imageProperty.of : imageProperty;
     const restProperties = listProperties.filter((p) => p !== titleProperty && p !== imagePropertyKey);
@@ -5703,18 +5822,17 @@
         usedImageProperty && usedImageValue && /* @__PURE__ */ jsxRuntime.jsx(PropertyPreview, { property: usedImageProperty, propertyKey: imagePropertyKey, size: "small", value: usedImageValue }),
         (!usedImageProperty || !usedImageValue) && /* @__PURE__ */ jsxRuntime.jsx(IconForView, { collectionOrView: collection, color: "primary", size, className: "m-auto p-1" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col grow-1 w-full m-1 shrink-1", style: {
-        "maxWidth": "calc(100% - 96px)"
-      }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col grow w-full m-1 shrink min-w-0", children: [
         size !== "small" && includeId && (entity ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "block whitespace-nowrap overflow-hidden truncate", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", color: "disabled", className: "font-mono", children: entity.id }) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, {})),
         titleProperty && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate my-0.5 text-sm font-medium", children: entity ? /* @__PURE__ */ jsxRuntime.jsx(PropertyPreview, { propertyKey: titleProperty, value: getValueInPath(entity.values, titleProperty), property: resolvedCollection.properties[titleProperty], size: "large" }) : /* @__PURE__ */ jsxRuntime.jsx(SkeletonPropertyComponent, { property: resolvedCollection.properties[titleProperty], size: "large" }) }),
         restProperties && restProperties.map((key) => {
-          const childProperty = resolvedCollection.properties[key];
+          const childProperty = getPropertyInPath(resolvedCollection.properties, key);
           if (!childProperty) return null;
-          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls("truncate", restProperties.length > 1 ? "my-0.5" : "my-0"), children: entity ? /* @__PURE__ */ jsxRuntime.jsx(PropertyPreview, { propertyKey: key, value: getValueInPath(entity.values, key), property: childProperty, size: "small" }) : /* @__PURE__ */ jsxRuntime.jsx(SkeletonPropertyComponent, { property: childProperty, size: "small" }) }, "ref_prev_" + key);
+          const valueInPath = getValueInPath(entity.values, key);
+          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls("truncate", restProperties.length > 1 ? "my-0.5" : "my-0"), children: entity ? /* @__PURE__ */ jsxRuntime.jsx(PropertyPreview, { propertyKey: key, value: valueInPath, property: childProperty, size: "small" }) : /* @__PURE__ */ jsxRuntime.jsx(SkeletonPropertyComponent, { property: childProperty, size: "small" }) }, "ref_prev_" + key);
         })
       ] }),
-      entity && includeEntityLink && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: `See details for ${entity.id}`, className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { color: "inherit", size: "medium", className: size !== "small" ? "self-start" : "", onClick: (e) => {
+      entity && includeEntityLink && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: `See details for ${entity.id}`, className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { color: "inherit", size: "small", className: size !== "small" ? "self-start" : "", onClick: (e) => {
         e.stopPropagation();
         analyticsController.onAnalyticsEvent?.("entity_click_from_reference", {
           path: entity.path,
@@ -5726,7 +5844,7 @@
           collection,
           updateUrl: true
         });
-      }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.KeyboardTabIcon, { size: "medium" }) }) }),
+      }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.KeyboardTabIcon, { size: "small" }) }) }),
       actions
     ] });
   }
@@ -6062,7 +6180,7 @@
     }
     let t3;
     if ($[25] !== collection || $[26] !== disabled || $[27] !== hover || $[28] !== includeEntityLink || $[29] !== includeId || $[30] !== onClick || $[31] !== previewProperties || $[32] !== size || $[33] !== usedEntity) {
-      t3 = /* @__PURE__ */ jsxRuntime.jsx(EntityPreview, { size, previewProperties, disabled, entity: usedEntity, collection, onClick, includeEntityLink, includeId, hover });
+      t3 = /* @__PURE__ */ jsxRuntime.jsx(EntityPreview, { size, previewKeys: previewProperties, disabled, entity: usedEntity, collection, onClick, includeEntityLink, includeId, hover });
       $[25] = collection;
       $[26] = disabled;
       $[27] = hover;
@@ -6497,7 +6615,7 @@
     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: "flex-grow max-w-[75%]", children: childValue && /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: childValue.toString() }) }) })
+        /* @__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 }) })
     ] }, `map_preview_table_${key}}`);
@@ -6910,7 +7028,7 @@
           throw Error(`You need to specify a 'properties' prop (or specify a custom field) in your map property ${propertyKey}`);
         }
         const values = value;
-        const previewProperties = mapProperty.previewProperties;
+        const previewProperties = mapProperty.previewKeys;
         if (!values) {
           t4 = null;
           break bb0;
@@ -7149,7 +7267,6 @@
         width: "100%",
         color: "unset",
         fontWeight: "unset",
-        lineHeight: 1.7142857,
         fontSize: "unset",
         fontFamily: "unset",
         background: "unset",
@@ -8736,7 +8853,7 @@
     return t8;
   };
   const EntityTableCell = React.memo(function EntityTableCell2(t0) {
-    const $ = reactCompilerRuntime.c(45);
+    const $ = reactCompilerRuntime.c(48);
     const {
       children,
       actions,
@@ -8965,11 +9082,11 @@
     }
     let t25;
     if ($[37] !== actions || $[38] !== onFocus || $[39] !== t16 || $[40] !== t19 || $[41] !== t20 || $[42] !== t23 || $[43] !== t24) {
-      t25 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t16, ref, style: t19, tabIndex: t20, onFocus, onMouseEnter: setOnHoverTrue, onMouseMove: setOnHoverTrue, onMouseLeave: setOnHoverFalse, children: [
+      t25 = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t16, ref, style: t19, tabIndex: t20, onFocus, onMouseEnter: setOnHoverTrue, onMouseMove: setOnHoverTrue, onMouseLeave: setOnHoverFalse, children: [
         t23,
         actions,
         t24
-      ] });
+      ] }) });
       $[37] = actions;
       $[38] = onFocus;
       $[39] = t16;
@@ -8981,7 +9098,21 @@
     } else {
       t25 = $[44];
     }
-    return t25;
+    const result = t25;
+    if (showError) {
+      const t26 = error?.message ?? "Error";
+      let t27;
+      if ($[45] !== result || $[46] !== t26) {
+        t27 = /* @__PURE__ */ jsxRuntime.jsx(ErrorTooltip, { align: "start", title: t26, children: result });
+        $[45] = result;
+        $[46] = t26;
+        $[47] = t27;
+      } else {
+        t27 = $[47];
+      }
+      return t27;
+    }
+    return result;
   }, (a, b) => {
     return a.error === b.error && a.value === b.value && a.disabled === b.disabled && a.saved === b.saved && a.allowScroll === b.allowScroll && a.align === b.align && a.size === b.size && a.disabledTooltip === b.disabledTooltip && a.width === b.width && a.showExpandIcon === b.showExpandIcon && a.removePadding === b.removePadding && a.fullHeight === b.fullHeight && a.selected === b.selected;
   });
@@ -9230,7 +9361,7 @@
             }
           } else if (arrayProperty.of.dataType === "reference") {
             if (typeof arrayProperty.of.path === "string") {
-              innerComponent = /* @__PURE__ */ jsxRuntime.jsx(TableReferenceField, { name: propertyKey, disabled, internalValue, updateValue, size, multiselect: true, path: arrayProperty.of.path, previewProperties: arrayProperty.of.previewProperties, title: arrayProperty.name, forceFilter: arrayProperty.of.forceFilter, includeId: arrayProperty.of.includeId, includeEntityLink: arrayProperty.of.includeEntityLink });
+              innerComponent = /* @__PURE__ */ jsxRuntime.jsx(TableReferenceField, { name: propertyKey, disabled, internalValue, updateValue, size, multiselect: true, path: arrayProperty.of.path, previewProperties: arrayProperty.of.previewKeys, title: arrayProperty.name, forceFilter: arrayProperty.of.forceFilter, includeId: arrayProperty.of.includeId, includeEntityLink: arrayProperty.of.includeEntityLink });
             }
             allowScroll = false;
           }
@@ -9493,7 +9624,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 h-10", size: "small", onValueChange: t4, renderValue: _temp$j, children: t5 }) });
+      t6 = /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Table row size", side: "right", sideOffset: 4, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { value: t3, className: "w-16 ml-2", size: "small", onValueChange: t4, renderValue: _temp$j, children: t5 }) });
       $[6] = t3;
       $[7] = t4;
       $[8] = t6;
@@ -9766,7 +9897,7 @@
   }
   function propertiesToColumns({
     properties,
-    sortable,
+    sortable: sortable2,
     forceFilter,
     AdditionalHeaderWidget
   }) {
@@ -9783,7 +9914,7 @@
         align: getTableCellAlignment(property),
         icon: getIconForProperty(property, "small"),
         title: property.name ?? key,
-        sortable,
+        sortable: sortable2,
         filter: !disabledFilter && filterable,
         width: getTablePropertyColumnWidth(property),
         resizable: true,
@@ -10492,8 +10623,7 @@
     className,
     endAdornment,
     AddColumnComponent,
-    initialScroll = 0,
-    debug
+    initialScroll = 0
   }) {
     const sortByProperty = sortBy ? sortBy[0] : void 0;
     const currentSort = sortBy ? sortBy[1] : void 0;
@@ -10503,7 +10633,10 @@
     const debouncedScroll = useDebounceCallback(onScrollProp, 200);
     React.useEffect(() => {
       if (tableRef.current && initialScroll) {
-        tableRef.current.scrollTo(0, initialScroll);
+        const {
+          scrollLeft
+        } = tableRef.current;
+        tableRef.current.scrollTo(scrollLeft, initialScroll);
       }
     }, [tableRef, initialScroll]);
     React.useEffect(() => {
@@ -10534,11 +10667,9 @@
       offsetSize: true
     });
     const onColumnResizeInternal = React.useCallback((params) => {
-      if (debug) console.log("onColumnResizeInternal", params);
-      setColumns(columns.map((column) => column.key === params.column.key ? params.column : column));
-    }, [columns]);
+      setColumns((prevColumns) => prevColumns.map((column) => column.key === params.column.key ? params.column : column));
+    }, []);
     const onColumnResizeEndInternal = React.useCallback((params_0) => {
-      if (debug) console.log("onColumnResizeEndInternal", params_0);
       setColumns(columns.map((column_0) => column_0.key === params_0.column.key ? params_0.column : column_0));
       if (onColumnResize) {
         onColumnResize(params_0);
@@ -10546,18 +10677,15 @@
     }, [columns, onColumnResize]);
     const filterRef = React.useRef();
     React.useEffect(() => {
-      if (debug) console.log("Filter updated", filterInput);
       filterRef.current = filterInput;
     }, [filterInput]);
     const scrollToTop = React.useCallback(() => {
-      if (debug) console.log("scrollToTop");
       endReachCallbackThreshold.current = 0;
       if (tableRef.current) {
         tableRef.current.scrollTo(tableRef.current?.scrollLeft, 0);
       }
     }, []);
     const onColumnSort = React.useCallback((key) => {
-      if (debug) console.log("onColumnSort", key);
       const isDesc = sortByProperty === key && currentSort === "desc";
       const isAsc = sortByProperty === key && currentSort === "asc";
       const newSort = isAsc ? "desc" : isDesc ? void 0 : "asc";
@@ -10578,9 +10706,7 @@
       scrollToTop();
     }, [checkFilterCombination, currentSort, onFilterUpdate, onResetPagination, onSortByUpdate, scrollToTop, sortByProperty]);
     const maxScroll = Math.max((data?.length ?? 0) * rowHeight - bounds.height, 0);
-    if (debug) console.log("maxScroll", maxScroll);
     const onEndReachedInternal = React.useCallback((scrollOffset) => {
-      if (debug) console.log("onEndReachedInternal", scrollOffset, endReachCallbackThreshold.current + endOffset);
       if (onEndReached && (data?.length ?? 0) > 0 && scrollOffset > endReachCallbackThreshold.current + endOffset) {
         endReachCallbackThreshold.current = scrollOffset;
         onEndReached();
@@ -10591,11 +10717,6 @@
       scrollOffset: scrollOffset_0,
       scrollUpdateWasRequested
     }) => {
-      if (debug) console.log("onScroll", {
-        scrollDirection,
-        scrollOffset: scrollOffset_0,
-        scrollUpdateWasRequested
-      });
       if (onScrollProp) {
         debouncedScroll({
           scrollDirection,
@@ -10606,7 +10727,6 @@
       if (!scrollUpdateWasRequested && scrollOffset_0 >= maxScroll - endOffset) onEndReachedInternal(scrollOffset_0);
     }, [maxScroll, onEndReachedInternal]);
     const onFilterUpdateInternal = React.useCallback((column_1, filterForProperty) => {
-      if (debug) console.log("onFilterUpdateInternal", column_1, filterForProperty);
       endReachCallbackThreshold.current = 0;
       const filter_0 = filterRef.current;
       let newFilterValue = filter_0 ? {
@@ -10654,7 +10774,6 @@
       endAdornment,
       AddColumnComponent
     };
-    if (debug) console.log("VirtualTable render", virtualListController);
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: measureRef, style, className: ui.cls("h-full w-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(VirtualListContext.Provider, { value: virtualListController, children: /* @__PURE__ */ jsxRuntime.jsx(MemoizedList, { outerRef: tableRef, width: bounds.width, height: bounds.height, itemCount: (data?.length ?? 0) + (endAdornment ? 1 : 0), onScroll, includeAddColumn: Boolean(AddColumnComponent), itemSize: rowHeight }, rowHeight) }) });
   }, equal);
   function MemoizedList({
@@ -10990,8 +11109,8 @@
     }
     let t9;
     if ($[34] !== dataType || $[35] !== enumValues || $[36] !== internalValue || $[37] !== multiple || $[38] !== name || $[39] !== operation || $[40] !== updateFilter) {
-      t9 = enumValues && multiple && /* @__PURE__ */ jsxRuntime.jsx(ui.MultiSelect, { position: "item-aligned", value: Array.isArray(internalValue) ? internalValue.map(_temp3$3) : [], onValueChange: (value_2) => {
-        updateFilter(operation, dataType === "number" ? value_2.map(_temp4$2) : value_2);
+      t9 = enumValues && multiple && /* @__PURE__ */ jsxRuntime.jsx(ui.MultiSelect, { position: "item-aligned", value: Array.isArray(internalValue) ? internalValue.map(_temp3$4) : [], onValueChange: (value_2) => {
+        updateFilter(operation, dataType === "number" ? value_2.map(_temp4$3) : value_2);
       }, multiple, endAdornment: internalValue && /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { className: "absolute right-2 top-3", onClick: (e_2) => updateFilter(operation, void 0), children: /* @__PURE__ */ jsxRuntime.jsx(ui.CloseIcon, {}) }), children: enumValues.map((enumConfig_0) => /* @__PURE__ */ jsxRuntime.jsx(ui.MultiSelectItem, { value: String(enumConfig_0.id), children: /* @__PURE__ */ jsxRuntime.jsx(EnumValuesChip, { enumKey: String(enumConfig_0.id), enumValues, size: "small" }) }, `select_value_${name}_${enumConfig_0.id}`)) });
       $[34] = dataType;
       $[35] = enumValues;
@@ -11054,10 +11173,10 @@
     }
     return t12;
   }
-  function _temp4$2(v) {
+  function _temp4$3(v) {
     return parseInt(v);
   }
-  function _temp3$3(e_1) {
+  function _temp3$4(e_1) {
     return String(e_1);
   }
   function _temp2$7(op_1) {
@@ -11294,97 +11413,94 @@
   function _temp$g(op_0) {
     return operationLabels[op_0];
   }
-  const SelectableTable = React.memo(
-    function SelectableTable2({
-      onValueChange,
-      cellRenderer,
-      onEntityClick,
-      onColumnResize,
-      hoverRow = true,
-      size = "m",
-      inlineEditing = false,
-      tableController: {
-        data,
-        dataLoading,
-        noMoreToLoad,
-        dataLoadingError,
-        filterValues,
-        setFilterValues,
-        sortBy,
-        setSortBy,
-        itemCount,
-        setItemCount,
-        pageSize = 50,
-        paginationEnabled,
-        checkFilterCombination,
-        setPopupCell
-      },
-      filterable = true,
-      onScroll,
-      initialScroll,
-      emptyComponent,
-      columns,
-      forceFilter,
-      highlightedRow,
-      endAdornment,
-      AddColumnComponent
-    }) {
-      const ref = React.useRef(null);
-      const [selectedCell, setSelectedCell] = React.useState(void 0);
-      const loadNextPage = () => {
-        if (!paginationEnabled || dataLoading || noMoreToLoad) return;
-        if (itemCount !== void 0) setItemCount?.(itemCount + pageSize);
-      };
-      const resetPagination = React.useCallback(() => {
-        setItemCount?.(pageSize);
-      }, [pageSize]);
-      const onRowClick = React.useCallback(({
-        rowData
-      }) => {
-        if (inlineEditing) return;
-        return onEntityClick && onEntityClick(rowData);
-      }, [onEntityClick, inlineEditing]);
-      ui.useOutsideAlerter(ref, () => {
-        if (selectedCell) {
+  const SelectableTable = function SelectableTable2({
+    onValueChange,
+    cellRenderer,
+    onEntityClick,
+    onColumnResize,
+    hoverRow = true,
+    size = "m",
+    inlineEditing = false,
+    tableController: {
+      data,
+      dataLoading,
+      noMoreToLoad,
+      dataLoadingError,
+      filterValues,
+      setFilterValues,
+      sortBy,
+      setSortBy,
+      itemCount,
+      setItemCount,
+      pageSize = 50,
+      paginationEnabled,
+      checkFilterCombination,
+      setPopupCell
+    },
+    filterable = true,
+    onScroll,
+    initialScroll,
+    emptyComponent,
+    columns,
+    forceFilter,
+    highlightedRow,
+    endAdornment,
+    AddColumnComponent
+  }) {
+    const ref = React.useRef(null);
+    const [selectedCell, setSelectedCell] = React.useState(void 0);
+    const loadNextPage = () => {
+      if (!paginationEnabled || dataLoading || noMoreToLoad) return;
+      if (itemCount !== void 0) setItemCount?.(itemCount + pageSize);
+    };
+    const resetPagination = React.useCallback(() => {
+      setItemCount?.(pageSize);
+    }, [pageSize]);
+    const onRowClick = React.useCallback(({
+      rowData
+    }) => {
+      if (inlineEditing) return;
+      return onEntityClick && onEntityClick(rowData);
+    }, [onEntityClick, inlineEditing]);
+    ui.useOutsideAlerter(ref, () => {
+      if (selectedCell) {
+        unselect();
+      }
+    }, Boolean(selectedCell));
+    const select = React.useCallback((cell) => {
+      setSelectedCell(cell);
+    }, []);
+    const unselect = React.useCallback(() => {
+      setSelectedCell(void 0);
+    }, []);
+    React.useEffect(() => {
+      const escFunction = (event) => {
+        if (event.keyCode === 27) {
           unselect();
         }
-      }, Boolean(selectedCell));
-      React.useEffect(() => {
-        const escFunction = (event) => {
-          if (event.keyCode === 27) {
-            unselect();
-          }
-        };
-        document.addEventListener("keydown", escFunction, false);
-        return () => {
-          document.removeEventListener("keydown", escFunction, false);
-        };
+      };
+      document.addEventListener("keydown", escFunction, false);
+      return () => {
+        document.removeEventListener("keydown", escFunction, false);
+      };
+    }, [unselect]);
+    const onFilterUpdate = React.useCallback((updatedFilterValues) => {
+      setFilterValues?.({
+        ...updatedFilterValues,
+        ...forceFilter
       });
-      const select = React.useCallback((cell) => {
-        setSelectedCell(cell);
-      }, []);
-      const unselect = React.useCallback(() => {
-        setSelectedCell(void 0);
-      }, []);
-      const onFilterUpdate = React.useCallback((updatedFilterValues) => {
-        setFilterValues?.({
-          ...updatedFilterValues,
-          ...forceFilter
-        });
-      }, [forceFilter]);
-      return /* @__PURE__ */ jsxRuntime.jsx(SelectableTableContext.Provider, { value: {
-        setPopupCell,
-        select,
-        onValueChange,
-        size: size ?? "m",
-        selectedCell
-      }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full flex flex-col bg-white dark:bg-surface-950", ref, children: /* @__PURE__ */ jsxRuntime.jsx(VirtualTable, { data, columns, cellRenderer, onRowClick: inlineEditing ? void 0 : onEntityClick ? onRowClick : void 0, onEndReached: loadNextPage, onResetPagination: resetPagination, error: dataLoadingError, onColumnResize, rowHeight: getRowHeight(size), loading: dataLoading, filter: filterValues, onFilterUpdate: setFilterValues ? onFilterUpdate : void 0, sortBy, onSortByUpdate: setSortBy, hoverRow, initialScroll, onScroll, checkFilterCombination, createFilterField: filterable ? createFilterField : void 0, rowClassName: React.useCallback((entity) => {
-        return highlightedRow?.(entity) ? "bg-surface-100 bg-opacity-75 dark:bg-surface-800 dark:bg-opacity-75" : "";
-      }, [highlightedRow]), className: "flex-grow", emptyComponent, endAdornment, AddColumnComponent }) }) });
-    },
-    () => false
-    // equal
-  );
+    }, [forceFilter]);
+    const contextValue = React.useMemo(() => ({
+      setPopupCell,
+      select,
+      onValueChange,
+      size: size ?? "m",
+      selectedCell
+    }), [setPopupCell, select, onValueChange, size, selectedCell]);
+    return /* @__PURE__ */ jsxRuntime.jsx(SelectableTableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full flex flex-col bg-white dark:bg-surface-950", ref, children: /* @__PURE__ */ jsxRuntime.jsx(VirtualTable, { data, columns, cellRenderer, onRowClick: inlineEditing ? void 0 : onEntityClick ? onRowClick : void 0, onEndReached: loadNextPage, onResetPagination: resetPagination, error: dataLoadingError, onColumnResize, rowHeight: getRowHeight(size), loading: dataLoading, filter: filterValues, onFilterUpdate: setFilterValues ? onFilterUpdate : void 0, sortBy, onSortByUpdate: setSortBy, hoverRow, initialScroll, onScroll, checkFilterCombination, createFilterField: filterable ? createFilterField : void 0, rowClassName: React.useCallback((entity) => {
+      return highlightedRow?.(entity) ? "bg-surface-100 bg-opacity-75 dark:bg-surface-800 dark:bg-opacity-75" : "";
+    }, [highlightedRow]), className: "flex-grow", emptyComponent, endAdornment, AddColumnComponent }) }) });
+  };
   function createFilterField({
     id,
     filterValue,
@@ -11446,7 +11562,7 @@
     properties,
     tableController,
     filterable = true,
-    sortable = true,
+    sortable: sortable2 = true,
     endAdornment,
     AddColumnComponent,
     AdditionalHeaderWidget,
@@ -11522,7 +11638,7 @@
     const collectionColumns = (() => {
       const columnsResult = propertiesToColumns({
         properties,
-        sortable,
+        sortable: sortable2,
         forceFilter,
         AdditionalHeaderWidget
       });
@@ -12842,7 +12958,7 @@
     const favourite = t4;
     let t5;
     if ($[7] !== collection || $[8] !== context || $[9] !== customizationController.plugins || $[10] !== favourite || $[11] !== path || $[12] !== userConfigurationPersistence) {
-      const actionsArray = userConfigurationPersistence ? [/* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { onClick: (e) => {
+      const actionsArray = userConfigurationPersistence ? [/* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: (e) => {
         e.preventDefault();
         e.stopPropagation();
         if (favourite) {
@@ -12850,7 +12966,7 @@
         } else {
           userConfigurationPersistence.setFavouritePaths([...userConfigurationPersistence.favouritePaths, path]);
         }
-      }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.StarIcon, { size: 18, className: favourite ? "text-secondary" : "text-surface-400 dark:text-surface-500" }) }, "favourite")] : [];
+      }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.StarIcon, { size: "small", className: favourite ? "text-secondary" : "text-surface-400 dark:text-surface-500" }) }, "favourite")] : [];
       if (customizationController.plugins && collection) {
         let t62;
         if ($[14] !== collection || $[15] !== context || $[16] !== path) {
@@ -13184,7 +13300,7 @@
     if ($[7] !== additionalActions || $[8] !== additionalChildrenStart || $[9] !== containerRef || $[10] !== context || $[11] !== customizationController.plugins || $[12] !== direction || $[13] !== filteredNavigationEntries || $[14] !== filteredUrls || $[15] !== groups || $[16] !== performingSearch) {
       const filteredGroups = filteredUrls ? filteredNavigationEntries.map(_temp2$5) : [];
       const allGroups = filteredUrls ? filteredGroups.filter((group, index) => filteredGroups.indexOf(group) === index) : [...groups];
-      if (filteredNavigationEntries.filter(_temp3$2).length > 0 || filteredNavigationEntries.length === 0) {
+      if (filteredNavigationEntries.filter(_temp3$3).length > 0 || filteredNavigationEntries.length === 0) {
         allGroups.push(void 0);
       }
       let additionalPluginChildrenStart;
@@ -13194,7 +13310,7 @@
           const sectionProps = {
             context
           };
-          t143 = customizationController.plugins.filter(_temp4$1).map((plugin_0, i) => {
+          t143 = customizationController.plugins.filter(_temp4$2).map((plugin_0, i) => {
             const section = plugin_0.homePage.includeSection(sectionProps);
             return /* @__PURE__ */ jsxRuntime.jsx(NavigationGroup, { group: section.title, children: section.children }, `plugin_section_${plugin_0.key}`);
           });
@@ -13215,7 +13331,7 @@
         additionalPluginSections = t153;
         let t162;
         if ($[34] !== customizationController.plugins) {
-          t162 = customizationController.plugins.filter(_temp5$1).map(_temp6$1);
+          t162 = customizationController.plugins.filter(_temp5$2).map(_temp6$2);
           $[34] = customizationController.plugins;
           $[35] = t162;
         } else {
@@ -13232,7 +13348,7 @@
         additionalPluginChildrenStart = t172;
         let t18;
         if ($[38] !== customizationController.plugins) {
-          t18 = customizationController.plugins.filter(_temp7).map(_temp8);
+          t18 = customizationController.plugins.filter(_temp7$1).map(_temp8);
           $[38] = customizationController.plugins;
           $[39] = t18;
         } else {
@@ -13329,7 +13445,7 @@
               context.analyticsController?.onAnalyticsEvent?.(event, {
                 path: entry_1.path
               });
-            } }) }, `nav_${entry_1.group}_${entry_1.name}`)),
+            } }) }, `nav_${entry_1.group}_${entry_1.path}_${entry_1.name}`)),
             group_0?.toLowerCase() !== "admin" && AdditionalCards && AdditionalCards.map((AdditionalCard, i_2) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AdditionalCard, { ...actionProps }) }, `nav_${group_0}_add_${i_2}`))
           ] }) }, `plugin_section_${group_0}`);
         };
@@ -13420,19 +13536,19 @@
   function _temp8(plugin_4, i_1) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { children: plugin_4.homePage.additionalChildrenEnd }, `plugin_children_start_${i_1}`);
   }
-  function _temp7(plugin_3) {
+  function _temp7$1(plugin_3) {
     return plugin_3.homePage?.additionalChildrenEnd;
   }
-  function _temp6$1(plugin_2, i_0) {
+  function _temp6$2(plugin_2, i_0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { children: plugin_2.homePage.additionalChildrenStart }, `plugin_children_start_${i_0}`);
   }
-  function _temp5$1(plugin_1) {
+  function _temp5$2(plugin_1) {
     return plugin_1.homePage?.additionalChildrenStart;
   }
-  function _temp4$1(plugin) {
+  function _temp4$2(plugin) {
     return plugin.homePage?.includeSection;
   }
-  function _temp3$2(e_1) {
+  function _temp3$3(e_1) {
     return !e_1.group;
   }
   function _temp2$5(entry) {
@@ -13610,7 +13726,7 @@
     let relX = 0;
     let relY = 0;
     const listeningRef = React.useRef(false);
-    const onMouseDown = (event) => {
+    const onMouseDown = React.useCallback((event) => {
       if (event.button !== 0 || !containerRef.current || event.defaultPrevented || event.innerClicked) {
         return;
       }
@@ -13624,14 +13740,14 @@
       document.addEventListener("mouseup", onMouseUp);
       document.addEventListener("selectstart", onSelect);
       listeningRef.current = true;
-    };
-    const onMouseDownInner = (event_0) => {
+    }, [containerRef, onMove]);
+    const onMouseDownInner = React.useCallback((event_0) => {
       event_0.innerClicked = true;
-    };
-    const onSelect = (event_1) => {
+    }, []);
+    const onSelect = React.useCallback((event_1) => {
       event_1.preventDefault();
       event_1.stopPropagation();
-    };
+    }, []);
     const onMouseUp = (event_2) => {
       document.removeEventListener("mousemove", onMouseMove);
       document.removeEventListener("mouseup", onMouseUp);
@@ -13664,7 +13780,7 @@
         if (current) current.removeEventListener("mousedown", onMouseDown);
         if (innerCurrent) innerCurrent.removeEventListener("mousedown", onMouseDownInner);
       };
-    });
+    }, [containerRef, innerRef, onMouseDownInner, onMouseDown]);
   }
   function useWindowSize() {
     const $ = reactCompilerRuntime.c(3);
@@ -13703,46 +13819,6 @@
     React.useLayoutEffect(t1, t2);
     return size;
   }
-  const ElementResizeListener = ({
-    onResize
-  }) => {
-    const rafRef = React.useRef(0);
-    const objectRef = React.useRef(null);
-    const onResizeRef = React.useRef(onResize);
-    onResizeRef.current = onResize;
-    const _onResize = React.useCallback((e) => {
-      if (rafRef.current) {
-        cancelAnimationFrame(rafRef.current);
-      }
-      rafRef.current = requestAnimationFrame(() => {
-        onResizeRef.current(e);
-      });
-    }, []);
-    const onLoad = React.useCallback(() => {
-      const obj = objectRef.current;
-      if (obj && obj.contentDocument && obj.contentDocument.defaultView) {
-        obj.contentDocument.defaultView.addEventListener("resize", _onResize);
-      }
-    }, [_onResize]);
-    React.useEffect(() => {
-      const obj_0 = objectRef.current;
-      return () => {
-        if (obj_0 && obj_0.contentDocument && obj_0.contentDocument.defaultView) {
-          obj_0.contentDocument.defaultView.removeEventListener("resize", _onResize);
-        }
-      };
-    }, [_onResize]);
-    return /* @__PURE__ */ jsxRuntime.jsx("object", { onLoad, ref: objectRef, tabIndex: -1, type: "text/html", data: "about:blank", title: "", style: {
-      position: "absolute",
-      top: 0,
-      left: 0,
-      height: "100%",
-      width: "100%",
-      pointerEvents: "none",
-      zIndex: -1,
-      opacity: 0
-    } });
-  };
   function CustomIdField({
     customId,
     entityId,
@@ -13784,7 +13860,9 @@
       ] }) : void 0
     };
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      enumValues && /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { size: "large", error, fullWidth: true, onValueChange: (v) => onChange(v), ...fieldProps, renderValue: (option) => {
+      enumValues && /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { size: "large", error, fullWidth: true, onValueChange: (v) => {
+        onChange(v);
+      }, ...fieldProps, renderValue: (option) => {
         const enumConfig = enumValues.find((e_1) => e_1.id === option);
         if (!enumConfig) return option;
         return `${enumConfig.id} - ${enumConfig.label}`;
@@ -14363,7 +14441,7 @@
     const formRef = React.useRef(null);
     const formView = /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       !Builder && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full py-2 flex flex-col items-start my-4 lg:my-6", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { className: "py-4 flex-grow line-clamp-1 " + (collection.hideIdFromForm ? "mb-2" : "mb-0"), variant: "h4", children: title ?? collection.singularName ?? collection.name }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { className: "my-4 flex-grow line-clamp-1 " + (collection.hideIdFromForm ? "mb-6" : ""), variant: "h4", children: title ?? collection.singularName ?? collection.name }),
         showEntityPath && /* @__PURE__ */ jsxRuntime.jsx(ui.Alert, { color: "base", className: "w-full", size: "small", children: /* @__PURE__ */ jsxRuntime.jsxs("code", { className: "text-xs select-all text-text-secondary dark:text-text-secondary-dark", children: [
           entity?.path ?? path,
           "/",
@@ -14516,7 +14594,7 @@
     const t1 = small ? "gap-1" : "gap-2";
     let t2;
     if ($[0] !== className || $[1] !== t1) {
-      t2 = ui.cls("inline-flex items-center my-0.5", t1, className);
+      t2 = ui.cls("align-middle inline-flex items-center my-0.5", t1, className);
       $[0] = className;
       $[1] = t1;
       $[2] = t2;
@@ -14852,7 +14930,7 @@
     }
     let t13;
     if ($[20] !== disabled || $[21] !== handleClearClick || $[22] !== property.clearable) {
-      t13 = property.clearable && !disabled && /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { onClick: handleClearClick, children: /* @__PURE__ */ jsxRuntime.jsx(ui.CloseIcon, {}) });
+      t13 = property.clearable && !disabled && /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: handleClearClick, children: /* @__PURE__ */ jsxRuntime.jsx(ui.CloseIcon, { size: "small" }) });
       $[20] = disabled;
       $[21] = handleClearClick;
       $[22] = property.clearable;
@@ -14965,7 +15043,7 @@
       ] }, enumKey);
     }, [enumValues, setValue, value]);
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.MultiSelect, { className: "w-full mt-2", size, value: validValue ? value.map((v_0) => v_0.toString()) : [], disabled, modalPopover: true, label: /* @__PURE__ */ jsxRuntime.jsx(LabelWithIconAndTooltip, { propertyKey, icon: getIconForProperty(property, "small"), required: property.validation?.required, title: property.name, className: "h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5" }), onValueChange: (updatedValue) => {
+      /* @__PURE__ */ jsxRuntime.jsx(ui.MultiSelect, { className: "w-full mt-2", size, value: validValue ? value.map((v_0) => v_0?.toString()) : [], disabled, modalPopover: true, label: /* @__PURE__ */ jsxRuntime.jsx(LabelWithIconAndTooltip, { propertyKey, icon: getIconForProperty(property, "small"), required: property.validation?.required, title: property.name, className: "h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5" }), onValueChange: (updatedValue) => {
         let newValue;
         if (of && of?.dataType === "number") {
           newValue = updatedValue ? updatedValue.map((e_1) => parseFloat(e_1)) : [];
@@ -15046,7 +15124,8 @@
       !collection && /* @__PURE__ */ jsxRuntime.jsx(ErrorView, { error: "The specified collection does not exist. Check console" }),
       collection && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group", children: [
         /* @__PURE__ */ jsxRuntime.jsx(ArrayContainer, { droppableId: propertyKey, value, disabled: isSubmitting, buildEntry, canAddElements: false, addLabel: property.name ? "Add reference to " + property.name : "Add reference", newDefaultEntry: property.of.defaultValue, onValueChange: (value_0) => setFieldValue(propertyKey, value_0) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { className: "my-4 justify-center text-left", variant: "text", color: "primary", disabled: isSubmitting, onClick: onEntryClick, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { className: "ml-3.5 my-4 justify-center text-left", variant: "text", color: "primary", disabled: isSubmitting, onClick: onEntryClick, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.EditIcon, { size: "small" }),
           "Edit ",
           property.name
         ] })
@@ -15295,15 +15374,161 @@
     }
     return t12;
   }
+  function SortableStorageItem(t0) {
+    const $ = reactCompilerRuntime.c(35);
+    const {
+      id,
+      entry,
+      property,
+      metadata,
+      storagePathBuilder,
+      onFileUploadComplete,
+      onClear,
+      disabled
+    } = t0;
+    let t1;
+    if ($[0] !== id) {
+      t1 = {
+        id
+      };
+      $[0] = id;
+      $[1] = t1;
+    } else {
+      t1 = $[1];
+    }
+    const {
+      attributes,
+      listeners: listeners2,
+      setNodeRef,
+      transform,
+      transition,
+      isDragging
+    } = sortable.useSortable(t1);
+    let t2;
+    if ($[2] !== transform) {
+      t2 = utilities.CSS.Transform.toString(transform);
+      $[2] = transform;
+      $[3] = t2;
+    } else {
+      t2 = $[3];
+    }
+    const t3 = isDragging ? 100 : void 0;
+    const t4 = isDragging ? 0.8 : 1;
+    let t5;
+    if ($[4] !== t2 || $[5] !== t3 || $[6] !== t4 || $[7] !== transition) {
+      t5 = {
+        transform: t2,
+        transition,
+        zIndex: t3,
+        opacity: t4
+      };
+      $[4] = t2;
+      $[5] = t3;
+      $[6] = t4;
+      $[7] = transition;
+      $[8] = t5;
+    } else {
+      t5 = $[8];
+    }
+    const style = t5;
+    const getImageSizeNumber = _temp$a;
+    let child;
+    if (entry.storagePathOrDownloadUrl) {
+      const t62 = `storage_preview_${entry.storagePathOrDownloadUrl}`;
+      let t72;
+      if ($[9] !== entry.storagePathOrDownloadUrl || $[10] !== onClear) {
+        t72 = () => onClear(entry.storagePathOrDownloadUrl);
+        $[9] = entry.storagePathOrDownloadUrl;
+        $[10] = onClear;
+        $[11] = t72;
+      } else {
+        t72 = $[11];
+      }
+      let t8;
+      if ($[12] !== disabled || $[13] !== entry.size || $[14] !== entry.storagePathOrDownloadUrl || $[15] !== property || $[16] !== t62 || $[17] !== t72) {
+        t8 = /* @__PURE__ */ jsxRuntime.jsx(StorageItemPreview, { name: t62, property, disabled, value: entry.storagePathOrDownloadUrl, onRemove: t72, size: entry.size });
+        $[12] = disabled;
+        $[13] = entry.size;
+        $[14] = entry.storagePathOrDownloadUrl;
+        $[15] = property;
+        $[16] = t62;
+        $[17] = t72;
+        $[18] = t8;
+      } else {
+        t8 = $[18];
+      }
+      child = t8;
+    } else {
+      if (entry.file) {
+        let t62;
+        if ($[19] !== entry.file || $[20] !== storagePathBuilder) {
+          t62 = storagePathBuilder(entry.file);
+          $[19] = entry.file;
+          $[20] = storagePathBuilder;
+          $[21] = t62;
+        } else {
+          t62 = $[21];
+        }
+        const t72 = getImageSizeNumber(entry.size);
+        let t8;
+        if ($[22] !== entry || $[23] !== metadata || $[24] !== onFileUploadComplete || $[25] !== t62 || $[26] !== t72) {
+          t8 = /* @__PURE__ */ jsxRuntime.jsx(StorageUploadProgress, { entry, metadata, storagePath: t62, onFileUploadComplete, imageSize: t72, simple: false });
+          $[22] = entry;
+          $[23] = metadata;
+          $[24] = onFileUploadComplete;
+          $[25] = t62;
+          $[26] = t72;
+          $[27] = t8;
+        } else {
+          t8 = $[27];
+        }
+        child = t8;
+      }
+    }
+    let t6;
+    if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+      t6 = ui.cls("rounded-md m-1");
+      $[28] = t6;
+    } else {
+      t6 = $[28];
+    }
+    let t7;
+    if ($[29] !== attributes || $[30] !== child || $[31] !== listeners2 || $[32] !== setNodeRef || $[33] !== style) {
+      t7 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setNodeRef, style, ...attributes, ...listeners2, className: t6, tabIndex: -1, children: child });
+      $[29] = attributes;
+      $[30] = child;
+      $[31] = listeners2;
+      $[32] = setNodeRef;
+      $[33] = style;
+      $[34] = t7;
+    } else {
+      t7 = $[34];
+    }
+    return t7;
+  }
+  function _temp$a(previewSize) {
+    switch (previewSize) {
+      case "small": {
+        return 40;
+      }
+      case "medium": {
+        return 118;
+      }
+      case "large": {
+        return 220;
+      }
+      default: {
+        return 118;
+      }
+    }
+  }
   function FileDropComponent(t0) {
-    const $ = reactCompilerRuntime.c(64);
+    const $ = reactCompilerRuntime.c(63);
     const {
       storage,
       disabled,
-      isDraggingOver,
       onFilesAdded,
       multipleFilesSupported,
-      droppableProvided,
       autoFocus,
       internalValue,
       property,
@@ -15311,23 +15536,23 @@
       metadata,
       storagePathBuilder,
       onFileUploadComplete,
-      size,
       name,
-      helpText
+      helpText,
+      isDndItemDragging
     } = t0;
     const snackbarContext = useSnackbarController();
     let t1;
     if ($[0] !== storage.acceptedFiles) {
-      t1 = storage.acceptedFiles ? storage.acceptedFiles.map(_temp$a).reduce(_temp2$4, {}) : void 0;
+      t1 = storage.acceptedFiles ? storage.acceptedFiles.reduce(_temp2$4, {}) : void 0;
       $[0] = storage.acceptedFiles;
       $[1] = t1;
     } else {
       t1 = $[1];
     }
-    const t2 = disabled || isDraggingOver;
+    const t2 = disabled || isDndItemDragging;
     let t3;
     if ($[2] !== snackbarContext || $[3] !== storage.maxSize) {
-      t3 = (fileRejections, event) => {
+      t3 = (fileRejections) => {
         for (const fileRejection of fileRejections) {
           for (const error of fileRejection.errors) {
             console.error("Error uploading file: ", error);
@@ -15389,170 +15614,154 @@
     }
     const t6 = disabled ? ui.fieldBackgroundDisabledMixin : ui.fieldBackgroundHoverMixin;
     const t7 = disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : "";
-    const t8 = multipleFilesSupported && internalValue.length ? "" : "flex";
+    const t8 = multipleFilesSupported && internalValue.length === 0 && "flex";
     const t9 = !isDragActive;
-    let t10;
-    if ($[13] !== disabled || $[14] !== isDragAccept || $[15] !== isDragActive || $[16] !== isDragReject || $[17] !== t6 || $[18] !== t7 || $[19] !== t8 || $[20] !== t9) {
-      t10 = ui.cls(ui.fieldBackgroundMixin, t6, t7, dropZoneClasses, t8, {
+    const t10 = disabled || isDndItemDragging;
+    let t11;
+    if ($[13] !== isDragAccept || $[14] !== isDragActive || $[15] !== isDragReject || $[16] !== t10 || $[17] !== t6 || $[18] !== t7 || $[19] !== t8 || $[20] !== t9) {
+      t11 = ui.cls(ui.fieldBackgroundMixin, t6, t7, dropZoneClasses, t8, {
         [nonActiveDropClasses]: t9,
         [activeDropClasses]: isDragActive,
         [rejectDropClasses]: isDragReject,
         [acceptDropClasses]: isDragAccept,
-        [disabledClasses]: disabled
+        [disabledClasses]: t10
       });
-      $[13] = disabled;
-      $[14] = isDragAccept;
-      $[15] = isDragActive;
-      $[16] = isDragReject;
+      $[13] = isDragAccept;
+      $[14] = isDragActive;
+      $[15] = isDragReject;
+      $[16] = t10;
       $[17] = t6;
       $[18] = t7;
       $[19] = t8;
       $[20] = t9;
-      $[21] = t10;
-    } else {
-      t10 = $[21];
-    }
-    const t11 = droppableProvided.droppableProps;
-    const t12 = droppableProvided.innerRef;
-    const t13 = multipleFilesSupported && internalValue.length ? "overflow-auto" : "";
-    const t14 = multipleFilesSupported && internalValue.length ? "min-h-[180px]" : "min-h-[250px]";
-    let t15;
-    if ($[22] !== t13 || $[23] !== t14) {
-      t15 = ui.cls("flex items-center p-1 no-scrollbar", t13, t14);
-      $[22] = t13;
-      $[23] = t14;
-      $[24] = t15;
+      $[21] = t11;
     } else {
-      t15 = $[24];
+      t11 = $[21];
     }
+    const t12 = multipleFilesSupported && internalValue.length ? "flex-row overflow-x-auto" : "flex-col";
+    const t13 = internalValue.length === 0 && "min-h-[250px] justify-center";
+    const t14 = multipleFilesSupported && internalValue.length > 0 && "min-h-[180px]";
+    const t15 = !multipleFilesSupported && internalValue.length > 0 && "min-h-[250px]";
     let t16;
-    if ($[25] !== getInputProps) {
-      t16 = getInputProps();
-      $[25] = getInputProps;
+    if ($[22] !== t12 || $[23] !== t13 || $[24] !== t14 || $[25] !== t15) {
+      t16 = ui.cls("flex items-center p-1 no-scrollbar", t12, t13, t14, t15);
+      $[22] = t12;
+      $[23] = t13;
+      $[24] = t14;
+      $[25] = t15;
       $[26] = t16;
     } else {
       t16 = $[26];
     }
     let t17;
-    if ($[27] !== autoFocus || $[28] !== t16) {
-      t17 = /* @__PURE__ */ jsxRuntime.jsx("input", { autoFocus, ...t16 });
-      $[27] = autoFocus;
-      $[28] = t16;
-      $[29] = t17;
+    if ($[27] !== getInputProps) {
+      t17 = getInputProps();
+      $[27] = getInputProps;
+      $[28] = t17;
     } else {
-      t17 = $[29];
+      t17 = $[28];
     }
     let t18;
-    if ($[30] !== disabled || $[31] !== internalValue || $[32] !== metadata || $[33] !== name || $[34] !== onClear || $[35] !== onFileUploadComplete || $[36] !== property || $[37] !== size || $[38] !== storagePathBuilder) {
-      let t192;
-      if ($[40] !== disabled || $[41] !== metadata || $[42] !== name || $[43] !== onClear || $[44] !== onFileUploadComplete || $[45] !== property || $[46] !== size || $[47] !== storagePathBuilder) {
-        t192 = (entry, index) => {
-          let child;
-          if (entry.storagePathOrDownloadUrl) {
-            child = /* @__PURE__ */ jsxRuntime.jsx(StorageItemPreview, { name: `storage_preview_${entry.storagePathOrDownloadUrl}`, property, disabled, value: entry.storagePathOrDownloadUrl, onRemove: onClear, size: entry.size });
-          } else {
-            if (entry.file) {
-              child = /* @__PURE__ */ jsxRuntime.jsx(StorageUploadProgress, { entry, metadata, storagePath: storagePathBuilder(entry.file), onFileUploadComplete, imageSize: size === "large" ? 220 : 118, simple: false });
-            }
-          }
-          return /* @__PURE__ */ jsxRuntime.jsx(dnd.Draggable, { draggableId: `array_field_${name}_${entry.id}`, index, children: (provided, snapshot) => /* @__PURE__ */ jsxRuntime.jsx("div", { tabIndex: -1, ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, className: ui.cls("rounded-md"), style: {
-            ...provided.draggableProps.style
-          }, children: child }) }, `array_field_${name}_${entry.id}`);
-        };
-        $[40] = disabled;
-        $[41] = metadata;
-        $[42] = name;
-        $[43] = onClear;
-        $[44] = onFileUploadComplete;
-        $[45] = property;
-        $[46] = size;
-        $[47] = storagePathBuilder;
-        $[48] = t192;
-      } else {
-        t192 = $[48];
-      }
-      t18 = internalValue.map(t192);
-      $[30] = disabled;
-      $[31] = internalValue;
-      $[32] = metadata;
-      $[33] = name;
-      $[34] = onClear;
-      $[35] = onFileUploadComplete;
-      $[36] = property;
-      $[37] = size;
-      $[38] = storagePathBuilder;
-      $[39] = t18;
-    } else {
-      t18 = $[39];
+    if ($[29] !== autoFocus || $[30] !== t17) {
+      t18 = /* @__PURE__ */ jsxRuntime.jsx("input", { autoFocus, ...t17 });
+      $[29] = autoFocus;
+      $[30] = t17;
+      $[31] = t18;
+    } else {
+      t18 = $[31];
     }
     let t19;
-    if ($[49] !== droppableProvided.droppableProps || $[50] !== droppableProvided.innerRef || $[51] !== droppableProvided.placeholder || $[52] !== t15 || $[53] !== t17 || $[54] !== t18) {
-      t19 = /* @__PURE__ */ jsxRuntime.jsxs("div", { ...t11, ref: t12, className: t15, children: [
-        t17,
+    if ($[32] !== disabled || $[33] !== internalValue || $[34] !== metadata || $[35] !== multipleFilesSupported || $[36] !== name || $[37] !== onClear || $[38] !== onFileUploadComplete || $[39] !== property || $[40] !== storagePathBuilder) {
+      let t202;
+      if ($[42] !== disabled || $[43] !== metadata || $[44] !== multipleFilesSupported || $[45] !== name || $[46] !== onClear || $[47] !== onFileUploadComplete || $[48] !== property || $[49] !== storagePathBuilder) {
+        t202 = (entry) => /* @__PURE__ */ jsxRuntime.jsx(SortableStorageItem, { id: entry.id, entry, property, name, metadata, storagePathBuilder, onFileUploadComplete, onClear, disabled, isSortable: multipleFilesSupported }, entry.id);
+        $[42] = disabled;
+        $[43] = metadata;
+        $[44] = multipleFilesSupported;
+        $[45] = name;
+        $[46] = onClear;
+        $[47] = onFileUploadComplete;
+        $[48] = property;
+        $[49] = storagePathBuilder;
+        $[50] = t202;
+      } else {
+        t202 = $[50];
+      }
+      t19 = internalValue.map(t202);
+      $[32] = disabled;
+      $[33] = internalValue;
+      $[34] = metadata;
+      $[35] = multipleFilesSupported;
+      $[36] = name;
+      $[37] = onClear;
+      $[38] = onFileUploadComplete;
+      $[39] = property;
+      $[40] = storagePathBuilder;
+      $[41] = t19;
+    } else {
+      t19 = $[41];
+    }
+    let t20;
+    if ($[51] !== t16 || $[52] !== t18 || $[53] !== t19) {
+      t20 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t16, children: [
         t18,
-        droppableProvided.placeholder
+        t19
       ] });
-      $[49] = droppableProvided.droppableProps;
-      $[50] = droppableProvided.innerRef;
-      $[51] = droppableProvided.placeholder;
-      $[52] = t15;
-      $[53] = t17;
-      $[54] = t18;
-      $[55] = t19;
-    } else {
-      t19 = $[55];
-    }
-    const t20 = disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : "";
-    let t21;
-    if ($[56] !== helpText || $[57] !== t20) {
-      t21 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow min-h-[38px] box-border m-2 text-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { align: "center", variant: "label", className: t20, children: helpText }) });
-      $[56] = helpText;
-      $[57] = t20;
-      $[58] = t21;
+      $[51] = t16;
+      $[52] = t18;
+      $[53] = t19;
+      $[54] = t20;
     } else {
-      t21 = $[58];
+      t20 = $[54];
     }
+    const t21 = disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : "";
     let t22;
-    if ($[59] !== t10 || $[60] !== t19 || $[61] !== t21 || $[62] !== t5) {
-      t22 = /* @__PURE__ */ jsxRuntime.jsxs("div", { ...t5, className: t10, children: [
-        t19,
-        t21
+    if ($[55] !== helpText || $[56] !== t21) {
+      t22 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow min-h-[38px] box-border m-2 text-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { align: "center", variant: "label", className: t21, children: helpText }) });
+      $[55] = helpText;
+      $[56] = t21;
+      $[57] = t22;
+    } else {
+      t22 = $[57];
+    }
+    let t23;
+    if ($[58] !== t11 || $[59] !== t20 || $[60] !== t22 || $[61] !== t5) {
+      t23 = /* @__PURE__ */ jsxRuntime.jsxs("div", { ...t5, className: t11, children: [
+        t20,
+        t22
       ] });
-      $[59] = t10;
-      $[60] = t19;
-      $[61] = t21;
-      $[62] = t5;
-      $[63] = t22;
+      $[58] = t11;
+      $[59] = t20;
+      $[60] = t22;
+      $[61] = t5;
+      $[62] = t23;
     } else {
-      t22 = $[63];
+      t23 = $[62];
     }
-    return t22;
+    return t23;
   }
-  function _temp2$4(a, b) {
+  function _temp2$4(acc, ext) {
     return {
-      ...a,
-      ...b
+      ...acc,
+      [ext]: []
     };
   }
-  function _temp$a(e) {
-    return {
-      [e]: []
-    };
-  }
-  function StorageUpload({
-    property,
-    name,
-    value,
-    setInternalValue,
-    onChange,
-    multipleFilesSupported,
-    onFileUploadComplete,
-    disabled,
-    onFilesAdded,
-    autoFocus,
-    storage,
-    storagePathBuilder
-  }) {
+  function StorageUpload(t0) {
+    const $ = reactCompilerRuntime.c(44);
+    const {
+      property,
+      name,
+      value,
+      setInternalValue,
+      onChange,
+      multipleFilesSupported,
+      onFileUploadComplete,
+      disabled,
+      onFilesAdded,
+      autoFocus,
+      storage,
+      storagePathBuilder
+    } = t0;
     if (multipleFilesSupported) {
       const arrayProperty = property;
       if (arrayProperty.of) {
@@ -15567,41 +15776,208 @@
       }
     }
     const metadata = storage?.metadata;
-    const size = multipleFilesSupported ? "medium" : "large";
-    const moveItem = React.useCallback((fromIndex, toIndex) => {
-      if (!multipleFilesSupported) return;
-      const newValue = [...value];
-      const item = newValue[fromIndex];
-      newValue.splice(fromIndex, 1);
-      newValue.splice(toIndex, 0, item);
-      setInternalValue(newValue);
-      const fieldValue = newValue.filter((e) => !!e.storagePathOrDownloadUrl).map((e_0) => e_0.storagePathOrDownloadUrl);
-      onChange(fieldValue);
-    }, [multipleFilesSupported, onChange, setInternalValue, value]);
-    const onDragEnd = React.useCallback((result) => {
-      if (!result.destination) {
-        return;
-      }
-      moveItem(result.source.index, result.destination.index);
-    }, [moveItem]);
-    const onClear = React.useCallback((clearedStoragePathOrDownloadUrl) => {
-      if (multipleFilesSupported) {
-        const newValue_0 = value.filter((v) => v.storagePathOrDownloadUrl !== clearedStoragePathOrDownloadUrl);
-        onChange(newValue_0.filter((v_0) => !!v_0.storagePathOrDownloadUrl).map((v_1) => v_1.storagePathOrDownloadUrl));
+    const [isDndItemDragging, setIsDndItemDragging] = React.useState(false);
+    let t1;
+    if ($[0] !== multipleFilesSupported || $[1] !== onChange || $[2] !== setInternalValue || $[3] !== value) {
+      t1 = (fromIndex, toIndex) => {
+        if (!multipleFilesSupported || fromIndex === toIndex) {
+          return;
+        }
+        const newValue = [...value];
+        const item = newValue[fromIndex];
+        newValue.splice(fromIndex, 1);
+        newValue.splice(toIndex, 0, item);
+        setInternalValue(newValue);
+        const fieldValue = newValue.filter(_temp3$2).map(_temp4$1);
+        onChange(fieldValue);
+      };
+      $[0] = multipleFilesSupported;
+      $[1] = onChange;
+      $[2] = setInternalValue;
+      $[3] = value;
+      $[4] = t1;
+    } else {
+      t1 = $[4];
+    }
+    const moveItem = t1;
+    let t2;
+    if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+      t2 = {
+        activationConstraint: {
+          distance: 5
+        }
+      };
+      $[5] = t2;
+    } else {
+      t2 = $[5];
+    }
+    let t3;
+    if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+      t3 = {
+        coordinateGetter: sortable.sortableKeyboardCoordinates
+      };
+      $[6] = t3;
+    } else {
+      t3 = $[6];
+    }
+    const sensors = core.useSensors(core.useSensor(core.PointerSensor, t2), core.useSensor(core.KeyboardSensor, t3));
+    let t4;
+    if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+      t4 = (event) => {
+        setIsDndItemDragging(true);
+      };
+      $[7] = t4;
+    } else {
+      t4 = $[7];
+    }
+    const handleDragStart = t4;
+    let t5;
+    if ($[8] !== moveItem || $[9] !== value) {
+      t5 = (event_0) => {
+        setIsDndItemDragging(false);
+        const {
+          active,
+          over
+        } = event_0;
+        if (over && active.id !== over.id) {
+          const oldIndex = value.findIndex((item_0) => item_0.id === active.id);
+          const newIndex = value.findIndex((item_1) => item_1.id === over.id);
+          if (oldIndex !== -1 && newIndex !== -1) {
+            moveItem(oldIndex, newIndex);
+          }
+        }
+      };
+      $[8] = moveItem;
+      $[9] = value;
+      $[10] = t5;
+    } else {
+      t5 = $[10];
+    }
+    const handleDragEnd = t5;
+    let t6;
+    if ($[11] !== multipleFilesSupported || $[12] !== onChange || $[13] !== setInternalValue || $[14] !== value) {
+      t6 = (clearedStoragePathOrDownloadUrl) => {
+        let newValue_0;
+        if (multipleFilesSupported) {
+          newValue_0 = value.filter((v) => v.storagePathOrDownloadUrl !== clearedStoragePathOrDownloadUrl);
+          onChange(newValue_0.filter(_temp5$1).map(_temp6$1));
+        } else {
+          newValue_0 = [];
+          onChange(null);
+        }
         setInternalValue(newValue_0);
+      };
+      $[11] = multipleFilesSupported;
+      $[12] = onChange;
+      $[13] = setInternalValue;
+      $[14] = value;
+      $[15] = t6;
+    } else {
+      t6 = $[15];
+    }
+    const onClear = t6;
+    const helpText = multipleFilesSupported ? "Drag 'n' drop some files here, or click to select files. Drag to reorder." : "Drag 'n' drop a file here, or click to select one";
+    const renderProperty = multipleFilesSupported ? property.of : property;
+    let t7;
+    if ($[16] !== autoFocus || $[17] !== disabled || $[18] !== helpText || $[19] !== isDndItemDragging || $[20] !== metadata || $[21] !== multipleFilesSupported || $[22] !== name || $[23] !== onClear || $[24] !== onFileUploadComplete || $[25] !== onFilesAdded || $[26] !== renderProperty || $[27] !== storage || $[28] !== storagePathBuilder || $[29] !== value) {
+      t7 = {
+        storage,
+        disabled,
+        onFilesAdded,
+        multipleFilesSupported,
+        autoFocus,
+        internalValue: value,
+        property: renderProperty,
+        onClear,
+        metadata,
+        storagePathBuilder,
+        onFileUploadComplete,
+        name,
+        helpText,
+        isDndItemDragging
+      };
+      $[16] = autoFocus;
+      $[17] = disabled;
+      $[18] = helpText;
+      $[19] = isDndItemDragging;
+      $[20] = metadata;
+      $[21] = multipleFilesSupported;
+      $[22] = name;
+      $[23] = onClear;
+      $[24] = onFileUploadComplete;
+      $[25] = onFilesAdded;
+      $[26] = renderProperty;
+      $[27] = storage;
+      $[28] = storagePathBuilder;
+      $[29] = value;
+      $[30] = t7;
+    } else {
+      t7 = $[30];
+    }
+    const fileDropProps = t7;
+    if (multipleFilesSupported) {
+      let t8;
+      if ($[31] !== value) {
+        t8 = value.map(_temp7);
+        $[31] = value;
+        $[32] = t8;
       } else {
-        onChange(null);
-        setInternalValue([]);
+        t8 = $[32];
       }
-    }, [value, multipleFilesSupported, onChange]);
-    const helpText = multipleFilesSupported ? "Drag 'n' drop some files here, or click to select files" : "Drag 'n' drop a file here, or click to select one";
-    const renderProperty = multipleFilesSupported ? property.of : property;
-    return /* @__PURE__ */ jsxRuntime.jsx(dnd.DragDropContext, { onDragEnd, children: /* @__PURE__ */ jsxRuntime.jsx(dnd.Droppable, { droppableId: `droppable_${name}`, direction: "horizontal", renderClone: (provided, snapshot, rubric) => {
-      const entry = value[rubric.source.index];
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, style: provided.draggableProps.style, className: "rounded", children: /* @__PURE__ */ jsxRuntime.jsx(StorageItemPreview, { name: `storage_preview_${entry.storagePathOrDownloadUrl}`, placeholder: true, property: renderProperty, disabled: true, value: entry.storagePathOrDownloadUrl, onRemove: onClear, size: entry.size }) });
-    }, children: (provided_0, snapshot_0) => {
-      return /* @__PURE__ */ jsxRuntime.jsx(FileDropComponent, { storage, disabled, isDraggingOver: snapshot_0.isDraggingOver, droppableProvided: provided_0, onFilesAdded, multipleFilesSupported, autoFocus, internalValue: value, property: renderProperty, onClear, metadata, storagePathBuilder, onFileUploadComplete, size, name, helpText });
-    } }) });
+      let t9;
+      if ($[33] !== fileDropProps) {
+        t9 = /* @__PURE__ */ jsxRuntime.jsx(FileDropComponent, { ...fileDropProps });
+        $[33] = fileDropProps;
+        $[34] = t9;
+      } else {
+        t9 = $[34];
+      }
+      let t10;
+      if ($[35] !== t8 || $[36] !== t9) {
+        t10 = /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: t8, strategy: sortable.horizontalListSortingStrategy, children: t9 });
+        $[35] = t8;
+        $[36] = t9;
+        $[37] = t10;
+      } else {
+        t10 = $[37];
+      }
+      let t11;
+      if ($[38] !== handleDragEnd || $[39] !== sensors || $[40] !== t10) {
+        t11 = /* @__PURE__ */ jsxRuntime.jsx(core.DndContext, { sensors, collisionDetection: core.closestCenter, onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: t10 });
+        $[38] = handleDragEnd;
+        $[39] = sensors;
+        $[40] = t10;
+        $[41] = t11;
+      } else {
+        t11 = $[41];
+      }
+      return t11;
+    } else {
+      let t8;
+      if ($[42] !== fileDropProps) {
+        t8 = /* @__PURE__ */ jsxRuntime.jsx(FileDropComponent, { ...fileDropProps, isDndItemDragging: false });
+        $[42] = fileDropProps;
+        $[43] = t8;
+      } else {
+        t8 = $[43];
+      }
+      return t8;
+    }
+  }
+  function _temp7(v_2) {
+    return v_2.id;
+  }
+  function _temp6$1(v_1) {
+    return v_1.storagePathOrDownloadUrl;
+  }
+  function _temp5$1(v_0) {
+    return !!v_0.storagePathOrDownloadUrl;
+  }
+  function _temp4$1(e_0) {
+    return e_0.storagePathOrDownloadUrl;
+  }
+  function _temp3$2(e) {
+    return !!e.storagePathOrDownloadUrl;
   }
   function TextFieldBinding(t0) {
     const $ = reactCompilerRuntime.c(52);
@@ -16420,6 +16796,7 @@
       error,
       disabled,
       property,
+      partOfArray,
       minimalistView: minimalistViewProp,
       includeDescription,
       autoFocus,
@@ -16544,7 +16921,7 @@
     }
     const t6 = minimalistView && mapFormView;
     const t7 = showError ?? false;
-    const t8 = error ? typeof error === "string" ? error : "A property of this map has an error" : void 0;
+    const t8 = error && !partOfArray ? typeof error === "string" ? error : "A property of this map has an error" : void 0;
     let t9;
     if ($[31] !== disabled || $[32] !== includeDescription || $[33] !== property || $[34] !== t7 || $[35] !== t8) {
       t9 = /* @__PURE__ */ jsxRuntime.jsx(FieldHelperText, { includeDescription, showError: t7, error: t8, disabled, property });
@@ -17395,6 +17772,7 @@
           minimalistView: false,
           autoFocus: internalId === lastAddedId
         };
+        console.debug("Building entry for", index, fieldProps);
         return /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(PropertyFieldBinding, { ...fieldProps, index }) });
       };
       $[4] = context;
@@ -17411,7 +17789,7 @@
     }
     const buildEntry = t2;
     const canAddElements = !property.disabled && !isSubmitting && !disabled && (property.canAddElements || property.canAddElements === void 0);
-    const sortable = property.sortable === void 0 ? true : property.sortable;
+    const sortable2 = property.sortable === void 0 ? true : property.sortable;
     const t3 = property.name ? "Add entry to " + property.name : "Add entry";
     const t4 = isSubmitting || Boolean(property.disabled);
     let t5;
@@ -17433,12 +17811,12 @@
     }
     const t7 = property.widthPercentage !== void 0 ? "mt-8" : void 0;
     let t8;
-    if ($[18] !== buildEntry || $[19] !== canAddElements || $[20] !== propertyKey || $[21] !== sortable || $[22] !== t3 || $[23] !== t4 || $[24] !== t5 || $[25] !== t6 || $[26] !== t7 || $[27] !== value) {
-      t8 = /* @__PURE__ */ jsxRuntime.jsx(ArrayContainer, { droppableId: propertyKey, addLabel: t3, value, buildEntry, onInternalIdAdded: setLastAddedId, disabled: t4, canAddElements, sortable, newDefaultEntry: t5, onValueChange: t6, className: t7 });
+    if ($[18] !== buildEntry || $[19] !== canAddElements || $[20] !== propertyKey || $[21] !== sortable2 || $[22] !== t3 || $[23] !== t4 || $[24] !== t5 || $[25] !== t6 || $[26] !== t7 || $[27] !== value) {
+      t8 = /* @__PURE__ */ jsxRuntime.jsx(ArrayContainer, { droppableId: propertyKey, addLabel: t3, value, buildEntry, onInternalIdAdded: setLastAddedId, disabled: t4, canAddElements, sortable: sortable2, newDefaultEntry: t5, onValueChange: t6, className: t7 });
       $[18] = buildEntry;
       $[19] = canAddElements;
       $[20] = propertyKey;
-      $[21] = sortable;
+      $[21] = sortable2;
       $[22] = t3;
       $[23] = t4;
       $[24] = t5;
@@ -18031,7 +18409,7 @@
     return t0;
   }
   function PopupFormFieldLoading(t0) {
-    const $ = reactCompilerRuntime.c(23);
+    const $ = reactCompilerRuntime.c(21);
     const {
       tableKey,
       entityId,
@@ -18048,6 +18426,7 @@
     const dataSource = useDataSource();
     const [entity, setEntity] = React.useState(void 0);
     let t1;
+    let t2;
     if ($[0] !== dataSource || $[1] !== entityId || $[2] !== inputCollection || $[3] !== path) {
       t1 = () => {
         if (entityId && inputCollection) {
@@ -18058,29 +18437,23 @@
           }).then(setEntity);
         }
       };
+      t2 = [entityId, inputCollection, dataSource, path];
       $[0] = dataSource;
       $[1] = entityId;
       $[2] = inputCollection;
       $[3] = path;
       $[4] = t1;
+      $[5] = t2;
     } else {
       t1 = $[4];
-    }
-    let t2;
-    if ($[5] !== entityId || $[6] !== inputCollection) {
-      t2 = [entityId, inputCollection];
-      $[5] = entityId;
-      $[6] = inputCollection;
-      $[7] = t2;
-    } else {
-      t2 = $[7];
+      t2 = $[5];
     }
     React.useEffect(t1, t2);
     if (!entity) {
       return null;
     }
     let t3;
-    if ($[8] !== cellRect || $[9] !== container || $[10] !== customFieldValidator || $[11] !== entityId || $[12] !== inputCollection || $[13] !== onCellValueChange || $[14] !== onClose || $[15] !== open || $[16] !== path || $[17] !== propertyKey || $[18] !== tableKey) {
+    if ($[6] !== cellRect || $[7] !== container || $[8] !== customFieldValidator || $[9] !== entityId || $[10] !== inputCollection || $[11] !== onCellValueChange || $[12] !== onClose || $[13] !== open || $[14] !== path || $[15] !== propertyKey || $[16] !== tableKey) {
       t3 = {
         tableKey,
         entityId,
@@ -18094,29 +18467,29 @@
         onCellValueChange,
         container
       };
-      $[8] = cellRect;
-      $[9] = container;
-      $[10] = customFieldValidator;
-      $[11] = entityId;
-      $[12] = inputCollection;
-      $[13] = onCellValueChange;
-      $[14] = onClose;
-      $[15] = open;
-      $[16] = path;
-      $[17] = propertyKey;
-      $[18] = tableKey;
-      $[19] = t3;
+      $[6] = cellRect;
+      $[7] = container;
+      $[8] = customFieldValidator;
+      $[9] = entityId;
+      $[10] = inputCollection;
+      $[11] = onCellValueChange;
+      $[12] = onClose;
+      $[13] = open;
+      $[14] = path;
+      $[15] = propertyKey;
+      $[16] = tableKey;
+      $[17] = t3;
     } else {
-      t3 = $[19];
+      t3 = $[17];
     }
     let t4;
-    if ($[20] !== entity || $[21] !== t3) {
+    if ($[18] !== entity || $[19] !== t3) {
       t4 = /* @__PURE__ */ jsxRuntime.jsx(PopupFormFieldInternal, { ...t3, entity });
-      $[20] = entity;
-      $[21] = t3;
-      $[22] = t4;
+      $[18] = entity;
+      $[19] = t3;
+      $[20] = t4;
     } else {
-      t4 = $[22];
+      t4 = $[20];
     }
     return t4;
   }
@@ -18158,23 +18531,26 @@
         y: cellRect.top < windowSize.height - cellRect.bottom ? cellRect.y + cellRect.height / 2 : cellRect.y - cellRect.height / 2
       };
     }, [cellRect, windowSize.height, windowSize.width]);
-    const normalizePosition = React.useCallback(({
-      x,
-      y
-    }) => {
-      const draggableBoundingRect = draggableRef.current?.getBoundingClientRect();
-      if (!draggableBoundingRect) throw Error("normalizePosition called before draggableBoundingRect is set");
+    const normalizePosition = React.useCallback((pos, draggableBoundingRect, currentWindowSize) => {
+      if (!draggableBoundingRect || draggableBoundingRect.width === 0 || draggableBoundingRect.height === 0) {
+        return pos;
+      }
       return {
-        x: Math.max(0, Math.min(x, windowSize.width - draggableBoundingRect.width)),
-        y: Math.max(0, Math.min(y, windowSize.height - draggableBoundingRect.height))
+        x: Math.max(0, Math.min(pos.x, currentWindowSize.width - draggableBoundingRect.width)),
+        y: Math.max(0, Math.min(pos.y, currentWindowSize.height - draggableBoundingRect.height))
       };
-    }, [windowSize]);
-    const updatePopupLocation = React.useCallback((position) => {
+    }, []);
+    const updatePopupLocation = React.useCallback((newPositionCandidate) => {
       const draggableBoundingRect_0 = draggableRef.current?.getBoundingClientRect();
-      if (!cellRect || !draggableBoundingRect_0) return;
-      const newPosition = position ?? normalizePosition(getInitialLocation());
-      if (!popupLocation || newPosition.x !== popupLocation.x || newPosition.y !== popupLocation.y) setPopupLocation(newPosition);
-    }, [cellRect, getInitialLocation, normalizePosition, popupLocation]);
+      if (!cellRect || !draggableBoundingRect_0 || draggableBoundingRect_0.width === 0 || draggableBoundingRect_0.height === 0) {
+        return;
+      }
+      const basePosition = newPositionCandidate ?? getInitialLocation();
+      const newNormalizedPosition = normalizePosition(basePosition, draggableBoundingRect_0, windowSize);
+      if (!popupLocation || newNormalizedPosition.x !== popupLocation.x || newNormalizedPosition.y !== popupLocation.y) {
+        setPopupLocation(newNormalizedPosition);
+      }
+    }, [cellRect, getInitialLocation, normalizePosition, popupLocation, windowSize]);
     useDraggable({
       containerRef: draggableRef,
       innerRef,
@@ -18185,15 +18561,22 @@
     React.useEffect(() => {
       initialPositionSet.current = false;
     }, [propertyKey, entity]);
-    React.useLayoutEffect(() => {
-      const draggableBoundingRect_1 = draggableRef.current?.getBoundingClientRect();
-      if (!cellRect || !draggableBoundingRect_1 || initialPositionSet.current) return;
-      updatePopupLocation();
-      initialPositionSet.current = true;
-    }, [cellRect, updatePopupLocation, initialPositionSet.current]);
+    React.useLayoutEffect(
+      () => {
+        if (!cellRect || initialPositionSet.current) return;
+        const draggableBoundingRect_1 = draggableRef.current?.getBoundingClientRect();
+        if (!draggableBoundingRect_1 || draggableBoundingRect_1.width === 0 || draggableBoundingRect_1.height === 0) {
+          return;
+        }
+        updatePopupLocation();
+        initialPositionSet.current = true;
+      },
+      [cellRect, updatePopupLocation]
+      // Removed initialPositionSet.current from deps as it's a ref
+    );
     React.useLayoutEffect(() => {
       updatePopupLocation(popupLocation);
-    }, [windowSize, cellRect]);
+    }, [windowSize, cellRect, updatePopupLocation, popupLocation]);
     const validationSchema = React.useMemo(() => {
       if (!collection || !entityId) return;
       return getYupEntitySchema(entityId, propertyKey && collection.properties[propertyKey] ? {
@@ -18203,6 +18586,18 @@
     const adaptResize = React.useCallback(() => {
       return updatePopupLocation(popupLocation);
     }, [popupLocation, updatePopupLocation]);
+    React.useEffect(() => {
+      const element = draggableRef.current;
+      if (!element) return;
+      const observer = new ResizeObserver(() => {
+        adaptResize();
+      });
+      observer.observe(element);
+      return () => {
+        observer.unobserve(element);
+        observer.disconnect();
+      };
+    }, [adaptResize, draggableRef]);
     const saveValue = async (values) => {
       setSavingError(null);
       if (inputCollection && entity && onCellValueChange && propertyKey) {
@@ -18262,7 +18657,7 @@
       underlyingValueHasChanged: false,
       context: formContext,
       partOfArray: false,
-      minimalistView: false,
+      minimalistView: true,
       autoFocus: open
     } : void 0;
     let internalForm = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[700px] max-w-full max-h-[85vh]", children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, noValidate: true, children: [
@@ -18283,21 +18678,18 @@
       internalForm,
       savingError && /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { color: "error", children: savingError.message })
     ] });
-    const draggable = /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+    const draggable = /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
       boxShadow: "0 0 0 2px rgba(128,128,128,0.2)"
-    }, className: `inline-block fixed z-20 shadow-outline rounded-md bg-white dark:bg-surface-950 ${!open ? "invisible" : "visible"} cursor-grab overflow-visible`, ref: draggableRef, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ElementResizeListener, { onResize: adaptResize }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-hidden", children: [
-        form,
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-3.5 -right-3.5 bg-surface-500 rounded-full", style: {
-          width: "32px",
-          height: "32px"
-        }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: (event) => {
-          event.stopPropagation();
-          onClose();
-        }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.CloseIcon, { className: "text-white", size: "small" }) }) })
-      ] })
-    ] }, `draggable_${propertyKey}_${entityId}_${open}`);
+    }, className: `inline-block fixed z-20 shadow-outline rounded-md bg-white dark:bg-surface-950 ${!open ? "invisible" : "visible"} cursor-grab overflow-visible`, ref: draggableRef, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-hidden", children: [
+      form,
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-3.5 -right-3.5 bg-surface-500 rounded-full", style: {
+        width: "32px",
+        height: "32px"
+      }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: (event) => {
+        event.stopPropagation();
+        onClose();
+      }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.CloseIcon, { className: "text-white", size: "small" }) }) })
+    ] }) }, `draggable_${propertyKey}_${entityId}_${open}`);
     return /* @__PURE__ */ jsxRuntime.jsx(Portal__namespace.Root, { asChild: true, container, children: /* @__PURE__ */ jsxRuntime.jsx(formex.Formex, { value: formex$1, children: draggable }) });
   }
   function ClearFilterSortButton(t0) {
@@ -18314,7 +18706,7 @@
     if ((filterIsSet || sortIsSet) && (tableController.clearFilter || tableController.setSortBy)) {
       let label;
       if (filterIsSet && sortIsSet) {
-        label = "Clear filter and sort";
+        label = "Clear filter/sort";
       } else {
         if (filterIsSet) {
           label = "Clear filter";
@@ -18692,7 +19084,7 @@
           dependencies: [],
           Builder: ({
             entity: entity_3
-          }) => /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { color: "primary", variant: "outlined", startIcon: /* @__PURE__ */ jsxRuntime.jsx(ui.KeyboardTabIcon, { size: "small" }), onClick: (event) => {
+          }) => /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { color: "primary", variant: "outlined", className: "max-w-full truncate justify-start", startIcon: /* @__PURE__ */ jsxRuntime.jsx(ui.KeyboardTabIcon, { size: "small" }), onClick: (event) => {
             event.stopPropagation();
             navigateToEntity({
               openEntityMode,
@@ -18803,7 +19195,7 @@
       deleteEntityClicked && /* @__PURE__ */ jsxRuntime.jsx(DeleteEntityDialog, { entityOrEntitiesToDelete: deleteEntityClicked, path: fullPath, collection, callbacks: collection.callbacks, open: Boolean(deleteEntityClicked), onEntityDelete: internalOnEntityDelete, onMultipleEntitiesDelete: internalOnMultipleEntitiesDelete, onClose: () => setDeleteEntityClicked(void 0) })
     ] });
   }, (a, b) => {
-    return equal(a.path, b.path) && equal(a.parentCollectionIds, b.parentCollectionIds) && equal(a.isSubCollection, b.isSubCollection) && equal(a.className, b.className) && equal(a.properties, b.properties) && equal(a.propertiesOrder, b.propertiesOrder) && equal(a.hideIdFromCollection, b.hideIdFromCollection) && equal(a.inlineEditing, b.inlineEditing) && equal(a.selectionEnabled, b.selectionEnabled) && equal(a.selectionController, b.selectionController) && equal(a.Actions, b.Actions) && equal(a.defaultSize, b.defaultSize) && equal(a.initialFilter, b.initialFilter) && equal(a.initialSort, b.initialSort) && equal(a.textSearchEnabled, b.textSearchEnabled) && equal(a.additionalFields, b.additionalFields) && equal(a.sideDialogWidth, b.sideDialogWidth) && equal(a.openEntityMode, b.openEntityMode) && equal(a.forceFilter, b.forceFilter);
+    return equal(a.path, b.path) && equal(a.parentCollectionIds, b.parentCollectionIds) && equal(a.isSubCollection, b.isSubCollection) && equal(a.className, b.className) && equal(a.properties, b.properties) && equal(a.propertiesOrder, b.propertiesOrder) && equal(a.hideIdFromCollection, b.hideIdFromCollection) && equal(a.inlineEditing, b.inlineEditing) && equal(a.selectionEnabled, b.selectionEnabled) && equal(a.selectionController, b.selectionController) && equal(a.Actions, b.Actions) && equal(a.defaultSize, b.defaultSize) && equal(a.initialFilter, b.initialFilter) && equal(a.initialSort, b.initialSort) && equal(a.includeJsonView, b.includeJsonView) && equal(a.textSearchEnabled, b.textSearchEnabled) && equal(a.additionalFields, b.additionalFields) && equal(a.sideDialogWidth, b.sideDialogWidth) && equal(a.openEntityMode, b.openEntityMode) && equal(a.exportable, b.exportable) && equal(a.history, b.history) && equal(a.forceFilter, b.forceFilter);
   });
   function EntitiesCount({
     fullPath,
@@ -19122,7 +19514,7 @@
     }
     let t5;
     if ($[8] !== loading || $[9] !== onAccept) {
-      t5 = /* @__PURE__ */ jsxRuntime.jsx(ui.LoadingButton, { color: "primary", type: "submit", loading, onClick: onAccept, children: "Ok" });
+      t5 = /* @__PURE__ */ jsxRuntime.jsx(ui.LoadingButton, { color: "primary", type: "submit", loading, onClick: onAccept, autoFocus: true, children: "Ok" });
       $[8] = loading;
       $[9] = onAccept;
       $[10] = t5;
@@ -19534,227 +19926,182 @@
     ...a,
     ...b
   }), {}) : {};
-  function ArrayContainer({
-    droppableId,
-    addLabel,
-    value,
-    disabled = false,
+  function SortableItem({
+    id,
+    index,
+    size,
+    disabled,
     buildEntry,
-    size = "medium",
-    onInternalIdAdded,
-    includeAddButton: deprecatedIncludeAddButton,
-    canAddElements: canAddElementsProp = true,
-    sortable = true,
-    newDefaultEntry,
-    onValueChange,
-    className,
-    min = 0,
-    max = Infinity
+    remove,
+    copy,
+    addInIndex,
+    canAddElements,
+    sortable: sortable$1,
+    storedProps,
+    updateItemCustomProps
   }) {
-    const canAddElements = (canAddElementsProp || canAddElementsProp === void 0) && (deprecatedIncludeAddButton === void 0 || deprecatedIncludeAddButton);
-    const hasValue = value && Array.isArray(value) && value.length > 0;
-    const internalIdsRef = React.useRef(buildIdsMap(value));
-    const [internalIds, setInternalIds] = React.useState(hasValue ? Object.values(internalIdsRef.current) : []);
-    const itemCustomPropsRef = React.useRef({});
-    const updateItemCustomProps = React.useCallback((internalId, customProps) => {
-      itemCustomPropsRef.current[internalId] = customProps;
-    }, []);
-    React.useEffect(() => {
-      if (hasValue && value && value.length !== internalIds.length) {
-        const newInternalIds = value.map((v, index) => {
-          const hashValue = getHashValue(v) + index;
-          if (hashValue in internalIdsRef.current) {
-            return internalIdsRef.current[hashValue];
-          } else {
-            const newInternalId = getRandomId();
-            internalIdsRef.current[hashValue] = newInternalId;
-            return newInternalId;
-          }
-        });
-        setInternalIds(newInternalIds);
-      }
-    }, [hasValue, internalIds.length, value]);
-    const insertInEnd = (e) => {
-      e.preventDefault();
-      if (disabled || (value ?? []).length >= max) return;
-      const id = getRandomId();
-      const newIds = [...internalIds, id];
-      if (onInternalIdAdded) onInternalIdAdded(id);
-      setInternalIds(newIds);
-      onValueChange([...value ?? [], newDefaultEntry]);
-    };
-    const remove = (index_0) => {
-      if ((value ?? []).length <= min) return;
-      const newIds_0 = [...internalIds];
-      newIds_0.splice(index_0, 1);
-      setInternalIds(newIds_0);
-      onValueChange(value.filter((_, i) => i !== index_0));
-    };
-    const copy = (index_1) => {
-      if ((value ?? []).length >= max) return;
-      const id_0 = getRandomId();
-      const copyingItem = value[index_1];
-      const newIds_1 = [...internalIds.slice(0, index_1 + 1), id_0, ...internalIds.slice(index_1 + 1)];
-      if (onInternalIdAdded) onInternalIdAdded(id_0);
-      setInternalIds(newIds_1);
-      onValueChange([...value.slice(0, index_1 + 1), copyingItem, ...value.slice(index_1 + 1)]);
-    };
-    const addInIndex = (index_2) => {
-      if ((value ?? []).length >= max) return;
-      const id_1 = getRandomId();
-      const newIds_2 = [...internalIds.slice(0, index_2), id_1, ...internalIds.slice(index_2)];
-      if (onInternalIdAdded) onInternalIdAdded(id_1);
-      setInternalIds(newIds_2);
-      onValueChange([...value.slice(0, index_2), newDefaultEntry, ...value.slice(index_2)]);
-    };
-    const onDragEnd = (result) => {
-      if (!result.destination) {
-        return;
-      }
-      const sourceIndex = result.source.index;
-      const destinationIndex = result.destination.index;
-      const newIds_3 = [...internalIds];
-      const temp = newIds_3[sourceIndex];
-      newIds_3[sourceIndex] = newIds_3[destinationIndex];
-      newIds_3[destinationIndex] = temp;
-      setInternalIds(newIds_3);
-      onValueChange(arrayMove(value, sourceIndex, destinationIndex));
+    const {
+      attributes,
+      listeners: listeners2,
+      setNodeRef,
+      transform,
+      transition,
+      isDragging
+    } = sortable$1 ? sortable.useSortable({
+      id
+    }) : {
+      attributes: {},
+      listeners: {},
+      setNodeRef: (node) => {
+      },
+      transform: null,
+      transition: void 0,
+      isDragging: false
     };
-    return /* @__PURE__ */ jsxRuntime.jsx(dnd.DragDropContext, { onDragEnd, children: /* @__PURE__ */ jsxRuntime.jsx(dnd.Droppable, { droppableId, renderClone: (provided, snapshot, rubric) => {
-      const index_3 = rubric.source.index;
-      const internalId_0 = internalIds[index_3];
-      return /* @__PURE__ */ jsxRuntime.jsx(ArrayContainerItem, { provided, internalId: internalId_0, index: index_3, size, disabled, buildEntry, remove, copy, isDragging: snapshot.isDragging, storedProps: itemCustomPropsRef.current[internalId_0], updateItemCustomProps, addInIndex, canAddElements, sortable });
-    }, children: (droppableProvided, droppableSnapshot) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("space-y-1", className), ...droppableProvided.droppableProps, ref: droppableProvided.innerRef, children: [
-      hasValue && internalIds.map((internalId_1, index_4) => {
-        return /* @__PURE__ */ jsxRuntime.jsx(dnd.Draggable, { draggableId: `array_field_${internalId_1}`, isDragDisabled: disabled || !sortable, index: index_4, children: (provided_0, snapshot_0) => /* @__PURE__ */ jsxRuntime.jsx(ArrayContainerItem, { provided: provided_0, internalId: internalId_1, index: index_4, size, disabled, buildEntry, remove, copy, isDragging: snapshot_0.isDragging, storedProps: itemCustomPropsRef.current[internalId_1], updateItemCustomProps, addInIndex, canAddElements, sortable }) }, `array_field_${internalId_1}`);
-      }),
-      droppableProvided.placeholder,
-      canAddElements && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-4 justify-center text-left", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", size: size === "small" ? "small" : "medium", color: "primary", disabled: disabled || value?.length >= max, startIcon: /* @__PURE__ */ jsxRuntime.jsx(ui.AddIcon, {}), onClick: insertInEnd, children: addLabel ?? "Add" }) })
-    ] }) }) });
+    const style = transform ? {
+      transform: utilities.CSS.Transform.toString(transform),
+      transition
+    } : {};
+    const dragHandleProps = sortable$1 ? {
+      ...listeners2,
+      ...attributes
+    } : {};
+    return /* @__PURE__ */ jsxRuntime.jsx(ArrayContainerItem, { nodeRef: setNodeRef, style, dragHandleProps, internalId: id, index, size, disabled, buildEntry, remove, copy, addInIndex, canAddElements, sortable: sortable$1, isDragging, storedProps, updateItemCustomProps });
   }
   function ArrayContainerItem(t0) {
     const $ = reactCompilerRuntime.c(30);
     const {
-      provided,
+      nodeRef,
+      style,
+      dragHandleProps,
       index,
       internalId,
       size,
       disabled,
       buildEntry,
       remove,
+      copy,
       addInIndex,
       canAddElements,
-      sortable,
-      copy,
+      sortable: sortable2,
       isDragging,
       storedProps,
       updateItemCustomProps
     } = t0;
-    const t1 = provided.innerRef;
-    const t2 = provided.draggableProps;
-    const t3 = provided.draggableProps.style;
-    const t4 = `relative ${!isDragging ? "hover:bg-surface-accent-50 dark:hover:bg-surface-800 dark:hover:bg-opacity-20" : ""} rounded-md opacity-100`;
-    let t5;
+    const t1 = `relative ${!isDragging ? "hover\\:bg-surface-accent-50 dark\\:hover\\:bg-surface-800 dark\\:hover\\:bg-opacity-20" : ""} rounded-md opacity-100`;
+    let t2;
     if ($[0] !== internalId || $[1] !== updateItemCustomProps) {
-      t5 = (props) => updateItemCustomProps(internalId, props);
+      t2 = (props) => updateItemCustomProps(internalId, props);
       $[0] = internalId;
       $[1] = updateItemCustomProps;
-      $[2] = t5;
+      $[2] = t2;
     } else {
-      t5 = $[2];
+      t2 = $[2];
     }
-    let t6;
-    if ($[3] !== buildEntry || $[4] !== index || $[5] !== internalId || $[6] !== isDragging || $[7] !== storedProps || $[8] !== t5) {
-      t6 = buildEntry({
+    let t3;
+    if ($[3] !== buildEntry || $[4] !== index || $[5] !== internalId || $[6] !== isDragging || $[7] !== storedProps || $[8] !== t2) {
+      t3 = buildEntry({
         index,
         internalId,
         isDragging,
         storedProps,
-        storeProps: t5
+        storeProps: t2
       });
       $[3] = buildEntry;
       $[4] = index;
       $[5] = internalId;
       $[6] = isDragging;
       $[7] = storedProps;
-      $[8] = t5;
-      $[9] = t6;
+      $[8] = t2;
+      $[9] = t3;
     } else {
-      t6 = $[9];
+      t3 = $[9];
     }
-    let t7;
-    if ($[10] !== t6) {
-      t7 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow w-[calc(100%-48px)] text-text-primary dark:text-text-primary-dark", children: t6 });
-      $[10] = t6;
-      $[11] = t7;
+    let t4;
+    if ($[10] !== t3) {
+      t4 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow w-[calc(100%-48px)] text-text-primary dark:text-text-primary-dark", children: t3 });
+      $[10] = t3;
+      $[11] = t4;
     } else {
-      t7 = $[11];
+      t4 = $[11];
     }
-    const t8 = size === "small" ? "row" : "column";
-    let t9;
-    if ($[12] !== addInIndex || $[13] !== canAddElements || $[14] !== copy || $[15] !== disabled || $[16] !== index || $[17] !== provided || $[18] !== remove || $[19] !== sortable || $[20] !== t8) {
-      t9 = /* @__PURE__ */ jsxRuntime.jsx(ArrayItemOptions, { direction: t8, disabled, remove, index, provided, addInIndex, canAddElements, sortable, copy });
+    const t5 = size === "small" ? "row" : "column";
+    let t6;
+    if ($[12] !== addInIndex || $[13] !== canAddElements || $[14] !== copy || $[15] !== disabled || $[16] !== dragHandleProps || $[17] !== index || $[18] !== remove || $[19] !== sortable2 || $[20] !== t5) {
+      t6 = /* @__PURE__ */ jsxRuntime.jsx(ArrayItemOptions, { dragHandleProps, direction: t5, disabled, remove, index, copy, canAddElements, sortable: sortable2, addInIndex });
       $[12] = addInIndex;
       $[13] = canAddElements;
       $[14] = copy;
       $[15] = disabled;
-      $[16] = index;
-      $[17] = provided;
+      $[16] = dragHandleProps;
+      $[17] = index;
       $[18] = remove;
-      $[19] = sortable;
-      $[20] = t8;
-      $[21] = t9;
+      $[19] = sortable2;
+      $[20] = t5;
+      $[21] = t6;
     } else {
-      t9 = $[21];
+      t6 = $[21];
     }
-    let t10;
-    if ($[22] !== t7 || $[23] !== t9) {
-      t10 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start", children: [
-        t7,
-        t9
+    let t7;
+    if ($[22] !== t4 || $[23] !== t6) {
+      t7 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start", children: [
+        t4,
+        t6
       ] });
-      $[22] = t7;
-      $[23] = t9;
-      $[24] = t10;
+      $[22] = t4;
+      $[23] = t6;
+      $[24] = t7;
     } else {
-      t10 = $[24];
+      t7 = $[24];
     }
-    let t11;
-    if ($[25] !== provided.draggableProps || $[26] !== provided.innerRef || $[27] !== t10 || $[28] !== t4) {
-      t11 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: t1, ...t2, style: t3, className: t4, children: t10 });
-      $[25] = provided.draggableProps;
-      $[26] = provided.innerRef;
-      $[27] = t10;
-      $[28] = t4;
-      $[29] = t11;
+    let t8;
+    if ($[25] !== nodeRef || $[26] !== style || $[27] !== t1 || $[28] !== t7) {
+      t8 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: nodeRef, style, className: t1, children: t7 });
+      $[25] = nodeRef;
+      $[26] = style;
+      $[27] = t1;
+      $[28] = t7;
+      $[29] = t8;
     } else {
-      t11 = $[29];
+      t8 = $[29];
     }
-    return t11;
+    return t8;
   }
   function ArrayItemOptions({
+    dragHandleProps,
     direction,
     disabled,
     remove,
     index,
-    provided,
     copy,
     canAddElements,
-    sortable,
+    sortable: sortable2,
     addInIndex
   }) {
     const [menuOpen, setMenuOpen] = React.useState(false);
     const iconRef = React.useRef(null);
-    ui.useOutsideAlerter(iconRef, () => setMenuOpen(false));
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `pl-2 pt-1 pb-1 flex ${direction === "row" ? "flex-row-reverse" : "flex-col"} items-center`, ref: iconRef, ...provided.dragHandleProps, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Tooltip, { delayDuration: 400, open: menuOpen ? false : void 0, side: direction === "column" ? "left" : void 0, title: !disabled && sortable ? "Drag to move. Click for more options" : void 0, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", disabled: disabled || !canAddElements, onClick: (e) => {
+    ui.useOutsideAlerter(iconRef, () => {
+      if (menuOpen) setMenuOpen(false);
+    });
+    const showMenu = canAddElements ?? false;
+    const handleIconButtonClick = (e) => {
+      if (showMenu) {
+        e.stopPropagation();
         e.preventDefault();
-        setMenuOpen(true);
-      }, onDragStart: (e_0) => {
-        setMenuOpen(false);
-      }, className: disabled || !sortable ? "cursor-inherit" : "cursor-grab", children: /* @__PURE__ */ jsxRuntime.jsx(ui.HandleIcon, {}) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(ui.Menu, { portalContainer: iconRef.current, open: menuOpen, trigger: /* @__PURE__ */ jsxRuntime.jsx("div", { tabIndex: -1 }), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.MenuItem, { dense: true, onClick: (e_1) => {
+        setMenuOpen((o) => !o);
+      } else if (sortable2) ;
+      else {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    };
+    const title = !disabled && sortable2 && showMenu ? "Drag to move. Click for options" : !disabled && showMenu ? "Click for options" : !disabled && sortable2 ? "Drag to move" : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: iconRef, className: `pl-2 pt-1 pb-1 flex ${direction === "row" ? "flex-row-reverse" : "flex-col"} items-center`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { delayDuration: 400, open: menuOpen ? false : void 0, side: direction === "column" ? "left" : void 0, title, children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", disabled: disabled || !showMenu && !sortable2, ...sortable2 ? dragHandleProps : {}, onClick: handleIconButtonClick, onFocus: () => {
+        if (sortable2 && menuOpen) setMenuOpen(false);
+      }, className: ui.cls(disabled || !sortable2 && !showMenu ? "cursor-inherit" : "", sortable2 && !disabled ? "cursor-grab" : "", !sortable2 && showMenu && !disabled ? "cursor-pointer" : ""), children: /* @__PURE__ */ jsxRuntime.jsx(ui.HandleIcon, {}) }) }),
+      showMenu && /* @__PURE__ */ jsxRuntime.jsxs(ui.Menu, { portalContainer: iconRef.current, open: menuOpen, trigger: /* @__PURE__ */ jsxRuntime.jsx("div", { tabIndex: -1 }), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.MenuItem, { dense: true, onClick: (e_0) => {
           setMenuOpen(false);
           remove(index);
         }, children: [
@@ -19783,7 +20130,110 @@
           "Add below"
         ] })
       ] })
-    ] }) });
+    ] });
+  }
+  function ArrayContainer({
+    droppableId,
+    addLabel,
+    value,
+    disabled = false,
+    buildEntry,
+    size = "medium",
+    onInternalIdAdded,
+    includeAddButton: deprecatedIncludeAddButton,
+    canAddElements: canAddElementsProp = true,
+    sortable: sortable$1 = true,
+    newDefaultEntry,
+    onValueChange,
+    className,
+    min = 0,
+    max = Infinity
+  }) {
+    const canAddElements = (canAddElementsProp === void 0 ? true : canAddElementsProp) && // Default canAddElementsProp to true if undefined
+    (deprecatedIncludeAddButton === void 0 || deprecatedIncludeAddButton);
+    const hasValue = value && Array.isArray(value) && value.length > 0;
+    const internalIdsRef = React.useRef(buildIdsMap(value));
+    const [internalIds, setInternalIds] = React.useState(hasValue ? Object.values(internalIdsRef.current) : []);
+    const itemCustomPropsRef = React.useRef({});
+    const updateItemCustomProps = React.useCallback((internalId, customProps) => {
+      itemCustomPropsRef.current[internalId] = customProps;
+    }, []);
+    const pointerSensor = core.useSensor(core.PointerSensor, {
+      activationConstraint: {
+        distance: 5
+      }
+    });
+    const keyboardSensor = core.useSensor(core.KeyboardSensor, {});
+    const sensors = core.useSensors(pointerSensor, keyboardSensor);
+    React.useEffect(() => {
+      if (hasValue && value && value.length !== internalIds.length) {
+        const newInternalIds = value.map((v, index) => {
+          const hashValue = getHashValue(v) + index;
+          if (hashValue in internalIdsRef.current) {
+            return internalIdsRef.current[hashValue];
+          } else {
+            const newInternalId = getRandomId();
+            internalIdsRef.current[hashValue] = newInternalId;
+            return newInternalId;
+          }
+        });
+        setInternalIds(newInternalIds);
+      }
+    }, [hasValue, internalIds.length, value]);
+    const insertInEnd = (e) => {
+      e.preventDefault();
+      if (disabled || (value ?? []).length >= max) return;
+      const id = getRandomId();
+      const newIds = [...internalIds, id];
+      if (onInternalIdAdded) onInternalIdAdded(id);
+      setInternalIds(newIds);
+      onValueChange([...value ?? [], newDefaultEntry]);
+    };
+    const remove = (index_0) => {
+      if ((value ?? []).length <= min) return;
+      const newIds_0 = [...internalIds];
+      newIds_0.splice(index_0, 1);
+      setInternalIds(newIds_0);
+      onValueChange(value.filter((_, i) => i !== index_0));
+    };
+    const copy = (index_1) => {
+      if ((value ?? []).length >= max) return;
+      const id_0 = getRandomId();
+      const copyingItem = value[index_1];
+      const newIds_1 = [...internalIds.slice(0, index_1 + 1), id_0, ...internalIds.slice(index_1 + 1)];
+      if (onInternalIdAdded) onInternalIdAdded(id_0);
+      setInternalIds(newIds_1);
+      onValueChange([...value.slice(0, index_1 + 1), copyingItem, ...value.slice(index_1 + 1)]);
+    };
+    const addInIndex = (index_2) => {
+      if ((value ?? []).length >= max) return;
+      const id_1 = getRandomId();
+      const newIds_2 = [...internalIds.slice(0, index_2), id_1, ...internalIds.slice(index_2)];
+      if (onInternalIdAdded) onInternalIdAdded(id_1);
+      setInternalIds(newIds_2);
+      onValueChange([...value.slice(0, index_2), newDefaultEntry, ...value.slice(index_2)]);
+    };
+    const onDragEnd = (event) => {
+      const {
+        active,
+        over
+      } = event;
+      if (!over || active.id === over.id) return;
+      const oldIndex = internalIds.indexOf(active.id);
+      const newIndex = internalIds.indexOf(over.id);
+      if (oldIndex === -1 || newIndex === -1) return;
+      const newIds_3 = arrayMove(internalIds, oldIndex, newIndex);
+      setInternalIds(newIds_3);
+      onValueChange(arrayMove(value, oldIndex, newIndex));
+    };
+    return sortable$1 ? /* @__PURE__ */ jsxRuntime.jsx(core.DndContext, { sensors, modifiers: [modifiers.restrictToVerticalAxis], collisionDetection: core.closestCenter, onDragEnd, children: /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: internalIds, strategy: sortable.verticalListSortingStrategy, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("space-y-1", className), id: droppableId, children: [
+      hasValue && internalIds.map((internalId_0, index_3) => /* @__PURE__ */ jsxRuntime.jsx(SortableItem, { id: internalId_0, index: index_3, size, disabled, buildEntry, remove, copy, addInIndex, canAddElements, sortable: sortable$1, storedProps: itemCustomPropsRef.current[internalId_0], updateItemCustomProps }, `array_field_${internalId_0}`)),
+      canAddElements && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-4 justify-center text-left", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", size: size === "small" ? "small" : "medium", color: "primary", disabled: disabled || (value?.length ?? 0) >= max, startIcon: /* @__PURE__ */ jsxRuntime.jsx(ui.AddIcon, {}), onClick: insertInEnd, className: "ml-3.5", children: addLabel ?? "Add" }) })
+    ] }) }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("space-y-1", className), id: droppableId, children: [
+      hasValue && internalIds.map((internalId_1, index_4) => /* @__PURE__ */ jsxRuntime.jsx(ArrayContainerItem, { nodeRef: (node) => {
+      }, style: {}, dragHandleProps: {}, internalId: internalId_1, index: index_4, size, disabled, buildEntry, remove, copy, addInIndex, canAddElements, sortable: false, isDragging: false, storedProps: itemCustomPropsRef.current[internalId_1], updateItemCustomProps }, `array_field_${internalId_1}`)),
+      canAddElements && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-4 justify-center text-left", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", size: size === "small" ? "small" : "medium", color: "primary", disabled: disabled || (value?.length ?? 0) >= max, startIcon: /* @__PURE__ */ jsxRuntime.jsx(ui.AddIcon, {}), onClick: insertInEnd, children: addLabel ?? "Add" }) })
+    ] });
   }
   function arrayMove(value, sourceIndex, destinationIndex) {
     const result = Array.from(value);
@@ -20126,9 +20576,9 @@
       views: viewsProp,
       adminViews: adminViewsProp,
       viewsOrder,
+      plugins,
       userConfigPersistence,
       dataSourceDelegate,
-      injectCollections,
       disabled
     } = props;
     const navigate = reactRouterDom.useNavigate();
@@ -20218,7 +20668,7 @@
       if (disabled || authController.initialLoading) return;
       console.debug("Refreshing navigation");
       try {
-        const [resolvedCollections = [], resolvedViews, resolvedAdminViews = []] = await Promise.all([resolveCollections(collectionsProp, collectionPermissions, authController, dataSourceDelegate, injectCollections), resolveCMSViews(viewsProp, authController, dataSourceDelegate), resolveCMSViews(adminViewsProp, authController, dataSourceDelegate)]);
+        const [resolvedCollections = [], resolvedViews, resolvedAdminViews = []] = await Promise.all([resolveCollections(collectionsProp, collectionPermissions, authController, dataSourceDelegate, plugins), resolveCMSViews(viewsProp, authController, dataSourceDelegate), resolveCMSViews(adminViewsProp, authController, dataSourceDelegate)]);
         let shouldUpdateTopLevelNav = false;
         if (!areCollectionListsEqual(collectionsRef.current ?? [], resolvedCollections)) {
           collectionsRef.current = resolvedCollections;
@@ -20247,7 +20697,7 @@
       }
       if (navigationLoading) setNavigationLoading(false);
       if (!initialised) setInitialised(true);
-    }, [collectionsProp, collectionPermissions, authController.user, authController.initialLoading, disabled, viewsProp, adminViewsProp, computeTopNavigation, injectCollections]);
+    }, [collectionsProp, collectionPermissions, authController.user, authController.initialLoading, disabled, viewsProp, adminViewsProp, computeTopNavigation]);
     React.useEffect(() => {
       refreshNavigation();
     }, [refreshNavigation]);
@@ -20370,7 +20820,8 @@
       getParentReferencesFromPath: getAllParentReferencesForPath,
       getParentCollectionIds,
       convertIdsToPaths,
-      navigate
+      navigate,
+      plugins
     };
   }
   function encodePath(input) {
@@ -20389,7 +20840,19 @@
       };
     });
   }
-  async function resolveCollections(collections, collectionPermissions, authController, dataSource, injectCollections) {
+  function applyPluginModifyCollection(resolvedCollections, modifyCollection) {
+    return resolvedCollections.map((collection) => {
+      const modifiedCollection = modifyCollection(collection);
+      if (modifiedCollection.subcollections) {
+        return {
+          ...modifiedCollection,
+          subcollections: applyPluginModifyCollection(modifiedCollection.subcollections, modifyCollection)
+        };
+      }
+      return modifiedCollection;
+    });
+  }
+  async function resolveCollections(collections, collectionPermissions, authController, dataSource, plugins) {
     let resolvedCollections = [];
     if (typeof collections === "function") {
       resolvedCollections = await collections({
@@ -20400,8 +20863,15 @@
     } else if (Array.isArray(collections)) {
       resolvedCollections = collections;
     }
-    if (injectCollections) {
-      resolvedCollections = injectCollections(resolvedCollections ?? []);
+    if (plugins) {
+      for (const plugin of plugins) {
+        if (plugin.collection?.modifyCollection) {
+          resolvedCollections = applyPluginModifyCollection(resolvedCollections, plugin.collection.modifyCollection);
+        }
+        if (plugin.collection?.injectCollections) {
+          resolvedCollections = plugin.collection.injectCollections(resolvedCollections ?? []);
+        }
+      }
     }
     resolvedCollections = applyPermissionsFunctionIfEmpty(resolvedCollections, collectionPermissions);
     resolvedCollections = filterOutNotAllowedCollections(resolvedCollections, authController);
@@ -21322,10 +21792,11 @@
     }, [selectedTabProp]);
     const subcollections = (collection.subcollections ?? []).filter((c) => !c.hideFromNavigation);
     const subcollectionsCount = subcollections?.length ?? 0;
-    const customViews = collection.entityViews;
+    const customViews = collection.entityViews ?? [];
     const customViewsCount = customViews?.length ?? 0;
     const includeJsonView = collection.includeJsonView === void 0 ? true : collection.includeJsonView;
     const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0 || includeJsonView;
+    const plugins = customizationController.plugins;
     const {
       resolvedEntityViews,
       selectedEntityView,
@@ -21342,7 +21813,6 @@
         return null;
       }
       if (!entityId) {
-        console.error("INTERNAL: entityId is not defined");
         return null;
       }
       const formexStub = createFormexStub(usedEntity?.values ?? {});
@@ -21374,7 +21844,7 @@
       };
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls(ui.defaultBorderMixin, "relative flex-1 w-full h-full overflow-auto", {
         "hidden": selectedTab !== customView.key
-      }), role: "tabpanel", children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: usedFormContext && /* @__PURE__ */ jsxRuntime.jsx(Builder, { collection, entity: usedEntity, modifiedValues: usedFormContext?.formex?.values ?? usedEntity?.values, formContext: usedFormContext }) }) }, `custom_view_${customView.key}`);
+      }), role: "tabpanel", children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: usedFormContext && /* @__PURE__ */ jsxRuntime.jsx(Builder, { collection, parentCollectionIds, entity: usedEntity, modifiedValues: usedFormContext?.formex?.values ?? usedEntity?.values, formContext: usedFormContext }) }) }, `custom_view_${customView.key}`);
     }).filter(Boolean);
     const globalLoading = dataLoading && !usedEntity;
     const jsonView = /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls("relative flex-1 h-full overflow-auto w-full", {
@@ -21403,7 +21873,8 @@
     };
     const entityReadOnlyView = !canEdit && entity ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", canEdit || !mainViewVisible || selectedSecondaryForm ? "hidden" : ""), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("relative flex flex-col max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit"), children: [
       /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { className: "mt-16 mb-8 mx-8", variant: "h4", children: collection.singularName ?? collection.name }),
-      /* @__PURE__ */ jsxRuntime.jsx(EntityView, { className: "px-8 h-full overflow-auto", entity, path, collection })
+      /* @__PURE__ */ jsxRuntime.jsx(EntityView, { className: "px-8 h-full overflow-auto", entity, path, collection }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-16" })
     ] }) }) : null;
     const entityView = /* @__PURE__ */ jsxRuntime.jsx(EntityForm, { collection, path, entityId: entityId ?? usedEntity?.id, onValuesModified, entity, initialDirtyValues: cachedDirtyValues, openEntityMode: layout, forceActionsAtTheBottom: actionsAtTheBottom, initialStatus: status, className: ui.cls((!mainViewVisible || !canEdit) && !selectedSecondaryForm ? "hidden" : "", formProps?.className), EntityFormActionsComponent: EntityEditViewFormActions, disabled: !canEdit, ...formProps, onEntityChange: (entity_0) => {
       setUsedEntity(entity_0);
@@ -21423,7 +21894,8 @@
       formProps?.onSaved?.(res);
     }, Builder: selectedSecondaryForm?.Builder });
     const subcollectionTabs = subcollections && subcollections.map((subcollection_0) => /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { className: "text-sm min-w-[120px]", value: subcollection_0.id, children: subcollection_0.name }, `entity_detail_collection_tab_${subcollection_0.name}`));
-    const customViewTabs = resolvedEntityViews.map((view) => /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { className: "text-sm min-w-[120px]", value: view.key, children: view.name }, `entity_detail_collection_tab_${view.name}`));
+    const customViewTabsStart = resolvedEntityViews.filter((view) => view.position === "start").map((view_0) => /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { className: !view_0.tabComponent ? "text-sm min-w-[120px]" : void 0, value: view_0.key, children: view_0.tabComponent ?? view_0.name }, `entity_detail_collection_tab_${view_0.name}`));
+    const customViewTabsEnd = resolvedEntityViews.filter((view_1) => !view_1.position || view_1.position === "end").map((view_2) => /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { className: !view_2.tabComponent ? "text-sm min-w-[120px]" : void 0, value: view_2.key, children: view_2.tabComponent ?? view_2.name }, `entity_detail_collection_tab_${view_2.name}`));
     const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews;
     let result = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col h-full w-full bg-white dark:bg-surface-900", children: [
       shouldShowTopBar && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("h-14 flex overflow-visible overflow-x-scroll w-full no-scrollbar h-14 border-b pl-2 pr-2 pt-1 flex items-end bg-surface-50 dark:bg-surface-900", ui.defaultBorderMixin), children: [
@@ -21433,9 +21905,10 @@
         hasAdditionalViews && /* @__PURE__ */ jsxRuntime.jsxs(ui.Tabs, { value: selectedTab, onValueChange: (value_1) => {
           onSideTabClick(value_1);
         }, children: [
-          includeJsonView && /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { disabled: !hasAdditionalViews, value: JSON_TAB_VALUE, innerClassName: "block", className: "text-sm", children: /* @__PURE__ */ jsxRuntime.jsx(ui.CodeIcon, { size: "small" }) }),
+          includeJsonView && /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { disabled: !hasAdditionalViews, value: JSON_TAB_VALUE, className: "text-sm", children: /* @__PURE__ */ jsxRuntime.jsx(ui.CodeIcon, { size: "small" }) }),
+          customViewTabsStart,
           /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { disabled: !hasAdditionalViews, value: MAIN_TAB_VALUE, className: "text-sm min-w-[120px]", children: collection.singularName ?? collection.name }),
-          customViewTabs,
+          customViewTabsEnd,
           subcollectionTabs
         ] })
       ] }),
@@ -21447,7 +21920,6 @@
       customViewsView,
       subCollectionsViews
     ] });
-    const plugins = customizationController.plugins;
     if (plugins) {
       plugins.forEach((plugin) => {
         if (plugin.form?.provider) {
@@ -21458,6 +21930,12 @@
     return result;
   }
   function EntitySidePanel(props) {
+    const {
+      allowFullScreen = true,
+      path,
+      entityId,
+      formProps
+    } = props;
     const {
       blocked,
       setBlocked,
@@ -21495,19 +21973,9 @@
       }
     };
     const parentCollectionIds = React.useMemo(() => {
-      return navigationController.getParentCollectionIds(props.path);
-    }, [navigationController, props.path]);
-    const collection = React.useMemo(() => {
-      if (props.collection) {
-        return props.collection;
-      }
-      const registryCollection = navigationController.getCollection(props.path);
-      if (registryCollection) {
-        return registryCollection;
-      }
-      console.error("ERROR: No collection found in path `", props.path, "`. Entity id: ", props.entityId);
-      throw Error("ERROR: No collection found in path `" + props.path + "`. Make sure you have defined a collection for this path in the root navigation.");
-    }, [navigationController, props.collection]);
+      return navigationController.getParentCollectionIds(path);
+    }, [navigationController, path]);
+    const collection = props.collection ?? navigationController.getCollection(path);
     React.useEffect(() => {
       function beforeunload(e) {
         if (blocked && collection) {
@@ -21533,24 +22001,24 @@
     }
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(EntityEditView, { ...props, layout: "side_panel", collection, parentCollectionIds, onValuesModified, onSaved: onUpdate, barActions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { className: "self-center", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(ui.CloseIcon, { size: "small" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { className: "self-center", onClick: () => {
-        if (props.entityId) navigate(location.pathname);
+      allowFullScreen && /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { className: "self-center", onClick: () => {
+        if (entityId) navigate(location.pathname);
         else navigate(location.pathname + "#new");
       }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.OpenInFullIcon, { size: "small" }) })
     ] }), onTabChange: ({
-      path,
-      entityId,
+      path: path_0,
+      entityId: entityId_0,
       selectedTab,
       collection: collection_0
     }) => {
       sideEntityController.replace({
-        path,
-        entityId,
+        path: path_0,
+        entityId: entityId_0,
         selectedTab,
         updateUrl: true,
         collection: collection_0
       });
-    }, formProps: props.formProps }) }) });
+    }, formProps }) }) });
   }
   const NEW_URL_HASH = "new_side";
   const SIDE_URL_HASH = "side";
@@ -21559,7 +22027,7 @@
     const {
       selectedSecondaryForm
     } = resolvedSelectedEntityView(props.collection?.entityViews, customizationController, props.selectedTab);
-    const shouldUseSmallLayout = !props.selectedTab || props.selectedTab === JSON_TAB_VALUE || Boolean(selectedSecondaryForm);
+    const shouldUseSmallLayout = !props.selectedTab || props.selectedTab === JSON_TAB_VALUE || props.selectedTab === "__history" || Boolean(selectedSecondaryForm);
     let resolvedWidth;
     if (props.width) {
       resolvedWidth = typeof props.width === "number" ? `${props.width}px` : props.width;
@@ -22283,7 +22751,7 @@
       authController,
       storageSource,
       dataSourceDelegate,
-      plugins,
+      plugins: pluginsProp,
       onAnalyticsEvent,
       propertyConfigs,
       entityViews,
@@ -22291,6 +22759,10 @@
       navigationController,
       apiKey
     } = props;
+    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 sideDialogsController = useBuildSideDialogsController();
     const sideEntityController = useBuildSideEntityController(navigationController, sideDialogsController, authController);
     const pluginsLoading = plugins?.some((p) => p.loading) ?? false;
@@ -23995,6 +24467,8 @@
   exports2.EntityCollectionView = EntityCollectionView;
   exports2.EntityCollectionViewActions = EntityCollectionViewActions;
   exports2.EntityForm = EntityForm;
+  exports2.EntityPreview = EntityPreview;
+  exports2.EntityPreviewContainer = EntityPreviewContainer;
   exports2.EntityReference = EntityReference;
   exports2.EntityView = EntityView;
   exports2.EnumValuesChip = EnumValuesChip;
@@ -24128,6 +24602,7 @@
   exports2.joinCollectionLists = joinCollectionLists;
   exports2.makePropertiesEditable = makePropertiesEditable;
   exports2.makePropertiesNonEditable = makePropertiesNonEditable;
+  exports2.mergeCallbacks = mergeCallbacks;
   exports2.mergeCollection = mergeCollection;
   exports2.mergeDeep = mergeDeep;
   exports2.mergeEntityActions = mergeEntityActions;