@cosmicdrift/kumiko-renderer 0.373.0 → 0.377.0

package/dist/web/widgets/charts.js

@@ -0,0 +1,685 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { NARROW_VIEWPORT_BREAKPOINT_PX, useIsViewportBelow, } from "../primitives/use-narrow-viewport.js";
+import { bucketIndexAtFraction, initialWindowSelection, nearestIndex, pointsWithin, resolveStackedAreaWindow, snapBrushWindow, snapMovedBrushWindow, stackedAreaAxisTicks, stackedAreaDateFormatFor, } from "./chart-window.js";
+import { ModeSwitch } from "./mode-switch.js";
+import { STATUS_TONE_TEXT } from "./status-badge.js";
+// Inline-SVG-Charts — kein Chart-Dep. Farben ausschließlich über die
+// --color-status-* / --color-foreground Theme-Tokens; Achsen-Labels
+// kommen translated vom Caller (keine Locale-Annahmen im Widget).
+const HOUR_MS = 3_600_000;
+const DAY_MS = 24 * HOUR_MS;
+const TONE_VAR = {
+    ok: "var(--color-status-ok)",
+    warn: "var(--color-status-warn)",
+    bad: "var(--color-status-bad)",
+    critical: "var(--color-status-critical)",
+    muted: "var(--color-muted-foreground)",
+};
+/** Status bar strip (e.g. 90-day uptime): variable-height bars with
+ *  gradient fade + tick line on top; the last entry gets a "now"
+ *  accent stripe. `dense` swaps this for a flat-fill, fixed-size
+ *  variant sized to fit a table cell instead of stretching to `w-full`. */
+export function StatusBarChart({ entries, ariaLabel, startLabel, endLabel, highlightLast = true, dense = false, testId, }) {
+    const gradPrefix = useId();
+    if (entries.length === 0)
+        return _jsx("div", { className: dense ? "h-3" : "h-9", "aria-hidden": true });
+    const chartHeight = dense ? 12 : 36;
+    const tickHeight = dense ? 0 : 1;
+    const barWidth = dense ? 3 : 1;
+    const barGap = 1;
+    const lastIdx = entries.length - 1;
+    const totalWidth = entries.length * (barWidth + barGap);
+    return (_jsxs("div", { "data-testid": testId, children: [_jsxs("svg", { viewBox: `0 0 ${totalWidth} ${chartHeight}`, preserveAspectRatio: dense ? undefined : "none", width: dense ? totalWidth : undefined, height: dense ? chartHeight : undefined, className: dense ? "block" : "block h-9 w-full", role: "img", "aria-label": ariaLabel, children: [_jsx("title", { children: ariaLabel }), entries.map((entry, idx) => {
+                        const x = idx * (barWidth + barGap);
+                        const level = Math.max(0, Math.min(1, entry.level));
+                        // Dense has no tick rect, so level 0 would otherwise render nothing and lose its tooltip.
+                        const barHeight = Math.max((chartHeight - tickHeight) * level, dense ? 1 : 0);
+                        const barY = chartHeight - barHeight;
+                        const isLast = highlightLast && idx === lastIdx;
+                        const color = TONE_VAR[entry.tone];
+                        const gradId = `${gradPrefix}-${idx}`;
+                        return (_jsxs("g", { children: [!dense && (_jsx("defs", { children: _jsxs("linearGradient", { id: gradId, x1: "0", x2: "0", y1: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: color, stopOpacity: isLast ? 0.85 : 0.5 }), _jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.05 })] }) })), isLast && (_jsx("rect", { x: x - barGap / 2, y: 0, width: barWidth + barGap, height: chartHeight, fill: "var(--color-foreground)", fillOpacity: 0.06 })), _jsx("rect", { x: x, y: barY, width: barWidth, height: barHeight, fill: dense ? color : `url(#${gradId})`, fillOpacity: dense ? (isLast ? 1 : 0.75) : undefined, children: entry.label !== undefined && _jsx("title", { children: entry.label }) }), !dense && (_jsx("rect", { x: x, y: barY - tickHeight, width: barWidth, height: tickHeight, fill: "var(--color-foreground)", fillOpacity: isLast ? 1.0 : 0.7 }))] }, entry.key));
+                    })] }), (startLabel !== undefined || endLabel !== undefined) && (_jsxs("div", { className: "mt-0.5 flex justify-between text-[11px] text-muted-foreground", children: [_jsx("span", { children: startLabel }), _jsx("span", { children: endLabel })] }))] }));
+}
+const SINGLE_POINT_RADIUS = 3;
+function clampDotY(y, height) {
+    return Math.max(SINGLE_POINT_RADIUS, Math.min(height - SINGLE_POINT_RADIUS, y));
+}
+/** Quadratic-durch-Mittelpunkte-Trick: glättet die Zick-Zack-Linie ohne
+ *  Overshoot (~5 Zeilen statt Catmull-Rom/Bezier-Fit). */
+export function smoothPath(pts) {
+    const first = pts[0];
+    if (!first)
+        return "";
+    let d = `M ${first.x.toFixed(1)} ${first.y.toFixed(1)}`;
+    for (let i = 1; i < pts.length - 1; i++) {
+        const cur = pts[i];
+        const next = pts[i + 1];
+        if (!cur || !next)
+            break;
+        const midX = (cur.x + next.x) / 2;
+        const midY = (cur.y + next.y) / 2;
+        d += ` Q ${cur.x.toFixed(1)} ${cur.y.toFixed(1)}, ${midX.toFixed(1)} ${midY.toFixed(1)}`;
+    }
+    const last = pts[pts.length - 1];
+    if (!last)
+        return d;
+    return `${d} L ${last.x.toFixed(1)} ${last.y.toFixed(1)}`;
+}
+const DEFAULT_TIMESERIES_HEIGHT_CLASS = "h-16";
+const MIN_AXIS_TICKS = 2;
+const MAX_AXIS_TICKS = 20;
+function clampTickCount(requested) {
+    return Math.min(MAX_AXIS_TICKS, Math.max(MIN_AXIS_TICKS, Math.floor(requested) || MIN_AXIS_TICKS));
+}
+function evenlySpaced(count) {
+    const n = clampTickCount(count);
+    return Array.from({ length: n }, (_, i) => i / (n - 1));
+}
+function yTickPosition(index, count) {
+    if (index === 0)
+        return "-translate-y-full";
+    if (index === count - 1)
+        return "";
+    return "-translate-y-1/2";
+}
+/** Zeitreihen-Linien-Chart (geglättete Linie + Flächen-Verlauf). x-Achse =
+ *  ZEIT im Fenster windowStartMs..windowEndMs, nicht Index — 5 Min Daten in
+ *  einem 30-Tage-Fenster ergeben ehrlich einen schmalen Streifen rechts. */
+export function TimeseriesChart({ points, windowStartMs, windowEndMs, tone = "ok", ariaLabel, axisLabels, xAxis, yAxis, height, markers, formatMarkerTime, referenceLines, emptyContent, testId, }) {
+    const gradientId = useId();
+    const descId = useId();
+    const chartWidth = 300;
+    const chartHeight = 64;
+    const isNarrow = useIsViewportBelow(typeof height === "object"
+        ? (height.narrowBelowPx ?? NARROW_VIEWPORT_BREAKPOINT_PX)
+        : NARROW_VIEWPORT_BREAKPOINT_PX);
+    const heightPx = typeof height === "object" ? (isNarrow ? height.narrow : height.wide) : height;
+    const heightClass = heightPx === undefined ? DEFAULT_TIMESERIES_HEIGHT_CLASS : undefined;
+    const heightStyle = heightPx === undefined ? undefined : { height: heightPx };
+    const values = points.map((p) => p.value).filter((v) => v !== null);
+    if (values.length === 0) {
+        return (_jsx("div", { className: cn("flex items-center justify-center text-[13px] text-muted-foreground", heightClass), style: heightStyle, children: emptyContent }));
+    }
+    const drawableLines = (referenceLines ?? []).filter((line) => Number.isFinite(line.value) && line.value >= 0);
+    const singleValue = values.length === 1 ? values[0] : undefined;
+    // A lone value at the top edge would sit on the clip boundary; doubling the
+    // scale centres it.
+    const dataMax = Math.max(...values.map((value) => (singleValue === undefined ? value : value * 2)), ...drawableLines.map((line) => line.value), 1);
+    const yTicks = yAxis === undefined ? [] : niceYTicks(dataMax, yAxis.ticks);
+    const maxValue = yTicks.length > 0 ? (yTicks[yTicks.length - 1] ?? dataMax) : dataMax;
+    const yOf = (value) => chartHeight - (value / maxValue) * chartHeight;
+    const span = Math.max(1, windowEndMs - windowStartMs);
+    const xOf = (atMs) => Math.max(0, Math.min(1, (atMs - windowStartMs) / span)) * chartWidth;
+    const chartPoints = points.map((p) => ({
+        x: xOf(p.atMs),
+        y: p.value === null ? chartHeight : yOf(p.value),
+    }));
+    const linePath = smoothPath(chartPoints);
+    const firstPoint = chartPoints[0];
+    const lastPoint = chartPoints[chartPoints.length - 1];
+    const areaPath = firstPoint && lastPoint
+        ? `${linePath} L ${lastPoint.x.toFixed(1)} ${chartHeight} L ${firstPoint.x.toFixed(1)} ${chartHeight} Z`
+        : "";
+    const color = TONE_VAR[tone];
+    const hasReferenceLines = drawableLines.length > 0;
+    const svg = (_jsxs("svg", { viewBox: `0 0 ${chartWidth} ${chartHeight}`, preserveAspectRatio: "none", className: cn("block w-full", heightClass), style: heightStyle, role: "img", "aria-label": ariaLabel, "aria-describedby": hasReferenceLines ? descId : undefined, children: [_jsx("title", { children: ariaLabel }), hasReferenceLines && _jsx("desc", { id: descId, children: drawableLines.map((l) => l.label).join(", ") }), _jsx("defs", { children: _jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.3 }), _jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.02 })] }) }), yTicks.map((tick) => (_jsx("line", { "data-grid-line": "", x1: 0, x2: chartWidth, y1: yOf(tick), y2: yOf(tick), stroke: "var(--color-border)", strokeWidth: 1, vectorEffect: "non-scaling-stroke" }, `grid-${tick}`))), singleValue === undefined ? (_jsxs(_Fragment, { children: [_jsx("path", { d: areaPath, fill: `url(#${gradientId})`, stroke: "none" }), _jsx("path", { d: linePath, fill: "none", stroke: color, strokeWidth: 1.5, strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" })] })) : (_jsx("circle", { "data-testid": "timeseries-single-point", cx: chartWidth / 2, cy: clampDotY(yOf(singleValue), chartHeight), r: SINGLE_POINT_RADIUS, fill: color })), drawableLines.map((line) => (_jsx("line", { "data-reference-line": "", x1: 0, x2: chartWidth, y1: yOf(line.value), y2: yOf(line.value), stroke: TONE_VAR[line.tone ?? "muted"], strokeWidth: 1, strokeDasharray: "4 3", vectorEffect: "non-scaling-stroke" }, `${line.value}:${line.label}`)))] }));
+    const plot = (_jsxs(_Fragment, { children: [hasReferenceLines ? (_jsxs("div", { className: "relative", children: [svg, drawableLines.map((line) => (_jsx("span", { "aria-hidden": "true", className: cn("absolute right-0 rounded bg-background/80 px-1 text-[11px]", 
+                        // A line near the top would push its label above the chart box.
+                        yOf(line.value) >= chartHeight / 4 && "-translate-y-full", STATUS_TONE_TEXT[line.tone ?? "muted"]), style: { top: `${(yOf(line.value) / chartHeight) * 100}%` }, children: line.label }, `${line.value}:${line.label}`)))] })) : (svg), xAxis !== undefined ? (_jsx("div", { className: "mt-1 flex justify-between text-[11px] text-muted-foreground", children: evenlySpaced(xAxis.ticks).map((fraction) => (_jsx("span", { "data-x-label": "", children: xAxis.format(windowStartMs + fraction * (windowEndMs - windowStartMs)) }, fraction))) })) : (axisLabels !== undefined && (_jsxs("div", { className: "mt-1 flex justify-between text-[11px] text-muted-foreground", children: [_jsx("span", { children: axisLabels.start }), axisLabels.mid !== undefined && _jsx("span", { children: axisLabels.mid }), _jsx("span", { children: axisLabels.end })] })))] }));
+    return (_jsxs("div", { "data-testid": testId, className: STATUS_TONE_TEXT[tone], children: [yAxis === undefined ? (plot) : (_jsxs("div", { className: cn("flex gap-1.5", yAxis.unit !== undefined && "pt-4"), children: [_jsxs("div", { "aria-hidden": "true", className: cn("relative w-12 shrink-0 text-right text-[11px] text-muted-foreground", heightClass), style: heightStyle, children: [yAxis.unit !== undefined && (_jsx("span", { "data-testid": testId === undefined ? undefined : `${testId}-y-unit`, "data-y-unit": "", className: "absolute right-0 bottom-full mb-1 whitespace-nowrap leading-none", children: yAxis.unit })), yTicks.map((tick, index) => (_jsx("span", { "data-y-label": "", className: cn("absolute right-0 whitespace-nowrap leading-none", yTickPosition(index, yTicks.length)), style: { top: `${(yOf(tick) / chartHeight) * 100}%` }, children: (yAxis.format ?? String)(tick) }, tick)))] }), _jsx("div", { className: "min-w-0 flex-1", children: plot })] })), markers !== undefined && markers.length > 0 && (_jsxs("div", { className: "text-foreground", children: [_jsx(MarkerPins, { markers: markers, windowStartMs: windowStartMs, windowEndMs: windowEndMs }), _jsx("div", { className: "mt-2", children: _jsx(MarkerLegend, { markers: markers, formatMarkerTime: formatMarkerTime }) })] }))] }));
+}
+const CHART_TONE_VAR = {
+    positive: "var(--color-status-ok)",
+    negative: "var(--color-status-bad)",
+    active: "var(--color-status-active)",
+    neutral: "var(--color-status-neutral)",
+};
+export function chartToneColor(tone) {
+    return CHART_TONE_VAR[tone];
+}
+const CHART_FALLBACK_TONES = ["active", "positive", "negative", "neutral"];
+function chartColor(key, index, tones, colors) {
+    const color = colors?.[key];
+    if (color !== undefined)
+        return color;
+    const tone = tones?.[key] ?? CHART_FALLBACK_TONES[index % CHART_FALLBACK_TONES.length] ?? "active";
+    return CHART_TONE_VAR[tone];
+}
+const Y_TICK_COUNT = 3;
+function niceCeil(max) {
+    if (max <= 0)
+        return 1;
+    const magnitude = 10 ** Math.floor(Math.log10(max));
+    const normalized = max / magnitude;
+    const step = normalized <= 1 ? 1 : normalized <= 2 ? 2 : normalized <= 5 ? 5 : 10;
+    return step * magnitude;
+}
+const FINE_NICE_STEPS = [1, 1.2, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10];
+// Finer than niceCeil so a 1.1 M peak tops out at 1.2 M instead of 2 M.
+function fineNiceCeil(max) {
+    if (max <= 0)
+        return 1;
+    const magnitude = 10 ** Math.floor(Math.log10(max));
+    const normalized = max / magnitude;
+    const step = FINE_NICE_STEPS.find((candidate) => normalized <= candidate) ?? 10;
+    return step * magnitude;
+}
+function niceYTicks(max, tickCount) {
+    const count = clampTickCount(tickCount);
+    const step = niceCeil(max / (count - 1));
+    // toPrecision strips float noise such as 3 * 0.2 = 0.6000000000000001 from labels and keys.
+    return Array.from({ length: count }, (_, i) => Number((i * step).toPrecision(12)));
+}
+function bucketTimes(series) {
+    const times = new Set();
+    for (const s of series)
+        for (const p of s.points)
+            times.add(p.atMs);
+    return [...times].sort((a, b) => a - b);
+}
+function valueAt(series, atMs) {
+    return series.points.find((p) => p.atMs === atMs)?.value ?? 0;
+}
+function linePathSegments(line, xOf, yOf) {
+    const commands = [];
+    let penDown = false;
+    for (const point of [...line.points].sort((a, b) => a.atMs - b.atMs)) {
+        if (point.value === null) {
+            penDown = false;
+            continue;
+        }
+        commands.push(`${penDown ? "L" : "M"} ${xOf(point.atMs).toFixed(1)} ${yOf(point.value).toFixed(1)}`);
+        penDown = true;
+    }
+    return commands.join(" ");
+}
+function seriesTotal(series) {
+    return series.points.reduce((sum, p) => sum + (p.value ?? 0), 0);
+}
+function percent(fraction) {
+    return `${(fraction * 100).toFixed(2)}%`;
+}
+function ChartLegend({ items, formatValue, }) {
+    return (_jsx("ul", { className: "flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground", children: items.map((item) => (_jsxs("li", { "data-testid": `chart-legend-${item.testIdKey ?? item.key}`, className: "flex items-center gap-1.5", children: [item.swatch === undefined || item.swatch === "area" ? (_jsx("span", { "aria-hidden": "true", className: "size-2 rounded-[2px]", style: { backgroundColor: item.color } })) : (_jsx("span", { "aria-hidden": "true", className: "w-3 border-t-2", style: {
+                        borderColor: item.color,
+                        borderTopStyle: item.swatch === "dashed-line" ? "dashed" : "solid",
+                    } })), _jsx("span", { children: item.label }), item.total !== undefined && (_jsx("span", { className: "tabular-nums text-foreground", children: formatValue(item.total) }))] }, item.key))) }));
+}
+function evenYTickValues(max) {
+    return Array.from({ length: Y_TICK_COUNT }, (_, i) => (max / (Y_TICK_COUNT - 1)) * i);
+}
+function YTicks({ values, formatValue, className, }) {
+    return (_jsx("div", { "aria-hidden": "true", className: cn("flex flex-col-reverse justify-between text-right text-[11px] tabular-nums text-muted-foreground", className), children: values.map((value, i) => (_jsx("span", { children: formatValue(value) }, i))) }));
+}
+const BAR_LABEL_TARGET = 8;
+const STACKED_AREA_PLOT_HEIGHT_CLASS = "h-56 @2xl:h-64";
+// A 16px pin on a ~230px-wide plot (390px viewport) collides when markers sit
+// within ~7% of each other, so close pins are staggered into extra rows.
+const MARKER_PIN_MIN_GAP_FRACTION = 0.07;
+const MARKER_PIN_MAX_ROWS = 3;
+const MARKER_PIN_ROW_HEIGHT_PX = 18;
+const TOOLTIP_WIDTH_REM = 14;
+const TOOLTIP_OFFSET_PX = 8;
+// A swipe over the plot (scrolling the page or the chart) must not open the card.
+const TOOLTIP_TAP_MAX_MOVEMENT_PX = 8;
+export function assignPinRows(fractions) {
+    const lastFractionPerRow = [];
+    return fractions.map((fraction) => {
+        let row = lastFractionPerRow.findIndex((last) => fraction - last >= MARKER_PIN_MIN_GAP_FRACTION);
+        if (row === -1) {
+            row =
+                lastFractionPerRow.length < MARKER_PIN_MAX_ROWS
+                    ? lastFractionPerRow.length
+                    : MARKER_PIN_MAX_ROWS - 1;
+        }
+        lastFractionPerRow[row] = fraction;
+        return row;
+    });
+}
+// Container-query density tiers for the x axis: label budget per tier.
+const AXIS_TIERS = [
+    { maxLabels: 4, visibilityClass: "@xl:hidden" },
+    { maxLabels: 7, visibilityClass: "hidden @xl:block @4xl:hidden" },
+    { maxLabels: 12, visibilityClass: "hidden @4xl:block" },
+];
+const MARKER_LABEL_FLIP_FRACTION = 0.97;
+// Markers sharing a timestamp become one label ("A, B") in the first one's color.
+function groupMarkerLabels(markers) {
+    const groups = new Map();
+    for (const marker of [...markers].sort((a, b) => a.atMs - b.atMs)) {
+        groups.set(marker.atMs, [...(groups.get(marker.atMs) ?? []), marker]);
+    }
+    return [...groups.entries()].map(([atMs, members]) => ({
+        atMs,
+        text: members.map((m) => m.label).join(", "),
+        color: members[0]?.color ?? "var(--color-foreground)",
+    }));
+}
+/** Vertically stacked bars per bucket (x axis = bucket, not time).
+ *  The last bucket carries `todayLabel` when it contains `windowEndMs` and
+ *  has day granularity. */
+export function StackedBarChart({ series, windowEndMs, tones, colors, ariaLabel, todayLabel, formatBucketLabel, formatValue = String, formatAxisValue = formatValue, emptyContent, testId, }) {
+    const times = bucketTimes(series);
+    if (times.length === 0)
+        return _jsx("div", { "data-testid": testId, children: emptyContent });
+    const totals = times.map((atMs) => series.reduce((sum, s) => sum + valueAt(s, atMs), 0));
+    const max = niceCeil(Math.max(...totals));
+    const lastIdx = times.length - 1;
+    const lastAtMs = times[lastIdx] ?? 0;
+    const prevAtMs = times[lastIdx - 1];
+    const stepMs = prevAtMs !== undefined ? lastAtMs - prevAtMs : DAY_MS;
+    const lastIsToday = stepMs >= DAY_MS - HOUR_MS && windowEndMs - lastAtMs <= stepMs;
+    const labelEvery = Math.max(1, Math.ceil(times.length / BAR_LABEL_TARGET));
+    return (_jsxs("div", { "data-testid": testId, className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx(YTicks, { values: evenYTickValues(max), formatValue: formatAxisValue, className: "h-40 pb-5 pt-0" }), _jsx("div", { role: "img", "aria-label": ariaLabel, className: "flex h-40 grow gap-1 border-b border-border-row", children: times.map((atMs, i) => {
+                            const label = i === lastIdx && lastIsToday ? todayLabel : formatBucketLabel(atMs);
+                            return (_jsxs("div", { title: `${label}: ${formatValue(totals[i] ?? 0)}`, className: "flex min-w-0 flex-1 flex-col", children: [_jsx("div", { className: "relative flex-1", children: _jsx("div", { className: "absolute inset-x-0 bottom-0 flex flex-col-reverse gap-px", style: { height: percent((totals[i] ?? 0) / max) }, children: series.map((s, si) => {
+                                                const value = valueAt(s, atMs);
+                                                if (value <= 0)
+                                                    return null;
+                                                return (_jsx("div", { "data-testid": `chart-bar-segment-${s.key}`, style: {
+                                                        height: percent(value / (totals[i] ?? 1)),
+                                                        backgroundColor: chartColor(s.key, si, tones, colors),
+                                                    } }, s.key));
+                                            }) }) }), _jsx("div", { className: "h-5 pt-1 text-center text-[11px] leading-4 whitespace-nowrap text-muted-foreground", children: (lastIdx - i) % labelEvery === 0 ? label : "" })] }, atMs));
+                        }) })] }), _jsx(ChartLegend, { formatValue: formatValue, items: series.map((s, i) => ({
+                    key: s.key,
+                    label: s.label,
+                    color: chartColor(s.key, i, tones, colors),
+                    total: seriesTotal(s),
+                })) })] }));
+}
+/** One horizontally stacked bar per row; bar length is relative to the
+ *  largest row so rows stay comparable. */
+export function SegmentBarChart({ rows, tones, colors, ariaLabel, formatValue = String, testId, }) {
+    const rowTotal = (row) => row.segments.length > 0 ? row.segments.reduce((sum, s) => sum + s.value, 0) : row.value;
+    const maxTotal = Math.max(1, ...rows.map(rowTotal));
+    const segmentTotals = new Map();
+    for (const row of rows) {
+        for (const seg of row.segments) {
+            const known = segmentTotals.get(seg.key);
+            segmentTotals.set(seg.key, {
+                label: known?.label ?? seg.label,
+                total: (known?.total ?? 0) + seg.value,
+            });
+        }
+    }
+    const legendKeys = [...segmentTotals.keys()];
+    return (_jsxs("div", { "data-testid": testId, role: "img", "aria-label": ariaLabel, className: "flex flex-col gap-3", children: [_jsx("ul", { className: "flex flex-col gap-3", children: rows.map((row) => (_jsxs("li", { "data-testid": `chart-row-${row.key}`, className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-2 text-sm", children: [_jsx("span", { className: "font-medium", children: row.label }), _jsx("span", { className: "tabular-nums text-muted-foreground", children: formatValue(row.value) })] }), _jsx("div", { className: "flex h-2 gap-px overflow-hidden rounded-full bg-muted", children: row.segments.map((seg) => (_jsx("div", { title: `${seg.label}: ${formatValue(seg.value)}`, className: "h-full", style: {
+                                    width: percent(seg.value / maxTotal),
+                                    backgroundColor: chartColor(seg.key, legendKeys.indexOf(seg.key), tones, colors),
+                                } }, seg.key))) })] }, row.key))) }), _jsx(ChartLegend, { formatValue: formatValue, items: legendKeys.map((key, i) => ({
+                    key,
+                    label: segmentTotals.get(key)?.label ?? key,
+                    color: chartColor(key, i, tones, colors),
+                    total: segmentTotals.get(key)?.total ?? 0,
+                })) })] }));
+}
+// Two markers may share atMs and label, so the occurrence count keeps React keys unique.
+function sortMarkers(markers) {
+    const seen = new Map();
+    return [...markers]
+        .sort((a, b) => a.atMs - b.atMs)
+        .map((marker) => {
+        const base = `${marker.atMs}-${marker.label}`;
+        const occurrence = seen.get(base) ?? 0;
+        seen.set(base, occurrence + 1);
+        return { ...marker, key: `${base}-${occurrence}` };
+    });
+}
+function MarkerPins({ markers, windowStartMs, windowEndMs, numbered = true, formatMarkerTime, className, }) {
+    const span = Math.max(1, windowEndMs - windowStartMs);
+    const sorted = sortMarkers(markers);
+    const fractions = sorted.map((marker) => Math.max(0, Math.min(1, (marker.atMs - windowStartMs) / span)));
+    const rows = assignPinRows(fractions);
+    const rowCount = Math.max(1, ...rows.map((row) => row + 1));
+    return (_jsx("div", { "aria-hidden": "true", className: cn("relative mt-1", className), style: { height: rowCount * MARKER_PIN_ROW_HEIGHT_PX }, children: sorted.map((marker, i) => (_jsx("span", { "data-testid": "chart-marker-pin", title: numbered
+                ? undefined
+                : formatMarkerTime === undefined
+                    ? marker.label
+                    : `${marker.label} · ${formatMarkerTime(marker.atMs)}`, className: cn("absolute flex -translate-x-1/2 items-center justify-center rounded-full text-[10px] font-medium text-background", numbered ? "size-4" : "size-2", marker.color === undefined && "bg-foreground"), style: {
+                left: percent(fractions[i] ?? 0),
+                top: (rows[i] ?? 0) * MARKER_PIN_ROW_HEIGHT_PX + (numbered ? 0 : 4),
+                ...(marker.color !== undefined && { backgroundColor: marker.color }),
+            }, children: numbered ? i + 1 : null }, marker.key))) }));
+}
+function markerLegendItems(markers) {
+    const items = new Map();
+    for (const marker of markers) {
+        const label = marker.legendLabel ?? marker.label;
+        const color = marker.color ?? "var(--color-foreground)";
+        const key = `marker-${label}-${color}`;
+        if (!items.has(key))
+            items.set(key, { key, label, color });
+    }
+    return [...items.values()];
+}
+function MarkerLegend({ markers, formatMarkerTime, className, }) {
+    return (_jsx("ol", { className: cn("flex flex-col gap-1 text-xs text-muted-foreground", className), children: sortMarkers(markers).map((marker, i) => (_jsxs("li", { "data-testid": "chart-marker-item", className: "flex gap-2", children: [_jsx("span", { className: "w-4 shrink-0 text-center tabular-nums text-foreground", style: marker.color !== undefined ? { color: marker.color } : undefined, children: i + 1 }), _jsx("span", { children: marker.label }), formatMarkerTime !== undefined && (_jsx("span", { className: "ml-auto tabular-nums", children: formatMarkerTime(marker.atMs) }))] }, marker.key))) }));
+}
+const SCROLLABLE_BUCKET_WIDTH_PX = 48;
+function bucketLabelTransform(index, count) {
+    if (index === 0)
+        return "";
+    return index === count - 1 ? "-translate-x-full" : "-translate-x-1/2";
+}
+const DEFAULT_BRUSH_LABELS = { start: "Window start", end: "Window end" };
+const BRUSH_OVERVIEW_WIDTH = 100;
+const BRUSH_OVERVIEW_HEIGHT = 24;
+function brushKeyTarget(key, index, min, max) {
+    if (key === "ArrowLeft")
+        return index - 1;
+    if (key === "ArrowRight")
+        return index + 1;
+    if (key === "Home")
+        return min;
+    return key === "End" ? max : undefined;
+}
+function StackedAreaBrush({ times, totals, window, labels, onChange, testId, }) {
+    const trackRef = useRef(null);
+    const dragRef = useRef(null);
+    const firstMs = times[0] ?? 0;
+    const lastMs = times[times.length - 1] ?? 1;
+    const span = Math.max(1, lastMs - firstMs);
+    const fractionOf = (atMs) => Math.max(0, Math.min(1, (atMs - firstMs) / span));
+    const startIndex = nearestIndex(times, window.startMs);
+    const endIndex = nearestIndex(times, window.endMs);
+    const lastIndex = times.length - 1;
+    const max = Math.max(...totals, 1);
+    const overviewPoints = times.map((atMs, i) => `${(fractionOf(atMs) * BRUSH_OVERVIEW_WIDTH).toFixed(1)} ${(BRUSH_OVERVIEW_HEIGHT - ((totals[i] ?? 0) / max) * BRUSH_OVERVIEW_HEIGHT).toFixed(1)}`);
+    const overviewPath = `M 0 ${BRUSH_OVERVIEW_HEIGHT} L ${overviewPoints.join(" L ")} L ${BRUSH_OVERVIEW_WIDTH} ${BRUSH_OVERVIEW_HEIGHT} Z`;
+    const commit = (startMs, endMs, anchor) => onChange(snapBrushWindow(times, startMs, endMs, anchor));
+    const beginDrag = (mode) => (e) => {
+        e.currentTarget.setPointerCapture(e.pointerId);
+        dragRef.current = {
+            mode,
+            originX: e.clientX,
+            originStartMs: window.startMs,
+            originEndMs: window.endMs,
+        };
+    };
+    const moveDrag = (e) => {
+        const drag = dragRef.current;
+        const trackWidth = trackRef.current?.getBoundingClientRect().width ?? 0;
+        if (drag === null || trackWidth <= 0)
+            return;
+        const deltaMs = ((e.clientX - drag.originX) / trackWidth) * span;
+        if (drag.mode === "move") {
+            const shift = Math.max(firstMs - drag.originStartMs, Math.min(lastMs - drag.originEndMs, deltaMs));
+            onChange(snapMovedBrushWindow(times, drag.originStartMs, drag.originEndMs, shift));
+        }
+        else if (drag.mode === "start") {
+            commit(drag.originStartMs + deltaMs, drag.originEndMs, "start");
+        }
+        else {
+            commit(drag.originStartMs, drag.originEndMs + deltaMs, "end");
+        }
+    };
+    const endDrag = () => {
+        dragRef.current = null;
+    };
+    const dragHandlers = (mode) => ({
+        onPointerDown: beginDrag(mode),
+        onPointerMove: moveDrag,
+        onPointerUp: endDrag,
+        onPointerCancel: endDrag,
+    });
+    const handleKeyDown = (handle) => (e) => {
+        const isStart = handle === "start";
+        const index = isStart ? startIndex : endIndex;
+        const min = isStart ? 0 : startIndex + 1;
+        const maxIndex = isStart ? endIndex - 1 : lastIndex;
+        const target = brushKeyTarget(e.key, index, min, maxIndex);
+        if (target === undefined)
+            return;
+        e.preventDefault();
+        const next = Math.max(min, Math.min(maxIndex, target));
+        if (next === index)
+            return;
+        const nextStart = times[isStart ? next : startIndex];
+        const nextEnd = times[isStart ? endIndex : next];
+        if (nextStart !== undefined && nextEnd !== undefined) {
+            onChange({ startMs: nextStart, endMs: nextEnd });
+        }
+    };
+    const startFraction = fractionOf(window.startMs);
+    const endFraction = fractionOf(window.endMs);
+    const handleClass = "absolute top-0 z-10 h-full w-6 -translate-x-1/2 cursor-ew-resize touch-none focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring";
+    const renderHandle = (handle) => (_jsx("div", { "data-testid": `${testId}-${handle}`, role: "slider", tabIndex: 0, "aria-label": labels[handle], "aria-valuemin": handle === "start" ? 0 : startIndex + 1, "aria-valuemax": handle === "start" ? endIndex - 1 : lastIndex, "aria-valuenow": handle === "start" ? startIndex : endIndex, className: handleClass, style: { left: percent(handle === "start" ? startFraction : endFraction) }, onKeyDown: handleKeyDown(handle), ...dragHandlers(handle), children: _jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute inset-y-0 left-1/2 w-2 -translate-x-1/2 rounded-sm bg-foreground/60" }) }));
+    return (_jsxs("div", { ref: trackRef, "data-testid": testId, className: "relative h-8 w-full select-none rounded-sm border border-border", children: [_jsx("svg", { viewBox: `0 0 ${BRUSH_OVERVIEW_WIDTH} ${BRUSH_OVERVIEW_HEIGHT}`, preserveAspectRatio: "none", className: "absolute inset-0 size-full", role: "presentation", children: _jsx("path", { d: overviewPath, fill: "var(--color-muted-foreground)", fillOpacity: 0.25 }) }), _jsx("div", { "data-testid": `${testId}-window`, className: "absolute top-0 h-full cursor-grab touch-none border-x border-primary bg-primary/10", style: {
+                    left: percent(startFraction),
+                    width: percent(Math.max(0, endFraction - startFraction)),
+                }, ...dragHandlers("move") }), renderHandle("start"), renderHandle("end")] }));
+}
+/** Stacked bands over time. Right of `todayMs` is the forecast: lighter
+ *  fill plus a vertical "today" line. */
+export function StackedAreaChart({ series: allSeries, windowStartMs: fullWindowStartMs, windowEndMs: fullWindowEndMs, todayMs, tones, colors, markers: allMarkers, lines: allLines = [], ranges, initialWindow, brush = false, windowSelection, onWindowSelectionChange, brushLabels = DEFAULT_BRUSH_LABELS, ariaLabel, todayLabel, formatBucketLabel, formatValue = String, formatAxisValue = formatValue, formatMarkerTime, dateFormat, timeZone, markerLegend = "list", markerLabels = false, scrollable = false, showLegendTotals = true, emptyContent, testId, }) {
+    const clipId = useId();
+    const scrollRef = useRef(null);
+    const [internalSelection, setInternalSelection] = useState(initialWindowSelection(ranges, initialWindow));
+    const isControlled = onWindowSelectionChange !== undefined;
+    const selection = isControlled ? windowSelection : internalSelection;
+    const changeSelection = (next) => {
+        if (isControlled)
+            onWindowSelectionChange(next);
+        else
+            setInternalSelection(next);
+    };
+    const allTimes = bucketTimes([...allSeries, ...allLines]);
+    const isWindowing = ranges !== undefined || brush || selection !== undefined;
+    const fullWindow = { startMs: fullWindowStartMs, endMs: fullWindowEndMs };
+    const visibleWindow = isWindowing
+        ? resolveStackedAreaWindow({
+            selection,
+            ranges,
+            brush,
+            todayMs,
+            bucketTimes: allTimes,
+            fullWindow,
+        })
+        : fullWindow;
+    const windowStartMs = visibleWindow.startMs;
+    const windowEndMs = visibleWindow.endMs;
+    const effectiveDateFormat = dateFormat ?? stackedAreaDateFormatFor(visibleWindow);
+    const formatBucket = (atMs) => formatBucketLabel(atMs, effectiveDateFormat);
+    const tierTicks = useMemo(() => AXIS_TIERS.map((tier) => stackedAreaAxisTicks({ startMs: windowStartMs, endMs: windowEndMs }, tier.maxLabels, effectiveDateFormat, timeZone)), [windowStartMs, windowEndMs, effectiveDateFormat, timeZone]);
+    const formatMarkerTimeInWindow = formatMarkerTime === undefined
+        ? undefined
+        : (atMs) => formatMarkerTime(atMs, effectiveDateFormat);
+    const isNarrowed = windowStartMs !== fullWindowStartMs || windowEndMs !== fullWindowEndMs;
+    const series = isNarrowed
+        ? allSeries.map((s) => ({ ...s, points: pointsWithin(s.points, visibleWindow) }))
+        : allSeries;
+    const lines = isNarrowed
+        ? allLines.map((line) => ({ ...line, points: pointsWithin(line.points, visibleWindow) }))
+        : allLines;
+    const markers = isNarrowed && allMarkers !== undefined ? pointsWithin(allMarkers, visibleWindow) : allMarkers;
+    const times = bucketTimes([...series, ...lines]);
+    const bucketCount = times.length;
+    const span = Math.max(1, windowEndMs - windowStartMs);
+    const fractionOf = (atMs) => Math.max(0, Math.min(1, (atMs - windowStartMs) / span));
+    const todayFraction = todayMs !== undefined ? fractionOf(todayMs) : undefined;
+    const [selectedTooltipAtMs, setSelectedTooltipAtMs] = useState(null);
+    // Stored as a time, not an index: a shifted window must not retarget the card to another bucket.
+    const tooltipAtMs = selectedTooltipAtMs !== null && times.includes(selectedTooltipAtMs)
+        ? selectedTooltipAtMs
+        : undefined;
+    const tooltipOverlayRef = useRef(null);
+    const touchStartRef = useRef(null);
+    const isTooltipOpen = tooltipAtMs !== undefined;
+    useEffect(() => {
+        if (!isTooltipOpen)
+            return;
+        const closeOnEscape = (event) => {
+            if (event.key === "Escape")
+                setSelectedTooltipAtMs(null);
+        };
+        const closeOnOutsidePointerDown = (event) => {
+            const overlay = tooltipOverlayRef.current;
+            if (overlay !== null && event.target instanceof Node && overlay.contains(event.target))
+                return;
+            setSelectedTooltipAtMs(null);
+        };
+        document.addEventListener("keydown", closeOnEscape);
+        document.addEventListener("pointerdown", closeOnOutsidePointerDown);
+        return () => {
+            document.removeEventListener("keydown", closeOnEscape);
+            document.removeEventListener("pointerdown", closeOnOutsidePointerDown);
+        };
+    }, [isTooltipOpen]);
+    useEffect(() => {
+        const el = scrollRef.current;
+        if (!scrollable || el === null || bucketCount === 0)
+            return;
+        el.scrollLeft =
+            todayFraction === undefined
+                ? el.scrollWidth
+                : Math.max(0, todayFraction * el.scrollWidth - el.clientWidth / 2);
+    }, [scrollable, todayFraction, bucketCount]);
+    if (times.length === 0)
+        return _jsx("div", { "data-testid": testId, children: emptyContent });
+    const width = 300;
+    const height = 120;
+    const totals = times.map((atMs) => series.reduce((sum, s) => sum + valueAt(s, atMs), 0));
+    const lineValues = lines.flatMap((line) => line.points.flatMap((p) => (p.value === null ? [] : [p.value])));
+    const isSingleBucket = times.length === 1;
+    if (isSingleBucket && totals[0] === 0) {
+        return _jsx("div", { "data-testid": testId, children: emptyContent });
+    }
+    // Doubling keeps a lone bucket away from the top edge of the y-scale.
+    const max = fineNiceCeil(Math.max(...totals, ...lineValues) * (isSingleBucket ? 2 : 1));
+    const yTickValues = evenYTickValues(max);
+    const yOf = (value) => height - (value / max) * height;
+    const lower = times.map(() => 0);
+    const bands = series.map((s, si) => {
+        const upper = times.map((atMs, ti) => (lower[ti] ?? 0) + valueAt(s, atMs));
+        const top = times.map((atMs, ti) => `${(fractionOf(atMs) * width).toFixed(1)} ${yOf(upper[ti] ?? 0).toFixed(1)}`);
+        const bottom = times
+            .map((atMs, ti) => `${(fractionOf(atMs) * width).toFixed(1)} ${yOf(lower[ti] ?? 0).toFixed(1)}`)
+            .reverse();
+        const bucketTop = upper[0] ?? 0;
+        const bucketHeight = bucketTop - (lower[0] ?? 0);
+        for (let ti = 0; ti < times.length; ti++)
+            lower[ti] = upper[ti] ?? 0;
+        return {
+            key: s.key,
+            color: chartColor(s.key, si, tones, colors),
+            edge: `M ${top.join(" L ")}`,
+            d: `M ${top.join(" L ")} L ${bottom.join(" L ")} Z`,
+            dot: isSingleBucket && bucketHeight > 0 ? clampDotY(yOf(bucketTop), height) : undefined,
+        };
+    });
+    const lineColorOffset = series.length;
+    const linePaths = lines.map((line, li) => ({
+        key: line.key,
+        label: line.label,
+        dashed: line.dashed === true,
+        color: chartColor(line.key, lineColorOffset + li, tones, colors),
+        d: linePathSegments(line, (atMs) => fractionOf(atMs) * width, yOf),
+    }));
+    const coloredMarkers = sortMarkers(markers ?? []).filter((marker) => marker.color !== undefined);
+    const todayX = (todayFraction ?? 1) * width;
+    const bandGradientId = (index) => `${clipId}-band-${index}`;
+    const renderBands = (fillOpacity, edgeOpacity) => bands.map((band, bi) => band.dot === undefined ? (_jsxs("g", { children: [_jsx("path", { d: band.d, fill: `url(#${bandGradientId(bi)})`, fillOpacity: fillOpacity, stroke: "none" }), _jsx("path", { "data-testid": `chart-band-edge-${band.key}`, d: band.edge, fill: "none", stroke: band.color, strokeOpacity: edgeOpacity, strokeWidth: 1.5, vectorEffect: "non-scaling-stroke" })] }, band.key)) : (_jsx("circle", { "data-testid": "stacked-area-single-point", cx: width / 2, cy: band.dot, r: SINGLE_POINT_RADIUS, fill: band.color, fillOpacity: fillOpacity }, band.key)));
+    const tooltipFraction = tooltipAtMs === undefined ? 0 : fractionOf(tooltipAtMs);
+    const tooltipRows = tooltipAtMs === undefined
+        ? []
+        : [
+            ...series.map((s, i) => ({
+                key: s.key,
+                label: s.label,
+                color: chartColor(s.key, i, tones, colors),
+                swatch: "area",
+                value: valueAt(s, tooltipAtMs),
+            })),
+            ...lines.flatMap((line, li) => {
+                const value = line.points.find((p) => p.atMs === tooltipAtMs)?.value;
+                return value === null || value === undefined
+                    ? []
+                    : [
+                        {
+                            key: line.key,
+                            label: line.label,
+                            color: linePaths[li]?.color ?? "var(--color-foreground)",
+                            swatch: line.dashed === true ? "dashed-line" : "line",
+                            value,
+                        },
+                    ];
+            }),
+        ];
+    const tooltipOnLeft = tooltipFraction > 0.5;
+    const tooltipEdge = `${percent(tooltipFraction)} ${tooltipOnLeft ? "-" : "+"} ${TOOLTIP_OFFSET_PX}px`;
+    const tooltipLeft = tooltipOnLeft
+        ? `max(0px, calc(${tooltipEdge} - ${TOOLTIP_WIDTH_REM}rem))`
+        : `max(0px, min(calc(${tooltipEdge}), calc(100% - ${TOOLTIP_WIDTH_REM}rem)))`;
+    const bucketAtMsUnderPointer = (event) => {
+        const rect = event.currentTarget.getBoundingClientRect();
+        return (times[bucketIndexAtFraction(times, visibleWindow, rect.width === 0 ? 0 : (event.clientX - rect.left) / rect.width)] ?? null);
+    };
+    const tooltipOverlay = (_jsx("div", { ref: tooltipOverlayRef, "data-testid": "chart-tooltip-overlay", className: cn("absolute inset-x-0 top-0", STACKED_AREA_PLOT_HEIGHT_CLASS), onPointerMove: (event) => {
+            if (event.pointerType === "mouse")
+                setSelectedTooltipAtMs(bucketAtMsUnderPointer(event));
+        }, onPointerLeave: (event) => {
+            if (event.pointerType === "mouse")
+                setSelectedTooltipAtMs(null);
+        }, onPointerDown: (event) => {
+            if (event.pointerType === "mouse")
+                return;
+            touchStartRef.current = { x: event.clientX, y: event.clientY };
+        }, onPointerCancel: () => {
+            touchStartRef.current = null;
+        }, onPointerUp: (event) => {
+            const start = touchStartRef.current;
+            touchStartRef.current = null;
+            if (event.pointerType === "mouse" || start === null)
+                return;
+            const moved = Math.hypot(event.clientX - start.x, event.clientY - start.y);
+            if (moved >= TOOLTIP_TAP_MAX_MOVEMENT_PX)
+                return;
+            const next = bucketAtMsUnderPointer(event);
+            setSelectedTooltipAtMs((current) => (current === next ? null : next));
+        }, children: tooltipAtMs !== undefined && (_jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-y-0 w-px bg-foreground/40", style: { left: percent(tooltipFraction) } }), _jsxs("div", { "data-testid": "chart-tooltip", "data-side": tooltipOnLeft ? "left" : "right", className: "pointer-events-none absolute top-2 rounded-md border bg-popover p-2 text-xs text-popover-foreground shadow-sm", style: { left: tooltipLeft, width: `min(${TOOLTIP_WIDTH_REM}rem, 100%)` }, children: [_jsx("div", { className: "mb-1 font-medium", children: formatBucket(tooltipAtMs) }), tooltipRows.map((row) => (_jsxs("div", { className: "flex items-center gap-1.5", children: [row.swatch === "area" ? (_jsx("span", { "aria-hidden": "true", className: "size-2 shrink-0 rounded-[2px]", style: { backgroundColor: row.color } })) : (_jsx("span", { "aria-hidden": "true", className: "w-3 shrink-0 border-t-2", style: {
+                                        borderColor: row.color,
+                                        borderTopStyle: row.swatch === "dashed-line" ? "dashed" : "solid",
+                                    } })), _jsx("span", { className: "min-w-0 truncate text-muted-foreground", children: row.label }), _jsx("span", { className: "ml-auto tabular-nums", children: formatAxisValue(row.value) })] }, row.key)))] })] })) }));
+    const plot = (_jsxs(_Fragment, { children: [todayFraction !== undefined && (_jsx("span", { "data-testid": "chart-today-label", className: "absolute -top-4 -translate-x-1/2 text-[11px] text-foreground", style: { left: percent(todayFraction) }, children: todayLabel })), _jsxs("svg", { viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "none", className: cn("block w-full", STACKED_AREA_PLOT_HEIGHT_CLASS), role: "img", "aria-label": ariaLabel, children: [_jsx("title", { children: ariaLabel }), _jsxs("defs", { children: [bands.map((band, bi) => (_jsxs("linearGradient", { id: bandGradientId(bi), x1: "0", x2: "0", y1: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: band.color, stopOpacity: 1 }), _jsx("stop", { offset: "100%", stopColor: band.color, stopOpacity: 0.35 })] }, band.key))), _jsx("clipPath", { id: `${clipId}-past`, children: _jsx("rect", { x: 0, y: 0, width: todayX, height: height }) }), _jsx("clipPath", { id: `${clipId}-future`, children: _jsx("rect", { x: todayX, y: 0, width: width - todayX, height: height }) })] }), yTickValues.map((tickValue) => (_jsx("line", { "data-testid": "chart-grid-line", x1: 0, x2: width, y1: yOf(tickValue), y2: yOf(tickValue), stroke: "var(--color-border)", strokeWidth: 1, strokeDasharray: "3 3", vectorEffect: "non-scaling-stroke" }, tickValue))), _jsx("g", { clipPath: `url(#${clipId}-past)`, children: renderBands(0.55, 0.9) }), todayFraction !== undefined && (_jsx("g", { "data-testid": "chart-forecast-region", clipPath: `url(#${clipId}-future)`, children: renderBands(0.25, 0.5) })), coloredMarkers.map((marker) => {
+                        const x = fractionOf(marker.atMs) * width;
+                        return (_jsx("line", { "data-testid": "chart-marker-guide", x1: x, x2: x, y1: 0, y2: height, stroke: marker.color, strokeWidth: 1, strokeDasharray: "2 3", vectorEffect: "non-scaling-stroke" }, marker.key));
+                    }), linePaths.map((line) => (_jsx("path", { "data-testid": `chart-line-${line.key}`, d: line.d, fill: "none", stroke: line.color, strokeWidth: 2, strokeDasharray: line.dashed ? "6 4" : undefined, vectorEffect: "non-scaling-stroke" }, line.key))), todayFraction !== undefined && (_jsx("line", { "data-testid": "chart-today-line", x1: todayX, x2: todayX, y1: 0, y2: height, stroke: "var(--color-foreground)", strokeWidth: 1, strokeDasharray: "3 3", vectorEffect: "non-scaling-stroke" }))] }), scrollable ? (_jsx("div", { "data-testid": "chart-bucket-labels", className: "relative mt-1 h-4 text-[11px] text-muted-foreground", children: times.map((atMs, i) => (_jsx("span", { className: cn("absolute whitespace-nowrap", bucketLabelTransform(i, times.length)), style: { left: percent(fractionOf(atMs)) }, children: formatBucket(atMs) }, atMs))) })) : (_jsxs("div", { className: "relative mt-1 h-4 text-[11px] text-muted-foreground", children: [_jsx("span", { className: "absolute left-0 whitespace-nowrap", children: formatBucket(windowStartMs) }), _jsx("span", { className: "absolute right-0 whitespace-nowrap", children: formatBucket(windowEndMs) }), AXIS_TIERS.map((tier, tierIndex) => (_jsx("div", { className: cn("absolute inset-0", tier.visibilityClass), children: (tierTicks[tierIndex] ?? []).map((tickMs) => (_jsx("span", { "data-testid": "chart-axis-tick", className: "absolute -translate-x-1/2 whitespace-nowrap", style: { left: percent(fractionOf(tickMs)) }, children: formatBucket(tickMs) }, tickMs))) }, tier.maxLabels)))] })), tooltipOverlay, markerLabels &&
+                groupMarkerLabels(markers ?? []).map((group) => {
+                    const fraction = fractionOf(group.atMs);
+                    const flipped = fraction > MARKER_LABEL_FLIP_FRACTION;
+                    return (_jsx("div", { className: cn("pointer-events-none absolute top-0 hidden @2xl:block", flipped ? "-translate-x-full pr-1" : "pl-1"), style: { left: percent(fraction) }, children: _jsx("span", { "data-testid": "chart-marker-label", className: "block max-h-44 rotate-180 overflow-hidden text-ellipsis whitespace-nowrap text-[11px] leading-none [writing-mode:vertical-rl] @2xl:max-h-60", style: { color: group.color }, children: group.text }) }, group.atMs));
+                }), markers !== undefined && markers.length > 0 && (_jsx(MarkerPins, { markers: markers, windowStartMs: windowStartMs, windowEndMs: windowEndMs, numbered: markerLegend === "list" || markerLabels, formatMarkerTime: formatMarkerTimeInWindow, ...(markerLabels && { className: "@2xl:hidden" }) }))] }));
+    const ownRangeSwitch = !isControlled && ranges !== undefined ? (_jsx("div", { className: "flex justify-end", children: _jsx(ModeSwitch, { value: selection?.kind === "range" ? selection.value : null, options: ranges.options.map((option) => ({
+                value: option.value,
+                label: option.label,
+            })), onChange: (value) => changeSelection({ kind: "range", value }), ariaLabel: ariaLabel, variant: "pill", testId: testId !== undefined ? `${testId}-range` : undefined }) })) : undefined;
+    const brushBar = brush && allTimes.length >= 2 ? (_jsx(StackedAreaBrush, { times: allTimes, totals: allTimes.map((atMs) => allSeries.reduce((sum, s) => sum + valueAt(s, atMs), 0)), window: visibleWindow, labels: brushLabels, onChange: (next) => changeSelection({ kind: "brush", startMs: next.startMs, endMs: next.endMs }), testId: `${testId ?? "stacked-area"}-brush` })) : undefined;
+    return (_jsxs("div", { "data-testid": testId, className: "@container flex flex-col gap-3", children: [ownRangeSwitch, _jsxs("div", { className: "flex gap-2", children: [_jsx(YTicks, { values: yTickValues, formatValue: formatAxisValue, className: cn("shrink-0 pb-0", STACKED_AREA_PLOT_HEIGHT_CLASS, scrollable && "mt-4") }), scrollable ? (_jsx("div", { ref: scrollRef, "data-testid": "chart-scroll-container", className: "grow overflow-x-auto pt-4", children: _jsx("div", { "data-testid": "chart-scroll-content", className: "relative", style: {
+                                minWidth: "100%",
+                                width: `${times.length * SCROLLABLE_BUCKET_WIDTH_PX}px`,
+                            }, children: plot }) })) : (_jsx("div", { className: "relative grow", children: plot }))] }), brushBar, _jsx(ChartLegend, { formatValue: formatValue, items: [
+                    ...series.map((s, i) => ({
+                        key: s.key,
+                        label: s.label,
+                        color: chartColor(s.key, i, tones, colors),
+                        ...(showLegendTotals && { total: seriesTotal(s) }),
+                    })),
+                    ...linePaths.map((line) => ({
+                        key: `line:${line.key}`,
+                        testIdKey: `line-${line.key}`,
+                        label: line.label,
+                        color: line.color,
+                        swatch: line.dashed ? "dashed-line" : "line",
+                    })),
+                    ...(markerLegend === "legend"
+                        ? markerLegendItems(markers ?? []).map((item) => ({
+                            ...item,
+                            swatch: "dashed-line",
+                        }))
+                        : []),
+                ] }), markers !== undefined && markers.length > 0 && (markerLegend === "list" || markerLabels) && (_jsx(MarkerLegend, { markers: markers, formatMarkerTime: formatMarkerTimeInWindow, ...(markerLabels && { className: "@2xl:hidden" }) }))] }));
+}