@momoi-labs/kiso-react 0.6.1 → 0.8.0

package/README.md

@@ -66,6 +66,8 @@ Data and structure
   primary action in the top bar and no sidebar rail.
 - Split, Pane, and Splitter, a list-detail layout with a resizable divider.
 - LogView, LogViewLine, LogViewTime, and LogViewLevel.
+- StepList, a run's steps with a state each, and StepBar, the same run as
+  one segment per step for a summary, a table cell, or a toast.
 - Stat, StatHeader, StatLabel, StatValue, StatFoot, and StatDelta.
 - KV, KVKey, and KVValue, a description list of fixed facts.
 - Separator, horizontal or vertical, and Dot and `dotVariants`.
@@ -82,6 +84,10 @@ Navigation
 - ThemeSelector, a controlled selector. The application owns theme persistence
   and applies `data-theme="light"` or `data-theme="dark"` to the document root.
   Remove the attribute for system mode.
+- AccentSelector, a controlled selector, plus the `accents` list and `Accent`
+  type. The application owns accent persistence and applies
+  `data-accent="<name>"` to the document root, or to any container that should
+  carry its own accent. No attribute means violet.
 
 Feedback
 
@@ -193,3 +199,49 @@ isolated consumer, including TypeScript, CSS bundling, and rendered semantics.
 
 See [Publishing Kiso](../../docs/publishing.md) for releases. Adapted shadcn/ui
 code retains its upstream MIT notice in `SHADCN-LICENSE`.
+
+## Metrics dashboards
+
+Chart supports `line` and `stacked-area`, one to five named series, null gaps,
+UTC timestamps, synchronized inspection through `syncId`, a summary legend,
+and a disclosure containing every exact sample. Pass the same timestamp grid
+to synchronized panels. Put the common unit in `label`.
+
+```tsx
+<Chart
+  label="CPU (%)"
+  series={[{ key: "user", label: "User", slot: 1 }]}
+  data={[
+    { timestamp: 1789203600000, values: { user: 24 } },
+    { timestamp: 1789203610000, values: { user: null } },
+    { timestamp: 1789203620000, values: { user: 31 } },
+  ]}
+/>
+```
+
+ChartLegend is also exported for standalone summaries. Meter, Progress,
+BarGauge, Disclosure, TimeRangeControl, DashboardGrid, and DashboardPanel
+compose the surrounding dashboard. See their contracts in `@momoi-labs/kiso`
+and the gallery previews for complete examples. Sparkline now accepts null
+gaps without shifting later sample positions.
+
+Chart presentation options compose independently:
+
+```tsx
+<Chart
+  label="CPU (%)"
+  data={samples}
+  series={series}
+  variant="stacked-area"
+  layout="compact"
+  legend="inline"
+  highlightSeries={highlight}
+  onHighlightSeriesChange={setHighlight}
+/>
+```
+
+`layout` accepts `standard`, `compact`, or `split`; `legend` accepts `table`,
+`inline`, or `sidebar`. Split requires `variant="line"` and keeps a shared
+scale across lanes. The sidebar follows the inspected timestamp. Omit
+`highlightSeries` for local legend selection, or pass a key/null with the
+callback for controlled selection. All combinations retain exact values.

package/dist/accent-selector.d.ts

@@ -0,0 +1,9 @@
+export declare const accents: readonly ["violet", "terracotta", "teal", "cobalt", "nocturne"];
+export type Accent = (typeof accents)[number];
+export declare function AccentSelector({ accent, onChange, options, preview, }: {
+    accent: string;
+    onChange: (accent: Accent) => void;
+    options?: readonly Accent[];
+    /** Render the live preview of the selected accent below the pills. */
+    preview?: boolean;
+}): import("react").JSX.Element;

package/dist/accent-selector.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const accents = [
+    "violet",
+    "terracotta",
+    "teal",
+    "cobalt",
+    "nocturne",
+];
+const label = (accent) => `${accent[0].toUpperCase()}${accent.slice(1)}`;
+export function AccentSelector({ accent, onChange, options = accents, preview = true, }) {
+    return (_jsxs("div", { className: "accent-row", children: [_jsxs("div", { className: "theme-row", children: [_jsx("span", { className: "t-label", children: "Accent" }), _jsx("div", { className: "accent-pills", role: "group", "aria-label": "Accent", children: options.map((option) => (_jsxs("button", { type: "button", className: "accent-pill", "aria-pressed": accent === option, "data-accent": option, onClick: () => onChange(option), children: [_jsx("span", { className: "accent-dot", "aria-hidden": "true" }), label(option)] }, option))) })] }), preview && (_jsxs("div", { className: "accent-preview", "data-accent": accent, "aria-hidden": "true", children: [_jsxs("span", { className: "accent-preview-sidebar", children: [_jsx("i", {}), _jsx("i", {}), _jsx("i", {}), _jsx("i", {})] }), _jsxs("span", { className: "accent-preview-main", children: [_jsx("i", { className: "accent-preview-title" }), _jsx("i", { className: "accent-preview-text" }), _jsx("i", { className: "accent-preview-link" }), _jsxs("span", { className: "accent-preview-actions", children: [_jsx("i", { className: "accent-preview-primary" }), _jsx("i", { className: "accent-preview-secondary" })] }), _jsx("i", { className: "accent-preview-selected" })] })] }))] }));
+}

package/dist/bar-gauge.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+export type BarGaugeProps = Omit<React.ComponentProps<"div">, "children"> & {
+    label: string;
+    rows: readonly {
+        key: string;
+        label: string;
+        value: number | null;
+    }[];
+    max: number;
+    formatValue?: (value: number) => string;
+};
+export declare function BarGauge({ label, rows, max, formatValue, className, ...props }: BarGaugeProps): React.JSX.Element;

