@rebasepro/admin 0.5.0 → 0.6.0

package/src/components/DrawerNavigationGroup.tsx

@@ -4,7 +4,7 @@ import { ChevronDownIcon, cls, iconSize, Typography } from "@rebasepro/ui";
 ;
 import { IconForView } from "@rebasepro/core";
 import { DrawerNavigationItem } from "./DrawerNavigationItem";
-import { useTranslation } from "@rebasepro/core";
+import { useTranslation, useComponentOverride } from "@rebasepro/core";
 
 export interface DrawerNavigationGroupProps {
     /**
@@ -66,6 +66,7 @@ export function DrawerNavigationGroup({
     hideHeader
 }: DrawerNavigationGroupProps) {
     const { t } = useTranslation();
+    const ResolvedDrawerNavigationItem = useComponentOverride("Shell.DrawerNavigationItem", DrawerNavigationItem);
     return (
         <div
             className={"my-2 mx-2 flex flex-col"}
@@ -112,7 +113,7 @@ export function DrawerNavigationGroup({
                 )}
             >
                 {entries.map((entry) => (
-                    <DrawerNavigationItem
+                    <ResolvedDrawerNavigationItem
                         key={entry.id}
                         icon={<IconForView collectionOrView={entry.collection ?? entry.view} size={"small"}/>}
                         tooltipsOpen={!collapsed && tooltipsOpen}

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

@@ -7,8 +7,7 @@ import { ReferencePreview } from "../../../preview";
 import { CollectionSize, Entity, EntityReference, FilterValues } from "@rebasepro/types";
 
 import { getPreviewSizeFrom } from "../../../preview/util";
-import { useCustomizationController } from "@rebasepro/core";
-import { ErrorView } from "@rebasepro/core";
+import { useComponentOverride, ErrorView, CollectionComponentOverrideProvider } from "@rebasepro/core";
 import { cls, PencilIcon } from "@rebasepro/ui";
 import { EntityPreviewContainer } from "../../EntityPreview";
 import { getReferenceFrom } from "@rebasepro/common";
@@ -29,15 +28,15 @@ type TableReferenceFieldProps = {
     includeEntityLink?: boolean;
 };
 
-export function TableReferenceField(props: TableReferenceFieldProps) {
-    const customizationController = useCustomizationController();
+const DefaultMissingReference: React.FC<{ path: string }> = () => null;
+
+function TableReferenceFieldResolver(props: TableReferenceFieldProps & { collection: EntityCollection | undefined }) {
+    const ResolvedMissingReference = useComponentOverride("Entity.MissingReference", DefaultMissingReference);
+    const { path, collection } = props;
 
-    const collectionRegistryController = useCollectionRegistryController();
-    const { path } = props;
-    const collection = collectionRegistryController.getCollection(path);
     if (!collection) {
-        if (customizationController.components?.missingReference) {
-            return <customizationController.components.missingReference path={path}/>;
+        if (ResolvedMissingReference !== DefaultMissingReference) {
+            return <ResolvedMissingReference path={path}/>;
         } else {
             return <ErrorView error={`Collection not found: ${path}`}/>;
         }
@@ -45,6 +44,28 @@ export function TableReferenceField(props: TableReferenceFieldProps) {
     return <TableReferenceFieldInternal {...props} collection={collection}/>;
 }
 
+export function TableReferenceField(props: TableReferenceFieldProps) {
+    const collectionRegistryController = useCollectionRegistryController();
+    const { path } = props;
+    const collection = collectionRegistryController.getCollection(path);
+
+    const content = (
+        <TableReferenceFieldResolver
+            {...props}
+            collection={collection}
+        />
+    );
+
+    if (collection?.components) {
+        return (
+            <CollectionComponentOverrideProvider overrides={collection.components}>
+                {content}
+            </CollectionComponentOverrideProvider>
+        );
+    }
+    return content;
+}
+
 export const TableReferenceFieldInternal = React.memo(
     function TableReferenceFieldInternal(props: TableReferenceFieldProps & {
         collection: EntityCollection;

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

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 
 import useMeasure from "react-use-measure";
 
-import { cls, Tooltip , iconSize } from "@rebasepro/ui";
+import { cls, Tooltip, iconSize } from "@rebasepro/ui";
 import { ErrorBoundary, MinusCircleIcon } from "@rebasepro/ui";
 import { getRowHeight, TableSize } from "@rebasepro/core";
 import { ErrorTooltip } from "@rebasepro/core";

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

@@ -279,6 +279,7 @@ export function PopupFormFieldInternal<M extends Record<string, unknown>>({
         path,
         setFieldValue,
         save: saveValue,
+        submit: handleSubmit,
         formex,
         status: "existing",
         openEntityMode: "side_panel",

package/src/components/EntityCollectionView/Board.tsx

@@ -41,7 +41,8 @@ export function Board<M extends Record<string, unknown>, COLUMN extends string>(
     const [dragOverColumnId, setDragOverColumnId] = useState<string | null>(null);
 
     // Custom overlay positioning — bypasses position:fixed containment issues
-    const grabOffsetRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+    const grabOffsetRef = useRef<{ x: number; y: number }>({ x: 0,
+y: 0 });
     const [overlayPos, setOverlayPos] = useState<{ x: number; y: number } | null>(null);
 
     const handleMouseMove = useCallback((e: MouseEvent) => {
@@ -261,11 +262,11 @@ export function Board<M extends Record<string, unknown>, COLUMN extends string>(
                     const activeTop = active.rect.current.translated?.top ?? 0;
                     const activeHeight = active.rect.current.translated?.height ?? 0;
                     const activeCenter = activeTop + activeHeight / 2;
-                    
+
                     const overTop = over?.rect.top ?? 0;
                     const overHeight = over?.rect.height ?? 0;
                     const overCenter = overTop + overHeight / 2;
-                    
+
                     const isBelowOverItem = activeCenter > overCenter;
 
                     const modifier = isBelowOverItem ? 1 : 0;
@@ -332,7 +333,7 @@ export function Board<M extends Record<string, unknown>, COLUMN extends string>(
             if (currentColumn && currentColumn === overColumn) {
                 // Use dnd-kit's sortable indexes if available to avoid race conditions with mutating handleDragOver
                 const activeIndex = finalItemMapState[currentColumn].findIndex(i => i.id === activeId);
-                
+
                 let overIndex = finalItemMapState[overColumn].findIndex(i => i.id === overId);
                 const overType = over.data.current?.type;
                 if (overIndex === -1 && (overType === "COLUMN" || overType === "ITEM-LIST")) {
@@ -343,7 +344,7 @@ export function Board<M extends Record<string, unknown>, COLUMN extends string>(
                         // when dragging over the column background.
                         overIndex = activeIndex;
                     }
-                } else if (overIndex === -1 && typeof over.data.current?.sortable?.index === 'number') {
+                } else if (overIndex === -1 && typeof over.data.current?.sortable?.index === "number") {
                     overIndex = over.data.current.sortable.index;
                 }
 
@@ -375,11 +376,11 @@ export function Board<M extends Record<string, unknown>, COLUMN extends string>(
 
     const customCollisionDetection: CollisionDetection = (args) => {
         const pointerCollisions = pointerWithin(args);
-        
+
         if (pointerCollisions.length > 0) {
             return pointerCollisions;
         }
-        
+
         return rectIntersection(args);
     };
 
@@ -394,7 +395,8 @@ export function Board<M extends Record<string, unknown>, COLUMN extends string>(
             {/* Hidden DragOverlay — keeps dnd-kit's internal collision detection
                and drag tracking working (it needs dragOverlay.rect to be set) */}
             <DragOverlay dropAnimation={null} style={{ opacity: 0 }}>
