@medalsocial/meda 0.1.1 → 0.3.0

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"] })] }));
+}