package/dist/bar-gauge.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { clsx as cn } from "clsx";
+import { Meter } from "./meter.js";
+export function BarGauge({ label, rows, max, formatValue = String, className, ...props }) {
+    if (!Number.isFinite(max) || max <= 0)
+        throw new RangeError("Bar gauge max must be positive.");
+    return _jsx("div", { ...props, role: "group", "aria-label": label, "data-slot": "bar-gauge", className: cn("bar-gauge", className), children: rows.length ? rows.map(row => _jsx(Meter, { label: row.label, value: row.value, max: max, valueText: row.value !== null && Number.isFinite(row.value) ? formatValue(row.value) : "Not collected" }, row.key))
+            : _jsx("p", { children: "No measurements." }) });
+}

package/dist/chart-data.d.ts

@@ -0,0 +1,24 @@
+export type ChartSample = {
+    /** Epoch milliseconds. Include every expected timestamp, including gaps. */
+    timestamp: number;
+    values: Readonly<Record<string, number | null>>;
+};
+export type ChartSeries = {
+    key: string;
+    label: string;
+    /** Stable identity across panels. Defaults to its position, starting at 1. */
+    slot?: 1 | 2 | 3 | 4 | 5;
+};
+export declare const chartStrokes: readonly [undefined, "8 4", "2 3", "8 3 2 3", "12 3 2 3 2 3"];
+export declare const chartSlot: (series: ChartSeries, index: number) => number;
+export declare const chartColor: (slot: number) => string;
+export declare const measured: (value: number | null | undefined) => value is number;
+export declare function validateChart(data: readonly ChartSample[], series: readonly ChartSeries[]): void;
+export declare function seriesSummary(data: readonly ChartSample[], key: string): {
+    min: number | null;
+    max: number | null;
+    avg: number | null;
+    current: number | null;
+};
+export declare const formatChartTime: (timestamp: number) => string;
+export declare const formatChartValue: (value: number) => string;

package/dist/chart-data.js

@@ -0,0 +1,34 @@
+export const chartStrokes = [undefined, "8 4", "2 3", "8 3 2 3", "12 3 2 3 2 3"];
+export const chartSlot = (series, index) => series.slot ?? index + 1;
+export const chartColor = (slot) => `var(--color-chart-${slot})`;
+export const measured = (value) => typeof value === "number" && Number.isFinite(value);
+export function validateChart(data, series) {
+    if (series.length < 1 || series.length > 5)
+        throw new RangeError("Charts require one to five series.");
+    const keys = new Set();
+    const slots = new Set();
+    series.forEach((item, index) => {
+        const slot = chartSlot(item, index);
+        if (!item.key || !item.label || keys.has(item.key) || slots.has(slot) || slot < 1 || slot > 5 || !Number.isInteger(slot)) {
+            throw new RangeError("Chart series require unique keys, slots from 1 to 5, and labels.");
+        }
+        keys.add(item.key);
+        slots.add(slot);
+    });
+    data.forEach((sample, index) => {
+        if (!Number.isFinite(sample.timestamp) || Math.abs(sample.timestamp) > 8.64e15 || (index > 0 && sample.timestamp <= data[index - 1].timestamp)) {
+            throw new RangeError("Chart timestamps must be finite and strictly increasing.");
+        }
+    });
+}
+export function seriesSummary(data, key) {
+    const values = data.map(sample => sample.values[key]).filter(measured);
+    return {
+        min: values.length ? Math.min(...values) : null,
+        max: values.length ? Math.max(...values) : null,
+        avg: values.length ? values.reduce((sum, value) => sum + value / values.length, 0) : null,
+        current: measured(data.at(-1)?.values[key]) ? data.at(-1).values[key] : null,
+    };
+}
+export const formatChartTime = (timestamp) => new Date(timestamp).toISOString();
+export const formatChartValue = (value) => String(value);

package/dist/chart-legend.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { type ChartSample, type ChartSeries } from "./chart-data.js";
+export type ChartLegendProps = React.ComponentProps<"div"> & {
+    data: readonly ChartSample[];
+    series: readonly ChartSeries[];
+    label: string;
+    formatValue?: (value: number) => string;
+    variant?: "table" | "inline" | "sidebar";
+    activeTimestamp?: number | null;
+    formatTime?: (timestamp: number) => string;
+    highlightSeries?: string | null;
+    onHighlightSeriesChange?: (key: string | null) => void;
+};
+export declare function ChartSeriesLabel({ series, index }: {
+    series: ChartSeries;
+    index: number;
+}): React.JSX.Element;
+export declare function ChartLegend({ data, series, label, formatValue, variant, activeTimestamp, formatTime, highlightSeries, onHighlightSeriesChange, className, ...props }: ChartLegendProps): React.JSX.Element;

