@marktiderman/genesis-ui 2.6.0 → 2.8.0

package/dist/components/data/index.js

@@ -1,47 +1,48 @@
 "use client";
-import { AppShell, PageHeader } from '../../chunk-DWM7ELFI.js';
+import { AppShell, PageHeader } from '../../chunk-UYI3GLFJ.js';
 export { ViewSettings, ViewToggle } from '../../chunk-46TZGMFW.js';
 import { renderSlot } from '../../chunk-7S7LKQBD.js';
-import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '../../chunk-N2ZFNOOT.js';
 import { Textarea } from '../../chunk-YETMISCE.js';
 import { Separator } from '../../chunk-SXSCHWZU.js';
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from '../../chunk-XCGZPFT7.js';
 import { Skeleton } from '../../chunk-QFM4Z2SS.js';
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '../../chunk-N2ZFNOOT.js';
 import { Progress } from '../../chunk-W5Y3LG5K.js';
-import { 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, DropdownMenuLabel } from '../../chunk-QJ6P2DW6.js';
+import { Checkbox } from '../../chunk-SEBU6JCK.js';
+import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from '../../chunk-4C4ESW6O.js';
+import { Input } from '../../chunk-QSXVL5UB.js';
 import '../../chunk-B2GIBUQD.js';
 import { Badge } from '../../chunk-NPNADZHM.js';
