@columenlabs/lumen-ui 0.0.0-stage → 0.2.1

package/dist/overview.js

@@ -0,0 +1,105 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// An app's Overview: a service-health page, not a decisions page. A stage map
+// (each stage a chip with its status dot, name and a one-line verdict; arrows between; tap one to
+// focus it) and then each stage's widgets, one LumenLayout card each with its own ↻ and states
+// (on LumenLayout). Apps pass only their stages and data; the
+// widget kinds are fixed here (stat, ring, bars, timeline), drawn with Recharts in shadcn's
+// ChartContainer. An app is the first user (Queue, Runner, Results); an app's
+// Overview moves onto it later (Sources, Pipelines, Storage, Coverage).
+import { ArrowRightIcon, TriangleAlertIcon } from 'lucide-react';
+import { Fragment, useState } from 'react';
+import { Bar, BarChart, Cell, Label, Pie, PieChart, XAxis, YAxis } from 'recharts';
+import { cn } from './lib/utils.js';
+import { LumenLayout } from './lumen-layout.js';
+import { Badge } from './ui/badge.js';
+import { Button } from './ui/button.js';
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from './ui/chart.js';
+const DOT = {
+    ok: 'bg-gain',
+    warn: 'bg-warning',
+    bad: 'bg-destructive',
+    idle: 'bg-muted-foreground',
+};
+const FILL = {
+    ok: 'var(--gain)',
+    warn: 'var(--warning)',
+    bad: 'var(--destructive)',
+    idle: 'var(--primary)',
+};
+/** A stage's status mark: a dot, or ▲ when it needs a look. */
+export function ToneDot({ tone, className }) {
+    if (tone === 'warn' || tone === 'bad') {
+        return (_jsx(TriangleAlertIcon, { "aria-hidden": true, className: cn('size-3.5 shrink-0', tone === 'warn' ? 'text-warning' : 'text-destructive') }));
+    }
+    return (_jsx("span", { "aria-hidden": true, className: cn('inline-block size-2 shrink-0 rounded-full', DOT[tone]) }));
+}
+/** Label and value rows for a widget's detail (schedules and their last tick, latencies). */
+export function OverviewList({ items, }) {
+    return (_jsx("dl", { className: "flex min-w-0 flex-col gap-0.5 text-xs", children: items.map((it, i) => (_jsxs("div", { className: cn('flex justify-between gap-2', it.tone === 'warn' && 'text-warning', it.tone === 'bad' && 'text-destructive'), children: [_jsx("dt", { className: "truncate", children: it.label }), _jsx("dd", { className: "num shrink-0 text-muted-foreground", children: it.value })] }, i))) }));
+}
+function Ring({ ring, size }) {
+    return (_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-3", children: [ring.rings.map((r) => {
+                const v = Math.max(0, Math.min(1, r.value));
+                const data = [
+                    { key: 'value', value: v, fill: FILL[r.tone ?? 'idle'] },
+                    { key: 'rest', value: 1 - v, fill: 'var(--muted)' },
+                ];
+                return (_jsx(ChartContainer, { config: { value: { label: r.label } }, className: "aspect-square shrink-0", style: { width: size, height: size }, role: "img", "aria-label": `${r.label} ${r.text}`, children: _jsx(PieChart, { children: _jsxs(Pie, { data: data, dataKey: "value", nameKey: "key", innerRadius: size / 2 - 9, outerRadius: size / 2 - 2, startAngle: 90, endAngle: -270, strokeWidth: 0, isAnimationActive: false, children: [data.map((d) => (_jsx(Cell, { fill: d.fill }, d.key))), _jsx(Label, { content: ({ viewBox }) => {
+                                        if (!viewBox || !('cx' in viewBox))
+                                            return null;
+                                        const many = ring.rings.length > 1;
+                                        return (_jsxs("text", { x: viewBox.cx, y: viewBox.cy, textAnchor: "middle", children: [_jsx("tspan", { x: viewBox.cx, dy: many ? '-0.1em' : '0.35em', className: "fill-foreground font-mono text-[11px]", children: r.text }), many && (_jsx("tspan", { x: viewBox.cx, dy: "1.2em", className: "fill-muted-foreground text-[9px]", children: r.label }))] }));
+                                    } })] }) }) }, r.label));
+            }), ring.detail && _jsx("div", { className: "min-w-36 flex-1", children: ring.detail })] }));
+}
+function Bars({ w }) {
+    const config = { value: { label: 'Value', color: 'var(--chart-1)' } };
+    return (_jsx(ChartContainer, { config: config, className: "aspect-auto h-16 w-full", children: _jsxs(BarChart, { data: w.bars, margin: { top: 2, right: 0, bottom: 0, left: 0 }, children: [_jsx(XAxis, { dataKey: "label", hide: true }), _jsx(YAxis, { hide: true, domain: [0, 'dataMax'] }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, { hideIndicator: true, formatter: (v) => (w.format ? w.format(Number(v)) : String(v)) }) }), _jsx(Bar, { dataKey: "value", fill: "var(--color-value)", radius: 2, isAnimationActive: false })] }) }));
+}
+/** Busy blocks over a window: one stacked bar of idle and busy segments, in order. */
+function Timeline({ w }) {
+    const span = Math.max(1, w.to - w.from);
+    const segments = [];
+    let at = w.from;
+    const blocks = [...w.blocks]
+        .map((b) => ({ start: Math.max(w.from, b.start), end: Math.min(w.to, b.end) }))
+        .filter((b) => b.end > b.start)
+        .sort((a, b) => a.start - b.start);
+    for (const b of blocks) {
+        const start = Math.max(at, b.start);
+        if (b.end <= start)
+            continue;
+        if (start > at)
+            segments.push({ key: `s${segments.length}`, size: start - at, busy: false });
+        segments.push({ key: `s${segments.length}`, size: b.end - start, busy: true });
+        at = b.end;
+    }
+    if (at < w.to)
+        segments.push({ key: `s${segments.length}`, size: w.to - at, busy: false });
+    const row = Object.fromEntries(segments.map((s) => [s.key, s.size / span]));
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(ChartContainer, { config: {}, className: "aspect-auto h-6 w-full", children: _jsxs(BarChart, { data: [row], layout: "vertical", margin: { top: 0, right: 0, bottom: 0, left: 0 }, barCategoryGap: 0, children: [_jsx(XAxis, { type: "number", hide: true, domain: [0, 1] }), _jsx(YAxis, { type: "category", hide: true }), segments.map((s, i) => (_jsx(Bar, { dataKey: s.key, stackId: "t", fill: s.busy ? 'var(--chart-1)' : 'var(--muted)', radius: i === 0 ? [3, 0, 0, 3] : i === segments.length - 1 ? [0, 3, 3, 0] : 0, isAnimationActive: false }, s.key)))] }) }), _jsx("div", { className: "relative h-4 text-[10px] text-muted-foreground", children: w.ticks.map((t) => (_jsx("span", { className: "num absolute -translate-x-1/2 first:translate-x-0 last:-translate-x-full", style: { left: `${((t.at - w.from) / span) * 100}%` }, children: t.label }, t.at))) })] }));
+}
+/** A widget's body: the card's frame, title and ↻ come from LumenLayout. */
+function WidgetBody({ w }) {
+    return (_jsxs("div", { "data-widget": w.id, className: "flex min-w-0 flex-col gap-1.5", children: [w.aside && _jsx("span", { className: "num text-xs text-muted-foreground", children: w.aside }), w.kind === 'stat' && (_jsxs(_Fragment, { children: [w.value !== undefined && (_jsx("span", { className: "num truncate text-xl leading-7 font-semibold", children: w.value })), w.detail] })), w.kind === 'ring' && _jsx(Ring, { ring: w, size: w.rings.length > 1 ? 64 : 56 }), w.kind === 'bars' && _jsx(Bars, { w: w }), w.kind === 'timeline' && _jsx(Timeline, { w: w }), w.caption && _jsx("span", { className: "text-xs text-muted-foreground", children: w.caption })] }));
+}
+/** A stage's widgets fill one row of thirds; four go two by two. */
+const widthOf = (count) => (count === 3 ? 2 : 3);
+/** The Overview on LumenLayout: the stage map leads, each widget is a card. */
+export function OverviewPage({ stages, load, updated }) {
+    const [focus, setFocus] = useState(null);
+    const warnings = stages.filter((s) => s.tone === 'warn' || s.tone === 'bad').length;
+    const shown = focus ? stages.filter((s) => s.id === focus) : stages;
+    const cards = stages.length
+        ? shown.flatMap((s) => s.widgets.map((w) => ({
+            id: `${s.id}-${w.id}`,
+            title: w.label,
+            kind: 'widget',
+            w: widthOf(s.widgets.length),
+            load: s.load ?? load,
+            tools: (w.tone === 'warn' || w.tone === 'bad') && _jsx(ToneDot, { tone: w.tone }),
+            children: _jsx(WidgetBody, { w: w }),
+        })))
+        : [{ id: 'overview', title: 'Overview', kind: 'widget', load, children: null }];
+    return (_jsx(LumenLayout, { crumbs: [{ label: 'Overview' }], meta: _jsxs(_Fragment, { children: [warnings > 0 && (_jsxs(Badge, { variant: "outline", className: "border-warning/40 text-warning", children: [_jsx(TriangleAlertIcon, {}), warnings, " ", warnings === 1 ? 'warning' : 'warnings'] })), updated] }), intro: stages.length > 0 && (_jsxs("fieldset", { className: "m-0 flex min-w-0 flex-nowrap items-center gap-1 overflow-x-auto overflow-y-hidden border-0 p-0 sm:gap-1.5", children: [_jsx("legend", { className: "sr-only", children: "Stages" }), stages.map((s, i) => (_jsxs(Fragment, { children: [_jsxs(Button, { variant: "outline", "aria-pressed": focus === s.id, onClick: () => setFocus(focus === s.id ? null : s.id), className: cn('h-9 shrink-0 gap-1.5 px-2.5 sm:h-11 sm:gap-2 sm:px-3', focus === s.id && 'border-primary bg-primary/10', s.tone === 'warn' && focus !== s.id && 'border-warning/60', s.tone === 'bad' && focus !== s.id && 'border-destructive/60'), children: [_jsx(ToneDot, { tone: s.tone }), s.name, _jsx("span", { className: "hidden text-xs font-normal text-muted-foreground sm:inline", children: s.verdict })] }), i < stages.length - 1 && (_jsx(ArrowRightIcon, { "aria-hidden": true, className: "size-3.5 shrink-0 text-muted-foreground sm:size-4" }))] }, s.id)))] })), cards: cards }));
+}

