@surflane/ui 0.11.0 → 0.13.0

package/dist/chart.js

@@ -1,11 +1,13 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
-import { Area, Bar, CartesianGrid, ComposedChart, Line, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, useActiveTooltipCoordinate, useActiveTooltipLabel, useIsTooltipActive, usePlotArea, } from 'recharts';
+import { Area, Bar, CartesianGrid, ComposedChart, Line, ReferenceArea, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, useActiveTooltipCoordinate, useActiveTooltipLabel, useIsTooltipActive, usePlotArea, } from 'recharts';
 import { createPortal } from 'react-dom';
 import { Table } from './table.js';
 import { Button } from './button.js';
+import { Popover } from './popover.js';
 import { cx } from './parts.js';
+import { useComponentDensity } from './sizing.js';
 const chartLabels = {
     missing: 'Not available',
     empty: 'No numeric measurements to display.',
@@ -20,6 +22,8 @@ const chartLabels = {
     noRows: 'No rows.',
     legend: (title) => `${title} series`,
     series: (label) => `${label} series`,
+    moreSeries: (count) => `${count} more series`,
+    total: 'Total',
 };
 /** The round step at or above a raw step: 1, 2, 2.5 or 5 times a power of ten. */
 function roundStep(raw) {
@@ -37,6 +41,112 @@ function axisStep(low, high) {
     return step;
 }
 const dashes = [undefined, '7 4', '2 4', '10 3 2 3', '12 5', '4 3'];
+/** A series' color: the caller's, or the palette's for its place. */
+function seriesColor(index, palette, color) {
+    return (color ??
+        (palette === 'categorical'
+            ? `var(--surf-chart-category-${(index % 12) + 1})`
+            : `var(--surf-chart-series-${(index % 3) + 1})`));
+}
+const toneColors = {
+    neutral: 'var(--surf-ink-muted)',
+    caution: 'var(--surf-status-caution-fg)',
+    danger: 'var(--surf-status-danger-fg)',
+};
+const MINUTE = 60_000, HOUR = 60 * MINUTE, DAY = 24 * HOUR;
+const timeSteps = [
+    ['minute', 1, MINUTE],
+    ['minute', 5, 5 * MINUTE],
+    ['minute', 15, 15 * MINUTE],
+    ['minute', 30, 30 * MINUTE],
+    ['hour', 1, HOUR],
+    ['hour', 3, 3 * HOUR],
+    ['hour', 6, 6 * HOUR],
+    ['hour', 12, 12 * HOUR],
+    ['day', 1, DAY],
+    ['day', 2, 2 * DAY],
+    ['day', 7, 7 * DAY],
+    ['month', 1, 30 * DAY],
+    ['month', 3, 91 * DAY],
+    ['month', 6, 182 * DAY],
+    ['year', 1, 365 * DAY],
+];
+/** Ticks on round local times, such as every 6 hours or the first of each month: at
+ * most six across the span, and no more than fit, so their steps stay even. */
+function timeTicks(min, max, fits = () => true) {
+    const [unit, count] = timeSteps.find(([stepUnit, , ms]) => (max - min) / ms <= 6 && fits(stepUnit, ms)) ?? timeSteps[timeSteps.length - 1];
+    const date = new Date(min);
+    date.setSeconds(0, 0);
+    if (unit === 'minute')
+        date.setMinutes(Math.floor(date.getMinutes() / count) * count);
+    else
+        date.setMinutes(0);
+    if (unit === 'hour')
+        date.setHours(Math.floor(date.getHours() / count) * count);
+    else if (unit !== 'minute')
+        date.setHours(0);
+    if (unit === 'month')
+        date.setMonth(Math.floor(date.getMonth() / count) * count, 1);
+    if (unit === 'year')
+        date.setMonth(0, 1);
+    const ticks = [];
+    while (date.getTime() <= max && ticks.length < 100) {
+        if (date.getTime() >= min)
+            ticks.push(date.getTime());
+        if (unit === 'minute')
+            date.setMinutes(date.getMinutes() + count);
+        else if (unit === 'hour')
+            date.setHours(date.getHours() + count);
+        else if (unit === 'day')
+            date.setDate(date.getDate() + count);
+        else if (unit === 'month')
+            date.setMonth(date.getMonth() + count);
+        else
+            date.setFullYear(date.getFullYear() + count);
+    }
+    return { ticks, unit };
+}
+/** Powers of ten that span low to high, with 2 and 5 between them across one decade. */
+function logTicks(low, high) {
+    const bottom = Math.floor(Math.log10(low)), top = Math.max(Math.ceil(Math.log10(high)), bottom + 1);
+    const ticks = [];
+    for (let power = bottom; power <= top; power++)
+        for (const factor of top - bottom === 1 ? [1, 2, 5] : [1])
+            if (power < top || factor === 1)
+                ticks.push(Number((factor * 10 ** power).toPrecision(12)));
+    return ticks;
+}
+const isNumber = (value) => typeof value === 'number' && Number.isFinite(value);
+/** An element's content width, kept current as it resizes; 0 before it is measured. */
+function useWidth() {
+    const [element, setElement] = React.useState(null);
+    const [width, setWidth] = React.useState(0);
+    React.useLayoutEffect(() => {
+        if (!element)
+            return;
+        setWidth(element.clientWidth);
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width));
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [element]);
+    return [setElement, width, element];
+}
+let measureCanvas;
+/** How wide a tick label draws, in the font it draws in. */
+function textWidth(text, font) {
+    measureCanvas ??= document.createElement('canvas');
+    const context = measureCanvas.getContext('2d');
+    if (!context)
+        return text.length * 7.5;
+    context.font = font;
+    return context.measureText(text).width;
+}
+/** The gap Recharts keeps between tick labels. */
+const TICK_GAP = 24;
+/** The value axis and the plot's right margin: what the plot gives up of the frame. */
+const PLOT_INSET = 56 + 20;
 /** True once the font of the tick labels has loaded. Recharts measures a label to keep
  * it inside the chart and caches that width; measured in the fallback font, the last
  * label overflows by a few pixels once the real font arrives. */
@@ -79,6 +189,15 @@ function Pattern({ id, index, color, }) {
 function SeriesMark({ type, index, color, pattern, }) {
     return (_jsx("svg", { className: 'surf-chart-mark', viewBox: '0 0 32 20', "aria-hidden": 'true', focusable: 'false', children: type === 'bar' ? (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx(Pattern, { id: pattern, color: color, index: index }) }), _jsx("rect", { x: '4', y: '3', width: '24', height: '14', rx: '2', fill: `url(#${pattern})` })] })) : (_jsxs(_Fragment, { children: [_jsx("path", { d: 'M1 10h30', stroke: color, strokeWidth: '2', strokeDasharray: dashes[index % dashes.length] }), _jsx(Marker, { cx: 16, cy: 10, index: index, color: color })] })) }));
 }
