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

package/dist/index.umd.js

@@ -28,8 +28,140 @@
   const useCollectionEditorController = () => {
     return React.useContext(CollectionEditorContext);
   };
+  function LayoutModeSwitch(t0) {
+    const $ = reactCompilerRuntime.c(28);
+    const {
+      value,
+      onChange,
+      className
+    } = t0;
+    let t1;
+    if ($[0] !== className) {
+      t1 = ui.cls(className);
+      $[0] = className;
+      $[1] = t1;
+    } else {
+      t1 = $[1];
+    }
+    let t2;
+    let t3;
+    if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+      t2 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "label", color: "secondary", className: "ml-3.5", children: "Document view" });
+      t3 = ui.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 = ui.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__ */ jsxRuntime.jsx(ui.VerticalSplitIcon, {});
+      t8 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "label", children: "Side panel" });
+      $[8] = t7;
+      $[9] = t8;
+    } else {
+      t7 = $[8];
+      t8 = $[9];
+    }
+    let t9;
+    if ($[10] !== t4 || $[11] !== t6) {
+      t9 = /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Documents are open in a side panel", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.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 = ui.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__ */ jsxRuntime.jsx(ui.SquareIcon, {});
+      t14 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "label", children: "Full screen" });
+      $[17] = t13;
+      $[18] = t14;
+    } else {
+      t13 = $[17];
+      t14 = $[18];
+    }
+    let t15;
+    if ($[19] !== t10 || $[20] !== t12) {
+      t15 = /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Documents are open full-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: t1, children: [
+        t2,
+        t16
+      ] });
+      $[25] = t1;
+      $[26] = t16;
+      $[27] = t17;
+    } else {
+      t17 = $[27];
+    }
+    return t17;
+  }
   function CollectionDetailsForm(t0) {
-    const $ = reactCompilerRuntime.c(168);
+    const $ = reactCompilerRuntime.c(174);
     const {
       isNewCollection,
       reservedGroups,
@@ -318,235 +450,253 @@
       }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow", children: group_0 }) }, index + "_" + group_0)) }),
       /* @__PURE__ */ jsxRuntime.jsx(core.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-row text-surface-500", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.SettingsIcon, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(formex.Field, { name: "id", as: ui.DebouncedTextField, disabled: t39, label: "Collection id", error: t40 });
-      $[56] = t39;
-      $[57] = t40;
-      $[58] = t41;
+    if ($[60] === Symbol.for("react.memo_cache_sentinel")) {
+      t41 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row text-surface-500", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.SettingsIcon, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(core.FieldCaption, { error: t42, children: t43 });
-      $[59] = t42;
-      $[60] = t43;
-      $[61] = t44;
-    } else {
-      t44 = $[61];
-    }
-    let t45;
-    if ($[62] !== t41 || $[63] !== t44) {
-      t45 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
-        t41,
-        t44
-      ] });
-      $[62] = t41;
+    if ($[61] !== t42 || $[62] !== t43) {
+      t44 = /* @__PURE__ */ jsxRuntime.jsx(formex.Field, { name: "id", as: ui.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__ */ jsxRuntime.jsx(core.FieldCaption, { error: t45, children: t46 });
+      $[64] = t45;
+      $[65] = t46;
+      $[66] = t47;
+    } else {
+      t47 = $[66];
+    }
+    let t48;
+    if ($[67] !== t44 || $[68] !== t47) {
+      t48 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(core.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__ */ jsxRuntime.jsx(core.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__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
-        t49,
-        t52
+    let t56;
+    if ($[80] !== t52 || $[81] !== t55) {
+      t56 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.CloseIcon, { size: "small" });
-      $[83] = t58;
-    } else {
-      t58 = $[83];
-    }
-    let t59;
-    if ($[84] !== t56 || $[85] !== t57) {
-      t59 = /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(core.FieldCaption, { error: t62, children: t63 });
-      $[92] = t62;
-      $[93] = t63;
-      $[94] = t64;
-    } else {
-      t64 = $[94];
-    }
-    let t65;
-    if ($[95] !== t61 || $[96] !== t64) {
-      t65 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
-        t61,
-        t64
-      ] });
-      $[95] = t61;
+    if ($[92] !== t57 || $[93] !== t58 || $[94] !== t62 || $[95] !== t63) {
+      t64 = /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(core.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(core.FieldCaption, { error: t69, children: t70 });
-      $[102] = t69;
-      $[103] = t70;
-      $[104] = t71;
-    } else {
-      t71 = $[104];
-    }
-    let t72;
-    if ($[105] !== t68 || $[106] !== t71) {
-      t72 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
-        t68,
-        t71
-      ] });
-      $[105] = t68;
+    if ($[103] !== handleChange || $[104] !== t69 || $[105] !== t70) {
+      t71 = /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(core.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__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsx(ui.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 {
@@ -563,226 +713,228 @@
           }
         }
       };
-      $[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__ */ jsxRuntime.jsx(ui.SelectItem, { value: "false", children: "Document ID is generated automatically" });
-      t80 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "true", children: "Users must define an ID" });
-      t81 = /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.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__ */ jsxRuntime.jsx(ui.SelectItem, { value: "false", children: "Document ID is generated automatically" });
+      t83 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "true", children: "Users must define an ID" });
+      t84 = /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ui.BooleanSwitchWithLabel, { position: "start", label: "Collection group", onValueChange: t83, value: t84 });
-      $[123] = t83;
-      $[124] = t84;
+    if ($[122] !== t79 || $[123] !== t80 || $[124] !== t81) {
+      t85 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.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__ */ jsxRuntime.jsx(core.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(core.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__ */ jsxRuntime.jsx(ui.BooleanSwitchWithLabel, { position: "start", label: "Enable text search for this collection", onValueChange: t88, value: t89 });
-      $[131] = t88;
-      $[132] = t89;
+    if ($[132] !== t88) {
+      t90 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(core.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__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
-        t90,
-        t91
+    const t92 = values.textSearchEnabled ?? false;
+    let t93;
+    if ($[136] !== t91 || $[137] !== t92) {
+      t93 = /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(core.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx("div", { className: "col-span-12 mt-8", children: /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsxs("div", { className: t19, children: [
+    let t98;
+    if ($[154] !== t27 || $[155] !== t36 || $[156] !== t37 || $[157] !== t40 || $[158] !== t97) {
+      t98 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: {
+    let t99;
+    if ($[160] === Symbol.for("react.memo_cache_sentinel")) {
+      t99 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "p-4 overflow-auto min-h-[200px]", children: /* @__PURE__ */ jsxRuntime.jsx(core.SearchIconsView, { selectedIcon: values.icon, onIconSelected: t97 }) });
-      $[157] = t97;
-      $[158] = values.icon;
-      $[159] = t98;
+    let t101;
+    if ($[163] !== t100 || $[164] !== values.icon) {
+      t101 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 overflow-auto min-h-[200px]", children: /* @__PURE__ */ jsxRuntime.jsx(core.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx("div", { className: t7, children: /* @__PURE__ */ jsxRuntime.jsxs(T0, { maxWidth: t8, className: t9, children: [
+    let t103;
+    if ($[169] !== T0 || $[170] !== t102 || $[171] !== t18 || $[172] !== t98) {
+      t103 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t7, children: /* @__PURE__ */ jsxRuntime.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";
@@ -790,11 +942,11 @@
       }
     }
   }
-  function _temp2$7(value_1) {
-    return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: value_1, children: value_1.toUpperCase() }, `size-select-${value_1}`);
+  function _temp2$7(value_2) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.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 $ = reactCompilerRuntime.c(5);
@@ -1043,7 +1195,7 @@
     let t6;
     if ($[15] !== allowDataInference || $[16] !== disabled || $[17] !== inferValues || $[18] !== inferring) {
       t6 = allowDataInference && /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { loading: inferring, disabled: disabled || inferring, variant: "text", size: "small", onClick: inferValues, children: [
-        inferring ? /* @__PURE__ */ jsxRuntime.jsx(ui.CircularProgress, { size: "small" }) : /* @__PURE__ */ jsxRuntime.jsx(ui.AutorenewIcon, {}),
+        inferring ? /* @__PURE__ */ jsxRuntime.jsx(ui.CircularProgress, { size: "smallest" }) : /* @__PURE__ */ jsxRuntime.jsx(ui.AutorenewIcon, {}),
         "Infer values from data"
       ] });
       $[15] = allowDataInference;
@@ -8709,7 +8861,7 @@
     }
     let t8;
     if ($[13] !== properties || $[14] !== selectionController || $[15] !== t5 || $[16] !== t7) {
-      t8 = /* @__PURE__ */ jsxRuntime.jsx(core.EntityCollectionTable, { title: t4, tableController: t5, endAdornment: t6, filterable: false, sortable: false, selectionController, displayedColumnIds: t7, properties, enablePopupIcon: false });
+      t8 = /* @__PURE__ */ jsxRuntime.jsx(core.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;
@@ -9176,7 +9328,7 @@
     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) {
@@ -9215,7 +9367,7 @@
     const editable = collection?.editable === void 0 || collection?.editable === true;
     const collectionEditable = editable || isNewCollection;
     return /* @__PURE__ */ jsxRuntime.jsx(ui.DialogContent, { fullHeight: true, children: /* @__PURE__ */ jsxRuntime.jsx(formex.Formex, { value: formController, children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      !isNewCollection && /* @__PURE__ */ jsxRuntime.jsxs(ui.Tabs, { value: currentView, innerClassName: ui.cls(ui.defaultBorderMixin, "justify-end bg-surface-50 dark:bg-surface-950 border-b"), onValueChange: (v) => setCurrentView(v), children: [
+      !isNewCollection && /* @__PURE__ */ jsxRuntime.jsxs(ui.Tabs, { value: currentView, innerClassName: ui.cls(ui.defaultBorderMixin, "px-4 h-14 w-full justify-end bg-surface-50 dark:bg-surface-950 border-b"), onValueChange: (v) => setCurrentView(v), children: [
         /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { value: "details", children: "Details" }),
         /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { value: "properties", children: "Properties" }),
         /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { value: "subcollections", children: "Additional views" })
@@ -9546,7 +9698,7 @@
     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;