@columenlabs/lumen-ui 0.1.95 → 0.1.96

package/dist/allocation-body.d.ts

@@ -0,0 +1,15 @@
+/**
+ * An allocation widget's body (bar list, donut, allocation bar). It draws with the charts library,
+ * so the widget frame loads it only when such a widget shows.
+ */
+import { type ViewCard } from '@columenlabs/lumen-ui-types/views';
+import { type ViewCellValue, type ViewField } from './view-model.js';
+export declare function AllocationBody<T>({ card, own, read, field, }: {
+    card: Extract<ViewCard, {
+        kind: 'allocation';
+    }>;
+    /** The widget's own rows (its filter applied). */
+    own: T[];
+    read: (f: ViewField<T>, r: T) => ViewCellValue;
+    field: (key: string) => ViewField<T> | undefined;
+}): import("react").JSX.Element;

package/dist/allocation-body.js

@@ -0,0 +1,104 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * An allocation widget's body (bar list, donut, allocation bar). It draws with the charts library,
+ * so the widget frame loads it only when such a widget shows.
+ */
+import { ALLOCATION_MAX, controlOn } from '@columenlabs/lumen-ui-types/views';
+import { AllocationBar, Donut, Headline, RankedBars, STACK_MAX, StackedBars, } from './lumen-widget-charts.js';
+import { useAmountsHidden } from './shell.js';
+import { ChartTooltip, ChartTooltipContent } from './ui/chart.js';
+import { label } from './view-model.js';
+import { colorOf, exact, pct, short, sumBy } from './widget-values.js';
+const Empty = ({ children = 'Nothing to show for these rows.' }) => (_jsx("p", { className: "py-6 text-center text-sm text-muted-foreground", children: children }));
+export function AllocationBody({ card, own, read, field, }) {
+    const hidden = useAmountsHidden();
+    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"] })] })] }));
+                        } }) }) })] }));
+}

package/dist/lumen-widget.js

@@ -6,7 +6,7 @@ import { OUTLOOK_INDEXES, marketWindows, } from '@columenlabs/lumen-ui-types/mar
 // 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, isOwnTile, isRowCard, isTableCard, trendBuckets, viewCardKinds, viewCardSchema, viewWidgetCatalog, widgetStyleId, widgetStyleOf, } from '@columenlabs/lumen-ui-types/views';
+import { VIEW_CARD_KIND_NAMES, WIDGET_STYLES, controlOn, isDollarFormat, isOwnTile, 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, RefreshCwIcon, 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';
@@ -23,7 +23,6 @@ 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 { 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 { maskAmount, useAmountsHidden } from './shell.js';
@@ -31,7 +30,6 @@ 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';
@@ -49,12 +47,14 @@ 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';
+import { COMPACT, MINUS } from './widget-values.js';
 // Loaded when it first shows (lazy-part.tsx).
 const MarketWidget = lazyPart(() => import('./market/market-widget.js').then((m) => m.MarketWidget), _jsx(Skeleton, { className: "h-full min-h-40 w-full" }));
 // Loaded when it first shows (lazy-part.tsx).
 const TrendBody = lazyPart(() => import('./lumen-trend.js').then((m) => m.TrendBody), _jsx(Skeleton, { className: "h-full min-h-40 w-full" }));
 // Loaded when it first shows (lazy-part.tsx).
 const GrowthChart = lazyPart(() => import('./growth-chart.js').then((m) => m.GrowthChart), _jsx(Skeleton, { className: "h-full min-h-40 w-full" }));
+const AllocationBody = lazyPart(() => import('./allocation-body.js').then((m) => m.AllocationBody), _jsx(Skeleton, { className: "h-full min-h-32 w-full" }));
 /** Each style's icon, by its id in `WIDGET_STYLES`; a style left out takes its kind's. */
 const STYLE_ICONS = {
     'table:table': TableIcon,
@@ -103,56 +103,10 @@ export function cardFilterFields(fields) {
             },
     }));
 }
-// ── 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]);
@@ -190,95 +144,7 @@ export function WidgetBody({ card, domain, rows, fields, merge, onDetails, }) {
     }
     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"] })] })] }));
