@columenlabs/lumen-ui 0.1.101 → 0.1.103

package/dist/date-fields.d.ts

@@ -0,0 +1,3 @@
+import type { ViewDomain } from './view-model.js';
+/** A trend's date candidates: text fields, the date-like ones first. */
+export declare const dateFields: <T>(domain: ViewDomain<T>) => import("./view-model.js").ViewField<T>[];

package/dist/date-fields.js

@@ -0,0 +1,10 @@
+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) => {
+    // A rendered text field still reads its raw value (a report date drawn as Tue, Oct 20).
+    const texts = domain.fields.filter((f) => f.format === 'text');
+    return [
+        ...texts.filter((f) => DATE_LIKE.test(f.key)),
+        ...texts.filter((f) => !DATE_LIKE.test(f.key)),
+    ];
+};

package/dist/index.d.ts

@@ -47,7 +47,7 @@ export { type ChartBand, type ChartMarker, GrowthChart, KEY_DATE_KINDS, KeyDateC
 export { FoldGroup, NavGroup, type NavItem, type SectionItem, type SectionSubItem, SidebarSection, } from './nav.js';
 export { type OverviewPageProps, type OverviewStage, type OverviewTone, type OverviewWidget, OverviewList, OverviewPage, ToneDot, } from './overview.js';
 export { type Crumb, IconButton, type IconButtonProps, Page, PageBody, PageHeader, type PageHeaderProps, } from './page.js';
-export { DEFAULT_PREFS, deviceTimeZone, type Prefs, TIME_ZONES, type Theme, type TimeZoneId, getPrefs, resolvedTheme, setPref, timeZoneLabel, usePrefs, ASSISTANT_WIDTH, } from './prefs.js';
+export { DEFAULT_PREFS, deviceTimeZone, type Prefs, TIME_ZONES, type Theme, type TimeZoneId, getPrefs, resolvedTheme, setPref, timeZoneLabel, usePrefs, zoneAbbr, ASSISTANT_WIDTH, } from './prefs.js';
 export { KIT, type KitConfig, configureLumen } from './kit-config.js';
 export { ConnectionBlock, ErrorLine, IntegrationRow, KeyTestLine, type KeyTestResult, TestBadge, errorText, useClock, } from './integrations.js';
 export { ConnectionBadge, type ConnectionField, type ConnectionLine, ConnectionLogo, type ConnectionSignin, type ConnectionStatus, type ConnectionTest, type ConnectionWay, LumenConnection, type LumenConnectionProps, activeWay, connectionStatus, } from './connection.js';

package/dist/index.js

@@ -54,7 +54,7 @@ export { GrowthChart, KEY_DATE_KINDS, KeyDateChips, PALETTE, benchColour, keyDat
 export { FoldGroup, NavGroup, SidebarSection, } from './nav.js';
 export { OverviewList, OverviewPage, ToneDot, } from './overview.js';
 export { IconButton, Page, PageBody, PageHeader, } from './page.js';
-export { DEFAULT_PREFS, deviceTimeZone, TIME_ZONES, getPrefs, resolvedTheme, setPref, timeZoneLabel, usePrefs, ASSISTANT_WIDTH, } from './prefs.js';
+export { DEFAULT_PREFS, deviceTimeZone, TIME_ZONES, getPrefs, resolvedTheme, setPref, timeZoneLabel, usePrefs, zoneAbbr, ASSISTANT_WIDTH, } from './prefs.js';
 export { KIT, configureLumen } from './kit-config.js';
 export { ConnectionBlock, ErrorLine, IntegrationRow, KeyTestLine, TestBadge, errorText, useClock, } from './integrations.js';
 export { ConnectionBadge, ConnectionLogo, LumenConnection, activeWay, connectionStatus, } from './connection.js';

package/dist/lumen-drawer-panels.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+type Size = `${number}%` | `${number}px`;
+export declare function DrawerPanels({ defaultSize, minSize, maxSize, children, }: {
+    defaultSize: Size;
+    minSize: Size;
+    maxSize: Size;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export {};

package/dist/lumen-drawer-panels.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from './ui/resizable.js';
+export function DrawerPanels({ defaultSize, minSize, maxSize, children, }) {
+    return (_jsxs(ResizablePanelGroup, { orientation: "horizontal", children: [_jsx(ResizablePanel, { minSize: "40%" }), _jsx(ResizableHandle, { withHandle: true, className: "pointer-events-auto" }), _jsx(ResizablePanel, { defaultSize: defaultSize, minSize: minSize, maxSize: maxSize, "data-slot": "lumen-drawer", className: "pointer-events-auto bg-popover shadow-lg", children: children })] }));
+}

package/dist/lumen-drawer.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 /** A drawer's width on desktop, as the resizable panel takes it ("32%", "320px"). */
 type Size = `${number}%` | `${number}px`;
 export interface LumenDrawerProps {

package/dist/lumen-drawer.js

@@ -1,10 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { XIcon } from 'lucide-react';
+import { useEffect } from 'react';
 import { useIsMobile } from './hooks/use-mobile.js';
 import { IconButton } from './icon-button.js';
+import { lazyPart } from './lazy-part.js';
 import { Button } from './ui/button.js';
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from './ui/resizable.js';
 import { Sheet, SheetClose, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from './ui/sheet.js';
+/** The resizable panels load with the first drawer opened; until then it opens at its default width. */
+const loadPanels = () => import('./lumen-drawer-panels.js');
+const DrawerPanels = lazyPart(() => loadPanels().then((m) => m.DrawerPanels));
 /**
  * The suite's one pullout drawer (named LumenDrawer), on every app.
  * Phone: a bottom sheet. Desktop: a right-side panel over the page whose width drags at its left
@@ -16,6 +20,13 @@ import { Sheet, SheetClose, SheetContent, SheetDescription, SheetHeader, SheetTi
  */
 export function LumenDrawer({ open, onClose, title, description, children, footer, footerStart, defaultSize = '32%', minSize = '320px', maxSize = '60%', }) {
     const isMobile = useIsMobile();
+    // Fetched once the page is idle, so the first drawer opened on a desktop has its panels ready.
+    useEffect(() => {
+        if (isMobile)
+            return;
+        const t = setTimeout(loadPanels, 2000);
+        return () => clearTimeout(t);
+    }, [isMobile]);
     const head = (_jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx(SheetTitle, { className: "truncate", title: typeof title === 'string' ? title : undefined, children: title }), _jsx(SheetDescription, { className: description ? 'truncate text-muted-foreground text-xs' : 'sr-only', title: typeof description === 'string' ? description : undefined, children: description ?? 'Details' })] }));
     const body = _jsx("div", { className: "flex flex-col px-4 pb-4", children: children });
     // Every drawer ends on a footer, styled like a dialog's: the body scrolls above it and always
@@ -26,5 +37,5 @@ export function LumenDrawer({ open, onClose, title, description, children, foote
     return (_jsx(Sheet, { open: open, onOpenChange: (o) => !o && onClose(), modal: isMobile, children: isMobile ? (_jsxs(SheetContent, { side: "bottom", className: "max-h-[85svh] gap-0 overflow-hidden", children: [_jsx(SheetHeader, { className: "order-first shrink-0 border-b pt-3", children: head }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto pt-2", children: body }), !plain && foot] })) : (_jsx(SheetContent, { side: "right", showCloseButton: false, 
             // The resize handle's grab zone is wider than the handle, so a drag can start on the
             // overlay; the panels library marks that pointerdown handled, and then it doesn't close.
-            onPointerDownOutside: (e) => e.detail.originalEvent.defaultPrevented && e.preventDefault(), className: "pointer-events-none! gap-0 border-0 bg-transparent shadow-none data-[side=right]:left-0 data-[side=right]:w-auto data-[side=right]:border-l-0 data-[side=right]:sm:max-w-none", children: _jsxs(ResizablePanelGroup, { orientation: "horizontal", children: [_jsx(ResizablePanel, { minSize: "40%" }), _jsx(ResizableHandle, { withHandle: true, className: "pointer-events-auto" }), _jsx(ResizablePanel, { defaultSize: defaultSize, minSize: minSize, maxSize: maxSize, "data-slot": "lumen-drawer", className: "pointer-events-auto bg-popover shadow-lg", children: _jsxs("section", { className: "flex h-full flex-col overflow-hidden", children: [_jsxs("header", { className: "flex shrink-0 items-center gap-2 border-b px-4 py-3", children: [head, _jsx(SheetClose, { asChild: true, children: _jsx(IconButton, { icon: XIcon, label: "Close", className: "ml-auto" }) })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto pt-2", children: body }), foot] }) })] }) })) }));
+            onPointerDownOutside: (e) => e.detail.originalEvent.defaultPrevented && e.preventDefault(), className: "pointer-events-none! gap-0 border-0 bg-transparent shadow-none data-[side=right]:left-0 data-[side=right]:w-auto data-[side=right]:border-l-0 data-[side=right]:sm:max-w-none", children: _jsx(DrawerPanels, { defaultSize: defaultSize, minSize: minSize, maxSize: maxSize, children: _jsxs("section", { className: "flex h-full flex-col overflow-hidden", children: [_jsxs("header", { className: "flex shrink-0 items-center gap-2 border-b px-4 py-3", children: [head, _jsx(SheetClose, { asChild: true, children: _jsx(IconButton, { icon: XIcon, label: "Close", className: "ml-auto" }) })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto pt-2", children: body }), foot] }) }) })) }));
 }

package/dist/lumen-layout.js

@@ -35,7 +35,6 @@ import { OriginLegend } from './origin-legend.js';
 import { IconButton, Page } from './page.js';
 import { SourcedCard } from './sourced-card.js';
 import { LumenCard, SummaryTiles } from './summary-cards.js';
-import { Button } from './ui/button.js';
 import { computedOf, filterFieldsOf, formulaBlanks, pick, subgroupOf, summaryCash, takesFormulas, withSavedFilters, withViewFields, } from './view-model.js';
 // Loaded when it first shows (lazy-part.tsx).
 const ViewEditDialog = lazyPart(() => import('./view-editor.js').then((m) => m.ViewEditDialog), null);

package/dist/lumen-trend.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // month or year, drawn as a line, area, stacked area, bars over time, combo, a spark or a tracker.
 // With the allocation, donut, bars and card styles they cover every Tremor visualization, drawn on
 // our own Recharts in ChartContainer. Worked out in the browser from the rows; nothing is fetched.
-import { isDollarFormat, } from '@columenlabs/lumen-ui-types/views';
+import { formatBytes, isDollarFormat, } from '@columenlabs/lumen-ui-types/views';
 import { useMemo } from 'react';
 import { Area, AreaChart, Bar, BarChart, CartesianGrid, ComposedChart, Line, LineChart, XAxis, YAxis, } from 'recharts';
 import { cn } from './lib/utils.js';
@@ -24,6 +24,8 @@ function short(v, format, hidden) {
     const abs = Math.abs(v);
     if (format === 'percent' || format === 'weight')
         return `${sign}${abs.toFixed(1)}%`;
+    if (format === 'bytes')
+        return `${sign}${formatBytes(abs)}`;
     if (isDollarFormat(format))
         return `${sign}$${COMPACT.format(abs)}`;
     return `${sign}${COMPACT.format(abs)}`;

package/dist/lumen-view.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { controlOn, isCountAgg, isDollarFormat, viewPageSizes, viewPaginationSchema, } from '@columenlabs/lumen-ui-types/views';
+import { bytesParts, controlOn, isCountAgg, isDollarFormat, viewPaginationSchema, } from '@columenlabs/lumen-ui-types/views';
 // Custom views: any number of views on any app, one page for all of them.
 // A data domain (holdings, chains, bars, series, research results) describes its fields once in a
 // `ViewDomain`; a view is a saved `CustomViewConfig` over that domain, written in the page's Edit
@@ -7,12 +7,9 @@ import { controlOn, isCountAgg, isDollarFormat, viewPageSizes, viewPaginationSch
 // one level deep with collapsible group rows, pivot, totals, sorting, paging), LumenTable and the
 // details drawer; LumenLayout (lumen-layout.tsx) is the page around it. Rows are the ones the app
 // already loaded; everything here runs on the client.
-import { DndContext, closestCenter } from '@dnd-kit/core';
-import { SortableContext, rectSortingStrategy } from '@dnd-kit/sortable';
 import { createPaginatedRowModel, createSortedRowModel, flexRender, rowPaginationFeature, rowSortingFeature, sortFns, tableFeatures, useTable, } from '@tanstack/react-table';
-import { ArrowDownIcon, ArrowUpIcon, ChartCandlestick, ChartSpline, ChevronLeftIcon, ChevronRightIcon, ChevronsDownIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, Columns3CogIcon, CornerDownRightIcon, DownloadIcon, Grid3x3Icon, LayoutDashboardIcon, ListCollapseIcon, PencilIcon, PlusIcon, Settings2Icon, SigmaIcon, SparklesIcon, TableIcon, UserPenIcon, } from 'lucide-react';
+import { ArrowDownIcon, ArrowUpIcon, ChartCandlestick, ChartSpline, ChevronRightIcon, ChevronsDownIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, Columns3CogIcon, CornerDownRightIcon, DownloadIcon, ListCollapseIcon, PlusIcon, SigmaIcon, UserPenIcon, } from 'lucide-react';
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useAssistantNote } from './assistant-context.js';
 import { ColorChip, ColorDot } from './color-dot.js';
 import { DrawerSection } from './drawer-section.js';
 import { useFloatingHead } from './floating-head.js';
@@ -21,31 +18,24 @@ import { useIsMobile } from './hooks/use-mobile.js';
 import { IconButton } from './icon-button.js';
 import { lazyPart } from './lazy-part.js';
 import { cn } from './lib/utils.js';
-import { LumenTokenizedFilter, useLumenFilter, } from './lumen-filter.js';
 import { useGridCell } from './lumen-grid.js';
 import { LumenSelector } from './lumen-selector.js';
-import { LumenLazy, LumenLoadFooter, LumenRefresh, LumenSkeleton, LumenStates, useLiveLoad, } from './lumen-source.js';
+import { LumenSkeleton, LumenStates, useLiveLoad } from './lumen-source.js';
 import { LumenWidget } from './lumen-widget.js';
 import { MAX_COMPARE, useSymbolChart } from './market/lumen-chart.js';
-import { Page } from './page.js';
 import { LumenPager } from './pager.js';
 import { maskAmount, useAmountsHidden } from './shell.js';
 import { useSymbolSheet } from './symbol-sheet-context.js';
-import { Tile } from './tile.js';
 import { Badge } from './ui/badge.js';
 import { Button } from './ui/button.js';
-import { Card } from './ui/card.js';
 import { Checkbox } from './ui/checkbox.js';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, } from './ui/dropdown-menu.js';
-import { Popover, PopoverAnchor, PopoverContent } from './ui/popover.js';
-import { Skeleton } from './ui/skeleton.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from './ui/dropdown-menu.js';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './ui/table.js';
-import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group.js';
 import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.js';
-import { UnitColumns } from './unit-value.js';
+import { UnitColumns, UnitValue } from './unit-value.js';
 import { EditCell, EditInputCell, EditManyCell } from './view-edit-cell.js';
 import { fieldOptions } from './view-formulas.js';
-import { CHIP_TONE, FORMULAS_GROUP, chipsOf, computedOf, filterFieldsOf, groupOf, label, pick, rollUp, rollsUp, subgroupOf, withSavedFilters, withViewFields, } from './view-model.js';
+import { CHIP_TONE, FORMULAS_GROUP, chipsOf, computedOf, groupOf, label, pick, rollUp, rollsUp, subgroupOf, } from './view-model.js';
 // Loaded when it first shows (lazy-part.tsx).
 const ViewEditDialog = lazyPart(() => import('./view-editor.js').then((m) => m.ViewEditDialog), null);
 export { CHIP_TONE, FORMULAS_GROUP, RUN_STATE_TONE } from './view-model.js';
@@ -104,6 +94,11 @@ export function ViewValueCell({ value, format, chip, tone, color, amount, compac
             return _jsx("span", { children: text });
         return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "block max-w-[24rem] truncate", children: text }) }), _jsx(TooltipContent, { className: "max-w-md whitespace-normal", children: text })] }));
     }
+    if (format === 'bytes' && !hidden) {
+        // A size: its number and unit in the column's unit slot, so a column of sizes lines up.
+        const [n, unit] = bytesParts(value);
+        return _jsx(UnitValue, { value: `${value < 0 ? MINUS : ''}${n}`, unit: unit });
+    }
     const abs = hidden ? maskAmount('0') : digitsOf(format, compact).format(Math.abs(value));
     const signed = format === 'signed' || format === 'percent' || format === 'price_signed';
     const sign = value < 0 ? MINUS : signed && value > 0 ? '+' : '';

package/dist/lumen-widget.d.ts

@@ -197,7 +197,7 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
             key: string;
             placement: "column" | "inline";
         }[];
-        formats?: Record<string, "compact" | "integer" | "number" | "percent" | "price" | "price_rounded" | "price_signed" | "rounded" | "signed" | "weight"> | undefined;
+        formats?: Record<string, "bytes" | "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: {

package/dist/lumen-widget.js

@@ -1,16 +1,17 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { OUTLOOK_INDEXES, marketWindows, } from '@columenlabs/lumen-ui-types/market';
+import { OUTLOOK_INDEXES } from '@columenlabs/lumen-ui-types/market';
 // LumenSavedWidget (as blocks; renamed): a page (LumenLayout) is an ordered list of cards, each a third, half, two thirds or the full width.
 // A card is the view (LumenView) or a widget. Chart and top-N widgets read every row of the view
 // (the table's filter is the table's), narrowed by their own tokens, and work their chart out here in the browser:
 // nothing new is fetched; market and price chart widgets read their own data. LumenLayout lays the
 // cards out; this file draws the card frame every card shares (its header, ↻ and ⋯ menu), each
 // widget, the Edit layout bar, Add widget (Pre-built and Build your own) and Edit widget.
-import { VIEW_CARD_KIND_NAMES, WIDGET_STYLES, controlOn, isDollarFormat, isOwnTile, isRowCard, isTableCard, trendBuckets, viewCardKinds, viewCardSchema, viewWidgetCatalog, widgetStyleId, widgetStyleOf, } from '@columenlabs/lumen-ui-types/views';
+import { VIEW_CARD_KIND_NAMES, WIDGET_STYLES, controlOn, isDollarFormat, isOwnTile, isRowCard, isTableCard, viewCardKinds, viewCardSchema, viewWidgetCatalog, widgetStyleId, widgetStyleOf, } from '@columenlabs/lumen-ui-types/views';
 import { ActivityIcon, ArrowDownIcon, ArrowUpIcon, BarChart3Icon, CandlestickChartIcon, ChartLineIcon, ChartPieIcon, CheckIcon, CodeIcon, CopyIcon, DatabaseIcon, EyeOffIcon, FoldVerticalIcon, FunnelIcon, GripVerticalIcon, InfoIcon, LayoutGridIcon, ListOrderedIcon, MoreHorizontalIcon, PackageIcon, PencilIcon, PlusIcon, RefreshCwIcon, RotateCcwIcon, Rows3Icon, SparklesIcon, SquareIcon, TableIcon, Trash2Icon, TrendingUpIcon, WrenchIcon, XIcon, } from 'lucide-react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useAssistant, useAssistantName } from './assistant-context.js';
 import { LumenConfirm } from './confirm.js';
+import { dateFields } from './date-fields.js';
 import { FoldChevron, useFolded, usePageKey } from './fold.js';
 import { useIsMobile } from './hooks/use-mobile.js';
 import { IconButton } from './icon-button.js';
@@ -18,7 +19,7 @@ import { useDomainReads } from './joins.js';
 import { lazyPart } from './lazy-part.js';
 import { cn } from './lib/utils.js';
 import { LumenBoundary } from './lumen-boundary.js';
-import { LumenTokenizedFilter, filterByTokens, useLumenFilter, } from './lumen-filter.js';
+import { filterByTokens } from './lumen-filter.js';
 import { useGridCell } from './lumen-grid.js';
 import { CardIdProvider, LinkDot, LinkPicker, linkVar, useLinks, } from './lumen-links.js';
 import { LumenSelector } from './lumen-selector.js';
@@ -26,27 +27,19 @@ import { LumenFreshness, LumenLazy, LumenLoadFooter, LumenRefresh, LumenStates,
 import { useHasMarket } from './market/live.js';
 import { useBarsUrl, useLumenChart } from './market/lumen-chart.js';
 import { maskAmount, useAmountsHidden } from './shell.js';
-import { SummaryCardsEditor, summaryCardIssues } from './summary-cards.js';
 import { Badge } from './ui/badge.js';
 import { Button } from './ui/button.js';
 import { Card } from './ui/card.js';
-import { Checkbox } from './ui/checkbox.js';
-import { Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, dialogBody, } from './ui/dialog.js';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, dialogBody, } from './ui/dialog.js';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from './ui/dropdown-menu.js';
-import { Input } from './ui/input.js';
 import { Label } from './ui/label.js';
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from './ui/popover.js';
 import { Skeleton } from './ui/skeleton.js';
-import { Switch } from './ui/switch.js';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './ui/table.js';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs.js';
-import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group.js';
 import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.js';
-import { fieldOptions } from './view-formulas.js';
-import { computedOf, label, summaryCash, } from './view-model.js';
-import { WidgetControlsEditor } from './widget-controls.js';
+import { computedOf } from './view-model.js';
 import { PAGE_SOURCE, useWidgetDataOptions } from './widget-data.js';
-import { dateFields } from './widget-settings.js';
 import { COMPACT, MINUS } from './widget-values.js';
 // Loaded when it first shows (lazy-part.tsx).
 const MarketWidget = lazyPart(() => import('./market/market-widget.js').then((m) => m.MarketWidget), _jsx(Skeleton, { className: "h-full min-h-40 w-full" }));

package/dist/people/sections.js

@@ -8,6 +8,7 @@ import { useMemo, useState } from 'react';
 import { LumenLayout } from '../lumen-layout.js';
 import { LumenSelector } from '../lumen-selector.js';
 import { useLumenLoad } from '../lumen-source.js';
+import { getPrefs } from '../prefs.js';
 import { Tile, TileRow } from '../tile.js';
 import { Button } from '../ui/button.js';
 import { CopyLink } from './invite-drawer.js';
@@ -258,7 +259,8 @@ export function AuditSection({ frame }) {
                 key: 'day',
                 label: 'Day',
                 icon: ClockIcon,
-                value: (e) => new Date(e.at).toLocaleDateString(undefined, {
+                value: (e) => new Date(e.at).toLocaleDateString('en-US', {
+                    timeZone: getPrefs().timeZone,
                     weekday: 'short',
                     day: 'numeric',
                     month: 'short',
@@ -270,7 +272,13 @@ export function AuditSection({ frame }) {
                 key: 'time',
                 label: 'When',
                 icon: ClockIcon,
-                value: (e) => new Date(e.at).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' }),
+                value: (e) => new Date(e.at).toLocaleTimeString('en-US', {
+                    timeZone: getPrefs().timeZone,
+                    // Two-digit hours keep a column of times aligned.
+                    hour: '2-digit',
+                    minute: '2-digit',
+                    timeZoneName: 'shortGeneric',
+                }),
                 format: 'text',
             },
             {

package/dist/people/shared.d.ts

@@ -6,7 +6,10 @@ import type { ViewChipTone } from '../view-model.js';
 import type { PeopleAdapter, WithSync } from './client.js';
 export declare const STATUS_LABEL: Record<PersonStatus, string>;
 export declare const statusTone: (p: Pick<Person, 'status'>) => ViewChipTone | undefined;
-/** `today 09:12`, `yesterday 18:42`, `24 Oct`, `24 Oct 2025`; a dash for never. */
+/**
+ * `today 9:12 AM PT`, `yesterday 6:42 PM PT`, `Oct 24`, `Oct 24, 2025`; a dash for never. Days and
+ * times are the person's time zone (Settings ▸ Preferences), not the device's.
+ */
 export declare function when(ts: number | null | undefined, now?: number): string;
 /** `in 5 d`, `in 3 h`, `2 d ago`: how far a time is from now. */
 export declare function fromNow(ts: number | null | undefined, now?: number): string;

package/dist/people/shared.js

@@ -8,6 +8,7 @@ import { useCallback, useState } from 'react';
 import { errorText } from '../integrations.js';
 import { LumenSelector } from '../lumen-selector.js';
 import { lumenToast } from '../lumen-toast.js';
+import { getPrefs } from '../prefs.js';
 export const STATUS_LABEL = {
     active: 'Active',
     invited: 'Invited',
@@ -22,24 +23,33 @@ export const statusTone = (p) => p.status === 'active'
             ? 'amber'
             : 'muted';
 const DAY = 86_400_000;
-/** Non-breaking spaces, so `today 07:18 PM` and `in 7 d` never split across lines in any text. */
+/** Non-breaking spaces, so `today 7:18 PM PT` and `in 7 d` never split across lines in any text. */
 const glue = (s) => s.replace(/ /g, '\u00a0');
-const sameDay = (a, b) => a.toDateString() === b.toDateString();
-/** `today 09:12`, `yesterday 18:42`, `24 Oct`, `24 Oct 2025`; a dash for never. */
+/**
+ * `today 9:12 AM PT`, `yesterday 6:42 PM PT`, `Oct 24`, `Oct 24, 2025`; a dash for never. Days and
+ * times are the person's time zone (Settings ▸ Preferences), not the device's.
+ */
 export function when(ts, now = Date.now()) {
     if (!ts)
         return '—';
-    const d = new Date(ts);
-    const n = new Date(now);
-    const time = d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
-    if (sameDay(d, n))
+    const { timeZone } = getPrefs();
+    const day = (t) => new Date(t).toLocaleDateString('en-US', { timeZone });
+    const year = (t) => new Date(t).toLocaleDateString('en-US', { timeZone, year: 'numeric' });
+    const time = new Date(ts).toLocaleTimeString('en-US', {
+        timeZone,
+        hour: 'numeric',
+        minute: '2-digit',
+        timeZoneName: 'shortGeneric',
+    });
+    if (day(ts) === day(now))
         return glue(`today ${time}`);
-    if (sameDay(d, new Date(now - DAY)))
+    if (day(ts) === day(now - DAY))
         return glue(`yesterday ${time}`);
-    return glue(d.toLocaleDateString(undefined, {
+    return glue(new Date(ts).toLocaleDateString('en-US', {
+        timeZone,
         day: 'numeric',
         month: 'short',
-        ...(d.getFullYear() === n.getFullYear() ? {} : { year: 'numeric' }),
+        ...(year(ts) === year(now) ? {} : { year: 'numeric' }),
     }));
 }
 /** `in 5 d`, `in 3 h`, `2 d ago`: how far a time is from now. */

package/dist/prefs.d.ts

@@ -69,5 +69,7 @@ export declare const resolvedTheme: (p?: Prefs) => 'light' | 'dark';
 export declare function setPref<K extends keyof Prefs>(key: K, value: Prefs[K]): void;
 export declare const getPrefs: () => Prefs;
 export declare function usePrefs(): Prefs;
+/** A zone's short generic name, as people say it next to a time: `PT`, `ET`, `UTC` (never PDT or PST). */
+export declare function zoneAbbr(tz: string, at?: Date): string;
 /** `Pacific`, `UTC`: the short name shown next to times. */
 export declare const timeZoneLabel: (id: TimeZoneId) => "America/Chicago" | "America/Los_Angeles" | "America/New_York" | "Central" | "Eastern" | "Pacific" | "UTC";

package/dist/prefs.js

@@ -130,5 +130,15 @@ export function usePrefs() {
         return () => listeners.delete(cb);
     }, getPrefs, () => DEFAULT_PREFS);
 }
+/** A zone's short generic name, as people say it next to a time: `PT`, `ET`, `UTC` (never PDT or PST). */
+export function zoneAbbr(tz, at = new Date()) {
+    // Intl names UTC "GMT+0"; people say UTC.
+    if (/^(Etc\/)?(UTC|GMT|Universal|Zulu)$/.test(tz))
+        return 'UTC';
+    const part = new Intl.DateTimeFormat('en-US', { timeZone: tz, timeZoneName: 'shortGeneric' })
+        .formatToParts(at)
+        .find((p) => p.type === 'timeZoneName');
+    return part?.value ?? tz;
+}
 /** `Pacific`, `UTC`: the short name shown next to times. */
 export const timeZoneLabel = (id) => TIME_ZONES.find((z) => z.id === id)?.label ?? id;

package/dist/schedules.js

@@ -11,7 +11,7 @@ import { LumenConfirm } from './confirm.js';
 import { useIsMobile } from './hooks/use-mobile.js';
 import { LumenSelector } from './lumen-selector.js';
 import { IconButton } from './page.js';
-import { timeZoneLabel, usePrefs } from './prefs.js';
+import { usePrefs, zoneAbbr } from './prefs.js';
 import { useShell } from './shell.js';
 import { Badge } from './ui/badge.js';
 import { Button } from './ui/button.js';
@@ -47,14 +47,53 @@ const daysText = (days) => {
         return 'Weekdays';
     return d.map((x) => DAYS[x]).join(', ');
 };
-const zoneText = (tz) => tz.split('/').pop()?.replace('_', ' ') ?? tz;
-/** When it runs, in words. */
-function when(s) {
+/** A window that spans the whole day on every day says nothing a person needs. */
+const allDay = (s) => s.days.length === 7 && s.from === '00:00' && (s.to === '23:59' || s.to === '24:00');
+/** The zone's offset from UTC at `at`, in ms (positive east of UTC). */
+const offsetOf = (tz, at) => {
+    const p = Object.fromEntries(new Intl.DateTimeFormat('en-US', {
+        timeZone: tz,
+        hourCycle: 'h23',
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+    })
+        .formatToParts(at)
+        .map((x) => [x.type, Number(x.value)]));
+    const n = (k) => p[k] ?? 0;
+    return (Date.UTC(n('year'), n('month') - 1, n('day'), n('hour'), n('minute')) -
+        Math.floor(at / 60_000) * 60_000);
+};
+/** `03:15` in `from` (today) as the same moment's clock in `to`: `03:15` UTC → `8:15 PM` PT. */
+const clockIn = (hhmm, from, to) => {
+    if (from === to)
+        return clockText(hhmm);
+    const [h = 0, m = 0] = hhmm.split(':').map(Number);
+    const now = new Date();
+    const wall = Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), h, m);
+    const at = wall - offsetOf(from, wall);
+    return new Date(at).toLocaleTimeString('en-US', {
+        timeZone: to,
+        hour: 'numeric',
+        minute: '2-digit',
+    });
+};
+/**
+ * When it runs, in words, in the viewer's zone (`zone`, the person's preference): `Every 6 h`,
+ * `Every 1 h · Weekdays 6:00 AM–2:00 PM PT`, `Daily at 8:15 PM PT`. Days stay the schedule's own.
+ */
+function when(s, zone) {
     if (s.when)
         return s.when;
-    if (s.kind === 'window')
-        return `${daysText(s.days)} ${clockText(s.from)}–${clockText(s.to)} ${zoneText(s.tz)}`;
-    return `Daily at ${clockText(s.from)} ${zoneText(s.tz)}`;
+    const at = (hhmm) => clockIn(hhmm, s.tz, zone);
+    if (s.kind === 'daily')
+        return `Daily at ${at(s.from)} ${zoneAbbr(zone)}`;
+    const every = `Every ${everyText(s.every)}`;
+    if (allDay(s))
+        return every;
+    return `${every} · ${daysText(s.days)} ${at(s.from)}–${at(s.to)} ${zoneAbbr(zone)}`;
 }
 function useTime() {
     const { timeZone } = usePrefs();
@@ -63,6 +102,7 @@ function useTime() {
         weekday: 'short',
         hour: 'numeric',
         minute: '2-digit',
+        timeZoneName: 'shortGeneric',
     });
 }
 function Last({ s, compact = false }) {
@@ -90,6 +130,7 @@ function TimeFields({ kind, draft, set, }) {
 function Editor({ s, onSave, onRun, onRuns, recent, briefs, onClose, }) {
     const assistantName = useAssistantName();
     const time = useTime();
+    const { timeZone } = usePrefs();
     const assistant = useAssistant();
     const { closeSettings } = useShell();
     const [brief, setBrief] = useState({
@@ -141,7 +182,7 @@ function Editor({ s, onSave, onRun, onRuns, recent, briefs, onClose, }) {
             setBusy(null);
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: s.name }), _jsx(SheetDescription, { children: when(s) })] }), _jsxs("div", { className: "grid grid-cols-1 gap-5 overflow-y-auto px-4", children: [_jsx("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-xs", children: [
+    return (_jsxs(_Fragment, { children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: s.name }), _jsx(SheetDescription, { children: when(s, timeZone) })] }), _jsxs("div", { className: "grid grid-cols-1 gap-5 overflow-y-auto px-4", children: [_jsx("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-xs", children: [
                             ['Inspects', s.about.inspects],
                             ['Processes', s.about.processes],
                             ['Enriches', s.about.enriches],
@@ -166,6 +207,7 @@ function Editor({ s, onSave, onRun, onRuns, recent, briefs, onClose, }) {
 /** The Settings ▸ Schedules section's body. */
 export function SchedulesSection({ schedules, error, onSave, onRun, onRuns, recent, briefs, }) {
     const isMobile = useIsMobile();
+    const { timeZone } = usePrefs();
     const { closeSettings } = useShell();
     const [open, setOpen] = useState(null);
     const [adding, setAdding] = useState(false);
@@ -178,15 +220,14 @@ export function SchedulesSection({ schedules, error, onSave, onRun, onRuns, rece
         }
         : undefined;
     const editing = schedules?.find((s) => s.id === open);
-    const { timeZone } = usePrefs();
     if (error)
         return _jsx("p", { className: "text-sm text-loss", children: error });
     if (!schedules)
         return _jsx(Skeleton, { className: "h-48 w-full" });
-    return (_jsxs(_Fragment, { children: [isMobile ? (_jsx("div", { className: "grid grid-cols-1 divide-y rounded-lg border", children: schedules.map((s) => (_jsxs("button", { type: "button", className: "grid grid-cols-[1fr_auto] items-center gap-x-3 gap-y-1 p-3 text-left hover:bg-muted/50", onClick: () => setOpen(s.id), children: [_jsx("span", { className: "font-medium", children: s.name }), _jsx(OnSwitch, { s: s, onSave: onSave }), _jsxs("span", { className: "col-span-2 text-xs text-muted-foreground", children: [s.kind === 'daily' ? '' : `Every ${everyText(s.every)} · `, when(s)] }), _jsx("span", { className: "col-span-2 text-xs", children: s.waiting ? _jsx("span", { className: "text-warning", children: s.waiting }) : _jsx(Last, { s: s }) })] }, s.id))) })) : (_jsx("div", { className: "overflow-x-auto overflow-y-hidden rounded-lg border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "w-12", children: "On" }), _jsx(TableHead, { children: "Schedule" }), _jsx(TableHead, { children: "When" }), _jsx(TableHead, { children: "Last run" }), onRuns ? _jsx(TableHead, { className: "w-0" }) : null] }) }), _jsx(TableBody, { children: schedules.map((s) => (_jsxs(TableRow, { className: "cursor-pointer", onClick: () => setOpen(s.id), children: [_jsx(TableCell, { children: _jsx(OnSwitch, { s: s, onSave: onSave }) }), _jsx(TableCell, { className: "font-medium", children: s.name }), _jsxs(TableCell, { className: "min-w-48 whitespace-normal text-muted-foreground", children: [s.kind === 'daily' ? '' : `Every ${everyText(s.every)} · `, when(s)] }), _jsx(TableCell, { className: "max-w-48", children: s.waiting ? (_jsx(Badge, { variant: "outline", className: "text-warning", title: s.waiting, children: "Not connected" })) : (_jsx(Last, { s: s, compact: true })) }), onRuns ? (_jsx(TableCell, { children: _jsx(IconButton, { icon: ListIcon, label: `${s.name} runs`, onClick: (e) => {
+    return (_jsxs(_Fragment, { children: [isMobile ? (_jsx("div", { className: "grid grid-cols-1 divide-y rounded-lg border", children: schedules.map((s) => (_jsxs("button", { type: "button", className: "grid grid-cols-[1fr_auto] items-center gap-x-3 gap-y-1 p-3 text-left hover:bg-muted/50", onClick: () => setOpen(s.id), children: [_jsx("span", { className: "font-medium", children: s.name }), _jsx(OnSwitch, { s: s, onSave: onSave }), _jsx("span", { className: "col-span-2 text-xs text-muted-foreground", children: when(s, timeZone) }), _jsx("span", { className: "col-span-2 text-xs", children: s.waiting ? _jsx("span", { className: "text-warning", children: s.waiting }) : _jsx(Last, { s: s }) })] }, s.id))) })) : (_jsx("div", { className: "overflow-x-auto overflow-y-hidden rounded-lg border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "w-12", children: "On" }), _jsx(TableHead, { children: "Schedule" }), _jsx(TableHead, { children: "When" }), _jsx(TableHead, { children: "Last run" }), onRuns ? _jsx(TableHead, { className: "w-0" }) : null] }) }), _jsx(TableBody, { children: schedules.map((s) => (_jsxs(TableRow, { className: "cursor-pointer", onClick: () => setOpen(s.id), children: [_jsx(TableCell, { children: _jsx(OnSwitch, { s: s, onSave: onSave }) }), _jsx(TableCell, { className: "font-medium", children: s.name }), _jsx(TableCell, { className: "min-w-48 whitespace-normal text-muted-foreground", children: when(s, timeZone) }), _jsx(TableCell, { className: "max-w-48", children: s.waiting ? (_jsx(Badge, { variant: "outline", className: "text-warning", title: s.waiting, children: "Not connected" })) : (_jsx(Last, { s: s, compact: true })) }), onRuns ? (_jsx(TableCell, { children: _jsx(IconButton, { icon: ListIcon, label: `${s.name} runs`, onClick: (e) => {
                                                 e.stopPropagation();
                                                 toRuns?.(s.id);
-                                            } }) })) : null] }, s.id))) })] }) })), _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsxs("p", { className: "text-xs text-muted-foreground", children: ["Last runs shown in ", timeZoneLabel(timeZone), ".", onRuns ? ' Each run is a line in Logs.' : ''] }), briefs ? (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setAdding(true), children: [_jsx(PlusIcon, {}), "Brief"] })) : null] }), briefs ? (_jsx(Sheet, { open: adding, onOpenChange: setAdding, children: _jsx(SheetContent, { side: isMobile ? 'bottom' : 'right', className: "gap-4", children: _jsx(NewBrief, { create: async (b, time) => {
+                                            } }) })) : null] }, s.id))) })] }) })), _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [onRuns ? (_jsx("p", { className: "text-xs text-muted-foreground", children: "Each run is a line in Logs." })) : (_jsx("span", {})), briefs ? (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setAdding(true), children: [_jsx(PlusIcon, {}), "Brief"] })) : null] }), briefs ? (_jsx(Sheet, { open: adding, onOpenChange: setAdding, children: _jsx(SheetContent, { side: isMobile ? 'bottom' : 'right', className: "gap-4", children: _jsx(NewBrief, { create: async (b, time) => {
                             const id = await briefs.create(b);
                             await onSave(id, time);
                             return id;

package/dist/settings.js

@@ -6,17 +6,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // sections (an app: Repos). On phone the list becomes a picker.
 // A search box tops the list and filters the rows on every section.
 // `?settings=<section>` in the URL opens it at that section (GitHub's install page returns there).
-import { LogOutIcon, MonitorIcon, MoonIcon, PaletteIcon, SearchIcon, ShieldCheckIcon, SlidersHorizontalIcon, SunIcon, UserRoundIcon, XIcon, } from 'lucide-react';
+import { MonitorIcon, MoonIcon, PaletteIcon, SearchIcon, ShieldCheckIcon, SlidersHorizontalIcon, SunIcon, UserRoundIcon, XIcon, } from 'lucide-react';
 import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState, } from 'react';
 import { createPortal } from 'react-dom';
-import { toast } from 'sonner';
 import { useAssistantMoves } from './assistant-screen.js';
 import { LumenSelector } from './lumen-selector.js';
 import { FONTS, FONT_SIZES, setPref, usePrefs, } from './prefs.js';
 import { TimeZoneSelect } from './status.js';
-import { Button } from './ui/button.js';
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from './ui/dialog.js';
-import { Input } from './ui/input.js';
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from './ui/input-group.js';
 import { Label } from './ui/label.js';
 import { Separator } from './ui/separator.js';

package/dist/summary-cards-editor.d.ts

@@ -0,0 +1,19 @@
+import { type ViewTile } from '@columenlabs/lumen-ui-types/views';
+import { type FilterField } from './lumen-filter.js';
+import { type ViewDomain } from './view-model.js';
+/**
+ * The Summary's cards in Edit widget: a grid to pick and drag, the domain's own cards to add or
+ * remove, and the picked card of the view's own: its main number (label, roll-up, field, rows,
+ * colour by sign) and its secondary lines.
+ */
+export declare function SummaryCardsEditor<T>({ domain, tiles, onChange, rows, fields, problems, one, }: {
+    domain: ViewDomain<T>;
+    tiles: ViewTile[];
+    onChange: (tiles: ViewTile[]) => void;
+    /** One card only (LumenCard): a built-in replaces it and there is no Add card. */
+    one?: boolean;
+    /** The Summary's rows, for the previews. */
+    rows: T[];
+    fields: FilterField<T>[];
+    problems: (string | null)[];
+}): import("react").JSX.Element;

package/dist/summary-cards-editor.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The cards part of the Summary's Edit widget (cards reorder by drag), in a file of its own so the
+// drag library loads with the editor, not with every page that draws a Summary.
+import { MAX_TILE_LINES, isCountAgg, isOwnTile, viewAggs, } from '@columenlabs/lumen-ui-types/views';
+import { DndContext, KeyboardSensor, PointerSensor, TouchSensor, closestCenter, useSensor, useSensors, } from '@dnd-kit/core';
+import { SortableContext, arrayMove, rectSortingStrategy, sortableKeyboardCoordinates, useSortable, } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { PlusIcon, Trash2Icon, XIcon } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { LumenConfirm } from './confirm.js';
+import { IconButton } from './icon-button.js';
+import { cn } from './lib/utils.js';
+import { LumenTokenizedFilter, useLumenFilter } from './lumen-filter.js';
+import { LumenSelector } from './lumen-selector.js';
+import { Badge } from './ui/badge.js';
+import { Button } from './ui/button.js';
+import { Input } from './ui/input.js';
+import { Label } from './ui/label.js';
+import { Switch } from './ui/switch.js';
+import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group.js';
+import { AGG_LABELS, MAX_TILES, fieldOptions } from './view-formulas.js';
+import { takesFormulas } from './view-model.js';
+import { FigureText, OwnTile, figuresOf, isNumber } from './summary-cards.js';
+const dragOptions = { activationConstraint: { distance: 4 } };
+function FieldPick({ value, fields, domain, label, onChange, }) {
+    return (_jsx(LumenSelector, { label: label, size: "sm", className: "w-full min-w-0", placeholder: "Pick a field", options: fieldOptions(fields, domain), value: value, onChange: onChange }));
+}
+function AggPick({ value, label, onChange, }) {
+    return (_jsx(LumenSelector, { label: label, size: "sm", className: "w-full min-w-0", options: viewAggs.map((a) => ({ value: a, label: AGG_LABELS[a] })), value: value, onChange: onChange }));
+}
+/** A card in the editor's grid: its label, its value now and where it comes from. */
+function CardChip({ id, selected, onSelect, label, value, how, problem, domId, }) {
+    const s = useSortable({ id });
+    return (_jsxs(Button, { ref: s.setNodeRef, id: domId, variant: "outline", style: { transform: CSS.Transform.toString(s.transform), transition: s.transition }, className: cn('h-auto min-h-16 min-w-0 flex-col items-start justify-start gap-0.5 rounded-lg px-2.5 py-2 text-left font-normal whitespace-normal', selected && 'border-primary ring-3 ring-primary/15', problem && 'border-destructive', s.isDragging && 'z-20 shadow-md'), ...s.attributes, ...s.listeners, "aria-pressed": selected, onClick: onSelect, children: [_jsx("span", { className: "w-full truncate text-xs text-muted-foreground", children: label }), _jsx("span", { className: "num w-full truncate text-sm font-semibold", children: value }), _jsx("span", { className: "w-full truncate text-[0.7rem] text-muted-foreground", children: how })] }));
+}
+/** A card's own rows filter, kept in step with the card. */
+function CardFilter({ rows, fields, tokens, onChange, }) {
+    const filter = useLumenFilter(rows, fields, { initial: tokens });
+    const next = JSON.stringify(filter.tokens);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: reports the box's tokens when they change
+    useEffect(() => {
+        if (next !== JSON.stringify(tokens))
+            onChange(filter.tokens);
+    }, [next]);
+    return (_jsx(LumenTokenizedFilter, { filter: filter, label: "Card filter", placeholder: "All the Summary's rows" }));
+}
+const LINE_KINDS = [
+    { value: 'value', label: 'Number' },
+    { value: 'pct', label: '% of' },
+    { value: 'text', label: 'Text' },
+];
+function LineRow({ line, nums, fields, domain, onChange, onRemove, }) {
+    const first = nums[0]?.key ?? '';
+    const as = (kind) => kind === 'text'
+        ? { kind, text: 'Note' }
+        : kind === 'pct'
+            ? { kind, field: line.kind !== 'text' ? line.field : first, agg: 'sum' }
+            : {
+                kind,
+                field: line.kind !== 'text' ? line.field : first,
+                agg: 'sum',
+                filter: [],
+                suffix: '',
+            };
+    return (_jsxs("div", { className: "flex flex-col gap-1.5 rounded-md border p-2", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(ToggleGroup, { type: "single", size: "sm", variant: "outline", spacing: 0, value: line.kind, onValueChange: (v) => v && onChange(as(v)), "aria-label": "Line kind", children: LINE_KINDS.map((k) => (_jsx(ToggleGroupItem, { value: k.value, className: "px-2 text-xs", children: k.label }, k.value))) }), _jsx(IconButton, { icon: XIcon, label: "Remove line", className: "ml-auto", onClick: onRemove })] }), line.kind === 'text' ? (_jsx(Input, { "aria-label": "Line text", value: line.text, maxLength: 60, onChange: (e) => onChange({ ...line, text: e.target.value }) })) : (_jsxs("div", { className: "grid grid-cols-[repeat(2,minmax(0,1fr))] gap-1.5", children: [_jsx(AggPick, { value: line.agg, label: "Line roll-up", onChange: (agg) => onChange({ ...line, agg }) }), _jsx(FieldPick, { value: line.field, fields: isCountAgg(line.agg) ? fields : nums, domain: domain, label: "Line field", onChange: (field) => onChange({ ...line, field }) }), line.kind === 'value' && (_jsx(Input, { "aria-label": "Words after the number", className: "col-span-2", placeholder: "Words after the number (contracts)", value: line.suffix, maxLength: 30, onChange: (e) => onChange({ ...line, suffix: e.target.value }) }))] }))] }));
+}
+/**
+ * The Summary's cards in Edit widget: a grid to pick and drag, the domain's own cards to add or
+ * remove, and the picked card of the view's own: its main number (label, roll-up, field, rows,
+ * colour by sign) and its secondary lines.
+ */
+export function SummaryCardsEditor({ domain, tiles, onChange, rows, fields, problems, one = false, }) {
+    const sensors = useSensors(useSensor(PointerSensor, dragOptions), useSensor(TouchSensor, { activationConstraint: { delay: 150, tolerance: 6 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+    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;
+    const fieldOf = (k) => domain.fields.find((f) => f.key === k);
+    const i = tiles.findIndex((t) => t.key === current);
+    const picked = tiles[i];
+    const own = picked && isOwnTile(picked) ? picked : undefined;
+    const set = (p) => onChange(tiles.map((t, j) => (j === i && isOwnTile(t) ? { ...t, ...p } : t)));
+    const add = () => {
+        let n = tiles.length + 1;
+        while (tiles.some((t) => t.key === `tile_${n}`) || builtIns.some((w) => w.key === `tile_${n}`))
+            n++;
+        const key = `tile_${n}`;
+        const field = (nums.find((f) => f.amount) ?? nums[0])?.key ?? '';
+        onChange([
+            ...tiles,
+            { key, label: `Card ${n}`, field, agg: 'sum', filter: [], sign: false, lines: [] },
+        ]);
+        setCurrent(key);
+    };
+    const ownCount = tiles.filter(isOwnTile).length;
+    const off = builtIns.filter((w) => !tiles.some((t) => t.key === w.key));
+    const preview = (t) => {
+        if (!isOwnTile(t))
+            return { value: 'Built in', how: 'Built in' };
+        const figs = figuresOf(domain, t, rows, fields);
+        return {
+            value: figs ? _jsx(FigureText, { f: figs.main }) : '—',
+            how: `${AGG_LABELS[t.agg]} of ${fieldOf(t.field)?.label ?? t.field}`,
+        };
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: (e) => {
+                    const keys = tiles.map((t) => t.key);
+                    const from = keys.indexOf(String(e.active.id));
+                    const to = e.over ? keys.indexOf(String(e.over.id)) : -1;
+                    if (from >= 0 && to >= 0 && from !== to)
+                        onChange(arrayMove(tiles, from, to));
+                }, children: _jsx(SortableContext, { items: tiles.map((t) => t.key), strategy: rectSortingStrategy, children: _jsxs("div", { className: "grid grid-cols-3 gap-1.5", "data-testid": "summary-cards", children: [tiles.map((t, j) => {
+                                const p = preview(t);
+                                const label = isOwnTile(t)
+                                    ? t.label
+                                    : (builtIns.find((w) => w.key === t.key)?.label ?? t.key);
+                                return (_jsx(CardChip, { id: t.key, selected: current === t.key, onSelect: () => setCurrent(t.key), label: label, value: p.value, how: p.how, problem: !!problems[j], domId: `summary-card-${j}` }, t.key));
+                            }), takesFormulas(domain) && !(one && tiles.length) && (_jsxs(Button, { id: "summary-card-add", variant: "outline", className: "h-auto min-h-16 border-dashed font-normal text-muted-foreground", disabled: ownCount >= MAX_TILES, onClick: add, children: [_jsx(PlusIcon, {}), " Add card"] }))] }) }) }), off.length > 0 && (_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: "Built in:" }), off.map((w) => (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => {
+                            onChange(one ? [{ key: w.key }] : [...tiles, { key: w.key }]);
+                            setCurrent(w.key);
+                        }, children: [_jsx(PlusIcon, {}), " ", w.label] }, w.key)))] })), picked && !own && (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border p-3", children: [_jsx(Badge, { variant: "secondary", className: "font-normal", children: "Built in" }), _jsxs("span", { className: "flex-1 text-sm", children: [builtIns.find((w) => w.key === picked.key)?.label ?? picked.key, " works out its own lines."] }), _jsx(IconButton, { icon: Trash2Icon, label: "Remove card", onClick: () => {
+                            onChange(tiles.filter((_, j) => j !== i));
+                            setCurrent(null);
+                        } })] })), own && (_jsxs("div", { className: "flex min-w-0 flex-col gap-3 rounded-lg border p-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "flex-1 text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Main number" }), _jsx(LumenConfirm, { title: `Remove card ${own.label}?`, description: "It leaves this Summary when you save.", action: "Remove", onConfirm: () => {
+                                    onChange(tiles.filter((_, j) => j !== i));
+                                    setCurrent(null);
+                                }, children: _jsx(IconButton, { icon: Trash2Icon, label: "Remove card", variant: "destructive" }) })] }), _jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)] gap-1.5", children: [_jsx(Label, { htmlFor: "card-label", children: "Label" }), _jsx(Input, { id: "card-label", value: own.label, maxLength: 40, onChange: (e) => set({ label: e.target.value }) })] }), _jsxs("div", { className: "grid grid-cols-[repeat(2,minmax(0,1fr))] gap-1.5", children: [_jsx(AggPick, { value: own.agg, label: "Roll-up", onChange: (agg) => set({ agg }) }), _jsx(FieldPick, { value: own.field, fields: isCountAgg(own.agg) ? pickable : nums, domain: domain, label: "Field", onChange: (field) => set({ field }) }), _jsx(Input, { "aria-label": "Words after the number", className: "col-span-2", placeholder: "Words after the number (places)", value: own.suffix ?? '', maxLength: 30, onChange: (e) => set({ suffix: e.target.value }) })] }), _jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)] gap-1.5", children: [_jsx(Label, { children: "Only rows where" }), _jsx(CardFilter, { rows: rows, fields: fields, tokens: own.filter, onChange: (filter) => set({ filter }) }, own.key)] }), _jsxs(Label, { className: "flex items-center gap-2 font-normal", children: [_jsx(Switch, { checked: own.sign, onCheckedChange: (sign) => set({ sign }) }), "Green or red by sign"] }), _jsx("span", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Secondary lines" }), own.lines.map((l, j) => (_jsx(LineRow
+                    // biome-ignore lint/suspicious/noArrayIndexKey: lines have no key of their own
+                    , { line: l, nums: nums, fields: pickable, domain: domain, onChange: (next) => set({ lines: own.lines.map((x, k) => (k === j ? next : x)) }), onRemove: () => set({ lines: own.lines.filter((_, k) => k !== j) }) }, j))), _jsxs(Button, { variant: "ghost", size: "sm", className: "self-start", disabled: own.lines.length >= MAX_TILE_LINES, onClick: () => set({
+                            lines: [
+                                ...own.lines,
+                                {
+                                    kind: 'pct',
+                                    field: (nums.find((f) => f.amount) ?? nums[0])?.key ?? '',
+                                    agg: 'sum',
+                                },
+                            ],
+                        }), children: [_jsx(PlusIcon, {}), " Add line"] }), _jsx("div", { className: "rounded-lg bg-muted/50 p-2", children: _jsx(OwnTile, { domain: domain, tile: own, rows: rows, fields: fields }) }), problems[i] && (_jsx("p", { role: "alert", className: "text-xs text-destructive", children: problems[i] }))] }))] }));
+}

