@marktiderman/genesis-ui 2.9.0 → 2.10.1

package/dist/components/data/index.js

@@ -7,13 +7,13 @@ import { Textarea } from '../../chunk-YETMISCE.js';
 import { Separator } from '../../chunk-SXSCHWZU.js';
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from '../../chunk-XCGZPFT7.js';
 import { Skeleton } from '../../chunk-QFM4Z2SS.js';
-import { toast } from '../../chunk-4RAZJ6LL.js';
 import { Progress } from '../../chunk-W5Y3LG5K.js';
 import { 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';
@@ -29,27 +29,30 @@ 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-RKPS7ERS.js';
-import { useResourceUrlState } from '../../chunk-DIV4BYXX.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, useCapabilities, buildArrayItemDefaults } from '@marktiderman/genesis-core/hooks';
+import { useResource, useWizard, useResourceForm, useOne, buildArrayItemDefaults } from '@marktiderman/genesis-core/hooks';
 import { useDataProvider, isDataReadError } from '@marktiderman/genesis-core/provider';
 import { useDropzone } from 'react-dropzone';
 
@@ -139,29 +142,43 @@ function DataPageShell({
       /* @__PURE__ */ jsx(Header, { ...sharedHeaderProps, options: baseHeaderOptions }),
       filters
     ] }),
-    isLoading ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        "data-testid": "page-loader",
-        className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4",
-        children: Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsx(
+    isLoading ? (
+      // Shaped like the view it stands in for, so a list inside a panel or
+      // tab doesn't reserve a page of card placeholders.
+      /* @__PURE__ */ jsxs("div", { "data-testid": "page-loader", role: "status", "aria-busy": "true", children: [
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading\u2026" }),
+        viewMode === "grid" ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsx(
           Skeleton,
           {
-            className: "h-40 rounded-xl",
+            className: "h-32 rounded-xl",
             style: { animationDelay: `${i * 75}ms` }
           },
           i
-        ))
-      }
-    ) : hasError ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-16 text-center", children: [
-      /* @__PURE__ */ jsx(AlertTriangle, { className: "h-10 w-10 text-destructive mb-3" }),
-      /* @__PURE__ */ jsx("p", { className: "mb-1 text-sm font-medium text-foreground", children: "Something went wrong" }),
-      /* @__PURE__ */ jsx("p", { className: "mb-4 text-sm text-muted-foreground", children: errorMessage2 || `Failed to load ${entity}s. Please try again.` }),
-      onRetry && /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: onRetry, children: [
-        /* @__PURE__ */ jsx(RefreshCw, { className: "mr-1 h-4 w-4" }),
-        " Retry"
+        )) }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            className: "h-10 rounded-md",
+            style: { animationDelay: `${i * 75}ms` }
+          },
+          i
+        )) })
       ] })
