gridsmith-ui 0.32.0 → 0.33.1

package/CHANGELOG.md

@@ -1,6 +1,69 @@
 # gridsmith-ui changelog
 
-## 0.32.0 — 19 October 2026
+## 0.33.1 — 23 October 2026
+
+What the owner's review of the Map page found in the library (Sprint 32's follow-up): a number field that went 0.1, 0.2, 0.30000000000000004 and took any number of decimals typed, a slider that snapped to the same noise, and a selectable list in a card whose rows didn't line up with the card's title. Its fresh-eyes review added two in Tabs: two on a page could mix up their tabs, and a panel was a Tab stop even when it started with something to reach.
+
+**Added.**
+- **NumberInput's `decimals`:** the places the field takes and always shows ("12.50"), never fewer than its step's, `min`'s or `max`'s own. Money with whole-unit buttons is `decimals={2}` with `step={1}`.
+
+**Fixed.**
+- **A NumberInput keeps the places its value needs.** A step adds and rounds to the step's places (or `min`'s or `max`'s, if they have more), so 0.1 stepped twice is 0.3, shown "0.3", and a held button counts 0.1 at a time. With `allowDecimals` on a whole step a value keeps every digit it has, and a step adds in its own places (0.14 stepped by 1 is 1.14, and 1234567890123 stays exact), as DataGrid's number editor needs. A step's places are read with any exponent (`1e-7` is seven), and a value never shows with one (0.0000001). A negative zero shows as "0", and a missing value as an empty field. A page value with more places than the field shows rounded, and `aria-valuenow` gives that number.
+- **Stepping an empty NumberInput** starts from `min`, or from 0 with no `min`.
+- **A focused NumberInput follows its value when the page changes it** (a map's handle dragged while the field has focus), an empty one too, while its text still shows the value it had: a number half typed stays.
+- **A NumberInput in a Field is described by the Field's hint and error:** it puts the Field's `aria-describedby` and `aria-required` on its input, so a screen reader hears the hint (a field's unit) with the field.
+- **SliderRange snaps to the step's places,** from the pointer and the keys: ArrowRight three times on a 0.1 step is 0.3.
+- **A selectable StackedList in a Card lines up with the Card's title:** its rows' text starts where the header's does, in every preset, and the selection's rail sits in the inset.
+- **Two Tabs on a page keep their tabs apart.** Each Tabs' tabs and panels have ids of their own, so two with a tab of the same id (two "Overview" tabs) no longer share one: the arrow keys move within their own tabs, and each panel is named by its own tab.
+- **A tab panel is a Tab stop of its own only when it needs one** (the Authoring Practices' tab panel): when it holds nothing to reach, or starts with words a Tab would pass by. One that starts with a control, or with a list or a scrolling region that is a stop, takes none, so Tab goes straight there: one press, not two.
+
+**Changed.**
+- **Typing in a NumberInput stops at its places:** a decimal past them isn't taken, as a letter isn't. A step of 0.5 now refuses "0.25"; `decimals={2}` (or a step of 0.01) takes it.
+- **Leaving a NumberInput changes nothing:** what's typed is reported as it's typed, held to the limits, so leaving the field calls no `onChange` and leaves the form unmarked; an empty field left at "-" stays empty, where it took the minimum. A page value outside `min` or `max` is still clamped as the field's own change, as since 0.21.0.
+
+### Upgrade note for agents (0.33.0 → 0.33.1)
+
+`^0.33.0` takes 0.33.1. What to check:
+- **A field with a fractional step that takes finer values** than its step: a step of 0.5 now refuses "0.25". Give it `decimals` with the places it takes.
+- **Money fields:** `decimals={2}` with `step={1}` (pence typed, shown "12.50"). One that passed `allowDecimals` for pence can keep it, or take `decimals={2}` to stop at two places.
+- **Tests that left a NumberInput to commit a value:** leaving it with nothing typed no longer calls `onChange`; type in it or step it instead.
+- **A screenshot test of a selectable list in a Card** changes by a few pixels, the rows' inset.
+- **A test that found a tab or a tab panel by its id** (`ds-tab-…`, `ds-tabpanel-…`): the ids now carry each Tabs' own part. Find it by its role and name.
+- **A keyboard test that tabbed into a panel starting with a control:** Tab now goes straight to the control.
+
+## 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.
 

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

@@ -563,6 +563,9 @@ 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;
     /**
@@ -572,6 +575,12 @@ interface ChartContainerProps {
      * 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. */
@@ -579,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

package/dist/charts.js

@@ -1,16 +1,18 @@
 "use client";
-import { SegmentedControl, TITLE_TEXT, Skeleton } from './chunk-OVHM55JF.js';
-import { useKeyboardScroll } from './chunk-H732QL56.js';
-import { useFormatLocale, useHydrated } from './chunk-LJYSVZMI.js';
-import './chunk-DO6DLTFK.js';
+import { SegmentedControl, CELL_FRAME, TITLE_TEXT, TITLE_FLOOR, CELL_ROOM_INNER, CELL_HIDE_CHART_ACTIONS, Skeleton } from './chunk-MPXE2XOP.js';
+import { useFormatLocale } from './chunk-R7FG4ZQ5.js';
+import './chunk-4TQVFRKK.js';
 import { formatLocale } from './chunk-7QLXYRPD.js';
+import './chunk-ZTS6HJAU.js';
+import { DashboardCellContext } from './chunk-P3NUUIL6.js';
+import { useHydrated } from './chunk-GIA4BMGI.js';
 import { FormChangeCtx } from './chunk-72SDAX54.js';
-import { elementType } from './chunk-XBVZIN26.js';
+import { elementType } from './chunk-MW5CJOJN.js';
 import './chunk-7RKC5C7G.js';
-import './chunk-R2IAK3J3.js';
-import { mergeRefs } from './chunk-HCEHTJ5E.js';
+import { useKeyboardScroll } from './chunk-T33JK3ZE.js';
+import { mergeRefs } from './chunk-77X7AHFB.js';
 import { warnOnce } from './chunk-53F7GVBQ.js';
-import { cn, FOCUS_INSET, GLASS_SURFACE } from './chunk-2724SJO2.js';
+import { cn, FOCUS_INSET, GLASS_SURFACE } from './chunk-HDFTENVW.js';
 import { createContext, forwardRef, useContext, useRef, useState, useId, useMemo, useLayoutEffect, useEffect, useCallback, useSyncExternalStore, Children, isValidElement } from 'react';
 import { ResponsiveContainer, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Bar, LineChart as LineChart$1, Line, AreaChart as AreaChart$1, Area, PieChart as PieChart$1, Pie, Cell, ComposedChart, ScatterChart as ScatterChart$1, ZAxis, Scatter, Symbols, RadarChart as RadarChart$1, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, RadialBarChart as RadialBarChart$1, RadialBar, FunnelChart as FunnelChart$1, Funnel, LabelList, Treemap, Sankey, Text, Legend, ReferenceArea, ReferenceLine, getNiceTickValues, Rectangle, usePlotArea, ZIndexLayer, DefaultZIndexes } from 'recharts';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -979,35 +981,45 @@ function forecastElements(categories, from, label, look) {
   }
   return elements;
 }
-function ChartTable({ table, name, labelledBy }) {
+function ChartTable({ table, name, labelledBy, cell = false }) {
   const [frame, setFrame] = useState(null);
   useKeyboardScroll(frame, name, true, false, "both");
-  return /* @__PURE__ */ jsxs("div", { "data-chart-table": "", className: "flex min-h-0 flex-1 flex-col gap-ds-2", children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: setFrame,
-        className: cn(
-          "min-h-0 max-h-[var(--ds-chart-height-lg)] overflow-auto rounded-[var(--ds-radius-md)]",
-          "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
-          FOCUS_INSET
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-chart-table": "",
+      className: cell ? "flex flex-[1_1_0px] flex-col gap-ds-2" : "flex min-h-0 flex-1 flex-col gap-ds-2",
+      style: cell ? { minHeight: "var(--ds-chart-height-sm)" } : void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: setFrame,
+            className: cn(
+              "min-h-0",
+              !cell && "max-h-[var(--ds-chart-height-lg)]",
+              "overflow-auto rounded-[var(--ds-radius-md)]",
+              "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+              FOCUS_INSET
+            ),
+            children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-sm", "aria-labelledby": labelledBy, "aria-label": labelledBy ? void 0 : name, children: [
+              /* @__PURE__ */ jsx("thead", { className: "bg-[var(--ds-bg-muted)]", children: /* @__PURE__ */ jsx("tr", { children: table.columns.map((column, i) => /* @__PURE__ */ jsx(
+                "th",
+                {
+                  scope: "col",
+                  className: cn("px-ds-3 py-ds-2 text-xs font-semibold text-[var(--ds-text-secondary)] whitespace-nowrap", table.numeric[i] ? "text-right" : "text-left"),
+                  children: column
+                },
+                i
+              )) }) }),
+              /* @__PURE__ */ jsx("tbody", { children: table.rows.map((row, r) => /* @__PURE__ */ jsx("tr", { className: "border-t-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", children: row.map((cell2, i) => i === (table.rowHeader ?? 0) ? /* @__PURE__ */ jsx("th", { scope: "row", className: "px-ds-3 py-ds-2 text-left font-normal text-[var(--ds-text-primary)]", children: cell2 }, i) : /* @__PURE__ */ jsx("td", { className: cn("px-ds-3 py-ds-2 text-[var(--ds-text-primary)]", table.numeric[i] && "text-right tabular-nums whitespace-nowrap"), children: cell2 }, i)) }, r)) })
+            ] })
+          }
         ),
-        children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-sm", "aria-labelledby": labelledBy, "aria-label": labelledBy ? void 0 : name, children: [
-          /* @__PURE__ */ jsx("thead", { className: "bg-[var(--ds-bg-muted)]", children: /* @__PURE__ */ jsx("tr", { children: table.columns.map((column, i) => /* @__PURE__ */ jsx(
-            "th",
-            {
-              scope: "col",
-              className: cn("px-ds-3 py-ds-2 text-xs font-semibold text-[var(--ds-text-secondary)] whitespace-nowrap", table.numeric[i] ? "text-right" : "text-left"),
-              children: column
-            },
-            i
-          )) }) }),
-          /* @__PURE__ */ jsx("tbody", { children: table.rows.map((row, r) => /* @__PURE__ */ jsx("tr", { className: "border-t-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", children: row.map((cell, i) => i === (table.rowHeader ?? 0) ? /* @__PURE__ */ jsx("th", { scope: "row", className: "px-ds-3 py-ds-2 text-left font-normal text-[var(--ds-text-primary)]", children: cell }, i) : /* @__PURE__ */ jsx("td", { className: cn("px-ds-3 py-ds-2 text-[var(--ds-text-primary)]", table.numeric[i] && "text-right tabular-nums whitespace-nowrap"), children: cell }, i)) }, r)) })
-        ] })
-      }
-    ),
-    table.notes.length > 0 && /* @__PURE__ */ jsx("ul", { "data-chart-notes": "", className: "text-xs text-[var(--ds-text-secondary)]", children: table.notes.map((note, i) => /* @__PURE__ */ jsx("li", { children: note }, i)) })
-  ] });
+        table.notes.length > 0 && /* @__PURE__ */ jsx("ul", { "data-chart-notes": "", className: "text-xs text-[var(--ds-text-secondary)]", children: table.notes.map((note, i) => /* @__PURE__ */ jsx("li", { children: note }, i)) })
+      ]
+    }
+  );
 }
 var CHART_HEIGHTS = {
   sm: "var(--ds-chart-height-sm)",
@@ -1033,6 +1045,9 @@ function plotBoxStyle(size, fixed) {
   }
   return { height: fixed ?? `clamp(${SM}, 50cqi, ${LG})`, maxHeight: `max(${fixed ?? LG}, 100cqi)`, flex: "1 0 auto" };
 }