package/dist/summary-cards.d.ts

@@ -1,7 +1,35 @@
-import { type CardStyle, type MeterKind, type ViewAgg, type ViewTile } from '@columenlabs/lumen-ui-types/views';
+import { type CardStyle, type MeterKind, type ViewAgg, type ViewFormat, type ViewOwnTile, type ViewTile } from '@columenlabs/lumen-ui-types/views';
 import { type ReactNode } from 'react';
 import { type FilterField } from './lumen-filter.js';
-import { type ViewDomain, type ViewField } from './view-model.js';
+import { type ViewCellValue, type ViewDomain, type ViewField } from './view-model.js';
+/** One figure of a card: a value in its field's format, or plain text. */
+export type Figure = {
+    kind: 'value';
+    value: ViewCellValue;
+    format: ViewFormat;
+    amount: boolean;
+    suffix?: string;
+} | {
+    kind: 'text';
+    text: string;
+};
+/** A card's main number and lines over `rows` (the Summary's rows); null when its field is gone. */
+export declare function figuresOf<T>(domain: ViewDomain<T>, t: ViewOwnTile, rows: T[], fields: FilterField<T>[]): {
+    main: Figure & {
+        kind: 'value';
+    };
+    lines: Figure[];
+} | null;
+export declare function FigureText({ f }: {
+    f: Figure;
+}): import("react").JSX.Element;
+/** A card of the view's own as the page shows it. */
+export declare function OwnTile<T>({ domain, tile: t, rows, fields, }: {
+    domain: ViewDomain<T>;
+    tile: ViewOwnTile;
+    rows: T[];
+    fields: FilterField<T>[];
+}): import("react").JSX.Element | null;
 /**
  * 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 +64,7 @@ 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;
+export declare const isNumber: <T>(f: ViewField<T>) => boolean;
 /**
  * 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.
@@ -44,19 +73,3 @@ export declare function SummaryTiles<T>({ domain, tiles, rows, fields, tile, loa
 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)[];
-/**
- * The Summary's cards in Edit widget: a grid to pick and drag, the domain's own cards to add or
- * remove, and the picked card of the view's own: its main number (label, roll-up, field, rows,
- * colour by sign) and its secondary lines.
- */
-export declare function SummaryCardsEditor<T>({ domain, tiles, onChange, rows, fields, problems, one, }: {
-    domain: ViewDomain<T>;
-    tiles: ViewTile[];
-    onChange: (tiles: ViewTile[]) => void;
-    /** One card only (LumenCard): a built-in replaces it and there is no Add card. */
-    one?: boolean;
-    /** The Summary's rows, for the previews. */
-    rows: T[];
-    fields: FilterField<T>[];
-    problems: (string | null)[];
-}): import("react").JSX.Element;

