@columenlabs/lumen-ui 0.1.116 → 0.1.118

package/dist/index.d.ts

@@ -55,7 +55,7 @@ export { ConnectionBadge, type ConnectionField, type ConnectionLine, ConnectionL
 export { LumenChatgptSignin, type LumenChatgptSigninProps } from './chatgpt-signin.js';
 export { LumenExpandList, LumenExpandRow } from './expand-list.js';
 export { type Fact, FactList, type FactListProps } from './fact-list.js';
-export { LumenPager } from './pager.js';
+export { LumenPageFooter, LumenPager, pageList } from './pager.js';
 export { clearPersistedQueries, createDeskQueryClient, type PersistOptions } from './query-client.js';
 export { type ClientPoint, type ClientPointKind, type LumenTelemetryOptions, apiRoute, reportClient, reportClientError, reportFailedFetch, stackFingerprint, useLumenTelemetry, } from './telemetry.js';
 export { refreshHeaders, withRefreshToken } from './refresh.js';

package/dist/index.js

@@ -62,7 +62,7 @@ export { ConnectionBadge, ConnectionLogo, LumenConnection, activeWay, connection
 export { LumenChatgptSignin } from './chatgpt-signin.js';
 export { LumenExpandList, LumenExpandRow } from './expand-list.js';
 export { FactList } from './fact-list.js';
-export { LumenPager } from './pager.js';
+export { LumenPageFooter, LumenPager, pageList } from './pager.js';
 export { clearPersistedQueries, createDeskQueryClient } from './query-client.js';
 export { apiRoute, reportClient, reportClientError, reportFailedFetch, stackFingerprint, useLumenTelemetry, } from './telemetry.js';
 export { refreshHeaders, withRefreshToken } from './refresh.js';

package/dist/lumen-view.js

@@ -23,7 +23,7 @@ import { LumenSelector } from './lumen-selector.js';
 import { LumenSkeleton, LumenStates, useLiveLoad } from './lumen-source.js';
 import { LumenWidget } from './lumen-widget.js';
 import { MAX_COMPARE, useSymbolChart } from './market/lumen-chart.js';
-import { LumenPager } from './pager.js';
+import { LumenPageFooter, LumenPager } from './pager.js';
 import { maskAmount, useAmountsHidden } from './shell.js';
 import { useSymbolSheet } from './symbol-sheet-context.js';
 import { Badge } from './ui/badge.js';
@@ -297,7 +297,43 @@ export function LumenView({ domain, config, rows, total = rows.length, paging: s
     const compare = openChart && picked.length > 1 ? (_jsx(IconButton, { icon: ChartSpline, label: `Compare ${picked.join(', ')}`, variant: "outline", onClick: () => openChart(picked) })) : null;
     // A server's page: the pager counts from the server's total, or the rows seen so far. Server
     // groups page themselves: the header counts them.
-    const pager = served?.pages ? (_jsx(LumenPager, { total: served.pages.total ?? served.pages.page * served.pages.size + (served.list?.length ?? 0), page: served.pages.page, size: served.pages.size, onPage: served.pages.onPage, onSize: served.pages.onSize ?? (() => { }), sizes: served.pages.sizes ?? [served.pages.size], noun: served.pages.noun ?? 'groups', more: served.pages.total === null && served.pages.more })) : served ? (_jsx("span", { className: "num px-2 text-xs text-muted-foreground", children: served.list ? `${served.list.length.toLocaleString()}${served.more ? '+' : ''} groups` : '' })) : server ? (_jsx(LumenPager, { total: server.total ?? server.page * server.size + rows.length, page: server.page, size: server.size, onPage: server.onPage, onSize: server.onSize ?? (() => { }), sizes: server.sizes ?? [server.size], more: server.total === null && server.more })) : paging ? (_jsx(LumenPager, { total: tableRows.length, page: page, size: pageSize, onPage: setPageIndex, onSize: setPageSize, noun: rows.length === total ? 'rows' : `of ${total} rows` })) : (_jsx("span", { className: "num px-2 text-xs text-muted-foreground", children: count }));
+    const turn = served?.pages
+        ? {
+            total: served.pages.total ?? served.pages.page * served.pages.size + (served.list?.length ?? 0),
+            page: served.pages.page,
+            size: served.pages.size,
+            onPage: served.pages.onPage,
+            onSize: served.pages.onSize ?? (() => { }),
+            sizes: served.pages.sizes ?? [served.pages.size],
+            noun: served.pages.noun ?? 'groups',
+            more: served.pages.total === null && served.pages.more,
+        }
+        : served
+            ? null
+            : server
+                ? {
+                    total: server.total ?? server.page * server.size + rows.length,
+                    page: server.page,
+                    size: server.size,
+                    onPage: server.onPage,
+                    onSize: server.onSize ?? (() => { }),
+                    sizes: server.sizes ?? [server.size],
+                    more: server.total === null && server.more,
+                }
+                : paging
+                    ? {
+                        total: tableRows.length,
+                        page,
+                        size: pageSize,
+                        onPage: setPageIndex,
+                        onSize: setPageSize,
+                        noun: rows.length === total ? 'rows' : `of ${total} rows`,
+                        more: false,
+                    }
+                    : null;
+    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 ? (_jsx(PivotTable, { domain: domain, rows: rows, pivot: config.pivot })) : (_jsx(LumenTable, { domain: domain, columns: columns, rows: 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: served, total: config.total !== false, add: onAddColumn || onColumns
             ? { ...onAddColumn, field: onColumns && { domain, columns, onColumns } }
             : undefined }));
@@ -310,7 +346,7 @@ export function LumenView({ domain, config, rows, total = rows.length, paging: s
                         groupBy,
                         sort: config.sort,
                         hidden: amountsHidden,
-                    }) }))] })), filter: state ? undefined : filter, filterCount: filterCount, strip: state ? undefined : strip, link: link, note: note, load: load, shown: shown, rows: total, pinned: inLayout && !fit, className: cn('relative', !inLayout && 'overflow-x-auto overflow-y-hidden [--pin-top:0px]'), children: state ??
+                    }) }))] })), filter: state ? undefined : filter, filterCount: filterCount, strip: state ? undefined : strip, foot: foot, link: link, note: note, load: load, shown: shown, rows: total, pinned: inLayout && !fit, className: cn('relative', !inLayout && 'overflow-x-auto overflow-y-hidden [--pin-top:0px]'), children: state ??
             (load ? (_jsx(LumenStates, { load: load, skeleton: _jsx(LumenSkeleton, { rows: 10 }), children: table })) : (table)) }));
 }
 /**

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/lumen-widget.d.ts

@@ -52,7 +52,7 @@ export interface CardLink {
     /** Its own filter's linked chips (the phone's count beside the funnel). */
     linked?: number;
 }
