@cosmicdrift/kumiko-renderer-web 0.348.1 → 0.350.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/app/nav.js

@@ -121,25 +121,34 @@ function applySearchParamUpdates(updates) {
     for (const l of listeners)
         l();
 }
-function pushPath(path) {
+// undefined = the caller passed no search params; "" = an explicitly empty query.
+function formatSearch(options) {
+    if (options?.searchParams === undefined)
+        return undefined;
+    const query = new URLSearchParams(options.searchParams).toString();
+    return query === "" ? "" : `?${query}`;
+}
+function pushPath(path, search) {
     if (typeof window === "undefined")
         return;
-    // Nur pushen wenn sich der Pfad wirklich ändert — doppelte navigate()
-    // Aufrufe mit demselben Ziel sollen nicht die History fluten.
-    if (window.location.pathname === path)
+    // Repeated navigate() calls to the same URL must not flood the history.
+    // Without explicit search params the current query counts as unchanged.
+    const unchanged = window.location.pathname === path &&
+        (search === undefined || window.location.search === search);
+    if (unchanged)
         return;
-    window.history.pushState(null, "", path);
+    window.history.pushState(null, "", `${path}${search ?? ""}`);
     for (const l of listeners)
         l();
 }
-function replacePath(path) {
+function replacePath(path, search) {
     if (typeof window === "undefined")
         return;
     // No path-change short-circuit here: callers explicitly chose replace
     // to avoid creating a history entry, even when the URL is identical.
     // (pushPath skips no-op pushes; replacePath honors the call so the
     // entry-stack semantics stay predictable.)
-    window.history.replaceState(null, "", path);
+    window.history.replaceState(null, "", `${path}${search ?? ""}`);
     for (const l of listeners)
         l();
 }
@@ -197,9 +206,9 @@ export function useBrowserNavApi(options) {
         const toPath = (target) => prependBasePath(formatPath(inCurrentWorkspace(resolveTarget(features, target))), basePath);
         return {
             route,
-            navigate: (target) => pushPath(toPath(target)),
-            replace: (target) => replacePath(toPath(target)),
-            hrefFor: (target) => toPath(target),
+            navigate: (target, navigateOptions) => pushPath(toPath(target), formatSearch(navigateOptions)),
+            replace: (target, navigateOptions) => replacePath(toPath(target), formatSearch(navigateOptions)),
+            hrefFor: (target, navigateOptions) => `${toPath(target)}${formatSearch(navigateOptions) ?? ""}`,
             searchParams,
             setSearchParams: applySearchParamUpdates,
         };

package/dist/primitives/index.js

@@ -504,7 +504,7 @@ const EXPAND_TOGGLE_CELL_CLASS = "w-10 px-1! py-0!";
 const EXPANSION_CELL_CLASS = "whitespace-normal bg-muted p-0! align-top md:[&_td:last-child]:bg-muted";
 const EXPANSION_CONTENT_CLASS = "pt-1 pr-4 pb-3.5 pl-[52px]";
 function RowExpandToggle({ expanded, controlsId, label, onToggle, testId, }) {
-    return (_jsx(UiButton, { type: "button", variant: "ghost", size: "icon", className: "size-8 shrink-0", "aria-expanded": expanded, ...(expanded && { "aria-controls": controlsId }), "aria-label": label, "data-testid": testId, onClick: (e) => {
+    return (_jsx(UiButton, { type: "button", variant: "ghost", size: "icon", className: "size-8 shrink-0 max-md:size-11", "aria-expanded": expanded, ...(expanded && { "aria-controls": controlsId }), "aria-label": label, "data-testid": testId, onClick: (e) => {
             e.stopPropagation();
             onToggle();
         }, onKeyDown: (e) => e.stopPropagation(), children: _jsx(ChevronRight, { className: cn("size-4 transition-transform", expanded && "rotate-90"), "aria-hidden": "true" }) }));
@@ -670,7 +670,7 @@ function DefaultDataTable({ columns, rows, onRowClick, sort, onSortChange, empty
                         e.preventDefault();
                         e.stopPropagation();
                         onRowClick(row);
-                    }, children: body })) : (body), hasMenu && (_jsx("div", { onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: _jsx(RowActionsCell, { row: row, actions: menuActions, mode: rowActionMode, rowIsLink: rowIsLink }) }))] }, row.id));
+                    }, children: body })) : (body), hasMenu && (_jsx("div", { onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: _jsx(RowActionsCell, { row: row, actions: menuActions, mode: rowActionMode, rowIsLink: rowIsLink, compact: true }) }))] }, row.id));
         if (!isRowExpandable)
             return rowItem;
         // The expansion is a sibling <li>, outside the row's click target, so
