@marktiderman/genesis-ui 2.3.1 → 2.5.0

package/dist/components/data/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { AppShell, PageHeader } from '../../chunk-UBCYXOXT.js';
+import { AppShell, PageHeader } from '../../chunk-DWM7ELFI.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';
@@ -16,18 +16,18 @@ import '../../chunk-B2GIBUQD.js';
 import { Badge } from '../../chunk-NPNADZHM.js';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../../chunk-FK42ZGGV.js';
 import { Popover, PopoverTrigger, PopoverContent } from '../../chunk-22XB3Q6H.js';
-import { PageLoading } from '../../chunk-YRYQXU3G.js';
-import { Spinner } from '../../chunk-OVU3Z2MT.js';
 import { Switch } from '../../chunk-27ELYTGE.js';
-import { DetailPage } from '../../chunk-AFZ76Q26.js';
-import '../../chunk-D2LIXA2Y.js';
-import '../../chunk-AVFZ4P4B.js';
 import { EmptyState } from '../../chunk-65SPT7EA.js';
 export { EmptyState } from '../../chunk-65SPT7EA.js';
 import { Button } from '../../chunk-NWSCYLPT.js';
+import { PageLoading } from '../../chunk-YRYQXU3G.js';
+import { Spinner } from '../../chunk-OVU3Z2MT.js';
 import { FormField, FormLabel, FormError, FormDescription } from '../../chunk-R7QFP6EL.js';
 import '../../chunk-F47U5KNW.js';
-import { titleCase, useResourcePage } from '../../chunk-GDFNAHI4.js';
+import { DetailPage } from '../../chunk-AFZ76Q26.js';
+import '../../chunk-D2LIXA2Y.js';
+import '../../chunk-AVFZ4P4B.js';
+import { titleCase, useResourcePage } from '../../chunk-IXGAEECT.js';
 export { useSavedViews } from '../../chunk-GCQFVMPI.js';
 import '../../chunk-FTTNGGLA.js';
 import { useViewSettings } from '../../chunk-OZ7ZAYCS.js';
