@atmos.build/ui 0.1.0

package/dist/components/terminal-spinner.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useMediaQuery } from '../hooks/use-media-query.js';
+import { cn } from '../lib/cn.js';
+const SPINNER_FRAMES = [
+    '⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏',
+];
+const SPINNER_FALLBACK = SPINNER_FRAMES[0];
+const TONE_CLASS = {
+    neutral: 'text-foreground',
+    accent: 'text-primary',
+    muted: 'text-muted-foreground',
+};
+function usePrefersReducedMotion() {
+    return useMediaQuery('(prefers-reduced-motion: reduce)');
+}
+function useSpinnerFrame(fps, reducedMotion) {
+    const [frame, setFrame] = useState(0);
+    useEffect(() => {
+        if (reducedMotion)
+            return;
+        const ms = Math.max(1, Math.round(1000 / Math.max(1, fps)));
+        const id = window.setInterval(() => {
+            setFrame((current) => (current + 1) % SPINNER_FRAMES.length);
+        }, ms);
+        return () => {
+            window.clearInterval(id);
+        };
+    }, [fps, reducedMotion]);
+    if (reducedMotion)
+        return SPINNER_FALLBACK;
+    return SPINNER_FRAMES[frame] ?? SPINNER_FALLBACK;
+}
+export function TerminalSpinner({ fps = 12, tone = 'neutral', ariaLabel, className, }) {
+    const reducedMotion = usePrefersReducedMotion();
+    const glyph = useSpinnerFrame(fps, reducedMotion);
+    return (_jsxs("span", { role: "status", "aria-live": "polite", "aria-label": ariaLabel, className: cn('inline-flex items-baseline gap-1.5 font-mono text-[12px] leading-none', TONE_CLASS[tone], className), children: [_jsx(TerminalSpinnerStyle, {}), _jsx("span", { className: "terminal-spinner-glyph", "aria-hidden": true, children: glyph })] }));
+}
+function TerminalSpinnerStyle() {
+    return (_jsx("style", { children: `
+      .terminal-spinner-glyph {
+        display: inline-block;
+        min-width: 1ch;
+        text-align: center;
+      }
+    ` }));
+}

package/dist/components/textarea.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
+export { Textarea };

