@object-ui/plugin-detail 3.1.1 → 3.1.3

package/dist/src/DetailSection.d.ts

@@ -7,6 +7,23 @@ import { DetailViewSection as DetailViewSectionType } from '../../types/src';
  * LICENSE file in the root directory of this source tree.
  */
 import * as React from 'react';
+/**
+ * Compute responsive col-span classes so that col-span never exceeds the
+ * visible column count at each Tailwind breakpoint.
+ *
+ * For columns=1: no span class (always single column)
+ * For columns=2: md:col-span-{min(span,2)}
+ * 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;
@@ -19,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,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,CA2OtD,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/DetailView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DetailView.d.ts","sourceRoot":"","sources":["../../src/DetailView.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA4C/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAMrE,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,gBAAgB,CAAC;IACzB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kDAAkD;IAClD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAChF;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAwuBhD,CAAC"}
+{"version":3,"file":"DetailView.d.ts","sourceRoot":"","sources":["../../src/DetailView.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA4C/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAMrE,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,gBAAgB,CAAC;IACzB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kDAAkD;IAClD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAChF;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA+uBhD,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.1",
+  "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.1",
-    "@object-ui/fields": "3.1.1",
-    "@object-ui/core": "3.1.1",
-    "@object-ui/react": "3.1.1",
-    "@object-ui/types": "3.1.1"
+    "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

@@ -31,6 +31,37 @@ import { applyDetailAutoLayout } from './autoLayout';
 import { useDetailTranslation } from './useDetailTranslation';
 import { useSafeFieldLabel } from '@object-ui/react';
 
+/**
+ * Compute responsive col-span classes so that col-span never exceeds the
+ * visible column count at each Tailwind breakpoint.
+ *
+ * For columns=1: no span class (always single column)
+ * For columns=2: md:col-span-{min(span,2)}
+ * For columns>=3: md:col-span-{min(span,2)} lg:col-span-{min(span,3)}
+ */
+export function getResponsiveSpanClass(span: number | undefined, columns: number): string {
+  if (!span || span <= 1 || columns <= 1) return '';
+
+  if (columns === 2) {
+    return span >= 2 ? 'md:col-span-2' : '';
+  }
+
+  // columns >= 3: grid-cols-1 md:grid-cols-2 lg:grid-cols-3
+  if (span === 2) return 'md:col-span-2';
+  if (span >= 3) return 'md:col-span-2 lg:col-span-3';
+
+  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;
@@ -43,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> = ({
@@ -53,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();
 
@@ -67,6 +102,23 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
     });
   }, []);
 
+  // Filter out empty fields when hideEmpty is set
+  const visibleFields = section.hideEmpty
+    ? section.fields.filter((field) => {
+        const value = data?.[field.name] ?? field.value;
+        return value !== null && value !== undefined && value !== '';
+      })
+    : section.fields;
+
+  // Hide entire section when all fields are empty
+  if (visibleFields.length === 0) return null;
+
+  // Apply auto-layout: infer columns and auto-span wide fields
+  const { fields: layoutFields, columns: effectiveColumns } = applyDetailAutoLayout(
+    visibleFields,
+    section.columns
+  );
+
   const renderField = (field: DetailViewField) => {
     const value = data?.[field.name] ?? field.value;
     
@@ -75,13 +127,9 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
       return <SchemaRenderer schema={field.render} data={{ ...data, value }} />;
     }
 
-    // Calculate span class based on field.span value
-    const spanClass = field.span === 1 ? 'col-span-1' :
-                      field.span === 2 ? 'col-span-2' :
-                      field.span === 3 ? 'col-span-3' :
-                      field.span === 4 ? 'col-span-4' :
-                      field.span === 5 ? 'col-span-5' :
-                      field.span === 6 ? 'col-span-6' : '';
+    // Calculate responsive span class so col-span never exceeds the visible
+    // column count at each breakpoint, preventing implicit columns on mobile.
+    const spanClass = getResponsiveSpanClass(field.span, effectiveColumns);
 
     const displayValue = (() => {
       if (value === null || value === undefined) return <span className="text-muted-foreground/50 text-xs italic">—</span>;
@@ -178,22 +226,31 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
     );
   };
 
-  // Filter out empty fields when hideEmpty is set
-  const visibleFields = section.hideEmpty
-    ? section.fields.filter((field) => {
-        const value = data?.[field.name] ?? field.value;
-        return value !== null && value !== undefined && value !== '';
-      })
-    : section.fields;
+  // 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;
 
-  // Hide entire section when all fields are empty
-  if (visibleFields.length === 0) return null;
+  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]);
 
-  // Apply auto-layout: infer columns and auto-span wide fields
-  const { fields: layoutFields, columns: effectiveColumns } = applyDetailAutoLayout(
-    visibleFields,
-    section.columns
-  );
+  const renderedFields = visibleCount !== undefined
+    ? layoutFields.slice(0, visibleCount)
+    : layoutFields;
 
   const content = (
     <div 
@@ -205,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

@@ -130,14 +130,8 @@ export const DetailView: React.FC<DetailViewProps> = ({
           ? dataSource.findOne(objectName, resourceId, params)
           : dataSource.findOne(objectName, resourceId);
 
-        return findOnePromise.then((result) => {
-          if (!isMounted) return;
-          if (result) {
-            setData(result);
-            setLoading(false);
-            return;
-          }
-          // Fallback: try alternate ID format for backward compatibility
+        // Helper: try alternate ID format (strip or prepend objectName prefix)
+        const tryAltId = () => {
           const resIdStr = String(resourceId);
           const altId = resIdStr.startsWith(prefix)
             ? resIdStr.slice(prefix.length)   // strip prefix
@@ -156,6 +150,19 @@ export const DetailView: React.FC<DetailViewProps> = ({
               setLoading(false);
             }
           });
+        };
+
+        return findOnePromise
+          .catch(() => null) // Convert any error to null to trigger alternate ID fallback
+          .then((result) => {
+          if (!isMounted) return;
+          if (result) {
+            setData(result);
+            setLoading(false);
+            return;
+          }
+          // Fallback: try alternate ID format for backward compatibility
+          return tryAltId();
         });
       }).catch((err) => {
          if (isMounted) {
@@ -593,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,