@marktiderman/genesis-ui 1.3.0 → 2.1.0

package/dist/components/data/index.js

@@ -1,473 +1,52 @@
 "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 { Progress } from '../../chunk-W5Y3LG5K.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-QJ6P2DW6.js';
 import { Input } from '../../chunk-QSXVL5UB.js';
-import { Popover, PopoverTrigger, PopoverContent } from '../../chunk-NJMO3VPA.js';
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, DropdownMenuSeparator, DropdownMenuItem } from '../../chunk-SBJV3K4G.js';
-import { FormField, FormLabel, FormError, FormDescription } from '../../chunk-IP6TMT3D.js';
-import { Label } from '../../chunk-T5VX5DYO.js';
+import { Checkbox } from '../../chunk-SEBU6JCK.js';
 import { Card, CardContent, CardHeader, CardTitle } from '../../chunk-FN3FZVUR.js';
-import { Checkbox } from '../../chunk-WZWR2ELB.js';
-import { Collapsible, CollapsibleContent } from '../../chunk-KBS4BHME.js';
+import '../../chunk-B2GIBUQD.js';
 import { Badge } from '../../chunk-NPNADZHM.js';
-import { Button } from '../../chunk-ZJFSZFPI.js';
-import { titleCase, useResourcePage } from '../../chunk-QLCDAFS7.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-GDFNAHI4.js';
 export { useSavedViews } from '../../chunk-GCQFVMPI.js';
-import '../../chunk-XISSLIMH.js';
+import '../../chunk-FTTNGGLA.js';
 import { useViewSettings } from '../../chunk-OZ7ZAYCS.js';
