@gaia-ai/addon-gaia-ui 0.15.2 → 0.16.1

package/dist/src/Component/badge/index.d.ts

@@ -0,0 +1,11 @@
+import type { RGBA, VNode } from '@opentui/core';
+export type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info' | 'secondary';
+/** The unbordered badge — the only form the TUI draws. */
+export interface BadgeProps {
+    id: string;
+    label: string;
+    variant?: BadgeVariant;
+    color?: RGBA;
+    bold?: boolean;
+}
+export declare const Badge: ({ id, label, variant, color, bold, }: BadgeProps) => VNode;

package/dist/src/Component/badge/index.js

@@ -0,0 +1,10 @@
+import { FOREGROUND, FOREGROUND_HIGHLIGHT } from '../../lib/theme.js';
+import { BOLD, paragraphNode, plainRun } from '../../lib/vnode.js';
+// Every status variant shares the highlight slot: the palette names roles, not
+// hues (`lib/theme.ts`).
+const variantColor = (variant) => variant === 'secondary' ? FOREGROUND : FOREGROUND_HIGHLIGHT;
+export const Badge = ({ id, label, variant = 'default', color, bold = false, }) => paragraphNode({
+    id,
+    runs: [plainRun(label, bold ? BOLD : 0)],
+    fg: color ?? variantColor(variant),
+});

package/dist/src/Component/bar-chart/index.d.ts

@@ -0,0 +1,16 @@
+import { type RGBA, type VNode } from '@opentui/core';
+export interface BarChartItem {
+    label: string;
+    value: number;
+    color?: RGBA;
+}
+/** The horizontal chart — the only direction the TUI draws. */
+export interface BarChartProps {
+    id: string;
+    data: readonly BarChartItem[];
+    width?: number;
+    showValues?: boolean;
+    title?: string;
+    maxValue?: number;
+}
+export declare const BarChart: ({ id, data, width, showValues, title, maxValue: suppliedMax, }: BarChartProps) => VNode;

package/dist/src/Component/bar-chart/index.js

@@ -0,0 +1,63 @@
+import { BoxRenderable, h } from '@opentui/core';
+import { FOREGROUND, FOREGROUND_HIGHLIGHT } from '../../lib/theme.js';
+import { BOLD, DIM, paragraphNode, plainRun } from '../../lib/vnode.js';
+const BAR_CHAR = '█';
+const EMPTY_CHAR = '░';
+const pad = (str, length) => {
+    if (str.length >= length) {
+        return str.slice(0, length);
+    }
+    return str.padEnd(length);
+};
+const padStart = (str, length) => {
+    if (str.length >= length) {
+        return str.slice(0, length);
+    }
+    return ' '.repeat(length - str.length) + str;
+};
+export const BarChart = ({ id, data, width = 30, showValues = true, title, maxValue: suppliedMax, }) => {
+    if (data.length === 0)
+        return paragraphNode({
+            id,
+            runs: [plainRun('No data', DIM)],
+            fg: FOREGROUND,
+        });
+    const maxValue = suppliedMax ?? Math.max(...data.map((d) => d.value));
+    const maxLabelLen = Math.max(...data.map((d) => d.label.length));
+    const maxValLen = Math.max(...data.map((d) => String(d.value).length));
+    const barWidth = width - maxLabelLen - maxValLen - 3;
+    return h(BoxRenderable, { id, flexDirection: 'column' }, ...(title
+        ? [
+            paragraphNode({
+                id: `${id}-title`,
+                runs: [plainRun(title, BOLD)],
+                fg: FOREGROUND_HIGHLIGHT,
+            }),
+        ]
+        : []), 
+    // One bar per data item, in the caller's order.
+    ...data.map((item, index) => {
+        const row = `${id}-${index}`;
+        const filled = maxValue === 0
+            ? 0
+            : Math.round((item.value / maxValue) * Math.max(1, barWidth));
+        const empty = Math.max(0, barWidth - filled);
+        return h(BoxRenderable, { id: row, flexDirection: 'row', gap: 1 }, paragraphNode({
+            id: `${row}-label`,
+            runs: [plainRun(pad(item.label, maxLabelLen))],
+            fg: FOREGROUND,
+        }), paragraphNode({
+            id: `${row}-bar`,
+            runs: [plainRun(BAR_CHAR.repeat(filled) + EMPTY_CHAR.repeat(empty))],
+            fg: item.color ?? FOREGROUND_HIGHLIGHT,
+        }), ...(showValues
+            ? [
+                paragraphNode({
+                    id: `${row}-value`,
+                    runs: [plainRun(padStart(String(item.value), maxValLen), DIM)],
+                    fg: FOREGROUND,
+                }),
+            ]
+            : []));
+    }));
+};

