@surflane/ui 0.11.0 → 0.12.0

package/dist/chart.js

@@ -1,10 +1,11 @@
 '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';
 const chartLabels = {
     missing: 'Not available',
@@ -20,6 +21,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 +40,83 @@ 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. */
+function timeTicks(min, max) {
+    const [unit, count] = timeSteps.find(([, , ms]) => (max - min) / ms <= 6) ??
+        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);
 /** 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 +159,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,22 +184,26 @@ 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 = 'default', legendPosition = 'top', legendLimit, locale = 'en-US', 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 compact = density === 'compact';
     const [internalHidden, setInternalHidden] = React.useState(defaultHiddenSeries);
     const hidden = new Set(hiddenSeries ?? internalHidden);
     const visible = series.filter((s) => !hidden.has(s.key));
@@ -118,6 +211,8 @@ export const Chart = function Chart({ title, description, data, series, unit, xL
     const fontsReady = useFontReady(host, data.map((d) => d.label).join(''));
     const [floatHost, setFloatHost] = React.useState(null);
     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 +223,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 +244,130 @@ 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 { ticks: timeAxisTicks, unit: timeUnit } = timeTicks(first, last);
+        // 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 = new Intl.DateTimeFormat(locale, subDay
+            ? { hour: 'numeric', minute: '2-digit' }
+            : timeUnit === 'day'
+                ? { month: 'short', day: 'numeric' }
+                : timeUnit === 'month'
+                    ? { month: 'short', year: 'numeric' }
+                    : { year: 'numeric' });
+        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]);
     const hasValues = values.length > 0;
     const changeHidden = (next) => {
         if (hiddenSeries === undefined)
@@ -183,14 +377,34 @@ 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 shown = legendLimit !== undefined && legendLimit < series.length
+        ? series.slice(0, Math.max(0, legendLimit))
+        : series;
+    const folded = series.slice(shown.length);
+    const legend = (_jsxs("ul", { className: 'surf-chart-legend', "aria-label": text.legend(title), children: [shown.map((s, index) => (_jsx("li", { 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', 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 +414,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 +427,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, { 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/css/bar-list.css

@@ -0,0 +1,9 @@
+/* Bar list, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/css/presentation/base.css';
+@import './rules/base.css';
+@import './rules/sizing.css';
+@import './rules/scroll-area.css';
+@import './rules/bar-list.css';

package/dist/css/chart.css

@@ -5,7 +5,9 @@
 @import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
+@import './rules/popup.css';
 @import './rules/icon.css';
+@import './rules/popover.css';
 @import './rules/button.css';
 @import './rules/scroll-area.css';
 @import '@surflane/css/presentation/table.css';

package/dist/css/dashboard.css

@@ -0,0 +1,20 @@
+/* Dashboard, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/css/presentation/base.css';
+@import './rules/base.css';
+@import './rules/sizing.css';
+@import './rules/popup.css';
+@import './rules/icon.css';
+@import './rules/popover.css';
+@import './rules/button.css';
+@import './rules/spinner.css';
+@import './rules/skeleton.css';
+@import '@surflane/css/foundations/layout.css';
+@import './rules/layout.css';
+@import '@surflane/css/presentation/card.css';
+@import './rules/card.css';
+@import '@surflane/css/presentation/inline-message.css';
+@import './rules/inline-message.css';
+@import './rules/dashboard.css';

package/dist/css/rules/alert-dialog.css

@@ -20,4 +20,8 @@
     .surf-dialog-header {
     padding-inline-end: var(--surf-ui-card-padding);
   }
+  :where([data-ui-size], [data-ui-size] *).surf-confirm-content
+    .surf-dialog-footer {
+    padding-top: var(--surf-space-2);
+  }
 }

package/dist/css/rules/app-shell.css

@@ -211,6 +211,16 @@
       border-radius: 0;
     }
   }
+  /* The menu trigger shows only where the sidebar hides, at the header's end. */
+  .surf-app-shell-menu-trigger.surf-button {
+    display: none;
+  }
+  @media (max-width: 760px) {
+    .surf-app-shell-menu-trigger.surf-button {
+      display: inline-flex;
+      margin-inline-start: auto;
+    }
+  }
   @media (max-width: 760px), (pointer: coarse) {
     .surf-app-shell-link {
       min-block-size: var(--surf-control-target-size);

package/dist/css/rules/bar-list.css

@@ -0,0 +1,101 @@
+/* Bar list, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  /* Every row is one height, so a list that scrolls shows whole rows: a name line,
+     and a detail line when any row has one. */
+  .surf-bar-list {
+    --surf-bar-list-row: calc(
+      var(--surf-type-body-size) * var(--surf-type-body-leading) +
+        var(--surf-space-2)
+    );
+    min-inline-size: 0;
+  }
+  .surf-bar-list[data-detail] {
+    --surf-bar-list-row: calc(
+      var(--surf-type-body-size) * var(--surf-type-body-leading) +
+        var(--surf-type-caption-size) * var(--surf-type-caption-leading) +
+        var(--surf-space-2)
+    );
+  }
+  .surf-bar-list .surf-scroll-viewport {
+    max-block-size: calc(var(--surf-bar-list-rows) * var(--surf-bar-list-row));
+  }
+  /* Name, bar and value share one line, in columns every row shares, so the bars
+     start together and the values line up at the end. */
+  .surf-bar-list-items {
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(var(--surf-space-12), 3fr) auto;
+    column-gap: var(--surf-space-3);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .surf-bar-list-item {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+    align-items: center;
+    box-sizing: border-box;
+    block-size: var(--surf-bar-list-row);
+    padding-block: var(--surf-space-1);
+    color: var(--surf-ink-body);
+    font: var(--surf-weight-regular)
+      var(--surf-type-body-size)/var(--surf-type-body-leading)
+      var(--surf-font-body);
+  }
+  .surf-bar-list-label {
+    display: grid;
+    min-inline-size: 0;
+  }
+  .surf-bar-list-name,
+  .surf-bar-list-detail {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .surf-bar-list-name {
+    color: var(--surf-ink);
+  }
+  .surf-bar-list-detail {
+    color: var(--surf-ink-muted);
+    font-size: var(--surf-type-caption-size);
+    line-height: var(--surf-type-caption-leading);
+  }
+  /* The pair Progress and Slider use: the brand mark on the surface plane. */
+  .surf-bar-list-bar {
+    display: block;
+    block-size: var(--surf-space-2);
+    border-radius: var(--surf-radius-full);
+    background: var(--surf-surface);
+    overflow: hidden;
+  }
+  .surf-bar-list-fill {
+    display: block;
+    block-size: 100%;
+    border-radius: inherit;
+    background: var(--surf-brand-mark);
+  }
+  .surf-bar-list-value {
+    color: var(--surf-ink);
+    font-variant-numeric: tabular-nums;
+    text-align: end;
+    white-space: nowrap;
+  }
+  @media (forced-colors: active) {
+    .surf-bar-list-bar {
+      background: Canvas;
+      outline: 1px solid CanvasText;
+    }
+    .surf-bar-list-fill {
+      background: CanvasText;
+    }
+  }
+}
+@layer surflane.sizes {
+  /* The bar is as thick as Meter's and Progress's at each size. */
+  :where([data-ui-size], [data-ui-size] *).surf-bar-list-bar {
+    block-size: var(--surf-ui-gauge);
+  }
+}