package/dist/chart-legend.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx as cn } from "clsx";
+import { chartColor, chartSlot, formatChartTime, formatChartValue, measured, seriesSummary, validateChart } from "./chart-data.js";
+export function ChartSeriesLabel({ series, index }) {
+    const slot = chartSlot(series, index);
+    return _jsxs("span", { className: "chart-series-label", children: [_jsx("svg", { "aria-hidden": "true", width: "28", height: "12", viewBox: "0 0 28 12", children: _jsx("path", { d: "M0 6H28", stroke: chartColor(slot), strokeWidth: "2" }) }), _jsxs("span", { children: [slot, ". ", series.label] })] });
+}
+export function ChartLegend({ data, series, label, formatValue = formatChartValue, variant = "table", activeTimestamp, formatTime = formatChartTime, highlightSeries, onHighlightSeriesChange, className, ...props }) {
+    validateChart(data, series);
+    const seriesLabel = (item, index) => onHighlightSeriesChange
+        ? _jsx("button", { type: "button", className: "chart-series-button", "aria-pressed": highlightSeries === item.key, onClick: () => onHighlightSeriesChange(highlightSeries === item.key ? null : item.key), children: _jsx(ChartSeriesLabel, { series: item, index: index }) })
+        : _jsx(ChartSeriesLabel, { series: item, index: index });
+    if (variant !== "table") {
+        const sample = activeTimestamp == null ? data.at(-1) : data.find(item => item.timestamp === activeTimestamp);
+        return _jsxs("div", { ...props, "data-slot": "chart-legend", "data-variant": variant, className: cn("chart-legend", `chart-legend-${variant}`, className), "aria-label": label, "aria-live": variant === "sidebar" ? "polite" : undefined, children: [_jsx("span", { className: "chart-legend-caption", children: variant === "sidebar" && activeTimestamp != null
+                        ? formatTime(activeTimestamp) : "Current" }), _jsx("dl", { children: series.map((item, index) => _jsxs("div", { children: [_jsx("dt", { children: seriesLabel(item, index) }), _jsx("dd", { children: measured(sample?.values[item.key]) ? formatValue(sample.values[item.key]) : "Not collected" })] }, item.key)) })] });
+    }
+    return _jsx("div", { ...props, "data-slot": "chart-legend", "data-variant": "table", className: cn("chart-table-scroll", className), children: _jsxs("table", { className: "chart-table", children: [_jsx("caption", { children: label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Series" }), ["Min", "Max", "Avg", "Current"].map(name => _jsx("th", { scope: "col", children: name }, name))] }) }), _jsx("tbody", { children: series.map((item, index) => {
+                        const summary = seriesSummary(data, item.key);
+                        return _jsxs("tr", { children: [_jsx("th", { scope: "row", children: seriesLabel(item, index) }), ["min", "max", "avg", "current"].map(stat => _jsx("td", { children: summary[stat] === null ? "Not collected" : formatValue(summary[stat]) }, stat))] }, item.key);
+                    }) })] }) });
+}

package/dist/chart.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { type ChartSample, type ChartSeries } from "./chart-data.js";
+export type { ChartSample, ChartSeries } from "./chart-data.js";
+export type ChartProps = Omit<React.ComponentProps<"figure">, "children"> & {
+    data: readonly ChartSample[];
+    series: readonly ChartSeries[];
+    label: string;
+    variant?: "line" | "stacked-area";
+    layout?: "standard" | "compact" | "split";
+    legend?: "table" | "inline" | "sidebar";
+    /** A controlled highlight. Pass null to clear it, or omit for local selection. */
+    highlightSeries?: string | null;
+    onHighlightSeriesChange?: (key: string | null) => void;
+    height?: number;
+    /** Panels in a group inspect the same timestamp, not the same array index. */
+    syncId?: string;
+    formatTime?: (timestamp: number) => string;
+    formatValue?: (value: number) => string;
+    min?: number;
+    max?: number;
+};
+export declare function Chart({ data, series, label, variant, layout, legend, highlightSeries, onHighlightSeriesChange, height, syncId, formatTime, formatValue, min, max, className, ...props }: ChartProps): React.JSX.Element;

