@columenlabs/lumen-ui 0.0.0-stage → 0.2.0

package/dist/market/market-widget.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Market widgets (mockup "Dashboard Outlook"): a view widget of kind `market`
+ * shows symbols' 1m bars for the session, live while it trades. Three looks:
+ *
+ *   lines   one wide chart of each symbol's % change from the prior close (the indexes), with a
+ *           legend of name, change and level; the crosshair reads every line at that minute
+ *   tiles   one widget per symbol: change, a sparkline over the prior close, the value, and Live,
+ *           "via ETF" or a gold Delayed chip
+ *   today   one row per symbol: up or down today, by how much, and its price now
+ *
+ * While the session is shut, each draws the trades since its close (pre-market, after hours,
+ * overnight; an index through its ETF) dashed after the session, and Today measures from the
+ * session's close once the overnight session has begun.
+ *
+ * A name or a widget opens the chart dialog. Without a market provider (apps other than an app,
+ * or the exported an app) the widget says live data is not available here.
+ */
+import { type MarketSeries } from '@columenlabs/lumen-ui-types/market';
+export declare function fmtValue(s: Pick<MarketSeries, 'prefix' | 'suffix' | 'decimals'>, v: number): string;
+/** Change from the prior close, in percent. */
+export declare const changeOf: (s: MarketSeries) => number | null;
+/** "● Live · 10:18 AM PDT", or the closed line, for a page or card header. */
+export declare function MarketBadge({ symbols }: {
+    symbols: string[];
+}): import("react").JSX.Element | null;
+/** A widget of kind `market`. */
+export declare function MarketWidget({ symbols, style, }: {
+    symbols: string[];
+    style: 'lines' | 'tiles' | 'today';
+}): import("react").JSX.Element;
+/** One wide chart: each symbol's % change from the prior close, 1m. */
+export declare function MarketLines({ symbols: all }: {
+    symbols: string[];
+}): import("react").JSX.Element;
+/** One widget per symbol: change, sparkline over the prior close, value, and its source chip. */
+export declare function MarketTiles({ symbols }: {
+    symbols: string[];
+}): import("react").JSX.Element;
+/**
+ * Up or down today: one row per symbol with its price now and its change today,
+ * in the session or since it closed (the session it traded in named), and how many are up and down.
+ */
+export declare function MarketToday({ symbols: all }: {
+    symbols: string[];
+}): import("react").JSX.Element;

package/dist/market/market-widget.js

