@actioneer/ads 0.3.0 → 0.4.0

package/components/ai-elements/voice.js

@@ -1,21 +1,19 @@
 "use client";
-import { jsx as e, jsxs as c, Fragment as y } from "react/jsx-runtime";
-import * as s from "react";
-import { MotionConfig as Z, motion as B, useReducedMotion as K } from "motion/react";
-import { cn as T } from "../../lib/cn.js";
-import { EASE_OUT as F, EASE_IN_OUT as X } from "../../lib/motion.js";
-import { Button as G } from "../button.js";
-import { Tooltip as j } from "../tooltip.js";
-import { AgentAudioVisualizerAura as J } from "../agents-ui/agent-audio-visualizer-aura.js";
-import { AgentAudioVisualizerWave as Q } from "../agents-ui/agent-audio-visualizer-wave.js";
-import { Call as ee, PhoneOff as oe, MicOff as te, Mic as ie } from "../../lib/icons.js";
-const Te = [
+import { jsx as a, jsxs as G, Fragment as X } from "react/jsx-runtime";
+import * as i from "react";
+import { useReducedMotion as $ } from "motion/react";
+import { cn as R } from "../../lib/cn.js";
+import { Button as U } from "../button.js";
+import { Tooltip as H } from "../tooltip.js";
+import { Call as J, PhoneOff as Q, MicOff as Z, Mic as ee } from "../../lib/icons.js";
+const be = [
   "default",
+  "identity",
   "blue",
   "violet",
   "emerald",
   "sunset"
-], re = ["orb", "aura", "wave"], $e = [
+], Re = ["orb"], we = [
   "idle",
   "connecting",
   "listening",
@@ -23,407 +21,16 @@ const Te = [
   "speaking",
   "muted",
   "asleep"
-], C = {
-  // Near-white slash with a silver sheen; quiet, silver-on-light.
-  command: {
-    sheen: "#ffffff",
-    silver: "#c7ccd6",
-    silverDeep: "#a6adbc",
-    shadow: "rgba(58,64,82,0.22)",
-    accent: "#c7ccd6"
-  },
-  // Two flat electric-violet 4-point sparkles.
-  glint: {
-    spark: "#8030e0",
-    sparkLite: "#9a4cf0",
-    accent: "#8030e0"
-  },
-  // Thin silver-white ring with a soft warm-white glow.
-  halo: {
-    ring: "#cfd4de",
-    ringLite: "#ffffff",
-    glow: "#fff2dd",
-    accent: "#e9d9b8"
-  },
-  // Glossy deep-blue sphere: navy shadow → cobalt body → ice-blue highlights.
-  mana: {
-    lit: "#5b7ce0",
-    body: "#4060b0",
-    mid: "#203060",
-    shadow: "#001020",
-    cloud: "#3a5aa8",
-    cloudLite: "#6f8fe4",
-    ice: "#90d0ff",
-    spec: "#ffffff",
-    accent: "#90d0ff"
-  },
-  // Polished chrome ball: silver body, gray crescent core, white gloss.
-  obsidian: {
-    hi: "#f6f6f8",
-    body: "#d0d2d8",
-    horizon: "#8a8a92",
-    low: "#e4e5ea",
-    coreLite: "#dcdde2",
-    coreDark: "#6f6f76",
-    rim: "#101010",
-    gloss: "#ffffff",
-    accent: "#c8ccd6"
-  },
-  // Iridescent orb: crimson top, magenta left, amber right, cyan bottom, melting.
-  opal: {
-    crimson: "#e03020",
-    rust: "#802010",
-    pink: "#f080d0",
-    magenta: "#f080e0",
-    amber: "#f0b024",
-    yellow: "#ffd45a",
-    cyan: "#30d0d0",
-    sheen: "#ffffff",
-    accent: "#f080d0"
-  }
-}, ne = {
-  idle: { scale: [1, 1.04, 1], opacity: 1, duration: 4 },
-  connecting: { scale: [1, 1.06, 1], opacity: 1, duration: 1.3 },
-  listening: { scale: [1, 1.09, 1], opacity: 1, duration: 1.7 },
-  thinking: { scale: [1, 1.03, 1], opacity: 1, duration: 2.4 },
-  speaking: { scale: [1, 1.12, 0.99, 1.07, 1], opacity: 1, duration: 0.95 },
-  muted: { scale: [1, 1.02, 1], opacity: 0.7, duration: 5 },
-  asleep: { scale: [1, 1.015, 1], opacity: 0.45, duration: 6 }
-}, ce = {
-  command: { idle: 0, think: 42 },
-  glint: { idle: 5, think: 65 },
-  halo: { idle: 20, think: 80 },
-  mana: { idle: 0, think: 28 },
-  obsidian: { idle: 4, think: 48 },
-  opal: { idle: 9, think: 40 }
-}, le = {
-  idle: "idle",
-  connecting: "think",
-  listening: "idle",
-  thinking: "think",
-  speaking: "idle",
-  muted: "slow",
-  asleep: "stop"
-}, se = {
-  listening: { count: 2, duration: 1.7, maxScale: 1.7, peak: 0.4 },
-  connecting: { count: 1, duration: 1.9, maxScale: 1.55, peak: 0.32 }
-};
-function ae(r, o) {
-  switch (r) {
-    case "command": {
-      const t = C.command, i = `${o}-cmd`;
-      return {
-        defs: /* @__PURE__ */ c(y, { children: [
-          /* @__PURE__ */ c("linearGradient", { id: i, x1: "0", y1: "1", x2: "1", y2: "0", children: [
-            /* @__PURE__ */ e("stop", { offset: "0%", stopColor: t.silverDeep }),
-            /* @__PURE__ */ e("stop", { offset: "45%", stopColor: t.silver }),
-            /* @__PURE__ */ e("stop", { offset: "70%", stopColor: t.sheen }),
-            /* @__PURE__ */ e("stop", { offset: "100%", stopColor: t.silver })
-          ] }),
-          /* @__PURE__ */ e("filter", { id: `${i}-s`, x: "-40%", y: "-40%", width: "180%", height: "180%", children: /* @__PURE__ */ e("feDropShadow", { dx: "0", dy: "2.5", stdDeviation: "3", floodColor: t.shadow }) })
-        ] }),
-        body: /* @__PURE__ */ e("g", { filter: `url(#${i}-s)`, children: /* @__PURE__ */ e(
-          "line",
-          {
-            x1: 37,
-            y1: 72,
-            x2: 63,
-            y2: 28,
-            stroke: `url(#${i})`,
-            strokeWidth: 13,
-            strokeLinecap: "round"
-          }
-        ) })
-      };
-    }
-    case "glint": {
-      const t = C.glint;
-      return {
-        defs: null,
-        body: /* @__PURE__ */ c(y, { children: [
-          /* @__PURE__ */ e(
-            "path",
-            {
-              d: "M50 16 C53.5 43 56.5 46.5 84 50 C56.5 53.5 53.5 57 50 84 C46.5 57 43.5 53.5 16 50 C43.5 46.5 46.5 43 50 16 Z",
-              fill: t.spark
-            }
-          ),
-          /* @__PURE__ */ e(
-            "path",
-            {
-              d: "M27 60 C28.6 68 29.4 68.8 37 70.5 C29.4 72.2 28.6 73 27 81 C25.4 73 24.6 72.2 17 70.5 C24.6 68.8 25.4 68 27 60 Z",
-              fill: t.sparkLite
-            }
-          )
-        ] })
-      };
-    }
-    case "halo": {
-      const t = C.halo, i = `${o}-halo`;
-      return {
-        defs: /* @__PURE__ */ c(y, { children: [
-          /* @__PURE__ */ c("linearGradient", { id: i, x1: "0", y1: "0", x2: "1", y2: "1", children: [
-            /* @__PURE__ */ e("stop", { offset: "0%", stopColor: t.ringLite }),
-            /* @__PURE__ */ e("stop", { offset: "50%", stopColor: t.ring }),
-            /* @__PURE__ */ e("stop", { offset: "100%", stopColor: t.ringLite })
-          ] }),
-          /* @__PURE__ */ e("filter", { id: `${i}-glow`, x: "-60%", y: "-60%", width: "220%", height: "220%", children: /* @__PURE__ */ e("feGaussianBlur", { stdDeviation: "4" }) })
-        ] }),
-        // Warm-white glow + the crisp silver ring stay fixed …
-        under: /* @__PURE__ */ c(y, { children: [
-          /* @__PURE__ */ e(
-            "circle",
-            {
-              cx: 50,
-              cy: 50,
-              r: 30,
-              fill: "none",
-              stroke: t.glow,
-              strokeWidth: 9,
-              opacity: 0.55,
-              filter: `url(#${i}-glow)`
-            }
-          ),
-          /* @__PURE__ */ e("circle", { cx: 50, cy: 50, r: 30, fill: "none", stroke: `url(#${i})`, strokeWidth: 4 })
-        ] }),
-        // … while a bright sheen arc travels around it.
-        body: /* @__PURE__ */ e(
-          "path",
-          {
-            d: "M50 20 A30 30 0 0 1 78 44",
-            fill: "none",
-            stroke: t.ringLite,
-            strokeWidth: 4.5,
-            strokeLinecap: "round"
-          }
-        )
-      };
-    }
-    case "mana": {
-      const t = C.mana, i = `${o}-mana`;
-      return {
-        defs: /* @__PURE__ */ c(y, { children: [
-          /* @__PURE__ */ c("radialGradient", { id: i, cx: "0.4", cy: "0.34", r: "0.75", children: [
-            /* @__PURE__ */ e("stop", { offset: "0%", stopColor: t.lit }),
-            /* @__PURE__ */ e("stop", { offset: "45%", stopColor: t.body }),
-            /* @__PURE__ */ e("stop", { offset: "78%", stopColor: t.mid }),
-            /* @__PURE__ */ e("stop", { offset: "100%", stopColor: t.shadow })
-          ] }),
-          /* @__PURE__ */ e("filter", { id: `${i}-b`, x: "-30%", y: "-30%", width: "160%", height: "160%", children: /* @__PURE__ */ e("feGaussianBlur", { stdDeviation: "2.4" }) }),
-          /* @__PURE__ */ e("clipPath", { id: `${i}-c`, children: /* @__PURE__ */ e("circle", { cx: 50, cy: 50, r: 32 }) })
-        ] }),
-        // Sphere + cloudy internal texture rotate inside the clipped circle …
-        body: /* @__PURE__ */ c("g", { clipPath: `url(#${i}-c)`, children: [
-          /* @__PURE__ */ e("circle", { cx: 50, cy: 50, r: 32, fill: `url(#${i})` }),
-          /* @__PURE__ */ c("g", { filter: `url(#${i}-b)`, children: [
-            /* @__PURE__ */ e(
-              "ellipse",
-              {
-                cx: 44,
-                cy: 60,
-                rx: 14,
-                ry: 9,
-                fill: t.cloud,
-                opacity: 0.55,
-                transform: "rotate(-20 44 60)"
-              }
-            ),
-            /* @__PURE__ */ e(
-              "ellipse",
-              {
-                cx: 60,
-                cy: 44,
-                rx: 10,
-                ry: 7,
-                fill: t.cloudLite,
-                opacity: 0.45,
-                transform: "rotate(25 60 44)"
-              }
-            ),
-            /* @__PURE__ */ e("ellipse", { cx: 38, cy: 40, rx: 7, ry: 5, fill: t.cloudLite, opacity: 0.35 })
-          ] })
-        ] }),
-        // … while the ice-blue + white speculars stay put (fixed light source).
-        over: /* @__PURE__ */ c("g", { children: [
-          /* @__PURE__ */ e(
-            "ellipse",
-            {
-              cx: 62,
-              cy: 38,
-              rx: 9,
-              ry: 6,
-              fill: t.ice,
-              opacity: 0.5,
-              transform: "rotate(-30 62 38)",
-              filter: `url(#${i}-b)`
-            }
-          ),
-          /* @__PURE__ */ e(
-            "ellipse",
-            {
-              cx: 59,
-              cy: 35,
-              rx: 5.5,
-              ry: 3.8,
-              fill: t.spec,
-              opacity: 0.9,
-              transform: "rotate(-30 59 35)"
-            }
-          ),
-          /* @__PURE__ */ e("ellipse", { cx: 66, cy: 43, rx: 2.6, ry: 1.9, fill: t.spec, opacity: 0.7 })
-        ] })
-      };
-    }
-    case "opal": {
-      const t = C.opal, i = `${o}-opal`;
-      return {
-        defs: /* @__PURE__ */ c(y, { children: [
-          /* @__PURE__ */ e("filter", { id: `${i}-b`, x: "-30%", y: "-30%", width: "160%", height: "160%", children: /* @__PURE__ */ e("feGaussianBlur", { stdDeviation: "7" }) }),
-          /* @__PURE__ */ e("clipPath", { id: `${i}-c`, children: /* @__PURE__ */ e("circle", { cx: 50, cy: 50, r: 33 }) }),
-          /* @__PURE__ */ c("radialGradient", { id: `${i}-sheen`, cx: "0.4", cy: "0.32", r: "0.5", children: [
-            /* @__PURE__ */ e("stop", { offset: "0%", stopColor: t.sheen, stopOpacity: 0.55 }),
-            /* @__PURE__ */ e("stop", { offset: "60%", stopColor: t.sheen, stopOpacity: 0 })
-          ] })
-        ] }),
-        // The multi-hue field drifts (rotates slowly) so the colors melt.
-        body: /* @__PURE__ */ c("g", { clipPath: `url(#${i}-c)`, children: [
-          /* @__PURE__ */ e("circle", { cx: 50, cy: 50, r: 33, fill: t.pink }),
-          /* @__PURE__ */ c("g", { filter: `url(#${i}-b)`, children: [
-            /* @__PURE__ */ e("ellipse", { cx: 50, cy: 24, rx: 27, ry: 23, fill: t.crimson }),
-            /* @__PURE__ */ e("ellipse", { cx: 40, cy: 20, rx: 14, ry: 12, fill: t.rust }),
-            /* @__PURE__ */ e("ellipse", { cx: 26, cy: 52, rx: 22, ry: 26, fill: t.magenta }),
-            /* @__PURE__ */ e("ellipse", { cx: 74, cy: 50, rx: 23, ry: 25, fill: t.amber }),
-            /* @__PURE__ */ e("ellipse", { cx: 80, cy: 60, rx: 12, ry: 12, fill: t.yellow }),
-            /* @__PURE__ */ e("ellipse", { cx: 50, cy: 78, rx: 27, ry: 22, fill: t.cyan }),
-            /* @__PURE__ */ e("ellipse", { cx: 62, cy: 70, rx: 14, ry: 12, fill: t.pink })
-          ] })
-        ] }),
-        over: /* @__PURE__ */ e("circle", { cx: 50, cy: 50, r: 33, fill: `url(#${i}-sheen)` })
-      };
-    }
-    case "obsidian":
-    default: {
-      const t = C.obsidian, i = `${o}-obs`;
-      return {
-        defs: /* @__PURE__ */ c(y, { children: [
-          /* @__PURE__ */ c("linearGradient", { id: `${i}-b`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-            /* @__PURE__ */ e("stop", { offset: "0%", stopColor: t.hi }),
-            /* @__PURE__ */ e("stop", { offset: "34%", stopColor: t.body }),
-            /* @__PURE__ */ e("stop", { offset: "54%", stopColor: t.horizon }),
-            /* @__PURE__ */ e("stop", { offset: "72%", stopColor: t.body }),
-            /* @__PURE__ */ e("stop", { offset: "100%", stopColor: t.low })
-          ] }),
-          /* @__PURE__ */ c("radialGradient", { id: `${i}-core`, cx: "0.42", cy: "0.4", r: "0.65", children: [
-            /* @__PURE__ */ e("stop", { offset: "0%", stopColor: t.coreLite }),
-            /* @__PURE__ */ e("stop", { offset: "100%", stopColor: t.coreDark })
-          ] }),
-          /* @__PURE__ */ e("filter", { id: `${i}-gl`, x: "-40%", y: "-40%", width: "180%", height: "180%", children: /* @__PURE__ */ e("feGaussianBlur", { stdDeviation: "2" }) }),
-          /* @__PURE__ */ e("clipPath", { id: `${i}-c`, children: /* @__PURE__ */ e("circle", { cx: 50, cy: 50, r: 32 }) })
-        ] }),
-        // Chrome body + gray crescent core + rim accents rotate …
-        body: /* @__PURE__ */ c("g", { clipPath: `url(#${i}-c)`, children: [
-          /* @__PURE__ */ e("circle", { cx: 50, cy: 50, r: 32, fill: `url(#${i}-b)` }),
-          /* @__PURE__ */ e(
-            "circle",
-            {
-              cx: 50,
-              cy: 51,
-              r: 20,
-              fill: "none",
-              stroke: t.coreLite,
-              strokeWidth: 2.5,
-              opacity: 0.8
-            }
-          ),
-          /* @__PURE__ */ e("circle", { cx: 51, cy: 53, r: 16, fill: `url(#${i}-core)` }),
-          /* @__PURE__ */ e("circle", { cx: 47, cy: 49, r: 14, fill: `url(#${i}-b)` }),
-          /* @__PURE__ */ e("circle", { cx: 73, cy: 58, r: 1.6, fill: t.rim, opacity: 0.5 }),
-          /* @__PURE__ */ e("circle", { cx: 30, cy: 64, r: 1.3, fill: t.rim, opacity: 0.4 })
-        ] }),
-        // … while the white gloss stays fixed (polished-chrome highlight).
-        over: /* @__PURE__ */ e(
-          "ellipse",
-          {
-            cx: 41,
-            cy: 37,
-            rx: 8,
-            ry: 5.5,
-            fill: t.gloss,
-            opacity: 0.85,
-            transform: "rotate(-25 41 37)",
-            filter: `url(#${i}-gl)`
-          }
-        )
-      };
-    }
-  }
-}
-const q = s.forwardRef(({ state: r, variant: o, className: t, ariaLabel: i }, n) => {
-  const p = s.useId().replace(/[:]/g, ""), d = ae(o, p), m = ne[r], g = C[o].accent, a = se[r], h = le[r], v = ce[o], k = h === "think" ? v.think : h === "idle" ? v.idle : h === "slow" ? v.idle * 0.4 : 0, x = k > 0, _ = x ? { duration: 360 / k, ease: "linear", repeat: 1 / 0 } : { duration: 0.2, ease: F };
-  return /* @__PURE__ */ e(Z, { reducedMotion: "user", children: /* @__PURE__ */ e(
-    B.div,
-    {
-      ref: n,
-      role: "img",
-      "aria-label": i ?? `AI voice, ${r}`,
-      "data-state": r,
-      "data-variant": o,
-      className: T(
-        "relative inline-flex size-16 shrink-0 items-center justify-center",
-        t
-      ),
-      animate: { scale: m.scale, opacity: m.opacity },
-      transition: {
-        scale: {
-          duration: m.duration,
-          ease: X,
-          repeat: 1 / 0,
-          repeatType: "loop"
-        },
-        opacity: { duration: 0.2, ease: F }
-      },
-      children: /* @__PURE__ */ c("svg", { viewBox: "0 0 100 100", className: "size-full", fill: "none", "aria-hidden": !0, children: [
-        d.defs && /* @__PURE__ */ e("defs", { children: d.defs }),
-        d.under,
-        a && Array.from({ length: a.count }).map((L, P) => /* @__PURE__ */ e(
-          B.rect,
-          {
-            x: 20,
-            y: 20,
-            width: 60,
-            height: 60,
-            rx: o === "command" ? 18 : 30,
-            fill: "none",
-            stroke: g,
-            strokeWidth: 2.5,
-            style: { transformBox: "fill-box", transformOrigin: "center" },
-            initial: { scale: 0.95, opacity: 0 },
-            animate: { scale: a.maxScale, opacity: [0, a.peak, 0] },
-            transition: {
-              duration: a.duration,
-              ease: F,
-              repeat: 1 / 0,
-              delay: P * (a.duration / 2)
-            }
-          },
-          P
-        )),
-        /* @__PURE__ */ e(
-          B.g,
-          {
-            style: { transformBox: "fill-box", transformOrigin: "center" },
-            animate: { rotate: x ? 360 : 0 },
-            transition: _,
-            children: d.body
-          }
-        ),
-        d.over
-      ] })
-    }
-  ) });
-});
-q.displayName = "PersonaVisual";
-const H = {
+], te = {
+  /**
+   * Base colours for `seed`-derived hues. The shader rotates these by u_hue,
+   * so each seed lands on its own colourway from one shared spectrum.
+   */
+  identity: [
+    [0.08, 0.78, 1],
+    [0.58, 0.24, 1],
+    [1, 0.16, 0.58]
+  ],
   default: [
     [0.08, 0.78, 1],
     [0.58, 0.24, 1],
@@ -449,33 +56,27 @@ const H = {
     [1, 0.12, 0.46],
     [0.58, 0.18, 1]
   ]
-}, ue = {
-  default: 0.65,
-  blue: 0.3,
-  violet: 0.5,
-  emerald: 0.4,
-  sunset: 0.55
-}, w = {
+}, v = {
   idle: { speed: 0.15, amplitude: 0.04, glow: 0.15, brightness: 0.55, pulse: 0, saturation: 0.7 },
   connecting: { speed: 0.5, amplitude: 0.1, glow: 0.45, brightness: 0.75, pulse: 1, saturation: 0.9 },
   listening: { speed: 0.4, amplitude: 0.14, glow: 0.5, brightness: 0.85, pulse: 0, saturation: 1 },
   speaking: { speed: 1.4, amplitude: 0.35, glow: 0.9, brightness: 1, pulse: 0, saturation: 1 },
   muted: { speed: 0.06, amplitude: 0.015, glow: 0.08, brightness: 0.35, pulse: 0, saturation: 0.2 }
-}, U = {
-  idle: w.idle,
-  connecting: w.connecting,
-  listening: w.listening,
-  thinking: w.connecting,
-  speaking: w.speaking,
-  muted: w.muted,
-  asleep: { ...w.idle, brightness: 0.35, speed: 0.08 }
-}, de = `#version 300 es
+}, F = {
+  idle: v.idle,
+  connecting: v.connecting,
+  listening: v.listening,
+  thinking: v.connecting,
+  speaking: v.speaking,
+  muted: v.muted,
+  asleep: { ...v.idle, brightness: 0.35, speed: 0.08 }
+}, oe = `#version 300 es
 in vec2 a_position;
 out vec2 v_uv;
 void main() {
   v_uv = a_position * 0.5 + 0.5;
   gl_Position = vec4(a_position, 0.0, 1.0);
-}`, fe = `#version 300 es
+}`, ne = `#version 300 es
 precision highp float;
 
 in vec2 v_uv;
@@ -488,6 +89,9 @@ uniform float u_glow;
 uniform float u_brightness;
 uniform float u_pulse;
 uniform float u_saturation;
+uniform float u_seed;
+uniform float u_hue;
+uniform float u_radius;
 uniform vec3 u_color0;
 uniform vec3 u_color1;
 uniform vec3 u_color2;
@@ -499,6 +103,13 @@ vec4 mod289(vec4 x) { return x - floor(x / 289.0) * 289.0; }
 vec4 permute(vec4 x) { return mod289((x * 34.0 + 1.0) * x); }
 vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
 
+/** Rotate an RGB triple around the grey axis — used for per-identity hues. */
+vec3 hueRotate(vec3 c, float a) {
+  const vec3 k = vec3(0.57735026);
+  float ca = cos(a);
+  return c * ca + cross(k, c) * sin(a) + k * dot(k, c) * (1.0 - ca);
+}
+
 float snoise(vec3 v) {
   const vec2 C = vec2(1.0 / 6.0, 1.0 / 3.0);
   vec3 i = floor(v + dot(v, vec3(C.y)));
@@ -544,28 +155,33 @@ void main() {
   float dist = length(uv);
   float t = u_time * u_speed;
 
-  // Perfect circle — hard boundary, soft anti-aliased edge
-  float radius = 0.44;
+  // Perfect circle — hard boundary, soft anti-aliased edge. u_radius is in
+  // uv units where the box edge midpoint is 1.0, so 0.44 is the legacy disc
+  // (transparent padding around it) and ~0.98 fills the box (fill mode).
+  float radius = u_radius;
   float circle = 1.0 - smoothstep(radius - 0.008, radius + 0.008, dist);
 
   if (circle < 0.001) {
-    // Outer glow only
-    float glowDist = dist - radius;
-    float glow = exp(-glowDist * 12.0) * u_glow * 0.4;
-    vec3 glowColor = mix(u_color0, u_color1, 0.5);
-    fragColor = vec4(glowColor * glow, glow);
+    // No halo behind the orb — everything outside the circle is fully
+    // transparent, so the orb reads as a clean disc with nothing cast behind it.
+    fragColor = vec4(0.0);
     return;
   }
 
-  float n1 = snoise(vec3(uv * 2.0, t * 0.6)) * 0.5 + 0.5;
-  float n2 = snoise(vec3(uv * 3.5 + 7.0, t * 0.9)) * 0.5 + 0.5;
-  float n3 = snoise(vec3(uv * 1.5 - 3.0, t * 0.4 + 10.0)) * 0.5 + 0.5;
+  // u_seed offsets only the noise sample coordinates, so an identity changes
+  // the internal pattern while the circle, glow and speculars stay identical.
+  float sx = u_seed * 13.7;
+  float sz = u_seed * 5.3;
+
+  float n1 = snoise(vec3(uv * 2.0 + sx, t * 0.6 + sz)) * 0.5 + 0.5;
+  float n2 = snoise(vec3(uv * 3.5 + 7.0 + sx, t * 0.9 + sz)) * 0.5 + 0.5;
+  float n3 = snoise(vec3(uv * 1.5 - 3.0 + sx, t * 0.4 + 10.0 + sz)) * 0.5 + 0.5;
 
   vec2 distort = vec2(
-    snoise(vec3(uv * 2.0 + 5.0, t * 0.7)),
-    snoise(vec3(uv * 2.0 + 15.0, t * 0.7))
+    snoise(vec3(uv * 2.0 + 5.0 + sx, t * 0.7 + sz)),
+    snoise(vec3(uv * 2.0 + 15.0 + sx, t * 0.7 + sz))
   ) * u_amplitude * 2.0;
-  float n4 = snoise(vec3((uv + distort) * 3.0, t * 0.5)) * 0.5 + 0.5;
+  float n4 = snoise(vec3((uv + distort) * 3.0 + sx, t * 0.5 + sz)) * 0.5 + 0.5;
 
   vec3 col = mix(u_color0, u_color1, n1);
   col = mix(col, u_color2, n2 * 0.5);
@@ -592,6 +208,8 @@ void main() {
 
   float pulseFactor = 1.0 + u_pulse * sin(u_time * 3.5) * 0.35;
 
+  col = hueRotate(col, u_hue);
+
   float lum = dot(col, vec3(0.299, 0.587, 0.114));
   col = mix(vec3(lum), col, u_saturation);
 
@@ -599,170 +217,164 @@ void main() {
 
   fragColor = vec4(col, circle);
 }`;
-function W(r, o, t) {
-  const i = r.createShader(o);
-  return i ? (r.shaderSource(i, t), r.compileShader(i), r.getShaderParameter(i, r.COMPILE_STATUS) ? i : (r.deleteShader(i), null)) : null;
+function q(t, e, n) {
+  const u = t.createShader(e);
+  return u ? (t.shaderSource(u, n), t.compileShader(u), t.getShaderParameter(u, t.COMPILE_STATUS) ? u : (t.deleteShader(u), null)) : null;
 }
-function pe(r) {
-  const o = r.getContext("webgl2", {
+function re(t) {
+  const e = t.getContext("webgl2", {
     alpha: !0,
     premultipliedAlpha: !1,
     antialias: !0
   });
-  if (!o) return null;
-  const t = W(o, o.VERTEX_SHADER, de), i = W(o, o.FRAGMENT_SHADER, fe);
-  if (!t || !i) return null;
-  const n = o.createProgram();
-  if (o.attachShader(n, t), o.attachShader(n, i), o.linkProgram(n), !o.getProgramParameter(n, o.LINK_STATUS)) return null;
-  o.useProgram(n);
-  const p = o.createBuffer();
-  o.bindBuffer(o.ARRAY_BUFFER, p), o.bufferData(
-    o.ARRAY_BUFFER,
+  if (!e) return null;
+  const n = q(e, e.VERTEX_SHADER, oe), u = q(e, e.FRAGMENT_SHADER, ne);
+  if (!n || !u) return null;
+  const o = e.createProgram();
+  if (e.attachShader(o, n), e.attachShader(o, u), e.linkProgram(o), !e.getProgramParameter(o, e.LINK_STATUS)) return null;
+  e.useProgram(o);
+  const l = e.createBuffer();
+  e.bindBuffer(e.ARRAY_BUFFER, l), e.bufferData(
+    e.ARRAY_BUFFER,
     new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
-    o.STATIC_DRAW
+    e.STATIC_DRAW
   );
-  const d = o.getAttribLocation(n, "a_position");
-  o.enableVertexAttribArray(d), o.vertexAttribPointer(d, 2, o.FLOAT, !1, 0, 0), o.enable(o.BLEND), o.blendFunc(o.SRC_ALPHA, o.ONE_MINUS_SRC_ALPHA);
-  const m = {
-    u_time: o.getUniformLocation(n, "u_time"),
-    u_speed: o.getUniformLocation(n, "u_speed"),
-    u_amplitude: o.getUniformLocation(n, "u_amplitude"),
-    u_glow: o.getUniformLocation(n, "u_glow"),
-    u_brightness: o.getUniformLocation(n, "u_brightness"),
-    u_pulse: o.getUniformLocation(n, "u_pulse"),
-    u_saturation: o.getUniformLocation(n, "u_saturation"),
-    u_color0: o.getUniformLocation(n, "u_color0"),
-    u_color1: o.getUniformLocation(n, "u_color1"),
-    u_color2: o.getUniformLocation(n, "u_color2"),
-    u_dpr: o.getUniformLocation(n, "u_dpr")
+  const f = e.getAttribLocation(o, "a_position");
+  e.enableVertexAttribArray(f), e.vertexAttribPointer(f, 2, e.FLOAT, !1, 0, 0), e.enable(e.BLEND), e.blendFunc(e.SRC_ALPHA, e.ONE_MINUS_SRC_ALPHA);
+  const d = {
+    u_time: e.getUniformLocation(o, "u_time"),
+    u_speed: e.getUniformLocation(o, "u_speed"),
+    u_amplitude: e.getUniformLocation(o, "u_amplitude"),
+    u_glow: e.getUniformLocation(o, "u_glow"),
+    u_brightness: e.getUniformLocation(o, "u_brightness"),
+    u_pulse: e.getUniformLocation(o, "u_pulse"),
+    u_saturation: e.getUniformLocation(o, "u_saturation"),
+    u_seed: e.getUniformLocation(o, "u_seed"),
+    u_hue: e.getUniformLocation(o, "u_hue"),
+    u_radius: e.getUniformLocation(o, "u_radius"),
+    u_color0: e.getUniformLocation(o, "u_color0"),
+    u_color1: e.getUniformLocation(o, "u_color1"),
+    u_color2: e.getUniformLocation(o, "u_color2"),
+    u_dpr: e.getUniformLocation(o, "u_dpr")
   };
-  return { gl: o, uniforms: m };
+  return { gl: e, uniforms: d };
+}
+function ie(t) {
+  if (t === void 0) return 0;
+  if (typeof t == "number") return t;
+  let e = 0;
+  for (let n = 0; n < t.length; n += 1)
+    e = (e << 5) - e + t.charCodeAt(n) | 0;
+  return Math.abs(e) % 1e3 / 1e3;
 }
-function E(r, o, t) {
-  return r + (o - r) * t;
+function b(t, e, n) {
+  return t + (e - t) * n;
 }
-const me = s.memo(function({
-  state: o,
-  palette: t,
-  volume: i,
-  reduced: n
+const ce = i.memo(function({
+  state: e,
+  palette: n,
+  volume: u,
+  reduced: o,
+  seed: l,
+  hue: f,
+  radius: d
 }) {
-  const p = s.useRef(0);
-  p.current = i;
-  const d = s.useRef(n);
-  d.current = n;
-  const m = s.useRef(null), g = s.useRef(null), a = s.useRef(0), h = s.useRef(performance.now()), v = s.useRef({ ...U.idle }), k = s.useRef({ ...U.idle });
-  s.useEffect(() => {
-    k.current = { ...U[o] };
-  }, [o]);
-  const x = H[t], _ = s.useRef(x);
-  _.current = x;
-  const [L, P] = s.useState(!1);
-  s.useEffect(() => {
-    const b = requestAnimationFrame(() => P(!0));
+  const w = i.useRef(0);
+  w.current = u;
+  const y = i.useRef(l);
+  y.current = l;
+  const A = i.useRef(f);
+  A.current = f;
+  const S = i.useRef(d);
+  S.current = d;
+  const C = i.useRef(o);
+  C.current = o;
+  const h = i.useRef(null), m = i.useRef(null), E = i.useRef(0), W = i.useRef(performance.now()), Y = i.useRef({ ...F.idle }), N = i.useRef({ ...F.idle });
+  i.useEffect(() => {
+    N.current = { ...F[e] };
+  }, [e]);
+  const O = te[n], B = i.useRef(O);
+  B.current = O;
+  const [I, M] = i.useState(!1);
+  i.useEffect(() => {
+    const g = requestAnimationFrame(() => M(!0));
     return () => {
-      cancelAnimationFrame(b), P(!1);
+      cancelAnimationFrame(g), M(!1);
     };
   }, []);
-  const D = s.useCallback(() => {
-    const b = g.current;
-    if (!b) return;
-    const { gl: l, uniforms: f } = b, A = m.current;
-    if (!A) return;
-    const u = v.current, S = k.current, R = 0.045;
-    u.speed = E(u.speed, S.speed, R), u.amplitude = E(u.amplitude, S.amplitude, R), u.glow = E(u.glow, S.glow, R), u.brightness = E(u.brightness, S.brightness, R), u.pulse = E(u.pulse, S.pulse, R), u.saturation = E(u.saturation, S.saturation, R);
-    const Y = (performance.now() - h.current) / 1e3, z = window.devicePixelRatio || 1, M = A.getBoundingClientRect(), O = Math.round(M.width * z), I = Math.round(M.height * z);
-    (A.width !== O || A.height !== I) && (A.width = O, A.height = I), l.viewport(0, 0, O, I), l.clearColor(0, 0, 0, 0), l.clear(l.COLOR_BUFFER_BIT);
-    const $ = d.current ? 0 : 1, N = p.current * $, V = _.current;
-    l.uniform1f(f.u_time, Y), l.uniform1f(f.u_speed, (u.speed + N * 0.4) * $), l.uniform1f(f.u_amplitude, (u.amplitude + N * 0.12) * $), l.uniform1f(f.u_glow, u.glow + N * 0.2), l.uniform1f(f.u_brightness, u.brightness), l.uniform1f(f.u_pulse, u.pulse * $), l.uniform1f(f.u_saturation, u.saturation), l.uniform3fv(f.u_color0, V[0]), l.uniform3fv(f.u_color1, V[1]), l.uniform3fv(f.u_color2, V[2]), l.uniform1f(f.u_dpr, z), l.drawArrays(l.TRIANGLE_STRIP, 0, 4), a.current = requestAnimationFrame(D);
+  const L = i.useCallback(() => {
+    const g = m.current;
+    if (!g) return;
+    const { gl: r, uniforms: c } = g, p = h.current;
+    if (!p) return;
+    const s = Y.current, _ = N.current, x = 0.045;
+    s.speed = b(s.speed, _.speed, x), s.amplitude = b(s.amplitude, _.amplitude, x), s.glow = b(s.glow, _.glow, x), s.brightness = b(s.brightness, _.brightness, x), s.pulse = b(s.pulse, _.pulse, x), s.saturation = b(s.saturation, _.saturation, x);
+    const K = (performance.now() - W.current) / 1e3, T = window.devicePixelRatio || 1, j = p.getBoundingClientRect(), P = Math.round(j.width * T), k = Math.round(j.height * T);
+    (p.width !== P || p.height !== k) && (p.width = P, p.height = k), r.viewport(0, 0, P, k), r.clearColor(0, 0, 0, 0), r.clear(r.COLOR_BUFFER_BIT);
+    const z = C.current ? 0 : 1, V = w.current * z, D = B.current;
+    r.uniform1f(c.u_time, K), r.uniform1f(c.u_speed, (s.speed + V * 0.4) * z), r.uniform1f(c.u_amplitude, (s.amplitude + V * 0.12) * z), r.uniform1f(c.u_glow, s.glow + V * 0.2), r.uniform1f(c.u_brightness, s.brightness), r.uniform1f(c.u_pulse, s.pulse * z), r.uniform1f(c.u_saturation, s.saturation), r.uniform1f(c.u_seed, y.current), r.uniform1f(c.u_hue, A.current), r.uniform1f(c.u_radius, S.current), r.uniform3fv(c.u_color0, D[0]), r.uniform3fv(c.u_color1, D[1]), r.uniform3fv(c.u_color2, D[2]), r.uniform1f(c.u_dpr, T), r.drawArrays(r.TRIANGLE_STRIP, 0, 4), E.current = requestAnimationFrame(L);
   }, []);
-  return s.useEffect(() => {
-    if (!L) return;
-    const b = m.current;
-    if (b && (g.current = pe(b), !!g.current))
-      return a.current = requestAnimationFrame(D), () => {
-        cancelAnimationFrame(a.current);
-        const l = g.current;
-        if (l) {
-          const f = l.gl.getExtension("WEBGL_lose_context");
-          f == null || f.loseContext();
+  return i.useEffect(() => {
+    if (!I) return;
+    const g = h.current;
+    if (g && (m.current = re(g), !!m.current))
+      return E.current = requestAnimationFrame(L), () => {
+        cancelAnimationFrame(E.current);
+        const r = m.current;
+        if (r) {
+          const c = r.gl.getExtension("WEBGL_lose_context");
+          c == null || c.loseContext();
         }
-        g.current = null;
+        m.current = null;
       };
-  }, [L, D]), /* @__PURE__ */ e("canvas", { ref: m, className: "size-full", "data-state": o });
-}), ge = s.forwardRef(
+  }, [I, L]), /* @__PURE__ */ a("canvas", { ref: h, className: "size-full", "data-state": e });
+}), se = i.forwardRef(
   ({
-    state: r = "idle",
-    variant: o = "orb",
-    className: t,
-    volume: i = 0,
-    palette: n = "default",
-    onReady: p,
-    "aria-label": d,
-    ...m
-  }, g) => {
-    const a = re.includes(o) ? o : "orb", h = K() ?? !1, v = Math.min(1, Math.max(0, i));
-    if (s.useEffect(() => {
-      p == null || p();
-    }, []), a === "orb" || a === "aura" || a === "wave") {
-      const x = H[n][0], _ = ue[n], L = a === "orb" ? /* @__PURE__ */ e(
-        me,
-        {
-          state: r,
-          palette: n,
-          volume: v,
-          reduced: h
-        }
-      ) : a === "aura" ? /* @__PURE__ */ e(
-        J,
-        {
-          state: r,
-          volume: v,
-          reduced: h,
-          color: x,
-          colorShift: _
-        }
-      ) : /* @__PURE__ */ e(
-        Q,
-        {
-          state: r,
-          volume: v,
-          reduced: h,
-          color: x,
-          colorShift: _
-        }
-      );
-      return /* @__PURE__ */ e(
-        "div",
-        {
-          ...m,
-          ref: g,
-          role: "img",
-          "aria-label": d ?? `AI voice, ${r}`,
-          "data-state": r,
-          "data-variant": a,
-          className: T(
-            "relative inline-flex size-16 shrink-0 items-center justify-center",
-            t
-          ),
-          children: L
-        }
-      );
-    }
-    return /* @__PURE__ */ e(
-      q,
+    state: t = "idle",
+    variant: e = "orb",
+    className: n,
+    volume: u = 0,
+    palette: o = "default",
+    seed: l,
+    fill: f = !1,
+    onReady: d,
+    "aria-label": w,
+    ...y
+  }, A) => {
+    const S = $() ?? !1, C = Math.min(1, Math.max(0, u)), h = i.useMemo(() => ie(l), [l]), m = o === "identity" ? h * Math.PI * 2 : 0;
+    return i.useEffect(() => {
+      d == null || d();
+    }, []), /* @__PURE__ */ a(
+      "div",
       {
-        ref: g,
-        state: r,
-        variant: a,
-        className: t,
-        ariaLabel: d
+        ...y,
+        ref: A,
+        role: "img",
+        "aria-label": w ?? `AI voice, ${t}`,
+        "data-state": t,
+        "data-variant": e,
+        className: R(
+          "relative inline-flex size-24 shrink-0 items-center justify-center",
+          n
+        ),
+        children: /* @__PURE__ */ a(
+          ce,
+          {
+            state: t,
+            palette: o,
+            volume: C,
+            reduced: S,
+            seed: h,
+            hue: m,
+            radius: f ? 0.98 : 0.44
+          }
+        )
       }
     );
   }
 );
-ge.displayName = "Voice";
-const he = {
+se.displayName = "Voice";
+const ae = {
   idle: "bg-muted-foreground",
   connecting: "bg-warning motion-safe:animate-pulse",
   listening: "bg-success",
@@ -771,105 +383,114 @@ const he = {
   muted: "bg-danger",
   asleep: "bg-muted-foreground opacity-50"
 };
-function ve({ state: r = "idle", className: o }) {
-  return /* @__PURE__ */ e(
+function ue({ state: t = "idle", className: e }) {
+  return /* @__PURE__ */ a(
     "span",
     {
       "aria-hidden": !0,
-      className: T(
+      className: R(
         "inline-block size-2.5 shrink-0 rounded-dot transition-[background-color,opacity] duration-(--duration-normal) ease-out motion-reduce:transition-none",
-        he[r],
-        o
+        ae[t],
+        e
       )
     }
   );
 }
-function xe({
-  onConnect: r,
-  disabled: o,
-  className: t
+function le({
+  onConnect: t,
+  disabled: e,
+  className: n
 }) {
-  return /* @__PURE__ */ e(
-    G,
+  return /* @__PURE__ */ a(
+    U,
     {
-      variant: "solid",
+      variant: "ghost",
       size: "sm",
-      disabled: o,
-      onClick: r,
-      startContent: /* @__PURE__ */ e(ee, {}),
-      className: t,
+      disabled: e,
+      onClick: t,
+      startContent: /* @__PURE__ */ a(J, {}),
+      className: R(
+        "bg-success-50 text-success-700 hover:bg-success-100 hover:text-success-700",
+        n
+      ),
       children: "Connect"
     }
   );
 }
-function ye({
-  isMuted: r = !1,
-  onMute: o,
-  onUnmute: t,
-  disabled: i,
-  className: n
+function fe({
+  isMuted: t = !1,
+  onMute: e,
+  onUnmute: n,
+  disabled: u,
+  className: o
 }) {
-  return /* @__PURE__ */ e(j, { content: r ? "Unmute" : "Mute", children: /* @__PURE__ */ e(
-    G,
+  return /* @__PURE__ */ a(H, { content: t ? "Unmute" : "Mute", children: /* @__PURE__ */ a(
+    U,
     {
       variant: "ghost",
       size: "icon-sm",
-      disabled: i,
-      "aria-label": r ? "Unmute" : "Mute",
-      onClick: () => r ? t == null ? void 0 : t() : o == null ? void 0 : o(),
-      className: n,
-      children: r ? /* @__PURE__ */ e(te, {}) : /* @__PURE__ */ e(ie, {})
+      disabled: u,
+      "aria-label": t ? "Unmute" : "Mute",
+      onClick: () => t ? n == null ? void 0 : n() : e == null ? void 0 : e(),
+      className: R(
+        t ? "bg-warning-50 text-warning-700 hover:bg-warning-100 hover:text-warning-700" : "bg-info-50 text-info-700 hover:bg-info-100 hover:text-info-700",
+        o
+      ),
+      children: t ? /* @__PURE__ */ a(Z, {}) : /* @__PURE__ */ a(ee, {})
     }
   ) });
 }
-function _e({
-  onDisconnect: r,
-  disabled: o,
-  className: t
+function de({
+  onDisconnect: t,
+  disabled: e,
+  className: n
 }) {
-  return /* @__PURE__ */ e(j, { content: "Disconnect", children: /* @__PURE__ */ e(
-    G,
+  return /* @__PURE__ */ a(H, { content: "Disconnect", children: /* @__PURE__ */ a(
+    U,
     {
       variant: "ghost",
       size: "icon-sm",
-      disabled: o,
+      disabled: e,
       "aria-label": "Disconnect",
-      onClick: r,
-      className: T("text-danger hover:text-danger", t),
-      children: /* @__PURE__ */ e(oe, {})
+      onClick: t,
+      className: R(
+        "bg-danger-50 text-danger-700 hover:bg-danger-100 hover:text-danger-700",
+        n
+      ),
+      children: /* @__PURE__ */ a(Q, {})
     }
   ) });
 }
-function be(r, o) {
-  return r === "ended" ? "idle" : r === "starting" ? "connecting" : o ? "muted" : "listening";
+function me(t, e) {
+  return t === "ended" ? "idle" : t === "starting" ? "connecting" : e ? "muted" : "listening";
 }
-function De({
-  status: r,
-  isMuted: o = !1,
-  onConnect: t,
-  onMute: i,
-  onUnmute: n,
-  onDisconnect: p,
-  className: d
+function ye({
+  status: t,
+  isMuted: e = !1,
+  onConnect: n,
+  onMute: u,
+  onUnmute: o,
+  onDisconnect: l,
+  className: f
 }) {
-  return /* @__PURE__ */ c("div", { className: T("flex items-center gap-2", d), children: [
-    /* @__PURE__ */ e(ve, { state: be(r, o) }),
-    r === "ended" && /* @__PURE__ */ e(xe, { onConnect: t }),
-    r === "starting" && /* @__PURE__ */ e("span", { className: "text-base text-secondary", children: "Connecting…" }),
-    r === "running" && /* @__PURE__ */ c(y, { children: [
-      /* @__PURE__ */ e(ye, { isMuted: o, onMute: i, onUnmute: n }),
-      /* @__PURE__ */ e(_e, { onDisconnect: p })
+  return /* @__PURE__ */ G("div", { className: R("flex items-center gap-2", f), children: [
+    /* @__PURE__ */ a(ue, { state: me(t, e) }),
+    t === "ended" && /* @__PURE__ */ a(le, { onConnect: n }),
+    t === "starting" && /* @__PURE__ */ a("span", { className: "text-base text-secondary", children: "Connecting…" }),
+    t === "running" && /* @__PURE__ */ G(X, { children: [
+      /* @__PURE__ */ a(fe, { isMuted: e, onMute: u, onUnmute: o }),
+      /* @__PURE__ */ a(de, { onDisconnect: l })
     ] })
   ] });
 }
 export {
-  Te as VOICE_PALETTES,
-  $e as VOICE_STATES,
-  re as VOICE_VARIANTS,
-  ge as Voice,
-  xe as VoiceConnectButton,
-  De as VoiceControl,
-  _e as VoiceDisconnectButton,
-  ye as VoiceMuteButton,
-  ve as VoiceStatusDot
+  be as VOICE_PALETTES,
+  we as VOICE_STATES,
+  Re as VOICE_VARIANTS,
+  se as Voice,
+  le as VoiceConnectButton,
+  ye as VoiceControl,
+  de as VoiceDisconnectButton,
+  fe as VoiceMuteButton,
+  ue as VoiceStatusDot
 };