gridsmith-ui 0.21.0 → 0.23.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 (48) hide show
  1. package/dist/chat.js +3 -3
  2. package/dist/chunk-3BRQRKDO.js +72 -0
  3. package/dist/chunk-3BRQRKDO.js.map +1 -0
  4. package/dist/{chunk-GGVASDXT.js → chunk-6PL7FXYH.js} +284 -521
  5. package/dist/chunk-6PL7FXYH.js.map +1 -0
  6. package/dist/chunk-7TOJ4G7S.js +197 -0
  7. package/dist/chunk-7TOJ4G7S.js.map +1 -0
  8. package/dist/chunk-CKWITUSH.js +40 -0
  9. package/dist/chunk-CKWITUSH.js.map +1 -0
  10. package/dist/{chunk-ILIODA7W.js → chunk-CXMV7SXJ.js} +4 -3
  11. package/dist/chunk-CXMV7SXJ.js.map +1 -0
  12. package/dist/{chunk-EQDR57AM.js → chunk-EYMGLK4M.js} +3 -3
  13. package/dist/{chunk-EQDR57AM.js.map → chunk-EYMGLK4M.js.map} +1 -1
  14. package/dist/chunk-ICNWPNMM.js +1363 -0
  15. package/dist/chunk-ICNWPNMM.js.map +1 -0
  16. package/dist/chunk-IVCVNAXG.js +115 -0
  17. package/dist/chunk-IVCVNAXG.js.map +1 -0
  18. package/dist/{chunk-XYDIBW3J.js → chunk-SBTBMAIU.js} +4 -3
  19. package/dist/chunk-SBTBMAIU.js.map +1 -0
  20. package/dist/data-grid.d.ts +38 -4
  21. package/dist/data-grid.js +305 -264
  22. package/dist/data-grid.js.map +1 -1
  23. package/dist/editor.js +10 -3
  24. package/dist/editor.js.map +1 -1
  25. package/dist/index.d.ts +122 -146
  26. package/dist/index.js +1091 -1885
  27. package/dist/index.js.map +1 -1
  28. package/dist/kanban.js +4 -2
  29. package/dist/kanban.js.map +1 -1
  30. package/dist/resizable.d.ts +1 -1
  31. package/dist/resizable.js +26 -14
  32. package/dist/resizable.js.map +1 -1
  33. package/dist/roots.css +24 -4
  34. package/dist/{table-utils-GounRE6s.d.ts → table-utils-BkjNEWts.d.ts} +5 -1
  35. package/dist/tokens.css +20 -3
  36. package/dist/use-pagination-DiJo0aW5.d.ts +153 -0
  37. package/dist/virtualized.d.ts +11 -1
  38. package/dist/virtualized.js +69 -18
  39. package/dist/virtualized.js.map +1 -1
  40. package/dist-static/tokens.css +20 -3
  41. package/package.json +1 -1
  42. package/dist/chunk-GGVASDXT.js.map +0 -1
  43. package/dist/chunk-ILIODA7W.js.map +0 -1
  44. package/dist/chunk-JN37OVTP.js +0 -67
  45. package/dist/chunk-JN37OVTP.js.map +0 -1
  46. package/dist/chunk-TKVTZWBN.js +0 -50
  47. package/dist/chunk-TKVTZWBN.js.map +0 -1
  48. package/dist/chunk-XYDIBW3J.js.map +0 -1
package/dist/index.d.ts CHANGED
@@ -2,8 +2,10 @@ import * as react from 'react';
2
2
  import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, LabelHTMLAttributes, TextareaHTMLAttributes, Ref, ReactElement, CSSProperties, HTMLAttributes, RefObject, KeyboardEvent, AnchorHTMLAttributes, ComponentType } from 'react';
3
3
  import * as react_jsx_runtime from 'react/jsx-runtime';
4
4
  import { IconName } from './icons.js';
5
- import { C as ColumnKind, B as BreakpointKey } from './table-utils-GounRE6s.js';
6
- export { a as BreakpointWidthProvider, u as useBreakpoint } from './table-utils-GounRE6s.js';
5
+ import { C as ColumnKind, B as BreakpointKey } from './table-utils-BkjNEWts.js';
6
+ export { a as BreakpointWidthProvider, u as useBreakpoint } from './table-utils-BkjNEWts.js';
7
+ import { P as Pager, A as AppShellPreferences } from './use-pagination-DiJo0aW5.js';
8
+ export { a as PaginationOptions, b as PreferencesContext, R as ResolvedPreferences, p as preferenceActionKey, u as usePagination, c as usePreferences } from './use-pagination-DiJo0aW5.js';
7
9
 
8
10
  type ButtonVariant = "default" | "secondary" | "tertiary" | "outline" | "ghost" | "destructive" | "success" | "warning" | "link";
9
11
  type ButtonSize = "xs" | "sm" | "md" | "lg" | "icon-xs" | "icon-sm" | "icon" | "icon-lg";
@@ -685,13 +687,20 @@ interface CardProps extends HTMLAttributes<HTMLDivElement> {
685
687
  }
686
688
  declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
687
689
  interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
690
+ /**
691
+ * The header's badges and buttons, in one slot. A badge sits beside the title (D1a); a button, like the ⋯, at the
692
+ * row's end. A header holds a status badge and at most one action or the ⋯ menu (data_display#35).
693
+ */
688
694
  actions?: ReactNode;
689
695
  icon?: IconName;
690
696
  menuItems?: DropdownMenuEntry[];
691
697
  }
