@columenlabs/lumen-ui 0.1.122 → 0.1.124

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-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/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/package.json

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