@medalsocial/meda 0.1.1 → 0.3.0

package/dist/timeline/index.js

@@ -0,0 +1,6 @@
+export { DateSwitcher } from './date-switcher.js';
+export { EventCard } from './event-card.js';
+export { LiveIndicator } from './live-indicator.js';
+export { ScrubBar } from './scrub-bar.js';
+export { TimelineRail } from './timeline-rail.js';
+export { TimelineTape } from './timeline-tape.js';

package/dist/timeline/live-indicator.d.ts

@@ -0,0 +1,7 @@
+export interface LiveIndicatorProps {
+    now: Date;
+    /** Optional IANA timezone for the displayed clock. */
+    tz?: string;
+    className?: string;
+}
+export declare function LiveIndicator({ now, tz, className }: LiveIndicatorProps): import("react/jsx-runtime").JSX.Element;

package/dist/timeline/live-indicator.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatClock } from '../lib/format-time.js';
+export function LiveIndicator({ now, tz, className }) {
+    return (_jsxs("div", { role: "status", "aria-live": "polite", className: ['relative h-0 pointer-events-none', className ?? ''].join(' '), children: [_jsx("span", { className: "pointer-events-auto absolute left-0 top-0 inline-flex items-center rounded-md bg-emerald-500 px-2.5 py-1 text-[11px] font-bold uppercase tracking-wider text-white shadow-[0_6px_18px_rgba(16,185,129,0.35)]", children: "LIVE" }), _jsx("span", { "aria-hidden": "true", className: "absolute right-0 top-1/2 left-[60px] h-px bg-gradient-to-r from-emerald-500 via-emerald-500/30 to-transparent" }), _jsx("span", { className: "absolute right-1.5 top-[-2px] text-[10px] font-semibold tabular-nums text-emerald-500", children: formatClock(now, { tz }) })] }));
+}

package/dist/timeline/public.d.ts

@@ -0,0 +1 @@
+export type { ScrubMark, TimelineEvent, TimelineEventKind } from './types.js';

package/dist/timeline/public.js

@@ -0,0 +1 @@
+export {};

package/dist/timeline/scrub-bar.d.ts

