@columenlabs/lumen-ui 0.1.164 → 0.1.165

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/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

@@ -82,23 +82,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. */

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;

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.165",
   "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.165",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",