@columenlabs/lumen-ui 0.1.44 → 0.1.46

package/README.md

@@ -74,6 +74,13 @@ Every export, its props and an example are on the [docs](https://lumen.columenla
 - Pickers are `LumenSelector`, side panels `LumenDrawer`, tabs `LumenTabs`, destructive confirms `LumenConfirm`; reach for the raw `ui/*` part only when no Lumen part fits.
 - Every card body sits in `LumenBoundary`, so one crash never blanks a page.
 - Numbers use tabular figures and a true minus `−`; a gain or loss always shows a sign or arrow.
+- Bars in a column line up: use `ShareMeter` (fixed track, fixed right-aligned number), never a bar sized by its label.
+- Table rows are one line. A cell shows one value (with a small bar or tag at most); anything more (other metrics, the allowance, a breakdown) goes in a hover tooltip, never in stacked text or sub-rows.
+- Chart colours are theme tokens (`var(--chart-1)`, `useChartTokens()`), never hex picked for one theme; `LumenEChart` resolves `var(--…)` in its option so sparklines read in light and dark.
+- "No label" filters come built in: `LumenTokenizedFilter` pins a "No <field>" row on any text field where some rows have no value (an `empty` token); don't add your own toggle for it.
+- Fewer tab rows: one row of tabs at most per card; narrower cuts (a product, a type) are fields in `LumenTokenizedFilter`, and a link to one opens the tab with that filter chip set.
+- One selected sidebar row: give each nav item its own route, and let an open parent look neutral.
+- What's new is on in every app: pass `releases="/api/releases"` to `LumenShell`, served by lumen-ship's `listReleases`.
 - A Save blocked by its form's checks is a `SaveButton` that lists each issue, never a bare `disabled`.
 
 ## Notices

package/dist/color-dot.d.ts

@@ -7,8 +7,17 @@ export declare function ColorDot({ color, className }: {
 export declare function colorIcon(color: string): ComponentType<{
     className?: string;
 }>;
-/** A value as a chip in its colour (a label): a tint behind, the colour as text. */
-export declare function ColorChip({ color, children }: {
+/** `icon` drawn in `color` (a label's icon in the label's colour), kept per pair so it keeps its identity. */
+export declare function tintedIcon(icon: ComponentType<{
+    className?: string;
+}>, color: string | undefined): ComponentType<{
+    className?: string;
+}>;
+/** A value as a chip in its colour (a label): a tint behind, the colour as text, its icon first. */
+export declare function ColorChip({ color, icon: Icon, children, }: {
     color?: string;
+    icon?: ComponentType<{
+        className?: string;
+    }>;
     children: ReactNode;
 }): import("react").JSX.Element;

package/dist/color-dot.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from './lib/utils.js';
 export function ColorDot({ color, className }) {
     return (_jsx("span", { "aria-hidden": true, className: cn('flex size-4 shrink-0 items-center justify-center', className), children: _jsx("span", { className: "size-2.5 rounded-full", style: { background: color } }) }));
@@ -13,7 +13,25 @@ export function colorIcon(color) {
     }
     return icon;
 }
-/** A value as a chip in its colour (a label): a tint behind, the colour as text. */
-export function ColorChip({ color, children }) {
-    return (_jsx("span", { className: "inline-flex h-5 items-center rounded-sm bg-secondary px-1.5 text-xs font-medium whitespace-nowrap text-secondary-foreground", style: color ? { background: `color-mix(in oklab, ${color} 18%, transparent)`, color } : undefined, children: children }));
+const tinted = new WeakMap();
+/** `icon` drawn in `color` (a label's icon in the label's colour), kept per pair so it keeps its identity. */
+export function tintedIcon(icon, color) {
+    if (!color)
+        return icon;
+    let byColor = tinted.get(icon);
+    if (!byColor) {
+        byColor = new Map();
+        tinted.set(icon, byColor);
+    }
+    let out = byColor.get(color);
+    if (!out) {
+        const Icon = icon;
+        out = ({ className }) => (_jsx("span", { "aria-hidden": true, className: "flex shrink-0", style: { color }, children: _jsx(Icon, { className: cn('size-4', className) }) }));
+        byColor.set(color, out);
+    }
+    return out;
+}
+/** A value as a chip in its colour (a label): a tint behind, the colour as text, its icon first. */
+export function ColorChip({ color, icon: Icon, children, }) {
+    return (_jsxs("span", { className: "inline-flex h-5 shrink-0 items-center gap-1 rounded-sm bg-secondary px-1.5 text-xs font-medium whitespace-nowrap text-secondary-foreground", style: color ? { background: `color-mix(in oklab, ${color} 18%, transparent)`, color } : undefined, children: [Icon && _jsx(Icon, { className: "size-3 shrink-0" }), children] }));
 }

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export { LumenDateInput, type LumenDateInputProps, stepDate, } from './lumen-dat
 export { LumenChoice, type LumenChoiceOption } from './lumen-choice.js';
 export { LumenSecret } from './lumen-secret.js';
 export { RankedBars, StackedBars, StackedColumns } from './lumen-widget-charts.js';
+export { ShareMeter } from './share-meter.js';
 export { COVERAGE_LEVELS, CoverageCell, type CoverageJobState, type CoverageLevel, CoverageLegend, coverageClass, coverageLabel, coverageLevel, } from './coverage-cells.js';
 export { type CoverageBlock, type CoverageData, type CoverageFact, type CoveragePick, type CoverageRow, type CoverageSummary, LumenCoverageMap, type LumenCoverageMapProps, blockName, blockOf, } from './coverage-map.js';
 export { type CalendarFact, LumenCoverageCalendarMap, type LumenCoverageCalendarMapProps, } from './coverage-calendar-map.js';

package/dist/index.js

@@ -28,6 +28,7 @@ export { LumenDateInput, stepDate, } from './lumen-date-input.js';
 export { LumenChoice } from './lumen-choice.js';
 export { LumenSecret } from './lumen-secret.js';
 export { RankedBars, StackedBars, StackedColumns } from './lumen-widget-charts.js';
+export { ShareMeter } from './share-meter.js';
 export { COVERAGE_LEVELS, CoverageCell, CoverageLegend, coverageClass, coverageLabel, coverageLevel, } from './coverage-cells.js';
 export { LumenCoverageMap, blockName, blockOf, } from './coverage-map.js';
 export { LumenCoverageCalendarMap, } from './coverage-calendar-map.js';

package/dist/lumen-echart.js

@@ -71,6 +71,24 @@ export function baseOption(t) {
         },
     };
 }
+/** `option` with every `var(--name)` string (also inside `color-mix()`) replaced by its value. */
+function resolveVars(option) {
+    const css = getComputedStyle(document.documentElement);
+    const walk = (v) => {
+        if (typeof v === 'string')
+            return v.includes('var(--')
+                ? v.replace(/var\((--[\w-]+)(?:,\s*([^)]+))?\)/g, (_, name, fb) => {
+                    return css.getPropertyValue(name).trim() || fb?.trim() || '';
+                })
+                : v;
+        if (Array.isArray(v))
+            return v.map(walk);
+        if (v && typeof v === 'object' && Object.getPrototypeOf(v) === Object.prototype)
+            return Object.fromEntries(Object.entries(v).map(([k, x]) => [k, walk(x)]));
+        return v;
+    };
+    return walk(option);
+}
 /** An axis in the theme's colours (merge into xAxis or yAxis). */
 export function axisStyle(t) {
     return {
@@ -106,10 +124,14 @@ export function LumenEChart({ option, height = 260, on, className, label, }) {
             chart.current = null;
         };
     }, []);
+    // Canvas can't read CSS variables: `var(--chart-1)` in an option would draw black. Each one is
+    // swapped for its value, again whenever the theme flips.
+    const tokens = useChartTokens();
+    // biome-ignore lint/correctness/useExhaustiveDependencies: tokens change when the theme flips.
     useEffect(() => {
         if (ready)
-            chart.current?.setOption(option, { notMerge: true });
-    }, [ready, option]);
+            chart.current?.setOption(resolveVars(option), { notMerge: true });
+    }, [ready, option, tokens]);
     const names = Object.keys(on ?? {}).join();
     useEffect(() => {
         const c = chart.current;

package/dist/lumen-filter.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CONTAINS_KEY, meetsNumber } from '@columenlabs/lumen-ui-types/views';
+import { CONTAINS_KEY, EMPTY_VALUE, 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,
@@ -8,7 +8,9 @@ import { CONTAINS_KEY, meetsNumber } from '@columenlabs/lumen-ui-types/views';
 // 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.
+// then behind +N. Phones get a bottom sheet. A text field where some rows have no value pins
+// "No <field>" above its values: Include keeps the rows without one, Exclude the rows with any
+// (an `empty` token); typing "no" or "empty" offers it too.
 import { Command as CommandPrimitive } from 'cmdk';
 import { ChevronLeftIcon, ChevronRightIcon, SaveIcon, SearchIcon, TextSearchIcon, XIcon, } from 'lucide-react';
 import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
@@ -24,14 +26,21 @@ 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: '' };
+const OP_SIGN = { gt: '>', lt: '<', eq: '=', between: '', empty: '' };
+/** The rows with no value on a field (`not`: with any). */
+const isEmptyToken = (t) => t.op === 'empty';
+const emptyToken = (key, not) => not ? { key, value: EMPTY_VALUE, op: 'empty', not } : { key, value: EMPTY_VALUE, op: 'empty' };
+/** "No label": the empty row's words for a field. */
+const noneOf = (label) => `No ${label.toLowerCase()}`;
 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 same = (a, b) => a.key === b.key &&
+    isEmptyToken(a) === isEmptyToken(b) &&
+    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 = {
@@ -55,9 +64,14 @@ function passes(values, nums, tokens, fields, except) {
             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)))
+        // `empty`: no value (included, alongside any values: none or one of these) or any value (excluded).
+        const none = of.find((t) => isEmptyToken(t) && !t.not);
+        if (of.some((t) => isEmptyToken(t) && t.not) && !have.length)
+            return false;
+        const plain = of.filter((t) => !isEmptyToken(t));
+        const inc = plain.filter((t) => !t.not).map((t) => t.value.toLowerCase());
+        const exc = plain.filter((t) => t.not).map((t) => t.value.toLowerCase());
+        if ((inc.length || none) && !(none && !have.length) && !have.some((v) => inc.includes(v)))
             return false;
         if (exc.length && have.some((v) => exc.includes(v)))
             return false;
@@ -92,7 +106,7 @@ text) {
 /** 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));
+    const inc = new Set(tokens.filter((t) => !t.not && (!t.op || isEmptyToken(t))).map((t) => t.key));
     return tokens.some((t) => t.not && inc.has(t.key))
         ? tokens.filter((t) => !(t.not && inc.has(t.key)))
         : tokens;
@@ -179,7 +193,12 @@ function chipWords(chip, field, form) {
     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(', ');
+    // An excluded `empty` reads "Label any"; an included one "none" among the values.
+    if (chip.not && chip.tokens.length === 1 && chip.tokens[0] && isEmptyToken(chip.tokens[0]))
+        return { name, verb: '', shown: 'any', all: 'any' };
+    const all = chip.tokens
+        .map((t) => (isEmptyToken(t) ? 'none' : 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 };
@@ -294,9 +313,20 @@ export function LumenTokenizedFilter({ filter, placeholder = 'Filter…', label
     const only = (key, value) => {
         setTokens([...tokens.filter((x) => x.key !== key), token(key, value, notFor(key))]);
     };
+    const hasEmpty = (key) => tokens.some((t) => t.key === key && isEmptyToken(t));
+    const toggleEmpty = (key, not = notFor(key)) => {
+        if (hasEmpty(key))
+            setTokens(tokens.filter((t) => !(t.key === key && isEmptyToken(t))));
+        else
+            setTokens([...tokens, emptyToken(key, not)]);
+        if (!field)
+            setText('');
+        else
+            setSearch('');
+    };
     const setNot = (key, not) => {
         setPendingNot(not);
-        setTokens(tokens.map((t) => (t.key === key ? token(key, t.value, not) : t)));
+        setTokens(tokens.map((t) => t.key !== key ? t : isEmptyToken(t) ? emptyToken(key, not) : token(key, t.value, not)));
     };
     // 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 }]);
@@ -335,21 +365,28 @@ export function LumenTokenizedFilter({ filter, placeholder = 'Filter…', label
     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();
+    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;
-                for (const v of new Set(f.values(row)))
+                const vs = new Set(f.values(row));
+                if (!vs.size)
+                    none++;
+                for (const v of vs)
                     m.set(v, (m.get(v) ?? 0) + 1);
             }
-            out.set(f.key, m);
+            counts.set(f.key, m);
+            empties.set(f.key, none);
         }
-        return out;
+        return { counts, empties };
     }, [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
@@ -358,7 +395,7 @@ export function LumenTokenizedFilter({ filter, placeholder = 'Filter…', label
         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))
+            if (t.key === key && !isEmptyToken(t) && !m.has(t.value))
                 m.set(t.value, 0);
         return [...m]
             .filter(([v]) => !n || v.toLowerCase().includes(n))
@@ -458,6 +495,13 @@ export function LumenTokenizedFilter({ filter, placeholder = 'Filter…', label
                         only(key, value);
                     }, children: "Only" }), _jsx(CommandShortcut, { className: cn('ml-0 w-8 text-right', shortcut), children: 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}`));
+    };
     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 })] }));
@@ -470,7 +514,8 @@ export function LumenTokenizedFilter({ filter, placeholder = 'Filter…', label
                                     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: () => {
+                        .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: () => {
                         setTokens([
                             ...tokens.filter((t) => !same(t, { key: CONTAINS_KEY, value: word })),
                             token(CONTAINS_KEY, word, chipOf(CONTAINS_KEY)?.not ?? negate),
@@ -478,7 +523,14 @@ export function LumenTokenizedFilter({ filter, placeholder = 'Filter…', label
                         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
+                    .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 &&
+                    (empties.get(f.key) ?? 0) > 0 &&
+                    (q.startsWith('no') ? noneOf(f.label).toLowerCase().startsWith(q) : true)) && (_jsx(CommandGroup, { heading: "Quick filters", className: "px-1 py-0.5", children: fields
+                    .filter((f) => !f.number &&
+                    (empties.get(f.key) ?? 0) > 0 &&
+                    (q.startsWith('no') ? noneOf(f.label).toLowerCase().startsWith(q) : true))
+                    .map((f) => emptyRow(f, true)) })), fields
                 .filter((f) => !f.number)
                 .map((f) => {
                 const vs = valuesOf(f.key, q, PER_FIELD);

package/dist/lumen-links.js

@@ -156,7 +156,9 @@ export function followedBy(tokens, fields, keys) {
 /** What a card follows, as its title says it: `IRA, Roth`. */
 export function followsText(tokens) {
     return tokens
-        .map((t) => `${t.not ? 'not ' : ''}${t.op ? `${t.key} ${t.value.replace('..', '–')}` : (t.text ?? t.value)}`)
+        .map((t) => t.op === 'empty'
+        ? `${t.key} ${t.not ? 'any' : 'none'}`
+        : `${t.not ? 'not ' : ''}${t.op ? `${t.key} ${t.value.replace('..', '–')}` : (t.text ?? t.value)}`)
         .join(', ');
 }
 /** The square itself: filled in its colour, or an outline for none. */

package/dist/lumen-selector.js

@@ -11,6 +11,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 //   - Triggers: `field` (a form select), `chip` (a compact header pill), `icon` (an icon button).
 //     `LumenSelectorList` is the fourth, `none`: the list anchored to a text box (the assistant @ and /).
 //   - Phone: a bottom sheet with the search on top and, for multiple, Done.
+//   - Desktop, multiple: a footer with the count, Clear all and Done (picks save as they're made).
 //   - An option with a `target` (a card or a sidebar page) lights it on the page while hovered.
 import { Combobox as Base } from '@base-ui/react';
 import { CheckIcon, ChevronDownIcon, PlusIcon, SearchIcon, XIcon } from 'lucide-react';
@@ -255,7 +256,7 @@ export function LumenSelector(props) {
                         // No ring on the first button: the person taps what they want.
                         onOpenAutoFocus: (e) => e.preventDefault(), className: "group/selector flex max-h-[85dvh] flex-col gap-2 rounded-t-xl pt-2", children: [_jsx("span", { "aria-hidden": true, className: "mx-auto h-1 w-9 rounded-full bg-border" }), _jsxs("div", { className: "flex items-center justify-between px-4", children: [_jsx(SheetTitle, { id: sheetTitle, children: label ?? placeholder }), multiple && (_jsx(Button, { size: "sm", onClick: () => setOpen(false), children: "Done" }))] }), _jsx(SheetDescription, { className: "sr-only", children: multiple ? 'Pick any, then Done' : 'Pick one' }), _jsxs(Base.Root, { ...rootProps, inline: true, open: true, onOpenChange: () => undefined, multiple: multiple, value: multiple ? [...values] : (values[0] ?? null), onValueChange: (v) => pick(v), children: [multiple && values.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1.5 px-4", children: values.map((v) => (_jsx("span", { className: "rounded-sm bg-muted px-2 py-1 text-[13px]", children: labelOf(v) }, v))) })), searchable && searchBox, list] }), multiple && (_jsxs("div", { className: "flex items-center justify-between border-t px-4 pt-3 pb-5", children: [_jsxs("span", { className: "text-xs text-muted-foreground", children: [values.length, " picked"] }), clearAll] }))] }) })] }));
     }
-    const popup = (_jsx(Base.Portal, { container: host ?? undefined, children: _jsx(Base.Positioner, { side: "bottom", sideOffset: 4, align: align, anchor: inChips ? chipsRef : undefined, className: "pointer-events-auto isolate z-[60]", children: _jsxs(Base.Popup, { "data-slot": "lumen-selector", className: "group/selector max-w-(--available-width) min-w-[max(var(--anchor-width),14rem)] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", children: [!inChips && searchBox, list, clearAll && (_jsxs("div", { className: "flex items-center justify-between border-t px-2 py-1.5", children: [_jsxs("span", { className: "text-xs text-muted-foreground", children: [values.length, " picked", max !== undefined ? ` of ${max}` : ''] }), clearAll] }))] }) }) }));
+    const popup = (_jsx(Base.Portal, { container: host ?? undefined, children: _jsx(Base.Positioner, { side: "bottom", sideOffset: 4, align: align, anchor: inChips ? chipsRef : undefined, className: "pointer-events-auto isolate z-[60]", children: _jsxs(Base.Popup, { "data-slot": "lumen-selector", className: "group/selector max-w-(--available-width) min-w-[max(var(--anchor-width),14rem)] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", children: [!inChips && searchBox, list, multiple && (_jsxs("div", { className: "flex items-center gap-3 border-t px-2 py-1.5", children: [_jsxs("span", { className: "text-xs text-muted-foreground", children: [values.length, " picked", max !== undefined ? ` of ${max}` : ''] }), clearAll, _jsx(Button, { size: "xs", className: "ml-auto", onClick: () => setOpen(false), children: "Done" })] }))] }) }) }));
     return (_jsxs(Base.Root, { ...rootProps, multiple: multiple, value: multiple ? [...values] : (values[0] ?? null), onValueChange: (v) => pick(v), children: [inChips ? (_jsxs(Base.Chips, { ref: chipsRef, className: cn('flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent px-1 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 dark:bg-input/30', className), children: [chips, _jsx(Base.Input, { id: id, "aria-label": label, disabled: disabled, readOnly: !searchable, placeholder: values.length ? '' : placeholder, className: "min-w-16 flex-1 bg-transparent px-1 outline-none placeholder:text-muted-foreground" })] })) : trigger === 'icon' ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Base.Trigger, { render: _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": label, className: className }), children: LeadIcon && _jsx(LeadIcon, {}) }) }), _jsx(TooltipContent, { children: label })] })) : (_jsx(Base.Trigger, { id: id, "data-size": size, "aria-label": label, className: cn(FIELD, trigger === 'chip' && 'rounded-full', className), children: fieldInside })), _jsx("span", { ref: markRef, hidden: true }), popup] }));
 }
 /**

package/dist/lumen-view.d.ts

@@ -88,6 +88,8 @@ export interface ServerGroups {
     more?: () => void;
     /** A group header's click: open or close it. */
     onToggle: (key: string) => void;
+    /** Expand all (true) or Collapse all (false): open or close every group listed. */
+    onToggleAll?: (open: boolean) => void;
 }
 export interface LumenViewProps<T> {
     /** The view's domain, its formula columns included (`withViewFields`). */

package/dist/lumen-view.js

@@ -445,7 +445,7 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
         const edit = f.edit;
         const many = edit.many;
         if (many)
-            return (_jsx(EditManyCell, { label: f.label, values: f.values?.(row) ?? (typeof v === 'string' && v !== '' ? [v] : []), options: options.get(f.key)?.inUse ?? [], unused: options.get(f.key)?.unused, note: edit.note?.(row), colorOf: f.color, onSave: (values) => many(row, values) }));
+            return (_jsx(EditManyCell, { label: f.label, values: f.values?.(row) ?? (typeof v === 'string' && v !== '' ? [v] : []), options: options.get(f.key)?.inUse ?? [], unused: options.get(f.key)?.unused, note: edit.note?.(row), colorOf: f.color, iconOf: f.iconOf, onSave: (values) => many(row, values) }));
         const save = edit.save;
         if (!save)
             return _jsx(ViewValueCell, { value: v, format: f.format, chip: chip });
@@ -531,7 +531,9 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
     const startsOpen = (i) => rows.length <= OPEN_ALL || i === 0;
     const isOpen = (key, i) => serverGroups ? !!served.get(key)?.open : startsOpen(i) !== flipped.has(key);
     const anyClosed = !!groups?.some(([k], i) => !isOpen(k, i));
-    const setAll = (open) => setFlipped(new Set((groups ?? []).filter((_, i) => startsOpen(i) !== open).map(([k]) => k)));
+    const setAll = (open) => serverGroups
+        ? serverGroups.onToggleAll?.(open)
+        : setFlipped(new Set((groups ?? []).filter((_, i) => startsOpen(i) !== open).map(([k]) => k)));
     const keyOf = domain.rowKey;
     const toggle = (keys, on) => {
         if (!selection)
@@ -626,7 +628,11 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
         const g = served.get(key);
         const out = rowsOf(list, key);
         if (!g?.more && !g?.loading)
-            return out;
+            return out.length
+                ? out
+                : [
+                    _jsx(TableRow, { children: _jsx(TableCell, { colSpan: span, className: "py-2 text-center text-xs text-muted-foreground", children: "No rows match." }) }, `${key}:none`),
+                ];
         return [
             ...out,
             _jsx(TableRow, { "data-more": true, children: _jsx(TableCell, { colSpan: span, className: "py-1", children: g.loading ? (_jsx("span", { className: "px-2 text-xs text-muted-foreground", children: "Loading\u2026" })) : (_jsxs(Button, { variant: "ghost", size: "xs", onClick: g.more, children: [_jsx(ChevronsDownIcon, {}), "Show more", g.n !== null && (_jsxs("span", { className: "num font-normal text-muted-foreground", children: ["of ", (g.n - list.length).toLocaleString()] }))] })) }) }, `${key}:more`),
@@ -641,7 +647,7 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
                                     ? 'ascending'
                                     : h.column.getIsSorted() === 'desc'
                                         ? 'descending'
-                                        : undefined, children: [i === 0 && groups && !serverGroups && (_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 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: span, className: "py-6 text-center text-muted-foreground", children: "No rows match." }) })), groups && groupBy
+                                        : undefined, children: [i === 0 && groups && (!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
                             ? groups.map(([key, members], gi) => {
                                 const open = isOpen(key, gi);
                                 return (_jsxs(Fragment, { children: [_jsxs(TableRow, { className: ROLLUP, "data-group": key, children: [selection && (_jsx(TableCell, { className: cn('w-8 pr-0', PINNED_GROUP), children: _jsx(Checkbox, { checked: members.every((m) => selection.keys.has(keyOf(m.original)))

package/dist/lumen-widget-charts.js

@@ -42,7 +42,8 @@ export function StackedColumns({ rows, x, parts, label, height = 220, tick = Str
     const total = (r) => parts.reduce((n, p) => n + (Number(r[p.key]) || 0), 0);
     // The highest part with a value carries the column's rounded cap.
     const top = (r) => parts.findLast((p) => Number(r[p.key]) > 0)?.key;
-    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(ChartContainer, { config: config, role: "img", "aria-label": label, className: "aspect-auto w-full", style: { height }, children: _jsxs(BarChart, { data: rows, margin: { left: 0, right: 0, top: 8, bottom: 0 }, children: [_jsx(CartesianGrid, { vertical: false, strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: x, tickLine: false, axisLine: false, tickMargin: 8, minTickGap: 12, tickFormatter: (v) => tick(String(v)) }), _jsx(YAxis, { tickLine: false, axisLine: false, width: 36, allowDecimals: false, tickFormatter: (v) => fmt(Number(v)) }), _jsx(ChartTooltip, { cursor: { fill: 'var(--muted)', opacity: 0.5 }, content: _jsx(ChartTooltipContent, { labelFormatter: (_, payload) => {
+    const ticks = niceTicks(Math.max(0, ...rows.map(total)));
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(ChartContainer, { config: config, role: "img", "aria-label": label, className: "aspect-auto w-full", style: { height }, children: _jsxs(BarChart, { data: rows, margin: { left: 0, right: 0, top: 8, bottom: 0 }, children: [_jsx(CartesianGrid, { vertical: false, strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: x, tickLine: false, axisLine: false, tickMargin: 8, minTickGap: 12, tickFormatter: (v) => tick(String(v)) }), _jsx(YAxis, { tickLine: false, axisLine: false, domain: [0, ticks.at(-1) ?? 'auto'], ticks: ticks, width: axisWidth(ticks.map(fmt)), tickFormatter: (v) => fmt(Number(v)) }), _jsx(ChartTooltip, { cursor: { fill: 'var(--muted)', opacity: 0.5 }, content: _jsx(ChartTooltipContent, { labelFormatter: (_, payload) => {
                                     const r = payload?.[0]?.payload;
                                     return r ? (_jsxs("span", { className: "flex w-full gap-3", children: [_jsx("span", { children: tick(String(r[x])) }), _jsx("span", { className: "num ml-auto", children: fmt(total(r)) })] })) : null;
                                 }, formatter: (v, name) => (_jsxs("span", { className: "flex w-full items-center gap-2", children: [_jsx("span", { className: "size-2 shrink-0 rounded-sm", style: { background: config[String(name)]?.color } }), _jsx("span", { children: config[String(name)]?.label }), _jsx("span", { className: "num ml-auto pl-3", children: fmt(Number(v)) })] })) }) }), parts.map((p) => (_jsx(Bar, { dataKey: p.key, stackId: "a", fill: p.fill, isAnimationActive: false, shape: (b) => (_jsx(Rectangle, { ...b, radius: top(b.payload) === p.key ? CAP : 0 })) }, p.key)))] }) }), legend && (_jsx("ul", { className: "flex flex-wrap justify-center gap-x-3 gap-y-1 text-xs text-muted-foreground", children: parts.map((p) => (_jsxs("li", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "size-2 rounded-sm", style: { background: p.fill } }), p.name] }, p.key))) }))] }));
@@ -84,3 +85,18 @@ export function AllocationBar({ items, total, config, tooltip, share, }) {
                             return (_jsxs("text", { x: Number(p.x) + 8, y: Number(p.y) + Number(p.height) / 2, dy: "0.35em", fontSize: 11, fontWeight: 600, style: { fill: 'var(--background)' }, children: [name, _jsx("tspan", { fontWeight: 400, dx: 6, className: "num", children: share(s.v) })] }));
                         } }) }, s.key)))] }) }));
 }
+/**
+ * Round axis steps (1, 2, 2.5 or 5 times a power of ten) from 0 to just above `max`, about four
+ * of them, so a value axis reads 0, 100k, 200k, 300k rather than 95k, 190k, 285k.
+ */
+function niceTicks(max, count = 4) {
+    if (!(max > 0))
+        return [0, 1];
+    const raw = max / count;
+    const pow = 10 ** Math.floor(Math.log10(raw));
+    const step = ([1, 2, 2.5, 5, 10].find((m) => m * pow >= raw) ?? 10) * pow;
+    const n = Math.ceil(max / step - 1e-9);
+    return Array.from({ length: n + 1 }, (_, i) => Math.round(i * step * 1e6) / 1e6);
+}
+/** Room for the widest tick label (about 7px a character at text-xs), so none is clipped. */
+const axisWidth = (labels) => Math.max(24, Math.max(0, ...labels.map((l) => l.length)) * 7 + 8);

package/dist/lumen-widget.d.ts

@@ -174,7 +174,7 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     source?: string | undefined;
@@ -237,7 +237,7 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     source?: string | undefined;
@@ -272,7 +272,7 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     source?: string | undefined;
@@ -297,7 +297,7 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
             key: string;
             value: string;
             not?: boolean | undefined;
-            op?: "between" | "eq" | "gt" | "lt" | undefined;
+            op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
             link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
         }[];
         sign: boolean;
@@ -310,7 +310,7 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
                 key: string;
                 value: string;
                 not?: boolean | undefined;
-                op?: "between" | "eq" | "gt" | "lt" | undefined;
+                op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
                 link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
             }[];
             suffix: string;
@@ -348,7 +348,7 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     source?: string | undefined;
@@ -372,7 +372,7 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
             key: string;
             value: string;
             not?: boolean | undefined;
-            op?: "between" | "eq" | "gt" | "lt" | undefined;
+            op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
             link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
         }[];
         sign: boolean;
@@ -385,7 +385,7 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
                 key: string;
                 value: string;
                 not?: boolean | undefined;
-                op?: "between" | "eq" | "gt" | "lt" | undefined;
+                op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
                 link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
             }[];
             suffix: string;
@@ -418,7 +418,7 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     source?: string | undefined;
@@ -455,7 +455,7 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     source?: string | undefined;
@@ -490,7 +490,7 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     source?: string | undefined;
@@ -525,7 +525,7 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     source?: string | undefined;
@@ -563,7 +563,7 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     source?: string | undefined;
@@ -598,7 +598,7 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     source?: string | undefined;
@@ -631,7 +631,7 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     source?: string | undefined;
@@ -664,7 +664,7 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     source?: string | undefined;
@@ -701,7 +701,7 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     source?: string | undefined;

package/dist/nav.d.ts

@@ -50,8 +50,12 @@ export interface SectionSubItem {
     id: string;
     title: string;
     to: string;
-    /** A colour dot before the title, matching the item's line on a chart. */
+    /** Its icon, drawn in `color` (a label's icon in the label's colour). */
+    icon?: NavIcon;
+    /** The icon's colour; without an icon, a colour dot before the title (a chart line's colour). */
     color?: string;
+    /** A count on the right, lined up with the section items' badges. */
+    badge?: ReactNode;
 }
 /**
  * A section of things a person keeps (views, trades, a watchlist): `+` adds one, the

package/dist/nav.js

@@ -12,9 +12,33 @@ import { useFolded } from './fold.js';
 import { cn } from './lib/utils.js';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible.js';
 import { SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, useSidebar, } from './ui/sidebar.js';
+/**
+ * How well a link matches where the person is: -1 when it doesn't, else higher for a closer
+ * match. A link's query (`/resources?label=a`) must be in the URL too, and each matched key
+ * outranks a bare path, so `?label=a` beats `/resources` on `/resources?label=a`.
+ */
+function useMatch() {
+    const { path, search } = useRouterState({
+        select: (s) => ({ path: s.location.pathname, search: s.location.searchStr }),
+    });
+    const here = new URLSearchParams(search);
+    return ({ to, exact }) => {
+        const [base = '', query] = to.split('?');
+        const want = new URLSearchParams(query);
+        for (const [k, v] of want)
+            if (here.get(k) !== v)
+                return -1;
+        const keys = [...want.keys()].length;
+        if (path === base)
+            return 2 + keys * 10;
+        if (!exact && path.startsWith(`${base.replace(/\/$/, '')}/`))
+            return 1 + keys * 10;
+        return -1;
+    };
+}
 function useActive() {
-    const path = useRouterState({ select: (s) => s.location.pathname });
-    return ({ to, exact }) => path === to || (!exact && path.startsWith(`${to.replace(/\/$/, '')}/`));
+    const match = useMatch();
+    return (i) => match(i) >= 0;
 }
 /**
  * A sidebar group whose header folds its items: bold caps, no icon. At rest
@@ -36,13 +60,13 @@ export function NavGroup({ label, items, pageType, }) {
 }
 const SECTION_BADGE = 'num group-data-[collapsible=icon]:hidden';
 /** One section item: a link, its badge, and the chevron and nested items when it has any. */
-function SectionRow({ item, active, onRemove, removeLabel, }) {
+function SectionRow({ item, activeId, onRemove, removeLabel, }) {
     const subs = item.items ?? [];
-    const subActive = subs.some((s) => active({ to: s.to, exact: true }));
-    const isActive = active({ to: item.to, exact: true }) && !subActive;
+    const subActive = activeId?.startsWith(`${item.id}/`) ?? false;
+    const isActive = activeId === item.id;
     // The open item shows no trash icon.
     const remove = item.fixed || isActive ? undefined : onRemove;
-    const row = (_jsxs(_Fragment, { children: [_jsx(SidebarMenuButton, { asChild: true, tooltip: item.title, isActive: isActive, children: _jsxs(Link, { to: item.to, children: [_jsx(item.icon, {}), _jsx("span", { children: item.title })] }) }), item.badge !== undefined && item.badge !== null && (_jsx(SidebarMenuBadge, { className: cn(SECTION_BADGE, subs.length > 0 && 'right-7', 
+    const row = (_jsxs(_Fragment, { children: [_jsx(SidebarMenuButton, { asChild: true, tooltip: item.title, isActive: isActive, children: _jsxs(Link, { to: item.to, children: [_jsx(item.icon, {}), _jsx("span", { children: item.title })] }) }), item.badge !== undefined && item.badge !== null && (_jsx(SidebarMenuBadge, { className: cn(SECTION_BADGE, 
                 // The remove icon shows on hover from md up, and always below it: make room there.
                 remove &&
                     'max-md:right-7 md:group-focus-within/menu-item:opacity-0 md:group-hover/menu-item:opacity-0'), children: item.badge })), remove && (_jsx(LumenConfirm, { title: `${removeLabel(item)}?`, action: "Remove", onConfirm: () => remove(item), children: _jsx(SidebarMenuAction, { showOnHover: true, "aria-label": removeLabel(item), title: removeLabel(item), 
@@ -50,7 +74,10 @@ function SectionRow({ item, active, onRemove, removeLabel, }) {
                     className: "text-muted-foreground peer-hover/menu-button:text-muted-foreground hover:bg-transparent hover:text-destructive", children: _jsx(Trash2Icon, {}) }) }))] }));
     if (!subs.length)
         return _jsx(SidebarMenuItem, { children: row });
-    return (_jsx(Collapsible, { asChild: true, defaultOpen: item.defaultOpen || subActive || active(item), className: "group/collapsible", children: _jsxs(SidebarMenuItem, { children: [row, _jsx(CollapsibleTrigger, { asChild: true, children: _jsx(SidebarMenuAction, { "aria-label": `Show or hide ${item.title}`, className: "data-[state=open]:rotate-90", children: _jsx(ChevronRightIcon, {}) }) }), _jsx(CollapsibleContent, { children: _jsx(SidebarMenuSub, { children: subs.map((sub) => (_jsx(SidebarMenuSubItem, { children: _jsx(SidebarMenuSubButton, { asChild: true, isActive: active({ to: sub.to, exact: true }), children: _jsxs(Link, { to: sub.to, children: [sub.color && (_jsx("span", { "aria-hidden": true, className: "size-2 shrink-0 rounded-full", style: { background: sub.color } })), _jsx("span", { children: sub.title })] }) }) }, sub.id))) }) })] }) }));
+    return (_jsx(Collapsible, { asChild: true, defaultOpen: item.defaultOpen || subActive || isActive, className: "group/collapsible", children: _jsxs(SidebarMenuItem, { children: [row, _jsx(CollapsibleTrigger, { asChild: true, children: _jsx(SidebarMenuAction, { "aria-label": `Show or hide ${item.title}`, className: "right-auto left-1.5 bg-sidebar opacity-0 group-hover/menu-item:opacity-100 focus-visible:opacity-100 peer-data-[active=true]/menu-button:bg-sidebar-accent [&>svg]:transition-transform data-[state=open]:[&>svg]:rotate-90", children: _jsx(ChevronRightIcon, {}) }) }), _jsx(CollapsibleContent, { children: _jsx(SidebarMenuSub, { className: "mr-0 pr-0", children: subs.map((sub) => {
+                            const hasBadge = sub.badge !== undefined && sub.badge !== null;
+                            return (_jsxs(SidebarMenuSubItem, { children: [_jsx(SidebarMenuSubButton, { asChild: true, isActive: activeId === `${item.id}/${sub.id}`, className: cn(hasBadge && 'pr-8'), children: _jsxs(Link, { to: sub.to, title: sub.title, children: [sub.icon ? (_jsx("span", { "aria-hidden": true, className: "flex shrink-0 [&>svg]:size-4", style: { color: sub.color }, children: _jsx(sub.icon, {}) })) : (sub.color && (_jsx("span", { "aria-hidden": true, className: "mx-1 size-2 shrink-0 rounded-full", style: { background: sub.color } }))), _jsx("span", { children: sub.title })] }) }), hasBadge && (_jsx("span", { className: cn('pointer-events-none absolute top-1 right-1 flex h-5 min-w-5 items-center justify-center px-1 text-xs text-muted-foreground', typeof sub.badge === 'number' && 'num'), children: sub.badge }))] }, sub.id));
+                        }) }) })] }) }));
 }
 /**
  * A section of things a person keeps (views, trades, a watchlist): `+` adds one, the
@@ -66,8 +93,22 @@ export function SidebarSection({ label, items, onAdd, addLabel = `Add to ${label
             type: assistantSubType ?? 'page',
         })),
     ]), label, pageType);
-    const active = useActive();
+    const match = useMatch();
+    // One selected row per section: the closest match wins, the first on a tie, so two items that
+    // open the same page never both look selected. An open parent is never selected for being open.
+    let activeId = null;
+    let best = -1;
+    for (const i of items) {
+        const own = match({ to: i.to, exact: true });
+        if (own > best)
+            [best, activeId] = [own, i.id];
+        for (const sub of i.items ?? []) {
+            const m = match({ to: sub.to, exact: true });
+            if (m > best)
+                [best, activeId] = [m, `${i.id}/${sub.id}`];
+        }
+    }
     return (_jsx(FoldGroup, { label: label, action: onAdd && (_jsx(SidebarGroupAction, { title: addLabel, "aria-label": addLabel, onClick: onAdd, children: _jsx(PlusIcon, {}) })), children: _jsxs(SidebarGroupContent, { children: [_jsxs(SidebarMenu, { children: [loading
                             ? [0, 1].map((i) => (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuSkeleton, { showIcon: true }) }, i)))
-                            : items.map((item) => (_jsx(SectionRow, { item: item, active: active, onRemove: onRemove, removeLabel: removeLabel }, item.id))), !loading && !items.length && empty && (_jsx("li", { className: "px-2 py-1 text-xs text-muted-foreground group-data-[collapsible=icon]:hidden", children: empty }))] }), children] }) }));
+                            : items.map((item) => (_jsx(SectionRow, { item: item, activeId: activeId, onRemove: onRemove, removeLabel: removeLabel }, item.id))), !loading && !items.length && empty && (_jsx("li", { className: "px-2 py-1 text-xs text-muted-foreground group-data-[collapsible=icon]:hidden", children: empty }))] }), children] }) }));
 }

package/dist/share-meter.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+export declare function ShareMeter({ value, label, color, wide, className, }: {
+    /** 0 to 1 fills the bar; past 1 it stays full. */
+    value: number;
+    /** The number beside the bar, e.g. `113%`; left out, the rounded percent. */
+    label?: ReactNode;
+    /** The bar's colour, a theme token (`var(--loss)` when over). */
+    color?: string;
+    /** Fills its cell (a list row) instead of the fixed table width. */
+    wide?: boolean;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/share-meter.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from './lib/utils.js';
+import { Progress } from './ui/progress.js';
+export function ShareMeter({ value, label, color = 'var(--primary)', wide, className, }) {
+    return (_jsxs("span", { className: cn('inline-flex items-center gap-2', wide && 'w-full', className), children: [_jsx(Progress, { value: Math.max(0, Math.min(value, 1)) * 100, className: cn('h-1.5 shrink-0 [&>[data-slot=progress-indicator]]:bg-(--meter-color)', wide ? 'w-full shrink' : 'w-14'), style: { '--meter-color': color } }), _jsx("span", { className: "num w-11 shrink-0 text-right text-xs", children: label ?? `${Math.round(value * 100)}%` })] }));
+}

package/dist/tile.js

@@ -6,7 +6,7 @@ function TileBody({ label, value, caption, lines, valueClassName, }) {
     return (_jsxs(_Fragment, { children: [_jsx("span", { className: "w-full truncate text-xs text-muted-foreground", children: label }), _jsx("span", { className: cn('num truncate text-xl leading-7 font-semibold', valueClassName), children: value }), caption ? (_jsx("span", { className: "num line-clamp-2 text-xs text-muted-foreground", children: caption })) : null, lines?.map((l, i) => (_jsx("span", { className: "num line-clamp-2 text-xs text-muted-foreground", children: l }, i)))] }));
 }
 export function Tile({ label, value, caption, lines, className, valueClassName, }) {
-    return (_jsx(Card, { size: "sm", className: cn('min-w-0 gap-0.5 px-3', className), children: _jsx(TileBody, { label: label, value: value, caption: caption, lines: lines, valueClassName: valueClassName }) }));
+    return (_jsx(Card, { size: "sm", className: cn('min-w-0 flex-1 basis-2/5 gap-0.5 px-3 lg:basis-auto', TILE_WIDTH, className), children: _jsx(TileBody, { label: label, value: value, caption: caption, lines: lines, valueClassName: valueClassName }) }));
 }
 /** Width of every header tile on desktop, toggle tiles and plain Tiles alike; shrinks to fit the row. */
 export const TILE_WIDTH = 'lg:w-(--tile-width) lg:flex-initial';

package/dist/view-edit-cell.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type ComponentType, type ReactNode } from 'react';
 export declare function EditCell({ label, value, options, unused, chip, note, colorOf, fixed, edited, onSave, }: {
     /** The field's name, e.g. `Basket`. */
     label: string;
@@ -23,13 +23,17 @@ export declare function EditCell({ label, value, options, unused, chip, note, co
  * a tap opens a picker that ticks any number and takes a typed name, and closing it saves them all
  * at once. Clicks stay off the row, which opens its details.
  */
-export declare function EditManyCell({ label, values, options, unused, note, colorOf, onSave, }: {
+export declare function EditManyCell({ label, values, options, unused, note, colorOf, iconOf, onSave, }: {
     label: string;
     values: string[];
     options: string[];
     unused?: string[];
     note?: string;
     colorOf?: (value: string) => string | undefined;
+    /** A value's icon (a label's), drawn in its colour on its chip and in the picker. */
+    iconOf?: (value: string) => ComponentType<{
+        className?: string;
+    }> | undefined;
     onSave: (values: string[]) => Promise<unknown>;
 }): import("react").JSX.Element;
 /**

package/dist/view-edit-cell.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // opens its details.
 import { PencilLineIcon, PlusIcon, XIcon } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
-import { ColorChip, colorIcon } from './color-dot.js';
+import { ColorChip, colorIcon, tintedIcon } from './color-dot.js';
 import { cn } from './lib/utils.js';
 import { LumenSelector } from './lumen-selector.js';
 import { Input } from './ui/input.js';
@@ -69,7 +69,7 @@ export function EditCell({ label, value, options, unused = [], chip, note, color
  * a tap opens a picker that ticks any number and takes a typed name, and closing it saves them all
  * at once. Clicks stay off the row, which opens its details.
  */
-export function EditManyCell({ label, values, options, unused = [], note, colorOf, onSave, }) {
+export function EditManyCell({ label, values, options, unused = [], note, colorOf, iconOf, onSave, }) {
     const [open, setOpen] = useState(false);
     const [draft, setDraft] = useState(values);
     const [error, setError] = useState(null);
@@ -99,7 +99,12 @@ export function EditManyCell({ label, values, options, unused = [], note, colorO
     };
     const row = (o) => {
         const c = colorOf?.(o);
-        return { value: o, label: o, ...(c ? { icon: colorIcon(c) } : {}) };
+        const i = iconOf?.(o);
+        return {
+            value: o,
+            label: o,
+            ...(i ? { icon: tintedIcon(i, c) } : c ? { icon: colorIcon(c) } : {}),
+        };
     };
     const all = [...options, ...unused];
     const picked = draft.filter((v) => !all.includes(v));
@@ -107,7 +112,7 @@ export function EditManyCell({ label, values, options, unused = [], note, colorO
         { label: 'In use', options: [...options, ...picked].map(row) },
         { label: 'Unused', options: unused.map(row) },
     ];
-    return (_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1", onClick: stop, onKeyDown: stop, children: [values.length > 0 && (_jsx("button", { type: "button", "aria-label": `${label}: ${values.join(', ')}`, className: "flex min-w-0 flex-wrap items-center gap-1 rounded text-left", onClick: start, children: values.map((v) => (_jsx(ColorChip, { color: colorOf?.(v), children: v }, v))) })), _jsx(LumenSelector, { multiple: true, trigger: "icon", icon: values.length ? PencilLineIcon : PlusIcon, size: "sm", label: values.length ? `Change ${label.toLowerCase()}` : `Add ${label.toLowerCase()}`, className: cn('size-6 text-muted-foreground', values.length
+    return (_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1", onClick: stop, onKeyDown: stop, children: [values.length > 0 && (_jsx("button", { type: "button", "aria-label": `${label}: ${values.join(', ')}`, className: "flex min-w-0 items-center gap-1 overflow-hidden rounded text-left", onClick: start, children: values.map((v) => (_jsx(ColorChip, { color: colorOf?.(v), icon: iconOf?.(v), children: v }, v))) })), _jsx(LumenSelector, { multiple: true, trigger: "icon", icon: values.length ? PencilLineIcon : PlusIcon, size: "sm", label: values.length ? `Change ${label.toLowerCase()}` : `Add ${label.toLowerCase()}`, className: cn('size-6 text-muted-foreground', values.length
                     ? 'opacity-0 group-hover/row:opacity-100 focus-visible:opacity-100 max-md:opacity-100'
                     : '-ml-1'), groups: groups, value: draft, disabled: saving, empty: `Type a ${label.toLowerCase()} name.`, create: (q) => q.trim() || null, createLabel: (q) => `Add “${q.trim()}”`, open: open, onOpenChange: (o) => {
                     if (o)

package/dist/view-model.d.ts

@@ -1,7 +1,7 @@
 import type { JoinKey } from '@columenlabs/lumen-ui-types/domains';
 import { type CustomViewConfig, type ViewAgg, type ViewChip, type ViewFormat, type ViewTotalAgg } from '@columenlabs/lumen-ui-types/views';
 import type { LucideIcon } from 'lucide-react';
-import type { ReactNode } from 'react';
+import type { ComponentType, ReactNode } from 'react';
 import type { ChartBand, ChartMarker, Series } from './growth-chart.js';
 export type ViewCellValue = number | string | null;
 /** One field of a data domain: how to read it, show it, filter, group and roll it up. */
@@ -107,6 +107,10 @@ export interface ViewField<T> {
      * cell, its chip and the edit picker. A CSS colour; a theme token reads in light and dark.
      */
     color?: (value: string) => string | undefined;
+    /** A text value's icon (a label's), drawn in its `color` on its chip and in the edit picker. */
+    iconOf?: (value: string) => ComponentType<{
+        className?: string;
+    }> | undefined;
     /** The cell's background, a theme colour mix (a P/L heat grid). */
     tint?: (row: T) => string | undefined;
     /** Left out on phones, where the table has no room for it (a returns table's longer windows). */
@@ -323,7 +327,7 @@ export declare const tilesOf: (c: CustomViewConfig) => ({
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     sign: boolean;
@@ -336,7 +340,7 @@ export declare const tilesOf: (c: CustomViewConfig) => ({
             key: string;
             value: string;
             not?: boolean | undefined;
-            op?: "between" | "eq" | "gt" | "lt" | undefined;
+            op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
             link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
         }[];
         suffix: string;

package/dist/whats-new.js

@@ -3,7 +3,8 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // every app): the version in the status bar opens the release notes, newest
 // first, each release's Key takeaways only. An app turns it on with LumenShell's `releases`, its
 // releases API (`GET ?limit=&before=` answering `{releases}`), which leaves out what the person can't
-// open; a host that answers 404 (self-host an app) keeps the version hidden. With `apps`, each
+// open; a host that answers 404 (self-host an app) keeps the button hidden. Until the first release
+// the button reads "What's new" and opens an empty state, so a new app shows it from day one. With `apps`, each
 // takeaway carries a chip of the app it is about (`apps` on the takeaway; none: everyone), and a
 // release where one app has `GROUP_AT` or more is split into one sub-section per app.
 import { useInfiniteQuery } from '@tanstack/react-query';
@@ -50,12 +51,13 @@ export function WhatsNew({ api, apps, everyone = 'Global', }) {
         staleTime: 30 * 60_000,
         retry: false,
     });
-    const releases = q.data?.pages.flatMap((p) => p ?? []) ?? [];
-    const latest = releases[0];
-    if (!latest)
+    // Hidden while loading, on an error, and when the host has no releases API (404).
+    if (!q.data || q.data.pages[0] === null)
         return null;
+    const releases = q.data.pages.flatMap((p) => p ?? []);
+    const latest = releases[0];
     const day = (at) => new Date(at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', timeZone });
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "sm", className: "num h-6 px-1.5 text-muted-foreground text-xs", onClick: () => setOpen(true), title: "What's new", children: latest.tag }), _jsx(LumenDrawer, { open: open, onClose: () => setOpen(false), title: "What's new", description: "Key takeaways of each release, newest first", footerStart: `${releases.length} releases`, footer: _jsxs(_Fragment, { children: [q.hasNextPage && (_jsx(Button, { variant: "outline", size: "sm", disabled: q.isFetchingNextPage, onClick: () => q.fetchNextPage(), children: "Show more" })), _jsx(Button, { size: "sm", onClick: () => setOpen(false), children: "Close" })] }), children: releases.map((r, i) => (_jsx(DrawerSection, { title: r.tag, hint: day(r.published_at), defaultOpen: i === 0, children: r.takeaways.length ? (_jsx(Notes, { takeaways: r.takeaways, apps: apps, everyone: everyone })) : (_jsx("p", { className: "py-1 pl-1 text-muted-foreground text-sm", children: "Nothing new for you in this one." })) }, r.tag))) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "sm", className: "num h-6 px-1.5 text-muted-foreground text-xs", onClick: () => setOpen(true), title: "What's new", children: latest?.tag ?? "What's new" }), _jsxs(LumenDrawer, { open: open, onClose: () => setOpen(false), title: "What's new", description: "Key takeaways of each release, newest first", footerStart: releases.length ? `${releases.length} releases` : undefined, footer: _jsxs(_Fragment, { children: [q.hasNextPage && (_jsx(Button, { variant: "outline", size: "sm", disabled: q.isFetchingNextPage, onClick: () => q.fetchNextPage(), children: "Show more" })), _jsx(Button, { size: "sm", onClick: () => setOpen(false), children: "Close" })] }), children: [!releases.length && (_jsx("p", { className: "py-2 text-muted-foreground text-sm", children: "No releases yet. Each release's key takeaways show here once it ships." })), releases.map((r, i) => (_jsx(DrawerSection, { title: r.tag, hint: day(r.published_at), defaultOpen: i === 0, children: r.takeaways.length ? (_jsx(Notes, { takeaways: r.takeaways, apps: apps, everyone: everyone })) : (_jsx("p", { className: "py-1 pl-1 text-muted-foreground text-sm", children: "Nothing new for you in this one." })) }, r.tag)))] })] }));
 }
 /** One release's takeaways: a flat list, or one sub-section per app once one app has many. */
 function Notes({ takeaways, apps, everyone, }) {

package/dist/widget-settings.d.ts

@@ -72,7 +72,7 @@ export declare const readsRows: (card: ViewWidget) => card is {
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     source?: string | undefined;
@@ -135,7 +135,7 @@ export declare const readsRows: (card: ViewWidget) => card is {
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     source?: string | undefined;
@@ -170,7 +170,7 @@ export declare const readsRows: (card: ViewWidget) => card is {
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     source?: string | undefined;
@@ -195,7 +195,7 @@ export declare const readsRows: (card: ViewWidget) => card is {
             key: string;
             value: string;
             not?: boolean | undefined;
-            op?: "between" | "eq" | "gt" | "lt" | undefined;
+            op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
             link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
         }[];
         sign: boolean;
@@ -208,7 +208,7 @@ export declare const readsRows: (card: ViewWidget) => card is {
                 key: string;
                 value: string;
                 not?: boolean | undefined;
-                op?: "between" | "eq" | "gt" | "lt" | undefined;
+                op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
                 link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
             }[];
             suffix: string;
@@ -246,7 +246,7 @@ export declare const readsRows: (card: ViewWidget) => card is {
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     source?: string | undefined;
@@ -270,7 +270,7 @@ export declare const readsRows: (card: ViewWidget) => card is {
             key: string;
             value: string;
             not?: boolean | undefined;
-            op?: "between" | "eq" | "gt" | "lt" | undefined;
+            op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
             link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
         }[];
         sign: boolean;
@@ -283,7 +283,7 @@ export declare const readsRows: (card: ViewWidget) => card is {
                 key: string;
                 value: string;
                 not?: boolean | undefined;
-                op?: "between" | "eq" | "gt" | "lt" | undefined;
+                op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
                 link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
             }[];
             suffix: string;
@@ -316,7 +316,7 @@ export declare const readsRows: (card: ViewWidget) => card is {
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     source?: string | undefined;
@@ -353,7 +353,7 @@ export declare const readsRows: (card: ViewWidget) => card is {
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     source?: string | undefined;
@@ -388,7 +388,7 @@ export declare const readsRows: (card: ViewWidget) => card is {
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     source?: string | undefined;
@@ -423,7 +423,7 @@ export declare const readsRows: (card: ViewWidget) => card is {
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     source?: string | undefined;
@@ -461,7 +461,7 @@ export declare const readsRows: (card: ViewWidget) => card is {
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     source?: string | undefined;
@@ -493,7 +493,7 @@ export declare const readsRows: (card: ViewWidget) => card is {
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     source?: string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.44",
+  "version": "0.1.46",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -41,7 +41,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.44",
+    "@columenlabs/lumen-ui-types": "0.1.46",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",