+import { DetailPage } from '../../chunk-AFZ76Q26.js';
+import '../../chunk-D2LIXA2Y.js';
+import '../../chunk-AVFZ4P4B.js';
+import { PageLoading } from '../../chunk-YRYQXU3G.js';
+import { Spinner } from '../../chunk-OVU3Z2MT.js';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../../chunk-FK42ZGGV.js';
-import { Popover, PopoverTrigger, PopoverContent } from '../../chunk-22XB3Q6H.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, DropdownMenuSeparator, DropdownMenuItem, DropdownMenuLabel } from '../../chunk-QJ6P2DW6.js';
 import { Switch } from '../../chunk-27ELYTGE.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../../chunk-22XB3Q6H.js';
 import { 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 { DetailPage } from '../../chunk-AFZ76Q26.js';
-import '../../chunk-D2LIXA2Y.js';
-import '../../chunk-AVFZ4P4B.js';
-import { titleCase, useResourcePage } from '../../chunk-IXGAEECT.js';
+import { titleCase, useResourcePage } from '../../chunk-DWCAC2E7.js';
 export { useSavedViews } from '../../chunk-GCQFVMPI.js';
-import '../../chunk-FTTNGGLA.js';
+import '../../chunk-PKFDGGZV.js';
 import { useViewSettings } from '../../chunk-OZ7ZAYCS.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-CDYZRZ6U.js';
-export { DefaultLink, defaultNavigate, isPathActive, resolveNavigation } from '../../chunk-CDYZRZ6U.js';
+import { DefaultLink, defaultNavigate } from '../../chunk-WGMEVX3Y.js';
+export { DefaultLink, defaultNavigate, isPathActive, resolveNavigation } from '../../chunk-WGMEVX3Y.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, 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 { useState, useRef, useEffect, useCallback, useMemo, useId, Fragment as Fragment$1 } from 'react';
 import { formatDistanceToNow, format } from 'date-fns';
 import { useFieldArray, Controller, useWatch } from 'react-hook-form';
 import { useResource, useWizard, useResourceForm, useOne, buildArrayItemDefaults } from '@marktiderman/genesis-core/hooks';
@@ -59,6 +60,7 @@ function DataPageShell({
   isEmpty = false,
   emptyIcon,
   emptyMessage,
+  emptyDescription,
   emptyAction,
   hasError = false,
   errorMessage: errorMessage2,
@@ -89,11 +91,13 @@ function DataPageShell({
 }) {
   const entity = entityName || title.toLowerCase();
   const collapseFilters = filtersCollapsible && filters != null && header !== null;
+  const toolbarOnly = header === "toolbar";
+  const baseHeaderOptions = toolbarOnly ? { showTitle: false, ...headerOptions } : headerOptions;
   const mergedOptions = {
     defaultDetailsOpen: defaultFiltersOpen,
     detailsLabel: filtersLabel,
     subtitleInDetails: collapseFilters ? true : void 0,
-    ...headerOptions
+    ...baseHeaderOptions
   };
   const sharedHeaderProps = {
     title,
@@ -114,7 +118,7 @@ function DataPageShell({
     stats,
     optionsStorageKey: headerOptionsStorageKey
   };
-  const Header = header === null ? (() => null) : header ?? PageHeader;
+  const Header = header === null ? () => null : header === "toolbar" || header === void 0 ? PageHeader : header;
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-6", className), children: [
     collapseFilters ? /* @__PURE__ */ jsx(
       Header,
@@ -128,7 +132,7 @@ function DataPageShell({
         options: mergedOptions
       }
     ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Header, { ...sharedHeaderProps, options: headerOptions }),
+      /* @__PURE__ */ jsx(Header, { ...sharedHeaderProps, options: baseHeaderOptions }),
       filters
     ] }),
     isLoading ? /* @__PURE__ */ jsx(
@@ -158,6 +162,7 @@ function DataPageShell({
       {
         icon: emptyIcon,
         title: emptyMessage,
+        ...emptyDescription ? { description: emptyDescription } : {},
         action: emptyAction,
         hasFilters: hasActiveFilters,
         onClearFilters
@@ -540,6 +545,28 @@ function DataFilters({
   ] });
 }
 var DEFAULT_BATCH_SIZE = 48;
+var NESTED_CONTROL = "a,button,input,select,textarea,label,[role=button],[role=link],[role=checkbox],[role=switch],[role=menuitem],[contenteditable=true]";
+function activation(item, onItemClick, getItemLabel) {
+  if (!onItemClick) return {};
+  return {
+    role: "button",
+    tabIndex: 0,
+    "aria-label": getItemLabel?.(item),
+    onClick: (e) => {
+      const control = e.target.closest(NESTED_CONTROL);
+      if (control && control !== e.currentTarget) return;
+      onItemClick(item);
+    },
+    onKeyDown: (e) => {
+      if (e.target !== e.currentTarget) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onItemClick(item);
+      }
+    }
+  };
+}
+var ACTIVATABLE = "cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";
 function DataGrid({
   items,
   viewMode,
@@ -551,7 +578,9 @@ function DataGrid({
   staggerAnimation = true,
   getKey,
   focusedIndex = -1,
-  keyboardContainerRef
+  keyboardContainerRef,
+  onItemClick,
+  getItemLabel
 }) {
   const [visibleCount, setVisibleCount] = useState(batchSize);
   const sentinelRef = useRef(null);
@@ -587,8 +616,10 @@ function DataGrid({
           "div",
           {
             "data-nav-item": true,
+            ...activation(item, onItemClick, getItemLabel),
             className: cn(
               "px-4 py-3 transition-colors hover:bg-accent/50",
+              onItemClick && ACTIVATABLE,
               focusedIndex === i && "ring-2 ring-inset ring-primary bg-accent/50"
             ),
             children: renderListItem(item, i)
@@ -605,8 +636,10 @@ function DataGrid({
       "div",
       {
         "data-nav-item": true,
+        ...activation(item, onItemClick, getItemLabel),
         className: cn(
           staggerAnimation && "animate-fade-in",
+          onItemClick && cn(ACTIVATABLE, "h-full rounded-xl"),
           focusedIndex === i && "ring-2 ring-primary ring-offset-2 ring-offset-background rounded-xl transition-shadow duration-150"
         ),
         style: staggerAnimation ? {
@@ -639,7 +672,20 @@ var DENSITY_HEAD = {
 };
 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);
+  return cn(typeof col.width === "string" && !PX_WIDTH.test(col.width) ? col.width : void 0, hide);
+}
+var PX_WIDTH = /^\s*\d+(\.\d+)?(px)?\s*$/;
+function pxWidth(width) {
+  if (typeof width === "number") return width > 0 ? width : void 0;
+  if (width && PX_WIDTH.test(width)) {
+    const px = parseFloat(width);
+    return px > 0 ? px : void 0;
+  }
+  return void 0;
+}
+function colHideClass(hideBelow) {
+  if (!hideBelow) return void 0;
+  return hideBelow === "sm" ? "hidden sm:table-column" : hideBelow === "md" ? "hidden md:table-column" : hideBelow === "lg" ? "hidden lg:table-column" : "hidden xl:table-column";
 }
 function errorMessage(error) {
   return error instanceof Error ? error.message : String(error);
@@ -946,10 +992,8 @@ function DataTable({
     }
     const initial = {};
     columns.forEach((c) => {
-      if (c.width) {
-        const px = parseInt(c.width, 10);
-        if (!isNaN(px) && px > 0) initial[c.key] = px;
-      }
+      const px = pxWidth(c.width);
+      if (px) initial[c.key] = px;
     });
     return initial;
   });
@@ -1042,6 +1086,21 @@ function DataTable({
       )
     ] }) }),
     /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs(Table, { style: { tableLayout: "fixed" }, children: [
+      /* @__PURE__ */ jsxs("colgroup", { children: [
+        selectable && /* @__PURE__ */ jsx("col", { style: { width: 40 } }),
+        activeColumns.map((col) => {
+          const w = colWidths[col.key];
+          return /* @__PURE__ */ jsx(
+            "col",
+            {
+              className: colHideClass(col.hideBelow),
+              style: w ? { width: w } : void 0
+            },
+            col.key
+          );
+        }),
+        renderActions && /* @__PURE__ */ jsx("col", { style: { width: 40 } })
+      ] }),
       /* @__PURE__ */ jsx(
         TableHeader,
         {
@@ -1066,6 +1125,7 @@ function DataTable({
                     getCellClasses(col),
                     headDensity,
                     col.sortable && "cursor-pointer select-none",
+                    "overflow-hidden",
                     resizableColumns && "relative",
                     isFirstCol && "sticky left-0 bg-background",
                     isFirstCol && stickyHeader ? "z-[15]" : isFirstCol ? "z-[5]" : void 0
@@ -1073,12 +1133,12 @@ function DataTable({
                   style: resizeWidth ? { width: resizeWidth, minWidth: resizeWidth } : void 0,
                   onClick: col.sortable ? (e) => handleSort(col.key, e.shiftKey) : void 0,
                   children: [
-                    /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
-                      col.header,
+                    /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1", children: [
+                      /* @__PURE__ */ jsx("span", { className: "truncate", title: col.header, children: col.header }),
                       col.sortable && (sortEntry ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                        sortEntry.dir === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "h-3 w-3 text-foreground" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "h-3 w-3 text-foreground" }),
+                        sortEntry.dir === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "h-3 w-3 shrink-0 text-foreground" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "h-3 w-3 shrink-0 text-foreground" }),
                         sorts.length > 1 && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground font-mono", children: sortIndex + 1 })
-                      ] }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-3 w-3 text-muted-foreground/50" }))
+                      ] }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-3 w-3 shrink-0 text-muted-foreground/50" }))
                     ] }),
                     resizableColumns && /* @__PURE__ */ jsx(
                       ResizeHandle,
@@ -1754,7 +1814,11 @@ function RelationField({
   field,
   value,
   onChange,
-  disabled
+  disabled,
+  id,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired
 }) {
   const [open, setOpen] = useState(false);
   const [createOpen, setCreateOpen] = useState(false);
@@ -1813,7 +1877,11 @@ function RelationField({
         {
           variant: "outline",
           role: "combobox",
+          id,
           "aria-expanded": open,
+          "aria-describedby": ariaDescribedBy,
+          "aria-invalid": ariaInvalid,
+          "aria-required": ariaRequired,
           className: "w-full justify-between font-normal",
           disabled: disabled || isLoading,
           children: [
@@ -1924,7 +1992,12 @@ function FileUploadField({
   field,
   value,
   onChange,
-  disabled
+  disabled,
+  id,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired
 }) {
   const multiple = field.multiple ?? false;
   const maxSize = field.maxSize ?? DEFAULT_MAX_SIZE;
@@ -1997,7 +2070,16 @@ function FileUploadField({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        ...getRootProps(),
+        ...getRootProps({
+          // The focusable drop zone carries the field's name, description
+          // and state; react-dropzone's default `role="presentation"` would
+          // leave a keyboard user on an unnamed tab stop.
+          role: "button",
+          "aria-labelledby": ariaLabelledBy,
+          "aria-describedby": ariaDescribedBy,
+          "aria-invalid": ariaInvalid,
+          "aria-disabled": disabled || void 0
+        }),
         className: cn(
           "flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed px-6 py-8 text-center transition-colors",
           isDragActive ? "border-primary bg-primary/5" : "border-muted-foreground/25 hover:border-muted-foreground/50",
@@ -2005,7 +2087,17 @@ function FileUploadField({
           hasFiles && "py-4"
         ),
         children: [
-          /* @__PURE__ */ jsx("input", { ...getInputProps() }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...getInputProps({
+                id,
+                "aria-describedby": ariaDescribedBy,
+                "aria-invalid": ariaInvalid,
+                "aria-required": ariaRequired
+              })
+            }
+          ),
           isImage ? /* @__PURE__ */ jsx(ImageIcon, { className: "mb-2 h-8 w-8 text-muted-foreground" }) : /* @__PURE__ */ jsx(Upload, { className: "mb-2 h-8 w-8 text-muted-foreground" }),
           /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: isDragActive ? "Drop files here..." : "Drag & drop or click to upload" }),
           /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-muted-foreground/70", children: [
@@ -2182,6 +2274,11 @@ function ResourceFormFieldRenderer({
   watchedValues
 }) {
   const label = field.label ?? titleCase(field.key);
+  const baseId = useId();
+  const inputId = `${baseId}-input`;
+  const errorId = `${baseId}-error`;
+  const descId = `${baseId}-desc`;
+  const labelId = `${baseId}-label`;
   const fieldType = field.type ?? "text";
   const isReadOnly = action === "edit" && field.readOnlyOnEdit;
   const isDisabled = isReadOnly || (watchedValues ? field.disabled?.(watchedValues) === true : false);
@@ -2213,14 +2310,20 @@ function ResourceFormFieldRenderer({
       control,
       render: ({ field: f, fieldState }) => {
         const errorMessage2 = fieldState.error?.message;
+        const describedBy = [field.description ? descId : null, errorMessage2 ? errorId : null].filter(Boolean).join(" ") || void 0;
         const ariaProps = {
+          id: inputId,
           "aria-invalid": !!errorMessage2 || void 0,
-          "aria-describedby": errorMessage2 ? `${field.key}-error` : field.description ? `${field.key}-desc` : void 0,
+          "aria-describedby": describedBy,
           "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: !!errorMessage2, children: label }) }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+              /* @__PURE__ */ jsx(FormLabel, { htmlFor: inputId, error: !!errorMessage2, children: label }),
+              field.description && /* @__PURE__ */ jsx(FormDescription, { id: descId, children: field.description }),
+              /* @__PURE__ */ jsx(FormError, { id: errorId, children: errorMessage2 })
+            ] }),
             /* @__PURE__ */ jsx(
               Switch,
               {
@@ -2244,14 +2347,15 @@ function ResourceFormFieldRenderer({
               }
             ),
             /* @__PURE__ */ jsxs("div", { className: "space-y-1 leading-none", children: [
-              /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage2, children: label }),
-              /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage2 })
+              /* @__PURE__ */ jsx(FormLabel, { htmlFor: inputId, error: !!errorMessage2, children: label }),
+              field.description && /* @__PURE__ */ jsx(FormDescription, { id: descId, children: field.description }),
+              /* @__PURE__ */ jsx(FormError, { id: errorId, children: errorMessage2 })
             ] })
           ] });
         }
         if (fieldType === "select" && field.options) {
           return /* @__PURE__ */ jsxs(FormField, { children: [
-            /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage2, required: field.required, children: label }),
+            /* @__PURE__ */ jsx(FormLabel, { htmlFor: inputId, error: !!errorMessage2, required: field.required, children: label }),
             /* @__PURE__ */ jsxs(
               Select,
               {
@@ -2270,49 +2374,53 @@ function ResourceFormFieldRenderer({
                 ]
               }
             ),
-            field.description && /* @__PURE__ */ jsx(FormDescription, { id: `${field.key}-desc`, children: field.description }),
-            /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage2 })
+            field.description && /* @__PURE__ */ jsx(FormDescription, { id: descId, children: field.description }),
+            /* @__PURE__ */ jsx(FormError, { id: errorId, children: errorMessage2 })
           ] });
         }
         if (fieldType === "relation" && field.relation) {
           return /* @__PURE__ */ jsxs(FormField, { children: [
-            /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage2, required: field.required, children: label }),
+            /* @__PURE__ */ jsx(FormLabel, { htmlFor: inputId, error: !!errorMessage2, required: field.required, children: label }),
             /* @__PURE__ */ jsx(
               RelationField,
               {
                 field,
                 value: f.value != null ? String(f.value) : "",
                 onChange: f.onChange,
-                disabled: isDisabled
+                disabled: isDisabled,
+                ...ariaProps
               }
             ),
-            field.description && /* @__PURE__ */ jsx(FormDescription, { id: `${field.key}-desc`, children: field.description }),
-            /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage2 })
+            field.description && /* @__PURE__ */ jsx(FormDescription, { id: descId, children: field.description }),
+            /* @__PURE__ */ jsx(FormError, { id: errorId, children: errorMessage2 })
           ] });
         }
         if (fieldType === "file" || fieldType === "image") {
           return /* @__PURE__ */ jsxs(FormField, { children: [
-            /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage2, required: field.required, children: label }),
+            /* @__PURE__ */ jsx(FormLabel, { id: labelId, htmlFor: inputId, error: !!errorMessage2, required: field.required, children: label }),
             /* @__PURE__ */ jsx(
               FileUploadField,
               {
+                "aria-labelledby": labelId,
                 field,
                 value: f.value,
                 onChange: f.onChange,
-                disabled: isDisabled
+                disabled: isDisabled,
+                ...ariaProps
               }
             ),
-            field.description && /* @__PURE__ */ jsx(FormDescription, { id: `${field.key}-desc`, children: field.description }),
-            /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage2 })
+            field.description && /* @__PURE__ */ jsx(FormDescription, { id: descId, children: field.description }),
+            /* @__PURE__ */ jsx(FormError, { id: errorId, children: errorMessage2 })
           ] });
         }
         if (fieldType === "textarea") {
           return /* @__PURE__ */ jsxs(FormField, { children: [
-            /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage2, required: field.required, children: label }),
+            /* @__PURE__ */ jsx(FormLabel, { htmlFor: inputId, error: !!errorMessage2, required: field.required, children: label }),
             /* @__PURE__ */ jsx(
               Textarea,
               {
                 placeholder: field.placeholder,
+                maxLength: field.maxLength,
                 rows: field.rows ?? 3,
                 value: f.value != null ? String(f.value) : "",
                 onChange: (e) => f.onChange(e.target.value),
@@ -2321,13 +2429,13 @@ function ResourceFormFieldRenderer({
                 ...ariaProps
               }
             ),
-            field.description && /* @__PURE__ */ jsx(FormDescription, { id: `${field.key}-desc`, children: field.description }),
-            /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage2 })
+            field.description && /* @__PURE__ */ jsx(FormDescription, { id: descId, children: field.description }),
+            /* @__PURE__ */ jsx(FormError, { id: errorId, children: errorMessage2 })
           ] });
         }
         if (fieldType === "number") {
           return /* @__PURE__ */ jsxs(FormField, { children: [
-            /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage2, required: field.required, children: label }),
+            /* @__PURE__ */ jsx(FormLabel, { htmlFor: inputId, error: !!errorMessage2, required: field.required, children: label }),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -2345,17 +2453,18 @@ function ResourceFormFieldRenderer({
                 ...ariaProps
               }
             ),
-            field.description && /* @__PURE__ */ jsx(FormDescription, { id: `${field.key}-desc`, children: field.description }),
-            /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage2 })
+            field.description && /* @__PURE__ */ jsx(FormDescription, { id: descId, children: field.description }),
+            /* @__PURE__ */ jsx(FormError, { id: errorId, children: errorMessage2 })
           ] });
         }
         return /* @__PURE__ */ jsxs(FormField, { children: [
-          /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage2, required: field.required, children: label }),
+          /* @__PURE__ */ jsx(FormLabel, { htmlFor: inputId, error: !!errorMessage2, required: field.required, children: label }),
           /* @__PURE__ */ jsx(
             Input,
             {
               type: fieldType,
               placeholder: field.placeholder,
+              maxLength: field.maxLength,
               value: f.value != null ? String(f.value) : "",
               onChange: (e) => f.onChange(e.target.value),
               disabled: isDisabled,
@@ -2363,8 +2472,8 @@ function ResourceFormFieldRenderer({
               ...ariaProps
             }
           ),
-          field.description && /* @__PURE__ */ jsx(FormDescription, { id: `${field.key}-desc`, children: field.description }),
-          /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage2 })
+          field.description && /* @__PURE__ */ jsx(FormDescription, { id: descId, children: field.description }),
+          /* @__PURE__ */ jsx(FormError, { id: errorId, children: errorMessage2 })
         ] });
       }
     }
