@columenlabs/lumen-ui 0.1.30 → 0.1.32

package/dist/coverage-map.d.ts

@@ -72,11 +72,20 @@ 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;
+    /** 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 +119,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, 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'];
@@ -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, 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 {
@@ -291,6 +298,11 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
             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" })] })),
         };
     };
+    /** 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, 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,7 @@ 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) };
                         });
                         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: [
@@ -419,7 +433,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 +451,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, 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/package.json

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