@columenlabs/lumen-ui 0.0.0-stage → 0.2.0

package/dist/color-dot.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from './lib/utils.js';
+export function ColorDot({ color, className }) {
+    return (_jsx("span", { "aria-hidden": true, className: cn('flex size-4 shrink-0 items-center justify-center', className), children: _jsx("span", { className: "size-2.5 rounded-full", style: { background: color } }) }));
+}
+const icons = new Map();
+/** The dot as an icon component, for an `LumenOption.icon`; one per colour, so it keeps its identity. */
+export function colorIcon(color) {
+    let icon = icons.get(color);
+    if (!icon) {
+        icon = ({ className }) => _jsx(ColorDot, { color: color, className: className });
+        icons.set(color, icon);
+    }
+    return icon;
+}
+/** A value as a chip in its colour (a label): a tint behind, the colour as text. */
+export function ColorChip({ color, children }) {
+    return (_jsx("span", { className: "inline-flex h-5 items-center rounded-sm bg-secondary px-1.5 text-xs font-medium whitespace-nowrap text-secondary-foreground", style: color ? { background: `color-mix(in oklab, ${color} 18%, transparent)`, color } : undefined, children: children }));
+}

package/dist/confirm.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+export interface LumenConfirmProps {
+    /** The question, e.g. `Delete view Options?`. */
+    title: ReactNode;
+    description?: ReactNode;
+    /** The confirm button's label. */
+    action?: ReactNode;
+    /** The button that backs out (Keep, Keep running). */
+    cancel?: string;
+    onConfirm: () => void;
+    /** The button that opens the dialog; leave it out and control `open` instead. */
+    children?: ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** False for a confirm that destroys nothing (a new version): its action is not red. */
+    destructive?: boolean;
+}
+export declare function LumenConfirm({ title, description, action, cancel, onConfirm, children, open, onOpenChange, destructive, }: LumenConfirmProps): import("react").JSX.Element;

package/dist/confirm.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from './ui/alert-dialog.js';
+export function LumenConfirm({ title, description = 'This cannot be undone.', action = 'Delete', cancel = 'Cancel', onConfirm, children, open, onOpenChange, destructive = true, }) {
+    return (_jsxs(AlertDialog, { open: open, onOpenChange: onOpenChange, children: [children && _jsx(AlertDialogTrigger, { asChild: true, children: children }), _jsxs(AlertDialogContent, { size: "sm", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: title }), _jsx(AlertDialogDescription, { children: description })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: cancel }), _jsx(AlertDialogAction, { variant: destructive ? 'destructive-confirm' : 'default', onClick: onConfirm, children: action })] })] })] }));
+}

package/dist/connections.d.ts

@@ -0,0 +1,45 @@
+import type { SourceState } from '@columenlabs/lumen-ui-types/domains';
+import { type CustomViewConfig, type ViewConnection } from '@columenlabs/lumen-ui-types/views';
+import { type ViewDomain, type ViewField, type ViewFieldGroup } from './view-model.js';
+/** One domain a card can connect to, as the app reads it. */
+export interface ConnectedDomain {
+    label: string;
+    domain: ViewDomain<unknown>;
+    rows: unknown[];
+    state: SourceState['state'];
+    detail?: string;
+}
+/** The header rule colour of every connected domain's columns. */
+export declare const LINK_COLOR = "var(--chart-9)";
+/** Why an added link reads nothing yet. */
+export declare const NOT_LINKED = "Not linked: pick a field on each side";
+/** A connection's group id in the field tree. */
+export declare const linkGroupId: (to: string) => string;
+/** The key pairs a connection uses: its own, else the ones both sides carry. */
+export declare function connectionOn<T>(domain: ViewDomain<T>, to: ViewDomain<unknown> | undefined, c: Pick<ViewConnection, 'on'> | undefined): ViewConnection['on'] | null;
+/**
+ * A card's connected fields and groups, and how each connected domain's read went. Connections
+ * the app cannot read, or whose keys this card lacks, report as failed with why.
+ */
+export declare function connectionFields<T>(domain: ViewDomain<T>, connections: ViewConnection[], read: Record<string, ConnectedDomain>, taken: Set<string>): {
+    fields: ViewField<T>[];
+    groups: ViewFieldGroup[];
+    sources: SourceState[];
+};
+/** The domains a card could connect to now: not its own, not yet connected, sharing a key. */
+export declare function connectCandidates(domainId: string, config: CustomViewConfig): string[];
+/**
+ * The one-line offer under a card's filter ("do you want to link this frame
+ * to this data domain by symbol"): the first domain it could connect to on a key both carry, with
+ * how many of its rows match. Link adds the connection; ✕ hides the offer for this card on this
+ * device. Nothing shows when no row would match.
+ */
+export declare function ConnectOffer<T>({ domain, rows, config, read, cardKey, onConnect, }: {
+    domain: ViewDomain<T>;
+    rows: T[];
+    config: CustomViewConfig;
+    read: Record<string, ConnectedDomain>;
+    /** Names the card for ✕ (a view or tab id). */
+    cardKey: string;
+    onConnect?: (c: ViewConnection) => void;
+}): import("react").JSX.Element | null;

