@cosmicdrift/kumiko-renderer-web 0.348.1 → 0.349.0

package/dist/app/dashboard-body.js

@@ -4,6 +4,7 @@ import { dispatcherErrorText, EmbeddedScreenProvider, evalVisibleWhen, extension
 import { createContext, useContext, useEffect, useMemo, useState } from "react";
 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 { DashboardListTable } from "../widgets/dashboard-list.js";
@@ -41,7 +42,14 @@ function useDashboardFormats() {
         timeStyle: "short",
         timeZone,
     });
+    const medium = new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeZone });
+    const formatMinor = (amountMinor, currency, fractionDigits) => formatMoney(amountMinor, currency, locale, fractionDigits);
     return {
+        formatMedium: (atMs) => medium.format(atMs),
+        formatMinor,
+        formatPanelValue: (valueFormat) => valueFormat === undefined
+            ? (value) => number.format(value)
+            : (value) => formatMinor(value, valueFormat.currency, valueFormat.fractionDigits),
         formatNumber: (value) => number.format(value),
         formatPercent: (fraction) => percent.format(fraction),
         formatDay: (atMs) => day.format(atMs),
@@ -49,6 +57,65 @@ function useDashboardFormats() {
         formatDateTime: (atMs) => dateTime.format(atMs),
     };
 }
+const MAX_TEXT_PARAM_DEPTH = 4;
+function isRecord(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function isDashboardI18nText(value) {
+    return isRecord(value) && typeof value["i18nKey"] === "string";
+}
+function isMoneyParam(value) {
+    return (isRecord(value) &&
+        value["kind"] === "money" &&
+        typeof value["amountMinor"] === "number" &&
+        typeof value["currency"] === "string");
+}
+function isDateParam(value) {
+    return isRecord(value) && value["kind"] === "date" && typeof value["atMs"] === "number";
+}
+function isTextParam(value) {
+    return (typeof value === "string" ||
+        typeof value === "number" ||
+        isDashboardI18nText(value) ||
+        isMoneyParam(value) ||
+        isDateParam(value));
+}
+function resolveTextParam(param, translate, formats, depth) {
+    if (typeof param === "string" || typeof param === "number")
+        return param;
+    if (isMoneyParam(param))
+        return formats.formatMinor(param.amountMinor, param.currency);
+    if (isDateParam(param))
+        return formats.formatMedium(param.atMs);
+    if (isDashboardI18nText(param)) {
+        // Too deep: show the key instead of recursing further.
+        return depth >= MAX_TEXT_PARAM_DEPTH
+            ? param.i18nKey
+            : resolveI18nText(param, translate, formats, depth + 1);
+    }
+    return "";
+}
+function resolveI18nText(text, translate, formats, depth) {
+    if (text.i18nParams === undefined)
+        return translate(text.i18nKey);
+    const params = {};
+    for (const [name, param] of Object.entries(text.i18nParams)) {
+        if (isTextParam(param))
+            params[name] = resolveTextParam(param, translate, formats, depth);
+    }
+    return translate(text.i18nKey, params);
+}
+/** Plain strings pass through; DashboardI18nText is translated (nested params first).
+ *  Anything else yields undefined so callers fall back to their own placeholder. */
+function resolveDashboardText(value, translate, formats) {
+    if (typeof value === "string")
+        return value;
+    if (typeof value === "number")
+        return String(value);
+    if (isDashboardI18nText(value))
+        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 })] }));
 }