package/dist/page-inputs.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+export declare function PageInputs({ summary, label, children, }: {
+    /** What is picked, short: `1Y`, `Q2 2026`, `AAPL · 2024–2026`. */
+    summary: ReactNode;
+    /** The picker's name: its tooltip and accessible name. */
+    label?: string;
+    /** The inputs, one per line, each with its own label. */
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** One input in the picker: its label above it. */
+export declare function PageInput({ label, children }: {
+    label: string;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/page-inputs.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A page's load inputs:
+// what decides which rows load (a window, a quarter, an expiry, an explorer view's symbol and
+// range, a calendar week) is one compact picker among the page header's icons (or at the right of
+// the tab row, `LumenTabs`, when only one tab uses it), never a row of its own above the cards. Its button says what is picked; a tap opens the inputs.
+import { ChevronDownIcon, SlidersHorizontalIcon } from 'lucide-react';
+import { Button } from './ui/button.js';
+import { Popover, PopoverContent, PopoverTrigger } from './ui/popover.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.js';
+export function PageInputs({ summary, label = 'Inputs', children, }) {
+    return (_jsxs(Popover, { children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", className: "h-8 max-w-48 gap-1.5 px-2", "aria-label": label, children: [_jsx(SlidersHorizontalIcon, { className: "text-muted-foreground" }), _jsx("span", { className: "num truncate", children: summary }), _jsx(ChevronDownIcon, { className: "text-muted-foreground" })] }) }) }), _jsx(TooltipContent, { children: label })] }), _jsx(PopoverContent, { align: "end", className: "flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-3", children: children })] }));
+}
+/** One input in the picker: its label above it. */
+export function PageInput({ label, children }) {
+    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: label }), _jsx("div", { className: "flex flex-wrap items-center gap-2", children: children })] }));
+}

package/dist/page.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from 'react';
+export { IconButton, type IconButtonProps } from './icon-button.js';
+export interface Crumb {
+    label: ReactNode;
+    /** Where the crumb links; the last crumb is the page itself and never links. */
+    to?: string;
+    /** Text for the phone back button and keys when `label` is not plain text. */
+    name?: string;
+}
+export interface PageHeaderProps {
+    crumbs: Crumb[];
+    /** This page's own buttons (section A): `IconButton`s, icon only, name in the tooltip
+     * . A divider keeps them apart from the shell's buttons. */
+    actions?: ReactNode;
+    /** Layout editing (section B's first slot): LumenLayout fills it; pages never do. */
+    layout?: ReactNode;
+    /** A short status line beside the breadcrumb (under the title on phone). */
+    meta?: ReactNode;
+    /** This page's status bar items (`StatusItem`), shown after the app's own. */
+    status?: ReactNode;
+}
+/** The fixed-height header; `Page` renders it, or a page with several states renders it itself. */
+export declare function PageHeader({ crumbs, actions, layout, meta, status }: PageHeaderProps): import("react").JSX.Element;
+/** The page body: the shell's gutter, section gap and max width. */
+export declare function PageBody({ className, children }: {
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function Page({ className, children, ...header }: PageHeaderProps & {
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/page.js

@@ -0,0 +1,45 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The page frame: a fixed-height header (sidebar toggle, breadcrumb, actions)
+// and the body, with the shell's gutter, section gap and max width. Pages never set their own outer
+// padding or header. On phone the actions stay in the bar as icons and a back chevron replaces the trail.
+import { Link, useRouter } from '@tanstack/react-router';
+import { ChevronLeftIcon, EyeIcon, EyeOffIcon, RefreshCwIcon } from 'lucide-react';
+import { Fragment } from 'react';
+import { createPortal } from 'react-dom';
+import { useAssistantNote } from './assistant-context.js';
+import { cn } from './lib/utils.js';
+import { setPref, usePrefs } from './prefs.js';
+import { useShell } from './shell.js';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from './ui/breadcrumb.js';
+import { Separator } from './ui/separator.js';
+import { SidebarTrigger, useSidebar } from './ui/sidebar.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.js';
+import { IconButton } from './icon-button.js';
+import { LumenFinderButton } from './lumen-finder.js';
+export { IconButton } from './icon-button.js';
+const crumbName = (c) => c.name ?? (typeof c.label === 'string' ? c.label : '');
+/** The fixed-height header; `Page` renders it, or a page with several states renders it itself. */
+export function PageHeader({ crumbs, actions, layout, meta, status }) {
+    const router = useRouter();
+    const { statusSlot, refresh, refreshing, hideAmounts, headerActions } = useShell();
+    const hidden = usePrefs().hideAmounts;
+    const { isMobile } = useSidebar();
+    const parent = [...crumbs.slice(0, -1)].reverse().find((c) => c.to);
+    const current = crumbs[crumbs.length - 1];
+    // The assistant sees which page this is: its name on the chip, its trail for the model.
+    useAssistantNote('page', {
+        label: current ? crumbName(current) : '',
+        data: { page: crumbs.map(crumbName).filter(Boolean).join(' › ') },
+    });
+    return (_jsxs(_Fragment, { children: [_jsxs("header", { "data-slot": "shell-header", className: "sticky top-0 z-20 flex h-(--shell-header-height) shrink-0 items-center gap-2 overflow-hidden border-b bg-background px-(--shell-gutter)", children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(SidebarTrigger, { className: "-ml-1" }) }), _jsx(TooltipContent, { children: "Toggle sidebar" })] }), _jsx(Separator, { orientation: "vertical", className: "hidden data-vertical:h-4 data-vertical:self-center md:block" }), parent && (_jsx(IconButton, { icon: ChevronLeftIcon, label: `Back to ${crumbName(parent)}`, className: "md:hidden", onClick: () => router.navigate({ to: parent.to }) })), !isMobile && (_jsx(Breadcrumb, { className: "min-w-0", children: _jsx(BreadcrumbList, { className: "flex-nowrap", children: crumbs.map((c, i) => (_jsxs(Fragment, { children: [i > 0 && _jsx(BreadcrumbSeparator, {}), _jsx(BreadcrumbItem, { className: "min-w-0", children: c.to && i < crumbs.length - 1 ? (_jsx(BreadcrumbLink, { asChild: true, children: _jsx(Link, { to: c.to, children: c.label }) })) : i === crumbs.length - 1 ? (_jsx(BreadcrumbPage, { className: "truncate", children: _jsx("h1", { className: "flex min-w-0 items-center gap-2 truncate font-semibold", children: c.label }) })) : (_jsx("span", { className: "truncate", children: c.label })) })] }, `${i}-${crumbName(c)}`))) }) })), isMobile && (_jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "flex min-w-0 items-center gap-2 truncate text-sm leading-tight font-semibold", children: current?.label }), meta && (_jsx("div", { className: "flex items-center gap-1.5 truncate text-[11px] leading-tight text-muted-foreground", children: meta }))] })), meta && !isMobile && (_jsx("div", { className: "ml-1 hidden min-w-0 shrink items-center gap-2 truncate border-l pl-3 text-xs text-muted-foreground md:flex", children: meta })), _jsxs("div", { className: cn('ml-auto flex shrink-0 items-center gap-0.5', 
+                        // Phone: a page's text buttons show as icons too; their text stays as the accessible name.
+                        isMobile &&
+                            '[&_[data-slot=button]]:size-8 [&_[data-slot=button]]:gap-0 [&_[data-slot=button]]:px-0 [&_[data-slot=button]]:text-[0px]'), children: [actions && (_jsxs(_Fragment, { children: [_jsx("div", { "data-slot": "shell-page-actions", className: "flex items-center gap-0.5", children: actions }), _jsx(Separator, { orientation: "vertical", className: "mx-2 data-vertical:h-5 data-vertical:self-center" })] })), _jsxs("div", { "data-slot": "shell-actions", className: "flex items-center gap-0.5", children: [layout, _jsx(LumenFinderButton, {}), hideAmounts && (_jsx(IconButton, { icon: hidden ? EyeOffIcon : EyeIcon, label: hidden ? 'Show amounts' : 'Hide amounts', "aria-pressed": hidden, onClick: () => setPref('hideAmounts', !hidden) })), refresh && (_jsx(IconButton, { icon: RefreshCwIcon, busy: refreshing, label: "Refresh (skip cache)", disabled: refreshing, onClick: () => void refresh() })), headerActions] })] })] }), status && statusSlot && createPortal(status, statusSlot)] }));
+}
+/** The page body: the shell's gutter, section gap and max width. */
+export function PageBody({ className, children }) {
+    return (_jsx("main", { className: cn('mx-auto flex w-full max-w-(--shell-max-width) min-w-0 flex-1 flex-col gap-(--shell-section-gap) p-(--shell-gutter)', className), children: children }));
+}
+export function Page({ className, children, ...header }) {
+    return (_jsxs(_Fragment, { children: [_jsx(PageHeader, { ...header }), _jsx(PageBody, { className: className, children: children })] }));
+}

