@rebasepro/admin 0.0.1-canary.eae7889 → 0.0.1-canary.eb08332

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

@@ -1,43 +1,75 @@
-
-import { useUnsavedChangesDialog, UnsavedChangesDialog } from "@rebasepro/core";
-import { useNavigationStateController, useCollectionRegistryController, useUrlController } from "../../_cms_internals";
 import * as React from "react";
 import { useEffect, useRef, useState } from "react";
-import { ConfirmationDialog, ErrorView, useAuthController, useCustomizationController, useSnackbarController } from "@rebasepro/core";
-import { CircularProgressCenter } from "@rebasepro/ui";
-import { ArrowLeftIcon, CheckIcon } from "lucide-react";
-import { Entity, EntityCollection, MapProperty, Properties, Property, PropertyConfig, User, getDataSourceCapabilities } from "@rebasepro/types";
-import type { PostgresCollection } from "@rebasepro/types";
-import { getSubcollections, isPropertyBuilder, removeInitialAndTrailingSlashes, getTableName } from "@rebasepro/common";
-import { Button, cls, coolIconKeys, defaultBorderMixin, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, LoadingButton, Tab, Tabs, Typography } from "@rebasepro/ui";
+import {
+    ConfirmationDialog,
+    ErrorView,
+    UnsavedChangesDialog,
+    useAuthController,
+    useCustomizationController,
+    useUnsavedChangesDialog
+} from "@rebasepro/app";
+import {
+    getInferenceType,
+    ImportSaveInProgress,
+    useCollectionRegistryController,
+    useImportConfig,
+    useNavigationStateController,
+    useUrlController
+} from "../../_cms_internals";
+import { useSafeSnackbarController } from "../../useSafeSnackbarController";
+import {
+    ArrowLeftIcon,
+    Button,
+    CheckIcon,
+    CircularProgressCenter,
+    cls,
+    coolIconKeys,
+    defaultBorderMixin,
+    Dialog,
+    DialogTitle,
+    IconButton,
+    LoadingButton,
+    Tab,
+    Tabs
+} from "@rebasepro/ui";
+import {
+    EngineProperties,
+    Entity,
+    CollectionConfig,
+    getDataSourceCapabilities,
+    MapProperty,
+    Properties,
+    Property,
+    PropertyConfig,
+    TableMetadata,
+    User
+} from "@rebasepro/types";
+import { getSubcollections, getTableName, isPropertyBuilder, removeInitialAndTrailingSlashes } from "@rebasepro/common";
 import { CollectionEditorSchema } from "./CollectionYupValidation";
 import { GeneralSettingsForm } from "./GeneralSettingsForm";
 import { DisplaySettingsForm } from "./DisplaySettingsForm";
 import { CollectionPropertiesEditorForm } from "./CollectionPropertiesEditorForm";
-import { CollectionRelationsTab } from "./CollectionRelationsTab";
 import { CollectionsConfigController } from "../../types/config_controller";
 import { CollectionEditorWelcomeView } from "./CollectionEditorWelcomeView";
 import { CollectionInference } from "../../types/collection_inference";
-import { getInferenceType, ImportSaveInProgress, useImportConfig } from "../../_cms_internals";
-import { buildEntityPropertiesFromData } from "@rebasepro/schema-inference";
+import { buildEntityPropertiesFromData } from "@rebasepro/inference";
 import { CollectionEditorImportMapping } from "./import/CollectionEditorImportMapping";
 import { CollectionEditorImportDataPreview } from "./import/CollectionEditorImportDataPreview";
 import { cleanPropertiesFromImport } from "./import/clean_import_data";
-import { Formex, FormexController, useCreateFormex } from "@rebasepro/formex";
+import { Formex, FormexController, useCreateFormex } from "@rebasepro/forms";
 import { getFullIdPath } from "./util";
 import { AICollectionGeneratorPopover } from "./AICollectionGeneratorPopover";
 import { AIModifiedPathsProvider, useAIModifiedPaths } from "./AIModifiedPathsContext";