@@ -0,0 +1,14 @@
+import type { ScrubMark } from './types.js';
+export interface ScrubBarProps {
+    durationMs: number;
+    positionMs: number;
+    isLive?: boolean;
+    marks: ScrubMark[];
+    onSeek: (positionMs: number) => void;
+    isPlaying?: boolean;
+    onPlayPause?: () => void;
+    onSkipBack?: () => void;
+    onSkipForward?: () => void;
+    className?: string;
+}
+export declare function ScrubBar({ durationMs, positionMs, isLive, marks, onSeek, isPlaying, onPlayPause, onSkipBack, onSkipForward, className, }: ScrubBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/timeline/scrub-bar.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pause, Play, SkipBack, SkipForward } from 'lucide-react';
+import { useRef } from 'react';
+import { formatDuration } from '../lib/format-time.js';
+const KIND_COLOR = {
+    turn: 'bg-primary',
+    tool: 'bg-amber-500',
+    barge: 'bg-emerald-500',
+    error: 'bg-destructive',
+};
+export function ScrubBar({ durationMs, positionMs, isLive = false, marks, onSeek, isPlaying, onPlayPause, onSkipBack, onSkipForward, className, }) {
+    const trackRef = useRef(null);
+    const showPlayPause = isPlaying !== undefined;
+    const isPlayingValue = isPlaying ?? false;
+    const fillPct = durationMs > 0 ? Math.min(100, (positionMs / durationMs) * 100) : 0;
+    const handleSeek = (e) => {
+        const rect = trackRef.current?.getBoundingClientRect();
+        if (!rect || rect.width === 0)
+            return;
+        const x = e.clientX - rect.left;
+        const pct = Math.max(0, Math.min(1, x / rect.width));
+        onSeek(pct * durationMs);
+    };
+    const handleKeyDown = (e) => {
+        const step = durationMs / 100;
+        if (e.key === 'ArrowLeft') {
+            e.preventDefault();
+            onSeek(Math.max(0, positionMs - step));
+        }
+        else if (e.key === 'ArrowRight') {
+            e.preventDefault();
+            onSeek(Math.min(durationMs, positionMs + step));
+        }
+    };
+    return (_jsxs("div", { className: ['rounded-2xl border border-border bg-card p-3.5', className ?? ''].join(' '), children: [_jsxs("div", { className: "mb-2.5 flex items-center justify-between", children: [_jsx("span", { className: "text-[11px] font-semibold uppercase tracking-wider text-muted-foreground", children: "Timeline \u00B7 this call" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsxs("span", { className: "px-1.5 text-[11px] tabular-nums text-muted-foreground", children: [formatDuration(positionMs), isLive ? ' / live' : ` / ${formatDuration(durationMs)}`] }), onSkipBack && (_jsx(TransportBtn, { label: "Skip back", onClick: onSkipBack, children: _jsx(SkipBack, { className: "size-3.5" }) })), showPlayPause && (_jsx(TransportBtn, { label: isPlayingValue ? 'Pause' : 'Play', variant: "primary", onClick: onPlayPause ?? (() => { }), children: isPlayingValue ? _jsx(Pause, { className: "size-3.5" }) : _jsx(Play, { className: "size-3.5" }) })), onSkipForward && (_jsx(TransportBtn, { label: "Skip forward", onClick: onSkipForward, children: _jsx(SkipForward, { className: "size-3.5" }) }))] })] }), _jsxs("div", { ref: trackRef, role: "slider", "aria-label": "Conversation position", "aria-valuemin": 0, "aria-valuemax": durationMs, "aria-valuenow": positionMs, onClick: handleSeek, onKeyDown: handleKeyDown, tabIndex: 0, className: "relative h-8 cursor-pointer overflow-hidden rounded-md bg-muted focus:outline-none focus:ring-2 focus:ring-primary/50", children: [_jsx("span", { "aria-hidden": "true", className: "absolute inset-y-0 left-0 bg-primary/10", style: { width: `${fillPct}%` } }), marks.map((m) => (_jsx("span", { "data-mark-kind": m.kind, title: m.label ?? m.kind, className: ['absolute inset-y-1 w-0.5 rounded-sm', KIND_COLOR[m.kind]].join(' '), style: { left: `${m.positionPct}%` } }, m.id))), _jsx("span", { "aria-hidden": "true", className: "absolute -inset-y-0.5 w-0.5 bg-foreground", style: { left: `${fillPct}%` } })] }), _jsxs("div", { className: "flex justify-between pt-2 text-[10px] tabular-nums text-muted-foreground", children: [_jsx("span", { children: "0:00" }), _jsx("span", { children: isLive ? 'now' : formatDuration(durationMs) })] })] }));
+}
+function TransportBtn({ label, onClick, variant, children, }) {
+    return (_jsx("button", { type: "button", "aria-label": label, onClick: onClick, className: [
+            'inline-flex size-6 items-center justify-center rounded',
+            variant === 'primary'
+                ? 'bg-primary text-primary-foreground'
+                : 'text-muted-foreground hover:bg-muted hover:text-foreground',
+        ].join(' '), children: children }));
+}

package/dist/timeline/timeline-rail.d.ts

@@ -0,0 +1,19 @@
+import type { TimelineEvent } from './types.js';
+export interface TimelineRailProps {
+    date: Date;
+    now: Date;
+    events: TimelineEvent[];
+    /** px per second. Default 1.2 (72 px/min). */
+    zoom?: number;
+    /** When true (default), tape auto-scrolls to keep LIVE pinned. */
+    followLive?: boolean;
+    tz?: string;
+    onZoomChange?: (px: number) => void;
+    onDateChange?: (next: Date) => void;
+    onSelect?: (event: TimelineEvent) => void;
+    onFollowChange?: (following: boolean) => void;
+    /** Click target on the "Manage retention" footer. */
+    onManageRetention?: () => void;
+    className?: string;
+}
+export declare function TimelineRail({ date, now, events, zoom, followLive, tz, onZoomChange, onDateChange, onSelect, onFollowChange, onManageRetention, className, }: TimelineRailProps): import("react/jsx-runtime").JSX.Element;

