@columenlabs/lumen-ui 0.0.0-stage → 0.2.0

package/dist/coverage-map.d.ts

@@ -0,0 +1,112 @@
+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';
+/** One count at the finest grain a page has: a day (`2026-10-12`) or a month (`2026-10`). */
+export interface CoverageFact {
+    row: string;
+    period: string;
+    /** Sessions, days or rows there. */
+    have: number;
+    /** Sessions, days or rows expected; 0 when nothing is. */
+    expected: number;
+    /** A backfill's state while it touches this period. */
+    state?: CoverageJobState;
+    /** Shown in the tooltip, e.g. why a job failed. */
+    note?: string;
+}
+/** A row's own text and summary values; rows show in this order. */
+export interface CoverageRow {
+    row: string;
+    /** Shown instead of `row` (a series code). */
+    label?: string;
+    /** A muted line under the label. */
+    sub?: string;
+    /** A small tag after the label (a resolution, `Index`, how far behind). */
+    badge?: ReactNode;
+    /** Section header the row sits under (with `groupBy`). */
+    group?: string;
+    first?: string | null;
+    last?: string | null;
+}
+/** What a coverage source returns (map an API response to it with the query's `select`). */
+export interface CoverageData {
+    facts: CoverageFact[];
+    rows: CoverageRow[];
+    /** The month still running (`YYYY-MM`): its block shows as This period when complete so far. */
+    current?: string;
+}
+export type CoverageBlock = 'day' | 'week' | 'month' | 'quarter' | 'year';
+export type CoverageSummary = 'complete' | 'first' | 'last' | 'rows';
+/** A backfill pick: each row with the months its picked blocks cover. */
+export type CoveragePick = {
+    row: string;
+    months: string[];
+}[];
+/** `TRaw` is what the query fetches; its `select` maps it to facts. */
+export interface LumenCoverageMapProps<TRaw = unknown, TKey extends QueryKey = QueryKey> {
+    source: UseQueryOptions<TRaw, Error, CoverageData, TKey>;
+    /** Card title; may name the block (`Snapshot days`). */
+    title: string;
+    icon?: LucideIcon;
+    /** Row heading (`Underlying`) and where a row's label links (`/market/$symbol`, its search);
+     *  a row with no link (undefined) is plain text. */
+    rows: {
+        title: string;
+        link?: (row: string) => {
+            to: string;
+            params?: Record<string, string>;
+            search?: object;
+        } | undefined;
+    };
+    /** `grid`: rows × time. `months`: the first row's facts, one line per year, Jan to Dec. */
+    layout?: 'grid' | 'months';
+    /** Column size, the same as a backfill block. */
+    block?: CoverageBlock;
+    /** Block choices shown as chips. */
+    zoom?: CoverageBlock[];
+    /** The last N blocks of `block`; other zoom levels show all. Opens scrolled to today either way. */
+    window?: number | 'all';
+    /** What the tooltip counts. */
+    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. */
+    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 drilled block (`2026-09`) and the click that changes it. */
+    drilled?: string | null;
+    onDrill?: (row: string, period: string) => void;
+    /** Section headers by each row's `group`. */
+    groupBy?: boolean;
+    /** Under the grid at the right, e.g. how the cells are shaded. */
+    hint?: ReactNode;
+    /** Rows a page (grid layout), with the LumenView pager in the header; off when left out. */
+    pageSize?: number;
+    /** A source that returns one page of rows: the pager in the header turns its pages. */
+    pager?: {
+        total: number;
+        /** 0-based. */
+        page: number;
+        size: number;
+        sizes?: readonly number[];
+        onPage: (page: number) => void;
+        onSize: (size: number) => void;
+    };
+    /** Inputs in the header before the zoom chips. */
+    tools?: ReactNode;
+    /** Its rows' LumenTokenizedFilter in the card header, and how many chips it holds. */
+    filter?: ReactNode;
+    filterCount?: number;
+    /** Shown in place of the grid when the source has no rows. */
+    empty?: ReactNode;
+    /** Start the query when the card scrolls into view. */
+    lazy?: boolean;
+}
+/** The block a period falls in. Month facts never fold into days or weeks. */
+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;

package/dist/coverage-map.js