@@ -0,0 +1,346 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Market widgets (mockup "Dashboard Outlook"): a view widget of kind `market`
+ * shows symbols' 1m bars for the session, live while it trades. Three looks:
+ *
+ *   lines   one wide chart of each symbol's % change from the prior close (the indexes), with a
+ *           legend of name, change and level; the crosshair reads every line at that minute
+ *   tiles   one widget per symbol: change, a sparkline over the prior close, the value, and Live,
+ *           "via ETF" or a gold Delayed chip
+ *   today   one row per symbol: up or down today, by how much, and its price now
+ *
+ * While the session is shut, each draws the trades since its close (pre-market, after hours,
+ * overnight; an index through its ETF) dashed after the session, and Today measures from the
+ * session's close once the overnight session has begun.
+ *
+ * A name or a widget opens the chart dialog. Without a market provider (apps other than an app,
+ * or the exported an app) the widget says live data is not available here.
+ */
+import { isDailyMarketKey } from '@columenlabs/lumen-ui-types/market';
+import { ColorType, CrosshairMode, LineSeries, createChart, } from 'lightweight-charts';
+import { CircleAlert, CircleSlash, LoaderCircle, RotateCw } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Area, AreaChart, ReferenceLine, YAxis } from 'recharts';
+import { IconButton } from '../icon-button.js';
+import { KIT } from '../kit-config.js';
+import { cn } from '../lib/utils.js';
+import { usePrefs } from '../prefs.js';
+import { Badge } from '../ui/badge.js';
+import { Button } from '../ui/button.js';
+import { ChartContainer } from '../ui/chart.js';
+import { Skeleton } from '../ui/skeleton.js';
+import { extendedOf, todayOf, useMarket, useMarketDaily } from './live.js';
+import { useSymbolChart } from './lumen-chart.js';
+import { faint } from './price-chart.js';
+const LINE_TOKENS = ['--chart-1', '--chart-3', '--chart-4', '--chart-6', '--chart-2', '--chart-5'];
+const MINUS = '−';
+export function fmtValue(s, v) {
+    return `${s.prefix}${v
+        .toLocaleString('en-US', {
+        minimumFractionDigits: s.decimals,
+        maximumFractionDigits: s.decimals,
+    })
+        .replace('-', MINUS)}${s.suffix}`;
+}
+const fmtPct = (p) => `${p >= 0 ? '+' : MINUS}${Math.abs(p).toFixed(2)}% ${p >= 0 ? '▲' : '▼'}`;
+/** A daily series' change in its own units: points for a percentage (`+4.4 pts`). */
+const fmtPts = (s, p) => `${p >= 0 ? '+' : MINUS}${Math.abs(p).toFixed(s.decimals)}${s.suffix === '%' ? ' pts' : ''}`;
+const day = (iso) => iso
+    ? new Date(`${iso}T12:00:00Z`).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+    : '';
+/** Change from the prior close, in percent. */
+export const changeOf = (s) => {
+    const last = s.bars.at(-1)?.c;
+    return last !== undefined && s.prevClose ? (last / s.prevClose - 1) * 100 : null;
+};
+function clock(sec, zone) {
+    return new Date(sec * 1000).toLocaleTimeString('en-US', {
+        timeZone: zone,
+        hour: 'numeric',
+        minute: '2-digit',
+        timeZoneName: 'short',
+    });
+}
+/** "● Live · 10:18 AM PDT", or the closed line, for a page or card header. */
+export function MarketBadge({ symbols }) {
+    const { timeZone } = usePrefs();
+    const m = useMarket(symbols);
+    if (m.status === 'off')
+        return null;
+    const lastBar = Math.max(0, ...Object.values(m.series).map((s) => s.bars.at(-1)?.t ?? 0));
+    const ext = Object.values(m.series)
+        .map(extendedOf)
+        .filter((x) => !!x)
+        .sort((a, b) => b.at - a.at)[0];
+    const live = m.status === 'live';
+    const text = m.status === 'loading'
+        ? 'Loading'
+        : m.status === 'connecting'
+            ? 'Connecting'
+            : m.status === 'error'
+                ? 'Not reachable'
+                : live
+                    ? `Live${lastBar ? ` · ${clock(lastBar + 60, timeZone)}` : ''}`
+                    : ext
+                        ? `${ext.label} · ${clock(ext.at + 300, timeZone)}`
+                        : `Closed${m.session ? ` · last bar ${clock(m.session.close, timeZone)}` : ''}`;
+    return (_jsxs(Badge, { variant: "outline", className: cn('gap-1.5 font-normal', live ? 'border-gain/40 text-gain' : 'text-muted-foreground'), children: [_jsx("span", { className: cn('size-1.5 rounded-full', live ? 'bg-gain' : 'bg-muted-foreground') }), text] }));
+}
+function Unavailable({ status, error, onRetry, }) {
+    return (_jsxs("div", { className: "flex flex-col items-center gap-2 py-6 text-center text-sm text-muted-foreground", children: [_jsx("p", { children: status === 'off'
+                    ? KIT.marketOff
+                    : `Market data is not reachable · ${error ?? 'no answer'}` }), status !== 'off' && onRetry && (_jsx(IconButton, { icon: RotateCw, label: "Retry", variant: "outline", onClick: onRetry }))] }));
+}
+/** A widget of kind `market`. */
+export function MarketWidget({ symbols, style, }) {
+    if (style === 'lines')
+        return _jsx(MarketLines, { symbols: symbols });
+    if (style === 'today')
+        return _jsx(MarketToday, { symbols: symbols });
+    return _jsx(MarketTiles, { symbols: symbols });
+}
+/** One wide chart: each symbol's % change from the prior close, 1m. */
+export function MarketLines({ symbols: all }) {
+    const symbols = useMemo(() => all.filter((k) => !isDailyMarketKey(k)), [all]);
+    const m = useMarket(symbols);
+    const open = useSymbolChart();
+    const { timeZone } = usePrefs();
+    const host = useRef(null);
+    const chart = useRef(null);
+    const lines = useRef(new Map());
+    const extLines = useRef(new Map());
+    const [hover, setHover] = useState(null);
+    const shown = symbols.map((s) => m.series[s]).filter((s) => !!s);
+    const ready = shown.length > 0;
+    // The chart itself, once; lines are added as their series arrive.
+    useEffect(() => {
+        const el = host.current;
+        if (!el || !ready)
+            return;
+        const css = getComputedStyle(document.documentElement);
+        const v = (n) => css.getPropertyValue(n).trim();
+        const c = createChart(el, {
+            autoSize: true,
+            layout: {
+                background: { type: ColorType.Solid, color: 'transparent' },
+                textColor: v('--muted-foreground'),
+                fontFamily: v('--font-mono'),
+                fontSize: 11,
+                attributionLogo: false,
+            },
+            grid: { vertLines: { visible: false }, horzLines: { color: faint(v('--border')) } },
+            rightPriceScale: { borderVisible: false },
+            timeScale: {
+                borderVisible: false,
+                timeVisible: true,
+                fixLeftEdge: true,
+                fixRightEdge: true,
+                tickMarkFormatter: (t) => new Date(t * 1000).toLocaleTimeString('en-US', {
+                    timeZone,
+                    hour: 'numeric',
+                    minute: '2-digit',
+                }),
+            },
+            localization: {
+                timeFormatter: (t) => clock(t, timeZone),
+                priceFormatter: (p) => `${p >= 0 ? '+' : MINUS}${Math.abs(p).toFixed(2)}%`,
+            },
+            crosshair: { mode: CrosshairMode.Normal },
+            handleScale: false,
+            handleScroll: false,
+        });
+        chart.current = c;
+        c.subscribeCrosshairMove((p) => {
+            if (!p.time)
+                return setHover(null);
+            const at = {};
+            for (const [k, s] of lines.current) {
+                const d = p.seriesData.get(s);
+                if (d?.value !== undefined)
+                    at[k] = d.value;
+            }
+            for (const [k, s] of extLines.current) {
+                const d = p.seriesData.get(s);
+                if (d?.value !== undefined)
+                    at[k] = d.value;
+            }
+            setHover(at);
+        });
+        return () => {
+            chart.current = null;
+            lines.current.clear();
+            extLines.current.clear();
+            c.remove();
+        };
+    }, [ready, timeZone]);
+    // Each symbol's line, redrawn as its bars change.
+    useEffect(() => {
+        const c = chart.current;
+        if (!c)
+            return;
+        const css = getComputedStyle(document.documentElement);
+        shown.forEach((s, i) => {
+            let line = lines.current.get(s.key);
+            if (!line) {
+                line = c.addSeries(LineSeries, {
+                    color: css.getPropertyValue(LINE_TOKENS[i % LINE_TOKENS.length]).trim(),
+                    lineWidth: 2,
+                    priceLineVisible: false,
+                    lastValueVisible: true,
+                });
+                if (i === 0)
+                    line.createPriceLine({
+                        price: 0,
+                        color: css.getPropertyValue('--muted-foreground').trim(),
+                        lineWidth: 1,
+                        lineStyle: 2,
+                        axisLabelVisible: false,
+                    });
+                lines.current.set(s.key, line);
+            }
+            const base = s.prevClose;
+            line.setData(base ? s.bars.map((b) => ({ time: b.t, value: (b.c / base - 1) * 100 })) : []);
+            // After the session, dashed: its last minute, then the trades since the close.
+            const ext = extendedOf(s);
+            const last = s.bars.at(-1);
+            let dashed = extLines.current.get(s.key);
+            if (ext && base && last) {
+                if (!dashed) {
+                    dashed = c.addSeries(LineSeries, {
+                        color: css.getPropertyValue(LINE_TOKENS[i % LINE_TOKENS.length]).trim(),
+                        lineWidth: 2,
+                        lineStyle: 2,
+                        priceLineVisible: false,
+                        lastValueVisible: true,
+                    });
+                    extLines.current.set(s.key, dashed);
+                }
+                dashed.setData([{ t: last.t, c: last.c }, ...ext.bars.filter((b) => b.t > last.t)].map((b) => ({
+                    time: b.t,
+                    value: (b.c / base - 1) * 100,
+                })));
+                line.applyOptions({ lastValueVisible: false });
+            }
+            else if (dashed) {
+                dashed.setData([]);
+                line.applyOptions({ lastValueVisible: true });
+            }
+        });
+        c.timeScale().fitContent();
+    });
+    if (m.status === 'off' || (m.status === 'error' && !ready))
+        return _jsx(Unavailable, { status: m.status, error: m.error, onRetry: m.retry });
+    if (!ready && symbols.length && m.missing.length === symbols.length)
+        return (_jsx("p", { className: "py-6 text-center text-sm text-muted-foreground", children: "No bars for this session yet." }));
+    if (!ready)
+        return _jsx(Skeleton, { "aria-busy": true, className: "h-72 w-full sm:h-80" });
+    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [_jsx("div", { className: "flex flex-nowrap justify-between gap-x-1 overflow-x-auto overflow-y-hidden [scrollbar-width:none] sm:justify-start sm:gap-x-3", children: shown.map((s, i) => {
+                    const ch = hover?.[s.key] ?? changeOf(s);
+                    const last = s.bars.at(-1)?.c;
+                    const ext = extendedOf(s);
+                    return (_jsxs(Button, { variant: "ghost", size: "sm", className: "h-7 min-w-0 shrink-0 justify-start gap-1 px-0 max-sm:text-xs sm:gap-1.5 sm:px-1.5", disabled: !open, onClick: () => open?.(s.key), title: `Open ${s.label}'s chart`, children: [_jsx("span", { "aria-hidden": true, className: "h-0.5 w-1.5 shrink-0 rounded-full sm:w-2.5", style: { background: `var(${LINE_TOKENS[i % LINE_TOKENS.length]})` } }), _jsx("span", { className: "font-semibold", children: s.label }), _jsx("span", { className: "hidden text-muted-foreground 2xl:inline", children: s.via ? `via ${s.via}` : s.name }), ch !== null && (_jsxs("span", { className: cn('num', ch >= 0 ? 'text-gain' : 'text-loss'), children: [fmtPct(ch).slice(0, -2), _jsxs("span", { className: "max-sm:hidden", children: [" ", ch >= 0 ? '▲' : '▼'] })] })), last !== undefined && !hover && (_jsx("span", { className: "num hidden text-muted-foreground lg:inline", children: fmtValue(s, last) })), ext && !hover && (_jsxs("span", { className: "num hidden text-muted-foreground lg:inline", children: ["\u00B7 ", ext.label, ' ', _jsx("span", { className: ext.change >= 0 ? 'text-gain' : 'text-loss', children: fmtPct(ext.change).slice(0, -2) }), ext.via ? ` via ${ext.via}` : ''] })), s.delayed && _jsx(DelayedChip, {})] }, s.key));
+                }) }), _jsx("div", { ref: host, className: "h-72 w-full sm:h-80" }), shown.some((s) => s.extended) && (_jsx("p", { className: "text-xs text-muted-foreground", children: "Dashed: trades since the close (pre-market, after hours, overnight); an index reads through its ETF." })), shown.some((s) => s.error) && (_jsx("p", { className: "text-xs text-muted-foreground", children: shown
+                    .filter((s) => s.error)
+                    .map((s) => `${s.label}: ${s.error}`)
+                    .join(' · ') }))] }));
+}
+/** A small status chip beside a symbol. */
+const CHIP = 'h-4 px-1.5 text-[10px]';
+/** "≈ SPY": the row is priced from that ETF. Purple, so it never reads as a warning. */
+const ProxyChip = ({ text, title }) => (_jsx(Badge, { variant: "outline", title: title, className: cn(CHIP, 'num shrink-0 border-proxy/40 bg-proxy/10 text-proxy'), children: text }));
+const DelayedChip = () => (_jsx(Badge, { variant: "outline", className: cn(CHIP, 'border-warning/50 bg-warning/10 text-warning'), children: "Delayed" }));
+/** One widget per symbol: change, sparkline over the prior close, value, and its source chip. */
+export function MarketTiles({ symbols }) {
+    const liveKeys = useMemo(() => symbols.filter((k) => !isDailyMarketKey(k)), [symbols]);
+    const dailyKeys = useMemo(() => symbols.filter(isDailyMarketKey), [symbols]);
+    const m = useMarket(liveKeys);
+    const d = useMarketDaily(dailyKeys);
+    const open = useSymbolChart();
+    if (m.status === 'off')
+        return _jsx(Unavailable, { status: m.status, error: m.error });
+    return (_jsx("div", { className: "grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-[repeat(auto-fit,minmax(8.5rem,1fr))]", children: symbols.map((k) => {
+            const s = m.series[k] ?? d.series[k];
+            if (!s) {
+                const daily = isDailyMarketKey(k);
+                const error = daily
+                    ? d.error
+                    : m.status === 'error'
+                        ? (m.error ?? 'not reachable')
+                        : null;
+                if (error)
+                    return (_jsx(TileState, { label: k, tone: "error", text: `Not reachable · ${error}`, children: _jsx(IconButton, { icon: RotateCw, label: "Retry", variant: "outline", size: "icon-xs", onClick: daily ? d.retry : m.retry }) }, k));
+                const none = daily ? !d.loading : m.missing.includes(k);
+                if (none)
+                    return (_jsx(TileState, { label: k, text: m.status === 'closed' ? 'No data · market closed' : 'No data for today' }, k));
+                return _jsx(TileState, { label: k, text: "Loading", loading: true }, k);
+            }
+            return (_jsx(Widget, { s: s, onOpen: open ? () => open(k) : undefined, live: m.status === 'live' }, k));
+        }) }));
+}
+/** A tile without a series yet: loading, no data, or failed with a reason and Retry. */
+function TileState({ label, text, tone, loading, children, }) {
+    return (_jsxs("div", { "aria-busy": loading || undefined, className: "flex h-[7.5rem] min-w-0 flex-col gap-1 rounded-lg border bg-card p-2.5", children: [_jsx("span", { className: "truncate font-semibold", children: label }), loading ? (_jsx(Skeleton, { className: "h-14 w-full" })) : (_jsxs("span", { className: "flex h-14 items-center gap-1.5 text-xs text-muted-foreground", children: [tone === 'error' ? (_jsx(CircleAlert, { className: "size-3.5 shrink-0 text-loss" })) : (_jsx(CircleSlash, { className: "size-3.5 shrink-0" })), _jsx("span", { className: "line-clamp-3", children: text })] })), _jsxs("span", { className: "flex items-center justify-between gap-2 text-[10px] text-muted-foreground", children: [loading ? (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx(LoaderCircle, { className: "size-3 animate-spin" }), text] })) : (_jsx("span", {})), children] })] }));
+}
+function Widget({ s, onOpen, live }) {
+    const last = s.bars.at(-1)?.c;
+    const ch = s.daily?.points && last !== undefined && s.prevClose !== null
+        ? last - s.prevClose
+        : changeOf(s);
+    const up = (ch ?? 0) >= 0;
+    const fmtCh = (c) => (s.daily?.points ? fmtPts(s, c) : fmtPct(c));
+    const ext = useMemo(() => extendedOf(s), [s]);
+    // The session's bars, then (dashed) the trades since its close, joined at its last minute.
+    const data = useMemo(() => {
+        const rows = s.bars.map((b) => ({ t: b.t, c: b.c }));
+        const last = rows.at(-1);
+        if (ext && last) {
+            last.e = last.c;
+            for (const b of ext.bars)
+                if (b.t > last.t)
+                    rows.push({ t: b.t, e: b.c });
+        }
+        return rows;
+    }, [s.bars, ext]);
+    const values = data.flatMap((d) => [d.c, d.e]).filter((v) => v !== undefined);
+    const lo = Math.min(...values, s.prevClose ?? Number.POSITIVE_INFINITY);
+    const hi = Math.max(...values, s.prevClose ?? Number.NEGATIVE_INFINITY);
+    const pad = (hi - lo) * 0.12 || 1;
+    const tone = up ? 'var(--gain)' : 'var(--loss)';
+    return (_jsxs("button", { type: "button", onClick: onOpen, disabled: !onOpen, "aria-label": `${s.label} ${ch === null ? '' : fmtCh(ch)}, open chart`, className: "flex min-w-0 flex-col gap-1 rounded-lg border bg-card p-2.5 text-left transition-colors hover:bg-muted/40 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-default", children: [_jsxs("span", { className: "flex items-baseline justify-between gap-2", children: [_jsx("span", { className: "min-w-0 truncate font-semibold", children: s.label }), ch !== null && (_jsx("span", { className: cn('num shrink-0 text-xs whitespace-nowrap', up ? 'text-gain' : 'text-loss'), children: fmtCh(ch) }))] }), ext ? (_jsxs("span", { className: "num truncate text-xs text-muted-foreground", children: [ext.label, ' ', _jsx("span", { className: ext.change >= 0 ? 'text-gain' : 'text-loss', children: fmtPct(ext.change).slice(0, -2) })] })) : (_jsx("span", { className: "truncate text-[11px] text-muted-foreground", children: s.name })), data.length > 1 ? (_jsx(ChartContainer, { config: { c: { label: s.label, color: tone } }, className: "aspect-auto h-14 w-full", children: _jsxs(AreaChart, { data: data, margin: { top: 2, bottom: 2, left: 0, right: 0 }, children: [_jsx(YAxis, { hide: true, domain: [lo - pad, hi + pad] }), s.prevClose !== null && !s.daily && (_jsx(ReferenceLine, { y: s.prevClose, stroke: "var(--muted-foreground)", strokeDasharray: "3 3" })), _jsx(Area, { dataKey: "c", type: "linear", stroke: tone, strokeWidth: 1.5, fill: tone, fillOpacity: 0.1, isAnimationActive: false, dot: false }), ext && (_jsx(Area, { dataKey: "e", type: "linear", stroke: ext.change >= 0 ? 'var(--gain)' : 'var(--loss)', strokeWidth: 1.5, strokeDasharray: "3 2", fill: "none", isAnimationActive: false, dot: false }))] }) })) : (_jsx("span", { className: "grid h-14 place-items-center text-xs text-muted-foreground", children: s.error ?? 'No bars yet' })), _jsxs("span", { className: "flex items-baseline justify-between gap-2", children: [_jsx("span", { className: "num text-sm", children: last !== undefined ? fmtValue(s, last) : '—' }), s.daily ? (_jsxs("span", { className: "text-[10px] text-muted-foreground", children: ["Daily \u00B7 ", day(s.daily.asOf)] })) : s.delayed ? (_jsx(DelayedChip, {})) : s.via ? (_jsxs("span", { className: "text-[10px] text-muted-foreground", children: ["via ", s.via] })) : live ? (_jsx("span", { className: "text-[10px] text-muted-foreground", children: "Live" })) : null] })] }));
+}
+/**
+ * Up or down today: one row per symbol with its price now and its change today,
+ * in the session or since it closed (the session it traded in named), and how many are up and down.
+ */
+export function MarketToday({ symbols: all }) {
+    const symbols = useMemo(() => all.filter((k) => !isDailyMarketKey(k)), [all]);
+    const m = useMarket(symbols);
+    const open = useSymbolChart();
+    const rows = symbols
+        .map((k) => m.series[k])
+        .filter((s) => !!s)
+        .map((s) => {
+        const today = todayOf(s);
+        // The ETF a row is priced from: an index outside the session, or a symbol the feed has
+        // only through one (Gold through GLD).
+        const proxy = (today?.label ? s.extended?.via : s.via) ?? null;
+        return { s, today, proxy };
+    });
+    if (m.status === 'off' || (m.status === 'error' && !rows.length))
+        return _jsx(Unavailable, { status: m.status, error: m.error, onRetry: m.retry });
+    if (!rows.length && symbols.length && m.missing.length === symbols.length)
+        return _jsx("p", { className: "py-6 text-center text-sm text-muted-foreground", children: "No prices yet." });
+    if (!rows.length)
+        return _jsx(Skeleton, { "aria-busy": true, className: "h-40 w-full" });
+    const up = rows.filter((r) => (r.today?.change ?? 0) > 0).length;
+    const down = rows.filter((r) => (r.today?.change ?? 0) < 0).length;
+    const session = rows.find((r) => r.today?.label)?.today?.label ?? (m.status === 'live' ? 'Live' : null);
+    const proxied = rows.filter((r) => r.proxy);
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("p", { className: "num flex items-center gap-2 text-xs text-muted-foreground", children: [_jsxs("span", { className: "text-gain", children: ["\u25B2 ", up, " up"] }), _jsxs("span", { className: "text-loss", children: ["\u25BC ", down, " down"] }), session && _jsx("span", { className: "ml-auto font-sans", children: session })] }), _jsx("div", { className: "flex flex-col", children: rows.map(({ s, today, proxy }) => {
+                    const ch = today?.change ?? null;
+                    const tone = ch === null ? 'text-muted-foreground' : ch >= 0 ? 'text-gain' : 'text-loss';
+                    return (_jsxs(Button, { variant: "ghost", className: "h-auto min-w-0 justify-between gap-3 px-2 py-1.5 font-normal", disabled: !open, onClick: () => open?.(s.key), title: `Open ${s.label}'s chart`, children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: "truncate font-semibold", children: s.label }), proxy && (_jsx(ProxyChip, { text: `≈ ${proxy}`, title: `${s.label} is priced from ${proxy}'s move${today?.label ? ` ${today.label.toLowerCase()}` : ''}.` })), s.delayed && !today?.label && _jsx(DelayedChip, {})] }), _jsxs("span", { className: "flex shrink-0 items-center gap-3", children: [_jsx("span", { className: "num text-xs text-muted-foreground", children: today ? fmtValue(s, today.value) : '—' }), _jsx("span", { className: cn('num w-16 text-right text-sm font-semibold', tone), children: ch === null ? '—' : fmtPct(ch) })] })] }, s.key));
+                }) }), proxied.length > 0 && (_jsxs("p", { className: "flex items-start gap-2 border-t px-2 pt-2 text-xs text-muted-foreground", children: [_jsx(ProxyChip, { text: "\u2248" }), _jsx("span", { children: proxied.length === 1
+                            ? `Proxy: ${proxied[0]?.s.label} moves with ${proxied[0]?.proxy}.`
+                            : "Proxy: these don't trade now, so each moves with its ETF." })] }))] }));
+}

