@columenlabs/lumen-ui 0.1.112 → 0.1.114

package/dist/color-dot.js

@@ -33,5 +33,11 @@ export function tintedIcon(icon, color) {
 }
 /** A value as a chip in its colour (a label): a tint behind, the colour as text, its icon first. */
 export function ColorChip({ color, icon: Icon, children, }) {
-    return (_jsxs("span", { className: "inline-flex h-5 shrink-0 items-center gap-1 rounded-sm bg-secondary px-1.5 text-xs font-medium whitespace-nowrap text-secondary-foreground", style: color ? { background: `color-mix(in oklab, ${color} 18%, transparent)`, color } : undefined, children: [Icon && _jsx(Icon, { className: "size-3 shrink-0" }), children] }));
+    return (_jsxs("span", { className: "inline-flex h-5 shrink-0 items-center gap-1 rounded-sm bg-secondary px-1.5 text-xs font-medium whitespace-nowrap text-secondary-foreground", style: color
+            ? {
+                background: `color-mix(in oklab, ${color} 18%, transparent)`,
+                // The colour pulled toward the text colour, so a light hue (yellow, sky) still reads.
+                color: `color-mix(in oklab, ${color} 55%, var(--foreground))`,
+            }
+            : undefined, children: [Icon && _jsx(Icon, { className: "size-3 shrink-0" }), children] }));
 }

package/dist/hooks/use-hover-open.d.ts

@@ -0,0 +1,23 @@
+/** Focus stays on the trigger: moving it into the pop-up, or back on close, would dismiss a
+ *  neighbour's pop-up the mouse just opened (Radix closes a pop-up on focus outside). */
+declare const keepFocus: (e: Event) => void;
+/**
+ * Open state for a status bar pop-up that opens on hover with a mouse and on tap with a finger or
+ * keyboard (a `Popover`'s own trigger). Spread `hover` on the trigger and `content` on the
+ * `PopoverContent`.
+ */
+export declare function useHoverOpen(): {
+    open: boolean;
+    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    hover: {
+        onPointerEnter: (e: React.PointerEvent) => void;
+        onPointerLeave: (e: React.PointerEvent) => void;
+    };
+    content: {
+        onPointerEnter: (e: React.PointerEvent) => void;
+        onPointerLeave: (e: React.PointerEvent) => void;
+        onOpenAutoFocus: typeof keepFocus;
+        onCloseAutoFocus: typeof keepFocus;
+    };
+};
+export {};

package/dist/hooks/use-hover-open.js

@@ -0,0 +1,32 @@
+import { useEffect, useRef, useState } from 'react';
+/** How long a pop-up stays after the mouse leaves, so it can travel from trigger to pop-up. */
+const HOVER_CLOSE_MS = 150;
+/** Focus stays on the trigger: moving it into the pop-up, or back on close, would dismiss a
+ *  neighbour's pop-up the mouse just opened (Radix closes a pop-up on focus outside). */
+const keepFocus = (e) => e.preventDefault();
+/**
+ * Open state for a status bar pop-up that opens on hover with a mouse and on tap with a finger or
+ * keyboard (a `Popover`'s own trigger). Spread `hover` on the trigger and `content` on the
+ * `PopoverContent`.
+ */
+export function useHoverOpen() {
+    const [open, setOpen] = useState(false);
+    const timer = useRef(undefined);
+    useEffect(() => () => clearTimeout(timer.current), []);
+    const hover = (on) => (e) => {
+        if (e.pointerType !== 'mouse')
+            return;
+        clearTimeout(timer.current);
+        if (on)
+            setOpen(true);
+        else
+            timer.current = setTimeout(() => setOpen(false), HOVER_CLOSE_MS);
+    };
+    const handlers = { onPointerEnter: hover(true), onPointerLeave: hover(false) };
+    return {
+        open,
+        setOpen,
+        hover: handlers,
+        content: { ...handlers, onOpenAutoFocus: keepFocus, onCloseAutoFocus: keepFocus },
+    };
+}

package/dist/index.d.ts

