@atmos.build/ui 0.1.1 → 0.1.3

package/dist/components/diff-stat-format.d.ts

@@ -0,0 +1,9 @@
+/**
+ * How a diff's line counts are written down.
+ *
+ * Exact below a thousand and abbreviated above it: a reviewer wants to know a hunk touched
+ * seven lines, and only that a rewrite touched roughly sixteen hundred. Abbreviation goes
+ * through `Intl.NumberFormat` rather than a hardcoded `k`, so a five-figure refactor stays the
+ * same width as a one-line fix in every locale.
+ */
+export declare function compactFormatter(locale?: string): (value: number) => string;

package/dist/components/diff-stat-format.js

@@ -0,0 +1,13 @@
+/**
+ * How a diff's line counts are written down.
+ *
+ * Exact below a thousand and abbreviated above it: a reviewer wants to know a hunk touched
+ * seven lines, and only that a rewrite touched roughly sixteen hundred. Abbreviation goes
+ * through `Intl.NumberFormat` rather than a hardcoded `k`, so a five-figure refactor stays the
+ * same width as a one-line fix in every locale.
+ */
+export function compactFormatter(locale) {
+    const exact = new Intl.NumberFormat(locale);
+    const compact = new Intl.NumberFormat(locale, { notation: 'compact', maximumFractionDigits: 1 });
+    return (value) => (value < 1000 ? exact.format(value) : compact.format(value));
+}

package/dist/components/diff-stat-label.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+export interface DiffStatLabelProps extends Omit<React.ComponentProps<'span'>, 'children'> {
+    additions: number;
+    deletions: number;
+    /**
+     * The whole label as one string, for readers who get it announced rather than scanned.
+     * Required because the visible form is punctuation and digits, which is not a sentence in
+     * any language — the caller is the only place that can translate it.
+     */
+    label: string;
+    /** Formatting locale. Left to the runtime's own when the caller has no opinion. */
+    locale?: string;
+    size?: 'sm' | 'md';
+}
+/**
+ * How much a diff changed, in the two numbers a reviewer actually scans for.
+ *
+ * The colours are the diff surface's own `--diff-added` / `--diff-removed` rather than the
+ * status palette's success and danger: this label sits next to the lines it counts, and a
+ * green borrowed from "operation succeeded" reads as a different kind of statement.
+ *
+ * Counts go through `Intl.NumberFormat` rather than a hand-rolled `k`, which means the width
+ * is the locale's decision and not ours — German short notation does not abbreviate thousands
+ * at all, so a German reader sees `24.019` where an English one sees `24K`. Showing them an
+ * English abbreviation instead would be narrower and wrong.
+ */
+export declare function DiffStatLabel({ additions, deletions, label, locale, size, className, ...props }: DiffStatLabelProps): React.JSX.Element;

package/dist/components/diff-stat-label.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../lib/cn.js';
+import { compactFormatter } from './diff-stat-format.js';
+const SIZES = { sm: 'gap-1 text-[11px]', md: 'gap-1.5 text-xs' };
+/**
+ * How much a diff changed, in the two numbers a reviewer actually scans for.
+ *
+ * The colours are the diff surface's own `--diff-added` / `--diff-removed` rather than the
+ * status palette's success and danger: this label sits next to the lines it counts, and a
+ * green borrowed from "operation succeeded" reads as a different kind of statement.
+ *
+ * Counts go through `Intl.NumberFormat` rather than a hand-rolled `k`, which means the width
+ * is the locale's decision and not ours — German short notation does not abbreviate thousands
+ * at all, so a German reader sees `24.019` where an English one sees `24K`. Showing them an
+ * English abbreviation instead would be narrower and wrong.
+ */
+export function DiffStatLabel({ additions, deletions, label, locale, size = 'sm', className, ...props }) {
+    const format = React.useMemo(() => compactFormatter(locale), [locale]);
+    const added = Math.max(0, Math.trunc(additions));
+    const removed = Math.max(0, Math.trunc(deletions));
+    return (_jsx("span", { "data-slot": "diff-stat-label", className: cn('inline-flex shrink-0 items-center font-mono tabular-nums', SIZES[size], className), "aria-label": label, ...props, children: added === 0 && removed === 0 ? (_jsx("span", { className: "text-muted-foreground", "aria-hidden": true, children: "\u2014" })) : (_jsxs(_Fragment, { children: [added > 0 ? (_jsxs("span", { className: "text-diff-added", "aria-hidden": true, children: ["+", format(added)] })) : null, removed > 0 ? (_jsxs("span", { className: "text-diff-removed", "aria-hidden": true, children: ["\u2212", format(removed)] })) : null] })) }));
+}