package/dist/connections.js

@@ -0,0 +1,275 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Connections:
+// any card's rows connect to another domain's rows on key pairs (earnings next week ▸ your
+// holdings, by symbol). The connected domain's fields join the card's catalog as one more group,
+// `<to>_<field>`, each rolled up over the rows that match (a sum of amounts, the one value when
+// all agree, else the values listed), with `<to>_count` for how many match. The app reads the
+// connected rows (`JoinReaders.useDomains`); the keys are inferred from the keys both sides carry
+// (symbol first), and a card that could connect offers it in one line ("Link to Holdings by
+// Symbol? You hold 2 of these.") rather than another screen. Freshness carries through: a sum of
+// live values is Live calc.
+import { CATALOG, linkable } from '@columenlabs/lumen-ui-types/catalog';
+import { CONNECTED_COUNT, connectedKey, inferConnection, linkSpace, } from '@columenlabs/lumen-ui-types/views';
+import { HashIcon, Link2Icon, XIcon } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { freshnessOf } from './freshness.js';
+import { IconButton } from './icon-button.js';
+import { Button } from './ui/button.js';
+import { FORMULAS_GROUP, } from './view-model.js';
+/** The header rule colour of every connected domain's columns. */
+export const LINK_COLOR = 'var(--chart-9)';
+/** Why an added link reads nothing yet. */
+export const NOT_LINKED = 'Not linked: pick a field on each side';
+/** A connection's group id in the field tree. */
+export const linkGroupId = (to) => `link:${to}`;
+/** A row's values for one side of a pair: a key the rows carry, else the field's value. */
+function sideOf(domain, name) {
+    const key = domain.keys?.[name];
+    const norm = (v) => (name === 'symbol' ? v.trim().toUpperCase() : v.trim());
+    if (key)
+        return (row) => {
+            const v = key(row);
+            return (v === null || v === undefined ? [] : Array.isArray(v) ? v : [v]).map(norm);
+        };
+    const f = domain.fields.find((x) => x.key === name);
+    if (!f)
+        return null;
+    return (row) => {
+        const v = f.value(row);
+        return v === null || v === '' ? [] : [norm(String(v))];
+    };
+}
+/** The key pairs a connection uses: its own, else the ones both sides carry. */
+export function connectionOn(domain, to, c) {
+    if (c?.on?.length)
+        return c.on;
+    if (!to)
+        return null;
+    return inferConnection(Object.keys(domain.keys ?? {}), Object.keys(to.keys ?? {}));
+}
+/** The rows of `to` matching each value of the pairs, by the joined values. */
+function indexOf(to, on) {
+    const sides = on.map((p) => sideOf(to.domain, p.to));
+    const index = new Map();
+    if (sides.some((s) => !s))
+        return { index, ok: false };
+    for (const r of to.rows) {
+        const vals = sides.map((s) => (s ? s(r) : []));
+        // One pair: each value the row carries is a key (a holding folding two accounts).
+        const keys = on.length === 1 ? (vals[0] ?? []) : [vals.map((v) => v[0] ?? '').join('\u0000')];
+        for (const k of keys) {
+            if (!k)
+                continue;
+            const list = index.get(k);
+            if (list)
+                list.push(r);
+            else
+                index.set(k, [r]);
+        }
+    }
+    return { index, ok: true };
+}
+/** The matching rows of a card row. */
+function matcher(domain, on, index) {
+    const sides = on.map((p) => sideOf(domain, p.from));
+    if (sides.some((s) => !s))
+        return null;
+    return (row) => {
+        const vals = sides.map((s) => (s ? s(row) : []));
+        const keys = on.length === 1 ? (vals[0] ?? []) : [vals.map((v) => v[0] ?? '').join('\u0000')];
+        const out = [];
+        const seen = new Set();
+        for (const k of keys)
+            for (const r of index.get(k) ?? [])
+                if (!seen.has(r)) {
+                    seen.add(r);
+                    out.push(r);
+                }
+        return out;
+    };
+}
+/** A field rolled up over the matching rows: its own roll-up for numbers, else the one value or a list. */
+function rollUp(f, rows) {
+    if (!rows.length)
+        return null;
+    const vs = rows.map((r) => f.value(r));
+    const nums = vs.filter((v) => typeof v === 'number' && Number.isFinite(v));
+    if (nums.length && nums.length === vs.filter((v) => v !== null).length) {
+        // A per-unit value (a price, a %) has no sum: the one value when all agree. Anything else
+        // without its own roll-up adds up (a quantity held in two accounts).
+        const perUnit = f.format === 'percent' ||
+            f.format === 'weight' ||
+            ((f.format === 'price' || f.format === 'price_rounded') && !f.amount);
+        const agg = f.aggregate ?? (perUnit ? undefined : 'sum');
+        if (agg === 'sum')
+            return nums.reduce((a, b) => a + b, 0);
+        if (agg === 'mean')
+            return nums.reduce((a, b) => a + b, 0) / nums.length;
+        if (agg === 'min')
+            return Math.min(...nums);
+        if (agg === 'max')
+            return Math.max(...nums);
+        if (agg === 'count')
+            return nums.length;
+        return nums.every((n) => n === nums[0]) ? (nums[0] ?? null) : null;
+    }
+    const texts = [...new Set(vs.filter((v) => v !== null && v !== '').map(String))];
+    if (!texts.length)
+        return null;
+    return texts.length <= 3
+        ? texts.join(', ')
+        : `${texts.slice(0, 3).join(', ')} +${texts.length - 3}`;
+}
+/** Fields a connection can carry: a value of the row, not a page's own working out. */
+const carries = (f) => f.group !== FORMULAS_GROUP && !f.share && !f.compute;
+/**
+ * A card's connected fields and groups, and how each connected domain's read went. Connections
+ * the app cannot read, or whose keys this card lacks, report as failed with why.
+ */
+export function connectionFields(domain, connections, read, taken) {
+    const fields = [];
+    const groups = [];
+    const sources = [];
+    for (const c of connections) {
+        const to = read[c.to];
+        const id = linkGroupId(c.to);
+        const name = to?.label ?? CATALOG[c.to]?.label ?? c.to;
+        if (!to) {
+            sources.push({ id, name, state: 'off', detail: 'not on this desk' });
+            continue;
+        }
+        const on = connectionOn(domain, to.domain, c);
+        // Added but Not linked: it reads nothing and adds no columns until a
+        // field on each side is picked; its group stays in the tree for that.
+        if (!on) {
+            sources.push({ id, name, state: 'off', detail: NOT_LINKED });
+            groups.push({ id, label: name, color: LINK_COLOR, note: NOT_LINKED });
+            continue;
+        }
+        const { index, ok } = indexOf(to, on);
+        const match = ok ? matcher(domain, on, index) : null;
+        if (!match) {
+            // Still loading: its fields come with its rows.
+            const detail = to.state === 'loading' ? 'loading…' : 'a linked field is missing';
+            sources.push({ id, name, state: to.state === 'ok' ? 'failed' : to.state, detail });
+            groups.push({ id, label: name, color: LINK_COLOR, note: detail });
+            continue;
+        }
+        const by = on.map((p) => (p.from === p.to ? p.from : `${p.from} = ${p.to}`)).join(' + ');
+        sources.push({ id, name, state: to.state, detail: to.detail ?? `linked by ${by}` });
+        // Its own colour, apart from the card's own fields and the Symbol and Account joins.
+        groups.push({ id, label: name, color: LINK_COLOR, note: `linked by ${by}` });
+        // The matches of each row, worked out once per row object.
+        const cache = new WeakMap();
+        const matches = (row) => {
+            if (typeof row !== 'object' || row === null)
+                return match(row);
+            const hit = cache.get(row);
+            if (hit)
+                return hit;
+            const m = match(row);
+            cache.set(row, m);
+            return m;
+        };
+        const count = connectedKey(c.to, CONNECTED_COUNT);
+        if (!taken.has(count)) {
+            taken.add(count);
+            fields.push({
+                key: count,
+                name: `${linkSpace(c.to)}.${CONNECTED_COUNT}`,
+                label: `${name}: rows`,
+                icon: HashIcon,
+                group: id,
+                value: (row) => matches(row).length,
+                format: 'rounded',
+                formula: `how many ${name.toLowerCase()} rows match, by ${by}`,
+                aggregate: 'sum',
+                filterable: true,
+            });
+        }
+        for (const f of to.domain.fields) {
+            const key = connectedKey(c.to, f.key);
+            if (!carries(f) || taken.has(key))
+                continue;
+            taken.add(key);
+            const fresh = freshnessOf(to.domain, f);
+            fields.push({
+                key,
+                name: `${linkSpace(c.to)}.${f.key}`,
+                label: f.label,
+                icon: f.icon,
+                group: id,
+                value: (row) => rollUp(f, matches(row)),
+                format: f.format,
+                compact: f.compact,
+                amount: f.amount,
+                formula: `${f.formula ?? f.label}, over the ${name.toLowerCase()} rows that match`,
+                aggregate: f.aggregate,
+                filterable: f.filterable,
+                groupable: f.groupable,
+                ...(fresh ? { updates: fresh } : {}),
+            });
+        }
+    }
+    return { fields, groups, sources };
+}
+/** The domains a card could connect to now: not its own, not yet connected, sharing a key. */
+export function connectCandidates(domainId, config) {
+    const have = new Set((config.connections ?? []).map((c) => c.to));
+    return linkable().filter((d) => d !== domainId && !have.has(d));
+}
+const DISMISSED = 'edge.connect.dismissed';
+const readDismissed = () => {
+    try {
+        return JSON.parse(localStorage.getItem(DISMISSED) ?? '[]');
+    }
+    catch {
+        return [];
+    }
+};
+/**
+ * The one-line offer under a card's filter ("do you want to link this frame
+ * to this data domain by symbol"): the first domain it could connect to on a key both carry, with
+ * how many of its rows match. Link adds the connection; ✕ hides the offer for this card on this
+ * device. Nothing shows when no row would match.
+ */
+export function ConnectOffer({ domain, rows, config, read, cardKey, onConnect, }) {
+    const [dismissed, setDismissed] = useState(readDismissed);
+    const offer = useMemo(() => {
+        // One link offered at a time, and none once the card has one: the rest is in Edit view.
+        if (!onConnect || config.connections?.length)
+            return null;
+        for (const to of connectCandidates(domain.id, config)) {
+            const other = read[to];
+            if (!other || other.state !== 'ok' || dismissed.includes(`${cardKey}:${to}`))
+                continue;
+            const on = connectionOn(domain, other.domain, undefined);
+            if (!on)
+                continue;
+            const { index, ok } = indexOf(other, on);
+            const match = ok ? matcher(domain, on, index) : null;
+            if (!match)
+                continue;
+            const hits = rows.filter((r) => match(r).length > 0).length;
+            if (hits)
+                return { to, label: other.label, on, hits };
+        }
+        return null;
+    }, [domain, rows, config, read, dismissed, cardKey, onConnect]);
+    if (!offer || !onConnect)
+        return null;
+    const by = offer.on.map((p) => p.from).join(' + ');
+    const hold = offer.to === 'holdings'
+        ? `You hold ${offer.hits} of these.`
+        : `${offer.hits} of these ${offer.hits === 1 ? 'has' : 'have'} ${offer.label.toLowerCase()}.`;
+    return (_jsxs("div", { className: "flex min-w-0 items-center gap-2 text-xs text-muted-foreground", children: [_jsx(Link2Icon, { className: "size-3.5 shrink-0", "aria-hidden": true }), _jsxs("span", { className: "min-w-0 truncate", children: ["Link to ", _jsx("span", { className: "text-foreground", children: offer.label }), " by", ' ', _jsx("span", { className: "text-foreground", children: by[0]?.toUpperCase() + by.slice(1) }), "? ", hold] }), _jsx(Button, { size: "xs", variant: "outline", className: "shrink-0", onClick: () => onConnect({ to: offer.to, on: offer.on }), children: "Link" }), _jsx(IconButton, { icon: XIcon, size: "icon-xs", label: "Not now", onClick: () => {
+                    const next = [...dismissed, `${cardKey}:${offer.to}`];
+                    setDismissed(next);
+                    try {
+                        localStorage.setItem(DISMISSED, JSON.stringify(next.slice(-200)));
+                    }
+                    catch {
+                        // A private window keeps the choice for this visit only.
+                    }
+                } })] }));
+}