692
698
  declare const CardHeader: react.ForwardRefExoticComponent<CardHeaderProps & react.RefAttributes<HTMLDivElement>>;
693
699
  interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
694
- /** Max lines before clamping (with the full title on hover). Default 2, like CardDescription; 1 truncates on one line; 0 = no limit. */
700
+ /**
701
+ * Max lines before clamping (with the full title on hover). Default 2, like CardDescription, and 1 in a CardHeader's
702
+ * row, where the title truncates beside its badge and the ⋯ (Sprint 25.13 A1); 0 = no limit.
703
+ */
695
704
  lines?: number;
696
705
  }
697
706
  declare const CardTitle: react.ForwardRefExoticComponent<CardTitleProps & react.RefAttributes<HTMLHeadingElement>>;
@@ -734,7 +743,13 @@ interface DataListProps {
734
743
  declare function DataList({ items, columns, className }: DataListProps): react_jsx_runtime.JSX.Element;
735
744
 
736
745
  interface CardGridProps extends HTMLAttributes<HTMLDivElement> {
737
- /** The narrowest a card may be, as a CSS length. The grid takes as many columns as fit at it. Default "14rem". */
746
+ /**
747
+ * The narrowest a card may be, as a CSS length; the grid takes as many columns as fit at it. By default a collection
748
+ * reads it from its cards' headers (Sprint 25.13 A2): about 20rem when a header is given `actions` (a badge or a
749
+ * button besides the ⋯), so a name shows beside them, and 14rem otherwise (a file grid keeps its smaller cards). A comparison keeps
750
+ * 14rem whatever its headers hold, so its plans stay side by side (D29). Pass one when the cards need their own:
751
+ * the width at which the longest title you expect still shows beside what its header holds.
752
+ */
738
753
  minWidth?: string;
739
754
  /** The most cards in a row, however wide the grid is. Default 4. A comparison (`compare`) takes all its cards instead. */
740
755
  maxColumns?: number;
@@ -751,6 +766,13 @@ interface CardGridProps extends HTMLAttributes<HTMLDivElement> {
751
766
  * the gap is this prop, never a `gap-*` class (which would leave the columns measured for another gap).
752
767
  */
753
768
  gap?: string;
769
+ /**
770
+ * A collection whose cards all fit on one row fills it (Sprint 25.13 A32, the owner's R28-61: a short row "looks odd
771
+ * like a fourth card was supposed to be there"): they share the row equally, and a lone card takes at most half. A
772
+ * grid of more rows keeps its columns. Default on; pass false for a collection whose count changes (a filter, a
773
+ * pager's last page), so its cards don't change size as the results change.
774
+ */
775
+ fill?: boolean;
754
776
  children: ReactNode;
755
777
  ref?: Ref<HTMLDivElement>;
756
778
  }
@@ -770,7 +792,7 @@ interface CardGridProps extends HTMLAttributes<HTMLDivElement> {
770
792
  * share three rows (header, content, footer), so their parts line up; a child that is not a Card fills its three rows
771
793
  * without lining anything up.
772
794
  */
773
- declare function CardGrid({ minWidth, maxColumns, compare, gap, className, style, children, ref, ...props }: CardGridProps): react_jsx_runtime.JSX.Element;
795
+ declare function CardGrid({ minWidth, maxColumns, compare, gap, fill, className, style, children, ref, ...props }: CardGridProps): react_jsx_runtime.JSX.Element;
774
796
 
775
797
  interface DescriptionItem {
776
798
  label: string;
@@ -826,11 +848,26 @@ interface AccordionProps {
826
848
  }
827
849
  declare function Accordion({ items, type, defaultOpen, open: controlledOpen, onOpenChange, className }: AccordionProps): react_jsx_runtime.JSX.Element;
828
850
 
851
+ /** A row: a value or an element for each column's key, and any fields of the page's own (an `id`, say). */
852
+ type TableRow = Record<string, string | number | ReactNode>;
829
853
  interface Column {
830
854
  key: string;
831
855
  header: string;
832
856
  align?: "left" | "center" | "right";
833
857
  sortable?: boolean;
858
+ /**
859
+ * What the column sorts by, when its cells don't say (Sprint 25.13 A3): a column of elements (an avatar beside a name,
860
+ * a badge, a time) gives each row's name, number or date here, `sortValue: (row) => row.actorName`, and a column of
861
+ * sizes gives bytes. Without it a sortable column sorts by the cell itself, which works for text and numbers; a cell
862
+ * that is an element can't be compared, and the column warns in development (data_display#1).
863
+ */
864
+ sortValue?: (row: TableRow) => string | number | Date | null | undefined;
865
+ /**
866
+ * Keep the column in view while the table scrolls sideways (Sprint 25.13 A35): "end" for the row's actions, pinned on
867
+ * the right; "start" for the row's name, drawn first and pinned beside the selection while it leaves room. Without a
868
+ * "start" column, the first column is the row's name.
869
+ */
870
+ pin?: "start" | "end";
834
871
  /** Opt-in text truncation. true = 1 line, or { lines: N } for multi-line clamp before truncating. */
835
872
  truncate?: boolean | {
836
873
  lines: number;
@@ -851,25 +888,58 @@ type SortDir = "asc" | "desc" | null;
851
888
  type TableDensity = "default" | "compact";
852
889
  interface TableProps {
853
890
  columns: Column[];
854
- data: Record<string, string | number | ReactNode>[];
891
+ /** Every row. With `pager`, the whole list: the table sorts all of it and draws the pager's part (A3). */
892
+ data: TableRow[];
855
893
  className?: string;
856
894
  sortable?: boolean;
857
895
  sortKey?: string | null;
858
896
  sortDir?: SortDir;
859
897
  onSortChange?: (key: string | null, dir: SortDir) => void;
860
898
  selectable?: boolean;
899
+ /** The selected rows, as indexes into `data`, which a sort or a new page never changes. */
861
900
  selectedRows?: number[];
862
901
  onSelectionChange?: (rows: number[]) => void;
863
902
  expandable?: boolean;
864
- renderExpanded?: (row: Record<string, string | number | ReactNode>, index: number) => ReactNode;
903
+ /** A row's panel, under it when it's open; `index` is the row's index in `data`. */
904
+ renderExpanded?: (row: TableRow, index: number) => ReactNode;
905
+ /**
906
+ * The field that names a row (default `id`, Sprint 25.13 A46): open rows are kept by it, so a sort, a filter or a
907
+ * new page never moves them. A row with no such field is named by its index in `data`.
908
+ */
909
+ rowKey?: string;
910
+ /**
911
+ * The open rows, by the field `rowKey` names (A46), controlled with `onExpandedChange`. A record's address opens its
912
+ * row, `expandedRows={id ? [id] : []}`: the row is brought into view, and with a pager its page comes up.
913
+ */
914
+ expandedRows?: Array<string | number>;
915
+ /** The rows open at first, when the table keeps its own (A46). */
916
+ defaultExpandedRows?: Array<string | number>;
917
+ onExpandedChange?: (rows: Array<string | number>) => void;
865
918
  density?: TableDensity;
866
919
  stickyHeader?: boolean;
867
920
  striped?: boolean;
868
921
  loading?: boolean;
869
922
  emptyState?: ReactNode;
870
- onRowClick?: (row: Record<string, string | number | ReactNode>, index: number) => void;
871
- /** Breakpoint at which the table switches to card layout. Defaults to "md" (768px). */
923
+ /**
924
+ * A click on a row, or Enter or Space on it: the page decides what opens. Without it an expandable row opens with a
925
+ * click anywhere on it (P33). A click on a control inside the row stays that control's (A45).
926
+ */
927
+ onRowClick?: (row: TableRow, index: number) => void;
928
+ /** The screen width below which the table shows cards: the project's responsive.tableToCardsBreakpoint, else "md". */
872
929
  mobileBreakpoint?: BreakpointKey;
930
+ /**
931
+ * The table's own width below which it shows cards (Sprint 25.13 A35), in px: about a phone's by default, so a table
932
+ * in a pane, a drawer or a dialog stays a table, scrolling sideways, until its space is a phone's. 0 never switches by
933
+ * width; a narrow screen still does.
934
+ */
935
+ cardsBelow?: number;
936
+ /**
937
+ * The list's pager (Sprint 25.13 A3), from `usePagination(rows)` over the same rows as `data`: the table sorts every
938
+ * row, draws the pager's part (a page, or every page loaded so far) and, beneath it, the control in the project's
939
+ * style. A new sort starts again at page 1. Give TableToolbar the same pager for the count, and draw no <Pagination>
940
+ * of your own.
941
+ */
942
+ pager?: Pager<unknown>;
873
943
  /**
874
944
  * The table's title inside its frame (Sprint 25.9, A1): a heading in CardTitle's style at CardHeader's inset, in a band
875
945
  * above the scroll area that never scrolls sideways, and the `<table>`'s name. Title a table this way or with a
@@ -890,7 +960,7 @@ interface TableProps {
890
960
  "aria-label"?: string;
891
961
  ref?: Ref<HTMLDivElement>;
892
962
  }
893
- declare function Table({ columns, data, className, sortable, sortKey: controlledSortKey, sortDir: controlledSortDir, onSortChange, selectable, selectedRows, onSelectionChange, expandable, renderExpanded, density, stickyHeader, striped, loading, emptyState, onRowClick, mobileBreakpoint: mobileBreakpointProp, title, description, actions, "aria-label": ariaLabel, ref, }: TableProps): react_jsx_runtime.JSX.Element;
963
+ declare function Table({ columns: columnsProp, data, className, sortable, sortKey: controlledSortKey, sortDir: controlledSortDir, onSortChange, selectable, selectedRows, onSelectionChange, expandable, renderExpanded, rowKey, expandedRows: expandedRowsProp, defaultExpandedRows, onExpandedChange, density, stickyHeader, striped, loading, emptyState, onRowClick, mobileBreakpoint: mobileBreakpointProp, cardsBelow, pager, title, description, actions, "aria-label": ariaLabel, ref, }: TableProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
894
964
 
895
965
  interface CalendarEvent {
896
966
  id: string;
@@ -990,6 +1060,10 @@ interface AvatarGroupItem {
990
1060
  initials?: string;
991
1061
  src?: string;
992
1062
  alt?: string;
1063
+ /**
1064
+ * @deprecated Ignored: a group draws no status (the owner, 30 September 2026: dots on overlapping avatars read as
1065
+ * broken). Show someone's status with a single Avatar.
1066
+ */
993
1067
  status?: AvatarStatus;
994
1068
  color?: AvatarColor;
995
1069
  }
@@ -1007,7 +1081,8 @@ interface AvatarGroupProps {
1007
1081
  /**
1008
1082
  * Overlapping row of avatars with a "+N" counter for the rest. Use for
1009
1083
  * members, assignees, participants — anywhere several people share one
1010
- * slot. Do not hand-roll this with -space-x and ring classes.
1084
+ * slot. Do not hand-roll this with -space-x and ring classes. A group shows
1085
+ * no status; a single Avatar does.
1011
1086
  */
1012
1087
  declare function AvatarGroup({ items, max, size, ring, onOverflowClick, className }: AvatarGroupProps): react_jsx_runtime.JSX.Element;
1013
1088
 
@@ -1161,8 +1236,13 @@ interface TimelineProps {
1161
1236
  minItemWidth?: number;
1162
1237
  className?: string;
1163
1238
  ref?: Ref<HTMLDivElement>;
1239
+ /**
1240
+ * The list's pager (Sprint 25.13 A3), from `usePagination(items)` over the same items: the timeline draws the pager's
1241
+ * part of every item and, beneath it, the control in the project's style. Draw no <Pagination> of your own.
1242
+ */
1243
+ pager?: Pager<unknown>;
1164
1244
  }
1165
- declare function Timeline({ items, orientation, minItemWidth, className, ref }: TimelineProps): react_jsx_runtime.JSX.Element;
1245
+ declare function Timeline({ items: allItems, orientation, minItemWidth, className, ref, pager }: TimelineProps): react_jsx_runtime.JSX.Element;
1166
1246
 
1167
1247
  interface CodeBlockProps {
1168
1248
  code: string;
@@ -1475,6 +1555,11 @@ interface StackedListProps {
1475
1555
  flush?: boolean;
1476
1556
  /** @deprecated Sprint 25.4: use variant="articles" (hover="title") — the default variant tints the row. */
1477
1557
  hover?: "tint" | "title";
1558
+ /**
1559
+ * The list's pager (Sprint 25.13 A3), from `usePagination(items)` over the same items: the list draws the pager's
1560
+ * part of every item and, beneath it, the control in the project's style. Draw no <Pagination> of your own.
1561
+ */
1562
+ pager?: Pager<unknown>;
1478
1563
  }
1479
1564
  declare const StackedList: react.ForwardRefExoticComponent<StackedListProps & react.RefAttributes<HTMLUListElement>>;
1480
1565
 
@@ -2238,6 +2323,8 @@ interface PaginationProps {
2238
2323
  /** The Load more button's label (default "Load more"). */
2239
2324
  loadMoreLabel?: string;
2240
2325
  className?: string;
2326
+ /** Set by `usePagination` in `pager.props`: which list the control belongs to (Sprint 25.13 A3). */
2327
+ pagerToken?: object;
2241
2328
  }
2242
2329
  declare function Pagination(props: PaginationProps): react_jsx_runtime.JSX.Element;
2243
2330
 
@@ -2408,6 +2495,11 @@ interface PageHeaderProps {
2408
2495
  onBack?: () => void;
2409
2496
  actions?: ReactNode;
2410
2497
  avatar?: ReactNode;
2498
+ /**
2499
+ * Controls that filter the page (Dropdown, DatePicker, SegmentedControl, Input), in one row at the small size; a text
2500
+ * field takes a search field's width, not a line of its own. On a bold colourful header the row sits on a strip drawn
2501
+ * as the cards are, that hugs its controls, as the tab row does.
2502
+ */
2411
2503
  filters?: ReactNode;
2412
2504
  bannerImage?: string;
2413
2505
  as?: HeadingLevel;
@@ -2529,12 +2621,12 @@ interface NavMenuProps {
2529
2621
  items: NavMenuItem[];
2530
2622
  /** Whether any child route is currently active (highlights the trigger) */
2531
2623
  active?: boolean;
2532
- /** Matches the parent Navbar type for consistent styling (`default` is the deprecated name for `tint`) */
2624
+ /** The navbar's style; by default the one the Navbar gives its items (`default` is the deprecated name for `tint`) */
2533
2625
  type?: NavbarType;
2534
2626
  onItemClick?: (item: NavMenuItem) => void;
2535
2627
  className?: string;
2536
2628
  }
2537
- declare function NavMenu({ label, items, active, type, onItemClick, className, }: NavMenuProps): react_jsx_runtime.JSX.Element;
2629
+ declare function NavMenu({ label, items, active, type: typeProp, onItemClick, className, }: NavMenuProps): react_jsx_runtime.JSX.Element;
2538
2630
 
2539
2631
  /** Mirrors NavbarType. `default` is the deprecated pre-20.8 name for `tint`. */
2540
2632
  type MobileHeaderMenuType = "tint" | "underline" | "minimal" | "pill" | "default";
@@ -2585,6 +2677,7 @@ interface DrawerProps {
2585
2677
  open: boolean;
2586
2678
  onClose: () => void;
2587
2679
  position?: "left" | "right" | "bottom";
2680
+ /** Pass none: the Drawer takes the app's width, which the shell carries (AppShell's drawerWidth, 520 px by default; 400 px outside a shell). For a deliberate wide or narrow drawer only. A non-modal side panel (modal={false}, such as the shell's assistant) keeps the width it is given. */
2588
2681
  width?: string;
2589
2682
  title?: ReactNode;
2590
2683
  children: ReactNode;
@@ -2609,7 +2702,8 @@ interface DrawerProps {
2609
2702
  * Default true. false makes the drawer a persistent, non-modal panel the user works alongside
2610
2703
  * (an assistant, help): no backdrop, no scroll lock, no focus trap — the page stays operable.
2611
2704
  * It closes only on Escape while focus is inside it, its close control, or onClose from the
2612
- * consumer; an outside click does nothing. At phone width the Sheet is always modal.
2705
+ * consumer; an outside click does nothing. At phone width the sheet it becomes is modal: a backdrop, the focus trap,
2706
+ * the scroll lock and Escape from anywhere, and focus moves in if the window narrows while it is open.
2613
2707
  */
2614
2708
  modal?: boolean;
2615
2709
  /**
@@ -2727,8 +2821,6 @@ interface SheetProps {
2727
2821
  title?: ReactNode;
2728
2822
  children: ReactNode;
2729
2823
  footer?: ReactNode;
2730
- /** A strip between the content and the footer (the Drawer's unsaved-changes question). */
2731
- confirm?: ReactNode;
2732
2824
  /**
2733
2825
  * The content has unsaved changes: every close path — Escape, the backdrop, dragging it down, the close control and a
2734
2826
  * FormWrapper's Cancel — asks before discarding them, inside the sheet, as a Drawer and a Dialog do (the review of
@@ -2750,7 +2842,11 @@ interface SheetProps {
2750
2842
  /** id of the element that names the dialog when no title is rendered. */
2751
2843
  labelledBy?: string;
2752
2844
  }
2753
- declare function Sheet({ open, onClose: onCloseProp, title, children, footer, confirm, dirty, onDiscard, snapPoints, container, flush, keepMounted, id, labelledBy }: SheetProps): react.ReactPortal | null;
2845
+ /**
2846
+ * A bottom sheet with snap heights. It is the Drawer's phone form, drawn by the same panel (Sprint 25.14 A50), so a
2847
+ * sheet and a drawer share their inset, their drag and their focus handling.
2848
+ */
2849
+ declare function Sheet({ open, onClose: onCloseProp, title, children, footer, dirty, onDiscard, snapPoints, container, flush, keepMounted, id, labelledBy }: SheetProps): react_jsx_runtime.JSX.Element;
2754
2850
 
2755
2851
  interface Notification {
2756
2852
  id: string;
@@ -2979,71 +3075,6 @@ interface ScrollAreaProps {
2979
3075
  }
2980
3076
  declare function ScrollArea({ children, className, orientation, maxHeight, maxWidth, }: ScrollAreaProps): react_jsx_runtime.JSX.Element;
2981
3077
 
2982
- type PreferenceValidationTiming = "onBlur" | "onSubmit" | "onChange";
2983
- type PreferenceBreakpoint = "sm" | "md" | "lg";
2984
- type PreferenceEmptyStyle = "illustration-cta" | "text-cta" | "redirect";
2985
- type PreferenceLoadingStyle = "skeleton" | "spinner" | "progress-bar";
2986
- type PreferenceDestructiveMode = "dialog" | "undo";
2987
- /** dataDisplay.paginationStyle — how a long list shows more: page numbers, a Load more button, or loading as the user scrolls. */
2988
- type PreferencePaginationStyle = "pagination" | "load-more" | "infinite-scroll";
2989
- interface AppShellPreferences {
2990
- /** forms.validationTiming — when a field first shows its error. */
2991
- validationTiming?: PreferenceValidationTiming;
2992
- /** forms.actions — where a form's buttons sit and how they align. */
2993
- formActions?: {
2994
- align?: "start" | "end";
2995
- placement?: "auto" | "inline";
2996
- };
2997
- /** dataDisplay.itemsPerPage — the page size of a paged or load-more list. */
2998
- itemsPerPage?: number;
2999
- /** dataDisplay.paginationStyle — page numbers, a Load more button, or loading on scroll; usePagination and Pagination follow it (round 22). */
3000
- paginationStyle?: PreferencePaginationStyle;
3001
- /** responsive.tableToCardsBreakpoint — below this width a Table becomes stacked cards. */
3002
- tableToCardsBreakpoint?: PreferenceBreakpoint;
3003
- /** emptyStates.emptyStyle — illustration with an action, text with an action, or redirect to creation. */
3004
- emptyStyle?: PreferenceEmptyStyle;
3005
- /** emptyStates.loadingStyle — what a page shows while data loads. */
3006
- loadingStyle?: PreferenceLoadingStyle;
3007
- /** destructiveActions.mode — confirm in a dialog, or act now with an Undo toast. */
3008
- destructiveMode?: PreferenceDestructiveMode;
3009
- /** destructiveActions.highSeverityActions — always confirm in a dialog, even in undo mode. */
3010
- highSeverityActions?: string[];
3011
- /** destructiveActions.typeToConfirmActions — the user types the name before the confirm enables. */
3012
- typeToConfirmActions?: string[];
3013
- /** destructiveActions.undoWindowSeconds — how long the Undo toast stays. */
3014
- undoWindowSeconds?: number;
3015
- }
3016
- declare const PreferencesContext: react.Context<AppShellPreferences | null>;
3017
- /** Every preference in force, the shell's value or the house default — what app code reads. */
3018
- interface ResolvedPreferences {
3019
- validationTiming: PreferenceValidationTiming;
3020
- formActions: {
3021
- align: "start" | "end";
3022
- placement: "auto" | "inline";
3023
- };
3024
- itemsPerPage: number;
3025
- paginationStyle: PreferencePaginationStyle;
3026
- tableToCardsBreakpoint: PreferenceBreakpoint;
3027
- emptyStyle: PreferenceEmptyStyle;
3028
- loadingStyle: PreferenceLoadingStyle;
3029
- destructiveMode: PreferenceDestructiveMode;
3030
- highSeverityActions: string[];
3031
- typeToConfirmActions: string[];
3032
- undoWindowSeconds: number;
3033
- }
3034
- /**
3035
- * For app code: every preference in force — the shell's value, else the house default — so a page never writes a
3036
- * fallback of its own. Round 21 (run 58): with every field optional, TypeScript made the builder write
3037
- * `const { itemsPerPage = 20 } = usePreferences()`, a second copy of the preference it then edited by hand when the
3038
- * rule changed. Paged lists use `usePagination`, which reads the page size itself.
3039
- */
3040
- declare function usePreferences(): ResolvedPreferences;
3041
- /**
3042
- * "Remove range" → "remove_range": the key the high-severity and type-to-confirm lists use. The engine's `actionKey`
3043
- * (platform/src/lib/destructive-mode.ts) is the same rule for compliance; a platform test keeps the two identical.
3044
- */
3045
- declare function preferenceActionKey(label: string): string;
3046
-
3047
3078
  interface AppShellContextValue {
3048
3079
  hasSidebar: boolean;
3049
3080
  hasMobileMenu: boolean;
@@ -3102,6 +3133,8 @@ interface AppShellContextValue {
3102
3133
  hasUnsavedChanges: boolean;
3103
3134
  /** Set by useUnsavedChanges; not for pages to call. Returns the release. */
3104
3135
  addUnsavedChanges: () => () => void;
3136
+ /** The width every Drawer in the app takes when it is given none (Sprint 25.14 A24): AppShell's drawerWidth, 520 px by default. */
3137
+ drawerWidth: string;
3105
3138
  }
3106
3139
  /**
3107
3140
  * Focus mode (Sprint 25.7, C1): a task flow the user completes before or outside the app — setup, onboarding,
@@ -3164,6 +3197,11 @@ interface AppShellProps {
3164
3197
  theme?: AppShellTheme;
3165
3198
  /** The customer's UX preferences, passed once by the generated shell so pages and components carry nothing (Sprint 25.6). */
3166
3199
  preferences?: AppShellPreferences;
3200
+ /**
3201
+ * The width of every Drawer in the app that is given none (Sprint 25.14 A24): pages pass no width, so the app's
3202
+ * drawers share one. Default "520px". A Drawer's own width prop still wins, for a deliberate wide or narrow one.
3203
+ */
3204
+ drawerWidth?: string;
3167
3205
  /** The current route's path, so the shell knows which page is home. */
3168
3206
  currentPath?: string;
3169
3207
  /** The home page's path. Default "/". */
@@ -3178,68 +3216,6 @@ interface AppShellProps {
3178
3216
  }
3179
3217
  declare const AppShell: react.ForwardRefExoticComponent<AppShellProps & react.RefAttributes<HTMLDivElement>>;
3180
3218
 
3181
- /**
3182
- * A long list in one hook (round 21; all three list styles since round 22). The page size and the list style are the
3183
- * project's `dataDisplay.itemsPerPage` and `dataDisplay.paginationStyle`, read from the shell, so a mid-build
3184
- * `update_rule` on either reaches every list with no page edited. The page gets what to show, the props for
3185
- * `<Pagination>` — page numbers, a Load more button or loading on scroll, whichever the project's style is — and the
3186
- * numbers the count line needs ("Showing 51–100 of 200 events", or "Showing 40 of 120 members" while a list grows).
3187
- *
3188
- * Run 58 hand-wrote the paging; runs 59 and 60 hand-wrote load-more and scroll loading — an IntersectionObserver, a
3189
- * visible count and a page size copied in as a constant, twice in one app — because the library had no way to.
3190
- *
3191
- * const pager = usePagination(sortedEvents, { resetOn: [sortKey, sortDir] })
3192
- * <TableToolbar resultCount={sortedEvents.length} resultNoun={["event", "events"]} pagination={pager} />
3193
- * <Table columns={columns} data={pager.items.map(toRow)} />
3194
- * <Pagination {...pager.props} />
3195
- */
3196
- interface Pager<T> {
3197
- /** The list style this list follows: the project's, unless `style` was passed. */
3198
- style: PreferencePaginationStyle;
3199
- /** What to show: the current page's rows, or every row loaded so far on a list that grows. */
3200
- items: T[];
3201
- /** The current page, from 1; on a growing list, how many pages are loaded. */
3202
- page: number;
3203
- pageSize: number;
3204
- totalItems: number;
3205
- totalPages: number;
3206
- /** The first and last row numbers on screen, from 1 ("Showing 51–100"); [0, 0] for an empty list. */
3207
- range: [number, number];
3208
- /** How many rows are on screen. */
3209
- shown: number;
3210
- /** Rows left to show: a next page, or more to load. */
3211
- hasMore: boolean;
3212
- /** The next page, or the next `pageSize` rows on a growing list. */
3213
- loadMore: () => void;
3214
- setPage: (page: number) => void;
3215
- /** A page-size selector's choice; it wins over the project's page size and starts again at page 1. */
3216
- setPageSize: (size: number) => void;
3217
- /** Spread onto <Pagination>: it renders page numbers, a Load more button or the scroll trigger, as `style` says. */
3218
- props: {
3219
- currentPage: number;
3220
- totalPages: number;
3221
- onPageChange: (page: number) => void;
3222
- pageSize: number;
3223
- onPageSizeChange: (size: number) => void;
3224
- mode: PreferencePaginationStyle;
3225
- hasMore: boolean;
3226
- onLoadMore: () => void;
3227
- };
3228
- }
3229
- interface PaginationOptions {
3230
- /** A fixed page size for this list, over the project's. Leave it out: the project's page size is the rule. */
3231
- pageSize?: number;
3232
- /** Values that start the list again at page 1 when they change — the sort column and direction, a search query. */
3233
- resetOn?: unknown;
3234
- /**
3235
- * A list style for this list only, over the project's. Leave it out: the project's style is the rule. Passing one that
3236
- * differs is overriding a rule in force — ask the user first, and put `// @gridsmith-override
3237
- * dataDisplay.paginationStyle: <their reason>` above the call.
3238
- */
3239
- style?: PreferencePaginationStyle;
3240
- }
3241
- declare function usePagination<T>(list: readonly T[], options?: PaginationOptions): Pager<T>;
3242
-
3243
3219
  interface DestructiveActionOptions {
3244
3220
  /** The action's key as the preference lists name it ("remove_range"); derived from `title` when omitted. */
3245
3221
  action?: string;
@@ -3434,4 +3410,4 @@ interface UseTextOverflowResult {
3434
3410
  */
3435
3411
  declare function useTextOverflow(options?: UseTextOverflowOptions): UseTextOverflowResult;
3436
3412
 
3437
- export { Accordion, ActionPanel, ActionPanelGroup, AddAnother, type AddAnotherProps, Alert, type AlertPlacement, AppShell, type AppShellContextValue, type AppShellFocus, type AppShellPreferences, type AppShellTheme, AsidePanel, type AsidePanelProps, type AsidePanelSide, Avatar, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarStatus, Badge, type BadgePaletteColor, type BadgeSeverity, type BadgeSize, type BadgeVariant, BottomNav, type BottomNavItem, type BreadcrumbItem$1 as BreadcrumbItem, Breadcrumbs, type BreadcrumbsSeparator, type BreadcrumbsSize, type BreadcrumbsVariant, BreakpointKey, BulkActionBar, Button, ButtonSizeContext, Calendar, type CalendarDay, Card, CardContent, CardDescription, CardFooter, CardGrid, type CardGridProps, CardHeader, type CardSelectType, CardTitle, type CardVariant, Carousel, type ChatMessage, type ChatMessageAction, type ChatMessageLayout, ChatMessageList, type ChatMessageSender, type ChatMessageSource, type ChatMessageStatus, ChatPanel, type ChatPanelProps, type ChatPanelStatusTone, Checkbox, CheckboxGroup, CheckboxGroupItem, CodeBlock, Collapsible, ColorPicker, type Column, Combobox, CommandPalette, ContextMenu, type ControlSize, ControlSizeContext, CornerPanel, type CornerPanelEdge, type CornerPanelProps, DEFAULT_DATE_RANGE_PRESETS, DataList, type DateInput, DatePicker, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DateRangeWords, type DescriptionItem, DescriptionList, type DescriptionListOrientation, type DescriptionListSize, type DestructiveActionHandle, type DestructiveActionOptions, Dialog, Divider, Dock, Drawer, Dropdown, DropdownMenu, type DropdownMenuDivider, type DropdownMenuEntry, type DropdownMenuItem, EmptyState, EntityCell, Field, type FieldControlProps, type FieldLabel, type FieldProps, FileUpload, type FileUploadItem, type FileUploadRequestOptions, type FileUploadStatus, type FitLabelsOptions, type FittedLabel, FormWrapper, Gantt, type GanttGroup, type GanttItem, type GanttProps, type GanttStatus, type GanttTone, type GridKeyboard, type GridKeyboardOptions, HoverCard, InlineFieldError, Input, Kbd, Label, type LabelBox, Launcher, type LauncherEdge, type LauncherProps, type LauncherVariant, type LauncherWhenOpen, Link, type LinkProps, MentionInput, MobileHeaderMenu, type MobileHeaderMenuItemData, type MobileHeaderMenuType, NavItem, type NavItemProps, type NavItemType, NavMenu, type NavMenuItem, Navbar, type NavbarSize, type NavbarType, type NavbarVariant, NotificationCenter, NumberInput, PageContainer, type PageContainerWidth, PageHeader, type PageHeaderBehavior, type PageHeaderIntensity, type PageHeaderProps, type PageHeaderVariant, type Pager, Pagination, type PaginationOptions, PinInput, Popover, PreferencesContext, Progress, type PromiseToastMessages, RadioGroup, Rating, type ResolvedPreferences, ScrollArea, SectionHeading, type SectionHeadingProps, SegmentedControl, SettingsLayout, type SettingsLayoutProps, type SettingsSection, Sheet, Sidebar, type SidebarContextValue, type SidebarItem, SidebarNav, type SidebarNavSize, type SidebarPosition, type SidebarSection, type SidebarType, Skeleton, SkipLink, SliderRange, Spinner, StackedList, type StackedListVariant, StatsCard, StatusDot, type StatusDotVariant, Stepper, TIME_ZOOMS, type Tab, Table, type TableDensity, type TableProps, TableToolbar, type TableToolbarActiveFilter, type TableToolbarFilterOption, Tabs, Tag, TagInput, type TagPaletteColor, type TagVariant, TextOverflow, type TextOverflowProps, Textarea, TimeBar, type TimeBarProps, TimePicker, TimeRow, type TimeRowProps, type TimeScale, TimeScaleHeader, type TimeScaleHeaderProps, type TimeScaleOptions, type TimeTick, TimeViewport, type TimeViewportHandle, type TimeViewportLayout, type TimeViewportProps, type TimeViewportState, type TimeZoom, Timeline, Toast, type ToastAction, type ToastApi, type ToastOptions, type ToastPosition, ToastProvider, type ToastVariant, Toggle, Tooltip, Tour, TransferList, TreeView, type Trend, type UseTextOverflowOptions, type UseTextOverflowResult, dateOfDay, dayOf, endDayOf, fitLabel, fitLabels, formatDateRange, preferenceActionKey, timeExtent, useAppShell, useContentWidth, useDestructiveAction, useFittedLabels, useFormContext, useGridKeyboard, usePagination, usePreferences, useSidebar, useTextMeasure, useTextOverflow, useTimeScale, useTimeViewport, useTimeViewportLayout, useToast, useToastOptional, useUnsavedChanges };
3413
+ export { Accordion, ActionPanel, ActionPanelGroup, AddAnother, type AddAnotherProps, Alert, type AlertPlacement, AppShell, type AppShellContextValue, type AppShellFocus, AppShellPreferences, type AppShellTheme, AsidePanel, type AsidePanelProps, type AsidePanelSide, Avatar, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarStatus, Badge, type BadgePaletteColor, type BadgeSeverity, type BadgeSize, type BadgeVariant, BottomNav, type BottomNavItem, type BreadcrumbItem$1 as BreadcrumbItem, Breadcrumbs, type BreadcrumbsSeparator, type BreadcrumbsSize, type BreadcrumbsVariant, BreakpointKey, BulkActionBar, Button, ButtonSizeContext, Calendar, type CalendarDay, Card, CardContent, CardDescription, CardFooter, CardGrid, type CardGridProps, CardHeader, type CardSelectType, CardTitle, type CardVariant, Carousel, type ChatMessage, type ChatMessageAction, type ChatMessageLayout, ChatMessageList, type ChatMessageSender, type ChatMessageSource, type ChatMessageStatus, ChatPanel, type ChatPanelProps, type ChatPanelStatusTone, Checkbox, CheckboxGroup, CheckboxGroupItem, CodeBlock, Collapsible, ColorPicker, type Column, Combobox, CommandPalette, ContextMenu, type ControlSize, ControlSizeContext, CornerPanel, type CornerPanelEdge, type CornerPanelProps, DEFAULT_DATE_RANGE_PRESETS, DataList, type DateInput, DatePicker, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DateRangeWords, type DescriptionItem, DescriptionList, type DescriptionListOrientation, type DescriptionListSize, type DestructiveActionHandle, type DestructiveActionOptions, Dialog, Divider, Dock, Drawer, Dropdown, DropdownMenu, type DropdownMenuDivider, type DropdownMenuEntry, type DropdownMenuItem, EmptyState, EntityCell, Field, type FieldControlProps, type FieldLabel, type FieldProps, FileUpload, type FileUploadItem, type FileUploadRequestOptions, type FileUploadStatus, type FitLabelsOptions, type FittedLabel, FormWrapper, Gantt, type GanttGroup, type GanttItem, type GanttProps, type GanttStatus, type GanttTone, type GridKeyboard, type GridKeyboardOptions, HoverCard, InlineFieldError, Input, Kbd, Label, type LabelBox, Launcher, type LauncherEdge, type LauncherProps, type LauncherVariant, type LauncherWhenOpen, Link, type LinkProps, MentionInput, MobileHeaderMenu, type MobileHeaderMenuItemData, type MobileHeaderMenuType, NavItem, type NavItemProps, type NavItemType, NavMenu, type NavMenuItem, Navbar, type NavbarSize, type NavbarType, type NavbarVariant, NotificationCenter, NumberInput, PageContainer, type PageContainerWidth, PageHeader, type PageHeaderBehavior, type PageHeaderIntensity, type PageHeaderProps, type PageHeaderVariant, Pager, Pagination, PinInput, Popover, Progress, type PromiseToastMessages, RadioGroup, Rating, ScrollArea, SectionHeading, type SectionHeadingProps, SegmentedControl, SettingsLayout, type SettingsLayoutProps, type SettingsSection, Sheet, Sidebar, type SidebarContextValue, type SidebarItem, SidebarNav, type SidebarNavSize, type SidebarPosition, type SidebarSection, type SidebarType, Skeleton, SkipLink, SliderRange, type SortDir, Spinner, StackedList, type StackedListVariant, StatsCard, StatusDot, type StatusDotVariant, Stepper, TIME_ZOOMS, type Tab, Table, type TableDensity, type TableProps, type TableRow, TableToolbar, type TableToolbarActiveFilter, type TableToolbarFilterOption, Tabs, Tag, TagInput, type TagPaletteColor, type TagVariant, TextOverflow, type TextOverflowProps, Textarea, TimeBar, type TimeBarProps, TimePicker, TimeRow, type TimeRowProps, type TimeScale, TimeScaleHeader, type TimeScaleHeaderProps, type TimeScaleOptions, type TimeTick, TimeViewport, type TimeViewportHandle, type TimeViewportLayout, type TimeViewportProps, type TimeViewportState, type TimeZoom, Timeline, Toast, type ToastAction, type ToastApi, type ToastOptions, type ToastPosition, ToastProvider, type ToastVariant, Toggle, Tooltip, Tour, TransferList, TreeView, type Trend, type UseTextOverflowOptions, type UseTextOverflowResult, dateOfDay, dayOf, endDayOf, fitLabel, fitLabels, formatDateRange, timeExtent, useAppShell, useContentWidth, useDestructiveAction, useFittedLabels, useFormContext, useGridKeyboard, useSidebar, useTextMeasure, useTextOverflow, useTimeScale, useTimeViewport, useTimeViewportLayout, useToast, useToastOptional, useUnsavedChanges };