package/dist/components/textarea.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+function Textarea({ className, ...props }) {
+    return (_jsx("textarea", { "data-slot": "textarea", className: cn("flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className), ...props }));
+}
+export { Textarea };

package/dist/components/time-column.d.ts

@@ -0,0 +1,24 @@
+import { type FormatDateTime } from '../lib/date-time-format.js';
+export declare function buildTimeSlots(step: number, minMinutes: number, maxMinutes: number): number[];
+export declare function useTimeNavigation({ slots, selectedMinutes, }: {
+    slots: number[];
+    selectedMinutes: number | null;
+}): {
+    active: number | null;
+    setActive: import("react").Dispatch<import("react").SetStateAction<number | null>>;
+    move: (dir: 1 | -1) => void;
+};
+export interface TimeColumnProps {
+    slots: number[];
+    selectedMinutes: number | null;
+    activeMinutes?: number | null;
+    onPick: (minutes: number) => void;
+    locale?: string;
+    format?: FormatDateTime;
+    hour12?: boolean;
+    'aria-label': string;
+    id?: string;
+    optionId?: (minutes: number) => string;
+    className?: string;
+}
+export declare function TimeColumn({ slots, selectedMinutes, activeMinutes, onPick, locale, format, hour12, 'aria-label': ariaLabel, id, optionId, className, }: TimeColumnProps): import("react").JSX.Element;

package/dist/components/time-column.js

@@ -0,0 +1,60 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { cn } from '../lib/cn.js';
+import { resolveDateTimeFormat } from '../lib/date-time-format.js';
+export function buildTimeSlots(step, minMinutes, maxMinutes) {
+    const stride = Math.max(1, Math.round(step));
+    const out = [];
+    for (let m = minMinutes; m <= maxMinutes; m += stride)
+        out.push(m);
+    return out;
+}
+function nearestIndex(slots, minutes) {
+    let best = 0;
+    let bestDist = Infinity;
+    for (let i = 0; i < slots.length; i++) {
+        const dist = Math.abs((slots[i] ?? 0) - minutes);
+        if (dist < bestDist) {
+            bestDist = dist;
+            best = i;
+        }
+    }
+    return best;
+}
+export function useTimeNavigation({ slots, selectedMinutes, }) {
+    const [active, setActive] = useState(null);
+    const move = useCallback((dir) => {
+        if (!slots.length)
+            return;
+        setActive((cur) => {
+            if (cur == null) {
+                if (selectedMinutes != null)
+                    return slots[nearestIndex(slots, selectedMinutes)] ?? null;
+                return (dir === 1 ? slots[0] : slots[slots.length - 1]) ?? null;
+            }
+            const i = nearestIndex(slots, cur);
+            const next = Math.min(Math.max(i + dir, 0), slots.length - 1);
+            return slots[next] ?? null;
+        });
+    }, [slots, selectedMinutes]);
+    return { active, setActive, move };
+}
+export function TimeColumn({ slots, selectedMinutes, activeMinutes = null, onPick, locale, format, hour12, 'aria-label': ariaLabel, id, optionId, className, }) {
+    const timeFmt = useMemo(() => {
+        const fmt = resolveDateTimeFormat(format, locale);
+        return (d) => fmt(d, { hour: 'numeric', minute: '2-digit', hour12 });
+    }, [format, locale, hour12]);
+    const scrollTarget = activeMinutes ?? selectedMinutes;
+    const currentRef = useRef(null);
+    useEffect(() => {
+        currentRef.current?.scrollIntoView({ block: 'center' });
+    }, [scrollTarget]);
+    return (_jsx("div", { id: id, role: "listbox", "aria-label": ariaLabel, className: cn('max-h-[316px] w-[92px] space-y-0.5 overflow-y-auto px-1.5 py-2', className), children: slots.map((minutes) => {
+            const selected = selectedMinutes === minutes;
+            const active = activeMinutes === minutes;
+            return (_jsx("button", { ref: minutes === scrollTarget ? currentRef : undefined, id: optionId?.(minutes), type: "button", role: "option", "aria-selected": selected, tabIndex: -1, onClick: () => onPick(minutes), className: cn('w-full cursor-pointer rounded-md px-2 py-1 text-left text-[12px] tabular-nums transition-colors', selected
+                    ? 'bg-primary text-primary-foreground font-medium'
+                    : 'text-foreground/85 hover:bg-accent hover:text-accent-foreground', active && !selected && 'bg-accent text-accent-foreground', active && 'ring-ring/70 ring-2 ring-inset'), children: timeFmt(new Date(2000, 0, 1, Math.floor(minutes / 60), minutes % 60)) }, minutes));
+        }) }));
+}

package/dist/components/timestamped-transcript.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+export interface TimestampedTranscriptWord {
+    id?: string;
+    text: string;
+    startMs: number;
+    endMs: number;
+    confidence?: number;
+    speaker?: string;
+    final?: boolean;
+}
+export interface TimestampedTranscriptUtterance {
+    id: string;
+    text: string;
+    startMs: number;
+    endMs: number;
+    speaker?: string;
+    words?: readonly TimestampedTranscriptWord[];
+    final?: boolean;
+}
+export interface TimestampedTranscriptLabels {
+    transcript: string;
+    empty: string;
+    loadMore: string;
+    seekTo: (timestamp: string, text: string) => string;
+    confidence: (text: string) => string;
+}
+export interface TimestampedTranscriptProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+    utterances: readonly TimestampedTranscriptUtterance[];
+    labels: TimestampedTranscriptLabels;
+    formatTimestamp: (milliseconds: number) => string;
+    activeTimeMs?: number;
+    showConfidenceBelow?: number;
+    hasMore?: boolean;
+    loadingMore?: boolean;
+    onLoadMore?: () => void;
+    onSeek?: (milliseconds: number, utteranceId: string, wordIndex?: number) => void;
+}
+export declare function TimestampedTranscript({ utterances, labels, formatTimestamp, activeTimeMs, showConfidenceBelow, hasMore, loadingMore, onLoadMore, onSeek, className, ...props }: TimestampedTranscriptProps): React.JSX.Element;

package/dist/components/timestamped-transcript.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { ChevronDown } from 'lucide-react';
+import { cn } from '../lib/cn.js';
+import { Button } from './button.js';
+import { ConfidenceMeter } from './confidence-meter.js';
+function isActive(startMs, endMs, activeTimeMs) {
+    return activeTimeMs !== undefined && activeTimeMs >= startMs && activeTimeMs < endMs;
+}
+export function TimestampedTranscript({ utterances, labels, formatTimestamp, activeTimeMs, showConfidenceBelow = 0.75, hasMore = false, loadingMore = false, onLoadMore, onSeek, className, ...props }) {
+    if (utterances.length === 0) {
+        return (_jsx("div", { "data-slot": "timestamped-transcript", "aria-label": labels.transcript, className: cn('border-border bg-muted/20 rounded-lg border border-dashed p-4', className), ...props, children: _jsx("p", { className: "text-muted-foreground text-sm", children: labels.empty }) }));
+    }
+    return (_jsxs("div", { "data-slot": "timestamped-transcript", "aria-label": labels.transcript, className: cn('border-border bg-card overflow-hidden rounded-xl border', className), ...props, children: [_jsx("ol", { className: "divide-border/70 divide-y", "aria-label": labels.transcript, children: utterances.map((utterance) => {
+                    const utteranceActive = isActive(utterance.startMs, utterance.endMs, activeTimeMs);
+                    const timestamp = formatTimestamp(utterance.startMs);
+                    const words = utterance.words ?? [];
+                    return (_jsxs("li", { "data-utterance-id": utterance.id, "data-final": utterance.final ?? true, className: cn('grid grid-cols-[auto_minmax(0,1fr)] gap-3 px-3 py-3 transition-colors motion-reduce:transition-none', utteranceActive && 'bg-primary/[0.06]', utterance.final === false && 'opacity-70'), children: [_jsx("button", { type: "button", onClick: onSeek ? () => onSeek(utterance.startMs, utterance.id) : undefined, disabled: !onSeek, "aria-label": labels.seekTo(timestamp, utterance.text), className: "text-muted-foreground focus-visible:ring-ring mt-0.5 rounded-sm font-mono text-[11px] tabular-nums outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-default", children: timestamp }), _jsxs("div", { className: "min-w-0", children: [utterance.speaker ? (_jsx("div", { className: "text-muted-foreground mb-1.5 text-xs font-medium", children: utterance.speaker })) : null, words.length > 0 ? (_jsx("p", { className: "flex flex-wrap items-baseline gap-x-1.5 gap-y-1 text-sm leading-relaxed", children: words.map((word, wordIndex) => {
+                                            const active = isActive(word.startMs, word.endMs, activeTimeMs);
+                                            const wordTimestamp = formatTimestamp(word.startMs);
+                                            const key = word.id ?? `${utterance.id}-${word.startMs}-${wordIndex}`;
+                                            const showConfidence = word.confidence !== undefined && word.confidence < showConfidenceBelow;
+                                            return (_jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: onSeek
+                                                            ? () => onSeek(word.startMs, utterance.id, wordIndex)
+                                                            : undefined, disabled: !onSeek, "aria-label": labels.seekTo(wordTimestamp, word.text), "aria-current": active ? 'true' : undefined, className: cn('focus-visible:ring-ring rounded-sm px-0.5 text-left transition-colors outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-text motion-reduce:transition-none', active && 'bg-primary/15 text-primary', word.final === false && 'text-muted-foreground'), children: word.text }), showConfidence ? (_jsx(ConfidenceMeter, { value: word.confidence ?? 0, label: labels.confidence(word.text) })) : null] }, key));
+                                        }) })) : (_jsx("button", { type: "button", onClick: onSeek ? () => onSeek(utterance.startMs, utterance.id) : undefined, disabled: !onSeek, "aria-current": utteranceActive ? 'true' : undefined, "aria-label": labels.seekTo(timestamp, utterance.text), className: cn('focus-visible:ring-ring rounded-sm text-left text-sm leading-relaxed outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-text', utteranceActive && 'text-primary'), children: utterance.text }))] })] }, utterance.id));
+                }) }), hasMore && onLoadMore ? (_jsx("div", { className: "border-border/70 flex justify-center border-t p-2", children: _jsxs(Button, { type: "button", variant: "ghost", size: "sm", disabled: loadingMore, "aria-busy": loadingMore, onClick: onLoadMore, children: [_jsx(ChevronDown, { className: "size-3.5", strokeWidth: 1.5, "aria-hidden": true }), labels.loadMore] }) })) : null] }));
+}