@@ -100,8 +167,13 @@ function readSparkline(panel, record) {
 function readTone(raw) {
     return typeof raw === "string" && STAT_TONES.has(raw) ? raw : undefined;
 }
-function StatPanelBody({ panel, label, screenId, screenParams, variant, }) {
-    const { formatNumber } = useDashboardFormats();
+function fallbackText(raw, placeholder) {
+    if (raw === undefined || raw === null || isRecord(raw))
+        return placeholder;
+    return String(raw);
+}
+function StatPanelBody({ panel, label, screenId, screenParams, translate, variant, }) {
+    const formats = useDashboardFormats();
     // Resolved HERE (not in a separate always-rendered child) so `icon` on
     // <StatCard> is `undefined` — not a React element that renders empty —
     // when the icon name isn't registered. StatCard gates its accent chip on
@@ -129,10 +201,12 @@ function StatPanelBody({ panel, label, screenId, screenParams, variant, }) {
         (rawValue === 0 ? undefined : panel.tone);
     const sub = panel.subField !== undefined ? record[panel.subField] : undefined;
     const delta = readDelta(panel, record);
-    const value = typeof rawValue === "number" ? formatNumber(rawValue) : String(rawValue ?? "—");
+    const value = typeof rawValue === "number"
+        ? formats.formatPanelValue(panel.valueFormat)(rawValue)
+        : (resolveDashboardText(rawValue, translate, formats) ?? fallbackText(rawValue, "—"));
     const spark = readSparkline(panel, record);
     const testId = `dashboard-panel-${panel.id}`;
-    const subText = sub !== undefined && sub !== null ? String(sub) : undefined;
+    const subText = resolveDashboardText(sub, translate, formats) ?? fallbackText(sub, 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 }));
     }
@@ -153,9 +227,15 @@ function readDelta(panel, record) {
 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, variant: "strip" }, stat.id))) }));
+        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, variant: "card" }, 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))) }) }));
+}
+function resolveMarkers(markers, translate, formats) {
+    return markers?.map((marker) => ({
+        atMs: marker.atMs,
+        label: resolveDashboardText(marker.label, translate, formats) ?? "",
+    }));
 }
 // A plain bar chart ("changes per day") ships `points` without `series`.
 const SINGLE_SERIES_KEY = "value";
@@ -196,12 +276,14 @@ function ChartPanelBody({ panel, label, screenParams, translate, }) {
     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 series = chartSeries(data, label, translate);
             const { startMs, endMs } = windowOf(data, series);
+            const markers = resolveMarkers(data.markers, translate, formats);
+            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: formats.formatNumber, testId: testId }));
+                    })), tones: tones, ariaLabel: label, formatValue: formatValue, testId: testId }));
             }
             if (panel.chart === "stacked-bars") {
                 const times = series.flatMap((s) => s.points.map((p) => p.atMs));
@@ -211,13 +293,15 @@ 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: formats.formatNumber, testId: testId }));
+                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 }));
             }
             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: data.markers, ariaLabel: label, todayLabel: todayLabel, formatBucketLabel: formats.formatDay, formatValue: formats.formatNumber, formatMarkerTime: formats.formatDay, testId: testId }));
+                        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 }));
             }
-            return (_jsx(TimeseriesChart, { points: data.points ?? [], windowStartMs: startMs, windowEndMs: endMs, markers: data.markers, formatMarkerTime: formats.formatDay, ariaLabel: label, 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 },
+                }), ariaLabel: label, testId: testId }));
         } }));
 }
 function ListPanelBody({ panel, label, screenParams, translate, }) {
@@ -236,19 +320,27 @@ function ListPanelBody({ panel, label, screenParams, translate, }) {
     return (_jsx(QueryPanel, { panel: panel, label: label, screenParams: screenParams, translate: translate, skeleton: "rows", isEmpty: (data) => (data.rows ?? []).length === 0, children: (data) => (_jsx(DashboardListTable, { columns: columns, rows: data.rows ?? [], formatPercent: formatPercent, formatNumber: formatNumber, formatDateTime: formatDateTime, translate: translate })) }));
 }
 function FeedPanelBody({ 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),
-                ...row,
-            }));
+            const rows = (data.rows ?? []).map((row, i) => {
+                const trailing = resolveDashboardText(row.trailing, translate, formats);
+                return {
+                    id: String(i),
+                    primary: resolveDashboardText(row.primary, translate, formats) ?? "—",
+                    ...(trailing !== undefined && { trailing }),
+                };
+            });
             return _jsx(FeedList, { rows: rows });
         } }));
 }
 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),
-                ...row,
+                label: resolveDashboardText(row.label, translate, formats) ?? "—",
+                value: resolveDashboardText(row.value, translate, formats) ?? "—",
+                fraction: row.fraction,
             }));
             return _jsx(ProgressList, { rows: rows });
         } }));