@@ -78,6 +78,7 @@ export { LumenShell, type LumenShellProps, type ShellUser, StatusItem, firstName
 export { apiJson } from './api-fetch.js';
 export { cn } from './lib/utils.js';
 export { type HealthProbe, StatusHealth } from './status-health.js';
+export { type StatusMessage, type StatusMessageTone, StatusMessages, groupStatusMessages, } from './status-messages.js';
 export { TimeZoneSelect } from './status.js';
 export { type AccountFacts, type JoinReaders, JoinsProvider, SourceStatusItems, YOURS_COLOR, editedCells, editedKey, frameColor, useFrameEdits, useJoins, usedJoinKeys, } from './joins.js';
 export { OriginLegend, originsOf } from './origin-legend.js';

package/dist/index.js

@@ -85,6 +85,7 @@ export { LumenShell, StatusItem, firstName, initials, maskAmount, useAmountsHidd
 export { apiJson } from './api-fetch.js';
 export { cn } from './lib/utils.js';
 export { StatusHealth } from './status-health.js';
+export { StatusMessages, groupStatusMessages, } from './status-messages.js';
 export { TimeZoneSelect } from './status.js';
 export { JoinsProvider, SourceStatusItems, YOURS_COLOR, editedCells, editedKey, frameColor, useFrameEdits, useJoins, usedJoinKeys, } from './joins.js';
 export { OriginLegend, originsOf } from './origin-legend.js';

package/dist/lumen-links.js

@@ -172,7 +172,7 @@ export function LinkPicker({ color, onPick, label, className, }) {
         onPick(c);
         setOpen(false);
     };
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-xs", className: cn('size-5 shrink-0', className), "aria-label": `${label} link colour: ${color ? LINK_NAMES[color] : 'None'}`, title: color ? `Linked: ${LINK_NAMES[color]}` : 'Link colour', children: _jsx(LinkDot, { color: color }) }) }), _jsxs(PopoverContent, { align: "start", className: "flex w-auto flex-col gap-2 p-2", children: [_jsx("p", { className: "text-xs text-muted-foreground", children: "Link colour" }), _jsxs("div", { className: "flex items-center gap-1", children: [LINK_COLORS.map((c) => (_jsx(Button, { variant: c === color ? 'secondary' : 'ghost', size: "icon-sm", "aria-label": LINK_NAMES[c], "aria-pressed": c === color, title: LINK_NAMES[c], onClick: () => pick(c), children: _jsx(LinkDot, { color: c, className: "size-3.5" }) }, c))), _jsx(Button, { variant: color === null ? 'secondary' : 'ghost', size: "sm", className: "h-8 px-2 text-xs", "aria-pressed": color === null, onClick: () => pick(null), children: "None" })] })] })] }));
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-xs", className: cn('size-5 shrink-0 max-md:size-6', className), "aria-label": `${label} link colour: ${color ? LINK_NAMES[color] : 'None'}`, title: color ? `Linked: ${LINK_NAMES[color]}` : 'Link colour', children: _jsx(LinkDot, { color: color }) }) }), _jsxs(PopoverContent, { align: "start", className: "flex w-auto flex-col gap-2 p-2", children: [_jsx("p", { className: "text-xs text-muted-foreground", children: "Link colour" }), _jsxs("div", { className: "flex items-center gap-1", children: [LINK_COLORS.map((c) => (_jsx(Button, { variant: c === color ? 'secondary' : 'ghost', size: "icon-sm", "aria-label": LINK_NAMES[c], "aria-pressed": c === color, title: LINK_NAMES[c], onClick: () => pick(c), children: _jsx(LinkDot, { color: c, className: "size-3.5" }) }, c))), _jsx(Button, { variant: color === null ? 'secondary' : 'ghost', size: "sm", className: "h-8 px-2 text-xs", "aria-pressed": color === null, onClick: () => pick(null), children: "None" })] })] })] }));
 }
 /**
  * Row-tap filtering (keyed): in a coloured card a row tap picks the

package/dist/lumen-view.js

@@ -8,7 +8,7 @@ import { bytesParts, controlOn, isCountAgg, isDollarFormat, viewPaginationSchema
 // details drawer; LumenLayout (lumen-layout.tsx) is the page around it. Rows are the ones the app
 // already loaded; everything here runs on the client.
 import { createPaginatedRowModel, createSortedRowModel, flexRender, rowPaginationFeature, rowSortingFeature, sortFns, tableFeatures, useTable, } from '@tanstack/react-table';
-import { ArrowDownIcon, ArrowUpIcon, ChartCandlestick, ChartSpline, ChevronRightIcon, ChevronsDownIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, Columns3CogIcon, CornerDownRightIcon, DownloadIcon, ListCollapseIcon, PlusIcon, SigmaIcon, UserPenIcon, } from 'lucide-react';
+import { ArrowDownIcon, ArrowDownWideNarrowIcon, ArrowUpIcon, ArrowUpNarrowWideIcon, ChartCandlestick, ChartSpline, ChevronRightIcon, ChevronsDownIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, Columns3CogIcon, CornerDownRightIcon, DownloadIcon, ListCollapseIcon, PlusIcon, SigmaIcon, UserPenIcon, } from 'lucide-react';
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ColorChip, ColorDot } from './color-dot.js';
 import { DrawerSection } from './drawer-section.js';
@@ -558,6 +558,16 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
         },
         autoResetPageIndex: false,
     });
+    // A phone's cards hide the header row, so a Sort by picker and a direction toggle stand in for
+    // the header clicks (numbers and dates start high to low, text A to Z, as a header click does).
+    const sortBy = sorting[0];
+    const sortable = shown.filter((f) => !serverSorts || serverSorts.includes(f.key));
+    const cardSort = sortable.length > 1 && (_jsxs("div", { "data-slot": "card-sort", className: "hidden items-center justify-end gap-1 px-(--cell-x) py-1 max-sm:flex", children: [_jsx(LumenSelector, { label: "Sort by", size: "sm", placeholder: "Sort by", options: sortable.map((f) => ({ value: f.key, label: f.label, icon: f.icon })), value: sortBy?.id ?? null, onChange: (id) => table.setSorting([
+                    {
+                        id,
+                        desc: sortBy?.id === id ? sortBy.desc : sortable.some((f) => f.key === id && short(f)),
+                    },
+                ]) }), sortBy && (_jsx(IconButton, { icon: sortBy.desc ? ArrowDownWideNarrowIcon : ArrowUpNarrowWideIcon, label: sortBy.desc ? 'High to low' : 'Low to high', onClick: () => table.setSorting([{ id: sortBy.id, desc: !sortBy.desc }]) }))] }));
     // Phone: a long press on a header opens the Columns picker as a sheet.
     const [fieldOpen, setFieldOpen] = useState(false);
     const press = useRef(null);
@@ -731,41 +741,41 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
     };
     const box = useRef(null);
     useFloatingHead(box, !inView);
-    return (_jsx("div", { ref: box, className: cn(inView ? IN_VIEW : 'overflow-x-auto overflow-y-hidden [--pin-top:0px]', fit && FIT), children: _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) => {
-                                        if (press.current)
-                                            e.preventDefault();
-                                    }, "aria-sort": h.column.getIsSorted() === 'asc'
-                                        ? 'ascending'
-                                        : h.column.getIsSorted() === 'desc'
-                                            ? 'descending'
-                                            : undefined, children: [i === 0 && groups && folds && !serverGroups && (_jsxs(DropdownMenu, { modal: false, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(IconButton, { icon: anyClosed || anyFoldClosed ? ChevronsUpDownIcon : ChevronsDownUpIcon, size: "icon-xs", className: "-ml-2 mr-1 align-middle", label: "Expand or collapse rows" }) }), _jsxs(DropdownMenuContent, { align: "start", className: "w-52", children: [_jsxs(DropdownMenuItem, { onSelect: () => {
-                                                                setAll(true);
-                                                                setAllParts(true);
-                                                            }, children: [_jsx(ChevronsUpDownIcon, {}), " Expand all"] }), _jsxs(DropdownMenuItem, { onSelect: () => {
-                                                                setAll(true);
-                                                                setAllParts(false);
-                                                            }, 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, { children: _jsx(TableCell, { colSpan: span, className: "py-6 text-center text-muted-foreground", children: "No rows match." }) })), 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)))
-                                                                ? true
-                                                                : members.some((m) => selection.keys.has(keyOf(m.original)))
-                                                                    ? 'indeterminate'
-                                                                    : false, onCheckedChange: (on) => toggle(members.map((m) => keyOf(m.original)), on === true), "aria-label": `Select every row of ${key}` }) })), shown.slice(lead - 1).map((f, i) => i === 0 ? (_jsx(TableCell, { colSpan: leadSpan, "data-card": "lead", className: PINNED_GROUP, children: _jsxs("span", { className: "flex max-w-(--lead-col-max) min-w-0 items-center whitespace-nowrap", children: [_jsxs(Button, { variant: "ghost", size: "xs", title: key, className: "-mx-2 min-w-0 hover:bg-transparent aria-expanded:bg-transparent", "aria-expanded": open, "aria-label": `${open ? 'Collapse' : 'Expand'} ${key}`, onClick: () => serverGroups
-                                                                        ? serverGroups.onToggle(key)
-                                                                        : setFlipped((c) => {
-                                                                            const n = new Set(c);
-                                                                            n.has(key) ? n.delete(key) : n.add(key);
-                                                                            return n;
-                                                                        }), children: [_jsx(ChevronRightIcon, { className: cn('transition-transform', open && 'rotate-90') }), _jsx(GroupMark, { field: groupBy, value: key }), _jsx("span", { className: "truncate", children: key }), _jsx("span", { className: "num shrink-0 font-normal text-muted-foreground", children: serverGroups
-                                                                                ? (served.get(key)?.n?.toLocaleString() ?? '')
-                                                                                : members.length })] }), groupActions?.(key, members.map((m) => m.original))] }) }, f.key)) : (_jsx(TableCell, { ...col(f, PINNED_GROUP), children: !serverGroups &&
-                                                            rollCell(f, members.map((m) => m.original), 'group') }, f.key))), add && _jsx(TableCell, { className: PINNED_GROUP })] }), open && (serverGroups ? servedRows(members, key) : drawn(members, key))] }, key));
-                                })
-                                : drawn(sorted, ''), serverGroups?.more && !serverGroups.pages && (_jsx(TableRow, { "data-more": true, children: _jsx(TableCell, { colSpan: span, className: "py-1", children: _jsxs(Button, { variant: "ghost", size: "xs", onClick: serverGroups.more, children: [_jsx(ChevronsDownIcon, {}), "More groups"] }) }) })), hasTotal && rows.length > 0 && (_jsxs(TableRow, { className: cn(ROLLUP, 'border-t-2'), "data-total": true, "data-rollup": "", children: [selection && _jsx(TableCell, {}), rollCells(rows).map((cell, i) => i === 0 && !(shown[0] && rollsUp(shown[0])) ? (_jsx(TableCell, { "data-card": "lead", children: "Total" }, "total")) : (cell)), add && _jsx(TableCell, {})] }))] })] }) }) }));
+    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) => {
+                                            if (press.current)
+                                                e.preventDefault();
+                                        }, "aria-sort": h.column.getIsSorted() === 'asc'
+                                            ? 'ascending'
+                                            : h.column.getIsSorted() === 'desc'
+                                                ? 'descending'
+                                                : undefined, children: [i === 0 && groups && folds && !serverGroups && (_jsxs(DropdownMenu, { modal: false, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(IconButton, { icon: anyClosed || anyFoldClosed ? ChevronsUpDownIcon : ChevronsDownUpIcon, size: "icon-xs", className: "-ml-2 mr-1 align-middle", label: "Expand or collapse rows" }) }), _jsxs(DropdownMenuContent, { align: "start", className: "w-52", children: [_jsxs(DropdownMenuItem, { onSelect: () => {
+                                                                    setAll(true);
+                                                                    setAllParts(true);
+                                                                }, children: [_jsx(ChevronsUpDownIcon, {}), " Expand all"] }), _jsxs(DropdownMenuItem, { onSelect: () => {
+                                                                    setAll(true);
+                                                                    setAllParts(false);
+                                                                }, 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, { children: _jsx(TableCell, { colSpan: span, className: "py-6 text-center text-muted-foreground", children: "No rows match." }) })), 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)))
+                                                                    ? true
+                                                                    : members.some((m) => selection.keys.has(keyOf(m.original)))
+                                                                        ? 'indeterminate'
+                                                                        : false, onCheckedChange: (on) => toggle(members.map((m) => keyOf(m.original)), on === true), "aria-label": `Select every row of ${key}` }) })), shown.slice(lead - 1).map((f, i) => i === 0 ? (_jsx(TableCell, { colSpan: leadSpan, "data-card": "lead", className: PINNED_GROUP, children: _jsxs("span", { className: "flex max-w-(--lead-col-max) min-w-0 items-center whitespace-nowrap", children: [_jsxs(Button, { variant: "ghost", size: "xs", title: key, className: "-mx-2 min-w-0 hover:bg-transparent aria-expanded:bg-transparent", "aria-expanded": open, "aria-label": `${open ? 'Collapse' : 'Expand'} ${key}`, onClick: () => serverGroups
+                                                                            ? serverGroups.onToggle(key)
+                                                                            : setFlipped((c) => {
+                                                                                const n = new Set(c);
+                                                                                n.has(key) ? n.delete(key) : n.add(key);
+                                                                                return n;
+                                                                            }), children: [_jsx(ChevronRightIcon, { className: cn('transition-transform', open && 'rotate-90') }), _jsx(GroupMark, { field: groupBy, value: key }), _jsx("span", { className: "truncate", children: key }), _jsx("span", { className: "num shrink-0 font-normal text-muted-foreground", children: serverGroups
+                                                                                    ? (served.get(key)?.n?.toLocaleString() ?? '')
+                                                                                    : members.length })] }), groupActions?.(key, members.map((m) => m.original))] }) }, f.key)) : (_jsx(TableCell, { ...col(f, PINNED_GROUP), children: !serverGroups &&
+                                                                rollCell(f, members.map((m) => m.original), 'group') }, f.key))), add && _jsx(TableCell, { className: PINNED_GROUP })] }), open && (serverGroups ? servedRows(members, key) : drawn(members, key))] }, key));
+                                    })
+                                    : drawn(sorted, ''), serverGroups?.more && !serverGroups.pages && (_jsx(TableRow, { "data-more": true, children: _jsx(TableCell, { colSpan: span, className: "py-1", children: _jsxs(Button, { variant: "ghost", size: "xs", onClick: serverGroups.more, children: [_jsx(ChevronsDownIcon, {}), "More groups"] }) }) })), hasTotal && rows.length > 0 && (_jsxs(TableRow, { className: cn(ROLLUP, 'border-t-2'), "data-total": true, "data-rollup": "", children: [selection && _jsx(TableCell, {}), rollCells(rows).map((cell, i) => i === 0 && !(shown[0] && rollsUp(shown[0])) ? (_jsx(TableCell, { "data-card": "lead", children: "Total" }, "total")) : (cell)), add && _jsx(TableCell, {})] }))] })] }) })] }));
 }
 /** One value rolled up into a rows × columns grid, with totals where the roll-up adds. */
 function PivotTable({ domain, rows, pivot, }) {

package/dist/status-health.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import type { ReactNode } from 'react';
 export interface HealthProbe {
     name: string;
     /** Up when true, down when false, not checked yet when null. */

package/dist/status-health.js

@@ -1,12 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Service health in the status bar ("consolidate into a clickable or hoverable
-// pop-up"): one chip with the worst state of every service the app checks, opening a list of each
-// service and its latency, on hover with a mouse and on tap with a finger or keyboard.
-import { useEffect, useRef, useState } from 'react';
+import { useHoverOpen } from './hooks/use-hover-open.js';
 import { cn } from './lib/utils.js';
 import { Popover, PopoverContent, PopoverTrigger } from './ui/popover.js';
-/** How long the list stays after the mouse leaves, so it can travel from chip to list. */
-const HOVER_CLOSE_MS = 150;
 /** Keeps the list off the window's edge on a narrow screen. */
 const COLLISION_PAD = 8;
 const dot = (ok) => cn('size-2 shrink-0 rounded-full', ok === null ? 'bg-muted-foreground/40' : ok ? 'bg-gain' : 'bg-destructive');
@@ -22,20 +17,9 @@ function summary(probes) {
     return { ok: true, text: 'All up' };
 }
 export function StatusHealth({ probes, checked, error, }) {
-    const [open, setOpen] = useState(false);
-    const timer = useRef(undefined);
-    useEffect(() => () => clearTimeout(timer.current), []);
-    const hover = (on) => (e) => {
-        if (e.pointerType !== 'mouse')
-            return;
-        clearTimeout(timer.current);
-        if (on)
-            setOpen(true);
-        else
-            timer.current = setTimeout(() => setOpen(false), HOVER_CLOSE_MS);
-    };
+    const { open, setOpen, hover, content: pop } = useHoverOpen();
     if (!probes.length && !error)
         return null;
     const s = error ? { ok: false, text: 'Check failed' } : summary(probes);
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsxs(PopoverTrigger, { "aria-label": `Services: ${s.text}`, className: "flex h-6 shrink-0 items-center gap-1.5 rounded-md px-1.5 hover:bg-muted hover:text-foreground", onPointerEnter: hover(true), onPointerLeave: hover(false), children: [_jsx("span", { "aria-hidden": true, className: dot(s.ok) }), "Services", _jsx("span", { className: cn('num', s.ok === false ? 'text-destructive' : 'text-foreground/80'), children: s.text })] }), _jsxs(PopoverContent, { side: "top", align: "end", collisionPadding: COLLISION_PAD, className: "w-auto min-w-56 gap-1.5 text-xs", onPointerEnter: hover(true), onPointerLeave: hover(false), onOpenAutoFocus: (e) => e.preventDefault(), children: [_jsx("ul", { "aria-label": "Services", className: "flex flex-col gap-1", children: probes.map((p) => (_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": true, className: dot(p.ok) }), _jsxs("span", { className: "flex-1", children: [p.name, p.note && _jsx("span", { className: "ml-1.5 text-muted-foreground", children: p.note })] }), _jsx("span", { className: cn('num', p.ok === false ? 'text-destructive' : 'text-foreground/80'), children: p.ok === false ? 'down' : p.ms != null ? `${p.ms} ms` : '—' })] }, p.name))) }), error && _jsx("p", { className: "text-destructive", children: error }), checked && (_jsxs("p", { className: "border-t pt-1.5 text-muted-foreground", children: ["Checked ", _jsx("span", { className: "num", children: checked })] }))] })] }));
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsxs(PopoverTrigger, { "aria-label": `Services: ${s.text}`, className: "flex h-6 shrink-0 items-center gap-1.5 rounded-md px-1.5 hover:bg-muted hover:text-foreground", ...hover, children: [_jsx("span", { "aria-hidden": true, className: dot(s.ok) }), "Services", _jsx("span", { className: cn('num', s.ok === false ? 'text-destructive' : 'text-foreground/80'), children: s.text })] }), _jsxs(PopoverContent, { side: "top", align: "end", collisionPadding: COLLISION_PAD, className: "w-auto min-w-56 gap-1.5 text-xs", ...pop, children: [_jsx("ul", { "aria-label": "Services", className: "flex flex-col gap-1", children: probes.map((p) => (_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": true, className: dot(p.ok) }), _jsxs("span", { className: "flex-1", children: [p.name, p.note && _jsx("span", { className: "ml-1.5 text-muted-foreground", children: p.note })] }), _jsx("span", { className: cn('num', p.ok === false ? 'text-destructive' : 'text-foreground/80'), children: p.ok === false ? 'down' : p.ms != null ? `${p.ms} ms` : '—' })] }, p.name))) }), error && _jsx("p", { className: "text-destructive", children: error }), checked && (_jsxs("p", { className: "border-t pt-1.5 text-muted-foreground", children: ["Checked ", _jsx("span", { className: "num", children: checked })] }))] })] }));
 }

package/dist/status-messages.d.ts

@@ -0,0 +1,25 @@
+export type StatusMessageTone = 'info' | 'success' | 'warning' | 'error';
+export interface StatusMessage {
+    text: string;
+    /** Colours the text and its dot: error red, warning amber, success green; info has no dot. */
+    tone?: StatusMessageTone;
+    /** How many times it was posted, for an app that counts repeats itself; repeats in the list add up too. */
+    count?: number;
+}
+interface Group extends Required<StatusMessage> {
+    count: number;
+}
+/** One entry per distinct message (same tone, same words), counted, most severe first. */
+export declare function groupStatusMessages(messages: readonly StatusMessage[]): Group[];
+/**
+ * The app's messages in the status bar. Each message is one line that ends in an ellipsis past
+ * `--status-message-max`, with its full text on hover or tap; a repeated message shows once with
+ * `×N`; past `max` messages (one on a phone), a `+N` chip lists the rest.
+ */
+export declare function StatusMessages({ messages, max, className, }: {
+    messages: readonly StatusMessage[];
+    /** How many messages show at once on a wider screen; the rest go behind the `+N` chip. */
+    max?: number;
+    className?: string;
+}): import("react").JSX.Element | null;
+export {};

package/dist/status-messages.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useHoverOpen } from './hooks/use-hover-open.js';
+import { useIsMobile } from './hooks/use-mobile.js';
+import { cn } from './lib/utils.js';
+import { Popover, PopoverContent, PopoverTrigger } from './ui/popover.js';
+/** Errors first, then warnings, so the message that matters most is the one in view. */
+const RANK = { error: 0, warning: 1, success: 2, info: 3 };
+const TEXT = {
+    error: 'text-destructive',
+    warning: 'text-warning',
+    success: undefined,
+    info: undefined,
+};
+const DOT = {
+    error: 'bg-destructive',
+    warning: 'bg-warning',
+    success: 'bg-gain',
+    info: undefined,
+};
+/** One entry per distinct message (same tone, same words), counted, most severe first. */
+export function groupStatusMessages(messages) {
+    const groups = new Map();
+    for (const m of messages) {
+        const text = m.text.replace(/\s+/g, ' ').trim();
+        if (!text)
+            continue;
+        const tone = m.tone ?? 'info';
+        const key = `${tone}\u0000${text}`;
+        const count = Math.max(1, m.count ?? 1);
+        const g = groups.get(key);
+        if (g)
+            g.count += count;
+        else
+            groups.set(key, { text, tone, count });
+    }
+    // Map keeps first-seen order; the sort is stable, so equal tones keep it.
+    return [...groups.values()].sort((a, b) => RANK[a.tone] - RANK[b.tone]);
+}
+const label = (g) => (g.count > 1 ? `${g.text} (×${g.count})` : g.text);
+function Dot({ tone }) {
+    const color = DOT[tone];
+    return color ? _jsx("span", { "aria-hidden": true, className: cn('size-2 shrink-0 rounded-full', color) }) : null;
+}
+/** Keeps the pop-up off the window's edge on a narrow screen. */
+const COLLISION_PAD = 8;
+/**
+ * A status bar trigger whose pop-up opens on hover with a mouse and on tap with a finger or
+ * keyboard, like the services chip, so a phone can read the full text too (a tooltip never opens
+ * on touch). Styled on its own classes only: a trigger owns `data-state`.
+ */
+function Pop({ label: name, className, children, content, }) {
+    const { open, setOpen, hover, content: pop } = useHoverOpen();
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { "aria-label": name, className: className, ...hover, children: children }), _jsx(PopoverContent, { side: "top", align: "start", collisionPadding: COLLISION_PAD, className: "w-auto max-w-sm gap-1.5 text-xs break-words", ...pop, children: content })] }));
+}
+const TRIGGER = 'flex h-6 items-center gap-1.5 rounded-md px-1.5 hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none';
+function Line({ group }) {
+    return (_jsxs(Pop, { className: cn(TRIGGER, 'min-w-0 max-w-(--status-message-max)'), content: _jsx("p", { className: TEXT[group.tone], children: label(group) }), children: [_jsx(Dot, { tone: group.tone }), _jsx("span", { className: cn('min-w-0 truncate', TEXT[group.tone]), children: group.text }), group.count > 1 && (_jsxs("span", { className: "num shrink-0 text-foreground/80", "aria-label": `${group.count} times`, children: ["\u00D7", group.count] }))] }));
+}
+/**
+ * The app's messages in the status bar. Each message is one line that ends in an ellipsis past
+ * `--status-message-max`, with its full text on hover or tap; a repeated message shows once with
+ * `×N`; past `max` messages (one on a phone), a `+N` chip lists the rest.
+ */
+export function StatusMessages({ messages, max = 2, className, }) {
+    const phone = useIsMobile();
+    const groups = groupStatusMessages(messages);
+    if (!groups.length)
+        return null;
+    const shown = groups.slice(0, phone ? 1 : Math.max(1, max));
+    const rest = groups.slice(shown.length);
+    return (_jsxs("span", { "aria-live": "polite", className: cn('flex min-w-0 items-center gap-2', className), children: [shown.map((g) => (_jsx(Line, { group: g }, `${g.tone}:${g.text}`))), rest.length > 0 && (_jsxs(Pop, { label: `${rest.length} more messages`, className: cn(TRIGGER, 'num shrink-0 text-foreground/80'), content: _jsx("ul", { className: "flex flex-col gap-1", children: rest.map((g) => (_jsxs("li", { className: "flex items-start gap-1.5", children: [_jsx("span", { className: "flex h-4 items-center", children: _jsx(Dot, { tone: g.tone }) }), _jsx("span", { className: TEXT[g.tone], children: label(g) })] }, `${g.tone}:${g.text}`))) }), children: ["+", rest.length] }))] }));
+}

package/dist/theme.css

@@ -88,6 +88,9 @@
   --shell-assistant-width: 26rem;
   --shell-header-height: 48px;
   --shell-status-height: 32px;
+  /* A status bar message ends in an ellipsis here (StatusMessages), so it fits beside the bar's
+     other items; the full text opens on hover or tap. A phone shows one message, a wider screen two. */
+  --status-message-max: 45vw;
   --tile-width: 8.5rem;
   --shell-gutter: 12px;
   --shell-section-gap: 12px;
@@ -209,6 +212,7 @@
 @media (min-width: 768px) {
   :root {
     --shell-gutter: 16px;
+    --status-message-max: min(28rem, 30vw);
   }
 }
 

package/dist/ui/alert-dialog.js

@@ -4,6 +4,7 @@ import { AlertDialog as AlertDialogPrimitive } from 'radix-ui';
 import { useOverlayOpen } from '../hooks/use-back-close.js';
 import { usePhoneScreen } from '../hooks/use-keyboard-fit.js';
 import { Button } from './button.js';
+import { escapeToPicker } from './overlay-guard.js';
 function AlertDialog({ open: given, defaultOpen, onOpenChange: changed, ...props }) {
     // Phone back closes it, as its Cancel does (useBackClose).
     const state = useOverlayOpen({ open: given, defaultOpen, onOpenChange: changed });
@@ -21,7 +22,7 @@ function AlertDialogOverlay({ className, ...props }) {
 function AlertDialogContent({ className, size = 'default', ...props }) {
     // On a phone it is a full screen pinned to the top, its footer a bar at the top (usePhoneScreen).
     const style = usePhoneScreen(props.style);
-    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, { "data-slot": "alert-dialog-content", "data-size": size, className: cn('data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-popover text-popover-foreground ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none max-md:inset-0 max-md:h-full max-md:w-full max-md:max-w-none! max-md:translate-x-0 max-md:translate-y-0 max-md:content-start max-md:overflow-y-auto max-md:rounded-none max-md:pt-[calc(1rem+env(safe-area-inset-top))] max-md:ring-0 max-md:end-fade', className), ...props, style: style })] }));
+    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, { "data-slot": "alert-dialog-content", "data-size": size, className: cn('data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-popover text-popover-foreground ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none max-md:inset-0 max-md:h-full max-md:w-full max-md:max-w-none! max-md:translate-x-0 max-md:translate-y-0 max-md:content-start max-md:overflow-y-auto max-md:rounded-none max-md:pt-[calc(1rem+env(safe-area-inset-top))] max-md:ring-0 max-md:end-fade', className), ...props, onEscapeKeyDown: escapeToPicker(props.onEscapeKeyDown), style: style })] }));
 }
 function AlertDialogHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "alert-dialog-header", className: cn('grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]', className), ...props }));

package/dist/ui/badge.js

@@ -7,13 +7,13 @@ const badgeVariants = cva('group/badge inline-flex h-5 w-fit shrink-0 items-cent
         variant: {
             default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
             secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
-            destructive: 'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
+            destructive: 'bg-destructive/10 text-[color-mix(in_oklab,var(--destructive)_80%,var(--foreground))] focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
             outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
             ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
             link: 'text-primary underline-offset-4 hover:underline',
-            success: 'bg-success/10 text-success dark:bg-success/20',
-            warning: 'bg-warning/10 text-warning dark:bg-warning/20',
-            info: 'bg-info/10 text-info dark:bg-info/20',
+            success: 'bg-success/10 text-[color-mix(in_oklab,var(--success)_80%,var(--foreground))] dark:bg-success/20',
+            warning: 'bg-warning/10 text-[color-mix(in_oklab,var(--warning)_80%,var(--foreground))] dark:bg-warning/20',
+            info: 'bg-info/10 text-[color-mix(in_oklab,var(--info)_80%,var(--foreground))] dark:bg-info/20',
         },
     },
     defaultVariants: {

package/dist/ui/dialog.js

@@ -5,6 +5,7 @@ import { Button } from './button.js';
 import { XIcon } from 'lucide-react';
 import { useOverlayOpen } from '../hooks/use-back-close.js';
 import { usePhoneScreen } from '../hooks/use-keyboard-fit.js';
+import { escapeToPicker } from './overlay-guard.js';
 function Dialog({ open: given, defaultOpen, onOpenChange: changed, ...props }) {
     // Phone back closes it (useBackClose).
     const state = useOverlayOpen({ open: given, defaultOpen, onOpenChange: changed });
@@ -25,7 +26,7 @@ function DialogOverlay({ className, ...props }) {
 function DialogContent({ className, children, showCloseButton = true, ...props }) {
     // On a phone it is a full screen pinned to the top, its footer a bar at the top (usePhoneScreen).
     const style = usePhoneScreen(props.style);
-    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", "data-close": showCloseButton || undefined, className: cn('group/dialog fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-(--dialog-pad) text-sm [--dialog-pad:--spacing(4)] text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm max-md:inset-0 max-md:h-full max-md:max-h-none max-md:w-full max-md:max-w-none max-md:translate-x-0 max-md:translate-y-0 max-md:content-start max-md:overflow-y-auto max-md:rounded-none max-md:pt-[calc(var(--dialog-pad)+env(safe-area-inset-top))] max-md:ring-0 max-md:end-fade max-md:[--end-fade:var(--dialog-pad)] data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95', className), ...props, style: style, children: [children, showCloseButton && (_jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", asChild: true, children: _jsxs(Button, { variant: "ghost", className: "absolute top-2 right-2 max-md:top-[calc(1.25rem+env(safe-area-inset-top))]", size: "icon-sm", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }) }))] })] }));
+    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", "data-close": showCloseButton || undefined, className: cn('group/dialog fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-(--dialog-pad) text-sm [--dialog-pad:--spacing(4)] text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm max-md:inset-0 max-md:h-full max-md:max-h-none max-md:w-full max-md:max-w-none max-md:translate-x-0 max-md:translate-y-0 max-md:content-start max-md:overflow-y-auto max-md:rounded-none max-md:pt-[calc(var(--dialog-pad)+env(safe-area-inset-top))] max-md:ring-0 max-md:end-fade max-md:[--end-fade:var(--dialog-pad)] data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95', className), ...props, onEscapeKeyDown: escapeToPicker(props.onEscapeKeyDown), style: style, children: [children, showCloseButton && (_jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", asChild: true, children: _jsxs(Button, { variant: "ghost", className: "absolute top-2 right-2 max-md:top-[calc(1.25rem+env(safe-area-inset-top))]", size: "icon-sm", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }) }))] })] }));
 }
 function DialogHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "dialog-header", 

