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