@columenlabs/lumen-ui 0.0.0-stage → 0.1.0

package/dist/kit-config.d.ts

@@ -0,0 +1,13 @@
+export interface KitConfig {
+    /** The cookie that keeps each person's display preferences. */
+    prefsCookie: string;
+    /** The cookie's `domain`, to share it across an app's hosts; none: this host only. */
+    cookieDomain?: (host: string) => string | undefined;
+    /** What a market widget says where the app has no live feed. */
+    marketOff: string;
+}
+export declare const KIT: KitConfig;
+/** Runs `fn` after each `configureLumen` (preferences read again from the app's cookie). */
+export declare function onConfigure(fn: () => void): void;
+/** Sets what `c` names; the rest keep the kit's defaults. */
+export declare function configureLumen(c: Partial<KitConfig>): void;

package/dist/kit-config.js

@@ -0,0 +1,15 @@
+export const KIT = {
+    prefsCookie: 'lumen_prefs',
+    marketOff: 'Live market data is not on this app.',
+};
+const changed = new Set();
+/** Runs `fn` after each `configureLumen` (preferences read again from the app's cookie). */
+export function onConfigure(fn) {
+    changed.add(fn);
+}
+/** Sets what `c` names; the rest keep the kit's defaults. */
+export function configureLumen(c) {
+    Object.assign(KIT, c);
+    for (const fn of changed)
+        fn();
+}

package/dist/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/lib/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/lumen-boundary.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export declare function LumenBoundary({ where, what, children, }: {
+    /** Logged with the error: the card's id, or the panel's name ("assistant"). */
+    where: string;
+    what?: 'card' | 'panel';
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/lumen-boundary.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ErrorBoundary } from 'react-error-boundary';
+import { ErrorPage, isStaleBuildError, reloadForNewBuild, reportError } from './route-error.js';
+export function LumenBoundary({ where, what = 'card', children, }) {
+    return (_jsx(ErrorBoundary, { onError: (error) => {
+            if (isStaleBuildError(error) && reloadForNewBuild())
+                return reportError(error, 'reload', where);
+            reportError(error, 'shown', where);
+        }, fallbackRender: ({ error, resetErrorBoundary }) => (_jsx(ErrorPage, { error: error, onRetry: resetErrorBoundary, what: what })), children: children }));
+}

package/dist/lumen-code-editor-impl.d.ts

@@ -0,0 +1,2 @@
+import type { LumenCodeEditorProps } from './lumen-code-editor.js';
+export default function CodeEditor({ value, onChange, lang, wrap, readOnly, className, }: LumenCodeEditorProps): import("react").JSX.Element;

package/dist/lumen-code-editor-impl.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// CodeMirror behind LumenCodeEditor, in its own chunk: loaded the first time an editor opens, so no
+// page that only reads code (LumenCode, shiki) pays for it.
+import { javascript } from '@codemirror/lang-javascript';
+import { json } from '@codemirror/lang-json';
+import { sql } from '@codemirror/lang-sql';
+import { githubDark, githubLight } from '@uiw/codemirror-theme-github';
+import CodeMirror, { EditorView } from '@uiw/react-codemirror';
+import { useMemo } from 'react';
+import { resolvedTheme, usePrefs } from './prefs.js';
+const LANGS = { js: () => javascript(), sql: () => sql(), json: () => json() };
+export default function CodeEditor({ value, onChange, lang, wrap = false, readOnly = false, className, }) {
+    const prefs = usePrefs();
+    const extensions = useMemo(() => [...(lang ? [LANGS[lang]()] : []), ...(wrap ? [EditorView.lineWrapping] : [])], [lang, wrap]);
+    return (_jsx(CodeMirror, { value: value, onChange: onChange, readOnly: readOnly, theme: resolvedTheme(prefs) === 'dark' ? githubDark : githubLight, extensions: extensions, basicSetup: { foldGutter: false, highlightActiveLine: !readOnly }, height: "100%", className: className }));
+}

package/dist/lumen-code-editor.d.ts

@@ -0,0 +1,11 @@
+export type LumenCodeLang = 'js' | 'sql' | 'json';
+export interface LumenCodeEditorProps {
+    value: string;
+    onChange: (value: string) => void;
+    lang?: LumenCodeLang;
+    /** Wraps long lines instead of scrolling sideways (off by default). */
+    wrap?: boolean;
+    readOnly?: boolean;
+    className?: string;
+}
+export declare function LumenCodeEditor({ className, ...props }: LumenCodeEditorProps): import("react").JSX.Element;

package/dist/lumen-code-editor.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// The shell's one code editor: CodeMirror with syntax colour, line numbers
+// and an optional wrap, in the GitHub light and dark colours LumenCode reads with. Where LumenCode
+// shows code, this edits it; CodeMirror ships once suite-wide, in a chunk of its own.
+import { Suspense, lazy } from 'react';
+import { cn } from './lib/utils.js';
+import { Skeleton } from './ui/skeleton.js';
+const Impl = lazy(() => import('./lumen-code-editor-impl.js'));
+export function LumenCodeEditor({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "lumen-code-editor", className: cn('min-h-0 overflow-hidden rounded-lg border text-xs', className), children: _jsx(Suspense, { fallback: _jsx(Skeleton, { className: "h-full w-full rounded-none" }), children: _jsx(Impl, { ...props, className: "lumen-code-editor h-full" }) }) }));
+}