package/dist/components/timezone-picker.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react';
+export interface TimezonePickerLabels {
+    search: string;
+    empty: string;
+    current: string;
+    all: string;
+}
+export interface TimezonePickerProps {
+    value: string;
+    onChange: (timeZone: string) => void;
+    labels: TimezonePickerLabels;
+    children: ReactNode;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    align?: 'start' | 'center' | 'end';
+    timeZones?: readonly string[];
+    referenceDate?: Date;
+}
+export declare function TimezonePicker({ value, onChange, labels, children, defaultOpen, onOpenChange, align, timeZones, referenceDate, }: TimezonePickerProps): import("react").JSX.Element;
+export declare function TimezoneList({ value, onChange, labels, timeZones, referenceDate }: Omit<TimezonePickerProps, 'children' | 'defaultOpen' | 'onOpenChange' | 'align'>): import("react").JSX.Element;
+export declare function supportedTimeZones(): string[];
+export declare function timezoneOffsetLabel(timeZone: string, at?: Date): string;

package/dist/components/timezone-picker.js

@@ -0,0 +1,60 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Check } from 'lucide-react';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from './command.js';
+import { Popover, PopoverContent, PopoverTrigger } from './popover.js';
+export function TimezonePicker({ value, onChange, labels, children, defaultOpen = false, onOpenChange, align = 'end', timeZones, referenceDate, }) {
+    const [open, setOpen] = useState(defaultOpen);
+    const setOpenState = (next) => {
+        setOpen(next);
+        onOpenChange?.(next);
+    };
+    return _jsxs(Popover, { open: open, onOpenChange: setOpenState, children: [_jsx(PopoverTrigger, { asChild: true, children: children }), _jsx(PopoverContent, { align: align, className: "w-72 p-0", children: _jsx(TimezoneList, { value: value, labels: labels, timeZones: timeZones, referenceDate: referenceDate, onChange: (timeZone) => {
+                        onChange(timeZone);
+                        setOpenState(false);
+                    } }) })] });
+}
+export function TimezoneList({ value, onChange, labels, timeZones, referenceDate }) {
+    const zones = useMemo(() => {
+        const all = timeZones ? [...timeZones] : supportedTimeZones();
+        const local = browserTimeZone();
+        const pinned = [...new Set([value, local].filter(Boolean))];
+        return { pinned, rest: all.filter((zone) => !pinned.includes(zone)) };
+    }, [timeZones, value]);
+    const renderZone = (timeZone) => _jsxs(CommandItem, { value: timeZone, onSelect: () => onChange(timeZone), className: "flex items-center gap-2 text-xs", children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: timeZone.replaceAll('_', ' ') }), _jsx("span", { className: "text-muted-foreground text-[11px] tabular-nums", children: timezoneOffsetLabel(timeZone, referenceDate) }), timeZone === value ? _jsx(Check, { className: "text-muted-foreground size-3.5 shrink-0", "aria-hidden": true }) : null] }, timeZone);
+    return _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: labels.search }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: labels.empty }), zones.pinned.length > 0 ? _jsx(CommandGroup, { heading: labels.current, children: zones.pinned.map(renderZone) }) : null, _jsx(CommandGroup, { heading: labels.all, children: zones.rest.map(renderZone) })] })] });
+}
+export function supportedTimeZones() {
+    try {
+        const supportedValuesOf = Reflect.get(Intl, 'supportedValuesOf');
+        if (typeof supportedValuesOf === 'function') {
+            const values = Reflect.apply(supportedValuesOf, Intl, ['timeZone']);
+            if (Array.isArray(values)) {
+                const zones = values.filter((value) => typeof value === 'string');
+                if (zones.length > 0)
+                    return zones.includes('UTC') ? zones : ['UTC', ...zones];
+            }
+        }
+    }
+    catch { /* Intl fallback */ }
+    return ['UTC'];
+}
+export function timezoneOffsetLabel(timeZone, at = new Date()) {
+    try {
+        return new Intl.DateTimeFormat('en-US', { timeZone, timeZoneName: 'shortOffset' })
+            .formatToParts(at)
+            .find((part) => part.type === 'timeZoneName')?.value ?? '';
+    }
+    catch {
+        return '';
+    }
+}
+function browserTimeZone() {
+    try {
+        return Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC';
+    }
+    catch {
+        return 'UTC';
+    }
+}

