@columenlabs/lumen-ui 0.0.0-stage → 0.2.1

package/dist/lumen-filter.js

@@ -0,0 +1,546 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CONTAINS_KEY, meetsNumber } from '@columenlabs/lumen-ui-types/views';
+// The one filter box every view uses, redone after p2e's:
+// one chip per field in the sans face, `Account IRA, Roth ×`, included or excluded as a whole
+// (`Symbol not AAPL`). A chip's tap opens its field: Include / Exclude, then its values ticked,
+// with Only and the rows each keeps; unticking one leaves every other filter alone. The box's
+// empty part (or +N) opens every filter on, each with ×, then the fields to add. Different
+// fields: all must match (AND). Free text matches the row's text and any field value; picking
+// "Text contains" keeps it as a chip. It filters the rows already loaded, on the client. The box
+// is one row that never grows and always keeps room to type; crowded chips fold to `Sector: 3`,
+// then behind +N. Phones get a bottom sheet.
+import { Command as CommandPrimitive } from 'cmdk';
+import { ChevronLeftIcon, ChevronRightIcon, SaveIcon, SearchIcon, TextSearchIcon, XIcon, } from 'lucide-react';
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useIsMobile } from './hooks/use-mobile.js';
+import { cn } from './lib/utils.js';
+import { LINK_NAMES, LinkDot, LinkPicker, linkVar, useAutoFilterLink, } from './lumen-links.js';
+import { Button } from './ui/button.js';
+import { Checkbox } from './ui/checkbox.js';
+import { CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandShortcut, } from './ui/command.js';
+import { Input } from './ui/input.js';
+import { InputGroup, InputGroupAddon, InputGroupButton } from './ui/input-group.js';
+import { Popover, PopoverAnchor, PopoverContent } from './ui/popover.js';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from './ui/sheet.js';
+import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.js';
+const OP_SIGN = { gt: '>', lt: '<', eq: '=', between: '' };
+export const tokenText = (t) => `${t.not ? '-' : ''}${t.key}:${t.op ? OP_SIGN[t.op] : ''}${t.value}`;
+/** A number condition as people read it: `> 100`, `0 – 500`. */
+const conditionText = (t) => t.op === 'between' ? t.value.replace('..', ' – ') : `${OP_SIGN[t.op ?? 'eq']} ${t.value}`;
+/** `field:>100`, `field:<0`, `field:=5`, `field:0..500` typed out for a number field. */
+const NUMBER_TYPED = /^(\w+):(>|<|=)?(-?\d+(?:\.\d+)?)(?:\.\.(-?\d+(?:\.\d+)?))?$/;
+/** Same field and value, included or not: a value sits in one chip only. */
+const same = (a, b) => a.key === b.key && a.value.toLowerCase() === b.value.toLowerCase();
+const token = (key, value, not) => not ? { key, value, not } : { key, value };
+/** The `contains` chip's field: free text over the row's own text. */
+const CONTAINS = {
+    key: CONTAINS_KEY,
+    label: 'Text',
+    icon: TextSearchIcon,
+    values: () => [],
+};
+/** How long a `contains` value may be (the token's limit). */
+const CONTAINS_MAX = 40;
+/** Keeps the rows whose values pass every field's tokens, skipping the field `except`.
+ * `values[CONTAINS_KEY]` holds the row's text, which `contains` tokens read. */
+function passes(values, nums, tokens, fields, except) {
+    for (const f of fields) {
+        if (f.key === except)
+            continue;
+        const of = tokens.filter((t) => t.key === f.key);
+        if (f.number) {
+            if (!of.every((t) => meetsNumber(t.op, t.value, nums[f.key] ?? null)))
+                return false;
+            continue;
+        }
+        const have = values[f.key] ?? [];
+        const inc = of.filter((t) => !t.not).map((t) => t.value.toLowerCase());
+        const exc = of.filter((t) => t.not).map((t) => t.value.toLowerCase());
+        if (inc.length && !have.some((v) => inc.includes(v)))
+            return false;
+        if (exc.length && have.some((v) => exc.includes(v)))
+            return false;
+    }
+    if (except === CONTAINS_KEY)
+        return true;
+    const hay = values[CONTAINS_KEY] ?? [];
+    const holds = (w) => hay.some((v) => v.includes(w));
+    const words = tokens.filter((t) => t.key === CONTAINS_KEY);
+    const inc = words.filter((t) => !t.not).map((t) => t.value.toLowerCase());
+    const exc = words.filter((t) => t.not).map((t) => t.value.toLowerCase());
+    if (inc.length && !inc.some(holds))
+        return false;
+    if (exc.length && exc.some(holds))
+        return false;
+    return true;
+}
+/** A row value as filter text; a value that came back as a number or object (bad data) never throws. */
+const lower = (v) => String(v ?? '').toLowerCase();
+/** The rows that pass `tokens` (a widget's own filter), by the same rules as the filter box. */
+export function filterByTokens(rows, fields, tokens, 
+/** The row's text, for `contains` tokens. */
+text) {
+    if (!tokens.length)
+        return rows;
+    const used = fields.filter((f) => tokens.some((t) => t.key === f.key));
+    return rows.filter((row) => passes(Object.fromEntries([
+        ...used.map((f) => [f.key, f.number ? [] : f.values(row).map(lower)]),
+        [CONTAINS_KEY, (text?.(row) ?? []).map(lower)],
+    ]), Object.fromEntries(used.filter((f) => f.number).map((f) => [f.key, f.number?.(row) ?? null])), tokens, used));
+}
+/** A field is included or excluded as a whole: where a field holds both, as
+ * filters saved before that do, its included values stay. */
+function onePerField(tokens) {
+    const inc = new Set(tokens.filter((t) => !t.not && !t.op).map((t) => t.key));
+    return tokens.some((t) => t.not && inc.has(t.key))
+        ? tokens.filter((t) => !(t.not && inc.has(t.key)))
+        : tokens;
+}
+/** How many values a field lists in the menu before typing narrows it. */
+const PER_FIELD = 8;
+/** Keeps the tokens and text, and filters `rows` by them. */
+export function useLumenFilter(rows, fields, { text: textOf, initial = [], } = {}) {
+    const [tokens, setRaw] = useState(() => onePerField(initial));
+    const setTokens = useCallback((next) => setRaw(onePerField(next)), []);
+    const [text, setText] = useState('');
+    const indexed = useMemo(() => rows.map((row) => ({
+        row,
+        values: Object.fromEntries([
+            ...fields.map((f) => [f.key, f.number ? [] : f.values(row).map(lower)]),
+            [CONTAINS_KEY, (textOf?.(row) ?? []).map(lower)],
+        ]),
+        nums: Object.fromEntries(fields.filter((f) => f.number).map((f) => [f.key, f.number?.(row) ?? null])),
+    })), [rows, fields, textOf]);
+    const results = useMemo(() => {
+        const q = text.trim().toLowerCase();
+        // A half-typed token ("sym", "symbol:", "-") narrows the menu, not the rows.
+        const free = q && !q.startsWith('-') && !q.includes(':') && !fields.some((f) => f.key.startsWith(q))
+            ? q
+            : '';
+        return indexed
+            .filter(({ values, nums }) => {
+            if (!passes(values, nums, tokens, fields))
+                return false;
+            if (!free)
+                return true;
+            return Object.values(values)
+                .flat()
+                .some((v) => v.includes(free));
+        })
+            .map(({ row }) => row);
+    }, [indexed, fields, tokens, text]);
+    /** Whether rows have text of their own, so the box offers "Text contains". */
+    const hasText = !!textOf;
+    return { fields, rows, indexed, tokens, setTokens, text, setText, results, hasText };
+}
+/** A chip's widest (max-w-60), and the gap between chips (gap-1). */
+const CHIP_MAX = 240;
+const GAP = 4;
+/** Room the box always keeps for typing (desktop) or for the tap target (phone). */
+const TYPE_ROOM = 112;
+const TAP_ROOM = 64;
+/** Which chips fit one row of `avail` px (after p2e's filter): a chip with 2+
+ * values folds to a count when its values pass the chip's cap or the row is tight (biggest saving
+ * first); then chips from the end move behind "+N". */
+function planChips(avail, full, short, more) {
+    const width = full.map((w) => Math.min(w, CHIP_MAX));
+    const count = full.map(() => false);
+    full.forEach((w, i) => {
+        if (w > CHIP_MAX && (short[i] ?? 0) < CHIP_MAX) {
+            count[i] = true;
+            width[i] = short[i] ?? 0;
+        }
+    });
+    const total = (n) => width.slice(0, n).reduce((s, w) => s + w + GAP, 0);
+    const order = full
+        .map((_, i) => i)
+        .filter((i) => !count[i] && (short[i] ?? 0) < (width[i] ?? 0))
+        .sort((a, b) => (width[b] ?? 0) - (short[b] ?? 0) - ((width[a] ?? 0) - (short[a] ?? 0)));
+    for (const i of order) {
+        if (total(width.length) <= avail)
+            break;
+        count[i] = true;
+        width[i] = short[i] ?? 0;
+    }
+    let shown = width.length;
+    if (total(shown) > avail) {
+        shown = 0;
+        while (shown < width.length && total(shown + 1) + more <= avail)
+            shown++;
+    }
+    return { shown, count };
+}
+/** A chip's words: `Account IRA, Roth`, `Symbol not AAPL`, `Sector: 3`, `Symbol not in: 2`,
+ * `Unrealized > 0`, `Text “div”`. */
+function chipWords(chip, field, form) {
+    const name = field?.label ?? chip.key;
+    const condition = field?.number && chip.tokens[0];
+    if (condition)
+        return { name, verb: '', shown: conditionText(condition), all: '' };
+    const quote = chip.key === CONTAINS_KEY;
+    const all = chip.tokens.map((t) => (quote ? `“${t.value}”` : t.value)).join(', ');
+    const counted = form === 'count' && chip.tokens.length > 1;
+    const verb = chip.not ? (counted ? 'not in:' : 'not') : counted ? ':' : '';
+    return { name, verb, shown: counted ? String(chip.tokens.length) : all, all };
+}
+const chipTitle = (w) => `${w.name} ${w.verb === ':' ? '' : `${w.verb} `}${w.all || w.shown}`.replace(/\s+/g, ' ');
+/** One field's chip: its name, values and ×, in the sans face. A tap opens the field's values. */
+function FilterChip({ chip, field, form, linkColor, className, onEdit, onRemove, }) {
+    const words = chipWords(chip, field, form);
+    const title = chipTitle(words);
+    const tint = linkColor ?? null;
+    return (_jsxs("span", { "data-slot": "lumen-filter-chip", title: title, className: cn('inline-flex h-6 max-w-60 shrink-0 items-center overflow-hidden rounded-md border border-border bg-muted text-sm', chip.not && 'border-destructive/35 bg-destructive/10', className), style: tint
+            ? {
+                background: `color-mix(in srgb, ${linkVar(tint)} 14%, transparent)`,
+                borderColor: `color-mix(in srgb, ${linkVar(tint)} 35%, transparent)`,
+            }
+            : undefined, children: [_jsxs(Button, { variant: "ghost", size: "xs", className: "h-full min-w-0 shrink gap-1 rounded-none pr-0.5 pl-1.5 font-normal hover:bg-transparent", "aria-label": `Edit ${title}`, onClick: onEdit, children: [tint && _jsx(LinkDot, { color: tint, className: "size-2" }), _jsxs("span", { className: "shrink-0 text-muted-foreground", children: [words.name, words.verb === ':' && ':'] }), words.verb && words.verb !== ':' && (_jsx("span", { className: "shrink-0 text-destructive", children: words.verb })), _jsx("span", { className: "min-w-0 truncate tabular-nums", children: words.shown })] }), _jsx(Button, { variant: "ghost", size: "icon-xs", className: "size-5 shrink-0 text-muted-foreground hover:bg-transparent hover:text-foreground [&_svg]:size-3", "aria-label": `Remove ${title}`, onClick: onRemove, children: _jsx(XIcon, {}) })] }));
+}
+const OPS = [
+    { op: 'lt', label: 'Less' },
+    { op: 'gt', label: 'Greater' },
+    { op: 'between', label: 'Between' },
+];
+const isNumber = (v) => /^-?\d+(\.\d+)?$/.test(v.trim());
+/** A number field's condition in the menu, two lines: Less than, Greater
+ * than or Between, then the number (0 by default). Each change filters at once. */
+function NumberCondition({ label, current, tall, count, onSet, }) {
+    const [from = '0', to = '0'] = current?.value.split('..') ?? [];
+    const [op, setOp] = useState(current?.op === 'eq' ? 'gt' : (current?.op ?? 'gt'));
+    const [a, setA] = useState(from);
+    const [b, setB] = useState(current?.op === 'between' ? to : '0');
+    const value = (o, x, y) => o === 'between' ? `${x.trim()}..${y.trim()}` : x.trim();
+    const set = (o, x, y) => {
+        if (isNumber(x) && (o !== 'between' || isNumber(y)))
+            onSet(o, value(o, x, y));
+    };
+    const box = cn('min-w-0 flex-1 px-2 tabular-nums [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none', tall ? 'h-10 text-base' : 'h-8 text-sm');
+    const ok = isNumber(a) && (op !== 'between' || isNumber(b));
+    return (_jsxs("div", { className: "flex flex-col gap-1.5 px-2 py-1", onKeyDown: (e) => {
+            e.stopPropagation();
+            if (e.key === 'Enter')
+                e.preventDefault();
+        }, children: [_jsx(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, value: current ? op : '', onValueChange: (v) => {
+                    if (!v)
+                        return;
+                    setOp(v);
+                    set(v, a, b);
+                }, "aria-label": `${label} condition`, className: "w-full", children: OPS.map((o) => (_jsx(ToggleGroupItem, { value: o.op, className: cn('flex-1 font-normal', tall ? 'h-10 text-base' : 'h-8 text-sm'), children: o.label }, o.op))) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { type: "number", inputMode: "decimal", className: box, "aria-label": `${label} ${op === 'between' ? 'from' : 'value'}`, value: a, onFocus: (e) => e.target.select(), onChange: (e) => {
+                            setA(e.target.value);
+                            set(op, e.target.value, b);
+                        } }), op === 'between' && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground text-sm", children: "and" }), _jsx(Input, { type: "number", inputMode: "decimal", className: box, "aria-label": `${label} to`, value: b, onFocus: (e) => e.target.select(), onChange: (e) => {
+                                    setB(e.target.value);
+                                    set(op, a, e.target.value);
+                                } })] })), _jsx("span", { className: "w-16 shrink-0 text-right text-muted-foreground text-xs tabular-nums", children: current && ok ? `${count(op, value(op, a, b))} rows` : '' })] })] }));
+}
+export function LumenTokenizedFilter({ filter, placeholder = 'Filter…', label = 'Filter', className, saved, onSave, changed, link: given, }) {
+    const { fields, indexed, tokens, setTokens, text, setText, hasText } = filter;
+    // A box its card passes no link takes the card's own (every card carries a square).
+    const link = useAutoFilterLink(tokens, given);
+    // Phone: the box is one tappable row and the menu is a bottom sheet.
+    const mobile = useIsMobile();
+    const [open, setOpen] = useState(false);
+    // The field the menu is in (a chip's tap opens its field), with its own search text.
+    const [field, setField] = useState(null);
+    const [search, setSearch] = useState('');
+    // Include or Exclude picked for a field before it has a value.
+    const [pendingNot, setPendingNot] = useState(false);
+    // The values picked when a field opened stay first while it is open, so ticking one never moves the list.
+    const [pinned, setPinned] = useState(() => new Set());
+    const box = useRef(null);
+    const input = useRef(null);
+    const measure = useRef(null);
+    const menuBox = useRef(null);
+    const fieldOf = (key) => (key === CONTAINS_KEY ? CONTAINS : fields.find((f) => f.key === key));
+    // One chip per field, in the order they were added.
+    const chips = useMemo(() => {
+        const out = [];
+        for (const t of tokens) {
+            const chip = out.find((c) => c.key === t.key);
+            if (chip)
+                chip.tokens.push(t);
+            else
+                out.push({ key: t.key, not: !!t.not, tokens: [t] });
+        }
+        return out;
+    }, [tokens]);
+    const chipOf = (key) => chips.find((c) => c.key === key);
+    // A leading `-` excludes what is picked next (a field with values keeps its own Include/Exclude).
+    const typed = (field ? search : text).trim().toLowerCase();
+    const negate = typed.startsWith('-');
+    const q = negate ? typed.slice(1) : typed;
+    // `field:value` typed out opens that field, searching its values.
+    const [qKey, qValue] = !field && q.includes(':') ? q.split(':', 2) : [null, q];
+    const typedField = qKey ? fields.find((f) => f.key === qKey || f.key.startsWith(qKey)) : null;
+    const active = field ?? typedField?.key ?? null;
+    const needle = field ? q : (qValue ?? '');
+    const notFor = (key) => {
+        const chip = chipOf(key);
+        return chip ? chip.not : key === field ? pendingNot : negate;
+    };
+    const toggle = (key, value) => {
+        const t = { key, value };
+        if (tokens.some((x) => same(x, t))) {
+            setTokens(tokens.filter((x) => !same(x, t)));
+            return;
+        }
+        setTokens([...tokens, token(key, value, notFor(key))]);
+        if (!field)
+            setText('');
+        else
+            setSearch('');
+    };
+    const only = (key, value) => {
+        setTokens([...tokens.filter((x) => x.key !== key), token(key, value, notFor(key))]);
+    };
+    const setNot = (key, not) => {
+        setPendingNot(not);
+        setTokens(tokens.map((t) => (t.key === key ? token(key, t.value, not) : t)));
+    };
+    // A number field holds one condition: a new one replaces it.
+    const setCondition = (key, op, value) => setTokens([...tokens.filter((x) => x.key !== key), { key, value, op }]);
+    // Rows a number condition keeps, given the other fields' tokens.
+    const numberCount = (key, op, value) => indexed.filter((r) => passes(r.values, r.nums, tokens, fields, key) &&
+        meetsNumber(op, value, r.nums[key] ?? null)).length;
+    const removeChip = (key) => {
+        setTokens(tokens.filter((t) => t.key !== key));
+        if (field === key)
+            setField(null);
+    };
+    const focus = () => {
+        if (!mobile)
+            input.current?.focus();
+    };
+    // A chip's tap opens its field; the box's empty part, or +N, opens every filter.
+    const openField = (key) => {
+        setField(key);
+        setPinned(new Set(tokens.filter((t) => t.key === key).map((t) => t.value)));
+        setSearch('');
+        setPendingNot(false);
+        if (key)
+            setText('');
+        setOpen(true);
+        focus();
+    };
+    const clear = () => {
+        setTokens([]);
+        setText('');
+        setField(null);
+    };
+    const sameTokens = (a, b) => {
+        const keyOf = (ts) => ts.map(tokenText).sort().join('\n');
+        return keyOf(a) === keyOf(b);
+    };
+    const dirty = !!onSave && (!!changed || !sameTokens(tokens, saved ?? []));
+    // Each field's values with counts. A field counts the rows the other fields' tokens keep, so a
+    // chip can take more values of its own field.
+    const counts = useMemo(() => {
+        const out = new Map();
+        for (const f of fields) {
+            if (f.number)
+                continue;
+            const m = new Map();
+            for (const { row, values, nums } of indexed) {
+                if (!passes(values, nums, tokens, fields, f.key))
+                    continue;
+                for (const v of new Set(f.values(row)))
+                    m.set(v, (m.get(v) ?? 0) + 1);
+            }
+            out.set(f.key, m);
+        }
+        return out;
+    }, [fields, indexed, tokens]);
+    const picked = (key, value) => tokens.some((t) => same(t, { key, value }));
+    /** A field's values matching `n`: picked ones first, then the most common. In the open field
+     * "picked" means picked when it opened, so the order holds still while values are ticked. */
+    const valuesOf = (key, n, limit) => {
+        const first = (v) => (key === field ? pinned.has(v) : picked(key, v));
+        const m = new Map(counts.get(key) ?? []);
+        for (const t of tokens)
+            if (t.key === key && !m.has(t.value))
+                m.set(t.value, 0);
+        return [...m]
+            .filter(([v]) => !n || v.toLowerCase().includes(n))
+            .sort((a, b) => Number(first(b[0])) - Number(first(a[0])) || b[1] - a[1] || a[0].localeCompare(b[0]))
+            .slice(0, limit);
+    };
+    // Free text (no `field:`) can stay as a "Text contains" chip.
+    const word = hasText && q && !active && !q.includes(':') ? q.slice(0, CONTAINS_MAX).trim() : '';
+    const containsWord = hasText && active === CONTAINS_KEY && needle ? needle.slice(0, CONTAINS_MAX).trim() : '';
+    const wordOf = (w, not) => w
+        ? indexed.filter((r) => passes(r.values, r.nums, tokens, fields, CONTAINS_KEY) &&
+            (r.values[CONTAINS_KEY] ?? []).some((v) => v.includes(w)) !== not).length
+        : 0;
+    // One row: the chips that fit show, the rest wait behind "+N".
+    const [fit, setFit] = useState({
+        shown: chips.length,
+        count: [],
+    });
+    // biome-ignore lint/correctness/useExhaustiveDependencies: re-measures when the chips change.
+    useLayoutEffect(() => {
+        const row = box.current;
+        const sizes = measure.current;
+        if (!row || !sizes)
+            return;
+        const run = () => {
+            const reserved = [...row.querySelectorAll('[data-reserved]')].reduce((s, el) => s + el.offsetWidth, 0);
+            // The typing room never goes.
+            const avail = row.clientWidth - reserved - (mobile ? TAP_ROOM : TYPE_ROOM) - GAP * 2;
+            const widths = (form) => [...sizes.querySelectorAll(`[data-form=${form}]`)].map((el) => el.offsetWidth);
+            const more = sizes.querySelector('[data-more]')?.offsetWidth ?? 32;
+            setFit(planChips(avail, widths('full'), widths('count'), more));
+        };
+        run();
+        const ro = new ResizeObserver(run);
+        ro.observe(row);
+        return () => ro.disconnect();
+    }, [chips, mobile]);
+    const shownChips = chips.slice(0, fit.shown);
+    const hiddenChips = chips.slice(fit.shown);
+    const chipProps = (c) => ({
+        chip: c,
+        field: fieldOf(c.key),
+        linkColor: link?.color,
+        onEdit: () => openField(c.key),
+        onRemove: () => removeChip(c.key),
+    });
+    const onKeyDown = (e) => {
+        const empty = !(field ? search : text);
+        if (e.key === 'Backspace' && empty) {
+            // In a field, Backspace goes back to every filter; else it drops the last chip.
+            if (field)
+                setField(null);
+            else if (tokens.length)
+                setTokens(tokens.slice(0, -1));
+        }
+        else if (e.key === 'Escape') {
+            if (field) {
+                e.preventDefault();
+                setField(null);
+            }
+            else if (!mobile)
+                setOpen(false);
+        }
+        else if (e.key === 'Enter') {
+            const raw = (field ? `${field}:${search}` : text).trim();
+            // `field:>100`, `field:0..500` typed out on a number field sets its condition.
+            const n = NUMBER_TYPED.exec(raw);
+            const nf = n && fields.find((x) => x.number && x.key === n[1]?.toLowerCase());
+            if (n?.[3] && nf) {
+                e.preventDefault();
+                const op = n[4] ? 'between' : n[2] === '>' ? 'gt' : n[2] === '<' ? 'lt' : 'eq';
+                setCondition(nf.key, op, n[4] ? `${n[3]}..${n[4]}` : n[3]);
+                setText('');
+                setSearch('');
+                return;
+            }
+            // `field:value` (or `-field:value`) typed out in full adds the token even when no row has it.
+            const m = /^(-?)(\w+):(\S+)$/.exec(raw);
+            const f = m && fields.find((x) => !x.number && x.key === m[2]?.toLowerCase());
+            if (m?.[3] && f && !valuesOf(f.key, m[3].toLowerCase(), 1).length) {
+                e.preventDefault();
+                toggle(f.key, m[3]);
+            }
+        }
+        else {
+            setOpen(true);
+        }
+    };
+    // The shell's item keeps a tick at its end for pickers; the filter shows its own.
+    const tall = cn('[&>svg:last-child]:hidden', mobile && 'min-h-11');
+    const shortcut = 'tracking-normal tabular-nums';
+    // A value row: its tick, the value, Only and the rows it keeps.
+    const valueRow = (key, value, count, prefix) => {
+        const on = picked(key, value);
+        return (_jsxs(CommandItem, { value: `${key}:${value}`, onSelect: () => toggle(key, value), className: tall, children: [_jsx(Checkbox, { checked: on, tabIndex: -1, "aria-hidden": true, className: "pointer-events-none" }), prefix && _jsx("span", { className: "shrink-0 text-muted-foreground", children: prefix }), _jsx("span", { className: "min-w-0 truncate", children: value }), _jsx(Button, { variant: "ghost", size: "xs", className: "-my-1 ml-auto h-6 px-1.5 font-normal text-muted-foreground opacity-0 group-data-selected/command-item:opacity-100 max-md:opacity-100", "aria-label": `Only ${value}`, onMouseDown: (e) => e.preventDefault(), onClick: (e) => {
+                        e.stopPropagation();
+                        only(key, value);
+                    }, children: "Only" }), _jsx(CommandShortcut, { className: cn('ml-0 w-8 text-right', shortcut), children: count })] }, `${key}:${value}`));
+    };
+    const summary = (c) => {
+        const w = chipWords(c, fieldOf(c.key), 'full');
+        return (_jsxs("span", { className: "ml-auto min-w-0 truncate pl-3 text-right", children: [c.not && _jsx("span", { className: "text-destructive", children: "not " }), _jsx("span", { className: "tabular-nums", children: w.shown })] }));
+    };
+    const activeField = active ? fieldOf(active) : undefined;
+    const activeChip = active ? chipOf(active) : undefined;
+    const menu = activeField ? (_jsxs(_Fragment, { children: [_jsxs(CommandGroup, { className: "px-1 py-0.5", children: [_jsxs("div", { className: "flex items-center gap-1 px-1 py-1", children: [_jsx(Button, { variant: "ghost", size: "icon-xs", "aria-label": "All filters", onMouseDown: (e) => e.preventDefault(), onClick: () => {
+                                    setField(null);
+                                    setText('');
+                                    focus();
+                                }, children: _jsx(ChevronLeftIcon, {}) }), _jsx(activeField.icon, { className: "size-4 text-muted-foreground" }), _jsx("span", { className: "font-medium", children: activeField.label }), !activeField.number && (_jsxs(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, className: "ml-auto", value: notFor(activeField.key) ? 'exclude' : 'include', onValueChange: (v) => v && setNot(activeField.key, v === 'exclude'), "aria-label": `${activeField.label}: include or exclude`, children: [_jsx(ToggleGroupItem, { value: "include", className: "h-7 px-2 text-xs font-normal", children: "Include" }), _jsx(ToggleGroupItem, { value: "exclude", className: "h-7 px-2 text-xs font-normal", children: "Exclude" })] }))] }), activeField.number && (_jsx(NumberCondition, { label: activeField.label, current: tokens.find((t) => t.key === activeField.key), tall: mobile, count: (op, value) => numberCount(activeField.key, op, value), onSet: (op, value) => setCondition(activeField.key, op, value) }, activeField.key))] }), active === CONTAINS_KEY ? (_jsxs(CommandGroup, { className: "px-1 py-0.5", children: [containsWord && !picked(CONTAINS_KEY, containsWord) && (_jsxs(CommandItem, { value: `${CONTAINS_KEY}:${containsWord}`, onSelect: () => toggle(CONTAINS_KEY, containsWord), className: tall, children: [_jsx(TextSearchIcon, { className: "text-muted-foreground" }), _jsxs("span", { className: "min-w-0 truncate", children: ["\u201C", containsWord, "\u201D"] }), _jsx(CommandShortcut, { className: shortcut, children: wordOf(containsWord, notFor(CONTAINS_KEY)) })] })), tokens
+                        .filter((t) => t.key === CONTAINS_KEY)
+                        .map((t) => valueRow(CONTAINS_KEY, t.value, wordOf(t.value, !!t.not)))] })) : (!activeField.number && (_jsx(CommandGroup, { className: "px-1 py-0.5", children: valuesOf(activeField.key, needle, 200).map(([v, n]) => valueRow(activeField.key, v, n)) }))), _jsx(CommandEmpty, { children: "No matching values." })] })) : q ? (_jsxs(_Fragment, { children: [_jsx(CommandEmpty, { children: "No matching values." }), word && (_jsx(CommandGroup, { className: "px-1 py-0.5", children: _jsxs(CommandItem, { value: `${CONTAINS_KEY}:${word}`, onSelect: () => {
+                        setTokens([
+                            ...tokens.filter((t) => !same(t, { key: CONTAINS_KEY, value: word })),
+                            token(CONTAINS_KEY, word, chipOf(CONTAINS_KEY)?.not ?? negate),
+                        ]);
+                        setText('');
+                    }, className: tall, children: [_jsx(TextSearchIcon, { className: "text-muted-foreground" }), _jsxs("span", { className: "min-w-0 truncate", children: [_jsxs("span", { className: "text-muted-foreground", children: ["Text ", negate ? 'not contains' : 'contains', ' '] }), "\u201C", word, "\u201D"] }), _jsx(CommandShortcut, { className: shortcut, children: wordOf(word, negate) })] }) })), fields.some((f) => f.label.toLowerCase().startsWith(q) || f.key.startsWith(q)) && (_jsx(CommandGroup, { heading: "Fields", className: "px-1 py-0.5", children: fields
+                    .filter((f) => f.label.toLowerCase().startsWith(q) || f.key.startsWith(q))
+                    .map((f) => (_jsxs(CommandItem, { value: `field:${f.key}`, onSelect: () => openField(f.key), className: tall, children: [_jsx(f.icon, { className: "text-muted-foreground" }), f.label, _jsx(ChevronRightIcon, { className: "ml-auto text-muted-foreground" })] }, f.key))) })), fields
+                .filter((f) => !f.number)
+                .map((f) => {
+                const vs = valuesOf(f.key, q, PER_FIELD);
+                return (vs.length > 0 && (_jsx(CommandGroup, { heading: f.label, className: "px-1 py-0.5", children: vs.map(([v, n]) => valueRow(f.key, v, n)) }, f.key)));
+            })] })) : (_jsxs(_Fragment, { children: [chips.length > 0 && (_jsx(CommandGroup, { heading: "Filters", className: "px-1 py-0.5", children: chips.map((c) => {
+                    const f = fieldOf(c.key);
+                    return (_jsxs(CommandItem, { value: `chip:${c.key}`, onSelect: () => openField(c.key), className: tall, children: [link?.color ? (_jsx(LinkDot, { color: link.color })) : (f && _jsx(f.icon, { className: "text-muted-foreground" })), _jsx("span", { className: "shrink-0", children: f?.label ?? c.key }), summary(c), _jsx(Button, { variant: "ghost", size: "icon-xs", className: "-my-1 shrink-0 text-muted-foreground", "aria-label": `Remove ${f?.label ?? c.key} filter`, onMouseDown: (e) => e.preventDefault(), onClick: (e) => {
+                                    e.stopPropagation();
+                                    removeChip(c.key);
+                                }, children: _jsx(XIcon, {}) })] }, c.key));
+                }) })), _jsx(CommandGroup, { heading: chips.length ? 'Add' : undefined, className: "px-1 py-0.5", children: fields
+                    .filter((f) => !chipOf(f.key))
+                    .map((f) => (_jsxs(CommandItem, { value: `field:${f.key}`, onSelect: () => openField(f.key), className: tall, children: [_jsx(f.icon, { className: "text-muted-foreground" }), f.label, _jsx(CommandShortcut, { className: shortcut, children: f.number ? '' : (counts.get(f.key)?.size ?? 0) })] }, f.key))) })] }));
+    // A field's last row: the card's colour (every chip of a coloured card is shared) and Remove.
+    const footer = activeChip && (_jsxs("div", { className: "flex items-center gap-1 border-t px-2 py-1.5", children: [link && (_jsxs("span", { className: "flex items-center gap-1 text-muted-foreground text-xs", children: [_jsx(LinkPicker, { color: link.color, label: activeField?.label ?? activeChip.key, onPick: link.onPick }), link.color
+                        ? `Shared with ${LINK_NAMES[link.color].toLowerCase()} cards`
+                        : 'Share with cards'] })), _jsx(Button, { variant: "ghost", size: "xs", className: "ml-auto font-normal text-muted-foreground hover:text-destructive", onMouseDown: (e) => e.preventDefault(), onClick: () => removeChip(activeChip.key), children: "Remove filter" })] }));
+    const clearButton = (dirty || tokens.length > 0 || text) && (_jsxs(InputGroupAddon, { align: "inline-end", "data-reserved": true, className: "gap-0.5", children: [dirty && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(InputGroupButton, { size: "icon-xs", "aria-label": "Save filters to view", onClick: () => onSave?.(tokens), children: _jsx(SaveIcon, {}) }) }), _jsx(TooltipContent, { children: "Save filters to view" })] })), (tokens.length > 0 || text) && (_jsx(InputGroupButton, { size: "icon-xs", "aria-label": "Clear filter", onClick: clear, children: _jsx(XIcon, {}) }))] }));
+    // Off-screen copies of every chip, to measure what fits.
+    const sizes = (_jsxs("div", { ref: measure, "aria-hidden": true, inert: true, className: "pointer-events-none invisible absolute top-0 left-0 flex h-0 gap-1 overflow-hidden", children: [chips.flatMap((c) => ['full', 'count'].map((form) => (_jsx("span", { "data-form": form, className: "flex shrink-0", children: _jsx(FilterChip, { ...chipProps(c), form: form, className: "max-w-none" }) }, `${c.key}:${form}`)))), _jsxs(Button, { "data-more": true, variant: "outline", size: "xs", className: "h-6 shrink-0 px-2", children: ["+", chips.length] })] }));
+    const chipRow = (_jsxs(_Fragment, { children: [shownChips.map((c, i) => (_jsx(FilterChip, { ...chipProps(c), form: fit.count[i] ? 'count' : 'full', className: cn(i === 0 && '-ml-1') }, c.key))), hiddenChips.length > 0 && (_jsxs(Button, { variant: "outline", size: "xs", className: "h-6 shrink-0 px-2 font-normal tabular-nums", "aria-label": `${hiddenChips.length} more filters`, onClick: () => openField(null), children: ["+", hiddenChips.length] }))] }));
+    const hint = tokens.length ? 'Type to filter…' : placeholder;
+    const searchHint = activeField
+        ? `Search ${activeField.label.toLowerCase()}…`
+        : hasText
+            ? 'Search text or values…'
+            : 'Search values…';
+    if (mobile) {
+        return (_jsxs("div", { className: cn('relative w-full', className), children: [sizes, _jsxs(InputGroup, { ref: box, "data-slot": "lumen-filter", className: "flex-nowrap gap-1 overflow-hidden bg-background", children: [_jsx(InputGroupAddon, { "data-reserved": true, children: _jsx(InputGroupButton, { size: "icon-xs", "aria-label": label, onClick: () => openField(null), children: _jsx(SearchIcon, {}) }) }), chipRow, _jsx(Button, { variant: "ghost", className: "h-full min-w-16 flex-1 justify-start px-1 font-normal text-muted-foreground hover:bg-transparent", "aria-label": label, onClick: () => openField(null), children: hint }), clearButton] }), _jsx(Sheet, { open: open, onOpenChange: (o) => {
+                        setOpen(o);
+                        if (!o)
+                            setField(null);
+                    }, children: _jsxs(SheetContent, { side: "bottom", className: "max-h-[85svh] gap-0 rounded-t-xl", 
+                        // The keyboard would cover the menu: search waits for a tap.
+                        onOpenAutoFocus: (e) => e.preventDefault(), children: [_jsxs(SheetHeader, { className: "flex-row items-center pb-2", children: [_jsx(SheetTitle, { children: "Filters" }), _jsx(SheetDescription, { className: "sr-only", children: "Pick values to filter the rows." }), tokens.length > 0 && (_jsx(Button, { variant: "ghost", size: "sm", className: "mr-8 ml-auto font-normal text-muted-foreground", onClick: clear, children: "Clear all" }))] }), _jsxs(CommandPrimitive, { shouldFilter: false, loop: true, className: "flex min-h-0 flex-1 flex-col gap-2 px-3 pb-[max(1rem,env(safe-area-inset-bottom))]", children: [_jsx(CommandInput, { value: field ? search : text, onValueChange: field ? setSearch : setText, onKeyDown: onKeyDown, placeholder: searchHint, "aria-label": label, className: "text-base" }), _jsx(CommandList, { className: "max-h-none min-h-0 flex-1", "aria-label": "Filter suggestions", children: menu }), footer] })] }) })] }));
+    }
+    return (_jsxs(CommandPrimitive, { shouldFilter: false, className: cn('relative w-full', className), loop: true, children: [sizes, _jsxs(Popover, { open: open, onOpenChange: (o) => {
+                    setOpen(o);
+                    if (!o)
+                        setField(null);
+                }, children: [_jsx(PopoverAnchor, { asChild: true, children: _jsxs(InputGroup, { ref: box, "data-slot": "lumen-filter", className: "flex-nowrap gap-1 overflow-hidden bg-background", children: [_jsx(InputGroupAddon, { "data-reserved": true, children: _jsx(SearchIcon, {}) }), chipRow, _jsx(CommandPrimitive.Input, { ref: input, "data-slot": "input-group-control", className: "h-full min-w-16 flex-1 bg-transparent px-1 text-sm outline-none placeholder:text-muted-foreground", placeholder: activeField ? searchHint : hint, "aria-label": label, value: field ? search : text, onValueChange: (v) => {
+                                        if (field)
+                                            setSearch(v);
+                                        else
+                                            setText(v);
+                                        setOpen(true);
+                                    }, onKeyDown: onKeyDown, onFocus: () => setOpen(true), onClick: () => setOpen(true), 
+                                    // Focus moving into the menu's number row keeps the menu open.
+                                    onBlur: (e) => {
+                                        if (!menuBox.current?.contains(e.relatedTarget)) {
+                                            setOpen(false);
+                                            setField(null);
+                                        }
+                                    } }), clearButton] }) }), _jsxs(PopoverContent, { ref: menuBox, align: "start", className: "w-80 max-w-[calc(100vw-2rem)] p-0", onOpenAutoFocus: (e) => e.preventDefault(), 
+                        // The click that opens the menu lands on the box: it must not count as "outside".
+                        onInteractOutside: (e) => {
+                            if (box.current?.contains(e.target))
+                                e.preventDefault();
+                        }, 
+                        // Clicks in the menu must not blur the input first (number inputs still take focus).
+                        onMouseDown: (e) => {
+                            if (!e.target.closest('input'))
+                                e.preventDefault();
+                        }, children: [_jsx(CommandList, { "aria-label": "Filter suggestions", children: menu }), footer] })] })] }));
+}

