@columenlabs/lumen-ui 0.1.107 → 0.1.109

package/dist/coverage-map.js

@@ -9,6 +9,7 @@ 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 { useScrollFade } from './scroll-fade.js';
 import { Badge } from './ui/badge.js';
 import { Button } from './ui/button.js';
 import { Skeleton } from './ui/skeleton.js';
@@ -185,7 +186,9 @@ const MapRow = memo(function MapRow({ r, cols, marks, picks, start, previews, to
     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) => {
+                className: cn(look.mobile
+                    ? 'col-span-full -mb-0.5 flex min-w-0'
+                    : '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: cn('flex min-w-0 items-center gap-1.5', look.mobile && 'sticky left-0 max-w-[calc(var(--view-w,100vw)-4rem)] text-xs', look.mobile && look.inset && 'left-8'), 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);
@@ -223,6 +226,7 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
         setStart(null);
     }, [preselect]);
     const scroller = useRef(null);
+    const edge = useScrollFade(scroller);
     const [pageSize, setPageSize] = useState(initialPageSize ?? 0);
     const [pageIndex, setPageIndex] = useState(0);
     const folded = useMemo(() => (data ? fold(data, block) : null), [data, block]);
@@ -242,7 +246,8 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
     useLayoutEffect(() => {
         const el = scroller.current;
         if (el && layout === 'grid')
-            el.scrollLeft = el.scrollWidth;
+            snapToEnd(el);
+        edge.update();
     }, [strip]);
     const sums = mobile ? summary.filter((s) => s === 'complete') : summary;
     const rowsHead = `${unit[0]?.toUpperCase() ?? ''}${unit.slice(1)}`;
@@ -444,7 +449,8 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
             // 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(' ')}`,
+                // A phone puts each name on its own line above its blocks, so blocks never run under it.
+                gridTemplateColumns: `${mobile ? '' : `${label} `}repeat(${cols.length}, ${cell}) ${sums.map((s) => SUMMARY_WIDTH[s]).join(' ')}`,
             };
             const allRows = data.rows.length
                 ? data.rows
@@ -460,9 +466,17 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
                 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 };
+            const look = {
+                mobile,
+                inset: edge.side === 'start' || edge.side === 'both',
+                groupBy,
+                select,
+                sums,
+                drilled,
+                link: rowSpec.link,
+            };
             let group;
