@atmos.build/ui 0.1.0

package/dist/components/metric-grid.js

@@ -0,0 +1,39 @@
+'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';
+const TONE_TEXT = {
+    neutral: 'text-foreground',
+    success: 'text-success-9',
+    warning: 'text-warning-9',
+    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] }));
+}
+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 }));
+}
+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] }));
+}
+const TONE_BAR = {
+    neutral: 'bg-foreground/35',
+    success: 'bg-success-9/60',
+    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))) }))] }));
+}
+function MetricBreakdownRow({ item, showBar }) {
+    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 }));
+}

package/dist/components/microphone-priority.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+export interface MicrophonePriorityItem {
+    id: string;
+    name: string;
+    detail?: React.ReactNode;
+    level?: number;
+    selected?: boolean;
+    unavailable?: boolean;
+}
+export interface MicrophonePriorityLabels {
+    list: string;
+    unavailable: string;
+    selected: string;
+    reorder: (microphoneName: string) => string;
+    test: (microphoneName: string) => string;
+    stopTest: (microphoneName: string) => string;
+    level: (microphoneName: string, percentage: number) => string;
+}
+export interface MicrophonePriorityProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+    microphones: readonly MicrophonePriorityItem[];
+    labels: MicrophonePriorityLabels;
+    testingId?: string | null;
+    description?: React.ReactNode;
+    disabled?: boolean;
+    onReorder: (microphoneIds: string[]) => void;
+    onTest?: (microphoneId: string) => void;
+    onStopTest?: (microphoneId: string) => void;
+}
+export declare function MicrophonePriority({ microphones, labels, testingId, description, disabled, onReorder, onTest, onStopTest, className, ...props }: MicrophonePriorityProps): React.JSX.Element;

package/dist/components/microphone-priority.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { AlertCircle, Check, Mic, Square } from 'lucide-react';
+import { cn } from '../lib/cn.js';
+import { Button } from './button.js';
+import { DragHandle, SortableList } from './sortable.js';
+export function MicrophonePriority({ microphones, labels, testingId, description, disabled = false, onReorder, onTest, onStopTest, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "microphone-priority", className: cn('space-y-2', className), ...props, children: [description ? _jsx("div", { className: "text-muted-foreground text-sm", children: description }) : null, _jsx("div", { role: "list", "aria-label": labels.list, children: _jsx(SortableList, { items: [...microphones], keyOf: (microphone) => microphone.id, handle: true, disabled: disabled, onReorder: (_microphoneId, detail) => onReorder(detail.nextIds), className: "space-y-1.5", renderItem: (microphone, { dragHandleProps, isDragging, overlay }) => {
+                        const testing = testingId === microphone.id;
+                        const level = Math.max(0, Math.min(1, microphone.level ?? 0));
+                        const percentage = Math.round(level * 100);
+                        return (_jsxs("div", { role: "listitem", "data-microphone-id": microphone.id, "data-testing": testing || undefined, "data-unavailable": microphone.unavailable || undefined, className: cn('border-border bg-card group rounded-xl border p-2 transition-[border-color,box-shadow,opacity] motion-reduce:transition-none', testing && 'border-primary/40 ring-primary/10 ring-2', microphone.unavailable && 'opacity-60', isDragging && 'opacity-40', overlay && 'ring-ring shadow-lg ring-2'), children: [_jsxs("div", { className: "flex min-h-9 items-center gap-2", children: [_jsx(DragHandle, { dragHandleProps: dragHandleProps, "aria-label": labels.reorder(microphone.name), disabled: disabled || microphone.unavailable, className: "size-8 shrink-0 opacity-100" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "truncate text-sm font-medium", children: microphone.name }), microphone.selected ? (_jsx("span", { className: "text-primary inline-flex items-center gap-1 text-xs", "aria-label": labels.selected, children: _jsx(Check, { className: "size-3.5", strokeWidth: 1.5, "aria-hidden": true }) })) : null, microphone.unavailable ? (_jsxs("span", { className: "text-warning inline-flex items-center gap-1 text-xs", children: [_jsx(AlertCircle, { className: "size-3.5", strokeWidth: 1.5, "aria-hidden": true }), labels.unavailable] })) : null] }), microphone.detail ? (_jsx("div", { className: "text-muted-foreground truncate text-xs", children: microphone.detail })) : null] }), testing ? (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onStopTest?.(microphone.id), disabled: !onStopTest, "aria-label": labels.stopTest(microphone.name), children: [_jsx(Square, { className: "size-3", strokeWidth: 1.5, "aria-hidden": true }), labels.stopTest(microphone.name)] })) : (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onTest?.(microphone.id), disabled: disabled || microphone.unavailable || !onTest, "aria-label": labels.test(microphone.name), children: [_jsx(Mic, { className: "size-3.5", strokeWidth: 1.5, "aria-hidden": true }), labels.test(microphone.name)] }))] }), testing ? (_jsx("div", { role: "meter", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": percentage, "aria-label": labels.level(microphone.name, percentage), className: "bg-muted mt-2 h-1.5 overflow-hidden rounded-full", children: _jsx("div", { className: "bg-primary h-full origin-left rounded-full transition-transform motion-reduce:transition-none", style: { transform: `scaleX(${level})` } }) })) : null] }));
+                    } }) })] }));
+}