package/dist/timeline/timeline-rail.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Archive } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { DateSwitcher } from './date-switcher.js';
+import { LiveIndicator } from './live-indicator.js';
+import { TimelineTape } from './timeline-tape.js';
+const FUTURE_PAD_SEC = 300;
+const PAST_SPAN_SEC = 6 * 60 * 60;
+const STICKY_TOP_PX = 12;
+export function TimelineRail({ date, now, events, zoom = 1.2, followLive = true, tz, onZoomChange, onDateChange, onSelect, onFollowChange, onManageRetention, className, }) {
+    const scrollRef = useRef(null);
+    const [isFollowing, setIsFollowing] = useState(followLive);
+    // Mirror parent prop changes into local state so a controlled toggle of
+    // `followLive` from outside actually flips auto-follow.
+    useEffect(() => {
+        setIsFollowing(followLive);
+    }, [followLive]);
+    const liveCount = useMemo(() => events.filter((e) => e.isLive).length, [events]);
+    const totalCalls = useMemo(() => events.filter((e) => e.kind === 'session').length, [events]);
+    // NOW y inside the tape canvas
+    const nowY = FUTURE_PAD_SEC * zoom;
+    // Keep LIVE pinned by auto-scrolling when isFollowing
+    useEffect(() => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        if (isFollowing) {
+            el.scrollTop = nowY - STICKY_TOP_PX;
+        }
+    }, [isFollowing, nowY]);
+    // Detect manual scroll-away → flip off auto-follow
+    useEffect(() => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        const onScroll = () => {
+            if (!el)
+                return;
+            const expected = nowY - STICKY_TOP_PX;
+            const drift = Math.abs(el.scrollTop - expected);
+            if (drift > 32 && isFollowing) {
+                setIsFollowing(false);
+                onFollowChange?.(false);
+            }
+        };
+        el.addEventListener('scroll', onScroll, { passive: true });
+        return () => el.removeEventListener('scroll', onScroll);
+    }, [nowY, isFollowing, onFollowChange]);
+    const jumpToLive = () => {
+        setIsFollowing(true);
+        onFollowChange?.(true);
+    };
+    return (_jsxs("aside", { className: [
+            'relative flex h-full flex-col border-r border-border bg-card text-sm',
+            className ?? '',
+        ].join(' '), "data-meda-component": "timeline-rail", children: [_jsx("div", { className: "px-3.5 pb-2.5 pt-3.5", children: _jsx(DateSwitcher, { value: date, now: now, tz: tz, onChange: (d) => onDateChange?.(d) }) }), _jsxs("div", { className: "flex items-center gap-2.5 px-3.5 pb-3", children: [_jsx(ZoomBtn, { label: "\u2212", onClick: () => onZoomChange?.(Math.max(0.2, zoom - 0.4)) }), _jsx(ZoomTrack, { value: zoom, min: 0.2, max: 6 }), _jsx(ZoomBtn, { label: "+", onClick: () => onZoomChange?.(Math.min(6, zoom + 0.4)) })] }), _jsxs("div", { className: "flex items-center gap-2 border-b border-border px-3.5 pb-2.5 text-[11px] tabular-nums text-muted-foreground", children: [liveCount > 0 && (_jsxs("span", { className: "inline-flex items-center gap-1.5 font-semibold text-emerald-500", children: [_jsx("span", { className: "size-1.5 animate-pulse rounded-full bg-emerald-500 shadow-[0_0_0_3px_rgba(16,185,129,0.18)]" }), liveCount, " live"] })), _jsxs("span", { className: "ml-auto", children: [_jsx("strong", { className: "font-semibold text-foreground", children: totalCalls }), " sessions"] })] }), _jsxs("div", { ref: scrollRef, className: "relative flex-1 overflow-y-auto overflow-x-hidden pb-16", children: [_jsx("div", { className: "sticky top-3 z-10 mx-3.5", children: _jsx(LiveIndicator, { now: now, tz: tz }) }), _jsx(TimelineTape, { now: now, events: events, pxPerSec: zoom, futurePadSec: FUTURE_PAD_SEC, pastSpanSec: PAST_SPAN_SEC, tz: tz, onSelect: onSelect })] }), !isFollowing && (_jsx("button", { type: "button", onClick: jumpToLive, className: "absolute right-3 top-32 z-20 inline-flex items-center gap-1.5 rounded-full bg-emerald-500 px-3 py-1 text-[11px] font-semibold text-white shadow-md hover:bg-emerald-600", children: "Jump to live" })), _jsxs("button", { type: "button", onClick: () => onManageRetention?.(), className: "absolute inset-x-0 bottom-0 z-20 flex items-center justify-center gap-1.5 bg-gradient-to-t from-card via-card/85 to-transparent px-3.5 py-2.5 text-[12px] text-primary hover:text-primary/80", children: [_jsx(Archive, { className: "size-3.5" }), " Manage retention"] })] }));
+}
+function ZoomBtn({ label, onClick }) {
+    return (_jsx("button", { type: "button", onClick: onClick, className: "inline-flex size-5 items-center justify-center rounded bg-muted text-sm leading-none text-muted-foreground hover:text-foreground", children: label }));
+}
+function ZoomTrack({ value, min, max }) {
+    const pct = Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100));
+    return (_jsx("div", { tabIndex: 0, role: "slider", "aria-label": "Zoom", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, className: "relative h-1 flex-1 rounded-sm bg-muted", children: _jsx("span", { className: "absolute -top-[3px] size-2.5 -translate-x-1/2 rounded-full bg-primary shadow-[0_0_0_4px_rgba(137,117,255,0.18)]", style: { left: `${pct}%` } }) }));
+}

