@columenlabs/lumen-ui 0.0.0-stage → 0.2.0

package/dist/spotlight.js

@@ -0,0 +1,138 @@
+// Hover shows the target, or point at the page. An option that stands for something on screen names
+// it as its `target`: `card:<id>` for a LumenLayout card, or an app path for a sidebar page.
+//
+//   spotlight(target, name)  the page's other cards dim and a name tag sits above the card; a
+//                            sidebar page gets the sidebar's muted fill. No border, no glow.
+//   pointAtCard()            the cards dim, the one under the cursor lights up; a click picks it,
+//                            Esc cancels. Works on any LumenLayout card with no per-page setup.
+//
+// Both drive the DOM directly through data attributes the theme styles: one spotlight at a time.
+import { WIDGET_STYLES } from '@columenlabs/lumen-ui-types/views';
+const CARD = '[data-slot="lumen-card"][data-card]';
+const cardEl = (id) => document.querySelector(`${CARD.slice(0, -1)}="${CSS.escape(id)}"]`);
+const navEl = (path) => [...document.querySelectorAll('[data-sidebar="sidebar"] a[href]')].find((a) => new URL(a.href).pathname.replace(/\/$/, '').endsWith(path.replace(/\/$/, ''))) ?? null;
+export const cardOf = (el) => ({
+    id: el.dataset.card ?? '',
+    title: el.dataset.cardTitle ?? '',
+    kind: el.dataset.cardKind ?? 'table:table',
+});
+/** The cards on the page now, top to bottom. */
+export const cardsOnScreen = () => [...document.querySelectorAll(CARD)].map(cardOf);
+let tag = null;
+let lit = null;
+let scrollTimer;
+function clear() {
+    clearTimeout(scrollTimer);
+    if (lit) {
+        delete lit.dataset.spotlit;
+        lit = null;
+    }
+    delete document.body.dataset.spotlight;
+    tag?.remove();
+    tag = null;
+}
+function light(el, name, nav) {
+    if (lit !== el) {
+        if (lit)
+            delete lit.dataset.spotlit;
+        lit = el;
+        el.dataset.spotlit = '';
+    }
+    if (nav) {
+        document.body.dataset.spotlight = 'nav';
+        tag?.remove();
+        tag = null;
+        return;
+    }
+    document.body.dataset.spotlight = 'card';
+    if (!name)
+        return;
+    tag ??= document.body.appendChild(document.createElement('div'));
+    tag.dataset.slot = 'spotlight-tag';
+    tag.textContent = name;
+    const r = el.getBoundingClientRect();
+    tag.style.left = `${Math.max(8, r.left)}px`;
+    tag.style.top = `${Math.max(8, r.top - 28)}px`;
+}
+/** Where a target is on screen now: a card on the page, a sidebar page, or neither. */
+export function onScreen(target) {
+    if (!target)
+        return null;
+    if (target.startsWith('card:'))
+        return cardEl(target.slice(5)) ? 'card' : null;
+    return navEl(target) ? 'nav' : null;
+}
+/**
+ * Lights one target (`card:<id>` or an app path) and dims the page around it; null clears. The
+ * target scrolls into view only after a short hover.
+ */
+export function spotlight(target, name) {
+    if (!target)
+        return clear();
+    const card = target.startsWith('card:');
+    const el = card ? cardEl(target.slice(5)) : navEl(target);
+    if (!el)
+        return clear();
+    light(el, name, !card);
+    clearTimeout(scrollTimer);
+    scrollTimer = setTimeout(() => {
+        const r = el.getBoundingClientRect();
+        if (r.bottom < 0 || r.top > window.innerHeight)
+            el.scrollIntoView({ block: 'center', behavior: 'smooth' });
+        if (card && name)
+            light(el, name, false);
+    }, 600);
+}
+/**
+ * Point at the page: the cards dim and the one under the cursor (or finger) lights up with its
+ * name; a click picks it, Esc or a click off any card cancels.
+ */
+export function pointAtCard() {
+    clear();
+    document.body.dataset.pointing = '';
+    return new Promise((done) => {
+        const under = (e) => e.target?.closest?.(CARD) ?? null;
+        const move = (e) => {
+            const el = under(e);
+            if (el)
+                light(el, `${el.dataset.cardTitle ?? ''} · ${kindName(cardOf(el).kind)}`, false);
+            else if (lit) {
+                delete lit.dataset.spotlit;
+                lit = null;
+                tag?.remove();
+                tag = null;
+            }
+        };
+        const end = (picked) => {
+            document.removeEventListener('pointermove', move, true);
+            document.removeEventListener('click', click, true);
+            document.removeEventListener('keydown', key, true);
+            delete document.body.dataset.pointing;
+            clear();
+            done(picked);
+        };
+        const click = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            const el = under(e);
+            end(el ? cardOf(el) : null);
+        };
+        const key = (e) => {
+            if (e.key !== 'Escape')
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            end(null);
+        };
+        document.addEventListener('pointermove', move, true);
+        document.addEventListener('click', click, true);
+        document.addEventListener('keydown', key, true);
+    });
+}
+/** A card's style (`kind:style`) as a person says it: a table, a donut, a page's own card. */
+export function kindName(styleId) {
+    if (styleId === 'page' || styleId.startsWith('page:'))
+        return 'card';
+    const [kind = '', style] = styleId.split(':');
+    return (WIDGET_STYLES.find((w) => w.kind === kind && w.style === style)?.name.toLowerCase() ?? kind);
+}

