@columenlabs/lumen-ui 0.1.51 → 0.1.53

package/dist/details-table.d.ts

@@ -1,10 +1,12 @@
 import type { ReactNode } from 'react';
 export interface DetailsTableProps {
-    /** `grow` marks the column that takes the spare width; the last column does by default. */
+    /** `grow` marks the column that takes the spare width; the last column does by default.
+     *  `hideOnPhone` drops a column on a phone, so the rest fit without scrolling sideways. */
     head: {
         label: string;
         right?: boolean;
         grow?: boolean;
+        hideOnPhone?: boolean;
     }[];
     rows: {
         key: string;

package/dist/details-table.js

@@ -4,8 +4,8 @@ import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, Table
 export function DetailsTable({ head, rows, foot, selected, onSelect }) {
     const marked = head.findIndex((h) => h.grow);
     const grow = marked >= 0 ? marked : head.length - 1;
-    const cell = (i) => cn('num', head[i]?.right && 'text-right', i !== grow && 'w-px');
-    return (_jsx("div", { className: "-mx-1 overflow-x-auto overflow-y-hidden rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: head.map((h, i) => (_jsx(TableHead, { className: cn(h.right && 'text-right', i !== grow && 'w-px'), children: h.label }, h.label))) }) }), _jsx(TableBody, { children: rows.map((r) => (_jsx(TableRow, { "data-state": r.key === selected ? 'selected' : undefined, "aria-current": r.key === selected || undefined, tabIndex: onSelect ? 0 : undefined, className: cn(onSelect &&
+    const cell = (i) => cn('num', head[i]?.right && 'text-right', i !== grow && 'w-px', head[i]?.hideOnPhone && 'max-md:hidden');
+    return (_jsx("div", { className: "-mx-1 overflow-x-auto overflow-y-hidden rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: head.map((h, i) => (_jsx(TableHead, { className: cn(h.right && 'text-right', i !== grow && 'w-px', h.hideOnPhone && 'max-md:hidden'), children: h.label }, h.label))) }) }), _jsx(TableBody, { children: rows.map((r) => (_jsx(TableRow, { "data-state": r.key === selected ? 'selected' : undefined, "aria-current": r.key === selected || undefined, tabIndex: onSelect ? 0 : undefined, className: cn(onSelect &&
                             'cursor-pointer focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring'), onClick: onSelect && (() => onSelect(r.key)), onKeyDown: onSelect &&
                             ((e) => {
                                 if (e.key !== 'Enter' && e.key !== ' ')

package/dist/summary-cards.d.ts

@@ -1,7 +1,7 @@
-import { type CardStyle, type MeterKind, type ViewTile } from '@columenlabs/lumen-ui-types/views';
+import { type CardStyle, type MeterKind, type ViewAgg, type ViewTile } from '@columenlabs/lumen-ui-types/views';
 import { type ReactNode } from 'react';
 import { type FilterField } from './lumen-filter.js';
-import { type ViewDomain } from './view-model.js';
+import { type ViewDomain, type ViewField } from './view-model.js';
 /**
  * A LumenCard's number and lines: its frame shows the label, so the body is
  * the main number and its lines; a domain's own card keeps the app's drawing without its frame.
@@ -36,6 +36,12 @@ export declare function SummaryTiles<T>({ domain, tiles, rows, fields, tile, loa
     /** While the view's rows load, each card holds its place. */
     loading?: boolean;
 }): import("react").JSX.Element | null;
+/**
+ * The roll-up a card over `f` starts with, so any field makes a sensible number: text counts its
+ * different values, a percent or weight takes its highest (shares never add up), the rest sum.
+ * Given the card's `agg`, keeps it when it still fits the field.
+ */
+export declare function cardAgg<T>(f: ViewField<T> | undefined, agg?: ViewAgg): ViewAgg;
 /** What is wrong with each of the cards: a key, a label or a field; null where nothing. */
 export declare function summaryCardIssues(tiles: ViewTile[], fields: string[], domainTiles: string[]): (string | null)[];
 /**

package/dist/summary-cards.js

@@ -134,14 +134,29 @@ export function SummaryTiles({ domain, tiles, rows, fields, tile, loading, }) {
     const shown = tiles.filter((t) => isOwnTile(t) || tile);
     if (!shown.length)
         return null;
-    const grid = 'grid grid-cols-2 gap-(--shell-section-gap) md:auto-cols-fr md:grid-flow-col';
+    // Each card fills its column, as a header's metric cards do (`TileRow fill`), not the fixed tile width.
+    const grid = 'grid grid-cols-2 gap-(--shell-section-gap) md:auto-cols-fr md:grid-flow-col lg:*:*:w-auto';
     if (loading)
         return (_jsx("div", { "data-slot": "view-tiles", "aria-busy": "true", className: grid, children: shown.map((t) => (_jsx(Skeleton, { className: "h-[4.5rem] w-full rounded-xl" }, t.key))) }));
     return (_jsx("div", { "data-slot": "view-tiles", className: cn(grid, '[&>*:last-child:nth-child(odd)]:col-span-2 md:[&>*:last-child:nth-child(odd)]:col-span-1'), children: shown.map((t) => (_jsx("div", { className: "contents", children: isOwnTile(t) ? (_jsx(OwnTile, { domain: domain, tile: t, rows: rows, fields: fields })) : (tile?.(t.key, rows)) }, t.key))) }));
 }
 // ── Edit ───────────────────────────────────────────────────────────────────────────────────────
 const dragOptions = { activationConstraint: { distance: 4 } };
-const isNumber = (f) => f.format !== 'text' && !f.render;
+// A number the page draws its own way (a meter, a unit) still reads its raw value, so it rolls up.
+const isNumber = (f) => f.format !== 'text';
+/**
+ * The roll-up a card over `f` starts with, so any field makes a sensible number: text counts its
+ * different values, a percent or weight takes its highest (shares never add up), the rest sum.
+ * Given the card's `agg`, keeps it when it still fits the field.
+ */
+export function cardAgg(f, agg) {
+    const share = f?.format === 'percent' || f?.format === 'weight';
+    if (agg && (isCountAgg(agg) || (f && isNumber(f) && !(share && agg === 'sum'))))
+        return agg;
+    if (!f || !isNumber(f))
+        return 'distinct';
+    return share ? 'max' : 'sum';
+}
 /** What is wrong with each of the cards: a key, a label or a field; null where nothing. */
 export function summaryCardIssues(tiles, fields, domainTiles) {
     return tiles.map((t, i) => {
@@ -211,7 +226,7 @@ export function SummaryCardsEditor({ domain, tiles, onChange, rows, fields, prob
     const builtIns = domain.tiles ?? [];
     const [current, setCurrent] = useState(tiles.find(isOwnTile)?.key ?? tiles[0]?.key ?? null);
     const nums = domain.fields.filter(isNumber);
-    const pickable = domain.fields.filter((f) => !f.render);
+    const pickable = domain.fields;
     const fieldOf = (k) => domain.fields.find((f) => f.key === k);
     const i = tiles.findIndex((t) => t.key === current);
     const picked = tiles[i];

package/dist/widget-settings.js

@@ -10,7 +10,7 @@ import { ALLOCATION_MAX, isOwnTile, isRowCard, isTableCard, trendBuckets, widget
 import { ArrowDownIcon, ArrowUpIcon } from 'lucide-react';
 import { useState } from 'react';
 import { LumenSelector } from './lumen-selector.js';
-import { SummaryCardsEditor, summaryCardIssues } from './summary-cards.js';
+import { SummaryCardsEditor, cardAgg, summaryCardIssues } from './summary-cards.js';
 import { Input } from './ui/input.js';
 import { Label } from './ui/label.js';
 import { Switch } from './ui/switch.js';
@@ -21,7 +21,8 @@ export function EditorRow({ label, children }) {
     return (_jsxs("div", { className: "grid grid-cols-[5rem_minmax(0,1fr)] items-center gap-2", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: label }), _jsx("div", { className: "min-w-0", children: children })] }));
 }
 export const isTextField = (f) => f.format === 'text' && !f.render;
-export const isNumberField = (f) => f.format !== 'text' && !f.render;
+// A number the page draws its own way (a meter, a unit) still reads its raw value, so it rolls up.
+export const isNumberField = (f) => f.format !== 'text';
 const DATE_LIKE = /(^|_)(date|day|at|time|month|week|year)($|_)/i;
 /** A trend's date candidates: text fields, the date-like ones first. */
 export const dateFields = (domain) => {
@@ -45,7 +46,8 @@ const freeTileKey = (tiles, taken) => {
 };
 /** A widget's slots, in the order the editor lists them; none for a chart of symbols. */
 export function widgetSlots(card, domain) {
-    const label = (k) => domain.fields.find((f) => f.key === k)?.label ?? k;
+    const fieldOf = (k) => domain.fields.find((f) => f.key === k);
+    const label = (k) => fieldOf(k)?.label ?? k;
     const text = { accepts: isTextField, why: 'Takes a text field' };
     const number = { accepts: isNumberField, why: 'Takes a number' };
     if ('by' in card)
@@ -118,18 +120,19 @@ export function widgetSlots(card, domain) {
                 id: 'number',
                 label: 'Number',
                 max: 1,
-                ...number,
+                accepts: () => true,
+                why: '',
                 keys: isOwnTile(t) ? [t.field] : [],
                 set: ([field]) => field
                     ? {
                         ...card,
                         tile: isOwnTile(t)
-                            ? { ...t, field }
+                            ? { ...t, field, agg: cardAgg(fieldOf(field), t.agg) }
                             : {
                                 key: t.key,
                                 label: label(field),
                                 field,
-                                agg: 'sum',
+                                agg: cardAgg(fieldOf(field)),
                                 filter: [],
                                 sign: false,
                                 lines: [],
@@ -147,9 +150,10 @@ export function widgetSlots(card, domain) {
                 id: 'cards',
                 label: 'Cards',
                 max: MAX_TILES,
-                ...number,
+                accepts: () => true,
+                why: '',
                 keys: tiles.filter(isOwnTile).map((t) => t.field),
-                // A field ticked adds a card of its sum; one unticked takes its cards out.
+                // A field ticked adds a card of its roll-up (`cardAgg`); one unticked takes its cards out.
                 set: (keys) => {
                     const kept = tiles.filter((t) => !isOwnTile(t) || keys.includes(t.field));
                     const next = [...kept];
@@ -160,7 +164,7 @@ export function widgetSlots(card, domain) {
                             key: freeTileKey(next, builtIns),
                             label: label(field),
                             field,
-                            agg: 'sum',
+                            agg: cardAgg(fieldOf(field)),
                             filter: [],
                             sign: false,
                             lines: [],

package/package.json

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