@cosmicdrift/kumiko-renderer 0.389.0 → 0.390.1

package/dist/web/widgets/drawer-sizing.js

@@ -0,0 +1,60 @@
+import { MAX_VIEWPORT_WIDTH } from "./drawer-panel-class.js";
+export const MIN_WIDTH_PX = 320;
+export const MAX_WIDTH_PX = 1000;
+// Must match the static `max(600px,37.5vw)` in floatingSideClass — Tailwind's
+// JIT can't read these at runtime, so the two are kept in sync by hand.
+// 600px (vs. the old 520px floor) gives a two-column field row (e.g.
+// street/number, zip/city) room to breathe, while staying well under half
+// of a 1280px viewport so a narrow window isn't dominated by the drawer.
+// 37.5vw (vs. the old 25vw) keeps that same 600px on a 1280–1600px window
+// (25vw was still under the floor there, making the ratio dead weight up
+// to 2400px) but actually grows past the floor by ~1600px, so a 1920px
+// window — where the two-column row is cramped just as often — lands
+// around 720px instead of being stuck at 600px alongside a 1280px window.
+const DEFAULT_WIDTH_MIN_PX = 600;
+const DEFAULT_WIDTH_VIEWPORT_RATIO = 0.375;
+const DEFAULT_BLUR_PX = 0;
+const DEFAULT_DIM_PERCENT = 20;
+export function defaultWidthFromViewport() {
+    return typeof window === "undefined"
+        ? DEFAULT_WIDTH_MIN_PX
+        : Math.max(DEFAULT_WIDTH_MIN_PX, Math.round(window.innerWidth * DEFAULT_WIDTH_VIEWPORT_RATIO));
+}
+function normalizeWidth(width) {
+    return typeof width === "number" ? `${width}px` : width;
+}
+export function buildOverlayStyle(backdrop) {
+    const blurPx = backdrop?.blurPx ?? DEFAULT_BLUR_PX;
+    const dimPercent = backdrop?.dimPercent ?? DEFAULT_DIM_PERCENT;
+    return {
+        backgroundColor: `rgb(0 0 0 / ${dimPercent}%)`,
+        ...(blurPx > 0 ? { backdropFilter: `blur(${blurPx}px)` } : {}),
+    };
+}
+function isHorizontalSide(side) {
+    return side === "left" || side === "right";
+}
+function customWidthStyleOf(input) {
+    const { side, narrow, canResize, width } = input;
+    return !canResize && !narrow && isHorizontalSide(side) && width !== undefined
+        ? { width: normalizeWidth(width), maxWidth: MAX_VIEWPORT_WIDTH }
+        : undefined;
+}
+// Inline style because tailwind-merge doesn't dedupe `top-*`/`bottom-*` against the base `inset-y-0`;
+// style wins over class regardless of generated CSS order.
+function verticalOffsetStyleOf(input) {
+    const { side, narrow, variant, belowHeader } = input;
+    return belowHeader && variant === "flush" && !narrow && isHorizontalSide(side)
+        ? { top: "var(--shell-header-height)", bottom: 0 }
+        : undefined;
+}
+export function buildSheetStyle(input) {
+    const { narrow, canResize, effectiveWidthPx } = input;
+    const verticalOffsetStyle = verticalOffsetStyleOf(input);
+    const widthStyle = canResize && !narrow
+        ? { width: effectiveWidthPx, maxWidth: "none" }
+        : customWidthStyleOf(input);
+    return widthStyle === undefined && verticalOffsetStyle === undefined
+        ? undefined
+        : { ...widthStyle, ...verticalOffsetStyle };
+}

package/dist/web/widgets/drawer.js

