@object-ui/plugin-detail 3.1.2 → 3.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/plugin-detail",
-  "version": "3.1.2",
+  "version": "3.1.4",
   "type": "module",
   "license": "MIT",
   "description": "DetailView plugin for Object UI - comprehensive detail page with sections, tabs, and related lists",
@@ -24,12 +24,12 @@
     }
   },
   "dependencies": {
-    "lucide-react": "^0.576.0",
-    "@object-ui/components": "3.1.2",
-    "@object-ui/core": "3.1.2",
-    "@object-ui/fields": "3.1.2",
-    "@object-ui/types": "3.1.2",
-    "@object-ui/react": "3.1.2"
+    "lucide-react": "^0.577.0",
+    "@object-ui/components": "3.1.4",
+    "@object-ui/fields": "3.1.4",
+    "@object-ui/core": "3.1.4",
+    "@object-ui/react": "3.1.4",
+    "@object-ui/types": "3.1.4"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -38,11 +38,11 @@
   "devDependencies": {
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "@vitejs/plugin-react": "^5.1.4",
+    "@vitejs/plugin-react": "^6.0.1",
     "typescript": "^5.9.3",
-    "vite": "^7.3.1",
+    "vite": "^8.0.1",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.0.18"
+    "vitest": "^4.1.0"
   },
   "scripts": {
     "build": "vite build",

package/src/DetailSection.tsx

@@ -53,6 +53,15 @@ export function getResponsiveSpanClass(span: number | undefined, columns: number
   return '';
 }
 
+export interface VirtualScrollOptions {
+  /** Enable virtual scrolling for large field sets */
+  enabled?: boolean;
+  /** Height of each field row in px (default: 60) */
+  itemHeight?: number;
+  /** Number of fields to render in the initial batch before revealing all (default: 20) */
+  batchSize?: number;
+}
+
 export interface DetailSectionProps {
   section: DetailViewSectionType;
   data?: any;
@@ -65,6 +74,8 @@ export interface DetailSectionProps {
   isEditing?: boolean;
   /** Callback when a field value changes during inline editing */
   onFieldChange?: (field: string, value: any) => void;
+  /** Virtual scrolling configuration for sections with many fields */
+  virtualScroll?: VirtualScrollOptions;
 }
 
 export const DetailSection: React.FC<DetailSectionProps> = ({
@@ -75,9 +86,11 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
   objectName,
   isEditing = false,
   onFieldChange,
+  virtualScroll,
 }) => {
   const [isCollapsed, setIsCollapsed] = React.useState(section.defaultCollapsed ?? false);
   const [copiedField, setCopiedField] = React.useState<string | null>(null);
+  const [visibleCount, setVisibleCount] = React.useState<number | undefined>(undefined);
   const { t } = useDetailTranslation();
   const { fieldLabel } = useSafeFieldLabel();
 
@@ -213,6 +226,32 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
     );
   };
 
+  // Virtual scroll: progressive batch rendering for large field sets
+  const vsEnabled = virtualScroll?.enabled === true;
+  const vsBatchSize = virtualScroll?.batchSize ?? 20;
+  /** Delay (ms) before revealing remaining fields after the initial batch */
+  const VS_REVEAL_DELAY = 100;
+
+  React.useEffect(() => {
+    if (!vsEnabled) {
+      setVisibleCount(undefined);
+      return;
+    }
+    // Start with a batch, then progressively reveal more
+    if (layoutFields.length <= vsBatchSize) {
+      setVisibleCount(undefined);
+      return;
+    }
+    setVisibleCount(vsBatchSize);
+    const timer = setTimeout(() => setVisibleCount(undefined), VS_REVEAL_DELAY);
+    return () => clearTimeout(timer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [vsEnabled, layoutFields.length, vsBatchSize]);
+
+  const renderedFields = visibleCount !== undefined
+    ? layoutFields.slice(0, visibleCount)
+    : layoutFields;
+
   const content = (
     <div 
       className={cn(
@@ -223,7 +262,7 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
         "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
       )}
     >
-      {layoutFields.map(renderField)}
+      {renderedFields.map(renderField)}
     </div>
   );
 

package/src/DetailView.tsx

@@ -600,7 +600,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
 
       {/* Header Highlight Area */}
       {schema.highlightFields && schema.highlightFields.length > 0 && (
-        <HeaderHighlight fields={schema.highlightFields} data={data} objectName={schema.objectName} />
+        <HeaderHighlight fields={schema.highlightFields} data={data} objectName={schema.objectName} objectSchema={objectSchema} />
       )}
 
       {/* Auto Tabs mode: wrap sections, related, activity into tabs */}

package/src/HeaderHighlight.tsx

@@ -9,6 +9,7 @@
 import * as React from 'react';
 import { cn, Card, CardContent } from '@object-ui/components';
 import type { HighlightField } from '@object-ui/types';
+import { getCellRenderer } from '@object-ui/fields';
 import { useSafeFieldLabel } from '@object-ui/react';
 
 export interface HeaderHighlightProps {
@@ -17,6 +18,8 @@ export interface HeaderHighlightProps {
   className?: string;
   /** Object name for i18n field label resolution */
   objectName?: string;
+  /** Object schema for field metadata enrichment */
+  objectSchema?: any;
 }
 
 export const HeaderHighlight: React.FC<HeaderHighlightProps> = ({
@@ -24,6 +27,7 @@ export const HeaderHighlight: React.FC<HeaderHighlightProps> = ({
   data,
   className,
   objectName,
+  objectSchema,
 }) => {
   const { fieldLabel } = useSafeFieldLabel();
   if (!fields.length || !data) return null;
@@ -48,6 +52,23 @@ export const HeaderHighlight: React.FC<HeaderHighlightProps> = ({
         )}>
           {visibleFields.map((field) => {
             const value = data[field.name];
+            // Enrich field metadata from objectSchema
+            const objectDefField = objectSchema?.fields?.[field.name];
+            const resolvedType = field.type || objectDefField?.type;
+            const enrichedField = {
+              name: field.name,
+              label: field.label,
+              type: resolvedType || 'text',
+              ...(objectDefField?.options && { options: objectDefField.options }),
+              ...(objectDefField?.currency && { currency: objectDefField.currency }),
+              ...(objectDefField?.precision !== undefined && { precision: objectDefField.precision }),
+              ...(objectDefField?.format && { format: objectDefField.format }),
+            };
+
+            // Use type-aware cell renderer — all renderers coerce values via
+            // coerceToSafeValue() so even object/array data is safe (no error #310).
+            const CellRenderer = getCellRenderer(resolvedType || 'text');
+
             return (
               <div key={field.name} className="flex flex-col gap-0.5">
                 <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
@@ -55,7 +76,7 @@ export const HeaderHighlight: React.FC<HeaderHighlightProps> = ({
                   {fieldLabel(objectName || '', field.name, field.label)}
                 </span>
                 <span className="text-sm font-semibold truncate">
-                  {String(value)}
+                  <CellRenderer value={value} field={enrichedField as any} />
                 </span>
               </div>
             );

package/src/RecordChatterPanel.tsx

@@ -38,6 +38,8 @@ export interface RecordChatterPanelProps {
   filterMode?: FeedFilterMode;
   /** Called when filter changes */
   onFilterChange?: (mode: FeedFilterMode) => void;
+  /** When true, auto-collapse panel when there are no feed items */
+  collapseWhenEmpty?: boolean;
   className?: string;
 }
 
@@ -63,12 +65,13 @@ export const RecordChatterPanel: React.FC<RecordChatterPanelProps> = ({
   onToggleSubscription,
   filterMode,
   onFilterChange,
+  collapseWhenEmpty = false,
   className,
 }) => {
   const position = config?.position ?? 'right';
   const width = config?.width ?? '360px';
   const collapsible = config?.collapsible ?? true;
-  const defaultCollapsed = config?.defaultCollapsed ?? false;
+  const defaultCollapsed = (collapseWhenEmpty && items.length === 0) || (config?.defaultCollapsed ?? false);
 
   const [collapsed, setCollapsed] = React.useState(defaultCollapsed);
 
@@ -142,6 +145,7 @@ export const RecordChatterPanel: React.FC<RecordChatterPanelProps> = ({
             onToggleSubscription={onToggleSubscription}
             filterMode={filterMode}
             onFilterChange={onFilterChange}
+            collapseWhenEmpty={collapseWhenEmpty}
             className="border-0 shadow-none"
           />
         </div>
@@ -194,6 +198,7 @@ export const RecordChatterPanel: React.FC<RecordChatterPanelProps> = ({
             onToggleSubscription={onToggleSubscription}
             filterMode={filterMode}
             onFilterChange={onFilterChange}
+            collapseWhenEmpty={collapseWhenEmpty}
           />
         </div>
       )}

package/src/RelatedList.tsx

@@ -197,7 +197,7 @@ export const RelatedList: React.FC<RelatedListProps> = ({
     if (!objectSchema?.fields) return [];
     const resolvedObjectName = objectName || api || '';
     return Object.entries(objectSchema.fields)
-      .filter(([key]) => !key.startsWith('_'))
+      .filter(([key]) => !key.startsWith('_') && key !== 'id')
       .map(([key, def]: [string, any]) => {
         const col: any = {
           accessorKey: key,

package/src/__tests__/DetailSection.test.tsx

@@ -391,6 +391,67 @@ describe('DetailSection', () => {
       });
     });
   });
+
+  it('should initially render a batch when virtualScroll is enabled with many fields', () => {
+    const section = {
+      title: 'Virtual',
+      fields: Array.from({ length: 50 }, (_, i) => ({
+        name: `field_${i}`,
+        label: `Field ${i}`,
+        type: 'text',
+      })),
+    };
+    const { container } = render(
+      <DetailSection
+        section={section}
+        data={{}}
+        virtualScroll={{ enabled: true, batchSize: 10 }}
+      />
+    );
+    const grid = container.querySelector('.grid');
+    expect(grid).toBeTruthy();
+    // Initially should render only the batch (10 fields), not all 50
+    const fieldElements = grid!.children;
+    expect(fieldElements.length).toBeLessThanOrEqual(10);
+  });
+
+  it('should render all fields when virtualScroll is disabled', () => {
+    const section = {
+      title: 'No Virtual',
+      fields: Array.from({ length: 50 }, (_, i) => ({
+        name: `field_${i}`,
+        label: `Field ${i}`,
+        type: 'text',
+      })),
+    };
+    const { container } = render(
+      <DetailSection section={section} data={{}} />
+    );
+    const grid = container.querySelector('.grid');
+    expect(grid).toBeTruthy();
+    expect(grid!.children.length).toBe(50);
+  });
+
+  it('should render all fields when virtualScroll is enabled but field count is below batch size', () => {
+    const section = {
+      title: 'Small',
+      fields: Array.from({ length: 5 }, (_, i) => ({
+        name: `field_${i}`,
+        label: `Field ${i}`,
+        type: 'text',
+      })),
+    };
+    const { container } = render(
+      <DetailSection
+        section={section}
+        data={{}}
+        virtualScroll={{ enabled: true, batchSize: 20 }}
+      />
+    );
+    const grid = container.querySelector('.grid');
+    expect(grid).toBeTruthy();
+    expect(grid!.children.length).toBe(5);
+  });
 });
 
 describe('getResponsiveSpanClass', () => {

package/src/__tests__/HeaderHighlight.test.tsx

@@ -65,4 +65,149 @@ describe('HeaderHighlight', () => {
     render(<HeaderHighlight fields={fieldsWithIcon} data={{ revenue: '$5M' }} />);
     expect(screen.getByText('💰')).toBeInTheDocument();
   });
+
+  it('should render currency fields with formatted value via CellRenderer', () => {
+    const currencyFields: HighlightField[] = [
+      { name: 'amount', label: 'Amount', type: 'currency' },
+    ];
+    render(<HeaderHighlight fields={currencyFields} data={{ amount: 250000 }} />);
+    // CurrencyCellRenderer should format — should NOT show raw "250000"
+    expect(screen.queryByText('250000')).not.toBeInTheDocument();
+    expect(screen.getByText(/250,000/)).toBeInTheDocument();
+  });
+
+  it('should render select fields as badge via CellRenderer', () => {
+    const selectFields: HighlightField[] = [
+      { name: 'stage', label: 'Stage', type: 'select' },
+    ];
+    render(
+      <HeaderHighlight
+        fields={selectFields}
+        data={{ stage: 'prospecting' }}
+        objectSchema={{
+          fields: {
+            stage: {
+              type: 'select',
+              options: [
+                { value: 'prospecting', label: 'Prospecting', color: 'blue' },
+              ],
+            },
+          },
+        }}
+      />
+    );
+    expect(screen.getByText('Prospecting')).toBeInTheDocument();
+  });
+
+  it('should enrich field type from objectSchema when field.type is not set', () => {
+    const fieldsNoType: HighlightField[] = [
+      { name: 'amount', label: 'Amount' },
+    ];
+    render(
+      <HeaderHighlight
+        fields={fieldsNoType}
+        data={{ amount: 5000 }}
+        objectSchema={{
+          fields: {
+            amount: { type: 'currency', currency: 'USD' },
+          },
+        }}
+      />
+    );
+    // CurrencyCellRenderer should format, not raw String()
+    expect(screen.queryByText('5000')).not.toBeInTheDocument();
+    expect(screen.getByText(/5,000/)).toBeInTheDocument();
+  });
+
+  it('should fall back to text when no type info is available', () => {
+    const fieldsNoType: HighlightField[] = [
+      { name: 'custom', label: 'Custom' },
+    ];
+    render(<HeaderHighlight fields={fieldsNoType} data={{ custom: 'raw-value' }} />);
+    expect(screen.getByText('raw-value')).toBeInTheDocument();
+  });
+
+  it('should safely render object values without crashing (React error #310 guard)', () => {
+    // Simulates MongoDB Decimal128 or expanded reference objects
+    const fieldsWithNumber: HighlightField[] = [
+      { name: 'amount', label: 'Amount' },
+      { name: 'account', label: 'Account' },
+    ];
+    const objectData = {
+      amount: { $numberDecimal: '250000' },
+      account: { id: 'abc', name: 'Acme Corp' },
+    };
+    const objectSchema = {
+      fields: {
+        amount: { type: 'number' },
+        account: { type: 'text' },
+      },
+    };
+    // Should NOT crash — cell renderers coerce values via coerceToSafeValue
+    const { container } = render(
+      <HeaderHighlight
+        fields={fieldsWithNumber}
+        data={objectData}
+        objectSchema={objectSchema}
+      />
+    );
+    expect(container.innerHTML).not.toBe('');
+    // NumberCellRenderer coerces $numberDecimal to number
+    expect(screen.getByText('250,000')).toBeInTheDocument();
+    // TextCellRenderer extracts name from object
+    expect(screen.getByText('Acme Corp')).toBeInTheDocument();
+  });
+
+  it('should safely render lookup object values via LookupCellRenderer', () => {
+    const lookupFields: HighlightField[] = [
+      { name: 'owner', label: 'Owner' },
+    ];
+    const lookupData = {
+      owner: { id: 'u1', name: 'Jane Doe' },
+    };
+    const objectSchema = {
+      fields: {
+        owner: { type: 'lookup' },
+      },
+    };
+    // LookupCellRenderer handles object values natively
+    render(
+      <HeaderHighlight
+        fields={lookupFields}
+        data={lookupData}
+        objectSchema={objectSchema}
+      />
+    );
+    expect(screen.getByText('Jane Doe')).toBeInTheDocument();
+  });
+
+  it('should safely render array values via TextCellRenderer', () => {
+    const arrayFields: HighlightField[] = [
+      { name: 'tags', label: 'Tags' },
+    ];
+    const arrayData = {
+      tags: ['urgent', 'follow-up'],
+    };
+    const { container } = render(
+      <HeaderHighlight fields={arrayFields} data={arrayData} />
+    );
+    expect(container.innerHTML).not.toBe('');
+    // TextCellRenderer coerces arrays to comma-separated string
+    expect(screen.getByText('urgent, follow-up')).toBeInTheDocument();
+  });
+
+  it('should safely render array of objects via TextCellRenderer', () => {
+    const arrayFields: HighlightField[] = [
+      { name: 'contacts', label: 'Contacts' },
+    ];
+    const arrayData = {
+      contacts: [{ name: 'Alice' }, { name: 'Bob' }],
+    };
+    const { container } = render(
+      <HeaderHighlight fields={arrayFields} data={arrayData} />
+    );
+    expect(container.innerHTML).not.toBe('');
+    // TextCellRenderer coerces array of objects to "Alice, Bob"
+    expect(screen.getByText('Alice, Bob')).toBeInTheDocument();
+  });
 });

package/src/__tests__/RecordChatterPanel.test.tsx

@@ -224,4 +224,42 @@ describe('RecordChatterPanel', () => {
       expect(screen.getByLabelText('Show discussion')).toBeInTheDocument();
     });
   });
+
+  describe('collapseWhenEmpty', () => {
+    it('should auto-collapse when empty and collapseWhenEmpty is true (inline mode)', () => {
+      render(
+        <RecordChatterPanel
+          config={{ position: 'bottom', collapsible: true }}
+          collapseWhenEmpty
+          items={[]}
+        />,
+      );
+      // Should be collapsed because items is empty
+      expect(screen.getByLabelText('Show discussion')).toBeInTheDocument();
+    });
+
+    it('should not auto-collapse when items exist and collapseWhenEmpty is true', () => {
+      render(
+        <RecordChatterPanel
+          config={{ position: 'bottom', collapsible: true }}
+          collapseWhenEmpty
+          items={mockItems}
+        />,
+      );
+      // Should be expanded because there are items
+      expect(screen.getByText('Activity')).toBeInTheDocument();
+    });
+
+    it('should auto-collapse sidebar when empty and collapseWhenEmpty is true', () => {
+      render(
+        <RecordChatterPanel
+          config={{ position: 'right', collapsible: true }}
+          collapseWhenEmpty
+          items={[]}
+        />,
+      );
+      // Should be collapsed
+      expect(screen.getByLabelText('Open discussion panel')).toBeInTheDocument();
+    });
+  });
 });

package/src/__tests__/RelatedList.test.tsx

@@ -71,7 +71,7 @@ describe('RelatedList', () => {
         fields: {
           product: { type: 'string', label: 'Product' },
           quantity: { type: 'number', label: 'Quantity' },
-          _id: { type: 'string', label: 'ID' },
+          id: { type: 'string', label: 'ID' },
         },
       }),
       find: vi.fn(),
@@ -92,12 +92,12 @@ describe('RelatedList', () => {
       expect(mockDataSource.getObjectSchema).toHaveBeenCalledWith('order_item');
     });
 
-    // Verify columns are generated from schema (excluding _id)
+    // Verify columns are generated from schema (excluding id)
     await waitFor(() => {
       expect(screen.getByText('Product')).toBeInTheDocument();
       expect(screen.getByText('Quantity')).toBeInTheDocument();
     });
-    // _id should be filtered out
+    // id should be filtered out
     expect(screen.queryByText('ID')).not.toBeInTheDocument();
   });
 

package/src/__tests__/autoLayout.test.ts

@@ -37,6 +37,33 @@ describe('Detail Auto-Layout', () => {
       expect(inferDetailColumns(15)).toBe(3);
       expect(inferDetailColumns(50)).toBe(3);
     });
+
+    it('should cap to 1 column when containerWidth < 640', () => {
+      expect(inferDetailColumns(15, 500)).toBe(1);
+      expect(inferDetailColumns(5, 639)).toBe(1);
+    });
+
+    it('should cap to 2 columns when containerWidth < 900', () => {
+      expect(inferDetailColumns(15, 800)).toBe(2);
+      expect(inferDetailColumns(15, 640)).toBe(2);
+      expect(inferDetailColumns(5, 899)).toBe(2);
+    });
+
+    it('should not cap columns when containerWidth >= 900', () => {
+      expect(inferDetailColumns(15, 900)).toBe(3);
+      expect(inferDetailColumns(15, 1200)).toBe(3);
+    });
+
+    it('should not cap below field-count inference', () => {
+      // 2 fields → 1 column, containerWidth 800 would cap at 2, but inference says 1
+      expect(inferDetailColumns(2, 800)).toBe(1);
+    });
+
+    it('should still work without containerWidth (backward compatible)', () => {
+      expect(inferDetailColumns(15)).toBe(3);
+      expect(inferDetailColumns(5)).toBe(2);
+      expect(inferDetailColumns(2)).toBe(1);
+    });
   });
 
   describe('isWideFieldType', () => {
@@ -180,5 +207,22 @@ describe('Detail Auto-Layout', () => {
       expect(result.columns).toBe(2);
       expect(result.fields.length).toBe(8);
     });
+
+    it('should cap columns based on containerWidth when provided', () => {
+      const fields = Array.from({ length: 15 }, (_, i) => ({
+        name: `f${i}`, label: `F${i}`, type: 'text',
+      }));
+      // Narrow container: should cap to 1
+      const result = applyDetailAutoLayout(fields, undefined, 500);
+      expect(result.columns).toBe(1);
+    });
+
+    it('should still respect explicit schemaColumns regardless of containerWidth', () => {
+      const fields = Array.from({ length: 15 }, (_, i) => ({
+        name: `f${i}`, label: `F${i}`, type: 'text',
+      }));
+      const result = applyDetailAutoLayout(fields, 3, 500);
+      expect(result.columns).toBe(3);
+    });
   });
 });

package/src/autoLayout.ts

@@ -46,16 +46,31 @@ export function isWideFieldType(type: string): boolean {
 
 /**
  * Infer optimal number of columns for a detail section based on field count.
+ * When containerWidth is provided, limits columns for narrower viewports.
  *
- * Rules:
+ * Rules (field-count based):
  * - 0-3 fields  → 1 column
  * - 4-10 fields → 2 columns
  * - 11+ fields  → 3 columns
+ *
+ * Responsive capping (when containerWidth is supplied):
+ * - containerWidth < 640px  → max 1 column
+ * - containerWidth < 900px  → max 2 columns
+ * - containerWidth >= 900px → no cap
  */
-export function inferDetailColumns(fieldCount: number): number {
-  if (fieldCount <= 3) return 1;
-  if (fieldCount <= 10) return 2;
-  return 3;
+export function inferDetailColumns(fieldCount: number, containerWidth?: number): number {
+  let cols: number;
+  if (fieldCount <= 3) cols = 1;
+  else if (fieldCount <= 10) cols = 2;
+  else cols = 3;
+
+  // Apply responsive capping when container width is known
+  if (containerWidth !== undefined) {
+    if (containerWidth < 640) return Math.min(cols, 1);
+    if (containerWidth < 900) return Math.min(cols, 2);
+  }
+
+  return cols;
 }
 
 /**
@@ -89,11 +104,13 @@ export function applyAutoSpan(
  *
  * @param fields - The section fields
  * @param schemaColumns - User-provided columns (from DetailViewSection or DetailViewSchema)
+ * @param containerWidth - Optional container width in px for responsive column capping
  * @returns Object with processed fields and inferred columns
  */
 export function applyDetailAutoLayout(
   fields: DetailViewField[],
-  schemaColumns: number | undefined
+  schemaColumns: number | undefined,
+  containerWidth?: number
 ): { fields: DetailViewField[]; columns: number } {
   // If user explicitly set columns, respect it but still apply auto span
   if (schemaColumns !== undefined) {
@@ -101,8 +118,8 @@ export function applyDetailAutoLayout(
     return { fields: processed, columns: schemaColumns };
   }
 
-  // Infer columns from field count
-  const columns = inferDetailColumns(fields.length);
+  // Infer columns from field count (with optional container-width capping)
+  const columns = inferDetailColumns(fields.length, containerWidth);
 
   // Apply auto span for wide fields
   const processed = applyAutoSpan(fields, columns);

package/src/index.tsx

@@ -36,7 +36,7 @@ export { SubscriptionToggle } from './SubscriptionToggle';
 export { ReactionPicker } from './ReactionPicker';
 export { ThreadedReplies } from './ThreadedReplies';
 export type { DetailViewProps } from './DetailView';
-export type { DetailSectionProps } from './DetailSection';
+export type { DetailSectionProps, VirtualScrollOptions } from './DetailSection';
 export type { DetailTabsProps } from './DetailTabs';
 export type { RelatedListProps } from './RelatedList';
 export type { SectionGroupProps } from './SectionGroup';