@marktiderman/genesis-ui 2.4.0 → 2.6.0

package/dist/components/data/index.js

@@ -11,7 +11,7 @@ import { Progress } from '../../chunk-W5Y3LG5K.js';
 import { Input } from '../../chunk-QSXVL5UB.js';
 import { Checkbox } from '../../chunk-SEBU6JCK.js';
 import { Card, CardContent, CardHeader, CardTitle } from '../../chunk-FN3FZVUR.js';
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, DropdownMenuSeparator, DropdownMenuItem } from '../../chunk-QJ6P2DW6.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, DropdownMenuSeparator, DropdownMenuItem, DropdownMenuLabel } from '../../chunk-QJ6P2DW6.js';
 import '../../chunk-B2GIBUQD.js';
 import { Badge } from '../../chunk-NPNADZHM.js';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../../chunk-FK42ZGGV.js';
@@ -27,7 +27,7 @@ import '../../chunk-F47U5KNW.js';
 import { DetailPage } from '../../chunk-AFZ76Q26.js';
 import '../../chunk-D2LIXA2Y.js';
 import '../../chunk-AVFZ4P4B.js';
-import { titleCase, useResourcePage } from '../../chunk-GDFNAHI4.js';
+import { titleCase, useResourcePage } from '../../chunk-IXGAEECT.js';
 export { useSavedViews } from '../../chunk-GCQFVMPI.js';
 import '../../chunk-FTTNGGLA.js';
 import { useViewSettings } from '../../chunk-OZ7ZAYCS.js';
@@ -39,7 +39,7 @@ import { DefaultLink, defaultNavigate } from '../../chunk-CDYZRZ6U.js';
 export { DefaultLink, defaultNavigate, isPathActive, resolveNavigation } from '../../chunk-CDYZRZ6U.js';
 import { useKeyboardNavigation } from '../../chunk-YJ6MPS6U.js';
 import { useIsMobile } from '../../chunk-VFO3I7PV.js';
-import { AlertTriangle, RefreshCw, ChevronDown, Check, Search, X, ArrowUpDown, Bookmark, Trash2, BookmarkPlus, Loader2, Columns3, ArrowUp, ArrowDown, ChevronLeft, ChevronRight, ExternalLink, 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, ArrowRightLeft, Pencil, ChevronsUpDown, ImageIcon, Upload, AlertCircle, FileIcon, Plus } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useEffect, useCallback, useMemo, Fragment as Fragment$1 } from 'react';
 import { formatDistanceToNow, format } from 'date-fns';
