@butinapp/ui 0.1.0

package/dist/components/tabs.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tabs as TabsPrimitive } from 'radix-ui';
+import { cn } from '../lib/utils.js';
+// Tabs (radix). The default list is a pill rail; variant="line" is an underlined bar.
+// The trigger reads the list's variant via the named `group/list` so List + Trigger stay decoupled.
+export const Tabs = ({ className, ...props }) => (_jsx(TabsPrimitive.Root, { "data-slot": "tabs", className: cn('flex flex-col gap-3', className), ...props }));
+export const TabsList = ({ className, variant = 'pill', ...props }) => (_jsx(TabsPrimitive.List, { "data-slot": "tabs-list", "data-variant": variant, className: cn('group/list inline-flex items-center', variant === 'pill'
+        ? 'bg-muted text-muted-foreground h-9 w-fit gap-1 rounded-lg p-1'
+        : 'text-muted-foreground h-9 w-full gap-4 border-b', className), ...props }));
+export const TabsTrigger = ({ className, ...props }) => (_jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", className: cn("inline-flex cursor-pointer items-center justify-center gap-1.5 text-sm font-medium whitespace-nowrap transition-colors outline-none hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", 
+    // pill list — active trigger gets a raised card
+    'group-data-[variant=pill]/list:rounded-md group-data-[variant=pill]/list:px-2.5 group-data-[variant=pill]/list:py-1 group-data-[variant=pill]/list:data-[state=active]:bg-background group-data-[variant=pill]/list:data-[state=active]:shadow-sm', 
+    // line list — active trigger grows an underline from the list's bottom border
+    'group-data-[variant=line]/list:-mb-px group-data-[variant=line]/list:h-full group-data-[variant=line]/list:border-b-2 group-data-[variant=line]/list:border-transparent group-data-[variant=line]/list:px-0.5 group-data-[variant=line]/list:data-[state=active]:border-primary', className), ...props }));
+export const TabsContent = ({ className, ...props }) => (_jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn('flex-1 outline-none', className), ...props }));

package/dist/components/tooltip.d.ts

@@ -0,0 +1,6 @@
+import { Tooltip as TooltipPrimitive } from 'radix-ui';
+import type { ComponentProps } from 'react';
+export declare const TooltipProvider: ({ delayDuration, ...props }: ComponentProps<typeof TooltipPrimitive.Provider>) => import("react").JSX.Element;
+export declare const Tooltip: ({ ...props }: ComponentProps<typeof TooltipPrimitive.Root>) => import("react").JSX.Element;
+export declare const TooltipTrigger: import("react").ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const TooltipContent: ({ className, sideOffset, children, ...props }: ComponentProps<typeof TooltipPrimitive.Content>) => import("react").JSX.Element;