package/dist/ui/hover-card.d.ts

@@ -1,6 +1,6 @@
 import { HoverCard as HoverCardPrimitive } from 'radix-ui';
 import type * as React from 'react';
 declare function HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>): React.JSX.Element;
-declare function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>): React.JSX.Element;
-declare function HoverCardContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Content>): React.JSX.Element;
+declare function HoverCardTrigger({ className, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>): React.JSX.Element;
+declare function HoverCardContent({ className, align, sideOffset, collisionPadding, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Content>): React.JSX.Element;
 export { HoverCard, HoverCardTrigger, HoverCardContent };

package/dist/ui/hover-card.js

@@ -4,10 +4,13 @@ import { cn } from '../lib/utils.js';
 function HoverCard({ ...props }) {
     return _jsx(HoverCardPrimitive.Root, { "data-slot": "hover-card", ...props });
 }
-function HoverCardTrigger({ ...props }) {
-    return _jsx(HoverCardPrimitive.Trigger, { "data-slot": "hover-card-trigger", ...props });
+// Keyboard users reach a hover card by Tab, so its trigger shows the focus ring like a button.
+function HoverCardTrigger({ className, ...props }) {
+    return (_jsx(HoverCardPrimitive.Trigger, { "data-slot": "hover-card-trigger", className: cn('rounded-sm outline-none focus-visible:ring-3 focus-visible:ring-ring/50', className), ...props }));
 }
-function HoverCardContent({ className, align = 'center', sideOffset = 4, ...props }) {
-    return (_jsx(HoverCardPrimitive.Portal, { "data-slot": "hover-card-portal", children: _jsx(HoverCardPrimitive.Content, { "data-slot": "hover-card-content", align: align, sideOffset: sideOffset, className: cn('bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 z-[70] w-72 origin-(--radix-hover-card-content-transform-origin) rounded-lg p-3 text-sm shadow-md ring-1 outline-hidden duration-100', className), ...props }) }));
+function HoverCardContent({ className, align = 'center', sideOffset = 4, collisionPadding = 8, ...props }) {
+    return (_jsx(HoverCardPrimitive.Portal, { "data-slot": "hover-card-portal", children: _jsx(HoverCardPrimitive.Content, { "data-slot": "hover-card-content", align: align, sideOffset: sideOffset, 
+            // Never flush against (or past) the screen's edge on a phone.
+            collisionPadding: collisionPadding, className: cn('bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 z-[70] w-72 origin-(--radix-hover-card-content-transform-origin) rounded-lg p-3 text-sm shadow-md ring-1 outline-hidden duration-100', className), ...props }) }));
 }
 export { HoverCard, HoverCardTrigger, HoverCardContent };

package/dist/ui/overlay-guard.d.ts

@@ -0,0 +1,2 @@
+/** The overlay's `onEscapeKeyDown`: ignores Esc while a picker is open, else runs the caller's. */
+export declare function escapeToPicker(own?: (e: KeyboardEvent) => void): (e: KeyboardEvent) => void;

package/dist/ui/overlay-guard.js

@@ -0,0 +1,14 @@
+// Esc closes the topmost thing only. A Radix overlay (Dialog, Sheet, AlertDialog) hears Esc on the
+// document before a base-ui picker open inside it (LumenSelector, Combobox), which isn't one of
+// Radix's layers, so one Esc closed both. While such a picker is open the overlay leaves Esc to it.
+const OPEN_PICKER = '[data-slot="lumen-selector"][data-open], [data-slot="combobox-content"][data-open]';
+/** The overlay's `onEscapeKeyDown`: ignores Esc while a picker is open, else runs the caller's. */
+export function escapeToPicker(own) {
+    return (e) => {
+        if (document.querySelector(OPEN_PICKER)) {
+            e.preventDefault();
+            return;
+        }
+        own?.(e);
+    };
+}

package/dist/ui/sheet.js

@@ -7,6 +7,7 @@ import * as React from 'react';
 import { useOverlayOpen } from '../hooks/use-back-close.js';
 import { useKeyboardFit } from '../hooks/use-keyboard-fit.js';
 import { useIsMobile } from '../hooks/use-mobile.js';
+import { escapeToPicker } from './overlay-guard.js';
 /** Closes the sheet from inside it (the grab handle's swipe). */
 const SheetCloseContext = React.createContext(() => undefined);
 function Sheet({ open: given, defaultOpen, onOpenChange: changed, ...props }) {
@@ -101,7 +102,7 @@ function SheetContent({ className, children, side = 'right', showCloseButton = t
     return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Content, { "data-slot": "sheet-content", "data-side": side, "data-card": card || undefined, "data-close": closable || undefined, className: cn('group/sheet bg-popover text-popover-foreground fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-(--assistant-docked,0px) data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=left]:pt-[env(safe-area-inset-top)] data-[side=right]:pt-[env(safe-area-inset-top)]', className, 
                 // After the caller's classes: a phone's bottom sheet always keeps its shape and room.
                 card &&
-                    'max-h-[calc(100dvh-env(safe-area-inset-top)-2.75rem)] rounded-t-2xl border-t-0 pt-5'), ...props, style: style, 
+                    'max-h-[calc(100dvh-env(safe-area-inset-top)-2.75rem)] rounded-t-2xl border-t-0 pt-5'), ...props, onEscapeKeyDown: escapeToPicker(props.onEscapeKeyDown), style: style, 
                 // A click or focus in the docked the assistant panel leaves the sheet open, so the person can ask
                 // about what it shows (LumenShell).
                 onInteractOutside: (e) => {

package/package.json

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