@marktiderman/genesis-ui 2.8.0 → 2.9.0

package/dist/components/data/index.js

@@ -2,33 +2,35 @@
 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';
 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 { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '../../chunk-N2ZFNOOT.js';
+import { toast } from '../../chunk-4RAZJ6LL.js';
 import { Progress } from '../../chunk-W5Y3LG5K.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 { DetailPage } from '../../chunk-AFZ76Q26.js';
-import '../../chunk-D2LIXA2Y.js';
-import '../../chunk-AVFZ4P4B.js';
-import { PageLoading } from '../../chunk-YRYQXU3G.js';
-import { Spinner } from '../../chunk-OVU3Z2MT.js';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../../chunk-FK42ZGGV.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 { FormField, FormLabel, FormError, FormDescription } from '../../chunk-R7QFP6EL.js';
 import '../../chunk-F47U5KNW.js';
-import { titleCase, useResourcePage } from '../../chunk-DWCAC2E7.js';
+import { titleCase, useResourcePage } from '../../chunk-RKPS7ERS.js';
+import { useResourceUrlState } from '../../chunk-DIV4BYXX.js';
 export { useSavedViews } from '../../chunk-GCQFVMPI.js';
 import '../../chunk-PKFDGGZV.js';
 import { useViewSettings } from '../../chunk-OZ7ZAYCS.js';
@@ -43,10 +45,12 @@ 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, 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({
@@ -670,6 +674,50 @@ 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(typeof col.width === "string" && !PX_WIDTH.test(col.width) ? col.width : void 0, hide);
@@ -888,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(
     () => {
@@ -950,7 +998,7 @@ function DataTable({
   }, [columnVisibilityKey]);
   useEffect(() => {
     if (!visibilityHydrated || !columnVisibilityKey) return;
-    localStorage.setItem(
+    storeSet(
       `dt-vis-${columnVisibilityKey}`,
       JSON.stringify(visibleCols)
     );
@@ -964,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(() => {
@@ -981,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 {
@@ -1008,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(
@@ -1085,151 +1367,181 @@ function DataTable({
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs(Table, { style: { tableLayout: "fixed" }, children: [
-      /* @__PURE__ */ jsxs("colgroup", { children: [
-        selectable && /* @__PURE__ */ jsx("col", { style: { width: 40 } }),
-        activeColumns.map((col) => {
-          const w = colWidths[col.key];
-          return /* @__PURE__ */ jsx(
-            "col",
-            {
-              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, { 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",
-                    "overflow-hidden",
-                    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: "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", { 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" }))
-                    ] }),
-                    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: [
@@ -1810,6 +2122,39 @@ 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,
@@ -2713,7 +3058,12 @@ function ResourceForm(props) {
     steps,
     columns = 1,
     prefillFromUrl,
-    autoPlaceholder = false
+    autoPlaceholder = false,
+    warnWhenUnsaved = false,
+    onDirtyChange,
+    mutationMode = "pessimistic",
+    undoDelayMs,
+    onUndoable
   } = props;
   const isMobile = useIsMobile();
   const effectiveLayout = isMobile ? "sheet" : layoutProp;
@@ -2731,11 +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
+    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,
@@ -2743,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 })
@@ -2759,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 })
@@ -2778,7 +3148,8 @@ function ConfirmDeleteDialog({
   onOpenChange,
   onConfirm,
   title = "Delete this record?",
-  description = "This can't be undone.",
+  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"
 }) {
@@ -2896,6 +3267,7 @@ function ResourcePage(props) {
     onCreate,
     onEdit,
     onDelete,
+    can,
     canEditItem,
     createLabel = "New",
     canEdit,
@@ -2911,6 +3283,7 @@ function ResourcePage(props) {
     formMode,
     formSteps,
     formLayout: formLayoutProp,
+    mutationMode: mutationModeProp,
     bulkActions,
     renderCard: renderCardProp,
     openOnCardClick = false,
@@ -2925,6 +3298,7 @@ function ResourcePage(props) {
     emptyDescription,
     header: headerMode = "page",
     resourceOptions,
+    urlState: urlStateProp,
     defaultView = "table",
     onNavigate = defaultNavigate,
     viewSettingsKey: viewSettingsKeyProp,
@@ -2934,6 +3308,18 @@ function ResourcePage(props) {
   } = props;
   const isClientMode = !!resourceName;
   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);
@@ -2949,7 +3335,15 @@ function ResourcePage(props) {
       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
+      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;
@@ -2964,9 +3358,15 @@ 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,
@@ -2977,7 +3377,7 @@ function ResourcePage(props) {
     setSort: setResourceSort,
     setFilters: setResourceFilters
   } = resourceHook;
-  const pushedSearchRef = useRef("");
+  const pushedSearchRef = useRef(resourceServerPaging ? urlSeed?.q ?? "" : "");
   const searchEffectRanRef = useRef(false);
   useEffect(() => {
     if (!resourceServerPaging) return;
@@ -2996,7 +3396,7 @@ function ResourcePage(props) {
     return () => clearTimeout(timer);
   }, [resourceServerPaging, page.search, setResourceSearch]);
   const defaultSort = resourceOptions?.defaultSort;
-  const pushedSortRef = useRef("");
+  const pushedSortRef = useRef(resourceServerPaging ? urlSortKey : "");
   useEffect(() => {
     if (!resourceServerPaging) return;
     const key = page.sort ? `${page.sort.field}:${page.sort.order}` : "";
@@ -3064,8 +3464,17 @@ function ResourcePage(props) {
     (item) => getKeyProp ? getKeyProp(item) : String(item.id ?? ""),
     [getKeyProp]
   );
-  const selectedKey = page.selectedItem ? keyOf(page.selectedItem) : null;
-  const selectedItem = !page.selectedItem ? null : selectedKey ? displayData.find((row) => keyOf(row) === selectedKey) ?? page.selectedItem : page.selectedItem;
+  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) => {
@@ -3098,10 +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 (canEdit && !canEdit(item)) return;
-      if (canEditItem && !canEditItem(item)) return;
+      if (!allows("edit", item)) return;
       if (useBuiltInEdit) {
         setFormAction("edit");
         setFormItem(item);
@@ -3110,18 +3529,23 @@ function ResourcePage(props) {
         onEdit(item);
       }
     },
-    [useBuiltInEdit, onEdit, canEdit, canEditItem]
+    [useBuiltInEdit, onEdit, allows]
   );
   const closeDetail = useCallback(() => {
     page.setDetailOpen(false);
     page.setSelectedItem(null);
-  }, [page]);
+    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) {
@@ -3149,24 +3573,39 @@ function ResourcePage(props) {
     setDeleteOpen(true);
   } : useBuiltInDelete ? (item) => {
     performDelete(item).catch((err) => {
-      console.error("ResourcePage: delete failed", 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) => {
-      void onDelete?.(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 mayChange = (item) => canEditItem ? canEditItem(item) : true;
-  const selectedEditable = !!selectedItem && mayChange(selectedItem) && (canEdit ? canEdit(selectedItem) : true);
-  const selectedDeletable = !!selectedItem && mayChange(selectedItem) && (canDelete ? canDelete(selectedItem) : true);
+  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
@@ -3180,11 +3619,36 @@ function ResourcePage(props) {
     page.tableColumns,
     actions
   ]);
+  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);
@@ -3311,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 || deleteOpen;
+  const overlayOpen = detailOpen || formOpen || deleteOpen;
   const keyboardNav = useKeyboardNavigation({
     itemCount: page.data.length,
     enabled: keyboardNavigation && page.viewMode !== "table",
@@ -3334,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
@@ -3439,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,
@@ -3534,9 +3997,13 @@ 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
             ),
@@ -3656,9 +4123,18 @@ function ResourcePage(props) {
         (detail === "panel" || detail === "modal") && renderSlot(
           DetailPanel,
           slots?.detail,
-          {
+          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: page.detailOpen,
+            open: detailOpen,
             onClose: closeDetail,
             title: detailTitle,
             subtitle: detailSubtitle,
@@ -3680,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,
@@ -3701,6 +4178,7 @@ function ResourcePage(props) {
             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,