@@ -333,7 +425,7 @@ function PanelBody({ panel, label, screenId, screenParams, translate, }) {
     }
     const text = label ?? "";
     if (panel.kind === "stat") {
-        return (_jsx(StatPanelBody, { panel: panel, label: text, screenId: screenId, screenParams: screenParams, variant: "card" }));
+        return (_jsx(StatPanelBody, { panel: panel, label: text, screenId: screenId, screenParams: screenParams, translate: translate, variant: "card" }));
     }
     if (panel.kind === "chart") {
         return (_jsx(ChartPanelBody, { panel: panel, label: text, screenParams: screenParams, translate: translate }));

package/dist/primitives/money-input.d.ts

@@ -14,4 +14,4 @@ export type MoneyInputProps = {
     readonly hasError?: boolean;
 };
 export declare function MoneyInput({ id, name, value, onChange, currency, locale, disabled, required, hasError, }: MoneyInputProps): ReactNode;
-export declare function formatMoney(amountMinor: number, currency: string, locale?: string): string;
+export declare function formatMoney(amountMinor: number, currency: string, locale?: string, fractionDigits?: number): string;

package/dist/primitives/money-input.js

@@ -88,16 +88,17 @@ export function MoneyInput({ id, name, value, onChange, currency, locale, disabl
 // rehydrateMoney) throws a RangeError inside Intl.NumberFormat, and with
 // no ErrorBoundary in this render tree that would take down the whole
 // page instead of just this cell.
-export function formatMoney(amountMinor, currency, locale) {
+export function formatMoney(amountMinor, currency, locale, fractionDigits) {
     if (!/^[A-Za-z]{3}$/.test(currency))
         return String(amountMinor);
     const decimals = currencyDecimals(currency);
+    const displayDigits = fractionDigits ?? decimals;
     const resolvedLocale = resolveSafeLocale(locale);
     return new Intl.NumberFormat(resolvedLocale, {
         style: "currency",
         currency,
-        minimumFractionDigits: decimals,
-        maximumFractionDigits: decimals,
+        minimumFractionDigits: displayDigits,
+        maximumFractionDigits: displayDigits,
     }).format(amountMinor / 10 ** decimals);
 }
 // The currency symbol is rendered as a separate adornment, so the field

package/dist/widgets/charts.d.ts

@@ -133,7 +133,7 @@ export declare function SegmentBarChart({ rows, tones, ariaLabel, formatValue, t
 }): 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, emptyContent, testId, }: {
+export declare function StackedAreaChart({ series, windowStartMs, windowEndMs, todayMs, tones, markers, ariaLabel, todayLabel, formatBucketLabel, formatValue, formatMarkerTime, scrollable, emptyContent, testId, }: {
     readonly series: readonly ChartSeries[];
     readonly windowStartMs: number;
     readonly windowEndMs: number;
@@ -145,6 +145,8 @@ export declare function StackedAreaChart({ series, windowStartMs, windowEndMs, t
     readonly formatBucketLabel: (atMs: number) => string;
     readonly formatValue?: (value: number) => string;
     readonly formatMarkerTime?: (atMs: number) => string;
+    /** Fixed width per bucket; the plot scrolls horizontally, y ticks stay put. */
+    readonly scrollable?: boolean;
     readonly emptyContent?: ReactNode;
     readonly testId?: string;
 }): ReactNode;

package/dist/widgets/charts.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from "react";
+import { useEffect, useId, useRef } from "react";
 import { cn } from "../lib/cn.js";
 import { STATUS_TONE_TEXT } from "./status-badge.js";
 // Inline-SVG-Charts — kein Chart-Dep. Farben ausschließlich über die
@@ -241,17 +241,35 @@ function MarkerPins({ markers, windowStartMs, windowEndMs, }) {
 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}`))) }));
 }
+const SCROLLABLE_BUCKET_WIDTH_PX = 48;
+function bucketLabelTransform(index, count) {
+    if (index === 0)
+        return "";
+    return index === count - 1 ? "-translate-x-full" : "-translate-x-1/2";
+}
 /** 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, emptyContent, testId, }) {
+export function StackedAreaChart({ series, windowStartMs, windowEndMs, todayMs, tones, markers, ariaLabel, todayLabel, formatBucketLabel, formatValue = String, formatMarkerTime, scrollable = false, emptyContent, testId, }) {
     const clipId = useId();
+    const scrollRef = useRef(null);
     const times = bucketTimes(series);
+    const bucketCount = times.length;
+    const span = Math.max(1, windowEndMs - windowStartMs);
+    const fractionOf = (atMs) => Math.max(0, Math.min(1, (atMs - windowStartMs) / span));
+    const todayFraction = todayMs !== undefined ? fractionOf(todayMs) : undefined;
+    useEffect(() => {
+        const el = scrollRef.current;
+        if (!scrollable || el === null || bucketCount === 0)
+            return;
+        el.scrollLeft =
+            todayFraction === undefined
+                ? el.scrollWidth
+                : Math.max(0, todayFraction * el.scrollWidth - el.clientWidth / 2);
+    }, [scrollable, todayFraction, bucketCount]);
     if (times.length === 0)
         return _jsx("div", { "data-testid": testId, children: emptyContent });
     const width = 300;
     const height = 120;
-    const span = Math.max(1, windowEndMs - windowStartMs);
-    const fractionOf = (atMs) => Math.max(0, Math.min(1, (atMs - windowStartMs) / span));
     const totals = times.map((atMs) => series.reduce((sum, s) => sum + valueAt(s, atMs), 0));
     const isSingleBucket = times.length === 1;
     // Doubling keeps a lone bucket away from the top edge of the y-scale.
@@ -275,10 +293,13 @@ export function StackedAreaChart({ series, windowStartMs, windowEndMs, todayMs,
             dot: isSingleBucket && bucketHeight > 0 ? clampDotY(yOf(bucketTop), height) : undefined,
         };
     });
-    const todayFraction = todayMs !== undefined ? fractionOf(todayMs) : 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)));
-    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: "h-32 pb-0" }), _jsxs("div", { className: "relative grow", 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" }))] }), _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 }))] })] }), _jsx(ChartLegend, { formatValue: formatValue, items: series.map((s, i) => ({
+    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 }))] }));
+    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),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.348.1",
+  "version": "0.349.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.348.1",
-    "@cosmicdrift/kumiko-framework": "0.348.1",
-    "@cosmicdrift/kumiko-headless": "0.348.1",
-    "@cosmicdrift/kumiko-renderer": "0.348.1",
-    "@cosmicdrift/kumiko-types": "0.348.1",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.349.0",
+    "@cosmicdrift/kumiko-framework": "0.349.0",
+    "@cosmicdrift/kumiko-headless": "0.349.0",
+    "@cosmicdrift/kumiko-renderer": "0.349.0",
+    "@cosmicdrift/kumiko-types": "0.349.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.348.1"
+    "@cosmicdrift/kumiko-locale-de": "0.349.0"
   },
   "repository": {
     "type": "git",

package/src/changes.json

@@ -1,4 +1,10 @@
 [
+  {
+    "version": "0.349.0",
+    "type": "improvement",
+    "title": "Dashboard panel texts are translatable (i18nKey/i18nParams with nested, money and date params), panels get a currency valueFormat and stacked-area charts can scroll",
+    "detail": "Dashboard panels: translatable texts, currency format, scrollable stacked-area\nQuery handlers can send `{ i18nKey, i18nParams? }` (`DashboardI18nText`) wherever a dashboard panel shows text: stat value and sub line, feed `primary`/`trailing`, progress-list `label`/`value`, chart marker labels. Plain strings are shown unchanged. Params may be strings, numbers, nested `DashboardI18nText` (resolved first, e.g. a duration built from two plural keys), `{ kind: \"money\", amountMinor, currency }` (user locale) or `{ kind: \"date\", atMs }` (medium date, user time zone).\n`valueFormat: { kind: \"currency\", currency, fractionDigits? }` on stat and chart panels formats minor-unit values as currency in stat values, y ticks, legend totals and tooltips. `scrollable: true` on a `stacked-area` chart gives each bucket a fixed width, scrolls the plot horizontally with the y ticks fixed on the left, and opens at \"today\". The boot validator rejects an invalid currency code, `fractionDigits` outside 0..4 and `scrollable` on other chart kinds. `formatMoney` takes an optional `fractionDigits`."
+  },
   {
     "version": "0.342.0",
     "type": "improvement",