@columenlabs/lumen-ui 0.0.0-stage → 0.2.1

package/dist/market/lumen-chart.js

@@ -0,0 +1,645 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MARKET_SYMBOLS, isDailyMarketKey, marketWindows, } from '@columenlabs/lumen-ui-types/market';
+import { queryOptions, useQueries, useQuery, useQueryClient } from '@tanstack/react-query';
+import { XIcon } from 'lucide-react';
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import { useInView } from 'react-intersection-observer';
+import { useAssistantMoves } from '../assistant-screen.js';
+import { IconButton } from '../icon-button.js';
+import { cn } from '../lib/utils.js';
+import { useLumenLoad } from '../lumen-source.js';
+import { usePrefs } from '../prefs.js';
+import { refreshHeaders } from '../refresh.js';
+import { Badge } from '../ui/badge.js';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/dialog.js';
+import { Input } from '../ui/input.js';
+import { Skeleton } from '../ui/skeleton.js';
+import { ToggleGroup, ToggleGroupItem } from '../ui/toggle-group.js';
+import { CompareChart } from './compare-chart.js';
+import { ALL_SHOWN, IndicatorPicker } from './indicator-picker.js';
+import { CHART_INDICATORS, computeIndicators, formulaIndicator, lineColor, resolveIndicator, } from './indicators.js';
+import { extendedOf, todayOf, useMarket } from './live.js';
+import { PriceChart, indexSpan, secOf } from './price-chart.js';
+const ChartContext = createContext(null);
+const BarsContext = createContext(null);
+const IndicatorsContext = createContext(null);
+const MineContext = createContext({ list: [] });
+/** The person's saved formulas from `url` (`GET` lists, `POST` saves, `DELETE /:id`). */
+function useMineIndicators(url) {
+    const client = useQueryClient();
+    const q = useQuery({
+        queryKey: ['chart-indicators', url],
+        enabled: !!url,
+        queryFn: async ({ signal }) => {
+            const r = await fetch(url, { credentials: 'same-origin', signal });
+            if (!r.ok)
+                throw new Error(`saved indicators answered ${r.status}`);
+            return (await r.json()).indicators;
+        },
+    });
+    const list = useMemo(() => (q.data ?? []).flatMap((m) => {
+        try {
+            return [formulaIndicator(m, m.id)];
+        }
+        catch {
+            return [];
+        }
+    }), [q.data]);
+    const send = useCallback(async (path, init) => {
+        const r = await fetch(`${url}${path}`, {
+            credentials: 'same-origin',
+            headers: { 'content-type': 'application/json' },
+            ...init,
+        });
+        if (!r.ok) {
+            const e = (await r.json().catch(() => null));
+            throw new Error(e?.error ?? `saved indicators answered ${r.status}`);
+        }
+        await client.invalidateQueries({ queryKey: ['chart-indicators', url] });
+    }, [url, client]);
+    return useMemo(() => url
+        ? {
+            list,
+            save: (f) => send('', { method: 'POST', body: JSON.stringify(f) }),
+            remove: (id) => send(`/${encodeURIComponent(id.replace(/^mine:/, ''))}`, { method: 'DELETE' }),
+        }
+        : { list }, [url, list, send]);
+}
+/** Opens the chart dialog; null where no app mounted the dialog. */
+export const useSymbolChart = () => useContext(ChartContext);
+/** The app's history route (`bars`) the chart reads; null where no app mounted the dialog. */
+export const useBarsUrl = () => useContext(BarsContext);
+/** Symbols one chart compares at most. */
+export const MAX_COMPARE = 8;
+/** Each compared symbol's colour, by its place in the list. */
+const SYMBOL_COLORS = [
+    'var(--chart-1)',
+    'var(--chart-3)',
+    'var(--chart-6)',
+    'var(--chart-5)',
+    'var(--chart-2)',
+    'var(--chart-4)',
+    'var(--chart-9)',
+    'var(--chart-8)',
+];
+/** A compared symbol's colour. */
+const colorIn = (symbols, s) => SYMBOL_COLORS[symbols.indexOf(s)] ?? 'var(--primary)';
+const SYMBOL_RE = /^[A-Za-z0-9.^$=:/-]{1,24}$/;
+const tidy = (list) => [...new Set(list.map((s) => s.trim().toUpperCase()).filter((s) => SYMBOL_RE.test(s)))].slice(0, MAX_COMPARE);
+/**
+ * Mounts LumenChart once for an app, and its dialog: `bars` is the app's history route,
+ * `indicators` its sourced indicator route (P/E, IV, EPS estimate); left out, those indicators are
+ * not offered. `mine` is the route of the person's saved formulas; left out, there is no Mine.
+ */
+export function SymbolChartProvider({ bars, indicators, mine, children, }) {
+    const [open, setOpen] = useState(null);
+    const show = useCallback((s, i) => {
+        const list = tidy([s].flat());
+        setOpen(list.length ? { symbols: list, indicators: i?.length ? i : undefined } : null);
+    }, []);
+    const saved = useMineIndicators(mine);
+    // The assistant opens a chart the same way, one symbol or a list, with any indicators it names (built-ins
+    // with any window, saved ones, or formulas); Undo puts back what was open.
+    useAssistantMoves('chart', {
+        chart: show,
+        snapshot: () => open,
+        restore: (s) => setOpen(s ?? null),
+    });
+    const symbols = open?.symbols ?? null;
+    return (_jsx(ChartContext.Provider, { value: show, children: _jsx(BarsContext.Provider, { value: bars, children: _jsx(IndicatorsContext.Provider, { value: indicators ?? null, children: _jsxs(MineContext.Provider, { value: saved, children: [children, _jsx(Dialog, { open: symbols !== null, onOpenChange: (o) => !o && setOpen(null), children: _jsx(DialogContent, { showCloseButton: false, className: "flex max-h-svh flex-col gap-3 overflow-y-auto max-sm:h-svh max-sm:max-w-full max-sm:rounded-none sm:max-w-5xl", children: open && (_jsx(LumenChart
+                                // A new list from outside (the assistant, a view) starts the chart over.
+                                , { symbols: open.symbols, indicators: open.indicators, variant: "dialog", onClose: () => setOpen(null) }, `${open.symbols.join(',')}|${JSON.stringify(open.indicators ?? null)}`)) }) })] }) }) }) }));
+}
+const DEFAULT_PICKS = [
+    { id: 'sma_20', for: ALL_SHOWN },
+    { id: 'rsi_14', for: ALL_SHOWN },
+];
+/** Windows read at their own finer bars; every other window is a span of the daily history. */
+const INTRADAY = ['1D', '5D', '1M'];
+const DAY = 86_400;
+const ALL_TIME = { from: Number.NEGATIVE_INFINITY, to: Number.POSITIVE_INFINITY };
+/** The span a daily window shows, from today back; the chart snaps it to the bars it has. */
+function spanOf(w) {
+    if (w === 'YTD')
+        return { ...ALL_TIME, from: Date.UTC(new Date().getUTCFullYear(), 0, 1) / 1000 };
+    const days = { '1M': 31, '6M': 183, '1Y': 366, '5Y': 5 * 366 }[w];
+    return days ? { ...ALL_TIME, from: Date.now() / 1000 - days * DAY } : ALL_TIME;
+}
+const TYPES = [
+    { id: 'candles', label: 'Candles' },
+    { id: 'line', label: 'Line' },
+];
+const MODES = [
+    { id: 'pct', label: '%' },
+    { id: 'price', label: 'Price' },
+];
+export const toChart = (b) => ({
+    time: b.t,
+    open: b.o,
+    high: b.h,
+    low: b.l,
+    close: b.c,
+});
+/** Daily bars sit at UTC midnight; the chart reads them as days. */
+export const toDaily = (b) => ({
+    ...toChart(b),
+    time: new Date(b.t * 1000).toISOString().slice(0, 10),
+});
+// One ChartBar array per source, so a re-render hands the chart the same bars and does not
+// rebuild it. New arrays on every render rebuilt it in a loop, which flashed.
+const chartBars = new WeakMap();
+const once = (src, make) => {
+    let bars = chartBars.get(src);
+    if (!bars) {
+        bars = make();
+        chartBars.set(src, bars);
+    }
+    return bars;
+};
+const NO_BARS = [];
+// History ends at the last nightly load; every other window ends on the live feed too, so its
+// last price is the header's and the Symbol sheet's (one live source).
+const tails = new WeakMap();
+function liveTail(bars, today, date) {
+    if (!today?.bars.length || !bars.length || !date)
+        return bars;
+    let byToday = tails.get(bars);
+    if (!byToday) {
+        byToday = new WeakMap();
+        tails.set(bars, byToday);
+    }
+    const hit = byToday.get(today);
+    if (hit)
+        return hit;
+    const after = (extendedOf(today)?.bars ?? []).filter((x) => x.t > (today.bars.at(-1)?.t ?? 0));
+    const all = [...today.bars, ...after];
+    let out;
+    if (typeof bars[0]?.time === 'string') {
+        // Daily: today's bar from the session (and the trades since), replacing a stored one.
+        const day = {
+            time: date,
+            open: today.bars[0]?.o ?? 0,
+            high: Math.max(...all.map((b) => b.h)),
+            low: Math.min(...all.map((b) => b.l)),
+            close: all.at(-1)?.c ?? 0,
+        };
+        const last = bars.at(-1)?.time;
+        out = last > date ? bars : [...(last === date ? bars.slice(0, -1) : bars), day];
+    }
+    else {
+        const end = secOf(bars.at(-1)?.time ?? 0);
+        out = [...bars, ...all.filter((b) => b.t > end).map(toChart)];
+    }
+    byToday.set(today, out);
+    return out;
+}
+const NO_VALUES = {};
+const barsOf = (d) => d ? once(d, () => d.bars.map(d.resolution === '1d' ? toDaily : toChart)) : NO_BARS;
+const NONE = { data: null, error: null };
+const barsQuery = (url, w) => queryOptions({
+    queryKey: ['lumen-chart', url, w.symbol, w.window, w.warm],
+    queryFn: async ({ signal }) => {
+        const r = await fetch(`${url}?symbol=${encodeURIComponent(w.symbol)}&window=${w.window}${w.warm ? '&warmup=1' : ''}`, { credentials: 'same-origin', headers: refreshHeaders(), signal });
+        if (!r.ok)
+            throw new Error(`history answered ${r.status}`);
+        return (await r.json());
+    },
+    staleTime: 5 * 60_000,
+});
+/**
+ * History reads per symbol, window and whether they carry warm-up bars. A read with warm-up not
+ * back yet shows the same read without, so adding an indicator keeps the chart up while its bars
+ * load.
+ */
+function useReads(url, wants, enabled) {
+    const client = useQueryClient();
+    const queries = useQueries({
+        queries: wants.map((w) => ({
+            ...barsQuery(url ?? '', w),
+            enabled: enabled && !!url,
+            placeholderData: w.warm
+                ? () => client.getQueryData(barsQuery(url ?? '', { ...w, warm: false }).queryKey)
+                : undefined,
+        })),
+    });
+    const keyOf = (w) => `${w.symbol}|${w.window}|${w.warm ? 1 : 0}`;
+    const byKey = new Map(wants.map((w, i) => [keyOf(w), queries[i]]));
+    const read = (w) => {
+        const q = byKey.get(keyOf(w));
+        if (!q)
+            return NONE;
+        return { data: q.data ?? null, error: q.data ? null : (q.error?.message ?? null) };
+    };
+    return { read, queries };
+}
+/** Sourced lines (P/E, IV, EPS estimate) per symbol and indicator, each read once on add. */
+function useSourced(url, wants) {
+    const [store, setStore] = useState({});
+    const asked = useRef(new Set());
+    const want = wants.map((w) => `${w.symbol}|${w.id}`).join(';');
+    // biome-ignore lint/correctness/useExhaustiveDependencies: `want` names every read in `wants`
+    useEffect(() => {
+        if (!url)
+            return;
+        const bySymbol = new Map();
+        for (const w of wants) {
+            const k = `${w.symbol}|${w.id}`;
+            if (asked.current.has(k))
+                continue;
+            asked.current.add(k);
+            bySymbol.set(w.symbol, [...(bySymbol.get(w.symbol) ?? []), w.id]);
+        }
+        for (const [symbol, ids] of bySymbol) {
+            setStore((s) => ({
+                ...s,
+                ...Object.fromEntries(ids.map((id) => [`${symbol}|${id}`, 'loading'])),
+            }));
+            fetch(`${url}?symbol=${encodeURIComponent(symbol)}&names=${ids.join(',')}`, {
+                credentials: 'same-origin',
+            })
+                .then(async (r) => {
+                if (!r.ok)
+                    throw new Error(String(r.status));
+                const d = (await r.json());
+                setStore((s) => ({
+                    ...s,
+                    ...Object.fromEntries(ids.map((id) => [
+                        `${symbol}|${id}`,
+                        new Map((d.lines[id] ?? []).map(([t, v]) => [
+                            new Date(t * 1000).toISOString().slice(0, 10),
+                            v,
+                        ])),
+                    ])),
+                }));
+            })
+                .catch(() => {
+                for (const id of ids)
+                    asked.current.delete(`${symbol}|${id}`);
+                setStore((s) => ({
+                    ...s,
+                    ...Object.fromEntries(ids.map((id) => [`${symbol}|${id}`, 'failed'])),
+                }));
+            });
+        }
+    }, [url, want]);
+    return store;
+}
+/** LumenChart as one symbol, or up to 8 compared, inside a card, a sheet or the chart dialog. */
+export function LumenChart(props) {
+    const chart = useLumenChart(props);
+    return (_jsx("div", { ref: chart.ref, className: "flex flex-col gap-3", children: chart.element }));
+}
+/**
+ * LumenChart's state and body, for a card that shows its source: `load` (its ↻ and load time),
+ * `rows` (bars drawn), `ref` (for `lazy`) and `element`. `noDesk`: the app mounted no
+ * SymbolChartProvider, so there is nothing to read.
+ */
+export function useLumenChart({ symbols: initial, window: start, type: startType, indicators, variant = 'card', lazy = false, onClose, windows: showWindows = true, }) {
+    const barsUrl = useBarsUrl();
+    const indicatorsUrl = useContext(IndicatorsContext);
+    const mine = useContext(MineContext);
+    const { ref, inView: seen } = useInView({ triggerOnce: true, rootMargin: '200px', skip: !lazy });
+    const enabled = !lazy || seen;
+    const dialog = variant === 'dialog';
+    const { timeZone } = usePrefs();
+    const [symbols, setSymbols] = useState(() => tidy(initial));
+    const compare = symbols.length > 1;
+    // Breadth and macro series are daily: no intraday windows, and nothing live. One of them in a
+    // compare makes the whole chart daily (one time axis).
+    const daily = symbols.some(isDailyMarketKey);
+    const windows = daily ? marketWindows.filter((w) => w !== '1D' && w !== '5D') : marketWindows;
+    // What the chart reads and shows: a window button, or the span the timeline asked for outside an
+    // intraday window's bars. `pressed` is the button lit; panning or zooming clears it.
+    const [view, setView] = useState({
+        window: start ?? (daily ? '6M' : initial.length > 1 ? '1Y' : '1D'),
+    });
+    const [pressed, setPressed] = useState(view.window);
+    const [shown, setShown] = useState(null);
+    const window = view.window === '1D' || view.window === '5D' ? (daily ? '6M' : view.window) : view.window;
+    // Null until someone picks: candles, or a line where every bar is flat (a fund priced by NAV).
+    const [picked, setType] = useState(daily ? 'line' : (startType ?? null));
+    const [mode, setMode] = useState('pct');
+    // Indicators that are not in the catalog or Mine: built-ins with their own window and formulas.
+    const [made, setMade] = useState(() => (indicators ?? []).flatMap((spec) => {
+        const i = typeof spec === 'string' ? null : resolveIndicator(spec);
+        return i ? [i] : [];
+    }));
+    const [picks, setPicks] = useState(() => indicators
+        ? indicators.map((spec) => ({
+            id: typeof spec === 'string' ? spec : (resolveIndicator(spec)?.id ?? ''),
+            for: ALL_SHOWN,
+        }))
+        : initial.length > 1
+            ? []
+            : DEFAULT_PICKS);
+    const [target, setTarget] = useState(ALL_SHOWN);
+    const live = useMarket(daily ? [] : symbols);
+    const idsFor = useCallback((s) => new Set(picks.filter((p) => p.for === ALL_SHOWN || p.for === s).map((p) => p.id)), [picks]);
+    // What an id draws: the catalog, a saved formula, one made here, or a built-in with its window.
+    const resolve = useCallback((id) => made.find((i) => i.id === id) ?? resolveIndicator(id, mine.list), [made, mine.list]);
+    // The same array per symbol until the picks change, so the chart is not rebuilt each render.
+    const chosenFor = useMemo(() => {
+        const bySymbol = new Map();
+        return (s) => {
+            let got = bySymbol.get(s);
+            if (!got) {
+                got = [...idsFor(s)].flatMap((id) => {
+                    const i = resolve(id);
+                    return i ? [i] : [];
+                });
+                bySymbol.set(s, got);
+            }
+            return got;
+        };
+    }, [idsFor, resolve]);
+    const computedFor = (s) => chosenFor(s).some((i) => i.computed);
+    // Every symbol's whole history, read once: the timeline under the chart,
+    // and, when it is daily, the bars of every daily window, which the buttons, panning and zooming
+    // move through. The delayed source answers Max in months: then each window reads its own days.
+    const { read: reads, queries: fullQueries } = useReads(barsUrl, symbols.map((symbol) => ({ symbol, window: 'Max', warm: false })), enabled);
+    const coarse = (bars) => {
+        const gaps = bars.slice(1).map((b, i) => secOf(b.time) - secOf(bars[i]?.time ?? 0));
+        return (gaps.sort((x, y) => x - y)[gaps.length >> 1] ?? 0) > 5 * DAY;
+    };
+    const plan = symbols.map((symbol) => {
+        const full = reads({ symbol, window: 'Max', warm: false });
+        const timeline = barsOf(full.data);
+        const own = window !== null &&
+            ((!daily && INTRADAY.includes(window)) || (coarse(timeline) && window !== 'Max'));
+        const today = live.series[symbol];
+        const useLive = window === '1D' && !!today?.bars.length;
+        const warm = computedFor(symbol);
+        return { symbol, full, timeline, own, useLive, warm, today };
+    });
+    const { read: partReads, queries: partQueries } = useReads(barsUrl, plan
+        .filter((p) => p.own && !(p.useLive && !p.warm) && window !== null)
+        .map((p) => ({ symbol: p.symbol, window: window, warm: p.warm })), enabled);
+    const load = useLumenLoad(...fullQueries, ...partQueries);
+    const sourced = useSourced(indicatorsUrl, symbols.flatMap((symbol) => chosenFor(symbol)
+        .filter((i) => i.sourced && !isDailyMarketKey(symbol))
+        .map((i) => ({ symbol, id: i.id }))));
+    const series = plan.map((p) => {
+        const part = p.own && window !== null ? partReads({ symbol: p.symbol, window, warm: p.warm }) : NONE;
+        const read = p.own ? part : p.full;
+        // 1D is the session's bars, then the trades since its close (pre-market, after hours,
+        // overnight), all from the one live feed, so the chart ends where the header's price is.
+        const bars = p.useLive
+            ? p.today
+                ? once(p.today, () => {
+                    const s = p.today;
+                    const after = (extendedOf(s)?.bars ?? []).filter((x) => x.t > (s.bars.at(-1)?.t ?? 0));
+                    return [...s.bars, ...after].map(toChart);
+                })
+                : NO_BARS
+            : liveTail(p.own ? barsOf(part.data) : p.timeline, p.today, live.session?.date);
+        return {
+            symbol: p.symbol,
+            bars,
+            timeline: p.timeline,
+            values: {},
+            read,
+            live: p.useLive,
+            own: p.own,
+        };
+    });
+    // Indicator lines, worked out over warm-up + window so long lines (SMA 200) start on the first
+    // bar, then the sourced lines of daily bars.
+    const valueKey = series
+        .map((s) => `${s.symbol}:${s.bars.length}:${s.bars.at(-1)?.close}:${s.read.data?.warmup?.length}`)
+        .join('|');
+    const sourcedKey = Object.entries(sourced)
+        .map(([k, v]) => `${k}:${typeof v === 'string' ? v : v.size}`)
+        .join('|');
+    // biome-ignore lint/correctness/useExhaustiveDependencies: keyed by what the lines read
+    const values = useMemo(() => {
+        const out = {};
+        for (const s of series) {
+            const d = s.read.data;
+            let warm = [];
+            if (s.live) {
+                const first = s.bars[0]?.time ?? Number.POSITIVE_INFINITY;
+                if (d?.resolution === '1m')
+                    warm = [...(d.warmup ?? []), ...d.bars]
+                        .filter((b) => b.t < first)
+                        .slice(-250)
+                        .map(toChart);
+            }
+            else if (d && s.own)
+                warm = (d.warmup ?? []).map(d.resolution === '1d' ? toDaily : toChart);
+            const chosen = chosenFor(s.symbol).filter((i) => i.computed && (!i.daily || typeof s.bars[0]?.time === 'string'));
+            const v = computeIndicators([...warm, ...s.bars], chosen);
+            if (typeof s.bars[0]?.time === 'string')
+                for (const i of chosenFor(s.symbol).filter((x) => x.sourced)) {
+                    const got = sourced[`${s.symbol}|${i.id}`];
+                    if (got instanceof Map)
+                        v[i.id] = got;
+                }
+            out[s.symbol] = v;
+        }
+        return out;
+    }, [valueKey, sourcedKey, chosenFor]);
+    // Which indicators the current window can draw, and why not.
+    const dailyBars = !(window && INTRADAY.includes(window)) || daily;
+    const reasons = useMemo(() => {
+        const m = new Map();
+        for (const i of CHART_INDICATORS) {
+            if (i.sourced) {
+                if (!indicatorsUrl)
+                    m.set(i.id, 'not on this desk');
+                else if (!dailyBars)
+                    m.set(i.id, 'daily windows');
+                else if (symbols.every(isDailyMarketKey))
+                    m.set(i.id, 'stocks and ETFs');
+            }
+            else if (!i.computed)
+                m.set(i.id, 'needs volume');
+            else if (i.daily && !dailyBars)
+                m.set(i.id, 'daily windows');
+        }
+        return m;
+    }, [indicatorsUrl, dailyBars, symbols]);
+    const available = useMemo(() => new Set(CHART_INDICATORS.filter((i) => !reasons.has(i.id)).map((i) => i.id)), [reasons]);
+    const pickTarget = compare ? target : ALL_SHOWN;
+    const selected = picks.filter((p) => p.for === pickTarget).map((p) => p.id);
+    const toggle = (id) => setPicks(selected.includes(id)
+        ? picks.filter((p) => !(p.id === id && p.for === pickTarget))
+        : [...picks, { id, for: pickTarget }]);
+    // A built-in with its own window or a formula from the picker: added, and kept to resolve.
+    const add = (i) => {
+        if (!resolve(i.id))
+            setMade([...made, i]);
+        if (!selected.includes(i.id))
+            setPicks([...picks, { id: i.id, for: pickTarget }]);
+    };
+    const range = useMemo(() => view.span ?? (window && INTRADAY.includes(window) && !daily ? ALL_TIME : spanOf(window)), [view, window, daily]);
+    const pick = (w) => {
+        setView({ window: w });
+        setPressed(w);
+    };
+    const addSymbol = (raw) => {
+        const next = tidy([...symbols, ...raw.split(/[\s,]+/)]);
+        if (next.length !== symbols.length)
+            setSymbols(next);
+    };
+    const removeSymbol = (s) => {
+        setSymbols(symbols.filter((x) => x !== s));
+        setPicks(picks.filter((p) => p.for !== s));
+        if (target === s)
+            setTarget(ALL_SHOWN);
+    };
+    const windowButtons = (_jsx(ToggleGroup, { type: "single", size: "sm", variant: "outline", spacing: 0, value: pressed ?? '', onValueChange: (v) => v && pick(v), "aria-label": "Window", className: "flex-wrap", children: windows.map((w) => (_jsx(ToggleGroupItem, { value: w, className: "px-2.5", 
+            // A lit button pressed again goes back to its window after panning.
+            onClick: () => w === pressed && pick(w), children: w }, w))) }));
+    const pickChips = picks.map((p) => {
+        const i = resolve(p.id);
+        if (!i)
+            return null;
+        const loading = i.sourced &&
+            symbols.some((s) => sourced[`${s}|${i.id}`] === 'loading' && idsFor(s).has(i.id));
+        const color = compare
+            ? p.for === ALL_SHOWN
+                ? 'var(--muted-foreground)'
+                : (SYMBOL_COLORS[symbols.indexOf(p.for)] ?? 'var(--primary)')
+            : lineColor(i.lines[0]?.key ?? '');
+        const label = i.formula ? `ƒ ${i.label}` : i.label;
+        const name = compare ? `${label} · ${p.for === ALL_SHOWN ? 'All' : p.for}` : label;
+        return (_jsxs(Badge, { variant: "secondary", className: "h-7 gap-1.5 pr-1", children: [_jsx("span", { "aria-hidden": true, className: "h-0.5 w-2.5 rounded-full", style: { background: color } }), name, loading && _jsx("span", { className: "text-muted-foreground", children: "loading\u2026" }), _jsx(IconButton, { icon: XIcon, size: "icon-xs", label: `Remove ${name}`, onClick: () => setPicks(picks.filter((x) => x !== p)) })] }, `${p.id}|${p.for}`));
+    });
+    const picker = (_jsx(IndicatorPicker, { selected: selected, available: available, reasons: reasons, mine: mine, onAdd: add, targets: compare ? symbols : undefined, target: pickTarget, onTarget: setTarget, onToggle: toggle }));
+    const adder = symbols.length < MAX_COMPARE ? (_jsx(Input, { "aria-label": "Add a symbol to compare", placeholder: "\uFF0B Compare", className: "h-7 w-28 font-mono uppercase placeholder:normal-case", onKeyDown: (e) => {
+            if (e.key !== 'Enter')
+                return;
+            addSymbol(e.currentTarget.value);
+            e.currentTarget.value = '';
+        } })) : null;
+    const footer = (_jsxs("p", { className: "flex flex-wrap justify-between gap-2 text-xs text-muted-foreground", children: [_jsx("span", { children: compare && mode === 'pct'
+                    ? '% from the left edge of the chart · drag the timeline to move the baseline'
+                    : compare
+                        ? 'Each symbol on its own scale · hover to read the day'
+                        : 'Hover to read a bar · drag to pan, scroll to zoom · drag the timeline window or its edges' }), !series[0]?.live && series[0]?.read.data && (_jsxs("span", { children: [series.some((s) => s.read.data?.source === 'delayed') ? 'Delayed source' : 'History', " \u00B7", ' ', series[0].read.data.resolution, " bars"] }))] }));
+    const result = (element) => ({
+        load,
+        rows: series[0]?.bars.length ?? 0,
+        ref,
+        element,
+        noDesk: !barsUrl,
+    });
+    if (!barsUrl)
+        return result(_jsx("p", { className: "text-sm text-muted-foreground", children: "Charts are not on this desk." }));
+    if (compare)
+        return result(_jsx(Compare, { dialog: dialog, symbols: symbols, series: series, values: values, chosenFor: chosenFor, mode: mode, timeZone: timeZone, range: range, onClose: onClose, onRemove: removeSymbol, header: _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [windowButtons, _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [pickChips, picker, _jsx(ToggleGroup, { type: "single", size: "sm", variant: "outline", spacing: 0, value: mode, onValueChange: (v) => v && setMode(v), "aria-label": "Scale", children: MODES.map((m) => (_jsx(ToggleGroupItem, { value: m.id, className: "px-2.5", children: m.label }, m.id))) })] })] }), adder: adder, footer: footer, onRange: (span, byPerson) => {
+                setShown(span);
+                if (byPerson)
+                    setPressed(null);
+            }, onOutside: (span) => {
+                setView({ window: null, span });
+                setPressed(null);
+            } }));
+    const one = series[0];
+    const symbol = one.symbol;
+    const today = live.series[symbol];
+    const meta = MARKET_SYMBOLS[symbol];
+    const fmt = (v) => `${today?.prefix ?? meta?.prefix ?? ''}${v.toLocaleString('en-US', {
+        minimumFractionDigits: today?.decimals ?? meta?.decimals ?? 2,
+        maximumFractionDigits: today?.decimals ?? meta?.decimals ?? 2,
+    })}${today?.suffix ?? meta?.suffix ?? ''}`;
+    const bars = one.bars;
+    // The header reads the bars the chart shows, so its price, change, high and low match them.
+    const secs = bars.map((b) => secOf(b.time));
+    const [a, b] = shown && secs.length ? indexSpan(secs, shown) : [0, bars.length - 1];
+    const inView = bars.slice(a, b + 1);
+    const atEnd = b >= bars.length - 1;
+    const last = inView.at(-1)?.close ?? null;
+    // Live at the end: up or down today, from the same base the Outlook and Holdings use (the prior
+    // close, or the session's close once the overnight session starts a new day).
+    const day = one.live && today ? todayOf(today) : null;
+    const base = day?.base ?? today?.prevClose ?? null;
+    const prev = one.live && atEnd ? base : (inView[0]?.open ?? null);
+    // Breadth and rates move in points (a % above the 50-day from 49 to 36 is −13 pts, not −26%).
+    const points = !!meta?.daily?.points;
+    const change = last !== null && prev ? (points ? last - prev : (last / prev - 1) * 100) : null;
+    const delayed = one.live ? today?.delayed : one.read.data?.source === 'delayed';
+    const hi = inView.length ? Math.max(...inView.map((x) => x.high)) : null;
+    const lo = inView.length ? Math.min(...inView.map((x) => x.low)) : null;
+    const endDay = inView.at(-1)?.time;
+    const loading = !one.live && !one.read.data && !one.read.error;
+    const chosen = chosenFor(symbol);
+    const judged = one.timeline.length ? one.timeline : bars;
+    const flat = judged.length > 1 &&
+        judged.every((x) => x.open === x.high && x.high === x.low && x.low === x.close);
+    const type = picked ?? (flat ? 'line' : 'candles');
+    return result(_jsxs(_Fragment, { children: [_jsxs(ChartHeader, { dialog: dialog, children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [_jsxs(ChartTitle, { dialog: dialog, className: "flex flex-wrap items-baseline gap-2", children: [_jsx("span", { className: "text-lg font-bold", children: today?.label ?? meta?.label ?? symbol }), _jsxs("span", { className: "text-sm font-normal text-muted-foreground", children: [today?.name ?? meta?.name ?? '', today?.via ? ` via ${today.via}` : ''] }), delayed ? (_jsx(Badge, { variant: "outline", className: "border-warning/50 bg-warning/10 text-warning", children: "Delayed" })) : one.live && live.status === 'live' ? (_jsxs(Badge, { variant: "outline", className: "gap-1.5 border-gain/40 text-gain", children: [_jsx("span", { className: "size-1.5 rounded-full bg-gain" }), "Live"] })) : null] }), _jsx(ChartDescription, { dialog: dialog, children: _jsxs("div", { className: "num flex flex-wrap items-baseline gap-x-3 gap-y-1 text-foreground", children: [last !== null && _jsx("span", { className: "text-xl", children: fmt(last) }), !atEnd && endDay !== undefined && (_jsxs("span", { className: "text-xs text-muted-foreground", children: ["on", ' ', typeof endDay === 'string'
+                                                    ? endDay
+                                                    : new Date(endDay * 1000).toLocaleString('en-US', {
+                                                        timeZone,
+                                                        month: 'short',
+                                                        day: 'numeric',
+                                                        hour: 'numeric',
+                                                        minute: '2-digit',
+                                                    })] })), one.live && atEnd && day?.label && (_jsx("span", { className: "text-xs text-muted-foreground", children: day.label })), change !== null && (_jsxs("span", { className: change >= 0 ? 'text-gain' : 'text-loss', children: [change >= 0 ? '+' : '−', points
+                                                    ? `${Math.abs(change).toFixed(meta?.decimals ?? 2)}${meta?.suffix === '%' ? ' pts' : ''}`
+                                                    : `${Math.abs(change).toFixed(2)}%`, ' ', change >= 0 ? '▲' : '▼'] })), hi !== null && lo !== null && (_jsxs("span", { className: "text-xs text-muted-foreground", children: ["H ", fmt(hi), " \u00B7 L ", fmt(lo), prev
+                                                    ? ` · ${one.live && atEnd ? (base === today?.prevClose ? 'Prev' : 'Close') : 'Start'} ${fmt(prev)}`
+                                                    : ''] }))] }) })] }), _jsxs("div", { className: "flex items-center gap-2", children: [adder, onClose && _jsx(IconButton, { icon: XIcon, label: "Close", variant: "outline", onClick: onClose })] })] }), _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [showWindows ? windowButtons : _jsx("span", {}), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [pickChips, picker, _jsx(ToggleGroup, { type: "single", size: "sm", variant: "outline", spacing: 0, value: type, onValueChange: (v) => v && setType(v), "aria-label": "Chart type", children: TYPES.map((t) => (_jsx(ToggleGroupItem, { value: t.id, className: "px-2.5", children: t.label }, t.id))) })] })] }), loading ? (_jsx(Skeleton, { className: "h-[420px] w-full" })) : !bars.length ? (_jsx("p", { className: "py-16 text-center text-sm text-muted-foreground", children: one.read.error ?? today?.error ?? `No bars for ${symbol} in this window.` })) : (_jsx(PriceChart, { bars: bars, type: type, chosen: chosen, values: values[symbol] ?? NO_VALUES, timeZone: timeZone, zoom: true, navigator: true, timeline: one.timeline, range: range, onRange: (span, byPerson) => {
+                    setShown(span);
+                    if (byPerson)
+                        setPressed(null);
+                }, onOutside: (span) => {
+                    setView({ window: null, span });
+                    setPressed(null);
+                }, baseline: one.live ? base : null })), footer] }));
+}
+/** The chart's title row: the dialog's own header, title and description inside the dialog. */
+function ChartHeader({ dialog, children }) {
+    const className = 'flex-row items-start justify-between gap-3 space-y-0';
+    return dialog ? (_jsx(DialogHeader, { className: className, children: children })) : (_jsx("div", { className: cn('flex', className), children: children }));
+}
+function ChartTitle({ dialog, className, children, }) {
+    return dialog ? (_jsx(DialogTitle, { className: className, children: children })) : (_jsx("div", { className: className, children: children }));
+}
+function ChartDescription({ dialog, children }) {
+    return dialog ? _jsx(DialogDescription, { asChild: true, children: children }) : children;
+}
+/** Two or more symbols: their chips, then the compare chart with each pick's lines. */
+function Compare({ dialog, symbols, series, values, chosenFor, mode, timeZone, range, header, adder, footer, onClose, onRemove, onRange, onOutside, }) {
+    const barsKey = series
+        .map((s) => `${s.symbol}:${s.bars.length}:${s.bars.at(-1)?.close}`)
+        .join('|');
+    // biome-ignore lint/correctness/useExhaustiveDependencies: keyed by the bars drawn
+    const lines = useMemo(() => series
+        .filter((s) => s.bars.length)
+        .map((s) => ({ symbol: s.symbol, color: colorIn(symbols, s.symbol), bars: s.bars })), [barsKey]);
+    const { overlays, panes } = useMemo(() => {
+        const overlays = [];
+        const panes = [];
+        const every = new Map(symbols.flatMap(chosenFor).map((i) => [i.id, i]));
+        for (const i of every.values()) {
+            const on = symbols.filter((s) => chosenFor(s).some((c) => c.id === i.id));
+            if (!on.length)
+                continue;
+            const extras = on.flatMap((s) => i.lines
+                .filter((l) => !l.bar)
+                .map((l) => ({
+                key: `${s}:${l.key}`,
+                label: i.lines.length === 1 ? s : `${s} ${l.label}`,
+                symbol: s,
+                color: colorIn(symbols, s),
+                values: values[s]?.[l.key],
+            })));
+            if (i.where === 'overlay')
+                overlays.push(...extras);
+            else
+                panes.push({
+                    id: i.id,
+                    label: `${i.label} · ${on.length === symbols.length ? 'all symbols' : on.join(', ')}`,
+                    domain: i.domain,
+                    refs: i.refs,
+                    lines: extras,
+                });
+        }
+        return { overlays, panes };
+    }, [symbols, chosenFor, values]);
+    const loading = series.some((s) => !s.live && !s.read.data && !s.read.error);
+    const failed = series.filter((s) => s.read.error || (!s.bars.length && s.read.data));
+    return (_jsxs(_Fragment, { children: [_jsxs(ChartHeader, { dialog: dialog, children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-1.5", children: [_jsx(ChartTitle, { dialog: dialog, className: "text-lg font-bold", children: "Compare" }), _jsx(ChartDescription, { dialog: dialog, children: _jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [symbols.map((s) => (_jsxs(Badge, { variant: "outline", className: "num h-7 gap-1.5 pr-1 font-mono", children: [_jsx("span", { "aria-hidden": true, className: "size-2 rounded-full", style: { background: colorIn(symbols, s) } }), s, _jsx(IconButton, { icon: XIcon, size: "icon-xs", label: `Remove ${s}`, onClick: () => onRemove(s) })] }, s))), adder] }) })] }), onClose && _jsx(IconButton, { icon: XIcon, label: "Close", variant: "outline", onClick: onClose })] }), header, loading && !lines.length ? (_jsx(Skeleton, { className: "h-[420px] w-full" })) : !lines.length ? (_jsx("p", { className: "py-16 text-center text-sm text-muted-foreground", children: "No bars in this window." })) : (_jsx(CompareChart, { lines: lines, mode: mode, overlays: overlays, panes: panes, timeZone: timeZone, timeline: series.find((s) => s.timeline.length)?.timeline ?? [], range: range, onRange: onRange, onOutside: onOutside })), failed.length > 0 && (_jsxs("p", { className: "text-xs text-muted-foreground", children: ["No bars for ", failed.map((s) => s.symbol).join(', '), " in this window."] })), footer] }));
+}