@columenlabs/lumen-ui 0.1.31 → 0.1.33

package/dist/coverage-cells.d.ts

@@ -1,12 +1,15 @@
 import { type ReactNode } from 'react';
 /** A backfill's state on a block it touches; it wins over coverage while the job runs. */
-export type CoverageJobState = 'queued' | 'running' | 'failed' | 'canceled';
+/** `indexing`: the block's copy is done and a follow-up step (an index, a rollup) is still running on it. */
+export type CoverageJobState = 'queued' | 'running' | 'indexing' | 'failed' | 'canceled';
 /** One cell's state. Done is not its own state: a finished block simply turns `full`. */
 export type CoverageLevel = 'full' | 'high' | 'low' | 'gap' | 'current' | 'none' | CoverageJobState;
+/** `swatch`: the legend's look when it differs from a cell's (a part-filled cell fills to its share). */
 export declare const COVERAGE_LEVELS: {
     level: CoverageLevel;
     label: string;
     className: string;
+    swatch?: string;
 }[];
 export declare const coverageLabel: (l: CoverageLevel) => string;
 export declare const coverageClass: (l: CoverageLevel) => string;
@@ -18,18 +21,22 @@ export declare function coverageLevel(have: number, expected: number, { current,
 /** The job state that shows when a block holds several. */
 export declare const firstJobState: (a: CoverageJobState | null, b: CoverageJobState | undefined) => CoverageJobState | null;
 /** The states on screen, in the legend's order, with a hint at the right. */
-export declare function CoverageLegend({ levels, hint }: {
+export declare function CoverageLegend({ levels, hint, labels, }: {
     levels: Set<CoverageLevel>;
     hint?: ReactNode;
+    /** An app's own words for some states (`running`: `Copying`). */
+    labels?: Partial<Record<CoverageLevel, string>>;
 }): import("react").JSX.Element;
 /**
  * One cell: a plain button. Its tooltip is the map's one shared `CoverageTip` (a Radix tooltip per
  * cell made a 100-row map 13,000 tooltips, seconds per render). `label` is the
  * accessible name and the tooltip's first line; `tip` marks the cell for the shared tooltip.
  */
-export declare const CoverageCell: import("react").MemoExoticComponent<({ level, label, tip, picked, disabled, pickable, onClick, className, }: {
+export declare const CoverageCell: import("react").MemoExoticComponent<({ level, label, tip, picked, disabled, pickable, onClick, className, fill, }: {
     level: CoverageLevel;
     label: string;
+    /** The share in hand (0–1): a part-done block fills to it from the left, whatever its state. */
+    fill?: number;
     /** What `CoverageTip` hands back to its `content` for this cell. */
     tip: string;
     picked?: boolean;

package/dist/coverage-cells.js

@@ -4,10 +4,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useRef, useState } from 'react';
 import { cn } from './lib/utils.js';
 import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.js';
+/** `swatch`: the legend's look when it differs from a cell's (a part-filled cell fills to its share). */
 export const COVERAGE_LEVELS = [
     { level: 'full', label: 'Complete', className: 'bg-cov-full' },
-    { level: 'high', label: '95–99%', className: 'bg-cov-high' },
-    { level: 'low', label: 'Under 95%', className: 'bg-cov-low' },
+    {
+        level: 'high',
+        label: '95–99%',
+        className: 'ring-1 ring-inset ring-cov-full',
+        swatch: 'bg-[linear-gradient(90deg,var(--cov-full)_0_80%,transparent_80%)] ring-1 ring-inset ring-cov-full',
+    },
+    {
+        level: 'low',
+        label: 'Under 95%',
+        className: 'ring-1 ring-inset ring-cov-full',
+        swatch: 'bg-[linear-gradient(90deg,var(--cov-full)_0_40%,transparent_40%)] ring-1 ring-inset ring-cov-full',
+    },
     { level: 'gap', label: 'Missing', className: 'bg-gap-hatch' },
     {
         level: 'current',
@@ -21,13 +32,18 @@ export const COVERAGE_LEVELS = [
         className: 'outline-1 outline-dashed -outline-offset-1 outline-primary',
     },
     { level: 'running', label: 'Running', className: 'bg-cov-running' },
-    { level: 'failed', label: 'Failed', className: 'bg-destructive' },
+    { level: 'indexing', label: 'Indexing', className: 'bg-cov-indexing' },
+    {
+        level: 'failed',
+        label: 'Failed',
+        className: 'bg-destructive/15 outline-2 -outline-offset-2 outline-destructive',
+    },
     { level: 'canceled', label: 'Canceled', className: 'bg-cov-canceled' },
 ];
 const BY_LEVEL = Object.fromEntries(COVERAGE_LEVELS.map((l) => [l.level, l]));
 export const coverageLabel = (l) => BY_LEVEL[l].label;
 export const coverageClass = (l) => BY_LEVEL[l].className;
-const JOB_ORDER = ['running', 'queued', 'failed', 'canceled'];
+const JOB_ORDER = ['running', 'indexing', 'queued', 'failed', 'canceled'];
 /** The state of a block from its sums: a job state first, then coverage. */
 export function coverageLevel(have, expected, { current = false, state } = {}) {
     if (state)
@@ -43,22 +59,22 @@ export function coverageLevel(have, expected, { current = false, state } = {}) {
 /** The job state that shows when a block holds several. */
 export const firstJobState = (a, b) => !b ? a : !a || JOB_ORDER.indexOf(b) < JOB_ORDER.indexOf(a) ? b : a;
 /** The states on screen, in the legend's order, with a hint at the right. */
-export function CoverageLegend({ levels, hint }) {
-    return (_jsxs("div", { className: "flex flex-wrap items-center gap-x-5 gap-y-2 text-xs text-muted-foreground", children: [COVERAGE_LEVELS.filter((l) => levels.has(l.level)).map((l) => (_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { "aria-hidden": true, className: cn('h-3 w-4 rounded-[3px]', l.className) }), l.label] }, l.level))), hint && _jsx("span", { className: "ml-auto hidden md:inline", children: hint })] }));
+export function CoverageLegend({ levels, hint, labels, }) {
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-x-5 gap-y-2 text-xs text-muted-foreground", children: [COVERAGE_LEVELS.filter((l) => levels.has(l.level)).map((l) => (_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { "aria-hidden": true, className: cn('h-3 w-4 rounded-[3px]', l.swatch ?? l.className) }), labels?.[l.level] ?? l.label] }, l.level))), hint && _jsx("span", { className: "ml-auto hidden md:inline", children: hint })] }));
 }
 /**
  * One cell: a plain button. Its tooltip is the map's one shared `CoverageTip` (a Radix tooltip per
  * cell made a 100-row map 13,000 tooltips, seconds per render). `label` is the
  * accessible name and the tooltip's first line; `tip` marks the cell for the shared tooltip.
  */
-export const CoverageCell = memo(function CoverageCell({ level, label, tip, picked = false, disabled = false, pickable = false, onClick, className, }) {
-    return (_jsx("button", { type: "button", "data-cell": tip, "aria-label": `${label}: ${coverageLabel(level)}`, "aria-pressed": pickable && !disabled ? picked : undefined, disabled: disabled, onClick: onClick, className: cn('min-w-0 rounded-[3px] p-0 focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-default', coverageClass(level), 
+export const CoverageCell = memo(function CoverageCell({ level, label, tip, picked = false, disabled = false, pickable = false, onClick, className, fill, }) {
+    return (_jsx("button", { type: "button", "data-cell": tip, "aria-label": `${label}: ${coverageLabel(level)}`, "aria-pressed": pickable && !disabled ? picked : undefined, disabled: disabled, onClick: onClick, className: cn('min-w-0 rounded-[3px] p-0 focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-default', coverageClass(level), 'relative overflow-hidden', 
         // outline-none would also hide the picked outline, so a picked cell must not carry it.
         picked
             ? 'outline-2 outline-offset-1 outline-foreground'
-            : level === 'queued'
+            : level === 'queued' || level === 'failed'
                 ? ''
-                : 'outline-none', pickable && !disabled && 'cursor-pointer', className) }));
+                : 'outline-none', pickable && !disabled && 'cursor-pointer', className), children: fill !== undefined && fill > 0 && fill < 1 && (_jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute inset-y-0 left-0 bg-cov-full", style: { width: `${Math.round(fill * 100)}%` } })) }));
 });
 /**
  * The one tooltip of a coverage map: it follows the cell under the pointer or keyboard focus inside
@@ -81,5 +97,5 @@ export function CoverageTip({ content, children, className, }) {
             : { tip, x: r.left - o.left, y: r.top - o.top, w: r.width, h: r.height });
     };
     const body = at ? content(at.tip) : null;
-    return (_jsxs("div", { ref: box, className: cn('relative', className), onPointerOver: (e) => e.pointerType !== 'touch' && show(e.target), onPointerLeave: () => setAt(null), onFocus: (e) => show(e.target), onBlur: () => setAt(null), children: [children, at && body && (_jsxs(Tooltip, { open: true, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute", style: { left: at.x, top: at.y, width: at.w, height: at.h } }) }), _jsxs(TooltipContent, { className: "num max-w-72", children: [_jsx("div", { className: "font-medium", children: body.label }), body.detail] })] }, at.tip))] }));
+    return (_jsxs("div", { ref: box, className: cn('relative', className), onPointerOver: (e) => e.pointerType !== 'touch' && show(e.target), onPointerLeave: () => setAt(null), onFocus: (e) => show(e.target), onBlur: () => setAt(null), children: [children, at && body && (_jsxs(Tooltip, { open: true, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute", style: { left: at.x, top: at.y, width: at.w, height: at.h } }) }), _jsx(TooltipContent, { className: "num max-w-72", children: _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("div", { className: "font-medium", children: body.label }), body.detail] }) })] }, at.tip))] }));
 }

package/dist/coverage-map.d.ts

@@ -1,7 +1,7 @@
 import type { QueryKey, UseQueryOptions } from '@tanstack/react-query';
 import { type LucideIcon } from 'lucide-react';
 import { type ReactNode } from 'react';
-import { type CoverageJobState } from './coverage-cells.js';
+import { type CoverageJobState, type CoverageLevel } from './coverage-cells.js';
 /** One count at the finest grain a page has: a day (`2026-10-12`) or a month (`2026-10`). */
 export interface CoverageFact {
     row: string;
@@ -72,11 +72,22 @@ export interface LumenCoverageMapProps<TRaw = unknown, TKey extends QueryKey = Q
     unit?: string;
     /** Right-hand columns; a phone keeps Complete only. */
     summary?: CoverageSummary[];
-    /** `backfill`: click, shift-click a range, then Queue backfill. `drill`: a click opens the block. */
+    /** `backfill`: click, shift-click a range, then the selection bar's buttons. `drill`: a click opens the block. */
     select?: 'backfill' | 'drill';
     /** Months a backfill can take (the source's own limits). */
     selectable?: (row: string, month: string) => boolean;
     onQueue?: (pick: CoveragePick) => Promise<unknown> | undefined;
+    /** The selection bar's queue button (`Queue backfill`). */
+    queueLabel?: string;
+    /** What the months to queue come to, shown after their count (`1,240 messages · about 2 h`). */
+    pickNote?: (pick: CoveragePick) => string;
+    /** Months already queued that a pick can take back out, with the bar's Remove from queue. */
+    removable?: (row: string, month: string) => boolean;
+    onRemove?: (pick: CoveragePick) => Promise<unknown> | undefined;
+    /** An app's own words for some states, in the tooltip and legend (`{ running: 'Copying' }`). */
+    stateLabels?: Partial<Record<CoverageLevel, string>>;
+    /** Picks these months as if clicked (pass a new object each time); nothing is queued until the bar's button. */
+    preselect?: CoveragePick;
     /** The drilled block (`2026-09`) and the click that changes it. */
     drilled?: string | null;
     onDrill?: (row: string, period: string) => void;
@@ -110,4 +121,4 @@ export interface LumenCoverageMapProps<TRaw = unknown, TKey extends QueryKey = Q
 export declare function blockOf(period: string, block: CoverageBlock): string;
 /** `2026-09` → `Sep 2026`, `2026-Q3` → `2026 Q3`, days stay as they are. */
 export declare function blockName(key: string): string;
-export declare function LumenCoverageMap<TRaw, TKey extends QueryKey>({ source, title, icon, rows: rowSpec, layout, block: initialBlock, zoom, window, unit, summary, select, selectable, onQueue, drilled, onDrill, groupBy, hint, pageSize: initialPageSize, pager, tools, filter, filterCount, empty, lazy, }: LumenCoverageMapProps<TRaw, TKey>): import("react").JSX.Element;
+export declare function LumenCoverageMap<TRaw, TKey extends QueryKey>({ source, title, icon, rows: rowSpec, layout, block: initialBlock, zoom, window, unit, summary, select, selectable, onQueue, queueLabel, pickNote, removable, onRemove, preselect, stateLabels, drilled, onDrill, groupBy, hint, pageSize: initialPageSize, pager, tools, filter, filterCount, empty, lazy, }: LumenCoverageMapProps<TRaw, TKey>): import("react").JSX.Element;

package/dist/coverage-map.js

@@ -1,16 +1,16 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Link } from '@tanstack/react-router';
-import { Grid3x3Icon, ListPlusIcon, XIcon } from 'lucide-react';
-import { isValidElement, memo, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { Grid3x3Icon, ListPlusIcon, ListXIcon } from 'lucide-react';
+import { isValidElement, memo, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { CoverageCell, CoverageLegend, CoverageTip, coverageLabel, coverageLevel, firstJobState, } from './coverage-cells.js';
 import { FoldChevron, useFolds, usePageKey } from './fold.js';
 import { useIsMobile } from './hooks/use-mobile.js';
-import { IconButton } from './icon-button.js';
 import { cn } from './lib/utils.js';
 import { LumenStates, useLumenSource } from './lumen-source.js';
 import { LumenWidget } from './lumen-widget.js';
 import { LumenPager } from './pager.js';
 import { Badge } from './ui/badge.js';
+import { Button } from './ui/button.js';
 import { Skeleton } from './ui/skeleton.js';
 import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group.js';
 const MON = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
@@ -189,7 +189,7 @@ const MapRow = memo(function MapRow({ r, cols, marks, picks, total, look, }) {
                 const m = marks[i];
                 if (!m)
                     return _jsx("span", {}, k);
-                return (_jsx(CoverageCell, { level: m.level, label: `${text} · ${blockName(k)}`, tip: `${r.row}|${k}`, picked: picks.includes(k) || look.drilled === k, pickable: look.select === 'backfill' || look.select === 'drill', disabled: look.select === 'backfill' ? !m.canPick : look.select !== 'drill', className: "h-[18px]" }, k));
+                return (_jsx(CoverageCell, { level: m.level, fill: m.fill, label: `${text} · ${blockName(k)}`, tip: `${r.row}|${k}`, picked: picks.includes(k) || look.drilled === k, pickable: look.select === 'backfill' || look.select === 'drill', disabled: look.select === 'backfill' ? !m.canPick : look.select !== 'drill', className: "h-[18px]" }, k));
             }), look.sums.map((s) => (_jsx("span", { className: cn('num pl-3 text-right text-xs whitespace-nowrap', s !== 'complete' && 'text-muted-foreground'), children: s === 'complete'
                     ? fmtPct(total.have, total.expected)
                     : s === 'first'
@@ -200,7 +200,7 @@ const MapRow = memo(function MapRow({ r, cols, marks, picks, total, look, }) {
                                 ? fmtCounts(total.have, total.expected)
                                 : fmtInt(total.have) }, s)))] }));
 }, (a, b) => a.sig === b.sig && sameNode(a.r.badge, b.r.badge));
-export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowSpec, layout = 'grid', block: initialBlock = 'month', zoom, window = 'all', unit = 'sessions', summary = ['complete', 'last'], select, selectable = () => true, onQueue, drilled = null, onDrill, groupBy = false, hint, pageSize: initialPageSize, pager, tools, filter, filterCount, empty, lazy = false, }) {
+export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowSpec, layout = 'grid', block: initialBlock = 'month', zoom, window = 'all', unit = 'sessions', summary = ['complete', 'last'], select, selectable = () => true, onQueue, queueLabel = 'Queue backfill', pickNote, removable = () => false, onRemove, preselect, stateLabels, drilled = null, onDrill, groupBy = false, hint, pageSize: initialPageSize, pager, tools, filter, filterCount, empty, lazy = false, }) {
     const { data, load: raw, ref } = useLumenSource(source, { lazy });
     // A coverage map refreshes in place: any refresh, asked for or a poll, only spins its ↻; no bar or dimming over the cells.
     const load = { ...raw, fetching: raw.fetching || raw.background };
@@ -210,6 +210,11 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
     const [picked, setPicked] = useState(new Set());
     const [queueing, setQueueing] = useState(false);
     const anchor = useRef(null);
+    // A preselect picks its months as if clicked; it replaces the current pick.
+    useEffect(() => {
+        if (preselect)
+            setPicked(new Set(preselect.flatMap((p) => p.months.map((m) => `${p.row}|${m}`))));
+    }, [preselect]);
     const scroller = useRef(null);
     const [pageSize, setPageSize] = useState(initialPageSize ?? 0);
     const [pageIndex, setPageIndex] = useState(0);
@@ -248,14 +253,15 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
         }
         return next;
     });
-    const pickedMonths = () => {
+    const pickedMonths = (keep = selectable) => {
         const byRow = new Map();
         for (const id of picked) {
-            const [row, key] = id.split('|');
-            const c = folded?.cells.get(row)?.get(key);
+            const cut = id.lastIndexOf('|');
+            const row = id.slice(0, cut);
+            const c = folded?.cells.get(row)?.get(id.slice(cut + 1));
             const set = byRow.get(row) ?? new Set();
             for (const m of c?.months ?? [])
-                if (selectable(row, m))
+                if (keep(row, m))
                     set.add(m);
             byRow.set(row, set);
         }
@@ -263,12 +269,13 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
             .filter(([, ms]) => ms.size)
             .map(([row, ms]) => ({ row, months: [...ms].sort() }));
     };
-    const queue = async () => {
-        if (!onQueue)
+    const queue = async (remove = false) => {
+        const act = remove ? onRemove : onQueue;
+        if (!act)
             return;
         setQueueing(true);
         try {
-            await onQueue(pickedMonths());
+            await act(pickedMonths(remove ? removable : selectable));
             setPicked(new Set());
         }
         finally {
@@ -288,9 +295,14 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
         const text = data?.rows.find((r) => r.row === row)?.label ?? row;
         return {
             label: `${text} · ${blockName(k)}`,
-            detail: (_jsxs(_Fragment, { children: [_jsxs("div", { children: [unitLabel(c.have, c.expected), " \u00B7 ", coverageLabel(c.level)] }), c.notes.map((n) => (_jsx("div", { children: n }, n))), layout === 'months' && select === 'drill' && _jsx("div", { children: "Click to see its days" })] })),
+            detail: (_jsxs(_Fragment, { children: [_jsxs("div", { children: [unitLabel(c.have, c.expected), " \u00B7 ", stateLabels?.[c.level] ?? coverageLabel(c.level)] }), c.notes.map((n) => (_jsx("div", { children: n }, n))), layout === 'months' && select === 'drill' && _jsx("div", { children: "Click to see its days" })] })),
         };
     };
+    /** A block a pick can take: a month in it can be queued, or taken out of the queue. */
+    const canPick = (row, key) => !!folded?.cells
+        .get(row)
+        ?.get(key)
+        ?.months.some((m) => selectable(row, m) || (onRemove !== undefined && removable(row, m)));
     // One click handler for every cell: drill, or pick (shift-click picks a range in the row).
     const onCellClick = (e) => {
         const el = e.target instanceof Element ? e.target.closest('[data-cell]') : null;
@@ -306,10 +318,13 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
         }
         if (select !== 'backfill')
             return;
-        const i = cols.indexOf(k);
+        // The months layout ranges over its months in time order, across years.
+        const order = layout === 'months' ? [...(folded?.cells.get(row)?.keys() ?? [])].sort() : cols;
+        const i = order.indexOf(k);
         if (e.shiftKey && anchor.current?.row === row) {
             const [lo, hi] = [anchor.current.index, i].sort((x, y) => x - y);
-            toggle(row, cols.slice(lo, hi + 1), 'add');
+            const span = order.slice(lo, hi + 1);
+            toggle(row, span.filter((key) => canPick(row, key)), 'add');
         }
         else
             toggle(row, [k], 'toggle');
@@ -338,7 +353,7 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
                                 levels.add(c.level);
                                 have += c.have;
                                 expected += c.expected;
-                                return (_jsx(CoverageCell, { level: c.level, label: `${row} · ${blockName(key)}`, tip: `${row}|${key}`, picked: drilled === key, pickable: select === 'drill', disabled: select !== 'drill', className: mobile ? 'h-4' : 'h-5' }, key));
+                                return (_jsx(CoverageCell, { level: c.level, fill: c.expected > 0 ? c.have / c.expected : undefined, label: `${row} · ${blockName(key)}`, tip: `${row}|${key}`, picked: picked.has(`${row}|${key}`) || drilled === key, pickable: select === 'backfill' || select === 'drill', disabled: select === 'backfill' ? !canPick(row, key) : select !== 'drill', className: mobile ? 'h-4' : 'h-5' }, key));
                             }),
                             ...sums.map((s) => (_jsx("span", { className: cn('num pl-3 text-right text-xs', s !== 'complete' && 'text-muted-foreground'), children: s === 'complete'
                                     ? fmtPct(have, expected)
@@ -392,8 +407,11 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
                             if (!c)
                                 return null;
                             levels.add(c.level);
-                            const canPick = select === 'backfill' && c.months.some((m) => selectable(r.row, m));
-                            return { level: c.level, canPick };
+                            return {
+                                level: c.level,
+                                canPick: select === 'backfill' && canPick(r.row, k),
+                                fill: c.expected > 0 ? c.have / c.expected : undefined,
+                            };
                         });
                         const picks = pickedBy.get(r.row) ?? [];
                         out.push(_jsx(MapRow, { r: r, cols: cols, marks: marks, picks: picks, total: folded.totals.get(r.row) ?? { have: 0, expected: 0 }, look: look, sig: [
@@ -411,7 +429,9 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
                                 cols[0],
                                 cols.at(-1),
                                 picks.join(),
-                                marks.map((m) => (m ? `${m.level}${m.canPick ? '+' : ''}` : '')).join(),
+                                marks
+                                    .map((m) => (m ? `${m.level}${m.canPick ? '+' : ''}${m.fill ?? ''}` : ''))
+                                    .join(),
                                 JSON.stringify(folded.totals.get(r.row) ?? null),
                             ].join('\u0001') }, r.row));
                         return out;
@@ -419,7 +439,13 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
         }
     }
     const pick = picked.size ? pickedMonths() : [];
-    const pickedCount = pick.reduce((n, p) => n + p.months.length, 0);
+    const queueCount = pick.reduce((n, p) => n + p.months.length, 0);
+    const unpick = picked.size && onRemove ? pickedMonths(removable) : [];
+    const removeCount = unpick.reduce((n, p) => n + p.months.length, 0);
+    const pickedCount = queueCount + removeCount;
+    const pickedRows = [...new Set([...pick, ...unpick].map((p) => p.row))];
+    const rowName = (row) => data?.rows.find((r) => r.row === row)?.label ?? row;
+    const months = (n) => `${n} month${n > 1 ? 's' : ''}`;
     const head = (_jsxs(_Fragment, { children: [tools, zoom && layout === 'grid' && (_jsx(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, value: block, onValueChange: (v) => {
                     if (!v)
                         return;
@@ -431,9 +457,9 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
                     setPageSize(n);
                     setPageIndex(0);
                 }, noun: plural(rowSpec.title) })))] }));
-    return (_jsx("div", { ref: ref, className: "min-w-0", children: _jsx(LumenWidget, { id: title, kind: null, icon: icon, title: title, tools: head, filter: filter, filterCount: filterCount, load: load, rows: data?.rows.length, pad: false, children: _jsx("div", { className: "flex flex-col gap-3 px-3 pt-3 pb-3", children: _jsxs(LumenStates, { load: cells, skeleton: _jsx(GridSkeleton, {}), empty: data && !data.rows.length && !data.facts.length ? empty : undefined, children: [_jsx("div", { ref: scroller, className: "overflow-x-auto overflow-y-hidden pb-1", children: _jsx(CoverageTip, { content: tipFor, className: "w-max min-w-full", children: body }) }), pickedCount > 0 && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 rounded-lg bg-muted px-3 py-2 text-sm", children: [_jsxs("span", { className: "min-w-0 truncate", children: [_jsx("span", { className: "num font-semibold", children: pick.map((p) => p.row).join(', ') }), ` · ${pickedCount} month${pickedCount > 1 ? 's' : ''}`] }), _jsx("span", { className: "flex-1" }), _jsx(IconButton, { icon: XIcon, label: "Clear selection", onClick: () => setPicked(new Set()) }), _jsx(IconButton, { icon: ListPlusIcon, label: `Queue backfill · ${pickedCount} month${pickedCount > 1 ? 's' : ''}`, variant: "default", disabled: queueing || !onQueue, onClick: () => void queue() })] })), _jsx("div", { className: "border-t pt-3", children: _jsx(CoverageLegend, { levels: levels, hint: hint ??
+    return (_jsx("div", { ref: ref, className: "min-w-0", children: _jsx(LumenWidget, { id: title, kind: null, icon: icon, title: title, tools: head, filter: filter, filterCount: filterCount, load: load, rows: data?.rows.length, pad: false, children: _jsx("div", { className: "flex flex-col gap-3 px-3 pt-3 pb-3", children: _jsxs(LumenStates, { load: cells, skeleton: _jsx(GridSkeleton, {}), empty: data && !data.rows.length && !data.facts.length ? empty : undefined, children: [_jsx("div", { ref: scroller, className: "overflow-x-auto overflow-y-hidden pb-1", children: _jsx(CoverageTip, { content: tipFor, className: "w-max min-w-full", children: body }) }), pickedCount > 0 && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 rounded-lg bg-muted px-3 py-2 text-sm", children: [_jsxs("span", { className: "min-w-0", children: [layout === 'grid' && (_jsx("span", { className: "num font-semibold", children: `${pickedRows.map(rowName).join(', ')} · ` })), `${months(pickedCount)} picked`, pickNote && queueCount > 0 ? ` · ${pickNote(pick)}` : ''] }), _jsx("span", { className: "flex-1" }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setPicked(new Set()), children: "Clear" }), removeCount > 0 && (_jsxs(Button, { variant: "outline", size: "sm", disabled: queueing, onClick: () => void queue(true), children: [_jsx(ListXIcon, {}), " Remove from queue \u00B7 ", months(removeCount)] })), queueCount > 0 && (_jsxs(Button, { size: "sm", disabled: queueing || !onQueue, onClick: () => void queue(), children: [_jsx(ListPlusIcon, {}), " ", queueLabel, " \u00B7 ", months(queueCount)] }))] })), _jsx("div", { className: "border-t pt-3", children: _jsx(CoverageLegend, { levels: levels, labels: stateLabels, hint: hint ??
                                     (select === 'backfill'
-                                        ? 'Click a cell, shift-click for a range, to queue a backfill'
+                                        ? 'Click a block, shift-click for a range'
                                         : select === 'drill'
                                             ? 'Click a block to see its days'
                                             : undefined) }) })] }) }) }) }));

package/dist/theme.css

@@ -397,6 +397,9 @@
     background-size: 11.3px 11.3px;
     animation: lumen-cov-run 1s linear infinite;
   }
+  .bg-cov-indexing {
+    background: repeating-linear-gradient(135deg, var(--cov-high) 0 4px, var(--cov-low) 4px 8px);
+  }
   .bg-cov-canceled {
     background: linear-gradient(
         135deg,

package/package.json

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