package/dist/summary-cards.js

@@ -1,38 +1,17 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MAX_TILE_LINES, isCountAgg, isOwnTile, meterTone, viewAggs, } from '@columenlabs/lumen-ui-types/views';
-// The Summary widget's cards:
-// each card is one main number and any secondary lines. A domain's own cards (Value, Day P&L) are
-// drawn by the app; a card of the view's own rolls one field or formula column up over the rows
-// the Summary shows, narrowed by its own filter, and its lines are other roll-ups, a percent of a
-// roll-up over all the Summary's rows, or plain text. `SummaryTiles` draws them; `SummaryCardsEditor`
-// is the cards part of the Summary's Edit widget. Everything is worked out here from the rows the
-// view already loaded.
-import { DndContext, KeyboardSensor, PointerSensor, TouchSensor, closestCenter, useSensor, useSensors, } from '@dnd-kit/core';
-import { SortableContext, arrayMove, rectSortingStrategy, sortableKeyboardCoordinates, useSortable, } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { PlusIcon, Trash2Icon, XIcon } from 'lucide-react';
-import { useEffect, useMemo, useState } from 'react';
-import { LumenConfirm } from './confirm.js';
-import { IconButton } from './icon-button.js';
+import { isCountAgg, isOwnTile, meterTone, } from '@columenlabs/lumen-ui-types/views';
+import { useMemo } from 'react';
 import { KIT } from './kit-config.js';
 import { lazyPart } from './lazy-part.js';
 import { cn } from './lib/utils.js';
