@cosmicdrift/kumiko-renderer 0.384.0 → 0.385.0

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

@@ -1,588 +1,16 @@
 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 { createContext, useCallback, useContext, useEffect, useMemo, useState, } from "react";
 import { ErrorReference } from "../../app/error-reference.js";
-import { currencyDecimals, EMPTY_VALUE_PLACEHOLDER } from "../../headless/index.js";
-import { dispatcherErrorText, EmbeddedScreenProvider, evalVisibleWhen, extensionSectionName, HeaderActionsBar, KumikoScreen, lastSegment, useEmbeddedScreen, useExtensionSectionComponent, useLocale, useNav, usePageHeaderCompact, usePageHeaderSlotAvailable, usePrimitives, useQuery, useRecordActions, useTranslation, useUserRoles, } from "../../index.js";
+import { dispatcherErrorText, EmbeddedScreenProvider, evalVisibleWhen, HeaderActionsBar, KumikoScreen, useEmbeddedScreen, 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 { ChartPanelBody, CustomPanelBody, FeedPanelBody, ListPanelBody, ProgressListPanelBody, StatGroupPanelBody, StatPanelBody, TextPanelBody, } from "./dashboard-panels.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) }));
-        case "link":
-            return _jsx(TextBlockLink, { block: block, translate: translate });
-    }
-}
-function TextBlockLink({ block, translate, }) {
-    const { Link } = usePrimitives();
-    const nav = useNav();
-    const userRoles = useUserRoles();
-    if (block.roles !== undefined && !block.roles.some((role) => userRoles?.includes(role))) {
-        return null;
-    }
-    const target = { screenId: lastSegment(block.screen) };
-    return (_jsx(Link, { href: nav.hrefFor(target), onPress: () => nav.navigate(target), testId: `dashboard-text-link-${target.screenId}`, 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 }));
-}
+import { DashboardQueryContext, HALF_PANEL, PanelError, PanelLoadedContext, useDashboardFormats, useDashboardQuery, useLoadedAt, useRefetchRegistry, WIDE_PANEL, } from "./dashboard-shared.js";
 // 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.
@@ -770,29 +198,6 @@ function ScreenPanelTile({ panel, featureName, translate, }) {
         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)