@moldable-ai/ui 0.2.21 → 0.2.24

package/dist/components/chat/voice-orb-audio.d.ts

@@ -0,0 +1,16 @@
+import { type VoiceOrbAudioLevels } from './voice-orb-types.js';
+export declare function summarizeVoiceOrbSpectrum(spectrum: Float32Array): VoiceOrbAudioLevels;
+export declare class VoiceOrbStreamAnalyser {
+    private readonly publish;
+    private analyser;
+    private context;
+    private source;
+    private spectrum;
+    private stream;
+    private timer;
+    constructor(publish: (levels: VoiceOrbAudioLevels) => void);
+    setStream(stream: MediaStream | null): void;
+    dispose(): void;
+    private readonly sample;
+}
+//# sourceMappingURL=voice-orb-audio.d.ts.map

package/dist/components/chat/voice-orb-audio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"voice-orb-audio.d.ts","sourceRoot":"","sources":["../../../src/components/chat/voice-orb-audio.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,mBAAmB,CAAA;AAoC1B,wBAAgB,yBAAyB,CACvC,QAAQ,EAAE,YAAY,GACrB,mBAAmB,CAiBrB;AAED,qBAAa,sBAAsB;IAS/B,OAAO,CAAC,QAAQ,CAAC,OAAO;IAR1B,OAAO,CAAC,QAAQ,CAA4B;IAC5C,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,MAAM,CAA0C;IACxD,OAAO,CAAC,QAAQ,CAAqB;IACrC,OAAO,CAAC,MAAM,CAA2B;IACzC,OAAO,CAAC,KAAK,CAA8C;gBAGxC,OAAO,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI;IAGjE,SAAS,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI;IA8C3C,OAAO,IAAI,IAAI;IAQf,OAAO,CAAC,QAAQ,CAAC,MAAM,CAItB;CACF"}

package/dist/components/chat/voice-orb-audio.js

@@ -0,0 +1,110 @@
+import { silentVoiceOrbAudioLevels, } from './voice-orb-types.js';
+const BAND_END_BINS = [9, 96, 400];
+const BAND_GAINS = [10, 1, 1];
+const SAMPLE_INTERVAL_MS = 1_000 / 30;
+function clamp(value, minimum, maximum) {
+    return Math.max(minimum, Math.min(maximum, value));
+}
+function medianBandEnergy(spectrum, start, end) {
+    const values = [];
+    const boundedEnd = Math.min(end, spectrum.length);
+    for (let index = start; index < boundedEnd; index += 1) {
+        const decibels = clamp(spectrum[index] ?? -100, -100, -10);
+        values.push(Math.sqrt(1 - Math.abs(decibels) / 100));
+    }
+    if (values.length === 0)
+        return 0;
+    values.sort((left, right) => left - right);
+    const middle = Math.floor(values.length / 2);
+    if (values.length % 2 === 0) {
+        return ((values[middle - 1] ?? 0) + (values[middle] ?? 0)) / 2;
+    }
+    return values[middle] ?? 0;
+}
+function compressEnergy(value) {
+    return value / (value + 1);
+}
+export function summarizeVoiceOrbSpectrum(spectrum) {
+    const bands = [0, 0, 0];
+    let start = 0;
+    for (let index = 0; index < BAND_END_BINS.length; index += 1) {
+        const end = BAND_END_BINS[index];
+        const gain = BAND_GAINS[index];
+        bands[index] = compressEnergy(medianBandEnergy(spectrum, start, end) * gain);
+        start = end;
+    }
+    return {
+        low: bands[0] ?? 0,
+        mid: bands[1] ?? 0,
+        high: bands[2] ?? 0,
+        overall: compressEnergy(medianBandEnergy(spectrum, 0, 400)),
+    };
+}
+export class VoiceOrbStreamAnalyser {
+    publish;
+    analyser = null;
+    context = null;
+    source = null;
+    spectrum = new Float32Array();
+    stream = null;
+    timer = null;
+    constructor(publish) {
+        this.publish = publish;
+    }
+    setStream(stream) {
+        if (this.stream === stream) {
+            void this.context?.resume().catch(() => undefined);
+            return;
+        }
+        this.source?.disconnect();
+        this.source = null;
+        const hadStream = this.stream !== null;
+        this.stream = stream;
+        if (!stream || typeof AudioContext === 'undefined') {
+            if (this.timer)
+                clearInterval(this.timer);
+            this.timer = null;
+            if (hadStream)
+                this.publish(silentVoiceOrbAudioLevels);
+            return;
+        }
+        try {
+            const context = this.context ?? new AudioContext();
+            const analyser = this.analyser ?? context.createAnalyser();
+            if (!this.analyser) {
+                analyser.fftSize = 2_048;
+                analyser.minDecibels = -100;
+                analyser.maxDecibels = -10;
+                analyser.smoothingTimeConstant = 0.86;
+                this.analyser = analyser;
+                this.spectrum = new Float32Array(analyser.frequencyBinCount);
+            }
+            this.context = context;
+            const source = context.createMediaStreamSource(stream);
+            source.connect(analyser);
+            this.source = source;
+            void context.resume().catch(() => undefined);
+            this.timer ??= setInterval(() => this.sample(), SAMPLE_INTERVAL_MS);
+        }
+        catch {
+            this.stream = null;
+            if (this.timer)
+                clearInterval(this.timer);
+            this.timer = null;
+            this.publish(silentVoiceOrbAudioLevels);
+        }
+    }
+    dispose() {
+        this.setStream(null);
+        void this.context?.close().catch(() => undefined);
+        this.context = null;
+        this.analyser = null;
+        this.spectrum = new Float32Array();
+    }
+    sample = () => {
+        if (!this.analyser || !this.stream)
+            return;
+        this.analyser.getFloatFrequencyData(this.spectrum);
+        this.publish(summarizeVoiceOrbSpectrum(this.spectrum));
+    };
+}

