@marktiderman/genesis-ui 1.2.0 → 2.0.0

package/dist/components/data/index.js

@@ -1,151 +1,55 @@
 "use client";
-import { Spinner } from '../../chunk-OVU3Z2MT.js';
-import { Switch } from '../../chunk-2MXMWBDV.js';
+import { AppShell, PageHeader } from '../../chunk-FEJAZFP3.js';
+export { ViewSettings, ViewToggle } from '../../chunk-46TZGMFW.js';
 import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '../../chunk-N2ZFNOOT.js';
 import { Textarea } from '../../chunk-YETMISCE.js';
-import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../../chunk-2B3MFHBQ.js';
 import { Separator } from '../../chunk-SXSCHWZU.js';
-import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from '../../chunk-SCUT2ZCD.js';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from '../../chunk-XCGZPFT7.js';
 import { Skeleton } from '../../chunk-QFM4Z2SS.js';
 import { Progress } from '../../chunk-W5Y3LG5K.js';
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, DropdownMenuSeparator, DropdownMenuItem } from '../../chunk-SBJV3K4G.js';
-import { FormField, FormLabel, FormError, FormDescription } from '../../chunk-IP6TMT3D.js';
-import '../../chunk-T5VX5DYO.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, DropdownMenuSeparator, DropdownMenuItem } from '../../chunk-QJ6P2DW6.js';
 import { Input } from '../../chunk-QSXVL5UB.js';
-import { Checkbox } from '../../chunk-WZWR2ELB.js';
-import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator } from '../../chunk-7OBL3H5P.js';
-import { Popover, PopoverTrigger, PopoverContent } from '../../chunk-NJMO3VPA.js';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from '../../chunk-YZEA5TGK.js';
-import { Badge } from '../../chunk-NPNADZHM.js';
-import { Button } from '../../chunk-I6JQHP6D.js';
+import { Checkbox } from '../../chunk-SEBU6JCK.js';
 import { Card, CardContent, CardHeader, CardTitle } from '../../chunk-FN3FZVUR.js';
+import '../../chunk-B2GIBUQD.js';
+import { Badge } from '../../chunk-NPNADZHM.js';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../../chunk-FK42ZGGV.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../../chunk-22XB3Q6H.js';
+import { Switch } from '../../chunk-27ELYTGE.js';
+import { EmptyState } from '../../chunk-65SPT7EA.js';
+export { EmptyState } from '../../chunk-65SPT7EA.js';
+import { Button } from '../../chunk-NWSCYLPT.js';
+import { PageLoading } from '../../chunk-YRYQXU3G.js';
+import { Spinner } from '../../chunk-OVU3Z2MT.js';
+import { FormField, FormLabel, FormError, FormDescription } from '../../chunk-R7QFP6EL.js';
+import '../../chunk-F47U5KNW.js';
+import { DetailPage } from '../../chunk-AFZ76Q26.js';
+import '../../chunk-D2LIXA2Y.js';
+import '../../chunk-AVFZ4P4B.js';
+import { titleCase, useResourcePage } from '../../chunk-Q4I4SFBD.js';
+export { useSavedViews } from '../../chunk-GCQFVMPI.js';
+import '../../chunk-FTTNGGLA.js';
+import { useViewSettings } from '../../chunk-OZ7ZAYCS.js';
+export { CommandPalette, useCommandPaletteHotkey } from '../../chunk-CNTWQSUT.js';
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator } from '../../chunk-SEFK4NZV.js';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from '../../chunk-7XMZVISM.js';
 import { cn } from '../../chunk-NZ5WBA4R.js';
-import { titleCase, useResourcePage } from '../../chunk-QLCDAFS7.js';
-import '../../chunk-XISSLIMH.js';
-import { DefaultLink, defaultNavigate, isPathActive } from '../../chunk-AI6CCNWK.js';
-export { DefaultLink, defaultNavigate, isPathActive } from '../../chunk-AI6CCNWK.js';
+import { DefaultLink, defaultNavigate } from '../../chunk-6NPEMLBA.js';
+export { DefaultLink, defaultNavigate, isPathActive } from '../../chunk-6NPEMLBA.js';
+import { useKeyboardNavigation } from '../../chunk-YJ6MPS6U.js';
 import { useIsMobile } from '../../chunk-M7AU5DDM.js';
-import { Search, LayoutGrid, Table2, List, Settings2, AlertTriangle, RefreshCw, ChevronDown, Check, X, ArrowUpDown, Bookmark, Trash2, BookmarkPlus, Loader2, Columns3, ArrowUp, ArrowDown, ChevronLeft, ChevronRight, ExternalLink, Pencil, ChevronsUpDown, ImageIcon, Upload, AlertCircle, FileIcon, Menu, Sun, Moon, Plus } from 'lucide-react';
+import { AlertTriangle, RefreshCw, ChevronDown, Check, Search, X, ArrowUpDown, Bookmark, Trash2, BookmarkPlus, Loader2, Columns3, ArrowUp, ArrowDown, ChevronLeft, ChevronRight, ExternalLink, Pencil, ChevronsUpDown, ImageIcon, Upload, AlertCircle, FileIcon, Plus } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { formatDistanceToNow, format } from 'date-fns';
 import { useFieldArray, Controller, useWatch } from 'react-hook-form';
-import { useResource, useWizard, useResourceForm, buildArrayItemDefaults } from '@marktiderman/genesis-core/hooks';
+import { useResource, useWizard, useResourceForm, useOne, buildArrayItemDefaults } from '@marktiderman/genesis-core/hooks';
 import { useDataProvider } from '@marktiderman/genesis-core/provider';
 import { useDropzone } from 'react-dropzone';
 