-                        } }) }) })] }));
+    return _jsx(AllocationBody, { card: card, own: own, read: read, field: field });
 }
 /** A top-N cell as its field reads, short where the field is short. */
 function WidgetValue({ value, field }) {

package/dist/overview-charts.d.ts

@@ -0,0 +1,18 @@
+import type { OverviewWidget } from './overview.js';
+export declare function Ring({ ring, size }: {
+    ring: OverviewWidget & {
+        kind: 'ring';
+    };
+    size: number;
+}): import("react").JSX.Element;
+export declare function Bars({ w }: {
+    w: OverviewWidget & {
+        kind: 'bars';
+    };
+}): import("react").JSX.Element;
+/** Busy blocks over a window: one stacked bar of idle and busy segments, in order. */
+export declare function Timeline({ w }: {
+    w: OverviewWidget & {
+        kind: 'timeline';
+    };
+}): import("react").JSX.Element;

package/dist/overview-charts.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The Overview's chart widgets (ring, bars, timeline), drawn with Recharts in shadcn's
+// ChartContainer; overview.tsx loads them only when a stage shows one.
+import { Bar, BarChart, Cell, Label, Pie, PieChart, XAxis, YAxis } from 'recharts';
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from './ui/chart.js';
+const FILL = {
+    ok: 'var(--gain)',
+    warn: 'var(--warning)',
+    bad: 'var(--destructive)',
+    idle: 'var(--primary)',
+};
+export function Ring({ ring, size }) {
+    return (_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-3", children: [ring.rings.map((r) => {
+                const v = Math.max(0, Math.min(1, r.value));
+                const data = [
+                    { key: 'value', value: v, fill: FILL[r.tone ?? 'idle'] },
+                    { key: 'rest', value: 1 - v, fill: 'var(--muted)' },
+                ];
+                return (_jsx(ChartContainer, { config: { value: { label: r.label } }, className: "aspect-square shrink-0", style: { width: size, height: size }, role: "img", "aria-label": `${r.label} ${r.text}`, children: _jsx(PieChart, { children: _jsxs(Pie, { data: data, dataKey: "value", nameKey: "key", innerRadius: size / 2 - 9, outerRadius: size / 2 - 2, startAngle: 90, endAngle: -270, strokeWidth: 0, isAnimationActive: false, children: [data.map((d) => (_jsx(Cell, { fill: d.fill }, d.key))), _jsx(Label, { content: ({ viewBox }) => {
+                                        if (!viewBox || !('cx' in viewBox))
+                                            return null;
+                                        const many = ring.rings.length > 1;
+                                        return (_jsxs("text", { x: viewBox.cx, y: viewBox.cy, textAnchor: "middle", children: [_jsx("tspan", { x: viewBox.cx, dy: many ? '-0.1em' : '0.35em', className: "fill-foreground font-num text-[11px]", children: r.text }), many && (_jsx("tspan", { x: viewBox.cx, dy: "1.2em", className: "fill-muted-foreground text-[9px]", children: r.label }))] }));
+                                    } })] }) }) }, r.label));
+            }), ring.detail && _jsx("div", { className: "min-w-36 flex-1", children: ring.detail })] }));
+}
+export function Bars({ w }) {
+    const config = { value: { label: 'Value', color: 'var(--chart-1)' } };
+    return (_jsx(ChartContainer, { config: config, className: "aspect-auto h-16 w-full", children: _jsxs(BarChart, { data: w.bars, margin: { top: 2, right: 0, bottom: 0, left: 0 }, children: [_jsx(XAxis, { dataKey: "label", hide: true }), _jsx(YAxis, { hide: true, domain: [0, 'dataMax'] }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, { hideIndicator: true, formatter: (v) => (w.format ? w.format(Number(v)) : String(v)) }) }), _jsx(Bar, { dataKey: "value", fill: "var(--color-value)", radius: 2, isAnimationActive: false })] }) }));
+}
+/** Busy blocks over a window: one stacked bar of idle and busy segments, in order. */
+export function Timeline({ w }) {
+    const span = Math.max(1, w.to - w.from);
+    const segments = [];
+    let at = w.from;
+    const blocks = [...w.blocks]
+        .map((b) => ({ start: Math.max(w.from, b.start), end: Math.min(w.to, b.end) }))
+        .filter((b) => b.end > b.start)
+        .sort((a, b) => a.start - b.start);
+    for (const b of blocks) {
+        const start = Math.max(at, b.start);
+        if (b.end <= start)
+            continue;
+        if (start > at)
+            segments.push({ key: `s${segments.length}`, size: start - at, busy: false });
+        segments.push({ key: `s${segments.length}`, size: b.end - start, busy: true });
+        at = b.end;
+    }
+    if (at < w.to)
+        segments.push({ key: `s${segments.length}`, size: w.to - at, busy: false });
+    const row = Object.fromEntries(segments.map((s) => [s.key, s.size / span]));
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(ChartContainer, { config: {}, className: "aspect-auto h-6 w-full", children: _jsxs(BarChart, { data: [row], layout: "vertical", margin: { top: 0, right: 0, bottom: 0, left: 0 }, barCategoryGap: 0, children: [_jsx(XAxis, { type: "number", hide: true, domain: [0, 1] }), _jsx(YAxis, { type: "category", hide: true }), segments.map((s, i) => (_jsx(Bar, { dataKey: s.key, stackId: "t", fill: s.busy ? 'var(--chart-1)' : 'var(--muted)', radius: i === 0 ? [3, 0, 0, 3] : i === segments.length - 1 ? [0, 3, 3, 0] : 0, isAnimationActive: false }, s.key)))] }) }), _jsx("div", { className: "relative h-4 text-[10px] text-muted-foreground", children: w.ticks.map((t) => (_jsx("span", { className: "num absolute -translate-x-1/2 first:translate-x-0 last:-translate-x-full", style: { left: `${((t.at - w.from) / span) * 100}%` }, children: t.label }, t.at))) })] }));
+}