package/dist/timeline/timeline-tape.d.ts

@@ -0,0 +1,19 @@
+import type { TimelineEvent } from './types.js';
+export interface TimelineTapeProps {
+    /** "Now" reference; canvas top represents `now + futurePadSec`. */
+    now: Date;
+    /** Event list. Order doesn't matter — placement uses startedAt. */
+    events: TimelineEvent[];
+    /** px per second of vertical scroll. Default 1.2 = 72 px/min. */
+    pxPerSec?: number;
+    /** Seconds of "future" rendered above NOW. Default 300 (5 min). */
+    futurePadSec?: number;
+    /** Total seconds visible past NOW (governs canvas height). Default 6h. */
+    pastSpanSec?: number;
+    /** Timezone for tick labels (caller's local tz by default). */
+    tz?: string;
+    /** Selection callback. */
+    onSelect?: (event: TimelineEvent) => void;
+    className?: string;
+}
+export declare function TimelineTape({ now, events, pxPerSec, futurePadSec, pastSpanSec, tz, onSelect, className, }: TimelineTapeProps): import("react/jsx-runtime").JSX.Element;

package/dist/timeline/timeline-tape.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatClock } from '../lib/format-time.js';
+import { EventCard } from './event-card.js';
+const DEFAULT_PX_PER_SEC = 1.2;
+const DEFAULT_FUTURE_PAD_SEC = 300;
+const DEFAULT_PAST_SPAN_SEC = 6 * 60 * 60;
+/** Convert a unix-ms instant to canvas y (px). y=0 at canvas top. */
+function instantToY(instantMs, nowMs, pxPerSec, futurePadSec) {
+    const secsAfterNow = (instantMs - nowMs) / 1000;
+    // future is above now → smaller y. past is below now → larger y.
+    return (futurePadSec - secsAfterNow) * pxPerSec;
+}
+export function TimelineTape({ now, events, pxPerSec = DEFAULT_PX_PER_SEC, futurePadSec = DEFAULT_FUTURE_PAD_SEC, pastSpanSec = DEFAULT_PAST_SPAN_SEC, tz, onSelect, className, }) {
+    const nowMs = now.getTime();
+    const totalSec = futurePadSec + pastSpanSec;
+    const canvasHeight = totalSec * pxPerSec;
+    const nowY = instantToY(nowMs, nowMs, pxPerSec, futurePadSec);
+    // Compute tick positions at minute boundaries. Start from the future edge, go down.
+    const ticks = [];
+    const futureEdgeMs = nowMs + futurePadSec * 1000;
+    const pastEdgeMs = nowMs - pastSpanSec * 1000;
+    const firstTick = new Date(futureEdgeMs);
+    firstTick.setSeconds(0, 0);
+    for (let t = firstTick.getTime(); t >= pastEdgeMs; t -= 60_000) {
+        const y = instantToY(t, nowMs, pxPerSec, futurePadSec);
+        if (y < 0 || y > canvasHeight)
+            continue;
+        ticks.push({
+            y,
+            label: formatClock(new Date(t), { tz, withSeconds: false }),
+            major: true,
+        });
+        // 5 sub-ticks every 10s under each major
+        for (let sub = 1; sub <= 5; sub++) {
+            const subT = t - sub * 10_000;
+            if (subT < pastEdgeMs)
+                break;
+            const subY = instantToY(subT, nowMs, pxPerSec, futurePadSec);
+            ticks.push({ y: subY, label: '', major: false });
+        }
+    }
+    // Build tape segments + cards
+    const segments = events
+        .filter((e) => e.kind === 'session' || e.kind === 'error')
+        .map((e) => {
+        const startY = instantToY(e.startedAt, nowMs, pxPerSec, futurePadSec);
+        const endInstant = e.endedAt ?? (e.isLive ? nowMs : e.startedAt + 1000);
+        const endY = instantToY(endInstant, nowMs, pxPerSec, futurePadSec);
+        // "Top" of the segment is the more recent (smaller y).
+        const top = Math.min(startY, endY);
+        const height = Math.max(2, Math.abs(endY - startY));
+        return { event: e, top, height };
+    });
+    return (_jsxs("div", { className: ['relative ml-3.5 mr-3', className ?? ''].join(' '), style: { height: `${canvasHeight}px` }, "data-canvas-height": canvasHeight, children: [ticks.map((t) => t.major ? (_jsxs("div", { children: [_jsx("span", { className: "absolute left-0 w-[30px] -translate-y-[7px] text-right text-[11px] font-medium tabular-nums text-muted-foreground", style: { top: `${t.y}px` }, children: t.label }), _jsx("span", { className: "absolute h-px w-2 bg-border", style: { left: 32, top: `${t.y}px` } })] }, `maj-${t.y}`)) : (_jsx("span", { className: "absolute h-px w-1.5 bg-border/40", style: { left: 35, top: `${t.y}px` } }, `min-${t.y}`))), segments.map(({ event, top, height }) => (_jsx("span", { "aria-hidden": "true", "data-tape-segment-id": event.id, "data-tape-segment-live": String(event.isLive ?? false), className: [
+                    'absolute w-1 rounded-sm',
+                    event.isLive
+                        ? 'bg-emerald-500 shadow-[0_0_12px_rgba(16,185,129,0.5)]'
+                        : event.kind === 'error'
+                            ? 'bg-destructive'
+                            : 'bg-sky-400 shadow-[0_0_8px_rgba(56,189,248,0.35)]',
+                ].join(' '), style: { left: 44, top: `${top}px`, height: `${height}px` } }, `seg-${event.id}`))), events.map((event) => {
+                const startY = instantToY(event.startedAt, nowMs, pxPerSec, futurePadSec);
+                const isSubEvent = event.kind === 'sub-event';
+                return (_jsx("div", { "data-event-id": event.id, className: "absolute", style: { top: `${startY}px`, left: 56, right: 0 }, children: _jsx(EventCard, { event: event, size: isSubEvent ? 'tiny' : 'default', onSelect: onSelect }) }, event.id));
+            }), _jsx("span", { "aria-hidden": "true", "data-now-y": nowY, className: "absolute", style: { top: `${nowY}px`, left: 0, width: 0, height: 0 } })] }));
+}