-export declare function LumenWidget({ id, kind, icon, title, note, controls, tools, phoneTitle, filter, filterCount, load, rows, loadNote, pad, pinned, compact, className, children, link: given, help, assistant, strip, shown, style, }: {
+export declare function LumenWidget({ id, kind, icon, title, note, controls, tools, phoneTitle, filter, filterCount, load, rows, loadNote, pad, pinned, compact, className, children, link: given, help, assistant, strip, foot, shown, style, }: {
     id: string;
     /** Its controls (Edit widget ▸ Controls): Ask the assistant, Refresh, Filter box and
      *  Footer show or hide here; missing keys take the type's default. */
@@ -91,6 +91,8 @@ export declare function LumenWidget({ id, kind, icon, title, note, controls, too
      * follows, or an offer such as Link to Holdings by Symbol.
      */
     strip?: ReactNode;
+    /** A line under the body, above the load line: a table's page footer. */
+    foot?: ReactNode;
     /** The card's source: its ↻, and its load time below the body. */
     load?: LumenLoad;
     rows?: number;
@@ -221,6 +223,7 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
         pagination: {
             on: boolean;
             size: 25 | 50 | 100 | 250;
+            footer: boolean;
         };
         width?: "fit" | "scroll" | undefined;
     } | undefined;

package/dist/lumen-widget.js

@@ -180,7 +180,7 @@ function useWidth() {
     }, []);
     return [ref, width];
 }
-export function LumenWidget({ id, kind, icon, title, note, controls, tools, phoneTitle, filter, filterCount = 0, load, rows, loadNote, pad = true, pinned = false, compact = false, className, children, link: given, help, assistant, strip, shown, style, }) {
+export function LumenWidget({ id, kind, icon, title, note, controls, tools, phoneTitle, filter, filterCount = 0, load, rows, loadNote, pad = true, pinned = false, compact = false, className, children, link: given, help, assistant, strip, foot, shown, style, }) {
     const [removing, setRemoving] = useState(false);
     const cell = useGridCell();
     const links = useLinks();
@@ -237,7 +237,7 @@ export function LumenWidget({ id, kind, icon, title, note, controls, tools, phon
             headless && 'relative', className), children: [!headless && (_jsxs("div", { ref: head, className: cn('flex shrink-0 items-center gap-2 px-3', compact ? 'h-8' : 'h-10 border-b', (folded || below) && 'border-b-0', pinned && 'sticky left-0 w-(--view-w) max-w-full'), children: [layout && (_jsx(Button, { variant: "ghost", size: "icon-xs", className: "lumen-drag -ml-1 cursor-grab touch-none text-muted-foreground active:cursor-grabbing", "aria-label": `Drag ${title}`, children: _jsx(GripVerticalIcon, {}) })), link && !bare && (_jsx(LinkPicker, { color: link.color, onPick: link.onPick, label: title, className: "-mr-1" })), !compact && _jsx(Icon, { className: "size-4 shrink-0 text-muted-foreground" }), _jsx("span", { className: cn('truncate', compact ? 'text-xs text-muted-foreground' : 'text-sm font-semibold', phoneTitle === false && !layout && 'max-md:hidden'), children: title }), link?.color && link.follows && !folded && (_jsxs("span", { className: "min-w-0 shrink truncate text-xs", style: { color: linkVar(link.color) }, title: `Follows ${link.follows}`, children: ["\u00B7 ", link.follows] })), layout && headerOff && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(Badge, { variant: "secondary", className: "shrink-0 gap-1 text-muted-foreground", children: [_jsx(EyeOffIcon, {}), " Header off"] }) }), _jsx(TooltipContent, { children: "Shown only in Edit layout. Change it in Edit widget \u25B8 Controls." })] })), !layout && !bare && (_jsx(FoldChevron, { folded: folded, label: title, onToggle: toggle, className: "-ml-1" })), folded && rows != null && (_jsxs("span", { className: "shrink-0 text-xs text-muted-foreground num", children: [rows.toLocaleString(), " ", rows === 1 ? 'row' : 'rows'] })), inline && (_jsx("div", { "data-card-filter": true, className: "flex min-w-40 max-w-xl flex-1 items-center gap-2", children: filter })), note && !layout && !folded && (_jsx("span", { className: "hidden truncate text-xs text-muted-foreground sm:inline", children: note })), _jsxs("span", { className: cn('ml-auto flex shrink-0 items-center gap-1', bare && 'hidden'), children: [!layout && load?.updated && _jsx(LumenFreshness, { load: load }), !layout && !folded && tools, showFilter && mobile && link?.color && !!link.linked && (_jsxs("span", { className: "num flex items-center gap-1 text-xs text-muted-foreground", title: `${link.linked} linked`, children: [_jsx(LinkDot, { color: link.color, className: "size-2" }), link.linked] })), showFilter && mobile && (_jsxs("span", { className: "relative", children: [_jsx(IconButton, { icon: FunnelIcon, label: filterOpen ? 'Hide filter' : 'Filter', "aria-expanded": filterOpen, className: cn(filterOpen && 'text-primary'), onClick: () => setFilterOpen(!filterOpen) }), filterCount > 0 && (_jsx(Badge, { className: "num pointer-events-none absolute -top-1 -right-1 h-4 min-w-4 px-1 text-[10px]", children: filterCount }))] })), !layout && !folded && help && _jsx(CardHelp, { title: title, children: help }), !layout && load && on('refresh') && (_jsx(LumenRefresh, { load: load, label: `Refresh ${title}` })), (controls?.editable || (!layout && (ask || load?.editScript))) && (_jsxs(DropdownMenu, { modal: false, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(IconButton, { icon: MoreHorizontalIcon, label: `${title} menu` }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-44", children: [ask && !layout && (_jsxs(DropdownMenuItem, { onSelect: ask, children: [_jsx(SparklesIcon, {}), " Ask ", assistantName] })), load?.editScript && !layout && (_jsxs(DropdownMenuItem, { onSelect: load.editScript, children: [_jsx(CodeIcon, {}), " Script"] })), (ask || load?.editScript) && !layout && controls?.editable && (_jsx(DropdownMenuSeparator, {})), controls?.editable && (_jsxs(_Fragment, { children: [!controls.fixed && (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuItem, { onSelect: () => controls.onAction('edit'), children: [_jsx(PencilIcon, {}), " Edit widget"] }), _jsxs(DropdownMenuItem, { disabled: !own, onSelect: () => controls.onAction('duplicate'), children: [_jsx(CopyIcon, {}), " Duplicate"] })] })), _jsxs(DropdownMenuItem, { disabled: controls.first, onSelect: () => controls.onAction('up'), children: [_jsx(ArrowUpIcon, {}), " Move up"] }), _jsxs(DropdownMenuItem, { disabled: controls.last, onSelect: () => controls.onAction('down'), children: [_jsx(ArrowDownIcon, {}), " Move down"] }), controls.onFit && (_jsxs(DropdownMenuItem, { onSelect: controls.onFit, children: [_jsx(FoldVerticalIcon, {}), " Fit height"] })), !controls.fixed && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "text-muted-foreground focus:text-destructive", onSelect: () => setRemoving(true), children: [_jsx(Trash2Icon, {}), " Remove"] })] }))] }))] })] }))] })] })), below && !headless && (_jsx("div", { "data-card-filter": true, className: cn('flex items-center gap-2 border-b px-3 pb-2', pinned && 'sticky left-0 w-(--view-w) max-w-full'), children: filter })), strip && !layout && !folded && !headless ? (_jsx("div", { "data-card-strip": true, className: cn('flex min-w-0 items-center gap-2 border-b px-3 py-1.5 empty:hidden', pinned && 'sticky left-0 w-(--view-w) max-w-full'), children: strip })) : null, _jsx("div", { hidden: folded, className: cn('relative min-w-0', 
                     // On the grid a card fills its cell: with a height of its own its body scrolls; one as
                     // tall as it draws keeps its body's height, so the grid can measure it.
-                    !cell ? 'flex-1' : cell.fixed && 'min-h-0 flex-1 overflow-auto', pad && !table && !flat && (compact ? 'px-3 pb-3' : 'p-3')), children: _jsx(LumenBoundary, { where: id, children: children }) }), headless && (_jsx(HeaderlessMenu, { title: title, ask: ask, askLabel: `Ask ${assistantName}`, load: load && on('refresh') ? load : undefined, editScript: load?.editScript, filter: showFilter ? filter : undefined, filterCount: filterCount })), !layout && !folded && load && on('footer') && (_jsx("div", { className: cn('mt-auto shrink-0', pinned && 'sticky left-0 w-(--view-w) max-w-full'), children: _jsx(LumenLoadFooter, { load: load, rows: rows, note: loadNote }) })), controls && (_jsx(LumenConfirm, { open: removing, onOpenChange: setRemoving, title: `Remove ${title}?`, description: table ? 'Add widget brings a table back.' : 'Add widget brings it back.', action: "Remove", onConfirm: () => controls.onAction('remove') }))] }) }));
+                    !cell ? 'flex-1' : cell.fixed && 'min-h-0 flex-1 overflow-auto', pad && !table && !flat && (compact ? 'px-3 pb-3' : 'p-3')), children: _jsx(LumenBoundary, { where: id, children: children }) }), foot && !folded && (_jsx("div", { className: cn('shrink-0', pinned && 'sticky left-0 w-(--view-w) max-w-full'), children: foot })), headless && (_jsx(HeaderlessMenu, { title: title, ask: ask, askLabel: `Ask ${assistantName}`, load: load && on('refresh') ? load : undefined, editScript: load?.editScript, filter: showFilter ? filter : undefined, filterCount: filterCount })), !layout && !folded && load && on('footer') && (_jsx("div", { className: cn('mt-auto shrink-0', pinned && 'sticky left-0 w-(--view-w) max-w-full'), children: _jsx(LumenLoadFooter, { load: load, rows: rows, note: loadNote }) })), controls && (_jsx(LumenConfirm, { open: removing, onOpenChange: setRemoving, title: `Remove ${title}?`, description: table ? 'Add widget brings a table back.' : 'Add widget brings it back.', action: "Remove", onConfirm: () => controls.onAction('remove') }))] }) }));
 }
 /**
  * One widget in its card. Widgets over the view's rows (tiles,

package/dist/pager.d.ts

@@ -11,3 +11,25 @@ export declare function LumenPager({ total, page, size, onPage, onSize, noun, si
     /** A server-paged source has rows past `total` it has not counted: shows `of 50+` and Next. */
     more?: boolean;
 }): import("react").JSX.Element;
