@firecms/collection_editor 3.0.0-canary.168 → 3.0.0-canary.169

package/dist/index.es.js

@@ -4,7 +4,7 @@ import { FieldCaption, SearchIconsView, toSnakeCase, singular, IconForView, Arra
 import * as React from "react";
 import React__default, { useContext, useState, useEffect, useMemo, useRef, useDeferredValue } from "react";
 import equal from "react-fast-compare";
-import { useAutoComplete, Chip, Typography, cls, TextField, Autocomplete, AutocompleteItem, SelectItem, Container, Tooltip, IconButton, DebouncedTextField, SettingsIcon, CloseIcon, Select, BooleanSwitchWithLabel, ExpandablePanel, Dialog, Badge, AutorenewIcon, ListIcon, Button, CircularProgress, Paper, DialogTitle, DialogContent, DialogActions, RuleIcon, MultiSelectItem, CloudUploadIcon, MultiSelect, cardMixin, cardClickableMixin, cardSelectedMixin, FunctionsIcon, DoNotDisturbOnIcon, defaultBorderMixin, RemoveIcon, DragHandleIcon, AddIcon, SelectGroup, DeleteIcon, InfoLabel, fieldBackgroundMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, WarningIcon, Card, ContentCopyIcon, CodeIcon, Table, TableBody, TableRow, TableCell, Alert, Icon, coolIconKeys, Tabs, Tab, ArrowBackIcon, LoadingButton, CheckIcon, Menu, MoreVertIcon, MenuItem, UndoIcon, SaveIcon } from "@firecms/ui";
+import { cls, Typography, VerticalSplitIcon, Tooltip, Card, SquareIcon, useAutoComplete, Chip, TextField, Autocomplete, AutocompleteItem, SelectItem, Container, IconButton, DebouncedTextField, SettingsIcon, CloseIcon, Select, BooleanSwitchWithLabel, ExpandablePanel, Dialog, Badge, AutorenewIcon, ListIcon, Button, CircularProgress, Paper, DialogTitle, DialogContent, DialogActions, RuleIcon, MultiSelectItem, CloudUploadIcon, MultiSelect, cardMixin, cardClickableMixin, cardSelectedMixin, FunctionsIcon, DoNotDisturbOnIcon, defaultBorderMixin, RemoveIcon, DragHandleIcon, AddIcon, SelectGroup, DeleteIcon, InfoLabel, fieldBackgroundMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, WarningIcon, ContentCopyIcon, CodeIcon, Table, TableBody, TableRow, TableCell, Alert, Icon, coolIconKeys, Tabs, Tab, ArrowBackIcon, LoadingButton, CheckIcon, Menu, MoreVertIcon, MenuItem, UndoIcon, SaveIcon } from "@firecms/ui";
 import * as Yup from "yup";
 import { useFormex, getIn, Field, useCreateFormex, Formex, clone } from "@firecms/formex";
 import { extractEnumFromValues, buildPropertyFromData, buildEntityPropertiesFromData } from "@firecms/schema_inference";
@@ -21,8 +21,140 @@ const YupSchema = Yup.object().shape({
 const useCollectionEditorController = () => {
   return useContext(CollectionEditorContext);
 };
+function LayoutModeSwitch(t0) {
+  const $ = c(28);
+  const {
+    value,
+    onChange,
+    className
+  } = t0;
+  let t1;
+  if ($[0] !== className) {
+    t1 = cls(className);
+    $[0] = className;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  let t3;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = /* @__PURE__ */ jsx(Typography, { variant: "label", color: "secondary", className: "ml-3.5", children: "Document view" });
+    t3 = cls("flex flex-row gap-4");
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t2 = $[2];
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== onChange) {
+    t4 = () => onChange("side_panel");
+    $[4] = onChange;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  const t5 = value === "side_panel" ? "border-primary dark:border-primary" : "border-surface-400 dark:border-surface-600";
+  let t6;
+  if ($[6] !== t5) {
+    t6 = cls("my-2 rounded-md mx-0 p-4 focus:outline-none transition ease-in-out duration-150 flex flex-row gap-4 items-center", "text-surface-700 dark:text-surface-accent-300", "hover:text-primary-dark dark:hover:text-primary focus:ring-primary hover:ring-1 hover:ring-primary", t5);
+    $[6] = t5;
+    $[7] = t6;
+  } else {
+    t6 = $[7];
+  }
+  let t7;
+  let t8;
+  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = /* @__PURE__ */ jsx(VerticalSplitIcon, {});
+    t8 = /* @__PURE__ */ jsx(Typography, { variant: "label", children: "Side panel" });
+    $[8] = t7;
+    $[9] = t8;
+  } else {
+    t7 = $[8];
+    t8 = $[9];
+  }
+  let t9;
+  if ($[10] !== t4 || $[11] !== t6) {
+    t9 = /* @__PURE__ */ jsx(Tooltip, { title: "Documents are open in a side panel", children: /* @__PURE__ */ jsxs(Card, { onClick: t4, className: t6, children: [
+      t7,
+      t8
+    ] }) });
+    $[10] = t4;
+    $[11] = t6;
+    $[12] = t9;
+  } else {
+    t9 = $[12];
+  }
+  let t10;
+  if ($[13] !== onChange) {
+    t10 = () => onChange("full_screen");
+    $[13] = onChange;
+    $[14] = t10;
+  } else {
+    t10 = $[14];
+  }
+  const t11 = value === "full_screen" ? "border-primary dark:border-primary" : "border-surface-400 dark:border-surface-600";
+  let t12;
+  if ($[15] !== t11) {
+    t12 = cls("my-2 rounded-md mx-0 p-4 focus:outline-none transition ease-in-out duration-150 flex flex-row gap-4 items-center", "text-surface-700 dark:text-surface-accent-300", "hover:text-primary-dark dark:hover:text-primary focus:ring-primary hover:ring-1 hover:ring-primary", t11);
+    $[15] = t11;
+    $[16] = t12;
+  } else {
+    t12 = $[16];
+  }
+  let t13;
+  let t14;
+  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+    t13 = /* @__PURE__ */ jsx(SquareIcon, {});
+    t14 = /* @__PURE__ */ jsx(Typography, { variant: "label", children: "Full screen" });
+    $[17] = t13;
+    $[18] = t14;
+  } else {
+    t13 = $[17];
+    t14 = $[18];
+  }
+  let t15;
+  if ($[19] !== t10 || $[20] !== t12) {
+    t15 = /* @__PURE__ */ jsx(Tooltip, { title: "Documents are open full-screen", children: /* @__PURE__ */ jsxs(Card, { onClick: t10, className: t12, children: [
+      t13,
+      t14
+    ] }) });
+    $[19] = t10;
+    $[20] = t12;
+    $[21] = t15;
+  } else {
+    t15 = $[21];
+  }
+  let t16;
+  if ($[22] !== t15 || $[23] !== t9) {
+    t16 = /* @__PURE__ */ jsxs("div", { className: t3, children: [
+      t9,
+      t15
+    ] });
+    $[22] = t15;
+    $[23] = t9;
+    $[24] = t16;
+  } else {
+    t16 = $[24];
+  }
+  let t17;
+  if ($[25] !== t1 || $[26] !== t16) {
+    t17 = /* @__PURE__ */ jsxs("div", { className: t1, children: [
+      t2,
+      t16
+    ] });
+    $[25] = t1;
+    $[26] = t16;
+    $[27] = t17;
+  } else {
+    t17 = $[27];
+  }
+  return t17;
+}
 function CollectionDetailsForm(t0) {
-  const $ = c(168);
+  const $ = c(174);
   const {
     isNewCollection,
     reservedGroups,
@@ -311,235 +443,253 @@ function CollectionDetailsForm(t0) {
     }, children: /* @__PURE__ */ jsx("div", { className: "flex-grow", children: group_0 }) }, index + "_" + group_0)) }),
     /* @__PURE__ */ jsx(FieldCaption, { children: showErrors && Boolean(errors.group) ? errors.group : "Group in the home page" })
   ] });
