@medalsocial/meda 0.1.1 → 0.2.0

package/README.md

@@ -56,12 +56,17 @@ See the [demo app](./demo) for a live playground.
 
 ## Alternative: shadcn registry
 
-Prefer to copy source into your project instead of installing? The shadcn-compatible registry lives at [`./registry`](./registry). Serve it statically and run:
+Prefer to copy source into your project instead of installing? The shadcn-compatible registry is served alongside the demo playground on Cloudflare Workers.
 
 ```bash
-npx shadcn add <registry-url>/r/meda-shell.json
+# Once DNS for meda.medalsocial.com is live:
+npx shadcn add https://meda.medalsocial.com/r/meda-shell.json
+npx shadcn add https://meda.medalsocial.com/r/meda-shell-state.json
+npx shadcn add https://meda.medalsocial.com/r/meda-workbench-layout.json
 ```
 
+The registry index is at `https://meda.medalsocial.com/registry.json`. Source JSON files live under [`./registry`](./registry) in this repo and are deployed as static assets via Cloudflare Workers — see `wrangler.toml` and `.github/workflows/deploy-worker.yml`.
+
 ## Development
 
 ```bash

package/dist/styles.css

@@ -2,3 +2,25 @@
   --meda-shell-panel-dock-radius: var(--radius-4xl, 1.5rem);
   --meda-shell-panel-dock-shadow: var(--shadow-panel-elevated, 0 32px 90px rgb(0 0 0 / 0.45));
 }
+
+/* VoiceOrb (WebGL): minimal container styles — visual identity lives in the GLSL shader. */
+.meda-voice-orb {
+  background: transparent;
+  border: 0;
+  padding: 0;
+  isolation: isolate;
+  overflow: hidden;
+  border-radius: 9999px;
+  cursor: pointer;
+  position: relative;
+}
+.meda-voice-orb[disabled] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.meda-voice-orb canvas {
+  display: block;
+  width: 100% !important;
+  height: 100% !important;
+  pointer-events: none;
+}

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;

package/dist/voice/voice-orb-scene.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// SPDX-License-Identifier: Apache-2.0
+// Portions adapted from ElevenLabs UI's Orb component (MIT):
+// https://github.com/elevenlabs/ui/blob/main/apps/www/registry/elevenlabs-ui/ui/orb.tsx
+// Copyright (c) ElevenLabs Inc.
+// Adaptations: Meda token-driven theming, 5-phase state model, outputLevel uniform,
+// procedural simplex noise (no texture asset required).
+import { useFrame } from '@react-three/fiber';
+import * as React from 'react';
+import * as THREE from 'three';
+import { FRAGMENT_SHADER, VERTEX_SHADER } from './voice-orb-shader.js';
+import { createVolumeSmoother } from './voice-orb-volume.js';
+// Maps phase name to numeric target for uPhaseT
+const PHASE_TARGET = {
+    idle: 0,
+    listening: 1,
+    thinking: 2,
+    speaking: 3,
+    error: 4,
+};
+// splitmix32 — fast deterministic PRNG seeded at mount
+function splitmix32(seed) {
+    let a = seed;
+    return () => {
+        a = (a + 0x9e3779b9) | 0;
+        let t = a ^ (a >>> 16);
+        t = Math.imul(t, 0x21f0aaad);
+        t = t ^ (t >>> 15);
+        t = Math.imul(t, 0x735a2d97);
+        t = t ^ (t >>> 15);
+        return (t >>> 0) / 4294967296;
+    };
+}
+export function Scene({ level = 0, outputLevel = 0, phase = 'idle', colors, reducedMotion = false, pressed = false, variant = 'aurora', }) {
+    const meshRef = React.useRef(null);
+    // Smoothers for audio signals
+    const inputSmoother = React.useRef(createVolumeSmoother());
+    const outputSmoother = React.useRef(createVolumeSmoother());
+    // Transition state refs (avoid re-renders)
+    const phaseTRef = React.useRef(PHASE_TARGET[phase]);
+    const errorFlashRef = React.useRef(0);
+    const pressedRef = React.useRef(pressed ? 1 : 0);
+    const prevPhaseRef = React.useRef(phase);
+    // Color targets
+    const colorARef = React.useRef(new THREE.Color(colors[0]));
+    const colorBRef = React.useRef(new THREE.Color(colors[1]));
+    // Sync latest prop values to refs
+    React.useEffect(() => {
+        colorARef.current.set(colors[0]);
+        colorBRef.current.set(colors[1]);
+    }, [colors]);
+    React.useEffect(() => {
+        // Trigger error flash envelope when entering error phase
+        if (phase === 'error' && prevPhaseRef.current !== 'error') {
+            errorFlashRef.current = 1;
+        }
+        prevPhaseRef.current = phase;
+    }, [phase]);
+    // Random offsets for the 7 oval blobs (seeded once at mount)
+    const offsets = React.useMemo(() => {
+        const rng = splitmix32(Math.floor(Math.random() * 2 ** 32));
+        return new Float32Array(Array.from({ length: 7 }, () => rng() * Math.PI * 2));
+    }, []);
+    // Build uniforms once — intentionally empty dep array; all values are mutated
+    // in useFrame each tick. Initial values come from props captured at mount.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: uniform object is mutated in useFrame; re-creating it would reset animation state
+    const uniforms = React.useMemo(() => ({
+        uTime: { value: 0 },
+        uAnimation: { value: 0.1 },
+        uInputVolume: { value: 0 },
+        uOutputVolume: { value: 0 },
+        uColorA: new THREE.Uniform(new THREE.Color(colors[0])),
+        uColorB: new THREE.Uniform(new THREE.Color(colors[1])),
+        uPhaseT: { value: PHASE_TARGET[phase] },
+        uErrorFlash: { value: 0 },
+        uPressed: { value: 0 },
+        uOpacity: { value: 0 },
+        uOffsets: { value: offsets },
+        uVariant: { value: variant === 'aurora' ? 1 : 0 },
+    }), [] // intentionally empty — uniforms are mutated in useFrame
+    );
+    useFrame((_, delta) => {
+        const mat = meshRef.current?.material;
+        if (!mat)
+            return;
+        const u = mat.uniforms;
+        // Fade in on first render
+        if (u.uOpacity.value < 1) {
+            u.uOpacity.value = Math.min(1, u.uOpacity.value + delta * 2);
+        }
+        // Time & animation — frozen under reduced motion
+        if (!reducedMotion) {
+            u.uTime.value += delta * 0.5;
+            u.uAnimation.value += delta * (0.1 + (1 - (u.uOutputVolume.value - 1) ** 2) * 0.9);
+        }
+        // Smooth audio signals; clamp to 0 under reduced motion
+        inputSmoother.current.update(reducedMotion ? 0 : Math.min(1, Math.max(0, level)));
+        outputSmoother.current.update(reducedMotion ? 0 : Math.min(1, Math.max(0, outputLevel)));
+        u.uInputVolume.value = inputSmoother.current.value;
+        u.uOutputVolume.value = outputSmoother.current.value;
+        // Phase interpolation — 220ms transition
+        const phaseTarget = PHASE_TARGET[phase];
+        phaseTRef.current += (phaseTarget - phaseTRef.current) * Math.min(1, delta / 0.22);
+        u.uPhaseT.value = phaseTRef.current;
+        // Error flash decay over ~1.5s
+        if (errorFlashRef.current > 0) {
+            errorFlashRef.current = Math.max(0, errorFlashRef.current - delta / 1.5);
+            u.uErrorFlash.value = errorFlashRef.current;
+        }
+        // Press envelope
+        const pressTarget = pressed ? 1 : 0;
+        pressedRef.current += (pressTarget - pressedRef.current) * Math.min(1, delta / 0.1);
+        u.uPressed.value = pressedRef.current;
+        // Color lerp
+        u.uColorA.value.lerp(colorARef.current, 0.08);
+        u.uColorB.value.lerp(colorBRef.current, 0.08);
+        // Variant — switched live (no animation; consumer changes are instant)
+        u.uVariant.value = variant === 'aurora' ? 1 : 0;
+    });
+    return (_jsxs("mesh", { ref: meshRef, children: [_jsx("circleGeometry", { args: [3.5, 64] }), _jsx("shaderMaterial", { uniforms: uniforms, vertexShader: VERTEX_SHADER, fragmentShader: FRAGMENT_SHADER, transparent: true })] }));
+}

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

@@ -0,0 +1,2 @@
+export declare const VERTEX_SHADER = "\nuniform float uTime;\nvarying vec2 vUv;\n\nvoid main() {\n  vUv = uv;\n  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}\n";
+export declare const FRAGMENT_SHADER = "\n\nvec3 mod289_3(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nvec4 mod289_4(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nvec4 permute(vec4 x) { return mod289_4(((x * 34.0) + 10.0) * x); }\nvec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }\n\nfloat snoise(vec3 v) {\n  const vec2 C = vec2(1.0/6.0, 1.0/3.0);\n  const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);\n\n  vec3 i  = floor(v + dot(v, C.yyy));\n  vec3 x0 = v - i + dot(i, C.xxx);\n\n  vec3 g = step(x0.yzx, x0.xyz);\n  vec3 l = 1.0 - g;\n  vec3 i1 = min(g.xyz, l.zxy);\n  vec3 i2 = max(g.xyz, l.zxy);\n\n  vec3 x1 = x0 - i1 + C.xxx;\n  vec3 x2 = x0 - i2 + C.yyy;\n  vec3 x3 = x0 - D.yyy;\n\n  i = mod289_3(i);\n  vec4 p = permute(permute(permute(\n            i.z + vec4(0.0, i1.z, i2.z, 1.0))\n          + i.y + vec4(0.0, i1.y, i2.y, 1.0))\n          + i.x + vec4(0.0, i1.x, i2.x, 1.0));\n\n  float n_ = 0.142857142857;\n  vec3  ns = n_ * D.wyz - D.xzx;\n\n  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);\n\n  vec4 x_ = floor(j * ns.z);\n  vec4 y_ = floor(j - 7.0 * x_);\n\n  vec4 x = x_ * ns.x + ns.yyyy;\n  vec4 y = y_ * ns.x + ns.yyyy;\n  vec4 h = 1.0 - abs(x) - abs(y);\n\n  vec4 b0 = vec4(x.xy, y.xy);\n  vec4 b1 = vec4(x.zw, y.zw);\n\n  vec4 s0 = floor(b0) * 2.0 + 1.0;\n  vec4 s1 = floor(b1) * 2.0 + 1.0;\n  vec4 sh = -step(h, vec4(0.0));\n\n  vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;\n  vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww;\n\n  vec3 p0 = vec3(a0.xy, h.x);\n  vec3 p1 = vec3(a0.zw, h.y);\n  vec3 p2 = vec3(a1.xy, h.z);\n  vec3 p3 = vec3(a1.zw, h.w);\n\n  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2,p2), dot(p3,p3)));\n  p0 *= norm.x;\n  p1 *= norm.y;\n  p2 *= norm.z;\n  p3 *= norm.w;\n\n  vec4 m = max(0.5 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);\n  m = m * m;\n  return 105.0 * dot(m * m, vec4(dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3)));\n}\n\n// Fractional Brownian Motion: stacked octaves of simplex noise\nfloat fbm(vec3 p) {\n  float value = 0.0;\n  float amplitude = 0.5;\n  float frequency = 1.0;\n  for (int i = 0; i < 4; i++) {\n    value += amplitude * snoise(p * frequency);\n    amplitude *= 0.5;\n    frequency *= 2.0;\n  }\n  return value;\n}\n\n\nuniform float uTime;\nuniform float uAnimation;\nuniform float uInputVolume;\nuniform float uOutputVolume;\nuniform vec3  uColorA;\nuniform vec3  uColorB;\nuniform float uPhaseT;\nuniform float uErrorFlash;\nuniform float uPressed;\nuniform float uOpacity;\nuniform float uVariant;        // 0 = metal, 1 = aurora\n\nconst vec3 ERROR_COLOR = vec3(0.85, 0.18, 0.18);\nconst float PI = 3.14159265358979323846;\n\nvarying vec2 vUv;\n\n// =============================================================================\n// METAL look \u2014 smooth chrome-like sphere with strong specular + depth shading.\n// Apple Siri / Vision Pro adjacent.\n// =============================================================================\nvec4 metalLook(vec2 uv, float r, vec3 cA, vec3 cB, float drive) {\n  // Two octaves of noise for surface variation\n  float n  = fbm(vec3(uv * 1.4, uAnimation * 0.18)) * 0.5 + 0.5;\n  float n2 = fbm(vec3(uv * 2.6 + 4.7, uAnimation * 0.10)) * 0.5 + 0.5;\n\n  // Vertical light bias \u2014 top brighter than bottom (3D illusion)\n  float topLight = smoothstep(-1.0, 1.0, uv.y * 0.6 + 0.4);\n  float mixT = clamp(n * 0.55 + topLight * 0.45 + n2 * 0.08, 0.0, 1.0);\n\n  // Light cream color for the highlight band \u2014 gives the chrome look.\n  // Brightens cA toward white for the upper portion of the sphere.\n  vec3 highlightTone = mix(cA, vec3(0.95, 0.92, 0.98), 0.55);\n  vec3 deepTone      = mix(cB, vec3(0.04, 0.02, 0.10), 0.55);\n\n  // 4-stop ramp: cream highlight \u2192 cA \u2192 cB \u2192 deep core\n  vec3 base;\n  if (mixT > 0.66) {\n    base = mix(cA, highlightTone, (mixT - 0.66) / 0.34);\n  } else if (mixT > 0.33) {\n    base = mix(cB, cA, (mixT - 0.33) / 0.33);\n  } else {\n    base = mix(deepTone, cB, mixT / 0.33);\n  }\n\n  // Specular: tight bright spot top-left\n  vec2 specCenter = vec2(-0.35, 0.45);\n  float spec = smoothstep(0.45, 0.0, length(uv - specCenter));\n  base += vec3(1.0) * spec * 0.32;\n\n  // Bottom shadow for depth\n  float shadow = smoothstep(0.3, 1.0, -uv.y) * 0.35;\n  base = mix(base, base * 0.55, shadow);\n\n  // Inner glow on audio\n  float glow = (1.0 - r) * (1.0 - r);\n  base += cA * drive * glow * 0.5;\n\n  return vec4(base, 1.0);\n}\n\n// =============================================================================\n// AURORA look \u2014 soft layered ribbons drifting across a translucent disc.\n// Northern-lights aesthetic. Calm, atmospheric.\n// =============================================================================\nvec4 auroraLook(vec2 uv, float r, vec3 cA, vec3 cB, float drive) {\n  float t = uAnimation * 0.25;\n\n  // Disc base \u2014 deep, translucent. cB darkened.\n  vec3 baseColor = mix(cB * 0.25, cB * 0.55, smoothstep(1.0, 0.0, r));\n\n  // Three drifting ribbons at different y-offsets, angles, and speeds.\n  // Each ribbon is a horizontally-stretched soft band whose vertical position\n  // oscillates with time + noise.\n\n  // Ribbon 1 \u2014 upper, primary color\n  float y1 = uv.y - (sin(t * 0.7 + uv.x * 1.5) * 0.18) - 0.15;\n  float band1 = exp(-pow(y1 / 0.18, 2.0));\n  float n1 = fbm(vec3(uv.x * 2.0 + t, uv.y * 0.8, t * 0.4)) * 0.5 + 0.5;\n  vec3 ribbon1 = cA * band1 * n1 * 1.4;\n\n  // Ribbon 2 \u2014 middle, accent color (cooler \u2014 shift cA toward cyan)\n  vec3 cool = mix(cA, vec3(0.36, 0.83, 1.0), 0.45);\n  float y2 = uv.y - (sin(t * 0.55 + uv.x * 2.2 + 1.7) * 0.22) + 0.05;\n  float band2 = exp(-pow(y2 / 0.14, 2.0));\n  float n2 = fbm(vec3(uv.x * 2.6 + t * 0.6 + 3.1, uv.y * 0.6, t * 0.3)) * 0.5 + 0.5;\n  vec3 ribbon2 = cool * band2 * n2 * 1.0;\n\n  // Ribbon 3 \u2014 lower, warm accent (shift cA toward pink)\n  vec3 warm = mix(cA, vec3(1.0, 0.49, 0.83), 0.55);\n  float y3 = uv.y - (sin(t * 0.4 + uv.x * 1.8 + 4.2) * 0.18) + 0.30;\n  float band3 = exp(-pow(y3 / 0.16, 2.0));\n  float n3 = fbm(vec3(uv.x * 2.2 + t * 0.45 + 7.9, uv.y * 0.7, t * 0.35)) * 0.5 + 0.5;\n  vec3 ribbon3 = warm * band3 * n3 * 0.85;\n\n  // Stack ribbons additively over the disc\n  vec3 base = baseColor + ribbon1 + ribbon2 + ribbon3;\n\n  // Audio drive intensifies all ribbons + brightens center\n  base += (ribbon1 + ribbon2 + ribbon3) * drive * 0.6;\n  float glow = (1.0 - r) * (1.0 - r);\n  base += cA * drive * glow * 0.35;\n\n  // Subtle inner rim accent for legibility against dark backgrounds\n  float rim = smoothstep(0.82, 0.98, r);\n  base += cA * rim * 0.22;\n\n  return vec4(base, 1.0);\n}\n\nvoid main() {\n  vec2 uv = vUv * 2.0 - 1.0;\n  float r = length(uv);\n\n  // Discard fragments outside the unit circle so the canvas stays clean.\n  if (r > 1.0) {\n    gl_FragColor = vec4(0.0);\n    return;\n  }\n\n  // ---- Phase masks (0..1 for each phase) ---------------------------------\n  // uPhaseT smoothly interpolates between numeric phases:\n  // 0=idle, 1=listening, 2=thinking, 3=speaking, 4=error.\n  float isListening = clamp(1.0 - abs(uPhaseT - 1.0), 0.0, 1.0);\n  float isThinking  = clamp(1.0 - abs(uPhaseT - 2.0), 0.0, 1.0);\n  float isSpeaking  = clamp(1.0 - abs(uPhaseT - 3.0), 0.0, 1.0);\n\n  float inputDrive  = uInputVolume  * isListening;\n  float outputDrive = uOutputVolume * isSpeaking;\n  float thinkPulse  = isThinking * (0.5 + 0.5 * sin(uTime * 2.0));\n  float drive = max(inputDrive, max(outputDrive, thinkPulse * 0.4));\n\n  // ---- Resolve effective colors with error tint --------------------------\n  vec3 cA = mix(uColorA, ERROR_COLOR, uErrorFlash);\n  vec3 cB = mix(uColorB, ERROR_COLOR * 0.55, uErrorFlash * 0.7);\n\n  // ---- Pick variant ------------------------------------------------------\n  vec4 result;\n  if (uVariant > 0.5) {\n    result = auroraLook(uv, r, cA, cB, drive);\n  } else {\n    result = metalLook(uv, r, cA, cB, drive);\n  }\n\n  vec3 base = result.rgb;\n\n  // ---- Press: slight core brighten ---------------------------------------\n  base = mix(base, base * 1.18, uPressed * (1.0 - smoothstep(0.0, 0.55, r)));\n\n  // ---- Edge falloff: smooth alpha at the disc boundary -------------------\n  float alpha = smoothstep(1.0, 0.92, r);\n\n  gl_FragColor = vec4(base, alpha * uOpacity);\n}\n";

package/dist/voice/voice-orb-shader.js

@@ -0,0 +1,255 @@
+// SPDX-License-Identifier: Apache-2.0
+// Portions adapted from ElevenLabs UI's Orb component (MIT):
+// https://github.com/elevenlabs/ui/blob/main/apps/www/registry/elevenlabs-ui/ui/orb.tsx
+// Copyright (c) ElevenLabs Inc.
+// Adaptations: Meda token-driven theming, 5-phase state model (idle/listening/thinking/
+// speaking/error), outputLevel uniform, procedural simplex noise (replaces texture sampling).
+// Simplex noise implementation based on Stefan Gustavson's public-domain GLSL noise.
+export const VERTEX_SHADER = /* glsl */ `
+uniform float uTime;
+varying vec2 vUv;
+
+void main() {
+  vUv = uv;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+`;
+// Stefan Gustavson's simplex noise — public domain
+// https://github.com/stegu/webgl-noise (public domain)
+const SIMPLEX_NOISE_GLSL = /* glsl */ `
+vec3 mod289_3(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+vec4 mod289_4(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+vec4 permute(vec4 x) { return mod289_4(((x * 34.0) + 10.0) * x); }
+vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
+
+float snoise(vec3 v) {
+  const vec2 C = vec2(1.0/6.0, 1.0/3.0);
+  const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
+
+  vec3 i  = floor(v + dot(v, C.yyy));
+  vec3 x0 = v - i + dot(i, C.xxx);
+
+  vec3 g = step(x0.yzx, x0.xyz);
+  vec3 l = 1.0 - g;
+  vec3 i1 = min(g.xyz, l.zxy);
+  vec3 i2 = max(g.xyz, l.zxy);
+
+  vec3 x1 = x0 - i1 + C.xxx;
+  vec3 x2 = x0 - i2 + C.yyy;
+  vec3 x3 = x0 - D.yyy;
+
+  i = mod289_3(i);
+  vec4 p = permute(permute(permute(
+            i.z + vec4(0.0, i1.z, i2.z, 1.0))
+          + i.y + vec4(0.0, i1.y, i2.y, 1.0))
+          + i.x + vec4(0.0, i1.x, i2.x, 1.0));
+
+  float n_ = 0.142857142857;
+  vec3  ns = n_ * D.wyz - D.xzx;
+
+  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
+
+  vec4 x_ = floor(j * ns.z);
+  vec4 y_ = floor(j - 7.0 * x_);
+
+  vec4 x = x_ * ns.x + ns.yyyy;
+  vec4 y = y_ * ns.x + ns.yyyy;
+  vec4 h = 1.0 - abs(x) - abs(y);
+
+  vec4 b0 = vec4(x.xy, y.xy);
+  vec4 b1 = vec4(x.zw, y.zw);
+
+  vec4 s0 = floor(b0) * 2.0 + 1.0;
+  vec4 s1 = floor(b1) * 2.0 + 1.0;
+  vec4 sh = -step(h, vec4(0.0));
+
+  vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;
+  vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww;
+
+  vec3 p0 = vec3(a0.xy, h.x);
+  vec3 p1 = vec3(a0.zw, h.y);
+  vec3 p2 = vec3(a1.xy, h.z);
+  vec3 p3 = vec3(a1.zw, h.w);
+
+  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2,p2), dot(p3,p3)));
+  p0 *= norm.x;
+  p1 *= norm.y;
+  p2 *= norm.z;
+  p3 *= norm.w;
+
+  vec4 m = max(0.5 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+  m = m * m;
+  return 105.0 * dot(m * m, vec4(dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3)));
+}
+
+// Fractional Brownian Motion: stacked octaves of simplex noise
+float fbm(vec3 p) {
+  float value = 0.0;
+  float amplitude = 0.5;
+  float frequency = 1.0;
+  for (int i = 0; i < 4; i++) {
+    value += amplitude * snoise(p * frequency);
+    amplitude *= 0.5;
+    frequency *= 2.0;
+  }
+  return value;
+}
+`;
+export const FRAGMENT_SHADER = /* glsl */ `
+${SIMPLEX_NOISE_GLSL}
+
+uniform float uTime;
+uniform float uAnimation;
+uniform float uInputVolume;
+uniform float uOutputVolume;
+uniform vec3  uColorA;
+uniform vec3  uColorB;
+uniform float uPhaseT;
+uniform float uErrorFlash;
+uniform float uPressed;
+uniform float uOpacity;
+uniform float uVariant;        // 0 = metal, 1 = aurora
+
+const vec3 ERROR_COLOR = vec3(0.85, 0.18, 0.18);
+const float PI = 3.14159265358979323846;
+
+varying vec2 vUv;
+
+// =============================================================================
+// METAL look — smooth chrome-like sphere with strong specular + depth shading.
+// Apple Siri / Vision Pro adjacent.
+// =============================================================================
+vec4 metalLook(vec2 uv, float r, vec3 cA, vec3 cB, float drive) {
+  // Two octaves of noise for surface variation
+  float n  = fbm(vec3(uv * 1.4, uAnimation * 0.18)) * 0.5 + 0.5;
+  float n2 = fbm(vec3(uv * 2.6 + 4.7, uAnimation * 0.10)) * 0.5 + 0.5;
+
+  // Vertical light bias — top brighter than bottom (3D illusion)
+  float topLight = smoothstep(-1.0, 1.0, uv.y * 0.6 + 0.4);
+  float mixT = clamp(n * 0.55 + topLight * 0.45 + n2 * 0.08, 0.0, 1.0);
+
+  // Light cream color for the highlight band — gives the chrome look.
+  // Brightens cA toward white for the upper portion of the sphere.
+  vec3 highlightTone = mix(cA, vec3(0.95, 0.92, 0.98), 0.55);
+  vec3 deepTone      = mix(cB, vec3(0.04, 0.02, 0.10), 0.55);
+
+  // 4-stop ramp: cream highlight → cA → cB → deep core
+  vec3 base;
+  if (mixT > 0.66) {
+    base = mix(cA, highlightTone, (mixT - 0.66) / 0.34);
+  } else if (mixT > 0.33) {
+    base = mix(cB, cA, (mixT - 0.33) / 0.33);
+  } else {
+    base = mix(deepTone, cB, mixT / 0.33);
+  }
+
+  // Specular: tight bright spot top-left
+  vec2 specCenter = vec2(-0.35, 0.45);
+  float spec = smoothstep(0.45, 0.0, length(uv - specCenter));
+  base += vec3(1.0) * spec * 0.32;
+
+  // Bottom shadow for depth
+  float shadow = smoothstep(0.3, 1.0, -uv.y) * 0.35;
+  base = mix(base, base * 0.55, shadow);
+
+  // Inner glow on audio
+  float glow = (1.0 - r) * (1.0 - r);
+  base += cA * drive * glow * 0.5;
+
+  return vec4(base, 1.0);
+}
+
+// =============================================================================
+// AURORA look — soft layered ribbons drifting across a translucent disc.
+// Northern-lights aesthetic. Calm, atmospheric.
+// =============================================================================
+vec4 auroraLook(vec2 uv, float r, vec3 cA, vec3 cB, float drive) {
+  float t = uAnimation * 0.25;
+
+  // Disc base — deep, translucent. cB darkened.
+  vec3 baseColor = mix(cB * 0.25, cB * 0.55, smoothstep(1.0, 0.0, r));
+
+  // Three drifting ribbons at different y-offsets, angles, and speeds.
+  // Each ribbon is a horizontally-stretched soft band whose vertical position
+  // oscillates with time + noise.
+
+  // Ribbon 1 — upper, primary color
+  float y1 = uv.y - (sin(t * 0.7 + uv.x * 1.5) * 0.18) - 0.15;
+  float band1 = exp(-pow(y1 / 0.18, 2.0));
+  float n1 = fbm(vec3(uv.x * 2.0 + t, uv.y * 0.8, t * 0.4)) * 0.5 + 0.5;
+  vec3 ribbon1 = cA * band1 * n1 * 1.4;
+
+  // Ribbon 2 — middle, accent color (cooler — shift cA toward cyan)
+  vec3 cool = mix(cA, vec3(0.36, 0.83, 1.0), 0.45);
+  float y2 = uv.y - (sin(t * 0.55 + uv.x * 2.2 + 1.7) * 0.22) + 0.05;
+  float band2 = exp(-pow(y2 / 0.14, 2.0));
+  float n2 = fbm(vec3(uv.x * 2.6 + t * 0.6 + 3.1, uv.y * 0.6, t * 0.3)) * 0.5 + 0.5;
+  vec3 ribbon2 = cool * band2 * n2 * 1.0;
+
+  // Ribbon 3 — lower, warm accent (shift cA toward pink)
+  vec3 warm = mix(cA, vec3(1.0, 0.49, 0.83), 0.55);
+  float y3 = uv.y - (sin(t * 0.4 + uv.x * 1.8 + 4.2) * 0.18) + 0.30;
+  float band3 = exp(-pow(y3 / 0.16, 2.0));
+  float n3 = fbm(vec3(uv.x * 2.2 + t * 0.45 + 7.9, uv.y * 0.7, t * 0.35)) * 0.5 + 0.5;
+  vec3 ribbon3 = warm * band3 * n3 * 0.85;
+
+  // Stack ribbons additively over the disc
+  vec3 base = baseColor + ribbon1 + ribbon2 + ribbon3;
+
+  // Audio drive intensifies all ribbons + brightens center
+  base += (ribbon1 + ribbon2 + ribbon3) * drive * 0.6;
+  float glow = (1.0 - r) * (1.0 - r);
+  base += cA * drive * glow * 0.35;
+
+  // Subtle inner rim accent for legibility against dark backgrounds
+  float rim = smoothstep(0.82, 0.98, r);
+  base += cA * rim * 0.22;
+
+  return vec4(base, 1.0);
+}
+
+void main() {
+  vec2 uv = vUv * 2.0 - 1.0;
+  float r = length(uv);
+
+  // Discard fragments outside the unit circle so the canvas stays clean.
+  if (r > 1.0) {
+    gl_FragColor = vec4(0.0);
+    return;
+  }
+
+  // ---- Phase masks (0..1 for each phase) ---------------------------------
+  // uPhaseT smoothly interpolates between numeric phases:
+  // 0=idle, 1=listening, 2=thinking, 3=speaking, 4=error.
+  float isListening = clamp(1.0 - abs(uPhaseT - 1.0), 0.0, 1.0);
+  float isThinking  = clamp(1.0 - abs(uPhaseT - 2.0), 0.0, 1.0);
+  float isSpeaking  = clamp(1.0 - abs(uPhaseT - 3.0), 0.0, 1.0);
+
+  float inputDrive  = uInputVolume  * isListening;
+  float outputDrive = uOutputVolume * isSpeaking;
+  float thinkPulse  = isThinking * (0.5 + 0.5 * sin(uTime * 2.0));
+  float drive = max(inputDrive, max(outputDrive, thinkPulse * 0.4));
+
+  // ---- Resolve effective colors with error tint --------------------------
+  vec3 cA = mix(uColorA, ERROR_COLOR, uErrorFlash);
+  vec3 cB = mix(uColorB, ERROR_COLOR * 0.55, uErrorFlash * 0.7);
+
+  // ---- Pick variant ------------------------------------------------------
+  vec4 result;
+  if (uVariant > 0.5) {
+    result = auroraLook(uv, r, cA, cB, drive);
+  } else {
+    result = metalLook(uv, r, cA, cB, drive);
+  }
+
+  vec3 base = result.rgb;
+
+  // ---- Press: slight core brighten ---------------------------------------
+  base = mix(base, base * 1.18, uPressed * (1.0 - smoothstep(0.0, 0.55, r)));
+
+  // ---- Edge falloff: smooth alpha at the disc boundary -------------------
+  float alpha = smoothstep(1.0, 0.92, r);
+
+  gl_FragColor = vec4(base, alpha * uOpacity);
+}
+`;

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

@@ -0,0 +1,12 @@
+export interface VolumeSmoother {
+    /** Call each frame with the raw 0..1 signal. */
+    update(raw: number): void;
+    /** Current smoothed value 0..1. */
+    readonly value: number;
+}
+/**
+ * Creates a volume smoother with asymmetric attack/decay envelopes.
+ * @param attackAlpha  - Per-frame alpha toward higher values (default 0.85 ≈ 50ms at 60Hz)
+ * @param decayAlpha   - Per-frame alpha toward lower values  (default 0.30 ≈ 300ms at 60Hz)
+ */
+export declare function createVolumeSmoother(attackAlpha?: number, decayAlpha?: number): VolumeSmoother;

package/dist/voice/voice-orb-volume.js

@@ -0,0 +1,21 @@
+// SPDX-License-Identifier: Apache-2.0
+// Volume signal smoother: fast attack (~50ms), slow decay (~300ms).
+// Attack/decay constants are frame-rate independent when called at ~60Hz.
+/**
+ * Creates a volume smoother with asymmetric attack/decay envelopes.
+ * @param attackAlpha  - Per-frame alpha toward higher values (default 0.85 ≈ 50ms at 60Hz)
+ * @param decayAlpha   - Per-frame alpha toward lower values  (default 0.30 ≈ 300ms at 60Hz)
+ */
+export function createVolumeSmoother(attackAlpha = 0.85, decayAlpha = 0.3) {
+    let _value = 0;
+    return {
+        update(raw) {
+            const clamped = Math.min(1, Math.max(0, raw));
+            const alpha = clamped > _value ? attackAlpha : decayAlpha;
+            _value = _value + (clamped - _value) * alpha;
+        },
+        get value() {
+            return _value;
+        },
+    };
+}

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

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import type { TurnPhase } from './types.js';
+import { type VoiceOrbVariant } from './voice-orb-scene.js';
+export type { VoiceOrbVariant } from './voice-orb-scene.js';
+/**
+ * Convert any CSS color token to a hex string the Three.js shader can consume.
+ *
+ * Handles:
+ *   - hex: #RGB / #RRGGBB / #RRGGBBAA
+ *   - Tailwind/shadcn space-separated HSL: "271 36% 60%"
+ *   - hsl(), rgb(), oklch(), color(), var() — resolved via browser CSSOM
+ */
+export declare function parseColor(value: string, fallback?: string): string;
+export interface VoiceOrbProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Held / not held. Drives the squish + halo intensity. */
+    pressed: boolean;
+    /** 0..1 mic input level. Drives shader input-volume uniform. */
+    level?: number;
+    /** 0..1 TTS playback level. Drives shader output-volume uniform. */
+    outputLevel?: number;
+    /** Visual phase. Drives state-specific shader behavior. */
+    phase?: TurnPhase;
+    /** Diameter in px. Defaults to 144. */
+    size?: number;
+    disabled?: boolean;
+    /** A11y label. Defaults to "Hold to talk". */
+    label?: string;
+    /**
+     * Override the gradient pair [colorA, colorB]. If omitted, reads --primary
+     * and --accent from CSS at mount and on theme change.
+     */
+    colors?: [string, string];
+    /**
+     * Visual variant.
+     *
+     * - `'aurora'` (default): soft layered ribbons of color drifting across a
+     *   translucent disc. Northern-lights aesthetic. Calm, atmospheric, reads
+     *   like motion even at idle. Default for Medal apps.
+     * - `'metal'`: smooth chrome-like sphere with strong specular + depth
+     *   shading. Apple Siri / Vision Pro adjacent. Use for object-like,
+     *   premium-feeling presence.
+     */
+    variant?: VoiceOrbVariant;
+}
+export declare const VoiceOrb: React.ForwardRefExoticComponent<VoiceOrbProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/voice/voice-orb.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// SPDX-License-Identifier: Apache-2.0
+import { Canvas } from '@react-three/fiber';
+import * as React from 'react';
+import { Scene } from './voice-orb-scene.js';
+// Note: CSS for `.meda-voice-orb` is shipped via @medalsocial/meda/styles.css
+// (re-exported from globals.css). We avoid a JS-side CSS import here so
+// Meda's tsc-only build pipeline doesn't need CSS bundling.
+// ---------------------------------------------------------------------------
+// Theming helpers
+// ---------------------------------------------------------------------------
+const FALLBACK_COLOR = '#9A6AC2'; // Pilot purple
+function hslToHex(h, s, l) {
+    const sl = s / 100;
+    const ll = l / 100;
+    const a = sl * Math.min(ll, 1 - ll);
+    const f = (n) => {
+        const k = (n + h / 30) % 12;
+        const color = ll - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+        return Math.round(255 * color)
+            .toString(16)
+            .padStart(2, '0');
+    };
+    return `#${f(0)}${f(8)}${f(4)}`;
+}
+/**
+ * Convert any CSS color token to a hex string the Three.js shader can consume.
+ *
+ * Handles:
+ *   - hex: #RGB / #RRGGBB / #RRGGBBAA
+ *   - Tailwind/shadcn space-separated HSL: "271 36% 60%"
+ *   - hsl(), rgb(), oklch(), color(), var() — resolved via browser CSSOM
+ */
+export function parseColor(value, fallback = FALLBACK_COLOR) {
+    const v = value.trim();
+    if (!v)
+        return fallback;
+    // Already a hex literal — pass through directly.
+    if (/^#[0-9a-fA-F]{3,8}$/.test(v))
+        return v;
+    // Tailwind/shadcn convention: "H S% L%" (no leading "hsl(")
+    const hslMatch = v.match(/^(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%$/);
+    if (hslMatch) {
+        return hslToHex(Number(hslMatch[1]), Number(hslMatch[2]), Number(hslMatch[3]));
+    }
+    // Functional notation — hsl(), rgb(), oklch(), color(), var(), etc.
+    // Let the browser resolve it via a throw-away element.
+    if (typeof document !== 'undefined' && (v.includes('(') || v.startsWith('var'))) {
+        const probe = document.createElement('div');
+        probe.style.display = 'none';
+        probe.style.color = v;
+        document.body.appendChild(probe);
+        const computed = getComputedStyle(probe).color;
+        document.body.removeChild(probe);
+        const m = computed.match(/rgb(?:a)?\((\d+)[,\s]+(\d+)[,\s]+(\d+)/);
+        if (m) {
+            const r = Number(m[1]);
+            const g = Number(m[2]);
+            const b = Number(m[3]);
+            return `#${[r, g, b].map((x) => x.toString(16).padStart(2, '0')).join('')}`;
+        }
+    }
+    return fallback;
+}
+function readMedaColors(el) {
+    const style = getComputedStyle(el);
+    const primary = style.getPropertyValue('--primary').trim();
+    const accent = style.getPropertyValue('--accent').trim();
+    const colorA = parseColor(primary);
+    const colorB = accent ? parseColor(accent) : colorA;
+    return [colorA, colorB];
+}
+const DEFAULT_COLORS = ['#9A6AC2', '#7B4FAB'];
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export const VoiceOrb = React.forwardRef(function VoiceOrb({ pressed, level = 0, outputLevel = 0, phase = 'idle', size = 144, disabled, label = 'Hold to talk', colors: colorsProp, variant = 'aurora', className, style, ...rest }, ref) {
+    const buttonRef = React.useRef(null);
+    // Merge forwarded ref
+    React.useImperativeHandle(ref, () => buttonRef.current);
+    // Resolved theme colors (from CSSOM unless overridden by prop)
+    const [resolvedColors, setResolvedColors] = React.useState(colorsProp ?? DEFAULT_COLORS);
+    // prefers-reduced-motion
+    const [reducedMotion, setReducedMotion] = React.useState(false);
+    React.useEffect(() => {
+        const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+        setReducedMotion(mq.matches);
+        const handler = (e) => setReducedMotion(e.matches);
+        mq.addEventListener('change', handler);
+        return () => mq.removeEventListener('change', handler);
+    }, []);
+    // Theme color resolution
+    React.useEffect(() => {
+        if (colorsProp) {
+            setResolvedColors(colorsProp);
+            return;
+        }
+        const update = () => {
+            setResolvedColors(readMedaColors(document.documentElement));
+        };
+        update();
+        const observer = new MutationObserver(update);
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['class', 'data-theme'],
+        });
+        return () => observer.disconnect();
+    }, [colorsProp]);
+    const btnStyle = {
+        width: size,
+        height: size,
+        ...style,
+    };
+    return (_jsx("button", { ref: buttonRef, type: "button", "aria-pressed": pressed, "aria-label": label, disabled: disabled, "data-phase": phase, "data-pressed": pressed, className: [
+            'meda-voice-orb',
+            'relative inline-flex items-center justify-center rounded-full',
+            'select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+            'transition-transform duration-200 ease-out',
+            disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer',
+            pressed ? 'scale-[0.97]' : 'scale-100',
+            className ?? '',
+        ].join(' '), style: btnStyle, ...rest, children: _jsx(Canvas, { gl: { alpha: true, antialias: true, premultipliedAlpha: true }, style: { pointerEvents: 'none' }, children: _jsx(Scene, { level: level, outputLevel: outputLevel, phase: phase, colors: resolvedColors, reducedMotion: reducedMotion, pressed: pressed, variant: variant }) }) }));
+});

package/dist/voice/voice-status-pill.d.ts

@@ -0,0 +1,7 @@
+import type { TurnPhase } from './types.js';
+export interface VoiceStatusPillProps {
+    phase: TurnPhase;
+    thinkingForMs?: number;
+    className?: string;
+}
+export declare function VoiceStatusPill({ phase, thinkingForMs, className }: VoiceStatusPillProps): import("react/jsx-runtime").JSX.Element;

package/dist/voice/voice-status-pill.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PHASE_LABEL = {
+    idle: 'Idle',
+    listening: 'Listening',
+    thinking: 'Thinking',
+    speaking: 'Speaking',
+    error: 'Error',
+};
+export function VoiceStatusPill({ phase, thinkingForMs, className }) {
+    const tone = phase === 'listening'
+        ? 'bg-primary text-primary-foreground'
+        : phase === 'speaking'
+            ? 'bg-emerald-500 text-white'
+            : phase === 'error'
+                ? 'bg-destructive text-destructive-foreground'
+                : 'bg-muted text-muted-foreground';
+    const seconds = thinkingForMs ? (thinkingForMs / 1000).toFixed(1) : null;
+    return (_jsxs("span", { role: "status", "data-phase": phase, className: [
+            'inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium',
+            tone,
+            className ?? '',
+        ].join(' '), children: [_jsx("span", { className: [
+                    'size-1.5 rounded-full bg-current',
+                    phase === 'thinking' ? 'animate-pulse' : '',
+                ].join(' ') }), PHASE_LABEL[phase], phase === 'thinking' && seconds && _jsxs("span", { className: "opacity-70", children: ["\u00B7 ", seconds, "s"] })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medalsocial/meda",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Shared Meda UI shell and runtime package.",
   "license": "Apache-2.0",
   "repository": {
@@ -28,15 +28,25 @@
       "types": "./dist/shell/index.d.ts",
       "default": "./dist/shell/index.js"
     },
+    "./voice": {
+      "types": "./dist/voice/index.d.ts",
+      "default": "./dist/voice/index.js"
+    },
     "./styles.css": "./dist/styles.css"
   },
   "publishConfig": {
     "access": "public"
   },
   "peerDependencies": {
+    "@react-three/fiber": "^9.0.0",
     "react": ">=19",
     "react-dom": ">=19"
   },
+  "peerDependenciesMeta": {
+    "@react-three/fiber": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "@base-ui/react": "^1.4.0",
     "@fontsource-variable/geist": "^5.2.8",
@@ -47,12 +57,17 @@
     "lucide-react": "^1.8.0",
     "react-resizable-panels": "^4.10.0",
     "tailwind-merge": "^3.5.0",
+    "three": "^0.170.0",
     "vaul": "^1.1.2"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.12",
     "@changesets/changelog-github": "^0.5.1",
     "@changesets/cli": "^2.29.0",
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.6.0",
+    "@tailwindcss/vite": "^4.2.4",
+    "@types/three": "^0.184.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.14",
@@ -62,9 +77,11 @@
     "jsdom": "^29.0.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
+    "tailwindcss": "^4.2.4",
     "typescript": "~6.0.2",
     "vite": "^8.0.4",
-    "vitest": "^4.1.4"
+    "vitest": "^4.1.4",
+    "wrangler": "^4.0.0"
   },
   "scripts": {
     "build": "pnpm exec tsc -p tsconfig.build.json && node ./scripts/build.mjs",
@@ -73,11 +90,14 @@
     "format": "biome format --write .",
     "demo:dev": "vite --config vite.config.demo.ts",
     "demo:build": "vite build --config vite.config.demo.ts",
+    "worker:build": "pnpm demo:build && node ./scripts/copy-registry-to-dist.mjs",
+    "worker:dev": "pnpm worker:build && wrangler dev",
+    "worker:deploy": "pnpm worker:build && wrangler deploy",
     "test": "vitest run --environment jsdom",
     "test:run": "vitest run --environment jsdom",
     "typecheck": "tsc --noEmit",
     "version": "changeset version",
-    "release": "pnpm build && pnpm publish --access public --no-git-checks",
+    "release": "pnpm build && changeset publish",
     "registry:validate": "node ./registry/scripts/validate-registry.mjs"
   }
 }