@medalsocial/meda 0.1.0 → 0.2.0

package/dist/shell/shell-state.js

@@ -10,7 +10,9 @@ export function clampSidePanelWidth(width) {
 function readStoredSidePanelWidth(storageKey) {
     if (typeof window === 'undefined')
         return DEFAULT_SIDE_PANEL_WIDTH;
-    const storedValue = typeof window.localStorage?.getItem === 'function' ? window.localStorage.getItem(storageKey) : null;
+    const storedValue = typeof window.localStorage?.getItem === 'function'
+        ? window.localStorage.getItem(storageKey)
+        : null;
     const stored = Number(storedValue);
     return Number.isFinite(stored) && stored > 0
         ? clampSidePanelWidth(stored)
@@ -102,6 +104,7 @@ export function ShellStateProvider({ children, adapter, initialActiveRail = 'hom
     function closeCommandPalette() {
         setCommandPaletteOpen(false);
     }
+    // biome-ignore lint/correctness/useExhaustiveDependencies: inner setters/handlers are re-created each render; wrapping all of them in useCallback is a separate refactor — deps here are the observable state values only.
     const value = useMemo(() => ({
         activePanelView,
         lastPanelView: lastPanelViewRef.current,

package/dist/shell/shell-tab-bar.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { ShellTab } from './types';
+import type { ShellTab } from './types.js';
 interface ShellTabBarRenderArgs {
     children: ReactNode;
     className: string;

package/dist/shell/shell-tab-bar.js

@@ -20,7 +20,7 @@ export function ShellTabBar({ tabs, activeTab, onTabChange, className, ariaLabel
                 });
             }) }));
     }
-    return (_jsx("div", { "aria-label": ariaLabel, className: joinClasses(tabBarClassName, className), children: tabs.map((tab) => {
+    return (_jsx("nav", { "aria-label": ariaLabel, className: joinClasses(tabBarClassName, className), children: tabs.map((tab) => {
             const isActive = tab.id === activeTab;
             return (_jsx("button", { type: "button", "data-active": isActive, onClick: () => onTabChange?.(tab.id), className: joinClasses(tabClassName, isActive ? activeTabClassName : inactiveTabClassName), children: tab.label }, tab.id));
         }) }));

package/dist/shell/utils.d.ts

@@ -1,4 +1,4 @@
-import type { ShellCommandDefinition, ShellModuleDefinition, ShellPanelDefinition } from './types';
+import type { ShellCommandDefinition, ShellModuleDefinition, ShellPanelDefinition } from './types.js';
 export interface ShellPanelCollection {
     globalViews: ShellPanelDefinition[];
     moduleViews: ShellPanelDefinition[];

package/dist/shell/workbench-layout.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { ShellViewportBand } from './types';
+import type { ShellViewportBand } from './types.js';
 export interface WorkbenchLayoutProps {
     viewportBand: ShellViewportBand;
     main: ReactNode;

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";