@columenlabs/lumen-ui 0.0.0-stage → 0.2.1

package/dist/group-button.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, Grid3x3Icon, ListTreeIcon, TableIcon } from 'lucide-react';
+import { useState } from 'react';
+import { cn } from './lib/utils.js';
+import { LumenSelector } from './lumen-selector.js';
+import { Button } from './ui/button.js';
+import { Label } from './ui/label.js';
+import { Popover, PopoverContent, PopoverTrigger } from './ui/popover.js';
+import { pick, subgroupLabel, subgroupOf, subgroupsOf, } from './view-model.js';
+export const GROUP_NONE = '_none';
+export const GROUP_PIVOT = '_pivot';
+/** A view's grouping for the visit: by a field, as a pivot, and what each row opens. */
+export function useGroup(domain, config) {
+    const groupable = pick(domain.fields.filter((f) => f.groupable), config.group.fields);
+    const [mode, setMode] = useState(config.shape === 'pivot' && config.pivot ? GROUP_PIVOT : (config.group.default ?? GROUP_NONE));
+    const groupField = groupable.find((f) => f.key === mode) ?? null;
+    // What each row opens: the view's pick, else the domain's first.
+    const subgroups = subgroupsOf(domain);
+    const [sub, setSub] = useState(() => subgroupOf(domain, config.subgroup)?.key ?? null);
+    // A saved grouping patched while the view is open (the assistant's card move) applies at once; the
+    // person's own unsaved pick stays while the saved one does not change.
+    const savedGroup = JSON.stringify([
+        config.shape === 'pivot' && !!config.pivot,
+        config.group.default,
+        config.subgroup ?? null,
+    ]);
+    // Taken during render, not in an effect, so a sheet never sees the old pick against the new
+    // saved one and saves it back (Sub-group saved from Edit view looped).
+    const [seenGroup, setSeenGroup] = useState(savedGroup);
+    if (seenGroup !== savedGroup) {
+        setSeenGroup(savedGroup);
+        setMode(config.shape === 'pivot' && config.pivot ? GROUP_PIVOT : (config.group.default ?? GROUP_NONE));
+        setSub(subgroupOf(domain, config.subgroup)?.key ?? null);
+    }
+    const pivot = mode === GROUP_PIVOT && !!config.pivot;
+    const grouping = groupable.length > 0 || !!config.pivot || subgroups.length > 0;
+    const button = grouping ? (_jsx(GroupButton, { groupable: groupable, pivot: !!config.pivot, mode: mode, onMode: setMode, subgroups: subgroups, opensLabel: subgroupLabel(domain), subgroup: sub, onSubgroup: setSub })) : null;
+    // What the person holds now, for a page that saves or shows it as changed (rule C).
+    const held = {
+        group: pivot || mode === GROUP_NONE || mode === GROUP_PIVOT ? null : mode,
+        pivot,
+        subgroup: sub,
+    };
+    const reset = () => {
+        setMode(config.shape === 'pivot' && config.pivot ? GROUP_PIVOT : (config.group.default ?? GROUP_NONE));
+        setSub(subgroupOf(domain, config.subgroup)?.key ?? null);
+    };
+    return { groupField: pivot ? null : groupField, pivot, sub, button, held, reset };
+}
+/**
+ * The Group button: says what is on ("Account › Tax lots") and opens two
+ * pickers, Group rows by (a field, or Pivot) and Each row opens (the domain's sub-groups), each
+ * with None.
+ */
+export function GroupButton({ groupable, pivot, mode, onMode, subgroups, subgroup, onSubgroup, opensLabel = 'Each row opens', }) {
+    const group = mode === GROUP_PIVOT ? 'Pivot' : (groupable.find((f) => f.key === mode)?.label ?? null);
+    const opens = subgroups.find((s) => s.key === subgroup)?.label ?? null;
+    const on = [group, opens].filter(Boolean);
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", className: cn('max-w-40 shrink-0', !on.length && 'text-muted-foreground'), "aria-label": "Group", children: [_jsx(ListTreeIcon, {}), _jsx("span", { className: "truncate", children: on.length ? on.join(' › ') : 'Group' }), _jsx(ChevronDownIcon, { className: "text-muted-foreground" })] }) }), _jsxs(PopoverContent, { align: "end", className: "flex w-60 flex-col gap-3", children: [(groupable.length > 0 || pivot) && (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "group-rows-by", children: "Group rows by" }), _jsx(LumenSelector, { id: "group-rows-by", label: "Group rows by", size: "sm", className: "w-full", options: [
+                                    { value: GROUP_NONE, label: 'None', icon: TableIcon },
+                                    ...groupable.map((f) => ({ value: f.key, label: f.label, icon: f.icon })),
+                                    ...(pivot ? [{ value: GROUP_PIVOT, label: 'Pivot', icon: Grid3x3Icon }] : []),
+                                ], value: mode, onChange: onMode })] })), subgroups.length > 0 && (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "each-row-opens", children: opensLabel }), _jsx(LumenSelector, { id: "each-row-opens", label: opensLabel, size: "sm", className: "w-full", disabled: mode === GROUP_PIVOT, options: [
+                                    { value: GROUP_NONE, label: 'None' },
+                                    ...subgroups.map((s) => ({ value: s.key, label: s.label, icon: s.icon })),
+                                ], value: subgroup ?? GROUP_NONE, onChange: (v) => onSubgroup(v === GROUP_NONE ? null : v) })] }))] })] }));
+}

