@vibefield/rosetta-room 0.0.0-stage → 0.1.1

package/dist/components/charts/DayActivityChart.js

@@ -0,0 +1,71 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createDayActivity, createHourlyCurve, hourLabel } from "../../lib/day-activity.js";
+import { tokenText } from "../../lib/format.js";
+const hourX = (hour) => hour / 23 * 1000;
+/** Smooth curves pass through the hourly samples on a shared token scale.
+ * Dashed future guides carry no estimated usage or gradient fill. */
+export function DayActivityChart({ rows, lastHour = 23, modelColors }) {
+    const activity = useMemo(() => createDayActivity(rows, modelColors), [rows, modelColors]);
+    const chartId = useId().replace(/:/g, "");
+    const [hoverHour, setHoverHour] = useState(null);
+    const [focusedHour, setFocusedHour] = useState(null);
+    const [muted, setMuted] = useState(() => new Set());
+    const bodyRef = useRef(null);
+    const [legendHeight, setLegendHeight] = useState(400);
+    useLayoutEffect(() => {
+        const node = bodyRef.current;
+        if (!node)
+            return;
+        const measure = () => setLegendHeight(node.clientHeight);
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, []);
+    const modelsPerPage = Math.max(1, Math.min(6, Math.floor((legendHeight - 46) / 28)));
+    const [modelPage, setModelPage] = useState(0);
+    const pageCount = Math.max(1, Math.ceil(activity.series.length / modelsPerPage));
+    const page = Math.min(modelPage, pageCount - 1);
+    const legendModels = activity.series.slice(page * modelsPerPage, (page + 1) * modelsPerPage);
+    const futureHour = hoverHour !== null && hoverHour > lastHour ? hoverHour : null;
+    const inspectedHour = futureHour === null ? hoverHour ?? focusedHour : null;
+    const rawPeak = Math.max(1, ...activity.series.flatMap(model => model.values.slice(0, lastHour + 1)));
+    const power = 10 ** Math.floor(Math.log10(rawPeak));
+    const maximum = Math.ceil(rawPeak / power / 2) * power * 2;
+    const y = (tokens) => 220 - tokens / maximum * 220;
+    const paths = useMemo(() => activity.series.map((model, index) => {
+        const points = model.values.slice(0, lastHour + 1).map((tokens, hour) => [hourX(hour), 220 - tokens / maximum * 220]);
+        const line = createHourlyCurve(points);
+        return { ...model, line, gradientId: `${chartId}-model-${index}`,
+            area: `${line} L${hourX(lastHour)},220 L0,220 Z`,
+            future: `M${hourX(lastHour)},${points.at(-1)[1]} H1000` };
+    }), [activity.series, lastHour, maximum, chartId]);
+    const visibleSeries = paths.filter(model => !muted.has(model.id));
+    return _jsxs("div", { className: "ah-daychart", children: [_jsx("div", { className: "ah-daychart__readout", "aria-live": "polite", "aria-atomic": "true", children: futureHour !== null ? _jsxs(_Fragment, { children: [_jsxs("strong", { children: [hourLabel(futureHour), " \u2013 ", hourLabel((futureHour + 1) % 24)] }), _jsx("span", { children: "Awaiting usage" })] }) : inspectedHour !== null ? _jsxs(_Fragment, { children: [_jsxs("strong", { children: [hourLabel(inspectedHour), " \u2013 ", hourLabel((inspectedHour + 1) % 24)] }), _jsxs("span", { title: "Tokens across all models", children: [tokenText(activity.hours[inspectedHour]), " tokens"] })] })
+                    : _jsxs(_Fragment, { children: [_jsx("strong", { children: activity.peakHour === null ? "No token activity" : `Busiest hour · ${hourLabel(activity.peakHour)}` }), _jsx("span", { title: "Tokens across all models", children: activity.peakHour === null ? "" : `${tokenText(activity.hours[activity.peakHour])} tokens` })] }) }), _jsxs("div", { className: "ah-daychart__body", ref: bodyRef, children: [_jsxs("div", { className: "ah-daychart__graph", children: [_jsx("span", { className: "ah-daychart__unit", title: "Includes input, output and cache tokens. Usage reported only as session totals appears at its report hour.", children: "Tokens / hour" }), _jsxs("div", { className: "ah-daychart__plot", children: [[0, 1, 2, 3, 4].map(tick => _jsx("div", { className: "ah-daychart__gridline", style: { top: `${tick * 25}%` }, children: _jsx("span", { children: tokenText(maximum * (4 - tick) / 4) }) }, tick)), lastHour < 23 && _jsx("div", { className: "ah-daychart__future", style: { left: `${(lastHour + .5) / 23 * 100}%` } }), activity.peakHour !== null && inspectedHour === null && _jsx("i", { className: "ah-daychart__peak", style: { left: `${activity.peakHour / 23 * 100}%` }, "aria-hidden": "true" }), _jsxs("svg", { viewBox: "0 0 1000 220", preserveAspectRatio: "none", tabIndex: 0, role: "slider", "aria-label": "Inspect hourly model usage. Use left and right arrow keys.", "aria-valuemin": 0, "aria-valuemax": lastHour, "aria-valuenow": inspectedHour ?? 0, "aria-valuetext": `${hourLabel(inspectedHour ?? 0)}: ${tokenText(activity.hours[inspectedHour ?? 0])} tokens`, "data-hour": inspectedHour ?? undefined, "data-future-hour": futureHour ?? undefined, onMouseMove: event => {
+                                            const rect = event.currentTarget.getBoundingClientRect();
+                                            const hour = Math.max(0, Math.min(23, Math.round((event.clientX - rect.left) / rect.width * 23)));
+                                            setHoverHour(hour);
+                                        }, onMouseLeave: () => setHoverHour(null), onFocus: () => setFocusedHour(0), onBlur: () => setFocusedHour(null), onKeyDown: event => {
+                                            if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key))
+                                                return;
+                                            event.preventDefault();
+                                            setHoverHour(null);
+                                            setFocusedHour(hour => event.key === "Home" ? 0 : event.key === "End" ? lastHour
+                                                : Math.max(0, Math.min(lastHour, (hour ?? 0) + (event.key === "ArrowLeft" ? -1 : 1))));
+                                        }, children: [_jsx("title", { children: "Tokens by model for each hour of the selected day" }), _jsx("defs", { children: paths.map(model => _jsxs("linearGradient", { id: model.gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: model.color, stopOpacity: ".24" }), _jsx("stop", { offset: "55%", stopColor: model.color, stopOpacity: ".09" }), _jsx("stop", { offset: "100%", stopColor: model.color, stopOpacity: "0" })] }, model.id)) }), lastHour > 0 && visibleSeries.map(model => _jsx("path", { "data-model-area": model.id, className: "ah-daychart__area", d: model.area, fill: `url(#${model.gradientId})` }, model.id)), visibleSeries.map(model => _jsx("path", { className: "ah-daychart__glow", d: model.line, fill: "none", stroke: model.color, strokeWidth: "6", vectorEffect: "non-scaling-stroke" }, model.id)), visibleSeries.map(model => _jsx("path", { "data-model-line": model.id, className: "ah-daychart__line", d: model.line, fill: "none", stroke: model.color, strokeWidth: "2.25", vectorEffect: "non-scaling-stroke" }, model.id)), lastHour < 23 && visibleSeries.map(model => _jsx("path", { "data-model-future": model.id, className: "ah-daychart__pending", d: model.future, fill: "none", stroke: model.color, strokeWidth: "1.5", vectorEffect: "non-scaling-stroke", "aria-hidden": "true" }, model.id)), (inspectedHour !== null || futureHour !== null) && _jsx("line", { x1: hourX(inspectedHour ?? futureHour), x2: hourX(inspectedHour ?? futureHour), y1: "0", y2: "220", className: "ah-daychart__crosshair", vectorEffect: "non-scaling-stroke", "aria-hidden": "true" })] }), (inspectedHour !== null || lastHour < 23 && futureHour === null) && visibleSeries.map(model => {
+                                        const hour = inspectedHour ?? lastHour;
+                                        return _jsx("i", { className: "ah-daychart__point", "aria-hidden": "true", style: {
+                                                left: `${hour / 23 * 100}%`, top: `${y(model.values[hour]) / 220 * 100}%`,
+                                                "--model-color": model.color,
+                                            } }, model.id);
+                                    }), lastHour < 23 && _jsx("span", { className: "ah-daychart__future-label", children: "Later today \u00B7 awaiting usage" }), _jsx("div", { className: "ah-daychart__axis", "aria-hidden": "true", children: [0, 6, 12, 18, 23].map(hour => _jsx("span", { style: { left: `${hour / 23 * 100}%` }, children: hourLabel(hour) }, hour)) })] })] }), _jsxs("div", { className: "ah-daychart__models", children: [_jsxs("div", { className: "ah-daychart__legendhead", children: [_jsx("span", { title: "Model share of the selected day's tokens. Click a model to show or hide its line.", children: "Models \u00B7 day share" }), _jsx("span", { children: futureHour !== null ? hourLabel(futureHour) : inspectedHour === null ? "Tokens" : hourLabel(inspectedHour) })] }), legendModels.map(model => _jsxs("button", { type: "button", "data-model-toggle": model.id, "aria-pressed": !muted.has(model.id), title: `${model.label}: ${model.total.toLocaleString()} tokens. Click to ${muted.has(model.id) ? "show" : "hide"} its line.`, style: { "--model-color": model.color }, onClick: () => setMuted(current => {
+                                    const next = new Set(current);
+                                    if (next.has(model.id))
+                                        next.delete(model.id);
+                                    else
+                                        next.add(model.id);
+                                    return next;
+                                }), children: [_jsxs("span", { className: "ah-daychart__modelname", children: [_jsx("i", {}), _jsx("span", { children: model.label })] }), _jsx("b", { children: futureHour !== null ? "—" : tokenText(inspectedHour === null ? model.total : model.values[inspectedHour]) }), _jsx("span", { className: "ah-daychart__share", children: _jsx("i", { style: { width: `${model.total / activity.total * 100}%` } }) }), _jsxs("small", { children: [(model.total / activity.total * 100).toFixed(0), "%"] })] }, model.id)), pageCount > 1 && _jsxs("div", { className: "ah-daychart__modelnav", "aria-label": "Model pages", children: [_jsx("button", { type: "button", "aria-label": "Previous models", disabled: page === 0, onClick: () => setModelPage(page - 1), children: "\u2190" }), _jsxs("span", { children: [page + 1, "/", pageCount] }), _jsx("button", { type: "button", "aria-label": "Next models", disabled: page === pageCount - 1, onClick: () => setModelPage(page + 1), children: "\u2192" })] })] })] })] });
+}

