@atmos.build/ui 0.1.5 → 0.1.7

package/dist/components/detail-top-bar.js

@@ -7,7 +7,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge
 import { MiddleTruncate } from './middle-truncate.js';
 import { StickyHeaderFade } from './sticky-header-fade.js';
 export function DetailTopBar({ title, trail, meta, actions, className, contentClassName, leftClassName, actionsClassName, chromeFont, headingFont, dataTestId, fade = true, }) {
-    return (_jsxs("div", { className: cn('bg-background/95 sticky top-0 z-50 flex h-10 items-center justify-between gap-3 px-3 backdrop-blur', chromeFont, className), "data-slot": "detail-top-bar", "data-testid": dataTestId, children: [_jsxs("div", { className: cn('flex min-w-0 flex-1 items-center gap-3 overflow-hidden', contentClassName), children: [_jsx("div", { className: cn('flex min-w-0 flex-1 items-center overflow-hidden', leftClassName), children: trail ?? (_jsx("h1", { className: cn('text-foreground min-w-0 truncate text-[13px] leading-5 font-medium', headingFont), children: title })) }), meta ? (_jsx("div", { className: "text-muted-foreground min-w-0 shrink truncate font-mono text-[11.5px]", children: meta })) : null] }), actions ? (_jsx("div", { className: cn('flex shrink-0 items-center gap-1', actionsClassName), children: actions })) : null, fade ? _jsx(StickyHeaderFade, { "data-slot": "detail-top-bar-fade" }) : null] }));
+    return (_jsxs("div", { className: cn('bg-background/95 sticky top-0 z-50 flex h-10 items-center justify-between gap-3 px-4 backdrop-blur', chromeFont, className), "data-slot": "detail-top-bar", "data-testid": dataTestId, children: [_jsxs("div", { className: cn('flex min-w-0 flex-1 items-center gap-3 overflow-hidden', contentClassName), children: [_jsx("div", { className: cn('flex min-w-0 flex-1 items-center overflow-hidden', leftClassName), children: trail ?? (_jsx("h1", { className: cn('text-foreground min-w-0 truncate text-[13px] leading-5 font-medium', headingFont), children: title })) }), meta ? (_jsx("div", { className: "text-muted-foreground min-w-0 shrink truncate font-mono text-[11.5px]", children: meta })) : null] }), actions ? (_jsx("div", { className: cn('flex shrink-0 items-center gap-1', actionsClassName), children: actions })) : null, fade ? _jsx(StickyHeaderFade, { "data-slot": "detail-top-bar-fade" }) : null] }));
 }
 export function DetailBreadcrumb({ items, ariaLabel, className, separator = '/', collapseMiddle = false, tailItems = 2, collapsedAriaLabel, dataTestId, }) {
     const collapsedItems = collapseMiddle ? collapsedMiddleItems(items, tailItems) : [];

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

@@ -6,6 +6,7 @@ export interface NautAppearance {
     shape: NautShape;
     color: NautColor;
 }
+export type NautAnimationRate = 'efficient' | 'smooth';
 export interface NautAvatarProps extends Omit<React.SVGProps<SVGSVGElement>, 'ref'> {
     shape?: NautShape;
     color?: NautColor;
@@ -19,6 +20,7 @@ export interface NautAvatarProps extends Omit<React.SVGProps<SVGSVGElement>, 're
     } | null;
     /** Glance at a mouse that comes near the face. Ignored once `gaze` is given. */
     followPointer?: boolean;
+    animationRate?: NautAnimationRate;
     /** Any stable id — keeps a list of Nauts from blinking in unison. */
     seed?: string | number;
 }

package/dist/components/naut-avatar.js