-  let t38;
-  if ($[55] === Symbol.for("react.memo_cache_sentinel")) {
-    t38 = /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-surface-500", children: [
-      /* @__PURE__ */ jsx(SettingsIcon, {}),
-      /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: "ml-2", children: "Advanced" })
-    ] });
-    $[55] = t38;
+  const t38 = values.openEntityMode ?? "side_panel";
+  let t39;
+  if ($[55] !== setFieldValue) {
+    t39 = (value) => setFieldValue("openEntityMode", value);
+    $[55] = setFieldValue;
+    $[56] = t39;
+  } else {
+    t39 = $[56];
+  }
+  let t40;
+  if ($[57] !== t38 || $[58] !== t39) {
+    t40 = /* @__PURE__ */ jsx(LayoutModeSwitch, { className: "col-span-12", value: t38, onChange: t39 });
+    $[57] = t38;
+    $[58] = t39;
+    $[59] = t40;
   } else {
-    t38 = $[55];
+    t40 = $[59];
   }
-  const t39 = !isNewCollection;
-  const t40 = showErrors && Boolean(errors.id);
   let t41;
-  if ($[56] !== t39 || $[57] !== t40) {
-    t41 = /* @__PURE__ */ jsx(Field, { name: "id", as: DebouncedTextField, disabled: t39, label: "Collection id", error: t40 });
-    $[56] = t39;
-    $[57] = t40;
-    $[58] = t41;
+  if ($[60] === Symbol.for("react.memo_cache_sentinel")) {
+    t41 = /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-surface-500", children: [
+      /* @__PURE__ */ jsx(SettingsIcon, {}),
+      /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: "ml-2", children: "Advanced" })
+    ] });
+    $[60] = t41;
   } else {
-    t41 = $[58];
+    t41 = $[60];
   }
-  const t42 = touched.id && Boolean(errors.id);
-  const t43 = touched.id && Boolean(errors.id) ? errors.id : "This id identifies this collection. Typically the same as the path.";
+  const t42 = !isNewCollection;
+  const t43 = showErrors && Boolean(errors.id);
   let t44;
-  if ($[59] !== t42 || $[60] !== t43) {
-    t44 = /* @__PURE__ */ jsx(FieldCaption, { error: t42, children: t43 });
-    $[59] = t42;
-    $[60] = t43;
-    $[61] = t44;
-  } else {
-    t44 = $[61];
-  }
-  let t45;
-  if ($[62] !== t41 || $[63] !== t44) {
-    t45 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-      t41,
-      t44
-    ] });
-    $[62] = t41;
+  if ($[61] !== t42 || $[62] !== t43) {
+    t44 = /* @__PURE__ */ jsx(Field, { name: "id", as: DebouncedTextField, disabled: t42, label: "Collection id", error: t43 });
+    $[61] = t42;
+    $[62] = t43;
     $[63] = t44;
-    $[64] = t45;
   } else {
-    t45 = $[64];
+    t44 = $[63];
   }
