gridsmith-ui 0.31.1 → 0.33.0

package/CHANGELOG.md

@@ -1,6 +1,83 @@
 # gridsmith-ui changelog
 
-## Unreleased (0.31.1)
+## 0.33.0 — 22 October 2026
+
+A dashboard its people arrange (Sprint 32): a new entry, `gridsmith-ui/dashboard`, whose widgets are dragged, sized and added from a widget library, with a keyboard way and a plain-click way for every drag; a chart in a widget fills it; a chart's frame takes its own actions; and a hook that gives the theme's colours to anything that can't read CSS variables, such as a map.
+
+**Added.**
+- **`gridsmith-ui/dashboard`:** `DashboardGrid` (widgets in a reading order on 12 columns, arranged in an edit mode the page enters on purpose: a move handle, a ⋯ menu with Set up, Move and Size, and a resize grip beside each widget, never inside it; the keyboard moves and resizes on the grid's own state; every move and size has a menu way; a polite live region says each one by the widget's name), `DashboardItem` (one widget, around one titled frame), `DashboardPalette` (the widget library: each kind one row, a button named "Add" and its name, that a click, Enter or Space adds at the end and a pointer drags onto the grid; a drag cancelled by Escape adds nothing, and Escape then closes nothing around it; a row is drawn unavailable while the grid isn't editing; a line above the list says what a row does, "Select or drag to add", or "Select a widget to add it" where the rows don't drag, and `hint` gives other words or `false` none), `DashboardEditor` (the drag a palette and a grid share) and `useDraftHistory` (a draft held whole until Save, with undo and redo, Ctrl+Z and ⌘Z outside text fields). On the optional peers `@dnd-kit/core` and `@dnd-kit/utilities` alone. A widget is at least three columns wide and two rows tall; below 40rem of its own width the grid stacks in the same order, and dragging and resizing are off there.
+- **The layout's helpers in `gridsmith-ui/utils`** (safe on a server): `normaliseLayout`, `moveItem`, `resizeItem`, `addItem`, `removeItem`, and the `DashboardLayout` types.
+- **ChartContainer's `actions`:** the page's own slot in the chart's header, beside the Chart / Table switch, for a link to the report behind the chart. Drawn with a `title`.
+- **`useThemeColors(ref, names)`:** the theme's colours as hex (`#rrggbbaa` when see-through), read where an element sits and again when a `data-mode` changes, for anything that takes colours rather than CSS (a map's style, a canvas).
+- **An AsidePanel a page draws docks beside the content column,** where AppShell's aside slot is, and stays in the page's tree (a dashboard editor's widget library inside its DashboardEditor).
+
+**Changed.**
+- **A page header's actions wrap when they don't fit:** in every variant, actions that don't fit beside a title of about eight characters (or all of a shorter title) go under it and wrap among themselves, so nothing runs off a phone's screen (a date range and a button ran off a 430 px phone). The eight characters are the title's own: a back button, an avatar or the collapsed bar's last crumb beside it adds its width, and a badge goes under the title before the title would be cut shorter. Where they fit, the header draws as before.
+- **An icon Button follows the size around it:** `size="icon"` draws at the small size where the controls around it are small (a minimal or collapsed page header, a filters row, a pane's heading, a TableToolbar) and at the large size where they're large, as a Button with no size does, so a header's ⋯ menu matches the buttons beside it. `icon-xs`, `icon-sm` and `icon-lg` keep their own size.
+- **A Button with `aria-disabled` looks and acts unavailable:** it draws as a disabled one (a busy one keeps its spinner's look) and ignores its press, while it stays a Tab stop and keeps focus, which `disabled` doesn't.
+- **One AsidePanel is open at a time in a shell,** whatever its side or form: opening one closes any other through its own `onClose`, so the one opened last wins (opening a page's own panel collapses an open assistant, its conversation kept; opening the assistant again closes the page's panel).
+- **A chart's header wraps when its title would be squeezed:** under about 240 px of frame, the Chart / Table switch (and the page's actions) go to the line below the title, at its end. A header whose title fits draws as before.
+- **A StatsCard's value steps down in size to fit its card** (from the 2xl size to xl, then lg, never smaller), and in a card under about 13rem it sits under the icon tile, across the card, so a long figure never runs into the tile.
+- **A Sparkline is a picture:** it's no longer an unnamed Tab stop; with no `aria-label` it's hidden from screen readers (the stat beside it says what it shows), and with one it's an image of that name. Its hover values are for a pointer only.
+- **In a dashboard's widget only** (nothing changes elsewhere): a chart fills the widget, except a sideways bar chart or a funnel, which keeps a row per name and scrolls, and no chart goes below the small chart height; a titled Table keeps its table form and scrolls sideways; a note, a table or a stat taller than its widget scrolls in its frame, a Tab stop only while it scrolls.
+
+### Upgrade note for agents (0.32.0 → 0.33.0)
+
+`^0.32.0` doesn't take 0.33.0: install it with `npm install gridsmith-ui@^0.33.0`. A dashboard its people arrange also needs `npm install @dnd-kit/core @dnd-kit/utilities` (an app with a KanbanBoard has them). What to check:
+- **Side panels.** Only one AsidePanel is open at a time: a page that opens its own panel while the assistant is open sees the assistant close (through its `onClose`, so the Launcher comes back). A page's own AsidePanel is drawn in the page now (it docks beside the content column); keep the app-wide assistant's in AppShell's `aside` slot.
+- **Stats and charts.** A narrow StatsCard draws its value smaller, and under the icon in a very narrow card; a chart's switch goes under a squeezed title. Nothing to change; check a screenshot test that pinned either.
+- **Sparklines** are no longer Tab stops: a test that tabbed to one, or read its hover values by keyboard, changes.
+- **Page headers.** Actions too wide to sit beside the title now go under it and wrap, mostly on a phone; a short title keeps them beside it wherever both fit, and a badge goes under a squeezed title. Nothing to change, but a screenshot test of a narrow header with several actions changes.
+- **Small icon buttons.** `size="icon"` in a small row (a minimal or collapsed page header, a TableToolbar's actions, a filters row, a pane's heading) now draws small, as the buttons beside it do; one that passed `icon-sm` there to match can keep it. A screenshot test of such a row changes.
+- **`aria-disabled` Buttons** now look unavailable and ignore their press: a page's own `aria-disabled:` classes and its check in `onClick` can go. A page that ran something on a press while `aria-disabled` (to say why it's unavailable) says why beside the Button or in its tooltip instead.
+- **A fixed dashboard** stays as it is; `get_component_api('DashboardGrid')` gives the composition for one its people arrange.
+
+## 0.32.0 — 20 October 2026
+
+What the owner's look review of 19 October found (Sprint 25.33): charts with no textures and no worked-out sentence on show, a bulk-action bar that floats, tables that pin only while they scroll, chips as wide as their words, panes that pad what they hold, and the rail's selected item in the accent.
+
+**Added.**
+- **`patterns`** on LineChart, AreaChart, BarChart, CompositeChart, RadarChart, PieChart and RadialBarChart: each series after the first takes a mark of its own besides its colour (below, under Changed).
+- **Badge's and Tag's `width`:** a set of them takes one width, their text centred; a label too long for it is cut short, its whole text on hover.
+- **ScrollArea's `flush`:** content at the edge, for content that insets itself.
+- **SplitView's `detailFlush`:** the detail pane adds no inset, for one full-bleed piece: a conversation with its composer, a preview or an editor.
+
+**Changed.**
+- **Charts tell their series apart by colour and the key, with no textures or dashes by default.** Since 0.31.0 every series after the first drew a pattern or a dash. Bars, slices, areas and radial bars are now solid, and lines and outlines unbroken. `patterns` on LineChart, AreaChart, BarChart, CompositeChart, RadarChart, PieChart and RadialBarChart brings the marks back, in the legend and the tooltip too, for print or a team that needs series told apart without colour: colour and a key alone don't meet WCAG 1.4.1. Whatever `patterns` says, a line the page marks `dashed` keeps its dash, a series whose colour comes round again (a seventh) keeps its mark, ScatterChart keeps its symbols, and a forecast, a target line and a band keep their look.
+- **Parts that touch are 2 px apart.** A pie's slices and a funnel's stages are edged in the card's colour, and a stack's segments stop 2 px short of the next, the parts either side of zero too, so solid parts in neighbouring colours stay apart, with no white seam on a dark card. A pie of one slice draws no edge, so no seam runs from its centre.
+- **A chart's worked-out sentence is off the drawing.** The sentence a chart works out from its data showed above every drawing. A screen reader now hears it with the drawing, and the Table view shows it above the table. It says less: what the chart measures, over what, and the main trend of its first series (or of a stack's total, where its parts share a sign) with its one extreme, or, by name, the highest and the lowest; a bar and line chart whose bars stack reads the bars' total; a funnel keeps its carry-through, and a radial chart its highest and lowest. Values that read the same are said once, parts tied for the largest are named together, and a value axis titled with a unit alone ("£", "%") isn't taken for the measure.
+- **`description` is the chart's subtitle.** It replaced the worked-out sentence; it's now the page's own few words shown under the chart's title in both views, a container's fixed area included, and read before the worked-out sentence, which stays. A blank one is none.
+- **BulkActionBar floats at the foot of the page.** Written above a table, it pushed the page down as a row was selected (65 px in the review). It's now drawn over the content at the foot of the shell's content column, centred and as wide as what it holds, so selecting moves nothing; in a Drawer or a Dialog it floats at the foot of the body, above the footer, and outside the shell at the foot of the window. While it shows, the shell's content column, a pane, a Drawer or a Dialog keeps room under its last row, so the last rows scroll clear of it and keyboard focus stops short of it (a page outside the shell keeps none), and a row ticked from the keyboard at the foot of the view scrolls clear as the bar comes up. Two bars in one of them stack. Toasts at the bottom rise above it at every width, and on a phone it sits above the bottom tabs. It takes its bearing from where it's written as it appears and leaves nothing there, so a spaced stack round the table doesn't move either. When a keyboard press takes the bar away (an action that clears the selection, at once or once the server answers, Clear selection, or a confirmation the bar opened), focus goes to the table's select-all (on a phone, the first card's box), as it did above the table, or with none to find, where Tab would go on from where the bar is written. A click on the bar, or the user moving on meanwhile, leaves focus where it is; a confirmation the bar opened gives focus back as any dialog does, to the select-all once the bar has gone with the selection. The count is said through the ToastProvider's polite region as the selection changes ("3 selected"). It's one Tab stop, reached after the page's content, and the arrow keys, Home and End move between its controls (the APG's toolbar). In a host too narrow for its buttons its actions are one Actions menu, as on a phone.
+- **Badges and tags are as wide as what they say.** In a grid or a flex column they stretched to the column (a log's level badges went 337 px wide on a phone). `width` gives a set of them one width.
+- **A table pins its columns only while it scrolls sideways, in the colour of the cells beside them.** A table that fitted its frame still drew its pinned column in a second colour, and on a see-through theme the pinned column turned solid. Pinned cells now take the row's own surface, at its own opacity, over a solid ground.
+- **An icon-only column keeps its header for a screen reader, off screen.** A Table column whose every cell is icon buttons or links (an Actions column) drew its header over a column of icons. The header is now visually hidden and still read. A sortable header is never hidden, and a column where any cell shows text, or holds a checkbox, a switch, a rating, an image or a status icon, keeps its header drawn: it names what each cell shows or sets.
+- **The selected item of a vertical tab rail or a TreeView is a shade of the accent.** It took the tab strip's surface fill, which vanished on a surface. It now takes the sidebar's recipe, the 10% accent tint under the rail: `--ds-nav-v-active-bg` and `--ds-tree-active-bg` default to `var(--ds-accent-subtle)`.
+- **A ScrollArea's content starts 4 px inside its edges,** so a focus ring or a shadow at the edge isn't cut. `flush` keeps content at the edge, for content that insets itself, as the Sidebar's navigation does. A horizontal Timeline keeps 4 px inside its edges too, its first marker included once it has snapped.
+- **A form's reading width is for its fields.** FormWrapper held every row to the reading width, so a drop zone in a form didn't fill it. A FileUpload, RichTextEditor, TransferList, DataGrid or Table now fills the form's width, in a Field too, and the buttons of a form holding one end where it does. A `max-w-*` class on FormWrapper is the form's own width, and its rows take it, as `fullWidth` does. A row's or a Field's own `max-w-*` class wins over the reading width, a Field keeps the reading width inside a wider row, and a form with no wide control keeps its own width, so `mx-auto` centres it.
+- **A SplitView's panes pad what they hold, unless it runs edge to edge.** Both panes were flush, so a tree, a form or text in a pane sat at its edge, and pages padded some panes and not others. The list pane now pads at the sidebar's inset (8 px at the sides, 12 px above and below), and is flush once it holds a list or a board: a StackedList, Table, DataGrid, VirtualizedList, KanbanBoard, Gantt or CardGrid, at any depth. It stays flush through an empty result or a reload, so a search row of the page's own above the list, which insets itself, doesn't move. The detail pane pads at the page's gutter, 20 px above and below, and `detailFlush` makes it flush. A pane's heading (SectionHeading variant="pane") placed first is inset once, its rule reaching the pane's edges, and a tree's chevrons line up with it. On a phone the stacked panes pad the same way.
+- **On a phone, a SplitView framed as the page runs edge to edge.** A page-frame SplitView that spans its PageContainer's column, with nothing between them that draws or clips, drops its side edges and corners on a phone, and its text lines up with the page's title. A board on the canvas keeps its place until an item opens over it.
+
+**Fixed.**
+- **A bar chart's forecast bars start at `forecastFrom` when a row before it has no value.** The fainter, outlined look was keyed on the bars as drawn, which skip a row with no value, so it started a bar late.
+- **A forecast's name never crosses the line where it starts.** On a band narrower than its name (a forecast of the last month), "So far this month" was drawn across the dotted line that starts the band. It now ends at that line, beside the band, inside the plot.
+- **A date drawn with its time, or a relative time, stays whole in a Table.** RelativeTime's "18 Sept 2026, 17:30" wrapped its year onto a line of its own. A column of dates with a time of day, or of relative times ("3 hours ago", "yesterday"), now keeps each on one line, as a column of dates does, and a cell's full date for a screen reader no longer stops its column reading as dates.
+
+**Known limit.**
+- **In `layout="multi-column"`, a column that scrolls on its own keeps no room under the bulk-action bar,** so its last rows can sit under the bar. Give that column's foot room of its own while rows are selected. The other layouts keep it.
+
+### Upgrade note for agents (0.31.1 → 0.32.0)
+
+`^0.31.0` doesn't take 0.32.0: install it with `npm install gridsmith-ui@^0.32.0`, then regenerate gridsmith-tokens.css (get_tokens), so a rail's selected item takes the accent tint. What to check:
+- **Charts.** Series are solid, told apart by colour and the key. Pass `patterns` where a team must tell series apart without colour (WCAG 1.4.1, print). A chart's `description` is now a subtitle on show: keep it to a few words, or remove a long sentence the page wrote. A chart's title says what the chart is in fixed words, never a finding, and never one worked out from the data.
+- **BulkActionBar.** Write it after the list it acts on, in no box of your own: remove a fixed or sticky wrapper (gs:bulk-bar-placed-by-page warns). It's drawn in the shell's layer, outside the page's container, so a test that looked for it beside its table finds it in `[data-bulk-bar-layer]`. It's reached by Tab after the page's content, and its count is announced by the ToastProvider's polite region.
+- **Panes.** In a pane that pads, remove padding from what you pass to it (gs:container-content-padded warns); in a list pane that holds a list or a board, which is flush, a search or filter row above the list keeps its own inset. Pass `detailFlush` for a conversation, a preview or an editor, and put a pane's heading first in it, unwrapped (gs:splitview-pane-heading-padded). An inbox-style page that pads its own detail is padded twice until it does.
+- **Hand-built selected rows.** A row of your own that drew its selected state with `--ds-tab-active-bg` takes `--ds-nav-v-active-bg`, its text `--ds-nav-v-active-text` and any secondary text `--ds-nav-v-active-muted`, the tokens a StackedList's selected row and the rail take, which follow the theme.
+- **Badges and tags** are as wide as their words: give a set `width` for one width, or a `w-full` class for one that fills.
+- **Tables.** A table that fits its frame pins nothing, and pinned cells match their row. An icon-only column's header is off screen and still read.
+- **ScrollArea.** Its content starts 4 px in: pass `flush` for content that insets itself.
+- **FormWrapper.** A drop zone, an editor, a TransferList or a table fills the form's width; a `max-w-*` class on FormWrapper is the form's own width.
+
+## 0.31.1 — 18 October 2026
 
 **Fixed.**
 - **A closed Collapsible is out of the Tab order.** Its content was only out of sight, so a keyboard Tabbed into fields no one could see, and focus vanished: an event form's "More options" held its Location and Description. Closed, the content is now `inert`, out of the Tab order and the accessibility tree. Focus inside it when it closes goes back to its trigger; with no trigger that takes focus (the page's own button opens it, or the trigger is plain text), to the control before it, else the nearest place the page still holds. When a form sends focus to a field in a closed section (its only error, or an error summary's link), the section opens first, and the field takes focus in view.

package/README.md

@@ -35,6 +35,7 @@ npm install @tiptap/react @tiptap/pm @tiptap/starter-kit lowlight \
 npm install @tiptap/extension-mention@<v> @tiptap/suggestion@<v>  # gridsmith-ui/editor-mentions: <v> is your @tiptap/core version (npm ls @tiptap/core)
 npm install react-markdown remark-gfm                            # gridsmith-ui/chat
 npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities   # gridsmith-ui/kanban
+npm install @dnd-kit/core @dnd-kit/utilities                     # gridsmith-ui/dashboard
 npm install @tanstack/react-table                                # gridsmith-ui/data-grid
 npm install @tanstack/react-virtual                              # gridsmith-ui/virtualized
 npm install react-resizable-panels                               # gridsmith-ui/resizable
@@ -102,11 +103,12 @@ Every entry but `gridsmith-ui/utils` is client code, each file opening with `"us
 | `gridsmith-ui/editor-mentions` | `useMentions`, @mentions for `RichTextEditor` (requires `@tiptap/extension-mention` and `@tiptap/suggestion` at your other tiptap packages' version) |
 | `gridsmith-ui/chat` | `MarkdownContent` for chat replies; pass it to `ChatMessageList`'s `renderContent` (requires `react-markdown` + `remark-gfm`) |
 | `gridsmith-ui/kanban` | `KanbanBoard` (requires `@dnd-kit/*`) |
+| `gridsmith-ui/dashboard` | `DashboardGrid`, `DashboardItem`, `DashboardPalette`, `DashboardEditor` and `useDraftHistory`: a dashboard its people arrange (requires `@dnd-kit/core` and `@dnd-kit/utilities`) |
 | `gridsmith-ui/data-grid` | `DataGrid` (requires `@tanstack/react-table`) |
 | `gridsmith-ui/virtualized` | `VirtualizedList` (requires `@tanstack/react-virtual`) |
 | `gridsmith-ui/resizable` | `ResizablePanelGroup`, `ResizablePanel`, `ResizableHandle`, `SplitView` (requires `react-resizable-panels`) |
 | `gridsmith-ui/icons` | `Icon`, `IconProvider`, `preloadPack`, `registerIconPack` — 5 icon packs with two-phase loading |
-| `gridsmith-ui/utils` | `cn()` — className merge utility (clsx + tailwind-merge) — the shared focus styles (`FOCUS_RING` and its kin) for an element of your own that takes focus, and the helpers server code calls: the repeat rules, calendar days and date ranges, time zones, a chart's label kind, and `requestLocale()` for a request's locale. Nothing in it needs React or a browser |
+| `gridsmith-ui/utils` | `cn()` — className merge utility (clsx + tailwind-merge) — the shared focus styles (`FOCUS_RING` and its kin) for an element of your own that takes focus, and the helpers server code calls: the repeat rules, calendar days and date ranges, time zones, a chart's label kind, a dashboard's layout (`moveItem`, `resizeItem`, `addItem`, `removeItem`, `normaliseLayout`), and `requestLocale()` for a request's locale. Nothing in it needs React or a browser |
 | `gridsmith-ui/roots.css` | CSS custom property engine |
 | `gridsmith-ui/tokens.css` | Default preset token values |
 | `gridsmith-ui/tailwind.css` | Tailwind v4 `@theme` bindings for `--ds-*` tokens |
@@ -166,7 +168,7 @@ Wrap your app in `<IconProvider>` to select a pack:
 | `recharts` | Optional (required for `gridsmith-ui/charts`) |
 | `@tiptap/*`, `lowlight` | Optional (required for `gridsmith-ui/editor`). The mention packages for `gridsmith-ui/editor-mentions` aren't declared: install them at your `@tiptap/core` version, as tiptap's packages must all be one version |
 | `react-markdown`, `remark-gfm` | Optional (required for `gridsmith-ui/chat`) |
-| `@dnd-kit/*` | Optional (required for `gridsmith-ui/kanban`) |
+| `@dnd-kit/*` | Optional (required for `gridsmith-ui/kanban`; `@dnd-kit/core` and `@dnd-kit/utilities` alone for `gridsmith-ui/dashboard`) |
 | `@tanstack/react-table` | Optional (required for `gridsmith-ui/data-grid`) |
 | `@tanstack/react-virtual` | Optional (required for `gridsmith-ui/virtualized`) |
 | `react-resizable-panels` | Optional (required for `gridsmith-ui/resizable`) |

package/dist/charts.d.ts

@@ -3,10 +3,19 @@ import { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
- * What a chart says besides its drawing (Sprint 25.8.9 items 4, 25, 26 and 27): its values as a table and a sentence of
- * what it shows, each worked out from the chart's own props, so they stay true as the data changes. The sentence is a
- * line on the page and the table one switch away, so a reader who can't see the colours, or can't see at all, gets the
- * same as one who can (charts-6, charts-7, WCAG 1.4.1 and 1.1.1).
+ * What a chart says besides its drawing (Sprint 25.8.9 items 4, 25, 26 and 27): its values as a table and a summary of
+ * what it shows, each worked out from the chart's own props, so they stay true as the data changes. The summary is the
+ * chart's description for a screen reader, and shows as a line above the table in the Table view, one switch away for
+ * everyone (charts-6, charts-7, WCAG 1.4.1 and 1.1.1; data_visualisation#34, #35).
+ *
+ * Sprint 25.33 A2: a summary, never a list of every series. Per kind of chart:
+ * - over time: the measure (its series' names, else the value axis's title), the period from first to last, the main
+ *   trend and its one extreme;
+ * - by name: the measure, how many categories, the highest and the lowest;
+ * - parts of a whole: how many parts, the largest and its share (a funnel: what share of the first stage reaches the last);
+ * - a scatter chart: what's plotted against what, and how many points;
+ * - a Sankey chart: how many flows, and the largest.
+ * What the chart marks across its plot (a target, a range, where a forecast runs) is said after it.
  *
  * Pure: each chart builds its own from the page's data, read by named fields, never from the copies it draws with
  * (Sprint 25.29 item 14), so a row's own fields never reach the table's cells.
@@ -105,8 +114,10 @@ interface BarChartProps {
     "aria-label"?: string;
     className?: string;
     /**
-     * What the chart shows, in the page's words: a line above the drawing, in place of the sentence the chart works out
-     * from its data (each series' highest and lowest, or its trend over dates), which it shows without one.
+     * What the chart shows, in the page's own few words: the chart's subtitle, shown in both views, and read with the
+     * drawing before the summary the chart works out from its data (the measure, how many categories or which period, and
+     * the highest and lowest or the main trend). The summary is for a screen reader, and shows above the table in the
+     * Table view.
      */
     description?: string;
     /** Targets or limits across the bars: a line at `value`, or a band from `value` to `to`, each named by its `label`. */
@@ -119,12 +130,19 @@ interface BarChartProps {
      */
     forecastFrom?: string | number;
     forecastLabel?: string;
+    /**
+     * A pattern over the colour of each series after the first, in the legend and the tooltip too, for print or a team
+     * that needs series told apart without colour. Off by default: series are told apart by their colour and the key. A
+     * series whose colour comes round again (a seventh) has its pattern either way.
+     */
+    patterns?: boolean;
 }
 declare const BarChart: react.ForwardRefExoticComponent<BarChartProps & react.RefAttributes<HTMLDivElement>>;
 
 interface LineDef {
     dataKey: string;
     label?: string;
+    /** The page's own dashed line, a dash no other line has: kept whatever the chart's `patterns` says. */
     dashed?: boolean;
 }
 interface LineChartProps {
@@ -157,8 +175,9 @@ interface LineChartProps {
     "aria-label"?: string;
     className?: string;
     /**
-     * What the chart shows, in the page's words: a line above the drawing, in place of the sentence the chart works out
-     * from its data (its series' trends and highest points), which it shows without one.
+     * What the chart shows, in the page's own few words: the chart's subtitle, shown in both views, and read with the
+     * drawing before the summary the chart works out from its data (the measure, the period, and the first series' main
+     * trend and its one extreme). The summary is for a screen reader, and shows above the table in the Table view.
      */
     description?: string;
     /** Targets or limits across the plot: a line at `value`, or a band from `value` to `to`, each named by its `label`. */
@@ -166,11 +185,17 @@ interface LineChartProps {
     /**
      * The first category whose values are a forecast (its `xAxisKey` value): from there a pale hatched band, named by
      * `forecastLabel` ("Forecast" without one), runs to the chart's end, after a dashed line where it starts, and each line
-     * keeps its own colour and mark through it. A period not yet over is marked the same
+     * keeps its own colour and dash through it. A period not yet over is marked the same
      * way, with the page's own words ("So far this month").
      */
     forecastFrom?: string | number;
     forecastLabel?: string;
+    /**
+     * A dash of its own on each line after the first, in the legend and the tooltip too, for print or a team that needs
+     * lines told apart without colour. Off by default: lines are solid, told apart by their colour and the key. A line the
+     * page marks `dashed`, and a line whose colour comes round again (a seventh), are dashed either way.
+     */
+    patterns?: boolean;
 }
 declare const LineChart: react.ForwardRefExoticComponent<LineChartProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -209,8 +234,10 @@ interface AreaChartProps {
     "aria-label"?: string;
     className?: string;
     /**
-     * What the chart shows, in the page's words: a line above the drawing, in place of the sentence the chart works out
-     * from its data (its series' trends and highest points), which it shows without one.
+     * What the chart shows, in the page's own few words: the chart's subtitle, shown in both views, and read with the
+     * drawing before the summary the chart works out from its data (the measure, the period, and the main trend, of the
+     * first series or of the stack's total, with its one extreme). The summary is for a screen reader, and shows above the
+     * table in the Table view.
      */
     description?: string;
     /** Targets or limits across the plot: a line at `value`, or a band from `value` to `to`, each named by its `label`. */
@@ -218,11 +245,17 @@ interface AreaChartProps {
     /**
      * The first category whose values are a forecast (its `xAxisKey` value): from there a pale hatched band, named by
      * `forecastLabel` ("Forecast" without one), runs to the chart's end, after a dashed line where it starts, and each area
-     * keeps its own colour and mark through it. A period not yet over is marked the same
+     * keeps its own colour and outline through it. A period not yet over is marked the same
      * way, with the page's own words ("So far this month").
      */
     forecastFrom?: string | number;
     forecastLabel?: string;
+    /**
+     * A dash of its own on the outline of each area after the first, in the legend and the tooltip too, for print or a
+     * team that needs areas told apart without colour. Off by default: outlines are solid, the areas told apart by their
+     * colour and the key. An area whose colour comes round again (a seventh) is dashed either way.
+     */
+    patterns?: boolean;
 }
 declare const AreaChart: react.ForwardRefExoticComponent<AreaChartProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -242,10 +275,17 @@ interface PieChartProps {
     "aria-label"?: string;
     className?: string;
     /**
-     * What the chart shows, in the page's words: a line above the drawing, in place of the sentence the chart works out
-     * from its parts (the largest and the smallest, with their shares), which it shows without one.
+     * What the chart shows, in the page's own few words: the chart's subtitle, shown in both views, and read with the
+     * drawing before the summary the chart works out from its parts (how many, and the largest with its share). The
+     * summary is for a screen reader, and shows above the table in the Table view.
      */
     description?: string;
+    /**
+     * A pattern over the colour of each slice after the first, in the legend and the tooltip too, for print or a team that
+     * needs slices told apart without colour. Off by default: slices are told apart by their colour and the key, with a
+     * gap in the card's colour between them. A slice whose colour comes round again (a seventh) has its pattern either way.
+     */
+    patterns?: boolean;
 }
 declare const PieChart: react.ForwardRefExoticComponent<PieChartProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -303,8 +343,9 @@ interface CompositeChartProps {
     "aria-label"?: string;
     className?: string;
     /**
-     * What the chart shows, in the page's words: a line above the drawing, in place of the sentence the chart works out
-     * from its data, which it shows without one.
+     * What the chart shows, in the page's own few words: the chart's subtitle, shown in both views, and read with the
+     * drawing before the summary the chart works out from its data (the measure, the period and the first series' main
+     * trend). The summary is for a screen reader, and shows above the table in the Table view.
      */
     description?: string;
     /** Targets or limits on the bars' axis: a line at `value`, or a band from `value` to `to`, each named by its `label`. */
@@ -312,10 +353,17 @@ interface CompositeChartProps {
     /**
      * The first category whose values are a forecast (its `xAxisKey` value): from there each bar draws fainter in a dashed
      * outline of its own colour, in a pale hatched band named by `forecastLabel` ("Forecast" without one) that runs to the
-     * chart's end, after a dashed line where it starts; the lines keep their own colour and mark through it.
+     * chart's end, after a dashed line where it starts; the lines keep their own colour and dash through it.
      */
     forecastFrom?: string | number;
     forecastLabel?: string;
+    /**
+     * A pattern over the colour of each bar series after the first, and a dash on each line after the first, in the legend
+     * and the tooltip too, for print or a team that needs series told apart without colour. Off by default: series are
+     * told apart by their colour and the key, and bars from lines by their form. A line the page marks `dashed`, and a
+     * series whose colour comes round again (a seventh), keep their mark either way.
+     */
+    patterns?: boolean;
 }
 declare const CompositeChart: react.ForwardRefExoticComponent<CompositeChartProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -348,8 +396,9 @@ interface ScatterChartProps {
     "aria-label"?: string;
     className?: string;
     /**
-     * What the chart shows, in the page's words: a line above the drawing, in place of the sentence the chart works out
-     * from its points (how many, and the range of each value), which it shows without one.
+     * What the chart shows, in the page's own few words: the chart's subtitle, shown in both views, and read with the
+     * drawing before the summary the chart works out from its points (what's plotted against what, and how many points).
+     * The summary is for a screen reader, and shows above the table in the Table view.
      */
     description?: string;
 }
@@ -375,10 +424,17 @@ interface RadarChartProps {
     "aria-label"?: string;
     className?: string;
     /**
-     * What the chart shows, in the page's words: a line above the drawing, in place of the sentence the chart works out
-     * from its data (each series' highest and lowest), which it shows without one.
+     * What the chart shows, in the page's own few words: the chart's subtitle, shown in both views, and read with the
+     * drawing before the summary the chart works out from its data (the measure, how many categories, and the first
+     * series' highest and lowest). The summary is for a screen reader, and shows above the table in the Table view.
      */
     description?: string;
+    /**
+     * A dash of its own on the outline of each shape after the first, in the legend and the tooltip too, for print or a
+     * team that needs shapes told apart without colour. Off by default: outlines are solid, the shapes told apart by their
+     * colour and the key. A shape whose colour comes round again (a seventh) is dashed either way.
+     */
+    patterns?: boolean;
 }
 declare const RadarChart: react.ForwardRefExoticComponent<RadarChartProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -400,10 +456,17 @@ interface RadialBarChartProps {
     "aria-label"?: string;
     className?: string;
     /**
-     * What the chart shows, in the page's words: a line above the drawing, in place of the sentence the chart works out
-     * from its data, which it shows without one.
+     * What the chart shows, in the page's own few words: the chart's subtitle, shown in both views, and read with the
+     * drawing before the summary the chart works out from its data (how many bars, the highest and the lowest). The
+     * summary is for a screen reader, and shows above the table in the Table view.
      */
     description?: string;
+    /**
+     * A pattern over the colour of each bar after the first, in the legend and the tooltip too, for print or a team that
+     * needs bars told apart without colour. Off by default: bars are told apart by their colour and the key. A bar whose
+     * colour comes round again (a seventh) has its pattern either way.
+     */
+    patterns?: boolean;
 }
 declare const RadialBarChart: react.ForwardRefExoticComponent<RadialBarChartProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -423,8 +486,9 @@ interface FunnelChartProps {
     "aria-label"?: string;
     className?: string;
     /**
-     * What the chart shows, in the page's words: a line above the drawing, in place of the sentence the chart works out
-     * from its data, which it shows without one.
+     * What the chart shows, in the page's own few words: the chart's subtitle, shown in both views, and read with the
+     * drawing before the summary the chart works out from its data (its stages, from the first to the last, and the share
+     * of the first that reaches the last). The summary is for a screen reader, and shows above the table in the Table view.
      */
     description?: string;
 }
@@ -445,8 +509,9 @@ interface TreemapChartProps {
     "aria-label"?: string;
     className?: string;
     /**
-     * What the chart shows, in the page's words: a line above the drawing, in place of the sentence the chart works out
-     * from its data, which it shows without one.
+     * What the chart shows, in the page's own few words: the chart's subtitle, shown in both views, and read with the
+     * drawing before the summary the chart works out from its data (how many tiles in how many groups, and the largest with
+     * its share). The summary is for a screen reader, and shows above the table in the Table view.
      */
     description?: string;
 }
@@ -470,8 +535,9 @@ interface SankeyChartProps {
     "aria-label"?: string;
     className?: string;
     /**
-     * What the chart shows, in the page's words: a line above the drawing, in place of the sentence the chart works out
-     * from its data, which it shows without one.
+     * What the chart shows, in the page's own few words: the chart's subtitle, shown in both views, and read with the
+     * drawing before the summary the chart works out from its data (how many flows, and the largest). The summary is for a
+     * screen reader, and shows above the table in the Table view.
      */
     description?: string;
 }
@@ -497,10 +563,24 @@ interface ChartContainerProps {
      * sideways bars and funnels, two wide to one high for charts over dates or numbers, square for round charts — and in
      * a row its frame matches the tallest block while the chart grows only to its bound.
      * A preset (sm, md, lg) or a number of px sets this chart's height instead, and beats the chart's own.
+     * In a widget on a dashboard its people arrange (DashboardGrid), the widget's height decides: the chart fills the
+     * widget the person sized, a sideways bar chart or a funnel keeping a row per name and scrolling, and no chart going
+     * below the small height. Nothing is passed for it.
      */
     height?: "auto" | "sm" | "md" | "lg" | number;
-    /** The insight, as a heading (h3) in the card-title style, never cut. The chart's graphic is named by it. */
+    /**
+     * What the chart is, in fixed words ("Revenue and expenses by month"): it may name the record or period it's about
+     * ("Hours by person, Apollo project", "Revenue, 2026"), never a finding, and is never worked out from the data, since
+     * a finding changes as the data does (the owner's rule, 19 October; data_visualisation#3). A heading (h3) in the
+     * card-title style, never cut; the chart's graphic is named by it.
+     */
     title?: string;
+    /**
+     * The page's own actions for the chart, in its header: a link to the report behind it ("Open report"), as a Table's
+     * or a CardHeader's actions. They sit before the chart's Chart / Table switch, which keeps the header's end, so a
+     * row of charts shows its switches in one place. Needs `title`: the actions belong to the header the title heads.
+     */
+    actions?: ReactNode;
     loading?: boolean;
     emptyState?: ReactNode;
     /** "default" is a card surface. "ghost" drops surface, border, shadow and padding for charts embedded in another container. */
@@ -508,7 +588,7 @@ interface ChartContainerProps {
     children: ReactNode;
     className?: string;
 }
-declare function ChartContainer({ height, title, loading, emptyState, variant, children, className, }: ChartContainerProps): react_jsx_runtime.JSX.Element;
+declare function ChartContainer({ height, title, actions: pageActions, loading, emptyState, variant, children, className, }: ChartContainerProps): react_jsx_runtime.JSX.Element;
 
 /**
  * The theme's chart series colours, `count` of them in series order (repeating past the palette's length), read from the