@firecms/core 3.0.0-canary.287 → 3.0.0-canary.288

package/dist/index.es.js

@@ -5,7 +5,7 @@ import React__default, { useRef, useEffect, useContext, useCallback, useMemo, us
 import { getColorSchemeForSeed, CHIP_COLORS, FunctionsIcon, CircleIcon, iconKeys, coolIconKeys, Icon, Tooltip, ErrorIcon, Typography, IconButton, ContentCopyIcon, OpenInNewIcon, DescriptionIcon, cls, Skeleton, Chip, defaultBorderMixin, KeyboardTabIcon, Checkbox, AccountCircleIcon, Markdown, TextareaAutosize, focusedDisabled, MultiSelect, MultiSelectItem, Select, SelectItem, BooleanSwitch, DateTimeField, paperMixin, EditIcon, DoNotDisturbOnIcon, Menu, MenuItem, MoreVertIcon, CircularProgress, SearchBar, Badge, ArrowUpwardIcon, Popover, FilterListIcon, Button, CenteredView, AssignmentIcon, Label, CloseIcon, TextField, BooleanSwitchWithLabel, useOutsideAlerter, Dialog, DialogTitle, DialogContent, DialogActions, FileCopyIcon, DeleteIcon, AddIcon, StarIcon, Collapse, ExpandablePanel, ArrowForwardIcon, Card, cardMixin, cardClickableMixin, Container, LoadingButton, WarningIcon, KeyboardArrowDownIcon, VisibilityIcon, CheckIcon, CancelIcon, Alert, NotesIcon, InfoIcon, fieldBackgroundMixin, RemoveIcon, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, ArrowDropDownIcon, FilterListOffIcon, SearchIcon, Avatar, DarkModeIcon, LightModeIcon, BrightnessMediumIcon, LogoutIcon, HandleIcon, KeyboardArrowUpIcon, debounce, Sheet, Tab, Tabs, CodeIcon, OpenInFullIcon, ViewStreamIcon, RepeatIcon, BallotIcon, ScheduleIcon, AddLinkIcon, LinkIcon, DriveFolderUploadIcon, UploadFileIcon, FormatListNumberedIcon, NumbersIcon, PersonIcon, ListAltIcon, ListIcon, FlagIcon, MailIcon, HttpIcon, FormatQuoteIcon, SubjectIcon, ShortTextIcon, MenuIcon, ChevronLeftIcon } from "@firecms/ui";
 import { SnackbarProvider as SnackbarProvider$1, useSnackbar } from "notistack";
 import hash from "object-hash";
-import { getIn, useFormex, flattenKeys, setIn, useCreateFormex, Formex, Field } from "@firecms/formex";
+import { getIn, useFormex, setIn, useCreateFormex, Formex, Field } from "@firecms/formex";
 import { useNavigate, useLocation, Link, NavLink, Routes, Route, createBrowserRouter, RouterProvider } from "react-router-dom";
 import Fuse from "fuse.js";
 import equal from "react-fast-compare";
@@ -255,6 +255,13 @@ const pick = (obj, ...args) => ({
 function isObject(item) {
   return item && typeof item === "object" && !Array.isArray(item);
 }
+function isPlainObject(obj) {
+  if (typeof obj !== "object" || obj === null || Array.isArray(obj)) {
+    return false;
+  }
+  const proto = Object.getPrototypeOf(obj);
+  return proto === Object.prototype;
+}
 function mergeDeep(target, source, ignoreUndefined = false) {
   if (!isObject(target)) {
     return target;
@@ -275,7 +282,28 @@ function mergeDeep(target, source, ignoreUndefined = false) {
       if (sourceValue instanceof Date) {
         output[key] = new Date(sourceValue.getTime());
       } else if (Array.isArray(sourceValue)) {
-        output[key] = [...sourceValue];
+        if (Array.isArray(outputValue)) {
+          const newArray = [];
+          const maxLength = Math.max(outputValue.length, sourceValue.length);
+          for (let i = 0; i < maxLength; i++) {
+            const sourceItem = sourceValue[i];
+            const targetItem = outputValue[i];
+            if (i >= sourceValue.length) {
+              newArray[i] = targetItem;
+            } else if (i >= outputValue.length) {
+              newArray[i] = sourceItem;
+            } else if (sourceItem === null) {
+              newArray[i] = targetItem;
+            } else if (isObject(sourceItem) && isObject(targetItem)) {
+              newArray[i] = mergeDeep(targetItem, sourceItem, ignoreUndefined);
+            } else {
+              newArray[i] = sourceItem;
+            }
+          }
+          output[key] = newArray;
+        } else {
+          output[key] = [...sourceValue];
+        }
       } else if (isObject(sourceValue)) {
         if (isObject(outputValue)) {
           output[key] = mergeDeep(outputValue, sourceValue, ignoreUndefined);
@@ -6777,7 +6805,7 @@ function BooleanPreview(t0) {
   return t3;
 }
 function NumberPropertyPreview(t0) {
-  const $ = c(10);
+  const $ = c(12);
   const {
     value,
     property,
@@ -6795,38 +6823,42 @@ function NumberPropertyPreview(t0) {
     }
     const enumValues = t1;
     if (!enumValues) {
-      let t22;
-      if ($[2] !== value) {
-        t22 = /* @__PURE__ */ jsx(Fragment, { children: value });
-        $[2] = value;
-        $[3] = t22;
+      const t22 = size === "small" ? "text-sm" : "";
+      let t32;
+      if ($[2] !== t22 || $[3] !== value) {
+        t32 = /* @__PURE__ */ jsx("span", { className: t22, children: value });
+        $[2] = t22;
+        $[3] = value;
+        $[4] = t32;
       } else {
-        t22 = $[3];
+        t32 = $[4];
       }
-      return t22;
+      return t32;
     }
     const t2 = size !== "medium" ? "small" : "medium";
     let t3;
-    if ($[4] !== enumKey || $[5] !== enumValues || $[6] !== t2) {
+    if ($[5] !== enumKey || $[6] !== enumValues || $[7] !== t2) {
       t3 = /* @__PURE__ */ jsx(EnumValuesChip, { enumKey, enumValues, size: t2 });
-      $[4] = enumKey;
-      $[5] = enumValues;
-      $[6] = t2;
-      $[7] = t3;
+      $[5] = enumKey;
+      $[6] = enumValues;
+      $[7] = t2;
+      $[8] = t3;
     } else {
-      t3 = $[7];
+      t3 = $[8];
     }
     return t3;
   } else {
-    let t1;
-    if ($[8] !== value) {
-      t1 = /* @__PURE__ */ jsx(Fragment, { children: value });
-      $[8] = value;
+    const t1 = size === "small" ? "text-sm" : "";
+    let t2;
+    if ($[9] !== t1 || $[10] !== value) {
+      t2 = /* @__PURE__ */ jsx("span", { className: t1, children: value });
       $[9] = t1;
+      $[10] = value;
+      $[11] = t2;
     } else {
-      t1 = $[9];
+      t2 = $[11];
     }
-    return t1;
+    return t2;
   }
 }
 function UserDisplay(t0) {
@@ -7375,6 +7407,389 @@ const AsyncPreviewComponent = React.memo(function AsyncPreviewComponentInternal(
   }
   return t3;
 });
+function buildPropertyLabelAndGetProperty(properties, key) {
+  if (!key) return {
+    label: "",
+    property: void 0
+  };
+  const segments = [];
+  const re = /([^[.\]]+)|\[(\d+)\]/g;
+  let m;
+  while ((m = re.exec(key)) !== null) {
+    if (m[1] !== void 0) segments.push(m[1]);
+    else if (m[2] !== void 0) segments.push(Number(m[2]));
+  }
+  let currentProps = properties;
+  let currentProp;
+  let lastLabel = "";
+  const getArrayOfProp = (p) => {
+    if (!p || p.dataType !== "array") return void 0;
+    return Array.isArray(p.of) ? p.of[0] : p.of;
+  };
+  for (const seg of segments) {
+    if (typeof seg === "number") {
+      lastLabel = `[${seg}]`;
+      if (currentProp?.dataType === "array") {
+        currentProp = getArrayOfProp(currentProp);
+        if (currentProp?.dataType === "map" && currentProp.properties) {
+          currentProps = currentProp.properties;
+        } else {
+          currentProps = void 0;
+        }
+      } else {
+        currentProp = void 0;
+        currentProps = void 0;
+      }
+      continue;
+    }
+    if (currentProps && currentProps[seg]) {
+      const nextProp = currentProps[seg];
+      currentProp = nextProp;
+      lastLabel = nextProp.name || String(seg);
+      if (nextProp.dataType === "map" && nextProp.properties) {
+        currentProps = nextProp.properties;
+      } else if (nextProp.dataType === "array") {
+        currentProps = void 0;
+      } else {
+        currentProps = void 0;
+      }
+    } else {
+      currentProp = void 0;
+      currentProps = void 0;
+      lastLabel = String(seg);
+    }
+  }
+  return {
+    label: lastLabel,
+    property: currentProp
+  };
+}
+const pathEndsWithIndex = (p) => /\[\d+\]$/.test(p);
+const PropertyCollectionView = (t0) => {
+  const $ = c(89);
+  const {
+    data,
+    properties,
+    baseKey: t1,
+    suppressHeader: t2,
+    size: t3
+  } = t0;
+  const baseKey = t1 === void 0 ? "" : t1;
+  const suppressHeader = t2 === void 0 ? false : t2;
+  const size = t3 === void 0 ? "small" : t3;
+  const isTopLevel = !!baseKey && !baseKey.includes(".") && !baseKey.includes("[");
+  if (Array.isArray(data)) {
+    let t4;
+    if ($[0] !== baseKey || $[1] !== properties) {
+      t4 = baseKey ? buildPropertyLabelAndGetProperty(properties, baseKey) : {
+        label: "",
+        property: void 0
+      };
+      $[0] = baseKey;
+      $[1] = properties;
+      $[2] = t4;
+    } else {
+      t4 = $[2];
+    }
+    const {
+      label: arrayLabel,
+      property
+    } = t4;
+    const ofProp = property?.dataType === "array" ? Array.isArray(property.of) ? property.of[0] : property.of : void 0;
+    const isArrayOfMaps = ofProp?.dataType === "map";
+    const isArrayOfPrimitives = property?.dataType === "array" && ofProp && ofProp.dataType !== "map";
+    if (baseKey && property && isArrayOfPrimitives) {
+      const t52 = `grid grid-cols-12 gap-x-4 ${isTopLevel ? "py-4" : "py-2"} items-start ${isTopLevel ? `border-b ${defaultBorderMixin}` : ""}`;
+      let t62;
+      if ($[3] !== arrayLabel) {
+        t62 = /* @__PURE__ */ jsx("div", { className: "col-span-4 pr-2", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", component: "span", className: "break-words", children: arrayLabel }) });
+        $[3] = arrayLabel;
+        $[4] = t62;
+      } else {
+        t62 = $[4];
+      }
+      let t72;
+      if ($[5] !== baseKey || $[6] !== data || $[7] !== property || $[8] !== size) {
+        t72 = /* @__PURE__ */ jsx("div", { className: "col-span-8", children: /* @__PURE__ */ jsx(PropertyPreview, { propertyKey: baseKey, value: data, property, size }) });
+        $[5] = baseKey;
+        $[6] = data;
+        $[7] = property;
+        $[8] = size;
+        $[9] = t72;
+      } else {
+        t72 = $[9];
+      }
+      let t82;
+      if ($[10] !== t52 || $[11] !== t62 || $[12] !== t72) {
+        t82 = /* @__PURE__ */ jsxs("div", { className: t52, children: [
+          t62,
+          t72
+        ] });
+        $[10] = t52;
+        $[11] = t62;
+        $[12] = t72;
+        $[13] = t82;
+      } else {
+        t82 = $[13];
+      }
+      return t82;
+    }
+    const t5 = `${isTopLevel ? "py-4" : "py-1"} ${isTopLevel ? `border-b ${defaultBorderMixin}` : ""}`;
+    let t6;
+    if ($[14] !== arrayLabel || $[15] !== baseKey || $[16] !== suppressHeader) {
+      t6 = baseKey && arrayLabel && !suppressHeader && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", component: "span", children: arrayLabel });
+      $[14] = arrayLabel;
+      $[15] = baseKey;
+      $[16] = suppressHeader;
+      $[17] = t6;
+    } else {
+      t6 = $[17];
+    }
+    const t7 = baseKey ? `pl-4 mt-1 border-l ${defaultBorderMixin}` : "";
+    let t8;
+    if ($[18] !== baseKey || $[19] !== data || $[20] !== isArrayOfMaps || $[21] !== ofProp || $[22] !== properties || $[23] !== size) {
+      let t92;
+      if ($[25] !== baseKey || $[26] !== isArrayOfMaps || $[27] !== ofProp || $[28] !== properties || $[29] !== size) {
+        t92 = (item, index) => {
+          if (item === null || item === void 0) {
+            return null;
+          }
+          const currentKey = baseKey ? `${baseKey}[${index}]` : `[${index}]`;
+          const itemHeader = isArrayOfMaps && ofProp?.name ? `${ofProp.name} [${index}]` : `[${index}]`;
+          return /* @__PURE__ */ jsxs("div", { className: "py-1", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", component: "span", children: itemHeader }),
+            /* @__PURE__ */ jsx("div", { className: `pl-4 mt-1 border-l ${defaultBorderMixin}`, children: /* @__PURE__ */ jsx(PropertyCollectionView, { data: item, properties, baseKey: currentKey, suppressHeader: true, size }) })
+          ] }, currentKey);
+        };
+        $[25] = baseKey;
+        $[26] = isArrayOfMaps;
+        $[27] = ofProp;
+        $[28] = properties;
+        $[29] = size;
+        $[30] = t92;
+      } else {
+        t92 = $[30];
+      }
+      t8 = data.map(t92);
+      $[18] = baseKey;
+      $[19] = data;
+      $[20] = isArrayOfMaps;
+      $[21] = ofProp;
+      $[22] = properties;
+      $[23] = size;
+      $[24] = t8;
+    } else {
+      t8 = $[24];
+    }
+    let t9;
+    if ($[31] !== t7 || $[32] !== t8) {
+      t9 = /* @__PURE__ */ jsx("div", { className: t7, children: t8 });
+      $[31] = t7;
+      $[32] = t8;
+      $[33] = t9;
+    } else {
+      t9 = $[33];
+    }
+    let t10;
+    if ($[34] !== t5 || $[35] !== t6 || $[36] !== t9) {
+      t10 = /* @__PURE__ */ jsxs("div", { className: t5, children: [
+        t6,
+        t9
+      ] });
+      $[34] = t5;
+      $[35] = t6;
+      $[36] = t9;
+      $[37] = t10;
+    } else {
+      t10 = $[37];
+    }
+    return t10;
+  }
+  if (typeof data === "object" && data !== null) {
+    let t4;
+    if ($[38] !== baseKey || $[39] !== properties) {
+      t4 = baseKey ? buildPropertyLabelAndGetProperty(properties, baseKey) : {
+        label: "",
+        property: void 0
+      };
+      $[38] = baseKey;
+      $[39] = properties;
+      $[40] = t4;
+    } else {
+      t4 = $[40];
+    }
+    const {
+      label,
+      property: property_0
+    } = t4;
+    if (baseKey && (!property_0 || property_0.dataType !== "map" || !property_0.properties)) {
+      if (!property_0) {
+        return null;
+      }
+      const t52 = `grid grid-cols-12 gap-x-4 ${isTopLevel ? "py-4" : "py-2"} items-start ${isTopLevel ? `border-b ${defaultBorderMixin}` : ""}`;
+      let t62;
+      if ($[41] !== label) {
+        t62 = /* @__PURE__ */ jsx("div", { className: "col-span-4 pr-2", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", component: "span", className: "break-words", children: label }) });
+        $[41] = label;
+        $[42] = t62;
+      } else {
+        t62 = $[42];
+      }
+      let t72;
+      if ($[43] !== baseKey || $[44] !== data || $[45] !== property_0 || $[46] !== size) {
+        t72 = /* @__PURE__ */ jsx("div", { className: "col-span-8", children: /* @__PURE__ */ jsx(PropertyPreview, { propertyKey: baseKey, value: data, property: property_0, size }) });
+        $[43] = baseKey;
+        $[44] = data;
+        $[45] = property_0;
+        $[46] = size;
+        $[47] = t72;
+      } else {
+        t72 = $[47];
+      }
+      let t82;
+      if ($[48] !== t52 || $[49] !== t62 || $[50] !== t72) {
+        t82 = /* @__PURE__ */ jsxs("div", { className: t52, children: [
+          t62,
+          t72
+        ] });
+        $[48] = t52;
+        $[49] = t62;
+        $[50] = t72;
+        $[51] = t82;
+      } else {
+        t82 = $[51];
+      }
+      return t82;
+    }
+    let t5;
+    if ($[52] !== baseKey || $[53] !== property_0 || $[54] !== suppressHeader) {
+      t5 = baseKey && !suppressHeader && property_0?.dataType === "map" && (property_0.name || !pathEndsWithIndex(baseKey));
+      $[52] = baseKey;
+      $[53] = property_0;
+      $[54] = suppressHeader;
+      $[55] = t5;
+    } else {
+      t5 = $[55];
+    }
+    const showMapHeader = t5;
+    const headerText = property_0?.name || label;
+    const t6 = `${isTopLevel ? "py-4" : "py-1"} ${isTopLevel ? `border-b ${defaultBorderMixin}` : ""}`;
+    let t7;
+    if ($[56] !== headerText || $[57] !== showMapHeader) {
+      t7 = showMapHeader && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", component: "span", children: headerText });
+      $[56] = headerText;
+      $[57] = showMapHeader;
+      $[58] = t7;
+    } else {
+      t7 = $[58];
+    }
+    const t8 = baseKey ? `pl-4 mt-1 border-l ${defaultBorderMixin}` : "";
+    let t9;
+    if ($[59] !== baseKey || $[60] !== data || $[61] !== properties || $[62] !== size) {
+      let t102;
+      if ($[64] !== baseKey || $[65] !== properties || $[66] !== size) {
+        t102 = (t112) => {
+          const [key, value] = t112;
+          if (value === null || value === void 0) {
+            return null;
+          }
+          const currentKey_0 = baseKey ? `${baseKey}.${key}` : key;
+          return /* @__PURE__ */ jsx(PropertyCollectionView, { data: value, properties, baseKey: currentKey_0, size }, currentKey_0);
+        };
+        $[64] = baseKey;
+        $[65] = properties;
+        $[66] = size;
+        $[67] = t102;
+      } else {
+        t102 = $[67];
+      }
+      t9 = Object.entries(data).map(t102);
+      $[59] = baseKey;
+      $[60] = data;
+      $[61] = properties;
+      $[62] = size;
+      $[63] = t9;
+    } else {
+      t9 = $[63];
+    }
+    let t10;
+    if ($[68] !== t8 || $[69] !== t9) {
+      t10 = /* @__PURE__ */ jsx("div", { className: t8, children: t9 });
+      $[68] = t8;
+      $[69] = t9;
+      $[70] = t10;
+    } else {
+      t10 = $[70];
+    }
+    let t11;
+    if ($[71] !== t10 || $[72] !== t6 || $[73] !== t7) {
+      t11 = /* @__PURE__ */ jsxs("div", { className: t6, children: [
+        t7,
+        t10
+      ] });
+      $[71] = t10;
+      $[72] = t6;
+      $[73] = t7;
+      $[74] = t11;
+    } else {
+      t11 = $[74];
+    }
+    return t11;
+  }
+  if (baseKey) {
+    let t4;
+    if ($[75] !== baseKey || $[76] !== properties) {
+      t4 = buildPropertyLabelAndGetProperty(properties, baseKey);
+      $[75] = baseKey;
+      $[76] = properties;
+      $[77] = t4;
+    } else {
+      t4 = $[77];
+    }
+    const {
+      label: label_0,
+      property: property_1
+    } = t4;
+    if (!property_1) {
+      return null;
+    }
+    const t5 = `grid grid-cols-12 gap-x-4 ${isTopLevel ? "py-4" : "py-2"} items-start ${isTopLevel ? `border-b ${defaultBorderMixin}` : ""}`;
+    let t6;
+    if ($[78] !== label_0) {
+      t6 = /* @__PURE__ */ jsx("div", { className: "col-span-4 pr-2", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", component: "span", className: "break-words", children: label_0 }) });
+      $[78] = label_0;
+      $[79] = t6;
+    } else {
+      t6 = $[79];
+    }
+    let t7;
+    if ($[80] !== baseKey || $[81] !== data || $[82] !== property_1 || $[83] !== size) {
+      t7 = /* @__PURE__ */ jsx("div", { className: "col-span-8", children: /* @__PURE__ */ jsx(PropertyPreview, { propertyKey: baseKey, value: data, property: property_1, size }) });
+      $[80] = baseKey;
+      $[81] = data;
+      $[82] = property_1;
+      $[83] = size;
+      $[84] = t7;
+    } else {
+      t7 = $[84];
+    }
+    let t8;
+    if ($[85] !== t5 || $[86] !== t6 || $[87] !== t7) {
+      t8 = /* @__PURE__ */ jsxs("div", { className: t5, children: [
+        t6,
+        t7
+      ] });
+      $[85] = t5;
+      $[86] = t6;
+      $[87] = t7;
+      $[88] = t8;
+    } else {
+      t8 = $[88];
+    }
+    return t8;
+  }
+  return null;
+};
 function EntityView({
   entity,
   collection,
@@ -7392,31 +7807,17 @@ function EntityView({
     authController
   }), [collection, path, entity, customizationController.propertyConfigs]);
   const properties = resolvedCollection.properties;
-  return /* @__PURE__ */ jsx("div", { className: "w-full " + className, children: /* @__PURE__ */ jsxs("div", { className: "w-full mb-4", children: [
-    /* @__PURE__ */ jsxs("div", { className: cls(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0"), children: [
-      /* @__PURE__ */ jsx("div", { className: "flex items-center w-1/4", children: /* @__PURE__ */ jsx("span", { className: "pl-2 text-sm text-surface-600", children: "Id" }) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex-grow p-2 ml-2 w-3/4 text-surface-900 dark:text-white min-h-[56px] flex items-center", children: [
+  return /* @__PURE__ */ jsx("div", { className: "w-full " + className, children: /* @__PURE__ */ jsxs("div", { className: "w-full mb-4 p-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: `grid grid-cols-12 gap-x-4 py-4 items-start border-b ${defaultBorderMixin}`, children: [
+      /* @__PURE__ */ jsx("div", { className: "col-span-4 pr-2", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", component: "span", className: "break-words", children: "Id" }) }),
+      /* @__PURE__ */ jsx("div", { className: "col-span-8", children: /* @__PURE__ */ jsxs("div", { className: "flex-grow text-surface-900 dark:text-white flex items-center", children: [
         /* @__PURE__ */ jsx("span", { className: "flex-grow mr-2", children: entity.id }),
         customizationController?.entityLinkBuilder && /* @__PURE__ */ jsx("a", { href: customizationController.entityLinkBuilder({
           entity
         }), rel: "noopener noreferrer", target: "_blank", children: /* @__PURE__ */ jsx(IconButton, { children: /* @__PURE__ */ jsx(OpenInNewIcon, { size: "small" }) }) })
-      ] })
+      ] }) })
     ] }),
-    Object.entries(properties).map(([key, property]) => {
-      const value = entity.values?.[key];
-      return /* @__PURE__ */ jsxs("div", { className: cls(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0"), children: [
-        /* @__PURE__ */ jsx("div", { className: "flex items-center w-1/4", children: /* @__PURE__ */ jsx("span", { className: "pl-2 text-sm text-surface-600", children: property.name }) }),
-        /* @__PURE__ */ jsx("div", { className: "flex-grow p-2 ml-2 w-3/4 text-surface-900 dark:text-white min-h-[56px] flex items-center", children: /* @__PURE__ */ jsx(
-          PropertyPreview,
-          {
-            propertyKey: key,
-            value,
-            property,
-            size: "medium"
-          }
-        ) })
-      ] }, `reference_previews_${key}`);
-    })
+    /* @__PURE__ */ jsx(PropertyCollectionView, { data: entity.values, properties, size: "medium" })
   ] }) });
 }
 function VirtualTableInput(props) {
@@ -9767,6 +10168,10 @@ function saveEntityToCache(path, data) {
     try {
       const key = LOCAL_STORAGE_PREFIX + path;
       const entityString = JSON.stringify(data, customReplacer);
+      console.log("Saving entity to localStorage:", {
+        key,
+        entityString
+      });
       localStorage.setItem(key, entityString);
     } catch (error) {
       console.error(`Failed to save entity for path "${path}" to localStorage:`, error);
@@ -9789,6 +10194,10 @@ function getEntityFromCache(path) {
       const entityString = localStorage.getItem(key);
       if (entityString) {
         const entity = JSON.parse(entityString, customReviver);
+        console.log("Loaded entity from localStorage:", {
+          key,
+          entity
+        });
         return entity;
       }
     } catch (error) {
@@ -9807,6 +10216,26 @@ function removeEntityFromCache(path) {
     }
   }
 }
+function flattenKeys(obj, prefix = "", result = []) {
+  if (isObject(obj) || Array.isArray(obj)) {
+    const plainObject = isPlainObject(obj);
+    if (!plainObject && prefix) {
+      result.push(prefix);
+    } else {
+      for (const key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+          const newKey = prefix ? Array.isArray(obj) ? `${prefix}[${key}]` : `${prefix}.${key}` : key;
+          if (isObject(obj[key]) || Array.isArray(obj[key])) {
+            flattenKeys(obj[key], newKey, result);
+          } else {
+            result.push(newKey);
+          }
+        }
+      }
+    }
+  }
+  return result;
+}
 const EntityCollectionRowActions = function EntityCollectionRowActions2({
   entity,
   collection,
@@ -15171,7 +15600,7 @@ function buildSideActions$1({
   ] });
 }
 function LocalChangesMenu(t0) {
-  const $ = c(43);
+  const $ = c(42);
   const {
     localChangesData,
     formex,
@@ -15184,9 +15613,7 @@ function LocalChangesMenu(t0) {
   const [open, setOpen] = useState(false);
   let t1;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = () => {
-      setOpen(true);
-    };
+    t1 = () => setOpen(true);
     $[0] = t1;
   } else {
     t1 = $[0];
@@ -15194,9 +15621,7 @@ function LocalChangesMenu(t0) {
   const handleOpenMenu = t1;
   let t2;
   if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-    t2 = () => {
-      setOpen(false);
-    };
+    t2 = () => setOpen(false);
     $[1] = t2;
   } else {
     t2 = $[1];
@@ -15220,8 +15645,8 @@ function LocalChangesMenu(t0) {
       const touched = {
         ...formex.touched
       };
-      const newTouched = flattenKeys(localChangesData);
-      newTouched.forEach((key) => {
+      const previewKeys = flattenKeys(localChangesData);
+      previewKeys.forEach((key) => {
         touched[key] = true;
       });
       formex.setTouched(touched);
@@ -15281,7 +15706,7 @@ function LocalChangesMenu(t0) {
   }
   let t8;
   if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-    t8 = /* @__PURE__ */ jsx("div", { className: "max-w-xs px-4 py-4 text-sm text-gray-700 dark:text-gray-300", children: "This document was edited locally and has unsaved changes." });
+    t8 = /* @__PURE__ */ jsx("div", { className: "max-w-xs px-4 py-4 text-sm text-gray-700 dark:text-gray-300", children: "This document was edited locally and has unsaved changes. These local changes will be lost if you don't apply them." });
     $[14] = t8;
   } else {
     t8 = $[14];
@@ -15359,83 +15784,76 @@ function LocalChangesMenu(t0) {
     t16 = $[27];
   }
   let t17;
-  if ($[28] !== localChangesData || $[29] !== properties) {
-    t17 = flattenKeys(localChangesData).map((key_0) => {
-      const value = getIn(localChangesData, key_0);
-      const property = getPropertyInPath(properties, key_0);
-      if (!property) {
-        return null;
-      }
-      return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-x-4 px-4 py-3 items-center", children: [
-        /* @__PURE__ */ jsx("div", { className: "col-span-3 text-right", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-gray-500 dark:text-gray-400 break-words", children: property.name || key_0 }) }),
-        /* @__PURE__ */ jsx("div", { className: "col-span-9", children: /* @__PURE__ */ jsx(PropertyPreview, { propertyKey: key_0, value, property, size: "small" }) })
-      ] }, key_0);
-    });
-    $[28] = localChangesData;
-    $[29] = properties;
-    $[30] = t17;
+  if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+    t17 = {
+      maxHeight: 520,
+      overflow: "auto"
+    };
+    $[28] = t17;
   } else {
-    t17 = $[30];
+    t17 = $[28];
   }
-  let t18;
-  if ($[31] !== t17) {
-    t18 = /* @__PURE__ */ jsxs(DialogContent, { children: [
+  const t18 = properties;
+  let t19;
+  if ($[29] !== localChangesData || $[30] !== t18) {
+    t19 = /* @__PURE__ */ jsxs(DialogContent, { children: [
       t15,
       t16,
-      /* @__PURE__ */ jsx("div", { className: `border rounded-lg divide-y divide-surface-200 divide-surface-opacity-40 dark:divide-surface-700 dark:divide-opacity-40 ${defaultBorderMixin}`, children: t17 })
+      /* @__PURE__ */ jsx("div", { className: `border rounded-lg ${defaultBorderMixin}`, style: t17, children: /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(PropertyCollectionView, { data: localChangesData, properties: t18 }) }) })
     ] });
-    $[31] = t17;
-    $[32] = t18;
+    $[29] = localChangesData;
+    $[30] = t18;
+    $[31] = t19;
   } else {
-    t18 = $[32];
+    t19 = $[31];
   }
-  let t19;
-  if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
-    t19 = /* @__PURE__ */ jsx(Button, { onClick: () => setPreviewDialogOpen(false), children: "Close" });
-    $[33] = t19;
+  let t20;
+  if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+    t20 = /* @__PURE__ */ jsx(Button, { onClick: () => setPreviewDialogOpen(false), children: "Close" });
+    $[32] = t20;
   } else {
-    t19 = $[33];
+    t20 = $[32];
   }
-  let t20;
-  if ($[34] !== handleApply) {
-    t20 = /* @__PURE__ */ jsxs(DialogActions, { children: [
-      t19,
+  let t21;
+  if ($[33] !== handleApply) {
+    t21 = /* @__PURE__ */ jsxs(DialogActions, { children: [
+      t20,
       /* @__PURE__ */ jsx(Button, { variant: "filled", onClick: () => {
         handleApply();
         setPreviewDialogOpen(false);
       }, children: "Apply changes" })
     ] });
-    $[34] = handleApply;
-    $[35] = t20;
+    $[33] = handleApply;
+    $[34] = t21;
   } else {
-    t20 = $[35];
+    t21 = $[34];
   }
-  let t21;
-  if ($[36] !== previewDialogOpen || $[37] !== t18 || $[38] !== t20) {
-    t21 = /* @__PURE__ */ jsxs(Dialog, { open: previewDialogOpen, onOpenChange: setPreviewDialogOpen, maxWidth: "4xl", children: [
-      t18,
-      t20
+  let t22;
+  if ($[35] !== previewDialogOpen || $[36] !== t19 || $[37] !== t21) {
+    t22 = /* @__PURE__ */ jsxs(Dialog, { open: previewDialogOpen, onOpenChange: setPreviewDialogOpen, maxWidth: "4xl", children: [
+      t19,
+      t21
     ] });
-    $[36] = previewDialogOpen;
-    $[37] = t18;
-    $[38] = t20;
-    $[39] = t21;
+    $[35] = previewDialogOpen;
+    $[36] = t19;
+    $[37] = t21;
+    $[38] = t22;
   } else {
-    t21 = $[39];
+    t22 = $[38];
   }
-  let t22;
-  if ($[40] !== t14 || $[41] !== t21) {
-    t22 = /* @__PURE__ */ jsxs(Fragment, { children: [
+  let t23;
+  if ($[39] !== t14 || $[40] !== t22) {
+    t23 = /* @__PURE__ */ jsxs(Fragment, { children: [
       t14,
-      t21
+      t22
     ] });
-    $[40] = t14;
-    $[41] = t21;
-    $[42] = t22;
+    $[39] = t14;
+    $[40] = t22;
+    $[41] = t23;
   } else {
-    t22 = $[42];
+    t23 = $[41];
   }
-  return t22;
+  return t23;
 }
 function extractTouchedValues(values, touched) {
   let acc = {};
@@ -15449,6 +15867,56 @@ function extractTouchedValues(values, touched) {
   });
   return acc;
 }
+function getChanges(source, comparison) {
+  const changes = {};
+  if (!source) {
+    return {};
+  }
+  if (!comparison) {
+    return source;
+  }
+  const allKeys = Array.from(/* @__PURE__ */ new Set([...Object.keys(source), ...Object.keys(comparison)]));
+  for (const key of allKeys) {
+    const sourceValue = source[key];
+    const comparisonValue = comparison[key];
+    if (equal(sourceValue, comparisonValue)) {
+      continue;
+    }
+    const sourceHasKey = source && typeof source === "object" && Object.prototype.hasOwnProperty.call(source, key);
+    const comparisonHasKey = comparison && typeof comparison === "object" && Object.prototype.hasOwnProperty.call(comparison, key);
+    if (comparisonHasKey && !sourceHasKey) {
+      changes[key] = void 0;
+    } else if (Array.isArray(sourceValue)) {
+      const comparisonArray = Array.isArray(comparisonValue) ? comparisonValue : [];
+      if (sourceValue.length < comparisonArray.length) {
+        changes[key] = sourceValue;
+        continue;
+      }
+      const changedArray = sourceValue.map((item, index) => {
+        const comparisonItem = comparisonArray[index];
+        if (equal(item, comparisonItem)) {
+          return null;
+        }
+        if (isObject(item) && item && isObject(comparisonItem) && comparisonItem) {
+          const nestedChanges = getChanges(item, comparisonItem);
+          return Object.keys(nestedChanges).length > 0 ? nestedChanges : item;
+        }
+        return item;
+      });
+      if (changedArray.some((item) => item !== null) || sourceValue.length > comparisonArray.length) {
+        changes[key] = changedArray;
+      }
+    } else if (isObject(sourceValue) && sourceValue && isObject(comparisonValue) && comparisonValue) {
+      const nestedChanges = getChanges(sourceValue, comparisonValue);
+      if (Object.keys(nestedChanges).length > 0) {
+        changes[key] = nestedChanges;
+      }
+    } else {
+      changes[key] = sourceValue;
+    }
+  }
+  return changes;
+}
 function EntityForm({
   path,
   fullIdPath,
@@ -15570,16 +16038,7 @@ function EntityForm({
     if (!localChangesDataRaw) {
       return void 0;
     }
-    let filteredChanges = {};
-    const flattenedKeys = flattenKeys(localChangesDataRaw);
-    flattenedKeys.forEach((key) => {
-      const localValue = getIn(localChangesDataRaw, key);
-      const initialValue = getIn(initialValues_0, key);
-      if (!equal(localValue, initialValue)) {
-        filteredChanges = setIn(filteredChanges, key, localValue);
-      }
-    });
-    return filteredChanges;
+    return getChanges(localChangesDataRaw, initialValues_0);
   }, [localChangesDataRaw, initialValues_0]);
   const hasLocalChanges = !localChangesCleared && localChangesData && Object.keys(localChangesData).length > 0;
   const formex = formexProp ?? useCreateFormex({
@@ -15595,10 +16054,10 @@ function EntityForm({
       onValuesModified?.(false, initialValues_0);
     },
     onValuesChangeDeferred: (values_0, controller) => {
-      const key_0 = status === "new" || status === "copy" ? path + "#new" : path + "/" + entityId;
+      const key = status === "new" || status === "copy" ? path + "#new" : path + "/" + entityId;
       if (controller.dirty) {
         const touchedValues = extractTouchedValues(values_0, controller.touched);
-        saveEntityToCache(key_0, touchedValues);
+        saveEntityToCache(key, touchedValues);
       }
     },
     validation: (values_1) => {
@@ -15832,11 +16291,11 @@ function EntityForm({
   useOnAutoSave(autoSave, formex, lastSavedValues, save);
   useEffect(() => {
     if (!autoSave && !formex.isSubmitting && underlyingChanges && entity) {
-      Object.entries(underlyingChanges).forEach(([key_1, value_0]) => {
-        const formValue = formex.values[key_1];
-        if (!equal(value_0, formValue) && !formex.touched[key_1]) {
-          console.debug("Updated value from the datasource:", key_1, value_0);
-          formex.setFieldValue(key_1, value_0 !== void 0 ? value_0 : null);
+      Object.entries(underlyingChanges).forEach(([key_0, value_0]) => {
+        const formValue = formex.values[key_0];
+        if (!equal(value_0, formValue) && !formex.touched[key_0]) {
+          console.debug("Updated value from the datasource:", key_0, value_0);
+          formex.setFieldValue(key_0, value_0 !== void 0 ? value_0 : null);
         }
       });
     }
@@ -15846,16 +16305,16 @@ function EntityForm({
     if (Builder) {
       return /* @__PURE__ */ jsx(Builder, { collection, entity, modifiedValues: formex.values, formContext });
     }
-    return /* @__PURE__ */ jsx(FormLayout, { children: formFieldKeys.map((key_2) => {
-      const property = resolvedCollection.properties[key_2];
+    return /* @__PURE__ */ jsx(FormLayout, { children: formFieldKeys.map((key_1) => {
+      const property = resolvedCollection.properties[key_1];
       if (property) {
-        const underlyingValueHasChanged = !!underlyingChanges && Object.keys(underlyingChanges).includes(key_2) && formex.touched[key_2];
+        const underlyingValueHasChanged = !!underlyingChanges && Object.keys(underlyingChanges).includes(key_1) && formex.touched[key_1];
         const disabled_0 = disabledProp || !autoSave && formex.isSubmitting || isReadOnly(property) || Boolean(property.disabled);
         const hidden = isHidden(property);
         if (hidden) return null;
         const widthPercentage = property.widthPercentage ?? 100;
         const cmsFormFieldProps = {
-          propertyKey: key_2,
+          propertyKey: key_1,
           disabled: disabled_0,
           property,
           includeDescription: property.description || property.longDescription,
@@ -15865,9 +16324,9 @@ function EntityForm({
           minimalistView: false,
           autoFocus: false
         };
-        return /* @__PURE__ */ jsx(FormEntry, { propertyKey: key_2, widthPercentage, children: /* @__PURE__ */ jsx(PropertyFieldBinding, { ...cmsFormFieldProps }) }, `field_${key_2}`);
+        return /* @__PURE__ */ jsx(FormEntry, { propertyKey: key_1, widthPercentage, children: /* @__PURE__ */ jsx(PropertyFieldBinding, { ...cmsFormFieldProps }) }, `field_${key_1}`);
       }
-      const additionalField = resolvedCollection.additionalFields?.find((f) => f.key === key_2);
+      const additionalField = resolvedCollection.additionalFields?.find((f) => f.key === key_1);
       if (additionalField && entity) {
         const Builder_0 = additionalField.Builder;
         if (!Builder_0 && !additionalField.value) {
@@ -15878,11 +16337,11 @@ function EntityForm({
           context
         })?.toString() });
         return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
-          /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey: key_2, icon: /* @__PURE__ */ jsx(NotesIcon, { size: "small" }), title: additionalField.name, className: "text-text-secondary dark:text-text-secondary-dark ml-3.5" }),
+          /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey: key_1, icon: /* @__PURE__ */ jsx(NotesIcon, { size: "small" }), title: additionalField.name, className: "text-text-secondary dark:text-text-secondary-dark ml-3.5" }),
           /* @__PURE__ */ jsx("div", { className: cls(paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar"), children: /* @__PURE__ */ jsx(ErrorBoundary, { children: child }) })
-        ] }, `additional_${key_2}`);
+        ] }, `additional_${key_1}`);
       }
-      console.warn(`Property ${key_2} not found in collection ${resolvedCollection.name} in properties or additional fields. Skipping.`);
+      console.warn(`Property ${key_1} not found in collection ${resolvedCollection.name} in properties or additional fields. Skipping.`);
       return null;
     }).filter(Boolean) });
   };
@@ -26559,6 +27018,7 @@ export {
   isEnumValueDisabled,
   isHidden,
   isObject,
+  isPlainObject,
   isPropertyBuilder,
   isReadOnly,
   isReferenceProperty,