@textui/widgets 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Softov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,69 @@
+# @textui/widgets
+
+The component catalog: eighty-seven components built out of the four primitives
+in [`@textui/core`](https://github.com/softov/textui/tree/main/packages/core).
+
+```bash
+npm install @textui/widgets
+```
+
+```tsx
+import { Card, Row, Badge } from '@textui/widgets';
+
+<Card title="Services">
+  <Row gap={2}>
+    <text content="api" />
+    <Badge label="up" tone="success" />
+  </Row>
+</Card>
+```
+
+## Importing is registering
+
+There is nothing to call first. `<Card/>` compiles to a node that carries the
+imported function, and the runtime uses that in preference to any registry - so
+a screen written in JSX renders with the registry empty.
+
+`registerBuiltins(app)` exists for the other case: a screen named in data, where
+a string has to resolve to something.
+
+```ts
+import { createApp } from '@textui/core';
+import { registerBuiltins } from '@textui/widgets';
+
+const app = createApp({ terminal, root, onBoot: registerBuiltins });
+```
+
+It registers the catalog, the surface layouts and the built-in shells in one
+call, and returns one `Disposable` that takes all of it back out. For a static
+render, `renderOnce(node, { components: CATALOG })` is the same idea.
+
+## What is here
+
+| Group | Count | |
+|---|---|---|
+| `layout` | 10 | Row, Column, Grid, Panel, Splitter, ScrollView |
+| `display` | 14 | Heading, Badge, Card, Alert, Progress, Spinner, Timeline |
+| `control` | 9 | Button, TextInput, TextArea, Select, Checkbox, RadioGroup, Slider, Switch |
+| `data` | 8 | Table, Tree, List, CodeViewer, MarkdownView, Feed |
+| `overlay` | 8 | Dialog, CommandPalette, PathPicker, Toast, Tooltip |
+| `navigation` | 7 | Tabs, Menu, Breadcrumb, Wizard |
+| `surface` | 9 | Mounts and layouts - how a screen is divided |
+| `chart` | 7 | Sparkline, BarChart, LineChart, Histogram, Heatmap, Gauge |
+| `form` | 5 | Form, Field, validation |
+| `shells` | 4 | The frame around an application |
+| `panel` | 1 | A pane that opens a resource with whatever viewer is registered |
+
+One file per component, in a folder per group - `src/display/badge.ts`. `ls
+src/display/` is the inventory.
+
+## Runtime
+
+No dependencies beyond `@textui/core`, and no `node:` imports. Node 22+ and Bun.
+
+## Documentation
+
+<https://softov.github.io/textui/>
+
+Every component has its own page, with the prop table generated from the source
+and a working example - see [`docs/components/`](https://softov.github.io/textui/components/).

package/dist/chart/area-chart.d.ts

@@ -0,0 +1,4 @@
+import type { LineChartProps } from './shared.js';
+export type AreaChartProps = LineChartProps;
+export declare const AreaChart: (props: LineChartProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=area-chart.d.ts.map

package/dist/chart/area-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"area-chart.d.ts","sourceRoot":"","sources":["../../src/chart/area-chart.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC;AAE5C,eAAO,MAAM,SAAS,gEAErB,CAAC"}

package/dist/chart/area-chart.js

@@ -0,0 +1,3 @@
+import { defineComponent, h } from '@textui/core';
+import { LineChart } from './line-chart.js';
+export const AreaChart = defineComponent('AreaChart', (props) => h(LineChart, { area: true, ...props }));

package/dist/chart/bar-chart.d.ts

@@ -0,0 +1,32 @@
+import type { BoxProps, SemanticVariant } from '@textui/core';
+export interface BarChartProps extends BoxProps {
+    data: {
+        label: string;
+        value: number;
+        tone?: SemanticVariant;
+    }[];
+    max?: number;
+    /** Cells the bars occupy, not counting labels. Horizontal only - see below. */
+    barWidth?: number;
+    showValue?: boolean;
+    format?(value: number): string;
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * How many cells across each bar is, standing up.
+     *
+     * Vertical only, and one by default - which is what it always was, and is a
+     * hairline rather than a bar. Two or three read as bars, and the label under
+     * each one grows to match, so `columnWidth: 2` gets two letters instead of
+     * an initial.
+     *
+     * The two axes are named separately on purpose. `barWidth` is how far a
+     * horizontal bar runs, which is the *value* axis; this is the thickness of a
+     * vertical one, which is the category axis. Lying flat they swap over, and a
+     * single prop meaning both would mean neither.
+     */
+    columnWidth?: number;
+    /** Rows tall, standing up. Vertical only. */
+    chartHeight?: number;
+}
+export declare const BarChart: (props: BarChartProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=bar-chart.d.ts.map

package/dist/chart/bar-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar-chart.d.ts","sourceRoot":"","sources":["../../src/chart/bar-chart.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAI9D,MAAM,WAAW,aAAc,SAAQ,QAAQ;IAC7C,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,eAAe,CAAA;KAAE,EAAE,CAAC;IACjE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;;;;;;;;;;;OAYG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,+DA2CnB,CAAC"}

package/dist/chart/bar-chart.js

@@ -0,0 +1,32 @@
+import { defineComponent, h, stringWidth, useTheme } from '@textui/core';
+import { TONE, VerticalBars } from './shared.js';
+export const BarChart = defineComponent('BarChart', (props) => {
+    const theme = useTheme();
+    const { data, max, barWidth = 20, showValue = true, format, orientation = 'horizontal', columnWidth, chartHeight = 8, ...rest } = props;
+    const hi = max ?? Math.max(1, ...data.map((d) => d.value));
+    const labelWidth = Math.max(0, ...data.map((d) => stringWidth(d.label)));
+    if (orientation === 'vertical') {
+        return h(VerticalBars, {
+            data,
+            max: hi,
+            height: chartHeight,
+            ...(columnWidth === undefined ? {} : { columnWidth }),
+            ...rest,
+        });
+    }
+    const partials = theme.glyphs.progressPartial;
+    return h('box', { direction: 'column', ...rest }, ...data.map((item) => {
+        const exact = (item.value / hi) * barWidth;
+        const full = Math.floor(exact);
+        const rem = exact - full;
+        const partial = full < barWidth && rem > 0
+            ? (partials[Math.floor(rem * partials.length)] ?? '')
+            : '';
+        return h('box', { key: item.label, direction: 'row', gap: 1 }, h('box', { width: labelWidth }, h('text', { content: item.label, fg: 'muted' })), h('text', {
+            content: theme.glyphs.progressFull.repeat(full) + partial,
+            fg: TONE[item.tone ?? 'accent'],
+        }), showValue
+            ? h('text', { content: format ? format(item.value) : String(item.value), fg: 'muted' })
+            : null);
+    }));
+});

package/dist/chart/gauge.d.ts

@@ -0,0 +1,26 @@
+import type { BoxProps, SemanticVariant } from '@textui/core';
+export interface GaugeProps extends BoxProps {
+    value: number;
+    min?: number;
+    max?: number;
+    label?: string;
+    /** Bands that colour the reading by range. */
+    thresholds?: {
+        at: number;
+        tone: SemanticVariant;
+    }[];
+    format?(value: number): string;
+    gaugeWidth?: number;
+    /**
+     * Push the gauge away from the label, to the right edge of the row.
+     *
+     * The label's cell stretches, so it stays at the left and
+     * the track ends up hard against the right - which is what makes a column of
+     * these read as a table rather than as a ragged stack. Needs a row wider
+     * than its contents to have any effect, so the caller has to have given it a
+     * width or a `flex`.
+     */
+    spacer?: boolean;
+}
+export declare const Gauge: (props: GaugeProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=gauge.d.ts.map

package/dist/chart/gauge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gauge.d.ts","sourceRoot":"","sources":["../../src/chart/gauge.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAI9D,MAAM,WAAW,UAAW,SAAQ,QAAQ;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,UAAU,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,eAAe,CAAA;KAAE,EAAE,CAAC;IACrD,MAAM,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,KAAK,4DAkChB,CAAC"}

package/dist/chart/gauge.js

@@ -0,0 +1,26 @@
+import { defineComponent, h, useTheme } from '@textui/core';
+import { TONE } from './shared.js';
+export const Gauge = defineComponent('Gauge', (props) => {
+    const theme = useTheme();
+    const { value, min = 0, max = 100, label, thresholds = [], format, gaugeWidth = 20, spacer, ...rest } = props;
+    const ratio = Math.max(0, Math.min(1, (value - min) / (max - min || 1)));
+    const filled = Math.round(ratio * gaugeWidth);
+    // The highest threshold at or below the value wins.
+    const tone = [...thresholds]
+        .sort((a, b) => b.at - a.at)
+        .find((t) => value >= t.at)?.tone ?? 'accent';
+    return h('box', { direction: 'row', gap: 1, role: 'meter', label, ...rest }, label !== undefined
+        // The label's own cell stretches rather than a `spacer` child going in
+        // beside it: a child would be free but its gap would not, and a row
+        // sized exactly to its contents would truncate the gauge to fit a space.
+        ? h('text', { content: label, fg: 'muted', ...(spacer === true ? { flex: 1 } : {}) })
+        : spacer === true ? h('spacer', {}) : null, h('text', {
+        content: theme.glyphs.progressFull.repeat(filled) +
+            theme.glyphs.progressEmpty.repeat(Math.max(0, gaugeWidth - filled)),
+        fg: TONE[tone],
+    }), h('text', {
+        content: format ? format(value) : `${Math.round(ratio * 100)}%`,
+        fg: TONE[tone],
+        bold: true,
+    }));
+});

package/dist/chart/heatmap.d.ts

@@ -0,0 +1,13 @@
+import type { BoxProps } from '@textui/core';
+export interface HeatmapProps extends BoxProps {
+    /** Rows of values. All rows should be the same length. */
+    data: number[][];
+    min?: number;
+    max?: number;
+    rowLabels?: string[];
+    columnLabels?: string[];
+    /** Glyph ramp, lowest to highest. Defaults to the theme's blocks. */
+    ramp?: readonly string[];
+}
+export declare const Heatmap: (props: HeatmapProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=heatmap.d.ts.map

package/dist/chart/heatmap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heatmap.d.ts","sourceRoot":"","sources":["../../src/chart/heatmap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAI7C,MAAM,WAAW,YAAa,SAAQ,QAAQ;IAC5C,0DAA0D;IAC1D,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,qEAAqE;IACrE,IAAI,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CAC1B;AAED,eAAO,MAAM,OAAO,8DAiClB,CAAC"}

package/dist/chart/heatmap.js

@@ -0,0 +1,27 @@
+import { defineComponent, h, stringWidth, useTheme } from '@textui/core';
+import { bounds } from './shared.js';
+export const Heatmap = defineComponent('Heatmap', (props) => {
+    const theme = useTheme();
+    const { data, min, max, rowLabels, columnLabels, ramp, ...rest } = props;
+    const glyphs = ramp ?? theme.glyphs.blocks;
+    const flat = data.flat();
+    const [lo, hi] = bounds(flat, min, max);
+    const labelWidth = rowLabels ? Math.max(0, ...rowLabels.map(stringWidth)) : 0;
+    return h('box', { direction: 'column', ...rest }, columnLabels
+        ? h('box', { direction: 'row', gap: 0 }, labelWidth ? h('box', { width: labelWidth + 1 }) : null, h('text', {
+            content: columnLabels.map((l) => l.slice(0, 1)).join(''),
+            fg: 'subtle',
+        }))
+        : null, ...data.map((row, y) => h('box', { key: y, direction: 'row', gap: rowLabels ? 1 : 0 }, rowLabels
+        ? h('box', { width: labelWidth }, h('text', { content: rowLabels[y] ?? '', fg: 'muted' }))
+        : null, h('text', {
+        content: row
+            .map((v) => {
+            const ratio = (v - lo) / (hi - lo);
+            const index = Math.max(0, Math.min(glyphs.length - 1, Math.round(ratio * (glyphs.length - 1))));
+            return glyphs[index];
+        })
+            .join(''),
+        fg: 'accent',
+    }))));
+});

package/dist/chart/histogram.d.ts

@@ -0,0 +1,12 @@
+import type { BoxProps, SemanticVariant } from '@textui/core';
+export interface HistogramProps extends BoxProps {
+    values: number[];
+    /** Number of buckets. */
+    buckets?: number;
+    min?: number;
+    max?: number;
+    tone?: SemanticVariant;
+    chartHeight?: number;
+}
+export declare const Histogram: (props: HistogramProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=histogram.d.ts.map

package/dist/chart/histogram.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"histogram.d.ts","sourceRoot":"","sources":["../../src/chart/histogram.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAI9D,MAAM,WAAW,cAAe,SAAQ,QAAQ;IAC9C,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,yBAAyB;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,SAAS,gEAqBpB,CAAC"}

package/dist/chart/histogram.js

@@ -0,0 +1,22 @@
+import { defineComponent, h } from '@textui/core';
+import { VerticalBars, bounds } from './shared.js';
+export const Histogram = defineComponent('Histogram', (props) => {
+    const { values, buckets = 12, min, max, tone = 'accent', chartHeight = 6, ...rest } = props;
+    const [lo, hi] = bounds(values, min, max);
+    const counts = new Array(buckets).fill(0);
+    for (const value of values) {
+        const ratio = (value - lo) / (hi - lo);
+        const index = Math.max(0, Math.min(buckets - 1, Math.floor(ratio * buckets)));
+        counts[index] = counts[index] + 1;
+    }
+    return h(VerticalBars, {
+        data: counts.map((count, i) => ({
+            label: String(Math.round(lo + ((hi - lo) * i) / buckets)),
+            value: count,
+            tone,
+        })),
+        max: Math.max(1, ...counts),
+        height: chartHeight,
+        ...rest,
+    });
+});

package/dist/chart/index.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentDefinition } from '@textui/core';
+/**
+ * Charts.
+ *
+ * A terminal chart has one cell of resolution vertically and one horizontally,
+ * so the honest approach is to pick glyphs that subdivide a cell - eight block
+ * levels, four braille dots - rather than to pretend at pixel plotting. Every
+ * chart here also states its numbers, because a shape without a scale is
+ * decoration.
+ */
+export * from './area-chart.js';
+export * from './bar-chart.js';
+export * from './gauge.js';
+export * from './heatmap.js';
+export * from './histogram.js';
+export * from './line-chart.js';
+export * from './sparkline.js';
+export type { LineChartProps, Series } from './shared.js';
+export declare const CHART_COMPONENTS: ComponentDefinition[];
+//# sourceMappingURL=index.d.ts.map

package/dist/chart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/chart/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AASxD;;;;;;;;GAQG;AACH,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,YAAY,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAE1D,eAAO,MAAM,gBAAgB,EAAE,mBAAmB,EAQjD,CAAC"}

package/dist/chart/index.js

@@ -0,0 +1,32 @@
+import { AreaChart } from './area-chart.js';
+import { BarChart } from './bar-chart.js';
+import { Gauge } from './gauge.js';
+import { Heatmap } from './heatmap.js';
+import { Histogram } from './histogram.js';
+import { LineChart } from './line-chart.js';
+import { Sparkline } from './sparkline.js';
+/**
+ * Charts.
+ *
+ * A terminal chart has one cell of resolution vertically and one horizontally,
+ * so the honest approach is to pick glyphs that subdivide a cell - eight block
+ * levels, four braille dots - rather than to pretend at pixel plotting. Every
+ * chart here also states its numbers, because a shape without a scale is
+ * decoration.
+ */
+export * from './area-chart.js';
+export * from './bar-chart.js';
+export * from './gauge.js';
+export * from './heatmap.js';
+export * from './histogram.js';
+export * from './line-chart.js';
+export * from './sparkline.js';
+export const CHART_COMPONENTS = [
+    { component: 'Sparkline', category: 'chart', renderer: { kind: 'function', render: Sparkline }, description: 'One row of block glyphs; eight levels per cell.' },
+    { component: 'BarChart', category: 'chart', renderer: { kind: 'function', render: BarChart }, description: 'Labelled bars, horizontal or vertical.' },
+    { component: 'LineChart', category: 'chart', renderer: { kind: 'function', render: LineChart }, description: 'Braille plot at 2x4 the cell resolution.' },
+    { component: 'AreaChart', category: 'chart', renderer: { kind: 'function', render: AreaChart }, description: 'A line chart, filled.' },
+    { component: 'Histogram', category: 'chart', renderer: { kind: 'function', render: Histogram }, description: 'Bucketed distribution.' },
+    { component: 'Gauge', category: 'chart', renderer: { kind: 'function', render: Gauge }, role: 'meter', description: 'A reading against thresholds.' },
+    { component: 'Heatmap', category: 'chart', renderer: { kind: 'function', render: Heatmap }, description: 'A grid of intensities.' },
+];

package/dist/chart/line-chart.d.ts

@@ -0,0 +1,7 @@
+import type { LineChartProps } from './shared.js';
+/**
+ * A line chart on a braille canvas: each cell holds a 2x4 dot grid, so a
+ * 40x8 chart really has 80x32 plot positions.
+ */
+export declare const LineChart: (props: LineChartProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=line-chart.d.ts.map

package/dist/chart/line-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"line-chart.d.ts","sourceRoot":"","sources":["../../src/chart/line-chart.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD;;;GAGG;AACH,eAAO,MAAM,SAAS,gEA+EpB,CAAC"}

package/dist/chart/line-chart.js

@@ -0,0 +1,75 @@
+import { defineComponent, fitTo, h, stringWidth, useTheme } from '@textui/core';
+import { TONE, bounds, resample } from './shared.js';
+/**
+ * A line chart on a braille canvas: each cell holds a 2x4 dot grid, so a
+ * 40x8 chart really has 80x32 plot positions.
+ */
+export const LineChart = defineComponent('LineChart', (props) => {
+    const theme = useTheme();
+    const { series, min, max, chartWidth, chartHeight = 8, axis = true, area = false, format, ...rest } = props;
+    const all = series.flatMap((s) => s.values);
+    const [lo, hi] = bounds(all, min, max);
+    const braille = theme.glyphs.blocks.length > 0 && theme.glyphs.spinner[0] !== '|';
+    const draw = (surface, ctx) => {
+        const { width, height } = surface.rect;
+        if (width <= 0 || height <= 0)
+            return;
+        for (const [index, s] of series.entries()) {
+            const color = ctx.color(TONE[s.tone ?? (index === 0 ? 'accent' : 'secondary')]);
+            const points = resample(s.values, braille ? width * 2 : width);
+            if (braille) {
+                // Accumulate dots per cell, then emit one braille glyph per cell.
+                const cells = new Map();
+                for (let px = 0; px < points.length; px++) {
+                    const value = points[px];
+                    const ratio = (value - lo) / (hi - lo);
+                    const py = Math.round((1 - ratio) * (height * 4 - 1));
+                    const startY = area ? py : py;
+                    const endY = area ? height * 4 - 1 : py;
+                    for (let y = startY; y <= endY; y++) {
+                        const cx = Math.floor(px / 2);
+                        const cy = Math.floor(y / 4);
+                        const key = `${cx},${cy}`;
+                        cells.set(key, (cells.get(key) ?? 0) | brailleBit(px % 2, y % 4));
+                    }
+                }
+                for (const [key, bits] of cells) {
+                    const [cx, cy] = key.split(',').map(Number);
+                    surface.put(cx, cy, String.fromCharCode(0x2800 + bits), { fg: color });
+                }
+                continue;
+            }
+            // No braille: fall back to block levels, one column per cell.
+            const blocks = theme.glyphs.blocks;
+            for (let x = 0; x < points.length && x < width; x++) {
+                const ratio = (points[x] - lo) / (hi - lo);
+                const y = Math.round((1 - ratio) * (height - 1));
+                const level = blocks[Math.max(0, Math.min(blocks.length - 1, Math.round(ratio * (blocks.length - 1))))];
+                surface.put(x, y, level, { fg: color });
+            }
+        }
+    };
+    const chart = h('canvas', {
+        draw,
+        flex: 1,
+        height: chartHeight,
+        ...(chartWidth !== undefined ? { width: chartWidth } : {}),
+    });
+    if (!axis)
+        return h('box', { direction: 'column', ...rest }, chart);
+    const fmt = format ?? ((v) => (Number.isInteger(v) ? String(v) : v.toFixed(1)));
+    const axisWidth = Math.max(stringWidth(fmt(hi)), stringWidth(fmt(lo)));
+    return h('box', { direction: 'column', ...rest }, h('box', { direction: 'row', gap: 1 }, h('box', { direction: 'column', width: axisWidth, height: chartHeight, justify: 'between' }, h('text', { content: fitTo(fmt(hi), axisWidth, 'right'), fg: 'subtle' }), h('text', { content: fitTo(fmt(lo), axisWidth, 'right'), fg: 'subtle' })), chart), series.some((s) => s.label)
+        ? h('box', { direction: 'row', gap: 2 }, ...series.map((s, i) => h('box', { key: i, direction: 'row', gap: 1 }, h('text', { content: theme.glyphs.bulletFilled, fg: TONE[s.tone ?? (i === 0 ? 'accent' : 'secondary')] }), h('text', { content: s.label ?? `series ${i + 1}`, fg: 'muted' }))))
+        : null);
+});
+function brailleBit(x, y) {
+    // Braille dot numbering is column-major and not contiguous; this is the map.
+    const MAP = [
+        [0x01, 0x08],
+        [0x02, 0x10],
+        [0x04, 0x20],
+        [0x40, 0x80],
+    ];
+    return MAP[y][x];
+}

package/dist/chart/shared.d.ts

@@ -0,0 +1,34 @@
+import type { BoxProps, SemanticVariant, StyleColor } from '@textui/core';
+export declare const TONE: Record<SemanticVariant, StyleColor>;
+export interface Series {
+    values: number[];
+    label?: string;
+    tone?: SemanticVariant;
+}
+export declare function bounds(values: number[], min?: number, max?: number): [number, number];
+/** Take `width` samples, averaging when there is more data than cells. */
+export declare function resample(values: number[], width: number): number[];
+export declare const VerticalBars: (props: {
+    data: {
+        label: string;
+        value: number;
+        tone?: SemanticVariant;
+    }[];
+    max: number;
+    height: number;
+    /** Cells across, per bar. One is a hairline; two or three read as bars. */
+    columnWidth?: number;
+}) => import("@textui/core").RenderOutput;
+export interface LineChartProps extends BoxProps {
+    series: Series[];
+    min?: number;
+    max?: number;
+    chartWidth?: number;
+    chartHeight?: number;
+    /** Draw a y-axis with the bounds labelled. */
+    axis?: boolean;
+    /** Fill under the line. */
+    area?: boolean;
+    format?(value: number): string;
+}
+//# sourceMappingURL=shared.d.ts.map

package/dist/chart/shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/chart/shared.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1E,eAAO,MAAM,IAAI,EAAE,MAAM,CAAC,eAAe,EAAE,UAAU,CAGpD,CAAC;AAEF,MAAM,WAAW,MAAM;IACrB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB;AAED,wBAAgB,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAKrF;AAED,0EAA0E;AAC1E,wBAAgB,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CA2BlE;AAED,eAAO,MAAM,YAAY;UACjB;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,eAAe,CAAA;KAAE,EAAE;SAC3D,MAAM;YACH,MAAM;IACd,2EAA2E;kBAC7D,MAAM;yCA0CpB,CAAC;AAEH,MAAM,WAAW,cAAe,SAAQ,QAAQ;IAC9C,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2BAA2B;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC"}

package/dist/chart/shared.js

@@ -0,0 +1,78 @@
+import { defineComponent, h, useTheme } from '@textui/core';
+export const TONE = {
+    default: 'text', primary: 'primary', secondary: 'secondary', accent: 'accent',
+    success: 'success', warning: 'warning', danger: 'danger', info: 'info', muted: 'muted',
+};
+export function bounds(values, min, max) {
+    if (values.length === 0)
+        return [min ?? 0, max ?? 1];
+    const lo = min ?? Math.min(...values);
+    const hi = max ?? Math.max(...values);
+    return lo === hi ? [lo, lo + 1] : [lo, hi];
+}
+/** Take `width` samples, averaging when there is more data than cells. */
+export function resample(values, width) {
+    if (width <= 0)
+        return [];
+    if (values.length === 0)
+        return new Array(width).fill(0);
+    if (values.length === width)
+        return values;
+    if (values.length < width) {
+        // Fewer points than cells: stretch across the width. Padding with the
+        // first value would invent a flat stretch of history that never happened,
+        // which on a chart reads as "nothing was going on" rather than "no data".
+        return Array.from({ length: width }, (_, i) => {
+            const position = (i * (values.length - 1)) / (width - 1 || 1);
+            const low = Math.floor(position);
+            const high = Math.min(values.length - 1, low + 1);
+            const t = position - low;
+            return values[low] * (1 - t) + values[high] * t;
+        });
+    }
+    const out = [];
+    const bucket = values.length / width;
+    for (let i = 0; i < width; i++) {
+        const start = Math.floor(i * bucket);
+        const end = Math.max(start + 1, Math.floor((i + 1) * bucket));
+        const slice = values.slice(start, end);
+        out.push(slice.reduce((a, b) => a + b, 0) / slice.length);
+    }
+    return out;
+}
+export const VerticalBars = defineComponent('VerticalBars', ({ data, max, height, columnWidth = 1, ...rest }) => {
+    const theme = useTheme();
+    const blocks = theme.glyphs.blocks;
+    // Each cell holds eight levels, so a column is a run of full blocks plus one
+    // partial - the same trick as the progress bar, turned on its side.
+    const columns = data.map((item) => {
+        const units = Math.round((item.value / max) * height * blocks.length);
+        const full = Math.floor(units / blocks.length);
+        const partialIndex = units % blocks.length;
+        const cells = [];
+        for (let row = height - 1; row >= 0; row--) {
+            if (row < full)
+                cells.push(blocks[blocks.length - 1]);
+            else if (row === full && partialIndex > 0)
+                cells.push(blocks[partialIndex - 1]);
+            else
+                cells.push(' ');
+        }
+        return { cells: cells.reverse(), item };
+    });
+    return h('box', { direction: 'column', ...rest }, ...Array.from({ length: height }, (_, row) => h('box', { key: row, direction: 'row', gap: 1 }, ...columns.map((col, i) => h('text', {
+        key: i,
+        // The glyph repeated, not a wider glyph: a column is one cell of
+        // vertical resolution and `columnWidth` of horizontal, so widening
+        // it must not change how the value is drawn.
+        content: col.cells[height - 1 - row].repeat(columnWidth),
+        fg: TONE[col.item.tone ?? 'accent'],
+    })))), h('box', { direction: 'row', gap: 1 }, ...data.map((item, i) => 
+    // As much of the label as the bar is wide, padded so the next one
+    // starts over its own bar rather than sliding left under a short name.
+    h('text', {
+        key: i,
+        content: item.label.slice(0, columnWidth).padEnd(columnWidth),
+        fg: 'subtle',
+    }))));
+});

package/dist/chart/sparkline.d.ts

@@ -0,0 +1,15 @@
+import type { BoxProps, SemanticVariant } from '@textui/core';
+export interface SparklineProps extends BoxProps {
+    values: number[];
+    min?: number;
+    max?: number;
+    tone?: SemanticVariant;
+    /** Cells wide. Values are sampled to fit. */
+    chartWidth?: number;
+    /** Print the latest value after the line. */
+    showValue?: boolean;
+    format?(value: number): string;
+}
+/** One row of block glyphs: eight levels per cell. */
+export declare const Sparkline: (props: SparklineProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=sparkline.d.ts.map

package/dist/chart/sparkline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sparkline.d.ts","sourceRoot":"","sources":["../../src/chart/sparkline.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAI9D,MAAM,WAAW,cAAe,SAAQ,QAAQ;IAC9C,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC;AAED,sDAAsD;AACtD,eAAO,MAAM,SAAS,gEA4BpB,CAAC"}

package/dist/chart/sparkline.js

@@ -0,0 +1,22 @@
+import { defineComponent, h, useTheme } from '@textui/core';
+import { TONE, bounds, resample } from './shared.js';
+/** One row of block glyphs: eight levels per cell. */
+export const Sparkline = defineComponent('Sparkline', (props) => {
+    const theme = useTheme();
+    const { values, min, max, tone = 'accent', chartWidth, showValue = false, format, ...rest } = props;
+    const blocks = theme.glyphs.blocks;
+    const width = chartWidth ?? values.length;
+    const sampled = resample(values, width);
+    const [lo, hi] = bounds(sampled, min, max);
+    const line = sampled
+        .map((v) => {
+        const ratio = (v - lo) / (hi - lo);
+        const index = Math.max(0, Math.min(blocks.length - 1, Math.round(ratio * (blocks.length - 1))));
+        return blocks[index];
+    })
+        .join('');
+    const latest = values[values.length - 1];
+    return h('box', { direction: 'row', gap: 1, ...rest }, h('text', { content: line, fg: TONE[tone] }), showValue && latest !== undefined
+        ? h('text', { content: format ? format(latest) : String(latest), fg: 'muted' })
+        : null);
+});