-  const t46 = showErrors && Boolean(errors.singularName);
+  const t45 = touched.id && Boolean(errors.id);
+  const t46 = touched.id && Boolean(errors.id) ? errors.id : "This id identifies this collection. Typically the same as the path.";
   let t47;
-  if ($[65] !== handleChange || $[66] !== setFieldTouched) {
-    t47 = (e_0) => {
+  if ($[64] !== t45 || $[65] !== t46) {
+    t47 = /* @__PURE__ */ jsx(FieldCaption, { error: t45, children: t46 });
+    $[64] = t45;
+    $[65] = t46;
+    $[66] = t47;
+  } else {
+    t47 = $[66];
+  }
+  let t48;
+  if ($[67] !== t44 || $[68] !== t47) {
+    t48 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t44,
+      t47
+    ] });
+    $[67] = t44;
+    $[68] = t47;
+    $[69] = t48;
+  } else {
+    t48 = $[69];
+  }
+  const t49 = showErrors && Boolean(errors.singularName);
+  let t50;
+  if ($[70] !== handleChange || $[71] !== setFieldTouched) {
+    t50 = (e_0) => {
       setFieldTouched("singularName", true);
       return handleChange(e_0);
     };
-    $[65] = handleChange;
-    $[66] = setFieldTouched;
-    $[67] = t47;
+    $[70] = handleChange;
+    $[71] = setFieldTouched;
+    $[72] = t50;
   } else {
-    t47 = $[67];
+    t50 = $[72];
   }
-  const t48 = values.singularName ?? "";
-  let t49;
-  if ($[68] !== t46 || $[69] !== t47 || $[70] !== t48) {
-    t49 = /* @__PURE__ */ jsx(TextField, { error: t46, name: "singularName", "aria-describedby": "singularName-helper", onChange: t47, value: t48, label: "Singular name" });
-    $[68] = t46;
-    $[69] = t47;
-    $[70] = t48;
-    $[71] = t49;
+  const t51 = values.singularName ?? "";
+  let t52;
+  if ($[73] !== t49 || $[74] !== t50 || $[75] !== t51) {
+    t52 = /* @__PURE__ */ jsx(TextField, { error: t49, name: "singularName", "aria-describedby": "singularName-helper", onChange: t50, value: t51, label: "Singular name" });
+    $[73] = t49;
+    $[74] = t50;
+    $[75] = t51;
+    $[76] = t52;
   } else {
-    t49 = $[71];
+    t52 = $[76];
   }
-  const t50 = showErrors && Boolean(errors.singularName);
-  const t51 = showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define a singular name for your entities";
-  let t52;
-  if ($[72] !== t50 || $[73] !== t51) {
-    t52 = /* @__PURE__ */ jsx(FieldCaption, { error: t50, children: t51 });
-    $[72] = t50;
-    $[73] = t51;
-    $[74] = t52;
+  const t53 = showErrors && Boolean(errors.singularName);
+  const t54 = showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define a singular name for your entities";
+  let t55;
+  if ($[77] !== t53 || $[78] !== t54) {
+    t55 = /* @__PURE__ */ jsx(FieldCaption, { error: t53, children: t54 });
+    $[77] = t53;
+    $[78] = t54;
+    $[79] = t55;
   } else {
-    t52 = $[74];
+    t55 = $[79];
   }
-  let t53;
-  if ($[75] !== t49 || $[76] !== t52) {
-    t53 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-      t49,
-      t52
+  let t56;
+  if ($[80] !== t52 || $[81] !== t55) {
+    t56 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t52,
+      t55
     ] });
-    $[75] = t49;
-    $[76] = t52;
-    $[77] = t53;
+    $[80] = t52;
+    $[81] = t55;
+    $[82] = t56;
   } else {
-    t53 = $[77];
+    t56 = $[82];
   }
