@atmos.build/ui 0.1.6 → 0.1.8

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/selectable-card.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const selectableCardVariants: (props?: ({
     layout?: "grid" | "row" | null | undefined;
+    appearance?: "list" | "card" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type SelectableCardOwnProps = {
     selected?: boolean;
@@ -19,6 +20,7 @@ type SelectableCardOwnProps = {
 export type SelectableCardProps = Omit<React.ComponentPropsWithoutRef<'button'>, keyof SelectableCardOwnProps | 'value'> & SelectableCardOwnProps & VariantProps<typeof selectableCardVariants>;
 declare const SelectableCard: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "value" | keyof SelectableCardOwnProps> & SelectableCardOwnProps & VariantProps<(props?: ({
     layout?: "grid" | "row" | null | undefined;
+    appearance?: "list" | "card" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
 export type SelectableCardGroupProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange'> & {
     value?: string | null;
@@ -30,4 +32,4 @@ declare function SelectableCardGroup({ value, onChange, orientation, className,
 declare const SelectableCardGroupItem: React.ForwardRefExoticComponent<Omit<SelectableCardProps, "role" | "selected"> & {
     value: string;
 } & React.RefAttributes<HTMLButtonElement>>;
-export { SelectableCard, SelectableCardGroup, SelectableCardGroupItem, selectableCardVariants, };
+export { SelectableCard, SelectableCardGroup, SelectableCardGroupItem, selectableCardVariants };

package/dist/components/selectable-card.js

@@ -12,10 +12,18 @@ const selectableCardVariants = cva([
 ], {
     variants: {
         layout: { row: 'items-center gap-3 p-3', grid: 'flex-col items-start gap-2 p-4' },
+        appearance: {
+            card: '',
+            list: [
+                'border-transparent bg-transparent shadow-none',
+                'hover:border-transparent hover:bg-accent/60',
+                'data-[selected=true]:border-transparent data-[selected=true]:bg-accent/70 data-[selected=true]:shadow-none data-[selected=true]:ring-0',
+            ],
+        },
     },
-    defaultVariants: { layout: 'row' },
+    defaultVariants: { layout: 'row', appearance: 'card' },
 });
-const SelectableCard = React.forwardRef(function SelectableCard({ selected = false, onSelect, icon, title, description, trailing, hideIndicator = false, indicator = 'check', role = 'radio', layout = 'row', disabled, className, children, onClick, onKeyDown, ...props }, ref) {
+const SelectableCard = React.forwardRef(function SelectableCard({ selected = false, onSelect, icon, title, description, trailing, hideIndicator = false, indicator = 'check', role = 'radio', layout = 'row', appearance = 'card', disabled, className, children, onClick, onKeyDown, ...props }, ref) {
     const handleClick = (event) => {
         onClick?.(event);
         if (!event.defaultPrevented && !disabled)
@@ -30,8 +38,10 @@ const SelectableCard = React.forwardRef(function SelectableCard({ selected = fal
     };
     const showIndicator = !hideIndicator && trailing === undefined;
     const trailingNode = trailing ??
-        (showIndicator && indicator === 'radio' ? (_jsx("span", { "aria-hidden": true, className: cn('flex size-[18px] shrink-0 items-center justify-center rounded-full border transition-colors', layout === 'grid' && 'absolute end-3 top-3', selected ? 'border-primary' : 'border-border group-hover/selectable-card:border-primary/50'), children: _jsx("span", { className: cn('size-2.5 rounded-full bg-primary transition-transform', selected ? 'scale-100' : 'scale-0') }) })) : showIndicator ? (_jsx(Check, { "aria-hidden": true, className: cn('size-4 shrink-0 text-primary transition-opacity', layout === 'grid' && 'absolute end-3 top-3', selected ? 'opacity-100' : 'opacity-0'), strokeWidth: 2 })) : null);
-    return (_jsxs("button", { ref: ref, type: "button", role: role, "aria-checked": selected, "aria-disabled": disabled || undefined, disabled: disabled, "data-slot": "selectable-card", "data-selected": selected, "data-layout": layout, onClick: handleClick, onKeyDown: handleKeyDown, className: cn(selectableCardVariants({ layout }), className), ...props, children: [icon != null ? (_jsx("span", { "data-slot": "selectable-card-icon", className: "flex shrink-0 items-center justify-center [&_svg:not([class*='size-'])]:size-4", children: icon })) : null, children, title != null || description != null ? (_jsxs("span", { "data-slot": "selectable-card-body", className: "min-w-0 flex-1", children: [title != null ? _jsx("span", { className: "block truncate text-sm font-medium", children: title }) : null, description != null ? (_jsx("span", { className: "mt-0.5 block text-xs leading-snug text-muted-foreground", children: description })) : null] })) : null, trailingNode] }));
+        (showIndicator && indicator === 'radio' ? (_jsx("span", { "aria-hidden": true, className: cn('flex size-[18px] shrink-0 items-center justify-center rounded-full border transition-colors', layout === 'grid' && 'absolute end-3 top-3', selected
+                ? 'border-primary'
+                : 'border-border group-hover/selectable-card:border-primary/50'), children: _jsx("span", { className: cn('bg-primary size-2.5 rounded-full transition-transform', selected ? 'scale-100' : 'scale-0') }) })) : showIndicator ? (_jsx(Check, { "aria-hidden": true, className: cn('text-primary size-4 shrink-0 transition-opacity', layout === 'grid' && 'absolute end-3 top-3', selected ? 'opacity-100' : 'opacity-0'), strokeWidth: 2 })) : null);
+    return (_jsxs("button", { ref: ref, type: "button", role: role, "aria-checked": selected, "aria-disabled": disabled || undefined, disabled: disabled, "data-slot": "selectable-card", "data-selected": selected, "data-layout": layout, "data-appearance": appearance, onClick: handleClick, onKeyDown: handleKeyDown, className: cn(selectableCardVariants({ layout, appearance }), className), ...props, children: [icon != null ? (_jsx("span", { "data-slot": "selectable-card-icon", className: "flex shrink-0 items-center justify-center [&_svg:not([class*='size-'])]:size-4", children: icon })) : null, children, title != null || description != null ? (_jsxs("span", { "data-slot": "selectable-card-body", className: "min-w-0 flex-1", children: [title != null ? (_jsx("span", { className: "block truncate text-sm font-medium", children: title })) : null, description != null ? (_jsx("span", { className: "text-muted-foreground mt-0.5 block text-xs leading-snug", children: description })) : null] })) : null, trailingNode] }));
 });
 const SelectableCardGroupContext = React.createContext(null);
 function SelectableCardGroup({ value, onChange, orientation = 'vertical', className, children, onKeyDown, ...props }) {
@@ -63,4 +73,4 @@ const SelectableCardGroupItem = React.forwardRef(function SelectableCardGroupIte
             context?.onChange?.(value);
         }, ...props }));
 });
-export { SelectableCard, SelectableCardGroup, SelectableCardGroupItem, selectableCardVariants, };
+export { SelectableCard, SelectableCardGroup, SelectableCardGroupItem, selectableCardVariants };

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.6",
+  "version": "0.1.8",
   "description": "The complete atmOS React component system and MCP App authoring helpers.",
   "type": "module",
   "license": "UNLICENSED",