@@ -10,6 +10,7 @@ export { NAUT_COLORS, NAUT_COLOR_KEYS, NAUT_EXPRESSIONS, NAUT_GESTURES, NAUT_SHA
 const RECT_MAX_AGE_MS = 500;
 const IDLE_FRAME_MS = 1000 / 3;
 const RESPONSIVE_FRAME_MS = 1000 / 20;
+const SMOOTH_FRAME_MS = 1000 / 60;
 const POINTER_SETTLE_MS = 350;
 /** Where the mouse is, shared by every face so one listener serves the page. */
 const pointer = {
@@ -75,7 +76,11 @@ const ticker = {
             if (!entry.visible)
                 continue;
             const responsive = (entry.follow && pointerResponsive) || entry.engine.needsResponsiveFrameRate;
-            const frameMs = responsive ? RESPONSIVE_FRAME_MS : IDLE_FRAME_MS;
+            const frameMs = entry.smooth
+                ? SMOOTH_FRAME_MS
+                : responsive
+                    ? RESPONSIVE_FRAME_MS
+                    : IDLE_FRAME_MS;
             if (now - entry.lastUpdate < frameMs)
                 continue;
             const dt = Math.min((now - entry.lastUpdate) / 1000, 0.1);
@@ -111,7 +116,7 @@ const seedNumber = (seed) => typeof seed === 'number' ? seed : hashSeed(seed ??
  * look around. The eyes are holes, so set `--naut-avatar-eye` to the surface the
  * avatar sits on (defaults to `--background`).
  */
-export const NautAvatar = React.forwardRef(function NautAvatar({ shape = 'circle', color = 'ink', expression = 'neutral', idle = true, gaze = null, followPointer = true, seed, className, style, ...props }, forwardedRef) {
+export const NautAvatar = React.forwardRef(function NautAvatar({ shape = 'circle', color = 'ink', expression = 'neutral', idle = true, gaze = null, followPointer = true, animationRate = 'efficient', seed, className, style, ...props }, forwardedRef) {
     const reducedMotion = useReducedMotion();
     const animated = idle && !reducedMotion;
     const svgRef = React.useRef(null);
@@ -126,6 +131,7 @@ export const NautAvatar = React.forwardRef(function NautAvatar({ shape = 'circle
         svg: null,
         visible: true,
         follow: false,
+        smooth: false,
         rect: null,
         rectAt: -1,
         rectTime: 0,
@@ -141,7 +147,8 @@ export const NautAvatar = React.forwardRef(function NautAvatar({ shape = 'circle
         engine.idle = animated;
         engine.gazeTarget = gaze;
         entry.follow = followPointer && !gaze && animated;
-    }, [engine, entry, shape, color, expression, animated, gaze, followPointer]);
+        entry.smooth = animationRate === 'smooth';
+    }, [engine, entry, shape, color, expression, animated, gaze, followPointer, animationRate]);
     React.useLayoutEffect(() => {
         if (!rootRef.current ||
             !bodyRef.current ||
@@ -191,5 +198,5 @@ export const NautAvatar = React.forwardRef(function NautAvatar({ shape = 'circle
         engine.settle();
         engine.update(0);
     }, [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))" })] })] }) }));
+    return (_jsx("svg", { ref: svgRef, viewBox: NAUT_VIEWBOX, "data-slot": "naut-avatar", "data-shape": shape, "data-color": color, "data-expression": expression, "data-animation-rate": animationRate, "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/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/index.d.ts

@@ -68,7 +68,7 @@ export { PropertyPanel, type PropertyPanelProps, type PropertyPanelLabels, } fro
 export { SortableList, SortableItem, SortableRow, DragHandle, DragPreview, useSortableHandle, useSortableRow, reorderById, type SortableListProps, type ReorderDetail, type DragHandleProps, DndContext, KeyboardSensor, PointerSensor, SortableContext, arrayMove, closestCenter, sortableKeyboardCoordinates, useDraggable, useDroppable, useSensor, useSensors, verticalListSortingStrategy, type DragEndEvent, type DragOverEvent, type DragStartEvent, } from './components/sortable.js';
 export { VoiceLine, type VoiceLineProps, type VoiceLineState } from './components/voice-line.js';
 export { ShimmerText, type ShimmerTextProps } from './components/shimmer-text.js';
-export { NautAvatar, NAUT_COLORS, NAUT_COLOR_KEYS, NAUT_EXPRESSIONS, NAUT_GESTURES, NAUT_SHAPES, isNautColor, isNautShape, nautAppearanceForSeed, type NautAppearance, type NautAvatarHandle, type NautAvatarProps, type NautColor, type NautExpression, type NautGesture, type NautShape, } from './components/naut-avatar.js';
+export { NautAvatar, NAUT_COLORS, NAUT_COLOR_KEYS, NAUT_EXPRESSIONS, NAUT_GESTURES, NAUT_SHAPES, isNautColor, isNautShape, nautAppearanceForSeed, type NautAnimationRate, type NautAppearance, type NautAvatarHandle, type NautAvatarProps, type NautColor, type NautExpression, type NautGesture, type NautShape, } from './components/naut-avatar.js';
 export { NautScene, NAUT_SCENES, type NautSceneDef, type NautSceneFace, type NautSceneName, type NautSceneProps, } from './components/naut-scene.js';
 export { TranscriptionOverlay, type TranscriptionOverlayLabels, type TranscriptionOverlayProps, type TranscriptionOverlaySelector, type TranscriptionOverlayState, } from './components/transcription-overlay.js';
 export { TimestampedTranscript, type TimestampedTranscriptLabels, type TimestampedTranscriptProps, type TimestampedTranscriptUtterance, type TimestampedTranscriptWord, } from './components/timestamped-transcript.js';

package/package.json

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