-                {(activeItem || activeColumn) ? <div style={{ width: 1, height: 1 }}/> : null}
+                {(activeItem || activeColumn) ? <div style={{ width: 1,
+height: 1 }}/> : null}
             </DragOverlay>
 
             {/* Visual overlay — rendered at document.body via portal to bypass

package/src/components/EntityCollectionView/BoardSortableList.tsx

@@ -94,8 +94,8 @@ export function BoardSortableList<M extends Record<string, unknown>>({
             className={containerClassName}
             style={{ minHeight: 80 }}
         >
-            <SortableContext 
-                items={items.map(i => i.id)} 
+            <SortableContext
+                items={items.map(i => i.id)}
                 strategy={verticalListSortingStrategy}
             >
                 {items.length === 0 && !loading ? (

package/src/components/EntityCollectionView/EntityCollectionBoardView.tsx

@@ -237,7 +237,8 @@ export function EntityCollectionBoardView<M extends Record<string, unknown> = Re
             .forEach(plugin => {
                 plugin.hooks!.onKanbanColumnsReorder!({
                     fullPath,
-                    parentCollectionSlugs, parentEntityIds,
+                    parentCollectionSlugs,
+parentEntityIds,
                     collection,
                     kanbanColumnProperty: columnProperty,
                     newColumnsOrder: newColumns
@@ -487,7 +488,8 @@ export function EntityCollectionBoardView<M extends Record<string, unknown> = Re
     const addKanbanColumnSlots = useSlot("kanban.add-column", {
         collection,
         fullPath,
-        parentCollectionSlugs, parentEntityIds,
+        parentCollectionSlugs,
+parentEntityIds,
         columnProperty
     });
 

package/src/components/EntityCollectionView/EntityCollectionCardView.tsx

@@ -7,6 +7,7 @@ import {
     CircularProgress,
     Typography
 } from "@rebasepro/ui";
+import { useComponentOverride } from "@rebasepro/core";
 
 export type EntityCollectionCardViewProps<M extends Record<string, unknown> = Record<string, unknown>> = {
     collection: EntityCollection<M>;
@@ -90,6 +91,7 @@ export function EntityCollectionCardView<M extends Record<string, unknown> = Rec
     size = "m"
 }: EntityCollectionCardViewProps<M>) {
 
+    const ResolvedEntityCard = useComponentOverride("Collection.Card", EntityCard) as typeof EntityCard;
     const containerRef = useRef<HTMLDivElement>(null);
     const hasRestoredScroll = useRef(false);
 
@@ -109,9 +111,17 @@ export function EntityCollectionCardView<M extends Record<string, unknown> = Rec
 
     // Keep mutable refs for values used in the scroll listener callback
     // to avoid re-attaching the listener every time pagination state changes.
-    const paginationStateRef = useRef({ paginationEnabled, noMoreToLoad, dataLoading, itemCount, pageSize });
+    const paginationStateRef = useRef({ paginationEnabled,
+noMoreToLoad,
+dataLoading,
+itemCount,
+pageSize });
     useEffect(() => {
-        paginationStateRef.current = { paginationEnabled, noMoreToLoad, dataLoading, itemCount, pageSize };
+        paginationStateRef.current = { paginationEnabled,
+noMoreToLoad,
+dataLoading,
+itemCount,
+pageSize };
     }, [paginationEnabled, noMoreToLoad, dataLoading, itemCount, pageSize]);
 
     // Reset loading flag when new data arrives (separate effect, like list view)
@@ -235,7 +245,7 @@ export function EntityCollectionCardView<M extends Record<string, unknown> = Rec
             className="w-full p-4"
         >
             {/* Error state */}