@@ -61,7 +61,7 @@ function DataPageShell({
   emptyMessage,
   emptyAction,
   hasError = false,
-  errorMessage,
+  errorMessage: errorMessage2,
   onRetry,
   count,
   totalCount,
@@ -148,7 +148,7 @@ function DataPageShell({
     ) : 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: errorMessage || `Failed to load ${entity}s. Please try again.` }),
+      /* @__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"
@@ -279,7 +279,9 @@ function DataFilters({
   canSaveViews = false,
   onViewSaved,
   onClearAll,
-  searchInputRef
+  searchInputRef,
+  showSearch = true,
+  showSort = true
 }) {
   const internalSearchRef = useRef(null);
   const effectiveSearchRef = searchInputRef || internalSearchRef;
@@ -335,8 +337,8 @@ function DataFilters({
         })
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row gap-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+    (showSearch || showSort) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row gap-2", children: [
+      showSearch && /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
         /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
         /* @__PURE__ */ jsx(
           Input,
@@ -357,7 +359,7 @@ function DataFilters({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs(Select, { value: sort, onValueChange: onSortChange, children: [
+      showSort && /* @__PURE__ */ jsxs(Select, { value: sort, onValueChange: onSortChange, children: [
         /* @__PURE__ */ jsxs(SelectTrigger, { className: "w-full sm:w-[180px] shrink-0", children: [
           /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-3.5 w-3.5 mr-1.5 text-muted-foreground" }),
           /* @__PURE__ */ jsx(SelectValue, { placeholder: "Sort by..." })
@@ -639,6 +641,9 @@ function getCellClasses(col) {
   const hide = col.hideBelow ? col.hideBelow === "sm" ? "hidden sm:table-cell" : col.hideBelow === "md" ? "hidden md:table-cell" : col.hideBelow === "lg" ? "hidden lg:table-cell" : "hidden xl:table-cell" : "";
   return cn(col.width, hide);
 }
+function errorMessage(error) {
+  return error instanceof Error ? error.message : String(error);
+}
 function EditableCell({
   item,
   column,
@@ -646,13 +651,49 @@ function EditableCell({
 }) {
   const [editing, setEditing] = useState(false);
   const [draft, setDraft] = useState(String(value ?? ""));
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState(null);
+  const inFlight = useRef(false);
+  const failedDraft = useRef(null);
   const editable = column.editable;
+  const close = useCallback(() => {
+    setEditing(false);
+    setError(null);
+    failedDraft.current = null;
+  }, []);
   const commit = useCallback(
     (v) => {
-      editable.onSave(item, v);
-      setEditing(false);
+      if (inFlight.current) return;
+      let result;
+      try {
+        result = editable.onSave(item, v);
+      } catch (e) {
+        setError(errorMessage(e));
+        failedDraft.current = v;
+        return;
+      }
+      if (!result || typeof result.then !== "function") {
+        close();
+        return;
+      }
+      inFlight.current = true;
+      setSaving(true);
+      setError(null);
+      result.then(
+        () => {
+          inFlight.current = false;
+          setSaving(false);
+          close();
+        },
+        (e) => {
+          inFlight.current = false;
+          setSaving(false);
+          setError(errorMessage(e));
+          failedDraft.current = v;
+        }
+      );
     },
-    [editable, item]
+    [editable, item, close]
   );
   if (!editing) {
     return /* @__PURE__ */ jsx(
@@ -662,32 +703,80 @@ function EditableCell({
         onClick: (e) => {
           e.stopPropagation();
           setDraft(String(value ?? ""));
+          setError(null);
+          failedDraft.current = null;
           setEditing(true);
         },
         children: column.render ? column.render(item, value) : String(value ?? "\u2014")
       }
     );
   }
+  const feedback = error ? /* @__PURE__ */ jsx("p", { role: "alert", className: "mt-1 text-[11px] leading-snug text-destructive", children: error }) : null;
   if (editable.type === "select" && editable.options) {
-    return /* @__PURE__ */ jsx("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxs(Select, { defaultValue: draft, onValueChange: (v) => commit(v), children: [
-      /* @__PURE__ */ jsx(SelectTrigger, { className: "h-7 text-xs w-28", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-      /* @__PURE__ */ jsx(SelectContent, { children: editable.options.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt, children: opt }, opt)) })
-    ] }) });
-  }
-  return /* @__PURE__ */ jsx("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
-    Input,
-    {
-      autoFocus: true,
-      className: "h-7 text-xs w-full",
-      value: draft,
-      onChange: (e) => setDraft(e.target.value),
-      onBlur: () => commit(draft),
-      onKeyDown: (e) => {
-        if (e.key === "Enter") commit(draft);
-        if (e.key === "Escape") setEditing(false);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onClick: (e) => e.stopPropagation(),
+        onKeyDown: (e) => {
+          if (e.key === "Escape" && !inFlight.current) close();
+        },
+        "aria-busy": saving || void 0,
+        children: [
+          /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: draft,
+              disabled: saving,
+              onValueChange: (v) => {
+                setDraft(v);
+                commit(v);
+              },
+              children: [
+                /* @__PURE__ */ jsx(SelectTrigger, { className: "h-7 text-xs w-28", "aria-invalid": error ? true : void 0, children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                /* @__PURE__ */ jsx(SelectContent, { children: editable.options.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt, children: opt }, opt)) })
+              ]
+            }
+          ),
+          feedback,
+          error && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "mt-0.5 text-[11px] text-muted-foreground underline-offset-2 hover:underline",
+              onClick: close,
+              children: "Cancel"
+            }
+          )
+        ]
       }
-    }
-  ) });
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { onClick: (e) => e.stopPropagation(), "aria-busy": saving || void 0, children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          autoFocus: true,
+          className: cn("h-7 text-xs w-full", saving && "pr-7 opacity-70"),
+          value: draft,
+          readOnly: saving,
+          "aria-invalid": error ? true : void 0,
+          onChange: (e) => setDraft(e.target.value),
+          onBlur: () => {
+            if (inFlight.current) return;
+            if (failedDraft.current === draft) close();
+            else commit(draft);
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Enter") commit(draft);
+            if (e.key === "Escape" && !inFlight.current) close();
+          }
+        }
+      ),
+      saving && /* @__PURE__ */ jsx(Spinner, { className: "absolute right-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2", "aria-label": "Saving" })
+    ] }),
+    feedback
+  ] });
 }
 function ResizeHandle({
   onResize,
@@ -1327,12 +1416,39 @@ var statusColorMap = {
   destructive: { color: "text-destructive", bgColor: "bg-destructive/15" },
   primary: { color: "text-primary", bgColor: "bg-primary/15" }
 };
+var DRAG_TYPE = "application/x-genesis-kanban-item";
 function KanbanBoard({
   columns,
   renderCard,
   emptyMessage = "No items",
-  className
+  className,
+  getKey,
+  onMoveItem,
+  getItemLabel,
+  renderColumnFooter
 }) {
+  const [dragging, setDragging] = useState(null);
+  const [over, setOver] = useState(null);
+  const keyOf = (item, index) => getKey ? getKey(item) : String(index);
+  const move = (item, to) => {
+    void Promise.resolve(onMoveItem?.(item, to)).catch(() => {
+    });
+  };
+  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;
+      }
+    }
+  };
+  const movable = Boolean(onMoveItem && getKey);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -1342,20 +1458,80 @@ function KanbanBoard({
       ),
       children: columns.map((column) => {
         const resolved = column.status ? statusColorMap[column.status] : { color: column.color ?? "", bgColor: column.bgColor ?? "" };
-        return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", 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.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) => /* @__PURE__ */ jsx("div", { className: "animate-fade-in", style: { animationDelay: `${i * 30}ms`, animationFillMode: "both" }, children: renderCard(item) }, i)) })
-        ] }, column.key);
+        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,
+                          {
+                            "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 })
+                          }
+                        ),
+                        /* @__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))
+                        ] })
+                      ] })
+                    ]
+                  },
+                  key
+                );
+              }) }),
+              renderColumnFooter?.(column)
+            ]
+          },
+          column.key
+        );
       })
     }
   );
@@ -2036,15 +2212,15 @@ function ResourceFormFieldRenderer({
       name: field.key,
       control,
       render: ({ field: f, fieldState }) => {
-        const errorMessage = fieldState.error?.message;
+        const errorMessage2 = fieldState.error?.message;
         const ariaProps = {
-          "aria-invalid": !!errorMessage || void 0,
-          "aria-describedby": errorMessage ? `${field.key}-error` : field.description ? `${field.key}-desc` : void 0,
+          "aria-invalid": !!errorMessage2 || void 0,
+          "aria-describedby": errorMessage2 ? `${field.key}-error` : field.description ? `${field.key}-desc` : void 0,
           "aria-required": field.required || void 0
         };
         if (fieldType === "switch") {
           return /* @__PURE__ */ jsxs(FormField, { className: "flex flex-row items-center justify-between rounded-lg border p-4", children: [
-            /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage, children: label }) }),
+            /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage2, children: label }) }),
             /* @__PURE__ */ jsx(
               Switch,
               {
@@ -2068,14 +2244,14 @@ function ResourceFormFieldRenderer({
               }
             ),
             /* @__PURE__ */ jsxs("div", { className: "space-y-1 leading-none", children: [
-              /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage, children: label }),
-              /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage })
+              /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage2, children: label }),
+              /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage2 })
             ] })
           ] });
         }
         if (fieldType === "select" && field.options) {
           return /* @__PURE__ */ jsxs(FormField, { children: [
-            /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage, required: field.required, children: label }),
+            /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage2, required: field.required, children: label }),
             /* @__PURE__ */ jsxs(
               Select,
               {
@@ -2095,12 +2271,12 @@ function ResourceFormFieldRenderer({
               }
             ),
             field.description && /* @__PURE__ */ jsx(FormDescription, { id: `${field.key}-desc`, children: field.description }),
-            /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage })
+            /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage2 })
           ] });
         }
         if (fieldType === "relation" && field.relation) {
           return /* @__PURE__ */ jsxs(FormField, { children: [
-            /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage, required: field.required, children: label }),
+            /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage2, required: field.required, children: label }),
             /* @__PURE__ */ jsx(
               RelationField,
               {
@@ -2111,12 +2287,12 @@ function ResourceFormFieldRenderer({
               }
             ),
             field.description && /* @__PURE__ */ jsx(FormDescription, { id: `${field.key}-desc`, children: field.description }),
-            /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage })
+            /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage2 })
           ] });
         }
         if (fieldType === "file" || fieldType === "image") {
           return /* @__PURE__ */ jsxs(FormField, { children: [
-            /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage, required: field.required, children: label }),
+            /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage2, required: field.required, children: label }),
             /* @__PURE__ */ jsx(
               FileUploadField,
               {
@@ -2127,12 +2303,12 @@ function ResourceFormFieldRenderer({
               }
             ),
             field.description && /* @__PURE__ */ jsx(FormDescription, { id: `${field.key}-desc`, children: field.description }),
-            /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage })
+            /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage2 })
           ] });
         }
         if (fieldType === "textarea") {
           return /* @__PURE__ */ jsxs(FormField, { children: [
-            /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage, required: field.required, children: label }),
+            /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage2, required: field.required, children: label }),
             /* @__PURE__ */ jsx(
               Textarea,
               {
@@ -2146,12 +2322,12 @@ function ResourceFormFieldRenderer({
               }
             ),
             field.description && /* @__PURE__ */ jsx(FormDescription, { id: `${field.key}-desc`, children: field.description }),
-            /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage })
+            /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage2 })
           ] });
         }
         if (fieldType === "number") {
           return /* @__PURE__ */ jsxs(FormField, { children: [
-            /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage, required: field.required, children: label }),
+            /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage2, required: field.required, children: label }),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -2170,11 +2346,11 @@ function ResourceFormFieldRenderer({
               }
             ),
             field.description && /* @__PURE__ */ jsx(FormDescription, { id: `${field.key}-desc`, children: field.description }),
