@columenlabs/lumen-ui 0.1.115 → 0.1.117

package/dist/assistant-panel.d.ts

@@ -1,10 +1,6 @@
 import { type ReactNode } from 'react';
-/** A value kept for this browser tab (sessionStorage), read with `use` and set with `write`. */
-export declare function tabState<T>(key: string, fallback: T, parse: (raw: string) => T | null): {
-    write: (next: T) => void;
-    use: () => T;
-    get: () => T;
-};
+import { tabState } from './side-dock.js';
+export { tabState };
 /** Whether the assistant is open in this tab. */
 export declare const assistantOpen: {
     write: (next: boolean) => void;

package/dist/assistant-panel.js

@@ -6,44 +6,18 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // Open or closed and the width are each browser tab's own (sessionStorage). The
 // product fills the body (the product's assistant: its chat, composer, cards and spend).
 import { HistoryIcon, SparklesIcon } from 'lucide-react';
-import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useIsMobile } from './hooks/use-mobile.js';
 import { cn } from './lib/utils.js';
 import { LumenBoundary } from './lumen-boundary.js';
 import { LumenSelector } from './lumen-selector.js';
 import { ASSISTANT_WIDTH, usePrefs } from './prefs.js';
+import { ResizeEdge, tabState } from './side-dock.js';
 import { Button } from './ui/button.js';
 import { Kbd } from './ui/kbd.js';
 import { Sheet, SheetContent, SheetDescription, SheetTitle } from './ui/sheet.js';
 import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.js';
-/** A value kept for this browser tab (sessionStorage), read with `use` and set with `write`. */
-export function tabState(key, fallback, parse) {
-    const listeners = new Set();
-    const read = () => {
-        try {
-            const raw = sessionStorage.getItem(key);
-            return raw == null ? fallback : (parse(raw) ?? fallback);
-        }
-        catch {
-            return fallback;
-        }
-    };
-    let state = typeof sessionStorage === 'undefined' ? fallback : read();
-    const write = (next) => {
-        state = next;
-        try {
-            sessionStorage.setItem(key, String(next));
-        }
-        catch { }
-        for (const l of listeners)
-            l();
-    };
-    const use = () => useSyncExternalStore((l) => {
-        listeners.add(l);
-        return () => listeners.delete(l);
-    }, () => state, () => fallback);
-    return { write, use, get: () => state };
-}
+export { tabState };
 /** Whether the assistant is open in this tab. */
 export const assistantOpen = tabState('assistant_open', false, (raw) => raw === '1');
 /** Dragged width in px, within ASSISTANT_WIDTH; 0 is the shell's default. */
