feat: semantic status colors, collapsible RelatedList, and DataTable header nowrap

- Expand PRIORITY_COLOR_MAP to SEMANTIC_COLOR_MAP with common status values
  (paid→green, pending→yellow, shipped→blue, draft→gray, cancelled→red, etc.)
- Add whitespace-nowrap truncate to DataTable header text for responsive design
- Add collapsible/defaultCollapsed props to RelatedList component
- Add tests for semantic color auto-detection and collapsible behavior

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

packages/components/src/renderers/complex/data-table.tsx

@@ -796,7 +796,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                         {col.headerIcon && (
                           <span className="text-muted-foreground flex-shrink-0">{col.headerIcon}</span>
                         )}
-                        <span className="text-xs font-normal text-muted-foreground">{col.header}</span>
+                        <span className="text-xs font-normal text-muted-foreground whitespace-nowrap truncate">{col.header}</span>
                         {sortable && col.sortable !== false && getSortIcon(col.accessorKey)}
                       </div>
                       {resizableColumns && col.resizable !== false && (

packages/fields/src/__tests__/cell-renderers.test.tsx

@@ -205,6 +205,76 @@ describe('SelectCellRenderer', () => {
     expect(container.querySelector('[class*="bg-gray-100"]')).toBeInTheDocument();
   });
 
+  it('should auto-detect status semantic colors (Paid → green)', () => {
+    const { container } = render(
+      <SelectCellRenderer
+        value="Paid"
+        field={{ name: 'status', type: 'select', options: [] } as any}
+      />
+    );
+    expect(container.querySelector('[class*="bg-green-100"]')).toBeInTheDocument();
+  });
+
+  it('should auto-detect status semantic colors (Pending → yellow)', () => {
+    const { container } = render(
+      <SelectCellRenderer
+        value="Pending"
+        field={{ name: 'status', type: 'select', options: [] } as any}
+      />
+    );
+    expect(container.querySelector('[class*="bg-yellow-100"]')).toBeInTheDocument();
+  });
+
+  it('should auto-detect status semantic colors (Shipped → blue)', () => {
+    const { container } = render(
+      <SelectCellRenderer
+        value="Shipped"
+        field={{ name: 'status', type: 'select', options: [] } as any}
+      />
+    );
+    expect(container.querySelector('[class*="bg-blue-100"]')).toBeInTheDocument();
+  });
+
+  it('should auto-detect status semantic colors (Draft → gray)', () => {
+    const { container } = render(
+      <SelectCellRenderer
+        value="Draft"
+        field={{ name: 'status', type: 'select', options: [] } as any}
+      />
+    );
+    expect(container.querySelector('[class*="bg-gray-100"]')).toBeInTheDocument();
+  });
+
+  it('should auto-detect status semantic colors (Cancelled → red)', () => {
+    const { container } = render(
+      <SelectCellRenderer
+        value="Cancelled"
+        field={{ name: 'status', type: 'select', options: [] } as any}
+      />
+    );
+    expect(container.querySelector('[class*="bg-red-100"]')).toBeInTheDocument();
+  });
+
+  it('should auto-detect status semantic colors (Delivered → purple)', () => {
+    const { container } = render(
+      <SelectCellRenderer
+        value="Delivered"
+        field={{ name: 'status', type: 'select', options: [] } as any}
+      />
+    );
+    expect(container.querySelector('[class*="bg-purple-100"]')).toBeInTheDocument();
+  });
+
+  it('should auto-detect status semantic colors with snake_case (in_progress → blue)', () => {
+    const { container } = render(
+      <SelectCellRenderer
+        value="in_progress"
+        field={{ name: 'status', type: 'select', options: [] } as any}
+      />
+    );
+    expect(container.querySelector('[class*="bg-blue-100"]')).toBeInTheDocument();
+  });
+
   it('should render dash for null/empty value', () => {
     render(
       <SelectCellRenderer

packages/fields/src/index.tsx

@@ -368,15 +368,41 @@ export function DateTimeCellRenderer({ value }: CellRendererProps): React.ReactE
   );
 }
 
-// Priority semantic color mapping (auto-detect from value text)
-const PRIORITY_COLOR_MAP: Record<string, string> = {
+// Semantic color mapping (auto-detect from value text for priority & status fields)
+const SEMANTIC_COLOR_MAP: Record<string, string> = {
+  // Priority values
   critical: 'red',
   urgent: 'red',
   high: 'orange',
   medium: 'yellow',
   normal: 'blue',
   low: 'gray',
   none: 'gray',
+  // Status values
+  paid: 'green',
+  completed: 'green',
+  done: 'green',
+  active: 'green',
+  approved: 'green',
+  resolved: 'green',
+  pending: 'yellow',
+  waiting: 'yellow',
+  on_hold: 'yellow',
+  shipped: 'blue',
+  in_progress: 'blue',
+  open: 'blue',
+  processing: 'blue',
+  draft: 'gray',
+  new: 'gray',
+  inactive: 'gray',
+  closed: 'gray',
+  cancelled: 'red',
+  canceled: 'red',
+  rejected: 'red',
+  failed: 'red',
+  overdue: 'red',
+  delivered: 'purple',
+  archived: 'indigo',
 };
 
 // Color to Tailwind class mapping for custom Badge styling
@@ -394,7 +420,7 @@ const BADGE_COLOR_MAP: Record<string, string> = {
 
 function getBadgeColorClasses(color?: string, val?: string): string {
   const resolvedColor = color
-    || (val ? PRIORITY_COLOR_MAP[String(val).toLowerCase()] : undefined);
+    || (val ? SEMANTIC_COLOR_MAP[String(val).toLowerCase().replace(/[\s-]/g, '_')] : undefined);
   return BADGE_COLOR_MAP[resolvedColor || ''] || 'bg-muted text-muted-foreground border-border';
 }
 

packages/plugin-detail/src/RelatedList.tsx

@@ -24,6 +24,8 @@ import {
   ChevronLeft,
   ChevronRight,
   ArrowUpDown,
+  ChevronDown,
+  ChevronUp,
 } from 'lucide-react';
 import type { DataSource, FieldMetadata } from '@object-ui/types';
 import { getCellRenderer } from '@object-ui/fields';
@@ -55,6 +57,10 @@ export interface RelatedListProps {
   sortable?: boolean;
   /** Enable text filtering */
   filterable?: boolean;
+  /** Whether the card is collapsible */
+  collapsible?: boolean;
+  /** Whether the card starts collapsed (requires collapsible=true) */
+  defaultCollapsed?: boolean;
 }
 
 export const RelatedList: React.FC<RelatedListProps> = ({
@@ -74,6 +80,8 @@ export const RelatedList: React.FC<RelatedListProps> = ({
   pageSize,
   sortable = false,
   filterable = false,
+  collapsible = false,
+  defaultCollapsed = false,
 }) => {
   const [relatedData, setRelatedData] = React.useState(data);
   const [loading, setLoading] = React.useState(false);
@@ -82,6 +90,7 @@ export const RelatedList: React.FC<RelatedListProps> = ({
   const [sortDirection, setSortDirection] = React.useState<'asc' | 'desc'>('asc');
   const [filterText, setFilterText] = React.useState('');
   const [objectSchema, setObjectSchema] = React.useState<any>(null);
+  const [collapsed, setCollapsed] = React.useState(defaultCollapsed);
   const { t } = useDetailTranslation();
   const { fieldLabel: resolveFieldLabel } = useSafeFieldLabel();
 
@@ -253,31 +262,36 @@ export const RelatedList: React.FC<RelatedListProps> = ({
 
   return (
     <Card className={className}>
-      <CardHeader>
+      <CardHeader className={collapsible ? 'cursor-pointer select-none' : undefined} onClick={collapsible ? () => setCollapsed((c) => !c) : undefined}>
         <CardTitle className="flex items-center justify-between">
           <div className="flex items-center gap-2">
+            {collapsible && (
+              collapsed
+                ? <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                : <ChevronDown className="h-4 w-4 text-muted-foreground" />
+            )}
             <span>{title}</span>
             <span className="text-sm font-normal text-muted-foreground">
               {recordCountText}
             </span>
           </div>
           <div className="flex items-center gap-1">
             {onNew && (
-              <Button variant="ghost" size="sm" onClick={onNew} className="gap-1 h-7 text-xs">
+              <Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); onNew(); }} className="gap-1 h-7 text-xs">
                 <Plus className="h-3.5 w-3.5" />
                 {t('detail.new')}
               </Button>
             )}
             {onViewAll && (
-              <Button variant="ghost" size="sm" onClick={onViewAll} className="gap-1 h-7 text-xs">
+              <Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); onViewAll(); }} className="gap-1 h-7 text-xs">
                 {t('detail.viewAll')}
                 <ExternalLink className="h-3 w-3" />
               </Button>
             )}
           </div>
         </CardTitle>
       </CardHeader>
-      <CardContent>
+      {!collapsed && <CardContent>
         {/* Filter bar */}
         {filterable && relatedData.length > 0 && (
           <div className="mb-3">
@@ -394,7 +408,7 @@ export const RelatedList: React.FC<RelatedListProps> = ({
             </Button>
           </div>
         )}
-      </CardContent>
+      </CardContent>}
     </Card>
   );
 };

packages/plugin-detail/src/__tests__/RelatedList.test.tsx

@@ -121,4 +121,40 @@ describe('RelatedList', () => {
 
     expect(mockDataSource.getObjectSchema).not.toHaveBeenCalled();
   });
+
+  it('should render collapsed state when collapsible and defaultCollapsed are true', () => {
+    const data = [{ id: 1, name: 'Alice' }];
+    render(
+      <RelatedList title="Contacts" type="table" data={data} collapsible defaultCollapsed />,
+    );
+    expect(screen.getByText('Contacts')).toBeInTheDocument();
+    // Content should be hidden when collapsed
+    expect(screen.queryByText('Alice')).not.toBeInTheDocument();
+  });
+
+  it('should expand collapsed card when header is clicked', () => {
+    render(
+      <RelatedList title="Contacts" type="table" data={[]} collapsible defaultCollapsed />,
+    );
+    // Initially collapsed - content should be hidden
+    expect(screen.queryByText('No related records found')).not.toBeInTheDocument();
+    // Click the header to expand
+    fireEvent.click(screen.getByText('Contacts'));
+    // Content should now be visible
+    expect(screen.getByText('No related records found')).toBeInTheDocument();
+  });
+
+  it('should show content by default when collapsible is true but defaultCollapsed is false', () => {
+    render(
+      <RelatedList title="Contacts" type="table" data={[]} collapsible />,
+    );
+    expect(screen.getByText('No related records found')).toBeInTheDocument();
+  });
+
+  it('should show content when collapsible is false (default)', () => {
+    render(
+      <RelatedList title="Contacts" type="table" data={[]} />,
+    );
+    expect(screen.getByText('No related records found')).toBeInTheDocument();
+  });
 });