-  const t54 = showErrors && Boolean(errors.sideDialogWidth);
-  let t55;
-  if ($[78] !== setFieldTouched || $[79] !== setFieldValue) {
-    t55 = (e_1) => {
+  const t57 = showErrors && Boolean(errors.sideDialogWidth);
+  let t58;
+  if ($[83] !== setFieldTouched || $[84] !== setFieldValue) {
+    t58 = (e_1) => {
       setFieldTouched("sideDialogWidth", true);
-      const value = e_1.target.value;
-      if (!value) {
+      const value_0 = e_1.target.value;
+      if (!value_0) {
         setFieldValue("sideDialogWidth", null);
       } else {
-        if (!isNaN(Number(value))) {
-          setFieldValue("sideDialogWidth", Number(value));
+        if (!isNaN(Number(value_0))) {
+          setFieldValue("sideDialogWidth", Number(value_0));
         }
       }
     };
-    $[78] = setFieldTouched;
-    $[79] = setFieldValue;
-    $[80] = t55;
+    $[83] = setFieldTouched;
+    $[84] = setFieldValue;
+    $[85] = t58;
   } else {
-    t55 = $[80];
+    t58 = $[85];
   }
-  let t56;
-  if ($[81] !== setFieldValue) {
-    t56 = () => {
+  let t59;
+  if ($[86] !== setFieldValue) {
+    t59 = () => {
       setFieldValue("sideDialogWidth", null);
     };
-    $[81] = setFieldValue;
-    $[82] = t56;
+    $[86] = setFieldValue;
+    $[87] = t59;
   } else {
-    t56 = $[82];
+    t59 = $[87];
   }
-  const t57 = !values.sideDialogWidth;
-  let t58;
-  if ($[83] === Symbol.for("react.memo_cache_sentinel")) {
-    t58 = /* @__PURE__ */ jsx(CloseIcon, { size: "small" });
-    $[83] = t58;
-  } else {
-    t58 = $[83];
-  }
-  let t59;
-  if ($[84] !== t56 || $[85] !== t57) {
-    t59 = /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: t56, disabled: t57, children: t58 });
-    $[84] = t56;
-    $[85] = t57;
-    $[86] = t59;
+  const t60 = !values.sideDialogWidth;
+  let t61;
+  if ($[88] === Symbol.for("react.memo_cache_sentinel")) {
+    t61 = /* @__PURE__ */ jsx(CloseIcon, { size: "small" });
+    $[88] = t61;
   } else {
-    t59 = $[86];
+    t61 = $[88];
   }
-  const t60 = values.sideDialogWidth ?? "";
-  let t61;
-  if ($[87] !== t54 || $[88] !== t55 || $[89] !== t59 || $[90] !== t60) {
-    t61 = /* @__PURE__ */ jsx(TextField, { error: t54, name: "sideDialogWidth", type: "number", "aria-describedby": "sideDialogWidth-helper", onChange: t55, endAdornment: t59, value: t60, label: "Side dialog width" });
-    $[87] = t54;
-    $[88] = t55;
+  let t62;
+  if ($[89] !== t59 || $[90] !== t60) {
+    t62 = /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: t59, disabled: t60, children: t61 });
     $[89] = t59;
     $[90] = t60;
-    $[91] = t61;
+    $[91] = t62;
   } else {
-    t61 = $[91];
+    t62 = $[91];
   }
-  const t62 = showErrors && Boolean(errors.singularName);
-  const t63 = showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define the width (in pixels) of entities side dialog. Default is 768px";
+  const t63 = values.sideDialogWidth ?? "";
   let t64;
-  if ($[92] !== t62 || $[93] !== t63) {
-    t64 = /* @__PURE__ */ jsx(FieldCaption, { error: t62, children: t63 });
-    $[92] = t62;
-    $[93] = t63;
-    $[94] = t64;
-  } else {
-    t64 = $[94];
-  }
-  let t65;
-  if ($[95] !== t61 || $[96] !== t64) {
-    t65 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-      t61,
-      t64
-    ] });
-    $[95] = t61;
+  if ($[92] !== t57 || $[93] !== t58 || $[94] !== t62 || $[95] !== t63) {
+    t64 = /* @__PURE__ */ jsx(TextField, { error: t57, name: "sideDialogWidth", type: "number", "aria-describedby": "sideDialogWidth-helper", onChange: t58, endAdornment: t62, value: t63, label: "Side dialog width" });
+    $[92] = t57;
+    $[93] = t58;
+    $[94] = t62;
+    $[95] = t63;
     $[96] = t64;
+  } else {
+    t64 = $[96];
+  }
+  const t65 = showErrors && Boolean(errors.singularName);
+  const t66 = showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define the width (in pixels) of entities side dialog. Default is 768px";
+  let t67;
+  if ($[97] !== t65 || $[98] !== t66) {
+    t67 = /* @__PURE__ */ jsx(FieldCaption, { error: t65, children: t66 });
     $[97] = t65;
+    $[98] = t66;
+    $[99] = t67;
   } else {
-    t65 = $[97];
+    t67 = $[99];
   }
-  const t66 = showErrors && Boolean(errors.description);
-  const t67 = values.description ?? "";
   let t68;
-  if ($[98] !== handleChange || $[99] !== t66 || $[100] !== t67) {
-    t68 = /* @__PURE__ */ jsx(TextField, { error: t66, name: "description", value: t67, onChange: handleChange, multiline: true, rows: 2, "aria-describedby": "description-helper-text", label: "Description" });
-    $[98] = handleChange;
-    $[99] = t66;
-    $[100] = t67;
-    $[101] = t68;
+  if ($[100] !== t64 || $[101] !== t67) {
+    t68 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t64,
+      t67
+    ] });
+    $[100] = t64;
+    $[101] = t67;
+    $[102] = t68;
   } else {
-    t68 = $[101];
+    t68 = $[102];
   }
   const t69 = showErrors && Boolean(errors.description);
-  const t70 = showErrors && Boolean(errors.description) ? errors.description : "Description of the collection, you can use markdown";
+  const t70 = values.description ?? "";
   let t71;
-  if ($[102] !== t69 || $[103] !== t70) {
-    t71 = /* @__PURE__ */ jsx(FieldCaption, { error: t69, children: t70 });
-    $[102] = t69;
-    $[103] = t70;
-    $[104] = t71;
-  } else {
-    t71 = $[104];
-  }
-  let t72;
-  if ($[105] !== t68 || $[106] !== t71) {
-    t72 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-      t68,
-      t71
-    ] });
-    $[105] = t68;
+  if ($[103] !== handleChange || $[104] !== t69 || $[105] !== t70) {
+    t71 = /* @__PURE__ */ jsx(TextField, { error: t69, name: "description", value: t70, onChange: handleChange, multiline: true, rows: 2, "aria-describedby": "description-helper-text", label: "Description" });
+    $[103] = handleChange;
+    $[104] = t69;
+    $[105] = t70;
     $[106] = t71;
-    $[107] = t72;
   } else {
-    t72 = $[107];
+    t71 = $[106];
   }
-  const t73 = values.defaultSize ?? "";
+  const t72 = showErrors && Boolean(errors.description);
+  const t73 = showErrors && Boolean(errors.description) ? errors.description : "Description of the collection, you can use markdown";
   let t74;
