@columenlabs/lumen-ui 0.1.45 → 0.1.47

package/dist/nav.js

@@ -12,9 +12,33 @@ import { useFolded } from './fold.js';
 import { cn } from './lib/utils.js';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible.js';
 import { SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, useSidebar, } from './ui/sidebar.js';
+/**
+ * How well a link matches where the person is: -1 when it doesn't, else higher for a closer
+ * match. A link's query (`/resources?label=a`) must be in the URL too, and each matched key
+ * outranks a bare path, so `?label=a` beats `/resources` on `/resources?label=a`.
+ */
+function useMatch() {
+    const { path, search } = useRouterState({
+        select: (s) => ({ path: s.location.pathname, search: s.location.searchStr }),
+    });
+    const here = new URLSearchParams(search);
+    return ({ to, exact }) => {
+        const [base = '', query] = to.split('?');
+        const want = new URLSearchParams(query);
+        for (const [k, v] of want)
+            if (here.get(k) !== v)
+                return -1;
+        const keys = [...want.keys()].length;
+        if (path === base)
+            return 2 + keys * 10;
+        if (!exact && path.startsWith(`${base.replace(/\/$/, '')}/`))
+            return 1 + keys * 10;
+        return -1;
+    };
+}
 function useActive() {
-    const path = useRouterState({ select: (s) => s.location.pathname });
-    return ({ to, exact }) => path === to || (!exact && path.startsWith(`${to.replace(/\/$/, '')}/`));
+    const match = useMatch();
+    return (i) => match(i) >= 0;
 }
 /**
  * A sidebar group whose header folds its items: bold caps, no icon. At rest
@@ -36,13 +60,13 @@ export function NavGroup({ label, items, pageType, }) {
 }
 const SECTION_BADGE = 'num group-data-[collapsible=icon]:hidden';
 /** One section item: a link, its badge, and the chevron and nested items when it has any. */