package/dist/growth-chart.d.ts

@@ -0,0 +1,77 @@
+import { type ReactNode } from 'react';
+/** Ten distinct colours. A variant, an asset or a start keeps one colour on every card and table. */
+export declare const PALETTE: string[];
+export declare const paletteAt: (i: number) => string;
+export declare const benchColour: (i: number) => string;
+/** `log` and `linear` (from 0) for growth of $1; `fit` is linear around the data (Performance). */
+export type Scale = 'log' | 'linear' | 'fit';
+export type Series = {
+    key: string;
+    label: string;
+    color: string;
+    hold: boolean;
+    dashed: boolean;
+    /** Filled under the line (a portfolio's value). */
+    area?: boolean;
+    points: [string, number][];
+};
+export declare const KEY_DATE_KINDS: readonly [{
+    readonly kind: 'fomc';
+    readonly label: 'FOMC';
+    readonly color: 'var(--key-date-fomc)';
+}, {
+    readonly kind: 'cpi';
+    readonly label: 'CPI';
+    readonly color: 'var(--key-date-cpi)';
+}, {
+    readonly kind: 'jobs';
+    readonly label: 'Jobs';
+    readonly color: 'var(--key-date-jobs)';
+}];
+export type KeyDateKind = (typeof KEY_DATE_KINDS)[number]['kind'];
+/** A thin vertical line on the chart; its label shows in the tooltip. */
+export type ChartMarker = {
+    date: string;
+    label: string;
+    color: string;
+    kind?: string;
+};
+export type KeyDateMarker = ChartMarker & {
+    kind: KeyDateKind;
+};
+/**
+ * A dashed, labelled line at `from` with the stretch before it shaded: the in-sample part ahead of
+ * an out-of-sample date, so the blind part reads plain (shade left of OOS). With `onDrag` the line drags along the dates and the
+ * day it lands on is handed back.
+ */
+export type ChartBand = {
+    key: string;
+    from: string;
+    label: string;
+    color: string;
+    onDrag?: (date: string) => void;
+    /** The line's tag as a control (a button that opens a date picker) in place of its label. */
+    tag?: ReactNode;
+};
+/** The markers the chips turn on, from each kind's days. */
+export declare function keyDateMarkers(on: KeyDateKind[], dates: Partial<Record<KeyDateKind, string[]>> | undefined): KeyDateMarker[];
+/** FOMC / CPI / Jobs toggle chips, for a chart card's header. */
+export declare function KeyDateChips({ on, setOn, }: {
+    on: KeyDateKind[];
+    setOn: (on: KeyDateKind[]) => void;
+}): import("react").JSX.Element;
+/**
+ * Growth of $1 (or any values) for a set of lines. `sinceYears` trims to the last N years (the
+ * expand view). `markers` are drawn as thin vertical lines, each on the first charted day at or
+ * after it. `format` labels the axis and tooltip (default `1.23×`); `ytd` marks this year's start.
+ */
+export declare function GrowthChart({ lines, scale, className, sinceYears, markers, format, ytd, bands, }: {
+    lines: Series[];
+    scale: Scale;
+    className: string;
+    sinceYears?: number;
+    markers?: ChartMarker[];
+    format?: (v: number) => string;
+    ytd?: boolean;
+    bands?: ChartBand[];
+}): import("react").JSX.Element;

package/dist/growth-chart.js