-  if ($[108] === Symbol.for("react.memo_cache_sentinel")) {
-    t74 = ["xs", "s", "m", "l", "xl"].map(_temp2$7);
-    $[108] = t74;
+  if ($[107] !== t72 || $[108] !== t73) {
+    t74 = /* @__PURE__ */ jsx(FieldCaption, { error: t72, children: t73 });
+    $[107] = t72;
+    $[108] = t73;
+    $[109] = t74;
   } else {
-    t74 = $[108];
+    t74 = $[109];
   }
   let t75;
-  if ($[109] !== handleChange || $[110] !== t73) {
-    t75 = /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(Select, { name: "defaultSize", size: "large", fullWidth: true, label: "Default row size", position: "item-aligned", onChange: handleChange, value: t73, renderValue: _temp$b, children: t74 }) });
-    $[109] = handleChange;
-    $[110] = t73;
-    $[111] = t75;
+  if ($[110] !== t71 || $[111] !== t74) {
+    t75 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t71,
+      t74
+    ] });
+    $[110] = t71;
+    $[111] = t74;
+    $[112] = t75;
   } else {
-    t75 = $[111];
+    t75 = $[112];
   }
-  const t76 = customIdValue === "code_defined";
+  const t76 = values.defaultSize ?? "";
   let t77;
-  if ($[112] !== setFieldValue) {
-    t77 = (v) => {
+  if ($[113] === Symbol.for("react.memo_cache_sentinel")) {
+    t77 = ["xs", "s", "m", "l", "xl"].map(_temp2$7);
+    $[113] = t77;
+  } else {
+    t77 = $[113];
+  }
+  let t78;
+  if ($[114] !== handleChange || $[115] !== t76) {
+    t78 = /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(Select, { name: "defaultSize", size: "large", fullWidth: true, label: "Default row size", position: "item-aligned", onChange: handleChange, value: t76, renderValue: _temp$b, children: t77 }) });
+    $[114] = handleChange;
+    $[115] = t76;
+    $[116] = t78;
+  } else {
+    t78 = $[116];
+  }
+  const t79 = customIdValue === "code_defined";
+  let t80;
+  if ($[117] !== setFieldValue) {
+    t80 = (v) => {
       if (v === "code_defined") {
         throw new Error("This should not happen");
       } else {
@@ -556,226 +706,228 @@ function CollectionDetailsForm(t0) {
         }
       }
     };
-    $[112] = setFieldValue;
-    $[113] = t77;
+    $[117] = setFieldValue;
+    $[118] = t80;
   } else {
-    t77 = $[113];
-  }
-  const t78 = customIdValue ?? "";
-  let t79;
-  let t80;
-  let t81;
-  if ($[114] === Symbol.for("react.memo_cache_sentinel")) {
-    t79 = /* @__PURE__ */ jsx(SelectItem, { value: "false", children: "Document ID is generated automatically" });
-    t80 = /* @__PURE__ */ jsx(SelectItem, { value: "true", children: "Users must define an ID" });
-    t81 = /* @__PURE__ */ jsx(SelectItem, { value: "optional", children: "Users can define an ID, but it is not required" });
-    $[114] = t79;
-    $[115] = t80;
-    $[116] = t81;
-  } else {
-    t79 = $[114];
-    t80 = $[115];
-    t81 = $[116];
+    t80 = $[118];
   }
+  const t81 = customIdValue ?? "";
   let t82;
-  if ($[117] !== t76 || $[118] !== t77 || $[119] !== t78) {
-    t82 = /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxs(Select, { name: "customId", label: "Document IDs generation", position: "item-aligned", size: "large", fullWidth: true, disabled: t76, onValueChange: t77, value: t78, renderValue: _temp3$4, children: [
-      t79,
-      t80,
-      t81
-    ] }) });
-    $[117] = t76;
-    $[118] = t77;
-    $[119] = t78;
-    $[120] = t82;
-  } else {
-    t82 = $[120];
-  }
   let t83;
-  if ($[121] !== setFieldValue) {
-    t83 = (v_0) => setFieldValue("collectionGroup", v_0);
-    $[121] = setFieldValue;
-    $[122] = t83;
-  } else {
-    t83 = $[122];
+  let t84;
+  if ($[119] === Symbol.for("react.memo_cache_sentinel")) {
+    t82 = /* @__PURE__ */ jsx(SelectItem, { value: "false", children: "Document ID is generated automatically" });
+    t83 = /* @__PURE__ */ jsx(SelectItem, { value: "true", children: "Users must define an ID" });
+    t84 = /* @__PURE__ */ jsx(SelectItem, { value: "optional", children: "Users can define an ID, but it is not required" });
+    $[119] = t82;
+    $[120] = t83;
+    $[121] = t84;
+  } else {
+    t82 = $[119];
+    t83 = $[120];
+    t84 = $[121];
   }
-  const t84 = values.collectionGroup ?? false;
   let t85;
-  if ($[123] !== t83 || $[124] !== t84) {
-    t85 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", label: "Collection group", onValueChange: t83, value: t84 });
-    $[123] = t83;
-    $[124] = t84;
+  if ($[122] !== t79 || $[123] !== t80 || $[124] !== t81) {
+    t85 = /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxs(Select, { name: "customId", label: "Document IDs generation", position: "item-aligned", size: "large", fullWidth: true, disabled: t79, onValueChange: t80, value: t81, renderValue: _temp3$4, children: [
+      t82,
+      t83,
+      t84
+    ] }) });
+    $[122] = t79;
+    $[123] = t80;
+    $[124] = t81;
     $[125] = t85;
   } else {
     t85 = $[125];
   }
   let t86;
