@columenlabs/lumen-ui 0.1.99 → 0.1.100

package/dist/details-table.js

@@ -4,7 +4,7 @@ import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, Table
 export function DetailsTable({ head, rows, foot, selected, onSelect }) {
     const marked = head.findIndex((h) => h.grow);
     const grow = marked >= 0 ? marked : head.length - 1;
-    const cell = (i) => cn('num', head[i]?.right && 'text-right', i !== grow && 'w-px', head[i]?.hideOnPhone && 'max-md:hidden');
+    const cell = (i) => cn(head[i]?.right && 'num text-right', i !== grow && 'w-px', head[i]?.hideOnPhone && 'max-md:hidden');
     return (_jsx("div", { className: "-mx-1 overflow-x-auto overflow-y-hidden rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: head.map((h, i) => (_jsx(TableHead, { className: cn(h.right && 'text-right', i !== grow && 'w-px', h.hideOnPhone && 'max-md:hidden'), children: h.label }, h.label))) }) }), _jsx(TableBody, { children: rows.map((r) => (_jsx(TableRow, { "data-state": r.key === selected ? 'selected' : undefined, "aria-current": r.key === selected || undefined, tabIndex: onSelect ? 0 : undefined, className: cn(onSelect &&
                             'cursor-pointer focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring'), onClick: onSelect && (() => onSelect(r.key)), onKeyDown: onSelect &&
                             ((e) => {

package/dist/lumen-echart.js

@@ -99,6 +99,28 @@ export function axisStyle(t) {
         nameTextStyle: { color: t.muted, fontSize: 11 },
     };
 }
+/** `over` laid on `under`, plain objects merged key by key: what the chart sets wins. */
+function layer(under, over) {
+    const plain = (v) => !!v && typeof v === 'object' && Object.getPrototypeOf(v) === Object.prototype;
+    if (!plain(under) || !plain(over))
+        return over === undefined ? under : over;
+    const out = { ...under };
+    for (const [k, v] of Object.entries(over))
+        out[k] = layer(under[k], v);
+    return out;
+}
+/** `option` with its axes in the theme's colours under whatever the chart sets itself, so a chart
+ *  that names no axis colours still draws its grid lines faint in dark mode too. */
+function themedAxes(option, t) {
+    const style = axisStyle(t);
+    const theme = (a) => Array.isArray(a) ? a.map((x) => layer(style, x)) : layer(style, a);
+    const o = option;
+    return {
+        ...option,
+        ...(o.xAxis ? { xAxis: theme(o.xAxis) } : {}),
+        ...(o.yAxis ? { yAxis: theme(o.yAxis) } : {}),
+    };
+}
 export function LumenEChart({ option, height = 260, on, className, label, }) {
     const box = useRef(null);
     const chart = useRef(null);
@@ -132,12 +154,11 @@ export function LumenEChart({ option, height = 260, on, className, label, }) {
     const tokens = useChartTokens();
     // An app re-rendering hands a new but equal option (a hover, a refetch): drawing it again
     // replays the line's entry animation, so the chart blanks under the tooltip. Only a change redraws.
-    // biome-ignore lint/correctness/useExhaustiveDependencies: tokens change when the theme flips.
     useEffect(() => {
         const c = chart.current;
         if (!ready || !c)
             return;
-        const next = resolveVars(option);
+        const next = resolveVars(themedAxes(option, tokens));
         const key = JSON.stringify(next);
         if (key === drawn.current)
             return;

package/dist/lumen-grid.js

@@ -21,6 +21,11 @@ const GUESS = GRID_BLOCK_ROWS * 2;
 const GridCellContext = createContext(null);
 export const useGridCell = () => useContext(GridCellContext);
 const CARD = '[data-slot=lumen-card]';
+/** What a card's part adds to its height: nothing when it floats (a card's corner actions). */
+const flowHeight = (el) => {
+    const at = getComputedStyle(el).position;
+    return at === 'absolute' || at === 'fixed' ? 0 : el.offsetHeight;
+};
 const rowsOf = (px) => Math.max(2, Math.ceil((px + GRID_GAP) / GRID_ROW_PX));
 const byPlace = (a, b) => a.y - b.y || a.x - b.x;
 /** Cards placed where they say and, in order after them, the ones that do not, row by row. */
@@ -120,7 +125,7 @@ function Cell({ id, fixed, report, children, }) {
             // filter, body and footer, plus whatever else the wrapper holds.
             const card = el.matches(CARD) ? el : el.querySelector(`:scope > ${CARD}`);
             const px = card
-                ? [...card.children].reduce((s, c) => s + c.offsetHeight, 0) +
+                ? [...card.children].reduce((s, c) => s + flowHeight(c), 0) +
                     (card.offsetHeight - card.clientHeight) +
                     (el.offsetHeight - card.offsetHeight)
                 : el.offsetHeight;

package/dist/page.js

@@ -31,7 +31,7 @@ export function PageHeader({ crumbs, actions, layout, meta, status }) {
         label: current ? crumbName(current) : '',
         data: { page: crumbs.map(crumbName).filter(Boolean).join(' › ') },
     });
-    return (_jsxs(_Fragment, { children: [_jsxs("header", { "data-slot": "shell-header", className: "sticky top-0 z-20 flex h-(--shell-header-height) shrink-0 items-center gap-2 overflow-hidden border-b bg-background px-(--shell-gutter)", children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(SidebarTrigger, { className: "-ml-1" }) }), _jsx(TooltipContent, { children: "Toggle sidebar" })] }), _jsx(Separator, { orientation: "vertical", className: "hidden data-vertical:h-4 data-vertical:self-center md:block" }), parent && (_jsx(IconButton, { icon: ChevronLeftIcon, label: `Back to ${crumbName(parent)}`, className: "md:hidden", onClick: () => router.navigate({ to: parent.to }) })), !isMobile && (_jsx(Breadcrumb, { className: "min-w-0", children: _jsx(BreadcrumbList, { className: "flex-nowrap", children: crumbs.map((c, i) => (_jsxs(Fragment, { children: [i > 0 && _jsx(BreadcrumbSeparator, {}), _jsx(BreadcrumbItem, { className: "min-w-0", children: c.to && i < crumbs.length - 1 ? (_jsx(BreadcrumbLink, { asChild: true, children: _jsx(Link, { to: c.to, children: c.label }) })) : i === crumbs.length - 1 ? (_jsx(BreadcrumbPage, { className: "truncate", children: _jsx("h1", { className: "flex min-w-0 items-center gap-2 truncate font-semibold", children: c.label }) })) : (_jsx("span", { className: "truncate", children: c.label })) })] }, `${i}-${crumbName(c)}`))) }) })), isMobile && (_jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "flex min-w-0 items-center gap-2 truncate text-sm leading-tight font-semibold", children: current?.label }), meta && (_jsx("div", { className: "flex items-center gap-1.5 truncate text-[11px] leading-tight text-muted-foreground", children: meta }))] })), meta && !isMobile && (_jsx("div", { className: "ml-1 hidden min-w-0 shrink items-center gap-2 truncate border-l pl-3 text-xs text-muted-foreground md:flex", children: meta })), _jsxs("div", { className: cn('ml-auto flex shrink-0 items-center gap-0.5', 
+    return (_jsxs(_Fragment, { children: [_jsxs("header", { "data-slot": "shell-header", className: "sticky top-0 z-20 flex h-(--shell-header-height) shrink-0 items-center gap-2 overflow-hidden border-b bg-background px-(--shell-gutter)", children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(SidebarTrigger, { className: "-ml-1" }) }), _jsx(TooltipContent, { children: "Toggle sidebar" })] }), _jsx(Separator, { orientation: "vertical", className: "hidden data-vertical:h-4 data-vertical:self-center md:block" }), parent && (_jsx(IconButton, { icon: ChevronLeftIcon, label: `Back to ${crumbName(parent)}`, className: "md:hidden", onClick: () => router.navigate({ to: parent.to }) })), !isMobile && (_jsx(Breadcrumb, { className: "min-w-0", children: _jsx(BreadcrumbList, { className: "flex-nowrap", children: crumbs.map((c, i) => (_jsxs(Fragment, { children: [i > 0 && _jsx(BreadcrumbSeparator, {}), _jsx(BreadcrumbItem, { className: "min-w-0", children: c.to && i < crumbs.length - 1 ? (_jsx(BreadcrumbLink, { asChild: true, children: _jsx(Link, { to: c.to, children: c.label }) })) : i === crumbs.length - 1 ? (_jsx(BreadcrumbPage, { className: "truncate", children: _jsx("h1", { className: "flex min-w-0 items-center gap-2 truncate font-semibold", children: c.label }) })) : (_jsx("span", { className: "truncate", children: c.label })) })] }, `${i}-${crumbName(c)}`))) }) })), isMobile && (_jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "flex min-w-0 items-center gap-2 truncate text-sm leading-tight font-semibold", children: current?.label }), meta && (_jsx("div", { className: "flex min-w-0 items-center gap-1.5 text-[11px] leading-tight text-muted-foreground", children: _jsx("span", { className: "truncate", children: meta }) }))] })), meta && !isMobile && (_jsx("div", { className: "ml-1 hidden min-w-0 shrink items-center gap-2 truncate border-l pl-3 text-xs text-muted-foreground md:flex", children: meta })), _jsxs("div", { className: cn('ml-auto flex shrink-0 items-center gap-0.5', 
                         // Phone: a page's text buttons show as icons too; their text stays as the accessible name.
                         isMobile &&
                             '[&_[data-slot=button]]:size-8 [&_[data-slot=button]]:gap-0 [&_[data-slot=button]]:px-0 [&_[data-slot=button]]:text-[0px]'), children: [actions && (_jsxs(_Fragment, { children: [_jsx("div", { "data-slot": "shell-page-actions", className: "flex items-center gap-0.5", children: actions }), _jsx(Separator, { orientation: "vertical", className: "mx-2 data-vertical:h-5 data-vertical:self-center" })] })), _jsxs("div", { "data-slot": "shell-actions", className: "flex items-center gap-0.5", children: [layout, _jsx(LumenFinderButton, {}), hideAmounts && (_jsx(IconButton, { icon: hidden ? EyeOffIcon : EyeIcon, label: hidden ? 'Show amounts' : 'Hide amounts', "aria-pressed": hidden, onClick: () => setPref('hideAmounts', !hidden) })), refresh && (_jsx(IconButton, { icon: RefreshCwIcon, busy: refreshing, label: "Refresh (skip cache)", disabled: refreshing, onClick: () => void refresh() })), headerActions] })] })] }), status && statusSlot && createPortal(status, statusSlot)] }));