package/dist/pager.d.ts

@@ -0,0 +1,10 @@
+export declare function LumenPager({ total, page, size, onPage, onSize, noun, sizes, }: {
+    total: number;
+    page: number;
+    size: number;
+    onPage: (page: number) => void;
+    onSize: (size: number) => void;
+    noun?: string;
+    /** Page sizes offered; a server-paged source takes its own. */
+    sizes?: readonly number[];
+}): import("react").JSX.Element;

package/dist/pager.js

@@ -0,0 +1,14 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The compact pager, the same look as LumenView's: the count opens the page sizes,
+// and the chevrons turn the page while there is more than one. Coverage views page their rows with it.
+import { viewPageSizes } from '@columenlabs/lumen-ui-types/views';
+import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import { IconButton } from './icon-button.js';
+import { Button } from './ui/button.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from './ui/dropdown-menu.js';
+export function LumenPager({ total, page, size, onPage, onSize, noun = 'rows', sizes = viewPageSizes, }) {
+    const pages = Math.max(1, Math.ceil(total / size));
+    return (_jsxs("nav", { "aria-label": "Pages", className: "flex items-center", children: [_jsxs(DropdownMenu, { modal: false, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "sm", className: "num h-7 px-2 text-xs font-normal text-muted-foreground", "aria-label": "Rows per page", children: pages > 1
+                                ? `${page * size + 1}–${Math.min((page + 1) * size, total)} of ${total}`
+                                : `${total} ${noun}` }) }), _jsx(DropdownMenuContent, { align: "end", className: "w-40", children: _jsx(DropdownMenuRadioGroup, { value: String(size), onValueChange: (v) => onSize(Number(v)), children: sizes.map((n) => (_jsxs(DropdownMenuRadioItem, { value: String(n), className: "num whitespace-nowrap", children: [n, " per page"] }, n))) }) })] }), pages > 1 && (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: ChevronLeftIcon, label: "Previous page", disabled: page === 0, onClick: () => onPage(page - 1) }), _jsx(IconButton, { icon: ChevronRightIcon, label: "Next page", disabled: page >= pages - 1, onClick: () => onPage(page + 1) })] }))] }));
+}