-import { LumenTokenizedFilter, filterByTokens, useLumenFilter, } from './lumen-filter.js';
-import { LumenSelector } from './lumen-selector.js';
+import { filterByTokens } from './lumen-filter.js';
 import { ViewValueCell } from './lumen-view.js';
 import { Tile } from './tile.js';
-import { Badge } from './ui/badge.js';
-import { Button } from './ui/button.js';
-import { Input } from './ui/input.js';
-import { Label } from './ui/label.js';
 import { Progress } from './ui/progress.js';
 import { Skeleton } from './ui/skeleton.js';
-import { Switch } from './ui/switch.js';
-import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group.js';
-import { AGG_LABELS, MAX_TILES, fieldOptions } from './view-formulas.js';
-import { computedOf, rollUp, takesFormulas, } from './view-model.js';
+import { computedOf, rollUp, } from './view-model.js';
 /** A card's main number and lines over `rows` (the Summary's rows); null when its field is gone. */
-function figuresOf(domain, t, rows, fields) {
+export function figuresOf(domain, t, rows, fields) {
     const computed = computedOf(domain, rows, null);
     const field = (k) => domain.fields.find((f) => f.key === k);
     const roll = (f, agg, rs) => rollUp(rs.map((r) => computed.value(f, r)), agg);
@@ -74,13 +53,13 @@ function figuresOf(domain, t, rows, fields) {
     });
     return { main, lines };
 }
