@columenlabs/lumen-ui 0.1.164 → 0.1.166

package/README.md

@@ -83,8 +83,8 @@ Every export, its props and an example are on the [docs](https://lumen.columenla
 - A metered column (use against an allowance) shows one number per cell with `UnitValue` (right-aligned number, fixed muted unit slot, status dot), never `value [pct]`. Offer both readings through the field's `showAs` (Amount / % of allowance, picked per column in Edit view, saved as `shows`); default amounts for sizes (storage) and shares for capped counts. Put the other reading, the allowance and the cost formula in a hover card. Totals use `rollRender`: sum amounts with their unit; a share is the rows' total over their allowance, never a sum of percents.
 - A floating bulk-action bar over a table's selection: Apply clears the selection and the bar goes away; the toast's Undo restores the change, not the selection. Cancel keeps the selection.
 - Bars in a column line up: use `ShareMeter` (fixed track, fixed right-aligned number), never a bar sized by its label.
-- A shared cap split by who used it (an account's allowance by label): `ShareMeter segments={[{ value, color, label }]}` stacks each part's share of the cap in its own colour on the same fixed track; past the cap the track reads as the total and a tick marks the cap. Roll such rows up with `poolShare(rows, { pool, used, cap })` in a field's `rollRender`: a pool's share is its rows' use over the cap (never a sum or max of their own %), and a group across several pools reads the fullest one (`top`).
-- Meter levels are the kit's, not the app's: a share of a cap reads `ok` (grey) under 75%, `watch` (amber) from 75%, `alert` (red) from 90%. `ShareMeter` takes its colour from the share unless you pass `color`; `UnitValue share={0.8}` tints its number and dot the same way; usage progress cards follow the same levels. For any other mark (a dot, a chip, a "nearest cap" cell) call `meterLevel(share)` and colour it with `METER_LEVEL_COLOR` or `meterValueTone(share)`. Override per app with `configureLumen({ meterLevels: { watch: 0.8 } })` (each level can move alone) or per meter with `levels={{ watch: 0.5 }}`. Don't hand-roll `share >= 0.75` checks.
+- A shared cap split by who used it (an account's allowance by label): `ShareMeter segments={[{ value, label }]}` names each part's share in the bar's hover; the bar itself keeps one colour, its level's, so colour always says how full it is. Roll such rows up with `poolShare(rows, { pool, used, cap })` in a field's `rollRender`: a pool's share is its rows' use over the cap (never a sum or max of their own %), and a group across several pools reads the fullest one (`top`).
+- Meter levels are the kit's, not the app's. A usage share reads `ok` (green) under 75%, `watch` (amber) from 75%, `alert` (orange) from 90%, `over` (red) from 100%; past 100% the `ShareMeter` stays full and a hatched stub spills past a tick at the cap, up to +50%. A health share (`kind="health"`: uptime, success rate) reads green at 99% and over, amber from 95%, red under 95%. `ShareMeter` takes its colour from the share unless you pass `color`; `UnitValue share={0.8}` tints its number and dot from amber up (green numbers stay plain); progress cards follow the same levels. For any other mark (a dot, a chip, a "nearest cap" cell) call `meterLevel(share, levels, kind)` and colour it with `METER_LEVEL_COLOR` or `meterValueTone(share)`. Override per app with `configureLumen({ meterLevels: { watch: 0.8 }, healthLevels: { watch: 0.995 } })` (each level can move alone) or per meter with `levels`. Don't hand-roll `share >= 0.75` checks.
 - Pace (time to a cap at the recent rate) is the kit's: `burnRate(samples, { per, gauge })` over the window's complete samples (hourly, or daily for `7d`), then `timeToCap(rate, used, cap, resetInHours)`. A lone sample above 3× the window's median counts as 3× the median (`spikes` says how many); a run of hot samples counts in full. Show it with `TimeToCap` (`in 2h 05m`, `At cap`, `Resets first`; `short` on a phone), coloured by the meter level of where the meter lands at reset, and pick the window with `PaceWindowPicker` (6h, 12h, 24h, 7d) in the page header; `usePaceWindow()` reads the same choice everywhere, kept in the viewer's browser (`setDefaultPaceWindow` sets the app's default). Where most hours are empty (median 0) a lone nonzero hour counts as 0, and a window with too little use (`timeToCap(..., { minTotal })`, default 0.1% of the cap) is `thin`: no time to the cap. Don't hand-roll ETAs or a window toggle.
 - A change between periods (this week against last) is `trendChange(now, prev, { minBase })` drawn by `TrendValue`: `▲ 12%` over a big enough earlier period, the plain difference `▲ +3` when it is at or under `minBase`, `▲ >10×` past ten times. A % over a near-empty baseline misleads; never show one.
 - Table rows are one line. A cell shows one value (with a small bar or tag at most); anything more (other metrics, the allowance, a breakdown) goes in a hover tooltip, never in stacked text or sub-rows.

package/dist/index.d.ts

@@ -27,7 +27,7 @@ export { LumenSecret } from './lumen-secret.js';
 export { RankedBars, StackedBars, StackedColumns, TimeLines } from './lumen-widget-charts.js';
 export { type ShareSegment, ShareMeter } from './share-meter.js';
 export { type Pool, poolShare } from './pool-share.js';
-export { METER_LEVEL_COLOR, meterLevel, meterValueTone } from './meter-level.js';
+export { METER_LEVEL_COLOR, METER_LEVEL_TEXT, meterLevel, meterValueTone } from './meter-level.js';
 export { contrast, readableInk } from './ink.js';
 export { UnitValue } from './unit-value.js';
 export { type BurnRate, burnRate, durationText, PACE_WINDOWS, type Pace, type PaceWindow, paceHours, setDefaultPaceWindow, timeToCap, usePaceWindow, } from './pace.js';

package/dist/index.js

@@ -34,7 +34,7 @@ export { LumenSecret } from './lumen-secret.js';
 export { RankedBars, StackedBars, StackedColumns, TimeLines } from './lumen-widget-charts.js';
 export { ShareMeter } from './share-meter.js';
 export { poolShare } from './pool-share.js';
-export { METER_LEVEL_COLOR, meterLevel, meterValueTone } from './meter-level.js';
+export { METER_LEVEL_COLOR, METER_LEVEL_TEXT, meterLevel, meterValueTone } from './meter-level.js';
 export { contrast, readableInk } from './ink.js';
 export { UnitValue } from './unit-value.js';
 export { burnRate, durationText, PACE_WINDOWS, paceHours, setDefaultPaceWindow, timeToCap, usePaceWindow, } from './pace.js';

package/dist/kit-config.d.ts

@@ -1,4 +1,4 @@
-import { type MeterLevels } from '@columenlabs/lumen-ui-types/views';
+import { type HealthLevels, type MeterLevels } from '@columenlabs/lumen-ui-types/views';
 import type { Prefs } from './prefs.js';
 export interface KitConfig {
     /** The cookie that keeps each person's display preferences. */
@@ -9,13 +9,16 @@ export interface KitConfig {
     marketOff: string;
     /** The app's own defaults for preferences a person has not set (theme, time zone, ...). */
     defaultPrefs?: Partial<Prefs>;
-    /** Where every meter turns amber (`watch`) and red (`alert`), as shares of a cap (0 to 1). */
+    /** Where every usage meter turns amber (`watch`), orange (`alert`) and red (`over`), as shares of a cap (0 to 1). */
     meterLevels: MeterLevels;
+    /** Where every health meter drops below green (`watch`) and below amber (`alert`), 0 to 1. */
+    healthLevels: HealthLevels;
 }
 export declare const KIT: KitConfig;
 /** Runs `fn` after each `configureLumen` (preferences read again from the app's cookie). */
 export declare function onConfigure(fn: () => void): void;
 /** Sets what `c` names; the rest keep the kit's defaults (one meter level can move alone). */
-export declare function configureLumen(c: Partial<Omit<KitConfig, 'meterLevels'>> & {
+export declare function configureLumen(c: Partial<Omit<KitConfig, 'meterLevels' | 'healthLevels'>> & {
     meterLevels?: Partial<MeterLevels>;
+    healthLevels?: Partial<HealthLevels>;
 }): void;

package/dist/kit-config.js

@@ -1,11 +1,12 @@
 // What an app tells the kit about itself (the kit is product-neutral): where
 // people's display preferences live and the line a market widget shows where the app has no feed.
 // Set once at start with `configureLumen`. The assistant's name comes from its provider.
-import { METER_LEVELS } from '@columenlabs/lumen-ui-types/views';
+import { HEALTH_LEVELS, METER_LEVELS, } from '@columenlabs/lumen-ui-types/views';
 export const KIT = {
     prefsCookie: 'lumen_prefs',
     marketOff: 'Live market data is not on this app.',
     meterLevels: METER_LEVELS,
+    healthLevels: HEALTH_LEVELS,
 };
 const changed = new Set();
 /** Runs `fn` after each `configureLumen` (preferences read again from the app's cookie). */
@@ -14,10 +15,12 @@ export function onConfigure(fn) {
 }
 /** Sets what `c` names; the rest keep the kit's defaults (one meter level can move alone). */
 export function configureLumen(c) {
-    const { meterLevels, ...rest } = c;
+    const { meterLevels, healthLevels, ...rest } = c;
     Object.assign(KIT, rest);
     if (meterLevels)
         KIT.meterLevels = { ...KIT.meterLevels, ...meterLevels };
+    if (healthLevels)
+        KIT.healthLevels = { ...KIT.healthLevels, ...healthLevels };
     for (const fn of changed)
         fn();
 }

package/dist/market/market-widget.js

@@ -34,6 +34,10 @@ import { useSymbolChart } from './lumen-chart.js';
 import { faint } from './price-chart.js';
 const LINE_TOKENS = ['--chart-1', '--chart-3', '--chart-4', '--chart-6', '--chart-2', '--chart-5'];
 const MINUS = '−';
+/** A signed percent on the chart's price axis. */
+const pct = (p) => `${p >= 0 ? '+' : MINUS}${Math.abs(p).toFixed(2)}%`;
+/** How near (px) a tick may sit to a line's value tag before it is left blank: one tag's height. */
+const TAG_PX = 16;
 export function fmtValue(s, v) {
     return `${s.prefix}${v
         .toLocaleString('en-US', {
@@ -143,7 +147,25 @@ export function MarketLines({ symbols: all }) {
             },
             localization: {
                 timeFormatter: (t) => clock(t, timeZone),
-                priceFormatter: (p) => `${p >= 0 ? '+' : MINUS}${Math.abs(p).toFixed(2)}%`,
+                priceFormatter: pct,
+                // A tick a line's value tag would cover is left blank, so the two never overlap.
+                tickmarksPriceFormatter: (prices) => {
+                    const ref = [...lines.current.values()][0];
+                    const tags = [...lines.current.values(), ...extLines.current.values()]
+                        .filter((s) => s.options().lastValueVisible)
+                        .map((s) => s.data().at(-1))
+                        .flatMap((d) => (d?.value === undefined ? [] : [d.value]));
+                    const y = (p) => ref?.priceToCoordinate(p) ?? null;
+                    return prices.map((p) => {
+                        const at = y(p);
+                        const covered = at !== null &&
+                            tags.some((t) => {
+                                const ty = y(t);
+                                return ty !== null && Math.abs(ty - at) < TAG_PX;
+                            });
+                        return covered ? '' : pct(p);
+                    });
+                },
             },
             crosshair: { mode: CrosshairMode.Normal },
             handleScale: false,
@@ -234,7 +256,7 @@ export function MarketLines({ symbols: all }) {
         return (_jsx("p", { className: "py-6 text-center text-sm text-muted-foreground", children: "No bars for this session yet." }));
     if (!ready)
         return _jsx(Skeleton, { "aria-busy": true, className: "h-72 w-full sm:h-80" });
-    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [_jsx("div", { className: "flex flex-nowrap justify-between gap-x-1 overflow-x-auto overflow-y-hidden [scrollbar-width:none] sm:justify-start sm:gap-x-3", children: shown.map((s, i) => {
+    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [_jsx("div", { className: "flex flex-wrap justify-between gap-x-1 sm:justify-start sm:gap-x-3", children: shown.map((s, i) => {
                     const ch = hover?.[s.key] ?? changeOf(s);
                     const last = s.bars.at(-1)?.c;
                     const ext = extendedOf(s);
@@ -248,7 +270,11 @@ export function MarketLines({ symbols: all }) {
 const CHIP = 'h-4 px-1.5 text-[10px]';
 /** "≈ SPY": the row is priced from that ETF. Purple, so it never reads as a warning. */
 const ProxyChip = ({ text, title }) => (_jsx(Badge, { variant: "outline", title: title, className: cn(CHIP, 'num shrink-0 border-proxy/40 bg-proxy/10 text-proxy'), children: text }));
-const DelayedChip = () => (_jsx(Badge, { variant: "outline", className: cn(CHIP, 'border-warning/50 bg-warning/10 text-warning'), children: "Delayed" }));
+/** "Delayed", and the time of the value shown when it is known. */
+const DelayedChip = ({ at }) => {
+    const { timeZone } = usePrefs();
+    return (_jsxs(Badge, { variant: "outline", className: cn(CHIP, 'border-warning/50 bg-warning/10 text-warning'), children: ["Delayed", at !== undefined ? ` · ${clock(at, timeZone).replace(/ [A-Z]{2,5}$/, '')}` : ''] }));
+};
 /** One widget per symbol: change, sparkline over the prior close, value, and its source chip. */
 export function MarketTiles({ symbols }) {
     const liveKeys = useMemo(() => symbols.filter((k) => !isDailyMarketKey(k)), [symbols]);
@@ -281,7 +307,14 @@ export function MarketTiles({ symbols }) {
 function TileState({ label, text, tone, loading, children, }) {
     return (_jsxs("div", { "aria-busy": loading || undefined, className: "flex h-[7.5rem] min-w-0 flex-col gap-1 rounded-lg border bg-card p-2.5", children: [_jsx("span", { className: "truncate font-semibold", children: label }), loading ? (_jsx(Skeleton, { className: "h-14 w-full" })) : (_jsxs("span", { className: "flex h-14 items-center gap-1.5 text-xs text-muted-foreground", children: [tone === 'error' ? (_jsx(CircleAlert, { className: "size-3.5 shrink-0 text-loss" })) : (_jsx(CircleSlash, { className: "size-3.5 shrink-0" })), _jsx("span", { className: "line-clamp-3", children: text })] })), _jsxs("span", { className: "flex items-center justify-between gap-2 text-[10px] text-muted-foreground", children: [loading ? (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx(LoaderCircle, { className: "size-3 animate-spin" }), text] })) : (_jsx("span", {})), children] })] }));
 }
+/** How long a widget shows its first bars as on the way before it says there are none. */
+const FIRST_BARS_MS = 90_000;
 function Widget({ s, onOpen, live }) {
+    const [waited, setWaited] = useState(false);
+    useEffect(() => {
+        const t = setTimeout(() => setWaited(true), FIRST_BARS_MS);
+        return () => clearTimeout(t);
+    }, []);
     const last = s.bars.at(-1)?.c;
     const ch = s.daily?.points && last !== undefined && s.prevClose !== null
         ? last - s.prevClose
@@ -306,7 +339,7 @@ function Widget({ s, onOpen, live }) {
     const hi = Math.max(...values, s.prevClose ?? Number.NEGATIVE_INFINITY);
     const pad = (hi - lo) * 0.12 || 1;
     const tone = up ? 'var(--gain)' : 'var(--loss)';
-    return (_jsxs("button", { type: "button", onClick: onOpen, disabled: !onOpen, "aria-label": `${s.label} ${ch === null ? '' : fmtCh(ch)}, open chart`, className: "flex min-w-0 flex-col gap-1 rounded-lg border bg-card p-2.5 text-left transition-colors hover:bg-muted/40 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-default", children: [_jsxs("span", { className: "flex items-baseline justify-between gap-2", children: [_jsx("span", { className: "min-w-0 truncate font-semibold", children: s.label }), ch !== null && (_jsx("span", { className: cn('num shrink-0 text-xs whitespace-nowrap', up ? 'text-gain' : 'text-loss'), children: fmtCh(ch) }))] }), ext ? (_jsxs("span", { className: "num truncate text-xs text-muted-foreground", children: [ext.label, ' ', _jsx("span", { className: ext.change >= 0 ? 'text-gain' : 'text-loss', children: fmtPct(ext.change).slice(0, -2) })] })) : (_jsx("span", { className: "truncate text-[11px] text-muted-foreground", children: s.name })), data.length > 1 ? (_jsx(ChartContainer, { config: { c: { label: s.label, color: tone } }, className: "aspect-auto h-14 w-full", children: _jsxs(AreaChart, { data: data, margin: { top: 2, bottom: 2, left: 0, right: 0 }, children: [_jsx(YAxis, { hide: true, domain: [lo - pad, hi + pad] }), s.prevClose !== null && !s.daily && (_jsx(ReferenceLine, { y: s.prevClose, stroke: "var(--muted-foreground)", strokeDasharray: "3 3" })), _jsx(Area, { dataKey: "c", type: "linear", stroke: tone, strokeWidth: 1.5, fill: tone, fillOpacity: 0.1, isAnimationActive: false, dot: false }), ext && (_jsx(Area, { dataKey: "e", type: "linear", stroke: ext.change >= 0 ? 'var(--gain)' : 'var(--loss)', strokeWidth: 1.5, strokeDasharray: "3 2", fill: "none", isAnimationActive: false, dot: false }))] }) })) : (_jsx("span", { className: "grid h-14 place-items-center text-xs text-muted-foreground", children: s.error ?? 'No bars yet' })), _jsxs("span", { className: "flex items-baseline justify-between gap-2", children: [_jsx("span", { className: "num text-sm", children: last !== undefined ? fmtValue(s, last) : '—' }), s.daily ? (_jsxs("span", { className: "text-[10px] text-muted-foreground", children: ["Daily \u00B7 ", day(s.daily.asOf)] })) : s.delayed ? (_jsx(DelayedChip, {})) : s.via ? (_jsxs("span", { className: "text-[10px] text-muted-foreground", children: ["via ", s.via] })) : live ? (_jsx("span", { className: "text-[10px] text-muted-foreground", children: "Live" })) : null] })] }));
+    return (_jsxs("button", { type: "button", onClick: onOpen, disabled: !onOpen, "aria-label": `${s.label} ${ch === null ? '' : fmtCh(ch)}, open chart`, className: "flex min-w-0 flex-col gap-1 rounded-lg border bg-card p-2.5 text-left transition-colors hover:bg-muted/40 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-default", children: [_jsxs("span", { className: "flex items-baseline justify-between gap-2", children: [_jsx("span", { className: "min-w-0 truncate font-semibold", children: s.label }), ch !== null && (_jsx("span", { className: cn('num shrink-0 text-xs whitespace-nowrap', up ? 'text-gain' : 'text-loss'), children: fmtCh(ch) }))] }), ext ? (_jsxs("span", { className: "num truncate text-xs text-muted-foreground", children: [ext.label, ' ', _jsx("span", { className: ext.change >= 0 ? 'text-gain' : 'text-loss', children: fmtPct(ext.change).slice(0, -2) })] })) : (_jsx("span", { className: "truncate text-[11px] text-muted-foreground", children: s.name })), data.length > 1 ? (_jsx(ChartContainer, { config: { c: { label: s.label, color: tone } }, className: "aspect-auto h-14 w-full", children: _jsxs(AreaChart, { data: data, margin: { top: 2, bottom: 2, left: 0, right: 0 }, children: [_jsx(YAxis, { hide: true, domain: [lo - pad, hi + pad] }), s.prevClose !== null && !s.daily && (_jsx(ReferenceLine, { y: s.prevClose, stroke: "var(--muted-foreground)", strokeDasharray: "3 3" })), _jsx(Area, { dataKey: "c", type: "linear", stroke: tone, strokeWidth: 1.5, fill: tone, fillOpacity: 0.1, isAnimationActive: false, dot: false }), ext && (_jsx(Area, { dataKey: "e", type: "linear", stroke: ext.change >= 0 ? 'var(--gain)' : 'var(--loss)', strokeWidth: 1.5, strokeDasharray: "3 2", fill: "none", isAnimationActive: false, dot: false }))] }) })) : s.error ? (_jsx("span", { className: "grid h-14 place-items-center text-xs text-muted-foreground", children: s.error })) : waited ? (_jsx("span", { className: "grid h-14 place-items-center text-xs text-muted-foreground", children: "No bars yet" })) : (_jsx(Skeleton, { "aria-busy": true, className: "h-14 w-full" })), _jsxs("span", { className: "flex items-baseline justify-between gap-2", children: [last !== undefined ? (_jsx("span", { className: "num text-sm", children: fmtValue(s, last) })) : (_jsx(Skeleton, { className: "h-5 w-14" })), s.daily ? (_jsxs("span", { className: "text-[10px] text-muted-foreground", children: ["Daily \u00B7 ", day(s.daily.asOf)] })) : s.delayed ? (last !== undefined && _jsx(DelayedChip, { at: s.bars.at(-1)?.t })) : s.via ? (_jsxs("span", { className: "text-[10px] text-muted-foreground", children: ["via ", s.via] })) : live ? (_jsx("span", { className: "text-[10px] text-muted-foreground", children: "Live" })) : null] })] }));
 }
 /**
  * Up or down today: one row per symbol with its price now and its change today,
@@ -339,7 +372,7 @@ export function MarketToday({ symbols: all }) {
     return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("p", { className: "num flex items-center gap-2 text-xs text-muted-foreground", children: [_jsxs("span", { className: "text-gain", children: ["\u25B2 ", up, " up"] }), _jsxs("span", { className: "text-loss", children: ["\u25BC ", down, " down"] }), session && _jsx("span", { className: "ml-auto font-sans", children: session })] }), _jsx("div", { className: "flex flex-col", children: rows.map(({ s, today, proxy }) => {
                     const ch = today?.change ?? null;
                     const tone = ch === null ? 'text-muted-foreground' : ch >= 0 ? 'text-gain' : 'text-loss';
-                    return (_jsxs(Button, { variant: "ghost", className: "h-auto min-w-0 justify-between gap-3 px-2 py-1.5 font-normal", disabled: !open, onClick: () => open?.(s.key), title: `Open ${s.label}'s chart`, children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: "truncate font-semibold", children: s.label }), proxy && (_jsx(ProxyChip, { text: `≈ ${proxy}`, title: `${s.label} is priced from ${proxy}'s move${today?.label ? ` ${today.label.toLowerCase()}` : ''}.` })), s.delayed && !today?.label && _jsx(DelayedChip, {})] }), _jsxs("span", { className: "flex shrink-0 items-center gap-3", children: [_jsx("span", { className: "num text-xs text-muted-foreground", children: today ? fmtValue(s, today.value) : '—' }), _jsx("span", { className: cn('num w-16 text-right text-sm font-semibold', tone), children: ch === null ? '—' : fmtPct(ch) })] })] }, s.key));
+                    return (_jsxs(Button, { variant: "ghost", className: "h-auto min-w-0 justify-between gap-3 px-2 py-1.5 font-normal", disabled: !open, onClick: () => open?.(s.key), title: `Open ${s.label}'s chart`, children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: "truncate font-semibold", children: s.label }), proxy && (_jsx(ProxyChip, { text: `≈ ${proxy}`, title: `${s.label} is priced from ${proxy}'s move${today?.label ? ` ${today.label.toLowerCase()}` : ''}.` })), s.delayed && today && !today.label && _jsx(DelayedChip, {})] }), today ? (_jsxs("span", { className: "flex shrink-0 items-center gap-3", children: [_jsx("span", { className: "num text-xs text-muted-foreground", children: fmtValue(s, today.value) }), _jsx("span", { className: cn('num w-16 text-right text-sm font-semibold', tone), children: ch === null ? '—' : fmtPct(ch) })] })) : (_jsx(Skeleton, { className: "h-4 w-28 shrink-0" }))] }, s.key));
                 }) }), proxied.length > 0 && (_jsxs("p", { className: "flex items-start gap-2 border-t px-2 pt-2 text-xs text-muted-foreground", children: [_jsx(ProxyChip, { text: "\u2248" }), _jsx("span", { children: proxied.length === 1
                             ? `Proxy: ${proxied[0]?.s.label} moves with ${proxied[0]?.proxy}.`
                             : "Proxy: these don't trade now, so each moves with its ETF." })] }))] }));

package/dist/meter-level.d.ts

@@ -1,7 +1,12 @@
-import type { MeterLevel, MeterLevels } from '@columenlabs/lumen-ui-types/views';
-/** The level of `share` (0 to 1 of a cap), on the app's levels or this meter's own `levels`. */
-export declare function meterLevel(share: number, levels?: Partial<MeterLevels>): MeterLevel;
-/** Each level's colour, theme tokens: `ok` is a quiet grey so only a meter near its cap draws the eye. */
+import { type HealthLevels, type MeterKind, type MeterLevel, type MeterLevels } from '@columenlabs/lumen-ui-types/views';
+/**
+ * The level of `share` (0 to 1), on the app's levels or this meter's own `levels`. `kind`
+ * `health` reads it the other way (higher is better) on the app's `healthLevels`.
+ */
+export declare function meterLevel(share: number, levels?: Partial<MeterLevels> | Partial<HealthLevels>, kind?: MeterKind): MeterLevel;
+/** Each level's colour on a bar, a dot or a chip's tint: theme tokens (`theme.css`). */
 export declare const METER_LEVEL_COLOR: Record<MeterLevel, string>;
-/** A share's `UnitValue` tone: none while `ok`. */
-export declare const meterValueTone: (share: number, levels?: Partial<MeterLevels>) => "loss" | "warning" | undefined;
+/** Each level's text colour on its own tint (a chip): darker than the fill, so it reads at 4.5:1. */
+export declare const METER_LEVEL_TEXT: Record<MeterLevel, string>;
+/** A share's `UnitValue` tone: none while `ok`, so only a number that needs a look is tinted. */
+export declare const meterValueTone: (share: number, levels?: Partial<MeterLevels> | Partial<HealthLevels>, kind?: MeterKind) => "caution" | "loss" | "warning" | undefined;

package/dist/meter-level.js

@@ -1,14 +1,32 @@
+// How full a meter reads, the same way in every app. A usage meter is green while there is room,
+// amber from `watch` (75%), orange from `alert` (90%) and red from `over` (the cap). A health
+// meter (uptime, success rate) is green at 99% and over, amber down to 95%, red below.
+// `ShareMeter` and `UnitValue` colour themselves with it; anything else drawing a share of a cap
+// (a dot, a chip, a "Watch for" cell) calls `meterLevel` rather than its own numbers.
+import { healthLevel, usageLevel, } from '@columenlabs/lumen-ui-types/views';
 import { KIT } from './kit-config.js';
-/** The level of `share` (0 to 1 of a cap), on the app's levels or this meter's own `levels`. */
-export function meterLevel(share, levels) {
-    const { watch, alert } = { ...KIT.meterLevels, ...levels };
-    return share >= alert ? 'alert' : share >= watch ? 'watch' : 'ok';
+/**
+ * The level of `share` (0 to 1), on the app's levels or this meter's own `levels`. `kind`
+ * `health` reads it the other way (higher is better) on the app's `healthLevels`.
+ */
+export function meterLevel(share, levels, kind = 'usage') {
+    return kind === 'health'
+        ? healthLevel(share, { ...KIT.healthLevels, ...levels })
+        : usageLevel(share, { ...KIT.meterLevels, ...levels });
 }
-/** Each level's colour, theme tokens: `ok` is a quiet grey so only a meter near its cap draws the eye. */
+/** Each level's colour on a bar, a dot or a chip's tint: theme tokens (`theme.css`). */
 export const METER_LEVEL_COLOR = {
-    ok: 'color-mix(in oklab, var(--muted-foreground) 55%, transparent)',
-    watch: 'var(--warning)',
-    alert: 'var(--loss)',
+    ok: 'var(--meter-ok)',
+    watch: 'var(--meter-watch)',
+    alert: 'var(--meter-alert)',
+    over: 'var(--meter-over)',
 };
-/** A share's `UnitValue` tone: none while `ok`. */
-export const meterValueTone = (share, levels) => ({ ok: undefined, watch: 'warning', alert: 'loss' })[meterLevel(share, levels)];
+/** Each level's text colour on its own tint (a chip): darker than the fill, so it reads at 4.5:1. */
+export const METER_LEVEL_TEXT = {
+    ok: 'var(--foreground)',
+    watch: 'color-mix(in oklab, var(--warning) 85%, var(--foreground))',
+    alert: 'color-mix(in oklab, var(--caution) 85%, var(--foreground))',
+    over: 'color-mix(in oklab, var(--loss) 85%, var(--foreground))',
+};
+/** A share's `UnitValue` tone: none while `ok`, so only a number that needs a look is tinted. */
+export const meterValueTone = (share, levels, kind) => ({ ok: undefined, watch: 'warning', alert: 'caution', over: 'loss' })[meterLevel(share, levels, kind)];

package/dist/share-meter.d.ts

@@ -1,23 +1,25 @@
-import type { MeterLevels } from '@columenlabs/lumen-ui-types/views';
+import type { HealthLevels, MeterKind, MeterLevels } from '@columenlabs/lumen-ui-types/views';
 import type { ReactNode } from 'react';
-/** One part of a split meter: its own share of the cap (0 to 1 of the whole cap), in its colour. */
+/** One part of a split meter: its own share of the cap (0 to 1 of the whole cap). */
 export interface ShareSegment {
     value: number;
-    /** A theme token or CSS colour (a label's colour). */
-    color: string;
+    /** No longer drawn (the bar takes its level's colour); kept so older calls still compile. */
+    color?: string;
     /** Who it is, read out by screen readers and in the bar's hover (`web 122%`). */
     label?: string;
 }
-export declare function ShareMeter({ value, label, color, levels, segments, wide, className, }: {
-    /** 0 to 1 fills the bar; past 1 it stays full (with `segments`, the track stretches instead). */
+export declare function ShareMeter({ value, label, color, kind, levels, segments, wide, className, }: {
+    /** 0 to 1 fills the bar; past 1 it stays full and the overage spills past a tick at the cap. */
     value: number;
     /** The number beside the bar, e.g. `113%`; left out, the rounded percent. */
     label?: ReactNode;
-    /** The bar's colour, a theme token; left out, the share's level (grey, amber, red). */
+    /** The bar's colour, a theme token; left out, the share's level. */
     color?: string;
-    /** This meter's own levels (e.g. `{ watch: 0.5 }`); left out, the app's `meterLevels`. */
-    levels?: Partial<MeterLevels>;
-    /** Splits the bar by who used the cap, largest first; their values add up to `value`. */
+    /** `health` reads higher as better (uptime): green at 99% and over, amber, red under 95%. */
+    kind?: MeterKind;
+    /** This meter's own levels (e.g. `{ watch: 0.5 }`); left out, the app's levels for its kind. */
+    levels?: Partial<MeterLevels> | Partial<HealthLevels>;
+    /** Who used the cap, largest first; their values add up to `value`. Shown in the hover. */
     segments?: ShareSegment[];
     /** Fills its cell (a list row) instead of the fixed table width. */
     wide?: boolean;

package/dist/share-meter.js

@@ -2,17 +2,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from './lib/utils.js';
 import { METER_LEVEL_COLOR, meterLevel } from './meter-level.js';
 import { Progress } from './ui/progress.js';
-export function ShareMeter({ value, label, color, levels, segments, wide, className, }) {
-    const number = (_jsx("span", { className: "num w-11 shrink-0 text-right text-xs", children: label ?? `${Math.round(value * 100)}%` }));
-    if (segments?.length) {
-        // Past the cap the bar keeps its width: the track reads as the total and the tick as the cap.
-        const scale = Math.max(1, value);
-        const said = segments
-            .filter((s) => s.value > 0)
-            .map((s) => `${s.label ?? ''} ${Math.round(s.value * 100)}%`.trim());
-        return (_jsxs("span", { className: cn('inline-flex items-center gap-2', wide && 'w-full', className), children: [_jsxs("span", { role: "img", "aria-label": said.join(', '), title: said.join(' · '), "data-slot": "share-segments", className: cn('relative flex h-1.5 shrink-0 overflow-hidden rounded-full bg-muted', wide ? 'w-full shrink' : 'w-14'), children: [segments.map((s, i) => s.value > 0 ? (_jsx("span", { className: "h-full shrink-0 border-background not-first:border-l", style: { width: `${(s.value / scale) * 100}%`, background: s.color } }, i)) : null), value > 1 && (_jsx("span", { "aria-hidden": true, className: "absolute inset-y-0 w-0.5 -translate-x-1/2 bg-foreground/70", style: { left: `${(1 / scale) * 100}%` } }))] }), number] }));
-    }
-    return (_jsxs("span", { className: cn('inline-flex items-center gap-2', wide && 'w-full', className), children: [_jsx(Progress, { value: Math.max(0, Math.min(value, 1)) * 100, className: cn('h-1.5 shrink-0 [&>[data-slot=progress-indicator]]:bg-(--meter-color)', wide ? 'w-full shrink' : 'w-14'), style: {
-                    '--meter-color': color ?? METER_LEVEL_COLOR[meterLevel(value, levels)],
-                } }), number] }));
+/** How far past the cap the spill stub can grow (a share of the cap). */
+const SPILL_MAX = 0.5;
+export function ShareMeter({ value, label, color, kind, levels, segments, wide, className, }) {
+    const said = segments
+        ?.filter((s) => s.value > 0)
+        .map((s) => `${s.label ?? ''} ${Math.round(s.value * 100)}%`.trim());
+    const over = kind !== 'health' && value > 1;
+    const spill = over ? Math.min(value - 1, SPILL_MAX) / SPILL_MAX : 0;
+    return (_jsxs("span", { className: cn('inline-flex items-center gap-2', wide && 'w-full', className), title: said?.length ? said.join(' · ') : undefined, children: [_jsxs("span", { "data-slot": "share-meter", "data-over": over || undefined, className: cn('flex shrink-0 items-center', wide ? 'w-full shrink' : 'w-16'), style: {
+                    '--meter-color': color ?? METER_LEVEL_COLOR[meterLevel(value, levels, kind)],
+                }, children: [_jsx(Progress, { value: Math.max(0, Math.min(value, 1)) * 100, "aria-label": said?.length ? said.join(', ') : undefined, className: cn('h-1.5 w-auto flex-2 [&>[data-slot=progress-indicator]]:bg-(--meter-color)', over && 'rounded-r-none') }), _jsx("span", { "aria-hidden": true, className: "flex h-1.5 flex-1", children: over && (_jsx("span", { "data-slot": "share-spill", className: "h-full min-w-1 rounded-r-full border-foreground/70 border-l-2", style: {
+                                width: `${spill * 100}%`,
+                                background: 'repeating-linear-gradient(135deg, var(--meter-color) 0 2px, transparent 2px 4px)',
+                            } })) })] }), _jsx("span", { className: "num w-11 shrink-0 text-right text-xs", children: label ?? `${Math.round(value * 100)}%` })] }));
 }

package/dist/summary-cards.js

@@ -19,7 +19,9 @@ export function figuresOf(domain, t, rows, fields) {
     if (!f)
         return null;
     const count = isCountAgg(t.agg);
-    const value = roll(f, t.agg, filterByTokens(rows, fields, t.filter));
+    const own = filterByTokens(rows, fields, t.filter);
+    // A sum over no rows is nothing yet: $0, never a dash.
+    const value = roll(f, t.agg, own) ?? (t.agg === 'sum' && !own.length ? 0 : null);
     const main = {
         kind: 'value',
         value,
@@ -36,15 +38,21 @@ export function figuresOf(domain, t, rows, fields) {
         if (l.kind === 'pct') {
             const of = roll(lf, l.agg, rows);
             const pct = typeof value === 'number' && typeof of === 'number' && of !== 0 ? (value / of) * 100 : null;
+            // A line with nothing to say is left out, never a dash in a sentence.
+            if (pct === null)
+                return [];
             return [
                 { kind: 'value', value: pct, format: 'weight', amount: false, suffix: `of ${lf.label}` },
             ];
         }
         const c = isCountAgg(l.agg);
+        const lv = roll(lf, l.agg, filterByTokens(rows, fields, l.filter));
+        if (lv === null)
+            return [];
         return [
             {
                 kind: 'value',
-                value: roll(lf, l.agg, filterByTokens(rows, fields, l.filter)),
+                value: lv,
                 format: c ? 'rounded' : lf.format,
                 amount: !c && !!lf.amount,
                 suffix: l.suffix || undefined,
@@ -82,23 +90,24 @@ export function LumenCard({ domain, tile: t, rows, fields, drawn, loading, style
     const share = style !== 'number' && target && typeof v === 'number'
         ? Math.max(0, Math.min(100, (v / target) * 100))
         : null;
-    const tone = meterTone(meter, share, bands ?? (meter === 'usage' ? usageBands() : undefined));
+    const tone = meterTone(meter, share, bands ?? (meter ? kitBands(meter) : undefined));
     const of = target ? (_jsx(ViewValueCell, { value: target, format: figs.main.format, amount: figs.main.amount })) : null;
     if (style === 'progress_circle')
         return (_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx(ProgressRing, { value: share, tone: tone }), _jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("span", { className: "num truncate text-xl leading-7 font-semibold", children: _jsx(FigureText, { f: figs.main }) }), _jsx("span", { className: "num truncate text-xs text-muted-foreground", children: of ? _jsxs(_Fragment, { children: ["of ", of] }) : 'Set a target in Edit widget' })] })] }));
     return (_jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("span", { className: cn('num truncate text-2xl leading-8 font-semibold', t.sign && typeof v === 'number' && (v > 0 ? 'text-gain' : v < 0 ? 'text-loss' : '')), children: _jsx(FigureText, { f: figs.main }) }), style === 'progress_bar' && (_jsxs("div", { className: "flex flex-col gap-1 pt-1", children: [_jsx(Progress, { value: share ?? 0, className: cn('h-2', tone && TONE_BAR[tone]), "aria-label": "Progress to target" }), _jsx("span", { className: "num text-xs text-muted-foreground", children: of ? (_jsxs(_Fragment, { children: [share === null ? '—' : `${share.toFixed(0)}%`, " of ", of] })) : ('Set a target in Edit widget') })] })), figs.lines.map((l, i) => (_jsx("span", { className: "num line-clamp-2 text-xs text-muted-foreground", children: _jsx(FigureText, { f: l }) }, i)))] }));
 }
-/** A usage meter's bands from the app's `meterLevels`, in %. */
-const usageBands = () => ({
-    warn: KIT.meterLevels.watch * 100,
-    bad: KIT.meterLevels.alert * 100,
-});
+/** A meter's bands from the app's `meterLevels` or `healthLevels`, in %. */
+const kitBands = (meter) => {
+    const l = meter === 'health' ? KIT.healthLevels : KIT.meterLevels;
+    return { warn: l.watch * 100, bad: l.alert * 100 };
+};
 // The ring draws with the charts library, so it loads only when a card shows one.
 const ProgressRing = lazyPart(() => import('./progress-ring.js').then((m) => m.ProgressRing), _jsx(Skeleton, { className: "size-16 shrink-0 rounded-full" }));
 /** A meter's tone on a bar's fill (theme tokens, no glow). */
 const TONE_BAR = {
     success: '[&>[data-slot=progress-indicator]]:bg-success',
     warning: '[&>[data-slot=progress-indicator]]:bg-warning',
+    caution: '[&>[data-slot=progress-indicator]]:bg-caution',
     destructive: '[&>[data-slot=progress-indicator]]:bg-destructive',
 };
 /** A Summary's cards over its rows; null when it has none to show. */
@@ -107,7 +116,7 @@ export function SummaryTiles({ domain, tiles, rows, fields, tile, loading, }) {
     if (!shown.length)
         return null;
     // Each card fills its column, as a header's metric cards do (`TileRow fill`), not the fixed tile width.
-    const grid = 'grid grid-cols-2 gap-(--shell-section-gap) md:auto-cols-fr md:grid-flow-col lg:*:*:w-auto';
+    const grid = 'grid grid-cols-2 gap-(--shell-section-gap) md:auto-cols-[minmax(0,1fr)] md:grid-flow-col lg:*:*:w-auto';
     if (loading)
         return (_jsx("div", { "data-slot": "view-tiles", "aria-busy": "true", className: grid, children: shown.map((t) => (_jsx(Skeleton, { className: "h-[4.5rem] w-full rounded-xl" }, t.key))) }));
     return (_jsx("div", { "data-slot": "view-tiles", className: cn(grid, 

package/dist/theme.css

@@ -29,6 +29,7 @@
   --color-info: var(--info);
   --color-proxy: var(--proxy);
   --color-warning: var(--warning);
+  --color-caution: var(--caution);
   --color-rule-yes: var(--rule-yes);
   --color-rule-no: var(--rule-no);
   --color-gap: var(--gap);
@@ -182,6 +183,13 @@
   /* A price taken from a stand-in ETF (≈ SPY). */
   --proxy: #7c3aed;
   --warning: #9a5b06;
+  /* Orange text between amber and red: a meter from 90% of its cap (UnitValue `caution`). */
+  --caution: #b24c08;
+  /* Meter fills (meterLevel): green with room, amber from 75%, orange from 90%, red at the cap. */
+  --meter-ok: #2f9e5a;
+  --meter-watch: #e0a800;
+  --meter-alert: #ea6c17;
+  --meter-over: #d63838;
   /* Playbook rules: yes (fired, the path and the decision) green, no amber. */
   --rule-yes: #15803d;
   --rule-no: #b45309;
@@ -278,6 +286,11 @@
   --info: #6aa9ff;
   --proxy: #b69cff;
   --warning: #e5a73a;
+  --caution: #ffa266;
+  --meter-ok: #44bf78;
+  --meter-watch: #f2c14e;
+  --meter-alert: #ff8a3d;
+  --meter-over: #ff5a5a;
   --rule-yes: #4ade80;
   --rule-no: #fbbf24;
   --gap: #f0883e;
@@ -727,11 +740,15 @@ body[data-spotlight="nav"] [data-spotlit] {
 }
 
 /* LumenGrid: react-grid-layout's own rules, in the shell's tokens. */
+/* Cards glide only while a person moves them in Edit layout. On a page that loads they take their
+   measured place at once, so a card that settles never leaves a gap sliding shut behind it. */
 .lumen-grid {
   position: relative;
+}
+.lumen-grid-edit {
   transition: height 200ms ease;
 }
-.lumen-grid > .react-grid-item {
+.lumen-grid-edit > .react-grid-item {
   transition: transform 200ms ease, width 200ms ease, height 200ms ease;
 }
 .lumen-grid > .react-grid-item.resizing,

package/dist/tile.js

@@ -18,7 +18,7 @@ export function TileSpark({ values, color = 'var(--chart-1)', className, }) {
 /** A value with no digit in it ("Workers Paid", "Healthy") is a word, not a number. */
 const isWord = (v) => typeof v === 'string' && !/\d/.test(v);
 function TileBody({ label, value, caption, lines, valueClassName, spark, sparkColor, }) {
-    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "w-full truncate text-xs text-muted-foreground", children: label }), _jsx("span", { className: cn(!isWord(value) && 'num', 'truncate text-xl leading-7 font-semibold', valueClassName), children: value }), caption ? (_jsx("span", { className: "line-clamp-2 text-xs text-muted-foreground tabular-nums", children: caption })) : null, lines?.map((l, i) => (_jsx("span", { className: "num line-clamp-2 text-xs text-muted-foreground", children: l }, i))), spark ? _jsx(TileSpark, { values: spark, color: sparkColor, className: "mt-1 self-stretch" }) : null] }));
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "w-full truncate text-xs text-muted-foreground", children: label }), _jsx("span", { className: cn(!isWord(value) && 'num', 'truncate text-xl leading-7 font-semibold', valueClassName), children: value }), caption ? (_jsx("span", { className: "line-clamp-2 text-xs text-muted-foreground tabular-nums", children: caption })) : null, lines?.map((l, i) => (_jsx("span", { className: "line-clamp-2 text-xs text-muted-foreground tabular-nums", children: l }, i))), spark ? _jsx(TileSpark, { values: spark, color: sparkColor, className: "mt-1 self-stretch" }) : null] }));
 }
 export function Tile({ label, value, caption, lines, className, valueClassName, spark, sparkColor, }) {
     return (_jsx(Card, { size: "sm", className: cn('min-w-0 flex-1 basis-2/5 gap-0.5 px-3 lg:basis-auto', TILE_WIDTH, className), children: _jsx(TileBody, { label: label, value: value, caption: caption, lines: lines, valueClassName: valueClassName, spark: spark, sparkColor: sparkColor }) }));

package/dist/time-to-cap.js

@@ -3,7 +3,7 @@ import { ZapIcon } from 'lucide-react';
 import { useIsMobile } from './hooks/use-mobile.js';
 import { cn } from './lib/utils.js';
 import { LumenSelector } from './lumen-selector.js';
-import { METER_LEVEL_COLOR, meterLevel } from './meter-level.js';
+import { METER_LEVEL_COLOR, METER_LEVEL_TEXT, meterLevel } from './meter-level.js';
 import { PACE_WINDOWS, durationText, usePaceWindow } from './pace.js';
 import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group.js';
 /** Picks the pace window (6h, 12h, 24h, 7d) for every page at once; a header action. */
@@ -17,7 +17,7 @@ export function PaceWindowPicker({ className }) {
 /** What a pace reads as: the words and the level they're coloured by. */
 export function paceText(p, short = false) {
     if (p.eta === 0)
-        return { text: short ? 'cap' : 'At cap', level: 'alert' };
+        return { text: short ? 'cap' : 'At cap', level: 'over' };
     const level = meterLevel(p.atReset);
     if (p.hits)
         return { text: short ? durationText(p.eta, true) : `in ${durationText(p.eta)}`, level };
@@ -39,7 +39,7 @@ export function TimeToCap({ pace, label, short, levels, className, }) {
             : level === 'ok'
                 ? { background: 'var(--muted)' }
                 : {
-                    background: `color-mix(in oklab, ${c} 18%, transparent)`,
-                    color: `color-mix(in oklab, ${c} 80%, var(--foreground))`,
+                    background: `color-mix(in oklab, ${c} 14%, transparent)`,
+                    color: METER_LEVEL_TEXT[level],
                 }, children: [label && _jsx("span", { className: "truncate max-md:max-w-16", children: label }), _jsx("span", { className: "num", children: t.text })] }));
 }

package/dist/unit-value.d.ts

@@ -7,9 +7,9 @@ export declare function UnitValue({ value, unit, tone: toneProp, share, levels,
     value: ReactNode;
     /** Its unit (`GB`, `M`, `/day`); left out, the slot stays empty so the column still lines up. */
     unit?: ReactNode;
-    /** Near (`warning`) or past (`loss`) a limit: tints the number and shows a dot. */
-    tone?: 'warning' | 'loss';
-    /** Its share of a cap (0 to 1): sets `tone` by `meterLevel` (amber from 75%, red from 90%). */
+    /** Near (`warning`, amber), close to (`caution`, orange) or at (`loss`, red) a limit: tints the number and shows a dot. */
+    tone?: 'warning' | 'caution' | 'loss';
+    /** Its share of a cap (0 to 1): sets `tone` by `meterLevel` (amber from 75%, orange from 90%, red from 100%). */
     share?: number;
     /** This value's own levels; left out, the app's `meterLevels`. */
     levels?: Partial<MeterLevels>;

package/dist/unit-value.js

@@ -14,5 +14,5 @@ export function UnitValue({ value, unit, tone: toneProp, share, levels, title, c
         if (mark && col)
             mark(col);
     }, [mark]);
-    return (_jsxs("span", { ref: ref, "data-slot": "unit-value", title: title, className: cn('inline-flex w-full items-center justify-end whitespace-nowrap', className), children: [_jsxs("span", { className: cn('num relative text-right', tone === 'warning' && 'text-warning', tone === 'loss' && 'text-loss'), children: [tone && (_jsx("span", { "aria-hidden": "true", className: cn('-translate-y-1/2 absolute top-1/2 right-full mr-1 size-1.5 rounded-full', tone === 'warning' ? 'bg-warning' : 'bg-loss') })), value] }), _jsx("span", { "data-slot": "unit-value-unit", className: "w-(--unit-slot) shrink-0 pl-1 text-left text-muted-foreground text-xs", children: unit })] }));
+    return (_jsxs("span", { ref: ref, "data-slot": "unit-value", title: title, className: cn('inline-flex w-full items-center justify-end whitespace-nowrap', className), children: [_jsxs("span", { className: cn('num relative text-right', tone === 'warning' && 'text-warning', tone === 'caution' && 'text-caution', tone === 'loss' && 'text-loss'), children: [tone && (_jsx("span", { "aria-hidden": "true", className: cn('-translate-y-1/2 absolute top-1/2 right-full mr-1 size-1.5 rounded-full', tone === 'warning' ? 'bg-warning' : tone === 'caution' ? 'bg-caution' : 'bg-loss') })), value] }), _jsx("span", { "data-slot": "unit-value-unit", className: "w-(--unit-slot) shrink-0 pl-1 text-left text-muted-foreground text-xs", children: unit })] }));
 }

package/package.json

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