@columenlabs/lumen-ui 0.1.123 → 0.1.125

package/dist/lumen-layout.d.ts

@@ -110,6 +110,9 @@ export interface LumenLayoutViewProps<T> {
     selection?: LumenViewProps<T>['selection'];
     /** A row click opens it (a page of its own) instead of the details drawer. */
     onOpen?: (row: T) => void;
+    /** The key of the row `onOpen` shows in a drawer of the app's own (a docked one), so the table
+     *  marks it selected; the layout's own details drawer marks its row itself. */
+    openKey?: string | null;
     /** The `rowLink` value tapped when the page opens, so linked cards start narrowed to one row
      *  (a playbook's Results open on its Default variant). */
     rowPick?: string;

package/dist/lumen-layout.js

@@ -211,12 +211,12 @@ function CardsLayout({ crumbs, actions, meta, status, intro, cards, lead, fit })
  * columns, sort and grouping over the view's rows (and formulas), its own chips and tapped row,
  * shared with the cards of its colour like any card. A Columns change saves into its layout.
  */
-function LayoutTable({ card, base, config, rows, load, state, onDetails, controls, onLayout, }) {
+function LayoutTable({ card, base, config, rows, load, state, onDetails, openKey, controls, onLayout, }) {
     const own = useMemo(() => tableConfigOf(config, { ...card, table: card.table ?? tableLayoutOf(config) }), [config, card]);
     const domain = useMemo(() => withViewFields(base, own), [base, own]);
-    return (_jsx(LumenViewCard, { id: card.id, domain: domain, config: own, rows: rows, load: load, state: state, title: card.title ?? config.name, onDetails: onDetails, controls: controls, shown: card.controls, onColumns: onLayout && ((columns) => onLayout(tableLayoutOf({ ...own, columns }))) }));
+    return (_jsx(LumenViewCard, { id: card.id, domain: domain, config: own, rows: rows, load: load, state: state, title: card.title ?? config.name, onDetails: onDetails, openKey: openKey, controls: controls, shown: card.controls, onColumns: onLayout && ((columns) => onLayout(tableLayoutOf({ ...own, columns }))) }));
 }
-function ViewLayout({ crumbs, actions, meta, status, intro, cards: extra, lead, domain: base, config, rows, onConfigChange: saveConfig, editable: canEdit, editor, onDuplicate, onDelete, onReset, load, state, tile, rowTitle, viewId, onShownRows, onSummaryRows, selection, onOpen, rowPick: initialPick, groupActions, onTokens, paging, viewTools, columnPicker, hideFilter, save: saveMode = 'document', }) {
+function ViewLayout({ crumbs, actions, meta, status, intro, cards: extra, lead, domain: base, config, rows, onConfigChange: saveConfig, editable: canEdit, editor, onDuplicate, onDelete, onReset, load, state, tile, rowTitle, viewId, onShownRows, onSummaryRows, selection, onOpen, openKey: openedKey, rowPick: initialPick, groupActions, onTokens, paging, viewTools, columnPicker, hideFilter, save: saveMode = 'document', }) {
     const onConfigChange = canEdit === false ? undefined : saveConfig;
     // The registry's join fields for the keys the rows carry (Symbol, Account), then the view's own
     // formulas and formats.
@@ -260,6 +260,7 @@ function ViewLayout({ crumbs, actions, meta, status, intro, cards: extra, lead,
     useEffect(() => onServerSort?.(heldSort ?? null), [onServerSort, heldSort]);
     const [details, setDetails] = useState(null);
     const onDetails = onOpen ?? (domain.details?.length ? setDetails : undefined);
+    const openKey = onOpen ? (openedKey ?? null) : details === null ? null : domain.rowKey(details);
     // The assistant sees the view, its data domain, its filter, how many rows show, the first of them and the
     // row open in the drawer (it saw only a row count and could not answer).
     useAssistantNote('view', {
@@ -551,7 +552,7 @@ function ViewLayout({ crumbs, actions, meta, status, intro, cards: extra, lead,
         return {
             ...place,
             wide: isTableCard(c) && c.w === GRID_COLS && c.h === undefined,
-            node: c.source ? (_jsx(SourcedCard, { card: c, name: config.name, controls: controls })) : isTableCard(c) && c.id !== viewCardId ? (_jsx(LayoutTable, { card: c, base: joins.domain, config: config, rows: c.filter.length ? filterByTokens(rows, widgetFields, c.filter) : rows, load: scope(c.id, load), state: state, onDetails: onDetails, controls: controls, onLayout: onConfigChange ? (table) => putCard({ ...c, table }) : undefined })) : isTableCard(c) ? (_jsx(LumenView, { domain: domain, config: config, rows: viewRows, total: rows.length, paging: paging, groupBy: group.groupField, pivot: pivot, subgroup: group.sub, load: scope(c.id, load), state: state, title: c.title ?? config.name, selection: selection, onDetails: rowPick.onTap ?? onDetails, tapped: rowPick.tapped, groupActions: groupActions, controls: controls, inLayout: true, tools: viewTools, filter: viewFilter, filterCount: filter.tokens.length, onClearFilter: filter.clear, strip: _jsx(ConnectOffer, { domain: domain, rows: rows, config: config, read: joins.read, cardKey: viewId ?? config.name, onConnect: onConfigChange ? connect : undefined }), link: cardLink(c.id, viewFollows, viewColor ? filter.tokens.length : 0), shown: c.controls, onColumns: onConfigChange && columnPicker !== false
+            node: c.source ? (_jsx(SourcedCard, { card: c, name: config.name, controls: controls })) : isTableCard(c) && c.id !== viewCardId ? (_jsx(LayoutTable, { card: c, base: joins.domain, config: config, rows: c.filter.length ? filterByTokens(rows, widgetFields, c.filter) : rows, load: scope(c.id, load), state: state, onDetails: onDetails, openKey: openKey, controls: controls, onLayout: onConfigChange ? (table) => putCard({ ...c, table }) : undefined })) : isTableCard(c) ? (_jsx(LumenView, { domain: domain, config: config, rows: viewRows, total: rows.length, paging: paging, groupBy: group.groupField, pivot: pivot, subgroup: group.sub, load: scope(c.id, load), state: state, title: c.title ?? config.name, selection: selection, onDetails: rowPick.onTap ?? onDetails, tapped: rowPick.tapped, openKey: openKey, groupActions: groupActions, controls: controls, inLayout: true, tools: viewTools, filter: viewFilter, filterCount: filter.tokens.length, onClearFilter: filter.clear, strip: _jsx(ConnectOffer, { domain: domain, rows: rows, config: config, read: joins.read, cardKey: viewId ?? config.name, onConnect: onConfigChange ? connect : undefined }), link: cardLink(c.id, viewFollows, viewColor ? filter.tokens.length : 0), shown: c.controls, onColumns: onConfigChange && columnPicker !== false
                     ? (columns) => onConfigChange({ ...config, columns })
                     : undefined, onAddColumn: addColumn, sort: heldSort, onSort: setHeldSort })) : (_jsx(LumenSavedWidget, { widget: c, title: cardTitle(c, config.name), domain: domain, rows: narrow(rows, followed(c.id)), link: cardLink(c.id, followed(c.id)), fields: widgetFields, merge: mergeFlat, onDetails: onDetails, load: scope(c.id, load), tiles: 'tile' in c
                     ? cardOf(c)

package/dist/lumen-trend.js

@@ -1,10 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Trend widgets: up to 4 number fields over a date field of the view's rows, rolled up per day, week,
-// month or year, drawn as a line, area, stacked area, bars over time, combo, a spark or a tracker.
+// month or year, drawn as a line, area, stacked area, bars over time, stacked bars, combo, a spark
+// or a tracker.
 // With the allocation, donut, bars and card styles they cover every Tremor visualization, drawn on
 // our own Recharts in ChartContainer. Worked out in the browser from the rows; nothing is fetched.
 import { formatBytes, isDollarFormat, } from '@columenlabs/lumen-ui-types/views';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { Area, AreaChart, Bar, BarChart, CartesianGrid, ComposedChart, Line, LineChart, XAxis, YAxis, } from 'recharts';
 import { cn } from './lib/utils.js';
 import { Headline } from './lumen-widget-charts.js';
@@ -115,6 +116,8 @@ function tick(at, bucket) {
 export function TrendBody({ style, date, values, bucket, agg, rows, read, legend = true, }) {
     const hidden = useAmountsHidden();
     const points = useMemo(() => trendPoints(rows, date, values, bucket, agg, read), [rows, date, values, bucket, agg, read]);
+    // Series hidden by a tap on the legend; the last one shown can't be hidden.
+    const [off, setOff] = useState([]);
     const first = values[0];
     if (!points.length || !first)
         return _jsx("p", { className: "py-6 text-center text-sm text-muted-foreground", children: "No dated rows to draw." });
@@ -124,6 +127,12 @@ export function TrendBody({ style, date, values, bucket, agg, rows, read, legend
         `v${i}`,
         { label: agg === 'count' ? `${f.label} (count)` : f.label, color: COLORS[i] },
     ]));
+    const keys = values.map((_, i) => `v${i}`);
+    const on = keys.filter((k) => !off.includes(k));
+    const toggle = (k) => setOff((o) => o.includes(k) ? o.filter((x) => x !== k) : o.length + 1 < keys.length ? [...o, k] : o);
+    // Stacked parts add up: the headline and tooltip read their total.
+    const stacks = (style === 'stacked' || style === 'stacked_bars') && on.length > 1;
+    const totalOf = (p) => on.reduce((t, k) => t + Number(p?.[k] ?? 0), 0);
     const last = Number(points[points.length - 1]?.v0 ?? 0);
     const start = Number(points[0]?.v0 ?? 0);
     if (style === 'tracker') {
@@ -143,17 +152,23 @@ export function TrendBody({ style, date, values, bucket, agg, rows, read, legend
         _jsx(CartesianGrid, { vertical: false, strokeDasharray: "3 3" }, "g"),
         _jsx(XAxis, { dataKey: "at", tickLine: false, axisLine: false, minTickGap: 24, tickFormatter: (v) => tick(String(v), bucket), fontSize: 11 }, "x"),
         _jsx(YAxis, { tickLine: false, axisLine: false, width: 48, tickFormatter: (v) => fmt(Number(v)), fontSize: 11 }, "y"),
-        _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { labelFormatter: (v) => tick(String(v), bucket), formatter: (v, name) => {
+        _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { labelFormatter: (v) => tick(String(v), bucket), formatter: (v, name, item) => {
                     const i = Number(String(name).slice(1));
                     const f = values[i] ?? first;
-                    return (_jsxs("span", { className: "flex w-full items-center gap-2", children: [_jsx("span", { className: "size-2 shrink-0 rounded-full", style: { background: COLORS[i] } }), _jsx("span", { className: "truncate", children: config[String(name)]?.label }), _jsx("span", { className: "num ml-auto pl-3", children: fmt(Number(v), f) })] }));
+                    return (_jsxs(_Fragment, { children: [_jsxs("span", { className: "flex w-full items-center gap-2", children: [_jsx("span", { className: "size-2 shrink-0 rounded-full", style: { background: COLORS[i] } }), _jsx("span", { className: "truncate", children: config[String(name)]?.label }), _jsx("span", { className: "num ml-auto pl-3", children: fmt(Number(v), f) })] }), stacks && String(name) === on[on.length - 1] && (_jsxs("span", { className: "flex w-full items-center gap-2 border-t pt-1.5 font-medium", children: [_jsx("span", { className: "size-2 shrink-0" }), _jsx("span", { className: "truncate", children: "Total" }), _jsx("span", { className: "num ml-auto pl-3", children: fmt(totalOf(item.payload), f) })] }))] }));
                 } }) }, "t"),
         ...(legend && values.length > 1
-            ? [_jsx(ChartLegend, { content: _jsx(ChartLegendContent, {}) }, "l")]
+            ? [_jsx(ChartLegend, { content: _jsx(ChartLegendContent, { off: off, onSeries: toggle }) }, "l")]
             : []),
     ];
-    const lead = (_jsx(Headline, { value: fmt(last), caption: `${config.v0?.label} · ${tick(String(points[points.length - 1]?.at), bucket)}` }));
+    const end = points[points.length - 1];
+    const lead0 = on[0] ?? 'v0';
+    const lead = (_jsx(Headline, { value: fmt(stacks ? totalOf(end) : Number(end?.[lead0] ?? 0)), caption: `${stacks ? 'Total' : config[lead0]?.label} · ${tick(String(end?.at), bucket)}` }));
     const box = 'aspect-auto h-56 w-full';
-    const keys = values.map((_, i) => `v${i}`);
-    return (_jsxs("div", { className: "flex flex-col", children: [lead, _jsx(ChartContainer, { config: config, className: box, children: style === 'bars' ? (_jsxs(BarChart, { data: points, margin: { left: 0, right: 4 }, children: [axes, keys.map((k) => (_jsx(Bar, { dataKey: k, fill: `var(--color-${k})`, radius: 2, isAnimationActive: false }, k)))] })) : style === 'combo' ? (_jsxs(ComposedChart, { data: points, margin: { left: 0, right: 4 }, children: [axes, keys.map((k, i) => i === 0 ? (_jsx(Bar, { dataKey: k, fill: `var(--color-${k})`, radius: 2, isAnimationActive: false }, k)) : (_jsx(Line, { dataKey: k, type: "monotone", stroke: `var(--color-${k})`, strokeWidth: 1.5, dot: false, isAnimationActive: false }, k)))] })) : style === 'area' || style === 'stacked' ? (_jsxs(AreaChart, { data: points, margin: { left: 0, right: 4 }, children: [axes, keys.map((k) => (_jsx(Area, { dataKey: k, type: "monotone", stackId: style === 'stacked' ? 'a' : undefined, stroke: `var(--color-${k})`, fill: `var(--color-${k})`, fillOpacity: 0.15, strokeWidth: 1.5, isAnimationActive: false }, k)))] })) : (_jsxs(LineChart, { data: points, margin: { left: 0, right: 4 }, children: [axes, keys.map((k) => (_jsx(Line, { dataKey: k, type: "monotone", stroke: `var(--color-${k})`, strokeWidth: 1.5, dot: false, isAnimationActive: false }, k)))] })) })] }));
+    // Room above the top gridline, so its label sits on the line rather than below it (a bar near
+    // the top read as reaching the label's value).
+    const margin = { top: 8, left: 0, right: 4 };
+    // A stack's top part rounds its data end; a 2px gap of the card's colour parts the segments.
+    const top = on[on.length - 1];
+    return (_jsxs("div", { className: "flex flex-col", children: [lead, _jsx(ChartContainer, { config: config, className: box, children: style === 'bars' || style === 'stacked_bars' ? (_jsxs(BarChart, { data: points, margin: margin, children: [axes, keys.map((k) => style === 'stacked_bars' ? (_jsx(Bar, { dataKey: k, hide: off.includes(k), stackId: "a", fill: `var(--color-${k})`, stroke: "var(--card)", strokeWidth: on.length > 1 ? 2 : 0, radius: k === top ? [2, 2, 0, 0] : 0, isAnimationActive: false }, k)) : (_jsx(Bar, { dataKey: k, hide: off.includes(k), fill: `var(--color-${k})`, radius: 2, isAnimationActive: false }, k)))] })) : style === 'combo' ? (_jsxs(ComposedChart, { data: points, margin: margin, children: [axes, keys.map((k, i) => i === 0 ? (_jsx(Bar, { dataKey: k, hide: off.includes(k), fill: `var(--color-${k})`, radius: 2, isAnimationActive: false }, k)) : (_jsx(Line, { dataKey: k, hide: off.includes(k), type: "monotone", stroke: `var(--color-${k})`, strokeWidth: 1.5, dot: false, isAnimationActive: false }, k)))] })) : style === 'area' || style === 'stacked' ? (_jsxs(AreaChart, { data: points, margin: margin, children: [axes, keys.map((k) => (_jsx(Area, { dataKey: k, hide: off.includes(k), type: "monotone", stackId: style === 'stacked' ? 'a' : undefined, stroke: `var(--color-${k})`, fill: `var(--color-${k})`, fillOpacity: 0.15, strokeWidth: 1.5, isAnimationActive: false }, k)))] })) : (_jsxs(LineChart, { data: points, margin: margin, children: [axes, keys.map((k) => (_jsx(Line, { dataKey: k, hide: off.includes(k), type: "monotone", stroke: `var(--color-${k})`, strokeWidth: 1.5, dot: false, isAnimationActive: false }, k)))] })) })] }));
 }

package/dist/lumen-view-card.d.ts

@@ -22,6 +22,8 @@ export interface LumenViewCardProps<T> {
     state?: ReactNode;
     /** A row click (pick a version, open a drawer). */
     onDetails?: (row: T) => void;
+    /** The row whose details are open, marked selected (LumenView `openKey`). */
+    openKey?: string | null;
     /** Its place in the layout: the layout's `frame` hands these over. */
     controls?: CardControls;
     /** Its saved controls (Edit widget ▸ Controls), on a saved page's table. */
@@ -32,4 +34,4 @@ export interface LumenViewCardProps<T> {
      *  header picked (`{key: 'book', value: 'Live'}`), like a code card's `publishes`. */
     publishes?: FilterToken[];
 }
-export declare function LumenViewCard<T extends RowData>({ id, domain: base, config: saved, rows, load, title, tools, note, state, onDetails, controls, shown: savedControls, onColumns, publishes, }: LumenViewCardProps<T>): import("react").JSX.Element;
+export declare function LumenViewCard<T extends RowData>({ id, domain: base, config: saved, rows, load, title, tools, note, state, onDetails, openKey, controls, shown: savedControls, onColumns, publishes, }: LumenViewCardProps<T>): import("react").JSX.Element;

package/dist/lumen-view-card.js

@@ -8,7 +8,7 @@ import { followedBy, followsText, keyFilterFields, useLinks, usePublishLinks, us
 import { LumenView } from './lumen-view.js';
 import { cardFilterFields } from './lumen-widget.js';
 import { filterFieldsOf } from './view-model.js';
-export function LumenViewCard({ id, domain: base, config: saved, rows, load, title, tools, note, state, onDetails, controls, shown: savedControls, onColumns, publishes, }) {
+export function LumenViewCard({ id, domain: base, config: saved, rows, load, title, tools, note, state, onDetails, openKey, controls, shown: savedControls, onColumns, publishes, }) {
     const [config, setConfig] = useState(saved);
     // A saved layout that changes (an edit, the assistant move) is drawn at once.
     const savedKey = JSON.stringify(saved);
@@ -43,7 +43,7 @@ export function LumenViewCard({ id, domain: base, config: saved, rows, load, tit
         linked: color ? filter.tokens.length : 0,
     };
     const on = (k) => controlOn({ kind: 'table', controls: savedControls }, k);
-    return (_jsx(LumenView, { domain: domain, config: config, rows: shown, total: rows.length, groupBy: group.groupField, pivot: group.pivot, subgroup: group.sub, load: load, state: state, onDetails: pick.onTap ?? onDetails, tapped: pick.tapped, title: title ?? config.name, inLayout: true, cardId: cardId, controls: controls, tools: tools, note: note, filter: _jsxs(_Fragment, { children: [on('filter') && (_jsx(LumenTokenizedFilter, { filter: filter, label: `Filter ${config.name}`, className: "min-w-0 flex-1", link: link || undefined })), on('group') && group.button] }), filterCount: filter.tokens.length, onClearFilter: filter.clear, link: link || undefined, shown: savedControls, onColumns: (columns) => {
+    return (_jsx(LumenView, { domain: domain, config: config, rows: shown, total: rows.length, groupBy: group.groupField, pivot: group.pivot, subgroup: group.sub, load: load, state: state, onDetails: pick.onTap ?? onDetails, tapped: pick.tapped, openKey: openKey, title: title ?? config.name, inLayout: true, cardId: cardId, controls: controls, tools: tools, note: note, filter: _jsxs(_Fragment, { children: [on('filter') && (_jsx(LumenTokenizedFilter, { filter: filter, label: `Filter ${config.name}`, className: "min-w-0 flex-1", link: link || undefined })), on('group') && group.button] }), filterCount: filter.tokens.length, onClearFilter: filter.clear, link: link || undefined, shown: savedControls, onColumns: (columns) => {
             setConfig((c) => ({ ...c, columns }));
             onColumns?.(columns);
         } }));

package/dist/lumen-view.d.ts

@@ -132,6 +132,10 @@ export interface LumenViewProps<T> {
     onDetails?: (row: T) => void;
     /** Rows picked by a tap (a linked table's row filter): a muted fill, no border. */
     tapped?: (row: T) => boolean;
+    /** The key of the row whose details are open (a docked drawer beside the table): the row reads
+     *  as selected (an accent fill and edge bar, `aria-selected`) and scrolls into view when it
+     *  shows. ↑ and ↓ on a focused row move to the next one, and open it while a row is open. */
+    openKey?: string | null;
     /** Buttons at the end of a group row's label (pin a group), given its key and rows. */
     groupActions?: (key: string, rows: T[]) => ReactNode;
     /** Its place in a LumenLayout: the layout's edit state and the card's ⋯ menu. */
@@ -184,7 +188,7 @@ export interface AddColumn {
  * and ⋯, and its own filter and Group (they narrow this table only); its body
  * the table (grouped one level, or the pivot) with the loading states.
  */
-export declare function LumenView<T extends RowData>({ domain, config, rows, total, paging: server, groupBy: pickedGroup, pivot: pickedPivot, subgroup, load: sourceLoad, state, title, selection, onDetails, tapped, groupActions, controls, inLayout: inScroller, cardId, tools, filter, filterCount, onClearFilter, strip, link, note, onColumns, onAddColumn, sort, onSort, shown, }: LumenViewProps<T>): import("react").JSX.Element;
+export declare function LumenView<T extends RowData>({ domain, config, rows, total, paging: server, groupBy: pickedGroup, pivot: pickedPivot, subgroup, load: sourceLoad, state, title, selection, onDetails, tapped, openKey, groupActions, controls, inLayout: inScroller, cardId, tools, filter, filterCount, onClearFilter, strip, link, note, onColumns, onAddColumn, sort, onSort, shown, }: LumenViewProps<T>): import("react").JSX.Element;
 /** A field's colour for its header: its topic's source (a broker green, an app brown) where
  *  the group names one, else its group's (Holding, Symbol, Account, Formulas). */
 export declare function colorOf<T>(domain: ViewDomain<T>, f: ViewField<T> | undefined): string | null;
@@ -211,6 +215,7 @@ export interface LumenTableProps<T> {
     fit?: boolean;
     onDetails?: (row: T) => void;
     tapped?: LumenViewProps<T>['tapped'];
+    openKey?: LumenViewProps<T>['openKey'];
     selection?: LumenViewProps<T>['selection'];
     groupActions?: LumenViewProps<T>['groupActions'];
     /** The view's default sort; a header click changes it for the visit. */

package/dist/lumen-view.js

@@ -224,7 +224,7 @@ async function downloadCsv({ name, columns, rows, groupBy, sort, hidden, }) {
  * and ⋯, and its own filter and Group (they narrow this table only); its body
  * the table (grouped one level, or the pivot) with the loading states.
  */
-export function LumenView({ domain, config, rows, total = rows.length, paging: server, groupBy: pickedGroup = null, pivot: pickedPivot = false, subgroup, load: sourceLoad, state, title = config.name, selection, onDetails, tapped, groupActions, controls, inLayout: inScroller = false, cardId = 'view', tools, filter, filterCount, onClearFilter, strip, link, note, onColumns, onAddColumn, sort = config.sort, onSort, shown, }) {
+export function LumenView({ domain, config, rows, total = rows.length, paging: server, groupBy: pickedGroup = null, pivot: pickedPivot = false, subgroup, load: sourceLoad, state, title = config.name, selection, onDetails, tapped, openKey, groupActions, controls, inLayout: inScroller = false, cardId = 'view', tools, filter, filterCount, onClearFilter, strip, link, note, onColumns, onAddColumn, sort = config.sort, onSort, shown, }) {
     // Its controls (Edit widget ▸ Controls): Pager, Columns and Download here.
     const on = (k) => controlOn({ kind: 'table', controls: shown }, k);
     const cell = useGridCell();
@@ -338,7 +338,7 @@ export function LumenView({ domain, config, rows, total = rows.length, paging: s
     const pager = turn ? (_jsx(LumenPager, { ...turn })) : served ? (_jsx("span", { className: "num px-2 text-xs text-muted-foreground", children: served.list ? `${served.list.length.toLocaleString()}${served.more ? '+' : ''} groups` : '' })) : (_jsx("span", { className: "num px-2 text-xs text-muted-foreground", children: count }));
     // The page footer (`pagination.footer`): under the table while there is more than one page.
     const foot = turn && pagination.footer && !state && (turn.more || turn.total > turn.size) ? (_jsx(LumenPageFooter, { total: turn.total, page: turn.page, size: turn.size, onPage: turn.onPage, more: turn.more })) : null;
-    const table = pivot && config.pivot && !state ? (_jsx(PivotTable, { domain: domain, rows: rows, pivot: config.pivot })) : (_jsx(LumenTable, { domain: domain, columns: columns, rows: state ? [] : tableRows, groupBy: groupBy, subgroup: sub, chips: chips, page: paging ? { index: page, size: pageSize } : null, inView: inLayout, fit: fit, onDetails: onDetails, tapped: tapped, selection: selection, groupActions: groupActions, sort: sort, onSort: sorted, serverSorts: server ? (server.sorts ?? []) : undefined, serverGroups: state ? null : served, emptyState: state, onClearFilter: filtered ? onClearFilter : undefined, total: config.total !== false, add: onAddColumn || onColumns
+    const table = pivot && config.pivot && !state ? (_jsx(PivotTable, { domain: domain, rows: rows, pivot: config.pivot })) : (_jsx(LumenTable, { domain: domain, columns: columns, rows: state ? [] : tableRows, groupBy: groupBy, subgroup: sub, chips: chips, page: paging ? { index: page, size: pageSize } : null, inView: inLayout, fit: fit, onDetails: onDetails, tapped: tapped, openKey: openKey, selection: selection, groupActions: groupActions, sort: sort, onSort: sorted, serverSorts: server ? (server.sorts ?? []) : undefined, serverGroups: state ? null : served, emptyState: state, onClearFilter: filtered ? onClearFilter : undefined, total: config.total !== false, add: onAddColumn || onColumns
             ? { ...onAddColumn, field: onColumns && { domain, columns, onColumns } }
             : undefined }));
     return (_jsx(LumenWidget, { id: cardId, kind: "table", style: "table", title: title, phoneTitle: false, controls: controls, tools: blank ? (tools) : (_jsxs(_Fragment, { children: [tools, compare, pager, onColumns && !onAddColumn && on('columns') && (_jsx(ColumnPicker, { domain: domain, columns: columns, onColumns: onColumns })), !pivot && on('download') && (_jsx(IconButton, { icon: DownloadIcon, label: "Download CSV", 
@@ -445,7 +445,7 @@ function sortingOf(sort, columns, serverSorts) {
         return [];
     return columns.some((f) => f.key === sort.key) ? [{ id: sort.key, desc: sort.desc }] : [];
 }
-function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null, chips = [], page = null, inView = false, fit = false, onDetails, tapped, selection, groupActions, sort, onSort, serverSorts, total = true, subgroup = null, add, serverGroups = null, emptyState, onClearFilter, }) {
+function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null, chips = [], page = null, inView = false, fit = false, onDetails, tapped, openKey = null, selection, groupActions, sort, onSort, serverSorts, total = true, subgroup = null, add, serverGroups = null, emptyState, onClearFilter, }) {
     const isMobile = useIsMobile();
     const [sorting, setSorting] = useState(() => sortingOf(sort, columns, serverSorts));
     // A saved sort patched while the table is open (the assistant's card move) applies at once.
@@ -734,8 +734,30 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
     const partRow = (p, name) => (_jsxs(TableRow, { className: cn('bg-muted/30 text-muted-foreground hover:bg-muted', onDetails && 'cursor-pointer'), onClick: onDetails ? () => onDetails(p) : undefined, children: [selection && _jsx(TableCell, {}), shown.map((f, i) => (_jsx(TableCell, { ...col(f, i === 0 && 'pl-12'), children: i === 0 ? (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(CornerDownRightIcon, { className: "size-3.5 shrink-0" }), _jsx(CappedCell, { max: capOf(f, 0), children: name
                                 ? name(p)
                                 : cellOf(f, p, chips.some((c) => c.key === f.key)) })] })) : (cellOf(f, p, chips.some((c) => c.key === f.key))) }, f.key))), add && _jsx(TableCell, {})] }, `part:${keyOf(p)}`));
+    // ↑ and ↓ step to the next data row (past part and panel rows); while a row's details are
+    // open, the step opens that row too, so the docked drawer follows the focus.
+    const step = (from, down) => {
+        let n = down ? from.nextElementSibling : from.previousElementSibling;
+        while (n && !(n instanceof HTMLElement && n.dataset.row !== undefined))
+            n = down ? n.nextElementSibling : n.previousElementSibling;
+        if (!(n instanceof HTMLElement))
+            return;
+        n.focus();
+        const next = openKey === null ? undefined : sorted.find((x) => keyOf(x.original) === n.dataset.row);
+        if (next && onDetails)
+            onDetails(next.original);
+    };
+    // The open row scrolls into view when it shows: opened by keyboard, or a page that holds it.
+    const pageKeys = sorted.map((r) => keyOf(r.original)).join('\n');
+    // biome-ignore lint/correctness/useExhaustiveDependencies: scrolls when the open row or the shown rows change, not on every render.
+    useEffect(() => {
+        if (openKey === null)
+            return;
+        const el = box.current?.querySelector(`tr[data-row="${CSS.escape(openKey)}"]`);
+        el?.scrollIntoView({ block: 'nearest' });
+    }, [openKey, pageKeys, page?.index]);
     // The whole row opens the details drawer.
-    const dataRow = (r) => (_jsxs(Fragment, { children: [_jsxs(TableRow, { "data-row": domain.rowKey(r.original), "data-state": tapped?.(r.original) ? 'selected' : undefined, className: cn('group/row', onDetails && 'cursor-pointer'), tabIndex: onDetails ? 0 : undefined, onClick: onDetails ? () => onDetails(r.original) : undefined, onKeyDown: onDetails
+    const dataRow = (r) => (_jsxs(Fragment, { children: [_jsxs(TableRow, { "data-row": domain.rowKey(r.original), "data-state": tapped?.(r.original) ? 'selected' : undefined, "aria-selected": openKey === null ? undefined : openKey === keyOf(r.original), className: cn('group/row', onDetails && 'cursor-pointer'), tabIndex: onDetails ? 0 : undefined, onClick: onDetails ? () => onDetails(r.original) : undefined, onKeyDown: onDetails
                     ? (e) => {
                         if (e.target !== e.currentTarget)
                             return;
@@ -743,6 +765,10 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
                             e.preventDefault();
                             onDetails(r.original);
                         }
+                        else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                            e.preventDefault();
+                            step(e.currentTarget, e.key === 'ArrowDown');
+                        }
                     }
                     : undefined, children: [selectCell(keyOf(r.original), keyOf(r.original)), r.getAllCells().map((c, i) => (_jsx(TableCell, { ...col(shown[i], groupBy && i === 0 && 'pl-8'), style: { background: shown[i]?.tint?.(r.original) }, children: i === 0 && nests ? (_jsxs("span", { className: "flex items-center gap-1", children: [opens(r.original) ? (chevron(keyOf(r.original), openLabel())) : (_jsx("span", { className: "-ml-1 size-6 shrink-0" })), flexRender(c.column.columnDef.cell, c.getContext())] })) : i === 0 && flat ? (flatName(r.original)) : (flexRender(c.column.columnDef.cell, c.getContext())) }, c.id))), add && _jsx(TableCell, {})] }, domain.rowKey(r.original)), openParts.has(keyOf(r.original)) &&
                 partsOf(r.original).map((p) => partRow(p, subgroup?.name)), openParts.has(keyOf(r.original)) && domain.panel ? (_jsx(TableRow, { "data-slot": "row-panel", className: "bg-muted/20 hover:bg-muted/20", children: _jsx(TableCell, { colSpan: span, className: "p-0 whitespace-normal", children: _jsx("div", { className: "sticky left-0 w-[min(56rem,calc(100vw-2rem))] max-w-full px-4 py-3 md:pl-10", children: panelOf(r.original) }) }) }, `panel:${keyOf(r.original)}`)) : null] }, domain.rowKey(r.original)));

package/dist/lumen-widget.d.ts

@@ -690,7 +690,7 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
     bucket: "day" | "month" | "week" | "year";
     agg: "count" | "last" | "mean" | "sum";
     kind: "chart";
-    style: "area" | "bars" | "combo" | "line" | "stacked";
+    style: "area" | "bars" | "combo" | "line" | "stacked" | "stacked_bars";
 } | {
     id: string;
     title: string | null;

package/dist/theme.css

@@ -118,6 +118,9 @@
   --popover: #fbfcfe;
   --popover-foreground: #121826;
   --primary: #2563eb;
+  /* The open row's fill (LumenView `openKey`). */
+  --row-open: color-mix(in oklab, var(--primary) 14%, var(--card));
+  --row-open-hover: color-mix(in oklab, var(--primary) 20%, var(--card));
   --primary-foreground: #f5f8ff;
   --secondary: #e9edf5;
   --secondary-foreground: #121826;
@@ -225,6 +228,8 @@
   --popover: #121826;
   --popover-foreground: #e6eaf2;
   --primary: #5b8cff;
+  --row-open: color-mix(in oklab, var(--primary) 24%, var(--card));
+  --row-open-hover: color-mix(in oklab, var(--primary) 30%, var(--card));
   --primary-foreground: #0b0f17;
   --secondary: #1c2435;
   --secondary-foreground: #e6eaf2;
@@ -535,6 +540,34 @@
   }
 }
 
+/* The row whose details are open (LumenView `openKey`, a docked drawer beside the table): an
+   accent fill and an accent bar on its leading edge, readable in light and dark. It scrolls clear
+   of the pinned header and the page footer when it comes into view. */
+tr[aria-selected="true"] {
+  scroll-margin-top: calc(var(--pin-top, 0px) + var(--row-h));
+  scroll-margin-bottom: var(--row-h);
+}
+tr[aria-selected="true"] > td {
+  background-color: var(--row-open);
+}
+tr[aria-selected="true"]:hover > td {
+  background-color: var(--row-open-hover);
+}
+tr[aria-selected="true"] > td:first-child {
+  box-shadow: inset 3px 0 0 var(--primary);
+}
+/* A phone's card row is one flex box: the fill and bar go on the row itself. */
+@media (max-width: 639px) {
+  table[data-cards] tr[aria-selected="true"] {
+    background-color: var(--row-open);
+    box-shadow: inset 3px 0 0 var(--primary);
+  }
+  table[data-cards] tr[aria-selected="true"] > td {
+    background-color: transparent;
+    box-shadow: none;
+  }
+}
+
 @layer utilities {
   .bg-gap-hatch {
     background: repeating-linear-gradient(135deg, var(--gap) 0 3px, var(--gap-soft) 3px 6px);

package/dist/ui/chart.d.ts

@@ -37,8 +37,12 @@ declare function ChartTooltipContent({ active, payload, className, indicator, hi
     labelKey?: string;
 } & Omit<RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>, 'accessibilityLayer'>): React.JSX.Element | null;
 declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
-declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: React.ComponentProps<'div'> & {
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, off, onSeries, }: React.ComponentProps<'div'> & {
     hideIcon?: boolean;
     nameKey?: string;
+    /** Series keys hidden by a tap on the legend; they stay listed, dimmed. */
+    off?: string[];
+    /** Given, each item is a button that shows or hides its series. */
+    onSeries?: (key: string) => void;
 } & RechartsPrimitive.DefaultLegendContentProps): React.JSX.Element | null;
 export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };

package/dist/ui/chart.js

@@ -81,7 +81,7 @@ function ChartTooltipContent({ active, payload, className, indicator = 'dot', hi
                 }) })] }));
 }
 const ChartLegend = RechartsPrimitive.Legend;
-function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey, }) {
+function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey, off, onSeries, }) {
     const { config } = useChart();
     if (!payload?.length) {
         return null;
@@ -91,8 +91,16 @@ function ChartLegendContent({ className, hideIcon = false, payload, verticalAlig
             .map((item, index) => {
             const key = `${nameKey ?? item.dataKey ?? 'value'}`;
             const itemConfig = getPayloadConfigFromPayload(config, item, key);
-            return (_jsxs("div", { title: typeof itemConfig?.label === 'string' ? itemConfig.label : undefined, className: cn('flex max-w-full min-w-0 items-center gap-1.5 sm:max-w-64 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground'), children: [itemConfig?.icon && !hideIcon ? (_jsx(itemConfig.icon, {})) : (_jsx("div", { className: "h-2 w-2 shrink-0 rounded-[2px]", style: {
-                            backgroundColor: item.color,
+            const series = String(item.dataKey ?? key);
+            const hidden = off?.includes(series) ?? false;
+            const Item = onSeries ? 'button' : 'div';
+            return (_jsxs(Item, { title: typeof itemConfig?.label === 'string' ? itemConfig.label : undefined, ...(onSeries && {
+                    type: 'button',
+                    'aria-pressed': !hidden,
+                    onClick: () => onSeries(series),
+                }), className: cn('flex max-w-full min-w-0 items-center gap-1.5 sm:max-w-64 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground', onSeries &&
+                    'min-h-6 cursor-pointer rounded-sm px-1 hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none', hidden && 'text-muted-foreground line-through'), children: [itemConfig?.icon && !hideIcon ? (_jsx(itemConfig.icon, {})) : (_jsx("div", { className: "h-2 w-2 shrink-0 rounded-[2px]", style: {
+                            backgroundColor: hidden ? 'var(--muted-foreground)' : item.color,
                         } })), _jsx("span", { className: "truncate", children: itemConfig?.label })] }, index));
         }) }));
 }

package/dist/widget-settings.d.ts

@@ -514,5 +514,5 @@ export declare const readsRows: (card: ViewWidget) => card is {
     bucket: "day" | "month" | "week" | "year";
     agg: "count" | "last" | "mean" | "sum";
     kind: "chart";
-    style: "area" | "bars" | "combo" | "line" | "stacked";
+    style: "area" | "bars" | "combo" | "line" | "stacked" | "stacked_bars";
 };

package/package.json

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