package/dist/prefs.d.ts

@@ -0,0 +1,71 @@
+export declare const THEMES: readonly ['light', 'dark', 'system'];
+export type Theme = (typeof THEMES)[number];
+export declare const TIME_ZONES: readonly [{
+    readonly id: 'America/New_York';
+    readonly label: 'Eastern';
+}, {
+    readonly id: 'America/Chicago';
+    readonly label: 'Central';
+}, {
+    readonly id: 'America/Los_Angeles';
+    readonly label: 'Pacific';
+}, {
+    readonly id: 'UTC';
+    readonly label: 'UTC';
+}];
+export type TimeZoneId = (typeof TIME_ZONES)[number]['id'];
+/** The text font; Manrope is the suite's own, the rest are for reading comfort. */
+export declare const FONTS: readonly [{
+    readonly id: 'manrope';
+    readonly label: 'Manrope';
+}, {
+    readonly id: 'inter';
+    readonly label: 'Inter';
+}, {
+    readonly id: 'plex';
+    readonly label: 'IBM Plex Sans';
+}, {
+    readonly id: 'system';
+    readonly label: 'System';
+}];
+export type FontId = (typeof FONTS)[number]['id'];
+/** Text size: the root size every rem scales from, so spacing grows with the text. */
+export declare const FONT_SIZES: readonly [{
+    readonly id: 'small';
+    readonly label: 'Small';
+    readonly px: 15;
+}, {
+    readonly id: 'default';
+    readonly label: 'Default';
+    readonly px: 16;
+}, {
+    readonly id: 'large';
+    readonly label: 'Large';
+    readonly px: 17;
+}];
+export type FontSizeId = (typeof FONT_SIZES)[number]['id'];
+export interface Prefs {
+    theme: Theme;
+    glass: boolean;
+    font: FontId;
+    fontSize: FontSizeId;
+    timeZone: TimeZoneId;
+    /** Hide amounts: the header's eye masks holding dollars and quantities, e.g. for screen-sharing. */
+    hideAmounts: boolean;
+    /** Observability details: each card and view shows how long it took to load. */
+    observability: boolean;
+}
+/** The assistant panel: never narrower than this, nor wider than this or half the window. */
+export declare const ASSISTANT_WIDTH: {
+    readonly min: 320;
+    readonly max: 800;
+};
+/** Eastern by default, as an app's zone picker had it (the market's own zone). */
+export declare const DEFAULT_PREFS: Prefs;
+/** The theme on screen: `system` follows the device. */
+export declare const resolvedTheme: (p?: Prefs) => 'light' | 'dark';
+export declare function setPref<K extends keyof Prefs>(key: K, value: Prefs[K]): void;
+export declare const getPrefs: () => Prefs;
+export declare function usePrefs(): Prefs;
+/** `Pacific`, `UTC`: the short name shown next to times. */
+export declare const timeZoneLabel: (id: TimeZoneId) => "America/Chicago" | "America/Los_Angeles" | "America/New_York" | "Central" | "Eastern" | "Pacific" | "UTC";