@@ -2476,6 +2585,19 @@ function FormBody({
     control: form.control,
     disabled: !hasConditionalFields
   });
+  const rootError = form.formState.errors.root?.message;
+  const rootErrorBanner = rootError ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "alert",
+      "data-testid": "resource-form-error",
+      className: "flex items-start gap-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive",
+      children: [
+        /* @__PURE__ */ jsx(AlertTriangle, { className: "mt-0.5 h-4 w-4 shrink-0", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { children: rootError })
+      ]
+    }
+  ) : null;
   const onInvalid = (errors) => {
     const firstErrorKey = Object.keys(errors)[0];
     if (firstErrorKey) form.setFocus(firstErrorKey);
@@ -2484,18 +2606,21 @@ function FormBody({
     return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx(Spinner, {}) });
   }
   if (mode === "wizard" && steps) {
-    return /* @__PURE__ */ jsx(
-      WizardForm,
-      {
-        steps,
-        form,
-        fields: resolvedFields,
-        onSubmit: handleSave,
-        isSaving,
-        action,
-        onInvalid
-      }
-    );
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      rootErrorBanner,
+      /* @__PURE__ */ jsx(
+        WizardForm,
+        {
+          steps,
+          form,
+          fields: resolvedFields,
+          onSubmit: handleSave,
+          isSaving,
+          action,
+          onInvalid
+        }
+      )
+    ] });
   }
   const visibleFields = resolvedFields.filter(
     (field) => field.visible?.(watchedValues) !== false
@@ -2535,6 +2660,7 @@ function FormBody({
   return /* @__PURE__ */ jsxs(
     "form",
     {
+      noValidate: true,
       onSubmit: (e) => {
         e.preventDefault();
         void form.handleSubmit(handleSave, onInvalid)(e);
@@ -2548,6 +2674,7 @@ function FormBody({
           ] }),
           renderFields(group.fields)
         ] }, group.name ?? "__default")) }) }),