+function ReferenceMark({ reference }) {
+    const color = toneColors[reference.tone ?? 'neutral'];
+    return (_jsx("svg", { className: 'surf-chart-mark', viewBox: '0 0 32 20', "aria-hidden": 'true', focusable: 'false', children: 'y' in reference ? (_jsx("path", { d: 'M1 10h30', stroke: color, strokeWidth: '2', strokeDasharray: '4 3' })) : (_jsx("rect", { x: '4', y: '4', width: '24', height: '12', rx: '2', fill: color, fillOpacity: '0.2' })) }));
+}
+/** A series' swatch as Chart's legend draws it, for a legend or key of your own. */
+export function ChartSeriesMark({ type = 'line', index, palette = 'neutral', color, }) {
+    const id = React.useId().replace(/[^a-zA-Z0-9_-]/g, '_');
+    return (_jsx(SeriesMark, { type: type, index: index, color: seriesColor(index, palette, color), pattern: `${id}-mark` }));
+}
 /** The active point's values beside it, for pointer and touch users. The readout
  * below the plot announces the same values, so this copy stays out of the
  * accessibility tree. It sits on the side of the point with more room and stays
@@ -95,29 +214,54 @@ function FloatingValues({ host, hidden, render, }) {
         if (shown && box.current)
             setWidth(box.current.offsetWidth);
     }, [shown, label, plot?.width]);
-    if (!shown || !point || !plot)
+    const content = shown ? render(String(label)) : null;
+    // A break in sampling has no values to show.
+    if (!shown || !point || !plot || content === null)
         return null;
     // The gap between the point and the box, in px: the --surf-space-3 step.
     const gap = 12;
     const start = point.x > plot.x + plot.width / 2;
     const left = Math.min(Math.max(start ? point.x - gap - width : point.x + gap, plot.x), plot.x + plot.width - width);
-    return createPortal(_jsx("div", { ref: box, className: 'surf-chart-tooltip', "aria-hidden": 'true', style: { left, top: plot.y, visibility: width ? undefined : 'hidden' }, children: render(String(label)) }), host);
+    return createPortal(_jsx("div", { ref: box, className: 'surf-chart-tooltip', "aria-hidden": 'true', style: { left, top: plot.y, visibility: width ? undefined : 'hidden' }, children: content }), host);
 }
 /** Cartesian trends with a persistent, keyboard-readable tooltip region and a
  * full data-table alternative. Missing values are gaps, never fabricated zeros. */