-function EmptyState({
-  icon: Icon = Search,
-  message = "No items found",
-  action,
-  hasFilters = false,
-  onClearFilters
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: "text-center py-16 animate-fade-in", children: [
-    /* @__PURE__ */ jsx(Icon, { className: "h-10 w-10 text-muted-foreground/30 mx-auto mb-3" }),
-    /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: hasFilters ? "No results match your filters" : message }),
-    hasFilters && onClearFilters ? /* @__PURE__ */ jsx(Button, { variant: "link", size: "sm", onClick: onClearFilters, className: "mt-2", children: "Clear all filters" }) : action && /* @__PURE__ */ jsx("div", { className: "mt-4", children: action })
-  ] });
-}
-function ViewToggle({ viewMode, onViewModeChange }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center border rounded-lg overflow-hidden", children: [
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: viewMode === "grid" ? "default" : "ghost",
-        size: "icon",
-        className: "h-8 w-8 rounded-none",
-        onClick: () => onViewModeChange("grid"),
-        title: "Grid view",
-        children: /* @__PURE__ */ jsx(LayoutGrid, { className: "h-4 w-4" })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: viewMode === "table" ? "default" : "ghost",
-        size: "icon",
-        className: "h-8 w-8 rounded-none",
-        onClick: () => onViewModeChange("table"),
-        title: "Table view",
-        children: /* @__PURE__ */ jsx(Table2, { className: "h-4 w-4" })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: viewMode === "list" ? "default" : "ghost",
-        size: "icon",
-        className: "h-8 w-8 rounded-none",
-        onClick: () => onViewModeChange("list"),
-        title: "List view",
-        children: /* @__PURE__ */ jsx(List, { className: "h-4 w-4" })
-      }
-    )
-  ] });
-}
-var PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
-var DENSITY_OPTIONS = [
-  { value: "compact", label: "Compact" },
-  { value: "comfortable", label: "Comfortable" },
-  { value: "spacious", label: "Spacious" }
-];
-function ViewSettings({
-  pageSize,
-  onPageSizeChange,
-  density,
-  onDensityChange
-}) {
-  return /* @__PURE__ */ jsxs(Popover, { children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "ghost",
-        size: "icon",
-        className: "h-8 w-8",
-        title: "View settings",
-        children: /* @__PURE__ */ jsx(Settings2, { className: "h-4 w-4" })
-      }
-    ) }),
-    /* @__PURE__ */ jsxs(PopoverContent, { align: "end", className: "w-56 space-y-4", children: [
-      /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold", children: "Display Settings" }),
-      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx("label", { className: "text-xs text-muted-foreground", children: "Page size" }),
-        /* @__PURE__ */ jsxs(
-          Select,
-          {
-            value: String(pageSize),
-            onValueChange: (v) => onPageSizeChange(Number(v)),
-            children: [
-              /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 text-xs", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-              /* @__PURE__ */ jsx(SelectContent, { className: "bg-popover z-50", children: PAGE_SIZE_OPTIONS.map((n) => /* @__PURE__ */ jsxs(SelectItem, { value: String(n), children: [
-                n,
-                " items"
-              ] }, n)) })
-            ]
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx("label", { className: "text-xs text-muted-foreground", children: "Density" }),
-        /* @__PURE__ */ jsxs(
-          Select,
-          {
-            value: density,
-            onValueChange: (v) => onDensityChange(v),
-            children: [
-              /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 text-xs", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-              /* @__PURE__ */ jsx(SelectContent, { className: "bg-popover z-50", children: DENSITY_OPTIONS.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
-            ]
-          }
-        )
-      ] })
-    ] })
-  ] });
-}
 function DataPageShell({
   title,
-  icon: Icon,
+  icon,
   entityName,
   subtitle,
   createAction,
@@ -168,44 +72,57 @@ function DataPageShell({
   filters,
   hasActiveFilters = false,
   onClearFilters,
+  filtersCollapsible = false,
+  defaultFiltersOpen = false,
+  filtersOpen,
+  onFiltersOpenChange,
+  filtersLabel,
+  filtersHint,
+  headerOptions,
+  headerOptionsStorageKey,
   children
 }) {
   const entity = entityName || title.toLowerCase();
-  const hasViewToggle = viewMode && onViewModeChange;
-  const hasViewSettings = onPageSizeChange && onDensityChange;
-  const hasCount = count !== void 0 && totalCount !== void 0;
+  const collapseFilters = filtersCollapsible && filters != null;
+  const mergedOptions = {
+    defaultDetailsOpen: defaultFiltersOpen,
+    detailsLabel: filtersLabel,
+    subtitleInDetails: collapseFilters ? true : void 0,
+    ...headerOptions
+  };
+  const sharedHeaderProps = {
+    title,
+    subtitle,
+    icon,
+    entityName: entity,
+    count,
+    totalCount,
+    countActive: hasActiveFilters,
+    viewMode,
+    onViewModeChange,
+    pageSize,
+    onPageSizeChange,
+    density,
+    onDensityChange,
+    createAction,
+    optionsStorageKey: headerOptionsStorageKey
+  };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
-        Icon && /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 overflow-hidden", children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5 text-primary" }) }),
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx(
-            "h1",
-            {
-              "data-testid": "page-title",
-              className: "text-xl sm:text-2xl font-bold font-display tracking-tight truncate",
-              children: title
-            }
-          ),
-          subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground truncate", children: subtitle })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
-        hasCount && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: hasActiveFilters ? `${count} of ${totalCount}` : `${totalCount} ${entity.endsWith("s") ? entity : `${entity}s`}` }),
-        hasViewToggle && /* @__PURE__ */ jsx(ViewToggle, { viewMode, onViewModeChange }),
-        hasViewSettings && /* @__PURE__ */ jsx(
-          ViewSettings,
-          {
-            pageSize: pageSize ?? 25,
-            onPageSizeChange,
-            density: density ?? "comfortable",
-            onDensityChange
-          }
-        ),
-        createAction
-      ] })
+    collapseFilters ? /* @__PURE__ */ jsx(
+      PageHeader,
+      {
+        ...sharedHeaderProps,
+        details: filters,
+        detailsOpen: filtersOpen,
+        onDetailsOpenChange: onFiltersOpenChange,
+        detailsActive: hasActiveFilters,
+        detailsHint: filtersHint,
+        options: mergedOptions
+      }
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(PageHeader, { ...sharedHeaderProps, options: headerOptions }),
+      filters
     ] }),
