@firecms/collection_editor 3.0.0-canary.240 → 3.0.0-canary.242

package/README.md

@@ -1 +1,165 @@
-## Collection editor plugin
+# FireCMS Collection Editor Plugin
+
+This plugin enables creating and managing Firestore collections directly from your FireCMS interface. It adds a visual
+collection editor that allows you to create, edit, and delete collections without writing code.
+
+## Installation
+
+```bash
+npm install @firecms/collection_editor
+# or
+yarn add @firecms/collection_editor
+```
+
+For Firebase integration, also install:
+
+```bash
+npm install @firecms/collection_editor_firebase
+# or
+yarn add @firecms/collection_editor_firebase
+```
+
+## Features
+
+- Create and edit collections through a visual interface
+- Define properties, validations, and display options
+- Organize collections with groups and subcollections
+- Merge UI-defined collections with code-defined collections
+- Persist collection configurations in Firestore
+- Control permissions for collection editing operations
+
+## Basic Usage
+
+```tsx
+import React from "react";
+import { FireCMS } from "@firecms/core";
+import { useCollectionEditorPlugin } from "@firecms/collection_editor";
+import { useFirestoreCollectionsConfigController } from "@firecms/collection_editor_firebase";
+
+export default function App() {
+    // Controller to save collection configs in Firestore
+    const collectionConfigController = useFirestoreCollectionsConfigController({
+        firebaseApp
+    });
+    
+    // Initialize the collection editor plugin
+    const collectionEditorPlugin = useCollectionEditorPlugin({
+        collectionConfigController
+    });
+    
+    const navigationController = useBuildNavigationController({
+        // Your other config options
+        plugins: [collectionEditorPlugin]
+    });
+    
+    return <FireCMS
+        name={"My CMS"}
+        navigationController={navigationController}
+        authentication={myAuthenticator}
+        firebaseConfig={firebaseConfig}
+    />;
+}
+```
+
+## Advanced Configuration
+
+You can customize collection editor behavior with these options:
+
+```tsx
+const collectionEditorPlugin = useCollectionEditorPlugin({
+    collectionConfigController, // Required: controller that handles persistence
+    
+    // Define permissions for collection operations
+    configPermissions: ({ user }) => ({
+        createCollections: user.roles?.includes("admin") ?? false,
+        editCollections: user.roles?.includes("admin") ?? false,
+        deleteCollections: user.roles?.includes("admin") ?? false
+    }),
+    
+    // Prevent these group names from being used
+    reservedGroups: ["admin", "system"],
+    
+    // Optional custom view to add to the editor
+    extraView: {
+        View: MyCustomView,
+        icon: <CustomIcon />
+    },
+    
+    // Function to infer collection structure from existing data
+    collectionInference: async ({ path }) => {
+        // Return inferred schema based on data at path
+    },
+    
+    // Function to get sample data for a collection
+    getData: async (path, parentPaths) => {
+        // Return sample data for the specified path
+    },
+    
+    // Track collection editor events
+    onAnalyticsEvent: (event, params) => {
+        console.log("Collection editor event:", event, params);
+    },
+    
+    // Include introduction widget when no collections exist
+    includeIntroView: true
+});
+```
+
+## Integration with Code-Defined Collections
+
+You can combine collections defined in code with those created in the UI:
+
+```tsx
+import { mergeCollections } from "@firecms/collection_editor";
+
+const collectionsBuilder = useCallback(() => {
+    // Collections defined in code
+    const codeCollections = [productsCollection, ordersCollection];
+    
+    // Merge with collections from the editor UI
+    return mergeCollections(codeCollections, collectionConfigController.collections ?? []);
+}, [collectionConfigController.collections]);
+
+const navigationController = useBuildNavigationController({
+    collections: collectionsBuilder,
+    // Other options
+});
+```
+
+## Firestore Configuration Controller
+
+To persist collections in Firestore:
+
+```tsx
+const collectionConfigController = useFirestoreCollectionsConfigController({
+    firebaseApp,
+    
+    // Optional: specify where to save configs (default: "__FIRECMS/config/collections")
+    configPath: "custom/config/path",
+    
+    // Optional: define permissions for collections
+    permissions: ({ user }) => ({
+        // Your permissions logic
+    }),
+    
+    // Optional: custom property configurations
+    propertyConfigs: [
+        // Custom property types
+    ]
+});
+```
+
+## Additional Notes
+
+- Collections created through the editor are stored in Firestore and loaded dynamically
+- The plugin automatically adds UI elements for creating and managing collections
+- For a complete solution, consider using alongside other plugins like data import/export
+
+## Related Plugins
+
+FireCMS offers several complementary plugins:
+
+- Data Import: Import data from CSV or JSON into Firestore collections
+- Data Export: Export collection data to CSV or JSON formats
+- Data Enhancement: Generate content using AI for your collections
+- Entity History: Track changes to your collection entities