+/**
+ * The pages a footer numbers, from 0: the first, the last and one either side of `page`, with
+ * null for each gap (`…`). A gap of one page shows that page instead. With `more` the last is not
+ * known, so the list ends in a gap.
+ */
+export declare function pageList(page: number, pages: number, more?: boolean): (number | null)[];
+/**
+ * The page footer under a table (`pagination.footer`): the rows shown, first and previous, the
+ * numbered pages, next and last, and Go to for any page. The header's pager keeps the page size.
+ * On a phone the numbers give way to Page [n] of N.
+ */
+export declare function LumenPageFooter({ total, page, size, onPage, more, className, }: {
+    /** The rows there are, or (with `more`) the rows known so far. */
+    total: number;
+    /** The page shown, from 0. */
+    page: number;
+    size: number;
+    onPage: (page: number) => void;
+    /** Rows past `total` not counted yet: the count reads `of 50+` and the last page is not offered. */
+    more?: boolean;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/pager.js

@@ -1,14 +1,77 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The compact pager, the same look as LumenView's: the count opens the page sizes,
 // and the chevrons turn the page while there is more than one. Coverage views page their rows with it.
+// LumenPageFooter is the fuller one under a table: first, last, numbered pages and Go to.
 import { viewPageSizes } from '@columenlabs/lumen-ui-types/views';
-import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import { ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon, } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { useIsMobile } from './hooks/use-mobile.js';
 import { IconButton } from './icon-button.js';
+import { cn } from './lib/utils.js';
 import { Button } from './ui/button.js';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from './ui/dropdown-menu.js';
+import { Input } from './ui/input.js';
 export function LumenPager({ total, page, size, onPage, onSize, noun = 'rows', sizes = viewPageSizes, more = false, }) {
     const pages = Math.max(1, Math.ceil(total / size)) + (more ? 1 : 0);
     return (_jsxs("nav", { "aria-label": "Pages", className: "flex items-center", children: [_jsxs(DropdownMenu, { modal: false, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "sm", className: "num h-7 px-2 text-xs font-normal text-muted-foreground", "aria-label": "Rows per page", children: pages > 1
                                 ? `${(page * size + 1).toLocaleString()}–${Math.min((page + 1) * size, total).toLocaleString()} of ${total.toLocaleString()}${more ? '+' : ''}`
                                 : `${total.toLocaleString()} ${noun}` }) }), _jsx(DropdownMenuContent, { align: "end", className: "w-40", children: _jsx(DropdownMenuRadioGroup, { value: String(size), onValueChange: (v) => onSize(Number(v)), children: sizes.map((n) => (_jsxs(DropdownMenuRadioItem, { value: String(n), className: "num whitespace-nowrap", children: [n, " per page"] }, n))) }) })] }), pages > 1 && (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: ChevronLeftIcon, label: "Previous page", disabled: page === 0, onClick: () => onPage(page - 1) }), _jsx(IconButton, { icon: ChevronRightIcon, label: "Next page", disabled: page >= pages - 1, onClick: () => onPage(page + 1) })] }))] }));
 }
