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

package/dist/index.es.js

@@ -14,7 +14,10 @@ import * as locales from "date-fns/locale";
 import useMeasure from "react-use-measure";
 import * as yup from "yup";
 import { FixedSizeList } from "react-window";
-import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from "@dnd-kit/core";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { sortableKeyboardCoordinates, SortableContext, horizontalListSortingStrategy, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import { useDropzone } from "react-dropzone";
 import Resizer from "react-image-file-resizer";
 import { FireCMSEditor } from "@firecms/editor";
@@ -68,49 +71,66 @@ function getLastSegment(path) {
   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("/");
@@ -231,31 +251,36 @@ function isObject(item) {
   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;
 }
@@ -3747,6 +3772,108 @@ function replacePlaceholders({
   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";
@@ -4188,7 +4315,7 @@ function useEntityFetch(t0) {
           }
         } else {
           onEntityUpdate(void 0);
-          return _temp3$4;
+          return _temp3$5;
         }
       }
     };
@@ -4229,7 +4356,7 @@ function useEntityFetch(t0) {
   }
   return t5;
 }
-function _temp3$4() {
+function _temp3$5() {
 }
 function _temp2$d() {
 }
@@ -4284,11 +4411,6 @@ async function saveEntityWithCallbacks({
   } else {
     updatedValues = values;
   }
-  console.debug("Saving entity", {
-    entityId,
-    updatedValues,
-    collection
-  });
   return dataSource.saveEntity({
     collection,
     path: resolvedPath,
@@ -4323,7 +4445,6 @@ async function saveEntityWithCallbacks({
     }
     if (onSaveSuccess) onSaveSuccess(entity);
   }).catch((e) => {
-    console.error("!!!", e);
     if (callbacks?.onSaveFailure) {
       const resolvedCollection = resolveCollection({
         collection,
@@ -4639,7 +4760,6 @@ function ErrorView(t0) {
     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__ */ jsx(ErrorIcon, { className: "mx-2", size: "small", color: "error" });
@@ -4805,7 +4925,7 @@ function ImagePreview(t0) {
   }
   let t7;
   if ($[13] !== url) {
-    t7 = navigator && /* @__PURE__ */ jsx(Tooltip, { asChild: true, title: "Copy url to clipboard", side: "bottom", children: /* @__PURE__ */ jsx(IconButton, { variant: "filled", size: "small", onClick: (e) => {
+    t7 = navigator && /* @__PURE__ */ jsx(Tooltip, { asChild: true, title: "Copy url to clipboard", side: "bottom", children: /* @__PURE__ */ jsx(IconButton, { variant: "filled", size: "smallest", onClick: (e) => {
       e.stopPropagation();
       e.preventDefault();
       return navigator.clipboard.writeText(url);
@@ -4824,7 +4944,7 @@ function ImagePreview(t0) {
   }
   let t9;
   if ($[16] !== url) {
-    t9 = /* @__PURE__ */ jsx(Tooltip, { title: "Open image in new tab", side: "bottom", children: /* @__PURE__ */ jsx(IconButton, { className: "invisible group-hover:visible", variant: "filled", component: "a", href: url, rel: "noopener noreferrer", target: "_blank", size: "small", onClick: _temp$q, children: t8 }) });
+    t9 = /* @__PURE__ */ jsx(Tooltip, { title: "Open image in new tab", side: "bottom", children: /* @__PURE__ */ jsx(IconButton, { className: "invisible group-hover:visible", variant: "filled", component: "a", href: url, rel: "noopener noreferrer", target: "_blank", size: "smallest", onClick: _temp$q, children: t8 }) });
     $[16] = url;
     $[17] = t9;
   } else {
@@ -5177,9 +5297,9 @@ function SkeletonPropertyComponent(t0) {
         } 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;
@@ -5583,7 +5703,7 @@ function StringPropertyPreview(t0) {
         let t1;
         if ($[17] !== size || $[18] !== value) {
           const lines = value.split("\n");
-          t1 = value && value.includes("\n") ? /* @__PURE__ */ jsx("div", { className: cls("overflow-x-scroll", size === "small" ? "text-sm" : ""), children: lines.map((str, index) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+          t1 = value && value.includes("\n") ? /* @__PURE__ */ jsx("div", { className: cls("overflow-x-scroll overflow-hidden", size === "small" ? "text-sm" : ""), children: lines.map((str, index) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
             /* @__PURE__ */ jsx("span", { children: str }),
             index !== lines.length - 1 && /* @__PURE__ */ jsx("br", {})
           ] }, `string_preview_${index}`)) }) : size === "small" ? /* @__PURE__ */ jsx("span", { className: "text-sm", children: value }) : /* @__PURE__ */ jsx(Fragment, { children: value });
@@ -5666,11 +5786,13 @@ function EntityPreview({
   disabled,
   hover,
   collection: collectionProp,
-  previewProperties,
+  previewKeys,
   onClick,
   size,
   includeId = true,
+  includeTitle = true,
   includeEntityLink = true,
+  includeImage = true,
   entity
 }) {
   const authController = useAuthController();
@@ -5689,9 +5811,9 @@ function EntityPreview({
     propertyConfigs: customizationController.propertyConfigs,
     authController
   }), [collection]);
-  const listProperties = 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 = 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);
@@ -5702,18 +5824,17 @@ function EntityPreview({
       usedImageProperty && usedImageValue && /* @__PURE__ */ jsx(PropertyPreview, { property: usedImageProperty, propertyKey: imagePropertyKey, size: "small", value: usedImageValue }),
       (!usedImageProperty || !usedImageValue) && /* @__PURE__ */ jsx(IconForView, { collectionOrView: collection, color: "primary", size, className: "m-auto p-1" })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col grow-1 w-full m-1 shrink-1", style: {
-      "maxWidth": "calc(100% - 96px)"
-    }, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col grow w-full m-1 shrink min-w-0", children: [
       size !== "small" && includeId && (entity ? /* @__PURE__ */ jsx("div", { className: "block whitespace-nowrap overflow-hidden truncate", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "disabled", className: "font-mono", children: entity.id }) }) : /* @__PURE__ */ jsx(Skeleton, {})),
       titleProperty && /* @__PURE__ */ jsx("div", { className: "truncate my-0.5 text-sm font-medium", children: entity ? /* @__PURE__ */ jsx(PropertyPreview, { propertyKey: titleProperty, value: getValueInPath(entity.values, titleProperty), property: resolvedCollection.properties[titleProperty], size: "large" }) : /* @__PURE__ */ 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__ */ jsx("div", { className: cls("truncate", restProperties.length > 1 ? "my-0.5" : "my-0"), children: entity ? /* @__PURE__ */ jsx(PropertyPreview, { propertyKey: key, value: getValueInPath(entity.values, key), property: childProperty, size: "small" }) : /* @__PURE__ */ jsx(SkeletonPropertyComponent, { property: childProperty, size: "small" }) }, "ref_prev_" + key);
+        const valueInPath = getValueInPath(entity.values, key);
+        return /* @__PURE__ */ jsx("div", { className: cls("truncate", restProperties.length > 1 ? "my-0.5" : "my-0"), children: entity ? /* @__PURE__ */ jsx(PropertyPreview, { propertyKey: key, value: valueInPath, property: childProperty, size: "small" }) : /* @__PURE__ */ jsx(SkeletonPropertyComponent, { property: childProperty, size: "small" }) }, "ref_prev_" + key);
       })
     ] }),
-    entity && includeEntityLink && /* @__PURE__ */ jsx(Tooltip, { title: `See details for ${entity.id}`, className: "shrink-0", children: /* @__PURE__ */ jsx(IconButton, { color: "inherit", size: "medium", className: size !== "small" ? "self-start" : "", onClick: (e) => {
+    entity && includeEntityLink && /* @__PURE__ */ jsx(Tooltip, { title: `See details for ${entity.id}`, className: "shrink-0", children: /* @__PURE__ */ jsx(IconButton, { color: "inherit", size: "small", className: size !== "small" ? "self-start" : "", onClick: (e) => {
       e.stopPropagation();
       analyticsController.onAnalyticsEvent?.("entity_click_from_reference", {
         path: entity.path,
@@ -5725,7 +5846,7 @@ function EntityPreview({
         collection,
         updateUrl: true
       });
-    }, children: /* @__PURE__ */ jsx(KeyboardTabIcon, { size: "medium" }) }) }),
+    }, children: /* @__PURE__ */ jsx(KeyboardTabIcon, { size: "small" }) }) }),
     actions
   ] });
 }
@@ -6061,7 +6182,7 @@ function ReferencePreviewExisting(t0) {
   }
   let t3;
   if ($[25] !== collection || $[26] !== disabled || $[27] !== hover || $[28] !== includeEntityLink || $[29] !== includeId || $[30] !== onClick || $[31] !== previewProperties || $[32] !== size || $[33] !== usedEntity) {
-    t3 = /* @__PURE__ */ jsx(EntityPreview, { size, previewProperties, disabled, entity: usedEntity, collection, onClick, includeEntityLink, includeId, hover });
+    t3 = /* @__PURE__ */ jsx(EntityPreview, { size, previewKeys: previewProperties, disabled, entity: usedEntity, collection, onClick, includeEntityLink, includeId, hover });
     $[25] = collection;
     $[26] = disabled;
     $[27] = hover;
@@ -6496,7 +6617,7 @@ function _temp$n(t0) {
   return /* @__PURE__ */ jsxs("div", { className: cls(defaultBorderMixin, "last:border-b-0 border-b"), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row pt-0.5 pb-0.5 gap-2", children: [
       /* @__PURE__ */ jsx("div", { className: "min-w-[140px] w-[25%] py-1", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "font-mono break-words", color: "secondary", children: key }) }, `table-cell-title-${key}-${key}`),
-      /* @__PURE__ */ jsx("div", { className: "flex-grow max-w-[75%]", children: childValue && /* @__PURE__ */ jsx(Typography, { children: /* @__PURE__ */ jsx(ErrorBoundary, { children: childValue.toString() }) }) })
+      /* @__PURE__ */ jsx("div", { className: "flex-grow max-w-[75%]", children: childValue && typeof childValue !== "object" && /* @__PURE__ */ jsx(Typography, { children: /* @__PURE__ */ jsx(ErrorBoundary, { children: childValue.toString() }) }) })
     ] }),
     typeof childValue === "object" && /* @__PURE__ */ jsx("div", { className: cls(defaultBorderMixin, "border-l pl-4"), children: /* @__PURE__ */ jsx(KeyValuePreview, { value: childValue }) })
   ] }, `map_preview_table_${key}}`);
@@ -6909,7 +7030,7 @@ function ArrayOfMapsPreview(t0) {
         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;
@@ -7148,7 +7269,6 @@ function VirtualTableInput(props) {
       width: "100%",
       color: "unset",
       fontWeight: "unset",
-      lineHeight: 1.7142857,
       fontSize: "unset",
       fontFamily: "unset",
       background: "unset",
@@ -8735,7 +8855,7 @@ const TableCellInner = (t0) => {
   return t8;
 };
 const EntityTableCell = React__default.memo(function EntityTableCell2(t0) {
-  const $ = c(45);
+  const $ = c(48);
   const {
     children,
     actions,
@@ -8964,11 +9084,11 @@ const EntityTableCell = React__default.memo(function EntityTableCell2(t0) {
   }
   let t25;
   if ($[37] !== actions || $[38] !== onFocus || $[39] !== t16 || $[40] !== t19 || $[41] !== t20 || $[42] !== t23 || $[43] !== t24) {
-    t25 = /* @__PURE__ */ jsxs("div", { className: t16, ref, style: t19, tabIndex: t20, onFocus, onMouseEnter: setOnHoverTrue, onMouseMove: setOnHoverTrue, onMouseLeave: setOnHoverFalse, children: [
+    t25 = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ 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;
@@ -8980,7 +9100,21 @@ const EntityTableCell = React__default.memo(function EntityTableCell2(t0) {
   } else {
     t25 = $[44];
   }
-  return t25;
+  const result = t25;
+  if (showError) {
+    const t26 = error?.message ?? "Error";
+    let t27;
+    if ($[45] !== result || $[46] !== t26) {
+      t27 = /* @__PURE__ */ 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;
 });
@@ -9229,7 +9363,7 @@ const PropertyTableCell = React__default.memo(function PropertyTableCell2({
           }
         } else if (arrayProperty.of.dataType === "reference") {
           if (typeof arrayProperty.of.path === "string") {
-            innerComponent = /* @__PURE__ */ 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__ */ 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;
         }
@@ -9492,7 +9626,7 @@ function CollectionTableToolbar(t0) {
   }
   let t6;
   if ($[6] !== t3 || $[7] !== t4) {
-    t6 = /* @__PURE__ */ jsx(Tooltip, { title: "Table row size", side: "right", sideOffset: 4, children: /* @__PURE__ */ jsx(Select, { value: t3, className: "w-16 h-10", size: "small", onValueChange: t4, renderValue: _temp$j, children: t5 }) });
+    t6 = /* @__PURE__ */ jsx(Tooltip, { title: "Table row size", side: "right", sideOffset: 4, children: /* @__PURE__ */ jsx(Select, { value: t3, className: "w-16 ml-2", size: "small", onValueChange: t4, renderValue: _temp$j, children: t5 }) });
     $[6] = t3;
     $[7] = t4;
     $[8] = t6;
@@ -10491,8 +10625,7 @@ const VirtualTable = React__default.memo(function VirtualTable2({
   className,
   endAdornment,
   AddColumnComponent,
-  initialScroll = 0,
-  debug
+  initialScroll = 0
 }) {
   const sortByProperty = sortBy ? sortBy[0] : void 0;
   const currentSort = sortBy ? sortBy[1] : void 0;
@@ -10502,7 +10635,10 @@ const VirtualTable = React__default.memo(function VirtualTable2({
   const debouncedScroll = useDebounceCallback(onScrollProp, 200);
   useEffect(() => {
     if (tableRef.current && initialScroll) {
-      tableRef.current.scrollTo(0, initialScroll);
+      const {
+        scrollLeft
+      } = tableRef.current;
+      tableRef.current.scrollTo(scrollLeft, initialScroll);
     }
   }, [tableRef, initialScroll]);
   useEffect(() => {
@@ -10533,11 +10669,9 @@ const VirtualTable = React__default.memo(function VirtualTable2({
     offsetSize: true
   });
   const onColumnResizeInternal = 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 = 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);
@@ -10545,18 +10679,15 @@ const VirtualTable = React__default.memo(function VirtualTable2({
   }, [columns, onColumnResize]);
   const filterRef = useRef();
   useEffect(() => {
-    if (debug) console.log("Filter updated", filterInput);
     filterRef.current = filterInput;
   }, [filterInput]);
   const scrollToTop = useCallback(() => {
-    if (debug) console.log("scrollToTop");
     endReachCallbackThreshold.current = 0;
     if (tableRef.current) {
       tableRef.current.scrollTo(tableRef.current?.scrollLeft, 0);
     }
   }, []);
   const onColumnSort = 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";
@@ -10577,9 +10708,7 @@ const VirtualTable = React__default.memo(function VirtualTable2({
     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 = 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();
@@ -10590,11 +10719,6 @@ const VirtualTable = React__default.memo(function VirtualTable2({
     scrollOffset: scrollOffset_0,
     scrollUpdateWasRequested
   }) => {
-    if (debug) console.log("onScroll", {
-      scrollDirection,
-      scrollOffset: scrollOffset_0,
-      scrollUpdateWasRequested
-    });
     if (onScrollProp) {
       debouncedScroll({
         scrollDirection,
@@ -10605,7 +10729,6 @@ const VirtualTable = React__default.memo(function VirtualTable2({
     if (!scrollUpdateWasRequested && scrollOffset_0 >= maxScroll - endOffset) onEndReachedInternal(scrollOffset_0);
   }, [maxScroll, onEndReachedInternal]);
   const onFilterUpdateInternal = useCallback((column_1, filterForProperty) => {
-    if (debug) console.log("onFilterUpdateInternal", column_1, filterForProperty);
     endReachCallbackThreshold.current = 0;
     const filter_0 = filterRef.current;
     let newFilterValue = filter_0 ? {
@@ -10653,7 +10776,6 @@ const VirtualTable = React__default.memo(function VirtualTable2({
     endAdornment,
     AddColumnComponent
   };
-  if (debug) console.log("VirtualTable render", virtualListController);
   return /* @__PURE__ */ jsx("div", { ref: measureRef, style, className: cls("h-full w-full", className), children: /* @__PURE__ */ jsx(VirtualListContext.Provider, { value: virtualListController, children: /* @__PURE__ */ 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({
@@ -10989,8 +11111,8 @@ function StringNumberFilterField(t0) {
   }
   let t9;
   if ($[34] !== dataType || $[35] !== enumValues || $[36] !== internalValue || $[37] !== multiple || $[38] !== name || $[39] !== operation || $[40] !== updateFilter) {
-    t9 = enumValues && multiple && /* @__PURE__ */ jsx(MultiSelect, { position: "item-aligned", value: Array.isArray(internalValue) ? internalValue.map(_temp3$3) : [], onValueChange: (value_2) => {
-      updateFilter(operation, dataType === "number" ? value_2.map(_temp4$2) : value_2);
+    t9 = enumValues && multiple && /* @__PURE__ */ jsx(MultiSelect, { position: "item-aligned", value: Array.isArray(internalValue) ? internalValue.map(_temp3$4) : [], onValueChange: (value_2) => {
+      updateFilter(operation, dataType === "number" ? value_2.map(_temp4$3) : value_2);
     }, multiple, endAdornment: internalValue && /* @__PURE__ */ jsx(IconButton, { className: "absolute right-2 top-3", onClick: (e_2) => updateFilter(operation, void 0), children: /* @__PURE__ */ jsx(CloseIcon, {}) }), children: enumValues.map((enumConfig_0) => /* @__PURE__ */ jsx(MultiSelectItem, { value: String(enumConfig_0.id), children: /* @__PURE__ */ jsx(EnumValuesChip, { enumKey: String(enumConfig_0.id), enumValues, size: "small" }) }, `select_value_${name}_${enumConfig_0.id}`)) });
     $[34] = dataType;
     $[35] = enumValues;
@@ -11053,10 +11175,10 @@ function StringNumberFilterField(t0) {
   }
   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) {
@@ -11293,97 +11415,94 @@ function _temp2$6(op_1) {
 function _temp$g(op_0) {
   return operationLabels[op_0];
 }
-const SelectableTable = React__default.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 = useRef(null);
-    const [selectedCell, setSelectedCell] = React__default.useState(void 0);
-    const loadNextPage = () => {
-      if (!paginationEnabled || dataLoading || noMoreToLoad) return;
-      if (itemCount !== void 0) setItemCount?.(itemCount + pageSize);
-    };
-    const resetPagination = useCallback(() => {
-      setItemCount?.(pageSize);
-    }, [pageSize]);
-    const onRowClick = useCallback(({
-      rowData
-    }) => {
-      if (inlineEditing) return;
-      return onEntityClick && onEntityClick(rowData);
-    }, [onEntityClick, inlineEditing]);
-    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 = useRef(null);
+  const [selectedCell, setSelectedCell] = React__default.useState(void 0);
+  const loadNextPage = () => {
+    if (!paginationEnabled || dataLoading || noMoreToLoad) return;
+    if (itemCount !== void 0) setItemCount?.(itemCount + pageSize);
+  };
+  const resetPagination = useCallback(() => {
+    setItemCount?.(pageSize);
+  }, [pageSize]);
+  const onRowClick = useCallback(({
+    rowData
+  }) => {
+    if (inlineEditing) return;
+    return onEntityClick && onEntityClick(rowData);
+  }, [onEntityClick, inlineEditing]);
+  useOutsideAlerter(ref, () => {
+    if (selectedCell) {
+      unselect();
+    }
+  }, Boolean(selectedCell));
+  const select = useCallback((cell) => {
+    setSelectedCell(cell);
+  }, []);
+  const unselect = useCallback(() => {
+    setSelectedCell(void 0);
+  }, []);
+  useEffect(() => {
+    const escFunction = (event) => {
+      if (event.keyCode === 27) {
         unselect();
       }
-    }, Boolean(selectedCell));
-    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 = useCallback((updatedFilterValues) => {
+    setFilterValues?.({
+      ...updatedFilterValues,
+      ...forceFilter
     });
-    const select = useCallback((cell) => {
-      setSelectedCell(cell);
-    }, []);
-    const unselect = useCallback(() => {
-      setSelectedCell(void 0);
-    }, []);
-    const onFilterUpdate = useCallback((updatedFilterValues) => {
-      setFilterValues?.({
-        ...updatedFilterValues,
-        ...forceFilter
-      });
-    }, [forceFilter]);
-    return /* @__PURE__ */ jsx(SelectableTableContext.Provider, { value: {
-      setPopupCell,
-      select,
-      onValueChange,
-      size: size ?? "m",
-      selectedCell
-    }, children: /* @__PURE__ */ jsx("div", { className: "h-full w-full flex flex-col bg-white dark:bg-surface-950", ref, children: /* @__PURE__ */ 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: 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 = useMemo(() => ({
+    setPopupCell,
+    select,
+    onValueChange,
+    size: size ?? "m",
+    selectedCell
+  }), [setPopupCell, select, onValueChange, size, selectedCell]);
+  return /* @__PURE__ */ jsx(SelectableTableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: "h-full w-full flex flex-col bg-white dark:bg-surface-950", ref, children: /* @__PURE__ */ 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: 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,
@@ -12841,7 +12960,7 @@ function NavigationCardBinding(t0) {
   const favourite = t4;
   let t5;
   if ($[7] !== collection || $[8] !== context || $[9] !== customizationController.plugins || $[10] !== favourite || $[11] !== path || $[12] !== userConfigurationPersistence) {
-    const actionsArray = userConfigurationPersistence ? [/* @__PURE__ */ jsx(IconButton, { onClick: (e) => {
+    const actionsArray = userConfigurationPersistence ? [/* @__PURE__ */ jsx(IconButton, { size: "small", onClick: (e) => {
       e.preventDefault();
       e.stopPropagation();
       if (favourite) {
@@ -12849,7 +12968,7 @@ function NavigationCardBinding(t0) {
       } else {
         userConfigurationPersistence.setFavouritePaths([...userConfigurationPersistence.favouritePaths, path]);
       }
-    }, children: /* @__PURE__ */ jsx(StarIcon, { size: 18, className: favourite ? "text-secondary" : "text-surface-400 dark:text-surface-500" }) }, "favourite")] : [];
+    }, children: /* @__PURE__ */ jsx(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) {
@@ -13183,7 +13302,7 @@ function DefaultHomePage(t0) {
   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;
@@ -13193,7 +13312,7 @@ function DefaultHomePage(t0) {
         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__ */ jsx(NavigationGroup, { group: section.title, children: section.children }, `plugin_section_${plugin_0.key}`);
         });
@@ -13214,7 +13333,7 @@ function DefaultHomePage(t0) {
       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 {
@@ -13231,7 +13350,7 @@ function DefaultHomePage(t0) {
       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 {
@@ -13328,7 +13447,7 @@ function DefaultHomePage(t0) {
             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__ */ jsx("div", { children: /* @__PURE__ */ jsx(AdditionalCard, { ...actionProps }) }, `nav_${group_0}_add_${i_2}`))
         ] }) }, `plugin_section_${group_0}`);
       };
@@ -13419,19 +13538,19 @@ function DefaultHomePage(t0) {
 function _temp8(plugin_4, i_1) {
   return /* @__PURE__ */ 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__ */ 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) {
@@ -13609,7 +13728,7 @@ function useDraggable({
   let relX = 0;
   let relY = 0;
   const listeningRef = React__default.useRef(false);
-  const onMouseDown = (event) => {
+  const onMouseDown = useCallback((event) => {
     if (event.button !== 0 || !containerRef.current || event.defaultPrevented || event.innerClicked) {
       return;
     }
@@ -13623,14 +13742,14 @@ function useDraggable({
     document.addEventListener("mouseup", onMouseUp);
     document.addEventListener("selectstart", onSelect);
     listeningRef.current = true;
-  };
-  const onMouseDownInner = (event_0) => {
+  }, [containerRef, onMove]);
+  const onMouseDownInner = useCallback((event_0) => {
     event_0.innerClicked = true;
-  };
-  const onSelect = (event_1) => {
+  }, []);
+  const onSelect = useCallback((event_1) => {
     event_1.preventDefault();
     event_1.stopPropagation();
-  };
+  }, []);
   const onMouseUp = (event_2) => {
     document.removeEventListener("mousemove", onMouseMove);
     document.removeEventListener("mouseup", onMouseUp);
@@ -13663,7 +13782,7 @@ function useDraggable({
       if (current) current.removeEventListener("mousedown", onMouseDown);
       if (innerCurrent) innerCurrent.removeEventListener("mousedown", onMouseDownInner);
     };
-  });
+  }, [containerRef, innerRef, onMouseDownInner, onMouseDown]);
 }
 function useWindowSize() {
   const $ = c(3);
@@ -13702,46 +13821,6 @@ function useWindowSize() {
   useLayoutEffect(t1, t2);
   return size;
 }
-const ElementResizeListener = ({
-  onResize
-}) => {
-  const rafRef = useRef(0);
-  const objectRef = useRef(null);
-  const onResizeRef = useRef(onResize);
-  onResizeRef.current = onResize;
-  const _onResize = useCallback((e) => {
-    if (rafRef.current) {
-      cancelAnimationFrame(rafRef.current);
-    }
-    rafRef.current = requestAnimationFrame(() => {
-      onResizeRef.current(e);
-    });
-  }, []);
-  const onLoad = useCallback(() => {
-    const obj = objectRef.current;
-    if (obj && obj.contentDocument && obj.contentDocument.defaultView) {
-      obj.contentDocument.defaultView.addEventListener("resize", _onResize);
-    }
-  }, [_onResize]);
-  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__ */ 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,
@@ -13783,7 +13862,9 @@ function CustomIdField({
     ] }) : void 0
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    enumValues && /* @__PURE__ */ jsx(Select, { size: "large", error, fullWidth: true, onValueChange: (v) => onChange(v), ...fieldProps, renderValue: (option) => {
+    enumValues && /* @__PURE__ */ jsx(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}`;
@@ -14362,7 +14443,7 @@ function EntityForm({
   const formRef = useRef(null);
   const formView = /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxs(Fragment, { children: [
     !Builder && /* @__PURE__ */ jsxs("div", { className: "w-full py-2 flex flex-col items-start my-4 lg:my-6", children: [
-      /* @__PURE__ */ jsx(Typography, { className: "py-4 flex-grow line-clamp-1 " + (collection.hideIdFromForm ? "mb-2" : "mb-0"), variant: "h4", children: title ?? collection.singularName ?? collection.name }),
+      /* @__PURE__ */ jsx(Typography, { className: "my-4 flex-grow line-clamp-1 " + (collection.hideIdFromForm ? "mb-6" : ""), variant: "h4", children: title ?? collection.singularName ?? collection.name }),
       showEntityPath && /* @__PURE__ */ jsx(Alert, { color: "base", className: "w-full", size: "small", children: /* @__PURE__ */ jsxs("code", { className: "text-xs select-all text-text-secondary dark:text-text-secondary-dark", children: [
         entity?.path ?? path,
         "/",
@@ -14515,7 +14596,7 @@ const LabelWithIcon = forwardRef((t0, ref) => {
   const t1 = small ? "gap-1" : "gap-2";
   let t2;
   if ($[0] !== className || $[1] !== t1) {
-    t2 = cls("inline-flex items-center my-0.5", t1, className);
+    t2 = cls("align-middle inline-flex items-center my-0.5", t1, className);
     $[0] = className;
     $[1] = t1;
     $[2] = t2;
@@ -14851,7 +14932,7 @@ function SelectFieldBinding(t0) {
   }
   let t13;
   if ($[20] !== disabled || $[21] !== handleClearClick || $[22] !== property.clearable) {
-    t13 = property.clearable && !disabled && /* @__PURE__ */ jsx(IconButton, { onClick: handleClearClick, children: /* @__PURE__ */ jsx(CloseIcon, {}) });
+    t13 = property.clearable && !disabled && /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: handleClearClick, children: /* @__PURE__ */ jsx(CloseIcon, { size: "small" }) });
     $[20] = disabled;
     $[21] = handleClearClick;
     $[22] = property.clearable;
@@ -14964,7 +15045,7 @@ function MultiSelectFieldBinding({
     ] }, enumKey);
   }, [enumValues, setValue, value]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(MultiSelect, { className: "w-full mt-2", size, value: validValue ? value.map((v_0) => v_0.toString()) : [], disabled, modalPopover: true, label: /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey, icon: getIconForProperty(property, "small"), required: property.validation?.required, title: property.name, className: "h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5" }), onValueChange: (updatedValue) => {
+    /* @__PURE__ */ jsx(MultiSelect, { className: "w-full mt-2", size, value: validValue ? value.map((v_0) => v_0?.toString()) : [], disabled, modalPopover: true, label: /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey, icon: getIconForProperty(property, "small"), required: property.validation?.required, title: property.name, className: "h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5" }), onValueChange: (updatedValue) => {
       let newValue;
       if (of && of?.dataType === "number") {
         newValue = updatedValue ? updatedValue.map((e_1) => parseFloat(e_1)) : [];
@@ -15045,7 +15126,8 @@ function ArrayOfReferencesFieldBinding({
     !collection && /* @__PURE__ */ jsx(ErrorView, { error: "The specified collection does not exist. Check console" }),
     collection && /* @__PURE__ */ jsxs("div", { className: "group", children: [
       /* @__PURE__ */ 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__ */ jsxs(Button, { className: "my-4 justify-center text-left", variant: "text", color: "primary", disabled: isSubmitting, onClick: onEntryClick, children: [
+      /* @__PURE__ */ jsxs(Button, { className: "ml-3.5 my-4 justify-center text-left", variant: "text", color: "primary", disabled: isSubmitting, onClick: onEntryClick, children: [
+        /* @__PURE__ */ jsx(EditIcon, { size: "small" }),
         "Edit ",
         property.name
       ] })
@@ -15294,15 +15376,161 @@ function StorageUploadFieldBinding(t0) {
   }
   return t12;
 }
+function SortableStorageItem(t0) {
+  const $ = 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
+  } = useSortable(t1);
+  let t2;
+  if ($[2] !== transform) {
+    t2 = 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__ */ 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__ */ 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 = 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__ */ 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 $ = c(64);
+  const $ = c(63);
   const {
     storage,
     disabled,
-    isDraggingOver,
     onFilesAdded,
     multipleFilesSupported,
-    droppableProvided,
     autoFocus,
     internalValue,
     property,
@@ -15310,23 +15538,23 @@ function FileDropComponent(t0) {
     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);
@@ -15388,170 +15616,154 @@ function FileDropComponent(t0) {
   }
   const t6 = disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin;
   const t7 = disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : "";
-  const t8 = multipleFilesSupported && internalValue.length ? "" : "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 = cls(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 = cls(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 = 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 = 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__ */ 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__ */ jsx(StorageItemPreview, { name: `storage_preview_${entry.storagePathOrDownloadUrl}`, property, disabled, value: entry.storagePathOrDownloadUrl, onRemove: onClear, size: entry.size });
-        } else {
-          if (entry.file) {
-            child = /* @__PURE__ */ jsx(StorageUploadProgress, { entry, metadata, storagePath: storagePathBuilder(entry.file), onFileUploadComplete, imageSize: size === "large" ? 220 : 118, simple: false });
-          }
-        }
-        return /* @__PURE__ */ jsx(Draggable, { draggableId: `array_field_${name}_${entry.id}`, index, children: (provided, snapshot) => /* @__PURE__ */ jsx("div", { tabIndex: -1, ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, className: 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx("div", { className: "flex-grow min-h-[38px] box-border m-2 text-center", children: /* @__PURE__ */ jsx(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__ */ jsxs("div", { ...t5, className: t10, children: [
-      t19,
-      t21
+  if ($[55] !== helpText || $[56] !== t21) {
+    t22 = /* @__PURE__ */ jsx("div", { className: "flex-grow min-h-[38px] box-border m-2 text-center", children: /* @__PURE__ */ jsx(Typography, { align: "center", variant: "label", className: t21, children: helpText }) });
+    $[55] = helpText;
+    $[56] = t21;
+    $[57] = t22;
+  } else {
+    t22 = $[57];
+  }
+  let t23;
+  if ($[58] !== t11 || $[59] !== t20 || $[60] !== t22 || $[61] !== t5) {
+    t23 = /* @__PURE__ */ 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
-  };
-}
-function _temp$a(e) {
-  return {
-    [e]: []
+    ...acc,
+    [ext]: []
   };
 }
-function StorageUpload({
-  property,
-  name,
-  value,
-  setInternalValue,
-  onChange,
-  multipleFilesSupported,
-  onFileUploadComplete,
-  disabled,
-  onFilesAdded,
-  autoFocus,
-  storage,
-  storagePathBuilder
-}) {
+function StorageUpload(t0) {
+  const $ = c(44);
+  const {
+    property,
+    name,
+    value,
+    setInternalValue,
+    onChange,
+    multipleFilesSupported,
+    onFileUploadComplete,
+    disabled,
+    onFilesAdded,
+    autoFocus,
+    storage,
+    storagePathBuilder
+  } = t0;
   if (multipleFilesSupported) {
     const arrayProperty = property;
     if (arrayProperty.of) {
@@ -15566,41 +15778,208 @@ function StorageUpload({
     }
   }
   const metadata = storage?.metadata;
-  const size = multipleFilesSupported ? "medium" : "large";
-  const moveItem = 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 = useCallback((result) => {
-    if (!result.destination) {
-      return;
-    }
-    moveItem(result.source.index, result.destination.index);
-  }, [moveItem]);
-  const onClear = 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] = 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: sortableKeyboardCoordinates
+    };
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  const sensors = useSensors(useSensor(PointerSensor, t2), useSensor(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__ */ jsx(DragDropContext, { onDragEnd, children: /* @__PURE__ */ jsx(Droppable, { droppableId: `droppable_${name}`, direction: "horizontal", renderClone: (provided, snapshot, rubric) => {
-    const entry = value[rubric.source.index];
-    return /* @__PURE__ */ jsx("div", { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, style: provided.draggableProps.style, className: "rounded", children: /* @__PURE__ */ 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__ */ 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__ */ jsx(FileDropComponent, { ...fileDropProps });
+      $[33] = fileDropProps;
+      $[34] = t9;
+    } else {
+      t9 = $[34];
+    }
+    let t10;
+    if ($[35] !== t8 || $[36] !== t9) {
+      t10 = /* @__PURE__ */ jsx(SortableContext, { items: t8, strategy: horizontalListSortingStrategy, children: t9 });
+      $[35] = t8;
+      $[36] = t9;
+      $[37] = t10;
+    } else {
+      t10 = $[37];
+    }
+    let t11;
+    if ($[38] !== handleDragEnd || $[39] !== sensors || $[40] !== t10) {
+      t11 = /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: 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__ */ 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 $ = c(52);
@@ -16419,6 +16798,7 @@ function MapFieldBinding(t0) {
     error,
     disabled,
     property,
+    partOfArray,
     minimalistView: minimalistViewProp,
     includeDescription,
     autoFocus,
@@ -16543,7 +16923,7 @@ function MapFieldBinding(t0) {
   }
   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__ */ jsx(FieldHelperText, { includeDescription, showError: t7, error: t8, disabled, property });
@@ -17394,6 +17774,7 @@ function RepeatFieldBinding(t0) {
         minimalistView: false,
         autoFocus: internalId === lastAddedId
       };
+      console.debug("Building entry for", index, fieldProps);
       return /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(PropertyFieldBinding, { ...fieldProps, index }) });
     };
     $[4] = context;
@@ -18030,7 +18411,7 @@ function PopupFormField(props) {
   return t0;
 }
 function PopupFormFieldLoading(t0) {
-  const $ = c(23);
+  const $ = c(21);
   const {
     tableKey,
     entityId,
@@ -18047,6 +18428,7 @@ function PopupFormFieldLoading(t0) {
   const dataSource = useDataSource();
   const [entity, setEntity] = useState(void 0);
   let t1;
+  let t2;
   if ($[0] !== dataSource || $[1] !== entityId || $[2] !== inputCollection || $[3] !== path) {
     t1 = () => {
       if (entityId && inputCollection) {
@@ -18057,29 +18439,23 @@ function PopupFormFieldLoading(t0) {
         }).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];
   }
   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,
@@ -18093,29 +18469,29 @@ function PopupFormFieldLoading(t0) {
       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__ */ jsx(PopupFormFieldInternal, { ...t3, entity });
-    $[20] = entity;
-    $[21] = t3;
-    $[22] = t4;
+    $[18] = entity;
+    $[19] = t3;
+    $[20] = t4;
   } else {
-    t4 = $[22];
+    t4 = $[20];
   }
   return t4;
 }
@@ -18157,23 +18533,26 @@ function PopupFormFieldInternal({
       y: cellRect.top < windowSize.height - cellRect.bottom ? cellRect.y + cellRect.height / 2 : cellRect.y - cellRect.height / 2
     };
   }, [cellRect, windowSize.height, windowSize.width]);
-  const normalizePosition = useCallback(({
-    x,
-    y
-  }) => {
-    const draggableBoundingRect = draggableRef.current?.getBoundingClientRect();
-    if (!draggableBoundingRect) throw Error("normalizePosition called before draggableBoundingRect is set");
+  const normalizePosition = 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 = useCallback((position) => {
+  }, []);
+  const updatePopupLocation = 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,
@@ -18184,15 +18563,22 @@ function PopupFormFieldInternal({
   useEffect(() => {
     initialPositionSet.current = false;
   }, [propertyKey, entity]);
-  useLayoutEffect(() => {
-    const draggableBoundingRect_1 = draggableRef.current?.getBoundingClientRect();
-    if (!cellRect || !draggableBoundingRect_1 || initialPositionSet.current) return;
-    updatePopupLocation();
-    initialPositionSet.current = true;
-  }, [cellRect, updatePopupLocation, initialPositionSet.current]);
+  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
+  );
   useLayoutEffect(() => {
     updatePopupLocation(popupLocation);
-  }, [windowSize, cellRect]);
+  }, [windowSize, cellRect, updatePopupLocation, popupLocation]);
   const validationSchema = useMemo(() => {
     if (!collection || !entityId) return;
     return getYupEntitySchema(entityId, propertyKey && collection.properties[propertyKey] ? {
@@ -18202,6 +18588,18 @@ function PopupFormFieldInternal({
   const adaptResize = useCallback(() => {
     return updatePopupLocation(popupLocation);
   }, [popupLocation, updatePopupLocation]);
+  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) {
@@ -18261,7 +18659,7 @@ function PopupFormFieldInternal({
     underlyingValueHasChanged: false,
     context: formContext,
     partOfArray: false,
-    minimalistView: false,
+    minimalistView: true,
     autoFocus: open
   } : void 0;
   let internalForm = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "w-[700px] max-w-full max-h-[85vh]", children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, noValidate: true, children: [
@@ -18282,21 +18680,18 @@ function PopupFormFieldInternal({
     internalForm,
     savingError && /* @__PURE__ */ jsx(Typography, { color: "error", children: savingError.message })
   ] });
-  const draggable = /* @__PURE__ */ jsxs("div", { style: {
+  const draggable = /* @__PURE__ */ 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__ */ jsx(ElementResizeListener, { onResize: adaptResize }),
-    /* @__PURE__ */ jsxs("div", { className: "overflow-hidden", children: [
-      form,
-      /* @__PURE__ */ jsx("div", { className: "absolute -top-3.5 -right-3.5 bg-surface-500 rounded-full", style: {
-        width: "32px",
-        height: "32px"
-      }, children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: (event) => {
-        event.stopPropagation();
-        onClose();
-      }, children: /* @__PURE__ */ jsx(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__ */ jsxs("div", { className: "overflow-hidden", children: [
+    form,
+    /* @__PURE__ */ jsx("div", { className: "absolute -top-3.5 -right-3.5 bg-surface-500 rounded-full", style: {
+      width: "32px",
+      height: "32px"
+    }, children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: (event) => {
+      event.stopPropagation();
+      onClose();
+    }, children: /* @__PURE__ */ jsx(CloseIcon, { className: "text-white", size: "small" }) }) })
+  ] }) }, `draggable_${propertyKey}_${entityId}_${open}`);
   return /* @__PURE__ */ jsx(Portal.Root, { asChild: true, container, children: /* @__PURE__ */ jsx(Formex, { value: formex, children: draggable }) });
 }
 function ClearFilterSortButton(t0) {
@@ -18313,7 +18708,7 @@ function ClearFilterSortButton(t0) {
   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";
@@ -18691,7 +19086,7 @@ const EntityCollectionView = React__default.memo(function EntityCollectionView2(
         dependencies: [],
         Builder: ({
           entity: entity_3
-        }) => /* @__PURE__ */ jsx(Button, { color: "primary", variant: "outlined", startIcon: /* @__PURE__ */ jsx(KeyboardTabIcon, { size: "small" }), onClick: (event) => {
+        }) => /* @__PURE__ */ jsx(Button, { color: "primary", variant: "outlined", className: "max-w-full truncate justify-start", startIcon: /* @__PURE__ */ jsx(KeyboardTabIcon, { size: "small" }), onClick: (event) => {
           event.stopPropagation();
           navigateToEntity({
             openEntityMode,
@@ -18802,7 +19197,7 @@ const EntityCollectionView = React__default.memo(function EntityCollectionView2(
     deleteEntityClicked && /* @__PURE__ */ 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,
@@ -19121,7 +19516,7 @@ function ConfirmationDialog(t0) {
   }
   let t5;
   if ($[8] !== loading || $[9] !== onAccept) {
-    t5 = /* @__PURE__ */ jsx(LoadingButton, { color: "primary", type: "submit", loading, onClick: onAccept, children: "Ok" });
+    t5 = /* @__PURE__ */ jsx(LoadingButton, { color: "primary", type: "submit", loading, onClick: onAccept, autoFocus: true, children: "Ok" });
     $[8] = loading;
     $[9] = onAccept;
     $[10] = t5;
@@ -19533,227 +19928,182 @@ const buildIdsMap = (value) => value && Array.isArray(value) && value.length > 0
   ...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,
+  storedProps,
+  updateItemCustomProps
 }) {
-  const canAddElements = (canAddElementsProp || canAddElementsProp === void 0) && (deprecatedIncludeAddButton === void 0 || deprecatedIncludeAddButton);
-  const hasValue = value && Array.isArray(value) && value.length > 0;
-  const internalIdsRef = useRef(buildIdsMap(value));
-  const [internalIds, setInternalIds] = useState(hasValue ? Object.values(internalIdsRef.current) : []);
-  const itemCustomPropsRef = useRef({});
-  const updateItemCustomProps = useCallback((internalId, customProps) => {
-    itemCustomPropsRef.current[internalId] = customProps;
-  }, []);
-  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 ? useSortable({
+    id
+  }) : {
+    attributes: {},
+    listeners: {},
+    setNodeRef: (node) => {
+    },
+    transform: null,
+    transition: void 0,
+    isDragging: false
   };
-  return /* @__PURE__ */ jsx(DragDropContext, { onDragEnd, children: /* @__PURE__ */ jsx(Droppable, { droppableId, renderClone: (provided, snapshot, rubric) => {
-    const index_3 = rubric.source.index;
-    const internalId_0 = internalIds[index_3];
-    return /* @__PURE__ */ 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__ */ jsxs("div", { className: cls("space-y-1", className), ...droppableProvided.droppableProps, ref: droppableProvided.innerRef, children: [
-    hasValue && internalIds.map((internalId_1, index_4) => {
-      return /* @__PURE__ */ jsx(Draggable, { draggableId: `array_field_${internalId_1}`, isDragDisabled: disabled || !sortable, index: index_4, children: (provided_0, snapshot_0) => /* @__PURE__ */ 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__ */ jsx("div", { className: "my-4 justify-center text-left", children: /* @__PURE__ */ jsx(Button, { variant: "text", size: size === "small" ? "small" : "medium", color: "primary", disabled: disabled || value?.length >= max, startIcon: /* @__PURE__ */ jsx(AddIcon, {}), onClick: insertInEnd, children: addLabel ?? "Add" }) })
-  ] }) }) });
+  const style = transform ? {
+    transform: CSS.Transform.toString(transform),
+    transition
+  } : {};
+  const dragHandleProps = sortable ? {
+    ...listeners2,
+    ...attributes
+  } : {};
+  return /* @__PURE__ */ jsx(ArrayContainerItem, { nodeRef: setNodeRef, style, dragHandleProps, internalId: id, index, size, disabled, buildEntry, remove, copy, addInIndex, canAddElements, sortable, isDragging, storedProps, updateItemCustomProps });
 }
 function ArrayContainerItem(t0) {
   const $ = c(30);
   const {
-    provided,
+    nodeRef,
+    style,
+    dragHandleProps,
     index,
     internalId,
     size,
     disabled,
     buildEntry,
     remove,
+    copy,
     addInIndex,
     canAddElements,
     sortable,
-    copy,
     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__ */ 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__ */ 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__ */ 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] !== sortable || $[20] !== t5) {
+    t6 = /* @__PURE__ */ jsx(ArrayItemOptions, { dragHandleProps, direction: t5, disabled, remove, index, copy, canAddElements, sortable, 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;
+    $[20] = t5;
+    $[21] = t6;
   } else {
-    t9 = $[21];
+    t6 = $[21];
   }
-  let t10;
-  if ($[22] !== t7 || $[23] !== t9) {
-    t10 = /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
-      t7,
-      t9
+  let t7;
+  if ($[22] !== t4 || $[23] !== t6) {
+    t7 = /* @__PURE__ */ 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__ */ 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__ */ 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,
   addInIndex
 }) {
   const [menuOpen, setMenuOpen] = useState(false);
-  const iconRef = React__default.useRef(null);
-  useOutsideAlerter(iconRef, () => setMenuOpen(false));
-  return /* @__PURE__ */ 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__ */ jsxs(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__ */ jsx(IconButton, { size: "small", disabled: disabled || !canAddElements, onClick: (e) => {
+  const iconRef = useRef(null);
+  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__ */ jsx(HandleIcon, {}) }),
-    /* @__PURE__ */ jsxs(Menu, { portalContainer: iconRef.current, open: menuOpen, trigger: /* @__PURE__ */ jsx("div", { tabIndex: -1 }), children: [
-      /* @__PURE__ */ jsxs(MenuItem, { dense: true, onClick: (e_1) => {
+      setMenuOpen((o) => !o);
+    } else if (sortable) ;
+    else {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  };
+  const title = !disabled && sortable && showMenu ? "Drag to move. Click for options" : !disabled && showMenu ? "Click for options" : !disabled && sortable ? "Drag to move" : void 0;
+  return /* @__PURE__ */ jsxs("div", { ref: iconRef, className: `pl-2 pt-1 pb-1 flex ${direction === "row" ? "flex-row-reverse" : "flex-col"} items-center`, children: [
+    /* @__PURE__ */ jsx(Tooltip, { delayDuration: 400, open: menuOpen ? false : void 0, side: direction === "column" ? "left" : void 0, title, children: /* @__PURE__ */ jsx(IconButton, { size: "small", disabled: disabled || !showMenu && !sortable, ...sortable ? dragHandleProps : {}, onClick: handleIconButtonClick, onFocus: () => {
+      if (sortable && menuOpen) setMenuOpen(false);
+    }, className: cls(disabled || !sortable && !showMenu ? "cursor-inherit" : "", sortable && !disabled ? "cursor-grab" : "", !sortable && showMenu && !disabled ? "cursor-pointer" : ""), children: /* @__PURE__ */ jsx(HandleIcon, {}) }) }),
+    showMenu && /* @__PURE__ */ jsxs(Menu, { portalContainer: iconRef.current, open: menuOpen, trigger: /* @__PURE__ */ jsx("div", { tabIndex: -1 }), children: [
+      /* @__PURE__ */ jsxs(MenuItem, { dense: true, onClick: (e_0) => {
         setMenuOpen(false);
         remove(index);
       }, children: [
@@ -19782,7 +20132,110 @@ function ArrayItemOptions({
         "Add below"
       ] })
     ] })
-  ] }) });
+  ] });
+}
+function ArrayContainer({
+  droppableId,
+  addLabel,
+  value,
+  disabled = false,
+  buildEntry,
+  size = "medium",
+  onInternalIdAdded,
+  includeAddButton: deprecatedIncludeAddButton,
+  canAddElements: canAddElementsProp = true,
+  sortable = 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 = useRef(buildIdsMap(value));
+  const [internalIds, setInternalIds] = useState(hasValue ? Object.values(internalIdsRef.current) : []);
+  const itemCustomPropsRef = useRef({});
+  const updateItemCustomProps = useCallback((internalId, customProps) => {
+    itemCustomPropsRef.current[internalId] = customProps;
+  }, []);
+  const pointerSensor = useSensor(PointerSensor, {
+    activationConstraint: {
+      distance: 5
+    }
+  });
+  const keyboardSensor = useSensor(KeyboardSensor, {});
+  const sensors = useSensors(pointerSensor, keyboardSensor);
+  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 ? /* @__PURE__ */ jsx(DndContext, { sensors, modifiers: [restrictToVerticalAxis], collisionDetection: closestCenter, onDragEnd, children: /* @__PURE__ */ jsx(SortableContext, { items: internalIds, strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsxs("div", { className: cls("space-y-1", className), id: droppableId, children: [
+    hasValue && internalIds.map((internalId_0, index_3) => /* @__PURE__ */ jsx(SortableItem, { id: internalId_0, index: index_3, size, disabled, buildEntry, remove, copy, addInIndex, canAddElements, sortable, storedProps: itemCustomPropsRef.current[internalId_0], updateItemCustomProps }, `array_field_${internalId_0}`)),
+    canAddElements && /* @__PURE__ */ jsx("div", { className: "my-4 justify-center text-left", children: /* @__PURE__ */ jsx(Button, { variant: "text", size: size === "small" ? "small" : "medium", color: "primary", disabled: disabled || (value?.length ?? 0) >= max, startIcon: /* @__PURE__ */ jsx(AddIcon, {}), onClick: insertInEnd, className: "ml-3.5", children: addLabel ?? "Add" }) })
+  ] }) }) }) : /* @__PURE__ */ jsxs("div", { className: cls("space-y-1", className), id: droppableId, children: [
+    hasValue && internalIds.map((internalId_1, index_4) => /* @__PURE__ */ 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__ */ jsx("div", { className: "my-4 justify-center text-left", children: /* @__PURE__ */ jsx(Button, { variant: "text", size: size === "small" ? "small" : "medium", color: "primary", disabled: disabled || (value?.length ?? 0) >= max, startIcon: /* @__PURE__ */ jsx(AddIcon, {}), onClick: insertInEnd, children: addLabel ?? "Add" }) })
+  ] });
 }
 function arrayMove(value, sourceIndex, destinationIndex) {
   const result = Array.from(value);
@@ -20125,9 +20578,9 @@ function useBuildNavigationController(props) {
     views: viewsProp,
     adminViews: adminViewsProp,
     viewsOrder,
+    plugins,
     userConfigPersistence,
     dataSourceDelegate,
-    injectCollections,
     disabled
   } = props;
   const navigate = useNavigate();
@@ -20217,7 +20670,7 @@ function useBuildNavigationController(props) {
     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;
@@ -20246,7 +20699,7 @@ function useBuildNavigationController(props) {
     }
     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]);
   useEffect(() => {
     refreshNavigation();
   }, [refreshNavigation]);
@@ -20369,7 +20822,8 @@ function useBuildNavigationController(props) {
     getParentReferencesFromPath: getAllParentReferencesForPath,
     getParentCollectionIds,
     convertIdsToPaths,
-    navigate
+    navigate,
+    plugins
   };
 }
 function encodePath(input) {
@@ -20388,7 +20842,19 @@ function filterOutNotAllowedCollections(resolvedCollections, authController) {
     };
   });
 }
-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({
@@ -20399,8 +20865,15 @@ async function resolveCollections(collections, collectionPermissions, authContro
   } 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);
@@ -21321,10 +21794,11 @@ function EntityEditViewInner({
   }, [selectedTabProp]);
   const subcollections = (collection.subcollections ?? []).filter((c2) => !c2.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,
@@ -21341,7 +21815,6 @@ function EntityEditViewInner({
       return null;
     }
     if (!entityId) {
-      console.error("INTERNAL: entityId is not defined");
       return null;
     }
     const formexStub = createFormexStub(usedEntity?.values ?? {});
@@ -21373,7 +21846,7 @@ function EntityEditViewInner({
     };
     return /* @__PURE__ */ jsx("div", { className: cls(defaultBorderMixin, "relative flex-1 w-full h-full overflow-auto", {
       "hidden": selectedTab !== customView.key
-    }), role: "tabpanel", children: /* @__PURE__ */ jsx(ErrorBoundary, { children: usedFormContext && /* @__PURE__ */ jsx(Builder, { collection, entity: usedEntity, modifiedValues: usedFormContext?.formex?.values ?? usedEntity?.values, formContext: usedFormContext }) }) }, `custom_view_${customView.key}`);
+    }), role: "tabpanel", children: /* @__PURE__ */ jsx(ErrorBoundary, { children: usedFormContext && /* @__PURE__ */ 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__ */ jsx("div", { className: cls("relative flex-1 h-full overflow-auto w-full", {
@@ -21402,7 +21875,8 @@ function EntityEditViewInner({
   };
   const entityReadOnlyView = !canEdit && entity ? /* @__PURE__ */ jsx("div", { className: cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", canEdit || !mainViewVisible || selectedSecondaryForm ? "hidden" : ""), children: /* @__PURE__ */ jsxs("div", { className: 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__ */ jsx(Typography, { className: "mt-16 mb-8 mx-8", variant: "h4", children: collection.singularName ?? collection.name }),
-    /* @__PURE__ */ jsx(EntityView, { className: "px-8 h-full overflow-auto", entity, path, collection })
+    /* @__PURE__ */ jsx(EntityView, { className: "px-8 h-full overflow-auto", entity, path, collection }),
+    /* @__PURE__ */ jsx("div", { className: "h-16" })
   ] }) }) : null;
   const entityView = /* @__PURE__ */ jsx(EntityForm, { collection, path, entityId: entityId ?? usedEntity?.id, onValuesModified, entity, initialDirtyValues: cachedDirtyValues, openEntityMode: layout, forceActionsAtTheBottom: actionsAtTheBottom, initialStatus: status, className: cls((!mainViewVisible || !canEdit) && !selectedSecondaryForm ? "hidden" : "", formProps?.className), EntityFormActionsComponent: EntityEditViewFormActions, disabled: !canEdit, ...formProps, onEntityChange: (entity_0) => {
     setUsedEntity(entity_0);
@@ -21422,7 +21896,8 @@ function EntityEditViewInner({
     formProps?.onSaved?.(res);
   }, Builder: selectedSecondaryForm?.Builder });
   const subcollectionTabs = subcollections && subcollections.map((subcollection_0) => /* @__PURE__ */ jsx(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__ */ jsx(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__ */ jsx(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__ */ jsx(Tab, { className: !view_2.tabComponent ? "text-sm min-w-[120px]" : void 0, value: view_2.key, children: view_2.tabComponent ?? view_2.name }, `entity_detail_collection_tab_${view_2.name}`));
   const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews;
   let result = /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col h-full w-full bg-white dark:bg-surface-900", children: [
     shouldShowTopBar && /* @__PURE__ */ jsxs("div", { className: cls("h-14 flex overflow-visible overflow-x-scroll w-full no-scrollbar h-14 border-b pl-2 pr-2 pt-1 flex items-end bg-surface-50 dark:bg-surface-900", defaultBorderMixin), children: [
@@ -21432,9 +21907,10 @@ function EntityEditViewInner({
       hasAdditionalViews && /* @__PURE__ */ jsxs(Tabs, { value: selectedTab, onValueChange: (value_1) => {
         onSideTabClick(value_1);
       }, children: [
-        includeJsonView && /* @__PURE__ */ jsx(Tab, { disabled: !hasAdditionalViews, value: JSON_TAB_VALUE, innerClassName: "block", className: "text-sm", children: /* @__PURE__ */ jsx(CodeIcon, { size: "small" }) }),
+        includeJsonView && /* @__PURE__ */ jsx(Tab, { disabled: !hasAdditionalViews, value: JSON_TAB_VALUE, className: "text-sm", children: /* @__PURE__ */ jsx(CodeIcon, { size: "small" }) }),
+        customViewTabsStart,
         /* @__PURE__ */ jsx(Tab, { disabled: !hasAdditionalViews, value: MAIN_TAB_VALUE, className: "text-sm min-w-[120px]", children: collection.singularName ?? collection.name }),
-        customViewTabs,
+        customViewTabsEnd,
         subcollectionTabs
       ] })
     ] }),
@@ -21446,7 +21922,6 @@ function EntityEditViewInner({
     customViewsView,
     subCollectionsViews
   ] });
-  const plugins = customizationController.plugins;
   if (plugins) {
     plugins.forEach((plugin) => {
       if (plugin.form?.provider) {
@@ -21457,6 +21932,12 @@ function EntityEditViewInner({
   return result;
 }
 function EntitySidePanel(props) {
+  const {
+    allowFullScreen = true,
+    path,
+    entityId,
+    formProps
+  } = props;
   const {
     blocked,
     setBlocked,
@@ -21494,19 +21975,9 @@ function EntitySidePanel(props) {
     }
   };
   const parentCollectionIds = useMemo(() => {
-    return navigationController.getParentCollectionIds(props.path);
-  }, [navigationController, props.path]);
-  const collection = 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);
   useEffect(() => {
     function beforeunload(e) {
       if (blocked && collection) {
@@ -21532,24 +22003,24 @@ function EntitySidePanel(props) {
   }
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(EntityEditView, { ...props, layout: "side_panel", collection, parentCollectionIds, onValuesModified, onSaved: onUpdate, barActions: /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(IconButton, { className: "self-center", onClick: onClose, children: /* @__PURE__ */ jsx(CloseIcon, { size: "small" }) }),
-    /* @__PURE__ */ jsx(IconButton, { className: "self-center", onClick: () => {
-      if (props.entityId) navigate(location.pathname);
+    allowFullScreen && /* @__PURE__ */ jsx(IconButton, { className: "self-center", onClick: () => {
+      if (entityId) navigate(location.pathname);
       else navigate(location.pathname + "#new");
     }, children: /* @__PURE__ */ jsx(OpenInFullIcon, { size: "small" }) })
   ] }), onTabChange: ({
-    path,
-    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";
@@ -21558,7 +22029,7 @@ function getEntityViewWidth(props, small, customizationController, authControlle
   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;
@@ -22282,7 +22753,7 @@ function FireCMS(props) {
     authController,
     storageSource,
     dataSourceDelegate,
-    plugins,
+    plugins: pluginsProp,
     onAnalyticsEvent,
     propertyConfigs,
     entityViews,
@@ -22290,6 +22761,10 @@ function FireCMS(props) {
     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 +24470,8 @@ export {
   EntityCollectionView,
   EntityCollectionViewActions,
   EntityForm,
+  EntityPreview,
+  EntityPreviewContainer,
   EntityReference,
   EntityView,
   EnumValuesChip,
@@ -24128,6 +24605,7 @@ export {
   joinCollectionLists,
   makePropertiesEditable,
   makePropertiesNonEditable,
+  mergeCallbacks,
   mergeCollection,
   mergeDeep,
   mergeEntityActions,