package/dist/coverage-calendar-map.d.ts

@@ -0,0 +1,27 @@
+import type { QueryKey, UseQueryOptions } from '@tanstack/react-query';
+import { type ReactNode } from 'react';
+/** One weekday: there, expected and missing, or closed (a holiday). Days left out are not expected. */
+export interface CalendarFact {
+    date: string;
+    state: 'present' | 'missing' | 'closed';
+    /** The tooltip's second line, e.g. `3,542 contracts`. */
+    note?: string;
+}
+export interface LumenCoverageCalendarMapProps<TRaw = unknown, TKey extends QueryKey = QueryKey> {
+    source: UseQueryOptions<TRaw, Error, CalendarFact[], TKey>;
+    title: string;
+    /** The years offered as chips, oldest first; default every year with a fact. */
+    years?: number[];
+    /** The year shown, when the page loads one year at a time (its source changes with it). */
+    year?: number;
+    onYear?: (year: number) => void;
+    /** What a present day holds, for its tooltip (`Chain stored`). */
+    present?: string;
+    /** A click on a present or missing day. */
+    onDay?: (date: string) => void;
+    /** The day opened below, outlined. */
+    picked?: string | null;
+    hint?: ReactNode;
+    lazy?: boolean;
+}
+export declare function LumenCoverageCalendarMap<TRaw, TKey extends QueryKey>({ source, title, years: yearList, year: shownYear, onYear, present, onDay, picked, hint, lazy, }: LumenCoverageCalendarMapProps<TRaw, TKey>): import("react").JSX.Element;

