@navai/voice-frontend 0.1.2 → 0.1.5

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);
@@ -274,27 +823,33 @@ function getNavaiRoutePromptLines(routes = []) {
 // src/agent.ts
 var RESERVED_TOOL_NAMES = /* @__PURE__ */ new Set(["navigate_to", "execute_app_function"]);
 var TOOL_NAME_REGEXP = /^[a-zA-Z0-9_-]{1,64}$/;
+var DEBUG_PREFIX = "[navai debug]";
 function toErrorMessage2(error) {
   return error instanceof Error ? error.message : String(error);
 }
-async function buildNavaiAgent(options) {
-  const functionsRegistry = await loadNavaiFunctions(options.functionModuleLoaders ?? {});
-  const backendWarnings = [];
+function debugLog(message, details) {
+  if (details === void 0) {
+    console.log(`${DEBUG_PREFIX} ${message}`);
+    return;
+  }
+  console.log(`${DEBUG_PREFIX} ${message}`, details);
+}
+function normalizeBackendFunctions(backendFunctions, functionsRegistry, warnings) {
   const backendFunctionsByName = /* @__PURE__ */ new Map();
   const backendFunctionsOrdered = [];
-  for (const backendFunction of options.backendFunctions ?? []) {
+  for (const backendFunction of backendFunctions ?? []) {
     const name = backendFunction.name.trim().toLowerCase();
     if (!name) {
       continue;
     }
     if (functionsRegistry.byName.has(name)) {
-      backendWarnings.push(
+      warnings.push(
         `[navai] Ignored backend function "${backendFunction.name}": name conflicts with a frontend function.`
       );
       continue;
     }
     if (backendFunctionsByName.has(name)) {
-      backendWarnings.push(`[navai] Ignored duplicated backend function "${backendFunction.name}".`);
+      warnings.push(`[navai] Ignored duplicated backend function "${backendFunction.name}".`);
       continue;
     }
     const normalizedDefinition = {
@@ -304,94 +859,119 @@ async function buildNavaiAgent(options) {
     backendFunctionsByName.set(name, normalizedDefinition);
     backendFunctionsOrdered.push(normalizedDefinition);
   }
+  return backendFunctionsOrdered;
+}
+function createExecuteAppFunction(input) {
+  const backendFunctionsByName = new Map(input.backendFunctions.map((item) => [item.name, item]));
   const availableFunctionNames = [
-    ...functionsRegistry.ordered.map((item) => item.name),
-    ...backendFunctionsOrdered.map((item) => item.name)
+    ...input.functionsRegistry.ordered.map((item) => item.name),
+    ...input.backendFunctions.map((item) => item.name)
   ];
-  const aliasWarnings = [];
-  const directFunctionToolNames = [...new Set(availableFunctionNames)].map((name) => name.trim().toLowerCase()).filter((name) => {
-    if (!name) {
-      return false;
-    }
-    if (RESERVED_TOOL_NAMES.has(name)) {
-      aliasWarnings.push(
-        `[navai] Function "${name}" is available only via execute_app_function because its name conflicts with a built-in tool.`
-      );
-      return false;
-    }
-    if (!TOOL_NAME_REGEXP.test(name)) {
-      aliasWarnings.push(
-        `[navai] Function "${name}" is available only via execute_app_function because its name is not a valid tool id.`
-      );
-      return false;
-    }
-    return true;
-  });
   const executeAppFunction = async (requestedName, payload) => {
     const requested = requestedName.trim().toLowerCase();
-    const frontendDefinition = functionsRegistry.byName.get(requested);
+    debugLog("execute_app_function called", { requestedName, requested, payload });
+    const frontendDefinition = input.functionsRegistry.byName.get(requested);
     if (frontendDefinition) {
       try {
-        const result = await frontendDefinition.run(payload ?? {}, options);
-        return { ok: true, function_name: frontendDefinition.name, source: frontendDefinition.source, result };
+        debugLog("executing frontend function", {
+          functionName: frontendDefinition.name,
+          source: frontendDefinition.source
+        });
+        const result = await frontendDefinition.run(payload ?? {}, input.context);
+        const response = {
+          ok: true,
+          function_name: frontendDefinition.name,
+          source: frontendDefinition.source,
+          result
+        };
+        debugLog("frontend function completed", response);
+        return response;
       } catch (error) {
-        return {
+        const failure = {
           ok: false,
           function_name: frontendDefinition.name,
           error: "Function execution failed.",
           details: toErrorMessage2(error)
         };
+        debugLog("frontend function failed", failure);
+        return failure;
       }
     }
     const backendDefinition = backendFunctionsByName.get(requested);
     if (!backendDefinition) {
-      return {
+      const failure = {
         ok: false,
         error: "Unknown or disallowed function.",
         available_functions: availableFunctionNames
       };
+      debugLog("execute_app_function rejected unknown function", failure);
+      return failure;
     }
-    if (!options.executeBackendFunction) {
-      return {
+    if (!input.executeBackendFunction) {
+      const failure = {
         ok: false,
         function_name: backendDefinition.name,
         error: "Backend function execution is not configured."
       };
+      debugLog("backend function execution unavailable", failure);
+      return failure;
     }
     try {
-      const result = await options.executeBackendFunction({
+      debugLog("executing backend function", {
+        functionName: backendDefinition.name,
+        source: backendDefinition.source ?? "backend"
+      });
+      const result = await input.executeBackendFunction({
         functionName: backendDefinition.name,
         payload: payload ?? null
       });
-      return {
+      const response = {
         ok: true,
         function_name: backendDefinition.name,
         source: backendDefinition.source ?? "backend",
         result
       };
+      debugLog("backend function completed", response);
+      return response;
     } catch (error) {
-      return {
+      const failure = {
         ok: false,
         function_name: backendDefinition.name,
         error: "Function execution failed.",
         details: toErrorMessage2(error)
       };
+      debugLog("backend function failed", failure);
+      return failure;
     }
   };
-  const navigateTool = (0, import_realtime.tool)({
-    name: "navigate_to",
-    description: "Navigate to an allowed route in the current app.",
-    parameters: import_zod.z.object({
-      target: import_zod.z.string().min(1).describe("Route name or route path. Example: perfil, ajustes, /profile, /settings")
-    }),
-    execute: async ({ target }) => {
-      const path = resolveNavaiRoute(target, options.routes);
-      if (!path) {
-        return { ok: false, error: "Unknown or disallowed route." };
-      }
-      options.navigate(path);
-      return { ok: true, path };
+  return {
+    availableFunctionNames,
+    executeAppFunction
+  };
+}
+function createFunctionTools(input) {
+  const aliasWarnings = [];
+  const availableFunctionNames = [
+    ...input.functionsRegistry.ordered.map((item) => item.name),
+    ...input.backendFunctions.map((item) => item.name)
+  ];
+  const directFunctionToolNames = input.includeDirectAliases === false ? [] : [...new Set(availableFunctionNames)].map((name) => name.trim().toLowerCase()).filter((name) => {
+    if (!name) {
+      return false;
     }
+    if (RESERVED_TOOL_NAMES.has(name)) {
+      aliasWarnings.push(
+        `[navai] Function "${name}" is available only via execute_app_function because its name conflicts with a built-in tool.`
+      );
+      return false;
+    }
+    if (!TOOL_NAME_REGEXP.test(name)) {
+      aliasWarnings.push(
+        `[navai] Function "${name}" is available only via execute_app_function because its name is not a valid tool id.`
+      );
+      return false;
+    }
+    return true;
   });
   const executeFunctionTool = (0, import_realtime.tool)({
     name: "execute_app_function",
@@ -402,36 +982,146 @@ async function buildNavaiAgent(options) {
         "Payload object. Use null when no arguments are needed. Use payload.args as array for function args, payload.constructorArgs for class constructors, payload.methodArgs for class methods."
       )
     }),
-    execute: async ({ function_name, payload }) => await executeAppFunction(function_name, payload)
+    execute: async ({ function_name, payload }) => await input.executeAppFunction(function_name, payload)
   });
   const directFunctionTools = directFunctionToolNames.map(
     (functionName) => (0, import_realtime.tool)({
       name: functionName,
       description: `Direct alias for execute_app_function("${functionName}").`,
       parameters: import_zod.z.object({
-        payload: import_zod.z.record(import_zod.z.string(), import_zod.z.unknown()).nullable().optional().describe(
+        payload: import_zod.z.record(import_zod.z.string(), import_zod.z.unknown()).nullable().describe(
           "Payload object. Optional. Use payload.args as array for function args, payload.constructorArgs for class constructors, payload.methodArgs for class methods."
         )
       }),
-      execute: async ({ payload }) => await executeAppFunction(functionName, payload ?? null)
+      execute: async ({ payload }) => await input.executeAppFunction(functionName, payload ?? null)
     })
   );
-  const routeLines = getNavaiRoutePromptLines(options.routes);
-  const functionLines = functionsRegistry.ordered.length + backendFunctionsOrdered.length > 0 ? [
+  return {
+    aliasWarnings,
+    availableFunctionNames,
+    executeFunctionTool,
+    directFunctionTools
+  };
+}
+function buildFunctionLines(functionsRegistry, backendFunctions) {
+  return functionsRegistry.ordered.length + backendFunctions.length > 0 ? [
     ...functionsRegistry.ordered.map((item) => `- ${item.name}: ${item.description}`),
-    ...backendFunctionsOrdered.map(
-      (item) => `- ${item.name}: ${item.description ?? "Execute backend function."}`
-    )
+    ...backendFunctions.map((item) => `- ${item.name}: ${item.description ?? "Execute backend function."}`)
   ] : ["- none"];
+}
+async function buildNavaiAgent(options) {
+  const aggregatedWarnings = [];
+  const configuredAgents = (options.agents ?? []).filter(
+    (agent2) => Object.keys(agent2.functionModuleLoaders ?? {}).length > 0
+  );
+  const primaryAgentConfig = configuredAgents.find((agent2) => agent2.key === options.primaryAgentKey) ?? configuredAgents.find((agent2) => agent2.isPrimary) ?? configuredAgents[0];
+  const primaryFunctionLoaders = primaryAgentConfig?.functionModuleLoaders ?? options.functionModuleLoaders ?? {};
+  const functionsRegistry = await loadNavaiFunctions(primaryFunctionLoaders);
+  const backendFunctionsOrdered = normalizeBackendFunctions(options.backendFunctions, functionsRegistry, aggregatedWarnings);
+  const primaryExecutionSurface = createExecuteAppFunction({
+    functionsRegistry,
+    backendFunctions: backendFunctionsOrdered,
+    executeBackendFunction: options.executeBackendFunction,
+    context: options
+  });
+  const primaryFunctionTools = createFunctionTools({
+    functionsRegistry,
+    backendFunctions: backendFunctionsOrdered,
+    executeAppFunction: primaryExecutionSurface.executeAppFunction
+  });
+  aggregatedWarnings.push(...functionsRegistry.warnings, ...primaryFunctionTools.aliasWarnings);
+  const navigateTool = (0, import_realtime.tool)({
+    name: "navigate_to",
+    description: "Navigate to an allowed route in the current app.",
+    parameters: import_zod.z.object({
+      target: import_zod.z.string().min(1).describe("Route name or route path. Example: perfil, ajustes, /profile, /settings")
+    }),
+    execute: async ({ target }) => {
+      debugLog("navigate_to called", { target });
+      const path = resolveNavaiRoute(target, options.routes);
+      if (!path) {
+        const failure = { ok: false, error: "Unknown or disallowed route." };
+        debugLog("navigate_to rejected", failure);
+        return failure;
+      }
+      options.navigate(path);
+      const response = { ok: true, path };
+      debugLog("navigate_to completed", response);
+      return response;
+    }
+  });
+  const routeLines = getNavaiRoutePromptLines(options.routes);
+  const functionLines = buildFunctionLines(functionsRegistry, backendFunctionsOrdered);
+  const specialistAgents = [];
+  const specialistLines = [];
+  for (const runtimeAgent of configuredAgents) {
+    if (primaryAgentConfig && runtimeAgent.key === primaryAgentConfig.key) {
+      continue;
+    }
+    const specialistRegistry = await loadNavaiFunctions(runtimeAgent.functionModuleLoaders);
+    const specialistWarnings = [...specialistRegistry.warnings];
+    const specialistBackendFunctions = normalizeBackendFunctions(
+      options.backendFunctions,
+      specialistRegistry,
+      specialistWarnings
+    );
+    const specialistExecutionSurface = createExecuteAppFunction({
+      functionsRegistry: specialistRegistry,
+      backendFunctions: specialistBackendFunctions,
+      executeBackendFunction: options.executeBackendFunction,
+      context: options
+    });
+    const specialistFunctionTools = createFunctionTools({
+      functionsRegistry: specialistRegistry,
+      backendFunctions: specialistBackendFunctions,
+      executeAppFunction: specialistExecutionSurface.executeAppFunction,
+      includeDirectAliases: false
+    });
+    specialistWarnings.push(...specialistFunctionTools.aliasWarnings);
+    aggregatedWarnings.push(...specialistWarnings);
+    const specialistInstructions = [
+      runtimeAgent.instructions ?? `You are the ${runtimeAgent.name} specialist agent for this web app.`,
+      "Allowed app functions:",
+      ...buildFunctionLines(specialistRegistry, specialistBackendFunctions),
+      "Rules:",
+      "- Always use execute_app_function for app actions.",
+      "- When no arguments are needed, call execute_app_function with payload set to null.",
+      "- Use only the functions available to this specialist agent.",
+      "- Do not navigate unless one of your allowed functions explicitly does so.",
+      "- Return a concise result to the main NAVAI agent."
+    ].join("\n");
+    debugLog("creating specialist agent", {
+      key: runtimeAgent.key,
+      name: runtimeAgent.name,
+      functions: [
+        ...specialistRegistry.ordered.map((item) => item.name),
+        ...specialistBackendFunctions.map((item) => item.name)
+      ]
+    });
+    const specialistAgent = new import_realtime.RealtimeAgent({
+      name: runtimeAgent.name,
+      handoffDescription: runtimeAgent.handoffDescription ?? runtimeAgent.description ?? `Delegate specialist work to ${runtimeAgent.name}.`,
+      instructions: specialistInstructions,
+      tools: [specialistFunctionTools.executeFunctionTool]
+    });
+    specialistAgents.push(specialistAgent);
+    specialistLines.push(
+      `- ${runtimeAgent.name}: ${runtimeAgent.description ?? runtimeAgent.handoffDescription ?? "Specialist agent available by delegation."}`
+    );
+  }
   const instructions = [
-    options.baseInstructions ?? "You are a voice assistant embedded in a web app.",
+    primaryAgentConfig?.instructions ?? options.baseInstructions ?? "You are the main NAVAI voice agent embedded in a web app.",
     "Allowed routes:",
     ...routeLines,
     "Allowed app functions:",
     ...functionLines,
+    "Available specialist agents:",
+    ...specialistLines.length > 0 ? specialistLines : ["- none"],
     "Rules:",
     "- If user asks to go/open a section, always call navigate_to.",
-    "- If user asks to run an internal action, call execute_app_function or the matching direct function tool.",
+    "- If user asks to run an internal action that belongs to you, call execute_app_function or the matching direct function tool.",
+    "- If the task clearly belongs to a specialist agent, hand off to that specialist agent.",
+    "- Food recommendations, fast food, hamburgers, pizza, tacos, snacks, and meal suggestions belong to the food specialist.",
     "- Always include payload in execute_app_function. Use null when no arguments are needed.",
     "- For execute_app_function, pass arguments using payload.args (array).",
     "- For class methods, pass payload.constructorArgs and payload.methodArgs.",
@@ -439,11 +1129,23 @@ async function buildNavaiAgent(options) {
     "- If destination/action is unclear, ask a brief clarifying question."
   ].join("\n");
   const agent = new import_realtime.RealtimeAgent({
-    name: options.agentName ?? "Navai Voice Agent",
+    name: primaryAgentConfig?.name ?? options.agentName ?? "Navai Voice Agent",
     instructions,
-    tools: [navigateTool, executeFunctionTool, ...directFunctionTools]
+    handoffs: specialistAgents,
+    tools: [
+      navigateTool,
+      primaryFunctionTools.executeFunctionTool,
+      ...primaryFunctionTools.directFunctionTools
+    ]
+  });
+  debugLog("created primary agent", {
+    name: primaryAgentConfig?.name ?? options.agentName ?? "Navai Voice Agent",
+    primaryAgentKey: primaryAgentConfig?.key ?? null,
+    directFunctions: functionsRegistry.ordered.map((item) => item.name),
+    backendFunctions: backendFunctionsOrdered.map((item) => item.name),
+    specialistDelegates: configuredAgents.filter((runtimeAgent) => runtimeAgent.key !== primaryAgentConfig?.key).map((runtimeAgent) => runtimeAgent.key)
   });
-  return { agent, warnings: [...functionsRegistry.warnings, ...backendWarnings, ...aliasWarnings] };
+  return { agent, warnings: aggregatedWarnings };
 }
 
 // src/backend.ts
@@ -566,6 +1268,7 @@ function createNavaiBackendClient(options = {}) {
 // src/runtime.ts
 var ROUTES_ENV_KEYS = ["NAVAI_ROUTES_FILE"];
 var FUNCTIONS_ENV_KEYS = ["NAVAI_FUNCTIONS_FOLDERS"];
+var AGENTS_ENV_KEYS = ["NAVAI_AGENTS_FOLDERS"];
 var MODEL_ENV_KEYS = ["NAVAI_REALTIME_MODEL"];
 async function resolveNavaiFrontendRuntimeConfig(options) {
   const warnings = [];
@@ -575,6 +1278,7 @@ async function resolveNavaiFrontendRuntimeConfig(options) {
   const defaultFunctionsFolder = options.defaultFunctionsFolder ?? "src/ai/functions-modules";
   const routesFile = readOptional2(options.routesFile) ?? readFirstOptionalEnv(options.env, ROUTES_ENV_KEYS) ?? defaultRoutesFile;
   const functionsFolders = readOptional2(options.functionsFolders) ?? readFirstOptionalEnv(options.env, FUNCTIONS_ENV_KEYS) ?? defaultFunctionsFolder;
+  const agentsFolders = readOptional2(options.agentsFolders) ?? readFirstOptionalEnv(options.env, AGENTS_ENV_KEYS);
   const modelOverride = readOptional2(options.modelOverride) ?? readFirstOptionalEnv(options.env, MODEL_ENV_KEYS);
   const routes = await resolveRoutes({
     routesFile,
@@ -586,12 +1290,23 @@ async function resolveNavaiFrontendRuntimeConfig(options) {
   const functionModuleLoaders = resolveFunctionModuleLoaders({
     indexedLoaders,
     functionsFolders,
+    agentsFolders,
     defaultFunctionsFolder,
     warnings
   });
+  const agents = await resolveRuntimeAgents({
+    indexedLoaders,
+    functionModuleLoaders,
+    functionsFolders,
+    agentsFolders,
+    defaultFunctionsFolder
+  });
+  const primaryAgentKey = agents.find((agent) => agent.isPrimary)?.key;
   return {
     routes,
     functionModuleLoaders,
+    agents,
+    primaryAgentKey,
     modelOverride,
     warnings
   };
@@ -627,10 +1342,11 @@ async function resolveRoutes(input) {
 }
 function resolveFunctionModuleLoaders(input) {
   const configuredTokens = input.functionsFolders.split(",").map((value) => value.trim()).filter(Boolean);
+  const agentFolders = parseCsvList(input.agentsFolders);
   const tokens = configuredTokens.length > 0 ? configuredTokens : [input.defaultFunctionsFolder];
-  const matchers = tokens.map((token) => createPathMatcher(token));
+  const matchers = tokens.map((token) => createPathMatcher(token, agentFolders));
   const matchedEntries = input.indexedLoaders.filter(
-    (entry) => !entry.normalizedPath.endsWith(".d.ts") && !entry.normalizedPath.startsWith("src/node_modules/") && matchers.some((matcher) => matcher(entry.normalizedPath))
+    (entry) => !entry.normalizedPath.endsWith(".d.ts") && !entry.normalizedPath.startsWith("src/node_modules/") && !isAgentConfigPath(entry.normalizedPath) && matchers.some((matcher) => matcher(entry.normalizedPath))
   );
   if (matchedEntries.length > 0) {
     return Object.fromEntries(matchedEntries.map((entry) => [entry.rawPath, entry.load]));
@@ -640,9 +1356,9 @@ function resolveFunctionModuleLoaders(input) {
       `[navai] NAVAI_FUNCTIONS_FOLDERS did not match any module: "${input.functionsFolders}". Falling back to "${input.defaultFunctionsFolder}".`
     );
   }
-  const fallbackMatcher = createPathMatcher(input.defaultFunctionsFolder);
+  const fallbackMatcherWithAgents = createPathMatcher(input.defaultFunctionsFolder, agentFolders);
   const fallbackEntries = input.indexedLoaders.filter(
-    (entry) => !entry.normalizedPath.endsWith(".d.ts") && !entry.normalizedPath.startsWith("src/node_modules/") && fallbackMatcher(entry.normalizedPath)
+    (entry) => !entry.normalizedPath.endsWith(".d.ts") && !entry.normalizedPath.startsWith("src/node_modules/") && !isAgentConfigPath(entry.normalizedPath) && fallbackMatcherWithAgents(entry.normalizedPath)
   );
   return Object.fromEntries(fallbackEntries.map((entry) => [entry.rawPath, entry.load]));
 }
@@ -685,7 +1401,7 @@ function buildModuleCandidates(inputPath) {
   }
   return [srcPrefixed, `${srcPrefixed}.ts`, `${srcPrefixed}.js`, `${srcPrefixed}/index.ts`, `${srcPrefixed}/index.js`];
 }
-function createPathMatcher(input) {
+function createPathMatcher(input, agentFolders = []) {
   const raw = normalizePath(input);
   if (!raw) {
     return () => false;
@@ -703,8 +1419,141 @@ function createPathMatcher(input) {
     return (path) => path === normalized;
   }
   const base = normalized.replace(/\/+$/, "");
+  const normalizedAgents = agentFolders.map(normalizePathSegment).filter(Boolean);
+  if (normalizedAgents.length > 0) {
+    return (path) => {
+      if (!path.startsWith(`${base}/`)) {
+        return false;
+      }
+      const suffix = path.slice(base.length + 1);
+      const firstSegment = suffix.split("/", 1)[0] ?? "";
+      return normalizedAgents.includes(firstSegment);
+    };
+  }
   return (path) => path === base || path.startsWith(`${base}/`);
 }
+async function resolveRuntimeAgents(input) {
+  const configuredAgents = parseCsvList(input.agentsFolders);
+  if (configuredAgents.length === 0) {
+    return [];
+  }
+  const loaderByPath = new Map(input.indexedLoaders.map((entry) => [entry.normalizedPath, entry]));
+  const baseDirectories = resolveAgentBaseDirectories(input.functionsFolders, input.defaultFunctionsFolder);
+  const groupedLoaders = /* @__PURE__ */ new Map();
+  for (const [rawPath, load] of Object.entries(input.functionModuleLoaders)) {
+    const agentKey = extractAgentKeyFromPath(rawPath, baseDirectories, configuredAgents);
+    if (!agentKey) {
+      continue;
+    }
+    const current = groupedLoaders.get(agentKey) ?? {};
+    current[rawPath] = load;
+    groupedLoaders.set(agentKey, current);
+  }
+  const configuredPrimaryKey = configuredAgents[0];
+  const agents = [];
+  for (const agentKey of configuredAgents) {
+    const functionLoaders = groupedLoaders.get(agentKey);
+    if (!functionLoaders || Object.keys(functionLoaders).length === 0) {
+      continue;
+    }
+    const config = await loadAgentModuleConfig(agentKey, baseDirectories, loaderByPath);
+    agents.push({
+      key: config.key?.trim() || agentKey,
+      name: readOptional2(config.name) ?? humanizeAgentKey(agentKey),
+      description: readOptional2(config.description),
+      handoffDescription: readOptional2(config.handoffDescription) ?? readOptional2(config.description),
+      instructions: readOptional2(config.instructions),
+      isPrimary: config.isPrimary === true || agentKey === configuredPrimaryKey,
+      functionModuleLoaders: functionLoaders
+    });
+  }
+  if (agents.filter((agent) => agent.isPrimary).length === 0 && agents[0]) {
+    agents[0].isPrimary = true;
+  }
+  if (agents.filter((agent) => agent.isPrimary).length > 1) {
+    let primaryAssigned = false;
+    for (const agent of agents) {
+      if (agent.isPrimary && !primaryAssigned) {
+        primaryAssigned = true;
+        continue;
+      }
+      agent.isPrimary = false;
+    }
+  }
+  return agents;
+}
+async function loadAgentModuleConfig(agentKey, baseDirectories, loaderByPath) {
+  for (const baseDirectory of baseDirectories) {
+    const configBase = `${baseDirectory}/${agentKey}/agent.config`;
+    const matchedLoader = buildModuleCandidates(configBase).map((candidate) => loaderByPath.get(candidate)).find(Boolean);
+    if (!matchedLoader) {
+      continue;
+    }
+    try {
+      const imported = await matchedLoader.load();
+      return readAgentModuleConfig(imported);
+    } catch {
+      return {};
+    }
+  }
+  return {};
+}
+function readAgentModuleConfig(moduleShape) {
+  const candidate = readRecord(moduleShape.NAVAI_AGENT) ?? readRecord(moduleShape.agent) ?? readRecord(moduleShape.default) ?? {};
+  return {
+    key: readOptionalString(candidate.key),
+    name: readOptionalString(candidate.name),
+    description: readOptionalString(candidate.description),
+    handoffDescription: readOptionalString(candidate.handoffDescription),
+    instructions: readOptionalString(candidate.instructions),
+    isPrimary: candidate.isPrimary === true
+  };
+}
+function readRecord(value) {
+  return value && typeof value === "object" ? value : null;
+}
+function readOptionalString(value) {
+  return typeof value === "string" ? readOptional2(value) : void 0;
+}
+function resolveAgentBaseDirectories(functionsFolders, defaultFunctionsFolder) {
+  const configuredTokens = functionsFolders.split(",").map((value) => value.trim()).filter(Boolean);
+  const tokens = configuredTokens.length > 0 ? configuredTokens : [defaultFunctionsFolder];
+  return [...new Set(tokens.map(toAgentBaseDirectory).filter(Boolean))];
+}
+function toAgentBaseDirectory(input) {
+  const raw = normalizePath(input);
+  if (!raw) {
+    return null;
+  }
+  const normalized = raw.startsWith("src/") ? raw : `src/${raw}`;
+  if (normalized.includes("*") || /\.[cm]?[jt]s$/.test(normalized)) {
+    return null;
+  }
+  if (normalized.endsWith("/...")) {
+    return normalized.slice(0, -4).replace(/\/+$/, "") || null;
+  }
+  return normalized.replace(/\/+$/, "") || null;
+}
+function extractAgentKeyFromPath(pathValue, baseDirectories, configuredAgents) {
+  const normalized = normalizePath(pathValue);
+  for (const baseDirectory of baseDirectories) {
+    if (!normalized.startsWith(`${baseDirectory}/`)) {
+      continue;
+    }
+    const suffix = normalized.slice(baseDirectory.length + 1);
+    const firstSegment = suffix.split("/", 1)[0] ?? "";
+    if (configuredAgents.includes(firstSegment)) {
+      return firstSegment;
+    }
+  }
+  return void 0;
+}
+function humanizeAgentKey(value) {
+  return value.split(/[_-]+/g).filter(Boolean).map((part) => part.slice(0, 1).toUpperCase() + part.slice(1)).join(" ");
+}
+function isAgentConfigPath(pathValue) {
+  return /\/agent\.config\.[cm]?[jt]s$/i.test(pathValue);
+}
 function globToRegExp(pattern) {
   const escaped = pattern.replace(/[.+^${}()|[\]\\]/g, "\\$&");
   const wildcardSafe = escaped.replace(/\*\*/g, "___DOUBLE_STAR___");
@@ -715,6 +1564,12 @@ function globToRegExp(pattern) {
 function normalizePath(input) {
   return input.trim().replace(/\\/g, "/").replace(/^\/+/, "").replace(/^(\.\/)+/, "").replace(/^(\.\.\/)+/, "");
 }
+function normalizePathSegment(input) {
+  return normalizePath(input).replace(/\//g, "");
+}
+function parseCsvList(input) {
+  return (input ?? "").split(",").map((value) => normalizePathSegment(value)).filter(Boolean);
+}
 function readFirstOptionalEnv(env, keys) {
   if (!env) {
     return void 0;
@@ -745,6 +1600,7 @@ function toErrorMessage3(error) {
 // src/useWebVoiceAgent.ts
 var import_realtime2 = require("@openai/agents/realtime");
 var import_react = require("react");
+var DEBUG_PREFIX2 = "[navai debug]";
 function formatError(error) {
   if (error instanceof Error) {
     return error.message;
@@ -758,6 +1614,13 @@ function emitWarnings(warnings) {
     }
   }
 }
+function debugLog2(message, details) {
+  if (details === void 0) {
+    console.log(`${DEBUG_PREFIX2} ${message}`);
+    return;
+  }
+  console.log(`${DEBUG_PREFIX2} ${message}`, details);
+}
 function useWebVoiceAgent(options) {
   const sessionRef = (0, import_react.useRef)(null);
   const attachedRealtimeSessionRef = (0, import_react.useRef)(null);
@@ -768,6 +1631,7 @@ function useWebVoiceAgent(options) {
       env: options.env,
       routesFile: options.routesFile,
       functionsFolders: options.functionsFolders,
+      agentsFolders: options.agentsFolders,
       modelOverride: options.modelOverride,
       defaultRoutesFile: options.defaultRoutesFile,
       defaultFunctionsFolder: options.defaultFunctionsFolder
@@ -776,6 +1640,7 @@ function useWebVoiceAgent(options) {
       options.defaultFunctionsFolder,
       options.defaultRoutes,
       options.defaultRoutesFile,
+      options.agentsFolders,
       options.env,
       options.functionsFolders,
       options.modelOverride,
@@ -822,6 +1687,45 @@ function useWebVoiceAgent(options) {
   const attachSessionAudioListeners = (0, import_react.useCallback)(
     (session) => {
       detachSessionAudioListeners();
+      session.on("agent_start", (_context, agent, turnInput) => {
+        debugLog2("session agent_start", {
+          agent: agent.name,
+          turnInputCount: Array.isArray(turnInput) ? turnInput.length : 0
+        });
+      });
+      session.on("agent_end", (_context, agent, output) => {
+        debugLog2("session agent_end", {
+          agent: agent.name,
+          output
+        });
+      });
+      session.on("agent_handoff", (_context, fromAgent, toAgent) => {
+        debugLog2("session agent_handoff", {
+          from: fromAgent.name,
+          to: toAgent.name
+        });
+      });
+      session.on("agent_tool_start", (_context, agent, tool2, details) => {
+        debugLog2("session agent_tool_start", {
+          agent: agent.name,
+          tool: tool2.name,
+          toolCall: details.toolCall
+        });
+      });
+      session.on("agent_tool_end", (_context, agent, tool2, result, details) => {
+        debugLog2("session agent_tool_end", {
+          agent: agent.name,
+          tool: tool2.name,
+          result,
+          toolCall: details.toolCall
+        });
+      });
+      session.on("history_added", (item) => {
+        debugLog2("session history_added", item);
+      });
+      session.on("error", (sessionError) => {
+        debugLog2("session error", sessionError);
+      });
       session.on("audio_start", handleSessionAudioStart);
       session.on("audio_stopped", handleSessionAudioStopped);
       session.on("audio_interrupted", handleSessionAudioInterrupted);
@@ -860,6 +1764,17 @@ function useWebVoiceAgent(options) {
     setAgentVoiceStateIfChanged("idle");
     try {
       const runtimeConfig = await runtimeConfigPromise;
+      debugLog2("resolved runtime config", {
+        routes: runtimeConfig.routes.map((route) => route.path),
+        functionModules: Object.keys(runtimeConfig.functionModuleLoaders),
+        agents: runtimeConfig.agents.map((agent2) => ({
+          key: agent2.key,
+          name: agent2.name,
+          isPrimary: agent2.isPrimary,
+          functionModules: Object.keys(agent2.functionModuleLoaders)
+        })),
+        warnings: runtimeConfig.warnings
+      });
       const requestPayload = runtimeConfig.modelOverride ? { model: runtimeConfig.modelOverride } : {};
       const secretPayload = await backendClient.createClientSecret(requestPayload);
       const backendFunctionsResult = await backendClient.listFunctions();
@@ -867,6 +1782,8 @@ function useWebVoiceAgent(options) {
         navigate: options.navigate,
         routes: runtimeConfig.routes,
         functionModuleLoaders: runtimeConfig.functionModuleLoaders,
+        agents: runtimeConfig.agents,
+        primaryAgentKey: runtimeConfig.primaryAgentKey,
         backendFunctions: backendFunctionsResult.functions,
         executeBackendFunction: backendClient.executeFunction
       });
@@ -882,6 +1799,7 @@ function useWebVoiceAgent(options) {
       setStatus("connected");
     } catch (startError) {
       const message = formatError(startError);
+      debugLog2("session start failed", { message, error: startError });
       setError(message);
       setStatus("error");
       setAgentVoiceStateIfChanged("idle");
@@ -912,13 +1830,367 @@ function useWebVoiceAgent(options) {
     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
 });