-    filters,
     isLoading ? /* @__PURE__ */ jsx(
       "div",
       {
@@ -222,17 +139,17 @@ function DataPageShell({
       }
     ) : hasError ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-16 text-center", children: [
       /* @__PURE__ */ jsx(AlertTriangle, { className: "h-10 w-10 text-destructive mb-3" }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground mb-1", children: "Something went wrong" }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-4", children: errorMessage || `Failed to load ${entity}s. Please try again.` }),
+      /* @__PURE__ */ jsx("p", { className: "mb-1 text-sm font-medium text-foreground", children: "Something went wrong" }),
+      /* @__PURE__ */ jsx("p", { className: "mb-4 text-sm text-muted-foreground", children: errorMessage || `Failed to load ${entity}s. Please try again.` }),
       onRetry && /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: onRetry, children: [
-        /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4 mr-1" }),
+        /* @__PURE__ */ jsx(RefreshCw, { className: "mr-1 h-4 w-4" }),
         " Retry"
       ] })
     ] }) : isEmpty ? /* @__PURE__ */ jsx(
       EmptyState,
       {
         icon: emptyIcon,
-        message: emptyMessage,
+        title: emptyMessage,
         action: emptyAction,
         hasFilters: hasActiveFilters,
         onClearFilters
@@ -609,14 +526,25 @@ function DataGrid({
   }
   if (viewMode === "list" && renderListItem) {
     const keyFnList = getKey || ((item) => item.id);
-    return /* @__PURE__ */ jsx("div", { className: "divide-y divide-border rounded-lg border", children: items.map((item, i) => /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(
       "div",
       {
-        className: "px-4 py-3 transition-colors hover:bg-accent/50",
-        children: renderListItem(item, i)
-      },
-      keyFnList(item)
-    )) });
+        ref: keyboardContainerRef,
+        className: "divide-y divide-border rounded-lg border",
+        children: items.map((item, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-nav-item": true,
+            className: cn(
+              "px-4 py-3 transition-colors hover:bg-accent/50",
+              focusedIndex === i && "ring-2 ring-inset ring-primary bg-accent/50"
+            ),
+            children: renderListItem(item, i)
+          },
+          keyFnList(item)
+        ))
+      }
+    );
   }
   const visible = items.slice(0, visibleCount);
   const keyFn = getKey || ((item) => item.id);
@@ -647,6 +575,16 @@ function DataGrid({
     )
   ] });
 }