-function SectionRow({ item, active, onRemove, removeLabel, }) {
+function SectionRow({ item, activeId, onRemove, removeLabel, }) {
     const subs = item.items ?? [];
-    const subActive = subs.some((s) => active({ to: s.to, exact: true }));
-    const isActive = active({ to: item.to, exact: true }) && !subActive;
+    const subActive = activeId?.startsWith(`${item.id}/`) ?? false;
+    const isActive = activeId === item.id;
     // The open item shows no trash icon.
     const remove = item.fixed || isActive ? undefined : onRemove;
-    const row = (_jsxs(_Fragment, { children: [_jsx(SidebarMenuButton, { asChild: true, tooltip: item.title, isActive: isActive, children: _jsxs(Link, { to: item.to, children: [_jsx(item.icon, {}), _jsx("span", { children: item.title })] }) }), item.badge !== undefined && item.badge !== null && (_jsx(SidebarMenuBadge, { className: cn(SECTION_BADGE, subs.length > 0 && 'right-7', 
+    const row = (_jsxs(_Fragment, { children: [_jsx(SidebarMenuButton, { asChild: true, tooltip: item.title, isActive: isActive, children: _jsxs(Link, { to: item.to, children: [_jsx(item.icon, {}), _jsx("span", { children: item.title })] }) }), item.badge !== undefined && item.badge !== null && (_jsx(SidebarMenuBadge, { className: cn(SECTION_BADGE, 
                 // The remove icon shows on hover from md up, and always below it: make room there.
                 remove &&
                     'max-md:right-7 md:group-focus-within/menu-item:opacity-0 md:group-hover/menu-item:opacity-0'), children: item.badge })), remove && (_jsx(LumenConfirm, { title: `${removeLabel(item)}?`, action: "Remove", onConfirm: () => remove(item), children: _jsx(SidebarMenuAction, { showOnHover: true, "aria-label": removeLabel(item), title: removeLabel(item), 
@@ -50,7 +74,10 @@ function SectionRow({ item, active, onRemove, removeLabel, }) {
                     className: "text-muted-foreground peer-hover/menu-button:text-muted-foreground hover:bg-transparent hover:text-destructive", children: _jsx(Trash2Icon, {}) }) }))] }));
     if (!subs.length)
         return _jsx(SidebarMenuItem, { children: row });
-    return (_jsx(Collapsible, { asChild: true, defaultOpen: item.defaultOpen || subActive || active(item), className: "group/collapsible", children: _jsxs(SidebarMenuItem, { children: [row, _jsx(CollapsibleTrigger, { asChild: true, children: _jsx(SidebarMenuAction, { "aria-label": `Show or hide ${item.title}`, className: "data-[state=open]:rotate-90", children: _jsx(ChevronRightIcon, {}) }) }), _jsx(CollapsibleContent, { children: _jsx(SidebarMenuSub, { children: subs.map((sub) => (_jsx(SidebarMenuSubItem, { children: _jsx(SidebarMenuSubButton, { asChild: true, isActive: active({ to: sub.to, exact: true }), children: _jsxs(Link, { to: sub.to, children: [sub.color && (_jsx("span", { "aria-hidden": true, className: "size-2 shrink-0 rounded-full", style: { background: sub.color } })), _jsx("span", { children: sub.title })] }) }) }, sub.id))) }) })] }) }));
+    return (_jsx(Collapsible, { asChild: true, defaultOpen: item.defaultOpen || subActive || isActive, className: "group/collapsible", children: _jsxs(SidebarMenuItem, { children: [row, _jsx(CollapsibleTrigger, { asChild: true, children: _jsx(SidebarMenuAction, { "aria-label": `Show or hide ${item.title}`, className: "right-auto left-1.5 bg-sidebar opacity-0 group-hover/menu-item:opacity-100 focus-visible:opacity-100 peer-data-[active=true]/menu-button:bg-sidebar-accent [&>svg]:transition-transform data-[state=open]:[&>svg]:rotate-90", children: _jsx(ChevronRightIcon, {}) }) }), _jsx(CollapsibleContent, { children: _jsx(SidebarMenuSub, { className: "mr-0 pr-0", children: subs.map((sub) => {
+                            const hasBadge = sub.badge !== undefined && sub.badge !== null;
+                            return (_jsxs(SidebarMenuSubItem, { children: [_jsx(SidebarMenuSubButton, { asChild: true, isActive: activeId === `${item.id}/${sub.id}`, className: cn(hasBadge && 'pr-8'), children: _jsxs(Link, { to: sub.to, title: sub.title, children: [sub.icon ? (_jsx("span", { "aria-hidden": true, className: "flex shrink-0 [&>svg]:size-4", style: { color: sub.color }, children: _jsx(sub.icon, {}) })) : (sub.color && (_jsx("span", { "aria-hidden": true, className: "mx-1 size-2 shrink-0 rounded-full", style: { background: sub.color } }))), _jsx("span", { children: sub.title })] }) }), hasBadge && (_jsx("span", { className: cn('pointer-events-none absolute top-1 right-1 flex h-5 min-w-5 items-center justify-center px-1 text-xs text-muted-foreground', typeof sub.badge === 'number' && 'num'), children: sub.badge }))] }, sub.id));
+                        }) }) })] }) }));
 }
 /**
  * A section of things a person keeps (views, trades, a watchlist): `+` adds one, the
@@ -66,8 +93,22 @@ export function SidebarSection({ label, items, onAdd, addLabel = `Add to ${label
             type: assistantSubType ?? 'page',
         })),
     ]), label, pageType);
-    const active = useActive();
+    const match = useMatch();
+    // One selected row per section: the closest match wins, the first on a tie, so two items that
+    // open the same page never both look selected. An open parent is never selected for being open.
+    let activeId = null;
+    let best = -1;
+    for (const i of items) {
+        const own = match({ to: i.to, exact: true });
+        if (own > best)
+            [best, activeId] = [own, i.id];
+        for (const sub of i.items ?? []) {
+            const m = match({ to: sub.to, exact: true });
+            if (m > best)
+                [best, activeId] = [m, `${i.id}/${sub.id}`];
+        }
+    }
     return (_jsx(FoldGroup, { label: label, action: onAdd && (_jsx(SidebarGroupAction, { title: addLabel, "aria-label": addLabel, onClick: onAdd, children: _jsx(PlusIcon, {}) })), children: _jsxs(SidebarGroupContent, { children: [_jsxs(SidebarMenu, { children: [loading
                             ? [0, 1].map((i) => (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuSkeleton, { showIcon: true }) }, i)))
-                            : items.map((item) => (_jsx(SectionRow, { item: item, active: active, onRemove: onRemove, removeLabel: removeLabel }, item.id))), !loading && !items.length && empty && (_jsx("li", { className: "px-2 py-1 text-xs text-muted-foreground group-data-[collapsible=icon]:hidden", children: empty }))] }), children] }) }));
+                            : items.map((item) => (_jsx(SectionRow, { item: item, activeId: activeId, onRemove: onRemove, removeLabel: removeLabel }, item.id))), !loading && !items.length && empty && (_jsx("li", { className: "px-2 py-1 text-xs text-muted-foreground group-data-[collapsible=icon]:hidden", children: empty }))] }), children] }) }));
 }

package/dist/share-meter.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+export declare function ShareMeter({ value, label, color, wide, className, }: {
+    /** 0 to 1 fills the bar; past 1 it stays full. */
+    value: number;
+    /** The number beside the bar, e.g. `113%`; left out, the rounded percent. */
+    label?: ReactNode;
+    /** The bar's colour, a theme token (`var(--loss)` when over). */
+    color?: string;
+    /** Fills its cell (a list row) instead of the fixed table width. */
+    wide?: boolean;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/share-meter.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from './lib/utils.js';
+import { Progress } from './ui/progress.js';
+export function ShareMeter({ value, label, color = 'var(--primary)', wide, className, }) {
+    return (_jsxs("span", { className: cn('inline-flex items-center gap-2', wide && 'w-full', className), children: [_jsx(Progress, { value: Math.max(0, Math.min(value, 1)) * 100, className: cn('h-1.5 shrink-0 [&>[data-slot=progress-indicator]]:bg-(--meter-color)', wide ? 'w-full shrink' : 'w-14'), style: { '--meter-color': color } }), _jsx("span", { className: "num w-11 shrink-0 text-right text-xs", children: label ?? `${Math.round(value * 100)}%` })] }));
+}

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 gap-0.5 px-3', 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-edit-cell.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type ComponentType, type ReactNode } from 'react';
 export declare function EditCell({ label, value, options, unused, chip, note, colorOf, fixed, edited, onSave, }: {
     /** The field's name, e.g. `Basket`. */
     label: string;
@@ -23,13 +23,17 @@ export declare function EditCell({ label, value, options, unused, chip, note, co
  * a tap opens a picker that ticks any number and takes a typed name, and closing it saves them all
  * at once. Clicks stay off the row, which opens its details.
  */
-export declare function EditManyCell({ label, values, options, unused, note, colorOf, onSave, }: {
+export declare function EditManyCell({ label, values, options, unused, note, colorOf, iconOf, onSave, }: {
     label: string;
     values: string[];
     options: string[];
     unused?: string[];
     note?: string;
     colorOf?: (value: string) => string | undefined;
+    /** A value's icon (a label's), drawn in its colour on its chip and in the picker. */
+    iconOf?: (value: string) => ComponentType<{
+        className?: string;
+    }> | undefined;
     onSave: (values: string[]) => Promise<unknown>;
 }): import("react").JSX.Element;
 /**

package/dist/view-edit-cell.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // opens its details.
 import { PencilLineIcon, PlusIcon, XIcon } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
-import { ColorChip, colorIcon } from './color-dot.js';
+import { ColorChip, colorIcon, tintedIcon } from './color-dot.js';
 import { cn } from './lib/utils.js';
 import { LumenSelector } from './lumen-selector.js';
 import { Input } from './ui/input.js';
@@ -69,7 +69,7 @@ export function EditCell({ label, value, options, unused = [], chip, note, color
  * a tap opens a picker that ticks any number and takes a typed name, and closing it saves them all
  * at once. Clicks stay off the row, which opens its details.
  */
-export function EditManyCell({ label, values, options, unused = [], note, colorOf, onSave, }) {
+export function EditManyCell({ label, values, options, unused = [], note, colorOf, iconOf, onSave, }) {
     const [open, setOpen] = useState(false);
     const [draft, setDraft] = useState(values);
     const [error, setError] = useState(null);
@@ -99,7 +99,12 @@ export function EditManyCell({ label, values, options, unused = [], note, colorO
     };
     const row = (o) => {
         const c = colorOf?.(o);
-        return { value: o, label: o, ...(c ? { icon: colorIcon(c) } : {}) };
+        const i = iconOf?.(o);
+        return {
+            value: o,
+            label: o,
+            ...(i ? { icon: tintedIcon(i, c) } : c ? { icon: colorIcon(c) } : {}),
+        };
     };
     const all = [...options, ...unused];
     const picked = draft.filter((v) => !all.includes(v));
@@ -107,7 +112,7 @@ export function EditManyCell({ label, values, options, unused = [], note, colorO
         { label: 'In use', options: [...options, ...picked].map(row) },
         { label: 'Unused', options: unused.map(row) },
     ];
-    return (_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1", onClick: stop, onKeyDown: stop, children: [values.length > 0 && (_jsx("button", { type: "button", "aria-label": `${label}: ${values.join(', ')}`, className: "flex min-w-0 flex-wrap items-center gap-1 rounded text-left", onClick: start, children: values.map((v) => (_jsx(ColorChip, { color: colorOf?.(v), children: v }, v))) })), _jsx(LumenSelector, { multiple: true, trigger: "icon", icon: values.length ? PencilLineIcon : PlusIcon, size: "sm", label: values.length ? `Change ${label.toLowerCase()}` : `Add ${label.toLowerCase()}`, className: cn('size-6 text-muted-foreground', values.length
+    return (_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1", onClick: stop, onKeyDown: stop, children: [values.length > 0 && (_jsx("button", { type: "button", "aria-label": `${label}: ${values.join(', ')}`, className: "flex min-w-0 items-center gap-1 overflow-hidden rounded text-left", onClick: start, children: values.map((v) => (_jsx(ColorChip, { color: colorOf?.(v), icon: iconOf?.(v), children: v }, v))) })), _jsx(LumenSelector, { multiple: true, trigger: "icon", icon: values.length ? PencilLineIcon : PlusIcon, size: "sm", label: values.length ? `Change ${label.toLowerCase()}` : `Add ${label.toLowerCase()}`, className: cn('size-6 text-muted-foreground', values.length
                     ? 'opacity-0 group-hover/row:opacity-100 focus-visible:opacity-100 max-md:opacity-100'
                     : '-ml-1'), groups: groups, value: draft, disabled: saving, empty: `Type a ${label.toLowerCase()} name.`, create: (q) => q.trim() || null, createLabel: (q) => `Add “${q.trim()}”`, open: open, onOpenChange: (o) => {
                     if (o)

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

@@ -1,7 +1,7 @@
 import type { JoinKey } from '@columenlabs/lumen-ui-types/domains';
 import { type CustomViewConfig, type ViewAgg, type ViewChip, type ViewFormat, type ViewTotalAgg } from '@columenlabs/lumen-ui-types/views';
 import type { LucideIcon } from 'lucide-react';
-import type { ReactNode } from 'react';
+import type { ComponentType, ReactNode } from 'react';
 import type { ChartBand, ChartMarker, Series } from './growth-chart.js';
 export type ViewCellValue = number | string | null;
 /** One field of a data domain: how to read it, show it, filter, group and roll it up. */
@@ -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;
@@ -107,6 +123,10 @@ export interface ViewField<T> {
      * cell, its chip and the edit picker. A CSS colour; a theme token reads in light and dark.
      */
     color?: (value: string) => string | undefined;
+    /** A text value's icon (a label's), drawn in its `color` on its chip and in the edit picker. */
+    iconOf?: (value: string) => ComponentType<{
+        className?: string;
+    }> | undefined;
     /** The cell's background, a theme colour mix (a P/L heat grid). */
     tint?: (row: T) => string | undefined;
     /** Left out on phones, where the table has no room for it (a returns table's longer windows). */
@@ -323,7 +343,7 @@ export declare const tilesOf: (c: CustomViewConfig) => ({
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     sign: boolean;
@@ -336,7 +356,7 @@ export declare const tilesOf: (c: CustomViewConfig) => ({
             key: string;
             value: string;
             not?: boolean | undefined;
-            op?: "between" | "eq" | "gt" | "lt" | undefined;
+            op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
             link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
         }[];
         suffix: string;

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/whats-new.js

@@ -3,7 +3,8 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // every app): the version in the status bar opens the release notes, newest
 // first, each release's Key takeaways only. An app turns it on with LumenShell's `releases`, its
 // releases API (`GET ?limit=&before=` answering `{releases}`), which leaves out what the person can't
-// open; a host that answers 404 (self-host an app) keeps the version hidden. With `apps`, each
+// open; a host that answers 404 (self-host an app) keeps the button hidden. Until the first release
+// the button reads "What's new" and opens an empty state, so a new app shows it from day one. With `apps`, each
 // takeaway carries a chip of the app it is about (`apps` on the takeaway; none: everyone), and a
 // release where one app has `GROUP_AT` or more is split into one sub-section per app.
 import { useInfiniteQuery } from '@tanstack/react-query';
@@ -50,12 +51,13 @@ export function WhatsNew({ api, apps, everyone = 'Global', }) {
         staleTime: 30 * 60_000,
         retry: false,
     });
-    const releases = q.data?.pages.flatMap((p) => p ?? []) ?? [];
-    const latest = releases[0];
-    if (!latest)
+    // Hidden while loading, on an error, and when the host has no releases API (404).
+    if (!q.data || q.data.pages[0] === null)
         return null;
+    const releases = q.data.pages.flatMap((p) => p ?? []);
+    const latest = releases[0];
     const day = (at) => new Date(at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', timeZone });
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "sm", className: "num h-6 px-1.5 text-muted-foreground text-xs", onClick: () => setOpen(true), title: "What's new", children: latest.tag }), _jsx(LumenDrawer, { open: open, onClose: () => setOpen(false), title: "What's new", description: "Key takeaways of each release, newest first", footerStart: `${releases.length} releases`, footer: _jsxs(_Fragment, { children: [q.hasNextPage && (_jsx(Button, { variant: "outline", size: "sm", disabled: q.isFetchingNextPage, onClick: () => q.fetchNextPage(), children: "Show more" })), _jsx(Button, { size: "sm", onClick: () => setOpen(false), children: "Close" })] }), children: releases.map((r, i) => (_jsx(DrawerSection, { title: r.tag, hint: day(r.published_at), defaultOpen: i === 0, children: r.takeaways.length ? (_jsx(Notes, { takeaways: r.takeaways, apps: apps, everyone: everyone })) : (_jsx("p", { className: "py-1 pl-1 text-muted-foreground text-sm", children: "Nothing new for you in this one." })) }, r.tag))) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "sm", className: "num h-6 px-1.5 text-muted-foreground text-xs", onClick: () => setOpen(true), title: "What's new", children: latest?.tag ?? "What's new" }), _jsxs(LumenDrawer, { open: open, onClose: () => setOpen(false), title: "What's new", description: "Key takeaways of each release, newest first", footerStart: releases.length ? `${releases.length} releases` : undefined, footer: _jsxs(_Fragment, { children: [q.hasNextPage && (_jsx(Button, { variant: "outline", size: "sm", disabled: q.isFetchingNextPage, onClick: () => q.fetchNextPage(), children: "Show more" })), _jsx(Button, { size: "sm", onClick: () => setOpen(false), children: "Close" })] }), children: [!releases.length && (_jsx("p", { className: "py-2 text-muted-foreground text-sm", children: "No releases yet. Each release's key takeaways show here once it ships." })), releases.map((r, i) => (_jsx(DrawerSection, { title: r.tag, hint: day(r.published_at), defaultOpen: i === 0, children: r.takeaways.length ? (_jsx(Notes, { takeaways: r.takeaways, apps: apps, everyone: everyone })) : (_jsx("p", { className: "py-1 pl-1 text-muted-foreground text-sm", children: "Nothing new for you in this one." })) }, r.tag)))] })] }));
 }
 /** One release's takeaways: a flat list, or one sub-section per app once one app has many. */
 function Notes({ takeaways, apps, everyone, }) {

package/dist/widget-settings.d.ts

@@ -72,7 +72,7 @@ export declare const readsRows: (card: ViewWidget) => card is {
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     source?: string | undefined;
@@ -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;
@@ -135,7 +136,7 @@ export declare const readsRows: (card: ViewWidget) => card is {
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     source?: string | undefined;
@@ -170,7 +171,7 @@ export declare const readsRows: (card: ViewWidget) => card is {
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     source?: string | undefined;
@@ -195,7 +196,7 @@ export declare const readsRows: (card: ViewWidget) => card is {
             key: string;
             value: string;
             not?: boolean | undefined;
-            op?: "between" | "eq" | "gt" | "lt" | undefined;
+            op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
             link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
         }[];
         sign: boolean;
@@ -208,7 +209,7 @@ export declare const readsRows: (card: ViewWidget) => card is {
                 key: string;
                 value: string;
                 not?: boolean | undefined;
-                op?: "between" | "eq" | "gt" | "lt" | undefined;
+                op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
                 link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
             }[];
             suffix: string;
@@ -246,7 +247,7 @@ export declare const readsRows: (card: ViewWidget) => card is {
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     source?: string | undefined;
@@ -270,7 +271,7 @@ export declare const readsRows: (card: ViewWidget) => card is {
             key: string;
             value: string;
             not?: boolean | undefined;
-            op?: "between" | "eq" | "gt" | "lt" | undefined;
+            op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
             link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
         }[];
         sign: boolean;
@@ -283,7 +284,7 @@ export declare const readsRows: (card: ViewWidget) => card is {
                 key: string;
                 value: string;
                 not?: boolean | undefined;
-                op?: "between" | "eq" | "gt" | "lt" | undefined;
+                op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
                 link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
             }[];
             suffix: string;
@@ -316,7 +317,7 @@ export declare const readsRows: (card: ViewWidget) => card is {
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     source?: string | undefined;
@@ -353,7 +354,7 @@ export declare const readsRows: (card: ViewWidget) => card is {
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     source?: string | undefined;
@@ -388,7 +389,7 @@ export declare const readsRows: (card: ViewWidget) => card is {
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     source?: string | undefined;
@@ -423,7 +424,7 @@ export declare const readsRows: (card: ViewWidget) => card is {
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     source?: string | undefined;
@@ -461,7 +462,7 @@ export declare const readsRows: (card: ViewWidget) => card is {
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     source?: string | undefined;
@@ -493,7 +494,7 @@ export declare const readsRows: (card: ViewWidget) => card is {
         key: string;
         value: string;
         not?: boolean | undefined;
-        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        op?: "between" | "empty" | "eq" | "gt" | "lt" | undefined;
         link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
     }[];
     source?: string | undefined;

package/package.json

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