@columenlabs/lumen-ui 0.1.166 → 0.1.168

package/dist/lumen-view.js

@@ -725,7 +725,8 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
             n = down ? n.nextElementSibling : n.previousElementSibling;
         if (!(n instanceof HTMLElement))
             return;
-        n.focus();
+        n.focus({ preventScroll: true });
+        revealRow(n);
         const next = openKey === null ? undefined : sorted.find((x) => keyOf(x.original) === n.dataset.row);
         if (next && onDetails)
             onDetails(next.original);
@@ -737,7 +738,8 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
         if (openKey === null)
             return;
         const el = box.current?.querySelector(`tr[data-row="${CSS.escape(openKey)}"]`);
-        el?.scrollIntoView({ block: 'nearest' });
+        if (el)
+            revealRow(el);
     }, [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, "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
@@ -883,3 +885,17 @@ function GroupMark({ field, value }) {
         return _jsx(ColorDot, { color: color });
     return _jsx(field.icon, {});
 }
+/** Scrolls a row into view up and down only: a table wider than its box keeps its sideways scroll,
+ * so the name column never slides out of view when a row opens or the keys step. */
+function revealRow(row) {
+    const kept = [];
+    for (let e = row.parentElement; e; e = e.parentElement)
+        if (e.scrollLeft)
+            kept.push([e, e.scrollLeft]);
+    row.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+    for (let e = row.parentElement; e; e = e.parentElement) {
+        const was = kept.find(([k]) => k === e)?.[1] ?? 0;
+        if (e.scrollLeft !== was)
+            e.scrollLeft = was;
+    }
+}

package/dist/summary-cards.js

@@ -93,8 +93,8 @@ export function LumenCard({ domain, tile: t, rows, fields, drawn, loading, style
     const tone = meterTone(meter, share, bands ?? (meter ? kitBands(meter) : undefined));
     const of = target ? (_jsx(ViewValueCell, { value: target, format: figs.main.format, amount: figs.main.amount })) : null;
     if (style === 'progress_circle')
-        return (_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx(ProgressRing, { value: share, tone: tone }), _jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("span", { className: "num truncate text-xl leading-7 font-semibold", children: _jsx(FigureText, { f: figs.main }) }), _jsx("span", { className: "num truncate text-xs text-muted-foreground", children: of ? _jsxs(_Fragment, { children: ["of ", of] }) : 'Set a target in Edit widget' })] })] }));
-    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("span", { className: cn('num truncate text-2xl leading-8 font-semibold', t.sign && typeof v === 'number' && (v > 0 ? 'text-gain' : v < 0 ? 'text-loss' : '')), children: _jsx(FigureText, { f: figs.main }) }), style === 'progress_bar' && (_jsxs("div", { className: "flex flex-col gap-1 pt-1", children: [_jsx(Progress, { value: share ?? 0, className: cn('h-2', tone && TONE_BAR[tone]), "aria-label": "Progress to target" }), _jsx("span", { className: "num text-xs text-muted-foreground", children: of ? (_jsxs(_Fragment, { children: [share === null ? '—' : `${share.toFixed(0)}%`, " of ", of] })) : ('Set a target in Edit widget') })] })), figs.lines.map((l, i) => (_jsx("span", { className: "num line-clamp-2 text-xs text-muted-foreground", children: _jsx(FigureText, { f: l }) }, i)))] }));
+        return (_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx(ProgressRing, { value: share, tone: tone }), _jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("span", { className: "num truncate text-xl leading-7 font-semibold", children: _jsx(FigureText, { f: figs.main }) }), _jsx("span", { className: "truncate text-xs text-muted-foreground tabular-nums", children: of ? _jsxs(_Fragment, { children: ["of ", of] }) : 'Set a target in Edit widget' })] })] }));
+    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("span", { className: cn('num truncate text-2xl leading-8 font-semibold', t.sign && typeof v === 'number' && (v > 0 ? 'text-gain' : v < 0 ? 'text-loss' : '')), children: _jsx(FigureText, { f: figs.main }) }), style === 'progress_bar' && (_jsxs("div", { className: "flex flex-col gap-1 pt-1", children: [_jsx(Progress, { value: share ?? 0, className: cn('h-2', tone && TONE_BAR[tone]), "aria-label": "Progress to target" }), _jsx("span", { className: "text-xs text-muted-foreground tabular-nums", children: of ? (_jsxs(_Fragment, { children: [share === null ? '—' : `${share.toFixed(0)}%`, " of ", of] })) : ('Set a target in Edit widget') })] })), figs.lines.map((l, i) => (_jsx("span", { className: "line-clamp-2 text-xs text-muted-foreground tabular-nums", children: _jsx(FigureText, { f: l }) }, i)))] }));
 }
 /** A meter's bands from the app's `meterLevels` or `healthLevels`, in %. */
 const kitBands = (meter) => {

package/package.json

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