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

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

@@ -1,10 +1,44 @@
 
-import { EntityCollection } from "@rebasepro/types";
+import { CollectionConfig } from "@rebasepro/types";
 import React, { useState, useEffect } from "react";
-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";
-import { useRebaseContext } from "@rebasepro/core";
+
+/**
+ * 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,
+    Chip,
+    CircularProgress,
+    cls,
+    Container,
+    defaultBorderMixin,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    iconSize,
+    KeyIcon,
+    MultiSelect,
+    MultiSelectItem,
+    Paper,
+    Select,
+    SelectItem,
+    TextField,
+    Tooltip,
+    Trash2Icon,
+    Typography
+} from "@rebasepro/ui";
+import { useFormex } from "@rebasepro/forms";
+import { useRebaseContext } from "@rebasepro/app";
 
 /** Postgres RLS policy shape — defined inline to avoid depending on @rebasepro/studio */
 export interface PostgresPolicy {
@@ -27,7 +61,7 @@ interface SecurityRule {
     roles?: string[];
 }
 
-type CollectionWithSecurity = EntityCollection & {
+type CollectionWithSecurity = CollectionConfig & {
     securityRules?: SecurityRule[];
     id?: string;
     table?: string;
@@ -51,10 +85,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>[] => {
@@ -65,7 +102,7 @@ export function CollectionRLSTab() {
                     return [];
                 };
                 const pRows = extractRows(result);
-                const policies: PostgresPolicy[] = pRows.map((p: any) => {
+                const policies: PostgresPolicy[] = pRows.map((p: Record<string, unknown>) => {
                     let parsedRoles: string[] = [];
                     const r = p.roles || p.ROLES;
                     if (Array.isArray(r)) {
@@ -276,11 +313,11 @@ function InlinePolicyEditor({
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                         <div className="flex flex-col gap-1.5">
                             <Typography variant="caption" className="uppercase tracking-wider text-text-secondary">Policy Name</Typography>
-                            <TextField value={name} onChange={(e: any) => setName(e.target.value)} placeholder="e.g. allow_read_all"/>
+                            <TextField value={name} onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => setName(e.target.value)} placeholder="e.g. allow_read_all"/>
                         </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>
@@ -305,13 +342,13 @@ function InlinePolicyEditor({
                     {command !== "INSERT" && (
                         <div className="flex flex-col gap-1.5">
                             <Typography variant="caption" className="uppercase tracking-wider text-text-secondary">USING expression</Typography>
-                            <TextField value={usingExpr} onChange={(e: any) => setUsingExpr(e.target.value)} placeholder="e.g. auth.uid() = user_id"/>
+                            <TextField value={usingExpr} onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => setUsingExpr(e.target.value)} placeholder="e.g. auth.uid() = user_id"/>
                         </div>
                     )}
                     {showCheck && (
                         <div className="flex flex-col gap-1.5">
                             <Typography variant="caption" className="uppercase tracking-wider text-text-secondary">WITH CHECK expression</Typography>
-                            <TextField value={checkExpr} onChange={(e: any) => setCheckExpr(e.target.value)} placeholder="e.g. auth.uid() = user_id"/>
+                            <TextField value={checkExpr} onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => setCheckExpr(e.target.value)} placeholder="e.g. auth.uid() = user_id"/>
                         </div>
                     )}
                 </Paper>

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

@@ -1,13 +1,32 @@
 
 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 { Trash2Icon } from "lucide-react";
-import { useFormex } from "@rebasepro/formex";
-import { PostgresCollection, Relation } from "@rebasepro/types";
+import {
+    Button,
+    cls,
+    Container,
+    defaultBorderMixin,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    Select,
+    SelectItem,
+    Table,
+    TableBody,
+    TableCell,
+    TableHeader,
+    TableRow,
+    TextField,
+    Trash2Icon,
+    Typography
+} from "@rebasepro/ui";
+import { useFormex } from "@rebasepro/forms";
+import { PostgresCollectionConfig, Relation } from "@rebasepro/types";
 import { useCollectionsConfigController } from "../../useCollectionsConfigController";
 
 export function CollectionRelationsTab() {
-    const { values, setFieldValue } = useFormex<PostgresCollection>();
+    const { values, setFieldValue } = useFormex<PostgresCollectionConfig>();
     const { collections } = useCollectionsConfigController();
     const [editingRelationIndex, setEditingRelationIndex] = useState<number | null>(null);
     const [editingRelationState, setEditingRelationState] = useState<Partial<Relation> | null>(null);
@@ -66,7 +85,7 @@ export function CollectionRelationsTab() {
                     <Button variant="filled" color="neutral" onClick={() => {
                         setEditingRelationIndex(-1);
                         setEditingRelationState({ relationName: "",
-target: "" as unknown as Relation["target"],
+target: "",
 cardinality: "many",
 direction: "owning" });
                     }}>
@@ -115,7 +134,7 @@ direction: "owning" });
                         <Button variant="text" onClick={() => {
                             setEditingRelationIndex(-1);
                             setEditingRelationState({ relationName: "",
-target: "" as unknown as Relation["target"],
+target: "",
 cardinality: "many",
 direction: "owning" });
                         }}>Create your first relation</Button>
@@ -128,7 +147,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"
@@ -148,7 +167,7 @@ relationName: e.target.value } : null)}
                                                 const targetFn = () => collections?.find(c => c.slug === val) || { slug: val };
                                                 (targetFn as { slug?: string }).slug = val;
                                                 return { ...prev,
-target: targetFn as unknown as Relation["target"] };
+target: targetFn as Relation["target"] };
                                             });
                                         }}
                                     >
@@ -178,7 +197,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

@@ -1,24 +1,31 @@
 
-import { useUnsavedChangesDialog, UnsavedChangesDialog } from "@rebasepro/core";
-import { useUrlController } from "../../_cms_internals";
+import { useUnsavedChangesDialog, UnsavedChangesDialog } from "@rebasepro/app";
 import * as React from "react";
-import { useState, useMemo, useEffect } from "react";
-import { Typography, Button } from "@rebasepro/ui";
-import { PlusIcon } from "lucide-react";
-import { useSnackbarController } from "@rebasepro/core";
+import { useState } from "react";
+import { Button, PlusIcon, Typography } from "@rebasepro/ui";
 import { CollectionEditorDialogProps } from "./CollectionEditorDialog";
 import { AIModifiedPathsProvider } from "./AIModifiedPathsContext";
 import { CollectionEditor } from "./CollectionEditorDialog";
-import { useNavigate } from "react-router-dom";
+import type { CollectionConfig } 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?: CollectionConfig) => 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);
@@ -29,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();
@@ -42,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-800">
+        <div className="flex-grow flex flex-col h-full w-full bg-surface-50 dark:bg-surface-800">
             <AIModifiedPathsProvider>
                 {activeCollectionId ? (
                     <CollectionEditor
@@ -56,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 +75,8 @@ export function CollectionStudioView({ collectionId, ...props }: CollectionStudi
                             Select a collection or create a new one
                         </Typography>
                         <Button
-                            onClick={() => navigate(urlController.buildAppUrlPath("schema/new"))}
+                            disabled={props.configController?.readOnly}
+                            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,31 +1,81 @@
 
-import { IconForView } from "@rebasepro/core";
-;
-import { useUrlController } from "../../_cms_internals";
+import { IconForView } from "@rebasepro/app";
 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 { PlusIcon } from "lucide-react";
-;
+import {
+    Button,
+    cls,
+    defaultBorderMixin,
+    IconButton,
+    iconSize,
+    PlusIcon,
+    ResizablePanels,
+    Tooltip,
+    Typography
+} from "@rebasepro/ui";
+import type { CollectionConfig } 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?: CollectionConfig[];
+
+    /**
+     * 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) {
+
+    // ── 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;
 
-    // Determine the active collection from the URL segment after "schema/"
-    const basePath = urlController.buildAppUrlPath("schema");
-    const relativePath = location.pathname.replace(basePath, "").replace(/^\//, "");
+    const setActiveCollectionId = (id: string | undefined) => {
+        if (isControlled) {
+            onActiveCollectionChange?.(id);
+        } else {
+            setInternalActiveId(id);
+        }
+    };
 
-    // The collectionId could be "new", empty (no selection), or a collection slug
-    const activeCollectionId = relativePath.split("/")[0] || undefined;
+    // ── Collections list ────────────────────────────────────────────────
+    const collections = collectionsProp ?? configController.collections ?? [];
 
+    // ── Sidebar sizing ──────────────────────────────────────────────────
     const [sidebarSize, setSidebarSize] = useState(() => {
         try {
             const saved = localStorage.getItem("rebase_collections_editor_sidebar_size");
@@ -43,28 +93,31 @@ export function CollectionsStudioView({ configController }: CollectionsStudioVie
         }
     }, [sidebarSize]);
 
-    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-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-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)}>
-                            <Typography variant="caption" className="font-bold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark">
+                    <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-semibold text-[11px] uppercase tracking-wider text-surface-400 dark:text-surface-400">
                                 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={() => setActiveCollectionId("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">
@@ -81,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-800 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}
@@ -111,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">
@@ -118,7 +184,8 @@ export function CollectionsStudioView({ configController }: CollectionsStudioVie
                                     Select a collection or create a new one to start editing
                                 </Typography>
                                 <Button
-                                    onClick={() => navigate(urlController.buildAppUrlPath("schema/new"))}
+                                    disabled={configController.readOnly}
+                                    onClick={() => setActiveCollectionId("new")}
                                 >
                                     <PlusIcon/>
                                     Add new collection

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

@@ -1,14 +1,24 @@
 
 import { FieldCaption } from "../../_cms_internals";
 import React, { useMemo, useState } from "react";
-import { useAuthController, useCustomizationController } from "@rebasepro/core";
+import { useCustomizationController } from "@rebasepro/app";
 import { getFieldConfig } from "../../../components/field_configs";
 import { PropertyConfigBadge } from "../../../components/PropertyConfigBadge";
-import { EntityCollection, Property } from "@rebasepro/types";
-import { BooleanSwitchWithLabel, Container, IconButton, Select, SelectItem, TextField, Typography, Button , iconSize } from "@rebasepro/ui";
-import { XIcon } from "lucide-react";
+import { CollectionConfig, Property } from "@rebasepro/types";
+import {
+    BooleanSwitchWithLabel,
+    Button,
+    Container,
+    IconButton,
+    iconSize,
+    Select,
+    SelectItem,
+    TextField,
+    Typography,
+    XIcon
+} from "@rebasepro/ui";
 
-import { useFormex } from "@rebasepro/formex";
+import { useFormex } from "@rebasepro/forms";
 import { LayoutModeSwitch } from "./LayoutModeSwitch";
 import { ViewModeSwitch } from "./ViewModeSwitch";
 import { KanbanConfigSection } from "./KanbanConfigSection";
@@ -17,9 +27,11 @@ import { useCollectionsConfigController } from "../../useCollectionsConfigContro
 import { unslugify } from "@rebasepro/utils";
 
 export function DisplaySettingsForm({
-    expandKanban
+    expandKanban,
+    standalone,
 }: {
     expandKanban?: boolean;
+    standalone?: boolean;
 }) {
 
     const {
@@ -27,13 +39,13 @@ export function DisplaySettingsForm({
         setFieldValue,
         handleChange,
         submitCount
-    } = useFormex<EntityCollection>();
+    } = useFormex<CollectionConfig>();
 
     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(() => {
@@ -108,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}/>
@@ -129,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">
@@ -186,8 +198,8 @@ export function DisplaySettingsForm({
                                             property={{
                                                 type: "string",
                                                 name: dialogPropertyName,
-                                                disabled: true,
-                                                hideFromCollection: true
+                                                ui: { disabled: true,
+hideFromCollection: true }
                                             }}
                                             propertyKey={dialogPropertyKey}
                                             existingProperty={false}
@@ -195,7 +207,7 @@ export function DisplaySettingsForm({
                                             autoUpdateId={false}
                                             inArray={false}
                                             allowDataInference={false}
-                                            propertyConfigs={customizationController.propertyConfigs}
+                                            propertyConfigs={customizationController?.propertyConfigs ?? {}}
 
                                             existingPropertyKeys={Object.keys(values.properties ?? {})}
                                             onPropertyChanged={({ id, property }) => {

package/src/collection_editor/ui/collection_editor/EntityActionsEditTab.tsx

@@ -3,20 +3,34 @@ import React from "react";
 import {
     ConfirmationDialog,
     useCustomizationController
-} from "@rebasepro/core";
+} from "@rebasepro/app";
 import { resolveEntityAction } from "../../_cms_internals";
-import { type EntityCollection } from "@rebasepro/types";
+import { type CollectionConfig } from "@rebasepro/types";
 import { EntityAction } from "@rebasepro/types";
-import { Alert, Button, Container, IconButton, Paper, Table, TableBody, TableCell, TableRow, Tooltip, Typography , iconSize } from "@rebasepro/ui";
-import { PlusIcon, Trash2Icon } from "lucide-react";
-import { useFormex } from "@rebasepro/formex";
+import {
+    Alert,
+    Button,
+    Container,
+    IconButton,
+    iconSize,
+    Paper,
+    PlusIcon,
+    Table,
+    TableBody,
+    TableCell,
+    TableRow,
+    Tooltip,
+    Trash2Icon,
+    Typography
+} from "@rebasepro/ui";
+import { useFormex } from "@rebasepro/forms";
 import { EntityActionsSelectDialog } from "./EntityActionsSelectDialog";
 
 export function EntityActionsEditTab({
     collection,
     embedded = false
 }: {
-    collection: EntityCollection,
+    collection: CollectionConfig,
     embedded?: boolean;
 }) {
 
@@ -28,7 +42,7 @@ export function EntityActionsEditTab({
     const {
         values,
         setFieldValue
-    } = useFormex<EntityCollection>();
+    } = useFormex<CollectionConfig>();
 
     const resolvedEntityActions = ((values.entityActions ?? []) as (string | EntityAction<any>)[])
         .filter((e): e is string => typeof e === "string")
@@ -137,7 +151,6 @@ export function EntityActionsEditTab({
                 open={addEntityActionDialogOpen}
                 onClose={(selectedActionKey) => {
                     if (selectedActionKey) {
-                        console.log("Selected action key:", selectedActionKey);
                         const value = [...(values.entityActions ?? []), selectedActionKey]
                             // only actions that are defined in the registry
                             .filter((e: string | EntityAction<any>): e is string => typeof e === "string" && (contextEntityActions ?? []).some(action => action.key === e));