@columenlabs/lumen-ui 0.1.118 → 0.1.120

package/dist/lumen-filter.d.ts

@@ -36,11 +36,14 @@ export declare function filterByTokens<T>(rows: T[], fields: FilterField<T>[], t
 /** 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, }?: {
+export declare function useLumenFilter<T>(rows: T[], fields: FilterField<T>[], { text: textOf, initial, partial, }?: {
     /** 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. */
+    partial?: boolean;
 }): {
     fields: FilterField<T>[];
     rows: T[];
@@ -55,6 +58,8 @@ export declare function useLumenFilter<T>(rows: T[], fields: FilterField<T>[], {
     setText: import("react").Dispatch<import("react").SetStateAction<string>>;
     results: T[];
     hasText: boolean;
+    partial: boolean;
+    clear: () => void;
 };
 export type LumenFilterState<T> = ReturnType<typeof useLumenFilter<T>>;
 export declare function LumenTokenizedFilter<T>({ filter, placeholder, label, className, saved, onSave, changed, link: given, }: {

package/dist/lumen-filter.js

@@ -114,7 +114,7 @@ function onePerField(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 = [], } = {}) {
+export function useLumenFilter(rows, fields, { text: textOf, initial = [], partial = false, } = {}) {
     const [tokens, setRaw] = useState(() => onePerField(initial));
     const setTokens = useCallback((next) => setRaw(onePerField(next)), []);
     const [text, setText] = useState('');
@@ -146,7 +146,24 @@ export function useLumenFilter(rows, fields, { text: textOf, initial = [], } = {
     }, [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 };
+    /** Takes every token and the typed text off. */
+    const clear = useCallback(() => {
+        setRaw([]);
+        setText('');
+    }, []);
+    return {
+        fields,
+        rows,
+        indexed,
+        tokens,
+        setTokens,
+        text,
+        setText,
+        results,
+        hasText,
+        partial,
+        clear,
+    };
 }
 /** A chip's widest (max-w-60), and the gap between chips (gap-1). */
 const CHIP_MAX = 240;
@@ -251,10 +268,12 @@ function NumberCondition({ label, current, tall, count, onSet, }) {
                         } }), 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` : '' })] })] }));
+                                } })] })), _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 } = filter;
+    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);
     // 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.
@@ -493,14 +512,14 @@ export function LumenTokenizedFilter({ filter, placeholder = 'Filter…', label
         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}`));
+                    }, children: "Only" }), _jsx(CommandShortcut, { className: cn('ml-0 w-8 text-right', shortcut), children: tally(count) })] }, `${key}:${value}`));
     };
     // A field's "No <field>" row, pinned above its values: the rows with no value (Exclude: any).
     const emptyRow = (f, include) => {
         const n = empties.get(f.key) ?? 0;
         if (!n && !hasEmpty(f.key))
             return null;
-        return (_jsxs(CommandItem, { value: `${f.key}:${EMPTY_VALUE}`, onSelect: () => toggleEmpty(f.key, include ? false : undefined), className: tall, children: [_jsx(Checkbox, { checked: hasEmpty(f.key), tabIndex: -1, "aria-hidden": true, className: "pointer-events-none" }), _jsx("span", { className: "min-w-0 truncate text-muted-foreground italic", children: noneOf(f.label) }), _jsx(CommandShortcut, { className: cn('ml-auto w-8 text-right', shortcut), children: n })] }, `${f.key}:${EMPTY_VALUE}`));
+        return (_jsxs(CommandItem, { value: `${f.key}:${EMPTY_VALUE}`, onSelect: () => toggleEmpty(f.key, include ? false : undefined), className: tall, children: [_jsx(Checkbox, { checked: hasEmpty(f.key), tabIndex: -1, "aria-hidden": true, className: "pointer-events-none" }), _jsx("span", { className: "min-w-0 truncate text-muted-foreground italic", children: noneOf(f.label) }), _jsx(CommandShortcut, { className: cn('ml-auto w-8 text-right', shortcut), children: tally(n) })] }, `${f.key}:${EMPTY_VALUE}`));
     };
     const summary = (c) => {
         const w = chipWords(c, fieldOf(c.key), 'full');
@@ -512,7 +531,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: (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
+                                }, 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
                         .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: () => {
@@ -521,7 +540,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: 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: 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
                     .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 &&
@@ -543,7 +562,7 @@ export function LumenTokenizedFilter({ filter, placeholder = 'Filter…', label
                                 }, 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))) })] }));
