@columenlabs/lumen-ui 0.0.0-stage → 0.2.1

package/dist/lumen-source.js

@@ -0,0 +1,327 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The shared loading contract.
+// Every card and view loads its own data and says so the same way: a skeleton on first load, a thin
+// bar while a view's query runs, the old data on screen (dimmed) while a refresh someone asked for
+// runs (a poll, refetch on focus or other background refresh is silent: the data just updates in
+// place), its own ↻ that
+// reloads just its source past the server cache, a failure kept inside it with Retry, and, with
+// Settings ▸ Preferences ▸ Observability details on, how long it took. TanStack Query is the engine;
+// `useLumenSource` runs one query, `useLumenLoad` reads queries a page already runs, and `LumenStates`
+// draws the states. No component draws its own.
+import { useQuery, } from '@tanstack/react-query';
+import { AlertTriangleIcon, CodeIcon, RefreshCwIcon, RotateCcwIcon } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useInView } from 'react-intersection-observer';
+import { IconButton } from './icon-button.js';
+import { cn } from './lib/utils.js';
+import { timeZoneLabel, usePrefs } from './prefs.js';
+import { withRefreshToken } from './refresh.js';
+import { Alert, AlertAction, AlertDescription, AlertTitle } from './ui/alert.js';
+import { Popover, PopoverContent, PopoverTrigger } from './ui/popover.js';
+import { Progress } from './ui/progress.js';
+import { Skeleton } from './ui/skeleton.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.js';
+const asError = (e) => (e instanceof Error ? e : new Error(String(e)));
+/** Times each load from the moment a request is in flight to the render that shows its data. */
+function useLoadTime(fetching, updatedAt) {
+    const start = useRef(null);
+    const seen = useRef(0);
+    const [time, setTime] = useState({
+        tookMs: null,
+        cached: false,
+    });
+    useEffect(() => {
+        if (fetching) {
+            start.current ??= performance.now();
+            return;
+        }
+        if (updatedAt && updatedAt !== seen.current) {
+            seen.current = updatedAt;
+            const t0 = start.current;
+            setTime(t0 === null
+                ? { tookMs: 0, cached: true }
+                : { tookMs: performance.now() - t0, cached: false });
+        }
+        start.current = null;
+    }, [fetching, updatedAt]);
+    return time;
+}
+/** The loading state of queries a page already runs (rows built from several reads). */
+export function useLumenLoad(...queries) {
+    const latest = useRef(queries);
+    latest.current = queries;
+    const has = queries.every((q) => q.data !== undefined);
+    const failed = queries.find((q) => q.isError);
+    const fetching = queries.some((q) => q.isFetching);
+    const updatedAt = Math.max(0, ...queries.map((q) => q.dataUpdatedAt));
+    const time = useLoadTime(fetching, has ? updatedAt : 0);
+    // A ↻ (or the page's Refresh) is the only refresh that shows; a poll or refetch on focus over data
+    // already on screen updates it in place with no bar, dimming or spin. New inputs showing the old
+    // rows as placeholder still show the bar.
+    const [asked, setAsked] = useState(false);
+    const refresh = useCallback(async () => {
+        setAsked(true);
+        try {
+            await withRefreshToken(() => Promise.all(latest.current.map((q) => q.refetch())));
+        }
+        finally {
+            setAsked(false);
+        }
+    }, []);
+    const poll = useCallback(() => {
+        for (const q of latest.current)
+            void q.refetch();
+    }, []);
+    const quiet = has && !asked && !queries.some((q) => q.isPlaceholderData);
+    const shown = fetching && !quiet;
+    return {
+        loading: !has && !failed,
+        fetching: shown,
+        refreshing: has && shown,
+        background: fetching && quiet,
+        error: !has && failed ? asError(failed.error) : null,
+        stale: has && failed ? asError(failed.error) : null,
+        refresh,
+        poll,
+        tookMs: time.tookMs,
+        cached: time.cached,
+        at: has && updatedAt ? updatedAt : null,
+    };
+}
+/**
+ * Cards that draw one shared source (a view and the widgets over its rows). A card's ↻ still reloads
+ * that source, since every card draws the same rows, but only the card that asked spins, dims and
+ * shows the new load time; the others keep still with their own last time and take the new rows
+ * quietly. A reload no card asked for (the page's Refresh, a refetch) shows on every card. Returns a
+ * function giving each card its own load.
+ */
+export function useCardLoads() {
+    const [owner, setOwner] = useState(null);
+    // When each card's last ↻ ran (ms since epoch): data that landed then is that card's alone.
+    const asked = useRef(new Map());
+    // Each card's own load time, kept while another card's refresh is on screen.
+    const times = useRef(new Map());
+    return useCallback((id, load) => {
+        if (!load)
+            return load;
+        const shown = owner === null || owner === id;
+        const at = load.at;
+        const byOther = !shown ||
+            (at !== null &&
+                [...asked.current].some(([card, r]) => card !== id && at >= r.from && at <= r.to));
+        const kept = times.current.get(id);
+        const time = byOther && kept ? kept : { tookMs: load.tookMs, cached: load.cached, at };
+        times.current.set(id, time);
+        return {
+            ...load,
+            ...time,
+            fetching: load.fetching && shown,
+            refreshing: load.refreshing && shown,
+            background: load.background && shown,
+            refresh: async () => {
+                const from = Date.now();
+                setOwner(id);
+                try {
+                    await load.refresh();
+                }
+                finally {
+                    asked.current.set(id, { from, to: Date.now() });
+                    setOwner(null);
+                }
+            },
+        };
+    }, [owner]);
+}
+/** Runs one source. `lazy` holds the query until the card (`ref`) scrolls into view. */
+export function useLumenSource(options, { lazy = false } = {}) {
+    const { ref, inView } = useInView({ triggerOnce: true, rootMargin: '200px', skip: !lazy });
+    const query = useQuery({ ...options, enabled: lazy && !inView ? false : options.enabled });
+    const load = useLumenLoad(query);
+    return { data: query.data, load, ref };
+}
+/** Mounts `children` once they scroll into view: cards whose data is their own (live market). */
+export function LumenLazy({ children, fallback = _jsx(Skeleton, { className: "h-40 w-full" }), }) {
+    const { ref, inView } = useInView({ triggerOnce: true, rootMargin: '200px' });
+    return _jsx("div", { ref: ref, children: inView ? children : fallback });
+}
+/** The thin indeterminate bar along the top of a view while its query runs. */
+export function LumenProgress({ load }) {
+    if (!load.fetching)
+        return null;
+    return (_jsx(Progress, { "aria-label": "Loading", className: "pointer-events-none absolute inset-x-0 top-0 z-30 h-0.5 rounded-none bg-transparent" }));
+}
+/** ↻ for one card or view: reloads its source past the server cache, spinning while it runs. */
+export function LumenRefresh({ load, label = 'Refresh' }) {
+    return (_jsx(IconButton, { icon: RefreshCwIcon, busy: load.fetching, label: load.refreshLabel ?? `${label} (skip cache)`, disabled: load.fetching, onClick: () => void load.refresh() }));
+}
+const SLOW_MS = 2000;
+/** The load time line (`1.8 s · 412 rows · 12:41:08 Pacific`), only with Observability details on. */
+export function LumenLoadTime({ load, rows, className, }) {
+    const { observability, timeZone } = usePrefs();
+    if (!observability || load.tookMs === null)
+        return null;
+    const when = load.at === null
+        ? ''
+        : new Intl.DateTimeFormat('en-US', {
+            timeZone,
+            hour: 'numeric',
+            minute: '2-digit',
+            second: '2-digit',
+        }).format(load.at);
+    // Whole ms under a second, seconds with one decimal from there.
+    const took = load.tookMs < 1000 ? `${Math.round(load.tookMs)} ms` : `${(load.tookMs / 1000).toFixed(1)} s`;
+    const count = rows === undefined ? null : `${rows.toLocaleString('en-US')} rows`;
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("span", { "data-slot": "lumen-load-time", className: cn('num flex min-w-0 items-center gap-1.5 whitespace-nowrap text-xs text-muted-foreground', className), children: [_jsx("span", { className: cn(load.tookMs > SLOW_MS ? 'text-loss' : 'text-gain'), children: load.cached ? 'cache' : took }), count && _jsxs("span", { children: ["\u00B7 ", count] }), load.refreshing && _jsx("span", { children: "\u00B7 refreshing\u2026" })] }) }), _jsxs(TooltipContent, { children: [load.cached
+                        ? "From this browser's cache, no request"
+                        : `Loaded in ${took}${load.tookMs > SLOW_MS ? ', slow (over 2 s)' : ''}`, when && ` at ${when} ${timeZoneLabel(timeZone)}`, count && ` · ${count}`] })] }));
+}
+/** A failed source, inside its own card, with Retry. */
+export function LumenError({ error, onRetry }) {
+    return (_jsxs(Alert, { variant: "destructive", children: [_jsx(AlertTriangleIcon, {}), _jsx(AlertTitle, { children: "Could not load" }), _jsx(AlertDescription, { className: "num text-xs break-words", children: error.message }), onRetry && (_jsx(AlertAction, { children: _jsx(IconButton, { icon: RotateCcwIcon, label: "Retry", variant: "outline", onClick: onRetry }) }))] }));
+}
+/** Rows of skeleton the height of a table, so nothing jumps when the data lands. */
+export function LumenSkeleton({ rows = 6, className }) {
+    return (_jsx("div", { "aria-busy": "true", "aria-label": "Loading", className: cn('flex flex-col gap-2 p-3', className), children: Array.from({ length: rows }, (_, i) => (_jsx(Skeleton, { className: "h-7 w-full" }, i))) }));
+}
+/** One component's states from its load: bar (views), skeleton, error with Retry, empty, then the
+ *  content, dimmed while it refreshes. Place it at the top of a `relative` card body. */
+export function LumenStates({ load, kind = 'table', skeleton, empty, children, }) {
+    return (_jsxs(_Fragment, { children: [kind === 'table' && _jsx(LumenProgress, { load: load }), load.error ? (_jsx("div", { className: "p-3", children: _jsx(LumenError, { error: load.error, onRetry: () => void load.refresh() }) })) : load.loading ? ((skeleton ?? (kind === 'table' ? _jsx(LumenSkeleton, {}) : _jsx(Skeleton, { className: "h-40 w-full" })))) : empty ? (empty) : (_jsx("div", { className: cn('contents [&>*]:transition-opacity', load.refreshing && '[&>*]:opacity-70'), children: children }))] }));
+}
+/** A card's footer line with its load time, rows and clock time, only with Observability details on. */
+export function LumenLoadFooter({ load, rows, note, }) {
+    const { observability, timeZone } = usePrefs();
+    if (!observability || load.tookMs === null)
+        return null;
+    return (_jsx("div", { "data-slot": "lumen-load-footer", className: "shrink-0 border-t border-dashed", children: _jsx(LumenLoadTimeLine, { load: load, rows: rows, note: note, timeZone: timeZone }) }));
+}
+const FRESH_LIVE_MS = 5 * 60_000;
+/** How often a view showing live columns reads its source again while the market trades. */
+export const LIVE_POLL_MS = 60_000;
+/**
+ * When US stocks trade at all: pre-market, the session, after-hours and the
+ * overnight session run from 8:00 PM New York on Sunday to 8:00 PM on Friday (holidays not known here).
+ */
+export function marketTrades(at = Date.now()) {
+    const p = Object.fromEntries(new Intl.DateTimeFormat('en-US', {
+        timeZone: 'America/New_York',
+        weekday: 'short',
+        hour: 'numeric',
+        minute: 'numeric',
+        hourCycle: 'h23',
+    })
+        .formatToParts(at)
+        .map((x) => [x.type, x.value]));
+    const evening = Number(p.hour) >= 20;
+    if (p.weekday === 'Sat')
+        return false;
+    if (p.weekday === 'Sun')
+        return evening;
+    return p.weekday !== 'Fri' || !evening;
+}
+/**
+ * A view's load while it shows live columns (#861): while the market trades and
+ * the tab shows, it reads its source again every minute, quietly, and the card's header carries the
+ * green signal dot (Live, with when it last updated). Extended hours and overnight poll too (the
+ * app's feed decides whether prices move then); over the weekend nothing polls.
+ */
+export function useLiveLoad(load, live) {
+    const [open, setOpen] = useState(() => marketTrades());
+    const poll = load?.poll;
+    const on = live && open && !!poll;
+    useEffect(() => {
+        if (!live)
+            return;
+        const t = setInterval(() => setOpen(marketTrades()), 30_000);
+        return () => clearInterval(t);
+    }, [live]);
+    useEffect(() => {
+        if (!on || !poll)
+            return;
+        const t = setInterval(() => {
+            if (document.visibilityState === 'visible')
+                poll();
+        }, LIVE_POLL_MS);
+        return () => clearInterval(t);
+    }, [on, poll]);
+    if (!load || !on || load.updated || load.at === null)
+        return load;
+    return {
+        ...load,
+        updated: {
+            at: load.at,
+            kind: 'live',
+            about: 'Live columns update every minute, extended hours included',
+        },
+    };
+}
+/** How long ago, in words: `just now`, `3 min ago`, `2 h ago`, `4 d ago`. */
+function ago(ms) {
+    const m = Math.floor(ms / 60_000);
+    if (m < 1)
+        return 'just now';
+    if (m < 60)
+        return `${m} min ago`;
+    const h = Math.floor(m / 60);
+    return h < 24 ? `${h} h ago` : `${Math.floor(h / 24)} d ago`;
+}
+/**
+ * The card header's signal dot for a source with its own update time (`load.updated`): green while
+ * fresh, amber once stale (worth a ↻), red when its last update failed, grey for data that never
+ * updates; hover (a tap on phone) says when, what and why.
+ */
+export function LumenFreshness({ load }) {
+    const { timeZone } = usePrefs();
+    const [now, setNow] = useState(() => Date.now());
+    const [open, setOpen] = useState(false);
+    useEffect(() => {
+        const t = setInterval(() => setNow(Date.now()), 60_000);
+        return () => clearInterval(t);
+    }, []);
+    const u = load.updated;
+    if (!u)
+        return null;
+    const kind = u.kind ?? 'asof';
+    const age = now - u.at;
+    const sameDay = (a, b) => new Intl.DateTimeFormat('en-US', { timeZone, dateStyle: 'short' }).format(a) ===
+        new Intl.DateTimeFormat('en-US', { timeZone, dateStyle: 'short' }).format(b);
+    const state = u.error
+        ? 'failed'
+        : kind === 'fixed'
+            ? 'fixed'
+            : (kind === 'live' ? age < FRESH_LIVE_MS : sameDay(u.at, now))
+                ? 'fresh'
+                : 'stale';
+    const dot = {
+        fresh: 'bg-gain',
+        stale: 'bg-amber-500',
+        failed: 'bg-loss',
+        fixed: 'bg-muted-foreground/50',
+    }[state];
+    const when = new Intl.DateTimeFormat('en-US', {
+        timeZone,
+        month: 'short',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit',
+    }).format(u.at);
+    const label = {
+        fresh: 'Up to date',
+        stale: 'Not updated recently',
+        failed: 'Last update failed',
+        fixed: 'Does not update',
+    }[state];
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", "data-slot": "lumen-freshness", "aria-label": `${label}: updated ${when}`, className: "flex size-6 shrink-0 items-center justify-center rounded-md hover:bg-accent", onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false), children: _jsx("span", { className: cn('size-2 rounded-full', dot) }) }) }), _jsxs(PopoverContent, { align: "end", className: "w-72 space-y-1 p-3 text-xs", onOpenAutoFocus: (e) => e.preventDefault(), onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false), children: [_jsxs("div", { className: "flex items-center gap-1.5 font-medium text-foreground", children: [_jsx("span", { className: cn('size-2 rounded-full', dot) }), label] }), _jsxs("div", { className: "num text-muted-foreground", children: ["Updated ", when, " (", ago(age), ")"] }), u.about && _jsx("div", { className: "text-muted-foreground", children: u.about }), u.error && _jsx("div", { className: "break-words text-loss", children: u.error }), kind !== 'fixed' && load.refreshLabel && (_jsxs("div", { className: "text-muted-foreground", children: ["\u21BB ", load.refreshLabel] })), load.editScript && (_jsx(IconButton, { icon: CodeIcon, label: "See and edit the script", variant: "outline", onClick: () => {
+                            setOpen(false);
+                            load.editScript?.();
+                        } }))] })] }));
+}
+/** The Observability line of the footer: load time, rows or a note, and the clock time. */
+function LumenLoadTimeLine({ load, rows, note, timeZone, }) {
+    return (_jsxs("div", { className: "flex h-7 items-center gap-2 overflow-hidden px-3", children: [_jsx(LumenLoadTime, { load: load, rows: note ? undefined : rows }), note && _jsxs("span", { className: "truncate text-xs text-muted-foreground", children: ["\u00B7 ", note] }), load.at !== null && (_jsx("span", { className: "num ml-auto shrink-0 whitespace-nowrap text-xs text-muted-foreground", children: new Intl.DateTimeFormat('en-US', {
+                    timeZone,
+                    hour: 'numeric',
+                    minute: '2-digit',
+                    second: '2-digit',
+                }).format(load.at) }))] }));
+}