+var DENSITY_CELL = {
+  compact: "py-1 h-8",
+  comfortable: "py-2",
+  spacious: "py-3"
+};
+var DENSITY_HEAD = {
+  compact: "h-8 py-1",
+  comfortable: "h-10",
+  spacious: "h-12 py-3"
+};
 function getCellClasses(col) {
   const hide = col.hideBelow ? col.hideBelow === "sm" ? "hidden sm:table-cell" : col.hideBelow === "md" ? "hidden md:table-cell" : col.hideBelow === "lg" ? "hidden lg:table-cell" : "hidden xl:table-cell" : "";
   return cn(col.width, hide);
@@ -764,8 +702,11 @@ function DataTable({
   pageSizeOptions = [10, 25, 50, 100],
   stickyHeader = true,
   resizeKey,
-  stickyFirstColumn
+  stickyFirstColumn,
+  density = "comfortable"
 }) {
+  const cellDensity = DENSITY_CELL[density];
+  const headDensity = DENSITY_HEAD[density];
   const [sorts, setSorts] = useState([]);
   const handleSort = useCallback(
     (key, shiftKey) => {
@@ -788,15 +729,6 @@ function DataTable({
   );
   const [visibleCols, setVisibleCols] = useState(
     () => {
-      if (columnVisibilityKey) {
-        try {
-          const saved = localStorage.getItem(
-            `dt-vis-${columnVisibilityKey}`
-          );
-          if (saved) return JSON.parse(saved);
-        } catch {
-        }
-      }
       const initial = {};
       columns.forEach((c) => {
         initial[c.key] = c.defaultVisible !== false;
@@ -804,14 +736,40 @@ function DataTable({
       return initial;
     }
   );
+  const [visibilityHydrated, setVisibilityHydrated] = useState(false);
   useEffect(() => {
-    if (columnVisibilityKey) {
-      localStorage.setItem(
-        `dt-vis-${columnVisibilityKey}`,
-        JSON.stringify(visibleCols)
-      );
+    if (!columnVisibilityKey) {
+      setVisibilityHydrated(true);
+      return;
+    }
+    try {
+      const saved = localStorage.getItem(`dt-vis-${columnVisibilityKey}`);
+      if (saved) {
+        const parsed = JSON.parse(saved);
+        setVisibleCols((prev) => {
+          const next = { ...prev };
+          for (const [k, v] of Object.entries(parsed)) {
+            if (k in next || columns.some((c) => c.key === k)) {
+              next[k] = v;
+            }
+          }
+          columns.forEach((c) => {
+            if (!(c.key in next)) next[c.key] = c.defaultVisible !== false;
+          });
+          return next;
+        });
+      }
+    } catch {
     }
-  }, [visibleCols, columnVisibilityKey]);
+    setVisibilityHydrated(true);
+  }, [columnVisibilityKey]);
+  useEffect(() => {
+    if (!visibilityHydrated || !columnVisibilityKey) return;
+    localStorage.setItem(
+      `dt-vis-${columnVisibilityKey}`,
+      JSON.stringify(visibleCols)
+    );
+  }, [visibleCols, columnVisibilityKey, visibilityHydrated]);
   const toggleColumnVisibility = useCallback((key) => {
     setVisibleCols((prev) => ({ ...prev, [key]: !prev[key] }));
   }, []);
@@ -950,7 +908,7 @@ function DataTable({
         {
           className: stickyHeader ? "sticky top-0 z-10 bg-background" : "",
           children: /* @__PURE__ */ jsxs(TableRow, { children: [
-            selectable && /* @__PURE__ */ jsx(TableHead, { className: "w-10", children: /* @__PURE__ */ jsx(
+            selectable && /* @__PURE__ */ jsx(TableHead, { className: cn("w-10", headDensity), children: /* @__PURE__ */ jsx(
               Checkbox,
               {
                 checked: items.length > 0 && selected?.size === items.length,
@@ -967,6 +925,7 @@ function DataTable({
                 {
                   className: cn(
                     getCellClasses(col),
+                    headDensity,
                     col.sortable && "cursor-pointer select-none",
                     resizableColumns && "relative",
                     isFirstCol && "sticky left-0 bg-background",
@@ -998,7 +957,7 @@ function DataTable({
                 col.key
               );
             }),
-            renderActions && /* @__PURE__ */ jsx(TableHead, { className: "w-10" })
+            renderActions && /* @__PURE__ */ jsx(TableHead, { className: cn("w-10", headDensity) })
           ] })
         }
       ),
@@ -1018,13 +977,20 @@ function DataTable({
             "data-state": selected?.has(id) ? "selected" : void 0,
             onClick: onRowClick ? () => onRowClick(item) : void 0,
             children: [
-              selectable && /* @__PURE__ */ jsx(TableCell, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
-                Checkbox,
+              selectable && /* @__PURE__ */ jsx(
+                TableCell,
                 {
-                  checked: selected?.has(id),
-                  onCheckedChange: () => onToggleSelect?.(id)
+                  className: cellDensity,
+                  onClick: (e) => e.stopPropagation(),
+                  children: /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      checked: selected?.has(id),
+                      onCheckedChange: () => onToggleSelect?.(id)
+                    }
+                  )
                 }
-              ) }),
+              ),
               activeColumns.map((col, colIndex) => {
                 const acc = col.accessor || ((it) => it[col.key]);
                 const value = acc(item);
@@ -1036,6 +1002,7 @@ function DataTable({
                       getCellClasses(
                         col
                       ),
+                      cellDensity,
                       isFirstCol && "sticky left-0 z-[1] bg-background"
                     ),
                     children: col.editable ? /* @__PURE__ */ jsx(
@@ -1050,7 +1017,14 @@ function DataTable({
                   col.key
                 );
               }),
-              renderActions && /* @__PURE__ */ jsx(TableCell, { onClick: (e) => e.stopPropagation(), children: renderActions(item) })
+              renderActions && /* @__PURE__ */ jsx(
+                TableCell,
+                {
+                  className: cellDensity,
+                  onClick: (e) => e.stopPropagation(),
+                  children: renderActions(item)
+                }
+              )
             ]
           },
           id
@@ -1347,6 +1321,11 @@ var widthClasses = {
   md: "w-96",
   lg: "w-[480px]"
 };
+var dialogMaxWidthClasses = {
+  sm: "sm:max-w-sm",
+  md: "sm:max-w-lg",
+  lg: "sm:max-w-2xl"
+};
 function keyToLabel(key) {
   return key.replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\b\w/g, (c) => c.toUpperCase());
 }
@@ -1357,6 +1336,37 @@ function formatValue(value) {
   if (typeof value === "object") return JSON.stringify(value);
   return String(value);
 }
+function renderTitleBlock(layout, title, subtitle) {
+  const titleText = title || "Detail panel";
+  if (layout === "dialog") {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { className: cn("text-sm font-semibold truncate", !title && "sr-only"), children: titleText }),
+      /* @__PURE__ */ jsx(
+        DialogDescription,
+        {
+          className: cn("text-xs text-muted-foreground truncate", !subtitle && "sr-only"),
+          children: subtitle || titleText
+        }
+      )
+    ] });
+  }
+  if (layout === "sheet") {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SheetTitle, { className: cn("text-sm font-semibold truncate", !title && "sr-only"), children: titleText }),
+      /* @__PURE__ */ jsx(
+        SheetDescription,
+        {
+          className: cn("text-xs text-muted-foreground truncate", !subtitle && "sr-only"),
+          children: subtitle || titleText
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    title && /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold truncate", children: title }),
+    subtitle && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate", children: subtitle })
+  ] });
+}
 function DetailPanel({
   item,
   open,
@@ -1367,7 +1377,8 @@ function DetailPanel({
   onDelete,
   children,
   fields,
-  width = "md"
+  width = "md",
+  layout = "sheet"
 }) {
   if (!open || !item) return null;
   const renderContent = () => {
@@ -1392,78 +1403,114 @@ function DetailPanel({
       ] })
     ] }, key)) });
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "div",
+  const header = /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border px-4 py-3", children: [
+    /* @__PURE__ */ jsx("div", { className: "min-w-0", children: renderTitleBlock(layout, title, subtitle) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
+      onEdit && /* @__PURE__ */ jsx(
+        Button,
+        {
+          testID: "detail-panel-edit",
+          variant: "ghost",
+          size: "icon",
+          className: "h-8 w-8",
+          onClick: () => onEdit(item),
+          "aria-label": "Edit",
+          children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" })
+        }
+      ),
+      onDelete && /* @__PURE__ */ jsx(
+        Button,
+        {
+          testID: "detail-panel-delete",
+          variant: "ghost",
+          size: "icon",
+          className: "h-8 w-8 text-destructive hover:text-destructive",
+          onClick: () => onDelete(item),
+          "aria-label": "Delete",
+          children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          testID: "detail-panel-close",
+          variant: "ghost",
+          size: "icon",
+          className: "h-8 w-8",
+          onClick: onClose,
+          "aria-label": "Close",
+          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+        }
+      )
+    ] })
+  ] });
+  const content = /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-4 py-3", children: renderContent() });
+  if (layout === "dialog") {
+    return /* @__PURE__ */ jsx(
+      Dialog,
       {
-        className: "fixed inset-0 z-40 bg-black/50 sm:hidden",
-        onClick: onClose,
-        "aria-hidden": "true"
+        open,
+        onOpenChange: (next) => {
+          if (!next) onClose();
+        },
+        children: /* @__PURE__ */ jsxs(
+          DialogContent,
+          {
+            showCloseButton: false,
+            className: cn(
+              "flex max-h-[85vh] flex-col gap-0 overflow-hidden p-0",
+              dialogMaxWidthClasses[width]
+            ),
+            children: [
+              header,
+              content
+            ]
+          }
+        )
       }
-    ),
-    /* @__PURE__ */ jsxs(
-      "div",
+    );
+  }
+  if (layout === "sheet") {
+    return /* @__PURE__ */ jsx(
+      Sheet,
       {
-        role: "dialog",
-        "aria-label": title ?? "Detail panel",
-        onKeyDown: (e) => {
-          if (e.key === "Escape") onClose();
+        open,
+        onOpenChange: (next) => {
+          if (!next) onClose();
         },
-        tabIndex: -1,
-        className: cn(
-          "fixed inset-y-0 right-0 z-50 flex flex-col border-l border-border bg-card shadow-xl",
-          "max-w-[90vw]",
-          widthClasses[width],
-          "transform transition-transform duration-200 ease-in-out",
-          open ? "translate-x-0" : "translate-x-full"
-        ),
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border px-4 py-3", children: [
-            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-              title && /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold truncate", children: title }),
-              subtitle && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate", children: subtitle })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
-              onEdit && /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "ghost",
-                  size: "icon",
-                  className: "h-8 w-8",
-                  onClick: () => onEdit(item),
-                  "aria-label": "Edit",
-                  children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" })
-                }
-              ),
-              onDelete && /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "ghost",
-                  size: "icon",
-                  className: "h-8 w-8 text-destructive hover:text-destructive",
-                  onClick: () => onDelete(item),
-                  "aria-label": "Delete",
-                  children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "ghost",
-                  size: "icon",
-                  className: "h-8 w-8",
-                  onClick: onClose,
-                  "aria-label": "Close",
-                  children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-4 py-3", children: renderContent() })
-        ]
+        children: /* @__PURE__ */ jsxs(
+          SheetContent,
+          {
+            side: "right",
+            showCloseButton: false,
+            className: cn(
+              "flex flex-col gap-0 overflow-hidden p-0 max-w-[90vw] sm:max-w-[90vw]",
+              widthClasses[width]
+            ),
+            children: [
+              header,
+              content
+            ]
+          }
+        )
       }
-    )
-  ] });
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "region",
+      "aria-label": title || "Detail panel",
+      className: cn(
+        "flex flex-col rounded-lg border border-border bg-card",
+        widthClasses[width]
+      ),
+      children: [
+        header,
+        content
+      ]
+    }
+  );
 }
 function RelationField({
   field,
@@ -2389,13 +2436,19 @@ function ResourcePage(props) {
     formSteps,
     formLayout: formLayoutProp,
     bulkActions,
+    renderCard: renderCardProp,
+    gridCols: gridColsProp,
+    keyboardNavigation = true,
     toolbar,
     emptyState,
     resourceOptions,
     defaultView = "table",
-    onNavigate = defaultNavigate
+    onNavigate = defaultNavigate,
+    viewSettingsKey: viewSettingsKeyProp
   } = props;
   const isClientMode = !!resourceName;
+  const viewSettingsKey = viewSettingsKeyProp ?? resourceName ?? title.toLowerCase().replace(/\s+/g, "-");
+  const { settings, updateSetting } = useViewSettings(viewSettingsKey);
   const resourceHook = useResource(
     resourceName ?? "__noop__",
     isClientMode ? resourceOptions : { enabled: false }
@@ -2511,6 +2564,35 @@ function ResourcePage(props) {
     }
     page.handleRowClick(item);
   };
+  const hasBulkSelect = !!bulkActions && bulkActions.length > 0;
+  const overlayOpen = page.detailOpen || formOpen;
+  const keyboardNav = useKeyboardNavigation({
+    itemCount: page.data.length,
+    enabled: keyboardNavigation && page.viewMode !== "table",
+    overlayOpen,
+    onOpen: (index) => {
+      const item = page.data[index];
+      if (item) handleRowClick(item);
+    },
+    onToggleSelect: hasBulkSelect ? (index) => {
+      const item = page.data[index];
+      if (item) {
+        handleToggleSelect(
+          String(item.id ?? "")
+        );
+      }
+    } : void 0,
+    // Supplied only while there is an open detail to close — the hook
+    // suppresses Backspace's default whenever this is present, so leaving it
+    // wired up permanently would swallow the browser/app's Backspace on
+    // every grid/list page (including detail="none" and detail="route",
+    // which never open one). `detailOpen` is only ever true for the panel
+    // and modal modes, so it is the precise precondition here.
+    onBack: page.detailOpen ? () => {
+      page.setDetailOpen(false);
+      page.setSelectedItem(null);
+    } : void 0
+  });
   const showCreateButton = onCreate || useBuiltInCreate;
   const createButton = showCreateButton ? /* @__PURE__ */ jsxs(Button, { size: "sm", onClick: handleCreate, children: [
     /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 mr-1" }),
@@ -2521,15 +2603,83 @@ function ResourcePage(props) {
     createButton
   ] }) : void 0;
   const isEmpty = !isLoading && !hasError && page.data.length === 0;
-  const modalDetailContent = page.selectedItem ? renderDetailProp ? renderDetailProp(page.selectedItem) : detailFields ? /* @__PURE__ */ jsx("dl", { className: "space-y-3", children: detailFields.map((field) => /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("dt", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider", children: field.label }),
-    /* @__PURE__ */ jsx("dd", { className: "mt-1 text-sm text-foreground", children: field.render ? field.render(
-      page.selectedItem[field.key],
-      page.selectedItem
-    ) : String(
-      page.selectedItem[field.key] ?? "\u2014"
-    ) })
-  ] }, field.key)) }) : null : null;
+  const cardActionsFor = (item) => ({
+    ...actions,
+    open: () => handleRowClick(item)
+  });
+  const rowActivationProps = (item, label, testId) => ({
+    role: "button",
+    tabIndex: 0,
+    "aria-label": label || void 0,
+    "data-testid": testId,
+    onClick: () => handleRowClick(item),
+    onKeyDown: (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleRowClick(item);
+      }
+    }
+  });
+  const renderDefaultCard = (item) => {
+    const cols = page.columns;
+    const titleCol = cols[0];
+    const titleVal = titleCol ? String(item[titleCol.key] ?? "") : "";
+    const badgeCol = cols[1];
+    const badgeVal = badgeCol ? item[badgeCol.key] : null;
+    const priceCol = cols.find(
+      (c, i) => i > 1 && /price|cost|amount|total/i.test(c.key)
+    );
+    const priceVal = priceCol ? item[priceCol.key] : null;
+    const metaCols = cols.filter(
+      (c) => c !== titleCol && c !== badgeCol && c !== priceCol
+    );
+    return /* @__PURE__ */ jsxs(
+      Card,
+      {
+        ...rowActivationProps(item, titleVal, "resource-card"),
+        className: "h-full cursor-pointer hover:shadow-md motion-safe:transition-shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        children: [
+          /* @__PURE__ */ jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsx(CardTitle, { className: "text-base truncate", children: titleVal }) }),
+          /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              badgeCol && /* @__PURE__ */ jsx("span", { children: badgeCol.render ? badgeCol.render(item, badgeVal, actions) : badgeVal != null ? String(badgeVal) : "\u2014" }),
+              priceVal != null && /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: String(priceVal) })
+            ] }),
+            metaCols.map((col) => {
+              const val = item[col.key];
+              return /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: "text-xs text-muted-foreground truncate",
+                  children: col.render ? col.render(item, val, actions) : val != null ? String(val) : "\u2014"
+                },
+                col.key
+              );
+            })
+          ] }) })
+        ]
+      }
+    );
+  };
+  const renderDefaultListItem = (item) => {
+    const cols = page.columns;
+    const titleCol = cols[0];
+    const titleVal = titleCol ? String(item[titleCol.key] ?? "") : "";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rowActivationProps(item, titleVal, "resource-list-row"),
+        className: "flex items-center justify-between px-3 py-2 border-b cursor-pointer hover:bg-muted/50 motion-safe:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-sm truncate", children: titleVal }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 text-xs text-muted-foreground", children: cols.slice(1, 4).map((col) => {
+            const val = item[col.key];
+            return /* @__PURE__ */ jsx("span", { children: col.render ? col.render(item, val, actions) : val != null ? String(val) : "\u2014" }, col.key);
+          }) })
+        ]
+      }
+    );
+  };
   return /* @__PURE__ */ jsxs(
     DataPageShell,
     {
@@ -2544,6 +2694,10 @@ function ResourcePage(props) {
       onRetry: isClientMode ? () => resourceHook.list.refetch() : void 0,
       viewMode: page.viewMode,
       onViewModeChange: page.setViewMode,
+      pageSize: settings.pageSize,
+      onPageSizeChange: (size) => updateSetting("pageSize", size),
+      density: settings.density,
+      onDensityChange: (d) => updateSetting("density", d),
       createAction,
       hasActiveFilters: page.hasActiveFilters,
       onClearFilters: page.clearFilters,
@@ -2584,7 +2738,10 @@ function ResourcePage(props) {
           {
             items: page.data,
             viewMode: page.viewMode,
+            gridCols: gridColsProp,
             getKey: (item) => String(item.id ?? ""),
+            focusedIndex: keyboardNav.focusedIndex,
+            keyboardContainerRef: keyboardNav.containerRef,
             renderTable: (items) => /* @__PURE__ */ jsx(
               DataTable,
               {
@@ -2595,72 +2752,16 @@ function ResourcePage(props) {
                 selectable: !!bulkActions && bulkActions.length > 0,
                 selected: selectedIds,
                 onToggleSelect: handleToggleSelect,
-                onToggleAll: handleToggleAll
+                onToggleAll: handleToggleAll,
+                density: settings.density,
+                pageSize: settings.pageSize
               }
             ),
-            renderCard: (item) => {
-              const cols = page.columns;
-              const titleCol = cols[0];
-              const titleVal = titleCol ? String(item[titleCol.key] ?? "") : "";
-              const badgeCol = cols[1];
-              const badgeVal = badgeCol ? item[badgeCol.key] : null;
-              const priceCol = cols.find(
-                (c, i) => i > 1 && /price|cost|amount|total/i.test(c.key)
-              );
-              const priceVal = priceCol ? item[priceCol.key] : null;
-              const metaCols = cols.filter(
-                (c) => c !== titleCol && c !== badgeCol && c !== priceCol
-              );
-              return /* @__PURE__ */ jsxs(
-                Card,
-                {
-                  className: "h-full cursor-pointer hover:shadow-md transition-shadow",
-                  onClick: () => handleRowClick(item),
-                  children: [
-                    /* @__PURE__ */ jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsx(CardTitle, { className: "text-base truncate", children: titleVal }) }),
-                    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-                        badgeCol && /* @__PURE__ */ jsx("span", { children: badgeCol.render ? badgeCol.render(item, badgeVal, actions) : badgeVal != null ? String(badgeVal) : "\u2014" }),
-                        priceVal != null && /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: String(priceVal) })
-                      ] }),
-                      metaCols.map((col) => {
-                        const val = item[col.key];
-                        return /* @__PURE__ */ jsx(
-                          "p",
-                          {
-                            className: "text-xs text-muted-foreground truncate",
-                            children: col.render ? col.render(item, val, actions) : val != null ? String(val) : "\u2014"
-                          },
-                          col.key
-                        );
-                      })
-                    ] }) })
-                  ]
-                }
-              );
-            },
-            renderListItem: (item) => {
-              const cols = page.columns;
-              const titleCol = cols[0];
-              const titleVal = titleCol ? String(item[titleCol.key] ?? "") : "";
-              return /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: "flex items-center justify-between px-3 py-2 border-b cursor-pointer hover:bg-muted/50 transition-colors",
-                  onClick: () => handleRowClick(item),
-                  children: [
-                    /* @__PURE__ */ jsx("span", { className: "font-medium text-sm truncate", children: titleVal }),
-                    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 text-xs text-muted-foreground", children: cols.slice(1, 4).map((col) => {
-                      const val = item[col.key];
-                      return /* @__PURE__ */ jsx("span", { children: col.render ? col.render(item, val, actions) : val != null ? String(val) : "\u2014" }, col.key);
-                    }) })
-                  ]
-                }
-              );
-            }
+            renderCard: (item, index) => renderCardProp ? renderCardProp(item, index, cardActionsFor(item)) : renderDefaultCard(item),
+            renderListItem: (item, index) => renderCardProp ? renderCardProp(item, index, cardActionsFor(item)) : renderDefaultListItem(item)
           }
         ),
