@columenlabs/lumen-ui 0.1.100 → 0.1.102

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-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, viewPageSizes, 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
@@ -42,7 +42,7 @@ import { Skeleton } from './ui/skeleton.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';
@@ -104,6 +104,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/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/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

@@ -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-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.100",
+  "version": "0.1.102",
   "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.100",
+    "@columenlabs/lumen-ui-types": "0.1.102",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",