@@ -0,0 +1,195 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The growth chart every app shares (moved in from an app): Recharts in
+// shadcn's ChartContainer. An app draws growth of $1 for variants and benchmarks with it;
+// An app's Portfolio ▸ Performance draws a portfolio's value and money in (an area and a dashed
+// line) or its time-weighted growth next to any symbol. Key dates (FOMC, CPI, Jobs) are thin markers,
+// each turned on by its chip (all start off); the app fetches the days and hands them in.
+import { useMemo, useState } from 'react';
+import { Area, CartesianGrid, ComposedChart, Line, ReferenceArea, ReferenceLine, XAxis, YAxis, } from 'recharts';
+import { cn } from './lib/utils.js';
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, } from './ui/chart.js';
+import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group.js';
+/** Ten distinct colours. A variant, an asset or a start keeps one colour on every card and table. */
+export const PALETTE = Array.from({ length: 10 }, (_, i) => `var(--chart-${i + 1})`);
+export const paletteAt = (i) => PALETTE[i % PALETTE.length] ?? '';
+/** Benchmarks take the palette's second half, so they never share a colour with a run's lines. */
+const BENCH_COLOURS = [5, 6, 7, 8, 9].map((i) => PALETTE[i] ?? '');
+export const benchColour = (i) => BENCH_COLOURS[i % BENCH_COLOURS.length] ?? '';
+const YTD_START = '2026-01-01';
+/** Log ticks per decade: 1-2-3-5 up to about 300×, then one a decade so labels never collide. */
+const decadeSteps = (decades) => (decades <= 2.5 ? [1, 2, 3, 5] : [1]);
+/** Log axis ticks covering `lo` to `hi`: from the tick at or under the low to the one at or over the high. */
+function logTicks(lo, hi) {
+    if (!(lo > 0) || !(hi >= lo))
+        return [0.5, 1, 2];
+    const from = Math.floor(Math.log10(lo));
+    const to = Math.ceil(Math.log10(hi));
+    const steps = decadeSteps(Math.log10(hi / lo));
+    const all = [];
+    for (let e = from; e <= to; e++) {
+        // Rounded so 0.1 × 3 reads 0.3, not 0.30000000000000004.
+        for (const m of steps)
+            all.push(Number((m * 10 ** e).toPrecision(6)));
+    }
+    const floor = all.filter((t) => t <= lo).pop() ?? all[0] ?? lo;
+    const ceil = all.find((t) => t >= hi) ?? all[all.length - 1] ?? hi;
+    return all.filter((t) => t >= floor && t <= ceil);
+}
+const MINUS = '−';
+// ── Key dates ──
+export const KEY_DATE_KINDS = [
+    { kind: 'fomc', label: 'FOMC', color: 'var(--key-date-fomc)' },
+    { kind: 'cpi', label: 'CPI', color: 'var(--key-date-cpi)' },
+    { kind: 'jobs', label: 'Jobs', color: 'var(--key-date-jobs)' },
+];
+/** The markers the chips turn on, from each kind's days. */
+export function keyDateMarkers(on, dates) {
+    return KEY_DATE_KINDS.filter((k) => on.includes(k.kind)).flatMap((k) => (dates?.[k.kind] ?? []).map((date) => ({ date, ...k })));
+}
+/** FOMC / CPI / Jobs toggle chips, for a chart card's header. */
+export function KeyDateChips({ on, setOn, }) {
+    return (_jsx(ToggleGroup, { type: "multiple", variant: "outline", size: "sm", value: on, onValueChange: (v) => setOn(v), "aria-label": "Key dates", children: KEY_DATE_KINDS.map((k) => (_jsxs(ToggleGroupItem, { value: k.kind, "aria-label": `${k.label} days`, children: [_jsx("span", { className: "h-3 w-0.5 rounded-full", style: { background: k.color } }), k.label] }, k.kind))) }));
+}
+// ── The chart ──
+/** `1.23×`: growth of $1, the default axis and tooltip. */
+const times = (v) => `${v < 0 ? MINUS : ''}${Math.abs(v).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}×`;
+/** Axis ticks stay short (`0.5×`, `20×`, `10K×`) so they fit the axis. */
+const shortTimes = (v) => `${v < 0 ? MINUS : ''}${Math.abs(v).toLocaleString('en-US', {
+    maximumFractionDigits: 2,
+    ...(Math.abs(v) >= 1000 ? { notation: 'compact' } : {}),
+})}×`;
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+/**
+ * Growth of $1 (or any values) for a set of lines. `sinceYears` trims to the last N years (the
+ * expand view). `markers` are drawn as thin vertical lines, each on the first charted day at or
+ * after it. `format` labels the axis and tooltip (default `1.23×`); `ytd` marks this year's start.
+ */
+export function GrowthChart({ lines, scale, className, sinceYears, markers = [], format = times, ytd = true, bands = [], }) {
+    const config = Object.fromEntries(lines.map((l) => [l.key, { label: l.label, color: l.color }]));
+    const { rows, ticks, xTicks, monthly, dates, ytdStart } = useMemo(() => {
+        let from = '';
+        if (sinceYears) {
+            const end = lines
+                .flatMap((l) => l.points.map((p) => p[0]))
+                .sort()
+                .pop();
+            if (end) {
+                const d = new Date(`${end}T00:00:00Z`);
+                d.setUTCFullYear(d.getUTCFullYear() - sinceYears);
+                from = d.toISOString().slice(0, 10);
+            }
+        }
+        const byDate = new Map();
+        let lo = Number.POSITIVE_INFINITY;
+        let hi = 0;
+        for (const l of lines) {
+            for (const [d, g] of l.points) {
+                if (d < from)
+                    continue;
+                const row = byDate.get(d) ?? { date: d };
+                row[l.key] = g;
+                byDate.set(d, row);
+                lo = Math.min(lo, g);
+                hi = Math.max(hi, g);
+            }
+        }
+        const rows = [...byDate.values()].sort((a, b) => String(a.date).localeCompare(String(b.date)));
+        const ticks = logTicks(lo, hi);
+        const dates = rows.map((r) => String(r.date));
+        // Under about two years the axis marks months (each quarter's past a year), else years.
+        const first = dates[0] ?? '';
+        const last = dates[dates.length - 1] ?? '';
+        const days = first ? (Date.parse(last) - Date.parse(first)) / 86_400_000 : 0;
+        const monthly = days < 400;
+        const step = days < 120 ? 1 : 3;
+        const xTicks = monthly
+            ? dates.filter((d, i, a) => i > 0 &&
+                d.slice(0, 7) !== a[i - 1]?.slice(0, 7) &&
+                (Number(d.slice(5, 7)) - 1) % step === 0)
+            : dates.filter((d, i, a) => d.slice(0, 4) !== a[i - 1]?.slice(0, 4));
+        return {
+            rows,
+            ticks,
+            xTicks,
+            monthly,
+            dates,
+            ytdStart: ytd ? dates.find((d) => d >= YTD_START) : undefined,
+        };
+    }, [lines, sinceYears, ytd]);
+    // A thinned curve skips days, so each marker snaps to the next charted day; days outside it drop.
+    const { snapped, eventsOn } = useMemo(() => {
+        const snapped = [];
+        const eventsOn = new Map();
+        const first = dates[0];
+        if (!first)
+            return { snapped, eventsOn };
+        let i = 0;
+        for (const m of [...markers].sort((a, b) => a.date.localeCompare(b.date))) {
+            if (m.date < first)
+                continue;
+            while (i < dates.length && (dates[i] ?? '') < m.date)
+                i++;
+            const x = dates[i];
+            if (!x)
+                break;
+            snapped.push({ ...m, x });
+            eventsOn.set(x, [...(eventsOn.get(x) ?? []), m.label]);
+        }
+        return { snapped, eventsOn };
+    }, [markers, dates]);
+    // A band's line drags: a press near it picks it up, the move shows where it goes, release hands it back.
+    const [drag, setDrag] = useState(null);
+    const snap = (d) => dates.find((x) => x >= d);
+    const near = (label) => {
+        const i = dates.indexOf(String(label));
+        if (i < 0)
+            return null;
+        const reach = Math.max(2, Math.round(dates.length / 40));
+        return (bands.find((b) => {
+            const at = snap(b.from);
+            return b.onDrag && at !== undefined && Math.abs(dates.indexOf(at) - i) <= reach;
+        }) ?? null);
+    };
+    const label = (s) => s && typeof s === 'object' && 'activeLabel' in s
+        ? s.activeLabel
+        : null;
+    const last = dates[dates.length - 1];
+    return (_jsx(ChartContainer, { config: config, className: cn(className, drag && 'cursor-col-resize select-none'), children: _jsxs(ComposedChart, { data: rows, margin: { left: 0, right: 8 }, onMouseDown: (s) => {
+                const b = near(label(s));
+                if (b)
+                    setDrag({ key: b.key, at: String(label(s)) });
+            }, onMouseMove: (s) => {
+                const at = label(s);
+                if (drag && at)
+                    setDrag({ ...drag, at: String(at) });
+            }, onMouseUp: () => {
+                if (!drag)
+                    return;
+                bands.find((b) => b.key === drag.key)?.onDrag?.(drag.at);
+                setDrag(null);
+            }, onMouseLeave: () => setDrag(null), children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: "date", ticks: xTicks, tickFormatter: (d) => monthly ? (MONTHS[Number(d.slice(5, 7)) - 1] ?? '') : d.slice(0, 4), tickLine: false, axisLine: false }), scale === 'log' ? (_jsx(YAxis, { scale: "log", domain: [ticks[0] ?? 0.5, ticks[ticks.length - 1] ?? 10], ticks: ticks, tickFormatter: format === times ? shortTimes : format, tickLine: false, axisLine: false, width: 40, allowDataOverflow: true })) : (_jsx(YAxis, { domain: scale === 'fit' ? ['auto', 'auto'] : [0, 'auto'], tickFormatter: format, tickLine: false, axisLine: false, width: scale === 'fit' ? 56 : 40 })), _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { indicator: "line", labelFormatter: (label) => {
+                            const events = eventsOn.get(String(label));
+                            return events ? `${label} · ${events.join(', ')}` : label;
+                        }, formatter: (value, name) => (_jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx("span", { className: "h-0.5 w-3 shrink-0 rounded-full", style: { background: `var(--color-${name})` } }), _jsx("span", { className: "flex-1 text-muted-foreground", children: config[name]?.label }), _jsx("span", { className: "num", children: format(Number(value)) })] })) }) }), _jsx(ChartLegend, { content: _jsx(ChartLegendContent, {}) }), ytdStart && (_jsx(ReferenceLine, { x: ytdStart, stroke: "var(--muted-foreground)", strokeDasharray: "3 3", label: { value: '2026 YTD', position: 'insideTopRight', fontSize: 11 } })), bands.map((b) => {
+                    const x = drag?.key === b.key ? drag.at : snap(b.from);
+                    if (!x || !last)
+                        return null;
+                    return [
+                        _jsx(ReferenceArea, { x1: dates[0], x2: x, fill: b.color, fillOpacity: 0.07, ifOverflow: "hidden" }, `${b.key}-area`),
+                        _jsx(ReferenceLine, { x: x, stroke: b.color, strokeWidth: drag?.key === b.key ? 2 : 1.25, strokeDasharray: "4 3", label: b.tag && drag?.key !== b.key
+                                ? (p) => (_jsx(BandTag, { x: p.viewBox?.x ?? 0, y: p.viewBox?.y ?? 0, left: dates.indexOf(x) > dates.length * 0.7, children: b.tag }))
+                                : {
+                                    value: drag?.key === b.key ? `${b.label} ${x}` : b.label,
+                                    // Late in the chart the label sits left of its line, so it stays on the chart.
+                                    position: dates.indexOf(x) > dates.length * 0.7 ? 'insideTopRight' : 'insideTopLeft',
+                                    fontSize: 11,
+                                    fill: b.color,
+                                } }, `${b.key}-line`),
+                    ];
+                }), snapped.map((m) => (_jsx(ReferenceLine, { x: m.x, stroke: m.color, strokeOpacity: 0.45, strokeWidth: 1, ifOverflow: "extendDomain" }, `${m.kind ?? m.label}-${m.date}`))), lines.map((l) => l.area ? (_jsx(Area, { dataKey: l.key, type: "linear", stroke: `var(--color-${l.key})`, fill: `var(--color-${l.key})`, fillOpacity: 0.12, strokeWidth: l.hold ? 1.5 : 2.2, dot: false, connectNulls: true, isAnimationActive: false }, l.key)) : (_jsx(Line, { dataKey: l.key, stroke: `var(--color-${l.key})`, strokeWidth: l.hold ? 1.5 : 2.2, strokeDasharray: l.dashed ? '5 3' : undefined, dot: false, connectNulls: true, isAnimationActive: false }, l.key)))] }) }));
+}
+/** A band's tag beside its line: HTML in the chart, kept out of the line's drag. */
+function BandTag({ x, y, left, children, }) {
+    const w = 168;
+    return (_jsx("foreignObject", { x: left ? x - w - 4 : x + 4, y: y + 2, width: w, height: 28, children: _jsx("div", { className: cn('flex', left && 'justify-end'), onMouseDown: (e) => e.stopPropagation(), onMouseUp: (e) => e.stopPropagation(), children: children }) }));
+}