-  if ($[126] === Symbol.for("react.memo_cache_sentinel")) {
-    t86 = /* @__PURE__ */ jsx(FieldCaption, { children: "A collection group consists of all collections with the same path. This allows you to query over multiple collections at once." });
-    $[126] = t86;
-  } else {
-    t86 = $[126];
-  }
-  let t87;
-  if ($[127] !== t85) {
-    t87 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-      t85,
-      t86
-    ] });
-    $[127] = t85;
-    $[128] = t87;
+  if ($[126] !== setFieldValue) {
+    t86 = (v_0) => setFieldValue("collectionGroup", v_0);
+    $[126] = setFieldValue;
+    $[127] = t86;
   } else {
-    t87 = $[128];
+    t86 = $[127];
   }
+  const t87 = values.collectionGroup ?? false;
   let t88;
-  if ($[129] !== setFieldValue) {
-    t88 = (v_1) => setFieldValue("textSearchEnabled", v_1);
-    $[129] = setFieldValue;
+  if ($[128] !== t86 || $[129] !== t87) {
+    t88 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", label: "Collection group", onValueChange: t86, value: t87 });
+    $[128] = t86;
+    $[129] = t87;
     $[130] = t88;
   } else {
     t88 = $[130];
   }
-  const t89 = values.textSearchEnabled ?? false;
+  let t89;
+  if ($[131] === Symbol.for("react.memo_cache_sentinel")) {
+    t89 = /* @__PURE__ */ jsx(FieldCaption, { children: "A collection group consists of all collections with the same path. This allows you to query over multiple collections at once." });
+    $[131] = t89;
+  } else {
+    t89 = $[131];
+  }
   let t90;
-  if ($[131] !== t88 || $[132] !== t89) {
-    t90 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", label: "Enable text search for this collection", onValueChange: t88, value: t89 });
-    $[131] = t88;
-    $[132] = t89;
+  if ($[132] !== t88) {
+    t90 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t88,
+      t89
+    ] });
+    $[132] = t88;
     $[133] = t90;
   } else {
     t90 = $[133];
   }
   let t91;
-  if ($[134] === Symbol.for("react.memo_cache_sentinel")) {
-    t91 = /* @__PURE__ */ jsx(FieldCaption, { children: "Allow text search for this collection. If you have not specified a text search delegate, this will use the built-in local text search. This is not recommended for large collections, as it may incur in performance and cost issues." });
-    $[134] = t91;
+  if ($[134] !== setFieldValue) {
+    t91 = (v_1) => setFieldValue("textSearchEnabled", v_1);
+    $[134] = setFieldValue;
+    $[135] = t91;
   } else {
-    t91 = $[134];
+    t91 = $[135];
   }
-  let t92;
-  if ($[135] !== t90) {
-    t92 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-      t90,
-      t91
+  const t92 = values.textSearchEnabled ?? false;
+  let t93;
+  if ($[136] !== t91 || $[137] !== t92) {
+    t93 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", label: "Enable text search for this collection", onValueChange: t91, value: t92 });
+    $[136] = t91;
+    $[137] = t92;
+    $[138] = t93;
+  } else {
+    t93 = $[138];
+  }
+  let t94;
+  if ($[139] === Symbol.for("react.memo_cache_sentinel")) {
+    t94 = /* @__PURE__ */ jsx(FieldCaption, { children: "Allow text search for this collection. If you have not specified a text search delegate, this will use the built-in local text search. This is not recommended for large collections, as it may incur in performance and cost issues." });
+    $[139] = t94;
+  } else {
+    t94 = $[139];
+  }
+  let t95;
+  if ($[140] !== t93) {
+    t95 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t93,
+      t94
     ] });
-    $[135] = t90;
-    $[136] = t92;
+    $[140] = t93;
+    $[141] = t95;
   } else {
-    t92 = $[136];
+    t95 = $[141];
   }
-  let t93;
-  if ($[137] !== t45 || $[138] !== t53 || $[139] !== t65 || $[140] !== t72 || $[141] !== t75 || $[142] !== t82 || $[143] !== t87 || $[144] !== t92) {
-    t93 = /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-4 p-4", children: [
-      t45,
-      t53,
-      t65,
-      t72,
+  let t96;
+  if ($[142] !== t48 || $[143] !== t56 || $[144] !== t68 || $[145] !== t75 || $[146] !== t78 || $[147] !== t85 || $[148] !== t90 || $[149] !== t95) {
+    t96 = /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-4 p-4", children: [
+      t48,
+      t56,
+      t68,
       t75,
-      t82,
-      t87,
-      t92
+      t78,
+      t85,
+      t90,
+      t95
     ] });
-    $[137] = t45;
-    $[138] = t53;
-    $[139] = t65;
-    $[140] = t72;
-    $[141] = t75;
-    $[142] = t82;
-    $[143] = t87;
-    $[144] = t92;
-    $[145] = t93;
-  } else {
-    t93 = $[145];
+    $[142] = t48;
+    $[143] = t56;
+    $[144] = t68;
+    $[145] = t75;
+    $[146] = t78;
+    $[147] = t85;
+    $[148] = t90;
+    $[149] = t95;
+    $[150] = t96;
+  } else {
+    t96 = $[150];
   }
