@columenlabs/lumen-ui 0.1.49 → 0.1.51

package/README.md

@@ -78,6 +78,7 @@ 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.
+- 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.
 - 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.
 - Chart colours are theme tokens (`var(--chart-1)`, `useChartTokens()`), never hex picked for one theme; `LumenEChart` resolves `var(--…)` in its option so sparklines read in light and dark.
 - "No label" filters come built in: `LumenTokenizedFilter` pins a "No <field>" row on any text field where some rows have no value (an `empty` token); don't add your own toggle for it.

package/dist/index.d.ts

@@ -22,6 +22,7 @@ export { LumenChoice, type LumenChoiceOption } from './lumen-choice.js';
 export { LumenSecret } from './lumen-secret.js';
 export { RankedBars, StackedBars, StackedColumns } from './lumen-widget-charts.js';
 export { ShareMeter } from './share-meter.js';
+export { METER_LEVEL_COLOR, meterLevel, meterValueTone } from './meter-level.js';
 export { UnitValue } from './unit-value.js';
 export { COVERAGE_LEVELS, CoverageCell, type CoverageJobState, type CoverageLevel, CoverageLegend, coverageClass, coverageLabel, coverageLevel, } from './coverage-cells.js';
 export { type CoverageBlock, type CoverageData, type CoverageFact, type CoveragePick, type CoverageRow, type CoverageSummary, LumenCoverageMap, type LumenCoverageMapProps, blockName, blockOf, } from './coverage-map.js';

package/dist/index.js

@@ -29,6 +29,7 @@ export { LumenChoice } from './lumen-choice.js';
 export { LumenSecret } from './lumen-secret.js';
 export { RankedBars, StackedBars, StackedColumns } from './lumen-widget-charts.js';
 export { ShareMeter } from './share-meter.js';
+export { METER_LEVEL_COLOR, meterLevel, meterValueTone } from './meter-level.js';
 export { UnitValue } from './unit-value.js';
 export { COVERAGE_LEVELS, CoverageCell, CoverageLegend, coverageClass, coverageLabel, coverageLevel, } from './coverage-cells.js';
 export { LumenCoverageMap, blockName, blockOf, } from './coverage-map.js';

package/dist/kit-config.d.ts

@@ -1,3 +1,4 @@
+import { 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. */
@@ -8,9 +9,13 @@ 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). */
+    meterLevels: MeterLevels;
 }
 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. */
-export declare function configureLumen(c: Partial<KitConfig>): 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'>> & {
+    meterLevels?: Partial<MeterLevels>;
+}): void;

package/dist/kit-config.js

@@ -1,15 +1,23 @@
+// 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';
 export const KIT = {
     prefsCookie: 'lumen_prefs',
     marketOff: 'Live market data is not on this app.',
+    meterLevels: METER_LEVELS,
 };
 const changed = new Set();
 /** Runs `fn` after each `configureLumen` (preferences read again from the app's cookie). */
 export function onConfigure(fn) {
     changed.add(fn);
 }
-/** Sets what `c` names; the rest keep the kit's defaults. */
+/** Sets what `c` names; the rest keep the kit's defaults (one meter level can move alone). */
 export function configureLumen(c) {
-    Object.assign(KIT, c);
+    const { meterLevels, ...rest } = c;
+    Object.assign(KIT, rest);
+    if (meterLevels)
+        KIT.meterLevels = { ...KIT.meterLevels, ...meterLevels };
     for (const fn of changed)
         fn();
 }

package/dist/lumen-drawer.d.ts

