@columenlabs/lumen-ui 0.1.159 → 0.1.160

package/dist/index.d.ts

@@ -89,7 +89,8 @@ export { type ConnectedDomain, ConnectOffer, connectionFields, linkGroupId } fro
 export { FRESHNESS, type Freshness, FreshnessIcon, FreshnessMark, freshnessLine, freshnessOf, } from './freshness.js';
 export { SourcesLine, useSourceHealth } from './source-health.js';
 export { TILE_WIDTH, Tile, TileChip, type TileOption, TileRow, TileSpark, TileToggleGroup, } from './tile.js';
-export { type FilterField, type FilterToken, LumenTokenizedFilter, type LumenFilterState, useLumenFilter, } from './lumen-filter.js';
+export { type FacetCounts, type FilterField, type FilterToken, LumenTokenizedFilter, type LumenFilterState, countsShown, useFacetCounts, useLumenFilter, } from './lumen-filter.js';
+export { LumenFilterPanel, LumenFilterPanelButton, type LumenFilterPanelProps, useFilterPanel, } from './lumen-filter-panel.js';
 export { useIsMobile } from './hooks/use-mobile.js';
 export { useBackClose } from './hooks/use-back-close.js';
 export { VIEW_ICONS, iconOf, viewIcon } from './view-icons.js';

package/dist/index.js

@@ -96,7 +96,8 @@ export { ConnectOffer, connectionFields, linkGroupId } from './connections.js';
 export { FRESHNESS, FreshnessIcon, FreshnessMark, freshnessLine, freshnessOf, } from './freshness.js';
 export { SourcesLine, useSourceHealth } from './source-health.js';
 export { TILE_WIDTH, Tile, TileChip, TileRow, TileSpark, TileToggleGroup, } from './tile.js';
-export { LumenTokenizedFilter, useLumenFilter, } from './lumen-filter.js';
+export { LumenTokenizedFilter, countsShown, useFacetCounts, useLumenFilter, } from './lumen-filter.js';
+export { LumenFilterPanel, LumenFilterPanelButton, useFilterPanel, } from './lumen-filter-panel.js';
 export { useIsMobile } from './hooks/use-mobile.js';
 export { useBackClose } from './hooks/use-back-close.js';
 export { VIEW_ICONS, iconOf, viewIcon } from './view-icons.js';

package/dist/lumen-filter-panel.d.ts

@@ -0,0 +1,30 @@
+import { type ReactNode } from 'react';
+import { type LumenFilterState } from './lumen-filter.js';
+export interface LumenFilterPanelProps<T> {
+    /** The filter's state, the same one the page's filter box draws. */
+    filter: LumenFilterState<T>;
+    /** Open (desktop: shown beside the page; phone: the sheet is up). */
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** A field's details, behind an (i) beside its name. Most fields need none. */
+    tips?: Record<string, ReactNode>;
+    /** The fields in the order shown (default: the filter's own order). Fields left out are not
+     *  shown here, but still filter from the box. */
+    order?: string[];
+    /** Its heading (default `Filters`). */
+    title?: string;
+    className?: string;
+}
+/**
+ * Remembers whether the panel is open on this device, per page (`id`). Desktop starts open,
+ * a phone closed (its sheet opens from the filter icon).
+ */
+export declare function useFilterPanel(id: string): {
+    open: boolean;
+    onOpenChange: (next: boolean) => void;
+};
+/** The filter icon that shows the panel (or opens its sheet on a phone), with how many fields
+ *  filter now. On a desktop it shows only while the panel is hidden. */
+export declare function LumenFilterPanelButton<T>({ filter, open, onOpenChange, }: Pick<LumenFilterPanelProps<T>, 'filter' | 'open' | 'onOpenChange'>): import("react").JSX.Element | null;
+/** The filter panel: a side panel on a desktop, a bottom sheet on a phone. */
+export declare function LumenFilterPanel<T>({ filter, open, onOpenChange, tips, order, title, className, }: LumenFilterPanelProps<T>): import("react").JSX.Element | null;

package/dist/lumen-filter-panel.js