package/dist/overview.js

@@ -8,24 +8,17 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // Overview moves onto it later (Sources, Pipelines, Storage, Coverage).
 import { ArrowRightIcon, TriangleAlertIcon } from 'lucide-react';
 import { Fragment, useState } from 'react';
-import { Bar, BarChart, Cell, Label, Pie, PieChart, XAxis, YAxis } from 'recharts';
+import { lazyPart } from './lazy-part.js';
 import { cn } from './lib/utils.js';
 import { LumenLayout } from './lumen-layout.js';
 import { Badge } from './ui/badge.js';
 import { Button } from './ui/button.js';
-import { ChartContainer, ChartTooltip, ChartTooltipContent } from './ui/chart.js';
 const DOT = {
     ok: 'bg-gain',
     warn: 'bg-warning',
     bad: 'bg-destructive',
     idle: 'bg-muted-foreground',
 };
-const FILL = {
-    ok: 'var(--gain)',
-    warn: 'var(--warning)',
-    bad: 'var(--destructive)',
-    idle: 'var(--primary)',
-};
 /** A stage's status mark: a dot, or ▲ when it needs a look. */
 export function ToneDot({ tone, className }) {
     if (tone === 'warn' || tone === 'bad') {
@@ -37,48 +30,11 @@ export function ToneDot({ tone, className }) {
 export function OverviewList({ items, }) {
     return (_jsx("dl", { className: "flex min-w-0 flex-col gap-0.5 text-xs", children: items.map((it, i) => (_jsxs("div", { className: cn('flex justify-between gap-2', it.tone === 'warn' && 'text-warning', it.tone === 'bad' && 'text-destructive'), children: [_jsx("dt", { className: "truncate", children: it.label }), _jsx("dd", { className: "num shrink-0 text-muted-foreground", children: it.value })] }, i))) }));
 }
-function Ring({ ring, size }) {
-    return (_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-3", children: [ring.rings.map((r) => {
-                const v = Math.max(0, Math.min(1, r.value));
-                const data = [
-                    { key: 'value', value: v, fill: FILL[r.tone ?? 'idle'] },
-                    { key: 'rest', value: 1 - v, fill: 'var(--muted)' },
-                ];
-                return (_jsx(ChartContainer, { config: { value: { label: r.label } }, className: "aspect-square shrink-0", style: { width: size, height: size }, role: "img", "aria-label": `${r.label} ${r.text}`, children: _jsx(PieChart, { children: _jsxs(Pie, { data: data, dataKey: "value", nameKey: "key", innerRadius: size / 2 - 9, outerRadius: size / 2 - 2, startAngle: 90, endAngle: -270, strokeWidth: 0, isAnimationActive: false, children: [data.map((d) => (_jsx(Cell, { fill: d.fill }, d.key))), _jsx(Label, { content: ({ viewBox }) => {
-                                        if (!viewBox || !('cx' in viewBox))
-                                            return null;
-                                        const many = ring.rings.length > 1;
-                                        return (_jsxs("text", { x: viewBox.cx, y: viewBox.cy, textAnchor: "middle", children: [_jsx("tspan", { x: viewBox.cx, dy: many ? '-0.1em' : '0.35em', className: "fill-foreground font-num text-[11px]", children: r.text }), many && (_jsx("tspan", { x: viewBox.cx, dy: "1.2em", className: "fill-muted-foreground text-[9px]", children: r.label }))] }));
-                                    } })] }) }) }, r.label));
-            }), ring.detail && _jsx("div", { className: "min-w-36 flex-1", children: ring.detail })] }));
-}
-function Bars({ w }) {
-    const config = { value: { label: 'Value', color: 'var(--chart-1)' } };
-    return (_jsx(ChartContainer, { config: config, className: "aspect-auto h-16 w-full", children: _jsxs(BarChart, { data: w.bars, margin: { top: 2, right: 0, bottom: 0, left: 0 }, children: [_jsx(XAxis, { dataKey: "label", hide: true }), _jsx(YAxis, { hide: true, domain: [0, 'dataMax'] }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, { hideIndicator: true, formatter: (v) => (w.format ? w.format(Number(v)) : String(v)) }) }), _jsx(Bar, { dataKey: "value", fill: "var(--color-value)", radius: 2, isAnimationActive: false })] }) }));
-}
-/** Busy blocks over a window: one stacked bar of idle and busy segments, in order. */
-function Timeline({ w }) {
-    const span = Math.max(1, w.to - w.from);
-    const segments = [];
-    let at = w.from;
-    const blocks = [...w.blocks]
-        .map((b) => ({ start: Math.max(w.from, b.start), end: Math.min(w.to, b.end) }))
-        .filter((b) => b.end > b.start)
-        .sort((a, b) => a.start - b.start);
-    for (const b of blocks) {
-        const start = Math.max(at, b.start);
-        if (b.end <= start)
-            continue;
-        if (start > at)
-            segments.push({ key: `s${segments.length}`, size: start - at, busy: false });
-        segments.push({ key: `s${segments.length}`, size: b.end - start, busy: true });
-        at = b.end;
-    }
-    if (at < w.to)
-        segments.push({ key: `s${segments.length}`, size: w.to - at, busy: false });
-    const row = Object.fromEntries(segments.map((s) => [s.key, s.size / span]));
-    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(ChartContainer, { config: {}, className: "aspect-auto h-6 w-full", children: _jsxs(BarChart, { data: [row], layout: "vertical", margin: { top: 0, right: 0, bottom: 0, left: 0 }, barCategoryGap: 0, children: [_jsx(XAxis, { type: "number", hide: true, domain: [0, 1] }), _jsx(YAxis, { type: "category", hide: true }), segments.map((s, i) => (_jsx(Bar, { dataKey: s.key, stackId: "t", fill: s.busy ? 'var(--chart-1)' : 'var(--muted)', radius: i === 0 ? [3, 0, 0, 3] : i === segments.length - 1 ? [0, 3, 3, 0] : 0, isAnimationActive: false }, s.key)))] }) }), _jsx("div", { className: "relative h-4 text-[10px] text-muted-foreground", children: w.ticks.map((t) => (_jsx("span", { className: "num absolute -translate-x-1/2 first:translate-x-0 last:-translate-x-full", style: { left: `${((t.at - w.from) / span) * 100}%` }, children: t.label }, t.at))) })] }));
-}
+// The ring, bar and timeline widgets draw with the charts library, so they load only when a stage
+// shows one.
+const Ring = lazyPart(() => import('./overview-charts.js').then((m) => m.Ring));
+const Bars = lazyPart(() => import('./overview-charts.js').then((m) => m.Bars));
+const Timeline = lazyPart(() => import('./overview-charts.js').then((m) => m.Timeline));
 /** A widget's body: the card's frame, title and ↻ come from LumenLayout. */
 function WidgetBody({ w }) {
     return (_jsxs("div", { "data-widget": w.id, className: "flex min-w-0 flex-col gap-1.5", children: [w.aside && _jsx("span", { className: "num text-xs text-muted-foreground", children: w.aside }), w.kind === 'stat' && (_jsxs(_Fragment, { children: [w.value !== undefined && (_jsx("span", { className: "num truncate text-xl leading-7 font-semibold", children: w.value })), w.detail] })), w.kind === 'ring' && _jsx(Ring, { ring: w, size: w.rings.length > 1 ? 64 : 56 }), w.kind === 'bars' && _jsx(Bars, { w: w }), w.kind === 'timeline' && _jsx(Timeline, { w: w }), w.caption && _jsx("span", { className: "text-xs text-muted-foreground", children: w.caption })] }));

package/dist/progress-ring.d.ts

@@ -0,0 +1,7 @@
+import type { meterTone } from '@columenlabs/lumen-ui-types/views';
+/** A number's share of its target as a ring, its percent in the middle (Recharts); a meter's
+ *  tone colours it, else the first chart colour. */
+export declare function ProgressRing({ value, tone, }: {
+    value: number | null;
+    tone: ReturnType<typeof meterTone>;
+}): import("react").JSX.Element;

package/dist/progress-ring.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PolarAngleAxis, RadialBar, RadialBarChart } from 'recharts';
+import { ChartContainer } from './ui/chart.js';
+/** A number's share of its target as a ring, its percent in the middle (Recharts); a meter's
+ *  tone colours it, else the first chart colour. */
+export function ProgressRing({ value, tone, }) {
+    const config = {
+        v: { label: 'Progress', color: tone ? `var(--${tone})` : 'var(--chart-1)' },
+    };
+    return (_jsx(ChartContainer, { config: config, className: "aspect-square size-16 shrink-0", children: _jsxs(RadialBarChart, { data: [{ v: value ?? 0 }], startAngle: 90, endAngle: -270, innerRadius: 24, outerRadius: 32, children: [_jsx(PolarAngleAxis, { type: "number", domain: [0, 100], tick: false }), _jsx(RadialBar, { dataKey: "v", fill: "var(--color-v)", background: { fill: 'var(--muted)' }, cornerRadius: 8, isAnimationActive: false }), _jsx("text", { x: "50%", y: "50%", textAnchor: "middle", dominantBaseline: "middle", className: "num fill-foreground", fontSize: 12, fontWeight: 600, children: value === null ? '—' : `${value.toFixed(0)}%` })] }) }));
+}