-            {dataLoadingError ? (
+            {dataLoadingError && data.length === 0 ? (
                 <div className="h-full flex items-center justify-center p-8">
                     <Typography className="text-red-500">
                         Error loading data: {dataLoadingError.message}
@@ -262,7 +272,7 @@ export function EntityCollectionCardView<M extends Record<string, unknown> = Rec
                             gridColumnsClass
                         )}>
                             {data.map((entity) => (
-                                <EntityCard
+                                <ResolvedEntityCard
                                     key={`${entity.path}_${entity.id}`}
                                     entity={entity}
                                     collection={collection}

package/src/components/EntityCollectionView/EntityCollectionListView.tsx

@@ -78,7 +78,6 @@ type ListColumnDef = {
 };
 
 
-
 /**
  * Get row padding/spacing classes based on size
  */
@@ -212,15 +211,18 @@ function compactValueSummary(value: unknown, property: Property): string | null
     }
 
     if (property.type === "relation") {
-        // Relation data is often populated as { id, data: { ... } }
         if (typeof value === "string" || typeof value === "number") return String(value);
         if (value && typeof value === "object") {
             const obj = value as Record<string, unknown>;
-            // Try to find a display name in relation data
+            // EntityRelation.data is an Entity: { id, path, values: { name, ... } }
             if (obj.data && typeof obj.data === "object") {
                 const data = obj.data as Record<string, unknown>;
-                const name = data.name ?? data.title ?? data.display_name ?? data.displayName ?? data.email;
-                if (name) return String(name);
+                const values = (data.values && typeof data.values === "object")
+                    ? data.values as Record<string, unknown>
+                    : data;
+                const name = values.name ?? values.title ?? values.display_name
+                    ?? values.displayName ?? values.label ?? values.email;
+                if (name && typeof name !== "object") return String(name);
             }
             if ("id" in obj) return String(obj.id);
         }
@@ -501,7 +503,8 @@ export function EntityCollectionListView<M extends Record<string, unknown> = Rec
         const customEntityActions = (collection.entityActions ?? [])
             .map(action => resolveEntityAction(action, customizationController.entityActions))
             .filter(Boolean) as EntityAction<M>[];
-        const allActions = getActionsForEntity({ entity, customEntityActions });
+        const allActions = getActionsForEntity({ entity,
+customEntityActions });
         return allActions.filter(a => a.showActionsInListView);
     }, [getActionsForEntity, collection.entityActions, customizationController.entityActions]);
 
@@ -519,9 +522,15 @@ export function EntityCollectionListView<M extends Record<string, unknown> = Rec
 
     // Keep mutable refs for values used in the scroll handler to avoid
     // re-attaching the listener every time pagination state changes.
-    const paginationStateRef = useRef({ paginationEnabled, noMoreToLoad, itemCount, pageSize });
+    const paginationStateRef = useRef({ paginationEnabled,
+noMoreToLoad,
+itemCount,
+pageSize });
     useEffect(() => {
-        paginationStateRef.current = { paginationEnabled, noMoreToLoad, itemCount, pageSize };
+        paginationStateRef.current = { paginationEnabled,
+noMoreToLoad,
+itemCount,
+pageSize };
     }, [paginationEnabled, noMoreToLoad, itemCount, pageSize]);
 
     useEffect(() => {
@@ -593,7 +602,7 @@ export function EntityCollectionListView<M extends Record<string, unknown> = Rec
             )}
         >
             {/* Error state */}
-            {dataLoadingError ? (
+            {dataLoadingError && data.length === 0 ? (
                 <div className="flex items-center justify-center p-8">
                     <Typography className="text-red-500">
                         Error loading data: {dataLoadingError.message}
@@ -614,9 +623,13 @@ export function EntityCollectionListView<M extends Record<string, unknown> = Rec
             ) : (
                 /* Spacer with total height — no internal scroll.
                    The nearest scrollable ancestor provides the scrollbar. */
-                <div style={{ height: totalHeight + footerHeight, position: "relative" }}>
+                <div style={{ height: totalHeight + footerHeight,
+position: "relative" }}>
                     {/* Windowed rows */}
-                    <div style={{ position: "absolute", top: offsetY, left: 0, right: 0 }}>
+                    <div style={{ position: "absolute",
+top: offsetY,
+left: 0,
+right: 0 }}>
                         {visibleData.map((entity, i) => {
                             const actualIndex = startIndex + i;
                             const isLast = actualIndex === data.length - 1;
@@ -659,7 +672,10 @@ export function EntityCollectionListView<M extends Record<string, unknown> = Rec
                     {dataLoading && (
                         <div
                             className="flex items-center justify-center py-3"
-                            style={{ position: "absolute", top: totalHeight, left: 0, right: 0 }}
+                            style={{ position: "absolute",
+top: totalHeight,
+left: 0,
+right: 0 }}
                         >
                             <CircularProgress size="small"/>
                         </div>
@@ -667,7 +683,10 @@ export function EntityCollectionListView<M extends Record<string, unknown> = Rec
                     {!dataLoading && noMoreToLoad && data.length > 0 && (
                         <div
                             className="flex items-center justify-center py-2 dark:bg-surface-900"
-                            style={{ position: "absolute", top: totalHeight, left: 0, right: 0 }}
+                            style={{ position: "absolute",
+top: totalHeight,
+left: 0,
+right: 0 }}
                         >
                             <Typography variant="caption" color="secondary">
                                 All {data.length} entries loaded
@@ -761,7 +780,7 @@ const ListRow = React.memo(function ListRow<M extends Record<string, unknown>>({
     return (
         <div
             className={cls(
-                "flex items-center gap-4 cursor-pointer group transition-colors duration-200 relative h-full",
+                "@container flex items-center gap-4 cursor-pointer group transition-colors duration-200 relative h-full",
                 rowClasses,
                 isActive
                     ? "bg-surface-accent-100 dark:bg-surface-accent-950 hover:bg-surface-accent-200 dark:hover:bg-surface-accent-950"
@@ -812,7 +831,7 @@ const ListRow = React.memo(function ListRow<M extends Record<string, unknown>>({
             )}
 
             {/* PRIMARY slot → Title + subtitle + byline */}
-            <div className={cls("min-w-[180px] overflow-hidden", useColumnMode ? "flex-1" : "flex-1")}>
+            <div className={cls("min-w-0 overflow-hidden", useColumnMode ? "flex-1" : "flex-1")}>
                 <div className="truncate">
                     {slots.title?.value !== undefined ? (
                         <Typography component="div" variant="body2" className="font-semibold text-surface-900 dark:text-surface-50 truncate transition-colors group-hover:text-primary-600 dark:group-hover:text-primary-400">
@@ -821,6 +840,7 @@ const ListRow = React.memo(function ListRow<M extends Record<string, unknown>>({
                                 value={slots.title.value}
                                 property={slots.title.property}
                                 size="small"
+                                textOnly={true}
                             />
                         </Typography>
                     ) : (
@@ -830,22 +850,24 @@ const ListRow = React.memo(function ListRow<M extends Record<string, unknown>>({
                     )}
                 </div>
 
-                {/* SUBTITLE slot — always plain truncated text */}
+                {/* SUBTITLE slot */}
                 {slots.subtitle && (
                     <div className="truncate mt-0.5">
-                        <Typography variant="caption" className="text-surface-500 dark:text-surface-400 truncate">
-                            {typeof slots.subtitle.value === "string"
-                                ? slots.subtitle.value
-                                : slots.subtitle.value != null
-                                    ? String(slots.subtitle.value)
-                                    : "—"}
+                        <Typography variant="caption" component="div" className="text-surface-500 dark:text-surface-400 truncate">
+                            <PropertyPreview
+                                propertyKey={slots.subtitle.propertyKey}
+                                value={slots.subtitle.value}
+                                property={slots.subtitle.property}
+                                size="small"
+                                textOnly={true}
+                            />
                         </Typography>
                     </div>
                 )}
 
                 {/* RELATION CHIPS slot — compact chips for all relations */}
                 {!useColumnMode && slots.relations.length > 0 && (
-                    <div className="flex items-center gap-1 mt-1 overflow-hidden max-w-full">
+                    <div className="flex items-center gap-1 mt-1 overflow-hidden max-w-full @max-[350px]:hidden">
                         {slots.relations.map((rel) => (
                             rel.items.map((item) => (
                                 <Chip
@@ -920,9 +942,9 @@ const ListRow = React.memo(function ListRow<M extends Record<string, unknown>>({
             ) : (
                 /* ── SLOT MODE (editorial scanner layout) ── */
                 <div className="flex items-center gap-4 flex-shrink-0 ml-auto">
-                    {/* STATUS slot */}
+                    {/* STATUS slot — hidden when row is narrow */}
                     {slots.status && (
-                        <div className="flex-shrink-0">
+                        <div className="flex-shrink-0 @max-[400px]:hidden">
                             <PropertyPreview
                                 propertyKey={slots.status.propertyKey}
                                 value={slots.status.value}
@@ -934,7 +956,7 @@ const ListRow = React.memo(function ListRow<M extends Record<string, unknown>>({
 
                     {/* DATE slot */}
                     {slots.date && (
-                        <div className="flex-shrink-0 text-right w-[80px]">
+                        <div className="flex-shrink-0 text-right w-[80px] @max-[500px]:hidden">
                             <Typography variant="caption" className="whitespace-nowrap text-surface-400 dark:text-surface-500 font-medium">
                                 {slots.date.formatted ?? "—"}
                             </Typography>