package/dist/coverage-calendar-map.js

@@ -0,0 +1,84 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CalendarDaysIcon } from 'lucide-react';
+import { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { CoverageCell, CoverageLegend, CoverageTip } from './coverage-cells.js';
+import { LumenStates, useLumenSource } from './lumen-source.js';
+import { LumenWidget } from './lumen-widget.js';
+import { Skeleton } from './ui/skeleton.js';
+import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group.js';
+const LEVEL = {
+    present: 'full',
+    missing: 'gap',
+    closed: 'none',
+};
+const WEEKDAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
+/** The year's weeks, Monday first; days outside the year are null. */
+function weeksOf(year) {
+    const day = new Date(Date.UTC(year, 0, 1));
+    day.setUTCDate(day.getUTCDate() - ((day.getUTCDay() + 6) % 7));
+    const weeks = [];
+    while (day.getUTCFullYear() <= year) {
+        const week = [];
+        for (let i = 0; i < 7; i++) {
+            if (i < 5) {
+                week.push(day.getUTCFullYear() === year ? day.toISOString().slice(0, 10) : null);
+            }
+            day.setUTCDate(day.getUTCDate() + 1);
+        }
+        weeks.push(week);
+    }
+    return weeks;
+}
+export function LumenCoverageCalendarMap({ source, title, years: yearList, year: shownYear, onYear, present = 'Stored', onDay, picked = null, hint, lazy = false, }) {
+    const { data, load, ref } = useLumenSource(source, { lazy });
+    const byDate = useMemo(() => new Map((data ?? []).map((f) => [f.date, f])), [data]);
+    const years = useMemo(() => {
+        if (yearList)
+            return yearList;
+        return [...new Set((data ?? []).map((f) => Number(f.date.slice(0, 4))))].sort();
+    }, [yearList, data]);
+    const [chosen, setChosen] = useState(null);
+    const year = shownYear ?? chosen ?? (picked ? Number(picked.slice(0, 4)) : years.at(-1)) ?? 0;
+    const weeks = useMemo(() => weeksOf(year), [year]);
+    const scroller = useRef(null);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: re-run when the year changes
+    useLayoutEffect(() => {
+        const el = scroller.current;
+        if (el)
+            el.scrollLeft = el.scrollWidth;
+    }, [year, data]);
+    const levels = new Set();
+    // One tooltip for the whole calendar, filled in for the hovered day.
+    const tipFor = (date) => {
+        const f = byDate.get(date);
+        const why = !f
+            ? 'Not expected'
+            : f.state === 'present'
+                ? present
+                : f.state === 'missing'
+                    ? 'Expected session, nothing stored'
+                    : 'Market closed';
+        return {
+            label: date,
+            detail: (_jsxs(_Fragment, { children: [_jsx("div", { children: why }), f?.note && _jsx("div", { children: f.note })] })),
+        };
+    };
+    return (_jsx("div", { ref: ref, className: "min-w-0", children: _jsx(LumenWidget, { id: title, kind: null, icon: CalendarDaysIcon, title: year ? `${title} · ${year}` : title, load: load, rows: data?.length, pad: false, children: _jsx("div", { className: "flex flex-col gap-3 px-3 pt-3 pb-3", children: _jsxs(LumenStates, { load: load, skeleton: _jsx(Skeleton, { className: "h-28 w-full" }), children: [years.length > 1 && (_jsx(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, value: String(year), onValueChange: (v) => {
+                                if (!v)
+                                    return;
+                                if (onYear)
+                                    onYear(Number(v));
+                                else
+                                    setChosen(Number(v));
+                            }, "aria-label": "Year", className: "flex-wrap", children: years.map((y) => (_jsx(ToggleGroupItem, { value: String(y), className: "num", children: y }, y))) })), _jsx("div", { ref: scroller, className: "overflow-x-auto overflow-y-hidden pb-1", children: _jsx(CoverageTip, { content: tipFor, className: "w-max", children: _jsxs("div", { className: "grid w-max grid-flow-col grid-rows-5 gap-[3px]", style: { gridTemplateColumns: `2rem repeat(${weeks.length}, 13px)` }, children: [WEEKDAYS.map((l, i) => (_jsx("span", { className: "self-center text-[11px] leading-none text-muted-foreground", children: i % 2 ? '' : l }, l))), weeks.flatMap((w, wi) => w.map((date, i) => {
+                                            if (!date) {
+                                                // biome-ignore lint/suspicious/noArrayIndexKey: padding days outside the year
+                                                return _jsx("span", { className: "size-[13px]" }, `pad-${wi}-${i}`);
+                                            }
+                                            const f = byDate.get(date);
+                                            const level = f ? LEVEL[f.state] : 'none';
+                                            levels.add(level);
+                                            const clickable = !!onDay && !!f && f.state !== 'closed';
+                                            return (_jsx(CoverageCell, { level: level, label: date, tip: date, picked: picked === date, pickable: clickable, disabled: !clickable, onClick: clickable ? () => onDay?.(date) : undefined, className: "size-[13px]" }, date));
+                                        }))] }) }) }), _jsx("div", { className: "border-t pt-3", children: _jsx(CoverageLegend, { levels: levels, hint: hint ?? (onDay ? 'Click a day to open it' : undefined) }) })] }) }) }) }));
+}