package/dist/components/charts/ModelsChartDetail.d.ts

@@ -0,0 +1,7 @@
+import type { UsageResponse } from "@vibefield/rosetta-protocol";
+import "../../styles/models-chart.css";
+export interface ModelsChartDetailProps {
+    readonly usage: UsageResponse | null;
+    readonly currentTimestamp: number;
+}
+export declare function ModelsChartDetail({ usage, currentTimestamp }: ModelsChartDetailProps): import("react").JSX.Element;

package/dist/components/charts/ModelsChartDetail.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { tokenText } from "../../lib/format.js";
+import { createModelUsageStreamgraphData } from "../../lib/chart-data.js";
+import { Streamgraph } from "./Streamgraph.js";
+import "../../styles/models-chart.css";
+const dateFormatter = new Intl.DateTimeFormat("en-US", {
+    weekday: "short", month: "short", day: "numeric", year: "numeric", timeZone: "UTC",
+});
+function formatUsageDay(point) {
+    return dateFormatter.format(new Date(`${point.id}T12:00:00Z`));
+}
+export function ModelsChartDetail({ usage, currentTimestamp }) {
+    const data = useMemo(() => usage
+        ? createModelUsageStreamgraphData(usage, currentTimestamp, { groupOthers: false })
+        : { domain: [], series: [] }, [usage, currentTimestamp]);
+    return (_jsx("div", { className: "ah-models", "aria-busy": usage === null, children: usage === null ? _jsx("p", { className: "ah-models__loading", role: "status", children: "Loading model usage\u2026" })
+            : _jsx(Streamgraph, { data: data, expanded: true, title: "Tokens per day \u00B7 30 days", note: "no zero \u00B7 thickness is the total", ariaLabel: "Inspect daily tokens by model over 30 days", emptyMessage: "No model-attributed usage in this window", formatValue: tokenText, formatPoint: formatUsageDay, valueLabel: "tokens" }) }));
+}

