@columenlabs/lumen-ui 0.1.117 → 0.1.119

package/dist/lumen-view.js

@@ -9,7 +9,7 @@ import { bytesParts, controlOn, isCountAgg, isDollarFormat, viewPaginationSchema
 // already loaded; everything here runs on the client.
 import { createPaginatedRowModel, createSortedRowModel, flexRender, rowPaginationFeature, rowSortingFeature, sortFns, tableFeatures, useTable, } from '@tanstack/react-table';
 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 { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { ColorChip, ColorDot } from './color-dot.js';
 import { DrawerSection } from './drawer-section.js';
 import { useFloatingHead } from './floating-head.js';
@@ -384,6 +384,14 @@ function pathOf(domain, f) {
 }
 /** Every header carries its colour (`colorOf`), text and a 2px rule. */
 const ruleOf = (color) => color ? { boxShadow: `inset 0 -2px 0 ${color}` } : undefined;
+/** The width a table has to fit in: its box, or inside a page's view scroller the view's width. */
+function roomOf(el) {
+    const view = el.closest('[data-slot=view-scroll]');
+    if (!view)
+        return el.clientWidth;
+    const cs = getComputedStyle(view);
+    return view.clientWidth - Number.parseFloat(cs.paddingLeft) - Number.parseFloat(cs.paddingRight);
+}
 const alignOf = (format) => (format === 'text' ? 'text-left' : 'text-right');
 /** A column's cell classes: its alignment, and hidden on phones where the field says so. */
 /** An ISO date, alone or with a time after it: `2026-10-14`, `2026-10-14 16:17`. */
@@ -483,9 +491,21 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
     const onCard = shown.filter((f, i) => i > 0 && !f.hideOnPhone);
     const meta = (onCard.find((f) => f.key === sorting[0]?.id) ?? onCard.find(short) ?? onCard[0])
         ?.key;
+    // Too narrow for every column (a docked drawer beside it, a small window), the table drops its
+    // lowest-`priority` columns, right to left, until it fits, instead of scrolling sideways; never
+    // its name or sorted column. More room brings them back. A phone keeps its own cards.
+    const rank = (f) => (f.priority ?? 0) - (f.hideOnPhone ? 1 : 0);
+    const dropOrder = shown
+        .slice(1)
+        .map((f, i) => ({ f, i }))
+        .filter(({ f }) => f.key !== sorting[0]?.id)
+        .sort((a, b) => rank(a.f) - rank(b.f) || b.i - a.i)
+        .map(({ f }) => f.key);
+    const [drop, setDrop] = useState(0);
+    const dropped = new Set(isMobile || fit ? [] : dropOrder.slice(0, drop));
     const cardOf = (f) => f === shown[0] ? 'lead' : f.key === meta ? 'meta' : short(f) ? 'num' : 'text';
     const col = (f, ...more) => ({
-        ...colProps(f, ...more),
+        ...colProps(f, ...more, f && dropped.has(f.key) && 'hidden'),
         'data-card': f ? cardOf(f) : undefined,
         'data-card-unit': f?.cardUnit,
     });
@@ -778,6 +798,39 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
     };
     const box = useRef(null);
     useFloatingHead(box, !inView);
+    // Before paint: one more column drops while the table is wider than its room: its box, and in a
+    // page's view scroller the view's width (theme.css `--view-w`).
+    useLayoutEffect(() => {
+        const el = box.current;
+        const t = el?.querySelector('table');
+        if (!el || !t || isMobile || fit || drop >= dropOrder.length)
+            return;
+        if (t.offsetWidth > roomOf(el) + 1)
+            setDrop((d) => d + 1);
+    });
+    // Every column comes back to be measured again on a new set of columns or more room.
+    const dropKey = dropOrder.join('\u0000');
+    const lastDropKey = useRef(dropKey);
+    if (lastDropKey.current !== dropKey) {
+        lastDropKey.current = dropKey;
+        if (drop)
+            setDrop(0);
+    }
+    useEffect(() => {
+        const el = box.current;
+        if (!el)
+            return;
+        const view = el.closest('[data-slot=view-scroll]');
+        let room = roomOf(el);
+        const watch = new ResizeObserver(() => {
+            const now = roomOf(el);
+            if (now > room + 1)
+                setDrop(0);
+            room = now;
+        });
+        watch.observe(view ?? el);
+        return () => watch.disconnect();
+    }, []);
     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();

package/dist/lumen-widget-charts.js

@@ -43,7 +43,7 @@ export function StackedColumns({ rows, x, parts, label, height = 220, tick = Str
     // The highest part with a value carries the column's rounded cap.
     const top = (r) => parts.findLast((p) => Number(r[p.key]) > 0)?.key;
     const ticks = niceTicks(Math.max(0, ...rows.map(total)));
-    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(ChartContainer, { config: config, role: "img", "aria-label": label, className: "aspect-auto w-full", style: { height }, children: _jsxs(BarChart, { data: rows, margin: { left: 0, right: 0, top: 8, bottom: 0 }, children: [_jsx(CartesianGrid, { vertical: false, strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: x, tickLine: false, axisLine: false, tickMargin: 8, minTickGap: 12, tickFormatter: (v) => tick(String(v)) }), _jsx(YAxis, { tickLine: false, axisLine: false, domain: [0, ticks.at(-1) ?? 'auto'], ticks: ticks, width: axisWidth(ticks.map(fmt)), tickFormatter: (v) => fmt(Number(v)) }), _jsx(ChartTooltip, { cursor: { fill: 'var(--muted)', opacity: 0.5 }, content: _jsx(ChartTooltipContent, { labelFormatter: (_, payload) => {
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(ChartContainer, { config: config, role: "img", "aria-label": label, className: "aspect-auto w-full", style: { height }, children: _jsxs(BarChart, { data: rows, margin: { left: 0, right: 0, top: 8, bottom: 0 }, children: [_jsx(CartesianGrid, { vertical: false, strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: x, tickLine: false, axisLine: false, tickMargin: 8, minTickGap: 12, tickFormatter: (v) => tick(String(v)) }), _jsx(YAxis, { tickLine: false, axisLine: false, domain: [0, ticks.at(-1) ?? 'auto'], ticks: ticks, width: axisWidth(ticks.map(fmt)), tick: axisTick(fmt) }), _jsx(ChartTooltip, { cursor: { fill: 'var(--muted)', opacity: 0.5 }, content: _jsx(ChartTooltipContent, { labelFormatter: (_, payload) => {
                                     const r = payload?.[0]?.payload;
                                     return r ? (_jsxs("span", { className: "flex w-full gap-3", children: [_jsx("span", { children: tick(String(r[x])) }), _jsx("span", { className: "num ml-auto", children: fmt(total(r)) })] })) : null;
                                 }, formatter: (v, name) => (_jsxs("span", { className: "flex w-full items-center gap-2", children: [_jsx("span", { className: "size-2 shrink-0 rounded-sm", style: { background: config[String(name)]?.color } }), _jsx("span", { children: config[String(name)]?.label }), _jsx("span", { className: "num ml-auto pl-3", children: fmt(Number(v)) })] })) }) }), parts.map((p) => (_jsx(Bar, { dataKey: p.key, stackId: "a", fill: p.fill, isAnimationActive: false, shape: (b) => (_jsx(Rectangle, { ...b, radius: top(b.payload) === p.key ? CAP : 0 })) }, p.key)))] }) }), legend && (_jsx("ul", { className: "flex flex-wrap justify-center gap-x-3 gap-y-1 text-xs text-muted-foreground", children: parts.map((p) => (_jsxs("li", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "size-2 rounded-sm", style: { background: p.fill } }), p.name] }, p.key))) }))] }));
@@ -59,7 +59,7 @@ export function TimeLines({ rows, x, lines, label, height = 220, tick = String,
     const left = axis(false);
     const hasRight = lines.some((l) => l.right);
     const right = hasRight ? axis(true) : [];
-    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(ChartContainer, { config: config, role: "img", "aria-label": label, className: "aspect-auto w-full", style: { height }, children: _jsxs(LineChart, { data: rows, margin: { left: 0, right: 0, top: 8, bottom: 0 }, children: [_jsx(CartesianGrid, { vertical: false, strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: x, tickLine: false, axisLine: false, tickMargin: 8, minTickGap: 12, tickFormatter: (v) => tick(String(v)) }), _jsx(YAxis, { yAxisId: "left", tickLine: false, axisLine: false, domain: [0, left.at(-1) ?? 'auto'], ticks: left, width: axisWidth(left.map(fmt)), tickFormatter: (v) => fmt(Number(v)) }), hasRight && (_jsx(YAxis, { yAxisId: "right", orientation: "right", tickLine: false, axisLine: false, domain: [0, right.at(-1) ?? 'auto'], ticks: right, width: axisWidth(right.map(fmt)), tickFormatter: (v) => fmt(Number(v)) })), _jsx(ChartTooltip, { cursor: { stroke: 'var(--border)' }, content: _jsx(ChartTooltipContent, { labelFormatter: (_, payload) => {
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(ChartContainer, { config: config, role: "img", "aria-label": label, className: "aspect-auto w-full", style: { height }, children: _jsxs(LineChart, { data: rows, margin: { left: 0, right: 0, top: 8, bottom: 0 }, children: [_jsx(CartesianGrid, { vertical: false, strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: x, tickLine: false, axisLine: false, tickMargin: 8, minTickGap: 12, tickFormatter: (v) => tick(String(v)) }), _jsx(YAxis, { yAxisId: "left", tickLine: false, axisLine: false, domain: [0, left.at(-1) ?? 'auto'], ticks: left, width: axisWidth(left.map(fmt)), tick: axisTick(fmt) }), hasRight && (_jsx(YAxis, { yAxisId: "right", orientation: "right", tickLine: false, axisLine: false, domain: [0, right.at(-1) ?? 'auto'], ticks: right, width: axisWidth(right.map(fmt)), tick: axisTick(fmt) })), _jsx(ChartTooltip, { cursor: { stroke: 'var(--border)' }, content: _jsx(ChartTooltipContent, { labelFormatter: (_, payload) => {
                                     const r = payload?.[0]?.payload;
                                     return r ? tick(String(r[x])) : null;
                                 }, formatter: (v, name) => (_jsxs("span", { className: "flex w-full items-center gap-2", children: [_jsx("span", { className: "size-2 shrink-0 rounded-sm", style: { background: config[String(name)]?.color } }), _jsx("span", { children: config[String(name)]?.label }), _jsx("span", { className: "num ml-auto pl-3", children: fmt(Number(v)) })] })) }) }), lines.map((l) => (_jsx(Line, { dataKey: l.key, yAxisId: l.right ? 'right' : 'left', type: "monotone", stroke: l.fill, strokeWidth: 2, dot: false, connectNulls: false, isAnimationActive: false }, l.key)))] }) }), legend && (_jsx("ul", { className: "flex flex-wrap justify-center gap-x-3 gap-y-1 text-xs text-muted-foreground", children: lines.map((l) => (_jsxs("li", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "h-0.5 w-3 rounded-full", style: { background: l.fill } }), l.name] }, l.key))) }))] }));
@@ -124,5 +124,10 @@ function niceTicks(max, count = 4) {
     const n = Math.ceil(max / step - 1e-9);
     return Array.from({ length: n + 1 }, (_, i) => Math.round(i * step * 1e6) / 1e6);
 }
-/** Room for the widest tick label (about 7px a character at text-xs), so none is clipped. */
-const axisWidth = (labels) => Math.max(24, Math.max(0, ...labels.map((l) => l.length)) * 7 + 8);
+/** Room for the widest tick label (about 7.5px a character at text-xs), so none is clipped. */
+const axisWidth = (labels) => Math.max(24, Math.max(0, ...labels.map((l) => l.length)) * 7.5 + 8);
+/**
+ * A value axis's tick on one line: the chart's own text breaks a label at its space (`300` over
+ * `GB`) when the axis is a hair too narrow, and the top one then runs off the chart.
+ */
+const axisTick = (fmt) => ({ x, y, payload, textAnchor }) => (_jsx("text", { x: x, y: y, dy: "0.355em", textAnchor: textAnchor ?? 'end', className: "fill-muted-foreground", style: { whiteSpace: 'pre' }, children: fmt(Number(payload.value)) }));

package/dist/view-model.d.ts

@@ -139,6 +139,12 @@ export interface ViewField<T> {
     maxWidth?: string | false;
     /** Left out on phones, where the table has no room for it (a returns table's longer windows). */
     hideOnPhone?: boolean;
+    /**
+     * Where a table has too little room (a docked drawer beside it), its columns drop until it fits:
+     * the lowest `priority` first (default 0; `hideOnPhone` ones count one lower), right to left.
+     * The name and the sorted column never drop.
+     */
+    priority?: number;
     /** Left out of a table when no row in it has a value (none, empty or 0): an Attachments column on mail with none. */
     hideEmpty?: boolean;
     /** On a phone card, where no header names it: the word after a bare count (`msgs`, so `5,861 msgs`). */

package/package.json

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