@atmos.build/ui 0.1.4 → 0.1.6

package/dist/components/charts/bar-chart.js

@@ -11,7 +11,7 @@ export function BarChart(props) {
     const barW = stacked
         ? Math.max(7, Math.min(36, groupW * 0.54))
         : Math.max(5, Math.min(28, groupW / Math.max(1, yKeys.length) - 5));
-    const cornerRadius = Math.min(8, barW / 2);
+    const cornerRadius = Math.min(4, barW / 2);
     const { state: hoverState, move, clear } = useCartesianHover(metrics, data.length, true);
     const hoveredRow = hoverState ? data[hoverState.index] : undefined;
     return (_jsxs("div", { className: "relative h-full w-full", children: [_jsxs("svg", { viewBox: `0 0 ${metrics.w} ${metrics.h}`, className: cn('h-full w-full overflow-visible', className), role: "img", "aria-label": props.ariaLabel, onPointerMove: move, onPointerLeave: clear, children: [_jsx(CartesianGrid, { ...metrics, data: data, xKey: xKey, banded: true }), hoverState ? (_jsx("rect", { x: metrics.pad.l + hoverState.index * groupW, y: metrics.pad.t, width: groupW, height: metrics.innerH, fill: "currentColor", opacity: 0.05, "aria-hidden": true })) : null, data.map((row, rowIndex) => {
@@ -33,7 +33,9 @@ export function BarChart(props) {
                             if (stacked && keyIndex === topStackIndex && height > 0) {
                                 return (_jsx("path", { d: topRoundedRectPath(barX, barY, barW, height, cornerRadius), fill: color, opacity: opacity, className: "animate-in fade-in slide-in-from-bottom-1 duration-300 hover:opacity-90" }, `${rowIndex}:${key}`));
                             }
-                            return (_jsx("rect", { x: barX, y: barY, width: barW, height: height, rx: stacked ? 0 : cornerRadius, fill: color, opacity: opacity, className: "animate-in fade-in slide-in-from-bottom-1 duration-300 hover:opacity-90" }, `${rowIndex}:${key}`));
+                            return (_jsx("path", { d: stacked
+                                    ? `M ${barX} ${barY} h ${barW} v ${height} h ${-barW} Z`
+                                    : topRoundedRectPath(barX, barY, barW, height, cornerRadius), fill: color, opacity: opacity, className: "animate-in fade-in slide-in-from-bottom-1 duration-300 hover:opacity-90" }, `${rowIndex}:${key}`));
                         });
                     })] }), hoverState && hoveredRow ? (_jsx(ChartTooltip, { state: hoverState, row: hoveredRow, xKey: xKey, yKeys: yKeys, colors: colors, format: format })) : null] }));
 }

package/dist/components/charts/colors.js

