@object-ui/plugin-grid 3.3.0 → 3.3.2

package/src/ObjectGrid.tsx

@@ -1,1598 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * ObjectGrid Component
- * 
- * A specialized grid component built on top of data-table.
- * Auto-generates columns from ObjectQL schema with type-aware rendering.
- * Implements the grid view type from @objectstack/spec view.zod ListView schema.
- * 
- * Features:
- * - Traditional table/grid with CRUD operations
- * - Search, filters, pagination
- * - Column resizing, sorting
- * - Row selection
- * - Inline editing support
- */
-
-import React, { useEffect, useState, useCallback, useMemo } from 'react';
-import type { ObjectGridSchema, DataSource, ListColumn, ViewData } from '@object-ui/types';
-import type { I18nLabel } from '@objectstack/spec/ui';
-import { SchemaRenderer, useDataScope, useNavigationOverlay, useAction, useObjectTranslation, useSafeFieldLabel } from '@object-ui/react';
-import { getCellRenderer, formatCurrency, formatCompactCurrency, formatDate, formatPercent, humanizeLabel } from '@object-ui/fields';
-import {
-  Badge, Button, NavigationOverlay,
-  Popover, PopoverContent, PopoverTrigger,
-} from '@object-ui/components';
-import { usePullToRefresh } from '@object-ui/mobile';
-import { evaluatePlainCondition, buildExpandFields } from '@object-ui/core';
-import { ChevronRight, ChevronDown, Download, Rows2, Rows3, Rows4, AlignJustify, Type, Hash, Calendar, CheckSquare, User, Tag, Clock } from 'lucide-react';
-import { useRowColor } from './useRowColor';
-import { useGroupedData } from './useGroupedData';
-import { GroupRow } from './GroupRow';
-import { useColumnSummary } from './useColumnSummary';
-import { RowActionMenu, formatActionLabel } from './components/RowActionMenu';
-import { BulkActionBar } from './components/BulkActionBar';
-
-// Default English fallback translations for the grid
-const GRID_DEFAULT_TRANSLATIONS: Record<string, string> = {
-  'grid.actions': 'Actions',
-  'grid.edit': 'Edit',
-  'grid.delete': 'Delete',
-  'grid.export': 'Export',
-  'grid.exportAs': 'Export as {{format}}',
-  'grid.loading': 'Loading grid...',
-  'grid.errorLoading': 'Error loading grid',
-  'grid.pullToRefresh': 'Pull to refresh',
-  'grid.refreshing': 'Refreshing…',
-  'grid.openRecord': 'Open record',
-};
-
-/**
- * Safe wrapper for useObjectTranslation that falls back to English defaults
- * when I18nProvider is not available (e.g., standalone usage).
- */
-function useGridTranslation() {
-  try {
-    const result = useObjectTranslation();
-    const testValue = result.t('grid.actions');
-    if (testValue === 'grid.actions') {
-      return {
-        t: (key: string, options?: Record<string, unknown>) => {
-          let value = GRID_DEFAULT_TRANSLATIONS[key] || key;
-          if (options) {
-            for (const [k, v] of Object.entries(options)) {
-              value = value.replace(`{{${k}}}`, String(v));
-            }
-          }
-          return value;
-        },
-      };
-    }
-    return { t: result.t };
-  } catch {
-    return {
-      t: (key: string, options?: Record<string, unknown>) => {
-        let value = GRID_DEFAULT_TRANSLATIONS[key] || key;
-        if (options) {
-          for (const [k, v] of Object.entries(options)) {
-            value = value.replace(`{{${k}}}`, String(v));
-          }
-        }
-        return value;
-      },
-    };
-  }
-}
-
-/** Resolve an I18nLabel (string) to a plain string. */
-function resolveColumnLabel(label: string | I18nLabel | undefined): string | undefined {
-  if (label == null) return undefined;
-  return typeof label === 'string' ? label : undefined;
-}
-
-export interface ObjectGridProps {
-  schema: ObjectGridSchema;
-  dataSource?: DataSource;
-  className?: string;
-  onRowClick?: (record: any) => void;
-  onEdit?: (record: any) => void;
-  onDelete?: (record: any) => void;
-  onBulkDelete?: (records: any[]) => void;
-  onCellChange?: (rowIndex: number, columnKey: string, newValue: any, row: any) => void;
-  onRowSave?: (rowIndex: number, changes: Record<string, any>, row: any) => void | Promise<void>;
-  onBatchSave?: (changes: Array<{ rowIndex: number; changes: Record<string, any>; row: any }>) => void | Promise<void>;
-  onRowSelect?: (selectedRows: any[]) => void;
-  onAddRecord?: () => void;
-}
-
-/**
- * Helper to get data configuration from schema
- * Handles both new ViewData format and legacy inline data
- */
-function getDataConfig(schema: ObjectGridSchema): ViewData | null {
-  // New format: explicit data configuration
-  if (schema.data) {
-    // Check if data is an array (shorthand format) or already a ViewData object
-    if (Array.isArray(schema.data)) {
-      // Convert array shorthand to proper ViewData format
-      return {
-        provider: 'value',
-        items: schema.data,
-      };
-    }
-    // Already in ViewData format
-    return schema.data;
-  }
-  
-  // Legacy format: staticData field
-  if (schema.staticData) {
-    return {
-      provider: 'value',
-      items: schema.staticData,
-    };
-  }
-  
-  // Default: use object provider with objectName
-  if (schema.objectName) {
-    return {
-      provider: 'object',
-      object: schema.objectName,
-    };
-  }
-  
-  return null;
-}
-
-/**
- * Helper to normalize columns configuration
- * Handles both string[] and ListColumn[] formats
- */
-function normalizeColumns(
-  columns: string[] | ListColumn[] | undefined
-): ListColumn[] | string[] | undefined {
-  if (!columns || columns.length === 0) return undefined;
-  
-  // Already in ListColumn format - check for object type with optional chaining
-  if (typeof columns[0] === 'object' && columns[0] !== null) {
-    return columns as ListColumn[];
-  }
-  
-  // String array format
-  return columns as string[];
-}
-
-export const ObjectGrid: React.FC<ObjectGridProps> = ({
-  schema,
-  dataSource,
-  onEdit,
-  onDelete,
-  onRowSelect,
-  onRowClick,
-  onCellChange,
-  onRowSave,
-  onBatchSave,
-  onAddRecord,
-  ...rest
-}) => {
-  const [data, setData] = useState<any[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<Error | null>(null);
-  const { t } = useGridTranslation();
-  const { fieldLabel: resolveFieldLabel } = useSafeFieldLabel();
-  const [objectSchema, setObjectSchema] = useState<any>(null);
-  const [useCardView, setUseCardView] = useState(false);
-  const [refreshKey, setRefreshKey] = useState(0);
-  const [showExport, setShowExport] = useState(false);
-  const [rowHeightMode, setRowHeightMode] = useState<'compact' | 'short' | 'medium' | 'tall' | 'extra_tall'>(schema.rowHeight ?? 'compact');
-  const [selectedRows, setSelectedRows] = useState<any[]>([]);
-
-  // Column state persistence (order and widths)
-  const columnStorageKey = React.useMemo(() => {
-    return schema.id
-      ? `grid-columns-${schema.objectName}-${schema.id}`
-      : `grid-columns-${schema.objectName}`;
-  }, [schema.objectName, schema.id]);
-
-  const [columnState, setColumnState] = useState<{
-    order?: string[];
-    widths?: Record<string, number>;
-  }>(() => {
-    try {
-      const saved = localStorage.getItem(columnStorageKey);
-      return saved ? JSON.parse(saved) : {};
-    } catch {
-      return {};
-    }
-  });
-
-  const saveColumnState = useCallback((state: typeof columnState) => {
-    setColumnState(state);
-    try {
-      localStorage.setItem(columnStorageKey, JSON.stringify(state));
-    } catch (e) {
-      console.warn('Failed to persist column state:', e);
-    }
-  }, [columnStorageKey]);
-
-  const handlePullRefresh = useCallback(async () => {
-    setRefreshKey(k => k + 1);
-  }, []);
-
-  const { ref: pullRef, isRefreshing, pullDistance } = usePullToRefresh<HTMLDivElement>({
-    onRefresh: handlePullRefresh,
-    enabled: !!dataSource && !!schema.objectName,
-  });
-
-  useEffect(() => {
-    const checkWidth = () => setUseCardView(window.innerWidth < 480);
-    checkWidth();
-    window.addEventListener('resize', checkWidth);
-    return () => window.removeEventListener('resize', checkWidth);
-  }, []);
-
-  // Check if data is passed directly (from ListView)
-  const passedData = (rest as any).data;
-
-  // Resolve bound data if 'bind' property exists
-  const boundData = useDataScope(schema.bind);
-
-  // Get data configuration (supports both new and legacy formats)
-  const rawDataConfig = getDataConfig(schema);
-  // Memoize dataConfig using deep comparison to prevent infinite loops
-  const dataConfig = React.useMemo(() => {
-    // If we have passed data (highest priority), treat it as value provider
-    if (passedData && Array.isArray(passedData)) {
-        return {
-            provider: 'value',
-            items: passedData
-        };
-    }
-
-    // If we have bound data, it takes precedence as inline value
-    if (boundData && Array.isArray(boundData)) {
-        return {
-            provider: 'value',
-            items: boundData
-        };
-    }
-    return rawDataConfig;
-  }, [JSON.stringify(rawDataConfig), boundData, passedData]);
-  
-  const hasInlineData = dataConfig?.provider === 'value';
-
-  // Extract stable primitive/reference-stable values from schema for dependency arrays.
-  // This prevents infinite re-render loops when schema is a new object on each render
-  // (e.g. when rendered through SchemaRenderer which creates a fresh evaluatedSchema).
-  const objectName = dataConfig?.provider === 'object' && dataConfig && 'object' in dataConfig
-    ? (dataConfig as any).object
-    : schema.objectName;
-  const schemaFields = schema.fields;
-  const schemaColumns = schema.columns;
-  const schemaFilter = schema.filter;
-  const schemaSort = schema.sort;
-  const schemaPagination = schema.pagination;
-  const schemaPageSize = schema.pageSize;
-
-  // --- Inline data effect (synchronous, no fetch needed) ---
-  useEffect(() => {
-    if (hasInlineData && dataConfig?.provider === 'value') {
-       // Only update if data is different to avoid infinite loop
-       setData(prev => {
-         const newItems = dataConfig.items as any[];
-         if (JSON.stringify(prev) !== JSON.stringify(newItems)) {
-            return newItems;
-         }
-         return prev;
-       });
-       setLoading(false);
-    }
-  }, [hasInlineData, dataConfig]);
-
-  // --- Inline data: still fetch objectSchema for type-aware rendering ---
-  // When data is inline (provider: 'value'), we skip the data fetch but still need
-  // the object schema to resolve field types (lookup, select, currency, etc.) and
-  // enable proper CellRenderer selection.
-  useEffect(() => {
-    if (!hasInlineData) return;
-    if (!objectName || !dataSource) return;
-
-    let cancelled = false;
-
-    const fetchSchema = async () => {
-      try {
-        const schemaData = await dataSource.getObjectSchema(objectName);
-        if (!cancelled) {
-          setObjectSchema(schemaData);
-        }
-      } catch (err) {
-        // Schema fetch failure for inline data is non-fatal; columns will
-        // still fall back to heuristic inference.
-        console.warn(`[ObjectGrid] Failed to fetch objectSchema for inline data (objectName: ${objectName}):`, err);
-      }
-    };
-
-    fetchSchema();
-
-    return () => { cancelled = true; };
-  }, [hasInlineData, objectName, dataSource]);
-
-  // --- Unified async data loading effect ---
-  // Combines schema fetch + data fetch into a single async flow with AbortController.
-  // This avoids the fragile "chained effects" pattern where Effect 1 sets objectSchema,
-  // triggering Effect 2 to call fetchData — a pattern prone to infinite loops when
-  // fetchData's reference is unstable.
-  useEffect(() => {
-    if (hasInlineData) return;
-
-    let cancelled = false;
-
-    const loadSchemaAndData = async () => {
-      setLoading(true);
-      setError(null);
-      try {
-        // --- Step 1: Resolve object schema ---
-        let resolvedSchema: any = null;
-        const cols = normalizeColumns(schemaColumns) || schemaFields;
-
-        if (objectName && dataSource) {
-          // Always fetch full schema for field type metadata (enables rich type-aware rendering)
-          const schemaData = await dataSource.getObjectSchema(objectName);
-          if (cancelled) return;
-          resolvedSchema = schemaData;
-        } else if (cols && objectName) {
-          // Fallback: minimal schema stub when no dataSource available
-          resolvedSchema = { name: objectName, fields: {} };
-        } else if (!objectName) {
-          throw new Error('Object name required for data fetching');
-        } else {
-          throw new Error('DataSource required');
-        }
-
-        if (!cancelled) {
-          setObjectSchema(resolvedSchema);
-        }
-
-        // --- Step 2: Fetch data ---
-        if (dataSource && objectName) {
-          const getSelectFields = () => {
-            if (schemaFields) return schemaFields;
-            if (schemaColumns && Array.isArray(schemaColumns)) {
-              return schemaColumns.map((c: any) => typeof c === 'string' ? c : c.field);
-            }
-            return undefined;
-          };
-
-          const params: any = {
-            $select: getSelectFields(),
-            $top: (schemaPagination as any)?.pageSize || schemaPageSize || 50,
-          };
-
-          // Support new filter format
-          if (schemaFilter && Array.isArray(schemaFilter)) {
-            params.$filter = schemaFilter;
-          } else if (schema.defaultFilters) {
-            // Legacy support
-            params.$filter = schema.defaultFilters;
-          }
-
-          // Support new sort format
-          if (schemaSort) {
-            if (typeof schemaSort === 'string') {
-              params.$orderby = schemaSort;
-            } else if (Array.isArray(schemaSort)) {
-              params.$orderby = schemaSort
-                .map((s: any) => `${s.field} ${s.order}`)
-                .join(', ');
-            }
-          } else if (schema.defaultSort) {
-            // Legacy support
-            params.$orderby = `${(schema.defaultSort as any).field} ${(schema.defaultSort as any).order}`;
-          }
-
-          // Auto-inject $expand for lookup/master_detail fields
-          const expand = buildExpandFields(resolvedSchema?.fields, schemaColumns ?? schemaFields);
-          if (expand.length > 0) {
-            params.$expand = expand;
-          }
-
-          const result = await dataSource.find(objectName, params);
-          if (cancelled) return;
-          setData(result.data || []);
-        }
-      } catch (err) {
-        if (!cancelled) {
-          setError(err as Error);
-        }
-      } finally {
-        if (!cancelled) {
-          setLoading(false);
-        }
-      }
-    };
-
-    loadSchemaAndData();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [objectName, schemaFields, schemaColumns, schemaFilter, schemaSort, schemaPagination, schemaPageSize, dataSource, hasInlineData, dataConfig, refreshKey]);
-
-  // --- NavigationConfig support ---
-  // Must be called before any early returns to satisfy React hooks rules
-  const navigation = useNavigationOverlay({
-    navigation: schema.navigation,
-    objectName: schema.objectName,
-    onNavigate: schema.onNavigate,
-    onRowClick,
-  });
-
-  // --- Action support for action columns ---
-  const { execute: executeAction } = useAction();
-
-  // --- Row color support ---
-  const getRowClassName = useRowColor(schema.rowColor);
-
-  // --- Conditional formatting support ---
-  const getRowStyle = useCallback((row: Record<string, unknown>): React.CSSProperties | undefined => {
-    const rules = schema.conditionalFormatting;
-    if (!rules || rules.length === 0) return undefined;
-    for (const rule of rules) {
-      let match = false;
-      const expression =
-        ('condition' in rule ? (rule as any).condition : undefined)
-        || ('expression' in rule ? (rule as any).expression : undefined)
-        || undefined;
-      if (expression) {
-        match = evaluatePlainCondition(expression, row as Record<string, any>);
-      } else if ('field' in rule && 'operator' in rule && (rule as any).field && (rule as any).operator) {
-        const r = rule as any;
-        const fieldValue = row[r.field];
-        switch (r.operator) {
-          case 'equals': match = fieldValue === r.value; break;
-          case 'not_equals': match = fieldValue !== r.value; break;
-          case 'contains': match = typeof fieldValue === 'string' && typeof r.value === 'string' && fieldValue.includes(r.value); break;
-          case 'greater_than': match = typeof fieldValue === 'number' && typeof r.value === 'number' && fieldValue > r.value; break;
-          case 'less_than': match = typeof fieldValue === 'number' && typeof r.value === 'number' && fieldValue < r.value; break;
-          case 'in': match = Array.isArray(r.value) && r.value.includes(fieldValue); break;
-        }
-      }
-      if (match) {
-        const style: React.CSSProperties = {};
-        if ('style' in rule && (rule as any).style) Object.assign(style, (rule as any).style);
-        if ('backgroundColor' in rule && (rule as any).backgroundColor) style.backgroundColor = (rule as any).backgroundColor;
-        if ('textColor' in rule && (rule as any).textColor) style.color = (rule as any).textColor;
-        if ('borderColor' in rule && (rule as any).borderColor) style.borderColor = (rule as any).borderColor;
-        return style;
-      }
-    }
-    return undefined;
-  }, [schema.conditionalFormatting]);
-
-  // --- Grouping support ---
-  const { groups, isGrouped, toggleGroup } = useGroupedData(schema.grouping, data);
-
-  // --- Column summary support ---
-  const summaryColumns = React.useMemo(() => {
-    const cols = normalizeColumns(schema.columns);
-    if (cols && cols.length > 0 && typeof cols[0] === 'object') {
-      return cols as ListColumn[];
-    }
-    return undefined;
-  }, [schema.columns]);
-  const { summaries, hasSummary } = useColumnSummary(summaryColumns, data);
-
-  const generateColumns = useCallback(() => {
-    // Map field type to column header icon (Airtable-style)
-    const getTypeIcon = (fieldType: string | null): React.ReactNode => {
-      if (!fieldType) return <Type className="h-3.5 w-3.5" />;
-      const iconMap: Record<string, React.ReactNode> = {
-        text: <Type className="h-3.5 w-3.5" />,
-        number: <Hash className="h-3.5 w-3.5" />,
-        currency: <Hash className="h-3.5 w-3.5" />,
-        percent: <Hash className="h-3.5 w-3.5" />,
-        date: <Calendar className="h-3.5 w-3.5" />,
-        datetime: <Clock className="h-3.5 w-3.5" />,
-        boolean: <CheckSquare className="h-3.5 w-3.5" />,
-        user: <User className="h-3.5 w-3.5" />,
-        select: <Tag className="h-3.5 w-3.5" />,
-      };
-      return iconMap[fieldType] || <Type className="h-3.5 w-3.5" />;
-    };
-
-    // Auto-infer column type from field name and data values (Airtable-style)
-    const inferColumnType = (col: ListColumn): string | null => {
-      if (col.type) return col.type; // Explicit type takes priority
-
-      const fieldLower = col.field.toLowerCase();
-
-      // Infer boolean fields
-      const booleanFields = ['completed', 'is_completed', 'done', 'active', 'enabled', 'archived'];
-      if (booleanFields.some(f => fieldLower === f || fieldLower === `is_${f}`)) {
-        return 'boolean';
-      }
-
-      // Infer datetime fields (fields with time component: created_time, modified_time, *_at patterns)
-      const datetimePatterns = ['created_time', 'modified_time', 'updated_time', 'created_at', 'updated_at', 'modified_at', 'last_login', 'logged_at'];
-      if (datetimePatterns.some(p => fieldLower === p || fieldLower.endsWith(`_${p}`))) {
-        return 'datetime';
-      }
-
-      // Infer date fields from name patterns
-      const datePatterns = ['date', 'due', 'created', 'updated', 'deadline', 'start', 'end', 'expires'];
-      if (datePatterns.some(p => fieldLower.includes(p))) {
-        // Verify with data: check if sample values look like dates
-        if (data.length > 0) {
-          const sample = data.find(row => row[col.field] != null)?.[col.field];
-          if (typeof sample === 'string' && !isNaN(Date.parse(sample))) {
-            return 'date';
-          }
-        }
-        return 'date';
-      }
-
-      // Infer percent fields from name patterns
-      const percentFields = ['probability', 'percent', 'percentage', 'completion', 'progress', 'rate'];
-      if (percentFields.some(f => fieldLower.includes(f))) {
-        if (data.length > 0) {
-          const sample = data.find(row => row[col.field] != null)?.[col.field];
-          if (typeof sample === 'number') {
-            return 'percent';
-          }
-        }
-      }
-
-      // Infer select/badge fields (status, priority, category, etc.)
-      const selectFields = ['status', 'priority', 'category', 'stage', 'type', 'severity', 'level'];
-      if (selectFields.some(f => fieldLower.includes(f))) {
-        if (data.length > 0) {
-          const uniqueValues = new Set(data.map(row => row[col.field]).filter(Boolean));
-          if (uniqueValues.size > 0 && uniqueValues.size <= 10) {
-            return 'select';
-          }
-        }
-      }
-
-      // Infer user/assignee fields
-      const userFields = ['assignee', 'owner', 'author', 'reporter', 'creator', 'user'];
-      if (userFields.some(f => fieldLower.includes(f))) {
-        return 'user';
-      }
-
-      // Infer currency/amount fields
-      const currencyFields = ['amount', 'price', 'total', 'revenue', 'cost', 'budget', 'salary'];
-      if (currencyFields.some(f => fieldLower.includes(f))) {
-        if (data.length > 0) {
-          const sample = data.find(row => row[col.field] != null)?.[col.field];
-          if (typeof sample === 'number') {
-            return 'currency';
-          }
-        }
-      }
-
-      // Fallback: detect ISO date strings in data values (catch-all for unmatched field names)
-      if (data.length > 0) {
-        const sample = data.find(row => row[col.field] != null)?.[col.field];
-        if (typeof sample === 'string' && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/.test(sample)) {
-          return 'datetime';
-        }
-      }
-
-      return null;
-    };
-
-    // Use normalized columns (support both new and legacy)
-    const cols = normalizeColumns(schemaColumns);
-    
-    if (cols) {
-      // Check if columns are already in data-table format (have 'accessorKey')
-      // vs ListColumn format (have 'field')
-      if (cols.length > 0 && typeof cols[0] === 'object' && cols[0] !== null) {
-        const firstCol = cols[0] as any;
-        
-        // Already in data-table format - apply type inference for columns without custom cell renderers
-        if ('accessorKey' in firstCol) {
-          return (cols as any[]).map((col) => {
-            if (col.cell) return col; // already has custom renderer
-
-            const syntheticCol: ListColumn = { field: col.accessorKey, label: col.header, type: col.type };
-            const inferredType = inferColumnType(syntheticCol);
-            if (!inferredType) return col;
-
-            const CellRenderer = getCellRenderer(inferredType);
-            const fieldMeta: Record<string, any> = { name: col.accessorKey, type: inferredType };
-
-            if (inferredType === 'select') {
-              const uniqueValues = Array.from(new Set(data.map(row => row[col.accessorKey]).filter(Boolean)));
-              fieldMeta.options = uniqueValues.map((v: any) => ({ value: v, label: humanizeLabel(String(v)) }));
-            }
-
-            return {
-              ...col,
-              headerIcon: getTypeIcon(inferredType),
-              cell: (value: any) => <CellRenderer value={value} field={fieldMeta as any} />,
-            };
-          });
-        }
-        
-        // ListColumn format - convert to data-table format with full feature support
-        if ('field' in firstCol) {
-          return (cols as ListColumn[])
-            .filter((col) => col?.field && typeof col.field === 'string' && !col.hidden)
-            .map((col, colIndex) => {
-              const rawHeader = resolveColumnLabel(col.label) || col.field.charAt(0).toUpperCase() + col.field.slice(1).replace(/_/g, ' ');
-              const header = schema.objectName ? resolveFieldLabel(schema.objectName, col.field, rawHeader) : rawHeader;
-
-              // Build custom cell renderer based on column configuration
-              let cellRenderer: ((value: any, row: any) => React.ReactNode) | undefined;
-
-              // Type-based cell renderer: explicit col type > objectDef type > heuristic inference
-              const objectDefField = objectSchema?.fields?.[col.field];
-              const inferredType = col.type || objectDefField?.type || inferColumnType({ field: col.field }) || null;
-              const CellRenderer = inferredType ? getCellRenderer(inferredType) : null;
-
-              // Build field metadata for cell renderers with objectDef enrichment
-              const fieldMeta: Record<string, any> = { name: col.field, type: inferredType || 'text' };
-              // Merge objectDef field properties (options with colors, currency, precision, etc.)
-              if (objectDefField) {
-                if (objectDefField.label) fieldMeta.label = objectDefField.label;
-                if (objectDefField.currency) fieldMeta.currency = objectDefField.currency;
-                if (objectDefField.precision !== undefined) fieldMeta.precision = objectDefField.precision;
-                if (objectDefField.format) fieldMeta.format = objectDefField.format;
-                if (objectDefField.options) fieldMeta.options = objectDefField.options;
-              }
-              // Auto-generate options from data for inferred select without existing options
-              if (inferredType === 'select' && !fieldMeta.options) {
-                const uniqueValues = Array.from(new Set(data.map(row => row[col.field]).filter(Boolean)));
-                fieldMeta.options = uniqueValues.map(v => ({ value: v, label: humanizeLabel(String(v)) }));
-              }
-              if ((col as any).options) {
-                fieldMeta.options = (col as any).options;
-              }
-
-              // Auto-link primary field (first column) to record detail (Airtable-style)
-              const isPrimaryField = colIndex === 0 && !col.link && !col.action;
-              const isLinked = col.link || isPrimaryField;
-
-              if ((col.link && col.action) || (isPrimaryField && col.action)) {
-                // Both link and action: link takes priority for navigation, action executes on secondary interaction
-                cellRenderer = (value: any, row: any) => {
-                  const displayContent = CellRenderer
-                    ? <CellRenderer value={value} field={fieldMeta as any} />
-                    : (value != null && value !== '' ? String(value) : <span className="text-muted-foreground/50 text-xs italic">—</span>);
-                  return (
-                    <button
-                      type="button"
-                      className="text-primary font-medium underline-offset-4 hover:underline cursor-pointer bg-transparent border-none p-0 text-left font-inherit"
-                      data-testid={isPrimaryField ? 'primary-field-link' : 'link-cell'}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        navigation.handleClick(row);
-                      }}
-                    >
-                      {displayContent}
-                    </button>
-                  );
-                };
-              } else if (isLinked) {
-                // Link column: clicking navigates to the record detail
-                cellRenderer = (value: any, row: any) => {
-                  const displayContent = CellRenderer
-                    ? <CellRenderer value={value} field={fieldMeta as any} />
-                    : (value != null && value !== '' ? String(value) : <span className="text-muted-foreground/50 text-xs italic">—</span>);
-                  return (
-                    <button
-                      type="button"
-                      className="text-primary font-medium underline-offset-4 hover:underline cursor-pointer bg-transparent border-none p-0 text-left font-inherit"
-                      data-testid={isPrimaryField ? 'primary-field-link' : 'link-cell'}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        navigation.handleClick(row);
-                      }}
-                    >
-                      {displayContent}
-                    </button>
-                  );
-                };
-              } else if (col.action) {
-                // Action column: render as action button
-                cellRenderer = (value: any, row: any) => {
-                  return (
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      className="h-7 text-xs"
-                      data-testid="action-cell"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        executeAction({
-                          type: col.action!,
-                          params: { record: row, field: col.field, value },
-                        });
-                      }}
-                    >
-                      {formatActionLabel(col.action!)}
-                    </Button>
-                  );
-                };
-              } else if (CellRenderer) {
-                // Type-only cell renderer (no link/action)
-                cellRenderer = (value: any) => (
-                  <CellRenderer value={value} field={fieldMeta as any} />
-                );
-              } else {
-                // Default renderer with empty value handling
-                cellRenderer = (value: any) => (
-                  value != null && value !== ''
-                    ? <span>{String(value)}</span>
-                    : <span className="text-muted-foreground/50 text-xs italic">—</span>
-                );
-              }
-
-              // Wrap with prefix compound cell renderer (Airtable-style: [Badge] Text in same cell)
-              const prefixConfig = (col as any).prefix;
-              if (prefixConfig?.field) {
-                const baseCellRenderer = cellRenderer;
-                const PrefixRenderer = prefixConfig.type === 'badge' ? getCellRenderer('select') : null;
-                cellRenderer = (value: any, row: any) => {
-                  const prefixValue = row[prefixConfig.field];
-                  const prefixEl = prefixValue != null && prefixValue !== ''
-                    ? PrefixRenderer
-                      ? <PrefixRenderer value={prefixValue} field={{ name: prefixConfig.field, type: 'select' } as any} />
-                      : <span className="text-muted-foreground text-xs mr-1.5">{String(prefixValue)}</span>
-                    : null;
-                  return (
-                    <span className="flex items-center gap-1.5">
-                      {prefixEl}
-                      {baseCellRenderer(value, row)}
-                    </span>
-                  );
-                };
-              }
-
-              // Auto-infer alignment from field type if not explicitly set
-              const numericTypes = ['number', 'currency', 'percent'];
-              const effectiveType = inferredType || col.type;
-              const inferredAlign = col.align || (effectiveType && numericTypes.includes(effectiveType) ? 'right' as const : undefined);
-
-              // Determine if column should be hidden on mobile
-              const isEssential = colIndex === 0 || (col as any).essential === true;
-
-              return {
-                header,
-                accessorKey: col.field,
-                headerIcon: getTypeIcon(inferredType),
-                ...(!isEssential && { className: 'hidden sm:table-cell' }),
-                ...(col.width && { width: col.width }),
-                ...(inferredAlign && { align: inferredAlign }),
-                sortable: col.sortable !== false,
-                ...(col.resizable !== undefined && { resizable: col.resizable }),
-                ...(col.wrap !== undefined && { wrap: col.wrap }),
-                ...(cellRenderer && { cell: cellRenderer }),
-                ...(col.pinned && { pinned: col.pinned }),
-              };
-            });
-        }
-      }
-      
-      // String array format - enrich with objectDef field metadata for type-aware rendering
-      return (cols as string[])
-        .filter((fieldName) => typeof fieldName === 'string' && fieldName.trim().length > 0)
-        .map((fieldName, colIndex) => {
-          const fieldDef = objectSchema?.fields?.[fieldName];
-          const rawFieldLabel = fieldDef?.label;
-          const rawHeader = rawFieldLabel || fieldName.charAt(0).toUpperCase() + fieldName.slice(1).replace(/_/g, ' ');
-          const header = schema.objectName ? resolveFieldLabel(schema.objectName, fieldName, rawHeader) : rawHeader;
-
-          // Resolve type: objectDef type > heuristic inference (consistent with ListColumn path)
-          const resolvedType = fieldDef?.type || inferColumnType({ field: fieldName }) || null;
-          const CellRenderer = resolvedType ? getCellRenderer(resolvedType) : null;
-
-          // Build field metadata with objectDef enrichment
-          const fieldMeta: Record<string, any> = { name: fieldName, type: resolvedType || 'text' };
-          if (fieldDef) {
-            if (fieldDef.label) fieldMeta.label = fieldDef.label;
-            if (fieldDef.currency) fieldMeta.currency = fieldDef.currency;
-            if (fieldDef.precision !== undefined) fieldMeta.precision = fieldDef.precision;
-            if (fieldDef.format) fieldMeta.format = fieldDef.format;
-            if (fieldDef.options) fieldMeta.options = fieldDef.options;
-          }
-          // Auto-generate select options from data when no options defined
-          if (resolvedType === 'select' && !fieldMeta.options) {
-            const uniqueValues = Array.from(new Set(data.map(row => row[fieldName]).filter(Boolean)));
-            fieldMeta.options = uniqueValues.map((v: any) => ({ value: v, label: humanizeLabel(String(v)) }));
-          }
-
-          const numericTypes = ['number', 'currency', 'percent'];
-          const inferredAlign = resolvedType && numericTypes.includes(resolvedType) ? 'right' as const : undefined;
-
-          // Auto-link primary field (first column) to record detail
-          const isPrimaryField = colIndex === 0;
-          let cellRenderer: ((value: any, row?: any) => React.ReactNode) | undefined;
-
-          if (isPrimaryField && CellRenderer) {
-            cellRenderer = (value: any, row: any) => {
-              const displayContent = <CellRenderer value={value} field={fieldMeta as any} />;
-              return (
-                <button
-                  type="button"
-                  className="text-primary font-medium underline-offset-4 hover:underline cursor-pointer bg-transparent border-none p-0 text-left font-inherit"
-                  data-testid="primary-field-link"
-                  onClick={(e) => { e.stopPropagation(); navigation.handleClick(row); }}
-                >
-                  {displayContent}
-                </button>
-              );
-            };
-          } else if (isPrimaryField) {
-            cellRenderer = (value: any, row: any) => (
-              <button
-                type="button"
-                className="text-primary font-medium underline-offset-4 hover:underline cursor-pointer bg-transparent border-none p-0 text-left font-inherit"
-                data-testid="primary-field-link"
-                onClick={(e) => { e.stopPropagation(); navigation.handleClick(row); }}
-              >
-                {value != null && value !== '' ? String(value) : <span className="text-muted-foreground/50 text-xs italic">—</span>}
-              </button>
-            );
-          } else if (CellRenderer) {
-            cellRenderer = (value: any) => <CellRenderer value={value} field={fieldMeta as any} />;
-          }
-
-          return {
-            header,
-            accessorKey: fieldName,
-            ...(resolvedType && { headerIcon: getTypeIcon(resolvedType) }),
-            ...(inferredAlign && { align: inferredAlign }),
-            ...(cellRenderer && { cell: cellRenderer }),
-            sortable: fieldDef?.sortable !== false,
-          };
-        });
-    }
-
-    // Legacy support: use 'fields' if columns not provided
-    if (hasInlineData) {
-      const inlineData = dataConfig?.provider === 'value' ? dataConfig.items as any[] : [];
-      if (inlineData.length > 0) {
-        const fieldsToShow = schemaFields || Object.keys(inlineData[0]);
-        return fieldsToShow.map((fieldName) => {
-          const fieldDef = objectSchema?.fields?.[fieldName];
-          const resolvedType = fieldDef?.type || inferColumnType({ field: fieldName }) || null;
-          const CellRenderer = resolvedType ? getCellRenderer(resolvedType) : null;
-          const header = fieldDef?.label || fieldName.charAt(0).toUpperCase() + fieldName.slice(1).replace(/_/g, ' ');
-
-          // Build field metadata with objectDef enrichment
-          const fieldMeta: Record<string, any> = { name: fieldName, type: resolvedType || 'text' };
-          if (fieldDef) {
-            if (fieldDef.label) fieldMeta.label = fieldDef.label;
-            if (fieldDef.currency) fieldMeta.currency = fieldDef.currency;
-            if (fieldDef.precision !== undefined) fieldMeta.precision = fieldDef.precision;
-            if (fieldDef.format) fieldMeta.format = fieldDef.format;
-            if (fieldDef.options) fieldMeta.options = fieldDef.options;
-          }
-          // Auto-generate select options from data when no options defined
-          if (resolvedType === 'select' && !fieldMeta.options) {
-            const uniqueValues = Array.from(new Set(data.map(row => row[fieldName]).filter(Boolean)));
-            fieldMeta.options = uniqueValues.map((v: any) => ({ value: v, label: humanizeLabel(String(v)) }));
-          }
-
-          const numericTypes = ['number', 'currency', 'percent'];
-          const inferredAlign = resolvedType && numericTypes.includes(resolvedType) ? 'right' as const : undefined;
-
-          return {
-            header,
-            accessorKey: fieldName,
-            ...(resolvedType && { headerIcon: getTypeIcon(resolvedType) }),
-            ...(inferredAlign && { align: inferredAlign }),
-            ...(CellRenderer && { cell: (value: any) => <CellRenderer value={value} field={fieldMeta as any} /> }),
-            sortable: fieldDef?.sortable !== false,
-          };
-        });
-      }
-    }
-
-    if (!objectSchema) return [];
-
-    const generatedColumns: any[] = [];
-    const fieldsToShow = schemaFields || Object.keys(objectSchema.fields || {});
-    
-    fieldsToShow.forEach((fieldName) => {
-      const field = objectSchema.fields?.[fieldName];
-      if (!field) return;
-
-      if (field.permissions && field.permissions.read === false) return;
-
-      const CellRenderer = getCellRenderer(field.type);
-      const numericTypes = ['number', 'currency', 'percent'];
-      generatedColumns.push({
-        header: schema.objectName ? resolveFieldLabel(schema.objectName, fieldName, field.label || fieldName) : field.label || fieldName,
-        accessorKey: fieldName,
-        ...(numericTypes.includes(field.type) && { align: 'right' }),
-        cell: (value: any) => <CellRenderer value={value} field={field} />,
-        sortable: field.sortable !== false,
-      });
-    });
-
-    return generatedColumns;
-  }, [objectSchema, schemaFields, schemaColumns, dataConfig, hasInlineData, navigation.handleClick, executeAction, data, resolveFieldLabel, schema.objectName]);
-
-  const handleExport = useCallback((format: 'csv' | 'xlsx' | 'json' | 'pdf') => {
-    const exportConfig = schema.exportOptions;
-    const maxRecords = exportConfig?.maxRecords || 0;
-    const includeHeaders = exportConfig?.includeHeaders !== false;
-    const prefix = exportConfig?.fileNamePrefix || schema.objectName || 'export';
-    const exportData = maxRecords > 0 ? data.slice(0, maxRecords) : data;
-
-    const downloadFile = (blob: Blob, filename: string) => {
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = filename;
-      a.click();
-      URL.revokeObjectURL(url);
-    };
-
-    const escapeCsvValue = (val: any): string => {
-      const str = val == null ? '' : String(val);
-      return str.includes(',') || str.includes('"') || str.includes('\n') || str.includes('\r')
-        ? `"${str.replace(/"/g, '""')}"`
-        : str;
-    };
-
-    if (format === 'csv') {
-      const cols = generateColumns().filter((c: any) => c.accessorKey !== '_actions');
-      const fields = cols.map((c: any) => c.accessorKey);
-      const headers = cols.map((c: any) => c.header);
-      const rows: string[] = [];
-      if (includeHeaders) {
-        rows.push(headers.join(','));
-      }
-      exportData.forEach(record => {
-        rows.push(fields.map((f: string) => escapeCsvValue(record[f])).join(','));
-      });
-      downloadFile(new Blob([rows.join('\n')], { type: 'text/csv;charset=utf-8;' }), `${prefix}.csv`);
-    } else if (format === 'json') {
-      downloadFile(new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' }), `${prefix}.json`);
-    }
-    setShowExport(false);
-  }, [data, schema.exportOptions, schema.objectName, generateColumns]);
-
-  if (error) {
-    return (
-      <div className="p-3 sm:p-4 border border-red-300 bg-red-50 rounded-md">
-        <h3 className="text-red-800 font-semibold">{t('grid.errorLoading')}</h3>
-        <p className="text-red-600 text-sm mt-1">{error.message}</p>
-      </div>
-    );
-  }
-
-  if (loading && data.length === 0) {
-    if (useCardView) {
-      return (
-        <div className="space-y-2 p-2">
-          {[1, 2, 3].map((i) => (
-            <div key={i} className="border rounded-lg p-3 bg-card animate-pulse">
-              <div className="h-5 bg-muted rounded w-3/4 mb-3" />
-              <div className="flex items-center justify-between mb-2">
-                <div className="h-4 bg-muted rounded w-1/4" />
-                <div className="h-5 bg-muted rounded-full w-20" />
-              </div>
-              <div className="h-3 bg-muted rounded w-1/3" />
-            </div>
-          ))}
-        </div>
-      );
-    }
-    return (
-      <div className="p-4 sm:p-8 text-center">
-        <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-foreground"></div>
-        <p className="mt-2 text-sm text-muted-foreground">{t('grid.loading')}</p>
-      </div>
-    );
-  }
-
-  const columns = generateColumns();
-
-  // Apply persisted column order and widths
-  let persistedColumns = [...columns];
-  
-  // Apply saved widths
-  if (columnState.widths) {
-    persistedColumns = persistedColumns.map((col: any) => {
-      const savedWidth = columnState.widths?.[col.accessorKey];
-      if (savedWidth) {
-        return { ...col, size: savedWidth };
-      }
-      return col;
-    });
-  }
-  
-  // Apply saved order
-  if (columnState.order && columnState.order.length > 0) {
-    const orderMap = new Map(columnState.order.map((key: string, i: number) => [key, i]));
-    persistedColumns.sort((a: any, b: any) => {
-      const orderA = orderMap.get(a.accessorKey) ?? Infinity;
-      const orderB = orderMap.get(b.accessorKey) ?? Infinity;
-      return orderA - orderB;
-    });
-  }
-
-  const operations = 'operations' in schema ? schema.operations : undefined;
-  const hasActions = operations && (operations.update || operations.delete);
-  const hasRowActions = schema.rowActions && schema.rowActions.length > 0;
-
-  const columnsWithActions = (hasActions || hasRowActions) ? [
-    ...persistedColumns,
-    {
-      header: t('grid.actions'),
-      accessorKey: '_actions',
-      cell: (_value: any, row: any) => (
-        <RowActionMenu
-          row={row}
-          rowActions={schema.rowActions}
-          canEdit={!!(operations?.update && onEdit)}
-          canDelete={!!(operations?.delete && onDelete)}
-          onEdit={onEdit}
-          onDelete={onDelete}
-          onAction={(action, r) => executeAction({ type: action, params: { record: r } })}
-        />
-      ),
-      sortable: false,
-    },
-  ] : persistedColumns;
-
-  // --- Pinned column reordering ---
-  // Reorder: pinned:'left' first, unpinned middle, pinned:'right' last
-  const pinnedLeftCols = columnsWithActions.filter((c: any) => c.pinned === 'left');
-  const pinnedRightCols = columnsWithActions.filter((c: any) => c.pinned === 'right');
-  const unpinnedCols = columnsWithActions.filter((c: any) => !c.pinned);
-  const hasPinnedColumns = pinnedLeftCols.length > 0 || pinnedRightCols.length > 0;
-  const rightPinnedClasses = 'sticky right-0 z-10 bg-background border-l border-border';
-  const orderedColumns = hasPinnedColumns
-    ? [
-        ...pinnedLeftCols,
-        ...unpinnedCols,
-        ...pinnedRightCols.map((col: any) => ({
-          ...col,
-          className: [col.className, rightPinnedClasses].filter(Boolean).join(' '),
-          cellClassName: [col.cellClassName, rightPinnedClasses].filter(Boolean).join(' '),
-        })),
-      ]
-    : columnsWithActions;
-
-  // Calculate frozenColumns: if pinned columns exist, use left-pinned count; otherwise use schema default
-  const effectiveFrozenColumns = hasPinnedColumns
-    ? pinnedLeftCols.length
-    : (schema.frozenColumns ?? 1);
-
-  // Determine selection mode (support both new and legacy formats)
-  // Auto-enable 'multiple' selection when bulk actions are defined
-  const effectiveBulkActions = schema.batchActions ?? (schema as any).bulkActions;
-  const hasBulkActions = effectiveBulkActions && effectiveBulkActions.length > 0;
-  let selectionMode: 'none' | 'single' | 'multiple' | boolean = false;
-  if (schema.selection?.type) {
-    selectionMode = schema.selection.type === 'none' ? false : schema.selection.type;
-  } else if (schema.selectable !== undefined) {
-    // Legacy support
-    selectionMode = schema.selectable;
-  } else if (hasBulkActions) {
-    // Auto-enable multi-select when bulk actions exist
-    selectionMode = 'multiple';
-  }
-
-  // Determine pagination settings (support both new and legacy formats)
-  const paginationEnabled = schema.pagination !== undefined 
-    ? true 
-    : (schema.showPagination !== undefined ? schema.showPagination : true);
-  
-  const pageSize = schema.pagination?.pageSize 
-    || schema.pageSize 
-    || 10;
-
-  // Determine search settings
-  const searchEnabled = schema.searchableFields !== undefined
-    ? schema.searchableFields.length > 0
-    : (schema.showSearch !== undefined ? schema.showSearch : true);
-
-  const dataTableSchema: any = {
-    type: 'data-table',
-    caption: schema.label || schema.title,
-    columns: orderedColumns,
-    data,
-    pagination: paginationEnabled,
-    pageSize: pageSize,
-    searchable: searchEnabled,
-    selectable: selectionMode,
-    sortable: true,
-    exportable: operations?.export,
-    // RowActionMenu column (from columnsWithActions) already handles edit/delete
-    // actions via onEdit/onDelete props. Only enable DataTable's built-in action
-    // column for inline-editing save/cancel (editable grids with onRowSave).
-    rowActions: !!(schema.editable && hasActions),
-    resizableColumns: schema.resizable ?? schema.resizableColumns ?? true,
-    reorderableColumns: schema.reorderableColumns ?? false,
-    editable: schema.editable ?? false,
-    singleClickEdit: schema.singleClickEdit ?? true,
-    className: schema.className,
-    cellClassName: rowHeightMode === 'compact'
-      ? 'px-3 py-1 text-[13px] leading-tight'
-      : rowHeightMode === 'short'
-        ? 'px-3 py-1 text-[13px] leading-normal'
-        : rowHeightMode === 'tall'
-          ? 'px-3 py-2.5 text-sm'
-          : rowHeightMode === 'extra_tall'
-            ? 'px-3 py-3.5 text-sm leading-relaxed'
-            : 'px-3 py-1.5 text-[13px] leading-normal',
-    showRowNumbers: true,
-    showAddRow: !!operations?.create,
-    onAddRecord: onAddRecord,
-    rowClassName: schema.rowColor ? (row: any, _idx: number) => getRowClassName(row) : undefined,
-    rowStyle: schema.conditionalFormatting?.length ? (row: any, _idx: number) => getRowStyle(row) : undefined,
-    frozenColumns: effectiveFrozenColumns,
-    onSelectionChange: (rows: any[]) => {
-      setSelectedRows(rows);
-      onRowSelect?.(rows);
-    },
-    onRowClick: navigation.handleClick,
-    onCellChange: onCellChange,
-    onRowSave: onRowSave,
-    onBatchSave: onBatchSave,
-    onColumnResize: (columnKey: string, width: number) => {
-      saveColumnState({
-        ...columnState,
-        widths: { ...columnState.widths, [columnKey]: width },
-      });
-    },
-    onColumnReorder: (newOrder: string[]) => {
-      saveColumnState({
-        ...columnState,
-        order: newOrder,
-      });
-    },
-  };
-
-  /** Build a per-group data-table schema (inherits everything except data & pagination). */
-  const buildGroupTableSchema = (groupRows: any[]) => ({
-    ...dataTableSchema,
-    caption: undefined,
-    data: groupRows,
-    pagination: false,
-    searchable: false,
-  });
-
-  // Build record detail title
-  const detailTitle = schema.label
-    ? `${schema.label} Detail`
-    : schema.objectName
-      ? `${schema.objectName.charAt(0).toUpperCase() + schema.objectName.slice(1)} Detail`
-      : 'Record Detail';
-
-  // Mobile card-view fallback for screens below 480px
-  if (useCardView && data.length > 0 && !isGrouped) {
-    const displayColumns = generateColumns().filter((c: any) => c.accessorKey !== '_actions');
-
-    // Build a lookup of column metadata for smart rendering
-    const colMap = new Map<string, any>();
-    displayColumns.forEach((col: any) => colMap.set(col.accessorKey, col));
-
-    // Identify special columns by inferred type for visual hierarchy
-    const titleCol = displayColumns[0]; // First column is always the title
-    const amountKeys = ['amount', 'price', 'total', 'revenue', 'cost', 'value', 'budget', 'salary'];
-    const stageKeys = ['stage', 'status', 'priority', 'category', 'severity', 'level'];
-    const dateKeys = ['date', 'due', 'created', 'updated', 'deadline', 'start', 'end', 'expires'];
-    const percentKeys = ['probability', 'percent', 'rate', 'ratio', 'confidence', 'score'];
-
-    // Stage badge color mapping for common pipeline stages
-    const stageBadgeColor = (value: string): string => {
-      const v = (value || '').toLowerCase();
-      if (v.includes('won') || v.includes('completed') || v.includes('done') || v.includes('active'))
-        return 'bg-green-100 text-green-800 border-green-300';
-      if (v.includes('lost') || v.includes('cancelled') || v.includes('rejected') || v.includes('closed lost'))
-        return 'bg-red-100 text-red-800 border-red-300';
-      if (v.includes('negotiation') || v.includes('review') || v.includes('in progress'))
-        return 'bg-yellow-100 text-yellow-800 border-yellow-300';
-      if (v.includes('proposal') || v.includes('pending'))
-        return 'bg-blue-100 text-blue-800 border-blue-300';
-      if (v.includes('qualification') || v.includes('qualified'))
-        return 'bg-indigo-100 text-indigo-800 border-indigo-300';
-      if (v.includes('prospecting') || v.includes('new') || v.includes('open'))
-        return 'bg-purple-100 text-purple-800 border-purple-300';
-      return 'bg-muted text-muted-foreground border-border';
-    };
-
-    // Left border color for card accent based on stage
-    const stageBorderLeft = (value: string): string => {
-      const v = (value || '').toLowerCase();
-      if (v.includes('won') || v.includes('completed') || v.includes('done') || v.includes('active'))
-        return 'border-l-green-500';
-      if (v.includes('lost') || v.includes('cancelled') || v.includes('rejected'))
-        return 'border-l-red-500';
-      if (v.includes('negotiation') || v.includes('review') || v.includes('in progress'))
-        return 'border-l-yellow-500';
-      if (v.includes('proposal') || v.includes('pending'))
-        return 'border-l-blue-500';
-      if (v.includes('qualification') || v.includes('qualified'))
-        return 'border-l-indigo-500';
-      if (v.includes('prospecting') || v.includes('new') || v.includes('open'))
-        return 'border-l-purple-500';
-      return 'border-l-gray-300';
-    };
-
-    const classify = (key: string): 'amount' | 'stage' | 'date' | 'percent' | 'other' => {
-      const k = key.toLowerCase();
-      if (amountKeys.some(p => k.includes(p))) return 'amount';
-      if (stageKeys.some(p => k.includes(p))) return 'stage';
-      if (dateKeys.some(p => k.includes(p))) return 'date';
-      if (percentKeys.some(p => k.includes(p))) return 'percent';
-      return 'other';
-    };
-
-    return (
-      <>
-        <div className="space-y-2 p-2">
-          {data.map((row, idx) => {
-            // Collect secondary fields (skip the title column)
-            const secondaryCols = displayColumns.slice(1, 5);
-            const amountCol = secondaryCols.find((c: any) => classify(c.accessorKey) === 'amount');
-            const stageCol = secondaryCols.find((c: any) => classify(c.accessorKey) === 'stage');
-            const dateCols = secondaryCols.filter((c: any) => classify(c.accessorKey) === 'date');
-            const percentCols = secondaryCols.filter((c: any) => classify(c.accessorKey) === 'percent');
-            const otherCols = secondaryCols.filter(
-              (c: any) => c !== amountCol && c !== stageCol && !dateCols.includes(c) && !percentCols.includes(c)
-            );
-
-            // Determine left border accent color from stage value
-            const stageValue = stageCol ? String(row[stageCol.accessorKey] ?? '') : '';
-            const leftBorderClass = stageValue ? stageBorderLeft(stageValue) : '';
-            const cardClassName = [
-              'border rounded-lg p-2.5 bg-card hover:bg-accent/50 cursor-pointer transition-colors touch-manipulation',
-              leftBorderClass ? `border-l-[3px] ${leftBorderClass}` : '',
-            ].filter(Boolean).join(' ');
-
-            return (
-              <div
-                key={row.id || row._id || idx}
-                className={cardClassName}
-                onClick={() => navigation.handleClick(row)}
-              >
-                {/* Title row - Name as bold prominent title */}
-                {titleCol && (
-                  <div className="font-semibold text-sm truncate mb-1">
-                    {row[titleCol.accessorKey] != null && typeof row[titleCol.accessorKey] === 'object' ? String(row[titleCol.accessorKey]) : (row[titleCol.accessorKey] ?? '—')}
-                  </div>
-                )}
-
-                {/* Amount + Stage row - side by side for compact display */}
-                {(amountCol || stageCol) && (
-                  <div className="flex items-center justify-between gap-2 mb-1">
-                    {amountCol && (
-                      <span className="text-sm tabular-nums font-medium">
-                        {typeof row[amountCol.accessorKey] === 'number'
-                          ? formatCompactCurrency(row[amountCol.accessorKey])
-                          : (row[amountCol.accessorKey] != null && typeof row[amountCol.accessorKey] === 'object' ? String(row[amountCol.accessorKey]) : (row[amountCol.accessorKey] ?? '—'))}
-                      </span>
-                    )}
-                    {stageCol && row[stageCol.accessorKey] && (
-                      <Badge
-                        variant="outline"
-                        className={`text-xs shrink-0 max-w-[140px] truncate ${stageBadgeColor(String(row[stageCol.accessorKey]))}`}
-                      >
-                        {String(row[stageCol.accessorKey])}
-                      </Badge>
-                    )}
-                  </div>
-                )}
-
-                {/* Date + Percent combined row for density */}
-                {(dateCols.length > 0 || percentCols.length > 0) && (
-                  <div className="flex items-center justify-between py-0.5 text-xs text-muted-foreground">
-                    {dateCols[0] && (
-                      <span className="tabular-nums">
-                        {row[dateCols[0].accessorKey]
-                          ? formatDate(row[dateCols[0].accessorKey], 'short')
-                          : '—'}
-                      </span>
-                    )}
-                    {percentCols[0] && row[percentCols[0].accessorKey] != null && (
-                      <span className="tabular-nums">
-                        {formatPercent(Number(row[percentCols[0].accessorKey]))}
-                      </span>
-                    )}
-                  </div>
-                )}
-
-                {/* Additional date fields beyond the first */}
-                {dateCols.slice(1).map((col: any) => (
-                  <div key={col.accessorKey} className="flex justify-between items-center py-0.5">
-                    <span className="text-xs text-muted-foreground">{col.header}</span>
-                    <span className="text-xs text-muted-foreground tabular-nums">
-                      {row[col.accessorKey] ? formatDate(row[col.accessorKey], 'short') : '—'}
-                    </span>
-                  </div>
-                ))}
-
-                {/* Other fields - hide empty values on mobile */}
-                {otherCols.map((col: any) => {
-                  const val = row[col.accessorKey];
-                  if (val == null || val === '') return null;
-                  return (
-                    <div key={col.accessorKey} className="flex justify-between items-center py-0.5">
-                      <span className="text-xs text-muted-foreground">{col.header}</span>
-                      <span className="text-xs font-medium truncate ml-2 text-right">
-                        {col.cell ? col.cell(val, row) : String(val)}
-                      </span>
-                    </div>
-                  );
-                })}
-              </div>
-            );
-          })}
-        </div>
-        {navigation.isOverlay && (
-          <NavigationOverlay {...navigation} title={detailTitle}>
-            {(record) => (
-              <div className="space-y-3">
-                {Object.entries(record).map(([key, value]) => (
-                  <div key={key} className="flex flex-col">
-                    <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
-                      {key.replace(/_/g, ' ')}
-                    </span>
-                    <span className="text-sm">{String(value ?? '—')}</span>
-                  </div>
-                ))}
-              </div>
-            )}
-          </NavigationOverlay>
-        )}
-      </>
-    );
-  }
-
-  // Row height cycle handler (plain function, not hook — after early returns)
-  const cycleRowHeight = () => {
-    setRowHeightMode(prev => {
-      if (prev === 'compact') return 'short';
-      if (prev === 'short') return 'medium';
-      if (prev === 'medium') return 'tall';
-      if (prev === 'tall') return 'extra_tall';
-      return 'compact';
-    });
-  };
-
-  const rowHeightIcons = { compact: Rows4, short: Rows3, medium: Rows2, tall: AlignJustify, extra_tall: AlignJustify };
-  const RowHeightIcon = rowHeightIcons[rowHeightMode];
-
-  // Grid toolbar (row height toggle + export)
-  const showRowHeightToggle = schema.rowHeight !== undefined;
-  const hasToolbar = schema.exportOptions || showRowHeightToggle;
-  const gridToolbar = hasToolbar ? (
-    <div className="flex items-center justify-end gap-1 px-2 py-1">
-      {/* Row height toggle */}
-      {showRowHeightToggle && (
-        <Button
-          variant="ghost"
-          size="sm"
-          className="h-7 px-2 text-muted-foreground hover:text-primary text-xs"
-          onClick={cycleRowHeight}
-          title={`Row height: ${rowHeightMode}`}
-        >
-          <RowHeightIcon className="h-3.5 w-3.5 mr-1.5" />
-          <span className="hidden sm:inline capitalize">{rowHeightMode}</span>
-        </Button>
-      )}
-
-      {/* Export */}
-      {schema.exportOptions && (
-        <Popover open={showExport} onOpenChange={setShowExport}>
-          <PopoverTrigger asChild>
-            <Button
-              variant="ghost"
-              size="sm"
-              className="h-7 px-2 text-muted-foreground hover:text-primary text-xs"
-            >
-              <Download className="h-3.5 w-3.5 mr-1.5" />
-              <span className="hidden sm:inline">{t('grid.export')}</span>
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent align="end" className="w-48 p-2">
-            <div className="space-y-1">
-              {(schema.exportOptions.formats || ['csv', 'json']).map(format => (
-                <Button
-                  key={format}
-                  variant="ghost"
-                  size="sm"
-                  className="w-full justify-start h-8 text-xs"
-                  onClick={() => handleExport(format)}
-                >
-                  <Download className="h-3.5 w-3.5 mr-2" />
-                  {t('grid.exportAs', { format: format.toUpperCase() })}
-                </Button>
-              ))}
-            </div>
-          </PopoverContent>
-        </Popover>
-      )}
-    </div>
-  ) : null;
-
-  // Form-based record detail renderer (replaces simple key-value dump)
-  const renderRecordDetail = (record: any) => {
-    const systemFields = ['_id', 'id', 'created_at', 'updated_at', 'created_by', 'updated_by'];
-    const entries = Object.entries(record);
-    const regularFields = entries.filter(([key]) => !systemFields.includes(key));
-    const metaFields = entries.filter(([key]) => systemFields.includes(key) && key !== '_id' && key !== 'id');
-
-    const formatFieldLabel = (key: string): string =>
-      key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, ' ');
-
-    const renderFieldValue = (key: string, value: any): React.ReactNode => {
-      if (value == null || value === '') {
-        return <span className="text-muted-foreground/50 text-sm italic">Empty</span>;
-      }
-
-      // Use objectSchema field type for type-aware rendering
-      const fieldDef = objectSchema?.fields?.[key];
-      if (fieldDef?.type) {
-        const CellRenderer = getCellRenderer(fieldDef.type);
-        if (CellRenderer) {
-          return <CellRenderer value={value} field={fieldDef} />;
-        }
-      }
-
-      // Fallback: infer from value and key name
-      if (typeof value === 'boolean') {
-        return <Badge variant={value ? 'default' : 'outline'}>{value ? 'Yes' : 'No'}</Badge>;
-      }
-      // Detect date-like values
-      if (typeof value === 'string' && !isNaN(Date.parse(value)) && (key.includes('date') || key.includes('_at') || key.includes('time'))) {
-        return <span className="text-sm tabular-nums">{formatDate(value)}</span>;
-      }
-      // Detect currency-like fields by name
-      const currencyFields = ['amount', 'price', 'total', 'revenue', 'cost', 'value', 'budget', 'salary'];
-      if (typeof value === 'number' && currencyFields.some(f => key.toLowerCase().includes(f))) {
-        return <span className="text-sm tabular-nums font-medium">{formatCurrency(value)}</span>;
-      }
-      return <span className="text-sm break-words">{String(value)}</span>;
-    };
-
-    return (
-      <div className="space-y-4" data-testid="record-detail-panel">
-        {/* Regular fields in form-like layout */}
-        <div className="rounded-lg border bg-card">
-          <div className="divide-y">
-            {regularFields.map(([key, value]) => (
-              <div key={key} className="flex flex-col sm:flex-row sm:items-start gap-1 sm:gap-4 px-4 py-3">
-                <span className="text-xs font-medium text-muted-foreground sm:w-1/3 sm:text-right sm:pt-0.5 uppercase tracking-wide shrink-0">
-                  {formatFieldLabel(key)}
-                </span>
-                <div className="flex-1 min-w-0">
-                  {renderFieldValue(key, value)}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        {/* System/meta fields */}
-        {metaFields.length > 0 && (
-          <div className="rounded-lg border bg-muted/30">
-            <div className="px-4 py-2 border-b">
-              <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">System</span>
-            </div>
-            <div className="divide-y divide-border/50">
-              {metaFields.map(([key, value]) => (
-                <div key={key} className="flex items-center gap-4 px-4 py-2">
-                  <span className="text-xs text-muted-foreground w-1/3 text-right shrink-0">
-                    {formatFieldLabel(key)}
-                  </span>
-                  <span className="text-xs text-muted-foreground flex-1 min-w-0 break-words">{String(value ?? '')}</span>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-    );
-  };
-
-  // Summary footer row
-  const summaryFooter = hasSummary ? (
-    <div className="border-t bg-muted/30 px-2 py-1.5" data-testid="column-summary-footer">
-      <div className="flex gap-4 text-xs text-muted-foreground font-medium">
-        {orderedColumns
-          .filter((col: any) => summaries.has(col.accessorKey))
-          .map((col: any) => {
-            const summary = summaries.get(col.accessorKey)!;
-            return (
-              <span key={col.accessorKey} data-testid={`summary-${col.accessorKey}`}>
-                {col.header}: {summary.label}
-              </span>
-            );
-          })}
-      </div>
-    </div>
-  ) : null;
-
-  // Render grid content: grouped (multiple tables with headers) or flat (single table)
-  const gridContent = isGrouped ? (
-    <div className="space-y-2">
-      {groups.map((group) => (
-        <GroupRow
-          key={group.key}
-          groupKey={group.key}
-          label={group.label}
-          count={group.rows.length}
-          collapsed={group.collapsed}
-          aggregations={group.aggregations}
-          onToggle={toggleGroup}
-        >
-          <SchemaRenderer schema={buildGroupTableSchema(group.rows)} />
-        </GroupRow>
-      ))}
-    </div>
-  ) : (
-    <>
-      <SchemaRenderer schema={dataTableSchema} />
-      {summaryFooter}
-    </>
-  );
-
-  // For split mode, wrap the grid in the ResizablePanelGroup
-  if (navigation.isOverlay && navigation.mode === 'split') {
-    return (
-      <NavigationOverlay
-        {...navigation}
-        title={detailTitle}
-        mainContent={
-          <>
-            {gridToolbar}
-            {gridContent}
-            <BulkActionBar
-              selectedRows={selectedRows}
-              actions={effectiveBulkActions ?? []}
-              onAction={(action, rows) => executeAction({ type: action, params: { records: rows } })}
-              onClearSelection={() => setSelectedRows([])}
-            />
-          </>
-        }
-      >
-        {(record) => renderRecordDetail(record)}
-      </NavigationOverlay>
-    );
-  }
-
-  return (
-    <div ref={pullRef} className="relative h-full">
-      {pullDistance > 0 && (
-        <div
-          className="flex items-center justify-center text-xs text-muted-foreground"
-          style={{ height: pullDistance }}
-        >
-          {isRefreshing ? t('grid.refreshing') : t('grid.pullToRefresh')}
-        </div>
-      )}
-      {gridToolbar}
-      {gridContent}
-      <BulkActionBar
-        selectedRows={selectedRows}
-        actions={effectiveBulkActions ?? []}
-        onAction={(action, rows) => executeAction({ type: action, params: { records: rows } })}
-        onClearSelection={() => setSelectedRows([])}
-      />
-      {navigation.isOverlay && (
-        <NavigationOverlay
-          {...navigation}
-          title={detailTitle}
-        >
-          {(record) => renderRecordDetail(record)}
-        </NavigationOverlay>
-      )}
-    </div>
-  );
-};