@columenlabs/lumen-ui 0.0.0-stage → 0.2.1

package/dist/lumen-view.js

@@ -0,0 +1,645 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { controlOn, isCountAgg, isDollarFormat, viewPageSizes, viewPaginationSchema, } from '@columenlabs/lumen-ui-types/views';
+// Custom views: any number of views on any app, one page for all of them.
+// A data domain (holdings, chains, bars, series, research results) describes its fields once in a
+// `ViewDomain`; a view is a saved `CustomViewConfig` over that domain, written in the page's Edit
+// dialog or by an agent through MCP. This file is LumenView, the view as a card (its table, grouped
+// one level deep with collapsible group rows, pivot, totals, sorting, paging), LumenTable and the
+// details drawer; LumenLayout (lumen-layout.tsx) is the page around it. Rows are the ones the app
+// already loaded; everything here runs on the client.
+import { DndContext, closestCenter } from '@dnd-kit/core';
+import { SortableContext, rectSortingStrategy } from '@dnd-kit/sortable';
+import { createPaginatedRowModel, createSortedRowModel, flexRender, rowPaginationFeature, rowSortingFeature, sortFns, tableFeatures, useTable, } from '@tanstack/react-table';
+import { ArrowDownIcon, ArrowUpIcon, ChartCandlestick, ChartSpline, ChevronLeftIcon, ChevronRightIcon, ChevronsDownIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, Columns3CogIcon, CornerDownRightIcon, DownloadIcon, Grid3x3Icon, LayoutDashboardIcon, PencilIcon, PlusIcon, Settings2Icon, SigmaIcon, SparklesIcon, TableIcon, UserPenIcon, } from 'lucide-react';
+import Papa from 'papaparse';
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useAssistantNote } from './assistant-context.js';
+import { ColorChip, ColorDot } from './color-dot.js';
+import { DrawerSection } from './drawer-section.js';
+import { useFloatingHead } from './floating-head.js';
+import { FreshnessMark, freshnessLine, freshnessOf } from './freshness.js';
+import { useIsMobile } from './hooks/use-mobile.js';
+import { IconButton } from './icon-button.js';
+import { cn } from './lib/utils.js';
+import { LumenTokenizedFilter, useLumenFilter, } from './lumen-filter.js';
+import { useGridCell } from './lumen-grid.js';
+import { LumenSelector } from './lumen-selector.js';
+import { LumenLazy, LumenLoadFooter, LumenRefresh, LumenSkeleton, LumenStates, useLiveLoad, } from './lumen-source.js';
+import { LumenWidget } from './lumen-widget.js';
+import { MAX_COMPARE, useSymbolChart } from './market/lumen-chart.js';
+import { Page } from './page.js';
+import { LumenPager } from './pager.js';
+import { maskAmount, useAmountsHidden } from './shell.js';
+import { useSymbolSheet } from './symbol-sheet-context.js';
+import { Tile } from './tile.js';
+import { Badge } from './ui/badge.js';
+import { Button } from './ui/button.js';
+import { Card } from './ui/card.js';
+import { Checkbox } from './ui/checkbox.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, } from './ui/dropdown-menu.js';
+import { Popover, PopoverAnchor, PopoverContent } from './ui/popover.js';
+import { Skeleton } from './ui/skeleton.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './ui/table.js';
+import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.js';
+import { EditCell, EditInputCell, EditManyCell } from './view-edit-cell.js';
+import { ViewEditDialog } from './view-editor.js';
+import { fieldOptions } from './view-formulas.js';
+import { CHIP_TONE, FORMULAS_GROUP, chipsOf, computedOf, filterFieldsOf, groupOf, label, pick, rollUp, rollsUp, subgroupOf, withSavedFilters, withViewFields, } from './view-model.js';
+export { CHIP_TONE, FORMULAS_GROUP, RUN_STATE_TONE } from './view-model.js';
+export { rollUp } from './view-model.js';
+/** Rows a table draws per group, or per unpaged table, before "Show more". */
+const DRAW_STEP = 200;
+/** Past this many rows a grouped table opens with only its first group open. */
+const OPEN_ALL = 500;
+/**
+ * Rows that share the domain's merge key, folded into one row each: within each group, or across
+ * every row when nothing is grouped (no duplicate rows in the flat table).
+ */
+export function mergeRows(domain, rows, groupBy) {
+    const merge = domain.merge;
+    if (!merge)
+        return rows;
+    const m = new Map();
+    for (const r of rows) {
+        const k = `${groupBy ? label(groupBy.value(r)) : ''}\u0000${merge.key(r)}`;
+        const b = m.get(k);
+        b ? b.push(r) : m.set(k, [r]);
+    }
+    return [...m.values()].map((rs) => (rs.length > 1 ? merge.rows(rs) : rs[0]));
+}
+const MINUS = '−';
+/** Text cells longer than this many characters are cut to one line with a tooltip. */
+const LONG_TEXT = 48;
+/** Rows of a view the assistant sees with each message. */
+const ASSISTANT_ROWS = 10;
+const formatter = (digits) => new Intl.NumberFormat('en-US', { minimumFractionDigits: digits, maximumFractionDigits: digits });
+const FMT = { 0: formatter(0), 2: formatter(2) };
+/** Integer: no decimals and no thousands commas (a year reads 2026). */
+const PLAIN = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0, useGrouping: false });
+const digitsOf = (format, compact) => compact || format === 'compact'
+    ? COMPACT
+    : format === 'integer'
+        ? PLAIN
+        : format === 'rounded' || format === 'price_rounded'
+            ? FMT[0]
+            : FMT[2];
+const COMPACT = new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 });
+/** A value as its field's format reads: tabular figures, a true minus, gain/loss on signed values. */
+export function ViewValueCell({ value, format, chip, tone, color, amount, compact, empty, }) {
+    const hidden = useAmountsHidden() && !!amount;
+    if (value === null || (typeof value === 'number' && !Number.isFinite(value))) {
+        return _jsx("span", { className: "num text-muted-foreground", children: empty ?? '—' });
+    }
+    if (chip && typeof value === 'string')
+        return color ? (_jsx(ColorChip, { color: color, children: value })) : (_jsx(Badge, { variant: "secondary", className: cn('font-normal', tone && CHIP_TONE[tone]), children: value }));
+    if (color && typeof value === 'string')
+        return (_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1", children: [_jsx(ColorDot, { color: color, className: "size-3" }), _jsx("span", { className: "truncate", children: value })] }));
+    if (typeof value === 'string' || format === 'text') {
+        const text = hidden ? maskAmount(String(value)) : String(value);
+        // Long text stays on one line, cut with an ellipsis; the whole text shows on hover.
+        if (text.length <= LONG_TEXT)
+            return _jsx("span", { children: text });
+        return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "block max-w-[24rem] truncate", children: text }) }), _jsx(TooltipContent, { className: "max-w-md whitespace-normal", children: text })] }));
+    }
+    const abs = hidden ? maskAmount('0') : digitsOf(format, compact).format(Math.abs(value));
+    const signed = format === 'signed' || format === 'percent' || format === 'price_signed';
+    const sign = value < 0 ? MINUS : signed && value > 0 ? '+' : '';
+    const dollar = isDollarFormat(format) ? '$' : '';
+    return (_jsx("span", { className: cn('num whitespace-nowrap', signed && (value > 0 ? 'text-gain' : value < 0 ? 'text-loss' : '')), children: `${sign}${dollar}${abs}${format === 'percent' || format === 'weight' ? '%' : ''}` }));
+}
+/** A row's first cell with its inline chips (a view's `inline` chips), editable where the field is. */
+function FirstCell({ value, chips, }) {
+    return (_jsxs("span", { className: "flex items-center gap-1.5 whitespace-nowrap", children: [value, chips.map((c) => (_jsx(Fragment, { children: c.node }, c.key)))] }));
+}
+/** The row styling every Total and group header shares. */
+const ROLLUP = 'bg-muted/50 font-medium hover:bg-muted/50';
+// One scroller for the whole view: the tiles, filter and table scroll together
+// in one box, one screen tall, so a swipe never stalls where the header pins and the tiles leave the
+// screen before the rows move. The header and group rows pin with native sticky inside it (the shadcn
+// sticky-header data table pattern); group rows sit right under the header, overlapping it by 1px so
+// no gap ever shows, and the next group row slides over the one pinned. Wide tables scroll sideways
+// in the same box while the tiles and filter stay put. Cards draw their outline as a border inside
+// their box, so no scroller clips it. The box spans the
+// page edge to edge and draws the gutter and max width as its own side padding, so its scrollbar sits
+// at the screen's edge, never over the cards; its page body drops its side
+// padding and max width (`VIEW_PAGE`).
+// The bottom gutter is its padding too, and the box is always one screen tall (not just at most), so a
+// sideways scrollbar sits on the status bar even on a short page, never floating inside it. Rows pinned to the view's width use `--view-w`, the box's width less its gutters and
+// scrollbar (`100cqw` counts the scrollbar, so it alone overflows by the bar's width and draws a
+// needless sideways bar); the scroller sets `--view-sb` to its vertical bar's width.
+export const VIEW_SCROLL = '@container h-[calc(100svh-var(--shell-header-height)-var(--shell-status-height)-var(--shell-gutter))] overflow-auto px-[max(var(--shell-gutter),calc((100%-var(--shell-max-width))/2+var(--shell-gutter)))] pb-(--shell-gutter) [--view-w:calc(100cqw-var(--view-sb,0px))]';
+/** The page body around `VIEW_SCROLL`: the scroller draws the side and bottom gutter and max width. */
+export const VIEW_PAGE = 'max-w-none px-0 pb-0';
+/** A fit table's text cells wrap (numbers keep their own nowrap), so the table fits its width. */
+const FIT = '[&_td]:whitespace-normal [&_td]:break-words [&_th]:whitespace-normal';
+/** The table inside the view's scroller: it never scrolls on its own, so sticky rows pin to the view.
+ *  It clips up and down (clip, unlike hidden, makes no scroller), which hides the pinned header's
+ *  cap while the header sits at the table's top. */
+const IN_VIEW = '[&>[data-slot=table-container]]:overflow-x-visible [&>[data-slot=table-container]]:overflow-y-clip';
+/** A pinned header cell. Its cap fills the band between a sticky tab row and the header (the
+ *  tab row's fade, --intro-fade) with the card, so rows scrolled past the header never show above
+ *  it; the card still fades out under the tabs. */
+const PINNED_HEAD = "sticky top-(--pin-top,0px) z-20 bg-card shadow-[inset_0_-1px_0_var(--color-border)] before:pointer-events-none before:absolute before:inset-x-0 before:bottom-full before:h-(--intro-fade,0px) before:bg-card before:content-['']";
+const PINNED_GROUP = 'sticky top-[calc(var(--pin-top,0px)+var(--row-h)-1px)] z-10 bg-[color-mix(in_oklab,var(--color-muted)_50%,var(--color-card))] shadow-[inset_0_1px_0_var(--color-border),inset_0_-1px_0_var(--color-border)]';
+function SortIcon({ dir }) {
+    if (dir === 'asc')
+        return _jsx(ArrowUpIcon, { className: "size-3" });
+    if (dir === 'desc')
+        return _jsx(ArrowDownIcon, { className: "size-3" });
+    return null;
+}
+/** The details: a folded row's own rows as a table, then the domain's sections. */
+export function DetailsBody({ domain, row, columns, chips, }) {
+    const parts = domain.parts?.rows(row) ?? [];
+    const by = domain.fields.find((f) => f.key === domain.parts?.by);
+    const sections = [
+        ...(parts.length > (domain.parts?.others ? 0 : 1) && by && domain.parts
+            ? [
+                {
+                    id: '_parts',
+                    label: domain.parts.label,
+                    icon: by.icon,
+                    open: true,
+                    count: () => parts.length,
+                    render: () => (_jsx("div", { className: "-mx-1 rounded-md border", children: _jsx(LumenTable, { domain: domain, 
+                            // Text the rows all share (the symbol, the kind) says nothing here.
+                            columns: [
+                                by,
+                                ...columns.filter((f) => f.key !== by.key &&
+                                    (f.format !== 'text' || new Set(parts.map((r) => f.value(r))).size > 1)),
+                            ], rows: parts, groupBy: null, chips: chips }) })),
+                },
+            ]
+            : []),
+        ...(domain.details ?? []),
+    ];
+    return (_jsx(_Fragment, { children: sections.map((s) => (_jsx(DrawerSection, { icon: s.icon, title: s.label, count: s.count?.(row), hint: s.hint?.(row), defaultOpen: typeof s.open === 'function' ? s.open(row) : s.open, children: s.render(row) }, `${domain.rowKey(row)}:${s.id}`))) }));
+}
+/** Columns in a view's header: every field of the domain, ticked when it shows. */
+function ColumnPicker({ domain, columns, onColumns, open, onOpenChange, className, }) {
+    const keys = columns.map((f) => f.key);
+    return (_jsx(LumenSelector, { multiple: true, trigger: "icon", icon: Columns3CogIcon, label: "Columns", align: "end", search: true, open: open, onOpenChange: onOpenChange, className: className, options: fieldOptions(domain.fields, domain), value: keys, onChange: (next) => onColumns(next.some((k) => !keys.includes(k))
+            ? domain.fields.map((x) => x.key).filter((k) => next.includes(k))
+            : keys.filter((k) => next.includes(k))) }));
+}
+/**
+ * The view's rows as a CSV file: the filtered rows in the view's sort, its
+ * shown columns (the grouping first when it is not one), plain numbers; amounts stay masked while
+ * Hide amounts is on.
+ */
+function downloadCsv({ name, columns, rows, groupBy, sort, hidden, }) {
+    const fields = groupBy && !columns.includes(groupBy) ? [groupBy, ...columns] : columns;
+    const by = sort && fields.find((f) => f.key === sort.key);
+    const sorted = by
+        ? [...rows].sort((a, b) => {
+            const x = by.value(a);
+            const y = by.value(b);
+            if (x === null || y === null)
+                return x === y ? 0 : x === null ? 1 : -1;
+            const c = typeof x === 'number' && typeof y === 'number'
+                ? x - y
+                : String(x).localeCompare(String(y));
+            return sort?.desc ? -c : c;
+        })
+        : rows;
+    const cell = (f, r) => {
+        const v = f.value(r);
+        if (v === null || (typeof v === 'number' && !Number.isFinite(v)))
+            return '';
+        return hidden && f.amount ? maskAmount(String(v)) : v;
+    };
+    const csv = Papa.unparse({
+        fields: fields.map((f) => f.label),
+        data: sorted.map((r) => fields.map((f) => cell(f, r))),
+    });
+    const url = URL.createObjectURL(new Blob([csv], { type: 'text/csv;charset=utf-8' }));
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${name.trim().replace(/[^\w.-]+/g, '-') || 'view'}-${new Date().toISOString().slice(0, 10)}.csv`;
+    a.click();
+    URL.revokeObjectURL(url);
+}
+/**
+ * LumenView (a card of its own): a data
+ * view over one domain, as a card. Its header has the view's name, the row count and pager, its ↻
+ * and ⋯, and its own filter and Group (they narrow this table only); its body
+ * the table (grouped one level, or the pivot) with the loading states.
+ */
+export function LumenView({ domain, config, rows, total = rows.length, groupBy = null, pivot = false, subgroup, load: sourceLoad, state, title = config.name, selection, onDetails, tapped, groupActions, controls, inLayout: inScroller = false, cardId = 'view', tools, filter, filterCount, strip, link, note, onColumns, onAddColumn, sort = config.sort, onSort, shown, }) {
+    // Its controls (Edit widget ▸ Controls): Pager, Columns and Download here.
+    const on = (k) => controlOn({ kind: 'table', controls: shown }, k);
+    const cell = useGridCell();
+    // A table on the grid scrolls sideways inside its own card; a full-width one out of the grid
+    // scrolls with the page.
+    const inLayout = inScroller && !cell;
+    const columns = pick(domain.fields, config.columns);
+    // Live columns on screen keep their source reading while the market trades (#861).
+    const load = useLiveLoad(sourceLoad, columns.some((c) => {
+        const r = freshnessOf(domain, c);
+        return r === 'live' || r === 'calc';
+    }));
+    const chips = chipsOf(config);
+    const tableRows = useMemo(() => mergeRows(domain, rows, groupBy), [domain, rows, groupBy]);
+    const amountsHidden = useAmountsHidden();
+    // Flat tables page their rows, 25 a page unless the view says otherwise; the size picker and
+    // the page buttons sit in the card's header. Views saved before then
+    // carry no pagination, so they read the defaults.
+    const isMobile = useIsMobile();
+    const pagination = config.pagination ?? viewPaginationSchema.parse({});
+    const [pageSize, setPageSize] = useState(pagination.size);
+    const [pageIndex, setPageIndex] = useState(0);
+    useEffect(() => setPageSize(pagination.size), [pagination.size]);
+    const sub = subgroupOf(domain, subgroup === undefined ? config.subgroup : subgroup);
+    // Folded lines and their rows stay on one page, so a fold shows every row like a grouping.
+    const paging = pagination.on && on('pager') && !state && !groupBy && !pivot && !sub?.under;
+    // A fit table wraps its text to the width there is; the rest scroll sideways.
+    // A phone has no width to fit to: every table scrolls sideways there.
+    const fit = config.width === 'fit' && !pivot && !isMobile;
+    const pages = Math.max(1, Math.ceil(tableRows.length / pageSize));
+    const page = Math.min(pageIndex, pages - 1);
+    const count = rows.length === total ? `${total} rows` : `${rows.length} of ${total} rows`;
+    // A new filter or page size starts from the first page.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: resets on these changes only
+    useEffect(() => setPageIndex(0), [rows, pageSize]);
+    // Checked rows with a chart symbol open one compare chart (up to 8).
+    const openChart = useSymbolChart();
+    const chartField = domain.fields.find((f) => f.chart);
+    const picked = useMemo(() => {
+        if (!selection?.keys.size || !chartField?.chart)
+            return [];
+        const out = new Set();
+        for (const r of rows)
+            if (selection.keys.has(domain.rowKey(r))) {
+                const t = chartField.chart(r);
+                if (t)
+                    out.add(t);
+            }
+        return [...out].slice(0, MAX_COMPARE);
+    }, [selection, chartField, rows, domain]);
+    const compare = openChart && picked.length > 1 ? (_jsx(IconButton, { icon: ChartSpline, label: `Compare ${picked.join(', ')}`, variant: "outline", onClick: () => openChart(picked) })) : null;
+    const pager = paging ? (_jsx(LumenPager, { total: tableRows.length, page: page, size: pageSize, onPage: setPageIndex, onSize: setPageSize, noun: rows.length === total ? 'rows' : `of ${total} rows` })) : (_jsx("span", { className: "num px-2 text-xs text-muted-foreground", children: count }));
+    const table = pivot && config.pivot ? (_jsx(PivotTable, { domain: domain, rows: rows, pivot: config.pivot })) : (_jsx(LumenTable, { domain: domain, columns: columns, rows: tableRows, groupBy: groupBy, subgroup: sub, chips: chips, page: paging ? { index: page, size: pageSize } : null, inView: inLayout, fit: fit, onDetails: onDetails, tapped: tapped, selection: selection, groupActions: groupActions, sort: sort, onSort: onSort, total: config.total !== false, add: onAddColumn || onColumns
+            ? { ...onAddColumn, field: onColumns && { domain, columns, onColumns } }
+            : undefined }));
+    return (_jsx(LumenWidget, { id: cardId, kind: "table", style: "table", title: title, controls: controls, tools: state ? (tools) : (_jsxs(_Fragment, { children: [tools, compare, pager, onColumns && !onAddColumn && on('columns') && (_jsx(ColumnPicker, { domain: domain, columns: columns, onColumns: onColumns })), !pivot && on('download') && (_jsx(IconButton, { icon: DownloadIcon, label: "Download CSV", onClick: () => downloadCsv({
+                        name: title,
+                        columns,
+                        rows: tableRows,
+                        groupBy,
+                        sort: config.sort,
+                        hidden: amountsHidden,
+                    }) }))] })), filter: state ? undefined : filter, filterCount: filterCount, strip: state ? undefined : strip, link: link, note: note, load: load, shown: shown, rows: total, pinned: inLayout && !fit, className: cn('relative', !inLayout && 'overflow-x-auto overflow-y-hidden [--pin-top:0px]'), children: state ??
+            (load ? (_jsx(LumenStates, { load: load, skeleton: _jsx(LumenSkeleton, { rows: 10 }), children: table })) : (table)) }));
+}
+/**
+ * The + at the end of a table's header (Edits in place): Field opens the
+ * Columns picker here, Formula the view's formula editor, Your data a column the person types,
+ * Ask the assistant the composer pointed at this card. On phone each opens as a sheet.
+ */
+function AddColumnMenu({ add, fieldOpen, onFieldOpen, }) {
+    const yoursOff = add.yours && typeof add.yours !== 'function' ? add.yours.disabled : null;
+    const formulaOff = add.formula && typeof add.formula !== 'function' ? add.formula.disabled : null;
+    const only = add.field && !add.formula && !add.yours;
+    return (_jsxs("span", { className: "relative inline-flex items-center", children: [add.field && (_jsx(ColumnPicker, { ...add.field, open: fieldOpen, onOpenChange: onFieldOpen, className: only ? undefined : 'absolute inset-0 size-full opacity-0' })), !only && (_jsxs(DropdownMenu, { modal: false, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(IconButton, { icon: PlusIcon, size: "icon-xs", label: "Add column", className: "relative text-muted-foreground" }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-52", children: [add.field && (_jsxs(DropdownMenuItem, { onSelect: () => onFieldOpen(true), children: [_jsx(Columns3CogIcon, {}), " Field", _jsx("span", { className: "ml-auto text-muted-foreground text-xs", children: "the data model" })] })), add.formula && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { children: _jsxs(DropdownMenuItem, { disabled: !!formulaOff, onSelect: typeof add.formula === 'function' ? add.formula : undefined, children: [_jsx(SigmaIcon, {}), " Formula", _jsx("span", { className: "ml-auto text-muted-foreground text-xs", children: "over columns" })] }) }) }), formulaOff && _jsx(TooltipContent, { children: formulaOff })] })), add.yours && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { children: _jsxs(DropdownMenuItem, { disabled: !!yoursOff, onSelect: typeof add.yours === 'function' ? add.yours : undefined, children: [_jsx(UserPenIcon, {}), " Your data", _jsx("span", { className: "ml-auto text-muted-foreground text-xs", children: "you type it" })] }) }) }), yoursOff && _jsx(TooltipContent, { children: yoursOff })] }))] })] }))] }));
+}
+/** A field's colour for its header: its topic's source (a broker green, an app brown) where
+ *  the group names one, else its group's (Holding, Symbol, Account, Formulas). */
+export function colorOf(domain, f) {
+    if (!f || !domain.groups?.length)
+        return null;
+    const id = groupOf(domain, f);
+    if (id === FORMULAS_GROUP)
+        return 'var(--color-muted-foreground)';
+    const g = domain.groups.find((x) => x.id === id);
+    return (f.topic && g?.sources?.[f.topic]?.color) || g?.color || null;
+}
+/** Where a field comes from, for its header's tooltip: Holding › Basket,
+ *  Symbol › Analysts › Target · a broker live. */
+function pathOf(domain, f) {
+    const id = groupOf(domain, f);
+    const g = id === FORMULAS_GROUP ? undefined : domain.groups?.find((x) => x.id === id);
+    const path = [id === FORMULAS_GROUP ? 'Formulas' : g?.label, f.topic, f.label]
+        .filter(Boolean)
+        .join(' › ');
+    const src = f.topic ? g?.sources?.[f.topic] : undefined;
+    return src ? `${path} · ${[src.name, src.detail].filter(Boolean).join(' ')}` : path;
+}
+/** Every header carries its colour (`colorOf`), text and a 2px rule. */
+const ruleOf = (color) => color ? { boxShadow: `inset 0 -2px 0 ${color}` } : undefined;
+const alignOf = (format) => (format === 'text' ? 'text-left' : 'text-right');
+/** A column's cell classes: its alignment, and hidden on phones where the field says so. */
+/** An ISO date, alone or with a time after it: `2026-10-14`, `2026-10-14 16:17`. */
+const isDateText = (v) => typeof v === 'string' && v.length <= 25 && /^\d{4}-\d{2}-\d{2}(?:$|[ T])/.test(v);
+const colOf = (f) => cn(alignOf(f?.format ?? 'text'), f?.hideOnPhone && 'max-md:hidden');
+/** The flat or grouped table: sortable headers, a Total row, group rows that collapse. */
+// Sorting, and paging of flat tables (the page is LumenView's, set right of the row count).
+const SORTING = tableFeatures({
+    rowSortingFeature,
+    rowPaginationFeature,
+    sortedRowModel: createSortedRowModel(),
+    paginatedRowModel: createPaginatedRowModel(),
+    sortFns,
+});
+/** The plain table LumenView draws, also standalone for lists that are not a whole view; with
+ *  `load` it shows its own skeleton, progress bar and failure. */
+export function LumenTable({ load, ...props }) {
+    if (!load)
+        return _jsx(LumenTableRows, { ...props });
+    return (_jsx("div", { className: "relative", children: _jsx(LumenStates, { load: load, children: _jsx(LumenTableRows, { ...props }) }) }));
+}
+function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null, chips = [], page = null, inView = false, fit = false, onDetails, tapped, selection, groupActions, sort, onSort, total = true, subgroup = null, add, }) {
+    const [sorting, setSorting] = useState(sort && columns.some((f) => f.key === sort.key) ? [{ id: sort.key, desc: sort.desc }] : []);
+    // A saved sort patched while the table is open (the assistant's card move) applies at once.
+    const savedSort = JSON.stringify(sort ?? null);
+    const savedSortRef = useRef(savedSort);
+    useEffect(() => {
+        if (savedSortRef.current === savedSort)
+            return;
+        savedSortRef.current = savedSort;
+        setSorting(sort && columns.some((f) => f.key === sort.key) ? [{ id: sort.key, desc: sort.desc }] : []);
+    }, [savedSort, sort, columns]);
+    const paging = page !== null && !groupBy;
+    const pagination = {
+        pageIndex: paging ? page.index : 0,
+        pageSize: paging ? page.size : Math.max(rows.length, 1),
+    };
+    // Groups whose state differs from where they start: open, or past OPEN_ALL rows only the first.
+    const [flipped, setFlipped] = useState(new Set());
+    const [more, setMore] = useState(new Map());
+    // The grouped field is the group row's label, so its column hides.
+    // Each key once: two columns under one React key can lose a cell on a re-render, and every
+    // row after it slides left by one.
+    const visible = columns.filter((f, i) => f.key !== groupBy?.key && columns.findIndex((x) => x.key === f.key) === i);
+    // Inline chips sit on the first column, next to the row's name, not in their own.
+    const inline = visible.filter((f, i) => i > 0 && chips.some((c) => c.key === f.key && c.placement === 'inline'));
+    const shown = visible.filter((f) => !inline.includes(f));
+    const computed = useMemo(() => computedOf(domain, rows, groupBy), [domain, rows, groupBy]);
+    // Values per editable field, offered when a cell is edited: the field's own list when it has
+    // one (every value, in use or not), else the values in the shown rows.
+    const options = useMemo(() => {
+        const m = new Map();
+        for (const f of visible)
+            if (f.edit)
+                m.set(f.key, f.edit.options?.() ?? {
+                    inUse: [
+                        ...new Set(rows
+                            .flatMap((r) => (f.values ? f.values(r) : [f.value(r)]))
+                            .filter((v) => typeof v === 'string' && v !== '')),
+                    ].sort(),
+                    unused: [],
+                });
+        return m;
+    }, [visible, rows]);
+    // A symbol cell opens the app's chart dialog, where the app mounts one.
+    // Where the app also mounts the Symbol sheet, the ticker opens the sheet and the chart
+    // icon still opens the chart dialog.
+    const openSheet = useSymbolSheet();
+    const openChart = useSymbolChart();
+    const cellOf = (f, row, chip) => {
+        const ticker = (openSheet || openChart) && f.chart?.(row);
+        const cell = plainCellOf(f, row, chip);
+        if (!ticker)
+            return cell;
+        const stop = (e) => e.stopPropagation();
+        // Muted until hovered, then lit.
+        const icon = (_jsx(ChartCandlestick, { className: "size-3.5 text-muted-foreground/50 transition-colors group-hover/button:text-primary group-focus-visible/button:text-primary" }));
+        const button = (label, open, children) => (_jsx(Button, { variant: "link", className: "h-auto gap-1.5 p-0 font-[inherit] text-inherit", "aria-label": label, onClick: (e) => {
+                stop(e);
+                open(ticker);
+            }, onKeyDown: stop, children: children }));
+        if (!openSheet)
+            return (openChart &&
+                button(`Chart ${ticker}`, openChart, _jsxs(_Fragment, { children: [cell, icon] })));
+        return (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [button(`Open ${ticker}`, openSheet, cell), openChart && button(`Chart ${ticker}`, (t) => openChart(t), icon)] }));
+    };
+    // A date never wraps, in any table, fit or not.
+    const plainCellOf = (f, row, chip) => {
+        const v = computed.value(f, row);
+        const cell = valueCellOf(f, row, chip, v);
+        return isDateText(v) ? _jsx("span", { className: "whitespace-nowrap", children: cell }) : cell;
+    };
+    const valueCellOf = (f, row, chip, v) => {
+        if (f.render)
+            return f.render(row);
+        if (!f.edit)
+            return (_jsx(ViewValueCell, { value: v, format: f.format, chip: chip, tone: chip ? f.tone?.(row) : undefined, color: typeof v === 'string' ? f.color?.(v) : undefined, amount: f.amount, compact: f.compact, empty: f.empty }));
+        const edit = f.edit;
+        const many = edit.many;
+        if (many)
+            return (_jsx(EditManyCell, { label: f.label, values: f.values?.(row) ?? (typeof v === 'string' && v !== '' ? [v] : []), options: options.get(f.key)?.inUse ?? [], unused: options.get(f.key)?.unused, note: edit.note?.(row), colorOf: f.color, onSave: (values) => many(row, values) }));
+        const save = edit.save;
+        if (!save)
+            return _jsx(ViewValueCell, { value: v, format: f.format, chip: chip });
+        if (edit.input)
+            return (_jsx(EditInputCell, { label: f.label, value: typeof v === 'number' || typeof v === 'string' ? v : null, type: edit.input, edited: edit.edited?.(row) ?? false, onSave: (value) => save(row, value), children: _jsx(ViewValueCell, { value: v, format: f.format, amount: f.amount, compact: f.compact }) }));
+        return (_jsx(EditCell, { label: f.label, value: typeof v === 'string' && v !== '' ? v : null, options: options.get(f.key)?.inUse ?? [], unused: options.get(f.key)?.unused, chip: chip, note: edit.note?.(row), colorOf: f.color, fixed: edit.fixed, edited: edit.edited?.(row) ?? false, onSave: (value) => save(row, value) }));
+    };
+    // A column's `cell` function is a component type to flexRender, so a new function means every
+    // cell remounts (a cell being typed into loses its box). The defs change
+    // only when the columns do; each cell reads the latest renderers through `latest`.
+    const latest = useRef({ shown, cellOf, inline, chips, computed });
+    latest.current = { shown, cellOf, inline, chips, computed };
+    const shownKeys = shown.map((f) => f.key).join(',');
+    const inlineOn = inline.length > 0;
+    // biome-ignore lint/correctness/useExhaustiveDependencies: keyed on the columns shown; the rest comes through `latest`
+    const defs = useMemo(() => shown.map((f, i) => ({
+        id: f.key,
+        accessorFn: (r) => {
+            const { shown: now, computed } = latest.current;
+            return computed.value(now[i] ?? f, r) ?? undefined;
+        },
+        sortUndefined: 'last',
+        header: f.label,
+        cell: ({ row }) => {
+            const { shown: now, cellOf, inline, chips, computed } = latest.current;
+            const field = now[i] ?? f;
+            const chip = chips.some((c) => c.key === field.key);
+            return i === 0 && inline.length ? (_jsx(FirstCell, { value: cellOf(field, row.original, chip), chips: inline.flatMap((x) => {
+                    const v = computed.value(x, row.original);
+                    if (!x.edit && (v === null || v === ''))
+                        return [];
+                    return [{ key: x.key, node: cellOf(x, row.original, true) }];
+                }) })) : (cellOf(field, row.original, chip));
+        },
+    })), [shownKeys, inlineOn]);
+    const table = useTable({
+        features: SORTING,
+        data: rows,
+        columns: defs,
+        state: { sorting, pagination },
+        onSortingChange: (u) => {
+            const next = typeof u === 'function' ? u(sorting) : u;
+            setSorting(next);
+            const first = next[0];
+            onSort?.(first ? { key: first.id, desc: first.desc } : null);
+        },
+        autoResetPageIndex: false,
+    });
+    // Phone: a long press on a header opens the Columns picker as a sheet.
+    const [fieldOpen, setFieldOpen] = useState(false);
+    const press = useRef(null);
+    const pressStart = () => {
+        if (!add?.field)
+            return;
+        press.current = setTimeout(() => setFieldOpen(true), 500);
+    };
+    const pressEnd = () => {
+        if (press.current)
+            clearTimeout(press.current);
+        press.current = null;
+    };
+    const sorted = table.getRowModel().rows;
+    const groups = useMemo(() => {
+        if (!groupBy)
+            return null;
+        const m = new Map();
+        for (const r of sorted) {
+            const k = label(groupBy.value(r.original));
+            const b = m.get(k);
+            b ? b.push(r) : m.set(k, [r]);
+        }
+        return [...m];
+    }, [groupBy, sorted]);
+    const span = shown.length + (selection ? 1 : 0);
+    const startsOpen = (i) => rows.length <= OPEN_ALL || i === 0;
+    const isOpen = (key, i) => startsOpen(i) !== flipped.has(key);
+    const anyClosed = !!groups?.some(([k], i) => !isOpen(k, i));
+    const setAll = (open) => setFlipped(new Set((groups ?? []).filter((_, i) => startsOpen(i) !== open).map(([k]) => k)));
+    const keyOf = domain.rowKey;
+    const toggle = (keys, on) => {
+        if (!selection)
+            return;
+        const next = new Set(selection.keys);
+        for (const k of keys)
+            on ? next.add(k) : next.delete(k);
+        selection.onChange(next);
+    };
+    const allKeys = rows.map(keyOf);
+    const allOn = allKeys.length > 0 && allKeys.every((k) => selection?.keys.has(k));
+    const someOn = allKeys.some((k) => selection?.keys.has(k));
+    const selectCell = (key, name) => selection && (_jsx(TableCell, { className: "w-8 pr-0", onClick: (e) => e.stopPropagation(), children: _jsx(Checkbox, { checked: selection.keys.has(key), onCheckedChange: (on) => toggle([key], on === true), "aria-label": `Select ${name}` }) }));
+    const [openParts, setOpenParts] = useState(new Set());
+    const hasTotal = total && shown.some(rollsUp);
+    // A group row's label spans the leading columns that roll nothing up.
+    const rolls = (f) => !f.noRollup && (!!f.aggregate || !!f.rollFormula || !!f.share);
+    const lead = Math.max(1, shown.findIndex((f, i) => i > 0 && rolls(f)) < 0
+        ? shown.length
+        : shown.findIndex((f, i) => i > 0 && rolls(f)));
+    const rollCell = (f, members) => rollsUp(f) ? (_jsx(ViewValueCell, { value: computed.roll(f, members), format: f.aggregate && isCountAgg(f.aggregate) ? 'rounded' : f.format, amount: f.aggregate !== 'count' && f.amount, compact: f.compact })) : null;
+    const rollCells = (members) => shown.map((f) => (_jsx(TableCell, { className: colOf(f), children: rollCell(f, members) }, f.key)));
+    // A row's chevron opens one level under it, closed by default: its panel, else the view's
+    // sub-group ("Each row opens"; None opens nothing).
+    const partsOf = (row) => (domain.panel ? [] : (subgroup?.rows?.(row) ?? []));
+    const panelOf = (row) => domain.panel?.render(row) ?? null;
+    const opens = (row) => (domain.panel ? panelOf(row) !== null : partsOf(row).length > 1);
+    const openLabel = () => domain.panel?.label ?? subgroup?.label.toLowerCase() ?? 'parts';
+    const folds = !domain.panel && !!subgroup?.under;
+    const nests = folds || sorted.some((r) => opens(r.original));
+    const chevron = (k, name) => (_jsx(Button, { variant: "ghost", size: "icon-xs", className: "-ml-1", "aria-expanded": openParts.has(k), "aria-label": `${openParts.has(k) ? 'Hide' : 'Show'} ${name}`, onClick: (e) => {
+            e.stopPropagation();
+            setOpenParts((o) => {
+                const n = new Set(o);
+                n.has(k) ? n.delete(k) : n.add(k);
+                return n;
+            });
+        }, children: _jsx(ChevronRightIcon, { className: cn('transition-transform', openParts.has(k) && 'rotate-90') }) }));
+    const partRow = (p, name) => (_jsxs(TableRow, { className: cn('bg-muted/30 text-muted-foreground hover:bg-muted/40', onDetails && 'cursor-pointer'), onClick: onDetails ? () => onDetails(p) : undefined, children: [selection && _jsx(TableCell, {}), shown.map((f, i) => (_jsx(TableCell, { className: cn(colOf(f), i === 0 && 'pl-12'), children: i === 0 ? (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(CornerDownRightIcon, { className: "size-3.5 shrink-0" }), name
+                            ? name(p)
+                            : cellOf(f, p, chips.some((c) => c.key === f.key))] })) : (cellOf(f, p, chips.some((c) => c.key === f.key))) }, f.key)))] }, `part:${keyOf(p)}`));
+    // The whole row opens the details drawer.
+    const dataRow = (r) => (_jsxs(Fragment, { children: [_jsxs(TableRow, { "data-row": domain.rowKey(r.original), "data-state": tapped?.(r.original) ? 'selected' : undefined, className: cn('group/row', onDetails && 'cursor-pointer'), tabIndex: onDetails ? 0 : undefined, onClick: onDetails ? () => onDetails(r.original) : undefined, onKeyDown: onDetails
+                    ? (e) => {
+                        if (e.target !== e.currentTarget)
+                            return;
+                        if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault();
+                            onDetails(r.original);
+                        }
+                    }
+                    : undefined, children: [selectCell(keyOf(r.original), keyOf(r.original)), r.getAllCells().map((c, i) => (_jsx(TableCell, { className: cn(colOf(shown[i]), groupBy && i === 0 && 'pl-8'), style: { background: shown[i]?.tint?.(r.original) }, children: i === 0 && nests ? (_jsxs("span", { className: "flex items-center gap-1", children: [opens(r.original) ? (chevron(keyOf(r.original), openLabel())) : (_jsx("span", { className: "-ml-1 size-6 shrink-0" })), flexRender(c.column.columnDef.cell, c.getContext())] })) : (flexRender(c.column.columnDef.cell, c.getContext())) }, c.id)))] }, domain.rowKey(r.original)), openParts.has(keyOf(r.original)) &&
+                partsOf(r.original).map((p) => partRow(p, subgroup?.name)), openParts.has(keyOf(r.original)) && domain.panel ? (_jsx(TableRow, { "data-slot": "row-panel", className: "bg-muted/20 hover:bg-muted/20", children: _jsx(TableCell, { colSpan: shown.length + (selection ? 1 : 0), className: "p-0 whitespace-normal", children: _jsx("div", { className: "sticky left-0 w-[min(56rem,calc(100vw-2rem))] max-w-full px-4 py-3 md:pl-10", children: panelOf(r.original) }) }) }, `panel:${keyOf(r.original)}`)) : null] }, domain.rowKey(r.original)));
+    // Rows sharing the sub-group's `under` key fold into one rolled-up line that opens them; a key
+    // with one row keeps that row (NVDA opens Shares, then each option).
+    const foldRow = (key, members, scope) => {
+        const k = `under:${scope}\u0000${key}`;
+        const ms = members.map((m) => m.original);
+        return (_jsxs(Fragment, { children: [_jsxs(TableRow, { "data-row": k, children: [selection && _jsx(TableCell, {}), shown.map((f, i) => (_jsx(TableCell, { className: cn(colOf(f), groupBy && i === 0 && 'pl-8'), children: i === 0 ? (_jsxs("span", { className: "flex items-center gap-1", children: [chevron(k, `${key} ${openLabel()}`), _jsx("span", { className: "font-medium", children: key }), _jsx("span", { className: "num text-xs text-muted-foreground", children: ms.length })] })) : (rollCell(f, ms)) }, f.key)))] }), openParts.has(k) && ms.map((p) => partRow(p, subgroup?.name))] }, k));
+    };
+    const rowsOf = (list, scope) => {
+        const under = folds ? subgroup?.under : undefined;
+        if (!under)
+            return list.map(dataRow);
+        const m = new Map();
+        for (const r of list) {
+            const k = under(r.original);
+            const b = m.get(k);
+            b ? b.push(r) : m.set(k, [r]);
+        }
+        return [...m].map(([k, ms]) => ms.length > 1 || subgroup?.always
+            ? foldRow(k, ms, scope)
+            : dataRow(ms[0]));
+    };
+    // A table draws at most DRAW_STEP rows per group (or per unpaged table) until asked for more
+    // (a grouped view of a quarter's holdings history drew ~1M elements and
+    // crashed the browser).
+    const drawn = (list, scope) => {
+        const limit = more.get(scope) ?? DRAW_STEP;
+        const out = rowsOf(list.slice(0, limit), scope);
+        const left = list.length - limit;
+        if (left <= 0)
+            return out;
+        return [
+            ...out,
+            _jsx(TableRow, { "data-more": true, children: _jsx(TableCell, { colSpan: span, className: "py-1", children: _jsxs(Button, { variant: "ghost", size: "xs", onClick: () => setMore((m) => new Map(m).set(scope, limit + DRAW_STEP)), children: [_jsx(ChevronsDownIcon, {}), "Show ", Math.min(left, DRAW_STEP).toLocaleString(), " more", _jsxs("span", { className: "num font-normal text-muted-foreground", children: ["of ", left.toLocaleString()] })] }) }) }, `${scope}:more`),
+        ];
+    };
+    const box = useRef(null);
+    useFloatingHead(box, !inView);
+    return (_jsx("div", { ref: box, className: cn(inView ? IN_VIEW : 'overflow-x-auto overflow-y-hidden [--pin-top:0px]', fit && FIT), children: _jsxs(Table, { children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((hg) => (_jsxs(TableRow, { children: [selection && (_jsx(TableHead, { className: cn('w-8 pr-0', PINNED_HEAD), children: _jsx(Checkbox, { checked: allOn ? true : someOn ? 'indeterminate' : false, onCheckedChange: (on) => toggle(allKeys, on === true), "aria-label": "Select every row" }) })), hg.headers.map((h, i) => (_jsxs(TableHead, { className: cn(colOf(shown[i]), PINNED_HEAD), style: ruleOf(colorOf(domain, shown[i])), onPointerDown: pressStart, onPointerUp: pressEnd, onPointerLeave: pressEnd, onPointerCancel: pressEnd, onContextMenu: (e) => {
+                                    if (press.current)
+                                        e.preventDefault();
+                                }, "aria-sort": h.column.getIsSorted() === 'asc'
+                                    ? 'ascending'
+                                    : h.column.getIsSorted() === 'desc'
+                                        ? 'descending'
+                                        : undefined, children: [i === 0 && groups && (_jsx(IconButton, { icon: anyClosed ? ChevronsUpDownIcon : ChevronsDownUpIcon, size: "icon-xs", className: "-ml-2 mr-1 align-middle", label: anyClosed ? 'Expand all groups' : 'Collapse all groups', onClick: () => setAll(anyClosed) })), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "xs", className: cn('font-medium', !(i === 0 && groups) && '-mx-2'), style: { color: colorOf(domain, shown[i]) ?? undefined }, onClick: h.column.getToggleSortingHandler(), children: [shown[i] ? _jsx(FreshnessMark, { domain: domain, field: shown[i] }) : null, flexRender(h.column.columnDef.header, h.getContext()), _jsx(SortIcon, { dir: h.column.getIsSorted() })] }) }), shown[i] && (domain.groups?.length || freshnessOf(domain, shown[i])) ? (_jsxs(TooltipContent, { children: [domain.groups?.length ? _jsx("div", { children: pathOf(domain, shown[i]) }) : null, freshnessLine(domain, shown[i]) ? (_jsx("div", { children: freshnessLine(domain, shown[i]) })) : null] })) : null] })] }, h.id))), add && (_jsx(TableHead, { className: cn('w-8 pl-1', PINNED_HEAD), children: _jsx(AddColumnMenu, { add: add, fieldOpen: fieldOpen, onFieldOpen: setFieldOpen }) }))] }, hg.id))) }), _jsxs(TableBody, { children: [!rows.length && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: span, className: "py-6 text-center text-muted-foreground", children: "No rows match." }) })), groups && groupBy
+                            ? groups.map(([key, members], gi) => {
+                                const open = isOpen(key, gi);
+                                return (_jsxs(Fragment, { children: [_jsxs(TableRow, { className: ROLLUP, "data-group": key, children: [selection && (_jsx(TableCell, { className: cn('w-8 pr-0', PINNED_GROUP), children: _jsx(Checkbox, { checked: members.every((m) => selection.keys.has(keyOf(m.original)))
+                                                            ? true
+                                                            : members.some((m) => selection.keys.has(keyOf(m.original)))
+                                                                ? 'indeterminate'
+                                                                : false, onCheckedChange: (on) => toggle(members.map((m) => keyOf(m.original)), on === true), "aria-label": `Select every row of ${key}` }) })), shown.slice(lead - 1).map((f, i) => i === 0 ? (_jsxs(TableCell, { colSpan: lead, className: PINNED_GROUP, children: [_jsxs(Button, { variant: "ghost", size: "xs", className: "-mx-2 hover:bg-transparent aria-expanded:bg-transparent", "aria-expanded": open, "aria-label": `${open ? 'Collapse' : 'Expand'} ${key}`, onClick: () => setFlipped((c) => {
+                                                                const n = new Set(c);
+                                                                n.has(key) ? n.delete(key) : n.add(key);
+                                                                return n;
+                                                            }), children: [_jsx(ChevronRightIcon, { className: cn('transition-transform', open && 'rotate-90') }), _jsx(groupBy.icon, {}), key, _jsx("span", { className: "num font-normal text-muted-foreground", children: members.length })] }), groupActions?.(key, members.map((m) => m.original))] }, f.key)) : (_jsx(TableCell, { className: cn(colOf(f), PINNED_GROUP), children: rollCell(f, members.map((m) => m.original)) }, f.key)))] }), open && drawn(members, key)] }, key));
+                            })
+                            : drawn(sorted, ''), hasTotal && rows.length > 0 && (_jsxs(TableRow, { className: cn(ROLLUP, 'border-t-2'), "data-total": true, children: [selection && _jsx(TableCell, {}), rollCells(rows).map((cell, i) => i === 0 && !(shown[0] && rollsUp(shown[0])) ? (_jsx(TableCell, { children: "Total" }, "total")) : (cell))] }))] })] }) }));
+}
+/** One value rolled up into a rows × columns grid, with totals where the roll-up adds. */
+function PivotTable({ domain, rows, pivot, }) {
+    const field = (k) => domain.fields.find((f) => f.key === k);
+    const rf = field(pivot.rows);
+    const cf = field(pivot.columns);
+    const vf = field(pivot.value);
+    const grid = useMemo(() => {
+        if (!rf || !cf || !vf)
+            return null;
+        const rowKeys = [...new Set(rows.map((r) => label(rf.value(r))))].sort();
+        const colKeys = [...new Set(rows.map((r) => label(cf.value(r))))].sort();
+        const cell = (rk, ck) => rollUp(rows
+            .filter((r) => (rk === null || label(rf.value(r)) === rk) &&
+            (ck === null || label(cf.value(r)) === ck))
+            .map(vf.value), pivot.agg);
+        return { rowKeys, colKeys, cell };
+    }, [rows, rf, cf, vf, pivot.agg]);
+    if (!grid || !rf || !cf || !vf) {
+        return (_jsx("p", { className: "p-4 text-sm text-muted-foreground", children: "This view's pivot names a field the data does not have." }));
+    }
+    const totals = pivot.agg === 'sum' || pivot.agg === 'count';
+    const fmt = isCountAgg(pivot.agg) ? 'rounded' : vf.format;
+    const amount = pivot.agg !== 'count' && vf.amount;
+    return (_jsx("div", { className: IN_VIEW, "data-testid": "view-pivot", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: PINNED_HEAD, style: ruleOf(colorOf(domain, rf)), children: _jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx(rf.icon, { className: "size-3.5" }), _jsx("span", { style: { color: colorOf(domain, rf) ?? undefined }, children: rf.label }), " \\", ' ', _jsx("span", { style: { color: colorOf(domain, cf) ?? undefined }, children: cf.label }), _jsxs("span", { className: "font-normal text-muted-foreground", children: ["(", _jsx("span", { style: { color: colorOf(domain, vf) ?? undefined }, children: vf.label }), ",", ' ', pivot.agg, ")"] })] }) }), grid.colKeys.map((c) => (_jsx(TableHead, { className: cn('text-right', PINNED_HEAD), style: ruleOf(colorOf(domain, cf)), children: c }, c))), totals && _jsx(TableHead, { className: cn('text-right', PINNED_HEAD), children: "Total" })] }) }), _jsxs(TableBody, { children: [grid.rowKeys.map((r) => (_jsxs(TableRow, { "data-row": r, children: [_jsx(TableCell, { children: r }), grid.colKeys.map((c) => (_jsx(TableCell, { className: "text-right", children: _jsx(ViewValueCell, { value: grid.cell(r, c), format: fmt, amount: amount }) }, c))), totals && (_jsx(TableCell, { className: cn('text-right', ROLLUP), children: _jsx(ViewValueCell, { value: grid.cell(r, null), format: fmt, amount: amount }) }))] }, r))), totals && (_jsxs(TableRow, { className: cn(ROLLUP, 'border-t-2'), "data-total": true, children: [_jsx(TableCell, { children: "Total" }), grid.colKeys.map((c) => (_jsx(TableCell, { className: "text-right", children: _jsx(ViewValueCell, { value: grid.cell(null, c), format: fmt, amount: amount }) }, c))), _jsx(TableCell, { className: "text-right", children: _jsx(ViewValueCell, { value: grid.cell(null, null), format: fmt, amount: amount }) })] }))] })] }) }));
+}