package/dist/timeline/types.d.ts

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+/** What kind of timeline entry this is. */
+export type TimelineEventKind = 'session' | 'sub-event' | 'scheduled' | 'error';
+/**
+ * Generic timeline entry. Apps map their domain (a phone call, a chat session, a workflow run)
+ * onto this shape and pass an array to <TimelineRail/>.
+ */
+export interface TimelineEvent {
+    /** Stable identifier across re-renders. */
+    id: string;
+    /** Unix ms — when the event began. */
+    startedAt: number;
+    /** Unix ms — when the event ended. Omit for live or instantaneous events. */
+    endedAt?: number;
+    /** Coarse category — drives default styling. */
+    kind: TimelineEventKind;
+    /** Optional narrower tag for app-specific styling, e.g. "tool-call", "barge-in". */
+    variant?: string;
+    /** Card primary line content (typically a name). */
+    primary?: ReactNode;
+    /** Card secondary line content (typically meta — counts, cost). */
+    secondary?: ReactNode;
+    /** Highlight as currently selected. */
+    selected?: boolean;
+    /** Render with the live treatment (green pulse, etc). */
+    isLive?: boolean;
+    /**
+     * Optional override for the tape segment color expressed as a CSS color value.
+     * Defaults derived from kind + isLive + variant.
+     */
+    fillColor?: string;
+}
+/** Marks rendered along the per-conversation <ScrubBar/>. */
+export interface ScrubMark {
+    id: string;
+    /** Position along the bar, 0..100. */
+    positionPct: number;
+    kind: 'turn' | 'tool' | 'barge' | 'error';
+    label?: string;
+}