+                    .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 ? '' : tally(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`

package/dist/lumen-layout.js

@@ -228,6 +228,8 @@ function ViewLayout({ crumbs, actions, meta, status, intro, cards: extra, lead,
     const filter = useLumenFilter(rows, filterFields, {
         text: domain.text,
         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),
     });
     // 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
@@ -549,7 +551,7 @@ function ViewLayout({ crumbs, actions, meta, status, intro, cards: extra, lead,
         return {
             ...place,
             wide: isTableCard(c) && c.w === GRID_COLS && c.h === undefined,
-            node: c.source ? (_jsx(SourcedCard, { card: c, name: config.name, controls: controls })) : isTableCard(c) && c.id !== viewCardId ? (_jsx(LayoutTable, { card: c, base: joins.domain, config: config, rows: c.filter.length ? filterByTokens(rows, widgetFields, c.filter) : rows, load: scope(c.id, load), state: state, onDetails: onDetails, controls: controls, onLayout: onConfigChange ? (table) => putCard({ ...c, table }) : undefined })) : isTableCard(c) ? (_jsx(LumenView, { domain: domain, config: config, rows: viewRows, total: rows.length, paging: paging, groupBy: group.groupField, pivot: pivot, subgroup: group.sub, load: scope(c.id, load), state: state, title: c.title ?? config.name, selection: selection, onDetails: rowPick.onTap ?? onDetails, tapped: rowPick.tapped, groupActions: groupActions, controls: controls, inLayout: true, tools: viewTools, filter: viewFilter, filterCount: filter.tokens.length, strip: _jsx(ConnectOffer, { domain: domain, rows: rows, config: config, read: joins.read, cardKey: viewId ?? config.name, onConnect: onConfigChange ? connect : undefined }), link: cardLink(c.id, viewFollows, viewColor ? filter.tokens.length : 0), shown: c.controls, onColumns: onConfigChange && columnPicker !== false
+            node: c.source ? (_jsx(SourcedCard, { card: c, name: config.name, controls: controls })) : isTableCard(c) && c.id !== viewCardId ? (_jsx(LayoutTable, { card: c, base: joins.domain, config: config, rows: c.filter.length ? filterByTokens(rows, widgetFields, c.filter) : rows, load: scope(c.id, load), state: state, onDetails: onDetails, controls: controls, onLayout: onConfigChange ? (table) => putCard({ ...c, table }) : undefined })) : isTableCard(c) ? (_jsx(LumenView, { domain: domain, config: config, rows: viewRows, total: rows.length, paging: paging, groupBy: group.groupField, pivot: pivot, subgroup: group.sub, load: scope(c.id, load), state: state, title: c.title ?? config.name, selection: selection, onDetails: rowPick.onTap ?? onDetails, tapped: rowPick.tapped, groupActions: groupActions, controls: controls, inLayout: true, tools: viewTools, filter: viewFilter, filterCount: filter.tokens.length, onClearFilter: filter.clear, strip: _jsx(ConnectOffer, { domain: domain, rows: rows, config: config, read: joins.read, cardKey: viewId ?? config.name, onConnect: onConfigChange ? connect : undefined }), link: cardLink(c.id, viewFollows, viewColor ? filter.tokens.length : 0), shown: c.controls, onColumns: onConfigChange && columnPicker !== false
                     ? (columns) => onConfigChange({ ...config, columns })
                     : undefined, onAddColumn: addColumn, sort: heldSort, onSort: setHeldSort })) : (_jsx(LumenSavedWidget, { widget: c, title: cardTitle(c, config.name), domain: domain, rows: narrow(rows, followed(c.id)), link: cardLink(c.id, followed(c.id)), fields: widgetFields, merge: mergeFlat, onDetails: onDetails, load: scope(c.id, load), tiles: 'tile' in c
                     ? cardOf(c)

package/dist/lumen-view-card.js

@@ -43,7 +43,7 @@ export function LumenViewCard({ id, domain: base, config: saved, rows, load, tit
         linked: color ? filter.tokens.length : 0,
     };
     const on = (k) => controlOn({ kind: 'table', controls: savedControls }, k);
-    return (_jsx(LumenView, { domain: domain, config: config, rows: shown, total: rows.length, groupBy: group.groupField, pivot: group.pivot, subgroup: group.sub, load: load, state: state, onDetails: pick.onTap ?? onDetails, tapped: pick.tapped, title: title ?? config.name, inLayout: true, cardId: cardId, controls: controls, tools: tools, note: note, filter: _jsxs(_Fragment, { children: [on('filter') && (_jsx(LumenTokenizedFilter, { filter: filter, label: `Filter ${config.name}`, className: "min-w-0 flex-1", link: link || undefined })), on('group') && group.button] }), filterCount: filter.tokens.length, link: link || undefined, shown: savedControls, onColumns: (columns) => {
+    return (_jsx(LumenView, { domain: domain, config: config, rows: shown, total: rows.length, groupBy: group.groupField, pivot: group.pivot, subgroup: group.sub, load: load, state: state, onDetails: pick.onTap ?? onDetails, tapped: pick.tapped, title: title ?? config.name, inLayout: true, cardId: cardId, controls: controls, tools: tools, note: note, filter: _jsxs(_Fragment, { children: [on('filter') && (_jsx(LumenTokenizedFilter, { filter: filter, label: `Filter ${config.name}`, className: "min-w-0 flex-1", link: link || undefined })), on('group') && group.button] }), filterCount: filter.tokens.length, onClearFilter: filter.clear, link: link || undefined, shown: savedControls, onColumns: (columns) => {
             setConfig((c) => ({ ...c, columns }));
             onColumns?.(columns);
         } }));

package/dist/lumen-view.d.ts

@@ -116,7 +116,9 @@ export interface LumenViewProps<T> {
     /** The rows' loading state (`useLumenLoad`): the view shows its skeleton, progress bar, ↻, a
      *  failure with Retry and, with Observability details on, its load time. */
     load?: LumenLoad;
-    /** Shown in place of the table instead of the rows, e.g. an empty state ("No accounts yet"). */
+    /** Shown in place of the table instead of the rows, e.g. an empty state ("No accounts yet").
+     *  While a filter is on it shows in the table's body instead, under the headers, so the
+     *  filter stays in reach. */
     state?: ReactNode;
     /** The card's title; left out: the view's name. */
     title?: string;
@@ -144,6 +146,8 @@ export interface LumenViewProps<T> {
      *  not the page's), and how many tokens it holds. */
     filter?: ReactNode;
     filterCount?: number;
+    /** Takes every filter off: an empty table under a filter offers Clear filters. */
+    onClearFilter?: () => void;
     /** A line under the filter: the card's Link offer. */
     strip?: ReactNode;
     /** Its link colour on the layout. */
@@ -180,7 +184,7 @@ export interface AddColumn {
  * and ⋯, and its own filter and Group (they narrow this table only); its body
  * the table (grouped one level, or the pivot) with the loading states.
  */
-export declare function LumenView<T extends RowData>({ domain, config, rows, total, paging: server, groupBy: pickedGroup, pivot: pickedPivot, subgroup, load: sourceLoad, state, title, selection, onDetails, tapped, groupActions, controls, inLayout: inScroller, cardId, tools, filter, filterCount, strip, link, note, onColumns, onAddColumn, sort, onSort, shown, }: LumenViewProps<T>): import("react").JSX.Element;
+export declare function LumenView<T extends RowData>({ domain, config, rows, total, paging: server, groupBy: pickedGroup, pivot: pickedPivot, subgroup, load: sourceLoad, state, title, selection, onDetails, tapped, groupActions, controls, inLayout: inScroller, cardId, tools, filter, filterCount, onClearFilter, strip, link, note, onColumns, onAddColumn, sort, onSort, shown, }: LumenViewProps<T>): import("react").JSX.Element;
 /** A field's colour for its header: its topic's source (a broker green, an app brown) where
  *  the group names one, else its group's (Holding, Symbol, Account, Formulas). */
 export declare function colorOf<T>(domain: ViewDomain<T>, f: ViewField<T> | undefined): string | null;
@@ -231,4 +235,8 @@ export interface LumenTableProps<T> {
     /** The groups come from a server (`ServerPaging.groups`): their order, counts and open state,
      *  and each open group's rows. */
     serverGroups?: ServerGroups | null;
+    /** What the body says when no row shows (an app's empty state); left out: "No rows match." */
+    emptyState?: ReactNode;
+    /** Takes every filter off: the empty body offers Clear filters. */
+    onClearFilter?: () => void;
 }

package/dist/lumen-view.js

@@ -8,8 +8,8 @@ import { bytesParts, controlOn, isCountAgg, isDollarFormat, viewPaginationSchema
 // details drawer; LumenLayout (lumen-layout.tsx) is the page around it. Rows are the ones the app
 // already loaded; everything here runs on the client.
 import { createPaginatedRowModel, createSortedRowModel, flexRender, rowPaginationFeature, rowSortingFeature, sortFns, tableFeatures, useTable, } from '@tanstack/react-table';
-import { ArrowDownIcon, ArrowDownWideNarrowIcon, ArrowUpIcon, ArrowUpNarrowWideIcon, ChartCandlestick, ChartSpline, ChevronRightIcon, ChevronsDownIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, Columns3CogIcon, CornerDownRightIcon, DownloadIcon, ListCollapseIcon, PlusIcon, SigmaIcon, UserPenIcon, } from 'lucide-react';
-import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ArrowDownIcon, ArrowDownWideNarrowIcon, ArrowUpIcon, ArrowUpNarrowWideIcon, ChartCandlestick, ChartSpline, ChevronRightIcon, ChevronsDownIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, Columns3CogIcon, CornerDownRightIcon, DownloadIcon, FilterXIcon, ListCollapseIcon, PlusIcon, SigmaIcon, UserPenIcon, } from 'lucide-react';
+import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { ColorChip, ColorDot } from './color-dot.js';
 import { DrawerSection } from './drawer-section.js';
 import { useFloatingHead } from './floating-head.js';
@@ -224,7 +224,7 @@ async function downloadCsv({ name, columns, rows, groupBy, sort, hidden, }) {
  * and ⋯, and its own filter and Group (they narrow this table only); its body
  * the table (grouped one level, or the pivot) with the loading states.
  */
-export function LumenView({ domain, config, rows, total = rows.length, paging: server, groupBy: pickedGroup = null, pivot: pickedPivot = false, subgroup, load: sourceLoad, state, title = config.name, selection, onDetails, tapped, groupActions, controls, inLayout: inScroller = false, cardId = 'view', tools, filter, filterCount, strip, link, note, onColumns, onAddColumn, sort = config.sort, onSort, shown, }) {
+export function LumenView({ domain, config, rows, total = rows.length, paging: server, groupBy: pickedGroup = null, pivot: pickedPivot = false, subgroup, load: sourceLoad, state, title = config.name, selection, onDetails, tapped, groupActions, controls, inLayout: inScroller = false, cardId = 'view', tools, filter, filterCount, onClearFilter, strip, link, note, onColumns, onAddColumn, sort = config.sort, onSort, shown, }) {
     // Its controls (Edit widget ▸ Controls): Pager, Columns and Download here.
     const on = (k) => controlOn({ kind: 'table', controls: shown }, k);
     const cell = useGridCell();
@@ -258,6 +258,10 @@ export function LumenView({ domain, config, rows, total = rows.length, paging: s
     const [pageIndex, setPageIndex] = useState(0);
     useEffect(() => setPageSize(pagination.size), [pagination.size]);
     const sub = subgroupOf(domain, subgroup === undefined ? config.subgroup : subgroup);
+    // An empty state replaces the table, its filter and tools, unless a filter is on: then it sits
+    // in the table's body, under the headers, with the filter still there to change or clear.
+    const filtered = !!filterCount;
+    const blank = filtered ? null : state;
     // Folded lines and their rows stay on one page, so a fold shows every row like a grouping.
     const paging = !server && pagination.on && on('pager') && !state && !groupBy && !pivot && !sub?.under;
     // A fit table wraps its text to the width there is; the rest scroll sideways.
@@ -334,10 +338,10 @@ export function LumenView({ domain, config, rows, total = rows.length, paging: s
     const pager = turn ? (_jsx(LumenPager, { ...turn })) : served ? (_jsx("span", { className: "num px-2 text-xs text-muted-foreground", children: served.list ? `${served.list.length.toLocaleString()}${served.more ? '+' : ''} groups` : '' })) : (_jsx("span", { className: "num px-2 text-xs text-muted-foreground", children: count }));
     // The page footer (`pagination.footer`): under the table while there is more than one page.
     const foot = turn && pagination.footer && !state && (turn.more || turn.total > turn.size) ? (_jsx(LumenPageFooter, { total: turn.total, page: turn.page, size: turn.size, onPage: turn.onPage, more: turn.more })) : null;
-    const table = pivot && config.pivot ? (_jsx(PivotTable, { domain: domain, rows: rows, pivot: config.pivot })) : (_jsx(LumenTable, { domain: domain, columns: columns, rows: tableRows, groupBy: groupBy, subgroup: sub, chips: chips, page: paging ? { index: page, size: pageSize } : null, inView: inLayout, fit: fit, onDetails: onDetails, tapped: tapped, selection: selection, groupActions: groupActions, sort: sort, onSort: sorted, serverSorts: server ? (server.sorts ?? []) : undefined, serverGroups: served, total: config.total !== false, add: onAddColumn || onColumns
+    const table = pivot && config.pivot && !state ? (_jsx(PivotTable, { domain: domain, rows: rows, pivot: config.pivot })) : (_jsx(LumenTable, { domain: domain, columns: columns, rows: state ? [] : tableRows, groupBy: groupBy, subgroup: sub, chips: chips, page: paging ? { index: page, size: pageSize } : null, inView: inLayout, fit: fit, onDetails: onDetails, tapped: tapped, selection: selection, groupActions: groupActions, sort: sort, onSort: sorted, serverSorts: server ? (server.sorts ?? []) : undefined, serverGroups: state ? null : served, emptyState: state, onClearFilter: filtered ? onClearFilter : undefined, total: config.total !== false, add: onAddColumn || onColumns
             ? { ...onAddColumn, field: onColumns && { domain, columns, onColumns } }
             : undefined }));
-    return (_jsx(LumenWidget, { id: cardId, kind: "table", style: "table", title: title, phoneTitle: false, controls: controls, tools: state ? (tools) : (_jsxs(_Fragment, { children: [tools, compare, pager, onColumns && !onAddColumn && on('columns') && (_jsx(ColumnPicker, { domain: domain, columns: columns, onColumns: onColumns })), !pivot && on('download') && (_jsx(IconButton, { icon: DownloadIcon, label: "Download CSV", 
+    return (_jsx(LumenWidget, { id: cardId, kind: "table", style: "table", title: title, phoneTitle: false, controls: controls, tools: blank ? (tools) : (_jsxs(_Fragment, { children: [tools, compare, pager, onColumns && !onAddColumn && on('columns') && (_jsx(ColumnPicker, { domain: domain, columns: columns, onColumns: onColumns })), !pivot && on('download') && (_jsx(IconButton, { icon: DownloadIcon, label: "Download CSV", 
                     // A phone's card header has room for the pager, filter, refresh and menu only.
                     className: "max-md:hidden", onClick: () => downloadCsv({
                         name: title,
@@ -346,7 +350,7 @@ export function LumenView({ domain, config, rows, total = rows.length, paging: s
                         groupBy,
                         sort: config.sort,
                         hidden: amountsHidden,
-                    }) }))] })), filter: state ? undefined : filter, filterCount: filterCount, strip: state ? undefined : strip, foot: foot, link: link, note: note, load: load, shown: shown, rows: total, pinned: inLayout && !fit, className: cn('relative', !inLayout && 'overflow-x-auto overflow-y-hidden [--pin-top:0px]'), children: state ??
+                    }) }))] })), filter: blank ? undefined : filter, filterCount: filterCount, strip: blank ? undefined : strip, foot: foot, link: link, note: note, load: load, shown: shown, rows: total, pinned: inLayout && !fit, className: cn('relative', !inLayout && 'overflow-x-auto overflow-y-hidden [--pin-top:0px]'), children: blank ??
             (load ? (_jsx(LumenStates, { load: load, skeleton: _jsx(LumenSkeleton, { rows: 10 }), children: table })) : (table)) }));
 }
 /**
@@ -384,6 +388,14 @@ function pathOf(domain, f) {
 }
 /** Every header carries its colour (`colorOf`), text and a 2px rule. */
 const ruleOf = (color) => color ? { boxShadow: `inset 0 -2px 0 ${color}` } : undefined;
+/** The width a table has to fit in: its box, or inside a page's view scroller the view's width. */
+function roomOf(el) {
+    const view = el.closest('[data-slot=view-scroll]');
+    if (!view)
+        return el.clientWidth;
+    const cs = getComputedStyle(view);
+    return view.clientWidth - Number.parseFloat(cs.paddingLeft) - Number.parseFloat(cs.paddingRight);
+}
 const alignOf = (format) => (format === 'text' ? 'text-left' : 'text-right');
 /** A column's cell classes: its alignment, and hidden on phones where the field says so. */
 /** An ISO date, alone or with a time after it: `2026-10-14`, `2026-10-14 16:17`. */
@@ -433,7 +445,7 @@ function sortingOf(sort, columns, serverSorts) {
         return [];
     return columns.some((f) => f.key === sort.key) ? [{ id: sort.key, desc: sort.desc }] : [];
 }
-function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null, chips = [], page = null, inView = false, fit = false, onDetails, tapped, selection, groupActions, sort, onSort, serverSorts, total = true, subgroup = null, add, serverGroups = null, }) {
+function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null, chips = [], page = null, inView = false, fit = false, onDetails, tapped, selection, groupActions, sort, onSort, serverSorts, total = true, subgroup = null, add, serverGroups = null, emptyState, onClearFilter, }) {
     const isMobile = useIsMobile();
     const [sorting, setSorting] = useState(() => sortingOf(sort, columns, serverSorts));
     // A saved sort patched while the table is open (the assistant's card move) applies at once.
@@ -483,9 +495,21 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
     const onCard = shown.filter((f, i) => i > 0 && !f.hideOnPhone);
     const meta = (onCard.find((f) => f.key === sorting[0]?.id) ?? onCard.find(short) ?? onCard[0])
         ?.key;
+    // Too narrow for every column (a docked drawer beside it, a small window), the table drops its
+    // lowest-`priority` columns, right to left, until it fits, instead of scrolling sideways; never
+    // its name or sorted column. More room brings them back. A phone keeps its own cards.
+    const rank = (f) => (f.priority ?? 0) - (f.hideOnPhone ? 1 : 0);
+    const dropOrder = shown
+        .slice(1)
+        .map((f, i) => ({ f, i }))
+        .filter(({ f }) => f.key !== sorting[0]?.id)
+        .sort((a, b) => rank(a.f) - rank(b.f) || b.i - a.i)
+        .map(({ f }) => f.key);
+    const [drop, setDrop] = useState(0);
+    const dropped = new Set(isMobile || fit ? [] : dropOrder.slice(0, drop));
     const cardOf = (f) => f === shown[0] ? 'lead' : f.key === meta ? 'meta' : short(f) ? 'num' : 'text';
     const col = (f, ...more) => ({
-        ...colProps(f, ...more),
+        ...colProps(f, ...more, f && dropped.has(f.key) && 'hidden'),
         'data-card': f ? cardOf(f) : undefined,
         'data-card-unit': f?.cardUnit,
     });
@@ -778,6 +802,39 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
     };
     const box = useRef(null);
     useFloatingHead(box, !inView);
+    // Before paint: one more column drops while the table is wider than its room: its box, and in a
+    // page's view scroller the view's width (theme.css `--view-w`).
+    useLayoutEffect(() => {
+        const el = box.current;
+        const t = el?.querySelector('table');
+        if (!el || !t || isMobile || fit || drop >= dropOrder.length)
+            return;
+        if (t.offsetWidth > roomOf(el) + 1)
+            setDrop((d) => d + 1);
+    });
+    // Every column comes back to be measured again on a new set of columns or more room.
+    const dropKey = dropOrder.join('\u0000');
+    const lastDropKey = useRef(dropKey);
+    if (lastDropKey.current !== dropKey) {
+        lastDropKey.current = dropKey;
+        if (drop)
+            setDrop(0);
+    }
+    useEffect(() => {
+        const el = box.current;
+        if (!el)
+            return;
+        const view = el.closest('[data-slot=view-scroll]');
+        let room = roomOf(el);
+        const watch = new ResizeObserver(() => {
+            const now = roomOf(el);
+            if (now > room + 1)
+                setDrop(0);
+            room = now;
+        });
+        watch.observe(view ?? el);
+        return () => watch.disconnect();
+    }, []);
     return (_jsxs("div", { ref: box, className: cn(inView ? IN_VIEW : 'overflow-x-auto overflow-y-hidden [--pin-top:0px]', fit && FIT), children: [cardSort, _jsx(UnitColumns.Provider, { value: markUnits, children: _jsxs(Table, { "data-cards": "", children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((hg) => (_jsxs(TableRow, { children: [selection && (_jsx(TableHead, { className: cn('w-8 pr-0', PINNED_HEAD), children: _jsx(Checkbox, { checked: allOn ? true : someOn ? 'indeterminate' : false, onCheckedChange: (on) => toggle(allKeys, on === true), "aria-label": "Select every row" }) })), hg.headers.map((h, i) => (_jsxs(TableHead, { ...col(shown[i], PINNED_HEAD), style: ruleOf(colorOf(domain, shown[i])), onPointerDown: pressStart, onPointerUp: pressEnd, onPointerLeave: pressEnd, onPointerCancel: pressEnd, onContextMenu: (e) => {
                                             if (press.current)
                                                 e.preventDefault();
@@ -794,7 +851,7 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
                                                                 }, children: [_jsx(ListCollapseIcon, {}), " Close every ", subgroup?.label.toLowerCase()] }), _jsxs(DropdownMenuItem, { onSelect: () => setAll(false), children: [_jsx(ChevronsDownUpIcon, {}), " Collapse all"] })] })] })), i === 0 &&
                                                 groups &&
                                                 !(folds && !serverGroups) &&
-                                                (!serverGroups || serverGroups.onToggleAll) && (_jsx(IconButton, { icon: anyClosed ? ChevronsUpDownIcon : ChevronsDownUpIcon, size: "icon-xs", className: "-ml-2 mr-1 align-middle", label: anyClosed ? 'Expand all groups' : 'Collapse all groups', onClick: () => setAll(anyClosed) })), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "xs", className: cn('font-medium', !(i === 0 && groups) && '-mx-2'), style: { color: colorOf(domain, shown[i]) ?? undefined }, onClick: h.column.getCanSort() ? h.column.getToggleSortingHandler() : undefined, children: [shown[i] ? _jsx(FreshnessMark, { domain: domain, field: shown[i] }) : null, flexRender(h.column.columnDef.header, h.getContext()), _jsx(SortIcon, { dir: h.column.getIsSorted() })] }) }), shown[i] && (domain.groups?.length || freshnessOf(domain, shown[i])) ? (_jsxs(TooltipContent, { children: [domain.groups?.length ? _jsx("div", { children: pathOf(domain, shown[i]) }) : null, freshnessLine(domain, shown[i]) ? (_jsx("div", { children: freshnessLine(domain, shown[i]) })) : null] })) : null] })] }, h.id))), add && (_jsx(TableHead, { className: cn('w-8 pl-1', PINNED_HEAD), children: _jsx(AddColumnMenu, { add: add, fieldOpen: fieldOpen, onFieldOpen: setFieldOpen }) }))] }, hg.id))) }), _jsxs(TableBody, { children: [!rows.length && !serverGroups?.list?.length && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: span, className: "py-6 text-center text-muted-foreground", children: "No rows match." }) })), groups && groupBy
+                                                (!serverGroups || serverGroups.onToggleAll) && (_jsx(IconButton, { icon: anyClosed ? ChevronsUpDownIcon : ChevronsDownUpIcon, size: "icon-xs", className: "-ml-2 mr-1 align-middle", label: anyClosed ? 'Expand all groups' : 'Collapse all groups', onClick: () => setAll(anyClosed) })), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "xs", className: cn('font-medium', !(i === 0 && groups) && '-mx-2'), style: { color: colorOf(domain, shown[i]) ?? undefined }, onClick: h.column.getCanSort() ? h.column.getToggleSortingHandler() : undefined, children: [shown[i] ? _jsx(FreshnessMark, { domain: domain, field: shown[i] }) : null, flexRender(h.column.columnDef.header, h.getContext()), _jsx(SortIcon, { dir: h.column.getIsSorted() })] }) }), shown[i] && (domain.groups?.length || freshnessOf(domain, shown[i])) ? (_jsxs(TooltipContent, { children: [domain.groups?.length ? _jsx("div", { children: pathOf(domain, shown[i]) }) : null, freshnessLine(domain, shown[i]) ? (_jsx("div", { children: freshnessLine(domain, shown[i]) })) : null] })) : null] })] }, h.id))), add && (_jsx(TableHead, { className: cn('w-8 pl-1', PINNED_HEAD), children: _jsx(AddColumnMenu, { add: add, fieldOpen: fieldOpen, onFieldOpen: setFieldOpen }) }))] }, hg.id))) }), _jsxs(TableBody, { children: [!rows.length && !serverGroups?.list?.length && (_jsx(TableRow, { "data-slot": "table-empty", className: "hover:bg-transparent", children: _jsx(TableCell, { colSpan: span, className: "py-6 text-center whitespace-normal text-muted-foreground", children: _jsxs("div", { className: "flex flex-col items-center gap-3", children: [emptyState ?? 'No rows match.', onClearFilter && (_jsxs(Button, { variant: "outline", size: "sm", onClick: onClearFilter, children: [_jsx(FilterXIcon, {}), "Clear filters"] }))] }) }) })), groups && groupBy
                                     ? groups.map(([key, members], gi) => {
                                         const open = isOpen(key, gi);
                                         return (_jsxs(Fragment, { children: [_jsxs(TableRow, { className: ROLLUP, "data-group": key, "data-rollup": "", children: [selection && (_jsx(TableCell, { "data-card": "select", className: cn('w-8 pr-0', PINNED_GROUP), children: _jsx(Checkbox, { checked: members.every((m) => selection.keys.has(keyOf(m.original)))

package/dist/theme.css

@@ -479,9 +479,10 @@
   table[data-cards] td[colspan] {
     flex: 1 1 100%;
   }
-  /* A row's panel (`row-panel`) is a box of its own under the row, not a row: it keeps its lines. */
-  table[data-cards] tr[data-slot="row-panel"],
-  table[data-cards] tr[data-slot="row-panel"] > td {
+  /* A row's panel (`row-panel`) and the empty table's message (`table-empty`) are boxes of their
+     own, not rows: they keep their lines. */
+  table[data-cards] tr:is([data-slot="row-panel"], [data-slot="table-empty"]),
+  table[data-cards] tr:is([data-slot="row-panel"], [data-slot="table-empty"]) > td {
     white-space: normal;
   }
   table[data-cards] td:not([data-card]):not([colspan]),

package/dist/view-model.d.ts

@@ -139,6 +139,12 @@ export interface ViewField<T> {
     maxWidth?: string | false;
     /** Left out on phones, where the table has no room for it (a returns table's longer windows). */
     hideOnPhone?: boolean;
+    /**
+     * Where a table has too little room (a docked drawer beside it), its columns drop until it fits:
+     * the lowest `priority` first (default 0; `hideOnPhone` ones count one lower), right to left.
+     * The name and the sorted column never drop.
+     */
+    priority?: number;
     /** Left out of a table when no row in it has a value (none, empty or 0): an Attachments column on mail with none. */
     hideEmpty?: boolean;
     /** On a phone card, where no header names it: the word after a bare count (`msgs`, so `5,861 msgs`). */

package/package.json

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