package/dist/hooks/use-keyboard-fit.d.ts

@@ -0,0 +1,15 @@
+/** The visual viewport while a phone's keyboard covers part of the layout viewport. */
+export interface KeyboardFit {
+    /** Top of what is visible, from the layout viewport's top (iOS pans the page to the focused field). */
+    top: number;
+    /** Height of what is visible above the keyboard. */
+    height: number;
+    /** Layout viewport below the visible part: the keyboard. */
+    below: number;
+}
+/**
+ * Where a fixed modal must sit while the keyboard is open. iOS shrinks the visual viewport but not
+ * the layout viewport fixed elements use, so a modal centred or bottom-anchored there runs under the
+ * keyboard or off the top. Undefined while no keyboard is up.
+ */
+export declare function useKeyboardFit(): KeyboardFit | undefined;

package/dist/hooks/use-keyboard-fit.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+/**
+ * Where a fixed modal must sit while the keyboard is open. iOS shrinks the visual viewport but not
+ * the layout viewport fixed elements use, so a modal centred or bottom-anchored there runs under the
+ * keyboard or off the top. Undefined while no keyboard is up.
+ */
+export function useKeyboardFit() {
+    const [fit, setFit] = React.useState();
+    React.useEffect(() => {
+        const vv = window.visualViewport;
+        if (!vv)
+            return;
+        const update = () => {
+            // clientHeight is the layout viewport; on iOS innerHeight follows the visual one.
+            const layout = document.documentElement.clientHeight;
+            const below = Math.max(0, layout - vv.height - vv.offsetTop);
+            const covered = layout - vv.height > 120;
+            setFit(covered ? { top: vv.offsetTop, height: vv.height, below } : undefined);
+        };
+        update();
+        vv.addEventListener('resize', update);
+        vv.addEventListener('scroll', update);
+        return () => {
+            vv.removeEventListener('resize', update);
+            vv.removeEventListener('scroll', update);
+        };
+    }, []);
+    return fit;
+}

