@columenlabs/lumen-ui 0.1.98 → 0.1.99

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-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/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/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/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.99",
   "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.99",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",