package/dist/timeline/types.js

@@ -0,0 +1 @@
+export {};

package/dist/voice/index.d.ts

@@ -0,0 +1,9 @@
+export type { MicState, PcmFrame, TurnPhase } from './types.js';
+export type { UseMicCaptureOptions, UseMicCaptureReturn } from './use-mic-capture.js';
+export { useMicCapture } from './use-mic-capture.js';
+export type { VoiceLevelProps } from './voice-level.js';
+export { VoiceLevel } from './voice-level.js';
+export type { VoiceOrbProps, VoiceOrbVariant } from './voice-orb.js';
+export { VoiceOrb } from './voice-orb.js';
+export type { VoiceStatusPillProps } from './voice-status-pill.js';
+export { VoiceStatusPill } from './voice-status-pill.js';

package/dist/voice/index.js

@@ -0,0 +1,4 @@
+export { useMicCapture } from './use-mic-capture.js';
+export { VoiceLevel } from './voice-level.js';
+export { VoiceOrb } from './voice-orb.js';
+export { VoiceStatusPill } from './voice-status-pill.js';

package/dist/voice/public.d.ts

@@ -0,0 +1 @@
+export * from './index.js';

package/dist/voice/public.js

@@ -0,0 +1 @@
+export * from './index.js';

package/dist/voice/types.d.ts

@@ -0,0 +1,8 @@
+export type MicState = 'idle' | 'requesting' | 'denied' | 'ready' | 'capturing';
+export type TurnPhase = 'idle' | 'listening' | 'thinking' | 'speaking' | 'error';
+export interface PcmFrame {
+    /** Int16 PCM at 16kHz mono, typically 20ms = 320 samples = 640 bytes. */
+    pcm: ArrayBuffer;
+    /** Voice activity proxy from RMS, 0..1. */
+    level: number;
+}

package/dist/voice/types.js

@@ -0,0 +1 @@
+export {};

package/dist/voice/use-mic-capture.d.ts

@@ -0,0 +1,14 @@
+import type { MicState, PcmFrame } from './types.js';
+export interface UseMicCaptureOptions {
+    autoStart?: boolean;
+    onFrame?: (frame: PcmFrame) => void;
+    audioConstraints?: MediaTrackConstraints;
+}
+export interface UseMicCaptureReturn {
+    state: MicState;
+    level: number;
+    error: Error | null;
+    start: () => Promise<void>;
+    stop: () => void;
+}
+export declare function useMicCapture(opts?: UseMicCaptureOptions): UseMicCaptureReturn;

package/dist/voice/use-mic-capture.js