-            /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage })
+            /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage2 })
           ] });
         }
         return /* @__PURE__ */ jsxs(FormField, { children: [
-          /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage, required: field.required, children: label }),
+          /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage2, required: field.required, children: label }),
           /* @__PURE__ */ jsx(
             Input,
             {
@@ -2188,7 +2364,7 @@ function ResourceFormFieldRenderer({
             }
           ),
           field.description && /* @__PURE__ */ jsx(FormDescription, { id: `${field.key}-desc`, children: field.description }),
-          /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage })
+          /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage2 })
         ] });
       }
     }
@@ -2475,6 +2651,7 @@ function ResourcePage(props) {
     subtitle,
     icon,
     columns: columnsProp,
+    getKey: getKeyProp,
     detail = "panel",
     detailWidth = "md",
     titleField: titleFieldProp,
@@ -2495,7 +2672,7 @@ function ResourcePage(props) {
     onSearchChange,
     loading: loadingProp,
     error: errorProp,
-    errorMessage,
+    errorMessage: errorMessage2,
     onRetry: onRetryProp,
     savedViews,
     onLoadView,
@@ -2526,6 +2703,7 @@ function ResourcePage(props) {
     renderTable: renderTableProp,
     gridCols: gridColsProp,
     keyboardNavigation = true,
+    capabilities,
     toolbar,
     emptyState,
     resourceOptions,
@@ -2592,6 +2770,10 @@ function ResourcePage(props) {
     resourceHook.remove,
     resourceHook.list
   ]);
+  const keyOf = useCallback(
+    (item) => getKeyProp ? getKeyProp(item) : String(item.id ?? ""),
+    [getKeyProp]
+  );
   const [selectedIds, setSelectedIds] = useState(/* @__PURE__ */ new Set());
   const handleToggleSelect = useCallback((id) => {
     setSelectedIds((prev) => {
@@ -2604,13 +2786,9 @@ function ResourcePage(props) {
   const handleToggleAll = useCallback(() => {
     setSelectedIds((prev) => {
       if (prev.size === page.data.length) return /* @__PURE__ */ new Set();
-      return new Set(
-        page.data.map(
-          (item) => String(item.id ?? "")
-        )
-      );
+      return new Set(page.data.map(keyOf));
     });
-  }, [page.data]);
+  }, [page.data, keyOf]);
   const handleClearSelection = useCallback(() => {
     setSelectedIds(/* @__PURE__ */ new Set());
   }, []);
@@ -2646,6 +2824,8 @@ function ResourcePage(props) {
       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;
@@ -2765,9 +2945,7 @@ function ResourcePage(props) {
     onToggleSelect: hasBulkSelect ? (index) => {
       const item = page.data[index];
       if (item) {
-        handleToggleSelect(
-          String(item.id ?? "")
-        );
+        handleToggleSelect(keyOf(item));
       }
     } : void 0,
     // Supplied only while there is an open detail to close — the hook
@@ -2881,7 +3059,7 @@ function ResourcePage(props) {
       isLoading,
       hasError,
       isEmpty,
-      errorMessage,
+      errorMessage: errorMessage2,
       onRetry: isClientMode ? () => resourceHook.list.refetch() : onRetryProp,
       viewMode: page.viewMode,
       onViewModeChange: page.setViewMode,
@@ -2911,7 +3089,9 @@ function ResourcePage(props) {
           onSaveView,
           onDeleteView,
           canSaveViews,
-          onClearAll: page.hasActiveFilters ? handleClearFilters : void 0
+          onClearAll: page.hasActiveFilters ? handleClearFilters : void 0,
+          showSearch: capabilities?.search !== false,
+          showSort: capabilities?.sort !== false
         },
         slotProps?.filters
       ),
@@ -2946,7 +3126,7 @@ function ResourcePage(props) {
             items: page.data,
             viewMode: page.viewMode,
             gridCols: gridColsProp,
-            getKey: (item) => String(item.id ?? ""),
+            getKey: keyOf,
             focusedIndex: keyboardNav.focusedIndex,
             keyboardContainerRef: keyboardNav.containerRef,
             renderTable: (items) => renderTableProp ? renderTableProp(items) : renderSlot(
@@ -2955,7 +3135,7 @@ function ResourcePage(props) {
               {
                 items,
                 columns: tableColumns,
-                getKey: (item) => String(item.id ?? ""),
+                getKey: keyOf,
                 onRowClick: detail !== "none" ? handleRowClick : void 0,
                 selectable: !!bulkActions && bulkActions.length > 0,
                 selected: selectedIds,