@columenlabs/lumen-ui 0.1.98 → 0.1.100

package/dist/details-table.js

@@ -4,7 +4,7 @@ import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, Table
 export function DetailsTable({ head, rows, foot, selected, onSelect }) {
     const marked = head.findIndex((h) => h.grow);
     const grow = marked >= 0 ? marked : head.length - 1;
-    const cell = (i) => cn('num', head[i]?.right && 'text-right', i !== grow && 'w-px', head[i]?.hideOnPhone && 'max-md:hidden');
+    const cell = (i) => cn(head[i]?.right && 'num text-right', i !== grow && 'w-px', head[i]?.hideOnPhone && 'max-md:hidden');
     return (_jsx("div", { className: "-mx-1 overflow-x-auto overflow-y-hidden rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: head.map((h, i) => (_jsx(TableHead, { className: cn(h.right && 'text-right', i !== grow && 'w-px', h.hideOnPhone && 'max-md:hidden'), children: h.label }, h.label))) }) }), _jsx(TableBody, { children: rows.map((r) => (_jsx(TableRow, { "data-state": r.key === selected ? 'selected' : undefined, "aria-current": r.key === selected || undefined, tabIndex: onSelect ? 0 : undefined, className: cn(onSelect &&
                             'cursor-pointer focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring'), onClick: onSelect && (() => onSelect(r.key)), onKeyDown: onSelect &&
                             ((e) => {

package/dist/emoji-tab.d.ts

@@ -0,0 +1,3 @@
+export declare function EmojiTab({ onPick }: {
+    onPick: (emoji: string) => void;
+}): import("react").JSX.Element;

package/dist/emoji-tab.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The icon picker's Emoji tab, loaded the first time it opens (the emoji set and its search).
+import { EmojiPicker, EmojiPickerContent, EmojiPickerSearch } from './ui/emoji-picker.js';
+export function EmojiTab({ onPick }) {
+    return (_jsxs(EmojiPicker, { className: "h-80 w-full", columns: 9, onEmojiSelect: ({ emoji }) => onPick(emoji), children: [_jsx(EmojiPickerSearch, { placeholder: "Search emoji" }), _jsx(EmojiPickerContent, {})] }));
+}

package/dist/icon-picker.js

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

package/dist/index.d.ts

@@ -55,7 +55,7 @@ export { LumenChatgptSignin, type LumenChatgptSigninProps } from './chatgpt-sign
 export { LumenExpandList, LumenExpandRow } from './expand-list.js';
 export { type Fact, FactList, type FactListProps } from './fact-list.js';
 export { LumenPager } from './pager.js';
-export { createDeskQueryClient } from './query-client.js';
+export { clearPersistedQueries, createDeskQueryClient, type PersistOptions } from './query-client.js';
 export { type ClientPoint, type ClientPointKind, type LumenTelemetryOptions, apiRoute, reportClient, reportClientError, reportFailedFetch, stackFingerprint, useLumenTelemetry, } from './telemetry.js';
 export { refreshHeaders, withRefreshToken } from './refresh.js';
 export { type LumenLoad, LumenError, LumenLazy, LumenLoadFooter, LumenLoadTime, LumenProgress, LumenRefresh, LumenSkeleton, LumenStates, marketTrades, useLumenLoad, useLumenSource, useLiveLoad, } from './lumen-source.js';

package/dist/index.js

@@ -62,7 +62,7 @@ export { LumenChatgptSignin } from './chatgpt-signin.js';
 export { LumenExpandList, LumenExpandRow } from './expand-list.js';
 export { FactList } from './fact-list.js';
 export { LumenPager } from './pager.js';
-export { createDeskQueryClient } from './query-client.js';
+export { clearPersistedQueries, createDeskQueryClient } from './query-client.js';
 export { apiRoute, reportClient, reportClientError, reportFailedFetch, stackFingerprint, useLumenTelemetry, } from './telemetry.js';
 export { refreshHeaders, withRefreshToken } from './refresh.js';
 export { LumenError, LumenLazy, LumenLoadFooter, LumenLoadTime, LumenProgress, LumenRefresh, LumenSkeleton, LumenStates, marketTrades, useLumenLoad, useLumenSource, useLiveLoad, } from './lumen-source.js';

package/dist/lumen-echart.js

@@ -99,6 +99,28 @@ export function axisStyle(t) {
         nameTextStyle: { color: t.muted, fontSize: 11 },
     };
 }
+/** `over` laid on `under`, plain objects merged key by key: what the chart sets wins. */
+function layer(under, over) {
+    const plain = (v) => !!v && typeof v === 'object' && Object.getPrototypeOf(v) === Object.prototype;
+    if (!plain(under) || !plain(over))
+        return over === undefined ? under : over;
+    const out = { ...under };
+    for (const [k, v] of Object.entries(over))
+        out[k] = layer(under[k], v);
+    return out;
+}
+/** `option` with its axes in the theme's colours under whatever the chart sets itself, so a chart
+ *  that names no axis colours still draws its grid lines faint in dark mode too. */
+function themedAxes(option, t) {
+    const style = axisStyle(t);
+    const theme = (a) => Array.isArray(a) ? a.map((x) => layer(style, x)) : layer(style, a);
+    const o = option;
+    return {
+        ...option,
+        ...(o.xAxis ? { xAxis: theme(o.xAxis) } : {}),
+        ...(o.yAxis ? { yAxis: theme(o.yAxis) } : {}),
+    };
+}
 export function LumenEChart({ option, height = 260, on, className, label, }) {
     const box = useRef(null);
     const chart = useRef(null);
@@ -132,12 +154,11 @@ export function LumenEChart({ option, height = 260, on, className, label, }) {
     const tokens = useChartTokens();
     // An app re-rendering hands a new but equal option (a hover, a refetch): drawing it again
     // replays the line's entry animation, so the chart blanks under the tooltip. Only a change redraws.
-    // biome-ignore lint/correctness/useExhaustiveDependencies: tokens change when the theme flips.
     useEffect(() => {
         const c = chart.current;
         if (!ready || !c)
             return;
-        const next = resolveVars(option);
+        const next = resolveVars(themedAxes(option, tokens));
         const key = JSON.stringify(next);
         if (key === drawn.current)
             return;

package/dist/lumen-grid.js

@@ -21,6 +21,11 @@ const GUESS = GRID_BLOCK_ROWS * 2;
 const GridCellContext = createContext(null);
 export const useGridCell = () => useContext(GridCellContext);
 const CARD = '[data-slot=lumen-card]';
+/** What a card's part adds to its height: nothing when it floats (a card's corner actions). */
+const flowHeight = (el) => {
+    const at = getComputedStyle(el).position;
+    return at === 'absolute' || at === 'fixed' ? 0 : el.offsetHeight;
+};
 const rowsOf = (px) => Math.max(2, Math.ceil((px + GRID_GAP) / GRID_ROW_PX));
 const byPlace = (a, b) => a.y - b.y || a.x - b.x;
 /** Cards placed where they say and, in order after them, the ones that do not, row by row. */
@@ -120,7 +125,7 @@ function Cell({ id, fixed, report, children, }) {
             // filter, body and footer, plus whatever else the wrapper holds.
             const card = el.matches(CARD) ? el : el.querySelector(`:scope > ${CARD}`);
             const px = card
-                ? [...card.children].reduce((s, c) => s + c.offsetHeight, 0) +
+                ? [...card.children].reduce((s, c) => s + flowHeight(c), 0) +
                     (card.offsetHeight - card.clientHeight) +
                     (el.offsetHeight - card.offsetHeight)
                 : el.offsetHeight;

package/dist/lumen-view.js

@@ -11,7 +11,6 @@ import { DndContext, closestCenter } from '@dnd-kit/core';
 import { SortableContext, rectSortingStrategy } from '@dnd-kit/sortable';
 import { createPaginatedRowModel, createSortedRowModel, flexRender, rowPaginationFeature, rowSortingFeature, sortFns, tableFeatures, useTable, } from '@tanstack/react-table';
 import { ArrowDownIcon, ArrowUpIcon, ChartCandlestick, ChartSpline, ChevronLeftIcon, ChevronRightIcon, ChevronsDownIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, Columns3CogIcon, CornerDownRightIcon, DownloadIcon, Grid3x3Icon, LayoutDashboardIcon, ListCollapseIcon, PencilIcon, PlusIcon, Settings2Icon, SigmaIcon, SparklesIcon, TableIcon, UserPenIcon, } from 'lucide-react';
-import Papa from 'papaparse';
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useAssistantNote } from './assistant-context.js';
 import { ColorChip, ColorDot } from './color-dot.js';
@@ -189,9 +188,9 @@ function ColumnPicker({ domain, columns, onColumns, open, onOpenChange, classNam
 /**
  * The view's rows as a CSV file: the filtered rows in the view's sort, its
  * shown columns (the grouping first when it is not one), plain numbers; amounts stay masked while
- * Hide amounts is on.
+ * Hide amounts is on. The CSV writer loads on the first download, not with the page.
  */
-function downloadCsv({ name, columns, rows, groupBy, sort, hidden, }) {
+async function downloadCsv({ name, columns, rows, groupBy, sort, hidden, }) {
     const fields = groupBy && !columns.includes(groupBy) ? [groupBy, ...columns] : columns;
     const by = sort && fields.find((f) => f.key === sort.key);
     const sorted = by
@@ -212,6 +211,7 @@ function downloadCsv({ name, columns, rows, groupBy, sort, hidden, }) {
             return '';
         return hidden && f.amount ? maskAmount(String(v)) : v;
     };
+    const { default: Papa } = await import('papaparse');
     const csv = Papa.unparse({
         fields: fields.map((f) => f.label),
         data: sorted.map((r) => fields.map((f) => cell(f, r))),

package/dist/page.js

@@ -31,7 +31,7 @@ export function PageHeader({ crumbs, actions, layout, meta, status }) {
         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', 
+    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 min-w-0 items-center gap-1.5 text-[11px] leading-tight text-muted-foreground", children: _jsx("span", { className: "truncate", 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)] }));

package/dist/query-client.d.ts

@@ -1,7 +1,19 @@
 import { QueryClient, type QueryClientConfig } from '@tanstack/react-query';
 type Retry = NonNullable<NonNullable<QueryClientConfig['defaultOptions']>['queries']>['retry'];
+export interface PersistOptions {
+    /** The storage key; one per app (`career`), so apps never read each other's shapes. */
+    key: string;
+    /** Changes when stored shapes would no longer fit; a mismatch drops them. Defaults to the
+     *  page's entry script address, which has a new hash on every build. */
+    buster?: string;
+    /** Oldest data shown at load, in ms (a day by default). */
+    maxAge?: number;
+}
 /** The app's one QueryClient; `retry` is the app's own rule for failed requests. */
-export declare function createDeskQueryClient({ retry }?: {
+export declare function createDeskQueryClient({ retry, persist, }?: {
     retry?: Retry;
+    persist?: PersistOptions;
 }): QueryClient;
+/** Signing out anywhere on the site forgets every app's stored reads. */
+export declare function clearPersistedQueries(): void;
 export {};

package/dist/query-client.js

@@ -3,10 +3,19 @@
 // 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';
+//
+// With `persist`, the cache also outlives the page: what the last visit read (within a day) is
+// shown at once on the next load or in another app of the same site, and anything older than
+// `staleTime` is read again in the background. Signing out (`[data-sign-out]`) clears it. A query
+// with `meta: { persist: false }` is never written.
+import { QueryClient, dehydrate, hydrate, } from '@tanstack/react-query';
+const PREFIX = 'lumen-cache:';
+const DAY = 24 * 60 * 60_000;
+/** Above this a write is skipped rather than filling the origin's storage. */
+const MAX_BYTES = 2_000_000;
 /** The app's one QueryClient; `retry` is the app's own rule for failed requests. */
-export function createDeskQueryClient({ retry } = {}) {
-    return new QueryClient({
+export function createDeskQueryClient({ retry, persist, } = {}) {
+    const qc = new QueryClient({
         defaultOptions: {
             queries: {
                 retry: retry ?? 1,
@@ -16,4 +25,80 @@ export function createDeskQueryClient({ retry } = {}) {
             },
         },
     });
+    if (persist)
+        persistQueries(qc, persist);
+    return qc;
+}
+/** Signing out anywhere on the site forgets every app's stored reads. */
+export function clearPersistedQueries() {
+    try {
+        for (const k of Object.keys(localStorage))
+            if (k.startsWith(PREFIX))
+                localStorage.removeItem(k);
+    }
+    catch { }
+}
+function persistQueries(qc, { key, buster = entryScript(), maxAge = DAY }) {
+    if (typeof window === 'undefined')
+        return;
+    const storageKey = PREFIX + key;
+    try {
+        const raw = localStorage.getItem(storageKey);
+        const stored = raw ? JSON.parse(raw) : null;
+        if (stored && stored.buster === buster && Date.now() - stored.at < maxAge) {
+            hydrate(qc, stored.state);
+        }
+        else if (raw) {
+            localStorage.removeItem(storageKey);
+        }
+    }
+    catch {
+        clearKey(storageKey);
+    }
+    let timer;
+    let off = false;
+    const save = () => {
+        timer = undefined;
+        if (off)
+            return;
+        try {
+            const state = dehydrate(qc, {
+                shouldDehydrateQuery: (q) => q.state.status === 'success' &&
+                    q.meta?.persist !== false,
+            });
+            const text = JSON.stringify({ at: Date.now(), buster, state });
+            if (text.length > MAX_BYTES)
+                return;
+            localStorage.setItem(storageKey, text);
+        }
+        catch { }
+    };
+    // One write a second at most, and one more when the tab is hidden (a reload or another app).
+    qc.getQueryCache().subscribe((e) => {
+        if (e.type !== 'updated' && e.type !== 'removed')
+            return;
+        if (!timer && !off)
+            timer = setTimeout(save, 1000);
+    });
+    document.addEventListener('visibilitychange', () => {
+        if (document.visibilityState === 'hidden')
+            save();
+    });
+    document.addEventListener('click', (e) => {
+        if (e.target?.closest?.('[data-sign-out]')) {
+            off = true;
+            clearPersistedQueries();
+        }
+    }, true);
+}
+function entryScript() {
+    if (typeof document === 'undefined')
+        return '';
+    return document.querySelector('script[type="module"][src]')?.src ?? '';
+}
+function clearKey(k) {
+    try {
+        localStorage.removeItem(k);
+    }
+    catch { }
 }

package/dist/shell.js

@@ -143,5 +143,5 @@ export function LumenShell({ app, appLabel, brand, nav, status, health, statusEn
 }
 /** A status bar entry: an optional health dot, a label and a mono value. */
 export function StatusItem({ label, value, ok, className, }) {
-    return (_jsxs("span", { className: cn('flex items-center gap-1.5', className), children: [ok !== undefined && (_jsx("span", { "aria-hidden": true, className: cn('size-2 rounded-full', ok === null ? 'bg-muted-foreground/40' : ok ? 'bg-gain' : 'bg-destructive') })), label, value !== undefined && (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "num text-foreground/80", children: value })] }))] }));
+    return (_jsxs("span", { className: cn('flex items-center gap-1.5', value === undefined && 'min-w-0', className), children: [ok !== undefined && (_jsx("span", { "aria-hidden": true, className: cn('size-2 shrink-0 rounded-full', ok === null ? 'bg-muted-foreground/40' : ok ? 'bg-gain' : 'bg-destructive') })), _jsx("span", { className: value === undefined ? 'min-w-0 truncate' : 'max-md:hidden', children: label }), value !== undefined && (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "num shrink-0 text-foreground/80", children: value })] }))] }));
 }

package/dist/summary-cards.js

@@ -131,7 +131,9 @@ export function SummaryTiles({ domain, tiles, rows, fields, tile, loading, }) {
     const grid = 'grid grid-cols-2 gap-(--shell-section-gap) md:auto-cols-fr md:grid-flow-col lg:*:*:w-auto';
     if (loading)
         return (_jsx("div", { "data-slot": "view-tiles", "aria-busy": "true", className: grid, children: shown.map((t) => (_jsx(Skeleton, { className: "h-[4.5rem] w-full rounded-xl" }, t.key))) }));
-    return (_jsx("div", { "data-slot": "view-tiles", className: cn(grid, '[&>*:last-child:nth-child(odd)]:col-span-2 md:[&>*:last-child:nth-child(odd)]:col-span-1'), children: shown.map((t) => (_jsx("div", { className: "contents", children: isOwnTile(t) ? (_jsx(OwnTile, { domain: domain, tile: t, rows: rows, fields: fields })) : (tile?.(t.key, rows)) }, t.key))) }));
+    return (_jsx("div", { "data-slot": "view-tiles", className: cn(grid, 
+        // Each tile sits in a `contents` holder, so the odd last one's span goes on what it holds.
+        '[&>*:last-child:nth-child(odd)>*]:col-span-2 md:[&>*:last-child:nth-child(odd)>*]:col-span-1'), children: shown.map((t) => (_jsx("div", { className: "contents", children: isOwnTile(t) ? (_jsx(OwnTile, { domain: domain, tile: t, rows: rows, fields: fields })) : (tile?.(t.key, rows)) }, t.key))) }));
 }
 // ── Edit ───────────────────────────────────────────────────────────────────────────────────────
 const dragOptions = { activationConstraint: { distance: 4 } };

package/dist/tasks.js

@@ -11,7 +11,7 @@ import { toast } from 'sonner';
 // ended unseen. It opens a popover on desktop and a bottom sheet on phone with the last 7 days;
 // opening it marks the ended ones seen. ✕ clears one ended task, the brush every ended one
 //. A task that ends while the page is open shows a toast with
-// Open. The list polls one cheap read every 3 s only while something runs and the tab is visible;
+// Open. The list polls one cheap read every 3 s (15 s after a minute) only while something runs and the tab is visible;
 // otherwise it reads again on focus. The product mounts `TasksProvider` and `TasksButton` in the
 // shell's slots; where the API answers 404 nothing shows.
 import { LumenConfirm } from './confirm.js';
@@ -40,6 +40,7 @@ export function useTaskFor(kind, ref) {
     return tasks.list.tasks.find((t) => t.kind === kind && t.ref === ref) ?? null;
 }
 const POLL_MS = 3000;
+const SLOW_POLL_MS = 15_000;
 export function TasksProvider({ config, children }) {
     if (!config)
         return children;
@@ -70,7 +71,15 @@ function TasksLive({ api, apps, children, }) {
         const path = base && url.pathname.startsWith(base) ? url.pathname.slice(base.length) : url.pathname;
         void router.navigate({ href: `${path || '/'}${url.search}${url.hash}` });
     }, [router, shell]);
-    const refresh = useCallback(async () => {
+    // The newest `open` and query client, read through refs so `refresh` stays one function for
+    // the provider's life: a new one would re-run the first-read effect and fetch the list again.
+    const openRef = useRef(open);
+    openRef.current = open;
+    const qcRef = useRef(qc);
+    qcRef.current = qc;
+    // Reads already on the wire share one request.
+    const inflight = useRef(null);
+    const read = useCallback(async () => {
         const res = await fetch(api, { headers: { accept: 'application/json' } }).catch(() => null);
         if (!res)
             return;
@@ -85,14 +94,20 @@ function TasksLive({ api, apps, children, }) {
         if (before) {
             const ended = next.tasks.filter((t) => before.has(t.id) && !isActive(t));
             for (const t of ended)
-                endedToast(t, open);
+                endedToast(t, openRef.current);
             // A task's results are new data: drop the cache once (query-client.ts).
             if (ended.length)
-                void qc.invalidateQueries();
+                void qcRef.current.invalidateQueries();
         }
         activeIds.current = new Set(next.tasks.filter(isActive).map((t) => t.id));
         setList(next);
-    }, [api, open, qc]);
+    }, [api]);
+    const refresh = useCallback(() => {
+        inflight.current ??= read().finally(() => {
+            inflight.current = null;
+        });
+        return inflight.current;
+    }, [read]);
     const track = useCallback((t) => {
         activeIds.current = new Set([...(activeIds.current ?? []), t.id]);
         setList((l) => {
@@ -147,16 +162,21 @@ function TasksLive({ api, apps, children, }) {
             document.removeEventListener('visibilitychange', again);
         };
     }, [refresh]);
-    // Every 3 s only while something is queued or running and the tab is visible.
+    // Every 3 s while something is queued or running and the tab is visible, easing to every 15 s
+    // once it has run a minute (a long search needs no second-by-second count).
     const active = (list?.active ?? 0) > 0;
     useEffect(() => {
         if (!active)
             return;
-        const id = window.setInterval(() => {
+        const since = Date.now();
+        let id;
+        const tick = () => {
             if (document.visibilityState === 'visible')
                 void refresh();
-        }, POLL_MS);
-        return () => window.clearInterval(id);
+            id = window.setTimeout(tick, Date.now() - since > 60_000 ? SLOW_POLL_MS : POLL_MS);
+        };
+        id = window.setTimeout(tick, POLL_MS);
+        return () => window.clearTimeout(id);
     }, [active, refresh]);
     const value = useMemo(() => (gone ? null : { list, refresh, cancel, seen, clear, open, track, apps }), [gone, list, refresh, cancel, seen, clear, open, track, apps]);
     return _jsx(TasksCtx.Provider, { value: value, children: children });

package/dist/tile.js

@@ -30,7 +30,7 @@ export function TileRow({ children, className, fill, ...props }) {
 }
 export function TileToggleGroup({ options, selected, onSelect, label, className, fill, }) {
     return (_jsx(Card, { size: "sm", className: cn('min-w-0 gap-0 bg-border py-0 lg:w-fit lg:flex-initial', fill &&
-            'lg:w-full lg:*:data-[slot=toggle-group]:w-full lg:**:data-[slot=toggle-group-item]:flex-1', className), children: _jsx(ToggleGroup, { type: "single", spacing: 0, value: selected, onValueChange: (v) => v && onSelect(v), "aria-label": label, className: "grid w-full grid-cols-[repeat(auto-fit,minmax(6.5rem,1fr))] gap-px lg:flex lg:w-fit", children: options.map((o) => (_jsx(ToggleGroupItem, { value: o.id, "aria-label": o.label, className: "h-auto min-w-0 flex-col lg:w-(--tile-width) lg:shrink items-start justify-start gap-0.5 rounded-none! bg-card px-3 py-3 text-left font-normal data-[state=on]:bg-primary/5 data-[state=on]:shadow-[inset_0_-2px_0_var(--primary)]", children: _jsx(TileBody, { label: o.label, value: o.value, caption: o.caption, spark: o.spark, sparkColor: o.sparkColor }) }, o.id))) }) }));
+            'lg:w-full lg:*:data-[slot=toggle-group]:w-full lg:**:data-[slot=toggle-group-item]:flex-1', className), children: _jsx(ToggleGroup, { type: "single", spacing: 0, value: selected, onValueChange: (v) => v && onSelect(v), "aria-label": label, className: "grid w-full grid-cols-2 gap-px max-sm:[&>*:last-child:nth-child(odd)]:col-span-2 sm:grid-cols-[repeat(auto-fit,minmax(6.5rem,1fr))] lg:flex lg:w-fit", children: options.map((o) => (_jsx(ToggleGroupItem, { value: o.id, "aria-label": o.label, className: "h-auto min-w-0 flex-col lg:w-(--tile-width) lg:shrink items-start justify-start gap-0.5 rounded-none! bg-card px-3 py-3 text-left font-normal data-[state=on]:bg-primary/5 data-[state=on]:shadow-[inset_0_-2px_0_var(--primary)]", children: _jsx(TileBody, { label: o.label, value: o.value, caption: o.caption, spark: o.spark, sparkColor: o.sparkColor }) }, o.id))) }) }));
 }
 /** A compact tile: a small caps label over one short value (a quote strip's IV, expiry and move). */
 export function TileChip({ label, value }) {

package/dist/view-editor.js

@@ -46,7 +46,7 @@ import { Textarea } from './ui/textarea.js';
 import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group.js';
 import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.js';
 import { AGG_LABELS, FORMAT_LABELS, FormatChip, FormulaForm, MAX_FORMULAS, fieldOptions, formatOptions, formulaIssueTarget, formulaIssues, formulaOptions, } from './view-formulas.js';
-import { VIEW_ICONS, lucideIconNames, shapeIcon, viewIcon } from './view-icons.js';
+import { VIEW_ICONS, shapeIcon, viewIcon } from './view-icons.js';
 import { FORMULAS_GROUP, canFilter, chipsOf, formulaBlanks, formulasOf, groupOf, hiddenOf, subgroupLabel, subgroupOf, subgroupsOf, summaryCash, takesFormulas, tilesOf, totalAggOf, withViewFields, } from './view-model.js';
 import { WidgetControlsEditor } from './widget-controls.js';
 import { PAGE_SOURCE, useWidgetDataOptions } from './widget-data.js';

package/dist/view-icons.d.ts

@@ -1,6 +1,5 @@
 import type { ViewIcon, ViewIconName, ViewShape } from '@columenlabs/lumen-ui-types/views';
 import { type LucideIcon } from 'lucide-react';
-import { iconNames } from 'lucide-react/dynamic';
 import type { NavIcon } from './nav.js';
 export declare const VIEW_ICONS: Record<ViewIconName, LucideIcon>;
 /** A view's sidebar icon: its own pick (a lucide name or an emoji), else its shape's. */
@@ -10,11 +9,11 @@ export declare const viewIcon: (config: {
 }) => NavIcon;
 /** A picked icon (a lucide name or an emoji) as a component; `fallback` when none or unknown. */
 export declare const iconOf: (icon: ViewIcon | null | undefined, fallback: NavIcon) => NavIcon;
+/** Every lucide icon name, for the icon picker's search: empty until `load` asks for the map and it lands. */
+export declare function useLucideIconNames(load?: boolean): readonly string[];
 /** Any lucide icon by name, loaded on first use (lucide's own DynamicIcon). */
-export declare const lucideIcon: (name: string) => NavIcon;
+export declare const lucideIcon: (name: string, fallback?: NavIcon) => NavIcon;
 /** An emoji drawn where an icon goes. */
 export declare const emojiIcon: (emoji: string) => NavIcon;
-/** Every lucide icon name, for the icon picker's search. */
-export { iconNames as lucideIconNames };
 /** A shape's own icon (the Edit dialog's Shape picker). */
 export declare const shapeIcon: (shape: ViewShape) => LucideIcon;

package/dist/view-icons.js

@@ -1,6 +1,5 @@
 import { BanknoteIcon, BriefcaseIcon, CalendarIcon, ChartBarIcon, ChartLineIcon, ChartPieIcon, ClockIcon, CoinsIcon, FlameIcon, Grid3x3Icon, LandmarkIcon, LayersIcon, ListTreeIcon, PiggyBankIcon, ReceiptIcon, ShieldIcon, StarIcon, TableIcon, TagIcon, TargetIcon, TrendingDownIcon, TrendingUpIcon, WalletIcon, ZapIcon, } from 'lucide-react';
-import { DynamicIcon, iconNames } from 'lucide-react/dynamic';
-import { createElement } from 'react';
+import { createElement, useEffect, useState } from 'react';
 import { cn } from './lib/utils.js';
 export const VIEW_ICONS = {
     table: TableIcon,
@@ -42,10 +41,44 @@ export const iconOf = (icon, fallback) => {
     if (icon in VIEW_ICONS)
         return VIEW_ICONS[icon];
     if (/^[a-z]/.test(icon))
-        return lucideNames.has(icon) ? lucideIcon(icon) : fallback;
+        return lucide && !lucide.names.has(icon) ? fallback : lucideIcon(icon, fallback);
     return emojiIcon(icon);
 };
-const lucideNames = new Set(iconNames);
+let lucide;
+let loadingLucide;
+function loadLucide() {
+    if (!loadingLucide)
+        loadingLucide = import('lucide-react/dynamic').then((m) => {
+            lucide = { ...m, names: new Set(m.iconNames) };
+            return lucide;
+        });
+    return loadingLucide;
+}
+/** Every lucide icon name, for the icon picker's search: empty until `load` asks for the map and it lands. */
+export function useLucideIconNames(load = true) {
+    const [names, setNames] = useState(() => lucide?.iconNames ?? []);
+    useEffect(() => {
+        if (load && !names.length)
+            loadLucide().then((m) => setNames(m.iconNames));
+    }, [load, names.length]);
+    return names;
+}
+/** A lucide icon by name: an empty slot its size while the map loads, `fallback` when it has no such icon. */
+function LucideByName({ name, fallback, className, }) {
+    const [, loaded] = useState(!!lucide);
+    useEffect(() => {
+        if (!lucide)
+            loadLucide().then(() => loaded(true));
+    }, []);
+    if (!lucide)
+        return createElement('span', {
+            'aria-hidden': true,
+            className: cn('inline-block size-4 shrink-0', className),
+        });
+    if (!lucide.names.has(name))
+        return fallback ? createElement(fallback, { className }) : null;
+    return createElement(lucide.DynamicIcon, { name: name, className });
+}
 const made = new Map();
 /** One component per pick, so React keeps it between renders. */
 const once = (key, make) => {
@@ -57,14 +90,12 @@ const once = (key, make) => {
     return Icon;
 };
 /** Any lucide icon by name, loaded on first use (lucide's own DynamicIcon). */
-export const lucideIcon = (name) => once(`lucide:${name}`, () => (props) => createElement(DynamicIcon, { name: name, ...props }));
+export const lucideIcon = (name, fallback) => once(`lucide:${name}`, () => ({ className }) => createElement(LucideByName, { name, fallback, className }));
 /** An emoji drawn where an icon goes. */
 export const emojiIcon = (emoji) => once(`emoji:${emoji}`, () => ({ className }) => createElement('span', {
     'aria-hidden': true,
     'data-slot': 'view-emoji',
     className: cn('inline-grid size-4 shrink-0 place-items-center text-sm leading-none', className),
 }, emoji));
-/** Every lucide icon name, for the icon picker's search. */
-export { iconNames as lucideIconNames };
 /** A shape's own icon (the Edit dialog's Shape picker). */
 export const shapeIcon = (shape) => SHAPE_ICONS[shape];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.98",
+  "version": "0.1.100",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -49,7 +49,7 @@
     "@codemirror/lang-javascript": "6.2.5",
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-sql": "6.10.0",
-    "@columenlabs/lumen-ui-types": "0.1.98",
+    "@columenlabs/lumen-ui-types": "0.1.100",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",