@columenlabs/lumen-ui 0.1.36 → 0.1.38

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { type CustomViewConfig, LumenTable, type LumenTableProps, LumenView, type LumenViewProps, type ViewCellValue, type ViewChipTone, type ViewDomain, type ViewField, type ViewFieldGroup, type ViewSource, CHIP_TONE, RUN_STATE_TONE, FORMULAS_GROUP, ViewValueCell, rollUp, } from './lumen-view.js';
+export { type CustomViewConfig, LumenTable, type LumenTableProps, LumenView, type LumenViewProps, type ServerPaging, type ViewCellValue, type ViewChipTone, type ViewDomain, type ViewField, type ViewFieldGroup, type ViewSource, CHIP_TONE, RUN_STATE_TONE, FORMULAS_GROUP, ViewValueCell, rollUp, } from './lumen-view.js';
 export { LumenLayout, type LumenLayoutCard, type LumenLayoutProps, type LumenLayoutViewProps, domainKeys, followRows, } from './lumen-layout.js';
 export { LumenViewCard, type LumenViewCardProps } from './lumen-view-card.js';
 export { LumenSelector, LumenSelectorList, type LumenSelectorListHandle, type LumenSelectorProps, type LumenOption, type LumenOptionGroup, SelectorRowContent, } from './lumen-selector.js';

package/dist/lumen-layout.d.ts

@@ -5,7 +5,7 @@ import { type ReactElement, type ReactNode } from 'react';
 import { type FilterToken } from './lumen-filter.js';
 import { type LinkColor } from './lumen-links.js';
 import { type LumenLoad } from './lumen-source.js';
-import { type LumenViewProps } from './lumen-view.js';
+import { type LumenViewProps, type ServerPaging } from './lumen-view.js';
 import { type CardControls, type CardLink } from './lumen-widget.js';
 import { type Crumb } from './page.js';
 import { type ViewEditorSection } from './view-editor.js';
