@columenlabs/lumen-ui 0.1.46 → 0.1.48

package/README.md

@@ -74,6 +74,9 @@ Every export, its props and an example are on the [docs](https://lumen.columenla
 - Pickers are `LumenSelector`, side panels `LumenDrawer`, tabs `LumenTabs`, destructive confirms `LumenConfirm`; reach for the raw `ui/*` part only when no Lumen part fits.
 - Every card body sits in `LumenBoundary`, so one crash never blanks a page.
 - Numbers use tabular figures and a true minus `−`; a gain or loss always shows a sign or arrow.
+- A page's header numbers are metric cards: `TileRow` of `Tile` (or `TileToggleGroup` when they pick what the page shows), with `fill` so they share the row, each with `spark` set to its daily history where it has one. Don't build a card of your own for this.
+- A metered column (use against an allowance) shows one number per cell with `UnitValue` (right-aligned number, fixed muted unit slot, status dot), never `value [pct]`. Offer both readings through the field's `showAs` (Amount / % of allowance, picked per column in Edit view, saved as `shows`); default amounts for sizes (storage) and shares for capped counts. Put the other reading, the allowance and the cost formula in a hover card. Totals use `rollRender`: sum amounts with their unit; a share is the rows' total over their allowance, never a sum of percents.
+- A floating bulk-action bar over a table's selection: Apply clears the selection and the bar goes away; the toast's Undo restores the change, not the selection. Cancel keeps the selection.
 - Bars in a column line up: use `ShareMeter` (fixed track, fixed right-aligned number), never a bar sized by its label.
 - Table rows are one line. A cell shows one value (with a small bar or tag at most); anything more (other metrics, the allowance, a breakdown) goes in a hover tooltip, never in stacked text or sub-rows.
 - Chart colours are theme tokens (`var(--chart-1)`, `useChartTokens()`), never hex picked for one theme; `LumenEChart` resolves `var(--…)` in its option so sparklines read in light and dark.

package/dist/index.d.ts

@@ -22,6 +22,7 @@ export { LumenChoice, type LumenChoiceOption } from './lumen-choice.js';
 export { LumenSecret } from './lumen-secret.js';
 export { RankedBars, StackedBars, StackedColumns } from './lumen-widget-charts.js';
 export { ShareMeter } from './share-meter.js';
+export { UnitValue } from './unit-value.js';
 export { COVERAGE_LEVELS, CoverageCell, type CoverageJobState, type CoverageLevel, CoverageLegend, coverageClass, coverageLabel, coverageLevel, } from './coverage-cells.js';
 export { type CoverageBlock, type CoverageData, type CoverageFact, type CoveragePick, type CoverageRow, type CoverageSummary, LumenCoverageMap, type LumenCoverageMapProps, blockName, blockOf, } from './coverage-map.js';
 export { type CalendarFact, LumenCoverageCalendarMap, type LumenCoverageCalendarMapProps, } from './coverage-calendar-map.js';
@@ -67,7 +68,7 @@ export { OriginLegend, originsOf } from './origin-legend.js';
 export { type ConnectedDomain, ConnectOffer, connectionFields, linkGroupId } from './connections.js';
 export { FRESHNESS, type Freshness, FreshnessIcon, FreshnessMark, freshnessLine, freshnessOf, } from './freshness.js';
 export { SourcesLine, useSourceHealth } from './source-health.js';
-export { TILE_WIDTH, Tile, TileChip, type TileOption, TileRow, TileToggleGroup, } from './tile.js';
+export { TILE_WIDTH, Tile, TileChip, type TileOption, TileRow, TileSpark, TileToggleGroup, } from './tile.js';
 export { type FilterField, type FilterToken, LumenTokenizedFilter, type LumenFilterState, useLumenFilter, } from './lumen-filter.js';
 export { useIsMobile } from './hooks/use-mobile.js';
 export { VIEW_ICONS, iconOf, viewIcon } from './view-icons.js';

package/dist/index.js

@@ -29,6 +29,7 @@ export { LumenChoice } from './lumen-choice.js';
 export { LumenSecret } from './lumen-secret.js';
 export { RankedBars, StackedBars, StackedColumns } from './lumen-widget-charts.js';
 export { ShareMeter } from './share-meter.js';
+export { UnitValue } from './unit-value.js';
 export { COVERAGE_LEVELS, CoverageCell, CoverageLegend, coverageClass, coverageLabel, coverageLevel, } from './coverage-cells.js';
 export { LumenCoverageMap, blockName, blockOf, } from './coverage-map.js';
 export { LumenCoverageCalendarMap, } from './coverage-calendar-map.js';
@@ -74,7 +75,7 @@ export { OriginLegend, originsOf } from './origin-legend.js';
 export { ConnectOffer, connectionFields, linkGroupId } from './connections.js';
 export { FRESHNESS, FreshnessIcon, FreshnessMark, freshnessLine, freshnessOf, } from './freshness.js';
 export { SourcesLine, useSourceHealth } from './source-health.js';
-export { TILE_WIDTH, Tile, TileChip, TileRow, TileToggleGroup, } from './tile.js';
+export { TILE_WIDTH, Tile, TileChip, TileRow, TileSpark, TileToggleGroup, } from './tile.js';
 export { LumenTokenizedFilter, useLumenFilter, } from './lumen-filter.js';
 export { useIsMobile } from './hooks/use-mobile.js';
 export { VIEW_ICONS, iconOf, viewIcon } from './view-icons.js';

package/dist/lumen-view.js

@@ -367,6 +367,7 @@ function sortingOf(sort, columns, serverSorts) {
     return columns.some((f) => f.key === sort.key) ? [{ id: sort.key, desc: sort.desc }] : [];
 }
 function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null, chips = [], page = null, inView = false, fit = false, onDetails, tapped, selection, groupActions, sort, onSort, serverSorts, total = true, subgroup = null, add, serverGroups = null, }) {
+    const isMobile = useIsMobile();
     const [sorting, setSorting] = useState(() => sortingOf(sort, columns, serverSorts));
     // A saved sort patched while the table is open (the assistant's card move) applies at once.
     const savedSort = JSON.stringify(sort ?? null);
@@ -555,7 +556,10 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
     const lead = Math.max(1, shown.findIndex((f, i) => i > 0 && rolls(f)) < 0
         ? shown.length
         : shown.findIndex((f, i) => i > 0 && rolls(f)));
-    const rollCell = (f, members) => rollsUp(f) ? (_jsx(ViewValueCell, { value: computed.roll(f, members), format: f.aggregate && isCountAgg(f.aggregate) ? 'rounded' : f.format, amount: f.aggregate !== 'count' && f.amount, compact: f.compact })) : null;
+    // On a phone the hideOnPhone columns are gone, so the label spans only the leading ones still
+    // drawn; spanning the hidden ones too pushed the group's totals right of their headers.
+    const leadSpan = Math.max(1, lead - (isMobile ? shown.slice(0, lead).filter((f) => f.hideOnPhone).length : 0));
+    const rollCell = (f, members) => rollsUp(f) && f.rollRender ? (f.rollRender(members)) : rollsUp(f) ? (_jsx(ViewValueCell, { value: computed.roll(f, members), format: f.aggregate && isCountAgg(f.aggregate) ? 'rounded' : f.format, amount: f.aggregate !== 'count' && f.amount, compact: f.compact })) : null;
     const rollCells = (members) => shown.map((f) => (_jsx(TableCell, { className: colOf(f), children: rollCell(f, members) }, f.key)));
     // A row's chevron opens one level under it, closed by default: its panel, else the view's
     // sub-group ("Each row opens"; None opens nothing).
@@ -654,7 +658,7 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
                                                             ? true
                                                             : members.some((m) => selection.keys.has(keyOf(m.original)))
                                                                 ? 'indeterminate'
-                                                                : false, onCheckedChange: (on) => toggle(members.map((m) => keyOf(m.original)), on === true), "aria-label": `Select every row of ${key}` }) })), shown.slice(lead - 1).map((f, i) => i === 0 ? (_jsxs(TableCell, { colSpan: lead, className: PINNED_GROUP, children: [_jsxs(Button, { variant: "ghost", size: "xs", className: "-mx-2 hover:bg-transparent aria-expanded:bg-transparent", "aria-expanded": open, "aria-label": `${open ? 'Collapse' : 'Expand'} ${key}`, onClick: () => serverGroups
+                                                                : false, onCheckedChange: (on) => toggle(members.map((m) => keyOf(m.original)), on === true), "aria-label": `Select every row of ${key}` }) })), shown.slice(lead - 1).map((f, i) => i === 0 ? (_jsxs(TableCell, { colSpan: leadSpan, className: PINNED_GROUP, children: [_jsxs(Button, { variant: "ghost", size: "xs", className: "-mx-2 hover:bg-transparent aria-expanded:bg-transparent", "aria-expanded": open, "aria-label": `${open ? 'Collapse' : 'Expand'} ${key}`, onClick: () => serverGroups
                                                                 ? serverGroups.onToggle(key)
                                                                 : setFlipped((c) => {
                                                                     const n = new Set(c);

package/dist/lumen-widget.d.ts

@@ -199,6 +199,7 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
         }[];
         formats?: Record<string, "compact" | "integer" | "number" | "percent" | "price" | "price_rounded" | "price_signed" | "rounded" | "signed" | "weight"> | undefined;
         aggs?: Record<string, "count" | "distinct" | "first" | "last" | "max" | "mean" | "min" | "none" | "sum"> | undefined;
+        shows?: Record<string, string> | undefined;
         group: {
             fields: string[];
             default: string | null;

package/dist/tile.d.ts

@@ -1,5 +1,12 @@
 import type { ReactNode } from 'react';
-export declare function Tile({ label, value, caption, lines, className, valueClassName, }: {
+/** A number's history as a small line and area, scaled to its own range; `color` is a theme
+ *  token (SVG reads CSS variables, so it follows the theme). Fewer than two points draw nothing. */
+export declare function TileSpark({ values, color, className, }: {
+    values: number[];
+    color?: string;
+    className?: string;
+}): import("react").JSX.Element | null;
+export declare function Tile({ label, value, caption, lines, className, valueClassName, spark, sparkColor, }: {
     label: ReactNode;
     value: ReactNode;
     caption?: ReactNode;
@@ -7,13 +14,19 @@ export declare function Tile({ label, value, caption, lines, className, valueCla
     lines?: ReactNode[];
     className?: string;
     valueClassName?: string;
+    /** The number's history (oldest first), drawn as a small line under it: a metric card. */
+    spark?: number[];
+    /** The line's colour, a theme token; left out, `var(--chart-1)`. */
+    sparkColor?: string;
 }): import("react").JSX.Element;
 /** Width of every header tile on desktop, toggle tiles and plain Tiles alike; shrinks to fit the row. */
 export declare const TILE_WIDTH = "lg:w-(--tile-width) lg:flex-initial";
-/** A page's header row of tiles: wraps on phones, one line on desktop. */
-export declare function TileRow({ children, className, ...props }: {
+/** A page's header row of tiles: wraps on phones, one line on desktop. `fill` shares the row's
+ *  width between its tiles (a row of metric cards) instead of the fixed tile width. */
+export declare function TileRow({ children, className, fill, ...props }: {
     children: ReactNode;
     className?: string;
+    fill?: boolean;
     'aria-label'?: string;
 }): import("react").JSX.Element;
 export interface TileOption {
@@ -21,14 +34,19 @@ export interface TileOption {
     label: string;
     value: ReactNode;
     caption?: ReactNode;
+    /** The option's history, a small line under its number (see `Tile`). */
+    spark?: number[];
+    sparkColor?: string;
 }
-export declare function TileToggleGroup({ options, selected, onSelect, label, className, }: {
+export declare function TileToggleGroup({ options, selected, onSelect, label, className, fill, }: {
     options: TileOption[];
     selected: string;
     onSelect: (id: string) => void;
     /** Accessible name of the group. */
     label: string;
     className?: string;
+    /** Spans the row, its tiles sharing the width (see `TileRow`). */
+    fill?: boolean;
 }): import("react").JSX.Element;
 /** A compact tile: a small caps label over one short value (a quote strip's IV, expiry and move). */
 export declare function TileChip({ label, value }: {

package/dist/tile.js

@@ -2,20 +2,35 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { cn } from './lib/utils.js';
 import { Card } from './ui/card.js';
 import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group.js';
-function TileBody({ label, value, caption, lines, valueClassName, }) {
-    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "w-full truncate text-xs text-muted-foreground", children: label }), _jsx("span", { className: cn('num truncate text-xl leading-7 font-semibold', valueClassName), children: value }), caption ? (_jsx("span", { className: "num line-clamp-2 text-xs text-muted-foreground", children: caption })) : null, lines?.map((l, i) => (_jsx("span", { className: "num line-clamp-2 text-xs text-muted-foreground", children: l }, i)))] }));
+/** A number's history as a small line and area, scaled to its own range; `color` is a theme
+ *  token (SVG reads CSS variables, so it follows the theme). Fewer than two points draw nothing. */
+export function TileSpark({ values, color = 'var(--chart-1)', className, }) {
+    if (values.length < 2)
+        return null;
+    const max = Math.max(...values);
+    const min = Math.min(0, ...values);
+    const span = max - min || 1;
+    const pts = values.map((v, i) => `${((i / (values.length - 1)) * 100).toFixed(2)},${(22 - ((v - min) / span) * 20).toFixed(2)}`);
+    return (_jsxs("svg", { viewBox: "0 0 100 24", preserveAspectRatio: "none", "aria-hidden": "true", 
+        // Inline size: a parent's `[&_svg]:size-4` (toggle items, buttons) must not shrink it.
+        style: { width: '100%', height: '1.5rem' }, className: cn('overflow-visible', className), children: [_jsx("polygon", { points: `0,24 ${pts.join(' ')} 100,24`, fill: color, fillOpacity: 0.15 }), _jsx("polyline", { points: pts.join(' '), fill: "none", stroke: color, strokeWidth: 1.5, strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" })] }));
 }
-export function Tile({ label, value, caption, lines, className, valueClassName, }) {
-    return (_jsx(Card, { size: "sm", className: cn('min-w-0 flex-1 basis-2/5 gap-0.5 px-3 lg:basis-auto', TILE_WIDTH, className), children: _jsx(TileBody, { label: label, value: value, caption: caption, lines: lines, valueClassName: valueClassName }) }));
+function TileBody({ label, value, caption, lines, valueClassName, spark, sparkColor, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "w-full truncate text-xs text-muted-foreground", children: label }), _jsx("span", { className: cn('num truncate text-xl leading-7 font-semibold', valueClassName), children: value }), caption ? (_jsx("span", { className: "num line-clamp-2 text-xs text-muted-foreground", children: caption })) : null, lines?.map((l, i) => (_jsx("span", { className: "num line-clamp-2 text-xs text-muted-foreground", children: l }, i))), spark ? _jsx(TileSpark, { values: spark, color: sparkColor, className: "mt-1 self-stretch" }) : null] }));
+}
+export function Tile({ label, value, caption, lines, className, valueClassName, spark, sparkColor, }) {
+    return (_jsx(Card, { size: "sm", className: cn('min-w-0 flex-1 basis-2/5 gap-0.5 px-3 lg:basis-auto', TILE_WIDTH, className), children: _jsx(TileBody, { label: label, value: value, caption: caption, lines: lines, valueClassName: valueClassName, spark: spark, sparkColor: sparkColor }) }));
 }
 /** Width of every header tile on desktop, toggle tiles and plain Tiles alike; shrinks to fit the row. */
 export const TILE_WIDTH = 'lg:w-(--tile-width) lg:flex-initial';
-/** A page's header row of tiles: wraps on phones, one line on desktop. */
-export function TileRow({ children, className, ...props }) {
-    return (_jsx("div", { className: cn('flex flex-wrap gap-2.5 lg:flex-nowrap', className), ...props, children: children }));
+/** A page's header row of tiles: wraps on phones, one line on desktop. `fill` shares the row's
+ *  width between its tiles (a row of metric cards) instead of the fixed tile width. */
+export function TileRow({ children, className, fill, ...props }) {
+    return (_jsx("div", { className: cn('flex flex-wrap gap-2.5 lg:flex-nowrap', fill && 'lg:*:w-auto lg:*:flex-1', className), ...props, children: children }));
 }
-export function TileToggleGroup({ options, selected, onSelect, label, className, }) {
-    return (_jsx(Card, { size: "sm", className: cn('min-w-0 gap-0 bg-border py-0 lg:w-fit lg:flex-initial', className), children: _jsx(ToggleGroup, { type: "single", spacing: 0, value: selected, onValueChange: (v) => v && onSelect(v), "aria-label": label, className: "grid w-full grid-cols-[repeat(auto-fit,minmax(6.5rem,1fr))] gap-px lg:flex lg:w-fit", children: options.map((o) => (_jsx(ToggleGroupItem, { value: o.id, "aria-label": o.label, className: "h-auto min-w-0 flex-col lg:w-(--tile-width) lg:shrink items-start justify-start gap-0.5 rounded-none! bg-card px-3 py-3 text-left font-normal data-[state=on]:bg-primary/5 data-[state=on]:shadow-[inset_0_-2px_0_var(--primary)]", children: _jsx(TileBody, { label: o.label, value: o.value, caption: o.caption }) }, o.id))) }) }));
+export function TileToggleGroup({ options, selected, onSelect, label, className, fill, }) {
+    return (_jsx(Card, { size: "sm", className: cn('min-w-0 gap-0 bg-border py-0 lg:w-fit lg:flex-initial', fill &&
+            'lg:w-full lg:*:data-[slot=toggle-group]:w-full lg:**:data-[slot=toggle-group-item]:flex-1', className), children: _jsx(ToggleGroup, { type: "single", spacing: 0, value: selected, onValueChange: (v) => v && onSelect(v), "aria-label": label, className: "grid w-full grid-cols-[repeat(auto-fit,minmax(6.5rem,1fr))] gap-px lg:flex lg:w-fit", children: options.map((o) => (_jsx(ToggleGroupItem, { value: o.id, "aria-label": o.label, className: "h-auto min-w-0 flex-col lg:w-(--tile-width) lg:shrink items-start justify-start gap-0.5 rounded-none! bg-card px-3 py-3 text-left font-normal data-[state=on]:bg-primary/5 data-[state=on]:shadow-[inset_0_-2px_0_var(--primary)]", children: _jsx(TileBody, { label: o.label, value: o.value, caption: o.caption, spark: o.spark, sparkColor: o.sparkColor }) }, o.id))) }) }));
 }
 /** A compact tile: a small caps label over one short value (a quote strip's IV, expiry and move). */
 export function TileChip({ label, value }) {

package/dist/unit-value.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export declare function UnitValue({ value, unit, tone, title, className, }: {
+    /** The number, already formatted (`231.4`). */
+    value: ReactNode;
+    /** Its unit (`GB`, `M`, `/day`); left out, the slot stays empty so the column still lines up. */
+    unit?: ReactNode;
+    /** Near (`warning`) or past (`loss`) a limit: tints the number and shows a dot. */
+    tone?: 'warning' | 'loss';
+    title?: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/unit-value.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from './lib/utils.js';
+export function UnitValue({ value, unit, tone, title, className, }) {
+    return (_jsxs("span", { title: title, className: cn('inline-flex w-full items-center justify-end gap-1 whitespace-nowrap', className), children: [_jsx("span", { className: cn('num text-right', tone === 'warning' && 'text-warning', tone === 'loss' && 'text-loss'), children: value }), _jsx("span", { className: "w-10 shrink-0 text-left text-muted-foreground text-xs", children: unit }), _jsx("span", { "aria-hidden": "true", className: cn('size-1.5 shrink-0 rounded-full', tone === 'warning' ? 'bg-warning' : tone === 'loss' ? 'bg-loss' : 'bg-transparent') })] }));
+}

package/dist/view-editor.js

@@ -1033,7 +1033,13 @@ function ColumnList({ base, domain, draft, setDraft, shownKeys, hiddenKeys, onEd
                                         }) }) })) : (_jsx(WhyOff, { note: groupNote(f), children: _jsx(Checkbox, { "aria-label": `Group by ${f.label}`, disabled: true, checked: false }) })), _jsx("span", { className: "max-md:hidden", children: chippable(f) ? (_jsx(LumenSelector, { label: `Show ${f.label} as`, size: "sm", className: "h-7 w-full", options: Object.entries(CHIP_LABELS).map(([v, l]) => ({
                                             value: v,
                                             label: v === 'inline' ? `On ${first?.label ?? 'first'}` : l,
-                                        })), value: placement(f.key), onChange: (v) => setPlacement(f.key, v) })) : f.format !== 'text' ? (_jsx(LumenSelector, { label: `Format of ${f.label}`, size: "sm", className: "h-7 w-full", options: formatOptions(), value: f.format, onChange: (v) => setDraft({
+                                        })), value: placement(f.key), onChange: (v) => setPlacement(f.key, v) })) : f.showAs && f.showAs.length > 1 ? (_jsx(LumenSelector, { label: `Show ${f.label} as`, size: "sm", className: "h-7 w-full", options: f.showAs.map((o) => ({ value: o.id, label: o.label })), value: draft.shows?.[f.key] ?? f.showAs[0]?.id ?? '', onChange: (v) => {
+                                            const { [f.key]: _, ...rest } = draft.shows ?? {};
+                                            setDraft({
+                                                ...draft,
+                                                shows: v === f.showAs?.[0]?.id ? rest : { ...rest, [f.key]: v },
+                                            });
+                                        } })) : f.format !== 'text' ? (_jsx(LumenSelector, { label: `Format of ${f.label}`, size: "sm", className: "h-7 w-full", options: formatOptions(), value: f.format, onChange: (v) => setDraft({
                                             ...draft,
                                             formats: {
                                                 ...draft.formats,

package/dist/view-model.d.ts

@@ -95,6 +95,22 @@ export interface ViewField<T> {
     /** Draws the cell instead of its formatted value (a sparkline); sorting and filters still use
      *  `value` (strategy lab). */
     render?: (row: T) => ReactNode;
+    /**
+     * Draws a group or Total row's cell from its rows instead of the rolled-up number: an amount with
+     * its unit, or a share worked out again as the rows' total over their allowance (never a sum of
+     * percents). Only where the field rolls up (`aggregate`).
+     */
+    rollRender?: (rows: T[]) => ReactNode;
+    /**
+     * Ways the column can read, picked per column in Edit view ("Show as"), e.g. an amount or its % of
+     * an allowance. The first is the field as defined; each other one's `field` replaces those parts
+     * of it (value, format, render, aggregate...). The pick saves with the view (`shows`).
+     */
+    showAs?: {
+        id: string;
+        label: string;
+        field?: Partial<Omit<ViewField<T>, 'key' | 'showAs'>>;
+    }[];
     /** The ticker a click on the cell charts in the app's chart dialog (an option charts its
      *  underlying); null leaves the row's cell plain. */
     chart?: (row: T) => string | null;

package/dist/view-model.js

@@ -101,14 +101,22 @@ export function withViewFields(domain, c) {
     const own = takesFormulas(domain) && formulasOf(c).length ? formulaFields(formulasOf(c)) : [];
     const picked = c.formats ?? {};
     const aggs = c.aggs ?? {};
-    if (!own.length && !Object.keys(picked).length && !Object.keys(aggs).length)
+    const shows = c.shows ?? {};
+    if (!own.length &&
+        !Object.keys(picked).length &&
+        !Object.keys(aggs).length &&
+        !Object.keys(shows).length)
         return domain;
     const mine = new Set(own.map((f) => f.key));
     // A text formula groups like any text field: each row's value is the formula
     // over that row alone. One that reads group_sum or total_sum depends on the rows shown, so it
     // cannot pick its own group.
     const rowValue = (f) => (r) => computedOf(full, [r], null).value(f, r);
-    const fields = [...domain.fields, ...own].map((f) => {
+    const shown = (f) => {
+        const alt = f.showAs?.find((o) => o.id === shows[f.key]);
+        return alt?.field ? { ...f, ...alt.field } : f;
+    };
+    const fields = [...domain.fields, ...own].map(shown).map((f) => {
         if (f.format === 'text') {
             if (!mine.has(f.key) || !f.formula)
                 return f;

package/dist/widget-settings.d.ts

@@ -97,6 +97,7 @@ export declare const readsRows: (card: ViewWidget) => card is {
         }[];
         formats?: Record<string, "compact" | "integer" | "number" | "percent" | "price" | "price_rounded" | "price_signed" | "rounded" | "signed" | "weight"> | undefined;
         aggs?: Record<string, "count" | "distinct" | "first" | "last" | "max" | "mean" | "min" | "none" | "sum"> | undefined;
+        shows?: Record<string, string> | undefined;
         group: {
             fields: string[];
             default: string | null;

package/package.json

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