-  let t94;
-  if ($[146] !== advancedPanelExpanded || $[147] !== t93) {
-    t94 = /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(ExpandablePanel, { expanded: advancedPanelExpanded, onExpandedChange: setAdvancedPanelExpanded, title: t38, initiallyExpanded: false, children: t93 }) });
-    $[146] = advancedPanelExpanded;
-    $[147] = t93;
-    $[148] = t94;
+  let t97;
+  if ($[151] !== advancedPanelExpanded || $[152] !== t96) {
+    t97 = /* @__PURE__ */ jsx("div", { className: "col-span-12 mt-8", children: /* @__PURE__ */ jsx(ExpandablePanel, { expanded: advancedPanelExpanded, onExpandedChange: setAdvancedPanelExpanded, title: t41, initiallyExpanded: false, children: t96 }) });
+    $[151] = advancedPanelExpanded;
+    $[152] = t96;
+    $[153] = t97;
   } else {
-    t94 = $[148];
+    t97 = $[153];
   }
-  let t95;
-  if ($[149] !== t27 || $[150] !== t36 || $[151] !== t37 || $[152] !== t94) {
-    t95 = /* @__PURE__ */ jsxs("div", { className: t19, children: [
+  let t98;
+  if ($[154] !== t27 || $[155] !== t36 || $[156] !== t37 || $[157] !== t40 || $[158] !== t97) {
+    t98 = /* @__PURE__ */ jsxs("div", { className: t19, children: [
       t27,
       t36,
       t37,
-      t94
+      t40,
+      t97
     ] });
-    $[149] = t27;
-    $[150] = t36;
-    $[151] = t37;
-    $[152] = t94;
-    $[153] = t95;
+    $[154] = t27;
+    $[155] = t36;
+    $[156] = t37;
+    $[157] = t40;
+    $[158] = t97;
+    $[159] = t98;
   } else {
-    t95 = $[153];
+    t98 = $[159];
   }
-  let t96;
-  if ($[154] === Symbol.for("react.memo_cache_sentinel")) {
-    t96 = /* @__PURE__ */ jsx("div", { style: {
+  let t99;
+  if ($[160] === Symbol.for("react.memo_cache_sentinel")) {
+    t99 = /* @__PURE__ */ jsx("div", { style: {
       height: "52px"
     } });
-    $[154] = t96;
+    $[160] = t99;
   } else {
-    t96 = $[154];
+    t99 = $[160];
   }
-  let t97;
-  if ($[155] !== setFieldValue) {
-    t97 = (icon) => {
+  let t100;
+  if ($[161] !== setFieldValue) {
+    t100 = (icon) => {
       setIconDialogOpen(false);
       setFieldValue("icon", icon);
     };
-    $[155] = setFieldValue;
-    $[156] = t97;
+    $[161] = setFieldValue;
+    $[162] = t100;
   } else {
-    t97 = $[156];
+    t100 = $[162];
   }
-  let t98;
-  if ($[157] !== t97 || $[158] !== values.icon) {
-    t98 = /* @__PURE__ */ jsx("div", { className: "p-4 overflow-auto min-h-[200px]", children: /* @__PURE__ */ jsx(SearchIconsView, { selectedIcon: values.icon, onIconSelected: t97 }) });
-    $[157] = t97;
-    $[158] = values.icon;
-    $[159] = t98;
+  let t101;
+  if ($[163] !== t100 || $[164] !== values.icon) {
+    t101 = /* @__PURE__ */ jsx("div", { className: "p-4 overflow-auto min-h-[200px]", children: /* @__PURE__ */ jsx(SearchIconsView, { selectedIcon: values.icon, onIconSelected: t100 }) });
+    $[163] = t100;
+    $[164] = values.icon;
+    $[165] = t101;
   } else {
-    t98 = $[159];
+    t101 = $[165];
   }
-  let t99;
-  if ($[160] !== iconDialogOpen || $[161] !== t98) {
-    t99 = /* @__PURE__ */ jsx(Dialog, { open: iconDialogOpen, onOpenChange: setIconDialogOpen, maxWidth: "xl", fullWidth: true, children: t98 });
-    $[160] = iconDialogOpen;
-    $[161] = t98;
-    $[162] = t99;
+  let t102;
+  if ($[166] !== iconDialogOpen || $[167] !== t101) {
+    t102 = /* @__PURE__ */ jsx(Dialog, { open: iconDialogOpen, onOpenChange: setIconDialogOpen, maxWidth: "xl", fullWidth: true, children: t101 });
+    $[166] = iconDialogOpen;
+    $[167] = t101;
+    $[168] = t102;
   } else {
-    t99 = $[162];
+    t102 = $[168];
   }
-  let t100;
-  if ($[163] !== T0 || $[164] !== t18 || $[165] !== t95 || $[166] !== t99) {
-    t100 = /* @__PURE__ */ jsx("div", { className: t7, children: /* @__PURE__ */ jsxs(T0, { maxWidth: t8, className: t9, children: [
+  let t103;
+  if ($[169] !== T0 || $[170] !== t102 || $[171] !== t18 || $[172] !== t98) {
+    t103 = /* @__PURE__ */ jsx("div", { className: t7, children: /* @__PURE__ */ jsxs(T0, { maxWidth: t8, className: t9, children: [
       t18,
-      t95,
-      t96,
-      t99
+      t98,
+      t99,
+      t102
     ] }) });
-    $[163] = T0;
-    $[164] = t18;
-    $[165] = t95;
-    $[166] = t99;
-    $[167] = t100;
+    $[169] = T0;
+    $[170] = t102;
+    $[171] = t18;
+    $[172] = t98;
+    $[173] = t103;
   } else {
-    t100 = $[167];
+    t103 = $[173];
   }
-  return t100;
+  return t103;
 }
-function _temp3$4(value_2) {
-  if (value_2 === "code_defined") {
+function _temp3$4(value_3) {
+  if (value_3 === "code_defined") {
     return "Code defined";
   } else {
-    if (value_2 === "true") {
+    if (value_3 === "true") {
       return "Users must define an ID";
     } else {
-      if (value_2 === "optional") {
+      if (value_3 === "optional") {
         return "Users can define an ID, but it is not required";
       } else {
         return "Document ID is generated automatically";
@@ -783,11 +935,11 @@ function _temp3$4(value_2) {
     }
   }
 }
-function _temp2$7(value_1) {
-  return /* @__PURE__ */ jsx(SelectItem, { value: value_1, children: value_1.toUpperCase() }, `size-select-${value_1}`);
+function _temp2$7(value_2) {
+  return /* @__PURE__ */ jsx(SelectItem, { value: value_2, children: value_2.toUpperCase() }, `size-select-${value_2}`);
 }
-function _temp$b(value_0) {
-  return value_0.toUpperCase();
+function _temp$b(value_1) {
+  return value_1.toUpperCase();
 }
 function DefaultDatabaseField(t0) {
   const $ = c(5);
@@ -1036,7 +1188,7 @@ function EnumFormFields(t0) {
   let t6;
   if ($[15] !== allowDataInference || $[16] !== disabled || $[17] !== inferValues || $[18] !== inferring) {
     t6 = allowDataInference && /* @__PURE__ */ jsxs(Button, { loading: inferring, disabled: disabled || inferring, variant: "text", size: "small", onClick: inferValues, children: [
-      inferring ? /* @__PURE__ */ jsx(CircularProgress, { size: "small" }) : /* @__PURE__ */ jsx(AutorenewIcon, {}),
+      inferring ? /* @__PURE__ */ jsx(CircularProgress, { size: "smallest" }) : /* @__PURE__ */ jsx(AutorenewIcon, {}),
       "Infer values from data"
     ] });
     $[15] = allowDataInference;
@@ -8702,7 +8854,7 @@ function CollectionEditorImportDataPreview(t0) {
   }
   let t8;
   if ($[13] !== properties || $[14] !== selectionController || $[15] !== t5 || $[16] !== t7) {
-    t8 = /* @__PURE__ */ jsx(EntityCollectionTable, { title: t4, tableController: t5, endAdornment: t6, filterable: false, sortable: false, selectionController, displayedColumnIds: t7, properties, enablePopupIcon: false });
+    t8 = /* @__PURE__ */ jsx(EntityCollectionTable, { title: t4, tableController: t5, endAdornment: t6, filterable: false, sortable: false, selectionController, displayedColumnIds: t7, openEntityMode: "side_panel", properties, enablePopupIcon: false });
     $[13] = properties;
     $[14] = selectionController;
     $[15] = t5;
@@ -9169,7 +9321,7 @@ function CollectionEditorInternal({
   const updatedFullPath = fullPath?.includes("/") ? fullPath?.split("/").slice(0, -1).join("/") + "/" + path : path;
   const pathError_0 = validatePath(path, isNewCollection, existingPaths, values_1.id);
   const parentPaths = !pathError_0 && parentCollectionIds ? navigation.convertIdsToPaths(parentCollectionIds) : void 0;
-  const resolvedPath = !pathError_0 ? navigation.resolveAliasesFrom(updatedFullPath) : void 0;
+  const resolvedPath = !pathError_0 ? navigation.resolveIdsFrom(updatedFullPath) : void 0;
   const getDataWithPath = resolvedPath && getData ? async () => {
     const data = await getData(resolvedPath, parentPaths ?? []);
     if (existingEntities) {
@@ -9208,7 +9360,7 @@ function CollectionEditorInternal({
   const editable = collection?.editable === void 0 || collection?.editable === true;
   const collectionEditable = editable || isNewCollection;
   return /* @__PURE__ */ jsx(DialogContent, { fullHeight: true, children: /* @__PURE__ */ jsx(Formex, { value: formController, children: /* @__PURE__ */ jsxs(Fragment, { children: [
-    !isNewCollection && /* @__PURE__ */ jsxs(Tabs, { value: currentView, innerClassName: cls(defaultBorderMixin, "justify-end bg-surface-50 dark:bg-surface-950 border-b"), onValueChange: (v) => setCurrentView(v), children: [
+    !isNewCollection && /* @__PURE__ */ jsxs(Tabs, { value: currentView, innerClassName: cls(defaultBorderMixin, "px-4 h-14 w-full justify-end bg-surface-50 dark:bg-surface-950 border-b"), onValueChange: (v) => setCurrentView(v), children: [
       /* @__PURE__ */ jsx(Tab, { value: "details", children: "Details" }),
       /* @__PURE__ */ jsx(Tab, { value: "properties", children: "Properties" }),
       /* @__PURE__ */ jsx(Tab, { value: "subcollections", children: "Additional views" })
@@ -9539,7 +9691,7 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
   if ($[28] !== currentPropertyDialog || $[29] !== getData || $[30] !== navigation) {
     t14 = getData && currentPropertyDialog?.editedCollectionId ? () => {
       console.debug("get data for property", currentPropertyDialog?.editedCollectionId);
-      const resolvedPath = navigation.resolveAliasesFrom(currentPropertyDialog.editedCollectionId);
+      const resolvedPath = navigation.resolveIdsFrom(currentPropertyDialog.editedCollectionId);
       return getData(resolvedPath, []);
     } : void 0;
     $[28] = currentPropertyDialog;