@columenlabs/lumen-ui 0.1.169 → 0.1.171

package/dist/column-widths.d.ts

@@ -0,0 +1,28 @@
+/** The narrowest and widest a person can drag a column (px). */
+export declare const COL_MIN = 48;
+export declare const COL_MAX = 960;
+/**
+ * The widths a person set on one table's columns, by field key, kept on the device under `key`.
+ * Left out `key`: no widths (resizing off). `set` updates while dragging; `save` sets and keeps.
+ */
+export declare function useColumnWidths(key: string | undefined): {
+    widths: Readonly<Record<string, number>>;
+    set: (col: string, w: number) => void;
+    save: (col: string, w: number) => void;
+    reset: (col: string) => void;
+};
+/**
+ * The grip on a header cell's right edge. It measures its header cell when a drag starts, so a
+ * column that never had a width set starts from where it is drawn.
+ */
+export declare function ColumnResizer({ label, width, onWidth, onDone, onReset, }: {
+    /** The column's name, for the grip's label ("Resize Name"). */
+    label: string;
+    /** The width set, if any. */
+    width: number | undefined;
+    onWidth: (w: number) => void;
+    /** The drag or key press ended: keep this width. */
+    onDone: (w: number) => void;
+    /** Back to the column's own width. */
+    onReset: () => void;
+}): import("react").JSX.Element;

package/dist/column-widths.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Resizable table columns: a grip on each header's right edge sets that column's width by drag
+// (or ← → on the focused grip), a double click (or Enter) gives it back its own width, and the
+// widths are kept on the device per table. A table turns it on with `resizable`, an app for every
+// table with `configureLumen({ resizableColumns: true })`. Desktop only: a phone's rows are cards.
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { cn } from './lib/utils.js';
+/** The narrowest and widest a person can drag a column (px). */
+export const COL_MIN = 48;
+export const COL_MAX = 960;
+/** How far ← or → moves a focused grip (px). */
+const STEP = 16;
+const PREFIX = 'lumen:col-widths:';
+const clamp = (w) => Math.round(Math.min(COL_MAX, Math.max(COL_MIN, w)));
+function read(key) {
+    try {
+        const raw = window.localStorage.getItem(PREFIX + key);
+        const v = raw ? JSON.parse(raw) : null;
+        if (!v || typeof v !== 'object')
+            return {};
+        const out = {};
+        for (const [k, w] of Object.entries(v))
+            if (typeof w === 'number' && w > 0)
+                out[k] = clamp(w);
+        return out;
+    }
+    catch {
+        return {};
+    }
+}
+function write(key, widths) {
+    try {
+        if (Object.keys(widths).length)
+            window.localStorage.setItem(PREFIX + key, JSON.stringify(widths));
+        else
+            window.localStorage.removeItem(PREFIX + key);
+    }
+    catch {
+        // Storage off (a private window, blocked site data): widths last for the visit only.
+    }
+}
+/**
+ * The widths a person set on one table's columns, by field key, kept on the device under `key`.
+ * Left out `key`: no widths (resizing off). `set` updates while dragging; `save` sets and keeps.
+ */
+export function useColumnWidths(key) {
+    const [widths, setWidths] = useState(() => key && typeof window !== 'undefined' ? read(key) : {});
+    useEffect(() => {
+        setWidths(key ? read(key) : {});
+    }, [key]);
+    const set = useCallback((col, w) => {
+        setWidths((o) => (o[col] === clamp(w) ? o : { ...o, [col]: clamp(w) }));
+    }, []);
+    const save = useCallback((col, w) => {
+        setWidths((o) => {
+            const next = { ...o, [col]: clamp(w) };
+            if (key)
+                write(key, next);
+            return next;
+        });
+    }, [key]);
+    const reset = useCallback((col) => {
+        setWidths((o) => {
+            if (!(col in o))
+                return o;
+            const { [col]: _, ...rest } = o;
+            if (key)
+                write(key, rest);
+            return rest;
+        });
+    }, [key]);
+    return { widths: key ? widths : {}, set, save, reset };
+}
+/**
+ * The grip on a header cell's right edge. It measures its header cell when a drag starts, so a
+ * column that never had a width set starts from where it is drawn.
+ */
+export function ColumnResizer({ label, width, onWidth, onDone, onReset, }) {
+    const drag = useRef(null);
+    const [active, setActive] = useState(false);
+    const cellWidth = (el) => el.closest('th')?.getBoundingClientRect().width ?? width ?? COL_MIN;
+    return (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": `Resize ${label}`, "aria-valuenow": width, "aria-valuemin": COL_MIN, "aria-valuemax": COL_MAX, tabIndex: 0, title: `Drag to resize ${label}; double-click to reset`, "data-slot": "column-resizer", "data-active": active || undefined, className: cn('absolute inset-y-0 right-0 z-10 w-2 cursor-col-resize touch-none select-none rounded-sm outline-none', "after:absolute after:inset-y-2 after:right-0.5 after:w-px after:bg-border after:content-['']", 'hover:after:w-0.5 hover:after:bg-primary data-active:after:w-0.5 data-active:after:bg-primary', 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:after:bg-primary'), onClick: (e) => e.stopPropagation(), onPointerDown: (e) => {
+            if (e.button !== 0)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            e.currentTarget.setPointerCapture(e.pointerId);
+            const w = cellWidth(e.currentTarget);
+            drag.current = { x: e.clientX, w, frame: 0, next: w };
+            setActive(true);
+        }, onPointerMove: (e) => {
+            const d = drag.current;
+            if (!d)
+                return;
+            d.next = d.w + e.clientX - d.x;
+            if (!d.frame)
+                d.frame = requestAnimationFrame(() => {
+                    d.frame = 0;
+                    onWidth(d.next);
+                });
+        }, onPointerUp: (e) => {
+            const d = drag.current;
+            if (!d)
+                return;
+            if (d.frame)
+                cancelAnimationFrame(d.frame);
+            drag.current = null;
+            setActive(false);
+            e.currentTarget.releasePointerCapture(e.pointerId);
+            if (d.next !== d.w)
+                onDone(d.next);
+        }, onPointerCancel: () => {
+            const d = drag.current;
+            if (d?.frame)
+                cancelAnimationFrame(d.frame);
+            drag.current = null;
+            setActive(false);
+        }, onDoubleClick: (e) => {
+            e.stopPropagation();
+            onReset();
+        }, onKeyDown: (e) => {
+            if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+                e.preventDefault();
+                e.stopPropagation();
+                const w = width ?? cellWidth(e.currentTarget);
+                onDone(w + (e.key === 'ArrowRight' ? STEP : -STEP));
+            }
+            else if (e.key === 'Enter' || e.key === 'Delete' || e.key === 'Backspace') {
+                e.preventDefault();
+                e.stopPropagation();
+                onReset();
+            }
+        } }));
+}