package/dist/components/tooltip.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip as TooltipPrimitive } from 'radix-ui';
+import { cn } from '../lib/utils.js';
+// Hover/focus tooltip (radix). Provider self-included so a bare <Tooltip> works without app-level wiring.
+export const TooltipProvider = ({ delayDuration = 200, ...props }) => (_jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delayDuration: delayDuration, ...props }));
+export const Tooltip = ({ ...props }) => (_jsx(TooltipProvider, { children: _jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) }));
+export const TooltipTrigger = TooltipPrimitive.Trigger;
+export const TooltipContent = ({ className, sideOffset = 4, children, ...props }) => (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Content, { "data-slot": "tooltip-content", sideOffset: sideOffset, className: cn('bg-popover text-popover-foreground z-50 w-fit rounded-md border px-2.5 py-1.5 text-xs shadow-md', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0', className), ...props, children: children }) }));

package/dist/components/truncated-cell.d.ts

@@ -0,0 +1,3 @@
+export declare const TruncatedCell: ({ text }: {
+    text: string;
+}) => import("react").JSX.Element | null;

package/dist/components/truncated-cell.js

@@ -0,0 +1,22 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Copy } from 'lucide-react';
+import { useState } from 'react';
+import { useLabels } from '../i18n/context.js';
+// A width-capped table cell for long free-text values. The value shows as one ellipsized line (a native
+// `title` gives a hover peek); clicking opens a popover holding the full, selectable, copyable value. Plain
+// useState (not a radix popover) so it opens under fireEvent.click in jsdom — radix menus need pointer-capture
+// jsdom lacks. Empty text renders nothing.
+export const TruncatedCell = ({ text }) => {
+    const t = useLabels();
+    const [open, setOpen] = useState(false);
+    const [copied, setCopied] = useState(false);
+    if (text === '') {
+        return null;
+    }
+    const copy = () => {
+        void navigator.clipboard?.writeText(text);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+    };
+    return (_jsxs("div", { className: "relative", children: [_jsx("button", { type: "button", title: text, "aria-haspopup": "dialog", "aria-expanded": open, onClick: () => setOpen((v) => !v), className: "hover:text-foreground block w-full max-w-full truncate text-left", children: text }), open && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40", onClick: () => setOpen(false), "aria-hidden": true }), _jsxs("div", { role: "dialog", className: "bg-popover absolute left-0 z-50 mt-1 w-[min(34rem,80vw)] rounded-md border p-2 shadow-md", children: [_jsx("p", { className: "max-h-[60vh] overflow-auto text-sm whitespace-pre-wrap select-text", children: text }), _jsx("div", { className: "mt-2 flex justify-end", children: _jsxs("button", { type: "button", onClick: copy, className: "text-muted-foreground hover:text-foreground inline-flex items-center gap-1 text-xs", children: [copied ? _jsx(Check, { className: "size-3.5" }) : _jsx(Copy, { className: "size-3.5" }), copied ? t.cellCopied : t.cellCopy] }) })] })] }))] }));
+};

package/dist/dashboard.d.ts

@@ -0,0 +1,12 @@
+export { DashboardRenderer } from './features/dashboard/dashboard-renderer.js';
+export type { FileDownloadStatus, TableFilesBridge } from './features/dashboard/dashboard-renderer.js';
+export { formatByRole } from './features/dashboard/format-role.js';
+export { findCumulativeColumn } from './features/dashboard/view-models.js';
+export { TimeseriesChart } from './features/dashboard/timeseries-chart.js';
+export type { ChartPoint } from './features/dashboard/view-models.js';
+export { Overview } from './features/dashboard/overview.js';
+export type { OverviewPlugin } from './features/dashboard/overview-model.js';
+export type { RollupTile, RollupBand } from './features/dashboard/rollup.js';
+export { formatSize } from './features/documents/doc-models.js';
+export { formatUsd, formatUsdCompact, formatMoney } from './lib/format.js';
+export { useEchartsTheme, asCanvasColor, grid } from './lib/echarts-theme.js';

package/dist/dashboard.js

@@ -0,0 +1,13 @@
+// @butinapp/ui/dashboard — the embeddable data-view layer: the generic descriptor-driven renderer, the
+// cross-service Overview, and the chart/format helpers a host needs to compose its own dashboards. This is
+// what an out-of-repo embed (the snapshot viewer) consumes — it carries NO Electron app chrome (see /shell).
+export { DashboardRenderer } from './features/dashboard/dashboard-renderer.js';
+export { formatByRole } from './features/dashboard/format-role.js';
+export { findCumulativeColumn } from './features/dashboard/view-models.js';
+export { TimeseriesChart } from './features/dashboard/timeseries-chart.js';
+export { Overview } from './features/dashboard/overview.js';
+// Downloadable-table file size cell used by the renderer.
+export { formatSize } from './features/documents/doc-models.js';
+// Chart/format utilities (for hosts composing their own dashboards).
+export { formatUsd, formatUsdCompact, formatMoney } from './lib/format.js';
+export { useEchartsTheme, asCanvasColor, grid } from './lib/echarts-theme.js';

package/dist/features/charts.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export declare const StatCard: ({ label, value, sub, valueClass }: {
+    label: string;
+    value: ReactNode;
+    sub?: ReactNode;
+    valueClass?: string;
+}) => import("react").JSX.Element;

package/dist/features/charts.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardContent } from '../components/card.js';
+// Compact label/value stat tile. `value`/`sub` accept rich nodes; money should be a `$` string.
+export const StatCard = ({ label, value, sub, valueClass }) => (_jsx(Card, { className: "h-full gap-0 py-3", children: _jsxs(CardContent, { className: "px-4", children: [_jsx("div", { className: "text-muted-foreground truncate text-[11px]", children: label }), _jsx("div", { className: `mt-0.5 font-mono text-lg leading-tight font-semibold break-words tabular-nums ${valueClass ?? ''}`, title: typeof value === 'string' ? value : undefined, children: value }), sub ? _jsx("div", { className: "text-muted-foreground mt-0.5 text-[10px]", children: sub }) : null] }) }));

package/dist/features/dashboard/dashboard-renderer.d.ts

@@ -0,0 +1,32 @@
+import { type CapabilityResult } from '@butinapp/sdk/data';
+import type { DailyPoint } from '@butinapp/shapes';
+import type { DataTableState } from '../../components/data-table-model.js';
+export type FileDownloadStatus = 'queued' | 'downloading' | 'done' | 'skipped' | 'error';
+export type TableFilesBridge = {
+    located: Record<string, {
+        path: string;
+        sizeBytes: number;
+    }>;
+    statuses: Record<string, FileDownloadStatus>;
+    selection: Set<string>;
+    onSelectionChange: (next: Set<string>) => void;
+    onDownload: (selection: string[] | 'all') => void;
+    onOpen: (path: string) => void;
+    busy: boolean;
+    folderPath?: string;
+    onPickFolder?: () => void;
+    onRevealFolder?: () => void;
+};
+export declare const DashboardRenderer: ({ result, daily, rowDaily, tableState, onTableStateChange, onExport, downloads, width }: {
+    result: CapabilityResult;
+    daily?: DailyPoint[];
+    rowDaily?: Record<string, Record<string, DailyPoint[]>>;
+    tableState?: DataTableState;
+    onTableStateChange?: (next: DataTableState) => void;
+    onExport?: (blob: {
+        text: string;
+        mime: string;
+    }, filename: string) => void;
+    downloads?: TableFilesBridge;
+    width?: 'auto' | 'wide' | 'narrow';
+}) => import("react").JSX.Element;

package/dist/features/dashboard/dashboard-renderer.js

@@ -0,0 +1,322 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveTableFiles } from '@butinapp/sdk/data';
+import { startCase } from '@butinapp/sdk/util';
+import { ChevronDown, ChevronRight, Download, ExternalLink, FolderCog, FolderOpen, Loader2 } from 'lucide-react';
+import { useState } from 'react';
+import { Badge } from '../../components/badge.js';
+import { Button } from '../../components/button.js';
+import { Card, CardContent, CardHeader, CardTitle } from '../../components/card.js';
+import { DataTable } from '../../components/data-table.js';
+import { Progress } from '../../components/progress.js';
+import { Sparkline } from '../../components/sparkline.js';
+import { TruncatedCell } from '../../components/truncated-cell.js';
+import { useLabels } from '../../i18n/context.js';
+import { useFormat } from '../../i18n/format-context.js';
+import { resolveNumberLocale } from '../../i18n/format.js';
+import { cn } from '../../lib/utils.js';
+import { StatCard } from '../charts.js';
+import { formatSize } from '../documents/doc-models.js';
+import { OpenFileButton, ViewFileLink } from '../documents/open-file-button.js';
+import { formatByRole } from './format-role.js';
+import { planViews } from './plan-views.js';
+import { TimeseriesChart } from './timeseries-chart.js';
+import { datasetRowId, categoricalTone, defaultTableSort, groupDailyByMonth, latestMonthDaily, monthlyAggregate, recordRows, resolveBadgeTone, seriesData, stackedSeries, statCards } from './view-models.js';
+// A table with at least this many columns is treated as "wide" and the dashboard widens its container so the
+// data breathes instead of wrapping. Content-derived layout, not a per-plugin setting.
+const WIDE_TABLE_COLS = 6;
+const Panel = ({ title, children }) => (_jsxs(Card, { className: "gap-2 py-3", children: [title ? (_jsx(CardHeader, { className: "px-4", children: _jsx(CardTitle, { className: "text-muted-foreground text-[11px] font-medium", children: title }) })) : null, _jsx(CardContent, { className: "px-4", children: children })] }));
+// Value tint for a stat whose field declared a tone (e.g. a negative spend delta reads as a win → green).
+const TONE_CLASS = {
+    positive: 'text-emerald-500',
+    negative: 'text-rose-500',
+    muted: 'text-muted-foreground'
+};
+const StatView = ({ ds, fields, locale }) => {
+    const t = useLabels();
+    return (_jsx("div", { className: "grid grid-cols-2 gap-2 sm:grid-cols-4", children: statCards(ds, fields, locale).map((c) => (_jsx(StatCard, { label: t.s(c.label), valueClass: c.tone ? TONE_CLASS[c.tone] : undefined, value: _jsxs("span", { children: [c.value, c.unit ? _jsxs("span", { className: "text-muted-foreground text-xs font-normal", children: [" ", c.unit] }) : null, c.denominator ? (_jsxs("span", { className: "text-muted-foreground text-sm font-normal", children: [" / ", c.denominator] })) : null] }), sub: c.progress != null || c.caption ? (_jsxs("div", { className: "flex flex-col gap-1", children: [c.progress != null ? (_jsxs("div", { className: "mt-1 flex items-center gap-2", children: [_jsx(Progress, { value: c.progress }), c.percentLabel ? (_jsx("span", { className: "text-muted-foreground shrink-0 text-[10px] tabular-nums", children: c.percentLabel })) : null] })) : null, c.caption ? _jsx("span", { children: c.caption }) : null] })) : undefined }, c.key))) }));
+};
+const KeyValueView = ({ ds, title, fields, locale }) => {
+    const t = useLabels();
+    return (_jsx(Panel, { title: title, children: _jsx("dl", { className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs", children: recordRows(ds, fields, locale).map((r) => (_jsxs("div", { className: "contents", children: [_jsx("dt", { className: "text-muted-foreground", children: t.s(r.label) }), _jsx("dd", { className: "text-right tabular-nums", children: r.value })] }, r.label))) }) }));
+};
+// Render one cell body by its column's semantic role: a url → external-link icon, a status → sentiment badge,
+// a category → distinct-hue badge, a truncatable free-text → a peek/copy cell, everything else → formatByRole.
+// Shared by the main table and a nested row-detail table so both format identically.
+const renderRoleCell = (c, raw, locale) => {
+    if (c.role === 'url' && typeof raw === 'string' && raw !== '') {
+        return (_jsx("a", { href: raw, target: "_blank", rel: "noreferrer", className: "text-muted-foreground hover:text-foreground inline-flex", children: _jsx(ExternalLink, { className: "size-3.5" }) }));
+    }
+    if (c.role === 'status' && raw != null && raw !== '') {
+        // Sentiment tone inferred from the value (a `badges` override wins); the label is title-cased so a machine
+        // enum ('past_due', 'paid') reads cleanly without each plugin pre-formatting it.
+        return _jsx(Badge, { variant: resolveBadgeTone(raw, c.badges), children: startCase(String(raw)) });
+    }
+    if (c.role === 'category' && raw != null && raw !== '') {
+        // A distinct, stable hue per value (no sentiment) — same value, same color everywhere.
+        return _jsx(Badge, { variant: categoricalTone(raw), children: startCase(String(raw)) });
+    }
+    if (c.truncate && raw != null && raw !== '') {
+        return _jsx(TruncatedCell, { text: String(raw) });
+    }
+    return formatByRole(raw, c.role, c.currency, locale);
+};
+// A parent row's expanded detail: a compact table of the child dataset's rows (already filtered to this
+// parent), drawn with the child's own column roles.
+const DetailTable = ({ ds, rows, locale }) => {
+    const t = useLabels();
+    const cols = ds.columns.filter((c) => !c.hidden);
+    const alignRight = (c) => c.role === 'money' || c.role === 'count' || c.role === 'percent';
+    return (_jsx("div", { className: "px-2 py-1.5", children: _jsxs("table", { className: "w-full text-xs", children: [_jsx("thead", { className: "text-muted-foreground text-[10px] tracking-wide uppercase", children: _jsx("tr", { className: "text-left", children: cols.map((c) => (_jsx("th", { className: cn('py-1 pr-4 font-medium', alignRight(c) && 'text-right'), children: t.s(c.label ?? c.key) }, c.key))) }) }), _jsx("tbody", { children: rows.map((row, i) => (_jsx("tr", { className: "border-border/40 border-t", children: cols.map((c) => (_jsx("td", { className: cn('py-1 pr-4 tabular-nums', alignRight(c) && 'text-right'), children: renderRoleCell(c, row[c.key], locale) }, c.key))) }, i))) })] }) }));
+};
+const TableView = ({ ds, title, columns, groupBy, locale, tableState, onTableStateChange, onExport, files, downloads, rowDaily, detailDataset, detailOn }) => {
+    const t = useLabels();
+    const getRowId = (row) => String(ds.rows.indexOf(row));
+    // A table with a date column opens newest-first; a saved sort pref (loaded into tableState) always wins.
+    const initialState = tableState?.sort
+        ? tableState
+        : { ...tableState, sort: defaultTableSort(ds.columns) };
+    const downloadable = Boolean(files && downloads);
+    const resolved = downloadable ? resolveTableFiles(files) : undefined;
+    // Columns with hidden:true are machinery fields (accumulation keys, download filenames, fetchFile payloads)
+    // that must not appear in the table body — filter them out before anything else.
+    const picked = (columns ? columns.map((k) => ds.columns.find((c) => c.key === k)).filter((c) => c != null) : ds.columns).filter((c) => !c.hidden);
+    // The groupBy column renders as the section header, not a body column. For a downloadable table the url
+    // column also leaves the body — it folds into the trailing View/Open action — so every download panel ends
+    // in `… Size · action`.
+    const hidden = new Set([
+        ...(groupBy ? [groupBy] : []),
+        ...(downloadable && resolved?.urlKey ? [resolved.urlKey] : [])
+    ]);
+    const body = picked.filter((c) => !hidden.has(c.key));
+    const cols = body.map((c) => ({
+        key: c.key,
+        label: t.s(c.label ?? c.key),
+        align: c.role === 'money' || c.role === 'count' || c.role === 'percent' ? 'right' : 'left',
+        // Short fixed-width roles stay on one line; free text (label/text/url) wraps + absorbs the slack.
+        noWrap: ['timestamp', 'money', 'count', 'percent', 'status', 'identifier'].includes(c.role),
+        // A truncated column is the greedy one — it fills the leftover row width and ellipsizes there.
+        grow: c.truncate,
+        // Floor the amount columns so the greedy column can't squeeze them below a comfortable width. Dates don't
+        // need a floor — the 'Order date' header already sizes the column wider than a 'YYYY-MM-DD' value.
+        minWidth: c.role === 'money' ? 'min-w-24' : undefined,
+        sortValue: (row) => {
+            const raw = row[c.key];
+            return typeof raw === 'number' ? raw : raw == null ? undefined : String(raw);
+        },
+        exportValue: (row) => {
+            const raw = row[c.key];
+            return typeof raw === 'number' ? raw : raw == null ? undefined : String(raw);
+        },
+        cell: (row) => renderRoleCell(c, row[c.key], locale)
+    }));
+    // A cumulative column (an MTD-per-row counter) with a per-row daily series → a trailing Trend column: each
+    // row's current-month day-over-day series as a sparkline. Fewer than two days this month (or no series)
+    // renders an em dash. The column is informational, so it never sorts/exports.
+    const trendCol = rowDaily ? ds.columns.find((c) => c.accrual === 'cumulative') : undefined;
+    if (trendCol) {
+        cols.push({
+            key: '__trend',
+            label: t.s('Trend'),
+            align: 'right',
+            sortable: false,
+            hideable: false,
+            cell: (row) => {
+                const id = datasetRowId(row, ds.key);
+                const month = latestMonthDaily(id ? (rowDaily[id] ?? []) : []);
+                return month.length >= 2 ? (_jsx(Sparkline, { values: month.map((p) => p.value), className: "text-foreground/70" })) : (_jsx("span", { className: "text-muted-foreground", children: "\u2014" }));
+            }
+        });
+    }
+    // Downloadable tables end in two fixed columns: Size (on-disk size) second-to-last, then the trailing
+    // action last. The action is additive + state-aware: View (when the row has a urlKey URL — opens it
+    // externally) and Open (once on disk) can both show; a spinner while fetching; '—' when there's neither.
+    if (downloadable) {
+        const urlKey = resolved.urlKey;
+        const rowUrl = (row) => {
+            const raw = urlKey ? row[urlKey] : undefined;
+            return typeof raw === 'string' && raw !== '' ? raw : undefined;
+        };
+        cols.push({
+            key: '__size',
+            label: t.s('Size'),
+            align: 'right',
+            sortable: false,
+            hideable: false,
+            minWidth: 'min-w-20',
+            cell: (row) => {
+                const loc = downloads.located[getRowId(row)];
+                return loc ? formatSize(loc.sizeBytes) : '—';
+            }
+        });
+        cols.push({
+            key: '__files',
+            label: '',
+            align: 'right',
+            sortable: false,
+            hideable: false,
+            exportValue: (row) => {
+                const loc = downloads.located[getRowId(row)];
+                return loc ? loc.path : rowUrl(row);
+            },
+            cell: (row) => {
+                const id = getRowId(row);
+                const loc = downloads.located[id];
+                const url = rowUrl(row);
+                const actions = [];
+                if (url) {
+                    actions.push(_jsx(ViewFileLink, { url: url }, "view"));
+                }
+                if (loc) {
+                    actions.push(_jsx(OpenFileButton, { onClick: () => downloads.onOpen(loc.path) }, "open"));
+                }
+                else if (downloads.statuses[id] === 'downloading') {
+                    actions.push(_jsx(Loader2, { className: "text-muted-foreground size-3.5 animate-spin" }, "spin"));
+                }
+                return actions.length > 0 ? (_jsx("div", { className: "flex items-center justify-end gap-1", children: actions })) : (_jsx("span", { className: "text-muted-foreground", children: "\u2014" }));
+            }
+        });
+    }
+    const selectedIds = downloadable ? [...downloads.selection] : [];
+    const actionBar = downloadable && downloads ? (_jsxs(_Fragment, { children: [downloads.folderPath ? (_jsxs("div", { className: "text-muted-foreground mr-auto flex min-w-0 items-center gap-1.5 text-xs", children: [_jsx("span", { className: "shrink-0", children: t.documentsFolderLabel }), _jsx("span", { className: "truncate font-mono", children: downloads.folderPath }), downloads.onPickFolder ? (_jsxs("button", { onClick: downloads.onPickFolder, className: "hover:text-foreground inline-flex items-center gap-1", children: [_jsx(FolderCog, { className: "size-3.5" }), " ", t.documentsChangeFolder] })) : null] })) : null, downloads.onRevealFolder ? (_jsxs(Button, { size: "xs", variant: "ghost", onClick: downloads.onRevealFolder, children: [_jsx(FolderOpen, {}), " ", t.openFolder] })) : null, _jsxs(Button, { size: "xs", variant: "outline", disabled: downloads.busy, onClick: () => downloads.onDownload('all'), children: [downloads.busy ? _jsx(Loader2, { className: "animate-spin" }) : _jsx(Download, {}), " ", t.downloadAll] }), _jsxs(Button, { size: "xs", disabled: downloads.busy || selectedIds.length === 0, onClick: () => downloads.onDownload(selectedIds), children: [downloads.busy ? _jsx(Loader2, { className: "animate-spin" }) : _jsx(Download, {}), ' ', t.downloadSelected(selectedIds.length)] })] })) : undefined;
+    // Collapsible sections keyed by the groupBy column; for a downloadable grouped table each section gets a
+    // "Download N selected" action (only when rows in it are checked), mirroring the per-group download.
+    const grouped = groupBy != null
+        ? {
+            by: (row) => String(row[groupBy] ?? 'Other'),
+            groupAction: downloadable && downloads
+                ? (_key, _ids, selectedIds) => selectedIds.length > 0 ? (_jsx(Button, { size: "xs", variant: "ghost", disabled: downloads.busy, onClick: () => downloads.onDownload(selectedIds), children: t.downloadSelected(selectedIds.length) })) : null
+                : undefined
+        }
+        : undefined;
+    // Row expansion. An explicit row-detail binding (a static child table) wins; otherwise a cumulative column
+    // with a per-row daily series expands each row to its real per-day usage (the same derived series the Trend
+    // column draws) so the day-by-day breakdown is readable even when the sparkline can't draw yet.
+    const expandable = detailDataset && detailOn
+        ? (row) => {
+            const parentVal = row[detailOn];
+            const childRows = detailDataset.rows.filter((r) => r[detailOn] === parentVal);
+            return childRows.length > 0 ? _jsx(DetailTable, { ds: detailDataset, rows: childRows, locale: locale }) : null;
+        }
+        : trendCol
+            ? (row) => {
+                const id = datasetRowId(row, ds.key);
+                const series = id ? rowDaily[id] : undefined;
+                return series && series.length > 0 ? (_jsx(DailyDetail, { series: series, role: trendCol.role, currency: trendCol.currency, locale: locale })) : null;
+            }
+            : undefined;
+    return (_jsx(Panel, { title: title, children: _jsx(DataTable, { columns: cols, rows: ds.rows, getRowId: getRowId, selection: downloadable ? downloads.selection : undefined, onSelectionChange: downloadable ? downloads.onSelectionChange : undefined, grouped: grouped, expandable: expandable, actionBar: actionBar, paginated: true, toolbar: { search: true, columns: true }, 
+            // The search floats into the panel's title row; without a title there's no row to float into, so it
+            // sits inline instead of drifting into the empty space above the card.
+            searchFloating: Boolean(title), initialState: initialState, onStateChange: onTableStateChange, onExport: onExport, exportName: ds.id }) }));
+};
+const MONTHS3 = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+// Short axis label for an x key: a 'YYYY-MM' month → "Feb '26", a 'YYYY-MM-DD' day → "Feb 3", else the key.
+const axisLabel = (key) => {
+    const month = /^(\d{4})-(\d{2})$/.exec(key);
+    if (month) {
+        return `${MONTHS3[Number(month[2]) - 1] ?? month[2]} '${month[1].slice(2)}`;
+    }
+    const day = /^\d{4}-(\d{2})-(\d{2})$/.exec(key);
+    return day ? `${MONTHS3[Number(day[1]) - 1] ?? day[1]} ${Number(day[2])}` : key;
+};
+// The expanded per-row detail for a cumulative column: a compact trend of the current month's daily series
+// (drawn only when there are at least two days to trend) plus month sections — newest month first, days
+// ascending within each, with the month's subtotal. Only the current month opens by default; previous months
+// stay collapsed behind their header and expand individually, so a long history reads by period. Each value is
+// formatted by the column's role and estimated days are flagged.
+const DailyDetail = ({ series, role, currency, locale }) => {
+    const t = useLabels();
+    const groups = groupDailyByMonth(series);
+    // Newest month open, the rest collapsed.
+    const [open, setOpen] = useState(() => new Set(groups[0] ? [groups[0].month] : []));
+    const toggle = (month) => setOpen((prev) => {
+        const next = new Set(prev);
+        if (next.has(month)) {
+            next.delete(month);
+        }
+        else {
+            next.add(month);
+        }
+        return next;
+    });
+    const trend = groups[0]?.points ?? [];
+    return (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "text-muted-foreground flex items-center gap-2 text-[10px] font-medium tracking-wide uppercase", children: [t.perDayHeading, trend.length >= 2 ? _jsx(Sparkline, { values: trend.map((p) => p.value), className: "text-foreground/70" }) : null] }), groups.map((g) => {
+                const isOpen = open.has(g.month);
+                return (_jsxs("div", { className: "space-y-1", children: [_jsxs("button", { onClick: () => toggle(g.month), "aria-expanded": isOpen, className: "hover:text-foreground flex w-full items-center justify-between border-b pb-0.5 text-[11px]", children: [_jsxs("span", { className: "text-foreground inline-flex items-center gap-1 font-medium", children: [isOpen ? _jsx(ChevronDown, { className: "size-3" }) : _jsx(ChevronRight, { className: "size-3" }), g.label] }), _jsx("span", { className: "text-muted-foreground tabular-nums", children: formatByRole(g.subtotal, role, currency, locale) })] }), isOpen ? (_jsx("ul", { className: "grid grid-cols-2 gap-x-6 gap-y-0.5 text-xs sm:grid-cols-3 lg:grid-cols-4", children: g.points.map((p) => (_jsxs("li", { className: "flex items-center justify-between gap-3", children: [_jsx("span", { className: "text-muted-foreground", children: axisLabel(p.date) }), _jsxs("span", { className: "tabular-nums", children: [formatByRole(p.value, role, currency, locale), p.estimated ? _jsxs("span", { className: "text-muted-foreground/70", children: [" ", t.estimatedTag] }) : null] })] }, p.date))) })) : null] }, g.month));
+            })] }));
+};
+const renderView = (view, dataset, locale, tx, tableProps, daily, downloads, rowDaily, currentMonthEstimate, byId) => {
+    const title = view.title ? tx(view.title) : undefined;
+    if (view.type === 'stat' && dataset.shape === 'record') {
+        return _jsx(StatView, { ds: dataset, fields: view.fields, locale: locale });
+    }
+    if (view.type === 'keyvalue' && dataset.shape === 'record') {
+        return _jsx(KeyValueView, { ds: dataset, title: title, locale: locale });
+    }
+    if (view.type === 'table' && dataset.shape === 'table') {
+        // Resolve a row-detail binding to its child TABLE dataset; a dangling or non-table ref just drops the
+        // expansion (the validator already flags it) rather than blanking the table.
+        const child = view.detail ? byId?.get(view.detail.dataset) : undefined;
+        const detailDataset = child?.shape === 'table' ? child : undefined;
+        return (_jsx(TableView, { ds: dataset, title: title, columns: view.columns, groupBy: view.groupBy, locale: locale, tableState: tableProps?.state, onTableStateChange: tableProps?.onStateChange, onExport: tableProps?.onExport, files: view.files, downloads: view.files ? downloads : undefined, rowDaily: rowDaily?.[dataset.id], detailDataset: detailDataset, detailOn: detailDataset ? view.detail?.on : undefined }));
+    }
+    if (view.type === 'timeseries' && dataset.shape === 'table') {
+        // Every timeseries draws on the rich TimeseriesChart (single or stacked). The host normalizes the dataset
+        // into `monthly` (always) + an optional per-day `daily` series by source granularity: a daily-source view
+        // opens in Monthly mode (its days aggregated) and drills into days; a monthly-source single series uses the
+        // host-derived `daily` for its drill-down and gap-fills its month axis; a stacked monthly series pivots to
+        // long-format monthly points with no daily drill.
+        const yCol = dataset.columns.find((c) => c.key === view.y);
+        const isMoney = yCol?.role === 'money';
+        const { x, y, stackBy } = view;
+        const points = view.granularity === 'daily'
+            ? (() => {
+                const raw = dataset.rows.map((r) => ({
+                    key: String(r[x] ?? ''),
+                    value: Number(r[y]) || 0,
+                    ...(stackBy ? { category: String(r[stackBy] ?? '') } : {})
+                }));
+                return { monthly: monthlyAggregate(raw), daily: raw };
+            })()
+            : stackBy
+                ? (() => {
+                    const { labels, series } = stackedSeries(dataset, x, y, stackBy);
+                    const monthly = series.flatMap((s) => labels.map((key, i) => ({ key, value: s.values[i] ?? 0, category: s.name })));
+                    return { monthly };
+                })()
+                : (() => {
+                    const s = seriesData(dataset, x, y);
+                    const monthly = s.labels.map((key, i) => ({ key, value: s.values[i] ?? 0 }));
+                    return { monthly, daily: daily?.map((p) => ({ key: p.date, value: p.value, estimated: p.estimated })) };
+                })();
+        return (_jsx(TimeseriesChart, { monthly: points.monthly, daily: points.daily, isMoney: isMoney, currency: yCol?.currency, title: title, height: stackBy ? 200 : 170, estimateCurrentMonth: !stackBy && view.granularity === 'monthly' ? currentMonthEstimate : undefined }));
+    }
+    return null;
+};
+// The generic, descriptor-driven dashboard. Resolves each declarative view to its dataset (planViews,
+// which also synthesizes defaults + skips dangling refs) and renders the matching generic view. Plugins
+// emit a CapabilityResult — no per-kind React. Locale/labels come from context (English by default).
+// Table prefs (persistence) + export are host concerns, threaded through to every table view.
+export const DashboardRenderer = ({ result, daily, rowDaily, tableState, onTableStateChange, onExport, downloads, width = 'auto' }) => {
+    const t = useLabels();
+    const prefs = useFormat();
+    const numberLocale = resolveNumberLocale(prefs.currencyStyle, t.intlLocale);
+    const plans = planViews(result);
+    // Every dataset by id, so a table view's row-detail binding can resolve its child dataset.
+    const byId = new Map(result.datasets.map((d) => [d.id, d]));
+    // A running (not yet settled) MTD figure projects the open month onto the monthly chart as an estimate. Only
+    // a live basis qualifies — an invoiced/last-invoice figure is already a completed bar in the series.
+    const mtd = result.summaries?.find((s) => s.section === 'spend');
+    const currentMonthEstimate = mtd && (mtd.basis === 'accrued' || mtd.basis === 'upcoming') ? mtd.value : undefined;
+    // Width tier: a roomy container lets a dense (many-column) table breathe; the narrow cap keeps a result of
+    // only small panels (record/keyvalue/stat) or slim tables from sprawling across a wide monitor. When the
+    // host pins the tier (`wide`/`narrow`) that wins; otherwise it's derived from the densest table's columns.
+    const maxTableCols = Math.max(0, ...plans.map((p) => (p.dataset.shape === 'table' ? p.dataset.columns.length : 0)));
+    const wide = width === 'auto' ? maxTableCols >= WIDE_TABLE_COLS : width === 'wide';
+    // Centered, width-capped so the content doesn't stretch edge-to-edge on a wide monitor. A 2-column grid
+    // lets narrow `keyvalue` panels (account, payment method) sit side by side; stat rows, charts, and tables
+    // span the full width. Single column below md. Each cell is `min-w-0` so a wide table's intrinsic content
+    // width can't blow the track past the capped container — without it the grid item's default
+    // `min-width: auto` lets a freshly-mounted table flash full-width for a frame before snapping to the cap.
+    return (_jsx("div", { className: cn('mx-auto grid w-full grid-cols-1 gap-3 md:grid-cols-2', wide ? 'max-w-[110rem]' : 'max-w-6xl'), children: plans.map((p, i) => (_jsx("div", { className: cn('min-w-0', p.view.type === 'keyvalue' ? 'md:col-span-1' : 'md:col-span-2'), children: renderView(p.view, p.dataset, numberLocale, t.s, { state: tableState, onStateChange: onTableStateChange, onExport }, daily, downloads, rowDaily, currentMonthEstimate, byId) }, i))) }));
+};

package/dist/features/dashboard/format-role.d.ts

@@ -0,0 +1,2 @@
+import { type SemanticRole } from '@butinapp/sdk/data';
+export declare const formatByRole: (value: unknown, role: SemanticRole, currency?: string, locale?: string) => string;

package/dist/features/dashboard/format-role.js

@@ -0,0 +1,26 @@
+import {} from '@butinapp/sdk/data';
+// The single value -> display-string formatter, keyed by a column's semantic role. `currency` (ISO 4217)
+// applies only to the 'money' role and defaults to USD. `locale` (BCP-47) drives Intl number formatting
+// and defaults to en-US. null/undefined/'' render as an em dash. A value that can't be coerced to a
+// number in a numeric role falls back to its raw string form.
+export const formatByRole = (value, role, currency = 'USD', locale = 'en-US') => {
+    if (value == null || value === '') {
+        return '—';
+    }
+    if (role === 'money' || role === 'count' || role === 'percent') {
+        const n = Number(value);
+        if (!Number.isFinite(n)) {
+            return String(value);
+        }
+        if (role === 'money') {
+            return n.toLocaleString(locale, { style: 'currency', currency });
+        }
+        if (role === 'count') {
+            return n.toLocaleString(locale);
+        }
+        // percent: the value is a 0..1 fraction (0.46 → "46%"); Intl's percent style scales + appends the sign.
+        return n.toLocaleString(locale, { style: 'percent', maximumFractionDigits: 1 });
+    }
+    // timestamp, status, label, identifier, url, text — shown verbatim
+    return String(value);
+};

package/dist/features/dashboard/overview-model.d.ts

@@ -0,0 +1,59 @@
+import { type MonthPoint, type Summary } from '@butinapp/sdk/data';
+import { type FxRates } from '@butinapp/sdk/util';
+import { type DailyPoint, type OverviewPlugin } from '@butinapp/shapes';
+export type { MonthPoint, OverviewPlugin };
+export interface MonthStats {
+    mtd: number;
+    lastFullMonth: number;
+    annualizedRunRate: number;
+}
+export interface Mover {
+    pluginId: string;
+    pluginName: string;
+    color?: string;
+    icon?: string;
+    delta: number;
+    pct: number;
+}
+export interface ByServiceRow {
+    pluginId: string;
+    pluginName: string;
+    color?: string;
+    icon?: string;
+    mtd: number;
+    lastMo: number;
+    prevMo: number;
+    momPct: number;
+    share: number;
+    spark: number[];
+    byMonth: Record<string, number>;
+    total: number;
+}
+export declare const currentMtd: (p: OverviewPlugin, nowMonth: string, baseCurrency?: string, rates?: FxRates) => number;
+export declare const combinedMonthly: (plugins: OverviewPlugin[], baseCurrency?: string, rates?: FxRates) => MonthPoint[];
+export declare const combinedDaily: (plugins: OverviewPlugin[], baseCurrency?: string, rates?: FxRates) => DailyPoint[];
+export declare const monthStats: (plugins: OverviewPlugin[], nowMonth: string, baseCurrency?: string, rates?: FxRates) => MonthStats;
+export declare const movers: (plugins: OverviewPlugin[], from: string, to: string, baseCurrency?: string, rates?: FxRates) => {
+    increases: Mover[];
+    drops: Mover[];
+};
+export declare const byServiceRows: (plugins: OverviewPlugin[], nowMonth: string, baseCurrency?: string, rates?: FxRates) => ByServiceRow[];
+export declare const windowTotal: (row: ByServiceRow, months: string[], nowMonth: string) => number;
+export interface SpendBreakdownRow {
+    currency: string;
+    mtd: number;
+    convertible: boolean;
+}
+export interface SpendBreakdown {
+    rows: SpendBreakdownRow[];
+    unconverted: number;
+}
+export declare const spendBreakdown: (plugins: OverviewPlugin[], nowMonth: string, baseCurrency?: string, rates?: FxRates) => SpendBreakdown;
+export declare const monthColumns: (plugins: OverviewPlugin[], nowMonth: string, max?: number) => string[];
+export declare const pickHeadline: (p: OverviewPlugin) => Summary | undefined;
+export interface Partitioned {
+    spend: OverviewPlugin[];
+    balances: OverviewPlugin[];
+    others: OverviewPlugin[];
+}
+export declare const partition: (plugins: OverviewPlugin[]) => Partitioned;