@@ -24,7 +24,8 @@ export interface LumenDrawerProps {
  * edge, 320px to 60% by default. The sheet spans the screen so the resizable group has room; only
  * the handle and the drawer take the pointer, so a click beside it falls through to the overlay
  * and closes it (`!` beats the inline pointer-events Radix sets on a modal's content). Its body
- * holds DrawerSections; its footer is always there (actions on the right, Close by default).
+ * holds DrawerSections; its footer sits at the bottom (actions on the right, Close by default; on a
+ * phone it shows only when there are actions, as the sheet's X closes it).
  */
 export declare function LumenDrawer({ open, onClose, title, description, children, footer, footerStart, defaultSize, minSize, maxSize, }: LumenDrawerProps): import("react").JSX.Element;
 export {};

package/dist/lumen-drawer.js

@@ -11,18 +11,19 @@ import { Sheet, SheetClose, SheetContent, SheetDescription, SheetHeader, SheetTi
  * edge, 320px to 60% by default. The sheet spans the screen so the resizable group has room; only
  * the handle and the drawer take the pointer, so a click beside it falls through to the overlay
  * and closes it (`!` beats the inline pointer-events Radix sets on a modal's content). Its body
- * holds DrawerSections; its footer is always there (actions on the right, Close by default).
+ * holds DrawerSections; its footer sits at the bottom (actions on the right, Close by default; on a
+ * phone it shows only when there are actions, as the sheet's X closes it).
  */
 export function LumenDrawer({ open, onClose, title, description, children, footer, footerStart, defaultSize = '32%', minSize = '320px', maxSize = '60%', }) {
     const isMobile = useIsMobile();
     const head = (_jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx(SheetTitle, { className: "truncate", children: title }), _jsx(SheetDescription, { className: description ? 'truncate text-muted-foreground text-xs' : 'sr-only', children: description ?? 'Details' })] }));
     const body = _jsx("div", { className: "flex flex-col px-4 pb-4", children: children });
-    // Every drawer has a footer, styled like a dialog's: the body scrolls above
-    // it and always ends on a clear edge. Without actions of its own it offers Close.
-    // On a phone the drawer is a full screen and the footer a bar under the header, so the
-    // keyboard never covers its actions (Dialog does the same).
-    const foot = (_jsxs("footer", { "data-slot": "drawer-footer", className: "flex shrink-0 items-center gap-2 border-t bg-muted/50 px-4 py-2.5 max-md:order-first max-md:border-t-0 max-md:border-b", children: [footerStart && (_jsx("div", { className: "min-w-0 flex-1 truncate text-muted-foreground text-xs", children: footerStart })), _jsx("div", { className: "ml-auto flex items-center gap-2", children: footer ?? (_jsx(SheetClose, { asChild: true, children: _jsx(Button, { type: "button", size: "sm", variant: "outline", children: "Close" }) })) })] }));
-    return (_jsx(Sheet, { open: open, onOpenChange: (o) => !o && onClose(), modal: isMobile, children: isMobile ? (_jsxs(SheetContent, { side: "bottom", className: "max-h-[85svh] gap-0 overflow-hidden", children: [_jsx(SheetHeader, { className: "order-first shrink-0 border-b", children: head }), _jsx("div", { className: "end-fade min-h-0 flex-1 overflow-y-auto pt-2", children: body }), foot] })) : (_jsx(SheetContent, { side: "right", showCloseButton: false, 
+    // Every drawer ends on a footer, styled like a dialog's: the body scrolls above it and always
+    // ends on a clear edge. Without actions of its own it offers Close, except on a phone, where the
+    // sheet's X already closes it and a second Close only took room.
+    const plain = !footer && !footerStart;
+    const foot = (_jsxs("footer", { "data-slot": "drawer-footer", className: "flex shrink-0 items-center gap-2 border-t bg-muted/50 px-4 py-2.5", children: [footerStart && (_jsx("div", { className: "min-w-0 flex-1 truncate text-muted-foreground text-xs", children: footerStart })), _jsx("div", { className: "ml-auto flex items-center gap-2", children: footer ?? (_jsx(SheetClose, { asChild: true, children: _jsx(Button, { type: "button", size: "sm", variant: "outline", children: "Close" }) })) })] }));
+    return (_jsx(Sheet, { open: open, onOpenChange: (o) => !o && onClose(), modal: isMobile, children: isMobile ? (_jsxs(SheetContent, { side: "bottom", className: "max-h-[85svh] gap-0 overflow-hidden", children: [_jsx(SheetHeader, { className: "order-first shrink-0 border-b", children: head }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto pt-2", children: body }), !plain && foot] })) : (_jsx(SheetContent, { side: "right", showCloseButton: false, 
             // The resize handle's grab zone is wider than the handle, so a drag can start on the
             // overlay; the panels library marks that pointerdown handled, and then it doesn't close.
             onPointerDownOutside: (e) => e.detail.originalEvent.defaultPrevented && e.preventDefault(), className: "pointer-events-none! gap-0 border-0 bg-transparent shadow-none data-[side=right]:left-0 data-[side=right]:w-auto data-[side=right]:border-l-0 data-[side=right]:sm:max-w-none", children: _jsxs(ResizablePanelGroup, { orientation: "horizontal", children: [_jsx(ResizablePanel, { minSize: "40%" }), _jsx(ResizableHandle, { withHandle: true, className: "pointer-events-auto" }), _jsx(ResizablePanel, { defaultSize: defaultSize, minSize: minSize, maxSize: maxSize, "data-slot": "lumen-drawer", className: "pointer-events-auto bg-popover shadow-lg", children: _jsxs("section", { className: "flex h-full flex-col overflow-hidden", children: [_jsxs("header", { className: "flex shrink-0 items-center gap-2 border-b px-4 py-3", children: [head, _jsx(SheetClose, { asChild: true, children: _jsx(IconButton, { icon: XIcon, label: "Close", className: "ml-auto" }) })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto pt-2", children: body }), foot] }) })] }) })) }));

package/dist/meter-level.d.ts

@@ -0,0 +1,7 @@
+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. */
+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;

package/dist/meter-level.js

@@ -0,0 +1,14 @@
+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';
+}
+/** Each level's colour, theme tokens: `ok` is a quiet grey so only a meter near its cap draws the eye. */
+export const METER_LEVEL_COLOR = {
+    ok: 'color-mix(in oklab, var(--muted-foreground) 55%, transparent)',
+    watch: 'var(--warning)',
+    alert: 'var(--loss)',
+};
+/** A share's `UnitValue` tone: none while `ok`. */
+export const meterValueTone = (share, levels) => ({ ok: undefined, watch: 'warning', alert: 'loss' })[meterLevel(share, levels)];

package/dist/nav.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentType, type ReactNode } from 'react';
+import type { ComponentType, ReactNode } from 'react';
 import { type AssistantPageType } from './assistant-screen.js';
 /** A nav icon: a lucide icon, or a view's emoji drawn at icon size. */
 export type NavIcon = ComponentType<{

package/dist/nav.js

@@ -6,7 +6,6 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // the name, a click folds it, the fold is remembered in the browser, and `+` never folds.
 import { Link, useRouterState } from '@tanstack/react-router';
 import { ChevronRightIcon, PlusIcon, Trash2Icon } from 'lucide-react';
-import { useState } from 'react';
 import { useAssistantPages } from './assistant-screen.js';
 import { LumenConfirm } from './confirm.js';
 import { useFolded } from './fold.js';
@@ -67,8 +66,7 @@ function SectionRow({ item, activeId, onRemove, removeLabel, }) {
     const isActive = activeId === item.id;
     // The open item shows no trash icon.
     const remove = item.fixed || isActive ? undefined : onRemove;
-    const [open, setOpen] = useState(Boolean(item.defaultOpen || subActive || isActive));
-    const row = (_jsxs(_Fragment, { children: [_jsx(SidebarMenuButton, { asChild: true, tooltip: item.title, isActive: isActive, children: _jsxs(Link, { to: item.to, onClick: subs.length ? () => setOpen((o) => (isActive ? !o : true)) : undefined, children: [_jsx(item.icon, {}), _jsx("span", { children: item.title })] }) }), item.badge !== undefined && item.badge !== null && (_jsx(SidebarMenuBadge, { className: cn(SECTION_BADGE, 
+    const row = (_jsxs(_Fragment, { children: [_jsx(SidebarMenuButton, { asChild: true, tooltip: item.title, isActive: isActive, children: _jsxs(Link, { to: item.to, children: [_jsx(item.icon, {}), _jsx("span", { children: item.title })] }) }), item.badge !== undefined && item.badge !== null && (_jsx(SidebarMenuBadge, { className: cn(SECTION_BADGE, 
                 // The remove icon shows on hover from md up, and always below it: make room there.
                 remove &&
                     'max-md:right-7 md:group-focus-within/menu-item:opacity-0 md:group-hover/menu-item:opacity-0'), children: item.badge })), remove && (_jsx(LumenConfirm, { title: `${removeLabel(item)}?`, action: "Remove", onConfirm: () => remove(item), children: _jsx(SidebarMenuAction, { showOnHover: true, "aria-label": removeLabel(item), title: removeLabel(item), 
@@ -76,7 +74,7 @@ function SectionRow({ item, activeId, onRemove, removeLabel, }) {
                     className: "text-muted-foreground peer-hover/menu-button:text-muted-foreground hover:bg-transparent hover:text-destructive", children: _jsx(Trash2Icon, {}) }) }))] }));
     if (!subs.length)
         return _jsx(SidebarMenuItem, { children: row });
-    return (_jsx(Collapsible, { asChild: true, open: open, onOpenChange: setOpen, className: "group/collapsible", children: _jsxs(SidebarMenuItem, { children: [row, _jsx(CollapsibleTrigger, { asChild: true, children: _jsx(SidebarMenuAction, { "aria-label": `Show or hide ${item.title}`, className: "right-auto left-1.5 bg-sidebar opacity-0 group-hover/menu-item:opacity-100 focus-visible:opacity-100 peer-data-[active=true]/menu-button:bg-sidebar-accent [&>svg]:transition-transform data-[state=open]:[&>svg]:rotate-90", children: _jsx(ChevronRightIcon, {}) }) }), _jsx(CollapsibleContent, { children: _jsx(SidebarMenuSub, { className: "mr-0 pr-0", children: subs.map((sub) => {
+    return (_jsx(Collapsible, { asChild: true, defaultOpen: item.defaultOpen || subActive || isActive, className: "group/collapsible", children: _jsxs(SidebarMenuItem, { children: [row, _jsx(CollapsibleTrigger, { asChild: true, children: _jsx(SidebarMenuAction, { "aria-label": `Show or hide ${item.title}`, className: "right-auto left-1.5 bg-sidebar opacity-0 group-hover/menu-item:opacity-100 focus-visible:opacity-100 peer-data-[active=true]/menu-button:bg-sidebar-accent [&>svg]:transition-transform data-[state=open]:[&>svg]:rotate-90", children: _jsx(ChevronRightIcon, {}) }) }), _jsx(CollapsibleContent, { children: _jsx(SidebarMenuSub, { className: "mr-0 pr-0", children: subs.map((sub) => {
                             const hasBadge = sub.badge !== undefined && sub.badge !== null;
                             return (_jsxs(SidebarMenuSubItem, { children: [_jsx(SidebarMenuSubButton, { asChild: true, isActive: activeId === `${item.id}/${sub.id}`, className: cn(hasBadge && 'pr-8'), children: _jsxs(Link, { to: sub.to, title: sub.title, children: [sub.icon ? (_jsx("span", { "aria-hidden": true, className: "flex shrink-0 [&>svg]:size-4", style: { color: sub.color }, children: _jsx(sub.icon, {}) })) : (sub.color && (_jsx("span", { "aria-hidden": true, className: "mx-1 size-2 shrink-0 rounded-full", style: { background: sub.color } }))), _jsx("span", { children: sub.title })] }) }), hasBadge && (_jsx("span", { className: cn('pointer-events-none absolute top-1 right-1 flex h-5 min-w-5 items-center justify-center px-1 text-xs text-muted-foreground', typeof sub.badge === 'number' && 'num'), children: sub.badge }))] }, sub.id));
                         }) }) })] }) }));

package/dist/share-meter.d.ts

@@ -1,11 +1,14 @@
+import type { MeterLevels } from '@columenlabs/lumen-ui-types/views';
 import type { ReactNode } from 'react';
-export declare function ShareMeter({ value, label, color, wide, className, }: {
+export declare function ShareMeter({ value, label, color, levels, wide, className, }: {
     /** 0 to 1 fills the bar; past 1 it stays full. */
     value: number;
     /** The number beside the bar, e.g. `113%`; left out, the rounded percent. */
     label?: ReactNode;
-    /** The bar's colour, a theme token (`var(--loss)` when over). */
+    /** The bar's colour, a theme token; left out, the share's level (grey, amber, red). */
     color?: string;
+    /** This meter's own levels (e.g. `{ watch: 0.5 }`); left out, the app's `meterLevels`. */
+    levels?: Partial<MeterLevels>;
     /** Fills its cell (a list row) instead of the fixed table width. */
     wide?: boolean;
     className?: string;

package/dist/share-meter.js

@@ -1,6 +1,9 @@
 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 = 'var(--primary)', wide, className, }) {
-    return (_jsxs("span", { className: cn('inline-flex items-center gap-2', wide && 'w-full', className), children: [_jsx(Progress, { value: Math.max(0, Math.min(value, 1)) * 100, className: cn('h-1.5 shrink-0 [&>[data-slot=progress-indicator]]:bg-(--meter-color)', wide ? 'w-full shrink' : 'w-14'), style: { '--meter-color': color } }), _jsx("span", { className: "num w-11 shrink-0 text-right text-xs", children: label ?? `${Math.round(value * 100)}%` })] }));
+export function ShareMeter({ value, label, color, levels, wide, className, }) {
+    return (_jsxs("span", { className: cn('inline-flex items-center gap-2', wide && 'w-full', className), children: [_jsx(Progress, { value: Math.max(0, Math.min(value, 1)) * 100, className: cn('h-1.5 shrink-0 [&>[data-slot=progress-indicator]]:bg-(--meter-color)', wide ? 'w-full shrink' : 'w-14'), style: {
+                    '--meter-color': color ?? METER_LEVEL_COLOR[meterLevel(value, levels)],
+                } }), _jsx("span", { className: "num w-11 shrink-0 text-right text-xs", children: label ?? `${Math.round(value * 100)}%` })] }));
 }

package/dist/summary-cards.js

@@ -15,6 +15,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { PolarAngleAxis, RadialBar, RadialBarChart } from 'recharts';
 import { LumenConfirm } from './confirm.js';
 import { IconButton } from './icon-button.js';
+import { KIT } from './kit-config.js';
 import { cn } from './lib/utils.js';
 import { LumenTokenizedFilter, filterByTokens, useLumenFilter, } from './lumen-filter.js';
 import { LumenSelector } from './lumen-selector.js';
@@ -103,12 +104,17 @@ 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);
+    const tone = meterTone(meter, share, bands ?? (meter === 'usage' ? usageBands() : 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 tone on a bar's fill (theme tokens, no glow). */
 const TONE_BAR = {
     success: '[&>[data-slot=progress-indicator]]:bg-success',

package/dist/unit-value.d.ts

@@ -1,11 +1,16 @@
+import type { MeterLevels } from '@columenlabs/lumen-ui-types/views';
 import type { ReactNode } from 'react';
-export declare function UnitValue({ value, unit, tone, title, className, }: {
+export declare function UnitValue({ value, unit, tone: toneProp, share, levels, title, className, }: {
     /** The number, already formatted (`231.4`). */
     value: ReactNode;
     /** Its unit (`GB`, `M`, `/day`); left out, the slot stays empty so the column still lines up. */
     unit?: ReactNode;
     /** Near (`warning`) or past (`loss`) a limit: tints the number and shows a dot. */
     tone?: 'warning' | 'loss';
+    /** Its share of a cap (0 to 1): sets `tone` by `meterLevel` (amber from 75%, red from 90%). */
+    share?: number;
+    /** This value's own levels; left out, the app's `meterLevels`. */
+    levels?: Partial<MeterLevels>;
     title?: string;
     className?: string;
 }): import("react").JSX.Element;

package/dist/unit-value.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from './lib/utils.js';
-export function UnitValue({ value, unit, tone, title, className, }) {
+import { meterValueTone } from './meter-level.js';
+export function UnitValue({ value, unit, tone: toneProp, share, levels, title, className, }) {
+    const tone = toneProp ?? (share === undefined ? undefined : meterValueTone(share, levels));
     return (_jsxs("span", { title: title, className: cn('inline-flex w-full items-center justify-end gap-1 whitespace-nowrap', className), children: [_jsx("span", { className: cn('num text-right', tone === 'warning' && 'text-warning', tone === 'loss' && 'text-loss'), children: value }), _jsx("span", { className: "w-10 shrink-0 text-left text-muted-foreground text-xs", children: unit }), _jsx("span", { "aria-hidden": "true", className: cn('size-1.5 shrink-0 rounded-full', tone === 'warning' ? 'bg-warning' : tone === 'loss' ? 'bg-loss' : 'bg-transparent') })] }));
 }

package/package.json

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