-    ] }) : isEmpty ? /* @__PURE__ */ jsx(
+    ) : hasError ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "alert",
+        className: "flex flex-col items-center justify-center py-16 text-center",
+        children: [
+          /* @__PURE__ */ jsx(AlertTriangle, { className: "h-10 w-10 text-destructive mb-3", "aria-hidden": true }),
+          /* @__PURE__ */ jsx("p", { className: "mb-1 text-sm font-medium text-foreground", children: "Something went wrong" }),
+          /* @__PURE__ */ jsx("p", { className: "mb-4 text-sm text-muted-foreground", children: errorMessage2 || `Failed to load ${entity}s. Please try again.` }),
+          onRetry && /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: onRetry, children: [
+            /* @__PURE__ */ jsx(RefreshCw, { className: "mr-1 h-4 w-4", "aria-hidden": true }),
+            " Retry"
+          ] })
+        ]
+      }
+    ) : isEmpty ? /* @__PURE__ */ jsx(
       EmptyState,
       {
         icon: emptyIcon,
@@ -1140,8 +1157,8 @@ function DataTable({
     setCurrentPage(0);
   }, [items.length, currentPageSize]);
   const sorting = useMemo(
-    () => sorts.map((s) => ({ id: s.key, desc: s.dir === "desc" })),
-    [sorts]
+    () => 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) => ({
@@ -1195,7 +1212,11 @@ function DataTable({
     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 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;
@@ -1789,6 +1810,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,
@@ -1801,112 +1823,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,
@@ -2122,39 +2333,6 @@ 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,
@@ -3087,6 +3265,8 @@ function ResourceForm(props) {
     prefillFromUrl,
     autoPlaceholder,
     warnWhenUnsaved,
+    // A closed dialog is not touched by a save that fails later.
+    visible: open,
     mutationMode,
     undoDelayMs,
     onUndoable: onUndoable ?? showUndoToast
@@ -3218,589 +3398,130 @@ 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,
-    can,
-    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,
+    gridCols: gridColsProp,
+    header: headerMode = "page",
+    icon,
+    keyboardNavigation = true,
     mutationMode: mutationModeProp,
-    bulkActions,
-    renderCard: renderCardProp,
+    onCreate,
+    onDelete,
+    onDeleteView,
+    onEdit,
+    onLoadView,
+    onPageChange,
+    onRetry: onRetryProp,
+    onSaveView,
+    onSearchChange,
+    onSortChange,
     openOnCardClick = false,
+    pageSizeOptions,
+    pagination = "client",
+    renderCard: renderCardProp,
+    renderDetail: renderDetailProp,
+    renderForm: renderFormProp,
     renderTable: renderTableProp,
-    gridCols: gridColsProp,
-    keyboardNavigation = true,
-    capabilities,
-    toolbar,
-    emptyState,
-    emptyIcon,
-    emptyMessage,
-    emptyDescription,
-    header: headerMode = "page",
-    resourceOptions,
-    urlState: urlStateProp,
-    defaultView = "table",
-    onNavigate = defaultNavigate,
-    viewSettingsKey: viewSettingsKeyProp,
-    slots,
+    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 url = useResourceUrlState(
-    urlStateProp ? "setSearchParams" in urlStateProp ? { searchParams: urlStateProp } : urlStateProp : void 0
-  );
-  const [urlSeed] = useState(() => {
-    if (!url) return null;
-    const sortable = !url.sort || !columnsProp ? true : columnsProp.some(
-      (col) => typeof col === "string" ? col === url.sort.field : col.key === url.sort.field && col.sortable !== false
-    );
-    return { q: url.q, sort: sortable ? url.sort : null, page: url.page };
-  });
-  const urlPeek = detail === "panel" || detail === "modal" ? url : void 0;
-  const urlSortKey = urlSeed?.sort ? `${urlSeed.sort.field}:${urlSeed.sort.order}` : "";
-  const isServerControlled = resourceServerPaging || pageProp !== void 0 || perPageProp !== void 0 || onPageChange !== void 0 || onPerPageChange !== void 0 || onSortChange !== void 0 || onSearchChange !== void 0;
-  const viewSettingsKey = viewSettingsKeyProp ?? resourceName ?? title.toLowerCase().replace(/\s+/g, "-");
-  const { settings, updateSetting } = useViewSettings(viewSettingsKey);
-  const 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,
-      // Start where the URL says, so restoring a link doesn't push a
-      // search or sort that resets the page to 1.
-      ...resourceServerPaging && urlSeed ? {
-        defaultSearch: urlSeed.q,
-        ...urlSeed.page ? { defaultPage: urlSeed.page } : {},
-        ...urlSeed.sort ? { defaultSort: urlSeed.sort } : {}
-      } : {},
-      ...writeModeOptions(resourceOptions, mutationModeProp)
-    } : { enabled: false }
-  );
-  const effectivePageSize = resourceServerPaging ? resourceHook.params.pagination?.perPage ?? settings.pageSize : perPageProp ?? settings.pageSize;
-  const displayData = isClientMode ? resourceHook.list.data?.data ?? [] : dataProp ?? [];
-  const displayTotal = isClientMode ? resourceHook.list.data?.total ?? 0 : totalProp ?? 0;
-  const isLoading = isClientMode ? resourceHook.list.isLoading : loadingProp ?? false;
-  const hasError = isClientMode ? resourceHook.list.isError : errorProp ?? false;
-  const page = useResourcePage({
-    resource: resourceName,
-    data: displayData,
-    total: displayTotal,
-    columns: columnsProp,
-    statusFilter,
-    searchFields,
-    initialFilters: initialFilters ?? (urlSeed && (urlSeed.q || urlSeed.sort) ? [
-      ...urlSeed.q ? [{ field: "__search__", operator: "contains", value: urlSeed.q }] : [],
-      ...urlSeed.sort ? [{ field: "__sort__", operator: "eq", value: urlSortKey }] : []
-    ] : void 0),
-    onFiltersChange,
-    defaultView,
-    // Each page remembers its own table/cards choice, under the same key as
-    // its density and page size — not one key shared by every data page.
-    viewKey: viewSettingsKey,
-    detail,
-    titleField: titleFieldProp,
-    subtitleField: subtitleFieldProp,
-    controlled: isServerControlled
-  });
   const {
-    setSearch: setResourceSearch,
-    setSort: setResourceSort,
-    setFilters: setResourceFilters
-  } = resourceHook;
-  const pushedSearchRef = useRef(resourceServerPaging ? urlSeed?.q ?? "" : "");
-  const searchEffectRanRef = useRef(false);
-  useEffect(() => {
-    if (!resourceServerPaging) return;
-    const firstRun = !searchEffectRanRef.current;
-    searchEffectRanRef.current = true;
-    if (page.search === pushedSearchRef.current) return;
-    const push = () => {
-      pushedSearchRef.current = page.search;
-      setResourceSearch(page.search);
-    };
-    if (firstRun || page.search === "") {
-      push();
-      return;
-    }
-    const timer = setTimeout(push, 300);
-    return () => clearTimeout(timer);
-  }, [resourceServerPaging, page.search, setResourceSearch]);
-  const defaultSort = resourceOptions?.defaultSort;
-  const pushedSortRef = useRef(resourceServerPaging ? urlSortKey : "");
-  useEffect(() => {
-    if (!resourceServerPaging) return;
-    const key = page.sort ? `${page.sort.field}:${page.sort.order}` : "";
-    if (key === pushedSortRef.current) return;
-    pushedSortRef.current = key;
-    setResourceSort(page.sort ?? defaultSort);
-  }, [resourceServerPaging, page.sort, defaultSort, setResourceSort]);
-  const statusField = statusFilter ? typeof statusFilter === "string" ? statusFilter : statusFilter.field : void 0;
-  const defaultFilters = resourceOptions?.defaultFilters;
-  const pushedStatusRef = useRef("");
-  useEffect(() => {
-    if (!resourceServerPaging || !statusField) return;
-    const key = JSON.stringify([page.statusValue, defaultFilters ?? null]);
-    if (key === pushedStatusRef.current) return;
-    pushedStatusRef.current = key;
-    setResourceFilters([
-      ...defaultFilters ?? [],
-      ...page.statusValue.length > 0 ? [{ field: statusField, operator: "in", value: page.statusValue }] : []
-    ]);
-  }, [
-    resourceServerPaging,
-    statusField,
-    page.statusValue,
-    defaultFilters,
-    setResourceFilters
-  ]);
-  const clientTruncated = isClientMode && !resourceServerPaging && !isLoading && !hasError && displayTotal > displayData.length;
-  const warnedTruncatedRef = useRef(false);
-  useEffect(() => {
-    if (!clientTruncated || warnedTruncatedRef.current) return;
-    warnedTruncatedRef.current = true;
-    console.warn(
-      `ResourcePage: "${resourceName}" has ${displayTotal} rows but only ${displayData.length} were fetched. Pass \`pagination="server"\` to page through all of them, or raise \`clientRowLimit\`.`
-    );
-  }, [clientTruncated, resourceName, displayTotal, displayData.length]);
-  const actions = useMemo(() => {
-    if (isClientMode) {
-      return {
-        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 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) => {
-      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 allows = useCallback(
-    (action, item) => {
-      if (can && !can(action, item)) return false;
-      if (!item) return true;
-      if (canEditItem && !canEditItem(item)) return false;
-      if (action === "edit" && canEdit && !canEdit(item)) return false;
-      if (action === "delete" && canDelete && !canDelete(item)) return false;
-      return true;
-    },
-    [can, canEditItem, canEdit, canDelete]
-  );
-  const handleEdit = useCallback(
-    (item) => {
-      if (!allows("edit", item)) return;
-      if (useBuiltInEdit) {
-        setFormAction("edit");
-        setFormItem(item);
-        setFormOpen(true);
-      } else if (onEdit) {
-        onEdit(item);
-      }
-    },
-    [useBuiltInEdit, onEdit, allows]
-  );
-  const closeDetail = useCallback(() => {
-    page.setDetailOpen(false);
-    page.setSelectedItem(null);
-    urlPeek?.setDetailId(null);
-  }, [page, urlPeek]);
-  const useBuiltInDelete = !!allowDelete && !onDelete && isClientMode;
-  const deleteConfirmed = confirmDelete === void 0 ? useBuiltInDelete : !!confirmDelete;
-  const deleteCopy = typeof confirmDelete === "object" ? confirmDelete : void 0;
-  const [pendingDelete, setPendingDelete] = useState(null);
-  const [deleteOpen, setDeleteOpen] = useState(false);
-  const { remove: removeRecord } = resourceHook;
-  const { data: providerCaps } = useCapabilities(resourceName, {
-    enabled: useBuiltInDelete && deleteConfirmed
-  });
-  const deleteKind = providerCaps?.softDelete ? "recycle" : "permanent";
-  const performDelete = useCallback(
-    async (item) => {
-      if (useBuiltInDelete) {
-        await removeRecord(
-          getKeyProp ? keyOf(item) : item.id
-        );
-      } else if (onDelete) {
-        await onDelete(item);
-      }
-      closeDetail();
-      onDeleted?.(item);
-    },
-    [
-      useBuiltInDelete,
-      removeRecord,
-      getKeyProp,
-      keyOf,
-      onDelete,
-      closeDetail,
-      onDeleted
-    ]
-  );
-  const deleteHandler = !(useBuiltInDelete || onDelete) ? void 0 : deleteConfirmed ? (item) => {
-    setPendingDelete(item);
-    setDeleteOpen(true);
-  } : useBuiltInDelete ? (item) => {
-    performDelete(item).catch((err) => {
-      if (!resourceOptions?.onError) {
-        toast.error(err instanceof Error ? err.message : "The delete failed.");
-      }
-    });
-  } : (
-    // Unconfirmed `onDelete` keeps its original contract exactly:
-    // called straight from the peek, nothing closed for it.
-    (item) => {
-      const report = (err) => {
-        if (resourceOptions?.onError) {
-          resourceOptions.onError(err instanceof Error ? err : new Error(String(err)));
-        } else {
-          toast.error(err instanceof Error ? err.message : "The delete failed.");
-        }
-      };
-      try {
-        Promise.resolve(onDelete?.(item)).catch(report);
-      } catch (err) {
-        report(err);
-      }
-    }
-  );
-  const selectedEditable = !!selectedItem && allows("edit", selectedItem);
-  const selectedDeletable = !!selectedItem && allows("delete", selectedItem);
-  const tableColumns = useMemo(() => {
-    const base = isClientMode ? page.columns.map((col) => ({
-      key: col.key,
-      header: col.header ?? col.key,
-      sortable: col.sortable ?? true,
-      hideBelow: col.hideBelow,
-      width: col.width,
-      minWidth: col.minWidth,
-      defaultVisible: col.defaultVisible,
-      editable: col.editable,
-      accessor: col.accessor,
-      render: col.render ? (item, value) => col.render(item, value, actions) : void 0
-    })) : 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 [tableTieBreaks, setTableTieBreaks] = useState(null);
-  const pageSort = page.sort;
-  const setPageSort = page.setSort;
-  const tableSort = useMemo(() => {
-    if (!pageSort) return [];
-    const primary = { key: pageSort.field, dir: pageSort.order };
-    const rest = tableTieBreaks && tableTieBreaks.primary === `${primary.key}:${primary.dir}` ? tableTieBreaks.rest : [];
-    return [primary, ...rest];
-  }, [pageSort, tableTieBreaks]);
-  const handleTableSort = useCallback(
-    (next) => {
-      const [primary, ...rest] = next;
-      setTableTieBreaks(primary ? { primary: `${primary.key}:${primary.dir}`, rest } : null);
-      setPageSort(primary ? { field: primary.key, order: primary.dir } : null);
-    },
-    [setPageSort]
-  );
-  const pagerPage = resourceServerPaging ? resourceHook.params.pagination?.page ?? 1 : pageProp;
-  const pagerPerPage = resourceServerPaging ? resourceHook.params.pagination?.perPage : perPageProp;
-  const pagerTotal = resourceServerPaging ? displayTotal : totalProp;
-  const pagerOnPageChange = resourceServerPaging ? resourceHook.setPage : onPageChange;
-  const currentPage = pagerPage ?? 1;
-  const writeUrl = url?.write;
-  useEffect(() => {
-    writeUrl?.({
-      q: page.search,
-      sort: page.sort,
-      ...resourceServerPaging ? { page: currentPage } : {}
-    });
-  }, [writeUrl, page.search, page.sort, currentPage, resourceServerPaging]);
-  const handleSearchChange = useCallback(
-    (value) => {
-      page.filterConfig.onSearchChange(value);
-      if (!isServerControlled) return;
-      onSearchChange?.(value);
-      if (currentPage !== 1 && !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);
-    urlPeek?.setDetailId(keyOf(item));
-  };
-  const hasBulkSelect = !!bulkActions && bulkActions.length > 0;
-  const overlayOpen = 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: detailOpen ? closeDetail : void 0
-  });
+    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" }),