-export const Chart = function Chart({ title, description, data, series, unit, xLabel, yLabel, type = 'line', height = 280, includeZero = true, palette = 'neutral', locale = 'en-US', formatValue, labels, hiddenSeries, defaultHiddenSeries = [], onHiddenSeriesChange, className, ref, ...props }) {
+export const Chart = function Chart({ title, description, data, series, unit, xLabel, yLabel, type = 'line', height, includeZero = true, palette = 'neutral', xScale = 'category', yScale = 'linear', curve = 'linear', stacked = false, references = [], density: ownDensity, legendPosition = 'top', legendLimit, locale, formatValue, labels, hiddenSeries, defaultHiddenSeries = [], onHiddenSeriesChange, className, ref, ...props }) {
     const text = { ...chartLabels, ...labels };
     const id = React.useId().replace(/[^a-zA-Z0-9_-]/g, '_');
-    const colorFor = (index) => palette === 'categorical'
-        ? `var(--surf-chart-category-${(index % 6) + 1})`
-        : `var(--surf-chart-series-${(index % 3) + 1})`;
+    const colorFor = (index) => seriesColor(index, palette, series[index]?.color);
+    const timeScale = xScale === 'time';
+    const logScale = yScale === 'log';
+    const stacks = stacked && type !== 'line';
+    const density = useComponentDensity(ownDensity);
+    const compact = density === 'compact';
     const [internalHidden, setInternalHidden] = React.useState(defaultHiddenSeries);
     const hidden = new Set(hiddenSeries ?? internalHidden);
     const visible = series.filter((s) => !hidden.has(s.key));
     const [host, setHost] = React.useState(null);
     const fontsReady = useFontReady(host, data.map((d) => d.label).join(''));
     const [floatHost, setFloatHost] = React.useState(null);
+    const [setFrame, frameWidth, frame] = useWidth();
+    // legendLimit='auto': lay every series out, count those on the first line, then
+    // fold the rest, keeping room for the "+N" button. A new width lays them out again.
+    const legendList = React.useRef(null);
+    const [legendFit, setLegendFit] = React.useState();
+    React.useLayoutEffect(() => {
+        if (legendLimit === 'auto')
+            setLegendFit(undefined);
+    }, [legendLimit, frameWidth, series.length]);
+    React.useLayoutEffect(() => {
+        if (legendLimit !== 'auto' || legendFit !== undefined)
+            return;
+        const items = Array.from(legendList.current?.querySelectorAll(':scope > [data-series]') ?? []);
+        if (!items.length)
+            return;
+        const line = items.filter((item) => item.offsetTop === items[0].offsetTop).length;
+        setLegendFit(line >= items.length ? items.length : Math.max(1, line - 1));
+    });
     const [dismissed, setDismissed] = React.useState(false);
+    // The table renders once it is first opened, so a page of charts stays light.
+    const [tableOpened, setTableOpened] = React.useState(false);
     const firstLegend = React.useRef(null);
     const [restoreRequested, setRestoreRequested] = React.useState(false);
     React.useLayoutEffect(() => {
@@ -128,13 +272,20 @@ export const Chart = function Chart({ title, description, data, series, unit, xL
         setRestoreRequested(false);
     }, [restoreRequested, visible.length]);
     const number = React.useMemo(() => new Intl.NumberFormat(locale, { maximumFractionDigits: 2 }), [locale]);
-    const compact = React.useMemo(() => new Intl.NumberFormat(locale, {
+    const compactNumber = React.useMemo(() => new Intl.NumberFormat(locale, {
         notation: 'compact',
         maximumFractionDigits: 1,
     }), [locale]);
-    const format = (value) => typeof value === 'number' && Number.isFinite(value)
-        ? `${formatValue ? formatValue(value) : number.format(value)} ${unit}`
-        : text.missing;
+    const formatNumber = (value) => isNumber(value)
+        ? formatValue
+            ? formatValue(value)
+            : number.format(value)
+        : null;
+    // The readout names the unit after each value; the table names it once, in the header.
+    const format = (value) => {
+        const formatted = formatNumber(value);
+        return formatted === null ? text.missing : `${formatted} ${unit}`;
+    };
     const rows = React.useMemo(() => {
         const ids = new Set(), keys = new Set();
         for (const s of series) {
@@ -142,38 +293,144 @@ export const Chart = function Chart({ title, description, data, series, unit, xL
                 throw new Error('Chart series keys must be non-empty and unique');
             keys.add(s.key);
         }
-        return data.map((row) => {
+        const result = data.map((row) => {
             if (!row.id || ids.has(row.id))
                 throw new Error('Chart datum IDs must be non-empty and unique');
             ids.add(row.id);
+            const time = row.time === undefined ? undefined : Number(row.time);
+            if (timeScale && !isNumber(time))
+                throw new Error('Chart rows need a time when xScale is "time"');
             return {
                 ...row,
+                time,
                 values: Object.fromEntries(series.map((s) => [
                     s.key,
-                    typeof row.values[s.key] === 'number' &&
-                        Number.isFinite(row.values[s.key])
-                        ? row.values[s.key]
-                        : null,
+                    isNumber(row.values[s.key]) ? row.values[s.key] : null,
                 ])),
             };
         });
-    }, [data, series]);
+        return timeScale ? result.sort((a, b) => a.time - b.time) : result;
+    }, [data, series, timeScale]);
     const byId = new Map(rows.map((row) => [row.id, row]));
+    const byTime = new Map(rows.map((row) => [row.time, row]));
+    const rowFor = (label) => timeScale ? byTime.get(Number(label)) : byId.get(String(label));
+    // On a time axis, a wait of more than twice the usual interval is a break in
+    // sampling: an empty row there keeps the line from bridging it.
+    const interval = React.useMemo(() => {
+        if (!timeScale || rows.length < 3)
+            return 0;
+        const steps = rows
+            .slice(1)
+            .map((row, index) => row.time - rows[index].time)
+            .sort((a, b) => a - b);
+        return steps[Math.floor(steps.length / 2)];
+    }, [rows, timeScale]);
+    const plotRows = React.useMemo(() => {
+        if (!interval)
+            return rows;
+        const empty = Object.fromEntries(series.map((s) => [s.key, null]));
+        return rows.flatMap((row, index) => {
+            const next = rows[index + 1];
+            return next && next.time - row.time > interval * 2
+                ? [
+                    row,
+                    {
+                        ...row,
+                        id: `${row.id}-gap`,
+                        time: row.time + interval,
+                        values: empty,
+                    },
+                ]
+                : [row];
+        });
+    }, [rows, series, interval]);
+    const valueOf = (row, key) => {
+        const value = row.values[key];
+        return value === null || (logScale && value <= 0) ? null : value;
+    };
+    // The value axis spans the visible values (their sums when stacked) and the
+    // references, widened to round steps so its ticks read cleanly.
     const values = rows
-        .flatMap((row) => visible.map((s) => row.values[s.key]))
-        .filter((value) => typeof value === 'number');
-    // Bars grow from zero, so they always keep it on the axis. Either way the axis
-    // spans the values, widened to round steps so its ticks read cleanly.
-    const keepZero = includeZero || type === 'bar';
-    const start = keepZero ? 0 : (values[0] ?? 0);
-    const low = values.reduce((a, b) => Math.min(a, b), start), high = values.reduce((a, b) => Math.max(a, b), start);
-    const step = axisStep(low, high);
-    const min = step ? Math.floor(low / step) * step : low, max = step ? Math.ceil(high / step) * step : high;
-    const ticks = step
-        ? Array.from({ length: Math.round((max - min) / step) + 1 }, 
-        // Rounded, so float steps never print as 0.30000000000000004.
-        (_, index) => Number((min + index * step).toPrecision(12)))
-        : undefined;
+        .flatMap((row) => visible.map((s) => valueOf(row, s.key)))
+        .filter(isNumber);
+    const sums = stacks
+        ? rows.flatMap((row) => {
+            const parts = visible.map((s) => valueOf(row, s.key)).filter(isNumber);
+            return [
+                parts.filter((v) => v > 0).reduce((a, b) => a + b, 0),
+                parts.filter((v) => v < 0).reduce((a, b) => a + b, 0),
+            ];
+        })
+        : values;
+    const referenceValues = references
+        .flatMap((r) => ('y' in r ? [r.y] : [r.from, r.to]))
+        .filter((v) => isNumber(v) && (!logScale || v > 0));
+    const extent = [...sums, ...(values.length ? referenceValues : [])];
+    // Bars grow from zero, so they always keep it on a linear axis.
+    const keepZero = !logScale && (includeZero || type === 'bar');
+    const start = keepZero ? 0 : (extent[0] ?? 0);
+    const low = extent.reduce((a, b) => Math.min(a, b), start), high = extent.reduce((a, b) => Math.max(a, b), start);
+    let min = low, max = high, ticks;
+    if (logScale) {
+        ticks = logTicks(low > 0 ? low : 1, high > 0 ? high : 10);
+        min = ticks[0];
+        max = ticks[ticks.length - 1];
+    }
+    else {
+        const step = axisStep(low, high);
+        if (step) {
+            min = Math.floor(low / step) * step;
+            max = Math.ceil(high / step) * step;
+            ticks = Array.from({ length: Math.round((max - min) / step) + 1 }, 
+            // Rounded, so float steps never print as 0.30000000000000004.
+            (_, index) => Number((min + index * step).toPrecision(12)));
+        }
+    }
+    const time = React.useMemo(() => {
+        if (!timeScale || !rows.length)
+            return undefined;
+        const first = rows[0].time, last = rows[rows.length - 1].time;
+        const formatFor = (unit) => new Intl.DateTimeFormat(locale, unit === 'minute' || unit === 'hour'
+            ? { hour: 'numeric', minute: '2-digit' }
+            : unit === 'day'
+                ? { month: 'short', day: 'numeric' }
+                : unit === 'month'
+                    ? { month: 'short', year: 'numeric' }
+                    : { year: 'numeric' });
+        // Pick the step from the plot's width and the width its labels draw at, so a
+        // narrow chart steps every 2 or 3 hours instead of dropping uneven ticks.
+        const plotWidth = frameWidth - PLOT_INSET;
+        const font = frame && fontsReady
+            ? `12px ${getComputedStyle(frame).fontFamily}`
+            : undefined;
+        const fits = (unit, ms) => {
+            if (plotWidth <= 0 || !font)
+                return true;
+            const label = Math.max(textWidth(formatFor(unit).format(new Date(first)), font), textWidth(formatFor(unit).format(new Date(2026, 9, 24, 22, 30)), font));
+            const count = Math.floor((last - first) / ms) + 1;
+            return count * (label + TICK_GAP) - TICK_GAP <= plotWidth;
+        };
+        const { ticks: timeAxisTicks, unit: timeUnit } = timeTicks(first, last, fits);
+        // Bars sit on their time, so half an interval on each side keeps the end ones whole.
+        const pad = type === 'bar' ? (interval || DAY) / 2 : 0;
+        const subDay = timeUnit === 'minute' || timeUnit === 'hour';
+        const tickFormat = formatFor(timeUnit);
+        const dayFormat = new Intl.DateTimeFormat(locale, {
+            month: 'short',
+            day: 'numeric',
+        });
+        return {
+            domain: [first - pad, last + pad],
+            ticks: timeAxisTicks,
+            // Within a day the ticks name hours; one at midnight names the day instead.
+            format: (value) => {
+                const date = new Date(value);
+                return subDay && date.getHours() === 0 && date.getMinutes() === 0
+                    ? dayFormat.format(date)
+                    : tickFormat.format(date);
+            },
+        };
+    }, [rows, timeScale, type, interval, locale, frameWidth, frame, fontsReady]);
     const hasValues = values.length > 0;
     const changeHidden = (next) => {
         if (hiddenSeries === undefined)
@@ -183,14 +440,35 @@ export const Chart = function Chart({ title, description, data, series, unit, xL
     const toggle = (key) => changeHidden(series
         .filter((s) => (s.key === key ? !hidden.has(key) : hidden.has(s.key)))
         .map((s) => s.key));
-    const chartHeight = Number.isFinite(height) ? Math.max(200, height) : 280;
-    return (_jsxs("figure", { ...props, ref: ref, className: cx('surf-chart', className), "aria-labelledby": `${id}-title`, children: [_jsxs("figcaption", { className: 'surf-chart-caption', children: [_jsx("strong", { id: `${id}-title`, children: title }), _jsx("p", { id: `${id}-summary`, children: description })] }), _jsxs("div", { className: 'surf-chart-frame', children: [_jsxs("div", { className: 'surf-chart-key', children: [_jsxs("p", { className: 'surf-chart-axis-label', children: [yLabel, " (", unit, ")"] }), _jsx("ul", { className: 'surf-chart-legend', "aria-label": text.legend(title), children: series.map((s, index) => (_jsx("li", { children: _jsxs("button", { ref: index === 0 ? firstLegend : undefined, type: 'button', className: 'surf-chart-legend-button', "aria-label": text.series(s.label), "aria-pressed": !hidden.has(s.key), onClick: () => toggle(s.key), children: [_jsx(SeriesMark, { type: type, index: index, color: colorFor(index), pattern: `${id}-legend-${index}` }), _jsx("span", { children: s.label })] }) }, s.key))) })] }), hasValues ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'surf-chart-plot', onKeyDownCapture: (event) => {
+    const chartHeight = height !== undefined && Number.isFinite(height)
+        ? Math.max(compact ? 120 : 200, height)
+        : compact
+            ? 180
+            : 280;
+    const total = (row) => visible
+        .map((s) => row.values[s.key])
+        .filter(isNumber)
+        .reduce((a, b) => a + b, 0);
+    const referenceText = (r) => 'y' in r
+        ? `${r.label} ${format(r.y)}`
+        : `${r.label} ${formatNumber(r.from) ?? text.missing}–${format(r.to)}`;
+    const legendButton = (s, index) => (_jsxs("button", { ref: index === 0 ? firstLegend : undefined, type: 'button', className: 'surf-chart-legend-button', "aria-label": text.series(s.label), "aria-pressed": !hidden.has(s.key), onClick: () => toggle(s.key), children: [_jsx(SeriesMark, { type: type, index: index, color: colorFor(index), pattern: `${id}-legend-${index}` }), _jsx("span", { children: s.label })] }));
+    const limit = legendLimit === 'auto' ? legendFit : legendLimit;
+    const shown = limit !== undefined && limit < series.length
+        ? series.slice(0, Math.max(0, limit))
+        : series;
+    const folded = series.slice(shown.length);
+    const legend = (_jsxs("ul", { ref: legendList, className: 'surf-chart-legend', "aria-label": text.legend(title), children: [shown.map((s, index) => (_jsx("li", { "data-series": '', children: legendButton(s, index) }, s.key))), folded.length > 0 && (_jsx("li", { children: _jsxs(Popover.Root, { children: [_jsxs(Popover.Trigger, { className: 'surf-chart-legend-button surf-chart-legend-more', "aria-label": text.moreSeries(folded.length), children: ["+", folded.length] }), _jsx(Popover.Content, { size: 'small', children: _jsx("ul", { className: 'surf-chart-legend-list', children: folded.map((s, index) => (_jsx("li", { children: legendButton(s, shown.length + index) }, s.key))) }) })] }) })), references.map((reference, index) => (_jsxs("li", { className: 'surf-chart-legend-reference', children: [_jsx(ReferenceMark, { reference: reference }), _jsx("span", { children: referenceText(reference) })] }, index)))] }));
+    return (_jsxs("figure", { ...props, ref: ref, "data-density": density, className: cx('surf-chart', className), "aria-labelledby": `${id}-title`, children: [_jsxs("figcaption", { className: 'surf-chart-caption', children: [_jsx("strong", { id: `${id}-title`, children: title }), _jsx("p", { id: `${id}-summary`, children: description })] }), _jsxs("div", { className: 'surf-chart-frame', ref: setFrame, children: [_jsxs("div", { className: 'surf-chart-key', children: [_jsxs("p", { className: 'surf-chart-axis-label', children: [yLabel, " (", unit, ")"] }), legendPosition === 'top' && legend] }), hasValues ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'surf-chart-plot', onKeyDownCapture: (event) => {
                                     if (event.key === 'Escape')
                                         setDismissed(true);
                                     else if (event.key === 'ArrowLeft' ||
                                         event.key === 'ArrowRight')
                                         setDismissed(false);
-                                }, onMouseMoveCapture: () => setDismissed(false), onTouchStartCapture: () => setDismissed(false), onFocusCapture: () => setDismissed(false), children: [_jsx(ResponsiveContainer, { width: '100%', height: chartHeight, minWidth: 0, initialDimension: { width: 320, height: chartHeight }, children: _jsxs(ComposedChart, { data: rows, accessibilityLayer: true, role: 'application', "aria-label": title, "aria-describedby": `${id}-summary ${id}-keys`, margin: { top: 16, right: 20, bottom: 8, left: 0 }, children: [_jsx("defs", { children: series.map((s, index) => (_jsx(Pattern, { id: `${id}-pattern-${index}`, index: index, color: colorFor(index) }, s.key))) }), _jsx(CartesianGrid, { vertical: false, stroke: 'var(--surf-line)' }), _jsx(XAxis, { dataKey: 'id', tickFormatter: (value) => {
+                                }, onMouseMoveCapture: () => setDismissed(false), onTouchStartCapture: () => setDismissed(false), onFocusCapture: () => setDismissed(false), children: [_jsx(ResponsiveContainer, { width: '100%', height: chartHeight, minWidth: 0, initialDimension: { width: 320, height: chartHeight }, children: _jsxs(ComposedChart, { data: plotRows, accessibilityLayer: true, role: 'application', "aria-label": title, "aria-describedby": `${id}-summary ${id}-keys`, margin: { top: 16, right: 20, bottom: 8, left: 0 }, baseValue: logScale ? min : undefined, children: [_jsx("defs", { children: series.map((s, index) => (_jsx(Pattern, { id: `${id}-pattern-${index}`, index: index, color: colorFor(index) }, s.key))) }), _jsx(CartesianGrid, { vertical: false, stroke: 'var(--surf-line)' }), references.map((reference, index) => 'y' in reference ? null : (_jsx(ReferenceArea, { y1: reference.from, y2: reference.to, fill: toneColors[reference.tone ?? 'neutral'], fillOpacity: 0.12, stroke: 'none' }, index))), time ? (_jsx(XAxis, { dataKey: 'time', type: 'number', scale: 'time', domain: time.domain, ticks: time.ticks, tickFormatter: (value) => time.format(Number(value)), tick: fontsReady && {
+                                                        fill: 'var(--surf-ink-muted)',
+                                                        fontSize: 12,
+                                                    }, tickLine: false, axisLine: { stroke: 'var(--surf-line)' }, minTickGap: 24, interval: 'preserveStartEnd' })) : (_jsx(XAxis, { dataKey: 'id', tickFormatter: (value) => {
                                                         const label = byId.get(String(value))?.label ?? String(value);
                                                         // minTickGap already drops ticks that would overlap; the cap
                                                         // only keeps one very long label from crowding the axis.
@@ -200,9 +478,9 @@ export const Chart = function Chart({ title, description, data, series, unit, xL
                                                     }, tick: fontsReady && {
                                                         fill: 'var(--surf-ink-muted)',
                                                         fontSize: 12,
-                                                    }, tickLine: false, axisLine: { stroke: 'var(--surf-line)' }, minTickGap: 24, interval: 'preserveStartEnd' }), _jsx(YAxis, { width: 56, tickFormatter: (value) => formatValue
+                                                    }, tickLine: false, axisLine: { stroke: 'var(--surf-line)' }, minTickGap: 24, interval: 'preserveStartEnd' })), _jsx(YAxis, { width: 56, scale: logScale ? 'log' : 'auto', tickFormatter: (value) => formatValue
                                                         ? formatValue(Number(value))
-                                                        : compact.format(Number(value)), tick: { fill: 'var(--surf-ink-muted)', fontSize: 12 }, tickLine: false, axisLine: false, domain: [min, max === min ? max + 1 : max], ticks: ticks }), _jsx(ReferenceLine, { y: 0, stroke: 'var(--surf-ink-muted)' }), host && (_jsx(Tooltip, { portal: host, isAnimationActive: false, active: dismissed ? false : undefined, filterNull: false, cursor: dismissed
+                                                        : compactNumber.format(Number(value)), tick: { fill: 'var(--surf-ink-muted)', fontSize: 12 }, tickLine: false, axisLine: false, domain: [min, max === min ? max + 1 : max], ticks: ticks, allowDataOverflow: logScale }), !logScale && (_jsx(ReferenceLine, { y: 0, stroke: 'var(--surf-ink-muted)' })), host && (_jsx(Tooltip, { portal: host, isAnimationActive: false, active: dismissed ? false : undefined, filterNull: false, cursor: dismissed
                                                         ? false
                                                         : {
                                                             stroke: 'var(--surf-control-border)',
@@ -213,29 +491,33 @@ export const Chart = function Chart({ title, description, data, series, unit, xL
                                                         pointerEvents: 'auto',
                                                     }, content: (tooltip) => {
                                                         const row = tooltip.active && !dismissed
-                                                            ? byId.get(String(tooltip.label))
+                                                            ? rowFor(tooltip.label)
                                                             : undefined;
-                                                        return (_jsx("div", { className: 'surf-chart-readout', "data-chart-readout": row?.id, children: row ? (_jsxs(_Fragment, { children: [_jsx("strong", { children: row.label }), _jsx("ul", { children: visible.map((s) => (_jsxs("li", { children: [s.label, ": ", format(row.values[s.key])] }, s.key))) })] })) : (_jsx("span", { children: text.inspectHint })) }));
+                                                        return (_jsx("div", { className: 'surf-chart-readout', "data-chart-readout": row?.id, children: row ? (_jsxs(_Fragment, { children: [_jsx("strong", { children: row.label }), _jsxs("ul", { children: [visible.map((s) => (_jsxs("li", { children: [s.label, ": ", format(row.values[s.key])] }, s.key))), stacks && (_jsxs("li", { children: [text.total, ": ", format(total(row))] }))] })] })) : (_jsx("span", { children: text.inspectHint })) }));
                                                     } })), series.map((s, index) => {
                                                     const common = {
                                                         name: s.label,
-                                                        dataKey: (row) => row.values[s.key] ?? null,
+                                                        dataKey: (row) => valueOf(row, s.key),
                                                         hide: hidden.has(s.key),
                                                         isAnimationActive: false,
                                                         stroke: colorFor(index),
+                                                        stackId: stacks ? 'total' : undefined,
                                                     };
-                                                    return type === 'bar' ? (_jsx(Bar, { ...common, fill: `url(#${id}-pattern-${index})`, maxBarSize: 48 }, s.key)) : type === 'area' ? (_jsx(Area, { ...common, type: 'linear', strokeWidth: 2, strokeDasharray: dashes[index % dashes.length], fill: `url(#${id}-pattern-${index})`, fillOpacity: 0.12, connectNulls: false, dot: rows.length > 40
-                                                            ? false
-                                                            : (dot) => (_jsx(Marker, { ...dot, color: colorFor(index), index: index })), activeDot: false }, s.key)) : (_jsx(Line, { ...common, type: 'linear', strokeWidth: 2, strokeDasharray: dashes[index % dashes.length], connectNulls: false, dot: rows.length > 40
-                                                            ? false
-                                                            : (dot) => (_jsx(Marker, { ...dot, color: colorFor(index), index: index })), activeDot: false }, s.key));
-                                                }), _jsx(FloatingValues, { host: floatHost, hidden: dismissed, render: (label) => {
-                                                        const row = byId.get(label);
+                                                    const dot = rows.length > 40
+                                                        ? false
+                                                        : (dot) => (_jsx(Marker, { cx: dot.cx, cy: dot.cy, color: colorFor(index), index: index }));
+                                                    const shape = curve === 'step' ? 'stepAfter' : 'linear';
+                                                    return type === 'bar' ? (_jsx(Bar, { ...common, fill: `url(#${id}-pattern-${index})`, maxBarSize: 48 }, s.key)) : type === 'area' ? (_jsx(Area, { ...common, type: shape, strokeWidth: 2, strokeDasharray: dashes[index % dashes.length], fill: `url(#${id}-pattern-${index})`, fillOpacity: stacks ? 0.32 : 0.12, connectNulls: false, dot: dot, activeDot: false }, s.key)) : (_jsx(Line, { ...common, type: shape, strokeWidth: 2, strokeDasharray: dashes[index % dashes.length], connectNulls: false, dot: dot, activeDot: false }, s.key));
+                                                }), references.map((reference, index) => 'y' in reference ? (_jsx(ReferenceLine, { y: reference.y, stroke: toneColors[reference.tone ?? 'neutral'], strokeWidth: 1.5, strokeDasharray: '4 3' }, index)) : null), _jsx(FloatingValues, { host: floatHost, hidden: dismissed, render: (label) => {
+                                                        const row = rowFor(label);
                                                         if (!row)
                                                             return null;
-                                                        return (_jsxs(_Fragment, { children: [_jsx("strong", { children: row.label }), _jsx("ul", { children: series.map((s, index) => hidden.has(s.key) ? null : (_jsxs("li", { children: [_jsx(SeriesMark, { type: type, index: index, color: colorFor(index), pattern: `${id}-float-${index}` }), _jsx("span", { children: s.label }), _jsx("span", { className: 'surf-chart-tooltip-value', children: format(row.values[s.key]) })] }, s.key))) })] }));
+                                                        return (_jsxs(_Fragment, { children: [_jsx("strong", { children: row.label }), _jsxs("ul", { children: [series.map((s, index) => hidden.has(s.key) ? null : (_jsxs("li", { children: [_jsx(SeriesMark, { type: type, index: index, color: colorFor(index), pattern: `${id}-float-${index}` }), _jsx("span", { children: s.label }), _jsx("span", { className: 'surf-chart-tooltip-value', children: format(row.values[s.key]) })] }, s.key))), stacks && (_jsxs("li", { className: 'surf-chart-tooltip-total', children: [_jsx("span", { children: text.total }), _jsx("span", { className: 'surf-chart-tooltip-value', children: format(total(row)) })] }))] })] }));
                                                     } })] }) }), _jsx("div", { className: 'surf-chart-float', ref: setFloatHost })] }), _jsx("p", { className: 'surf-chart-axis-label surf-chart-x-label', children: xLabel })] })) : (_jsx("div", { className: 'surf-chart-empty', role: 'status', children: visible.length === 0 && series.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("p", { children: text.noSeries }), _jsx(Button, { variant: 'outline', onClick: () => {
                                         setRestoreRequested(true);
                                         changeHidden([]);
-                                    }, children: text.showAll })] })) : (_jsx("p", { children: text.empty })) }))] }), hasValues && (_jsx("p", { className: 'surf-chart-help', id: `${id}-keys`, children: text.keyboardHelp })), _jsx("div", { className: 'surf-chart-inspector', ref: setHost, role: 'status', "aria-live": 'polite', "aria-atomic": 'true', "aria-label": text.values(title), hidden: !hasValues }), _jsxs("details", { className: 'surf-chart-table', children: [_jsx("summary", { children: text.viewTable }), _jsx(Table.Container, { label: text.table(title), orientation: 'both', scrollChain: 'contain', children: _jsxs(Table.Root, { children: [_jsx(Table.Caption, { children: text.tableCaption(unit) }), _jsx(Table.Head, { children: _jsxs(Table.Row, { children: [_jsx(Table.HeaderCell, { scope: 'col', children: xLabel }), series.map((s) => (_jsxs(Table.HeaderCell, { scope: 'col', children: [s.label, " (", unit, ")"] }, s.key)))] }) }), _jsx(Table.Body, { children: rows.length ? (rows.map((row) => (_jsxs(Table.Row, { children: [_jsx(Table.HeaderCell, { scope: 'row', children: row.label }), series.map((s) => (_jsx(Table.Cell, { children: format(row.values[s.key]) }, s.key)))] }, row.id)))) : (_jsx(Table.Row, { children: _jsx(Table.Cell, { colSpan: series.length + 1, children: text.noRows }) })) })] }) })] })] }));
+                                    }, children: text.showAll })] })) : (_jsx("p", { children: text.empty })) })), legendPosition === 'bottom' && (_jsx("div", { className: 'surf-chart-key', "data-position": 'bottom', children: legend }))] }), hasValues && (_jsx("p", { className: 'surf-chart-help', id: `${id}-keys`, children: text.keyboardHelp })), _jsx("div", { className: 'surf-chart-inspector', ref: setHost, role: 'status', "aria-live": 'polite', "aria-atomic": 'true', "aria-label": text.values(title), hidden: !hasValues }), _jsxs("details", { className: 'surf-chart-table', onToggle: (event) => {
+                    if (event.currentTarget.open)
+                        setTableOpened(true);
+                }, children: [_jsx("summary", { children: text.viewTable }), tableOpened && (_jsx(Table.Container, { label: text.table(title), orientation: 'both', scrollChain: 'contain', children: _jsxs(Table.Root, { density: density, children: [_jsx(Table.Caption, { children: text.tableCaption(unit) }), _jsx(Table.Head, { children: _jsxs(Table.Row, { children: [_jsx(Table.HeaderCell, { scope: 'col', children: xLabel }), series.map((s) => (_jsxs(Table.HeaderCell, { scope: 'col', numeric: true, children: [s.label, " (", unit, ")"] }, s.key)))] }) }), _jsx(Table.Body, { children: rows.length ? (rows.map((row) => (_jsxs(Table.Row, { children: [_jsx(Table.HeaderCell, { scope: 'row', children: row.label }), series.map((s) => (_jsx(Table.Cell, { numeric: true, children: formatNumber(row.values[s.key]) ?? text.missing }, s.key)))] }, row.id)))) : (_jsx(Table.Row, { children: _jsx(Table.Cell, { colSpan: series.length + 1, children: text.noRows }) })) })] }) }))] })] }));
 };

package/dist/choice.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { type ComponentSizeAlias } from './sizing.js';
+import { type ComponentSize } from './sizing.js';
 export declare const ChoiceResetPaint: React.Context<number>;
 /** Choice controls follow the surrounding size; `size` sets one control's scale. */
 export type ChoiceSize = {
-    size?: ComponentSizeAlias;
+    size?: ComponentSize;
 };

package/dist/class-names.d.ts

@@ -1,6 +1,2 @@
 /** Joins class names, skipping empty ones. */
 export declare function cx(...classes: (string | false | null | undefined)[]): string;
-/** The data-size value: a deprecated short spelling (sm, md, lg, icon-sm, icon-xs,
- * icon-lg) renders as its full name, so both spellings meet the same CSS; other values
- * such as xs or icon pass through. */
-export declare function sizeName<Size extends string>(size?: Size): import("./size.js").ComponentSize | Size | "icon-small" | "icon-large" | undefined;

package/dist/class-names.js

@@ -1,18 +1,4 @@
-// Class and data attribute helpers, with no React: server components use them too.
-import { normalizeSize } from './size.js';
 /** Joins class names, skipping empty ones. */
 export function cx(...classes) {
     return classes.filter(Boolean).join(' ');
 }
-/** The data-size value: a deprecated short spelling (sm, md, lg, icon-sm, icon-xs,
- * icon-lg) renders as its full name, so both spellings meet the same CSS; other values
- * such as xs or icon pass through. */
-export function sizeName(size) {
-    return size === 'sm' || size === 'md' || size === 'lg'
-        ? normalizeSize(size)
-        : size === 'icon-sm' || size === 'icon-xs'
-            ? 'icon-small'
-            : size === 'icon-lg'
-                ? 'icon-large'
-                : size;
-}

package/dist/code.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Button } from './button.js';
 export type CodeBlockProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'onCopy'> & {
     code: string;
     label?: string;
@@ -6,12 +7,6 @@ export type CodeBlockProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'childr
     wrap?: boolean;
     /** The copy button's text: the action, then the result. */
     labels?: Partial<CodeBlockLabels>;
-    /** @deprecated Use `labels.copy`. Removed in a later minor. */
-    copyLabel?: string;
-    /** @deprecated Use `labels.copied`. Removed in a later minor. */
-    copiedLabel?: string;
-    /** @deprecated Use `labels.copyError`. Removed in a later minor. */
-    copyErrorLabel?: string;
     onCopy?: (code: string) => void | Promise<void>;
 };
 export type CodeBlockLabels = {
@@ -19,6 +14,23 @@ export type CodeBlockLabels = {
     copied: string;
     copyError: string;
 };
-export declare const CodeBlock: ({ code, label, language, wrap, labels, copyLabel: legacyCopyLabel, copiedLabel: legacyCopiedLabel, copyErrorLabel: legacyCopyErrorLabel, onCopy, className, ref, ...props }: CodeBlockProps & {
+export type CopyButtonLabels = CodeBlockLabels;
+export type CopyButtonProps = Omit<React.ComponentPropsWithoutRef<typeof Button>, 'children' | 'onClick' | 'onCopy' | 'value'> & {
+    /** What to copy: the text, or a function that returns it when pressed. */
+    value: string | (() => string | Promise<string>);
+    /** The button's text: the action, then the result. */
+    labels?: Partial<CopyButtonLabels>;
+    /** Copies instead of the clipboard write; throw to report a failure. */
+    onCopy?: (text: string) => void | Promise<void>;
+    /** Hears each outcome, such as to select the source after a failure. */
+    onResult?: (result: 'copied' | 'failed') => void;
+};
+/** Copies text and says what happened in its own label: the result replaces the
+ * action in place, as a polite live region, then the action returns after 2s.
+ * The button is as wide as its longest label, so nothing around it moves. */
+export declare const CopyButton: ({ value, labels, onCopy, onResult, variant, size, className, ref, ...props }: CopyButtonProps & {
+    ref?: React.Ref<HTMLButtonElement>;
+}) => React.JSX.Element;
+export declare const CodeBlock: ({ code, label, language, wrap, labels, onCopy, className, ref, ...props }: CodeBlockProps & {
     ref?: React.Ref<HTMLDivElement>;
 }) => React.JSX.Element;