package/dist/lumen-code.d.ts

@@ -0,0 +1,22 @@
+type Token = {
+    content: string;
+    htmlStyle?: Record<string, string>;
+};
+/** A file's language from its name (`playbook.py` → `py`). */
+export declare const langOfPath: (path: string) => string;
+/** Lines of shiki tokens for `code`, plain lines until they arrive or when the language is unknown. */
+export declare function useCodeTokens(code: string, lang: string | undefined): Token[][] | null;
+export type LumenCodeProps = {
+    code: string;
+    /** The fence tag or file extension; none draws plain text. */
+    lang?: string;
+    /** Wraps long lines instead of scrolling sideways. */
+    wrap?: boolean;
+    /** Numbers each line (files); off for chat snippets. */
+    lineNumbers?: boolean;
+    /** The label and copy icon over the code (chat); off where the page has its own (a file view). */
+    header?: boolean;
+    className?: string;
+};
+export declare function LumenCode({ code, lang, wrap, lineNumbers, header, className, }: LumenCodeProps): import("react").JSX.Element;
+export {};

package/dist/lumen-code.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The shell's one code block: shiki's light and dark tokens for the fence's
+// language, scrolled sideways inside the block, a copy icon. The assistant's answers and scripts and
+// An app's playbook files all draw through it, so shiki ships once suite-wide.
+import { CheckIcon, CopyIcon } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import { IconButton } from './icon-button.js';
+import { cn } from './lib/utils.js';
+/** shiki, created once on first use; each language is its own chunk, loaded the first time it shows. */
+let highlighter = null;
+function getHighlighter() {
+    highlighter ??= (async () => {
+        const [{ createHighlighterCore }, { createJavaScriptRegexEngine }] = await Promise.all([
+            import('shiki/core'),
+            import('shiki/engine/javascript'),
+        ]);
+        return createHighlighterCore({
+            themes: [import('shiki/themes/github-light.mjs'), import('shiki/themes/github-dark.mjs')],
+            langs: [],
+            engine: createJavaScriptRegexEngine(),
+        });
+    })();
+    return highlighter;
+}
+/** The fence tag or file type shiki knows it by (`ts`, `py`, `sql`), or null for plain text. */
+async function loadLang(h, lang) {
+    const id = lang.toLowerCase();
+    if (h.getLoadedLanguages().includes(id))
+        return id;
+    const { bundledLanguages } = await import('shiki/langs');
+    const load = bundledLanguages[id];
+    if (!load)
+        return null;
+    await h.loadLanguage(load);
+    return id;
+}
+/** A file's language from its name (`playbook.py` → `py`). */
+export const langOfPath = (path) => path.split('.').pop() ?? '';
+/** Lines of shiki tokens for `code`, plain lines until they arrive or when the language is unknown. */
+export function useCodeTokens(code, lang) {
+    const [tokens, setTokens] = useState(null);
+    useEffect(() => {
+        let live = true;
+        setTokens(null);
+        if (!lang)
+            return;
+        getHighlighter().then(async (h) => {
+            const id = await loadLang(h, lang);
+            if (!live || !id)
+                return;
+            const out = h.codeToTokens(code, {
+                lang: id,
+                themes: { light: 'github-light', dark: 'github-dark' },
+                defaultColor: false,
+            });
+            setTokens(out.tokens);
+        });
+        return () => {
+            live = false;
+        };
+    }, [code, lang]);
+    return tokens;
+}
+export function LumenCode({ code, lang, wrap = false, lineNumbers = false, header = true, className, }) {
+    const text = code.replace(/\n$/, '');
+    const tokens = useCodeTokens(text, lang);
+    const [copied, setCopied] = useState(false);
+    const lines = tokens ?? text.split('\n').map((l) => [{ content: l }]);
+    const copy = () => navigator.clipboard.writeText(text).then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+    }, () => toast.error("Couldn't copy the code"));
+    return (_jsxs("div", { "data-slot": "lumen-code", "data-highlighted": tokens ? 'true' : 'false', className: cn('lumen-code min-w-0 text-xs leading-relaxed', wrap && 'lumen-code-wrap', lineNumbers && 'lumen-code-numbers', header && 'rounded-lg border bg-muted/40', className), children: [header && (_jsxs("div", { className: "flex h-7 items-center justify-between border-b pr-1 pl-3", children: [_jsx("span", { className: "font-mono text-xs text-muted-foreground", children: lang || 'text' }), _jsx(IconButton, { icon: copied ? CheckIcon : CopyIcon, label: copied ? 'Copied' : 'Copy code', size: "icon-xs", onClick: copy })] })), _jsx("pre", { className: "overflow-x-auto", children: _jsx("code", { children: lines.map((line, i) => (
+                    // biome-ignore lint/suspicious/noArrayIndexKey: lines have no other identity
+                    _jsxs("span", { className: "line", children: [line.map((t, j) => (
+                            // biome-ignore lint/suspicious/noArrayIndexKey: tokens have no other identity
+                            _jsx("span", { style: t.htmlStyle, children: t.content }, j))), '\n'] }, i))) }) })] }));
+}