package/dist/lumen-finder.d.ts

@@ -0,0 +1,62 @@
+import { type ComponentType, type ReactNode } from 'react';
+import { type LumenOption } from './lumen-selector.js';
+/** A chip under the box (Pages, Banks, Symbols); `All` is always first. */
+export type LumenFinderScope = string;
+/** What one kind of nav page (the nav's `pageType`) shows as: its group, its chip and its icon. */
+export interface LumenFinderPageType {
+    group: string;
+    scope: LumenFinderScope;
+    icon: Icon;
+}
+/**
+ * How Find reads in an app: its chips, how each kind of nav page groups, where
+ * Settings sections sit and the box's placeholder. Every field has a default for a plain app.
+ */
+export interface LumenFinderConfig {
+    /** The chips after All; Pages and Settings by default. */
+    scopes?: LumenFinderScope[];
+    /** Nav pages by `pageType`; a type not listed (or none) is a page. */
+    pageTypes?: Record<string, LumenFinderPageType>;
+    /** The chip Settings sections show under; `Settings` by default. */
+    settingsScope?: LumenFinderScope;
+    placeholder?: string;
+}
+/** One row of Find: a LumenSelector option that goes somewhere or does something. */
+export interface LumenFinderRow extends LumenOption {
+    group: string;
+    /** The chip it shows under (Pages, Symbols, Banks); a scope with no chip shows under All only. */
+    scope: LumenFinderScope;
+    /** Where it goes: a path on this app, or another app's address. ⌘↵ opens it in a new tab. */
+    href?: string;
+    /** What it does instead (opens a sheet or a chart). */
+    run?: () => void;
+    /** Made for what was typed (a ticker's chains): shown first, whatever the query. */
+    pinned?: boolean;
+}
+interface FinderState {
+    open: boolean;
+    query: string;
+}
+/** Whether Find is open and what is typed in it; null outside the shell. */
+export declare const useLumenFinder: () => FinderState | null;
+/** Opens Find; null outside the shell. */
+export declare const useOpenLumenFinder: () => ((open: boolean) => void) | null;
+/** Adds rows to Find while the caller is mounted. Pass a memoized list (or null for none). */
+export declare function useLumenFinderRows(rows: LumenFinderRow[] | null): void;
+type Icon = ComponentType<{
+    className?: string;
+}>;
+/** Find for the shell: ⌘K, the rows apps add and the dialog. LumenShell mounts it. */
+export declare function LumenFinder({ app, settings, openSettings, config, children, }: {
+    app: string;
+    settings: {
+        id: string;
+        title: string;
+    }[];
+    openSettings: (id: string) => void;
+    config?: LumenFinderConfig;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The header's Find button. */
+export declare function LumenFinderButton(): import("react").JSX.Element | null;
+export {};