package/dist/src/Component/card/index.d.ts

@@ -0,0 +1,16 @@
+import { type RGBA, type VNode } from '@opentui/core';
+export type BorderStyle = 'single' | 'double' | 'rounded' | 'heavy';
+export interface CardProps {
+    /** Entity-derived; the card's parts derive their ids from it. */
+    id: string;
+    title?: string;
+    subtitle?: string;
+    children: readonly VNode[];
+    borderColor?: RGBA;
+    width?: number | `${number}%`;
+    onMouseDown?: () => void;
+    borderStyle?: BorderStyle;
+    paddingX?: number;
+    paddingY?: number;
+}
+export declare const Card: ({ id, title, subtitle, children, borderColor, width, onMouseDown, borderStyle, paddingX, paddingY, }: CardProps) => VNode;

package/dist/src/Component/card/index.js

@@ -0,0 +1,39 @@
+import { BoxRenderable, h } from '@opentui/core';
+import { BORDER, FOREGROUND } from '../../lib/theme.js';
+import { BOLD, DIM, paragraphNode, plainRun, pressHandler, } from '../../lib/vnode.js';
+export const Card = ({ id, title, subtitle, children, borderColor, width, onMouseDown, borderStyle = 'rounded', paddingX = 1, paddingY = 0, }) => {
+    const heading = [];
+    if (title)
+        heading.push(paragraphNode({
+            id: `${id}-title`,
+            runs: [plainRun(title, BOLD)],
+            fg: FOREGROUND,
+        }));
+    if (subtitle)
+        heading.push(paragraphNode({
+            id: `${id}-subtitle`,
+            runs: [plainRun(subtitle, DIM)],
+            fg: FOREGROUND,
+        }));
+    return h(BoxRenderable, {
+        id,
+        flexDirection: 'column',
+        border: true,
+        borderStyle,
+        borderColor: borderColor ?? BORDER,
+        width: width ?? 'auto',
+        paddingLeft: paddingX,
+        paddingRight: paddingX,
+        paddingTop: paddingY,
+        paddingBottom: paddingY,
+        onMouseDown: pressHandler(onMouseDown),
+    }, ...(heading.length > 0
+        ? [
+            h(BoxRenderable, {
+                id: `${id}-heading`,
+                flexDirection: 'column',
+                paddingBottom: 1,
+            }, ...heading),
+        ]
+        : []), h(BoxRenderable, { id: `${id}-content`, flexDirection: 'column' }, ...children));
+};

package/dist/src/Component/divider/index.d.ts

@@ -0,0 +1,7 @@
+import { type RGBA, type VNode } from '@opentui/core';
+export interface DividerProps {
+    id: string;
+    color?: RGBA;
+}
+/** The horizontal, unlabelled rule — the only shape the TUI draws. */
+export declare const Divider: ({ id, color }: DividerProps) => VNode;

package/dist/src/Component/divider/index.js

@@ -0,0 +1,13 @@
+import { BoxRenderable, h } from '@opentui/core';
+import { BORDER } from '../../lib/theme.js';
+// One array for every divider: `border` re-applies Yoga borders when it is
+// handed a different value, and a patch restates it on every draw.
+const TOP = ['top'];
+/** The horizontal, unlabelled rule — the only shape the TUI draws. */
+export const Divider = ({ id, color }) => h(BoxRenderable, { id, flexDirection: 'row' }, h(BoxRenderable, {
+    id: `${id}-rule`,
+    flexGrow: 1,
+    borderStyle: 'single',
+    borderColor: color ?? BORDER,
+    border: TOP,
+}));

package/dist/src/Component/heat-map/index.d.ts