+function cellPlotStyle(size) {
+  return size.model === "rows" ? plotBoxStyle(size, void 0) : { flex: "1 1 0px", minHeight: SM };
+}
 var CHART_MARK = /* @__PURE__ */ Symbol.for("gridsmith.Chart");
 function markChart(component) {
   Object.assign(component, { [CHART_MARK]: true });
@@ -1065,6 +1080,8 @@ function remapRowKeys(e) {
   const event = new View.KeyboardEvent("keydown", { key: next ? "ArrowLeft" : "ArrowRight", bubbles: true, cancelable: true });
   REMAPPED.add(event);
   target.dispatchEvent(event);
+  const plot = e.currentTarget;
+  View.requestAnimationFrame(() => plot.querySelector(".recharts-tooltip-cursor")?.scrollIntoView?.({ block: "nearest", inline: "nearest" }));
 }
 var ChartWrapper = forwardRef(function ChartWrapper2({
   height = "auto",
@@ -1104,9 +1121,10 @@ var ChartWrapper = forwardRef(function ChartWrapper2({
     observer.observe(plot);
     return () => observer.disconnect();
   }, [plotEl]);
-  const fill = container?.fillArea === true;
+  const cell = container?.cell === true;
+  const fill = !cell && container?.fillArea === true;
   const fixed = container?.height ?? fixedChartHeight(height);
-  const plotStyle = fill ? { flex: "1 1 0%", minHeight: 0 } : plotBoxStyle(size, fixed);
+  const plotStyle = cell ? cellPlotStyle(size) : fill ? { flex: "1 1 0%", minHeight: 0 } : plotBoxStyle(size, fixed);
   const subtitle = description?.trim() || void 0;
   const summary = access?.description;
   const describers = [subtitle && subtitleId, summary && summaryId].filter(Boolean).join(" ");
@@ -1131,6 +1149,26 @@ var ChartWrapper = forwardRef(function ChartWrapper2({
   }, [categoryAxis, plotEl]);
   const register = container?.register;
   useLayoutEffect(() => register?.(), [register]);
+  const drawing = container?.drawing;
+  useLayoutEffect(() => {
+    if (!drawing || !plotEl || typeof MutationObserver === "undefined") return;
+    let counted;
+    const read = () => {
+      const surface = !!plotEl.querySelector('svg[tabindex="0"]');
+      if (surface && !counted) counted = drawing();
+      else if (!surface && counted) {
+        counted();
+        counted = void 0;
+      }
+    };
+    read();
+    const observer = new MutationObserver(read);
+    observer.observe(plotEl, { childList: true, subtree: true, attributes: true, attributeFilter: ["tabindex"] });
+    return () => {
+      observer.disconnect();
+      counted?.();
+    };
+  }, [drawing, plotEl]);
   const switcher = access ? /* @__PURE__ */ jsx(FormChangeCtx, { value: null, children: /* @__PURE__ */ jsx(
     SegmentedControl,
     {
@@ -1153,7 +1191,7 @@ var ChartWrapper = forwardRef(function ChartWrapper2({
       "data-gs-chart": chart,
       "data-category-kind": categoryKind2,
       "data-categories": categories,
-      className: cn("relative flex w-full flex-col", fill && "h-full", className),
+      className: cn("relative flex w-full flex-col", fill && "h-full", cell && "min-h-full", className),
       style: { containerType: "inline-size", minInlineSize: "min(100%, 16rem)", ...fill ? {} : { flex: "1 0 auto" } },
       children: [
         (headText || switcher && !actions) && /* @__PURE__ */ jsxs("div", { "data-chart-head": "", className: "mb-ds-3 flex items-start justify-between gap-ds-3", children: [
@@ -1179,7 +1217,7 @@ var ChartWrapper = forwardRef(function ChartWrapper2({
               /* @__PURE__ */ jsx("div", { className: "absolute inset-0", style: drawn2 ? { minWidth: drawn2.width, minHeight: drawn2.height } : void 0, children: /* @__PURE__ */ jsx(ChartFrameContext.Provider, { value: frame, children: /* @__PURE__ */ jsx(PlotNames, { children }) }) })
             ]
           }
-        ) : /* @__PURE__ */ jsx(ChartTable, { table: access.table, name: `${ariaLabel || container?.title || "The chart"}: values`, labelledBy: ariaLabel ? void 0 : container?.titleId }),
+        ) : /* @__PURE__ */ jsx(ChartTable, { table: access.table, name: `${ariaLabel || container?.title || "The chart"}: values`, labelledBy: ariaLabel ? void 0 : container?.titleId, cell }),
         /* @__PURE__ */ jsx("div", { ref: setLegend, "data-chart-legend": "" }),
         /* @__PURE__ */ jsx("div", { ref: setLive, role: "status", "aria-live": "polite", className: "sr-only" }),
         /* @__PURE__ */ jsx(
@@ -2722,7 +2760,7 @@ var TreemapChart = markChart(forwardRef(function TreemapChart2({
         children: showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) })
       }
     ) }),
-    /* @__PURE__ */ jsx("span", { ref: probe2, "aria-hidden": true, className: LABEL_TEXT, style: { position: "absolute", visibility: "hidden", pointerEvents: "none" }, children: "M" })
+    /* @__PURE__ */ jsx("span", { ref: probe2, "aria-hidden": true, className: LABEL_TEXT, style: { position: "absolute", top: 0, left: 0, visibility: "hidden", pointerEvents: "none" }, children: "M" })
   ] });
 }));
 function oneWayFlows(links) {
@@ -2893,10 +2931,11 @@ var Sparkline = forwardRef(function Sparkline2({
   const chartColor = useResolvedToken(tokenName);
   const softColor = useResolvedToken(softTokenName);
   const chartData = data.map((value, i) => ({ value, index: i }));
+  const picture = ariaLabel ? { role: "img", "aria-label": ariaLabel } : { "aria-hidden": true };
   const containerStyle = insideContainer ? { width: "100%", height: "100%" } : { width: typeof width === "number" ? `${width}px` : width, height: `${height}px` };
   if (!data?.length) return null;
   if (variant === "bar") {
-    return /* @__PURE__ */ jsx("div", { ref, style: containerStyle, className, ...ariaLabel ? { role: "img", "aria-label": ariaLabel } : {}, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(BarChart$1, { data: chartData, margin: { top: 0, right: 0, bottom: 0, left: 0 }, children: [
+    return /* @__PURE__ */ jsx("div", { ref, style: containerStyle, className, ...picture, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(BarChart$1, { data: chartData, margin: { top: 0, right: 0, bottom: 0, left: 0 }, accessibilityLayer: false, children: [
       /* @__PURE__ */ jsx(XAxis, { dataKey: "index", hide: true }),
       /* @__PURE__ */ jsx(YAxis, { hide: true }),
       showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}), cursor: false }),
@@ -2913,7 +2952,7 @@ var Sparkline = forwardRef(function Sparkline2({
   }
   if (variant === "area") {
     const gradientId = `sparkline-gradient-${instanceId}-${color}`;
-    return /* @__PURE__ */ jsx("div", { ref, style: containerStyle, className, ...ariaLabel ? { role: "img", "aria-label": ariaLabel } : {}, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(AreaChart$1, { data: chartData, margin: { top: 2, right: 2, bottom: 2, left: 2 }, children: [
+    return /* @__PURE__ */ jsx("div", { ref, style: containerStyle, className, ...picture, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(AreaChart$1, { data: chartData, margin: { top: 2, right: 2, bottom: 2, left: 2 }, accessibilityLayer: false, children: [
       /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
         /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: softColor, stopOpacity: 1 }),
         /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: softColor, stopOpacity: 0.1 })
@@ -2936,7 +2975,7 @@ var Sparkline = forwardRef(function Sparkline2({
       )
     ] }) }) });
   }
-  return /* @__PURE__ */ jsx("div", { ref, style: containerStyle, className, ...ariaLabel ? { role: "img", "aria-label": ariaLabel } : {}, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(LineChart$1, { data: chartData, margin: { top: 2, right: 2, bottom: 2, left: 2 }, children: [
+  return /* @__PURE__ */ jsx("div", { ref, style: containerStyle, className, ...picture, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(LineChart$1, { data: chartData, margin: { top: 2, right: 2, bottom: 2, left: 2 }, accessibilityLayer: false, children: [
     /* @__PURE__ */ jsx(XAxis, { dataKey: "index", hide: true }),
     /* @__PURE__ */ jsx(YAxis, { hide: true, domain: ["dataMin - 1", "dataMax + 1"] }),
     showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}), cursor: false }),
@@ -2954,10 +2993,12 @@ var Sparkline = forwardRef(function Sparkline2({
     )
   ] }) }) });
 });
+var CELL_BODY = "min-h-0 overflow-y-auto -m-[4px] p-[4px] scroll-p-[4px]";
 var CHART_TITLE_CLASSES = TITLE_TEXT;
 function ChartContainer({
   height = "auto",
   title,
+  actions: pageActions,
   loading = false,
   emptyState,
   variant = "default",
@@ -2965,9 +3006,27 @@ function ChartContainer({
   className
 }) {
   const titleId = useId();
+  const hint = useContext(DashboardCellContext) !== null;
+  const rootRef = useRef(null);
+  const [nested, setNested] = useState(false);
+  useLayoutEffect(() => {
+    if (hint) setNested(!rootRef.current?.matches(CELL_FRAME));
+  }, [hint]);
+  const cell = hint && !nested;
   const fixed = fixedChartHeight(height);
   const sizesItself = !loading && !!children && isLibraryChart(children);
   const area = fixed ?? CHART_HEIGHTS.md;
+  const [bodyEl, setBodyEl] = useState(null);
+  const [drawings, setDrawings] = useState(0);
+  const drawing = useCallback(() => {
+    setDrawings((n) => n + 1);
+    return () => setDrawings((n) => n - 1);
+  }, []);
+  useKeyboardScroll(bodyEl, title || "Chart", cell && drawings === 0);
+  const strayActions = !title && !!pageActions;
+  useEffect(() => {
+    if (strayActions) warnOnce("ChartContainer", "actions are drawn in the chart's header, beside its title, and this chart has no title: give it a title (what the chart is), or the actions don't show.");
+  }, [strayActions]);
   const [actions, setActions] = useState(null);
   const [charts, setCharts] = useState(0);
   const register = useCallback(() => {
@@ -2975,8 +3034,8 @@ function ChartContainer({
     return () => setCharts((n) => n - 1);
   }, []);
   const context = useMemo(
-    () => ({ height: fixed, titleId: title ? titleId : void 0, title: title || void 0, fillArea: !sizesItself, actions, charts, register }),
-    [fixed, title, titleId, sizesItself, actions, charts, register]
+    () => ({ height: fixed, titleId: title ? titleId : void 0, title: title || void 0, fillArea: !sizesItself, cell, actions, charts, register, drawing: cell ? drawing : void 0 }),
+    [fixed, title, titleId, sizesItself, cell, actions, charts, register, drawing]
   );
   let body = null;
   if (loading) {
@@ -2985,16 +3044,17 @@ function ChartContainer({
       /* @__PURE__ */ jsx(Skeleton, { variant: "text", lines: 1, className: "w-full" })
     ] });
   } else if (children) {
-    body = /* @__PURE__ */ jsx(ChartContainerContext.Provider, { value: context, children: sizesItself ? children : (
+    body = /* @__PURE__ */ jsx(ChartContainerContext.Provider, { value: context, children: /* @__PURE__ */ jsx(DashboardCellContext, { value: null, children: sizesItself || cell ? children : (
       // the area is absolute, so a child that fills 100% has a definite height to fill
       /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full", children }) })
-    ) });
+    ) }) });
   } else if (emptyState) {
     body = /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center", children: emptyState });
   }
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: rootRef,
       "data-card": "",
       "data-gs": "chart",
       className: cn(
@@ -3008,16 +3068,21 @@ function ChartContainer({
         className
       ),
       children: [
-        title && /* @__PURE__ */ jsxs("div", { "data-chart-header": "", className: "mb-ds-4 flex items-start justify-between gap-ds-3", children: [
-          /* @__PURE__ */ jsx("h3", { id: titleId, className: cn(CHART_TITLE_CLASSES, "min-w-0 flex-1"), children: title }),
+        title && // Sprint 32 (F2): CardHeader's rule for the title's room. Its basis is its floor (TITLE_FLOOR) and it takes what's
+        // left, so the page's actions and the switch's slot, items of their own, wrap under it, at the end, only when the
+        // title would go under its floor; a title that fits draws as before, and a word wider than the frame breaks there
+        /* @__PURE__ */ jsxs("div", { "data-chart-header": "", className: cn("mb-ds-4 flex flex-wrap items-start justify-end gap-x-ds-3 gap-y-ds-2", CELL_ROOM_INNER, CELL_HIDE_CHART_ACTIONS), children: [
+          /* @__PURE__ */ jsx("h3", { id: titleId, className: cn(CHART_TITLE_CLASSES, "min-w-0 grow me-auto", TITLE_FLOOR), children: title }),
+          pageActions ? /* @__PURE__ */ jsx("div", { "data-chart-page-actions": "", className: "flex shrink-0 items-center gap-ds-2", children: pageActions }) : null,
           /* @__PURE__ */ jsx("div", { ref: setActions, "data-chart-actions": "", className: "shrink-0 empty:hidden" })
         ] }),
         /* @__PURE__ */ jsx(
           "div",
           {
+            ref: setBodyEl,
             "data-chart-body": "",
-            className: "relative flex min-w-0 flex-col",
-            style: { flex: "1 1 0%", minHeight: sizesItself ? void 0 : area },
+            className: cn("relative flex min-w-0 flex-col", cell && [CELL_BODY, FOCUS_INSET]),
+            style: { flex: "1 1 0%", minHeight: sizesItself || cell ? void 0 : area },
             children: body
           }
         )