@rebasepro/admin 0.6.0 → 0.7.0

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

@@ -3,9 +3,9 @@ import React, { useEffect, useMemo, useState } from "react";
 
 import { Field, getIn, useFormex } from "@rebasepro/formex";
 import {
-    useLargeLayout,
-    useSnackbarController
+    useLargeLayout
 } from "@rebasepro/core";
+import { useSafeSnackbarController } from "../../useSafeSnackbarController";
 import { ErrorBoundary } from "@rebasepro/ui";
 import {
     Button,
@@ -16,6 +16,7 @@ import {
     defaultBorderMixin,
     FileSearchIcon,
     IconButton,
+    iconSize,
     PlusIcon,
     Tooltip,
     Typography
@@ -29,6 +30,8 @@ import { PropertyTree } from "./PropertyTree";
 import { GetCodeDialog } from "./GetCodeDialog";
 import { useAIModifiedPaths } from "./AIModifiedPathsContext";
 import { useCollectionsConfigController } from "../../useCollectionsConfigController";
+import type { PropertyTypePreset, PropertyType } from "../../extensibility_types";
+import type { SerializableProperty, SerializableCollection } from "../../serializable_types";
 
 type PropertyOrBuilder = Property | Record<string, unknown>;
 
@@ -43,7 +46,15 @@ type CollectionEditorFormProps = {
     getData?: () => Promise<object[]>;
     doCollectionInference?: (collection: EntityCollection) => Promise<Partial<EntityCollection> | null> | undefined;
     propertyConfigs: Record<string, PropertyConfig>;
-
+    propertyTypePresets?: PropertyTypePreset[];
+    hiddenPropertyTypes?: PropertyType[];
+    renderExtraPropertyFields?: (params: {
+        metadata: Record<string, unknown>;
+        onMetadataChange: (key: string, value: unknown) => void;
+        property: SerializableProperty;
+        collection: SerializableCollection;
+    }) => React.ReactNode;
+    standalone?: boolean;
 };
 
 export function CollectionPropertiesEditorForm({
@@ -56,7 +67,11 @@ export function CollectionPropertiesEditorForm({
     getUser,
     getData,
     doCollectionInference,
-    propertyConfigs
+    propertyConfigs,
+    propertyTypePresets,
+    hiddenPropertyTypes,
+    renderExtraPropertyFields,
+    standalone,
 
 }: CollectionEditorFormProps) {
 
@@ -69,11 +84,12 @@ export function CollectionPropertiesEditorForm({
         dirty
     } = useFormex<EntityCollection>();
 
-    const snackbarController = useSnackbarController();
-    const configController = useCollectionsConfigController();
+    const snackbarController = useSafeSnackbarController();
+    const configControllerFromContext = useCollectionsConfigController();
+    const configController = standalone ? { readOnly: false } : configControllerFromContext;
 
     const largeLayout = useLargeLayout();
-    const asDialog = !largeLayout
+    const asDialog = standalone ? false : !largeLayout
 
     // index of the selected property within the namespace
     const [selectedPropertyIndex, setSelectedPropertyIndex] = useState<number | undefined>();
@@ -115,7 +131,7 @@ export function CollectionPropertiesEditorForm({
             promise.then((newCollection) => {
 
                     if (!newCollection) {
-                        snackbarController.open({
+                        snackbarController?.open?.({
                             type: "error",
                             message: "Could not infer properties from data"
                         });
@@ -222,7 +238,7 @@ export function CollectionPropertiesEditorForm({
 
                     // Check if there are any changes (new properties or modified nested properties)
                     if (allNewPropertyKeys.length === 0) {
-                        snackbarController.open({
+                        snackbarController?.open?.({
                             type: "info",
                             message: "No new properties found in existing data"
                         });
@@ -241,7 +257,7 @@ export function CollectionPropertiesEditorForm({
                     updatePropertiesOrder(updatedPropertiesOrder);
                     setInferredPropertyKeys(allNewPropertyKeys);
 
-                    snackbarController.open({
+                    snackbarController?.open?.({
                         type: "success",
                         message: `Added ${allNewPropertyKeys.length} new ${allNewPropertyKeys.length === 1 ? "property" : "properties"}`
                     });
@@ -404,98 +420,87 @@ export function CollectionPropertiesEditorForm({
     };
 
     const body = (
-        <div className={"grid grid-cols-12 gap-2 h-full bg-white dark:bg-surface-950"}>
+        <div className={"grid grid-cols-12 h-full bg-surface-50 dark:bg-surface-800"}>
             <div className={cls(
-                "bg-surface-50 dark:bg-surface-900",
-                "p-4 md:p-8",
-                "col-span-12 lg:col-span-5 h-full overflow-auto",
+                "col-span-12 lg:col-span-5 h-full flex flex-col bg-surface-50 dark:bg-surface-800",
                 !asDialog && "border-r " + defaultBorderMixin
             )}>
-
-                <div className="flex my-2">
-
-                    <div className="grow mb-4">
-
+                {/* Sidebar Header */}
+                <div className={cls("flex items-center justify-between px-3 py-2 border-b bg-surface-50 dark:bg-surface-900 min-h-[48px] shrink-0", defaultBorderMixin)}>
+                    <div className="flex-grow min-w-0 pr-2">
                         <Field
                             name={"name"}
                             as={DebouncedTextField}
                             invisible={true}
                             className="-ml-1"
-                            inputClassName="text-2xl font-headers"
+                            inputClassName="text-sm font-semibold truncate bg-transparent border-0 outline-none focus:ring-0"
                             placeholder={"Collection name"}
                             size={"small"}
                             required
                             error={Boolean(errors?.name)}/>
-
-                        {owner &&
-                            <Typography variant={"body2"}
-                                className={"ml-2"}
-                                color={"secondary"}>
-                                Created by {owner.displayName}
-                            </Typography>}
                     </div>
 
-                    {extraIcon && <div className="ml-4">
-                        {extraIcon}
-                    </div>}
+                    {extraIcon && <div className="flex-shrink-0">{extraIcon}</div>}
 
-                    <div className="ml-4 flex flex-row gap-2 items-center flex-shrink-0">
-                        {/* <Tooltip title={"Get the code for this collection"}
-                            asChild={true}>
-                            <IconButton
-                                variant={"filled"}
-                                disabled={inferringProperties}
-                                onClick={() => setCodeDialogOpen(true)}>
-                                <CodeIcon />
-                            </IconButton>
-                        </Tooltip> */}
-                        {inferPropertiesFromData && <Tooltip title={"Add new properties based on data"}
-                            asChild={true}>
+                    <div className="flex items-center gap-1.5 flex-shrink-0 ml-2">
+                        {inferPropertiesFromData && (
+                            <Tooltip title={"Add new properties based on data"} asChild={true}>
+                                <IconButton
+                                    size="small"
+                                    disabled={inferringProperties}
+                                    onClick={inferPropertiesFromData}
+                                >
+                                    {inferringProperties ? <CircularProgress size={"smallest"}/> : <FileSearchIcon size={iconSize.smallest}/>}
+                                </IconButton>
+                            </Tooltip>
+                        )}
+                        <Tooltip title={"Add new property"} asChild={true}>
                             <IconButton
-                                variant={"filled"}
-                                disabled={inferringProperties}
-                                onClick={inferPropertiesFromData}>
-                                {inferringProperties ? <CircularProgress size={"small"}/> : <FileSearchIcon/>}
-                            </IconButton>
-                        </Tooltip>}
-                        <Tooltip title={"Add new property"}
-                            asChild={true}>
-                            <Button
+                                size="small"
                                 disabled={configController?.readOnly}
-                                onClick={() => setNewPropertyDialogOpen(true)}>
-                                <PlusIcon/>
-                            </Button>
+                                onClick={() => setNewPropertyDialogOpen(true)}
+                            >
+                                <PlusIcon size={iconSize.smallest}/>
+                            </IconButton>
                         </Tooltip>
                     </div>
                 </div>
 
-                <ErrorBoundary>
-                    <PropertyTree
-                        className={"mt-2"}
-                        inferredPropertyKeys={inferredPropertyKeys}
-                        selectedPropertyKey={selectedPropertyKey ? getFullId(selectedPropertyKey, selectedPropertyNamespace) : undefined}
-                        properties={values.properties}
-                        additionalFields={values.additionalFields}
-                        propertiesOrder={usedPropertiesOrder}
-                        onPropertyClick={onPropertyClick}
-                        onPropertyMove={onPropertyMove}
-                        onPropertyRemove={(isNewCollection || (inferredPropertyKeys && inferredPropertyKeys.length > 0)) && !configController?.readOnly ? deleteProperty : undefined}
-
-                        errors={errors}/>
-                </ErrorBoundary>
-
-                <Button className={"mt-4 xl:mt-8 w-full"}
-                    variant="filled"
-                    color="neutral"
-                    disabled={configController?.readOnly}
-                    onClick={() => setNewPropertyDialogOpen(true)}
-                    startIcon={<PlusIcon/>}>
-                    Add new property
-                </Button>
+                {/* Sidebar Content */}
+                <div className="flex-grow overflow-y-auto p-3 no-scrollbar space-y-3 bg-surface-50 dark:bg-surface-800">
+                    {owner && (
+                        <div className="px-1 py-0.5">
+                            <Typography variant="body2" color="secondary">
+                                Created by {owner.displayName}
+                            </Typography>
+                        </div>
+                    )}
+                    <ErrorBoundary>
+                        <PropertyTree
+                            inferredPropertyKeys={inferredPropertyKeys}
+                            selectedPropertyKey={selectedPropertyKey ? getFullId(selectedPropertyKey, selectedPropertyNamespace) : undefined}
+                            properties={values.properties}
+                            additionalFields={values.additionalFields}
+                            propertiesOrder={usedPropertiesOrder}
+                            onPropertyClick={onPropertyClick}
+                            onPropertyMove={onPropertyMove}
+                            onPropertyRemove={(isNewCollection || (inferredPropertyKeys && inferredPropertyKeys.length > 0)) && !configController?.readOnly ? deleteProperty : undefined}
+                            errors={errors}/>
+                    </ErrorBoundary>
+
+                    <Button className={"w-full"}
+                        variant="outlined"
+                        color="neutral"
+                        disabled={configController?.readOnly}
+                        onClick={() => setNewPropertyDialogOpen(true)}
+                        startIcon={<PlusIcon/>}>
+                        Add new property
+                    </Button>
+                </div>
             </div>
 
             {!asDialog &&
-                <div className={"col-span-12 lg:col-span-7 p-4 md:py-8 md:px-4 h-full overflow-auto"}>
+                <div className={"col-span-12 lg:col-span-7 p-4 md:py-8 md:px-4 h-full overflow-auto bg-surface-50 dark:bg-surface-800"}>
                     <div
                         className="sticky top-8 min-h-full w-full flex flex-col justify-center">
 
@@ -519,6 +524,10 @@ export function CollectionPropertiesEditorForm({
                                 initialErrors={initialErrors}
                                 getData={getData}
                                 propertyConfigs={propertyConfigs}
+                                propertyTypePresets={propertyTypePresets}
+                                hiddenPropertyTypes={hiddenPropertyTypes}
+                                renderExtraPropertyFields={renderExtraPropertyFields}
+                                collectionValues={values}
 
                             />}
 
@@ -563,6 +572,10 @@ export function CollectionPropertiesEditorForm({
                 initialErrors={initialErrors}
                 getData={getData}
                 propertyConfigs={propertyConfigs}
+                propertyTypePresets={propertyTypePresets}
+                hiddenPropertyTypes={hiddenPropertyTypes}
+                renderExtraPropertyFields={renderExtraPropertyFields}
+                collectionValues={values}
 
                 onCancel={closePropertyDialog}
                 onOkClicked={asDialog
@@ -589,6 +602,10 @@ export function CollectionPropertiesEditorForm({
             getData={getData}
             allowDataInference={!isNewCollection}
             propertyConfigs={propertyConfigs}
+            propertyTypePresets={propertyTypePresets}
+            hiddenPropertyTypes={hiddenPropertyTypes}
+            renderExtraPropertyFields={renderExtraPropertyFields}
+            collectionValues={values}
             existingPropertyKeys={values.propertiesOrder as string[]}/>
 
         <ErrorBoundary>

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

@@ -1,23 +1,31 @@
 
 import { useUnsavedChangesDialog, UnsavedChangesDialog } from "@rebasepro/core";
-import { useUrlController } from "../../_cms_internals";
 import * as React from "react";
-import { useState, useMemo, useEffect } from "react";
+import { useState } from "react";
 import { Button, PlusIcon, Typography } from "@rebasepro/ui";
-import { useSnackbarController } from "@rebasepro/core";
 import { CollectionEditorDialogProps } from "./CollectionEditorDialog";
 import { AIModifiedPathsProvider } from "./AIModifiedPathsContext";
 import { CollectionEditor } from "./CollectionEditorDialog";
-import { useNavigate } from "react-router-dom";
+import type { EntityCollection } from "@rebasepro/types";
 
 export type CollectionStudioViewProps = Omit<CollectionEditorDialogProps, "open" | "isNewCollection" | "editedCollectionId" | "handleClose" | "handleCancel"> & {
     collectionId?: string | "new";
+
+    /**
+     * Called after a successful save.
+     * Receives the saved collection (or undefined if dismissed without saving).
+     * When not provided, save completes silently.
+     */
+    onSave?: (collection?: EntityCollection) => void;
+
+    /**
+     * Called when the user cancels editing.
+     * When not provided, cancel is a no-op.
+     */
+    onCancel?: () => void;
 };
 
-export function CollectionStudioView({ collectionId, ...props }: CollectionStudioViewProps) {
-    const snackbarController = useSnackbarController();
-    const navigate = useNavigate();
-    const urlController = useUrlController();
+export function CollectionStudioView({ collectionId, onSave, onCancel, ...props }: CollectionStudioViewProps) {
 
     // Form state from the editor
     const [formDirty, setFormDirty] = useState<boolean>(false);
@@ -28,12 +36,11 @@ export function CollectionStudioView({ collectionId, ...props }: CollectionStudi
         () => setFormDirty(false)
     );
 
-    // Map collectionId from URL params if missing? We can pass it directly.
     const activeCollectionId = collectionId;
 
     const handleCancelClick = () => {
         if (!formDirty) {
-            navigate(urlController.buildAppUrlPath("/"));
+            onCancel?.();
         } else {
             setCancelRequested(true);
             triggerDialog();
@@ -41,7 +48,7 @@ export function CollectionStudioView({ collectionId, ...props }: CollectionStudi
     };
 
     return (
-        <div className="flex-grow flex flex-col h-full w-full bg-white dark:bg-surface-950">
+        <div className="flex-grow flex flex-col h-full w-full bg-surface-50 dark:bg-surface-800">
             <AIModifiedPathsProvider>
                 {activeCollectionId ? (
                     <CollectionEditor
@@ -55,13 +62,9 @@ export function CollectionStudioView({ collectionId, ...props }: CollectionStudi
                         handleClose={(savedCollection) => {
                             setFormDirty(false);
                             if (savedCollection) {
-                                snackbarController.open({
-                                    type: "success",
-                                    message: `Collection ${savedCollection.name || savedCollection.slug} saved`
-                                });
-                                if (activeCollectionId === "new") {
-                                    navigate(urlController.buildAppUrlPath(`s/schema/${savedCollection.slug}`));
-                                }
+                                setTimeout(() => {
+                                    onSave?.(savedCollection);
+                                }, 0);
                             }
                         }}
                         setFormDirty={setFormDirty}
@@ -73,7 +76,7 @@ export function CollectionStudioView({ collectionId, ...props }: CollectionStudi
                         </Typography>
                         <Button
                             disabled={props.configController?.readOnly}
-                            onClick={() => navigate(urlController.buildAppUrlPath("schema/new"))}
+                            onClick={() => onSave?.()}
                         >
                             <PlusIcon/>
                             Add new collection
@@ -86,7 +89,7 @@ export function CollectionStudioView({ collectionId, ...props }: CollectionStudi
                     handleOk={() => {
                         dialogProps.handleOk();
                         if (cancelRequested) {
-                            navigate(urlController.buildAppUrlPath("/"));
+                            onCancel?.();
                             setCancelRequested(false);
                         }
                     }}

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

@@ -1,9 +1,6 @@
 
 import { IconForView } from "@rebasepro/core";
-;
-import { useUrlController } from "../../_cms_internals";
 import React, { useState, useEffect } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
 import {
     Button,
     cls,
@@ -15,26 +12,70 @@ import {
     Tooltip,
     Typography
 } from "@rebasepro/ui";
-;
+import type { EntityCollection } from "@rebasepro/types";
 import { CollectionsConfigController } from "../../types/config_controller";
 import { CollectionStudioView } from "./CollectionStudioView";
+import type { CollectionEditorExtensionProps } from "../../extensibility_types";
 
-export interface CollectionsStudioViewProps {
+export interface CollectionsStudioViewProps extends CollectionEditorExtensionProps {
     configController: CollectionsConfigController;
+
+    /**
+     * Collections to show in the sidebar.
+     * When provided, overrides the collections from `configController`.
+     * Use this to control exactly which collections the editor displays.
+     */
+    collections?: EntityCollection[];
+
+    /**
+     * Controlled active collection ID.
+     * When provided together with `onActiveCollectionChange`,
+     * navigation is fully external — no internal state is used.
+     */
+    activeCollectionId?: string;
+
+    /**
+     * Called when the user clicks a collection, "new", or navigates.
+     * When provided, the component is fully controlled (no internal state).
+     * When not provided, the component manages selection via internal state.
+     *
+     * Pass `"new"` to create a new collection. Pass `undefined` to deselect.
+     */
+    onActiveCollectionChange?: (collectionId: string | undefined) => void;
 }
 
-export function CollectionsStudioView({ configController }: CollectionsStudioViewProps) {
-    const navigate = useNavigate();
-    const urlController = useUrlController();
-    const location = useLocation();
+export function CollectionsStudioView({
+    configController,
+    collections: collectionsProp,
+    activeCollectionId: controlledActiveId,
+    onActiveCollectionChange,
+    propertyTypePresets,
+    hiddenPropertyTypes,
+    renderExtraPropertyFields,
+    renderExtraCollectionFields,
+    visibleTabs,
+    standalone,
+}: CollectionsStudioViewProps) {
 
-    // Determine the active collection from the URL segment after "schema/"
-    const basePath = urlController.buildAppUrlPath("schema");
-    const relativePath = location.pathname.replace(basePath, "").replace(/^\//, "");
+    // ── Navigation state ────────────────────────────────────────────────
+    // If onActiveCollectionChange is provided, the component is controlled.
+    // Otherwise, use internal state.
+    const [internalActiveId, setInternalActiveId] = useState<string | undefined>(undefined);
+    const isControlled = onActiveCollectionChange !== undefined;
+    const activeCollectionId = isControlled ? controlledActiveId : internalActiveId;
 
-    // The collectionId could be "new", empty (no selection), or a collection slug
-    const activeCollectionId = relativePath.split("/")[0] || undefined;
+    const setActiveCollectionId = (id: string | undefined) => {
+        if (isControlled) {
+            onActiveCollectionChange?.(id);
+        } else {
+            setInternalActiveId(id);
+        }
+    };
+
+    // ── Collections list ────────────────────────────────────────────────
+    const collections = collectionsProp ?? configController.collections ?? [];
 
+    // ── Sidebar sizing ──────────────────────────────────────────────────
     const [sidebarSize, setSidebarSize] = useState(() => {
         try {
             const saved = localStorage.getItem("rebase_collections_editor_sidebar_size");
@@ -52,19 +93,17 @@ export function CollectionsStudioView({ configController }: CollectionsStudioVie
         }
     }, [sidebarSize]);
 
-    const collections = configController.collections || [];
-
     return (
-        <div className="flex h-full w-full bg-white dark:bg-surface-950 overflow-hidden text-text-primary dark:text-text-primary-dark">
+        <div className="flex h-full w-full bg-surface-50 dark:bg-surface-800 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-950 border-r", defaultBorderMixin)}>
+                    <div className={cls("flex flex-col h-full w-full bg-surface-50 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-900 min-h-[48px]", defaultBorderMixin)}>
-                            <Typography variant="caption" className="font-bold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark">
+                            <Typography variant="caption" className="font-semibold text-[11px] uppercase tracking-wider text-surface-400 dark:text-surface-400">
                                 Collections
                             </Typography>
                             <Tooltip title={configController.readOnly ? configController.readOnlyReason || "Read only" : "Add collection"}>
@@ -72,7 +111,7 @@ export function CollectionsStudioView({ configController }: CollectionsStudioVie
                                     <IconButton
                                         size="small"
                                         disabled={configController.readOnly}
-                                        onClick={() => navigate(urlController.buildAppUrlPath("schema/new"))}
+                                        onClick={() => setActiveCollectionId("new")}
                                         className={activeCollectionId === "new" ? "text-primary dark:text-primary-dark" : "text-text-secondary dark:text-text-secondary-dark"}
                                     >
                                         <PlusIcon size={iconSize.smallest}/>
@@ -95,18 +134,18 @@ export function CollectionsStudioView({ configController }: CollectionsStudioVie
                                 return (
                                     <div
                                         key={collectionKey}
-                                        onClick={() => navigate(urlController.buildAppUrlPath(`schema/${collectionKey}`))}
+                                        onClick={() => setActiveCollectionId(collectionKey)}
                                         className={cls(
-                                            "flex items-center gap-3 px-3 py-2 cursor-pointer rounded-md text-sm transition-colors",
+                                            "flex items-center gap-2.5 px-3 h-[30px] cursor-pointer rounded-lg text-[13px] font-medium transition-colors",
                                             isSelected
-                                                ? "bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-light"
-                                                : "hover:bg-surface-100 dark:hover:bg-surface-900 text-text-secondary dark:text-text-secondary-dark"
+                                                ? "bg-primary/8 text-primary dark:bg-primary/10 dark:text-primary-light font-semibold"
+                                                : "hover:bg-primary/5 dark:hover:bg-primary/5 text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-white"
                                         )}
                                     >
-                                        <IconForView collectionOrView={collection} size={"small"} className={cls(
+                                        <IconForView collectionOrView={collection} size={"smallest"} className={cls(
                                             isSelected
                                                 ? "text-primary dark:text-primary-light"
-                                                : "text-text-secondary dark:text-text-secondary-dark"
+                                                : "text-surface-500 dark:text-text-secondary-dark"
                                         )}/>
                                         <span className="truncate flex-1">
                                             {collection.name || collection.slug}
@@ -125,6 +164,19 @@ export function CollectionsStudioView({ configController }: CollectionsStudioVie
                                 key={activeCollectionId}
                                 configController={configController}
                                 collectionId={activeCollectionId}
+                                onSave={(savedCollection) => {
+                                    // After creating a new collection, switch to it
+                                    if (activeCollectionId === "new" && savedCollection?.slug) {
+                                        setActiveCollectionId(savedCollection.slug);
+                                    }
+                                }}
+                                onCancel={() => setActiveCollectionId(undefined)}
+                                propertyTypePresets={propertyTypePresets}
+                                hiddenPropertyTypes={hiddenPropertyTypes}
+                                renderExtraPropertyFields={renderExtraPropertyFields}
+                                renderExtraCollectionFields={renderExtraCollectionFields}
+                                visibleTabs={visibleTabs}
+                                standalone={standalone}
                             />
                         ) : (
                             <div className="flex flex-col items-center justify-center h-full gap-4">
@@ -133,7 +185,7 @@ export function CollectionsStudioView({ configController }: CollectionsStudioVie
                                 </Typography>
                                 <Button
                                     disabled={configController.readOnly}
-                                    onClick={() => navigate(urlController.buildAppUrlPath("schema/new"))}
+                                    onClick={() => setActiveCollectionId("new")}
                                 >
                                     <PlusIcon/>
                                     Add new collection

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

@@ -1,7 +1,7 @@
 
 import { FieldCaption } from "../../_cms_internals";
 import React, { useMemo, useState } from "react";
-import { useAuthController, useCustomizationController } from "@rebasepro/core";
+import { useCustomizationController } from "@rebasepro/core";
 import { getFieldConfig } from "../../../components/field_configs";
 import { PropertyConfigBadge } from "../../../components/PropertyConfigBadge";
 import { EntityCollection, Property } from "@rebasepro/types";
@@ -27,9 +27,11 @@ import { useCollectionsConfigController } from "../../useCollectionsConfigContro
 import { unslugify } from "@rebasepro/utils";
 
 export function DisplaySettingsForm({
-    expandKanban
+    expandKanban,
+    standalone,
 }: {
     expandKanban?: boolean;
+    standalone?: boolean;
 }) {
 
     const {
@@ -41,9 +43,9 @@ export function DisplaySettingsForm({
 
     const [orderPropertyDialogOpen, setOrderPropertyDialogOpen] = useState(false);
 
-    const authController = useAuthController();
     const customizationController = useCustomizationController();
-    const configController = useCollectionsConfigController();
+    const configControllerFromContext = useCollectionsConfigController();
+    const configController = standalone ? { readOnly: false } : configControllerFromContext;
 
     // Get text properties (for orderProperty - uses string fractional indexing keys)
     const textProperties = useMemo(() => {
@@ -118,7 +120,7 @@ export function DisplaySettingsForm({
                                                 }
                                                 const prop = textProperties.find(p => p.key === value);
                                                 if (!prop) return "Select a property";
-                                                const fieldConfig = getFieldConfig(prop.property, customizationController.propertyConfigs);
+                                                const fieldConfig = getFieldConfig(prop.property, customizationController?.propertyConfigs ?? {});
                                                 return (
                                                     <div className="flex items-center gap-2">
                                                         <PropertyConfigBadge propertyConfig={fieldConfig}/>
@@ -139,7 +141,7 @@ export function DisplaySettingsForm({
                                             ) : undefined}
                                         >
                                             {textProperties.map((prop) => {
-                                                const fieldConfig = getFieldConfig(prop.property, customizationController.propertyConfigs);
+                                                const fieldConfig = getFieldConfig(prop.property, customizationController?.propertyConfigs ?? {});
                                                 return (
                                                     <SelectItem key={prop.key} value={prop.key}>
                                                         <div className="flex items-center gap-3">
@@ -205,7 +207,7 @@ hideFromCollection: true }
                                             autoUpdateId={false}
                                             inArray={false}
                                             allowDataInference={false}
-                                            propertyConfigs={customizationController.propertyConfigs}
+                                            propertyConfigs={customizationController?.propertyConfigs ?? {}}
 
                                             existingPropertyKeys={Object.keys(values.properties ?? {})}
                                             onPropertyChanged={({ id, property }) => {