package/dist/prefs.js

@@ -0,0 +1,126 @@
+// User preferences that hold on every app: theme, glass, time zone and
+// Hide amounts, Observability details, font and font
+// size.
+// An app's pages may live on their own hosts, so the choice is kept in one cookie (on the parent
+// domain the app names, `configureLumen`) rather than per-origin localStorage; nothing is stored
+// server-side.
+import { useSyncExternalStore } from 'react';
+import { KIT, onConfigure } from './kit-config.js';
+export const THEMES = ['light', 'dark', 'system'];
+export const TIME_ZONES = [
+    { id: 'America/New_York', label: 'Eastern' },
+    { id: 'America/Chicago', label: 'Central' },
+    { id: 'America/Los_Angeles', label: 'Pacific' },
+    { id: 'UTC', label: 'UTC' },
+];
+/** The text font; Manrope is the suite's own, the rest are for reading comfort. */
+export const FONTS = [
+    { id: 'manrope', label: 'Manrope' },
+    { id: 'inter', label: 'Inter' },
+    { id: 'plex', label: 'IBM Plex Sans' },
+    { id: 'system', label: 'System' },
+];
+/** Text size: the root size every rem scales from, so spacing grows with the text. */
+export const FONT_SIZES = [
+    { id: 'small', label: 'Small', px: 15 },
+    { id: 'default', label: 'Default', px: 16 },
+    { id: 'large', label: 'Large', px: 17 },
+];
+/** The assistant panel: never narrower than this, nor wider than this or half the window. */
+export const ASSISTANT_WIDTH = { min: 320, max: 800 };
+/** Eastern by default, as an app's zone picker had it (the market's own zone). */
+export const DEFAULT_PREFS = {
+    theme: 'light',
+    glass: false,
+    font: 'manrope',
+    fontSize: 'default',
+    timeZone: 'America/New_York',
+    hideAmounts: false,
+    observability: false,
+};
+const YEAR = 60 * 60 * 24 * 365;
+const listeners = new Set();
+/** The app's shared cookie domain (`configureLumen`); host-only when it names none. */
+function cookieDomain() {
+    const domain = KIT.cookieDomain?.(location.hostname);
+    return domain ? `; domain=${domain}` : '';
+}
+function read() {
+    try {
+        const raw = document.cookie
+            .split('; ')
+            .find((c) => c.startsWith(`${KIT.prefsCookie}=`))
+            ?.slice(KIT.prefsCookie.length + 1);
+        if (!raw)
+            return DEFAULT_PREFS;
+        const v = JSON.parse(decodeURIComponent(raw));
+        return {
+            theme: THEMES.includes(v.theme) ? v.theme : DEFAULT_PREFS.theme,
+            glass: v.glass === true,
+            font: FONTS.find((f) => f.id === v.font)?.id ?? DEFAULT_PREFS.font,
+            fontSize: FONT_SIZES.find((f) => f.id === v.fontSize)?.id ?? DEFAULT_PREFS.fontSize,
+            timeZone: TIME_ZONES.find((z) => z.id === v.timeZone)?.id ?? DEFAULT_PREFS.timeZone,
+            hideAmounts: v.hideAmounts === true,
+            observability: v.observability === true,
+        };
+    }
+    catch {
+        return DEFAULT_PREFS;
+    }
+}
+let state = typeof document === 'undefined' ? DEFAULT_PREFS : read();
+const systemDark = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-color-scheme: dark)').matches;
+/** The theme on screen: `system` follows the device. */
+export const resolvedTheme = (p = state) => p.theme === 'system' ? (systemDark() ? 'dark' : 'light') : p.theme;
+function apply() {
+    const el = document.documentElement;
+    el.classList.toggle('dark', resolvedTheme() === 'dark');
+    el.dataset.glass = state.glass ? 'on' : 'off';
+    el.dataset.font = state.font;
+    el.dataset.fontSize = state.fontSize;
+}
+if (typeof document !== 'undefined') {
+    apply();
+    matchMedia?.('(prefers-color-scheme: dark)').addEventListener('change', () => {
+        if (state.theme !== 'system')
+            return;
+        apply();
+        for (const l of listeners)
+            l();
+    });
+    // The app named its own cookie: read the person's preferences from it.
+    onConfigure(() => {
+        state = read();
+        apply();
+        for (const l of listeners)
+            l();
+    });
+    // Another app (or tab) changed a preference: pick it up when this tab comes back.
+    document.addEventListener('visibilitychange', () => {
+        if (document.visibilityState !== 'visible')
+            return;
+        const next = read();
+        if (JSON.stringify(next) === JSON.stringify(state))
+            return;
+        state = next;
+        apply();
+        for (const l of listeners)
+            l();
+    });
+}
+export function setPref(key, value) {
+    state = { ...state, [key]: value };
+    document.cookie = `${KIT.prefsCookie}=${encodeURIComponent(JSON.stringify(state))}; path=/; max-age=${YEAR}; samesite=lax; secure${cookieDomain()}`;
+    apply();
+    for (const l of listeners)
+        l();
+}
+export const getPrefs = () => state;
+export function usePrefs() {
+    return useSyncExternalStore((cb) => {
+        listeners.add(cb);
+        return () => listeners.delete(cb);
+    }, getPrefs, () => DEFAULT_PREFS);
+}
+/** `Pacific`, `UTC`: the short name shown next to times. */
+export const timeZoneLabel = (id) => TIME_ZONES.find((z) => z.id === id)?.label ?? id;