package/dist/components/charts/ProjectChartDialog.d.ts

@@ -0,0 +1,19 @@
+import type { UsageResponse } from "@vibefield/rosetta-protocol";
+import type { ActivityChartDetailProps } from "./ActivityChartDetail.js";
+import "../../styles/project-chart.css";
+declare const VIEWS: readonly [{
+    readonly value: "activity";
+    readonly label: "Activity";
+}, {
+    readonly value: "models";
+    readonly label: "Models";
+}];
+export type ProjectChartView = typeof VIEWS[number]["value"];
+export interface ProjectChartDialogProps extends ActivityChartDetailProps {
+    readonly initialView: ProjectChartView;
+    readonly usage: UsageResponse | null;
+    readonly onClose: () => void;
+}
+/** One modal lifetime preserves the opener, fullscreen and both detail views. */
+export declare function ProjectChartDialog({ initialView, usage, onClose, ...activity }: ProjectChartDialogProps): import("react").JSX.Element;
+export {};

package/dist/components/charts/ProjectChartDialog.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from "react";
+import { ColumnHeading, DialogShell } from "../ui/index.js";
+import { CloseGlyph, ExitFullscreenGlyph, FullscreenGlyph } from "../../lib/icons.js";
+import { ActivityChartDetail } from "./ActivityChartDetail.js";
+import { ModelsChartDetail } from "./ModelsChartDetail.js";
+import "../../styles/project-chart.css";
+const VIEWS = [
+    { value: "activity", label: "Activity" },
+    { value: "models", label: "Models" },
+];
+/** One modal lifetime preserves the opener, fullscreen and both detail views. */
+export function ProjectChartDialog({ initialView, usage, onClose, ...activity }) {
+    const [fullscreen, setFullscreen] = useState(false);
+    const [view, setView] = useState(initialView);
+    const [visited, setVisited] = useState(() => new Set([initialView]));
+    const id = useId();
+    const tabs = useRef({});
+    const selectView = (next) => {
+        setView(next);
+        setVisited(current => current.has(next) ? current : new Set([...current, next]));
+    };
+    const navigateTabs = (event, current) => {
+        const index = VIEWS.findIndex(option => option.value === current);
+        const nextIndex = event.key === "Home" ? 0 : event.key === "End" ? VIEWS.length - 1
+            : event.key === "ArrowRight" ? (index + 1) % VIEWS.length
+                : event.key === "ArrowLeft" ? (index + VIEWS.length - 1) % VIEWS.length : null;
+        if (nextIndex === null)
+            return;
+        event.preventDefault();
+        const next = VIEWS[nextIndex].value;
+        selectView(next);
+        tabs.current[next]?.focus();
+    };
+    return _jsxs(DialogShell, { title: `${activity.name} project activity and models`, onClose: onClose, fullscreen: fullscreen, onExitFullscreen: () => setFullscreen(false), children: [_jsxs("header", { className: "ah-fileview__head ah-project-chart__head", children: [_jsx("div", { className: "ah-fileview__title", children: _jsx(ColumnHeading, { name: activity.name, tint: activity.color }) }), _jsx("div", { className: "ah-seg ah-project-chart__tabs", role: "tablist", "aria-label": "Project chart details", children: VIEWS.map(option => _jsx("button", { type: "button", role: "tab", ref: node => { if (node)
+                                tabs.current[option.value] = node; }, id: `${id}-tab-${option.value}`, "aria-controls": `${id}-panel-${option.value}`, "aria-selected": view === option.value, tabIndex: view === option.value ? 0 : -1, className: view === option.value ? "is-on" : undefined, onClick: () => selectView(option.value), onKeyDown: event => navigateTabs(event, option.value), children: option.label }, option.value)) }), _jsxs("div", { className: "ah-fileview__acts", children: [_jsx("button", { className: "ah-iconbtn", type: "button", "aria-pressed": fullscreen, title: fullscreen ? "Exit full screen (Esc)" : "View full screen", "aria-label": fullscreen ? "Exit full screen" : "View full screen", onClick: () => setFullscreen(current => !current), children: fullscreen ? _jsx(ExitFullscreenGlyph, {}) : _jsx(FullscreenGlyph, {}) }), _jsx("button", { className: "ah-iconbtn", type: "button", title: "Close (Esc)", "aria-label": "Close project charts", onClick: onClose, children: _jsx(CloseGlyph, {}) })] })] }), VIEWS.map(option => _jsx("div", { className: "ah-project-chart__panel", role: "tabpanel", id: `${id}-panel-${option.value}`, "aria-labelledby": `${id}-tab-${option.value}`, hidden: view !== option.value, children: visited.has(option.value) && (option.value === "activity"
+                    ? _jsx(ActivityChartDetail, { ...activity })
+                    : _jsx(ModelsChartDetail, { usage: usage, currentTimestamp: activity.currentTimestamp })) }, option.value))] });
+}