package/dist/hooks/use-mobile.d.ts

@@ -0,0 +1 @@
+export declare function useIsMobile(): boolean;

package/dist/hooks/use-mobile.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+const MOBILE_BREAKPOINT = 768;
+export function useIsMobile() {
+    const [isMobile, setIsMobile] = React.useState(undefined);
+    React.useEffect(() => {
+        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+        const onChange = () => {
+            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        };
+        mql.addEventListener('change', onChange);
+        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        return () => mql.removeEventListener('change', onChange);
+    }, []);
+    return !!isMobile;
+}

package/dist/icon-button.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentProps, ComponentType } from 'react';
+import { Button } from './ui/button.js';
+export type IconButtonProps = Omit<ComponentProps<typeof Button>, 'size' | 'children'> & {
+    /** A lucide icon, or any icon component that takes `className` (a view's own icon). */
+    icon: ComponentType<{
+        className?: string;
+    }>;
+    /** `icon-sm` (headers, toolbars) by default; `icon-xs` in table rows and chips, `icon` in forms. */
+    size?: 'icon-xs' | 'icon-sm' | 'icon' | 'icon-lg';
+    /** The action's name: the tooltip and the accessible name. */
+    label: string;
+    /** Opens this route instead of running `onClick`. */
+    to?: string;
+    /** Opens this outside address in a new tab instead of running `onClick`. */
+    href?: string;
+    /** Spins the icon while the action runs. */
+    busy?: boolean;
+    /** A toggle that is on (pinned, followed): its icon fills in the app colour. */
+    pressed?: boolean;
+};
+export declare function IconButton({ icon: Icon, label, to, href, busy, pressed, variant, size, disabled, className, ...props }: IconButtonProps): import("react").JSX.Element;