@@ -0,0 +1,167 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EMPTY_VALUE } from '@columenlabs/lumen-ui-types/views';
+// The filter box laid out as a panel: every field a section of values with counts, ticked in
+// place. It reads and writes the same tokens as `LumenTokenizedFilter` (one `useLumenFilter`
+// state), so a tick here is a chip in the box and a chip's × unticks it here. Counts come from
+// `useFacetCounts`, the box's own: over the rows loaded, or the server's `facets` when the rows
+// are one page of a server's. On a desktop it is a side panel that hides to a filter icon; on a
+// phone the same body opens in a bottom sheet.
+import { BanIcon, FilterIcon, PanelLeftCloseIcon, RotateCcwIcon, SearchIcon } from 'lucide-react';
+import { useCallback, useId, useMemo, useState } from 'react';
+import { useIsMobile } from './hooks/use-mobile.js';
+import { IconButton } from './icon-button.js';
+import { InfoTip } from './info-tip.js';
+import { cn } from './lib/utils.js';
+import { countsShown, useFacetCounts, } from './lumen-filter.js';
+import { Checkbox } from './ui/checkbox.js';
+import { Input } from './ui/input.js';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from './ui/sheet.js';
+/** Values a section shows before its "more" opens the rest (and its search). */
+const SHOWN = 6;
+/** Past this many values a section offers a search over them. */
+const SEARCH_FROM = 10;
+const keyOf = (v) => v.toLowerCase();
+const isEmpty = (t) => t.op === 'empty';
+const fmt = (n) => n.toLocaleString();
+/**
+ * Remembers whether the panel is open on this device, per page (`id`). Desktop starts open,
+ * a phone closed (its sheet opens from the filter icon).
+ */
+export function useFilterPanel(id) {
+    const mobile = useIsMobile();
+    const storeKey = `lumen:filter-panel:${id}`;
+    const [kept, setKept] = useState(() => {
+        try {
+            const v = localStorage.getItem(storeKey);
+            return v === null ? null : v === '1';
+        }
+        catch {
+            return null;
+        }
+    });
+    const [phoneOpen, setPhoneOpen] = useState(false);
+    const open = mobile ? phoneOpen : (kept ?? true);
+    const onOpenChange = useCallback((next) => {
+        if (mobile)
+            return setPhoneOpen(next);
+        setKept(next);
+        try {
+            localStorage.setItem(storeKey, next ? '1' : '0');
+        }
+        catch {
+            // Kept for the visit only.
+        }
+    }, [mobile, storeKey]);
+    return { open, onOpenChange };
+}
+/** The filter icon that shows the panel (or opens its sheet on a phone), with how many fields
+ *  filter now. On a desktop it shows only while the panel is hidden. */
+export function LumenFilterPanelButton({ filter, open, onOpenChange, }) {
+    const mobile = useIsMobile();
+    const on = new Set(filter.tokens.map((t) => t.key)).size;
+    if (open && !mobile)
+        return null;
+    return (_jsxs("span", { className: "relative inline-flex", children: [_jsx(IconButton, { icon: FilterIcon, label: on ? `Show filters (${on} on)` : 'Show filters', variant: "outline", onClick: () => onOpenChange(true) }), on > 0 && (_jsx("span", { "aria-hidden": true, className: "num pointer-events-none absolute -top-1.5 -right-1.5 min-w-4 rounded-full bg-primary px-1 text-center text-xs leading-4 text-primary-foreground", children: on }))] }));
+}
+/** The filter panel: a side panel on a desktop, a bottom sheet on a phone. */
+export function LumenFilterPanel({ filter, open, onOpenChange, tips, order, title = 'Filters', className, }) {
+    const mobile = useIsMobile();
+    const fields = useMemo(() => {
+        if (!order)
+            return filter.fields;
+        return order
+            .map((k) => filter.fields.find((f) => f.key === k))
+            .filter((f) => !!f);
+    }, [filter.fields, order]);
+    const on = new Set(filter.tokens.map((t) => t.key)).size;
+    // Counted once for every section, the same counts the filter box shows.
+    const facets = useFacetCounts(filter);
+    const head = (_jsxs("div", { className: "flex items-center gap-1", children: [!mobile && _jsx("span", { className: "text-sm font-semibold", children: title }), !mobile && on > 0 && (_jsx("span", { className: "num rounded-full bg-primary px-1.5 text-xs leading-4 text-primary-foreground", children: on })), _jsx("span", { className: "flex-1" }), _jsx(IconButton, { icon: RotateCcwIcon, label: "Clear filters", disabled: !filter.tokens.length && !filter.text, onClick: filter.clear }), !mobile && (_jsx(IconButton, { icon: PanelLeftCloseIcon, label: "Hide filters", onClick: () => onOpenChange(false) }))] }));
+    const body = (_jsx("div", { className: "flex flex-col", children: fields.map((f) => (_jsx(Section, { field: f, filter: filter, facets: facets, tip: tips?.[f.key] }, f.key))) }));
+    if (mobile)
+        return (_jsx(Sheet, { open: open, onOpenChange: onOpenChange, children: _jsxs(SheetContent, { side: "bottom", className: "max-h-[85svh] gap-0 overflow-hidden", 
+                // The first thing in the sheet is a field's (i): focusing it would open its tip.
+                onOpenAutoFocus: (e) => e.preventDefault(), children: [_jsxs(SheetHeader, { className: "pr-12", children: [_jsx(SheetTitle, { children: title }), _jsx(SheetDescription, { className: "sr-only", children: "Pick what the list shows" })] }), _jsxs("div", { className: "flex items-center px-4", children: [_jsx("span", { className: "text-sm text-muted-foreground tabular-nums", children: on ? `${on} on` : 'None on' }), _jsx("span", { className: "flex-1" }), head] }), _jsx("div", { className: "min-h-0 overflow-y-auto px-4 pb-[max(1rem,env(safe-area-inset-bottom))]", children: body })] }) }));
+    if (!open)
+        return null;
+    return (_jsxs("aside", { "aria-label": title, "data-slot": "filter-panel", className: cn('flex w-64 shrink-0 flex-col gap-1 rounded-xl border bg-card p-3', className), children: [head, body] }));
+}
+/** One field: its values ticked in place, or a number field's range. */
+function Section({ field, filter, facets: { counts, empties }, tip, }) {
+    const { tokens, setTokens } = filter;
+    const shown = countsShown(filter);
+    const mine = tokens.filter((t) => t.key === field.key);
+    const not = mine.some((t) => t.not);
+    const [more, setMore] = useState(false);
+    const [q, setQ] = useState('');
+    const header = (_jsxs("div", { className: "flex h-7 items-center gap-1.5", children: [_jsx("span", { className: "truncate text-xs font-semibold", children: field.label }), tip && _jsx(InfoTip, { label: `About ${field.label}`, children: tip }), _jsx("span", { className: "flex-1" }), !field.number && mine.length > 0 && (_jsx(IconButton, { icon: BanIcon, size: "icon-xs", pressed: not, label: not ? 'Keep these values instead' : 'Leave these values out', onClick: () => setTokens(tokens.map((t) => (t.key === field.key ? flip(t, !not) : t))) }))] }));
+    if (field.number)
+        return _jsx(NumberSection, { field: field, filter: filter, header: header });
+    const counted = counts.get(field.key) ?? new Map();
+    const picked = new Set(mine.filter((t) => !isEmpty(t)).map((t) => keyOf(t.value)));
+    const all = new Map(counted);
+    for (const t of mine)
+        if (!isEmpty(t) && !all.has(t.value))
+            all.set(t.value, 0);
+    const needle = q.trim().toLowerCase();
+    const values = [...all]
+        .filter(([v]) => !needle || v.toLowerCase().includes(needle))
+        .sort((a, b) => Number(picked.has(keyOf(b[0]))) - Number(picked.has(keyOf(a[0]))) ||
+        b[1] - a[1] ||
+        a[0].localeCompare(b[0]));
+    const list = more || needle ? values : values.slice(0, SHOWN);
+    const none = empties.get(field.key) ?? 0;
+    const noneOn = mine.some(isEmpty);
+    const tick = (value) => {
+        if (picked.has(keyOf(value)))
+            setTokens(tokens.filter((t) => !(t.key === field.key && !isEmpty(t) && keyOf(t.value) === keyOf(value))));
+        else
+            setTokens([...tokens, not ? { key: field.key, value, not } : { key: field.key, value }]);
+    };
+    const tickNone = () => setTokens(noneOn
+        ? tokens.filter((t) => !(t.key === field.key && isEmpty(t)))
+        : [...tokens, { key: field.key, value: EMPTY_VALUE, op: 'empty', ...(not ? { not } : {}) }]);
+    if (!all.size && !none && !mine.length)
+        return null;
+    return (_jsxs("section", { className: "border-t py-2 first:border-t-0", "aria-label": field.label, children: [header, all.size > SEARCH_FROM && (more || needle) && (_jsxs("div", { className: "relative mb-1", children: [_jsx(SearchIcon, { className: "pointer-events-none absolute top-1/2 left-2 size-3.5 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { value: q, onChange: (e) => setQ(e.target.value), placeholder: `Find ${field.label.toLowerCase()}`, "aria-label": `Find ${field.label.toLowerCase()}`, className: "h-7 pl-7 text-xs" })] })), _jsxs("ul", { className: "flex flex-col", children: [none > 0 || noneOn ? (_jsx(Value, { label: `No ${field.label.toLowerCase()}`, n: shown ? none : null, checked: noneOn, onToggle: tickNone, muted: true })) : null, list.map(([v, n]) => (_jsx(Value, { label: v, n: shown ? n : null, checked: picked.has(keyOf(v)), onToggle: () => tick(v) }, v)))] }), !needle && values.length > SHOWN && (_jsx("button", { type: "button", className: "mt-0.5 rounded-sm text-xs text-primary hover:underline focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", onClick: () => setMore(!more), children: more ? 'Fewer' : `${fmt(values.length - SHOWN)} more` }))] }));
+}
+const flip = (t, not) => {
+    const { not: _, ...rest } = t;
+    return not ? { ...rest, not } : rest;
+};
+function Value({ label, n, checked, onToggle, muted, }) {
+    const id = useId();
+    return (_jsxs("li", { className: "flex h-7 items-center gap-2 rounded-md px-1 text-sm hover:bg-muted/60", children: [_jsx(Checkbox, { id: id, checked: checked, onCheckedChange: onToggle }), _jsx("label", { htmlFor: id, className: cn('min-w-0 flex-1 cursor-pointer truncate', muted && 'text-muted-foreground'), title: label, children: label }), n !== null && _jsx("span", { className: "num text-xs text-muted-foreground", children: fmt(n) })] }));
+}
+/** A number field: from and to, kept as one condition (`> a`, `< b` or `a..b`). */
+function NumberSection({ field, filter, header, }) {
+    const { tokens, setTokens } = filter;
+    const t = tokens.find((x) => x.key === field.key);
+    const [from0, to0] = t?.op === 'between'
+        ? t.value.split('..')
+        : t?.op === 'gt'
+            ? [t.value, '']
+            : t?.op === 'lt'
+                ? ['', t.value]
+                : t?.op === 'eq'
+                    ? [t.value, t.value]
+                    : ['', ''];
+    const [from, setFrom] = useState(from0 ?? '');
+    const [to, setTo] = useState(to0 ?? '');
+    const apply = () => {
+        const a = from.trim();
+        const b = to.trim();
+        const rest = tokens.filter((x) => x.key !== field.key);
+        const num = (s) => s !== '' && Number.isFinite(Number(s));
+        if (num(a) && num(b))
+            setTokens([...rest, { key: field.key, op: 'between', value: `${a}..${b}` }]);
+        else if (num(a))
+            setTokens([...rest, { key: field.key, op: 'gt', value: a }]);
+        else if (num(b))
+            setTokens([...rest, { key: field.key, op: 'lt', value: b }]);
+        else
+            setTokens(rest);
+    };
+    const box = (value, set, label) => (_jsx(Input, { inputMode: "decimal", value: value, onChange: (e) => set(e.target.value), onBlur: apply, onKeyDown: (e) => e.key === 'Enter' && apply(), placeholder: label, "aria-label": `${field.label} ${label.toLowerCase()}`, className: "h-7 text-xs tabular-nums" }));
+    return (_jsxs("section", { className: "border-t py-2 first:border-t-0", "aria-label": field.label, children: [header, _jsxs("div", { className: "flex items-center gap-2", children: [box(from, setFrom, 'From'), _jsx("span", { className: "text-xs text-muted-foreground", children: "\u2013" }), box(to, setTo, 'To')] })] }));
+}

package/dist/lumen-filter.d.ts

@@ -35,15 +35,38 @@ export declare const tokenText: (t: FilterToken) => string;
 export declare function filterByTokens<T>(rows: T[], fields: FilterField<T>[], tokens: FilterToken[], 
 /** The row's text, for `contains` tokens. */
 text?: (row: T) => string[]): T[];
+/** A server's counts per field: each value's rows, and the rows with no value (`none`), over the
+ *  rows every other field's tokens keep. */
+export type FacetCounts = Record<string, {
+    values: Record<string, number>;
+    none?: number;
+}>;
+/**
+ * Each field's values with their counts, shared by the filter box and the filter panel. A field
+ * counts the rows the other fields' tokens keep, so picking one value never hides its siblings.
+ * Over a server's page the counts come from the server (`facets`), never from the page.
+ */
+export declare function useFacetCounts<T>(filter: LumenFilterState<T>): {
+    counts: Map<string, Map<string, number>>;
+    empties: Map<string, number>;
+};
+/** Whether a count means something: over a server's page only when the server counted. */
+export declare const countsShown: (filter: {
+    partial: boolean;
+    facets: FacetCounts | null;
+}) => boolean;
 /** Keeps the tokens and text, and filters `rows` by them. */
-export declare function useLumenFilter<T>(rows: T[], fields: FilterField<T>[], { text: textOf, initial, partial, }?: {
+export declare function useLumenFilter<T>(rows: T[], fields: FilterField<T>[], { text: textOf, initial, partial, facets, }?: {
     /** 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[];
     /** `rows` are one page of a server's rows: a count over them is not the real count, so the
-     *  menu shows none. */
+     *  menu shows none (unless the server sends its own `facets`). */
     partial?: boolean;
+    /** The server's counts for each field's values, taken over every row the other fields'
+     *  tokens keep (one query where the rows live). Given, the box and the panel show these. */
+    facets?: FacetCounts | null;
 }): {
     fields: FilterField<T>[];
     rows: T[];
@@ -59,6 +82,7 @@ export declare function useLumenFilter<T>(rows: T[], fields: FilterField<T>[], {
     results: T[];
     hasText: boolean;
     partial: boolean;
+    facets: FacetCounts | null;
     clear: () => void;
 };
 export type LumenFilterState<T> = ReturnType<typeof useLumenFilter<T>>;

package/dist/lumen-filter.js

@@ -113,8 +113,46 @@ function onePerField(tokens) {
 }
 /** How many values a field lists in the menu before typing narrows it. */
 const PER_FIELD = 8;
+/**
+ * Each field's values with their counts, shared by the filter box and the filter panel. A field
+ * counts the rows the other fields' tokens keep, so picking one value never hides its siblings.
+ * Over a server's page the counts come from the server (`facets`), never from the page.
+ */
+export function useFacetCounts(filter) {
+    const { fields, indexed, tokens, facets } = filter;
+    return useMemo(() => {
+        const counts = new Map();
+        const empties = new Map();
+        for (const f of fields) {
+            if (f.number)
+                continue;
+            if (facets) {
+                const got = facets[f.key];
+                counts.set(f.key, new Map(Object.entries(got?.values ?? {})));
+                empties.set(f.key, got?.none ?? 0);
+                continue;
+            }
+            const m = new Map();
+            let none = 0;
+            for (const { row, values, nums } of indexed) {
+                if (!passes(values, nums, tokens, fields, f.key))
+                    continue;
+                const vs = new Set(f.values(row));
+                if (!vs.size)
+                    none++;
+                for (const v of vs)
+                    m.set(v, (m.get(v) ?? 0) + 1);
+            }
+            counts.set(f.key, m);
+            empties.set(f.key, none);
+        }
+        return { counts, empties };
+    }, [fields, indexed, tokens, facets]);
+}
+/** Whether a count means something: over a server's page only when the server counted. */
+export const countsShown = (filter) => !filter.partial || !!filter.facets;
 /** Keeps the tokens and text, and filters `rows` by them. */
-export function useLumenFilter(rows, fields, { text: textOf, initial = [], partial = false, } = {}) {
+export function useLumenFilter(rows, fields, { text: textOf, initial = [], partial = false, facets, } = {}) {
     const [tokens, setRaw] = useState(() => onePerField(initial));
     const setTokens = useCallback((next) => setRaw(onePerField(next)), []);
     const [text, setText] = useState('');
@@ -162,6 +200,7 @@ export function useLumenFilter(rows, fields, { text: textOf, initial = [], parti
         results,
         hasText,
         partial,
+        facets: facets ?? null,
         clear,
     };
 }
@@ -271,9 +310,11 @@ function NumberCondition({ label, current, tall, count, onSet, }) {
                                 } })] })), _jsx("span", { className: "w-16 shrink-0 text-right text-muted-foreground text-xs tabular-nums", children: current && ok && count ? `${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, partial } = filter;
-    // Over one page of a server's rows a count is not the real one: show none.
-    const tally = (n) => (partial ? '' : n);
+    const { fields, indexed, tokens, setTokens, text, setText, hasText } = filter;
+    // Over one page of a server's rows a count is not the real one: show none, unless the server counted.
+    const tally = (n) => (countsShown(filter) ? n : '');
+    // Text counts are over the rows loaded: none over a server's page.
+    const pageTally = (n) => (filter.partial ? '' : n);
     // 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.
@@ -382,31 +423,8 @@ export function LumenTokenizedFilter({ filter, placeholder = 'Filter…', label
         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, empties } = useMemo(() => {
-        const counts = new Map();
-        // Rows with no value on each field, for its "No <field>" row.
-        const empties = new Map();
-        for (const f of fields) {
-            if (f.number)
-                continue;
-            const m = new Map();
-            let none = 0;
-            for (const { row, values, nums } of indexed) {
-                if (!passes(values, nums, tokens, fields, f.key))
-                    continue;
-                const vs = new Set(f.values(row));
-                if (!vs.size)
-                    none++;
-                for (const v of vs)
-                    m.set(v, (m.get(v) ?? 0) + 1);
-            }
-            counts.set(f.key, m);
-            empties.set(f.key, none);
-        }
-        return { counts, empties };
-    }, [fields, indexed, tokens]);
+    // Each field's values with counts (the same counts the filter panel shows).
+    const { counts, empties } = useFacetCounts(filter);
     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. */
@@ -531,7 +549,7 @@ export function LumenTokenizedFilter({ filter, placeholder = 'Filter…', label
                                     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: partial ? undefined : (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: tally(wordOf(containsWord, notFor(CONTAINS_KEY))) })] })), tokens
+                                }, 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: filter.partial ? undefined : (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: pageTally(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 && (_jsxs(CommandGroup, { className: "px-1 py-0.5", children: [(!needle || noneOf(activeField.label).toLowerCase().includes(needle)) &&
                         emptyRow(activeField), 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: () => {
@@ -540,7 +558,7 @@ export function LumenTokenizedFilter({ filter, placeholder = 'Filter…', label
                             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: tally(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
+                    }, 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: pageTally(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))) })), (q.startsWith('no') || (q.length > 1 && 'empty'.startsWith(q))) &&
                 fields.some((f) => !f.number &&

package/dist/lumen-layout.d.ts

@@ -2,7 +2,7 @@ import { type CustomViewConfig } from '@columenlabs/lumen-ui-types/views';
 import type { RowData } from '@tanstack/react-table';
 import { type LucideIcon } from 'lucide-react';
 import { type ReactElement, type ReactNode } from 'react';
-import { type FilterToken } from './lumen-filter.js';
+import { type FacetCounts, type FilterToken } from './lumen-filter.js';
 import { type LinkColor } from './lumen-links.js';
 import { type LumenLoad } from './lumen-source.js';
 import { type LumenViewProps, type ServerPaging } from './lumen-view.js';
@@ -130,6 +130,17 @@ export interface LumenLayoutViewProps<T> {
     columnPicker?: boolean;
     /** No filter box (a short list, e.g. a playbook's variants). */
     hideFilter?: boolean;
+    /** The server's counts for each filter field's values over the rows the other chips keep, so the
+     *  box and the filter panel count every row, not one page (with `paging`). */
+    facets?: FacetCounts | null;
+    /** A filter panel beside the page: the same filter as the box, each field's values ticked in
+     *  place. `id` keeps it open or hidden per device; `tips` gives a field an InfoTip. */
+    filterPanel?: {
+        id: string;
+        tips?: Record<string, ReactNode>;
+        order?: string[];
+        title?: string;
+    };
     /**
      * How the person's chips, sort and grouping save (rule C, by surface):
      * `document` (a saved view, the default) holds them for the visit and shows Changed with Save

package/dist/lumen-layout.js

@@ -25,6 +25,7 @@ import { lazyPart } from './lazy-part.js';
 import { cn } from './lib/utils.js';
 import { LumenDrawer } from './lumen-drawer.js';
 import { LumenTokenizedFilter, filterByTokens, useLumenFilter, } from './lumen-filter.js';
+import { LumenFilterPanel, LumenFilterPanelButton, useFilterPanel } from './lumen-filter-panel.js';
 import { LumenGrid } from './lumen-grid.js';
 import { KEY_FIELDS, LinksProvider, followedBy, followsText, keyFilterFields, shared, useLinkState, useLinks, usePublishLinks, useRowPick, } from './lumen-links.js';
 import { LumenStates, useCardLoads } from './lumen-source.js';
@@ -102,6 +103,9 @@ function useKeptColors(cards) {
 // gutters on both sides with shadows, so neither a card border nor a wide table scrolled under it
 // peeks out beside it; shadows, unlike a wider box, never make the page scroll sideways.
 const INTRO = 'sticky left-0 flex w-(--view-w) flex-col gap-(--shell-section-gap) has-[[data-slot=tabs-list]]:top-0 has-[[data-slot=tabs-list]]:z-30 has-[[data-slot=tabs-list]]:bg-background has-[[data-slot=tabs-list]]:shadow-[var(--shell-gutter)_0_0_0_var(--color-background),calc(-1*var(--shell-gutter))_0_0_0_var(--color-background)]';
+/** The filter panel beside the page's scroller: one screen tall like it, scrolling on its own,
+ *  in the page's left gutter. */
+const PANEL = 'ml-(--shell-gutter) h-[calc(100svh-var(--shell-header-height)-var(--shell-status-height)-2*var(--shell-gutter))] overflow-y-auto';
 /** The page's one scroller: cards, filter and table scroll together. */
 function Scroller({ fit, children }) {
     // Tables' pinned headers stop under a sticky tab row (--pin-top), not behind it. The intro can
@@ -216,7 +220,7 @@ function LayoutTable({ card, base, config, rows, load, state, onDetails, openKey
     const domain = useMemo(() => withViewFields(base, own), [base, own]);
     return (_jsx(LumenViewCard, { id: card.id, domain: domain, config: own, rows: rows, load: load, state: state, title: card.title ?? config.name, onDetails: onDetails, openKey: openKey, controls: controls, shown: card.controls, onColumns: onLayout && ((columns) => onLayout(tableLayoutOf({ ...own, columns }))) }));
 }
-function ViewLayout({ crumbs, actions, meta, status, intro, cards: extra, lead, domain: base, config, rows, onConfigChange: saveConfig, editable: canEdit, editor, onDuplicate, onDelete, onReset, load, state, tile, rowTitle, viewId, onShownRows, onSummaryRows, selection, onOpen, openKey: openedKey, rowPick: initialPick, groupActions, onTokens, paging, viewTools, columnPicker, hideFilter, save: saveMode = 'document', }) {
+function ViewLayout({ crumbs, actions, meta, status, intro, cards: extra, lead, domain: base, config, rows, onConfigChange: saveConfig, editable: canEdit, editor, onDuplicate, onDelete, onReset, load, state, tile, rowTitle, viewId, onShownRows, onSummaryRows, selection, onOpen, openKey: openedKey, rowPick: initialPick, groupActions, onTokens, paging, viewTools, columnPicker, hideFilter, facets, filterPanel, save: saveMode = 'document', }) {
     const onConfigChange = canEdit === false ? undefined : saveConfig;
     // The registry's join fields for the keys the rows carry (Symbol, Account), then the view's own
     // formulas and formats.
@@ -230,7 +234,9 @@ function ViewLayout({ crumbs, actions, meta, status, intro, cards: extra, lead,
         initial: config.filters.default,
         // A server's page is not every row: the menu's counts would be over that page only.
         partial: !!paging && (paging.more || paging.page > 0 || (paging.total ?? 0) > rows.length),
+        facets,
     });
+    const panel = useFilterPanel(filterPanel?.id ?? '');
     // A view patched while open (the assistant's card move, a save from another tab) applies its new saved
     // filters at once; the person's own unsaved tokens stay while the saved ones
     // do not change.
@@ -505,7 +511,7 @@ function ViewLayout({ crumbs, actions, meta, status, intro, cards: extra, lead,
     // A server's page cannot be grouped (a group would bucket the one page only), unless the
     // server groups it.
     const groupButton = viewOn('group') && (!paging || paging.groups) ? group.button : null;
-    const viewFilter = !showBox && !groupButton ? undefined : (_jsxs(_Fragment, { children: [showBox && (_jsx(LumenTokenizedFilter, { filter: filter, label: `Filter ${config.name}`, className: "min-w-0 flex-1", saved: config.filters.default, link: {
+    const viewFilter = !showBox && !groupButton ? undefined : (_jsxs(_Fragment, { children: [filterPanel && (_jsx(LumenFilterPanelButton, { filter: filter, open: panel.open, onOpenChange: panel.onOpenChange })), showBox && (_jsx(LumenTokenizedFilter, { filter: filter, label: `Filter ${config.name}`, className: "min-w-0 flex-1", saved: config.filters.default, link: {
                     color: viewColor,
                     onPick: (color) => links.setColor(viewCardId, color),
                 } })), groupButton] }));
@@ -629,7 +635,7 @@ function ViewLayout({ crumbs, actions, meta, status, intro, cards: extra, lead,
                         setDraft(saved);
                         setDraftView({});
                         setLayout(true);
-                    } })] }))), children: [_jsx(LinksProvider, { links: links, children: _jsx(Scroller, { fit: fit, children: body }) }), _jsx(LumenDrawer, { open: open !== null, title: openTitle, onClose: () => setDetails(null), children: open !== null && (_jsx(DetailsBody, { domain: domain, row: open, columns: columns, chips: config.chips ?? [] })) }), onConfigChange && (_jsxs(_Fragment, { children: [_jsx(AddWidgetDialog, { open: adding, onOpenChange: setAdding, domain: domain, cards: cards, name: config.name, onAdd: (c) => {
+                    } })] }))), children: [_jsx(LinksProvider, { links: links, children: filterPanel ? (_jsxs("div", { className: "flex min-w-0", children: [_jsx(LumenFilterPanel, { filter: filter, open: panel.open, onOpenChange: panel.onOpenChange, tips: filterPanel.tips, order: filterPanel.order, title: filterPanel.title, className: PANEL }), _jsx("div", { className: "min-w-0 flex-1", children: _jsx(Scroller, { fit: fit, children: body }) })] })) : (_jsx(Scroller, { fit: fit, children: body })) }), _jsx(LumenDrawer, { open: open !== null, title: openTitle, onClose: () => setDetails(null), children: open !== null && (_jsx(DetailsBody, { domain: domain, row: open, columns: columns, chips: config.chips ?? [] })) }), onConfigChange && (_jsxs(_Fragment, { children: [_jsx(AddWidgetDialog, { open: adding, onOpenChange: setAdding, domain: domain, cards: cards, name: config.name, onAdd: (c) => {
                             setAdding(false);
                             // A second table starts as a copy of the view's layout, then goes its own way.
                             putCard(isTableCard(c) && mainTable && !c.source

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.159",
+  "version": "0.1.160",
   "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.159",
+    "@columenlabs/lumen-ui-types": "0.1.160",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",