@marktiderman/genesis-ui 2.8.0 → 2.10.0

package/dist/components/data/index.js

@@ -2,51 +2,58 @@
 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 { 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 { useAnnouncer } from '../../chunk-I4NBE2KL.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 { showUndoToast, showWriteErrorToast, useResourceTableModel } from '../../chunk-C7PQ54JI.js';
+export { showUndoToast, showWriteErrorToast, useResourceTable } from '../../chunk-C7PQ54JI.js';
+import { titleCase } from '../../chunk-RKPS7ERS.js';
+import '../../chunk-DIV4BYXX.js';
 export { useSavedViews } from '../../chunk-GCQFVMPI.js';
 import '../../chunk-PKFDGGZV.js';
-import { useViewSettings } from '../../chunk-OZ7ZAYCS.js';
+import '../../chunk-OZ7ZAYCS.js';
+import '../../chunk-4RAZJ6LL.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-WGMEVX3Y.js';
+import { DefaultLink } from '../../chunk-WGMEVX3Y.js';
 export { DefaultLink, defaultNavigate, isPathActive, resolveNavigation } from '../../chunk-WGMEVX3Y.js';
-import { useKeyboardNavigation } from '../../chunk-YJ6MPS6U.js';
+import '../../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 { AlertTriangle, RefreshCw, ChevronDown, Check, Search, X, ArrowUpDown, Bookmark, Trash2, BookmarkPlus, Loader2, Columns3, ArrowUp, ArrowDown, ChevronLeft, ChevronRight, ExternalLink, GripVertical, 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 { useState, useRef, useEffect, useCallback, useMemo, useId, Fragment as Fragment$1, useLayoutEffect } 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 { useDataProvider, isDataReadError } from '@marktiderman/genesis-core/provider';
 import { useDropzone } from 'react-dropzone';
 
 function DataPageShell({
@@ -670,6 +677,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 +939,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 +1001,7 @@ function DataTable({
   }, [columnVisibilityKey]);
   useEffect(() => {
     if (!visibilityHydrated || !columnVisibilityKey) return;
-    localStorage.setItem(
+    storeSet(
       `dt-vis-${columnVisibilityKey}`,
       JSON.stringify(visibleCols)
     );
@@ -964,8 +1015,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 +1033,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 +1107,236 @@ 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.filter((s) => columns.some((c) => c.key === s.key)).map((s) => ({ id: s.key, desc: s.dir === "desc" })),
+    [sorts, columns]
+  );
+  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 renderedItems = virtualRows ? virtualRows.map((vr) => displayItems[vr.index]).filter(Boolean) : displayItems;
+  const scrollTop = rowVirtualizer.scrollOffset ?? 0;
+  const firstInView = virtualRows ? virtualRows.find((vr) => vr.start >= scrollTop) ?? virtualRows.find((vr) => vr.end > scrollTop) ?? virtualRows[0] : void 0;
+  const fallbackItem = firstInView ? displayItems[firstInView.index] : renderedItems[0];
+  const tabStopKey = activeRowKey && renderedItems.some((it) => getKey(it) === activeRowKey) ? activeRowKey : fallbackItem ? getKey(fallbackItem) : 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 +1374,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: [
@@ -1477,6 +1796,7 @@ var statusColorMap = {
   primary: { color: "text-primary", bgColor: "bg-primary/15" }
 };
 var DRAG_TYPE = "application/x-genesis-kanban-item";
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 function KanbanBoard({
   columns,
   renderCard,
@@ -1489,112 +1809,301 @@ function KanbanBoard({
 }) {
   const [dragging, setDragging] = useState(null);
   const [over, setOver] = useState(null);
+  const [grabbed, setGrabbed] = useState(null);
+  const { message: announcement, announce } = useAnnouncer();
+  const handles = useRef(/* @__PURE__ */ new Map());
+  const refocus = useRef(null);
+  const instructionsId = useId();
   const keyOf = (item, index) => getKey ? getKey(item) : String(index);
-  const move = (item, to) => {
-    void Promise.resolve(onMoveItem?.(item, to)).catch(() => {
-    });
+  const movable = Boolean(onMoveItem && getKey);
+  const find = (key) => {
+    if (!getKey) return null;
+    for (const column of columns) {
+      const item = column.items.find((i) => getKey(i) === key);
+      if (item !== void 0) return { item, column };
+    }
+    return null;
+  };
+  const labelOf = (key) => {
+    const found = find(key);
+    return found && getItemLabel ? getItemLabel(found.item) : "Card";
+  };
+  const columnLabel = (key) => columns.find((c) => c.key === key)?.label ?? key;
+  const move = (item, to, name) => {
+    let result;
+    try {
+      result = onMoveItem?.(item, to);
+    } catch (error) {
+      result = Promise.reject(error);
+    }
+    void Promise.resolve(result).then(
+      () => announce(`${name} moved to ${columnLabel(to)}.`),
+      () => announce(`Couldn\u2019t move ${name}.`)
+    );
+  };
+  const moveKey = (key, to) => {
+    const found = find(key);
+    if (!found || found.column.key === to) return;
+    move(found.item, to, labelOf(key));
   };
   const onDrop = (event, to) => {
     event.preventDefault();
     setOver(null);
     const key = event.dataTransfer.getData(DRAG_TYPE) || dragging?.key;
     setDragging(null);
-    if (!key || !getKey) return;
-    for (const column of columns) {
-      const item = column.items.find((i) => getKey(i) === key);
-      if (item) {
-        if (column.key !== to) move(item, to);
-        return;
+    if (key) moveKey(key, to);
+  };
+  const pickUp = (key, from) => {
+    setGrabbed({ key, from, target: from });
+    announce(
+      `${labelOf(key)} picked up in ${columnLabel(from)}. Use the left and right arrow keys to choose a column, Space to drop, Escape to cancel.`
+    );
+  };
+  const aim = (index) => {
+    if (!grabbed) return;
+    const column = columns[Math.max(0, Math.min(columns.length - 1, index))];
+    if (!column || column.key === grabbed.target) return;
+    setGrabbed({ ...grabbed, target: column.key });
+    announce(`Over ${column.label}, column ${columns.indexOf(column) + 1} of ${columns.length}.`);
+  };
+  const drop = () => {
+    if (!grabbed) return;
+    setGrabbed(null);
+    if (grabbed.target === grabbed.from) {
+      announce(`${labelOf(grabbed.key)} dropped back in ${columnLabel(grabbed.from)}.`);
+      return;
+    }
+    refocus.current = grabbed.key;
+    moveKey(grabbed.key, grabbed.target);
+  };
+  const cancel = () => {
+    if (!grabbed) return;
+    setGrabbed(null);
+    announce(`Move cancelled. ${labelOf(grabbed.key)} stays in ${columnLabel(grabbed.from)}.`);
+  };
+  useEffect(() => {
+    if (!grabbed) return;
+    const onKey = (event) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      event.stopPropagation();
+      cancel();
+    };
+    window.addEventListener("keydown", onKey, true);
+    return () => window.removeEventListener("keydown", onKey, true);
+  });
+  useEffect(() => {
+    if (grabbed && (!movable || !find(grabbed.key))) setGrabbed(null);
+    if (dragging && (!movable || !find(dragging.key))) {
+      setDragging(null);
+      setOver(null);
+    }
+  });
+  useIsomorphicLayoutEffect(() => {
+    const key = refocus.current;
+    if (!key) return;
+    const handle = handles.current.get(key);
+    if (!handle) return;
+    if (handle.isConnected && document.activeElement === handle) {
+      refocus.current = null;
+      return;
+    }
+    const active = document.activeElement;
+    if (active === null || active === document.body) {
+      handle.focus();
+      refocus.current = null;
+    }
+  });
+  const onHandleKeyDown = (event, key, from) => {
+    const delta = event.key === "ArrowLeft" ? -1 : event.key === "ArrowRight" ? 1 : 0;
+    if (grabbed?.key === key) {
+      const index = columns.findIndex((c) => c.key === grabbed.target);
+      if (delta) {
+        event.preventDefault();
+        aim(index + delta);
+      } else if (event.key === "Home" || event.key === "End") {
+        event.preventDefault();
+        aim(event.key === "Home" ? 0 : columns.length - 1);
+      }
+      return;
+    }
+    if (delta && event.altKey && !grabbed) {
+      event.preventDefault();
+      const to = columns[columns.findIndex((c) => c.key === from) + delta];
+      if (to) {
+        refocus.current = key;
+        moveKey(key, to.key);
       }
     }
   };
-  const movable = Boolean(onMoveItem && getKey);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
-        className
-      ),
-      children: columns.map((column) => {
-        const resolved = column.status ? statusColorMap[column.status] : { color: column.color ?? "", bgColor: column.bgColor ?? "" };
-        return /* @__PURE__ */ jsxs(
-          "section",
-          {
-            "aria-label": column.label,
-            "data-kanban-column": column.key,
-            className: cn(
-              "flex flex-col gap-3 rounded-lg",
-              movable && over === column.key && dragging?.from !== column.key && "bg-accent/40 ring-2 ring-primary/40"
-            ),
-            onDragOver: movable ? (e) => {
-              if (!dragging) return;
-              e.preventDefault();
-              e.dataTransfer.dropEffect = "move";
-              if (over !== column.key) setOver(column.key);
-            } : void 0,
-            onDragLeave: movable ? (e) => {
-              if (!e.currentTarget.contains(e.relatedTarget)) setOver(null);
-            } : void 0,
-            onDrop: movable ? (e) => onDrop(e, column.key) : void 0,
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx("span", { className: cn("text-sm font-semibold", resolved.color), children: column.label }),
-                /* @__PURE__ */ jsx(
-                  Badge,
-                  {
-                    variant: "secondary",
-                    className: cn("text-[10px] px-1.5 py-0", resolved.bgColor),
-                    children: column.total ?? column.items.length
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 min-h-[80px]", children: column.items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center rounded-lg border border-dashed border-border p-6 text-xs text-muted-foreground", children: emptyMessage }) : column.items.map((item, i) => {
-                const key = keyOf(item, i);
-                return /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: cn("animate-fade-in", movable && "group relative", dragging?.key === key && "opacity-50"),
-                    style: { animationDelay: `${i * 30}ms`, animationFillMode: "both" },
-                    draggable: movable || void 0,
-                    onDragStart: movable ? (e) => {
-                      e.dataTransfer.setData(DRAG_TYPE, key);
-                      e.dataTransfer.effectAllowed = "move";
-                      setDragging({ key, from: column.key });
-                    } : void 0,
-                    onDragEnd: movable ? () => {
-                      setDragging(null);
-                      setOver(null);
-                    } : void 0,
-                    children: [
-                      renderCard(item),
-                      movable && columns.length > 1 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-                        /* @__PURE__ */ jsx(
-                          DropdownMenuTrigger,
+  const onHandleClick = (event, key, from) => {
+    if (event.detail !== 0) return;
+    if (grabbed?.key === key) drop();
+    else if (!grabbed) pickUp(key, from);
+  };
+  const columnAt = (x, y) => (typeof document.elementFromPoint === "function" ? document.elementFromPoint(x, y) : null)?.closest("[data-kanban-column]")?.dataset.kanbanColumn ?? null;
+  const onHandlePointerDown = (event, key, from) => {
+    if (event.pointerType === "mouse" || grabbed || dragging) return;
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    setDragging({ key, from, pointer: event.pointerId });
+    announce(`${labelOf(key)} picked up in ${columnLabel(from)}.`);
+  };
+  const onHandlePointerMove = (event) => {
+    if (dragging?.pointer !== event.pointerId) return;
+    const to = columnAt(event.clientX, event.clientY);
+    if (to !== over) setOver(to);
+  };
+  const onHandlePointerUp = (event) => {
+    if (dragging?.pointer !== event.pointerId) return;
+    const to = columnAt(event.clientX, event.clientY) ?? over;
+    const { key, from } = dragging;
+    setDragging(null);
+    setOver(null);
+    if (to && to !== from) moveKey(key, to);
+    else announce(`${labelOf(key)} dropped back in ${columnLabel(from)}.`);
+  };
+  const onHandlePointerCancel = (event) => {
+    if (dragging?.pointer !== event.pointerId) return;
+    setDragging(null);
+    setOver(null);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
+          className
+        ),
+        children: columns.map((column) => {
+          const resolved = column.status ? statusColorMap[column.status] : { color: column.color ?? "", bgColor: column.bgColor ?? "" };
+          return /* @__PURE__ */ jsxs(
+            "section",
+            {
+              "aria-label": column.label,
+              "data-kanban-column": column.key,
+              className: cn(
+                "flex flex-col gap-3 rounded-lg",
+                movable && (dragging && over === column.key && dragging.from !== column.key || grabbed && grabbed.target === column.key && grabbed.from !== column.key) && "bg-accent/40 ring-2 ring-primary/40"
+              ),
+              onDragOver: movable ? (e) => {
+                if (!dragging || dragging.pointer !== void 0) return;
+                e.preventDefault();
+                e.dataTransfer.dropEffect = "move";
+                if (over !== column.key) setOver(column.key);
+              } : void 0,
+              onDragLeave: movable ? (e) => {
+                if (!e.currentTarget.contains(e.relatedTarget)) setOver(null);
+              } : void 0,
+              onDrop: movable ? (e) => onDrop(e, column.key) : void 0,
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: cn("text-sm font-semibold", resolved.color), children: column.label }),
+                  /* @__PURE__ */ jsx(
+                    Badge,
+                    {
+                      variant: "secondary",
+                      className: cn("text-[10px] px-1.5 py-0", resolved.bgColor),
+                      children: column.total ?? column.items.length
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 min-h-[80px]", children: column.items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center rounded-lg border border-dashed border-border p-6 text-xs text-muted-foreground", children: emptyMessage }) : column.items.map((item, i) => {
+                  const key = keyOf(item, i);
+                  const name = getItemLabel?.(item) ?? "card";
+                  const isGrabbed = grabbed?.key === key;
+                  return /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: cn(
+                        "animate-fade-in",
+                        movable && "group relative rounded-lg",
+                        dragging?.key === key && "opacity-50",
+                        isGrabbed && "ring-2 ring-primary/50"
+                      ),
+                      style: { animationDelay: `${i * 30}ms`, animationFillMode: "both" },
+                      draggable: movable || void 0,
+                      onDragStart: movable ? (e) => {
+                        e.dataTransfer.setData(DRAG_TYPE, key);
+                        e.dataTransfer.effectAllowed = "move";
+                        setDragging({ key, from: column.key });
+                      } : void 0,
+                      onDragEnd: movable ? () => {
+                        setDragging(null);
+                        setOver(null);
+                      } : void 0,
+                      children: [
+                        renderCard(item),
+                        movable && columns.length > 1 && /* @__PURE__ */ jsx(
+                          "button",
                           {
-                            "aria-label": `Move ${getItemLabel?.(item) ?? "card"}`,
-                            className: "absolute right-1.5 top-1.5 rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                            children: /* @__PURE__ */ jsx(ArrowRightLeft, { className: "h-3.5 w-3.5", "aria-hidden": true })
+                            type: "button",
+                            ref: (node) => {
+                              if (node) handles.current.set(key, node);
+                              else handles.current.delete(key);
+                            },
+                            "aria-label": `Pick up ${name}`,
+                            "aria-describedby": instructionsId,
+                            "data-grabbed": isGrabbed || void 0,
+                            className: cn(
+                              "absolute right-8 top-1.5 cursor-grab touch-none rounded p-1 text-muted-foreground",
+                              "hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                              isGrabbed && "bg-accent text-foreground"
+                            ),
+                            onClick: (e) => onHandleClick(e, key, column.key),
+                            onKeyDown: (e) => onHandleKeyDown(e, key, column.key),
+                            onBlur: () => {
+                              if (isGrabbed) cancel();
+                            },
+                            onPointerDown: (e) => onHandlePointerDown(e, key, column.key),
+                            onPointerMove: onHandlePointerMove,
+                            onPointerUp: onHandlePointerUp,
+                            onPointerCancel: onHandlePointerCancel,
+                            children: /* @__PURE__ */ jsx(GripVertical, { className: "h-3.5 w-3.5", "aria-hidden": true })
                           }
                         ),
-                        /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
-                          /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Move to" }),
-                          columns.filter((c) => c.key !== column.key).map((c) => /* @__PURE__ */ jsx(DropdownMenuItem, { onSelect: () => move(item, c.key), children: c.label }, c.key))
+                        movable && columns.length > 1 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+                          /* @__PURE__ */ jsx(
+                            DropdownMenuTrigger,
+                            {
+                              "aria-label": `Move ${name}`,
+                              className: "absolute right-1.5 top-1.5 rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                              children: /* @__PURE__ */ jsx(ArrowRightLeft, { className: "h-3.5 w-3.5", "aria-hidden": true })
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+                            /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Move to" }),
+                            columns.filter((c) => c.key !== column.key).map((c) => /* @__PURE__ */ jsx(
+                              DropdownMenuItem,
+                              {
+                                onSelect: () => {
+                                  refocus.current = key;
+                                  move(item, c.key, getItemLabel?.(item) ?? "Card");
+                                },
+                                children: c.label
+                              },
+                              c.key
+                            ))
+                          ] })
                         ] })
-                      ] })
-                    ]
-                  },
-                  key
-                );
-              }) }),
-              renderColumnFooter?.(column)
-            ]
-          },
-          column.key
-        );
-      })
-    }
-  );
+                      ]
+                    },
+                    key
+                  );
+                }) }),
+                renderColumnFooter?.(column)
+              ]
+            },
+            column.key
+          );
+        })
+      }
+    ),
+    movable && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("p", { id: instructionsId, hidden: true, children: "Space or Enter picks the card up. Left and right arrows, Home and End choose a column. Space or Enter drops it, Escape puts it back. Alt with an arrow moves it one column." }),
+      /* @__PURE__ */ jsx("div", { "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: announcement })
+    ] })
+  ] });
 }
 function DataList({
   items,
@@ -2713,7 +3222,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 +3245,33 @@ 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,
+    // A closed dialog is not touched by a save that fails later.
+    visible: open,
+    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 +3279,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 +3295,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 +3314,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"
 }) {
@@ -2847,499 +3384,131 @@ function ConfirmDeleteDialog({
 }
 function ResourcePage(props) {
   const {
-    resource: resourceName,
-    data: dataProp,
-    total: totalProp,
-    pagination = "client",
-    clientRowLimit = 1e3,
-    title,
-    subtitle,
-    icon,
-    columns: columnsProp,
-    getKey: getKeyProp,
-    detail = "panel",
-    detailWidth = "md",
-    titleField: titleFieldProp,
-    subtitleField: subtitleFieldProp,
-    getTitle,
-    getSubtitle,
-    renderDetail: renderDetailProp,
-    detailFields,
-    statusFilter,
-    searchFields,
-    searchPlaceholder,
-    initialFilters,
-    onFiltersChange,
-    filters: filtersProp,
-    page: pageProp,
-    perPage: perPageProp,
-    onPageChange,
-    onPerPageChange,
-    onSortChange,
-    onSearchChange,
-    loading: loadingProp,
-    error: errorProp,
-    errorMessage: errorMessage2,
-    onRetry: onRetryProp,
-    savedViews,
-    onLoadView,
-    onSaveView,
-    onDeleteView,
+    bulkActions,
+    can,
     canSaveViews,
+    capabilities,
+    className,
     columnVisibility,
     columnVisibilityKey,
-    resizableColumns,
-    resizeKey,
-    stickyHeader,
-    stickyFirstColumn,
-    pageSizeOptions,
-    onCreate,
-    onEdit,
-    onDelete,
-    canEditItem,
     createLabel = "New",
-    canEdit,
-    canDelete,
-    allowDelete,
-    confirmDelete,
-    onDeleted,
-    secondaryActions,
-    allowCreate,
-    allowEdit,
+    detail = "panel",
+    detailFields,
+    detailWidth = "md",
+    emptyDescription,
+    emptyIcon,
+    emptyMessage,
+    emptyState,
+    errorMessage: errorMessage2,
+    filters: filtersProp,
     formFields,
-    renderForm: renderFormProp,
+    formLayout: formLayoutProp,
     formMode,
     formSteps,
-    formLayout: formLayoutProp,
-    bulkActions,
-    renderCard: renderCardProp,
-    openOnCardClick = false,
-    renderTable: renderTableProp,
     gridCols: gridColsProp,
-    keyboardNavigation = true,
-    capabilities,
-    toolbar,
-    emptyState,
-    emptyIcon,
-    emptyMessage,
-    emptyDescription,
     header: headerMode = "page",
-    resourceOptions,
-    defaultView = "table",
-    onNavigate = defaultNavigate,
-    viewSettingsKey: viewSettingsKeyProp,
-    slots,
+    icon,
+    keyboardNavigation = true,
+    mutationMode: mutationModeProp,
+    onCreate,
+    onDelete,
+    onDeleteView,
+    onEdit,
+    onLoadView,
+    onPageChange,
+    onRetry: onRetryProp,
+    onSaveView,
+    onSearchChange,
+    onSortChange,
+    openOnCardClick = false,
+    pageSizeOptions,
+    pagination = "client",
+    renderCard: renderCardProp,
+    renderDetail: renderDetailProp,
+    renderForm: renderFormProp,
+    renderTable: renderTableProp,
+    resizableColumns,
+    resizeKey,
+    resource: resourceName,
+    savedViews,
+    searchPlaceholder,
+    secondaryActions,
     slotProps,
-    className
+    slots,
+    stickyFirstColumn,
+    stickyHeader,
+    subtitle,
+    title,
+    toolbar
   } = props;
-  const isClientMode = !!resourceName;
-  const resourceServerPaging = isClientMode && pagination === "server";
-  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 serverSearchFields = resourceOptions?.searchFields ?? searchFields;
-  const resourceHook = useResource(
-    resourceName ?? "__noop__",
-    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
-    } : { 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;
-  const hasError = isClientMode ? resourceHook.list.isError : errorProp ?? false;
-  const page = useResourcePage({
-    resource: resourceName,
-    data: displayData,
-    total: displayTotal,
-    columns: columnsProp,
-    statusFilter,
-    searchFields,
-    initialFilters,
-    onFiltersChange,
-    defaultView,
-    detail,
-    titleField: titleFieldProp,
-    subtitleField: subtitleFieldProp,
-    controlled: isServerControlled
-  });
   const {
-    setSearch: setResourceSearch,
-    setSort: setResourceSort,
-    setFilters: setResourceFilters
-  } = resourceHook;
-  const pushedSearchRef = useRef("");
-  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("");
-  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 {
-        update: resourceHook.update,
-        remove: resourceHook.remove,
-        refetch: () => resourceHook.list.refetch()
-      };
-    }
-    return {
-      update: async () => {
-        throw new Error(
-          "ResourceActions.update not available in server-data mode"
-        );
-      },
-      remove: async () => {
-        throw new Error(
-          "ResourceActions.remove not available in server-data mode"
-        );
-      },
-      refetch: () => {
-      }
-    };
-  }, [
-    isClientMode,
-    resourceHook.update,
-    resourceHook.remove,
-    resourceHook.list
-  ]);
-  const keyOf = useCallback(
-    (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 [selectedIds, setSelectedIds] = useState(/* @__PURE__ */ new Set());
-  const handleToggleSelect = useCallback((id) => {
-    setSelectedIds((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-  }, []);
-  const handleToggleAll = useCallback(() => {
-    setSelectedIds((prev) => {
-      if (prev.size === page.data.length) return /* @__PURE__ */ new Set();
-      return new Set(page.data.map(keyOf));
-    });
-  }, [page.data, keyOf]);
-  const handleClearSelection = useCallback(() => {
-    setSelectedIds(/* @__PURE__ */ new Set());
-  }, []);
-  const [formOpen, setFormOpen] = useState(false);
-  const [formAction, setFormAction] = useState("create");
-  const [formItem, setFormItem] = useState(null);
-  const useBuiltInCreate = allowCreate && !onCreate && isClientMode;
-  const useBuiltInEdit = allowEdit && !onEdit && isClientMode;
-  const handleCreate = useCallback(() => {
-    if (useBuiltInCreate) {
-      setFormAction("create");
-      setFormItem(null);
-      setFormOpen(true);
-    } else if (onCreate) {
-      onCreate();
-    }
-  }, [useBuiltInCreate, onCreate]);
-  const handleEdit = useCallback(
-    (item) => {
-      if (canEdit && !canEdit(item)) return;
-      if (canEditItem && !canEditItem(item)) return;
-      if (useBuiltInEdit) {
-        setFormAction("edit");
-        setFormItem(item);
-        setFormOpen(true);
-      } else if (onEdit) {
-        onEdit(item);
-      }
-    },
-    [useBuiltInEdit, onEdit, canEdit, canEditItem]
-  );
-  const closeDetail = useCallback(() => {
-    page.setDetailOpen(false);
-    page.setSelectedItem(null);
-  }, [page]);
-  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 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) => {
-      console.error("ResourcePage: delete failed", err);
-    });
-  } : (
-    // Unconfirmed `onDelete` keeps its original contract exactly:
-    // called straight from the peek, nothing closed for it.
-    (item) => {
-      void onDelete?.(item);
-    }
-  );
-  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 tableColumns = useMemo(() => {
-    const base = isClientMode ? page.columns.map((col) => ({
-      key: col.key,
-      header: col.header ?? col.key,
-      sortable: col.sortable ?? true,
-      hideBelow: col.hideBelow,
-      editable: col.editable,
-      accessor: col.accessor,
-      render: col.render ? (item, value) => col.render(item, value, actions) : void 0
-    })) : page.tableColumns;
-    if (!isServerControlled) return base;
-    return base.map((col) => ({ ...col, sortable: false }));
-  }, [
+    actions,
+    allows,
+    clientTruncated,
+    closeDetail,
+    currentPage,
+    deleteConfirmed,
+    deleteCopy,
+    deleteHandler,
+    deleteKind,
+    deleteOpen,
+    detailOpen,
+    detailSubtitle,
+    detailTitle,
+    displayData,
+    displayTotal,
+    effectivePageSize,
+    formAction,
+    formItem,
+    formOpen,
+    handleClearFilters,
+    handleClearSelection,
+    handleCreate,
+    handleEdit,
+    handlePageSizeChange,
+    handleRowClick,
+    handleSearchChange,
+    handleSortSelect,
+    handleTableSort,
+    handleToggleAll,
+    handleToggleSelect,
+    hasError,
     isClientMode,
+    isLoading,
     isServerControlled,
-    page.columns,
-    page.tableColumns,
-    actions
-  ]);
-  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 handleSearchChange = useCallback(
-    (value) => {
-      page.filterConfig.onSearchChange(value);
-      if (!isServerControlled) return;
-      onSearchChange?.(value);
-      if (currentPage !== 1 && !resourceServerPaging) onPageChange?.(1);
-    },
-    [
-      page.filterConfig,
-      isServerControlled,
-      onSearchChange,
-      onPageChange,
-      resourceServerPaging,
-      currentPage
-    ]
-  );
-  const handleSortSelect = useCallback(
-    (value) => {
-      page.filterConfig.onSortChange(value);
-      if (!isServerControlled) return;
-      const [field, order] = value.split(":");
-      onSortChange?.(
-        field && (order === "asc" || order === "desc") ? { field, order } : null
-      );
-      if (!resourceServerPaging) onPageChange?.(1);
-    },
-    [
-      page.filterConfig,
-      isServerControlled,
-      onSortChange,
-      onPageChange,
-      resourceServerPaging
-    ]
-  );
-  const handleClearFilters = useCallback(() => {
-    page.clearFilters();
-    if (!isServerControlled) return;
-    onSearchChange?.("");
-    onSortChange?.(null);
-    if (!resourceServerPaging) onPageChange?.(1);
-  }, [
+    keyOf,
+    keyboardNav,
+    linkMissing,
+    linked,
+    missingPagerProps,
     page,
-    isServerControlled,
-    onSearchChange,
-    onSortChange,
-    onPageChange,
-    resourceServerPaging
-  ]);
-  const handleStatusChange = useCallback(
-    (values) => {
-      page.filterConfig.statusChips?.onChange(values);
-      if (!isServerControlled) return;
-      if (currentPage !== 1 && !resourceServerPaging) onPageChange?.(1);
-    },
-    [
-      page.filterConfig,
-      isServerControlled,
-      onPageChange,
-      resourceServerPaging,
-      currentPage
-    ]
-  );
-  const statusChipsConfig = useMemo(() => {
-    const base = page.filterConfig.statusChips;
-    if (!base) return void 0;
-    return { ...base, onChange: handleStatusChange };
-  }, [page.filterConfig.statusChips, handleStatusChange]);
-  const handlePageSizeChange = useCallback(
-    (size) => {
-      updateSetting("pageSize", size);
-      onPerPageChange?.(size);
-      if (resourceServerPaging) resourceHook.setPerPage(size);
-      else if (isServerControlled) onPageChange?.(1);
-    },
-    [
-      updateSetting,
-      onPerPageChange,
-      resourceServerPaging,
-      resourceHook.setPerPage,
-      isServerControlled,
-      onPageChange
-    ]
-  );
-  const missingPerPage = isServerControlled && !!pagerOnPageChange && pagerPerPage === void 0;
-  const missingTotal = isServerControlled && !!pagerOnPageChange && pagerTotal === void 0;
-  const pagerMisconfigured = missingPerPage || missingTotal;
-  const missingPagerProps = [
-    ...missingPerPage ? ["perPage"] : [],
-    ...missingTotal ? ["total"] : []
-  ];
-  const loggedMissingPerPageRef = useRef(false);
-  useEffect(() => {
-    if (!pagerMisconfigured) return;
-    if (loggedMissingPerPageRef.current) return;
-    loggedMissingPerPageRef.current = true;
-    console.error(
-      `ResourcePage: ${missingPagerProps.map((name) => `\`${name}\``).join(" and ")} ${missingPagerProps.length > 1 ? "are" : "is"} required when \`onPageChange\` is supplied.`
-    );
-  }, [pagerMisconfigured]);
-  const pagerPageSize = 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 { 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") {
-      const id = item.id;
-      if (resourceName && id) {
-        onNavigate(`/${resourceName}/${id}`);
-      }
-      return;
-    }
-    page.handleRowClick(item);
-  };
-  const hasBulkSelect = !!bulkActions && bulkActions.length > 0;
-  const overlayOpen = page.detailOpen || formOpen || deleteOpen;
-  const keyboardNav = useKeyboardNavigation({
-    itemCount: page.data.length,
-    enabled: keyboardNavigation && page.viewMode !== "table",
-    overlayOpen,
-    onOpen: (index) => {
-      const item = page.data[index];
-      if (item) handleRowClick(item);
-    },
-    onToggleSelect: hasBulkSelect ? (index) => {
-      const item = page.data[index];
-      if (item) {
-        handleToggleSelect(keyOf(item));
-      }
-    } : void 0,
-    // Supplied only while there is an open detail to close — the hook
-    // suppresses Backspace's default whenever this is present, so leaving it
-    // wired up permanently would swallow the browser/app's Backspace on
-    // every grid/list page (including detail="none" and detail="route",
-    // which never open one). `detailOpen` is only ever true for the panel
-    // and modal modes, so it is the precise precondition here.
-    onBack: page.detailOpen ? () => {
-      page.setDetailOpen(false);
-      page.setSelectedItem(null);
-    } : void 0
-  });
-  const showCreateButton = onCreate || useBuiltInCreate;
+    pagerMisconfigured,
+    pagerOnPageChange,
+    pendingDelete,
+    performDelete,
+    rangeFrom,
+    rangeTo,
+    resourceHook,
+    resourceServerPaging,
+    selectedDeletable,
+    selectedEditable,
+    selectedIds,
+    selectedItem,
+    serverSearchFields,
+    setDeleteOpen,
+    setFormOpen,
+    settings,
+    statusChipsConfig,
+    tableColumns,
+    tableSort,
+    titleOf,
+    totalPages,
+    updateSetting,
+    useBuiltInCreate,
+    useBuiltInDelete,
+    useBuiltInEdit
+  } = useResourceTableModel(props);
+  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 +3608,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 +3704,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 +3830,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 +3863,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 +3885,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,