package/dist/query-client.d.ts

@@ -0,0 +1,7 @@
+import { QueryClient, type QueryClientConfig } from '@tanstack/react-query';
+type Retry = NonNullable<NonNullable<QueryClientConfig['defaultOptions']>['queries']>['retry'];
+/** The app's one QueryClient; `retry` is the app's own rule for failed requests. */
+export declare function createDeskQueryClient({ retry }?: {
+    retry?: Retry;
+}): QueryClient;
+export {};

package/dist/query-client.js

@@ -0,0 +1,19 @@
+// One data cache rule for every app (switching tabs must not fetch again).
+// A page's queries stay fresh for 5 minutes and stay in memory for 30, so a tab or page opened
+// again shows what it had without a request. Data changes reach the cache another way: a save
+// invalidates its keys, a running job polls (`refetchInterval`) until it ends, an ended Task
+// invalidates everything (tasks.tsx), and the header's Refresh refetches the page.
+import { QueryClient } from '@tanstack/react-query';
+/** The app's one QueryClient; `retry` is the app's own rule for failed requests. */
+export function createDeskQueryClient({ retry } = {}) {
+    return new QueryClient({
+        defaultOptions: {
+            queries: {
+                retry: retry ?? 1,
+                refetchOnWindowFocus: false,
+                staleTime: 5 * 60_000,
+                gcTime: 30 * 60_000,
+            },
+        },
+    });
+}

