@columenlabs/lumen-ui 0.1.45 → 0.1.47

package/README.md

@@ -74,6 +74,16 @@ 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.
+- A page's header numbers are metric cards: `TileRow` of `Tile` (or `TileToggleGroup` when they pick what the page shows), with `fill` so they share the row, each with `spark` set to its daily history where it has one. Don't build a card of your own for this.
+- A metered column (use against an allowance) shows one number per cell with `UnitValue` (right-aligned number, fixed muted unit slot, status dot), never `value [pct]`. Offer both readings through the field's `showAs` (Amount / % of allowance, picked per column in Edit view, saved as `shows`); default amounts for sizes (storage) and shares for capped counts. Put the other reading, the allowance and the cost formula in a hover card. Totals use `rollRender`: sum amounts with their unit; a share is the rows' total over their allowance, never a sum of percents.
+- A floating bulk-action bar over a table's selection: Apply clears the selection and the bar goes away; the toast's Undo restores the change, not the selection. Cancel keeps the selection.
+- 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,8 @@ 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 { UnitValue } from './unit-value.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';
@@ -66,7 +68,7 @@ export { OriginLegend, originsOf } from './origin-legend.js';
 export { type ConnectedDomain, ConnectOffer, connectionFields, linkGroupId } from './connections.js';
 export { FRESHNESS, type Freshness, FreshnessIcon, FreshnessMark, freshnessLine, freshnessOf, } from './freshness.js';
 export { SourcesLine, useSourceHealth } from './source-health.js';
-export { TILE_WIDTH, Tile, TileChip, type TileOption, TileRow, TileToggleGroup, } from './tile.js';
+export { TILE_WIDTH, Tile, TileChip, type TileOption, TileRow, TileSpark, TileToggleGroup, } from './tile.js';
 export { type FilterField, type FilterToken, LumenTokenizedFilter, type LumenFilterState, useLumenFilter, } from './lumen-filter.js';
 export { useIsMobile } from './hooks/use-mobile.js';
 export { VIEW_ICONS, iconOf, viewIcon } from './view-icons.js';

package/dist/index.js

@@ -28,6 +28,8 @@ 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 { UnitValue } from './unit-value.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';
@@ -73,7 +75,7 @@ export { OriginLegend, originsOf } from './origin-legend.js';
 export { ConnectOffer, connectionFields, linkGroupId } from './connections.js';
 export { FRESHNESS, FreshnessIcon, FreshnessMark, freshnessLine, freshnessOf, } from './freshness.js';
 export { SourcesLine, useSourceHealth } from './source-health.js';
-export { TILE_WIDTH, Tile, TileChip, TileRow, TileToggleGroup, } from './tile.js';
+export { TILE_WIDTH, Tile, TileChip, TileRow, TileSpark, TileToggleGroup, } from './tile.js';
 export { LumenTokenizedFilter, useLumenFilter, } from './lumen-filter.js';
 export { useIsMobile } from './hooks/use-mobile.js';
 export { VIEW_ICONS, iconOf, viewIcon } from './view-icons.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.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 });
@@ -555,7 +555,7 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
     const lead = Math.max(1, shown.findIndex((f, i) => i > 0 && rolls(f)) < 0
         ? shown.length
         : shown.findIndex((f, i) => i > 0 && rolls(f)));
-    const rollCell = (f, members) => rollsUp(f) ? (_jsx(ViewValueCell, { value: computed.roll(f, members), format: f.aggregate && isCountAgg(f.aggregate) ? 'rounded' : f.format, amount: f.aggregate !== 'count' && f.amount, compact: f.compact })) : null;
+    const rollCell = (f, members) => rollsUp(f) && f.rollRender ? (f.rollRender(members)) : rollsUp(f) ? (_jsx(ViewValueCell, { value: computed.roll(f, members), format: f.aggregate && isCountAgg(f.aggregate) ? 'rounded' : f.format, amount: f.aggregate !== 'count' && f.amount, compact: f.compact })) : null;
     const rollCells = (members) => shown.map((f) => (_jsx(TableCell, { className: colOf(f), children: rollCell(f, members) }, f.key)));
     // A row's chevron opens one level under it, closed by default: its panel, else the view's
     // sub-group ("Each row opens"; None opens nothing).

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;
@@ -199,6 +199,7 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
         }[];
         formats?: Record<string, "compact" | "integer" | "number" | "percent" | "price" | "price_rounded" | "price_signed" | "rounded" | "signed" | "weight"> | undefined;
         aggs?: Record<string, "count" | "distinct" | "first" | "last" | "max" | "mean" | "min" | "none" | "sum"> | undefined;
+        shows?: Record<string, string> | undefined;
         group: {
             fields: string[];
             default: string | null;
@@ -237,7 +238,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 +273,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 +298,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 +311,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 +349,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 +373,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 +386,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 +419,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 +456,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 +491,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 +526,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 +564,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 +599,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 +632,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 +665,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 +702,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