@columenlabs/lumen-ui 0.1.111 → 0.1.113

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/lumen-grid.js

@@ -143,7 +143,10 @@ function Cell({ id, fixed, report, children, }) {
         return () => ro.disconnect();
     });
     const value = useMemo(() => ({ fixed }), [fixed]);
-    return (_jsx(GridCellContext.Provider, { value: value, children: _jsx("div", { ref: ref, className: "h-full [&>*:has(>[data-slot=lumen-card])]:h-full", style: { paddingBottom: GRID_GAP }, children: children }) }));
+    return (_jsx(GridCellContext.Provider, { value: value, children: _jsx("div", { ref: ref, 
+            // The cell's card fills it (a folded one keeps its header's height); nowhere else does a
+            // card take its parent's height.
+            className: "h-full [&>*:has(>[data-slot=lumen-card])]:h-full [&>*>[data-slot=lumen-card]:not([data-folded])]:h-full [&>[data-slot=lumen-card]:not([data-folded])]:h-full", style: { paddingBottom: GRID_GAP }, children: children }) }));
 }
 const gridConfig = (phone) => ({
     cols: phone ? GRID_PHONE_COLS : GRID_COLS,

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/lumen-widget.js

@@ -221,10 +221,12 @@ export function LumenWidget({ id, kind, icon, title, note, controls, tools, phon
     const below = showFilter && !inline && (!mobile || filterOpen);
     // A row of numbers with no header drops its own frame: its cards sit on the page.
     const flat = headless && styleId === 'metric:row';
-    return (_jsx(CardIdProvider, { id: id, children: _jsxs(Card, { "data-slot": "lumen-card", "data-card": id, "data-card-title": title, "data-card-kind": styleId, className: cn(
+    return (_jsx(CardIdProvider, { id: id, children: _jsxs(Card, { "data-slot": "lumen-card", "data-card": id, "data-card-title": title, "data-card-kind": styleId, "data-folded": folded || undefined, className: cn(
             // A border, not the card's ring: a ring draws outside the box, so the page's scroller
             // clipped it wherever a card touched its edge (the top row's top line).
-            'h-full gap-0 border border-foreground/10 py-0 ring-0', folded && 'h-auto', 
+            // Its height is its content's: only a grid cell (LumenGrid) stretches it to the cell, so
+            // a card in a scrolling column (Settings, a drawer) never clips rows the column could scroll to.
+            'gap-0 border border-foreground/10 py-0 ring-0', 
             // The allocation bar's tooltip reaches past its short card, over the cards below.
             styleId === 'allocation:bar' ? 'relative overflow-visible hover:z-20' : 'overflow-clip', 
             // The edit outline sits inside the card, over its pinned rows: an outer one is clipped by

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.111",
+  "version": "0.1.113",
   "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.111",
+    "@columenlabs/lumen-ui-types": "0.1.113",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",