@rebasepro/cms 0.0.1-canary.4d4fb3e

package/dist/CollectionEditorDialog-DiZYNmYV.js

@@ -0,0 +1,4731 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { c } from "react-compiler-runtime";
+import { useAuthController, useCustomizationController, IconForView, useSnackbarController, useLargeLayout, AIIcon, useRebaseContext, ErrorView, ConfirmationDialog, useUnsavedChangesDialog, UnsavedChangesDialog } from "@rebasepro/core";
+import { bC as useCollectionsConfigController, _ as FieldCaption, as as SearchIconsView, b3 as getFieldConfig, ai as PropertyConfigBadge, b5 as getFullId, be as idToPropertiesPath, bi as namespaceToPropertiesOrderPath, bM as validateCollectionJson, b as useCollectionRegistryController, x as CollectionGenerationApiError, k as useCollectionEditorController, a5 as ImportFileUpload, b9 as getInferenceType, a6 as ImportNewPropertyFieldPreview, G as DataNewPropertiesMapping, b4 as getFieldId, bI as useSelectionController, aM as convertDataToEntity, O as EntityCollectionTable, e as useNavigationStateController, bE as useImportConfig, u as useUrlController, a7 as ImportSaveInProgress, b6 as getFullIdPath } from "./util-W5Lh0Emr.js";
+import * as React from "react";
+import React__default, { useState, useRef, useMemo, useEffect } from "react";
+import { Chip, Typography, cls, WarningIcon, Tooltip, IconButton, TextField, DebouncedTextField, Dialog, Container, VerticalSplitIcon, SquareIcon, ToggleButtonGroup, ListIcon, AppsIcon, ViewKanbanIcon, Select, SelectItem, CloseIcon, Button, BooleanSwitchWithLabel, DialogTitle, DialogContent, ContentCopyIcon, DialogActions, CircularProgress, FindInPageIcon, AddIcon, ErrorBoundary, defaultBorderMixin, Table, TableHeader, TableCell, TableBody, TableRow, DeleteIcon, CodeIcon, Menu, Icon, Card, CircularProgressCenter, Paper, KeyIcon, MultiSelect, MultiSelectItem, coolIconKeys, Tabs, Tab, LoadingButton, ArrowBackIcon, CheckIcon } from "@rebasepro/ui";
+import { isPropertyBuilder, getSubcollections, removeInitialAndTrailingSlashes } from "@rebasepro/common";
+import "prosemirror-model";
+import "@floating-ui/dom";
+import "prosemirror-commands";
+import "prosemirror-schema-list";
+import "prosemirror-state";
+import "fast-equals";
+import { useFormex, getIn, Field, clone, useCreateFormex, Formex } from "@rebasepro/formex";
+import { z } from "zod";
+import { toSnakeCase, singular, unslugify, isEmptyObject, prettifyIdentifier, slugify, randomString, removeUndefined, mergeDeep } from "@rebasepro/utils";
+import "react-dropzone";
+import "@dnd-kit/core";
+import "@dnd-kit/sortable";
+import "@dnd-kit/utilities";
+import { getDataSourceCapabilities } from "@rebasepro/types";
+import "@dnd-kit/modifiers";
+import "react-router";
+import { Highlight, themes } from "prism-react-renderer";
+import "react-router-dom";
+import "xlsx";
+import { buildPropertyFromData, buildEntityPropertiesFromData } from "@rebasepro/schema-inference";
+import "date-fns";
+import "date-fns/locale";
+import "fuse.js";
+import { a as PropertyFormDialog, u as useAIModifiedPaths, b as PropertyTree, P as PropertyForm, s as supportedFields, c as updatePropertyFromWidget, A as AIModifiedPathsProvider } from "./PropertyEditView-BC5GO9AI.js";
+import JSON5 from "json5";
+const CollectionEditorSchema = z.object({
+  slug: z.string().min(1, "Required"),
+  name: z.string().min(1, "Required"),
+  table: z.string().min(1, "Required")
+});
+function GeneralSettingsForm(t0) {
+  const $ = c(114);
+  const {
+    isNewCollection,
+    parentCollection
+  } = t0;
+  const {
+    values,
+    setFieldValue,
+    handleChange,
+    touched,
+    errors,
+    setFieldTouched,
+    submitCount
+  } = useFormex();
+  const [iconDialogOpen, setIconDialogOpen] = useState(false);
+  useAuthController();
+  useCustomizationController();
+  const configController = useCollectionsConfigController();
+  let t1;
+  if ($[0] !== setFieldValue) {
+    t1 = (databaseId) => {
+      setFieldValue("databaseId", databaseId ?? void 0);
+    };
+    $[0] = setFieldValue;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const updateDatabaseId = t1;
+  let t2;
+  if ($[2] !== isNewCollection || $[3] !== setFieldValue || $[4] !== touched) {
+    t2 = (name) => {
+      setFieldValue("name", name);
+      const pathTouched = getIn(touched, "table");
+      if (!pathTouched && isNewCollection && name) {
+        setFieldValue("table", toSnakeCase(name));
+      }
+      const idTouched = getIn(touched, "slug");
+      if (!idTouched && isNewCollection && name) {
+        setFieldValue("slug", toSnakeCase(name));
+      }
+      const singularNameTouched = getIn(touched, "singularName");
+      if (!singularNameTouched && isNewCollection && name) {
+        setFieldValue("singularName", singular(name));
+      }
+    };
+    $[2] = isNewCollection;
+    $[3] = setFieldValue;
+    $[4] = touched;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const updateName = t2;
+  let t3;
+  if ($[6] !== values) {
+    t3 = /* @__PURE__ */ jsx(IconForView, { collectionOrView: values });
+    $[6] = values;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  const collectionIcon = t3;
+  const isSubcollection = !!parentCollection;
+  const showErrors = submitCount > 0;
+  const t4 = !isNewCollection ? "h5" : "h4";
+  const t5 = isNewCollection ? "New collection" : `${values?.name} collection`;
+  let t6;
+  if ($[8] !== t4 || $[9] !== t5) {
+    t6 = /* @__PURE__ */ jsx(Typography, { variant: t4, className: "flex-grow", children: t5 });
+    $[8] = t4;
+    $[9] = t5;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  const t7 = configController?.readOnly;
+  let t8;
+  if ($[11] !== t7 || $[12] !== updateDatabaseId || $[13] !== values.databaseId) {
+    t8 = /* @__PURE__ */ jsx(DefaultDatabaseField, { databaseId: values.databaseId, disabled: t7, onDatabaseIdUpdate: updateDatabaseId });
+    $[11] = t7;
+    $[12] = updateDatabaseId;
+    $[13] = values.databaseId;
+    $[14] = t8;
+  } else {
+    t8 = $[14];
+  }
+  const t9 = configController?.readOnly;
+  let t10;
+  if ($[15] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t10 = () => setIconDialogOpen(true);
+    $[15] = t10;
+  } else {
+    t10 = $[15];
+  }
+  let t11;
+  if ($[16] !== collectionIcon || $[17] !== t9) {
+    t11 = /* @__PURE__ */ jsx(Tooltip, { title: "Change icon", asChild: true, children: /* @__PURE__ */ jsx(IconButton, { shape: "square", disabled: t9, onClick: t10, children: collectionIcon }) });
+    $[16] = collectionIcon;
+    $[17] = t9;
+    $[18] = t11;
+  } else {
+    t11 = $[18];
+  }
+  let t12;
+  if ($[19] !== t11 || $[20] !== t6 || $[21] !== t8) {
+    t12 = /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-2 items-center", children: [
+      t6,
+      t8,
+      t11
+    ] });
+    $[19] = t11;
+    $[20] = t6;
+    $[21] = t8;
+    $[22] = t12;
+  } else {
+    t12 = $[22];
+  }
+  let t13;
+  if ($[23] !== parentCollection) {
+    t13 = parentCollection && /* @__PURE__ */ jsx(Chip, { colorScheme: "tealDarker", children: /* @__PURE__ */ jsxs(Typography, { variant: "caption", children: [
+      "This is a subcollection of ",
+      /* @__PURE__ */ jsx("b", { children: parentCollection.name })
+    ] }) });
+    $[23] = parentCollection;
+    $[24] = t13;
+  } else {
+    t13 = $[24];
+  }
+  let t14;
+  if ($[25] !== t12 || $[26] !== t13) {
+    t14 = /* @__PURE__ */ jsxs("div", { children: [
+      t12,
+      t13
+    ] });
+    $[25] = t12;
+    $[26] = t13;
+    $[27] = t14;
+  } else {
+    t14 = $[27];
+  }
+  const t15 = configController?.readOnly;
+  const t16 = values.name ?? "";
+  let t17;
+  if ($[28] !== updateName) {
+    t17 = (e) => updateName(e.target.value);
+    $[28] = updateName;
+    $[29] = t17;
+  } else {
+    t17 = $[29];
+  }
+  const t18 = showErrors && Boolean(errors.name);
+  let t19;
+  if ($[30] !== t16 || $[31] !== t17 || $[32] !== t18) {
+    t19 = /* @__PURE__ */ jsx(TextField, { value: t16, onChange: t17, label: "Name", autoFocus: true, required: true, error: t18 });
+    $[30] = t16;
+    $[31] = t17;
+    $[32] = t18;
+    $[33] = t19;
+  } else {
+    t19 = $[33];
+  }
+  const t20 = touched.name && Boolean(errors.name);
+  const t21 = touched.name && Boolean(errors.name) ? errors.name : "Name of this collection, usually a plural name (e.g. Products)";
+  let t22;
+  if ($[34] !== t20 || $[35] !== t21) {
+    t22 = /* @__PURE__ */ jsx(FieldCaption, { error: t20, children: t21 });
+    $[34] = t20;
+    $[35] = t21;
+    $[36] = t22;
+  } else {
+    t22 = $[36];
+  }
+  let t23;
+  if ($[37] !== t19 || $[38] !== t22) {
+    t23 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t19,
+      t22
+    ] });
+    $[37] = t19;
+    $[38] = t22;
+    $[39] = t23;
+  } else {
+    t23 = $[39];
+  }
+  let t24;
+  if ($[40] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t24 = cls("col-span-12");
+    $[40] = t24;
+  } else {
+    t24 = $[40];
+  }
+  const t25 = showErrors && Boolean(errors.table);
+  let t26;
+  if ($[41] !== t25) {
+    t26 = /* @__PURE__ */ jsx(Field, { name: "table", as: DebouncedTextField, label: "Table name", required: true, error: t25 });
+    $[41] = t25;
+    $[42] = t26;
+  } else {
+    t26 = $[42];
+  }
+  const t27 = touched.table && Boolean(errors.table);
+  const t28 = touched.table && Boolean(errors.table) ? errors.table : isSubcollection ? "Relative path to the parent (no need to include the parent path)" : "PostgreSQL table name for this collection";
+  let t29;
+  if ($[43] !== t27 || $[44] !== t28) {
+    t29 = /* @__PURE__ */ jsx(FieldCaption, { error: t27, children: t28 });
+    $[43] = t27;
+    $[44] = t28;
+    $[45] = t29;
+  } else {
+    t29 = $[45];
+  }
+  let t30;
+  if ($[46] !== values) {
+    t30 = values.isTableMissing && /* @__PURE__ */ jsxs("div", { className: "mt-2 p-3 bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-300 border border-red-200 dark:border-red-800/30 rounded-md text-sm font-medium flex gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "mt-0.5", children: /* @__PURE__ */ jsx(WarningIcon, { size: "smallest" }) }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        "The table ",
+        /* @__PURE__ */ jsxs("b", { children: [
+          '"',
+          values.table,
+          '"'
+        ] }),
+        " does not exist in the database schema. If you've recently created it, make sure to generate and run your database migrations."
+      ] })
+    ] });
+    $[46] = values;
+    $[47] = t30;
+  } else {
+    t30 = $[47];
+  }
+  let t31;
+  if ($[48] !== t26 || $[49] !== t29 || $[50] !== t30) {
+    t31 = /* @__PURE__ */ jsxs("div", { className: t24, children: [
+      t26,
+      t29,
+      t30
+    ] });
+    $[48] = t26;
+    $[49] = t29;
+    $[50] = t30;
+    $[51] = t31;
+  } else {
+    t31 = $[51];
+  }
+  const t32 = showErrors && Boolean(errors.singularName);
+  let t33;
+  if ($[52] !== handleChange || $[53] !== setFieldTouched) {
+    t33 = (e_0) => {
+      setFieldTouched("singularName", true);
+      return handleChange(e_0);
+    };
+    $[52] = handleChange;
+    $[53] = setFieldTouched;
+    $[54] = t33;
+  } else {
+    t33 = $[54];
+  }
+  const t34 = values.singularName ?? "";
+  let t35;
+  if ($[55] !== t32 || $[56] !== t33 || $[57] !== t34) {
+    t35 = /* @__PURE__ */ jsx(TextField, { error: t32, name: "singularName", "aria-describedby": "singularName-helper", onChange: t33, value: t34, label: "Singular name" });
+    $[55] = t32;
+    $[56] = t33;
+    $[57] = t34;
+    $[58] = t35;
+  } else {
+    t35 = $[58];
+  }
+  const t36 = showErrors && Boolean(errors.singularName);
+  const t37 = showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define a singular name for your entities";
+  let t38;
+  if ($[59] !== t36 || $[60] !== t37) {
+    t38 = /* @__PURE__ */ jsx(FieldCaption, { error: t36, children: t37 });
+    $[59] = t36;
+    $[60] = t37;
+    $[61] = t38;
+  } else {
+    t38 = $[61];
+  }
+  let t39;
+  if ($[62] !== t35 || $[63] !== t38) {
+    t39 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t35,
+      t38
+    ] });
+    $[62] = t35;
+    $[63] = t38;
+    $[64] = t39;
+  } else {
+    t39 = $[64];
+  }
+  const t40 = showErrors && Boolean(errors.description);
+  const t41 = values.description ?? "";
+  let t42;
+  if ($[65] !== handleChange || $[66] !== t40 || $[67] !== t41) {
+    t42 = /* @__PURE__ */ jsx(TextField, { error: t40, name: "description", value: t41, onChange: handleChange, multiline: true, minRows: 2, "aria-describedby": "description-helper-text", label: "Description" });
+    $[65] = handleChange;
+    $[66] = t40;
+    $[67] = t41;
+    $[68] = t42;
+  } else {
+    t42 = $[68];
+  }
+  const t43 = showErrors && Boolean(errors.description);
+  const t44 = showErrors && Boolean(errors.description) ? errors.description : "Description of the collection, you can use markdown";
+  let t45;
+  if ($[69] !== t43 || $[70] !== t44) {
+    t45 = /* @__PURE__ */ jsx(FieldCaption, { error: t43, children: t44 });
+    $[69] = t43;
+    $[70] = t44;
+    $[71] = t45;
+  } else {
+    t45 = $[71];
+  }
+  let t46;
+  if ($[72] !== t42 || $[73] !== t45) {
+    t46 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t42,
+      t45
+    ] });
+    $[72] = t42;
+    $[73] = t45;
+    $[74] = t46;
+  } else {
+    t46 = $[74];
+  }
+  const t47 = values.slug ?? "";
+  let t48;
+  if ($[75] !== setFieldValue) {
+    t48 = (e_1) => setFieldValue("slug", e_1.target.value);
+    $[75] = setFieldValue;
+    $[76] = t48;
+  } else {
+    t48 = $[76];
+  }
+  const t49 = !isNewCollection;
+  const t50 = showErrors && Boolean(errors.slug);
+  let t51;
+  if ($[77] !== t47 || $[78] !== t48 || $[79] !== t49 || $[80] !== t50) {
+    t51 = /* @__PURE__ */ jsx(DebouncedTextField, { name: "slug", value: t47, onChange: t48, disabled: t49, label: "Collection ID", error: t50 });
+    $[77] = t47;
+    $[78] = t48;
+    $[79] = t49;
+    $[80] = t50;
+    $[81] = t51;
+  } else {
+    t51 = $[81];
+  }
+  const t52 = touched.slug && Boolean(errors.slug);
+  const t53 = touched.slug && Boolean(errors.slug) ? errors.slug : "This ID identifies this collection. Typically the same as the path.";
+  let t54;
+  if ($[82] !== t52 || $[83] !== t53) {
+    t54 = /* @__PURE__ */ jsx(FieldCaption, { error: t52, children: t53 });
+    $[82] = t52;
+    $[83] = t53;
+    $[84] = t54;
+  } else {
+    t54 = $[84];
+  }
+  let t55;
+  if ($[85] !== t51 || $[86] !== t54) {
+    t55 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t51,
+      t54
+    ] });
+    $[85] = t51;
+    $[86] = t54;
+    $[87] = t55;
+  } else {
+    t55 = $[87];
+  }
+  let t56;
+  if ($[88] !== t23 || $[89] !== t31 || $[90] !== t39 || $[91] !== t46 || $[92] !== t55) {
+    t56 = /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-4", children: [
+      t23,
+      t31,
+      t39,
+      t46,
+      t55
+    ] });
+    $[88] = t23;
+    $[89] = t31;
+    $[90] = t39;
+    $[91] = t46;
+    $[92] = t55;
+    $[93] = t56;
+  } else {
+    t56 = $[93];
+  }
+  let t57;
+  if ($[94] !== setFieldValue || $[95] !== values.history) {
+    t57 = false;
+    $[94] = setFieldValue;
+    $[95] = values.history;
+    $[96] = t57;
+  } else {
+    t57 = $[96];
+  }
+  let t58;
+  if ($[97] !== t15 || $[98] !== t56 || $[99] !== t57) {
+    t58 = /* @__PURE__ */ jsxs("fieldset", { disabled: t15, className: "contents", children: [
+      t56,
+      t57
+    ] });
+    $[97] = t15;
+    $[98] = t56;
+    $[99] = t57;
+    $[100] = t58;
+  } else {
+    t58 = $[100];
+  }
+  let t59;
+  if ($[101] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t59 = /* @__PURE__ */ jsx("div", { style: {
+      height: "52px"
+    } });
+    $[101] = t59;
+  } else {
+    t59 = $[101];
+  }
+  const t60 = typeof values.icon === "string" ? values.icon : void 0;
+  let t61;
+  if ($[102] !== setFieldValue) {
+    t61 = (icon) => {
+      setIconDialogOpen(false);
+      setFieldValue("icon", icon);
+    };
+    $[102] = setFieldValue;
+    $[103] = t61;
+  } else {
+    t61 = $[103];
+  }
+  let t62;
+  if ($[104] !== t60 || $[105] !== t61) {
+    t62 = /* @__PURE__ */ jsx("div", { className: "p-4 overflow-auto min-h-[200px]", children: /* @__PURE__ */ jsx(SearchIconsView, { selectedIcon: t60, onIconSelected: t61 }) });
+    $[104] = t60;
+    $[105] = t61;
+    $[106] = t62;
+  } else {
+    t62 = $[106];
+  }
+  let t63;
+  if ($[107] !== iconDialogOpen || $[108] !== t62) {
+    t63 = /* @__PURE__ */ jsx(Dialog, { open: iconDialogOpen, onOpenChange: setIconDialogOpen, maxWidth: "xl", fullWidth: true, children: t62 });
+    $[107] = iconDialogOpen;
+    $[108] = t62;
+    $[109] = t63;
+  } else {
+    t63 = $[109];
+  }
+  let t64;
+  if ($[110] !== t14 || $[111] !== t58 || $[112] !== t63) {
+    t64 = /* @__PURE__ */ jsx("div", { className: "overflow-auto my-auto", children: /* @__PURE__ */ jsxs(Container, { maxWidth: "4xl", className: "flex flex-col gap-4 p-8 m-auto", children: [
+      t14,
+      t58,
+      t59,
+      t63
+    ] }) });
+    $[110] = t14;
+    $[111] = t58;
+    $[112] = t63;
+    $[113] = t64;
+  } else {
+    t64 = $[113];
+  }
+  return t64;
+}
+function DefaultDatabaseField(t0) {
+  const $ = c(6);
+  const {
+    databaseId,
+    disabled: t1,
+    onDatabaseIdUpdate
+  } = t0;
+  const disabled = t1 === void 0 ? false : t1;
+  const t2 = databaseId ?? "";
+  let t3;
+  if ($[0] !== onDatabaseIdUpdate) {
+    t3 = (e) => onDatabaseIdUpdate(e.target.value);
+    $[0] = onDatabaseIdUpdate;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  let t4;
+  if ($[2] !== disabled || $[3] !== t2 || $[4] !== t3) {
+    t4 = /* @__PURE__ */ jsx(Tooltip, { title: "Database ID", side: "top", align: "start", children: /* @__PURE__ */ jsx(TextField, { size: "small", invisible: true, inputClassName: "text-end", disabled, value: t2, onChange: t3, placeholder: "(default)" }) });
+    $[2] = disabled;
+    $[3] = t2;
+    $[4] = t3;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  return t4;
+}
+function LayoutModeSwitch(t0) {
+  const $ = c(12);
+  const {
+    value,
+    onChange,
+    className
+  } = t0;
+  let t1;
+  if ($[0] !== className) {
+    t1 = cls(className);
+    $[0] = className;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t2 = /* @__PURE__ */ jsx(Typography, { variant: "label", color: "secondary", className: "ml-3.5", children: "Document view" });
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {
+      value: "side_panel",
+      label: "Side panel",
+      icon: /* @__PURE__ */ jsx(VerticalSplitIcon, {})
+    };
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t4 = [t3, {
+      value: "full_screen",
+      label: "Full screen",
+      icon: /* @__PURE__ */ jsx(SquareIcon, {})
+    }];
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== onChange || $[6] !== value) {
+    t5 = /* @__PURE__ */ jsx("div", { className: "my-2", children: /* @__PURE__ */ jsx(ToggleButtonGroup, { value, onValueChange: onChange, options: t4 }) });
+    $[5] = onChange;
+    $[6] = value;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  let t6;
+  if ($[8] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t6 = /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", className: "ml-3.5", children: "Should documents be opened full screen or in an inline side dialog" });
+    $[8] = t6;
+  } else {
+    t6 = $[8];
+  }
+  let t7;
+  if ($[9] !== t1 || $[10] !== t5) {
+    t7 = /* @__PURE__ */ jsxs("div", { className: t1, children: [
+      t2,
+      t5,
+      t6
+    ] });
+    $[9] = t1;
+    $[10] = t5;
+    $[11] = t7;
+  } else {
+    t7 = $[11];
+  }
+  return t7;
+}
+function ViewModeSwitch(t0) {
+  const $ = c(13);
+  const {
+    value,
+    onChange,
+    className
+  } = t0;
+  let t1;
+  if ($[0] !== className) {
+    t1 = cls(className);
+    $[0] = className;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t2 = /* @__PURE__ */ jsx(Typography, { variant: "label", color: "secondary", className: "ml-3.5", children: "Default collection view" });
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {
+      value: "table",
+      label: "Table",
+      icon: /* @__PURE__ */ jsx(ListIcon, {})
+    };
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t4 = {
+      value: "cards",
+      label: "Cards",
+      icon: /* @__PURE__ */ jsx(AppsIcon, {})
+    };
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t5 = [t3, t4, {
+      value: "kanban",
+      label: "Kanban",
+      icon: /* @__PURE__ */ jsx(ViewKanbanIcon, {})
+    }];
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  let t6;
+  if ($[6] !== onChange || $[7] !== value) {
+    t6 = /* @__PURE__ */ jsx("div", { className: "my-2", children: /* @__PURE__ */ jsx(ToggleButtonGroup, { value, onValueChange: onChange, options: t5 }) });
+    $[6] = onChange;
+    $[7] = value;
+    $[8] = t6;
+  } else {
+    t6 = $[8];
+  }
+  let t7;
+  if ($[9] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t7 = /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", className: "ml-3.5", children: "Choose how entities should be displayed by default" });
+    $[9] = t7;
+  } else {
+    t7 = $[9];
+  }
+  let t8;
+  if ($[10] !== t1 || $[11] !== t6) {
+    t8 = /* @__PURE__ */ jsxs("div", { className: t1, children: [
+      t2,
+      t6,
+      t7
+    ] });
+    $[10] = t1;
+    $[11] = t6;
+    $[12] = t8;
+  } else {
+    t8 = $[12];
+  }
+  return t8;
+}
+function KanbanConfigSection({
+  className,
+  forceExpanded
+}) {
+  useAuthController();
+  const customizationController = useCustomizationController();
+  const {
+    values,
+    setFieldValue
+  } = useFormex();
+  const panelRef = useRef(null);
+  const [columnPropertyDialogOpen, setColumnPropertyDialogOpen] = useState(false);
+  const enumStringProperties = useMemo(() => {
+    const result = [];
+    if (!values.properties) return result;
+    Object.entries(values.properties).forEach(([key, prop]) => {
+      if (prop && "type" in prop && prop.type === "string" && prop.enum) {
+        result.push({
+          key,
+          label: prop.name || key,
+          property: prop
+        });
+      }
+    });
+    return result;
+  }, [values.properties]);
+  const kanbanConfig = values.kanban;
+  const columnPropertyMissing = Boolean(kanbanConfig?.columnProperty) && !enumStringProperties.some((p) => p.key === kanbanConfig?.columnProperty);
+  React__default.useEffect(() => {
+    if (forceExpanded && panelRef.current) {
+      setTimeout(() => {
+        panelRef.current?.scrollIntoView({
+          behavior: "smooth",
+          block: "center"
+        });
+      }, 100);
+    }
+  }, [forceExpanded]);
+  const showCreateButton = !kanbanConfig?.columnProperty || columnPropertyMissing;
+  const dialogPropertyKey = columnPropertyMissing && kanbanConfig?.columnProperty ? kanbanConfig.columnProperty : "status";
+  const dialogPropertyName = columnPropertyMissing && kanbanConfig?.columnProperty ? unslugify(kanbanConfig.columnProperty) : "Status";
+  return /* @__PURE__ */ jsxs("div", { className, ref: panelRef, children: [
+    /* @__PURE__ */ jsx(Select, { name: "kanban.columnProperty", label: "Kanban Column Property", fullWidth: true, position: "item-aligned", disabled: enumStringProperties.length === 0, error: columnPropertyMissing, value: kanbanConfig?.columnProperty ?? "", onValueChange: (v) => {
+      if (v) {
+        setFieldValue("kanban", {
+          ...kanbanConfig,
+          columnProperty: v
+        });
+      } else {
+        setFieldValue("kanban", void 0);
+      }
+    }, renderValue: (value) => {
+      if (columnPropertyMissing) {
+        return /* @__PURE__ */ jsxs("span", { className: "text-red-500", children: [
+          value,
+          " (not found)"
+        ] });
+      }
+      const prop_0 = enumStringProperties.find((p_0) => p_0.key === value);
+      if (!prop_0) return "Select a property";
+      const fieldConfig = getFieldConfig(prop_0.property, customizationController.propertyConfigs);
+      return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(PropertyConfigBadge, { propertyConfig: fieldConfig }),
+        /* @__PURE__ */ jsx("span", { children: prop_0.label })
+      ] });
+    }, endAdornment: kanbanConfig?.columnProperty ? /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: (e) => {
+      e.stopPropagation();
+      setFieldValue("kanban", void 0);
+    }, children: /* @__PURE__ */ jsx(CloseIcon, { size: "small" }) }) : void 0, children: enumStringProperties.map((prop_1) => {
+      const fieldConfig_0 = getFieldConfig(prop_1.property, customizationController.propertyConfigs);
+      return /* @__PURE__ */ jsx(SelectItem, { value: prop_1.key, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(PropertyConfigBadge, { propertyConfig: fieldConfig_0 }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { children: prop_1.label }),
+          /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: fieldConfig_0?.name || "Enum" })
+        ] })
+      ] }) }, prop_1.key);
+    }) }, `column-select-${enumStringProperties.length}`),
+    /* @__PURE__ */ jsx(FieldCaption, { error: columnPropertyMissing, children: columnPropertyMissing ? `Property "${kanbanConfig?.columnProperty}" does not exist or is not an enum string property. Please select a valid property or clear the selection.` : enumStringProperties.length === 0 ? "No enum string properties found. Add a string property with enum to use Kanban view." : "Select a string property with enum values to group entities into columns" }),
+    showCreateButton && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Button, { variant: "text", size: "small", className: "ml-3.5 mt-2", onClick: () => setColumnPropertyDialogOpen(true), children: [
+        '+ Create "',
+        dialogPropertyKey,
+        '" property'
+      ] }),
+      /* @__PURE__ */ jsx(PropertyFormDialog, { open: columnPropertyDialogOpen, onCancel: () => setColumnPropertyDialogOpen(false), property: {
+        type: "string",
+        name: dialogPropertyName,
+        enum: [{
+          id: "todo",
+          label: "To Do"
+        }, {
+          id: "in_progress",
+          label: "In Progress"
+        }, {
+          id: "done",
+          label: "Done"
+        }]
+      }, propertyKey: dialogPropertyKey, existingProperty: false, autoOpenTypeSelect: false, autoUpdateId: false, inArray: false, allowDataInference: false, propertyConfigs: customizationController.propertyConfigs, existingPropertyKeys: Object.keys(values.properties ?? {}), onPropertyChanged: ({
+        id,
+        property
+      }) => {
+        const newProperties = {
+          ...values.properties,
+          [id]: property
+        };
+        const newPropertiesOrder = [...values.propertiesOrder ?? Object.keys(values.properties ?? {}), id];
+        setFieldValue("properties", newProperties);
+        setFieldValue("propertiesOrder", newPropertiesOrder);
+        setFieldValue("kanban", {
+          ...kanbanConfig,
+          columnProperty: id
+        });
+        setColumnPropertyDialogOpen(false);
+      } })
+    ] })
+  ] });
+}
+function DisplaySettingsForm({
+  expandKanban
+}) {
+  const {
+    values,
+    setFieldValue,
+    handleChange,
+    submitCount
+  } = useFormex();
+  const [orderPropertyDialogOpen, setOrderPropertyDialogOpen] = useState(false);
+  useAuthController();
+  const customizationController = useCustomizationController();
+  const configController = useCollectionsConfigController();
+  const numberProperties = useMemo(() => {
+    const result = [];
+    if (!values.properties) return result;
+    Object.entries(values.properties).forEach(([key, prop]) => {
+      if (prop && "type" in prop && prop.type === "number") {
+        result.push({
+          key,
+          label: prop.name || key,
+          property: prop
+        });
+      }
+    });
+    return result;
+  }, [values.properties]);
+  return /* @__PURE__ */ jsx("div", { className: "overflow-auto my-auto", children: /* @__PURE__ */ jsxs(Container, { maxWidth: "4xl", className: "flex flex-col gap-4 p-8 m-auto", children: [
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Typography, { variant: "h5", className: "flex-grow", children: "Display settings" }) }),
+    /* @__PURE__ */ jsx("fieldset", { disabled: configController?.readOnly, className: "contents", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-4", children: [
+      /* @__PURE__ */ jsx(LayoutModeSwitch, { className: "col-span-12", value: values.openEntityMode ?? "side_panel", onChange: (value) => setFieldValue("openEntityMode", value) }),
+      /* @__PURE__ */ jsx(ViewModeSwitch, { className: "col-span-12", value: values.defaultViewMode ?? "table", onChange: (value_0) => setFieldValue("defaultViewMode", value_0) }),
+      /* @__PURE__ */ jsx(KanbanConfigSection, { className: "col-span-12", forceExpanded: expandKanban }),
+      /* @__PURE__ */ jsxs("div", { className: "col-span-12 mt-4", children: [
+        (() => {
+          const orderPropertyMissing = Boolean(values.orderProperty) && !numberProperties.some((p) => p.key === values.orderProperty);
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Select, { name: "orderProperty", label: "Order Property", fullWidth: true, position: "item-aligned", disabled: numberProperties.length === 0, error: orderPropertyMissing, value: values.orderProperty ?? "", onValueChange: (v) => {
+              setFieldValue("orderProperty", v || void 0);
+            }, renderValue: (value_1) => {
+              if (orderPropertyMissing) {
+                return /* @__PURE__ */ jsxs("span", { className: "text-red-500", children: [
+                  value_1,
+                  " (not found)"
+                ] });
+              }
+              const prop_0 = numberProperties.find((p_0) => p_0.key === value_1);
+              if (!prop_0) return "Select a property";
+              const fieldConfig = getFieldConfig(prop_0.property, customizationController.propertyConfigs);
+              return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(PropertyConfigBadge, { propertyConfig: fieldConfig }),
+                /* @__PURE__ */ jsx("span", { children: prop_0.label })
+              ] });
+            }, endAdornment: values.orderProperty ? /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: (e) => {
+              e.stopPropagation();
+              setFieldValue("orderProperty", void 0);
+            }, children: /* @__PURE__ */ jsx(CloseIcon, { size: "small" }) }) : void 0, children: numberProperties.map((prop_1) => {
+              const fieldConfig_0 = getFieldConfig(prop_1.property, customizationController.propertyConfigs);
+              return /* @__PURE__ */ jsx(SelectItem, { value: prop_1.key, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsx(PropertyConfigBadge, { propertyConfig: fieldConfig_0 }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("div", { children: prop_1.label }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: fieldConfig_0?.name || "Number" })
+                ] })
+              ] }) }, prop_1.key);
+            }) }, `order-select-${numberProperties.length}`),
+            /* @__PURE__ */ jsx(FieldCaption, { error: orderPropertyMissing, children: orderPropertyMissing ? `Property "${values.orderProperty}" does not exist or is not a number property. Please select a valid property or clear the selection.` : numberProperties.length === 0 ? "No number properties found. Add a number property to enable ordering." : "Select a number property to persist the order of items" })
+          ] });
+        })(),
+        (() => {
+          const orderPropertyMissing_0 = Boolean(values.orderProperty) && !numberProperties.some((p_1) => p_1.key === values.orderProperty);
+          const showCreateButton = !values.orderProperty || orderPropertyMissing_0;
+          const dialogPropertyKey = orderPropertyMissing_0 && values.orderProperty ? values.orderProperty : "__order";
+          const dialogPropertyName = orderPropertyMissing_0 && values.orderProperty ? unslugify(values.orderProperty) : "Order";
+          if (!showCreateButton) return null;
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(Button, { variant: "text", size: "small", className: "ml-3.5 mt-2", onClick: () => setOrderPropertyDialogOpen(true), children: [
+              '+ Create "',
+              dialogPropertyKey,
+              '" property'
+            ] }),
+            /* @__PURE__ */ jsx(PropertyFormDialog, { open: orderPropertyDialogOpen, onCancel: () => setOrderPropertyDialogOpen(false), property: {
+              type: "number",
+              name: dialogPropertyName,
+              disabled: true,
+              hideFromCollection: true
+            }, propertyKey: dialogPropertyKey, existingProperty: false, autoOpenTypeSelect: false, autoUpdateId: false, inArray: false, allowDataInference: false, propertyConfigs: customizationController.propertyConfigs, existingPropertyKeys: Object.keys(values.properties ?? {}), onPropertyChanged: ({
+              id,
+              property
+            }) => {
+              const newProperties = {
+                ...values.properties,
+                [id]: property
+              };
+              const newPropertiesOrder = [...values.propertiesOrder ?? Object.keys(values.properties ?? {}), id];
+              setFieldValue("properties", newProperties);
+              setFieldValue("propertiesOrder", newPropertiesOrder);
+              setFieldValue("orderProperty", id);
+              setOrderPropertyDialogOpen(false);
+            } })
+          ] });
+        })()
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(Select, { name: "defaultSize", fullWidth: true, label: "Default row size", position: "item-aligned", onChange: handleChange, value: values.defaultSize ?? "", renderValue: (value_2) => value_2.toUpperCase(), children: ["xs", "s", "m", "l", "xl"].map((value_3) => /* @__PURE__ */ jsx(SelectItem, { value: value_3, children: value_3.toUpperCase() }, `size-select-${value_3}`)) }) }),
+      /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+        /* @__PURE__ */ jsx(TextField, { name: "sideDialogWidth", type: "number", "aria-describedby": "sideDialogWidth-helper", onChange: (e_0) => {
+          const value_4 = e_0.target.value;
+          if (!value_4) {
+            setFieldValue("sideDialogWidth", null);
+          } else if (!isNaN(Number(value_4))) {
+            setFieldValue("sideDialogWidth", Number(value_4));
+          }
+        }, endAdornment: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => {
+          setFieldValue("sideDialogWidth", null);
+        }, disabled: !values.sideDialogWidth, children: /* @__PURE__ */ jsx(CloseIcon, { size: "small" }) }), value: values.sideDialogWidth ?? "", label: "Side dialog width" }),
+        /* @__PURE__ */ jsx(FieldCaption, { children: "Optionally define the width (in pixels) of entities side dialog. Default is 768px" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+        /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", label: values.inlineEditing === void 0 || values.inlineEditing ? "Data can be edited directly in the table view" : "Data can be edited only in the form view", onValueChange: (v_0) => setFieldValue("inlineEditing", v_0), value: values.inlineEditing === void 0 ? true : values.inlineEditing }),
+        /* @__PURE__ */ jsx(FieldCaption, { children: "Allow editing data directly in the table view, without opening the form view." })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+        /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", label: values.includeJsonView === void 0 || values.includeJsonView ? "Include JSON view" : "Do not include JSON view", onValueChange: (v_1) => setFieldValue("includeJsonView", v_1), value: values.includeJsonView === void 0 ? true : values.includeJsonView }),
+        /* @__PURE__ */ jsx(FieldCaption, { children: "Allows removing the form view JSON tab if you think it is confusing for your users." })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { style: {
+      height: "52px"
+    } })
+  ] }) });
+}
+function camelCase(str) {
+  if (!str) return "";
+  if (str.length === 1) return str.toLowerCase();
+  const parts = str.split(/[-_ ]+/).filter(Boolean);
+  if (parts.length === 0) return "";
+  return parts[0].toLowerCase() + // Transform remaining parts to have first letter uppercase
+  parts.slice(1).map((part) => part.charAt(0).toUpperCase() + part.substring(1).toLowerCase()).join("");
+}
+function GetCodeDialog(t0) {
+  const $ = c(22);
+  const {
+    collection,
+    onOpenChange,
+    open
+  } = t0;
+  const snackbarController = useSnackbarController();
+  const code = collection ? 'import { EntityCollection } from "@rebasepro/core";\n\nconst ' + (collection?.name ? camelCase(collection.name) : "my") + "Collection:EntityCollection = " + JSON5.stringify(collectionToCode({
+    ...collection
+  }), null, "	") : "No collection selected";
+  let t1;
+  if ($[0] !== collection.name) {
+    t1 = /* @__PURE__ */ jsxs(DialogTitle, { variant: "h6", children: [
+      "Code for ",
+      collection.name
+    ] });
+    $[0] = collection.name;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t2 = /* @__PURE__ */ jsxs(Typography, { variant: "body2", className: "my-4 mb-8", children: [
+      "If you want to customise the collection in code, you can add this collection code to your CMS app configuration. More info in the ",
+      /* @__PURE__ */ jsx("a", { rel: "noopener noreferrer", href: "https://rebase.pro/docs/cloud/quickstart", children: "docs" }),
+      "."
+    ] });
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] !== code) {
+    t3 = /* @__PURE__ */ jsxs(DialogContent, { children: [
+      t2,
+      /* @__PURE__ */ jsx(Highlight, { theme: themes.vsDark, code, language: "typescript", children: _temp$4 })
+    ] });
+    $[3] = code;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== code || $[6] !== snackbarController) {
+    t4 = (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      snackbarController.open({
+        type: "success",
+        message: "Copied"
+      });
+      return navigator.clipboard.writeText(code);
+    };
+    $[5] = code;
+    $[6] = snackbarController;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[8] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t5 = /* @__PURE__ */ jsx(ContentCopyIcon, { size: "small" });
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  let t6;
+  if ($[9] !== t4) {
+    t6 = /* @__PURE__ */ jsxs(Button, { variant: "text", size: "small", onClick: t4, children: [
+      t5,
+      "Copy to clipboard"
+    ] });
+    $[9] = t4;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  let t7;
+  if ($[11] !== onOpenChange) {
+    t7 = /* @__PURE__ */ jsx(Button, { onClick: () => onOpenChange(false), children: "Close" });
+    $[11] = onOpenChange;
+    $[12] = t7;
+  } else {
+    t7 = $[12];
+  }
+  let t8;
+  if ($[13] !== t6 || $[14] !== t7) {
+    t8 = /* @__PURE__ */ jsxs(DialogActions, { children: [
+      t6,
+      t7
+    ] });
+    $[13] = t6;
+    $[14] = t7;
+    $[15] = t8;
+  } else {
+    t8 = $[15];
+  }
+  let t9;
+  if ($[16] !== onOpenChange || $[17] !== open || $[18] !== t1 || $[19] !== t3 || $[20] !== t8) {
+    t9 = /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange, maxWidth: "4xl", children: [
+      t1,
+      t3,
+      t8
+    ] });
+    $[16] = onOpenChange;
+    $[17] = open;
+    $[18] = t1;
+    $[19] = t3;
+    $[20] = t8;
+    $[21] = t9;
+  } else {
+    t9 = $[21];
+  }
+  return t9;
+}
+function _temp$4(t0) {
+  const {
+    style,
+    tokens,
+    getLineProps,
+    getTokenProps
+  } = t0;
+  return /* @__PURE__ */ jsx("pre", { style, className: "p-4 rounded-xs text-sm", children: tokens.map((line, i) => /* @__PURE__ */ jsx("div", { ...getLineProps({
+    line
+  }), children: line.map((token, key) => /* @__PURE__ */ jsx("span", { ...getTokenProps({
+    token
+  }) }, key)) }, i)) });
+}
+function collectionToCode(collection) {
+  const propertyCleanup = (value) => {
+    if (value === void 0 || value === null) {
+      return value;
+    }
+    const valueCopy = clone(value);
+    if (typeof valueCopy === "function") {
+      return valueCopy;
+    }
+    if (Array.isArray(valueCopy)) {
+      return valueCopy.map((v) => propertyCleanup(v));
+    }
+    if (typeof valueCopy === "object") {
+      if (valueCopy === null) return valueCopy;
+      const obj = valueCopy;
+      Object.keys(obj).forEach((key) => {
+        if (!isEmptyObject(obj)) {
+          const childRes = propertyCleanup(obj[key]);
+          if (childRes !== null && childRes !== void 0 && childRes !== false && !isEmptyObject(childRes)) {
+            obj[key] = childRes;
+          } else {
+            delete obj[key];
+          }
+        }
+      });
+      delete obj.resolved;
+      delete obj.propertiesOrder;
+      delete obj.propertyConfig;
+    }
+    return valueCopy;
+  };
+  return {
+    id: collection.slug,
+    name: collection.name,
+    singularName: collection.singularName,
+    path: collection.slug,
+    description: collection.description,
+    icon: collection.icon,
+    group: collection.group,
+    filter: collection.filter,
+    sort: collection.sort,
+    properties: Object.entries({
+      ...collection.properties ?? {}
+    }).map(([key, value]) => ({
+      [key]: propertyCleanup(value)
+    })).reduce((a, b) => ({
+      ...a,
+      ...b
+    }), {})
+    // subcollections: (collection.subcollections ?? []).map(collectionToCode)
+  };
+}
+function CollectionPropertiesEditorForm({
+  showErrors,
+  isNewCollection,
+  propertyErrorsRef,
+  onPropertyError,
+  setDirty,
+  reservedGroups,
+  extraIcon,
+  getUser,
+  getData,
+  doCollectionInference,
+  propertyConfigs
+}) {
+  const {
+    values,
+    setFieldValue,
+    setFieldError,
+    setFieldTouched,
+    errors,
+    dirty
+  } = useFormex();
+  const snackbarController = useSnackbarController();
+  const configController = useCollectionsConfigController();
+  const largeLayout = useLargeLayout();
+  const asDialog = !largeLayout;
+  const [selectedPropertyIndex, setSelectedPropertyIndex] = useState();
+  const [selectedPropertyKey, setSelectedPropertyKey] = useState();
+  const [selectedPropertyNamespace, setSelectedPropertyNamespace] = useState();
+  const selectedPropertyFullId = selectedPropertyKey ? getFullId(selectedPropertyKey, selectedPropertyNamespace) : void 0;
+  const selectedProperty = selectedPropertyFullId ? getIn(values.properties, selectedPropertyFullId.replaceAll(".", ".properties.")) : void 0;
+  const [codeDialogOpen, setCodeDialogOpen] = useState(false);
+  const [inferringProperties, setInferringProperties] = useState(false);
+  const [newPropertyDialogOpen, setNewPropertyDialogOpen] = useState(false);
+  const [inferredPropertyKeys, setInferredPropertyKeys] = useState([]);
+  const currentPropertiesOrderRef = React__default.useRef(values.propertiesOrder ? {
+    "": values.propertiesOrder
+  } : {});
+  useEffect(() => {
+    if (setDirty) setDirty(dirty);
+  }, [dirty]);
+  const inferPropertiesFromData = doCollectionInference ? () => {
+    if (!doCollectionInference || configController?.readOnly) return;
+    setInferringProperties(true);
+    console.debug("CollectionEditor: inferring properties from data", values);
+    doCollectionInference(values).then((newCollection) => {
+      if (!newCollection) {
+        snackbarController.open({
+          type: "error",
+          message: "Could not infer properties from data"
+        });
+        return;
+      }
+      const findNewPropertyKeys = (existingProps, newProps, namespace) => {
+        if (!newProps) return [];
+        const keys = [];
+        for (const key of Object.keys(newProps)) {
+          const fullKey = namespace ? `${namespace}.${key}` : key;
+          const existingProp = existingProps?.[key];
+          const newProp = newProps[key];
+          if (!existingProp) {
+            keys.push(fullKey);
+          } else if (typeof newProp === "object" && "type" in newProp && newProp.dataType === "map" && newProp.properties) {
+            const existingMapProps = typeof existingProp === "object" && "type" in existingProp && existingProp.dataType === "map" ? existingProp.properties : void 0;
+            keys.push(...findNewPropertyKeys(existingMapProps, newProp.properties, fullKey));
+          }
+        }
+        return keys;
+      };
+      const addNewPropertiesOnly = (existingProps_0, newProps_0) => {
+        if (!newProps_0) return existingProps_0 ?? {};
+        if (!existingProps_0) return newProps_0;
+        const result = {
+          ...existingProps_0
+        };
+        for (const key_0 of Object.keys(newProps_0)) {
+          const existingProp_0 = existingProps_0[key_0];
+          const newProp_0 = newProps_0[key_0];
+          if (!existingProp_0) {
+            result[key_0] = newProp_0;
+          } else if (typeof existingProp_0 === "object" && "type" in existingProp_0 && existingProp_0.dataType === "map" && typeof newProp_0 === "object" && "type" in newProp_0 && newProp_0.dataType === "map" && newProp_0.properties) {
+            const existingMapProps_0 = existingProp_0.properties;
+            if (existingMapProps_0) {
+              result[key_0] = {
+                ...existingProp_0,
+                properties: addNewPropertiesOnly(existingMapProps_0, newProp_0.properties)
+              };
+            }
+          }
+        }
+        return result;
+      };
+      const updatedProperties = addNewPropertiesOnly(values.properties ?? {}, newCollection.properties);
+      const allNewPropertyKeys = findNewPropertyKeys(values.properties, newCollection.properties);
+      const newTopLevelPropertyKeys = (newCollection.properties ? Object.keys(newCollection.properties) : []).filter((propertyKey) => !values.properties[propertyKey]);
+      if (allNewPropertyKeys.length === 0) {
+        snackbarController.open({
+          type: "info",
+          message: "No new properties found in existing data"
+        });
+        return;
+      }
+      const allExistingKeys = values.propertiesOrder ?? Object.keys(values.properties ?? {});
+      const updatedPropertiesOrder = [...newTopLevelPropertyKeys, ...allExistingKeys.filter((key_1) => !newTopLevelPropertyKeys.includes(key_1))];
+      setFieldValue("properties", updatedProperties, false);
+      updatePropertiesOrder(updatedPropertiesOrder);
+      setInferredPropertyKeys(allNewPropertyKeys);
+      snackbarController.open({
+        type: "success",
+        message: `Added ${allNewPropertyKeys.length} new ${allNewPropertyKeys.length === 1 ? "property" : "properties"}`
+      });
+    }).finally(() => {
+      setInferringProperties(false);
+    });
+  } : void 0;
+  const getCurrentPropertiesOrder = (namespace_0) => {
+    if (!namespace_0) return currentPropertiesOrderRef.current[""] ?? getIn(values, namespaceToPropertiesOrderPath());
+    return currentPropertiesOrderRef.current[namespace_0] ?? getIn(values, namespaceToPropertiesOrderPath(namespace_0));
+  };
+  const updatePropertiesOrder = (newPropertiesOrder, namespace_1) => {
+    const propertiesOrderPath = namespaceToPropertiesOrderPath(namespace_1);
+    setFieldValue(propertiesOrderPath, newPropertiesOrder, false);
+    currentPropertiesOrderRef.current[namespace_1 ?? ""] = newPropertiesOrder;
+  };
+  const deleteProperty = (propertyKey_0, namespace_2) => {
+    if (configController?.readOnly) return;
+    const fullId = propertyKey_0 ? getFullId(propertyKey_0, namespace_2) : void 0;
+    if (!fullId) throw Error("collection editor miss config");
+    setFieldValue(idToPropertiesPath(fullId), void 0, false);
+    const currentPropertiesOrder = getCurrentPropertiesOrder(namespace_2);
+    if (currentPropertiesOrder) {
+      const newPropertiesOrder_0 = currentPropertiesOrder.filter((p) => p !== propertyKey_0);
+      updatePropertiesOrder(newPropertiesOrder_0, namespace_2);
+    }
+    setNewPropertyDialogOpen(false);
+    setSelectedPropertyIndex(void 0);
+    setSelectedPropertyKey(void 0);
+    setSelectedPropertyNamespace(void 0);
+  };
+  const onPropertyMove = (propertiesOrder, namespace_3) => {
+    if (configController?.readOnly) return;
+    setFieldValue(namespaceToPropertiesOrderPath(namespace_3), propertiesOrder, false);
+  };
+  const onPropertyCreated = ({
+    id,
+    property
+  }) => {
+    if (configController?.readOnly) return;
+    if (!id) {
+      throw Error("Need to include an ID when creating a new property");
+    }
+    setFieldValue("properties", {
+      ...values.properties ?? {},
+      [id]: property
+    }, false);
+    const newPropertiesOrder_1 = [...values.propertiesOrder ?? Object.keys(values.properties), id];
+    updatePropertiesOrder(newPropertiesOrder_1);
+    setNewPropertyDialogOpen(false);
+    if (largeLayout) {
+      setSelectedPropertyIndex(newPropertiesOrder_1.indexOf(id));
+      setSelectedPropertyKey(id);
+    }
+    setSelectedPropertyNamespace(void 0);
+  };
+  const onPropertyChanged = ({
+    id: id_0,
+    property: property_0,
+    previousId,
+    namespace: namespace_4
+  }) => {
+    const fullId_0 = id_0 ? getFullId(id_0, namespace_4) : void 0;
+    const propertyPath = fullId_0 ? idToPropertiesPath(fullId_0) : void 0;
+    if (previousId && previousId !== id_0) {
+      const previousFullId = getFullId(previousId, namespace_4);
+      const previousPropertyPath = idToPropertiesPath(previousFullId);
+      const currentPropertiesOrder_0 = getCurrentPropertiesOrder(namespace_4);
+      const newPropertiesOrder_2 = currentPropertiesOrder_0.map((p_0) => p_0 === previousId ? id_0 : p_0).filter((p_1) => p_1 !== void 0);
+      updatePropertiesOrder(newPropertiesOrder_2, namespace_4);
+      if (id_0) {
+        setSelectedPropertyIndex(newPropertiesOrder_2.indexOf(id_0));
+        setSelectedPropertyKey(id_0);
+      }
+      setFieldValue(previousPropertyPath, void 0, false);
+      setFieldTouched(previousPropertyPath, false, false);
+    }
+    if (propertyPath) {
+      setFieldValue(propertyPath, property_0, false);
+      setFieldTouched(propertyPath, true, false);
+    }
+  };
+  const onPropertyErrorInternal = (id_1, namespace_5, error) => {
+    const propertyPath_0 = id_1 ? getFullId(id_1, namespace_5) : void 0;
+    console.debug("onPropertyErrorInternal", {
+      id: id_1,
+      namespace: namespace_5,
+      error,
+      propertyPath: propertyPath_0
+    });
+    if (propertyPath_0) {
+      const hasError = error && Object.keys(error).length > 0;
+      onPropertyError(id_1, namespace_5, hasError ? error : void 0);
+      setFieldError(idToPropertiesPath(propertyPath_0), hasError ? "Property error" : void 0);
+    }
+  };
+  const closePropertyDialog = () => {
+    setSelectedPropertyIndex(void 0);
+    setSelectedPropertyKey(void 0);
+  };
+  const initialErrors = selectedPropertyKey && propertyErrorsRef?.current?.properties ? propertyErrorsRef.current.properties[selectedPropertyKey] : void 0;
+  const emptyCollection = (values?.propertiesOrder === void 0 || values.propertiesOrder.length === 0) && (!values?.properties || Object.keys(values.properties).length === 0);
+  const usedPropertiesOrder = values.propertiesOrder ? values.propertiesOrder : Object.keys(values.properties);
+  const owner = useMemo(() => values.ownerId && getUser ? getUser(values.ownerId) : null, [getUser, values.ownerId]);
+  const aiModifiedPaths = useAIModifiedPaths();
+  const generationCounter = aiModifiedPaths?.generationCounter ?? 0;
+  const onPropertyClick = (propertyKey_1, namespace_6) => {
+    console.debug("CollectionEditor: onPropertyClick", {
+      propertyKey: propertyKey_1,
+      namespace: namespace_6
+    });
+    setSelectedPropertyIndex(usedPropertiesOrder.indexOf(propertyKey_1));
+    setSelectedPropertyKey(propertyKey_1);
+    setSelectedPropertyNamespace(namespace_6);
+  };
+  const body = /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-2 h-full bg-surface dark:bg-surface-dark", children: [
+    /* @__PURE__ */ jsxs("div", { className: cls("bg-surface-50 dark:bg-surface-900", "p-4 md:p-8", "col-span-12 lg:col-span-5 h-full overflow-auto", !asDialog && "border-r " + defaultBorderMixin), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex my-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "grow mb-4", children: [
+          /* @__PURE__ */ jsx(Field, { name: "name", as: DebouncedTextField, invisible: true, className: "-ml-1", inputClassName: "text-2xl font-headers", placeholder: "Collection name", size: "small", required: true, error: Boolean(errors?.name) }),
+          owner && /* @__PURE__ */ jsxs(Typography, { variant: "body2", className: "ml-2", color: "secondary", children: [
+            "Created by ",
+            owner.displayName
+          ] })
+        ] }),
+        extraIcon && /* @__PURE__ */ jsx("div", { className: "ml-4", children: extraIcon }),
+        /* @__PURE__ */ jsxs("div", { className: "ml-4 flex flex-row gap-2 items-center flex-shrink-0", children: [
+          inferPropertiesFromData && /* @__PURE__ */ jsx(Tooltip, { title: "Add new properties based on data", asChild: true, children: /* @__PURE__ */ jsx(IconButton, { variant: "filled", disabled: inferringProperties, onClick: inferPropertiesFromData, children: inferringProperties ? /* @__PURE__ */ jsx(CircularProgress, { size: "small" }) : /* @__PURE__ */ jsx(FindInPageIcon, {}) }) }),
+          /* @__PURE__ */ jsx(Tooltip, { title: "Add new property", asChild: true, children: /* @__PURE__ */ jsx(Button, { disabled: configController?.readOnly, onClick: () => setNewPropertyDialogOpen(true), children: /* @__PURE__ */ jsx(AddIcon, {}) }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(PropertyTree, { className: "mt-2", inferredPropertyKeys, selectedPropertyKey: selectedPropertyKey ? getFullId(selectedPropertyKey, selectedPropertyNamespace) : void 0, properties: values.properties, additionalFields: values.additionalFields, propertiesOrder: usedPropertiesOrder, onPropertyClick, onPropertyMove, onPropertyRemove: (isNewCollection || inferredPropertyKeys && inferredPropertyKeys.length > 0) && !configController?.readOnly ? deleteProperty : void 0, errors }) }),
+      /* @__PURE__ */ jsx(Button, { className: "mt-4 xl:mt-8 w-full", variant: "filled", color: "neutral", disabled: configController?.readOnly, onClick: () => setNewPropertyDialogOpen(true), startIcon: /* @__PURE__ */ jsx(AddIcon, {}), children: "Add new property" })
+    ] }),
+    !asDialog && /* @__PURE__ */ jsx("div", { className: "col-span-12 lg:col-span-7 p-4 md:py-8 md:px-4 h-full overflow-auto", children: /* @__PURE__ */ jsxs("div", { className: "sticky top-8 min-h-full w-full flex flex-col justify-center", children: [
+      selectedPropertyFullId && selectedProperty && !isPropertyBuilder(selectedProperty) && /* @__PURE__ */ jsx(PropertyForm, { inArray: false, existingProperty: !isNewCollection, autoUpdateId: false, allowDataInference: !isNewCollection, autoOpenTypeSelect: false, propertyKey: selectedPropertyKey, propertyNamespace: selectedPropertyNamespace, property: selectedProperty, onPropertyChanged, onDelete: deleteProperty, onError: onPropertyErrorInternal, forceShowErrors: showErrors, initialErrors, getData, propertyConfigs }, `edit_view_${selectedPropertyIndex}_${generationCounter}`),
+      !selectedProperty && /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col items-center justify-center h-full gap-4", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "label", className: "", children: emptyCollection ? "Now you can add your first property" : "Select a property to edit it" }),
+        /* @__PURE__ */ jsxs(Button, { disabled: configController?.readOnly, onClick: () => setNewPropertyDialogOpen(true), children: [
+          /* @__PURE__ */ jsx(AddIcon, {}),
+          "Add new property"
+        ] })
+      ] }),
+      selectedProperty && isPropertyBuilder(selectedProperty) && /* @__PURE__ */ jsx(Typography, { variant: "label", className: "flex items-center justify-center", children: "This property is defined as a property builder in code" })
+    ] }) }),
+    asDialog && /* @__PURE__ */ jsx(PropertyFormDialog, { inArray: false, open: selectedPropertyIndex !== void 0, autoUpdateId: !selectedProperty, allowDataInference: !isNewCollection, existingProperty: true, autoOpenTypeSelect: false, propertyKey: selectedPropertyKey, propertyNamespace: selectedPropertyNamespace, property: selectedProperty, onPropertyChanged, onDelete: deleteProperty, onError: onPropertyErrorInternal, forceShowErrors: showErrors, initialErrors, getData, propertyConfigs, onCancel: closePropertyDialog, onOkClicked: asDialog ? closePropertyDialog : void 0 }, `edit_view_${selectedPropertyIndex}_${generationCounter}`)
+  ] });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    body,
+    /* @__PURE__ */ jsx(PropertyFormDialog, { inArray: false, existingProperty: false, autoOpenTypeSelect: true, autoUpdateId: true, forceShowErrors: showErrors, open: newPropertyDialogOpen, onCancel: () => setNewPropertyDialogOpen(false), onPropertyChanged: onPropertyCreated, getData, allowDataInference: !isNewCollection, propertyConfigs, existingPropertyKeys: values.propertiesOrder }),
+    /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(GetCodeDialog, { collection: values, open: codeDialogOpen, onOpenChange: setCodeDialogOpen }) })
+  ] });
+}
+function CollectionRelationsTab() {
+  const {
+    values,
+    setFieldValue
+  } = useFormex();
+  const {
+    collections
+  } = useCollectionsConfigController();
+  const [editingRelationIndex, setEditingRelationIndex] = useState(null);
+  const [editingRelationState, setEditingRelationState] = useState(null);
+  const getTargetSlug = (target) => {
+    if (typeof target === "string") {
+      const match = target.match(/\(\)\s*=>\s*([a-zA-Z0-9_]+)/);
+      return match ? match[1] : target;
+    }
+    if (typeof target === "function") {
+      try {
+        if (target.slug) return target.slug;
+        const col = target();
+        return col?.slug || col?.name || "";
+      } catch (e) {
+        return "";
+      }
+    }
+    return "";
+  };
+  const relations = values.relations || [];
+  const handleDelete = (index) => {
+    const newRelations = [...relations];
+    newRelations.splice(index, 1);
+    setFieldValue("relations", newRelations);
+  };
+  const handleSave = () => {
+    if (!editingRelationState) return;
+    const newRelations_0 = [...relations];
+    if (editingRelationIndex === -1) {
+      newRelations_0.push(editingRelationState);
+    } else if (editingRelationIndex !== null) {
+      newRelations_0[editingRelationIndex] = editingRelationState;
+    }
+    setFieldValue("relations", newRelations_0);
+    setEditingRelationIndex(null);
+    setEditingRelationState(null);
+  };
+  const handleCancel = () => {
+    setEditingRelationIndex(null);
+    setEditingRelationState(null);
+  };
+  return /* @__PURE__ */ jsx("div", { className: "overflow-auto my-auto h-full w-full", children: /* @__PURE__ */ jsxs(Container, { maxWidth: "4xl", className: "flex flex-col gap-4 p-8 m-auto h-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-8", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h5", children: "Relations" }),
+      /* @__PURE__ */ jsx(Button, { variant: "filled", color: "neutral", onClick: () => {
+        setEditingRelationIndex(-1);
+        setEditingRelationState({
+          relationName: "",
+          target: "",
+          cardinality: "many",
+          direction: "owning"
+        });
+      }, children: "ADD RELATION" })
+    ] }),
+    relations.length > 0 ? /* @__PURE__ */ jsx("div", { className: "w-full overflow-auto border dark:border-surface-800 rounded-lg", children: /* @__PURE__ */ jsxs(Table, { className: "w-full", children: [
+      /* @__PURE__ */ jsxs(TableHeader, { children: [
+        /* @__PURE__ */ jsx(TableCell, { header: true, className: "w-16" }),
+        /* @__PURE__ */ jsx(TableCell, { header: true, children: "Name" }),
+        /* @__PURE__ */ jsx(TableCell, { header: true, children: "Target" }),
+        /* @__PURE__ */ jsx(TableCell, { header: true, children: "Cardinality" }),
+        /* @__PURE__ */ jsx(TableCell, { header: true, children: "Direction" })
+      ] }),
+      /* @__PURE__ */ jsx(TableBody, { children: relations.map((relation, index_0) => /* @__PURE__ */ jsxs(TableRow, { className: "cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-800", onClick: () => {
+        setEditingRelationIndex(index_0);
+        setEditingRelationState(relation);
+      }, children: [
+        /* @__PURE__ */ jsx(TableCell, { style: {
+          width: "64px"
+        }, children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: (e_0) => {
+          e_0.stopPropagation();
+          handleDelete(index_0);
+        }, children: /* @__PURE__ */ jsx(DeleteIcon, {}) }) }),
+        /* @__PURE__ */ jsx(TableCell, { className: "font-medium", children: relation.relationName }),
+        /* @__PURE__ */ jsx(TableCell, { children: getTargetSlug(relation.target) || "Function" }),
+        /* @__PURE__ */ jsx(TableCell, { children: relation.cardinality }),
+        /* @__PURE__ */ jsx(TableCell, { children: relation.direction || "owning" })
+      ] }, index_0)) })
+    ] }) }) : /* @__PURE__ */ jsxs("div", { className: "flex-grow flex flex-col border border-dashed dark:border-surface-700 rounded-lg items-center justify-center text-text-disabled py-20", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "mb-4", children: "No relations defined for this collection." }),
+      /* @__PURE__ */ jsx(Button, { variant: "text", onClick: () => {
+        setEditingRelationIndex(-1);
+        setEditingRelationState({
+          relationName: "",
+          target: "",
+          cardinality: "many",
+          direction: "owning"
+        });
+      }, children: "Create your first relation" })
+    ] }),
+    /* @__PURE__ */ jsx(Dialog, { open: !!editingRelationState, onOpenChange: (open) => !open && handleCancel(), maxWidth: "2xl", children: editingRelationState && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { className: "flex justify-between items-center w-full", variant: "h6", children: editingRelationIndex === -1 ? "New Relation" : "Edit Relation" }),
+      /* @__PURE__ */ jsx(DialogContent, { includeMargin: false, className: "p-4 md:p-6 border-t dark:border-surface-800 bg-surface-50 dark:bg-surface-950", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 max-w-2xl mx-auto", children: [
+        /* @__PURE__ */ jsx(TextField, { label: "Relation Name", name: "relationName", placeholder: "e.g. posts", value: editingRelationState.relationName || "", onChange: (e_1) => setEditingRelationState((prev) => prev ? {
+          ...prev,
+          relationName: e_1.target.value
+        } : null) }),
+        /* @__PURE__ */ jsx(Select, { fullWidth: true, label: "Target Collection", value: getTargetSlug(editingRelationState.target), onValueChange: (val) => {
+          setEditingRelationState((prev_0) => {
+            if (!prev_0) return null;
+            const targetFn = () => collections?.find((c2) => c2.slug === val) || {
+              slug: val
+            };
+            targetFn.slug = val;
+            return {
+              ...prev_0,
+              target: targetFn
+            };
+          });
+        }, children: collections?.map((col_0) => /* @__PURE__ */ jsx(SelectItem, { value: col_0.slug, children: col_0.name || col_0.slug }, col_0.slug)) }),
+        /* @__PURE__ */ jsxs(Select, { fullWidth: true, label: "Cardinality", value: editingRelationState.cardinality || "many", onValueChange: (val_0) => setEditingRelationState((prev_1) => prev_1 ? {
+          ...prev_1,
+          cardinality: val_0
+        } : null), children: [
+          /* @__PURE__ */ jsx(SelectItem, { value: "many", children: "Many" }),
+          /* @__PURE__ */ jsx(SelectItem, { value: "one", children: "One" })
+        ] }),
+        /* @__PURE__ */ jsxs(Select, { fullWidth: true, label: "Direction", value: editingRelationState.direction || "owning", onValueChange: (val_1) => setEditingRelationState((prev_2) => prev_2 ? {
+          ...prev_2,
+          direction: val_1
+        } : null), children: [
+          /* @__PURE__ */ jsx(SelectItem, { value: "owning", children: "Owning" }),
+          /* @__PURE__ */ jsx(SelectItem, { value: "inverse", children: "Inverse" })
+        ] }),
+        editingRelationState.cardinality === "many" && editingRelationState.direction === "owning" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mt-4 pt-4 border-t dark:border-surface-800", children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: "text-text-primary", children: "Intermediate Table" }),
+          /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-text-secondary -mt-3", children: "Required for many-to-many relationships. This defines the junction table linking both collections." }),
+          /* @__PURE__ */ jsx(TextField, { label: "Table Name", name: "throughTable", placeholder: "e.g. user_roles", value: editingRelationState.through?.table || "", onChange: (e_2) => setEditingRelationState((prev_3) => prev_3 ? {
+            ...prev_3,
+            through: {
+              ...prev_3.through || {
+                sourceColumn: "",
+                targetColumn: ""
+              },
+              table: e_2.target.value
+            }
+          } : null) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+            /* @__PURE__ */ jsx(TextField, { className: "flex-1", label: "Source Column", name: "sourceColumn", placeholder: "FK to this collection", value: editingRelationState.through?.sourceColumn || "", onChange: (e_3) => setEditingRelationState((prev_4) => prev_4 ? {
+              ...prev_4,
+              through: {
+                ...prev_4.through || {
+                  table: "",
+                  targetColumn: ""
+                },
+                sourceColumn: e_3.target.value
+              }
+            } : null) }),
+            /* @__PURE__ */ jsx(TextField, { className: "flex-1", label: "Target Column", name: "targetColumn", placeholder: "FK to target collection", value: editingRelationState.through?.targetColumn || "", onChange: (e_4) => setEditingRelationState((prev_5) => prev_5 ? {
+              ...prev_5,
+              through: {
+                ...prev_5.through || {
+                  table: "",
+                  sourceColumn: ""
+                },
+                targetColumn: e_4.target.value
+              }
+            } : null) })
+          ] })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxs(DialogActions, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "text", onClick: handleCancel, children: "Cancel" }),
+        /* @__PURE__ */ jsx(Button, { variant: "filled", color: "primary", onClick: handleSave, disabled: !editingRelationState.relationName || !editingRelationState.target, children: "Save" })
+      ] })
+    ] }) })
+  ] }) });
+}
+const EXAMPLE_JSON = `{
+  "id": "products",
+  "name": "Products",
+  "path": "products",
+  "icon": "shopping_cart",
+  "properties": {
+    "name": {
+      "type": "string",
+      "name": "Name",
+      "validation": { "required": true }
+    },
+    "price": {
+      "type": "number",
+      "name": "Price"
+    },
+    "available": {
+      "type": "boolean",
+      "name": "Available"
+    }
+  }
+}`;
+function CollectionJsonImportDialog(t0) {
+  const $ = c(46);
+  const {
+    open,
+    onClose,
+    onImport
+  } = t0;
+  const [jsonValue, setJsonValue] = useState("");
+  let t1;
+  if ($[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t1 = [];
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const [errors, setErrors] = useState(t1);
+  const [touched, setTouched] = useState(false);
+  let t2;
+  if ($[1] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t2 = (e) => {
+      const value = e.target.value;
+      setJsonValue(value);
+      setTouched(true);
+      if (!value.trim()) {
+        setErrors([]);
+        return;
+      }
+      const result = validateCollectionJson(value);
+      setErrors(result.errors);
+    };
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const handleJsonChange = t2;
+  let t3;
+  if ($[2] !== jsonValue || $[3] !== onClose || $[4] !== onImport) {
+    t3 = () => {
+      const result_0 = validateCollectionJson(jsonValue);
+      if (result_0.valid && result_0.collection) {
+        onImport(result_0.collection);
+        setJsonValue("");
+        setErrors([]);
+        setTouched(false);
+        onClose();
+      }
+    };
+    $[2] = jsonValue;
+    $[3] = onClose;
+    $[4] = onImport;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  const handleImport = t3;
+  let t4;
+  if ($[6] !== onClose) {
+    t4 = () => {
+      setJsonValue("");
+      setErrors([]);
+      setTouched(false);
+      onClose();
+    };
+    $[6] = onClose;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  const handleClose = t4;
+  let t5;
+  if ($[8] !== errors.length || $[9] !== jsonValue || $[10] !== touched) {
+    t5 = touched && jsonValue.trim() && errors.length === 0;
+    $[8] = errors.length;
+    $[9] = jsonValue;
+    $[10] = touched;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  const isValid = t5;
+  let t6;
+  if ($[12] !== handleClose) {
+    t6 = (open_0) => !open_0 && handleClose();
+    $[12] = handleClose;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  let t7;
+  if ($[14] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t7 = /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(CodeIcon, { size: "small" }),
+      "Import Collection from JSON"
+    ] });
+    $[14] = t7;
+  } else {
+    t7 = $[14];
+  }
+  let t8;
+  if ($[15] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t8 = /* @__PURE__ */ jsx("code", { className: "bg-surface-200 dark:bg-surface-700 px-1 rounded", children: "id" });
+    $[15] = t8;
+  } else {
+    t8 = $[15];
+  }
+  let t9;
+  if ($[16] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t9 = /* @__PURE__ */ jsx("code", { className: "bg-surface-200 dark:bg-surface-700 px-1 rounded", children: "name" });
+    $[16] = t9;
+  } else {
+    t9 = $[16];
+  }
+  let t10;
+  if ($[17] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t10 = /* @__PURE__ */ jsx("code", { className: "bg-surface-200 dark:bg-surface-700 px-1 rounded", children: "path" });
+    $[17] = t10;
+  } else {
+    t10 = $[17];
+  }
+  let t11;
+  if ($[18] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t11 = /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "secondary", children: [
+      "Paste a JSON object representing your collection configuration. The JSON must include ",
+      t8,
+      ",",
+      t9,
+      ",",
+      t10,
+      ", and",
+      /* @__PURE__ */ jsx("code", { className: "bg-surface-200 dark:bg-surface-700 px-1 rounded", children: "properties" }),
+      "."
+    ] });
+    $[18] = t11;
+  } else {
+    t11 = $[18];
+  }
+  const t12 = errors.length > 0 && touched ? "border-red-500 dark:border-red-400" : "border-surface-300 dark:border-surface-600";
+  let t13;
+  if ($[19] !== t12) {
+    t13 = cls("w-full p-3 font-mono text-sm rounded-md border resize-none overflow-y-auto", "bg-surface-50 dark:bg-surface-900", "focus:outline-none focus:ring-2 focus:ring-primary", "h-[300px]", t12);
+    $[19] = t12;
+    $[20] = t13;
+  } else {
+    t13 = $[20];
+  }
+  let t14;
+  if ($[21] !== jsonValue || $[22] !== t13) {
+    t14 = /* @__PURE__ */ jsx("textarea", { value: jsonValue, onChange: handleJsonChange, placeholder: EXAMPLE_JSON, rows: 12, className: t13 });
+    $[21] = jsonValue;
+    $[22] = t13;
+    $[23] = t14;
+  } else {
+    t14 = $[23];
+  }
+  let t15;
+  if ($[24] !== errors || $[25] !== touched) {
+    t15 = errors.length > 0 && touched && /* @__PURE__ */ jsxs("div", { className: "p-3 bg-red-50 dark:bg-red-900/20 rounded-md border border-red-200 dark:border-red-800", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "font-medium text-red-700 dark:text-red-400 mb-2", children: "Validation errors:" }),
+      /* @__PURE__ */ jsx("ul", { className: "list-disc list-inside space-y-1", children: errors.map(_temp$3) })
+    ] });
+    $[24] = errors;
+    $[25] = touched;
+    $[26] = t15;
+  } else {
+    t15 = $[26];
+  }
+  let t16;
+  if ($[27] !== isValid) {
+    t16 = isValid && /* @__PURE__ */ jsx("div", { className: "p-3 bg-green-50 dark:bg-green-900/20 rounded-md border border-green-200 dark:border-green-800", children: /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-green-700 dark:text-green-400", children: "✓ JSON is valid and ready to import" }) });
+    $[27] = isValid;
+    $[28] = t16;
+  } else {
+    t16 = $[28];
+  }
+  let t17;
+  if ($[29] !== t14 || $[30] !== t15 || $[31] !== t16) {
+    t17 = /* @__PURE__ */ jsxs(DialogContent, { className: "flex flex-col gap-4", children: [
+      t11,
+      t14,
+      t15,
+      t16
+    ] });
+    $[29] = t14;
+    $[30] = t15;
+    $[31] = t16;
+    $[32] = t17;
+  } else {
+    t17 = $[32];
+  }
+  let t18;
+  if ($[33] !== handleClose) {
+    t18 = /* @__PURE__ */ jsx(Button, { variant: "text", onClick: handleClose, children: "Cancel" });
+    $[33] = handleClose;
+    $[34] = t18;
+  } else {
+    t18 = $[34];
+  }
+  const t19 = !isValid;
+  let t20;
+  if ($[35] !== handleImport || $[36] !== t19) {
+    t20 = /* @__PURE__ */ jsx(Button, { variant: "filled", color: "primary", onClick: handleImport, disabled: t19, children: "Import Collection" });
+    $[35] = handleImport;
+    $[36] = t19;
+    $[37] = t20;
+  } else {
+    t20 = $[37];
+  }
+  let t21;
+  if ($[38] !== t18 || $[39] !== t20) {
+    t21 = /* @__PURE__ */ jsxs(DialogActions, { children: [
+      t18,
+      t20
+    ] });
+    $[38] = t18;
+    $[39] = t20;
+    $[40] = t21;
+  } else {
+    t21 = $[40];
+  }
+  let t22;
+  if ($[41] !== open || $[42] !== t17 || $[43] !== t21 || $[44] !== t6) {
+    t22 = /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange: t6, maxWidth: "2xl", children: [
+      t7,
+      t17,
+      t21
+    ] });
+    $[41] = open;
+    $[42] = t17;
+    $[43] = t21;
+    $[44] = t6;
+    $[45] = t22;
+  } else {
+    t22 = $[45];
+  }
+  return t22;
+}
+function _temp$3(error, index) {
+  return /* @__PURE__ */ jsx("li", { className: "text-sm text-red-600 dark:text-red-400", children: error.path ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("code", { className: "bg-red-100 dark:bg-red-900/40 px-1 rounded", children: error.path }),
+    ": ",
+    error.message
+  ] }) : error.message }, index);
+}
+const productsCollectionTemplate = {
+  slug: "products",
+  table: "products",
+  name: "Products",
+  singularName: "Product",
+  icon: "shopping_cart",
+  description: "List of the products currently sold in your shop",
+  properties: {
+    name: {
+      type: "string",
+      name: "Name",
+      description: "Name of this product",
+      validation: {
+        required: true
+      }
+    },
+    brand: {
+      type: "string",
+      name: "Brand",
+      validation: {
+        required: true
+      }
+    },
+    description: {
+      type: "string",
+      name: "Description",
+      description: "Description of this product, supports markdown",
+      markdown: true
+    },
+    main_image: {
+      type: "string",
+      name: "Image",
+      storage: {
+        storagePath: "images",
+        acceptedFiles: ["image/*"]
+      },
+      description: "Upload field for images"
+    },
+    available: {
+      type: "boolean",
+      name: "Available",
+      columnWidth: 100,
+      description: "Is this product available in the website"
+    },
+    price: {
+      type: "number",
+      name: "Price",
+      validation: {
+        requiredMessage: "You must set a positive price",
+        min: 0
+      }
+    },
+    images: {
+      type: "array",
+      name: "Images",
+      hideFromCollection: true,
+      of: {
+        type: "string",
+        storage: {
+          storagePath: "images",
+          acceptedFiles: ["image/*"]
+        }
+      }
+    },
+    related_products: {
+      type: "array",
+      name: "Related products",
+      description: "Products related to this one",
+      of: {
+        type: "reference",
+        path: "products"
+      }
+    },
+    metadata: {
+      name: "Metadata",
+      description: "This is an example of a map property",
+      type: "map",
+      keyValue: true
+    },
+    added_on: {
+      type: "date",
+      name: "Added on",
+      autoValue: "on_create"
+    }
+  }
+};
+const blogCollectionTemplate = {
+  slug: "blog",
+  table: "blog",
+  name: "Blog",
+  singularName: "Blog entry",
+  icon: "article",
+  description: "A collection of blog entries",
+  defaultSize: "l",
+  properties: {
+    name: {
+      name: "Name",
+      validation: {
+        required: true
+      },
+      type: "string"
+    },
+    header_image: {
+      name: "Header image",
+      type: "string",
+      storage: {
+        storagePath: "images",
+        acceptedFiles: ["image/*"],
+        metadata: {
+          cacheControl: "max-age=1000000"
+        }
+      }
+    },
+    content: {
+      name: "Content",
+      description: "Content blocks for the blog entry",
+      validation: {
+        required: true
+      },
+      type: "array",
+      oneOf: {
+        typeField: "type",
+        valueField: "value",
+        properties: {
+          text: {
+            type: "string",
+            name: "Text",
+            markdown: true
+          },
+          quote: {
+            type: "string",
+            name: "Quote",
+            multiline: true
+          },
+          images: {
+            name: "Images",
+            type: "array",
+            of: {
+              type: "string",
+              storage: {
+                storagePath: "images",
+                acceptedFiles: ["image/*"],
+                metadata: {
+                  cacheControl: "max-age=1000000"
+                }
+              }
+            },
+            description: "This fields allows uploading multiple images at once and reordering"
+          },
+          products: {
+            name: "Products",
+            type: "array",
+            of: {
+              type: "reference",
+              path: "products",
+              previewProperties: ["name", "main_image"]
+            }
+          }
+        },
+        propertiesOrder: ["text", "quote", "images", "products"]
+      }
+    },
+    created_on: {
+      name: "Created on",
+      type: "date",
+      autoValue: "on_create"
+    },
+    status: {
+      name: "Status",
+      validation: {
+        required: true
+      },
+      type: "string",
+      enum: {
+        published: {
+          id: "published",
+          label: "Published"
+        },
+        draft: "Draft"
+      },
+      defaultValue: "draft"
+    },
+    publish_date: {
+      name: "Publish date",
+      type: "date",
+      clearable: true
+    },
+    reviewed: {
+      name: "Reviewed",
+      type: "boolean"
+    },
+    tags: {
+      name: "Tags",
+      description: "Example of generic array",
+      type: "array",
+      of: {
+        type: "string",
+        previewAsTag: true
+      }
+    }
+  }
+};
+const usersCollectionTemplate = {
+  slug: "users",
+  table: "users",
+  name: "Users",
+  singularName: "User",
+  description: "Registered users in the app/web",
+  icon: "person",
+  properties: {
+    displayName: {
+      name: "Display name",
+      type: "string"
+    },
+    email: {
+      name: "Email",
+      type: "string",
+      email: true
+    },
+    emailVerified: {
+      name: "Email verified",
+      type: "boolean"
+    },
+    phone: {
+      name: "Phone",
+      type: "string"
+    },
+    favourite_products: {
+      name: "Favourite products",
+      type: "array",
+      of: {
+        type: "reference",
+        path: "products"
+      }
+    },
+    photoURL: {
+      name: "Photo URL",
+      type: "string",
+      url: "image"
+    }
+  }
+};
+const pagesCollectionTemplate = {
+  slug: "pages",
+  table: "pages",
+  name: "Pages",
+  singularName: "Page",
+  icon: "insert_drive_file",
+  description: "List of website pages that can be edited here",
+  properties: {
+    title: {
+      type: "string",
+      name: "Page Title",
+      validation: {
+        required: true
+      }
+    },
+    slug: {
+      type: "string",
+      name: "URL Slug",
+      validation: {
+        required: true,
+        unique: true,
+        matches: "^[a-z0-9]+(?:-[a-z0-9]+)*$",
+        matchesMessage: "Must be lowercase, alphanumeric, and hyphenated"
+      }
+    },
+    hero_section: {
+      type: "map",
+      name: "Hero Section",
+      properties: {
+        headline: {
+          type: "string",
+          name: "Headline",
+          validation: {
+            required: true
+          }
+        },
+        subhead: {
+          type: "string",
+          name: "Subheadline"
+        },
+        background_image: {
+          type: "string",
+          name: "Background Image",
+          storage: {
+            storagePath: "page_hero/images",
+            acceptedFiles: ["image/*"]
+          }
+        },
+        call_to_action: {
+          type: "string",
+          name: "Call to Action"
+        },
+        call_to_action_link: {
+          type: "string",
+          name: "CTA Link",
+          url: true
+        }
+      }
+    },
+    content: {
+      type: "array",
+      name: "Content",
+      oneOf: {
+        properties: {
+          section: {
+            type: "map",
+            name: "Section",
+            properties: {
+              title: {
+                type: "string",
+                name: "Section Title",
+                validation: {
+                  required: true
+                }
+              },
+              content: {
+                type: "string",
+                name: "Section Content",
+                markdown: true
+              },
+              image: {
+                type: "string",
+                name: "Section Image",
+                storage: {
+                  storagePath: "page_sections/images",
+                  acceptedFiles: ["image/*"]
+                }
+              },
+              link: {
+                type: "string",
+                name: "Section Link",
+                url: true
+              }
+            }
+          },
+          image: {
+            type: "string",
+            name: "Image",
+            storage: {
+              storagePath: "page_sections/images",
+              acceptedFiles: ["image/*"]
+            }
+          },
+          slider: {
+            type: "array",
+            name: "Slider",
+            of: {
+              type: "map",
+              properties: {
+                title: {
+                  type: "string",
+                  name: "Title",
+                  validation: {
+                    required: true
+                  }
+                },
+                image: {
+                  type: "string",
+                  storage: {
+                    storagePath: "page_sections/images",
+                    acceptedFiles: ["image/*"]
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    sidebar: {
+      type: "map",
+      name: "Sidebar",
+      properties: {
+        title: {
+          type: "string",
+          name: "Sidebar Title",
+          validation: {
+            required: false
+          }
+        },
+        content: {
+          type: "string",
+          name: "Sidebar Content",
+          markdown: true
+        }
+      }
+    },
+    seo_metadata: {
+      type: "map",
+      name: "SEO Metadata",
+      properties: {
+        meta_title: {
+          type: "string",
+          name: "Meta Title"
+        },
+        meta_description: {
+          type: "string",
+          name: "Meta Description"
+        },
+        focus_keywords: {
+          type: "array",
+          name: "Focus Keywords",
+          of: {
+            type: "string"
+          }
+        }
+      }
+    },
+    footer_override: {
+      type: "string",
+      name: "Footer Override",
+      markdown: true
+    },
+    publish_date: {
+      type: "date",
+      name: "Publish Date",
+      validation: {
+        required: true
+      }
+    },
+    last_updated: {
+      type: "date",
+      name: "Last Updated",
+      autoValue: "on_update"
+    },
+    is_published: {
+      type: "boolean",
+      name: "Is Published",
+      columnWidth: 100,
+      description: "Should this page be live on the site?"
+    }
+  }
+};
+function AICollectionGeneratorPopover({
+  existingCollection,
+  onGenerated,
+  generateCollection,
+  trigger,
+  size = "small",
+  showLabel = true,
+  onAnalyticsEvent
+}) {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [prompt, setPrompt] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const collectionRegistry = useCollectionRegistryController();
+  const configController = useCollectionsConfigController();
+  const snackbarController = useSnackbarController();
+  const existingCollections = collectionRegistry.collections ?? [];
+  const handleGenerate = async () => {
+    if (!prompt.trim()) return;
+    setLoading(true);
+    setError(null);
+    const mode = existingCollection ? "modify" : "create";
+    onAnalyticsEvent?.("ai_collection_generate_start", {
+      mode
+    });
+    try {
+      const collectionsContext = existingCollections.map((c2) => ({
+        slug: c2.slug,
+        name: c2.name,
+        properties: c2.properties,
+        propertiesOrder: c2.propertiesOrder
+      }));
+      const result = await generateCollection({
+        prompt: prompt.trim(),
+        existingCollections: collectionsContext.slice(0, 30),
+        ...existingCollection && {
+          existingCollection: {
+            slug: existingCollection.slug,
+            name: existingCollection.name,
+            properties: existingCollection.properties,
+            propertiesOrder: existingCollection.propertiesOrder
+          }
+        }
+      });
+      onGenerated(result.collection, result.operations);
+      setMenuOpen(false);
+      setPrompt("");
+      onAnalyticsEvent?.("ai_collection_generate_success", {
+        mode,
+        operationsCount: result.operations?.length
+      });
+      snackbarController.open({
+        type: "success",
+        message: existingCollection ? "Collection updated with AI suggestions" : "Collection generated successfully"
+      });
+    } catch (e) {
+      console.error("Error generating collection:", e);
+      const errorMessage = e instanceof CollectionGenerationApiError ? e.message : "Failed to generate collection. Please try again.";
+      setError(errorMessage);
+      onAnalyticsEvent?.("ai_collection_generate_error", {
+        mode,
+        error: errorMessage
+      });
+      snackbarController.open({
+        type: "error",
+        message: errorMessage
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleKeyDown = (e_0) => {
+    if (e_0.key === "Enter" && !e_0.shiftKey) {
+      e_0.preventDefault();
+      handleGenerate();
+    }
+  };
+  const tooltipTitle = configController?.readOnly ? configController.readOnlyReason || "Collection generation is disabled" : void 0;
+  const defaultTrigger = showLabel ? /* @__PURE__ */ jsx(Tooltip, { title: tooltipTitle, asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "text", size, disabled: loading || configController?.readOnly, startIcon: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: "smallest" }) : /* @__PURE__ */ jsx(AIIcon, { size: "small" }), children: "AI Assist" }) }) : /* @__PURE__ */ jsx(Tooltip, { title: tooltipTitle, asChild: true, children: /* @__PURE__ */ jsx(IconButton, { size, disabled: loading || configController?.readOnly, "aria-label": "AI Assist", children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: "smallest" }) : /* @__PURE__ */ jsx(AIIcon, { size: "small" }) }) });
+  return /* @__PURE__ */ jsx(Menu, { open: menuOpen, onOpenChange: (open) => {
+    setMenuOpen(open);
+    if (!open) {
+      setError(null);
+    }
+  }, trigger: trigger ?? defaultTrigger, children: /* @__PURE__ */ jsxs("div", { className: "p-4 flex flex-col gap-3 min-w-[360px] max-w-[480px]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(AIIcon, { size: "small" }),
+      /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: existingCollection ? "Modify Collection with AI" : "Generate Collection with AI" })
+    ] }),
+    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: existingCollection ? "Describe the changes you want to make to this collection." : "Describe the collection you want to create." }),
+    /* @__PURE__ */ jsx(TextField, { size: "small", multiline: true, autoFocus: true, className: "w-full text-text-primary dark:text-text-primary-dark", value: prompt, onChange: (e_1) => setPrompt(e_1.target.value), onKeyDown: handleKeyDown, placeholder: existingCollection ? "e.g., Add a thumbnail image field with storage, make price required..." : "e.g., Create a products collection with name, price, description, and category...", disabled: loading }),
+    error && /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-red-500", children: error }),
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "text", size: "small", onClick: () => setMenuOpen(false), disabled: loading, children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { variant: "filled", size: "small", onClick: handleGenerate, disabled: !prompt.trim() || loading, startIcon: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: "smallest" }) : void 0, children: loading ? "Generating..." : "Generate" })
+    ] })
+  ] }) });
+}
+function CollectionEditorWelcomeView(t0) {
+  const $ = c(90);
+  const {
+    parentCollection,
+    onContinue,
+    existingCollectionPaths,
+    generateCollection,
+    onAnalyticsEvent,
+    unmappedTables,
+    onImportFromTable
+  } = t0;
+  const {
+    pathSuggestions
+  } = useCollectionEditorController();
+  let t1;
+  if ($[0] !== pathSuggestions) {
+    t1 = pathSuggestions ?? [];
+    $[0] = pathSuggestions;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== existingCollectionPaths) {
+    t2 = (s) => !(existingCollectionPaths ?? []).find((c2) => c2.trim().toLowerCase() === s.trim().toLowerCase());
+    $[2] = existingCollectionPaths;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const filteredSuggestions = t1.filter(t2);
+  const {
+    setFieldValue,
+    setValues
+  } = useFormex();
+  const [jsonImportOpen, setJsonImportOpen] = useState(false);
+  const [importingTable, setImportingTable] = useState(null);
+  let t3;
+  if ($[4] !== unmappedTables) {
+    t3 = unmappedTables ?? [];
+    $[4] = unmappedTables;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let T0;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  let t9;
+  if ($[6] !== existingCollectionPaths || $[7] !== importingTable || $[8] !== onContinue || $[9] !== onImportFromTable || $[10] !== parentCollection || $[11] !== setFieldValue || $[12] !== t3) {
+    let t102;
+    if ($[20] !== existingCollectionPaths) {
+      t102 = (t) => !(existingCollectionPaths ?? []).find((c_0) => c_0.trim().toLowerCase() === t.trim().toLowerCase());
+      $[20] = existingCollectionPaths;
+      $[21] = t102;
+    } else {
+      t102 = $[21];
+    }
+    const filteredUnmappedTables = t3.filter(t102);
+    t9 = "overflow-auto my-auto";
+    T0 = Container;
+    t4 = "4xl";
+    t5 = "flex flex-col gap-4 p-8 m-auto";
+    if ($[22] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t6 = /* @__PURE__ */ jsx("div", { className: "flex flex-row py-2 pt-3 items-center", children: /* @__PURE__ */ jsx(Typography, { variant: "h4", className: "grow", children: "New collection" }) });
+      $[22] = t6;
+    } else {
+      t6 = $[22];
+    }
+    if ($[23] !== parentCollection) {
+      t7 = parentCollection && /* @__PURE__ */ jsx(Chip, { colorScheme: "tealDarker", children: /* @__PURE__ */ jsxs(Typography, { variant: "caption", children: [
+        "This is a subcollection of ",
+        /* @__PURE__ */ jsx("b", { children: parentCollection.name })
+      ] }) });
+      $[23] = parentCollection;
+      $[24] = t7;
+    } else {
+      t7 = $[24];
+    }
+    t8 = filteredUnmappedTables.length > 0 && /* @__PURE__ */ jsxs("div", { className: "my-2", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: "● Import from an existing database table:" }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-x-2 gap-y-1 items-center my-2 min-h-7", children: filteredUnmappedTables.map((tableName) => /* @__PURE__ */ jsxs(Chip, { colorScheme: "purpleLighter", onClick: () => {
+        if (onImportFromTable) {
+          setImportingTable(tableName);
+          onImportFromTable(tableName);
+        } else {
+          setFieldValue("name", prettifyIdentifier(tableName));
+          setFieldValue("id", tableName);
+          setFieldValue("path", tableName);
+          onContinue();
+        }
+      }, size: "small", children: [
+        /* @__PURE__ */ jsx(Icon, { iconKey: "table", size: "smallest" }),
+        importingTable === tableName ? "Loading..." : tableName
+      ] }, tableName)) })
+    ] });
+    $[6] = existingCollectionPaths;
+    $[7] = importingTable;
+    $[8] = onContinue;
+    $[9] = onImportFromTable;
+    $[10] = parentCollection;
+    $[11] = setFieldValue;
+    $[12] = t3;
+    $[13] = T0;
+    $[14] = t4;
+    $[15] = t5;
+    $[16] = t6;
+    $[17] = t7;
+    $[18] = t8;
+    $[19] = t9;
+  } else {
+    T0 = $[13];
+    t4 = $[14];
+    t5 = $[15];
+    t6 = $[16];
+    t7 = $[17];
+    t8 = $[18];
+    t9 = $[19];
+  }
+  const t10 = (filteredSuggestions ?? []).length > 0 && /* @__PURE__ */ jsxs("div", { className: "my-2", children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: "● Use one of the existing paths in your database:" }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-x-2 gap-y-1 items-center my-2 min-h-7", children: filteredSuggestions?.map((suggestion, index) => /* @__PURE__ */ jsx(Chip, { colorScheme: "cyanLighter", onClick: () => {
+      setFieldValue("name", prettifyIdentifier(suggestion));
+      setFieldValue("id", suggestion);
+      setFieldValue("path", suggestion);
+      setFieldValue("properties", void 0);
+      onContinue();
+    }, size: "small", children: suggestion }, suggestion)) })
+  ] });
+  let t11;
+  if ($[25] !== generateCollection || $[26] !== onAnalyticsEvent || $[27] !== onContinue || $[28] !== setValues) {
+    t11 = generateCollection && /* @__PURE__ */ jsxs("div", { className: "my-2", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", className: "mb-2", children: "● Describe your collection to AI:" }),
+      /* @__PURE__ */ jsx(AICollectionGeneratorPopover, { onGenerated: (generatedCollection) => {
+        setValues(generatedCollection);
+        onContinue();
+      }, generateCollection, onAnalyticsEvent, trigger: /* @__PURE__ */ jsx(Button, { variant: "filled", color: "neutral", startIcon: /* @__PURE__ */ jsx(AIIcon, { size: "small" }), children: "Generate with AI" }) })
+    ] });
+    $[25] = generateCollection;
+    $[26] = onAnalyticsEvent;
+    $[27] = onContinue;
+    $[28] = setValues;
+    $[29] = t11;
+  } else {
+    t11 = $[29];
+  }
+  let t12;
+  if ($[30] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t12 = /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", className: "mb-2", children: "● Create from JSON configuration:" });
+    $[30] = t12;
+  } else {
+    t12 = $[30];
+  }
+  let t13;
+  if ($[31] !== setJsonImportOpen) {
+    t13 = () => setJsonImportOpen(true);
+    $[31] = setJsonImportOpen;
+    $[32] = t13;
+  } else {
+    t13 = $[32];
+  }
+  let t14;
+  if ($[33] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t14 = /* @__PURE__ */ jsx(CodeIcon, { size: "small" });
+    $[33] = t14;
+  } else {
+    t14 = $[33];
+  }
+  let t15;
+  if ($[34] !== t13) {
+    t15 = /* @__PURE__ */ jsx(Button, { variant: "filled", color: "neutral", onClick: t13, startIcon: t14, children: "Paste JSON Configuration" });
+    $[34] = t13;
+    $[35] = t15;
+  } else {
+    t15 = $[35];
+  }
+  let t16;
+  if ($[36] !== setJsonImportOpen) {
+    t16 = () => setJsonImportOpen(false);
+    $[36] = setJsonImportOpen;
+    $[37] = t16;
+  } else {
+    t16 = $[37];
+  }
+  let t17;
+  if ($[38] !== onContinue || $[39] !== setValues) {
+    t17 = (collection) => {
+      setValues(collection);
+      onContinue();
+    };
+    $[38] = onContinue;
+    $[39] = setValues;
+    $[40] = t17;
+  } else {
+    t17 = $[40];
+  }
+  let t18;
+  if ($[41] !== jsonImportOpen || $[42] !== t16 || $[43] !== t17) {
+    t18 = /* @__PURE__ */ jsx(CollectionJsonImportDialog, { open: jsonImportOpen, onClose: t16, onImport: t17 });
+    $[41] = jsonImportOpen;
+    $[42] = t16;
+    $[43] = t17;
+    $[44] = t18;
+  } else {
+    t18 = $[44];
+  }
+  let t19;
+  if ($[45] !== t15 || $[46] !== t18) {
+    t19 = /* @__PURE__ */ jsxs("div", { className: "my-2", children: [
+      t12,
+      t15,
+      t18
+    ] });
+    $[45] = t15;
+    $[46] = t18;
+    $[47] = t19;
+  } else {
+    t19 = $[47];
+  }
+  let t20;
+  if ($[48] !== t11 || $[49] !== t19) {
+    t20 = /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-8", children: [
+      t11,
+      t19
+    ] });
+    $[48] = t11;
+    $[49] = t19;
+    $[50] = t20;
+  } else {
+    t20 = $[50];
+  }
+  let t21;
+  if ($[51] !== onContinue || $[52] !== parentCollection) {
+    t21 = !parentCollection && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", className: "mb-2", children: "● Create a collection from a file (csv, json, xls, xslx...)" }),
+      /* @__PURE__ */ jsx(ImportFileUpload, { onDataAdded: (data, propertiesOrder) => onContinue(data, propertiesOrder) })
+    ] });
+    $[51] = onContinue;
+    $[52] = parentCollection;
+    $[53] = t21;
+  } else {
+    t21 = $[53];
+  }
+  let t22;
+  if ($[54] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t22 = /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: "● Select a template:" });
+    $[54] = t22;
+  } else {
+    t22 = $[54];
+  }
+  let t23;
+  if ($[55] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t23 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: productsCollectionTemplate.icon });
+    $[55] = t23;
+  } else {
+    t23 = $[55];
+  }
+  let t24;
+  if ($[56] !== onContinue || $[57] !== setValues) {
+    t24 = /* @__PURE__ */ jsx(TemplateButton, { title: "Products", subtitle: "A collection of products with images, prices and stock", icon: t23, onClick: () => {
+      setValues(productsCollectionTemplate);
+      onContinue();
+    } });
+    $[56] = onContinue;
+    $[57] = setValues;
+    $[58] = t24;
+  } else {
+    t24 = $[58];
+  }
+  let t25;
+  if ($[59] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t25 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: usersCollectionTemplate.icon });
+    $[59] = t25;
+  } else {
+    t25 = $[59];
+  }
+  let t26;
+  if ($[60] !== onContinue || $[61] !== setValues) {
+    t26 = /* @__PURE__ */ jsx(TemplateButton, { title: "Users", subtitle: "A collection of users with emails, names and roles", icon: t25, onClick: () => {
+      setValues(usersCollectionTemplate);
+      onContinue();
+    } });
+    $[60] = onContinue;
+    $[61] = setValues;
+    $[62] = t26;
+  } else {
+    t26 = $[62];
+  }
+  let t27;
+  if ($[63] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t27 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: blogCollectionTemplate.icon });
+    $[63] = t27;
+  } else {
+    t27 = $[63];
+  }
+  let t28;
+  if ($[64] !== onContinue || $[65] !== setValues) {
+    t28 = /* @__PURE__ */ jsx(TemplateButton, { title: "Blog posts", subtitle: "A collection of blog posts with images, authors and complex content", icon: t27, onClick: () => {
+      setValues(blogCollectionTemplate);
+      onContinue();
+    } });
+    $[64] = onContinue;
+    $[65] = setValues;
+    $[66] = t28;
+  } else {
+    t28 = $[66];
+  }
+  let t29;
+  if ($[67] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t29 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: pagesCollectionTemplate.icon });
+    $[67] = t29;
+  } else {
+    t29 = $[67];
+  }
+  let t30;
+  if ($[68] !== onContinue || $[69] !== setValues) {
+    t30 = /* @__PURE__ */ jsx(TemplateButton, { title: "Pages", subtitle: "A collection of pages with images, authors and complex content", icon: t29, onClick: () => {
+      setValues(pagesCollectionTemplate);
+      onContinue();
+    } });
+    $[68] = onContinue;
+    $[69] = setValues;
+    $[70] = t30;
+  } else {
+    t30 = $[70];
+  }
+  let t31;
+  if ($[71] !== t24 || $[72] !== t26 || $[73] !== t28 || $[74] !== t30) {
+    t31 = /* @__PURE__ */ jsxs("div", { className: "my-2", children: [
+      t22,
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        t24,
+        t26,
+        t28,
+        t30
+      ] })
+    ] });
+    $[71] = t24;
+    $[72] = t26;
+    $[73] = t28;
+    $[74] = t30;
+    $[75] = t31;
+  } else {
+    t31 = $[75];
+  }
+  let t32;
+  if ($[76] !== T0 || $[77] !== t10 || $[78] !== t20 || $[79] !== t21 || $[80] !== t31 || $[81] !== t4 || $[82] !== t5 || $[83] !== t6 || $[84] !== t7 || $[85] !== t8) {
+    t32 = /* @__PURE__ */ jsxs(T0, { maxWidth: t4, className: t5, children: [
+      t6,
+      t7,
+      t8,
+      t10,
+      t20,
+      t21,
+      t31
+    ] });
+    $[76] = T0;
+    $[77] = t10;
+    $[78] = t20;
+    $[79] = t21;
+    $[80] = t31;
+    $[81] = t4;
+    $[82] = t5;
+    $[83] = t6;
+    $[84] = t7;
+    $[85] = t8;
+    $[86] = t32;
+  } else {
+    t32 = $[86];
+  }
+  let t33;
+  if ($[87] !== t32 || $[88] !== t9) {
+    t33 = /* @__PURE__ */ jsx("div", { className: t9, children: t32 });
+    $[87] = t32;
+    $[88] = t9;
+    $[89] = t33;
+  } else {
+    t33 = $[89];
+  }
+  return t33;
+}
+function TemplateButton(t0) {
+  const $ = c(10);
+  const {
+    title,
+    subtitle,
+    icon,
+    onClick
+  } = t0;
+  let t1;
+  if ($[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t1 = cls("my-2 rounded-md border px-4 py-3 focus:outline-none transition ease-in-out duration-150 flex flex-row gap-4 items-center", "text-text-secondary dark:text-text-secondary-dark", "hover:border-primary-dark hover:text-primary-dark dark:hover:text-primary focus:ring-primary hover:ring-1 hover:ring-primary", "border-surface-400 dark:border-surface-600 ");
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  let t2;
+  if ($[1] !== title) {
+    t2 = /* @__PURE__ */ jsx("div", { className: "flex flex-col items-start", children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: title }) });
+    $[1] = title;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] !== icon || $[4] !== onClick || $[5] !== t2) {
+    t3 = /* @__PURE__ */ jsxs(Card, { onClick, className: t1, children: [
+      icon,
+      t2
+    ] });
+    $[3] = icon;
+    $[4] = onClick;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== subtitle || $[8] !== t3) {
+    t4 = /* @__PURE__ */ jsx(Tooltip, { title: subtitle, asChild: true, children: t3 });
+    $[7] = subtitle;
+    $[8] = t3;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  return t4;
+}
+function CollectionEditorImportMapping(t0) {
+  const $ = c(32);
+  const {
+    importConfig,
+    propertyConfigs
+  } = t0;
+  const {
+    setFieldValue,
+    setFieldTouched,
+    values
+  } = useFormex();
+  const [selectedProperty, setSelectedProperty] = useState(void 0);
+  let t1;
+  if ($[0] !== values.propertiesOrder) {
+    t1 = values.propertiesOrder ? {
+      "": values.propertiesOrder
+    } : {};
+    $[0] = values.propertiesOrder;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const currentPropertiesOrderRef = React__default.useRef(t1);
+  const propertyKey = selectedProperty ? selectedProperty.id : void 0;
+  const property = selectedProperty || void 0;
+  let t2;
+  if ($[2] !== importConfig || $[3] !== setFieldTouched || $[4] !== setFieldValue || $[5] !== values) {
+    t2 = (t32) => {
+      const {
+        id,
+        property: property_0,
+        previousId,
+        namespace
+      } = t32;
+      const fullId = id ? getFullId(id, namespace) : void 0;
+      const propertyPath = fullId ? idToPropertiesPath(fullId) : void 0;
+      const getCurrentPropertiesOrder = (namespace_0) => {
+        if (!namespace_0) {
+          return currentPropertiesOrderRef.current[""];
+        }
+        return currentPropertiesOrderRef.current[namespace_0] ?? getIn(values, namespaceToPropertiesOrderPath(namespace_0));
+      };
+      const updatePropertiesOrder = (newPropertiesOrder, namespace_1) => {
+        const propertiesOrderPath = namespaceToPropertiesOrderPath(namespace_1);
+        setFieldValue(propertiesOrderPath, newPropertiesOrder, false);
+        currentPropertiesOrderRef.current[namespace_1 ?? ""] = newPropertiesOrder;
+      };
+      if (previousId && previousId !== id) {
+        const previousFullId = getFullId(previousId, namespace);
+        const previousPropertyPath = idToPropertiesPath(previousFullId);
+        const currentPropertiesOrder = getCurrentPropertiesOrder(namespace);
+        const newPropertiesOrder_0 = currentPropertiesOrder.map((p) => p === previousId ? id : p).filter(_temp$2);
+        updatePropertiesOrder(newPropertiesOrder_0, namespace);
+        const newHeadersMapping = {
+          ...importConfig.headersMapping
+        };
+        Object.keys(newHeadersMapping).forEach((key) => {
+          if (newHeadersMapping[key] === previousId) {
+            newHeadersMapping[key] = id ?? "";
+          }
+        });
+        importConfig.setHeadersMapping(newHeadersMapping);
+        setFieldValue(previousPropertyPath, void 0, false);
+        setFieldTouched(previousPropertyPath, false, false);
+      }
+      if (propertyPath) {
+        setFieldValue(propertyPath, property_0, false);
+        setFieldTouched(propertyPath, true, false);
+      }
+    };
+    $[2] = importConfig;
+    $[3] = setFieldTouched;
+    $[4] = setFieldValue;
+    $[5] = values;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  const onPropertyChanged = t2;
+  let t3;
+  if ($[7] !== importConfig.importData || $[8] !== setFieldTouched || $[9] !== setFieldValue) {
+    t3 = async (t42) => {
+      const {
+        id: id_0,
+        importKey,
+        property: property_1,
+        namespace: namespace_2
+      } = t42;
+      const fullId_0 = id_0 ? getFullId(id_0, namespace_2) : void 0;
+      const propertyPath_0 = fullId_0 ? idToPropertiesPath(fullId_0) : void 0;
+      const propertyData = importConfig.importData.map((d) => getIn(d, importKey));
+      const inferredNewProperty = {
+        ...buildPropertyFromData(propertyData, property_1, getInferenceType)
+      };
+      if (propertyPath_0) {
+        if (inferredNewProperty) {
+          setFieldValue(propertyPath_0, inferredNewProperty, false);
+        } else {
+          setFieldValue(propertyPath_0, property_1, false);
+        }
+        setFieldTouched(propertyPath_0, true, false);
+      }
+    };
+    $[7] = importConfig.importData;
+    $[8] = setFieldTouched;
+    $[9] = setFieldValue;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  const onPropertyTypeChanged = t3;
+  let t4;
+  if ($[11] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t4 = /* @__PURE__ */ jsx(Typography, { variant: "h6", className: "my-4 ml-3.5", children: "Data property mapping" });
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  const t5 = values.properties;
+  let t6;
+  if ($[12] !== onPropertyTypeChanged || $[13] !== propertyConfigs || $[14] !== setFieldValue) {
+    t6 = (t72) => {
+      const {
+        property: property_2,
+        propertyKey: propertyKey_0,
+        importKey: importKey_0,
+        isIdColumn
+      } = t72;
+      if (isIdColumn) {
+        return /* @__PURE__ */ jsx(Typography, { children: " This column will be used as ID" });
+      }
+      return /* @__PURE__ */ jsx(ImportNewPropertyFieldPreview, { property: property_2, propertyKey: propertyKey_0, onPropertyNameChanged: (propertyKey_1, value) => setFieldValue(`properties.${propertyKey_1}.name`, value, false), onEditClick: () => {
+        if (!propertyKey_0 || !property_2) {
+          return;
+        }
+        setSelectedProperty({
+          ...property_2,
+          id: propertyKey_0
+        });
+      }, propertyTypeView: /* @__PURE__ */ jsx(PropertySelect, { property: property_2, disabled: false, onPropertyChanged: (props) => onPropertyTypeChanged({
+        ...props,
+        importKey: importKey_0
+      }), propertyKey: propertyKey_0, propertyConfigs }) });
+    };
+    $[12] = onPropertyTypeChanged;
+    $[13] = propertyConfigs;
+    $[14] = setFieldValue;
+    $[15] = t6;
+  } else {
+    t6 = $[15];
+  }
+  let t7;
+  if ($[16] !== importConfig || $[17] !== t5 || $[18] !== t6) {
+    t7 = /* @__PURE__ */ jsxs(Container, { maxWidth: "6xl", className: "flex flex-col gap-4 p-8 m-auto", children: [
+      t4,
+      /* @__PURE__ */ jsx(DataNewPropertiesMapping, { importConfig, destinationProperties: t5, buildPropertyView: t6 })
+    ] });
+    $[16] = importConfig;
+    $[17] = t5;
+    $[18] = t6;
+    $[19] = t7;
+  } else {
+    t7 = $[19];
+  }
+  const t8 = selectedProperty !== void 0;
+  let t10;
+  let t9;
+  if ($[20] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t9 = () => {
+      setSelectedProperty(void 0);
+    };
+    t10 = () => {
+      setSelectedProperty(void 0);
+    };
+    $[20] = t10;
+    $[21] = t9;
+  } else {
+    t10 = $[20];
+    t9 = $[21];
+  }
+  let t11;
+  if ($[22] !== onPropertyChanged || $[23] !== property || $[24] !== propertyConfigs || $[25] !== propertyKey || $[26] !== t8) {
+    t11 = /* @__PURE__ */ jsx(PropertyFormDialog, { open: t8, propertyKey, property, inArray: false, autoUpdateId: false, onPropertyChanged, allowDataInference: false, onOkClicked: t9, onCancel: t10, autoOpenTypeSelect: false, existingProperty: false, propertyConfigs });
+    $[22] = onPropertyChanged;
+    $[23] = property;
+    $[24] = propertyConfigs;
+    $[25] = propertyKey;
+    $[26] = t8;
+    $[27] = t11;
+  } else {
+    t11 = $[27];
+  }
+  let t12;
+  if ($[28] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t12 = /* @__PURE__ */ jsx("div", { style: {
+      height: "52px"
+    } });
+    $[28] = t12;
+  } else {
+    t12 = $[28];
+  }
+  let t13;
+  if ($[29] !== t11 || $[30] !== t7) {
+    t13 = /* @__PURE__ */ jsxs("div", { className: "overflow-auto my-auto", children: [
+      t7,
+      t11,
+      t12
+    ] });
+    $[29] = t11;
+    $[30] = t7;
+    $[31] = t13;
+  } else {
+    t13 = $[31];
+  }
+  return t13;
+}
+function _temp$2(p_0) {
+  return p_0 !== void 0;
+}
+function PropertySelect(t0) {
+  const $ = c(24);
+  const {
+    property,
+    onPropertyChanged,
+    propertyKey,
+    propertyConfigs,
+    disabled
+  } = t0;
+  let t1;
+  if ($[0] !== property) {
+    t1 = property ? getFieldId(property) : null;
+    $[0] = property;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const fieldId = t1;
+  let t2;
+  if ($[2] !== property || $[3] !== propertyConfigs) {
+    t2 = property ? getFieldConfig(property, propertyConfigs) : null;
+    $[2] = property;
+    $[3] = propertyConfigs;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const widget = t2;
+  const [selectOpen, setSelectOpen] = useState(false);
+  const t3 = property && widget ? `${widget?.name} - ${property.type}` : void 0;
+  const t4 = selectOpen ? false : void 0;
+  const t5 = !widget;
+  const t6 = fieldId ?? "";
+  let t7;
+  if ($[5] !== widget) {
+    t7 = (value) => {
+      if (!widget) {
+        return null;
+      }
+      return /* @__PURE__ */ jsx(PropertyConfigBadge, { propertyConfig: widget });
+    };
+    $[5] = widget;
+    $[6] = t7;
+  } else {
+    t7 = $[6];
+  }
+  let t8;
+  if ($[7] !== onPropertyChanged || $[8] !== property || $[9] !== propertyConfigs || $[10] !== propertyKey) {
+    t8 = (newSelectedWidgetId) => {
+      const newProperty = updatePropertyFromWidget(property, newSelectedWidgetId, propertyConfigs);
+      if (!propertyKey) {
+        return;
+      }
+      onPropertyChanged({
+        id: propertyKey,
+        property: newProperty,
+        previousId: propertyKey,
+        namespace: void 0
+      });
+    };
+    $[7] = onPropertyChanged;
+    $[8] = property;
+    $[9] = propertyConfigs;
+    $[10] = propertyKey;
+    $[11] = t8;
+  } else {
+    t8 = $[11];
+  }
+  let t9;
+  if ($[12] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t9 = Object.entries(supportedFields).map(_temp2);
+    $[12] = t9;
+  } else {
+    t9 = $[12];
+  }
+  let t10;
+  if ($[13] !== disabled || $[14] !== selectOpen || $[15] !== t5 || $[16] !== t6 || $[17] !== t7 || $[18] !== t8) {
+    t10 = /* @__PURE__ */ jsx(Select, { open: selectOpen, onOpenChange: setSelectOpen, invisible: true, className: "w-full", disabled, error: t5, fullWidth: true, value: t6, placeholder: "Select a property widget", position: "item-aligned", renderValue: t7, onValueChange: t8, children: t9 });
+    $[13] = disabled;
+    $[14] = selectOpen;
+    $[15] = t5;
+    $[16] = t6;
+    $[17] = t7;
+    $[18] = t8;
+    $[19] = t10;
+  } else {
+    t10 = $[19];
+  }
+  let t11;
+  if ($[20] !== t10 || $[21] !== t3 || $[22] !== t4) {
+    t11 = /* @__PURE__ */ jsx(Tooltip, { title: t3, open: t4, children: t10 });
+    $[20] = t10;
+    $[21] = t3;
+    $[22] = t4;
+    $[23] = t11;
+  } else {
+    t11 = $[23];
+  }
+  return t11;
+}
+function _temp2(t0) {
+  const [key, widget_0] = t0;
+  return /* @__PURE__ */ jsx(ImportPropertySelectItem, { value: key, optionDisabled: false, propertyConfig: widget_0, existing: false }, key);
+}
+function ImportPropertySelectItem(t0) {
+  const $ = c(19);
+  const {
+    value,
+    optionDisabled,
+    propertyConfig,
+    existing
+  } = t0;
+  const t1 = optionDisabled ? "w-full" : "";
+  let t2;
+  if ($[0] !== t1) {
+    t2 = cls("flex flex-row items-center text-base min-h-[48px]", t1);
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== propertyConfig) {
+    t3 = /* @__PURE__ */ jsx("div", { className: "mr-8", children: /* @__PURE__ */ jsx(PropertyConfigBadge, { propertyConfig }) });
+    $[2] = propertyConfig;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== propertyConfig.name) {
+    t4 = /* @__PURE__ */ jsx("div", { children: propertyConfig.name });
+    $[4] = propertyConfig.name;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  const t5 = existing && optionDisabled ? "You can only switch to widgets that use the same data type" : propertyConfig.description;
+  let t6;
+  if ($[6] !== t5) {
+    t6 = /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "disabled", className: "max-w-sm", children: t5 });
+    $[6] = t5;
+    $[7] = t6;
+  } else {
+    t6 = $[7];
+  }
+  let t7;
+  if ($[8] !== t4 || $[9] !== t6) {
+    t7 = /* @__PURE__ */ jsxs("div", { children: [
+      t4,
+      t6
+    ] });
+    $[8] = t4;
+    $[9] = t6;
+    $[10] = t7;
+  } else {
+    t7 = $[10];
+  }
+  let t8;
+  if ($[11] !== t2 || $[12] !== t3 || $[13] !== t7) {
+    t8 = /* @__PURE__ */ jsxs("div", { className: t2, children: [
+      t3,
+      t7
+    ] });
+    $[11] = t2;
+    $[12] = t3;
+    $[13] = t7;
+    $[14] = t8;
+  } else {
+    t8 = $[14];
+  }
+  let t9;
+  if ($[15] !== optionDisabled || $[16] !== t8 || $[17] !== value) {
+    t9 = /* @__PURE__ */ jsx(SelectItem, { value, disabled: optionDisabled, className: "flex flex-row items-center", children: t8 });
+    $[15] = optionDisabled;
+    $[16] = t8;
+    $[17] = value;
+    $[18] = t9;
+  } else {
+    t9 = $[18];
+  }
+  return t9;
+}
+function CollectionEditorImportDataPreview(t0) {
+  const $ = c(20);
+  const {
+    importConfig,
+    properties,
+    propertiesOrder
+  } = t0;
+  const authController = useAuthController();
+  const registry = useCollectionRegistryController();
+  const [loading, setLoading] = useState(false);
+  let t1;
+  if ($[0] !== authController || $[1] !== importConfig || $[2] !== properties || $[3] !== registry) {
+    t1 = async function loadEntities2() {
+      const mappedData = importConfig.importData.map((d) => convertDataToEntity(authController, registry, d, importConfig.idColumn, importConfig.headersMapping, properties, "TEMP_PATH", importConfig.defaultValues));
+      importConfig.setEntities(mappedData);
+    };
+    $[0] = authController;
+    $[1] = importConfig;
+    $[2] = properties;
+    $[3] = registry;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  const loadEntities = t1;
+  let t2;
+  if ($[5] !== loadEntities) {
+    t2 = () => {
+      loadEntities().finally(() => setLoading(false));
+    };
+    $[5] = loadEntities;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t3 = [];
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  useEffect(t2, t3);
+  const selectionController = useSelectionController();
+  if (loading) {
+    let t42;
+    if ($[8] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t42 = /* @__PURE__ */ jsx(CircularProgressCenter, {});
+      $[8] = t42;
+    } else {
+      t42 = $[8];
+    }
+    return t42;
+  }
+  let t4;
+  if ($[9] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t4 = /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: "Imported data preview" }),
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", children: "Entities with the same id will be overwritten" })
+    ] });
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  let t5;
+  if ($[10] !== importConfig.entities) {
+    t5 = {
+      data: importConfig.entities,
+      dataLoading: false,
+      noMoreToLoad: false
+    };
+    $[10] = importConfig.entities;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  let t6;
+  if ($[12] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t6 = /* @__PURE__ */ jsx("div", { className: "h-12" });
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  let t7;
+  if ($[13] !== propertiesOrder) {
+    t7 = propertiesOrder.map(_temp$1);
+    $[13] = propertiesOrder;
+    $[14] = t7;
+  } else {
+    t7 = $[14];
+  }
+  let t8;
+  if ($[15] !== properties || $[16] !== selectionController || $[17] !== t5 || $[18] !== t7) {
+    t8 = /* @__PURE__ */ jsx(EntityCollectionTable, { title: t4, tableController: t5, endAdornment: t6, filterable: false, sortable: false, selectionController, displayedColumnIds: t7, openEntityMode: "side_panel", properties, enablePopupIcon: false });
+    $[15] = properties;
+    $[16] = selectionController;
+    $[17] = t5;
+    $[18] = t7;
+    $[19] = t8;
+  } else {
+    t8 = $[19];
+  }
+  return t8;
+}
+function _temp$1(p) {
+  return {
+    key: p,
+    disabled: false
+  };
+}
+function cleanPropertiesFromImport(properties, parentSlug = "") {
+  const result = Object.keys(properties).reduce((acc, key) => {
+    const property = properties[key];
+    const slug = slugify(key);
+    const fullSlug = parentSlug ? `${parentSlug}.${slug}` : slug;
+    if (property.type === "map" && property.properties) {
+      const slugifiedResult = cleanPropertiesFromImport(property.properties, fullSlug);
+      return {
+        headersMapping: {
+          ...acc.headersMapping,
+          [key]: fullSlug
+        },
+        properties: {
+          ...acc.properties,
+          [slug]: {
+            ...property,
+            properties: slugifiedResult.properties,
+            propertiesOrder: Object.keys(slugifiedResult.properties)
+          }
+        }
+      };
+    }
+    const updatedProperties = {
+      ...acc.properties,
+      [slug]: property
+    };
+    const headersMapping = {
+      ...acc.headersMapping,
+      [key]: fullSlug
+    };
+    return {
+      headersMapping,
+      properties: updatedProperties
+    };
+  }, {
+    headersMapping: {},
+    properties: {}
+  });
+  const firstKey = Object.keys(result.headersMapping)?.[0];
+  let idColumn;
+  if (firstKey?.includes("id") || firstKey?.includes("key")) {
+    idColumn = firstKey;
+  }
+  return {
+    ...result,
+    idColumn
+  };
+}
+function CollectionRLSTab() {
+  const {
+    values,
+    setFieldValue
+  } = useFormex();
+  const [editingPolicy, setEditingPolicy] = useState(null);
+  const rules = values.securityRules || [];
+  const {
+    databaseAdmin
+  } = useRebaseContext();
+  const [dbPolicies, setDbPolicies] = useState([]);
+  const [isLoadingDb, setIsLoadingDb] = useState(false);
+  useEffect(() => {
+    const fetchLivePolicies = async () => {
+      const tableName = values.id || values.table || values.alias;
+      if (!tableName || !databaseAdmin?.executeSql) return;
+      setIsLoadingDb(true);
+      try {
+        const sql = `
+                    SELECT policyname, permissive, roles, cmd, qual, with_check
+                    FROM pg_policies
+                    WHERE tablename = '${tableName}' AND schemaname NOT IN ('information_schema', 'pg_catalog');
+                `;
+        const result = await databaseAdmin.executeSql(sql);
+        const extractRows = (res) => {
+          if (res && typeof res === "object" && "rows" in res && Array.isArray(res.rows)) {
+            return res.rows;
+          }
+          if (Array.isArray(res)) return res;
+          return [];
+        };
+        const pRows = extractRows(result);
+        const policies = pRows.map((p) => {
+          let parsedRoles = [];
+          const r = p.roles || p.ROLES;
+          if (Array.isArray(r)) {
+            parsedRoles = r;
+          } else if (typeof r === "string") {
+            parsedRoles = r.replace(/^{|}$/g, "").split(",").map((s) => s.trim());
+          }
+          return {
+            policyname: p.policyname || p.POLICYNAME || "",
+            tablename: tableName,
+            permissive: p.permissive || p.PERMISSIVE || "PERMISSIVE",
+            roles: parsedRoles,
+            cmd: p.cmd || p.CMD || "ALL",
+            qual: p.qual || p.QUAL || null,
+            with_check: p.with_check || p.WITH_CHECK || null
+          };
+        });
+        setDbPolicies(policies);
+      } catch (e) {
+        console.error("Failed to fetch DB policies", e);
+      } finally {
+        setIsLoadingDb(false);
+      }
+    };
+    fetchLivePolicies();
+  }, [databaseAdmin, values.id, values.table, values.alias]);
+  const unmappedPolicies = dbPolicies.filter((dp) => !rules.some((r_0) => r_0.name === dp.policyname));
+  const handleSave = async (newPolicy) => {
+    const rule = {
+      name: newPolicy.policyname ?? "",
+      operation: newPolicy.cmd?.toLowerCase(),
+      mode: newPolicy.permissive?.toLowerCase(),
+      using: newPolicy.qual || void 0,
+      withCheck: newPolicy.with_check || void 0,
+      roles: newPolicy.roles
+    };
+    let newRules;
+    if (editingPolicy === "new") {
+      newRules = [...rules, rule];
+    } else {
+      newRules = rules.map((r_1) => r_1.name === editingPolicy.policyname ? rule : r_1);
+    }
+    setFieldValue("securityRules", newRules);
+    setEditingPolicy(null);
+  };
+  return /* @__PURE__ */ jsx("div", { className: "overflow-auto my-auto", children: /* @__PURE__ */ jsxs(Container, { maxWidth: "4xl", className: "flex flex-col gap-4 p-8 m-auto", children: [
+    /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-8", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h5", children: "Row Level Security" }),
+        /* @__PURE__ */ jsx(Button, { variant: "filled", color: "neutral", onClick: () => setEditingPolicy("new"), children: "CREATE POLICY" })
+      ] }),
+      rules.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex-grow flex items-center justify-center text-text-disabled py-12", children: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: "No RLS policies defined for this collection." }) }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: rules.map((rule_0) => /* @__PURE__ */ jsxs(Paper, { className: "p-4 border border-transparent hover:border-surface-200 dark:hover:border-surface-800 rounded-lg flex flex-col sm:flex-row sm:items-center justify-between gap-4 transition-colors bg-white dark:bg-surface-950 shadow-sm", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 min-w-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(KeyIcon, { size: "small", className: "text-text-disabled dark:text-text-disabled-dark shrink-0" }),
+            /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: "truncate", children: rule_0.name })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-2 text-xs pl-6 overflow-x-auto hide-scrollbar", children: [
+            /* @__PURE__ */ jsxs(Chip, { size: "small", className: "bg-surface-100 dark:bg-surface-800 text-text-secondary border-none", children: [
+              "Action: ",
+              rule_0.operation || "ALL"
+            ] }),
+            /* @__PURE__ */ jsxs(Chip, { size: "small", className: "bg-surface-100 dark:bg-surface-800 text-text-secondary border-none", children: [
+              "Roles: ",
+              Array.isArray(rule_0.roles) ? rule_0.roles.join(", ") : rule_0.roles
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 sm:gap-2 shrink-0", children: [
+          /* @__PURE__ */ jsx(Button, { size: "small", variant: "text", onClick: () => setEditingPolicy({
+            policyname: rule_0.name,
+            tablename: values.id || values.table || values.alias || "your_table",
+            permissive: (rule_0.mode || "permissive").toUpperCase(),
+            cmd: (rule_0.operation || "ALL").toUpperCase(),
+            roles: rule_0.roles || ["public"],
+            qual: rule_0.using || null,
+            with_check: rule_0.withCheck || null
+          }), children: "EDIT" }),
+          /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => {
+            setFieldValue("securityRules", rules.filter((r_2) => r_2.name !== rule_0.name));
+          }, children: /* @__PURE__ */ jsx(DeleteIcon, { size: "small", className: "text-text-secondary dark:text-text-secondary-dark hover:text-red-500 dark:hover:text-red-500 transition-colors" }) })
+        ] })
+      ] }, rule_0.name)) }),
+      isLoadingDb && unmappedPolicies.length === 0 && /* @__PURE__ */ jsx("div", { className: "flex justify-center mt-8", children: /* @__PURE__ */ jsx(CircularProgress, { size: "small" }) }),
+      !isLoadingDb && unmappedPolicies.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-12 flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", className: "text-text-secondary", children: "Unmapped Database Policies" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-text-secondary opacity-80 -mt-2", children: "These policies exist in your Postgres database but are not mapped to this collection's codebase configuration." }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: unmappedPolicies.map((dp_0) => /* @__PURE__ */ jsxs(Paper, { className: "p-4 border border-orange-200 dark:border-orange-900/50 bg-orange-50/50 dark:bg-orange-900/10 rounded-lg flex flex-col sm:flex-row sm:items-center justify-between gap-4 transition-colors", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 min-w-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(KeyIcon, { size: "small", className: "text-orange-500 shrink-0" }),
+              /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: "truncate", children: dp_0.policyname }),
+              /* @__PURE__ */ jsx(Tooltip, { title: "This policy is live in the database but missing from your codebase schema.", children: /* @__PURE__ */ jsx("div", { className: "px-1.5 py-0.5 rounded text-[10px] uppercase bg-orange-500/10 text-orange-600 border border-orange-500/20 shrink-0", children: "DB Only" }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-2 text-xs pl-6 overflow-x-auto hide-scrollbar", children: [
+              /* @__PURE__ */ jsxs(Chip, { size: "small", className: "bg-white dark:bg-surface-900 text-text-secondary border-none", children: [
+                "Action: ",
+                dp_0.cmd || "ALL"
+              ] }),
+              /* @__PURE__ */ jsxs(Chip, { size: "small", className: "bg-white dark:bg-surface-900 text-text-secondary border-none", children: [
+                "Roles: ",
+                Array.isArray(dp_0.roles) ? dp_0.roles.join(", ") : dp_0.roles
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 sm:gap-2 shrink-0", children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "outlined", color: "primary", onClick: () => {
+            const rule_1 = {
+              name: dp_0.policyname,
+              operation: dp_0.cmd?.toLowerCase(),
+              mode: dp_0.permissive?.toLowerCase(),
+              using: dp_0.qual || void 0,
+              withCheck: dp_0.with_check || void 0,
+              roles: dp_0.roles
+            };
+            setFieldValue("securityRules", [...rules, rule_1]);
+          }, children: "Import to codebase" }) })
+        ] }, dp_0.policyname)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Dialog, { open: !!editingPolicy, onOpenChange: (open) => !open && setEditingPolicy(null), maxWidth: "4xl", children: editingPolicy && /* @__PURE__ */ jsx(InlinePolicyEditor, { policy: editingPolicy === "new" ? void 0 : editingPolicy, table: values.id || values.table || values.alias || "your_table", onSave: handleSave, onCancel: () => setEditingPolicy(null) }) })
+  ] }) });
+}
+const COMMAND_OPTIONS = ["ALL", "SELECT", "INSERT", "UPDATE", "DELETE"];
+const ROLE_OPTIONS = ["public", "authenticated", "anon", "admin"];
+function InlinePolicyEditor(t0) {
+  const $ = c(63);
+  const {
+    policy,
+    table,
+    onSave,
+    onCancel
+  } = t0;
+  const [name, setName] = useState(policy?.policyname || "");
+  const [behavior, setBehavior] = useState(policy?.permissive || "PERMISSIVE");
+  const [command, setCommand] = useState(policy?.cmd || "ALL");
+  let t1;
+  if ($[0] !== policy) {
+    t1 = policy?.roles ? Array.isArray(policy.roles) ? policy.roles : [policy.roles] : ["public"];
+    $[0] = policy;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const [roles, setRoles] = useState(t1);
+  const [usingExpr, setUsingExpr] = useState(policy?.qual || "");
+  const [checkExpr, setCheckExpr] = useState(policy?.with_check || "");
+  const showCheck = command === "ALL" || command === "INSERT" || command === "UPDATE";
+  const t2 = policy ? "Edit Policy" : "Create Policy";
+  let t3;
+  if ($[2] !== table) {
+    t3 = /* @__PURE__ */ jsxs("div", { className: "text-sm font-normal text-text-secondary dark:text-text-secondary-dark tracking-wide mt-1", children: [
+      "Define RLS rules for ",
+      /* @__PURE__ */ jsxs("span", { className: "font-mono text-primary bg-primary-bg dark:bg-primary-bg-dark px-1 py-0.5 rounded", children: [
+        "public.",
+        table
+      ] })
+    ] });
+    $[2] = table;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== t2 || $[5] !== t3) {
+    t4 = /* @__PURE__ */ jsxs(DialogTitle, { variant: "h6", children: [
+      t2,
+      t3
+    ] });
+    $[4] = t2;
+    $[5] = t3;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  let t5;
+  if ($[7] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t5 = cls("p-4 md:p-6 flex flex-col gap-6 bg-white dark:bg-surface-900 border-none sm:border-solid rounded-none sm:rounded-xl", defaultBorderMixin);
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  let t6;
+  if ($[8] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t6 = /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "uppercase tracking-wider text-text-secondary", children: "Policy Name" });
+    $[8] = t6;
+  } else {
+    t6 = $[8];
+  }
+  let t7;
+  if ($[9] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t7 = (e) => setName(e.target.value);
+    $[9] = t7;
+  } else {
+    t7 = $[9];
+  }
+  let t8;
+  if ($[10] !== name) {
+    t8 = /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      t6,
+      /* @__PURE__ */ jsx(TextField, { value: name, onChange: t7, placeholder: "e.g. allow_read_all" })
+    ] });
+    $[10] = name;
+    $[11] = t8;
+  } else {
+    t8 = $[11];
+  }
+  let t9;
+  if ($[12] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t9 = /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "uppercase tracking-wider text-text-secondary", children: "Behavior" });
+    $[12] = t9;
+  } else {
+    t9 = $[12];
+  }
+  let t10;
+  if ($[13] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t10 = (val) => setBehavior(val);
+    $[13] = t10;
+  } else {
+    t10 = $[13];
+  }
+  let t11;
+  let t12;
+  if ($[14] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t11 = /* @__PURE__ */ jsx(SelectItem, { value: "PERMISSIVE", children: "Permissive" });
+    t12 = /* @__PURE__ */ jsx(SelectItem, { value: "RESTRICTIVE", children: "Restrictive" });
+    $[14] = t11;
+    $[15] = t12;
+  } else {
+    t11 = $[14];
+    t12 = $[15];
+  }
+  let t13;
+  if ($[16] !== behavior) {
+    t13 = /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      t9,
+      /* @__PURE__ */ jsxs(Select, { value: behavior, onValueChange: t10, position: "item-aligned", children: [
+        t11,
+        t12
+      ] })
+    ] });
+    $[16] = behavior;
+    $[17] = t13;
+  } else {
+    t13 = $[17];
+  }
+  let t14;
+  if ($[18] !== t13 || $[19] !== t8) {
+    t14 = /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+      t8,
+      t13
+    ] });
+    $[18] = t13;
+    $[19] = t8;
+    $[20] = t14;
+  } else {
+    t14 = $[20];
+  }
+  let t15;
+  if ($[21] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t15 = /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "uppercase tracking-wider text-text-secondary", children: "Command" });
+    $[21] = t15;
+  } else {
+    t15 = $[21];
+  }
+  let t16;
+  if ($[22] !== command) {
+    t16 = COMMAND_OPTIONS.map((cmd) => /* @__PURE__ */ jsx(Button, { size: "small", variant: command === cmd ? "filled" : "text", color: "neutral", onClick: () => setCommand(cmd), children: cmd }, cmd));
+    $[22] = command;
+    $[23] = t16;
+  } else {
+    t16 = $[23];
+  }
+  let t17;
+  if ($[24] !== t16) {
+    t17 = /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      t15,
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: t16 })
+    ] });
+    $[24] = t16;
+    $[25] = t17;
+  } else {
+    t17 = $[25];
+  }
+  let t18;
+  if ($[26] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t18 = /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "uppercase tracking-wider text-text-secondary", children: "Target Roles" });
+    $[26] = t18;
+  } else {
+    t18 = $[26];
+  }
+  let t19;
+  if ($[27] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t19 = ROLE_OPTIONS.map(_temp);
+    $[27] = t19;
+  } else {
+    t19 = $[27];
+  }
+  let t20;
+  if ($[28] !== roles) {
+    t20 = /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      t18,
+      /* @__PURE__ */ jsx(MultiSelect, { size: "small", value: roles, onValueChange: setRoles, placeholder: "Select roles", children: t19 })
+    ] });
+    $[28] = roles;
+    $[29] = t20;
+  } else {
+    t20 = $[29];
+  }
+  let t21;
+  if ($[30] !== command || $[31] !== usingExpr) {
+    t21 = command !== "INSERT" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "uppercase tracking-wider text-text-secondary", children: "USING expression" }),
+      /* @__PURE__ */ jsx(TextField, { value: usingExpr, onChange: (e_0) => setUsingExpr(e_0.target.value), placeholder: "e.g. auth.uid() = user_id" })
+    ] });
+    $[30] = command;
+    $[31] = usingExpr;
+    $[32] = t21;
+  } else {
+    t21 = $[32];
+  }
+  let t22;
+  if ($[33] !== checkExpr || $[34] !== showCheck) {
+    t22 = showCheck && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "uppercase tracking-wider text-text-secondary", children: "WITH CHECK expression" }),
+      /* @__PURE__ */ jsx(TextField, { value: checkExpr, onChange: (e_1) => setCheckExpr(e_1.target.value), placeholder: "e.g. auth.uid() = user_id" })
+    ] });
+    $[33] = checkExpr;
+    $[34] = showCheck;
+    $[35] = t22;
+  } else {
+    t22 = $[35];
+  }
+  let t23;
+  if ($[36] !== t14 || $[37] !== t17 || $[38] !== t20 || $[39] !== t21 || $[40] !== t22) {
+    t23 = /* @__PURE__ */ jsx(DialogContent, { className: "p-4 md:p-6 border-t dark:border-surface-800 bg-surface-50 dark:bg-surface-950", includeMargin: false, children: /* @__PURE__ */ jsxs(Paper, { className: t5, children: [
+      t14,
+      t17,
+      t20,
+      t21,
+      t22
+    ] }) });
+    $[36] = t14;
+    $[37] = t17;
+    $[38] = t20;
+    $[39] = t21;
+    $[40] = t22;
+    $[41] = t23;
+  } else {
+    t23 = $[41];
+  }
+  let t24;
+  if ($[42] !== onCancel) {
+    t24 = /* @__PURE__ */ jsx(Button, { size: "small", variant: "text", color: "neutral", onClick: onCancel, children: "Cancel" });
+    $[42] = onCancel;
+    $[43] = t24;
+  } else {
+    t24 = $[43];
+  }
+  const t25 = !name;
+  let t26;
+  if ($[44] !== behavior || $[45] !== checkExpr || $[46] !== command || $[47] !== name || $[48] !== onSave || $[49] !== roles || $[50] !== showCheck || $[51] !== usingExpr) {
+    t26 = () => onSave({
+      policyname: name,
+      permissive: behavior,
+      cmd: command,
+      roles,
+      qual: usingExpr,
+      with_check: showCheck ? checkExpr : null
+    });
+    $[44] = behavior;
+    $[45] = checkExpr;
+    $[46] = command;
+    $[47] = name;
+    $[48] = onSave;
+    $[49] = roles;
+    $[50] = showCheck;
+    $[51] = usingExpr;
+    $[52] = t26;
+  } else {
+    t26 = $[52];
+  }
+  let t27;
+  if ($[53] !== t25 || $[54] !== t26) {
+    t27 = /* @__PURE__ */ jsx(Button, { size: "small", variant: "filled", color: "primary", disabled: t25, onClick: t26, children: "Save" });
+    $[53] = t25;
+    $[54] = t26;
+    $[55] = t27;
+  } else {
+    t27 = $[55];
+  }
+  let t28;
+  if ($[56] !== t24 || $[57] !== t27) {
+    t28 = /* @__PURE__ */ jsxs(DialogActions, { children: [
+      t24,
+      t27
+    ] });
+    $[56] = t24;
+    $[57] = t27;
+    $[58] = t28;
+  } else {
+    t28 = $[58];
+  }
+  let t29;
+  if ($[59] !== t23 || $[60] !== t28 || $[61] !== t4) {
+    t29 = /* @__PURE__ */ jsxs(Fragment, { children: [
+      t4,
+      t23,
+      t28
+    ] });
+    $[59] = t23;
+    $[60] = t28;
+    $[61] = t4;
+    $[62] = t29;
+  } else {
+    t29 = $[62];
+  }
+  return t29;
+}
+function _temp(r) {
+  return /* @__PURE__ */ jsx(MultiSelectItem, { value: r, children: r }, r);
+}
+function pgTypeToRebaseProperty(column) {
+  const {
+    column_name,
+    data_type,
+    udt_name,
+    is_nullable,
+    column_default,
+    enum_values
+  } = column;
+  const required = is_nullable === "NO";
+  const prettifiedName = column_name.replace(/_/g, " ").replace(/\b\w/g, (c2) => c2.toUpperCase());
+  const isAutoId = column_default != null && (column_default.includes("nextval") || column_default.includes("gen_random_uuid") || column_default.includes("uuid_generate") || column_default.includes("identity"));
+  if (data_type === "USER-DEFINED" && enum_values && enum_values.length > 0) {
+    return {
+      type: "string",
+      name: prettifiedName,
+      enum: enum_values.map((v) => ({
+        id: v,
+        label: v.replace(/_/g, " ").replace(/\b\w/g, (c2) => c2.toUpperCase())
+      })),
+      validation: required ? {
+        required: true
+      } : void 0
+    };
+  }
+  const dt = data_type.toLowerCase();
+  switch (dt) {
+    case "character varying":
+    case "varchar":
+    case "text":
+    case "char":
+    case "character":
+    case "citext": {
+      let colType = "varchar";
+      if (dt === "text" || dt === "citext") colType = "text";
+      if (dt === "char" || dt === "character") colType = "char";
+      const prop = {
+        type: "string",
+        name: prettifiedName,
+        columnType: colType,
+        validation: required ? {
+          required: true
+        } : void 0
+      };
+      if (isAutoId) {
+        prop.isId = "manual";
+      }
+      return prop;
+    }
+    case "uuid": {
+      const prop = {
+        type: "string",
+        name: prettifiedName,
+        validation: required ? {
+          required: true
+        } : void 0
+      };
+      if (isAutoId) {
+        prop.isId = "uuid";
+      }
+      return prop;
+    }
+    case "integer":
+    case "bigint":
+    case "smallint": {
+      const colType = dt === "bigint" ? "bigint" : "integer";
+      const prop = {
+        type: "number",
+        name: prettifiedName,
+        columnType: colType,
+        validation: {
+          ...required ? {
+            required: true
+          } : {},
+          integer: true
+        }
+      };
+      if (isAutoId) {
+        prop.isId = "increment";
+      }
+      return prop;
+    }
+    case "serial":
+    case "bigserial":
+    case "smallserial": {
+      const colType = dt === "bigserial" ? "bigserial" : "serial";
+      return {
+        type: "number",
+        name: prettifiedName,
+        columnType: colType,
+        isId: "increment",
+        validation: {
+          ...required ? {
+            required: true
+          } : {},
+          integer: true
+        }
+      };
+    }
+    case "numeric":
+    case "decimal":
+    case "real":
+    case "double precision": {
+      let colType = "numeric";
+      if (dt === "real") colType = "real";
+      if (dt === "double precision") colType = "double precision";
+      return {
+        type: "number",
+        name: prettifiedName,
+        columnType: colType,
+        validation: required ? {
+          required: true
+        } : void 0
+      };
+    }
+    case "boolean":
+      return {
+        type: "boolean",
+        name: prettifiedName,
+        validation: required ? {
+          required: true
+        } : void 0
+      };
+    case "timestamp with time zone":
+    case "timestamp without time zone":
+    case "timestamp":
+    case "timestamptz":
+    case "date":
+    case "time with time zone":
+    case "time without time zone":
+    case "time": {
+      let colType = "timestamp";
+      if (dt.startsWith("date")) colType = "date";
+      if (dt.startsWith("time ") || dt === "time") colType = "time";
+      return {
+        type: "date",
+        name: prettifiedName,
+        columnType: colType,
+        validation: required ? {
+          required: true
+        } : void 0
+      };
+    }
+    case "jsonb":
+    case "json":
+      return {
+        type: "map",
+        name: prettifiedName,
+        columnType: dt === "jsonb" ? "jsonb" : "json",
+        keyValue: true,
+        properties: {}
+      };
+    case "array":
+    case "ARRAY":
+      return {
+        type: "array",
+        name: prettifiedName,
+        of: {
+          type: "string"
+        }
+      };
+    default:
+      return {
+        type: "string",
+        name: prettifiedName,
+        validation: required ? {
+          required: true
+        } : void 0
+      };
+  }
+}
+function buildCollectionFromTableMetadata(tableName, metadata) {
+  const properties = {};
+  const propertiesOrder = [];
+  const relations = [];
+  const securityRules = [];
+  for (const column of metadata.columns) {
+    const property = pgTypeToRebaseProperty(column);
+    if (property) {
+      Object.keys(property).forEach((key) => property[key] === void 0 && delete property[key]);
+      properties[column.column_name] = property;
+      propertiesOrder.push(column.column_name);
+    }
+  }
+  if (metadata.foreignKeys) {
+    for (const fk of metadata.foreignKeys) {
+      const relName = fk.column_name.endsWith("_id") ? fk.column_name.substring(0, fk.column_name.length - 3) : fk.column_name;
+      relations.push({
+        id: fk.column_name,
+        relationName: relName,
+        target: fk.foreign_table_name,
+        // Will be hydrated later
+        cardinality: "one",
+        direction: "owning",
+        localKey: fk.column_name
+      });
+    }
+  }
+  if (metadata.junctions) {
+    for (const junction of metadata.junctions) {
+      const relName = junction.target_table_name;
+      relations.push({
+        id: junction.target_table_name + "_relation",
+        relationName: relName,
+        target: junction.target_table_name,
+        // Will be hydrated later
+        cardinality: "many",
+        direction: "owning",
+        through: {
+          table: junction.junction_table_name,
+          sourceColumn: junction.source_column_name,
+          targetColumn: junction.target_column_name
+        }
+      });
+    }
+  }
+  if (metadata.policies) {
+    for (const policy of metadata.policies) {
+      let operations = [];
+      switch (policy.cmd) {
+        case "ALL":
+          operations = ["read", "create", "update", "delete"];
+          break;
+        case "SELECT":
+          operations = ["read"];
+          break;
+        case "INSERT":
+          operations = ["create"];
+          break;
+        case "UPDATE":
+          operations = ["update"];
+          break;
+        case "DELETE":
+          operations = ["delete"];
+          break;
+      }
+      securityRules.push({
+        name: policy.policy_name,
+        operations,
+        // roles is string[] e.g., ["public", "authenticated"]
+        roles: policy.roles ?? [],
+        qual: policy.qual,
+        with_check: policy.with_check
+      });
+    }
+  }
+  const prettifiedName = tableName.replace(/_/g, " ").replace(/\b\w/g, (c2) => c2.toUpperCase());
+  return {
+    name: prettifiedName,
+    slug: tableName,
+    table: tableName,
+    properties,
+    propertiesOrder,
+    ...relations.length > 0 ? {
+      relations
+    } : {},
+    ...securityRules.length > 0 ? {
+      securityRules
+    } : {}
+  };
+}
+function CollectionEditorDialog(props) {
+  const $ = c(25);
+  const open = props.open;
+  const [formDirty, setFormDirty] = React.useState(false);
+  let t0;
+  if ($[0] !== props) {
+    t0 = () => props.handleClose(void 0);
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const {
+    dialogProps,
+    triggerDialog
+  } = useUnsavedChangesDialog(open && formDirty, t0);
+  let t1;
+  if ($[2] !== formDirty || $[3] !== props || $[4] !== triggerDialog) {
+    t1 = () => {
+      if (!formDirty) {
+        props.handleClose(void 0);
+      } else {
+        triggerDialog();
+      }
+    };
+    $[2] = formDirty;
+    $[3] = props;
+    $[4] = triggerDialog;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  const handleCancel = t1;
+  let t2;
+  let t3;
+  if ($[6] !== open) {
+    t2 = () => {
+      if (!open) {
+        setFormDirty(false);
+      }
+    };
+    t3 = [open];
+    $[6] = open;
+    $[7] = t2;
+    $[8] = t3;
+  } else {
+    t2 = $[7];
+    t3 = $[8];
+  }
+  useEffect(t2, t3);
+  let t4;
+  if ($[9] !== handleCancel) {
+    t4 = (open_0) => !open_0 ? handleCancel() : void 0;
+    $[9] = handleCancel;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  let t5;
+  if ($[11] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t5 = /* @__PURE__ */ jsx(DialogTitle, { hidden: true, children: "Collection editor" });
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  let t6;
+  if ($[12] !== handleCancel || $[13] !== open || $[14] !== props) {
+    t6 = open && /* @__PURE__ */ jsx(CollectionEditor, { ...props, handleCancel, setFormDirty });
+    $[12] = handleCancel;
+    $[13] = open;
+    $[14] = props;
+    $[15] = t6;
+  } else {
+    t6 = $[15];
+  }
+  let t7;
+  if ($[16] !== dialogProps) {
+    t7 = /* @__PURE__ */ jsx(UnsavedChangesDialog, { ...dialogProps });
+    $[16] = dialogProps;
+    $[17] = t7;
+  } else {
+    t7 = $[17];
+  }
+  let t8;
+  if ($[18] !== t6 || $[19] !== t7) {
+    t8 = /* @__PURE__ */ jsxs(AIModifiedPathsProvider, { children: [
+      t6,
+      t7
+    ] });
+    $[18] = t6;
+    $[19] = t7;
+    $[20] = t8;
+  } else {
+    t8 = $[20];
+  }
+  let t9;
+  if ($[21] !== open || $[22] !== t4 || $[23] !== t8) {
+    t9 = /* @__PURE__ */ jsxs(Dialog, { open, fullWidth: true, fullHeight: true, scrollable: false, maxWidth: "7xl", onOpenChange: t4, children: [
+      t5,
+      t8
+    ] });
+    $[21] = open;
+    $[22] = t4;
+    $[23] = t8;
+    $[24] = t9;
+  } else {
+    t9 = $[24];
+  }
+  return t9;
+}
+function CollectionEditor(props) {
+  const {
+    propertyConfigs
+  } = useCustomizationController();
+  const navigationState = useNavigationStateController();
+  const collectionRegistry = useCollectionRegistryController();
+  const authController = useAuthController();
+  const {
+    topLevelNavigation
+  } = navigationState;
+  const {
+    collections
+  } = collectionRegistry;
+  const initialValuesProp = props.initialValues;
+  const copyFromProp = props.copyFrom;
+  const includeTemplates = !copyFromProp && !initialValuesProp?.slug && (props.parentCollectionIds ?? []).length === 0;
+  const collectionsInThisLevel = (props.parentCollection ? getSubcollections(props.parentCollection) : collections) ?? [];
+  const existingPaths = collectionsInThisLevel.map((col) => col.table?.trim().toLowerCase() ?? col.slug?.trim().toLowerCase()).filter(Boolean);
+  const existingIds = collectionsInThisLevel.map((col_0) => col_0.slug?.trim().toLowerCase()).filter(Boolean);
+  const [collection, setCollection] = React.useState();
+  const [initialLoadingCompleted, setInitialLoadingCompleted] = React.useState(false);
+  useEffect(() => {
+    try {
+      if (collectionRegistry.initialised) {
+        if (props.editedCollectionId) {
+          const collectionPath = [...props.parentCollectionIds ?? [], props.editedCollectionId].reduce((acc, segment, i) => i === 0 ? segment : `${acc}/fake_id/${segment}`, "");
+          setCollection(collectionRegistry.getRawCollection(collectionPath));
+        } else {
+          setCollection(void 0);
+        }
+        setInitialLoadingCompleted(true);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  }, [props.editedCollectionId, props.parentCollectionIds, collectionRegistry.initialised, collectionRegistry.getRawCollection]);
+  const groups = topLevelNavigation?.groups ?? [];
+  const initialCollection = collection ? {
+    ...collection,
+    slug: collection.slug ?? randomString(16)
+  } : void 0;
+  const initialValues = initialCollection ? applyPropertyConfigs(initialCollection, propertyConfigs) : copyFromProp ? (() => {
+    const {
+      subcollections: _sub,
+      ...rest
+    } = copyFromProp;
+    return {
+      ...rest,
+      name: "",
+      ownerId: authController.user?.uid ?? ""
+    };
+  })() : {
+    slug: initialValuesProp?.slug ?? randomString(16),
+    table: initialValuesProp?.slug ?? "",
+    name: initialValuesProp?.name ?? "",
+    group: initialValuesProp?.group ?? "",
+    properties: {},
+    propertiesOrder: [],
+    icon: coolIconKeys[Math.floor(Math.random() * coolIconKeys.length)],
+    ownerId: authController.user?.uid ?? ""
+  };
+  if (!initialLoadingCompleted) {
+    return /* @__PURE__ */ jsx(CircularProgressCenter, {});
+  }
+  if (!props.isNewCollection && (!collectionRegistry.initialised || !initialLoadingCompleted)) {
+    return /* @__PURE__ */ jsx(CircularProgressCenter, {});
+  }
+  return /* @__PURE__ */ jsx(CollectionEditorInternal, { ...props, initialValues, existingPaths, existingIds, includeTemplates, collection, setCollection, groups, propertyConfigs });
+}
+function CollectionEditorInternal({
+  isNewCollection,
+  configController,
+  editedCollectionId,
+  parentCollectionIds,
+  path,
+  collectionInference,
+  handleClose,
+  reservedGroups,
+  extraView,
+  handleCancel,
+  setFormDirty,
+  getUser,
+  parentCollection,
+  getData,
+  existingPaths,
+  existingIds,
+  includeTemplates,
+  collection,
+  setCollection,
+  initialValues,
+  propertyConfigs,
+  groups,
+  existingEntities,
+  initialView: initialViewProp,
+  expandKanban,
+  generateCollection,
+  onAnalyticsEvent,
+  fullScreen,
+  unmappedTables,
+  onFetchTableMetadata
+}) {
+  const importConfig = useImportConfig();
+  const urlController = useUrlController();
+  const collectionRegistry = useCollectionRegistryController();
+  const snackbarController = useSnackbarController();
+  const propertyErrorsRef = useRef({});
+  const initialView = isNewCollection ? includeTemplates ? "welcome" : "general" : initialViewProp ?? "properties";
+  const [currentView, setCurrentView] = useState(initialView);
+  const [error, setError] = React.useState();
+  const saveCollection = (updatedCollection) => {
+    const id = updatedCollection.slug;
+    return configController.saveCollection({
+      id,
+      collectionData: updatedCollection,
+      previousId: editedCollectionId,
+      parentCollectionIds
+    }).then(() => {
+      setError(void 0);
+      return true;
+    }).catch((e) => {
+      setError(e);
+      console.error(e);
+      snackbarController.open({
+        type: "error",
+        message: "Error persisting collection: " + (e.message ?? "Details in the console")
+      });
+      return false;
+    });
+  };
+  const setNextMode = () => {
+    if (currentView === "general") {
+      if (importConfig.inUse) {
+        setCurrentView("import_data_saving");
+      } else if (extraView) {
+        setCurrentView("extra_view");
+      } else {
+        setCurrentView("properties");
+      }
+    } else if (currentView === "welcome") {
+      setCurrentView("general");
+    } else if (currentView === "import_data_mapping") {
+      setCurrentView("import_data_preview");
+    } else if (currentView === "import_data_preview") {
+      setCurrentView("general");
+    } else if (currentView === "extra_view") {
+      setCurrentView("properties");
+    } else {
+      setCurrentView("general");
+    }
+  };
+  const doCollectionInference = collectionInference ? (collection_0) => {
+    if (!collectionInference) return void 0;
+    return collectionInference?.(collection_0.slug, parentPaths ?? [], collection_0.databaseId);
+  } : void 0;
+  const inferCollectionFromData = async (newCollection) => {
+    try {
+      if (!doCollectionInference) {
+        setCollection(newCollection);
+        return Promise.resolve(newCollection);
+      }
+      setCurrentView("loading");
+      const inferredCollection = await doCollectionInference?.(newCollection);
+      if (!inferredCollection) {
+        setCollection(newCollection);
+        return Promise.resolve(newCollection);
+      }
+      const values = {
+        ...newCollection ?? {}
+      };
+      if (Object.keys(inferredCollection.properties ?? {}).length > 0) {
+        values.properties = inferredCollection.properties;
+        values.propertiesOrder = inferredCollection.propertiesOrder;
+      }
+      if (!values.propertiesOrder) {
+        values.propertiesOrder = Object.keys(values.properties);
+        return values;
+      }
+      setCollection(values);
+      console.debug("Inferred collection", {
+        newCollection: newCollection ?? {},
+        values
+      });
+      return values;
+    } catch (e_0) {
+      console.error(e_0);
+      snackbarController.open({
+        type: "error",
+        message: "Error inferring collection: " + (e_0 instanceof Error ? e_0.message : "Details in the console")
+      });
+      return newCollection;
+    }
+  };
+  const onSubmit = async (newCollectionState, formexController) => {
+    console.debug("Submitting collection", newCollectionState);
+    try {
+      if (!isNewCollection) {
+        const success = await saveCollection(newCollectionState);
+        if (success) {
+          aiModifiedPaths?.clearAllPaths();
+          formexController.resetForm({
+            values: newCollectionState
+          });
+          handleClose(newCollectionState);
+        }
+        return;
+      }
+      if (currentView === "welcome") {
+        setNextMode();
+        formexController.resetForm({
+          values: newCollectionState
+        });
+      } else if (currentView === "general") {
+        if (extraView || importConfig.inUse) {
+          formexController.resetForm({
+            values: newCollectionState
+          });
+          setNextMode();
+        } else if (isNewCollection) {
+          const values_0 = await inferCollectionFromData(newCollectionState);
+          formexController.resetForm({
+            values: values_0 ?? newCollectionState,
+            touched: {
+              path: true,
+              name: true
+            }
+          });
+          setNextMode();
+        } else {
+          formexController.resetForm({
+            values: newCollectionState
+          });
+          setNextMode();
+        }
+      } else if (currentView === "extra_view") {
+        setNextMode();
+        formexController.resetForm({
+          values: newCollectionState
+        });
+      } else if (currentView === "import_data_mapping") {
+        setNextMode();
+      } else if (currentView === "import_data_preview") {
+        setNextMode();
+      } else if (currentView === "properties") {
+        const success_0 = await saveCollection(newCollectionState);
+        if (success_0) {
+          formexController.resetForm({
+            values: initialValues
+          });
+          setNextMode();
+          handleClose(newCollectionState);
+        }
+      } else {
+        setNextMode();
+        formexController.resetForm({
+          values: newCollectionState
+        });
+      }
+    } catch (e_1) {
+      snackbarController.open({
+        type: "error",
+        message: "Error persisting collection: " + (e_1 instanceof Error ? e_1.message : "Details in the console")
+      });
+      console.error(e_1);
+      formexController.resetForm({
+        values: newCollectionState
+      });
+    }
+  };
+  const validation = (col) => {
+    let errors = {};
+    const schema = (currentView === "properties" || currentView === "relations" || currentView === "general") && CollectionEditorSchema;
+    if (schema) {
+      const result = schema.safeParse(col);
+      if (!result.success) {
+        result.error.issues.forEach((issue) => {
+          const path_0 = issue.path.join(".");
+          if (path_0) {
+            errors[path_0] = issue.message;
+          }
+        });
+      }
+    }
+    if (currentView === "properties") {
+      errors = {
+        ...errors,
+        ...propertyErrorsRef.current
+      };
+    }
+    if (currentView === "general") {
+      const pathError = validatePath(col.table || col.slug, isNewCollection, existingPaths, col.slug);
+      if (pathError) {
+        errors.slug = pathError;
+      }
+      const idError = validateId(col.slug, isNewCollection, existingPaths, existingIds);
+      if (idError) {
+        errors.id = idError;
+      }
+    }
+    if (Object.keys(errors).length > 0) {
+      console.error("Formex validation blocked save:", errors, "Current view:", currentView);
+    }
+    return errors;
+  };
+  const formController = useCreateFormex({
+    initialValues,
+    onSubmit,
+    validation,
+    debugId: "COLLECTION_EDITOR"
+  });
+  const {
+    values: values_1,
+    setFieldValue,
+    isSubmitting,
+    dirty,
+    submitCount
+  } = formController;
+  const usedPath = values_1.table || values_1.slug;
+  const pathError_0 = validatePath(usedPath, isNewCollection, existingPaths, values_1.slug);
+  const parentPaths = !pathError_0 && parentCollectionIds ? collectionRegistry.convertIdsToPaths(parentCollectionIds) : void 0;
+  const updatedFullPath = parentPaths && parentPaths.length > 0 ? [...parentPaths, usedPath].join("/fake_id/") : path?.includes("/") ? path.split("/").slice(0, -1).join("/") + "/" + usedPath : usedPath;
+  const resolvedPath = !pathError_0 ? urlController.resolveDatabasePathsFrom(updatedFullPath) : void 0;
+  const getDataWithPath = resolvedPath && getData ? async () => {
+    const data = await getData(resolvedPath, parentPaths ?? []);
+    if (existingEntities) {
+      const existingData = existingEntities.map((e_2) => e_2.values);
+      data.push(...existingData);
+    }
+    return data;
+  } : void 0;
+  useEffect(() => {
+    setFormDirty(dirty);
+  }, [dirty]);
+  function onImportDataSet(data_0, propertiesOrder) {
+    importConfig.setInUse(true);
+    buildEntityPropertiesFromData(data_0, getInferenceType).then((properties) => {
+      const res = cleanPropertiesFromImport(properties);
+      importConfig.setIdColumn(res.idColumn);
+      importConfig.setImportData(data_0);
+      importConfig.setHeadersMapping(res.headersMapping);
+      const filteredHeadingsOrder = (propertiesOrder ?? []).filter((key) => res.headersMapping[key]) ?? Object.keys(res.properties);
+      importConfig.setHeadingsOrder(filteredHeadingsOrder);
+      importConfig.setOriginProperties(res.properties);
+      const mappedHeadings = (propertiesOrder ?? []).map((key_0) => res.headersMapping[key_0]).filter(Boolean) ?? Object.keys(res.properties);
+      setFieldValue("properties", res.properties);
+      setFieldValue("propertiesOrder", mappedHeadings);
+    });
+  }
+  const validValues = Boolean(values_1.name) && Boolean(values_1.slug);
+  const onImportMappingComplete = () => {
+    const updatedProperties = {
+      ...values_1.properties
+    };
+    if (importConfig.idColumn) delete updatedProperties[importConfig.idColumn];
+    setFieldValue("properties", updatedProperties);
+    setNextMode();
+  };
+  const [deleteRequested, setDeleteRequested] = useState(false);
+  const deleteCollection = () => {
+    if (!collection) return;
+    configController?.deleteCollection({
+      id: collection.slug
+    }).then(() => {
+      setDeleteRequested(false);
+      handleCancel();
+      snackbarController.open({
+        message: "Collection deleted",
+        type: "success"
+      });
+    });
+  };
+  const onWelcomeScreenContinue = (importData, propertiesOrder_0) => {
+    if (importData) {
+      onImportDataSet(importData, propertiesOrder_0);
+      setCurrentView("import_data_mapping");
+    } else {
+      setCurrentView("general");
+    }
+  };
+  const aiModifiedPaths = useAIModifiedPaths();
+  const handleAIGenerated = (generatedCollection, operations) => {
+    formController.setValues(generatedCollection);
+    if (operations && aiModifiedPaths) {
+      aiModifiedPaths.addModifiedPaths(operations);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "h-full w-full flex flex-col bg-white dark:bg-surface-950", children: [
+    /* @__PURE__ */ jsx(Formex, { value: formController, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      !isNewCollection && /* @__PURE__ */ jsxs("div", { className: cls("px-4 py-2 w-full flex shrink-0 items-center justify-between gap-4 bg-white dark:bg-surface-950 border-b", defaultBorderMixin), children: [
+        /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-end gap-4 min-w-0", children: /* @__PURE__ */ jsxs(Tabs, { value: currentView, className: "bg-transparent !w-fit max-w-full", onValueChange: (v) => setCurrentView(v), children: [
+          /* @__PURE__ */ jsx(Tab, { value: "general", children: "General" }),
+          /* @__PURE__ */ jsx(Tab, { value: "display", children: "Display" }),
+          /* @__PURE__ */ jsx(Tab, { value: "properties", children: "Properties" }),
+          getDataSourceCapabilities(values_1.driver).supportsRLS && /* @__PURE__ */ jsx(Tab, { value: "rls", children: "RLS" }),
+          getDataSourceCapabilities(values_1.driver).supportsRelations && /* @__PURE__ */ jsx(Tab, { value: "relations", children: "Relations" })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+          generateCollection && /* @__PURE__ */ jsx(AICollectionGeneratorPopover, { existingCollection: values_1, onGenerated: handleAIGenerated, generateCollection, onAnalyticsEvent }),
+          fullScreen && !isNewCollection && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(LoadingButton, { variant: "filled", color: "primary", type: "submit", onClick: () => formController.handleSubmit(), disabled: !dirty || isSubmitting || configController?.readOnly, loading: isSubmitting, children: configController?.readOnly ? "Update (Read-only)" : "Update" }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("form", { noValidate: true, onSubmit: formController.handleSubmit, className: "flex-grow flex flex-col min-h-0 relative", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-grow flex flex-col min-h-0 overflow-y-auto no-scrollbar relative w-full h-full", children: [
+          currentView === "loading" && /* @__PURE__ */ jsx(CircularProgressCenter, {}),
+          currentView === "extra_view" && usedPath && extraView?.View && /* @__PURE__ */ jsx(extraView.View, { path: usedPath }),
+          currentView === "welcome" && /* @__PURE__ */ jsx(CollectionEditorWelcomeView, { path: usedPath, onContinue: onWelcomeScreenContinue, existingCollectionPaths: existingPaths, parentCollection, generateCollection, onAnalyticsEvent, unmappedTables, onImportFromTable: onFetchTableMetadata ? async (tableName) => {
+            try {
+              const columns = await onFetchTableMetadata(tableName);
+              if (!columns) return;
+              const collectionData = buildCollectionFromTableMetadata(tableName, columns);
+              formController.setValues({
+                ...formController.values,
+                ...collectionData
+              });
+              onWelcomeScreenContinue();
+            } catch (e_3) {
+              console.error("Error importing table:", e_3);
+              snackbarController.open({
+                type: "error",
+                message: "Error importing table: " + (e_3 instanceof Error ? e_3.message : "Unknown error")
+              });
+            }
+          } : void 0 }),
+          currentView === "import_data_mapping" && importConfig && /* @__PURE__ */ jsx(CollectionEditorImportMapping, { importConfig, propertyConfigs }),
+          currentView === "import_data_preview" && importConfig && /* @__PURE__ */ jsx(CollectionEditorImportDataPreview, { importConfig, properties: values_1.properties, propertiesOrder: values_1.propertiesOrder }),
+          currentView === "import_data_saving" && importConfig && /* @__PURE__ */ jsx(ImportSaveInProgress, { importConfig, collection: values_1, path: usedPath, onImportSuccess: async (importedCollection) => {
+            snackbarController.open({
+              type: "info",
+              message: "Data imported successfully"
+            });
+            await saveCollection(values_1);
+            handleClose(importedCollection);
+          } }),
+          currentView === "general" && /* @__PURE__ */ jsx(GeneralSettingsForm, { existingPaths, existingIds, parentCollection, isNewCollection }),
+          currentView === "display" && /* @__PURE__ */ jsx(DisplaySettingsForm, { expandKanban }),
+          currentView === "relations" && getDataSourceCapabilities(values_1.driver).supportsRelations && /* @__PURE__ */ jsx(CollectionRelationsTab, {}),
+          currentView === "rls" && getDataSourceCapabilities(values_1.driver).supportsRLS && /* @__PURE__ */ jsx(CollectionRLSTab, {}),
+          currentView === "properties" && /* @__PURE__ */ jsx(CollectionPropertiesEditorForm, { showErrors: submitCount > 0, isNewCollection, reservedGroups, onPropertyError: (propertyKey, namespace, error_0) => {
+            const current = removeUndefined({
+              ...propertyErrorsRef.current,
+              [getFullIdPath(propertyKey, namespace)]: removeUndefined(error_0, true)
+            }, true);
+            propertyErrorsRef.current = current;
+            formController.validate();
+          }, getUser, getData: getDataWithPath, doCollectionInference, propertyConfigs, extraIcon: extraView?.icon && /* @__PURE__ */ jsx(IconButton, { color: "primary", onClick: () => setCurrentView("extra_view"), children: extraView.icon }) })
+        ] }),
+        (!fullScreen || isNewCollection || !!error) && /* @__PURE__ */ jsxs("div", { className: "shrink-0 w-full p-4 sm:px-6 sm:py-4 border-t border-surface-200 dark:border-surface-800 flex items-center justify-between gap-4 bg-white dark:bg-surface-900", children: [
+          error && /* @__PURE__ */ jsx(ErrorView, { error }),
+          isNewCollection && includeTemplates && currentView === "import_data_mapping" && /* @__PURE__ */ jsx(Button, { variant: "text", type: "button", onClick: () => {
+            importConfig.setInUse(false);
+            return setCurrentView("welcome");
+          }, children: "Back" }),
+          isNewCollection && includeTemplates && currentView === "import_data_preview" && /* @__PURE__ */ jsx(Button, { variant: "text", type: "button", onClick: () => {
+            setCurrentView("import_data_mapping");
+          }, children: "Back" }),
+          isNewCollection && includeTemplates && currentView === "general" && /* @__PURE__ */ jsx(Button, { variant: "text", type: "button", onClick: () => setCurrentView("welcome"), children: "Back" }),
+          isNewCollection && currentView === "properties" && /* @__PURE__ */ jsxs(Button, { variant: "text", type: "button", color: "neutral", onClick: () => setCurrentView("general"), children: [
+            /* @__PURE__ */ jsx(ArrowBackIcon, {}),
+            "Back"
+          ] }),
+          (!fullScreen || isNewCollection) && /* @__PURE__ */ jsx(Button, { variant: "text", color: "neutral", onClick: () => {
+            handleCancel();
+          }, children: "Cancel" }),
+          currentView === "welcome" && /* @__PURE__ */ jsx(Button, { variant: "text", onClick: () => onWelcomeScreenContinue(), children: "Continue from scratch" }),
+          isNewCollection && currentView === "import_data_mapping" && /* @__PURE__ */ jsx(Button, { variant: "filled", color: "primary", onClick: onImportMappingComplete, children: "Next" }),
+          isNewCollection && currentView === "import_data_preview" && /* @__PURE__ */ jsx(Button, { variant: "filled", color: "primary", onClick: () => {
+            setNextMode();
+          }, children: "Next" }),
+          isNewCollection && (currentView === "general" || currentView === "properties") && /* @__PURE__ */ jsxs(LoadingButton, { variant: "filled", color: "primary", type: "submit", loading: isSubmitting, disabled: isSubmitting || currentView === "general" && !validValues, startIcon: currentView === "properties" ? /* @__PURE__ */ jsx(CheckIcon, {}) : void 0, children: [
+            currentView === "general" && "Next",
+            currentView === "properties" && "Create collection"
+          ] }),
+          !isNewCollection && !fullScreen && /* @__PURE__ */ jsx(LoadingButton, { variant: "filled", color: "primary", type: "submit", disabled: isSubmitting || configController?.readOnly, loading: isSubmitting, children: configController?.readOnly ? "Update collection (Read-only)" : "Update collection" })
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(ConfirmationDialog, { open: deleteRequested, onAccept: deleteCollection, onCancel: () => setDeleteRequested(false), title: /* @__PURE__ */ jsx(Fragment, { children: "Delete the stored config?" }), body: /* @__PURE__ */ jsxs(Fragment, { children: [
+      " This will ",
+      /* @__PURE__ */ jsx("b", { children: "not delete any data" }),
+      ", only the stored config, and reset to the code state."
+    ] }) })
+  ] });
+}
+function applyPropertyConfigs(collection, propertyConfigs) {
+  const {
+    properties,
+    ...rest
+  } = collection;
+  const propertiesResult = {};
+  if (properties) {
+    Object.keys(properties).forEach((key) => {
+      const prop = properties[key];
+      if (prop == null) return;
+      propertiesResult[key] = applyPropertiesConfig(prop, propertyConfigs);
+    });
+  }
+  return {
+    ...rest,
+    properties: propertiesResult
+  };
+}
+function applyPropertiesConfig(property, propertyConfigs) {
+  let internalProperty = property;
+  if (propertyConfigs && internalProperty && typeof internalProperty === "object" && internalProperty.propertyConfig) {
+    const propertyConfig = propertyConfigs[internalProperty.propertyConfig];
+    if (propertyConfig && isPropertyBuilder(propertyConfig.property)) {
+      internalProperty = propertyConfig.property;
+    } else {
+      if (propertyConfig) {
+        internalProperty = mergeDeep(propertyConfig.property, internalProperty);
+      }
+      if (!isPropertyBuilder(internalProperty) && internalProperty.type === "map" && internalProperty.properties) {
+        const properties = {};
+        Object.keys(internalProperty.properties).forEach((key) => {
+          properties[key] = applyPropertiesConfig(internalProperty.properties[key], propertyConfigs);
+        });
+        internalProperty = {
+          ...internalProperty,
+          properties
+        };
+      }
+    }
+  }
+  return internalProperty;
+}
+const validatePath = (value, isNewCollection, existingPaths, idValue) => {
+  let error;
+  if (!value) {
+    error = "You must specify a path in the database for this collection";
+  }
+  if (isNewCollection && existingPaths?.includes(value.trim().toLowerCase()) && !idValue) error = "There is already a collection with the specified path. If you want to have multiple collections referring to the same database path, make sure the have different ids";
+  const subpaths = removeInitialAndTrailingSlashes(value).split("/");
+  if (subpaths.length % 2 === 0) {
+    error = `Collection paths must have an odd number of segments: ${value}`;
+  }
+  return error;
+};
+const validateId = (value, isNewCollection, existingPaths, existingIds) => {
+  if (!value) return void 0;
+  let error;
+  if (isNewCollection && existingPaths?.includes(value.trim().toLowerCase())) error = "There is already a collection that uses this value as a path";
+  if (isNewCollection && existingIds?.includes(value.trim().toLowerCase())) error = "There is already a collection which uses this id";
+  return error;
+};
+export {
+  CollectionEditor,
+  CollectionEditorDialog
+};
+//# sourceMappingURL=CollectionEditorDialog-DiZYNmYV.js.map