package/dist/chart.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { clsx as cn } from "clsx";
+import { Area, CartesianGrid, ComposedChart, Line, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { ChartLegend, ChartSeriesLabel } from "./chart-legend.js";
+import { chartColor, chartSlot, formatChartTime, formatChartValue, measured, validateChart } from "./chart-data.js";
+export function Chart({ data, series, label, variant = "line", layout = "standard", legend = "table", highlightSeries, onHighlightSeriesChange, height = layout === "compact" ? 165 : layout === "split" ? 90 : 200, syncId, formatTime = formatChartTime, formatValue = formatChartValue, min, max, className, ...props }) {
+    const id = React.useId();
+    const [localHighlight, setLocalHighlight] = React.useState(null);
+    const [activeTimestamp, setActiveTimestamp] = React.useState(null);
+    const requestedHighlight = highlightSeries === undefined ? localHighlight : highlightSeries;
+    const highlighted = series.some(item => item.key === requestedHighlight) ? requestedHighlight : null;
+    const highlight = (key) => {
+        if (highlightSeries === undefined)
+            setLocalHighlight(key);
+        onHighlightSeriesChange?.(key);
+    };
+    validateChart(data, series);
+    if (layout === "split" && variant === "stacked-area") {
+        throw new RangeError("Split layout requires line charts. Stacked areas share one plot.");
+    }
+    if (variant === "stacked-area" && data.some(sample => series.some(item => measured(sample.values[item.key]) && sample.values[item.key] < 0))) {
+        throw new RangeError("Stacked areas require nonnegative values. Use lines for signed data.");
+    }
+    if (!Number.isFinite(height) || height <= 0 || (min !== undefined && !Number.isFinite(min))
+        || (max !== undefined && !Number.isFinite(max)) || (min !== undefined && max !== undefined && min >= max)) {
+        throw new RangeError("Chart height must be positive and numeric bounds must be finite and ordered.");
+    }
+    // A partial stack has an unknown total. Omit the entire column rather than
+    // drawing the missing contribution as zero. Tables retain the known values.
+    const plot = data.map(sample => {
+        const gap = variant === "stacked-area" && series.some(item => !measured(sample.values[item.key]));
+        return { timestamp: sample.timestamp, values: series.map(item => !gap && measured(sample.values[item.key]) ? sample.values[item.key] : null) };
+    });
+    const hasData = plot.some(sample => sample.values.some(measured));
+    const displayValue = (value) => measured(value) ? formatValue(value) : "Not collected";
+    const known = plot.flatMap(sample => sample.values).filter(measured);
+    let splitMin = min ?? Math.min(0, ...known);
+    let splitMax = max ?? Math.max(0, ...known);
+    if (splitMin === splitMax) {
+        if (max === undefined)
+            splitMax += Math.max(1, Math.abs(splitMax) * 0.1);
+        else
+            splitMin -= Math.max(1, Math.abs(splitMin) * 0.1);
+    }
+    const renderPlot = (indices, lane) => _jsx("div", { className: "chart-plot", style: { height }, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(ComposedChart, { data: plot, syncId: syncId ?? (layout === "split" ? id : undefined), syncMethod: "value", accessibilityLayer: true, "aria-label": lane ? `${label}: ${lane.label}` : label, "aria-describedby": `${id}-help`, margin: { top: 8, right: 12, bottom: 0, left: 0 }, children: [_jsx(CartesianGrid, { vertical: false, stroke: "var(--color-border)", strokeWidth: 0.5 }), _jsx(XAxis, { dataKey: "timestamp", type: "number", domain: ["dataMin", "dataMax"], scale: "time", axisLine: false, tickLine: false, tickFormatter: formatTime, minTickGap: 48, tick: { fill: "var(--color-muted-foreground)" } }), _jsx(YAxis, { domain: layout === "split" ? [splitMin, splitMax]
+                            : [min ?? (variant === "stacked-area" ? 0 : "auto"), max ?? "auto"], tickCount: 3, axisLine: false, tickLine: false, tickFormatter: formatValue, tick: { fill: "var(--color-muted-foreground)" }, width: 56 }), _jsx(Tooltip, { filterNull: false, isAnimationActive: false, cursor: { stroke: "var(--color-border-strong)", strokeDasharray: "3 3" }, content: ({ active, label: timestamp }) => _jsx(ChartReadout, { active: active, timestamp: Number(timestamp), data: data, series: series, formatTime: formatTime, displayValue: displayValue, sidebar: legend === "sidebar", onInspect: legend === "sidebar" && (!lane || indices[0] === 0) ? setActiveTimestamp : undefined }) }), indices.map(index => {
+                        const item = series[index];
+                        const slot = chartSlot(item, index);
+                        const dimmed = highlighted !== null && item.key !== highlighted;
+                        const common = { dataKey: `values.${index}`, name: item.label, stroke: chartColor(slot),
+                            strokeWidth: item.key === highlighted ? 2.2 : 1.5, strokeOpacity: dimmed ? 0.3 : 1,
+                            connectNulls: false, isAnimationActive: false,
+                            dot: (dotProps) => {
+                                const at = dotProps.index ?? -1;
+                                const isolated = measured(plot[at]?.values[index])
+                                    && !measured(plot[at - 1]?.values[index]) && !measured(plot[at + 1]?.values[index]);
+                                return _jsx("circle", { cx: dotProps.cx, cy: dotProps.cy, r: isolated ? 3 : 0, fill: chartColor(slot), opacity: dimmed ? 0.3 : 1 }, at);
+                            }, activeDot: { r: 4 } };
+                        return variant === "stacked-area"
+                            ? _jsx(Area, { ...common, type: "linear", stackId: "total", fill: chartColor(slot), fillOpacity: dimmed ? 0.06 : 0.2 }, item.key)
+                            : _jsx(Line, { ...common, type: "linear" }, item.key);
+                    })] }) }) });
+    const legendContent = _jsx(ChartLegend, { data: data, series: series, label: `${label}: summary`, variant: legend, formatValue: formatValue, formatTime: formatTime, activeTimestamp: legend === "sidebar" && hasData ? activeTimestamp : null, highlightSeries: highlighted, onHighlightSeriesChange: highlight });
+    return _jsxs("figure", { ...props, "data-slot": "chart", "data-layout": layout, "data-legend": legend, className: cn("framed-chart", className), "aria-labelledby": `${id}-title`, children: [_jsx("figcaption", { id: `${id}-title`, className: "t-h3", children: label }), _jsx("p", { id: `${id}-help`, className: "chart-help", children: "Focus the chart and use Left and Right to inspect samples. Select a series in the legend to highlight it. Exact values are available below." }), _jsxs("div", { className: "chart-body", children: [_jsx("div", { className: "chart-plots", children: hasData ? layout === "split" ? series.map((item, index) => _jsxs("div", { className: "chart-lane", children: [_jsxs("div", { className: "chart-lane-heading", children: [_jsx(ChartSeriesLabel, { series: item, index: index }), _jsx("span", { children: displayValue(data.at(-1)?.values[item.key]) })] }), renderPlot([index], item)] }, item.key)) : renderPlot(series.map((_, index) => index))
+                            : _jsx("div", { className: "chart-empty hatch", style: { minHeight: height }, children: "No collected samples in this window." }) }), legend === "sidebar" && legendContent] }), legend !== "sidebar" && legendContent, _jsxs("details", { className: "disclosure chart-values", children: [_jsx("summary", { children: "View exact values" }), _jsx("div", { className: "chart-table-scroll", children: _jsxs("table", { className: "chart-table", children: [_jsxs("caption", { children: [label, ": collected samples, timestamps in UTC"] }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Timestamp" }), series.map(item => _jsx("th", { scope: "col", children: item.label }, item.key))] }) }), _jsx("tbody", { children: data.map(sample => _jsxs("tr", { children: [_jsx("th", { scope: "row", children: formatChartTime(sample.timestamp) }), series.map(item => _jsx("td", { children: measured(sample.values[item.key]) ? String(sample.values[item.key]) : "Not collected" }, item.key))] }, sample.timestamp)) })] }) })] })] });
+}
+// Observe Recharts' synchronized tooltip state after render. This keeps the
+// sidebar on the same timestamp for mouse, keyboard, touch, and sibling panels.
+function ChartReadout({ active, timestamp, data, series, formatTime, displayValue, sidebar, onInspect }) {
+    const sample = active ? data.find(item => item.timestamp === timestamp) : undefined;
+    const inspectedTimestamp = sample?.timestamp ?? null;
+    React.useEffect(() => { onInspect?.(inspectedTimestamp); }, [onInspect, inspectedTimestamp]);
+    if (!sample || sidebar)
+        return null;
+    return _jsxs("div", { className: "chart-inspection", role: "status", children: [_jsx("strong", { children: formatTime(sample.timestamp) }), _jsx("dl", { children: series.map((item, index) => _jsxs(React.Fragment, { children: [_jsx("dt", { children: _jsx(ChartSeriesLabel, { series: item, index: index }) }), _jsx("dd", { children: displayValue(sample.values[item.key]) })] }, item.key)) })] });
+}

package/dist/dashboard-grid.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+export declare function DashboardGrid({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export type DashboardPanelProps = React.ComponentProps<"div"> & {
+    span?: 3 | 4 | 6 | 8 | 12;
+};
+export declare function DashboardPanel({ span, className, style, ...props }: DashboardPanelProps): React.JSX.Element;

package/dist/dashboard-grid.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { clsx as cn } from "clsx";
+export function DashboardGrid({ className, ...props }) {
+    return _jsx("div", { ...props, "data-slot": "dashboard-grid", className: cn("dashboard-grid", className) });
+}
+export function DashboardPanel({ span = 6, className, style, ...props }) {
+    return _jsx("div", { ...props, "data-slot": "dashboard-panel", "data-span": span, className: cn("dashboard-panel", className), style: { "--dashboard-span": span, ...style } });
+}

package/dist/disclosure.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+export type DisclosureProps = Omit<React.ComponentProps<"details">, "title"> & {
+    summary: React.ReactNode;
+};
+export declare function Disclosure({ summary, className, children, ...props }: DisclosureProps): React.JSX.Element;

package/dist/disclosure.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx as cn } from "clsx";
+export function Disclosure({ summary, className, children, ...props }) {
+    return _jsxs("details", { ...props, "data-slot": "disclosure", className: cn("disclosure", className), children: [_jsx("summary", { children: summary }), _jsx("div", { className: "disclosure-content", children: children })] });
+}

package/dist/form.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps, ReactNode } from "react";
+type FormProps = ComponentProps<"form">;
+declare function Form({ className, ...props }: FormProps): import("react").JSX.Element;
+type FormActionsProps = ComponentProps<"div"> & {
+    sticky?: boolean;
+    tone?: "neutral" | "warning" | "danger";
+    message?: ReactNode;
+};
+declare function FormActions({ className, sticky, tone, message, children, ...props }: FormActionsProps): import("react").JSX.Element;
+export { Form, FormActions };
+export type { FormProps, FormActionsProps };

package/dist/form.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+function Form({ className, ...props }) {
+    return _jsx("form", { "data-slot": "form", className: clsx("form", className), ...props });
+}
+function FormActions({ className, sticky = false, tone = "neutral", message, children, ...props }) {
+    return (_jsxs("div", { "data-slot": "form-actions", "data-sticky": sticky || undefined, "data-tone": tone, className: clsx("form-actions", className), ...props, children: [_jsx("div", { className: "form-actions-message", role: "status", "aria-atomic": "true", children: message }), _jsx("div", { className: "form-actions-buttons", children: children })] }));
+}
+export { Form, FormActions };

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export * from "./drawer.js";
 export * from "./dropdown-menu.js";
 export * from "./empty-state.js";
 export * from "./form-field.js";
+export * from "./form.js";
 export * from "./header.js";
 export * from "./input.js";
 export * from "./kv.js";
@@ -40,6 +41,15 @@ export * from "./tabs.js";
 export * from "./terminal-icon.js";
 export * from "./textarea.js";
 export * from "./theme-selector.js";
+export * from "./accent-selector.js";
 export * from "./toast.js";
 export * from "./tooltip.js";
 export * from "./validation-message.js";
+export * from "./chart.js";
+export * from "./chart-legend.js";
+export * from "./meter.js";
+export * from "./bar-gauge.js";
+export * from "./disclosure.js";
+export * from "./time-range-control.js";
+export * from "./dashboard-grid.js";
+export * from "./step-list.js";

package/dist/index.js

@@ -16,6 +16,7 @@ export * from "./drawer.js";
 export * from "./dropdown-menu.js";
 export * from "./empty-state.js";
 export * from "./form-field.js";
+export * from "./form.js";
 export * from "./header.js";
 export * from "./input.js";
 export * from "./kv.js";
@@ -41,6 +42,15 @@ export * from "./tabs.js";
 export * from "./terminal-icon.js";
 export * from "./textarea.js";
 export * from "./theme-selector.js";
+export * from "./accent-selector.js";
 export * from "./toast.js";
 export * from "./tooltip.js";
 export * from "./validation-message.js";
+export * from "./chart.js";
+export * from "./chart-legend.js";
+export * from "./meter.js";
+export * from "./bar-gauge.js";
+export * from "./disclosure.js";
+export * from "./time-range-control.js";
+export * from "./dashboard-grid.js";
+export * from "./step-list.js";

package/dist/meter.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export type MeterProps = Omit<React.ComponentProps<"div">, "children"> & {
+    label: string;
+    value: number | null;
+    min?: number;
+    max?: number;
+    valueText?: string;
+};
+export declare function Meter({ label, value, min, max, valueText, className, ...props }: MeterProps): React.JSX.Element;
+export type ProgressProps = Omit<MeterProps, "min" | "value"> & {
+    value?: number | null;
+};
+export declare function Progress({ label, value, max, valueText, className, ...props }: ProgressProps): React.JSX.Element;

package/dist/meter.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx as cn } from "clsx";
+export function Meter({ label, value, min = 0, max = 100, valueText, className, ...props }) {
+    if (!Number.isFinite(min) || !Number.isFinite(max) || max <= min)
+        throw new RangeError("Meter max must exceed min.");
+    const known = value !== null && Number.isFinite(value);
+    const bounded = known ? Math.min(max, Math.max(min, value)) : undefined;
+    const text = valueText ?? (known ? `${value} / ${max}` : "Not collected");
+    return _jsxs("div", { ...props, "data-slot": "meter", className: cn("meter", className), children: [_jsxs("div", { className: "meter-label", children: [_jsx("span", { children: label }), _jsx("span", { children: text })] }), _jsx("div", { role: known ? "meter" : undefined, "aria-label": label, "aria-valuemin": known ? min : undefined, "aria-valuemax": known ? max : undefined, "aria-valuenow": bounded, "aria-valuetext": known ? text : undefined, className: cn("meter-track", !known && "hatch"), children: bounded !== undefined && _jsx("span", { style: { width: `${(bounded - min) / (max - min) * 100}%` } }) })] });
+}
+export function Progress({ label, value, max = 100, valueText, className, ...props }) {
+    if (!Number.isFinite(max) || max <= 0)
+        throw new RangeError("Progress max must be positive.");
+    const known = value != null && Number.isFinite(value);
+    const text = valueText ?? (known ? `${value} / ${max}` : "In progress");
+    return _jsxs("div", { ...props, "data-slot": "progress", className: cn("meter", className), children: [_jsxs("div", { className: "meter-label", children: [_jsx("span", { children: label }), _jsx("span", { children: text })] }), _jsx("div", { role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": known ? Math.min(max, Math.max(0, value)) : undefined, "aria-valuetext": text, className: cn("meter-track", !known && "hatch"), children: known && _jsx("span", { style: { width: `${Math.min(1, Math.max(0, value / max)) * 100}%` } }) })] });
+}

package/dist/sparkline.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 export type SparklineProps = Omit<React.ComponentProps<"div">, "ref"> & {
-    values: number[];
+    values: readonly (number | null)[];
     height?: number;
     tone?: "neutral" | "primary";
     fill?: boolean;

package/dist/sparkline.js

@@ -5,15 +5,16 @@ import { clsx as cn } from "clsx";
 function Sparkline({ values, height = 24, tone = "neutral", fill = false, min, max, label, className, style, ref, ...props }) {
     // Below two samples there is no shape to show, and a flat rule across a
     // cell reads as a border rather than as a measurement.
-    if (values.length < 2)
+    const known = values.filter((value) => value !== null && Number.isFinite(value));
+    if (known.length < 2)
         return null;
     // Default domain is the data's own extent; pass min and max to make
     // sibling sparklines share one scale, so rows compare honestly.
-    let lo = min ?? Math.min(...values);
-    let hi = max ?? Math.max(...values);
+    let lo = min ?? Math.min(...known);
+    let hi = max ?? Math.max(...known);
     const pad = lo === hi ? Math.max(1, Math.abs(lo) * 0.1) : 0;
     lo -= pad;
     hi += pad;
-    return (_jsx("div", { ref: ref, "data-slot": "sparkline", "data-tone": tone, role: label ? "img" : undefined, "aria-label": label, "aria-hidden": label ? undefined : true, className: cn("sparkline", tone === "primary" && "primary", className), style: { height, ...style }, ...props, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(AreaChart, { data: values.map((value) => ({ value })), margin: { top: 2, right: 0, bottom: 2, left: 0 }, children: [_jsx(YAxis, { hide: true, domain: [lo, hi] }), _jsx(Area, { type: "monotone", dataKey: "value", stroke: "currentColor", strokeWidth: 1.5, fill: fill ? "currentColor" : "none", fillOpacity: fill ? 0.12 : 0, isAnimationActive: false, dot: false, activeDot: false })] }) }) }));
+    return (_jsx("div", { ref: ref, "data-slot": "sparkline", "data-tone": tone, role: label ? "img" : undefined, "aria-label": label, "aria-hidden": label ? undefined : true, className: cn("sparkline", tone === "primary" && "primary", className), style: { height, ...style }, ...props, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(AreaChart, { data: values.map((value) => ({ value: value !== null && Number.isFinite(value) ? value : null })), margin: { top: 2, right: 0, bottom: 2, left: 0 }, children: [_jsx(YAxis, { hide: true, domain: [lo, hi] }), _jsx(Area, { type: "monotone", connectNulls: false, dataKey: "value", stroke: "currentColor", strokeWidth: 1.5, fill: fill ? "currentColor" : "none", fillOpacity: fill ? 0.12 : 0, isAnimationActive: false, dot: false, activeDot: false })] }) }) }));
 }
 export { Sparkline };

package/dist/step-list.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+export type StepState = "pending" | "running" | "done" | "skipped" | "failed";
+export type StepItem = {
+    key: string;
+    label: string;
+    state: StepState;
+    meta?: string;
+    detail?: React.ReactNode;
+};
+export type StepListProps = Omit<React.ComponentProps<"ol">, "children" | "onSelect"> & {
+    label: string;
+    steps: readonly StepItem[];
+    selected?: string | null;
+    onSelect?: (key: string) => void;
+};
+export declare function StepList({ label, steps, selected, onSelect, className, ...props }: StepListProps): React.JSX.Element;
+export type StepBarProps = Omit<React.ComponentProps<"div">, "children"> & {
+    label: string;
+    steps: readonly {
+        key: string;
+        label: string;
+        state: StepState;
+        progress?: number | null;
+    }[];
+};
+export declare function StepBar({ label, steps, className, ...props }: StepBarProps): React.JSX.Element;

package/dist/step-list.js

@@ -0,0 +1,33 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx as cn } from "clsx";
+const STATE_TEXT = {
+    pending: "Pending", running: "Running", done: "Done", skipped: "Skipped", failed: "Failed",
+};
+const DEFAULT_META = { running: "Running", skipped: "Not needed" };
+/* The rail is the progress: each connector takes the state of the step below
+   it, so the line fills as the run advances. Nothing else measures it. */
+export function StepList({ label, steps, selected, onSelect, className, ...props }) {
+    return _jsx("ol", { ...props, "aria-label": label, "data-slot": "step-list", className: cn("step-list", className), children: steps.map(step => {
+            const row = _jsxs(_Fragment, { children: [_jsx("span", { className: "step-label", children: step.label }), _jsx("span", { className: "step-meta", children: step.meta ?? DEFAULT_META[step.state] ?? "" })] });
+            return _jsxs("li", { "data-slot": "step", "data-state": step.state, className: "step", "aria-current": step.state === "running" ? "step" : undefined, children: [_jsx("span", { className: "step-rail", "aria-hidden": "true", children: _jsx("span", { className: "step-mark" }) }), _jsxs("div", { className: "step-body", children: [onSelect
+                                ? _jsx("button", { type: "button", className: "step-row", "aria-pressed": selected === step.key, "aria-label": `${step.label}, ${STATE_TEXT[step.state].toLowerCase()}`, onClick: () => onSelect(step.key), children: row })
+                                : _jsx("div", { className: "step-row", role: "img", "aria-label": `${step.label}, ${STATE_TEXT[step.state].toLowerCase()}`, children: row }), step.detail != null && _jsx("div", { className: "step-detail", children: step.detail })] })] }, step.key);
+        }) });
+}
+/* One segment per step, coloured by state. The product writes the count and
+   the current step beside it; the bar only names them for assistive tech. */
+export function StepBar({ label, steps, className, ...props }) {
+    const failed = steps.findIndex(step => step.state === "failed");
+    const running = steps.findIndex(step => step.state === "running");
+    const at = failed >= 0 ? failed : running;
+    const finished = steps.length > 0 && steps.every(step => step.state === "done" || step.state === "skipped");
+    const name = at >= 0
+        ? `${label}: ${failed >= 0 ? "failed at" : "running"} step ${at + 1} of ${steps.length}, ${steps[at].label}`
+        : finished ? `${label}: all ${steps.length} steps done` : `${label}: not started`;
+    return _jsx("div", { ...props, role: "img", "aria-label": name, "data-slot": "step-bar", className: cn("step-bar", className), children: steps.map(step => {
+            const progress = step.state === "running" && step.progress != null && Number.isFinite(step.progress)
+                ? `${Math.min(1, Math.max(0, step.progress)) * 100}%` : undefined;
+            return _jsx("span", { "data-state": step.state, title: step.label, style: progress !== undefined ? { "--step-progress": progress } : undefined }, step.key);
+        }) });
+}

package/dist/styles.css

@@ -21,6 +21,69 @@
   color: var(--color-foreground);
   box-shadow: var(--shadow-xs);
 }
+/* AccentSelector: a pill row that chooses, and one preview that answers.
+   Each pill and the preview carry their own data-accent, so their colours
+   resolve under that accent without any inline values. */
+.accent-row { display: grid; gap: var(--spacing-sm); }
+/* Only the variant with a preview is a block-level settings row and can be a
+   size container; inline-size containment would collapse the preview-less
+   variant to zero width inside a toolbar's flex row. */
+.accent-row:has(.accent-preview) { container-type: inline-size; }
+.accent-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--spacing-xs); }
+/* Narrow hosts (a sidebar footer) stack the label over a two-column grid of
+   pills instead of wrapping them ragged beside it. */
+@container (width < 360px) {
+  .accent-row .theme-row { flex-direction: column; align-items: stretch; }
+  .accent-pills { display: grid; grid-template-columns: 1fr 1fr; }
+  .accent-pill { justify-content: center; }
+}
+.accent-pill {
+  display: inline-flex; align-items: center; gap: var(--spacing-xs);
+  height: var(--size-control-xs);
+  padding-inline: var(--spacing-xs) var(--spacing-sm);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-full);
+  background: var(--color-card);
+  color: var(--color-muted-foreground);
+  font: inherit; font-size: var(--type-size-label);
+  cursor: pointer;
+  transition: background var(--motion-duration-fast) var(--motion-easing-standard),
+    border-color var(--motion-duration-fast) var(--motion-easing-standard);
+}
+.accent-pill:hover { background: var(--color-accent-surface); color: var(--color-foreground); }
+.accent-pill[aria-pressed="true"] {
+  border-color: var(--color-primary);
+  background: var(--color-accent-surface);
+  color: var(--color-foreground);
+  font-weight: var(--type-weight-medium);
+}
+.accent-dot { width: var(--spacing-md); height: var(--spacing-md); border-radius: var(--radius-full); background: var(--color-primary); }
+
+.accent-preview {
+  display: grid; grid-template-columns: 1fr 3fr;
+  height: 120px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background: var(--color-background);
+}
+.accent-preview i { display: block; border-radius: var(--radius-sm); }
+.accent-preview-sidebar {
+  display: grid; align-content: start; gap: var(--spacing-sm);
+  padding: var(--spacing-md) var(--spacing-sm);
+  background: var(--color-sidebar);
+  border-inline-end: 1px solid var(--color-border);
+}
+.accent-preview-sidebar i { height: var(--spacing-xs); width: 70%; background: var(--color-border-strong); }
+.accent-preview-sidebar i:nth-child(2) { width: 85%; background: var(--color-link); }
+.accent-preview-main { display: grid; align-content: start; gap: var(--spacing-sm); padding: var(--spacing-md); }
+.accent-preview-title { height: var(--spacing-sm); width: 55%; background: var(--color-foreground); opacity: .8; }
+.accent-preview-text { height: var(--spacing-xs); width: 80%; background: var(--color-muted-foreground); }
+.accent-preview-link { height: var(--spacing-xs); width: 40%; background: var(--color-link); }
+.accent-preview-actions { display: flex; gap: var(--spacing-sm); }
+.accent-preview-primary { height: var(--spacing-lg); width: 56px; background: var(--color-primary); }
+.accent-preview-secondary { height: var(--spacing-lg); width: 44px; border: 1px solid var(--color-border-strong); background: var(--color-card); }
+.accent-preview-selected { height: var(--spacing-md); background: var(--color-selected); }
 
 .kiso-checkbox {
   position: relative;

package/dist/time-range-control.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+export type TimeRange = {
+    from: number;
+    to: number;
+};
+export type TimeRangeControlProps = {
+    value: TimeRange;
+    bounds: TimeRange;
+    onValueChange: (range: TimeRange) => void;
+    label?: string;
+    disabled?: boolean;
+    className?: string;
+    presets?: readonly {
+        label: string;
+        duration: number;
+    }[];
+};
+export declare function TimeRangeControl({ value, bounds, onValueChange, label, disabled, className, presets }: TimeRangeControlProps): React.JSX.Element;

package/dist/time-range-control.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { clsx as cn } from "clsx";
+import { Button } from "./button.js";
+import { Form, FormActions } from "./form.js";
+import { Input } from "./input.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+const defaultPresets = [
+    { label: "Last 5 minutes", duration: 300_000 },
+    { label: "Last 15 minutes", duration: 900_000 },
+    { label: "Last 30 minutes", duration: 1_800_000 },
+];
+const dateInput = (value) => new Date(value).toISOString().slice(0, 23);
+const shortRange = (range) => {
+    const from = dateInput(range.from);
+    const to = dateInput(range.to);
+    const sameDay = from.slice(0, 10) === to.slice(0, 10);
+    const compact = (date) => (sameDay ? date.slice(11) : date.replace("T", " ")).replace(/:00\.000$/, "").replace(/\.000$/, "");
+    return `${compact(from)} to ${compact(to)} UTC`;
+};
+const validRange = (range) => Number.isFinite(range.from) && Number.isFinite(range.to)
+    && Math.abs(range.from) <= 8.64e15 && Math.abs(range.to) <= 8.64e15 && range.from < range.to;
+export function TimeRangeControl({ value, bounds, onValueChange, label = "Time range", disabled, className, presets = defaultPresets }) {
+    const [open, setOpen] = React.useState(false);
+    const [custom, setCustom] = React.useState(false);
+    if (!validRange(bounds) || !validRange(value) || value.from < bounds.from || value.to > bounds.to) {
+        throw new RangeError("Time range must be ordered and contained within the collection bounds.");
+    }
+    if (presets.some(preset => !Number.isFinite(preset.duration) || preset.duration <= 0)) {
+        throw new RangeError("Time range preset durations must be positive milliseconds.");
+    }
+    const apply = (range) => { onValueChange(range); setOpen(false); };
+    return _jsxs(Popover, { open: open, onOpenChange: next => { setOpen(next); setCustom(false); }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { disabled: disabled, className: cn("time-range-trigger", className), "aria-label": `${label}: ${dateInput(value.from).replace("T", " ")} to ${dateInput(value.to).replace("T", " ")} UTC`, children: [shortRange(value), " ", _jsx("span", { "aria-hidden": "true", children: "\u2304" })] }) }), _jsx(PopoverContent, { className: "time-range-content", "aria-label": label, children: custom ? _jsxs("div", { className: "stack-sm", children: [_jsx(Button, { variant: "ghost", onClick: () => setCustom(false), children: "Back to presets" }), _jsx(TimeRangeForm, { value: value, bounds: bounds, onApply: apply }, `${value.from}-${value.to}-${open}`)] }) : _jsxs("div", { className: "time-range-presets", children: [_jsxs(Button, { variant: "ghost", onClick: () => apply(bounds), children: [_jsx("span", { children: "Entire run" }), _jsx("small", { children: shortRange(bounds) })] }), presets.map(preset => {
+                            const range = { from: Math.max(bounds.from, bounds.to - preset.duration), to: bounds.to };
+                            return _jsxs(Button, { variant: "ghost", onClick: () => apply(range), children: [_jsx("span", { children: preset.label }), _jsx("small", { children: shortRange(range) })] }, preset.label);
+                        }), _jsx(Button, { variant: "ghost", onClick: () => setCustom(true), children: "Custom range" })] }) })] });
+}
+function TimeRangeForm({ value, bounds, onApply }) {
+    const id = React.useId();
+    const [from, setFrom] = React.useState(dateInput(value.from));
+    const [to, setTo] = React.useState(dateInput(value.to));
+    const [error, setError] = React.useState("");
+    return _jsxs(Form, { className: "stack-sm", onSubmit: event => {
+            event.preventDefault();
+            const range = { from: Date.parse(`${from}Z`), to: Date.parse(`${to}Z`) };
+            if (!validRange(range) || range.from < bounds.from || range.to > bounds.to) {
+                setError("Choose a start before the end, within the collection window.");
+                return;
+            }
+            onApply(range);
+        }, children: [_jsx("label", { htmlFor: `${id}-from`, children: "From (UTC)" }), _jsx(Input, { id: `${id}-from`, type: "datetime-local", step: "0.001", required: true, value: from, min: dateInput(bounds.from), max: dateInput(bounds.to), onChange: event => { setFrom(event.target.value); setError(""); }, "aria-invalid": !!error, "aria-describedby": error ? `${id}-error` : undefined }), _jsx("label", { htmlFor: `${id}-to`, children: "To (UTC)" }), _jsx(Input, { id: `${id}-to`, type: "datetime-local", step: "0.001", required: true, value: to, min: dateInput(bounds.from), max: dateInput(bounds.to), onChange: event => { setTo(event.target.value); setError(""); }, "aria-invalid": !!error, "aria-describedby": error ? `${id}-error` : undefined }), error && _jsx("p", { id: `${id}-error`, role: "alert", className: "field-error", children: error }), _jsx(FormActions, { children: _jsx(Button, { type: "submit", variant: "primary", children: "Apply range" }) })] });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momoi-labs/kiso-react",
-  "version": "0.6.1",
+  "version": "0.8.0",
   "description": "Kiso React components built with shadcn/ui and Radix",
   "type": "module",
   "license": "MIT",
@@ -32,7 +32,7 @@
     "prepack": "npm run build"
   },
   "dependencies": {
-    "@momoi-labs/kiso": "^0.9.0",
+    "@momoi-labs/kiso": "^0.11.0",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "radix-ui": "1.6.7",