package/dist/components/middle-truncate.d.ts

@@ -0,0 +1,6 @@
+export type MiddleTruncateProps = {
+    text: string;
+    tail?: number;
+    className?: string;
+};
+export declare function MiddleTruncate({ text, tail, className }: MiddleTruncateProps): import("react").JSX.Element;

package/dist/components/middle-truncate.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../lib/cn.js';
+const FALLBACK_TAIL = 12;
+const MAX_TAIL = 22;
+function trailingSegmentLength(text) {
+    const separator = Math.max(text.lastIndexOf('/'), text.lastIndexOf('\\'));
+    const segment = separator === -1 ? FALLBACK_TAIL : text.length - separator;
+    return Math.min(segment, MAX_TAIL);
+}
+export function MiddleTruncate({ text, tail, className }) {
+    const kept = Math.min(text.length, Math.max(0, tail ?? trailingSegmentLength(text)));
+    const split = text.length - kept;
+    return (_jsxs("span", { title: text, className: cn('flex min-w-0 items-baseline', className), children: [_jsx("span", { className: "min-w-0 truncate", children: text.slice(0, split) }), _jsx("span", { className: "shrink-0 whitespace-pre", children: text.slice(split) })] }));
+}

package/dist/components/multi-combobox.d.ts

@@ -0,0 +1,48 @@
+import { type ReactNode } from 'react';
+import { type ComboboxLabels } from './combobox/types.js';
+export interface MultiComboboxItem {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    shortcut?: string;
+    group?: string;
+}
+export interface MultiComboboxProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    children: ReactNode;
+    disabled?: boolean;
+    items: MultiComboboxItem[];
+    values: string[];
+    onChange: (next: string[]) => void;
+    searchPlaceholder: string;
+    triggerKey?: string;
+    allowCreate?: boolean;
+    onCreate?: (label: string) => void;
+    renderCreateStep?: (context: {
+        query: string;
+        onCreated: (item: {
+            id: string;
+        }) => void;
+        onCancel: () => void;
+    }) => ReactNode;
+    CreateForm?: (props: {
+        initialValue: string;
+        onCreated: (item: {
+            id: string;
+        }) => void;
+        onCancel: () => void;
+    }) => ReactNode;
+    createLabel?: string;
+    contentClassName?: string;
+    onSearchChange?: (query: string) => void;
+    searching?: boolean;
+    searchingLabel?: string;
+    emptyText?: string;
+    labels?: Partial<ComboboxLabels>;
+    excludeSelected?: boolean;
+    showSelectionIndicator?: boolean;
+    triggerAsChild?: boolean;
+    'aria-label'?: string;
+}
+export declare function MultiCombobox({ open, onOpenChange, children, disabled, items, values, onChange, searchPlaceholder, triggerKey, allowCreate, onCreate, CreateForm, renderCreateStep, createLabel, contentClassName, onSearchChange, searching, searchingLabel, emptyText, labels: labelsProp, excludeSelected, showSelectionIndicator, triggerAsChild, 'aria-label': ariaLabel, }: MultiComboboxProps): import("react").JSX.Element;

package/dist/components/multi-combobox.js