@@ -109,65 +83,11 @@ function Docked({ name, children }) {
     }, []);
     return (_jsxs("aside", { ref: ref, "aria-label": name, "data-assistant-docked": "", 
         // Its width is the dragged one (or the shell's default), within ASSISTANT_WIDTH and half the window.
-        style: width ? { width } : undefined, className: "pointer-events-auto sticky top-0 h-svh w-(--shell-assistant-width) max-w-[50vw] min-w-80 shrink-0 border-l bg-background", children: [_jsx(ResizeEdge, { name: name, width: width || 416, onWidth: (w) => {
+        style: width ? { width } : undefined, className: "pointer-events-auto sticky top-0 h-svh w-(--shell-assistant-width) max-w-[50vw] min-w-80 shrink-0 border-l bg-background", children: [_jsx(ResizeEdge, { name: name, width: width || 416, min: ASSISTANT_WIDTH.min, max: Math.min(ASSISTANT_WIDTH.max, Math.floor(window.innerWidth / 2)), slot: "assistant-resize", onWidth: (w) => {
                     setDrag(null);
                     assistantWidth.write(w);
                 }, onDrag: setDrag }), _jsx(LumenBoundary, { where: "assistant", what: "panel", children: children })] }));
 }
-/**
- * The panel's left edge: drag it, or focus it and use the arrow keys, to set the width; a double
- * click goes back to the default. While dragging only `onDrag` hears it.
- */
-function ResizeEdge({ name, width, onDrag, onWidth, }) {
-    const clamp = (w) => Math.round(Math.max(ASSISTANT_WIDTH.min, Math.min(w, ASSISTANT_WIDTH.max, Math.floor(window.innerWidth / 2))));
-    // The panel's width on screen (the default one is CSS's).
-    const now = (el) => Math.round(el.parentElement?.getBoundingClientRect().width ?? width);
-    const [dragging, setDragging] = useState(false);
-    useEffect(() => {
-        if (!dragging)
-            return;
-        document.body.style.cursor = 'col-resize';
-        document.body.style.userSelect = 'none';
-        return () => {
-            document.body.style.cursor = '';
-            document.body.style.userSelect = '';
-        };
-    }, [dragging]);
-    return (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": `Resize ${name}`, "aria-valuemin": ASSISTANT_WIDTH.min, "aria-valuemax": ASSISTANT_WIDTH.max, "aria-valuenow": width, tabIndex: 0, "data-slot": "assistant-resize", "data-dragging": dragging ? '' : undefined, className: "absolute inset-y-0 -left-1 z-20 w-2 cursor-col-resize outline-none after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 after:-translate-x-1/2 after:transition-colors hover:after:bg-ring focus-visible:after:bg-ring data-dragging:after:bg-ring", onPointerDown: (e) => {
-            if (e.button !== 0)
-                return;
-            e.preventDefault();
-            const el = e.currentTarget;
-            el.setPointerCapture(e.pointerId);
-            const x0 = e.clientX;
-            const w0 = now(el);
-            let last = w0;
-            setDragging(true);
-            const move = (m) => {
-                last = clamp(w0 + x0 - m.clientX);
-                onDrag(last);
-            };
-            const up = () => {
-                el.removeEventListener('pointermove', move);
-                el.removeEventListener('pointerup', up);
-                el.removeEventListener('pointercancel', up);
-                setDragging(false);
-                onWidth(last);
-            };
-            el.addEventListener('pointermove', move);
-            el.addEventListener('pointerup', up);
-            el.addEventListener('pointercancel', up);
-        }, onDoubleClick: () => onWidth(0), onKeyDown: (e) => {
-            const step = e.shiftKey ? 64 : 16;
-            if (e.key === 'ArrowLeft')
-                onWidth(clamp(now(e.currentTarget) + step));
-            else if (e.key === 'ArrowRight')
-                onWidth(clamp(now(e.currentTarget) - step));
-            else
-                return;
-            e.preventDefault();
-        } }));
-}
 /** The history groups, newest first. */
 const GROUPS = ['Today', 'Yesterday', 'This week', 'Last week', 'Last month'];
 /** Under this age a chat's time reads relative ("12m ago"), past it the clock, day or date. */

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-drawer.d.ts

@@ -17,6 +17,12 @@ export interface LumenDrawerProps {
     defaultSize?: Size;
     minSize?: Size;
     maxSize?: Size;
+    /**
+     * Docks it beside the page on desktop instead of over it, under this name: a click on the page
+     * leaves it open (a list's next row swaps what it shows), it folds to a rail, and its width and
+     * fold are kept in this browser. A phone still gets the bottom sheet.
+     */
+    dock?: string;
 }
 /**
  * The suite's one pullout drawer (named LumenDrawer), on every app.
@@ -25,7 +31,8 @@ export interface LumenDrawerProps {
  * the handle and the drawer take the pointer, so a click beside it falls through to the overlay
  * and closes it (`!` beats the inline pointer-events Radix sets on a modal's content). Its body
  * holds DrawerSections; its footer sits at the bottom (actions on the right, Close by default; on a
- * phone it shows only when there are actions, as the sheet's X closes it).
+ * phone it shows only when there are actions, as the sheet's X closes it). With `dock` it sits beside
+ * the page on desktop instead (DockedDrawer), for a list whose rows each open it.
  */
-export declare function LumenDrawer({ open, onClose, title, description, children, footer, footerStart, defaultSize, minSize, maxSize, }: LumenDrawerProps): import("react").JSX.Element;
+export declare function LumenDrawer({ open, onClose, title, description, children, footer, footerStart, defaultSize, minSize, maxSize, dock, }: LumenDrawerProps): import("react").JSX.Element | null;
 export {};

package/dist/lumen-drawer.js