package/dist/lumen-tab-drawer.d.ts

@@ -0,0 +1,27 @@
+import type { ViewIcon } from '@columenlabs/lumen-ui-types/views';
+import type { NavIcon } from './nav.js';
+/** A tab's name, at most this long unless the app keeps longer ones. */
+export declare const TAB_NAME_MAX = 30;
+export declare function LumenTabDrawer({ open, onClose, name, icon, fallback, description, onSave, busy, error, remove, maxName, }: {
+    open: boolean;
+    onClose: () => void;
+    name: string;
+    icon: ViewIcon | null | undefined;
+    /** The icon shown with none picked. */
+    fallback: NavIcon;
+    description?: string;
+    onSave: (next: {
+        name: string;
+        icon: ViewIcon | null;
+    }) => void;
+    busy?: boolean;
+    /** A failed save, under the fields. */
+    error?: string | null;
+    /** The footer's Remove: what goes and what stays. Left out, the tab cannot be removed here. */
+    remove?: {
+        description: string;
+        onRemove: () => void;
+    };
+    /** The longest name this app keeps. */
+    maxName?: number;
+}): import("react").JSX.Element;

package/dist/lumen-tab-drawer.js

@@ -0,0 +1,26 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Trash2Icon } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { LumenConfirm } from './confirm.js';
+import { SaveButton } from './form-issues.js';
+import { IconButton } from './icon-button.js';
+import { IconPicker } from './icon-picker.js';
+import { LumenDrawer } from './lumen-drawer.js';
+import { Button } from './ui/button.js';
+import { Input } from './ui/input.js';
+/** A tab's name, at most this long unless the app keeps longer ones. */
+export const TAB_NAME_MAX = 30;
+export function LumenTabDrawer({ open, onClose, name, icon, fallback, description = 'Its filters and columns save as you change them.', onSave, busy, error, remove, maxName = TAB_NAME_MAX, }) {
+    const [typed, setTyped] = useState(name);
+    const [picked, setPicked] = useState(icon ?? null);
+    // A drawer opened again starts from the tab as it is now.
+    useEffect(() => {
+        if (open) {
+            setTyped(name);
+            setPicked(icon ?? null);
+        }
+    }, [open, name, icon]);
+    const next = typed.trim();
+    const changed = next !== name || picked !== (icon ?? null);
+    return (_jsxs(LumenDrawer, { open: open, onClose: onClose, title: "Tab", description: description, footer: _jsxs(_Fragment, { children: [remove && (_jsx(LumenConfirm, { title: `Remove tab ${name}?`, description: remove.description, action: "Remove", onConfirm: remove.onRemove, children: _jsx(IconButton, { icon: Trash2Icon, label: "Remove tab", variant: "destructive" }) })), _jsx(Button, { variant: "outline", size: "sm", onClick: onClose, children: "Cancel" }), _jsx(SaveButton, { issues: next ? [] : [{ where: 'Name', message: 'Give it a name', target: 'lumen-tab-name' }], disabled: !changed, busy: busy, onSave: () => onSave({ name: next, icon: picked }) })] }), children: [_jsxs("div", { className: "grid grid-cols-[7rem_minmax(0,1fr)] items-center gap-2 pt-2 text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: "Name" }), _jsx(Input, { id: "lumen-tab-name", className: "h-8", value: typed, maxLength: maxName, onChange: (e) => setTyped(e.target.value) }), _jsx("span", { className: "text-muted-foreground", children: "Icon" }), _jsx("div", { children: _jsx(IconPicker, { value: picked, onChange: setPicked, fallback: fallback, label: "Tab icon", variant: "outline" }) })] }), error && _jsx("p", { className: "pt-2 text-sm text-destructive", children: error })] }));
+}

package/dist/lumen-tabs.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+import type { NavIcon } from './nav.js';
+/**
+ * One tab: its icon, its name and a count or mark after it. Every tab has an icon; a tab the person edits takes theirs through `iconOf` and LumenTabDrawer.
+ */
+export interface LumenTab<V extends string = string> {
+    value: V;
+    label: ReactNode;
+    icon: NavIcon;
+    /** After the name: a count, a dot. */
+    after?: ReactNode;
+    /** Left out of the row (a tab this page does not have). */
+    hidden?: boolean;
+}
+export declare function LumenTabs<V extends string>({ tabs, value, onChange, actions, }: {
+    tabs: LumenTab<V>[];
+    value: V | undefined;
+    onChange: (value: V) => void;
+    /** What only the open tab uses, at the row's right end. */
+    actions?: ReactNode;
+}): import("react").JSX.Element;

package/dist/lumen-tabs.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tabs, TabsList, TabsTrigger } from './ui/tabs.js';
+export function LumenTabs({ tabs, value, onChange, actions, }) {
+    const shown = tabs.filter((t) => !t.hidden);
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("div", { className: "min-w-48 max-w-full flex-1", children: shown.length ? (_jsx(Tabs, { value: value, onValueChange: (v) => onChange(v), children: _jsx(TabsList, { className: "max-w-full overflow-x-auto", children: shown.map(({ value: v, label, icon: Icon, after }) => (_jsxs(TabsTrigger, { value: v, children: [_jsx(Icon, {}), label, after] }, v))) }) })) : null }), actions ? _jsx("div", { className: "ml-auto flex shrink-0 items-center gap-0.5", children: actions }) : null] }));
+}

package/dist/lumen-toast.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import { type ExternalToast } from 'sonner';
+export declare const lumenToast: ((message: ReactNode, options?: ExternalToast) => string | number) & {
+    success: (message: ((() => React.ReactNode) | ReactNode) | React.ReactNode, data?: ExternalToast) => string | number;
+    error: (message: ((() => React.ReactNode) | ReactNode) | React.ReactNode, data?: ExternalToast) => string | number;
+    warning: (message: ((() => React.ReactNode) | ReactNode) | React.ReactNode, data?: ExternalToast) => string | number;
+    info: (message: ((() => React.ReactNode) | ReactNode) | React.ReactNode, data?: ExternalToast) => string | number;
+    dismiss: (id?: number | string) => string | number;
+    /** A change done, with Undo that puts it back. */
+    undo: (message: ReactNode, onUndo: () => void, options?: ExternalToast) => string | number;
+};

package/dist/lumen-toast.js

@@ -0,0 +1,16 @@
+import { toast } from 'sonner';
+/** How long a toast with Undo stays up, so there is time to press it. */
+const UNDO_MS = 6000;
+export const lumenToast = Object.assign((message, options) => toast(message, options), {
+    success: toast.success,
+    error: toast.error,
+    warning: toast.warning,
+    info: toast.info,
+    dismiss: toast.dismiss,
+    /** A change done, with Undo that puts it back. */
+    undo: (message, onUndo, options) => toast(message, {
+        duration: UNDO_MS,
+        ...options,
+        action: { label: 'Undo', onClick: onUndo },
+    }),
+});

package/dist/lumen-trend.d.ts

@@ -0,0 +1,18 @@
+import { type TrendBucket, type TrendStyle } from '@columenlabs/lumen-ui-types/views';
+import type { ViewCellValue, ViewField } from './view-model.js';
+/** A row's date as a bucket key (`2026-10-16`, `2026-10-12` the week's Monday, `2026-10`, `2026`). */
+export declare function bucketOf(v: ViewCellValue, bucket: TrendBucket): string | null;
+type Agg = 'sum' | 'mean' | 'last' | 'count';
+/** The rows rolled up per bucket, oldest first: `{at, v0, v1, ...}`. */
+export declare function trendPoints<T>(rows: T[], date: ViewField<T>, values: ViewField<T>[], bucket: TrendBucket, agg: Agg, read: (f: ViewField<T>, r: T) => ViewCellValue): Record<string, string | number>[];
+export declare function TrendBody<T>({ style, date, values, bucket, agg, rows, read, legend, }: {
+    style: TrendStyle;
+    date: ViewField<T>;
+    values: ViewField<T>[];
+    bucket: TrendBucket;
+    agg: Agg;
+    rows: T[];
+    read: (f: ViewField<T>, r: T) => ViewCellValue;
+    legend?: boolean;
+}): import("react").JSX.Element;
+export {};

package/dist/lumen-trend.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Trend widgets: up to 4 number fields over a date field of the view's rows, rolled up per day, week,
+// month or year, drawn as a line, area, stacked area, bars over time, combo, a spark or a tracker.
+// With the allocation, donut, bars and card styles they cover every Tremor visualization, drawn on
+// our own Recharts in ChartContainer. Worked out in the browser from the rows; nothing is fetched.
+import { isDollarFormat, } from '@columenlabs/lumen-ui-types/views';
+import { useMemo } from 'react';
+import { Area, AreaChart, Bar, BarChart, CartesianGrid, ComposedChart, Line, LineChart, XAxis, YAxis, } from 'recharts';
+import { cn } from './lib/utils.js';
+import { Headline } from './lumen-widget-charts.js';
+import { maskAmount, useAmountsHidden } from './shell.js';
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, } from './ui/chart.js';
+const MINUS = '−';
+const COMPACT = new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 });
+// Chart 2 is skipped: it is green, and an app whose accent (chart 1) is green drew its first two
+// series alike (an app's Income and Spend).
+const COLORS = [1, 3, 4, 5].map((i) => `var(--chart-${i})`);
+/** Blocks a tracker shows, the newest last. */
+const TRACKER_MAX = 60;
+function short(v, format, hidden) {
+    if (hidden)
+        return maskAmount('0');
+    const sign = v < 0 ? MINUS : '';
+    const abs = Math.abs(v);
+    if (format === 'percent' || format === 'weight')
+        return `${sign}${abs.toFixed(1)}%`;
+    if (isDollarFormat(format))
+        return `${sign}$${COMPACT.format(abs)}`;
+    return `${sign}${COMPACT.format(abs)}`;
+}
+/** A row's date as a bucket key (`2026-10-16`, `2026-10-12` the week's Monday, `2026-10`, `2026`). */
+export function bucketOf(v, bucket) {
+    if (v === null || v === '')
+        return null;
+    const ms = typeof v === 'number' ? v : Date.parse(String(v).length === 10 ? `${v}T12:00:00Z` : String(v));
+    if (!Number.isFinite(ms))
+        return null;
+    const d = new Date(ms);
+    const day = d.toISOString().slice(0, 10);
+    if (bucket === 'day')
+        return day;
+    if (bucket === 'month')
+        return day.slice(0, 7);
+    if (bucket === 'year')
+        return day.slice(0, 4);
+    const back = (d.getUTCDay() + 6) % 7;
+    return new Date(ms - back * 86_400_000).toISOString().slice(0, 10);
+}
+/** The rows rolled up per bucket, oldest first: `{at, v0, v1, ...}`. */
+export function trendPoints(rows, date, values, bucket, agg, read) {
+    const m = new Map();
+    // Rows in date order, so `last` is the latest in each bucket.
+    const dated = rows
+        .map((r) => ({ r, at: bucketOf(read(date, r), bucket), raw: String(read(date, r) ?? '') }))
+        .filter((x) => x.at !== null)
+        .sort((a, b) => a.raw.localeCompare(b.raw));
+    for (const { r, at } of dated) {
+        const b = m.get(at) ?? {
+            sum: values.map(() => 0),
+            n: values.map(() => 0),
+            last: values.map(() => 0),
+        };
+        values.forEach((f, i) => {
+            const v = read(f, r);
+            if (agg === 'count') {
+                b.n[i] = (b.n[i] ?? 0) + 1;
+                return;
+            }
+            if (typeof v !== 'number' || !Number.isFinite(v))
+                return;
+            b.sum[i] = (b.sum[i] ?? 0) + v;
+            b.n[i] = (b.n[i] ?? 0) + 1;
+            b.last[i] = v;
+        });
+        m.set(at, b);
+    }
+    return [...m]
+        .sort(([a], [b]) => a.localeCompare(b))
+        .map(([at, b]) => {
+        const out = { at };
+        values.forEach((_, i) => {
+            const n = b.n[i] ?? 0;
+            out[`v${i}`] =
+                agg === 'count'
+                    ? n
+                    : agg === 'mean'
+                        ? n
+                            ? (b.sum[i] ?? 0) / n
+                            : 0
+                        : agg === 'last'
+                            ? (b.last[i] ?? 0)
+                            : (b.sum[i] ?? 0);
+        });
+        return out;
+    });
+}
+/** A bucket key as an axis label: `Oct 16`, `Oct 2026`, `2026`. */
+function tick(at, bucket) {
+    if (bucket === 'year')
+        return at;
+    if (bucket === 'month')
+        return new Date(`${at}-15T12:00:00Z`).toLocaleDateString('en-US', {
+            month: 'short',
+            year: '2-digit',
+            timeZone: 'UTC',
+        });
+    return new Date(`${at}T12:00:00Z`).toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        timeZone: 'UTC',
+    });
+}
+export function TrendBody({ style, date, values, bucket, agg, rows, read, legend = true, }) {
+    const hidden = useAmountsHidden();
+    const points = useMemo(() => trendPoints(rows, date, values, bucket, agg, read), [rows, date, values, bucket, agg, read]);
+    const first = values[0];
+    if (!points.length || !first)
+        return _jsx("p", { className: "py-6 text-center text-sm text-muted-foreground", children: "No dated rows to draw." });
+    const masked = (f) => hidden && !!f.amount && agg !== 'count';
+    const fmt = (v, f = first) => short(v, agg === 'count' ? 'rounded' : f.format, masked(f));
+    const config = Object.fromEntries(values.map((f, i) => [
+        `v${i}`,
+        { label: agg === 'count' ? `${f.label} (count)` : f.label, color: COLORS[i] },
+    ]));
+    const last = Number(points[points.length - 1]?.v0 ?? 0);
+    const start = Number(points[0]?.v0 ?? 0);
+    if (style === 'tracker') {
+        // One block per bucket, the newest last: green where the first value rose or is positive.
+        const shown = points.slice(-TRACKER_MAX);
+        const up = shown.filter((p) => Number(p.v0) > 0).length;
+        return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Headline, { value: fmt(last), caption: `${first.label} · ${up} of ${shown.length} ${bucket}s up`, tone: last > 0 ? 'gain' : last < 0 ? 'loss' : undefined }), _jsx("div", { className: "flex h-8 w-full gap-0.5", role: "img", "aria-label": `${first.label} by ${bucket}`, children: shown.map((p) => {
+                        const v = Number(p.v0);
+                        return (_jsx("span", { title: `${tick(String(p.at), bucket)} · ${fmt(v)}`, className: cn('h-full min-w-0 flex-1 rounded-[2px]', v > 0 ? 'bg-gain' : v < 0 ? 'bg-loss' : 'bg-muted') }, String(p.at)));
+                    }) })] }));
+    }
+    if (style === 'spark') {
+        const change = last - start;
+        return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Headline, { value: fmt(last), caption: `${change >= 0 ? '+' : ''}${fmt(change)} since ${tick(String(points[0]?.at), bucket)}`, tone: change > 0 ? 'gain' : change < 0 ? 'loss' : undefined }), _jsx(ChartContainer, { config: config, className: "aspect-auto h-12 w-full", children: _jsx(AreaChart, { data: points, margin: { left: 0, right: 0, top: 2, bottom: 2 }, children: _jsx(Area, { dataKey: "v0", type: "monotone", stroke: "var(--color-v0)", fill: "var(--color-v0)", fillOpacity: 0.15, strokeWidth: 1.5, isAnimationActive: false }) }) })] }));
+    }
+    const axes = [
+        _jsx(CartesianGrid, { vertical: false, strokeDasharray: "3 3" }, "g"),
+        _jsx(XAxis, { dataKey: "at", tickLine: false, axisLine: false, minTickGap: 24, tickFormatter: (v) => tick(String(v), bucket), fontSize: 11 }, "x"),
+        _jsx(YAxis, { tickLine: false, axisLine: false, width: 48, tickFormatter: (v) => fmt(Number(v)), fontSize: 11 }, "y"),
+        _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { labelFormatter: (v) => tick(String(v), bucket), formatter: (v, name) => {
+                    const i = Number(String(name).slice(1));
+                    const f = values[i] ?? first;
+                    return (_jsxs("span", { className: "flex w-full items-center gap-2", children: [_jsx("span", { className: "size-2 shrink-0 rounded-full", style: { background: COLORS[i] } }), _jsx("span", { className: "truncate", children: config[String(name)]?.label }), _jsx("span", { className: "num ml-auto pl-3", children: fmt(Number(v), f) })] }));
+                } }) }, "t"),
+        ...(legend && values.length > 1
+            ? [_jsx(ChartLegend, { content: _jsx(ChartLegendContent, {}) }, "l")]
+            : []),
+    ];
+    const lead = (_jsx(Headline, { value: fmt(last), caption: `${config.v0?.label} · ${tick(String(points[points.length - 1]?.at), bucket)}` }));
+    const box = 'aspect-auto h-56 w-full';
+    const keys = values.map((_, i) => `v${i}`);
+    return (_jsxs("div", { className: "flex flex-col", children: [lead, _jsx(ChartContainer, { config: config, className: box, children: style === 'bars' ? (_jsxs(BarChart, { data: points, margin: { left: 0, right: 4 }, children: [axes, keys.map((k) => (_jsx(Bar, { dataKey: k, fill: `var(--color-${k})`, radius: 2, isAnimationActive: false }, k)))] })) : style === 'combo' ? (_jsxs(ComposedChart, { data: points, margin: { left: 0, right: 4 }, children: [axes, keys.map((k, i) => i === 0 ? (_jsx(Bar, { dataKey: k, fill: `var(--color-${k})`, radius: 2, isAnimationActive: false }, k)) : (_jsx(Line, { dataKey: k, type: "monotone", stroke: `var(--color-${k})`, strokeWidth: 1.5, dot: false, isAnimationActive: false }, k)))] })) : style === 'area' || style === 'stacked' ? (_jsxs(AreaChart, { data: points, margin: { left: 0, right: 4 }, children: [axes, keys.map((k) => (_jsx(Area, { dataKey: k, type: "monotone", stackId: style === 'stacked' ? 'a' : undefined, stroke: `var(--color-${k})`, fill: `var(--color-${k})`, fillOpacity: 0.15, strokeWidth: 1.5, isAnimationActive: false }, k)))] })) : (_jsxs(LineChart, { data: points, margin: { left: 0, right: 4 }, children: [axes, keys.map((k) => (_jsx(Line, { dataKey: k, type: "monotone", stroke: `var(--color-${k})`, strokeWidth: 1.5, dot: false, isAnimationActive: false }, k)))] })) })] }));
+}