-        detail === "panel" && /* @__PURE__ */ jsx(
+        (detail === "panel" || detail === "modal") && /* @__PURE__ */ jsx(
           DetailPanel,
           {
             item: page.selectedItem,
@@ -2675,48 +2776,10 @@ function ResourcePage(props) {
             onDelete,
             fields: detailFields,
             width: detailWidth,
+            layout: detail === "modal" ? "dialog" : "sheet",
             children: renderDetailProp ? (item) => renderDetailProp(item) : void 0
           }
         ),
-        detail === "modal" && /* @__PURE__ */ jsx(
-          Dialog,
-          {
-            open: page.detailOpen,
-            onOpenChange: (open) => {
-              page.setDetailOpen(open);
-              if (!open) page.setSelectedItem(null);
-            },
-            children: /* @__PURE__ */ jsxs(DialogContent, { children: [
-              /* @__PURE__ */ jsxs(DialogHeader, { children: [
-                /* @__PURE__ */ jsx(DialogTitle, { children: detailTitle }),
-                detailSubtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: detailSubtitle })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "py-4", children: [
-                modalDetailContent,
-                (onEdit || useBuiltInEdit || onDelete) && page.selectedItem && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-4 pt-4 border-t", children: [
-                  (onEdit || useBuiltInEdit) && /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      variant: "outline",
-                      size: "sm",
-                      onClick: () => handleEdit(page.selectedItem),
-                      children: "Edit"
-                    }
-                  ),
-                  onDelete && /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      variant: "destructive",
-                      size: "sm",
-                      onClick: () => onDelete(page.selectedItem),
-                      children: "Delete"
-                    }
-                  )
-                ] })
-              ] })
-            ] })
-          }
-        ),
         (useBuiltInCreate || useBuiltInEdit) && resourceName && /* @__PURE__ */ jsx(
           ResourceForm,
           {
@@ -2743,178 +2806,80 @@ function ResourcePage(props) {
     }
   );
 }