+/**
+ * The pages a footer numbers, from 0: the first, the last and one either side of `page`, with
+ * null for each gap (`…`). A gap of one page shows that page instead. With `more` the last is not
+ * known, so the list ends in a gap.
+ */
+export function pageList(page, pages, more = false) {
+    const last = more ? pages - 2 : pages - 1;
+    const keep = [...new Set([0, last, page - 1, page, page + 1])]
+        .filter((p) => p >= 0 && p < pages)
+        .sort((a, b) => a - b);
+    const out = [];
+    let prev = -1;
+    for (const p of keep) {
+        if (p - prev === 2)
+            out.push(prev + 1);
+        else if (p - prev > 2)
+            out.push(null);
+        out.push(p);
+        prev = p;
+    }
+    if (more)
+        out.push(null);
+    return out;
+}
+/**
+ * The page footer under a table (`pagination.footer`): the rows shown, first and previous, the
+ * numbered pages, next and last, and Go to for any page. The header's pager keeps the page size.
+ * On a phone the numbers give way to Page [n] of N.
+ */
+export function LumenPageFooter({ total, page, size, onPage, more = false, className, }) {
+    const isMobile = useIsMobile();
+    const pages = Math.max(1, Math.ceil(total / size)) + (more ? 1 : 0);
+    const to = (p) => onPage(Math.max(0, Math.min(p, pages - 1)));
+    const from = Math.min(page * size + 1, total);
+    const range = `${from.toLocaleString()}–${Math.min((page + 1) * size, total).toLocaleString()} of ${total.toLocaleString()}${more ? '+' : ''}`;
+    const goTo = _jsx(PageInput, { page: page, pages: pages, onPage: to });
+    return (_jsxs("nav", { "aria-label": "Pages", "data-page-footer": true, className: cn('flex items-center justify-between gap-x-3 gap-y-1 border-t px-3 py-1.5 whitespace-nowrap', isMobile && 'flex-col', className), children: [_jsx("span", { className: "num truncate text-xs text-muted-foreground", children: range }), _jsxs("div", { className: "flex items-center gap-0.5", children: [_jsx(IconButton, { icon: ChevronsLeftIcon, label: "First page", disabled: page === 0, onClick: () => to(0) }), _jsx(IconButton, { icon: ChevronLeftIcon, label: "Previous page", disabled: page === 0, onClick: () => to(page - 1) }), isMobile ? (_jsxs("span", { className: "num flex items-center gap-1.5 px-1 text-xs text-muted-foreground", children: ["Page ", goTo, " of ", more ? `${pages - 1}+` : pages.toLocaleString()] })) : (pageList(page, pages, more).map((p, i) => p === null ? (_jsx("span", { "aria-hidden": true, className: "w-5 text-center text-xs text-muted-foreground", children: "\u2026" }, `gap${i}`)) : (_jsx(Button, { variant: p === page ? 'outline' : 'ghost', size: "sm", "aria-label": `Page ${p + 1}`, "aria-current": p === page ? 'page' : undefined, className: cn('num min-w-7 px-1.5 text-xs', p !== page && 'text-muted-foreground'), onClick: () => to(p), children: (p + 1).toLocaleString() }, p)))), _jsx(IconButton, { icon: ChevronRightIcon, label: "Next page", disabled: page >= pages - 1, onClick: () => to(page + 1) }), _jsx(IconButton, { icon: ChevronsRightIcon, label: more ? 'Last page known' : 'Last page', disabled: page >= pages - 1, onClick: () => to(pages - 1) })] }), !isMobile && (_jsxs("span", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: ["Go to ", goTo] }))] }));
+}
+/** The page number a person types: Enter or leaving the box opens it, Esc puts it back. */
+function PageInput({ page, pages, onPage, }) {
+    const [text, setText] = useState(String(page + 1));
+    useEffect(() => setText(String(page + 1)), [page]);
+    const go = () => {
+        const n = Number.parseInt(text, 10);
+        if (Number.isFinite(n) && n - 1 !== page)
+            onPage(n - 1);
+        else
+            setText(String(page + 1));
+    };
+    return (_jsx(Input, { inputMode: "numeric", "aria-label": `Page, 1 to ${pages.toLocaleString()}`, value: text, onChange: (e) => setText(e.target.value.replace(/\D/g, '')), onFocus: (e) => e.target.select(), onBlur: go, onKeyDown: (e) => {
+            if (e.key === 'Enter')
+                go();
+            if (e.key === 'Escape' && text !== String(page + 1)) {
+                e.stopPropagation();
+                setText(String(page + 1));
+            }
+        }, className: "num h-7 w-14 px-1.5 text-center md:text-xs" }));
+}

