@marktiderman/genesis-ui 2.8.0 → 2.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/SKILL.md +75 -4
  2. package/dist/{AppShell-LXQykEqe.d.ts → AppShell-BVr4V0UK.d.ts} +1 -110
  3. package/dist/PageHeader-V9lVkZtF.d.ts +114 -0
  4. package/dist/{chunk-S7NXD37O.js → chunk-25XEXYGC.js} +4 -4
  5. package/dist/chunk-25XEXYGC.js.map +1 -0
  6. package/dist/chunk-C7PQ54JI.js +763 -0
  7. package/dist/chunk-C7PQ54JI.js.map +1 -0
  8. package/dist/chunk-DIV4BYXX.js +58 -0
  9. package/dist/chunk-DIV4BYXX.js.map +1 -0
  10. package/dist/chunk-I4NBE2KL.js +16 -0
  11. package/dist/chunk-I4NBE2KL.js.map +1 -0
  12. package/dist/{chunk-DWCAC2E7.js → chunk-RKPS7ERS.js} +5 -4
  13. package/dist/chunk-RKPS7ERS.js.map +1 -0
  14. package/dist/components/data/index.d.ts +42 -949
  15. package/dist/components/data/index.js +962 -777
  16. package/dist/components/data/index.js.map +1 -1
  17. package/dist/components/layout/index.d.ts +2 -1
  18. package/dist/components/layout/index.js +7 -7
  19. package/dist/components/patterns/index.js +2 -1
  20. package/dist/components/patterns/sortable-list.js +2 -1
  21. package/dist/hooks/index.d.ts +8 -1
  22. package/dist/hooks/index.js +4 -1
  23. package/dist/hooks/use-resource-page.d.ts +1 -1
  24. package/dist/hooks/use-resource-page.js +1 -1
  25. package/dist/hooks/use-resource-url-state.d.ts +68 -0
  26. package/dist/hooks/use-resource-url-state.js +3 -0
  27. package/dist/hooks/use-resource-url-state.js.map +1 -0
  28. package/dist/index.js +21 -20
  29. package/dist/{use-resource-page-D4byuwAs.d.ts → use-resource-page-DaJzuq3M.d.ts} +63 -2
  30. package/dist/use-resource-table-DCVf_lEG.d.ts +1113 -0
  31. package/package.json +4 -8
  32. package/dist/chunk-DWCAC2E7.js.map +0 -1
  33. package/dist/chunk-S7NXD37O.js.map +0 -1
@@ -1,287 +1,28 @@
1
+ export { B as BulkAction, C as ConfirmDeleteDialog, a as ConfirmDeleteDialogProps, D as DataBulkBar, b as DataFilterConfig, c as DataFilters, d as DataGrid, e as DataPageShell, f as DataPageShellProps, g as DetailPanel, h as DetailPanelProps, F as FilterCombobox, i as FilterOption, j as ResourceAction, k as ResourceCardActions, l as ResourceDeleteConfirmCopy, m as ResourceForm, n as ResourceFormProps, o as ResourcePage, p as ResourcePageProps, q as ResourcePageSlotMap, r as ResourcePageSlotProps, s as ResourcePageSlots, R as ResourceTableState, S as SavedViewItem, t as StatusChipOption, v as StatusChipsVariant, u as useResourceTable } from '../../use-resource-table-DCVf_lEG.js';
2
+ export { D as DataTable, c as DataTableColumn, e as DataTableProps, d as DataTableSort, L as LinkCell, R as ResourceActions, a as ResourceColumnDef, T as ThumbnailCell } from '../../use-resource-page-DaJzuq3M.js';
1
3
  import * as React from 'react';
2
- import { ReactNode, ComponentType, ComponentProps, RefObject } from 'react';
3
- import { f as PageHeaderAction, c as PageHeaderOptions, P as PageHeader$1, A as AppShell$1 } from '../../AppShell-LXQykEqe.js';
4
- export { a as AppShellOptions, b as AppShellProps, N as NavItem, d as PageHeaderProps, e as ParentNavigation } from '../../AppShell-LXQykEqe.js';
5
- import { V as ViewMode } from '../../view-toggle-CahQ87PW.js';
6
- export { a as ViewToggle } from '../../view-toggle-CahQ87PW.js';
7
- import { LucideIcon } from 'lucide-react';
8
- import { Density } from '../../hooks/use-view-settings.js';
9
- import { R as ResourceActions, a as ResourceColumnDef, D as DataTable } from '../../use-resource-page-D4byuwAs.js';
10
- export { c as DataTableColumn, d as DataTableProps, L as LinkCell, T as ThumbnailCell } from '../../use-resource-page-D4byuwAs.js';
4
+ import { ReactNode } from 'react';
11
5
  export { EmptyState } from '../patterns/empty-state.js';
6
+ export { V as ViewMode, a as ViewToggle } from '../../view-toggle-CahQ87PW.js';
12
7
  export { V as ViewSettings } from '../../view-settings-kHKCHMjj.js';
13
- import { L as LinkComponent, a as NavigateFn } from '../../navigation-Bha0R3Fu.js';
14
- export { D as DefaultLink, G as GenesisLinkProps, I as IsPathActiveOptions, N as NavigationNode, R as ResolvedNavigation, d as defaultNavigate, i as isPathActive, r as resolveNavigation } from '../../navigation-Bha0R3Fu.js';
15
- import { UseFormReturn, Control, FieldErrors } from 'react-hook-form';
8
+ import { LucideIcon } from 'lucide-react';
9
+ import { L as LinkComponent } from '../../navigation-Bha0R3Fu.js';
10
+ export { D as DefaultLink, G as GenesisLinkProps, I as IsPathActiveOptions, a as NavigateFn, N as NavigationNode, R as ResolvedNavigation, d as defaultNavigate, i as isPathActive, r as resolveNavigation } from '../../navigation-Bha0R3Fu.js';
11
+ export { S as SlotOverride, a as SlotPropsFor, b as Slots } from '../../slots-tR0wf89f.js';
12
+ export { ResponsiveViewMode, ViewModeDefault } from '../../hooks/use-view-preference.js';
13
+ import { BaseRecord, Identifier } from '@marktiderman/genesis-core/provider';
14
+ import { UndoableWrite, WizardStep } from '@marktiderman/genesis-core/hooks';
16
15
  import { ResourceFormFieldDef } from '@marktiderman/genesis-core';
17
16
  export { FieldType, ResourceFormFieldDef, SelectOption } from '@marktiderman/genesis-core';
18
- import { WizardStep, UseResourceOptions } from '@marktiderman/genesis-core/hooks';
19
- import { b as Slots, a as SlotPropsFor } from '../../slots-tR0wf89f.js';
20
- export { S as SlotOverride } from '../../slots-tR0wf89f.js';
21
- import { ViewModeDefault } from '../../hooks/use-view-preference.js';
22
- export { ResponsiveViewMode } from '../../hooks/use-view-preference.js';
23
- import { FilterParam, SortParam, BaseRecord, Identifier } from '@marktiderman/genesis-core/provider';
17
+ import { Control, UseFormReturn, FieldErrors } from 'react-hook-form';
18
+ import { A as AppShell$1 } from '../../AppShell-BVr4V0UK.js';
19
+ export { a as AppShellOptions, b as AppShellProps, N as NavItem, P as ParentNavigation } from '../../AppShell-BVr4V0UK.js';
20
+ import { P as PageHeader$1 } from '../../PageHeader-V9lVkZtF.js';
21
+ export { a as PageHeaderOptions, b as PageHeaderProps } from '../../PageHeader-V9lVkZtF.js';
22
+ export { Density } from '../../hooks/use-view-settings.js';
24
23
  export { CommandPalette, CommandPaletteItem, CommandPaletteProps, useCommandPaletteHotkey } from '../ui/command-palette.js';