@@ -0,0 +1,21 @@
+import { type RGBA, type VNode } from '@opentui/core';
+export interface HeatMapProps {
+    id: string;
+    data: number[][];
+    rowLabels?: string[];
+    colLabels?: string[];
+    cellLabels?: string[][];
+    /** Low to high; indexed palette slots only. */
+    colorScale?: readonly RGBA[];
+    cellWidth?: number;
+    showValues?: boolean;
+    showLegend?: boolean;
+    minValue?: number;
+    maxValue?: number;
+}
+/**
+ * Low → high intensity as three palette slots, so the scale follows the
+ * operator's terminal theme like every other colour the cockpit paints.
+ */
+export declare const HEAT_SCALE: readonly RGBA[];
+export declare const HeatMap: ({ id, data, rowLabels, colLabels, cellLabels, colorScale, cellWidth, showValues, showLegend, minValue, maxValue, }: HeatMapProps) => VNode;

package/dist/src/Component/heat-map/index.js

@@ -0,0 +1,86 @@
+import { BoxRenderable, h } from '@opentui/core';
+import { FOREGROUND, FOREGROUND_ACTIVE, FOREGROUND_HIGHLIGHT, } from '../../lib/theme.js';
+import { DIM, paragraphNode, plainRun, } from '../../lib/vnode.js';
+/**
+ * Low → high intensity as three palette slots, so the scale follows the
+ * operator's terminal theme like every other colour the cockpit paints.
+ */
+export const HEAT_SCALE = [
+    FOREGROUND,
+    FOREGROUND_HIGHLIGHT,
+    FOREGROUND_ACTIVE,
+];
+const SHADE_CHARS = [' ', '░', '▒', '▓', '█'];
+const getColorForValue = (value, min, max, scale) => {
+    if (max === min)
+        return scale[Math.floor(scale.length / 2)] ?? FOREGROUND;
+    const t = (value - min) / (max - min);
+    const index = Math.min(scale.length - 1, Math.max(0, Math.round(t * (scale.length - 1))));
+    return scale[index] ?? scale[0] ?? FOREGROUND;
+};
+const getShadeForValue = (value, min, max) => {
+    if (max === min)
+        return SHADE_CHARS[2] ?? '▒';
+    const t = (value - min) / (max - min);
+    const index = Math.min(SHADE_CHARS.length - 1, Math.max(0, Math.round(t * (SHADE_CHARS.length - 1))));
+    return SHADE_CHARS[index] ?? SHADE_CHARS[0] ?? ' ';
+};
+const padCenter = (value, width) => {
+    if (value.length >= width)
+        return value;
+    const total = width - value.length;
+    const left = Math.floor(total / 2);
+    return ' '.repeat(left) + value + ' '.repeat(total - left);
+};
+const padStart = (value, width) => value.length >= width ? value.slice(0, width) : value.padStart(width);
+/** One grid row as one text: the cells touch, so their runs are the row. */
+const gridRow = (id, runs) => paragraphNode({
+    id,
+    runs,
+    fg: FOREGROUND,
+    wrapMode: 'none',
+    flexShrink: 0,
+});
+export const HeatMap = ({ id, data, rowLabels, colLabels, cellLabels, colorScale = HEAT_SCALE, cellWidth = 5, showValues = false, showLegend = true, minValue, maxValue, }) => {
+    const firstRow = data[0];
+    if (data.length === 0 || !firstRow || firstRow.length === 0)
+        return paragraphNode({
+            id,
+            runs: [plainRun('No data', DIM)],
+            fg: FOREGROUND,
+        });
+    const numCols = firstRow.length;
+    const allValues = data.flat();
+    const min = minValue ?? Math.min(...allValues);
+    const max = maxValue ?? Math.max(...allValues);
+    const rowLabelWidth = rowLabels
+        ? Math.max(...rowLabels.map((label) => label.length)) + 1
+        : 0;
+    const rows = [];
+    if (colLabels)
+        rows.push(gridRow(`${id}-columns`, [
+            ...(rowLabelWidth > 0
+                ? [plainRun(' '.repeat(rowLabelWidth + 1), DIM, FOREGROUND)]
+                : []),
+            ...Array.from({ length: numCols }, (_, column) => plainRun(padCenter(colLabels[column] ?? String(column), cellWidth), DIM, FOREGROUND)),
+        ]));
+    data.forEach((row, rowIndex) => {
+        rows.push(gridRow(`${id}-row-${rowIndex}`, [
+            ...(rowLabels
+                ? [
+                    plainRun(`${padStart(rowLabels[rowIndex] ?? String(rowIndex), rowLabelWidth)} `, DIM, FOREGROUND),
+                ]
+                : []),
+            ...row.map((value, column) => plainRun(showValues
+                ? padCenter(cellLabels?.[rowIndex]?.[column] ?? String(Math.round(value)), cellWidth)
+                : getShadeForValue(value, min, max).repeat(cellWidth), 0, getColorForValue(value, min, max, colorScale))),
+        ]));
+    });
+    if (showLegend)
+        rows.push(h(BoxRenderable, { id: `${id}-legend`, flexDirection: 'row', marginTop: 1 }, gridRow(`${id}-legend-scale`, [
+            plainRun('Low ', DIM, FOREGROUND),
+            ...colorScale.map((colour) => plainRun('█ ', 0, colour)),
+            plainRun('High', DIM, FOREGROUND),
+        ])));
+    return h(BoxRenderable, { id, flexDirection: 'column' }, ...rows);
+};