@@ -1,83 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Maximize2Icon, Minimize2Icon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useTranslation } from "../../index.js";
-import { clamp } from "../lib/clamp.js";
 import { cn } from "../lib/cn.js";
 import { useIsNarrowViewport } from "../primitives/use-narrow-viewport.js";
 import { Sheet, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from "../ui/sheet.js";
+import { sidePanelClass } from "./drawer-panel-class.js";
+import { renderMaximizeButton, renderResizeHandle } from "./drawer-resize-controls.js";
+import { buildOverlayStyle, buildSheetStyle } from "./drawer-sizing.js";
 import { DrawerSheetContent } from "./sheet-parts.js";
-import { arrowKeyDelta, usePointerDrag } from "./use-pointer-drag.js";
+import { useDrawerResizeHandle, useDrawerResizeState } from "./use-drawer-resize.js";
 // Mirrors primitives/index.tsx's cardFooter + cardFooterBorder (row layout,
 // end-justified actions, top border, panel surface instead of the card
 // footer's bg-muted/30) — those two consts aren't exported, so the
 // equivalent classes are inlined here rather than growing the vendored
 // SheetFooter's own default className with panel-specific styling.
 const DRAWER_FOOTER_CLASS = "flex-row flex-wrap items-center justify-end border-t bg-background px-[var(--card-padding)] py-4";
-const MIN_WIDTH_PX = 320;
-const MAX_WIDTH_PX = 1000;
-// Must match the static `max(600px,37.5vw)` in floatingSideClass — Tailwind's
-// JIT can't read these at runtime, so the two are kept in sync by hand.
-// 600px (vs. the old 520px floor) gives a two-column field row (e.g.
-// street/number, zip/city) room to breathe, while staying well under half
-// of a 1280px viewport so a narrow window isn't dominated by the drawer.
-// 37.5vw (vs. the old 25vw) keeps that same 600px on a 1280–1600px window
-// (25vw was still under the floor there, making the ratio dead weight up
-// to 2400px) but actually grows past the floor by ~1600px, so a 1920px
-// window — where the two-column row is cramped just as often — lands
-// around 720px instead of being stuck at 600px alongside a 1280px window.
-const DEFAULT_WIDTH_MIN_PX = 600;
-const DEFAULT_WIDTH_VIEWPORT_RATIO = 0.375;
-const DEFAULT_BLUR_PX = 0;
-const DEFAULT_DIM_PERCENT = 20;
-function defaultWidthFromViewport() {
-    return typeof window === "undefined"
-        ? DEFAULT_WIDTH_MIN_PX
-        : Math.max(DEFAULT_WIDTH_MIN_PX, Math.round(window.innerWidth * DEFAULT_WIDTH_VIEWPORT_RATIO));
-}
-function normalizeWidth(width) {
-    return typeof width === "number" ? `${width}px` : width;
-}
-// 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.
-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.
-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`;
-    }
-}
 const DRAWER_INSET_PROPERTY = {
     left: "--kumiko-drawer-inset-left",
     right: "--kumiko-drawer-inset-right",
@@ -118,60 +55,24 @@ export function Drawer({ open, onOpenChange, side = "right", title, description,
     const t = useTranslation();
     const narrow = useIsNarrowViewport();
     const canResize = resize !== undefined && (side === "left" || side === "right");
-    const customWidthStyle = !canResize && !narrow && (side === "left" || side === "right") && width !== undefined
-        ? { width: normalizeWidth(width), maxWidth: MAX_VIEWPORT_WIDTH }
-        : undefined;
-    const minWidthPx = resize?.minWidthPx ?? MIN_WIDTH_PX;
-    const maxWidthPx = resize?.maxWidthPx ?? MAX_WIDTH_PX;
-    const effectiveMaxWidthPx = () => typeof window === "undefined"
-        ? maxWidthPx
-        : Math.min(maxWidthPx, Math.round(window.innerWidth * 0.9));
-    const [resizedWidthPx, setResizedWidthPx] = useState(() => clamp(resize?.defaultWidthPx ?? defaultWidthFromViewport(), minWidthPx, effectiveMaxWidthPx()));
-    const [maximized, setMaximized] = useState(false);
+    const resizeState = useDrawerResizeState(resize);
     const [sheet, setSheet] = useState(null);
     usePublishDrawerInset(sheet, side, open && !modal && !narrow);
-    const blurPx = backdrop?.blurPx ?? DEFAULT_BLUR_PX;
-    const dimPercent = backdrop?.dimPercent ?? DEFAULT_DIM_PERCENT;
-    const overlayStyle = {
-        backgroundColor: `rgb(0 0 0 / ${dimPercent}%)`,
-        ...(blurPx > 0 ? { backdropFilter: `blur(${blurPx}px)` } : {}),
-    };
-    const effectiveWidthPx = maximized ? effectiveMaxWidthPx() : resizedWidthPx;
-    // Inline style because tailwind-merge doesn't dedupe `top-*`/`bottom-*` against the base `inset-y-0`;
-    // style wins over class regardless of generated CSS order.
-    const verticalOffsetStyle = belowHeader && variant === "flush" && !narrow && (side === "left" || side === "right")
-        ? { top: "var(--shell-header-height)", bottom: 0 }
-        : undefined;
-    const widthStyle = canResize && !narrow ? { width: effectiveWidthPx, maxWidth: "none" } : customWidthStyle;
-    const sheetStyle = widthStyle === undefined && verticalOffsetStyle === undefined
-        ? undefined
-        : { ...widthStyle, ...verticalOffsetStyle };
-    const handleDrag = usePointerDrag({
-        onStart: () => {
-            setMaximized(false);
-            return { startWidth: effectiveWidthPx };
-        },
-        onMove: ({ startWidth }, { dx }) => {
-            const signedDelta = side === "right" ? -dx : dx;
-            setResizedWidthPx(clamp(startWidth + signedDelta, minWidthPx, effectiveMaxWidthPx()));
-        },
+    const overlayStyle = buildOverlayStyle(backdrop);
+    const sheetStyle = buildSheetStyle({
+        side,
+        narrow,
+        canResize,
+        width,
+        effectiveWidthPx: resizeState.effectiveWidthPx,
+        variant,
+        belowHeader,
     });
-    const onHandleKeyDown = (event) => {
-        const keyDelta = arrowKeyDelta(event);
-        if (keyDelta === undefined || keyDelta.dx === 0)
-            return;
-        event.preventDefault();
-        setMaximized(false);
-        const delta = side === "right" ? -keyDelta.dx : keyDelta.dx;
-        // Seed from the currently visible width, not the stale `resizedWidthPx`
-        // state — while maximized, it still holds the pre-maximize value, so a
-        // key press would otherwise jump the drawer back to that old size
-        // instead of resizing relative to what's on screen.
-        setResizedWidthPx((current) => clamp((maximized ? effectiveWidthPx : current) + delta, minWidthPx, effectiveMaxWidthPx()));
-    };
+    const handle = useDrawerResizeHandle(side, resizeState);
+    const resizeControls = { t, side, resize: resizeState, handle };
     return (_jsx(Sheet, { open: open, onOpenChange: onOpenChange, modal: modal, children: _jsxs(DrawerSheetContent, { ref: setSheet, side: side, "data-testid": testId, overlayStyle: overlayStyle, 
             // Radix already drops the overlay and the focus trap for a
             // non-modal Root; only the dismiss-on-outside-interaction is left
             // to suppress, so a click into the page behind keeps the panel open.
-            onInteractOutside: modal ? undefined : (event) => event.preventDefault(), showCloseButton: showCloseButton, closeLabel: t("kumiko.dialog.close"), className: cn(sidePanelClass(side, narrow, variant, belowHeader), fillBody && "gap-0", !narrow && panelClassName), style: sheetStyle, children: [canResize && !narrow && (_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" })) })), (title !== undefined || description !== undefined) && (_jsxs(SheetHeader, { children: [title !== undefined && _jsx(SheetTitle, { children: title }), description !== undefined && _jsx(SheetDescription, { children: description })] })), _jsx("div", { className: fillBody ? "flex min-h-0 flex-1 flex-col" : "flex-1 overflow-y-auto px-4", children: children }), footer !== undefined && (_jsx(SheetFooter, { className: DRAWER_FOOTER_CLASS, children: footer })), canResize && !narrow && (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": t("kumiko.widget.drawer.resize"), "aria-valuenow": effectiveWidthPx, "aria-valuemin": minWidthPx, "aria-valuemax": effectiveMaxWidthPx(), tabIndex: 0, ...handleDrag, onKeyDown: 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") }))] }) }));
+            onInteractOutside: modal ? undefined : (event) => event.preventDefault(), showCloseButton: showCloseButton, closeLabel: t("kumiko.dialog.close"), className: cn(sidePanelClass(side, narrow, variant, belowHeader), fillBody && "gap-0", !narrow && panelClassName), style: sheetStyle, children: [canResize && !narrow && renderMaximizeButton(resizeControls), (title !== undefined || description !== undefined) && (_jsxs(SheetHeader, { children: [title !== undefined && _jsx(SheetTitle, { children: title }), description !== undefined && _jsx(SheetDescription, { children: description })] })), _jsx("div", { className: fillBody ? "flex min-h-0 flex-1 flex-col" : "flex-1 overflow-y-auto px-4", children: children }), footer !== undefined && (_jsx(SheetFooter, { className: DRAWER_FOOTER_CLASS, children: footer })), canResize && !narrow && renderResizeHandle(resizeControls)] }) }));
 }

package/dist/web/widgets/stacked-area-brush.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+import { type ChartWindow } from "./chart-window.ts";
+export declare function StackedAreaBrush({ times, totals, window, labels, onChange, testId, }: {
+    readonly times: readonly number[];
+    readonly totals: readonly number[];
+    readonly window: ChartWindow;
+    readonly labels: {
+        readonly start: string;
+        readonly end: string;
+    };
+    readonly onChange: (window: ChartWindow) => void;
+    readonly testId: string;
+}): ReactNode;

package/dist/web/widgets/stacked-area-brush.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { percent } from "./chart-data.js";
+import { nearestIndex, snapBrushWindow, snapMovedBrushWindow, } from "./chart-window.js";
+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;
+}
+export 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")] }));
+}

package/dist/web/widgets/stacked-area-chart.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from "react";
+import { type StackedAreaChartProps } from "./stacked-area-props.ts";
+export type { StackedAreaChartProps } from "./stacked-area-props.ts";
+/** Stacked bands over time. Right of `todayMs` is the forecast: lighter
+ *  fill plus a vertical "today" line. */
+export declare function StackedAreaChart(rawProps: StackedAreaChartProps): ReactNode;

package/dist/web/widgets/stacked-area-chart.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from "react";
+import { renderBrushBar, renderLegend, renderMarkerLegend, renderPlotRow, renderRangeSwitch, } from "./stacked-area-chrome.js";
+import { bucketTotals, buildStackedAreaGeometry } from "./stacked-area-geometry.js";
+import { resolveStackedAreaProps } from "./stacked-area-props.js";
+import { useStackedAreaTooltip } from "./use-stacked-area-tooltip.js";
+import { useStackedAreaWindow } from "./use-stacked-area-window.js";
+/** Stacked bands over time. Right of `todayMs` is the forecast: lighter
+ *  fill plus a vertical "today" line. */
+export function StackedAreaChart(rawProps) {
+    const props = resolveStackedAreaProps(rawProps);
+    const { scrollable, emptyContent, testId, tones, colors } = props;
+    const clipId = useId();
+    const scrollRef = useRef(null);
+    const win = useStackedAreaWindow(props);
+    const tooltip = useStackedAreaTooltip(win.times);
+    const { times, todayFraction } = win;
+    const bucketCount = times.length;
+    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 totals = bucketTotals(times, win.series);
+    if (times.length === 1 && totals[0] === 0) {
+        return _jsx("div", { "data-testid": testId, children: emptyContent });
+    }
+    const geometry = buildStackedAreaGeometry({
+        times,
+        totals,
+        series: win.series,
+        lines: win.lines,
+        markers: win.markers,
+        fractionOf: win.fractionOf,
+        palette: { tones, colors },
+    });
+    const model = { props, clipId, win, tooltip, geometry };
+    return (_jsxs("div", { "data-testid": testId, className: "@container flex flex-col gap-3", children: [renderRangeSwitch(model), renderPlotRow(model, scrollRef), renderBrushBar(model), renderLegend(model), renderMarkerLegend(model)] }));
+}

package/dist/web/widgets/stacked-area-chrome.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode, RefObject } from "react";
+import type { StackedAreaModel } from "./stacked-area-model.ts";
+export declare function renderRangeSwitch(m: StackedAreaModel): ReactNode;
+export declare function renderBrushBar(m: StackedAreaModel): ReactNode;
+export declare function renderPlotRow(m: StackedAreaModel, scrollRef: RefObject<HTMLDivElement | null>): ReactNode;
+export declare function renderLegend(m: StackedAreaModel): ReactNode;
+export declare function renderMarkerLegend(m: StackedAreaModel): ReactNode;

package/dist/web/widgets/stacked-area-chrome.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { chartColor, seriesTotal, valueAt } from "./chart-data.js";
+import { MarkerLegend, markerLegendItems } from "./chart-markers.js";
+import { ChartLegend, YTicks } from "./chart-parts.js";
+import { ModeSwitch } from "./mode-switch.js";
+import { StackedAreaBrush } from "./stacked-area-brush.js";
+import { STACKED_AREA_PLOT_HEIGHT_CLASS } from "./stacked-area-geometry.js";
+import { renderStackedAreaPlot } from "./stacked-area-plot.js";
+const SCROLLABLE_BUCKET_WIDTH_PX = 48;
+export function renderRangeSwitch(m) {
+    const { ranges, ariaLabel, testId } = m.props;
+    const { isControlled, selection, changeSelection } = m.win;
+    if (isControlled || ranges === undefined)
+        return undefined;
+    return (_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 }) }));
+}
+export function renderBrushBar(m) {
+    const { brush, brushLabels, series: allSeries, testId } = m.props;
+    const { allTimes, visibleWindow, changeSelection } = m.win;
+    if (!brush || allTimes.length < 2)
+        return undefined;
+    return (_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` }));
+}
+function renderPlotArea(m, scrollRef) {
+    const plot = renderStackedAreaPlot(m);
+    if (!m.props.scrollable)
+        return _jsx("div", { className: "relative grow", children: plot });
+    return (_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: `${m.win.times.length * SCROLLABLE_BUCKET_WIDTH_PX}px`,
+            }, children: plot }) }));
+}
+export function renderPlotRow(m, scrollRef) {
+    const { scrollable, formatAxisValue } = m.props;
+    return (_jsxs("div", { className: "flex gap-2", children: [_jsx(YTicks, { values: m.geometry.yTickValues, formatValue: formatAxisValue, className: cn("shrink-0 pb-0", STACKED_AREA_PLOT_HEIGHT_CLASS, scrollable && "mt-4") }), renderPlotArea(m, scrollRef)] }));
+}
+function buildLegendItems(m) {
+    const { tones, colors, showLegendTotals, markerLegend } = m.props;
+    const { series, markers } = m.win;
+    return [
+        ...series.map((s, i) => ({
+            key: s.key,
+            label: s.label,
+            color: chartColor(s.key, i, tones, colors),
+            ...(showLegendTotals && { total: seriesTotal(s) }),
+        })),
+        ...m.geometry.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",
+            }))
+            : []),
+    ];
+}
+export function renderLegend(m) {
+    return _jsx(ChartLegend, { formatValue: m.props.formatValue, items: buildLegendItems(m) });
+}
+export function renderMarkerLegend(m) {
+    const { markerLegend, markerLabels } = m.props;
+    const { markers } = m.win;
+    if (markers === undefined || markers.length === 0)
+        return undefined;
+    if (markerLegend !== "list" && !markerLabels)
+        return undefined;
+    return (_jsx(MarkerLegend, { markers: markers, formatMarkerTime: m.win.formatMarkerTimeInWindow, ...(markerLabels && { className: "@2xl:hidden" }) }));
+}