@@ -1,10 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { XIcon } from 'lucide-react';
-import { useEffect } from 'react';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PanelRightCloseIcon, PanelRightOpenIcon, XIcon } from 'lucide-react';
+import { useEffect, useState, useSyncExternalStore } from 'react';
+import { createPortal } from 'react-dom';
 import { useIsMobile } from './hooks/use-mobile.js';
 import { IconButton } from './icon-button.js';
 import { lazyPart } from './lazy-part.js';
+import { ResizeEdge, tabState, useDockSlot } from './side-dock.js';
 import { Button } from './ui/button.js';
+import { pickerOpen } from './ui/overlay-guard.js';
 import { Sheet, SheetClose, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from './ui/sheet.js';
 /** The resizable panels load with the first drawer opened; until then it opens at its default width. */
 const loadPanels = () => import('./lumen-drawer-panels.js');
@@ -16,10 +19,12 @@ const DrawerPanels = lazyPart(() => loadPanels().then((m) => m.DrawerPanels));
  * the handle and the drawer take the pointer, so a click beside it falls through to the overlay
  * and closes it (`!` beats the inline pointer-events Radix sets on a modal's content). Its body
  * holds DrawerSections; its footer sits at the bottom (actions on the right, Close by default; on a
- * phone it shows only when there are actions, as the sheet's X closes it).
+ * phone it shows only when there are actions, as the sheet's X closes it). With `dock` it sits beside
+ * the page on desktop instead (DockedDrawer), for a list whose rows each open it.
  */
-export function LumenDrawer({ open, onClose, title, description, children, footer, footerStart, defaultSize = '32%', minSize = '320px', maxSize = '60%', }) {
+export function LumenDrawer({ open, onClose, title, description, children, footer, footerStart, defaultSize = '32%', minSize = '320px', maxSize = '60%', dock, }) {
     const isMobile = useIsMobile();
+    const slot = useDockSlot();
     // Fetched once the page is idle, so the first drawer opened on a desktop has its panels ready.
     useEffect(() => {
         if (isMobile)
@@ -33,9 +38,66 @@ export function LumenDrawer({ open, onClose, title, description, children, foote
     // ends on a clear edge. Without actions of its own it offers Close, except on a phone, where the
     // sheet's X already closes it and a second Close only took room.
     const plain = !footer && !footerStart;
-    const foot = (_jsxs("footer", { "data-slot": "drawer-footer", className: "flex shrink-0 items-center gap-2 border-t bg-muted/50 px-4 py-2.5", children: [footerStart && (_jsx("div", { className: "min-w-0 flex-1 truncate text-muted-foreground text-xs", children: footerStart })), _jsx("div", { className: "ml-auto flex items-center gap-2", children: footer ?? (_jsx(SheetClose, { asChild: true, children: _jsx(Button, { type: "button", size: "sm", variant: "outline", children: "Close" }) })) })] }));
+    const foot = (_jsxs("footer", { "data-slot": "drawer-footer", className: "flex shrink-0 items-center gap-2 border-t bg-muted/50 px-4 py-2.5", children: [footerStart && (_jsx("div", { className: "min-w-0 flex-1 truncate text-muted-foreground text-xs", children: footerStart })), _jsx("div", { className: "ml-auto flex items-center gap-2", children: footer ?? (_jsx(Button, { type: "button", size: "sm", variant: "outline", onClick: onClose, children: "Close" })) })] }));
+    if (dock && !isMobile && slot)
+        return open
+            ? createPortal(_jsx(DockedDrawer, { dock: dock, title: title, description: description, onClose: onClose, defaultSize: defaultSize, minSize: minSize, maxSize: maxSize, body: body, foot: foot }), slot)
+            : null;
     return (_jsx(Sheet, { open: open, onOpenChange: (o) => !o && onClose(), modal: isMobile, children: isMobile ? (_jsxs(SheetContent, { side: "bottom", className: "max-h-[85svh] gap-0 overflow-hidden", children: [_jsx(SheetHeader, { className: "order-first shrink-0 border-b pt-3", children: head }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto pt-2", children: body }), !plain && foot] })) : (_jsx(SheetContent, { side: "right", showCloseButton: false, 
             // The resize handle's grab zone is wider than the handle, so a drag can start on the
             // overlay; the panels library marks that pointerdown handled, and then it doesn't close.
             onPointerDownOutside: (e) => e.detail.originalEvent.defaultPrevented && e.preventDefault(), className: "pointer-events-none! gap-0 border-0 bg-transparent shadow-none data-[side=right]:left-0 data-[side=right]:w-auto data-[side=right]:border-l-0 data-[side=right]:sm:max-w-none", children: _jsx(DrawerPanels, { defaultSize: defaultSize, minSize: minSize, maxSize: maxSize, children: _jsxs("section", { className: "flex h-full flex-col overflow-hidden", children: [_jsxs("header", { className: "flex shrink-0 items-center gap-2 border-b px-4 py-3", children: [head, _jsx(SheetClose, { asChild: true, children: _jsx(IconButton, { icon: XIcon, label: "Close", className: "ml-auto" }) })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto pt-2", children: body }), foot] }) }) })) }));
 }
+/** What each docked drawer keeps, by its `dock` name: its dragged width (0: the default) and its fold. */
+const docks = new Map();
+function dockState(dock) {
+    let d = docks.get(dock);
+    if (!d) {
+        d = {
+            width: tabState(`lumen_dock_${dock}_width`, 0, (raw) => {
+                const n = Math.round(Number(raw));
+                return Number.isFinite(n) && n > 0 ? n : null;
+            }, 'local'),
+            folded: tabState(`lumen_dock_${dock}_folded`, false, (raw) => raw === 'true', 'local'),
+        };
+        docks.set(dock, d);
+    }
+    return d;
+}
+const onResize = (l) => {
+    window.addEventListener('resize', l);
+    return () => window.removeEventListener('resize', l);
+};
+/** A Size in px, a percentage being of the window's width. */
+const px = (size, vw) => size.endsWith('%') ? (vw * Number.parseFloat(size)) / 100 : Number.parseFloat(size);
+/** Room a docked drawer always leaves the page, px. */
+const PAGE_MIN = 480;
+/**
+ * A drawer docked right of the page (LumenShell's dock slot): the page narrows beside it and stays
+ * usable. Its left edge drags the width within `minSize` and `maxSize` (never leaving the page under
+ * PAGE_MIN); it folds to a rail that shows its title; Esc in it closes it, unless a picker in it is open.
+ */
+function DockedDrawer({ dock, title, description, onClose, defaultSize, minSize, maxSize, body, foot, }) {
+    const state = dockState(dock);
+    const saved = state.width.use();
+    const folded = state.folded.use();
+    const [drag, setDrag] = useState(null);
+    const vw = useSyncExternalStore(onResize, () => window.innerWidth, () => 1440);
+    const min = Math.round(px(minSize, vw));
+    const max = Math.max(min, Math.round(Math.min(px(maxSize, vw), vw - PAGE_MIN)));
+    const clamp = (w) => Math.max(min, Math.min(w, max));
+    const width = drag ?? clamp(saved || px(defaultSize, vw));
+    const name = typeof title === 'string' ? title : 'Details';
+    return (_jsx("aside", { "aria-label": name, "data-slot": "lumen-drawer", "data-docked": "", "data-folded": folded ? '' : undefined, style: folded ? undefined : { width }, className: "sticky top-0 flex h-svh shrink-0 flex-col border-l bg-background data-folded:w-11", onKeyDown: (e) => {
+            if (e.key !== 'Escape' || e.defaultPrevented || pickerOpen())
+                return;
+            // Only Esc from inside it: one from a dialog it opened (a portal) is that dialog's.
+            if (!e.currentTarget.contains(e.target))
+                return;
+            e.preventDefault();
+            onClose();
+        }, children: folded ? (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col items-center gap-2 overflow-hidden py-3", children: [_jsx(IconButton, { icon: PanelRightOpenIcon, label: "Expand panel", onClick: () => state.folded.write(false) }), _jsx("span", { className: "min-h-0 truncate text-muted-foreground text-xs [writing-mode:vertical-rl]", title: name, children: title })] })) : (_jsxs(_Fragment, { children: [_jsx(ResizeEdge, { name: name, width: width, min: min, max: max, slot: "lumen-drawer-resize", onDrag: setDrag, onWidth: (w) => {
+                        setDrag(null);
+                        state.width.write(w);
+                    } }), _jsxs("header", { className: "flex shrink-0 items-center gap-1 border-b px-4 py-3", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx("h2", { className: "cn-font-heading truncate font-medium text-base text-foreground", title: name, children: title }), description && (_jsx("p", { className: "truncate text-muted-foreground text-xs", title: typeof description === 'string' ? description : undefined, children: description }))] }), _jsx(IconButton, { icon: PanelRightCloseIcon, label: "Collapse panel", onClick: () => state.folded.write(true) }), _jsx(IconButton, { icon: XIcon, label: "Close", onClick: onClose })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto pt-2", children: body }), foot] })) }));
+}

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.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/shell.js

@@ -13,6 +13,7 @@ import { LumenFinder } from './lumen-finder.js';
 import { usePrefs } from './prefs.js';
 import { withRefreshToken } from './refresh.js';
 import { LumenSettings, ThemeToggle, allSettings, } from './settings.js';
+import { DockSlot } from './side-dock.js';
 import { SourceHealthProvider } from './source-health.js';
 import { StatusTimeZone } from './status.js';
 import { Avatar, AvatarFallback } from './ui/avatar.js';
@@ -96,6 +97,7 @@ const settingsFromUrl = (() => {
 })();
 export function LumenShell({ app, appLabel, brand, nav, status, health, statusEnd, releases, releaseApps, settings, shared, sharedLabel, settingsGroups, user = null, signOutUrl, profile, security, onRefresh, hideAmounts = false, onLogs, headerActions = null, panel, finder, wrap = (frame) => frame, children, }) {
     const [statusSlot, setStatusSlot] = useState(null);
+    const [dockSlot, setDockSlot] = useState(null);
     const [refreshing, setRefreshing] = useState(false);
     // Refresh reloads the layout too: once the data is fresh the page mounts
     // again, so every card, tab and saved layout starts from what the server holds now.
@@ -139,7 +141,7 @@ export function LumenShell({ app, appLabel, brand, nav, status, health, statusEn
             refreshing,
             hideAmounts,
             headerActions,
-        }, children: _jsx(SourceHealthProvider, { children: wrap(_jsx(TooltipProvider, { delayDuration: 200, children: _jsx(SidebarProvider, { defaultOpen: sidebarOpen(), children: _jsxs(LumenFinder, { app: app, settings: findSettings, openSettings: openSettings, config: finder, children: [_jsx(CloseDrawerOnNavigate, {}), _jsxs(Sidebar, { collapsible: "icon", children: [_jsx(SidebarHeader, { children: brand }), _jsx(SidebarContent, { children: nav }), _jsx(SidebarFooter, { children: _jsx(NavUser, { who: user, signOutUrl: signOutUrl, onSettings: () => openSettings(), onLogs: onLogs }) }), _jsx(SidebarRail, {})] }), _jsxs(SidebarInset, { className: "flex min-h-svh min-w-0 flex-col", children: [_jsx("div", { className: "flex min-w-0 flex-1 flex-col", children: children }, epoch), _jsxs("footer", { "data-slot": "shell-status", "aria-label": "Status", className: "sticky bottom-0 z-10 flex h-(--shell-status-height) shrink-0 items-center gap-4 overflow-x-auto overflow-y-hidden border-t bg-background px-(--shell-gutter) text-xs whitespace-nowrap text-muted-foreground", children: [status, _jsx("div", { ref: setStatusSlot, className: "flex shrink-0 items-center gap-4" }), _jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-1", children: [health, releases && _jsx(WhatsNew, { api: releases, apps: releaseApps }), statusEnd, _jsx(StatusTimeZone, {})] })] })] }), panel, _jsx(LumenSettings, { open: settingsAt !== null, section: settingsAt ?? lastSection, onOpen: openSettings, onClose: () => setSettingsAt(null), appLabel: appLabel, profile: profile, security: security, sections: settings, shared: shared, sharedLabel: sharedLabel, groups: settingsGroups }), _jsx(Toaster, { position: "bottom-right" })] }) }) })) }) }));
+        }, children: _jsx(DockSlot.Provider, { value: dockSlot, children: _jsx(SourceHealthProvider, { children: wrap(_jsx(TooltipProvider, { delayDuration: 200, children: _jsx(SidebarProvider, { defaultOpen: sidebarOpen(), children: _jsxs(LumenFinder, { app: app, settings: findSettings, openSettings: openSettings, config: finder, children: [_jsx(CloseDrawerOnNavigate, {}), _jsxs(Sidebar, { collapsible: "icon", children: [_jsx(SidebarHeader, { children: brand }), _jsx(SidebarContent, { children: nav }), _jsx(SidebarFooter, { children: _jsx(NavUser, { who: user, signOutUrl: signOutUrl, onSettings: () => openSettings(), onLogs: onLogs }) }), _jsx(SidebarRail, {})] }), _jsxs(SidebarInset, { className: "flex min-h-svh min-w-0 flex-col", children: [_jsx("div", { className: "flex min-w-0 flex-1 flex-col", children: children }, epoch), _jsxs("footer", { "data-slot": "shell-status", "aria-label": "Status", className: "sticky bottom-0 z-10 flex h-(--shell-status-height) shrink-0 items-center gap-4 overflow-x-auto overflow-y-hidden border-t bg-background px-(--shell-gutter) text-xs whitespace-nowrap text-muted-foreground", children: [status, _jsx("div", { ref: setStatusSlot, className: "flex shrink-0 items-center gap-4" }), _jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-1", children: [health, releases && _jsx(WhatsNew, { api: releases, apps: releaseApps }), statusEnd, _jsx(StatusTimeZone, {})] })] })] }), _jsx("div", { ref: setDockSlot, "data-slot": "shell-dock", className: "contents" }), panel, _jsx(LumenSettings, { open: settingsAt !== null, section: settingsAt ?? lastSection, onOpen: openSettings, onClose: () => setSettingsAt(null), appLabel: appLabel, profile: profile, security: security, sections: settings, shared: shared, sharedLabel: sharedLabel, groups: settingsGroups }), _jsx(Toaster, { position: "bottom-right" })] }) }) })) }) }) }));
 }
 /** A status bar entry: an optional health dot, a label and its value ("Mail · Up to date"). */
 export function StatusItem({ label, value, ok, className, }) {

package/dist/side-dock.d.ts

@@ -0,0 +1,26 @@
+/**
+ * A value kept for this browser tab (sessionStorage), or for this browser with `'local'`
+ * (localStorage), read with `use` and set with `write`.
+ */
+export declare function tabState<T>(key: string, fallback: T, parse: (raw: string) => T | null, keep?: 'tab' | 'local'): {
+    write: (next: T) => void;
+    use: () => T;
+    get: () => T;
+};
+/** Where a docked drawer renders on desktop; null outside LumenShell (it then opens over the page). */
+export declare const DockSlot: import("react").Context<HTMLElement | null>;
+export declare const useDockSlot: () => HTMLElement | null;
+/**
+ * A docked panel's left edge: drag it, or focus it and use the arrow keys, to set the width between
+ * `min` and `max`; a double click goes back to the default (0). While dragging only `onDrag` hears it.
+ */
+export declare function ResizeEdge({ name, width, min, max, onDrag, onWidth, slot, }: {
+    name: string;
+    width: number;
+    min: number;
+    max: number;
+    onDrag: (w: number | null) => void;
+    onWidth: (w: number) => void;
+    /** Its `data-slot`. */
+    slot: string;
+}): import("react").JSX.Element;

package/dist/side-dock.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// What a panel docked right of the page needs: a value it keeps (its width, folded or not), the
+// left edge that drags its width, and the shell's slot a docked drawer renders into (LumenShell puts
+// it between the page and the assistant, so the page narrows to make room instead of being covered).
+import { createContext, useContext, useEffect, useState, useSyncExternalStore } from 'react';
+/**
+ * A value kept for this browser tab (sessionStorage), or for this browser with `'local'`
+ * (localStorage), read with `use` and set with `write`.
+ */
+export function tabState(key, fallback, parse, keep = 'tab') {
+    const listeners = new Set();
+    const store = () => (keep === 'local' ? localStorage : sessionStorage);
+    const read = () => {
+        try {
+            const raw = store().getItem(key);
+            return raw == null ? fallback : (parse(raw) ?? fallback);
+        }
+        catch {
+            return fallback;
+        }
+    };
+    let state = typeof sessionStorage === 'undefined' ? fallback : read();
+    const write = (next) => {
+        state = next;
+        try {
+            store().setItem(key, String(next));
+        }
+        catch { }
+        for (const l of listeners)
+            l();
+    };
+    const use = () => useSyncExternalStore((l) => {
+        listeners.add(l);
+        return () => listeners.delete(l);
+    }, () => state, () => fallback);
+    return { write, use, get: () => state };
+}
+/** Where a docked drawer renders on desktop; null outside LumenShell (it then opens over the page). */
+export const DockSlot = createContext(null);
+export const useDockSlot = () => useContext(DockSlot);
+/**
+ * A docked panel's left edge: drag it, or focus it and use the arrow keys, to set the width between
+ * `min` and `max`; a double click goes back to the default (0). While dragging only `onDrag` hears it.
+ */
+export function ResizeEdge({ name, width, min, max, onDrag, onWidth, slot, }) {
+    const clamp = (w) => Math.round(Math.max(min, Math.min(w, max)));
+    // The panel's width on screen (the default one is CSS's).
+    const now = (el) => Math.round(el.parentElement?.getBoundingClientRect().width ?? width);
+    const [dragging, setDragging] = useState(false);
+    useEffect(() => {
+        if (!dragging)
+            return;
+        document.body.style.cursor = 'col-resize';
+        document.body.style.userSelect = 'none';
+        return () => {
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+        };
+    }, [dragging]);
+    return (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": `Resize ${name}`, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": width, tabIndex: 0, "data-slot": slot, "data-dragging": dragging ? '' : undefined, className: "absolute inset-y-0 -left-1 z-20 w-2 cursor-col-resize outline-none after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 after:-translate-x-1/2 after:transition-colors hover:after:bg-ring focus-visible:after:bg-ring data-dragging:after:bg-ring", onPointerDown: (e) => {
+            if (e.button !== 0)
+                return;
+            e.preventDefault();
+            const el = e.currentTarget;
+            el.setPointerCapture(e.pointerId);
+            const x0 = e.clientX;
+            const w0 = now(el);
+            let last = w0;
+            setDragging(true);
+            const move = (m) => {
+                last = clamp(w0 + x0 - m.clientX);
+                onDrag(last);
+            };
+            const up = () => {
+                el.removeEventListener('pointermove', move);
+                el.removeEventListener('pointerup', up);
+                el.removeEventListener('pointercancel', up);
+                setDragging(false);
+                onWidth(last);
+            };
+            el.addEventListener('pointermove', move);
+            el.addEventListener('pointerup', up);
+            el.addEventListener('pointercancel', up);
+        }, onDoubleClick: () => onWidth(0), onKeyDown: (e) => {
+            const step = e.shiftKey ? 64 : 16;
+            if (e.key === 'ArrowLeft')
+                onWidth(clamp(now(e.currentTarget) + step));
+            else if (e.key === 'ArrowRight')
+                onWidth(clamp(now(e.currentTarget) - step));
+            else
+                return;
+            e.preventDefault();
+        } }));
+}

package/dist/ui/overlay-guard.d.ts

@@ -1,2 +1,4 @@
+/** Whether a picker is open, so a panel that closes on Esc leaves this one to it. */
+export declare const pickerOpen: () => boolean;
 /** The overlay's `onEscapeKeyDown`: ignores Esc while a picker is open, else runs the caller's. */
 export declare function escapeToPicker(own?: (e: KeyboardEvent) => void): (e: KeyboardEvent) => void;

package/dist/ui/overlay-guard.js

@@ -2,6 +2,8 @@
 // document before a base-ui picker open inside it (LumenSelector, Combobox), which isn't one of
 // Radix's layers, so one Esc closed both. While such a picker is open the overlay leaves Esc to it.
 const OPEN_PICKER = '[data-slot="lumen-selector"][data-open], [data-slot="combobox-content"][data-open]';
+/** Whether a picker is open, so a panel that closes on Esc leaves this one to it. */
+export const pickerOpen = () => !!document.querySelector(OPEN_PICKER);
 /** The overlay's `onEscapeKeyDown`: ignores Esc while a picker is open, else runs the caller's. */
 export function escapeToPicker(own) {
     return (e) => {

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