@marktiderman/genesis-ui 2.7.0 → 2.9.0

package/dist/components/data/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { AppShell, PageHeader } from '../../chunk-ZPPLUGLA.js';
+import { AppShell, PageHeader } from '../../chunk-UYI3GLFJ.js';
 export { ViewSettings, ViewToggle } from '../../chunk-46TZGMFW.js';
 import { renderSlot } from '../../chunk-7S7LKQBD.js';
 import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '../../chunk-N2ZFNOOT.js';
@@ -7,45 +7,50 @@ import { Textarea } from '../../chunk-YETMISCE.js';
 import { Separator } from '../../chunk-SXSCHWZU.js';
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from '../../chunk-XCGZPFT7.js';
 import { Skeleton } from '../../chunk-QFM4Z2SS.js';
+import { toast } from '../../chunk-4RAZJ6LL.js';
 import { Progress } from '../../chunk-W5Y3LG5K.js';
-import { Input } from '../../chunk-QSXVL5UB.js';
-import { Card, CardContent, CardHeader, CardTitle } from '../../chunk-FN3FZVUR.js';
 import { Checkbox } from '../../chunk-SEBU6JCK.js';
+import { Card, CardContent, CardHeader, CardTitle } from '../../chunk-FN3FZVUR.js';
+import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from '../../chunk-4C4ESW6O.js';
+import { PageLoading } from '../../chunk-YRYQXU3G.js';
+import { Spinner } from '../../chunk-OVU3Z2MT.js';
+import { Input } from '../../chunk-QSXVL5UB.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 { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, DropdownMenuSeparator, DropdownMenuItem, DropdownMenuLabel } from '../../chunk-QJ6P2DW6.js';
 import { Switch } from '../../chunk-27ELYTGE.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../../chunk-22XB3Q6H.js';
+import { DetailPage } from '../../chunk-AFZ76Q26.js';
+import '../../chunk-D2LIXA2Y.js';
+import '../../chunk-AVFZ4P4B.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-IXGAEECT.js';
+import { titleCase, useResourcePage } from '../../chunk-RKPS7ERS.js';
+import { useResourceUrlState } from '../../chunk-DIV4BYXX.js';
 export { useSavedViews } from '../../chunk-GCQFVMPI.js';
-import '../../chunk-FTTNGGLA.js';
+import '../../chunk-PKFDGGZV.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 { DefaultLink, defaultNavigate } from '../../chunk-CDYZRZ6U.js';
-export { DefaultLink, defaultNavigate, isPathActive, resolveNavigation } from '../../chunk-CDYZRZ6U.js';
+import { DefaultLink, defaultNavigate } from '../../chunk-WGMEVX3Y.js';
+export { DefaultLink, defaultNavigate, isPathActive, resolveNavigation } from '../../chunk-WGMEVX3Y.js';
 import { useKeyboardNavigation } from '../../chunk-YJ6MPS6U.js';
 import { useIsMobile } from '../../chunk-VFO3I7PV.js';
 import { AlertTriangle, RefreshCw, ChevronDown, Check, Search, X, ArrowUpDown, Bookmark, Trash2, BookmarkPlus, Loader2, Columns3, ArrowUp, ArrowDown, ChevronLeft, ChevronRight, ExternalLink, ArrowRightLeft, Pencil, ChevronsUpDown, ImageIcon, Upload, AlertCircle, FileIcon, Plus } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useState, useRef, useEffect, useCallback, useMemo, Fragment as Fragment$1 } from 'react';