package/dist/status-health.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+export interface HealthProbe {
+    name: string;
+    /** Up when true, down when false, not checked yet when null. */
+    ok: boolean | null;
+    ms?: number | null;
+    /** Why it is down, or anything else worth a line. */
+    note?: string;
+}
+export declare function StatusHealth({ probes, checked, error, }: {
+    probes: HealthProbe[];
+    /** When the services were last checked, as the app words it. */
+    checked?: ReactNode;
+    /** The check itself failed (no answer from the Worker). */
+    error?: string;
+}): import("react").JSX.Element | null;

package/dist/status-health.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Service health in the status bar ("consolidate into a clickable or hoverable
+// pop-up"): one chip with the worst state of every service the app checks, opening a list of each
+// service and its latency, on hover with a mouse and on tap with a finger or keyboard.
+import { useEffect, useRef, useState } from 'react';
+import { cn } from './lib/utils.js';
+import { Popover, PopoverContent, PopoverTrigger } from './ui/popover.js';
+/** How long the list stays after the mouse leaves, so it can travel from chip to list. */
+const HOVER_CLOSE_MS = 150;
+/** Keeps the list off the window's edge on a narrow screen. */
+const COLLISION_PAD = 8;
+const dot = (ok) => cn('size-2 shrink-0 rounded-full', ok === null ? 'bg-muted-foreground/40' : ok ? 'bg-gain' : 'bg-destructive');
+/** The chip's word: every service up, the one that is down, or how many are. */
+function summary(probes) {
+    const down = probes.filter((p) => p.ok === false);
+    if (down.length === 1)
+        return { ok: false, text: `${down[0]?.name} down` };
+    if (down.length)
+        return { ok: false, text: `${down.length} down` };
+    if (probes.some((p) => p.ok === null))
+        return { ok: null, text: 'Checking' };
+    return { ok: true, text: 'All up' };
+}
+export function StatusHealth({ probes, checked, error, }) {
+    const [open, setOpen] = useState(false);
+    const timer = useRef(undefined);
+    useEffect(() => () => clearTimeout(timer.current), []);
+    const hover = (on) => (e) => {
+        if (e.pointerType !== 'mouse')
+            return;
+        clearTimeout(timer.current);
+        if (on)
+            setOpen(true);
+        else
+            timer.current = setTimeout(() => setOpen(false), HOVER_CLOSE_MS);
+    };
+    if (!probes.length && !error)
+        return null;
+    const s = error ? { ok: false, text: 'Check failed' } : summary(probes);
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsxs(PopoverTrigger, { "aria-label": `Services: ${s.text}`, className: "flex h-6 shrink-0 items-center gap-1.5 rounded-md px-1.5 hover:bg-muted hover:text-foreground", onPointerEnter: hover(true), onPointerLeave: hover(false), children: [_jsx("span", { "aria-hidden": true, className: dot(s.ok) }), "Services", _jsx("span", { className: cn('num', s.ok === false ? 'text-destructive' : 'text-foreground/80'), children: s.text })] }), _jsxs(PopoverContent, { side: "top", align: "end", collisionPadding: COLLISION_PAD, className: "w-auto min-w-56 gap-1.5 text-xs", onPointerEnter: hover(true), onPointerLeave: hover(false), onOpenAutoFocus: (e) => e.preventDefault(), children: [_jsx("ul", { "aria-label": "Services", className: "flex flex-col gap-1", children: probes.map((p) => (_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": true, className: dot(p.ok) }), _jsxs("span", { className: "flex-1", children: [p.name, p.note && _jsx("span", { className: "ml-1.5 text-muted-foreground", children: p.note })] }), _jsx("span", { className: cn('num', p.ok === false ? 'text-destructive' : 'text-foreground/80'), children: p.ok === false ? 'down' : p.ms != null ? `${p.ms} ms` : '—' })] }, p.name))) }), error && _jsx("p", { className: "text-destructive", children: error }), checked && (_jsxs("p", { className: "border-t pt-1.5 text-muted-foreground", children: ["Checked ", _jsx("span", { className: "num", children: checked })] }))] })] }));
+}

package/dist/status.d.ts

@@ -0,0 +1,9 @@
+/** Time zone picker: on the right of the status bar, and in Settings. */
+export declare function TimeZoneSelect({ className, }: {
+    className?: string;
+    /** Kept for callers; the list flips upward by itself where there is no room below. */
+    side?: 'top' | 'bottom';
+}): import("react").JSX.Element;
+export declare function StatusTimeZone({ className }: {
+    className?: string;
+}): import("react").JSX.Element;

package/dist/status.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from './lib/utils.js';
+import { LumenSelector } from './lumen-selector.js';
+import { TIME_ZONES, setPref, usePrefs } from './prefs.js';
+/** Time zone picker: on the right of the status bar, and in Settings. */
+export function TimeZoneSelect({ className, }) {
+    const { timeZone } = usePrefs();
+    return (_jsx(LumenSelector, { label: "Time zone", size: "sm", className: className, options: TIME_ZONES.map((z) => ({ value: z.id, label: z.label })), value: timeZone, onChange: (v) => setPref('timeZone', v) }));
+}
+export function StatusTimeZone({ className }) {
+    return (_jsx("span", { className: cn('flex items-center', className), children: _jsx(TimeZoneSelect, { side: "top", className: "h-6 border-0 px-1.5 text-xs shadow-none" }) }));
+}

package/dist/summary-cards.d.ts

@@ -0,0 +1,56 @@
+import { type CardStyle, type MeterKind, type ViewTile } from '@columenlabs/lumen-ui-types/views';
+import { type ReactNode } from 'react';
+import { type FilterField } from './lumen-filter.js';
+import { type ViewDomain } from './view-model.js';
+/**
+ * A LumenCard's number and lines: its frame shows the label, so the body is
+ * the main number and its lines; a domain's own card keeps the app's drawing without its frame.
+ */
+export declare function LumenCard<T>({ domain, tile: t, rows, fields, drawn, loading, style, target, meter, bands, }: {
+    domain: ViewDomain<T>;
+    tile: ViewTile;
+    rows: T[];
+    fields: FilterField<T>[];
+    /** Draws one of the domain's own cards over `rows`. */
+    drawn?: (key: string, rows: T[]) => ReactNode;
+    loading?: boolean;
+    /** Its number, or that number against `target` as a bar or a ring. */
+    style?: CardStyle;
+    target?: number;
+    /** What the share of `target` means, which colours the bar or ring. */
+    meter?: MeterKind;
+    bands?: {
+        warn: number;
+        bad: number;
+    };
+}): import("react").JSX.Element;
+/** A Summary's cards over its rows; null when it has none to show. */
+export declare function SummaryTiles<T>({ domain, tiles, rows, fields, tile, loading, }: {
+    domain: ViewDomain<T>;
+    tiles: ViewTile[];
+    /** The rows the Summary shows: the view's, narrowed by the Summary's own filter. */
+    rows: T[];
+    fields: FilterField<T>[];
+    /** Draws one of the domain's own cards over `rows`. */
+    tile?: (key: string, rows: T[]) => ReactNode;
+    /** While the view's rows load, each card holds its place. */
+    loading?: boolean;
+}): import("react").JSX.Element | null;
+/** What is wrong with each of the cards: a key, a label or a field; null where nothing. */
+export declare function summaryCardIssues(tiles: ViewTile[], fields: string[], domainTiles: string[]): (string | null)[];
+/**
+ * The Summary's cards in Edit widget: a grid to pick and drag, the domain's own cards to add or
+ * remove, and the picked card of the view's own: its main number (label, roll-up, field, rows,
+ * colour by sign) and its secondary lines.
+ */
+export declare function SummaryCardsEditor<T>({ domain, tiles, onChange, rows, fields, problems, one, }: {
+    domain: ViewDomain<T>;
+    tiles: ViewTile[];
+    onChange: (tiles: ViewTile[]) => void;
+    /** One card only (LumenCard): a built-in replaces it and there is no Add card. */
+    one?: boolean;
+    /** The Summary's rows, for the previews. */
+    rows: T[];
+    fields: FilterField<T>[];
+    problems: (string | null)[];
+}): import("react").JSX.Element;

package/dist/summary-cards.js

@@ -0,0 +1,270 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MAX_TILE_LINES, isCountAgg, isOwnTile, meterTone, viewAggs, } from '@columenlabs/lumen-ui-types/views';
+// The Summary widget's cards:
+// each card is one main number and any secondary lines. A domain's own cards (Value, Day P&L) are
+// drawn by the app; a card of the view's own rolls one field or formula column up over the rows
+// the Summary shows, narrowed by its own filter, and its lines are other roll-ups, a percent of a
+// roll-up over all the Summary's rows, or plain text. `SummaryTiles` draws them; `SummaryCardsEditor`
+// is the cards part of the Summary's Edit widget. Everything is worked out here from the rows the
+// view already loaded.
+import { DndContext, KeyboardSensor, PointerSensor, TouchSensor, closestCenter, useSensor, useSensors, } from '@dnd-kit/core';
+import { SortableContext, arrayMove, rectSortingStrategy, sortableKeyboardCoordinates, useSortable, } from '@dnd-kit/sortable';
+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 { cn } from './lib/utils.js';
+import { LumenTokenizedFilter, filterByTokens, useLumenFilter, } from './lumen-filter.js';
+import { LumenSelector } from './lumen-selector.js';
+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';
+import { Skeleton } from './ui/skeleton.js';
+import { Switch } from './ui/switch.js';
+import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group.js';
+import { AGG_LABELS, MAX_TILES, fieldOptions } from './view-formulas.js';
+import { computedOf, rollUp, takesFormulas, } from './view-model.js';
+/** A card's main number and lines over `rows` (the Summary's rows); null when its field is gone. */
+function figuresOf(domain, t, rows, fields) {
+    const computed = computedOf(domain, rows, null);
+    const field = (k) => domain.fields.find((f) => f.key === k);
+    const roll = (f, agg, rs) => rollUp(rs.map((r) => computed.value(f, r)), agg);
+    const f = field(t.field);
+    if (!f)
+        return null;
+    const count = isCountAgg(t.agg);
+    const value = roll(f, t.agg, filterByTokens(rows, fields, t.filter));
+    const main = {
+        kind: 'value',
+        value,
+        format: (count ? 'rounded' : f.format),
+        amount: !count && !!f.amount,
+        suffix: t.suffix || undefined,
+    };
+    const lines = t.lines.flatMap((l) => {
+        if (l.kind === 'text')
+            return [{ kind: 'text', text: l.text }];
+        const lf = field(l.field);
+        if (!lf)
+            return [];
+        if (l.kind === 'pct') {
+            const of = roll(lf, l.agg, rows);
+            const pct = typeof value === 'number' && typeof of === 'number' && of !== 0 ? (value / of) * 100 : null;
+            return [
+                { kind: 'value', value: pct, format: 'weight', amount: false, suffix: `of ${lf.label}` },
+            ];
+        }
+        const c = isCountAgg(l.agg);
+        return [
+            {
+                kind: 'value',
+                value: roll(lf, l.agg, filterByTokens(rows, fields, l.filter)),
+                format: c ? 'rounded' : lf.format,
+                amount: !c && !!lf.amount,
+                suffix: l.suffix || undefined,
+            },
+        ];
+    });
+    return { main, lines };
+}
+function FigureText({ f }) {
+    if (f.kind === 'text')
+        return _jsx(_Fragment, { children: f.text });
+    return (_jsxs(_Fragment, { children: [_jsx(ViewValueCell, { value: f.value, format: f.format, amount: f.amount }), f.suffix ? ` ${f.suffix}` : null] }));
+}
+/** A card of the view's own as the page shows it. */
+function OwnTile({ domain, tile: t, rows, fields, }) {
+    const figs = useMemo(() => figuresOf(domain, t, rows, fields), [domain, t, rows, fields]);
+    if (!figs)
+        return null;
+    const v = figs.main.value;
+    return (_jsx(Tile, { label: t.label, value: _jsx(FigureText, { f: figs.main }), valueClassName: cn(t.sign && typeof v === 'number' && (v > 0 ? 'text-gain' : v < 0 ? 'text-loss' : '')), lines: figs.lines.map((l, i) => (_jsx(FigureText, { f: l }, i))) }));
+}
+/**
+ * A LumenCard's number and lines: its frame shows the label, so the body is
+ * the main number and its lines; a domain's own card keeps the app's drawing without its frame.
+ */
+export function LumenCard({ domain, tile: t, rows, fields, drawn, loading, style = 'number', target, meter, bands, }) {
+    const figs = useMemo(() => (isOwnTile(t) ? figuresOf(domain, t, rows, fields) : null), [domain, t, rows, fields]);
+    if (loading)
+        return _jsx(Skeleton, { className: "h-7 w-24" });
+    if (!isOwnTile(t))
+        return (_jsx("div", { className: "[&>[data-slot=card]]:bg-transparent [&>[data-slot=card]]:px-0 [&>[data-slot=card]]:py-0 [&>[data-slot=card]]:ring-0 [&>[data-slot=card]>span:first-child]:hidden", children: drawn?.(t.key, rows) }));
+    if (!figs)
+        return _jsx("span", { className: "text-xs text-muted-foreground", children: "Its field is gone." });
+    const v = figs.main.value;
+    const share = style !== 'number' && target && typeof v === 'number'
+        ? Math.max(0, Math.min(100, (v / target) * 100))
+        : null;
+    const tone = meterTone(meter, share, bands);
+    const of = target ? (_jsx(ViewValueCell, { value: target, format: figs.main.format, amount: figs.main.amount })) : null;
+    if (style === 'progress_circle')
+        return (_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx(ProgressRing, { value: share, tone: tone }), _jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("span", { className: "num truncate text-xl leading-7 font-semibold", children: _jsx(FigureText, { f: figs.main }) }), _jsx("span", { className: "num truncate text-xs text-muted-foreground", children: of ? _jsxs(_Fragment, { children: ["of ", of] }) : 'Set a target in Edit widget' })] })] }));
+    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("span", { className: cn('num truncate text-2xl leading-8 font-semibold', t.sign && typeof v === 'number' && (v > 0 ? 'text-gain' : v < 0 ? 'text-loss' : '')), children: _jsx(FigureText, { f: figs.main }) }), style === 'progress_bar' && (_jsxs("div", { className: "flex flex-col gap-1 pt-1", children: [_jsx(Progress, { value: share ?? 0, className: cn('h-2', tone && TONE_BAR[tone]), "aria-label": "Progress to target" }), _jsx("span", { className: "num text-xs text-muted-foreground", children: of ? (_jsxs(_Fragment, { children: [share === null ? '—' : `${share.toFixed(0)}%`, " of ", of] })) : ('Set a target in Edit widget') })] })), figs.lines.map((l, i) => (_jsx("span", { className: "num line-clamp-2 text-xs text-muted-foreground", children: _jsx(FigureText, { f: l }) }, i)))] }));
+}
+/** 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);
+    if (!shown.length)
+        return null;
+    const grid = 'grid grid-cols-2 gap-(--shell-section-gap) md:auto-cols-fr md:grid-flow-col';
+    if (loading)
+        return (_jsx("div", { "data-slot": "view-tiles", "aria-busy": "true", className: grid, children: shown.map((t) => (_jsx(Skeleton, { className: "h-[4.5rem] w-full rounded-xl" }, t.key))) }));
+    return (_jsx("div", { "data-slot": "view-tiles", className: cn(grid, '[&>*:last-child:nth-child(odd)]:col-span-2 md:[&>*:last-child:nth-child(odd)]:col-span-1'), children: shown.map((t) => (_jsx("div", { className: "contents", children: isOwnTile(t) ? (_jsx(OwnTile, { domain: domain, tile: t, rows: rows, fields: fields })) : (tile?.(t.key, rows)) }, t.key))) }));
+}
+// ── Edit ───────────────────────────────────────────────────────────────────────────────────────
+const dragOptions = { activationConstraint: { distance: 4 } };
+const isNumber = (f) => f.format !== 'text' && !f.render;
+/** What is wrong with each of the cards: a key, a label or a field; null where nothing. */
+export function summaryCardIssues(tiles, fields, domainTiles) {
+    return tiles.map((t, i) => {
+        if (!isOwnTile(t))
+            return null;
+        if (domainTiles.includes(t.key) || tiles.slice(0, i).some((x) => x.key === t.key))
+            return `Key ${t.key} is taken`;
+        if (!t.label.trim())
+            return 'Give it a label';
+        if (!fields.includes(t.field))
+            return `Pick a field (${t.field || 'none'} is not one)`;
+        const line = t.lines.find((l) => l.kind !== 'text' && !fields.includes(l.field));
+        if (line)
+            return 'Pick a field for each line';
+        return null;
+    });
+}
+function FieldPick({ value, fields, domain, label, onChange, }) {
+    return (_jsx(LumenSelector, { label: label, size: "sm", className: "w-full min-w-0", placeholder: "Pick a field", options: fieldOptions(fields, domain), value: value, onChange: onChange }));
+}
+function AggPick({ value, label, onChange, }) {
+    return (_jsx(LumenSelector, { label: label, size: "sm", className: "w-full min-w-0", options: viewAggs.map((a) => ({ value: a, label: AGG_LABELS[a] })), value: value, onChange: onChange }));
+}
+/** A card in the editor's grid: its label, its value now and where it comes from. */
+function CardChip({ id, selected, onSelect, label, value, how, problem, domId, }) {
+    const s = useSortable({ id });
+    return (_jsxs(Button, { ref: s.setNodeRef, id: domId, variant: "outline", style: { transform: CSS.Transform.toString(s.transform), transition: s.transition }, className: cn('h-auto min-h-16 min-w-0 flex-col items-start justify-start gap-0.5 rounded-lg px-2.5 py-2 text-left font-normal whitespace-normal', selected && 'border-primary ring-3 ring-primary/15', problem && 'border-destructive', s.isDragging && 'z-20 shadow-md'), ...s.attributes, ...s.listeners, "aria-pressed": selected, onClick: onSelect, children: [_jsx("span", { className: "w-full truncate text-xs text-muted-foreground", children: label }), _jsx("span", { className: "num w-full truncate text-sm font-semibold", children: value }), _jsx("span", { className: "w-full truncate text-[0.7rem] text-muted-foreground", children: how })] }));
+}
+/** A card's own rows filter, kept in step with the card. */
+function CardFilter({ rows, fields, tokens, onChange, }) {
+    const filter = useLumenFilter(rows, fields, { initial: tokens });
+    const next = JSON.stringify(filter.tokens);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: reports the box's tokens when they change
+    useEffect(() => {
+        if (next !== JSON.stringify(tokens))
+            onChange(filter.tokens);
+    }, [next]);
+    return (_jsx(LumenTokenizedFilter, { filter: filter, label: "Card filter", placeholder: "All the Summary's rows" }));
+}
+const LINE_KINDS = [
+    { value: 'value', label: 'Number' },
+    { value: 'pct', label: '% of' },
+    { value: 'text', label: 'Text' },
+];
+function LineRow({ line, nums, fields, domain, onChange, onRemove, }) {
+    const first = nums[0]?.key ?? '';
+    const as = (kind) => kind === 'text'
+        ? { kind, text: 'Note' }
+        : kind === 'pct'
+            ? { kind, field: line.kind !== 'text' ? line.field : first, agg: 'sum' }
+            : {
+                kind,
+                field: line.kind !== 'text' ? line.field : first,
+                agg: 'sum',
+                filter: [],
+                suffix: '',
+            };
+    return (_jsxs("div", { className: "flex flex-col gap-1.5 rounded-md border p-2", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(ToggleGroup, { type: "single", size: "sm", variant: "outline", spacing: 0, value: line.kind, onValueChange: (v) => v && onChange(as(v)), "aria-label": "Line kind", children: LINE_KINDS.map((k) => (_jsx(ToggleGroupItem, { value: k.value, className: "px-2 text-xs", children: k.label }, k.value))) }), _jsx(IconButton, { icon: XIcon, label: "Remove line", className: "ml-auto", onClick: onRemove })] }), line.kind === 'text' ? (_jsx(Input, { "aria-label": "Line text", value: line.text, maxLength: 60, onChange: (e) => onChange({ ...line, text: e.target.value }) })) : (_jsxs("div", { className: "grid grid-cols-[repeat(2,minmax(0,1fr))] gap-1.5", children: [_jsx(AggPick, { value: line.agg, label: "Line roll-up", onChange: (agg) => onChange({ ...line, agg }) }), _jsx(FieldPick, { value: line.field, fields: isCountAgg(line.agg) ? fields : nums, domain: domain, label: "Line field", onChange: (field) => onChange({ ...line, field }) }), line.kind === 'value' && (_jsx(Input, { "aria-label": "Words after the number", className: "col-span-2", placeholder: "Words after the number (contracts)", value: line.suffix, maxLength: 30, onChange: (e) => onChange({ ...line, suffix: e.target.value }) }))] }))] }));
+}
+/**
+ * The Summary's cards in Edit widget: a grid to pick and drag, the domain's own cards to add or
+ * remove, and the picked card of the view's own: its main number (label, roll-up, field, rows,
+ * colour by sign) and its secondary lines.
+ */
+export function SummaryCardsEditor({ domain, tiles, onChange, rows, fields, problems, one = false, }) {
+    const sensors = useSensors(useSensor(PointerSensor, dragOptions), useSensor(TouchSensor, { activationConstraint: { delay: 150, tolerance: 6 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+    const builtIns = domain.tiles ?? [];
+    const [current, setCurrent] = useState(tiles.find(isOwnTile)?.key ?? tiles[0]?.key ?? null);
+    const nums = domain.fields.filter(isNumber);
+    const pickable = domain.fields.filter((f) => !f.render);
+    const fieldOf = (k) => domain.fields.find((f) => f.key === k);
+    const i = tiles.findIndex((t) => t.key === current);
+    const picked = tiles[i];
+    const own = picked && isOwnTile(picked) ? picked : undefined;
+    const set = (p) => onChange(tiles.map((t, j) => (j === i && isOwnTile(t) ? { ...t, ...p } : t)));
+    const add = () => {
+        let n = tiles.length + 1;
+        while (tiles.some((t) => t.key === `tile_${n}`) || builtIns.some((w) => w.key === `tile_${n}`))
+            n++;
+        const key = `tile_${n}`;
+        const field = (nums.find((f) => f.amount) ?? nums[0])?.key ?? '';
+        onChange([
+            ...tiles,
+            { key, label: `Card ${n}`, field, agg: 'sum', filter: [], sign: false, lines: [] },
+        ]);
+        setCurrent(key);
+    };
+    const ownCount = tiles.filter(isOwnTile).length;
+    const off = builtIns.filter((w) => !tiles.some((t) => t.key === w.key));
+    const preview = (t) => {
+        if (!isOwnTile(t))
+            return { value: 'Built in', how: 'Built in' };
+        const figs = figuresOf(domain, t, rows, fields);
+        return {
+            value: figs ? _jsx(FigureText, { f: figs.main }) : '—',
+            how: `${AGG_LABELS[t.agg]} of ${fieldOf(t.field)?.label ?? t.field}`,
+        };
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: (e) => {
+                    const keys = tiles.map((t) => t.key);
+                    const from = keys.indexOf(String(e.active.id));
+                    const to = e.over ? keys.indexOf(String(e.over.id)) : -1;
+                    if (from >= 0 && to >= 0 && from !== to)
+                        onChange(arrayMove(tiles, from, to));
+                }, children: _jsx(SortableContext, { items: tiles.map((t) => t.key), strategy: rectSortingStrategy, children: _jsxs("div", { className: "grid grid-cols-3 gap-1.5", "data-testid": "summary-cards", children: [tiles.map((t, j) => {
+                                const p = preview(t);
+                                const label = isOwnTile(t)
+                                    ? t.label
+                                    : (builtIns.find((w) => w.key === t.key)?.label ?? t.key);
+                                return (_jsx(CardChip, { id: t.key, selected: current === t.key, onSelect: () => setCurrent(t.key), label: label, value: p.value, how: p.how, problem: !!problems[j], domId: `summary-card-${j}` }, t.key));
+                            }), takesFormulas(domain) && !(one && tiles.length) && (_jsxs(Button, { variant: "outline", className: "h-auto min-h-16 border-dashed font-normal text-muted-foreground", disabled: ownCount >= MAX_TILES, onClick: add, children: [_jsx(PlusIcon, {}), " Add card"] }))] }) }) }), off.length > 0 && (_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: "Built in:" }), off.map((w) => (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => {
+                            onChange(one ? [{ key: w.key }] : [...tiles, { key: w.key }]);
+                            setCurrent(w.key);
+                        }, children: [_jsx(PlusIcon, {}), " ", w.label] }, w.key)))] })), picked && !own && (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border p-3", children: [_jsx(Badge, { variant: "secondary", className: "font-normal", children: "Built in" }), _jsxs("span", { className: "flex-1 text-sm", children: [builtIns.find((w) => w.key === picked.key)?.label ?? picked.key, " works out its own lines."] }), _jsx(IconButton, { icon: Trash2Icon, label: "Remove card", onClick: () => {
+                            onChange(tiles.filter((_, j) => j !== i));
+                            setCurrent(null);
+                        } })] })), own && (_jsxs("div", { className: "flex min-w-0 flex-col gap-3 rounded-lg border p-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "flex-1 text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Main number" }), _jsx(LumenConfirm, { title: `Remove card ${own.label}?`, description: "It leaves this Summary when you save.", action: "Remove", onConfirm: () => {
+                                    onChange(tiles.filter((_, j) => j !== i));
+                                    setCurrent(null);
+                                }, children: _jsx(IconButton, { icon: Trash2Icon, label: "Remove card", variant: "destructive" }) })] }), _jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)] gap-1.5", children: [_jsx(Label, { htmlFor: "card-label", children: "Label" }), _jsx(Input, { id: "card-label", value: own.label, maxLength: 40, onChange: (e) => set({ label: e.target.value }) })] }), _jsxs("div", { className: "grid grid-cols-[repeat(2,minmax(0,1fr))] gap-1.5", children: [_jsx(AggPick, { value: own.agg, label: "Roll-up", onChange: (agg) => set({ agg }) }), _jsx(FieldPick, { value: own.field, fields: isCountAgg(own.agg) ? pickable : nums, domain: domain, label: "Field", onChange: (field) => set({ field }) }), _jsx(Input, { "aria-label": "Words after the number", className: "col-span-2", placeholder: "Words after the number (places)", value: own.suffix ?? '', maxLength: 30, onChange: (e) => set({ suffix: e.target.value }) })] }), _jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)] gap-1.5", children: [_jsx(Label, { children: "Only rows where" }), _jsx(CardFilter, { rows: rows, fields: fields, tokens: own.filter, onChange: (filter) => set({ filter }) }, own.key)] }), _jsxs(Label, { className: "flex items-center gap-2 font-normal", children: [_jsx(Switch, { checked: own.sign, onCheckedChange: (sign) => set({ sign }) }), "Green or red by sign"] }), _jsx("span", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Secondary lines" }), own.lines.map((l, j) => (_jsx(LineRow
+                    // biome-ignore lint/suspicious/noArrayIndexKey: lines have no key of their own
+                    , { line: l, nums: nums, fields: pickable, domain: domain, onChange: (next) => set({ lines: own.lines.map((x, k) => (k === j ? next : x)) }), onRemove: () => set({ lines: own.lines.filter((_, k) => k !== j) }) }, j))), _jsxs(Button, { variant: "ghost", size: "sm", className: "self-start", disabled: own.lines.length >= MAX_TILE_LINES, onClick: () => set({
+                            lines: [
+                                ...own.lines,
+                                {
+                                    kind: 'pct',
+                                    field: (nums.find((f) => f.amount) ?? nums[0])?.key ?? '',
+                                    agg: 'sum',
+                                },
+                            ],
+                        }), children: [_jsx(PlusIcon, {}), " Add line"] }), _jsx("div", { className: "rounded-lg bg-muted/50 p-2", children: _jsx(OwnTile, { domain: domain, tile: own, rows: rows, fields: fields }) }), problems[i] && (_jsx("p", { role: "alert", className: "text-xs text-destructive", children: problems[i] }))] }))] }));
+}