@@ -35,10 +35,10 @@ 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-6NPEMLBA.js';
-export { DefaultLink, defaultNavigate, isPathActive } from '../../chunk-6NPEMLBA.js';
+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-M7AU5DDM.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 { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useEffect, useCallback, useMemo, Fragment as Fragment$1 } from 'react';
@@ -61,7 +61,7 @@ function DataPageShell({
   emptyMessage,
   emptyAction,
   hasError = false,
-  errorMessage,
+  errorMessage: errorMessage2,
   onRetry,
   count,
   totalCount,
@@ -71,6 +71,7 @@ function DataPageShell({
   onPageSizeChange,
   density,
   onDensityChange,
+  stats,
   filters,
   hasActiveFilters = false,
   onClearFilters,
@@ -110,6 +111,7 @@ function DataPageShell({
     onDensityChange,
     createAction,
     secondaryActions,
+    stats,
     optionsStorageKey: headerOptionsStorageKey
   };
   const Header = header === null ? (() => null) : header ?? PageHeader;
@@ -146,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"
@@ -285,6 +287,10 @@ function DataFilters({
   const [saveDialogOpen, setSaveDialogOpen] = useState(false);
   const [newViewName, setNewViewName] = useState("");
   const hasFilters = filters.some((f) => f.selected.length > 0) || (statusChips?.selected.length ?? 0) > 0;
+  const statusOptions = (statusChips?.options ?? []).map(
+    (o) => typeof o === "string" ? { value: o, label: o } : { value: o.value, label: o.label ?? o.value, count: o.count }
+  );
+  const statusVariant = statusChips?.variant ?? "chips";
   const toggleStatus = (status) => {
     if (!statusChips) return;
     const { selected, onChange } = statusChips;
@@ -300,6 +306,35 @@ function DataFilters({
     onViewSaved?.(newViewName.trim());
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    statusChips && statusVariant === "tabs" && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex items-center border rounded-lg overflow-x-auto w-fit max-w-full",
+        role: "group",
+        "aria-label": "Status",
+        "data-testid": "status-tabs",
+        children: statusOptions.map((o) => {
+          const pressed = statusChips.selected.includes(o.value);
+          return /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: pressed ? "default" : "ghost",
+              size: "sm",
+              className: "h-8 rounded-none gap-1.5",
+              onClick: () => toggleStatus(o.value),
+              "aria-pressed": pressed,
+              testID: `status-tab-${o.value}`,
+              children: [
+                o.label,
+                o.count !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-[10px] tabular-nums opacity-70", children: o.count })
+              ]
+            },
+            o.value
+          );
+        })
+      }
+    ),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row gap-2", children: [
       /* @__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" }),
@@ -399,18 +434,27 @@ function DataFilters({
           }
         )
       ] }),
-      statusChips && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 mr-1", children: statusChips.options.map((s) => /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: () => toggleStatus(s),
-          className: cn(
-            "text-xs px-2.5 py-1 rounded-full border transition-all font-medium",
-            statusChips.selected.includes(s) ? "bg-primary text-primary-foreground border-primary" : "bg-background text-muted-foreground border-border hover:border-primary/40"
-          ),
-          children: s
-        },
-        s
-      )) }),
+      statusChips && statusVariant === "chips" && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 mr-1", children: statusOptions.map((o) => {
+        const pressed = statusChips.selected.includes(o.value);
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => toggleStatus(o.value),
+            "aria-pressed": pressed,
+            "data-testid": `status-chip-${o.value}`,
+            className: cn(
+              "text-xs px-2.5 py-1 rounded-full border transition-all font-medium",
+              pressed ? "bg-primary text-primary-foreground border-primary" : "bg-background text-muted-foreground border-border hover:border-primary/40"
+            ),
+            children: [
+              o.label,
+              o.count !== void 0 && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[10px] tabular-nums opacity-70", children: o.count })
+            ]
+          },
+          o.value
+        );
+      }) }),
       filters.map(
         (f) => f.options.length > 0 ? /* @__PURE__ */ jsx(
           FilterCombobox,
@@ -595,6 +639,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,
@@ -602,13 +649,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(
@@ -618,32 +701,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,
@@ -1992,15 +2123,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,
               {
@@ -2024,14 +2155,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,
               {
@@ -2051,12 +2182,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,
               {
@@ -2067,12 +2198,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,
               {
@@ -2083,12 +2214,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,
               {
@@ -2102,12 +2233,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,
               {
@@ -2126,11 +2257,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,
             {
@@ -2144,7 +2275,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 })
         ] });
       }
     }
@@ -2431,6 +2562,7 @@ function ResourcePage(props) {
     subtitle,
     icon,
     columns: columnsProp,
+    getKey: getKeyProp,
     detail = "panel",
     detailWidth = "md",
     titleField: titleFieldProp,
@@ -2451,7 +2583,7 @@ function ResourcePage(props) {
     onSearchChange,
     loading: loadingProp,
     error: errorProp,
-    errorMessage,
+    errorMessage: errorMessage2,
     onRetry: onRetryProp,
     savedViews,
     onLoadView,
@@ -2548,6 +2680,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) => {
@@ -2560,13 +2696,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());
   }, []);
@@ -2602,6 +2734,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;
@@ -2721,9 +2855,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
@@ -2837,7 +2969,7 @@ function ResourcePage(props) {
       isLoading,
       hasError,
       isEmpty,
-      errorMessage,
+      errorMessage: errorMessage2,
       onRetry: isClientMode ? () => resourceHook.list.refetch() : onRetryProp,
       viewMode: page.viewMode,
       onViewModeChange: page.setViewMode,
@@ -2902,7 +3034,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(
@@ -2911,7 +3043,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,