-function ThemeToggle() {
-  const [dark, setDark] = useState(false);
-  useEffect(() => {
-    const stored = localStorage.getItem("theme");
-    const prefersDark = window.matchMedia(
-      "(prefers-color-scheme: dark)"
-    ).matches;
-    const isDark = stored === "dark" || !stored && prefersDark;
-    setDark(isDark);
-    document.documentElement.classList.toggle("dark", isDark);
-  }, []);
-  function toggle() {
-    const next = !dark;
-    setDark(next);
-    document.documentElement.classList.toggle("dark", next);
-    localStorage.setItem("theme", next ? "dark" : "light");
-  }
-  return /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: toggle, className: "h-8 w-8", children: dark ? /* @__PURE__ */ jsx(Sun, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Moon, { className: "h-4 w-4" }) });
+function pick(record, field) {
+  const value = field ? record[field] : record.name ?? record.title ?? record.id;
+  return value == null ? "" : String(value);
 }
-function SidebarNav({
-  navItems,
-  onNavClick,
-  linkComponent: LinkComp,
-  activePath,
-  isActive
-}) {
-  return /* @__PURE__ */ jsx("nav", { className: "flex-1 p-3 space-y-1", children: navItems.map((item) => {
-    const active = isActive(item.to, activePath);
-    return /* @__PURE__ */ jsxs(
-      LinkComp,
-      {
-        href: item.to,
-        onClick: onNavClick,
-        "aria-current": active ? "page" : void 0,
-        className: cn(
-          "flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
-          active ? "bg-sidebar-accent text-sidebar-primary" : "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
-        ),
-        children: [
-          /* @__PURE__ */ jsx(item.icon, { className: "h-4 w-4" }),
-          item.label
-        ]
-      },
-      item.to
-    );
-  }) });
+function NotFound() {
+  return /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      title: "Not found",
+      description: "This record no longer exists, or you don't have access to it."
+    }
+  );
 }