package/dist/kit-config.d.ts

@@ -13,6 +13,9 @@ export interface KitConfig {
     meterLevels: MeterLevels;
     /** Where every health meter drops below green (`watch`) and below amber (`alert`), 0 to 1. */
     healthLevels: HealthLevels;
+    /** Every table's columns resize by a grip on their header's right edge (desktop), the widths
+     *  kept on the device per table; one table overrides with its `resizable` prop. */
+    resizableColumns: boolean;
 }
 export declare const KIT: KitConfig;
 /** Runs `fn` after each `configureLumen` (preferences read again from the app's cookie). */

package/dist/kit-config.js

@@ -7,6 +7,7 @@ export const KIT = {
     marketOff: 'Live market data is not on this app.',
     meterLevels: METER_LEVELS,
     healthLevels: HEALTH_LEVELS,
+    resizableColumns: false,
 };
 const changed = new Set();
 /** Runs `fn` after each `configureLumen` (preferences read again from the app's cookie). */

package/dist/lumen-view.d.ts

@@ -170,6 +170,9 @@ export interface LumenViewProps<T> {
     onSort?: (sort: CustomViewConfig['sort']) => void;
     /** Its controls from its card (Edit widget ▸ Controls); missing keys take the Table defaults. */
     shown?: ViewCard['controls'];
+    /** A grip on each header's right edge resizes its column (desktop), kept on the device per
+     *  table (the domain's id and `cardId`); left out: `configureLumen({ resizableColumns })`. */
+    resizable?: boolean;
 }
 /** What the header's + offers. */
 export interface AddColumn {
@@ -188,7 +191,7 @@ export interface AddColumn {
  * and ⋯, and its own filter and Group (they narrow this table only); its body
  * the table (grouped one level, or the pivot) with the loading states.
  */
-export declare function LumenView<T extends RowData>({ domain, config, rows, total, paging: server, groupBy: pickedGroup, pivot: pickedPivot, subgroup, load: sourceLoad, state, title, selection, onDetails, tapped, openKey, groupActions, controls, inLayout: inScroller, cardId, tools, filter, filterCount, onClearFilter, strip, link, note, onColumns, onAddColumn, sort, onSort, shown, }: LumenViewProps<T>): import("react").JSX.Element;
+export declare function LumenView<T extends RowData>({ domain, config, rows, total, paging: server, groupBy: pickedGroup, pivot: pickedPivot, subgroup, load: sourceLoad, state, title, selection, onDetails, tapped, openKey, groupActions, controls, inLayout: inScroller, cardId, tools, filter, filterCount, onClearFilter, strip, link, note, onColumns, onAddColumn, sort, onSort, shown, resizable, }: LumenViewProps<T>): import("react").JSX.Element;
 /** A field's colour for its header: its topic's source (a broker green, an app brown) where
  *  the group names one, else its group's (Holding, Symbol, Account, Formulas). */
 export declare function colorOf<T>(domain: ViewDomain<T>, f: ViewField<T> | undefined): string | null;
@@ -244,4 +247,9 @@ export interface LumenTableProps<T> {
     emptyState?: ReactNode;
     /** Takes every filter off: the empty body offers Clear filters. */
     onClearFilter?: () => void;
+    /** A grip on each header's right edge resizes its column (desktop, not a `fit` table); left
+     *  out: `configureLumen({ resizableColumns })`. */
+    resizable?: boolean;
+    /** Where the widths are kept on the device (one key per table); left out: they last the visit. */
+    widthsKey?: string;
 }

package/dist/lumen-view.js

@@ -11,12 +11,14 @@ import { createPaginatedRowModel, createSortedRowModel, flexRender, rowPaginatio
 import { ArrowDownIcon, ArrowDownWideNarrowIcon, ArrowUpIcon, ArrowUpNarrowWideIcon, ChartCandlestick, ChartSpline, ChevronRightIcon, ChevronsDownIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, Columns3CogIcon, CornerDownRightIcon, DownloadIcon, FilterXIcon, ListCollapseIcon, PlusIcon, SigmaIcon, UserPenIcon, } from 'lucide-react';
 import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { ColorChip, ColorDot } from './color-dot.js';
+import { ColumnResizer, useColumnWidths } from './column-widths.js';
 import { DrawerSection } from './drawer-section.js';
 import { useFloatingHead } from './floating-head.js';
 import { FreshnessMark, freshnessLine, freshnessOf } from './freshness.js';
 import { useIsMobile } from './hooks/use-mobile.js';
 import { useTell } from './hooks/use-tell.js';
 import { IconButton } from './icon-button.js';
+import { KIT } from './kit-config.js';
 import { lazyPart } from './lazy-part.js';
 import { cn } from './lib/utils.js';
 import { useGridCell } from './lumen-grid.js';
@@ -225,7 +227,7 @@ async function downloadCsv({ name, columns, rows, groupBy, sort, hidden, }) {
  * and ⋯, and its own filter and Group (they narrow this table only); its body
  * the table (grouped one level, or the pivot) with the loading states.
  */
-export function LumenView({ domain, config, rows, total = rows.length, paging: server, groupBy: pickedGroup = null, pivot: pickedPivot = false, subgroup, load: sourceLoad, state, title = config.name, selection, onDetails, tapped, openKey, groupActions, controls, inLayout: inScroller = false, cardId = 'view', tools, filter, filterCount, onClearFilter, strip, link, note, onColumns, onAddColumn, sort = config.sort, onSort, shown, }) {
+export function LumenView({ domain, config, rows, total = rows.length, paging: server, groupBy: pickedGroup = null, pivot: pickedPivot = false, subgroup, load: sourceLoad, state, title = config.name, selection, onDetails, tapped, openKey, groupActions, controls, inLayout: inScroller = false, cardId = 'view', tools, filter, filterCount, onClearFilter, strip, link, note, onColumns, onAddColumn, sort = config.sort, onSort, shown, resizable, }) {
     // Its controls (Edit widget ▸ Controls): Pager, Columns and Download here.
     const on = (k) => controlOn({ kind: 'table', controls: shown }, k);
     const cell = useGridCell();
@@ -338,7 +340,7 @@ export function LumenView({ domain, config, rows, total = rows.length, paging: s
     const pager = turn ? (_jsx(LumenPager, { ...turn })) : served ? (_jsx("span", { className: "num px-2 text-xs text-muted-foreground", children: served.list ? `${served.list.length.toLocaleString()}${served.more ? '+' : ''} groups` : '' })) : (_jsx("span", { className: "num px-2 text-xs text-muted-foreground", children: count }));
     // The page footer (`pagination.footer`): under the table while there is more than one page.
     const foot = turn && pagination.footer && !state && (turn.more || turn.total > turn.size) ? (_jsx(LumenPageFooter, { total: turn.total, page: turn.page, size: turn.size, onPage: turn.onPage, more: turn.more })) : null;
-    const table = pivot && config.pivot && !state ? (_jsx(PivotTable, { domain: domain, rows: rows, pivot: config.pivot })) : (_jsx(LumenTable, { domain: domain, columns: columns, rows: state ? [] : tableRows, groupBy: groupBy, subgroup: sub, chips: chips, page: paging ? { index: page, size: pageSize } : null, inView: inLayout, fit: fit, onDetails: onDetails, tapped: tapped, openKey: openKey, selection: selection, groupActions: groupActions, sort: sort, onSort: sorted, serverSorts: server ? (server.sorts ?? []) : undefined, serverGroups: state ? null : served, emptyState: state, onClearFilter: filtered ? onClearFilter : undefined, total: config.total !== false, add: onAddColumn || onColumns
+    const table = pivot && config.pivot && !state ? (_jsx(PivotTable, { domain: domain, rows: rows, pivot: config.pivot })) : (_jsx(LumenTable, { domain: domain, columns: columns, rows: state ? [] : tableRows, groupBy: groupBy, subgroup: sub, chips: chips, page: paging ? { index: page, size: pageSize } : null, inView: inLayout, fit: fit, onDetails: onDetails, tapped: tapped, openKey: openKey, selection: selection, groupActions: groupActions, sort: sort, onSort: sorted, serverSorts: server ? (server.sorts ?? []) : undefined, serverGroups: state ? null : served, emptyState: state, onClearFilter: filtered ? onClearFilter : undefined, total: config.total !== false, resizable: resizable, widthsKey: `${domain.id}:${cardId}`, add: onAddColumn || onColumns
             ? { ...onAddColumn, field: onColumns && { domain, columns, onColumns } }
             : undefined }));
     return (_jsx(LumenWidget, { id: cardId, kind: "table", style: "table", title: title, phoneTitle: false, controls: controls, tools: blank ? (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", 
@@ -437,8 +439,17 @@ function sortingOf(sort, columns, serverSorts) {
         return [];
     return columns.some((f) => f.key === sort.key) ? [{ id: sort.key, desc: sort.desc }] : [];
 }
-function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null, chips = [], page = null, inView = false, fit = false, onDetails, tapped, openKey = null, selection, groupActions, sort, onSort, serverSorts, total = true, subgroup = null, add, serverGroups = null, emptyState, onClearFilter, }) {
+function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null, chips = [], page = null, inView = false, fit = false, onDetails, tapped, openKey = null, selection, groupActions, sort, onSort, serverSorts, total = true, subgroup = null, add, serverGroups = null, emptyState, onClearFilter, resizable = KIT.resizableColumns, widthsKey, }) {
     const isMobile = useIsMobile();
+    // Widths a person dragged (desktop only: a phone's rows are cards, and a fit table wraps instead).
+    const resizing = resizable && !isMobile && !fit;
+    const colWidths = useColumnWidths(resizing ? (widthsKey ?? '') || undefined : undefined);
+    const widthOf = (f) => resizing && f ? colWidths.widths[f.key] : undefined;
+    // A dragged width caps the column's cells in its place (the cell's own padding taken off).
+    const capFor = (f, i) => {
+        const w = widthOf(f);
+        return w ? `calc(${w}px - 2 * var(--cell-x))` : capOf(f, i);
+    };
     const [sorting, setSorting] = useState(() => sortingOf(sort, columns, serverSorts));
     // A saved sort patched while the table is open (the assistant's card move) applies at once.
     const savedSort = JSON.stringify(sort ?? null);
@@ -560,8 +571,8 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
     // A column's `cell` function is a component type to flexRender, so a new function means every
     // cell remounts (a cell being typed into loses its box). The defs change
     // only when the columns do; each cell reads the latest renderers through `latest`.
-    const latest = useRef({ shown, cellOf, inline, chips, computed });
-    latest.current = { shown, cellOf, inline, chips, computed };
+    const latest = useRef({ shown, cellOf, inline, chips, computed, capFor });
+    latest.current = { shown, cellOf, inline, chips, computed, capFor };
     const shownKeys = shown.map((f) => f.key).join(',');
     const inlineOn = inline.length > 0;
     // biome-ignore lint/correctness/useExhaustiveDependencies: keyed on the columns shown; the rest comes through `latest`
@@ -575,11 +586,11 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
         enableSorting: !serverSorts || serverSorts.includes(f.key),
         header: i === 0 && flat && subgroup ? subgroup.label : f.label,
         cell: ({ row }) => {
-            const { shown: now, cellOf, inline, chips, computed } = latest.current;
+            const { shown: now, cellOf, inline, chips, computed, capFor } = latest.current;
             const field = now[i] ?? f;
             const chip = chips.some((c) => c.key === field.key);
             const v = computed.value(field, row.original);
-            return (_jsx(CappedCell, { max: capOf(field, i), title: !field.render && typeof v === 'string' ? v : undefined, children: i === 0 && inline.length ? (_jsx(FirstCell, { value: cellOf(field, row.original, chip), chips: inline.flatMap((x) => {
+            return (_jsx(CappedCell, { max: capFor(field, i), title: !field.render && typeof v === 'string' ? v : undefined, children: i === 0 && inline.length ? (_jsx(FirstCell, { value: cellOf(field, row.original, chip), chips: inline.flatMap((x) => {
                         const v = computed.value(x, row.original);
                         if (!x.edit && (v === null || v === ''))
                             return [];
@@ -714,7 +725,7 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
                 return n;
             });
         }, children: _jsx(ChevronRightIcon, { className: cn('transition-transform', openParts.has(k) && 'rotate-90') }) }));
-    const partRow = (p, name) => (_jsxs(TableRow, { className: cn('bg-muted/30 text-muted-foreground hover:bg-muted', onDetails && 'cursor-pointer'), onClick: onDetails ? () => onDetails(p) : undefined, children: [selection && _jsx(TableCell, {}), shown.map((f, i) => (_jsx(TableCell, { ...col(f, i === 0 && 'pl-12'), children: i === 0 ? (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(CornerDownRightIcon, { className: "size-3.5 shrink-0" }), _jsx(CappedCell, { max: capOf(f, 0), children: name
+    const partRow = (p, name) => (_jsxs(TableRow, { className: cn('bg-muted/30 text-muted-foreground hover:bg-muted', onDetails && 'cursor-pointer'), onClick: onDetails ? () => onDetails(p) : undefined, children: [selection && _jsx(TableCell, {}), shown.map((f, i) => (_jsx(TableCell, { ...col(f, i === 0 && 'pl-12'), children: i === 0 ? (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(CornerDownRightIcon, { className: "size-3.5 shrink-0" }), _jsx(CappedCell, { max: capFor(f, 0), children: name
                                 ? name(p)
                                 : cellOf(f, p, chips.some((c) => c.key === f.key)) })] })) : (cellOf(f, p, chips.some((c) => c.key === f.key))) }, f.key))), add && _jsx(TableCell, {})] }, `part:${keyOf(p)}`));
     // ↑ and ↓ step to the next data row (past part and panel rows); while a row's details are
@@ -813,7 +824,14 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
     };
     const box = useRef(null);
     useFloatingHead(box, !inView);
-    return (_jsxs("div", { ref: box, className: cn(inView ? IN_VIEW : 'overflow-x-auto overflow-y-hidden [--pin-top:0px]', fit && FIT), children: [cardSort, _jsx(UnitColumns.Provider, { value: markUnits, children: _jsxs(Table, { "data-cards": "", children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((hg) => (_jsxs(TableRow, { children: [selection && (_jsx(TableHead, { className: cn('w-8 pr-0', PINNED_HEAD), children: _jsx(Checkbox, { checked: allOn ? true : someOn ? 'indeterminate' : false, onCheckedChange: (on) => toggle(allKeys, on === true), "aria-label": "Select every row" }) })), hg.headers.map((h, i) => (_jsxs(TableHead, { ...col(shown[i], PINNED_HEAD), style: ruleOf(colorOf(domain, shown[i])), onPointerDown: pressStart, onPointerUp: pressEnd, onPointerLeave: pressEnd, onPointerCancel: pressEnd, onContextMenu: (e) => {
+    return (_jsxs("div", { ref: box, className: cn(inView ? IN_VIEW : 'overflow-x-auto overflow-y-hidden [--pin-top:0px]', fit && FIT), children: [cardSort, _jsx(UnitColumns.Provider, { value: markUnits, children: _jsxs(Table, { "data-cards": "", children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((hg) => (_jsxs(TableRow, { children: [selection && (_jsx(TableHead, { className: cn('w-8 pr-0', PINNED_HEAD), children: _jsx(Checkbox, { checked: allOn ? true : someOn ? 'indeterminate' : false, onCheckedChange: (on) => toggle(allKeys, on === true), "aria-label": "Select every row" }) })), hg.headers.map((h, i) => (_jsxs(TableHead, { ...col(shown[i], PINNED_HEAD), style: {
+                                            ...ruleOf(colorOf(domain, shown[i])),
+                                            ...(widthOf(shown[i]) && {
+                                                width: widthOf(shown[i]),
+                                                minWidth: widthOf(shown[i]),
+                                                maxWidth: widthOf(shown[i]),
+                                            }),
+                                        }, onPointerDown: pressStart, onPointerUp: pressEnd, onPointerLeave: pressEnd, onPointerCancel: pressEnd, onContextMenu: (e) => {
                                             if (press.current)
                                                 e.preventDefault();
                                         }, "aria-sort": h.column.getIsSorted() === 'asc'
@@ -829,7 +847,7 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
                                                                 }, children: [_jsx(ListCollapseIcon, {}), " Close every ", subgroup?.label.toLowerCase()] }), _jsxs(DropdownMenuItem, { onSelect: () => setAll(false), children: [_jsx(ChevronsDownUpIcon, {}), " Collapse all"] })] })] })), i === 0 &&
                                                 groups &&
                                                 !(folds && !serverGroups) &&
-                                                (!serverGroups || serverGroups.onToggleAll) && (_jsx(IconButton, { icon: anyClosed ? ChevronsUpDownIcon : ChevronsDownUpIcon, size: "icon-xs", className: "-ml-2 mr-1 align-middle", label: anyClosed ? 'Expand all groups' : 'Collapse all groups', onClick: () => setAll(anyClosed) })), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "xs", className: cn('font-medium', !(i === 0 && groups) && '-mx-2'), style: { color: colorOf(domain, shown[i]) ?? undefined }, onClick: h.column.getCanSort() ? h.column.getToggleSortingHandler() : undefined, children: [shown[i] ? _jsx(FreshnessMark, { domain: domain, field: shown[i] }) : null, flexRender(h.column.columnDef.header, h.getContext()), _jsx(SortIcon, { dir: h.column.getIsSorted() })] }) }), shown[i] && (domain.groups?.length || freshnessOf(domain, shown[i])) ? (_jsxs(TooltipContent, { children: [domain.groups?.length ? _jsx("div", { children: pathOf(domain, shown[i]) }) : null, freshnessLine(domain, shown[i]) ? (_jsx("div", { children: freshnessLine(domain, shown[i]) })) : null] })) : null] })] }, h.id))), add && (_jsx(TableHead, { className: cn('w-8 pl-1', PINNED_HEAD), children: _jsx(AddColumnMenu, { add: add, fieldOpen: fieldOpen, onFieldOpen: setFieldOpen }) }))] }, hg.id))) }), _jsxs(TableBody, { children: [!rows.length && !serverGroups?.list?.length && (_jsx(TableRow, { "data-slot": "table-empty", className: "hover:bg-transparent", children: _jsx(TableCell, { colSpan: span, className: "py-6 text-center whitespace-normal text-muted-foreground", children: _jsxs("div", { className: "flex flex-col items-center gap-3", children: [emptyState ?? 'No rows match.', onClearFilter && (_jsxs(Button, { variant: "outline", size: "sm", onClick: onClearFilter, children: [_jsx(FilterXIcon, {}), "Clear filters"] }))] }) }) })), groups && groupBy
+                                                (!serverGroups || serverGroups.onToggleAll) && (_jsx(IconButton, { icon: anyClosed ? ChevronsUpDownIcon : ChevronsDownUpIcon, size: "icon-xs", className: "-ml-2 mr-1 align-middle", label: anyClosed ? 'Expand all groups' : 'Collapse all groups', onClick: () => setAll(anyClosed) })), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "xs", className: cn('font-medium', !(i === 0 && groups) && '-mx-2'), style: { color: colorOf(domain, shown[i]) ?? undefined }, onClick: h.column.getCanSort() ? h.column.getToggleSortingHandler() : undefined, children: [shown[i] ? _jsx(FreshnessMark, { domain: domain, field: shown[i] }) : null, flexRender(h.column.columnDef.header, h.getContext()), _jsx(SortIcon, { dir: h.column.getIsSorted() })] }) }), shown[i] && (domain.groups?.length || freshnessOf(domain, shown[i])) ? (_jsxs(TooltipContent, { children: [domain.groups?.length ? _jsx("div", { children: pathOf(domain, shown[i]) }) : null, freshnessLine(domain, shown[i]) ? (_jsx("div", { children: freshnessLine(domain, shown[i]) })) : null] })) : null] }), resizing && shown[i] && (_jsx(ColumnResizer, { label: shown[i].label, width: widthOf(shown[i]), onWidth: (w) => colWidths.set(h.id, w), onDone: (w) => colWidths.save(h.id, w), onReset: () => colWidths.reset(h.id) }))] }, h.id))), add && (_jsx(TableHead, { className: cn('w-8 pl-1', PINNED_HEAD), children: _jsx(AddColumnMenu, { add: add, fieldOpen: fieldOpen, onFieldOpen: setFieldOpen }) }))] }, hg.id))) }), _jsxs(TableBody, { children: [!rows.length && !serverGroups?.list?.length && (_jsx(TableRow, { "data-slot": "table-empty", className: "hover:bg-transparent", children: _jsx(TableCell, { colSpan: span, className: "py-6 text-center whitespace-normal text-muted-foreground", children: _jsxs("div", { className: "flex flex-col items-center gap-3", children: [emptyState ?? 'No rows match.', onClearFilter && (_jsxs(Button, { variant: "outline", size: "sm", onClick: onClearFilter, children: [_jsx(FilterXIcon, {}), "Clear filters"] }))] }) }) })), groups && groupBy
                                     ? groups.map(([key, members], gi) => {
                                         const open = isOpen(key, gi);
                                         return (_jsxs(Fragment, { children: [_jsxs(TableRow, { className: ROLLUP, "data-group": key, "data-rollup": "", children: [selection && (_jsx(TableCell, { "data-card": "select", className: cn('w-8 pr-0', PINNED_GROUP), children: _jsx(Checkbox, { checked: members.every((m) => selection.keys.has(keyOf(m.original)))

package/dist/notifications.d.ts

@@ -1,9 +1,14 @@
 /** The Settings ▸ Notifications section's body. */
-export declare function NotificationsSettings({ api: base, product, sender, }: {
+export declare function NotificationsSettings({ api: base, product, sender, parts, }: {
     /** The app's Notifications API base, e.g. `/api/notifications`. */
     api: string;
     /** The product's name in the copy ("Get Acme alerts by email"). */
     product: string;
     /** The address email comes from. */
     sender: string;
+    /**
+     * What to draw: the channels and the events grid (default), only the channels (where messages
+     * go) or only the events grid (what goes where), so an app can set them in two sections.
+     */
+    parts?: 'all' | 'channels' | 'events';
 }): import("react").JSX.Element;

package/dist/notifications.js

@@ -147,12 +147,22 @@ function Events({ status, api }) {
         ...status.webhooks.map((h) => ({ id: h.id, name: h.name })),
     ];
     if (!targets.length)
-        return (_jsx("p", { className: "text-sm text-muted-foreground", children: "Nothing to send to yet: turn on email or ntfy, or add a webhook, above." }));
-    const grid = { gridTemplateColumns: `minmax(12rem, 2.4fr) repeat(${targets.length}, 5.5rem)` };
-    return (_jsxs("div", { className: "grid grid-cols-1 gap-2", children: [_jsx("div", { className: "overflow-x-auto", children: _jsxs("div", { "aria-label": "Events", className: "grid min-w-max items-center", style: grid, children: [_jsxs("div", { className: "contents", children: [_jsx("span", { className: "pb-1 text-xs font-semibold tracking-wide text-muted-foreground uppercase", children: "Event" }), targets.map((t) => (_jsx("span", { className: "truncate pb-1 text-center text-xs font-semibold tracking-wide text-muted-foreground uppercase", title: t.name, children: t.name }, t.id)))] }), status.events.map((e) => (_jsxs("div", { className: "contents", children: [_jsxs("span", { className: "grid gap-0.5 border-t py-2 pr-3", children: [_jsx("span", { className: "text-sm", children: e.label }), _jsx("span", { className: "text-xs text-muted-foreground", children: e.detail })] }), targets.map((t) => (_jsx("span", { className: "self-stretch border-t py-2", children: _jsx("span", { className: "flex h-full items-center justify-center", children: _jsx(EventCell, { event: e, target: t.id, name: t.name, api: api }) }) }, t.id)))] }, e.key)))] }) }), _jsx("p", { className: "text-xs text-muted-foreground", children: "A new target starts with every event on." })] }));
+        return (_jsx("p", { className: "text-sm text-muted-foreground", children: "Nothing to send to yet: turn on email or ntfy, or add a webhook, first." }));
+    // The event column gives way first, so a phone shows the checkboxes; its detail waits in the hover.
+    const grid = { gridTemplateColumns: `minmax(7rem, 1fr) repeat(${targets.length}, 5.5rem)` };
+    // Groups in the order they first appear; events without one come first, unlabelled.
+    const groups = [];
+    for (const e of status.events) {
+        const g = groups.find((x) => x.label === e.group);
+        if (g)
+            g.events.push(e);
+        else
+            groups.push({ label: e.group, events: [e] });
+    }
+    return (_jsxs("div", { className: "grid grid-cols-1 gap-2", children: [_jsx("div", { className: "overflow-x-auto", children: _jsxs("div", { "aria-label": "Events", className: "grid min-w-max items-center", style: grid, children: [_jsxs("div", { className: "contents", children: [_jsx("span", { className: "pb-1 text-xs font-semibold tracking-wide text-muted-foreground uppercase", children: "Event" }), targets.map((t) => (_jsx("span", { className: "truncate pb-1 text-center text-xs font-semibold tracking-wide text-muted-foreground uppercase", title: t.name, children: t.name }, t.id)))] }), groups.map((g) => (_jsxs("div", { className: "contents", children: [g.label ? (_jsx("span", { className: "border-t pt-3 pb-1 text-xs font-semibold tracking-wide text-muted-foreground uppercase", style: { gridColumn: '1 / -1' }, children: g.label })) : null, g.events.map((e) => (_jsxs("div", { className: "contents", children: [_jsxs("span", { className: "flex min-w-0 items-baseline gap-2 border-t py-2 pr-3", title: `${e.label}: ${e.detail}`, children: [_jsx("span", { className: "truncate text-sm whitespace-nowrap sm:shrink-0", children: e.label }), _jsx("span", { className: "hidden truncate text-xs text-muted-foreground sm:inline", children: e.detail })] }), targets.map((t) => (_jsx("span", { className: "self-stretch border-t py-2", children: _jsx("span", { className: "flex h-full items-center justify-center", children: _jsx(EventCell, { event: e, target: t.id, name: t.name, api: api }) }) }, t.id)))] }, e.key)))] }, g.label ?? '')))] }) }), _jsx("p", { className: "text-xs text-muted-foreground", children: "A new target starts with every event on." })] }));
 }
 /** The Settings ▸ Notifications section's body. */
-export function NotificationsSettings({ api: base, product, sender, }) {
+export function NotificationsSettings({ api: base, product, sender, parts = 'all', }) {
     const api = useNotifications(base, product, sender);
     const [open, setOpen] = useState(null);
     const toggle = (id) => (o) => setOpen(o ? id : null);
@@ -161,7 +171,9 @@ export function NotificationsSettings({ api: base, product, sender, }) {
     if (api.q.isError)
         return _jsx(ErrorLine, { error: api.q.error });
     const s = api.q.data;
+    if (parts === 'events')
+        return _jsx(Events, { status: s, api: api });
     return (_jsxs("div", { className: "grid grid-cols-1 gap-6", children: [_jsxs("div", { className: "grid grid-cols-1", children: [_jsx(IntegrationRow, { name: "Email", meta: "To your sign-in address", open: open === 'email', onOpenChange: toggle('email'), badge: s.email.connected ? (_jsx(TestBadge, { test: s.email.last_test })) : (_jsx(Badge, { variant: "outline", children: "Off" })), children: _jsx(Email, { status: s.email, api: api }) }), _jsx(IntegrationRow, { name: "ntfy", meta: "Phone notifications through the ntfy app", open: open === 'ntfy', onOpenChange: toggle('ntfy'), badge: s.ntfy.connected ? (_jsx(TestBadge, { test: s.ntfy.last_test })) : (_jsx(Badge, { variant: "outline", children: "Off" })), children: _jsx(Ntfy, { status: s.ntfy, api: api }) }), _jsx(IntegrationRow, { name: "Webhooks", meta: s.webhooks.length
                             ? s.webhooks.map((h) => h.name).join(' · ')
-                            : 'Events posted to your own addresses', open: open === 'webhooks', onOpenChange: toggle('webhooks'), badge: s.webhooks.length ? (s.webhooks.some((h) => h.last_test?.ok === false) ? (_jsxs(Badge, { variant: "outline", className: "text-loss", children: [_jsx(AlertTriangleIcon, {}), "Failed"] })) : (_jsxs(Badge, { variant: "outline", children: [s.webhooks.length, " webhook", s.webhooks.length === 1 ? '' : 's'] }))) : (_jsx(Badge, { variant: "outline", children: "None" })), children: _jsx(Webhooks, { hooks: s.webhooks, api: api }) })] }), _jsxs("section", { className: "grid grid-cols-1 gap-2", children: [_jsx("h4", { className: "font-medium", children: "Events" }), _jsx(Events, { status: s, api: api })] })] }));
+                            : 'Events posted to your own addresses', open: open === 'webhooks', onOpenChange: toggle('webhooks'), badge: s.webhooks.length ? (s.webhooks.some((h) => h.last_test?.ok === false) ? (_jsxs(Badge, { variant: "outline", className: "text-loss", children: [_jsx(AlertTriangleIcon, {}), "Failed"] })) : (_jsxs(Badge, { variant: "outline", children: [s.webhooks.length, " webhook", s.webhooks.length === 1 ? '' : 's'] }))) : (_jsx(Badge, { variant: "outline", children: "None" })), children: _jsx(Webhooks, { hooks: s.webhooks, api: api }) })] }), parts === 'all' ? (_jsxs("section", { className: "grid grid-cols-1 gap-2", children: [_jsx("h4", { className: "font-medium", children: "Events" }), _jsx(Events, { status: s, api: api })] })) : null] }));
 }

package/package.json

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