@@ -0,0 +1,428 @@
+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 { 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 { 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'];
+const BLOCK_LABEL = {
+    day: 'Day',
+    week: 'Week',
+    month: 'Month',
+    quarter: 'Quarter',
+    year: 'Year',
+};
+/** Monday of `day`'s week. */
+function weekOf(day) {
+    const t = Date.parse(day);
+    const wd = (new Date(t).getUTCDay() + 6) % 7;
+    return new Date(t - wd * 86_400_000).toISOString().slice(0, 10);
+}
+/** The block a period falls in. Month facts never fold into days or weeks. */
+export function blockOf(period, block) {
+    if (block === 'year')
+        return period.slice(0, 4);
+    if (block === 'quarter')
+        return `${period.slice(0, 4)}-Q${Math.floor((Number(period.slice(5, 7)) - 1) / 3) + 1}`;
+    if (block === 'month' || period.length === 7)
+        return period.slice(0, 7);
+    return block === 'week' ? weekOf(period) : period;
+}
+/** Every month from `from` to `to` (`YYYY-MM`), inclusive. */
+function monthsBetween(from, to) {
+    const out = [];
+    let y = Number(from.slice(0, 4));
+    let m = Number(from.slice(5, 7));
+    const end = Number(to.slice(0, 4)) * 12 + Number(to.slice(5, 7));
+    while (y * 12 + m <= end) {
+        out.push(`${y}-${String(m).padStart(2, '0')}`);
+        m += 1;
+        if (m > 12) {
+            m = 1;
+            y += 1;
+        }
+    }
+    return out;
+}
+/** `2026-09` → `Sep 2026`, `2026-Q3` → `2026 Q3`, days stay as they are. */
+export function blockName(key) {
+    if (/^\d{4}-\d{2}$/.test(key))
+        return `${MON[Number(key.slice(5, 7)) - 1]} ${key.slice(0, 4)}`;
+    return key.replace('-Q', ' Q');
+}
+function headLabel(key, block, count) {
+    if (block === 'year')
+        return `'${key.slice(2, 4)}`;
+    if (block === 'quarter')
+        return key.endsWith('Q1') ? key.slice(0, 4) : '';
+    if (block === 'month') {
+        const m = Number(key.slice(5, 7));
+        if (count > 60)
+            return m === 1 ? key.slice(0, 4) : '';
+        return m % 3 === 1 ? `${MON[m - 1]} ${key.slice(2, 4)}` : '';
+    }
+    return key.slice(8, 10) <= '07' && (block === 'week' || key.slice(8, 10) === '01')
+        ? `${MON[Number(key.slice(5, 7)) - 1]}`
+        : '';
+}
+const fmtInt = (n) => n.toLocaleString('en-US');
+const fmtPct = (have, expected) => expected > 0 ? `${((Math.min(have, expected) / expected) * 100).toFixed(1)}%` : '–';
+/** Facts → `row → block → sums`, and each row's totals over all its facts. */
+function fold(data, block) {
+    const cells = new Map();
+    const totals = new Map();
+    for (const f of data.facts) {
+        const key = blockOf(f.period, block);
+        const row = cells.get(f.row) ?? new Map();
+        cells.set(f.row, row);
+        const c = row.get(key) ?? {
+            have: 0,
+            expected: 0,
+            level: 'none',
+            notes: [],
+            months: [],
+            state: null,
+        };
+        c.have += f.expected > 0 ? Math.min(f.have, f.expected) : f.have;
+        c.expected += f.expected;
+        c.state = firstJobState(c.state, f.state);
+        if (f.note)
+            c.notes.push(f.note);
+        const month = f.period.slice(0, 7);
+        if (!c.months.includes(month))
+            c.months.push(month);
+        row.set(key, c);
+        const t = totals.get(f.row) ?? { have: 0, expected: 0 };
+        t.have += f.expected > 0 ? Math.min(f.have, f.expected) : f.have;
+        t.expected += f.expected;
+        totals.set(f.row, t);
+    }
+    for (const row of cells.values()) {
+        for (const c of row.values()) {
+            c.level = coverageLevel(c.have, c.expected, {
+                current: !!data.current && c.months.includes(data.current),
+                state: c.state,
+            });
+        }
+    }
+    return { cells, totals };
+}
+/** The column blocks: every block from the first fact to today (or the last fact). */
+function columns(data, block) {
+    const periods = data.facts.map((f) => f.period).sort();
+    const first = periods[0];
+    if (!first)
+        return [];
+    if (block === 'day' || block === 'week') {
+        return [...new Set(periods.map((p) => blockOf(p, block)))];
+    }
+    const last = [periods.at(-1), data.current ?? ''].sort().at(-1);
+    const out = [];
+    for (const m of monthsBetween(first.slice(0, 7), last.slice(0, 7))) {
+        const k = blockOf(m, block);
+        if (out.at(-1) !== k)
+            out.push(k);
+    }
+    return out;
+}
+const SUMMARY_HEAD = {
+    complete: 'Complete',
+    first: 'First',
+    last: 'Last',
+    rows: '',
+};
+const SUMMARY_WIDTH = {
+    complete: '5rem',
+    first: '6.5rem',
+    last: '6.5rem',
+    rows: '5rem',
+};
+/** A grid-shaped skeleton: label column plus empty cells, so nothing jumps when data lands. */
+function GridSkeleton({ rows = 8 }) {
+    return (_jsx("div", { "aria-busy": "true", "aria-label": "Loading", className: "flex flex-col gap-[5px] py-1", children: Array.from({ length: rows }, (_, i) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-4 w-16 shrink-0" }), _jsx(Skeleton, { className: "h-[18px] flex-1" })] }, i))) }));
+}
+/** `symbols`, `series`: the row title as a count noun. */
+/** The narrowest a block gets before the map scrolls sideways. */
+const CELL_MIN = 14;
+const plural = (title) => {
+    const t = title.toLowerCase();
+    return t.endsWith('s') ? t : `${t}s`;
+};
+/** Whether two row badges draw the same: same element types and props, children compared alike. */
+function sameNode(a, b) {
+    if (Object.is(a, b))
+        return true;
+    if (Array.isArray(a) && Array.isArray(b))
+        return a.length === b.length && a.every((x, i) => sameNode(x, b[i]));
+    if (!isValidElement(a) || !isValidElement(b) || a.type !== b.type || a.key !== b.key)
+        return false;
+    const pa = a.props;
+    const pb = b.props;
+    const keys = Object.keys(pa);
+    return (keys.length === Object.keys(pb).length &&
+        keys.every((k) => k === 'children' ? sameNode(pa[k], pb[k]) : Object.is(pa[k], pb[k])));
+}
+/**
+ * One row of the grid: its name, cells and summary. It draws again only when something it shows
+ * 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 text = r.label ?? r.row;
+    const link = look.link?.(r.row);
+    return (_jsxs(_Fragment, { children: [_jsxs("span", { 
+                // Rows sit indented under their group's name.
+                className: cn('sticky left-0 z-1 flex min-w-0 flex-col bg-card pr-2', look.groupBy && (look.mobile ? 'pl-1.5' : 'pl-3')), children: [_jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [link ? (_jsx(Link, { ...link, className: "num truncate font-medium hover:text-primary hover:underline", children: text })) : (_jsx("span", { className: "num truncate font-medium", children: text })), r.badge] }), r.sub && !look.mobile && (_jsx("span", { className: "truncate text-[11px] text-muted-foreground", children: r.sub }))] }), cols.map((k, i) => {
+                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));
+            }), 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'
+                        ? (r.first ?? '—')
+                        : s === 'last'
+                            ? (r.last ?? '—')
+                            : 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, }) {
+    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 };
+    const cells = { ...raw, fetching: false, refreshing: false };
+    const mobile = useIsMobile();
+    const [block, setBlock] = useState(layout === 'months' ? 'month' : initialBlock);
+    const [picked, setPicked] = useState(new Set());
+    const [queueing, setQueueing] = useState(false);
+    const anchor = useRef(null);
+    const scroller = useRef(null);
+    const [pageSize, setPageSize] = useState(initialPageSize ?? 0);
+    const [pageIndex, setPageIndex] = useState(0);
+    const folded = useMemo(() => (data ? fold(data, block) : null), [data, block]);
+    // Group headers fold their rows, remembered in the browser per page.
+    const [folds, setFold] = useFolds();
+    const foldKey = `group:${usePageKey()}:${title}:`;
+    const cols = useMemo(() => {
+        if (!data || layout === 'months')
+            return [];
+        const all = columns(data, block);
+        return typeof window === 'number' && block === initialBlock ? all.slice(-window) : all;
+    }, [data, block, layout, window, initialBlock]);
+    // Open at today: the newest blocks are on the right. Zoom never moves the page, only this strip.
+    // Only a new set of columns scrolls it; a refresh of the same columns keeps where the reader is.
+    const strip = `${layout}|${block}|${cols.length}|${cols[0] ?? ''}|${cols.at(-1) ?? ''}|${folded ? 1 : 0}`;
+    // biome-ignore lint/correctness/useExhaustiveDependencies: re-run when the columns change
+    useLayoutEffect(() => {
+        const el = scroller.current;
+        if (el)
+            el.scrollLeft = el.scrollWidth;
+    }, [strip]);
+    const sums = mobile ? summary.filter((s) => s === 'complete') : summary;
+    const rowsHead = `${unit[0]?.toUpperCase() ?? ''}${unit.slice(1)}`;
+    const levels = new Set();
+    const unitLabel = (have, expected) => expected > 0 ? `${fmtInt(have)} of ${fmtInt(expected)} ${unit}` : 'Not expected';
+    const toggle = (row, keys, mode) => setPicked((prev) => {
+        const next = new Set(prev);
+        const ids = keys.map((k) => `${row}|${k}`);
+        const all = ids.every((id) => next.has(id));
+        for (const id of ids) {
+            if (mode === 'toggle' && all)
+                next.delete(id);
+            else
+                next.add(id);
+        }
+        return next;
+    });
+    const pickedMonths = () => {
+        const byRow = new Map();
+        for (const id of picked) {
+            const [row, key] = id.split('|');
+            const c = folded?.cells.get(row)?.get(key);
+            const set = byRow.get(row) ?? new Set();
+            for (const m of c?.months ?? [])
+                if (selectable(row, m))
+                    set.add(m);
+            byRow.set(row, set);
+        }
+        return [...byRow]
+            .filter(([, ms]) => ms.size)
+            .map(([row, ms]) => ({ row, months: [...ms].sort() }));
+    };
+    const queue = async () => {
+        if (!onQueue)
+            return;
+        setQueueing(true);
+        try {
+            await onQueue(pickedMonths());
+            setPicked(new Set());
+        }
+        finally {
+            setQueueing(false);
+        }
+    };
+    const rowTotal = layout === 'grid' && data ? data.rows.length || (folded?.cells.size ?? 0) : 0;
+    const page = pageSize ? Math.min(pageIndex, Math.max(0, Math.ceil(rowTotal / pageSize) - 1)) : 0;
+    // One tooltip for the whole map, filled in for the hovered cell (`row|block`).
+    const tipFor = (tip) => {
+        const cut = tip.lastIndexOf('|');
+        const row = tip.slice(0, cut);
+        const k = tip.slice(cut + 1);
+        const c = folded?.cells.get(row)?.get(k);
+        if (!c)
+            return null;
+        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" })] })),
+        };
+    };
+    // 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;
+        if (!el || el.disabled)
+            return;
+        const tip = el.dataset.cell ?? '';
+        const cut = tip.lastIndexOf('|');
+        const row = tip.slice(0, cut);
+        const k = tip.slice(cut + 1);
+        if (select === 'drill') {
+            onDrill?.(row, k);
+            return;
+        }
+        if (select !== 'backfill')
+            return;
+        const i = cols.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');
+        }
+        else
+            toggle(row, [k], 'toggle');
+        anchor.current = { row, index: i };
+    };
+    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 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' ? rowsHead : SUMMARY_HEAD[s] }, s))), years.map((y) => {
+                        let have = 0;
+                        let expected = 0;
+                        return [
+                            _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);
+                                if (!c)
+                                    return _jsx("span", {}, key);
+                                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));
+                            }),
+                            ...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) : s === 'rows' ? fmtInt(have) : '' }, `${y}-${s}`))),
+                        ];
+                    })] }));
+        }
+        else {
+            // Rows with badges (index tags, a lag) get room for them beside the name.
+            const label = mobile ? '4rem' : data.rows.some((r) => r.badge) ? '10rem' : '7rem';
+            // Blocks never shrink below a tappable size: past that the map scrolls
+            // sideways with the names column pinned, opening at today.
+            const cell = `minmax(${CELL_MIN}px, 1fr)`;
+            const grid = {
+                gridTemplateColumns: `${label} repeat(${cols.length}, ${cell}) ${sums.map((s) => SUMMARY_WIDTH[s]).join(' ')}`,
+            };
+            const allRows = data.rows.length
+                ? data.rows
+                : [...folded.cells.keys()].map((row) => ({ row }));
+            const rowList = pageSize ? allRows.slice(page * pageSize, (page + 1) * pageSize) : allRows;
+            const groupSize = new Map();
+            if (groupBy)
+                for (const r of rowList)
+                    groupSize.set(r.group, (groupSize.get(r.group) ?? 0) + 1);
+            const pickedBy = new Map();
+            for (const id of picked) {
+                const cut = id.lastIndexOf('|');
+                const row = id.slice(0, cut);
+                pickedBy.set(row, [...(pickedBy.get(row) ?? []), id.slice(cut + 1)]);
+            }
+            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' ? rowsHead : SUMMARY_HEAD[s] }, s))), rowList.flatMap((r) => {
+                        const out = [];
+                        const shut = groupBy && folds.has(foldKey + (r.group ?? ''));
+                        if (groupBy && r.group !== group) {
+                            group = r.group;
+                            const name = r.group ?? '';
+                            const toggle = () => setFold(foldKey + name, !shut);
+                            out.push(_jsx("span", { className: "col-span-full mt-2 text-[11px] font-semibold tracking-[0.06em] text-muted-foreground uppercase", children: _jsxs("span", { className: "sticky left-0 -ml-1.5 inline-flex items-center gap-1.5 py-0.5 pr-1 pl-1.5", children: [name, _jsx(Badge, { variant: "secondary", className: "num h-4 px-1.5 text-[10px]", children: groupSize.get(r.group) ?? 0 }), _jsx(FoldChevron, { folded: shut, label: name, onToggle: toggle, className: "size-4" })] }) }, `group-${r.group}`));
+                        }
+                        if (shut)
+                            return out;
+                        const rowCells = folded.cells.get(r.row);
+                        const marks = cols.map((k) => {
+                            const c = rowCells?.get(k);
+                            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 };
+                        });
+                        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: [
+                                r.label,
+                                r.sub,
+                                r.first,
+                                r.last,
+                                JSON.stringify(rowSpec.link?.(r.row) ?? null),
+                                mobile,
+                                groupBy,
+                                select,
+                                sums.join(),
+                                drilled,
+                                cols.length,
+                                cols[0],
+                                cols.at(-1),
+                                picks.join(),
+                                marks.map((m) => (m ? `${m.level}${m.canPick ? '+' : ''}` : '')).join(),
+                                JSON.stringify(folded.totals.get(r.row) ?? null),
+                            ].join('\u0001') }, r.row));
+                        return out;
+                    })] }));
+        }
+    }
+    const pick = picked.size ? pickedMonths() : [];
+    const pickedCount = pick.reduce((n, p) => n + p.months.length, 0);
+    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());
+                }, "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 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 ??
+                                    (select === 'backfill'
+                                        ? 'Click a cell, shift-click for a range, to queue a backfill'
+                                        : select === 'drill'
+                                            ? 'Click a block to see its days'
+                                            : undefined) }) })] }) }) }) }));
+}

package/dist/details-table.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+export interface DetailsTableProps {
+    /** `grow` marks the column that takes the spare width; the last column does by default. */
+    head: {
+        label: string;
+        right?: boolean;
+        grow?: boolean;
+    }[];
+    rows: {
+        key: string;
+        cells: ReactNode[];
+    }[];
+    /** An optional total row, one cell per column. */
+    foot?: ReactNode[];
+}
+export declare function DetailsTable({ head, rows, foot }: DetailsTableProps): import("react").JSX.Element;
+/** Facts as a two-row table: the labels as the header, the values under them. */
+export declare function FactsTable({ items }: {
+    items: [string, ReactNode][];
+}): import("react").JSX.Element;

package/dist/details-table.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from './lib/utils.js';
+import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from './ui/table.js';
+export function DetailsTable({ head, rows, foot }) {
+    const marked = head.findIndex((h) => h.grow);
+    const grow = marked >= 0 ? marked : head.length - 1;
+    const cell = (i) => cn('num', head[i]?.right && 'text-right', i !== grow && 'w-px');
+    return (_jsx("div", { className: "-mx-1 overflow-x-auto overflow-y-hidden rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: head.map((h, i) => (_jsx(TableHead, { className: cn(h.right && 'text-right', i !== grow && 'w-px'), children: h.label }, h.label))) }) }), _jsx(TableBody, { children: rows.map((r) => (_jsx(TableRow, { children: r.cells.map((c, i) => (_jsx(TableCell, { className: cell(i), children: c }, i))) }, r.key))) }), foot && (_jsx(TableFooter, { children: _jsx(TableRow, { children: foot.map((c, i) => (_jsx(TableCell, { className: cell(i), children: c }, i))) }) }))] }) }));
+}
+/** Facts as a two-row table: the labels as the header, the values under them. */
+export function FactsTable({ items }) {
+    return (_jsx(DetailsTable, { head: items.map(([k], i) => ({ label: k, right: i > 0 })), rows: [{ key: 'values', cells: items.map(([, v]) => v) }] }));
+}

package/dist/drawer-section.d.ts

@@ -0,0 +1,27 @@
+import { type LucideIcon } from 'lucide-react';
+import { type ReactNode } from 'react';
+export interface DrawerSectionProps {
+    /** An icon before the title; a form's numbered steps leave it out. */
+    icon?: LucideIcon;
+    title: string;
+    /** A count chip after the title (rows in the section). */
+    count?: number | null;
+    /** A short note on the right of the header ("None"). */
+    hint?: string | null;
+    /** A short plain line under the header, shown only while closed: what the section is set to. */
+    summary?: ReactNode;
+    /** Buttons at the right of the header (a `ResetButton`), outside the fold's trigger. */
+    actions?: ReactNode;
+    /** Sections start collapsed unless set open. */
+    defaultOpen?: boolean;
+    /** Controlled open state, when the caller opens a section itself. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: ReactNode;
+}
+/**
+ * One section of a pullout drawer, on every app (p2e style): a header of
+ * chevron, icon, title, optional count and note, with no background until hovered; a hairline
+ * between sections. Drawers stack these under their title instead of their own headings.
+ */
+export declare function DrawerSection({ icon: Icon, title, count, hint, summary, actions, defaultOpen, open, onOpenChange, children, }: DrawerSectionProps): import("react").JSX.Element;

package/dist/drawer-section.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon } from 'lucide-react';
+import { useState } from 'react';
+import { Badge } from './ui/badge.js';
+import { Button } from './ui/button.js';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible.js';
+/**
+ * One section of a pullout drawer, on every app (p2e style): a header of
+ * chevron, icon, title, optional count and note, with no background until hovered; a hairline
+ * between sections. Drawers stack these under their title instead of their own headings.
+ */
+export function DrawerSection({ icon: Icon, title, count, hint, summary, actions, defaultOpen = false, open, onOpenChange, children, }) {
+    // Kept here too when the caller leaves it uncontrolled, so the summary knows when to show.
+    const [own, setOwn] = useState(defaultOpen);
+    const isOpen = open ?? own;
+    const trigger = (_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "sm", 
+            // No background, grey only on hover, open or not.
+            className: "w-full justify-start px-1 aria-expanded:bg-transparent aria-expanded:hover:bg-muted", children: [_jsx(ChevronRightIcon, { className: "text-muted-foreground transition-transform group-data-[state=open]/section:rotate-90" }), Icon && _jsx(Icon, { className: "text-muted-foreground" }), _jsx("span", { className: "truncate", children: title }), count != null && (_jsx(Badge, { variant: "secondary", className: "num", children: count })), hint && _jsx("span", { className: "ml-auto font-normal text-muted-foreground text-xs", children: hint })] }) }));
+    return (_jsxs(Collapsible, { open: isOpen, onOpenChange: (o) => {
+            setOwn(o);
+            onOpenChange?.(o);
+        }, className: "group/section border-t py-1 first:border-t-0", children: [actions ? (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "min-w-0 flex-1", children: trigger }), actions] })) : (trigger), summary && !isOpen && (_jsx("p", { className: "line-clamp-3 pr-1 pb-1 pl-5.5 text-muted-foreground text-xs", children: summary })), _jsx(CollapsibleContent, { className: "pt-1 pr-1 pb-2 pl-5.5", children: children })] }));
+}

package/dist/floating-head.d.ts

@@ -0,0 +1,2 @@
+import { type RefObject } from 'react';
+export declare function useFloatingHead(box: RefObject<HTMLElement | null>, on: boolean): void;