package/dist/symbol-sheet-context.d.ts

@@ -0,0 +1,4 @@
+/** Opens the Symbol sheet (symbol-sheet.tsx); its own file so the views can read it. */
+export declare const SheetContext: import("react").Context<((symbol: string) => void) | null>;
+/** Opens the Symbol sheet; null where the app mounted none (a symbol then opens its chart). */
+export declare const useSymbolSheet: () => ((symbol: string) => void) | null;

package/dist/symbol-sheet-context.js

@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react';
+/** Opens the Symbol sheet (symbol-sheet.tsx); its own file so the views can read it. */
+export const SheetContext = createContext(null);
+/** Opens the Symbol sheet; null where the app mounted none (a symbol then opens its chart). */
+export const useSymbolSheet = () => useContext(SheetContext);

package/dist/symbol-sheet.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+/**
+ * Mounts the Symbol sheet once for an app. `sections` draws the app's own sections for a symbol
+ * (DrawerSections), under the shell's chart.
+ */
+export declare function SymbolSheetProvider({ sections, children, }: {
+    sections?: (symbol: string) => ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/symbol-sheet.js

@@ -0,0 +1,24 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The Symbol sheet (the assistant drafts step 1): a tap on any symbol in any view opens one sheet
+// about it, the same drawer as a row's details (bottom on phone, right on desktop). The shell draws
+// its header and LumenChart; the app adds its own sections
+// (an app: live price, P/E, estimates, earnings, your holdings by account, its screeners). A
+// app that mounts no sheet keeps opening the chart dialog straight away.
+import { LineChartIcon } from 'lucide-react';
+import { useCallback, useState } from 'react';
+import { DrawerSection } from './drawer-section.js';
+import { LumenDrawer } from './lumen-drawer.js';
+import { LumenChart } from './market/lumen-chart.js';
+import { SheetContext } from './symbol-sheet-context.js';
+/**
+ * Mounts the Symbol sheet once for an app. `sections` draws the app's own sections for a symbol
+ * (DrawerSections), under the shell's chart.
+ */
+export function SymbolSheetProvider({ sections, children, }) {
+    const [symbol, setSymbol] = useState(null);
+    const open = useCallback((s) => setSymbol(s.toUpperCase()), []);
+    return (_jsxs(SheetContext.Provider, { value: open, children: [children, _jsx(LumenDrawer, { open: symbol !== null, title: symbol ?? '', onClose: () => setSymbol(null), children: symbol && _jsx(SymbolSheetBody, { symbol: symbol, sections: sections }, symbol) })] }));
+}
+function SymbolSheetBody({ symbol, sections, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(DrawerSection, { icon: LineChartIcon, title: "Price", defaultOpen: true, children: _jsx(LumenChart, { symbols: [symbol], window: "1Y", type: "line", indicators: [] }) }), sections?.(symbol)] }));
+}