@@ -764,7 +764,7 @@ function primaryRowAction(actions) {
 // The isVisible filter runs here; an action hidden for a given row never
 // reaches render. If every action is hidden, the cell stays empty (no
 // phantom column).
-function RowActionsCell({ row, actions, mode = "adaptive", rowIsLink = false, }) {
+function RowActionsCell({ row, actions, mode = "adaptive", rowIsLink = false, compact = false, }) {
     const visible = actions.filter((a) => a.isVisible === undefined || a.isVisible(row));
     if (visible.length === 0)
         return null;
@@ -774,12 +774,12 @@ function RowActionsCell({ row, actions, mode = "adaptive", rowIsLink = false, })
         // otherwise "inline" is exactly the wall-to-wall text-button problem
         // this feature exists to fix. An author-set `display` takes that choice over.
         const iconOnly = !hasExplicitDisplay && shouldRenderActionsIconOnly(visible);
-        return (_jsx("div", { className: "flex w-full items-center gap-1 justify-start", children: visible.map((a) => (_jsx(RowActionButton, { row: row, action: a, iconOnly: iconOnly }, a.id))) }));
+        return (_jsx("div", { className: "flex w-full items-center gap-1 justify-start", children: visible.map((a) => (_jsx(RowActionButton, { row: row, action: a, iconOnly: iconOnly, compact: compact }, a.id))) }));
     }
     if (hasExplicitDisplay) {
         const inline = visible.filter((a) => a.display !== undefined);
         const rest = visible.filter((a) => a.display === undefined);
-        return (_jsxs("div", { className: "inline-flex items-center gap-1 justify-end", children: [inline.map((a) => (_jsx(RowActionButton, { row: row, action: a }, a.id))), rest.length > 0 && _jsx(RowActionsKebab, { row: row, actions: rest })] }));
+        return (_jsxs("div", { className: "inline-flex items-center gap-1 justify-end", children: [inline.map((a) => (_jsx(RowActionButton, { row: row, action: a, compact: compact }, a.id))), rest.length > 0 && _jsx(RowActionsKebab, { row: row, actions: rest })] }));
     }
     if (rowIsLink) {
         return (_jsx("div", { className: "inline-flex items-center justify-end", children: _jsx(RowActionsKebab, { row: row, actions: visible }) }));
@@ -890,12 +890,20 @@ function useRowActionTrigger(row) {
     };
     return { busy, triggerNow };
 }
-function RowActionButton({ row, action, iconOnly = false, asLink = false, }) {
+// An icon-only form without a resolvable icon would render an empty button.
+// `compact` is the narrow card layout, where "responsive" collapses to its icon.
+function effectiveRowActionDisplay(display, hasIcon, compact) {
+    if (display === "responsive")
+        return hasIcon && compact ? "icon" : "button";
+    if (display === "icon" && !hasIcon)
+        return "link";
+    return display;
+}
+function RowActionButton({ row, action, iconOnly = false, asLink = false, compact = false, }) {
     const { busy, triggerNow } = useRowActionTrigger(row);
     const [confirmOpen, setConfirmOpen] = useState(false);
     const resolvedIcon = actionIconFor(action.icon);
-    // "icon" without a resolvable icon would render an empty button.
-    const display = action.display === "icon" && resolvedIcon === undefined ? "link" : action.display;
+    const display = effectiveRowActionDisplay(action.display, resolvedIcon !== undefined, compact);
     const isBorderedButton = display === "button";
     const showIconOnly = display === "icon" || (display === undefined && iconOnly && resolvedIcon !== undefined);
     const linkLike = display === "link" || (display === undefined && asLink);
@@ -924,7 +932,7 @@ function RowActionButton({ row, action, iconOnly = false, asLink = false, }) {
                     ? "h-8 rounded-md px-3 font-medium max-md:h-11"
                     : linkLike
                         ? "h-7 rounded-md px-2.5 max-md:h-11"
-                        : "h-8 rounded-sm", showIconOnly ? "w-8" : !linkLike && !isBorderedButton && "px-2", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "disabled:opacity-50 disabled:pointer-events-none", variantClass), children: busy ? (_jsx(Loader2, { className: "size-3.5 animate-spin", "aria-hidden": "true" })) : resolvedIcon === undefined || (linkLike && !showIconOnly) ? (action.label) : showIconOnly ? (_jsx(Icon, { name: resolvedIcon, className: "size-4" })) : (_jsxs(_Fragment, { children: [_jsx(Icon, { name: resolvedIcon, className: "size-4" }), action.label] })) }), _jsx(DefaultDialog, { open: confirmOpen, onOpenChange: setConfirmOpen, title: action.label, ...(action.confirm !== undefined && { description: action.confirm }), confirmLabel: action.confirmLabel ?? action.label, ...(action.style === "danger" && { variant: "danger" }), onConfirm: () => triggerNow(action), testId: `row-${row.id}-action-${action.id}-dialog` })] }));
+                        : "h-8 rounded-sm max-md:h-11", showIconOnly ? "w-8 max-md:w-11" : !linkLike && !isBorderedButton && "px-2", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "disabled:opacity-50 disabled:pointer-events-none", variantClass), children: busy ? (_jsx(Loader2, { className: "size-3.5 animate-spin", "aria-hidden": "true" })) : resolvedIcon === undefined || (linkLike && !showIconOnly) ? (action.label) : showIconOnly ? (_jsx(Icon, { name: resolvedIcon, className: "size-4" })) : (_jsxs(_Fragment, { children: [_jsx(Icon, { name: resolvedIcon, className: "size-4" }), action.label] })) }), _jsx(DefaultDialog, { open: confirmOpen, onOpenChange: setConfirmOpen, title: action.label, ...(action.confirm !== undefined && { description: action.confirm }), confirmLabel: action.confirmLabel ?? action.label, ...(action.style === "danger" && { variant: "danger" }), onConfirm: () => triggerNow(action), testId: `row-${row.id}-action-${action.id}-dialog` })] }));
 }
 // Kebab dropdown for >2 actions, one inline confirm dialog per item like
 // the inline-button path. Menu is controlled so it closes explicitly on