package/dist/components/chat/voice-orb-renderer.d.ts

@@ -0,0 +1,51 @@
+import { type VoiceOrbAudioLevels, type VoiceOrbState, type VoiceOrbStateTargets } from './voice-orb-types.js';
+export declare function stepVoiceOrbState(current: VoiceOrbStateTargets, state: VoiceOrbState, deltaSeconds: number, immediate?: boolean): VoiceOrbStateTargets;
+export declare function stepVoiceOrbEnergyEnvelopes(micLevel: number, outputLevel: number, levels: VoiceOrbAudioLevels, deltaSeconds: number): {
+    micLevel: number;
+    outputLevel: number;
+};
+export declare function getVoiceOrbPreviewAudio(state: VoiceOrbState, previewAudioLevel: number, live: boolean, time: number): Float32Array;
+export declare class VoiceOrbRenderer {
+    private readonly canvas;
+    private animationFrame;
+    private audio;
+    private audioLevels;
+    private buffer;
+    private canvasContext;
+    private cumulativeAudio;
+    private gl;
+    private hasAudioInput;
+    private hasStateInput;
+    private lastFrameTime;
+    private micLevel;
+    private outputLevel;
+    private previewAudioLevel;
+    private previewTimeMs;
+    private program;
+    private reducedMotion;
+    private state;
+    private stateValues;
+    private uniforms;
+    constructor(canvas: HTMLCanvasElement);
+    setState(state: VoiceOrbState): void;
+    setAudioLevels(levels: VoiceOrbAudioLevels | null): void;
+    setPreview(previewAudioLevel: number, previewTimeMs?: number): void;
+    setReducedMotion(reducedMotion: boolean): void;
+    dispose(): void;
+    private start;
+    private readonly renderFrame;
+    private shouldContinueAnimation;
+    private hasVisibleState;
+    private isStateSettled;
+    private hasResidualAudio;
+    private createProgram;
+    private render;
+    private updateState;
+    private updateAudio;
+    private resizeCanvas;
+    private renderCanvasFallback;
+    private updatePreviewAudio;
+    private readonly handleContextLost;
+    private readonly handleContextRestored;
+}
+//# sourceMappingURL=voice-orb-renderer.d.ts.map

package/dist/components/chat/voice-orb-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"voice-orb-renderer.d.ts","sourceRoot":"","sources":["../../../src/components/chat/voice-orb-renderer.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,aAAa,EAClB,KAAK,oBAAoB,EAK1B,MAAM,mBAAmB,CAAA;AAyB1B,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,oBAAoB,EAC7B,KAAK,EAAE,aAAa,EACpB,YAAY,EAAE,MAAM,EACpB,SAAS,UAAQ,GAChB,oBAAoB,CAYtB;AAED,wBAAgB,2BAA2B,CACzC,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,EACnB,MAAM,EAAE,mBAAmB,EAC3B,YAAY,EAAE,MAAM,GACnB;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAY3C;AAsCD,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,aAAa,EACpB,iBAAiB,EAAE,MAAM,EACzB,IAAI,EAAE,OAAO,EACb,IAAI,EAAE,MAAM,GACX,YAAY,CA4Bd;AA6BD,qBAAa,gBAAgB;IAsBf,OAAO,CAAC,QAAQ,CAAC,MAAM;IArBnC,OAAO,CAAC,cAAc,CAAsB;IAC5C,OAAO,CAAC,KAAK,CAAsB;IACnC,OAAO,CAAC,WAAW,CAA4B;IAC/C,OAAO,CAAC,MAAM,CAA2B;IACzC,OAAO,CAAC,aAAa,CAAwC;IAC7D,OAAO,CAAC,eAAe,CAAsB;IAC7C,OAAO,CAAC,EAAE,CAAqC;IAC/C,OAAO,CAAC,aAAa,CAAQ;IAC7B,OAAO,CAAC,aAAa,CAAQ;IAC7B,OAAO,CAAC,aAAa,CAAI;IACzB,OAAO,CAAC,QAAQ,CAAI;IACpB,OAAO,CAAC,WAAW,CAAI;IACvB,OAAO,CAAC,iBAAiB,CAAI;IAC7B,OAAO,CAAC,aAAa,CAAoB;IACzC,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,aAAa,CAAQ;IAC7B,OAAO,CAAC,KAAK,CAA4B;IACzC,OAAO,CAAC,WAAW,CACkB;IACrC,OAAO,CAAC,QAAQ,CAAgC;gBAEnB,MAAM,EAAE,iBAAiB;IAkBtD,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IASpC,cAAc,CAAC,MAAM,EAAE,mBAAmB,GAAG,IAAI,GAAG,IAAI;IAQxD,UAAU,CAAC,iBAAiB,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI;IAWnE,gBAAgB,CAAC,aAAa,EAAE,OAAO,GAAG,IAAI;IAK9C,OAAO,IAAI,IAAI;IAiBf,OAAO,CAAC,KAAK;IAYb,OAAO,CAAC,QAAQ,CAAC,WAAW,CAM3B;IAED,OAAO,CAAC,uBAAuB;IAO/B,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,aAAa;IAkDrB,OAAO,CAAC,MAAM;IAqCd,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,WAAW;IAkCnB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,oBAAoB;IAqD5B,OAAO,CAAC,kBAAkB;IA4C1B,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAIjC;IAED,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAarC;CACF"}

package/dist/components/chat/voice-orb-renderer.js

