@gaia-ai/addon-gaia-ui 0.16.0 → 0.16.2

package/dist/src/Kernel/renderer.d.ts

@@ -8,7 +8,6 @@ export interface TerminalShellInput {
     readonly output: typeof process.stdout;
     readonly trace: InputTrace | undefined;
     readonly interactive: boolean;
-    readonly reactEnabled?: boolean;
 }
 /**
  * The terminal, as the kernel holds it.
@@ -22,6 +21,5 @@ export interface TerminalShell {
     readonly renderer: CliRenderer | undefined;
     readonly shell: BoxRenderable | undefined;
     readonly ownsRenderer: boolean;
-    readonly reactBody: import('./react-body.js').ReactBody | undefined;
 }
-export declare function createTerminalShell({ options, input, output, trace, interactive, reactEnabled, }: TerminalShellInput): Promise<TerminalShell>;
+export declare function createTerminalShell({ options, input, output, trace, interactive, }: TerminalShellInput): Promise<TerminalShell>;

package/dist/src/Kernel/renderer.js

@@ -47,7 +47,7 @@ import { DEFAULT_BACKGROUND } from '../lib/theme.js';
  * the alternate one changes what the operator's terminal shows after `q`.
  */
 const HOME_AND_CLEAR = '\x1b[H\x1b[2J';
