@columenlabs/lumen-ui 0.0.0-stage → 0.2.1

package/dist/lumen-widget.js

@@ -0,0 +1,609 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { OUTLOOK_INDEXES, marketWindows, } from '@columenlabs/lumen-ui-types/market';
+// LumenSavedWidget (as blocks; renamed): a page (LumenLayout) is an ordered list of cards, each a third, half, two thirds or the full width.
+// A card is the view (LumenView) or a widget. Chart and top-N widgets read every row of the view
+// (the table's filter is the table's), narrowed by their own tokens, and work their chart out here in the browser:
+// nothing new is fetched; market and price chart widgets read their own data. LumenLayout lays the
+// cards out; this file draws the card frame every card shares (its header, ↻ and ⋯ menu), each
+// widget, the Edit layout bar, Add widget (Pre-built and Build your own) and Edit widget.
+import { ALLOCATION_MAX, VIEW_CARD_KIND_NAMES, WIDGET_STYLES, controlOn, isDollarFormat, isRowCard, isTableCard, trendBuckets, viewCardKinds, viewCardSchema, viewWidgetCatalog, widgetStyleId, widgetStyleOf, } from '@columenlabs/lumen-ui-types/views';
+import { ActivityIcon, ArrowDownIcon, ArrowUpIcon, BarChart3Icon, CandlestickChartIcon, ChartLineIcon, ChartPieIcon, CheckIcon, CodeIcon, CopyIcon, DatabaseIcon, EyeOffIcon, FoldVerticalIcon, FunnelIcon, GripVerticalIcon, InfoIcon, LayoutGridIcon, ListOrderedIcon, MoreHorizontalIcon, PackageIcon, PencilIcon, PlusIcon, RotateCcwIcon, Rows3Icon, SparklesIcon, SquareIcon, TableIcon, Trash2Icon, TrendingUpIcon, WrenchIcon, XIcon, } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useAssistant, useAssistantName } from './assistant-context.js';
+import { LumenConfirm } from './confirm.js';
+import { FoldChevron, useFolded, usePageKey } from './fold.js';
+import { GrowthChart } from './growth-chart.js';
+import { useIsMobile } from './hooks/use-mobile.js';
+import { IconButton } from './icon-button.js';
+import { useDomainReads } from './joins.js';
+import { cn } from './lib/utils.js';
+import { LumenBoundary } from './lumen-boundary.js';
+import { LumenTokenizedFilter, filterByTokens, useLumenFilter, } from './lumen-filter.js';
+import { useGridCell } from './lumen-grid.js';
+import { CardIdProvider, LinkDot, LinkPicker, linkVar, useLinks, } from './lumen-links.js';
+import { LumenSelector } from './lumen-selector.js';
+import { LumenFreshness, LumenLazy, LumenLoadFooter, LumenRefresh, LumenStates, } from './lumen-source.js';
+import { TrendBody } from './lumen-trend.js';
+import { AllocationBar, Donut, Headline, RankedBars, STACK_MAX, StackedBars, } from './lumen-widget-charts.js';
+import { useHasMarket } from './market/live.js';
+import { useBarsUrl, useLumenChart } from './market/lumen-chart.js';
+import { MarketWidget } from './market/market-widget.js';
+import { maskAmount, useAmountsHidden } from './shell.js';
+import { SummaryCardsEditor, summaryCardIssues } from './summary-cards.js';
+import { Badge } from './ui/badge.js';
+import { Button } from './ui/button.js';
+import { Card } from './ui/card.js';
+import { ChartTooltip, ChartTooltipContent } from './ui/chart.js';
+import { Checkbox } from './ui/checkbox.js';
+import { Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, dialogBody, } from './ui/dialog.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from './ui/dropdown-menu.js';
+import { Input } from './ui/input.js';
+import { Label } from './ui/label.js';
+import { Popover, PopoverContent, PopoverTrigger } from './ui/popover.js';
+import { Skeleton } from './ui/skeleton.js';
+import { Switch } from './ui/switch.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './ui/table.js';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs.js';
+import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.js';
+import { fieldOptions } from './view-formulas.js';
+import { computedOf, label, summaryCash, } from './view-model.js';
+import { WidgetControlsEditor } from './widget-controls.js';
+import { PAGE_SOURCE, useWidgetDataOptions } from './widget-data.js';
+import { dateFields } from './widget-settings.js';
+/** Each style's icon, by its id in `WIDGET_STYLES`; a style left out takes its kind's. */
+const STYLE_ICONS = {
+    'table:table': TableIcon,
+    'table:top_n': ListOrderedIcon,
+    'metric:number': SquareIcon,
+    'metric:row': LayoutGridIcon,
+    'metric:spark': ActivityIcon,
+    'metric:tracker': ActivityIcon,
+    'allocation:bar': Rows3Icon,
+    'allocation:donut': ChartPieIcon,
+    'allocation:bar_list': BarChart3Icon,
+    'chart:price': ChartLineIcon,
+    'chart:growth': TrendingUpIcon,
+    'chart:market': CandlestickChartIcon,
+};
+const KIND_ICONS = {
+    table: TableIcon,
+    metric: SquareIcon,
+    allocation: ChartPieIcon,
+    chart: ActivityIcon,
+};
+/** A card's icon, from its kind and style. */
+export const cardIcon = (c) => STYLE_ICONS[widgetStyleId(c)] ?? KIND_ICONS[c.kind];
+/** The widths a card can take, in columns of the desktop's 6. */
+export const CARD_COLUMNS = [1, 2, 3, 4, 5, 6];
+/** The longest name a widget takes. */
+export const CARD_TITLE_MAX = 40;
+export const cardTitle = (b, viewName) => b.title ??
+    (isTableCard(b) ? viewName : b.kind === 'page' ? b.id : (widgetStyleOf(b)?.name ?? b.kind));
+/** The domain's fields as the filter box reads them, for a card's own tokens. */
+export function cardFilterFields(fields) {
+    return fields.map((f) => ({
+        key: f.key,
+        label: f.label,
+        icon: f.icon,
+        values: f.values ??
+            ((row) => {
+                const v = f.value(row);
+                return v === null ? [] : [String(v)];
+            }),
+        number: f.format === 'text'
+            ? undefined
+            : (row) => {
+                const v = f.value(row);
+                return typeof v === 'number' ? v : null;
+            },
+    }));
+}
+// ── Values ─────────────────────────────────────────────────────────────────────────────────────
+const MINUS = '−';
+const COMPACT = new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 });
+/** A chart value in short form: $12.3K, −4.1%, 1.2M; masked while Hide amounts is on. */
+function short(v, format, hidden) {
+    if (hidden)
+        return maskAmount('0');
+    const sign = v < 0 ? MINUS : '';
+    const abs = Math.abs(v);
+    if (format === 'percent' || format === 'weight')
+        return `${sign}${abs.toFixed(1)}%`;
+    if (isDollarFormat(format))
+        return `${sign}$${COMPACT.format(abs)}`;
+    return `${sign}${COMPACT.format(abs)}`;
+}
+/** A chart value in full, for tooltips: $491,712.34, −4.1%; masked while Hide amounts is on. */
+function exact(v, format, hidden) {
+    if (hidden)
+        return maskAmount('0');
+    const sign = v < 0 ? MINUS : '';
+    const abs = Math.abs(v);
+    if (format === 'percent' || format === 'weight')
+        return `${sign}${abs.toFixed(2)}%`;
+    const n = abs.toLocaleString('en-US', {
+        maximumFractionDigits: format === 'rounded' || format === 'price_rounded' ? 0 : 2,
+        useGrouping: format !== 'integer',
+    });
+    return `${sign}${isDollarFormat(format) ? '$' : ''}${n}`;
+}
+const pct = (v, total) => `${total ? ((v / total) * 100).toFixed(1) : '0.0'}%`;
+/** One colour per name, by size, so the largest never share one; Cash is always grey. */
+const PALETTE = [1, 2, 3, 4, 5, 6, 9, 7, 10].map((i) => `var(--chart-${i})`);
+const colorOf = (name, i) => /cash/i.test(name) ? 'var(--chart-8)' : (PALETTE[i % PALETTE.length] ?? 'var(--chart-1)');
+/** `value` summed by `by` over the rows, largest first; rows with no `by` read as —. */
+function sumBy(rows, by, value, read) {
+    const m = new Map();
+    for (const r of rows) {
+        const v = read(value, r);
+        if (typeof v !== 'number' || !Number.isFinite(v))
+            continue;
+        const k = label(read(by, r));
+        m.set(k, (m.get(k) ?? 0) + v);
+    }
+    return [...m].map(([name, v]) => ({ name, v })).sort((a, b) => b.v - a.v);
+}
+// ── Widget bodies ──────────────────────────────────────────────────────────────────────────────
+const Empty = ({ children = 'Nothing to show for these rows.' }) => (_jsx("p", { className: "py-6 text-center text-sm text-muted-foreground", children: children }));
+/** A chart, top-N or market widget's body over `rows` (the view's shown rows). */
+export function WidgetBody({ card, domain, rows, fields, merge, onDetails, }) {
+    const hidden = useAmountsHidden();
+    const own = useMemo(() => filterByTokens(rows, fields, card.filter), [rows, fields, card.filter]);
+    // Shares and formulas read against every shown row, not just the card's.
+    const computed = useMemo(() => computedOf(domain, rows, null), [domain, rows]);
+    const read = computed.value;
+    const field = (k) => domain.fields.find((f) => f.key === k);
+    if (card.kind === 'page')
+        return null;
+    if (card.kind === 'chart' && card.style === 'market')
+        return _jsx(MarketWidget, { symbols: card.symbols, style: card.layout });
+    if ('date' in card) {
+        const date = field(card.date);
+        const values = card.values.map(field).filter((f) => !!f);
+        if (!date || !values.length)
+            return _jsx(Empty, { children: "This widget's fields are not in this view." });
+        return (_jsx(TrendBody, { style: card.style, date: date, values: values, bucket: card.bucket, agg: card.agg, rows: own, read: read, legend: controlOn(card, 'legend') }));
+    }
+    if (card.kind === 'table' && card.style === 'top_n') {
+        const sort = field(card.sort);
+        const cols = card.columns.map(field).filter((f) => !!f);
+        if (!sort || !cols.length)
+            return _jsx(Empty, { children: "This widget's fields are not in this view." });
+        const top = merge(own)
+            .map((r) => ({ r, v: read(sort, r) }))
+            .filter((x) => x.v !== null)
+            .sort((a, b) => {
+            const d = typeof a.v === 'number' && typeof b.v === 'number'
+                ? a.v - b.v
+                : String(a.v).localeCompare(String(b.v));
+            return card.desc ? -d : d;
+        })
+            .slice(0, card.n);
+        if (!top.length)
+            return _jsx(Empty, {});
+        return (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: cols.map((f) => (_jsx(TableHead, { className: f.format === 'text' ? '' : 'text-right', children: f.label }, f.key))) }) }), _jsx(TableBody, { children: top.map(({ r }) => (_jsx(TableRow, { className: onDetails ? 'cursor-pointer' : undefined, onClick: onDetails && (() => onDetails(r)), children: cols.map((f) => (_jsx(TableCell, { className: f.format === 'text' ? '' : 'text-right', children: _jsx(WidgetValue, { value: read(f, r), field: f }) }, f.key))) }, domain.rowKey(r)))) })] }));
+    }
+    if (card.kind !== 'allocation')
+        return null;
+    const by = field(card.by);
+    const value = field(card.value);
+    if (!by || !value)
+        return _jsx(Empty, { children: "This widget's fields are not in this view." });
+    const masked = hidden && !!value.amount;
+    const fmt = (v) => short(v, value.format, masked);
+    const sums = sumBy(own, by, value, read);
+    // An empty value reads "No sector", not "—"; counts say "1 sector", "3 sectors".
+    const shown = (name, f) => name === label(null) ? `No ${f.label.toLowerCase()}` : name;
+    const count = (n) => `${n} ${by.label.toLowerCase()}${n === 1 ? '' : 's'}`;
+    if (card.style === 'bar_list') {
+        const bars = sums
+            .filter((x) => x.v !== 0)
+            .sort((a, b) => (card.desc ? b.v - a.v : a.v - b.v))
+            .slice(0, card.n);
+        if (!bars.length)
+            return _jsx(Empty, {});
+        const net = bars.reduce((t, x) => t + x.v, 0);
+        const abs = bars.reduce((t, x) => t + Math.abs(x.v), 0);
+        const up = bars.filter((b) => b.v > 0).length;
+        // Split by: each bar's parts by a text field, its 5 largest overall coloured as a donut of
+        // that field colours them, the rest Other.
+        const stackF = !card.signed && card.stack ? field(card.stack) : undefined;
+        const stack = (() => {
+            if (!stackF || stackF.key === by.key)
+                return null;
+            const order = sumBy(own, stackF, value, read).filter((x) => x.v > 0);
+            // A split needs two known parts; with fewer (no sectors set yet) plain bars read better.
+            if (order.filter((x) => x.name !== label(null)).length < 2)
+                return null;
+            const top = order.slice(0, STACK_MAX).map((x) => x.name);
+            const parts = [...top, ...(order.length > STACK_MAX ? ['Other'] : [])].map((name, i) => ({
+                name: shown(name, stackF),
+                key: `p${i}`,
+                fill: name === 'Other' ? 'var(--muted-foreground)' : colorOf(name, i),
+            }));
+            const keyOf = (n) => `p${top.includes(n) ? top.indexOf(n) : top.length}`;
+            const rows = bars.map((b) => {
+                const r = { name: shown(b.name, by), total: b.v };
+                for (const x of own) {
+                    if (label(read(by, x)) !== b.name)
+                        continue;
+                    const v = read(value, x);
+                    if (typeof v !== 'number' || v <= 0)
+                        continue;
+                    const k = keyOf(label(read(stackF, x)));
+                    r[k] = (r[k] ?? 0) + v;
+                }
+                return r;
+            });
+            return { rows, parts };
+        })();
+        return (_jsxs(_Fragment, { children: [_jsx(Headline, { value: `${card.signed && net > 0 ? '+' : ''}${fmt(net)}`, tone: card.signed ? (net >= 0 ? 'gain' : 'loss') : undefined, caption: card.signed
+                        ? `net · ${up} up, ${bars.length - up} down`
+                        : `${value.label.toLowerCase()} across ${count(bars.length)}` }), stack ? (_jsx(StackedBars, { rows: stack.rows, parts: stack.parts, fmt: fmt, exact: (v) => exact(v, value.format, masked), share: (v) => pct(v, abs) })) : (_jsx(RankedBars, { id: card.id, items: bars.map((b, i) => ({
+                        ...b,
+                        name: shown(b.name, by),
+                        fill: card.signed ? (b.v >= 0 ? 'var(--gain)' : 'var(--loss)') : colorOf(b.name, i),
+                    })), signed: card.signed, fmt: fmt, share: (v) => pct(Math.abs(v), abs) }))] }));
+    }
+    const parts = sums.filter((x) => x.v > 0).map((x) => ({ ...x, name: shown(x.name, by) }));
+    const total = parts.reduce((t, x) => t + x.v, 0);
+    const known = parts.filter((x) => x.name !== shown(label(null), by)).length;
+    if (!total)
+        return _jsx(Empty, {});
+    // Donut: `max` slices in all, Other the last. Allocation: the largest `max`, then Other.
+    const keep = card.style === 'donut' ? card.max - 1 : (card.max ?? ALLOCATION_MAX);
+    const limit = card.style === 'donut' ? card.max : keep;
+    const rest = parts.length > limit ? parts.slice(keep) : [];
+    const slices = rest.length
+        ? [...parts.slice(0, keep), { name: 'Other', v: rest.reduce((t, x) => t + x.v, 0) }]
+        : parts;
+    const colored = slices.map((s, i) => ({
+        ...s,
+        key: `s${i}`,
+        fill: s.name === 'Other' ? 'var(--muted-foreground)' : colorOf(s.name, i),
+    }));
+    if (card.style === 'donut')
+        return (_jsx(Donut, { items: colored, total: total, fmt: fmt, share: (v) => pct(v, total), caption: count(known), legend: controlOn(card, 'legend') }));
+    // Allocation: one stacked bar, no legend; each wide slice names itself, and hovering a slice
+    // gives its exact value and share, Other its 10 largest. The tooltip may leave the card.
+    const config = Object.fromEntries(colored.map((s) => [s.key, { label: s.name, color: s.fill }]));
+    const line = (name, v, fill) => (_jsxs("span", { className: "flex w-full items-center gap-2", children: [fill && _jsx("span", { className: "size-2 shrink-0 rounded-full", style: { background: fill } }), _jsx("span", { className: "truncate font-medium", children: name }), _jsxs("span", { className: "num ml-auto pl-3 whitespace-nowrap", children: [exact(v, value.format, masked), " \u00B7 ", pct(v, total)] })] }, name));
+    return (_jsxs("div", { className: "py-1", children: [_jsx(Headline, { value: fmt(total), caption: `${count(known)} · largest ${colored[0]?.name ?? ''} ${pct(colored[0]?.v ?? 0, total)}` }), _jsx(AllocationBar, { items: colored, total: total, config: config, share: (v) => pct(v, total), tooltip: _jsx(ChartTooltip, { cursor: false, shared: false, allowEscapeViewBox: { x: false, y: true }, wrapperStyle: { zIndex: 50 }, content: _jsx(ChartTooltipContent, { hideLabel: true, className: "min-w-48 max-w-72", formatter: (v, name) => {
+                            const s = colored.find((c) => c.key === name);
+                            if (s?.name !== 'Other')
+                                return line(s?.name ?? String(name), Number(v), s?.fill);
+                            return (_jsxs("span", { className: "flex w-full flex-col gap-1", children: [line(`Other (${rest.length})`, Number(v), s.fill), _jsxs("span", { className: "flex flex-col gap-0.5 border-t pt-1 text-muted-foreground", children: [rest.slice(0, 10).map((x) => line(x.name, x.v)), rest.length > 10 && _jsxs("span", { children: ["+", rest.length - 10, " more"] })] })] }));
+                        } }) }) })] }));
+}
+/** A top-N cell as its field reads, short where the field is short. */
+function WidgetValue({ value, field }) {
+    const hidden = useAmountsHidden() && !!field.amount;
+    if (value === null)
+        return _jsx("span", { className: "num text-muted-foreground", children: "\u2014" });
+    if (typeof value === 'string')
+        return _jsx("span", { className: "whitespace-nowrap", children: hidden ? maskAmount(value) : value });
+    const signed = field.format === 'signed' || field.format === 'percent' || field.format === 'price_signed';
+    const text = field.format === 'integer'
+        ? `${value < 0 ? MINUS : ''}${Math.abs(value).toFixed(0)}`
+        : field.format === 'percent' || field.format === 'weight'
+            ? `${value < 0 ? MINUS : signed && value > 0 ? '+' : ''}${Math.abs(value).toFixed(1)}%`
+            : `${value < 0 ? MINUS : signed && value > 0 ? '+' : ''}${isDollarFormat(field.format) ? '$' : ''}${field.compact || field.format === 'compact'
+                ? COMPACT.format(Math.abs(value))
+                : Math.abs(value).toLocaleString('en-US', {
+                    maximumFractionDigits: field.format === 'rounded' || field.format === 'price_rounded' ? 0 : 2,
+                })}`;
+    return (_jsx("span", { className: cn('num whitespace-nowrap', signed && (value > 0 ? 'text-gain' : value < 0 ? 'text-loss' : '')), children: hidden ? maskAmount('0') : text }));
+}
+/**
+ * The frame every card shares, widget or view: drag handle while
+ * the layout is edited, icon, title, a short note, the card's own tools (a view's pager), its ↻ and
+ * load time when it has a source, the width switch while editing, and its ⋯ menu. The body sits in
+ * a `relative` box so a view's progress bar runs along its top.
+ */
+/** Wider than this, a card's filter sits in its header line; narrower, on a line of its own. */
+const FILTER_INLINE_PX = 720;
+/** The header's width, so its filter knows whether it fits on the title's line. */
+function useWidth() {
+    const ref = useRef(null);
+    const [width, setWidth] = useState(0);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const ro = new ResizeObserver(([e]) => setWidth(e?.contentRect.width ?? 0));
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
+    return [ref, width];
+}
+export function LumenWidget({ id, kind, icon, title, note, controls, tools, filter, filterCount = 0, load, rows, loadNote, pad = true, pinned = false, compact = false, className, children, link: given, help, assistant, strip, shown, style, }) {
+    const [removing, setRemoving] = useState(false);
+    const cell = useGridCell();
+    const links = useLinks();
+    const link = given === false
+        ? undefined
+        : (given ??
+            (links ? { color: links.colorOf(id), onPick: (c) => links.setColor(id, c) } : undefined));
+    const Icon = icon ?? (kind ? cardIcon({ kind, style }) : LayoutGridIcon);
+    const layout = !!controls?.layout;
+    // A small card (one number) shows only its title until the page is in Edit layout.
+    const bare = compact && !layout;
+    const on = (k) => kind === null || controlOn({ kind, style, controls: shown }, k);
+    // A page's own card (kind null) says it is a table when it draws one (`style` table).
+    const styleId = kind
+        ? widgetStyleId({ kind, style })
+        : style === 'table'
+            ? 'table:table'
+            : 'page';
+    const table = kind === 'table' && style === 'table';
+    const ask = useAskAssistant(id, title, on('ask') ? assistant : false, styleId);
+    const assistantName = useAssistantName();
+    // A card folds to its header on its chevron only (a click elsewhere on the
+    // header does nothing); the browser remembers it per page. Never while arranging cards.
+    const [stored, setFolded] = useFolded(`card:${usePageKey()}:${id}`);
+    // Header off (Edit widget ▸ Controls): the card is its body alone, a clean
+    // card; Edit layout shows every header, so its link colour and menu stay in reach there.
+    const headerOff = !compact && !on('header');
+    const headless = headerOff && !layout;
+    const folded = stored && !layout && !bare && !headless;
+    const toggle = () => setFolded(!folded);
+    const own = kind !== null;
+    const mobile = useIsMobile();
+    const [head, headWidth] = useWidth();
+    const [filterOpen, setFilterOpen] = useState(false);
+    const showFilter = !!filter && !layout && !folded && on('filter');
+    const inline = showFilter && !mobile && headWidth >= FILTER_INLINE_PX;
+    const below = showFilter && !inline && (!mobile || filterOpen);
+    // A row of numbers with no header drops its own frame: its cards sit on the page.
+    const flat = headless && styleId === 'metric:row';
+    return (_jsx(CardIdProvider, { id: id, children: _jsxs(Card, { "data-slot": "lumen-card", "data-card": id, "data-card-title": title, "data-card-kind": styleId, className: cn(
+            // A border, not the card's ring: a ring draws outside the box, so the page's scroller
+            // clipped it wherever a card touched its edge (the top row's top line).
+            'h-full gap-0 border border-foreground/10 py-0 ring-0', folded && 'h-auto', 
+            // The allocation bar's tooltip reaches past its short card, over the cards below.
+            styleId === 'allocation:bar' ? 'relative overflow-visible hover:z-20' : 'overflow-clip', 
+            // The edit outline sits inside the card, over its pinned rows: an outer one is clipped by
+            // the page's scroller, and an inset outline paints under the sticky header and group rows.
+            layout &&
+                "relative after:pointer-events-none after:absolute after:inset-0 after:z-30 after:rounded-[inherit] after:border-2 after:border-primary/40 after:border-dashed after:content-['']", flat && 'border-0 bg-transparent shadow-none', className), children: [!headless && (_jsxs("div", { ref: head, className: cn('flex shrink-0 items-center gap-2 px-3', compact ? 'h-8' : 'h-10 border-b', (folded || below) && 'border-b-0', pinned && 'sticky left-0 w-(--view-w) max-w-full'), children: [layout && (_jsx(Button, { variant: "ghost", size: "icon-xs", className: "lumen-drag -ml-1 cursor-grab touch-none text-muted-foreground active:cursor-grabbing", "aria-label": `Drag ${title}`, children: _jsx(GripVerticalIcon, {}) })), link && !bare && (_jsx(LinkPicker, { color: link.color, onPick: link.onPick, label: title, className: "-mr-1" })), !compact && _jsx(Icon, { className: "size-4 shrink-0 text-muted-foreground" }), _jsx("span", { className: cn('truncate', compact ? 'text-xs text-muted-foreground' : 'text-sm font-semibold'), children: title }), link?.color && link.follows && !folded && (_jsxs("span", { className: "min-w-0 shrink truncate text-xs", style: { color: linkVar(link.color) }, title: `Follows ${link.follows}`, children: ["\u00B7 ", link.follows] })), layout && headerOff && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(Badge, { variant: "secondary", className: "shrink-0 gap-1 text-muted-foreground", children: [_jsx(EyeOffIcon, {}), " Header off"] }) }), _jsx(TooltipContent, { children: "Shown only in Edit layout. Change it in Edit widget \u25B8 Controls." })] })), !layout && !bare && (_jsx(FoldChevron, { folded: folded, label: title, onToggle: toggle, className: "-ml-1" })), folded && rows != null && (_jsxs("span", { className: "shrink-0 text-xs text-muted-foreground num", children: [rows.toLocaleString(), " ", rows === 1 ? 'row' : 'rows'] })), inline && (_jsx("div", { "data-card-filter": true, className: "flex min-w-40 max-w-xl flex-1 items-center gap-2", children: filter })), note && !layout && !folded && (_jsx("span", { className: "hidden truncate text-xs text-muted-foreground sm:inline", children: note })), _jsxs("span", { className: cn('ml-auto flex shrink-0 items-center gap-1', bare && 'hidden'), children: [!layout && load?.updated && _jsx(LumenFreshness, { load: load }), !layout && !folded && tools, showFilter && mobile && link?.color && !!link.linked && (_jsxs("span", { className: "num flex items-center gap-1 text-xs text-muted-foreground", title: `${link.linked} linked`, children: [_jsx(LinkDot, { color: link.color, className: "size-2" }), link.linked] })), showFilter && mobile && (_jsxs("span", { className: "relative", children: [_jsx(IconButton, { icon: FunnelIcon, label: filterOpen ? 'Hide filter' : 'Filter', "aria-expanded": filterOpen, className: cn(filterOpen && 'text-primary'), onClick: () => setFilterOpen(!filterOpen) }), filterCount > 0 && (_jsx(Badge, { className: "num pointer-events-none absolute -top-1 -right-1 h-4 min-w-4 px-1 text-[10px]", children: filterCount }))] })), !layout && !folded && help && _jsx(CardHelp, { title: title, children: help }), !layout && load && on('refresh') && (_jsx(LumenRefresh, { load: load, label: `Refresh ${title}` })), (controls?.editable || (!layout && (ask || load?.editScript))) && (_jsxs(DropdownMenu, { modal: false, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(IconButton, { icon: MoreHorizontalIcon, label: `${title} menu` }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-44", children: [ask && !layout && (_jsxs(DropdownMenuItem, { onSelect: ask, children: [_jsx(SparklesIcon, {}), " Ask ", assistantName] })), load?.editScript && !layout && (_jsxs(DropdownMenuItem, { onSelect: load.editScript, children: [_jsx(CodeIcon, {}), " Script"] })), (ask || load?.editScript) && !layout && controls?.editable && (_jsx(DropdownMenuSeparator, {})), controls?.editable && (_jsxs(_Fragment, { children: [!controls.fixed && (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuItem, { onSelect: () => controls.onAction('edit'), children: [_jsx(PencilIcon, {}), " Edit widget"] }), _jsxs(DropdownMenuItem, { disabled: !own, onSelect: () => controls.onAction('duplicate'), children: [_jsx(CopyIcon, {}), " Duplicate"] })] })), _jsxs(DropdownMenuItem, { disabled: controls.first, onSelect: () => controls.onAction('up'), children: [_jsx(ArrowUpIcon, {}), " Move up"] }), _jsxs(DropdownMenuItem, { disabled: controls.last, onSelect: () => controls.onAction('down'), children: [_jsx(ArrowDownIcon, {}), " Move down"] }), controls.onFit && (_jsxs(DropdownMenuItem, { onSelect: controls.onFit, children: [_jsx(FoldVerticalIcon, {}), " Fit height"] })), !controls.fixed && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "text-muted-foreground focus:text-destructive", onSelect: () => setRemoving(true), children: [_jsx(Trash2Icon, {}), " Remove"] })] }))] }))] })] }))] })] })), below && !headless && (_jsx("div", { "data-card-filter": true, className: cn('flex items-center gap-2 border-b px-3 pb-2', pinned && 'sticky left-0 w-(--view-w) max-w-full'), children: filter })), strip && !layout && !folded && !headless ? (_jsx("div", { "data-card-strip": true, className: cn('flex min-w-0 items-center gap-2 border-b px-3 py-1.5 empty:hidden', pinned && 'sticky left-0 w-(--view-w) max-w-full'), children: strip })) : null, _jsx("div", { hidden: folded, className: cn('relative min-w-0', 
+                    // On the grid a card fills its cell: with a height of its own its body scrolls; one as
+                    // tall as it draws keeps its body's height, so the grid can measure it.
+                    !cell ? 'flex-1' : cell.fixed && 'min-h-0 flex-1 overflow-auto', pad && !table && !flat && (compact ? 'px-3 pb-3' : 'p-3')), children: _jsx(LumenBoundary, { where: id, children: children }) }), !layout && !folded && load && on('footer') && (_jsx("div", { className: cn('mt-auto shrink-0', pinned && 'sticky left-0 w-(--view-w) max-w-full'), children: _jsx(LumenLoadFooter, { load: load, rows: rows, note: loadNote }) })), controls && (_jsx(LumenConfirm, { open: removing, onOpenChange: setRemoving, title: `Remove ${title}?`, description: table ? 'Add widget brings a table back.' : 'Add widget brings it back.', action: "Remove", onConfirm: () => controls.onAction('remove') }))] }) }));
+}
+/**
+ * One widget in its card. Widgets over the view's rows (tiles,
+ * charts, top N) load with the view: its states, its ↻. Market and price chart widgets read their own
+ * data and start once their card scrolls into view.
+ */
+export function LumenSavedWidget({ widget, title, domain, rows, fields, merge, onDetails, load, tiles, controls, link, }) {
+    const row = isRowCard(widget);
+    const number = widget.kind === 'metric' && 'tile' in widget;
+    const head = row ? domain.tilesHead?.(rows) : undefined;
+    const compact = number;
+    const frame = {
+        id: widget.id,
+        kind: widget.kind,
+        title: head?.title ?? title,
+        compact,
+        controls,
+        link,
+        shown: widget.controls,
+        style: widget.style,
+        note: head?.note ??
+            (widget.filter.length
+                ? widget.filter.map((t) => `${t.not ? 'not ' : ''}${t.value}`).join(', ')
+                : undefined),
+        tools: head?.tools,
+    };
+    if (widget.kind === 'chart' && widget.style === 'price')
+        return _jsx(ChartCard, { widget: widget, frame: frame });
+    if (widget.kind === 'chart' && widget.style === 'growth')
+        return _jsx(GrowthCard, { widget: widget, frame: frame, domain: domain, rows: rows, load: load });
+    if (widget.kind === 'chart' && widget.style === 'market')
+        return (_jsx(LumenWidget, { ...frame, children: _jsx(LumenLazy, { children: _jsx(MarketWidget, { symbols: widget.symbols, style: widget.layout }) }) }));
+    const body = row || number ? (tiles) : (_jsx(WidgetBody, { card: widget, domain: domain, rows: rows, fields: fields, merge: merge, onDetails: onDetails }));
+    return (_jsx(LumenWidget, { ...frame, pad: widgetStyleId(widget) !== 'table:top_n', load: load, loadNote: "from the view's rows", children: load ? (_jsx(LumenStates, { load: { ...load, error: null }, empty: load.error ? _jsx(Empty, { children: "Shows once the view's rows load." }) : undefined, kind: "widget", skeleton: row || number ? body : _jsx(Skeleton, { className: "h-40 w-full" }), children: body })) : (body) }));
+}
+/** Growth of $1: the domain's lines for the shown rows, its bands and markers. */
+function GrowthCard({ widget, frame, domain, rows, load, }) {
+    const g = domain.growth;
+    const lines = useMemo(() => g?.lines(rows) ?? [], [g, rows]);
+    const bands = useMemo(() => g?.bands?.(rows) ?? [], [g, rows]);
+    const loading = !!load?.loading || !!g?.loading;
+    return (_jsx(LumenWidget, { ...frame, tools: g?.tools, note: g?.note ?? frame.note, load: load, rows: lines.length, children: !g ? (_jsx(Empty, { children: "This view has no curves to draw." })) : loading && !lines.length ? (_jsx(Skeleton, { className: "h-64 w-full" })) : lines.length ? (_jsx(GrowthChart, { lines: lines, scale: widget.scale, bands: bands, markers: g.markers, ytd: false, className: "aspect-auto h-64 w-full md:h-80" })) : (_jsx(Empty, { children: "No lines yet: run a row to draw it." })) }));
+}
+/** The price chart widget: LumenChart in a card, with its own source, ↻ and load time. A change to
+ *  its symbol, window or type starts the chart over. */
+function ChartCard(props) {
+    const { symbol, window, type } = props.widget;
+    return _jsx(ChartCardBody, { ...props }, `${symbol}|${window}|${type}`);
+}
+function ChartCardBody({ widget, frame, }) {
+    const chart = useLumenChart({
+        symbols: [widget.symbol],
+        window: widget.window,
+        type: widget.type,
+        indicators: [],
+        lazy: true,
+        windows: controlOn(widget, 'window'),
+    });
+    return (_jsx("div", { ref: chart.ref, className: "h-full", children: _jsx(LumenWidget, { ...frame, load: chart.noDesk ? undefined : chart.load, rows: chart.rows, children: _jsx("div", { className: "flex flex-col gap-3", children: chart.element }) }) }));
+}
+/** The page header's layout slot while a page's layout is edited: Add widget, Cancel and Save,
+ *  icons only (in the header, not a bar of their own: Cancel
+ *  drops the changes and leaves, in place of Reset). */
+export function LayoutActions({ onCancel, onAdd, onSave, onReset, }) {
+    return (_jsxs(_Fragment, { children: [onReset && (_jsx(LumenConfirm, { title: "Reset this page to its default?", description: "Your changes to its widgets, columns and filters go, and the built-in page comes back.", action: "Reset to default", destructive: false, onConfirm: onReset, children: _jsx(IconButton, { icon: RotateCcwIcon, label: "Reset to default" }) })), _jsx(IconButton, { icon: PlusIcon, label: "Add widget", onClick: onAdd }), _jsx(IconButton, { icon: XIcon, label: "Cancel layout changes", onClick: onCancel }), _jsx(IconButton, { icon: CheckIcon, label: "Save layout", variant: "default", onClick: onSave })] }));
+}
+/** The chip beside the title while a page's layout is edited. */
+export function LayoutChip() {
+    return (_jsxs(Badge, { variant: "secondary", className: "font-normal", children: [_jsx(PencilIcon, {}), " Editing layout"] }));
+}
+// ── Add and edit ───────────────────────────────────────────────────────────────────────────────
+/** An id not yet used in `cards`: `base`, else `base_2`, `base_3`... */
+export function freeId(cards, base) {
+    const taken = new Set(cards.map((b) => b.id));
+    if (!taken.has(base))
+        return base;
+    let n = 2;
+    while (taken.has(`${base}_${n}`))
+        n++;
+    return `${base}_${n}`;
+}
+const isText = (f) => f.format === 'text' && !f.render;
+const isNumber = (f) => f.format !== 'text' && !f.render;
+/** A new card of a style (`kind:style`) with sensible fields of this domain. */
+export function draftOf(styleId, domain, cards) {
+    const [kind = 'table', style = 'table'] = styleId.split(':');
+    const texts = domain.fields.filter(isText);
+    const nums = domain.fields.filter(isNumber);
+    const by = (texts.find((f) => f.groupable) ?? texts[0])?.key ?? '';
+    const value = (nums.find((f) => f.key === 'market_value' || f.key === 'value') ??
+        nums.find((f) => f.amount) ??
+        nums[0])?.key ?? '';
+    const base = { id: freeId(cards, style), title: null, filter: [], kind, style };
+    const trend = { date: dateFields(domain)[0]?.key ?? '', values: [value] };
+    switch (styleId) {
+        case 'table:top_n':
+            return viewCardSchema.parse({
+                ...base,
+                sort: value,
+                columns: [texts[0]?.key, value].filter(Boolean),
+                w: 3,
+            });
+        case 'table:table':
+        case 'metric:row':
+            return viewCardSchema.parse(base);
+        case 'chart:price':
+            return viewCardSchema.parse({ ...base, symbol: 'SPX', w: 3 });
+        case 'chart:growth':
+            return viewCardSchema.parse({ ...base, w: 6 });
+        case 'chart:market':
+            return viewCardSchema.parse({ ...base, symbols: [...OUTLOOK_INDEXES], layout: 'lines' });
+        case 'metric:number':
+        case 'metric:progress_bar':
+        case 'metric:progress_circle': {
+            const f = nums.find((x) => x.key === value);
+            return viewCardSchema.parse({
+                ...base,
+                tile: { key: 'tile_1', label: f?.label ?? 'Card', field: value, agg: 'sum' },
+            });
+        }
+        case 'allocation:bar':
+        case 'allocation:donut':
+        case 'allocation:bar_list':
+            return viewCardSchema.parse({ ...base, by, value, w: style === 'bar' ? 6 : 2 });
+        default:
+            return viewCardSchema.parse({ ...base, ...trend });
+    }
+}
+/** Whether the app can draw a style: Market needs its live feed, Price its history route, Growth
+ *  of $1 a domain that draws curves. */
+export function useOffered(domain) {
+    const market = useHasMarket();
+    const charts = !!useBarsUrl();
+    return (styleId) => styleId === 'chart:market'
+        ? market
+        : styleId === 'chart:price'
+            ? charts
+            : styleId === 'chart:growth'
+                ? !!domain.growth
+                : true;
+}
+function PickCard({ icon: Icon, name, note, added, disabled, onClick, }) {
+    return (_jsxs(Button, { variant: "outline", disabled: disabled, onClick: onClick, className: "h-auto justify-start gap-3 p-3 text-left font-normal whitespace-normal", children: [_jsx("span", { className: "grid size-8 shrink-0 place-items-center rounded-md bg-primary/10 text-primary", children: _jsx(Icon, { className: "size-4" }) }), _jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("span", { className: "font-medium", children: name }), _jsx("span", { className: "text-xs text-muted-foreground", children: note })] }), added && (_jsxs(Badge, { variant: "secondary", className: "ml-auto font-normal", children: [_jsx(CheckIcon, {}), " Added"] }))] }));
+}
+/** Add widget: the domain's pre-built widgets, or a kind to build. */
+export function AddWidgetDialog({ open, onOpenChange, domain, cards, onAdd, onBuild, name = 'This page', }) {
+    // Step 1: the widget's main data, this page's rows unless another is picked.
+    const [data, setData] = useState(PAGE_SOURCE);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: starts on this page each time it opens.
+    useEffect(() => setData(PAGE_SOURCE), [open]);
+    const pageLabel = `${name} (this page)`;
+    const dataOptions = useWidgetDataOptions(open, pageLabel);
+    const own = data !== PAGE_SOURCE;
+    const ids = useMemo(() => (own ? [data] : []), [own, data]);
+    const read = useDomainReads(ids, ids)[data];
+    const shapeDomain = (own ? (read?.domain ?? { id: data, rowKey: String, fields: [] }) : domain);
+    const sourced = (c) => (own ? { ...c, source: data } : c);
+    const catalog = own ? [] : (viewWidgetCatalog[domain.id] ?? []);
+    const keys = new Set(domain.fields.map((f) => f.key));
+    const hasRow = !own && cards.some(isRowCard);
+    const full = cards.length >= 12;
+    const offered = useOffered(shapeDomain);
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "sm:max-w-2xl", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Add widget" }), _jsxs(DialogDescription, { children: ["Pick its data, then its shape", full ? '. A page holds 12 cards at most.' : '.'] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "add-widget-data", className: "text-xs font-medium text-muted-foreground", children: "Data" }), _jsx(LumenSelector, { id: "add-widget-data", icon: DatabaseIcon, label: "Widget data", search: true, value: data, options: dataOptions, onChange: setData }), own && read?.state !== 'ok' && (_jsx("p", { className: cn('text-xs', read?.state === 'loading' || !read ? 'text-muted-foreground' : 'text-destructive'), children: read?.state === 'loading' || !read
+                                ? 'Reading its fields…'
+                                : (read.detail ?? 'Its rows could not be read.') }))] }), _jsxs(Tabs, { defaultValue: catalog.length ? 'prebuilt' : 'own', children: [_jsxs(TabsList, { children: [!own && (_jsxs(TabsTrigger, { value: "prebuilt", children: [_jsx(PackageIcon, {}), "Pre-built"] })), _jsxs(TabsTrigger, { value: "own", children: [_jsx(WrenchIcon, {}), "Build your own"] })] }), _jsx(TabsContent, { value: "prebuilt", className: dialogBody, children: catalog.length ? (_jsx("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: catalog.map((it) => {
+                                    const added = cards.some((b) => b.id === it.widget.id);
+                                    const fits = [
+                                        ...('by' in it.widget ? [it.widget.by, it.widget.value] : []),
+                                        ...(it.widget.kind === 'table' && it.widget.style === 'top_n'
+                                            ? [it.widget.sort, ...it.widget.columns]
+                                            : []),
+                                    ].every((k) => keys.has(k));
+                                    return (_jsx(PickCard, { icon: cardIcon(it.widget), name: it.name, note: it.note, added: added, disabled: added || full || !fits, onClick: () => onAdd(it.widget) }, it.widget.id));
+                                }) })) : (_jsx(Empty, { children: "No pre-built widgets for this view yet: build your own." })) }), _jsx(TabsContent, { value: "own", className: cn(dialogBody, 'flex flex-col gap-4'), children: viewCardKinds.map((kind) => {
+                                const styles = WIDGET_STYLES.filter((w) => w.kind === kind && offered(w.id));
+                                if (!styles.length)
+                                    return null;
+                                return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: VIEW_CARD_KIND_NAMES[kind] }), _jsx("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: styles.map((w) => {
+                                                // A table goes on as it is; the page's first row of numbers shows the
+                                                // view's cards, any other starts empty in Edit widget.
+                                                const ready = w.id === 'table:table' || (w.id === 'metric:row' && !hasRow);
+                                                return (_jsx(PickCard, { icon: cardIcon(w), name: w.name, note: w.note, disabled: full || (own && read?.state !== 'ok'), onClick: () => ready
+                                                        ? onAdd(sourced(draftOf(w.id, shapeDomain, cards)))
+                                                        : onBuild(sourced(w.id === 'metric:row'
+                                                            ? viewCardSchema.parse({
+                                                                ...draftOf(w.id, shapeDomain, cards),
+                                                                tiles: [],
+                                                            })
+                                                            : draftOf(w.id, shapeDomain, cards))) }, w.id));
+                                            }) })] }, kind));
+                            }) })] }, data)] }) }));
+}
+/** A page's cards after `action` on card `i`, or null for Edit (the caller opens a dialog). */
+export function cardsAfter(cards, i, action) {
+    const b = cards[i];
+    if (!b || action === 'edit')
+        return null;
+    const next = [...cards];
+    if (action === 'remove')
+        next.splice(i, 1);
+    if (action === 'duplicate')
+        next.splice(i + 1, 0, { ...b, id: freeId(cards, b.id.replace(/_\d+$/, '')) });
+    // Moving up or down swaps places with the card before or after it in reading order.
+    const swap = (a, c) => {
+        const A = next[a];
+        const C = next[c];
+        next[a] = { ...C, x: A.x, y: A.y, phone: A.phone };
+        next[c] = { ...A, x: C.x, y: C.y, phone: C.phone };
+    };
+    if (action === 'up' && i > 0)
+        swap(i - 1, i);
+    if (action === 'down' && i < next.length - 1)
+        swap(i, i + 1);
+    if (action === 'duplicate') {
+        const { x: _x, y: _y, phone: _p, ...copy } = next[i + 1];
+        next[i + 1] = copy;
+    }
+    return next;
+}
+/** ⓘ How to read: the card's own few lines on what it shows and what to look for. */
+function CardHelp({ title, children }) {
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(IconButton, { icon: InfoIcon, label: `How to read ${title}` }) }), _jsxs(PopoverContent, { align: "end", className: "w-80 text-sm", children: [_jsxs("p", { className: "mb-1.5 font-medium", children: ["How to read ", title] }), _jsx("div", { className: "flex flex-col gap-1.5 text-muted-foreground", children: children })] })] }));
+}
+/**
+ * Ask the assistant, the card's ⋯ menu on every card: opens the panel pointed at this
+ * card with a suggested question in the composer, which the person edits and sends. Reading charts
+ * and verdicts is judgement, so the question asks for Bolt, the tier the assistant calls in for it.
+ */
+function useAskAssistant(id, title, hint, card) {
+    const z = useAssistant();
+    if (!z?.ready || hint === false)
+        return null;
+    return () => {
+        const where = typeof document === 'undefined' ? undefined : document.title || undefined;
+        z.draft(`Explain the "${title}" card on this page: what it shows, what stands out, and what I should do next.${hint ? ` ${hint}` : ''} Use Bolt to read it.`, [{ kind: 'card', label: title, id, card, where }]);
+    };
+}