@@ -0,0 +1,221 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, useCallback, useEffect, useId, useMemo, useRef, useState, } from 'react';
+import { Check, Plus } from 'lucide-react';
+import { Slot } from 'radix-ui';
+import { ComboboxCreateStep } from './combobox/create-step.js';
+import { DEFAULT_COMBOBOX_LABELS } from './combobox/types.js';
+import { EmptyState } from './empty-state.js';
+import { Kbd } from './kbd.js';
+import { StackedPopover, StackedPopoverContent, StackedPopoverTrigger, } from './popover-stack.js';
+import { cn } from '../lib/cn.js';
+const CREATE_ROW = '__create__';
+export function MultiCombobox({ open, onOpenChange, children, disabled = false, items, values, onChange, searchPlaceholder, triggerKey, allowCreate = false, onCreate, CreateForm, renderCreateStep, createLabel, contentClassName, onSearchChange, searching = false, searchingLabel, emptyText, labels: labelsProp, excludeSelected = false, showSelectionIndicator = true, triggerAsChild = false, 'aria-label': ariaLabel, }) {
+    const labels = { ...DEFAULT_COMBOBOX_LABELS, ...labelsProp };
+    const [query, setQuery] = useState('');
+    const [activeOverride, setActiveOverride] = useState(null);
+    const [mode, setMode] = useState('list');
+    const [pinnedSelected, setPinnedSelected] = useState(new Set());
+    const prevOpenRef = useRef(false);
+    const inputRef = useRef(null);
+    const triggerRef = useRef(null);
+    const wheelCleanupRef = useRef(null);
+    const listId = useId();
+    useEffect(() => {
+        if (open && !prevOpenRef.current)
+            setPinnedSelected(new Set(values));
+        prevOpenRef.current = open;
+    }, [open, values]);
+    useEffect(() => {
+        if (open && mode === 'list')
+            inputRef.current?.focus();
+    }, [open, mode]);
+    const listRefCallback = useCallback((node) => {
+        wheelCleanupRef.current?.();
+        wheelCleanupRef.current = null;
+        if (!node)
+            return;
+        const stopPropagation = (event) => event.stopPropagation();
+        node.addEventListener('wheel', stopPropagation, { passive: true });
+        wheelCleanupRef.current = () => node.removeEventListener('wheel', stopPropagation);
+    }, []);
+    useEffect(() => () => {
+        wheelCleanupRef.current?.();
+    }, []);
+    const selectedSet = useMemo(() => new Set(values), [values]);
+    const updateQuery = useCallback((next) => {
+        setQuery(next);
+        onSearchChange?.(next);
+    }, [onSearchChange]);
+    const availableItems = useMemo(() => (excludeSelected ? items.filter((item) => !selectedSet.has(item.id)) : items), [excludeSelected, items, selectedSet]);
+    const filtered = useMemo(() => {
+        const normalizedQuery = query.trim().toLocaleLowerCase();
+        if (!normalizedQuery)
+            return availableItems;
+        return availableItems.filter((item) => item.label.toLocaleLowerCase().includes(normalizedQuery));
+    }, [availableItems, query]);
+    const selectedRows = useMemo(() => filtered.filter((item) => pinnedSelected.has(item.id)), [filtered, pinnedSelected]);
+    const remainingRows = useMemo(() => filtered.filter((item) => !pinnedSelected.has(item.id)), [filtered, pinnedSelected]);
+    const remainingGroupCount = useMemo(() => new Set(remainingRows.map((item) => item.group).filter(Boolean)).size, [remainingRows]);
+    const trimmedQuery = query.trim();
+    const hasExactMatch = useMemo(() => {
+        if (!trimmedQuery)
+            return false;
+        const normalizedQuery = trimmedQuery.toLocaleLowerCase();
+        return availableItems.some((item) => item.label.toLocaleLowerCase() === normalizedQuery);
+    }, [availableItems, trimmedQuery]);
+    const hasCreateStep = Boolean(renderCreateStep) || Boolean(CreateForm);
+    const canCreate = allowCreate && (Boolean(onCreate) || hasCreateStep);
+    const showCreate = canCreate && trimmedQuery.length > 0 && !hasExactMatch;
+    const rowIds = useMemo(() => {
+        const ids = [...selectedRows, ...remainingRows].map((item) => item.id);
+        if (showCreate)
+            ids.push(CREATE_ROW);
+        return ids;
+    }, [remainingRows, selectedRows, showCreate]);
+    const activeId = activeOverride && rowIds.includes(activeOverride) ? activeOverride : (rowIds[0] ?? null);
+    const handleOpenChange = useCallback((next) => {
+        if (next && disabled)
+            return;
+        if (next && !open) {
+            updateQuery('');
+            setActiveOverride(null);
+            setMode('list');
+        }
+        onOpenChange(next);
+    }, [disabled, onOpenChange, open, updateQuery]);
+    const toggle = useCallback((id) => {
+        const next = new Set(selectedSet);
+        if (next.has(id))
+            next.delete(id);
+        else
+            next.add(id);
+        onChange(Array.from(next));
+    }, [onChange, selectedSet]);
+    const handleCreate = useCallback(() => {
+        if (!trimmedQuery)
+            return;
+        if (renderCreateStep || CreateForm) {
+            setMode('create');
+            return;
+        }
+        if (!onCreate)
+            return;
+        onCreate(trimmedQuery);
+        updateQuery('');
+        setActiveOverride(null);
+    }, [CreateForm, onCreate, renderCreateStep, trimmedQuery, updateQuery]);
+    const handleCreated = useCallback((item) => {
+        const next = new Set(values);
+        next.add(item.id);
+        onChange(Array.from(next));
+        updateQuery('');
+        setActiveOverride(null);
+        setMode('list');
+    }, [onChange, updateQuery, values]);
+    const handleKeyDown = useCallback((event) => {
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            if (rowIds.length === 0)
+                return;
+            event.preventDefault();
+            const currentIndex = activeId ? rowIds.indexOf(activeId) : -1;
+            const delta = event.key === 'ArrowDown' ? 1 : -1;
+            const nextIndex = (currentIndex + delta + rowIds.length) % rowIds.length;
+            setActiveOverride(rowIds[nextIndex] ?? null);
+            return;
+        }
+        if ((event.key === ' ' || event.key === 'Spacebar') && query.length === 0) {
+            if (!activeId || activeId === CREATE_ROW)
+                return;
+            event.preventDefault();
+            toggle(activeId);
+            return;
+        }
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            if (activeId === CREATE_ROW || (showCreate && filtered.length === 0)) {
+                handleCreate();
+                return;
+            }
+            if (activeId)
+                toggle(activeId);
+            if (!event.shiftKey)
+                handleOpenChange(false);
+            return;
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            handleOpenChange(false);
+            return;
+        }
+        if (event.key.length === 1 &&
+            !event.metaKey &&
+            !event.ctrlKey &&
+            !event.altKey &&
+            query.length === 0) {
+            const shortcut = event.key.toLocaleLowerCase();
+            const item = availableItems.find((candidate) => candidate.shortcut?.toLocaleLowerCase() === shortcut);
+            if (!item)
+                return;
+            event.preventDefault();
+            toggle(item.id);
+        }
+    }, [
+        activeId,
+        availableItems,
+        filtered.length,
+        handleCreate,
+        handleOpenChange,
+        query.length,
+        rowIds,
+        showCreate,
+        toggle,
+    ]);
+    const activeDomId = activeId ? `${listId}-row-${activeId}` : undefined;
+    const inCreateMode = mode === 'create' && hasCreateStep;
+    const createStep = renderCreateStep ? (renderCreateStep({
+        query: trimmedQuery,
+        onCreated: handleCreated,
+        onCancel: () => setMode('list'),
+    })) : CreateForm ? (_jsx(CreateForm, { initialValue: trimmedQuery, onCreated: handleCreated, onCancel: () => setMode('list') })) : null;
+    const renderRow = (item) => {
+        const active = activeId === item.id;
+        const selected = selectedSet.has(item.id);
+        return (_jsxs("li", { id: `${listId}-row-${item.id}`, role: "option", "aria-selected": selected, "data-active": active || undefined, onPointerMove: () => setActiveOverride(item.id), onPointerDown: (event) => {
+                if (event.button !== 0 || !event.isPrimary)
+                    return;
+                event.preventDefault();
+                toggle(item.id);
+            }, className: cn('text-foreground mx-1 flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-[13px]', active && 'bg-muted'), children: [showSelectionIndicator ? (_jsx("span", { "data-slot": "multi-combobox-selection-indicator", className: cn('flex size-3.5 shrink-0 items-center justify-center rounded-sm border', selected
+                        ? 'bg-primary border-primary text-primary-foreground'
+                        : 'border-border/70 bg-transparent'), "aria-hidden": true, children: selected ? _jsx(Check, { className: "size-2.5", strokeWidth: 2.5 }) : null })) : null, item.icon ? (_jsx("span", { className: "inline-flex shrink-0 items-center justify-center", children: item.icon })) : null, _jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }), item.shortcut ? _jsx(Kbd, { className: "shrink-0 text-[10.5px]", children: item.shortcut }) : null] }, item.id));
+    };
+    return (_jsxs(StackedPopover, { open: open, onOpenChange: handleOpenChange, children: [_jsx(StackedPopoverTrigger, { asChild: true, children: triggerAsChild ? (_jsx(Slot.Root, { ref: triggerRef, "aria-disabled": disabled || undefined, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": listId, onClickCapture: (event) => {
+                        if (disabled)
+                            event.preventDefault();
+                    }, children: children })) : (_jsx("div", { ref: triggerRef, className: "inline-flex w-full", onClickCapture: (event) => {
+                        if (disabled)
+                            event.preventDefault();
+                    }, children: _jsx(Slot.Root, { "aria-disabled": disabled || undefined, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": listId, children: children }) })) }), _jsx(StackedPopoverContent, { className: cn('relative isolate w-64 gap-0 overflow-hidden p-0', contentClassName), align: "start", "aria-label": ariaLabel, onCloseAutoFocus: (event) => {
+                    event.preventDefault();
+                    const trigger = triggerRef.current;
+                    const focusable = trigger?.matches('button, [tabindex]:not([tabindex="-1"])')
+                        ? trigger
+                        : trigger?.querySelector('button, [tabindex]:not([tabindex="-1"])');
+                    focusable?.focus();
+                }, onOpenAutoFocus: (event) => {
+                    event.preventDefault();
+                    if (mode === 'list')
+                        inputRef.current?.focus();
+                }, children: inCreateMode ? (_jsx("div", { className: "animate-in fade-in-0 slide-in-from-top-1 duration-150 motion-reduce:animate-none", children: _jsx(ComboboxCreateStep, { label: createLabel ?? searchPlaceholder, labels: labels, children: createStep }) })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "border-border/60 flex items-center gap-2 border-b px-2.5 pt-2.5 pb-1.5", children: [_jsx("input", { ref: inputRef, type: "text", role: "combobox", "aria-label": ariaLabel ?? searchPlaceholder, "aria-autocomplete": "list", "aria-controls": listId, "aria-expanded": open, "aria-activedescendant": activeDomId, value: query, placeholder: searchPlaceholder, onChange: (event) => updateQuery(event.target.value), onKeyDown: handleKeyDown, className: "placeholder:text-muted-foreground/70 min-w-0 flex-1 bg-transparent text-[13px] outline-none" }), searching ? (_jsx("span", { className: "text-muted-foreground text-[11px]", role: "status", children: searchingLabel ?? searchPlaceholder })) : null, triggerKey ? _jsx(Kbd, { className: "shrink-0 text-[10.5px]", children: triggerKey }) : null] }), _jsxs("ul", { ref: listRefCallback, id: listId, role: "listbox", "aria-multiselectable": true, "aria-label": ariaLabel, className: "max-h-72 overflow-y-auto py-1", children: [filtered.length === 0 && !showCreate && !searching ? (_jsx("li", { children: _jsx(EmptyState, { title: emptyText ?? labelsProp?.noMatches ?? searchPlaceholder, className: "py-6" }) })) : (_jsxs(_Fragment, { children: [selectedRows.map(renderRow), selectedRows.length > 0 && remainingRows.length > 0 ? (_jsx("li", { role: "presentation", "aria-hidden": true, className: "border-border/60 mx-2 my-1 border-t" })) : null, remainingRows.map((item, index) => {
+                                            const showGroup = remainingGroupCount > 1 &&
+                                                item.group &&
+                                                (index === 0 || remainingRows[index - 1]?.group !== item.group);
+                                            return (_jsxs(Fragment, { children: [showGroup ? (_jsx("li", { role: "presentation", "aria-hidden": true, className: "text-muted-foreground/70 mx-1 mt-1.5 mb-0.5 px-2 text-[10.5px]", children: item.group })) : null, renderRow(item)] }, item.id));
+                                        })] })), showCreate ? (_jsxs("li", { id: `${listId}-row-${CREATE_ROW}`, role: "option", "aria-selected": false, "data-active": activeId === CREATE_ROW || undefined, onPointerMove: () => setActiveOverride(CREATE_ROW), onPointerDown: (event) => {
+                                        if (event.button !== 0 || !event.isPrimary)
+                                            return;
+                                        event.preventDefault();
+                                        handleCreate();
+                                    }, className: cn('border-border/60 mx-1 mt-1 flex cursor-pointer items-center gap-2 rounded-md border-t px-2 py-2 text-[13px]', activeId === CREATE_ROW && 'bg-muted'), children: [_jsx(Plus, { className: "text-muted-foreground size-3.5", strokeWidth: 1.5, "aria-hidden": true }), _jsxs("span", { className: "text-foreground min-w-0 truncate", children: [createLabel ? `${createLabel}: ` : null, _jsx("span", { className: "text-foreground/90", children: trimmedQuery })] })] })) : null] })] })) })] }));
+}

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

