@marktiderman/genesis-ui 2.2.0 → 2.3.0

package/dist/components/data/index.d.ts

@@ -1,22 +1,23 @@
 import * as React from 'react';
-import { ReactNode, RefObject } from 'react';
-import { c as PageHeaderOptions, A as AppShell$1, P as PageHeader$1 } from '../../AppShell-sQT0UbXg.js';
-export { a as AppShellOptions, b as AppShellProps, N as NavItem, d as PageHeaderProps } from '../../AppShell-sQT0UbXg.js';
+import { ReactNode, ComponentType, ComponentProps, RefObject } from 'react';
+import { e as PageHeaderAction, c as PageHeaderOptions, P as PageHeader$1, A as AppShell$1 } from '../../AppShell-D_E_Hk4g.js';
+export { a as AppShellOptions, b as AppShellProps, N as NavItem, d as PageHeaderProps } from '../../AppShell-D_E_Hk4g.js';
 import { V as ViewMode } from '../../view-toggle-CahQ87PW.js';
 export { a as ViewToggle } from '../../view-toggle-CahQ87PW.js';
 import { LucideIcon } from 'lucide-react';
 import { Density } from '../../hooks/use-view-settings.js';
-import { R as ResourceActions, a as ResourceColumnDef } from '../../use-resource-page-DTQS011Q.js';
-export { D as DataTable, c as DataTableColumn, d as DataTableProps, L as LinkCell, T as ThumbnailCell } from '../../use-resource-page-DTQS011Q.js';
+import { R as ResourceActions, a as ResourceColumnDef, D as DataTable } from '../../use-resource-page-DTQS011Q.js';
+export { c as DataTableColumn, d as DataTableProps, L as LinkCell, T as ThumbnailCell } from '../../use-resource-page-DTQS011Q.js';
 export { EmptyState } from '../patterns/empty-state.js';
 export { V as ViewSettings } from '../../view-settings-kHKCHMjj.js';
 import { L as LinkComponent, N as NavigateFn } from '../../navigation-CpOEyUSb.js';
 export { D as DefaultLink, G as GenesisLinkProps, d as defaultNavigate, i as isPathActive } from '../../navigation-CpOEyUSb.js';
 import { UseFormReturn, Control, FieldErrors } from 'react-hook-form';
-import { WizardStep, UseResourceOptions } from '@marktiderman/genesis-core/hooks';
-import { FilterParam, SortParam, BaseRecord, Identifier } from '@marktiderman/genesis-core/provider';
 import { ResourceFormFieldDef } from '@marktiderman/genesis-core';
 export { FieldType, ResourceFormFieldDef, SelectOption } from '@marktiderman/genesis-core';
+import { WizardStep, UseResourceOptions } from '@marktiderman/genesis-core/hooks';
+import { b as Slots, a as SlotPropsFor } from '../../slots-tR0wf89f.js';
+import { FilterParam, SortParam, BaseRecord, Identifier } from '@marktiderman/genesis-core/provider';
 export { CommandPalette, CommandPaletteItem, CommandPaletteProps, useCommandPaletteHotkey } from '../ui/command-palette.js';
 export { UseSavedViewsReturn, useSavedViews } from '../../hooks/use-saved-views.js';
 