+        rootErrorBanner,
         /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
           /* @__PURE__ */ jsx(
             Button,
@@ -2584,7 +2711,9 @@ function ResourceForm(props) {
     layout: layoutProp = "dialog",
     mode = "standard",
     steps,
-    columns = 1
+    columns = 1,
+    prefillFromUrl,
+    autoPlaceholder = false
   } = props;
   const isMobile = useIsMobile();
   const effectiveLayout = isMobile ? "sheet" : layoutProp;
@@ -2602,7 +2731,9 @@ function ResourceForm(props) {
       onOpenChange(false);
       onSuccess?.(data);
     },
-    onError
+    onError,
+    prefillFromUrl,
+    autoPlaceholder
   };
   const { form, resolvedFields, handleSave, isSaving, isLoading } = useResourceForm(hookOptions);
   const bodyProps = {
@@ -2642,11 +2773,85 @@ function ResourceForm(props) {
     /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(FormBody, { ...bodyProps }) })
   ] });
 }
+function ConfirmDeleteDialog({
+  open,
+  onOpenChange,
+  onConfirm,
+  title = "Delete this record?",
+  description = "This can't be undone.",
+  confirmLabel = "Delete",
+  cancelLabel = "Cancel"
+}) {
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (open) setError(null);
+  }, [open]);
+  const confirm = async () => {
+    setPending(true);
+    setError(null);
+    try {
+      await onConfirm();
+      onOpenChange(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setPending(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    AlertDialog,
+    {
+      open,
+      onOpenChange: (next) => {
+        if (!pending) onOpenChange(next);
+      },
+      children: /* @__PURE__ */ jsxs(AlertDialogContent, { "data-testid": "confirm-delete-dialog", children: [
+        /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+          /* @__PURE__ */ jsx(AlertDialogTitle, { children: title }),
+          /* @__PURE__ */ jsx(AlertDialogDescription, { children: description })
+        ] }),
+        error ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "alert",
+            "data-testid": "confirm-delete-error",
+            className: "flex items-start gap-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive",
+            children: [
+              /* @__PURE__ */ jsx(AlertTriangle, { className: "mt-0.5 h-4 w-4 shrink-0", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { children: error })
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
+          /* @__PURE__ */ jsx(AlertDialogCancel, { disabled: pending, "data-testid": "confirm-delete-cancel", children: cancelLabel }),
+          /* @__PURE__ */ jsxs(
+            AlertDialogAction,
+            {
+              disabled: pending,
+              "data-testid": "confirm-delete-confirm",
+              onClick: (e) => {
+                e.preventDefault();
+                void confirm();
+              },
+              children: [
+                pending ? /* @__PURE__ */ jsx(Spinner, { size: "sm", className: "mr-2" }) : null,
+                confirmLabel
+              ]
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
 function ResourcePage(props) {
   const {
     resource: resourceName,
     data: dataProp,
     total: totalProp,
+    pagination = "client",
+    clientRowLimit = 1e3,
     title,
     subtitle,
     icon,
@@ -2656,6 +2861,8 @@ function ResourcePage(props) {
     detailWidth = "md",
     titleField: titleFieldProp,
     subtitleField: subtitleFieldProp,
+    getTitle,
+    getSubtitle,
     renderDetail: renderDetailProp,
     detailFields,
     statusFilter,
@@ -2689,7 +2896,13 @@ function ResourcePage(props) {
     onCreate,
     onEdit,
     onDelete,
+    canEditItem,
     createLabel = "New",
+    canEdit,
+    canDelete,
+    allowDelete,
+    confirmDelete,
+    onDeleted,
     secondaryActions,
     allowCreate,
     allowEdit,
@@ -2700,12 +2913,17 @@ function ResourcePage(props) {
     formLayout: formLayoutProp,
     bulkActions,
     renderCard: renderCardProp,
+    openOnCardClick = false,
     renderTable: renderTableProp,
     gridCols: gridColsProp,
     keyboardNavigation = true,
     capabilities,
     toolbar,
     emptyState,
+    emptyIcon,
+    emptyMessage,
+    emptyDescription,
+    header: headerMode = "page",
     resourceOptions,
     defaultView = "table",
     onNavigate = defaultNavigate,
@@ -2715,14 +2933,26 @@ function ResourcePage(props) {
     className
   } = props;
   const isClientMode = !!resourceName;
-  const isServerControlled = pageProp !== void 0 || perPageProp !== void 0 || onPageChange !== void 0 || onPerPageChange !== void 0 || onSortChange !== void 0 || onSearchChange !== void 0;
+  const resourceServerPaging = isClientMode && pagination === "server";
+  const isServerControlled = resourceServerPaging || pageProp !== void 0 || perPageProp !== void 0 || onPageChange !== void 0 || onPerPageChange !== void 0 || onSortChange !== void 0 || onSearchChange !== void 0;
   const viewSettingsKey = viewSettingsKeyProp ?? resourceName ?? title.toLowerCase().replace(/\s+/g, "-");
   const { settings, updateSetting } = useViewSettings(viewSettingsKey);
-  const effectivePageSize = perPageProp ?? settings.pageSize;
+  const serverSearchFields = resourceOptions?.searchFields ?? searchFields;
   const resourceHook = useResource(
     resourceName ?? "__noop__",
-    isClientMode ? resourceOptions : { enabled: false }
+    isClientMode ? {
+      ...resourceOptions,
+      // Client paging fetches everything it can in one request; server
+      // paging starts at the user's stored page size. An explicit
+      // `defaultPerPage` wins over both.
+      defaultPerPage: resourceOptions?.defaultPerPage ?? (resourceServerPaging ? perPageProp ?? settings.pageSize : clientRowLimit),
+      searchFields: resourceServerPaging ? serverSearchFields : resourceOptions?.searchFields,
+      // Paging, searching and sorting change the query key; keep the
+      // current page on screen while the next one loads.
+      keepPreviousData: resourceOptions?.keepPreviousData ?? resourceServerPaging
+    } : { enabled: false }
   );
+  const effectivePageSize = resourceServerPaging ? resourceHook.params.pagination?.perPage ?? settings.pageSize : perPageProp ?? settings.pageSize;
   const displayData = isClientMode ? resourceHook.list.data?.data ?? [] : dataProp ?? [];
   const displayTotal = isClientMode ? resourceHook.list.data?.total ?? 0 : totalProp ?? 0;
   const isLoading = isClientMode ? resourceHook.list.isLoading : loadingProp ?? false;
@@ -2742,6 +2972,66 @@ function ResourcePage(props) {
     subtitleField: subtitleFieldProp,
     controlled: isServerControlled
   });
+  const {
+    setSearch: setResourceSearch,
+    setSort: setResourceSort,
+    setFilters: setResourceFilters
+  } = resourceHook;
+  const pushedSearchRef = useRef("");
+  const searchEffectRanRef = useRef(false);
+  useEffect(() => {
+    if (!resourceServerPaging) return;
+    const firstRun = !searchEffectRanRef.current;
+    searchEffectRanRef.current = true;
+    if (page.search === pushedSearchRef.current) return;
+    const push = () => {
+      pushedSearchRef.current = page.search;
+      setResourceSearch(page.search);
+    };
+    if (firstRun || page.search === "") {
+      push();
+      return;
+    }
+    const timer = setTimeout(push, 300);
+    return () => clearTimeout(timer);
+  }, [resourceServerPaging, page.search, setResourceSearch]);
+  const defaultSort = resourceOptions?.defaultSort;
+  const pushedSortRef = useRef("");
+  useEffect(() => {
+    if (!resourceServerPaging) return;
+    const key = page.sort ? `${page.sort.field}:${page.sort.order}` : "";
+    if (key === pushedSortRef.current) return;
+    pushedSortRef.current = key;
+    setResourceSort(page.sort ?? defaultSort);
+  }, [resourceServerPaging, page.sort, defaultSort, setResourceSort]);
+  const statusField = statusFilter ? typeof statusFilter === "string" ? statusFilter : statusFilter.field : void 0;
+  const defaultFilters = resourceOptions?.defaultFilters;
+  const pushedStatusRef = useRef("");
+  useEffect(() => {
+    if (!resourceServerPaging || !statusField) return;
+    const key = JSON.stringify([page.statusValue, defaultFilters ?? null]);
+    if (key === pushedStatusRef.current) return;
+    pushedStatusRef.current = key;
+    setResourceFilters([
+      ...defaultFilters ?? [],
+      ...page.statusValue.length > 0 ? [{ field: statusField, operator: "in", value: page.statusValue }] : []
+    ]);
+  }, [
+    resourceServerPaging,
+    statusField,
+    page.statusValue,
+    defaultFilters,
+    setResourceFilters
+  ]);
+  const clientTruncated = isClientMode && !resourceServerPaging && !isLoading && !hasError && displayTotal > displayData.length;
+  const warnedTruncatedRef = useRef(false);
+  useEffect(() => {
+    if (!clientTruncated || warnedTruncatedRef.current) return;
+    warnedTruncatedRef.current = true;
+    console.warn(
+      `ResourcePage: "${resourceName}" has ${displayTotal} rows but only ${displayData.length} were fetched. Pass \`pagination="server"\` to page through all of them, or raise \`clientRowLimit\`.`
+    );
+  }, [clientTruncated, resourceName, displayTotal, displayData.length]);
   const actions = useMemo(() => {
     if (isClientMode) {
       return {
@@ -2774,6 +3064,8 @@ function ResourcePage(props) {
     (item) => getKeyProp ? getKeyProp(item) : String(item.id ?? ""),
     [getKeyProp]
   );
+  const selectedKey = page.selectedItem ? keyOf(page.selectedItem) : null;
+  const selectedItem = !page.selectedItem ? null : selectedKey ? displayData.find((row) => keyOf(row) === selectedKey) ?? page.selectedItem : page.selectedItem;
   const [selectedIds, setSelectedIds] = useState(/* @__PURE__ */ new Set());
   const handleToggleSelect = useCallback((id) => {
     setSelectedIds((prev) => {
@@ -2808,6 +3100,8 @@ function ResourcePage(props) {
   }, [useBuiltInCreate, onCreate]);
   const handleEdit = useCallback(
     (item) => {
+      if (canEdit && !canEdit(item)) return;
+      if (canEditItem && !canEditItem(item)) return;
       if (useBuiltInEdit) {
         setFormAction("edit");
         setFormItem(item);
@@ -2816,8 +3110,57 @@ function ResourcePage(props) {
         onEdit(item);
       }
     },
-    [useBuiltInEdit, onEdit]
+    [useBuiltInEdit, onEdit, canEdit, canEditItem]
+  );
+  const closeDetail = useCallback(() => {
+    page.setDetailOpen(false);
+    page.setSelectedItem(null);
+  }, [page]);
+  const useBuiltInDelete = !!allowDelete && !onDelete && isClientMode;
+  const deleteConfirmed = confirmDelete === void 0 ? useBuiltInDelete : !!confirmDelete;
+  const deleteCopy = typeof confirmDelete === "object" ? confirmDelete : void 0;
+  const [pendingDelete, setPendingDelete] = useState(null);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const { remove: removeRecord } = resourceHook;
+  const performDelete = useCallback(
+    async (item) => {
+      if (useBuiltInDelete) {
+        await removeRecord(
+          getKeyProp ? keyOf(item) : item.id
+        );
+      } else if (onDelete) {
+        await onDelete(item);
+      }
+      closeDetail();
+      onDeleted?.(item);
+    },
+    [
+      useBuiltInDelete,
+      removeRecord,
+      getKeyProp,
+      keyOf,
+      onDelete,
+      closeDetail,
+      onDeleted
+    ]
+  );
+  const deleteHandler = !(useBuiltInDelete || onDelete) ? void 0 : deleteConfirmed ? (item) => {
+    setPendingDelete(item);
+    setDeleteOpen(true);
+  } : useBuiltInDelete ? (item) => {
+    performDelete(item).catch((err) => {
+      console.error("ResourcePage: delete failed", err);
+    });
+  } : (
+    // Unconfirmed `onDelete` keeps its original contract exactly:
+    // called straight from the peek, nothing closed for it.
+    (item) => {
+      void onDelete?.(item);
+    }
   );
+  const mayChange = (item) => canEditItem ? canEditItem(item) : true;
+  const selectedEditable = !!selectedItem && mayChange(selectedItem) && (canEdit ? canEdit(selectedItem) : true);
+  const selectedDeletable = !!selectedItem && mayChange(selectedItem) && (canDelete ? canDelete(selectedItem) : true);
   const tableColumns = useMemo(() => {
     const base = isClientMode ? page.columns.map((col) => ({
       key: col.key,
@@ -2837,19 +3180,24 @@ function ResourcePage(props) {
     page.tableColumns,
     actions
   ]);
-  const currentPage = pageProp ?? 1;
+  const pagerPage = resourceServerPaging ? resourceHook.params.pagination?.page ?? 1 : pageProp;
+  const pagerPerPage = resourceServerPaging ? resourceHook.params.pagination?.perPage : perPageProp;
+  const pagerTotal = resourceServerPaging ? displayTotal : totalProp;
+  const pagerOnPageChange = resourceServerPaging ? resourceHook.setPage : onPageChange;
+  const currentPage = pagerPage ?? 1;
   const handleSearchChange = useCallback(
     (value) => {
       page.filterConfig.onSearchChange(value);
       if (!isServerControlled) return;
       onSearchChange?.(value);
-      if (currentPage !== 1) onPageChange?.(1);
+      if (currentPage !== 1 && !resourceServerPaging) onPageChange?.(1);
     },
     [
       page.filterConfig,
       isServerControlled,
       onSearchChange,
       onPageChange,
+      resourceServerPaging,
       currentPage
     ]
   );
@@ -2861,24 +3209,43 @@ function ResourcePage(props) {
       onSortChange?.(
         field && (order === "asc" || order === "desc") ? { field, order } : null
       );
-      onPageChange?.(1);
+      if (!resourceServerPaging) onPageChange?.(1);
     },
-    [page.filterConfig, isServerControlled, onSortChange, onPageChange]
+    [
+      page.filterConfig,
+      isServerControlled,
+      onSortChange,
+      onPageChange,
+      resourceServerPaging
+    ]
   );
   const handleClearFilters = useCallback(() => {
     page.clearFilters();
     if (!isServerControlled) return;
     onSearchChange?.("");
     onSortChange?.(null);
-    onPageChange?.(1);
-  }, [page, isServerControlled, onSearchChange, onSortChange, onPageChange]);
+    if (!resourceServerPaging) onPageChange?.(1);
+  }, [
+    page,
+    isServerControlled,
+    onSearchChange,
+    onSortChange,
+    onPageChange,
+    resourceServerPaging
+  ]);
   const handleStatusChange = useCallback(
     (values) => {
       page.filterConfig.statusChips?.onChange(values);
       if (!isServerControlled) return;
-      if (currentPage !== 1) onPageChange?.(1);
+      if (currentPage !== 1 && !resourceServerPaging) onPageChange?.(1);
     },
-    [page.filterConfig, isServerControlled, onPageChange, currentPage]
+    [
+      page.filterConfig,
+      isServerControlled,
+      onPageChange,
+      resourceServerPaging,
+      currentPage
+    ]
   );
   const statusChipsConfig = useMemo(() => {
     const base = page.filterConfig.statusChips;
@@ -2889,12 +3256,20 @@ function ResourcePage(props) {
     (size) => {
       updateSetting("pageSize", size);
       onPerPageChange?.(size);
-      if (isServerControlled) onPageChange?.(1);
+      if (resourceServerPaging) resourceHook.setPerPage(size);
+      else if (isServerControlled) onPageChange?.(1);
     },
-    [updateSetting, onPerPageChange, isServerControlled, onPageChange]
+    [
+      updateSetting,
+      onPerPageChange,
+      resourceServerPaging,
+      resourceHook.setPerPage,
+      isServerControlled,
+      onPageChange
+    ]
   );
-  const missingPerPage = isServerControlled && !!onPageChange && perPageProp === void 0;
-  const missingTotal = isServerControlled && !!onPageChange && totalProp === void 0;
+  const missingPerPage = isServerControlled && !!pagerOnPageChange && pagerPerPage === void 0;
+  const missingTotal = isServerControlled && !!pagerOnPageChange && pagerTotal === void 0;
   const pagerMisconfigured = missingPerPage || missingTotal;
   const missingPagerProps = [
     ...missingPerPage ? ["perPage"] : [],
@@ -2909,18 +3284,23 @@ function ResourcePage(props) {
       `ResourcePage: ${missingPagerProps.map((name) => `\`${name}\``).join(" and ")} ${missingPagerProps.length > 1 ? "are" : "is"} required when \`onPageChange\` is supplied.`
     );
   }, [pagerMisconfigured]);
-  const pagerPageSize = perPageProp ?? effectivePageSize;
+  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 detailTitle = page.selectedItem ? String(
-    page.selectedItem[page.titleField] ?? ""
-  ) : "";
-  const detailSubtitle = page.selectedItem && page.subtitleField ? String(
-    page.selectedItem[page.subtitleField] ?? ""
+  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") {
@@ -2933,7 +3313,7 @@ function ResourcePage(props) {
     page.handleRowClick(item);
   };
   const hasBulkSelect = !!bulkActions && bulkActions.length > 0;
-  const overlayOpen = page.detailOpen || formOpen;
+  const overlayOpen = page.detailOpen || formOpen || deleteOpen;
   const keyboardNav = useKeyboardNavigation({
     itemCount: page.data.length,
     enabled: keyboardNavigation && page.viewMode !== "table",
@@ -3072,6 +3452,10 @@ function ResourcePage(props) {
       hasActiveFilters: page.hasActiveFilters,
       onClearFilters: handleClearFilters,
       emptyAction: emptyState,
+      emptyIcon,
+      emptyMessage,
+      emptyDescription,
+      ...headerMode === "toolbar" ? { header: "toolbar" } : {},
       filters: renderSlot(
         DataFilters,
         slots?.filters,
@@ -3090,7 +3474,7 @@ function ResourcePage(props) {
           onDeleteView,
           canSaveViews,
           onClearAll: page.hasActiveFilters ? handleClearFilters : void 0,
-          showSearch: capabilities?.search !== false,
+          showSearch: capabilities?.search !== false && !(resourceServerPaging && !serverSearchFields?.length),
           showSort: capabilities?.sort !== false
         },
         slotProps?.filters
@@ -3156,12 +3540,32 @@ function ResourcePage(props) {
               },
               slotProps?.table
             ),
+            ...openOnCardClick && renderCardProp && detail !== "none" ? {
+              onItemClick: handleRowClick,
+              getItemLabel: (item) => `Open ${titleOf(item)}`.trim()
+            } : {},
             renderCard: (item, index) => renderCardProp ? renderCardProp(item, index, cardActionsFor(item)) : renderDefaultCard(item),
             renderListItem: (item, index) => renderCardProp ? renderCardProp(item, index, cardActionsFor(item)) : renderDefaultListItem(item)
           },
           slotProps?.grid
         ),
-        isServerControlled && onPageChange && pagerMisconfigured && /* @__PURE__ */ jsxs(
+        clientTruncated && /* @__PURE__ */ jsxs(
+          "p",
+          {
+            role: "status",
+            className: "px-3 py-2 text-sm text-muted-foreground",
+            "data-testid": "resource-page-truncated",
+            children: [
+              "Showing the first ",
+              displayData.length.toLocaleString(),
+              " of",
+              " ",
+              displayTotal.toLocaleString(),
+              " records."
+            ]
+          }
+        ),
+        isServerControlled && pagerOnPageChange && pagerMisconfigured && /* @__PURE__ */ jsxs(
           "div",
           {
             className: "flex items-center gap-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive",
@@ -3186,10 +3590,11 @@ function ResourcePage(props) {
             ]
           }
         ),
-        isServerControlled && onPageChange && !pagerMisconfigured && /* @__PURE__ */ jsxs(
+        isServerControlled && pagerOnPageChange && !pagerMisconfigured && /* @__PURE__ */ jsxs(
           "nav",
           {
             "aria-label": "Pagination",
+            "aria-busy": resourceServerPaging && resourceHook.list.isPlaceholderData || void 0,
             className: "flex flex-col sm:flex-row items-center justify-between gap-2 px-3 py-2 text-sm",
             "data-testid": "resource-page-pagination",
             children: [
@@ -3209,7 +3614,7 @@ function ResourcePage(props) {
                     variant: "outline",
                     size: "sm",
                     disabled: currentPage <= 1,
-                    onClick: () => onPageChange(currentPage - 1),
+                    onClick: () => pagerOnPageChange(currentPage - 1),
                     testID: "resource-page-prev",
                     children: [
                       /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4 mr-1", "aria-hidden": "true" }),
@@ -3236,7 +3641,7 @@ function ResourcePage(props) {
                     variant: "outline",
                     size: "sm",
                     disabled: currentPage >= totalPages,
-                    onClick: () => onPageChange(currentPage + 1),
+                    onClick: () => pagerOnPageChange(currentPage + 1),
                     testID: "resource-page-next",
                     children: [
                       "Next",
@@ -3252,16 +3657,13 @@ function ResourcePage(props) {
           DetailPanel,
           slots?.detail,
           {
-            item: page.selectedItem,
+            item: selectedItem,
             open: page.detailOpen,
-            onClose: () => {
-              page.setDetailOpen(false);
-              page.setSelectedItem(null);
-            },
+            onClose: closeDetail,
             title: detailTitle,
             subtitle: detailSubtitle,
-            onEdit: onEdit ?? (useBuiltInEdit ? handleEdit : void 0),
-            onDelete,
+            onEdit: selectedEditable ? onEdit ?? (useBuiltInEdit ? handleEdit : void 0) : void 0,
+            onDelete: selectedDeletable ? deleteHandler : void 0,
             fields: detailFields,
             width: detailWidth,
             layout: detail === "modal" ? "dialog" : "sheet",
@@ -3287,11 +3689,24 @@ function ResourcePage(props) {
             listData: page.data,
             renderForm: renderFormProp,
             onSuccess: () => {
-              page.setDetailOpen(false);
-              page.setSelectedItem(null);
+              if (formAction === "create") closeDetail();
             }
           },
           slotProps?.form
+        ),
+        deleteConfirmed && (useBuiltInDelete || !!onDelete) && renderSlot(
+          ConfirmDeleteDialog,
+          slots?.deleteDialog,
+          {
+            open: deleteOpen,
+            onOpenChange: setDeleteOpen,
+            onConfirm: () => pendingDelete ? performDelete(pendingDelete) : void 0,
+            title: typeof deleteCopy?.title === "function" ? pendingDelete ? deleteCopy.title(pendingDelete) : void 0 : deleteCopy?.title,
+            description: typeof deleteCopy?.description === "function" ? pendingDelete ? deleteCopy.description(pendingDelete) : void 0 : deleteCopy?.description,
+            confirmLabel: deleteCopy?.confirmLabel,
+            cancelLabel: deleteCopy?.cancelLabel
+          },
+          slotProps?.deleteDialog
         )
       ]
     }
@@ -3371,6 +3786,6 @@ function ResourceDetailPage({
 var AppShell2 = AppShell;
 var PageHeader2 = PageHeader;
 
-export { AppShell2 as AppShell, BadgeCell, CurrencyCell, DataBulkBar, DataFilters, DataGrid, DataList, DataPageShell, DataTable, DateCell, DetailPanel, FieldArrayRenderer, FileUploadField, FilterCombobox, KanbanBoard, LinkCell, NumberCell, PageHeader2 as PageHeader, RelationField, ResourceDetailPage, ResourceForm, ResourcePage, StatCard, ThumbnailCell, WizardForm };
+export { AppShell2 as AppShell, BadgeCell, ConfirmDeleteDialog, CurrencyCell, DataBulkBar, DataFilters, DataGrid, DataList, DataPageShell, DataTable, DateCell, DetailPanel, FieldArrayRenderer, FileUploadField, FilterCombobox, KanbanBoard, LinkCell, NumberCell, PageHeader2 as PageHeader, RelationField, ResourceDetailPage, ResourceForm, ResourcePage, StatCard, ThumbnailCell, WizardForm };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map