@cosmicdrift/kumiko-renderer-web 0.350.0 → 0.352.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)
@@ -224,18 +225,51 @@ function readDelta(panel, record) {
     const tone = readTone(panel.deltaToneField !== undefined ? record[panel.deltaToneField] : undefined);
     return { value: String(value), direction, ...(tone !== undefined && { tone }) };
 }
+function labeledGroupColumns(valueCount) {
+    if (valueCount <= 1)
+        return "";
+    return valueCount === 2 ? "sm:grid-cols-2" : "sm:grid-cols-3";
+}
 function StatGroupPanelBody({ panel, label, screenId, screenParams, translate, }) {
     const testId = `dashboard-panel-${panel.id}`;
     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 ${labeledGroupColumns(panel.stats.length)}`, children: panel.stats.map((stat) => (_jsx(StatPanelBody, { panel: stat, label: translate(stat.label), screenId: screenId, screenParams: screenParams, translate: translate, variant: "card" }, stat.id))) }) }));
+}
+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 resolveMarkers(markers, translate, formats) {
-    return markers?.map((marker) => ({
-        atMs: marker.atMs,
-        label: resolveDashboardText(marker.label, translate, formats) ?? "",
-    }));
+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 +306,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 +334,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 +391,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 +498,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 +595,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 +603,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/layout/nav-tree.js

@@ -468,11 +468,12 @@ export function buildNavRegistrySliceForApp(app, allowedNavQns) {
             });
         }
     }
+    const existing = dropNavsWithNonexistentParent(qualified);
     // Workspace filter: drop nav entries whose qualified id isn't in the
     // allow-set. A child whose parent gets dropped surfaces as a top-level
     // entry — the workspace owner should list parents explicitly if they
     // want the grouping preserved.
-    const filtered = allowedNavQns !== undefined ? qualified.filter((n) => allowedNavQns.has(n.id)) : qualified;
+    const filtered = allowedNavQns !== undefined ? existing.filter((n) => allowedNavQns.has(n.id)) : existing;
     const allowedQnSet = new Set(filtered.map((n) => n.id));
     const topLevel = [];
     const byParentMap = new Map();
@@ -495,6 +496,18 @@ export function buildNavRegistrySliceForApp(app, allowedNavQns) {
         byParent: (parent) => byParentMap.get(parent) ?? [],
     };
 }
+// A parent absent from the (role-projected) schema is not a workspace
+// filter result: the child must not leak to the top level. Transitive.
+function dropNavsWithNonexistentParent(navs) {
+    let current = [...navs];
+    for (;;) {
+        const ids = new Set(current.map((n) => n.id));
+        const kept = current.filter((n) => n.parent === undefined || ids.has(n.parent));
+        if (kept.length === current.length)
+            return current;
+        current = kept;
+    }
+}
 // Exported (not part of the package's public index.ts surface) so other
 // modules under layout/ — e.g. filter-app-schema-navs.ts — qualify nav ids
 // the same way instead of keeping a second copy in sync.

package/dist/primitives/combobox.d.ts

@@ -6,6 +6,8 @@ export type ComboboxOption = {
     readonly description?: string;
     /** Group heading; see `groupOptions` for the ordering rule. */
     readonly group?: string;
+    /** Visible but not choosable. */
+    readonly disabled?: boolean;
 };
 type ComboboxBaseProps = {
     readonly id: string;

package/dist/primitives/combobox.js

@@ -105,7 +105,7 @@ export function ComboboxInput(props) {
                                             const isSelected = multiple
                                                 ? selectedValues.has(opt.value)
                                                 : opt.value === singleValue;
-                                            return (_jsxs(Command.Item, { "data-testid": `combobox-${id}-option-${opt.value}`, value: opt.label, keywords: opt.description !== undefined ? [opt.description] : undefined, onSelect: () => {
+                                            return (_jsxs(Command.Item, { "data-testid": `combobox-${id}-option-${opt.value}`, value: opt.label, keywords: opt.description !== undefined ? [opt.description] : undefined, disabled: opt.disabled, onSelect: () => {
                                                     if (props.multiple === true) {
                                                         toggleMulti(opt.value);
                                                     }
@@ -117,7 +117,7 @@ export function ComboboxInput(props) {
                                                 // No pointer-events toggles on the item: with Tailwind active,
                                                 // `data-[disabled]:pointer-events-none` silently swallowed mouse
                                                 // clicks (keyboard select still worked, jsdom tests stayed green).
-                                                className: "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground", children: [isSelected && (_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(Check, { className: "h-4 w-4" }) })), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { children: opt.label }), opt.description !== undefined && (_jsx("span", { className: "text-xs text-muted-foreground", children: opt.description }))] })] }, opt.value));
+                                                className: cn("relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground", opt.disabled === true && "cursor-not-allowed opacity-50"), children: [isSelected && (_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(Check, { className: "h-4 w-4" }) })), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { children: opt.label }), opt.description !== undefined && (_jsx("span", { className: "text-xs text-muted-foreground", children: opt.description }))] })] }, opt.value));
                                         });
                                         return section.heading === undefined ? (items) : (_jsx(Command.Group, { heading: section.heading, className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground", children: items }, section.heading));
                                     })] }), onCreate !== undefined && (_jsxs("button", { type: "button", "data-testid": `combobox-${id}-create`, onClick: () => {

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

@@ -257,21 +257,30 @@ function SegmentedSelect({ id, name, value, onChange, options, disabled, require
         onChange(target.value);
         buttonRefs.current[index]?.focus();
     };
+    // Arrow keys skip disabled segments; with none enabled they stay put.
+    const nextEnabledIndex = (from, step) => {
+        for (let hop = 1; hop <= options.length; hop++) {
+            const candidate = (from + step * hop + options.length * hop) % options.length;
+            if (options[candidate]?.disabled !== true)
+                return candidate;
+        }
+        return from;
+    };
     const handleKeyDown = (e, index) => {
         if (e.key === "ArrowRight" || e.key === "ArrowDown") {
             e.preventDefault();
-            selectAt((index + 1) % options.length);
+            selectAt(nextEnabledIndex(index, 1));
         }
         else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
             e.preventDefault();
-            selectAt((index - 1 + options.length) % options.length);
+            selectAt(nextEnabledIndex(index, -1));
         }
     };
     return (_jsxs("div", { role: "radiogroup", "aria-labelledby": fieldLabelId(id), "aria-required": required, "aria-invalid": hasError === true ? true : undefined, "data-testid": `segmented-${id}`, className: cn("inline-flex min-h-9 w-fit flex-wrap overflow-hidden rounded-md border", hasError === true ? "border-destructive" : "border-input"), children: [_jsx("input", { type: "hidden", name: name, value: value }), options.map((opt, index) => {
                 const checked = opt.value === value;
                 return (_jsx("button", { ref: (node) => {
                         buttonRefs.current[index] = node;
-                    }, type: "button", role: "radio", "aria-checked": checked, tabIndex: index === tabStopIndex ? 0 : -1, disabled: disabled, "data-testid": `segmented-${id}-${opt.value}`, onClick: () => onChange(opt.value), onKeyDown: (e) => handleKeyDown(e, index), className: cn(
+                    }, type: "button", role: "radio", "aria-checked": checked, tabIndex: index === tabStopIndex ? 0 : -1, disabled: disabled === true || opt.disabled === true, "data-testid": `segmented-${id}-${opt.value}`, onClick: () => onChange(opt.value), onKeyDown: (e) => handleKeyDown(e, index), className: cn(
                     // Per-segment top/left border instead of the container's
                     // `divide-x`: divide-x only draws verticals between siblings
                     // in source order, which misplaces borders the moment a
@@ -302,7 +311,7 @@ function RadioListSelect({ id, name, value, onChange, options, variant = "list",
     const descriptionIdOf = (opt) => `${id}-option-${options.findIndex((o) => o.value === opt.value)}-description`;
     return (_jsx("div", { role: "radiogroup", "aria-labelledby": fieldLabelId(id), "aria-required": required, "aria-invalid": hasError === true ? true : undefined, "data-testid": `radio-list-${id}`, "data-radio-list": "", className: "flex flex-col gap-2", children: groupOptions(options).map((section) => (_jsxs(Fragment, { children: [section.heading !== undefined && (_jsx("div", { "data-testid": `radio-list-${id}-group-${section.heading}`, className: "mt-1 text-xs font-medium text-muted-foreground", children: section.heading })), section.options.map((opt) => (_jsxs("label", { className: card
                         ? RADIO_CARD_CLASS
-                        : "flex items-start gap-2 text-sm font-normal text-foreground", children: [_jsx("input", { type: "radio", name: name, value: opt.value, checked: opt.value === value, disabled: disabled, "aria-describedby": opt.description !== undefined ? descriptionIdOf(opt) : undefined, "data-testid": `radio-list-${id}-${opt.value}`, onChange: () => onChange(opt.value), className: cn("size-4 accent-primary", card ? "mt-0.5 shrink-0" : "mt-0.5") }), _jsxs("span", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: cn(card && "font-semibold"), children: opt.label }), opt.description !== undefined && (_jsx("span", { id: descriptionIdOf(opt), className: "text-[13px] text-foreground-secondary", children: opt.description }))] })] }, opt.value)))] }, section.heading ?? ""))) }));
+                        : "flex items-start gap-2 text-sm font-normal text-foreground has-[:disabled]:opacity-50", children: [_jsx("input", { type: "radio", name: name, value: opt.value, checked: opt.value === value, disabled: disabled === true || opt.disabled === true, "aria-describedby": opt.description !== undefined ? descriptionIdOf(opt) : undefined, "data-testid": `radio-list-${id}-${opt.value}`, onChange: () => onChange(opt.value), className: cn("size-4 accent-primary", card ? "mt-0.5 shrink-0" : "mt-0.5") }), _jsxs("span", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: cn(card && "font-semibold"), children: opt.label }), opt.description !== undefined && (_jsx("span", { id: descriptionIdOf(opt), className: "text-[13px] text-foreground-secondary", children: opt.description }))] })] }, opt.value)))] }, section.heading ?? ""))) }));
 }
 // The row count reaches the textarea through an untyped view-model hint, so a
 // sloppy schema can hand over a fraction or a zero — neither renders a sane
@@ -318,6 +327,16 @@ function normalizedTextareaRows(rows) {
 function textareaMinHeight(rows) {
     return { minHeight: `calc(${rows} * 1lh + 1rem + 2px)` };
 }
+function withInlineDisabledHint(option) {
+    if (option.disabled !== true || option.description === undefined)
+        return option;
+    return {
+        value: option.value,
+        label: `${option.label} (${option.description})`,
+        disabled: true,
+        ...(option.group !== undefined && { group: option.group }),
+    };
+}
 function DefaultInput(props) {
     // Vendored ui/input + ui/checkbox stylen Fehler über `aria-invalid`
     // selbst — kein manuelles border-destructive mehr nötig.
@@ -365,6 +384,8 @@ function DefaultInput(props) {
             // 4-Item-Status-Selects vorhanden, das ist eine bewusst akzeptierte
             // UX-Konsequenz für Style-Konsistenz.
             const comboOptions = props.options.map((o) => typeof o === "string" ? { value: o, label: o } : o);
+            // The dropdown shows a disabled option's hint inline, so it stays readable in the trigger and search.
+            const dropdownOptions = comboOptions.map(withInlineDisabledHint);
             // The radio group can't render the unselected placeholder as its own
             // segment, so it counts and renders on the real options only — the
             // dropdown below keeps comboOptions (placeholder included) since it
@@ -392,7 +413,7 @@ function DefaultInput(props) {
             if (presentation === "segmented" && radioGroupOptions.length > 0) {
                 return (_jsx(SegmentedSelect, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, options: radioGroupOptions, ...(props.disabled !== undefined && { disabled: props.disabled }), ...(props.required !== undefined && { required: props.required }), ...(props.hasError !== undefined && { hasError: props.hasError }) }));
             }
-            return (_jsx(ComboboxInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, options: comboOptions, ...(props.disabled !== undefined && { disabled: props.disabled }), ...(props.required !== undefined && { required: props.required }), ...(props.hasError !== undefined && { hasError: props.hasError }) }));
+            return (_jsx(ComboboxInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, options: dropdownOptions, ...(props.disabled !== undefined && { disabled: props.disabled }), ...(props.required !== undefined && { required: props.required }), ...(props.hasError !== undefined && { hasError: props.hasError }) }));
         }
         case "combobox": {
             // Tier 2.1c + Tier 2.7e: Discriminated-Union per `multiple` —
@@ -1828,7 +1849,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.352.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.352.0",
+    "@cosmicdrift/kumiko-framework": "0.352.0",
+    "@cosmicdrift/kumiko-headless": "0.352.0",
+    "@cosmicdrift/kumiko-renderer": "0.352.0",
+    "@cosmicdrift/kumiko-types": "0.352.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.352.0"
   },
   "repository": {
     "type": "git",

package/src/changes.json

@@ -1,4 +1,32 @@
 [
+  {
+    "version": "0.352.0",
+    "type": "improvement",
+    "title": "Stat group span and column count",
+    "detail": "Set span: \"half\" on a stat-group to place two groups side by side."
+  },
+  {
+    "version": "0.352.0",
+    "type": "fix",
+    "title": "The sidebar drops navs whose parent is missing from the role-projected schema instead of promoting them to the top level",
+    "detail": "Navs whose parent does not exist in the app schema are dropped, transitively, instead of being promoted to the top level. A role-projected schema no longer shows an adopted child nav (e.g. AI providers for a TenantAdmin) when its parent section is system-admin only. Children whose parent exists but is filtered out by a workspace allowlist still surface at the top level."
+  },
+  {
+    "version": "0.352.0",
+    "type": "improvement",
+    "title": "Disabled select options are muted and not choosable in dropdown, radio list, radio cards and segmented control"
+  },
+  {
+    "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",