@navai/voice-frontend 0.1.1 → 0.1.3

package/dist/index.cjs

@@ -3,6 +3,9 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -17,15 +20,561 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// src/orb/styles.ts
+function ensureNavaiVoiceOrbStyles() {
+  if (typeof document === "undefined") {
+    return;
+  }
+  if (document.getElementById(NAVAI_VOICE_ORB_STYLE_ID)) {
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = NAVAI_VOICE_ORB_STYLE_ID;
+  style.textContent = NAVAI_VOICE_ORB_CSS;
+  document.head.appendChild(style);
+}
+function useNavaiVoiceOrbStyles() {
+  (0, import_react2.useEffect)(() => {
+    ensureNavaiVoiceOrbStyles();
+  }, []);
+}
+var import_react2, NAVAI_VOICE_ORB_STYLE_ID, NAVAI_VOICE_ORB_CSS;
+var init_styles = __esm({
+  "src/orb/styles.ts"() {
+    "use strict";
+    import_react2 = require("react");
+    NAVAI_VOICE_ORB_STYLE_ID = "navai-voice-orb-styles";
+    NAVAI_VOICE_ORB_CSS = `
+.navai-orb-container { position: relative; z-index: 0; width: 100%; height: 100%; }
+.navai-voice-orb-dock { display: grid; justify-items: center; gap: 0.6rem; }
+.navai-voice-orb-dock.is-bottom-right,
+.navai-voice-orb-dock.is-bottom-left { position: fixed; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 70; }
+.navai-voice-orb-dock.is-bottom-right { right: calc(1rem + env(safe-area-inset-right)); }
+.navai-voice-orb-dock.is-bottom-left { left: calc(1rem + env(safe-area-inset-left)); }
+.navai-voice-orb-wrap { position: relative; width: clamp(4.2rem, 8vw, 5.5rem); aspect-ratio: 1 / 1; display: grid; place-items: center; }
+.navai-voice-orb-surface { position: absolute; inset: 0; border-radius: 999px; overflow: hidden; transition: transform 180ms ease, filter 180ms ease, opacity 180ms ease; }
+.navai-voice-orb-surface::after { content: ""; position: absolute; inset: 10%; border-radius: inherit; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.1), rgba(6,9,20,0)); pointer-events: none; }
+.navai-voice-orb-surface.is-highlighted { transform: scale(1.03); filter: saturate(1.08); }
+.navai-voice-orb-surface .navai-orb-container { border-radius: inherit; overflow: hidden; }
+.navai-voice-orb-surface .navai-orb-container canvas { display: block; width: 100% !important; height: 100% !important; transform: scale(1.08); transform-origin: center; }
+.navai-voice-orb-button-shell { position: relative; z-index: 1; display: grid; place-items: center; width: clamp(2.7rem, 5vw, 3.15rem); height: clamp(2.7rem, 5vw, 3.15rem); border-radius: 999px; border: 1px solid rgba(156,182,255,0.4); background: rgba(10,14,36,0.72); box-shadow: inset 0 0 24px rgba(8,12,31,0.28), 0 10px 22px rgba(4,8,24,0.42); backdrop-filter: blur(8px); }
+.navai-voice-orb-button-shell.is-active { border-color: rgba(255,156,192,0.92); box-shadow: 0 0 0 2px rgba(255,112,160,0.18), inset 0 0 28px rgba(61,14,40,0.3), 0 12px 26px rgba(85,16,49,0.42); }
+.navai-voice-orb-button { display: grid; place-items: center; width: clamp(2.05rem, 4vw, 2.4rem); height: clamp(2.05rem, 4vw, 2.4rem); border-radius: 999px; border: 1px solid rgba(162,193,255,0.58); background: linear-gradient(145deg, rgba(245,249,255,0.98), rgba(223,233,255,0.94)); color: #2154d9; box-shadow: 0 8px 18px rgba(14,26,61,0.34); cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease, border-color 160ms ease; }
+.navai-voice-orb-button:hover:not(:disabled) { transform: translateY(-1px) scale(1.02); }
+.navai-voice-orb-button:focus-visible { outline: 2px solid rgba(191,219,254,0.92); outline-offset: 3px; }
+.navai-voice-orb-button.is-active { background: rgba(255,92,132,0.96); color: rgba(255,255,255,0.98); border-color: rgba(255,164,190,0.98); box-shadow: 0 0 0 3px rgba(255,108,154,0.24), 0 10px 24px rgba(96,14,39,0.42); }
+.navai-voice-orb-button.is-connecting { background: linear-gradient(145deg, rgba(255,246,214,0.98), rgba(252,220,128,0.94)); color: #7c4300; border-color: rgba(251,191,36,0.9); }
+.navai-voice-orb-button:disabled { opacity: 0.74; cursor: not-allowed; }
+.navai-voice-orb-status { margin: 0; max-width: min(18rem, 80vw); padding: 0.45rem 0.6rem; border-radius: 0.7rem; border: 1px solid rgba(244,114,182,0.24); background: rgba(6,12,28,0.84); color: rgba(230,240,255,0.96); font-size: 0.74rem; line-height: 1.35; text-align: center; box-shadow: 0 10px 20px rgba(4,8,24,0.24); }
+.navai-voice-orb-status.is-error { border-color: rgba(248,113,113,0.46); background: rgba(69,10,10,0.84); color: rgba(254,202,202,0.98); }
+.navai-voice-orb-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+.navai-voice-orb-hero { width: min(32rem, 100%); aspect-ratio: 1 / 1; }
+.navai-voice-orb-icon { display: block; }
+.navai-voice-orb-icon.is-pulsing { animation: navai-voice-orb-pulse 1.05s ease-in-out infinite; }
+.navai-voice-orb-spinner { display: block; box-sizing: border-box; border-radius: 999px; border: 2px solid currentColor; border-right-color: transparent; animation: navai-voice-orb-spin 0.72s linear infinite; }
+.navai-voice-orb-dock.is-light .navai-voice-orb-button-shell,
+.navai-voice-orb-hero.is-light { color: #10245e; }
+.navai-voice-orb-dock.is-light .navai-voice-orb-button-shell { border-color: rgba(121,146,220,0.34); background: rgba(244,249,255,0.88); box-shadow: inset 0 0 20px rgba(111,134,183,0.14), 0 10px 22px rgba(86,104,149,0.22); }
+.navai-voice-orb-dock.is-light .navai-voice-orb-button-shell.is-active { border-color: rgba(255,142,188,0.82); box-shadow: 0 0 0 2px rgba(255,130,183,0.18), inset 0 0 24px rgba(255,141,191,0.2), 0 10px 24px rgba(141,81,110,0.24); }
+.navai-voice-orb-dock.is-light .navai-voice-orb-button { border-color: rgba(70,136,246,0.42); background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(228,238,255,0.95)); color: #1d3d9a; box-shadow: 0 8px 18px rgba(71,85,105,0.18); }
+.navai-voice-orb-dock.is-light .navai-voice-orb-button.is-connecting { background: linear-gradient(145deg, rgba(255,246,214,0.98), rgba(252,220,128,0.94)); color: #7c4300; border-color: rgba(251,191,36,0.9); }
+.navai-voice-orb-dock.is-light .navai-voice-orb-button.is-active { background: rgba(255,92,132,0.96); color: rgba(255,255,255,0.98); border-color: rgba(255,164,190,0.98); box-shadow: 0 0 0 3px rgba(255,108,154,0.24), 0 10px 24px rgba(96,14,39,0.28); }
+.navai-voice-orb-dock.is-light .navai-voice-orb-status { border-color: rgba(59,130,246,0.18); background: rgba(255,255,255,0.92); color: #1f2937; box-shadow: 0 10px 20px rgba(148,163,184,0.18); }
+.navai-voice-orb-dock.is-light .navai-voice-orb-status.is-error { border-color: rgba(248,113,113,0.34); background: rgba(255,241,242,0.96); color: #9f1239; }
+@keyframes navai-voice-orb-pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: 0.78; } 100% { transform: scale(1); opacity: 1; } }
+@keyframes navai-voice-orb-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+@media (max-width: 640px) {
+  .navai-voice-orb-dock.is-bottom-right, .navai-voice-orb-dock.is-bottom-left { bottom: calc(0.8rem + env(safe-area-inset-bottom)); }
+  .navai-voice-orb-dock.is-bottom-right { right: calc(0.8rem + env(safe-area-inset-right)); }
+  .navai-voice-orb-dock.is-bottom-left { left: calc(0.8rem + env(safe-area-inset-left)); }
+  .navai-voice-orb-wrap { width: clamp(3.8rem, 22vw, 4.4rem); }
+  .navai-voice-orb-button-shell { width: clamp(2.45rem, 13vw, 2.82rem); height: clamp(2.45rem, 13vw, 2.82rem); }
+  .navai-voice-orb-button { width: clamp(1.85rem, 10vw, 2.18rem); height: clamp(1.85rem, 10vw, 2.18rem); }
+}
+`;
+  }
+});
+
+// src/orb/Orb.tsx
+var Orb_exports = {};
+__export(Orb_exports, {
+  default: () => Orb
+});
+function Orb({
+  hue = 0,
+  autoHueShift = true,
+  hueShiftMin = 0,
+  hueShiftMax = 360,
+  hueShiftHalfCycleSeconds = 30,
+  hoverIntensity = 0.2,
+  rotateOnHover = true,
+  forceHoverState = false,
+  enablePointerHover = true,
+  backgroundColor = "#000000",
+  animate = true
+}) {
+  useNavaiVoiceOrbStyles();
+  const containerRef = (0, import_react3.useRef)(null);
+  const hueRef = (0, import_react3.useRef)(hue);
+  const autoHueShiftRef = (0, import_react3.useRef)(autoHueShift);
+  const hueShiftMinRef = (0, import_react3.useRef)(hueShiftMin);
+  const hueShiftMaxRef = (0, import_react3.useRef)(hueShiftMax);
+  const hueShiftHalfCycleSecondsRef = (0, import_react3.useRef)(hueShiftHalfCycleSeconds);
+  const hoverIntensityRef = (0, import_react3.useRef)(hoverIntensity);
+  const rotateOnHoverRef = (0, import_react3.useRef)(rotateOnHover);
+  const forceHoverStateRef = (0, import_react3.useRef)(forceHoverState);
+  const enablePointerHoverRef = (0, import_react3.useRef)(enablePointerHover);
+  const backgroundColorVecRef = (0, import_react3.useRef)(hexToVec3(backgroundColor));
+  const animateRef = (0, import_react3.useRef)(animate);
+  (0, import_react3.useEffect)(() => {
+    hueRef.current = hue;
+  }, [hue]);
+  (0, import_react3.useEffect)(() => {
+    autoHueShiftRef.current = autoHueShift;
+  }, [autoHueShift]);
+  (0, import_react3.useEffect)(() => {
+    hueShiftMinRef.current = hueShiftMin;
+  }, [hueShiftMin]);
+  (0, import_react3.useEffect)(() => {
+    hueShiftMaxRef.current = hueShiftMax;
+  }, [hueShiftMax]);
+  (0, import_react3.useEffect)(() => {
+    hueShiftHalfCycleSecondsRef.current = hueShiftHalfCycleSeconds;
+  }, [hueShiftHalfCycleSeconds]);
+  (0, import_react3.useEffect)(() => {
+    hoverIntensityRef.current = hoverIntensity;
+  }, [hoverIntensity]);
+  (0, import_react3.useEffect)(() => {
+    rotateOnHoverRef.current = rotateOnHover;
+  }, [rotateOnHover]);
+  (0, import_react3.useEffect)(() => {
+    forceHoverStateRef.current = forceHoverState;
+  }, [forceHoverState]);
+  (0, import_react3.useEffect)(() => {
+    enablePointerHoverRef.current = enablePointerHover;
+  }, [enablePointerHover]);
+  (0, import_react3.useEffect)(() => {
+    backgroundColorVecRef.current = hexToVec3(backgroundColor);
+  }, [backgroundColor]);
+  (0, import_react3.useEffect)(() => {
+    animateRef.current = animate;
+  }, [animate]);
+  (0, import_react3.useEffect)(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    const renderer = new import_ogl.Renderer({ alpha: true, premultipliedAlpha: false });
+    const gl = renderer.gl;
+    gl.clearColor(0, 0, 0, 0);
+    container.appendChild(gl.canvas);
+    const geometry = new import_ogl.Triangle(gl);
+    const program = new import_ogl.Program(gl, {
+      vertex: VERTEX_SHADER,
+      fragment: FRAGMENT_SHADER,
+      uniforms: {
+        iTime: { value: 0 },
+        iResolution: {
+          value: new import_ogl.Vec3(gl.canvas.width, gl.canvas.height, gl.canvas.width / Math.max(gl.canvas.height, 1))
+        },
+        hue: { value: hueRef.current },
+        hover: { value: 0 },
+        rot: { value: 0 },
+        hoverIntensity: { value: hoverIntensityRef.current },
+        backgroundColor: { value: backgroundColorVecRef.current }
+      }
+    });
+    const mesh = new import_ogl.Mesh(gl, { geometry, program });
+    const resize = () => {
+      const dpr = window.devicePixelRatio || 1;
+      const width = Math.max(container.clientWidth, 1);
+      const height = Math.max(container.clientHeight, 1);
+      renderer.setSize(width * dpr, height * dpr);
+      gl.canvas.style.width = `${width}px`;
+      gl.canvas.style.height = `${height}px`;
+      program.uniforms.iResolution.value.set(gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height);
+    };
+    window.addEventListener("resize", resize);
+    resize();
+    let targetHover = 0;
+    let lastTime = 0;
+    let currentRotation = 0;
+    const rotationSpeed = 0.3;
+    const handlePointerMove = (event) => {
+      if (!enablePointerHoverRef.current) {
+        return;
+      }
+      const rect = container.getBoundingClientRect();
+      const x = event.clientX - rect.left;
+      const y = event.clientY - rect.top;
+      const size = Math.min(rect.width, rect.height);
+      const centerX = rect.width / 2;
+      const centerY = rect.height / 2;
+      const uvX = (x - centerX) / size * 2;
+      const uvY = (y - centerY) / size * 2;
+      targetHover = Math.sqrt(uvX * uvX + uvY * uvY) < 0.8 ? 1 : 0;
+    };
+    const handlePointerLeave = () => {
+      if (!enablePointerHoverRef.current) {
+        return;
+      }
+      targetHover = 0;
+    };
+    container.addEventListener("mousemove", handlePointerMove);
+    container.addEventListener("mouseleave", handlePointerLeave);
+    let animationFrameId = 0;
+    let idleTimerId = 0;
+    let lastRenderTime = 0;
+    let hasRenderedStaticFrame = false;
+    const frameIntervalMs = 1e3 / 24;
+    const idleCheckIntervalMs = 750;
+    const getAnimatedHueValue = (timeMs = 0) => {
+      if (!autoHueShiftRef.current) {
+        return hueRef.current;
+      }
+      const minHue = hueShiftMinRef.current;
+      const maxHue = hueShiftMaxRef.current;
+      const halfCycleSeconds = hueShiftHalfCycleSecondsRef.current;
+      const hueRange = maxHue - minHue;
+      if (halfCycleSeconds <= 0 || hueRange <= 0) {
+        return minHue;
+      }
+      const fullCycleSeconds = halfCycleSeconds * 2;
+      const elapsedSeconds = timeMs * 1e-3;
+      const cycleSeconds = (elapsedSeconds % fullCycleSeconds + fullCycleSeconds) % fullCycleSeconds;
+      const halfCycleProgress = cycleSeconds / halfCycleSeconds;
+      const wave = halfCycleProgress <= 1 ? halfCycleProgress : 2 - halfCycleProgress;
+      return minHue + wave * hueRange;
+    };
+    const renderStaticFrame = (timeMs = 0) => {
+      program.uniforms.iTime.value = 0;
+      program.uniforms.hue.value = getAnimatedHueValue(timeMs);
+      program.uniforms.hoverIntensity.value = hoverIntensityRef.current;
+      program.uniforms.backgroundColor.value = backgroundColorVecRef.current;
+      program.uniforms.hover.value = 0;
+      program.uniforms.rot.value = currentRotation;
+      renderer.render({ scene: mesh });
+    };
+    const scheduleNextFrame = () => {
+      if (animateRef.current && !document.hidden) {
+        animationFrameId = window.requestAnimationFrame(update);
+        return;
+      }
+      idleTimerId = window.setTimeout(() => {
+        animationFrameId = window.requestAnimationFrame(update);
+      }, idleCheckIntervalMs);
+    };
+    const update = (timeMs) => {
+      if (document.hidden) {
+        scheduleNextFrame();
+        return;
+      }
+      if (!animateRef.current) {
+        if (!hasRenderedStaticFrame) {
+          renderStaticFrame(timeMs);
+          hasRenderedStaticFrame = true;
+        }
+        scheduleNextFrame();
+        return;
+      }
+      hasRenderedStaticFrame = false;
+      if (timeMs - lastRenderTime < frameIntervalMs) {
+        scheduleNextFrame();
+        return;
+      }
+      lastRenderTime = timeMs;
+      const deltaSeconds = (timeMs - lastTime) * 1e-3;
+      lastTime = timeMs;
+      program.uniforms.iTime.value = timeMs * 1e-3;
+      program.uniforms.hue.value = getAnimatedHueValue(timeMs);
+      program.uniforms.hoverIntensity.value = hoverIntensityRef.current;
+      program.uniforms.backgroundColor.value = backgroundColorVecRef.current;
+      const effectiveHover = forceHoverStateRef.current ? 1 : enablePointerHoverRef.current ? targetHover : 0;
+      program.uniforms.hover.value += (effectiveHover - program.uniforms.hover.value) * 0.1;
+      if (rotateOnHoverRef.current && effectiveHover > 0.5) {
+        currentRotation += deltaSeconds * rotationSpeed;
+      }
+      program.uniforms.rot.value = currentRotation;
+      renderer.render({ scene: mesh });
+      scheduleNextFrame();
+    };
+    scheduleNextFrame();
+    return () => {
+      window.cancelAnimationFrame(animationFrameId);
+      window.clearTimeout(idleTimerId);
+      window.removeEventListener("resize", resize);
+      container.removeEventListener("mousemove", handlePointerMove);
+      container.removeEventListener("mouseleave", handlePointerLeave);
+      if (gl.canvas.parentElement === container) {
+        container.removeChild(gl.canvas);
+      }
+      gl.getExtension("WEBGL_lose_context")?.loseContext();
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: containerRef, className: "navai-orb-container" });
+}
+function hslToRgb(hue, saturation, lightness) {
+  if (saturation === 0) {
+    return new import_ogl.Vec3(lightness, lightness, lightness);
+  }
+  const hueToRgb = (p2, q2, t) => {
+    let normalizedT = t;
+    if (normalizedT < 0) {
+      normalizedT += 1;
+    }
+    if (normalizedT > 1) {
+      normalizedT -= 1;
+    }
+    if (normalizedT < 1 / 6) {
+      return p2 + (q2 - p2) * 6 * normalizedT;
+    }
+    if (normalizedT < 1 / 2) {
+      return q2;
+    }
+    if (normalizedT < 2 / 3) {
+      return p2 + (q2 - p2) * (2 / 3 - normalizedT) * 6;
+    }
+    return p2;
+  };
+  const q = lightness < 0.5 ? lightness * (1 + saturation) : lightness + saturation - lightness * saturation;
+  const p = 2 * lightness - q;
+  return new import_ogl.Vec3(hueToRgb(p, q, hue + 1 / 3), hueToRgb(p, q, hue), hueToRgb(p, q, hue - 1 / 3));
+}
+function hexToVec3(color) {
+  if (color.startsWith("#")) {
+    const hex = color.slice(1);
+    if (hex.length === 3) {
+      return new import_ogl.Vec3(
+        Number.parseInt(`${hex[0]}${hex[0]}`, 16) / 255,
+        Number.parseInt(`${hex[1]}${hex[1]}`, 16) / 255,
+        Number.parseInt(`${hex[2]}${hex[2]}`, 16) / 255
+      );
+    }
+    if (hex.length >= 6) {
+      return new import_ogl.Vec3(
+        Number.parseInt(hex.slice(0, 2), 16) / 255,
+        Number.parseInt(hex.slice(2, 4), 16) / 255,
+        Number.parseInt(hex.slice(4, 6), 16) / 255
+      );
+    }
+  }
+  const rgbMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+  if (rgbMatch) {
+    const [, red, green, blue] = rgbMatch;
+    return new import_ogl.Vec3(
+      Number.parseInt(red ?? "0", 10) / 255,
+      Number.parseInt(green ?? "0", 10) / 255,
+      Number.parseInt(blue ?? "0", 10) / 255
+    );
+  }
+  const hslMatch = color.match(/hsla?\((\d+),\s*(\d+)%,\s*(\d+)%/);
+  if (hslMatch) {
+    const [, hue, saturation, lightness] = hslMatch;
+    return hslToRgb(
+      Number.parseInt(hue ?? "0", 10) / 360,
+      Number.parseInt(saturation ?? "0", 10) / 100,
+      Number.parseInt(lightness ?? "0", 10) / 100
+    );
+  }
+  return new import_ogl.Vec3(0, 0, 0);
+}
+var import_ogl, import_react3, import_jsx_runtime, VERTEX_SHADER, FRAGMENT_SHADER;
+var init_Orb = __esm({
+  "src/orb/Orb.tsx"() {
+    "use strict";
+    import_ogl = require("ogl");
+    import_react3 = require("react");
+    init_styles();
+    import_jsx_runtime = require("react/jsx-runtime");
+    VERTEX_SHADER = /* glsl */
+    `
+  precision highp float;
+  attribute vec2 position;
+  attribute vec2 uv;
+  varying vec2 vUv;
+
+  void main() {
+    vUv = uv;
+    gl_Position = vec4(position, 0.0, 1.0);
+  }
+`;
+    FRAGMENT_SHADER = /* glsl */
+    `
+  precision highp float;
+
+  uniform float iTime;
+  uniform vec3 iResolution;
+  uniform float hue;
+  uniform float hover;
+  uniform float rot;
+  uniform float hoverIntensity;
+  uniform vec3 backgroundColor;
+  varying vec2 vUv;
+
+  vec3 rgb2yiq(vec3 c) {
+    float y = dot(c, vec3(0.299, 0.587, 0.114));
+    float i = dot(c, vec3(0.596, -0.274, -0.322));
+    float q = dot(c, vec3(0.211, -0.523, 0.312));
+    return vec3(y, i, q);
+  }
+
+  vec3 yiq2rgb(vec3 c) {
+    float r = c.x + 0.956 * c.y + 0.621 * c.z;
+    float g = c.x - 0.272 * c.y - 0.647 * c.z;
+    float b = c.x - 1.106 * c.y + 1.703 * c.z;
+    return vec3(r, g, b);
+  }
+
+  vec3 adjustHue(vec3 color, float hueDeg) {
+    float hueRad = hueDeg * 3.14159265 / 180.0;
+    vec3 yiq = rgb2yiq(color);
+    float cosA = cos(hueRad);
+    float sinA = sin(hueRad);
+    float i = yiq.y * cosA - yiq.z * sinA;
+    float q = yiq.y * sinA + yiq.z * cosA;
+    yiq.y = i;
+    yiq.z = q;
+    return yiq2rgb(yiq);
+  }
+
+  vec3 hash33(vec3 p3) {
+    p3 = fract(p3 * vec3(0.1031, 0.11369, 0.13787));
+    p3 += dot(p3, p3.yxz + 19.19);
+    return -1.0 + 2.0 * fract(vec3(
+      p3.x + p3.y,
+      p3.x + p3.z,
+      p3.y + p3.z
+    ) * p3.zyx);
+  }
+
+  float snoise3(vec3 p) {
+    const float K1 = 0.333333333;
+    const float K2 = 0.166666667;
+    vec3 i = floor(p + (p.x + p.y + p.z) * K1);
+    vec3 d0 = p - (i - (i.x + i.y + i.z) * K2);
+    vec3 e = step(vec3(0.0), d0 - d0.yzx);
+    vec3 i1 = e * (1.0 - e.zxy);
+    vec3 i2 = 1.0 - e.zxy * (1.0 - e);
+    vec3 d1 = d0 - (i1 - K2);
+    vec3 d2 = d0 - (i2 - K1);
+    vec3 d3 = d0 - 0.5;
+    vec4 h = max(0.6 - vec4(
+      dot(d0, d0),
+      dot(d1, d1),
+      dot(d2, d2),
+      dot(d3, d3)
+    ), 0.0);
+    vec4 n = h * h * h * h * vec4(
+      dot(d0, hash33(i)),
+      dot(d1, hash33(i + i1)),
+      dot(d2, hash33(i + i2)),
+      dot(d3, hash33(i + 1.0))
+    );
+    return dot(vec4(31.316), n);
+  }
+
+  vec4 extractAlpha(vec3 colorIn) {
+    float a = max(max(colorIn.r, colorIn.g), colorIn.b);
+    return vec4(colorIn.rgb / (a + 1e-5), a);
+  }
+
+  const vec3 baseColor1 = vec3(0.611765, 0.262745, 0.996078);
+  const vec3 baseColor2 = vec3(0.298039, 0.760784, 0.913725);
+  const vec3 baseColor3 = vec3(0.062745, 0.078431, 0.600000);
+  const float innerRadius = 0.6;
+  const float noiseScale = 0.65;
+
+  float light1(float intensity, float attenuation, float dist) {
+    return intensity / (1.0 + dist * attenuation);
+  }
+
+  float light2(float intensity, float attenuation, float dist) {
+    return intensity / (1.0 + dist * dist * attenuation);
+  }
+
+  vec4 draw(vec2 uv) {
+    vec3 color1 = adjustHue(baseColor1, hue);
+    vec3 color2 = adjustHue(baseColor2, hue);
+    vec3 color3 = adjustHue(baseColor3, hue);
+
+    float ang = atan(uv.y, uv.x);
+    float len = length(uv);
+    float invLen = len > 0.0 ? 1.0 / len : 0.0;
+    float bgLuminance = dot(backgroundColor, vec3(0.299, 0.587, 0.114));
+
+    float n0 = snoise3(vec3(uv * noiseScale, iTime * 0.5)) * 0.5 + 0.5;
+    float r0 = mix(mix(innerRadius, 1.0, 0.4), mix(innerRadius, 1.0, 0.6), n0);
+    float d0 = distance(uv, (r0 * invLen) * uv);
+    float v0 = light1(1.0, 10.0, d0);
+
+    v0 *= smoothstep(r0 * 1.05, r0, len);
+    float innerFade = smoothstep(r0 * 0.8, r0 * 0.95, len);
+    v0 *= mix(innerFade, 1.0, bgLuminance * 0.7);
+    float cl = cos(ang + iTime * 2.0) * 0.5 + 0.5;
+
+    float a = iTime * -1.0;
+    vec2 pos = vec2(cos(a), sin(a)) * r0;
+    float d = distance(uv, pos);
+    float v1 = light2(1.5, 5.0, d);
+    v1 *= light1(1.0, 50.0, d0);
+
+    float v2 = smoothstep(1.0, mix(innerRadius, 1.0, n0 * 0.5), len);
+    float v3 = smoothstep(innerRadius, mix(innerRadius, 1.0, 0.5), len);
+
+    vec3 colBase = mix(color1, color2, cl);
+    float fadeAmount = mix(1.0, 0.1, bgLuminance);
+    vec3 darkCol = mix(color3, colBase, v0);
+    darkCol = (darkCol + v1) * v2 * v3;
+    darkCol = clamp(darkCol, 0.0, 1.0);
+
+    vec3 lightCol = (colBase + v1) * mix(1.0, v2 * v3, fadeAmount);
+    lightCol = mix(backgroundColor, lightCol, v0);
+    lightCol = clamp(lightCol, 0.0, 1.0);
+
+    return extractAlpha(mix(darkCol, lightCol, bgLuminance));
+  }
+
+  vec4 mainImage(vec2 fragCoord) {
+    vec2 center = iResolution.xy * 0.5;
+    float size = min(iResolution.x, iResolution.y);
+    vec2 uv = (fragCoord - center) / size * 2.0;
+
+    float angle = rot;
+    float s = sin(angle);
+    float c = cos(angle);
+    uv = vec2(c * uv.x - s * uv.y, s * uv.x + c * uv.y);
+    uv.x += hover * hoverIntensity * 0.1 * sin(uv.y * 10.0 + iTime);
+    uv.y += hover * hoverIntensity * 0.1 * sin(uv.x * 10.0 + iTime);
+
+    return draw(uv);
+  }
+
+  void main() {
+    vec2 fragCoord = vUv * iResolution.xy;
+    vec4 col = mainImage(fragCoord);
+    gl_FragColor = vec4(col.rgb * col.a, col.a);
+  }
+`;
+  }
+});
+
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  NavaiHeroOrb: () => NavaiHeroOrb,
+  NavaiMiniOrbDock: () => NavaiMiniOrbDock,
+  NavaiVoiceHeroOrb: () => NavaiVoiceHeroOrb,
+  NavaiVoiceOrbDock: () => NavaiVoiceOrbDock,
+  NavaiVoiceOrbDockMicIcon: () => NavaiVoiceOrbDockMicIcon,
+  Orb: () => Orb,
   buildNavaiAgent: () => buildNavaiAgent,
+  clampNavaiOrbDelayMs: () => clampNavaiOrbDelayMs,
   createNavaiBackendClient: () => createNavaiBackendClient,
   getNavaiRoutePromptLines: () => getNavaiRoutePromptLines,
   loadNavaiFunctions: () => loadNavaiFunctions,
   resolveNavaiFrontendRuntimeConfig: () => resolveNavaiFrontendRuntimeConfig,
   resolveNavaiRoute: () => resolveNavaiRoute,
+  resolveNavaiVoiceOrbRuntimeSnapshot: () => resolveNavaiVoiceOrbRuntimeSnapshot,
   useWebVoiceAgent: () => useWebVoiceAgent
 });
 module.exports = __toCommonJS(index_exports);