package/dist/summary-cards.js

@@ -12,10 +12,10 @@ import { SortableContext, arrayMove, rectSortingStrategy, sortableKeyboardCoordi
 import { CSS } from '@dnd-kit/utilities';
 import { PlusIcon, Trash2Icon, XIcon } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
-import { PolarAngleAxis, RadialBar, RadialBarChart } from 'recharts';
 import { LumenConfirm } from './confirm.js';
 import { IconButton } from './icon-button.js';
 import { KIT } from './kit-config.js';
+import { lazyPart } from './lazy-part.js';
 import { cn } from './lib/utils.js';
 import { LumenTokenizedFilter, filterByTokens, useLumenFilter, } from './lumen-filter.js';
 import { LumenSelector } from './lumen-selector.js';
@@ -23,7 +23,6 @@ import { ViewValueCell } from './lumen-view.js';
 import { Tile } from './tile.js';
 import { Badge } from './ui/badge.js';
 import { Button } from './ui/button.js';
-import { ChartContainer } from './ui/chart.js';
 import { Input } from './ui/input.js';
 import { Label } from './ui/label.js';
 import { Progress } from './ui/progress.js';
@@ -115,20 +114,14 @@ const usageBands = () => ({
     warn: KIT.meterLevels.watch * 100,
     bad: KIT.meterLevels.alert * 100,
 });
+// The ring draws with the charts library, so it loads only when a card shows one.
+const ProgressRing = lazyPart(() => import('./progress-ring.js').then((m) => m.ProgressRing), _jsx(Skeleton, { className: "size-16 shrink-0 rounded-full" }));
 /** A meter's tone on a bar's fill (theme tokens, no glow). */
 const TONE_BAR = {
     success: '[&>[data-slot=progress-indicator]]:bg-success',
     warning: '[&>[data-slot=progress-indicator]]:bg-warning',
     destructive: '[&>[data-slot=progress-indicator]]:bg-destructive',
 };
-/** A number's share of its target as a ring, its percent in the middle (Recharts); a meter's
- *  tone colours it, else the first chart colour. */
-function ProgressRing({ value, tone, }) {
-    const config = {
-        v: { label: 'Progress', color: tone ? `var(--${tone})` : 'var(--chart-1)' },
-    };
-    return (_jsx(ChartContainer, { config: config, className: "aspect-square size-16 shrink-0", children: _jsxs(RadialBarChart, { data: [{ v: value ?? 0 }], startAngle: 90, endAngle: -270, innerRadius: 24, outerRadius: 32, children: [_jsx(PolarAngleAxis, { type: "number", domain: [0, 100], tick: false }), _jsx(RadialBar, { dataKey: "v", fill: "var(--color-v)", background: { fill: 'var(--muted)' }, cornerRadius: 8, isAnimationActive: false }), _jsx("text", { x: "50%", y: "50%", textAnchor: "middle", dominantBaseline: "middle", className: "num fill-foreground", fontSize: 12, fontWeight: 600, children: value === null ? '—' : `${value.toFixed(0)}%` })] }) }));
-}
 /** A Summary's cards over its rows; null when it has none to show. */
 export function SummaryTiles({ domain, tiles, rows, fields, tile, loading, }) {
     const shown = tiles.filter((t) => isOwnTile(t) || tile);

package/dist/widget-values.d.ts

@@ -0,0 +1,20 @@
+/**
+ * How a widget's values read: short and exact numbers, shares, one colour per name and sums by a
+ * field. Shared by the widget frame and its chart bodies, so a lazily loaded body never pulls the
+ * frame back in.
+ */
+import { type ViewFormat } from '@columenlabs/lumen-ui-types/views';
+import { type ViewCellValue, type ViewField } from './view-model.js';
+export declare const MINUS = "\u2212";
+export declare const COMPACT: Intl.NumberFormat;
+/** A chart value in short form: $12.3K, −4.1%, 1.2M; masked while Hide amounts is on. */
+export declare function short(v: number, format: ViewFormat, hidden: boolean): string;
+/** A chart value in full, for tooltips: $491,712.34, −4.1%; masked while Hide amounts is on. */
+export declare function exact(v: number, format: ViewFormat, hidden: boolean): string;
+export declare const pct: (v: number, total: number) => string;
+export declare const colorOf: (name: string, i: number) => string;
+/** `value` summed by `by` over the rows, largest first; rows with no `by` read as —. */
+export declare function sumBy<T>(rows: T[], by: ViewField<T>, value: ViewField<T>, read: (f: ViewField<T>, r: T) => ViewCellValue): {
+    name: string;
+    v: number;
+}[];

package/dist/widget-values.js

@@ -0,0 +1,55 @@
+/**
+ * How a widget's values read: short and exact numbers, shares, one colour per name and sums by a
+ * field. Shared by the widget frame and its chart bodies, so a lazily loaded body never pulls the
+ * frame back in.
+ */
+import { isDollarFormat } from '@columenlabs/lumen-ui-types/views';
+import { maskAmount } from './shell.js';
+import { label } from './view-model.js';
+export const MINUS = '−';
+export 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. */
+export 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. */
+export 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}`;
+}
+export 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})`);
+export 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 —. */
+export 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);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.95",
+  "version": "0.1.96",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -49,7 +49,7 @@
     "@codemirror/lang-javascript": "6.2.5",
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-sql": "6.10.0",
-    "@columenlabs/lumen-ui-types": "0.1.95",
+    "@columenlabs/lumen-ui-types": "0.1.96",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",