package/dist/lumen-drawer.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+/** A drawer's width on desktop, as the resizable panel takes it ("32%", "320px"). */
+type Size = `${number}%` | `${number}px`;
+export interface LumenDrawerProps {
+    open: boolean;
+    onClose: () => void;
+    title: ReactNode;
+    /** A muted line under the title ("Active · invited Oct 16"); read aloud only when left out. */
+    description?: ReactNode;
+    /** Stacked DrawerSections; the drawer pads and scrolls them. */
+    children: ReactNode;
+    /** The footer's actions, right-aligned (a destructive action, Cancel and Save); Close when left out. */
+    footer?: ReactNode;
+    /** Left side of the footer: a count or status line ("12 releases"). */
+    footerStart?: ReactNode;
+    /** Width on desktop: starts at `defaultSize`, drags between `minSize` and `maxSize`. */
+    defaultSize?: Size;
+    minSize?: Size;
+    maxSize?: Size;
+}
+/**
+ * The suite's one pullout drawer (named LumenDrawer), on every app.
+ * Phone: a bottom sheet. Desktop: a right-side panel over the page whose width drags at its left
+ * edge, 320px to 60% by default. The sheet spans the screen so the resizable group has room; only
+ * the handle and the drawer take the pointer, so a click beside it falls through to the overlay
+ * and closes it (`!` beats the inline pointer-events Radix sets on a modal's content). Its body
+ * holds DrawerSections; its footer is always there (actions on the right, Close by default).
+ */
+export declare function LumenDrawer({ open, onClose, title, description, children, footer, footerStart, defaultSize, minSize, maxSize, }: LumenDrawerProps): import("react").JSX.Element;
+export {};

