react-ai-avatar 0.1.2 → 0.2.0

package/dist/lib/index.js

@@ -1,114 +1,114 @@
 import { jsx as e, jsxs as o } from "react/jsx-runtime";
-import le, { useRef as O, useEffect as ee, useId as xe, useState as ae, Suspense as he } from "react";
-import { u as se, c as de, a as Me } from "./useReducedMotion-BDcEizfP.js";
-import { S as et, i as tt } from "./useReducedMotion-BDcEizfP.js";
-import { motion as ce, useMotionValue as pe } from "motion/react";
-const Ae = {
+import ae, { useRef as Z, useEffect as X, useId as me, useState as ce, Suspense as he } from "react";
+import { u as oe, c as de, a as Ae } from "./useReducedMotion-BDcEizfP.js";
+import { S as rt, i as lt } from "./useReducedMotion-BDcEizfP.js";
+import { motion as ne, AnimatePresence as Ne, useMotionValue as ue } from "motion/react";
+const Le = {
   idle: "#4b5563",
   listening: "#3b82f6",
   thinking: "#8b5cf6",
   speaking: "#10b981",
   working: "#f59e0b"
 };
-function Ne(i, r) {
-  const l = se(), c = O(r);
+function Se(t, r) {
+  const l = oe(), c = Z(r);
   c.current = r;
-  const a = O({ x: 0, y: 0 });
-  ee(() => {
+  const a = Z({ x: 0, y: 0 });
+  X(() => {
     if (l) return;
-    const t = (d) => {
-      a.current.x = Math.max(-1, Math.min(1, d.clientX / window.innerWidth * 2 - 1)), a.current.y = Math.max(-1, Math.min(1, d.clientY / window.innerHeight * 2 - 1));
+    const i = (s) => {
+      a.current.x = Math.max(-1, Math.min(1, s.clientX / window.innerWidth * 2 - 1)), a.current.y = Math.max(-1, Math.min(1, s.clientY / window.innerHeight * 2 - 1));
     };
-    return window.addEventListener("mousemove", t), () => window.removeEventListener("mousemove", t);
-  }, [l]), ee(() => {
-    const t = i.current;
-    if (t === null || typeof window > "u") return;
-    const d = (A, P) => P > 0 ? Math.round(A / P) * P : A;
-    let s = null, h = null, p = null, g = [], n = [], _ = [], W = !1, B = 3, V = 9, w = 0, m = 1, F = [], f = [], k = [];
-    const M = () => {
-      var R;
-      s = t.querySelector("#rra-ring"), h = t.querySelector("#rra-mouth"), p = t.querySelector("#rra-think"), g = p ? Array.from(p.querySelectorAll("circle, rect")) : [], n = Array.from(t.querySelectorAll(".rra-pupil")), _ = Array.from(t.querySelectorAll(".rra-lid")), W = (h == null ? void 0 : h.tagName.toLowerCase()) === "rect", B = h ? parseFloat(h.getAttribute(W ? "height" : "ry") ?? "3") : 3, V = h ? parseFloat(h.getAttribute(W ? "width" : "rx") ?? "9") : 9, w = h ? parseFloat(h.getAttribute("data-quantize") ?? "0") : 0, F = n.map((S) => {
-        const D = S.tagName.toLowerCase() === "rect";
+    return window.addEventListener("mousemove", i), () => window.removeEventListener("mousemove", i);
+  }, [l]), X(() => {
+    const i = t.current;
+    if (i === null || typeof window > "u") return;
+    const s = (E, $) => $ > 0 ? Math.round(E / $) * $ : E;
+    let d = null, f = null, u = null, p = [], n = [], B = [], F = !1, _ = 3, U = 9, M = 0, x = 1, I = [], h = [], v = [];
+    const N = () => {
+      var C;
+      d = i.querySelector("#rra-ring"), f = i.querySelector("#rra-mouth"), u = i.querySelector("#rra-think"), p = u ? Array.from(u.querySelectorAll("circle, rect")) : [], n = Array.from(i.querySelectorAll(".rra-pupil")), B = Array.from(i.querySelectorAll(".rra-lid")), F = (f == null ? void 0 : f.tagName.toLowerCase()) === "rect", _ = f ? parseFloat(f.getAttribute(F ? "height" : "ry") ?? "3") : 3, U = f ? parseFloat(f.getAttribute(F ? "width" : "rx") ?? "9") : 9, M = f ? parseFloat(f.getAttribute("data-quantize") ?? "0") : 0, I = n.map((w) => {
+        const O = w.tagName.toLowerCase() === "rect";
         return {
-          isRect: D,
-          x: parseFloat(S.getAttribute("data-base-x") ?? S.getAttribute(D ? "x" : "cx") ?? "0"),
-          y: parseFloat(S.getAttribute("data-base-y") ?? S.getAttribute(D ? "y" : "cy") ?? "0"),
-          quantize: parseFloat(S.getAttribute("data-quantize") ?? "0")
+          isRect: O,
+          x: parseFloat(w.getAttribute("data-base-x") ?? w.getAttribute(O ? "x" : "cx") ?? "0"),
+          y: parseFloat(w.getAttribute("data-base-y") ?? w.getAttribute(O ? "y" : "cy") ?? "0"),
+          quantize: parseFloat(w.getAttribute("data-quantize") ?? "0")
         };
-      }), f = _.map((S) => parseFloat(S.getAttribute("data-max-height") ?? "16")), k = n.map(() => ({ x: 0, y: 0 }));
-      const A = t.querySelector("svg"), P = parseFloat(((R = A == null ? void 0 : A.getAttribute("viewBox")) == null ? void 0 : R.split(/[\s,]+/)[2]) ?? "200");
-      m = P > 0 ? P / 200 : 1;
-    }, y = () => (h ? !h.isConnected : t.querySelector("#rra-mouth") !== null) || (s ? !s.isConnected : t.querySelector("#rra-ring") !== null);
-    M();
-    let L = null, J = null, v = !1, u = 0, Q = 1, z = 1, $ = 1500 + Math.random() * 2e3, C = 0, x = !1, q = 0, H = 0, U = 0, I = performance.now();
-    const K = (A) => {
-      const P = Math.min(100, A - I);
-      I = A, y() && M();
-      const R = c.current, { state: S } = R, D = { ...Ae, ...R.stateColors }, G = (R.maxMouthOpening ?? 30) * m, Y = l ? 0 : R.mouseTrackingIntensity ?? 1, X = R.blinkIntervalMin ?? 2e3, ie = R.blinkIntervalMax ?? 6e3, te = R.blinkDuration ?? 100;
-      if (s == null || s.setAttribute("stroke", D[S]), h) {
-        const N = S === "speaking";
-        N && (!v || J !== R.analyser) && (L = de(R.analyser), J = R.analyser, v = !0), N || (v = !1);
-        let b = 0, E = 1, T = 1;
-        if (N && L) {
-          const Z = L.read();
-          b = Z.level, Z.shape === "e" ? (E = 1.35, T = 0.55) : Z.shape === "o" && (E = 0.65, T = 1.35);
+      }), h = B.map((w) => parseFloat(w.getAttribute("data-max-height") ?? "16")), v = n.map(() => ({ x: 0, y: 0 }));
+      const E = i.querySelector("svg"), $ = parseFloat(((C = E == null ? void 0 : E.getAttribute("viewBox")) == null ? void 0 : C.split(/[\s,]+/)[2]) ?? "200");
+      x = $ > 0 ? $ / 200 : 1;
+    }, y = () => (f ? !f.isConnected : i.querySelector("#rra-mouth") !== null) || (d ? !d.isConnected : i.querySelector("#rra-ring") !== null);
+    N();
+    let L = null, J = null, te = !1, Q = 0, R = 1, g = 1, b = 1500 + Math.random() * 2e3, q = 0, k = !1, z = 0, ee = 0, Y = 0, P = performance.now();
+    const j = (E) => {
+      const $ = Math.min(100, E - P);
+      P = E, y() && N();
+      const C = c.current, { state: w } = C, O = { ...Le, ...C.stateColors }, H = (C.maxMouthOpening ?? 30) * x, G = l ? 0 : C.mouseTrackingIntensity ?? 1, ie = C.blinkIntervalMin ?? 2e3, V = C.blinkIntervalMax ?? 6e3, le = C.blinkDuration ?? 100;
+      if (d == null || d.setAttribute("stroke", O[w]), f) {
+        const S = w === "speaking";
+        S && (!te || J !== C.analyser) && (L = de(C.analyser), J = C.analyser, te = !0), S || (te = !1);
+        let m = 0, W = 1, A = 1;
+        if (S && L) {
+          const T = L.read();
+          m = T.level, T.shape === "e" ? (W = 1.35, A = 0.55) : T.shape === "o" && (W = 0.65, A = 1.35);
         }
-        if (u += (b - u) * 0.3, Q += (E - Q) * 0.25, z += (T - z) * 0.25, W) {
-          const Z = d(B + u * z * G * 0.4, w);
-          h.setAttribute("height", String(Math.max(B, Z)));
+        if (Q += (m - Q) * 0.3, R += (W - R) * 0.25, g += (A - g) * 0.25, F) {
+          const T = s(_ + Q * g * H * 0.4, M);
+          f.setAttribute("height", String(Math.max(_, T)));
         } else
-          h.setAttribute("ry", String(B + u * z * G * 0.4)), h.setAttribute("rx", String(V * (1 + (Q - 1) * Math.min(1, u * 2))));
+          f.setAttribute("ry", String(_ + Q * g * H * 0.4)), f.setAttribute("rx", String(U * (1 + (R - 1) * Math.min(1, Q * 2))));
       }
-      if (!l && _.length > 0) {
-        x ? (C += P / te, C >= 2 && (x = !1, C = 0, $ = X + Math.random() * Math.max(0, ie - X))) : ($ -= P, $ <= 0 && (x = !0, C = 0));
-        const N = x ? 1 - Math.abs(1 - Math.min(2, C)) : 0;
-        _.forEach((b, E) => b.setAttribute("height", String(N * f[E])));
+      if (!l && B.length > 0) {
+        k ? (q += $ / le, q >= 2 && (k = !1, q = 0, b = ie + Math.random() * Math.max(0, V - ie))) : (b -= $, b <= 0 && (k = !0, q = 0));
+        const S = k ? 1 - Math.abs(1 - Math.min(2, q)) : 0;
+        B.forEach((m, W) => m.setAttribute("height", String(S * h[W])));
       }
       if (n.length > 0) {
-        let N = a.current.x * 3 * Y, b = a.current.y * 2.2 * Y;
-        S === "thinking" ? (N = -2.5, b = -3) : S === "working" ? (N = 0, b = 3.5) : S === "listening" && !l && (N += Math.sin(A * 21e-4) * 0.5, b += Math.cos(A * 17e-4) * 0.4), N *= m, b *= m, n.forEach((E, T) => {
-          const Z = F[T];
-          k[T].x += (N - k[T].x) * 0.12, k[T].y += (b - k[T].y) * 0.12;
-          const re = Z.x + d(k[T].x, Z.quantize), ne = Z.y + d(k[T].y, Z.quantize);
-          Z.isRect ? (E.setAttribute("x", String(re)), E.setAttribute("y", String(ne))) : (E.setAttribute("cx", String(re)), E.setAttribute("cy", String(ne)));
+        let S = a.current.x * 3 * G, m = a.current.y * 2.2 * G;
+        w === "thinking" ? (S = -2.5, m = -3) : w === "working" ? (S = 0, m = 3.5) : w === "listening" && !l && (S += Math.sin(E * 21e-4) * 0.5, m += Math.cos(E * 17e-4) * 0.4), S *= x, m *= x, n.forEach((W, A) => {
+          const T = I[A];
+          v[A].x += (S - v[A].x) * 0.12, v[A].y += (m - v[A].y) * 0.12;
+          const K = T.x + s(v[A].x, T.quantize), re = T.y + s(v[A].y, T.quantize);
+          T.isRect ? (W.setAttribute("x", String(K)), W.setAttribute("y", String(re))) : (W.setAttribute("cx", String(K)), W.setAttribute("cy", String(re)));
         });
       }
-      p && (q += ((S === "thinking" ? 1 : 0) - q) * 0.12, p.setAttribute("opacity", String(q < 0.01 ? 0 : q)), S === "thinking" && !l ? (H += P * 4e-3, g.forEach((b, E) => {
-        const T = 0.35 + 0.65 * Math.max(0, Math.sin(H - E * 0.9));
-        b.setAttribute("opacity", String(T));
-      })) : g.forEach((b) => b.setAttribute("opacity", "1"))), U = requestAnimationFrame(K);
+      u && (z += ((w === "thinking" ? 1 : 0) - z) * 0.12, u.setAttribute("opacity", String(z < 0.01 ? 0 : z)), w === "thinking" && !l ? (ee += $ * 4e-3, p.forEach((m, W) => {
+        const A = 0.35 + 0.65 * Math.max(0, Math.sin(ee - W * 0.9));
+        m.setAttribute("opacity", String(A));
+      })) : p.forEach((m) => m.setAttribute("opacity", "1"))), Y = requestAnimationFrame(j);
     };
-    return U = requestAnimationFrame(K), () => cancelAnimationFrame(U);
-  }, [i, l]);
+    return Y = requestAnimationFrame(j), () => cancelAnimationFrame(Y);
+  }, [t, l]);
 }
-function ue({
-  state: i,
+function pe({
+  state: t,
   analyser: r,
   size: l = 300,
   className: c = "",
   style: a,
-  maxMouthOpening: t,
-  mouseTrackingIntensity: d,
-  blinkIntervalMin: s,
-  blinkIntervalMax: h,
-  blinkDuration: p,
-  stateColors: g,
+  maxMouthOpening: i,
+  mouseTrackingIntensity: s,
+  blinkIntervalMin: d,
+  blinkIntervalMax: f,
+  blinkDuration: u,
+  stateColors: p,
   children: n
 }) {
-  const _ = O(null);
-  return Ne(_, {
-    state: i,
+  const B = Z(null);
+  return Se(B, {
+    state: t,
     analyser: r,
-    stateColors: g,
-    maxMouthOpening: t,
-    mouseTrackingIntensity: d,
-    blinkIntervalMin: s,
-    blinkIntervalMax: h,
-    blinkDuration: p
+    stateColors: p,
+    maxMouthOpening: i,
+    mouseTrackingIntensity: s,
+    blinkIntervalMin: d,
+    blinkIntervalMax: f,
+    blinkDuration: u
   }), /* @__PURE__ */ e(
     "div",
     {
-      ref: _,
+      ref: B,
       className: `relative flex items-center justify-center ${c}`,
       style: { width: l, height: l, ...a },
       children: n
@@ -116,59 +116,59 @@ function ue({
   );
 }
 function ge({
-  size: i = 300,
+  size: t = 300,
   customization: r,
   mouthColor: l = "#7a3b2e",
   className: c,
   style: a
 }) {
   const {
-    skinColor: t = "#f5c7a9",
-    hairColor: d = "#2c2c2c",
-    clothingColor: s = "#3b7b9b",
-    hoodieColor: h = "#3a3e45",
-    bgColor: p = "#88c0b7",
-    glasses: g = !0,
+    skinColor: i = "#f5c7a9",
+    hairColor: s = "#2c2c2c",
+    clothingColor: d = "#3b7b9b",
+    hoodieColor: f = "#3a3e45",
+    bgColor: u = "#88c0b7",
+    glasses: p = !0,
     glassesColor: n = "#2c2c2c",
-    headphones: _ = !0,
-    headphonesColor: W = "#3a3b40"
+    headphones: B = !0,
+    headphonesColor: F = "#3a3b40"
   } = r ?? {};
   return /* @__PURE__ */ o(
     "svg",
     {
       viewBox: "0 0 200 200",
-      width: i,
-      height: i,
+      width: t,
+      height: t,
       xmlns: "http://www.w3.org/2000/svg",
       role: "img",
       "aria-label": "Avatar",
       className: c,
       style: a,
       children: [
-        /* @__PURE__ */ e("circle", { cx: "100", cy: "100", r: "78", fill: p }),
+        /* @__PURE__ */ e("circle", { cx: "100", cy: "100", r: "78", fill: u }),
         /* @__PURE__ */ e("clipPath", { id: "rra-clip", children: /* @__PURE__ */ e("circle", { cx: "100", cy: "100", r: "78" }) }),
         /* @__PURE__ */ o("g", { clipPath: "url(#rra-clip)", children: [
-          /* @__PURE__ */ e("rect", { id: "rra-clothing", x: "48", y: "150", width: "104", height: "60", rx: "20", fill: s }),
-          /* @__PURE__ */ e("path", { id: "rra-hoodie", d: "M52 168 Q52 140 100 140 Q148 140 148 168 L148 210 L52 210 Z", fill: h }),
-          /* @__PURE__ */ e("rect", { id: "rra-neck", x: "88", y: "120", width: "24", height: "28", rx: "10", fill: t, opacity: "0.85" }),
-          /* @__PURE__ */ e("ellipse", { id: "rra-head", cx: "100", cy: "92", rx: "42", ry: "46", fill: t }),
-          /* @__PURE__ */ e("path", { id: "rra-hair", d: "M58 88 Q56 44 100 44 Q144 44 142 88 Q142 70 128 62 Q120 76 100 74 Q80 76 72 62 Q58 70 58 88 Z", fill: d }),
-          _ && /* @__PURE__ */ o("g", { id: "rra-headphones", children: [
-            /* @__PURE__ */ e("rect", { x: "50", y: "84", width: "12", height: "26", rx: "6", fill: W }),
-            /* @__PURE__ */ e("rect", { x: "138", y: "84", width: "12", height: "26", rx: "6", fill: W }),
-            /* @__PURE__ */ e("path", { d: "M56 90 Q56 50 100 50 Q144 50 144 90", fill: "none", stroke: W, strokeWidth: "7", strokeLinecap: "round" })
+          /* @__PURE__ */ e("rect", { id: "rra-clothing", x: "48", y: "150", width: "104", height: "60", rx: "20", fill: d }),
+          /* @__PURE__ */ e("path", { id: "rra-hoodie", d: "M52 168 Q52 140 100 140 Q148 140 148 168 L148 210 L52 210 Z", fill: f }),
+          /* @__PURE__ */ e("rect", { id: "rra-neck", x: "88", y: "120", width: "24", height: "28", rx: "10", fill: i, opacity: "0.85" }),
+          /* @__PURE__ */ e("ellipse", { id: "rra-head", cx: "100", cy: "92", rx: "42", ry: "46", fill: i }),
+          /* @__PURE__ */ e("path", { id: "rra-hair", d: "M58 88 Q56 44 100 44 Q144 44 142 88 Q142 70 128 62 Q120 76 100 74 Q80 76 72 62 Q58 70 58 88 Z", fill: s }),
+          B && /* @__PURE__ */ o("g", { id: "rra-headphones", children: [
+            /* @__PURE__ */ e("rect", { x: "50", y: "84", width: "12", height: "26", rx: "6", fill: F }),
+            /* @__PURE__ */ e("rect", { x: "138", y: "84", width: "12", height: "26", rx: "6", fill: F }),
+            /* @__PURE__ */ e("path", { d: "M56 90 Q56 50 100 50 Q144 50 144 90", fill: "none", stroke: F, strokeWidth: "7", strokeLinecap: "round" })
           ] }),
           /* @__PURE__ */ o("g", { id: "rra-eyeL", children: [
             /* @__PURE__ */ e("ellipse", { cx: "84", cy: "90", rx: "9", ry: "7", fill: "#ffffff" }),
             /* @__PURE__ */ e("circle", { className: "rra-pupil", "data-base-x": "84", "data-base-y": "90", cx: "84", cy: "90", r: "4", fill: "#2c2c2c" }),
-            /* @__PURE__ */ e("rect", { className: "rra-lid", "data-max-height": "17", x: "74", y: "80", width: "20", height: "0", fill: t })
+            /* @__PURE__ */ e("rect", { className: "rra-lid", "data-max-height": "17", x: "74", y: "80", width: "20", height: "0", fill: i })
           ] }),
           /* @__PURE__ */ o("g", { id: "rra-eyeR", children: [
             /* @__PURE__ */ e("ellipse", { cx: "116", cy: "90", rx: "9", ry: "7", fill: "#ffffff" }),
             /* @__PURE__ */ e("circle", { className: "rra-pupil", "data-base-x": "116", "data-base-y": "90", cx: "116", cy: "90", r: "4", fill: "#2c2c2c" }),
-            /* @__PURE__ */ e("rect", { className: "rra-lid", "data-max-height": "17", x: "106", y: "80", width: "20", height: "0", fill: t })
+            /* @__PURE__ */ e("rect", { className: "rra-lid", "data-max-height": "17", x: "106", y: "80", width: "20", height: "0", fill: i })
           ] }),
-          g && /* @__PURE__ */ o("g", { id: "rra-glasses", children: [
+          p && /* @__PURE__ */ o("g", { id: "rra-glasses", children: [
             /* @__PURE__ */ e("rect", { x: "72", y: "82", width: "24", height: "16", rx: "6", fill: "none", stroke: n, strokeWidth: "2.5" }),
             /* @__PURE__ */ e("rect", { x: "104", y: "82", width: "24", height: "16", rx: "6", fill: "none", stroke: n, strokeWidth: "2.5" }),
             /* @__PURE__ */ e("line", { x1: "96", y1: "90", x2: "104", y2: "90", stroke: n, strokeWidth: "2.5" })
@@ -184,23 +184,23 @@ function ge({
     }
   );
 }
-function Le({
-  size: i = 300,
+function Qe({
+  size: t = 300,
   customization: r,
   className: l,
   style: c
 }) {
   const {
     skinColor: a = "#f6c8a8",
-    hairColor: t = "#5b3a23",
-    bgColor: d = "#dbe7f4"
-  } = r ?? {}, s = xe().replace(/[^a-zA-Z0-9]/g, ""), h = `rra-skin-${s}`, p = `rra-bg-${s}`, g = `rra-hair-${s}`, n = `rra-mouthg-${s}`;
+    hairColor: i = "#5b3a23",
+    bgColor: s = "#dbe7f4"
+  } = r ?? {}, d = me().replace(/[^a-zA-Z0-9]/g, ""), f = `rra-skin-${d}`, u = `rra-bg-${d}`, p = `rra-hair-${d}`, n = `rra-mouthg-${d}`;
   return /* @__PURE__ */ o(
     "svg",
     {
       viewBox: "0 0 200 200",
-      width: i,
-      height: i,
+      width: t,
+      height: t,
       xmlns: "http://www.w3.org/2000/svg",
       role: "img",
       "aria-label": "Avatar",
@@ -208,30 +208,30 @@ function Le({
       style: c,
       children: [
         /* @__PURE__ */ o("defs", { children: [
-          /* @__PURE__ */ o("radialGradient", { id: h, cx: "0.38", cy: "0.32", r: "0.85", children: [
+          /* @__PURE__ */ o("radialGradient", { id: f, cx: "0.38", cy: "0.32", r: "0.85", children: [
             /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "#ffffff", stopOpacity: "0.55" }),
             /* @__PURE__ */ e("stop", { offset: "35%", stopColor: a }),
             /* @__PURE__ */ e("stop", { offset: "100%", stopColor: a, stopOpacity: "1" })
           ] }),
-          /* @__PURE__ */ o("radialGradient", { id: p, cx: "0.5", cy: "0.35", r: "0.9", children: [
+          /* @__PURE__ */ o("radialGradient", { id: u, cx: "0.5", cy: "0.35", r: "0.9", children: [
             /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "#ffffff", stopOpacity: "0.9" }),
-            /* @__PURE__ */ e("stop", { offset: "100%", stopColor: d })
+            /* @__PURE__ */ e("stop", { offset: "100%", stopColor: s })
           ] }),
-          /* @__PURE__ */ o("linearGradient", { id: g, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-            /* @__PURE__ */ e("stop", { offset: "0%", stopColor: t, stopOpacity: "0.85" }),
-            /* @__PURE__ */ e("stop", { offset: "100%", stopColor: t })
+          /* @__PURE__ */ o("linearGradient", { id: p, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ e("stop", { offset: "0%", stopColor: i, stopOpacity: "0.85" }),
+            /* @__PURE__ */ e("stop", { offset: "100%", stopColor: i })
           ] }),
           /* @__PURE__ */ o("linearGradient", { id: n, x1: "0", y1: "0", x2: "0", y2: "1", children: [
             /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "#7c2f33" }),
             /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "#52181c" })
           ] })
         ] }),
-        /* @__PURE__ */ e("circle", { cx: "100", cy: "100", r: "78", fill: `url(#${p})` }),
-        /* @__PURE__ */ e("clipPath", { id: `rra-memoji-clip-${s}`, children: /* @__PURE__ */ e("circle", { cx: "100", cy: "100", r: "78" }) }),
-        /* @__PURE__ */ o("g", { clipPath: `url(#rra-memoji-clip-${s})`, children: [
+        /* @__PURE__ */ e("circle", { cx: "100", cy: "100", r: "78", fill: `url(#${u})` }),
+        /* @__PURE__ */ e("clipPath", { id: `rra-memoji-clip-${d}`, children: /* @__PURE__ */ e("circle", { cx: "100", cy: "100", r: "78" }) }),
+        /* @__PURE__ */ o("g", { clipPath: `url(#rra-memoji-clip-${d})`, children: [
           /* @__PURE__ */ e("rect", { x: "86", y: "128", width: "28", height: "30", rx: "12", fill: a }),
           /* @__PURE__ */ e("ellipse", { cx: "100", cy: "178", rx: "52", ry: "28", fill: "#ffffff", opacity: "0.85" }),
-          /* @__PURE__ */ e("ellipse", { id: "rra-head", cx: "100", cy: "94", rx: "44", ry: "48", fill: `url(#${h})` }),
+          /* @__PURE__ */ e("ellipse", { id: "rra-head", cx: "100", cy: "94", rx: "44", ry: "48", fill: `url(#${f})` }),
           /* @__PURE__ */ e("ellipse", { cx: "100", cy: "132", rx: "20", ry: "7", fill: "#000000", opacity: "0.06" }),
           /* @__PURE__ */ e("ellipse", { cx: "55", cy: "96", rx: "7", ry: "11", fill: a }),
           /* @__PURE__ */ e("ellipse", { cx: "145", cy: "96", rx: "7", ry: "11", fill: a }),
@@ -240,11 +240,11 @@ function Le({
             {
               id: "rra-hair",
               d: "M54 92 Q50 38 100 40 Q150 38 146 92 Q146 66 126 58 Q120 72 96 68 Q72 72 66 58 Q54 66 54 92 Z",
-              fill: `url(#${g})`
+              fill: `url(#${p})`
             }
           ),
-          /* @__PURE__ */ e("path", { d: "M70 76 Q82 70 92 75", fill: "none", stroke: t, strokeWidth: "4", strokeLinecap: "round", opacity: "0.9" }),
-          /* @__PURE__ */ e("path", { d: "M108 75 Q118 70 130 76", fill: "none", stroke: t, strokeWidth: "4", strokeLinecap: "round", opacity: "0.9" }),
+          /* @__PURE__ */ e("path", { d: "M70 76 Q82 70 92 75", fill: "none", stroke: i, strokeWidth: "4", strokeLinecap: "round", opacity: "0.9" }),
+          /* @__PURE__ */ e("path", { d: "M108 75 Q118 70 130 76", fill: "none", stroke: i, strokeWidth: "4", strokeLinecap: "round", opacity: "0.9" }),
           /* @__PURE__ */ o("g", { id: "rra-eyeL", children: [
             /* @__PURE__ */ e("ellipse", { cx: "81", cy: "92", rx: "10.5", ry: "8.5", fill: "#ffffff" }),
             /* @__PURE__ */ e("circle", { className: "rra-pupil", "data-base-x": "81", "data-base-y": "92", cx: "81", cy: "92", r: "5", fill: "#3d2c20" }),
@@ -271,24 +271,24 @@ function Le({
     }
   );
 }
-function Se({
-  size: i = 300,
+function We({
+  size: t = 300,
   customization: r,
   className: l,
   style: c
 }) {
   const {
     skinColor: a = "#f0b58a",
-    hairColor: t = "#3a2a1e",
-    clothingColor: d = "#2f6f8f",
-    bgColor: s = "#9ad1c8"
+    hairColor: i = "#3a2a1e",
+    clothingColor: s = "#2f6f8f",
+    bgColor: d = "#9ad1c8"
   } = r ?? {};
   return /* @__PURE__ */ o(
     "svg",
     {
       viewBox: "0 0 32 32",
-      width: i,
-      height: i,
+      width: t,
+      height: t,
       xmlns: "http://www.w3.org/2000/svg",
       role: "img",
       "aria-label": "Avatar",
@@ -296,17 +296,17 @@ function Se({
       style: { imageRendering: "pixelated", ...c },
       shapeRendering: "crispEdges",
       children: [
-        /* @__PURE__ */ e("rect", { x: "2", y: "2", width: "28", height: "28", fill: s }),
-        /* @__PURE__ */ e("rect", { id: "rra-clothing", x: "8", y: "26", width: "16", height: "4", fill: d }),
-        /* @__PURE__ */ e("rect", { x: "10", y: "25", width: "12", height: "1", fill: d }),
+        /* @__PURE__ */ e("rect", { x: "2", y: "2", width: "28", height: "28", fill: d }),
+        /* @__PURE__ */ e("rect", { id: "rra-clothing", x: "8", y: "26", width: "16", height: "4", fill: s }),
+        /* @__PURE__ */ e("rect", { x: "10", y: "25", width: "12", height: "1", fill: s }),
         /* @__PURE__ */ e("rect", { x: "14", y: "23", width: "4", height: "3", fill: a }),
         /* @__PURE__ */ e("rect", { id: "rra-head", x: "9", y: "7", width: "14", height: "16", fill: a }),
         /* @__PURE__ */ o("g", { id: "rra-hair", children: [
-          /* @__PURE__ */ e("rect", { x: "8", y: "4", width: "16", height: "4", fill: t }),
-          /* @__PURE__ */ e("rect", { x: "8", y: "8", width: "2", height: "5", fill: t }),
-          /* @__PURE__ */ e("rect", { x: "22", y: "8", width: "2", height: "5", fill: t }),
-          /* @__PURE__ */ e("rect", { x: "11", y: "8", width: "3", height: "1", fill: t }),
-          /* @__PURE__ */ e("rect", { x: "17", y: "8", width: "4", height: "1", fill: t })
+          /* @__PURE__ */ e("rect", { x: "8", y: "4", width: "16", height: "4", fill: i }),
+          /* @__PURE__ */ e("rect", { x: "8", y: "8", width: "2", height: "5", fill: i }),
+          /* @__PURE__ */ e("rect", { x: "22", y: "8", width: "2", height: "5", fill: i }),
+          /* @__PURE__ */ e("rect", { x: "11", y: "8", width: "3", height: "1", fill: i }),
+          /* @__PURE__ */ e("rect", { x: "17", y: "8", width: "4", height: "1", fill: i })
         ] }),
         /* @__PURE__ */ o("g", { id: "rra-eyeL", children: [
           /* @__PURE__ */ e("rect", { x: "11", y: "12", width: "3", height: "2", fill: "#ffffff" }),
@@ -329,32 +329,32 @@ function Se({
     }
   );
 }
-function Qe({
-  size: i = 300,
+function $e({
+  size: t = 300,
   customization: r,
   inkColor: l = "#2f2a26",
   className: c,
   style: a
 }) {
   const {
-    skinColor: t = "#fdf6ec",
+    skinColor: i = "#fdf6ec",
     // paper tone by default
-    hairColor: d = "#2f2a26",
-    bgColor: s = "#fffdf8"
+    hairColor: s = "#2f2a26",
+    bgColor: d = "#fffdf8"
   } = r ?? {};
   return /* @__PURE__ */ o(
     "svg",
     {
       viewBox: "0 0 200 200",
-      width: i,
-      height: i,
+      width: t,
+      height: t,
       xmlns: "http://www.w3.org/2000/svg",
       role: "img",
       "aria-label": "Avatar",
       className: c,
       style: a,
       children: [
-        /* @__PURE__ */ e("circle", { cx: "100", cy: "100", r: "79", fill: s }),
+        /* @__PURE__ */ e("circle", { cx: "100", cy: "100", r: "79", fill: d }),
         /* @__PURE__ */ e("clipPath", { id: "rra-doodle-clip", children: /* @__PURE__ */ e("circle", { cx: "100", cy: "100", r: "79" }) }),
         /* @__PURE__ */ o("g", { clipPath: "url(#rra-doodle-clip)", children: [
           /* @__PURE__ */ e("path", { d: "M52 182 Q60 148 100 146 Q140 148 148 182", fill: "#ffffff", stroke: l, strokeWidth: "3", strokeLinecap: "round" }),
@@ -369,13 +369,13 @@ function Qe({
              Q101 143 79 133
              Q56 121 58 88
              Q62 45 100 46 Z`,
-              fill: t,
+              fill: i,
               stroke: l,
               strokeWidth: "3.5",
               strokeLinecap: "round"
             }
           ),
-          /* @__PURE__ */ o("g", { id: "rra-hair", fill: "none", stroke: d, strokeWidth: "3", strokeLinecap: "round", children: [
+          /* @__PURE__ */ o("g", { id: "rra-hair", fill: "none", stroke: s, strokeWidth: "3", strokeLinecap: "round", children: [
             /* @__PURE__ */ e("path", { d: "M62 84 Q58 52 88 47 Q72 56 74 64 Q80 50 104 46 Q92 54 96 60 Q106 48 126 52 Q116 58 120 64 Q130 56 140 78 Q132 66 122 68" }),
             /* @__PURE__ */ e("path", { d: "M66 76 Q70 62 82 58", opacity: "0.7" }),
             /* @__PURE__ */ e("path", { d: "M118 56 Q130 62 134 76", opacity: "0.7" })
@@ -385,12 +385,12 @@ function Qe({
           /* @__PURE__ */ o("g", { id: "rra-eyeL", children: [
             /* @__PURE__ */ e("ellipse", { cx: "82", cy: "92", rx: "9", ry: "7.5", fill: "#ffffff", stroke: l, strokeWidth: "2.5" }),
             /* @__PURE__ */ e("circle", { className: "rra-pupil", "data-base-x": "82", "data-base-y": "92", cx: "82", cy: "92", r: "3.4", fill: l }),
-            /* @__PURE__ */ e("rect", { className: "rra-lid", "data-max-height": "17", x: "72", y: "83", width: "20", height: "0", fill: t })
+            /* @__PURE__ */ e("rect", { className: "rra-lid", "data-max-height": "17", x: "72", y: "83", width: "20", height: "0", fill: i })
           ] }),
           /* @__PURE__ */ o("g", { id: "rra-eyeR", children: [
             /* @__PURE__ */ e("ellipse", { cx: "118", cy: "92", rx: "9", ry: "7.5", fill: "#ffffff", stroke: l, strokeWidth: "2.5" }),
             /* @__PURE__ */ e("circle", { className: "rra-pupil", "data-base-x": "118", "data-base-y": "92", cx: "118", cy: "92", r: "3.4", fill: l }),
-            /* @__PURE__ */ e("rect", { className: "rra-lid", "data-max-height": "17", x: "108", y: "83", width: "20", height: "0", fill: t })
+            /* @__PURE__ */ e("rect", { className: "rra-lid", "data-max-height": "17", x: "108", y: "83", width: "20", height: "0", fill: i })
           ] }),
           /* @__PURE__ */ e("path", { d: "M99 100 Q96 110 103 112", fill: "none", stroke: l, strokeWidth: "2.5", strokeLinecap: "round" }),
           /* @__PURE__ */ e("ellipse", { id: "rra-mouth", cx: "100", cy: "122", rx: "9", ry: "2.5", fill: "#3a2e28", stroke: l, strokeWidth: "2" }),
@@ -405,10 +405,10 @@ function Qe({
     }
   );
 }
-function fe(i) {
-  return i.replace(/-([a-z])/g, (r, l) => l.toUpperCase());
+function fe(t) {
+  return t.replace(/-([a-z])/g, (r, l) => l.toUpperCase());
 }
-const We = [
+const Re = [
   ["pixel-art", "Pixel Art"],
   ["pixel-art-neutral", "Pixel Art Neutral"],
   ["lorelei", "Lorelei"],
@@ -417,24 +417,24 @@ const We = [
   ["notionists-neutral", "Notionists Neutral"],
   ["open-peeps", "Open Peeps"],
   ["thumbs", "Thumbs"]
-].map(([i, r]) => ({
-  id: i,
-  exportName: fe(i),
+].map(([t, r]) => ({
+  id: t,
+  exportName: fe(t),
   label: r,
   license: "CC0 1.0"
 }));
-function me(i, r) {
+function xe(t, r) {
   const l = /* @__PURE__ */ new Set(), c = /\bid="([^"]+)"/g;
   let a;
-  for (; a = c.exec(i); ) l.add(a[1]);
-  let t = i;
-  for (const d of l) {
-    const s = d.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-    t = t.replace(new RegExp(`id="${s}"`, "g"), `id="${r}-${d}"`).replace(new RegExp(`url\\(#${s}\\)`, "g"), `url(#${r}-${d})`).replace(new RegExp(`(xlink:href|href)="#${s}"`, "g"), `$1="#${r}-${d}"`);
+  for (; a = c.exec(t); ) l.add(a[1]);
+  let i = t;
+  for (const s of l) {
+    const d = s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    i = i.replace(new RegExp(`id="${d}"`, "g"), `id="${r}-${s}"`).replace(new RegExp(`url\\(#${d}\\)`, "g"), `url(#${r}-${s})`).replace(new RegExp(`(xlink:href|href)="#${d}"`, "g"), `$1="#${r}-${s}"`);
   }
-  return t;
+  return i;
 }
-const $e = {
+const Ee = {
   "pixel-art": { part: "mouth", visemes: ["happy01", "happy11", "happy12"] },
   "pixel-art-neutral": { part: "mouth", visemes: ["happy01", "happy11", "happy12"] },
   lorelei: { part: "mouth", visemes: ["happy01", "happy08", "happy06"] },
@@ -468,190 +468,190 @@ const $e = {
   { collection: "pixel-art", seed: "smmje3r6" },
   { collection: "pixel-art", seed: "wxhz14w1" },
   { collection: "pixel-art", seed: "uovelmrj" }
-], Re = ye[0].collection, Ee = ye[0].seed, Ge = Object.fromEntries(We.map((i) => [i.id, i]));
-let oe = null;
-function ke() {
-  return oe || (oe = Promise.all([
+], Te = ye[0].collection, Be = ye[0].seed, Ye = Object.fromEntries(Re.map((t) => [t.id, t]));
+let se = null;
+function be() {
+  return se || (se = Promise.all([
     import("@dicebear/core"),
     import("@dicebear/collection")
-  ]).then(([i, r]) => ({
-    createAvatar: i.createAvatar,
+  ]).then(([t, r]) => ({
+    createAvatar: t.createAvatar,
     collection: r
-  }))), oe;
+  }))), se;
 }
-async function Te(i, r, l = {}) {
-  const { createAvatar: c, collection: a } = await ke(), t = a[fe(String(i))];
-  if (!t) throw new Error(`Unknown DiceBear style "${i}"`);
-  return c(t, { seed: r, ...l }).toString();
+async function Fe(t, r, l = {}) {
+  const { createAvatar: c, collection: a } = await be(), i = a[fe(String(t))];
+  if (!i) throw new Error(`Unknown DiceBear style "${t}"`);
+  return c(i, { seed: r, ...l }).toString();
 }
-function Be(i, r, l, c, a) {
-  const t = [], d = (s, h) => t.push({
-    key: s,
-    html: me(i(r, { ...l, ...h }).toString(), `${a}-${s}`)
+function Ce(t, r, l, c, a) {
+  const i = [], s = (d, f) => i.push({
+    key: d,
+    html: xe(t(r, { ...l, ...f }).toString(), `${a}-${d}`)
   });
   if (c.part === "face")
-    c.visemes.forEach((s, h) => d(`m${h}`, { face: [s] })), c.faceBlink && d("blink", { face: [c.faceBlink] });
+    c.visemes.forEach((d, f) => s(`m${f}`, { face: [d] })), c.faceBlink && s("blink", { face: [c.faceBlink] });
   else {
-    const s = c.blink ? [
+    const d = c.blink ? [
       ["o", { eyes: [c.blink.open] }],
       ["c", { eyes: [c.blink.closed] }]
     ] : [["o", {}]];
-    c.visemes.forEach((h, p) => {
-      for (const [g, n] of s) d(`m${p}-${g}`, { [c.part]: [h], ...n });
+    c.visemes.forEach((f, u) => {
+      for (const [p, n] of d) s(`m${u}-${p}`, { [c.part]: [f], ...n });
     });
   }
-  return t;
+  return i;
 }
-function Fe({
-  state: i,
+function _e({
+  state: t,
   analyser: r,
   size: l = 300,
-  collection: c = Re,
-  seed: a = Ee,
-  backgroundColor: t,
-  radius: d,
-  className: s = "",
-  style: h,
-  maxMouthOpening: p = 30,
-  stateColors: g
+  collection: c = Te,
+  seed: a = Be,
+  backgroundColor: i,
+  radius: s,
+  className: d = "",
+  style: f,
+  maxMouthOpening: u = 30,
+  stateColors: p
 }) {
-  const n = se(), W = `rra-db-${xe().replace(/[^a-zA-Z0-9]/g, "")}`, B = O(null), V = O(/* @__PURE__ */ new Map()), w = O(null), [m, F] = ae(null), [f, k] = ae(null), [M, y] = ae(null), L = O({ state: i, analyser: r, maxMouthOpening: p });
-  L.current = { state: i, analyser: r, maxMouthOpening: p };
-  const J = (t == null ? void 0 : t.join(",")) ?? "";
-  ee(() => {
-    let u = !1;
-    return F(null), y(null), ke().then(({ createAvatar: Q, collection: z }) => {
-      if (u) return;
-      const $ = z[fe(String(c))];
-      if (!$) {
+  const n = oe(), F = `rra-db-${me().replace(/[^a-zA-Z0-9]/g, "")}`, _ = Z(null), U = Z(/* @__PURE__ */ new Map()), M = Z(null), [x, I] = ce(null), [h, v] = ce(null), [N, y] = ce(null), L = Z({ state: t, analyser: r, maxMouthOpening: u });
+  L.current = { state: t, analyser: r, maxMouthOpening: u };
+  const J = (i == null ? void 0 : i.join(",")) ?? "";
+  X(() => {
+    let Q = !1;
+    return I(null), y(null), be().then(({ createAvatar: R, collection: g }) => {
+      if (Q) return;
+      const b = g[fe(String(c))];
+      if (!b) {
         y(`Unknown DiceBear style "${c}"`);
         return;
       }
-      const C = { seed: a };
-      t && t.length && (C.backgroundColor = t), d != null && (C.radius = d);
-      const x = $e[String(c)] ?? null;
-      V.current = /* @__PURE__ */ new Map(), x ? (k(x), F(Be(Q, $, C, x, W))) : (k(null), F([{ key: "base", html: me(Q($, C).toString(), `${W}-base`) }]));
-    }).catch((Q) => {
-      if (u) return;
-      const z = (Q == null ? void 0 : Q.message) || String(Q);
-      y(/Cannot find module|Failed to (resolve|fetch)|dicebear/i.test(z) ? "missing" : z);
+      const q = { seed: a };
+      i && i.length && (q.backgroundColor = i), s != null && (q.radius = s);
+      const k = Ee[String(c)] ?? null;
+      U.current = /* @__PURE__ */ new Map(), k ? (v(k), I(Ce(R, b, q, k, F))) : (v(null), I([{ key: "base", html: xe(R(b, q).toString(), `${F}-base`) }]));
+    }).catch((R) => {
+      if (Q) return;
+      const g = (R == null ? void 0 : R.message) || String(R);
+      y(/Cannot find module|Failed to (resolve|fetch)|dicebear/i.test(g) ? "missing" : g);
     }), () => {
-      u = !0;
+      Q = !0;
     };
-  }, [c, a, d, J]), ee(() => {
-    const u = B.current;
-    if (!u || !m || m.length === 0 || typeof window > "u") return;
-    const Q = V.current, z = !!(f && (f.blink || f.faceBlink));
-    let $ = null, C = null, x = 0, q = 0, H = 1500 + Math.random() * 2500, U = 0, I = !1, K = 0, A = "", P = performance.now();
-    const R = (D) => {
-      if (D === A) return;
-      const G = Q.get(D) ?? Q.get(m[0].key);
-      Q.forEach((Y) => {
-        Y.style.visibility = Y === G ? "visible" : "hidden";
-      }), A = D;
-    }, S = (D) => {
-      const G = Math.min(100, D - P);
-      P = D;
-      const { state: Y, analyser: X, maxMouthOpening: ie } = L.current, te = Y === "speaking", N = ie / 30;
-      if (te ? ((!$ || C !== X) && ($ = de(X), C = X), x += ($.read().level - x) * 0.3) : ($ = null, C = null, x += (0 - x) * 0.25), z && !n && (I ? (U += G, U >= 160 && (I = !1, H = 1800 + Math.random() * 3500)) : (H -= G, H <= 0 && (I = !0, U = 0))), f) {
-        let b = K;
-        if (K === 0 ? x > 0.07 && (b = x > 0.22 ? 2 : 1) : K === 1 ? x > 0.22 ? b = 2 : x < 0.05 && (b = 0) : x < 0.06 ? b = 0 : x < 0.18 && (b = 1), K = te ? b : 0, f.part === "face")
-          R(I && f.faceBlink ? "blink" : `m${K}`);
+  }, [c, a, s, J]), X(() => {
+    const Q = _.current;
+    if (!Q || !x || x.length === 0 || typeof window > "u") return;
+    const R = U.current, g = !!(h && (h.blink || h.faceBlink));
+    let b = null, q = null, k = 0, z = 0, ee = 1500 + Math.random() * 2500, Y = 0, P = !1, j = 0, E = "", $ = performance.now();
+    const C = (O) => {
+      if (O === E) return;
+      const H = R.get(O) ?? R.get(x[0].key);
+      R.forEach((G) => {
+        G.style.visibility = G === H ? "visible" : "hidden";
+      }), E = O;
+    }, w = (O) => {
+      const H = Math.min(100, O - $);
+      $ = O;
+      const { state: G, analyser: ie, maxMouthOpening: V } = L.current, le = G === "speaking", S = V / 30;
+      if (le ? ((!b || q !== ie) && (b = de(ie), q = ie), k += (b.read().level - k) * 0.3) : (b = null, q = null, k += (0 - k) * 0.25), g && !n && (P ? (Y += H, Y >= 160 && (P = !1, ee = 1800 + Math.random() * 3500)) : (ee -= H, ee <= 0 && (P = !0, Y = 0))), h) {
+        let m = j;
+        if (j === 0 ? k > 0.07 && (m = k > 0.22 ? 2 : 1) : j === 1 ? k > 0.22 ? m = 2 : k < 0.05 && (m = 0) : k < 0.06 ? m = 0 : k < 0.18 && (m = 1), j = le ? m : 0, h.part === "face")
+          C(P && h.faceBlink ? "blink" : `m${j}`);
         else {
-          const ve = I && f.blink ? "c" : "o";
-          R(`m${K}-${ve}`);
+          const Me = P && h.blink ? "c" : "o";
+          C(`m${j}-${Me}`);
         }
-        let E = 0, T = 0;
-        n || (q += G * 2e-3, E = Math.sin(q) * 8e-3, Y === "listening" && (T = Math.sin(q * 1.6) * 1.2));
-        const Z = x * 4 * N, re = 1 + x * 0.04 * N + E, ne = 1 - x * 0.02 * N + E;
-        u.style.transform = `translateY(${(-Z + T).toFixed(2)}px) scale(${ne.toFixed(4)}, ${re.toFixed(4)})`;
+        let W = 0, A = 0;
+        n || (z += H * 2e-3, W = Math.sin(z) * 8e-3, G === "listening" && (A = Math.sin(z * 1.6) * 1.2));
+        const T = k * 4 * S, K = 1 + k * 0.04 * S + W, re = 1 - k * 0.02 * S + W;
+        Q.style.transform = `translateY(${(-T + A).toFixed(2)}px) scale(${re.toFixed(4)}, ${K.toFixed(4)})`;
       } else {
-        let b = 0;
-        n || (q += G * 2e-3, b = Math.sin(q) * 0.012);
-        const E = x * 10 * N, T = 1 + x * 0.1 * N + b, Z = 1 - x * 0.05 * N + b, re = Y === "thinking" && !n ? -4 : 0;
-        u.style.transform = `translateY(${(-E).toFixed(2)}px) scale(${Z.toFixed(4)}, ${T.toFixed(4)}) rotate(${re}deg)`;
+        let m = 0;
+        n || (z += H * 2e-3, m = Math.sin(z) * 0.012);
+        const W = k * 10 * S, A = 1 + k * 0.1 * S + m, T = 1 - k * 0.05 * S + m, K = G === "thinking" && !n ? -4 : 0;
+        Q.style.transform = `translateY(${(-W).toFixed(2)}px) scale(${T.toFixed(4)}, ${A.toFixed(4)}) rotate(${K}deg)`;
       }
-      w.current = requestAnimationFrame(S);
+      M.current = requestAnimationFrame(w);
     };
-    return u.style.transformOrigin = "center bottom", w.current = requestAnimationFrame(S), () => {
-      w.current && cancelAnimationFrame(w.current);
+    return Q.style.transformOrigin = "center bottom", M.current = requestAnimationFrame(w), () => {
+      M.current && cancelAnimationFrame(M.current);
     };
-  }, [m, f, n]);
-  const v = (g == null ? void 0 : g[i]) ?? "#10b981";
+  }, [x, h, n]);
+  const te = (p == null ? void 0 : p[t]) ?? "#10b981";
   return /* @__PURE__ */ o(
     "div",
     {
-      className: `relative flex items-center justify-center ${s}`,
-      style: { width: l, height: l, ...h },
+      className: `relative flex items-center justify-center ${d}`,
+      style: { width: l, height: l, ...f },
       children: [
-        m && /* @__PURE__ */ e("div", { ref: B, className: "relative w-full h-full", role: "img", "aria-label": "Avatar", children: m.map((u, Q) => /* @__PURE__ */ e(
+        x && /* @__PURE__ */ e("div", { ref: _, className: "relative w-full h-full", role: "img", "aria-label": "Avatar", children: x.map((Q, R) => /* @__PURE__ */ e(
           "div",
           {
-            ref: (z) => {
-              z ? V.current.set(u.key, z) : V.current.delete(u.key);
+            ref: (g) => {
+              g ? U.current.set(Q.key, g) : U.current.delete(Q.key);
             },
-            dangerouslySetInnerHTML: { __html: u.html },
+            dangerouslySetInnerHTML: { __html: Q.html },
             className: "absolute inset-0 [&>svg]:w-full [&>svg]:h-full",
-            style: { visibility: Q === 0 ? "visible" : "hidden" }
+            style: { visibility: R === 0 ? "visible" : "hidden" }
           },
-          u.key
+          Q.key
         )) }),
-        !m && !M && /* @__PURE__ */ o("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: [
+        !x && !N && /* @__PURE__ */ o("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: [
           /* @__PURE__ */ e(
             "div",
             {
               className: "w-8 h-8 border-4 rounded-full animate-spin mb-2",
-              style: { borderColor: `${v}33`, borderTopColor: v }
+              style: { borderColor: `${te}33`, borderTopColor: te }
             }
           ),
           /* @__PURE__ */ e("span", { className: "text-[10px] font-mono font-bold tracking-widest text-zinc-400 animate-pulse", children: "GENERATING AVATAR…" })
         ] }),
-        M === "missing" && /* @__PURE__ */ o("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-zinc-950/90 backdrop-blur-md rounded-2xl p-4 text-center", children: [
+        N === "missing" && /* @__PURE__ */ o("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-zinc-950/90 backdrop-blur-md rounded-2xl p-4 text-center", children: [
           /* @__PURE__ */ e("span", { className: "text-xs font-mono font-bold text-amber-400 uppercase tracking-wider mb-2", children: "DiceBear not installed" }),
           /* @__PURE__ */ e("p", { className: "text-[10px] text-zinc-500 max-w-[220px] leading-relaxed mb-2", children: "Install the optional peer dependencies to use this variant:" }),
           /* @__PURE__ */ e("code", { className: "text-[10px] text-zinc-300 bg-zinc-900 px-2 py-1 rounded border border-zinc-800 break-all", children: "npm i @dicebear/core @dicebear/collection" })
         ] }),
-        M && M !== "missing" && /* @__PURE__ */ o("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-zinc-950/90 backdrop-blur-md rounded-2xl p-4 text-center", children: [
+        N && N !== "missing" && /* @__PURE__ */ o("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-zinc-950/90 backdrop-blur-md rounded-2xl p-4 text-center", children: [
           /* @__PURE__ */ e("span", { className: "text-xs font-mono font-bold text-red-400 uppercase tracking-wider mb-2", children: "Failed to generate" }),
-          /* @__PURE__ */ e("p", { className: "text-[10px] text-zinc-500 max-w-[220px] leading-relaxed break-all", children: M })
+          /* @__PURE__ */ e("p", { className: "text-[10px] text-zinc-500 max-w-[220px] leading-relaxed break-all", children: N })
         ] })
       ]
     }
   );
 }
-function be(i) {
-  if (!i) return "";
-  let r = i;
+function ke(t) {
+  if (!t) return "";
+  let r = t;
   r = r.replace(/```[^\n]*\n?([\s\S]*?)```/g, "$1"), r = r.replace(/```[^\n]*\n?/g, ""), r = r.split(`
 `).filter((l) => {
     const c = l.trim();
     if (!c) return !0;
-    const a = /^\|.*\|?\s*$/.test(c) && c.includes("|"), t = /^\|?[\s:|-]+\|[\s:|-]*$/.test(c) && c.includes("-");
-    return !(a || t);
+    const a = /^\|.*\|?\s*$/.test(c) && c.includes("|"), i = /^\|?[\s:|-]+\|[\s:|-]*$/.test(c) && c.includes("-");
+    return !(a || i);
   }).join(`
 `), r = r.replace(/!\[([^\]]*)\]\([^)]*\)/g, "$1"), r = r.replace(/\[([^\]]+)\]\([^)]*\)/g, "$1"), r = r.replace(/`([^`]+)`/g, "$1"), r = r.replace(/^\s{0,3}#{1,6}\s+/gm, ""), r = r.replace(/^\s{0,3}>\s?/gm, ""), r = r.replace(/^\s{0,3}[-*+]\s+/gm, ""), r = r.replace(/^\s{0,3}\d+\.\s+/gm, "");
   for (let l = 0; l < 2; l++)
     r = r.replace(/\*\*([^*]+)\*\*/g, "$1").replace(/\*([^*]+)\*/g, "$1").replace(/__([^_]+)__/g, "$1").replace(/_([^_]+)_/g, "$1").replace(/~~([^~]+)~~/g, "$1");
   return r = r.replace(/[*_~]{1,3}(?=\s|$)/g, "").replace(/(^|\s)[*_~]{1,3}/g, "$1"), r = r.replace(/^\s{0,3}([-*_])\1{2,}\s*$/gm, ""), r = r.replace(/\s*\n\s*/g, " ").replace(/[ \t]{2,}/g, " "), r.trim();
 }
-function we(i, r = {}) {
-  const l = r.maxChars ?? 160, c = i.trim();
+function we(t, r = {}) {
+  const l = r.maxChars ?? 160, c = t.trim();
   if (c.length <= l) return c;
-  const a = c.slice(c.length - l), t = a.search(new RegExp("(?<=[.!?…])\\s+"));
-  if (t !== -1 && t < l * 0.6)
-    return "…" + a.slice(t).trimStart();
-  const d = a.indexOf(" "), s = d === -1 ? 0 : d + 1;
-  return "…" + a.slice(s);
+  const a = c.slice(c.length - l), i = a.search(new RegExp("(?<=[.!?…])\\s+"));
+  if (i !== -1 && i < l * 0.6)
+    return "…" + a.slice(i).trimStart();
+  const s = a.indexOf(" "), d = s === -1 ? 0 : s + 1;
+  return "…" + a.slice(d);
 }
-function Ce({ text: i, maxChars: r = 160, className: l = "", style: c }) {
-  const a = we(be(i ?? ""), { maxChars: r });
+function Ie({ text: t, maxChars: r = 160, className: l = "", style: c }) {
+  const a = we(ke(t ?? ""), { maxChars: r });
   return a ? /* @__PURE__ */ e(
     "div",
     {
       className: `rra-caption w-full flex justify-center pointer-events-none ${l}`,
       style: c,
       children: /* @__PURE__ */ e(
-        ce.span,
+        ne.span,
         {
           initial: { opacity: 0, y: 4 },
           animate: { opacity: 1, y: 0 },
@@ -672,15 +672,15 @@ function Ce({ text: i, maxChars: r = 160, className: l = "", style: c }) {
   ) : null;
 }
 function qe({
-  text: i,
+  text: t,
   maxChars: r = 220,
   label: l = "Thought process",
   className: c = "",
   style: a
 }) {
-  const t = we(be(i ?? ""), { maxChars: r });
-  return t ? /* @__PURE__ */ e(
-    ce.div,
+  const i = we(ke(t ?? ""), { maxChars: r });
+  return i ? /* @__PURE__ */ e(
+    ne.div,
     {
       initial: { opacity: 0, y: 8, scale: 0.98 },
       animate: { opacity: 1, y: 0, scale: 1 },
@@ -692,228 +692,335 @@ function qe({
           /* @__PURE__ */ e("span", { className: "w-1.5 h-1.5 rounded-full bg-purple-400 animate-pulse" }),
           l
         ] }),
-        /* @__PURE__ */ e("p", { className: "leading-relaxed text-zinc-200", children: t })
+        /* @__PURE__ */ e("p", { className: "leading-relaxed text-zinc-200", children: i })
       ] })
     }
   ) : null;
 }
-function _e(i, r) {
-  return r === i ? { type: "none" } : r.length > i.length && r.startsWith(i) ? { type: "push", text: r.slice(i.length) } : { type: "reset", seed: r };
+const ve = [
+  "🤔",
+  "💭",
+  "📚",
+  "🔍",
+  "🌐",
+  "💡",
+  "🧠",
+  "📝",
+  "⚙️"
+];
+function ze({
+  emojis: t = ve,
+  interval: r = 900,
+  size: l = 64,
+  className: c = "",
+  style: a
+}) {
+  const i = oe(), [s, d] = ce(0);
+  if (X(() => {
+    if (i || t.length <= 1) return;
+    const u = setInterval(() => {
+      d((p) => (p + 1) % t.length);
+    }, Math.max(200, r));
+    return () => clearInterval(u);
+  }, [i, t.length, r]), t.length === 0) return null;
+  const f = t[s % t.length];
+  return /* @__PURE__ */ e(
+    ne.div,
+    {
+      initial: { opacity: 0, y: 8, scale: 0.9 },
+      animate: { opacity: 1, y: 0, scale: 1 },
+      transition: { duration: 0.3 },
+      className: `rra-thought-emoji flex justify-center pointer-events-none ${c}`,
+      style: a,
+      role: "status",
+      "aria-live": "off",
+      "aria-label": "Thinking",
+      children: /* @__PURE__ */ e(
+        "div",
+        {
+          className: "relative flex items-center justify-center rounded-full bg-zinc-900/90 backdrop-blur-xl border border-purple-500/25 shadow-[0_10px_30px_rgba(139,92,246,0.25)]",
+          style: { width: l, height: l },
+          children: /* @__PURE__ */ e(Ne, { mode: "wait", initial: !1, children: /* @__PURE__ */ e(
+            ne.span,
+            {
+              initial: i ? !1 : { opacity: 0, scale: 0.6, rotate: -15 },
+              animate: { opacity: 1, scale: 1, rotate: 0 },
+              exit: i ? void 0 : { opacity: 0, scale: 0.6, rotate: 15 },
+              transition: { duration: 0.18 },
+              className: "absolute leading-none select-none",
+              style: { fontSize: Math.round(l * 0.5) },
+              children: f
+            },
+            s
+          ) })
+        }
+      )
+    }
+  );
+}
+function Pe(t, r) {
+  return r === t ? { type: "none" } : r.length > t.length && r.startsWith(t) ? { type: "push", text: r.slice(t.length) } : { type: "reset", seed: r };
 }
-function ze(i) {
-  const r = O(null);
-  r.current === null && (r.current = Me());
-  const l = O("");
-  return ee(() => {
-    if (i === void 0) return;
-    const c = r.current, a = _e(l.current, i);
-    a.type === "push" ? c.push(a.text) : a.type === "reset" && (c.reset(), a.seed && c.push(a.seed)), l.current = i;
-  }, [i]), i === void 0 ? null : r.current;
+function De(t) {
+  const r = Z(null);
+  r.current === null && (r.current = Ae());
+  const l = Z("");
+  return X(() => {
+    if (t === void 0) return;
+    const c = r.current, a = Pe(l.current, t);
+    a.type === "push" ? c.push(a.text) : a.type === "reset" && (c.reset(), a.seed && c.push(a.seed)), l.current = t;
+  }, [t]), t === void 0 ? null : r.current;
 }
-function j(i, r) {
-  if (!i || !i.startsWith("#")) return i || "transparent";
-  const l = i.replace("#", "");
-  let c = 0, a = 0, t = 0;
-  return l.length === 3 ? (c = parseInt(l[0] + l[0], 16), a = parseInt(l[1] + l[1], 16), t = parseInt(l[2] + l[2], 16)) : l.length === 6 && (c = parseInt(l.substring(0, 2), 16), a = parseInt(l.substring(2, 4), 16), t = parseInt(l.substring(4, 6), 16)), `rgba(${c}, ${a}, ${t}, ${r})`;
+function D(t, r) {
+  if (!t || !t.startsWith("#")) return t || "transparent";
+  const l = t.replace("#", "");
+  let c = 0, a = 0, i = 0;
+  return l.length === 3 ? (c = parseInt(l[0] + l[0], 16), a = parseInt(l[1] + l[1], 16), i = parseInt(l[2] + l[2], 16)) : l.length === 6 && (c = parseInt(l.substring(0, 2), 16), a = parseInt(l.substring(2, 4), 16), i = parseInt(l.substring(4, 6), 16)), `rgba(${c}, ${a}, ${i}, ${r})`;
 }
-const Ie = le.lazy(
-  () => import("./VrmAvatar-Dw0gf27E.js").then((i) => ({ default: i.VrmAvatar }))
-), Pe = le.lazy(
-  () => import("./GlbArkitAvatar-CjfIOQ2P.js").then((i) => ({ default: i.GlbArkitAvatar }))
+const Ze = ae.lazy(
+  () => import("./VrmAvatar-Dw0gf27E.js").then((t) => ({ default: t.VrmAvatar }))
+), je = ae.lazy(
+  () => import("./GlbArkitAvatar-CjfIOQ2P.js").then((t) => ({ default: t.GlbArkitAvatar }))
 );
-function Ve({
-  state: i,
+function He({
+  state: t,
   analyser: r = null,
   speechActivity: l,
   streamingText: c,
   size: a = 280,
-  variant: t = "geometric",
-  children: d,
-  vrmUrl: s,
-  glbUrl: h,
-  subtitle: p,
-  thought: g,
+  variant: i = "geometric",
+  children: s,
+  vrmUrl: d,
+  glbUrl: f,
+  subtitle: u,
+  thought: p,
   tool: n,
-  showGlow: _ = !0,
-  showStatePill: W = !0,
-  showThought: B = !0,
-  showSubtitle: V = !0,
-  className: w = "",
-  style: m,
-  dicebearCollection: F,
-  dicebearSeed: f,
-  maxMouthOpening: k,
-  blinkIntervalMin: M,
-  blinkIntervalMax: y,
-  blinkDuration: L,
-  mouseTrackingIntensity: J,
-  stateColors: v,
-  stateLabels: u,
-  customization: Q
+  thinkingEmojis: B,
+  thinkingEmojiInterval: F = 900,
+  thinkingEmojiSize: _,
+  showGlow: U = !0,
+  showStatePill: M = !0,
+  showThought: x = !0,
+  showSubtitle: I = !0,
+  className: h = "",
+  style: v,
+  dicebearCollection: N,
+  dicebearSeed: y,
+  maxMouthOpening: L,
+  blinkIntervalMin: J,
+  blinkIntervalMax: te,
+  blinkDuration: Q,
+  mouseTrackingIntensity: R,
+  stateColors: g,
+  stateLabels: b,
+  customization: q
 }) {
-  const z = ze(c), $ = l ?? z, C = $ ?? r, x = {
-    state: i,
-    analyser: C,
+  const k = De(c), z = l ?? k, ee = z ?? r, Y = {
+    state: t,
+    analyser: ee,
     size: a,
-    maxMouthOpening: k,
-    blinkIntervalMin: M,
-    blinkIntervalMax: y,
-    blinkDuration: L,
-    mouseTrackingIntensity: J,
-    stateColors: v,
-    customization: Q
+    maxMouthOpening: L,
+    blinkIntervalMin: J,
+    blinkIntervalMax: te,
+    blinkDuration: Q,
+    mouseTrackingIntensity: R,
+    stateColors: g,
+    customization: q
   };
-  let q;
-  if (t === "vrm")
-    q = /* @__PURE__ */ e(he, { fallback: null, children: /* @__PURE__ */ e(Ie, { ...x, vrmUrl: s }) });
-  else if (t === "glb")
-    q = /* @__PURE__ */ e(he, { fallback: null, children: /* @__PURE__ */ e(Pe, { ...x, glbUrl: h }) });
-  else if (t === "dicebear")
-    q = /* @__PURE__ */ e(
-      Fe,
+  let P;
+  if (i === "vrm")
+    P = /* @__PURE__ */ e(he, { fallback: null, children: /* @__PURE__ */ e(Ze, { ...Y, vrmUrl: d }) });
+  else if (i === "glb")
+    P = /* @__PURE__ */ e(he, { fallback: null, children: /* @__PURE__ */ e(je, { ...Y, glbUrl: f }) });
+  else if (i === "dicebear")
+    P = /* @__PURE__ */ e(
+      _e,
       {
-        state: i,
-        analyser: C,
+        state: t,
+        analyser: ee,
         size: a,
-        maxMouthOpening: k,
-        stateColors: v,
-        collection: F,
-        seed: f
+        maxMouthOpening: L,
+        stateColors: g,
+        collection: N,
+        seed: y
       }
     );
-  else if (t === "byos")
-    q = /* @__PURE__ */ e(ue, { ...x, children: d });
+  else if (i === "byos")
+    P = /* @__PURE__ */ e(pe, { ...Y, children: s });
   else {
-    const D = {
+    const S = {
       geometric: ge,
-      memoji: Le,
-      pixelart: Se,
-      doodle: Qe
-    }[t] ?? ge;
-    q = // Keyed by variant so switching presets remounts the runtime cleanly
-    /* @__PURE__ */ e(ue, { ...x, children: /* @__PURE__ */ e(D, { size: a, customization: Q, state: i }) }, t);
+      memoji: Qe,
+      pixelart: We,
+      doodle: $e
+    }[i] ?? ge;
+    P = // Keyed by variant so switching presets remounts the runtime cleanly
+    /* @__PURE__ */ e(pe, { ...Y, children: /* @__PURE__ */ e(S, { size: a, customization: q, state: t }) }, i);
   }
-  const H = pe(1), U = pe(0.15), I = O(null), K = se(), A = {
-    idle: (v == null ? void 0 : v.idle) ?? "#4b5563",
+  const j = ue(1), E = ue(0.15), $ = Z(null), C = oe(), w = {
+    idle: (g == null ? void 0 : g.idle) ?? "#4b5563",
     // gray-600
-    listening: (v == null ? void 0 : v.listening) ?? "#3b82f6",
+    listening: (g == null ? void 0 : g.listening) ?? "#3b82f6",
     // blue-500
-    thinking: (v == null ? void 0 : v.thinking) ?? "#8b5cf6",
+    thinking: (g == null ? void 0 : g.thinking) ?? "#8b5cf6",
     // purple-500
-    speaking: (v == null ? void 0 : v.speaking) ?? "#10b981",
+    speaking: (g == null ? void 0 : g.speaking) ?? "#10b981",
     // emerald-500
-    working: (v == null ? void 0 : v.working) ?? "#f59e0b"
+    working: (g == null ? void 0 : g.working) ?? "#f59e0b"
     // amber-500
-  }, P = {
-    idle: (u == null ? void 0 : u.idle) ?? "Idle",
-    listening: (u == null ? void 0 : u.listening) ?? "Listening",
-    thinking: (u == null ? void 0 : u.thinking) ?? "Thinking...",
-    speaking: (u == null ? void 0 : u.speaking) ?? "Speaking",
-    working: (u == null ? void 0 : u.working) ?? "Working"
-  }, R = {
-    idle: j(A.idle, 0.15),
-    listening: j(A.listening, 0.35),
-    thinking: j(A.thinking, 0.4),
-    speaking: j(A.speaking, 0.45),
-    working: j(A.working, 0.4)
+  }, O = {
+    idle: (b == null ? void 0 : b.idle) ?? "Idle",
+    listening: (b == null ? void 0 : b.listening) ?? "Listening",
+    thinking: (b == null ? void 0 : b.thinking) ?? "Thinking...",
+    speaking: (b == null ? void 0 : b.speaking) ?? "Speaking",
+    working: (b == null ? void 0 : b.working) ?? "Working"
+  }, H = {
+    idle: D(w.idle, 0.15),
+    listening: D(w.listening, 0.35),
+    thinking: D(w.thinking, 0.4),
+    speaking: D(w.speaking, 0.45),
+    working: D(w.working, 0.4)
   };
-  return ee(() => {
-    if (!(r && (i === "speaking" || i === "listening")) && !(!r && $ && i === "speaking")) {
-      H.set(i === "thinking" || i === "working" ? 1.05 : 1), U.set(i === "thinking" || i === "working" ? 0.35 : 0.15), I.current && cancelAnimationFrame(I.current);
+  X(() => {
+    if (!(r && (t === "speaking" || t === "listening")) && !(!r && z && t === "speaking")) {
+      j.set(t === "thinking" || t === "working" ? 1.05 : 1), E.set(t === "thinking" || t === "working" ? 0.35 : 0.15), $.current && cancelAnimationFrame($.current);
       return;
     }
-    const G = r ? new Uint8Array(r.frequencyBinCount) : null, Y = () => {
-      let X;
-      if (r && G) {
-        r.getByteTimeDomainData(G);
-        let ie = 0;
-        for (let te = 0; te < G.length; te++) {
-          const N = Math.abs(G[te] - 128);
-          N > ie && (ie = N);
+    const m = r ? new Uint8Array(r.frequencyBinCount) : null, W = () => {
+      let A;
+      if (r && m) {
+        r.getByteTimeDomainData(m);
+        let T = 0;
+        for (let K = 0; K < m.length; K++) {
+          const re = Math.abs(m[K] - 128);
+          re > T && (T = re);
         }
-        X = Math.min(1, ie / 128);
+        A = Math.min(1, T / 128);
       } else
-        X = $ ? $.sample() : 0;
-      H.set(1 + X * 0.35), U.set(0.15 + X * 0.35), I.current = requestAnimationFrame(Y);
+        A = z ? z.sample() : 0;
+      j.set(1 + A * 0.35), E.set(0.15 + A * 0.35), $.current = requestAnimationFrame(W);
     };
-    return I.current = requestAnimationFrame(Y), () => {
-      I.current && cancelAnimationFrame(I.current);
+    return $.current = requestAnimationFrame(W), () => {
+      $.current && cancelAnimationFrame($.current);
     };
-  }, [r, $, i, H, U]), /* @__PURE__ */ o("div", { className: `relative flex flex-col items-center justify-center ${w}`, style: { width: a, height: a, ...m }, children: [
-    _ && /* @__PURE__ */ e(
-      ce.div,
+  }, [r, z, t, j, E]);
+  const G = Array.isArray(B) ? B : B ? ve : null, ie = t === "thinking" && !!G && G.length > 0, V = _ ?? Math.round(a * 0.28);
+  return /* @__PURE__ */ o("div", { className: `relative flex flex-col items-center justify-center ${h}`, style: { width: a, height: a, ...v }, children: [
+    U && /* @__PURE__ */ e(
+      ne.div,
       {
         className: "absolute rounded-[1.75rem] pointer-events-none filter blur-2xl",
         style: {
           width: a * 0.9,
           height: a * 0.9,
-          backgroundColor: A[i],
-          scale: H,
-          opacity: U
+          backgroundColor: w[t],
+          scale: j,
+          opacity: E
         }
       }
     ),
-    /* @__PURE__ */ e("div", { className: "w-full h-full relative flex items-center justify-center z-10", children: q }),
-    B && g && /* @__PURE__ */ e("div", { className: "absolute bottom-[108%] left-1/2 -translate-x-1/2 w-[90vw] max-w-[340px] md:max-w-[420px] z-40", children: /* @__PURE__ */ o("div", { className: "relative", children: [
-      /* @__PURE__ */ e(qe, { text: g, className: "max-w-none" }),
+    /* @__PURE__ */ e("div", { className: "w-full h-full relative flex items-center justify-center z-10", children: P }),
+    ie ? /* @__PURE__ */ e(
+      "div",
+      {
+        className: "absolute z-40",
+        style: { top: Math.round(a * 0.02), right: Math.round(a * 0.02) },
+        children: /* @__PURE__ */ o("div", { className: "relative", children: [
+          /* @__PURE__ */ e(
+            ze,
+            {
+              emojis: G,
+              interval: F,
+              size: V
+            }
+          ),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "absolute rounded-full bg-zinc-900/90 border border-purple-500/25 shadow-md backdrop-blur-md",
+              style: {
+                width: V * 0.22,
+                height: V * 0.22,
+                bottom: -V * 0.14,
+                left: -V * 0.02
+              }
+            }
+          ),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "absolute rounded-full bg-zinc-900/90 border border-purple-500/20 shadow-sm backdrop-blur-md",
+              style: {
+                width: V * 0.14,
+                height: V * 0.14,
+                bottom: -V * 0.3,
+                left: -V * 0.18
+              }
+            }
+          )
+        ] })
+      }
+    ) : x && p && /* @__PURE__ */ e("div", { className: "absolute bottom-[108%] left-1/2 -translate-x-1/2 w-[90vw] max-w-[340px] md:max-w-[420px] z-40", children: /* @__PURE__ */ o("div", { className: "relative", children: [
+      /* @__PURE__ */ e(qe, { text: p, className: "max-w-none" }),
       /* @__PURE__ */ e("div", { className: "absolute -bottom-3 left-1/2 -translate-x-1/2 w-4 h-4 bg-zinc-900/90 rounded-full border border-purple-500/20 shadow-md backdrop-blur-md" }),
       /* @__PURE__ */ e("div", { className: "absolute -bottom-6 left-[48%] -translate-x-1/2 w-2.5 h-2.5 bg-zinc-900/90 rounded-full border border-purple-500/15 shadow-sm backdrop-blur-md" }),
       /* @__PURE__ */ e("div", { className: "absolute -bottom-8 left-[47%] -translate-x-1/2 w-1.5 h-1.5 bg-zinc-900/90 rounded-full border border-purple-500/10 backdrop-blur-md" })
     ] }) }),
-    W && /* @__PURE__ */ e(
-      ce.div,
+    M && /* @__PURE__ */ e(
+      ne.div,
       {
         role: "status",
         "aria-live": "polite",
         className: "absolute -bottom-6 px-4 py-1.5 rounded-full text-xs font-bold text-white uppercase tracking-widest shadow-lg z-30 cursor-default select-none border border-white/10",
         animate: {
-          backgroundColor: A[i],
-          boxShadow: `0 4px 14px rgba(0,0,0,0.4), 0 0 16px ${R[i]}`
+          backgroundColor: w[t],
+          boxShadow: `0 4px 14px rgba(0,0,0,0.4), 0 0 16px ${H[t]}`
         },
         transition: { duration: 0.3 },
         children: /* @__PURE__ */ o("span", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ e("span", { className: `w-2 h-2 rounded-full bg-white ${!K && (i === "speaking" || i === "thinking") ? "animate-ping" : ""}` }),
-          i === "working" && n ? `Working: ${n}` : P[i]
+          /* @__PURE__ */ e("span", { className: `w-2 h-2 rounded-full bg-white ${!C && (t === "speaking" || t === "thinking") ? "animate-ping" : ""}` }),
+          t === "working" && n ? `Working: ${n}` : O[t]
         ] })
       }
     ),
-    V && p && /* @__PURE__ */ e("div", { className: "absolute top-[115%] left-1/2 -translate-x-1/2 w-[90vw] max-w-[500px] md:max-w-[640px] z-50 pb-8", children: /* @__PURE__ */ e(Ce, { text: p }) })
+    I && u && /* @__PURE__ */ e("div", { className: "absolute top-[115%] left-1/2 -translate-x-1/2 w-[90vw] max-w-[500px] md:max-w-[640px] z-50 pb-8", children: /* @__PURE__ */ e(Ie, { text: u }) })
   ] });
 }
-function Ue({
-  size: i = "100%",
+function Ke({
+  size: t = "100%",
   customization: r,
   state: l,
-  className: c,
-  style: a
+  poses: c = !1,
+  className: a,
+  style: i
 }) {
   const {
-    skinColor: t = "#cf6b34",
+    skinColor: s = "#cf6b34",
     // fur — also used for the eyelids
     bgColor: d = "#6fb3bd"
-  } = r ?? {}, [s, h] = le.useState(
+  } = r ?? {}, [f, u] = ae.useState(
     () => Math.random() < 0.5 ? "wires" : "paper"
-  ), p = le.useRef(l);
-  return le.useEffect(() => {
-    l === "working" && p.current !== "working" && h(Math.random() < 0.5 ? "wires" : "paper"), p.current = l;
+  ), p = ae.useRef(l);
+  return ae.useEffect(() => {
+    l === "working" && p.current !== "working" && u(Math.random() < 0.5 ? "wires" : "paper"), p.current = l;
   }, [l]), /* @__PURE__ */ o(
     "svg",
     {
       viewBox: "0 0 200 200",
-      width: i,
-      height: i,
+      width: t,
+      height: t,
       xmlns: "http://www.w3.org/2000/svg",
       role: "img",
       "aria-label": "Avatar",
-      className: c,
-      style: a,
+      className: a,
+      style: i,
       children: [
         /* @__PURE__ */ e("circle", { cx: "100", cy: "100", r: "79", fill: d }),
         /* @__PURE__ */ e("clipPath", { id: "rra-squirrel-clip", children: /* @__PURE__ */ e("circle", { cx: "100", cy: "100", r: "79" }) }),
         /* @__PURE__ */ o("g", { clipPath: "url(#rra-squirrel-clip)", children: [
-          /* @__PURE__ */ e("path", { d: "M150 158 C182 150 188 96 162 66 C150 52 130 52 124 66 C140 70 150 92 146 110 C142 132 132 148 150 158 Z", fill: t }),
+          /* @__PURE__ */ e("path", { d: "M150 158 C182 150 188 96 162 66 C150 52 130 52 124 66 C140 70 150 92 146 110 C142 132 132 148 150 158 Z", fill: s }),
           /* @__PURE__ */ e("path", { d: "M150 150 C172 142 176 100 156 76 C150 90 156 104 152 120 C148 134 140 142 150 150 Z", fill: "#e3a368" }),
-          /* @__PURE__ */ e("path", { d: "M84 118 Q82 140 78 150 L122 150 Q118 140 116 118 Z", fill: t }),
+          /* @__PURE__ */ e("path", { d: "M84 118 Q82 140 78 150 L122 150 Q118 140 116 118 Z", fill: s }),
           /* @__PURE__ */ e("path", { d: "M85 122 Q100 133 115 122 Q100 129 85 122 Z", fill: "#b05418", opacity: "0.55" }),
           /* @__PURE__ */ e("path", { d: "M36 182 Q42 148 72 144 Q86 158 100 158 Q114 158 128 144 Q158 148 164 182 Z", fill: "#2b2f36" }),
           /* @__PURE__ */ e("path", { d: "M78 146 Q100 156 122 146", fill: "none", stroke: "#3c424b", strokeWidth: "3", strokeLinecap: "round" }),
@@ -923,18 +1030,18 @@ function Ue({
             /* @__PURE__ */ e("circle", { cx: "100", cy: "162", r: "1.4", fill: "#6cc0ee", stroke: "none" })
           ] }),
           /* @__PURE__ */ e("path", { d: "M96 150 L94 170 M104 150 L106 170", stroke: "#e9eef2", strokeWidth: "1.6", strokeLinecap: "round", fill: "none" }),
-          /* @__PURE__ */ o("g", { id: "rra-squirrel-head", transform: l === "thinking" ? "rotate(6 100 120)" : void 0, children: [
-            /* @__PURE__ */ e("path", { d: "M66 80 L58 42 Q74 50 86 72 Z", fill: t }),
-            /* @__PURE__ */ e("path", { d: "M134 80 L142 42 Q126 50 114 72 Z", fill: t }),
+          /* @__PURE__ */ o("g", { id: "rra-squirrel-head", transform: c && l === "thinking" ? "rotate(6 100 120)" : void 0, children: [
+            /* @__PURE__ */ e("path", { d: "M66 80 L58 42 Q74 50 86 72 Z", fill: s }),
+            /* @__PURE__ */ e("path", { d: "M134 80 L142 42 Q126 50 114 72 Z", fill: s }),
             /* @__PURE__ */ e("path", { d: "M68 74 L63 52 Q72 56 80 70 Z", fill: "#a8451c" }),
             /* @__PURE__ */ e("path", { d: "M132 74 L137 52 Q128 56 120 70 Z", fill: "#a8451c" }),
             /* @__PURE__ */ o("g", { stroke: "#f0d9b8", strokeWidth: "1.4", strokeLinecap: "round", fill: "none", children: [
               /* @__PURE__ */ e("path", { d: "M60 46 L57 38 M63 47 L62 39 M66 49 L66 41" }),
               /* @__PURE__ */ e("path", { d: "M140 46 L143 38 M137 47 L138 39 M134 49 L134 41" })
             ] }),
-            /* @__PURE__ */ e("ellipse", { cx: "100", cy: "98", rx: "40", ry: "37", fill: t }),
-            /* @__PURE__ */ e("path", { d: "M62 96 Q54 90 58 100 Q56 108 64 106 Z", fill: t }),
-            /* @__PURE__ */ e("path", { d: "M138 96 Q146 90 142 100 Q144 108 136 106 Z", fill: t }),
+            /* @__PURE__ */ e("ellipse", { cx: "100", cy: "98", rx: "40", ry: "37", fill: s }),
+            /* @__PURE__ */ e("path", { d: "M62 96 Q54 90 58 100 Q56 108 64 106 Z", fill: s }),
+            /* @__PURE__ */ e("path", { d: "M138 96 Q146 90 142 100 Q144 108 136 106 Z", fill: s }),
             /* @__PURE__ */ e("ellipse", { cx: "100", cy: "112", rx: "23", ry: "18", fill: "#ecc090" }),
             /* @__PURE__ */ e("path", { d: "M64 78 Q60 50 86 46 Q78 54 82 60 Q92 44 110 48 Q102 56 106 60 Q120 50 134 74 Q124 62 112 66 Q100 56 88 66 Q76 64 64 78 Z", fill: "#3a2820" }),
             /* @__PURE__ */ o("g", { stroke: "#5a3a22", strokeWidth: "3", strokeLinecap: "round", fill: "none", children: [
@@ -950,17 +1057,17 @@ function Ue({
             /* @__PURE__ */ e("circle", { cx: "118", cy: "92", r: "13.5", fill: "#fbf7ef", stroke: "#1a1a1a", strokeWidth: "3" }),
             /* @__PURE__ */ o("g", { children: [
               /* @__PURE__ */ e("ellipse", { cx: "82", cy: "93", rx: "8", ry: "8.5", fill: "#ffffff" }),
-              /* @__PURE__ */ e("g", { transform: l === "thinking" ? "translate(5, 0)" : void 0, children: /* @__PURE__ */ e("circle", { className: "rra-pupil", "data-base-x": 82, "data-base-y": 93, cx: "82", cy: "93", r: "4.6", fill: "#2b1b12" }) }),
+              /* @__PURE__ */ e("g", { transform: c && l === "thinking" ? "translate(5, 0)" : void 0, children: /* @__PURE__ */ e("circle", { className: "rra-pupil", "data-base-x": 82, "data-base-y": 93, cx: "82", cy: "93", r: "4.6", fill: "#2b1b12" }) }),
               /* @__PURE__ */ e("circle", { cx: "84", cy: "90", r: "1.5", fill: "#ffffff" }),
-              /* @__PURE__ */ e("rect", { className: "rra-lid", "data-max-height": "18", x: "73", y: "83", width: "18", height: "0", fill: t })
+              /* @__PURE__ */ e("rect", { className: "rra-lid", "data-max-height": "18", x: "73", y: "83", width: "18", height: "0", fill: s })
             ] }),
             /* @__PURE__ */ o("g", { children: [
               /* @__PURE__ */ e("ellipse", { cx: "118", cy: "93", rx: "8", ry: "8.5", fill: "#ffffff" }),
-              /* @__PURE__ */ e("g", { transform: l === "thinking" ? "translate(5, 0)" : void 0, children: /* @__PURE__ */ e("circle", { className: "rra-pupil", "data-base-x": 118, "data-base-y": 93, cx: "118", cy: "93", r: "4.6", fill: "#2b1b12" }) }),
+              /* @__PURE__ */ e("g", { transform: c && l === "thinking" ? "translate(5, 0)" : void 0, children: /* @__PURE__ */ e("circle", { className: "rra-pupil", "data-base-x": 118, "data-base-y": 93, cx: "118", cy: "93", r: "4.6", fill: "#2b1b12" }) }),
               /* @__PURE__ */ e("circle", { cx: "120", cy: "90", r: "1.5", fill: "#ffffff" }),
-              /* @__PURE__ */ e("rect", { className: "rra-lid", "data-max-height": "18", x: "109", y: "83", width: "18", height: "0", fill: t })
+              /* @__PURE__ */ e("rect", { className: "rra-lid", "data-max-height": "18", x: "109", y: "83", width: "18", height: "0", fill: s })
             ] }),
-            l === "working" && s === "wires" && /* @__PURE__ */ o("g", { id: "rra-safety-goggles", children: [
+            c && l === "working" && f === "wires" && /* @__PURE__ */ o("g", { id: "rra-safety-goggles", children: [
               /* @__PURE__ */ e("path", { d: "M 52 92 C 45 92, 45 96, 40 96 M 148 92 C 155 92, 155 96, 160 96", fill: "none", stroke: "#2d3748", strokeWidth: "4", strokeLinecap: "round" }),
               /* @__PURE__ */ e("rect", { x: "58", y: "78", width: "84", height: "28", rx: "14", fill: "none", stroke: "#e2e8f0", strokeWidth: "4" }),
               /* @__PURE__ */ e("rect", { x: "60", y: "80", width: "80", height: "24", rx: "12", fill: "#e0f2fe", fillOpacity: "0.15" }),
@@ -971,7 +1078,7 @@ function Ue({
             /* @__PURE__ */ e("path", { d: "M100 113 L100 118", stroke: "#7a4a32", strokeWidth: "1.6", strokeLinecap: "round" }),
             /* @__PURE__ */ e("ellipse", { id: "rra-mouth", cx: "100", cy: "121", rx: "7", ry: "2.3", fill: "#5a3324" }),
             /* @__PURE__ */ e("g", { stroke: "#caa074", strokeWidth: "1", strokeLinecap: "round", opacity: "0.8", fill: "none", children: /* @__PURE__ */ e("path", { d: "M80 116 L62 113 M80 120 L62 121 M120 116 L138 113 M120 120 L138 121" }) }),
-            l === "thinking" && /* @__PURE__ */ o("g", { id: "rra-thinking-hand", children: [
+            c && l === "thinking" && /* @__PURE__ */ o("g", { id: "rra-thinking-hand", children: [
               /* @__PURE__ */ e(
                 "path",
                 {
@@ -981,14 +1088,14 @@ function Ue({
                   strokeWidth: "1.2"
                 }
               ),
-              /* @__PURE__ */ o("g", { fill: t, stroke: "#b05418", strokeWidth: "1.2", strokeLinejoin: "round", strokeLinecap: "round", children: [
+              /* @__PURE__ */ o("g", { fill: s, stroke: "#b05418", strokeWidth: "1.2", strokeLinejoin: "round", strokeLinecap: "round", children: [
                 /* @__PURE__ */ e("path", { d: "M112 144 C110 138, 107 130, 105 124 C104 121, 108 121, 109 124 C111 130, 113 136, 115 141" }),
                 /* @__PURE__ */ e("path", { d: "M115 141 C117 139, 120 140, 119 143 C121 142, 123 144, 121 147 C122 147, 123 149, 121 151 C120 152, 116 150, 115 145" }),
                 /* @__PURE__ */ e("path", { d: "M110 139 C104 139, 96 135, 92 132 C90 130, 93 128, 95 130 C100 133, 106 135, 110 136" })
               ] })
             ] })
           ] }),
-          l === "working" && s === "wires" && /* @__PURE__ */ o("g", { id: "rra-working-workspace-wires", children: [
+          c && l === "working" && f === "wires" && /* @__PURE__ */ o("g", { id: "rra-working-workspace-wires", children: [
             /* @__PURE__ */ e("circle", { cx: "100", cy: "162", r: "22", fill: "#fef08a", fillOpacity: "0.25", children: /* @__PURE__ */ e("animate", { attributeName: "opacity", values: "1;0.2;0.9;0.1;0.8;0.3;1", dur: "1.2s", repeatCount: "indefinite" }) }),
             /* @__PURE__ */ e("rect", { x: "94", y: "172", width: "12", height: "8", fill: "#94a3b8", rx: "1" }),
             /* @__PURE__ */ e("rect", { x: "96", y: "175", width: "8", height: "2", fill: "#64748b" }),
@@ -1007,7 +1114,7 @@ function Ue({
               ),
               /* @__PURE__ */ e("path", { d: "M36 182 L55 162 L64 168 L45 182 Z", fill: "#2b2f36", stroke: "#1e293b", strokeWidth: "1" }),
               /* @__PURE__ */ e("path", { d: "M 45 180 C 45 165, 80 170, 94 174", fill: "none", stroke: "#ef4444", strokeWidth: "2.5", strokeLinecap: "round" }),
-              /* @__PURE__ */ o("g", { fill: t, stroke: "#b05418", strokeWidth: "1", children: [
+              /* @__PURE__ */ o("g", { fill: s, stroke: "#b05418", strokeWidth: "1", children: [
                 /* @__PURE__ */ e("rect", { x: "58", y: "160", width: "10", height: "12", rx: "4", transform: "rotate(-10 63 166)" }),
                 /* @__PURE__ */ e("rect", { x: "62", y: "163", width: "9", height: "10", rx: "3", transform: "rotate(-15 66.5 168)" })
               ] })
@@ -1025,13 +1132,13 @@ function Ue({
               ),
               /* @__PURE__ */ e("path", { d: "M164 182 L145 162 L136 168 L155 182 Z", fill: "#2b2f36", stroke: "#1e293b", strokeWidth: "1" }),
               /* @__PURE__ */ e("path", { d: "M 155 180 C 155 165, 120 170, 106 174", fill: "none", stroke: "#1e293b", strokeWidth: "2.5", strokeLinecap: "round" }),
-              /* @__PURE__ */ o("g", { fill: t, stroke: "#b05418", strokeWidth: "1", children: [
+              /* @__PURE__ */ o("g", { fill: s, stroke: "#b05418", strokeWidth: "1", children: [
                 /* @__PURE__ */ e("rect", { x: "132", y: "160", width: "10", height: "12", rx: "4", transform: "rotate(10 137 166)" }),
                 /* @__PURE__ */ e("rect", { x: "129", y: "163", width: "9", height: "10", rx: "3", transform: "rotate(15 133.5 168)" })
               ] })
             ] })
           ] }),
-          l === "working" && s === "paper" && /* @__PURE__ */ o("g", { id: "rra-working-workspace-paper", children: [
+          c && l === "working" && f === "paper" && /* @__PURE__ */ o("g", { id: "rra-working-workspace-paper", children: [
             /* @__PURE__ */ e(
               "animateTransform",
               {
@@ -1052,13 +1159,13 @@ function Ue({
             /* @__PURE__ */ e("path", { d: "M100 148 C 84 136 68 130 52 126 L 60 182 C 78 178 90 177 100 176 Z", fill: "#20242b", stroke: "#0f1216", strokeWidth: "1.5" }),
             /* @__PURE__ */ e("path", { d: "M100 148 C 116 136 132 130 148 126 L 140 182 C 122 178 110 177 100 176 Z", fill: "#20242b", stroke: "#0f1216", strokeWidth: "1.5" }),
             /* @__PURE__ */ e("line", { x1: "100", y1: "134", x2: "100", y2: "176", stroke: "#0f1216", strokeWidth: "1.4" }),
-            /* @__PURE__ */ o("g", { fill: t, stroke: "#b05418", strokeWidth: "1", children: [
+            /* @__PURE__ */ o("g", { fill: s, stroke: "#b05418", strokeWidth: "1", children: [
               /* @__PURE__ */ e("circle", { cx: "60", cy: "180", r: "7" }),
               /* @__PURE__ */ e("rect", { x: "57", y: "170", width: "7", height: "12", rx: "3" }),
               /* @__PURE__ */ e("rect", { x: "62", y: "172", width: "7", height: "11", rx: "3" }),
               /* @__PURE__ */ e("rect", { x: "67", y: "173", width: "6", height: "10", rx: "3" })
             ] }),
-            /* @__PURE__ */ o("g", { fill: t, stroke: "#b05418", strokeWidth: "1", children: [
+            /* @__PURE__ */ o("g", { fill: s, stroke: "#b05418", strokeWidth: "1", children: [
               /* @__PURE__ */ e("circle", { cx: "140", cy: "180", r: "7" }),
               /* @__PURE__ */ e("rect", { x: "136", y: "170", width: "7", height: "12", rx: "3" }),
               /* @__PURE__ */ e("rect", { x: "131", y: "172", width: "7", height: "11", rx: "3" }),
@@ -1075,18 +1182,18 @@ function Ue({
     }
   );
 }
-function Ye({ collection: i, seed: r, size: l = 44, className: c = "" }) {
-  const [a, t] = ae(null);
-  return ee(() => {
-    let d = !1;
-    return t(null), Te(i, r).then((s) => {
-      d || t(s);
+function Xe({ collection: t, seed: r, size: l = 44, className: c = "" }) {
+  const [a, i] = ce(null);
+  return X(() => {
+    let s = !1;
+    return i(null), Fe(t, r).then((d) => {
+      s || i(d);
     }).catch(() => {
-      d || t(null);
+      s || i(null);
     }), () => {
-      d = !0;
+      s = !0;
     };
-  }, [i, r]), /* @__PURE__ */ e(
+  }, [t, r]), /* @__PURE__ */ e(
     "div",
     {
       className: `flex items-center justify-center overflow-hidden ${c}`,
@@ -1102,97 +1209,97 @@ function Ye({ collection: i, seed: r, size: l = 44, className: c = "" }) {
     }
   );
 }
-function He({
-  analyser: i,
+function Je({
+  analyser: t,
   state: r,
   height: l = 80,
   className: c = "",
   style: a,
-  stateColors: t
+  stateColors: i
 }) {
-  const d = O(null), s = O(null), h = O(0), p = {
-    idle: (t == null ? void 0 : t.idle) ?? "#9ca3af",
-    listening: (t == null ? void 0 : t.listening) ?? "#3b82f6",
-    thinking: (t == null ? void 0 : t.thinking) ?? "#8b5cf6",
-    speaking: (t == null ? void 0 : t.speaking) ?? "#10b981",
-    working: (t == null ? void 0 : t.working) ?? "#f59e0b"
+  const s = Z(null), d = Z(null), f = Z(0), u = {
+    idle: (i == null ? void 0 : i.idle) ?? "#9ca3af",
+    listening: (i == null ? void 0 : i.listening) ?? "#3b82f6",
+    thinking: (i == null ? void 0 : i.thinking) ?? "#8b5cf6",
+    speaking: (i == null ? void 0 : i.speaking) ?? "#10b981",
+    working: (i == null ? void 0 : i.working) ?? "#f59e0b"
   };
-  return ee(() => {
-    const g = d.current;
-    if (!g) return;
-    const n = g.getContext("2d");
+  return X(() => {
+    const p = s.current;
+    if (!p) return;
+    const n = p.getContext("2d");
     if (!n) return;
-    const _ = () => {
-      const w = window.devicePixelRatio || 1, m = g.getBoundingClientRect();
-      g.width = m.width * w, g.height = m.height * w, n.scale(w, w);
+    const B = () => {
+      const M = window.devicePixelRatio || 1, x = p.getBoundingClientRect();
+      p.width = x.width * M, p.height = x.height * M, n.scale(M, M);
     };
-    _(), window.addEventListener("resize", _);
-    let W = 0, B = new Uint8Array(0);
-    i && (i.fftSize = 128, W = i.frequencyBinCount, B = new Uint8Array(W));
-    const V = () => {
-      const w = g.width / (window.devicePixelRatio || 1), m = g.height / (window.devicePixelRatio || 1);
-      n.fillStyle = "rgba(9, 9, 11, 0.2)", n.fillRect(0, 0, w, m), h.current += 0.05;
-      const F = h.current;
-      if (r === "speaking" && i) {
-        i.getByteFrequencyData(B), n.lineWidth = 3, n.strokeStyle = p.speaking, n.shadowBlur = 15, n.shadowColor = j(p.speaking, 0.6), n.beginPath();
-        const f = w / W;
-        let k = 0;
-        for (let M = 0; M < W; M++) {
-          const y = B[M] / 255, L = m / 2 + Math.sin(M * 0.15 + F * 2) * (y * m * 0.4);
-          M === 0 ? n.moveTo(k, L) : n.lineTo(k, L), k += f;
+    B(), window.addEventListener("resize", B);
+    let F = 0, _ = new Uint8Array(0);
+    t && (t.fftSize = 128, F = t.frequencyBinCount, _ = new Uint8Array(F));
+    const U = () => {
+      const M = p.width / (window.devicePixelRatio || 1), x = p.height / (window.devicePixelRatio || 1);
+      n.fillStyle = "rgba(9, 9, 11, 0.2)", n.fillRect(0, 0, M, x), f.current += 0.05;
+      const I = f.current;
+      if (r === "speaking" && t) {
+        t.getByteFrequencyData(_), n.lineWidth = 3, n.strokeStyle = u.speaking, n.shadowBlur = 15, n.shadowColor = D(u.speaking, 0.6), n.beginPath();
+        const h = M / F;
+        let v = 0;
+        for (let N = 0; N < F; N++) {
+          const y = _[N] / 255, L = x / 2 + Math.sin(N * 0.15 + I * 2) * (y * x * 0.4);
+          N === 0 ? n.moveTo(v, L) : n.lineTo(v, L), v += h;
         }
-        n.lineTo(w, m / 2), n.stroke(), n.shadowBlur = 0;
+        n.lineTo(M, x / 2), n.stroke(), n.shadowBlur = 0;
       } else if (r === "listening") {
-        let f = 0;
-        if (i && B.length > 0) {
-          i.getByteTimeDomainData(B);
+        let h = 0;
+        if (t && _.length > 0) {
+          t.getByteTimeDomainData(_);
           let y = 0;
-          for (let L = 0; L < B.length; L++) {
-            const J = Math.abs(B[L] - 128);
+          for (let L = 0; L < _.length; L++) {
+            const J = Math.abs(_[L] - 128);
             J > y && (y = J);
           }
-          f = Math.min(1, y / 128);
+          h = Math.min(1, y / 128);
         }
-        const k = 4 + f * 36, M = 3 + f * 27;
-        n.shadowBlur = 12, n.lineWidth = 2.5, n.strokeStyle = j(p.listening, 0.7), n.shadowColor = j(p.listening, 0.4), n.beginPath();
-        for (let y = 0; y < w; y++) {
-          const L = m / 2 + Math.sin(y * 0.02 + F * 1.5) * Math.sin(y * 5e-3) * k;
+        const v = 4 + h * 36, N = 3 + h * 27;
+        n.shadowBlur = 12, n.lineWidth = 2.5, n.strokeStyle = D(u.listening, 0.7), n.shadowColor = D(u.listening, 0.4), n.beginPath();
+        for (let y = 0; y < M; y++) {
+          const L = x / 2 + Math.sin(y * 0.02 + I * 1.5) * Math.sin(y * 5e-3) * v;
           y === 0 ? n.moveTo(y, L) : n.lineTo(y, L);
         }
-        n.stroke(), n.strokeStyle = j(p.listening, 0.5), n.shadowColor = j(p.listening, 0.3), n.beginPath();
-        for (let y = 0; y < w; y++) {
-          const L = m / 2 + Math.sin(y * 0.015 - F * 1.2 + Math.PI) * Math.sin(y * 5e-3) * M;
+        n.stroke(), n.strokeStyle = D(u.listening, 0.5), n.shadowColor = D(u.listening, 0.3), n.beginPath();
+        for (let y = 0; y < M; y++) {
+          const L = x / 2 + Math.sin(y * 0.015 - I * 1.2 + Math.PI) * Math.sin(y * 5e-3) * N;
           y === 0 ? n.moveTo(y, L) : n.lineTo(y, L);
         }
         n.stroke(), n.shadowBlur = 0;
       } else if (r === "thinking") {
-        n.shadowBlur = 10, n.shadowColor = j(p.thinking, 0.4), n.lineWidth = 2, n.strokeStyle = j(p.thinking, 0.7), n.beginPath();
-        for (let f = 0; f < w; f++) {
-          const k = m / 2 + Math.sin(f * 0.03 + F) * 5 + Math.sin(f * 0.01 - F * 0.5) * 8;
-          f === 0 ? n.moveTo(f, k) : n.lineTo(f, k);
+        n.shadowBlur = 10, n.shadowColor = D(u.thinking, 0.4), n.lineWidth = 2, n.strokeStyle = D(u.thinking, 0.7), n.beginPath();
+        for (let h = 0; h < M; h++) {
+          const v = x / 2 + Math.sin(h * 0.03 + I) * 5 + Math.sin(h * 0.01 - I * 0.5) * 8;
+          h === 0 ? n.moveTo(h, v) : n.lineTo(h, v);
         }
         n.stroke(), n.shadowBlur = 0;
       } else if (r === "working") {
-        n.shadowBlur = 10, n.shadowColor = j(p.working, 0.4), n.lineWidth = 2, n.strokeStyle = j(p.working, 0.7), n.beginPath();
-        for (let f = 0; f < w; f += 8) {
-          const k = m / 2 + Math.sin(f * 0.04 + F * 2.5) * 12 + Math.cos(f * 0.01 - F) * 6, M = m / 2 + Math.round((k - m / 2) / 6) * 6;
-          f === 0 ? n.moveTo(f, M) : (n.lineTo(f, M), n.lineTo(Math.min(w, f + 8), M));
+        n.shadowBlur = 10, n.shadowColor = D(u.working, 0.4), n.lineWidth = 2, n.strokeStyle = D(u.working, 0.7), n.beginPath();
+        for (let h = 0; h < M; h += 8) {
+          const v = x / 2 + Math.sin(h * 0.04 + I * 2.5) * 12 + Math.cos(h * 0.01 - I) * 6, N = x / 2 + Math.round((v - x / 2) / 6) * 6;
+          h === 0 ? n.moveTo(h, N) : (n.lineTo(h, N), n.lineTo(Math.min(M, h + 8), N));
         }
         n.stroke(), n.shadowBlur = 0;
       } else {
-        n.lineWidth = 1.5, n.strokeStyle = j(p.idle, 0.3), n.beginPath();
-        for (let f = 0; f < w; f++) {
-          const k = m / 2 + Math.sin(f * 0.01 + F * 0.2) * 2;
-          f === 0 ? n.moveTo(f, k) : n.lineTo(f, k);
+        n.lineWidth = 1.5, n.strokeStyle = D(u.idle, 0.3), n.beginPath();
+        for (let h = 0; h < M; h++) {
+          const v = x / 2 + Math.sin(h * 0.01 + I * 0.2) * 2;
+          h === 0 ? n.moveTo(h, v) : n.lineTo(h, v);
         }
         n.stroke();
       }
-      s.current = requestAnimationFrame(V);
+      d.current = requestAnimationFrame(U);
     };
-    return V(), () => {
-      window.removeEventListener("resize", _), s.current && cancelAnimationFrame(s.current);
+    return U(), () => {
+      window.removeEventListener("resize", B), d.current && cancelAnimationFrame(d.current);
     };
-  }, [i, r, t]), /* @__PURE__ */ o("div", { className: `w-full bg-zinc-950/80 border border-zinc-800/40 rounded-xl overflow-hidden p-2 ${c}`, style: a, children: [
+  }, [t, r, i]), /* @__PURE__ */ o("div", { className: `w-full bg-zinc-950/80 border border-zinc-800/40 rounded-xl overflow-hidden p-2 ${c}`, style: a, children: [
     /* @__PURE__ */ o("div", { className: "flex justify-between items-center px-2 mb-1", children: [
       /* @__PURE__ */ e("span", { className: "text-[10px] text-zinc-500 uppercase tracking-widest font-mono font-bold", children: "Audio Waveform Telemetry" }),
       /* @__PURE__ */ o("span", { className: "flex h-2 w-2 relative", children: [
@@ -1200,14 +1307,14 @@ function He({
           "span",
           {
             className: "animate-ping absolute inline-flex h-full w-full rounded-full opacity-75",
-            style: { backgroundColor: p[r] }
+            style: { backgroundColor: u[r] }
           }
         ),
         /* @__PURE__ */ e(
           "span",
           {
             className: "relative inline-flex rounded-full h-2 w-2",
-            style: { backgroundColor: p[r] }
+            style: { backgroundColor: u[r] }
           }
         )
       ] })
@@ -1215,63 +1322,65 @@ function He({
     /* @__PURE__ */ e(
       "canvas",
       {
-        ref: d,
+        ref: s,
         className: "w-full block",
         style: { height: l }
       }
     )
   ] });
 }
-function Ke({ analyser: i, enabled: r, onFrame: l, onStop: c }) {
-  const a = O(l), t = O(c);
-  a.current = l, t.current = c, ee(() => {
-    var p;
+function et({ analyser: t, enabled: r, onFrame: l, onStop: c }) {
+  const a = Z(l), i = Z(c);
+  a.current = l, i.current = c, X(() => {
+    var u;
     if (!r) {
-      (p = t.current) == null || p.call(t);
+      (u = i.current) == null || u.call(i);
       return;
     }
-    const d = de(i);
-    let s;
-    const h = () => {
-      a.current(d.read()), s = requestAnimationFrame(h);
+    const s = de(t);
+    let d;
+    const f = () => {
+      a.current(s.read()), d = requestAnimationFrame(f);
     };
-    return s = requestAnimationFrame(h), () => {
-      var g;
-      cancelAnimationFrame(s), (g = t.current) == null || g.call(t);
+    return d = requestAnimationFrame(f), () => {
+      var p;
+      cancelAnimationFrame(d), (p = i.current) == null || p.call(i);
     };
-  }, [i, r]);
+  }, [t, r]);
 }
 export {
-  He as AudioVisualizer,
-  Ce as AvatarCaption,
+  Je as AudioVisualizer,
+  Ie as AvatarCaption,
   qe as AvatarThought,
-  ue as ContractAvatar,
-  Re as DEFAULT_DICEBEAR_COLLECTION,
-  Ee as DEFAULT_DICEBEAR_SEED,
+  pe as ContractAvatar,
+  Te as DEFAULT_DICEBEAR_COLLECTION,
+  Be as DEFAULT_DICEBEAR_SEED,
+  ve as DEFAULT_THINKING_EMOJIS,
   ye as DICEBEAR_FEATURED_FACES,
-  $e as DICEBEAR_RIGS,
-  We as DICEBEAR_STYLES,
-  Ge as DICEBEAR_STYLE_BY_ID,
-  Fe as DiceBearAvatar,
-  Ye as DiceBearThumb,
-  Qe as DoodleAvatar,
+  Ee as DICEBEAR_RIGS,
+  Re as DICEBEAR_STYLES,
+  Ye as DICEBEAR_STYLE_BY_ID,
+  _e as DiceBearAvatar,
+  Xe as DiceBearThumb,
+  $e as DoodleAvatar,
   ge as GeometricAvatar,
-  Le as MemojiAvatar,
-  Se as PixelArtAvatar,
-  Ve as RealtimeAvatar,
-  et as SPEECH_ACTIVITY_BRAND,
-  Ue as SquirrelAvatar,
+  Qe as MemojiAvatar,
+  We as PixelArtAvatar,
+  He as RealtimeAvatar,
+  rt as SPEECH_ACTIVITY_BRAND,
+  Ke as SquirrelAvatar,
+  ze as ThoughtEmojiBubble,
   fe as collectionExportName,
   de as createMouthEngine,
-  Me as createSpeechActivity,
-  tt as isSpeechActivity,
-  ke as loadDiceBear,
-  Te as renderDiceBearSvg,
-  me as scopeSvgIds,
+  Ae as createSpeechActivity,
+  lt as isSpeechActivity,
+  be as loadDiceBear,
+  Fe as renderDiceBearSvg,
+  xe as scopeSvgIds,
   we as tailWindow,
-  be as toPlainText,
-  Ke as useAudioMouth,
-  Ne as useAvatarRuntime,
-  se as useReducedMotion,
-  ze as useStreamingTextActivity
+  ke as toPlainText,
+  et as useAudioMouth,
+  Se as useAvatarRuntime,
+  oe as useReducedMotion,
+  De as useStreamingTextActivity
 };