-function FigureText({ f }) {
+export function FigureText({ f }) {
     if (f.kind === 'text')
         return _jsx(_Fragment, { children: f.text });
     return (_jsxs(_Fragment, { children: [_jsx(ViewValueCell, { value: f.value, format: f.format, amount: f.amount }), f.suffix ? ` ${f.suffix}` : null] }));
 }
 /** A card of the view's own as the page shows it. */
-function OwnTile({ domain, tile: t, rows, fields, }) {
+export function OwnTile({ domain, tile: t, rows, fields, }) {
     const figs = useMemo(() => figuresOf(domain, t, rows, fields), [domain, t, rows, fields]);
     if (!figs)
         return null;
@@ -135,10 +114,9 @@ export function SummaryTiles({ domain, tiles, rows, fields, tile, loading, }) {
         // Each tile sits in a `contents` holder, so the odd last one's span goes on what it holds.
         '[&>*: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 } };
+// ── Card rules (the editor lives in summary-cards-editor.tsx) ─────────────────────────────────
 // 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';
+export 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.
@@ -169,118 +147,3 @@ export function summaryCardIssues(tiles, fields, domainTiles) {
         return null;
     });
 }
-function FieldPick({ value, fields, domain, label, onChange, }) {
-    return (_jsx(LumenSelector, { label: label, size: "sm", className: "w-full min-w-0", placeholder: "Pick a field", options: fieldOptions(fields, domain), value: value, onChange: onChange }));
-}
-function AggPick({ value, label, onChange, }) {
-    return (_jsx(LumenSelector, { label: label, size: "sm", className: "w-full min-w-0", options: viewAggs.map((a) => ({ value: a, label: AGG_LABELS[a] })), value: value, onChange: onChange }));
-}
-/** A card in the editor's grid: its label, its value now and where it comes from. */
-function CardChip({ id, selected, onSelect, label, value, how, problem, domId, }) {
-    const s = useSortable({ id });
-    return (_jsxs(Button, { ref: s.setNodeRef, id: domId, variant: "outline", style: { transform: CSS.Transform.toString(s.transform), transition: s.transition }, className: cn('h-auto min-h-16 min-w-0 flex-col items-start justify-start gap-0.5 rounded-lg px-2.5 py-2 text-left font-normal whitespace-normal', selected && 'border-primary ring-3 ring-primary/15', problem && 'border-destructive', s.isDragging && 'z-20 shadow-md'), ...s.attributes, ...s.listeners, "aria-pressed": selected, onClick: onSelect, children: [_jsx("span", { className: "w-full truncate text-xs text-muted-foreground", children: label }), _jsx("span", { className: "num w-full truncate text-sm font-semibold", children: value }), _jsx("span", { className: "w-full truncate text-[0.7rem] text-muted-foreground", children: how })] }));
-}
-/** A card's own rows filter, kept in step with the card. */
-function CardFilter({ rows, fields, tokens, onChange, }) {
-    const filter = useLumenFilter(rows, fields, { initial: tokens });
-    const next = JSON.stringify(filter.tokens);
-    // biome-ignore lint/correctness/useExhaustiveDependencies: reports the box's tokens when they change
-    useEffect(() => {
-        if (next !== JSON.stringify(tokens))
-            onChange(filter.tokens);
-    }, [next]);
-    return (_jsx(LumenTokenizedFilter, { filter: filter, label: "Card filter", placeholder: "All the Summary's rows" }));
-}
-const LINE_KINDS = [
-    { value: 'value', label: 'Number' },
-    { value: 'pct', label: '% of' },
-    { value: 'text', label: 'Text' },
-];
-function LineRow({ line, nums, fields, domain, onChange, onRemove, }) {
-    const first = nums[0]?.key ?? '';
-    const as = (kind) => kind === 'text'
-        ? { kind, text: 'Note' }
-        : kind === 'pct'
-            ? { kind, field: line.kind !== 'text' ? line.field : first, agg: 'sum' }
-            : {
-                kind,
-                field: line.kind !== 'text' ? line.field : first,
-                agg: 'sum',
-                filter: [],
-                suffix: '',
-            };
-    return (_jsxs("div", { className: "flex flex-col gap-1.5 rounded-md border p-2", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(ToggleGroup, { type: "single", size: "sm", variant: "outline", spacing: 0, value: line.kind, onValueChange: (v) => v && onChange(as(v)), "aria-label": "Line kind", children: LINE_KINDS.map((k) => (_jsx(ToggleGroupItem, { value: k.value, className: "px-2 text-xs", children: k.label }, k.value))) }), _jsx(IconButton, { icon: XIcon, label: "Remove line", className: "ml-auto", onClick: onRemove })] }), line.kind === 'text' ? (_jsx(Input, { "aria-label": "Line text", value: line.text, maxLength: 60, onChange: (e) => onChange({ ...line, text: e.target.value }) })) : (_jsxs("div", { className: "grid grid-cols-[repeat(2,minmax(0,1fr))] gap-1.5", children: [_jsx(AggPick, { value: line.agg, label: "Line roll-up", onChange: (agg) => onChange({ ...line, agg }) }), _jsx(FieldPick, { value: line.field, fields: isCountAgg(line.agg) ? fields : nums, domain: domain, label: "Line field", onChange: (field) => onChange({ ...line, field }) }), line.kind === 'value' && (_jsx(Input, { "aria-label": "Words after the number", className: "col-span-2", placeholder: "Words after the number (contracts)", value: line.suffix, maxLength: 30, onChange: (e) => onChange({ ...line, suffix: e.target.value }) }))] }))] }));
-}
-/**
- * The Summary's cards in Edit widget: a grid to pick and drag, the domain's own cards to add or
- * remove, and the picked card of the view's own: its main number (label, roll-up, field, rows,
- * colour by sign) and its secondary lines.
- */
-export function SummaryCardsEditor({ domain, tiles, onChange, rows, fields, problems, one = false, }) {
-    const sensors = useSensors(useSensor(PointerSensor, dragOptions), useSensor(TouchSensor, { activationConstraint: { delay: 150, tolerance: 6 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
-    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;
-    const fieldOf = (k) => domain.fields.find((f) => f.key === k);
-    const i = tiles.findIndex((t) => t.key === current);
-    const picked = tiles[i];
-    const own = picked && isOwnTile(picked) ? picked : undefined;
-    const set = (p) => onChange(tiles.map((t, j) => (j === i && isOwnTile(t) ? { ...t, ...p } : t)));
-    const add = () => {
-        let n = tiles.length + 1;
-        while (tiles.some((t) => t.key === `tile_${n}`) || builtIns.some((w) => w.key === `tile_${n}`))
-            n++;
-        const key = `tile_${n}`;
-        const field = (nums.find((f) => f.amount) ?? nums[0])?.key ?? '';
-        onChange([
-            ...tiles,
-            { key, label: `Card ${n}`, field, agg: 'sum', filter: [], sign: false, lines: [] },
-        ]);
-        setCurrent(key);
-    };
-    const ownCount = tiles.filter(isOwnTile).length;
-    const off = builtIns.filter((w) => !tiles.some((t) => t.key === w.key));
-    const preview = (t) => {
-        if (!isOwnTile(t))
-            return { value: 'Built in', how: 'Built in' };
-        const figs = figuresOf(domain, t, rows, fields);
-        return {
-            value: figs ? _jsx(FigureText, { f: figs.main }) : '—',
-            how: `${AGG_LABELS[t.agg]} of ${fieldOf(t.field)?.label ?? t.field}`,
-        };
-    };
-    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: (e) => {
-                    const keys = tiles.map((t) => t.key);
-                    const from = keys.indexOf(String(e.active.id));
-                    const to = e.over ? keys.indexOf(String(e.over.id)) : -1;
-                    if (from >= 0 && to >= 0 && from !== to)
-                        onChange(arrayMove(tiles, from, to));
-                }, children: _jsx(SortableContext, { items: tiles.map((t) => t.key), strategy: rectSortingStrategy, children: _jsxs("div", { className: "grid grid-cols-3 gap-1.5", "data-testid": "summary-cards", children: [tiles.map((t, j) => {
-                                const p = preview(t);
-                                const label = isOwnTile(t)
-                                    ? t.label
-                                    : (builtIns.find((w) => w.key === t.key)?.label ?? t.key);
-                                return (_jsx(CardChip, { id: t.key, selected: current === t.key, onSelect: () => setCurrent(t.key), label: label, value: p.value, how: p.how, problem: !!problems[j], domId: `summary-card-${j}` }, t.key));
-                            }), takesFormulas(domain) && !(one && tiles.length) && (_jsxs(Button, { id: "summary-card-add", variant: "outline", className: "h-auto min-h-16 border-dashed font-normal text-muted-foreground", disabled: ownCount >= MAX_TILES, onClick: add, children: [_jsx(PlusIcon, {}), " Add card"] }))] }) }) }), off.length > 0 && (_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: "Built in:" }), off.map((w) => (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => {
-                            onChange(one ? [{ key: w.key }] : [...tiles, { key: w.key }]);
-                            setCurrent(w.key);
-                        }, children: [_jsx(PlusIcon, {}), " ", w.label] }, w.key)))] })), picked && !own && (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border p-3", children: [_jsx(Badge, { variant: "secondary", className: "font-normal", children: "Built in" }), _jsxs("span", { className: "flex-1 text-sm", children: [builtIns.find((w) => w.key === picked.key)?.label ?? picked.key, " works out its own lines."] }), _jsx(IconButton, { icon: Trash2Icon, label: "Remove card", onClick: () => {
-                            onChange(tiles.filter((_, j) => j !== i));
-                            setCurrent(null);
-                        } })] })), own && (_jsxs("div", { className: "flex min-w-0 flex-col gap-3 rounded-lg border p-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "flex-1 text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Main number" }), _jsx(LumenConfirm, { title: `Remove card ${own.label}?`, description: "It leaves this Summary when you save.", action: "Remove", onConfirm: () => {
-                                    onChange(tiles.filter((_, j) => j !== i));
-                                    setCurrent(null);
-                                }, children: _jsx(IconButton, { icon: Trash2Icon, label: "Remove card", variant: "destructive" }) })] }), _jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)] gap-1.5", children: [_jsx(Label, { htmlFor: "card-label", children: "Label" }), _jsx(Input, { id: "card-label", value: own.label, maxLength: 40, onChange: (e) => set({ label: e.target.value }) })] }), _jsxs("div", { className: "grid grid-cols-[repeat(2,minmax(0,1fr))] gap-1.5", children: [_jsx(AggPick, { value: own.agg, label: "Roll-up", onChange: (agg) => set({ agg }) }), _jsx(FieldPick, { value: own.field, fields: isCountAgg(own.agg) ? pickable : nums, domain: domain, label: "Field", onChange: (field) => set({ field }) }), _jsx(Input, { "aria-label": "Words after the number", className: "col-span-2", placeholder: "Words after the number (places)", value: own.suffix ?? '', maxLength: 30, onChange: (e) => set({ suffix: e.target.value }) })] }), _jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)] gap-1.5", children: [_jsx(Label, { children: "Only rows where" }), _jsx(CardFilter, { rows: rows, fields: fields, tokens: own.filter, onChange: (filter) => set({ filter }) }, own.key)] }), _jsxs(Label, { className: "flex items-center gap-2 font-normal", children: [_jsx(Switch, { checked: own.sign, onCheckedChange: (sign) => set({ sign }) }), "Green or red by sign"] }), _jsx("span", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Secondary lines" }), own.lines.map((l, j) => (_jsx(LineRow
-                    // biome-ignore lint/suspicious/noArrayIndexKey: lines have no key of their own
-                    , { line: l, nums: nums, fields: pickable, domain: domain, onChange: (next) => set({ lines: own.lines.map((x, k) => (k === j ? next : x)) }), onRemove: () => set({ lines: own.lines.filter((_, k) => k !== j) }) }, j))), _jsxs(Button, { variant: "ghost", size: "sm", className: "self-start", disabled: own.lines.length >= MAX_TILE_LINES, onClick: () => set({
-                            lines: [
-                                ...own.lines,
-                                {
-                                    kind: 'pct',
-                                    field: (nums.find((f) => f.amount) ?? nums[0])?.key ?? '',
-                                    agg: 'sum',
-                                },
-                            ],
-                        }), children: [_jsx(PlusIcon, {}), " Add line"] }), _jsx("div", { className: "rounded-lg bg-muted/50 p-2", children: _jsx(OwnTile, { domain: domain, tile: own, rows: rows, fields: fields }) }), problems[i] && (_jsx("p", { role: "alert", className: "text-xs text-destructive", children: problems[i] }))] }))] }));
-}

