@cosmicdrift/kumiko-renderer 0.389.0 → 0.390.1

package/dist/web/widgets/charts.js

@@ -1,9 +1,10 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useMemo, useRef, useState, } from "react";
+import { useId } 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 { bucketTimes, chartColor, clampDotY, percent, SINGLE_POINT_RADIUS, seriesTotal, valueAt, } from "./chart-data.js";
+import { MarkerLegend, MarkerPins } from "./chart-markers.js";
+import { ChartLegend, evenYTickValues, YTicks } from "./chart-parts.js";
 import { STATUS_TONE_TEXT } from "./status-badge.js";
 // Inline SVG charts without a chart dependency. Colors come exclusively from the
 // --color-status-* / --color-foreground theme tokens; axis labels are supplied
@@ -43,10 +44,6 @@ export function StatusBarChart({ entries, ariaLabel, startLabel, endLabel, highl
                         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 midpoint technique: smooths the zigzag line without overshoot
  *  (~5 lines instead of a Catmull-Rom/Bezier fit). */
 export function smoothPath(pts) {
@@ -131,24 +128,6 @@ export function TimeseriesChart({ points, windowStartMs, windowEndMs, tone = "ok
                         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;
@@ -157,107 +136,13 @@ function niceCeil(max) {
     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. */
@@ -317,369 +202,6 @@ export function SegmentBarChart({ rows, tones, colors, ariaLabel, formatValue =
                     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" }) }))] }));
-}
+export { chartToneColor } from "./chart-data.js";
+export { assignPinRows } from "./chart-markers.js";
+export { StackedAreaChart } from "./stacked-area-chart.js";

package/dist/web/widgets/drawer-panel-class.d.ts

@@ -0,0 +1,3 @@
+export type DrawerSide = "left" | "right" | "top" | "bottom";
+export declare const MAX_VIEWPORT_WIDTH = "85vw";
+export declare function sidePanelClass(side: DrawerSide, narrow: boolean, variant: "floating" | "flush", belowHeader: boolean): string;

package/dist/web/widgets/drawer-panel-class.js

@@ -0,0 +1,40 @@
+// Must match the static `max(600px,37.5vw)` in sidePanelClass — Tailwind's
+// JIT can't read DEFAULT_WIDTH_MIN_PX/DEFAULT_WIDTH_VIEWPORT_RATIO at
+// runtime, so the two are kept in sync by hand.
+// Same cap as WIDTH_CLASS: an explicit `width` must not outgrow the viewport.
+export const MAX_VIEWPORT_WIDTH = "85vw";
+const WIDTH_CLASS = "w-[max(600px,37.5vw)] max-w-[85vw] sm:max-w-[max(600px,37.5vw)]";
+// "floating": 32px margin + 32px radius so the panel reads as detached from
+// the viewport edge, unlike the sheet primitive's flush-edge default.
+// "flush" docks it back to that flush-edge default instead, borrowing the
+// vendored Sheet's per-side border (only the edge facing the app content).
+// Below the narrow-viewport breakpoint neither treatment fits — the JS hook
+// decides, not a `sm:` Tailwind prefix, since the resize width below already
+// comes from JS and two decision sources is the bug this avoids.
+export function sidePanelClass(side, narrow, variant, belowHeader) {
+    if (narrow)
+        return "inset-0 h-full w-full max-w-none rounded-none border-0 overflow-hidden";
+    if (variant === "flush") {
+        switch (side) {
+            // h-full would pin height to 100vh despite the shifted top; h-auto lets inset-y-0 size it.
+            case "left":
+                return `inset-y-0 left-0 ${belowHeader ? "h-auto" : "h-full"} ${WIDTH_CLASS} border-r shadow-2xl overflow-hidden`;
+            case "top":
+                return `inset-x-0 ${belowHeader ? "top-(--shell-header-height)" : "top-0"} h-auto max-h-[80vh] border-b shadow-2xl overflow-hidden`;
+            case "bottom":
+                return "inset-x-0 bottom-0 h-auto max-h-[80vh] border-t shadow-2xl overflow-hidden";
+            default:
+                return `inset-y-0 right-0 ${belowHeader ? "h-auto" : "h-full"} ${WIDTH_CLASS} border-l shadow-2xl overflow-hidden`;
+        }
+    }
+    switch (side) {
+        case "left":
+            return `inset-y-8 left-8 h-auto ${WIDTH_CLASS} rounded-[2rem] border shadow-2xl overflow-hidden`;
+        case "top":
+            return "inset-x-8 top-8 h-auto max-h-[80vh] rounded-[2rem] border shadow-2xl overflow-hidden";
+        case "bottom":
+            return "inset-x-8 bottom-8 h-auto max-h-[80vh] rounded-[2rem] border shadow-2xl overflow-hidden";
+        default:
+            return `inset-y-8 right-8 h-auto ${WIDTH_CLASS} rounded-[2rem] border shadow-2xl overflow-hidden`;
+    }
+}

package/dist/web/widgets/drawer-resize-controls.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+import type { useTranslation } from "../../index.ts";
+import type { DrawerResizeHandle, DrawerResizeState } from "./use-drawer-resize.ts";
+export type DrawerResizeControlsModel = {
+    readonly t: ReturnType<typeof useTranslation>;
+    readonly side: "left" | "right" | "top" | "bottom";
+    readonly resize: DrawerResizeState;
+    readonly handle: DrawerResizeHandle;
+};
+export declare function renderMaximizeButton(model: DrawerResizeControlsModel): ReactNode;
+export declare function renderResizeHandle(model: DrawerResizeControlsModel): ReactNode;

package/dist/web/widgets/drawer-resize-controls.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Maximize2Icon, Minimize2Icon } from "lucide-react";
+import { cn } from "../lib/cn.js";
+export function renderMaximizeButton(model) {
+    const { t, resize } = model;
+    const { maximized, setMaximized } = resize;
+    return (_jsx("button", { type: "button", onClick: () => setMaximized((m) => !m), "aria-pressed": maximized, "aria-label": maximized ? t("kumiko.widget.drawer.restore") : t("kumiko.widget.drawer.maximize"), className: "absolute top-4 right-14 z-10 rounded-xs p-1 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 hover:bg-secondary focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-hidden", children: maximized ? _jsx(Minimize2Icon, { className: "size-4" }) : _jsx(Maximize2Icon, { className: "size-4" }) }));
+}
+export function renderResizeHandle(model) {
+    const { t, side, resize, handle } = model;
+    return (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": t("kumiko.widget.drawer.resize"), "aria-valuenow": resize.effectiveWidthPx, "aria-valuemin": resize.minWidthPx, "aria-valuemax": resize.effectiveMaxWidthPx(), tabIndex: 0, ...handle.handleDrag, onKeyDown: handle.onHandleKeyDown, className: cn("absolute inset-y-0 z-10 w-1 cursor-col-resize touch-none after:absolute after:inset-y-0 after:left-1/2 after:w-3 after:-translate-x-1/2 hover:bg-border", side === "right" ? "left-0 -translate-x-1/2" : "right-0 translate-x-1/2") }));
+}

package/dist/web/widgets/drawer-sizing.d.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties } from "react";
+export declare const MIN_WIDTH_PX = 320;
+export declare const MAX_WIDTH_PX = 1000;
+export declare function defaultWidthFromViewport(): number;
+export declare function buildOverlayStyle(backdrop: {
+    readonly blurPx?: number;
+    readonly dimPercent?: number;
+} | undefined): CSSProperties;
+type SheetStyleInput = {
+    readonly side: "left" | "right" | "top" | "bottom";
+    readonly narrow: boolean;
+    readonly canResize: boolean;
+    readonly width: number | string | undefined;
+    readonly effectiveWidthPx: number;
+    readonly variant: "floating" | "flush";
+    readonly belowHeader: boolean;
+};
+export declare function buildSheetStyle(input: SheetStyleInput): CSSProperties | undefined;
+export {};