-export { CommandPalette, useCommandPaletteHotkey } from '../../chunk-A2OXCNNY.js';
-import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator } from '../../chunk-7OBL3H5P.js';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from '../../chunk-YZEA5TGK.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 { DefaultLink, defaultNavigate, isPathActive } from '../../chunk-6NPEMLBA.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, ListFilter, SlidersHorizontal, AlertTriangle, RefreshCw, ChevronDown, Check, X, ArrowUpDown, Bookmark, Trash2, BookmarkPlus, Loader2, Columns3, ArrowUp, ArrowDown, ChevronLeft, ChevronRight, ExternalLink, Pencil, ChevronsUpDown, ImageIcon, Upload, AlertCircle, FileIcon, Menu, PanelLeft, PanelLeftClose, 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 { useId, useState, useEffect, useMemo, useCallback, useRef } from 'react';
+import { useState, useRef, useEffect, useCallback, useMemo, Fragment as Fragment$1 } 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)) })
-            ]
-          }
-        )
-      ] })
-    ] })
-  ] });
-}
-
-// src/option-storage.ts
-function readStoredOptions(key) {
-  if (typeof window === "undefined") return {};
-  try {
-    const raw = localStorage.getItem(key);
-    if (!raw) return {};
-    const parsed = JSON.parse(raw);
-    if (!parsed || typeof parsed !== "object") return {};
-    return parsed;
-  } catch {
-    return {};
-  }
-}
-function writeStoredOptions(key, value) {
-  if (typeof window === "undefined") return;
-  try {
-    localStorage.setItem(key, JSON.stringify(value));
-  } catch {
-  }
-}
-function pluralizeEntity(entity, count) {
-  if (count === 1) return entity;
-  return entity.endsWith("s") ? entity : `${entity}s`;
-}
-var OPTION_DEFAULTS = {
-  showIcon: true,
-  showSubtitle: true,
-  showCount: true,
-  showViewToggle: true,
-  showViewSettings: true,
-  showCreate: true,
-  showDetailsToggle: true,
-  showDetailsHint: true,
-  subtitleInDetails: void 0,
-  defaultDetailsOpen: false,
-  detailsLabel: "Details",
-  configurable: void 0
-};
-var BOOLEAN_OPTION_KEYS = [
-  "showIcon",
-  "showSubtitle",
-  "showCount",
-  "showViewToggle",
-  "showViewSettings",
-  "showCreate",
-  "showDetailsToggle",
-  "showDetailsHint",
-  "subtitleInDetails",
-  "defaultDetailsOpen",
-  "configurable"
-];
-var STRING_OPTION_KEYS = ["detailsLabel"];
-function readStoredOptions2(key) {
-  const raw = readStoredOptions(key);
-  const sanitized = {};
-  for (const optKey of BOOLEAN_OPTION_KEYS) {
-    const value = raw[optKey];
-    if (typeof value === "boolean") {
-      sanitized[optKey] = value;
-    }
-  }
-  for (const optKey of STRING_OPTION_KEYS) {
-    const value = raw[optKey];
-    if (typeof value === "string") {
-      sanitized[optKey] = value;
-    }
-  }
-  return sanitized;
-}
-function PageHeader({
-  title,
-  subtitle,
-  icon: Icon,
-  options: optionsProp,
-  optionsStorageKey,
-  actions,
-  details,
-  detailsOpen,
-  onDetailsOpenChange,
-  detailsActive = false,
-  detailsHint,
-  count,
-  totalCount,
-  entityName,
-  countActive = false,
-  viewMode,
-  onViewModeChange,
-  pageSize,
-  onPageSizeChange,
-  density,
-  onDensityChange,
-  createAction
-}) {
-  const detailsRegionId = useId();
-  const hasDetails = details != null;
-  const hasCount = count !== void 0 && totalCount !== void 0;
-  const hasViewToggle = Boolean(viewMode && onViewModeChange);
-  const hasViewSettings = Boolean(onPageSizeChange && onDensityChange);
-  const hasCreate = createAction != null;
-  const [userOverrides, setUserOverrides] = useState(
-    {}
-  );
-  const [hydratedKey, setHydratedKey] = useState(
-    optionsStorageKey ? void 0 : ""
-  );
-  useEffect(() => {
-    if (!optionsStorageKey) {
-      setUserOverrides({});
-      setHydratedKey("");
-      return;
-    }
-    setUserOverrides(readStoredOptions2(optionsStorageKey));
-    setHydratedKey(optionsStorageKey);
-  }, [optionsStorageKey]);
-  useEffect(() => {
-    if (!optionsStorageKey || hydratedKey !== optionsStorageKey) return;
-    writeStoredOptions(optionsStorageKey, userOverrides);
-  }, [optionsStorageKey, userOverrides, hydratedKey]);
-  const resolved = useMemo(() => {
-    const merged = {
-      ...OPTION_DEFAULTS,
-      ...optionsProp,
-      ...userOverrides
-    };
-    if (merged.subtitleInDetails === void 0) {
-      merged.subtitleInDetails = hasDetails;
-    }
-    if (merged.configurable === void 0) {
-      merged.configurable = hasDetails || hasCount || hasViewSettings || hasViewToggle;
-    }
-    return merged;
-  }, [
-    optionsProp,
-    userOverrides,
-    hasDetails,
-    hasCount,
-    hasViewSettings,
-    hasViewToggle
-  ]);
-  const patchOption = useCallback((key, value) => {
-    setUserOverrides((prev) => ({ ...prev, [key]: value }));
-  }, []);
-  const moveSubtitle = Boolean(resolved.subtitleInDetails) && hasDetails;
-  const showTitleSubtitle = Boolean(subtitle) && Boolean(resolved.showSubtitle) && !moveSubtitle;
-  const [uncontrolledOpen, setUncontrolledOpen] = useState(
-    () => optionsProp?.defaultDetailsOpen ?? OPTION_DEFAULTS.defaultDetailsOpen
-  );
-  const isControlled = detailsOpen !== void 0;
-  const open = isControlled ? detailsOpen : uncontrolledOpen;
-  const setOpen = (next) => {
-    if (!isControlled) setUncontrolledOpen(next);
-    onDetailsOpenChange?.(next);
-  };
-  const detailsLabel = resolved.detailsLabel ?? "Details";
-  const entity = entityName || "item";
-  const toggles = [
-    { key: "showIcon", label: "Icon", available: Boolean(Icon) },
-    {
-      key: "showSubtitle",
-      label: "Subtitle",
-      available: Boolean(subtitle) && !moveSubtitle
-    },
-    { key: "showCount", label: "Count", available: hasCount },
-    { key: "showViewToggle", label: "View toggle", available: hasViewToggle },
-    {
-      key: "showViewSettings",
-      label: "Display settings",
-      available: hasViewSettings
-    },
-    { key: "showCreate", label: "Create action", available: hasCreate },
-    {
-      key: "showDetailsToggle",
-      label: "Filters / details",
-      available: hasDetails
-    },
-    {
-      key: "showDetailsHint",
-      label: "Collapsed hint",
-      available: hasDetails && detailsHint != null
-    }
-  ].filter((t) => t.available);
-  const showDetailsToggle = hasDetails && Boolean(resolved.showDetailsToggle);
-  const showHint = hasDetails && !open && Boolean(resolved.showDetailsHint) && detailsHint != null;
-  const actionsCluster = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 shrink-0", children: [
-    showHint ? /* @__PURE__ */ jsx("span", { className: "hidden max-w-[14rem] truncate text-xs text-muted-foreground sm:inline", children: detailsHint }) : null,
-    hasCount && resolved.showCount !== false ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: countActive ? `${count} of ${totalCount}` : `${totalCount} ${pluralizeEntity(entity, totalCount)}` }) : null,
-    hasViewToggle && resolved.showViewToggle !== false ? /* @__PURE__ */ jsx(ViewToggle, { viewMode, onViewModeChange }) : null,
-    showDetailsToggle ? /* @__PURE__ */ jsxs(
-      Button,
-      {
-        type: "button",
-        variant: "ghost",
-        size: "icon",
-        className: cn(
-          "relative h-8 w-8",
-          (open || detailsActive) && "bg-accent text-accent-foreground"
-        ),
-        onClick: () => setOpen(!open),
-        "data-testid": "page-header-details-toggle",
-        title: open ? `Hide ${detailsLabel}` : `Show ${detailsLabel}`,
-        "aria-label": open ? `Hide ${detailsLabel}` : `Show ${detailsLabel}`,
-        "aria-expanded": open,
-        "aria-controls": detailsRegionId,
-        testID: "page-header-details-toggle",
-        children: [
-          /* @__PURE__ */ jsx(ListFilter, { className: "h-4 w-4" }),
-          detailsActive ? /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "absolute right-1.5 top-1.5 size-1.5 rounded-full bg-primary",
-              "aria-hidden": true
-            }
-          ) : null
-        ]
-      }
-    ) : null,
-    hasViewSettings && resolved.showViewSettings !== false ? /* @__PURE__ */ jsx(
-      ViewSettings,
-      {
-        pageSize: pageSize ?? 25,
-        onPageSizeChange,
-        density: density ?? "comfortable",
-        onDensityChange
-      }
-    ) : null,
-    hasCreate && resolved.showCreate !== false ? createAction : null,
-    actions,
-    resolved.configurable && toggles.length > 0 ? /* @__PURE__ */ jsxs(Popover, { children: [
-      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          variant: "ghost",
-          size: "icon",
-          className: "h-8 w-8",
-          title: "Header options",
-          "aria-label": "Header options",
-          "data-testid": "page-header-options",
-          testID: "page-header-options",
-          children: /* @__PURE__ */ jsx(SlidersHorizontal, { className: "h-4 w-4" })
-        }
-      ) }),
-      /* @__PURE__ */ jsxs(PopoverContent, { align: "end", className: "w-64 space-y-3", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold", children: "Header options" }),
-          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Customize this page header. Saved on this device when a storage key is set." })
-        ] }),
-        /* @__PURE__ */ jsx("ul", { className: "space-y-3", children: toggles.map((t) => {
-          const checked = Boolean(resolved[t.key] ?? true);
-          return /* @__PURE__ */ jsxs(
-            "li",
-            {
-              className: "flex items-center justify-between gap-3",
-              children: [
-                /* @__PURE__ */ jsx(
-                  Label,
-                  {
-                    htmlFor: `page-header-opt-${t.key}`,
-                    className: "text-sm font-normal",
-                    children: t.label
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Switch,
-                  {
-                    id: `page-header-opt-${t.key}`,
-                    checked,
-                    onCheckedChange: (v) => patchOption(t.key, v)
-                  }
-                )
-              ]
-            },
-            t.key
-          );
-        }) }),
-        optionsStorageKey && Object.keys(userOverrides).length > 0 ? /* @__PURE__ */ jsx(
-          Button,
-          {
-            type: "button",
-            variant: "ghost",
-            size: "sm",
-            className: "h-8 w-full text-xs",
-            onClick: () => setUserOverrides({}),
-            "data-testid": "page-header-options-reset",
-            "aria-label": "Reset header options",
-            testID: "page-header-options-reset",
-            children: "Reset to defaults"
-          }
-        ) : null
-      ] })
-    ] }) : null
-  ] });
-  const titleRow = /* @__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 && resolved.showIcon !== false ? /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-primary/10", children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5 text-primary" }) }) : null,
-      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsx(
-          "h1",
-          {
-            "data-testid": "page-title",
-            className: "truncate font-display text-xl font-bold tracking-tight sm:text-2xl",
-            children: title
-          }
-        ),
-        showTitleSubtitle ? /* @__PURE__ */ jsx("p", { className: "truncate text-sm text-muted-foreground", children: subtitle }) : null
-      ] })
-    ] }),
-    actionsCluster
-  ] });
-  if (!hasDetails) {
-    return titleRow;
-  }
-  return /* @__PURE__ */ jsxs(Collapsible, { open, onOpenChange: setOpen, children: [
-    titleRow,
-    /* @__PURE__ */ jsx(CollapsibleContent, { id: detailsRegionId, className: "mt-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 rounded-lg border border-border bg-card/40 p-3 sm:p-4", children: [
-      moveSubtitle && subtitle && resolved.showSubtitle !== false ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: subtitle }) : null,
-      details
-    ] }) })
-  ] });
-}
 function DataPageShell({
   title,
   icon,
@@ -570,7 +149,7 @@ function DataPageShell({
       EmptyState,
       {
         icon: emptyIcon,
-        message: emptyMessage,
+        title: emptyMessage,
         action: emptyAction,
         hasFilters: hasActiveFilters,
         onClearFilters
@@ -947,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);
@@ -1731,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());
 }
@@ -1741,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,
@@ -1751,7 +1377,8 @@ function DetailPanel({
   onDelete,
   children,
   fields,
-  width = "md"
+  width = "md",
+  layout = "sheet"
 }) {
   if (!open || !item) return null;
   const renderContent = () => {
@@ -1776,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,
@@ -2761,6 +2424,24 @@ function ResourcePage(props) {
     searchPlaceholder,
     initialFilters,
     onFiltersChange,
+    page: pageProp,
+    perPage: perPageProp,
+    onPageChange,
+    onPerPageChange,
+    onSortChange,
+    onSearchChange,
+    savedViews,
+    onLoadView,
+    onSaveView,
+    onDeleteView,
+    canSaveViews,
+    columnVisibility,
+    columnVisibilityKey,
+    resizableColumns,
+    resizeKey,
+    stickyHeader,
+    stickyFirstColumn,
+    pageSizeOptions,
     onCreate,
     onEdit,
     onDelete,
@@ -2773,6 +2454,9 @@ function ResourcePage(props) {
     formSteps,
     formLayout: formLayoutProp,
     bulkActions,
+    renderCard: renderCardProp,
+    gridCols: gridColsProp,
+    keyboardNavigation = true,
     toolbar,
     emptyState,
     resourceOptions,
@@ -2781,8 +2465,10 @@ function ResourcePage(props) {
     viewSettingsKey: viewSettingsKeyProp
   } = props;
   const isClientMode = !!resourceName;
+  const isServerControlled = pageProp !== void 0 || perPageProp !== void 0 || onPageChange !== void 0 || onPerPageChange !== void 0 || onSortChange !== void 0 || onSearchChange !== void 0;
   const viewSettingsKey = viewSettingsKeyProp ?? resourceName ?? title.toLowerCase().replace(/\s+/g, "-");
   const { settings, updateSetting } = useViewSettings(viewSettingsKey);
+  const effectivePageSize = perPageProp ?? settings.pageSize;
   const resourceHook = useResource(
     resourceName ?? "__noop__",
     isClientMode ? resourceOptions : { enabled: false }
@@ -2803,7 +2489,8 @@ function ResourcePage(props) {
     defaultView,
     detail,
     titleField: titleFieldProp,
-    subtitleField: subtitleFieldProp
+    subtitleField: subtitleFieldProp,
+    controlled: isServerControlled
   });
   const actions = useMemo(() => {
     if (isClientMode) {
@@ -2815,15 +2502,24 @@ function ResourcePage(props) {
     }
     return {
       update: async () => {
-        throw new Error("ResourceActions.update not available in server-data mode");
+        throw new Error(
+          "ResourceActions.update not available in server-data mode"
+        );
       },
       remove: async () => {
-        throw new Error("ResourceActions.remove not available in server-data mode");
+        throw new Error(
+          "ResourceActions.remove not available in server-data mode"
+        );
       },
       refetch: () => {
       }
     };
-  }, [isClientMode, resourceHook.update, resourceHook.remove, resourceHook.list]);
+  }, [
+    isClientMode,
+    resourceHook.update,
+    resourceHook.remove,
+    resourceHook.list
+  ]);
   const [selectedIds, setSelectedIds] = useState(/* @__PURE__ */ new Set());
   const handleToggleSelect = useCallback((id) => {
     setSelectedIds((prev) => {
@@ -2873,15 +2569,101 @@ function ResourcePage(props) {
     [useBuiltInEdit, onEdit]
   );
   const tableColumns = useMemo(() => {
-    if (!isClientMode) return page.tableColumns;
-    return page.columns.map((col) => ({
+    const base = isClientMode ? page.columns.map((col) => ({
       key: col.key,
       header: col.header ?? col.key,
       sortable: col.sortable ?? true,
       hideBelow: col.hideBelow,
       render: col.render ? (item, value) => col.render(item, value, actions) : void 0
-    }));
-  }, [isClientMode, page.columns, page.tableColumns, actions]);
+    })) : page.tableColumns;
+    if (!isServerControlled) return base;
+    return base.map((col) => ({ ...col, sortable: false }));
+  }, [
+    isClientMode,
+    isServerControlled,
+    page.columns,
+    page.tableColumns,
+    actions
+  ]);
+  const currentPage = pageProp ?? 1;
+  const handleSearchChange = useCallback(
+    (value) => {
+      page.filterConfig.onSearchChange(value);
+      if (!isServerControlled) return;
+      onSearchChange?.(value);
+      if (currentPage !== 1) onPageChange?.(1);
+    },
+    [
+      page.filterConfig,
+      isServerControlled,
+      onSearchChange,
+      onPageChange,
+      currentPage
+    ]
+  );
+  const handleSortSelect = useCallback(
+    (value) => {
+      page.filterConfig.onSortChange(value);
+      if (!isServerControlled) return;
+      const [field, order] = value.split(":");
+      onSortChange?.(
+        field && (order === "asc" || order === "desc") ? { field, order } : null
+      );
+      onPageChange?.(1);
+    },
+    [page.filterConfig, isServerControlled, onSortChange, onPageChange]
+  );
+  const handleClearFilters = useCallback(() => {
+    page.clearFilters();
+    if (!isServerControlled) return;
+    onSearchChange?.("");
+    onSortChange?.(null);
+    onPageChange?.(1);
+  }, [page, isServerControlled, onSearchChange, onSortChange, onPageChange]);
+  const handleStatusChange = useCallback(
+    (values) => {
+      page.filterConfig.statusChips?.onChange(values);
+      if (!isServerControlled) return;
+      if (currentPage !== 1) onPageChange?.(1);
+    },
+    [page.filterConfig, isServerControlled, onPageChange, currentPage]
+  );
+  const statusChipsConfig = useMemo(() => {
+    const base = page.filterConfig.statusChips;
+    if (!base) return void 0;
+    return { ...base, onChange: handleStatusChange };
+  }, [page.filterConfig.statusChips, handleStatusChange]);
+  const handlePageSizeChange = useCallback(
+    (size) => {
+      updateSetting("pageSize", size);
+      onPerPageChange?.(size);
+      if (isServerControlled) onPageChange?.(1);
+    },
+    [updateSetting, onPerPageChange, isServerControlled, onPageChange]
+  );
+  const missingPerPage = isServerControlled && !!onPageChange && perPageProp === void 0;
+  const missingTotal = isServerControlled && !!onPageChange && totalProp === void 0;
+  const pagerMisconfigured = missingPerPage || missingTotal;
+  const missingPagerProps = [
+    ...missingPerPage ? ["perPage"] : [],
+    ...missingTotal ? ["total"] : []
+  ];
+  const loggedMissingPerPageRef = useRef(false);
+  useEffect(() => {
+    if (!pagerMisconfigured) return;
+    if (loggedMissingPerPageRef.current) return;
+    loggedMissingPerPageRef.current = true;
+    console.error(
+      `ResourcePage: ${missingPagerProps.map((name) => `\`${name}\``).join(" and ")} ${missingPagerProps.length > 1 ? "are" : "is"} required when \`onPageChange\` is supplied.`
+    );
+  }, [pagerMisconfigured]);
+  const pagerPageSize = perPageProp ?? effectivePageSize;
+  const totalPages = Math.max(
+    1,
+    Math.ceil(displayTotal / Math.max(1, pagerPageSize))
+  );
+  const rangeFrom = page.data.length === 0 ? 0 : (currentPage - 1) * pagerPageSize + 1;
+  const rangeTo = rangeFrom === 0 ? 0 : rangeFrom + page.data.length - 1;
   const detailTitle = page.selectedItem ? String(
     page.selectedItem[page.titleField] ?? ""
   ) : "";
@@ -2898,6 +2680,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" }),
@@ -2908,15 +2719,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,
     {
@@ -2931,25 +2810,30 @@ function ResourcePage(props) {
       onRetry: isClientMode ? () => resourceHook.list.refetch() : void 0,
       viewMode: page.viewMode,
       onViewModeChange: page.setViewMode,
-      pageSize: settings.pageSize,
-      onPageSizeChange: (size) => updateSetting("pageSize", size),
+      pageSize: effectivePageSize,
+      onPageSizeChange: handlePageSizeChange,
       density: settings.density,
       onDensityChange: (d) => updateSetting("density", d),
       createAction,
       hasActiveFilters: page.hasActiveFilters,
-      onClearFilters: page.clearFilters,
+      onClearFilters: handleClearFilters,
       emptyAction: emptyState,
       filters: /* @__PURE__ */ jsx(
         DataFilters,
         {
           search: page.filterConfig.search,
-          onSearchChange: page.filterConfig.onSearchChange,
+          onSearchChange: handleSearchChange,
           searchPlaceholder,
           sort: page.filterConfig.sort,
-          onSortChange: page.filterConfig.onSortChange,
+          onSortChange: handleSortSelect,
           sortOptions: page.filterConfig.sortOptions,
-          statusChips: page.filterConfig.statusChips,
-          onClearAll: page.hasActiveFilters ? page.clearFilters : void 0
+          statusChips: statusChipsConfig,
+          savedViews,
+          onLoadView,
+          onSaveView,
+          onDeleteView,
+          canSaveViews,
+          onClearAll: page.hasActiveFilters ? handleClearFilters : void 0
         }
       ),
       children: [
@@ -2975,7 +2859,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,
               {
@@ -2988,72 +2875,109 @@ function ResourcePage(props) {
                 onToggleSelect: handleToggleSelect,
                 onToggleAll: handleToggleAll,
                 density: settings.density,
-                pageSize: settings.pageSize
+                pageSize: effectivePageSize,
+                pageSizeOptions,
+                columnVisibility,
+                columnVisibilityKey,
+                resizableColumns,
+                resizeKey,
+                stickyHeader,
+                stickyFirstColumn,
+                pagination: isServerControlled ? false : void 0
               }
             ),
-            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",
+            renderCard: (item, index) => renderCardProp ? renderCardProp(item, index, cardActionsFor(item)) : renderDefaultCard(item),
+            renderListItem: (item, index) => renderCardProp ? renderCardProp(item, index, cardActionsFor(item)) : renderDefaultListItem(item)
+          }
+        ),
+        isServerControlled && onPageChange && pagerMisconfigured && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center gap-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive",
+            "data-testid": "resource-page-pagination-error",
+            role: "alert",
+            children: [
+              /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                "Pagination unavailable:",
+                " ",
+                missingPagerProps.map((name, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                  index > 0 ? " and " : null,
+                  /* @__PURE__ */ jsx("code", { children: name })
+                ] }, name)),
+                " ",
+                missingPagerProps.length > 1 ? "are" : "is",
+                " required when",
+                " ",
+                /* @__PURE__ */ jsx("code", { children: "onPageChange" }),
+                " is supplied."
+              ] })
+            ]
+          }
+        ),
+        isServerControlled && onPageChange && !pagerMisconfigured && /* @__PURE__ */ jsxs(
+          "nav",
+          {
+            "aria-label": "Pagination",
+            className: "flex flex-col sm:flex-row items-center justify-between gap-2 px-3 py-2 text-sm",
+            "data-testid": "resource-page-pagination",
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
                 {
-                  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);
-                    }) })
-                  ]
+                  className: "text-muted-foreground",
+                  "data-testid": "resource-page-range",
+                  "aria-live": "polite",
+                  children: displayTotal === 0 ? "No records" : `Showing ${rangeFrom}-${rangeTo} of ${displayTotal}`
                 }
