@object-ui/plugin-list 0.5.1 → 3.0.0

package/dist/src/ViewSwitcher.d.ts

@@ -12,6 +12,8 @@ export interface ViewSwitcherProps {
     availableViews?: ViewType[];
     onViewChange: (view: ViewType) => void;
     className?: string;
+    /** Enable animated transitions between views (default: true) */
+    animated?: boolean;
 }
 export declare const ViewSwitcher: React.FC<ViewSwitcherProps>;
 //# sourceMappingURL=ViewSwitcher.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ViewSwitcher.d.ts","sourceRoot":"","sources":["../../src/ViewSwitcher.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,MAAM,MAAM,QAAQ,GAChB,MAAM,GACN,QAAQ,GACR,SAAS,GACT,UAAU,GACV,UAAU,GACV,OAAO,GACP,KAAK,CAAC;AAEV,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,QAAQ,CAAC;IACtB,cAAc,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC5B,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAsBD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAmCpD,CAAC"}
+{"version":3,"file":"ViewSwitcher.d.ts","sourceRoot":"","sources":["../../src/ViewSwitcher.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,MAAM,MAAM,QAAQ,GAChB,MAAM,GACN,QAAQ,GACR,SAAS,GACT,UAAU,GACV,UAAU,GACV,OAAO,GACP,KAAK,CAAC;AAEV,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,QAAQ,CAAC;IACtB,cAAc,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC5B,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAsBD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsDpD,CAAC"}

package/dist/src/index.d.ts

@@ -3,5 +3,6 @@ import { ViewSwitcher } from './ViewSwitcher';
 import { ObjectGallery } from './ObjectGallery';
 export { ListView, ViewSwitcher, ObjectGallery };
 export type { ListViewProps } from './ListView';
+export type { ObjectGalleryProps } from './ObjectGallery';
 export type { ViewSwitcherProps, ViewType } from './ViewSwitcher';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,YAAY,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/plugin-list",
-  "version": "0.5.1",
+  "version": "3.0.0",
   "type": "module",
   "license": "MIT",
   "description": "ListView plugin for Object UI - unified view component with view type switching",
@@ -25,19 +25,20 @@
   },
   "dependencies": {
     "lucide-react": "^0.563.0",
-    "@object-ui/components": "0.5.0",
-    "@object-ui/react": "0.5.0",
-    "@object-ui/types": "0.5.0",
-    "@object-ui/core": "0.5.0"
+    "@object-ui/components": "3.0.0",
+    "@object-ui/core": "3.0.0",
+    "@object-ui/mobile": "3.0.0",
+    "@object-ui/react": "3.0.0",
+    "@object-ui/types": "3.0.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^19.2.10",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.3",
+    "@types/react": "19.2.13",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "^5.1.4",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4",

package/src/ListView.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '@object-ui/react';
+import type { BaseSchema } from '@object-ui/types';
+
+const meta = {
+  title: 'Plugins/ListView',
+  component: SchemaRenderer,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } },
+  },
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
+
+export const Default: Story = {
+  render: renderStory,
+  args: {
+    type: 'list-view',
+    objectName: 'contacts',
+    viewType: 'grid',
+    fields: ['name', 'email', 'phone', 'company'],
+    sort: [{ field: 'name', order: 'asc' }],
+  } as any,
+};
+
+export const KanbanView: Story = {
+  render: renderStory,
+  args: {
+    type: 'list-view',
+    objectName: 'deals',
+    viewType: 'kanban',
+    fields: ['name', 'amount', 'stage', 'close_date'],
+    options: {
+      kanban: {
+        groupField: 'stage',
+        titleField: 'name',
+        cardFields: ['amount', 'close_date'],
+      },
+    },
+  } as any,
+};
+
+export const WithFilters: Story = {
+  render: renderStory,
+  args: {
+    type: 'list-view',
+    objectName: 'opportunities',
+    viewType: 'grid',
+    fields: ['name', 'amount', 'stage', 'owner', 'close_date'],
+    filters: [
+      ['stage', '=', 'Prospecting'],
+      'OR',
+      ['stage', '=', 'Qualification'],
+    ],
+    sort: [{ field: 'amount', order: 'desc' }],
+  } as any,
+};