@@ -0,0 +1,185 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+const WORKLET_CODE = `
+const TARGET_RATE = 16000;
+const FRAME_SAMPLES = 320;
+
+class MicCapture extends AudioWorkletProcessor {
+  constructor() {
+    super();
+    this.inputRate = sampleRate;
+    this.ratio = this.inputRate / TARGET_RATE;
+    this.buffer = [];
+    // Persist the fractional resampling offset across process() callbacks so
+    // non-integer ratios (e.g. 44.1kHz→16kHz) don't accumulate ~1% drift.
+    this.resampleOffset = 0;
+  }
+  resampleAndAppend(input) {
+    let i = this.resampleOffset;
+    while (i < input.length) {
+      this.buffer.push(input[Math.floor(i)]);
+      i += this.ratio;
+    }
+    // Carry the fractional part forward into the next callback.
+    this.resampleOffset = i - input.length;
+  }
+  process(inputs) {
+    const ch = inputs[0]?.[0];
+    if (!ch) return true;
+    this.resampleAndAppend(ch);
+    while (this.buffer.length >= FRAME_SAMPLES) {
+      const frame = this.buffer.slice(0, FRAME_SAMPLES);
+      this.buffer = this.buffer.slice(FRAME_SAMPLES);
+      const pcm = new Int16Array(FRAME_SAMPLES);
+      let sumSq = 0;
+      for (let j = 0; j < FRAME_SAMPLES; j++) {
+        const s = Math.max(-1, Math.min(1, frame[j]));
+        pcm[j] = (s * 0x7fff) | 0;
+        sumSq += s * s;
+      }
+      const rms = Math.sqrt(sumSq / FRAME_SAMPLES);
+      this.port.postMessage({ pcm: pcm.buffer, level: rms }, [pcm.buffer]);
+    }
+    return true;
+  }
+}
+registerProcessor('meda-mic-capture', MicCapture);
+`;
+export function useMicCapture(opts = {}) {
+    const [state, setState] = useState('idle');
+    const [level, setLevel] = useState(0);
+    const [error, setError] = useState(null);
+    const ctxRef = useRef(null);
+    const streamRef = useRef(null);
+    const nodeRef = useRef(null);
+    const onFrameRef = useRef(opts.onFrame);
+    onFrameRef.current = opts.onFrame;
+    // Generation token: incremented on every start/stop so an in-flight start()
+    // can detect that a newer call has superseded it and bail out.
+    const genRef = useRef(0);
+    const stop = useCallback(() => {
+        genRef.current += 1;
+        nodeRef.current?.disconnect();
+        nodeRef.current = null;
+        streamRef.current?.getTracks().forEach((t) => {
+            t.stop();
+        });
+        streamRef.current = null;
+        void ctxRef.current?.close();
+        ctxRef.current = null;
+        setState('idle');
+        setLevel(0);
+    }, []);
+    const start = useCallback(async () => {
+        // Bug 5 fix: tear down any existing capture before starting a new one so
+        // we don't orphan the previous stream/context.
+        if (ctxRef.current ?? streamRef.current) {
+            stop();
+        }
+        // Grab the current generation so we can detect if stop() (or a second
+        // start()) is called while we are awaiting getUserMedia / addModule.
+        genRef.current += 1;
+        const gen = genRef.current;
+        setState('requesting');
+        setError(null);
+        // Helper for the stale-generation early-return paths (after addModule):
+        // releases resources acquired by this invocation without touching refs
+        // that may already belong to a superseding start().
+        const cleanupRefs = (stream, ctx) => {
+            stream?.getTracks().forEach((t) => {
+                t.stop();
+            });
+            void ctx?.close();
+            // Clear refs only if this generation still owns them (a superseding
+            // start() may have already set new refs).
+            if (genRef.current === gen) {
+                if (streamRef.current === stream)
+                    streamRef.current = null;
+                if (ctxRef.current === ctx)
+                    ctxRef.current = null;
+                nodeRef.current = null;
+            }
+        };
+        // Track resources acquired by THIS invocation so the catch block can
+        // release exactly what we opened — not whatever a newer start() may have
+        // placed in the shared refs.
+        let acquiredStream = null;
+        let acquiredCtx = null;
+        try {
+            acquiredStream = await navigator.mediaDevices.getUserMedia({
+                audio: opts.audioConstraints ?? {
+                    echoCancellation: true,
+                    noiseSuppression: true,
+                    autoGainControl: true,
+                },
+            });
+            // If stop() fired while we were awaiting getUserMedia a newer generation
+            // is active — release the stream we just acquired and bail out.
+            if (genRef.current !== gen) {
+                acquiredStream.getTracks().forEach((t) => {
+                    t.stop();
+                });
+                return;
+            }
+            streamRef.current = acquiredStream;
+            acquiredCtx = new AudioContext();
+            ctxRef.current = acquiredCtx;
+            const blob = new Blob([WORKLET_CODE], { type: 'application/javascript' });
+            const url = URL.createObjectURL(blob);
+            try {
+                await acquiredCtx.audioWorklet.addModule(url);
+            }
+            finally {
+                URL.revokeObjectURL(url);
+            }
+            // Check again after the async addModule call.
+            if (genRef.current !== gen) {
+                cleanupRefs(acquiredStream, acquiredCtx);
+                return;
+            }
+            const node = new AudioWorkletNode(acquiredCtx, 'meda-mic-capture');
+            nodeRef.current = node;
+            node.port.onmessage = (e) => {
+                const msg = e.data;
+                setLevel(msg.level);
+                onFrameRef.current?.({ pcm: msg.pcm, level: msg.level });
+            };
+            const src = acquiredCtx.createMediaStreamSource(acquiredStream);
+            src.connect(node);
+            // Web Audio graphs only run when connected to a destination. The
+            // worklet's process() callback is never invoked otherwise — no PCM
+            // frames, no level updates. Route through a 0-gain node so we don't
+            // produce audible feedback from the user's own mic.
+            const silent = acquiredCtx.createGain();
+            silent.gain.value = 0;
+            node.connect(silent);
+            silent.connect(acquiredCtx.destination);
+            setState('capturing');
+        }
+        catch (err) {
+            // Release only the resources THIS start() acquired. Reading from refs
+            // here would be unsafe — a superseding start() may have already stored
+            // its own resources there.
+            acquiredStream?.getTracks().forEach((t) => {
+                t.stop();
+            });
+            void acquiredCtx?.close();
+            if (genRef.current === gen) {
+                if (streamRef.current === acquiredStream)
+                    streamRef.current = null;
+                if (ctxRef.current === acquiredCtx)
+                    ctxRef.current = null;
+                nodeRef.current = null;
+                const e = err;
+                setError(e);
+                setState(e.name === 'NotAllowedError' ? 'denied' : 'idle');
+            }
+        }
+    }, [opts.audioConstraints, stop]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: intentionally empty - should only run on mount
+    useEffect(() => {
+        if (opts.autoStart)
+            void start();
+        return stop;
+    }, []);
+    return { state, level, error, start, stop };
+}

package/dist/voice/voice-level.d.ts

@@ -0,0 +1,8 @@
+export interface VoiceLevelProps {
+    level: number;
+    variant?: 'bars' | 'wave' | 'ring';
+    width?: number;
+    height?: number;
+    className?: string;
+}
+export declare function VoiceLevel({ level, variant, width, height, className, }: VoiceLevelProps): import("react/jsx-runtime").JSX.Element;

package/dist/voice/voice-level.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+const BAR_COUNT = 9;
+export function VoiceLevel({ level, variant = 'bars', width = 140, height = 48, className, }) {
+    const historyRef = React.useRef(Array(BAR_COUNT).fill(0));
+    const [, force] = React.useState(0);
+    // Only the 'bars' variant reads historyRef, so gate history updates and the
+    // resulting forced rerender to that variant — avoids a superfluous render on
+    // every level tick for 'ring' and 'wave'.
+    React.useEffect(() => {
+        if (variant !== 'bars')
+            return;
+        historyRef.current = [...historyRef.current.slice(1), Math.min(1, Math.max(0, level))];
+        force((v) => v + 1);
+    }, [level, variant]);
+    if (variant === 'bars') {
+        return (_jsx("div", { role: "presentation", className: ['flex items-end gap-1', className ?? ''].join(' '), style: { width, height }, children: historyRef.current.map((v, i) => (_jsx("span", { className: "flex-1 rounded-sm bg-primary", style: { height: `${15 + v * 85}%`, opacity: 0.4 + v * 0.6 } }, i))) }));
+    }
+    if (variant === 'ring') {
+        const r = Math.min(width, height) / 2 - 4;
+        const c = 2 * Math.PI * r;
+        const filled = c * Math.min(1, Math.max(0, level));
+        return (_jsxs("svg", { width: width, height: height, className: className, role: "presentation", children: [_jsx("circle", { cx: width / 2, cy: height / 2, r: r, stroke: "hsl(var(--border))", strokeWidth: "3", fill: "none" }), _jsx("circle", { cx: width / 2, cy: height / 2, r: r, stroke: "hsl(var(--primary))", strokeWidth: "3", fill: "none", strokeDasharray: `${filled} ${c}`, strokeLinecap: "round", transform: `rotate(-90 ${width / 2} ${height / 2})` })] }));
+    }
+    // 'wave' — simple bezier that scales with level
+    const peak = height / 2 - 2;
+    const amp = peak * Math.min(1, Math.max(0, level));
+    return (_jsx("svg", { width: width, height: height, className: className, role: "presentation", children: _jsx("path", { d: `M 0 ${height / 2} Q ${width / 4} ${height / 2 - amp}, ${width / 2} ${height / 2} T ${width} ${height / 2}`, stroke: "hsl(var(--primary))", strokeWidth: "2", fill: "none" }) }));
+}

package/dist/voice/voice-orb-scene.d.ts

@@ -0,0 +1,12 @@
+import type { TurnPhase } from './types.js';
+export type VoiceOrbVariant = 'metal' | 'aurora';
+export interface SceneProps {
+    level?: number;
+    outputLevel?: number;
+    phase?: TurnPhase;
+    colors: [string, string];
+    reducedMotion?: boolean;
+    pressed?: boolean;
+    variant?: VoiceOrbVariant;
+}
+export declare function Scene({ level, outputLevel, phase, colors, reducedMotion, pressed, variant, }: SceneProps): import("react/jsx-runtime").JSX.Element;