@columenlabs/lumen-ui 0.1.40 → 0.1.42

package/dist/coverage-cells.d.ts

@@ -32,7 +32,7 @@ export declare function CoverageLegend({ levels, hint, labels, }: {
  * 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, fill, }: {
+export declare const CoverageCell: import("react").MemoExoticComponent<({ level, label, tip, picked, disabled, pickable, onClick, className, fill, mark, start, preview, }: {
     level: CoverageLevel;
     label: string;
     /** The share in hand (0–1): a part-done block fills to it from the left, whatever its state. */
@@ -45,6 +45,13 @@ export declare const CoverageCell: import("react").MemoExoticComponent<({ level,
     pickable?: boolean;
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     className?: string;
+    /** A backfill pick: a frame and a check (`add`) or a minus (`remove`, out of the queue).
+     *  Ink only, so it never reads as a state's colour or the queued dashes. */
+    mark?: 'add' | 'remove';
+    /** The first block of a range being picked: its mark pulses until the range ends. */
+    start?: boolean;
+    /** Inside the range the pointer would pick (or, with `mark`, unpick) next. */
+    preview?: boolean;
 }) => import("react").JSX.Element>;
 /**
  * The one tooltip of a coverage map: it follows the cell under the pointer or keyboard focus inside

package/dist/coverage-cells.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // What LumenCoverageMap and LumenCoverageCalendarMap share: one state per cell, its look, the legend of the states on screen and the cell with its
 // tooltip. A colour fix here reaches every coverage surface.
+import { CheckIcon, MinusIcon } from 'lucide-react';
 import { memo, useRef, useState } from 'react';
 import { cn } from './lib/utils.js';
 import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.js';
@@ -67,14 +68,20 @@ export function CoverageLegend({ levels, hint, labels, }) {
  * 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, 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', 
+export const CoverageCell = memo(function CoverageCell({ level, label, tip, picked = false, disabled = false, pickable = false, onClick, className, fill, mark, start = false, preview = false, }) {
+    return (_jsxs("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 === 'failed'
-                ? ''
-                : '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)}%` } })) }));
+        mark && !preview
+            ? 'shadow-[inset_0_0_0_2px_var(--foreground),inset_0_0_0_3px_var(--card)] outline-none'
+            : preview
+                ? 'shadow-[inset_0_0_0_2px_color-mix(in_oklab,var(--foreground)_45%,transparent)] outline-none'
+                : picked
+                    ? 'outline-2 outline-offset-1 outline-foreground'
+                    : level === 'queued' || level === 'failed'
+                        ? ''
+                        : '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)}%` } })), mark && (_jsx("span", { "aria-hidden": true, className: cn('pointer-events-none absolute top-1/2 right-0.5 flex size-2.5 -translate-y-1/2 items-center justify-center rounded-full bg-foreground text-background sm:size-3', start && 'motion-safe:animate-pulse', 
+                // A picked block inside an unpicking range: its check fades, about to go.
+                preview && 'opacity-40'), children: mark === 'add' ? (_jsx(CheckIcon, { className: "size-2 stroke-[3.5] sm:size-2.5" })) : (_jsx(MinusIcon, { className: "size-2 stroke-[3.5] sm:size-2.5" })) }))] }));
 });
 /**
  * The one tooltip of a coverage map: it follows the cell under the pointer or keyboard focus inside

package/dist/coverage-map.d.ts

@@ -72,7 +72,8 @@ 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 the selection bar's buttons. `drill`: a click opens the block. */
+    /** `backfill`: tap a block, then another to pick the range between (a year's label picks its
+     *  year), 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;
@@ -88,6 +89,8 @@ export interface LumenCoverageMapProps<TRaw = unknown, TKey extends QueryKey = Q
     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;
+    /** In the selection bar while nothing is picked: quick picks (buttons that set `preselect`). */
+    pickTools?: ReactNode;
     /** The drilled block (`2026-09`) and the click that changes it. */
     drilled?: string | null;
     onDrill?: (row: string, period: string) => void;
@@ -121,4 +124,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, 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;
+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, pickTools, 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

@@ -180,7 +180,7 @@ function sameNode(a, b) {
  * changes (`sig`), so a poll redraws the rows whose blocks moved and a pick redraws one row
  * (a 100-row map used to redraw all 13,000 cells on every poll).
  */
-const MapRow = memo(function MapRow({ r, cols, marks, picks, total, look, }) {
+const MapRow = memo(function MapRow({ r, cols, marks, picks, start, previews, total, look, }) {
     const text = r.label ?? r.row;
     const link = look.link?.(r.row);
     return (_jsxs(_Fragment, { children: [_jsxs("span", { 
@@ -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, 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));
+                return (_jsx(CoverageCell, { level: m.level, fill: m.fill, label: `${text} · ${blockName(k)}`, tip: `${r.row}|${k}`, picked: picks.includes(k) || look.drilled === k, mark: picks.includes(k) ? m.kind : undefined, start: start === k, preview: m.canPick && previews.includes(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, queueLabel = 'Queue backfill', pickNote, removable = () => false, onRemove, preselect, stateLabels, 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, pickTools, 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 };
@@ -209,11 +209,18 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
     const [block, setBlock] = useState(layout === 'months' ? 'month' : initialBlock);
     const [picked, setPicked] = useState(new Set());
     const [queueing, setQueueing] = useState(false);
-    const anchor = useRef(null);
+    // A range: the first tap picks a block and starts it, the next tap in the row picks every block
+    // between. Started on a picked block, the range unpicks instead (`remove`).
+    // `over` is the block under the pointer meanwhile; `last` anchors shift-click.
+    const [start, setStart] = useState(null);
+    const [over, setOver] = useState(null);
+    const last = 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}`))));
+        if (!preselect)
+            return;
+        setPicked(new Set(preselect.flatMap((p) => p.months.map((m) => `${p.row}|${m}`))));
+        setStart(null);
     }, [preselect]);
     const scroller = useRef(null);
     const [pageSize, setPageSize] = useState(initialPageSize ?? 0);
@@ -234,7 +241,7 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
     // biome-ignore lint/correctness/useExhaustiveDependencies: re-run when the columns change
     useLayoutEffect(() => {
         const el = scroller.current;
-        if (el)
+        if (el && layout === 'grid')
             el.scrollLeft = el.scrollWidth;
     }, [strip]);
     const sums = mobile ? summary.filter((s) => s === 'complete') : summary;
@@ -246,7 +253,7 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
         const ids = keys.map((k) => `${row}|${k}`);
         const all = ids.every((id) => next.has(id));
         for (const id of ids) {
-            if (mode === 'toggle' && all)
+            if (mode === 'remove' || (mode === 'toggle' && all))
                 next.delete(id);
             else
                 next.add(id);
@@ -277,6 +284,7 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
         try {
             await act(pickedMonths(remove ? removable : selectable));
             setPicked(new Set());
+            setStart(null);
         }
         finally {
             setQueueing(false);
@@ -303,6 +311,15 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
         .get(row)
         ?.get(key)
         ?.months.some((m) => selectable(row, m) || (onRemove !== undefined && removable(row, m)));
+    /** What picking a block does: queue its months, or take them out of the queue. */
+    const kindOf = (row, key) => folded?.cells
+        .get(row)
+        ?.get(key)
+        ?.months.some((m) => selectable(row, m))
+        ? 'add'
+        : 'remove';
+    /** A row's blocks in time order; the months layout runs across years. */
+    const orderOf = (row) => layout === 'months' ? [...(folded?.cells.get(row)?.keys() ?? [])].sort() : cols;
     // 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;
@@ -318,33 +335,88 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
         }
         if (select !== 'backfill')
             return;
-        // The months layout ranges over its months in time order, across years.
-        const order = layout === 'months' ? [...(folded?.cells.get(row)?.keys() ?? [])].sort() : cols;
+        const order = orderOf(row);
         const i = order.indexOf(k);
-        if (e.shiftKey && anchor.current?.row === row) {
-            const [lo, hi] = [anchor.current.index, i].sort((x, y) => x - y);
-            const span = order.slice(lo, hi + 1);
-            toggle(row, span.filter((key) => canPick(row, key)), 'add');
+        const range = (from, mode = 'add') => {
+            const [lo, hi] = [from, i].sort((x, y) => x - y);
+            toggle(row, order.slice(lo, hi + 1).filter((key) => canPick(row, key)), mode);
+        };
+        if (e.shiftKey && last.current?.row === row) {
+            range(last.current.index);
+            setStart(null);
+        }
+        else if (start?.row === row) {
+            // The second tap ends the range. On its own first block it only ends it: a picked range
+            // start is out already, a new one goes back out.
+            if (start.key === k)
+                toggle(row, [k], 'remove');
+            else
+                range(order.indexOf(start.key), start.remove ? 'remove' : 'add');
+            setStart(null);
+        }
+        else {
+            const remove = picked.has(`${row}|${k}`);
+            toggle(row, [k], remove ? 'remove' : 'add');
+            setStart({ row, key: k, remove });
         }
-        else
-            toggle(row, [k], 'toggle');
-        anchor.current = { row, index: i };
+        setOver(null);
+        last.current = { row, index: i };
+    };
+    // While a range is open, the block under the pointer shows what the next tap would pick.
+    const onCellOver = (e) => {
+        if (!start)
+            return;
+        const el = e.target instanceof Element ? e.target.closest('[data-cell]') : null;
+        const tip = el?.dataset.cell ?? '';
+        const cut = tip.lastIndexOf('|');
+        if (el && tip.slice(0, cut) === start.row)
+            setOver(tip.slice(cut + 1));
+    };
+    const previewOf = (row) => {
+        if (!start || start.row !== row || !over)
+            return [];
+        const order = orderOf(row);
+        const [lo, hi] = [order.indexOf(start.key), order.indexOf(over)].sort((x, y) => x - y);
+        // An unpicking range previews the picked blocks it would take out; a picking one the rest.
+        return lo < 0
+            ? []
+            : order
+                .slice(lo, hi + 1)
+                .filter((k) => k === start.key ? start.remove : picked.has(`${row}|${k}`) === start.remove);
+    };
+    const picking = picked.size > 0 || !!start;
+    // Picking fades the blocks a pick can't take, so what can be picked stands out.
+    const routes = {
+        onClick: onCellClick,
+        onPointerOver: onCellOver,
+        onPointerLeave: () => setOver(null),
+        onKeyDown: (e) => {
+            if (e.key === 'Escape')
+                setStart(null);
+        },
     };
+    const fade = select === 'backfill' && picking && '[&_[data-cell]:disabled]:opacity-30';
     let body = null;
     if (data && folded) {
         if (layout === 'months') {
             const row = data.rows[0]?.row ?? data.facts[0]?.row ?? '';
             const cells = folded.cells.get(row) ?? new Map();
+            const previews = new Set(previewOf(row));
             const years = [...new Set([...cells.keys()].map((k) => k.slice(0, 4)))].sort().reverse();
             const sumCols = sums.map((s) => SUMMARY_WIDTH[s]).join(' ');
             const grid = {
                 gridTemplateColumns: `${mobile ? '2.75rem' : '4rem'} repeat(12, minmax(${mobile ? '14px' : '18px'}, 1fr)) ${sumCols}`,
             };
-            body = (_jsxs("div", { className: "grid items-center gap-[3px]", style: grid, onClick: onCellClick, children: [_jsx("span", { className: "text-xs text-muted-foreground", children: "Year" }), MON.map((m, i) => (_jsx("span", { className: "text-xs text-muted-foreground", children: mobile ? (i % 3 === 0 ? m : '') : m }, m))), sums.map((s) => (_jsx("span", { className: "pl-3 text-right text-xs text-muted-foreground", children: s === 'rows' || s === 'counts' ? rowsHead : SUMMARY_HEAD[s] }, s))), years.map((y) => {
+            body = (_jsxs("div", { className: cn('grid items-center gap-[3px]', fade), style: grid, ...routes, children: [_jsx("span", { className: "text-xs text-muted-foreground", children: "Year" }), MON.map((m, i) => (_jsx("span", { className: "text-xs text-muted-foreground", children: mobile ? (i % 3 === 0 ? m : '') : m }, m))), sums.map((s) => (_jsx("span", { className: "pl-3 text-right text-xs text-muted-foreground", children: s === 'rows' || s === 'counts' ? rowsHead : SUMMARY_HEAD[s] }, s))), years.map((y) => {
                         let have = 0;
                         let expected = 0;
+                        // A year's label picks the months in it that can be queued (again: takes them out).
+                        const yearKeys = MON.map((_, i) => `${y}-${String(i + 1).padStart(2, '0')}`).filter((k) => canPick(row, k) && kindOf(row, k) === 'add');
                         return [
-                            _jsx("span", { className: "num text-xs", children: y }, `${y}-label`),
+                            select === 'backfill' && yearKeys.length ? (_jsx("button", { type: "button", "aria-label": `Pick ${y}`, className: "num -ml-1 w-fit cursor-pointer rounded px-1 text-left text-xs hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", onClick: () => {
+                                    toggle(row, yearKeys, 'toggle');
+                                    setStart(null);
+                                }, children: y }, `${y}-label`)) : (_jsx("span", { className: "num text-xs", children: y }, `${y}-label`)),
                             ...MON.map((_, i) => {
                                 const key = `${y}-${String(i + 1).padStart(2, '0')}`;
                                 const c = cells.get(key);
@@ -353,7 +425,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, 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));
+                                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, mark: picked.has(`${row}|${key}`) ? kindOf(row, key) : undefined, start: start?.key === key, preview: previews.has(key) && canPick(row, 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)
@@ -390,7 +462,7 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
             }
             const look = { mobile, groupBy, select, sums, drilled, link: rowSpec.link };
             let group;
-            body = (_jsxs("div", { className: "grid min-w-min items-center gap-[3px]", style: grid, onClick: onCellClick, children: [_jsx("span", { className: "sticky left-0 z-1 bg-card text-xs text-muted-foreground", children: mobile ? '' : rowSpec.title }), cols.map((k) => (_jsx("span", { className: "num h-4 overflow-visible text-[11px] whitespace-nowrap text-muted-foreground", children: headLabel(k, block, cols.length) }, k))), sums.map((s) => (_jsx("span", { className: "pl-3 text-right text-xs text-muted-foreground", children: s === 'rows' || s === 'counts' ? rowsHead : SUMMARY_HEAD[s] }, s))), rowList.flatMap((r) => {
+            body = (_jsxs("div", { className: cn('grid min-w-min items-center gap-[3px]', fade), style: grid, ...routes, children: [_jsx("span", { className: "sticky left-0 z-1 bg-card text-xs text-muted-foreground", children: mobile ? '' : rowSpec.title }), cols.map((k) => (_jsx("span", { className: "num h-4 overflow-visible text-[11px] whitespace-nowrap text-muted-foreground", children: headLabel(k, block, cols.length) }, k))), sums.map((s) => (_jsx("span", { className: "pl-3 text-right text-xs text-muted-foreground", children: s === 'rows' || s === 'counts' ? rowsHead : SUMMARY_HEAD[s] }, s))), rowList.flatMap((r) => {
                         const out = [];
                         const shut = groupBy && folds.has(foldKey + (r.group ?? ''));
                         if (groupBy && r.group !== group) {
@@ -411,10 +483,13 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
                                 level: c.level,
                                 canPick: select === 'backfill' && canPick(r.row, k),
                                 fill: c.expected > 0 ? c.have / c.expected : undefined,
+                                kind: select === 'backfill' && canPick(r.row, k) ? kindOf(r.row, k) : 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: [
+                        const rowStart = start?.row === r.row ? start.key : undefined;
+                        const previews = previewOf(r.row);
+                        out.push(_jsx(MapRow, { r: r, cols: cols, marks: marks, picks: picks, start: rowStart, previews: previews, total: folded.totals.get(r.row) ?? { have: 0, expected: 0 }, look: look, sig: [
                                 r.label,
                                 r.sub,
                                 r.first,
@@ -429,8 +504,10 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
                                 cols[0],
                                 cols.at(-1),
                                 picks.join(),
+                                rowStart,
+                                previews.join(),
                                 marks
-                                    .map((m) => (m ? `${m.level}${m.canPick ? '+' : ''}${m.fill ?? ''}` : ''))
+                                    .map((m) => m ? `${m.level}${m.canPick ? '+' : ''}${m.kind ?? ''}${m.fill ?? ''}` : '')
                                     .join(),
                                 JSON.stringify(folded.totals.get(r.row) ?? null),
                             ].join('\u0001') }, r.row));
@@ -446,20 +523,31 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
     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 word = layout === 'months' ? 'month' : 'block in the row';
     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;
                     setBlock(v);
                     setPicked(new Set());
+                    setStart(null);
                 }, "aria-label": "Block size", className: "max-sm:hidden", children: zoom.map((z) => (_jsx(ToggleGroupItem, { value: z, children: BLOCK_LABEL[z] }, z))) })), pager ? (_jsx(LumenPager, { total: pager.total, page: pager.page, size: pager.size, sizes: pager.sizes, onPage: pager.onPage, onSize: pager.onSize, noun: plural(rowSpec.title) })) : (pageSize > 0 &&
                 layout === 'grid' &&
                 data && (_jsx(LumenPager, { total: rowTotal, page: page, size: pageSize, onPage: setPageIndex, onSize: (n) => {
                     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", 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 ??
+    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: [select === 'backfill' && (_jsxs("div", { "aria-live": "polite", className: cn('flex min-h-11 flex-wrap items-center gap-2 rounded-lg px-3 py-1.5 text-sm', pickedCount > 0
+                                ? 'bg-foreground/5 ring-1 ring-foreground ring-inset'
+                                : 'bg-muted'), children: [_jsx("span", { className: "min-w-0 flex-1 basis-56", children: pickedCount > 0 ? (_jsxs(_Fragment, { children: [layout === 'grid' && (_jsx("span", { className: "num font-semibold", children: `${pickedRows.map(rowName).join(', ')} · ` })), _jsx("span", { className: "font-semibold", children: `${months(pickedCount)} picked` }), _jsxs("span", { className: "text-muted-foreground", children: [pickNote && queueCount > 0 ? ` · ${pickNote(pick)}` : '', start
+                                                        ? ` · Tap another ${word} to ${start.remove ? 'unpick' : 'pick'} the range`
+                                                        : ''] })] })) : (_jsx("span", { className: "text-muted-foreground", children: pickTools
+                                            ? 'Pick on the map, or'
+                                            : `Tap a ${word}, then another to pick the range` })) }), pickedCount > 0 ? (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
+                                                setPicked(new Set());
+                                                setStart(null);
+                                            }, 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)] }))] })) : (pickTools)] })), _jsx("div", { ref: scroller, className: "overflow-x-auto overflow-y-hidden pb-1", children: _jsx(CoverageTip, { content: tipFor, className: layout === 'months' ? 'min-w-0' : 'w-max min-w-full', children: body }) }), _jsx("div", { className: "border-t pt-3", children: _jsx(CoverageLegend, { levels: levels, labels: stateLabels, hint: hint ??
                                     (select === 'backfill'
-                                        ? 'Click a block, shift-click for a range'
+                                        ? 'Tap a block, then another for a range'
                                         : select === 'drill'
                                             ? 'Click a block to see its days'
                                             : undefined) }) })] }) }) }) }));

package/dist/ui/tabs.d.ts

@@ -2,6 +2,6 @@ import { Tabs as TabsPrimitive } from 'radix-ui';
 import type * as React from 'react';
 declare function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): React.JSX.Element;
 declare function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>): React.JSX.Element;
-declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): React.JSX.Element;
+declare function TabsTrigger({ className, onMouseDown, onKeyDown, onBlur, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): React.JSX.Element;
 declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): React.JSX.Element;
 export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/ui/tabs.js

@@ -13,8 +13,22 @@ function Tabs({ className, ...props }) {
 function TabsList({ className, ...props }) {
     return (_jsx(TabsPrimitive.List, { "data-slot": "tabs-list", className: cn('inline-flex w-full items-center justify-start gap-6 overflow-x-auto overflow-y-hidden text-muted-foreground [scrollbar-width:none]', className), ...props }));
 }
-function TabsTrigger({ className, ...props }) {
-    return (_jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", className: cn("relative inline-flex shrink-0 items-center gap-1.5 px-0 pt-0 pb-2 after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:rounded-full after:bg-transparent text-sm leading-4 font-medium whitespace-nowrap text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:rounded-sm focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground data-[state=active]:after:bg-primary data-[state=active]:[&_svg]:text-primary [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props }));
+// Radix focuses a trigger from its own mousedown, which browsers count as :focus-visible, so a
+// clicked tab drew the keyboard ring over its underline. A pointer press marks the trigger until
+// the next key or blur; the ring shows only without that mark.
+const pointerOn = (e) => e.currentTarget.setAttribute('data-pointer', '');
+const pointerOff = (e) => e.currentTarget.removeAttribute('data-pointer');
+function TabsTrigger({ className, onMouseDown, onKeyDown, onBlur, ...props }) {
+    return (_jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", onMouseDown: (e) => {
+            pointerOn(e);
+            onMouseDown?.(e);
+        }, onKeyDown: (e) => {
+            pointerOff(e);
+            onKeyDown?.(e);
+        }, onBlur: (e) => {
+            pointerOff(e);
+            onBlur?.(e);
+        }, className: cn("relative inline-flex shrink-0 items-center gap-1.5 px-0 pt-0 pb-2 after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:rounded-full after:bg-transparent text-sm leading-4 font-medium whitespace-nowrap text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:rounded-sm focus-visible:not-data-[pointer]:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground data-[state=active]:after:bg-primary data-[state=active]:[&_svg]:text-primary [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props }));
 }
 function TabsContent({ className, ...props }) {
     return (_jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn('flex-1 outline-none', className), ...props }));

package/package.json

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