25
24
  export { UseSavedViewsReturn, useSavedViews } from '../../hooks/use-saved-views.js';
26
-
27
- interface DataPageShellProps {
28
- /** Display title for the page */
29
- title: string;
30
- icon?: LucideIcon;
31
- /** Singular entity name for generated text, e.g. "session" */
32
- entityName?: string;
33
- /** Subtitle text */
34
- subtitle?: string;
35
- createAction?: ReactNode;
36
- /** Extra actions, rendered in the header's one overflow menu. */
37
- secondaryActions?: PageHeaderAction[];
38
- isLoading?: boolean;
39
- isEmpty?: boolean;
40
- emptyIcon?: LucideIcon;
41
- emptyMessage?: string;
42
- /**
43
- * A sentence under the empty-state title — what this list is for, or what
44
- * to do first. Forwarded to `EmptyState`'s `description`; hidden while
45
- * filters are active, where "no results" is the whole story.
46
- */
47
- emptyDescription?: string;
48
- emptyAction?: ReactNode;
49
- /** Error state */
50
- hasError?: boolean;
51
- errorMessage?: string;
52
- onRetry?: () => void;
53
- /** Number of filtered/visible items */
54
- count?: number;
55
- /** Total items before filtering */
56
- totalCount?: number;
57
- viewMode?: ViewMode;
58
- onViewModeChange?: (mode: ViewMode) => void;
59
- /** View settings */
60
- pageSize?: number;
61
- onPageSizeChange?: (size: number) => void;
62
- density?: Density;
63
- onDensityChange?: (density: Density) => void;
64
- /**
65
- * Slot for a stat cards row. Forwarded to the header, which renders it
66
- * full width under the title block and above the filters — but only when
67
- * `headerOptions.showStats` is on (default off), so a page that gains
68
- * `stats` shows nothing new until the developer or user opts in.
69
- */
70
- stats?: ReactNode;
71
- /** Slot for filter bar */
72
- filters?: ReactNode;
73
- /** Whether filters are currently active */
74
- hasActiveFilters?: boolean;
75
- onClearFilters?: () => void;
76
- /**
77
- * When true, filters render inside PageHeader details (collapsed by default).
78
- * Default false preserves always-visible filters on existing boards.
79
- */
80
- filtersCollapsible?: boolean;
81
- defaultFiltersOpen?: boolean;
82
- filtersOpen?: boolean;
83
- onFiltersOpenChange?: (open: boolean) => void;
84
- filtersLabel?: string;
85
- filtersHint?: ReactNode;
86
- /**
87
- * PageHeader chrome config — developer defaults; users can further
88
- * customize via the in-header Header options menu.
89
- */
90
- headerOptions?: PageHeaderOptions;
91
- /** Persist user header-option overrides (localStorage) */
92
- headerOptionsStorageKey?: string;
93
- children: ReactNode;
94
- /** Merged onto the root, not replacing its layout. */
95
- className?: string;
96
- /**
97
- * Replace the header outright. It receives exactly the props
98
- * `DataPageShell` would have given `PageHeader`, so the common case is a
99
- * wrapper that renders `PageHeader` with one thing added — an overflow
100
- * menu, a status strip, a second row — rather than a reimplementation.
101
- *
102
- * `null` ejects it: shell layout, states and filter row, no header.
103
- *
104
- * `"toolbar"` keeps the header's actions — count, view toggle, view
105
- * settings, create, overflow menu — and drops the title block, for a list
106
- * embedded in a tab or card whose page already has the heading. `title`
107
- * still feeds the generated copy ("Failed to load …", the count's noun).
108
- */
109
- header?: ComponentType<ComponentProps<typeof PageHeader$1>> | null | "toolbar";
110
- }
111
- declare function DataPageShell({ title, icon, entityName, subtitle, createAction, secondaryActions, isLoading, isEmpty, emptyIcon, emptyMessage, emptyDescription, emptyAction, hasError, errorMessage, onRetry, count, totalCount, viewMode, onViewModeChange, pageSize, onPageSizeChange, density, onDensityChange, stats, filters, hasActiveFilters, onClearFilters, filtersCollapsible, defaultFiltersOpen, filtersOpen, onFiltersOpenChange, filtersLabel, filtersHint, headerOptions, headerOptionsStorageKey, children, className, header, }: DataPageShellProps): React.JSX.Element;
112
-
113
- interface FilterOption {
114
- value: string;
115
- label?: string;
116
- count?: number;
117
- }
118
- interface FilterComboboxProps {
119
- label: string;
120
- icon: LucideIcon;
121
- options: FilterOption[];
122
- selected: string[];
123
- onChange: (selected: string[]) => void;
124
- searchPlaceholder?: string;
125
- allLabel?: string;
126
- /** Optional map of value -> display label */
127
- labelMap?: Record<string, string>;
128
- }
129
- declare function FilterCombobox({ label, icon: Icon, options, selected, onChange, searchPlaceholder, allLabel, labelMap, }: FilterComboboxProps): React.JSX.Element;
130
-
131
- interface DataFilterConfig {
132
- key: string;
133
- label: string;
134
- icon: LucideIcon;
135
- options: FilterOption[];
136
- selected: string[];
137
- onChange: (values: string[]) => void;
138
- searchPlaceholder?: string;
139
- allLabel?: string;
140
- labelMap?: Record<string, string>;
141
- }
142
- interface SavedViewItem {
143
- id: string;
144
- name: string;
145
- filters: Record<string, unknown>;
146
- }
147
- /**
148
- * One status chip. A plain string is shorthand for `{ value, label: value }`.
149
- * `count` renders as a muted number after the label.
150
- */
151
- interface StatusChipOption {
152
- value: string;
153
- label?: string;
154
- count?: number;
155
- }
156
- /** Rendering of the status chips — a row of pills, or one segmented strip. */
157
- type StatusChipsVariant = "chips" | "tabs";
158
- interface DataFiltersProps {
159
- search: string;
160
- onSearchChange: (value: string) => void;
161
- searchPlaceholder?: string;
162
- sort: string;
163
- onSortChange: (sort: string) => void;
164
- sortOptions: Array<{
165
- value: string;
166
- label: string;
167
- }>;
168
- filters?: DataFilterConfig[];
169
- /** Status chip toggles */
170
- statusChips?: {
171
- options: Array<string | StatusChipOption>;
172
- selected: string[];
173
- onChange: (values: string[]) => void;
174
- /**
175
- * `"chips"` (default) renders pills inside the filter row. `"tabs"`
176
- * renders a segmented strip on its own row above the search row —
177
- * the same border-and-fill look as `ViewToggle`. Selection is
178
- * multi-select in both.
179
- */
180
- variant?: StatusChipsVariant;
181
- };
182
- /** Saved views */
183
- savedViews?: SavedViewItem[];
184
- onLoadView?: (filters: Record<string, unknown>) => void;
185
- onSaveView?: (name: string) => void;
186
- onDeleteView?: (id: string) => void;
187
- canSaveViews?: boolean;
188
- /** Called after a view is saved successfully */
189
- onViewSaved?: (name: string) => void;
190
- /** Called when an error occurs */
191
- onError?: (message: string) => void;
192
- /** Called when "Clear all" is clicked */
193
- onClearAll?: () => void;
194
- /** Expose the search input ref for keyboard nav "/" shortcut */
195
- searchInputRef?: React.RefObject<HTMLInputElement | null>;
196
- /** Show the search box. Default `true`; turn off when the data source can't search. */
197
- showSearch?: boolean;
198
- /** Show the sort select. Default `true`; turn off when the data source can't sort. */
199
- showSort?: boolean;
200
- }
201
- declare function DataFilters({ search, onSearchChange, searchPlaceholder, sort, onSortChange, sortOptions, filters, statusChips, savedViews, onLoadView, onSaveView, onDeleteView, canSaveViews, onViewSaved, onClearAll, searchInputRef, showSearch, showSort, }: DataFiltersProps): React.JSX.Element;
202
-
203
- interface DataGridProps<T> {
204
- items: T[];
205
- viewMode: ViewMode;
206
- /** Items per infinite scroll batch (grid only). Default 48 */
207
- batchSize?: number;
208
- /** Tailwind grid column classes */
209
- gridCols?: string;
210
- /** Render a single card in grid mode */
211
- renderCard: (item: T, index: number) => ReactNode;
212
- /** Render the table view (receives currently visible items) */
213
- renderTable?: (items: T[]) => ReactNode;
214
- /** Render a compact list row */
215
- renderListItem?: (item: T, index: number) => ReactNode;
216
- /** Animate cards with staggered fade-in. Default true */
217
- staggerAnimation?: boolean;
218
- /** Unique key extractor. Defaults to (item as any).id */
219
- getKey?: (item: T) => string;
220
- /** Keyboard navigation: focused item index (-1 = none) */
221
- focusedIndex?: number;
222
- /** Keyboard navigation: container ref for scroll management */
223
- keyboardContainerRef?: RefObject<HTMLDivElement | null>;
224
- /**
225
- * Open an item. Makes each card (and list row) one keyboard-reachable
226
- * button: click, Enter or Space activates it, with a focus ring. Clicks on
227
- * a link, button or input inside the card are left to that control, so a
228
- * card can still carry its own actions. Use this instead of wrapping cards
229
- * in a hand-rolled `div role="button"`.
230
- */
231
- onItemClick?: ((item: T) => void) | undefined;
232
- /** Accessible name for an activatable item, e.g. `Open ${item.name}`. Used with `onItemClick`. */
233
- getItemLabel?: ((item: T) => string) | undefined;
234
- }
235
- declare function DataGrid<T>({ items, viewMode, batchSize, gridCols, renderCard, renderTable, renderListItem, staggerAnimation, getKey, focusedIndex, keyboardContainerRef, onItemClick, getItemLabel, }: DataGridProps<T>): React.JSX.Element;
236
-
237
- /**
238
- * One button in the bulk action bar.
239
- *
240
- * @stability Stable
241
- */
242
- interface BulkAction {
243
- label: string;
244
- icon: LucideIcon;
245
- onClick: () => void;
246
- variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
247
- /**
248
- * Makes this action inert: it renders with the Button primitive's native
249
- * `disabled` attribute, so it is neither clickable nor focusable, and it
250
- * picks up the disabled styling.
251
- *
252
- * The case this exists for is an in-flight bulk mutation. A consumer that
253
- * fires a move/duplicate/delete over the selected ids wants every bulk
254
- * action dead until it settles, so a user cannot double-fire a destructive
255
- * operation on the same selection. Without this field the only guard
256
- * available is an early return inside `onClick` — which does stop the
257
- * second call, but leaves the button looking live, so the affordance lies
258
- * about what pressing it will do. Concretely, that is what blocks a real
259
- * consumer's hand-rolled bulk bar from migrating to `DataBulkBar`: it
260
- * would have to give up its double-submit guard to do so.
261
- *
262
- * Optional and defaulted off — omitting it behaves exactly as before.
263
- */
264
- disabled?: boolean;
265
- /**
266
- * `data-testid` on the rendered button.
267
- *
268
- * Without it, a consumer migrating a hand-rolled bulk bar to `DataBulkBar`
269
- * loses every selector its e2e suite uses to drive one — which is a real
270
- * reason not to migrate, and the kind of small missing affordance that
271
- * keeps a parallel implementation alive.
272
- */
273
- testId?: string;
274
- }
275
- interface DataBulkBarProps {
276
- selected: Set<string>;
277
- totalCount: number;
278
- onToggleAll: () => void;
279
- onClearSelection: () => void;
280
- actions: BulkAction[];
281
- /** Merged onto the bar, not replacing its positioning. */
282
- className?: string;
283
- }
284
- declare function DataBulkBar({ selected, totalCount, onToggleAll, onClearSelection, actions, className, }: DataBulkBarProps): React.JSX.Element | null;
25
+ import '../../hooks/use-resource-url-state.js';
285
26
 