package/dist/view-editor.js

@@ -10,7 +10,7 @@ import { CONNECTED_COUNT, VIEW_CARD_KIND_NAMES, WIDGET_STYLES, cardsOf, connecte
 import { DndContext, KeyboardSensor, PointerSensor, TouchSensor, closestCenter, useSensor, useSensors, } from '@dnd-kit/core';
 import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { ArrowDownIcon, ArrowLeftIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, Columns3Icon, CopyIcon, DatabaseIcon, EllipsisIcon, FilterIcon, GripVerticalIcon, LayoutDashboardIcon, Link2Icon, MoveHorizontalIcon, PencilIcon, PlusIcon, ReplaceIcon, RotateCcwIcon, SearchIcon, ShapesIcon, ShrinkIcon, SigmaIcon, SlidersHorizontalIcon, SmileIcon, SparklesIcon, StarIcon, TableIcon, ToggleRightIcon, Trash2Icon, Unlink2Icon, UnlinkIcon, XIcon, } from 'lucide-react';
+import { ArrowDownIcon, ArrowUpIcon, CheckIcon, ChevronRightIcon, Columns3Icon, CopyIcon, DatabaseIcon, EllipsisIcon, FilterIcon, GripVerticalIcon, LayoutDashboardIcon, Link2Icon, MoveHorizontalIcon, PencilIcon, PlusIcon, ReplaceIcon, SearchIcon, ShapesIcon, ShrinkIcon, SigmaIcon, SlidersHorizontalIcon, SparklesIcon, StarIcon, ToggleRightIcon, Trash2Icon, Unlink2Icon, UnlinkIcon, XIcon, } from 'lucide-react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { AddFormulaDialog } from './add-column.js';
 import { useAssistant, useAssistantName } from './assistant-context.js';
@@ -35,18 +35,15 @@ import { Button } from './ui/button.js';
 import { Checkbox } from './ui/checkbox.js';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible.js';
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle } from './ui/dialog.js';
-import { Input } from './ui/input.js';
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from './ui/input-group.js';
 import { Label } from './ui/label.js';