package/dist/market/option-chain.d.ts

@@ -0,0 +1,19 @@
+export interface OptionChainRow<Q> {
+    strike: number;
+    call?: Q;
+    put?: Q;
+}
+export interface OptionChainField<Q> {
+    key: string;
+    label: string;
+    value: (q: Q) => number | null;
+    format: (v: number | null) => string;
+}
+export declare function OptionChainTable<Q>({ rows, fields, spot, format, }: {
+    rows: OptionChainRow<Q>[];
+    /** Read outward from the strike: the first field sits next to it on both sides. */
+    fields: OptionChainField<Q>[];
+    spot: number | null;
+    /** How a strike and the price print. */
+    format: (v: number) => string;
+}): import("react").JSX.Element;

package/dist/market/option-chain.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// An option chain as calls | strike | puts, one row per strike, the strike pinned in the centre
+// (an app's live chain; in the shell since Edge drift step 2, 2026-10-14). Calls read leftward
+// and puts rightward from the strike, a row marks the price between strikes, and in-the-money
+// cells are shaded. The app passes its rows and how each field reads and prints.
+import { createColumnHelper, tableFeatures, useTable } from '@tanstack/react-table';
+import { Fragment, useEffect, useMemo, useRef } from 'react';
+import { cn } from '../lib/utils.js';
+import { Badge } from '../ui/badge.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table.js';
+const features = tableFeatures({});
+export function OptionChainTable({ rows, fields, spot, format, }) {
+    const columns = useMemo(() => {
+        const h = createColumnHelper();
+        const side = (type, list) => h.columns(list.map((f) => h.accessor((r) => {
+            const q = r[type];
+            return q === undefined ? null : f.value(q);
+        }, { id: `${type}-${f.key}`, header: f.label, cell: (c) => f.format(c.getValue()) })));
+        return h.columns([
+            h.group({ id: 'calls', header: 'Calls', columns: side('call', [...fields].reverse()) }),
+            h.accessor('strike', { header: 'Strike', cell: (c) => format(c.getValue()) }),
+            h.group({ id: 'puts', header: 'Puts', columns: side('put', fields) }),
+        ]);
+    }, [fields, format]);
+    const table = useTable({ features, columns, data: rows });
+    // Open centred on the money and on the strike column; re-centre only when the strike set changes.
+    const box = useRef(null);
+    const strikeKey = rows.length ? `${rows[0]?.strike}-${rows.length}` : '';
+    // biome-ignore lint/correctness/useExhaustiveDependencies: keyed on the strike set, not every tick
+    useEffect(() => {
+        const el = box.current;
+        const row = el?.querySelector('[data-spot]');
+        if (el && row)
+            el.scrollTop = row.offsetTop - el.clientHeight / 2;
+        const strike = el?.querySelector('[data-strike]');
+        if (el && strike)
+            el.scrollLeft = strike.offsetLeft + strike.offsetWidth / 2 - el.clientWidth / 2;
+    }, [strikeKey, spot === null]);
+    return (_jsx("div", { ref: box, className: "max-h-[70vh] overflow-auto rounded-lg border bg-card [&>[data-slot=table-container]]:overflow-visible", children: _jsxs(Table, { className: "num text-xs", children: [_jsx(TableHeader, { className: "sticky top-0 z-10 bg-muted", children: table.getHeaderGroups().map((hg) => (_jsx(TableRow, { className: "hover:bg-transparent", children: hg.headers.map((hd) => (_jsx(TableHead, { colSpan: hd.colSpan, className: cn('h-(--row-h) px-(--cell-x) text-right font-sans text-xs font-medium text-muted-foreground', hd.column.id === 'strike' && 'text-center', 
+                            // Group labels sit next to the strike, so both read when the table opens centred.
+                            hd.subHeaders.length > 0 && 'text-foreground', hd.column.id === 'puts' && 'text-left'), children: hd.isPlaceholder ? null : _jsx(table.FlexRender, { header: hd }) }, hd.id))) }, hg.id))) }), _jsx(TableBody, { children: table.getRowModel().rows.map((row, i, all) => {
+                        const k = row.original.strike;
+                        const prev = all[i - 1]?.original.strike;
+                        // The price sits between the last strike below it and the first at or above it.
+                        const marker = spot !== null && k >= spot && (prev === undefined ? k > spot : prev < spot) ? (_jsxs(TableRow, { "data-spot": true, "aria-label": `Price ${format(spot)}`, className: "bg-primary/10 hover:bg-primary/10", children: [_jsx(TableCell, { colSpan: fields.length, className: "h-6 p-0" }), _jsx(TableCell, { className: "h-6 px-(--cell-x) py-0 text-center", children: _jsx(Badge, { className: "num h-5 px-1.5", children: format(spot) }) }), _jsx(TableCell, { colSpan: fields.length, className: "h-6 p-0" })] }, "spot")) : null;
+                        return (_jsxs(Fragment, { children: [marker, _jsx(TableRow, { children: row.getAllCells().map((cell) => {
+                                        const id = cell.column.id;
+                                        const itm = spot !== null &&
+                                            ((id.startsWith('call') && k < spot) || (id.startsWith('put') && k > spot));
+                                        return (_jsx(TableCell, { "data-strike": id === 'strike' || undefined, className: cn('h-(--row-h) px-(--cell-x) py-0 text-right', id === 'strike' && 'bg-muted/60 text-center font-medium', itm && 'bg-muted/40', cell.getValue() === null && 'text-ink-subtle'), children: _jsx(table.FlexRender, { cell: cell }) }, cell.id));
+                                    }) })] }, row.id));
+                    }) })] }) }));
+}