286
27
  /**
287
28
  * DateCell -- shows relative date by default, formatted date otherwise.
@@ -348,12 +89,16 @@ interface KanbanBoardProps<T> {
348
89
  /** A stable key per item. Without one, cards are keyed by position. */
349
90
  getKey?: (item: T) => string;
350
91
  /**
351
- * Move an item to another column. When set, cards can be dragged between
352
- * columns, and each card gets a "Move to…" menu that does the same from
353
- * the keyboard. A rejected promise leaves the card where it was.
92
+ * Move an item to another column. When set (with `getKey`), every card can
93
+ * be moved four ways: dragged with a mouse; dragged by its handle on a
94
+ * touch screen; picked up from the keyboard with its handle (Space, then
95
+ * ←/→ to choose a column, Space to drop, Escape to cancel; Alt+←/→ moves
96
+ * straight away); or from its "Move to…" menu. A finished move is
97
+ * announced to screen readers. A rejected promise leaves the card where it
98
+ * was and announces that the move failed.
354
99
  */
355
100
  onMoveItem?: (item: T, toColumn: string) => void | Promise<void>;
356
- /** A name for an item, for the move menu's label ("Move Ana Ruiz"). */
101
+ /** A name for an item, for its handle, menu and announcements ("Move Ana Ruiz"). */
357
102
  getItemLabel?: (item: T) => string;
358
103
  /** Under a column's cards, e.g. a "Load more" button. */
359
104
  renderColumnFooter?: (column: KanbanColumn<T>) => ReactNode;