package/dist/components/inline-alert.d.ts

@@ -1,11 +1,11 @@
+import * as React from 'react';
 import type { ReactNode } from 'react';
 export type InlineAlertTone = 'error' | 'warning' | 'info';
-export interface InlineAlertProps {
+export interface InlineAlertProps extends Omit<React.ComponentProps<'div'>, 'children'> {
     tone?: InlineAlertTone;
     children: ReactNode;
     onDismiss?: () => void;
     dismissLabel?: string;
-    className?: string;
 }
-export declare function InlineAlert({ tone, children, onDismiss, dismissLabel, className, }: InlineAlertProps): import("react").JSX.Element;
-export declare function InlineNotice({ tone, children, className, }: Pick<InlineAlertProps, 'tone' | 'children' | 'className'>): import("react").JSX.Element;
+export declare function InlineAlert({ tone, children, onDismiss, dismissLabel, className, ...props }: InlineAlertProps): React.JSX.Element;
+export declare function InlineNotice({ tone, children, className, }: Pick<InlineAlertProps, 'tone' | 'children' | 'className'>): React.JSX.Element;

package/dist/components/inline-alert.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
 import { AlertTriangle, Info, X } from 'lucide-react';
 import { cn } from '../lib/cn.js';
 import { Button } from './button.js';
@@ -8,9 +9,9 @@ const toneClass = {
     warning: 'border-warning/30 bg-warning/15 text-warning',
     info: 'border-info/30 bg-info/15 text-info',
 };
-export function InlineAlert({ tone = 'error', children, onDismiss, dismissLabel, className, }) {
+export function InlineAlert({ tone = 'error', children, onDismiss, dismissLabel, className, ...props }) {
     const Icon = tone === 'info' ? Info : AlertTriangle;
-    return (_jsxs("div", { role: "alert", "data-slot": "inline-alert", "data-tone": tone, className: cn('flex items-start gap-2 rounded-md border px-3 py-2 text-xs', toneClass[tone], className), children: [_jsx(Icon, { className: "mt-0.5 size-3.5 shrink-0", strokeWidth: 1.5, "aria-hidden": true }), _jsx("span", { className: "flex-1 leading-relaxed", children: children }), onDismiss ? (_jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", onClick: onDismiss, "aria-label": dismissLabel, className: "-mr-1 size-4 rounded text-current opacity-80 hover:bg-transparent hover:opacity-100", children: _jsx(X, { className: "size-3", strokeWidth: 1.5 }) })) : null] }));
+    return (_jsxs("div", { role: "alert", "data-slot": "inline-alert", "data-tone": tone, className: cn('flex items-start gap-2 rounded-md border px-3 py-2 text-xs', toneClass[tone], className), ...props, children: [_jsx(Icon, { className: "mt-0.5 size-3.5 shrink-0", strokeWidth: 1.5, "aria-hidden": true }), _jsx("span", { className: "flex-1 leading-relaxed", children: children }), onDismiss ? (_jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", onClick: onDismiss, "aria-label": dismissLabel, className: "-mr-1 size-4 rounded text-current opacity-80 hover:bg-transparent hover:opacity-100", children: _jsx(X, { className: "size-3", strokeWidth: 1.5 }) })) : null] }));
 }
 export function InlineNotice({ tone = 'info', children, className, }) {
     return (_jsx(InlineAlert, { tone: tone, className: className, children: children }));

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

@@ -21,8 +21,10 @@ export interface MetricTileProps extends Omit<React.ComponentProps<'div'>, 'titl
     suffix?: React.ReactNode;
     hint?: React.ReactNode;
     tone?: MetricTone;
+    /** What the value is changing from, rendered as "before → after". See SpecStripItem.from. */
+    from?: React.ReactNode;
 }
-export declare function MetricTile({ label, value, suffix, hint, tone, className, ...props }: MetricTileProps): React.JSX.Element;
+export declare function MetricTile({ label, value, suffix, hint, from, tone, className, ...props }: MetricTileProps): React.JSX.Element;
 export interface MetricBreakdownItem {
     key: string;
     label: React.ReactNode;

package/dist/components/metric-grid.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
+import { ArrowRight } from 'lucide-react';
 import { cn } from '../lib/cn.js';
 const TONE_TEXT = {
     neutral: 'text-foreground',
@@ -18,8 +19,8 @@ const PANEL_PADDING = { none: '', sm: 'p-3', md: 'p-4' };
 export function MetricPanel({ title, action, padding = 'md', className, children, ...props }) {
     return (_jsxs("div", { "data-slot": "metric-panel", className: cn('bg-muted min-w-0', PANEL_PADDING[padding], className), ...props, children: [title || action ? (_jsxs("div", { className: cn('mb-3 flex items-center justify-between gap-2', padding === 'none' && 'px-3 pt-3'), children: [title ? _jsx("p", { className: "text-xs font-medium", children: title }) : _jsx("span", {}), action] })) : null, children] }));
 }
-export function MetricTile({ label, value, suffix, hint, tone = 'neutral', className, ...props }) {
-    return (_jsxs("div", { "data-slot": "metric-tile", "data-tone": tone, className: cn('bg-muted min-w-0 p-3', className), ...props, children: [label ? _jsx("p", { className: "text-muted-foreground truncate text-xs", children: label }) : null, _jsxs("p", { className: cn('text-2xl font-semibold tracking-tight tabular-nums', label ? 'mt-2' : '', TONE_TEXT[tone]), children: [value, suffix ? (_jsx("span", { className: "text-muted-foreground ml-1 text-xs font-normal", children: suffix })) : null] }), hint ? _jsx("p", { className: "text-muted-foreground mt-1 text-[11px] leading-snug", children: hint }) : null] }));
+export function MetricTile({ label, value, suffix, hint, from, tone = 'neutral', className, ...props }) {
+    return (_jsxs("div", { "data-slot": "metric-tile", "data-tone": tone, className: cn('bg-muted min-w-0 p-3', className), ...props, children: [label ? _jsx("p", { className: "text-muted-foreground truncate text-xs", children: label }) : null, _jsxs("p", { className: cn('text-2xl font-semibold tracking-tight tabular-nums', label ? 'mt-2' : '', TONE_TEXT[tone]), children: [from !== undefined ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground font-normal", children: from }), _jsx(ArrowRight, { className: "text-muted-foreground mx-1.5 inline size-4 align-[-0.05em]", strokeWidth: 1.5, "aria-hidden": true })] })) : null, value, suffix ? (_jsx("span", { className: "text-muted-foreground ml-1 text-xs font-normal", children: suffix })) : null] }), hint ? _jsx("p", { className: "text-muted-foreground mt-1 text-[11px] leading-snug", children: hint }) : null] }));
 }
 const TONE_BAR = {
     neutral: 'bg-foreground/35',

package/dist/components/naut-avatar-engine.d.ts

@@ -31,12 +31,20 @@ export interface NautAvatarOptions {
     seed?: number;
     idle?: boolean;
 }
+export interface NautAvatarAttributeElement {
+    setAttribute(name: string, value: string): void;
+}
+export interface NautAvatarEyeElement extends NautAvatarAttributeElement {
+    style: {
+        opacity: string;
+    };
+}
 export interface NautAvatarElements {
-    root: SVGGElement;
-    body: SVGPathElement;
-    eyes: SVGGElement;
-    eyeL: SVGPathElement;
-    eyeR: SVGPathElement;
+    root: NautAvatarAttributeElement;
+    body: NautAvatarAttributeElement;
+    eyes: NautAvatarAttributeElement;
+    eyeL: NautAvatarEyeElement;
+    eyeR: NautAvatarEyeElement;
 }
 /**
  * Framework-agnostic renderer: owns the animation state and writes attributes onto the
@@ -65,8 +73,10 @@ export declare class NautAvatarEngine {
     /** An expression holds one eye shape forever; idle opens the eyes between beats. */
     private readonly eyeRest;
     private el;
+    private readonly rendered;
     constructor(opts?: NautAvatarOptions);
     attach(el: NautAvatarElements): void;
+    get needsResponsiveFrameRate(): boolean;
     setShape(shape: NautShape): void;
     setColor(color: NautColor): void;
     setExpression(key: NautExpression, instant?: boolean): void;
@@ -78,6 +88,8 @@ export declare class NautAvatarEngine {
     /** Eases the eyes back to their neutral open shape and back into the expression. */
     private restEyes;
     private render;
+    private writeAttribute;
+    private writeStyle;
 }
 /** Stable pseudo-random pick so the same id always gets the same appearance. */
 export declare function hashSeed(input: string): number;

package/dist/components/naut-avatar-engine.js

@@ -646,6 +646,7 @@ export class NautAvatarEngine {
     /** An expression holds one eye shape forever; idle opens the eyes between beats. */
     eyeRest = { open: 0, cur: 0, next: HOLD_EXPRESSION_S };
     el = null;
+    rendered = new Map();
     constructor(opts = {}) {
         this.rand = rng(opts.seed ?? 1);
         this.shape = opts.shape ?? 'circle';
@@ -664,6 +665,17 @@ export class NautAvatarEngine {
     }
     attach(el) {
         this.el = el;
+        this.rendered.clear();
+    }
+    get needsResponsiveFrameRate() {
+        const targetGazeX = this.gazeTarget?.x ?? this.idleState.gazeX;
+        const targetGazeY = this.gazeTarget?.y ?? this.idleState.gazeY;
+        return (this.gestures.length > 0 ||
+            Math.abs(this.idleState.curGazeX - targetGazeX) > 0.01 ||
+            Math.abs(this.idleState.curGazeY - targetGazeY) > 0.01 ||
+            Math.abs(this.idleState.curRoll - this.idleState.roll) > 0.02 ||
+            Math.abs(this.eyeRest.cur - this.eyeRest.open) > 0.01 ||
+            FACE_KEYS.some((key) => Math.abs(this.face[key] - this.targetFace[key]) > 0.002));
     }
     setShape(shape) {
         this.shape = shape;
@@ -796,10 +808,10 @@ export class NautAvatarEngine {
         const el = this.el;
         if (!el)
             return;
-        el.root.setAttribute('transform', `translate(${o.headX.toFixed(2)} ${o.headY.toFixed(2)}) scale(${o.sx.toFixed(3)} ${o.sy.toFixed(3)})`);
-        el.body.setAttribute('d', nodePath(this.nodes));
-        el.body.setAttribute('fill', NAUT_COLORS[this.color]);
-        el.eyes.setAttribute('transform', `rotate(${o.roll.toFixed(2)})`);
+        this.writeAttribute('root.transform', el.root, 'transform', `translate(${o.headX.toFixed(1)} ${o.headY.toFixed(1)}) scale(${o.sx.toFixed(3)} ${o.sy.toFixed(3)})`);
+        this.writeAttribute('body.d', el.body, 'd', nodePath(this.nodes));
+        this.writeAttribute('body.fill', el.body, 'fill', NAUT_COLORS[this.color]);
+        this.writeAttribute('eyes.transform', el.eyes, 'transform', `rotate(${o.roll.toFixed(1)})`);
         const yaw = clamp(o.gazeX, -1.3, 1.3) * 0.85 + o.spin;
         const pitch = -clamp(o.gazeY, -1.3, 1.3) * 0.7;
         const R = this.sphere;
@@ -811,7 +823,7 @@ export class NautAvatarEngine {
             const poly = eyePolygon(p, sgn);
             const eye = side === 'L' ? el.eyeL : el.eyeR;
             if (!poly.length) {
-                eye.setAttribute('d', '');
+                this.writeAttribute(`eye${side}.d`, eye, 'd', '');
                 continue;
             }
             const fr = eyeFrame(sgn * o.eyeSep, o.eyeLat, yaw, pitch);
@@ -823,12 +835,24 @@ export class NautAvatarEngine {
             const vx = lerp(0, fr.V[0], curve);
             const vy = lerp(1, fr.V[1], curve);
             const d = poly
-                .map(([lx, ly], i) => `${i ? 'L' : 'M'} ${(cx + ux * lx + vx * ly).toFixed(2)} ${(cy + uy * lx + vy * ly).toFixed(2)}`)
+                .map(([lx, ly], i) => `${i ? 'L' : 'M'} ${(cx + ux * lx + vx * ly).toFixed(1)} ${(cy + uy * lx + vy * ly).toFixed(1)}`)
                 .join(' ');
-            eye.setAttribute('d', d + ' Z');
-            eye.style.opacity = fr.P[2] > 0 ? '1' : '0';
+            this.writeAttribute(`eye${side}.d`, eye, 'd', d + ' Z');
+            this.writeStyle(`eye${side}.opacity`, eye.style, 'opacity', fr.P[2] > 0 ? '1' : '0');
         }
     }
+    writeAttribute(key, element, name, value) {
+        if (this.rendered.get(key) === value)
+            return;
+        this.rendered.set(key, value);
+        element.setAttribute(name, value);
+    }
+    writeStyle(key, style, name, value) {
+        if (this.rendered.get(key) === value)
+            return;
+        this.rendered.set(key, value);
+        style[name] = value;
+    }
 }
 /** Stable pseudo-random pick so the same id always gets the same appearance. */
 export function hashSeed(input) {

package/dist/components/naut-avatar.js

@@ -8,11 +8,15 @@ import { pointerGaze } from './naut-pointer-gaze.js';
 export { NAUT_COLORS, NAUT_COLOR_KEYS, NAUT_EXPRESSIONS, NAUT_GESTURES, NAUT_SHAPES, isNautColor, isNautShape, nautAppearanceForSeed, } from './naut-avatar-engine.js';
 /** A face can be carried across the page by something other than a mouse or a scroll. */
 const RECT_MAX_AGE_MS = 500;
+const IDLE_FRAME_MS = 1000 / 3;
+const RESPONSIVE_FRAME_MS = 1000 / 20;
+const POINTER_SETTLE_MS = 350;
 /** Where the mouse is, shared by every face so one listener serves the page. */
 const pointer = {
     x: 0,
     y: 0,
     active: false,
+    lastMovedAt: 0,
     /** Bumps whenever cached face rects could have gone stale. */
     moved: 0,
     onPointer(event) {
@@ -23,6 +27,7 @@ const pointer = {
         pointer.x = event.clientX;
         pointer.y = event.clientY;
         pointer.active = true;
+        pointer.lastMovedAt = performance.now();
         pointer.moved++;
     },
     onLeave() {
@@ -64,16 +69,21 @@ function aimAtPointer(entry, now) {
 const ticker = {
     entries: new Set(),
     frame: 0,
-    last: 0,
     tick(now) {
-        const dt = Math.min((now - ticker.last) / 1000, 0.05);
-        ticker.last = now;
-        for (const entry of ticker.entries)
-            if (entry.visible && entry.follow)
+        const pointerResponsive = pointer.active && now - pointer.lastMovedAt < POINTER_SETTLE_MS;
+        for (const entry of ticker.entries) {
+            if (!entry.visible)
+                continue;
+            const responsive = (entry.follow && pointerResponsive) || entry.engine.needsResponsiveFrameRate;
+            const frameMs = responsive ? RESPONSIVE_FRAME_MS : IDLE_FRAME_MS;
+            if (now - entry.lastUpdate < frameMs)
+                continue;
+            const dt = Math.min((now - entry.lastUpdate) / 1000, 0.1);
+            entry.lastUpdate = now;
+            if (entry.follow)
                 aimAtPointer(entry, now);
-        for (const entry of ticker.entries)
-            if (entry.visible)
-                entry.engine.update(dt);
+            entry.engine.update(dt);
+        }
         ticker.frame = ticker.entries.size ? requestAnimationFrame(ticker.tick) : 0;
     },
     add(entry) {
@@ -81,7 +91,6 @@ const ticker = {
             pointer.listen();
         ticker.entries.add(entry);
         if (!ticker.frame) {
-            ticker.last = performance.now();
             ticker.frame = requestAnimationFrame(ticker.tick);
         }
     },
@@ -120,6 +129,7 @@ export const NautAvatar = React.forwardRef(function NautAvatar({ shape = 'circle
         rect: null,
         rectAt: -1,
         rectTime: 0,
+        lastUpdate: performance.now(),
     }));
     React.useImperativeHandle(forwardedRef, () => ({ play: (gesture) => engine.play(gesture) }), [
         engine,
@@ -150,7 +160,7 @@ export const NautAvatar = React.forwardRef(function NautAvatar({ shape = 'circle
         engine.update(0);
     }, [engine]);
     React.useEffect(() => {
-        if (reducedMotion) {
+        if (!animated) {
             engine.settle();
             engine.update(0);
             return;
@@ -159,6 +169,7 @@ export const NautAvatar = React.forwardRef(function NautAvatar({ shape = 'circle
         entry.svg = svg;
         entry.rect = null;
         entry.rectAt = -1;
+        entry.lastUpdate = performance.now();
         ticker.add(entry);
         const observer = svg && typeof IntersectionObserver !== 'undefined'
             ? new IntersectionObserver((records) => {
@@ -173,12 +184,12 @@ export const NautAvatar = React.forwardRef(function NautAvatar({ shape = 'circle
             ticker.remove(entry);
             entry.svg = null;
         };
-    }, [engine, entry, reducedMotion]);
+    }, [animated, engine, entry]);
     React.useEffect(() => {
-        if (!reducedMotion)
+        if (animated)
             return;
         engine.settle();
         engine.update(0);
-    }, [engine, reducedMotion, shape, color, expression]);
-    return (_jsx("svg", { ref: svgRef, viewBox: NAUT_VIEWBOX, "data-slot": "naut-avatar", "data-shape": shape, "data-color": color, "data-expression": expression, className: cn('block size-full overflow-visible select-none', className), style: style, "aria-hidden": props['aria-label'] ? undefined : true, ...props, children: _jsxs("g", { ref: rootRef, children: [_jsx("path", { ref: bodyRef }), _jsxs("g", { ref: eyesRef, children: [_jsx("path", { ref: eyeLRef, fill: "var(--naut-avatar-eye, var(--background))" }), _jsx("path", { ref: eyeRRef, fill: "var(--naut-avatar-eye, var(--background))" })] })] }) }));
+    }, [animated, engine, shape, color, expression]);
+    return (_jsx("svg", { ref: svgRef, viewBox: NAUT_VIEWBOX, "data-slot": "naut-avatar", "data-shape": shape, "data-color": color, "data-expression": expression, "data-atmos-motion": animated ? 'running' : undefined, "data-atmos-motion-property": animated ? 'svg-attributes' : undefined, className: cn('block size-full overflow-visible select-none', className), style: style, "aria-hidden": props['aria-label'] ? undefined : true, ...props, children: _jsxs("g", { ref: rootRef, children: [_jsx("path", { ref: bodyRef }), _jsxs("g", { ref: eyesRef, children: [_jsx("path", { ref: eyeLRef, fill: "var(--naut-avatar-eye, var(--background))" }), _jsx("path", { ref: eyeRRef, fill: "var(--naut-avatar-eye, var(--background))" })] })] }) }));
 });

package/dist/components/naut-scene.d.ts

@@ -129,8 +129,10 @@ export declare const NAUT_SCENES: {
 export type NautSceneName = keyof typeof NAUT_SCENES;
 export interface NautSceneProps {
     scene: NautSceneName;
+    /** Enables ambient drift and gestures. */
+    animated?: boolean;
     /** Sizes the scene; the faces lay themselves out inside whatever box this gives. */
     className?: string;
 }
 /** A small animated illustration built from Naut faces. Decorative — it carries no label. */
-export declare function NautScene({ scene, className }: NautSceneProps): React.ReactElement;
+export declare function NautScene({ scene, animated, className, }: NautSceneProps): React.ReactElement;

package/dist/components/naut-scene.js

@@ -126,12 +126,13 @@ const DRIFT_TILT = 4;
 /** Seconds between the starts of neighbouring drifts, so nothing moves in unison. */
 const DRIFT_OFFSET = 0.7;
 /** A small animated illustration built from Naut faces. Decorative — it carries no label. */
-export function NautScene({ scene, className }) {
+export function NautScene({ scene, animated = true, className, }) {
     const reducedMotion = useReducedMotion();
+    const active = animated && !reducedMotion;
     const { faces, gesture, interval } = NAUT_SCENES[scene];
     const handles = React.useRef([]);
     React.useEffect(() => {
-        if (reducedMotion)
+        if (!active)
             return;
         const pending = [];
         const run = () => {
@@ -145,13 +146,13 @@ export function NautScene({ scene, className }) {
             for (const timeout of pending)
                 window.clearTimeout(timeout);
         };
-    }, [gesture, interval, reducedMotion]);
+    }, [active, gesture, interval]);
     return (_jsx("div", { "aria-hidden": true, className: cn('flex items-center justify-center', className), children: _jsx("div", { className: "relative aspect-3/2 h-full", children: faces.map((face, index) => (_jsx("span", { className: "absolute block aspect-square", style: {
                     left: `${face.x * 100}%`,
                     top: `${face.y * 100}%`,
                     height: `${face.size * 100}%`,
                     transform: 'translate(-50%, -50%)',
-                }, children: _jsx(motion.span, { className: "block size-full", animate: reducedMotion
+                }, children: _jsx(motion.span, { className: "block size-full", animate: !active
                         ? undefined
                         : {
                             y: [`-${DRIFT_TRAVEL}%`, `${DRIFT_TRAVEL}%`],
@@ -164,5 +165,5 @@ export function NautScene({ scene, className }) {
                         ease: 'easeInOut',
                     }, children: _jsx(NautAvatar, { ref: (handle) => {
                             handles.current[index] = handle;
-                        }, shape: face.shape, color: face.color, expression: face.expression, seed: `${scene}-${index}` }) }) }, `${face.shape}-${face.color}-${index}`))) }) }));
+                        }, shape: face.shape, color: face.color, expression: face.expression, idle: active, seed: `${scene}-${index}` }) }) }, `${face.shape}-${face.color}-${index}`))) }) }));
 }

package/dist/components/shimmer-text.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { type HTMLMotionProps } from 'motion/react';
-export interface ShimmerTextProps extends Omit<HTMLMotionProps<'span'>, 'children'> {
+export interface ShimmerTextProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> {
     children: string | number;
+    animate?: boolean;
     duration?: number;
     spread?: number;
 }
-export declare const ShimmerText: React.NamedExoticComponent<Omit<ShimmerTextProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const ShimmerText: React.NamedExoticComponent<ShimmerTextProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/shimmer-text.js

@@ -1,23 +1,59 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { motion, useReducedMotion } from 'motion/react';
+import { useMediaQuery } from '../hooks/use-media-query.js';
 import { cn } from '../lib/cn.js';
-const ShimmerTextComponent = React.forwardRef(function ShimmerText({ children, className, duration = 2, spread = 2, style, ...props }, forwardedRef) {
-    const reducedMotion = useReducedMotion();
+const SHIMMER_FRAME_MS = 1000 / 8;
+const shimmerEntries = new Set();
+let shimmerTimer = 0;
+function paintShimmers() {
+    const now = performance.now();
+    for (const entry of shimmerEntries) {
+        const progress = ((now - entry.startedAt) % entry.durationMs) / entry.durationMs;
+        entry.element.style.backgroundPosition = `${100 - progress * 100}% center, 0 center`;
+    }
+}
+function startShimmer(entry) {
+    shimmerEntries.add(entry);
+    paintShimmers();
+    if (!shimmerTimer)
+        shimmerTimer = window.setInterval(paintShimmers, SHIMMER_FRAME_MS);
+}
+function stopShimmer(entry) {
+    shimmerEntries.delete(entry);
+    if (shimmerEntries.size || !shimmerTimer)
+        return;
+    window.clearInterval(shimmerTimer);
+    shimmerTimer = 0;
+}
+const ShimmerTextComponent = React.forwardRef(function ShimmerText({ children, className, duration = 2, spread = 2, style, animate = true, ...props }, forwardedRef) {
+    const reducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
+    const active = animate !== false && !reducedMotion;
+    const localRef = React.useRef(null);
+    const setRef = React.useCallback((node) => {
+        localRef.current = node;
+        if (typeof forwardedRef === 'function')
+            forwardedRef(node);
+        else if (forwardedRef)
+            forwardedRef.current = node;
+    }, [forwardedRef]);
     const dynamicSpread = React.useMemo(() => `${String(children).length * spread}px`, [children, spread]);
-    const backgroundImage = reducedMotion
-        ? 'linear-gradient(var(--base-color), var(--base-color))'
-        : 'var(--bg), linear-gradient(var(--base-color), var(--base-color))';
-    return (_jsx(motion.span, { ref: forwardedRef, "data-slot": "shimmer-text", className: cn('relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent', '[--base-color:color-mix(in_oklch,var(--foreground)_30%,transparent)] [--base-gradient-color:var(--foreground)]', '[background-repeat:no-repeat,padding-box]', '[--bg:linear-gradient(90deg,transparent_calc(50%-var(--spread)),var(--base-gradient-color),transparent_calc(50%+var(--spread)))]', className), 
-        // Keyframes, not an initial→animate delta: nested under an AnimatePresence
-        // the presence context suppresses `initial`, which would freeze the sweep
-        // at its end position and leave the text flat.
-        animate: reducedMotion ? undefined : { backgroundPosition: ['100% center', '0% center'] }, transition: {
-            repeat: Number.POSITIVE_INFINITY,
-            duration,
-            ease: 'linear',
-        }, style: {
+    const backgroundImage = active
+        ? 'var(--bg), linear-gradient(var(--base-color), var(--base-color))'
+        : 'linear-gradient(var(--base-color), var(--base-color))';
+    React.useEffect(() => {
+        const element = localRef.current;
+        if (!active || !element)
+            return;
+        const entry = {
+            element,
+            durationMs: Math.max(duration * 1000, SHIMMER_FRAME_MS),
+            startedAt: performance.now(),
+        };
+        startShimmer(entry);
+        return () => stopShimmer(entry);
+    }, [active, duration, children]);
+    return (_jsx("span", { ref: setRef, "data-slot": "shimmer-text", "data-atmos-motion": active ? 'running' : undefined, "data-atmos-motion-property": active ? 'background-position' : undefined, className: cn('relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent contain-paint', '[--base-color:color-mix(in_oklch,var(--foreground)_30%,transparent)] [--base-gradient-color:var(--foreground)]', '[background-repeat:no-repeat,padding-box]', '[--bg:linear-gradient(90deg,transparent_calc(50%-var(--spread)),var(--base-gradient-color),transparent_calc(50%+var(--spread)))]', className), style: {
             '--spread': dynamicSpread,
             backgroundImage,
             ...style,

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

@@ -4,6 +4,11 @@ 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.
+     */
+    from?: React.ReactNode;
 }
 export interface SpecStripProps extends Omit<React.ComponentProps<'div'>, 'children'> {
     items: SpecStripItem[];

package/dist/components/spec-strip.js

@@ -1,6 +1,7 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
+import { ArrowRight } from 'lucide-react';
 import { cn } from '../lib/cn.js';
 import { Separator } from './separator.js';
 /**
@@ -11,5 +12,5 @@ import { Separator } from './separator.js';
  * stops meaning anything.
  */
 export function SpecStrip({ items, className, ...props }) {
-    return (_jsx("div", { "data-slot": "spec-strip", className: cn('flex items-stretch gap-3', className), ...props, children: items.map((item, index) => (_jsxs(React.Fragment, { children: [index > 0 ? _jsx(Separator, { orientation: "vertical", className: "bg-border/60" }) : null, _jsxs("div", { className: "flex min-w-0 flex-1 flex-col items-center gap-1.5 py-1", children: [_jsx("span", { className: "text-muted-foreground [&_svg]:size-5", "aria-hidden": true, children: item.icon }), _jsxs("span", { className: "truncate text-[17px] font-medium tabular-nums", children: [item.value, item.suffix ? (_jsx("span", { className: "text-muted-foreground ml-1 text-[12px] font-normal", children: item.suffix })) : null] }), _jsx("span", { className: "text-muted-foreground truncate text-[11.5px]", children: item.label })] })] }, item.label))) }));
+    return (_jsx("div", { "data-slot": "spec-strip", className: cn('flex items-stretch gap-3', className), ...props, children: items.map((item, index) => (_jsxs(React.Fragment, { children: [index > 0 ? _jsx(Separator, { orientation: "vertical", className: "bg-border/60" }) : null, _jsxs("div", { className: "flex min-w-0 flex-1 flex-col items-center gap-1.5 py-1", children: [_jsx("span", { className: "text-muted-foreground [&_svg]:size-5", "aria-hidden": true, children: item.icon }), _jsxs("span", { className: "truncate text-[17px] font-medium tabular-nums", children: [item.from !== undefined ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground font-normal", children: item.from }), _jsx(ArrowRight, { className: "text-muted-foreground mx-1 inline size-3.5 align-[-0.1em]", strokeWidth: 1.5, "aria-hidden": true })] })) : null, item.value, item.suffix ? (_jsx("span", { className: "text-muted-foreground ml-1 text-[12px] font-normal", children: item.suffix })) : null] }), _jsx("span", { className: "text-muted-foreground truncate text-[11.5px]", children: item.label })] })] }, item.label))) }));
 }

package/dist/index.d.ts

@@ -24,6 +24,8 @@ export { TemplateChipInput, type TemplateChipInputProps, type TemplateChipInputH
 export { RunStatusBadge, type RunStatus, type RunStatusBadgeProps, } from './components/run-status-badge.js';
 export { ConfidenceMeter, confidenceLevel, type ConfidenceLevel, type ConfidenceMeterProps, } from './components/confidence-meter.js';
 export { DateTile, type DateTileProps } from './components/date-tile.js';
+export { DiffStatLabel, type DiffStatLabelProps } from './components/diff-stat-label.js';
+export { compactFormatter } from './components/diff-stat-format.js';
 export { MetricBreakdown, MetricGrid, MetricPanel, MetricSectionHeading, MetricTile, type MetricBreakdownItem, type MetricBreakdownProps, type MetricGridProps, type MetricPanelProps, type MetricSectionHeadingProps, type MetricTileProps, type MetricTone, } from './components/metric-grid.js';
 export { resolveDateTimeFormat, type FormatDateTime } from './lib/date-time-format.js';
 export { ProvenanceChip, type ProvenanceChipProps, type ProvenanceMethod, } from './components/provenance-chip.js';

package/dist/index.js

@@ -24,6 +24,8 @@ export { TemplateChipInput, } from './components/template-chip-input.js';
 export { RunStatusBadge, } from './components/run-status-badge.js';
 export { ConfidenceMeter, confidenceLevel, } from './components/confidence-meter.js';
 export { DateTile } from './components/date-tile.js';
+export { DiffStatLabel } from './components/diff-stat-label.js';
+export { compactFormatter } from './components/diff-stat-format.js';
 export { MetricBreakdown, MetricGrid, MetricPanel, MetricSectionHeading, MetricTile, } from './components/metric-grid.js';
 export { resolveDateTimeFormat } from './lib/date-time-format.js';
 export { ProvenanceChip, } from './components/provenance-chip.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atmos.build/ui",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "The complete atmOS React component system and MCP App authoring helpers.",
   "type": "module",
   "license": "UNLICENSED",
@@ -32,6 +32,10 @@
       "types": "./dist/lib/cn.d.ts",
       "import": "./dist/lib/cn.js"
     },
+    "./naut-avatar-engine": {
+      "types": "./dist/components/naut-avatar-engine.d.ts",
+      "import": "./dist/components/naut-avatar-engine.js"
+    },
     "./view-query": {
       "types": "./dist/lib/view-query/index.d.ts",
       "import": "./dist/lib/view-query/index.js"