package/dist/primitives/lightbox.js

@@ -6,7 +6,7 @@ import { cn } from "../lib/cn.js";
 import { ModalShell } from "./modal-shell.js";
 const NAV_BUTTON_CLASS = "absolute top-1/2 -translate-y-1/2 flex size-9 items-center justify-center rounded-full border border-border bg-card text-foreground opacity-80 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring";
 export function DefaultLightbox(props) {
-    const { open, onOpenChange, testId } = props;
+    const { open, onOpenChange, testId, actions, showPosition = true } = props;
     const t = useTranslation();
     const images = "images" in props ? props.images : [{ src: props.src, alt: props.alt }];
     const onIndexChange = "images" in props ? props.onIndexChange : undefined;
@@ -31,5 +31,5 @@ export function DefaultLightbox(props) {
             goTo(index - 1);
         }
     };
-    return (_jsxs(ModalShell, { open: open, onOpenChange: onOpenChange, testId: testId, closeLabel: t("kumiko.dialog.close"), noAriaDescription: true, ...(canNavigate && { onContentKeyDown: handleKeyDown }), contentClassName: cn("border-0 bg-transparent p-0 shadow-none", "max-w-[95vw] max-h-[90vh] w-auto"), children: [_jsx(DialogPrimitive.Title, { className: "sr-only", children: current.alt }), _jsx("img", { src: current.src, alt: current.alt, className: "block max-h-[85vh] max-w-[90vw] w-auto rounded-lg border border-border bg-card shadow-lg" }), canNavigate && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "aria-label": t("kumiko.lightbox.previous"), onClick: () => goTo(index - 1), className: cn(NAV_BUTTON_CLASS, "left-2"), children: _jsx(ChevronLeft, { className: "size-5" }) }), _jsx("button", { type: "button", "aria-label": t("kumiko.lightbox.next"), onClick: () => goTo(index + 1), className: cn(NAV_BUTTON_CLASS, "right-2"), children: _jsx(ChevronRight, { className: "size-5" }) }), _jsx("div", { className: "absolute bottom-2 left-1/2 -translate-x-1/2 rounded-full bg-card px-3 py-1 text-xs text-foreground shadow-sm", children: t("kumiko.lightbox.position", { current: index + 1, total }) })] }))] }));
+    return (_jsxs(ModalShell, { open: open, onOpenChange: onOpenChange, testId: testId, closeLabel: t("kumiko.dialog.close"), noAriaDescription: true, ...(canNavigate && { onContentKeyDown: handleKeyDown }), contentClassName: cn("border-0 bg-transparent p-0 shadow-none", "max-w-[95vw] max-h-[90vh] w-auto"), children: [_jsx(DialogPrimitive.Title, { className: "sr-only", children: current.alt }), _jsx("img", { src: current.src, alt: current.alt, className: "block max-h-[85vh] max-w-[90vw] w-auto rounded-lg border border-border bg-card shadow-lg" }), canNavigate && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "aria-label": t("kumiko.lightbox.previous"), onClick: () => goTo(index - 1), className: cn(NAV_BUTTON_CLASS, "left-2"), children: _jsx(ChevronLeft, { className: "size-5" }) }), _jsx("button", { type: "button", "aria-label": t("kumiko.lightbox.next"), onClick: () => goTo(index + 1), className: cn(NAV_BUTTON_CLASS, "right-2"), children: _jsx(ChevronRight, { className: "size-5" }) }), showPosition && (_jsx("div", { className: "absolute bottom-2 left-1/2 -translate-x-1/2 rounded-full bg-card px-3 py-1 text-xs text-foreground shadow-sm", children: t("kumiko.lightbox.position", { current: index + 1, total }) }))] })), actions !== undefined && (_jsx("div", { "data-testid": testId !== undefined ? `${testId}-actions` : undefined, className: "absolute left-2 top-2 flex items-center gap-2", children: actions }))] }));
 }

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.350.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.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",
     "@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.350.0"
   },
   "repository": {
     "type": "git",

package/src/changes.json

@@ -1,4 +1,16 @@
 [
+  {
+    "version": "0.350.0",
+    "type": "improvement",
+    "title": "Row actions with display \"responsive\", Lightbox actions and showPosition, navigate with searchParams, facet counts refresh after writes",
+    "detail": "Responsive row actions, Lightbox actions, navigate with search params, fresh facet counts\n`RowActionDisplay` gets `\"responsive\"`: a labelled button with icon in the table (768px and up), icon only in the narrow card layout with the label as accessible name. Without an icon it stays a button. Existing values keep their look. Below 768px, icon-only row actions and the row expand arrow have a 44px touch target.\n`Lightbox` takes `actions` (nodes in the top-left corner, e.g. a download button) and `showPosition` (default `true`; `false` hides the `{current} / {total}` counter).\n`NavApi.navigate`, `replace` and `hrefFor` take an optional `{ searchParams }` (`NavigateOptions`). Without it the query is dropped as before. `listFilterUrlKey(screenId, field)` builds the URL key a list reads a facet filter from.\nFacet chip counts refetch after a write from a row action, toolbar action, drawer or expanded row, and follow the entity's live events. Before, they kept the count from the first load."
+  },
+  {
+    "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",