@@ -361,10 +106,12 @@ interface KanbanBoardProps<T> {
361
106
  /**
362
107
  * Columns of cards, optionally movable between columns.
363
108
  *
364
- * Why the keyboard path isn't Radix (docs/FRAMEWORK.md rule 3): Radix has no
365
- * drag and drop, and native drag and drop can't be done from a keyboard. The
366
- * "Move to…" menu (a Radix DropdownMenu) is the equivalent path for keyboard
367
- * and screen-reader users, so dragging is never the only way to move a card.
109
+ * Moving uses the same engine as SortableList: native drag and drop for the
110
+ * mouse, pointer events on the handle for touch, a keyboard pick-up on the
111
+ * handle, and a "Move to…" menu, with every finished move announced in a
112
+ * polite live region. Radix has no drag and drop and native drag and drop
113
+ * can't be done from a keyboard or a touch screen (docs/FRAMEWORK.md rule 3),
114
+ * so dragging is never the only way to move a card.
368
115
  */
369
116
  declare function KanbanBoard<T>({ columns, renderCard, emptyMessage, className, getKey, onMoveItem, getItemLabel, renderColumnFooter, }: KanbanBoardProps<T>): React.JSX.Element;
370
117
 
@@ -376,669 +123,6 @@ interface DataListProps<T> {
376
123
  }
377
124
  declare function DataList<T>({ items, renderItem, emptyMessage, className, }: DataListProps<T>): React.JSX.Element;
378
125
 
379
- /**
380
- * Props for {@link DetailPanel} — a shell-agnostic record detail view.
381
- * `layout` selects only the surrounding shell (inline / dialog / sheet);
382
- * the header and content below it render identically across all three.
383
- *
384
- * @stability Beta
385
- */
386
- interface DetailPanelProps<T> {
387
- /** The record to display */
388
- item: T | null;
389
- /** Whether panel is visible */
390
- open: boolean;
391
- /** Close handler */
392
- onClose: () => void;
393
- /** Header title */
394
- title?: string;
395
- /** Header subtitle */
396
- subtitle?: string;
397
- /** Shows edit button if provided */
398
- onEdit?: (item: T) => void;
399
- /** Shows delete button if provided */
400
- onDelete?: (item: T) => void;
401
- /** Custom content renderer */
402
- children?: (item: T) => ReactNode;
403
- /** Field definitions for auto-rendering */
404
- fields?: Array<{
405
- key: string;
406
- label: string;
407
- render?: (value: unknown, item: T) => ReactNode;
408
- }>;
409
- /**
410
- * Panel width. For `"sheet"` / `"inline"` this is a fixed pixel width
411
- * (matching this component's original, pre-`layout` sizing exactly). For
412
- * `"dialog"` it maps to Tailwind's modal max-width scale instead, since a
413
- * centered modal has a different sizing idiom than an edge-anchored panel.
414
- */
415
- width?: "sm" | "md" | "lg";
416
- /**
417
- * Rendering shell for the header + content below.
418
- * - `"sheet"` (default): fixed, right-anchored slide-in panel, composed
419
- * from the shared `Sheet` primitive. Matches this component's original
420
- * (pre-`layout`-prop) behavior — existing consumers that don't pass
421
- * `layout` see no change, other than an overlay now present at all
422
- * breakpoints (previously mobile-only) since it's a real `Sheet`.
423
- * - `"dialog"`: centered modal overlay, composed from the shared `Dialog`
424
- * primitive.
425
- * - `"inline"`: plain in-flow panel — no overlay, backdrop, or fixed
426
- * positioning — for master-detail / split-pane layouts.
427
- */
428
- layout?: "inline" | "dialog" | "sheet";
429
- }
430
- 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;
431
-
432
- interface ResourceFormProps {
433
- resource: string;
434
- action: "create" | "edit";
435
- item?: Record<string, unknown>;
436
- open: boolean;
437
- onOpenChange: (open: boolean) => void;
438
- title?: string;
439
- fields?: ResourceFormFieldDef[];
440
- /** Full dataset used to auto-detect select fields from unique values. */
441
- listData?: Record<string, unknown>[];
442
- renderForm?: (form: UseFormReturn<Record<string, unknown>>, fields: ResourceFormFieldDef[]) => ReactNode;
443
- onSuccess?: (data: Record<string, unknown>) => void;
444
- onError?: (error: Error) => void;
445
- /** Layout mode for the form container. Default "dialog". */
446
- layout?: "dialog" | "sheet" | "page";
447
- /** Form presentation mode. Default "standard". */
448
- mode?: "standard" | "wizard";
449
- /** Wizard step definitions. Required when mode is "wizard". */
450
- steps?: WizardStep[];
451
- /** Number of columns for the form layout. Default 1. */
452
- columns?: 1 | 2;
453
- /**
454
- * Pre-fill a create form from the page URL: a query param named like a
455
- * field (`?status=draft`) becomes that field's starting value. Default
456
- * `true`, as before. Pass `false` when the page's query string means
457
- * something else — a list's own filters, say — and must not leak into the
458
- * new record.
459
- */
460
- prefillFromUrl?: boolean;
461
- /**
462
- * Generate a placeholder ("Enter name") for fields whose `placeholder` is
463
- * unset. Default `false`: a placeholder that restates the label adds noise,
464
- * and reads as a filled value at a glance. A field's own `placeholder`
465
- * always shows. (Select fields keep their "Select…" prompt either way.)
466
- */
467
- autoPlaceholder?: boolean;
468
- }
469
- declare function ResourceForm(props: ResourceFormProps): React.JSX.Element | null;
470
-
471
- /**
472
- * Props for {@link ConfirmDeleteDialog}.
473
- *
474
- * @stability Beta
475
- */
476
- interface ConfirmDeleteDialogProps {
477
- open: boolean;
478
- onOpenChange: (open: boolean) => void;
479
- /**
480
- * Runs the delete. The dialog stays open while it is pending, closes when
481
- * it resolves, and shows the error's message (staying open, so the user
482
- * can retry or cancel) when it rejects.
483
- */
484
- onConfirm: () => void | Promise<void>;
485
- /** Default "Delete this record?". */
486
- title?: string;
487
- /** Default "This can't be undone." */
488
- description?: ReactNode;
489
- /** Default "Delete". */
490
- confirmLabel?: string;
491
- /** Default "Cancel". */
492
- cancelLabel?: string;
493
- }
494
- /**
495
- * The confirm step in front of a destructive delete: an `AlertDialog` (Radix
496
- * owns focus trap, Escape and focus return), a pending state, and the
497
- * failure shown in place rather than swallowed. `ResourcePage` renders it
498
- * for `allowDelete` / `confirmDelete`, as its `deleteDialog` slot.
499
- *
500
- * @stability Beta
501
- */
502
- declare function ConfirmDeleteDialog({ open, onOpenChange, onConfirm, title, description, confirmLabel, cancelLabel, }: ConfirmDeleteDialogProps): React.JSX.Element;
503
-
504
- /**
505
- * Row-bound actions handed to `renderCard`, on top of the resource-wide
506
- * `ResourceActions`. `open` is per-row, which is why it lives here rather
507
- * than on `ResourceActions` — that object is built once and shared by every
508
- * row and column, so it cannot carry a row-specific callback.
509
- *
510
- * @stability Beta
511
- */
512
- interface ResourceCardActions<T> extends ResourceActions<T> {
513
- /**
514
- * Activate this row — opens the configured detail panel / modal / route,
515
- * exactly as clicking the built-in card does. Wire it to your card's
516
- * `onClick` (and call `stopPropagation` on any nested control that should
517
- * not also activate the row).
518
- */
519
- open: () => void;
520
- }
521
- /**
522
- * Config-driven resource page: wires data-fetching (or a pre-fetched `data`
523
- * array), search/filter/sort, table/grid/list views, and a detail
524
- * panel/modal/route around a `DataProvider` resource — the CRUD page most
525
- * apps hand-roll, expressed as one component tree. `renderCard` lets a
526
- * consumer fully own item presentation while ResourcePage keeps handling
527
- * data-fetching, filtering, and layout; see also the built-in
528
- * `useKeyboardNavigation` wiring (`keyboardNavigation` prop) and `gridCols`.
529
- *
530
- * Three levels of control, and each option is available at all three:
531
- *
532
- * 1. **The primitive offers it** — table / grid / list views, search, sort,
533
- * status chips, column visibility and resizing, density, page size,
534
- * detail panel / modal / route, built-in create and edit forms.
535
- * 2. **The instance turns it on or off** — every one of those is a prop, so
536
- * a given page decides which affordances it offers at all.
537
- * 3. **The end user picks their own, and it sticks** — for the options left
538
- * on at level 2, the user's choice persists to their own storage:
539
- * `viewSettingsKey` for page size and density, `columnVisibilityKey` and
540
- * `resizeKey` for column layout, `savedViews` (pair with `useSavedViews`)
541
- * for named filter sets. Persistence needs a key; without one the choice
542
- * lasts only for the session.
543
- *
544
- * A server-paginated list drives the same component through the controlled
545
- * props (`page`, `perPage`, `onPageChange`, `onSortChange`, `onSearchChange`
546
- * and friends) — supplying any of them stops ResourcePage from searching,
547
- * sorting or paging the `data` a second time. See that block in
548
- * {@link ResourcePageProps}.
549
- *
550
- * @stability Beta
551
- */
552
- /**
553
- * Every interior part `ResourcePage` composes, with the props it composes it
554
- * with. Each key is a slot: replace it via `slots`, feed it more props via
555
- * `slotProps`, or eject it with `null`.
556
- *
557
- * The map is the contract. A part that is not named here cannot be reached,
558
- * so adding a part to the render tree means adding it here in the same
559
- * change — otherwise the next surface that needs it forks the whole page.
560
- */
561
- type ResourcePageSlotMap<T extends Record<string, unknown> = Record<string, unknown>> = {
562
- /** The page shell: header, count pill, loading / empty / error states. */
563
- shell: ComponentProps<typeof DataPageShell>;
564
- /** The filter row — search, sort, facets, saved views. */
565
- filters: ComponentProps<typeof DataFilters>;
566
- /** The selection bar. Ejecting it leaves selection working, just unshown. */
567
- bulkBar: ComponentProps<typeof DataBulkBar>;
568
- /** The card/table switch. */
569
- grid: ComponentProps<typeof DataGrid<T>>;
570
- /** The table inside the grid. `renderTable` stays the terser way to swap. */
571
- table: ComponentProps<typeof DataTable<T>>;
572
- /** The detail peek. */
573
- detail: ComponentProps<typeof DetailPanel<T>>;
574
- /** The create / edit form. */
575
- form: ComponentProps<typeof ResourceForm>;
576
- /**
577
- * The confirm step in front of a delete. Rendered only when a delete is
578
- * confirmed (`allowDelete`, or `onDelete` with `confirmDelete`).
579
- */
580
- deleteDialog: ComponentProps<typeof ConfirmDeleteDialog>;
581
- };
582
- /**
583
- * `slots` for {@link ResourcePage}, with one asymmetry the map cannot express:
584
- * every part may be ejected with `null` EXCEPT `shell`.
585
- *
586
- * The shell is not an interior part, it is the page — `Shell` is what the
587
- * render returns, so ejecting it does not remove a piece, it removes the
588
- * component (`const Shell = slots?.shell ?? DataPageShell` would become
589
- * `null`, and React throws on the element). A caller who wants no shell wants
590
- * rung 3 of the ladder, not a `null` here. Replacing it stays supported, which
591
- * is the way to wrap it and change one thing.
592
- */
593
- type ResourcePageSlots<T extends Record<string, unknown> = Record<string, unknown>> = Omit<Slots<ResourcePageSlotMap<T>>, "shell"> & {
594
- shell?: ComponentType<ComponentProps<typeof DataPageShell>>;
595
- };
596
- /**
597
- * `slotProps` for {@link ResourcePage}: extra props merged into a part you
598
- * are keeping, winning over ResourcePage's own.
599
- */
600
- type ResourcePageSlotProps<T extends Record<string, unknown> = Record<string, unknown>> = SlotPropsFor<ResourcePageSlotMap<T>>;
601
- /**
602
- * Copy for the built-in delete confirmation. Every field is optional;
603
- * omitted ones fall back to `ConfirmDeleteDialog`'s defaults.
604
- *
605
- * @stability Beta
606
- */
607
- interface ResourceDeleteConfirmCopy<T> {
608
- /** Default "Delete this record?". A function receives the row. */
609
- title?: string | ((item: T) => string);
610
- /** Default "This can't be undone." */
611
- description?: ReactNode | ((item: T) => ReactNode);
612
- /** Default "Delete". */
613
- confirmLabel?: string;
614
- /** Default "Cancel". */
615
- cancelLabel?: string;
616
- }
617
- interface ResourcePageProps<T extends Record<string, unknown> = Record<string, unknown>> {
618
- /** Client-side mode: resource name passed to useResource / DataProvider. */
619
- resource?: string;
620
- /** Server-data mode: pre-fetched data array. */
621
- data?: T[];
622
- /**
623
- * Server-data mode: total record count (before client-side filtering).
624
- *
625
- * Required whenever `onPageChange` is supplied. It cannot be derived from
626
- * `data`, which holds only the current page. Omitted, `displayTotal` falls
627
- * back to `0`, so the range span reads "No records" and `Next` stays
628
- * disabled while the rows render directly below it. Rather than show a
629
- * pager that contradicts the list, the component refuses to render the
630
- * pager and shows an error instead. See {@link perPage} and
631
- * {@link onPageChange}.
632
- */
633
- total?: number;
634
- /**
635
- * How `resource` mode reaches rows past the first page. Ignored with
636
- * `data` (server-data mode pages through the controlled props instead).
637
- *
638
- * - `"client"` (default): fetch up to `clientRowLimit` rows in one request
639
- * and search, sort, filter and page them in the browser — header-click
640
- * sort and instant search keep working. If the resource holds more rows
641
- * than that, a notice under the list says how many are shown (and a
642
- * console warning names this prop), rather than silently truncating.
643
- * - `"server"`: fetch one page at a time. The pager under the list drives
644
- * `useResource`'s page, the header's page size its `perPage`, and
645
- * search / sort / status chips become provider queries (search is
646
- * debounced), and the current page stays on screen while the next one
647
- * loads. Give `statusFilter` explicit `options` here — derived ones can
648
- * only see the current page's values. Search needs `searchFields` (or
649
- * `resourceOptions.searchFields`) — the provider must be told which
650
- * columns to match — so the search box is hidden without them. Table
651
- * header sorting is withdrawn, as in server-data mode; the sort control
652
- * in the filter row drives the query.
653
- */
654
- pagination?: "client" | "server";
655
- /**
656
- * `pagination="client"` only: the most rows fetched. Default 1000. An
657
- * explicit `resourceOptions.defaultPerPage` wins.
658
- */
659
- clientRowLimit?: number;
660
- title: string;
661
- /** Page subtitle shown below the title. */
662
- subtitle?: string;
663
- icon?: LucideIcon;
664
- columns?: Array<string | ResourceColumnDef<T>>;
665
- /**
666
- * A row's identity, for React keys and bulk selection. Defaults to
667
- * `String(item.id)`. Supply it for rows keyed some other way — a composite
668
- * key (`encodeRecordKey` from `@marktiderman/genesis-core/schema`), or a
669
- * table whose key column isn't called `id`. Detail `route` mode still
670
- * navigates by `item.id`.
671
- */
672
- getKey?: (item: T) => string;
673
- /** How row-click detail is shown. Default "panel". */
674
- detail?: "panel" | "modal" | "route" | "none";
675
- detailWidth?: "sm" | "md" | "lg";
676
- titleField?: string;
677
- subtitleField?: string;
678
- /**
679
- * Name a record from more than one field (`${first} ${last}`). Wins over
680
- * `titleField` for the detail title and the card's accessible name.
681
- */
682
- getTitle?: (item: T) => string;
683
- /**
684
- * The detail peek's subtitle, computed from the row ("2 staff", "Due
685
- * Friday"). Wins over `subtitleField`, which can only show one column
686
- * verbatim.
687
- */
688
- getSubtitle?: (item: T) => string | undefined;
689
- renderDetail?: (item: T) => ReactNode;
690
- detailFields?: Array<{
691
- key: string;
692
- label: string;
693
- render?: (value: unknown, item: T) => ReactNode;
694
- }>;
695
- /**
696
- * Adds a status-chip filter. There is no dedicated status-change
697
- * callback: chip clicks update the same filter state that already
698
- * reports through `onFiltersChange`, whether or not the page is in
699
- * server-controlled mode. A caller combining `statusFilter` with server
700
- * pagination (`onPageChange` et al.) must supply `onFiltersChange` — see
701
- * that prop — or status changes will update the chip UI without ever
702
- * reaching the server. In server-controlled mode a status change also
703
- * resets to page 1 via `onPageChange(1)` — see {@link onPageChange}.
704
- */
705
- statusFilter?: string | {
706
- field: string;
707
- options?: string[];
708
- };
709
- searchFields?: string[];
710
- searchPlaceholder?: string;
711
- initialFilters?: FilterParam[];
712
- onFiltersChange?: (filters: FilterParam[]) => void;
713
- /**
714
- * Extra multi-select filter comboboxes, handed straight to `DataFilters`
715
- * and rendered beside the status chips. Each config owns its own
716
- * `selected` array and `onChange` — ResourcePage never reads or writes
717
- * them, because it cannot know what a caller's "Grade" or "Subject"
718
- * combobox means against the row shape. That is deliberate rather than a
719
- * gap: the built-in machinery (`searchFields`, `statusFilter`) covers the
720
- * two shapes it *can* interpret, and this prop covers everything else by
721
- * getting out of the way.
722
- *
723
- * Two consequences of that hands-off stance, stated rather than hidden:
724
- * - These selections are invisible to `page.hasActiveFilters`, so the
725
- * header's "Clear filters" affordance does not appear for them alone,
726
- * and `onClearFilters` does not reset them. DataFilters' own "Clear all"
727
- * does call each config's `onChange([])`, so wire real clearing there.
728
- * - In client-side mode the rows are NOT re-filtered by these selections.
729
- * A caller using them is expected to filter its own `data` (or ask the
730
- * server to), exactly as it already does in server-controlled mode.
731
- */
732
- filters?: DataFilterConfig[];
733
- /** Current page, 1-based. Server-controlled mode only. */
734
- page?: number;
735
- /**
736
- * Rows per page the server was asked for. Required whenever
737
- * `onPageChange` is supplied: pager math (total pages, range start, Next)
738
- * cannot be inferred from `data.length`, because a short final page is
739
- * smaller than the real page size. Wins over the per-user page size
740
- * persisted by `viewSettingsKey` — an explicit prop always beats a stored
741
- * preference.
742
- *
743
- * Required whenever `onPageChange` is supplied. A short final page (the
744
- * server's last page returning fewer rows than its page size) is
745
- * indistinguishable from a small page size — there is no correct way to
746
- * infer the divisor from the rows handed back. Rather than guess and
747
- * render a wrong range or a stuck Next button, the component refuses to
748
- * render the pager and shows an error instead when `onPageChange` is
749
- * present without `perPage`.
750
- *
751
- * `total` is required on the same terms — see {@link total}. The error
752
- * names every missing prop, not just the first.
753
- */
754
- perPage?: number;
755
- /**
756
- * Called with the next 1-based page number. The pager only renders when
757
- * this is supplied AND both `perPage` and `total` are supplied — see
758
- * {@link perPage} and {@link total}. Supplying this without either one
759
- * renders an error naming the missing props instead of a pager.
760
- *
761
- * Status changes reach the server through `onFiltersChange` — not a
762
- * dedicated callback here — because `statusFilter` state is tracked by
763
- * the same filter machinery that already calls `onFiltersChange`
764
- * regardless of controlled mode (see {@link statusFilter}). In
765
- * server-controlled mode a status change also calls `onPageChange(1)`
766
- * directly, since the previous page number is meaningless against a new
767
- * filtered result set.
768
- */
769
- onPageChange?: (page: number) => void;
770
- /** Called when the user picks a different page size in the header's view settings. */
771
- onPerPageChange?: (perPage: number) => void;
772
- /** Called when the user changes the sort, with `null` when the sort is cleared. */
773
- onSortChange?: (sort: SortParam | null) => void;
774
- /** Called when the user changes the search text (including clearing it). */
775
- onSearchChange?: (search: string) => void;
776
- /**
777
- * Server-data mode: the caller's fetch is in flight, so render the shell's
778
- * loading skeleton instead of the (as yet meaningless) `data`. Ignored in
779
- * client-side mode, where `useResource`'s own loading state is used.
780
- */
781
- loading?: boolean;
782
- /**
783
- * Server-data mode: the caller's fetch failed, so render the shell's error
784
- * panel instead of an empty table. Takes effect even when `data` is
785
- * non-empty — stale rows beside no indication of failure are exactly the
786
- * silent-failure this prop exists to prevent. Ignored in client-side mode,
787
- * where `useResource`'s own error state is used.
788
- */
789
- error?: boolean;
790
- /**
791
- * Message shown in the error panel, in place of the shell's generic
792
- * "Failed to load …". Forwarded in both modes — it is inert unless an
793
- * error state is actually showing — so a client-side page can also give
794
- * its failure a human sentence.
795
- */
796
- errorMessage?: string;
797
- /**
798
- * Server-data mode: invoked by the error panel's Retry button. The button
799
- * only appears when this is supplied, so a caller with no way to retry
800
- * simply omits it and gets an error panel without a dead control. In
801
- * client-side mode the button is already wired to `useResource`'s own
802
- * `refetch` and this prop is ignored.
803
- */
804
- onRetry?: () => void;
805
- /** Saved filter views to offer. Pair with `useSavedViews` for per-user storage. */
806
- savedViews?: SavedViewItem[];
807
- onLoadView?: (filters: Record<string, unknown>) => void;
808
- onSaveView?: (name: string) => void;
809
- onDeleteView?: (id: string) => void;
810
- /** Show the "save current view" affordance. */
811
- canSaveViews?: boolean;
812
- /**
813
- * What the data source can do. A control it can't serve is hidden rather
814
- * than left to error (DATA-STUDIO.md decision 9): `search: false` hides the
815
- * search box, `sort: false` the sort select. Pass a provider's
816
- * `capabilities()` straight in. Omitted, both show, as before.
817
- */
818
- capabilities?: {
819
- search?: boolean;
820
- sort?: boolean;
821
- };
822
- /** Show the column-visibility dropdown. DataTable's default is `true`. */
823
- columnVisibility?: boolean;
824
- /** Persist key for the user's column-visibility picks. */
825
- columnVisibilityKey?: string;
826
- /** Allow drag-resizing columns. DataTable's default is `true`. */
827
- resizableColumns?: boolean;
828
- /** Persist key for the user's column widths. */
829
- resizeKey?: string;
830
- /** Keep the table header visible while scrolling. DataTable's default is `true`. */
831
- stickyHeader?: boolean;
832
- /** Keep the first column visible while scrolling horizontally. */
833
- stickyFirstColumn?: boolean;
834
- /**
835
- * Page-size choices offered by `DataTable`'s own pager. Client-side mode
836
- * only — server-controlled mode switches that pager off. (The header's
837
- * view-settings popover has its own fixed 10/25/50/100 list.)
838
- */
839
- pageSizeOptions?: number[];
840
- onCreate?: () => void;
841
- onEdit?: (item: T) => void;
842
- /**
843
- * Delete handler, shown as the detail peek's Delete button. Called
844
- * directly, as before, unless `confirmDelete` is set — then it runs after
845
- * the confirm dialog, which shows its error if the returned promise
846
- * rejects, and closes the peek when it resolves.
847
- */
848
- onDelete?: (item: T) => void | Promise<void>;
849
- /**
850
- * Whether the signed-in user may change this record at all: shorthand for
851
- * `canEdit` and `canDelete` together. When it returns false the peek
852
- * offers neither Edit nor Delete.
853
- *
854
- * Precedence: `canEditItem` is checked first. A row it refuses gets no Edit
855
- * and no Delete, whatever `canEdit` / `canDelete` say. A row it allows is
856
- * then gated by `canEdit` (Edit) and `canDelete` (Delete) when given. Use
857
- * `canEditItem` alone for one owner rule, or the pair for separate rules.
858
- */
859
- canEditItem?: (item: T) => boolean;
860
- createLabel?: string;
861
- /**
862
- * Whether this row may be edited. The peek's Edit button is hidden for a
863
- * row that returns `false` (and the built-in edit form will not open for
864
- * it). Omitted, every row is editable, as before. A UI gate only: the
865
- * server must still refuse the write.
866
- */
867
- canEdit?: (item: T) => boolean;
868
- /**
869
- * Whether this row may be deleted. The peek's Delete button is hidden for
870
- * a row that returns `false`. Omitted, every row is deletable. A UI gate
871
- * only: the server must still refuse the write.
872
- */
873
- canDelete?: (item: T) => boolean;
874
- /**
875
- * Built-in delete for `resource` mode (ignored if `onDelete` is
876
- * provided): the peek's Delete button opens a confirm dialog, then calls
877
- * `useResource`'s `remove` with the row's `getKey` (when supplied) or its
878
- * `id` — which invalidates the list — and closes the peek. A failure shows
879
- * in the dialog.
880
- */
881
- allowDelete?: boolean;
882
- /**
883
- * Confirm before deleting. Defaults to `true` for `allowDelete` and
884
- * `false` for `onDelete` (which keeps its old, unconfirmed behaviour).
885
- * Pass an object to set the dialog's copy.
886
- */
887
- confirmDelete?: boolean | ResourceDeleteConfirmCopy<T>;
888
- /** Called after a confirmed or built-in delete succeeds — e.g. a toast. */
889
- onDeleted?: (item: T) => void;
890
- /**
891
- * Extra header actions beyond the create button, in one overflow menu.
892
- * See {@link PageHeaderAction} — the budget is one primary, the rest here.
893
- */
894
- secondaryActions?: PageHeaderAction[];
895
- /** Enable built-in create form (ignored if onCreate callback is provided). */
896
- allowCreate?: boolean;
897
- /** Enable built-in edit form (ignored if onEdit callback is provided). */
898
- allowEdit?: boolean;
899
- /** Field definitions for the built-in form. */
900
- formFields?: ResourceFormFieldDef[];
901
- /** Custom form renderer — receives form instance and resolved fields. */
902
- renderForm?: (form: UseFormReturn<Record<string, unknown>>, fields: ResourceFormFieldDef[]) => ReactNode;
903
- /** Form presentation mode. Default "standard". */
904
- formMode?: "standard" | "wizard";
905
- /** Wizard step definitions. Required when formMode is "wizard". */
906
- formSteps?: WizardStep[];
907
- /** Layout mode for the built-in form container. If not set, defaults to sheet for edit, dialog for create. */
908
- formLayout?: "dialog" | "sheet" | "page";
909
- bulkActions?: Array<{
910
- label: string;
911
- icon?: LucideIcon;
912
- variant?: "default" | "destructive";
913
- onAction: (ids: string[]) => void | Promise<void>;
914
- /**
915
- * Forwarded straight to the rendered bulk button (see `BulkAction`).
916
- * Exists so a consumer can kill every bulk action while one of them is
917
- * in flight — an early return inside `onAction` blocks the second call
918
- * but leaves the button looking live, which misstates what it will do.
919
- */
920
- disabled?: boolean;
921
- /** `data-testid` on the rendered bulk button, so e2e can drive it. */
922
- testId?: string;
923
- }>;
924
- /**
925
- * Override the default card renderer used for grid view (and, absent a
926
- * dedicated list layout, list view too — DataGrid falls back to the same
927
- * renderer there). ResourcePage still owns data-fetching, filtering,
928
- * sorting, and layout (grid columns, infinite-scroll batching, stagger
929
- * animation) — this only swaps what's rendered inside each item slot.
930
- *
931
- * Receives `ResourceCardActions`: the row's `update`/`remove`/`refetch`
932
- * plus `open()` to activate the row (opening the configured detail
933
- * panel/modal/route). Row activation is *not* applied automatically to a
934
- * custom card — wrapping it would double-fire against cards that bring
935
- * their own click handling and would hijack clicks on nested buttons — so
936
- * call `actions.open()` from wherever your card should activate.
937
- */
938
- renderCard?: (item: T, index: number, actions: ResourceCardActions<T>) => ReactNode;
939
- /**
940
- * Replace the built-in `DataTable` that table view renders, keeping every
941
- * other piece of the page — header, counts, view settings, filters,
942
- * bulk bar, detail panel, form, pager — exactly as it is. The counterpart
943
- * to `renderCard`, which does the same for grid and list view.
944
- *
945
- * Receives the rows for the current view, which in server-controlled mode
946
- * is precisely the page the server returned. Ownership is total: row
947
- * click-through, selection, density, column visibility and resizing are
948
- * all things the built-in table wires for you and a custom table must
949
- * wire for itself. That is the trade this prop makes, and it is why
950
- * `renderCard` remains the lighter option when only the *cells* need to
951
- * change — a `ResourceColumnDef.render` is lighter still.
952
- *
953
- * Omitted, the default `DataTable` render is used unchanged.
954
- */
955
- renderTable?: (items: T[]) => ReactNode;
956
- /**
957
- * With a custom `renderCard`: make each whole card (and list row) one
958
- * keyboard-reachable button that opens the detail, so the card needs no
959
- * `actions.open()` wiring and no hand-rolled `div role="button"`. Links and
960
- * buttons inside the card keep their own clicks. Off by default, because
961
- * an existing card that already calls `open()` would fire it twice.
962
- */
963
- openOnCardClick?: boolean;
964
- /**
965
- * Tailwind grid-column classes for the card grid, passed through to
966
- * `DataGrid`'s `gridCols` — e.g. `"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"`.
967
- * Defaults to DataGrid's own responsive 1/2/3/4-column ramp.
968
- */
969
- gridCols?: string;
970
- /**
971
- * Built-in list keyboard navigation via `useKeyboardNavigation`: j/k (or
972
- * Arrow Up/Down) move a focus cursor, Enter opens the focused item,
973
- * Backspace (⌫) closes an open detail view, and x toggles the focused
974
- * item's selection when `bulkActions` are configured. Set to `false` to
975
- * opt out.
976
- *
977
- * Default-on, and scoped so that being on by default stays safe:
978
- * - Only while the grid or list view is showing. Table view keeps its own
979
- * independent sort/pagination, so a flat focus index can't reliably map
980
- * onto its visible rows.
981
- * - Cursor keys suspend while a detail panel/modal or the built-in form
982
- * is open, so they can't drive the list behind the overlay; ⌫ stays
983
- * live there so it can close it.
984
- * - Backspace is only intercepted while there's an open detail to close.
985
- * - Modified chords (Ctrl/Cmd/Alt) are never captured, so an app's
986
- * Cmd+K-style shortcuts keep working.
987
- */
988
- keyboardNavigation?: boolean;
989
- toolbar?: ReactNode;
990
- /** The empty state's action, e.g. the create button. */
991
- emptyState?: ReactNode;
992
- /** The empty state's icon. */
993
- emptyIcon?: LucideIcon;
994
- /** The empty state's title, e.g. "No tasks yet". Default "No results found". */
995
- emptyMessage?: string;
996
- /** A sentence under the empty-state title — forwarded to `DataPageShell`. */
997
- emptyDescription?: string;
998
- /**
999
- * `"page"` (default) renders the full header with the title. `"toolbar"`
1000
- * keeps the header's actions (count, view toggle, settings, create) and
1001
- * drops the title block — for a list inside a tab or card whose page
1002
- * already has the heading. See `DataPageShell`'s `header`.
1003
- */
1004
- header?: "page" | "toolbar";
1005
- /**
1006
- * Imperative navigation used only when `detail="route"` (navigates to
1007
- * `/{resource}/{id}` on row click). Defaults to a full-page navigation.
1008
- * Router consumers pass their navigate fn — e.g. RR `useNavigate()` or
1009
- * Next `router.push`.
1010
- */
1011
- onNavigate?: NavigateFn;
1012
- resourceOptions?: UseResourceOptions<T>;
1013
- /**
1014
- * The view shown until the user picks one with the view toggle. Default
1015
- * `"table"`. Pass `{ mobile: "grid", desktop: "table" }` for cards on
1016
- * phones and a table on desktops. Only an explicit pick is persisted, so
1017
- * the responsive default stays responsive until the user chooses.
1018
- */
1019
- defaultView?: ViewModeDefault;
1020
- /**
1021
- * Persist key for density / page size via `useViewSettings`.
1022
- * Defaults to `resource` or a slug of `title`.
1023
- */
1024
- viewSettingsKey?: string;
1025
- /**
1026
- * The interior parts `ResourcePage` composes, by name. Replace one with your
1027
- * own component, or pass `null` to eject it entirely — see
1028
- * {@link ResourcePageSlots}.
1029
- *
1030
- * This is the reason a surface that needs one part to differ does not have
1031
- * to drop to the primitives and re-derive the pagination, selection and
1032
- * detail wiring that were already correct.
1033
- */
1034
- slots?: ResourcePageSlots<T>;
1035
- /** Extra props merged into a part you are KEEPING. Wins over ours. */
1036
- slotProps?: ResourcePageSlotProps<T>;
1037
- /** Merged onto the page shell's root. */
1038
- className?: string;
1039
- }
1040
- declare function ResourcePage<T extends Record<string, unknown> = Record<string, unknown>>(props: ResourcePageProps<T>): React.JSX.Element;
1041
-
1042
126
  interface ResourceDetailPageProps<T extends BaseRecord = BaseRecord> {
1043
127
  /** Resource name, resolved through the mounted `DataProvider`. */
1044
128
  resource: string;
@@ -1118,6 +202,15 @@ interface ResourceDetailPageProps<T extends BaseRecord = BaseRecord> {
1118
202
  */
1119
203
  declare function ResourceDetailPage<T extends BaseRecord = BaseRecord>({ resource, id, titleField, subtitleField, select, breadcrumb, actions, sidebar, children, className, testID, }: ResourceDetailPageProps<T>): React.JSX.Element;
1120
204
 
205
+ /**
206
+ * The undo toast for an `undoable` write (core's `onUndoable`): a sonner
207
+ * toast with an Undo button, shown for as long as the undo is offered.
208
+ * Needs a mounted `<Toaster />`.
209
+ */
210
+ declare function showUndoToast(write: UndoableWrite): void;
211
+ /** The default error report for writes that fail after the form has closed. */
212
+ declare function showWriteErrorToast(error: Error): void;
213
+
1121
214
  interface RelationFieldProps {
1122
215
  field: ResourceFormFieldDef;
1123
216
  value: string;
@@ -1183,4 +276,4 @@ declare const AppShell: typeof AppShell$1;
1183
276
  */
1184
277
  declare const PageHeader: typeof PageHeader$1;
1185
278
 
1186
- export { AppShell, BadgeCell, type BulkAction, type ColumnStatus, ConfirmDeleteDialog, type ConfirmDeleteDialogProps, 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, type ResourceDeleteConfirmCopy, ResourceDetailPage, type ResourceDetailPageProps, ResourceForm, type ResourceFormProps, ResourcePage, type ResourcePageProps, type ResourcePageSlotMap, type ResourcePageSlotProps, type ResourcePageSlots, type SavedViewItem, SlotPropsFor, Slots, StatCard, type StatCardColor, type StatCardProps, type StatusChipOption, type StatusChipsVariant, ViewMode, ViewModeDefault, WizardForm };
279
+ export { AppShell, BadgeCell, type ColumnStatus, CurrencyCell, DataList, type DataListProps, DateCell, FieldArrayRenderer, FileUploadField, KanbanBoard, type KanbanBoardProps, type KanbanColumn, LinkComponent, NumberCell, PageHeader, RelationField, ResourceDetailPage, type ResourceDetailPageProps, StatCard, type StatCardColor, type StatCardProps, WizardForm, showUndoToast, showWriteErrorToast };