@columenlabs/lumen-ui 0.1.26 → 0.1.28

package/dist/coverage-map.d.ts

@@ -37,7 +37,8 @@ export interface CoverageData {
     current?: string;
 }
 export type CoverageBlock = 'day' | 'week' | 'month' | 'quarter' | 'year';
-export type CoverageSummary = 'complete' | 'first' | 'last' | 'rows';
+/** `rows`: what is in hand; `counts`: in hand / expected (`9,212 / 9,712`). */
+export type CoverageSummary = 'complete' | 'first' | 'last' | 'rows' | 'counts';
 /** A backfill pick: each row with the months its picked blocks cover. */
 export type CoveragePick = {
     row: string;

package/dist/coverage-map.js

@@ -139,13 +139,17 @@ const SUMMARY_HEAD = {
     first: 'First',
     last: 'Last',
     rows: '',
+    counts: '',
 };
 const SUMMARY_WIDTH = {
     complete: '5rem',
     first: '6.5rem',
     last: '6.5rem',
     rows: '5rem',
+    counts: '9rem',
 };
+/** In hand / expected; a row with nothing expected shows only what it has. */
+const fmtCounts = (have, expected) => expected > 0 ? `${fmtInt(have)} / ${fmtInt(expected)}` : fmtInt(have);
 /** 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))) }));
@@ -192,7 +196,9 @@ const MapRow = memo(function MapRow({ r, cols, marks, picks, total, look, }) {
                         ? (r.first ?? '—')
                         : s === 'last'
                             ? (r.last ?? '—')
-                            : fmtInt(total.have) }, s)))] }));
+                            : s === 'counts'
+                                ? fmtCounts(total.have, total.expected)
+                                : fmtInt(total.have) }, s)))] }));
 }, (a, b) => a.sig === b.sig && sameNode(a.r.badge, b.r.badge));
 export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowSpec, layout = 'grid', block: initialBlock = 'month', zoom, window = 'all', unit = 'sessions', summary = ['complete', 'last'], select, selectable = () => true, onQueue, drilled = null, onDrill, groupBy = false, hint, pageSize: initialPageSize, pager, tools, filter, filterCount, empty, lazy = false, }) {
     const { data, load: raw, ref } = useLumenSource(source, { lazy });
@@ -319,7 +325,7 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
             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) => {
+            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) => {
                         let have = 0;
                         let expected = 0;
                         return [
@@ -334,7 +340,13 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
                                 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}`))),
+                            ...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)
+                                        : s === 'counts'
+                                            ? fmtCounts(have, expected)
+                                            : '' }, `${y}-${s}`))),
                         ];
                     })] }));
         }
@@ -363,7 +375,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' ? rowsHead : SUMMARY_HEAD[s] }, s))), rowList.flatMap((r) => {
+            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) => {
                         const out = [];
                         const shut = groupBy && folds.has(foldKey + (r.group ?? ''));
                         if (groupBy && r.group !== group) {

package/dist/index.d.ts

@@ -35,7 +35,7 @@ export { type ChartBand, type ChartMarker, GrowthChart, KEY_DATE_KINDS, KeyDateC
 export { FoldGroup, NavGroup, type NavItem, type SectionItem, type SectionSubItem, SidebarSection, } from './nav.js';
 export { type OverviewPageProps, type OverviewStage, type OverviewTone, type OverviewWidget, OverviewList, OverviewPage, ToneDot, } from './overview.js';
 export { type Crumb, IconButton, type IconButtonProps, Page, PageBody, PageHeader, type PageHeaderProps, } from './page.js';
-export { DEFAULT_PREFS, type Prefs, TIME_ZONES, type Theme, type TimeZoneId, getPrefs, resolvedTheme, setPref, timeZoneLabel, usePrefs, ASSISTANT_WIDTH, } from './prefs.js';
+export { DEFAULT_PREFS, deviceTimeZone, type Prefs, TIME_ZONES, type Theme, type TimeZoneId, getPrefs, resolvedTheme, setPref, timeZoneLabel, usePrefs, ASSISTANT_WIDTH, } from './prefs.js';
 export { KIT, type KitConfig, configureLumen } from './kit-config.js';
 export { ConnectionBlock, ErrorLine, IntegrationRow, KeyTestLine, type KeyTestResult, TestBadge, errorText, useClock, } from './integrations.js';
 export { LumenPager } from './pager.js';

package/dist/index.js

@@ -42,7 +42,7 @@ export { GrowthChart, KEY_DATE_KINDS, KeyDateChips, PALETTE, benchColour, keyDat
 export { FoldGroup, NavGroup, SidebarSection, } from './nav.js';
 export { OverviewList, OverviewPage, ToneDot, } from './overview.js';
 export { IconButton, Page, PageBody, PageHeader, } from './page.js';
-export { DEFAULT_PREFS, TIME_ZONES, getPrefs, resolvedTheme, setPref, timeZoneLabel, usePrefs, ASSISTANT_WIDTH, } from './prefs.js';
+export { DEFAULT_PREFS, deviceTimeZone, TIME_ZONES, getPrefs, resolvedTheme, setPref, timeZoneLabel, usePrefs, ASSISTANT_WIDTH, } from './prefs.js';
 export { KIT, configureLumen } from './kit-config.js';
 export { ConnectionBlock, ErrorLine, IntegrationRow, KeyTestLine, TestBadge, errorText, useClock, } from './integrations.js';
 export { LumenPager } from './pager.js';

package/dist/kit-config.d.ts

@@ -1,3 +1,4 @@
+import type { Prefs } from './prefs.js';
 export interface KitConfig {
     /** The cookie that keeps each person's display preferences. */
     prefsCookie: string;
@@ -5,6 +6,8 @@ export interface KitConfig {
     cookieDomain?: (host: string) => string | undefined;
     /** What a market widget says where the app has no live feed. */
     marketOff: string;
+    /** The app's own defaults for preferences a person has not set (theme, time zone, ...). */
+    defaultPrefs?: Partial<Prefs>;
 }
 export declare const KIT: KitConfig;
 /** Runs `fn` after each `configureLumen` (preferences read again from the app's cookie). */

package/dist/prefs.d.ts

@@ -62,6 +62,8 @@ export declare const ASSISTANT_WIDTH: {
 };
 /** Eastern by default, as an app's zone picker had it (the market's own zone). */
 export declare const DEFAULT_PREFS: Prefs;
+/** The device's own zone when the picker lists it (`America/Los_Angeles`), else undefined. */
+export declare function deviceTimeZone(): TimeZoneId | undefined;
 /** The theme on screen: `system` follows the device. */
 export declare const resolvedTheme: (p?: Prefs) => 'light' | 'dark';
 export declare function setPref<K extends keyof Prefs>(key: K, value: Prefs[K]): void;

package/dist/prefs.js

@@ -38,6 +38,13 @@ export const DEFAULT_PREFS = {
     hideAmounts: false,
     observability: false,
 };
+/** The kit's defaults with the app's own (`configureLumen` `defaultPrefs`) over them. */
+const defaults = () => ({ ...DEFAULT_PREFS, ...KIT.defaultPrefs });
+/** The device's own zone when the picker lists it (`America/Los_Angeles`), else undefined. */
+export function deviceTimeZone() {
+    const zone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    return TIME_ZONES.find((z) => z.id === zone)?.id;
+}
 const YEAR = 60 * 60 * 24 * 365;
 const listeners = new Set();
 /** The app's shared cookie domain (`configureLumen`); host-only when it names none. */
@@ -46,26 +53,27 @@ function cookieDomain() {
     return domain ? `; domain=${domain}` : '';
 }
 function read() {
+    const d = defaults();
     try {
         const raw = document.cookie
             .split('; ')
             .find((c) => c.startsWith(`${KIT.prefsCookie}=`))
             ?.slice(KIT.prefsCookie.length + 1);
         if (!raw)
-            return DEFAULT_PREFS;
+            return d;
         const v = JSON.parse(decodeURIComponent(raw));
         return {
-            theme: THEMES.includes(v.theme) ? v.theme : DEFAULT_PREFS.theme,
-            glass: v.glass === true,
-            font: FONTS.find((f) => f.id === v.font)?.id ?? DEFAULT_PREFS.font,
-            fontSize: FONT_SIZES.find((f) => f.id === v.fontSize)?.id ?? DEFAULT_PREFS.fontSize,
-            timeZone: TIME_ZONES.find((z) => z.id === v.timeZone)?.id ?? DEFAULT_PREFS.timeZone,
-            hideAmounts: v.hideAmounts === true,
-            observability: v.observability === true,
+            theme: THEMES.includes(v.theme) ? v.theme : d.theme,
+            glass: typeof v.glass === 'boolean' ? v.glass : d.glass,
+            font: FONTS.find((f) => f.id === v.font)?.id ?? d.font,
+            fontSize: FONT_SIZES.find((f) => f.id === v.fontSize)?.id ?? d.fontSize,
+            timeZone: TIME_ZONES.find((z) => z.id === v.timeZone)?.id ?? d.timeZone,
+            hideAmounts: typeof v.hideAmounts === 'boolean' ? v.hideAmounts : d.hideAmounts,
+            observability: typeof v.observability === 'boolean' ? v.observability : d.observability,
         };
     }
     catch {
-        return DEFAULT_PREFS;
+        return d;
     }
 }
 let state = typeof document === 'undefined' ? DEFAULT_PREFS : read();

package/dist/schedules.js

@@ -11,7 +11,7 @@ import { LumenConfirm } from './confirm.js';
 import { useIsMobile } from './hooks/use-mobile.js';
 import { LumenSelector } from './lumen-selector.js';
 import { IconButton } from './page.js';
-import { usePrefs } from './prefs.js';
+import { timeZoneLabel, usePrefs } from './prefs.js';
 import { useShell } from './shell.js';
 import { Badge } from './ui/badge.js';
 import { Button } from './ui/button.js';
@@ -183,10 +183,10 @@ export function SchedulesSection({ schedules, error, onSave, onRun, onRuns, rece
         return _jsx("p", { className: "text-sm text-loss", children: error });
     if (!schedules)
         return _jsx(Skeleton, { className: "h-48 w-full" });
-    return (_jsxs(_Fragment, { children: [isMobile ? (_jsx("div", { className: "grid grid-cols-1 divide-y rounded-lg border", children: schedules.map((s) => (_jsxs("button", { type: "button", className: "grid grid-cols-[1fr_auto] items-center gap-x-3 gap-y-1 p-3 text-left hover:bg-muted/50", onClick: () => setOpen(s.id), children: [_jsx("span", { className: "font-medium", children: s.name }), _jsx(OnSwitch, { s: s, onSave: onSave }), _jsxs("span", { className: "col-span-2 text-xs text-muted-foreground", children: [s.kind === 'daily' ? '' : `Every ${everyText(s.every)} · `, when(s)] }), _jsx("span", { className: "col-span-2 text-xs", children: s.waiting ? _jsx("span", { className: "text-warning", children: s.waiting }) : _jsx(Last, { s: s }) })] }, s.id))) })) : (_jsx("div", { className: "overflow-x-auto overflow-y-hidden rounded-lg border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "w-12", children: "On" }), _jsx(TableHead, { children: "Schedule" }), _jsx(TableHead, { children: "When" }), _jsx(TableHead, { children: "Last run" }), onRuns ? _jsx(TableHead, { className: "w-0" }) : null] }) }), _jsx(TableBody, { children: schedules.map((s) => (_jsxs(TableRow, { className: "cursor-pointer", onClick: () => setOpen(s.id), children: [_jsx(TableCell, { children: _jsx(OnSwitch, { s: s, onSave: onSave }) }), _jsx(TableCell, { className: "font-medium", children: s.name }), _jsxs(TableCell, { className: "max-w-36 truncate text-muted-foreground", children: [s.kind === 'daily' ? '' : `Every ${everyText(s.every)} · `, when(s)] }), _jsx(TableCell, { className: "max-w-48", children: s.waiting ? (_jsx(Badge, { variant: "outline", className: "text-warning", title: s.waiting, children: "Not connected" })) : (_jsx(Last, { s: s, compact: true })) }), onRuns ? (_jsx(TableCell, { children: _jsx(IconButton, { icon: ListIcon, label: `${s.name} runs`, onClick: (e) => {
+    return (_jsxs(_Fragment, { children: [isMobile ? (_jsx("div", { className: "grid grid-cols-1 divide-y rounded-lg border", children: schedules.map((s) => (_jsxs("button", { type: "button", className: "grid grid-cols-[1fr_auto] items-center gap-x-3 gap-y-1 p-3 text-left hover:bg-muted/50", onClick: () => setOpen(s.id), children: [_jsx("span", { className: "font-medium", children: s.name }), _jsx(OnSwitch, { s: s, onSave: onSave }), _jsxs("span", { className: "col-span-2 text-xs text-muted-foreground", children: [s.kind === 'daily' ? '' : `Every ${everyText(s.every)} · `, when(s)] }), _jsx("span", { className: "col-span-2 text-xs", children: s.waiting ? _jsx("span", { className: "text-warning", children: s.waiting }) : _jsx(Last, { s: s }) })] }, s.id))) })) : (_jsx("div", { className: "overflow-x-auto overflow-y-hidden rounded-lg border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "w-12", children: "On" }), _jsx(TableHead, { children: "Schedule" }), _jsx(TableHead, { children: "When" }), _jsx(TableHead, { children: "Last run" }), onRuns ? _jsx(TableHead, { className: "w-0" }) : null] }) }), _jsx(TableBody, { children: schedules.map((s) => (_jsxs(TableRow, { className: "cursor-pointer", onClick: () => setOpen(s.id), children: [_jsx(TableCell, { children: _jsx(OnSwitch, { s: s, onSave: onSave }) }), _jsx(TableCell, { className: "font-medium", children: s.name }), _jsxs(TableCell, { className: "min-w-48 whitespace-normal text-muted-foreground", children: [s.kind === 'daily' ? '' : `Every ${everyText(s.every)} · `, when(s)] }), _jsx(TableCell, { className: "max-w-48", children: s.waiting ? (_jsx(Badge, { variant: "outline", className: "text-warning", title: s.waiting, children: "Not connected" })) : (_jsx(Last, { s: s, compact: true })) }), onRuns ? (_jsx(TableCell, { children: _jsx(IconButton, { icon: ListIcon, label: `${s.name} runs`, onClick: (e) => {
                                                 e.stopPropagation();
                                                 toRuns?.(s.id);
-                                            } }) })) : null] }, s.id))) })] }) })), _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsxs("p", { className: "text-xs text-muted-foreground", children: ["Times shown in ", timeZone.replace('_', ' '), ". Each run is a line in Logs."] }), briefs ? (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setAdding(true), children: [_jsx(PlusIcon, {}), "Brief"] })) : null] }), briefs ? (_jsx(Sheet, { open: adding, onOpenChange: setAdding, children: _jsx(SheetContent, { side: isMobile ? 'bottom' : 'right', className: "gap-4", children: _jsx(NewBrief, { create: async (b, time) => {
+                                            } }) })) : null] }, s.id))) })] }) })), _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsxs("p", { className: "text-xs text-muted-foreground", children: ["Last runs shown in ", timeZoneLabel(timeZone), ".", onRuns ? ' Each run is a line in Logs.' : ''] }), briefs ? (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setAdding(true), children: [_jsx(PlusIcon, {}), "Brief"] })) : null] }), briefs ? (_jsx(Sheet, { open: adding, onOpenChange: setAdding, children: _jsx(SheetContent, { side: isMobile ? 'bottom' : 'right', className: "gap-4", children: _jsx(NewBrief, { create: async (b, time) => {
                             const id = await briefs.create(b);
                             await onSave(id, time);
                             return id;

package/package.json

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