package/dist/src/Component/key-value/index.d.ts

@@ -0,0 +1,18 @@
+import { type RGBA, type VNode } from '@opentui/core';
+export interface KeyValueItem {
+    key: string;
+    value: string;
+    /** Drawn underlined — the value is a link the click acts on. */
+    underline?: boolean;
+    color?: RGBA;
+    onMouseDown?: () => void;
+}
+export interface KeyValueProps {
+    id: string;
+    items: readonly KeyValueItem[];
+    keyWidth?: number;
+    separator?: string;
+    keyColor?: RGBA;
+    valueColor?: RGBA;
+}
+export declare const KeyValue: ({ id, items, keyWidth, separator, keyColor, valueColor, }: KeyValueProps) => VNode;

package/dist/src/Component/key-value/index.js

@@ -0,0 +1,30 @@
+import { BoxRenderable, h } from '@opentui/core';
+import { FOREGROUND } from '../../lib/theme.js';
+import { paragraphNode, plainRun, UNDERLINE } from '../../lib/vnode.js';
+export const KeyValue = ({ id, items, keyWidth, separator = ':', keyColor, valueColor, }) => {
+    const resolvedKeyWidth = keyWidth ?? Math.max(0, ...items.map((item) => item.key.length)) + 1;
+    const resolvedKeyColor = keyColor ?? FOREGROUND;
+    const resolvedValueColor = valueColor ?? FOREGROUND;
+    return h(BoxRenderable, { id, flexDirection: 'column', width: '100%' }, 
+    // A fixed list per owner, rebuilt whole from the model on every draw, so
+    // the position is a sound key for its rows.
+    ...items.map((item, index) => {
+        const row = `${id}-${index}`;
+        return h(BoxRenderable, { id: row, flexDirection: 'row', gap: 1, width: '100%' }, paragraphNode({
+            id: `${row}-key`,
+            runs: [plainRun(item.key.padEnd(resolvedKeyWidth, ' '))],
+            fg: resolvedKeyColor,
+        }), paragraphNode({
+            id: `${row}-separator`,
+            runs: [plainRun(separator)],
+            fg: resolvedKeyColor,
+        }), paragraphNode({
+            id: `${row}-value`,
+            runs: [plainRun(item.value, item.underline ? UNDERLINE : 0)],
+            fg: item.color ?? resolvedValueColor,
+            flexGrow: 1,
+            flexShrink: 1,
+            onMouseDown: item.onMouseDown,
+        }));
+    }));
+};

package/dist/src/Component/markdown/index.d.ts

@@ -1,3 +1,4 @@
+import { type VNode } from '@opentui/core';
 import type { MarkdownLine, MarkdownSpan } from '../../lib/markdown.js';
 import { type StyledLine, type StyledRun } from '../../lib/vnode.js';
 /**
@@ -24,11 +25,6 @@ export declare const styledRunOf: (span: MarkdownSpan) => StyledRun;
  * reads a span's flags.
  */
 export declare const styledLineOf: (line: MarkdownLine) => StyledLine;