package/dist/shell.js

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

package/dist/summary-cards.js

@@ -131,7 +131,9 @@ export function SummaryTiles({ domain, tiles, rows, fields, tile, loading, }) {
     const grid = 'grid grid-cols-2 gap-(--shell-section-gap) md:auto-cols-fr md:grid-flow-col lg:*:*:w-auto';
     if (loading)
         return (_jsx("div", { "data-slot": "view-tiles", "aria-busy": "true", className: grid, children: shown.map((t) => (_jsx(Skeleton, { className: "h-[4.5rem] w-full rounded-xl" }, t.key))) }));
-    return (_jsx("div", { "data-slot": "view-tiles", className: cn(grid, '[&>*:last-child:nth-child(odd)]:col-span-2 md:[&>*:last-child:nth-child(odd)]:col-span-1'), children: shown.map((t) => (_jsx("div", { className: "contents", children: isOwnTile(t) ? (_jsx(OwnTile, { domain: domain, tile: t, rows: rows, fields: fields })) : (tile?.(t.key, rows)) }, t.key))) }));
+    return (_jsx("div", { "data-slot": "view-tiles", className: cn(grid, 
+        // Each tile sits in a `contents` holder, so the odd last one's span goes on what it holds.
+        '[&>*:last-child:nth-child(odd)>*]:col-span-2 md:[&>*:last-child:nth-child(odd)>*]:col-span-1'), children: shown.map((t) => (_jsx("div", { className: "contents", children: isOwnTile(t) ? (_jsx(OwnTile, { domain: domain, tile: t, rows: rows, fields: fields })) : (tile?.(t.key, rows)) }, t.key))) }));
 }
 // ── Edit ───────────────────────────────────────────────────────────────────────────────────────
 const dragOptions = { activationConstraint: { distance: 4 } };