@@ -29,6 +30,8 @@ interface DataPageShellProps {
     /** Subtitle text */
     subtitle?: string;
     createAction?: ReactNode;
+    /** Extra actions, rendered in the header's one overflow menu. */
+    secondaryActions?: PageHeaderAction[];
     isLoading?: boolean;
     isEmpty?: boolean;
     emptyIcon?: LucideIcon;
@@ -72,8 +75,19 @@ interface DataPageShellProps {
     /** Persist user header-option overrides (localStorage) */
     headerOptionsStorageKey?: string;
     children: ReactNode;
+    /** Merged onto the root, not replacing its layout. */
+    className?: string;
+    /**
+     * Replace the header outright. It receives exactly the props
+     * `DataPageShell` would have given `PageHeader`, so the common case is a
+     * wrapper that renders `PageHeader` with one thing added — an overflow
+     * menu, a status strip, a second row — rather than a reimplementation.
+     *
+     * `null` ejects it: shell layout, states and filter row, no header.
+     */
+    header?: ComponentType<ComponentProps<typeof PageHeader$1>> | null;
 }
-declare function DataPageShell({ title, icon, entityName, subtitle, createAction, isLoading, isEmpty, emptyIcon, emptyMessage, emptyAction, hasError, errorMessage, onRetry, count, totalCount, viewMode, onViewModeChange, pageSize, onPageSizeChange, density, onDensityChange, filters, hasActiveFilters, onClearFilters, filtersCollapsible, defaultFiltersOpen, filtersOpen, onFiltersOpenChange, filtersLabel, filtersHint, headerOptions, headerOptionsStorageKey, children, }: DataPageShellProps): React.JSX.Element;
+declare function DataPageShell({ title, icon, entityName, subtitle, createAction, secondaryActions, isLoading, isEmpty, emptyIcon, emptyMessage, emptyAction, hasError, errorMessage, onRetry, count, totalCount, viewMode, onViewModeChange, pageSize, onPageSizeChange, density, onDensityChange, filters, hasActiveFilters, onClearFilters, filtersCollapsible, defaultFiltersOpen, filtersOpen, onFiltersOpenChange, filtersLabel, filtersHint, headerOptions, headerOptionsStorageKey, children, className, header, }: DataPageShellProps): React.JSX.Element;
 
 interface FilterOption {
     value: string;
@@ -195,6 +209,15 @@ interface BulkAction {
      * Optional and defaulted off — omitting it behaves exactly as before.
      */
     disabled?: boolean;
+    /**
+     * `data-testid` on the rendered button.
+     *
+     * Without it, a consumer migrating a hand-rolled bulk bar to `DataBulkBar`
+     * loses every selector its e2e suite uses to drive one — which is a real
+     * reason not to migrate, and the kind of small missing affordance that
+     * keeps a parallel implementation alive.
+     */
+    testId?: string;
 }
 interface DataBulkBarProps {
     selected: Set<string>;
@@ -202,8 +225,10 @@ interface DataBulkBarProps {
     onToggleAll: () => void;
     onClearSelection: () => void;
     actions: BulkAction[];
+    /** Merged onto the bar, not replacing its positioning. */
+    className?: string;
 }
-declare function DataBulkBar({ selected, totalCount, onToggleAll, onClearSelection, actions, }: DataBulkBarProps): React.JSX.Element | null;
+declare function DataBulkBar({ selected, totalCount, onToggleAll, onClearSelection, actions, className, }: DataBulkBarProps): React.JSX.Element | null;
 
 /**
  * DateCell -- shows relative date by default, formatted date otherwise.
@@ -329,6 +354,30 @@ interface DetailPanelProps<T> {
 }
 declare function DetailPanel<T extends Record<string, unknown>>({ item, open, onClose, title, subtitle, onEdit, onDelete, children, fields, width, layout, }: DetailPanelProps<T>): React.JSX.Element | null;
 
+interface ResourceFormProps {
+    resource: string;
+    action: "create" | "edit";
+    item?: Record<string, unknown>;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title?: string;
+    fields?: ResourceFormFieldDef[];
+    /** Full dataset used to auto-detect select fields from unique values. */
+    listData?: Record<string, unknown>[];
+    renderForm?: (form: UseFormReturn<Record<string, unknown>>, fields: ResourceFormFieldDef[]) => ReactNode;
+    onSuccess?: (data: Record<string, unknown>) => void;
+    onError?: (error: Error) => void;
+    /** Layout mode for the form container. Default "dialog". */
+    layout?: "dialog" | "sheet" | "page";
+    /** Form presentation mode. Default "standard". */
+    mode?: "standard" | "wizard";
+    /** Wizard step definitions. Required when mode is "wizard". */
+    steps?: WizardStep[];
+    /** Number of columns for the form layout. Default 1. */
+    columns?: 1 | 2;
+}
+declare function ResourceForm(props: ResourceFormProps): React.JSX.Element | null;
+
 /**
  * Row-bound actions handed to `renderCard`, on top of the resource-wide
  * `ResourceActions`. `open` is per-row, which is why it lives here rather
@@ -377,6 +426,32 @@ interface ResourceCardActions<T> extends ResourceActions<T> {
  *
  * @stability Beta
  */
+/**
+ * Every interior part `ResourcePage` composes, with the props it composes it
+ * with. Each key is a slot: replace it via `slots`, feed it more props via
+ * `slotProps`, or eject it with `null`.
+ *
+ * The map is the contract. A part that is not named here cannot be reached,
+ * so adding a part to the render tree means adding it here in the same
+ * change — otherwise the next surface that needs it forks the whole page.
+ */
+type ResourcePageSlotMap<T extends Record<string, unknown> = Record<string, unknown>> = {
+    /** The page shell: header, count pill, loading / empty / error states. */
+    shell: ComponentProps<typeof DataPageShell>;
+    /** The filter row — search, sort, facets, saved views. */
+    filters: ComponentProps<typeof DataFilters>;
+    /** The selection bar. Ejecting it leaves selection working, just unshown. */
+    bulkBar: ComponentProps<typeof DataBulkBar>;
+    /** The card/table switch. */
+    grid: ComponentProps<typeof DataGrid<T>>;
+    /** The table inside the grid. `renderTable` stays the terser way to swap. */
+    table: ComponentProps<typeof DataTable<T>>;
+    /** The detail peek. */
+    detail: ComponentProps<typeof DetailPanel<T>>;
+    /** The create / edit form. */
+    form: ComponentProps<typeof ResourceForm>;
+};
+type ResourcePageSlots<T extends Record<string, unknown> = Record<string, unknown>> = Slots<ResourcePageSlotMap<T>>;
 interface ResourcePageProps<T extends Record<string, unknown> = Record<string, unknown>> {
     /** Client-side mode: resource name passed to useResource / DataProvider. */
     resource?: string;
@@ -549,6 +624,11 @@ interface ResourcePageProps<T extends Record<string, unknown> = Record<string, u
     onEdit?: (item: T) => void;
     onDelete?: (item: T) => void;
     createLabel?: string;
+    /**
+     * Extra header actions beyond the create button, in one overflow menu.
+     * See {@link PageHeaderAction} — the budget is one primary, the rest here.
+     */
+    secondaryActions?: PageHeaderAction[];
     /** Enable built-in create form (ignored if onCreate callback is provided). */
     allowCreate?: boolean;
     /** Enable built-in edit form (ignored if onEdit callback is provided). */
@@ -575,6 +655,8 @@ interface ResourcePageProps<T extends Record<string, unknown> = Record<string, u
          * but leaves the button looking live, which misstates what it will do.
          */
         disabled?: boolean;
+        /** `data-testid` on the rendered bulk button, so e2e can drive it. */
+        testId?: string;
     }>;
     /**
      * Override the default card renderer used for grid view (and, absent a
@@ -649,6 +731,20 @@ interface ResourcePageProps<T extends Record<string, unknown> = Record<string, u
      * Defaults to `resource` or a slug of `title`.
      */
     viewSettingsKey?: string;
+    /**
+     * The interior parts `ResourcePage` composes, by name. Replace one with your
+     * own component, or pass `null` to eject it entirely — see
+     * {@link ResourcePageSlots}.
+     *
+     * This is the reason a surface that needs one part to differ does not have
+     * to drop to the primitives and re-derive the pagination, selection and
+     * detail wiring that were already correct.
+     */
+    slots?: ResourcePageSlots<T>;
+    /** Extra props merged into a part you are KEEPING. Wins over ours. */
+    slotProps?: SlotPropsFor<ResourcePageSlotMap<T>>;
+    /** Merged onto the page shell's root. */
+    className?: string;
 }
 declare function ResourcePage<T extends Record<string, unknown> = Record<string, unknown>>(props: ResourcePageProps<T>): React.JSX.Element;
 
@@ -731,30 +827,6 @@ interface ResourceDetailPageProps<T extends BaseRecord = BaseRecord> {
  */
 declare function ResourceDetailPage<T extends BaseRecord = BaseRecord>({ resource, id, titleField, subtitleField, select, breadcrumb, actions, sidebar, children, className, testID, }: ResourceDetailPageProps<T>): React.JSX.Element;
 
-interface ResourceFormProps {
-    resource: string;
-    action: "create" | "edit";
-    item?: Record<string, unknown>;
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-    title?: string;
-    fields?: ResourceFormFieldDef[];
-    /** Full dataset used to auto-detect select fields from unique values. */
-    listData?: Record<string, unknown>[];
-    renderForm?: (form: UseFormReturn<Record<string, unknown>>, fields: ResourceFormFieldDef[]) => ReactNode;
-    onSuccess?: (data: Record<string, unknown>) => void;
-    onError?: (error: Error) => void;
-    /** Layout mode for the form container. Default "dialog". */
-    layout?: "dialog" | "sheet" | "page";
-    /** Form presentation mode. Default "standard". */
-    mode?: "standard" | "wizard";
-    /** Wizard step definitions. Required when mode is "wizard". */
-    steps?: WizardStep[];
-    /** Number of columns for the form layout. Default 1. */
-    columns?: 1 | 2;
-}
-declare function ResourceForm(props: ResourceFormProps): React.JSX.Element | null;
-
 interface RelationFieldProps {
     field: ResourceFormFieldDef;
     value: string;
@@ -805,4 +877,4 @@ declare const AppShell: typeof AppShell$1;
  */
 declare const PageHeader: typeof PageHeader$1;
 
-export { AppShell, BadgeCell, type BulkAction, type ColumnStatus, CurrencyCell, DataBulkBar, type DataFilterConfig, DataFilters, DataGrid, DataList, type DataListProps, DataPageShell, type DataPageShellProps, DateCell, Density, DetailPanel, type DetailPanelProps, FieldArrayRenderer, FileUploadField, FilterCombobox, type FilterOption, KanbanBoard, type KanbanBoardProps, type KanbanColumn, LinkComponent, NavigateFn, NumberCell, PageHeader, PageHeaderOptions, RelationField, ResourceActions, type ResourceCardActions, ResourceColumnDef, ResourceDetailPage, type ResourceDetailPageProps, ResourceForm, type ResourceFormProps, ResourcePage, type ResourcePageProps, type SavedViewItem, StatCard, type StatCardColor, type StatCardProps, ViewMode, WizardForm };
+export { AppShell, BadgeCell, type BulkAction, type ColumnStatus, CurrencyCell, DataBulkBar, type DataFilterConfig, DataFilters, DataGrid, DataList, type DataListProps, DataPageShell, type DataPageShellProps, DataTable, DateCell, Density, DetailPanel, type DetailPanelProps, FieldArrayRenderer, FileUploadField, FilterCombobox, type FilterOption, KanbanBoard, type KanbanBoardProps, type KanbanColumn, LinkComponent, NavigateFn, NumberCell, PageHeader, PageHeaderOptions, RelationField, ResourceActions, type ResourceCardActions, ResourceColumnDef, ResourceDetailPage, type ResourceDetailPageProps, ResourceForm, type ResourceFormProps, ResourcePage, type ResourcePageProps, type SavedViewItem, StatCard, type StatCardColor, type StatCardProps, ViewMode, WizardForm };

package/dist/components/data/index.js

@@ -1,16 +1,17 @@
 "use client";
-import { AppShell, PageHeader } from '../../chunk-FEJAZFP3.js';
+import { AppShell, PageHeader } from '../../chunk-UBCYXOXT.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 { Progress } from '../../chunk-W5Y3LG5K.js';
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, DropdownMenuSeparator, DropdownMenuItem } from '../../chunk-QJ6P2DW6.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 '../../chunk-B2GIBUQD.js';
 import { Badge } from '../../chunk-NPNADZHM.js';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../../chunk-FK42ZGGV.js';
@@ -53,6 +54,7 @@ function DataPageShell({
   entityName,
   subtitle,
   createAction,
+  secondaryActions,
   isLoading = false,
   isEmpty = false,
   emptyIcon,
@@ -80,7 +82,9 @@ function DataPageShell({
   filtersHint,
   headerOptions,
   headerOptionsStorageKey,
-  children
+  children,
+  className,
+  header
 }) {
   const entity = entityName || title.toLowerCase();
   const collapseFilters = filtersCollapsible && filters != null;
@@ -105,11 +109,13 @@ function DataPageShell({
     density,
     onDensityChange,
     createAction,
+    secondaryActions,
     optionsStorageKey: headerOptionsStorageKey
   };
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+  const Header = header === null ? (() => null) : header ?? PageHeader;
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-6", className), children: [
     collapseFilters ? /* @__PURE__ */ jsx(
-      PageHeader,
+      Header,
       {
         ...sharedHeaderProps,
         details: filters,
@@ -120,7 +126,7 @@ function DataPageShell({
         options: mergedOptions
       }
     ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(PageHeader, { ...sharedHeaderProps, options: headerOptions }),
+      /* @__PURE__ */ jsx(Header, { ...sharedHeaderProps, options: headerOptions }),
       filters
     ] }),
     isLoading ? /* @__PURE__ */ jsx(
@@ -1123,49 +1129,60 @@ function DataBulkBar({
   totalCount,
   onToggleAll,
   onClearSelection,
-  actions
+  actions,
+  className
 }) {
   if (selected.size === 0) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-3 rounded-lg border bg-muted/50 animate-fade-in", children: [
-    /* @__PURE__ */ jsx(
-      Checkbox,
-      {
-        checked: selected.size === totalCount,
-        onCheckedChange: onToggleAll
-      }
-    ),
-    /* @__PURE__ */ jsxs(Badge, { variant: "secondary", children: [
-      selected.size,
-      " selected"
-    ] }),
-    actions.map((action) => {
-      const ActionIcon = action.icon;
-      return /* @__PURE__ */ jsxs(
-        Button,
-        {
-          size: "sm",
-          variant: action.variant || "outline",
-          onClick: action.onClick,
-          disabled: action.disabled,
-          children: [
-            /* @__PURE__ */ jsx(ActionIcon, { className: "h-3.5 w-3.5 mr-1" }),
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-2 p-3 rounded-lg border bg-muted/50 animate-fade-in",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: selected.size === totalCount,
+            onCheckedChange: onToggleAll
+          }
+        ),
+        /* @__PURE__ */ jsxs(Badge, { variant: "secondary", children: [
+          selected.size,
+          " selected"
+        ] }),
+        actions.map((action) => {
+          const ActionIcon = action.icon;
+          return /* @__PURE__ */ jsxs(
+            Button,
+            {
+              size: "sm",
+              variant: action.variant || "outline",
+              onClick: action.onClick,
+              disabled: action.disabled,
+              "data-testid": action.testId,
+              children: [
+                /* @__PURE__ */ jsx(ActionIcon, { className: "h-3.5 w-3.5 mr-1" }),
+                action.label
+              ]
+            },
             action.label
-          ]
-        },
-        action.label
-      );
-    }),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        size: "sm",
-        variant: "ghost",
-        onClick: onClearSelection,
-        className: "ml-auto text-xs text-muted-foreground",
-        children: "Clear"
-      }
-    )
-  ] });
+          );
+        }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            variant: "ghost",
+            onClick: onClearSelection,
+            className: "ml-auto text-xs text-muted-foreground",
+            children: "Clear"
+          }
+        )
+      ]
+    }
+  );
 }
 function DateCell(options) {
   return (_item, value) => {
@@ -2452,6 +2469,7 @@ function ResourcePage(props) {
     onEdit,
     onDelete,
     createLabel = "New",
+    secondaryActions,
     allowCreate,
     allowEdit,
     formFields,
@@ -2469,7 +2487,10 @@ function ResourcePage(props) {
     resourceOptions,
     defaultView = "table",
     onNavigate = defaultNavigate,
-    viewSettingsKey: viewSettingsKeyProp
+    viewSettingsKey: viewSettingsKeyProp,
+    slots,
+    slotProps,
+    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;
@@ -2803,8 +2824,10 @@ function ResourcePage(props) {
       }
     );
   };
+  const Shell = slots?.shell ?? DataPageShell;
+  const shellSlotProps = slotProps?.shell;
   return /* @__PURE__ */ jsxs(
-    DataPageShell,
+    Shell,
     {
       title,
       subtitle,
@@ -2823,11 +2846,13 @@ function ResourcePage(props) {
       density: settings.density,
       onDensityChange: (d) => updateSetting("density", d),
       createAction,
+      secondaryActions,
       hasActiveFilters: page.hasActiveFilters,
       onClearFilters: handleClearFilters,
       emptyAction: emptyState,
-      filters: /* @__PURE__ */ jsx(
+      filters: renderSlot(
         DataFilters,
+        slots?.filters,
         {
           search: page.filterConfig.search,
           onSearchChange: handleSearchChange,
@@ -2843,11 +2868,15 @@ function ResourcePage(props) {
           onDeleteView,
           canSaveViews,
           onClearAll: page.hasActiveFilters ? handleClearFilters : void 0
-        }
+        },
+        slotProps?.filters
       ),
+      ...shellSlotProps,
+      className: cn(className, shellSlotProps?.className),
       children: [
-        bulkActions && bulkActions.length > 0 && /* @__PURE__ */ jsx(
+        bulkActions && bulkActions.length > 0 && renderSlot(
           DataBulkBar,
+          slots?.bulkBar,
           {
             selected: selectedIds,
             totalCount: page.data.length,
@@ -2858,14 +2887,17 @@ function ResourcePage(props) {
               icon: a.icon ?? Trash2,
               variant: a.variant,
               disabled: a.disabled,
+              testId: a.testId,
               onClick: () => {
                 void a.onAction(Array.from(selectedIds));
               }
             }))
-          }
+          },
+          slotProps?.bulkBar
         ),
-        /* @__PURE__ */ jsx(
+        renderSlot(
           DataGrid,
+          slots?.grid,
           {
             items: page.data,
             viewMode: page.viewMode,
@@ -2873,8 +2905,9 @@ function ResourcePage(props) {
             getKey: (item) => String(item.id ?? ""),
             focusedIndex: keyboardNav.focusedIndex,
             keyboardContainerRef: keyboardNav.containerRef,
-            renderTable: (items) => renderTableProp ? renderTableProp(items) : /* @__PURE__ */ jsx(
+            renderTable: (items) => renderTableProp ? renderTableProp(items) : renderSlot(
               DataTable,
+              slots?.table,
               {
                 items,
                 columns: tableColumns,
@@ -2893,12 +2926,16 @@ function ResourcePage(props) {
                 resizeKey,
                 stickyHeader,
                 stickyFirstColumn,
+                // The server already cut the page window; DataTable's own
+                // pagination would slice the slice.
                 pagination: isServerControlled ? false : void 0
-              }
+              },
+              slotProps?.table
             ),
             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(
           "div",
@@ -2987,8 +3024,9 @@ function ResourcePage(props) {
             ]
           }
         ),
-        (detail === "panel" || detail === "modal") && /* @__PURE__ */ jsx(
+        (detail === "panel" || detail === "modal") && renderSlot(
           DetailPanel,
+          slots?.detail,
           {
             item: page.selectedItem,
             open: page.detailOpen,
@@ -3004,10 +3042,12 @@ function ResourcePage(props) {
             width: detailWidth,
             layout: detail === "modal" ? "dialog" : "sheet",
             children: renderDetailProp ? (item) => renderDetailProp(item) : void 0
-          }
+          },
+          slotProps?.detail
         ),
-        (useBuiltInCreate || useBuiltInEdit) && resourceName && /* @__PURE__ */ jsx(
+        (useBuiltInCreate || useBuiltInEdit) && resourceName && renderSlot(
           ResourceForm,
+          slots?.form,
           {
             resource: resourceName,
             action: formAction,
@@ -3026,7 +3066,8 @@ function ResourcePage(props) {
               page.setDetailOpen(false);
               page.setSelectedItem(null);
             }
-          }
+          },
+          slotProps?.form
         )
       ]
     }