package/dist/icon-button.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The shell's one button: icon only, its name in a tooltip and accessible name.
+import { Link } from '@tanstack/react-router';
+import { cn } from './lib/utils.js';
+import { Button } from './ui/button.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.js';
+/**
+ * Every button: icon only, its name in a tooltip and accessible name, never
+ * text. Headers use it as is; rows, toolbars and forms too. Works as the child of a `DialogTrigger`, `PopoverTrigger` or `DropdownMenuTrigger` (`asChild`).
+ */
+/** Layout classes that place the button among its siblings, not style it. */
+const PLACE = /^(?:[a-z0-9-]+:)*-?(?:m[trblxy]?-|self-|order-|shrink|grow|sticky|left-|align-|hidden$|block$)/;
+export function IconButton({ icon: Icon, label, to, href, busy, pressed, variant = 'ghost', size = 'icon-sm', disabled, className, ...props }) {
+    // Disabled, the button sits in a tooltip wrapper: its place in the layout (margins, self, sticky,
+    // visibility) moves to the wrapper so nothing shifts while it is disabled.
+    const place = disabled ? (className ?? '').split(/\s+/).filter((c) => PLACE.test(c)) : [];
+    const own = disabled ? (className ?? '').split(/\s+/).filter((c) => !PLACE.test(c)) : [];
+    const icon = (_jsx(Icon, { className: cn(busy && 'animate-spin', pressed && 'fill-current text-primary') }));
+    const link = !disabled && (to || href);
+    const button = (_jsx(Button, { variant: variant, size: size, "aria-label": label, "aria-pressed": pressed, disabled: disabled, asChild: !!link, className: disabled ? cn(own) : className, ...props, children: !link ? (icon) : to ? (_jsx(Link, { to: to, children: icon })) : (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", children: icon })) }));
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: disabled ? _jsx("span", { className: cn('inline-flex', place), children: button }) : button }), _jsx(TooltipContent, { children: label })] }));
+}

package/dist/icon-picker.d.ts

@@ -0,0 +1,14 @@
+import type { ViewIcon } from '@columenlabs/lumen-ui-types/views';
+import type { NavIcon } from './nav.js';
+export declare function IconPicker({ value, onChange, fallback, label, resetLabel, variant, id, }: {
+    value: ViewIcon | null | undefined;
+    /** null puts the default back. */
+    onChange: (icon: ViewIcon | null) => void;
+    /** What shows with no pick. */
+    fallback: NavIcon;
+    /** The trigger's tooltip. */
+    label: string;
+    resetLabel?: string;
+    variant?: 'ghost' | 'outline';
+    id?: string;
+}): import("react").JSX.Element;

