@rebasepro/admin 0.0.1-canary.eae7889 → 0.1.0

package/src/collection_editor/ui/collection_editor/CollectionDetailsForm.tsx

@@ -5,7 +5,7 @@ import React, { useMemo, useState } from "react";
 import { useAuthController, useCustomizationController } from "@rebasepro/core";
 import { getFieldConfig, PropertyConfigBadge, SearchIconsView } from "../../_cms_internals";
 import { EntityCollection, Property } from "@rebasepro/types";
-import { BooleanSwitchWithLabel, Chip, cls, Container, DebouncedTextField, Dialog, IconButton, Select, SelectItem, TextField, Tooltip, Typography, useAutoComplete, Button , iconSize } from "@rebasepro/ui";
+import { BooleanSwitchWithLabel, Chip, cls, Container, DebouncedTextField, Dialog, IconButton, Select, SelectItem, TextField, Tooltip, Typography, Button, iconSize } from "@rebasepro/ui";
 import { XIcon, HistoryIcon } from "lucide-react";
 
 import { Field, getIn, useFormex } from "@rebasepro/formex";
@@ -18,24 +18,20 @@ import { singular, toSnakeCase, unslugify } from "@rebasepro/utils";
 
 export function CollectionDetailsForm({
     isNewCollection,
-    reservedGroups,
     existingPaths,
     existingIds,
-    groups,
     parentCollection,
     expandKanban
 }: {
     isNewCollection: boolean,
-    reservedGroups?: string[];
     existingPaths?: string[];
     existingIds?: string[];
-    groups: string[] | null;
     parentCollection?: EntityCollection;
-    parentCollectionIds?: string[];
+    parentCollectionSlugs?: string[], parentEntityIds?: string[];
     expandKanban?: boolean;
 }) {
 
-    const groupRef = React.useRef<HTMLInputElement>(null);
+
     const {
         values,
         setFieldValue,
@@ -98,15 +94,7 @@ export function CollectionDetailsForm({
 
     const collectionIcon = <IconForView collectionOrView={values}/>;
 
-    const groupOptions = groups?.filter((group) => !reservedGroups?.includes(group));
 
-    const {
-        inputFocused,
-        autoCompleteOpen,
-        setAutoCompleteOpen
-    } = useAutoComplete({
-        ref: groupRef
-    });
 
     const isSubcollection = !!parentCollection;
 
@@ -172,39 +160,7 @@ export function CollectionDetailsForm({
 
                     </div>
 
-                    {/*{!isSubcollection && <div className={"col-span-12 sm:col-span-4 relative"}>*/}
-
-                    {/*    <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"/>*/}
-                    {/*    <Autocomplete*/}
-                    {/*        open={autoCompleteOpen && (groupOptions ?? []).length > 0}*/}
-                    {/*        setOpen={setAutoCompleteOpen}>*/}
-                    {/*        {groupOptions?.map((group, index) => {*/}
-                    {/*            return <AutocompleteItem*/}
-                    {/*                key={index + "_" + group}*/}
-                    {/*                className={"pr-6 pl-14"}*/}
-                    {/*                onClick={() => {*/}
-                    {/*                    setAutoCompleteOpen(false);*/}
-                    {/*                    setFieldValue("group", group ?? null);*/}
-                    {/*                }}*/}
-                    {/*            >*/}
-                    {/*                <div className={"flex-grow"}>*/}
-                    {/*                    {group}*/}
-                    {/*                </div>*/}
-                    {/*            </AutocompleteItem>;*/}
-                    {/*        })}*/}
-                    {/*    </Autocomplete>*/}
-                    {/*    <FieldCaption>*/}
-                    {/*        {showErrors && Boolean(errors.group) ? errors.group : "Group in the home page"}*/}
-                    {/*    </FieldCaption>*/}
-
-                    {/*</div>}*/}
+
 
                     <LayoutModeSwitch
                         className={"col-span-12"}
@@ -324,8 +280,7 @@ export function CollectionDetailsForm({
                                         property={{
                                             type: "string",
                                             name: dialogPropertyName,
-                                            disabled: true,
-                                            hideFromCollection: true
+                                            ui: { disabled: true, hideFromCollection: true }
                                         }}
                                         propertyKey={dialogPropertyKey}
                                         existingProperty={false}

package/src/collection_editor/ui/collection_editor/CollectionEditorDialog.tsx

@@ -37,7 +37,6 @@ export interface CollectionEditorDialogProps {
     open: boolean;
     isNewCollection: boolean;
     initialValues?: {
-        group?: string,
         slug?: string,
         name?: string,
     }
@@ -48,10 +47,9 @@ export interface CollectionEditorDialogProps {
     copyFrom?: EntityCollection;
     editedCollectionId?: string;
     path?: string; // full path of this particular collection, like `products/123/locales`
-    parentCollectionIds?: string[]; // path ids of the parent collection, like [`products`]
+    parentCollectionSlugs?: string[], parentEntityIds?: string[]; // path ids of the parent collection, like [`products`]
     handleClose: (collection?: EntityCollection) => void;
     configController: CollectionsConfigController;
-    reservedGroups?: string[];
     collectionInference?: CollectionInference;
     extraView?: {
         View: React.ComponentType<{
@@ -172,7 +170,7 @@ export function CollectionEditor(props: CollectionEditorDialogProps & {
     const initialValuesProp = props.initialValues;
     const copyFromProp = props.copyFrom;
     // Skip templates when duplicating (copyFrom is provided)
-    const includeTemplates = !copyFromProp && !initialValuesProp?.slug && (props.parentCollectionIds ?? []).length === 0;
+    const includeTemplates = !copyFromProp && !initialValuesProp?.slug && (props.parentCollectionSlugs ?? []).length === 0;
     const collectionsInThisLevel = (props.parentCollection ? getSubcollections(props.parentCollection) : collections) ?? [];
     const existingPaths = collectionsInThisLevel.map(col => getTableName(col)?.trim().toLowerCase()).filter(Boolean);
     const existingIds = collectionsInThisLevel.map(col => col.slug?.trim().toLowerCase()).filter(Boolean) as string[];
@@ -186,7 +184,7 @@ export function CollectionEditor(props: CollectionEditorDialogProps & {
                     // We must use getRawCollection so the editor schema fields
                     // aren't polluted with dynamically injected runtime `relations`.
                     // The path lookup relies on generating a fake child path to resolve through the registry
-                    const collectionPath = [...(props.parentCollectionIds ?? []), props.editedCollectionId]
+                    const collectionPath = [...(props.parentCollectionSlugs ?? []), props.editedCollectionId]
                         .reduce((acc, segment, i) => i === 0 ? segment : `${acc}/fake_id/${segment}`, "");
 
                     setCollection(collectionRegistry.getRawCollection(collectionPath) as EntityCollection<any>);
@@ -198,9 +196,9 @@ export function CollectionEditor(props: CollectionEditorDialogProps & {
         } catch (e) {
             console.error(e);
         }
-    }, [props.editedCollectionId, props.parentCollectionIds, collectionRegistry.initialised, collectionRegistry.getRawCollection]);
+    }, [props.editedCollectionId, props.parentCollectionSlugs, props.parentEntityIds, collectionRegistry.initialised, collectionRegistry.getRawCollection]);
+
 
-    const groups = topLevelNavigation?.groups ?? [];
 
     const initialCollection = collection
         ? {
@@ -226,7 +224,6 @@ export function CollectionEditor(props: CollectionEditorDialogProps & {
                 slug: initialValuesProp?.slug ?? randomString(16),
                 table: initialValuesProp?.slug ?? "",
                 name: initialValuesProp?.name ?? "",
-                group: initialValuesProp?.group ?? "",
                 properties: {} as Properties,
                 propertiesOrder: [],
                 icon: coolIconKeys[Math.floor(Math.random() * coolIconKeys.length)],
@@ -249,7 +246,6 @@ export function CollectionEditor(props: CollectionEditorDialogProps & {
         includeTemplates={includeTemplates}
         collection={collection}
         setCollection={setCollection}
-        groups={groups}
         propertyConfigs={propertyConfigs}/>
 
 }
@@ -258,11 +254,10 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
     isNewCollection,
     configController,
     editedCollectionId,
-    parentCollectionIds,
+    parentCollectionSlugs, parentEntityIds,
     path,
     collectionInference,
     handleClose,
-    reservedGroups,
     extraView,
     handleCancel,
     setFormDirty,
@@ -276,7 +271,6 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
     setCollection,
     initialValues,
     propertyConfigs,
-    groups,
     existingEntities,
     initialView: initialViewProp,
     expandKanban,
@@ -295,7 +289,6 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
     collection: EntityCollection<M> | undefined,
     setCollection: (collection: EntityCollection<M>) => void,
     propertyConfigs: Record<string, PropertyConfig>,
-    groups: string[],
 }
 ) {
 
@@ -321,7 +314,7 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
             id,
             collectionData: updatedCollection,
             previousId: editedCollectionId,
-            parentCollectionIds
+            parentCollectionSlugs
         })
             .then(() => {
                 setError(undefined);
@@ -532,7 +525,7 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
     const usedPath = getTableName(values);
     const pathError = validatePath(usedPath, isNewCollection, existingPaths, values.slug);
 
-    const parentPaths = !pathError && parentCollectionIds ? collectionRegistry.convertIdsToPaths(parentCollectionIds) : undefined;
+    const parentPaths = !pathError && parentCollectionSlugs ? collectionRegistry.convertIdsToPaths(parentCollectionSlugs) : undefined;
 
     const updatedFullPath = parentPaths && parentPaths.length > 0
         ? [...parentPaths, usedPath].join("/fake_id/")
@@ -615,11 +608,11 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
         }
     };
 
-    return <div className="h-full w-full flex flex-col bg-white dark:bg-surface-800">
+    return <div className="h-full w-full flex flex-col bg-white dark:bg-surface-950">
         <Formex value={formController}>
 
             <>
-                {!isNewCollection && <div className={cls("px-4 py-2 w-full flex shrink-0 items-center justify-between gap-4 bg-white dark:bg-surface-800 border-b", defaultBorderMixin)}>
+                {!isNewCollection && <div className={cls("px-4 py-2 w-full flex shrink-0 items-center justify-between gap-4 bg-surface-50 dark:bg-surface-950 border-b", defaultBorderMixin)}>
                     <div className="flex flex-1 items-center justify-end gap-4 min-w-0">
                         <Tabs value={currentView}
                             className="bg-transparent !w-fit max-w-full"
@@ -756,7 +749,6 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
                             <CollectionPropertiesEditorForm
                                 showErrors={submitCount > 0}
                                 isNewCollection={isNewCollection}
-                                reservedGroups={reservedGroups}
                                 onPropertyError={(propertyKey, namespace, error) => {
                                     const current = removeUndefined({
                                         ...propertyErrorsRef.current,
@@ -780,7 +772,7 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
 
                     </div>
                     {(!fullScreen || isNewCollection || !!error) && (
-                        <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-800">
+                        <div className="shrink-0 w-full p-4 sm:px-6 sm:py-4 border-t border-surface-200 dark:border-surface-900 flex items-center justify-between gap-4 bg-white dark:bg-surface-950">
                             {error && <ErrorView error={error}/>}
 
                             {isNewCollection && includeTemplates && currentView === "import_data_mapping" &&
@@ -858,7 +850,7 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
                                     color="primary"
                                     type="submit"
                                     loading={isSubmitting}
-                                    disabled={isSubmitting || (currentView === "general" && !validValues)}
+                                    disabled={isSubmitting || (currentView === "general" && !validValues) || configController?.readOnly}
                                     startIcon={currentView === "properties"
                                         ? <CheckIcon/>
                                         : undefined}

package/src/collection_editor/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -27,7 +27,6 @@ type CollectionEditorFormProps = {
     propertyErrorsRef?: React.MutableRefObject<any>;
     onPropertyError: (propertyKey: string, namespace: string | undefined, error?: Record<string, any>) => void;
     setDirty?: (dirty: boolean) => void;
-    reservedGroups?: string[];
     extraIcon: React.ReactNode | any;
     getUser?: (uid: string) => User | null;
     getData?: () => Promise<object[]>;
@@ -42,7 +41,6 @@ export function CollectionPropertiesEditorForm({
     propertyErrorsRef,
     onPropertyError,
     setDirty,
-    reservedGroups,
     extraIcon,
     getUser,
     getData,
@@ -391,7 +389,7 @@ export function CollectionPropertiesEditorForm({
     };
 
     const body = (
-        <div className={"grid grid-cols-12 gap-2 h-full bg-surface dark:bg-surface-dark"}>
+        <div className={"grid grid-cols-12 gap-2 h-full bg-white dark:bg-surface-950"}>
             <div className={cls(
                 "bg-surface-50 dark:bg-surface-900",
                 "p-4 md:p-8",

package/src/collection_editor/ui/collection_editor/CollectionRLSTab.tsx

@@ -1,6 +1,18 @@
 
 import { EntityCollection } from "@rebasepro/types";
 import React, { useState, useEffect } from "react";
+
+/**
+ * Validates and double-quotes a SQL identifier to prevent injection.
+ * Only allows safe Postgres identifiers (letters, digits, underscores).
+ * Throws if the identifier contains unsafe characters.
+ */
+function sanitizeSqlIdentifier(name: string): string {
+    if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(name)) {
+        throw new Error(`Invalid SQL identifier: "${name}". Only letters, digits, and underscores are allowed.`);
+    }
+    return `"${name}"`;
+}
 import { Button, IconButton, Typography, cls, defaultBorderMixin, Chip, Paper, Container, Tooltip, CircularProgress, Dialog, DialogTitle, DialogContent, DialogActions, TextField, Select, SelectItem, MultiSelect, MultiSelectItem , iconSize } from "@rebasepro/ui";
 import { KeyIcon, Trash2Icon } from "lucide-react";
 import { useFormex } from "@rebasepro/formex";
@@ -51,10 +63,13 @@ export function CollectionRLSTab() {
 
             setIsLoadingDb(true);
             try {
+                const safeTableName = sanitizeSqlIdentifier(tableName);
+                // safeTableName is validated to be [a-zA-Z_][a-zA-Z0-9_]* — safe for string literal
+                const quotedName = safeTableName.slice(1, -1); // strip double quotes to get raw name
                 const sql = `
                     SELECT policyname, permissive, roles, cmd, qual, with_check
                     FROM pg_policies
-                    WHERE tablename = '${tableName}' AND schemaname NOT IN ('information_schema', 'pg_catalog');
+                    WHERE tablename = '${quotedName}' AND schemaname NOT IN ('information_schema', 'pg_catalog');
                 `;
                 const result = await databaseAdmin.executeSql(sql);
                 const extractRows = (res: unknown): Record<string, unknown>[] => {
@@ -280,7 +295,7 @@ function InlinePolicyEditor({
                         </div>
                         <div className="flex flex-col gap-1.5">
                             <Typography variant="caption" className="uppercase tracking-wider text-text-secondary">Behavior</Typography>
-                            <Select value={behavior} onValueChange={(val: string) => setBehavior(val as any)} position="item-aligned">
+                            <Select value={behavior} onValueChange={(val: string) => setBehavior(val as "PERMISSIVE" | "RESTRICTIVE")} position="item-aligned">
                                 <SelectItem value="PERMISSIVE">Permissive</SelectItem>
                                 <SelectItem value="RESTRICTIVE">Restrictive</SelectItem>
                             </Select>

package/src/collection_editor/ui/collection_editor/CollectionRelationsTab.tsx

@@ -1,6 +1,6 @@
 
 import React, { useState } from "react";
-import { Button, IconButton, Typography, Table, TableHeader, TableCell, TableBody, TableRow, TextField, Select, SelectItem, Container, Dialog, DialogTitle, DialogContent, DialogActions } from "@rebasepro/ui";
+import { Button, IconButton, Typography, Table, TableHeader, TableCell, TableBody, TableRow, TextField, Select, SelectItem, Container, Dialog, DialogTitle, DialogContent, DialogActions, cls, defaultBorderMixin } from "@rebasepro/ui";
 import { Trash2Icon } from "lucide-react";
 import { useFormex } from "@rebasepro/formex";
 import { PostgresCollection, Relation } from "@rebasepro/types";
@@ -128,7 +128,7 @@ direction: "owning" });
                             <DialogTitle className="flex justify-between items-center w-full" variant="h6">
                                 {editingRelationIndex === -1 ? "New Relation" : "Edit Relation"}
                             </DialogTitle>
-                            <DialogContent includeMargin={false} className="p-4 md:p-6 border-t dark:border-surface-700 bg-surface-50 dark:bg-surface-800">
+                            <DialogContent includeMargin={false} className={cls("p-4 md:p-6 border-t bg-white dark:bg-surface-900", defaultBorderMixin)}>
                                 <div className="flex flex-col gap-4 max-w-2xl mx-auto">
                                     <TextField
                                         label="Relation Name"
@@ -178,7 +178,7 @@ direction: val as Relation["direction"] } : null)}
                                     </Select>
 
                                     {editingRelationState.cardinality === "many" && editingRelationState.direction === "owning" && (
-                                        <div className="flex flex-col gap-4 mt-4 pt-4 border-t dark:border-surface-800">
+                                        <div className={cls("flex flex-col gap-4 mt-4 pt-4 border-t", defaultBorderMixin)}>
                                             <Typography variant="subtitle2" className="text-text-primary">Intermediate Table</Typography>
                                             <Typography variant="body2" className="text-text-secondary -mt-3">
                                                 Required for many-to-many relationships. This defines the junction table linking both collections.

package/src/collection_editor/ui/collection_editor/CollectionStudioView.tsx

@@ -42,7 +42,7 @@ export function CollectionStudioView({ collectionId, ...props }: CollectionStudi
     };
 
     return (
-        <div className="flex-grow flex flex-col h-full w-full bg-white dark:bg-surface-800">
+        <div className="flex-grow flex flex-col h-full w-full bg-white dark:bg-surface-950">
             <AIModifiedPathsProvider>
                 {activeCollectionId ? (
                     <CollectionEditor
@@ -73,6 +73,7 @@ export function CollectionStudioView({ collectionId, ...props }: CollectionStudi
                             Select a collection or create a new one
                         </Typography>
                         <Button
+                            disabled={props.configController?.readOnly}
                             onClick={() => navigate(urlController.buildAppUrlPath("schema/new"))}
                         >
                             <PlusIcon/>

package/src/collection_editor/ui/collection_editor/CollectionsStudioView.tsx

@@ -4,7 +4,7 @@ import { IconForView } from "@rebasepro/core";
 import { useUrlController } from "../../_cms_internals";
 import React, { useState, useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
-import { cls, defaultBorderMixin, ResizablePanels, Typography, IconButton, Button , iconSize } from "@rebasepro/ui";
+import { cls, defaultBorderMixin, ResizablePanels, Typography, IconButton, Button , iconSize, Tooltip } from "@rebasepro/ui";
 import { PlusIcon } from "lucide-react";
 ;
 import { CollectionsConfigController } from "../../types/config_controller";
@@ -46,25 +46,30 @@ export function CollectionsStudioView({ configController }: CollectionsStudioVie
     const collections = configController.collections || [];
 
     return (
-        <div className="flex h-full w-full bg-white dark:bg-surface-800 overflow-hidden text-text-primary dark:text-text-primary-dark">
+        <div className="flex h-full w-full bg-white dark:bg-surface-950 overflow-hidden text-text-primary dark:text-text-primary-dark">
             <ResizablePanels
                 orientation="horizontal"
                 panelSizePercent={sidebarSize}
                 onPanelSizeChange={setSidebarSize}
                 minPanelSizePx={220}
                 firstPanel={
-                    <div className={cls("flex flex-col h-full w-full bg-white dark:bg-surface-800 border-r", defaultBorderMixin)}>
-                        <div className={cls("flex items-center justify-between px-3 py-2 border-b bg-surface-50 dark:bg-surface-800 min-h-[48px]", defaultBorderMixin)}>
+                    <div className={cls("flex flex-col h-full w-full bg-white dark:bg-surface-950 border-r", defaultBorderMixin)}>
+                        <div className={cls("flex items-center justify-between px-3 py-2 border-b bg-surface-50 dark:bg-surface-900 min-h-[48px]", defaultBorderMixin)}>
                             <Typography variant="caption" className="font-bold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark">
                                 Collections
                             </Typography>
-                            <IconButton
-                                size="small"
-                                onClick={() => navigate(urlController.buildAppUrlPath("schema/new"))}
-                                className={activeCollectionId === "new" ? "text-primary dark:text-primary-dark" : "text-text-secondary dark:text-text-secondary-dark"}
-                            >
-                                <PlusIcon size={iconSize.smallest}/>
-                            </IconButton>
+                            <Tooltip title={configController.readOnly ? configController.readOnlyReason || "Read only" : "Add collection"}>
+                                <div>
+                                    <IconButton
+                                        size="small"
+                                        disabled={configController.readOnly}
+                                        onClick={() => navigate(urlController.buildAppUrlPath("schema/new"))}
+                                        className={activeCollectionId === "new" ? "text-primary dark:text-primary-dark" : "text-text-secondary dark:text-text-secondary-dark"}
+                                    >
+                                        <PlusIcon size={iconSize.smallest}/>
+                                    </IconButton>
+                                </div>
+                            </Tooltip>
                         </div>
 
                         <div className="flex-grow overflow-y-auto w-full no-scrollbar p-2 space-y-0.5">
@@ -86,7 +91,7 @@ export function CollectionsStudioView({ configController }: CollectionsStudioVie
                                             "flex items-center gap-3 px-3 py-2 cursor-pointer rounded-md text-sm transition-colors",
                                             isSelected
                                                 ? "bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-light"
-                                                : "hover:bg-surface-100 dark:hover:bg-surface-800 text-text-secondary dark:text-text-secondary-dark"
+                                                : "hover:bg-surface-100 dark:hover:bg-surface-900 text-text-secondary dark:text-text-secondary-dark"
                                         )}
                                     >
                                         <IconForView collectionOrView={collection} size={"small"} className={cls(
@@ -118,6 +123,7 @@ export function CollectionsStudioView({ configController }: CollectionsStudioVie
                                     Select a collection or create a new one to start editing
                                 </Typography>
                                 <Button
+                                    disabled={configController.readOnly}
                                     onClick={() => navigate(urlController.buildAppUrlPath("schema/new"))}
                                 >
                                     <PlusIcon/>

package/src/collection_editor/ui/collection_editor/DisplaySettingsForm.tsx

@@ -186,8 +186,7 @@ export function DisplaySettingsForm({
                                             property={{
                                                 type: "string",
                                                 name: dialogPropertyName,
-                                                disabled: true,
-                                                hideFromCollection: true
+                                                ui: { disabled: true, hideFromCollection: true }
                                             }}
                                             propertyKey={dialogPropertyKey}
                                             existingProperty={false}

package/src/collection_editor/ui/collection_editor/GetCodeDialog.tsx

@@ -123,8 +123,7 @@ function collectionToCode(collection: EntityCollection): object {
         description: collection.description,
 
         icon: collection.icon,
-        group: collection.group,
-        filter: collection.filter,
+        defaultFilter: collection.defaultFilter,
         sort: collection.sort,
         properties: Object.entries({
             ...(collection.properties ?? {})

package/src/collection_editor/ui/collection_editor/PropertyFieldPreview.tsx

@@ -39,10 +39,10 @@ export function PropertyFieldPreview({
         <div onClick={onClick} className={onClick ? "cursor-pointer" : ""}>
         <Paper
             className={cls(
-                "w-full flex flex-row gap-3 items-center px-3 py-2 rounded-lg transition-all duration-200 border border-transparent bg-transparent",
+                "w-full flex flex-row gap-3 items-center px-3 py-2 rounded-lg transition-all duration-200 border bg-white dark:bg-surface-800 border-surface-200 dark:border-surface-700 shadow-xs",
                 selected
-                    ? "bg-primary/5 dark:bg-primary/10 ring-1 ring-inset ring-primary"
-                    : "hover:bg-surface-50 dark:hover:bg-surface-800"
+                    ? "bg-primary/5 dark:bg-primary/10 ring-1 ring-inset ring-primary border-primary/30"
+                    : "hover:bg-surface-50 dark:hover:bg-surface-750"
             )}
         >
             <PropertyConfigBadge propertyConfig={propertyConfig} size="small"/>
@@ -105,10 +105,10 @@ export function NonEditablePropertyPreview({
         <div onClick={onClick} className={onClick ? "cursor-pointer" : ""}>
         <Paper
             className={cls(
-                "w-full flex flex-row gap-3 items-center px-3 py-2 rounded-lg transition-all duration-200 border border-transparent bg-transparent",
+                "w-full flex flex-row gap-3 items-center px-3 py-2 rounded-lg transition-all duration-200 border bg-white dark:bg-surface-800 border-surface-200 dark:border-surface-700 shadow-xs",
                 selected
-                    ? "bg-primary/5 dark:bg-primary/10 ring-1 ring-inset ring-primary"
-                    : "hover:bg-surface-50 dark:hover:bg-surface-800"
+                    ? "bg-primary/5 dark:bg-primary/10 ring-1 ring-inset ring-primary border-primary/30"
+                    : "hover:bg-surface-50 dark:hover:bg-surface-750"
             )}
         >
             <div className={"relative shrink-0"}>

package/src/collection_editor/ui/collection_editor/SubcollectionsEditTab.tsx

@@ -21,14 +21,14 @@ export function SubcollectionsEditTab({
     configController,
     collectionInference,
     getUser,
-    parentCollectionIds
+    parentCollectionSlugs
 }: {
     collection: EntityCollection,
     parentCollection?: EntityCollection,
     configController: CollectionsConfigController;
     collectionInference?: CollectionInference;
     getUser?: (uid: string) => User | null;
-    parentCollectionIds?: string[];
+    parentCollectionSlugs?: string[], parentEntityIds?: string[];
 }) {
 
     const { entityViews: contextEntityViews } = useCustomizationController();
@@ -187,7 +187,7 @@ export function SubcollectionsEditTab({
                     onAccept={() => {
                         const props = {
                             id: subcollectionToDelete!,
-                            parentCollectionIds: [...(parentCollectionIds ?? []), collection.slug]
+                            parentCollectionSlugs: [...(parentCollectionSlugs ?? []), collection.slug]
                         };
                         console.debug("Deleting subcollection", props)
                         configController.deleteCollection(props).then(() => {
@@ -217,7 +217,7 @@ export function SubcollectionsEditTab({
                 configController={configController}
                 parentCollection={collection}
                 collectionInference={collectionInference}
-                parentCollectionIds={[...parentCollectionIds ?? [], values.slug]}
+                parentCollectionSlugs={[...parentCollectionSlugs ?? [], values.slug]}
                 isNewCollection={false}
                 {...currentDialog}
                 getUser={getUser}

package/src/collection_editor/ui/collection_editor/properties/MapPropertyField.tsx

@@ -111,8 +111,8 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
                     position={"start"}
                     size={"medium"}
                     label={t("spread_children_as_columns")}
-                    onValueChange={(v) => setFieldValue("spreadChildren", v)}
-                    value={values.spreadChildren ?? false}
+                    onValueChange={(v) => setFieldValue("ui.spreadChildren", v)}
+                    value={values.ui?.spreadChildren ?? false}
                 />
                 <FieldCaption>
                     Set this flag to true if you want to display the children of this group as individual columns. This

package/src/collection_editor/ui/collection_editor/properties/ReferencePropertyField.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import { Field, getIn, useFormex } from "@rebasepro/formex";
 ;
 import { NumberProperty, StringProperty } from "@rebasepro/types";
-import { CircularProgress, Select, SelectGroup, SelectItem, Typography } from "@rebasepro/ui";
+import { CircularProgress, Select, SelectItem, Typography } from "@rebasepro/ui";
 
 export function ReferencePropertyField({
     existing,
@@ -81,12 +81,6 @@ export function CollectionsSelect({
 
     const collections = collectionRegistry.collections ?? [];
 
-    const groups: string[] = Array.from(new Set(
-        Object.values(collections).map(e => e.group).filter(Boolean) as string[]
-    ).values());
-
-    const ungroupedCollections = collections.filter((col) => !col.group);
-
     return (
         <>
             <Select
@@ -113,48 +107,20 @@ export function CollectionsSelect({
                 }}
                 {...props}>
 
-                {groups.flatMap((group) => (
-                    <SelectGroup label={group || "Views"}
-                        key={`group_${group}`}>
-                        {
-                            collections.filter(collection => collection.group === group)
-                                .map((collection) => {
-                                    return <SelectItem
-                                        key={`${collection.slug}-${group}`}
-                                        value={collection.slug}>
-                                        <div className="flex flex-row">
-                                            <IconForView collectionOrView={collection}/>
-                                            <Typography
-                                                variant={"subtitle2"}
-                                                className="ml-4">
-                                                {collection?.name.toUpperCase()}
-                                            </Typography>
-                                        </div>
-                                    </SelectItem>;
-                                })
-
-                        }
-                    </SelectGroup>
-                ))}
-
-                {ungroupedCollections && <SelectGroup label={"Views"}>
-                    {ungroupedCollections
-                        .map((collection) => {
-                            return <SelectItem key={collection.slug}
-                                value={collection.slug}>
-                                <div className="flex flex-row">
-                                    <IconForView collectionOrView={collection}/>
-                                    <Typography
-                                        variant={"subtitle2"}
-                                        className="ml-4">
-                                        {collection?.name.toUpperCase()}
-                                    </Typography>
-                                </div>
-                            </SelectItem>;
-                        })
-
-                    }
-                </SelectGroup>}
+                {collections.map((collection) => {
+                    return <SelectItem
+                        key={collection.slug}
+                        value={collection.slug}>
+                        <div className="flex flex-row">
+                            <IconForView collectionOrView={collection}/>
+                            <Typography
+                                variant={"subtitle2"}
+                                className="ml-4">
+                                {collection?.name.toUpperCase()}
+                            </Typography>
+                        </div>
+                    </SelectItem>;
+                })}
 
             </Select>