package/dist/components/tooltip.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import { type VariantProps } from "class-variance-authority";
+declare const tooltipVariants: (props?: ({
+    variant?: "default" | "compact" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): React.JSX.Element;
+declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): React.JSX.Element;
+declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): React.JSX.Element;
+declare function TooltipContent({ className, variant, sideOffset, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content> & VariantProps<typeof tooltipVariants>): React.JSX.Element;
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/components/tooltip.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn.js";
+const tooltipVariants = cva("z-50 inline-flex w-fit origin-(--radix-tooltip-content-transform-origin) items-center data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", {
+    variants: {
+        variant: {
+            default: "max-w-xs gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm",
+            compact: "max-w-[16rem] gap-1 rounded-md bg-popover px-2 py-1 text-[11px] font-medium whitespace-nowrap text-popover-foreground shadow-md ring-1 ring-foreground/10",
+        },
+    },
+    defaultVariants: { variant: "default" },
+});
+function TooltipProvider({ delayDuration = 0, ...props }) {
+    return (_jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delayDuration: delayDuration, ...props }));
+}
+function Tooltip({ ...props }) {
+    return _jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({ ...props }) {
+    return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({ className, variant = "default", sideOffset, children, ...props }) {
+    const resolvedSideOffset = sideOffset ?? (variant === "compact" ? 6 : 0);
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { "data-slot": "tooltip-content", sideOffset: resolvedSideOffset, className: cn(tooltipVariants({ variant }), className), ...props, children: [children, variant === "default" ? (_jsx(TooltipPrimitive.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" })) : null] }) }));
+}
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/components/transcription-overlay.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { type LucideIcon } from 'lucide-react';
+import { type VoiceLineState } from './voice-line.js';
+export type TranscriptionOverlayState = 'preflight' | 'recording' | 'processing' | 'completed' | 'cancelled' | 'error' | 'agent-inline' | 'agent-background' | 'speaking';
+export interface TranscriptionOverlaySelector {
+    id: string;
+    label: React.ReactNode;
+    icon?: LucideIcon;
+    avatar?: React.ReactNode;
+    ariaLabel?: string;
+    trailing?: 'menu' | 'switch' | 'none';
+    expanded?: boolean;
+    disabled?: boolean;
+    onSelect?: () => void;
+}
+export interface TranscriptionOverlayLabels {
+    cancel: string;
+    dismiss: string;
+    moreActions: string;
+    retry: string;
+    stop: string;
+    undo: string;
+}
+export interface TranscriptionOverlayProps extends Omit<React.ComponentProps<'section'>, 'children'> {
+    state: TranscriptionOverlayState;
+    density?: 'default' | 'compact';
+    ariaLabel: string;
+    statusLabel: string;
+    labels: TranscriptionOverlayLabels;
+    transcript?: React.ReactNode;
+    actionLabel?: React.ReactNode;
+    duration?: React.ReactNode;
+    applicationIcon?: React.ReactNode;
+    applicationName?: string;
+    selectors?: readonly TranscriptionOverlaySelector[];
+    partial?: boolean;
+    micLevel?: number;
+    analyser?: AnalyserNode | null;
+    voiceState?: VoiceLineState;
+    onCancel?: () => void;
+    onDismiss?: () => void;
+    onMoreActions?: () => void;
+    onRetry?: () => void;
+    onStop?: () => void;
+    onUndo?: () => void;
+}
+export declare function TranscriptionOverlay({ state, density, ariaLabel, statusLabel, labels, transcript, actionLabel, duration, applicationIcon, applicationName, selectors, partial, micLevel, analyser, voiceState, onCancel, onDismiss, onMoreActions, onRetry, onStop, onUndo, className, ...props }: TranscriptionOverlayProps): React.JSX.Element;

package/dist/components/transcription-overlay.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { ArrowLeftRight, ChevronDown, Ellipsis, RotateCcw, Square, X, } from 'lucide-react';
+import { cn } from '../lib/cn.js';
+import { Button } from './button.js';
+import { IconButton } from './icon-button.js';
+import { VoiceLine } from './voice-line.js';
+const SPEAKING_BAR_COUNT = 11;
+const VOICE_STATE = {
+    preflight: 'generating',
+    recording: 'listening',
+    processing: 'generating',
+    completed: 'idle',
+    cancelled: 'reprompt',
+    error: 'reprompt',
+    'agent-inline': 'speaking',
+    'agent-background': 'generating',
+    speaking: 'speaking',
+};
+export function TranscriptionOverlay({ state, density = 'default', ariaLabel, statusLabel, labels, transcript, actionLabel, duration, applicationIcon, applicationName, selectors = [], partial = state === 'recording', micLevel, analyser = null, voiceState, onCancel, onDismiss, onMoreActions, onRetry, onStop, onUndo, className, ...props }) {
+    const compact = density === 'compact';
+    const resolvedVoiceState = voiceState ?? VOICE_STATE[state];
+    const active = state === 'recording' || state === 'speaking' || state === 'agent-inline';
+    const showTopDismiss = Boolean(onDismiss) && state !== 'completed' && state !== 'agent-inline';
+    const showFooterDismiss = Boolean(onDismiss) && state === 'agent-inline';
+    return (_jsxs("section", { "data-slot": "transcription-overlay", "data-state": state, "aria-label": ariaLabel, className: cn('w-full min-w-0', compact ? 'max-w-md' : 'max-w-xl', state === 'completed' &&
+            'motion-safe:animate-out motion-safe:fade-out-0 motion-safe:slide-out-to-bottom-1 duration-300 motion-safe:[animation-fill-mode:forwards]', className), ...props, children: [selectors.length > 0 || onMoreActions ? (_jsxs("div", { className: cn('flex flex-wrap items-center px-2', compact ? 'mb-1 gap-1' : 'mb-1.5 gap-1.5'), children: [selectors.map(({ id, label, icon: Icon, avatar, ariaLabel, trailing = 'menu', expanded, disabled, onSelect, }) => (_jsxs(Button, { type: "button", variant: "outline", size: compact ? 'xs' : 'sm', disabled: disabled, "aria-expanded": expanded, "aria-label": ariaLabel, onClick: onSelect, className: cn('bg-card ring-foreground/10 rounded-full shadow-sm ring-1', 'dark:bg-card dark:hover:bg-muted', compact && 'text-[11px]'), children: [avatar ? (_jsx("span", { className: "size-4 overflow-hidden rounded-full", children: avatar })) : Icon ? (_jsx(Icon, { className: "size-3.5", strokeWidth: 1.5, "aria-hidden": true })) : null, _jsx("span", { children: label }), trailing === 'menu' ? (_jsx(ChevronDown, { className: "text-muted-foreground size-3.5", strokeWidth: 1.5, "aria-hidden": true })) : trailing === 'switch' ? (_jsx(ArrowLeftRight, { className: "text-muted-foreground size-3.5", strokeWidth: 1.5, "aria-hidden": true })) : null] }, id))), onMoreActions ? (_jsx(IconButton, { type: "button", size: compact ? 'xs' : 'sm', tooltip: labels.moreActions, "aria-label": labels.moreActions, onClick: onMoreActions, className: "bg-card border-border ring-foreground/10 dark:bg-card dark:hover:bg-muted rounded-full border shadow-sm ring-1", children: _jsx(Ellipsis, { className: "size-4", strokeWidth: 1.5, "aria-hidden": true }) })) : null] })) : null, _jsxs("div", { className: cn('border-border bg-card ring-foreground/10 overflow-hidden border shadow-2xl ring-1', compact ? 'rounded-xl' : 'rounded-2xl'), children: [showTopDismiss ? (_jsx("div", { className: cn('flex justify-end', compact ? 'px-1 pt-1' : 'px-2 pt-2'), children: _jsx(IconButton, { type: "button", size: compact ? 'xs' : 'sm', tooltip: labels.dismiss, "aria-label": labels.dismiss, onClick: onDismiss, children: _jsx(X, { className: "size-4", strokeWidth: 1.5, "aria-hidden": true }) }) })) : null, transcript != null ? (_jsxs("p", { "aria-live": "polite", className: cn('leading-relaxed tracking-[-0.005em]', compact ? 'min-h-8 px-3 py-2 text-xs' : 'min-h-12 px-4 pt-3 pb-3 text-sm', showTopDismiss && 'pt-0', partial ? 'text-muted-foreground' : 'text-foreground'), children: [transcript, partial ? (_jsx("span", { "aria-hidden": true, className: "bg-primary ml-0.5 inline-block h-[1em] w-0.5 -translate-y-px align-middle motion-safe:animate-pulse" })) : null] })) : null, _jsxs("div", { className: cn('border-border/70 relative flex min-w-0 items-center border-t', compact ? 'min-h-8 gap-1.5 px-2 py-1' : 'min-h-10 gap-2 px-3 py-2', transcript == null && !showTopDismiss && 'border-t-0'), children: [_jsx("span", { role: "img", "aria-label": applicationName, className: cn('border-border bg-muted inline-flex shrink-0 items-center justify-center overflow-hidden rounded-md border shadow-sm', compact ? 'size-6' : 'size-7'), children: applicationIcon }), onCancel && state === 'recording' ? (_jsxs(Button, { type: "button", variant: "ghost", size: compact ? 'xs' : 'sm', onClick: onCancel, children: [_jsx(X, { className: "size-3.5", strokeWidth: 1.5, "aria-hidden": true }), labels.cancel] })) : null, _jsx(VoiceLine, { state: resolvedVoiceState, layout: "waveform", analyser: analyser, active: active, micLevel: micLevel, bars: resolvedVoiceState === 'speaking' ? SPEAKING_BAR_COUNT : undefined, "aria-label": statusLabel, loadingVisualization: state === 'processing' ? 'shimmer-bars' : 'ripple', className: "absolute left-1/2 w-1/3 min-w-16 -translate-x-1/2 border-0 bg-transparent px-0 shadow-none ring-0" }), actionLabel && !['recording', 'processing', 'preflight', 'completed'].includes(state) ? (_jsx("div", { className: "text-foreground max-w-32 min-w-0 truncate text-xs font-medium", children: actionLabel })) : null, _jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-1", children: [duration ? (_jsx("span", { role: "timer", className: cn('text-muted-foreground mr-1 shrink-0 font-mono tabular-nums', compact ? 'text-[10px]' : 'text-[11px]'), children: duration })) : null, onStop &&
+                                        (state === 'recording' || state === 'speaking' || state === 'agent-inline') ? (_jsxs(Button, { type: "button", variant: "outline", size: compact ? 'xs' : 'sm', onClick: onStop, children: [_jsx(Square, { className: "size-3", strokeWidth: 1.5, "aria-hidden": true }), labels.stop] })) : null, onUndo && state === 'cancelled' ? (_jsxs(Button, { type: "button", variant: "outline", size: compact ? 'xs' : 'sm', onClick: onUndo, children: [_jsx(RotateCcw, { className: "size-3.5", strokeWidth: 1.5, "aria-hidden": true }), labels.undo] })) : null, onRetry && state === 'error' ? (_jsxs(Button, { type: "button", variant: "outline", size: compact ? 'xs' : 'sm', onClick: onRetry, children: [_jsx(RotateCcw, { className: "size-3.5", strokeWidth: 1.5, "aria-hidden": true }), labels.retry] })) : null, showFooterDismiss ? (_jsx(IconButton, { type: "button", size: compact ? 'xs' : 'sm', tooltip: labels.dismiss, "aria-label": labels.dismiss, onClick: onDismiss, children: _jsx(X, { className: "size-4", strokeWidth: 1.5, "aria-hidden": true }) })) : null] })] })] })] }));
+}

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+export type UsageBarTone = 'usage' | 'warning' | 'danger';
+/**
+ * One place decides when a consumed quota stops being neutral and starts being a
+ * warning, so a five-hour window and a weekly one never disagree about what 92% means.
+ */
+export declare function usageTone(fraction: number): UsageBarTone;
+export interface UsageBarProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+    label: string;
+    /** Consumed share, 0–1. Values outside the range clamp rather than overflow the track. */
+    fraction: number;
+    /** Right-aligned readout — a percentage, "12k of 200k", whatever the caller measures in. */
+    value?: React.ReactNode;
+    caption?: React.ReactNode;
+    tone?: UsageBarTone;
+}
+export declare function UsageBar({ label, fraction, value, caption, tone, className, ...props }: UsageBarProps): React.JSX.Element;

package/dist/components/usage-bar.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../lib/cn.js';
+const TONE_FILL = {
+    usage: 'bg-usage',
+    warning: 'bg-warning-9',
+    danger: 'bg-danger-9',
+};
+/**
+ * One place decides when a consumed quota stops being neutral and starts being a
+ * warning, so a five-hour window and a weekly one never disagree about what 92% means.
+ */
+export function usageTone(fraction) {
+    if (fraction >= 0.9)
+        return 'danger';
+    if (fraction >= 0.75)
+        return 'warning';
+    return 'usage';
+}
+export function UsageBar({ label, fraction, value, caption, tone, className, ...props }) {
+    const clamped = Math.max(0, Math.min(1, Number.isFinite(fraction) ? fraction : 0));
+    const percent = Math.round(clamped * 100);
+    const resolvedTone = tone ?? usageTone(clamped);
+    return (_jsxs("div", { "data-slot": "usage-bar", "data-tone": resolvedTone, role: "meter", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": percent, "aria-label": label, className: cn('flex flex-col gap-1', className), ...props, children: [_jsxs("div", { className: "flex items-baseline justify-between gap-2 text-[11.5px]", children: [_jsx("span", { className: "text-muted-foreground min-w-0 truncate", children: label }), value ? (_jsx("span", { className: "text-muted-foreground shrink-0 font-mono tabular-nums", children: value })) : null] }), _jsx("div", { className: "bg-muted h-1 overflow-hidden rounded-full", "aria-hidden": true, children: _jsx("span", { className: cn('block h-full rounded-full transition-[width] duration-150 ease-[var(--ease-out-expo)] motion-reduce:transition-none', TONE_FILL[resolvedTone]), style: { width: `${percent}%` } }) }), caption ? (_jsx("p", { className: "text-muted-foreground/75 font-mono text-[10.5px]", children: caption })) : null] }));
+}

package/dist/components/view-query-bar.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps, ReactNode } from 'react';
+export interface ViewQueryBarProps extends Omit<ComponentProps<'div'>, 'children'> {
+    sort?: ReactNode;
+    /** Filter chips, one element per top-level clause. */
+    filters?: ReactNode[];
+    /** Trailing add-filter affordance. Shown only once the view already has a filter — with none, the view's own empty state offers the first one. */
+    addFilter?: ReactNode;
+}
+/**
+ * The row of active query pills a collection view shows under its header.
+ * Collapses to nothing while the view is unqueried so the list starts flush.
+ */
+export declare function ViewQueryBar({ sort, filters, addFilter, className, ...props }: ViewQueryBarProps): React.ReactElement | null;

package/dist/components/view-query-bar.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/cn.js';
+/**
+ * The row of active query pills a collection view shows under its header.
+ * Collapses to nothing while the view is unqueried so the list starts flush.
+ */
+export function ViewQueryBar({ sort, filters = [], addFilter, className, ...props }) {
+    const hasFilters = filters.length > 0;
+    if (!sort && !hasFilters)
+        return null;
+    return (_jsx("div", { "data-slot": "view-query-bar", className: cn('mx-auto w-full max-w-5xl shrink-0 px-6 pt-2 pb-1', className), ...props, children: _jsxs("div", { className: "flex min-h-7 flex-wrap items-center gap-1.5", children: [sort, filters, hasFilters ? addFilter : null] }) }));
+}