@@ -115,6 +115,9 @@ export interface LumenLayoutViewProps<T> {
     /** Told the filter's tokens whenever they change, so an app can load rows for what they pick
      *  (the Symbols view's `in` filter). */
     onTokens?: (tokens: FilterToken[]) => void;
+    /** The rows are one page of a server's, already filtered by `onTokens`' chips: the table
+     *  shows them as given and its pager pages through the server. */
+    paging?: ServerPaging;
     /** Buttons in the view card's header ("+ Add time"). */
     viewTools?: ReactNode;
     /** False leaves Field out of the header's + Add column (a table whose columns are fixed, a

package/dist/lumen-layout.js

@@ -213,7 +213,7 @@ function LayoutTable({ card, base, config, rows, load, state, onDetails, control
     const domain = useMemo(() => withViewFields(base, own), [base, own]);
     return (_jsx(LumenViewCard, { id: card.id, domain: domain, config: own, rows: rows, load: load, state: state, title: card.title ?? config.name, onDetails: onDetails, controls: controls, shown: card.controls, onColumns: onLayout && ((columns) => onLayout(tableLayoutOf({ ...own, columns }))) }));
 }
-function ViewLayout({ crumbs, actions, meta, status, intro, cards: extra, lead, domain: base, config, rows, onConfigChange: saveConfig, editable: canEdit, editor, onDuplicate, onDelete, onReset, load, state, tile, rowTitle, viewId, onShownRows, onSummaryRows, selection, onOpen, rowPick: initialPick, groupActions, onTokens, viewTools, columnPicker, hideFilter, save: saveMode = 'document', }) {
+function ViewLayout({ crumbs, actions, meta, status, intro, cards: extra, lead, domain: base, config, rows, onConfigChange: saveConfig, editable: canEdit, editor, onDuplicate, onDelete, onReset, load, state, tile, rowTitle, viewId, onShownRows, onSummaryRows, selection, onOpen, rowPick: initialPick, groupActions, onTokens, paging, viewTools, columnPicker, hideFilter, save: saveMode = 'document', }) {
     const onConfigChange = canEdit === false ? undefined : saveConfig;
     // The registry's join fields for the keys the rows carry (Symbol, Account), then the view's own
     // formulas and formats.
@@ -326,7 +326,9 @@ function ViewLayout({ crumbs, actions, meta, status, intro, cards: extra, lead,
     const viewFollows = followed(viewCardId);
     const viewFollowKey = JSON.stringify(viewFollows);
     // biome-ignore lint/correctness/useExhaustiveDependencies: keyed on what the table follows.
-    const viewRows = useMemo(() => narrow(filter.results, viewFollows), [filter.results, viewFollowKey, widgetFields]);
+    const viewRows = useMemo(
+    // A server's page is filtered there: its chips do not narrow it again here.
+    () => narrow(paging ? rows : filter.results, viewFollows), [filter.results, viewFollowKey, widgetFields, paging ? rows : null]);
     useEffect(() => onShownRows?.(viewRows), [onShownRows, viewRows]);
     const linksChanged = saved.some((c) => (colors[c.id] ?? null) !== (c.link ?? null));
     const cardLink = (id, follows, linked) => ({
@@ -539,7 +541,7 @@ function ViewLayout({ crumbs, actions, meta, status, intro, cards: extra, lead,
         return {
             ...place,
             wide: isTableCard(c) && c.w === GRID_COLS && c.h === undefined,
-            node: c.source ? (_jsx(SourcedCard, { card: c, name: config.name, controls: controls })) : isTableCard(c) && c.id !== viewCardId ? (_jsx(LayoutTable, { card: c, base: joins.domain, config: config, rows: c.filter.length ? filterByTokens(rows, widgetFields, c.filter) : rows, load: scope(c.id, load), state: state, onDetails: onDetails, controls: controls, onLayout: onConfigChange ? (table) => putCard({ ...c, table }) : undefined })) : isTableCard(c) ? (_jsx(LumenView, { domain: domain, config: config, rows: viewRows, total: rows.length, groupBy: group.groupField, pivot: pivot, subgroup: group.sub, load: scope(c.id, load), state: state, title: c.title ?? config.name, selection: selection, onDetails: rowPick.onTap ?? onDetails, tapped: rowPick.tapped, groupActions: groupActions, controls: controls, inLayout: true, tools: viewTools, filter: viewFilter, filterCount: filter.tokens.length, strip: _jsx(ConnectOffer, { domain: domain, rows: rows, config: config, read: joins.read, cardKey: viewId ?? config.name, onConnect: onConfigChange ? connect : undefined }), link: cardLink(c.id, viewFollows, viewColor ? filter.tokens.length : 0), shown: c.controls, onColumns: onConfigChange && columnPicker !== false
+            node: c.source ? (_jsx(SourcedCard, { card: c, name: config.name, controls: controls })) : isTableCard(c) && c.id !== viewCardId ? (_jsx(LayoutTable, { card: c, base: joins.domain, config: config, rows: c.filter.length ? filterByTokens(rows, widgetFields, c.filter) : rows, load: scope(c.id, load), state: state, onDetails: onDetails, controls: controls, onLayout: onConfigChange ? (table) => putCard({ ...c, table }) : undefined })) : isTableCard(c) ? (_jsx(LumenView, { domain: domain, config: config, rows: viewRows, total: rows.length, paging: paging, groupBy: group.groupField, pivot: pivot, subgroup: group.sub, load: scope(c.id, load), state: state, title: c.title ?? config.name, selection: selection, onDetails: rowPick.onTap ?? onDetails, tapped: rowPick.tapped, groupActions: groupActions, controls: controls, inLayout: true, tools: viewTools, filter: viewFilter, filterCount: filter.tokens.length, strip: _jsx(ConnectOffer, { domain: domain, rows: rows, config: config, read: joins.read, cardKey: viewId ?? config.name, onConnect: onConfigChange ? connect : undefined }), link: cardLink(c.id, viewFollows, viewColor ? filter.tokens.length : 0), shown: c.controls, onColumns: onConfigChange && columnPicker !== false
                     ? (columns) => onConfigChange({ ...config, columns })
                     : undefined, onAddColumn: addColumn, sort: heldSort, onSort: setHeldSort })) : (_jsx(LumenSavedWidget, { widget: c, title: cardTitle(c, config.name), domain: domain, rows: narrow(rows, followed(c.id)), link: cardLink(c.id, followed(c.id)), fields: widgetFields, merge: mergeFlat, onDetails: onDetails, load: scope(c.id, load), tiles: 'tile' in c
                     ? cardOf(c)

package/dist/lumen-view.d.ts

@@ -42,6 +42,22 @@ export declare function DetailsBody<T extends RowData>({ domain, row, columns, c
     columns: ViewField<T>[];
     chips: ViewChip[];
 }): import("react").JSX.Element;
+/**
+ * Rows a server pages: the view shows `rows` as one page, as given (the server already filtered
+ * and sorted them), and the pager turns pages through `onPage`.
+ */
+export interface ServerPaging {
+    /** The page shown, from 0. */
+    page: number;
+    size: number;
+    /** Every row the server has for the filter; null when it does not count them. */
+    total: number | null;
+    /** With no `total`: whether a page follows this one. */
+    more: boolean;
+    onPage: (page: number) => void;
+    onSize?: (size: number) => void;
+    sizes?: readonly number[];
+}
 export interface LumenViewProps<T> {
     /** The view's domain, its formula columns included (`withViewFields`). */
     domain: ViewDomain<T>;
@@ -50,6 +66,8 @@ export interface LumenViewProps<T> {
     rows: T[];
     /** Every row before the filter, for "12 of 40 rows"; left out: `rows`. */
     total?: number;
+    /** The rows are one page of a server's: the pager pages through the server. */
+    paging?: ServerPaging;
     /** The grouping the page picked (its Group by switch); null: flat rows. */
     groupBy?: ViewField<T> | null;
     /** Shows the view's pivot instead of its rows. */
@@ -124,7 +142,7 @@ export interface AddColumn {
  * and ⋯, and its own filter and Group (they narrow this table only); its body
  * the table (grouped one level, or the pivot) with the loading states.
  */
-export declare function LumenView<T extends RowData>({ domain, config, rows, total, groupBy, pivot, subgroup, load: sourceLoad, state, title, selection, onDetails, tapped, groupActions, controls, inLayout: inScroller, cardId, tools, filter, filterCount, strip, link, note, onColumns, onAddColumn, sort, onSort, shown, }: LumenViewProps<T>): import("react").JSX.Element;
+export declare function LumenView<T extends RowData>({ domain, config, rows, total, paging: server, groupBy, pivot, subgroup, load: sourceLoad, state, title, selection, onDetails, tapped, groupActions, controls, inLayout: inScroller, cardId, tools, filter, filterCount, strip, link, note, onColumns, onAddColumn, sort, onSort, shown, }: LumenViewProps<T>): import("react").JSX.Element;
 /** A field's colour for its header: its topic's source (a broker green, an app brown) where
  *  the group names one, else its group's (Holding, Symbol, Account, Formulas). */
 export declare function colorOf<T>(domain: ViewDomain<T>, f: ViewField<T> | undefined): string | null;

package/dist/lumen-view.js

@@ -226,7 +226,7 @@ function downloadCsv({ name, columns, rows, groupBy, sort, hidden, }) {
  * and ⋯, and its own filter and Group (they narrow this table only); its body
  * the table (grouped one level, or the pivot) with the loading states.
  */
-export function LumenView({ domain, config, rows, total = rows.length, groupBy = null, pivot = false, subgroup, load: sourceLoad, state, title = config.name, selection, onDetails, tapped, groupActions, controls, inLayout: inScroller = false, cardId = 'view', tools, filter, filterCount, strip, link, note, onColumns, onAddColumn, sort = config.sort, onSort, shown, }) {
+export function LumenView({ domain, config, rows, total = rows.length, paging: server, groupBy = null, pivot = false, subgroup, load: sourceLoad, state, title = config.name, selection, onDetails, tapped, groupActions, controls, inLayout: inScroller = false, cardId = 'view', tools, filter, filterCount, strip, link, note, onColumns, onAddColumn, sort = config.sort, onSort, shown, }) {
     // Its controls (Edit widget ▸ Controls): Pager, Columns and Download here.
     const on = (k) => controlOn({ kind: 'table', controls: shown }, k);
     const cell = useGridCell();
@@ -252,7 +252,7 @@ export function LumenView({ domain, config, rows, total = rows.length, groupBy =
     useEffect(() => setPageSize(pagination.size), [pagination.size]);
     const sub = subgroupOf(domain, subgroup === undefined ? config.subgroup : subgroup);
     // Folded lines and their rows stay on one page, so a fold shows every row like a grouping.
-    const paging = pagination.on && on('pager') && !state && !groupBy && !pivot && !sub?.under;
+    const paging = !server && pagination.on && on('pager') && !state && !groupBy && !pivot && !sub?.under;
     // A fit table wraps its text to the width there is; the rest scroll sideways.
     // A phone has no width to fit to: every table scrolls sideways there.
     const fit = config.width === 'fit' && !pivot && !isMobile;
@@ -278,7 +278,8 @@ export function LumenView({ domain, config, rows, total = rows.length, groupBy =
         return [...out].slice(0, MAX_COMPARE);
     }, [selection, chartField, rows, domain]);
     const compare = openChart && picked.length > 1 ? (_jsx(IconButton, { icon: ChartSpline, label: `Compare ${picked.join(', ')}`, variant: "outline", onClick: () => openChart(picked) })) : null;
-    const pager = 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 }));
+    // A server's page: the pager counts from the server's total, or the rows seen so far.
+    const pager = 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 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: onSort, total: config.total !== false, add: onAddColumn || onColumns
             ? { ...onAddColumn, field: onColumns && { domain, columns, onColumns } }
             : undefined }));

package/dist/pager.d.ts

@@ -1,4 +1,5 @@
-export declare function LumenPager({ total, page, size, onPage, onSize, noun, sizes, }: {
+export declare function LumenPager({ total, page, size, onPage, onSize, noun, sizes, more, }: {
+    /** The rows there are, or (with `more`) the rows known so far. */
     total: number;
     page: number;
     size: number;
@@ -7,4 +8,6 @@ export declare function LumenPager({ total, page, size, onPage, onSize, noun, si
     noun?: string;
     /** Page sizes offered; a server-paged source takes its own. */
     sizes?: readonly number[];
+    /** A server-paged source has rows past `total` it has not counted: shows `of 50+` and Next. */
+    more?: boolean;
 }): import("react").JSX.Element;

package/dist/pager.js

@@ -6,9 +6,9 @@ import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
 import { IconButton } from './icon-button.js';
 import { Button } from './ui/button.js';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from './ui/dropdown-menu.js';
-export function LumenPager({ total, page, size, onPage, onSize, noun = 'rows', sizes = viewPageSizes, }) {
-    const pages = Math.max(1, Math.ceil(total / size));
+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}–${Math.min((page + 1) * size, total)} of ${total}`
+                                ? `${page * size + 1}–${Math.min((page + 1) * size, total)} of ${total}${more ? '+' : ''}`
                                 : `${total} ${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) })] }))] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.36",
+  "version": "0.1.38",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -41,7 +41,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.36",
+    "@columenlabs/lumen-ui-types": "0.1.38",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",