@@ -18,7 +18,7 @@ export function chartColor(colors, index) {
 const SAFE_CSS_COLOR_FUNCTION = /^(?:rgb|rgba|hsl|hsla|oklab|oklch)\([\d\s.,%/+-]+\)$/i;
 const SAFE_HEX_COLOR = /^#[\da-f]{3,8}$/i;
 const SAFE_COLOR_KEYWORD = /^(?:black|white|transparent|currentColor)$/i;
-const SAFE_INTERNAL_COLOR_TOKEN = /^var\(--(?:primary|foreground|muted-foreground|border|ring|destructive|background|category-[1-6]|(?:success|warning|danger|info)-(?:3|9|11))\)$/i;
+const SAFE_INTERNAL_COLOR_TOKEN = /^var\(--(?:primary|foreground|muted-foreground|border|ring|destructive|background|category-[1-6]|usage|usage-strong|(?:success|warning|danger|info)-(?:3|9|11))\)$/i;
 function safeChartColor(color) {
     const value = color?.trim();
     if (!value || value.length > 96 || hasControlCharacter(value))

package/dist/components/charts/index.d.ts

@@ -2,9 +2,9 @@ export { AreaChart } from './area-chart.js';
 export { BarChart } from './bar-chart.js';
 export { ChartLegend } from './legend.js';
 export { LineChart } from './line-chart.js';
-export { PieChart } from './pie-chart.js';
+export { PieChart, type PieChartProps } from './pie-chart.js';
 export { RadarChart } from './radar-chart.js';
 export { RadialChart } from './radial-chart.js';
 export { ScatterChart } from './scatter-chart.js';
-export { chartColor } from './colors.js';
+export { CHART_COLORS, chartColor } from './colors.js';
 export type { BarChartProps, CartesianChartProps, CategoricalChartProps, ChartAxisOptions, ChartDatum, ChartLegendItem, ScatterChartProps, } from './types.js';

package/dist/components/charts/index.js

@@ -6,4 +6,4 @@ export { PieChart } from './pie-chart.js';
 export { RadarChart } from './radar-chart.js';
 export { RadialChart } from './radial-chart.js';
 export { ScatterChart } from './scatter-chart.js';
-export { chartColor } from './colors.js';
+export { CHART_COLORS, chartColor } from './colors.js';

package/dist/components/charts/layout.d.ts

@@ -24,12 +24,13 @@ export declare function CartesianGrid({ data, xKey, w, h, pad, innerW, innerH, m
     xKey: string;
     banded?: boolean;
 }): import("react").JSX.Element;
-export declare function categoricalMetrics(height: number): {
+export declare function categoricalMetrics(height: number, layout?: 'wide' | 'square'): {
     w: number;
     h: number;
     cx: number;
     cy: number;
     r: number;
 };
+export declare function donutPath(cx: number, cy: number, rOuter: number, rInner: number, start: number, end: number): string;
 export declare function piePath(cx: number, cy: number, r: number, start: number, end: number): string;
 export declare function ringArcPath(cx: number, cy: number, r: number, start: number, end: number): string;

package/dist/components/charts/layout.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export function cartesianMetrics(props, stacked) {
     const w = 720;
-    const h = 220;
+    const h = Math.max(64, Math.min(props.height ?? 220, 720));
     const axis = props.axis;
     const showXAxis = axis?.showXAxis ?? true;
     const showYAxis = axis?.showYAxis ?? true;
+    const bare = !showXAxis && !showYAxis;
     const pad = {
-        l: showYAxis ? (axis?.yLabel ? 62 : 44) : 20,
-        r: 16,
-        t: 14,
-        b: showXAxis ? (axis?.xLabel ? 46 : 32) : 16,
+        l: showYAxis ? (axis?.yLabel ? 62 : 44) : bare ? 2 : 20,
+        r: bare ? 2 : 16,
+        t: bare ? 4 : 14,
+        b: showXAxis ? (axis?.xLabel ? 46 : 32) : bare ? 2 : 16,
     };
     const innerW = w - pad.l - pad.r;
     const innerH = h - pad.t - pad.b;
@@ -72,17 +73,23 @@ export function CartesianGrid({ data, xKey, w, h, pad, innerW, innerH, max, axis
                     return (_jsx("text", { x: xPosition(index), y: h - (axis?.xLabel ? 24 : 10), textAnchor: "middle", fill: "currentColor", opacity: 0.58, fontSize: "9", children: String(row[xKey] ?? index + 1) }, `x-${index}`));
                 }) })) : null, showXAxis && axis?.xLabel ? (_jsx("text", { x: pad.l + innerW / 2, y: h - 6, textAnchor: "middle", fill: "currentColor", opacity: 0.58, fontSize: "10", children: axis.xLabel })) : null, showYAxis && axis?.yLabel ? (_jsx("text", { x: 16, y: pad.t + innerH / 2, textAnchor: "middle", transform: `rotate(-90 16 ${pad.t + innerH / 2})`, fill: "currentColor", opacity: 0.58, fontSize: "10", children: axis.yLabel })) : null] }));
 }