+import { useState, useRef, useEffect, useCallback, useMemo, useId, Fragment as Fragment$1 } from 'react';
+import { useReactTable, getPaginationRowModel, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
+import { useVirtualizer } from '@tanstack/react-virtual';
 import { formatDistanceToNow, format } from 'date-fns';
 import { useFieldArray, Controller, useWatch } from 'react-hook-form';
-import { useResource, useWizard, useResourceForm, useOne, buildArrayItemDefaults } from '@marktiderman/genesis-core/hooks';
-import { useDataProvider } from '@marktiderman/genesis-core/provider';
+import { useResource, useWizard, useResourceForm, useOne, useCapabilities, buildArrayItemDefaults } from '@marktiderman/genesis-core/hooks';
+import { useDataProvider, isDataReadError } from '@marktiderman/genesis-core/provider';
 import { useDropzone } from 'react-dropzone';
 
 function DataPageShell({
@@ -59,6 +64,7 @@ function DataPageShell({
   isEmpty = false,
   emptyIcon,
   emptyMessage,
+  emptyDescription,
   emptyAction,
   hasError = false,
   errorMessage: errorMessage2,
@@ -89,11 +95,13 @@ function DataPageShell({
 }) {
   const entity = entityName || title.toLowerCase();
   const collapseFilters = filtersCollapsible && filters != null && header !== null;
+  const toolbarOnly = header === "toolbar";
+  const baseHeaderOptions = toolbarOnly ? { showTitle: false, ...headerOptions } : headerOptions;
   const mergedOptions = {
     defaultDetailsOpen: defaultFiltersOpen,
     detailsLabel: filtersLabel,
     subtitleInDetails: collapseFilters ? true : void 0,
-    ...headerOptions
+    ...baseHeaderOptions
   };
   const sharedHeaderProps = {
     title,
@@ -114,7 +122,7 @@ function DataPageShell({
     stats,
     optionsStorageKey: headerOptionsStorageKey
   };
-  const Header = header === null ? (() => null) : header ?? PageHeader;
+  const Header = header === null ? () => null : header === "toolbar" || header === void 0 ? PageHeader : header;
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-6", className), children: [
     collapseFilters ? /* @__PURE__ */ jsx(
       Header,
@@ -128,7 +136,7 @@ function DataPageShell({
         options: mergedOptions
       }
     ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Header, { ...sharedHeaderProps, options: headerOptions }),
+      /* @__PURE__ */ jsx(Header, { ...sharedHeaderProps, options: baseHeaderOptions }),
       filters
     ] }),
     isLoading ? /* @__PURE__ */ jsx(
@@ -158,6 +166,7 @@ function DataPageShell({
       {
         icon: emptyIcon,
         title: emptyMessage,
+        ...emptyDescription ? { description: emptyDescription } : {},
         action: emptyAction,
         hasFilters: hasActiveFilters,
         onClearFilters
@@ -540,6 +549,28 @@ function DataFilters({
   ] });
 }
 var DEFAULT_BATCH_SIZE = 48;
+var NESTED_CONTROL = "a,button,input,select,textarea,label,[role=button],[role=link],[role=checkbox],[role=switch],[role=menuitem],[contenteditable=true]";
+function activation(item, onItemClick, getItemLabel) {
+  if (!onItemClick) return {};
+  return {
+    role: "button",
+    tabIndex: 0,
+    "aria-label": getItemLabel?.(item),
+    onClick: (e) => {
+      const control = e.target.closest(NESTED_CONTROL);
+      if (control && control !== e.currentTarget) return;
+      onItemClick(item);
+    },
+    onKeyDown: (e) => {
+      if (e.target !== e.currentTarget) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onItemClick(item);
+      }
+    }
+  };
+}
+var ACTIVATABLE = "cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";
 function DataGrid({
   items,
   viewMode,
@@ -551,7 +582,9 @@ function DataGrid({
   staggerAnimation = true,
   getKey,
   focusedIndex = -1,
-  keyboardContainerRef
+  keyboardContainerRef,
+  onItemClick,
+  getItemLabel
 }) {
   const [visibleCount, setVisibleCount] = useState(batchSize);
   const sentinelRef = useRef(null);
@@ -587,8 +620,10 @@ function DataGrid({
           "div",
           {
             "data-nav-item": true,
+            ...activation(item, onItemClick, getItemLabel),
             className: cn(
               "px-4 py-3 transition-colors hover:bg-accent/50",
+              onItemClick && ACTIVATABLE,
               focusedIndex === i && "ring-2 ring-inset ring-primary bg-accent/50"
             ),
             children: renderListItem(item, i)
@@ -605,8 +640,10 @@ function DataGrid({
       "div",
       {
         "data-nav-item": true,
+        ...activation(item, onItemClick, getItemLabel),
         className: cn(
           staggerAnimation && "animate-fade-in",
+          onItemClick && cn(ACTIVATABLE, "h-full rounded-xl"),
           focusedIndex === i && "ring-2 ring-primary ring-offset-2 ring-offset-background rounded-xl transition-shadow duration-150"
         ),
         style: staggerAnimation ? {
@@ -637,9 +674,66 @@ var DENSITY_HEAD = {
   comfortable: "h-10",
   spacious: "h-12 py-3"
 };
+function storeSet(key, value) {
+  try {
+    localStorage.setItem(key, value);
+  } catch {
+  }
+}
+function storeRemove(key) {
+  try {
+    localStorage.removeItem(key);
+  } catch {
+  }
+}
+var ROW_HEIGHT = { compact: 33, comfortable: 41, spacious: 49 };
+var PINNED_WIDTH = 160;
+function compareValues(a, b) {
+  const emptyA = a == null || a === "";
+  const emptyB = b == null || b === "";
+  if (emptyA || emptyB) return emptyA === emptyB ? 0 : emptyA ? -1 : 1;
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  if (typeof a === "bigint" && typeof b === "bigint") return a < b ? -1 : a > b ? 1 : 0;
+  if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
+  if (typeof a === "boolean" && typeof b === "boolean") return Number(a) - Number(b);
+  return String(a).localeCompare(String(b), void 0, { numeric: true, sensitivity: "base" });
+}
+var ROW_OPEN = "data-row-open";
+function focusRowAt(body, index) {
+  const target = body?.querySelector(`[${ROW_OPEN}="${index}"]`);
+  target?.focus();
+  return !!target;
+}
+function nextSort(prev, key, shiftKey) {
+  const existing = prev.findIndex((s) => s.key === key);
+  if (existing >= 0) {
+    const entry = prev[existing];
+    if (entry.dir === "asc") {
+      const next = [...prev];
+      next[existing] = { key, dir: "desc" };
+      return next;
+    }
+    return prev.filter((_, i) => i !== existing);
+  }
+  if (shiftKey) return [...prev, { key, dir: "asc" }];
+  return [{ key, dir: "asc" }];
+}
 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);
+  return cn(typeof col.width === "string" && !PX_WIDTH.test(col.width) ? col.width : void 0, hide);
+}
+var PX_WIDTH = /^\s*\d+(\.\d+)?(px)?\s*$/;
+function pxWidth(width) {
+  if (typeof width === "number") return width > 0 ? width : void 0;
+  if (width && PX_WIDTH.test(width)) {
+    const px = parseFloat(width);
+    return px > 0 ? px : void 0;
+  }
+  return void 0;
+}
+function colHideClass(hideBelow) {
+  if (!hideBelow) return void 0;
+  return hideBelow === "sm" ? "hidden sm:table-column" : hideBelow === "md" ? "hidden md:table-column" : hideBelow === "lg" ? "hidden lg:table-column" : "hidden xl:table-column";
 }
 function errorMessage(error) {
   return error instanceof Error ? error.message : String(error);
@@ -842,29 +936,29 @@ function DataTable({
   stickyHeader = true,
   resizeKey,
   stickyFirstColumn,
-  density = "comfortable"
+  density = "comfortable",
+  keyboardNavigation = true,
+  openColumn,
+  virtualize,
+  pinnedColumns,
+  reorderableColumns = true,
+  columnOrderKey,
+  sort: sortProp,
+  onSortChange
 }) {
+  const rowKeys = keyboardNavigation && !!onRowClick;
+  const [activeRowKey, setActiveRowKey] = useState(null);
   const cellDensity = DENSITY_CELL[density];
   const headDensity = DENSITY_HEAD[density];
-  const [sorts, setSorts] = useState([]);
+  const [ownSorts, setOwnSorts] = useState([]);
+  const sorts = sortProp ?? ownSorts;
   const handleSort = useCallback(
     (key, shiftKey) => {
-      setSorts((prev) => {
-        const existing = prev.findIndex((s) => s.key === key);
-        if (existing >= 0) {
-          const entry = prev[existing];
-          if (entry.dir === "asc") {
-            const next = [...prev];
-            next[existing] = { key, dir: "desc" };
-            return next;
-          }
-          return prev.filter((_, i) => i !== existing);
-        }
-        if (shiftKey) return [...prev, { key, dir: "asc" }];
-        return [{ key, dir: "asc" }];
-      });
+      const next = nextSort(sorts, key, shiftKey);
+      if (sortProp === void 0) setOwnSorts(next);
+      onSortChange?.(next);
     },
-    []
+    [sorts, sortProp, onSortChange]
   );
   const [visibleCols, setVisibleCols] = useState(
     () => {
@@ -904,7 +998,7 @@ function DataTable({
   }, [columnVisibilityKey]);
   useEffect(() => {
     if (!visibilityHydrated || !columnVisibilityKey) return;
-    localStorage.setItem(
+    storeSet(
       `dt-vis-${columnVisibilityKey}`,
       JSON.stringify(visibleCols)
     );
@@ -918,8 +1012,9 @@ function DataTable({
       defaults[c.key] = c.defaultVisible !== false;
     });
     setVisibleCols(defaults);
+    setColOrder(null);
     if (columnVisibilityKey) {
-      localStorage.removeItem(`dt-vis-${columnVisibilityKey}`);
+      storeRemove(`dt-vis-${columnVisibilityKey}`);
     }
   }, [columns, columnVisibilityKey]);
   useEffect(() => {
@@ -935,7 +1030,54 @@ function DataTable({
       return changed ? updated : prev;
     });
   }, [columns]);
-  const activeColumns = columnVisibility ? columns.filter((c) => visibleCols[c.key] !== false) : columns;
+  const [colOrder, setColOrder] = useState(null);
+  const [orderHydrated, setOrderHydrated] = useState(false);
+  useEffect(() => {
+    if (columnOrderKey) {
+      try {
+        const saved = localStorage.getItem(`dt-order-${columnOrderKey}`);
+        const parsed = saved ? JSON.parse(saved) : null;
+        if (Array.isArray(parsed) && parsed.every((k) => typeof k === "string")) {
+          setColOrder(parsed);
+        }
+      } catch {
+      }
+    }
+    setOrderHydrated(true);
+  }, [columnOrderKey]);
+  useEffect(() => {
+    if (!orderHydrated || !columnOrderKey) return;
+    if (colOrder) storeSet(`dt-order-${columnOrderKey}`, JSON.stringify(colOrder));
+    else storeRemove(`dt-order-${columnOrderKey}`);
+  }, [colOrder, columnOrderKey, orderHydrated]);
+  const orderedColumns = useMemo(() => {
+    if (!colOrder) return columns;
+    const rank = new Map(colOrder.map((k, i) => [k, i]));
+    return [...columns].sort(
+      (a, b) => (rank.get(a.key) ?? colOrder.length) - (rank.get(b.key) ?? colOrder.length)
+    );
+  }, [columns, colOrder]);
+  const moveColumn = useCallback(
+    (key, to) => {
+      const keys = orderedColumns.map((c) => c.key);
+      const from = keys.indexOf(key);
+      if (from < 0) return;
+      keys.splice(from, 1);
+      const at = "before" in to ? Math.max(0, keys.indexOf(to.before)) : keys.indexOf(to.after) + 1;
+      keys.splice(at, 0, key);
+      setColOrder(keys);
+    },
+    [orderedColumns]
+  );
+  const [dragKey, setDragKey] = useState(null);
+  const visibleColumns = columnVisibility ? orderedColumns.filter((c) => visibleCols[c.key] !== false) : orderedColumns;
+  const leftKeys = pinnedColumns?.left ?? (stickyFirstColumn && visibleColumns[0] ? [visibleColumns[0].key] : []);
+  const rightKeys = pinnedColumns?.right ?? [];
+  const activeColumns = [
+    ...visibleColumns.filter((c) => leftKeys.includes(c.key)),
+    ...visibleColumns.filter((c) => !leftKeys.includes(c.key) && !rightKeys.includes(c.key)),
+    ...visibleColumns.filter((c) => rightKeys.includes(c.key))
+  ];
   const [colWidths, setColWidths] = useState(() => {
     if (resizeKey) {
       try {
@@ -946,10 +1088,8 @@ function DataTable({
     }
     const initial = {};
     columns.forEach((c) => {
-      if (c.width) {
-        const px = parseInt(c.width, 10);
-        if (!isNaN(px) && px > 0) initial[c.key] = px;
-      }
+      const px = pxWidth(c.width);
+      if (px) initial[c.key] = px;
     });
     return initial;
   });
@@ -964,46 +1104,232 @@ function DataTable({
   );
   const handleResizeEnd = useCallback(() => {
     if (resizeKey) {
-      localStorage.setItem(`dt-resize-${resizeKey}`, JSON.stringify(colWidths));
+      storeSet(`dt-resize-${resizeKey}`, JSON.stringify(colWidths));
     }
   }, [resizeKey, colWidths]);
+  const pinWidth = (key) => colWidths[key] ?? PINNED_WIDTH;
+  const pinned = {};
+  {
+    let left = selectable ? 40 : 0;
+    for (const c of activeColumns) {
+      if (!leftKeys.includes(c.key)) continue;
+      pinned[c.key] = { side: "left", offset: left };
+      left += pinWidth(c.key);
+    }
+    let right = renderActions ? 40 : 0;
+    for (const c of [...activeColumns].reverse()) {
+      if (!rightKeys.includes(c.key)) continue;
+      pinned[c.key] = { side: "right", offset: right };
+      right += pinWidth(c.key);
+    }
+  }
+  const pinProps = (key, header) => {
+    const z = header ? stickyHeader ? "z-[15]" : "z-[5]" : "z-[1]";
+    if (key === "__select") {
+      return leftKeys.length ? { className: cn("sticky left-0 bg-background", z), style: { left: 0 } } : null;
+    }
+    if (key === "__actions") {
+      return rightKeys.length ? { className: cn("sticky right-0 bg-background", z), style: { right: 0 } } : null;
+    }
+    const p = pinned[key];
+    return p ? { className: cn("sticky bg-background", z), style: { [p.side]: p.offset } } : null;
+  };
   const [currentPage, setCurrentPage] = useState(0);
   const [currentPageSize, setCurrentPageSize] = useState(initialPageSize);
   useEffect(() => {
     setCurrentPage(0);
   }, [items.length, currentPageSize]);
-  const sorted = (() => {
-    if (sorts.length === 0) return items;
-    return [...items].sort((a, b) => {
-      for (const s of sorts) {
-        const col = columns.find((c) => c.key === s.key);
-        if (!col) continue;
-        const acc = col.accessor || ((item) => item[col.key]);
-        const va = acc(a);
-        const vb = acc(b);
-        const sa = va == null ? "" : String(va);
-        const sb = vb == null ? "" : String(vb);
-        const cmp = sa.localeCompare(sb, void 0, {
-          numeric: true,
-          sensitivity: "base"
-        });
-        if (cmp !== 0) return s.dir === "asc" ? cmp : -cmp;
-      }
-      return 0;
-    });
-  })();
-  const totalItems = sorted.length;
+  const sorting = useMemo(
+    () => sorts.map((s) => ({ id: s.key, desc: s.dir === "desc" })),
+    [sorts]
+  );
+  const tanstackColumns = useMemo(
+    () => columns.map((col) => ({
+      id: col.key,
+      // Blanks read as undefined here, so `sortUndefined` keeps them last
+      // whichever way the column sorts.
+      accessorFn: (row) => {
+        const v = col.accessor ? col.accessor(row) : row[col.key];
+        return v == null || v === "" ? void 0 : v;
+      },
+      sortUndefined: "last",
+      sortingFn: (a, b, id) => compareValues(a.getValue(id), b.getValue(id))
+    })),
+    [columns]
+  );
+  const table = useReactTable({
+    data: items,
+    columns: tanstackColumns,
+    getRowId: (row) => getKey(row),
+    state: {
+      sorting,
+      pagination: { pageIndex: currentPage, pageSize: currentPageSize }
+    },
+    enableMultiSort: true,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    ...pagination ? { getPaginationRowModel: getPaginationRowModel() } : {}
+  });
+  const totalItems = table.getPrePaginationRowModel().rows.length;
   const totalPages = pagination ? Math.max(1, Math.ceil(totalItems / currentPageSize)) : 1;
-  const displayItems = pagination ? sorted.slice(
-    currentPage * currentPageSize,
-    (currentPage + 1) * currentPageSize
-  ) : sorted;
+  const displayItems = table.getRowModel().rows.map((row) => row.original);
+  const scrollRef = useRef(null);
+  const bodyRef = useRef(null);
+  const virtualizing = !!virtualize && !pagination;
+  const virtualOptions = typeof virtualize === "object" ? virtualize : {};
+  const viewportHeight = virtualOptions.height ?? 600;
+  const rowVirtualizer = useVirtualizer({
+    count: virtualizing ? displayItems.length : 0,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => virtualOptions.estimateRowHeight ?? ROW_HEIGHT[density],
+    overscan: 10,
+    initialRect: { width: 0, height: viewportHeight }
+  });
+  const virtualRows = virtualizing ? rowVirtualizer.getVirtualItems() : null;
+  const focusRow = (index) => {
+    const last = displayItems.length - 1;
+    const target = Math.max(0, Math.min(last, index));
+    if (focusRowAt(bodyRef.current, target)) return;
+    if (!virtualizing) return;
+    rowVirtualizer.scrollToIndex(target);
+    requestAnimationFrame(() => focusRowAt(bodyRef.current, target));
+  };
+  const openKey = !rowKeys ? null : openColumn !== void 0 ? openColumn : activeColumns.find((c) => !c.editable)?.key ?? null;
+  const tabStopKey = activeRowKey && displayItems.some((it) => getKey(it) === activeRowKey) ? activeRowKey : displayItems[0] ? getKey(displayItems[0]) : null;
+  const rowLabel = (item, id) => {
+    const col = activeColumns.find((c) => c.key === (openKey ?? activeColumns[0]?.key));
+    const value = col ? (col.accessor ?? ((it) => it[col.key]))(item) : void 0;
+    return typeof value === "string" || typeof value === "number" ? String(value) : id;
+  };
   const showingFrom = totalItems === 0 ? 0 : currentPage * currentPageSize + 1;
   const showingTo = Math.min(
     (currentPage + 1) * currentPageSize,
     totalItems
   );
   const totalCols = activeColumns.length + (selectable ? 1 : 0) + (renderActions ? 1 : 0);
+  const renderRow = (item, index, measure) => {
+    const id = getKey(item);
+    return /* @__PURE__ */ jsxs(
+      TableRow,
+      {
+        ref: measure,
+        "data-index": index,
+        "aria-rowindex": virtualizing ? index + 2 : void 0,
+        className: cn(
+          onRowClick && "cursor-pointer",
+          "focus-within:bg-muted/40"
+        ),
+        "data-state": selected?.has(id) ? "selected" : void 0,
+        onClick: onRowClick ? () => onRowClick(item) : void 0,
+        children: [
+          selectable && /* @__PURE__ */ jsx(
+            TableCell,
+            {
+              className: cn(cellDensity, pinProps("__select", false)?.className),
+              style: pinProps("__select", false)?.style,
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  "aria-label": `Select ${rowLabel(item, id)}`,
+                  checked: selected?.has(id),
+                  onCheckedChange: () => onToggleSelect?.(id)
+                }
+              )
+            }
+          ),
+          activeColumns.map((col, colIndex) => {
+            const acc = col.accessor || ((it) => it[col.key]);
+            const value = acc(item);
+            const pin = pinProps(col.key, false);
+            return /* @__PURE__ */ jsx(
+              TableCell,
+              {
+                className: cn(
+                  getCellClasses(
+                    col
+                  ),
+                  cellDensity,
+                  pin?.className
+                ),
+                style: pin?.style,
+                children: (() => {
+                  const content = col.editable ? /* @__PURE__ */ jsx(
+                    EditableCell,
+                    {
+                      item,
+                      column: col,
+                      value
+                    }
+                  ) : col.render ? col.render(item, value) : /* @__PURE__ */ jsx("span", { className: "truncate block max-w-[300px]", children: String(value ?? "\u2014") });
+                  if (col.key !== openKey) return content;
+                  const openProps = {
+                    type: "button",
+                    [ROW_OPEN]: String(index),
+                    tabIndex: id === tabStopKey ? 0 : -1,
+                    onFocus: () => setActiveRowKey(id),
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onRowClick?.(item);
+                    },
+                    onKeyDown: (e) => {
+                      if (e.target !== e.currentTarget) return;
+                      if (e.metaKey || e.ctrlKey || e.altKey) return;
+                      const move = (to) => {
+                        e.preventDefault();
+                        focusRow(to);
+                      };
+                      if (e.key === "ArrowDown" || e.key === "j") move(index + 1);
+                      else if (e.key === "ArrowUp" || e.key === "k") move(index - 1);
+                      else if (e.key === "Home") move(0);
+                      else if (e.key === "End") move(displayItems.length - 1);
+                      else if (e.key === "x" && selectable) {
+                        e.preventDefault();
+                        onToggleSelect?.(id);
+                      }
+                    }
+                  };
+                  if (!col.editable && !col.render) {
+                    return /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        ...openProps,
+                        className: "-mx-1 block w-[calc(100%+0.5rem)] min-w-0 rounded px-1 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+                        children: content
+                      }
+                    );
+                  }
+                  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [
+                    /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: content }),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        ...openProps,
+                        "aria-label": `Open ${rowLabel(item, id)}`,
+                        className: "sr-only shrink-0 rounded px-1 text-xs text-muted-foreground focus-visible:not-sr-only focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+                        children: "Open"
+                      }
+                    )
+                  ] });
+                })()
+              },
+              col.key
+            );
+          }),
+          renderActions && /* @__PURE__ */ jsx(
+            TableCell,
+            {
+              className: cn(cellDensity, pinProps("__actions", false)?.className),
+              style: pinProps("__actions", false)?.style,
+              onClick: (e) => e.stopPropagation(),
+              children: renderActions(item)
+            }
+          )
+        ]
+      },
+      id
+    );
+  };
   return /* @__PURE__ */ jsxs("div", { className: "border rounded-lg animate-fade-in flex flex-col", children: [
     columnVisibility && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end px-3 py-2 border-b bg-muted/30", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
       /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
@@ -1041,135 +1367,181 @@ function DataTable({
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs(Table, { style: { tableLayout: "fixed" }, children: [
-      /* @__PURE__ */ jsx(
-        TableHeader,
-        {
-          className: stickyHeader ? "sticky top-0 z-10 bg-background" : "",
-          children: /* @__PURE__ */ jsxs(TableRow, { children: [
-            selectable && /* @__PURE__ */ jsx(TableHead, { className: cn("w-10", headDensity), children: /* @__PURE__ */ jsx(
-              Checkbox,
-              {
-                checked: items.length > 0 && selected?.size === items.length,
-                onCheckedChange: onToggleAll
-              }
-            ) }),
-            activeColumns.map((col, colIndex) => {
-              const sortIndex = sorts.findIndex((s) => s.key === col.key);
-              const sortEntry = sortIndex >= 0 ? sorts[sortIndex] : null;
-              const resizeWidth = colWidths[col.key];
-              const isFirstCol = colIndex === 0 && stickyFirstColumn;
-              return /* @__PURE__ */ jsxs(
-                TableHead,
-                {
-                  className: cn(
-                    getCellClasses(col),
-                    headDensity,
-                    col.sortable && "cursor-pointer select-none",
-                    resizableColumns && "relative",
-                    isFirstCol && "sticky left-0 bg-background",
-                    isFirstCol && stickyHeader ? "z-[15]" : isFirstCol ? "z-[5]" : void 0
-                  ),
-                  style: resizeWidth ? { width: resizeWidth, minWidth: resizeWidth } : void 0,
-                  onClick: col.sortable ? (e) => handleSort(col.key, e.shiftKey) : void 0,
-                  children: [
-                    /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
-                      col.header,
-                      col.sortable && (sortEntry ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                        sortEntry.dir === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "h-3 w-3 text-foreground" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "h-3 w-3 text-foreground" }),
-                        sorts.length > 1 && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground font-mono", children: sortIndex + 1 })
-                      ] }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-3 w-3 text-muted-foreground/50" }))
-                    ] }),
-                    resizableColumns && /* @__PURE__ */ jsx(
-                      ResizeHandle,
-                      {
-                        onResize: (delta) => handleResize(
-                          col.key,
-                          delta,
-                          col.minWidth ?? 60
-                        ),
-                        onResizeEnd: handleResizeEnd
-                      }
-                    )
-                  ]
-                },
-                col.key
-              );
-            }),
-            renderActions && /* @__PURE__ */ jsx(TableHead, { className: cn("w-10", headDensity) })
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsx(TableBody, { children: displayItems.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
-        TableCell,
-        {
-          colSpan: totalCols,
-          className: "text-center py-12 text-muted-foreground",
-          children: emptyMessage
-        }
-      ) }) : displayItems.map((item) => {
-        const id = getKey(item);
-        return /* @__PURE__ */ jsxs(
-          TableRow,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: scrollRef,
+        className: cn("overflow-x-auto", virtualizing && "overflow-y-auto"),
+        style: virtualizing ? { maxHeight: viewportHeight } : void 0,
+        children: /* @__PURE__ */ jsxs(
+          Table,
           {
-            className: cn(onRowClick && "cursor-pointer"),
-            "data-state": selected?.has(id) ? "selected" : void 0,
-            onClick: onRowClick ? () => onRowClick(item) : void 0,
+            style: { tableLayout: "fixed" },
+            "aria-rowcount": virtualizing ? displayItems.length + 1 : void 0,
             children: [
-              selectable && /* @__PURE__ */ jsx(
-                TableCell,
-                {
-                  className: cellDensity,
-                  onClick: (e) => e.stopPropagation(),
-                  children: /* @__PURE__ */ jsx(
-                    Checkbox,
+              /* @__PURE__ */ jsxs("colgroup", { children: [
+                selectable && /* @__PURE__ */ jsx("col", { style: { width: 40 } }),
+                activeColumns.map((col) => {
+                  const w = colWidths[col.key] ?? (pinned[col.key] ? PINNED_WIDTH : void 0);
+                  return /* @__PURE__ */ jsx(
+                    "col",
                     {
-                      checked: selected?.has(id),
-                      onCheckedChange: () => onToggleSelect?.(id)
-                    }
-                  )
-                }
-              ),
-              activeColumns.map((col, colIndex) => {
-                const acc = col.accessor || ((it) => it[col.key]);
-                const value = acc(item);
-                const isFirstCol = colIndex === 0 && stickyFirstColumn;
-                return /* @__PURE__ */ jsx(
-                  TableCell,
-                  {
-                    className: cn(
-                      getCellClasses(
-                        col
-                      ),
-                      cellDensity,
-                      isFirstCol && "sticky left-0 z-[1] bg-background"
+                      className: colHideClass(col.hideBelow),
+                      style: w ? { width: w } : void 0
+                    },
+                    col.key
+                  );
+                }),
+                renderActions && /* @__PURE__ */ jsx("col", { style: { width: 40 } })
+              ] }),
+              /* @__PURE__ */ jsx(
+                TableHeader,
+                {
+                  className: stickyHeader ? "sticky top-0 z-10 bg-background" : "",
+                  children: /* @__PURE__ */ jsxs(TableRow, { "aria-rowindex": virtualizing ? 1 : void 0, children: [
+                    selectable && /* @__PURE__ */ jsx(
+                      TableHead,
+                      {
+                        className: cn("w-10", headDensity, pinProps("__select", true)?.className),
+                        style: pinProps("__select", true)?.style,
+                        children: /* @__PURE__ */ jsx(
+                          Checkbox,
+                          {
+                            "aria-label": "Select all rows",
+                            checked: items.length > 0 && selected?.size === items.length,
+                            onCheckedChange: onToggleAll
+                          }
+                        )
+                      }
                     ),
-                    children: col.editable ? /* @__PURE__ */ jsx(
-                      EditableCell,
+                    activeColumns.map((col, colIndex) => {
+                      const sortIndex = sorts.findIndex((s) => s.key === col.key);
+                      const sortEntry = sortIndex >= 0 ? sorts[sortIndex] : null;
+                      const resizeWidth = colWidths[col.key];
+                      const pin = pinProps(col.key, true);
+                      const draggable = reorderableColumns && !pin;
+                      return /* @__PURE__ */ jsxs(
+                        TableHead,
+                        {
+                          className: cn(
+                            getCellClasses(col),
+                            headDensity,
+                            col.sortable && "select-none",
+                            "overflow-hidden",
+                            resizableColumns && "relative",
+                            pin?.className
+                          ),
+                          style: {
+                            ...resizeWidth ? { width: resizeWidth, minWidth: resizeWidth } : {},
+                            ...pin?.style
+                          },
+                          draggable: draggable || void 0,
+                          onDragStart: draggable ? (e) => {
+                            setDragKey(col.key);
+                            e.dataTransfer.effectAllowed = "move";
+                            e.dataTransfer.setData("text/plain", col.key);
+                          } : void 0,
+                          onDragOver: draggable ? (e) => {
+                            if (dragKey && dragKey !== col.key) e.preventDefault();
+                          } : void 0,
+                          onDrop: draggable ? (e) => {
+                            e.preventDefault();
+                            if (dragKey && dragKey !== col.key) moveColumn(dragKey, { before: col.key });
+                            setDragKey(null);
+                          } : void 0,
+                          onDragEnd: draggable ? () => setDragKey(null) : void 0,
+                          "aria-sort": sortEntry && sortIndex === 0 ? sortEntry.dir === "asc" ? "ascending" : "descending" : void 0,
+                          children: [
+                            (() => {
+                              const label = /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1", children: [
+                                /* @__PURE__ */ jsx("span", { className: "truncate", title: col.header, children: col.header }),
+                                col.sortable && (sortEntry ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                                  sortEntry.dir === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "h-3 w-3 shrink-0 text-foreground" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "h-3 w-3 shrink-0 text-foreground" }),
+                                  sorts.length > 1 && /* @__PURE__ */ jsx(
+                                    "span",
+                                    {
+                                      "aria-hidden": "true",
+                                      className: "text-[10px] text-muted-foreground font-mono",
+                                      children: sortIndex + 1
+                                    }
+                                  )
+                                ] }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-3 w-3 shrink-0 text-muted-foreground/50" }))
+                              ] });
+                              return col.sortable ? /* @__PURE__ */ jsx(
+                                "button",
+                                {
+                                  type: "button",
+                                  className: "-mx-1 flex w-[calc(100%+0.5rem)] min-w-0 items-center rounded px-1 text-left cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                                  onClick: (e) => handleSort(col.key, e.shiftKey),
+                                  onKeyDown: (e) => {
+                                    if (!draggable || !e.altKey) return;
+                                    if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+                                    const movable = activeColumns.filter((c) => !pinned[c.key]);
+                                    const i = movable.findIndex((c) => c.key === col.key);
+                                    const neighbour = movable[e.key === "ArrowLeft" ? i - 1 : i + 1];
+                                    if (!neighbour) return;
+                                    e.preventDefault();
+                                    moveColumn(col.key, e.key === "ArrowLeft" ? { before: neighbour.key } : { after: neighbour.key });
+                                  },
+                                  "aria-label": sortEntry && sortIndex > 0 ? `${col.header}, sorted ${sortEntry.dir === "asc" ? "ascending" : "descending"}, sort ${sortIndex + 1}` : void 0,
+                                  children: label
+                                }
+                              ) : label;
+                            })(),
+                            resizableColumns && /* @__PURE__ */ jsx(
+                              ResizeHandle,
+                              {
+                                onResize: (delta) => handleResize(
+                                  col.key,
+                                  delta,
+                                  col.minWidth ?? 60
+                                ),
+                                onResizeEnd: handleResizeEnd
+                              }
+                            )
+                          ]
+                        },
+                        col.key
+                      );
+                    }),
+                    renderActions && /* @__PURE__ */ jsx(
+                      TableHead,
                       {
-                        item,
-                        column: col,
-                        value
+                        className: cn("w-10", headDensity, pinProps("__actions", true)?.className),
+                        style: pinProps("__actions", true)?.style
                       }
-                    ) : col.render ? col.render(item, value) : /* @__PURE__ */ jsx("span", { className: "truncate block max-w-[300px]", children: String(value ?? "\u2014") })
-                  },
-                  col.key
-                );
-              }),
-              renderActions && /* @__PURE__ */ jsx(
+                    )
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx(TableBody, { ref: bodyRef, children: displayItems.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
                 TableCell,
                 {
-                  className: cellDensity,
-                  onClick: (e) => e.stopPropagation(),
-                  children: renderActions(item)
+                  colSpan: totalCols,
+                  className: "text-center py-12 text-muted-foreground",
+                  children: emptyMessage
                 }
-              )
+              ) }) : virtualRows ? [
+                /* @__PURE__ */ jsx("tr", { "aria-hidden": true, style: { height: virtualRows[0]?.start ?? 0 } }, "__top"),
+                ...virtualRows.map(
+                  (vr) => renderRow(displayItems[vr.index], vr.index, rowVirtualizer.measureElement)
+                ),
+                /* @__PURE__ */ jsx(
+                  "tr",
+                  {
+                    "aria-hidden": true,
+                    style: {
+                      height: rowVirtualizer.getTotalSize() - (virtualRows[virtualRows.length - 1]?.end ?? 0)
+                    }
+                  },
+                  "__bottom"
+                )
+              ] : displayItems.map((item, index) => renderRow(item, index)) })
             ]
-          },
-          id
-        );
-      }) })
-    ] }) }),
+          }
+        )
+      }
+    ),
     pagination && /* @__PURE__ */ jsxs("div", { className: "sticky bottom-0 z-10 flex flex-col sm:flex-row items-center justify-between gap-2 px-4 py-3 border-t bg-muted/30 text-xs text-muted-foreground", children: [
       /* @__PURE__ */ jsx("span", { children: totalItems === 0 ? "No records" : `Showing ${showingFrom}\u2013${showingTo} of ${totalItems}` }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
@@ -1750,11 +2122,48 @@ function DetailPanel({
     }
   );
 }
+
+// src/components/data/undo-toast.ts
+var DONE = {
+  create: "Created.",
+  update: "Saved.",
+  delete: "Deleted."
+};
+function showUndoToast(write) {
+  toast(DONE[write.kind], {
+    duration: write.delayMs,
+    action: {
+      label: "Undo",
+      onClick: () => {
+        void write.undo().then((undone) => {
+          if (!undone && write.strategy === "delay") {
+            toast("Already saved. It can no longer be undone.");
+          }
+        });
+      }
+    }
+  });
+}
+function showWriteErrorToast(error) {
+  toast.error(error.message || "The change could not be saved.");
+}
+function writeModeOptions(resourceOptions, mutationMode) {
+  const mode = resourceOptions?.mutationMode ?? mutationMode ?? "pessimistic";
+  return {
+    mutationMode: mode,
+    onUndoable: resourceOptions?.onUndoable ?? showUndoToast,
+    onError: resourceOptions?.onError ?? (mode === "pessimistic" ? void 0 : showWriteErrorToast)
+  };
+}
 function RelationField({
   field,
   value,
   onChange,
-  disabled
+  disabled,
+  id,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired
 }) {
   const [open, setOpen] = useState(false);
   const [createOpen, setCreateOpen] = useState(false);
@@ -1813,7 +2222,11 @@ function RelationField({
         {
           variant: "outline",
           role: "combobox",
+          id,
           "aria-expanded": open,
+          "aria-describedby": ariaDescribedBy,
+          "aria-invalid": ariaInvalid,
+          "aria-required": ariaRequired,
           className: "w-full justify-between font-normal",
           disabled: disabled || isLoading,
           children: [
@@ -1924,7 +2337,12 @@ function FileUploadField({
   field,
   value,
   onChange,
-  disabled
+  disabled,
+  id,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired
 }) {
   const multiple = field.multiple ?? false;
   const maxSize = field.maxSize ?? DEFAULT_MAX_SIZE;
@@ -1997,7 +2415,16 @@ function FileUploadField({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        ...getRootProps(),
+        ...getRootProps({
+          // The focusable drop zone carries the field's name, description
+          // and state; react-dropzone's default `role="presentation"` would
+          // leave a keyboard user on an unnamed tab stop.
+          role: "button",
+          "aria-labelledby": ariaLabelledBy,
+          "aria-describedby": ariaDescribedBy,
+          "aria-invalid": ariaInvalid,
+          "aria-disabled": disabled || void 0
+        }),
         className: cn(
           "flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed px-6 py-8 text-center transition-colors",
           isDragActive ? "border-primary bg-primary/5" : "border-muted-foreground/25 hover:border-muted-foreground/50",
@@ -2005,7 +2432,17 @@ function FileUploadField({
           hasFiles && "py-4"
         ),
         children: [
-          /* @__PURE__ */ jsx("input", { ...getInputProps() }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...getInputProps({
+                id,
+                "aria-describedby": ariaDescribedBy,
+                "aria-invalid": ariaInvalid,
+                "aria-required": ariaRequired
+              })
+            }
+          ),
           isImage ? /* @__PURE__ */ jsx(ImageIcon, { className: "mb-2 h-8 w-8 text-muted-foreground" }) : /* @__PURE__ */ jsx(Upload, { className: "mb-2 h-8 w-8 text-muted-foreground" }),
           /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: isDragActive ? "Drop files here..." : "Drag & drop or click to upload" }),
           /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-muted-foreground/70", children: [
@@ -2182,6 +2619,11 @@ function ResourceFormFieldRenderer({
   watchedValues
 }) {
   const label = field.label ?? titleCase(field.key);
+  const baseId = useId();
+  const inputId = `${baseId}-input`;
+  const errorId = `${baseId}-error`;
+  const descId = `${baseId}-desc`;
+  const labelId = `${baseId}-label`;
   const fieldType = field.type ?? "text";
   const isReadOnly = action === "edit" && field.readOnlyOnEdit;
   const isDisabled = isReadOnly || (watchedValues ? field.disabled?.(watchedValues) === true : false);
@@ -2213,14 +2655,20 @@ function ResourceFormFieldRenderer({
       control,
       render: ({ field: f, fieldState }) => {
         const errorMessage2 = fieldState.error?.message;
+        const describedBy = [field.description ? descId : null, errorMessage2 ? errorId : null].filter(Boolean).join(" ") || void 0;
         const ariaProps = {
+          id: inputId,
           "aria-invalid": !!errorMessage2 || void 0,
-          "aria-describedby": errorMessage2 ? `${field.key}-error` : field.description ? `${field.key}-desc` : void 0,
+          "aria-describedby": describedBy,
           "aria-required": field.required || void 0
         };
         if (fieldType === "switch") {
           return /* @__PURE__ */ jsxs(FormField, { className: "flex flex-row items-center justify-between rounded-lg border p-4", children: [
-            /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage2, children: label }) }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+              /* @__PURE__ */ jsx(FormLabel, { htmlFor: inputId, error: !!errorMessage2, children: label }),
+              field.description && /* @__PURE__ */ jsx(FormDescription, { id: descId, children: field.description }),
+              /* @__PURE__ */ jsx(FormError, { id: errorId, children: errorMessage2 })
+            ] }),
             /* @__PURE__ */ jsx(
               Switch,
               {
@@ -2244,14 +2692,15 @@ function ResourceFormFieldRenderer({
               }
             ),
             /* @__PURE__ */ jsxs("div", { className: "space-y-1 leading-none", children: [
-              /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage2, children: label }),
-              /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage2 })
+              /* @__PURE__ */ jsx(FormLabel, { htmlFor: inputId, error: !!errorMessage2, children: label }),
+              field.description && /* @__PURE__ */ jsx(FormDescription, { id: descId, children: field.description }),
+              /* @__PURE__ */ jsx(FormError, { id: errorId, children: errorMessage2 })
             ] })
           ] });
         }
         if (fieldType === "select" && field.options) {
           return /* @__PURE__ */ jsxs(FormField, { children: [
-            /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage2, required: field.required, children: label }),
+            /* @__PURE__ */ jsx(FormLabel, { htmlFor: inputId, error: !!errorMessage2, required: field.required, children: label }),
             /* @__PURE__ */ jsxs(
               Select,
               {
@@ -2270,49 +2719,53 @@ function ResourceFormFieldRenderer({
                 ]
               }
             ),
-            field.description && /* @__PURE__ */ jsx(FormDescription, { id: `${field.key}-desc`, children: field.description }),
-            /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage2 })
+            field.description && /* @__PURE__ */ jsx(FormDescription, { id: descId, children: field.description }),
+            /* @__PURE__ */ jsx(FormError, { id: errorId, children: errorMessage2 })
           ] });
         }
         if (fieldType === "relation" && field.relation) {
           return /* @__PURE__ */ jsxs(FormField, { children: [
-            /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage2, required: field.required, children: label }),
+            /* @__PURE__ */ jsx(FormLabel, { htmlFor: inputId, error: !!errorMessage2, required: field.required, children: label }),
             /* @__PURE__ */ jsx(
               RelationField,
               {
                 field,
                 value: f.value != null ? String(f.value) : "",
                 onChange: f.onChange,
-                disabled: isDisabled
+                disabled: isDisabled,
+                ...ariaProps
               }
             ),
-            field.description && /* @__PURE__ */ jsx(FormDescription, { id: `${field.key}-desc`, children: field.description }),
-            /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage2 })
+            field.description && /* @__PURE__ */ jsx(FormDescription, { id: descId, children: field.description }),
+            /* @__PURE__ */ jsx(FormError, { id: errorId, children: errorMessage2 })
           ] });
         }
         if (fieldType === "file" || fieldType === "image") {
           return /* @__PURE__ */ jsxs(FormField, { children: [
-            /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage2, required: field.required, children: label }),
+            /* @__PURE__ */ jsx(FormLabel, { id: labelId, htmlFor: inputId, error: !!errorMessage2, required: field.required, children: label }),
             /* @__PURE__ */ jsx(
               FileUploadField,
               {
+                "aria-labelledby": labelId,
                 field,
                 value: f.value,
                 onChange: f.onChange,
-                disabled: isDisabled
+                disabled: isDisabled,
+                ...ariaProps
               }
             ),
-            field.description && /* @__PURE__ */ jsx(FormDescription, { id: `${field.key}-desc`, children: field.description }),
-            /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage2 })
+            field.description && /* @__PURE__ */ jsx(FormDescription, { id: descId, children: field.description }),
+            /* @__PURE__ */ jsx(FormError, { id: errorId, children: errorMessage2 })
           ] });
         }
         if (fieldType === "textarea") {
           return /* @__PURE__ */ jsxs(FormField, { children: [
-            /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage2, required: field.required, children: label }),
+            /* @__PURE__ */ jsx(FormLabel, { htmlFor: inputId, error: !!errorMessage2, required: field.required, children: label }),
             /* @__PURE__ */ jsx(
               Textarea,
               {
                 placeholder: field.placeholder,
+                maxLength: field.maxLength,
                 rows: field.rows ?? 3,
                 value: f.value != null ? String(f.value) : "",
                 onChange: (e) => f.onChange(e.target.value),
@@ -2321,13 +2774,13 @@ function ResourceFormFieldRenderer({
                 ...ariaProps
               }
             ),
-            field.description && /* @__PURE__ */ jsx(FormDescription, { id: `${field.key}-desc`, children: field.description }),
-            /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage2 })
+            field.description && /* @__PURE__ */ jsx(FormDescription, { id: descId, children: field.description }),
+            /* @__PURE__ */ jsx(FormError, { id: errorId, children: errorMessage2 })
           ] });
         }
         if (fieldType === "number") {
           return /* @__PURE__ */ jsxs(FormField, { children: [
-            /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage2, required: field.required, children: label }),
+            /* @__PURE__ */ jsx(FormLabel, { htmlFor: inputId, error: !!errorMessage2, required: field.required, children: label }),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -2345,17 +2798,18 @@ function ResourceFormFieldRenderer({
                 ...ariaProps
               }
             ),
-            field.description && /* @__PURE__ */ jsx(FormDescription, { id: `${field.key}-desc`, children: field.description }),
-            /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage2 })
+            field.description && /* @__PURE__ */ jsx(FormDescription, { id: descId, children: field.description }),
+            /* @__PURE__ */ jsx(FormError, { id: errorId, children: errorMessage2 })
           ] });
         }
         return /* @__PURE__ */ jsxs(FormField, { children: [
-          /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage2, required: field.required, children: label }),
+          /* @__PURE__ */ jsx(FormLabel, { htmlFor: inputId, error: !!errorMessage2, required: field.required, children: label }),
           /* @__PURE__ */ jsx(
             Input,
             {
               type: fieldType,
               placeholder: field.placeholder,
+              maxLength: field.maxLength,
               value: f.value != null ? String(f.value) : "",
               onChange: (e) => f.onChange(e.target.value),
               disabled: isDisabled,
@@ -2363,8 +2817,8 @@ function ResourceFormFieldRenderer({
               ...ariaProps
             }
           ),
-          field.description && /* @__PURE__ */ jsx(FormDescription, { id: `${field.key}-desc`, children: field.description }),
-          /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage2 })
+          field.description && /* @__PURE__ */ jsx(FormDescription, { id: descId, children: field.description }),
+          /* @__PURE__ */ jsx(FormError, { id: errorId, children: errorMessage2 })
         ] });
       }
     }
