@object-ui/plugin-detail 3.1.2 → 3.1.3

package/dist/src/DetailSection.d.ts

@@ -16,6 +16,14 @@ import * as React from 'react';
  * For columns>=3: md:col-span-{min(span,2)} lg:col-span-{min(span,3)}
  */
 export declare function getResponsiveSpanClass(span: number | undefined, columns: number): string;
+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;
@@ -28,6 +36,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 declare const DetailSection: React.FC<DetailSectionProps>;
 //# sourceMappingURL=DetailSection.d.ts.map

package/dist/src/DetailSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DetailSection.d.ts","sourceRoot":"","sources":["../../src/DetailSection.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAoB/B,OAAO,KAAK,EAAE,iBAAiB,IAAI,qBAAqB,EAAkC,MAAM,kBAAkB,CAAC;AAKnH;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,CAYxF;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,qBAAqB,CAAC;IAC/B,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gEAAgE;IAChE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CACrD;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAuOtD,CAAC"}
+{"version":3,"file":"DetailSection.d.ts","sourceRoot":"","sources":["../../src/DetailSection.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAoB/B,OAAO,KAAK,EAAE,iBAAiB,IAAI,qBAAqB,EAAkC,MAAM,kBAAkB,CAAC;AAKnH;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,CAYxF;AAED,MAAM,WAAW,oBAAoB;IACnC,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mDAAmD;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yFAAyF;IACzF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,qBAAqB,CAAC;IAC/B,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gEAAgE;IAChE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACpD,oEAAoE;IACpE,aAAa,CAAC,EAAE,oBAAoB,CAAC;CACtC;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAmQtD,CAAC"}

package/dist/src/HeaderHighlight.d.ts

@@ -13,6 +13,8 @@ export interface HeaderHighlightProps {
     className?: string;
     /** Object name for i18n field label resolution */
     objectName?: string;
+    /** Object schema for field metadata enrichment */
+    objectSchema?: any;
 }
 export declare const HeaderHighlight: React.FC<HeaderHighlightProps>;
 //# sourceMappingURL=HeaderHighlight.d.ts.map

package/dist/src/HeaderHighlight.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderHighlight.d.ts","sourceRoot":"","sources":["../../src/HeaderHighlight.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGvD,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,cAAc,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA6C1D,CAAC"}
+{"version":3,"file":"HeaderHighlight.d.ts","sourceRoot":"","sources":["../../src/HeaderHighlight.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAIvD,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,cAAc,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kDAAkD;IAClD,YAAY,CAAC,EAAE,GAAG,CAAC;CACpB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA+D1D,CAAC"}

package/dist/src/RecordChatterPanel.d.ts

@@ -33,6 +33,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;
 }
 /**

package/dist/src/RecordChatterPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RecordChatterPanel.d.ts","sourceRoot":"","sources":["../../src/RecordChatterPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,2BAA2B,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAElG,OAAO,KAAK,EAAE,cAAc,EAA+B,MAAM,0BAA0B,CAAC;AAE5F,MAAM,WAAW,uBAAuB;IACtC,mEAAmE;IACnE,MAAM,CAAC,EAAE,2BAA2B,CAAC;IACrC,qDAAqD;IACrD,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACxC,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yCAAyC;IACzC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtD,uCAAuC;IACvC,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/E,0CAA0C;IAC1C,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACpF,yBAAyB;IACzB,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,4CAA4C;IAC5C,oBAAoB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrE,kBAAkB;IAClB,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,iCAAiC;IACjC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAqJhE,CAAC"}
+{"version":3,"file":"RecordChatterPanel.d.ts","sourceRoot":"","sources":["../../src/RecordChatterPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,2BAA2B,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAElG,OAAO,KAAK,EAAE,cAAc,EAA+B,MAAM,0BAA0B,CAAC;AAE5F,MAAM,WAAW,uBAAuB;IACtC,mEAAmE;IACnE,MAAM,CAAC,EAAE,2BAA2B,CAAC;IACrC,qDAAqD;IACrD,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACxC,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yCAAyC;IACzC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtD,uCAAuC;IACvC,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/E,0CAA0C;IAC1C,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACpF,yBAAyB;IACzB,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,4CAA4C;IAC5C,oBAAoB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrE,kBAAkB;IAClB,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,iCAAiC;IACjC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAChD,kEAAkE;IAClE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAwJhE,CAAC"}

package/dist/src/autoLayout.d.ts

@@ -5,13 +5,19 @@ import { DetailViewField } from '../../types/src';
 export declare 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 declare function inferDetailColumns(fieldCount: number): number;
+export declare function inferDetailColumns(fieldCount: number, containerWidth?: number): number;
 /**
  * Apply auto span to wide fields so they span the full row.
  * Only sets span if the field does not already have one explicitly set.
@@ -25,9 +31,10 @@ export declare function applyAutoSpan(fields: DetailViewField[], columns: number
  *
  * @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 declare function applyDetailAutoLayout(fields: DetailViewField[], schemaColumns: number | undefined): {
+export declare function applyDetailAutoLayout(fields: DetailViewField[], schemaColumns: number | undefined, containerWidth?: number): {
     fields: DetailViewField[];
     columns: number;
 };

package/dist/src/autoLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autoLayout.d.ts","sourceRoot":"","sources":["../../src/autoLayout.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAgBxD;;GAEG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAErD;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAI7D;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAC3B,MAAM,EAAE,eAAe,EAAE,EACzB,OAAO,EAAE,MAAM,GACd,eAAe,EAAE,CAcnB;AAED;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,eAAe,EAAE,EACzB,aAAa,EAAE,MAAM,GAAG,SAAS,GAChC;IAAE,MAAM,EAAE,eAAe,EAAE,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAchD"}
+{"version":3,"file":"autoLayout.d.ts","sourceRoot":"","sources":["../../src/autoLayout.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAgBxD;;GAEG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAErD;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,MAAM,EAAE,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAatF;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAC3B,MAAM,EAAE,eAAe,EAAE,EACzB,OAAO,EAAE,MAAM,GACd,eAAe,EAAE,CAcnB;AAED;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,eAAe,EAAE,EACzB,aAAa,EAAE,MAAM,GAAG,SAAS,EACjC,cAAc,CAAC,EAAE,MAAM,GACtB;IAAE,MAAM,EAAE,eAAe,EAAE,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAchD"}

package/dist/src/index.d.ts

@@ -25,7 +25,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';

package/dist/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/plugin-detail",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "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.3",
+    "@object-ui/core": "3.1.3",
+    "@object-ui/fields": "3.1.3",
+    "@object-ui/react": "3.1.3",
+    "@object-ui/types": "3.1.3"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

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();
   });