@cosmicdrift/kumiko-renderer 0.374.0 → 0.377.0

package/dist/web/app/dashboard-body.js

@@ -0,0 +1,865 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { normalizeListColumn } from "@cosmicdrift/kumiko-framework/ui-types";
+import { DASHBOARD_STAT_TONES } from "@cosmicdrift/kumiko-types/screen";
+import { isOneOf } from "@cosmicdrift/kumiko-types/type-guards";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { currencyDecimals, EMPTY_VALUE_PLACEHOLDER } from "../../headless/index.js";
+import { dispatcherErrorText, EmbeddedScreenProvider, evalVisibleWhen, extensionSectionName, HeaderActionsBar, KumikoScreen, useEmbeddedScreen, useExtensionSectionComponent, useLocale, useNav, usePageHeaderCompact, usePageHeaderSlotAvailable, usePrimitives, useQuery, useRecordActions, useTranslation, } from "../../index.js";
+import { cn } from "../lib/cn.js";
+import { EmbeddedFormProvider } from "../primitives/index.js";
+import { PageSection } from "../primitives/layout.js";
+import { resolveSafeLocale } from "../primitives/locale-number.js";
+import { formatMoney } from "../primitives/money-input.js";
+import { Skeleton } from "../ui/skeleton.js";
+import { initialWindowSelection, } from "../widgets/chart-window.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";
+import { ProgressList } from "../widgets/progress-list.js";
+import { SectionCard } from "../widgets/section-card.js";
+import { StatCard, StatStripCell } from "../widgets/stat.js";
+import { EmptyState, LoadingState } from "../widgets/states.js";
+import { StatusBadge } from "../widgets/status-badge.js";
+import { resolveRefreshIntervalMs } from "./dashboard-refresh.js";
+import { useRelativeTimeFormatter } from "./relative-time.js";
+const SKELETON_SEGMENT_WIDTHS = ["100%", "72%", "48%"];
+const WIDE_PANEL = "sm:col-span-2 lg:col-span-4";
+const HALF_PANEL = "sm:col-span-2 lg:col-span-2";
+const CURRENCY_CODE_PATTERN = /^[A-Za-z]{3}$/;
+const HOUR_MS = 3_600_000;
+const DAY_MS = 24 * HOUR_MS;
+const SKELETON_BAR_HEIGHTS = ["40%", "65%", "50%", "85%", "60%", "75%", "45%", "70%"];
+function panelPayload(panel, screenParams) {
+    return {
+        ...(panel.ignoreScreenFilter === true ? {} : screenParams.filterParams),
+        ...screenParams.rangeParams,
+        ...screenParams.recordParams,
+        ...panel.params,
+    };
+}
+const DashboardQueryContext = createContext({
+    refreshIntervalMs: undefined,
+    register: () => () => { },
+});
+function useRefetchRegistry() {
+    const registered = useRef(new Set());
+    const register = useCallback((refetch) => {
+        registered.current.add(refetch);
+        return () => {
+            registered.current.delete(refetch);
+        };
+    }, []);
+    const refetchRegistered = useCallback(async () => {
+        await Promise.all([...registered.current].map((refetch) => refetch()));
+    }, []);
+    return { register, refetchRegistered };
+}
+/** Live query of a panel or gate that takes part in the dashboard's refresh:
+ *  polls at the screen's interval and is refetched by `refetchAll` after an
+ *  action. A disabled query registers nothing. */
+function useDashboardQuery(type, payload, options = {}) {
+    const { refreshIntervalMs, register } = useContext(DashboardQueryContext);
+    const enabled = options.enabled ?? true;
+    const result = useQuery(type, payload, {
+        live: true,
+        enabled,
+        ...(refreshIntervalMs !== undefined && { refetchIntervalMs: refreshIntervalMs }),
+    });
+    const { refetch } = result;
+    useEffect(() => (enabled ? register(refetch) : undefined), [enabled, register, refetch]);
+    return result;
+}
+function useDashboardFormats() {
+    const resolver = useLocale();
+    const locale = resolver.locale();
+    const timeZone = resolver.timeZone();
+    const formatRelative = useRelativeTimeFormatter(locale);
+    const number = new Intl.NumberFormat(locale, { maximumFractionDigits: 1 });
+    // Without the significant-digit cap, values below the locale's first
+    // abbreviation step keep a decimal ("298.989,9 €" in de); lessPrecision
+    // picks whichever rule rounds more, so that becomes "299.000 €" while
+    // "1,5 Mio. €" keeps its one decimal.
+    const compactOptions = {
+        notation: "compact",
+        maximumFractionDigits: 1,
+        maximumSignificantDigits: 3,
+        roundingPriority: "lessPrecision",
+    };
+    const compactNumber = new Intl.NumberFormat(locale, compactOptions);
+    const percent = new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 0 });
+    const day = new Intl.DateTimeFormat(locale, { day: "2-digit", month: "2-digit", timeZone });
+    const month = new Intl.DateTimeFormat(locale, { month: "2-digit", year: "numeric", timeZone });
+    const hour = new Intl.DateTimeFormat(locale, { hour: "2-digit", minute: "2-digit", timeZone });
+    const dateTime = new Intl.DateTimeFormat(locale, {
+        dateStyle: "medium",
+        timeStyle: "short",
+        timeZone,
+    });
+    const medium = new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeZone });
+    const formatMinor = (amountMinor, currency, fractionDigits) => formatMoney(amountMinor, currency, locale, fractionDigits);
+    return {
+        timeZone,
+        formatMedium: (atMs) => medium.format(atMs),
+        formatMinor,
+        formatRelative,
+        formatPanelValue: (valueFormat) => valueFormat === undefined
+            ? (value) => number.format(value)
+            : (value) => formatMinor(value, valueFormat.currency, valueFormat.fractionDigits),
+        formatPanelAxisValue: (valueFormat) => {
+            if (valueFormat === undefined || !CURRENCY_CODE_PATTERN.test(valueFormat.currency)) {
+                return (value) => compactNumber.format(value);
+            }
+            const compactMoney = new Intl.NumberFormat(resolveSafeLocale(locale), {
+                ...compactOptions,
+                style: "currency",
+                currency: valueFormat.currency,
+            });
+            const decimals = currencyDecimals(valueFormat.currency);
+            return (value) => compactMoney.format(value / 10 ** decimals);
+        },
+        formatNumber: (value) => number.format(value),
+        formatPercent: (fraction) => percent.format(fraction),
+        formatDay: (atMs) => day.format(atMs),
+        formatMonth: (atMs) => month.format(atMs),
+        formatHour: (atMs) => hour.format(atMs),
+        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 isRelativeTimeParam(value) {
+    return isRecord(value) && value["kind"] === "relativeTime" && typeof value["atMs"] === "number";
+}
+function isTextParam(value) {
+    return (typeof value === "string" ||
+        typeof value === "number" ||
+        isDashboardI18nText(value) ||
+        isMoneyParam(value) ||
+        isDateParam(value) ||
+        isRelativeTimeParam(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 (isRelativeTimeParam(param))
+        return formats.formatRelative(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, 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 min-h-11 shrink-0 flex-wrap items-center justify-between gap-x-3 gap-y-2 border-b border-border-row px-4 py-2", children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("h2", { className: "text-sm font-semibold break-words", children: title }), subtitle !== undefined && _jsx("p", { className: "text-xs text-muted-foreground", children: subtitle })] }), action !== undefined && _jsx("div", { className: "shrink-0", children: action })] }), _jsx("div", { className: "grow p-4", children: children })] }));
+}
+function PanelError({ label, error, onRetry, testId, }) {
+    const { Button } = usePrimitives();
+    const t = useTranslation();
+    return (_jsxs("div", { role: "alert", "data-testid": testId, className: "flex flex-col items-start gap-2 rounded-lg border border-dashed border-status-bad/40 px-4 py-6 text-sm", children: [_jsx("div", { className: "font-medium text-status-bad", children: t("kumiko.dashboard.panel.error.title", { label }) }), _jsx("div", { className: "text-muted-foreground", children: dispatcherErrorText(error, t) }), _jsx(Button, { variant: "secondary", onClick: onRetry, children: t("kumiko.dashboard.panel.error.retry") }), _jsx("div", { className: "text-xs text-muted-foreground", children: t("kumiko.dashboard.panel.error.isolated") })] }));
+}
+function PanelSkeleton({ shape }) {
+    const t = useTranslation();
+    if (shape === "rows")
+        return _jsx(LoadingState, { rows: 3 });
+    if (shape === "segments") {
+        return (_jsx("output", { "aria-label": t("kumiko.widget.loading"), className: "flex flex-col gap-4", children: SKELETON_SEGMENT_WIDTHS.map((width) => (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Skeleton, { className: "h-3 w-24" }), _jsx(Skeleton, { className: "h-2.5 rounded-full", style: { width } })] }, width))) }));
+    }
+    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, action, screenParams, translate, skeleton, isEmpty, children, }) {
+    const formats = useDashboardFormats();
+    const { data, error, loading, refetch } = useDashboardQuery(panel.query, panelPayload(panel, screenParams));
+    useReportPanelLoaded(data);
+    let body;
+    if (loading && data === null) {
+        body = _jsx(PanelSkeleton, { shape: skeleton });
+    }
+    else if (error !== null) {
+        body = _jsx(PanelError, { label: label, error: error, onRetry: () => void refetch() });
+    }
+    else if (data === null || isEmpty(data)) {
+        body = (_jsx(EmptyState, { title: translate(panel.emptyLabel ?? "kumiko.list.no-entries"), description: panel.emptyHint !== undefined ? translate(panel.emptyHint) : undefined }));
+    }
+    else {
+        body = children(data, formats);
+    }
+    return (_jsx(PanelShell, { testId: `dashboard-panel-${panel.id}`, title: label, subtitle: subtitle, action: action, children: body }));
+}
+function isSparkPoint(value) {
+    return (typeof value === "object" &&
+        value !== null &&
+        "value" in value &&
+        (typeof value.value === "number" || value.value === null));
+}
+function readSparkline(panel, record) {
+    if (panel.sparklineField === undefined)
+        return undefined;
+    const raw = record[panel.sparklineField];
+    if (!Array.isArray(raw))
+        return undefined;
+    return raw.filter(isSparkPoint).flatMap((p) => (p.value === null ? [] : [p.value]));
+}
+function readTone(raw) {
+    return isOneOf(DASHBOARD_STAT_TONES, raw) ? raw : undefined;
+}
+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
+    // `icon !== undefined`, so a resolved-but-hidden element used to leave a
+    // stray accent-colored chip next to the label.
+    const iconName = panel.icon !== undefined ? extensionSectionName(panel.icon) : undefined;
+    const Icon = useExtensionSectionComponent(iconName);
+    useEffect(() => {
+        if (panel.icon !== undefined && iconName !== undefined && Icon === undefined) {
+            // biome-ignore lint/suspicious/noConsole: dev-warning für Setup-Fehler
+            console.warn(`[kumiko] Dashboard stat-panel "${panel.id}" on screen "${screenId}" references icon ` +
+                `"${iconName}", which is not registered in clientFeatures.extensionSectionComponents.`);
+        }
+    }, [panel.icon, panel.id, iconName, Icon, screenId]);
+    const { data, error, loading, refetch } = useDashboardQuery(panel.query, panelPayload(panel, screenParams));
+    useReportPanelLoaded(data);
+    if (loading && data === null)
+        return _jsx(LoadingState, { rows: 2 });
+    if (error !== null) {
+        return _jsx(PanelError, { label: label, error: error, onRetry: () => void refetch() });
+    }
+    const record = data ?? {};
+    const rawValue = record[panel.valueField];
+    const tone = readTone(panel.toneField !== undefined ? record[panel.toneField] : undefined) ??
+        // A fixed tone must not paint an all-clear "0" as an alarm.
+        (rawValue === 0 ? undefined : panel.tone);
+    const sub = panel.subField !== undefined ? record[panel.subField] : undefined;
+    const delta = readDelta(panel, record);
+    const valueFormat = panel.valueFormat;
+    let value;
+    if (typeof rawValue !== "number") {
+        value =
+            resolveDashboardText(rawValue, translate, formats) ??
+                fallbackText(rawValue, EMPTY_VALUE_PLACEHOLDER);
+    }
+    else if (valueFormat?.kind === "relativeTime") {
+        value = formats.formatRelative(rawValue);
+    }
+    else {
+        value = formats.formatPanelValue(valueFormat)(rawValue);
+    }
+    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, { 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, 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)
+        return undefined;
+    const value = record[panel.deltaField];
+    const direction = record[panel.deltaDirectionField];
+    if (value === undefined || value === null)
+        return undefined;
+    if (direction !== "up" && direction !== "down")
+        return undefined;
+    const tone = readTone(panel.deltaToneField !== undefined ? record[panel.deltaToneField] : undefined);
+    return { value: String(value), direction, ...(tone !== undefined && { tone }) };
+}
+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, ...(panel.subtitle !== undefined && { subtitle: translate(panel.subtitle) }), testId: testId, children: _jsx("section", { className: "grid grid-cols-[repeat(auto-fit,minmax(min(12rem,100%),1fr))] gap-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 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;
+        const legendKey = typeof marker.kind === "string" ? markerKinds?.[marker.kind]?.label : undefined;
+        const legendLabel = legendKey !== undefined ? translate(legendKey) : undefined;
+        return {
+            atMs: marker.atMs,
+            label: resolveDashboardText(marker.label, translate, formats) ?? "",
+            ...(color !== undefined && { color }),
+            ...(legendLabel !== undefined && { legendLabel }),
+        };
+    });
+}
+// A plain bar chart ("changes per day") ships `points` without `series`.
+const SINGLE_SERIES_KEY = "value";
+function chartSeries(data, panelLabel, translate) {
+    if (data.series !== undefined && data.series.length > 0) {
+        return data.series.map((s) => ({ ...s, label: translate(s.label) }));
+    }
+    if (data.points !== undefined && data.points.length > 0) {
+        return [{ key: SINGLE_SERIES_KEY, label: panelLabel, points: data.points }];
+    }
+    return [];
+}
+function distinctBucketCount(series) {
+    return new Set(series.flatMap((s) => s.points.map((p) => p.atMs))).size;
+}
+function isChartEmpty(chart, data, series) {
+    if (chart === "segment-bars")
+        return (data.rows ?? []).length === 0;
+    if (chart === "stacked-bars")
+        return distinctBucketCount(series) === 0;
+    if (chart === "stacked-area")
+        return distinctBucketCount(series) < 2;
+    const measured = (data.points ?? []).filter((p) => p.value !== null);
+    return measured.length < 2;
+}
+function windowOf(data, series) {
+    const times = series.flatMap((s) => s.points.map((p) => p.atMs));
+    const startMs = data.windowStartMs ?? (times.length > 0 ? Math.min(...times) : 0);
+    const endMs = data.windowEndMs ?? (times.length > 0 ? Math.max(...times) : 1);
+    return { startMs, endMs };
+}
+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}`;
+    const ranges = panel.chart === "stacked-area" && panel.ranges !== undefined
+        ? {
+            default: panel.ranges.default,
+            options: panel.ranges.options.map((option) => ({
+                ...option,
+                label: translate(option.label),
+            })),
+        }
+        : undefined;
+    const [windowSelection, setWindowSelection] = useState(() => initialWindowSelection(ranges, panel.chart === "stacked-area" ? panel.initialWindow : undefined));
+    const rangeSwitch = ranges !== undefined ? (_jsx(ModeSwitch, { value: windowSelection?.kind === "range" ? windowSelection.value : null, options: ranges.options.map((option) => ({
+            value: option.value,
+            label: option.label,
+        })), onChange: (value) => setWindowSelection({ kind: "range", value }), 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, formats) => {
+            const series = chartSeries(data, label, translate);
+            const { startMs, endMs } = windowOf(data, series);
+            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, colors: colors, ariaLabel: label, formatValue: formatValue, testId: testId }));
+            }
+            if (panel.chart === "stacked-bars") {
+                const times = series.flatMap((s) => s.points.map((p) => p.atMs));
+                const spacing = Math.min(...[...new Set(times)]
+                    .sort((a, b) => a - b)
+                    .flatMap((atMs, i, all) => {
+                    const prev = all[i - 1];
+                    return prev === undefined ? [] : [atMs - prev];
+                }), DAY_MS);
+                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, formatAxisValue: formats.formatPanelAxisValue(panel.valueFormat), testId: testId }));
+            }
+            if (panel.chart === "stacked-area") {
+                const lines = (data.lines ?? []).map((line) => ({
+                    ...line,
+                    label: translate(line.label),
+                }));
+                const todayMs = data.todayMs ?? undefined;
+                const formatDateByFormat = (atMs, format) => format === "month" ? formats.formatMonth(atMs) : formats.formatDay(atMs);
+                return (_jsx(StackedAreaChart, { series: series, lines: lines, windowStartMs: startMs, windowEndMs: endMs, ...(todayMs !== undefined && { todayMs }), tones: tones, colors: colors, markers: markers, ...(ranges !== undefined && { ranges }), brush: panel.brush === true, windowSelection: windowSelection, onWindowSelectionChange: setWindowSelection, brushLabels: {
+                        start: t("kumiko.dashboard.brush-start"),
+                        end: t("kumiko.dashboard.brush-end"),
+                    }, ariaLabel: label, todayLabel: todayLabel, formatBucketLabel: formatDateByFormat, formatValue: formatValue, formatAxisValue: formats.formatPanelAxisValue(panel.valueFormat), markerLabels: panel.markerLabels === true, formatMarkerTime: formatDateByFormat, timeZone: formats.timeZone, ...(panel.dateFormat !== undefined && { dateFormat: panel.dateFormat }), ...(panel.markerLegend !== undefined && { markerLegend: panel.markerLegend }), 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 || panel.unit !== undefined) && {
+                    yAxis: {
+                        ticks: 3,
+                        format: formats.formatPanelAxisValue(panel.valueFormat),
+                        ...(panel.unit !== undefined && { unit: translate(panel.unit) }),
+                    },
+                }), ariaLabel: label, testId: testId }));
+        } }));
+}
+function ListPanelBody({ panel, label, screenParams, translate, }) {
+    const { formatPercent, formatNumber, formatDateTime } = useDashboardFormats();
+    const columns = panel.columns.map((c) => {
+        const normalized = normalizeListColumn(c);
+        return {
+            field: normalized.field,
+            label: translate(normalized.label ?? normalized.field),
+            ...(normalized.display !== undefined && { display: normalized.display }),
+            ...(normalized.badgeToneField !== undefined && {
+                badgeToneField: normalized.badgeToneField,
+            }),
+        };
+    });
+    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, }) {
+    return (_jsx(QueryPanel, { panel: panel, label: label, screenParams: screenParams, translate: translate, skeleton: "rows", isEmpty: (data) => (data.rows ?? []).length === 0, children: (data, formats) => {
+            const rows = (data.rows ?? []).map((row, i) => {
+                const trailing = resolveDashboardText(row.trailing, translate, formats);
+                return {
+                    id: String(i),
+                    primary: resolveDashboardText(row.primary, translate, formats) ?? EMPTY_VALUE_PLACEHOLDER,
+                    ...(trailing !== undefined && { trailing }),
+                };
+            });
+            return _jsx(FeedList, { rows: rows });
+        } }));
+}
+function isFiniteNumber(value) {
+    return typeof value === "number" && Number.isFinite(value);
+}
+function isProgressTone(value) {
+    return value === "default" || value === "danger";
+}
+function progressUsageOf(row) {
+    const { used, limit } = row;
+    if (!isFiniteNumber(used))
+        return undefined;
+    if (limit === null)
+        return { used, limit: null };
+    return isFiniteNumber(limit) ? { used, limit } : undefined;
+}
+function toProgressListRow(row, index, translate, formats) {
+    const sub = resolveDashboardText(row["sub"], translate, formats);
+    const usage = progressUsageOf(row);
+    const explicitTone = isProgressTone(row["tone"]) ? row["tone"] : undefined;
+    const common = {
+        id: String(index),
+        label: resolveDashboardText(row["label"], translate, formats) ?? EMPTY_VALUE_PLACEHOLDER,
+        ...(sub !== undefined && { sub }),
+    };
+    if (usage === undefined) {
+        return {
+            ...common,
+            value: resolveDashboardText(row["value"], translate, formats) ?? EMPTY_VALUE_PLACEHOLDER,
+            fraction: isFiniteNumber(row["fraction"]) ? row["fraction"] : 0,
+            ...(explicitTone !== undefined && { tone: explicitTone }),
+        };
+    }
+    const { used, limit } = usage;
+    const usedText = formats.formatNumber(used);
+    const limitText = limit === null ? translate("kumiko.dashboard.progress.unlimited") : formats.formatNumber(limit);
+    const exhausted = limit !== null && used >= limit;
+    const tone = explicitTone ?? (exhausted ? "danger" : undefined);
+    let fraction = null;
+    if (limit !== null)
+        fraction = limit === 0 ? 1 : used / limit;
+    return {
+        ...common,
+        value: `${usedText} / ${limitText}`,
+        fraction,
+        ...(tone !== undefined && { tone }),
+    };
+}
+function ProgressListPanelBody({ 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, formats) => {
+            const rows = (data.rows ?? []).map((row, i) => toProgressListRow(row, i, translate, formats));
+            return _jsx(ProgressList, { rows: rows });
+        } }));
+}
+function TextBlockView({ block, translate, }) {
+    switch (block.kind) {
+        case "heading":
+            return (_jsx("h3", { "data-block": "heading", className: "text-sm font-semibold text-foreground", children: translate(block.text) }));
+        case "paragraph":
+            return (_jsx("p", { "data-block": "paragraph", className: block.emphasis === "strong"
+                    ? "text-sm font-medium text-foreground"
+                    : "text-sm text-muted-foreground", children: translate(block.text) }));
+        case "list":
+            return (_jsx("ul", { "data-block": "list", className: "list-disc space-y-1 pl-5 text-sm text-muted-foreground", children: block.items.map((item) => (_jsx("li", { children: translate(item) }, item))) }));
+        case "code":
+            return (_jsx("pre", { "data-block": "code", className: "overflow-x-auto rounded-md bg-muted p-3 text-xs", children: _jsx("code", { children: block.code }) }));
+        case "hint":
+            return (_jsx("p", { "data-block": "hint", className: "text-xs text-muted-foreground", children: translate(block.text) }));
+    }
+}
+function textBlockKey(block) {
+    switch (block.kind) {
+        case "list":
+            return `list:${block.items.join("|")}`;
+        case "code":
+            return `code:${block.code}`;
+        default:
+            return `${block.kind}:${block.text}`;
+    }
+}
+function TextPanelBody({ panel, label, translate, }) {
+    const blocks = (_jsx("div", { className: "flex flex-col gap-3", children: panel.blocks.map((block) => (_jsx(TextBlockView, { block: block, translate: translate }, textBlockKey(block)))) }));
+    const testId = `dashboard-panel-${panel.id}`;
+    if (label !== undefined) {
+        return (_jsx(PanelShell, { testId: testId, title: label, children: blocks }));
+    }
+    return (_jsx("section", { "data-testid": testId, className: "h-full rounded-lg border border-border bg-card p-4 text-card-foreground", children: blocks }));
+}
+// Löst panel.component über dieselbe extensionSectionComponents-Registry auf
+// wie entityEdit-Extension-Sections und List-Header-Slots — bleibt an seiner
+// Array-Position statt in einen separaten Slot zu wandern (siehe Datei-Kopf-
+// Kommentar zur Registry). Rendert nichts + dev-Warnung bei unregistriertem
+// Namen, analog zu ListHeaderSlotMount in render-list.tsx.
+function CustomPanelBody({ panel, screenId, filterParams, }) {
+    const name = extensionSectionName(panel.component);
+    const Component = useExtensionSectionComponent(name);
+    useEffect(() => {
+        if (name !== undefined && Component === undefined) {
+            // biome-ignore lint/suspicious/noConsole: dev-warning für Setup-Fehler
+            console.warn(`[kumiko] Dashboard custom-panel "${panel.id}" on screen "${screenId}" references component ` +
+                `"${name}", which is not registered in clientFeatures.extensionSectionComponents — the panel renders nothing.`);
+        }
+    }, [name, Component, panel.id, screenId]);
+    if (Component === undefined)
+        return null;
+    // Dashboard-Panels haben keine Entity — entityName trägt die screen.id,
+    // damit ExtensionSectionProps nicht extra für diesen einen Mount-Ort
+    // aufgeweicht werden muss (das bräche jede bestehende registrierte
+    // Section, die entityName als garantiert gesetzten string erwartet).
+    return (_jsx(Component, { entityName: screenId, entityId: null, screenId: screenId, filterParams: filterParams }));
+}
+// Value lives in the URL under `filter.id` (like useListUrlState's
+// `<screenId>.page`, same replaceState) so a `navigate` rowAction with
+// `params` can deep-link onto this filter.
+function useFilterParams(screen, enabled) {
+    const { Field, Input } = usePrimitives();
+    const t = useTranslation();
+    const nav = useNav();
+    const filter = screen.filter;
+    const value = filter !== undefined ? (nav.searchParams[filter.id] ?? "") : "";
+    const optionsQueryResult = useQuery(filter?.optionsQuery ?? "", {}, { enabled: enabled && filter?.optionsQuery !== undefined });
+    if (filter === undefined) {
+        return { params: {}, picker: null };
+    }
+    const dynamicOptions = filter.optionsQuery !== undefined
+        ? (optionsQueryResult.data?.rows ?? [])
+        : (filter.options ?? []).map((o) => ({ value: o.value, label: t(o.label) }));
+    const allLabel = t(filter.allLabel ?? "kumiko.dashboard.filter.all");
+    const options = [{ value: "", label: allLabel }, ...dynamicOptions];
+    const picker = (_jsx("div", { className: "max-w-xs", children: _jsx(Field, { id: `dashboard-filter-${filter.id}`, label: t(filter.label), children: _jsx(Input, { kind: "combobox", id: `dashboard-filter-${filter.id}`, name: filter.id, options: options, value: value, onChange: (next) => nav.setSearchParams({ [filter.id]: next === "" ? null : next }), placeholder: filter.placeholder !== undefined ? t(filter.placeholder) : allLabel }) }) }));
+    const params = value === "" ? {} : { [filter.id]: value };
+    return { params, picker };
+}
+// An unknown/stale URL value falls back to the declared default.
+function useTimeRange(screen, translate) {
+    const t = useTranslation();
+    const nav = useNav();
+    const resolver = useLocale();
+    const timeRange = screen.timeRange;
+    if (timeRange === undefined)
+        return { params: {}, control: null };
+    const fromUrl = nav.searchParams[timeRange.id];
+    const value = timeRange.options.find((o) => o.value === fromUrl)?.value ?? timeRange.default;
+    return {
+        // Metric buckets are cut server-side; without the user's zone they default
+        // to UTC while the axis labels are formatted in the user's zone.
+        params: { [timeRange.id]: value, timeZone: resolver.timeZone() },
+        control: (_jsx(ModeSwitch, { value: value, options: timeRange.options.map((o) => ({ value: o.value, label: translate(o.label) })), onChange: (next) => nav.setSearchParams({ [timeRange.id]: next }), ariaLabel: t("kumiko.dashboard.time-range"), testId: `dashboard-time-range-${timeRange.id}` })),
+    };
+}
+function panelSpanClassName(panel) {
+    if (panel.kind === "stat")
+        return undefined;
+    if ("span" in panel && panel.span !== undefined)
+        return panel.span === "half" ? HALF_PANEL : WIDE_PANEL;
+    if (panel.kind === "feed" || panel.kind === "progress-list")
+        return HALF_PANEL;
+    return WIDE_PANEL;
+}
+function PanelBody({ panel, label, screenId, screenParams, translate, }) {
+    if (panel.kind === "stat-group") {
+        return (_jsx(StatGroupPanelBody, { panel: panel, label: label, screenId: screenId, screenParams: screenParams, translate: translate }));
+    }
+    if (panel.kind === "custom") {
+        return (_jsx(CustomPanelBody, { panel: panel, screenId: screenId, filterParams: {
+                ...screenParams.filterParams,
+                ...screenParams.rangeParams,
+                ...screenParams.recordParams,
+            } }));
+    }
+    const text = label ?? "";
+    if (panel.kind === "stat") {
+        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 }));
+    }
+    if (panel.kind === "list") {
+        return (_jsx(ListPanelBody, { panel: panel, label: text, screenParams: screenParams, translate: translate }));
+    }
+    if (panel.kind === "feed") {
+        return (_jsx(FeedPanelBody, { panel: panel, label: text, screenParams: screenParams, translate: translate }));
+    }
+    if (panel.kind === "text") {
+        return _jsx(TextPanelBody, { panel: panel, label: label, translate: translate });
+    }
+    return (_jsx(ProgressListPanelBody, { panel: panel, label: text, screenParams: screenParams, translate: translate }));
+}
+const VisibilityQueryContext = createContext(new Map());
+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.kind !== "text" && panel.ignoreScreenFilter === true;
+    return visibilityGate(panel.visibleWhen.query, {
+        ...(dropsFilter ? {} : screenParams.filterParams),
+        ...screenParams.rangeParams,
+        ...screenParams.recordParams,
+    });
+}
+// 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. The queries
+// run as keyed siblings of the grid so a changing gate count never changes the
+// grid's position in the tree (which would remount every panel).
+function VisibilityGateQuery({ gate, onResult, onForget, }) {
+    const { data, error, loading, refetch } = useDashboardQuery(gate.query, gate.payload);
+    const { key } = gate;
+    useEffect(() => {
+        onResult(key, { data, error, loading, refetch });
+    }, [key, data, error, loading, refetch, onResult]);
+    useEffect(() => () => onForget(key), [key, onForget]);
+    return null;
+}
+function VisibilityGateQueries({ gates, onResult, onForget, }) {
+    return gates.map((gate) => (_jsx(VisibilityGateQuery, { gate: gate, onResult: onResult, onForget: onForget }, gate.key)));
+}
+function useVisibilityGateResults() {
+    const [results, setResults] = useState(new Map());
+    const report = useCallback((key, result) => {
+        setResults((prev) => new Map(prev).set(key, result));
+    }, []);
+    const forget = useCallback((key) => {
+        setResults((prev) => {
+            if (!prev.has(key))
+                return prev;
+            const next = new Map(prev);
+            next.delete(key);
+            return next;
+        });
+    }, []);
+    return { results, report, forget };
+}
+function distinctVisibilityGates(panels, screenParams) {
+    const gates = new Map();
+    for (const panel of panels) {
+        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: cn("min-w-0", 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 _jsx("div", { className: cn("min-w-0", className), children: children });
+}
+function EmbeddedScreenPanelTile({ panel, target, translate, }) {
+    const screenBody = _jsx(KumikoScreen, { schema: target.schema, qn: target.qn, translate: translate });
+    const embedded = panel.chromeless === true ? (_jsx(EmbeddedFormProvider, { children: _jsx(EmbeddedScreenProvider, { children: screenBody }) })) : (screenBody);
+    return (_jsx("div", { className: cn("min-w-0", WIDE_PANEL), "data-testid": `dashboard-panel-${panel.id}`, children: panel.label !== undefined && panel.chromeless !== true ? (_jsx(SectionCard, { title: translate(panel.label), children: embedded })) : (_jsxs(_Fragment, { children: [panel.label !== undefined && (_jsx("h3", { className: "mb-3 text-sm font-semibold text-foreground", children: translate(panel.label) })), embedded] })) }));
+}
+// Own component so the target lookup (a hook) only runs for panels that actually fall back.
+function FallbackScreenPanelTile({ panel, fallback, featureName, translate, }) {
+    const target = useEmbeddedScreen(featureName, fallback);
+    if (target === undefined)
+        return null;
+    return _jsx(EmbeddedScreenPanelTile, { panel: panel, target: target, translate: translate });
+}
+function ScreenPanelTile({ panel, featureName, translate, }) {
+    const visibleWhen = panel.visibleWhen;
+    const visibility = useContext(VisibilityQueryContext).get(visibleWhen !== undefined ? visibilityGate(visibleWhen.query, NO_GATE_PAYLOAD).key : "");
+    const target = useEmbeddedScreen(featureName, panel.screen);
+    const verdict = visibleWhen === undefined ? "visible" : evalVisibleWhen(visibleWhen, visibility);
+    // Nothing while the gate loads: a fallback that flashes before the real panel flickers.
+    if (verdict === "loading")
+        return null;
+    if (verdict !== "visible" && panel.fallback !== undefined) {
+        return (_jsx(FallbackScreenPanelTile, { panel: panel, fallback: panel.fallback, featureName: featureName, translate: translate }));
+    }
+    if (target === undefined)
+        return null;
+    // A failed gate query must not silently drop the panel: on the
+    // account-security page that would hide every MFA enable/disable path.
+    if (verdict === "error" && visibility?.error) {
+        return (_jsx("div", { className: cn("min-w-0", WIDE_PANEL), "data-testid": `dashboard-panel-${panel.id}`, children: _jsx(PanelError, { label: panel.label !== undefined ? translate(panel.label) : panel.id, error: visibility.error, onRetry: () => void visibility.refetch() }) }));
+    }
+    if (verdict !== "visible")
+        return null;
+    return _jsx(EmbeddedScreenPanelTile, { panel: panel, target: target, translate: translate });
+}
+// Starts at render time and restarts whenever the merged query params change;
+// panels additionally report each successful (re)load, so live refetches and
+// retries keep the stamp current.
+function useLoadedAt(screenParams) {
+    const paramsKey = JSON.stringify([
+        screenParams.filterParams,
+        screenParams.rangeParams,
+        screenParams.recordParams,
+    ]);
+    const [loaded, setLoaded] = useState(() => ({ paramsKey, atMs: Date.now() }));
+    if (loaded.paramsKey !== paramsKey)
+        setLoaded({ paramsKey, atMs: Date.now() });
+    const reportLoaded = useCallback((atMs) => setLoaded((prev) => (prev.atMs >= atMs ? prev : { ...prev, atMs })), []);
+    return { loadedAtMs: loaded.atMs, reportLoaded };
+}
+const PanelLoadedContext = createContext(() => { });
+function useReportPanelLoaded(data) {
+    const reportLoaded = useContext(PanelLoadedContext);
+    useEffect(() => {
+        if (data !== null)
+            reportLoaded(Date.now());
+    }, [data, reportLoaded]);
+}
+const NO_RECORD_ROW = {};
+function recordTitleText(row, field) {
+    if (row === null || field === undefined)
+        return undefined;
+    const value = row[field];
+    if (typeof value !== "string" && typeof value !== "number")
+        return undefined;
+    return String(value) === "" ? undefined : String(value);
+}
+export function WebDashboardBody({ featureName, screen, translate, }) {
+    const t = useTranslation();
+    const effectiveTranslate = translate ?? t;
+    const { Text, Banner, PageHeader, Heading, Button, Dialog, ActionOverflowMenu, Grid } = usePrimitives();
+    const nav = useNav();
+    const headerSlotAvailable = usePageHeaderSlotAvailable();
+    const headerCompactContext = usePageHeaderCompact();
+    const { formatDateTime } = useDashboardFormats();
+    const recordBinding = screen.record;
+    const recordId = recordBinding !== undefined ? (nav.searchParams[recordBinding.param] ?? "") : "";
+    const recordMissing = recordBinding !== undefined && recordId === "";
+    const recordPayloadKey = recordBinding?.payloadKey ?? recordBinding?.param;
+    const recordParams = recordPayloadKey !== undefined && recordId !== "" ? { [recordPayloadKey]: recordId } : {};
+    const recordQueryName = recordBinding?.query;
+    const { params: filterParams, picker } = useFilterParams(screen, !recordMissing);
+    const { params: rangeParams, control: rangeControl } = useTimeRange(screen, effectiveTranslate);
+    const screenParams = { filterParams, rangeParams, recordParams };
+    const { loadedAtMs, reportLoaded } = useLoadedAt(screenParams);
+    const visibilityGates = distinctVisibilityGates(screen.panels, screenParams);
+    const gateResults = useVisibilityGateResults();
+    // The record query is not a panel query: it needs the interval before the
+    // registry context below exists, and `refresh.field` reads from its own row.
+    const [refreshIntervalMs, setRefreshIntervalMs] = useState(() => resolveRefreshIntervalMs(screen.refresh, null));
+    const recordQuery = useQuery(recordQueryName ?? "", recordParams, {
+        enabled: recordQueryName !== undefined && !recordMissing,
+        live: true,
+        ...(refreshIntervalMs !== undefined && { refetchIntervalMs: refreshIntervalMs }),
+    });
+    const { data: recordRow, refetch: refetchRecord } = recordQuery;
+    useEffect(() => {
+        setRefreshIntervalMs(resolveRefreshIntervalMs(screen.refresh, recordRow));
+    }, [screen.refresh, recordRow]);
+    const { register, refetchRegistered } = useRefetchRegistry();
+    const queryRuntime = useMemo(() => ({ refreshIntervalMs, register }), [refreshIntervalMs, register]);
+    const refetchAll = useCallback(async () => {
+        await Promise.all([
+            recordQueryName !== undefined ? refetchRecord() : Promise.resolve(),
+            refetchRegistered(),
+        ]);
+    }, [recordQueryName, refetchRecord, refetchRegistered]);
+    const [actionError, setActionError] = useState(null);
+    const idOnlyRow = useMemo(() => (recordPayloadKey !== undefined ? { id: recordId, [recordPayloadKey]: recordId } : null), [recordId, recordPayloadKey]);
+    const actionRow = recordQueryName !== undefined ? recordRow : idOnlyRow;
+    const headerActions = useRecordActions({
+        actions: actionRow !== null && !recordMissing ? screen.actions : undefined,
+        record: actionRow ?? NO_RECORD_ROW,
+        recordId,
+        translate: effectiveTranslate,
+        onWriteSuccess: refetchAll,
+    });
+    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;
+    const description = translatedDescription !== screen.description ? translatedDescription : undefined;
+    const scopeBadge = scope !== undefined ? (_jsx(StatusBadge, { tone: "accent", testId: `dashboard-${screen.id}-scope`, children: effectiveTranslate(scope.badge) })) : null;
+    if (recordMissing) {
+        return (_jsx(PageSection, { className: "flex flex-col gap-4", testId: `dashboard-${screen.id}`, children: _jsx(Banner, { variant: "info", testId: `dashboard-${screen.id}-record-missing`, children: t("kumiko.dashboard.record.missing") }) }));
+    }
+    const usesPageHeaderSlot = headerSlotAvailable && PageHeader !== undefined;
+    const recordTitle = recordTitleText(recordRow, recordBinding?.titleField);
+    const headerActionsBar = headerActions !== undefined && headerActions.length > 0 ? (_jsx(Grid, { columns: "auto", testId: `dashboard-${screen.id}-actions`, children: _jsx(HeaderActionsBar, { actions: headerActions, Button: Button, Dialog: Dialog, ActionOverflowMenu: ActionOverflowMenu, onError: setActionError, collapseAfterPrimary: usesPageHeaderSlot, compact: headerCompactContext && usesPageHeaderSlot, PageHeader: PageHeader, overflowTestId: `dashboard-${screen.id}-actions-overflow` }) })) : null;
+    // The shell header owns the title; the badge and the actions sit in it there.
+    const badgeInHeader = scopeBadge !== null && usesPageHeaderSlot;
+    const showPageHeader = usesPageHeaderSlot && (badgeInHeader || recordTitle !== undefined || headerActionsBar !== null);
+    return (_jsx(PanelLoadedContext.Provider, { value: reportLoaded, children: _jsx(DashboardQueryContext.Provider, { value: queryRuntime, children: _jsxs(PageSection, { className: "flex flex-col gap-4", testId: `dashboard-${screen.id}`, children: [showPageHeader && (_jsx(PageHeader, { ...(recordTitle !== undefined && { title: recordTitle }), ...(badgeInHeader && { status: scopeBadge }), ...(headerActionsBar !== null && { actions: headerActionsBar }) })), _jsxs("div", { className: "flex flex-wrap items-end justify-between gap-3", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [!usesPageHeaderSlot && recordTitle !== undefined && (_jsx(Heading, { variant: "page", testId: `dashboard-${screen.id}-record-title`, children: recordTitle })), !badgeInHeader && scopeBadge, picker] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [!usesPageHeaderSlot && headerActionsBar, 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] })] }), actionError !== null && (_jsx(Banner, { variant: "error", testId: "render-edit-action-error", children: actionError })), recordQuery.error !== null && recordRow === null && (_jsxs("div", { role: "alert", "data-testid": `dashboard-${screen.id}-record-error`, className: "flex flex-col items-start gap-2 text-sm", children: [_jsx("span", { className: "text-status-bad", children: dispatcherErrorText(recordQuery.error, t) }), _jsx(Button, { variant: "secondary", onClick: () => void refetchRecord(), children: t("kumiko.dashboard.panel.error.retry") })] })), 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) })), _jsxs(VisibilityQueryContext.Provider, { value: gateResults.results, children: [_jsx(VisibilityGateQueries, { gates: visibilityGates, onResult: gateResults.report, onForget: gateResults.forget }), _jsx("div", { className: "grid grid-cols-1 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(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));
+                                }) })] })] }) }) }));
+}