@@ -0,0 +1,410 @@
+import { voiceOrbFragmentShader, voiceOrbVertexShader, } from './voice-orb-shaders.js';
+import { getVoiceOrbStateTargets, normalizeVoiceOrbAudioLevels, silentVoiceOrbAudioLevels, voiceOrbStateTransitionSeconds, } from './voice-orb-types.js';
+const QUAD_VERTICES = new Float32Array([
+    -1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1,
+]);
+function interpolationFactor(deltaSeconds, duration) {
+    return 1 - Math.exp(-deltaSeconds / duration);
+}
+export function stepVoiceOrbState(current, state, deltaSeconds, immediate = false) {
+    const targets = getVoiceOrbStateTargets(state);
+    const factor = immediate
+        ? 1
+        : interpolationFactor(deltaSeconds, voiceOrbStateTransitionSeconds);
+    const next = { ...current };
+    for (const key of Object.keys(targets)) {
+        next[key] += (targets[key] - next[key]) * factor;
+    }
+    if (state === 'connecting')
+        next.think = Math.max(next.think, 0.6);
+    return next;
+}
+export function stepVoiceOrbEnergyEnvelopes(micLevel, outputLevel, levels, deltaSeconds) {
+    const maximum = Math.max(levels.low, levels.mid, levels.high, levels.overall);
+    const micDuration = maximum > micLevel ? 0.12 : 0.32;
+    const nextMicLevel = micLevel +
+        (maximum - micLevel) * interpolationFactor(deltaSeconds, micDuration);
+    const outputDuration = levels.overall > outputLevel ? 0.09 : 0.3;
+    const nextOutputLevel = outputLevel +
+        (levels.overall - outputLevel) *
+            interpolationFactor(deltaSeconds, outputDuration);
+    return { micLevel: nextMicLevel, outputLevel: nextOutputLevel };
+}
+function smoothstep(minimum, maximum, value) {
+    const normalized = Math.max(0, Math.min(1, (value - minimum) / (maximum - minimum)));
+    return normalized * normalized * (3 - 2 * normalized);
+}
+function mixColor(base, target, amount) {
+    return base.map((value, index) => Math.round(value + ((target[index] ?? value) - value) * amount));
+}
+function getFallbackColor(base, muted, error, alpha = 1) {
+    const luminance = Math.round(base[0] * 0.299 + base[1] * 0.587 + base[2] * 0.114);
+    const desaturated = mixColor(base, [luminance, luminance, luminance], muted * 0.72);
+    const tinted = mixColor(desaturated, [255, 89, 79], error * 0.58);
+    return `rgba(${tinted[0]}, ${tinted[1]}, ${tinted[2]}, ${alpha})`;
+}
+export function getVoiceOrbPreviewAudio(state, previewAudioLevel, live, time) {
+    const normalizedPreviewLevel = Number.isFinite(previewAudioLevel)
+        ? Math.max(0, Math.min(1, previewAudioLevel))
+        : 0;
+    const intensity = Math.max(live && state === 'speaking' ? 0.42 : 0, normalizedPreviewLevel);
+    const breath = smoothstep(0.08, 0.72, Math.sin(time * 0.78) * 0.5 + 0.5);
+    const speechShape = 0.58 + Math.sin(time * 3.1 + 0.6) * 0.17 + Math.sin(time * 4.2 + 2.1) * 0.12;
+    const speaking = state === 'speaking'
+        ? intensity * (0.08 + breath * Math.max(0.24, speechShape))
+        : 0;
+    const thinking = state === 'thinking'
+        ? intensity * (0.1 + (Math.sin(time * 1.4) * 0.5 + 0.5) * 0.06)
+        : 0;
+    const listening = state === 'listening' ? intensity * 0.08 : 0;
+    const overall = Math.min(1, Math.max(speaking, thinking, listening));
+    return new Float32Array([
+        overall * (0.82 + Math.sin(time * 1.1) * 0.14),
+        overall * (0.76 + Math.sin(time * 1.5 + 1.2) * 0.16),
+        overall * (0.68 + Math.sin(time * 1.9 + 2.1) * 0.18),
+        overall,
+    ]);
+}
+function requireUniform(gl, program, name) {
+    const location = gl.getUniformLocation(program, name);
+    if (!location)
+        throw new Error(`Voice orb shader is missing ${name}`);
+    return location;
+}
+function compileShader(gl, type, source) {
+    const shader = gl.createShader(type);
+    if (!shader)
+        throw new Error('Unable to create voice orb shader');
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        const message = gl.getShaderInfoLog(shader) ?? 'Shader compilation failed';
+        gl.deleteShader(shader);
+        throw new Error(message);
+    }
+    return shader;
+}
+export class VoiceOrbRenderer {
+    canvas;
+    animationFrame = null;
+    audio = new Float32Array(4);
+    audioLevels = silentVoiceOrbAudioLevels;
+    buffer = null;
+    canvasContext = null;
+    cumulativeAudio = new Float32Array(4);
+    gl = null;
+    hasAudioInput = false;
+    hasStateInput = false;
+    lastFrameTime = 0;
+    micLevel = 0;
+    outputLevel = 0;
+    previewAudioLevel = 0;
+    previewTimeMs;
+    program = null;
+    reducedMotion = false;
+    state = 'inactive';
+    stateValues = getVoiceOrbStateTargets('inactive');
+    uniforms = null;
+    constructor(canvas) {
+        this.canvas = canvas;
+        canvas.addEventListener('webglcontextlost', this.handleContextLost);
+        canvas.addEventListener('webglcontextrestored', this.handleContextRestored);
+        try {
+            this.gl = canvas.getContext('webgl', {
+                alpha: true,
+                antialias: false,
+                depth: false,
+                premultipliedAlpha: false,
+            });
+            if (this.gl)
+                this.createProgram(this.gl);
+            else
+                this.canvasContext = canvas.getContext('2d');
+        }
+        catch {
+            this.gl = null;
+            this.canvasContext = canvas.getContext('2d');
+        }
+    }
+    setState(state) {
+        this.state = state;
+        if (!this.hasStateInput) {
+            this.stateValues = getVoiceOrbStateTargets(state);
+            this.hasStateInput = true;
+        }
+        this.start();
+    }
+    setAudioLevels(levels) {
+        this.hasAudioInput = levels !== null;
+        this.audioLevels = levels
+            ? normalizeVoiceOrbAudioLevels(levels)
+            : silentVoiceOrbAudioLevels;
+        this.start();
+    }
+    setPreview(previewAudioLevel, previewTimeMs) {
+        this.previewAudioLevel = Number.isFinite(previewAudioLevel)
+            ? Math.max(0, Math.min(1, previewAudioLevel))
+            : 0;
+        this.previewTimeMs =
+            previewTimeMs === undefined || Number.isFinite(previewTimeMs)
+                ? previewTimeMs
+                : undefined;
+        this.start();
+    }
+    setReducedMotion(reducedMotion) {
+        this.reducedMotion = reducedMotion;
+        this.start();
+    }
+    dispose() {
+        if (this.animationFrame !== null)
+            cancelAnimationFrame(this.animationFrame);
+        this.animationFrame = null;
+        if (this.gl) {
+            if (this.buffer)
+                this.gl.deleteBuffer(this.buffer);
+            if (this.program)
+                this.gl.deleteProgram(this.program);
+        }
+        this.buffer = null;
+        this.program = null;
+        this.uniforms = null;
+        this.canvas.removeEventListener('webglcontextlost', this.handleContextLost);
+        this.canvas.removeEventListener('webglcontextrestored', this.handleContextRestored);
+    }
+    start() {
+        if (this.previewTimeMs !== undefined) {
+            if (this.animationFrame !== null) {
+                cancelAnimationFrame(this.animationFrame);
+                this.animationFrame = null;
+            }
+            this.render(this.previewTimeMs / 1_000);
+            return;
+        }
+        this.animationFrame ??= requestAnimationFrame(this.renderFrame);
+    }
+    renderFrame = (milliseconds) => {
+        this.animationFrame = null;
+        this.render(milliseconds / 1_000);
+        if (this.shouldContinueAnimation()) {
+            this.animationFrame = requestAnimationFrame(this.renderFrame);
+        }
+    };
+    shouldContinueAnimation() {
+        if (this.previewTimeMs !== undefined)
+            return false;
+        if (this.state === 'inactive')
+            return this.hasVisibleState();
+        if (!this.reducedMotion)
+            return true;
+        return !this.isStateSettled() || this.hasResidualAudio();
+    }
+    hasVisibleState() {
+        return Object.values(this.stateValues).some((value) => value > 0.001);
+    }
+    isStateSettled() {
+        const target = getVoiceOrbStateTargets(this.state);
+        return Object.keys(target).every((key) => Math.abs(target[key] - this.stateValues[key]) <= 0.001);
+    }
+    hasResidualAudio() {
+        if (this.hasAudioInput || this.state === 'speaking')
+            return false;
+        return (this.micLevel > 0.001 ||
+            this.outputLevel > 0.001 ||
+            [...this.audio].some((value) => value > 0.001));
+    }
+    createProgram(gl) {
+        const program = gl.createProgram();
+        if (!program)
+            throw new Error('Unable to create voice orb program');
+        const vertex = compileShader(gl, gl.VERTEX_SHADER, voiceOrbVertexShader);
+        const fragment = compileShader(gl, gl.FRAGMENT_SHADER, voiceOrbFragmentShader);
+        gl.attachShader(program, vertex);
+        gl.attachShader(program, fragment);
+        gl.linkProgram(program);
+        gl.deleteShader(vertex);
+        gl.deleteShader(fragment);
+        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+            const message = gl.getProgramInfoLog(program) ?? 'Shader linking failed';
+            gl.deleteProgram(program);
+            throw new Error(message);
+        }
+        const position = gl.getAttribLocation(program, 'a_position');
+        const buffer = gl.createBuffer();
+        if (!buffer)
+            throw new Error('Unable to create voice orb geometry');
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, QUAD_VERTICES, gl.STATIC_DRAW);
+        gl.useProgram(program);
+        gl.enableVertexAttribArray(position);
+        gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        this.buffer = buffer;
+        this.program = program;
+        this.uniforms = {
+            audio: requireUniform(gl, program, 'u_audio'),
+            cumulativeAudio: requireUniform(gl, program, 'u_cumulativeAudio'),
+            micLevel: requireUniform(gl, program, 'u_micLevel'),
+            motionScale: requireUniform(gl, program, 'u_motionScale'),
+            outputLevel: requireUniform(gl, program, 'u_outputLevel'),
+            resolution: requireUniform(gl, program, 'u_resolution'),
+            stateError: requireUniform(gl, program, 'u_stateError'),
+            stateListen: requireUniform(gl, program, 'u_stateListen'),
+            stateMuted: requireUniform(gl, program, 'u_stateMuted'),
+            stateSpeak: requireUniform(gl, program, 'u_stateSpeak'),
+            stateThink: requireUniform(gl, program, 'u_stateThink'),
+            time: requireUniform(gl, program, 'u_time'),
+        };
+    }
+    render(time) {
+        const deltaSeconds = this.lastFrameTime === 0
+            ? 0.016
+            : Math.max(0, Math.min(0.05, time - this.lastFrameTime));
+        this.lastFrameTime = time;
+        this.updateState(deltaSeconds);
+        this.updateAudio(deltaSeconds, time);
+        this.resizeCanvas();
+        const gl = this.gl;
+        const program = this.program;
+        const uniforms = this.uniforms;
+        if (!gl || !program || !uniforms) {
+            this.renderCanvasFallback(time);
+            return;
+        }
+        gl.clearColor(0, 0, 0, 0);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+        gl.useProgram(program);
+        gl.uniform1f(uniforms.time, time);
+        gl.uniform1f(uniforms.micLevel, this.micLevel);
+        gl.uniform1f(uniforms.motionScale, this.reducedMotion ? 0 : 1);
+        gl.uniform1f(uniforms.outputLevel, this.outputLevel);
+        gl.uniform1f(uniforms.stateListen, this.stateValues.listen);
+        gl.uniform1f(uniforms.stateThink, this.stateValues.think);
+        gl.uniform1f(uniforms.stateSpeak, this.stateValues.speak);
+        gl.uniform1f(uniforms.stateMuted, this.stateValues.muted);
+        gl.uniform1f(uniforms.stateError, this.stateValues.error);
+        gl.uniform2f(uniforms.resolution, this.canvas.width, this.canvas.height);
+        gl.uniform4fv(uniforms.audio, this.audio);
+        gl.uniform4fv(uniforms.cumulativeAudio, this.cumulativeAudio);
+        gl.drawArrays(gl.TRIANGLES, 0, 6);
+    }
+    updateState(deltaSeconds) {
+        this.stateValues = stepVoiceOrbState(this.stateValues, this.state, deltaSeconds, this.previewTimeMs !== undefined);
+    }
+    updateAudio(deltaSeconds, time) {
+        if (!this.hasAudioInput) {
+            this.updatePreviewAudio(deltaSeconds, time);
+            return;
+        }
+        const source = [
+            this.audioLevels.low,
+            this.audioLevels.mid,
+            this.audioLevels.high,
+            this.audioLevels.overall,
+        ];
+        const frameScale = deltaSeconds * 60;
+        const audioFactor = interpolationFactor(deltaSeconds, 2);
+        for (let index = 0; index < this.audio.length; index += 1) {
+            const value = (source[index] ?? 0) * frameScale;
+            this.audio[index] += (value - this.audio[index]) * audioFactor;
+            if (!this.reducedMotion) {
+                this.cumulativeAudio[index] +=
+                    (source[index] ?? 0) * frameScale * 40 * audioFactor;
+            }
+        }
+        const envelopes = stepVoiceOrbEnergyEnvelopes(this.micLevel, this.outputLevel, this.audioLevels, deltaSeconds);
+        this.micLevel = envelopes.micLevel;
+        this.outputLevel = envelopes.outputLevel;
+    }
+    resizeCanvas() {
+        const pixelRatio = Math.min(window.devicePixelRatio || 1, 1.5);
+        const width = Math.max(1, Math.round(this.canvas.clientWidth * pixelRatio));
+        const height = Math.max(1, Math.round(this.canvas.clientHeight * pixelRatio));
+        if (this.canvas.width !== width)
+            this.canvas.width = width;
+        if (this.canvas.height !== height)
+            this.canvas.height = height;
+    }
+    renderCanvasFallback(time) {
+        const context = this.canvasContext;
+        if (!context)
+            return;
+        const stateAmount = Math.max(...Object.values(this.stateValues));
+        const radius = Math.min(this.canvas.width, this.canvas.height) *
+            0.29 *
+            (1 + this.outputLevel * 0.12) *
+            stateAmount;
+        const centerX = this.canvas.width / 2;
+        const centerY = this.canvas.height / 2 +
+            (this.reducedMotion ? 0 : Math.sin(time * 0.36) * 1.5);
+        context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        if (radius <= 0.1)
+            return;
+        const gradient = context.createLinearGradient(centerX - radius * 0.7, centerY - radius, centerX + radius * 0.55, centerY + radius);
+        gradient.addColorStop(0, getFallbackColor([1, 129, 254], this.stateValues.muted, this.stateValues.error));
+        gradient.addColorStop(0.46, getFallbackColor([164, 239, 255], this.stateValues.muted, this.stateValues.error, 0.98));
+        gradient.addColorStop(1, getFallbackColor([255, 253, 239], this.stateValues.muted, this.stateValues.error, 0.98));
+        context.fillStyle = gradient;
+        context.beginPath();
+        context.arc(centerX, centerY, radius, 0, Math.PI * 2);
+        context.fill();
+    }
+    updatePreviewAudio(deltaSeconds, time) {
+        const preview = getVoiceOrbPreviewAudio(this.state, this.previewAudioLevel, this.previewTimeMs === undefined, time);
+        if (this.previewTimeMs !== undefined) {
+            for (let index = 0; index < this.audio.length; index += 1) {
+                this.audio[index] = preview[index] ?? 0;
+                this.cumulativeAudio[index] = (preview[index] ?? 0) * time * 2.5;
+            }
+            this.micLevel = preview[3] ?? 0;
+            this.outputLevel = preview[3] ?? 0;
+            return;
+        }
+        for (let index = 0; index < this.audio.length; index += 1) {
+            const target = preview[index] ?? 0;
+            const duration = target > this.audio[index] ? 0.24 : 0.72;
+            this.audio[index] +=
+                (target - this.audio[index]) *
+                    interpolationFactor(deltaSeconds, duration);
+            if (!this.reducedMotion) {
+                this.cumulativeAudio[index] +=
+                    this.audio[index] *
+                        deltaSeconds *
+                        (this.state === 'speaking' ? 7 : 3.5);
+            }
+        }
+        const previewOverall = preview[3] ?? 0;
+        const micDuration = previewOverall > this.micLevel ? 0.26 : 0.8;
+        this.micLevel +=
+            (previewOverall - this.micLevel) *
+                interpolationFactor(deltaSeconds, micDuration);
+        const outputTarget = this.previewAudioLevel > 0 ? previewOverall : 0;
+        const outputDuration = outputTarget > this.outputLevel ? 0.09 : 0.3;
+        this.outputLevel +=
+            (outputTarget - this.outputLevel) *
+                interpolationFactor(deltaSeconds, outputDuration);
+    }
+    handleContextLost = (event) => {
+        event.preventDefault();
+        if (this.animationFrame !== null)
+            cancelAnimationFrame(this.animationFrame);
+        this.animationFrame = null;
+    };
+    handleContextRestored = () => {
+        const gl = this.gl;
+        if (!gl)
+            return;
+        this.buffer = null;
+        this.program = null;
+        this.uniforms = null;
+        try {
+            this.createProgram(gl);
+        }
+        catch {
+            this.gl = null;
+            this.canvasContext = this.canvas.getContext('2d');
+        }
+        this.start();
+    };
+}

