@rebasepro/admin 0.0.1-canary.eae7889 → 0.1.0

package/src/collection_editor/ui/collection_editor/properties/advanced/AdvancedPropertyValidation.tsx

@@ -7,9 +7,8 @@ export function AdvancedPropertyValidation({ disabled }: {
     disabled: boolean
 }) {
 
-    const columnWidth = "columnWidth";
-    const hideFromCollection = "hideFromCollection";
-    const readOnly = "readOnly";
+    const hideFromCollection = "ui.hideFromCollection";
+    const readOnly = "ui.readOnly";
 
     return (
 
@@ -19,7 +18,7 @@ export function AdvancedPropertyValidation({ disabled }: {
                     {({ field, form }: FormexFieldProps) => {
                         return <SwitchControl
                             label={"Hide from collection"}
-                            size={"medium"}
+                            size={"small"}
                             disabled={disabled}
                             form={form}
                             tooltip={"Hide this field from the collection view. It will still be visible in the form view"}
@@ -34,7 +33,7 @@ export function AdvancedPropertyValidation({ disabled }: {
                     {({ field, form }: FormexFieldProps) => {
                         return <SwitchControl
                             label={"Read only"}
-                            size={"medium"}
+                            size={"small"}
                             disabled={disabled}
                             tooltip={"Is this a read only field. Display only as a preview"}
                             form={form}

package/src/collection_editor/ui/collection_editor/templates/pages_template.ts

@@ -176,7 +176,7 @@ export const pagesCollectionTemplate = {
         is_published: {
             type: "boolean",
             name: "Is Published",
-            columnWidth: 100,
+            ui: { columnWidth: 100 },
             description: "Should this page be live on the site?"
         }
     }

package/src/collection_editor/ui/collection_editor/templates/products_template.ts

@@ -41,7 +41,7 @@ export const productsCollectionTemplate = {
         available: {
             type: "boolean",
             name: "Available",
-            columnWidth: 100,
+            ui: { columnWidth: 100 },
             description: "Is this product available in the website"
         },
         price: {
@@ -55,7 +55,7 @@ export const productsCollectionTemplate = {
         images: {
             type: "array",
             name: "Images",
-            hideFromCollection: true,
+            ui: { hideFromCollection: true },
             of: {
                 type: "string",
                 storage: {

package/src/components/DefaultAppBar.tsx

@@ -110,9 +110,9 @@ export const DefaultAppBar = function DefaultAppBar({
         <div
             style={style}
             role="banner"
-            className={cls("w-full h-16 transition-all ease-in duration-75 absolute top-0 max-w-full overflow-x-auto no-scrollbar",
+            className={cls("w-full h-14 transition-all ease-in duration-75 absolute top-0 max-w-full overflow-x-auto no-scrollbar",
                 "flex flex-row gap-2 px-4 items-center",
-                "backdrop-blur-md bg-surface-50/80 dark:bg-surface-900/80",
+                "backdrop-blur-sm bg-surface-50/95 dark:bg-surface-900/80",
                 {
                     "pl-[19rem]": drawerOpen && largeLayout,
                     "pl-24": hasDrawer && !(drawerOpen && largeLayout),

package/src/components/DefaultDrawer.tsx

@@ -1,9 +1,10 @@
 import type { NavigationEntry, NavigationResult } from "@rebasepro/types";
-import React from "react";
+import React, { useMemo } from "react";
 
-import { useCollapsedGroups, useLargeLayout, useAdminModeController, useEffectiveRoleController, useTranslation, useSlot, useRebaseContext, useAnalyticsController, useRebaseRegistry, STUDIO_NAVIGATION_GROUPS } from "@rebasepro/core";
+import { useCollapsedGroups, buildCollapsedDefaults, useLargeLayout, useAdminModeController, useTranslation, useSlot, useRebaseContext, useAnalyticsController, useRebaseRegistry } from "@rebasepro/core";
 import { useNavigationStateController, useUrlController } from "../hooks";
 
+
 import { Link, useNavigate } from "react-router-dom";
 import { AnalyticsEvent } from "@rebasepro/types";
 import { cls, Tooltip, Typography , iconSize } from "@rebasepro/ui";
@@ -57,22 +58,31 @@ export function DefaultDrawer({
 
     const tooltipsOpen = drawerHovered && !drawerOpen && !adminMenuOpen;
     const largeLayout = useLargeLayout();
-    const navigate = useNavigate();
     const adminModeController = useAdminModeController();
-    const effectiveRoleController = useEffectiveRoleController();
     const registry = useRebaseRegistry();
 
-    const adminViews = navigationState.topLevelNavigation?.navigationEntries.filter(e => e.type === "admin") ?? [];
+    const allNavigationEntries = navigationState.topLevelNavigation?.navigationEntries ?? [];
 
-    let groupsToRender = navigationState.topLevelNavigation?.groups ?? [];
-    if (adminModeController.mode === "studio") {
-        groupsToRender = groupsToRender.filter(g => STUDIO_NAVIGATION_GROUPS.includes(g));
-    } else {
-        groupsToRender = groupsToRender.filter(g => !STUDIO_NAVIGATION_GROUPS.includes(g));
-    }
+    // Studio mode shows view-type entries (devViews) + admin entries (Users/Roles).
+    // Content mode shows collections and custom entries + admin entries (Users/Roles), but not studio views.
+    const filteredEntries = adminModeController.mode === "studio"
+        ? allNavigationEntries.filter(e => e.type === "view" || e.type === "admin")
+        : allNavigationEntries.filter(e => e.type !== "view");
+
+    // Derive groups from the filtered entries, preserving the order from topLevelNavigation.groups
+    const entryGroups = new Set(filteredEntries.map(e => e.group).filter(Boolean));
+    const orderedGroups = navigationState.topLevelNavigation?.groups ?? [];
+    const groupsToRender = [
+        ...orderedGroups.filter(g => entryGroups.has(g)),
+        ...[...entryGroups].filter(g => !orderedGroups.includes(g))
+    ];
 
     // Collapsible groups state - using "drawer" namespace for independent state from home page
-    const { isGroupCollapsed, toggleGroupCollapsed } = useCollapsedGroups(groupsToRender, "drawer");
+    const collapsedDefaults = useMemo(
+        () => buildCollapsedDefaults(registry.cmsConfig?.navigationGroupMappings, "drawer"),
+        [registry.cmsConfig?.navigationGroupMappings]
+    );
+    const { isGroupCollapsed, toggleGroupCollapsed } = useCollapsedGroups(groupsToRender, "drawer", collapsedDefaults);
 
     const headerSlot = useSlot("navigation.header", { drawerOpen,
 drawerHovered,
@@ -84,7 +94,6 @@ context });
     if (!navigationState.topLevelNavigation)
         return null;
 
-    const navigationEntries = navigationState.topLevelNavigation.navigationEntries;
     const groups = navigationState.topLevelNavigation.groups;
 
     const onItemClick = (view: NavigationEntry) => {
@@ -126,7 +135,7 @@ context });
                 <div
                     ref={scrollRef}
                     onScroll={handleScroll}
-                    className={"flex-grow overflow-y-auto overflow-x-visible no-scrollbar"}
+                    className={"flex-grow min-h-0 overflow-y-auto overflow-x-hidden no-scrollbar"}
                     style={{
                         maskImage: scrolled
                             ? "linear-gradient(to bottom, transparent 0, black 20px, black calc(100% - 20px), transparent 100%)"
@@ -134,7 +143,7 @@ context });
                     }}>
 
                     {groupsToRender.map((group) => {
-                        const entriesInGroup = Object.values(navigationEntries).filter(e => e.group === group);
+                        const entriesInGroup = filteredEntries.filter(e => e.group === group);
                         return (
                             <DrawerNavigationGroup
                                 key={`drawer_group_${group}`}
@@ -146,7 +155,6 @@ context });
                                 tooltipsOpen={tooltipsOpen}
                                 adminMenuOpen={adminMenuOpen}
                                 onItemClick={onItemClick}
-                                hideHeader={adminModeController.mode === "studio"}
                             />
                         );
                     })}
@@ -306,7 +314,7 @@ function DrawerModeSwitch({
     return (
         <div
             className={cls(
-                "overflow-hidden transition-all duration-200 ease-in-out px-3",
+                "shrink-0 overflow-hidden transition-all duration-200 ease-in-out px-3",
                 showSwitch ? "opacity-100 h-7 mt-2 mb-0" : "opacity-0 pointer-events-none h-7 mt-2 mb-0"
             )}
         >

package/src/components/DrawerNavigationGroup.tsx

@@ -75,7 +75,7 @@ export function DrawerNavigationGroup({
             {/* Group Header */}
             {!hideHeader && (
                 <div
-                    className={cls("pl-4 pr-2 py-0.5 flex flex-row items-center transition-colors",
+                    className={cls("pl-3 pr-2 py-0.5 flex flex-row items-center transition-colors",
                         drawerOpen ? "cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-800/40 rounded-lg" : "opacity-0 invisible pointer-events-none"
                     )}
                     onClick={drawerOpen ? onToggleCollapsed : undefined}
@@ -83,14 +83,14 @@ export function DrawerNavigationGroup({
                     <ChevronDownIcon
                         size={iconSize.small}
                         className={cls(
-                            "text-surface-500 dark:text-surface-400 transition-transform duration-200 mr-1",
+                            "text-surface-400 dark:text-surface-400 transition-transform duration-200 mr-1",
                             collapsed ? "-rotate-90" : "rotate-0"
                         )}
                     />
                     <Typography
                         variant={"caption"}
                         color={"secondary"}
-                        className="font-medium flex-grow line-clamp-1"
+                        className="font-semibold text-[11px] uppercase tracking-wider flex-grow line-clamp-1 text-surface-400 dark:text-surface-400"
                     >
                         {(group || t("views_group"))}
                     </Typography>
@@ -106,7 +106,7 @@ export function DrawerNavigationGroup({
             <div
                 className={cls(
                     "transition-all duration-200 ease-in-out",
-                    (!hideHeader && collapsed) ? "overflow-hidden" : "overflow-visible",
+                    "overflow-hidden",
                     !hideHeader && "dark:bg-transparent",
                     !hideHeader ? (drawerOpen ? "rounded-lg" : "rounded-lg") : "rounded-lg",
                     (!hideHeader && collapsed) ? "max-h-0 opacity-0" : "max-h-[2000px] opacity-100"

package/src/components/DrawerNavigationItem.tsx

@@ -22,7 +22,7 @@ export function DrawerNavigationItem({
 }) {
 
     const iconWrap = <div
-        className={"shrink-0 flex items-center justify-center w-[56px] h-[40px] text-text-secondary dark:text-text-secondary-dark"}>
+        className={"shrink-0 flex items-center justify-center w-[44px] h-[30px] text-surface-500 dark:text-text-secondary-dark [&>svg]:size-4"}>
         {icon}
     </div>;
 
@@ -33,12 +33,12 @@ export function DrawerNavigationItem({
                 width: "100%",
                 transition: drawerOpen ? "width 150ms ease-in" : undefined
             }}
-            className={({ isActive }: any) => cls("rounded-lg truncate",
-                "hover:bg-surface-100 dark:hover:bg-surface-800/60 text-text-primary dark:text-surface-300 hover:text-surface-900 dark:hover:text-white",
+            className={({ isActive }: any) => cls("rounded-md truncate",
+                "hover:bg-surface-100 dark:hover:bg-surface-800/60 text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-white",
                 "flex flex-row items-center",
-                drawerOpen ? "pr-4 h-10" : "h-10",
-                "font-semibold text-xs",
-                isActive ? "bg-surface-100 dark:bg-surface-800/50 text-surface-900 dark:text-white" : ""
+                drawerOpen ? "pr-4 h-[30px]" : "h-[30px]",
+                "font-medium text-[13px]",
+                isActive ? "bg-surface-900/[0.06] dark:bg-surface-800/50 text-surface-900 dark:text-white" : ""
             )}
             to={url}
         >

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -46,7 +46,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
     ({
         className,
         style,
-        forceFilter,
+        fixedFilter,
         actionsStart,
         actions,
         viewModeToggle,
@@ -143,7 +143,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
             propertyKey,
             entity
         }) ?? column.custom.resolvedProperty;
-        if (!property?.disabled) {
+        if (!property?.ui?.disabled) {
             disabled = false;
         }
 
@@ -248,7 +248,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
         const columnsResult: VirtualTableColumn[] = propertiesToColumns({
             properties,
             sortable,
-            forceFilter,
+            fixedFilter,
             AdditionalHeaderWidget
         });
 
@@ -269,7 +269,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
                 }))
             : [];
         return [...columnsResult, ...additionalTableColumns];
-    }, [properties, sortable, forceFilter, AdditionalHeaderWidget, additionalFields]);
+    }, [properties, sortable, fixedFilter, AdditionalHeaderWidget, additionalFields]);
 
     const idColumn: VirtualTableColumn = useMemo(() => ({
         key: "id_ewcfedcswdf3",

package/src/components/EntityCollectionTable/EntityCollectionTableProps.tsx

@@ -111,7 +111,7 @@ export type EntityCollectionTableProps<M extends Record<string, unknown>,
 
         displayedColumnIds?: PropertyColumnConfig[];
 
-        forceFilter?: FilterValues<Extract<keyof M, string>>;
+        fixedFilter?: FilterValues<Extract<keyof M, string>>;
 
         inlineEditing?: boolean;
 

package/src/components/EntityCollectionTable/PropertyTableCell.tsx

@@ -89,11 +89,11 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
             setSavedTimestamp(Date.now());
         }, []);
 
-        const customField = Boolean(property.Field);
-        const customPreview = Boolean(property.Preview);
+        const customField = Boolean(property.ui?.Field);
+        const customPreview = Boolean(property.ui?.Preview);
         const readOnlyProperty = isReadOnly(property);
-        const disabledTooltip: string | undefined = typeof property.disabled === "object" ? property.disabled.disabledMessage : undefined;
-        const disabled = readonly || disabledProp || Boolean(property.disabled);
+        const disabledTooltip: string | undefined = typeof property.ui?.disabled === "object" ? property.ui?.disabled.disabledMessage : undefined;
+        const disabled = readonly || disabledProp || Boolean(property.ui?.disabled);
 
         const validation = useMemo(() => mapPropertyToZod({
             property,

package/src/components/EntityCollectionTable/column_utils.tsx

@@ -21,7 +21,7 @@ export function buildIdColumn(largeLayout?: boolean): VirtualTableColumn {
 export interface PropertiesToColumnsParams<M extends Record<string, unknown>> {
     properties: Properties;
     sortable?: boolean;
-    forceFilter?: FilterValues<keyof M extends string ? keyof M : never>;
+    fixedFilter?: FilterValues<keyof M extends string ? keyof M : never>;
     AdditionalHeaderWidget?: React.ComponentType<{
         property: Property,
         propertyKey: string,
@@ -29,8 +29,8 @@ export interface PropertiesToColumnsParams<M extends Record<string, unknown>> {
     }>;
 }
 
-export function propertiesToColumns<M extends Record<string, unknown>>({ properties, sortable, forceFilter, AdditionalHeaderWidget }: PropertiesToColumnsParams<M>): VirtualTableColumn[] {
-    const disabledFilter = Boolean(forceFilter);
+export function propertiesToColumns<M extends Record<string, unknown>>({ properties, sortable, fixedFilter, AdditionalHeaderWidget }: PropertiesToColumnsParams<M>): VirtualTableColumn[] {
+    const disabledFilter = Boolean(fixedFilter);
     return Object.entries<Property>(properties)
         .flatMap(([key, property]) => getColumnKeysForProperty(property, key))
         .map(({

package/src/components/EntityCollectionTable/fields/TableMultipleRelationField.tsx

@@ -22,7 +22,7 @@ type TableMultipleRelationFieldProps = {
     previewProperties?: string[];
     title?: string;
     relation: Relation;
-    forceFilter?: FilterValues<string>;
+    fixedFilter?: FilterValues<string>;
     includeId?: boolean;
     includeEntityLink?: boolean;
 };
@@ -43,7 +43,7 @@ export const TableMultipleRelationFieldInternal = React.memo(
             previewProperties,
             title,
             disabled,
-            forceFilter,
+            fixedFilter,
             collection,
             includeId,
             includeEntityLink
@@ -63,7 +63,7 @@ export const TableMultipleRelationFieldInternal = React.memo(
             collection,
             onMultipleEntitiesSelected,
             selectedEntityIds,
-            forceFilter
+            fixedFilter
         }
         );
 

package/src/components/EntityCollectionTable/fields/TableReferenceField.tsx

@@ -25,7 +25,7 @@ type TableReferenceFieldProps = {
     previewProperties?: string[];
     title?: string;
     path: string;
-    forceFilter?: FilterValues<string>;
+    fixedFilter?: FilterValues<string>;
     includeId?: boolean;
     includeEntityLink?: boolean;
 };
@@ -60,7 +60,7 @@ export const TableReferenceFieldInternal = React.memo(
             previewProperties,
             title,
             disabled,
-            forceFilter,
+            fixedFilter,
             collection,
             includeId,
             includeEntityLink
@@ -87,7 +87,7 @@ export const TableReferenceFieldInternal = React.memo(
             onMultipleEntitiesSelected,
             onSingleEntitySelected,
             selectedEntityIds,
-            forceFilter
+            fixedFilter
         }
         );
 

package/src/components/EntityCollectionTable/fields/TableRelationField.tsx

@@ -25,7 +25,7 @@ type TableRelationFieldProps = {
     previewProperties?: string[];
     title?: string;
     relation: Relation;
-    forceFilter?: FilterValues<string>;
+    fixedFilter?: FilterValues<string>;
     includeId?: boolean;
     includeEntityLink?: boolean;
 };
@@ -46,7 +46,7 @@ export function TableRelationField(props: TableRelationFieldProps) {
             previewProperties={props.previewProperties}
             title={props.title}
             relation={props.relation}
-            forceFilter={props.forceFilter}
+            fixedFilter={props.fixedFilter}
             includeId={props.includeId}
             includeEntityLink={props.includeEntityLink}
         />;
@@ -69,7 +69,7 @@ export const TableRelationFieldInternal = React.memo(
             previewProperties,
             title,
             disabled,
-            forceFilter,
+            fixedFilter,
             collection,
             includeId,
             includeEntityLink
@@ -96,7 +96,7 @@ export const TableRelationFieldInternal = React.memo(
             onMultipleEntitiesSelected,
             onSingleEntitySelected,
             selectedEntityIds,
-            forceFilter
+            fixedFilter
         }
         );
 

package/src/components/EntityCollectionTable/fields/TableRelationSelectorField.tsx

@@ -14,7 +14,7 @@ interface RelationSelectorFieldProps {
     /** The relation configuration */
     relation: Relation;
     /** Force filter to be applied to the relation search */
-    forceFilter?: FilterValues<string>;
+    fixedFilter?: FilterValues<string>;
     /** Collection size for display */
     size?: "small" | "medium";
 }
@@ -25,7 +25,7 @@ export function TableRelationSelectorField({
     internalValue,
     updateValue,
     relation,
-    forceFilter,
+    fixedFilter,
     size = "medium"
 }: RelationSelectorFieldProps) {
 
@@ -36,7 +36,7 @@ export function TableRelationSelectorField({
             value={internalValue || null}
             onValueChange={(newVal) => updateValue(newVal ?? null)}
             relation={relation}
-            forceFilter={forceFilter}
+            fixedFilter={fixedFilter}
         />
     );
 }

package/src/components/EntityCollectionTable/internal/CollectionTableToolbar.tsx

@@ -13,6 +13,10 @@ interface CollectionTableToolbarProps {
     viewModeToggle?: React.ReactNode;
     title?: React.ReactNode,
     onTextSearch?: (searchString?: string) => void;
+    /**
+     * Initial search string to pre-populate the search bar (e.g. from URL params).
+     */
+    initialSearchText?: string;
     /**
      * When true the toolbar is in "compact" mode for the split-view left panel.
      * - Search bar, loading spinner, and view-mode toggle are hidden.
@@ -29,6 +33,7 @@ export function CollectionTableToolbar({
     onTextSearch,
     title,
     viewModeToggle,
+    initialSearchText,
     compact = false
 }: CollectionTableToolbarProps) {
 
@@ -54,7 +59,7 @@ export function CollectionTableToolbar({
                     {viewModeToggle}
                 </div>
 
-                {title && <div className={"hidden lg:block"}>
+                {title && <div className={"flex items-center"}>
                     {title}
                 </div>}
 
@@ -84,7 +89,8 @@ export function CollectionTableToolbar({
                             size={"small"}
                             placeholder={t("search")}
                             onTextSearch={onTextSearch}
-                            expandable={true}/>}
+                            expandable={true}
+                            initialValue={initialSearchText}/>}
                 </div>
 
                 {/* Secondary actions — always inline */}

package/src/components/EntityCollectionTable/internal/EntityTableCell.tsx

@@ -204,7 +204,7 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
                     `flex relative h-full rounded-md p-${p} border-4`,
                     showSaved ? "bg-primary/20 dark:bg-primary/20" : (onHover && !disabled ? "bg-surface-50 dark:bg-surface-900" : ""),
                     hideOverflow ? "overflow-hidden" : "",
-                    isSelected && !showSaved ? "bg-surface-50 dark:bg-surface-900" : "",
+                    isSelected && !showSaved ? "bg-surface-accent-50 dark:bg-surface-accent-950" : "",
                     borderClass
                 )}
                 ref={ref}

package/src/components/EntityCollectionTable/internal/common.tsx

@@ -17,20 +17,20 @@ export function getTableCellAlignment(property: Property): "right" | "left" | "c
 
 export function getTablePropertyColumnWidth(property: Property): number {
 
-    if (property.columnWidth) {
-        return property.columnWidth;
+    if (property.ui?.columnWidth) {
+        return property.ui?.columnWidth;
     }
 
     if (property.type === "string") {
-        if (property.url) {
+        if (property.ui?.url) {
             return 280;
         } else if (property.storage) {
             return 160;
         } else if (property.enum) {
             return 200;
-        } else if (property.multiline) {
+        } else if (property.ui?.multiline) {
             return 300;
-        } else if (property.markdown) {
+        } else if (property.ui?.markdown) {
             return 300;
         } else if (property.email) {
             return 200;

package/src/components/EntityCollectionTable/internal/popup_field/PopupFormField.tsx

@@ -291,7 +291,7 @@ export function PopupFormFieldInternal<M extends Record<string, unknown>>({
     const fieldProps: PropertyFieldBindingProps<M> | undefined = propertyKey && property
         ? {
             propertyKey: propertyKey as string,
-            disabled: isSubmitting || isReadOnly(property) || !!property.disabled,
+            disabled: isSubmitting || isReadOnly(property) || !!property.ui?.disabled,
             property,
             includeDescription: false,
             underlyingValueHasChanged: false,

package/src/components/EntityCollectionTable/table_bindings.tsx

@@ -41,7 +41,7 @@ export interface TableFieldConfig {
 }
 
 export function isStorageProperty(property: Property) {
-    if (property.type === "string" && property.markdown)
+    if (property.type === "string" && property.ui?.markdown)
         return false;
     if (property.type === "string" && (property as StringProperty).storage)
         return true;
@@ -81,7 +81,7 @@ path: referenceProperty.path as string }) : undefined;
                         includeId={referenceProperty.includeId}
                         includeEntityLink={referenceProperty.includeEntityLink}
                         title={property.name}
-                        forceFilter={referenceProperty.forceFilter}
+                        fixedFilter={referenceProperty.fixedFilter}
                     />
                 );
             },
@@ -181,8 +181,8 @@ path: referenceProperty.path as string }) : undefined;
                 ),
                 fullHeight: true
             };
-        } else if (stringProperty.markdown || !stringProperty.storage || !stringProperty.reference) {
-            const multiline = Boolean(stringProperty.multiline) || Boolean(stringProperty.markdown);
+        } else if (stringProperty.ui?.markdown || !stringProperty.storage || !stringProperty.reference) {
+            const multiline = Boolean(stringProperty.ui?.multiline) || Boolean(stringProperty.ui?.markdown);
             return {
                 Component: ({ error, validationError, disabled, selected, internalValue, updateValue }: any) => (
                     <VirtualTableInput
@@ -238,11 +238,11 @@ path: referenceProperty.path as string }) : undefined;
                         size={size}
                         path={property.path}
                         multiselect={false}
-                        previewProperties={property.previewProperties}
+                        previewProperties={property.ui?.previewProperties}
                         includeId={property.includeId}
                         includeEntityLink={property.includeEntityLink}
                         title={property.name ?? propertyKey}
-                        forceFilter={property.forceFilter}
+                        fixedFilter={property.fixedFilter}
                     />
                 ),
                 allowScroll: false
@@ -250,39 +250,14 @@ path: referenceProperty.path as string }) : undefined;
         }
     } else if (property.type === "relation") {
         if (property.relation) {
-            if (property.widget === "dialog") {
+            if (property.ui?.widget === "dialog") {
                 return {
-                    Component: ({ propertyKey, internalValue, updateValue, disabled, size, property }: any) => (
-                        <TableRelationField
-                            name={propertyKey}
-                            internalValue={internalValue as EntityRelation}
-                            updateValue={updateValue}
-                            disabled={disabled}
-                            size={size}
-                            multiselect={false}
-                            relation={property.relation}
-                            previewProperties={property.previewProperties}
-                            includeId={property.includeId}
-                            includeEntityLink={property.includeEntityLink}
-                            title={property.name ?? propertyKey}
-                            forceFilter={property.forceFilter}
-                        />
-                    ),
+                    Component: RelationDialogBindingComponent,
                     allowScroll: false
                 };
             } else {
                 return {
-                    Component: ({ propertyKey, internalValue, updateValue, disabled, property }: any) => (
-                        <TableRelationSelectorField
-                            name={propertyKey}
-                            internalValue={internalValue as EntityRelation}
-                            updateValue={updateValue}
-                            disabled={disabled}
-                            size={"small"}
-                            relation={property.relation!}
-                            forceFilter={property.forceFilter}
-                        />
-                    ),
+                    Component: RelationSelectorBindingComponent,
                     allowScroll: false
                 };
             }
@@ -330,7 +305,7 @@ path: referenceProperty.path as string }) : undefined;
                                 path={ofProp.path}
                                 previewProperties={ofProp.previewProperties}
                                 title={arrayProperty.name}
-                                forceFilter={ofProp.forceFilter}
+                                fixedFilter={ofProp.fixedFilter}
                                 includeId={ofProp.includeId}
                                 includeEntityLink={ofProp.includeEntityLink}
                             />
@@ -344,3 +319,38 @@ path: referenceProperty.path as string }) : undefined;
 
     return undefined;
 }
+
+/** Stable component for relation fields rendered with the dialog widget */
+function RelationDialogBindingComponent({ propertyKey, internalValue, updateValue, disabled, size, property }: any) {
+    return (
+        <TableRelationField
+            name={propertyKey}
+            internalValue={internalValue as EntityRelation}
+            updateValue={updateValue}
+            disabled={disabled}
+            size={size}
+            multiselect={false}
+            relation={property.relation}
+            previewProperties={property.ui?.previewProperties}
+            includeId={property.includeId}
+            includeEntityLink={property.includeEntityLink}
+            title={property.name ?? propertyKey}
+            fixedFilter={property.fixedFilter}
+        />
+    );
+}
+
+/** Stable component for relation fields rendered with the inline selector */
+function RelationSelectorBindingComponent({ propertyKey, internalValue, updateValue, disabled, property }: any) {
+    return (
+        <TableRelationSelectorField
+            name={propertyKey}
+            internalValue={internalValue as EntityRelation}
+            updateValue={updateValue}
+            disabled={disabled}
+            size={"small"}
+            relation={property.relation!}
+            fixedFilter={property.fixedFilter}
+        />
+    );
+}