package/dist/index.es.js

@@ -162,7 +162,7 @@ function LayoutModeSwitch(t0) {
   return t18;
 }
 function CollectionDetailsForm(t0) {
-  const $ = c(186);
+  const $ = c(196);
   const {
     isNewCollection,
     reservedGroups,
@@ -444,7 +444,7 @@ function CollectionDetailsForm(t0) {
   }
   const t37 = !isSubcollection && /* @__PURE__ */ jsxs("div", { className: "col-span-12 sm:col-span-4 relative", children: [
     /* @__PURE__ */ jsx(TextField, { error: showErrors && Boolean(errors.group), disabled: isSubmitting, value: values.group ?? "", autoComplete: "off", onChange: (event) => setFieldValue("group", event.target.value), name: "group", inputRef: groupRef, label: "Group" }),
-    /* @__PURE__ */ jsx(Autocomplete, { open: autoCompleteOpen && (groupOptions ?? []).length > 0, setOpen: setAutoCompleteOpen, children: groupOptions?.map((group_0, index) => /* @__PURE__ */ jsx(AutocompleteItem, { onClick: () => {
+    /* @__PURE__ */ jsx(Autocomplete, { open: autoCompleteOpen && (groupOptions ?? []).length > 0, setOpen: setAutoCompleteOpen, children: groupOptions?.map((group_0, index) => /* @__PURE__ */ jsx(AutocompleteItem, { className: "pr-6 pl-14", onClick: () => {
       setAutoCompleteOpen(false);
       setFieldValue("group", group_0 ?? null);
     }, children: /* @__PURE__ */ jsx("div", { className: "flex-grow", children: group_0 }) }, index + "_" + group_0)) }),
@@ -468,7 +468,7 @@ function CollectionDetailsForm(t0) {
   } else {
     t40 = $[58];
   }
-  const t41 = values.history === null ? "Document history revisions enabled if enabled globally" : values.history ? "Document history revisions ENABLED" : "Document history revisions NOT enabled";
+  const t41 = values.history === null || values.history === void 0 ? "Document history revisions enabled if enabled globally" : values.history ? "Document history revisions ENABLED" : "Document history revisions NOT enabled";
   let t42;
   if ($[59] !== setFieldValue) {
     t42 = (v) => setFieldValue("history", v);
@@ -477,7 +477,7 @@ function CollectionDetailsForm(t0) {
   } else {
     t42 = $[60];
   }
-  const t43 = values.history ?? null;
+  const t43 = values.history === void 0 ? null : values.history;
   let t44;
   if ($[61] !== t41 || $[62] !== t42 || $[63] !== t43) {
     t44 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", size: "large", allowIndeterminate: true, label: t41, onValueChange: t42, value: t43 });
@@ -735,242 +735,282 @@ function CollectionDetailsForm(t0) {
   } else {
     t84 = $[124];
   }
-  const t85 = customIdValue === "code_defined";
+  const t85 = values.includeJsonView === void 0 || values.includeJsonView ? "Include JSON view" : "Do not include JSON view";
   let t86;
   if ($[125] !== setFieldValue) {
-    t86 = (v_0) => {
-      if (v_0 === "code_defined") {
-        throw new Error("This should not happen");
-      }
-      setFieldValue("customId", v_0);
-    };
+    t86 = (v_0) => setFieldValue("includeJsonView", v_0);
     $[125] = setFieldValue;
     $[126] = t86;
   } else {
     t86 = $[126];
   }
-  const t87 = customIdValue ?? "";
+  const t87 = values.includeJsonView === void 0 ? true : values.includeJsonView;
   let t88;
+  if ($[127] !== t85 || $[128] !== t86 || $[129] !== t87) {
+    t88 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", size: "large", label: t85, onValueChange: t86, value: t87 });
+    $[127] = t85;
+    $[128] = t86;
+    $[129] = t87;
+    $[130] = t88;
+  } else {
+    t88 = $[130];
+  }
   let t89;
+  if ($[131] === Symbol.for("react.memo_cache_sentinel")) {
+    t89 = /* @__PURE__ */ jsx(FieldCaption, { children: "Include the JSON representation of the document." });
+    $[131] = t89;
+  } else {
+    t89 = $[131];
+  }
   let t90;
-  if ($[127] === Symbol.for("react.memo_cache_sentinel")) {
-    t88 = /* @__PURE__ */ jsx(SelectItem, { value: "false", children: "Document ID is generated automatically" });
-    t89 = /* @__PURE__ */ jsx(SelectItem, { value: "true", children: "Users must define an ID" });
-    t90 = /* @__PURE__ */ jsx(SelectItem, { value: "optional", children: "Users can define an ID, but it is not required" });
-    $[127] = t88;
-    $[128] = t89;
-    $[129] = t90;
-  } else {
-    t88 = $[127];
-    t89 = $[128];
-    t90 = $[129];
-  }
-  let t91;
-  if ($[130] !== t85 || $[131] !== t86 || $[132] !== t87) {
-    t91 = /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxs(Select, { name: "customId", label: "Document IDs generation", position: "item-aligned", size: "large", fullWidth: true, disabled: t85, onValueChange: t86, value: t87, renderValue: _temp3$4, children: [
+  if ($[132] !== t88) {
+    t90 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
       t88,
-      t89,
-      t90
-    ] }) });
-    $[130] = t85;
-    $[131] = t86;
-    $[132] = t87;
-    $[133] = t91;
+      t89
+    ] });
+    $[132] = t88;
+    $[133] = t90;
   } else {
-    t91 = $[133];
+    t90 = $[133];
   }
+  const t91 = customIdValue === "code_defined";
   let t92;
   if ($[134] !== setFieldValue) {
-    t92 = (v_1) => setFieldValue("collectionGroup", v_1);
+    t92 = (v_1) => {
+      if (v_1 === "code_defined") {
+        throw new Error("This should not happen");
+      }
+      setFieldValue("customId", v_1);
+    };
     $[134] = setFieldValue;
     $[135] = t92;
   } else {
     t92 = $[135];
   }
-  const t93 = values.collectionGroup ?? false;
+  const t93 = customIdValue ?? "";
   let t94;
-  if ($[136] !== t92 || $[137] !== t93) {
-    t94 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", size: "large", label: "Collection group", onValueChange: t92, value: t93 });
-    $[136] = t92;
-    $[137] = t93;
-    $[138] = t94;
-  } else {
-    t94 = $[138];
-  }
   let t95;
-  if ($[139] === Symbol.for("react.memo_cache_sentinel")) {
-    t95 = /* @__PURE__ */ jsx(FieldCaption, { children: "A collection group consists of all collections with the same path. This allows you to query over multiple collections at once." });
-    $[139] = t95;
-  } else {
-    t95 = $[139];
-  }
   let t96;
-  if ($[140] !== t94) {
-    t96 = /* @__PURE__ */ jsxs("div", { className: "col-span-12 mt-4", children: [
+  if ($[136] === Symbol.for("react.memo_cache_sentinel")) {
+    t94 = /* @__PURE__ */ jsx(SelectItem, { value: "false", children: "Document ID is generated automatically" });
+    t95 = /* @__PURE__ */ jsx(SelectItem, { value: "true", children: "Users must define an ID" });
+    t96 = /* @__PURE__ */ jsx(SelectItem, { value: "optional", children: "Users can define an ID, but it is not required" });
+    $[136] = t94;
+    $[137] = t95;
+    $[138] = t96;
+  } else {
+    t94 = $[136];
+    t95 = $[137];
+    t96 = $[138];
+  }
+  let t97;
+  if ($[139] !== t91 || $[140] !== t92 || $[141] !== t93) {
+    t97 = /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxs(Select, { name: "customId", label: "Document IDs generation", position: "item-aligned", size: "large", fullWidth: true, disabled: t91, onValueChange: t92, value: t93, renderValue: _temp3$4, children: [
       t94,
-      t95
-    ] });
-    $[140] = t94;
-    $[141] = t96;
+      t95,
+      t96
+    ] }) });
+    $[139] = t91;
+    $[140] = t92;
+    $[141] = t93;
+    $[142] = t97;
   } else {
-    t96 = $[141];
+    t97 = $[142];
   }
-  let t97;
-  if ($[142] !== setFieldValue) {
-    t97 = (v_2) => setFieldValue("textSearchEnabled", v_2);
-    $[142] = setFieldValue;
-    $[143] = t97;
-  } else {
-    t97 = $[143];
-  }
-  const t98 = values.textSearchEnabled ?? false;
-  let t99;
-  if ($[144] !== t97 || $[145] !== t98) {
-    t99 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", size: "large", label: "Enable text search for this collection", onValueChange: t97, value: t98 });
-    $[144] = t97;
-    $[145] = t98;
-    $[146] = t99;
+  let t98;
+  if ($[143] !== setFieldValue) {
+    t98 = (v_2) => setFieldValue("collectionGroup", v_2);
+    $[143] = setFieldValue;
+    $[144] = t98;
   } else {
-    t99 = $[146];
+    t98 = $[144];
   }
+  const t99 = values.collectionGroup ?? false;
   let t100;
-  if ($[147] === Symbol.for("react.memo_cache_sentinel")) {
-    t100 = /* @__PURE__ */ jsx(FieldCaption, { children: "Allow text search for this collection. If you have not specified a text search delegate, this will use the built-in local text search. This is not recommended for large collections, as it may incur in performance and cost issues." });
+  if ($[145] !== t98 || $[146] !== t99) {
+    t100 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", size: "large", label: "Collection group", onValueChange: t98, value: t99 });
+    $[145] = t98;
+    $[146] = t99;
     $[147] = t100;
   } else {
     t100 = $[147];
   }
   let t101;
-  if ($[148] !== t99) {
-    t101 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-      t99,
-      t100
-    ] });
-    $[148] = t99;
-    $[149] = t101;
+  if ($[148] === Symbol.for("react.memo_cache_sentinel")) {
+    t101 = /* @__PURE__ */ jsx(FieldCaption, { children: "A collection group consists of all collections with the same path. This allows you to query over multiple collections at once." });
+    $[148] = t101;
   } else {
-    t101 = $[149];
+    t101 = $[148];
   }
   let t102;
-  if ($[150] !== t101 || $[151] !== t54 || $[152] !== t62 || $[153] !== t74 || $[154] !== t81 || $[155] !== t84 || $[156] !== t91 || $[157] !== t96) {
-    t102 = /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-4 p-4", children: [
+  if ($[149] !== t100) {
+    t102 = /* @__PURE__ */ jsxs("div", { className: "col-span-12 mt-4", children: [
+      t100,
+      t101
+    ] });
+    $[149] = t100;
+    $[150] = t102;
+  } else {
+    t102 = $[150];
+  }
+  let t103;
+  if ($[151] !== setFieldValue) {
+    t103 = (v_3) => setFieldValue("textSearchEnabled", v_3);
+    $[151] = setFieldValue;
+    $[152] = t103;
+  } else {
+    t103 = $[152];
+  }
+  const t104 = values.textSearchEnabled ?? false;
+  let t105;
+  if ($[153] !== t103 || $[154] !== t104) {
+    t105 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", size: "large", label: "Enable text search for this collection", onValueChange: t103, value: t104 });
+    $[153] = t103;
+    $[154] = t104;
+    $[155] = t105;
+  } else {
+    t105 = $[155];
+  }
+  let t106;
+  if ($[156] === Symbol.for("react.memo_cache_sentinel")) {
+    t106 = /* @__PURE__ */ jsx(FieldCaption, { children: "Allow text search for this collection. If you have not specified a text search delegate, this will use the built-in local text search. This is not recommended for large collections, as it may incur in performance and cost issues." });
+    $[156] = t106;
+  } else {
+    t106 = $[156];
+  }
+  let t107;
+  if ($[157] !== t105) {
+    t107 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t105,
+      t106
+    ] });
+    $[157] = t105;
+    $[158] = t107;
+  } else {
+    t107 = $[158];
+  }
+  let t108;
+  if ($[159] !== t102 || $[160] !== t107 || $[161] !== t54 || $[162] !== t62 || $[163] !== t74 || $[164] !== t81 || $[165] !== t84 || $[166] !== t90 || $[167] !== t97) {
+    t108 = /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-4 p-4", children: [
       t54,
       t62,
       t74,
       t81,
       t84,
-      t91,
-      t96,
-      t101
+      t90,
+      t97,
+      t102,
+      t107
     ] });
-    $[150] = t101;
-    $[151] = t54;
-    $[152] = t62;
-    $[153] = t74;
-    $[154] = t81;
-    $[155] = t84;
-    $[156] = t91;
-    $[157] = t96;
-    $[158] = t102;
-  } else {
-    t102 = $[158];
+    $[159] = t102;
+    $[160] = t107;
+    $[161] = t54;
+    $[162] = t62;
+    $[163] = t74;
+    $[164] = t81;
+    $[165] = t84;
+    $[166] = t90;
+    $[167] = t97;
+    $[168] = t108;
+  } else {
+    t108 = $[168];
   }
-  let t103;
-  if ($[159] !== advancedPanelExpanded || $[160] !== t102) {
-    t103 = /* @__PURE__ */ jsx(ExpandablePanel, { expanded: advancedPanelExpanded, onExpandedChange: setAdvancedPanelExpanded, title: t47, initiallyExpanded: false, children: t102 });
-    $[159] = advancedPanelExpanded;
-    $[160] = t102;
-    $[161] = t103;
-  } else {
-    t103 = $[161];
-  }
-  let t104;
-  if ($[162] !== children || $[163] !== t103) {
-    t104 = /* @__PURE__ */ jsxs("div", { className: "col-span-12 mt-8", children: [
-      t103,
+  let t109;
+  if ($[169] !== advancedPanelExpanded || $[170] !== t108) {
+    t109 = /* @__PURE__ */ jsx(ExpandablePanel, { expanded: advancedPanelExpanded, onExpandedChange: setAdvancedPanelExpanded, title: t47, initiallyExpanded: false, children: t108 });
+    $[169] = advancedPanelExpanded;
+    $[170] = t108;
+    $[171] = t109;
+  } else {
+    t109 = $[171];
+  }
+  let t110;
+  if ($[172] !== children || $[173] !== t109) {
+    t110 = /* @__PURE__ */ jsxs("div", { className: "col-span-12 mt-8", children: [
+      t109,
       children
     ] });
-    $[162] = children;
-    $[163] = t103;
-    $[164] = t104;
+    $[172] = children;
+    $[173] = t109;
+    $[174] = t110;
   } else {
-    t104 = $[164];
+    t110 = $[174];
   }
-  let t105;
-  if ($[165] !== t104 || $[166] !== t27 || $[167] !== t36 || $[168] !== t37 || $[169] !== t40 || $[170] !== t46) {
-    t105 = /* @__PURE__ */ jsxs("div", { className: t19, children: [
+  let t111;
+  if ($[175] !== t110 || $[176] !== t27 || $[177] !== t36 || $[178] !== t37 || $[179] !== t40 || $[180] !== t46) {
+    t111 = /* @__PURE__ */ jsxs("div", { className: t19, children: [
       t27,
       t36,
       t37,
       t40,
       t46,
-      t104
+      t110
     ] });
-    $[165] = t104;
-    $[166] = t27;
-    $[167] = t36;
-    $[168] = t37;
-    $[169] = t40;
-    $[170] = t46;
-    $[171] = t105;
-  } else {
-    t105 = $[171];
-  }
-  let t106;
-  if ($[172] === Symbol.for("react.memo_cache_sentinel")) {
-    t106 = /* @__PURE__ */ jsx("div", { style: {
+    $[175] = t110;
+    $[176] = t27;
+    $[177] = t36;
+    $[178] = t37;
+    $[179] = t40;
+    $[180] = t46;
+    $[181] = t111;
+  } else {
+    t111 = $[181];
+  }
+  let t112;
+  if ($[182] === Symbol.for("react.memo_cache_sentinel")) {
+    t112 = /* @__PURE__ */ jsx("div", { style: {
       height: "52px"
     } });
-    $[172] = t106;
+    $[182] = t112;
   } else {
-    t106 = $[172];
+    t112 = $[182];
   }
-  let t107;
-  if ($[173] !== setFieldValue) {
-    t107 = (icon) => {
+  let t113;
+  if ($[183] !== setFieldValue) {
+    t113 = (icon) => {
       setIconDialogOpen(false);
       setFieldValue("icon", icon);
     };
-    $[173] = setFieldValue;
-    $[174] = t107;
+    $[183] = setFieldValue;
+    $[184] = t113;
   } else {
-    t107 = $[174];
+    t113 = $[184];
   }
-  let t108;
-  if ($[175] !== t107 || $[176] !== values.icon) {
-    t108 = /* @__PURE__ */ jsx("div", { className: "p-4 overflow-auto min-h-[200px]", children: /* @__PURE__ */ jsx(SearchIconsView, { selectedIcon: values.icon, onIconSelected: t107 }) });
-    $[175] = t107;
-    $[176] = values.icon;
-    $[177] = t108;
+  let t114;
+  if ($[185] !== t113 || $[186] !== values.icon) {
+    t114 = /* @__PURE__ */ jsx("div", { className: "p-4 overflow-auto min-h-[200px]", children: /* @__PURE__ */ jsx(SearchIconsView, { selectedIcon: values.icon, onIconSelected: t113 }) });
+    $[185] = t113;
+    $[186] = values.icon;
+    $[187] = t114;
   } else {
-    t108 = $[177];
+    t114 = $[187];
   }
-  let t109;
-  if ($[178] !== iconDialogOpen || $[179] !== t108) {
-    t109 = /* @__PURE__ */ jsx(Dialog, { open: iconDialogOpen, onOpenChange: setIconDialogOpen, maxWidth: "xl", fullWidth: true, children: t108 });
-    $[178] = iconDialogOpen;
-    $[179] = t108;
-    $[180] = t109;
+  let t115;
+  if ($[188] !== iconDialogOpen || $[189] !== t114) {
+    t115 = /* @__PURE__ */ jsx(Dialog, { open: iconDialogOpen, onOpenChange: setIconDialogOpen, maxWidth: "xl", fullWidth: true, children: t114 });
+    $[188] = iconDialogOpen;
+    $[189] = t114;
+    $[190] = t115;
   } else {
-    t109 = $[180];
+    t115 = $[190];
   }
-  let t110;
-  if ($[181] !== T0 || $[182] !== t105 || $[183] !== t109 || $[184] !== t18) {
-    t110 = /* @__PURE__ */ jsx("div", { className: t7, children: /* @__PURE__ */ jsxs(T0, { maxWidth: t8, className: t9, children: [
+  let t116;
+  if ($[191] !== T0 || $[192] !== t111 || $[193] !== t115 || $[194] !== t18) {
+    t116 = /* @__PURE__ */ jsx("div", { className: t7, children: /* @__PURE__ */ jsxs(T0, { maxWidth: t8, className: t9, children: [
       t18,
-      t105,
-      t106,
-      t109
+      t111,
+      t112,
+      t115
     ] }) });
-    $[181] = T0;
-    $[182] = t105;
-    $[183] = t109;
-    $[184] = t18;
-    $[185] = t110;
+    $[191] = T0;
+    $[192] = t111;
+    $[193] = t115;
+    $[194] = t18;
+    $[195] = t116;
   } else {
-    t110 = $[185];
+    t116 = $[195];
   }
-  return t110;
+  return t116;
 }
 function _temp3$4(value_3) {
   if (value_3 === "code_defined") {
@@ -7014,8 +7054,8 @@ function CollectionPropertiesEditorForm({
     setSelectedPropertyKey(propertyKey_2);
     setSelectedPropertyNamespace(namespace_5);
   };
-  const body = /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-2 h-full bg-surface-50 dark:bg-surface-900", children: [
-    /* @__PURE__ */ jsxs("div", { className: cls("p-4 md:p-8 pb-20 md:pb-20", "col-span-12 lg:col-span-5 h-full overflow-auto", !asDialog && "border-r " + defaultBorderMixin), children: [
+  const body = /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-2 h-full bg-white dark:bg-surface-950", children: [
+    /* @__PURE__ */ jsxs("div", { className: cls("bg-surface-50 dark:bg-surface-900", "p-4 md:p-8 pb-20 md:pb-20", "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: "flex-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) }),
@@ -7034,7 +7074,7 @@ function CollectionPropertiesEditorForm({
       /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(PropertyTree, { className: "pl-8", inferredPropertyKeys, selectedPropertyKey: selectedPropertyKey ? getFullId(selectedPropertyKey, selectedPropertyNamespace) : void 0, properties: values.properties, additionalFields: values.additionalFields, propertiesOrder: usedPropertiesOrder, onPropertyClick, onPropertyMove, onPropertyRemove: isNewCollection ? deleteProperty : void 0, collectionEditable, errors }) }),
       /* @__PURE__ */ jsx(Button, { className: "mt-8 w-full", color: "primary", variant: "outlined", size: "large", 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 pb-20 md:pb-20", children: /* @__PURE__ */ jsxs(Paper, { className: "sticky top-8 p-4 min-h-full border border-transparent w-full flex flex-col justify-center ", children: [
+    !asDialog && /* @__PURE__ */ jsx("div", { className: "col-span-12 lg:col-span-7 p-4 md:py-8 md:px-4 h-full overflow-auto pb-20 md:pb-20", 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, collectionEditable }, `edit_view_${selectedPropertyIndex}`),
       !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" }),