@moldable-ai/ui 0.2.21 → 0.2.24

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

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

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

@@ -0,0 +1,24 @@
+export declare const voiceOrbStates: readonly ["inactive", "connecting", "listening", "thinking", "speaking", "muted", "disconnecting", "error"];
+export type VoiceOrbState = (typeof voiceOrbStates)[number];
+export interface VoiceOrbAudioLevels {
+    low: number;
+    mid: number;
+    high: number;
+    overall: number;
+}
+export interface VoiceOrbStateTargets {
+    listen: number;
+    think: number;
+    speak: number;
+    muted: number;
+    error: number;
+}
+export declare const voiceOrbStateTransitionSeconds = 0.28;
+export declare const voiceOrbSpeakingThreshold = 0.08;
+export declare const voiceOrbSilenceThreshold = 0.04;
+export declare const voiceOrbSilenceHoldMs = 300;
+export declare const silentVoiceOrbAudioLevels: VoiceOrbAudioLevels;
+export declare function normalizeVoiceOrbAudioLevels(levels: VoiceOrbAudioLevels): VoiceOrbAudioLevels;
+export declare function getVoiceOrbStateTargets(state: VoiceOrbState): VoiceOrbStateTargets;
+export declare function getVoiceOrbStateLabel(state: VoiceOrbState): string;
+//# sourceMappingURL=voice-orb-types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voice-orb-types.d.ts","sourceRoot":"","sources":["../../../src/components/chat/voice-orb-types.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,6GASjB,CAAA;AAEV,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAE3D,MAAM,WAAW,mBAAmB;IAClC,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,8BAA8B,OAAO,CAAA;AAClD,eAAO,MAAM,yBAAyB,OAAO,CAAA;AAC7C,eAAO,MAAM,wBAAwB,OAAO,CAAA;AAC5C,eAAO,MAAM,qBAAqB,MAAM,CAAA;AAExC,eAAO,MAAM,yBAAyB,EAAE,mBAKvC,CAAA;AAOD,wBAAgB,4BAA4B,CAC1C,MAAM,EAAE,mBAAmB,GAC1B,mBAAmB,CAOrB;AAED,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,aAAa,GACnB,oBAAoB,CAmBtB;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,aAAa,GAAG,MAAM,CAmBlE"}

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