package/dist/lumen-drawer.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XIcon } from 'lucide-react';
+import { useIsMobile } from './hooks/use-mobile.js';
+import { IconButton } from './icon-button.js';
+import { Button } from './ui/button.js';
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from './ui/resizable.js';
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from './ui/sheet.js';
+/**
+ * The suite's one pullout drawer (named LumenDrawer), on every app.
+ * Phone: a bottom sheet. Desktop: a right-side panel over the page whose width drags at its left
+ * edge, 320px to 60% by default. The sheet spans the screen so the resizable group has room; only
+ * the handle and the drawer take the pointer, so a click beside it falls through to the overlay
+ * and closes it (`!` beats the inline pointer-events Radix sets on a modal's content). Its body
+ * holds DrawerSections; its footer is always there (actions on the right, Close by default).
+ */
+export function LumenDrawer({ open, onClose, title, description, children, footer, footerStart, defaultSize = '32%', minSize = '320px', maxSize = '60%', }) {
+    const isMobile = useIsMobile();
+    const head = (_jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx(SheetTitle, { className: "truncate", children: title }), _jsx(SheetDescription, { className: description ? 'truncate text-muted-foreground text-xs' : 'sr-only', children: description ?? 'Details' })] }));
+    const body = _jsx("div", { className: "flex flex-col px-4 pb-4", children: children });
+    // Every drawer has a footer, styled like a dialog's: the body scrolls above
+    // it and always ends on a clear edge. Without actions of its own it offers Close.
+    const foot = (_jsxs("footer", { "data-slot": "drawer-footer", className: "flex shrink-0 items-center gap-2 border-t bg-muted/50 px-4 py-2.5", children: [footerStart && (_jsx("div", { className: "min-w-0 flex-1 truncate text-muted-foreground text-xs", children: footerStart })), _jsx("div", { className: "ml-auto flex items-center gap-2", children: footer ?? (_jsx(SheetClose, { asChild: true, children: _jsx(Button, { type: "button", size: "sm", variant: "outline", children: "Close" }) })) })] }));
+    return (
+    // Not modal on desktop: the assistant, docked beside it, stays usable while the drawer is open.
+    _jsx(Sheet, { open: open, onOpenChange: (o) => !o && onClose(), modal: isMobile, children: isMobile ? (_jsxs(SheetContent, { side: "bottom", className: "max-h-[85svh] gap-0 overflow-hidden", children: [_jsx(SheetHeader, { className: "shrink-0 border-b", children: head }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto pt-2", children: body }), foot] })) : (_jsx(SheetContent, { side: "right", showCloseButton: false, 
+            // The resize handle's grab zone is wider than the handle, so a drag can start on the
+            // overlay; the panels library marks that pointerdown handled, and then it doesn't close.
+            onPointerDownOutside: (e) => e.detail.originalEvent.defaultPrevented && e.preventDefault(), className: "pointer-events-none! gap-0 border-0 bg-transparent shadow-none data-[side=right]:left-0 data-[side=right]:w-auto data-[side=right]:border-l-0 data-[side=right]:sm:max-w-none", children: _jsxs(ResizablePanelGroup, { orientation: "horizontal", children: [_jsx(ResizablePanel, { minSize: "40%" }), _jsx(ResizableHandle, { withHandle: true, className: "pointer-events-auto" }), _jsx(ResizablePanel, { defaultSize: defaultSize, minSize: minSize, maxSize: maxSize, "data-slot": "lumen-drawer", className: "pointer-events-auto bg-popover shadow-lg", children: _jsxs("section", { className: "flex h-full flex-col overflow-hidden", children: [_jsxs("header", { className: "flex shrink-0 items-center gap-2 border-b px-4 py-3", children: [head, _jsx(SheetClose, { asChild: true, children: _jsx(IconButton, { icon: XIcon, label: "Close", className: "ml-auto" }) })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto pt-2", children: body }), foot] }) })] }) })) }));
+}

package/dist/lumen-echart.d.ts

@@ -0,0 +1,58 @@
+import type { ECharts, EChartsCoreOption } from 'echarts/core';
+export type EChartOption = EChartsCoreOption;
+export type EChartHandlers = Record<string, (params: unknown, chart: ECharts) => void>;
+/** The theme's colours as plain values, for chart options. */
+export interface ChartTokens {
+    fg: string;
+    muted: string;
+    border: string;
+    card: string;
+    popover: string;
+    gain: string;
+    loss: string;
+    primary: string;
+    /** --chart-1 … --chart-10. */
+    series: string[];
+    font: string;
+    mono: string;
+}
+/** The theme's chart colours; new ones when light and dark flip. */
+export declare function useChartTokens(): ChartTokens;
+/** The look every chart shares: text, axes and tooltip in the theme's colours. */
+export declare function baseOption(t: ChartTokens): EChartOption;
+/** An axis in the theme's colours (merge into xAxis or yAxis). */
+export declare function axisStyle(t: ChartTokens): {
+    axisLine: {
+        lineStyle: {
+            color: string;
+        };
+    };
+    axisTick: {
+        lineStyle: {
+            color: string;
+        };
+    };
+    axisLabel: {
+        color: string;
+        fontSize: number;
+    };
+    splitLine: {
+        lineStyle: {
+            color: string;
+            opacity: number;
+        };
+    };
+    nameTextStyle: {
+        color: string;
+        fontSize: number;
+    };
+};
+export declare function LumenEChart({ option, height, on, className, label, }: {
+    option: EChartOption;
+    height?: number;
+    /** Event handlers by ECharts event name ('click', 'axisareaselected'). */
+    on?: EChartHandlers;
+    className?: string;
+    /** What the chart shows, for screen readers. */
+    label: string;
+}): import("react").JSX.Element;

package/dist/lumen-echart.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { cn } from './lib/utils.js';
+function readTokens() {
+    const css = getComputedStyle(document.documentElement);
+    const v = (name, fallback) => css.getPropertyValue(name).trim() || fallback;
+    return {
+        fg: v('--foreground', '#e6eaf2'),
+        muted: v('--muted-foreground', '#9aa4b8'),
+        border: v('--border', '#2a3242'),
+        card: v('--card', '#121826'),
+        popover: v('--popover', '#121826'),
+        gain: v('--gain', '#22c55e'),
+        loss: v('--loss', '#ef4444'),
+        primary: v('--primary', '#5b8cff'),
+        series: Array.from({ length: 10 }, (_, i) => v(`--chart-${i + 1}`, '#5b8cff')),
+        font: getComputedStyle(document.body).fontFamily || 'sans-serif',
+        mono: v('--font-mono', 'monospace'),
+    };
+}
+/** The theme's chart colours; new ones when light and dark flip. */
+export function useChartTokens() {
+    const [t, setT] = useState(readTokens);
+    useEffect(() => {
+        const o = new MutationObserver(() => setT(readTokens()));
+        o.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'style'] });
+        return () => o.disconnect();
+    }, []);
+    return t;
+}
+/** The parts of ECharts the shell draws with, registered once. */
+let loading = null;
+function loadECharts() {
+    loading ??= Promise.all([
+        import('echarts/core'),
+        import('echarts/charts'),
+        import('echarts/components'),
+        import('echarts/renderers'),
+    ]).then(([core, charts, comps, renderers]) => {
+        core.use([
+            charts.HeatmapChart,
+            charts.ScatterChart,
+            charts.LineChart,
+            charts.BarChart,
+            charts.ParallelChart,
+            comps.GridComponent,
+            comps.TooltipComponent,
+            comps.VisualMapComponent,
+            comps.ParallelComponent,
+            comps.MarkLineComponent,
+            comps.TitleComponent,
+            comps.LegendComponent,
+            renderers.CanvasRenderer,
+        ]);
+        return core;
+    });
+    return loading;
+}
+/** The look every chart shares: text, axes and tooltip in the theme's colours. */
+export function baseOption(t) {
+    return {
+        backgroundColor: 'transparent',
+        textStyle: { color: t.muted, fontFamily: t.font, fontSize: 11 },
+        color: t.series,
+        animation: false,
+        tooltip: {
+            backgroundColor: t.popover,
+            borderColor: t.border,
+            textStyle: { color: t.fg, fontSize: 12 },
+            confine: true,
+        },
+    };
+}
+/** An axis in the theme's colours (merge into xAxis or yAxis). */
+export function axisStyle(t) {
+    return {
+        axisLine: { lineStyle: { color: t.border } },
+        axisTick: { lineStyle: { color: t.border } },
+        axisLabel: { color: t.muted, fontSize: 10 },
+        splitLine: { lineStyle: { color: t.border, opacity: 0.5 } },
+        nameTextStyle: { color: t.muted, fontSize: 11 },
+    };
+}
+export function LumenEChart({ option, height = 260, on, className, label, }) {
+    const box = useRef(null);
+    const chart = useRef(null);
+    const [ready, setReady] = useState(false);
+    const handlers = useRef(on);
+    handlers.current = on;
+    useEffect(() => {
+        let alive = true;
+        let ro = null;
+        loadECharts().then((core) => {
+            if (!alive || !box.current)
+                return;
+            const c = core.init(box.current, undefined, { renderer: 'canvas' });
+            chart.current = c;
+            ro = new ResizeObserver(() => c.resize());
+            ro.observe(box.current);
+            setReady(true);
+        });
+        return () => {
+            alive = false;
+            ro?.disconnect();
+            chart.current?.dispose();
+            chart.current = null;
+        };
+    }, []);
+    useEffect(() => {
+        if (ready)
+            chart.current?.setOption(option, { notMerge: true });
+    }, [ready, option]);
+    const names = Object.keys(on ?? {}).join();
+    useEffect(() => {
+        const c = chart.current;
+        if (!ready || !c || !names)
+            return;
+        const bound = names.split(',').map((name) => {
+            const f = (p) => handlers.current?.[name]?.(p, c);
+            c.on(name, f);
+            return [name, f];
+        });
+        return () => {
+            for (const [name, f] of bound)
+                c.off(name, f);
+        };
+    }, [ready, names]);
+    return (_jsx("div", { ref: box, role: "img", "aria-label": label, className: cn('w-full', !ready && 'animate-pulse rounded-md bg-muted/40', className), style: { height } }));
+}

package/dist/lumen-filter.d.ts

@@ -0,0 +1,75 @@
+import type { JoinKey } from '@columenlabs/lumen-ui-types/domains';
+import { type ViewTokenOp } from '@columenlabs/lumen-ui-types/views';
+import { type LucideIcon } from 'lucide-react';
+import { type FilterLink, type LinkColor } from './lumen-links.js';
+export interface FilterField<T> {
+    key: string;
+    label: string;
+    icon: LucideIcon;
+    /** The row's values for this field (a row can carry several, like symbols). */
+    values: (row: T) => string[];
+    /**
+     * A number field: filtered by one condition, `> 100`, `< 0`, `= 5` or
+     * between, instead of by values.
+     */
+    number?: (row: T) => number | null;
+}
+export interface FilterToken {
+    key: string;
+    value: string;
+    /** Excluded: rows with this value are dropped ("not in"). */
+    not?: boolean;
+    /** A number condition; `value` is a number, or `a..b` for between. */
+    op?: ViewTokenOp;
+    /** Shared: its card's colour, set on the chips a coloured card publishes to
+     *  its colour group. A filter box's own tokens no longer carry it. */
+    link?: LinkColor;
+    /** The key it stands for across domains (symbol = underlying = ticker; account), so a card on
+     *  another domain follows it by that key. */
+    as?: JoinKey;
+    /** How it reads where its value is an id (a tapped account): shown in Following. */
+    text?: string;
+}
+export declare const tokenText: (t: FilterToken) => string;
+/** The rows that pass `tokens` (a widget's own filter), by the same rules as the filter box. */
+export declare function filterByTokens<T>(rows: T[], fields: FilterField<T>[], tokens: FilterToken[], 
+/** The row's text, for `contains` tokens. */
+text?: (row: T) => string[]): T[];
+/** Keeps the tokens and text, and filters `rows` by them. */
+export declare function useLumenFilter<T>(rows: T[], fields: FilterField<T>[], { text: textOf, initial, }?: {
+    /** Free-text haystack per row (a name, an id), besides the field values. */
+    text?: (row: T) => string[];
+    /** Tokens applied when the view opens (a view's default filters). */
+    initial?: FilterToken[];
+}): {
+    fields: FilterField<T>[];
+    rows: T[];
+    indexed: {
+        row: T;
+        values: Record<string, string[]>;
+        nums: Record<string, number | null>;
+    }[];
+    tokens: FilterToken[];
+    setTokens: (next: FilterToken[]) => void;
+    text: string;
+    setText: import("react").Dispatch<import("react").SetStateAction<string>>;
+    results: T[];
+    hasText: boolean;
+};
+export type LumenFilterState<T> = ReturnType<typeof useLumenFilter<T>>;
+export declare function LumenTokenizedFilter<T>({ filter, placeholder, label, className, saved, onSave, changed, link: given, }: {
+    filter: LumenFilterState<T>;
+    placeholder?: string;
+    /** The input's accessible name. */
+    label?: string;
+    className?: string;
+    /** The view's saved filters; the save button shows when the box differs from them. */
+    saved?: FilterToken[];
+    /** Saves the box's filters as the view's own. */
+    onSave?: (tokens: FilterToken[]) => void;
+    /** Other unsaved changes the save icon also saves (the page's link colours). */
+    changed?: boolean;
+    /** Its card's link colour; a coloured card shares every chip. `null`: it
+     *  never shares (a widget's own fixed filter). */
+    link?: FilterLink | null;
+}): import("react").JSX.Element;