-/**
- * The inverse of {@link styledLineOf}: already-painted runs as parser lines,
- * so a React painter can consume production rows without a source round trip.
- */
-export declare const markdownLineFromStyled: (line: StyledLine) => MarkdownLine;
 /** A `gaia_rich` body as the physical rows a surface draws or prints — D1. */
 export declare function markdownLines(body: string): StyledLine[];
 /** A line NOTHING parses — one unstyled run (D3's plain path, as a value). */
@@ -71,3 +67,37 @@ export declare function markdownRow(line: string): {
     text: string;
     bold: boolean;
 };
+export interface MarkdownProps {
+    id: string;
+    /** Markdown source, parsed with the production line/span parser. */
+    source: string;
+    width?: number;
+}
+export interface MarkdownLinesProps {
+    id: string;
+    /** Rows as {@link markdownLines} renders them. */
+    lines: readonly StyledLine[];
+    width?: number;
+    /** Brighter body copy — terminal cells have no font size. */
+    emphasis?: boolean;
+}
+/** Styled rows as one column of wrapped paragraphs, blank rows kept one high. */
+export declare const MarkdownLines: ({ id, lines, width, emphasis, }: MarkdownLinesProps) => VNode;
+/** A Markdown source, parsed and painted. */
+export declare const Markdown: ({ id, source, width }: MarkdownProps) => VNode;
+export interface HeadlineMarkdownProps {
+    id: string;
+    headline: string;
+    children: readonly VNode[];
+    paddingBottom?: number;
+    paddingLeft?: number;
+    /**
+     * The id the HEADLINE row carries — a selectable entry's row id, which the
+     * kernel scrolls to and binds clicks on. The headline text inside it owns
+     * {@link onMouseDown} and consumes the press.
+     */
+    headlineId?: string;
+    onMouseDown?: () => void;
+}
+/** A `* headline` row above an indented body. */
+export declare const HeadlineMarkdown: ({ id, headline, children, paddingBottom, paddingLeft, headlineId, onMouseDown, }: HeadlineMarkdownProps) => VNode;

package/dist/src/Component/markdown/index.js

@@ -28,6 +28,11 @@
 // is DATA — a {@link StyledLine}: rendered text, resolved runs, and the row's own
 // weight — and `Component/section-list`'s `lineText` keeps working unchanged.
 //
+// THE PAINTER sits here too (`Markdown`, `MarkdownLines`, `HeadlineMarkdown`):
+// it turns those same styled rows into renderables, so there is one style rule
+// for a body whether it is piped or drawn, and no second mapping of span kinds
+// to colours anywhere else.
+//
 // WHY `plainLine` AND `indentLine` LIVE HERE rather than in the parser: neither
 // parses. `plainLine` is D3's plain path expressed as a value, and `indentLine`
 // prepends blanks to an ALREADY RENDERED line — which is the whole point of it
@@ -35,8 +40,9 @@
 // CommonMark, so applying the indent after rendering is what makes that
 // impossible rather than merely unlikely, Fact 9). Both are shell work on a
 // rendered line, so they sit with the shell.
+import { BoxRenderable, h } from '@opentui/core';
 import { markdownLines as parseMarkdown } from '../../lib/markdown.js';