package/dist/web/widgets/stacked-area-geometry.d.ts

@@ -0,0 +1,54 @@
+import { type ChartLine, type ChartMarker, type ChartSeries, type ColorMap, type ToneMap } from "./chart-data.ts";
+export declare const STACKED_AREA_PLOT_HEIGHT_CLASS = "h-56 @2xl:h-64";
+export declare const PLOT_WIDTH = 300;
+export declare const PLOT_HEIGHT = 120;
+export declare const AXIS_TIERS: readonly [{
+    readonly maxLabels: 4;
+    readonly visibilityClass: "@xl:hidden";
+}, {
+    readonly maxLabels: 7;
+    readonly visibilityClass: "hidden @xl:block @4xl:hidden";
+}, {
+    readonly maxLabels: 12;
+    readonly visibilityClass: "hidden @4xl:block";
+}];
+export declare function bucketTotals(times: readonly number[], series: readonly ChartSeries[]): readonly number[];
+type Colors = {
+    readonly tones: ToneMap | undefined;
+    readonly colors: ColorMap | undefined;
+};
+export type StackedBand = {
+    readonly key: string;
+    readonly color: string;
+    readonly edge: string;
+    readonly d: string;
+    readonly dot: number | undefined;
+};
+export type StackedLinePath = {
+    readonly key: string;
+    readonly label: string;
+    readonly dashed: boolean;
+    readonly color: string;
+    readonly d: string;
+};
+export declare function buildStackedAreaGeometry(input: {
+    readonly times: readonly number[];
+    readonly totals: readonly number[];
+    readonly series: readonly ChartSeries[];
+    readonly lines: readonly ChartLine[];
+    readonly markers: readonly ChartMarker[] | undefined;
+    readonly fractionOf: (atMs: number) => number;
+    readonly palette: Colors;
+}): {
+    yTickValues: readonly number[];
+    yOf: (value: number) => number;
+    bands: readonly StackedBand[];
+    linePaths: readonly StackedLinePath[];
+    coloredMarkers: (ChartMarker & {
+        readonly key: string;
+    } & {
+        readonly color: string;
+    })[];
+};
+export type StackedAreaGeometry = ReturnType<typeof buildStackedAreaGeometry>;
+export {};