@@ -0,0 +1,83 @@
+export declare const NAUT_SHAPES: readonly ["circle", "squircle", "triangle", "diamond", "hexagon"];
+export type NautShape = (typeof NAUT_SHAPES)[number];
+export declare const NAUT_COLORS: {
+    readonly ink: "#111216";
+    readonly slate: "#4b5163";
+    readonly coral: "#ef6f4f";
+    readonly sun: "#f0b429";
+    readonly mint: "#2fb585";
+    readonly sky: "#3d9ff0";
+    readonly lavender: "#8b7cf2";
+    readonly rose: "#ec5f98";
+    readonly ocean: "#3162e8";
+    readonly forest: "#2f6b4f";
+    readonly plum: "#6b3a8e";
+    readonly clay: "#b5654b";
+};
+export type NautColor = keyof typeof NAUT_COLORS;
+export declare const NAUT_COLOR_KEYS: NautColor[];
+export declare const isNautShape: (v: unknown) => v is NautShape;
+export declare const isNautColor: (v: unknown) => v is NautColor;
+export declare const NAUT_EXPRESSIONS: readonly ["neutral", "happy", "angry", "surprised", "thinking", "sad", "sleepy", "excited", "error", "confused", "wink", "focused", "laughing", "scared", "smug", "talking", "loading"];
+export type NautExpression = (typeof NAUT_EXPRESSIONS)[number];
+export declare const NAUT_GESTURES: readonly ["nod", "shake", "blink", "wink", "bounce", "jump", "spin", "lookAround", "shiver", "celebrate", "nope", "pop"];
+export type NautGesture = (typeof NAUT_GESTURES)[number];
+export declare const NAUT_VIEWBOX = "-126 -126 252 252";
+export interface NautAvatarOptions {
+    shape?: NautShape;
+    color?: NautColor;
+    expression?: NautExpression;
+    /** Deterministic idle randomness so lists don't all blink in sync. */
+    seed?: number;
+    idle?: boolean;
+}
+export interface NautAvatarElements {
+    root: SVGGElement;
+    body: SVGPathElement;
+    eyes: SVGGElement;
+    eyeL: SVGPathElement;
+    eyeR: SVGPathElement;
+}
+/**
+ * Framework-agnostic renderer: owns the animation state and writes attributes onto the
+ * SVG elements it is given. Call `update(dt)` once per frame.
+ */
+export declare class NautAvatarEngine {
+    shape: NautShape;
+    color: NautColor;
+    expression: NautExpression;
+    idle: boolean;
+    /** Pointer/gaze target in [-1, 1]; null = no external gaze. */
+    gazeTarget: {
+        x: number;
+        y: number;
+    } | null;
+    private readonly rand;
+    private time;
+    private emotionTime;
+    private gestures;
+    private nodes;
+    private sphere;
+    private eyeYOff;
+    private readonly face;
+    private targetFace;
+    private readonly idleState;
+    private el;
+    constructor(opts?: NautAvatarOptions);
+    attach(el: NautAvatarElements): void;
+    setShape(shape: NautShape): void;
+    setColor(color: NautColor): void;
+    setExpression(key: NautExpression, instant?: boolean): void;
+    play(key: NautGesture): void;
+    /** Snap every tween to its target (used for static renders / reduced motion). */
+    settle(): void;
+    update(dt: number): void;
+    private updateIdle;
+    private render;
+}
+/** Stable pseudo-random pick so the same id always gets the same appearance. */
+export declare function hashSeed(input: string): number;
+export declare function nautAppearanceForSeed(seed: string): {
+    shape: NautShape;
+    color: NautColor;
+};