package/src/ListView.tsx

@@ -7,13 +7,14 @@
  */
 
 import * as React from 'react';
-import { cn, Button, Input, Popover, PopoverContent, PopoverTrigger, FilterBuilder, SortBuilder } from '@object-ui/components';
+import { cn, Button, Input, Popover, PopoverContent, PopoverTrigger, FilterBuilder, SortBuilder, NavigationOverlay } from '@object-ui/components';
 import type { SortItem } from '@object-ui/components';
-import { Search, SlidersHorizontal, ArrowUpDown, X } from 'lucide-react';
+import { Search, SlidersHorizontal, ArrowUpDown, X, EyeOff, Group, Paintbrush, Ruler } from 'lucide-react';
 import type { FilterGroup } from '@object-ui/components';
 import { ViewSwitcher, ViewType } from './ViewSwitcher';
-import { SchemaRenderer } from '@object-ui/react';
+import { SchemaRenderer, useNavigationOverlay } from '@object-ui/react';
 import type { ListViewSchema } from '@object-ui/types';
+import { usePullToRefresh } from '@object-ui/mobile';
 
 export interface ListViewProps {
   schema: ListViewSchema;
@@ -22,6 +23,10 @@ export interface ListViewProps {
   onFilterChange?: (filters: any) => void;
   onSortChange?: (sort: any) => void;
   onSearchChange?: (search: string) => void;
+  /** Callback when a row/item is clicked (overrides NavigationConfig) */
+  onRowClick?: (record: Record<string, unknown>) => void;
+  /** Show view type switcher (Grid/Kanban/etc). Default: false (view type is fixed) */
+  showViewSwitcher?: boolean;
   [key: string]: any;
 }
 
@@ -65,6 +70,8 @@ export const ListView: React.FC<ListViewProps> = ({
   onFilterChange,
   onSortChange,
   onSearchChange,
+  onRowClick,
+  showViewSwitcher = false,
   ...props
 }) => {
   // Kernel level default: Ensure viewType is always defined (default to 'grid')
@@ -104,6 +111,16 @@ export const ListView: React.FC<ListViewProps> = ({
   const [data, setData] = React.useState<any[]>([]);
   const [loading, setLoading] = React.useState(false);
   const [objectDef, setObjectDef] = React.useState<any>(null);
+  const [refreshKey, setRefreshKey] = React.useState(0);
+
+  const handlePullRefresh = React.useCallback(async () => {
+    setRefreshKey(k => k + 1);
+  }, []);
+
+  const { ref: pullRef, isRefreshing, pullDistance } = usePullToRefresh<HTMLDivElement>({
+    onRefresh: handlePullRefresh,
+    enabled: !!dataSource && !!schema.objectName,
+  });
 
   const storageKey = React.useMemo(() => {
     return schema.id 
@@ -172,8 +189,8 @@ export const ListView: React.FC<ListViewProps> = ({
         } else if (results && typeof results === 'object') {
            if (Array.isArray((results as any).data)) {
               items = (results as any).data; 
-           } else if (Array.isArray((results as any).value)) {
-              items = (results as any).value;
+           } else if (Array.isArray((results as any).records)) {
+              items = (results as any).records;
            }
         }
         
@@ -190,7 +207,7 @@ export const ListView: React.FC<ListViewProps> = ({
     fetchData();
     
     return () => { isMounted = false; };
-  }, [schema.objectName, dataSource, schema.filters, currentSort, currentFilters]); // Re-fetch on filter/sort change
+  }, [schema.objectName, dataSource, schema.filters, currentSort, currentFilters, refreshKey]); // Re-fetch on filter/sort change
 
   // Available view types based on schema configuration
   const availableViews = React.useMemo(() => {
@@ -272,6 +289,14 @@ export const ListView: React.FC<ListViewProps> = ({
     onSearchChange?.(value);
   }, [onSearchChange]);
 
+  // --- NavigationConfig support ---
+  const navigation = useNavigationOverlay({
+    navigation: schema.navigation,
+    objectName: schema.objectName,
+    onNavigate: schema.onNavigate,
+    onRowClick,
+  });
+
   // Generate the appropriate view component schema
   const viewComponentSchema = React.useMemo(() => {
     const baseProps = {
@@ -282,6 +307,8 @@ export const ListView: React.FC<ListViewProps> = ({
       className: "h-full w-full",
       // Disable internal controls that clash with ListView toolbar
       showSearch: false,
+      // Pass navigation click handler to child views
+      onRowClick: navigation.handleClick,
     };
 
     switch (currentView) {
@@ -374,124 +401,189 @@ export const ListView: React.FC<ListViewProps> = ({
     }));
   }, [objectDef, schema.fields]);
 
+  const [searchExpanded, setSearchExpanded] = React.useState(false);
+
   return (
-    <div className={cn('flex flex-col h-full bg-background', className)}>
-      {/* Airtable-style Toolbar */}
-      <div className="border-b px-4 py-2 flex items-center justify-between gap-4 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-        <div className="flex items-center gap-2 flex-1 overflow-hidden">
-          {/* View Switcher on the Left */}
-          <div className="flex items-center pr-2 border-r mr-2">
-            <ViewSwitcher
-              currentView={currentView}
-              availableViews={availableViews}
-              onViewChange={handleViewChange}
-            />
-          </div>
-
-          {/* Action Tools */}
-          <div className="flex items-center gap-1">
-             <Popover open={showFilters} onOpenChange={setShowFilters}>
-               <PopoverTrigger asChild>
-                  <Button
-                    variant={hasFilters ? "secondary" : "ghost"}
-                    size="sm"
-                    className={cn(
-                      "h-8 px-2 lg:px-3 text-muted-foreground hover:text-primary",
-                      hasFilters && "text-primary bg-secondary/50"
-                    )}
-                  >
-                    <SlidersHorizontal className="h-4 w-4 mr-2" />
-                    <span className="hidden lg:inline">Filter</span>
-                    {hasFilters && (
-                      <span className="ml-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-primary/10 text-[10px] font-medium text-primary">
-                        {currentFilters.conditions?.length || 0}
-                      </span>
-                    )}
-                  </Button>
-               </PopoverTrigger>
-               <PopoverContent align="start" className="w-[600px] p-4">
-                  <div className="space-y-4">
-                    <div className="flex items-center justify-between border-b pb-2">
-                      <h4 className="font-medium text-sm">Filter Records</h4>
-                    </div>
-                    <FilterBuilder
-                      fields={filterFields}
-                      value={currentFilters}
-                      onChange={(newFilters) => {
-                        console.log('Filter Changed:', newFilters);
-                        setCurrentFilters(newFilters);
-                        // Convert FilterBuilder format to OData $filter string if needed
-                        // For now we just update state and notify listener
-                        // In a real app, this would likely build an OData string
-                        if (onFilterChange) onFilterChange(newFilters);
-                      }}
-                    />
-                  </div>
-               </PopoverContent>
-             </Popover>
-            
-             <Popover open={showSort} onOpenChange={setShowSort}>
-               <PopoverTrigger asChild>
-                  <Button
-                    variant={currentSort.length > 0 ? "secondary" : "ghost"}
-                    size="sm"
-                    className={cn(
-                      "h-8 px-2 lg:px-3 text-muted-foreground hover:text-primary",
-                      currentSort.length > 0 && "text-primary bg-secondary/50"
-                    )}
-                  >
-                    <ArrowUpDown className="h-4 w-4 mr-2" />
-                    <span className="hidden lg:inline">Sort</span>
-                     {currentSort.length > 0 && (
-                      <span className="ml-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-primary/10 text-[10px] font-medium text-primary">
-                        {currentSort.length}
-                      </span>
-                    )}
-                  </Button>
-               </PopoverTrigger>
-               <PopoverContent align="start" className="w-[600px] p-4">
-                  <div className="space-y-4">
-                    <div className="flex items-center justify-between border-b pb-2">
-                       <h4 className="font-medium text-sm">Sort Records</h4>
-                    </div>
-                    <SortBuilder
-                      fields={filterFields}
-                      value={currentSort}
-                      onChange={(newSort) => {
-                        console.log('Sort Changed:', newSort);
-                        setCurrentSort(newSort);
-                        if (onSortChange) onSortChange(newSort);
-                      }}
-                    />
-                  </div>
-               </PopoverContent>
-             </Popover>
-            
-            {/* Future: Group, Color, Height */}
-          </div>
+    <div ref={pullRef} className={cn('flex flex-col h-full bg-background relative', className)}>
+      {pullDistance > 0 && (
+        <div
+          className="flex items-center justify-center text-xs text-muted-foreground"
+          style={{ height: pullDistance }}
+        >
+          {isRefreshing ? 'Refreshing…' : 'Pull to refresh'}
+        </div>
+      )}
+      {/* Airtable-style Toolbar — Row 1: View tabs */}
+      {showViewSwitcher && (
+        <div className="border-b px-4 py-1 flex items-center bg-background">
+          <ViewSwitcher
+            currentView={currentView}
+            availableViews={availableViews}
+            onViewChange={handleViewChange}
+          />
         </div>
+      )}
+
+      {/* Airtable-style Toolbar — Row 2: Tool buttons */}
+      <div className="border-b px-2 sm:px-4 py-1 flex items-center justify-between gap-1 sm:gap-2 bg-background">
+        <div className="flex items-center gap-0.5 overflow-hidden flex-1 min-w-0">
+          {/* Hide Fields */}
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 px-2 text-muted-foreground hover:text-primary text-xs"
+            disabled
+          >
+            <EyeOff className="h-3.5 w-3.5 mr-1.5" />
+            <span className="hidden sm:inline">Hide fields</span>
+          </Button>
 
-        {/* Right Actions: Search + New */}
-        <div className="flex items-center gap-2">
-             <div className="relative w-40 lg:w-64 transition-all">
-                <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                <Input
-                  placeholder="Find..."
-                  value={searchTerm}
-                  onChange={(e) => handleSearchChange(e.target.value)}
-                  className="pl-8 h-8 text-sm bg-muted/50 border-transparent hover:bg-muted focus:bg-background focus:border-input transition-colors"
+          {/* Filter */}
+          <Popover open={showFilters} onOpenChange={setShowFilters}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className={cn(
+                  "h-7 px-2 text-muted-foreground hover:text-primary text-xs",
+                  hasFilters && "text-primary"
+                )}
+              >
+                <SlidersHorizontal className="h-3.5 w-3.5 mr-1.5" />
+                <span className="hidden sm:inline">Filter</span>
+                {hasFilters && (
+                  <span className="ml-1 flex h-4 min-w-[16px] items-center justify-center rounded-full bg-primary/10 text-[10px] font-medium text-primary">
+                    {currentFilters.conditions?.length || 0}
+                  </span>
+                )}
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent align="start" className="w-[calc(100vw-2rem)] sm:w-[600px] max-w-[600px] p-3 sm:p-4">
+              <div className="space-y-4">
+                <div className="flex items-center justify-between border-b pb-2">
+                  <h4 className="font-medium text-sm">Filter Records</h4>
+                </div>
+                <FilterBuilder
+                  fields={filterFields}
+                  value={currentFilters}
+                  onChange={(newFilters) => {
+                    setCurrentFilters(newFilters);
+                    if (onFilterChange) onFilterChange(newFilters);
+                  }}
                 />
-                 {searchTerm && (
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="absolute right-1 top-1/2 -translate-y-1/2 h-6 w-6 p-0 hover:bg-muted-foreground/20"
-                    onClick={() => handleSearchChange('')}
-                  >
-                    <X className="h-3 w-3" />
-                  </Button>
+              </div>
+            </PopoverContent>
+          </Popover>
+
+          {/* Group */}
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 px-2 text-muted-foreground hover:text-primary text-xs"
+            disabled
+          >
+            <Group className="h-3.5 w-3.5 mr-1.5" />
+            <span className="hidden sm:inline">Group</span>
+          </Button>
+
+          {/* Sort */}
+          <Popover open={showSort} onOpenChange={setShowSort}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className={cn(
+                  "h-7 px-2 text-muted-foreground hover:text-primary text-xs",
+                  currentSort.length > 0 && "text-primary"
+                )}
+              >
+                <ArrowUpDown className="h-3.5 w-3.5 mr-1.5" />
+                <span className="hidden sm:inline">Sort</span>
+                {currentSort.length > 0 && (
+                  <span className="ml-1 flex h-4 min-w-[16px] items-center justify-center rounded-full bg-primary/10 text-[10px] font-medium text-primary">
+                    {currentSort.length}
+                  </span>
                 )}
-             </div>
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent align="start" className="w-[calc(100vw-2rem)] sm:w-[600px] max-w-[600px] p-3 sm:p-4">
+              <div className="space-y-4">
+                <div className="flex items-center justify-between border-b pb-2">
+                  <h4 className="font-medium text-sm">Sort Records</h4>
+                </div>
+                <SortBuilder
+                  fields={filterFields}
+                  value={currentSort}
+                  onChange={(newSort) => {
+                    setCurrentSort(newSort);
+                    if (onSortChange) onSortChange(newSort);
+                  }}
+                />
+              </div>
+            </PopoverContent>
+          </Popover>
+
+          {/* Color */}
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 px-2 text-muted-foreground hover:text-primary text-xs"
+            disabled
+          >
+            <Paintbrush className="h-3.5 w-3.5 mr-1.5" />
+            <span className="hidden sm:inline">Color</span>
+          </Button>
+
+          {/* Row Height */}
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 px-2 text-muted-foreground hover:text-primary text-xs hidden lg:flex"
+            disabled
+          >
+            <Ruler className="h-3.5 w-3.5 mr-1.5" />
+            <span className="hidden sm:inline">Row height</span>
+          </Button>
+        </div>
+
+        {/* Right: Search */}
+        <div className="flex items-center gap-1">
+          {searchExpanded ? (
+            <div className="relative w-36 sm:w-48 lg:w-64">
+              <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+              <Input
+                placeholder="Find..."
+                value={searchTerm}
+                onChange={(e) => handleSearchChange(e.target.value)}
+                className="pl-7 h-7 text-xs bg-muted/50 border-transparent hover:bg-muted focus:bg-background focus:border-input transition-colors"
+                autoFocus
+                onBlur={() => {
+                  if (!searchTerm) setSearchExpanded(false);
+                }}
+              />
+              <Button
+                variant="ghost"
+                size="sm"
+                className="absolute right-0.5 top-1/2 -translate-y-1/2 h-5 w-5 p-0 hover:bg-muted-foreground/20"
+                onClick={() => {
+                  handleSearchChange('');
+                  setSearchExpanded(false);
+                }}
+              >
+                <X className="h-3 w-3" />
+              </Button>
+            </div>
+          ) : (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 px-2 text-muted-foreground hover:text-primary text-xs"
+              onClick={() => setSearchExpanded(true)}
+            >
+              <Search className="h-3.5 w-3.5 mr-1.5" />
+              <span className="hidden sm:inline">Search</span>
+            </Button>
+          )}
         </div>
       </div>
 
@@ -499,7 +591,7 @@ export const ListView: React.FC<ListViewProps> = ({
       {/* Filters Panel - Removed as it is now in Popover */}
 
       {/* View Content */}
-      <div className="flex-1 min-h-0 bg-background relative overflow-hidden">
+      <div key={currentView} className="flex-1 min-h-0 bg-background relative overflow-hidden animate-in fade-in-0 duration-200">
         <SchemaRenderer 
           schema={viewComponentSchema} 
           {...props} 
@@ -507,6 +599,33 @@ export const ListView: React.FC<ListViewProps> = ({
           loading={loading}
         />
       </div>
+
+      {/* Navigation Overlay (drawer/modal/popover) */}
+      {navigation.isOverlay && (
+        <NavigationOverlay
+          {...navigation}
+          title={
+            schema.label
+              ? `${schema.label} Detail`
+              : schema.objectName
+                ? `${schema.objectName.charAt(0).toUpperCase() + schema.objectName.slice(1)} Detail`
+                : 'Record Detail'
+          }
+        >
+          {(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>
+      )}
     </div>
   );
 };