@@ -760,6 +1309,7 @@ function emitWarnings(warnings) {
 }
 function useWebVoiceAgent(options) {
   const sessionRef = (0, import_react.useRef)(null);
+  const attachedRealtimeSessionRef = (0, import_react.useRef)(null);
   const runtimeConfigPromise = (0, import_react.useMemo)(
     () => resolveNavaiFrontendRuntimeConfig({
       moduleLoaders: options.moduleLoaders,
@@ -790,15 +1340,61 @@ function useWebVoiceAgent(options) {
     [options.apiBaseUrl, options.env]
   );
   const [status, setStatus] = (0, import_react.useState)("idle");
+  const [agentVoiceState, setAgentVoiceState] = (0, import_react.useState)("idle");
   const [error, setError] = (0, import_react.useState)(null);
+  const setAgentVoiceStateIfChanged = (0, import_react.useCallback)((next) => {
+    setAgentVoiceState((current) => current === next ? current : next);
+  }, []);
+  const handleSessionAudioStart = (0, import_react.useCallback)(() => {
+    setAgentVoiceStateIfChanged("speaking");
+  }, [setAgentVoiceStateIfChanged]);
+  const handleSessionAudioStopped = (0, import_react.useCallback)(() => {
+    setAgentVoiceStateIfChanged("idle");
+  }, [setAgentVoiceStateIfChanged]);
+  const handleSessionAudioInterrupted = (0, import_react.useCallback)(() => {
+    setAgentVoiceStateIfChanged("idle");
+  }, [setAgentVoiceStateIfChanged]);
+  const handleSessionError = (0, import_react.useCallback)(() => {
+    setAgentVoiceStateIfChanged("idle");
+  }, [setAgentVoiceStateIfChanged]);
+  const detachSessionAudioListeners = (0, import_react.useCallback)(() => {
+    const attachedSession = attachedRealtimeSessionRef.current;
+    if (!attachedSession) {
+      return;
+    }
+    attachedSession.off("audio_start", handleSessionAudioStart);
+    attachedSession.off("audio_stopped", handleSessionAudioStopped);
+    attachedSession.off("audio_interrupted", handleSessionAudioInterrupted);
+    attachedSession.off("error", handleSessionError);
+    attachedRealtimeSessionRef.current = null;
+  }, [handleSessionAudioInterrupted, handleSessionAudioStart, handleSessionAudioStopped, handleSessionError]);
+  const attachSessionAudioListeners = (0, import_react.useCallback)(
+    (session) => {
+      detachSessionAudioListeners();
+      session.on("audio_start", handleSessionAudioStart);
+      session.on("audio_stopped", handleSessionAudioStopped);
+      session.on("audio_interrupted", handleSessionAudioInterrupted);
+      session.on("error", handleSessionError);
+      attachedRealtimeSessionRef.current = session;
+    },
+    [
+      detachSessionAudioListeners,
+      handleSessionAudioInterrupted,
+      handleSessionAudioStart,
+      handleSessionAudioStopped,
+      handleSessionError
+    ]
+  );
   const stop = (0, import_react.useCallback)(() => {
+    detachSessionAudioListeners();
     try {
       sessionRef.current?.close();
     } finally {
       sessionRef.current = null;
       setStatus("idle");
+      setAgentVoiceStateIfChanged("idle");
     }
-  }, []);
+  }, [detachSessionAudioListeners, setAgentVoiceStateIfChanged]);
   (0, import_react.useEffect)(() => {
     return () => {
       stop();
@@ -810,6 +1406,7 @@ function useWebVoiceAgent(options) {
     }
     setError(null);
     setStatus("connecting");
+    setAgentVoiceStateIfChanged("idle");
     try {
       const runtimeConfig = await runtimeConfigPromise;
       const requestPayload = runtimeConfig.modelOverride ? { model: runtimeConfig.modelOverride } : {};
@@ -824,6 +1421,7 @@ function useWebVoiceAgent(options) {
       });
       emitWarnings([...runtimeConfig.warnings, ...backendFunctionsResult.warnings, ...warnings]);
       const session = new import_realtime2.RealtimeSession(agent);
+      attachSessionAudioListeners(session);
       if (runtimeConfig.modelOverride) {
         await session.connect({ apiKey: secretPayload.value, model: runtimeConfig.modelOverride });
       } else {
@@ -835,29 +1433,395 @@ function useWebVoiceAgent(options) {
       const message = formatError(startError);
       setError(message);
       setStatus("error");
+      setAgentVoiceStateIfChanged("idle");
+      detachSessionAudioListeners();
       try {
         sessionRef.current?.close();
       } catch {
       }
       sessionRef.current = null;
     }
-  }, [backendClient, options.navigate, runtimeConfigPromise, status]);
+  }, [
+    attachSessionAudioListeners,
+    backendClient,
+    detachSessionAudioListeners,
+    options.navigate,
+    runtimeConfigPromise,
+    setAgentVoiceStateIfChanged,
+    status
+  ]);
   return {
     status,
+    agentVoiceState,
     error,
     isConnecting: status === "connecting",
     isConnected: status === "connected",
+    isAgentSpeaking: agentVoiceState === "speaking",
     start,
     stop
   };
 }
+
+// src/orb/index.ts
+init_Orb();
+
+// src/orb/NavaiHeroOrb.tsx
+var import_react5 = require("react");
+
+// src/orb/dynamic.tsx
+var import_react4 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function dynamic(loader, options = {}) {
+  const { ssr = true, loading: LoadingComponent } = options;
+  const LazyComponent = (0, import_react4.lazy)(async () => {
+    const loaded = await loader();
+    if (typeof loaded === "function") {
+      return { default: loaded };
+    }
+    return loaded;
+  });
+  function DynamicComponent(props) {
+    const [isClientReady, setIsClientReady] = (0, import_react4.useState)(ssr);
+    (0, import_react4.useEffect)(() => {
+      if (!ssr) {
+        setIsClientReady(true);
+      }
+    }, [ssr]);
+    if (!isClientReady) {
+      return null;
+    }
+    const fallback = LoadingComponent ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LoadingComponent, {}) : null;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.Suspense, { fallback, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LazyComponent, { ...props }) });
+  }
+  DynamicComponent.displayName = "DynamicComponent";
+  return DynamicComponent;
+}
+
+// src/orb/NavaiHeroOrb.tsx
+init_styles();
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Orb2 = dynamic(() => Promise.resolve().then(() => (init_Orb(), Orb_exports)), {
+  ssr: false
+});
+var ORB_DELAY_MS_MIN = 0;
+var ORB_DELAY_MS_MAX = 6e4;
+var DEFAULT_AUTOPLAY_DELAY_MS = 9e3;
+var DEFAULT_REVEAL_DELAY_MS = 5200;
+function clampNavaiOrbDelayMs(value, fallback) {
+  const numericValue = Number.isFinite(value) ? value : fallback;
+  return Math.min(ORB_DELAY_MS_MAX, Math.max(ORB_DELAY_MS_MIN, numericValue));
+}
+function NavaiHeroOrb({
+  className = "",
+  backgroundColor = "#000000",
+  isAgentSpeaking = false,
+  hoverIntensitySpeaking = 0.66,
+  hoverIntensityIdle = 0.08,
+  revealDelayMs = DEFAULT_REVEAL_DELAY_MS,
+  autoplayDelayMs = DEFAULT_AUTOPLAY_DELAY_MS
+}) {
+  useNavaiVoiceOrbStyles();
+  const resolvedRevealDelayMs = clampNavaiOrbDelayMs(revealDelayMs, DEFAULT_REVEAL_DELAY_MS);
+  const resolvedAutoplayDelayMs = clampNavaiOrbDelayMs(autoplayDelayMs, DEFAULT_AUTOPLAY_DELAY_MS);
+  const [isOrbReady, setIsOrbReady] = (0, import_react5.useState)(resolvedRevealDelayMs === 0);
+  const [isOrbAutoAnimating, setIsOrbAutoAnimating] = (0, import_react5.useState)(resolvedAutoplayDelayMs === 0);
+  (0, import_react5.useEffect)(() => {
+    if (typeof window === "undefined" || resolvedRevealDelayMs === 0) {
+      return;
+    }
+    const revealOrb = () => setIsOrbReady(true);
+    window.addEventListener("pointerdown", revealOrb, { passive: true, once: true });
+    window.addEventListener("touchstart", revealOrb, { passive: true, once: true });
+    window.addEventListener("keydown", revealOrb, { once: true });
+    const timeoutId = window.setTimeout(revealOrb, resolvedRevealDelayMs);
+    return () => {
+      window.removeEventListener("pointerdown", revealOrb);
+      window.removeEventListener("touchstart", revealOrb);
+      window.removeEventListener("keydown", revealOrb);
+      window.clearTimeout(timeoutId);
+    };
+  }, [resolvedRevealDelayMs]);
+  (0, import_react5.useEffect)(() => {
+    if (typeof window === "undefined" || resolvedAutoplayDelayMs === 0) {
+      return;
+    }
+    let started = false;
+    const startOrbAnimation = () => {
+      if (started) {
+        return;
+      }
+      started = true;
+      setIsOrbAutoAnimating(true);
+    };
+    if (navigator.userActivation?.hasBeenActive) {
+      startOrbAnimation();
+    }
+    window.addEventListener("pointerdown", startOrbAnimation, { passive: true, once: true });
+    window.addEventListener("touchstart", startOrbAnimation, { passive: true, once: true });
+    window.addEventListener("keydown", startOrbAnimation, { once: true });
+    const timeoutId = window.setTimeout(startOrbAnimation, resolvedAutoplayDelayMs);
+    return () => {
+      window.removeEventListener("pointerdown", startOrbAnimation);
+      window.removeEventListener("touchstart", startOrbAnimation);
+      window.removeEventListener("keydown", startOrbAnimation);
+      window.clearTimeout(timeoutId);
+    };
+  }, [resolvedAutoplayDelayMs]);
+  const orbHoverIntensity = (0, import_react5.useMemo)(() => {
+    return isAgentSpeaking ? hoverIntensitySpeaking : hoverIntensityIdle;
+  }, [hoverIntensityIdle, hoverIntensitySpeaking, isAgentSpeaking]);
+  if (!isOrbReady) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: ["navai-voice-orb-hero", className].filter(Boolean).join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Orb2,
+    {
+      hoverIntensity: orbHoverIntensity,
+      rotateOnHover: true,
+      forceHoverState: isAgentSpeaking,
+      enablePointerHover: false,
+      animate: isAgentSpeaking || isOrbAutoAnimating,
+      backgroundColor
+    }
+  ) });
+}
+
+// src/orb/NavaiMiniOrbDock.tsx
+init_styles();
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Orb3 = dynamic(() => Promise.resolve().then(() => (init_Orb(), Orb_exports)), {
+  ssr: false
+});
+function NavaiMiniOrbDock({
+  className = "",
+  style,
+  themeMode = "dark",
+  placement = "bottom-right",
+  isActive = false,
+  isConnected = false,
+  isDisabled = false,
+  isAgentSpeaking = false,
+  animateOrb = true,
+  backgroundColor = "#060914",
+  buttonAriaLabel,
+  buttonIcon,
+  buttonType = "button",
+  onButtonClick,
+  statusMessage = "",
+  isError = false,
+  ariaMessage = ""
+}) {
+  useNavaiVoiceOrbStyles();
+  const dockClassName = ["navai-voice-orb-dock", `is-${placement}`, themeMode === "light" ? "is-light" : "", className].filter(Boolean).join(" ");
+  const shouldHighlightOrb = isAgentSpeaking || isActive;
+  const orbHoverIntensity = isAgentSpeaking ? 0.66 : 0.08;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("aside", { className: dockClassName, style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "navai-voice-orb-wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: ["navai-voice-orb-surface", shouldHighlightOrb ? "is-highlighted" : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        Orb3,
+        {
+          hoverIntensity: orbHoverIntensity,
+          rotateOnHover: true,
+          forceHoverState: isAgentSpeaking,
+          enablePointerHover: false,
+          animate: animateOrb,
+          backgroundColor
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: ["navai-voice-orb-button-shell", isConnected ? "is-active" : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          type: buttonType,
+          className: [
+            "navai-voice-orb-button",
+            isConnected ? "is-active" : "",
+            isActive && !isConnected ? "is-connecting" : ""
+          ].filter(Boolean).join(" "),
+          onClick: onButtonClick,
+          disabled: isDisabled,
+          "aria-label": buttonAriaLabel,
+          children: buttonIcon
+        }
+      ) })
+    ] }),
+    statusMessage ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: ["navai-voice-orb-status", isError ? "is-error" : ""].filter(Boolean).join(" "), role: "status", children: statusMessage }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "navai-voice-orb-live", "aria-live": "polite", children: ariaMessage })
+  ] });
+}
+
+// src/orb/NavaiVoiceHeroOrb.tsx
+var import_react7 = require("react");
+
+// src/orb/NavaiVoiceOrbDock.tsx
+var import_react6 = require("react");
+
+// src/orb/NavaiVoiceOrbDockMicIcon.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function NavaiVoiceOrbDockMicIcon({
+  isActive = false,
+  size = 20
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      className: ["navai-voice-orb-icon", isActive ? "is-pulsing" : ""].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 3a3 3 0 0 0-3 3v6a3 3 0 1 0 6 0V6a3 3 0 0 0-3-3Z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M19 10v2a7 7 0 1 1-14 0v-2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 19v3" })
+      ]
+    }
+  );
+}
+
+// src/orb/NavaiVoiceOrbDockSpinnerIcon.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function NavaiVoiceOrbDockSpinnerIcon({
+  size = 20
+}) {
+  const style = {
+    width: size,
+    height: size
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "aria-hidden": "true", className: "navai-voice-orb-spinner", style });
+}
+
+// src/orb/NavaiVoiceOrbDock.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var DEFAULT_MESSAGES = {
+  ariaStart: "Activate NAVAI voice",
+  ariaStop: "Deactivate NAVAI voice",
+  idle: "NAVAI ready to start.",
+  connecting: "Connecting NAVAI voice...",
+  listening: "NAVAI is listening.",
+  speaking: "NAVAI is speaking.",
+  errorPrefix: "NAVAI error"
+};
+function resolveNavaiVoiceOrbRuntimeSnapshot(agent) {
+  return {
+    status: agent.status,
+    agentVoiceState: agent.agentVoiceState,
+    isAgentSpeaking: agent.isAgentSpeaking,
+    error: agent.error
+  };
+}
+function resolveStatusMessage(runtimeSnapshot, messages) {
+  if (runtimeSnapshot.error) {
+    return `${messages.errorPrefix}: ${runtimeSnapshot.error}`;
+  }
+  if (runtimeSnapshot.isAgentSpeaking) {
+    return messages.speaking;
+  }
+  if (runtimeSnapshot.status === "connecting") {
+    return messages.connecting;
+  }
+  if (runtimeSnapshot.status === "connected") {
+    return messages.listening;
+  }
+  return messages.idle;
+}
+function NavaiVoiceOrbDock({
+  agent,
+  className,
+  style,
+  themeMode = "dark",
+  placement = "bottom-right",
+  backgroundColorLight = "#f4f6fb",
+  backgroundColorDark = "#060914",
+  showStatus = true,
+  messages
+}) {
+  const resolvedMessages = (0, import_react6.useMemo)(() => ({ ...DEFAULT_MESSAGES, ...messages }), [messages]);
+  const runtimeSnapshot = (0, import_react6.useMemo)(() => resolveNavaiVoiceOrbRuntimeSnapshot(agent), [agent]);
+  const statusMessage = showStatus ? resolveStatusMessage(runtimeSnapshot, resolvedMessages) : "";
+  const isError = runtimeSnapshot.status === "error" || Boolean(runtimeSnapshot.error);
+  const isConnecting = runtimeSnapshot.status === "connecting";
+  const isActive = runtimeSnapshot.status === "connecting" || runtimeSnapshot.status === "connected";
+  const isDisabled = agent.isConnecting;
+  const shouldAnimateOrb = runtimeSnapshot.status !== "error";
+  const handleToggle = (0, import_react6.useCallback)(() => {
+    if (agent.isConnecting) {
+      return;
+    }
+    if (agent.isConnected) {
+      agent.stop();
+      return;
+    }
+    void agent.start();
+  }, [agent]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    NavaiMiniOrbDock,
+    {
+      className,
+      style,
+      themeMode,
+      placement,
+      isActive,
+      isConnected: agent.isConnected,
+      isDisabled,
+      isAgentSpeaking: agent.isAgentSpeaking,
+      animateOrb: shouldAnimateOrb,
+      backgroundColor: themeMode === "light" ? backgroundColorLight : backgroundColorDark,
+      buttonAriaLabel: isConnecting ? resolvedMessages.connecting : agent.isConnected ? resolvedMessages.ariaStop : resolvedMessages.ariaStart,
+      buttonIcon: isConnecting ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(NavaiVoiceOrbDockSpinnerIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(NavaiVoiceOrbDockMicIcon, { isActive: agent.isConnected || agent.isAgentSpeaking }),
+      onButtonClick: handleToggle,
+      statusMessage,
+      isError,
+      ariaMessage: statusMessage
+    }
+  );
+}
+
+// src/orb/NavaiVoiceHeroOrb.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function NavaiVoiceHeroOrb({
+  agent,
+  themeMode = "dark",
+  backgroundColorLight = "#ffffff",
+  backgroundColorDark = "#000000",
+  onRuntimeSnapshotChange,
+  ...orbProps
+}) {
+  const runtimeSnapshot = resolveNavaiVoiceOrbRuntimeSnapshot(agent);
+  (0, import_react7.useEffect)(() => {
+    if (typeof onRuntimeSnapshotChange === "function") {
+      onRuntimeSnapshotChange(runtimeSnapshot);
+    }
+  }, [onRuntimeSnapshotChange, runtimeSnapshot]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    NavaiHeroOrb,
+    {
+      ...orbProps,
+      isAgentSpeaking: runtimeSnapshot.isAgentSpeaking,
+      backgroundColor: themeMode === "light" ? backgroundColorLight : backgroundColorDark,
+      className: themeMode === "light" ? "is-light" : ""
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  NavaiHeroOrb,
+  NavaiMiniOrbDock,
+  NavaiVoiceHeroOrb,
+  NavaiVoiceOrbDock,
+  NavaiVoiceOrbDockMicIcon,
+  Orb,
   buildNavaiAgent,
+  clampNavaiOrbDelayMs,
   createNavaiBackendClient,
   getNavaiRoutePromptLines,
   loadNavaiFunctions,
   resolveNavaiFrontendRuntimeConfig,
   resolveNavaiRoute,
+  resolveNavaiVoiceOrbRuntimeSnapshot,
   useWebVoiceAgent
 });