@@ -0,0 +1,73 @@
+export const voiceOrbStates = [
+    'inactive',
+    'connecting',
+    'listening',
+    'thinking',
+    'speaking',
+    'muted',
+    'disconnecting',
+    'error',
+];
+export const voiceOrbStateTransitionSeconds = 0.28;
+export const voiceOrbSpeakingThreshold = 0.08;
+export const voiceOrbSilenceThreshold = 0.04;
+export const voiceOrbSilenceHoldMs = 300;
+export const silentVoiceOrbAudioLevels = {
+    low: 0,
+    mid: 0,
+    high: 0,
+    overall: 0,
+};
+function normalizeLevel(value) {
+    if (!Number.isFinite(value))
+        return 0;
+    return Math.max(0, Math.min(1, value));
+}
+export function normalizeVoiceOrbAudioLevels(levels) {
+    return {
+        low: normalizeLevel(levels.low),
+        mid: normalizeLevel(levels.mid),
+        high: normalizeLevel(levels.high),
+        overall: normalizeLevel(levels.overall),
+    };
+}
+export function getVoiceOrbStateTargets(state) {
+    switch (state) {
+        case 'inactive':
+            return { listen: 0, think: 0, speak: 0, muted: 0, error: 0 };
+        case 'connecting':
+            return { listen: 0, think: 1, speak: 0, muted: 0, error: 0 };
+        case 'listening':
+            return { listen: 1, think: 0, speak: 0, muted: 0, error: 0 };
+        case 'thinking':
+            return { listen: 0.65, think: 1, speak: 0, muted: 0, error: 0 };
+        case 'speaking':
+            return { listen: 0.2, think: 0, speak: 1, muted: 0, error: 0 };
+        case 'muted':
+            return { listen: 0.45, think: 0, speak: 0, muted: 1, error: 0 };
+        case 'disconnecting':
+            return { listen: 0.35, think: 0, speak: 0, muted: 0, error: 0 };
+        case 'error':
+            return { listen: 0.2, think: 0, speak: 0, muted: 0, error: 1 };
+    }
+}
+export function getVoiceOrbStateLabel(state) {
+    switch (state) {
+        case 'inactive':
+            return 'Voice inactive';
+        case 'connecting':
+            return 'Connecting voice';
+        case 'listening':
+            return 'Listening';
+        case 'thinking':
+            return 'Thinking';
+        case 'speaking':
+            return 'Speaking';
+        case 'muted':
+            return 'Microphone muted';
+        case 'disconnecting':
+            return 'Ending voice session';
+        case 'error':
+            return 'Voice unavailable';
+    }
+}

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { type VoiceOrbAudioLevels, type VoiceOrbState } from './voice-orb-types.js';
+export interface VoiceOrbProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    state: VoiceOrbState;
+    /** Audio stream to analyse. A live session should pass its remote output. */
+    stream?: MediaStream | null;
+    /** Precomputed levels take effect when no stream is supplied. */
+    audioLevels?: VoiceOrbAudioLevels;
+    onAudioLevels?: (levels: VoiceOrbAudioLevels) => void;
+    /** Synthetic energy used for state previews before a stream is available. */
+    previewAudioLevel?: number;
+    /** Render one deterministic frame at this timestamp instead of animating. */
+    previewTimeMs?: number;
+    reducedMotion?: boolean;
+    size?: number;
+    glow?: boolean;
+    label?: string;
+}
+export declare function VoiceOrb({ state, stream, audioLevels, onAudioLevels, previewAudioLevel, previewTimeMs, reducedMotion, size, glow, label, className, style, ...props }: VoiceOrbProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=voice-orb.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voice-orb.d.ts","sourceRoot":"","sources":["../../../src/components/chat/voice-orb.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,aAAa,EAGnB,MAAM,mBAAmB,CAAA;AAE1B,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC/D,KAAK,EAAE,aAAa,CAAA;IACpB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC3B,iEAAiE;IACjE,WAAW,CAAC,EAAE,mBAAmB,CAAA;IACjC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAA;IACrD,6EAA6E;IAC7E,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,6EAA6E;IAC7E,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,MAAa,EACb,WAAW,EACX,aAAa,EACb,iBAAqB,EACrB,aAAa,EACb,aAAa,EACb,IAAU,EACV,IAAW,EACX,KAAK,EACL,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,aAAa,2CAkFf"}

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

@@ -0,0 +1,67 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { cn } from '../../lib/utils.js';
+import { VoiceOrbStreamAnalyser } from './voice-orb-audio.js';
+import { VoiceOrbRenderer } from './voice-orb-renderer.js';
+import { getVoiceOrbStateLabel, normalizeVoiceOrbAudioLevels, } from './voice-orb-types.js';
+export function VoiceOrb({ state, stream = null, audioLevels, onAudioLevels, previewAudioLevel = 0, previewTimeMs, reducedMotion, size = 160, glow = true, label, className, style, ...props }) {
+    const canvasRef = useRef(null);
+    const rendererRef = useRef(null);
+    const analyserRef = useRef(null);
+    const onAudioLevelsRef = useRef(onAudioLevels);
+    useEffect(() => {
+        onAudioLevelsRef.current = onAudioLevels;
+    }, [onAudioLevels]);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const renderer = new VoiceOrbRenderer(canvas);
+        const analyser = new VoiceOrbStreamAnalyser((levels) => {
+            renderer.setAudioLevels(levels);
+            onAudioLevelsRef.current?.(levels);
+        });
+        rendererRef.current = renderer;
+        analyserRef.current = analyser;
+        return () => {
+            analyser.dispose();
+            renderer.dispose();
+            analyserRef.current = null;
+            rendererRef.current = null;
+        };
+    }, []);
+    useEffect(() => {
+        rendererRef.current?.setState(state);
+    }, [state]);
+    useEffect(() => {
+        analyserRef.current?.setStream(stream);
+    }, [stream]);
+    useEffect(() => {
+        if (stream)
+            return;
+        const normalized = audioLevels
+            ? normalizeVoiceOrbAudioLevels(audioLevels)
+            : null;
+        rendererRef.current?.setAudioLevels(normalized);
+        if (normalized)
+            onAudioLevelsRef.current?.(normalized);
+    }, [audioLevels, stream]);
+    useEffect(() => {
+        rendererRef.current?.setPreview(previewAudioLevel, previewTimeMs);
+    }, [previewAudioLevel, previewTimeMs]);
+    useEffect(() => {
+        const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+        const sync = () => {
+            rendererRef.current?.setReducedMotion(reducedMotion ?? mediaQuery.matches);
+        };
+        sync();
+        mediaQuery.addEventListener('change', sync);
+        return () => mediaQuery.removeEventListener('change', sync);
+    }, [reducedMotion]);
+    return (_jsx("div", { role: "img", "aria-label": label ?? getVoiceOrbStateLabel(state), "data-slot": "voice-orb", "data-state": state, className: cn('relative shrink-0', className), style: { width: size, height: size, ...style }, ...props, children: _jsx("canvas", { ref: canvasRef, "aria-hidden": "true", className: "pointer-events-none absolute -inset-5 size-[calc(100%+2.5rem)] max-w-none", style: {
+                filter: glow
+                    ? 'drop-shadow(0 0 4px rgb(154 154 249 / 55%))'
+                    : undefined,
+            } }) }));
+}