package/dist/icon-picker.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RotateCcwIcon, SearchIcon, ShapesIcon, SmileIcon } from 'lucide-react';
+import { useState } from 'react';
+import { IconButton } from './icon-button.js';
+import { Button } from './ui/button.js';
+import { EmojiPicker, EmojiPickerContent, EmojiPickerSearch } from './ui/emoji-picker.js';
+import { InputGroup, InputGroupAddon, InputGroupInput } from './ui/input-group.js';
+import { Popover, PopoverContent, PopoverTrigger } from './ui/popover.js';
+import { Separator } from './ui/separator.js';
+import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group.js';
+import { VIEW_ICONS, iconOf, lucideIconNames } from './view-icons.js';
+/** Icon matches shown at once; search narrows the rest of lucide's set. */
+const ICON_MATCHES = 120;
+export function IconPicker({ value, onChange, fallback, label, resetLabel = 'Use the default icon', variant, id, }) {
+    const [open, setOpen] = useState(false);
+    const [kind, setKind] = useState('icons');
+    const [q, setQ] = useState('');
+    const Icon = iconOf(value, fallback);
+    const pick = (icon) => {
+        onChange(icon);
+        setOpen(false);
+    };
+    const term = q.trim().toLowerCase().replace(/\s+/g, '-');
+    const quick = Object.keys(VIEW_ICONS);
+    const names = (term
+        ? lucideIconNames.filter((n) => n.includes(term))
+        : [...quick, ...lucideIconNames.filter((n) => !quick.includes(n))]).slice(0, ICON_MATCHES);
+    return (_jsxs(Popover, { open: open, onOpenChange: (o) => {
+            setOpen(o);
+            if (o)
+                setQ('');
+        }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(IconButton, { id: id, icon: Icon, label: label, variant: variant }) }), _jsxs(PopoverContent, { align: "start", collisionPadding: 8, className: "flex w-80 max-w-[calc(100vw-1rem)] flex-col gap-0 p-0", children: [_jsx("div", { className: "p-2", children: _jsxs(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, className: "w-full", "aria-label": "Icons or emoji", value: kind, onValueChange: (v) => v && setKind(v), children: [_jsxs(ToggleGroupItem, { value: "icons", className: "flex-1", children: [_jsx(ShapesIcon, {}), "Icons"] }), _jsxs(ToggleGroupItem, { value: "emoji", className: "flex-1", children: [_jsx(SmileIcon, {}), "Emoji"] })] }) }), _jsx(Separator, {}), kind === 'icons' ? (_jsxs("div", { className: "flex h-80 flex-col", children: [_jsx("div", { className: "border-b p-2", children: _jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { children: _jsx(SearchIcon, {}) }), _jsx(InputGroupInput, { "aria-label": "Search icons", placeholder: `Search ${lucideIconNames.length.toLocaleString()} icons`, value: q, onChange: (e) => setQ(e.target.value) })] }) }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-2", children: names.length ? (_jsx("div", { className: "grid grid-cols-8 gap-1", children: names.map((n) => {
+                                        const I = iconOf(n, fallback);
+                                        return (_jsx(Button, { variant: value === n ? 'secondary' : 'ghost', size: "icon-sm", title: n, "aria-label": `Icon ${n}`, "aria-pressed": value === n, onClick: () => pick(n), children: _jsx(I, {}) }, n));
+                                    }) })) : (_jsx("p", { className: "py-8 text-center text-sm text-muted-foreground", children: "No icon found." })) })] })) : (_jsxs(EmojiPicker, { className: "h-80 w-full", columns: 9, onEmojiSelect: ({ emoji }) => pick(emoji), children: [_jsx(EmojiPickerSearch, { placeholder: "Search emoji" }), _jsx(EmojiPickerContent, {})] })), _jsx(Separator, {}), _jsx(IconButton, { icon: RotateCcwIcon, label: resetLabel, className: "m-1", disabled: !value, onClick: () => pick(null) })] })] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,83 @@
+export { type CustomViewConfig, LumenTable, type LumenTableProps, LumenView, type LumenViewProps, type ViewCellValue, type ViewChipTone, type ViewDomain, type ViewField, type ViewFieldGroup, type ViewSource, CHIP_TONE, RUN_STATE_TONE, FORMULAS_GROUP, ViewValueCell, rollUp, } from './lumen-view.js';
+export { LumenLayout, type LumenLayoutCard, type LumenLayoutProps, type LumenLayoutViewProps, domainKeys, followRows, } from './lumen-layout.js';
+export { LumenViewCard, type LumenViewCardProps } from './lumen-view-card.js';
+export { LumenSelector, LumenSelectorList, type LumenSelectorListHandle, type LumenSelectorProps, type LumenOption, type LumenOptionGroup, SelectorRowContent, } from './lumen-selector.js';
+export { ColorChip, ColorDot, colorIcon } from './color-dot.js';
+export { EditCell, EditInputCell } from './view-edit-cell.js';
+export { type CardOnScreen, cardsOnScreen, kindName, onScreen, pointAtCard, spotlight, } from './spotlight.js';
+export { LinkDot, LinkPicker, type LinkColor, linkVar } from './lumen-links.js';
+export { CardSegments, CardSwitch } from './card-switch.js';
+export { PageInput, PageInputs } from './page-inputs.js';
+export { type LumenTab, LumenTabs } from './lumen-tabs.js';
+export { LumenTabDrawer, TAB_NAME_MAX } from './lumen-tab-drawer.js';
+export { IconPicker } from './icon-picker.js';
+export { LumenEChart, type EChartOption, type ChartTokens, axisStyle, baseOption, useChartTokens, } from './lumen-echart.js';
+export { LumenGeoMap } from './lumen-geo-map.js';
+export { LumenWidget, type CardControls, type CardLink, LumenSavedWidget } from './lumen-widget.js';
+export { LumenConfirm, type LumenConfirmProps } from './confirm.js';
+export { COVERAGE_LEVELS, CoverageCell, type CoverageJobState, type CoverageLevel, CoverageLegend, coverageClass, coverageLabel, coverageLevel, } from './coverage-cells.js';
+export { type CoverageBlock, type CoverageData, type CoverageFact, type CoveragePick, type CoverageRow, type CoverageSummary, LumenCoverageMap, type LumenCoverageMapProps, blockName, blockOf, } from './coverage-map.js';
+export { type CalendarFact, LumenCoverageCalendarMap, type LumenCoverageCalendarMapProps, } from './coverage-calendar-map.js';
+export { DetailsTable, type DetailsTableProps, FactsTable } from './details-table.js';
+export { DrawerSection, type DrawerSectionProps } from './drawer-section.js';
+export { LumenDrawer, type LumenDrawerProps } from './lumen-drawer.js';
+export { LumenCode, type LumenCodeProps, langOfPath } from './lumen-code.js';
+export { LumenCodeEditor, type LumenCodeEditorProps, type LumenCodeLang, } from './lumen-code-editor.js';
+export { RenameField, type RenameFieldProps } from './rename-field.js';
+export { ResetButton, type ResetButtonProps } from './reset-button.js';
+export { type ChartBand, type ChartMarker, GrowthChart, KEY_DATE_KINDS, KeyDateChips, type KeyDateKind, type KeyDateMarker, PALETTE, type Scale, type Series, benchColour, keyDateMarkers, paletteAt, } from './growth-chart.js';
+export { FoldGroup, NavGroup, type NavItem, type SectionItem, type SectionSubItem, SidebarSection, } from './nav.js';
+export { type OverviewPageProps, type OverviewStage, type OverviewTone, type OverviewWidget, OverviewList, OverviewPage, ToneDot, } from './overview.js';
+export { type Crumb, IconButton, type IconButtonProps, Page, PageBody, PageHeader, type PageHeaderProps, } from './page.js';
+export { DEFAULT_PREFS, type Prefs, TIME_ZONES, type Theme, type TimeZoneId, getPrefs, resolvedTheme, setPref, timeZoneLabel, usePrefs, ASSISTANT_WIDTH, } from './prefs.js';
+export { KIT, type KitConfig, configureLumen } from './kit-config.js';
+export { ConnectionBlock, ErrorLine, IntegrationRow, KeyTestLine, type KeyTestResult, TestBadge, errorText, useClock, } from './integrations.js';
+export { LumenPager } from './pager.js';
+export { createDeskQueryClient } from './query-client.js';
+export { refreshHeaders, withRefreshToken } from './refresh.js';
+export { type LumenLoad, LumenError, LumenLazy, LumenLoadFooter, LumenLoadTime, LumenProgress, LumenRefresh, LumenSkeleton, LumenStates, marketTrades, useLumenLoad, useLumenSource, useLiveLoad, } from './lumen-source.js';
+export { LumenBoundary } from './lumen-boundary.js';
+export { LumenPageState } from './lumen-page-state.js';
+export { type FormIssue, goToIssue, SaveButton } from './form-issues.js';
+export { LumenForm, type LumenFormField, lumenFormIssues, type LumenFormValue, type LumenFormValues, } from './lumen-form.js';
+export { RouteError, isStaleBuildError, reloadForNewBuild, reportError, watchNewBuilds, } from './route-error.js';
+export { LumenSettings, SettingRow, SettingsActions, SettingsFooter, type SettingsSectionDef, } from './settings.js';
+export { LumenCard } from './summary-cards.js';
+export { WhatsNew } from './whats-new.js';
+export { type LumenApp, LumenAppSwitcher } from './app-switcher.js';
+export { type BriefActions, type BriefChange, type ScheduleChange, type ScheduleItem, type ScheduleRun, SchedulesSection, } from './schedules.js';
+export { NotificationsSettings } from './notifications.js';
+export { type TasksConfig, TasksButton, TasksProvider, useTasks } from './tasks.js';
+export { type McpServer, McpSettings } from './mcp-settings.js';
+export { lumenToast } from './lumen-toast.js';
+export { LumenShell, type LumenShellProps, type ShellUser, StatusItem, firstName, initials, maskAmount, useAmountsHidden, useApp, useShell, } from './shell.js';
+export { apiJson } from './api-fetch.js';
+export { cn } from './lib/utils.js';
+export { type HealthProbe, StatusHealth } from './status-health.js';
+export { TimeZoneSelect } from './status.js';
+export { type AccountFacts, type JoinReaders, JoinsProvider, SourceStatusItems, YOURS_COLOR, editedCells, editedKey, frameColor, useFrameEdits, useJoins, usedJoinKeys, } from './joins.js';
+export { OriginLegend, originsOf } from './origin-legend.js';
+export { type ConnectedDomain, ConnectOffer, connectionFields, linkGroupId } from './connections.js';
+export { FRESHNESS, type Freshness, FreshnessIcon, FreshnessMark, freshnessLine, freshnessOf, } from './freshness.js';
+export { SourcesLine, useSourceHealth } from './source-health.js';
+export { TILE_WIDTH, Tile, TileChip, type TileOption, TileRow, TileToggleGroup, } from './tile.js';
+export { type FilterField, type FilterToken, LumenTokenizedFilter, type LumenFilterState, useLumenFilter, } from './lumen-filter.js';
+export { useIsMobile } from './hooks/use-mobile.js';
+export { VIEW_ICONS, iconOf, viewIcon } from './view-icons.js';
+export { type AppViewState, useAppView } from './app-views.js';
+export { type ScreenMap, type ScreenOutcome, type ScreenStatus, type WorkspaceOnScreen, type AssistantMove, type AssistantMoveHandlers, type AssistantPage, type AssistantPageType, AssistantScreenProvider, useAssistantMoves, useAssistantPages, useAssistantScreen, useAssistantWorkspace, } from './assistant-screen.js';
+export { type AssistantActions, AssistantContext, type AssistantNote, type AssistantRef, type AssistantSlot, useAssistant, AssistantPendingContext, useAssistantName, useAssistantNote, useAssistantPending, } from './assistant-context.js';
+export { WORKSPACES_KEY, frameKey, workspacesListQuery } from './workspace-keys.js';
+export { type WorkspaceApp, type WorkspaceDraftProps, WorkspacePage, type WorkspacesConfig, WorkspacesProvider, WorkspacesSection, } from './workspaces.js';
+export { CHART_INDICATORS, type ChartIndicator, type IndicatorValues, LINE_COLOR, computeIndicators, formulaIndicator, lineColor, resolveIndicator, runFormula, } from './market/indicators.js';
+export { IndicatorPicker } from './market/indicator-picker.js';
+export { type OptionChainField, type OptionChainRow, OptionChainTable, } from './market/option-chain.js';
+export { MarketProvider, type MarketStatus, useHasMarket, useMarket, useMarketDaily, useMarketFeed, } from './market/live.js';
+export { MarketBadge, MarketLines, MarketTiles, MarketToday, MarketWidget, } from './market/market-widget.js';
+export { CHART_TYPES, type ChartBar, type ChartType, PriceChart, heikinAshi, } from './market/price-chart.js';
+export { LumenChart, type LumenChartOptions, type MineIndicators, SymbolChartProvider, useLumenChart, useSymbolChart, } from './market/lumen-chart.js';
+export { SymbolSheetProvider } from './symbol-sheet.js';
+export { useSymbolSheet } from './symbol-sheet-context.js';
+export { NoteLine, type NoteLineProps } from './note-line.js';
+export { type LumenFinderConfig, type LumenFinderPageType, type LumenFinderRow, type LumenFinderScope, LumenFinderButton, useLumenFinder, useLumenFinderRows, useOpenLumenFinder, } from './lumen-finder.js';
+export { type AssistantChat, LumenAssistantButton, LumenAssistantChats, LumenAssistantPanel, assistantOpen, tabState, useAssistantHotkey, } from './assistant-panel.js';