-function SidebarLogo({
-  appName,
-  appLogo
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-    appLogo && /* @__PURE__ */ jsx("div", { className: "h-7 w-7 rounded-lg bg-primary flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-primary-foreground text-sm font-bold", children: appLogo }) }),
-    /* @__PURE__ */ jsx("span", { className: "font-semibold text-sidebar-foreground", children: appName })
-  ] });
+function isNotFoundError(error) {
+  if (!(error instanceof Error)) return false;
+  if (error.code === "PGRST116") return true;
+  return /\[MockProvider\] Record not found/i.test(error.message) || /switchboard-data-provider: no ".*" row with id/i.test(error.message);
 }
-function AppShell({
-  appName,
-  appLogo,
-  navItems,
+function ResourceDetailPage({
+  resource,
+  id,
+  titleField,
+  subtitleField,
+  select,
+  breadcrumb,
+  actions,
+  sidebar,
   children,
-  showThemeToggle = true,
-  linkComponent = DefaultLink,
-  activePath,
-  isActive = isPathActive
+  className,
+  testID
 }) {
-  const [mobileOpen, setMobileOpen] = useState(false);
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-screen overflow-hidden", children: [
-    /* @__PURE__ */ jsxs("aside", { className: "hidden md:flex md:w-60 flex-col border-r border-sidebar-border bg-sidebar", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex h-14 items-center gap-2 px-4 border-b border-sidebar-border", children: /* @__PURE__ */ jsx(SidebarLogo, { appName, appLogo }) }),
-      /* @__PURE__ */ jsx(
-        SidebarNav,
-        {
-          navItems,
-          linkComponent,
-          activePath,
-          isActive
-        }
-      ),
-      showThemeToggle && /* @__PURE__ */ jsx("div", { className: "border-t border-sidebar-border p-3 flex items-center justify-end", children: /* @__PURE__ */ jsx(ThemeToggle, {}) })
-    ] }),
-    mobileOpen && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "fixed inset-0 z-40 bg-black/50 md:hidden",
-        onClick: () => setMobileOpen(false)
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "aside",
+  const { data, isLoading, isError, error } = useOne(resource, id, {
+    select,
+    // `useOne` defaults to `enabled: !!id`, which is wrong for a numeric
+    // primary key: id `0` is falsy, so the query would never run and the page
+    // would report a record that exists as missing, without ever asking the
+    // provider. `Identifier` is `string | number`, so this is reachable.
+    // Presence is the question, not truthiness.
+    enabled: id != null
+  });
+  if (id == null || isLoading) {
+    return /* @__PURE__ */ jsx(PageLoading, { testID: testID ? `${testID}-loading` : void 0 });
+  }
+  if (isError) {
+    if (isNotFoundError(error)) return /* @__PURE__ */ jsx(NotFound, {});
+    return /* @__PURE__ */ jsx(
+      EmptyState,
       {
-        className: cn(
-          "fixed inset-y-0 left-0 z-50 w-60 flex flex-col border-r border-sidebar-border bg-sidebar transition-transform md:hidden",
-          mobileOpen ? "translate-x-0" : "-translate-x-full"
-        ),
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex h-14 items-center justify-between px-4 border-b border-sidebar-border", children: [
-            /* @__PURE__ */ jsx(SidebarLogo, { appName, appLogo }),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon",
-                onClick: () => setMobileOpen(false),
-                children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            SidebarNav,
-            {
-              navItems,
-              onNavClick: () => setMobileOpen(false),
-              linkComponent,
-              activePath,
-              isActive
-            }
-          )
-        ]
+        icon: AlertTriangle,
+        title: "Couldn't load this record",
+        description: error instanceof Error ? error.message : void 0
       }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
-      /* @__PURE__ */ jsxs("header", { className: "flex h-14 items-center gap-3 border-b px-4 md:hidden", children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "ghost",
-            size: "icon",
-            onClick: () => setMobileOpen(true),
-            children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "flex-1 font-semibold", children: appName }),
-        showThemeToggle && /* @__PURE__ */ jsx(ThemeToggle, {})
-      ] }),
-      /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-y-auto pb-16 md:pb-0", children: /* @__PURE__ */ jsx("div", { className: "p-4 sm:p-6 lg:p-8", children }) }),
-      /* @__PURE__ */ jsx("nav", { className: "fixed bottom-0 left-0 right-0 z-30 flex border-t bg-background md:hidden", children: navItems.map((item) => {
-        const LinkComp = linkComponent;
-        const active = isActive(item.to, activePath);
-        return /* @__PURE__ */ jsxs(
-          LinkComp,
-          {
-            href: item.to,
-            "aria-current": active ? "page" : void 0,
-            className: cn(
-              "flex flex-1 flex-col items-center gap-1 py-2 text-xs font-medium transition-colors",
-              active ? "text-primary" : "text-muted-foreground"
-            ),
-            children: [
-              /* @__PURE__ */ jsx(item.icon, { className: "h-5 w-5" }),
-              item.label
-            ]
-          },
-          item.to
-        );
-      }) })
-    ] })
-  ] });
-}
-function PageHeader({ title, subtitle, icon: Icon, actions }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
-      Icon && /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 overflow-hidden", children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5 text-primary" }) }),
-      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsx("h1", { className: "text-xl sm:text-2xl font-bold font-display tracking-tight truncate", children: title }),
-        subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground truncate", children: subtitle })
-      ] })
-    ] }),
-    actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 shrink-0", children: actions })
-  ] });
+    );
+  }
+  if (!data) return /* @__PURE__ */ jsx(NotFound, {});
+  return /* @__PURE__ */ jsx(
+    DetailPage,
+    {
+      className,
+      testID,
+      breadcrumb,
+      title: pick(data, titleField),
+      subtitle: subtitleField ? pick(data, subtitleField) : void 0,
+      actions: actions?.(data),
+      sidebar: sidebar?.(data),
+      children: children(data)
+    }
+  );
 }
 
-export { AppShell, BadgeCell, CurrencyCell, DataBulkBar, DataFilters, DataGrid, DataList, DataPageShell, DataTable, DateCell, DetailPanel, EmptyState, FieldArrayRenderer, FileUploadField, FilterCombobox, KanbanBoard, LinkCell, NumberCell, PageHeader, RelationField, ResourceForm, ResourcePage, StatCard, ThumbnailCell, ViewSettings, ViewToggle, WizardForm };
+// src/components/data/index.ts
+var AppShell2 = AppShell;
+var PageHeader2 = PageHeader;
+
+export { AppShell2 as AppShell, BadgeCell, CurrencyCell, DataBulkBar, DataFilters, DataGrid, DataList, DataPageShell, DataTable, DateCell, DetailPanel, FieldArrayRenderer, FileUploadField, FilterCombobox, KanbanBoard, LinkCell, NumberCell, PageHeader2 as PageHeader, RelationField, ResourceDetailPage, ResourceForm, ResourcePage, StatCard, ThumbnailCell, WizardForm };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map