package/dist/components/chat/voice-orb-shaders.d.ts

@@ -0,0 +1,3 @@
+export declare const voiceOrbVertexShader = "\nattribute vec2 a_position;\nvarying vec2 v_uv;\n\nvoid main() {\n  v_uv = (a_position + 1.0) * 0.5;\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n";
+export declare const voiceOrbFragmentShader = "\nprecision highp float;\n\nvarying vec2 v_uv;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_micLevel;\nuniform float u_outputLevel;\nuniform float u_stateListen;\nuniform float u_stateThink;\nuniform float u_stateSpeak;\nuniform float u_stateMuted;\nuniform float u_stateError;\nuniform float u_motionScale;\nuniform vec4 u_audio;\nuniform vec4 u_cumulativeAudio;\n\n#define PI 3.141592653589793\n#define NUM_OCTAVES 5\n\nfloat rand(vec2 n) {\n  return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);\n}\n\nfloat noise(vec2 p) {\n  vec2 ip = floor(p);\n  vec2 u = fract(p);\n  u = u * u * (3.0 - 2.0 * u);\n  float value = mix(\n    mix(rand(ip), rand(ip + vec2(1.0, 0.0)), u.x),\n    mix(rand(ip + vec2(0.0, 1.0)), rand(ip + vec2(1.0, 1.0)), u.x),\n    u.y\n  );\n  return value * value;\n}\n\nfloat fbm(vec2 point) {\n  float value = 0.0;\n  float amplitude = 0.5;\n  vec2 shift = vec2(100.0);\n  mat2 rotation = mat2(cos(0.5), sin(0.5), -sin(0.5), cos(0.5));\n  for (int index = 0; index < NUM_OCTAVES; index++) {\n    value += amplitude * noise(point);\n    point = rotation * point * 2.0 + shift;\n    amplitude *= 0.5;\n  }\n  return value;\n}\n\nvec3 blendLinearBurn(vec3 base, vec3 blend, float opacity) {\n  vec3 burned = max(base + blend - vec3(1.0), vec3(0.0));\n  return burned * opacity + base * (1.0 - opacity);\n}\n\nvec4 permute(vec4 value) {\n  return mod((value * 34.0 + 1.0) * value, 289.0);\n}\n\nvec4 taylorInvSqrt(vec4 value) {\n  return 1.79284291400159 - 0.85373472095314 * value;\n}\n\nvec3 fade(vec3 value) {\n  return value * value * value * (value * (value * 6.0 - 15.0) + 10.0);\n}\n\nfloat cnoise(vec3 point) {\n  vec3 cell0 = floor(point);\n  vec3 cell1 = cell0 + vec3(1.0);\n  cell0 = mod(cell0, 289.0);\n  cell1 = mod(cell1, 289.0);\n  vec3 offset0 = fract(point);\n  vec3 offset1 = offset0 - vec3(1.0);\n  vec4 x = vec4(cell0.x, cell1.x, cell0.x, cell1.x);\n  vec4 y = vec4(cell0.yy, cell1.yy);\n  vec4 z0 = vec4(cell0.z);\n  vec4 z1 = vec4(cell1.z);\n  vec4 xy = permute(permute(x) + y);\n  vec4 xy0 = permute(xy + z0);\n  vec4 xy1 = permute(xy + z1);\n\n  vec4 gx0 = xy0 / 7.0;\n  vec4 gy0 = fract(floor(gx0) / 7.0) - 0.5;\n  gx0 = fract(gx0);\n  vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);\n  vec4 sz0 = step(gz0, vec4(0.0));\n  gx0 -= sz0 * (step(vec4(0.0), gx0) - 0.5);\n  gy0 -= sz0 * (step(vec4(0.0), gy0) - 0.5);\n\n  vec4 gx1 = xy1 / 7.0;\n  vec4 gy1 = fract(floor(gx1) / 7.0) - 0.5;\n  gx1 = fract(gx1);\n  vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);\n  vec4 sz1 = step(gz1, vec4(0.0));\n  gx1 -= sz1 * (step(vec4(0.0), gx1) - 0.5);\n  gy1 -= sz1 * (step(vec4(0.0), gy1) - 0.5);\n\n  vec3 g000 = vec3(gx0.x, gy0.x, gz0.x);\n  vec3 g100 = vec3(gx0.y, gy0.y, gz0.y);\n  vec3 g010 = vec3(gx0.z, gy0.z, gz0.z);\n  vec3 g110 = vec3(gx0.w, gy0.w, gz0.w);\n  vec3 g001 = vec3(gx1.x, gy1.x, gz1.x);\n  vec3 g101 = vec3(gx1.y, gy1.y, gz1.y);\n  vec3 g011 = vec3(gx1.z, gy1.z, gz1.z);\n  vec3 g111 = vec3(gx1.w, gy1.w, gz1.w);\n\n  vec4 norm0 = taylorInvSqrt(\n    vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110))\n  );\n  g000 *= norm0.x;\n  g010 *= norm0.y;\n  g100 *= norm0.z;\n  g110 *= norm0.w;\n  vec4 norm1 = taylorInvSqrt(\n    vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111))\n  );\n  g001 *= norm1.x;\n  g011 *= norm1.y;\n  g101 *= norm1.z;\n  g111 *= norm1.w;\n\n  float n000 = dot(g000, offset0);\n  float n100 = dot(g100, vec3(offset1.x, offset0.yz));\n  float n010 = dot(g010, vec3(offset0.x, offset1.y, offset0.z));\n  float n110 = dot(g110, vec3(offset1.xy, offset0.z));\n  float n001 = dot(g001, vec3(offset0.xy, offset1.z));\n  float n101 = dot(g101, vec3(offset1.x, offset0.y, offset1.z));\n  float n011 = dot(g011, vec3(offset0.x, offset1.yz));\n  float n111 = dot(g111, offset1);\n\n  vec3 fadePoint = fade(offset0);\n  vec4 noiseZ = mix(\n    vec4(n000, n100, n010, n110),\n    vec4(n001, n101, n011, n111),\n    fadePoint.z\n  );\n  vec2 noiseYZ = mix(noiseZ.xy, noiseZ.zw, fadePoint.y);\n  return 2.2 * mix(noiseYZ.x, noiseYZ.y, fadePoint.x);\n}\n\nvoid main() {\n  vec2 st = v_uv - 0.5;\n  st.x *= u_resolution.x / u_resolution.y;\n\n  float sound = max(max(u_audio.x, u_audio.y), max(u_audio.z, u_audio.w));\n  float stateAmount = max(\n    max(u_stateListen, u_stateThink),\n    max(u_stateSpeak, max(u_stateMuted, u_stateError))\n  );\n  float audioEnergy = smoothstep(0.08, 0.72, max(sound, u_micLevel));\n  float outputEnergy = smoothstep(0.04, 0.46, u_outputLevel);\n  float animatedTime = u_time * u_motionScale;\n  float breath = sin(animatedTime * PI * 0.34) * 0.5 + 0.5;\n  float entry = smoothstep(0.0, 0.9, stateAmount);\n  float maxRadius = min(\n    0.36,\n    min(0.5, 0.5 * u_resolution.x / u_resolution.y) - 0.16\n  );\n  float baseRadius = mix(maxRadius * 0.88, maxRadius * 0.94, u_stateThink);\n  float radius = baseRadius * mix(0.82, 1.0, entry);\n  radius += outputEnergy * maxRadius * 0.12;\n  radius +=\n    (1.0 - u_stateThink) *\n    (1.0 - outputEnergy) *\n    breath *\n    maxRadius *\n    0.01;\n  radius = min(maxRadius, radius);\n\n  vec2 drift = vec2(\n    sin(animatedTime * 0.43) * 0.0028,\n    sin(animatedTime * 0.36 + 1.7) * 0.0035\n  );\n  vec2 lifted = st - drift;\n  float distanceToEdge = length(lifted) - radius;\n  float edgeWidth = max(1.25 / min(u_resolution.x, u_resolution.y), 0.0014);\n  if (distanceToEdge > edgeWidth) discard;\n  float edge = 1.0 - smoothstep(-edgeWidth, edgeWidth, distanceToEdge);\n\n  vec2 uv = lifted / (2.0 * radius) + 0.5;\n  float soundScale = 1.0 + audioEnergy * 0.22;\n  float time = animatedTime * 0.34;\n  float noiseX = cnoise(vec3(\n    uv + vec2(0.0, 74.8572),\n    (time + u_cumulativeAudio.x * 0.05 * soundScale) * 0.3\n  ));\n  float noiseY = cnoise(vec3(\n    uv + vec2(203.91282, 10.0),\n    (time + u_cumulativeAudio.z * 0.05 * soundScale) * 0.3\n  ));\n  uv += vec2(noiseX * 2.0, noiseY) * 0.19;\n\n  float voiceWarpX = cnoise(vec3(\n    uv * 3.1 + vec2(0.0, 17.3),\n    u_cumulativeAudio.x * 0.085 + u_cumulativeAudio.z * 0.035\n  ));\n  float voiceWarpY = cnoise(vec3(\n    uv * 3.4 + vec2(31.7, 0.0),\n    u_cumulativeAudio.y * 0.075 + u_cumulativeAudio.w * 0.045\n  ));\n  uv += vec2(voiceWarpX, voiceWarpY) * audioEnergy * 0.04;\n  uv.y +=\n    sin(uv.x * 5.4 + u_cumulativeAudio.w * 0.19) *\n    audioEnergy *\n    0.016;\n\n  float watercolor =\n    cnoise(vec3(uv * 18.0 + vec2(344.91282, 0.0), time * 0.3)) +\n    cnoise(vec3(uv * 39.6 + vec2(723.937, 0.0), time * 0.4)) * 0.5;\n  uv += watercolor * 0.006;\n\n  float textureA = noise(\n    uv * 22.0 + vec2(time * 0.08, u_cumulativeAudio.x * 0.025)\n  );\n  float textureB = noise(\n    vec2(1.0 - uv.x, uv.y) * 41.0 +\n    vec2(u_cumulativeAudio.z * 0.018, -time * 0.11)\n  );\n  float texture = mix(\n    textureA,\n    textureB,\n    sin(time + u_cumulativeAudio.w * 0.12) * 0.5 + 0.5\n  ) - 0.5;\n  uv += texture * (0.012 + audioEnergy * 0.004);\n\n  uv.y = 1.0 - uv.y;\n  vec2 centeredUv = uv - 0.5;\n  float angle = -0.16;\n  uv = mat2(cos(angle), -sin(angle), sin(angle), cos(angle)) * centeredUv + 0.5;\n  uv.y -= 0.03;\n\n  vec2 stNoise = uv * 1.25;\n  vec2 q = vec2(\n    fbm(\n      stNoise * 0.5 +\n      0.075 * (time + u_cumulativeAudio.w * 0.175 * soundScale)\n    ),\n    fbm(\n      stNoise * 0.5 +\n      0.075 * (time + u_cumulativeAudio.x * 0.136 * soundScale)\n    )\n  );\n  vec2 r = vec2(\n    fbm(\n      stNoise + q + vec2(0.3, 9.2) +\n      0.15 * (time + u_cumulativeAudio.y * 0.234 * soundScale)\n    ),\n    fbm(\n      stNoise + q + vec2(8.3, 0.8) +\n      0.126 * (time + u_cumulativeAudio.z * 0.165 * soundScale)\n    )\n  );\n  float field = fbm(stNoise + r - q);\n  float fullField = pow(\n    ((field + 0.6 * field * field + 0.7 * field) + 0.5) * 0.5,\n    0.55\n  );\n\n  vec3 mainColor = mix(\n    vec3(0.94, 0.965, 1.0),\n    vec3(1.0, 0.99, 0.96),\n    u_micLevel\n  );\n  vec3 lowColor = vec3(0.36, 0.34, 0.96);\n  vec3 midColor = mix(\n    vec3(0.57, 0.64, 1.0),\n    vec3(0.96, 0.92, 1.0),\n    u_micLevel\n  );\n  vec3 highColor = vec3(1.0, 0.99, 0.97);\n\n  vec3 offsets = vec3(\n    u_cumulativeAudio.x * 0.15 * soundScale,\n    -u_cumulativeAudio.y * 0.5 * soundScale,\n    u_cumulativeAudio.z * 1.5 * soundScale\n  );\n\n  vec2 lowUv = uv + vec2((fullField - 0.5) * 1.2, 0.025);\n  float lowNoise = noise(\n    lowUv * 2.0 + vec2(sin(offsets.x * 0.25), time * 0.5 + offsets.x)\n  ) * 2.0;\n  float lowMask = smoothstep(\n    lowNoise - 1.8,\n    lowNoise + 1.8,\n    ((lowUv.y - 0.5) * (5.0 - u_audio.x * 0.05 * soundScale)) + 0.5\n  );\n\n  vec2 midUv = uv + vec2((fullField - 0.5) * 0.85, 0.025);\n  float midNoise = noise(\n    midUv * 4.0 +\n    vec2(sin(offsets.y * 0.15) * 2.4 + 293.0, time + offsets.y * 0.5)\n  ) * 2.0;\n  float midMask = smoothstep(\n    midNoise - ((0.9 + u_audio.y * 0.4) * 1.5),\n    midNoise + ((0.9 + u_audio.y * 0.8) * 1.5),\n    ((midUv.y - 0.6) * (5.0 - u_audio.y * 0.75)) + 0.5\n  );\n\n  vec2 highUv = uv + vec2((fullField - 0.5) * 1.1);\n  float highNoise = noise(\n    highUv * 6.0 +\n    vec2(sin(offsets.z * 0.1) * 2.4 + 153.0, time * 1.2 + offsets.z * 0.8)\n  ) * 2.0;\n  float highMask = smoothstep(\n    highNoise - 1.05,\n    highNoise + 1.05,\n    ((highUv.y - 0.9) * 6.0) + 0.5\n  );\n\n  lowMask = pow(lowMask, 0.8);\n  midMask = pow(midMask, 0.9);\n  vec3 color = blendLinearBurn(mainColor, lowColor, 1.0 - lowMask);\n  color = blendLinearBurn(\n    color,\n    mix(mainColor, midColor, 1.0 - midMask),\n    lowMask\n  );\n  color = mix(\n    color,\n    mix(mainColor, highColor, 1.0 - highMask),\n    lowMask * midMask\n  );\n\n  float fineNoise = fbm(\n    uv * 12.0 + vec2(time * 0.13, -time * 0.09) + r * 0.4\n  );\n  color = mix(\n    color,\n    highColor,\n    smoothstep(0.58, 0.9, fineNoise) * (0.035 + audioEnergy * 0.025)\n  );\n  color = mix(\n    color,\n    lowColor,\n    smoothstep(0.42, 0.12, fineNoise) * 0.018\n  );\n\n  float luminance = dot(color, vec3(0.299, 0.587, 0.114));\n  color = mix(color, vec3(luminance), u_stateMuted * 0.72);\n  color = mix(color, vec3(1.0, 0.35, 0.31), u_stateError * 0.58);\n\n  float alpha = edge * smoothstep(0.0, 0.18, stateAmount + 0.3);\n  gl_FragColor = vec4(color, alpha);\n}\n";
+//# sourceMappingURL=voice-orb-shaders.d.ts.map

package/dist/components/chat/voice-orb-shaders.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"voice-orb-shaders.d.ts","sourceRoot":"","sources":["../../../src/components/chat/voice-orb-shaders.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,4JAQhC,CAAA;AAED,eAAO,MAAM,sBAAsB,g/TAyVlC,CAAA"}