@@ -2476,6 +2930,19 @@ function FormBody({
     control: form.control,
     disabled: !hasConditionalFields
   });
+  const rootError = form.formState.errors.root?.message;
+  const rootErrorBanner = rootError ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "alert",
+      "data-testid": "resource-form-error",
+      className: "flex items-start gap-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive",
+      children: [
+        /* @__PURE__ */ jsx(AlertTriangle, { className: "mt-0.5 h-4 w-4 shrink-0", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { children: rootError })
+      ]
+    }
+  ) : null;
   const onInvalid = (errors) => {
     const firstErrorKey = Object.keys(errors)[0];
     if (firstErrorKey) form.setFocus(firstErrorKey);
@@ -2484,18 +2951,21 @@ function FormBody({
     return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx(Spinner, {}) });
   }
   if (mode === "wizard" && steps) {
-    return /* @__PURE__ */ jsx(
-      WizardForm,
-      {
-        steps,
-        form,
-        fields: resolvedFields,
-        onSubmit: handleSave,
-        isSaving,
-        action,
-        onInvalid
-      }
-    );
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      rootErrorBanner,
+      /* @__PURE__ */ jsx(
+        WizardForm,
+        {
+          steps,
+          form,
+          fields: resolvedFields,
+          onSubmit: handleSave,
+          isSaving,
+          action,
+          onInvalid
+        }
+      )
+    ] });
   }
   const visibleFields = resolvedFields.filter(
     (field) => field.visible?.(watchedValues) !== false
@@ -2535,6 +3005,7 @@ function FormBody({
   return /* @__PURE__ */ jsxs(
     "form",
     {
+      noValidate: true,
       onSubmit: (e) => {
         e.preventDefault();
         void form.handleSubmit(handleSave, onInvalid)(e);
@@ -2548,6 +3019,7 @@ function FormBody({
           ] }),
           renderFields(group.fields)
         ] }, group.name ?? "__default")) }) }),