package/dist/web/widgets/stacked-area-geometry.js

@@ -0,0 +1,83 @@
+import { chartColor, clampDotY, valueAt, } from "./chart-data.js";
+import { sortMarkers } from "./chart-markers.js";
+import { evenYTickValues } from "./chart-parts.js";
+export const STACKED_AREA_PLOT_HEIGHT_CLASS = "h-56 @2xl:h-64";
+export const PLOT_WIDTH = 300;
+export const PLOT_HEIGHT = 120;
+// Container-query density tiers for the x axis: label budget per tier.
+export const AXIS_TIERS = [
+    { maxLabels: 4, visibilityClass: "@xl:hidden" },
+    { maxLabels: 7, visibilityClass: "hidden @xl:block @4xl:hidden" },
+    { maxLabels: 12, visibilityClass: "hidden @4xl:block" },
+];
+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 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(" ");
+}
+export function bucketTotals(times, series) {
+    return times.map((atMs) => series.reduce((sum, s) => sum + valueAt(s, atMs), 0));
+}
+function buildBands(input) {
+    const { times, series, yOf, fractionOf, palette } = input;
+    const isSingleBucket = times.length === 1;
+    const lower = times.map(() => 0);
+    return series.map((s, si) => {
+        const upper = times.map((atMs, ti) => (lower[ti] ?? 0) + valueAt(s, atMs));
+        const top = times.map((atMs, ti) => `${(fractionOf(atMs) * PLOT_WIDTH).toFixed(1)} ${yOf(upper[ti] ?? 0).toFixed(1)}`);
+        const bottom = times
+            .map((atMs, ti) => `${(fractionOf(atMs) * PLOT_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, palette.tones, palette.colors),
+            edge: `M ${top.join(" L ")}`,
+            d: `M ${top.join(" L ")} L ${bottom.join(" L ")} Z`,
+            dot: isSingleBucket && bucketHeight > 0 ? clampDotY(yOf(bucketTop), PLOT_HEIGHT) : undefined,
+        };
+    });
+}
+export function buildStackedAreaGeometry(input) {
+    const { times, totals, series, lines, markers, fractionOf, palette } = input;
+    const lineValues = lines.flatMap((line) => line.points.flatMap((p) => (p.value === null ? [] : [p.value])));
+    // Doubling keeps a lone bucket away from the top edge of the y-scale.
+    const max = fineNiceCeil(Math.max(...totals, ...lineValues) * (times.length === 1 ? 2 : 1));
+    const yOf = (value) => PLOT_HEIGHT - (value / max) * PLOT_HEIGHT;
+    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, palette.tones, palette.colors),
+        d: linePathSegments(line, (atMs) => fractionOf(atMs) * PLOT_WIDTH, yOf),
+    }));
+    return {
+        yTickValues: evenYTickValues(max),
+        yOf,
+        bands: buildBands({ times, series, yOf, fractionOf, palette }),
+        linePaths,
+        coloredMarkers: sortMarkers(markers ?? []).filter((marker) => marker.color !== undefined),
+    };
+}

package/dist/web/widgets/stacked-area-model.d.ts

@@ -0,0 +1,11 @@
+import type { StackedAreaGeometry } from "./stacked-area-geometry.ts";
+import type { ResolvedStackedAreaProps } from "./stacked-area-props.ts";
+import type { useStackedAreaTooltip } from "./use-stacked-area-tooltip.ts";
+import type { useStackedAreaWindow } from "./use-stacked-area-window.ts";
+export type StackedAreaModel = {
+    readonly props: ResolvedStackedAreaProps;
+    readonly clipId: string;
+    readonly win: ReturnType<typeof useStackedAreaWindow>;
+    readonly tooltip: ReturnType<typeof useStackedAreaTooltip>;
+    readonly geometry: StackedAreaGeometry;
+};

package/dist/web/widgets/stacked-area-model.js

@@ -0,0 +1 @@
+export {};

package/dist/web/widgets/stacked-area-plot.d.ts

@@ -0,0 +1,3 @@
+import type { ReactNode } from "react";
+import type { StackedAreaModel } from "./stacked-area-model.ts";
+export declare function renderStackedAreaPlot(m: StackedAreaModel): ReactNode;