-export function categoricalMetrics(height) {
-    const w = 720;
+export function categoricalMetrics(height, layout = 'wide') {
     const h = Math.max(170, Math.min(height, 420));
+    const w = layout === 'square' ? h : 720;
     return {
         w,
         h,
         cx: w / 2,
         cy: h / 2,
-        r: Math.min(82, h / 2 - 22),
+        r: layout === 'square' ? h / 2 - 4 : Math.min(82, h / 2 - 22),
     };
 }
+export function donutPath(cx, cy, rOuter, rInner, start, end) {
+    const large = end - start > Math.PI ? 1 : 0;
+    const point = (r, angle) => `${(cx + Math.cos(angle) * r).toFixed(2)} ${(cy + Math.sin(angle) * r).toFixed(2)}`;
+    return (`M ${point(rOuter, start)} A ${rOuter} ${rOuter} 0 ${large} 1 ${point(rOuter, end)} ` +
+        `L ${point(rInner, end)} A ${rInner} ${rInner} 0 ${large} 0 ${point(rInner, start)} Z`);
+}
 export function piePath(cx, cy, r, start, end) {
     const large = end - start > Math.PI ? 1 : 0;
     const x1 = cx + Math.cos(start) * r;

package/dist/components/charts/pie-chart.d.ts

@@ -1,2 +1,11 @@
+import * as React from 'react';
 import type { CategoricalChartProps } from './types.js';
-export declare function PieChart({ data, categoryKey, valueKey, colors, height, ariaLabel, valueFormatter, className, }: CategoricalChartProps): import("react").JSX.Element;
+export interface PieChartProps extends CategoricalChartProps {
+    innerRadius?: number;
+    center?: React.ReactNode;
+    activeKey?: string | null;
+    onActiveChange?: (key: string | null) => void;
+    layout?: 'wide' | 'square';
+    categoryFormatter?: (category: string) => string;
+}
+export declare function PieChart({ data, categoryKey, valueKey, colors, height, ariaLabel, valueFormatter, className, innerRadius, center, activeKey, onActiveChange, layout, categoryFormatter, }: PieChartProps): React.JSX.Element;

package/dist/components/charts/pie-chart.js

@@ -1,9 +1,12 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
 import { cn } from '../../lib/cn.js';
 import { chartColor } from './colors.js';
-import { categoricalMetrics, piePath } from './layout.js';
-export function PieChart({ data, categoryKey = 'label', valueKey = 'value', colors, height = 220, ariaLabel, valueFormatter, className, }) {
-    const { w, h, cx, cy, r } = categoricalMetrics(height);
+import { categoricalMetrics, donutPath, piePath } from './layout.js';
+export function PieChart({ data, categoryKey = 'label', valueKey = 'value', colors, height = 220, ariaLabel, valueFormatter, className, innerRadius = 0.42, center, activeKey = null, onActiveChange, layout = 'wide', categoryFormatter, }) {
+    const { w, h, cx, cy, r } = categoricalMetrics(height, layout);
+    const hole = Math.max(0, Math.min(0.9, innerRadius)) * r;
     const total = data.reduce((sum, row) => sum + Math.max(0, Number(row[valueKey] ?? 0)), 0) || 1;
     const format = valueFormatter ?? ((value) => String(value));
     const slices = data.reduce((acc, row, index) => {
@@ -13,10 +16,32 @@ export function PieChart({ data, categoryKey = 'label', valueKey = 'value', colo
         acc.push({ row, value, start, end, index });
         return acc;
     }, []);
-    return (_jsxs("svg", { viewBox: `0 0 ${w} ${h}`, className: cn('h-full w-full overflow-visible', className), role: "img", "aria-label": ariaLabel, children: [slices.map(({ row, value, start, end, index }) => {
-                const label = String(row[categoryKey] ?? index + 1);
-                const angle = (value / total) * Math.PI * 2;
-                const d = angle >= Math.PI * 2 - 0.0001 ? undefined : piePath(cx, cy, r, start, end);
-                return d ? (_jsx("path", { d: d, fill: chartColor(colors, index), stroke: "var(--background)", strokeWidth: 1.5, className: "animate-in fade-in zoom-in-95 duration-300 hover:opacity-90", children: _jsx("title", { children: `${label}: ${format(value)}` }) }, label)) : (_jsx("circle", { cx: cx, cy: cy, r: r, fill: chartColor(colors, index), stroke: "var(--background)", strokeWidth: 1.5, transform: `rotate(${start} ${cx} ${cy})`, className: "animate-in fade-in zoom-in-95 duration-300 hover:opacity-90", children: _jsx("title", { children: `${label}: ${format(value)}` }) }, label));
-            }), _jsx("circle", { cx: cx, cy: cy, r: r * 0.42, fill: "var(--background)", opacity: 0.94 })] }));
+    const dimmed = activeKey !== null;
+    const chart = (_jsx("svg", { viewBox: `0 0 ${w} ${h}`, className: cn('h-full w-full overflow-visible', center ? undefined : className), role: "img", "aria-label": ariaLabel, children: slices.map(({ row, value, start, end, index }) => {
+            const category = String(row[categoryKey] ?? index + 1);
+            const label = categoryFormatter ? categoryFormatter(category) : category;
+            const angle = (value / total) * Math.PI * 2;
+            const full = angle >= Math.PI * 2 - 0.0001;
+            const active = activeKey === category;
+            const d = full
+                ? hole > 0
+                    ? `${donutPath(cx, cy, r, hole, -Math.PI / 2, Math.PI / 2)} ${donutPath(cx, cy, r, hole, Math.PI / 2, Math.PI * 1.5)}`
+                    : undefined
+                : hole > 0
+                    ? donutPath(cx, cy, r, hole, start, end)
+                    : piePath(cx, cy, r, start, end);
+            const shared = {
+                fill: chartColor(colors, index),
+                stroke: 'var(--background)',
+                strokeWidth: 1.5,
+                className: cn('animate-in fade-in zoom-in-95 duration-300 transition-opacity', dimmed && !active && 'opacity-30'),
+                onMouseEnter: () => onActiveChange?.(category),
+                onMouseLeave: () => onActiveChange?.(null),
+                children: _jsx("title", { children: `${label}: ${format(value)}` }),
+            };
+            return d ? (_jsx("path", { d: d, ...shared }, category)) : (_jsx("circle", { cx: cx, cy: cy, r: r, ...shared }, category));
+        }) }));
+    if (!center || hole <= 0)
+        return chart;
+    return (_jsxs("div", { className: cn('relative', className), children: [chart, _jsx("div", { className: "pointer-events-none absolute inset-0 grid place-content-center text-center", children: center })] }));
 }

package/dist/components/metric-grid.d.ts

@@ -33,11 +33,15 @@ export interface MetricBreakdownItem {
     tone?: MetricTone;
     title?: string;
     onSelect?: () => void;
+    color?: string;
 }
 export interface MetricBreakdownProps extends Omit<React.ComponentProps<'div'>, 'title'> {
     title?: React.ReactNode;
     items: MetricBreakdownItem[];
     emptyLabel?: React.ReactNode;
     showBars?: boolean;
+    barPlacement?: 'below' | 'inline';
+    activeKey?: string | null;
+    onActiveChange?: (key: string | null) => void;
 }
-export declare function MetricBreakdown({ title, items, emptyLabel, showBars, className, ...props }: MetricBreakdownProps): React.JSX.Element;
+export declare function MetricBreakdown({ title, items, emptyLabel, showBars, barPlacement, activeKey, onActiveChange, className, ...props }: MetricBreakdownProps): React.JSX.Element;

package/dist/components/metric-grid.js

@@ -10,7 +10,7 @@ const TONE_TEXT = {
     danger: 'text-danger-9',
 };
 export function MetricSectionHeading({ title, hint, action, className, ...props }) {
-    return (_jsxs("div", { "data-slot": "metric-section-heading", className: cn('mb-2.5 flex flex-wrap items-start justify-between gap-2', className), ...props, children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h2", { className: "text-[13px] font-medium", children: title }), hint ? (_jsx("p", { className: "text-muted-foreground mt-0.5 text-[11.5px] leading-snug", children: hint })) : null] }), action] }));
+    return (_jsxs("div", { "data-slot": "metric-section-heading", className: cn('mb-2.5 flex flex-wrap items-start justify-between gap-2', className), ...props, children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h2", { className: "text-[13px] font-medium", children: title }), hint ? (_jsx("p", { className: "text-muted-foreground mt-0.5 text-[11.5px] leading-snug", children: hint })) : null] }), action ? _jsx("div", { className: "shrink-0", children: action }) : null] }));
 }
 export function MetricGrid({ className, ...props }) {
     return (_jsx("div", { "data-slot": "metric-grid", className: cn('bg-background grid gap-px overflow-hidden rounded-xl', className), ...props }));
@@ -28,13 +28,24 @@ const TONE_BAR = {
     warning: 'bg-warning-9/60',
     danger: 'bg-danger-9/55',
 };
-export function MetricBreakdown({ title, items, emptyLabel, showBars = false, className, ...props }) {
-    return (_jsxs("div", { "data-slot": "metric-breakdown", className: cn('min-w-0', className), ...props, children: [title ? _jsx("h3", { className: "mb-1 text-xs font-medium", children: title }) : null, items.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-xs", children: emptyLabel })) : (_jsx("ul", { className: cn(showBars && 'grid gap-2'), children: items.map((item) => (_jsx("li", { children: _jsx(MetricBreakdownRow, { item: item, showBar: showBars }) }, item.key))) }))] }));
+export function MetricBreakdown({ title, items, emptyLabel, showBars = false, barPlacement = 'below', activeKey = null, onActiveChange, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "metric-breakdown", className: cn('min-w-0', className), ...props, children: [title ? _jsx("h3", { className: "mb-1 text-xs font-medium", children: title }) : null, items.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-xs", children: emptyLabel })) : (_jsx("ul", { className: cn(showBars && barPlacement === 'below' && 'grid gap-2'), children: items.map((item) => (_jsx("li", { onMouseEnter: onActiveChange ? () => onActiveChange(item.key) : undefined, onMouseLeave: onActiveChange ? () => onActiveChange(null) : undefined, onFocus: onActiveChange ? () => onActiveChange(item.key) : undefined, onBlur: onActiveChange ? () => onActiveChange(null) : undefined, children: _jsx(MetricBreakdownRow, { item: item, showBar: showBars, placement: barPlacement, active: activeKey === item.key, dimmed: activeKey !== null && activeKey !== item.key }) }, item.key))) }))] }));
 }
-function MetricBreakdownRow({ item, showBar }) {
+function MetricBreakdownRow({ item, showBar, placement, active, dimmed, }) {
     const tone = item.tone ?? 'neutral';
-    const row = (_jsxs(_Fragment, { children: [_jsxs("span", { className: "flex items-center justify-between gap-3 text-xs", children: [_jsx("span", { className: cn('min-w-0 truncate', tone === 'neutral' ? 'text-muted-foreground' : TONE_TEXT[tone]), title: item.title, children: item.label }), _jsx("span", { className: "shrink-0 font-mono tabular-nums", children: item.value })] }), showBar ? (_jsx("span", { className: "bg-background mt-1.5 block h-1 overflow-hidden rounded-full", children: _jsx("span", { className: cn('block h-full rounded-full', TONE_BAR[tone]), style: { width: `${Math.round(Math.max(0, Math.min(1, item.fraction ?? 0)) * 100)}%` } }) })) : null] }));
-    if (!item.onSelect)
-        return _jsx("div", { className: "py-0.5", children: row });
-    return (_jsx("button", { type: "button", onClick: item.onSelect, className: "hover:bg-background/60 focus-visible:ring-ring -mx-1.5 block w-[calc(100%+0.75rem)] rounded-sm px-1.5 py-0.5 text-left focus-visible:ring-2 focus-visible:outline-none", children: row }));
+    const inline = showBar && placement === 'inline';
+    const width = `${Math.round(Math.max(0, Math.min(1, item.fraction ?? 0)) * 100)}%`;
+    const fill = (_jsx("span", { className: cn('block h-full rounded-full', !item.color && TONE_BAR[tone]), style: { width, backgroundColor: item.color } }));
+    const row = (_jsxs(_Fragment, { children: [_jsxs("span", { className: cn('text-xs', inline
+                    ? 'grid grid-cols-[auto_7rem_minmax(0,1fr)] items-center gap-2.5 sm:grid-cols-[auto_12rem_minmax(0,1fr)]'
+                    : 'flex items-center gap-2.5'), children: [item.color ? (_jsx("span", { "aria-hidden": true, className: "size-2 shrink-0 rounded-[2px]", style: { backgroundColor: item.color } })) : inline ? (_jsx("span", { "aria-hidden": true, className: "size-2 shrink-0" })) : null, _jsx("span", { className: cn('min-w-0 truncate', !inline && 'flex-1', tone === 'neutral' ? 'text-muted-foreground' : TONE_TEXT[tone]), title: item.title, children: item.label }), inline ? (_jsxs("span", { className: "relative flex h-4 items-center", children: [_jsx("span", { className: "bg-background block h-1 w-full overflow-hidden rounded-full", children: fill }), _jsx("span", { "data-slot": "metric-row-value", className: cn('bg-muted absolute inset-y-0 right-0 flex items-center rounded-sm pl-1.5 font-mono tabular-nums transition-opacity', active ? 'opacity-100' : 'opacity-100 [@media(hover:hover)]:opacity-0'), children: item.value })] })) : (_jsx("span", { className: "shrink-0 font-mono tabular-nums", children: item.value }))] }), showBar && placement === 'below' ? (_jsx("span", { className: cn('bg-background mt-1.5 block h-1 overflow-hidden rounded-full', item.color && 'ml-4'), children: fill })) : null] }));
+    const dim = cn('transition-opacity', dimmed && 'opacity-40');
+    if (!item.onSelect) {
+        return (_jsx("div", { className: cn('py-0.5', showBar &&
+                placement === 'inline' &&
+                'focus-visible:ring-ring -mx-1.5 rounded-sm px-1.5 focus-visible:ring-2 focus-visible:outline-none', showBar &&
+                placement === 'inline' &&
+                '[&:focus-visible_[data-slot=metric-row-value]]:opacity-100', dim), tabIndex: showBar && placement === 'inline' ? 0 : undefined, children: row }));
+    }
+    return (_jsx("button", { type: "button", onClick: item.onSelect, className: cn('hover:bg-background/60 focus-visible:ring-ring -mx-1.5 block w-[calc(100%+0.75rem)] rounded-sm px-1.5 py-0.5 text-left focus-visible:ring-2 focus-visible:outline-none', '[&:focus-visible_[data-slot=metric-row-value]]:opacity-100', dim), children: row }));
 }

package/dist/components/spec-strip.d.ts

@@ -4,10 +4,7 @@ export interface SpecStripItem {
     label: string;
     value: React.ReactNode;
     suffix?: React.ReactNode;
-    /**
-     * What the value is changing from. Present, the item reads "before → after", which is what a
-     * shape being upgraded is: the new number alone says what you get without saying what moved.
-     */
+    /** What the value is changing from. Present, the item reads "before → after". (audited:keep - documents the rendered text contract) */
     from?: React.ReactNode;
 }
 export interface SpecStripProps extends Omit<React.ComponentProps<'div'>, 'children'> {

package/dist/components/usage-bar.d.ts

@@ -9,9 +9,11 @@ export interface UsageBarProps extends Omit<React.ComponentProps<'div'>, 'childr
     label: string;
     /** Consumed share, 0–1. Values outside the range clamp rather than overflow the track. */
     fraction: number;
+    pendingFraction?: number;
     /** Right-aligned readout — a percentage, "12k of 200k", whatever the caller measures in. */
     value?: React.ReactNode;
     caption?: React.ReactNode;
     tone?: UsageBarTone;
+    srOnlyLabel?: boolean;
 }
-export declare function UsageBar({ label, fraction, value, caption, tone, className, ...props }: UsageBarProps): React.JSX.Element;
+export declare function UsageBar({ label, fraction, pendingFraction, value, caption, tone, srOnlyLabel, className, ...props }: UsageBarProps): React.JSX.Element;

package/dist/components/usage-bar.js

@@ -18,9 +18,11 @@ export function usageTone(fraction) {
         return 'warning';
     return 'usage';
 }
-export function UsageBar({ label, fraction, value, caption, tone, className, ...props }) {
+export function UsageBar({ label, fraction, pendingFraction = 0, value, caption, tone, srOnlyLabel = false, className, ...props }) {
     const clamped = Math.max(0, Math.min(1, Number.isFinite(fraction) ? fraction : 0));
     const percent = Math.round(clamped * 100);
-    const resolvedTone = tone ?? usageTone(clamped);
-    return (_jsxs("div", { "data-slot": "usage-bar", "data-tone": resolvedTone, role: "meter", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": percent, "aria-label": label, className: cn('flex flex-col gap-1', className), ...props, children: [_jsxs("div", { className: "flex items-baseline justify-between gap-2 text-[11.5px]", children: [_jsx("span", { className: "text-muted-foreground min-w-0 truncate", children: label }), value ? (_jsx("span", { className: "text-muted-foreground shrink-0 font-mono tabular-nums", children: value })) : null] }), _jsx("div", { className: "bg-muted h-1 overflow-hidden rounded-full", "aria-hidden": true, children: _jsx("span", { className: cn('block h-full rounded-full transition-[width] duration-150 ease-[var(--ease-out-expo)] motion-reduce:transition-none', TONE_FILL[resolvedTone]), style: { width: `${percent}%` } }) }), caption ? (_jsx("p", { className: "text-muted-foreground/75 font-mono text-[10.5px]", children: caption })) : null] }));
+    const pending = Math.max(0, Math.min(1 - clamped, Number.isFinite(pendingFraction) ? pendingFraction : 0));
+    const pendingPercent = Math.round(pending * 100);
+    const resolvedTone = tone ?? usageTone(clamped + pending);
+    return (_jsxs("div", { "data-slot": "usage-bar", "data-tone": resolvedTone, role: "meter", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.min(100, percent + pendingPercent), "aria-label": label, className: cn('flex flex-col gap-1', className), ...props, children: [srOnlyLabel && !value ? null : (_jsxs("div", { className: "flex items-baseline justify-between gap-2 text-[11.5px]", children: [srOnlyLabel ? null : (_jsx("span", { className: "text-muted-foreground min-w-0 truncate", children: label })), value ? (_jsx("span", { className: "text-muted-foreground ml-auto shrink-0 font-mono tabular-nums", children: value })) : null] })), _jsxs("div", { className: "bg-muted flex h-1 overflow-hidden rounded-full", "aria-hidden": true, children: [_jsx("span", { className: cn('block h-full transition-[width] duration-150 ease-[var(--ease-out-expo)] motion-reduce:transition-none', TONE_FILL[resolvedTone]), style: { width: `${percent}%` } }), pendingPercent > 0 ? (_jsx("span", { "data-slot": "usage-bar-pending", className: cn('block h-full opacity-40 transition-[width] duration-150 ease-[var(--ease-out-expo)] motion-reduce:transition-none', TONE_FILL[resolvedTone]), style: { width: `${pendingPercent}%` } })) : null] }), caption ? (_jsx("p", { className: "text-muted-foreground/75 font-mono text-[10.5px]", children: caption })) : null] }));
 }

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export { AudioPreview, type AudioPreviewProps, type AudioPreviewLabels, type Aud
 export { AvatarUploader, type AvatarUploaderLabels, type AvatarUploaderProps, } from './components/avatar-uploader.js';
 export { Avatar, avatarVariants, initialsFromName, type AvatarProps } from './components/avatar.js';
 export { Badge, badgeVariants } from './components/badge.js';
-export { AreaChart, BarChart, ChartLegend, LineChart, PieChart, RadarChart, RadialChart, ScatterChart, chartColor, type BarChartProps, type CartesianChartProps, type CategoricalChartProps, type ChartAxisOptions, type ChartDatum, type ChartLegendItem, type ScatterChartProps, } from './components/charts/index.js';
+export { AreaChart, BarChart, CHART_COLORS, ChartLegend, LineChart, PieChart, RadarChart, RadialChart, ScatterChart, chartColor, type BarChartProps, type CartesianChartProps, type CategoricalChartProps, type ChartAxisOptions, type ChartDatum, type ChartLegendItem, type PieChartProps, type ScatterChartProps, } from './components/charts/index.js';
 export { ChannelBadge, ChannelListRow, channelIcon, channelListRowVariants, type ChannelBadgeProps, type ChannelListRowProps, type ChannelKind, } from './components/channel-list.js';
 export { Button, buttonVariants } from './components/button.js';
 export { Chip, chipVariants, type ChipProps, type ChipLabelProps, type ChipRemoveProps, } from './components/chip.js';

package/dist/index.js

@@ -4,7 +4,7 @@ export { AudioPreview, } from './components/audio-preview.js';
 export { AvatarUploader, } from './components/avatar-uploader.js';
 export { Avatar, avatarVariants, initialsFromName } from './components/avatar.js';
 export { Badge, badgeVariants } from './components/badge.js';
-export { AreaChart, BarChart, ChartLegend, LineChart, PieChart, RadarChart, RadialChart, ScatterChart, chartColor, } from './components/charts/index.js';
+export { AreaChart, BarChart, CHART_COLORS, ChartLegend, LineChart, PieChart, RadarChart, RadialChart, ScatterChart, chartColor, } from './components/charts/index.js';
 export { ChannelBadge, ChannelListRow, channelIcon, channelListRowVariants, } from './components/channel-list.js';
 export { Button, buttonVariants } from './components/button.js';
 export { Chip, chipVariants, } from './components/chip.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atmos.build/ui",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "The complete atmOS React component system and MCP App authoring helpers.",
   "type": "module",
   "license": "UNLICENSED",