-import { BOLD, BORDER, DIM, ITALIC, } from '../../lib/vnode.js';
+import { BOLD, BORDER, DIM, FOREGROUND, FOREGROUND_HIGHLIGHT, ITALIC, paragraphNode, plainRun, } from '../../lib/vnode.js';
 /**
  * ONE SPAN AS THE RUN A RENDERER CAN PAINT — D7/D11, and the mapping this
  * component owns.
@@ -74,21 +80,6 @@ export const styledLineOf = (line) => ({
     runs: line.spans.map(styledRunOf),
     heading: line.heading,
 });
-/**
- * The inverse of {@link styledLineOf}: already-painted runs as parser lines,
- * so a React painter can consume production rows without a source round trip.
- */
-export const markdownLineFromStyled = (line) => ({
-    text: line.text,
-    heading: line.heading,
-    spans: line.runs.map((run) => ({
-        text: run.text,
-        ...((run.attributes & BOLD) !== 0 ? { bold: true } : {}),
-        ...((run.attributes & ITALIC) !== 0 ? { italic: true } : {}),
-        ...((run.attributes & DIM) !== 0 ? { dim: true } : {}),
-        ...(run.fg !== undefined ? { code: true } : {}),
-    })),
-});
 /** A `gaia_rich` body as the physical rows a surface draws or prints — D1. */
 export function markdownLines(body) {
     return parseMarkdown(body).map(styledLineOf);
@@ -146,3 +137,68 @@ export function markdownRow(line) {
     const md = /^(#{1,6})\s+(.*)$/.exec(line);
     return md ? { text: md[2] ?? '', bold: true } : { text: line, bold: false };
 }
+/** Collapse blank runs to one blank row and trim blank rows at either end. */
+const compactLines = (lines) => {
+    const compacted = [];
+    for (const line of lines) {
+        if (line.text === '' && compacted.at(-1)?.text === '')
+            continue;
+        compacted.push(line);
+    }
+    while (compacted.at(0)?.text === '')
+        compacted.shift();
+    while (compacted.at(-1)?.text === '')
+        compacted.pop();
+    return compacted;
+};
+/**
+ * A row's runs as painted: a heading or an emphasised body is bold and
+ * highlighted, and a run's own colour (code) wins over both.
+ */
+const paintedRuns = (line, emphasis) => {
+    const strong = line.heading || emphasis;
+    return line.runs.map((run) => plainRun(run.text, run.attributes | (strong ? BOLD : 0), run.fg ?? (strong ? FOREGROUND_HIGHLIGHT : FOREGROUND)));
+};
+/** Styled rows as one column of wrapped paragraphs, blank rows kept one high. */
+export const MarkdownLines = ({ id, lines, width, emphasis = false, }) => h(BoxRenderable, { id, flexDirection: 'column', width: width ?? '100%' }, 
+// The rows of one body, in order: their position is their identity, and
+// every row restates all of its props.
+...compactLines(lines).map((line, index) => line.text === ''
+    ? h(BoxRenderable, { id: `${id}-${index}`, height: 1 })
+    : paragraphNode({
+        id: `${id}-${index}`,
+        runs: paintedRuns(line, emphasis),
+        fg: FOREGROUND,
+        width: '100%',
+        flexShrink: 0,
+    })));
+/** A Markdown source, parsed and painted. */
+export const Markdown = ({ id, source, width }) => MarkdownLines({
+    id,
+    lines: markdownLines(source),
+    ...(width === undefined ? {} : { width }),
+});
+/** A `* headline` row above an indented body. */
+export const HeadlineMarkdown = ({ id, headline, children, paddingBottom = 1, paddingLeft = 1, headlineId, onMouseDown, }) => {
+    const row = headlineId ?? `${id}-headline`;
+    return h(BoxRenderable, {
+        id,
+        flexDirection: 'column',
+        width: '100%',
+        flexShrink: 0,
+        paddingBottom,
+    }, h(BoxRenderable, { id: row, flexDirection: 'row', flexShrink: 0 }, paragraphNode({
+        id: `${row}-text`,
+        runs: [plainRun(`* ${headline}`)],
+        fg: FOREGROUND,
+        width: '100%',
+        flexShrink: 0,
+        onMouseDown,
+    })), h(BoxRenderable, {
+        id: `${id}-body`,
+        flexDirection: 'column',
+        width: '100%',
+        flexShrink: 0,
+        paddingLeft,
+    }, ...children));
+};

package/dist/src/Entity/ticket/Component/demo-statistics.d.ts

@@ -0,0 +1,14 @@
+import type { StatisticFigureGroup } from '../../../Statistics/client.js';
+/**
+ * Local example data for the optional Statistics demo tab.
+ *
+ * Shaped as the server's configured-figure contract, so the demo paints through
+ * the same `StatisticsFigures` composition the production Stats screens use
+ * rather than through a separate set of demo-only widgets. No value here is
+ * read from or written to a control plane.
+ */
+export interface StatisticExample {
+    readonly name: string;
+    readonly groups: readonly StatisticFigureGroup[];
+}
+export declare const STATISTIC_EXAMPLES: readonly StatisticExample[];

package/dist/src/Entity/ticket/Component/demo-statistics.js

@@ -0,0 +1,88 @@
+const DAYS = [
+    '2026-09-21',
+    '2026-09-22',
+    '2026-09-23',
+    '2026-09-24',
+    '2026-09-25',
+    '2026-09-26',
+    '2026-09-27',
+];
+const WEEKDAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+const STATES = ['Ready', 'Coding', 'Review', 'Done'];
+const figure = (id, label, widget, categories, measurements) => {
+    const empty = measurements.every((measurement) => Object.values(measurement.values).every((value) => value === null));
+    return {
+        id,
+        label,
+        description: '',
+        widget,
+        generated: '2026-09-27T00:00:00Z',
+        filters: {},
+        categories,
+        measurements: measurements.map((measurement) => ({
+            value_type: 'integer',
+            unit: 'count',
+            ...measurement,
+        })),
+        empty: {
+            is_empty: empty,
+            message: empty ? 'No example values for this scenario.' : null,
+        },
+        cache: { max_age: 0, contexts: [], tags: [] },
+    };
+};
+const example = (name, states, trend) => {
+    const value = (values, index) => values[index] ?? null;
+    return {
+        name,
+        groups: [
+            {
+                id: 'demo',
+                label: 'Example statistics',
+                figures: [
+                    figure('demo-states', 'Tickets by state', 'matrix', STATES.map((state, index) => ({
+                        key: `state-${index}`,
+                        label: state,
+                    })), [
+                        {
+                            id: 'tickets',
+                            label: 'Tickets',
+                            values: Object.fromEntries(STATES.map((_, index) => [
+                                `state-${index}`,
+                                value(states, index),
+                            ])),
+                        },
+                    ]),
+                    figure('demo-share', 'Share by state', 'grouped_horizontal_bars', STATES.map((state, index) => ({
+                        key: `share-${index}`,
+                        label: state,
+                    })), [
+                        {
+                            id: 'share',
+                            label: 'Tickets',
+                            values: Object.fromEntries(STATES.map((_, index) => [
+                                `share-${index}`,
+                                value(states, index),
+                            ])),
+                        },
+                    ]),
+                    figure('demo-completed', 'Completed per day', 'line', DAYS.map((day, index) => ({
+                        key: day,
+                        label: WEEKDAYS[index] ?? day,
+                    })), [
+                        {
+                            id: 'completed',
+                            label: 'Completed',
+                            values: Object.fromEntries(DAYS.map((day, index) => [day, value(trend, index)])),
+                        },
+                    ]),
+                ],
+            },
+        ],
+    };
+};
+export const STATISTIC_EXAMPLES = [
+    example('Steady week', [12, 7, 4, 26], [3, 5, 4, 8, 6, 9, 11]),
+    example('Busy week', [5, 14, 8, 42], [5, 8, 6, 13, 9, 15, 18]),
+    example('Empty project', [], []),
+];

package/dist/src/Entity/ticket/Component/react-statistics.d.ts

@@ -1,22 +1,14 @@
-export declare const STATISTIC_EXAMPLES: readonly [{
-    readonly name: "Steady week";
-    readonly states: readonly [12, 7, 4, 26];
-    readonly trend: readonly [3, 5, 4, 8, 6, 9, 11];
-    readonly progress: 65;
-    readonly budget: 42;
-}, {
-    readonly name: "Busy week";
-    readonly states: readonly [5, 14, 8, 42];
-    readonly trend: readonly [5, 8, 6, 13, 9, 15, 18];
-    readonly progress: 90;
-    readonly budget: 78;
-}, {
-    readonly name: "Empty project";
-    readonly states: readonly [];
-    readonly trend: readonly [];
-    readonly progress: 0;
-    readonly budget: 0;
-}];
-export declare function ReactStatistics({ scenario }: {
-    scenario: number;
-}): import("react").ReactNode;
+import { type VNode } from '@opentui/core';
+export { STATISTIC_EXAMPLES } from './demo-statistics.js';
+export interface DemoStatisticsProps {
+    readonly id: string;
+    readonly scenario: number;
+    /** The figure grid's last measured width, and where a new one is reported. */
+    readonly width: number;
+    readonly onResize: (width: number) => void;
+}
+/**
+ * The demo's chart area: a labelled local scenario painted through the same
+ * `StatisticsFigures` the production Stats screens use.
+ */
+export declare function DemoStatistics({ id, scenario, width, onResize, }: DemoStatisticsProps): VNode;