package/dist/tasks.d.ts

@@ -0,0 +1,29 @@
+import type { Task, TaskList } from '@columenlabs/lumen-ui-types/tasks';
+import { type ReactNode } from 'react';
+export interface TasksConfig {
+    /** The app's Tasks API base, e.g. `/api/tasks`. */
+    api: string;
+    /** Each app's short name by its id, for a product whose tasks come from several apps: each row
+     *  then names its app. Left out, rows name none. */
+    apps?: Record<string, string>;
+}
+interface TasksState {
+    list: TaskList | null;
+    refresh: () => Promise<void>;
+    cancel: (id: string) => Promise<void>;
+    seen: () => Promise<void>;
+    /** Deletes one ended task, or every ended one; open tasks stay. */
+    clear: (id?: string) => Promise<void>;
+    open: (t: Task) => void;
+    /** `TasksConfig.apps`. */
+    apps?: Record<string, string>;
+}
+/** The Tasks list, or null where the app has none; `refresh()` after starting one shows it at once. */
+export declare function useTasks(): TasksState | null;
+export declare function TasksProvider({ config, children }: {
+    config?: TasksConfig;
+    children: ReactNode;
+}): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
+/** The header button: a ring while anything runs, the count, a gold dot for ended unseen tasks. */
+export declare function TasksButton(): import("react").JSX.Element | null;
+export {};