@medalsocial/meda 0.1.0 → 0.2.0

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,12 +1,19 @@
 {
   "name": "@medalsocial/meda",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Shared Meda UI shell and runtime package.",
   "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Medal-Social/meda.git"
+  },
+  "homepage": "https://github.com/Medal-Social/meda#readme",
+  "bugs": {
+    "url": "https://github.com/Medal-Social/meda/issues"
+  },
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "packageManager": "pnpm@10.28.0",
   "files": [
     "README.md",
     "components.json",
@@ -21,21 +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"
   },
-  "scripts": {
-    "build": "pnpm exec tsc -p tsconfig.build.json && node ./scripts/build.mjs",
-    "prepack": "pnpm build",
-    "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"
+  "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",
@@ -46,17 +57,47 @@
     "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",
     "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "husky": "^9.1.7",
     "jsdom": "^29.0.2",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tailwindcss": "^4.2.4",
     "typescript": "~6.0.2",
-    "vitest": "^4.1.4"
+    "vite": "^8.0.4",
+    "vitest": "^4.1.4",
+    "wrangler": "^4.0.0"
+  },
+  "scripts": {
+    "build": "pnpm exec tsc -p tsconfig.build.json && node ./scripts/build.mjs",
+    "lint": "biome check .",
+    "lint:fix": "biome check --write .",
+    "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 && changeset publish",
+    "registry:validate": "node ./registry/scripts/validate-registry.mjs"
   }
-}
+}