package/dist/refresh.d.ts

@@ -0,0 +1,4 @@
+/** Headers an app's API client adds to each request; empty unless a refresh is running. */
+export declare function refreshHeaders(): Record<string, string>;
+/** Runs `reload` with a fresh token set, so the requests it makes skip the server cache. */
+export declare function withRefreshToken(reload: () => Promise<unknown>): Promise<void>;

package/dist/refresh.js

@@ -0,0 +1,19 @@
+// The header's Refresh: reloads the page's data and asks the app's server to skip
+// its cache. While a refresh runs, `refreshHeaders()` carries one token per click; an app's API client
+// adds it to every request and the server drops its cached reads once per token.
+import { REFRESH_HEADER } from '@columenlabs/lumen-ui-types';
+let token = null;
+/** Headers an app's API client adds to each request; empty unless a refresh is running. */
+export function refreshHeaders() {
+    return token ? { [REFRESH_HEADER]: token } : {};
+}
+/** Runs `reload` with a fresh token set, so the requests it makes skip the server cache. */
+export async function withRefreshToken(reload) {
+    token = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+    try {
+        await reload();
+    }
+    finally {
+        token = null;
+    }
+}

package/dist/rename-field.d.ts

@@ -0,0 +1,11 @@
+export interface RenameFieldProps {
+    /** The name shown now: the person's own, or `original`. */
+    value: string;
+    /** The source's own name (the broker's, the bank's), what Reset goes back to. */
+    original: string;
+    /** Where `original` comes from, for the tooltip: "At the broker", "At the bank". */
+    originLabel: string;
+    /** null resets to `original`. */
+    onSave: (name: string | null) => void;
+}
+export declare function RenameField({ value, original, originLabel, onSave }: RenameFieldProps): import("react").JSX.Element;