-            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) => {
+            body = (_jsxs("div", { className: cn('grid min-w-min items-center gap-[3px]', fade), style: grid, ...routes, children: [!mobile && (_jsx("span", { className: "sticky left-0 z-1 bg-card text-xs text-muted-foreground", children: rowSpec.title })), cols.map((k) => (_jsx("span", { "data-col": "", 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) {
@@ -496,6 +510,7 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
                                 r.last,
                                 JSON.stringify(rowSpec.link?.(r.row) ?? null),
                                 mobile,
+                                look.inset,
                                 groupBy,
                                 select,
                                 sums.join(),
@@ -545,10 +560,30 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
                                             : `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 ??
+                                            }, 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, onScroll: edge.update, "data-fade": edge.side, 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'
                                         ? 'Tap a block, then another for a range'
                                         : select === 'drill'
                                             ? 'Click a block to see its days'
                                             : undefined) }) })] }) }) }) }));
 }
+/** Scrolls a sideways strip to its end (today) so its left edge falls on a whole block, not mid
+ *  block with its label cut: the strip's content takes just enough room at its end to land there. */
+function snapToEnd(el) {
+    const content = el.firstElementChild;
+    if (!content)
+        return;
+    content.style.paddingRight = '';
+    el.scrollLeft = el.scrollWidth;
+    const box = el.getBoundingClientRect().left;
+    const lefts = [...el.querySelectorAll('[data-col]')].map((c) => c.getBoundingClientRect().left - box);
+    // The first block cut by the left edge; the strip moves on to the block after it.
+    const cut = lefts.find((x, i) => x < -0.5 && (lefts[i + 1] ?? 1) > 0.5);
+    if (cut === undefined)
+        return;
+    const next = lefts[lefts.indexOf(cut) + 1];
+    if (next === undefined || next <= 0.5)
+        return;
+    content.style.paddingRight = `${Math.ceil(next)}px`;
+    el.scrollLeft = el.scrollWidth;
+}

package/dist/index.d.ts

@@ -28,6 +28,7 @@ export { RankedBars, StackedBars, StackedColumns, TimeLines } from './lumen-widg
 export { type ShareSegment, ShareMeter } from './share-meter.js';
 export { type Pool, poolShare } from './pool-share.js';
 export { METER_LEVEL_COLOR, meterLevel, meterValueTone } from './meter-level.js';
+export { contrast, readableInk } from './ink.js';
 export { UnitValue } from './unit-value.js';
 export { type BurnRate, burnRate, durationText, PACE_WINDOWS, type Pace, type PaceWindow, paceHours, setDefaultPaceWindow, timeToCap, usePaceWindow, } from './pace.js';
 export { PaceWindowPicker, paceText, TimeToCap } from './time-to-cap.js';

package/dist/index.js

@@ -35,6 +35,7 @@ export { RankedBars, StackedBars, StackedColumns, TimeLines } from './lumen-widg
 export { ShareMeter } from './share-meter.js';
 export { poolShare } from './pool-share.js';
 export { METER_LEVEL_COLOR, meterLevel, meterValueTone } from './meter-level.js';
+export { contrast, readableInk } from './ink.js';
 export { UnitValue } from './unit-value.js';
 export { burnRate, durationText, PACE_WINDOWS, paceHours, setDefaultPaceWindow, timeToCap, usePaceWindow, } from './pace.js';
 export { PaceWindowPicker, paceText, TimeToCap } from './time-to-cap.js';

package/dist/ink.d.ts

@@ -0,0 +1,7 @@
+/** WCAG contrast of two hex colours, 1 to 21; null when either is not a hex colour. */
+export declare function contrast(a: string, b: string): number | null;
+/**
+ * The text colour for a chip of background `bg`: its own `ink` when that reads at `min`:1 (WCAG AA,
+ * 4.5), otherwise near-black or white, whichever reads better. A colour that is not hex keeps `ink`.
+ */
+export declare function readableInk(bg: string, ink?: string, min?: number): string | undefined;

package/dist/ink.js

@@ -0,0 +1,39 @@
+// Text that stays readable on a colour the app does not choose (a mailbox's own label colours).
+const hex = (c) => {
+    const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(c.trim());
+    const d = m?.[1];
+    if (!d)
+        return null;
+    const h = d.length === 3 ? [...d].map((x) => x + x).join('') : d;
+    return [0, 2, 4].map((i) => Number.parseInt(h.slice(i, i + 2), 16));
+};
+const luminance = ([r, g, b]) => {
+    const lin = (v) => {
+        const s = v / 255;
+        return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+    };
+    return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+};
+/** WCAG contrast of two hex colours, 1 to 21; null when either is not a hex colour. */
+export function contrast(a, b) {
+    const x = hex(a);
+    const y = hex(b);
+    if (!x || !y)
+        return null;
+    const p = luminance(x);
+    const q = luminance(y);
+    return (Math.max(p, q) + 0.05) / (Math.min(p, q) + 0.05);
+}
+/**
+ * The text colour for a chip of background `bg`: its own `ink` when that reads at `min`:1 (WCAG AA,
+ * 4.5), otherwise near-black or white, whichever reads better. A colour that is not hex keeps `ink`.
+ */
+export function readableInk(bg, ink, min = 4.5) {
+    if (ink && (contrast(bg, ink) ?? min) >= min)
+        return ink;
+    const dark = contrast(bg, '#111111');
+    const light = contrast(bg, '#ffffff');
+    if (dark === null || light === null)
+        return ink;
+    return dark >= light ? '#111111' : '#ffffff';
+}

package/dist/lumen-layout.js

@@ -33,6 +33,7 @@ import { LumenViewCard } from './lumen-view-card.js';
 import { AddWidgetDialog, LayoutActions, LayoutChip, LumenSavedWidget, LumenWidget, cardFilterFields, cardTitle, cardsAfter, } from './lumen-widget.js';
 import { OriginLegend } from './origin-legend.js';
 import { IconButton, Page } from './page.js';
+import { useScrollFade } from './scroll-fade.js';
 import { SourcedCard } from './sourced-card.js';
 import { LumenCard, SummaryTiles } from './summary-cards.js';
 import { computedOf, filterFieldsOf, formulaBlanks, pick, subgroupOf, summaryCash, takesFormulas, withSavedFilters, withViewFields, } from './view-model.js';
@@ -109,6 +110,7 @@ function Scroller({ fit, children }) {
     // it (theme.css): this lines that paint up with the fixed wash and stops pinned headers below its
     // fade. Nothing here runs on scroll: the row is sticky, so it never moves on screen.
     const ref = useRef(null);
+    const edge = useScrollFade(ref);
     const watched = useRef(null);
     useEffect(() => {
         const el = ref.current;
@@ -163,7 +165,7 @@ function Scroller({ fit, children }) {
             seen.observe(el.firstElementChild);
         return () => seen.disconnect();
     }, []);
-    return (_jsx("div", { ref: ref, "data-slot": "view-scroll", className: VIEW_SCROLL, children: _jsx("div", { className: cn('flex flex-col gap-(--shell-section-gap)', fit ? 'w-full' : 'w-max min-w-full'), children: children }) }));
+    return (_jsx("div", { ref: ref, "data-slot": "view-scroll", "data-fade": edge.side, onScroll: edge.update, className: cn(VIEW_SCROLL, '[--fade-inset:var(--view-sb,0px)]'), children: _jsx("div", { className: cn('flex flex-col gap-(--shell-section-gap)', fit ? 'w-full' : 'w-max min-w-full'), children: children }) }));
 }
 const codeSlots = (cards, scope) => (cards ?? []).map((c) => ({
     id: c.id,

package/dist/lumen-tabs.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useScrollFade } from './scroll-fade.js';
 import { Tabs, TabsList, TabsTrigger } from './ui/tabs.js';
 export function LumenTabs({ tabs, value, onChange, actions, }) {
     const shown = tabs.filter((t) => !t.hidden);
-    return (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("div", { className: "min-w-48 max-w-full flex-1", children: shown.length ? (_jsx(Tabs, { value: value, onValueChange: (v) => onChange(v), children: _jsx(TabsList, { className: "max-w-full overflow-x-auto", children: shown.map(({ value: v, label, icon: Icon, after }) => (_jsxs(TabsTrigger, { value: v, children: [_jsx(Icon, {}), label, after] }, v))) }) })) : null }), actions ? _jsx("div", { className: "ml-auto flex shrink-0 items-center gap-0.5", children: actions }) : null] }));
+    const fade = useScrollFade();
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("div", { className: "min-w-48 max-w-full flex-1", children: shown.length ? (_jsx(Tabs, { value: value, onValueChange: (v) => onChange(v), children: _jsx(TabsList, { ref: fade.ref, onScroll: fade.update, "data-fade": fade.side, className: "max-w-full overflow-x-auto", children: shown.map(({ value: v, label, icon: Icon, after }) => (_jsxs(TabsTrigger, { value: v, children: [_jsx(Icon, {}), label, after] }, v))) }) })) : null }), actions ? _jsx("div", { className: "ml-auto flex shrink-0 items-center gap-0.5", children: actions }) : null] }));
 }

package/dist/lumen-view.js

@@ -301,7 +301,9 @@ export function LumenView({ domain, config, rows, total = rows.length, paging: s
     const table = pivot && config.pivot ? (_jsx(PivotTable, { domain: domain, rows: rows, pivot: config.pivot })) : (_jsx(LumenTable, { domain: domain, columns: columns, rows: tableRows, groupBy: groupBy, subgroup: sub, chips: chips, page: paging ? { index: page, size: pageSize } : null, inView: inLayout, fit: fit, onDetails: onDetails, tapped: tapped, selection: selection, groupActions: groupActions, sort: sort, onSort: sorted, serverSorts: server ? (server.sorts ?? []) : undefined, serverGroups: served, total: config.total !== false, add: onAddColumn || onColumns
             ? { ...onAddColumn, field: onColumns && { domain, columns, onColumns } }
             : undefined }));
-    return (_jsx(LumenWidget, { id: cardId, kind: "table", style: "table", title: title, controls: controls, tools: state ? (tools) : (_jsxs(_Fragment, { children: [tools, compare, pager, onColumns && !onAddColumn && on('columns') && (_jsx(ColumnPicker, { domain: domain, columns: columns, onColumns: onColumns })), !pivot && on('download') && (_jsx(IconButton, { icon: DownloadIcon, label: "Download CSV", onClick: () => downloadCsv({
+    return (_jsx(LumenWidget, { id: cardId, kind: "table", style: "table", title: title, phoneTitle: false, controls: controls, tools: state ? (tools) : (_jsxs(_Fragment, { children: [tools, compare, pager, onColumns && !onAddColumn && on('columns') && (_jsx(ColumnPicker, { domain: domain, columns: columns, onColumns: onColumns })), !pivot && on('download') && (_jsx(IconButton, { icon: DownloadIcon, label: "Download CSV", 
+                    // A phone's card header has room for the pager, filter, refresh and menu only.
+                    className: "max-md:hidden", onClick: () => downloadCsv({
                         name: title,
                         columns,
                         rows: tableRows,
@@ -425,8 +427,16 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
     // The grouped field is the group row's label, so its column hides (a flat lead stays).
     // Each key once: two columns under one React key can lose a cell on a re-render, and every
     // row after it slides left by one.
+    // A `hideEmpty` column with nothing in any row here leaves the table.
+    const empty = (f) => !!f.hideEmpty &&
+        rows.length > 0 &&
+        rows.every((r) => {
+            const v = f.value(r);
+            return v == null || v === '' || v === 0;
+        });
     const visible = columns.filter((f, i) => (f.key !== groupBy?.key || (flat && i === 0)) &&
-        columns.findIndex((x) => x.key === f.key) === i);
+        columns.findIndex((x) => x.key === f.key) === i &&
+        !empty(f));
     // Inline chips sit on the first column, next to the row's name, not in their own.
     const inline = visible.filter((f, i) => i > 0 && chips.some((c) => c.key === f.key && c.placement === 'inline'));
     const shown = visible.filter((f) => !inline.includes(f));
@@ -440,6 +450,7 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
     const col = (f, ...more) => ({
         ...colProps(f, ...more),
         'data-card': f ? cardOf(f) : undefined,
+        'data-card-unit': f?.cardUnit,
     });
     const computed = useMemo(() => computedOf(domain, rows, groupBy), [domain, rows, groupBy]);
     // Values per editable field, offered when a cell is edited: the field's own list when it has

package/dist/lumen-widget.d.ts

@@ -52,7 +52,7 @@ export interface CardLink {
     /** Its own filter's linked chips (the phone's count beside the funnel). */
     linked?: number;
 }
-export declare function LumenWidget({ id, kind, icon, title, note, controls, tools, filter, filterCount, load, rows, loadNote, pad, pinned, compact, className, children, link: given, help, assistant, strip, shown, style, }: {
+export declare function LumenWidget({ id, kind, icon, title, note, controls, tools, phoneTitle, filter, filterCount, load, rows, loadNote, pad, pinned, compact, className, children, link: given, help, assistant, strip, shown, style, }: {
     id: string;
     /** Its controls (Edit widget ▸ Controls): Ask the assistant, Refresh, Filter box and
      *  Footer show or hide here; missing keys take the type's default. */
@@ -78,6 +78,9 @@ export declare function LumenWidget({ id, kind, icon, title, note, controls, too
     controls?: CardControls;
     /** Buttons before the ↻, e.g. a view's pager. */
     tools?: ReactNode;
+    /** False: a phone leaves the title out and gives the header to `tools` (a view whose
+     *  page header names it already). */
+    phoneTitle?: boolean;
     /** The card's own filter (a view's LumenTokenizedFilter and Group): on the title's line
      *  when the header is wide, on a line under it when narrow, behind a funnel button on phone. */
     filter?: ReactNode;

package/dist/lumen-widget.js

@@ -180,7 +180,7 @@ function useWidth() {
     }, []);
     return [ref, width];
 }
-export function LumenWidget({ id, kind, icon, title, note, controls, tools, filter, filterCount = 0, load, rows, loadNote, pad = true, pinned = false, compact = false, className, children, link: given, help, assistant, strip, shown, style, }) {
+export function LumenWidget({ id, kind, icon, title, note, controls, tools, phoneTitle, filter, filterCount = 0, load, rows, loadNote, pad = true, pinned = false, compact = false, className, children, link: given, help, assistant, strip, shown, style, }) {
     const [removing, setRemoving] = useState(false);
     const cell = useGridCell();
     const links = useLinks();
@@ -232,7 +232,7 @@ export function LumenWidget({ id, kind, icon, title, note, controls, tools, filt
             layout &&
                 "relative after:pointer-events-none after:absolute after:inset-0 after:z-30 after:rounded-[inherit] after:border-2 after:border-primary/40 after:border-dashed after:content-['']", flat && 'border-0 bg-transparent shadow-none', 
             // The corner ⋯ of a card with its header off sits over the body's top right.
-            headless && 'relative', className), children: [!headless && (_jsxs("div", { ref: head, className: cn('flex shrink-0 items-center gap-2 px-3', compact ? 'h-8' : 'h-10 border-b', (folded || below) && 'border-b-0', pinned && 'sticky left-0 w-(--view-w) max-w-full'), children: [layout && (_jsx(Button, { variant: "ghost", size: "icon-xs", className: "lumen-drag -ml-1 cursor-grab touch-none text-muted-foreground active:cursor-grabbing", "aria-label": `Drag ${title}`, children: _jsx(GripVerticalIcon, {}) })), link && !bare && (_jsx(LinkPicker, { color: link.color, onPick: link.onPick, label: title, className: "-mr-1" })), !compact && _jsx(Icon, { className: "size-4 shrink-0 text-muted-foreground" }), _jsx("span", { className: cn('truncate', compact ? 'text-xs text-muted-foreground' : 'text-sm font-semibold'), children: title }), link?.color && link.follows && !folded && (_jsxs("span", { className: "min-w-0 shrink truncate text-xs", style: { color: linkVar(link.color) }, title: `Follows ${link.follows}`, children: ["\u00B7 ", link.follows] })), layout && headerOff && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(Badge, { variant: "secondary", className: "shrink-0 gap-1 text-muted-foreground", children: [_jsx(EyeOffIcon, {}), " Header off"] }) }), _jsx(TooltipContent, { children: "Shown only in Edit layout. Change it in Edit widget \u25B8 Controls." })] })), !layout && !bare && (_jsx(FoldChevron, { folded: folded, label: title, onToggle: toggle, className: "-ml-1" })), folded && rows != null && (_jsxs("span", { className: "shrink-0 text-xs text-muted-foreground num", children: [rows.toLocaleString(), " ", rows === 1 ? 'row' : 'rows'] })), inline && (_jsx("div", { "data-card-filter": true, className: "flex min-w-40 max-w-xl flex-1 items-center gap-2", children: filter })), note && !layout && !folded && (_jsx("span", { className: "hidden truncate text-xs text-muted-foreground sm:inline", children: note })), _jsxs("span", { className: cn('ml-auto flex shrink-0 items-center gap-1', bare && 'hidden'), children: [!layout && load?.updated && _jsx(LumenFreshness, { load: load }), !layout && !folded && tools, showFilter && mobile && link?.color && !!link.linked && (_jsxs("span", { className: "num flex items-center gap-1 text-xs text-muted-foreground", title: `${link.linked} linked`, children: [_jsx(LinkDot, { color: link.color, className: "size-2" }), link.linked] })), showFilter && mobile && (_jsxs("span", { className: "relative", children: [_jsx(IconButton, { icon: FunnelIcon, label: filterOpen ? 'Hide filter' : 'Filter', "aria-expanded": filterOpen, className: cn(filterOpen && 'text-primary'), onClick: () => setFilterOpen(!filterOpen) }), filterCount > 0 && (_jsx(Badge, { className: "num pointer-events-none absolute -top-1 -right-1 h-4 min-w-4 px-1 text-[10px]", children: filterCount }))] })), !layout && !folded && help && _jsx(CardHelp, { title: title, children: help }), !layout && load && on('refresh') && (_jsx(LumenRefresh, { load: load, label: `Refresh ${title}` })), (controls?.editable || (!layout && (ask || load?.editScript))) && (_jsxs(DropdownMenu, { modal: false, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(IconButton, { icon: MoreHorizontalIcon, label: `${title} menu` }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-44", children: [ask && !layout && (_jsxs(DropdownMenuItem, { onSelect: ask, children: [_jsx(SparklesIcon, {}), " Ask ", assistantName] })), load?.editScript && !layout && (_jsxs(DropdownMenuItem, { onSelect: load.editScript, children: [_jsx(CodeIcon, {}), " Script"] })), (ask || load?.editScript) && !layout && controls?.editable && (_jsx(DropdownMenuSeparator, {})), controls?.editable && (_jsxs(_Fragment, { children: [!controls.fixed && (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuItem, { onSelect: () => controls.onAction('edit'), children: [_jsx(PencilIcon, {}), " Edit widget"] }), _jsxs(DropdownMenuItem, { disabled: !own, onSelect: () => controls.onAction('duplicate'), children: [_jsx(CopyIcon, {}), " Duplicate"] })] })), _jsxs(DropdownMenuItem, { disabled: controls.first, onSelect: () => controls.onAction('up'), children: [_jsx(ArrowUpIcon, {}), " Move up"] }), _jsxs(DropdownMenuItem, { disabled: controls.last, onSelect: () => controls.onAction('down'), children: [_jsx(ArrowDownIcon, {}), " Move down"] }), controls.onFit && (_jsxs(DropdownMenuItem, { onSelect: controls.onFit, children: [_jsx(FoldVerticalIcon, {}), " Fit height"] })), !controls.fixed && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "text-muted-foreground focus:text-destructive", onSelect: () => setRemoving(true), children: [_jsx(Trash2Icon, {}), " Remove"] })] }))] }))] })] }))] })] })), below && !headless && (_jsx("div", { "data-card-filter": true, className: cn('flex items-center gap-2 border-b px-3 pb-2', pinned && 'sticky left-0 w-(--view-w) max-w-full'), children: filter })), strip && !layout && !folded && !headless ? (_jsx("div", { "data-card-strip": true, className: cn('flex min-w-0 items-center gap-2 border-b px-3 py-1.5 empty:hidden', pinned && 'sticky left-0 w-(--view-w) max-w-full'), children: strip })) : null, _jsx("div", { hidden: folded, className: cn('relative min-w-0', 
+            headless && 'relative', className), children: [!headless && (_jsxs("div", { ref: head, className: cn('flex shrink-0 items-center gap-2 px-3', compact ? 'h-8' : 'h-10 border-b', (folded || below) && 'border-b-0', pinned && 'sticky left-0 w-(--view-w) max-w-full'), children: [layout && (_jsx(Button, { variant: "ghost", size: "icon-xs", className: "lumen-drag -ml-1 cursor-grab touch-none text-muted-foreground active:cursor-grabbing", "aria-label": `Drag ${title}`, children: _jsx(GripVerticalIcon, {}) })), link && !bare && (_jsx(LinkPicker, { color: link.color, onPick: link.onPick, label: title, className: "-mr-1" })), !compact && _jsx(Icon, { className: "size-4 shrink-0 text-muted-foreground" }), _jsx("span", { className: cn('truncate', compact ? 'text-xs text-muted-foreground' : 'text-sm font-semibold', phoneTitle === false && !layout && 'max-md:hidden'), children: title }), link?.color && link.follows && !folded && (_jsxs("span", { className: "min-w-0 shrink truncate text-xs", style: { color: linkVar(link.color) }, title: `Follows ${link.follows}`, children: ["\u00B7 ", link.follows] })), layout && headerOff && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(Badge, { variant: "secondary", className: "shrink-0 gap-1 text-muted-foreground", children: [_jsx(EyeOffIcon, {}), " Header off"] }) }), _jsx(TooltipContent, { children: "Shown only in Edit layout. Change it in Edit widget \u25B8 Controls." })] })), !layout && !bare && (_jsx(FoldChevron, { folded: folded, label: title, onToggle: toggle, className: "-ml-1" })), folded && rows != null && (_jsxs("span", { className: "shrink-0 text-xs text-muted-foreground num", children: [rows.toLocaleString(), " ", rows === 1 ? 'row' : 'rows'] })), inline && (_jsx("div", { "data-card-filter": true, className: "flex min-w-40 max-w-xl flex-1 items-center gap-2", children: filter })), note && !layout && !folded && (_jsx("span", { className: "hidden truncate text-xs text-muted-foreground sm:inline", children: note })), _jsxs("span", { className: cn('ml-auto flex shrink-0 items-center gap-1', bare && 'hidden'), children: [!layout && load?.updated && _jsx(LumenFreshness, { load: load }), !layout && !folded && tools, showFilter && mobile && link?.color && !!link.linked && (_jsxs("span", { className: "num flex items-center gap-1 text-xs text-muted-foreground", title: `${link.linked} linked`, children: [_jsx(LinkDot, { color: link.color, className: "size-2" }), link.linked] })), showFilter && mobile && (_jsxs("span", { className: "relative", children: [_jsx(IconButton, { icon: FunnelIcon, label: filterOpen ? 'Hide filter' : 'Filter', "aria-expanded": filterOpen, className: cn(filterOpen && 'text-primary'), onClick: () => setFilterOpen(!filterOpen) }), filterCount > 0 && (_jsx(Badge, { className: "num pointer-events-none absolute -top-1 -right-1 h-4 min-w-4 px-1 text-[10px]", children: filterCount }))] })), !layout && !folded && help && _jsx(CardHelp, { title: title, children: help }), !layout && load && on('refresh') && (_jsx(LumenRefresh, { load: load, label: `Refresh ${title}` })), (controls?.editable || (!layout && (ask || load?.editScript))) && (_jsxs(DropdownMenu, { modal: false, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(IconButton, { icon: MoreHorizontalIcon, label: `${title} menu` }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-44", children: [ask && !layout && (_jsxs(DropdownMenuItem, { onSelect: ask, children: [_jsx(SparklesIcon, {}), " Ask ", assistantName] })), load?.editScript && !layout && (_jsxs(DropdownMenuItem, { onSelect: load.editScript, children: [_jsx(CodeIcon, {}), " Script"] })), (ask || load?.editScript) && !layout && controls?.editable && (_jsx(DropdownMenuSeparator, {})), controls?.editable && (_jsxs(_Fragment, { children: [!controls.fixed && (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuItem, { onSelect: () => controls.onAction('edit'), children: [_jsx(PencilIcon, {}), " Edit widget"] }), _jsxs(DropdownMenuItem, { disabled: !own, onSelect: () => controls.onAction('duplicate'), children: [_jsx(CopyIcon, {}), " Duplicate"] })] })), _jsxs(DropdownMenuItem, { disabled: controls.first, onSelect: () => controls.onAction('up'), children: [_jsx(ArrowUpIcon, {}), " Move up"] }), _jsxs(DropdownMenuItem, { disabled: controls.last, onSelect: () => controls.onAction('down'), children: [_jsx(ArrowDownIcon, {}), " Move down"] }), controls.onFit && (_jsxs(DropdownMenuItem, { onSelect: controls.onFit, children: [_jsx(FoldVerticalIcon, {}), " Fit height"] })), !controls.fixed && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "text-muted-foreground focus:text-destructive", onSelect: () => setRemoving(true), children: [_jsx(Trash2Icon, {}), " Remove"] })] }))] }))] })] }))] })] })), below && !headless && (_jsx("div", { "data-card-filter": true, className: cn('flex items-center gap-2 border-b px-3 pb-2', pinned && 'sticky left-0 w-(--view-w) max-w-full'), children: filter })), strip && !layout && !folded && !headless ? (_jsx("div", { "data-card-strip": true, className: cn('flex min-w-0 items-center gap-2 border-b px-3 py-1.5 empty:hidden', pinned && 'sticky left-0 w-(--view-w) max-w-full'), children: strip })) : null, _jsx("div", { hidden: folded, className: cn('relative min-w-0', 
                     // On the grid a card fills its cell: with a height of its own its body scrolls; one as
                     // tall as it draws keeps its body's height, so the grid can measure it.
                     !cell ? 'flex-1' : cell.fixed && 'min-h-0 flex-1 overflow-auto', pad && !table && !flat && (compact ? 'px-3 pb-3' : 'p-3')), children: _jsx(LumenBoundary, { where: id, children: children }) }), headless && (_jsx(HeaderlessMenu, { title: title, ask: ask, askLabel: `Ask ${assistantName}`, load: load && on('refresh') ? load : undefined, editScript: load?.editScript, filter: showFilter ? filter : undefined, filterCount: filterCount })), !layout && !folded && load && on('footer') && (_jsx("div", { className: cn('mt-auto shrink-0', pinned && 'sticky left-0 w-(--view-w) max-w-full'), children: _jsx(LumenLoadFooter, { load: load, rows: rows, note: loadNote }) })), controls && (_jsx(LumenConfirm, { open: removing, onOpenChange: setRemoving, title: `Remove ${title}?`, description: table ? 'Add widget brings a table back.' : 'Add widget brings it back.', action: "Remove", onConfirm: () => controls.onAction('remove') }))] }) }));

package/dist/scroll-fade.d.ts

@@ -0,0 +1,10 @@
+import { type RefObject } from 'react';
+/**
+ * Which edges of a sideways-scrolling row have more beyond them (`start`, `end`, `both`), for
+ * theme.css (`data-fade`) to fade there: a cut-off tab or block reads as "scroll for more", not as a clipped label.
+ */
+export declare function useScrollFade(given?: RefObject<HTMLDivElement | null>): {
+    ref: RefObject<HTMLDivElement | null>;
+    side: "both" | "end" | "start" | undefined;
+    update: () => void;
+};

package/dist/scroll-fade.js

@@ -0,0 +1,32 @@
+// Fades a sideways-scrolling row at the edges with more beyond them.
+import { useCallback, useEffect, useRef, useState } from 'react';
+/**
+ * Which edges of a sideways-scrolling row have more beyond them (`start`, `end`, `both`), for
+ * theme.css (`data-fade`) to fade there: a cut-off tab or block reads as "scroll for more", not as a clipped label.
+ */
+export function useScrollFade(given) {
+    const own = useRef(null);
+    const ref = given ?? own;
+    const [side, setSide] = useState();
+    const update = useCallback(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const start = el.scrollLeft > 1;
+        const end = el.scrollLeft + el.clientWidth < el.scrollWidth - 1;
+        setSide(start && end ? 'both' : start ? 'start' : end ? 'end' : undefined);
+    }, [ref]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        update();
+        // The row's content can grow while the row keeps its size (a new page of wider rows).
+        const seen = new ResizeObserver(update);
+        seen.observe(el);
+        if (el.firstElementChild)
+            seen.observe(el.firstElementChild);
+        return () => seen.disconnect();
+    }, [ref, update]);
+    return { ref, side, update };
+}

package/dist/shell.js

@@ -143,5 +143,5 @@ export function LumenShell({ app, appLabel, brand, nav, status, health, statusEn
 }
 /** A status bar entry: an optional health dot, a label and its value ("Mail · Up to date"). */
 export function StatusItem({ label, value, ok, className, }) {
-    return (_jsxs("span", { className: cn('flex items-center gap-1.5', value === undefined && 'min-w-0', className), children: [ok !== undefined && (_jsx("span", { "aria-hidden": true, className: cn('size-2 shrink-0 rounded-full', ok === null ? 'bg-muted-foreground/40' : ok ? 'bg-gain' : 'bg-destructive') })), _jsx("span", { className: value === undefined ? 'min-w-0 truncate' : 'max-md:hidden', children: label }), value !== undefined && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, className: "max-md:hidden", children: "\u00B7" }), _jsx("span", { className: "shrink-0 tabular-nums text-foreground/80", children: value })] }))] }));
+    return (_jsxs("span", { className: cn('flex items-center gap-1.5', value === undefined && 'min-w-0', className), children: [ok !== undefined && (_jsx("span", { "aria-hidden": true, className: cn('size-2 shrink-0 rounded-full', ok === null ? 'bg-muted-foreground/40' : ok ? 'bg-gain' : 'bg-destructive') })), _jsx("span", { className: value === undefined ? 'min-w-0 truncate' : 'shrink-0', children: label }), value !== undefined && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\u00B7" }), _jsx("span", { className: "shrink-0 tabular-nums text-foreground/80", children: value })] }))] }));
 }

package/dist/theme.css

@@ -414,6 +414,30 @@
   left: 100%;
 }
 
+/* A row that scrolls sideways (LumenTabs, a view's page) fades at an edge with more beyond it.
+   `--fade-inset` keeps a vertical scrollbar at the end edge out of the fade. */
+[data-fade="end"] {
+  mask-image: linear-gradient(
+    to left,
+    #000 var(--fade-inset, 0px),
+    transparent var(--fade-inset, 0px),
+    #000 calc(var(--fade-inset, 0px) + 2rem)
+  );
+}
+[data-fade="start"] {
+  mask-image: linear-gradient(to left, #000 calc(100% - 2rem), transparent);
+}
+[data-fade="both"] {
+  mask-image: linear-gradient(
+    to left,
+    #000 var(--fade-inset, 0px),
+    transparent var(--fade-inset, 0px),
+    #000 calc(var(--fade-inset, 0px) + 2rem),
+    #000 calc(100% - 2rem),
+    transparent
+  );
+}
+
 /* A LumenView table on a narrow phone (`data-cards`): each row is a card, so nothing runs off
    the right edge. Line 1: the row's name (shortens) and one figure (`data-card="meta"`); line 2:
    the other values, small and muted. Numbers, dates and their units keep their width; only text
@@ -486,7 +510,17 @@
   }
   table[data-cards] [data-slot="unit-value-unit"] {
     position: static;
+    width: auto;
+    padding-left: 0;
     margin-left: 0.25em;
+    font-size: inherit;
+  }
+  /* A bare count names what it counts (`cardUnit`): no header says it on a card. */
+  table[data-cards] td[data-card-unit]::after {
+    content: attr(data-card-unit);
+    margin-left: 0.25em;
+    color: var(--muted-foreground);
+    font-weight: 400;
   }
 }
 

package/dist/view-model.d.ts

@@ -139,6 +139,10 @@ export interface ViewField<T> {
     maxWidth?: string | false;
     /** Left out on phones, where the table has no room for it (a returns table's longer windows). */
     hideOnPhone?: boolean;
+    /** Left out of a table when no row in it has a value (none, empty or 0): an Attachments column on mail with none. */
+    hideEmpty?: boolean;
+    /** On a phone card, where no header names it: the word after a bare count (`msgs`, so `5,861 msgs`). */
+    cardUnit?: string;
     /**
      * How the value updates (live domains): `live` moves with the market while it
      * trades (a quote), `asof` is a daily or snapshot value (a close, a fact, the assistant frame's column).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.107",
+  "version": "0.1.109",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -49,7 +49,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.107",
+    "@columenlabs/lumen-ui-types": "0.1.109",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",