-import { Popover, PopoverContent, PopoverTrigger } from './ui/popover.js';
-import { Separator } from './ui/separator.js';
 import { Switch } from './ui/switch.js';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs.js';
 import { Textarea } from './ui/textarea.js';
 import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group.js';
 import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.js';
 import { AGG_LABELS, FORMAT_LABELS, FormatChip, FormulaForm, MAX_FORMULAS, fieldOptions, formatOptions, formulaIssueTarget, formulaIssues, formulaOptions, } from './view-formulas.js';
-import { VIEW_ICONS, shapeIcon, viewIcon } from './view-icons.js';
+import { shapeIcon } from './view-icons.js';
 import { FORMULAS_GROUP, canFilter, chipsOf, formulaBlanks, formulasOf, groupOf, hiddenOf, subgroupLabel, subgroupOf, subgroupsOf, summaryCash, takesFormulas, tilesOf, totalAggOf, withViewFields, } from './view-model.js';
 import { WidgetControlsEditor } from './widget-controls.js';
 import { PAGE_SOURCE, useWidgetDataOptions } from './widget-data.js';

package/dist/view-formulas.js

@@ -30,6 +30,7 @@ export const FORMAT_LABELS = {
     price_signed: 'Currency ±',
     weight: 'Percent',
     percent: 'Percent ±',
+    bytes: 'Size',
     text: 'Text',
 };
 /**
@@ -47,6 +48,7 @@ const FORMAT_GLYPHS = {
     price_signed: '±$',
     weight: '%',
     percent: '±%',
+    bytes: 'B',
     text: 'Aa',
 };
 /** Text fields whose icon is a calendar are dates (no date format exists; the icon says it). */