package/dist/rename-field.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A name renamed in place (for a broker link accounts; shared so
+// An app's bank accounts rename the same way): Enter or leaving the field saves, Escape undoes,
+// empty or ↺ goes back to the source's own name, shown as the placeholder.
+import { PencilIcon, RotateCcwIcon } from 'lucide-react';
+import { useState } from 'react';
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from './ui/input-group.js';
+export function RenameField({ value, original, originLabel, onSave }) {
+    const [typed, setTyped] = useState(value);
+    const save = () => {
+        const name = typed.trim();
+        if (name === value)
+            return;
+        if (!name && value === original)
+            return setTyped(value);
+        onSave(name || null);
+    };
+    return (_jsxs(InputGroup, { className: "-ml-2 h-7 w-fit max-w-full border-transparent hover:border-input dark:bg-transparent", children: [_jsx(InputGroupInput, { value: typed, placeholder: original, "aria-label": `Rename ${value}`, title: value === original ? 'Rename' : `${originLabel}: ${original}`, onChange: (e) => setTyped(e.target.value), onBlur: save, onKeyDown: (e) => {
+                    if (e.key === 'Enter')
+                        e.currentTarget.blur();
+                    if (e.key === 'Escape') {
+                        setTyped(value);
+                        requestAnimationFrame(() => e.currentTarget?.blur());
+                    }
+                }, className: "field-sizing-content min-w-0 px-2 text-sm" }), _jsxs(InputGroupAddon, { align: "inline-end", children: [_jsx(PencilIcon, { className: "size-3" }), value !== original && (_jsx(InputGroupButton, { size: "icon-xs", "aria-label": `Reset to ${original}`, title: `Reset to ${original}`, onClick: () => onSave(null), children: _jsx(RotateCcwIcon, {}) }))] })] }));
+}

package/dist/reset-button.d.ts

@@ -0,0 +1,9 @@
+export interface ResetButtonProps {
+    /** Whether anything differs from the default; nothing shows when it doesn't. */
+    changed: boolean;
+    /** The tooltip and accessible name: "Reset to 15 – 45", "Reset all". */
+    label: string;
+    onReset: () => void;
+    size?: 'icon-xs' | 'icon-sm';
+}
+export declare function ResetButton({ changed, label, onReset, size }: ResetButtonProps): import("react").JSX.Element | null;

package/dist/reset-button.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Puts a setting back to its default: a ↺ that shows only when something
+// differs from the default, its tooltip naming what it goes back to.
+import { RotateCcwIcon } from 'lucide-react';
+import { IconButton } from './icon-button.js';
+export function ResetButton({ changed, label, onReset, size = 'icon-xs' }) {
+    if (!changed)
+        return null;
+    return _jsx(IconButton, { icon: RotateCcwIcon, label: label, size: size, onClick: onReset });
+}

package/dist/route-error.d.ts

@@ -0,0 +1,42 @@
+import { type ErrorComponentProps } from '@tanstack/react-router';
+/** A dynamic import that failed to load (Chrome, Firefox, Safari wording), not a page's own bug. */
+export declare function isStaleBuildError(error: unknown): boolean;
+/**
+ * Reloads onto the new build unless it already did in the last 10 s (a file that is truly missing
+ * then shows its error instead of reloading forever); says whether a reload is under way.
+ */
+export declare function reloadForNewBuild(): boolean;
+/** The bit of a TanStack router this needs: each route's component, lazy ones with `preload`. */
+type LazyRoutes = {
+    routesById: Record<string, {
+        options: {
+            component?: unknown;
+        };
+    }>;
+};
+/**
+ * Keeps an open tab working across deploys: every page's files load up front (when a router is
+ * given), and a file a deploy removed reloads the tab onto the new build. The event is never
+ * cancelled: cancelling it makes the import resolve to nothing, which the page then hits as a bug.
+ */
+export declare function watchNewBuilds(router?: LazyRoutes): void;
+/**
+ * Sends a page error to the Worker's log; never throws, never retries. `where` names the card or
+ * panel that caught it (LumenBoundary); left out, the whole page did.
+ */
+export declare function reportError(error: unknown, outcome: 'reload' | 'retry' | 'shown', where?: string): void;
+/**
+ * One centred message with its buttons, the same on every app: the whole page's (RouteError) or
+ * one card's or panel's (LumenBoundary, `what` "card" or "panel", smaller).
+ */
+export declare function ErrorPage({ error, onRetry, what, }: {
+    error: unknown;
+    onRetry: () => void;
+    what?: 'page' | 'card' | 'panel';
+}): import("react").JSX.Element;
+/**
+ * The router's error page: "Updating" while the tab reloads onto a new build; any other error is
+ * tried once more on its own, then shown with Try again and Reload. Each one is logged.
+ */
+export declare function RouteError({ error, reset }: ErrorComponentProps): import("react").JSX.Element;
+export {};