-import { CollectionOperation, CollectionGenerationCallback } from "../../api/generateCollectionApi";
+import { CollectionGenerationCallback, CollectionOperation } from "../../api/generateCollectionApi";
 import { CollectionRLSTab } from "./CollectionRLSTab";
 import { buildCollectionFromTableMetadata } from "../../pgColumnToProperty";
-import { TableMetadata } from "@rebasepro/types";
 import { mergeDeep, randomString, removeUndefined } from "@rebasepro/utils";
+import type { CollectionEditorExtensionProps, CollectionEditorTab } from "../../extensibility_types";
 
-export interface CollectionEditorDialogProps {
+export interface CollectionEditorDialogProps extends CollectionEditorExtensionProps {
     open: boolean;
     isNewCollection: boolean;
     initialValues?: {
-        group?: string,
         slug?: string,
         name?: string,
     }
@@ -45,13 +77,12 @@ export interface CollectionEditorDialogProps {
      * A collection to duplicate from. If provided, the new collection will be
      * pre-populated with the same properties (but with empty name, path, and id).
      */
-    copyFrom?: EntityCollection;
+    copyFrom?: CollectionConfig;
     editedCollectionId?: string;
     path?: string; // full path of this particular collection, like `products/123/locales`
-    parentCollectionIds?: string[]; // path ids of the parent collection, like [`products`]
-    handleClose: (collection?: EntityCollection) => void;
+    parentCollectionSlugs?: string[], parentEntityIds?: string[]; // path ids of the parent collection, like [`products`]
+    handleClose: (collection?: CollectionConfig) => void;
     configController: CollectionsConfigController;
-    reservedGroups?: string[];
     collectionInference?: CollectionInference;
     extraView?: {
         View: React.ComponentType<{
@@ -61,7 +92,7 @@ export interface CollectionEditorDialogProps {
     };
     getUser?: (uid: string) => User | null;
     getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
-    parentCollection?: EntityCollection;
+    parentCollection?: CollectionConfig;
     existingEntities?: Entity<any>[];
     /**
      * Initial view to open when editing: "general", "display", or "properties".
@@ -127,6 +158,7 @@ export function CollectionEditorDialog(props: CollectionEditorDialogProps) {
             fullHeight={true}
             scrollable={false}
             maxWidth={"7xl"}
+            className="bg-surface-50 dark:bg-surface-800"
             onOpenChange={(open) => !open ? handleCancel() : undefined}
         >
             <DialogTitle hidden>Collection editor</DialogTitle>
@@ -150,46 +182,59 @@ type EditorView = "welcome"
     | "properties"
     | "loading"
     | "extra_view"
-    | "relations"
     | "rls";
 
 export function CollectionEditor(props: CollectionEditorDialogProps & {
     handleCancel: () => void,
     setFormDirty: (dirty: boolean) => void
 }) {
-    const { propertyConfigs } = useCustomizationController();
+    const { standalone } = props;
+
+    const customizationController = useCustomizationController();
     const navigationState = useNavigationStateController();
     const collectionRegistry = useCollectionRegistryController();
     const authController = useAuthController();
 
-    const {
-        topLevelNavigation
-    } = navigationState;
-    const {
-        collections
-    } = collectionRegistry;
+    // In standalone mode, use safe defaults instead of context values
+    const propertyConfigs = standalone
+        ? (customizationController?.propertyConfigs ?? {})
+        : customizationController.propertyConfigs;
+    const topLevelNavigation = standalone
+        ? (navigationState?.topLevelNavigation ?? [])
+        : navigationState.topLevelNavigation;
+    const collections = standalone
+        ? (collectionRegistry?.collections ?? [])
+        : collectionRegistry.collections;
 
     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[];
-    const [collection, setCollection] = React.useState<EntityCollection<any> | undefined>();
+    const [collection, setCollection] = React.useState<CollectionConfig<any> | undefined>();
     const [initialLoadingCompleted, setInitialLoadingCompleted] = React.useState(false);
 
     useEffect(() => {
         try {
-            if (collectionRegistry.initialised) {
+            const initialised = (standalone
+                ? true
+                : (collectionRegistry?.initialised ?? true)) && !props.configController?.loading;
+            const getRawCollection = standalone
+                ? (() => undefined)
+                : collectionRegistry.getRawCollection;
+            if (initialised) {
                 if (props.editedCollectionId) {
                     // 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>);
+                    const registryCol = getRawCollection ? getRawCollection(collectionPath) : undefined;
+                    const configCol = props.configController?.collections?.find(c => c.slug === props.editedCollectionId);
+                    setCollection((registryCol ?? configCol) as CollectionConfig<any>);
                 } else {
                     setCollection(undefined);
                 }
@@ -198,46 +243,51 @@ export function CollectionEditor(props: CollectionEditorDialogProps & {
         } catch (e) {
             console.error(e);
         }
-    }, [props.editedCollectionId, props.parentCollectionIds, collectionRegistry.initialised, collectionRegistry.getRawCollection]);
+    }, [props.editedCollectionId, props.parentCollectionSlugs, props.parentEntityIds, standalone, collectionRegistry.initialised, collectionRegistry.getRawCollection, props.configController.collections, props.configController.loading, collections]);
 
-    const groups = topLevelNavigation?.groups ?? [];
 
-    const initialCollection = collection
-        ? {
-            ...collection,
-            slug: collection.slug ?? randomString(16)
-        }
-        : undefined;
+    const initialIcon = React.useMemo(() => coolIconKeys[Math.floor(Math.random() * coolIconKeys.length)], []);
+    const fallbackSlug = React.useMemo(() => randomString(16), []);
+
+    const initialCollection = React.useMemo(() => {
+        return collection
+            ? {
+                ...collection,
+                slug: collection.slug ?? fallbackSlug
+            }
+            : undefined;
+    }, [collection, fallbackSlug]);
 
     // Build initial values - handle copyFrom for duplication
-    const initialValues: EntityCollection<any> = initialCollection
-        ? applyPropertyConfigs(initialCollection, propertyConfigs)
-        : copyFromProp
-            ? (() => {
-                // When duplicating, copy all properties but clear identifiers
-                const { subcollections: _sub, ...rest } = copyFromProp as unknown as Record<string, unknown>;
-                return {
-                    ...rest,
-                    name: "",
+    const initialValues = React.useMemo((): CollectionConfig<any> => {
+        return (initialCollection
+            ? applyPropertyConfigs(initialCollection, propertyConfigs)
+            : copyFromProp
+                ? (() => {
+                    // When duplicating, copy all properties but clear identifiers
+                    const { subcollections: _sub, ...rest } = copyFromProp as unknown as Record<string, unknown>;
+                    return {
+                        ...rest,
+                        name: "",
+                        ownerId: authController.user?.uid ?? ""
+                    } as CollectionConfig<any>;
+                })()
+                : {
+                    slug: initialValuesProp?.slug ?? fallbackSlug,
+                    table: initialValuesProp?.slug ?? "",
+                    name: initialValuesProp?.name ?? "",
+                    properties: {} as EngineProperties,
+                    propertiesOrder: [],
+                    icon: initialIcon,
                     ownerId: authController.user?.uid ?? ""
-                } as EntityCollection<any>;
-            })()
-            : {
-                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)],
-                ownerId: authController.user?.uid ?? ""
-            };
+                }) as CollectionConfig<any>;
+    }, [initialCollection, propertyConfigs, copyFromProp, initialValuesProp, fallbackSlug, initialIcon, authController.user?.uid]);
 
     if (!initialLoadingCompleted) {
         return <CircularProgressCenter/>;
     }
 
-    if (!props.isNewCollection && (!collectionRegistry.initialised || !initialLoadingCompleted)) {
+    if (!props.isNewCollection && (!(standalone ? true : (collectionRegistry?.initialised ?? true)) || !initialLoadingCompleted)) {
         return <CircularProgressCenter/>;
     }
 
@@ -249,7 +299,6 @@ export function CollectionEditor(props: CollectionEditorDialogProps & {
         includeTemplates={includeTemplates}
         collection={collection}
         setCollection={setCollection}
-        groups={groups}
         propertyConfigs={propertyConfigs}/>
 
 }
@@ -258,11 +307,10 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
     isNewCollection,
     configController,
     editedCollectionId,
-    parentCollectionIds,
+    parentCollectionSlugs, parentEntityIds,
     path,
     collectionInference,
     handleClose,
-    reservedGroups,
     extraView,
     handleCancel,
     setFormDirty,
@@ -276,7 +324,6 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
     setCollection,
     initialValues,
     propertyConfigs,
-    groups,
     existingEntities,
     initialView: initialViewProp,
     expandKanban,
@@ -284,25 +331,53 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
     onAnalyticsEvent,
     fullScreen,
     unmappedTables,
-    onFetchTableMetadata
+    onFetchTableMetadata,
+    propertyTypePresets,
+    hiddenPropertyTypes,
+    renderExtraPropertyFields,
+    renderExtraCollectionFields,
+    visibleTabs,
+    standalone
 }: CollectionEditorDialogProps & {
     handleCancel: () => void,
     setFormDirty: (dirty: boolean) => void,
-    initialValues: EntityCollection<M>,
+    initialValues: CollectionConfig<M>,
     existingPaths: string[],
     existingIds: string[],
     includeTemplates: boolean,
-    collection: EntityCollection<M> | undefined,
-    setCollection: (collection: EntityCollection<M>) => void,
+    collection: CollectionConfig<M> | undefined,
+    setCollection: (collection: CollectionConfig<M>) => void,
     propertyConfigs: Record<string, PropertyConfig>,
-    groups: string[],
 }
 ) {
 
-    const importConfig = useImportConfig();
-    const urlController = useUrlController();
-    const collectionRegistry = useCollectionRegistryController();
-    const snackbarController = useSnackbarController();
+    const importConfigRaw = useImportConfig();
+    const urlControllerRaw = useUrlController();
+    const collectionRegistryRaw = useCollectionRegistryController();
+    const snackbarControllerRaw = useSafeSnackbarController();
+
+    // In standalone mode, use safe defaults
+    const importConfig = standalone ? undefined : importConfigRaw;
+    const urlController = standalone
+        ? {
+            basePath: "/",
+            baseCollectionPath: "/c",
+            urlPathToDataPath: () => "",
+            homeUrl: "/",
+            isUrlCollectionPath: () => false,
+            buildUrlCollectionPath: () => "",
+            buildAppUrlPath: () => "",
+            resolveDatabasePathsFrom: (p: string) => p,
+            navigate: () => { }
+        }
+        : urlControllerRaw;
+    const collectionRegistryInternal = standalone
+        ? { convertIdsToPaths: (ids: string[]) => ids }
+        : collectionRegistryRaw;
+    const snackbarController = snackbarControllerRaw ?? {
+        open: () => { },
+        close: () => { }
+    };
 
     // Use this ref to store which properties have errors
     const propertyErrorsRef = useRef<Record<string, any>>({});
@@ -312,16 +387,22 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
         : (initialViewProp ?? "properties");
     const [currentView, setCurrentView] = useState<EditorView>(initialView); // this view can edit either the details view or the properties one
 
+    useEffect(() => {
+        if (visibleTabs && !visibleTabs.includes(currentView as CollectionEditorTab)) {
+            setCurrentView(visibleTabs[0] || "general");
+        }
+    }, [visibleTabs, currentView]);
+
     const [error, setError] = React.useState<Error | undefined>();
 
-    const saveCollection = (updatedCollection: EntityCollection<M>): Promise<boolean> => {
+    const saveCollection = (updatedCollection: CollectionConfig<M>): Promise<boolean> => {
         const id = updatedCollection.slug;
 
         return configController.saveCollection({
             id,
             collectionData: updatedCollection,
             previousId: editedCollectionId,
-            parentCollectionIds
+            parentCollectionSlugs
         })
             .then(() => {
                 setError(undefined);
@@ -340,7 +421,7 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
 
     const setNextMode = () => {
         if (currentView === "general") {
-            if (importConfig.inUse) {
+            if (importConfig?.inUse) {
                 setCurrentView("import_data_saving");
             } else if (extraView) {
                 setCurrentView("extra_view");
@@ -361,7 +442,7 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
 
     };
 
-    const doCollectionInference = collectionInference ? (collection: EntityCollection<any>) => {
+    const doCollectionInference = collectionInference ? (collection: CollectionConfig<any>) => {
         if (!collectionInference) return undefined;
         return collectionInference?.(
             collection.slug,
@@ -370,7 +451,7 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
         );
     } : undefined;
 
-    const inferCollectionFromData = async (newCollection: EntityCollection<M>) => {
+    const inferCollectionFromData = async (newCollection: CollectionConfig<M>) => {
 
         try {
             if (!doCollectionInference) {
@@ -391,7 +472,7 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
             };
 
             if (Object.keys(inferredCollection.properties ?? {}).length > 0) {
-                values.properties = inferredCollection.properties as Properties;
+                values.properties = inferredCollection.properties as EngineProperties;
                 values.propertiesOrder = inferredCollection.propertiesOrder as Extract<keyof M, string>[];
             }
 
@@ -416,7 +497,7 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
         }
     };
 
-    const onSubmit = async (newCollectionState: EntityCollection<M>, formexController: FormexController<EntityCollection<M>>) => {
+    const onSubmit = async (newCollectionState: CollectionConfig<M>, formexController: FormexController<CollectionConfig<M>>) => {
         console.debug("Submitting collection", newCollectionState);
         try {
 
@@ -425,7 +506,7 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
                 if (success) {
                     aiModifiedPaths?.clearAllPaths();
                     formexController.resetForm({ values: newCollectionState });
-                    handleClose(newCollectionState as unknown as EntityCollection);
+                    handleClose(newCollectionState as CollectionConfig);
                 }
                 return;
             }
@@ -434,7 +515,7 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
                 setNextMode();
                 formexController.resetForm({ values: newCollectionState });
             } else if (currentView === "general") {
-                if (extraView || importConfig.inUse) {
+                if (extraView || importConfig?.inUse) {
                     formexController.resetForm({ values: newCollectionState });
                     setNextMode();
                 } else if (isNewCollection) {
@@ -463,7 +544,7 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
                 if (success) {
                     formexController.resetForm({ values: initialValues });
                     setNextMode();
-                    handleClose(newCollectionState as unknown as EntityCollection);
+                    handleClose(newCollectionState as CollectionConfig);
                 }
             } else {
                 setNextMode();
@@ -479,10 +560,10 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
         }
     };
 
-    const validation = (col: EntityCollection<M>) => {
+    const validation = (col: CollectionConfig<M>) => {
 
         let errors: Record<string, string> = {};
-        const schema = (currentView === "properties" || currentView === "relations" || currentView === "general") && CollectionEditorSchema;
+        const schema = (currentView === "properties" || currentView === "general") && CollectionEditorSchema;
         if (schema) {
             const result = schema.safeParse(col);
             if (!result.success) {
@@ -514,7 +595,7 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
         return errors;
     };
 
-    const formController = useCreateFormex<EntityCollection<M>>({
+    const formController = useCreateFormex<CollectionConfig<M>>({
         initialValues,
         onSubmit,
         validation,
@@ -532,7 +613,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 ? collectionRegistryInternal.convertIdsToPaths(parentCollectionSlugs) : undefined;
 
     const updatedFullPath = parentPaths && parentPaths.length > 0
         ? [...parentPaths, usedPath].join("/fake_id/")
@@ -553,18 +634,18 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
     }, [dirty]);
 
     function onImportDataSet(data: object[], propertiesOrder?: string[]) {
-        importConfig.setInUse(true);
+        importConfig?.setInUse(true);
         buildEntityPropertiesFromData(data, getInferenceType)
-            .then((properties: Record<string, unknown>) => {
-                const res = cleanPropertiesFromImport(properties as unknown as Properties);
+            .then((properties: unknown) => {
+                const res = cleanPropertiesFromImport(properties as Properties);
 
-                importConfig.setIdColumn(res.idColumn);
-                importConfig.setImportData(data);
-                importConfig.setHeadersMapping(res.headersMapping);
+                importConfig?.setIdColumn(res.idColumn);
+                importConfig?.setImportData(data);
+                importConfig?.setHeadersMapping(res.headersMapping);
                 const filteredHeadingsOrder = ((propertiesOrder ?? [])
                     .filter((key) => res.headersMapping[key]) as string[]) ?? Object.keys(res.properties);
-                importConfig.setHeadingsOrder(filteredHeadingsOrder);
-                importConfig.setOriginProperties(res.properties);
+                importConfig?.setHeadingsOrder(filteredHeadingsOrder);
+                importConfig?.setOriginProperties(res.properties);
 
                 const mappedHeadings = (propertiesOrder ?? []).map((key) => res.headersMapping[key]).filter(Boolean) as string[] ?? Object.keys(res.properties);
                 setFieldValue("properties", res.properties);
@@ -576,7 +657,7 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
 
     const onImportMappingComplete = () => {
         const updatedProperties = { ...values.properties };
-        if (importConfig.idColumn)
+        if (importConfig?.idColumn)
             delete updatedProperties[importConfig.idColumn];
         setFieldValue("properties", updatedProperties);
         // setFieldValue("propertiesOrder", Object.values(importConfig.headersMapping));
@@ -608,36 +689,33 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
 
     const aiModifiedPaths = useAIModifiedPaths();
 
-    const handleAIGenerated = (generatedCollection: EntityCollection, operations?: CollectionOperation[]) => {
-        formController.setValues(generatedCollection as EntityCollection<M>);
+    const handleAIGenerated = (generatedCollection: CollectionConfig, operations?: CollectionOperation[]) => {
+        formController.setValues(generatedCollection as CollectionConfig<M>);
         if (operations && aiModifiedPaths) {
             aiModifiedPaths.addModifiedPaths(operations);
         }
     };
 
-    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-surface-50 dark:bg-surface-800">
         <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-900 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"
                             onValueChange={(v) => setCurrentView(v as EditorView)}>
-                            <Tab value={"general"}>
+                            {(!visibleTabs || visibleTabs.includes("general")) && <Tab value={"general"}>
                                 General
-                            </Tab>
-                            <Tab value={"display"}>
+                            </Tab>}
+                            {(!visibleTabs || visibleTabs.includes("display")) && <Tab value={"display"}>
                                 Display
-                            </Tab>
-                            <Tab value={"properties"}>
+                            </Tab>}
+                            {(!visibleTabs || visibleTabs.includes("properties")) && <Tab value={"properties"}>
                                 Properties
-                            </Tab>
-                            {getDataSourceCapabilities(values.driver).supportsRLS && <Tab value={"rls"}>
-                                RLS
                             </Tab>}
-                            {getDataSourceCapabilities(values.driver).supportsRelations && <Tab value={"relations"}>
-                                Relations
+                            {(!visibleTabs || visibleTabs.includes("rls")) && getDataSourceCapabilities(values.engine).supportsRLS && <Tab value={"rls"}>
+                                RLS
                             </Tab>}
                         </Tabs>
                     </div>
@@ -671,7 +749,7 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
                     onSubmit={formController.handleSubmit}
                     className="flex-grow flex flex-col min-h-0 relative">
 
-                    <div className="flex-grow flex flex-col min-h-0 overflow-y-auto no-scrollbar relative w-full h-full">
+                    <div className="flex-grow flex flex-col min-h-0 relative w-full h-full bg-surface-50 dark:bg-surface-800">
 
                         {currentView === "loading" &&
                             <CircularProgressCenter/>}
@@ -698,7 +776,7 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
                                         formController.setValues({
                                             ...formController.values,
                                             ...collectionData
-                                        } as EntityCollection<M>);
+                                        } as CollectionConfig<M>);
                                         onWelcomeScreenContinue();
                                     } catch (e: unknown) {
                                         console.error("Error importing table:", e);
@@ -734,21 +812,19 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
 
                         {currentView === "general" &&
                             <GeneralSettingsForm
+                                isNewCollection={isNewCollection}
                                 existingPaths={existingPaths}
                                 existingIds={existingIds}
                                 parentCollection={parentCollection}
-                                isNewCollection={isNewCollection}/>
+                                renderExtraCollectionFields={renderExtraCollectionFields}
+                                standalone={standalone}/>
                         }
 
                         {currentView === "display" &&
-                            <DisplaySettingsForm expandKanban={expandKanban}/>
-                        }
-
-                        {currentView === "relations" && getDataSourceCapabilities(values.driver).supportsRelations &&
-                            <CollectionRelationsTab/>
+                            <DisplaySettingsForm expandKanban={expandKanban} standalone={standalone}/>
                         }
 
-                        {currentView === "rls" && getDataSourceCapabilities(values.driver).supportsRLS &&
+                        {currentView === "rls" && getDataSourceCapabilities(values.engine).supportsRLS &&
                             <CollectionRLSTab/>
                         }
 
@@ -756,7 +832,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,
@@ -769,25 +844,28 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
                                 getData={getDataWithPath}
                                 doCollectionInference={doCollectionInference}
                                 propertyConfigs={propertyConfigs}
-
+                                propertyTypePresets={propertyTypePresets}
+                                hiddenPropertyTypes={hiddenPropertyTypes}
+                                renderExtraPropertyFields={renderExtraPropertyFields}
                                 extraIcon={extraView?.icon &&
                                     <IconButton
                                         color={"primary"}
                                         onClick={() => setCurrentView("extra_view")}>
                                         {extraView.icon}
-                                    </IconButton>}/>
+                                    </IconButton>}
+                                standalone={standalone}/>
                         }
 
                     </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-surface-50 dark:bg-surface-900">
                             {error && <ErrorView error={error}/>}
 
                             {isNewCollection && includeTemplates && currentView === "import_data_mapping" &&
                                 <Button variant={"text"}
                                     type="button"
                                     onClick={() => {
-                                        importConfig.setInUse(false);
+                                        importConfig?.setInUse(false);
                                         return setCurrentView("welcome");
                                     }}>
                                     Back
@@ -858,7 +936,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}
@@ -897,7 +975,7 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
 
 }
 
-function applyPropertyConfigs<M extends Record<string, unknown> = Record<string, unknown>>(collection: EntityCollection<M>, propertyConfigs: Record<string, PropertyConfig>): EntityCollection<M> {
+function applyPropertyConfigs<M extends Record<string, unknown> = Record<string, unknown>>(collection: CollectionConfig<M>, propertyConfigs: Record<string, PropertyConfig>): CollectionConfig<M> {
     const {
         properties,
         ...rest
@@ -913,8 +991,8 @@ function applyPropertyConfigs<M extends Record<string, unknown> = Record<string,
 
     return {
         ...rest,
-        properties: propertiesResult
-    };
+        properties: propertiesResult as EngineProperties
+    } as CollectionConfig<M>;
 }
 
 function applyPropertiesConfig(property: Property, propertyConfigs: Record<string, PropertyConfig>) {
@@ -922,7 +1000,7 @@ function applyPropertiesConfig(property: Property, propertyConfigs: Record<strin
     if (propertyConfigs && internalProperty && typeof internalProperty === "object" && internalProperty.propertyConfig) {
         const propertyConfig = propertyConfigs[internalProperty.propertyConfig];
         if (propertyConfig && isPropertyBuilder(propertyConfig.property as Property)) {
-            internalProperty = propertyConfig.property as unknown as Property;
+            internalProperty = propertyConfig.property as Property;
         } else {
 
             if (propertyConfig) {