@@ -74,6 +76,7 @@ const FORMAT_EXAMPLES = {
     price_signed: '+$1,234.56',
     weight: '12.3%',
     percent: '+12.3%',
+    bytes: '812 KB · 13.1 GB',
     text: 'Abc',
 };
 /** The number formats as picker options, each with how it reads. */

package/dist/view-model.d.ts

@@ -353,7 +353,7 @@ export declare const formulasOf: (c: CustomViewConfig) => {
     key: string;
     label: string;
     expr: string;
-    format: "compact" | "integer" | "number" | "percent" | "price" | "price_rounded" | "price_signed" | "rounded" | "signed" | "text" | "weight";
+    format: "bytes" | "compact" | "integer" | "number" | "percent" | "price" | "price_rounded" | "price_signed" | "rounded" | "signed" | "text" | "weight";
     agg: "count" | "distinct" | "first" | "last" | "max" | "mean" | "min" | "none" | "sum" | null;
 }[];
 /** Fields listed under Columns but not shown, for their Filter and Group ticks; views saved before it have none. */

package/dist/widget-settings.d.ts

@@ -1,6 +1,8 @@
 import { type ViewWidget } from '@columenlabs/lumen-ui-types/views';
 import { type ReactNode } from 'react';
+import { dateFields } from './date-fields.js';
 import type { FilterField } from './lumen-filter.js';
+export { dateFields };
 import type { ViewDomain, ViewField } from './view-model.js';
 /** A widget the editor draws its own parts for: anything but a table of the rows. */
 export type WidgetDraft = Exclude<ViewWidget, {
@@ -14,8 +16,6 @@ export declare function EditorRow({ label, children }: {
 }): import("react").JSX.Element;
 export declare const isTextField: <T>(f: ViewField<T>) => boolean;
 export declare const isNumberField: <T>(f: ViewField<T>) => boolean;
-/** A trend's date candidates: text fields, the date-like ones first. */
-export declare const dateFields: <T>(domain: ViewDomain<T>) => ViewField<T>[];
 /**
  * One place a widget takes fields: what it takes (`accepts`, `why` when a field does not fit),
  * how many (`max`), the keys in it now and the widget with other keys. A table's one slot is its
@@ -95,7 +95,7 @@ export declare const readsRows: (card: ViewWidget) => card is {
             key: string;
             placement: "column" | "inline";
         }[];
-        formats?: Record<string, "compact" | "integer" | "number" | "percent" | "price" | "price_rounded" | "price_signed" | "rounded" | "signed" | "weight"> | undefined;
+        formats?: Record<string, "bytes" | "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: {

package/dist/widget-settings.js

@@ -9,13 +9,16 @@ import { OUTLOOK_INDEXES, marketWindows, } from '@columenlabs/lumen-ui-types/mar
 import { ALLOCATION_MAX, isOwnTile, isRowCard, isTableCard, trendBuckets, widgetStyleId, } from '@columenlabs/lumen-ui-types/views';
 import { ArrowDownIcon, ArrowUpIcon } from 'lucide-react';
 import { useState } from 'react';
+import { dateFields } from './date-fields.js';
 import { LumenSelector } from './lumen-selector.js';
-import { SummaryCardsEditor, cardAgg, summaryCardIssues } from './summary-cards.js';
+import { cardAgg, summaryCardIssues } from './summary-cards.js';
+import { SummaryCardsEditor } from './summary-cards-editor.js';
 import { Input } from './ui/input.js';
 import { Label } from './ui/label.js';
 import { Switch } from './ui/switch.js';
 import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group.js';
 import { MAX_TILES, fieldOptions } from './view-formulas.js';
+export { dateFields };
 /** A label beside its control, the same in every section of Edit widget. */
 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 })] }));
@@ -23,16 +26,6 @@ export function EditorRow({ label, children }) {
 export const isTextField = (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) => {
-    // A rendered text field still reads its raw value (a report date drawn as Tue, Oct 20).
-    const texts = domain.fields.filter((f) => f.format === 'text');
-    return [
-        ...texts.filter((f) => DATE_LIKE.test(f.key)),
-        ...texts.filter((f) => !DATE_LIKE.test(f.key)),
-    ];
-};
 /** The most columns a Top N shows. */
 const TOP_N_COLUMNS = 8;
 /** How many values a trend draws, a spark or tracker one. */

package/dist/widget-values.js

@@ -3,7 +3,7 @@
  * field. Shared by the widget frame and its chart bodies, so a lazily loaded body never pulls the
  * frame back in.
  */
-import { isDollarFormat } from '@columenlabs/lumen-ui-types/views';
+import { formatBytes, isDollarFormat } from '@columenlabs/lumen-ui-types/views';
 import { maskAmount } from './shell.js';
 import { label } from './view-model.js';
 export const MINUS = '−';
@@ -19,6 +19,8 @@ export function short(v, format, hidden) {
     const abs = Math.abs(v);
     if (format === 'percent' || format === 'weight')
         return `${sign}${abs.toFixed(1)}%`;
+    if (format === 'bytes')
+        return `${sign}${formatBytes(abs)}`;
     if (isDollarFormat(format))
         return `${sign}$${COMPACT.format(abs)}`;
     return `${sign}${COMPACT.format(abs)}`;
@@ -31,6 +33,8 @@ export function exact(v, format, hidden) {
     const abs = Math.abs(v);
     if (format === 'percent' || format === 'weight')
         return `${sign}${abs.toFixed(2)}%`;
+    if (format === 'bytes')
+        return `${sign}${formatBytes(abs)}`;
     const n = abs.toLocaleString('en-US', {
         maximumFractionDigits: format === 'rounded' || format === 'price_rounded' ? 0 : 2,
         useGrouping: format !== 'integer',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.101",
+  "version": "0.1.103",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -49,7 +49,7 @@
     "@codemirror/lang-javascript": "6.2.5",
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-sql": "6.10.0",
-    "@columenlabs/lumen-ui-types": "0.1.101",
+    "@columenlabs/lumen-ui-types": "0.1.103",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",