+        rootErrorBanner,
         /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
           /* @__PURE__ */ jsx(
             Button,
@@ -2584,7 +3056,14 @@ function ResourceForm(props) {
     layout: layoutProp = "dialog",
     mode = "standard",
     steps,
-    columns = 1
+    columns = 1,
+    prefillFromUrl,
+    autoPlaceholder = false,
+    warnWhenUnsaved = false,
+    onDirtyChange,
+    mutationMode = "pessimistic",
+    undoDelayMs,
+    onUndoable
   } = props;
   const isMobile = useIsMobile();
   const effectiveLayout = isMobile ? "sheet" : layoutProp;
@@ -2602,9 +3081,31 @@ function ResourceForm(props) {
       onOpenChange(false);
       onSuccess?.(data);
     },
-    onError
+    // The form is closed by the time an optimistic or undoable save fails,
+    // so the error has to reach the user some other way.
+    onError: onError ?? (mutationMode === "pessimistic" ? void 0 : showWriteErrorToast),
+    prefillFromUrl,
+    autoPlaceholder,
+    warnWhenUnsaved,
+    mutationMode,
+    undoDelayMs,
+    onUndoable: onUndoable ?? showUndoToast
   };
-  const { form, resolvedFields, handleSave, isSaving, isLoading } = useResourceForm(hookOptions);
+  const { form, resolvedFields, handleSave, isSaving, isLoading, isDirty, confirmLeave } = useResourceForm(hookOptions);
+  const onDirtyChangeRef = useRef(onDirtyChange);
+  useEffect(() => {
+    onDirtyChangeRef.current = onDirtyChange;
+  });
+  useEffect(() => {
+    onDirtyChangeRef.current?.(isDirty, confirmLeave);
+  }, [isDirty, confirmLeave]);
+  const requestOpenChange = useCallback(
+    (next) => {
+      if (!next && !confirmLeave()) return;
+      onOpenChange(next);
+    },
+    [confirmLeave, onOpenChange]
+  );
   const bodyProps = {
     form,
     resolvedFields,
@@ -2612,14 +3113,14 @@ function ResourceForm(props) {
     action,
     isSaving,
     isLoading,
-    onOpenChange,
+    onOpenChange: requestOpenChange,
     handleSave,
     mode,
     steps,
     columns
   };
   if (effectiveLayout === "dialog") {
-    return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[560px]", children: [
+    return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: requestOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[560px]", children: [
       /* @__PURE__ */ jsxs(DialogHeader, { children: [
         /* @__PURE__ */ jsx(DialogTitle, { children: formTitle }),
         /* @__PURE__ */ jsx(DialogDescription, { className: "sr-only", children: formDescription })
@@ -2628,7 +3129,7 @@ function ResourceForm(props) {
     ] }) });
   }
   if (effectiveLayout === "sheet") {
-    return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs(SheetContent, { side: "right", className: "sm:max-w-[480px] overflow-y-auto", children: [
+    return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange: requestOpenChange, children: /* @__PURE__ */ jsxs(SheetContent, { side: "right", className: "sm:max-w-[480px] overflow-y-auto", children: [
       /* @__PURE__ */ jsxs(SheetHeader, { children: [
         /* @__PURE__ */ jsx(SheetTitle, { children: formTitle }),
         /* @__PURE__ */ jsx(SheetDescription, { className: "sr-only", children: formDescription })
@@ -2642,11 +3143,86 @@ function ResourceForm(props) {
     /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(FormBody, { ...bodyProps }) })
   ] });
 }
+function ConfirmDeleteDialog({
+  open,
+  onOpenChange,
+  onConfirm,
+  title = "Delete this record?",
+  kind = "permanent",
+  description = kind === "recycle" ? "It moves to the recycle bin, where it can be restored." : "This can't be undone.",
+  confirmLabel = "Delete",
+  cancelLabel = "Cancel"
+}) {
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (open) setError(null);
+  }, [open]);
+  const confirm = async () => {
+    setPending(true);
+    setError(null);
+    try {
+      await onConfirm();
+      onOpenChange(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setPending(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    AlertDialog,
+    {
+      open,
+      onOpenChange: (next) => {
+        if (!pending) onOpenChange(next);
+      },
+      children: /* @__PURE__ */ jsxs(AlertDialogContent, { "data-testid": "confirm-delete-dialog", children: [
+        /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+          /* @__PURE__ */ jsx(AlertDialogTitle, { children: title }),
+          /* @__PURE__ */ jsx(AlertDialogDescription, { children: description })
+        ] }),
+        error ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "alert",
+            "data-testid": "confirm-delete-error",
+            className: "flex items-start gap-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive",
+            children: [
+              /* @__PURE__ */ jsx(AlertTriangle, { className: "mt-0.5 h-4 w-4 shrink-0", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { children: error })
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
+          /* @__PURE__ */ jsx(AlertDialogCancel, { disabled: pending, "data-testid": "confirm-delete-cancel", children: cancelLabel }),
+          /* @__PURE__ */ jsxs(
+            AlertDialogAction,
+            {
+              disabled: pending,
+              "data-testid": "confirm-delete-confirm",
+              onClick: (e) => {
+                e.preventDefault();
+                void confirm();
+              },
+              children: [
+                pending ? /* @__PURE__ */ jsx(Spinner, { size: "sm", className: "mr-2" }) : null,
+                confirmLabel
+              ]
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
 function ResourcePage(props) {
   const {
     resource: resourceName,
     data: dataProp,
     total: totalProp,
+    pagination = "client",
+    clientRowLimit = 1e3,
     title,
     subtitle,
     icon,
@@ -2656,6 +3232,8 @@ function ResourcePage(props) {
     detailWidth = "md",
     titleField: titleFieldProp,
     subtitleField: subtitleFieldProp,
+    getTitle,
+    getSubtitle,
     renderDetail: renderDetailProp,
     detailFields,
     statusFilter,
@@ -2689,7 +3267,14 @@ function ResourcePage(props) {
     onCreate,
     onEdit,
     onDelete,
+    can,
+    canEditItem,
     createLabel = "New",
+    canEdit,
+    canDelete,
+    allowDelete,
+    confirmDelete,
+    onDeleted,
     secondaryActions,
     allowCreate,
     allowEdit,
@@ -2698,15 +3283,22 @@ function ResourcePage(props) {
     formMode,
     formSteps,
     formLayout: formLayoutProp,
+    mutationMode: mutationModeProp,
     bulkActions,
     renderCard: renderCardProp,
+    openOnCardClick = false,
     renderTable: renderTableProp,
     gridCols: gridColsProp,
     keyboardNavigation = true,
     capabilities,
     toolbar,
     emptyState,
+    emptyIcon,
+    emptyMessage,
+    emptyDescription,
+    header: headerMode = "page",
     resourceOptions,
+    urlState: urlStateProp,
     defaultView = "table",
     onNavigate = defaultNavigate,
     viewSettingsKey: viewSettingsKeyProp,
@@ -2715,14 +3307,46 @@ function ResourcePage(props) {
     className
   } = 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 resourceServerPaging = isClientMode && pagination === "server";
+  const url = useResourceUrlState(
+    urlStateProp ? "setSearchParams" in urlStateProp ? { searchParams: urlStateProp } : urlStateProp : void 0
+  );
+  const [urlSeed] = useState(() => {
+    if (!url) return null;
+    const sortable = !url.sort || !columnsProp ? true : columnsProp.some(
+      (col) => typeof col === "string" ? col === url.sort.field : col.key === url.sort.field && col.sortable !== false
+    );
+    return { q: url.q, sort: sortable ? url.sort : null, page: url.page };
+  });
+  const urlPeek = detail === "panel" || detail === "modal" ? url : void 0;
+  const urlSortKey = urlSeed?.sort ? `${urlSeed.sort.field}:${urlSeed.sort.order}` : "";
+  const isServerControlled = resourceServerPaging || 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 serverSearchFields = resourceOptions?.searchFields ?? searchFields;
   const resourceHook = useResource(
     resourceName ?? "__noop__",
-    isClientMode ? resourceOptions : { enabled: false }
+    isClientMode ? {
+      ...resourceOptions,
+      // Client paging fetches everything it can in one request; server
+      // paging starts at the user's stored page size. An explicit
+      // `defaultPerPage` wins over both.
+      defaultPerPage: resourceOptions?.defaultPerPage ?? (resourceServerPaging ? perPageProp ?? settings.pageSize : clientRowLimit),
+      searchFields: resourceServerPaging ? serverSearchFields : resourceOptions?.searchFields,
+      // Paging, searching and sorting change the query key; keep the
+      // current page on screen while the next one loads.
+      keepPreviousData: resourceOptions?.keepPreviousData ?? resourceServerPaging,
+      // Start where the URL says, so restoring a link doesn't push a
+      // search or sort that resets the page to 1.
+      ...resourceServerPaging && urlSeed ? {
+        defaultSearch: urlSeed.q,
+        ...urlSeed.page ? { defaultPage: urlSeed.page } : {},
+        ...urlSeed.sort ? { defaultSort: urlSeed.sort } : {}
+      } : {},
+      ...writeModeOptions(resourceOptions, mutationModeProp)
+    } : { enabled: false }
   );
+  const effectivePageSize = resourceServerPaging ? resourceHook.params.pagination?.perPage ?? settings.pageSize : perPageProp ?? settings.pageSize;
   const displayData = isClientMode ? resourceHook.list.data?.data ?? [] : dataProp ?? [];
   const displayTotal = isClientMode ? resourceHook.list.data?.total ?? 0 : totalProp ?? 0;
   const isLoading = isClientMode ? resourceHook.list.isLoading : loadingProp ?? false;
@@ -2734,14 +3358,80 @@ function ResourcePage(props) {
     columns: columnsProp,
     statusFilter,
     searchFields,
-    initialFilters,
+    initialFilters: initialFilters ?? (urlSeed && (urlSeed.q || urlSeed.sort) ? [
+      ...urlSeed.q ? [{ field: "__search__", operator: "contains", value: urlSeed.q }] : [],
+      ...urlSeed.sort ? [{ field: "__sort__", operator: "eq", value: urlSortKey }] : []
+    ] : void 0),
     onFiltersChange,
     defaultView,
+    // Each page remembers its own table/cards choice, under the same key as
+    // its density and page size — not one key shared by every data page.
+    viewKey: viewSettingsKey,
     detail,
     titleField: titleFieldProp,
     subtitleField: subtitleFieldProp,
     controlled: isServerControlled
   });
+  const {
+    setSearch: setResourceSearch,
+    setSort: setResourceSort,
+    setFilters: setResourceFilters
+  } = resourceHook;
+  const pushedSearchRef = useRef(resourceServerPaging ? urlSeed?.q ?? "" : "");
+  const searchEffectRanRef = useRef(false);
+  useEffect(() => {
+    if (!resourceServerPaging) return;
+    const firstRun = !searchEffectRanRef.current;
+    searchEffectRanRef.current = true;
+    if (page.search === pushedSearchRef.current) return;
+    const push = () => {
+      pushedSearchRef.current = page.search;
+      setResourceSearch(page.search);
+    };
+    if (firstRun || page.search === "") {
+      push();
+      return;
+    }
+    const timer = setTimeout(push, 300);
+    return () => clearTimeout(timer);
+  }, [resourceServerPaging, page.search, setResourceSearch]);
+  const defaultSort = resourceOptions?.defaultSort;
+  const pushedSortRef = useRef(resourceServerPaging ? urlSortKey : "");
+  useEffect(() => {
+    if (!resourceServerPaging) return;
+    const key = page.sort ? `${page.sort.field}:${page.sort.order}` : "";
+    if (key === pushedSortRef.current) return;
+    pushedSortRef.current = key;
+    setResourceSort(page.sort ?? defaultSort);
+  }, [resourceServerPaging, page.sort, defaultSort, setResourceSort]);
+  const statusField = statusFilter ? typeof statusFilter === "string" ? statusFilter : statusFilter.field : void 0;
+  const defaultFilters = resourceOptions?.defaultFilters;
+  const pushedStatusRef = useRef("");
+  useEffect(() => {
+    if (!resourceServerPaging || !statusField) return;
+    const key = JSON.stringify([page.statusValue, defaultFilters ?? null]);
+    if (key === pushedStatusRef.current) return;
+    pushedStatusRef.current = key;
+    setResourceFilters([
+      ...defaultFilters ?? [],
+      ...page.statusValue.length > 0 ? [{ field: statusField, operator: "in", value: page.statusValue }] : []
+    ]);
+  }, [
+    resourceServerPaging,
+    statusField,
+    page.statusValue,
+    defaultFilters,
+    setResourceFilters
+  ]);
+  const clientTruncated = isClientMode && !resourceServerPaging && !isLoading && !hasError && displayTotal > displayData.length;
+  const warnedTruncatedRef = useRef(false);
+  useEffect(() => {
+    if (!clientTruncated || warnedTruncatedRef.current) return;
+    warnedTruncatedRef.current = true;
+    console.warn(
+      `ResourcePage: "${resourceName}" has ${displayTotal} rows but only ${displayData.length} were fetched. Pass \`pagination="server"\` to page through all of them, or raise \`clientRowLimit\`.`
+    );
+  }, [clientTruncated, resourceName, displayTotal, displayData.length]);
   const actions = useMemo(() => {
     if (isClientMode) {
       return {
@@ -2774,6 +3464,17 @@ function ResourcePage(props) {
     (item) => getKeyProp ? getKeyProp(item) : String(item.id ?? ""),
     [getKeyProp]
   );
+  const snapshotKey = page.selectedItem ? keyOf(page.selectedItem) : null;
+  const selectedKey = urlPeek ? urlPeek.detailId : snapshotKey;
+  const snapshot = page.selectedItem && snapshotKey === selectedKey ? page.selectedItem : null;
+  const rowOrSnapshot = !selectedKey ? snapshot : displayData.find((row) => keyOf(row) === selectedKey) ?? snapshot;
+  const linkedId = urlPeek && selectedKey && !rowOrSnapshot ? selectedKey : null;
+  const linked = useOne(resourceName ?? "__noop__", linkedId, {
+    enabled: isClientMode && !!linkedId
+  });
+  const selectedItem = rowOrSnapshot ?? (linkedId && linked.data ? linked.data : null);
+  const linkMissing = !!linkedId && !selectedItem && !isLoading && (isClientMode ? linked.isError : true);
+  const detailOpen = urlPeek ? selectedItem !== null || linkMissing : page.detailOpen;
   const [selectedIds, setSelectedIds] = useState(/* @__PURE__ */ new Set());
   const handleToggleSelect = useCallback((id) => {
     setSelectedIds((prev) => {
@@ -2806,8 +3507,20 @@ function ResourcePage(props) {
       onCreate();
     }
   }, [useBuiltInCreate, onCreate]);
+  const allows = useCallback(
+    (action, item) => {
+      if (can && !can(action, item)) return false;
+      if (!item) return true;
+      if (canEditItem && !canEditItem(item)) return false;
+      if (action === "edit" && canEdit && !canEdit(item)) return false;
+      if (action === "delete" && canDelete && !canDelete(item)) return false;
+      return true;
+    },
+    [can, canEditItem, canEdit, canDelete]
+  );
   const handleEdit = useCallback(
     (item) => {
+      if (!allows("edit", item)) return;
       if (useBuiltInEdit) {
         setFormAction("edit");
         setFormItem(item);
@@ -2816,14 +3529,83 @@ function ResourcePage(props) {
         onEdit(item);
       }
     },
-    [useBuiltInEdit, onEdit]
+    [useBuiltInEdit, onEdit, allows]
+  );
+  const closeDetail = useCallback(() => {
+    page.setDetailOpen(false);
+    page.setSelectedItem(null);
+    urlPeek?.setDetailId(null);
+  }, [page, urlPeek]);
+  const useBuiltInDelete = !!allowDelete && !onDelete && isClientMode;
+  const deleteConfirmed = confirmDelete === void 0 ? useBuiltInDelete : !!confirmDelete;
+  const deleteCopy = typeof confirmDelete === "object" ? confirmDelete : void 0;
+  const [pendingDelete, setPendingDelete] = useState(null);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const { remove: removeRecord } = resourceHook;
+  const { data: providerCaps } = useCapabilities(resourceName, {
+    enabled: useBuiltInDelete && deleteConfirmed
+  });
+  const deleteKind = providerCaps?.softDelete ? "recycle" : "permanent";
+  const performDelete = useCallback(
+    async (item) => {
+      if (useBuiltInDelete) {
+        await removeRecord(
+          getKeyProp ? keyOf(item) : item.id
+        );
+      } else if (onDelete) {
+        await onDelete(item);
+      }
+      closeDetail();
+      onDeleted?.(item);
+    },
+    [
+      useBuiltInDelete,
+      removeRecord,
+      getKeyProp,
+      keyOf,
+      onDelete,
+      closeDetail,
+      onDeleted
+    ]
   );
+  const deleteHandler = !(useBuiltInDelete || onDelete) ? void 0 : deleteConfirmed ? (item) => {
+    setPendingDelete(item);
+    setDeleteOpen(true);
+  } : useBuiltInDelete ? (item) => {
+    performDelete(item).catch((err) => {
+      if (!resourceOptions?.onError) {
+        toast.error(err instanceof Error ? err.message : "The delete failed.");
+      }
+    });
+  } : (
+    // Unconfirmed `onDelete` keeps its original contract exactly:
+    // called straight from the peek, nothing closed for it.
+    (item) => {
+      const report = (err) => {
+        if (resourceOptions?.onError) {
+          resourceOptions.onError(err instanceof Error ? err : new Error(String(err)));
+        } else {
+          toast.error(err instanceof Error ? err.message : "The delete failed.");
+        }
+      };
+      try {
+        Promise.resolve(onDelete?.(item)).catch(report);
+      } catch (err) {
+        report(err);
+      }
+    }
+  );
+  const selectedEditable = !!selectedItem && allows("edit", selectedItem);
+  const selectedDeletable = !!selectedItem && allows("delete", selectedItem);
   const tableColumns = useMemo(() => {
     const base = isClientMode ? page.columns.map((col) => ({
       key: col.key,
       header: col.header ?? col.key,
       sortable: col.sortable ?? true,
       hideBelow: col.hideBelow,
+      width: col.width,
+      minWidth: col.minWidth,
+      defaultVisible: col.defaultVisible,
       editable: col.editable,
       accessor: col.accessor,
       render: col.render ? (item, value) => col.render(item, value, actions) : void 0
@@ -2837,19 +3619,49 @@ function ResourcePage(props) {
     page.tableColumns,
     actions
   ]);
-  const currentPage = pageProp ?? 1;
+  const [tableTieBreaks, setTableTieBreaks] = useState(null);
+  const pageSort = page.sort;
+  const setPageSort = page.setSort;
+  const tableSort = useMemo(() => {
+    if (!pageSort) return [];
+    const primary = { key: pageSort.field, dir: pageSort.order };
+    const rest = tableTieBreaks && tableTieBreaks.primary === `${primary.key}:${primary.dir}` ? tableTieBreaks.rest : [];
+    return [primary, ...rest];
+  }, [pageSort, tableTieBreaks]);
+  const handleTableSort = useCallback(
+    (next) => {
+      const [primary, ...rest] = next;
+      setTableTieBreaks(primary ? { primary: `${primary.key}:${primary.dir}`, rest } : null);
+      setPageSort(primary ? { field: primary.key, order: primary.dir } : null);
+    },
+    [setPageSort]
+  );
+  const pagerPage = resourceServerPaging ? resourceHook.params.pagination?.page ?? 1 : pageProp;
+  const pagerPerPage = resourceServerPaging ? resourceHook.params.pagination?.perPage : perPageProp;
+  const pagerTotal = resourceServerPaging ? displayTotal : totalProp;
+  const pagerOnPageChange = resourceServerPaging ? resourceHook.setPage : onPageChange;
+  const currentPage = pagerPage ?? 1;
+  const writeUrl = url?.write;
+  useEffect(() => {
+    writeUrl?.({
+      q: page.search,
+      sort: page.sort,
+      ...resourceServerPaging ? { page: currentPage } : {}
+    });
+  }, [writeUrl, page.search, page.sort, currentPage, resourceServerPaging]);
   const handleSearchChange = useCallback(
     (value) => {
       page.filterConfig.onSearchChange(value);
       if (!isServerControlled) return;
       onSearchChange?.(value);
-      if (currentPage !== 1) onPageChange?.(1);
+      if (currentPage !== 1 && !resourceServerPaging) onPageChange?.(1);
     },
     [
       page.filterConfig,
       isServerControlled,
       onSearchChange,
       onPageChange,
+      resourceServerPaging,
       currentPage
     ]
   );
@@ -2861,24 +3673,43 @@ function ResourcePage(props) {
       onSortChange?.(
         field && (order === "asc" || order === "desc") ? { field, order } : null
       );
-      onPageChange?.(1);
+      if (!resourceServerPaging) onPageChange?.(1);
     },
-    [page.filterConfig, isServerControlled, onSortChange, onPageChange]
+    [
+      page.filterConfig,
+      isServerControlled,
+      onSortChange,
+      onPageChange,
+      resourceServerPaging
+    ]
   );
   const handleClearFilters = useCallback(() => {
     page.clearFilters();
     if (!isServerControlled) return;
     onSearchChange?.("");
     onSortChange?.(null);
-    onPageChange?.(1);
-  }, [page, isServerControlled, onSearchChange, onSortChange, onPageChange]);
+    if (!resourceServerPaging) onPageChange?.(1);
+  }, [
+    page,
+    isServerControlled,
+    onSearchChange,
+    onSortChange,
+    onPageChange,
+    resourceServerPaging
+  ]);
   const handleStatusChange = useCallback(
     (values) => {
       page.filterConfig.statusChips?.onChange(values);
       if (!isServerControlled) return;
-      if (currentPage !== 1) onPageChange?.(1);
+      if (currentPage !== 1 && !resourceServerPaging) onPageChange?.(1);
     },
-    [page.filterConfig, isServerControlled, onPageChange, currentPage]
+    [
+      page.filterConfig,
+      isServerControlled,
+      onPageChange,
+      resourceServerPaging,
+      currentPage
+    ]
   );
   const statusChipsConfig = useMemo(() => {
     const base = page.filterConfig.statusChips;
@@ -2889,12 +3720,20 @@ function ResourcePage(props) {
     (size) => {
       updateSetting("pageSize", size);
       onPerPageChange?.(size);
-      if (isServerControlled) onPageChange?.(1);
+      if (resourceServerPaging) resourceHook.setPerPage(size);
+      else if (isServerControlled) onPageChange?.(1);
     },
-    [updateSetting, onPerPageChange, isServerControlled, onPageChange]
+    [
+      updateSetting,
+      onPerPageChange,
+      resourceServerPaging,
+      resourceHook.setPerPage,
+      isServerControlled,
+      onPageChange
+    ]
   );
-  const missingPerPage = isServerControlled && !!onPageChange && perPageProp === void 0;
-  const missingTotal = isServerControlled && !!onPageChange && totalProp === void 0;
+  const missingPerPage = isServerControlled && !!pagerOnPageChange && pagerPerPage === void 0;
+  const missingTotal = isServerControlled && !!pagerOnPageChange && pagerTotal === void 0;
   const pagerMisconfigured = missingPerPage || missingTotal;
   const missingPagerProps = [
     ...missingPerPage ? ["perPage"] : [],
@@ -2909,18 +3748,23 @@ function ResourcePage(props) {
       `ResourcePage: ${missingPagerProps.map((name) => `\`${name}\``).join(" and ")} ${missingPagerProps.length > 1 ? "are" : "is"} required when \`onPageChange\` is supplied.`
     );
   }, [pagerMisconfigured]);
-  const pagerPageSize = perPageProp ?? effectivePageSize;
+  const pagerPageSize = pagerPerPage ?? 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] ?? ""
-  ) : "";
-  const detailSubtitle = page.selectedItem && page.subtitleField ? String(
-    page.selectedItem[page.subtitleField] ?? ""
+  const { setPage: setResourcePage } = resourceHook;
+  const settledPage = !isLoading && !hasError && !resourceHook.list.isPlaceholderData;
+  useEffect(() => {
+    if (!resourceServerPaging || !settledPage) return;
+    if (currentPage > totalPages) setResourcePage(totalPages);
+  }, [resourceServerPaging, settledPage, currentPage, totalPages, setResourcePage]);
+  const titleOf = (item) => getTitle ? getTitle(item) : String(item[page.titleField] ?? "");
+  const detailTitle = selectedItem ? titleOf(selectedItem) : "";
+  const detailSubtitle = !selectedItem ? void 0 : getSubtitle ? getSubtitle(selectedItem) : page.subtitleField ? String(
+    selectedItem[page.subtitleField] ?? ""
   ) : void 0;
   const handleRowClick = (item) => {
     if (detail === "route") {
@@ -2931,9 +3775,10 @@ function ResourcePage(props) {
       return;
     }
     page.handleRowClick(item);
+    urlPeek?.setDetailId(keyOf(item));
   };
   const hasBulkSelect = !!bulkActions && bulkActions.length > 0;
-  const overlayOpen = page.detailOpen || formOpen;
+  const overlayOpen = detailOpen || formOpen || deleteOpen;
   const keyboardNav = useKeyboardNavigation({
     itemCount: page.data.length,
     enabled: keyboardNavigation && page.viewMode !== "table",
@@ -2954,12 +3799,9 @@ function ResourcePage(props) {
     // 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
+    onBack: detailOpen ? closeDetail : void 0
   });
-  const showCreateButton = onCreate || useBuiltInCreate;
+  const showCreateButton = (onCreate || useBuiltInCreate) && allows("create");
   const createButton = showCreateButton ? /* @__PURE__ */ jsxs(Button, { size: "sm", onClick: handleCreate, children: [
     /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 mr-1" }),
     createLabel
@@ -3059,7 +3901,8 @@ function ResourcePage(props) {
       isLoading,
       hasError,
       isEmpty,
-      errorMessage: errorMessage2,
+      errorMessage: errorMessage2 ?? // A provider's read error carries a sentence users can be shown.
+      (isClientMode && isDataReadError(resourceHook.list.error) ? resourceHook.list.error.message : void 0),
       onRetry: isClientMode ? () => resourceHook.list.refetch() : onRetryProp,
       viewMode: page.viewMode,
       onViewModeChange: page.setViewMode,
@@ -3072,6 +3915,10 @@ function ResourcePage(props) {
       hasActiveFilters: page.hasActiveFilters,
       onClearFilters: handleClearFilters,
       emptyAction: emptyState,
+      emptyIcon,
+      emptyMessage,
+      emptyDescription,
+      ...headerMode === "toolbar" ? { header: "toolbar" } : {},
       filters: renderSlot(
         DataFilters,
         slots?.filters,
@@ -3090,7 +3937,7 @@ function ResourcePage(props) {
           onDeleteView,
           canSaveViews,
           onClearAll: page.hasActiveFilters ? handleClearFilters : void 0,
-          showSearch: capabilities?.search !== false,
+          showSearch: capabilities?.search !== false && !(resourceServerPaging && !serverSearchFields?.length),
           showSort: capabilities?.sort !== false
         },
         slotProps?.filters
@@ -3150,18 +3997,42 @@ function ResourcePage(props) {
                 resizeKey,
                 stickyHeader,
                 stickyFirstColumn,
+                keyboardNavigation,
                 // The server already cut the page window; DataTable's own
                 // pagination would slice the slice.
-                pagination: isServerControlled ? false : void 0
+                pagination: isServerControlled ? false : void 0,
+                // Client mode: the header sort is the page's sort, so it
+                // reaches the URL and a link restores what the table shows.
+                ...isServerControlled ? {} : { sort: tableSort, onSortChange: handleTableSort }
               },
               slotProps?.table
             ),
+            ...openOnCardClick && renderCardProp && detail !== "none" ? {
+              onItemClick: handleRowClick,
+              getItemLabel: (item) => `Open ${titleOf(item)}`.trim()
+            } : {},
             renderCard: (item, index) => renderCardProp ? renderCardProp(item, index, cardActionsFor(item)) : renderDefaultCard(item),
             renderListItem: (item, index) => renderCardProp ? renderCardProp(item, index, cardActionsFor(item)) : renderDefaultListItem(item)
           },
           slotProps?.grid
         ),
-        isServerControlled && onPageChange && pagerMisconfigured && /* @__PURE__ */ jsxs(
+        clientTruncated && /* @__PURE__ */ jsxs(
+          "p",
+          {
+            role: "status",
+            className: "px-3 py-2 text-sm text-muted-foreground",
+            "data-testid": "resource-page-truncated",
+            children: [
+              "Showing the first ",
+              displayData.length.toLocaleString(),
+              " of",
+              " ",
+              displayTotal.toLocaleString(),
+              " records."
+            ]
+          }
+        ),
+        isServerControlled && pagerOnPageChange && 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",
@@ -3186,10 +4057,11 @@ function ResourcePage(props) {
             ]
           }
         ),
-        isServerControlled && onPageChange && !pagerMisconfigured && /* @__PURE__ */ jsxs(
+        isServerControlled && pagerOnPageChange && !pagerMisconfigured && /* @__PURE__ */ jsxs(
           "nav",
           {
             "aria-label": "Pagination",
+            "aria-busy": resourceServerPaging && resourceHook.list.isPlaceholderData || void 0,
             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: [
@@ -3209,7 +4081,7 @@ function ResourcePage(props) {
                     variant: "outline",
                     size: "sm",
                     disabled: currentPage <= 1,
-                    onClick: () => onPageChange(currentPage - 1),
+                    onClick: () => pagerOnPageChange(currentPage - 1),
                     testID: "resource-page-prev",
                     children: [
                       /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4 mr-1", "aria-hidden": "true" }),
@@ -3236,7 +4108,7 @@ function ResourcePage(props) {
                     variant: "outline",
                     size: "sm",
                     disabled: currentPage >= totalPages,
-                    onClick: () => onPageChange(currentPage + 1),
+                    onClick: () => pagerOnPageChange(currentPage + 1),
                     testID: "resource-page-next",
                     children: [
                       "Next",
@@ -3251,17 +4123,23 @@ function ResourcePage(props) {
         (detail === "panel" || detail === "modal") && renderSlot(
           DetailPanel,
           slots?.detail,
-          {
-            item: page.selectedItem,
-            open: page.detailOpen,
-            onClose: () => {
-              page.setDetailOpen(false);
-              page.setSelectedItem(null);
-            },
+          linkMissing ? {
+            // A linked record this user can't read, or that's gone.
+            item: {},
+            open: detailOpen,
+            onClose: closeDetail,
+            title: "Record not found",
+            width: detailWidth,
+            layout: detail === "modal" ? "dialog" : "sheet",
+            children: () => /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", "data-testid": "resource-page-link-missing", children: isDataReadError(linked.error) && linked.error.outcome === "forbidden" ? linked.error.message : "This record doesn't exist, or you don't have access to it." })
+          } : {
+            item: selectedItem,
+            open: detailOpen,
+            onClose: closeDetail,
             title: detailTitle,
             subtitle: detailSubtitle,
-            onEdit: onEdit ?? (useBuiltInEdit ? handleEdit : void 0),
-            onDelete,
+            onEdit: selectedEditable ? onEdit ?? (useBuiltInEdit ? handleEdit : void 0) : void 0,
+            onDelete: selectedDeletable ? deleteHandler : void 0,
             fields: detailFields,
             width: detailWidth,
             layout: detail === "modal" ? "dialog" : "sheet",
@@ -3278,6 +4156,7 @@ function ResourcePage(props) {
             layout: formLayoutProp ?? (formAction === "edit" ? "sheet" : "dialog"),
             mode: formMode,
             steps: formSteps,
+            mutationMode: mutationModeProp,
             item: formAction === "edit" ? formItem ?? void 0 : page.data.length > 0 ? Object.fromEntries(
               Object.keys(page.data[0]).filter((k) => k !== "id").map((k) => [k, ""])
             ) : void 0,
@@ -3287,11 +4166,25 @@ function ResourcePage(props) {
             listData: page.data,
             renderForm: renderFormProp,
             onSuccess: () => {
-              page.setDetailOpen(false);
-              page.setSelectedItem(null);
+              if (formAction === "create") closeDetail();
             }
           },
           slotProps?.form
+        ),
+        deleteConfirmed && (useBuiltInDelete || !!onDelete) && renderSlot(
+          ConfirmDeleteDialog,
+          slots?.deleteDialog,
+          {
+            open: deleteOpen,
+            onOpenChange: setDeleteOpen,
+            onConfirm: () => pendingDelete ? performDelete(pendingDelete) : void 0,
+            kind: deleteKind,
+            title: typeof deleteCopy?.title === "function" ? pendingDelete ? deleteCopy.title(pendingDelete) : void 0 : deleteCopy?.title,
+            description: typeof deleteCopy?.description === "function" ? pendingDelete ? deleteCopy.description(pendingDelete) : void 0 : deleteCopy?.description,
+            confirmLabel: deleteCopy?.confirmLabel,
+            cancelLabel: deleteCopy?.cancelLabel
+          },
+          slotProps?.deleteDialog
         )
       ]
     }
@@ -3371,6 +4264,6 @@ function ResourceDetailPage({
 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 };
+export { AppShell2 as AppShell, BadgeCell, ConfirmDeleteDialog, 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