@cosmicdrift/kumiko-renderer-web 0.350.0 → 0.351.0

package/dist/app/dashboard-body.js

@@ -6,7 +6,7 @@ import { EmbeddedFormProvider } from "../primitives/index.js";
 import { PageSection } from "../primitives/layout.js";
 import { formatMoney } from "../primitives/money-input.js";
 import { Skeleton } from "../ui/skeleton.js";
-import { SegmentBarChart, StackedAreaChart, StackedBarChart, TimeseriesChart, } from "../widgets/charts.js";
+import { chartToneColor, SegmentBarChart, StackedAreaChart, StackedBarChart, TimeseriesChart, } from "../widgets/charts.js";
 import { DashboardListTable } from "../widgets/dashboard-list.js";
 import { FeedList } from "../widgets/feed-list.js";
 import { ModeSwitch } from "../widgets/mode-switch.js";
@@ -116,8 +116,8 @@ function resolveDashboardText(value, translate, formats) {
         return resolveI18nText(value, translate, formats, 1);
     return undefined;
 }
-function PanelShell({ testId, title, subtitle, children, }) {
-    return (_jsxs("section", { "data-testid": testId, className: "flex h-full flex-col rounded-lg border border-border bg-card text-card-foreground", children: [_jsxs("header", { className: "flex h-11 shrink-0 items-center gap-2 border-b border-border-row px-4", children: [_jsx("h2", { className: "truncate text-sm font-semibold", children: title }), subtitle !== undefined && (_jsx("span", { className: "truncate text-xs text-muted-foreground", children: subtitle }))] }), _jsx("div", { className: "grow p-4", children: children })] }));
+function PanelShell({ testId, title, subtitle, action, children, }) {
+    return (_jsxs("section", { "data-testid": testId, className: "flex h-full flex-col rounded-lg border border-border bg-card text-card-foreground", children: [_jsxs("header", { className: "flex h-11 shrink-0 items-center gap-2 border-b border-border-row px-4", children: [_jsx("h2", { className: "truncate text-sm font-semibold", children: title }), subtitle !== undefined && (_jsx("span", { className: "truncate text-xs text-muted-foreground", children: subtitle })), action !== undefined && _jsx("div", { className: "ml-auto shrink-0", children: action })] }), _jsx("div", { className: "grow p-4", children: children })] }));
 }
 function PanelError({ label, error, onRetry, testId, }) {
     const { Button } = usePrimitives();
@@ -133,7 +133,7 @@ function PanelSkeleton({ shape }) {
     }
     return (_jsx("output", { "aria-label": t("kumiko.widget.loading"), className: "flex h-40 items-end gap-1", children: SKELETON_BAR_HEIGHTS.map((height) => (_jsx(Skeleton, { className: "flex-1", style: { height } }, height))) }));
 }
-function QueryPanel({ panel, label, subtitle, screenParams, translate, skeleton, isEmpty, children, }) {
+function QueryPanel({ panel, label, subtitle, action, screenParams, translate, skeleton, isEmpty, children, }) {
     const { data, error, loading, refetch } = useQuery(panel.query, panelPayload(panel, screenParams), { live: true });
     let body;
     if (loading && data === null) {
@@ -148,7 +148,7 @@ function QueryPanel({ panel, label, subtitle, screenParams, translate, skeleton,
     else {
         body = children(data);
     }
-    return (_jsx(PanelShell, { testId: `dashboard-panel-${panel.id}`, title: label, subtitle: subtitle, children: body }));
+    return (_jsx(PanelShell, { testId: `dashboard-panel-${panel.id}`, title: label, subtitle: subtitle, action: action, children: body }));
 }
 function isSparkPoint(value) {
     return (typeof value === "object" &&
@@ -207,10 +207,11 @@ function StatPanelBody({ panel, label, screenId, screenParams, translate, varian
     const spark = readSparkline(panel, record);
     const testId = `dashboard-panel-${panel.id}`;
     const subText = resolveDashboardText(sub, translate, formats) ?? fallbackText(sub, undefined);
+    const icon = Icon !== undefined ? (_jsx(Icon, { entityName: screenId, entityId: null, screenId: screenId, filterParams: screenParams.filterParams })) : undefined;
     if (variant === "strip") {
-        return (_jsx(StatStripCell, { label: label, value: value, tone: tone ?? "default", ...(subText !== undefined && { sub: subText }), ...(delta !== undefined && { delta }), ...(spark !== undefined && { spark }), testId: testId }));
+        return (_jsx(StatStripCell, { icon: icon, label: label, value: value, tone: tone ?? "default", ...(Icon !== undefined && { accentColor: panel.accentColor }), ...(subText !== undefined && { sub: subText }), ...(delta !== undefined && { delta }), ...(spark !== undefined && { spark }), testId: testId }));
     }
-    return (_jsx(StatCard, { icon: Icon !== undefined ? (_jsx(Icon, { entityName: screenId, entityId: null, screenId: screenId, filterParams: screenParams.filterParams })) : undefined, label: label, value: value, tone: tone ?? "default", ...(Icon !== undefined && { accentColor: panel.accentColor }), ...(subText !== undefined && { sub: subText }), ...(delta !== undefined && { delta }), ...(spark !== undefined && { spark }), testId: testId }));
+    return (_jsx(StatCard, { icon: icon, label: label, value: value, tone: tone ?? "default", ...(Icon !== undefined && { accentColor: panel.accentColor }), ...(subText !== undefined && { sub: subText }), ...(delta !== undefined && { delta }), ...(spark !== undefined && { spark }), testId: testId }));
 }
 function readDelta(panel, record) {
     if (panel.deltaField === undefined || panel.deltaDirectionField === undefined)
@@ -229,13 +230,41 @@ function StatGroupPanelBody({ panel, label, screenId, screenParams, translate, }
     if (label === undefined) {
         return (_jsx("div", { "data-testid": testId, className: "grid grid-cols-2 gap-y-2 rounded-lg border border-border bg-card py-1 lg:auto-cols-fr lg:grid-flow-col lg:divide-x lg:divide-border-row", children: panel.stats.map((stat) => (_jsx(StatPanelBody, { panel: stat, label: translate(stat.label), screenId: screenId, screenParams: screenParams, translate: translate, variant: "strip" }, stat.id))) }));
     }
-    return (_jsx(SectionCard, { title: label, testId: testId, children: _jsx("section", { className: "grid grid-cols-1 gap-3 sm:grid-cols-3", children: panel.stats.map((stat) => (_jsx(StatPanelBody, { panel: stat, label: translate(stat.label), screenId: screenId, screenParams: screenParams, translate: translate, variant: "card" }, stat.id))) }) }));
+    return (_jsx(SectionCard, { title: label, ...(panel.subtitle !== undefined && { subtitle: translate(panel.subtitle) }), testId: testId, children: _jsx("section", { className: "grid grid-cols-1 gap-3 sm:grid-cols-3", children: panel.stats.map((stat) => (_jsx(StatPanelBody, { panel: stat, label: translate(stat.label), screenId: screenId, screenParams: screenParams, translate: translate, variant: "card" }, stat.id))) }) }));
 }
-function resolveMarkers(markers, translate, formats) {
-    return markers?.map((marker) => ({
-        atMs: marker.atMs,
-        label: resolveDashboardText(marker.label, translate, formats) ?? "",
-    }));
+function markerKindColor(kind) {
+    if (kind === undefined)
+        return undefined;
+    if (kind.color !== undefined)
+        return kind.color;
+    return kind.tone !== undefined ? chartToneColor(kind.tone) : undefined;
+}
+function resolveMarkers(markers, translate, formats, markerKinds) {
+    return markers?.map((marker) => {
+        const color = typeof marker.kind === "string" ? markerKindColor(markerKinds?.[marker.kind]) : undefined;
+        return {
+            atMs: marker.atMs,
+            label: resolveDashboardText(marker.label, translate, formats) ?? "",
+            ...(color !== undefined && { color }),
+        };
+    });
+}
+function addUtcMonths(atMs, months) {
+    const date = new Date(atMs);
+    date.setUTCMonth(date.getUTCMonth() + months);
+    return date.getTime();
+}
+// Same window as a "1/3/5 years" switch over a plan: `months` ahead of today,
+// pulled back when the data ends earlier, never before the first bucket.
+function rangeWindow(months, anchorMs, firstMs, lastMs) {
+    const endMs = Math.min(lastMs, addUtcMonths(anchorMs, months));
+    return { startMs: Math.max(firstMs, addUtcMonths(endMs, -months)), endMs };
+}
+function pointsWithin(points, window) {
+    return points.filter((p) => p.atMs >= window.startMs && p.atMs <= window.endMs);
+}
+function selectedRangeMonths(ranges, selected) {
+    return ranges?.options.find((option) => option.value === selected)?.months;
 }
 // A plain bar chart ("changes per day") ships `points` without `series`.
 const SINGLE_SERIES_KEY = "value";
@@ -272,18 +301,25 @@ function ChartPanelBody({ panel, label, screenParams, translate, }) {
     const t = useTranslation();
     const todayLabel = t("kumiko.dashboard.today");
     const tones = panel.seriesTones;
+    const colors = panel.seriesColors;
     const testId = `dashboard-chart-${panel.id}`;
-    return (_jsx(QueryPanel, { panel: panel, label: label, subtitle: panel.subtitle !== undefined ? translate(panel.subtitle) : undefined, screenParams: screenParams, translate: translate, skeleton: panel.chart === "segment-bars" ? "segments" : "bars", isEmpty: (data) => isChartEmpty(panel.chart, data, chartSeries(data, label, translate)), children: (data) => {
+    const ranges = panel.chart === "stacked-area" ? panel.ranges : undefined;
+    const [selectedRange, setSelectedRange] = useState(ranges?.default);
+    const rangeSwitch = ranges !== undefined && selectedRange !== undefined ? (_jsx(ModeSwitch, { value: selectedRange, options: ranges.options.map((option) => ({
+            value: option.value,
+            label: translate(option.label),
+        })), onChange: setSelectedRange, ariaLabel: label, variant: "pill", testId: `dashboard-chart-range-${panel.id}` })) : undefined;
+    return (_jsx(QueryPanel, { panel: panel, label: label, subtitle: panel.subtitle !== undefined ? translate(panel.subtitle) : undefined, action: rangeSwitch, screenParams: screenParams, translate: translate, skeleton: panel.chart === "segment-bars" ? "segments" : "bars", isEmpty: (data) => isChartEmpty(panel.chart, data, chartSeries(data, label, translate)), children: (data) => {
             const series = chartSeries(data, label, translate);
             const { startMs, endMs } = windowOf(data, series);
-            const markers = resolveMarkers(data.markers, translate, formats);
+            const markers = resolveMarkers(data.markers, translate, formats, panel.markerKinds);
             const formatValue = formats.formatPanelValue(panel.valueFormat);
             if (panel.chart === "segment-bars") {
                 return (_jsx(SegmentBarChart, { rows: (data.rows ?? []).map((row) => ({
                         ...row,
                         label: translate(row.label),
                         segments: row.segments.map((seg) => ({ ...seg, label: translate(seg.label) })),
-                    })), tones: tones, ariaLabel: label, formatValue: formatValue, testId: testId }));
+                    })), tones: tones, colors: colors, ariaLabel: label, formatValue: formatValue, testId: testId }));
             }
             if (panel.chart === "stacked-bars") {
                 const times = series.flatMap((s) => s.points.map((p) => p.atMs));
@@ -293,11 +329,25 @@ function ChartPanelBody({ panel, label, screenParams, translate, }) {
                     const prev = all[i - 1];
                     return prev === undefined ? [] : [atMs - prev];
                 }), DAY_MS);
-                return (_jsx(StackedBarChart, { series: series, windowEndMs: endMs, tones: tones, ariaLabel: label, todayLabel: todayLabel, formatBucketLabel: spacing < DAY_MS - HOUR_MS ? formats.formatHour : formats.formatDay, formatValue: formatValue, testId: testId }));
+                return (_jsx(StackedBarChart, { series: series, windowEndMs: endMs, tones: tones, colors: colors, ariaLabel: label, todayLabel: todayLabel, formatBucketLabel: spacing < DAY_MS - HOUR_MS ? formats.formatHour : formats.formatDay, formatValue: formatValue, testId: testId }));
             }
             if (panel.chart === "stacked-area") {
-                return (_jsx(StackedAreaChart, { series: series, windowStartMs: startMs, windowEndMs: endMs, ...(data.todayMs !== undefined &&
-                        data.todayMs !== null && { todayMs: data.todayMs }), tones: tones, markers: markers, ariaLabel: label, todayLabel: todayLabel, formatBucketLabel: formats.formatDay, formatValue: formatValue, formatMarkerTime: formats.formatDay, scrollable: panel.scrollable === true, testId: testId }));
+                const lines = (data.lines ?? []).map((line) => ({
+                    ...line,
+                    label: translate(line.label),
+                }));
+                const todayMs = data.todayMs ?? undefined;
+                const months = selectedRangeMonths(ranges, selectedRange);
+                const bucketTimes = series.flatMap((s) => s.points.map((p) => p.atMs));
+                const window = months === undefined || bucketTimes.length === 0
+                    ? { startMs, endMs }
+                    : rangeWindow(months, todayMs ?? Math.max(...bucketTimes), Math.min(...bucketTimes), Math.max(...bucketTimes));
+                const isWindowed = months !== undefined;
+                return (_jsx(StackedAreaChart, { series: isWindowed
+                        ? series.map((s) => ({ ...s, points: pointsWithin(s.points, window) }))
+                        : series, lines: isWindowed
+                        ? lines.map((line) => ({ ...line, points: pointsWithin(line.points, window) }))
+                        : lines, windowStartMs: window.startMs, windowEndMs: window.endMs, ...(todayMs !== undefined && { todayMs }), tones: tones, colors: colors, markers: isWindowed && markers !== undefined ? pointsWithin(markers, window) : markers, ariaLabel: label, todayLabel: todayLabel, formatBucketLabel: formats.formatDay, formatValue: formatValue, formatMarkerTime: formats.formatDay, scrollable: panel.scrollable === true, showLegendTotals: panel.legendTotals !== false, emptyContent: _jsx(EmptyState, { title: translate(panel.emptyLabel ?? "kumiko.list.no-entries") }), testId: testId }));
             }
             return (_jsx(TimeseriesChart, { points: data.points ?? [], windowStartMs: startMs, windowEndMs: endMs, markers: markers, formatMarkerTime: formats.formatDay, ...(panel.valueFormat !== undefined && {
                     yAxis: { ticks: 3, format: formatValue },
@@ -336,12 +386,16 @@ function FeedPanelBody({ panel, label, screenParams, translate, }) {
 function ProgressListPanelBody({ panel, label, screenParams, translate, }) {
     const formats = useDashboardFormats();
     return (_jsx(QueryPanel, { panel: panel, label: label, screenParams: screenParams, translate: translate, skeleton: "rows", isEmpty: (data) => (data.rows ?? []).length === 0, children: (data) => {
-            const rows = (data.rows ?? []).map((row, i) => ({
-                id: String(i),
-                label: resolveDashboardText(row.label, translate, formats) ?? "—",
-                value: resolveDashboardText(row.value, translate, formats) ?? "—",
-                fraction: row.fraction,
-            }));
+            const rows = (data.rows ?? []).map((row, i) => {
+                const sub = resolveDashboardText(row.sub, translate, formats);
+                return {
+                    id: String(i),
+                    label: resolveDashboardText(row.label, translate, formats) ?? "—",
+                    value: resolveDashboardText(row.value, translate, formats) ?? "—",
+                    fraction: row.fraction,
+                    ...(sub !== undefined && { sub }),
+                };
+            });
             return _jsx(ProgressList, { rows: rows });
         } }));
 }
@@ -439,33 +493,67 @@ function PanelBody({ panel, label, screenId, screenParams, translate, }) {
     return (_jsx(ProgressListPanelBody, { panel: panel, label: text, screenParams: screenParams, translate: translate }));
 }
 const VisibilityQueryContext = createContext(new Map());
-// One live query per distinct `visibleWhen.query`, shared by every panel that
-// gates on it — N panels on the same status query would otherwise each open
-// their own request, SSE subscription and refetch per event.
-function VisibilityQueryScope({ query, children, }) {
+const NO_GATE_PAYLOAD = {};
+function visibilityGate(query, payload) {
+    return { key: `${query}|${JSON.stringify(payload)}`, query, payload };
+}
+// Embedded screens carry no screen filter; in-grid panels pass the filter
+// (unless ignoreScreenFilter, never for a stat-group) and the time range.
+function panelVisibilityGate(panel, screenParams) {
+    if (panel.kind === "custom" || panel.visibleWhen === undefined)
+        return undefined;
+    if (panel.kind === "screen")
+        return visibilityGate(panel.visibleWhen.query, NO_GATE_PAYLOAD);
+    const dropsFilter = panel.kind !== "stat-group" && panel.ignoreScreenFilter === true;
+    return visibilityGate(panel.visibleWhen.query, {
+        ...(dropsFilter ? {} : screenParams.filterParams),
+        ...screenParams.rangeParams,
+    });
+}
+// One live query per distinct gate (query + payload), shared by every panel
+// that gates on it — N panels on the same status query would otherwise each
+// open their own request, SSE subscription and refetch per event.
+function VisibilityQueryScope({ gate, children, }) {
     const parent = useContext(VisibilityQueryContext);
-    const result = useQuery(query, {}, { live: true });
-    const value = useMemo(() => new Map(parent).set(query, result), [parent, query, result]);
+    const result = useQuery(gate.query, gate.payload, {
+        live: true,
+    });
+    const value = useMemo(() => new Map(parent).set(gate.key, result), [parent, gate.key, result]);
     return (_jsx(VisibilityQueryContext.Provider, { value: value, children: children }));
 }
-function VisibilityQueryScopes({ queries, children, }) {
-    const [first, ...rest] = queries;
+function VisibilityQueryScopes({ gates, children, }) {
+    const [first, ...rest] = gates;
     if (first === undefined)
         return children;
-    return (_jsx(VisibilityQueryScope, { query: first, children: _jsx(VisibilityQueryScopes, { queries: rest, children: children }) }));
+    return (_jsx(VisibilityQueryScope, { gate: first, children: _jsx(VisibilityQueryScopes, { gates: rest, children: children }) }));
 }
-function distinctVisibilityQueries(panels) {
-    const queries = new Set();
+function distinctVisibilityGates(panels, screenParams) {
+    const gates = new Map();
     for (const panel of panels) {
-        if (panel.kind === "screen" && panel.visibleWhen !== undefined) {
-            queries.add(panel.visibleWhen.query);
+        const gate = panelVisibilityGate(panel, screenParams);
+        if (gate !== undefined)
+            gates.set(gate.key, gate);
+    }
+    return [...gates.values()];
+}
+function GatedGridCell({ panel, screenParams, label, className, children, }) {
+    const gate = panelVisibilityGate(panel, screenParams);
+    const visibility = useContext(VisibilityQueryContext).get(gate?.key ?? "");
+    const visibleWhen = panel.kind === "custom" ? undefined : panel.visibleWhen;
+    if (visibleWhen !== undefined) {
+        const verdict = evalVisibleWhen(visibleWhen, visibility);
+        if (verdict === "error" && visibility?.error) {
+            return (_jsx("div", { className: className, "data-testid": `dashboard-panel-${panel.id}`, children: _jsx(PanelError, { label: label, error: visibility.error, onRetry: () => void visibility.refetch() }) }));
         }
+        // Loading renders nothing too: a skeleton that then vanishes flickers.
+        if (verdict !== "visible")
+            return null;
     }
-    return [...queries];
+    return _jsx("div", { className: className, children: children });
 }
 function ScreenPanelTile({ panel, featureName, translate, }) {
     const visibleWhen = panel.visibleWhen;
-    const visibility = useContext(VisibilityQueryContext).get(visibleWhen?.query ?? "");
+    const visibility = useContext(VisibilityQueryContext).get(visibleWhen !== undefined ? visibilityGate(visibleWhen.query, NO_GATE_PAYLOAD).key : "");
     const target = useEmbeddedScreen(featureName, panel.screen);
     if (target === undefined)
         return null;
@@ -502,7 +590,7 @@ export function WebDashboardBody({ featureName, screen, translate, }) {
     const { params: rangeParams, control: rangeControl } = useTimeRange(screen, effectiveTranslate);
     const screenParams = { filterParams, rangeParams };
     const loadedAtMs = useLoadedAt(screenParams);
-    const visibilityQueries = distinctVisibilityQueries(screen.panels);
+    const visibilityGates = distinctVisibilityGates(screen.panels, screenParams);
     const scope = screen.scope;
     // A raw description is agent-facing prose; only an i18n key is user-facing copy.
     const translatedDescription = screen.description !== undefined ? effectiveTranslate(screen.description) : undefined;
@@ -510,13 +598,13 @@ export function WebDashboardBody({ featureName, screen, translate, }) {
     const scopeBadge = scope !== undefined ? (_jsx(StatusBadge, { tone: "accent", testId: `dashboard-${screen.id}-scope`, children: effectiveTranslate(scope.badge) })) : null;
     // The shell header owns the title; the badge sits right after it there.
     const badgeInHeader = scopeBadge !== null && headerSlotAvailable && PageHeader !== undefined;
-    return (_jsxs(PageSection, { className: "flex flex-col gap-4", testId: `dashboard-${screen.id}`, children: [badgeInHeader && _jsx(PageHeader, { status: scopeBadge }), _jsxs("div", { className: "flex flex-wrap items-end justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [!badgeInHeader && scopeBadge, picker] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [screen.showUpdatedAt !== false && (_jsx("span", { "data-testid": `dashboard-${screen.id}-updated-at`, className: "text-xs tabular-nums text-muted-foreground", children: t("kumiko.dashboard.updated-at", { time: formatDateTime(loadedAtMs) }) })), rangeControl] })] }), description !== undefined && (_jsx(Text, { variant: "muted", testId: `dashboard-${screen.id}-description`, children: description })), scope?.notice !== undefined && (_jsx(Banner, { variant: "info", testId: `dashboard-${screen.id}-scope-notice`, children: effectiveTranslate(scope.notice) })), _jsx(VisibilityQueryScopes, { queries: visibilityQueries, children: _jsx("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-4", children: screen.panels.map((panel) => {
+    return (_jsxs(PageSection, { className: "flex flex-col gap-4", testId: `dashboard-${screen.id}`, children: [badgeInHeader && _jsx(PageHeader, { status: scopeBadge }), _jsxs("div", { className: "flex flex-wrap items-end justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [!badgeInHeader && scopeBadge, picker] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [screen.showUpdatedAt !== false && (_jsx("span", { "data-testid": `dashboard-${screen.id}-updated-at`, className: "text-xs tabular-nums text-muted-foreground", children: t("kumiko.dashboard.updated-at", { time: formatDateTime(loadedAtMs) }) })), rangeControl] })] }), description !== undefined && (_jsx(Text, { variant: "muted", testId: `dashboard-${screen.id}-description`, children: description })), scope?.notice !== undefined && (_jsx(Banner, { variant: "info", testId: `dashboard-${screen.id}-scope-notice`, children: effectiveTranslate(scope.notice) })), _jsx(VisibilityQueryScopes, { gates: visibilityGates, children: _jsx("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-4", children: screen.panels.map((panel) => {
                         if (panel.kind === "screen") {
                             return (_jsx(ScreenPanelTile, { panel: panel, featureName: featureName, translate: effectiveTranslate }, panel.id));
                         }
                         const label = panel.kind === "custom" || panel.label === undefined
                             ? undefined
                             : effectiveTranslate(panel.label);
-                        return (_jsx("div", { className: panelSpanClassName(panel), children: _jsx(PanelBody, { panel: panel, label: label, screenId: screen.id, screenParams: screenParams, translate: effectiveTranslate }) }, panel.id));
+                        return (_jsx(GatedGridCell, { panel: panel, screenParams: screenParams, label: label ?? panel.id, className: panelSpanClassName(panel), children: _jsx(PanelBody, { panel: panel, label: label, screenId: screen.id, screenParams: screenParams, translate: effectiveTranslate }) }, panel.id));
                     }) }) })] }));
 }

package/dist/primitives/date-field.js

@@ -8,8 +8,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // date part next to the time input. So `date` and `timestamp` share the
 // same typing/navigation UX instead of two diverging primitives (#369).
 import { useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { Temporal } from "@cosmicdrift/kumiko-types/temporal";
 import { useState } from "react";
-import { Temporal } from "temporal-polyfill";
 import { cn } from "../lib/cn.js";
 import { CalendarPopover } from "./calendar-popover.js";
 import { formatDateForInput, formatDatePlaceholder, guessLocale, parseIso, parseTypedDate, toIso, } from "./date-parse.js";

package/dist/primitives/date-parse.d.ts

@@ -1,4 +1,4 @@
-import { Temporal } from "temporal-polyfill";
+import { Temporal } from "@cosmicdrift/kumiko-types/temporal";
 export declare function guessLocale(): string;
 export declare function parseIso(v: string): Temporal.PlainDate | undefined;
 export declare function toIso(d: Temporal.PlainDate): string;

package/dist/primitives/date-parse.js

@@ -4,7 +4,7 @@
 // zone. TZ/wall-clock conversion for timestamp fields deliberately stays
 // in timestamp-input.tsx (wire boundary, own test); this file is pure
 // calendar date.
-import { Temporal } from "temporal-polyfill";
+import { Temporal } from "@cosmicdrift/kumiko-types/temporal";
 // Prefer the native Temporal (Chromium 144+/Firefox 139+) over the bundled
 // polyfill so `instanceof` checks match values crossing package boundaries;
 // falls back to the polyfill where native support is absent.

package/dist/primitives/index.js

@@ -1828,7 +1828,10 @@ export function DefaultCard({ slots, options, className, testId, dataAttributes,
         s.headerActions !== undefined ? (_jsxs("div", { className: cn("flex flex-col gap-3 px-[var(--card-padding)] pt-6 pb-4", fillHeight && "shrink-0"), children: [(s.title !== undefined || s.subtitle !== undefined || s.headerActions !== undefined) && (_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [s.title !== undefined && (_jsx("h3", { className: "text-base font-semibold leading-none tracking-tight", children: s.title })), s.subtitle !== undefined && (_jsx("p", { className: "text-sm text-muted-foreground", children: s.subtitle }))] }), s.headerActions] })), s.headerContent] })) : null;
     const header = s.header ?? defaultHeader;
     const hasHeader = header !== null && header !== undefined;
-    const card = (_jsxs("div", { ...dataAttributes, "data-slot": "card", "data-testid": testId, className: cn(framed ? cardSurface({ radius }) : "flex flex-col", "overflow-hidden", 
+    const card = (_jsxs("div", { ...dataAttributes, "data-slot": "card", "data-testid": testId, className: cn(framed ? cardSurface({ radius }) : "flex flex-col", 
+        // An unframed card has no radius to clip; overflow-hidden would also
+        // zero its flex-item min-height and cut off content inside a scroller.
+        (framed || fillHeight) && "overflow-hidden", 
         // Same "no flex-1" reasoning as DefaultForm's own fillHeight card
         // (fw#2722/#2778): sizes to content and only shrinks (min-h-0) once
         // an ancestor is itself height-constrained.

package/dist/widgets/charts.d.ts

@@ -87,6 +87,7 @@ export declare function TimeseriesChart({ points, windowStartMs, windowEndMs, to
     readonly testId?: string;
 }): ReactNode;
 export type ChartTone = "positive" | "negative" | "active" | "neutral";
+export declare function chartToneColor(tone: ChartTone): string;
 export type ChartSeries = {
     readonly key: string;
     /** Translated by the caller. */
@@ -96,6 +97,12 @@ export type ChartSeries = {
 export type ChartMarker = {
     readonly atMs: number;
     readonly label: string;
+    /** Colors the pin and, on StackedAreaChart, draws a dashed guide line in the plot. */
+    readonly color?: string;
+};
+/** Unstacked line drawn over a StackedAreaChart on the same y scale. */
+export type ChartLine = ChartSeries & {
+    readonly dashed?: boolean;
 };
 export type SegmentBarRow = {
     readonly key: string;
@@ -108,13 +115,16 @@ export type SegmentBarRow = {
     }[];
 };
 type ToneMap = Readonly<Record<string, ChartTone>>;
+/** Key -> raw CSS color; wins over the tone map. */
+type ColorMap = Readonly<Record<string, string>>;
 /** Vertically stacked bars per bucket (x axis = bucket, not time).
  *  The last bucket carries `todayLabel` when it contains `windowEndMs` and
  *  has day granularity. */
-export declare function StackedBarChart({ series, windowEndMs, tones, ariaLabel, todayLabel, formatBucketLabel, formatValue, emptyContent, testId, }: {
+export declare function StackedBarChart({ series, windowEndMs, tones, colors, ariaLabel, todayLabel, formatBucketLabel, formatValue, emptyContent, testId, }: {
     readonly series: readonly ChartSeries[];
     readonly windowEndMs: number;
     readonly tones?: ToneMap;
+    readonly colors?: ColorMap;
     readonly ariaLabel: string;
     readonly todayLabel: string;
     readonly formatBucketLabel: (atMs: number) => string;
@@ -124,22 +134,26 @@ export declare function StackedBarChart({ series, windowEndMs, tones, ariaLabel,
 }): ReactNode;
 /** One horizontally stacked bar per row; bar length is relative to the
  *  largest row so rows stay comparable. */
-export declare function SegmentBarChart({ rows, tones, ariaLabel, formatValue, testId, }: {
+export declare function SegmentBarChart({ rows, tones, colors, ariaLabel, formatValue, testId, }: {
     readonly rows: readonly SegmentBarRow[];
     readonly tones?: ToneMap;
+    readonly colors?: ColorMap;
     readonly ariaLabel: string;
     readonly formatValue?: (value: number) => string;
     readonly testId?: string;
 }): ReactNode;
 /** Stacked bands over time. Right of `todayMs` is the forecast: lighter
  *  fill plus a vertical "today" line. */
-export declare function StackedAreaChart({ series, windowStartMs, windowEndMs, todayMs, tones, markers, ariaLabel, todayLabel, formatBucketLabel, formatValue, formatMarkerTime, scrollable, emptyContent, testId, }: {
+export declare function StackedAreaChart({ series, windowStartMs, windowEndMs, todayMs, tones, colors, markers, lines, ariaLabel, todayLabel, formatBucketLabel, formatValue, formatMarkerTime, scrollable, showLegendTotals, emptyContent, testId, }: {
     readonly series: readonly ChartSeries[];
     readonly windowStartMs: number;
     readonly windowEndMs: number;
     readonly todayMs?: number;
     readonly tones?: ToneMap;
+    readonly colors?: ColorMap;
     readonly markers?: readonly ChartMarker[];
+    /** Drawn over the bands, not stacked. A `null` value breaks the line. */
+    readonly lines?: readonly ChartLine[];
     readonly ariaLabel: string;
     readonly todayLabel: string;
     readonly formatBucketLabel: (atMs: number) => string;
@@ -147,6 +161,7 @@ export declare function StackedAreaChart({ series, windowStartMs, windowEndMs, t
     readonly formatMarkerTime?: (atMs: number) => string;
     /** Fixed width per bucket; the plot scrolls horizontally, y ticks stay put. */
     readonly scrollable?: boolean;
+    readonly showLegendTotals?: boolean;
     readonly emptyContent?: ReactNode;
     readonly testId?: string;
 }): ReactNode;

package/dist/widgets/charts.js

@@ -130,8 +130,14 @@ const CHART_TONE_VAR = {
     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) {
+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];
 }
@@ -159,6 +165,19 @@ function bucketTimes(series) {
 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);
 }
@@ -166,7 +185,10 @@ 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.key}`, className: "flex items-center gap-1.5", children: [_jsx("span", { "aria-hidden": "true", className: "size-2 rounded-[2px]", style: { backgroundColor: item.color } }), _jsx("span", { children: item.label }), _jsx("span", { className: "tabular-nums text-foreground", children: formatValue(item.total) })] }, item.key))) }));
+    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.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 YTicks({ max, 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: Array.from({ length: Y_TICK_COUNT }, (_, i) => (_jsx("span", { children: formatValue((max / (Y_TICK_COUNT - 1)) * i) }, i))) }));
@@ -175,7 +197,7 @@ const BAR_LABEL_TARGET = 8;
 /** Vertically stacked bars per bucket (x axis = bucket, not time).
  *  The last bucket carries `todayLabel` when it contains `windowEndMs` and
  *  has day granularity. */
-export function StackedBarChart({ series, windowEndMs, tones, ariaLabel, todayLabel, formatBucketLabel, formatValue = String, emptyContent, testId, }) {
+export function StackedBarChart({ series, windowEndMs, tones, colors, ariaLabel, todayLabel, formatBucketLabel, formatValue = String, emptyContent, testId, }) {
     const times = bucketTimes(series);
     if (times.length === 0)
         return _jsx("div", { "data-testid": testId, children: emptyContent });
@@ -195,19 +217,19 @@ export function StackedBarChart({ series, windowEndMs, tones, ariaLabel, todayLa
                                                     return null;
                                                 return (_jsx("div", { "data-testid": `chart-bar-segment-${s.key}`, style: {
                                                         height: percent(value / (totals[i] ?? 1)),
-                                                        backgroundColor: chartColor(s.key, si, tones),
+                                                        backgroundColor: chartColor(s.key, si, tones, colors),
                                                     } }, s.key));
                                             }) }) }), _jsx("div", { className: "h-5 pt-1 text-center text-[11px] leading-4 whitespace-nowrap text-muted-foreground", children: (lastIdx - i) % labelEvery === 0 ? label : "" })] }, atMs));
                         }) })] }), _jsx(ChartLegend, { formatValue: formatValue, items: series.map((s, i) => ({
                     key: s.key,
                     label: s.label,
-                    color: chartColor(s.key, i, tones),
+                    color: chartColor(s.key, i, tones, colors),
                     total: seriesTotal(s),
                 })) })] }));
 }
 /** One horizontally stacked bar per row; bar length is relative to the
  *  largest row so rows stay comparable. */
-export function SegmentBarChart({ rows, tones, ariaLabel, formatValue = String, testId, }) {
+export function SegmentBarChart({ rows, tones, colors, ariaLabel, formatValue = String, testId, }) {
     const rowTotal = (row) => row.segments.length > 0 ? row.segments.reduce((sum, s) => sum + s.value, 0) : row.value;
     const maxTotal = Math.max(1, ...rows.map(rowTotal));
     const segmentTotals = new Map();
@@ -223,23 +245,35 @@ export function SegmentBarChart({ rows, tones, ariaLabel, formatValue = String,
     const legendKeys = [...segmentTotals.keys()];
     return (_jsxs("div", { "data-testid": testId, role: "img", "aria-label": ariaLabel, className: "flex flex-col gap-3", children: [_jsx("ul", { className: "flex flex-col gap-3", children: rows.map((row) => (_jsxs("li", { "data-testid": `chart-row-${row.key}`, className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-2 text-sm", children: [_jsx("span", { className: "font-medium", children: row.label }), _jsx("span", { className: "tabular-nums text-muted-foreground", children: formatValue(row.value) })] }), _jsx("div", { className: "flex h-2 gap-px overflow-hidden rounded-full bg-muted", children: row.segments.map((seg) => (_jsx("div", { title: `${seg.label}: ${formatValue(seg.value)}`, className: "h-full", style: {
                                     width: percent(seg.value / maxTotal),
-                                    backgroundColor: chartColor(seg.key, legendKeys.indexOf(seg.key), tones),
+                                    backgroundColor: chartColor(seg.key, legendKeys.indexOf(seg.key), tones, colors),
                                 } }, seg.key))) })] }, row.key))) }), _jsx(ChartLegend, { formatValue: formatValue, items: legendKeys.map((key, i) => ({
                     key,
                     label: segmentTotals.get(key)?.label ?? key,
-                    color: chartColor(key, i, tones),
+                    color: chartColor(key, i, tones, colors),
                     total: segmentTotals.get(key)?.total ?? 0,
                 })) })] }));
 }
+// Two markers may share atMs and label, so the occurrence count keeps React keys unique.
 function sortMarkers(markers) {
-    return [...markers].sort((a, b) => a.atMs - b.atMs);
+    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, }) {
     const span = Math.max(1, windowEndMs - windowStartMs);
-    return (_jsx("div", { "aria-hidden": "true", className: "relative mt-1 h-5", children: sortMarkers(markers).map((marker, i) => (_jsx("span", { "data-testid": "chart-marker-pin", className: "absolute flex size-4 -translate-x-1/2 items-center justify-center rounded-full bg-foreground text-[10px] font-medium text-background", style: { left: percent(Math.max(0, Math.min(1, (marker.atMs - windowStartMs) / span))) }, children: i + 1 }, `${marker.atMs}-${marker.label}`))) }));
+    return (_jsx("div", { "aria-hidden": "true", className: "relative mt-1 h-5", children: sortMarkers(markers).map((marker, i) => (_jsx("span", { "data-testid": "chart-marker-pin", className: cn("absolute flex size-4 -translate-x-1/2 items-center justify-center rounded-full text-[10px] font-medium text-background", marker.color === undefined && "bg-foreground"), style: {
+                left: percent(Math.max(0, Math.min(1, (marker.atMs - windowStartMs) / span))),
+                ...(marker.color !== undefined && { backgroundColor: marker.color }),
+            }, children: i + 1 }, marker.key))) }));
 }
 function MarkerLegend({ markers, formatMarkerTime, }) {
-    return (_jsx("ol", { className: "flex flex-col gap-1 text-xs text-muted-foreground", 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", children: i + 1 }), _jsx("span", { children: marker.label }), formatMarkerTime !== undefined && (_jsx("span", { className: "ml-auto tabular-nums", children: formatMarkerTime(marker.atMs) }))] }, `${marker.atMs}-${marker.label}`))) }));
+    return (_jsx("ol", { className: "flex flex-col gap-1 text-xs text-muted-foreground", 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) {
@@ -249,10 +283,10 @@ function bucketLabelTransform(index, count) {
 }
 /** Stacked bands over time. Right of `todayMs` is the forecast: lighter
  *  fill plus a vertical "today" line. */
-export function StackedAreaChart({ series, windowStartMs, windowEndMs, todayMs, tones, markers, ariaLabel, todayLabel, formatBucketLabel, formatValue = String, formatMarkerTime, scrollable = false, emptyContent, testId, }) {
+export function StackedAreaChart({ series, windowStartMs, windowEndMs, todayMs, tones, colors, markers, lines = [], ariaLabel, todayLabel, formatBucketLabel, formatValue = String, formatMarkerTime, scrollable = false, showLegendTotals = true, emptyContent, testId, }) {
     const clipId = useId();
     const scrollRef = useRef(null);
-    const times = bucketTimes(series);
+    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));
@@ -271,9 +305,10 @@ export function StackedAreaChart({ series, windowStartMs, windowEndMs, todayMs,
     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;
     // Doubling keeps a lone bucket away from the top edge of the y-scale.
-    const max = niceCeil(Math.max(...totals) * (isSingleBucket ? 2 : 1));
+    const max = niceCeil(Math.max(...totals, ...lineValues) * (isSingleBucket ? 2 : 1));
     const yOf = (value) => height - (value / max) * height;
     const lower = times.map(() => 0);
     const bands = series.map((s, si) => {
@@ -288,21 +323,41 @@ export function StackedAreaChart({ series, windowStartMs, windowEndMs, todayMs,
             lower[ti] = upper[ti] ?? 0;
         return {
             key: s.key,
-            color: chartColor(s.key, si, tones),
+            color: chartColor(s.key, si, tones, colors),
             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 renderBands = (fillOpacity) => bands.map((band) => band.dot === undefined ? (_jsx("path", { d: band.d, fill: band.color, fillOpacity: fillOpacity, stroke: "none" }, 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 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: "block h-32 w-full", role: "img", "aria-label": ariaLabel, children: [_jsx("title", { children: ariaLabel }), _jsxs("defs", { children: [_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 }) })] }), _jsx("g", { clipPath: `url(#${clipId}-past)`, children: renderBands(0.85) }), todayFraction !== undefined && (_jsx("g", { "data-testid": "chart-forecast-region", clipPath: `url(#${clipId}-future)`, children: renderBands(0.3) })), 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: formatBucketLabel(atMs) }, atMs))) })) : (_jsxs("div", { className: "mt-1 flex justify-between text-[11px] text-muted-foreground", children: [_jsx("span", { children: formatBucketLabel(windowStartMs) }), _jsx("span", { children: formatBucketLabel(windowEndMs) })] })), markers !== undefined && markers.length > 0 && (_jsx(MarkerPins, { markers: markers, windowStartMs: windowStartMs, windowEndMs: windowEndMs }))] }));
+    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: "block h-32 w-full", role: "img", "aria-label": ariaLabel, children: [_jsx("title", { children: ariaLabel }), _jsxs("defs", { children: [_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 }) })] }), _jsx("g", { clipPath: `url(#${clipId}-past)`, children: renderBands(0.85) }), todayFraction !== undefined && (_jsx("g", { "data-testid": "chart-forecast-region", clipPath: `url(#${clipId}-future)`, children: renderBands(0.3) })), 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: formatBucketLabel(atMs) }, atMs))) })) : (_jsxs("div", { className: "mt-1 flex justify-between text-[11px] text-muted-foreground", children: [_jsx("span", { children: formatBucketLabel(windowStartMs) }), _jsx("span", { children: formatBucketLabel(windowEndMs) })] })), markers !== undefined && markers.length > 0 && (_jsx(MarkerPins, { markers: markers, windowStartMs: windowStartMs, windowEndMs: windowEndMs }))] }));
     return (_jsxs("div", { "data-testid": testId, className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx(YTicks, { max: max, formatValue: formatValue, className: cn("h-32 pb-0", 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 }))] }), _jsx(ChartLegend, { formatValue: formatValue, items: series.map((s, i) => ({
-                    key: s.key,
-                    label: s.label,
-                    color: chartColor(s.key, i, tones),
-                    total: seriesTotal(s),
-                })) }), markers !== undefined && markers.length > 0 && (_jsx(MarkerLegend, { markers: markers, formatMarkerTime: formatMarkerTime }))] }));
+                            }, children: plot }) })) : (_jsx("div", { className: "relative grow", children: plot }))] }), _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.key,
+                        label: line.label,
+                        color: line.color,
+                        swatch: line.dashed ? "dashed-line" : "line",
+                    })),
+                ] }), markers !== undefined && markers.length > 0 && (_jsx(MarkerLegend, { markers: markers, formatMarkerTime: formatMarkerTime }))] }));
 }

package/dist/widgets/progress-list.d.ts

@@ -4,6 +4,8 @@ export type ProgressListRow = {
     readonly label: string;
     readonly value: string;
     readonly fraction: number;
+    /** Small line under the bar, e.g. "42 % repaid". */
+    readonly sub?: string;
 };
 /** Liste aus Label/Wert-Kopfzeile + Fortschrittsbalken pro Eintrag (z.B.
  *  Tilgungsfortschritt pro Kredit). */

package/dist/widgets/progress-list.js

@@ -6,5 +6,5 @@ export function ProgressList({ rows, emptyContent, testId, }) {
     if (rows.length === 0) {
         return _jsx("div", { "data-testid": testId, children: emptyContent });
     }
-    return (_jsx("ul", { "data-testid": testId, className: "flex max-h-64 flex-col gap-3 overflow-y-auto pr-1", children: rows.map((row) => (_jsxs("li", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-2 text-sm", children: [_jsx("span", { className: "font-medium", children: row.label }), _jsx("span", { className: "tabular-nums text-muted-foreground", children: row.value })] }), _jsx(ProgressBar, { value: row.fraction })] }, row.id))) }));
+    return (_jsx("ul", { "data-testid": testId, className: "flex max-h-64 flex-col gap-3 overflow-y-auto pr-1", children: rows.map((row) => (_jsxs("li", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-2 text-sm", children: [_jsx("span", { className: "font-medium", children: row.label }), _jsx("span", { className: "tabular-nums text-muted-foreground", children: row.value })] }), _jsx(ProgressBar, { value: row.fraction }), row.sub !== undefined && _jsx("div", { className: "text-xs text-muted-foreground", children: row.sub })] }, row.id))) }));
 }

package/dist/widgets/stat.d.ts

@@ -28,11 +28,14 @@ export declare function StatCard({ icon, label, value, sub, tone, accentColor, d
 }): ReactNode;
 /** Flat KPI cell for a strip (divider instead of card): label, value with
  *  sparkline beside it, sub line. */
-export declare function StatStripCell({ label, value, sub, tone, delta, spark, testId, }: {
+export declare function StatStripCell({ icon, label, value, sub, tone, accentColor, delta, spark, testId, }: {
+    /** Chip before the label, colored like StatCard's (`accentColor` or the tone). */
+    readonly icon?: ReactNode;
     readonly label: string;
     readonly value: string;
     readonly sub?: string;
     readonly tone?: StatTone;
+    readonly accentColor?: string;
     readonly delta?: StatDelta;
     readonly spark?: readonly number[];
     readonly testId?: string;

package/dist/widgets/stat.js

@@ -32,6 +32,14 @@ export function Sparkline({ points, className, }) {
         .join(" ");
     return (_jsxs("svg", { viewBox: `0 0 ${w} ${h}`, preserveAspectRatio: "none", className: className ?? "h-7 w-full", "aria-hidden": "true", children: [_jsx("path", { d: `${line} L${w},${h} L0,${h} Z`, fill: "currentColor", fillOpacity: 0.12 }), _jsx("path", { d: line, fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" })] }));
 }
+function StatIconChip({ icon, tone, accentColor, }) {
+    return (_jsx("span", { className: cn("flex size-7 shrink-0 items-center justify-center rounded-lg", accentColor === undefined && TONE_CHIP[tone]), style: accentColor === undefined
+            ? undefined
+            : {
+                color: accentColor,
+                backgroundColor: `color-mix(in srgb, ${accentColor} 12%, transparent)`,
+            }, children: icon }));
+}
 /** Icon-tragende Kennzahl-Kachel mit optionalem Delta-Chip, Trend-Zeile
  *  und Sparkline. `icon` ist ein fertiger Knoten (App liefert ihr SVG). */
 export function StatCard({ icon, label, value, sub, tone = "default", accentColor, delta, trend, spark, testId, children, }) {
@@ -40,17 +48,12 @@ export function StatCard({ icon, label, value, sub, tone = "default", accentColo
     // a whole-section frame) — an extension section mounting several of
     // these renders a grid of tiles inside its own host Card, not a
     // duplicate outer frame around the section's full content.
-    return (_jsxs(Card, { options: { padded: false }, className: "p-4", testId: testId, children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-x-2 gap-y-1", children: [_jsxs("div", { className: "flex min-w-0 flex-1 basis-[7rem] items-center gap-2 text-muted-foreground", children: [icon !== undefined && (_jsx("span", { className: cn("flex size-7 items-center justify-center rounded-lg", accentColor === undefined && TONE_CHIP[tone]), style: accentColor === undefined
-                                    ? undefined
-                                    : {
-                                        color: accentColor,
-                                        backgroundColor: `color-mix(in srgb, ${accentColor} 12%, transparent)`,
-                                    }, children: icon })), _jsx("span", { title: label, className: "min-w-0 line-clamp-2 text-xs font-medium", children: label })] }), delta !== undefined && (_jsxs("span", { className: cn("inline-flex shrink-0 items-center gap-0.5 whitespace-nowrap rounded-full px-1.5 py-0.5 text-xs font-medium tabular-nums", TONE_CHIP[delta.tone ?? tone]), children: [delta.direction === "up" ? "↑" : "↓", delta.value] }))] }), _jsx("div", { className: "mt-2 text-xl font-semibold tabular-nums text-foreground", children: value }), sub !== undefined && _jsx("div", { className: "mt-0.5 text-xs text-muted-foreground", children: sub }), trend !== undefined && (_jsx("div", { className: "mt-0.5 text-xs font-medium text-foreground/80", children: trend })), spark !== undefined && (_jsx(Sparkline, { points: spark, className: cn("mt-2 h-7 w-full", TONE_VALUE[tone]) })), children !== undefined && _jsx("div", { className: "mt-3", children: children })] }));
+    return (_jsxs(Card, { options: { padded: false }, className: "p-4", testId: testId, children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-x-2 gap-y-1", children: [_jsxs("div", { className: "flex min-w-0 flex-1 basis-[7rem] items-center gap-2 text-muted-foreground", children: [icon !== undefined && _jsx(StatIconChip, { icon: icon, tone: tone, accentColor: accentColor }), _jsx("span", { title: label, className: "min-w-0 line-clamp-2 text-xs font-medium", children: label })] }), delta !== undefined && (_jsxs("span", { className: cn("inline-flex shrink-0 items-center gap-0.5 whitespace-nowrap rounded-full px-1.5 py-0.5 text-xs font-medium tabular-nums", TONE_CHIP[delta.tone ?? tone]), children: [delta.direction === "up" ? "↑" : "↓", delta.value] }))] }), _jsx("div", { className: "mt-2 text-xl font-semibold tabular-nums text-foreground", children: value }), sub !== undefined && _jsx("div", { className: "mt-0.5 text-xs text-muted-foreground", children: sub }), trend !== undefined && (_jsx("div", { className: "mt-0.5 text-xs font-medium text-foreground/80", children: trend })), spark !== undefined && (_jsx(Sparkline, { points: spark, className: cn("mt-2 h-7 w-full", TONE_VALUE[tone]) })), children !== undefined && _jsx("div", { className: "mt-3", children: children })] }));
 }
 /** Flat KPI cell for a strip (divider instead of card): label, value with
  *  sparkline beside it, sub line. */
-export function StatStripCell({ label, value, sub, tone = "default", delta, spark, testId, }) {
-    return (_jsxs("div", { "data-testid": testId, className: "flex min-w-0 flex-col gap-1 px-4 py-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: label }), delta !== undefined && (_jsxs("span", { className: cn("inline-flex items-center gap-0.5 rounded-full px-1.5 py-0.5 text-xs font-medium tabular-nums", TONE_CHIP[delta.tone ?? tone]), children: [delta.direction === "up" ? "↑" : "↓", delta.value] }))] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: cn("text-xl font-semibold tabular-nums", TONE_VALUE[tone]), children: value }), spark !== undefined && (_jsx(Sparkline, { points: spark, className: cn("h-7 w-20 shrink-0", TONE_VALUE[tone]) }))] }), sub !== undefined && _jsx("div", { className: "text-xs text-muted-foreground", children: sub })] }));
+export function StatStripCell({ icon, label, value, sub, tone = "default", accentColor, delta, spark, testId, }) {
+    return (_jsxs("div", { "data-testid": testId, className: "flex min-w-0 flex-col gap-1 px-4 py-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2 text-xs font-medium text-muted-foreground", children: [icon !== undefined && _jsx(StatIconChip, { icon: icon, tone: tone, accentColor: accentColor }), _jsx("span", { children: label })] }), delta !== undefined && (_jsxs("span", { className: cn("inline-flex items-center gap-0.5 rounded-full px-1.5 py-0.5 text-xs font-medium tabular-nums", TONE_CHIP[delta.tone ?? tone]), children: [delta.direction === "up" ? "↑" : "↓", delta.value] }))] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: cn("text-xl font-semibold tabular-nums", TONE_VALUE[tone]), children: value }), spark !== undefined && (_jsx(Sparkline, { points: spark, className: cn("h-7 w-20 shrink-0", TONE_VALUE[tone]) }))] }), sub !== undefined && _jsx("div", { className: "text-xs text-muted-foreground", children: sub })] }));
 }
 /** Kompakte Kennzahl-Kachel (ohne Icon) — für dichte KPI-Raster.
  *  StatCard ist die icon-tragende Variante. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.350.0",
+  "version": "0.351.0",
   "description": "Web-platform bindings for @cosmicdrift/kumiko-renderer. HTML default-primitives, browser history-based navigation, EventSource-backed live events, and a one-call createKumikoApp that mounts the whole stack via react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -20,11 +20,11 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.350.0",
-    "@cosmicdrift/kumiko-framework": "0.350.0",
-    "@cosmicdrift/kumiko-headless": "0.350.0",
-    "@cosmicdrift/kumiko-renderer": "0.350.0",
-    "@cosmicdrift/kumiko-types": "0.350.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.351.0",
+    "@cosmicdrift/kumiko-framework": "0.351.0",
+    "@cosmicdrift/kumiko-headless": "0.351.0",
+    "@cosmicdrift/kumiko-renderer": "0.351.0",
+    "@cosmicdrift/kumiko-types": "0.351.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -72,7 +72,7 @@
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
     "tailwindcss": "^4.3.0",
-    "@cosmicdrift/kumiko-locale-de": "0.350.0"
+    "@cosmicdrift/kumiko-locale-de": "0.351.0"
   },
   "repository": {
     "type": "git",

package/src/changes.json

@@ -1,4 +1,15 @@
 [
+  {
+    "version": "0.351.0",
+    "type": "improvement",
+    "title": "Dashboard panels take visibleWhen; stat-group subtitle and strip icons, progress-list sub line, stacked-area lines, markerKinds, seriesColors, legendTotals and ranges",
+    "detail": "Dashboard panel gates, stat-group subtitle, progress sub line, stacked-area lines, marker kinds and ranges\n`stat`, `stat-group`, `chart`, `list`, `feed` and `progress-list` panels take `visibleWhen` (`DashboardPanelGate`), like `screen` panels. The gate query gets the screen filter and time range. The panel renders nothing while the gate loads or is unmet, and shows an error with retry when the gate query fails. Panels with the same gate query and payload share one live request. The boot validator checks the gate query and field and rejects `visibleWhen` on stat-group children.\nA labeled `stat-group` takes a `subtitle`. In an unlabeled group (KPI strip) each child keeps its `icon` and `accentColor`. `progress-list` rows take an optional `sub` (`DashboardText`) shown under the bar.\n`stacked-area` results can carry `lines` (`{ key, label, points, dashed? }`, drawn unstacked over the bands) and `markers[].kind`. New chart options: `seriesColors` (key to CSS color, wins over `seriesTones`), and only for stacked-area `markerKinds` (kind to `{ tone }` or `{ color }`: colored pin plus dashed guide line), `legendTotals: false` and `ranges` (a range switch in the panel header that windows bands, lines and markers by `months`). `StackedAreaChart` gets `lines`, `colors` and `showLegendTotals`; `ChartMarker` gets `color`."
+  },
+  {
+    "version": "0.351.0",
+    "type": "fix",
+    "title": "Tabbed projectionDetail panels taller than the viewport scroll again"
+  },
   {
     "version": "0.350.0",
     "type": "improvement",