package/dist/coverage-cells.d.ts

@@ -0,0 +1,55 @@
+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';
+/** 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;
+export declare const COVERAGE_LEVELS: {
+    level: CoverageLevel;
+    label: string;
+    className: string;
+}[];
+export declare const coverageLabel: (l: CoverageLevel) => string;
+export declare const coverageClass: (l: CoverageLevel) => string;
+/** The state of a block from its sums: a job state first, then coverage. */
+export declare function coverageLevel(have: number, expected: number, { current, state }?: {
+    current?: boolean;
+    state?: CoverageJobState | null;
+}): CoverageLevel;
+/** 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 }: {
+    levels: Set<CoverageLevel>;
+    hint?: ReactNode;
+}): 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, }: {
+    level: CoverageLevel;
+    label: string;
+    /** What `CoverageTip` hands back to its `content` for this cell. */
+    tip: string;
+    picked?: boolean;
+    disabled?: boolean;
+    /** A click toggles it (shows pressed state); with no `onClick` the map handles the click. */
+    pickable?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    className?: string;
+}) => import("react").JSX.Element>;
+/**
+ * The one tooltip of a coverage map: it follows the cell under the pointer or keyboard focus inside
+ * `children` (any element with `data-cell`) and shows `content` for it. Hovering re-renders only
+ * this tooltip, never the grid.
+ */
+export declare function CoverageTip({ content, children, className, }: {
+    /** The tooltip for a cell's `tip`; null shows none. */
+    content: (tip: string) => {
+        label: string;
+        detail?: ReactNode;
+    } | null;
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/coverage-cells.js

@@ -0,0 +1,85 @@
+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 { memo, useRef, useState } from 'react';
+import { cn } from './lib/utils.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.js';
+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: 'gap', label: 'Missing', className: 'bg-gap-hatch' },
+    {
+        level: 'current',
+        label: 'This period',
+        className: 'bg-[linear-gradient(90deg,var(--cov-full)_0_45%,transparent_45%)] ring-1 ring-inset ring-cov-full',
+    },
+    { level: 'none', label: 'Not expected', className: 'ring-1 ring-inset ring-border' },
+    {
+        level: 'queued',
+        label: 'Queued',
+        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: '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'];
+/** The state of a block from its sums: a job state first, then coverage. */
+export function coverageLevel(have, expected, { current = false, state } = {}) {
+    if (state)
+        return state;
+    if (expected <= 0)
+        return have > 0 ? 'full' : 'none';
+    if (have <= 0)
+        return 'gap';
+    if (have >= expected)
+        return current ? 'current' : 'full';
+    return have / expected >= 0.95 ? 'high' : 'low';
+}
+/** 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 })] }));
+}
+/**
+ * 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), 
+        // 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'
+                ? ''
+                : 'outline-none', pickable && !disabled && 'cursor-pointer', className) }));
+});
+/**
+ * The one tooltip of a coverage map: it follows the cell under the pointer or keyboard focus inside
+ * `children` (any element with `data-cell`) and shows `content` for it. Hovering re-renders only
+ * this tooltip, never the grid.
+ */
+export function CoverageTip({ content, children, className, }) {
+    const box = useRef(null);
+    const [at, setAt] = useState(null);
+    const show = (target) => {
+        const el = target instanceof Element ? target.closest('[data-cell]') : null;
+        const root = box.current;
+        if (!el || !root || !root.contains(el))
+            return setAt(null);
+        const r = el.getBoundingClientRect();
+        const o = root.getBoundingClientRect();
+        const tip = el.dataset.cell ?? '';
+        setAt((prev) => prev?.tip === tip
+            ? prev
+            : { 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))] }));
+}