package/dist/tile.js

@@ -30,7 +30,7 @@ export function TileRow({ children, className, fill, ...props }) {
 }
 export function TileToggleGroup({ options, selected, onSelect, label, className, fill, }) {
     return (_jsx(Card, { size: "sm", className: cn('min-w-0 gap-0 bg-border py-0 lg:w-fit lg:flex-initial', fill &&
-            'lg:w-full lg:*:data-[slot=toggle-group]:w-full lg:**:data-[slot=toggle-group-item]:flex-1', className), children: _jsx(ToggleGroup, { type: "single", spacing: 0, value: selected, onValueChange: (v) => v && onSelect(v), "aria-label": label, className: "grid w-full grid-cols-[repeat(auto-fit,minmax(6.5rem,1fr))] gap-px lg:flex lg:w-fit", children: options.map((o) => (_jsx(ToggleGroupItem, { value: o.id, "aria-label": o.label, className: "h-auto min-w-0 flex-col lg:w-(--tile-width) lg:shrink items-start justify-start gap-0.5 rounded-none! bg-card px-3 py-3 text-left font-normal data-[state=on]:bg-primary/5 data-[state=on]:shadow-[inset_0_-2px_0_var(--primary)]", children: _jsx(TileBody, { label: o.label, value: o.value, caption: o.caption, spark: o.spark, sparkColor: o.sparkColor }) }, o.id))) }) }));
+            'lg:w-full lg:*:data-[slot=toggle-group]:w-full lg:**:data-[slot=toggle-group-item]:flex-1', className), children: _jsx(ToggleGroup, { type: "single", spacing: 0, value: selected, onValueChange: (v) => v && onSelect(v), "aria-label": label, className: "grid w-full grid-cols-2 gap-px max-sm:[&>*:last-child:nth-child(odd)]:col-span-2 sm:grid-cols-[repeat(auto-fit,minmax(6.5rem,1fr))] lg:flex lg:w-fit", children: options.map((o) => (_jsx(ToggleGroupItem, { value: o.id, "aria-label": o.label, className: "h-auto min-w-0 flex-col lg:w-(--tile-width) lg:shrink items-start justify-start gap-0.5 rounded-none! bg-card px-3 py-3 text-left font-normal data-[state=on]:bg-primary/5 data-[state=on]:shadow-[inset_0_-2px_0_var(--primary)]", children: _jsx(TileBody, { label: o.label, value: o.value, caption: o.caption, spark: o.spark, sparkColor: o.sparkColor }) }, o.id))) }) }));
 }
 /** A compact tile: a small caps label over one short value (a quote strip's IV, expiry and move). */
 export function TileChip({ label, value }) {

package/package.json

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