-              );
-            }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    disabled: currentPage <= 1,
+                    onClick: () => onPageChange(currentPage - 1),
+                    testID: "resource-page-prev",
+                    children: [
+                      /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4 mr-1", "aria-hidden": "true" }),
+                      "Previous"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: "text-muted-foreground",
+                    "data-testid": "resource-page-indicator",
+                    children: [
+                      "Page ",
+                      currentPage,
+                      " of ",
+                      totalPages
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    disabled: currentPage >= totalPages,
+                    onClick: () => onPageChange(currentPage + 1),
+                    testID: "resource-page-next",
+                    children: [
+                      "Next",
+                      /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 ml-1", "aria-hidden": "true" })
+                    ]
+                  }
+                )
+              ] })
+            ]
           }
         ),
-        detail === "panel" && /* @__PURE__ */ jsx(
+        (detail === "panel" || detail === "modal") && /* @__PURE__ */ jsx(
           DetailPanel,
           {
             item: page.selectedItem,
@@ -3068,48 +2992,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,
           {
@@ -3136,769 +3022,80 @@ function ResourcePage(props) {
     }
   );
 }
-var OPTION_DEFAULTS2 = {
-  showLogo: true,
-  showAppName: true,
-  showThemeToggle: true,
-  showCollapse: true,
-  showUserSlot: true,
-  showFooter: true,
-  showSecondaryNav: true,
-  showMobileBottomNav: true,
-  defaultCollapsed: false,
-  configurable: void 0,
-  density: "comfortable",
-  railWidth: "narrow",
-  scrollRoot: "container"
-};
-function readStoredCollapsed(key) {
-  if (typeof window === "undefined") return void 0;
-  try {
-    const raw = localStorage.getItem(`${key}:collapsed`);
-    if (raw === "1") return true;
-    if (raw === "0") return false;
-    return void 0;
-  } catch {
-    return void 0;
-  }
+function pick(record, field) {
+  const value = field ? record[field] : record.name ?? record.title ?? record.id;
+  return value == null ? "" : String(value);
 }
-function writeStoredCollapsed(key, collapsed) {
-  if (typeof window === "undefined") return;
-  try {
-    localStorage.setItem(`${key}:collapsed`, collapsed ? "1" : "0");
-  } catch {
-  }
-}
-function ThemeToggle({ testId }) {
-  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");
-  }
+function NotFound() {
   return /* @__PURE__ */ jsx(
-    Button,
+    EmptyState,
     {
-      variant: "ghost",
-      size: "icon",
-      onClick: toggle,
-      className: "h-8 w-8",
-      title: "Toggle theme",
-      "aria-label": "Toggle theme",
-      "data-testid": testId,
-      testID: testId,
-      children: dark ? /* @__PURE__ */ jsx(Sun, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Moon, { className: "h-4 w-4" })
+      title: "Not found",
+      description: "This record no longer exists, or you don't have access to it."
     }
   );
 }
-function itemIsActive(item, activePath, isActive) {
-  if (item.end) {
-    return Boolean(activePath && activePath === item.to);
-  }
-  if (isActive(item.to, activePath)) return true;
-  return Boolean(
-    item.children?.some((child) => itemIsActive(child, activePath, isActive))
-  );
+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 NavLinkRow({
-  item,
-  collapsed,
-  density,
-  onNavClick,
-  linkComponent: LinkComp,
-  activePath,
-  isActive
-}) {
-  const active = itemIsActive(item, activePath, isActive);
-  const pad = density === "compact" ? "px-2.5 py-1.5" : "px-3 py-2";
-  if (item.disabled) {
-    return /* @__PURE__ */ jsxs(
-      "span",
-      {
-        title: item.label,
-        className: cn(
-          "flex items-center gap-3 rounded-lg text-sm font-medium opacity-40",
-          pad,
-          collapsed && "justify-center px-2"
-        ),
-        "aria-disabled": true,
-        children: [
-          /* @__PURE__ */ jsx(item.icon, { className: "h-4 w-4 shrink-0" }),
-          !collapsed ? /* @__PURE__ */ jsx("span", { className: "truncate", children: item.label }) : null
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    LinkComp,
-    {
-      href: item.to,
-      onClick: onNavClick,
-      title: collapsed ? item.label : void 0,
-      "aria-label": collapsed ? item.label : void 0,
-      "aria-current": active ? "page" : void 0,
-      className: cn(
-        "flex items-center gap-3 rounded-lg text-sm font-medium transition-colors",
-        pad,
-        collapsed && "justify-center px-2",
-        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 shrink-0" }),
-        !collapsed ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
-          item.badge != null ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "h-5 shrink-0 px-1.5 text-[10px]", children: item.badge }) : null
-        ] }) : null
-      ]
-    }
-  );
-}
-function NavGroup({
-  item,
-  collapsed,
-  density,
-  onNavClick,
-  linkComponent,
-  activePath,
-  isActive
+function ResourceDetailPage({
+  resource,
+  id,
+  titleField,
+  subtitleField,
+  select,
+  breadcrumb,
+  actions,
+  sidebar,
+  children,
+  className,
+  testID
 }) {
-  const children = item.children ?? [];
-  const childActive = children.some(
-    (c) => itemIsActive(c, activePath, isActive)
-  );
-  const [open, setOpen] = useState(childActive);
-  useEffect(() => {
-    if (childActive) setOpen(true);
-  }, [childActive]);
-  if (children.length === 0) {
-    return /* @__PURE__ */ jsx(
-      NavLinkRow,
-      {
-        item,
-        collapsed,
-        density,
-        onNavClick,
-        linkComponent,
-        activePath,
-        isActive
-      }
-    );
+  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 (collapsed) {
-    const target = item.to ? { ...item, children: void 0 } : { ...children[0], children: void 0 };
+  if (isError) {
+    if (isNotFoundError(error)) return /* @__PURE__ */ jsx(NotFound, {});
     return /* @__PURE__ */ jsx(
-      NavLinkRow,
+      EmptyState,
       {
-        item: target,
-        collapsed: true,
-        density,
-        onNavClick,
-        linkComponent,
-        activePath,
-        isActive
+        icon: AlertTriangle,
+        title: "Couldn't load this record",
+        description: error instanceof Error ? error.message : void 0
       }
     );
   }
-  const selfExact = Boolean(item.to && activePath && activePath === item.to);
-  const selfActive = item.to ? item.end ? selfExact : isActive(item.to, activePath) : false;
-  const groupHighlight = selfActive || childActive;
-  const pad = density === "compact" ? "px-2.5 py-1.5" : "px-3 py-2";
-  const LinkComp = linkComponent;
-  const parentClass = cn(
-    "flex min-w-0 flex-1 items-center gap-3 rounded-lg text-sm font-medium transition-colors",
-    pad,
-    groupHighlight ? "bg-sidebar-accent/60 text-sidebar-primary" : "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
-  );
-  return /* @__PURE__ */ jsx(Collapsible, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", "data-testid": `nav-group-${item.label}`, children: [
-      item.to && !item.disabled ? /* @__PURE__ */ jsxs(
-        LinkComp,
-        {
-          href: item.to,
-          onClick: onNavClick,
-          "aria-current": selfExact ? "page" : void 0,
-          className: parentClass,
-          children: [
-            /* @__PURE__ */ jsx(item.icon, { className: "h-4 w-4 shrink-0" }),
-            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left", children: item.label })
-          ]
-        }
-      ) : /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          className: parentClass,
-          onClick: () => setOpen((o) => !o),
-          "aria-expanded": open,
-          "aria-disabled": item.disabled || void 0,
-          disabled: item.disabled,
-          children: [
-            /* @__PURE__ */ jsx(item.icon, { className: "h-4 w-4 shrink-0" }),
-            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left", children: item.label })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: cn(
-            "shrink-0 rounded-lg p-1.5 text-sidebar-foreground transition-colors hover:bg-sidebar-accent",
-            groupHighlight && "text-sidebar-primary",
-            item.disabled && "pointer-events-none opacity-40"
-          ),
-          onClick: () => setOpen((o) => !o),
-          "aria-expanded": open,
-          "aria-label": open ? `Collapse ${item.label}` : `Expand ${item.label}`,
-          "aria-disabled": item.disabled || void 0,
-          disabled: item.disabled,
-          "data-testid": `nav-group-toggle-${item.label}`,
-          children: /* @__PURE__ */ jsx(
-            ChevronDown,
-            {
-              className: cn(
-                "h-3.5 w-3.5 opacity-60 transition-transform",
-                open && "rotate-180"
-              )
-            }
-          )
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "ml-3 space-y-0.5 border-l border-sidebar-border pl-2", children: children.map((child) => /* @__PURE__ */ jsx(
-      NavLinkRow,
-      {
-        item: child,
-        collapsed: false,
-        density,
-        onNavClick,
-        linkComponent,
-        activePath,
-        isActive
-      },
-      child.to + child.label
-    )) }) })
-  ] }) });
-}
-function SidebarNav({
-  navItems,
-  secondaryNavItems,
-  secondaryNavLabel,
-  showSecondary,
-  collapsed,
-  density,
-  onNavClick,
-  linkComponent,
-  activePath,
-  isActive
-}) {
-  return /* @__PURE__ */ jsxs(
-    "nav",
-    {
-      className: cn(
-        "flex-1 space-y-1 overflow-y-auto",
-        collapsed ? "p-2" : "p-3"
-      ),
-      "aria-label": "Main",
-      children: [
-        navItems.map((item) => /* @__PURE__ */ jsx(
-          NavGroup,
-          {
-            item,
-            collapsed,
-            density,
-            onNavClick,
-            linkComponent,
-            activePath,
-            isActive
-          },
-          item.to + item.label
-        )),
-        showSecondary && secondaryNavItems && secondaryNavItems.length > 0 ? /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "mt-4 space-y-1 border-t border-sidebar-border pt-4",
-              collapsed && "mt-2 pt-2"
-            ),
-            children: [
-              !collapsed ? /* @__PURE__ */ jsx("p", { className: "mb-2 px-3 text-xs font-medium uppercase tracking-wider text-sidebar-foreground/40", children: secondaryNavLabel }) : null,
-              secondaryNavItems.map((item) => /* @__PURE__ */ jsx(
-                NavGroup,
-                {
-                  item,
-                  collapsed,
-                  density,
-                  onNavClick,
-                  linkComponent,
-                  activePath,
-                  isActive
-                },
-                item.to + item.label
-              ))
-            ]
-          }
-        ) : null
-      ]
-    }
-  );
-}
-function SidebarBrand({
-  appName,
-  appLogo,
-  logo,
-  showLogo,
-  showAppName,
-  collapsed
-}) {
-  if (!showLogo && !showAppName) return null;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "flex min-w-0 items-center gap-2",
-        collapsed && "justify-center"
-      ),
-      children: [
-        showLogo ? logo ? /* @__PURE__ */ jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden", children: logo }) : appLogo ? /* @__PURE__ */ jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-primary", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-bold text-primary-foreground", children: appLogo }) }) : null : null,
-        showAppName && !collapsed ? /* @__PURE__ */ jsx("span", { className: "truncate font-semibold text-sidebar-foreground", children: appName }) : null
-      ]
-    }
-  );
-}
-function AppShell({
-  appName,
-  appLogo,
-  logo,
-  navItems,
-  secondaryNavItems,
-  secondaryNavLabel = "More",
-  mobileNavItems,
-  headerSlot,
-  collapsedHeaderSlot,
-  footer,
-  userSlot,
-  children,
-  showThemeToggle: showThemeToggleProp,
-  options: optionsProp,
-  optionsStorageKey,
-  collapsed: collapsedProp,
-  onCollapsedChange,
-  linkComponent = DefaultLink,
-  activePath,
-  isActive = isPathActive
-}) {
-  const [mobileOpen, setMobileOpen] = useState(false);
-  const [userOverrides, setUserOverrides] = useState(
-    {}
-  );
-  const [hydratedKey, setHydratedKey] = useState(
-    optionsStorageKey ? void 0 : ""
-  );
-  useEffect(() => {
-    setMobileOpen(false);
-  }, [activePath]);
-  const hasSecondary = Boolean(secondaryNavItems && secondaryNavItems.length);
-  const hasUser = userSlot != null;
-  const hasFooter = footer != null;
-  const hasLogo = Boolean(logo || appLogo);
-  useEffect(() => {
-    if (!optionsStorageKey) {
-      setUserOverrides({});
-      setHydratedKey("");
-      return;
-    }
-    setUserOverrides(readStoredOptions(optionsStorageKey));
-    setHydratedKey(optionsStorageKey);
-  }, [optionsStorageKey]);
-  useEffect(() => {
-    if (!optionsStorageKey || hydratedKey !== optionsStorageKey) return;
-    writeStoredOptions(optionsStorageKey, userOverrides);
-  }, [optionsStorageKey, userOverrides, hydratedKey]);
-  const lockedOptions = optionsProp?.lockedOptions;
-  const resolved = useMemo(() => {
-    const merged = {
-      ...OPTION_DEFAULTS2,
-      ...showThemeToggleProp !== void 0 ? { showThemeToggle: showThemeToggleProp } : {},
-      ...optionsProp,
-      ...userOverrides
-    };
-    if (merged.configurable === void 0) {
-      merged.configurable = hasSecondary || hasUser || hasFooter || Boolean(merged.showCollapse) || Boolean(merged.showThemeToggle);
-    }
-    if (lockedOptions?.length) {
-      const defaults = OPTION_DEFAULTS2;
-      const devOptions = optionsProp;
-      const target = merged;
-      for (const key of lockedOptions) {
-        target[key] = devOptions?.[key] ?? defaults[key];
-      }
-    }
-    return merged;
-  }, [
-    optionsProp,
-    userOverrides,
-    showThemeToggleProp,
-    hasSecondary,
-    hasUser,
-    hasFooter,
-    lockedOptions
-  ]);
-  const patchOption = useCallback(
-    (key, value) => {
-      if (lockedOptions?.includes(key)) return;
-      setUserOverrides((prev) => ({ ...prev, [key]: value }));
-    },
-    [lockedOptions]
-  );
-  const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState(
-    () => optionsProp?.defaultCollapsed ?? OPTION_DEFAULTS2.defaultCollapsed
-  );
-  useEffect(() => {
-    if (!optionsStorageKey || collapsedProp !== void 0) return;
-    const stored = readStoredCollapsed(optionsStorageKey);
-    if (stored !== void 0) setUncontrolledCollapsed(stored);
-  }, [optionsStorageKey, collapsedProp]);
-  const isCollapseControlled = collapsedProp !== void 0;
-  const collapsed = isCollapseControlled ? collapsedProp : uncontrolledCollapsed;
-  const setCollapsed = (next) => {
-    if (!isCollapseControlled) {
-      setUncontrolledCollapsed(next);
-      if (optionsStorageKey) writeStoredCollapsed(optionsStorageKey, next);
-    }
-    onCollapsedChange?.(next);
-  };
-  const density = resolved.density ?? "comfortable";
-  const scrollWindow = resolved.scrollRoot === "window";
-  const railExpanded = resolved.railWidth === "wide" ? "md:w-64" : "md:w-52";
-  const railClass = collapsed ? "md:w-14" : railExpanded;
-  const bottomItems = (mobileNavItems ?? navItems.filter((i) => !i.children || i.children.length === 0)).filter((i) => !i.disabled);
-  const toggles = [
-    { key: "showLogo", label: "Logo", available: hasLogo },
-    { key: "showAppName", label: "App name", available: true },
-    {
-      key: "showThemeToggle",
-      label: "Theme toggle",
-      available: true
-    },
-    { key: "showCollapse", label: "Collapse control", available: true },
-    {
-      key: "showSecondaryNav",
-      label: "Secondary nav",
-      available: hasSecondary
-    },
-    { key: "showFooter", label: "Footer", available: hasFooter },
-    { key: "showUserSlot", label: "User block", available: hasUser },
-    {
-      key: "showMobileBottomNav",
-      label: "Mobile bottom nav",
-      available: bottomItems.length > 0
-    }
-  ].filter((t) => t.available && !lockedOptions?.includes(t.key));
-  const showTheme = resolved.showThemeToggle !== false;
-  const showCollapseCtrl = resolved.showCollapse !== false;
-  const showSecondary = hasSecondary && resolved.showSecondaryNav !== false;
-  const showFooterSlot = hasFooter && resolved.showFooter !== false;
-  const showUser = hasUser && resolved.showUserSlot !== false;
-  const showMobileBottom = bottomItems.length > 0 && resolved.showMobileBottomNav !== false;
-  const optionsControl = resolved.configurable && toggles.length > 0 ? /* @__PURE__ */ jsxs(Popover, { children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        type: "button",
-        variant: "ghost",
-        size: "icon",
-        className: "h-8 w-8",
-        title: "Sidebar options",
-        "aria-label": "Sidebar options",
-        "data-testid": "app-shell-options",
-        testID: "app-shell-options",
-        children: /* @__PURE__ */ jsx(SlidersHorizontal, { className: "h-4 w-4" })
-      }
-    ) }),
-    /* @__PURE__ */ jsxs(PopoverContent, { align: "start", side: "top", className: "w-64 space-y-3", children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold", children: "Sidebar options" }),
-        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Customize this sidebar. Saved on this device when a storage key is set." })
-      ] }),
-      /* @__PURE__ */ jsx("ul", { className: "space-y-3", children: toggles.map((t) => {
-        const checked = Boolean(resolved[t.key] ?? true);
-        return /* @__PURE__ */ jsxs(
-          "li",
-          {
-            className: "flex items-center justify-between gap-3",
-            children: [
-              /* @__PURE__ */ jsx(
-                Label,
-                {
-                  htmlFor: `app-shell-opt-${t.key}`,
-                  className: "text-sm font-normal",
-                  children: t.label
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Switch,
-                {
-                  id: `app-shell-opt-${t.key}`,
-                  checked,
-                  onCheckedChange: (v) => patchOption(t.key, v)
-                }
-              )
-            ]
-          },
-          t.key
-        );
-      }) }),
-      optionsStorageKey && Object.keys(userOverrides).length > 0 ? /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          variant: "ghost",
-          size: "sm",
-          className: "h-8 w-full text-xs",
-          onClick: () => setUserOverrides({}),
-          "data-testid": "app-shell-options-reset",
-          "aria-label": "Reset sidebar options",
-          testID: "app-shell-options-reset",
-          children: "Reset to defaults"
-        }
-      ) : null
-    ] })
-  ] }) : null;
-  const sidebarChrome = (opts) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "flex h-14 shrink-0 items-center gap-2 border-b border-sidebar-border",
-          collapsed && !opts.mobile ? "justify-center px-2" : "px-3"
-        ),
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
-            SidebarBrand,
-            {
-              appName,
-              appLogo,
-              logo,
-              showLogo: resolved.showLogo !== false,
-              showAppName: resolved.showAppName !== false,
-              collapsed: collapsed && !opts.mobile
-            }
-          ) }),
-          opts.mobile ? /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "icon",
-              onClick: () => setMobileOpen(false),
-              "aria-label": "Close navigation",
-              "data-testid": "app-shell-mobile-close",
-              testID: "app-shell-mobile-close",
-              children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
-            }
-          ) : /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [
-            showCollapseCtrl ? /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon",
-                className: "h-8 w-8",
-                onClick: () => setCollapsed(!collapsed),
-                title: collapsed ? "Expand sidebar" : "Collapse sidebar",
-                "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
-                "aria-pressed": collapsed,
-                "data-testid": "app-shell-collapse",
-                testID: "app-shell-collapse",
-                children: collapsed ? /* @__PURE__ */ jsx(PanelLeft, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(PanelLeftClose, { className: "h-4 w-4" })
-              }
-            ) : null,
-            !collapsed ? optionsControl : null
-          ] })
-        ]
-      }
-    ),
-    collapsed && !opts.mobile ? collapsedHeaderSlot ? /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b border-sidebar-border p-2", children: collapsedHeaderSlot }) : null : headerSlot ? /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b border-sidebar-border", children: headerSlot }) : null,
-    /* @__PURE__ */ jsx(
-      SidebarNav,
-      {
-        navItems,
-        secondaryNavItems,
-        secondaryNavLabel,
-        showSecondary,
-        collapsed: collapsed && !opts.mobile,
-        density,
-        onNavClick: opts.mobile ? () => setMobileOpen(false) : void 0,
-        linkComponent,
-        activePath,
-        isActive
-      }
-    ),
-    (showFooterSlot || showUser || showTheme || collapsed && optionsControl) && !opts.mobile ? /* @__PURE__ */ jsxs("div", { className: "mt-auto shrink-0 space-y-2 border-t border-sidebar-border p-2", children: [
-      showFooterSlot && !collapsed ? footer : null,
-      showUser ? /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            collapsed && "flex justify-center [&_[data-shell-user-detail]]:hidden"
-          ),
-          children: userSlot
-        }
-      ) : null,
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "flex items-center gap-1",
-            collapsed ? "flex-col" : "justify-end"
-          ),
-          children: [
-            collapsed ? optionsControl : null,
-            showTheme ? /* @__PURE__ */ jsx(ThemeToggle, { testId: "app-shell-theme-toggle-desktop" }) : null
-          ]
-        }
-      )
-    ] }) : null,
-    opts.mobile && (showFooterSlot || showUser || showTheme) ? /* @__PURE__ */ jsxs("div", { className: "mt-auto shrink-0 space-y-2 border-t border-sidebar-border p-3", children: [
-      showFooterSlot ? footer : null,
-      showUser ? userSlot : null,
-      showTheme ? /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(ThemeToggle, { testId: "app-shell-theme-toggle-mobile-drawer" }) }) : null
-    ] }) : null
-  ] });
-  return /* @__PURE__ */ jsxs(
-    "div",
+  if (!data) return /* @__PURE__ */ jsx(NotFound, {});
+  return /* @__PURE__ */ jsx(
+    DetailPage,
     {
-      className: cn(
-        "flex",
-        scrollWindow ? "min-h-screen" : "h-screen overflow-hidden"
-      ),
-      children: [
-        /* @__PURE__ */ jsx(
-          "aside",
-          {
-            className: cn(
-              "hidden flex-col border-r border-sidebar-border bg-sidebar transition-[width] duration-200 md:flex",
-              scrollWindow && "sticky top-0 h-screen",
-              railClass
-            ),
-            "data-collapsed": collapsed || void 0,
-            "data-testid": "app-shell-sidebar",
-            children: sidebarChrome({})
-          }
-        ),
-        mobileOpen ? /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "fixed inset-0 z-40 bg-black/50 md:hidden",
-            onClick: () => setMobileOpen(false),
-            "aria-hidden": true
-          }
-        ) : null,
-        /* @__PURE__ */ jsx(
-          "aside",
-          {
-            className: cn(
-              "fixed inset-y-0 left-0 z-50 flex w-60 flex-col border-r border-sidebar-border bg-sidebar transition-transform md:hidden",
-              mobileOpen ? "translate-x-0" : "-translate-x-full pointer-events-none"
-            ),
-            id: "app-shell-mobile-nav",
-            "aria-hidden": !mobileOpen,
-            inert: !mobileOpen || void 0,
-            children: sidebarChrome({ mobile: true })
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "flex min-w-0 flex-1 flex-col",
-              !scrollWindow && "overflow-hidden"
-            ),
-            children: [
-              /* @__PURE__ */ jsxs(
-                "header",
-                {
-                  className: cn(
-                    "flex h-14 items-center gap-3 border-b px-4 md:hidden",
-                    scrollWindow && "sticky top-0 z-20 bg-background"
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        variant: "ghost",
-                        size: "icon",
-                        onClick: () => setMobileOpen(true),
-                        "aria-label": "Open navigation",
-                        "aria-expanded": mobileOpen,
-                        "aria-controls": "app-shell-mobile-nav",
-                        "data-testid": "app-shell-mobile-open",
-                        testID: "app-shell-mobile-open",
-                        children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
-                      }
-                    ),
-                    /* @__PURE__ */ jsx("span", { className: "flex-1 truncate font-semibold", children: appName }),
-                    showTheme ? /* @__PURE__ */ jsx(ThemeToggle, { testId: "app-shell-theme-toggle-mobile-header" }) : null
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "main",
-                {
-                  className: cn(
-                    "flex-1",
-                    !scrollWindow && "overflow-y-auto",
-                    showMobileBottom ? "pb-16 md:pb-0" : "pb-0"
-                  ),
-                  children: /* @__PURE__ */ jsx("div", { className: "min-w-0 p-4 sm:p-6 lg:p-8", children })
-                }
-              ),
-              showMobileBottom ? /* @__PURE__ */ jsx(
-                "nav",
-                {
-                  className: "fixed bottom-0 left-0 right-0 z-30 flex border-t bg-background md:hidden",
-                  "aria-label": "Primary",
-                  children: bottomItems.map((item) => {
-                    const LinkComp = linkComponent;
-                    const active = itemIsActive(item, activePath, isActive);
-                    return /* @__PURE__ */ jsxs(
-                      LinkComp,
-                      {
-                        href: item.to,
-                        title: item.label,
-                        "aria-label": item.label,
-                        "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" }),
-                          /* @__PURE__ */ jsx("span", { className: "max-w-full truncate px-0.5", children: item.label })
-                        ]
-                      },
-                      item.to + item.label
-                    );
-                  })
-                }
-              ) : null
-            ]
-          }
-        )
-      ]
+      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