package/dist/view-editor.js

@@ -890,7 +890,7 @@ function DetailsSection({ domain, draft, setDraft, shownKeys, }) {
                         }), 'As loaded'), _jsxs(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, "aria-label": "Sort direction", disabled: !draft.sort, value: draft.sort?.desc ? 'desc' : 'asc', onValueChange: (v) => v && draft.sort && setDraft({ ...draft, sort: { ...draft.sort, desc: v === 'desc' } }), children: [_jsx(ToggleGroupItem, { value: "asc", "aria-label": "Ascending", children: _jsx(ArrowUpIcon, {}) }), _jsx(ToggleGroupItem, { value: "desc", "aria-label": "Descending", children: _jsx(ArrowDownIcon, {}) })] })] }) }), _jsx(Row, { label: "Pages", children: _jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(Switch, { "aria-label": "Pagination", checked: pagination.on, onCheckedChange: (on) => setDraft({ ...draft, pagination: { ...pagination, on } }) }), _jsx(LumenSelector, { label: "Rows per page", size: "sm", className: "num w-36", disabled: !pagination.on, options: viewPageSizes.map((n) => ({ value: String(n), label: `${n} per page` })), value: String(pagination.size), onChange: (v) => setDraft({
                                 ...draft,
                                 pagination: { ...pagination, size: Number(v) },
-                            }) })] }) }), _jsx(Row, { label: "Table width", children: _jsxs(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, value: draft.width ?? 'scroll', onValueChange: (v) => v && setDraft({ ...draft, width: v }), "aria-label": "Table width", children: [_jsxs(ToggleGroupItem, { value: "fit", "aria-label": "Fit to width", children: [_jsx(ShrinkIcon, {}), " Fit"] }), _jsxs(ToggleGroupItem, { value: "scroll", "aria-label": "Scroll sideways", children: [_jsx(MoveHorizontalIcon, {}), " Scroll"] })] }) })] }));
+                            }) })] }) }), _jsx(Row, { label: "Page footer", children: _jsx(Switch, { "aria-label": "Page footer", checked: pagination.footer, disabled: !pagination.on, onCheckedChange: (footer) => setDraft({ ...draft, pagination: { ...pagination, footer } }) }) }), _jsx(Row, { label: "Table width", children: _jsxs(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, value: draft.width ?? 'scroll', onValueChange: (v) => v && setDraft({ ...draft, width: v }), "aria-label": "Table width", children: [_jsxs(ToggleGroupItem, { value: "fit", "aria-label": "Fit to width", children: [_jsx(ShrinkIcon, {}), " Fit"] }), _jsxs(ToggleGroupItem, { value: "scroll", "aria-label": "Scroll sideways", children: [_jsx(MoveHorizontalIcon, {}), " Scroll"] })] }) })] }));
 }
 const CHIP_LABELS = { text: 'Text', column: 'Chip', inline: 'On first' };
 /**

package/dist/widget-settings.d.ts

@@ -116,6 +116,7 @@ export declare const readsRows: (card: ViewWidget) => card is {
         pagination: {
             on: boolean;
             size: 25 | 50 | 100 | 250;
+            footer: boolean;
         };
         width?: "fit" | "scroll" | undefined;
     } | undefined;

package/package.json

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