-export async function createTerminalShell({ options, input, output, trace, interactive, reactEnabled = false, }) {
+export async function createTerminalShell({ options, input, output, trace, interactive, }) {
     /**
      * GAIA-326 — the ONE renderer that owns the terminal.
      *
@@ -123,9 +123,6 @@ export async function createTerminalShell({ options, input, output, trace, inter
      * kernel computed every row's `top` itself, which is how a framework bought
      * partly for its layout engine ended up using none of it.
      */
-    const reactBody = renderer && reactEnabled
-        ? (await import('./react-body.js')).createReactBody(renderer)
-        : undefined;
     const shell = renderer
         ? new BoxRenderable(renderer, {
             id: 'shell',
@@ -141,5 +138,5 @@ export async function createTerminalShell({ options, input, output, trace, inter
         : undefined;
     if (renderer && shell)
         renderer.root.add(shell);
-    return { renderer, shell, ownsRenderer, reactBody };
+    return { renderer, shell, ownsRenderer };
 }

package/dist/src/Kernel/tui-kernel.js

@@ -7,7 +7,6 @@ import { createRefreshSignal, } from '../lib/refresh-signal.js';
 import { scrollTo } from '../lib/scroll.js';
 import { Router } from '../Routing/router.js';
 import { bootLocationFor, buildRoutes, WORKSPACE_PICKER_ROUTE_ID, } from '../Routing/routes.js';
-import { ReactScreen } from '../Screen/react-screen.js';
 import { timerDebounce } from '../Widget/option-source.js';
 import { bodyRowsFor, chromeInputFor, FOOTER_SPINNER_MS, frameTrees, modalBoxWidth, NOTICE_ANIM_MS, } from './chrome.js';
 import { clipboardWriter } from './clipboard.js';
@@ -88,13 +87,12 @@ export async function runTicketTui(_document, _context, services, options = {})
     // over both and the router paints on its first `navigate`. GAIA-382 moved the
     // bring-up itself to `Kernel/renderer.ts`, rationale included: it reads five
     // values and returns a terminal, so it never belonged to this closure.
-    const { renderer, shell, ownsRenderer, reactBody } = await createTerminalShell({
+    const { renderer, shell, ownsRenderer } = await createTerminalShell({
         options,
         input,
         output,
         trace,
         interactive,
-        reactEnabled: [...session.screens().values()].some((screen) => screen instanceof ReactScreen),
     });
     /**
      * The selection this kernel last scrolled into view.
@@ -122,6 +120,11 @@ export async function runTicketTui(_document, _context, services, options = {})
         store: createSessionStore(),
         options,
         copyToClipboard: clipboardWriter(renderer),
+        // Read when a context is built — once per present — so a screen sees the
+        // width of the frame it is drawing. The pipe has no terminal to measure.
+        get terminalColumns() {
+            return interactive ? terminalColumns() : undefined;
+        },
     };
     let router;
     const context = () => router.context();
@@ -209,15 +212,10 @@ export async function runTicketTui(_document, _context, services, options = {})
             },
         });
     };
-    let reactVisit = -1;
     const draw = () => {
         const bodyBox = regions.body;
         if (closing || !renderer || !shell || !bodyBox || !active())
             return;
-        if (reactVisit !== router.visitCount) {
-            reactBody?.clear();
-            reactVisit = router.visitCount;
-        }
         regions.retire(router.visitCount);
         const shown = active()?.present(context());
         if (!shown)
@@ -280,11 +278,6 @@ export async function runTicketTui(_document, _context, services, options = {})
             slot.width = id === 'body' ? '100%' : rowWidth;
             regions.patch(id, next);
         }
-        const reactHost = regions.treeOf('body')?.byId.get('react-screen-host');
-        if (reactHost && shown.reactBody !== undefined && !modal)
-            reactBody?.show(reactHost, shown.reactBody, router.visitCount);
-        else
-            reactBody?.clear();
         // Keep the cursor in view — when it MOVES. See `scrolledSelection`.
         //
         // GAIA-340 Task 12 — AFTER the patch, and asking the LAYOUT rather than the
@@ -300,8 +293,7 @@ export async function runTicketTui(_document, _context, services, options = {})
         if (!modal &&
             selectedRowId !== undefined &&
             selection !== scrolledSelection) {
-            const row = regions.treeOf('body')?.byId.get(selectedRowId) ??
-                reactHost?.findDescendantById(selectedRowId);
+            const row = regions.treeOf('body')?.byId.get(selectedRowId);
             if (row) {
                 renderer.root.calculateLayout();
                 // `lib/scroll.ts` — the clamp the autocomplete already scrolls by, fed
@@ -405,7 +397,6 @@ export async function runTicketTui(_document, _context, services, options = {})
             // them, so `regions` takes them down. The shell is the kernel's, and it
             // goes last: destroying a parent before its children leaves their Yoga
             // nodes unfreed.
-            reactBody?.destroy();
             regions.destroy();
             renderer.root.remove(shell);
             shell.destroy();

package/dist/src/Screen/async-screen.d.ts

@@ -54,6 +54,12 @@ export declare abstract class AsyncScreen<T> extends BaseScreen {
     protected abstract renderReady(data: T, context: ScreenContext): VNode;
     protected renderError(error: Error): string[];
     protected didLoad(_data: T, _context: ScreenContext): void;
+    /**
+     * Whether the body sits flush against the frame. A document screen that
+     * reads as content inside the frame returns `false` for the body-window
+     * inset every framed row surface used to have.
+     */
+    protected flushBody(): boolean;
     /** Optional filter chips above the FRAME. */
     protected badges(_context: ScreenContext): readonly ListFilterBadge[];
     /** title / meta / header / selection — not footer. */
@@ -74,6 +80,13 @@ export declare abstract class AsyncScreen<T> extends BaseScreen {
      */
     protected actionStillCurrent(guard: LifecycleGuard, context: ScreenContext): boolean;
     protected replaceReadyIfCurrent(guard: LifecycleGuard, data: T, context: ScreenContext): boolean;
+    /**
+     * Re-read over the ready surface, superseding any read still in flight.
+     * Resolves `false` when a newer read or a local mutation overtook this one;
+     * rejects only while it is still the current read, so a stale failure
+     * cannot overwrite a newer answer.
+     */
+    protected reloadInPlace(context: ScreenContext): Promise<boolean>;
     protected requestActiveDraw(context: ScreenContext): boolean;
     enter(context: ScreenContext): void;
     retry(context: ScreenContext): Promise<void>;

package/dist/src/Screen/async-screen.js

@@ -1,4 +1,5 @@
 import { filterBadgeStrip, } from '../Component/list-chrome/index.js';
+import { serverMessage } from '../lib/jsonapi-error.js';
 import { columnNode, messageTree } from '../lib/vnode.js';
 import { BaseScreen, presentation, } from './screen.js';
 /**
@@ -46,6 +47,14 @@ export class AsyncScreen extends BaseScreen {
         return [error.message, '', 'Press Enter to retry.'];
     }
     didLoad(_data, _context) { }
+    /**
+     * Whether the body sits flush against the frame. A document screen that
+     * reads as content inside the frame returns `false` for the body-window
+     * inset every framed row surface used to have.
+     */
+    flushBody() {
+        return true;
+    }
     /** Optional filter chips above the FRAME. */
     badges(_context) {
         return [];
@@ -95,6 +104,28 @@ export class AsyncScreen extends BaseScreen {
         this.state = 'ready';
         return true;
     }
+    /**
+     * Re-read over the ready surface, superseding any read still in flight.
+     * Resolves `false` when a newer read or a local mutation overtook this one;
+     * rejects only while it is still the current read, so a stale failure
+     * cannot overwrite a newer answer.
+     */
+    async reloadInPlace(context) {
+        const guard = this.captureLifecycle(context, true);
+        let data;
+        try {
+            data = await this.load(context);
+        }
+        catch (caught) {
+            if (!this.lifecycleIsCurrent(guard, context))
+                return false;
+            throw caught;
+        }
+        if (!this.replaceReadyIfCurrent(guard, data, context))
+            return false;
+        this.requestActiveDraw(context);
+        return true;
+    }
     requestActiveDraw(context) {
         if (!context.isActive()) {
             this.staleRedrawCount++;
@@ -159,13 +190,11 @@ export class AsyncScreen extends BaseScreen {
                 return;
             this.refreshing = false;
             if (keepSurface) {
-                this.toast =
-                    caught instanceof Error ? caught.message : String(caught);
+                this.toast = serverMessage(caught);
                 this.requestActiveDraw(context);
                 return;
             }
-            this.failure =
-                caught instanceof Error ? caught : new Error(String(caught));
+            this.failure = new Error(serverMessage(caught));
             this.state = 'error';
             this.requestActiveDraw(context);
         });
@@ -204,7 +233,7 @@ export class AsyncScreen extends BaseScreen {
         }
         children.push(this.surface(context));
         return presentation(columnNode(`${id}-body`, ...children), {
-            flush: true,
+            flush: this.flushBody(),
             ...this.chrome(context),
             ...(actions.length > 0 ? { actions } : {}),
             ...(notice !== undefined && notice !== '' ? { status: notice } : {}),

package/dist/src/Screen/list-screen.d.ts

@@ -14,7 +14,7 @@ import type { ScreenContext } from './screen.js';
  * enough hooks to be a framework.
  *
  * It does not claim keys from `handleInput` either. The current dispatch ORDER is
- * load-bearing: `←`/`→` sit after the ticket list's `searchMode` branch, where the
+ * load-bearing: `←`/`→` sit after the ticket list's `/` search branch, where the
  * arrows are inert while the `/` field is open. A base that claimed them first
  * would make them page there — a behaviour change, and GAIA-294 is
  * behaviour-neutral. So the dispatch TABLE lives here once and each subclass calls
@@ -93,7 +93,7 @@ export declare abstract class ListScreen<Row extends {
      * `←` forwards too (GAIA-292 R1).
      *
      * WHERE it is called stays the subclass's decision (GAIA-294 D3) — on the ticket
-     * list it must sit after the `searchMode` branch, where the arrows are inert
+     * list it must sit after the `/` search branch, where the arrows are inert
      * while the `/` field is open.
      */
     protected handlePagingInput(input: string, context: ScreenContext): boolean;
@@ -103,6 +103,15 @@ export declare abstract class ListScreen<Row extends {
      * chain continues.
      */
     protected handleCursorInput(input: string, context: ScreenContext): boolean;
+    /**
+     * Show `rows` in place of the loaded page until the next read answers — the
+     * optimistic narrowing of a search. It keeps the LOADED page number so a
+     * keystroke does not flip `page N`; the total becomes the explicit unknown
+     * (`N of ?`); a narrowing that dropped rows stops the window positioning
+     * the survivors (GAIA-312 D4). An emptied list (a refusal) also drops
+     * `hasNext`, so `→` cannot re-send the refused query.
+     */
+    showRows(rows: readonly Row[]): void;
     /** `page N` for the strip above the table (count sits beside it). */
     protected pagingSegments(): string[];
     /**

package/dist/src/Screen/list-screen.js

@@ -24,7 +24,7 @@ import { AsyncScreen } from './async-screen.js';
  * enough hooks to be a framework.
  *
  * It does not claim keys from `handleInput` either. The current dispatch ORDER is
- * load-bearing: `←`/`→` sit after the ticket list's `searchMode` branch, where the
+ * load-bearing: `←`/`→` sit after the ticket list's `/` search branch, where the
  * arrows are inert while the `/` field is open. A base that claimed them first
  * would make them page there — a behaviour change, and GAIA-294 is
  * behaviour-neutral. So the dispatch TABLE lives here once and each subclass calls
@@ -92,7 +92,7 @@ export class ListScreen extends AsyncScreen {
      * `←` forwards too (GAIA-292 R1).
      *
      * WHERE it is called stays the subclass's decision (GAIA-294 D3) — on the ticket
-     * list it must sit after the `searchMode` branch, where the arrows are inert
+     * list it must sit after the `/` search branch, where the arrows are inert
      * while the `/` field is open.
      */
     handlePagingInput(input, context) {
@@ -116,6 +116,24 @@ export class ListScreen extends AsyncScreen {
         context.requestDraw();
         return true;
     }
+    /**
+     * Show `rows` in place of the loaded page until the next read answers — the
+     * optimistic narrowing of a search. It keeps the LOADED page number so a
+     * keystroke does not flip `page N`; the total becomes the explicit unknown
+     * (`N of ?`); a narrowing that dropped rows stops the window positioning
+     * the survivors (GAIA-312 D4). An emptied list (a refusal) also drops
+     * `hasNext`, so `→` cannot re-send the refused query.
+     */
+    showRows(rows) {
+        const current = this.readyValue;
+        this.replaceReady({
+            hasNext: rows.length === 0 ? false : (current?.hasNext ?? false),
+            page: this.loadedPage,
+            total: null,
+            window: current && rows.length === current.rows.length ? current.window : null,
+            rows: [...rows],
+        });
+    }
     /** `page N` for the strip above the table (count sits beside it). */
     pagingSegments() {
         return [`page ${this.loadedPage + 1}`];

package/dist/src/Screen/screen.d.ts

@@ -25,8 +25,6 @@ export interface ScreenPresentation {
      * the id the kernel mounts the body slot's tree under.
      */
     readonly body: VNode;
-    /** Optional React-owned body; native patching never traverses its children. */
-    readonly reactBody?: import('react').ReactNode;
     readonly selectable: number;
     readonly selectedIndex: number;
     /**
@@ -189,6 +187,12 @@ export interface ScreenContext {
      * Absent on the non-interactive path, which has no terminal at all.
      */
     readonly copyToClipboard?: import('../types.js').ClipboardWriter;
+    /**
+     * The terminal's width in columns, as the kernel last measured it — the one
+     * geometry fact a layout breakpoint needs before Yoga has run. Absent on the
+     * non-interactive path, which has no terminal; a reader takes a default.
+     */
+    readonly terminalColumns?: number | undefined;
 }
 export interface Screen {
     readonly id: ScreenId;

package/dist/src/Statistics/comparison-chart.d.ts

@@ -1,5 +1,7 @@
+import { type VNode } from '@opentui/core';
 import type { StatisticFigure } from './client.js';
-export declare function ComparisonChart({ figure, width, }: {
+export declare function ComparisonChart({ id, figure, width, }: {
+    id: string;
     figure: StatisticFigure;
     width: number;
-}): import("react").ReactNode;
+}): VNode;

package/dist/src/Statistics/comparison-chart.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx } from "@opentui/react/jsx-runtime";
+import { BoxRenderable, h } from '@opentui/core';
 import { FOREGROUND, SERIES_A, SERIES_B, SERIES_C, SERIES_D, SERIES_E, SERIES_F, } from '../lib/theme.js';
-import { BOLD } from '../lib/vnode.js';
+import { BOLD, paragraphNode, plainRun } from '../lib/vnode.js';
 import { displayWidth, truncateToWidth, wrapToWidth } from '../lib/width.js';
 import { formatAxisMagnitude } from './presentation.js';
 const MIN_PLOT_ROWS = 8;
@@ -20,11 +20,13 @@ const CROSS = '┼';
 const INVALID_MESSAGE = 'Comparison data is invalid.';
 const EMPTY_MESSAGE = 'No comparison values for this period.';
 const NARROW_MESSAGE = 'Plot area is too narrow to draw this comparison.';
-export function ComparisonChart({ figure, width, }) {
+export function ComparisonChart({ id, figure, width, }) {
     const rows = layoutChart(figure, Math.max(1, width));
-    return (_jsx("box", { flexDirection: "column", flexShrink: 0, children: rows.map((row, index) => (_jsx(ChartRow, { cells: row }, index))) }));
+    // A chart is a fixed grid of rows: the row index is its identity.
+    return h(BoxRenderable, { id, flexDirection: 'column', flexShrink: 0 }, ...rows.map((row, index) => chartRow(`${id}-${index}`, row)));
 }
-function ChartRow({ cells }) {
+/** One plot row as one text, its cells merged into runs of equal style. */
+function chartRow(id, cells) {
     const runs = [];
     for (const cell of cells) {
         const last = runs.at(-1);
@@ -33,7 +35,13 @@ function ChartRow({ cells }) {
         else
             runs.push({ text: cell.ch, fg: cell.fg, bold: cell.bold });
     }
-    return (_jsx("box", { flexDirection: "row", height: 1, flexShrink: 0, children: runs.map((run, index) => (_jsx("text", { fg: run.fg, ...(run.bold ? { attributes: BOLD } : {}), wrapMode: "none", children: run.text }, index))) }));
+    return paragraphNode({
+        id,
+        runs: runs.map((run) => plainRun(run.text, run.bold ? BOLD : 0, run.fg)),
+        fg: FOREGROUND,
+        wrapMode: 'none',
+        flexShrink: 0,
+    });
 }
 function layoutChart(figure, width) {
     const styles = seriesStyles(figure.measurements);

package/dist/src/Statistics/figures.d.ts

@@ -1,4 +1,18 @@
+import { type VNode } from '@opentui/core';
 import type { StatisticFigureGroup } from './client.js';
-export declare function StatisticsFigures({ groups, }: {
-    groups: readonly StatisticFigureGroup[];
-}): import("react").ReactNode;
+export interface StatisticsFiguresProps {
+    /** The grid's own id; every group and figure inside derives from it. */
+    readonly id: string;
+    readonly groups: readonly StatisticFigureGroup[];
+    /** The grid's laid-out width, as last reported through {@link onResize}. */
+    readonly width: number;
+    /** Called with the grid's new width whenever the layout resizes it. */
+    readonly onResize: (width: number) => void;
+}
+/**
+ * The figure groups as cards. The charts are laid out for `width` — the
+ * screen's last measurement of this grid — and the grid reports its real
+ * width after every layout, so a first estimate is corrected on the next draw
+ * instead of the charts waiting for a measurement to appear at all.
+ */
+export declare function StatisticsFigures({ id, groups, width, onResize, }: StatisticsFiguresProps): VNode;

package/dist/src/Statistics/figures.js

@@ -1,16 +1,24 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
-import { useState } from 'react';
-import { FOREGROUND } from '../lib/theme.js';
-import { BarChart } from '../Vendor/termcn/ui/bar-chart.js';
-import { Card } from '../Vendor/termcn/ui/card.js';
-import { HeatMap } from '../Vendor/termcn/ui/heat-map.js';
+import { BoxRenderable, h } from '@opentui/core';
+import { BarChart } from '../Component/bar-chart/index.js';
+import { Card } from '../Component/card/index.js';
+import { HeatMap } from '../Component/heat-map/index.js';
+import { FOREGROUND, SERIES_A, SERIES_B, SERIES_C, SERIES_D, } from '../lib/theme.js';
+import { BOLD, paragraphNode, plainRun } from '../lib/vnode.js';
 import { ComparisonChart } from './comparison-chart.js';
 import { formatAxisMagnitude } from './presentation.js';
-const COLORS = ['blue', 'purple', 'orange', 'green'];
+// Per-measurement bar colours: the comparison-series slots, in the order the
+// line chart uses them, so a measurement keeps its colour across widgets.
+const COLORS = [SERIES_A, SERIES_B, SERIES_C, SERIES_D];
 const valueAt = (figure, measurement, key) => figure.measurements[measurement]?.values[key] ?? null;
 const numeric = (value) => value ?? 0;
 const shown = (value) => value === null ? '—' : String(value);
-function MatrixDisplay({ figure, width, }) {
+const text = (id, content, attributes = 0) => paragraphNode({
+    id,
+    runs: [plainRun(content, attributes)],
+    fg: FOREGROUND,
+});
+const column = (id, gap, ...children) => h(BoxRenderable, { id, flexDirection: 'column', gap }, ...children);
+function matrixDisplay(id, figure, width) {
     // Categories are rows, measurements are columns — matching the web UI's
     // matrix orientation (docs/notes/statistics.md).
     const rawValues = figure.categories.map((category) => figure.measurements.map((_, measurement) => numeric(valueAt(figure, measurement, category.key))));
@@ -19,7 +27,7 @@ function MatrixDisplay({ figure, width, }) {
     // whole matrix's maximum, so columns with a smaller value range still show
     // visible contrast. HeatMap itself only supports one global min/max, so the
     // per-column scaling happens here: values are rescaled to 0-100 percent of
-    // their column's own max before being handed to the (untouched) component.
+    // their column's own max before being handed to the HeatMap module.
     const columnMaximums = figure.measurements.map((_, measurement) => Math.max(0, ...rawValues.map((row) => row[measurement] ?? 0)));
     const shadeValues = rawValues.map((row) => row.map((value, column) => {
         const columnMax = columnMaximums[column] ?? 0;
@@ -28,7 +36,18 @@ function MatrixDisplay({ figure, width, }) {
     const labelWidth = Math.max(1, ...figure.categories.map((category) => category.label.length));
     const cellWidth = Math.max(7, Math.floor((Math.max(width, 20) - labelWidth - 2) /
         Math.max(1, figure.measurements.length)));
-    return (_jsx(HeatMap, { data: shadeValues, rowLabels: figure.categories.map((category) => category.label), colLabels: figure.measurements.map((measurement) => measurement.label), cellLabels: labels, cellWidth: cellWidth, showValues: true, showLegend: false, minValue: 0, maxValue: 100 }));
+    return HeatMap({
+        id,
+        data: shadeValues,
+        rowLabels: figure.categories.map((category) => category.label),
+        colLabels: figure.measurements.map((measurement) => measurement.label),
+        cellLabels: labels,
+        cellWidth,
+        showValues: true,
+        showLegend: false,
+        minValue: 0,
+        maxValue: 100,
+    });
 }
 function partialPeriodUnit(figure) {
     return figure.filters.period?.value === '365' ? 'month' : 'day';
@@ -39,13 +58,19 @@ function partialPeriodUnit(figure) {
 // figure's own words. Rendered once here rather than per-widget so every
 // shipped widget (matrix, grouped_horizontal_bars) gets both without having
 // to know about them.
-function FigureCaption({ figure }) {
+function figureCaption(id, figure) {
     const partial = figure.categories.some((category) => category.partial);
     if (!partial && !figure.description)
         return null;
-    return (_jsxs("box", { flexDirection: "column", children: [figure.description && _jsx("text", { fg: FOREGROUND, children: figure.description }), partial && (_jsxs("text", { fg: FOREGROUND, children: ["Current ", partialPeriodUnit(figure), " partial (UTC)"] }))] }));
+    return column(id, 0, ...(figure.description
+        ? [text(`${id}-description`, figure.description)]
+        : []), ...(partial
+        ? [
+            text(`${id}-partial`, `Current ${partialPeriodUnit(figure)} partial (UTC)`),
+        ]
+        : []));
 }
-function GroupedHorizontalBars({ figure, width, }) {
+function groupedHorizontalBars(id, figure, width) {
     const maximum = Math.max(0, ...figure.categories.flatMap((category) => figure.measurements.map((measurement) => numeric(measurement.values[category.key] ?? null))));
     // Share = this category's slice of the measurement's total across every
     // category (e.g. one model's percent of total token spend) — every
@@ -63,37 +88,75 @@ function GroupedHorizontalBars({ figure, width, }) {
     // into the label-width budget the bar itself needs, which is what let long
     // category (model) labels crowd out or collapse against the bar. Elide it
     // — the category heading above already names the row.
+    const single = figure.measurements[0];
     const singleMeasurement = figure.measurements.length === 1;
-    return (_jsx("box", { flexDirection: "column", gap: 1, children: figure.categories.map((category) => (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { children: _jsx("b", { children: category.label }) }), _jsx(BarChart, { data: figure.measurements.map((measurement, index) => {
-                        const value = numeric(measurement.values[category.key] ?? null);
-                        return {
-                            label: singleMeasurement
-                                ? ''
-                                : `${measurement.label}${shareOf(measurement.id, value)}`,
-                            value,
-                            color: COLORS[index % COLORS.length] ?? 'blue',
-                        };
-                    }), direction: "horizontal", maxValue: maximum, 
-                    // The vendored chart's own showValues renders the raw number,
-                    // which is unreadable at token-spend (billion) scale — the
-                    // formatted line below (or inline per-row text, for multiple
-                    // measurements) replaces it.
-                    showValues: false, width: width }), !singleMeasurement && (_jsx("box", { flexDirection: "row", gap: 2, children: figure.measurements.map((measurement, index) => (_jsxs("text", { children: [measurement.label, ":", ' ', formatAxisMagnitude(numeric(valueAt(figure, index, category.key)))] }, measurement.id))) })), singleMeasurement && figure.measurements[0] && (_jsxs("text", { children: [formatAxisMagnitude(numeric(valueAt(figure, 0, category.key))), shareOf(figure.measurements[0].id, numeric(valueAt(figure, 0, category.key)))] }))] }, category.key))) }));
+    return column(id, 1, ...figure.categories.map((category) => {
+        const row = `${id}-${category.key}`;
+        return column(row, 0, text(`${row}-label`, category.label, BOLD), BarChart({
+            id: `${row}-bars`,
+            data: figure.measurements.map((measurement, index) => {
+                const value = numeric(measurement.values[category.key] ?? null);
+                return {
+                    label: singleMeasurement
+                        ? ''
+                        : `${measurement.label}${shareOf(measurement.id, value)}`,
+                    value,
+                    color: COLORS[index % COLORS.length],
+                };
+            }),
+            maxValue: maximum,
+            // The bar chart's own showValues renders the raw number,
+            // which is unreadable at token-spend (billion) scale — the
+            // formatted line below (or inline per-row text, for multiple
+            // measurements) replaces it.
+            showValues: false,
+            width,
+        }), singleMeasurement && single
+            ? text(`${row}-value`, `${formatAxisMagnitude(numeric(valueAt(figure, 0, category.key)))}${shareOf(single.id, numeric(valueAt(figure, 0, category.key)))}`)
+            : h(BoxRenderable, { id: `${row}-values`, flexDirection: 'row', gap: 2 }, ...figure.measurements.map((measurement, index) => text(`${row}-value-${measurement.id}`, `${measurement.label}: ${formatAxisMagnitude(numeric(valueAt(figure, index, category.key)))}`))));
+    }));
 }
-function FigureDisplay({ figure, width, }) {
+function figureDisplay(id, figure, width) {
     if (figure.empty.is_empty)
-        return _jsx("text", { children: figure.empty.message ?? 'No data for this selection.' });
-    return (_jsxs("box", { flexDirection: "column", gap: 1, children: [_jsx(FigureCaption, { figure: figure }), figure.widget === 'matrix' && (_jsx(MatrixDisplay, { figure: figure, width: width })), figure.widget === 'line' && (_jsx(ComparisonChart, { figure: figure, width: width })), figure.widget === 'grouped_horizontal_bars' && (_jsx(GroupedHorizontalBars, { figure: figure, width: width }))] }));
+        return text(`${id}-empty`, figure.empty.message ?? 'No data for this selection.');
+    const caption = figureCaption(`${id}-caption`, figure);
+    const widget = figure.widget === 'matrix'
+        ? matrixDisplay(`${id}-matrix`, figure, width)
+        : figure.widget === 'line'
+            ? ComparisonChart({ id: `${id}-line`, figure, width })
+            : groupedHorizontalBars(`${id}-bars`, figure, width);
+    return column(id, 1, ...(caption === null ? [] : [caption]), widget);
 }
-export function StatisticsFigures({ groups, }) {
-    const [width, setWidth] = useState(0);
-    function measure() {
-        setWidth(this.width);
-    }
+/**
+ * The figure groups as cards. The charts are laid out for `width` — the
+ * screen's last measurement of this grid — and the grid reports its real
+ * width after every layout, so a first estimate is corrected on the next draw
+ * instead of the charts waiting for a measurement to appear at all.
+ */
+export function StatisticsFigures({ id, groups, width, onResize, }) {
     const contentWidth = Math.max(1, width - 2);
-    return (_jsx("box", { id: "statistics-grid", width: "100%", paddingLeft: 1, paddingRight: 1, flexDirection: "column", gap: 0, onSizeChange: measure, ref: (node) => {
-            if (node)
-                setWidth(node.width);
-        }, children: width > 0 &&
-            groups.map((group) => (_jsxs("box", { width: "100%", flexDirection: "column", gap: 0, children: [_jsx("box", { height: 1 }), _jsx("text", { children: _jsx("b", { children: group.label }) }), group.figures.map((figure) => (_jsx("box", { id: `figure-${figure.id}`, width: contentWidth, flexShrink: 0, flexDirection: "column", children: _jsx(Card, { title: figure.label, width: contentWidth, paddingX: 1, children: _jsx("box", { flexDirection: "column", gap: 1, children: _jsx(FigureDisplay, { figure: figure, width: Math.max(15, contentWidth - 4) }) }) }) }, figure.id)))] }, group.id))) }));
+    return h(BoxRenderable, {
+        id,
+        width: '100%',
+        paddingLeft: 1,
+        paddingRight: 1,
+        flexDirection: 'column',
+        gap: 0,
+        onSizeChange() {
+            onResize(this.width);
+        },
+    }, ...groups.map((group) => column(`${id}-${group.id}`, 0, h(BoxRenderable, { id: `${id}-${group.id}-spacer`, height: 1 }), text(`${id}-${group.id}-label`, group.label, BOLD), ...group.figures.map((figure) => h(BoxRenderable, {
+        id: `figure-${figure.id}`,
+        width: contentWidth,
+        flexShrink: 0,
+        flexDirection: 'column',
+    }, Card({
+        id: `figure-${figure.id}-card`,
+        title: figure.label,
+        width: contentWidth,
+        paddingX: 1,
+        children: [
+            column(`figure-${figure.id}-display`, 1, figureDisplay(`figure-${figure.id}-widget`, figure, Math.max(15, contentWidth - 4))),
+        ],
+    }))))));
 }

package/dist/src/Statistics/presentation.d.ts

@@ -1,10 +1,8 @@
 import type { StatisticFigureGroup } from './client.js';
 /**
- * Formats a y-axis magnitude with the correct thousands/millions/billions
- * suffix — the vendored dither-chart default formatter only ever divides
- * once (`value / 1000`), so 844,000,000 renders as "844.0k" instead of
- * "844.0M". This formatter is passed in as a `tickFormatter` call-site
- * override; the vendored chart lib itself is untouched.
+ * Formats a magnitude with the correct thousands/millions/billions suffix,
+ * dividing as often as the size needs: 844,000,000 is "844.0M", never the
+ * "844.0k" a single division by 1000 gives.
  */
 export declare function formatAxisMagnitude(value: number): string;
 export declare function groupedFigureLines(groups: readonly StatisticFigureGroup[]): string[];

package/dist/src/Statistics/presentation.js

@@ -1,10 +1,8 @@
 const displayValue = (value) => value === null || value === undefined ? '—' : String(value);
 /**
- * Formats a y-axis magnitude with the correct thousands/millions/billions
- * suffix — the vendored dither-chart default formatter only ever divides
- * once (`value / 1000`), so 844,000,000 renders as "844.0k" instead of
- * "844.0M". This formatter is passed in as a `tickFormatter` call-site
- * override; the vendored chart lib itself is untouched.
+ * Formats a magnitude with the correct thousands/millions/billions suffix,
+ * dividing as often as the size needs: 844,000,000 is "844.0M", never the
+ * "844.0k" a single division by 1000 gives.
  */
 export function formatAxisMagnitude(value) {
     const sign = value < 0 ? '-' : '';