package/dist/market/price-chart.d.ts

@@ -0,0 +1,128 @@
+/**
+ * The shell's price chart (moved from an app's Chart tab): price in the chosen
+ * type, volume when the bars have it, then a pane per oscillator, all on one time axis; crosshair
+ * legend, drag to pan, wheel or pinch to zoom, and an optional timeline navigator under it.
+ * lightweight-charts is the one place the shell draws with something other than Recharts: it has the
+ * financial time axis and panning (approved in the market-live design).
+ */
+import { type IChartApi, type Time } from 'lightweight-charts';
+import { type ChartIndicator, type IndicatorValues } from './indicators.js';
+/** One bar: `time` is a `YYYY-MM-DD` day or Unix seconds. */
+export interface ChartBar {
+    time: string | number;
+    open: number;
+    high: number;
+    low: number;
+    close: number;
+    volume?: number;
+}
+/** How the price is drawn: the basics every charting tool offers. */
+export declare const CHART_TYPES: readonly [{
+    readonly id: 'candles';
+    readonly label: 'Candles';
+}, {
+    readonly id: 'ohlc';
+    readonly label: 'OHLC bars';
+}, {
+    readonly id: 'line';
+    readonly label: 'Line';
+}, {
+    readonly id: 'area';
+    readonly label: 'Area';
+}, {
+    readonly id: 'heikin';
+    readonly label: 'Heikin-Ashi';
+}];
+export type ChartType = (typeof CHART_TYPES)[number]['id'];
+/** Heikin-Ashi candles: each bar averages itself with the one before, which smooths the trend. */
+export declare function heikinAshi(bars: ChartBar[]): ChartBar[];
+export declare const PRICE_PANE = 288;
+export declare const OSC_PANE = 112;
+export declare const AXIS = 28;
+export declare const price: (n: number) => string;
+/** A colour at half strength (grid lines fainter than borders). */
+export declare const faint: (color: string) => string;
+/** Theme tokens as concrete colours: the canvas cannot read `var(--x)`. */
+declare function readTheme(): {
+    text: string;
+    border: string;
+    grid: string;
+    up: string;
+    down: string;
+    primary: string;
+    css: (name: string) => string;
+};
+export type Theme = ReturnType<typeof readTheme>;
+/** Colours follow the light/dark switch, which sets the `dark` class on the root. */
+export declare function useTheme(): {
+    text: string;
+    border: string;
+    grid: string;
+    up: string;
+    down: string;
+    primary: string;
+    css: (name: string) => string;
+};
+/** A hex token with alpha (the shell's colour tokens are hex). */
+export declare const alpha: (c: string, a: number) => string;
+/** Time labels in the person's zone (the axis would otherwise read UTC). */
+export declare function timeText(t: Time, zone: string, withDay: boolean): string;
+/** A bar's time as Unix seconds (days read as UTC midnight). */
+export declare const secOf: (t: string | number | Time) => number;
+/** A span of time in Unix seconds; either end may be infinite (from the first bar, to the last). */
+export interface TimeSpan {
+    from: number;
+    to: number;
+}
+/** The bars of `secs` inside `span`, as an index range (at least one bar). */
+export declare function indexSpan(secs: number[], span: TimeSpan): [number, number];
+export interface PriceChartProps {
+    bars: ChartBar[];
+    /** Bars shown at first, counted from the latest; left out: all of them. */
+    visible?: number;
+    type: ChartType;
+    /** Overlays drawn on the price and oscillators in their own panes. */
+    chosen: ChartIndicator[];
+    values: IndicatorValues;
+    /** The person's time zone, for intraday bars (Unix seconds). */
+    timeZone?: string;
+    /** Wheel and pinch zoom (off where the page itself scrolls under the chart). */
+    zoom?: boolean;
+    /** The timeline under the chart: drag its window to move, its edges to zoom. */
+    navigator?: boolean;
+    /** Draws this level as a dashed line (the prior close). */
+    baseline?: number | null;
+    /**
+     * The navigator's bars when they differ from the chart's: the symbol's whole history, coarser,
+     * with the shown span cut out of it. Left out: the chart's own bars.
+     */
+    timeline?: ChartBar[];
+    /** The span to show; a new object moves the chart there, panning and zooming move it after. */
+    range?: TimeSpan;
+    /** The shown span (first and last bar), and whether the person moved it (drag, wheel, timeline). */
+    onRange?: (span: TimeSpan, byPerson: boolean) => void;
+    /** The timeline asked for a span the chart's bars do not cover (intraday bars, older days). */
+    onOutside?: (span: TimeSpan) => void;
+    className?: string;
+}
+/** One chart: price in the chosen type, volume, then a pane per oscillator, all sharing the time axis. */
+export declare function PriceChart({ bars, visible, type, chosen, values, timeZone, zoom, navigator, baseline, timeline, range, onRange, onOutside, className, }: PriceChartProps): import("react").JSX.Element;
+/** Shows the bars inside `span` (at least one), edge to edge. */
+export declare function showSpan(chart: IChartApi, secs: number[], span: TimeSpan): void;
+/**
+ * The timeline under the chart (whole history): the symbol's whole
+ * history as a small area chart, with the span the chart shows cut out of it. Drag the window to
+ * move, drag its edges to zoom, click outside it to jump there. lightweight-charts has no
+ * navigator, so this is a second chart kept in step by time.
+ */
+export declare function Navigator({ chart, bars, secs, timeline, theme, timeZone, multiDay, goTo, }: {
+    chart: IChartApi;
+    bars: ChartBar[];
+    secs: number[];
+    timeline: ChartBar[];
+    theme: Theme;
+    timeZone: string;
+    multiDay: boolean;
+    goTo: (span: TimeSpan) => void;
+}): import("react").JSX.Element;
+export {};