package/dist/components/code-block.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useEffect, useState } from 'react';
-import { cn } from '../lib/utils';
+import { cn } from '../lib/utils.js';
 let highlighterPromise = null;
 async function getHighlighter() {
     if (!highlighterPromise) {

package/dist/components/hardware/bluetooth-panel.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type MoldableBluetoothConnection, type MoldableBluetoothDevice, type MoldableBluetoothRemoteGATTCharacteristic, type MoldableNativeBluetoothDevice } from '../../lib/native-hardware';
+import { type MoldableBluetoothConnection, type MoldableBluetoothDevice, type MoldableBluetoothRemoteGATTCharacteristic, type MoldableNativeBluetoothDevice } from '../../lib/native-hardware/index.js';
 export type MoldableBluetoothStatus = 'idle' | 'requesting' | 'connecting' | 'connected' | 'error';
 export interface MoldableBluetoothCharacteristicInfo {
     serviceUuid: string;
@@ -30,7 +30,7 @@ export declare function useMoldableBluetooth(options?: UseMoldableBluetoothOptio
     services: MoldableBluetoothServiceInfo[];
     subscribedUuids: string[];
     error: Error | null;
-    entries: import("./stream-log").StreamLogEntry[];
+    entries: import("./stream-log.js").StreamLogEntry[];
     request: (serviceUuid?: string) => Promise<void>;
     connect: () => Promise<void>;
     disconnect: () => Promise<void>;

package/dist/components/hardware/bluetooth-panel.js

@@ -2,16 +2,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Binary, Bluetooth } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { NativeHardwareBridgeError, connectMoldableBluetoothDevice, isMoldableBluetoothSupported, observeMoldableBluetoothNotifications, readMoldableBluetoothValue, requestMoldableBluetoothWithFallback, writeMoldableBluetoothValue, } from '../../lib/native-hardware';
-import { Button } from '../ui/button';
-import { Input } from '../ui/input';
-import { Spinner } from '../ui/spinner';
-import { cleanupBluetoothSubscriptions, parseBluetoothHexBytes, } from './bluetooth-panel-helpers';
-import { CapabilityBadge } from './capability-badge';
-import { DeviceList, DeviceListEmpty, DeviceListItem } from './device-list';
-import { HardwarePanel, HardwarePanelAction, HardwarePanelContent, HardwarePanelHeader, HardwarePanelIcon, HardwarePanelTitle, } from './hardware-panel';
-import { LiveIndicator } from './live-indicator';
-import { StreamLog, useStreamLog } from './stream-log';
+import { NativeHardwareBridgeError, connectMoldableBluetoothDevice, isMoldableBluetoothSupported, observeMoldableBluetoothNotifications, readMoldableBluetoothValue, requestMoldableBluetoothWithFallback, writeMoldableBluetoothValue, } from '../../lib/native-hardware/index.js';
+import { Button } from '../ui/button.js';
+import { Input } from '../ui/input.js';
+import { Spinner } from '../ui/spinner.js';
+import { cleanupBluetoothSubscriptions, parseBluetoothHexBytes, } from './bluetooth-panel-helpers.js';
+import { CapabilityBadge } from './capability-badge.js';
+import { DeviceList, DeviceListEmpty, DeviceListItem } from './device-list.js';
+import { HardwarePanel, HardwarePanelAction, HardwarePanelContent, HardwarePanelHeader, HardwarePanelIcon, HardwarePanelTitle, } from './hardware-panel.js';
+import { LiveIndicator } from './live-indicator.js';
+import { StreamLog, useStreamLog } from './stream-log.js';
 const HEX_DUMP_MAX_BYTES = 32;
 const BLUETOOTH_BASE_UUID_SUFFIX = '-0000-1000-8000-00805f9b34fb';
 function toError(cause) {

package/dist/components/hardware/camera-preview.js

@@ -2,12 +2,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Camera, CameraOff, RefreshCw, Square } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { NativeHardwareBridgeError, enumerateMoldableMediaDevices, getMoldableCameraStream, getMoldableMediaPermissionStatus, requestMoldableMediaPermission, stopMoldableMediaStream, } from '../../lib/native-hardware';
-import { cn } from '../../lib/utils';
-import { Button } from '../ui/button';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../ui/select';
-import { Spinner } from '../ui/spinner';
-import { LiveIndicator } from './live-indicator';
+import { NativeHardwareBridgeError, enumerateMoldableMediaDevices, getMoldableCameraStream, getMoldableMediaPermissionStatus, requestMoldableMediaPermission, stopMoldableMediaStream, } from '../../lib/native-hardware/index.js';
+import { cn } from '../../lib/utils.js';
+import { Button } from '../ui/button.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../ui/select.js';
+import { Spinner } from '../ui/spinner.js';
+import { LiveIndicator } from './live-indicator.js';
 function isPermissionDenied(error) {
     if (error instanceof NativeHardwareBridgeError) {
         return error.code === 'permission_denied';

package/dist/components/hardware/capability-badge.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { NativeHardwareCapabilityId } from '../../lib/native-hardware';
-import { type MoldableCapabilityStatus } from './use-capability';
+import type { NativeHardwareCapabilityId } from '../../lib/native-hardware/index.js';
+import { type MoldableCapabilityStatus } from './use-capability.js';
 declare function CapabilityDot({ status, className, ...props }: React.ComponentProps<'span'> & {
     status: MoldableCapabilityStatus;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/hardware/capability-badge.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '../../lib/utils';
-import { useMoldableCapability, } from './use-capability';
+import { cn } from '../../lib/utils.js';
+import { useMoldableCapability, } from './use-capability.js';
 const STATUS_LABEL = {
     checking: 'Checking',
     supported: 'Supported',

package/dist/components/hardware/capability-matrix.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type NativeHardwareCapabilityId } from '../../lib/native-hardware';
+import { type NativeHardwareCapabilityId } from '../../lib/native-hardware/index.js';
 export interface CapabilityMatrixProps extends React.ComponentProps<'div'> {
     /** Subset of capabilities to show; defaults to every known capability. */
     capabilities?: NativeHardwareCapabilityId[];

package/dist/components/hardware/capability-matrix.js

@@ -2,11 +2,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Activity, BatteryCharging, Bell, Bluetooth, Cable, Camera, Clipboard, ClipboardCopy, Fingerprint, Gamepad2, KeyRound, Keyboard, MapPin, Mic, Monitor, MonitorUp, Moon, Music, Timer, Usb, Vibrate, Volume2, } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
-import { NATIVE_HARDWARE_CAPABILITY_IDS, } from '../../lib/native-hardware';
-import { cn } from '../../lib/utils';
-import { Skeleton } from '../ui/skeleton';
-import { CapabilityDot } from './capability-badge';
-import { loadMoldableCapabilities, } from './use-capability';
+import { NATIVE_HARDWARE_CAPABILITY_IDS, } from '../../lib/native-hardware/index.js';
+import { cn } from '../../lib/utils.js';
+import { Skeleton } from '../ui/skeleton.js';
+import { CapabilityDot } from './capability-badge.js';
+import { loadMoldableCapabilities, } from './use-capability.js';
 const CAPABILITY_ICON = {
     camera: Camera,
     microphone: Mic,