package/dist/components/charts/Streamgraph.d.ts

@@ -0,0 +1,16 @@
+import type { StreamgraphData, StreamgraphDomainPointData } from "./types.js";
+export interface StreamgraphProps {
+    readonly data: StreamgraphData;
+    readonly title: string;
+    readonly ariaLabel: string;
+    readonly note?: string;
+    readonly emptyMessage?: string;
+    readonly width?: number;
+    readonly height?: number;
+    /** Enlarges the presentation without changing the data or waveform. */
+    readonly expanded?: boolean;
+    readonly formatValue?: (value: number) => string;
+    readonly formatPoint?: (point: StreamgraphDomainPointData) => string;
+    readonly valueLabel?: string;
+}
+export declare function Streamgraph({ data, title, ariaLabel, note, emptyMessage, width, height, expanded, formatValue, formatPoint, valueLabel, }: StreamgraphProps): import("react").JSX.Element;

package/dist/components/charts/Streamgraph.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useMemo, useState } from "react";
+import { createStreamgraphLayout } from "./streamgraph-layout.js";
+const DEFAULT_VIEWBOX_WIDTH = 276;
+const DEFAULT_VIEWBOX_HEIGHT = 60;
+function finiteMagnitude(value) {
+    return Number.isFinite(value) ? Math.max(0, value ?? 0) : 0;
+}
+function defaultValueFormatter(value) {
+    return value.toLocaleString();
+}
+function defaultPointFormatter(point) {
+    return point.label ?? point.id;
+}
+function formatShare(value, total) {
+    if (total <= 0)
+        return "—";
+    const share = value / total * 100;
+    return value > 0 && share < 0.1 ? "<0.1%" : `${share.toFixed(1)}%`;
+}
+export function Streamgraph({ data, title, ariaLabel, note, emptyMessage = "No data in this period", width = DEFAULT_VIEWBOX_WIDTH, height = DEFAULT_VIEWBOX_HEIGHT, expanded = false, formatValue = defaultValueFormatter, formatPoint = defaultPointFormatter, valueLabel = "value", }) {
+    const gradientId = useId().replace(/:/g, "");
+    const [hoveredPoint, setHoveredPoint] = useState(null);
+    const [focusedPoint, setFocusedPoint] = useState(null);
+    const viewBoxWidth = Number.isFinite(width) && width > 0 ? width : DEFAULT_VIEWBOX_WIDTH;
+    const viewBoxHeight = Number.isFinite(height) && height > 0 ? height : DEFAULT_VIEWBOX_HEIGHT;
+    const visibleSeries = useMemo(() => {
+        return data.series
+            .map((series) => {
+            const values = data.domain.map((_, index) => finiteMagnitude(series.values[index]));
+            return {
+                ...series,
+                values,
+                total: values.reduce((total, value) => total + value, 0),
+            };
+        })
+            .filter((series) => series.total > 0);
+    }, [data]);
+    const layerPaths = useMemo(() => createStreamgraphLayout(visibleSeries, data.domain.length, {
+        width: viewBoxWidth,
+        height: viewBoxHeight,
+    }), [data.domain.length, viewBoxHeight, viewBoxWidth, visibleSeries]);
+    const seriesById = useMemo(() => new Map(visibleSeries.map((series) => [series.id, series])), [visibleSeries]);
+    const hasData = layerPaths.length > 0;
+    const pointIndices = useMemo(() => new Map(data.domain.map((point, index) => [point.id, index])), [data.domain]);
+    const inspectedIndex = expanded && hasData
+        ? pointIndices.get(hoveredPoint ?? "") ?? pointIndices.get(focusedPoint ?? "") ?? null
+        : null;
+    const inspectedPoint = inspectedIndex === null ? null : data.domain[inspectedIndex];
+    const pointValues = inspectedIndex === null ? [] : visibleSeries.map(series => ({
+        ...series, value: series.values[inspectedIndex],
+    }));
+    const pointTotal = pointValues.reduce((total, series) => total + series.value, 0);
+    const inspectedX = inspectedIndex === null ? 0 : inspectedIndex / (data.domain.length - 1) * 100;
+    const accessibleIndex = inspectedIndex ?? 0;
+    const accessibleTotal = visibleSeries.reduce((total, series) => total + (series.values[accessibleIndex] ?? 0), 0);
+    const accessibleValue = hasData ? `${formatPoint(data.domain[accessibleIndex])}: ${Math.round(accessibleTotal).toLocaleString()} ${valueLabel}. ${visibleSeries.map(series => `${series.label}: ${Math.round(series.values[accessibleIndex]).toLocaleString()}`).join(", ")}` : undefined;
+    const inspectPointer = (svg, clientX) => {
+        const rect = svg.getBoundingClientRect();
+        if (rect.width <= 0)
+            return;
+        const index = Math.max(0, Math.min(data.domain.length - 1, Math.round((clientX - rect.left) / rect.width * (data.domain.length - 1))));
+        setFocusedPoint(null);
+        setHoveredPoint(data.domain[index].id);
+    };
+    return (_jsxs("div", { className: "ah-streamgraph", "data-expanded": expanded ? "" : undefined, style: expanded ? { "--series-glow-strength": Math.min(1, 4 / visibleSeries.length) } : undefined, children: [_jsxs("div", { className: "ah-chart-header", children: [_jsx("p", { className: "ah-chart-header__title", children: title }), note && _jsx("span", { className: "ah-chart-header__note", children: note })] }), expanded && hasData && _jsxs("p", { id: `${gradientId}-help`, className: "ah-visually-hidden", children: ["Use left and right arrow keys to inspect each recorded point. Home and End select the first and last points. Band thickness represents ", valueLabel, "; vertical position does not represent a value."] }), _jsxs("div", { className: "ah-streamgraph__plot", onPointerLeave: expanded ? () => setHoveredPoint(null) : undefined, children: [hasData ? (_jsxs("svg", { viewBox: `0 0 ${viewBoxWidth} ${viewBoxHeight}`, preserveAspectRatio: "none", role: expanded ? "slider" : "img", tabIndex: expanded ? 0 : undefined, "aria-label": ariaLabel, "aria-describedby": expanded ? `${gradientId}-help` : undefined, "aria-orientation": expanded ? "horizontal" : undefined, "aria-valuemin": expanded ? 0 : undefined, "aria-valuemax": expanded ? data.domain.length - 1 : undefined, "aria-valuenow": expanded ? accessibleIndex : undefined, "aria-valuetext": expanded ? accessibleValue : undefined, "data-inspected-point": inspectedPoint?.id, onPointerMove: expanded ? event => inspectPointer(event.currentTarget, event.clientX) : undefined, onPointerDown: expanded ? event => {
+                            // Pointer inspection should not move keyboard focus or pin its guide.
+                            event.preventDefault();
+                            inspectPointer(event.currentTarget, event.clientX);
+                        } : undefined, onFocus: expanded ? () => {
+                            setHoveredPoint(null);
+                            setFocusedPoint(data.domain[0].id);
+                        } : undefined, onBlur: expanded ? () => setFocusedPoint(null) : undefined, onKeyDown: expanded ? event => {
+                            if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key))
+                                return;
+                            event.preventDefault();
+                            const index = event.key === "Home" ? 0 : event.key === "End" ? data.domain.length - 1
+                                : Math.max(0, Math.min(data.domain.length - 1, accessibleIndex + (event.key === "ArrowLeft" ? -1 : 1)));
+                            setHoveredPoint(null);
+                            setFocusedPoint(data.domain[index].id);
+                        } : undefined, children: [expanded && (_jsx("defs", { children: visibleSeries.map((series, index) => (_jsxs("linearGradient", { id: `${gradientId}-${index}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: series.color, stopOpacity: "0.85" }), _jsx("stop", { offset: "100%", stopColor: series.color, stopOpacity: "0.25" })] }, series.id))) })), expanded && layerPaths.map(({ seriesId, path }) => (_jsx("path", { className: "ah-streamgraph__glow", d: path, fill: "none", stroke: seriesById.get(seriesId)?.color, strokeWidth: "4", vectorEffect: "non-scaling-stroke", "aria-hidden": "true" }, `glow-${seriesId}`))), layerPaths.map(({ seriesId, path }, index) => {
+                                const series = seriesById.get(seriesId);
+                                return series ? (_jsx("path", { "data-streamgraph-layer": seriesId, d: path, fill: expanded ? `url(#${gradientId}-${index})` : series.color, children: !expanded && _jsxs("title", { children: [series.label, " \u00B7 ", formatValue(Math.round(series.total))] }) }, seriesId)) : null;
+                            }), expanded && layerPaths.map(({ seriesId, path }) => (_jsx("path", { className: "ah-streamgraph__outline", d: path, fill: "none", stroke: seriesById.get(seriesId)?.color, strokeWidth: "1.25", vectorEffect: "non-scaling-stroke", "aria-hidden": "true" }, `outline-${seriesId}`))), inspectedIndex !== null && _jsx("line", { className: "ah-streamgraph__crosshair", x1: inspectedX / 100 * viewBoxWidth, x2: inspectedX / 100 * viewBoxWidth, y1: "0", y2: viewBoxHeight, vectorEffect: "non-scaling-stroke", "aria-hidden": "true" })] })) : (_jsx("p", { className: "ah-streamgraph__empty", children: emptyMessage })), inspectedIndex !== null && inspectedPoint && _jsxs(_Fragment, { children: [layerPaths.map(({ seriesId, samples }) => {
+                                const series = seriesById.get(seriesId);
+                                if (series.values[inspectedIndex] <= 0)
+                                    return null;
+                                const [x, y] = samples[inspectedIndex];
+                                return _jsx("i", { className: "ah-streamgraph__point", "data-streamgraph-point": seriesId, "aria-hidden": "true", style: { left: `${x / viewBoxWidth * 100}%`, top: `${y / viewBoxHeight * 100}%`,
+                                        "--series-color": series.color } }, seriesId);
+                            }), _jsxs("div", { className: "ah-streamgraph__readout", role: "tooltip", tabIndex: -1, "data-point": inspectedPoint.id, onPointerEnter: () => setHoveredPoint(inspectedPoint.id), "data-side": inspectedX > 50 ? "left" : "right", style: { "--inspect-x": `${inspectedX}%` }, children: [_jsxs("div", { className: "ah-streamgraph__readout-head", children: [_jsx("strong", { children: formatPoint(inspectedPoint) }), _jsxs("span", { children: ["Total ", _jsx("b", { "data-point-total": pointTotal, children: formatValue(Math.round(pointTotal)) }), " ", valueLabel] })] }), _jsx("div", { className: "ah-streamgraph__readout-rows", tabIndex: -1, children: pointValues.map(series => _jsxs("div", { "data-point-series": series.id, style: { "--series-color": series.color }, children: [_jsxs("span", { className: "ah-streamgraph__readout-model", children: [_jsx("i", { "aria-hidden": "true" }), series.label] }), _jsx("b", { "data-point-value": series.value, title: `${Math.round(series.value).toLocaleString()} ${valueLabel}`, children: formatValue(Math.round(series.value)) }), _jsx("small", { children: formatShare(series.value, pointTotal) })] }, series.id)) }), pointTotal === 0 && _jsx("p", { children: "No activity recorded" })] })] })] }), hasData && (_jsxs(_Fragment, { children: [_jsx("div", { className: "ah-streamgraph__axis", "aria-hidden": "true", children: data.domain.map((point, pointIndex) => point.label ? (_jsx("span", { "data-first": pointIndex === 0 ? "" : undefined, "data-last": pointIndex === data.domain.length - 1 ? "" : undefined, style: {
+                                left: `${((pointIndex / (data.domain.length - 1)) * 100).toFixed(2)}%`,
+                            }, children: point.label }, point.id)) : null) }), _jsx("div", { className: "ah-streamgraph__legend", tabIndex: expanded ? 0 : undefined, role: expanded ? "group" : undefined, "aria-label": expanded ? "Model totals for the 30-day period" : undefined, children: visibleSeries.map((series) => (_jsxs("span", { "data-streamgraph-series": series.id, style: { "--series-color": series.color }, children: [_jsx("i", { "aria-hidden": "true" }), _jsx("em", { title: series.id, children: series.label }), " ", _jsx("b", { title: Math.round(series.total).toLocaleString(), children: formatValue(Math.round(series.total)) })] }, series.id))) })] }))] }));
+}

package/dist/components/charts/Treemap.d.ts

@@ -0,0 +1,26 @@
+import type { TreemapData, TreemapItemData } from "./types.js";
+export interface TreemapItemContext {
+    readonly share: number;
+    readonly isMinimumSized: boolean;
+    readonly isLabelVisible: boolean;
+}
+export interface TreemapItemNoun {
+    readonly singular: string;
+    readonly plural: string;
+}
+export interface TreemapProps {
+    readonly data: TreemapData;
+    readonly ariaLabel: string;
+    readonly title?: string;
+    readonly selectedItemId?: string | null;
+    readonly onItemSelect?: (item: TreemapItemData) => void;
+    readonly note?: string;
+    readonly showFooter?: boolean;
+    readonly emptyMessage?: string;
+    readonly itemNoun?: TreemapItemNoun;
+    readonly height?: number;
+    readonly minimumVisibleShare?: number;
+    readonly formatValue?: (value: number) => string;
+    readonly getItemAccessibleLabel?: (item: TreemapItemData, context: TreemapItemContext) => string;
+}
+export declare function Treemap({ data, title, ariaLabel, selectedItemId, onItemSelect, note, showFooter, emptyMessage, itemNoun, height, minimumVisibleShare, formatValue, getItemAccessibleLabel, }: TreemapProps): import("react").JSX.Element;

package/dist/components/charts/Treemap.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createTreemapLayout } from "./treemap-layout.js";
+const DEFAULT_LAYOUT_WIDTH = 218;
+const DEFAULT_HEIGHT = 110;
+function defaultValueFormatter(value) {
+    return value.toLocaleString();
+}
+function countLabel(count, { singular, plural }) {
+    return `${count} ${count === 1 ? singular : plural}`;
+}
+function percentage(value, total) {
+    return `${((value / total) * 100).toFixed(3)}%`;
+}
+export function Treemap({ data, title, ariaLabel, selectedItemId = null, onItemSelect, note, showFooter = true, emptyMessage = "No data in this period", itemNoun = { singular: "item", plural: "items" }, height = DEFAULT_HEIGHT, minimumVisibleShare, formatValue = defaultValueFormatter, getItemAccessibleLabel, }) {
+    const chartHeight = Number.isFinite(height) && height > 0 ? height : DEFAULT_HEIGHT;
+    const containerRef = useRef(null);
+    const [containerWidth, setContainerWidth] = useState(DEFAULT_LAYOUT_WIDTH);
+    useLayoutEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const updateWidth = (nextWidth) => {
+            if (!Number.isFinite(nextWidth) || nextWidth <= 0)
+                return;
+            setContainerWidth((currentWidth) => Math.abs(currentWidth - nextWidth) < 0.5 ? currentWidth : nextWidth);
+        };
+        updateWidth(container.getBoundingClientRect().width);
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(([entry]) => {
+            if (entry)
+                updateWidth(entry.contentRect.width);
+        });
+        observer.observe(container);
+        return () => observer.disconnect();
+    }, []);
+    const layout = useMemo(() => createTreemapLayout(data.items, {
+        width: containerWidth,
+        height: chartHeight,
+        minimumVisibleShare,
+    }), [chartHeight, containerWidth, data, minimumVisibleShare]);
+    const caveats = [];
+    if (layout.hiddenLabelCount > 0) {
+        caveats.push(`${layout.hiddenLabelCount} labels hidden`);
+    }
+    if (layout.minimumSizedItemCount > 0) {
+        caveats.push(`${layout.minimumSizedItemCount} minimum-sized`);
+    }
+    const omittedItemCount = data.items.length - layout.tiles.length;
+    if (omittedItemCount > 0) {
+        caveats.push(`${omittedItemCount} without area`);
+    }
+    const layoutNote = caveats.length > 0
+        ? caveats.join(" · ")
+        : layout.tiles.length > 0
+            ? "every tile true to scale"
+            : "no positive values";
+    return (_jsxs("div", { className: "ah-treemap", children: [(title || note) && (_jsxs("div", { className: "ah-chart-header", children: [title && _jsx("p", { className: "ah-chart-header__title", children: title }), note && _jsx("span", { className: "ah-chart-header__note", children: note })] })), _jsx("div", { ref: containerRef, className: "ah-treemap__plot", style: { height: chartHeight }, role: "group", "aria-label": ariaLabel, children: layout.tiles.length === 0 ? (_jsx("p", { className: "ah-treemap__empty", children: emptyMessage })) : (layout.tiles.map(({ item, rectangle, share, isMinimumSized, canShowLabel }) => {
+                    const context = {
+                        share,
+                        isMinimumSized,
+                        isLabelVisible: canShowLabel,
+                    };
+                    const valueText = `${formatValue(item.value)}${item.partial ? "+" : ""}`;
+                    const accessibleLabel = getItemAccessibleLabel
+                        ? getItemAccessibleLabel(item, context)
+                        : `${item.label} · ${valueText} · ${(share * 100).toFixed(1)}% of total${item.partial ? " · a lower bound" : ""}${isMinimumSized ? " · shown at the minimum visible size" : ""}`;
+                    const isSelected = item.id === selectedItemId;
+                    const className = `ah-treemap__item${isSelected ? " is-selected" : ""}`;
+                    const itemStyle = {
+                        "--treemap-item-color": item.color,
+                        left: percentage(rectangle.x, containerWidth),
+                        top: percentage(rectangle.y, chartHeight),
+                        width: percentage(rectangle.width, containerWidth),
+                        height: percentage(rectangle.height, chartHeight),
+                    };
+                    const itemContent = (_jsx("span", { className: "ah-treemap__item-content", children: canShowLabel && (_jsxs(_Fragment, { children: [_jsx("b", { children: item.label }), _jsx("em", { children: valueText })] })) }));
+                    return onItemSelect ? (_jsx("button", { type: "button", className: className, style: itemStyle, "aria-label": accessibleLabel, "aria-pressed": isSelected, title: accessibleLabel, onClick: () => onItemSelect(item), children: itemContent }, item.id)) : (_jsx("div", { className: className, style: itemStyle, role: "img", "aria-label": accessibleLabel, title: accessibleLabel, children: itemContent }, item.id));
+                })) }), showFooter && (_jsxs("div", { className: "ah-treemap__footer", children: [_jsx("span", { children: countLabel(data.items.length, itemNoun) }), _jsx("span", { children: layoutNote })] }))] }));
+}

package/dist/components/charts/index.d.ts

@@ -0,0 +1,9 @@
+export { CalendarHeatmap } from "./CalendarHeatmap.js";
+export type { CalendarHeatmapProps } from "./CalendarHeatmap.js";
+export { ProjectChartDialog } from "./ProjectChartDialog.js";
+export type { ProjectChartDialogProps, ProjectChartView } from "./ProjectChartDialog.js";
+export { Streamgraph } from "./Streamgraph.js";
+export type { StreamgraphProps } from "./Streamgraph.js";
+export { Treemap } from "./Treemap.js";
+export type { TreemapItemContext, TreemapItemNoun, TreemapProps } from "./Treemap.js";
+export type { CalendarHeatmapCellData, CalendarHeatmapData, CalendarHeatmapWeekData, StreamgraphData, StreamgraphDomainPointData, StreamgraphSeriesData, TreemapData, TreemapItemData, } from "./types.js";

package/dist/components/charts/index.js

@@ -0,0 +1,4 @@
+export { CalendarHeatmap } from "./CalendarHeatmap.js";
+export { ProjectChartDialog } from "./ProjectChartDialog.js";
+export { Streamgraph } from "./Streamgraph.js";
+export { Treemap } from "./Treemap.js";

package/dist/components/charts/streamgraph-layout.d.ts

@@ -0,0 +1,23 @@
+type Point = readonly [x: number, y: number];
+export interface StreamgraphLayerInput {
+    id: string;
+    values: readonly number[];
+}
+export interface StreamgraphLayerPath {
+    seriesId: string;
+    path: string;
+    /** Sample centers use the same stacked boundaries as the rendered band. */
+    samples: readonly Point[];
+}
+export interface StreamgraphLayoutOptions {
+    width: number;
+    height: number;
+    verticalPadding?: number;
+}
+/**
+ * Builds one closed SVG path per series, preserving the order of `layers`.
+ * Values are normalised defensively so malformed runtime data cannot produce
+ * `NaN` path commands.
+ */
+export declare function createStreamgraphLayout(layers: readonly StreamgraphLayerInput[], sampleCount: number, { width, height, verticalPadding }: StreamgraphLayoutOptions): StreamgraphLayerPath[];
+export {};

package/dist/components/charts/streamgraph-layout.js

@@ -0,0 +1,114 @@
+function finiteMagnitude(value) {
+    return Number.isFinite(value) ? Math.max(0, value ?? 0) : 0;
+}
+/**
+ * Catmull-Rom interpolation expressed as cubic Bézier commands. The curve
+ * passes through every supplied point, so smoothing does not discard samples.
+ */
+function createSmoothCurve(points, initialCommand) {
+    if (points.length === 0)
+        return "";
+    // Every point read here exists: the first is guarded above, and the loop
+    // runs while index + 1 < points.length, clamping the previous point at 0.
+    const pointAt = (index) => points[index];
+    let path = `${initialCommand}${pointAt(0)[0].toFixed(1)} ${pointAt(0)[1].toFixed(1)}`;
+    for (let index = 0; index < points.length - 1; index += 1) {
+        const previous = pointAt(index > 0 ? index - 1 : 0);
+        const current = pointAt(index);
+        const next = pointAt(index + 1);
+        const following = points[index + 2] ?? next;
+        path +=
+            `C${(current[0] + (next[0] - previous[0]) / 6).toFixed(1)} ` +
+                `${(current[1] + (next[1] - previous[1]) / 6).toFixed(1)},` +
+                `${(next[0] - (following[0] - current[0]) / 6).toFixed(1)} ` +
+                `${(next[1] - (following[1] - current[1]) / 6).toFixed(1)},` +
+                `${next[0].toFixed(1)} ${next[1].toFixed(1)}`;
+    }
+    return path;
+}
+/** Byron and Wattenberg's wiggle-minimising streamgraph baseline. */
+function calculateWiggleBaseline(layers) {
+    const sampleCount = layers[0]?.length ?? 0;
+    if (sampleCount === 0)
+        return [];
+    // Every read here exists: each loop stays below its own bound, every layer
+    // holds sampleCount samples (the layout builds them at one length),
+    // sampleIndex starts at 1, and the baseline has sampleIndex entries by the
+    // time it is read.
+    const layerAt = (index) => layers[index];
+    const sampleAt = (values, index) => values[index];
+    const baseline = [0];
+    for (let sampleIndex = 1; sampleIndex < sampleCount; sampleIndex += 1) {
+        let totalAtSample = 0;
+        let weightedSlope = 0;
+        for (let layerIndex = 0; layerIndex < layers.length; layerIndex += 1) {
+            const layer = layerAt(layerIndex);
+            const value = sampleAt(layer, sampleIndex);
+            let slope = (value - sampleAt(layer, sampleIndex - 1)) / 2;
+            for (let earlierLayerIndex = 0; earlierLayerIndex < layerIndex; earlierLayerIndex += 1) {
+                const earlierLayer = layerAt(earlierLayerIndex);
+                slope += sampleAt(earlierLayer, sampleIndex) - sampleAt(earlierLayer, sampleIndex - 1);
+            }
+            totalAtSample += value;
+            weightedSlope += slope * value;
+        }
+        baseline.push(sampleAt(baseline, sampleIndex - 1) -
+            (totalAtSample > 0 ? weightedSlope / totalAtSample : 0));
+    }
+    return baseline;
+}
+/**
+ * Builds one closed SVG path per series, preserving the order of `layers`.
+ * Values are normalised defensively so malformed runtime data cannot produce
+ * `NaN` path commands.
+ */
+export function createStreamgraphLayout(layers, sampleCount, { width, height, verticalPadding = 2 }) {
+    const safeSampleCount = Number.isFinite(sampleCount)
+        ? Math.max(0, Math.floor(sampleCount))
+        : 0;
+    if (layers.length === 0 ||
+        safeSampleCount < 2 ||
+        !Number.isFinite(width) ||
+        !Number.isFinite(height) ||
+        width <= 0 ||
+        height <= 0) {
+        return [];
+    }
+    const valuesByLayer = layers.map((layer) => Array.from({ length: safeSampleCount }, (_, index) => finiteMagnitude(layer.values[index])));
+    const baseline = calculateWiggleBaseline(valuesByLayer);
+    const boundaries = [baseline];
+    for (const values of valuesByLayer) {
+        const previousBoundary = boundaries[boundaries.length - 1];
+        boundaries.push(previousBoundary.map((value, index) => value + values[index]));
+    }
+    let minimum = Number.POSITIVE_INFINITY;
+    let maximum = Number.NEGATIVE_INFINITY;
+    for (const boundary of boundaries) {
+        for (const value of boundary) {
+            minimum = Math.min(minimum, value);
+            maximum = Math.max(maximum, value);
+        }
+    }
+    const span = maximum - minimum || 1;
+    const safeVerticalPadding = Number.isFinite(verticalPadding) ? verticalPadding : 0;
+    const padding = Math.min(Math.max(0, safeVerticalPadding), height / 2);
+    const drawableHeight = Math.max(0, height - padding * 2);
+    const xPosition = (index) => (index / (safeSampleCount - 1)) * width;
+    const yPosition = (value) => height - ((value - minimum) / span) * drawableHeight - padding;
+    return layers.map((layer, layerIndex) => {
+        const upperPoints = boundaries[layerIndex + 1].map((value, sampleIndex) => [
+            xPosition(sampleIndex),
+            yPosition(value),
+        ]);
+        const lowerPoints = boundaries[layerIndex]
+            .map((value, sampleIndex) => [xPosition(sampleIndex), yPosition(value)])
+            .reverse();
+        return {
+            seriesId: layer.id,
+            path: `${createSmoothCurve(upperPoints, "M")} ${createSmoothCurve(lowerPoints, "L")} Z`,
+            samples: upperPoints.map(([x, upperY], index) => [
+                x, (upperY + yPosition(boundaries[layerIndex][index])) / 2,
+            ]),
+        };
+    });
+}

package/dist/components/charts/treemap-layout.d.ts

@@ -0,0 +1,32 @@
+import type { TreemapItemData } from "./types.js";
+export interface TreemapRectangle {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface TreemapTileLayout {
+    item: TreemapItemData;
+    rectangle: TreemapRectangle;
+    /** Exact share of the total before applying the minimum visible area. */
+    share: number;
+    isMinimumSized: boolean;
+    canShowLabel: boolean;
+}
+export interface TreemapLayout {
+    tiles: readonly TreemapTileLayout[];
+    hiddenLabelCount: number;
+    minimumSizedItemCount: number;
+}
+export interface TreemapLayoutOptions {
+    width: number;
+    height: number;
+    minimumVisibleShare?: number | undefined;
+    minimumLabelWidth?: number;
+    minimumLabelHeight?: number;
+}
+/**
+ * Sorts, normalises, and lays out treemap items. Zero and invalid values are
+ * omitted because they have no meaningful area.
+ */
+export declare function createTreemapLayout(items: readonly TreemapItemData[], { width, height, minimumVisibleShare, minimumLabelWidth, minimumLabelHeight, }: TreemapLayoutOptions): TreemapLayout;