@lofcz/orb-ui 0.7.0 → 0.7.1

package/dist/orb-ui.js

@@ -1,22 +1,22 @@
-import { useCallback as e, useEffect as t, useLayoutEffect as n, useRef as r, useState as i } from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useCallback as e, useEffect as t, useLayoutEffect as n, useMemo as r, useRef as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/components/Orb/signals.ts
-function s(e, t, n) {
+function c(e, t, n) {
 	return e ?? t?.state ?? n.state;
 }
-function c(e, t, n) {
+function l(e, t, n) {
 	return e === void 0 ? t === "listening" ? n.inputVolume ?? n.volume ?? 0 : t === "speaking" ? n.outputVolume ?? n.volume ?? 0 : n.volume ?? 0 : e;
 }
 //#endregion
 //#region src/themes/debug/DebugTheme.tsx
-var l = [
+var u = [
 	"idle",
 	"connecting",
 	"listening",
 	"thinking",
 	"speaking",
 	"error"
-], u = {
+], d = {
 	idle: "#888",
 	connecting: "#f0c040",
 	listening: "#40c0f0",
@@ -24,8 +24,8 @@ var l = [
 	speaking: "#40f080",
 	error: "#f04040"
 };
-function d({ state: e, volume: t, size: n, className: r, style: i, disabled: s = !1, onStart: c, onStop: d, ...f }) {
-	return /* @__PURE__ */ o("div", {
+function f({ state: e, volume: t, size: n, className: r, style: i, disabled: a = !1, onStart: c, onStop: l, ...f }) {
+	return /* @__PURE__ */ s("div", {
 		...f,
 		className: r,
 		style: {
@@ -42,7 +42,7 @@ function d({ state: e, volume: t, size: n, className: r, style: i, disabled: s =
 			...i
 		},
 		children: [
-			/* @__PURE__ */ a("div", {
+			/* @__PURE__ */ o("div", {
 				style: {
 					color: "#555",
 					marginBottom: 10,
@@ -51,31 +51,31 @@ function d({ state: e, volume: t, size: n, className: r, style: i, disabled: s =
 				},
 				children: "ORB DEBUG"
 			}),
-			/* @__PURE__ */ o("div", {
+			/* @__PURE__ */ s("div", {
 				style: { marginBottom: 8 },
-				children: [/* @__PURE__ */ a("span", {
+				children: [/* @__PURE__ */ o("span", {
 					style: { color: "#555" },
 					children: "state "
-				}), /* @__PURE__ */ a("span", {
+				}), /* @__PURE__ */ o("span", {
 					style: {
-						color: u[e],
+						color: d[e],
 						fontWeight: "bold"
 					},
 					children: e
 				})]
 			}),
-			/* @__PURE__ */ o("div", {
+			/* @__PURE__ */ s("div", {
 				style: { marginBottom: 10 },
 				children: [
-					/* @__PURE__ */ a("span", {
+					/* @__PURE__ */ o("span", {
 						style: { color: "#555" },
 						children: "volume "
 					}),
-					/* @__PURE__ */ a("span", {
+					/* @__PURE__ */ o("span", {
 						style: { color: "#ccc" },
 						children: t.toFixed(2)
 					}),
-					/* @__PURE__ */ a("div", {
+					/* @__PURE__ */ o("div", {
 						style: {
 							marginTop: 4,
 							height: 4,
@@ -83,41 +83,41 @@ function d({ state: e, volume: t, size: n, className: r, style: i, disabled: s =
 							borderRadius: 2,
 							overflow: "hidden"
 						},
-						children: /* @__PURE__ */ a("div", { style: {
+						children: /* @__PURE__ */ o("div", { style: {
 							height: "100%",
 							width: `${t * 100}%`,
-							background: u[e],
+							background: d[e],
 							borderRadius: 2,
 							transition: "width 50ms linear"
 						} })
 					})
 				]
 			}),
-			/* @__PURE__ */ o("div", {
+			/* @__PURE__ */ s("div", {
 				style: { marginBottom: 10 },
-				children: [/* @__PURE__ */ a("div", {
+				children: [/* @__PURE__ */ o("div", {
 					style: {
 						color: "#555",
 						marginBottom: 4,
 						fontSize: 10
 					},
 					children: "force state"
-				}), /* @__PURE__ */ a("div", {
+				}), /* @__PURE__ */ o("div", {
 					style: {
 						display: "flex",
 						flexWrap: "wrap",
 						gap: 4
 					},
-					children: l.map((t) => /* @__PURE__ */ a("button", {
-						disabled: s,
+					children: u.map((t) => /* @__PURE__ */ o("button", {
+						disabled: a,
 						style: {
 							fontSize: 10,
 							padding: "2px 6px",
-							background: e === t ? u[t] : "#222",
+							background: e === t ? d[t] : "#222",
 							color: e === t ? "#000" : "#888",
-							border: `1px solid ${e === t ? u[t] : "#333"}`,
+							border: `1px solid ${e === t ? d[t] : "#333"}`,
 							borderRadius: 3,
-							cursor: s ? "not-allowed" : "pointer"
+							cursor: a ? "not-allowed" : "pointer"
 						},
 						onClick: () => {
 							console.warn(`[orb-ui debug] To force state '${t}', use controlled mode: <Orb state="${t}" />`);
@@ -126,13 +126,13 @@ function d({ state: e, volume: t, size: n, className: r, style: i, disabled: s =
 					}, t))
 				})]
 			}),
-			/* @__PURE__ */ o("div", {
+			/* @__PURE__ */ s("div", {
 				style: {
 					display: "flex",
 					gap: 6
 				},
-				children: [/* @__PURE__ */ a("button", {
-					disabled: s,
+				children: [/* @__PURE__ */ o("button", {
+					disabled: a,
 					onClick: c,
 					style: {
 						flex: 1,
@@ -141,13 +141,13 @@ function d({ state: e, volume: t, size: n, className: r, style: i, disabled: s =
 						color: "#40f080",
 						border: "1px solid #40f080",
 						borderRadius: 4,
-						cursor: s ? "not-allowed" : "pointer",
+						cursor: a ? "not-allowed" : "pointer",
 						fontSize: 11
 					},
 					children: "Start"
-				}), /* @__PURE__ */ a("button", {
-					disabled: s,
-					onClick: d,
+				}), /* @__PURE__ */ o("button", {
+					disabled: a,
+					onClick: l,
 					style: {
 						flex: 1,
 						padding: "4px 0",
@@ -155,7 +155,7 @@ function d({ state: e, volume: t, size: n, className: r, style: i, disabled: s =
 						color: "#f04040",
 						border: "1px solid #f04040",
 						borderRadius: 4,
-						cursor: s ? "not-allowed" : "pointer",
+						cursor: a ? "not-allowed" : "pointer",
 						fontSize: 11
 					},
 					children: "Stop"
@@ -166,55 +166,55 @@ function d({ state: e, volume: t, size: n, className: r, style: i, disabled: s =
 }
 //#endregion
 //#region src/themes/circle/CircleTheme.tsx
-var f = typeof window < "u" ? n : t;
-function p(e) {
+var p = typeof window < "u" ? n : t;
+function m(e) {
 	return [
 		parseInt(e.slice(1, 3), 16),
 		parseInt(e.slice(3, 5), 16),
 		parseInt(e.slice(5, 7), 16)
 	];
 }
-var m = {
+var h = {
 	idle: "#cccccc",
 	connecting: "#cccccc",
 	listening: "#999999",
 	thinking: "#d8d8d8",
 	speaking: "#e8e8e8",
 	error: "#f87171"
-}, h = "\n@keyframes orb-circle-idle-pulse {\n  from { transform: scale(1); }\n  to   { transform: scale(1.06); }\n}\n@keyframes orb-circle-connecting-pulse {\n  0%   { opacity: 1; transform: scale(1); }\n  50%  { opacity: 0.6; transform: scale(0.95); }\n  100% { opacity: 1; transform: scale(1); }\n}\n", g = .95, _ = .08, v = .82, y = .18, b = 24, x = 0, S = .55, C = .12, w = .002;
-function T({ state: e, volume: n, size: i, className: s, style: c, disabled: l = !1, interactive: u = !1, onClick: d, ...T }) {
-	let E = r(null), D = r(null), O = r(null), k = r(0), A = r(n);
-	f(() => {
+}, g = "\n@keyframes orb-circle-idle-pulse {\n  from { transform: scale(1); }\n  to   { transform: scale(1.06); }\n}\n@keyframes orb-circle-connecting-pulse {\n  0%   { opacity: 1; transform: scale(1); }\n  50%  { opacity: 0.6; transform: scale(0.95); }\n  100% { opacity: 1; transform: scale(1); }\n}\n", _ = .95, v = .08, y = .82, b = .18, x = 24, S = 0, C = .55, w = .12, T = .002;
+function E({ state: e, volume: n, size: r, className: a, style: c, disabled: l = !1, interactive: u = !1, onClick: d, ...f }) {
+	let E = i(null), D = i(null), O = i(null), k = i(0), A = i(n);
+	p(() => {
 		A.current = n;
 	}, [n]);
-	let j = r(1), M = r(0), N = r(p(m.idle)), P = .06, F = r(v), I = r(y);
+	let j = i(1), M = i(0), N = i(m(h.idle)), P = .06, F = i(y), I = i(b);
 	t(() => {
 		let e = "orb-circle-keyframes";
 		if (!document.getElementById(e)) {
 			let t = document.createElement("style");
-			t.id = e, t.textContent = h, document.head.appendChild(t);
+			t.id = e, t.textContent = g, document.head.appendChild(t);
 		}
 	}, []), t(() => {
 		let t = E.current;
 		if (t) {
 			if (e === "listening" || e === "speaking") {
-				let n = e === "speaking" ? g : v, r = e === "speaking" ? _ : y, i = e === "speaking" ? b : x, a = () => {
+				let n = e === "speaking" ? _ : y, r = e === "speaking" ? v : b, i = e === "speaking" ? x : S, a = () => {
 					let o = A.current;
 					F.current += (n - F.current) * P, I.current += (r - I.current) * P;
 					let s = F.current + o * I.current, c = o * i;
-					e === "listening" ? (j.current += (s - j.current) * S, M.current += (c - M.current) * S) : (j.current = s, M.current = c);
-					let l = p(m[e]), [u, d, f] = N.current;
+					e === "listening" ? (j.current += (s - j.current) * C, M.current += (c - M.current) * C) : (j.current = s, M.current = c);
+					let l = m(h[e]), [u, d, f] = N.current;
 					N.current = [
 						u + (l[0] - u) * .05,
 						d + (l[1] - d) * .05,
 						f + (l[2] - f) * .05
 					];
-					let [h, g, _] = N.current.map(Math.round);
-					t.style.transform = `scale(${j.current})`, t.style.background = `rgb(${h},${g},${_})`, t.style.boxShadow = "none", t.style.animation = "none";
+					let [p, g, _] = N.current.map(Math.round);
+					t.style.transform = `scale(${j.current})`, t.style.background = `rgb(${p},${g},${_})`, t.style.boxShadow = "none", t.style.animation = "none";
 					let v = D.current;
 					if (v) {
 						let e = M.current;
-						v.style.transform = `scale(${j.current})`, v.style.boxShadow = e > .5 ? `0 0 ${e}px ${e * .4}px rgb(${h},${g},${_})` : "none";
+						v.style.transform = `scale(${j.current})`, v.style.boxShadow = e > .5 ? `0 0 ${e}px ${e * .4}px rgb(${p},${g},${_})` : "none";
 					}
 					k.current = requestAnimationFrame(a);
 				};
@@ -224,17 +224,17 @@ function T({ state: e, volume: n, size: i, className: s, style: c, disabled: l =
 			}
 			{
 				cancelAnimationFrame(k.current);
-				let n = m[e] ?? m.idle, r = p(n), i = () => {
-					j.current += (1 - j.current) * C, M.current += (0 - M.current) * C;
+				let n = h[e] ?? h.idle, r = m(n), i = () => {
+					j.current += (1 - j.current) * w, M.current += (0 - M.current) * w;
 					let [a, o, s] = N.current;
 					N.current = [
-						a + (r[0] - a) * C,
-						o + (r[1] - o) * C,
-						s + (r[2] - s) * C
+						a + (r[0] - a) * w,
+						o + (r[1] - o) * w,
+						s + (r[2] - s) * w
 					];
 					let [c, l, u] = N.current.map(Math.round);
 					t.style.transform = `scale(${j.current})`, t.style.background = `rgb(${c},${l},${u})`, t.style.boxShadow = "none", t.style.animation = "none", D.current && (D.current.style.transform = `scale(${j.current})`, D.current.style.boxShadow = "none");
-					let d = Math.abs(j.current - 1) < w, f = M.current < .1, p = N.current.every((e, t) => Math.abs(e - r[t]) < 1);
+					let d = Math.abs(j.current - 1) < T, f = M.current < .1, p = N.current.every((e, t) => Math.abs(e - r[t]) < 1);
 					if (d && f && p) {
 						j.current = 1, M.current = 0, N.current = r, t.style.transform = "", t.style.boxShadow = "none", t.style.background = n, D.current && (D.current.style.transform = "scale(1)", D.current.style.boxShadow = "none"), e === "idle" ? t.style.animation = "orb-circle-idle-pulse 3s ease-in-out infinite alternate" : e === "connecting" || e === "thinking" ? t.style.animation = "orb-circle-connecting-pulse 1.5s ease-in-out infinite" : t.style.animation = "none";
 						return;
@@ -245,15 +245,15 @@ function T({ state: e, volume: n, size: i, className: s, style: c, disabled: l =
 			}
 		}
 	}, [e]);
-	let L = i * .55, R = {
-		width: i,
-		height: i,
+	let L = r * .55, R = {
+		width: r,
+		height: r,
 		display: "flex",
 		alignItems: "center",
 		justifyContent: "center",
 		position: "relative",
 		...c
-	}, z = /* @__PURE__ */ o("span", {
+	}, z = /* @__PURE__ */ s("span", {
 		ref: O,
 		onMouseEnter: () => {
 			O.current && u && !l && (O.current.style.transform = "scale(1.06)", O.current.style.filter = "brightness(1.12)");
@@ -274,7 +274,7 @@ function T({ state: e, volume: n, size: i, className: s, style: c, disabled: l =
 			borderRadius: "50%",
 			lineHeight: 0
 		},
-		children: [/* @__PURE__ */ a("span", {
+		children: [/* @__PURE__ */ o("span", {
 			ref: D,
 			style: {
 				position: "absolute",
@@ -284,7 +284,7 @@ function T({ state: e, volume: n, size: i, className: s, style: c, disabled: l =
 				borderRadius: "50%",
 				pointerEvents: "none"
 			}
-		}), /* @__PURE__ */ a("span", {
+		}), /* @__PURE__ */ o("span", {
 			ref: E,
 			style: {
 				position: "relative",
@@ -292,14 +292,14 @@ function T({ state: e, volume: n, size: i, className: s, style: c, disabled: l =
 				width: L,
 				height: L,
 				borderRadius: "50%",
-				background: m[e]
+				background: h[e]
 			}
 		})]
 	});
-	return u ? /* @__PURE__ */ a("button", {
-		...T,
+	return u ? /* @__PURE__ */ o("button", {
+		...f,
 		type: "button",
-		className: s,
+		className: a,
 		disabled: l,
 		onClick: l ? void 0 : d,
 		style: {
@@ -315,16 +315,16 @@ function T({ state: e, volume: n, size: i, className: s, style: c, disabled: l =
 			...R
 		},
 		children: z
-	}) : /* @__PURE__ */ a("div", {
-		...T,
-		className: s,
+	}) : /* @__PURE__ */ o("div", {
+		...f,
+		className: a,
 		style: R,
 		children: z
 	});
 }
 //#endregion
 //#region src/themes/bars/BarsTheme.tsx
-var E = 5, D = 1.4, O = Math.PI * 2 / E, k = {
+var D = 5, O = 1.4, k = Math.PI * 2 / D, A = {
 	idle: "#cccccc",
 	connecting: "#cccccc",
 	listening: "#999999",
@@ -332,33 +332,33 @@ var E = 5, D = 1.4, O = Math.PI * 2 / E, k = {
 	speaking: "#e8e8e8",
 	error: "#f87171"
 };
-function A(e) {
+function j(e) {
 	return [
 		parseInt(e.slice(1, 3), 16),
 		parseInt(e.slice(3, 5), 16),
 		parseInt(e.slice(5, 7), 16)
 	];
 }
-function j({ state: e, volume: n, size: i, className: o, style: s, disabled: c = !1, interactive: l = !1, onClick: u, ...d }) {
-	let f = r([]), p = r(null), m = r(0), h = r(Array(E).fill(0)), g = r(n), _ = r(!1), v = r(0), y = r(A(k.idle)), b = r(null), x = r(Array(E).fill(0)), S = r(e);
+function M({ state: e, volume: n, size: r, className: a, style: s, disabled: c = !1, interactive: l = !1, onClick: u, ...d }) {
+	let f = i([]), p = i(null), m = i(0), h = i(Array(D).fill(0)), g = i(n), _ = i(!1), v = i(0), y = i(j(A.idle)), b = i(null), x = i(Array(D).fill(0)), S = i(e);
 	t(() => {
 		e !== S.current && (x.current = [...h.current], b.current = Date.now(), S.current = e);
 	}, [e]), t(() => {
 		g.current = n;
 	}, [n]), t(() => {
-		let t = i * .55, n = i * .06, r = k[e] ?? k.idle, a = i * .1, o = Array.from({ length: E }, (e, t) => 1 - .7 * (Math.abs(t - 2) / 2)), s = () => {
+		let t = r * .55, n = r * .06, i = A[e] ?? A.idle, a = r * .1, o = Array.from({ length: D }, (e, t) => 1 - .7 * (Math.abs(t - 2) / 2)), s = () => {
 			let e = l && !c, t = _.current && e ? a : 0;
 			v.current += (t - v.current) * .15;
 		}, u = (n, r) => {
 			s();
-			let i = A(r), [a, c, l] = y.current;
+			let i = j(r), [a, c, l] = y.current;
 			y.current = [
 				a + (i[0] - a) * .08,
 				c + (i[1] - c) * .08,
 				l + (i[2] - l) * .08
 			];
 			let [u, d, p] = y.current.map(Math.round), m = `rgb(${u},${d},${p})`;
-			for (let r = 0; r < E; r++) {
+			for (let r = 0; r < D; r++) {
 				let i = f.current[r];
 				if (!i) continue;
 				let a = e === "idle" ? o[r] : 1, s = v.current * a;
@@ -366,50 +366,50 @@ function j({ state: e, volume: n, size: i, className: o, style: s, disabled: c =
 			}
 		};
 		if (e === "listening" || e === "speaking") {
-			let i = e === "speaking" ? 1 : .4, a = () => {
+			let r = e === "speaking" ? 1 : .4, a = () => {
 				let o = g.current, s = Date.now() / 1e3;
-				for (let r = 0; r < E; r++) {
-					let a = .5 + .15 * Math.sin(s * D * i * Math.PI * 2 + r * O), c = n + (t - n) * o * a;
+				for (let i = 0; i < D; i++) {
+					let a = .5 + .15 * Math.sin(s * O * r * Math.PI * 2 + i * k), c = n + (t - n) * o * a;
 					if (b.current !== null) {
 						let e = Date.now() - b.current, t = Math.min(e / 300, 1), n = 1 - (1 - t) * (1 - t);
-						c = x.current[r] + (c - x.current[r]) * n, t >= 1 && (b.current = null);
+						c = x.current[i] + (c - x.current[i]) * n, t >= 1 && (b.current = null);
 					}
 					let l = e === "listening" ? .45 : 1;
-					h.current[r] += (c - h.current[r]) * l;
+					h.current[i] += (c - h.current[i]) * l;
 				}
-				u(h.current, r), m.current = requestAnimationFrame(a);
+				u(h.current, i), m.current = requestAnimationFrame(a);
 			};
 			return m.current = requestAnimationFrame(a), () => cancelAnimationFrame(m.current);
 		}
 		if (e === "connecting" || e === "thinking") {
-			let e = Date.now(), i = () => {
+			let e = Date.now(), r = () => {
 				let a = (Date.now() - e) / 1e3;
 				s();
-				for (let e = 0; e < E; e++) {
-					let r = (a * .6 + e / E * .5) % 1, i = r < .5 ? Math.sin(r / .5 * Math.PI) : 0, o = n + (t * .4 - n) * i;
+				for (let e = 0; e < D; e++) {
+					let r = (a * .6 + e / D * .5) % 1, i = r < .5 ? Math.sin(r / .5 * Math.PI) : 0, o = n + (t * .4 - n) * i;
 					h.current[e] += (o - h.current[e]) * .15;
 				}
-				u(h.current, r), m.current = requestAnimationFrame(i);
+				u(h.current, i), m.current = requestAnimationFrame(r);
 			};
-			return m.current = requestAnimationFrame(i), () => cancelAnimationFrame(m.current);
+			return m.current = requestAnimationFrame(r), () => cancelAnimationFrame(m.current);
 		}
 		cancelAnimationFrame(m.current);
 		let d = () => {
 			s();
-			for (let e = 0; e < E; e++) h.current[e] += (n - h.current[e]) * .16;
-			u(h.current, r), m.current = requestAnimationFrame(d);
+			for (let e = 0; e < D; e++) h.current[e] += (n - h.current[e]) * .16;
+			u(h.current, i), m.current = requestAnimationFrame(d);
 		};
 		return m.current = requestAnimationFrame(d), () => cancelAnimationFrame(m.current);
-	}, [e, i]);
-	let C = i * .055, w = i * .035, T = i * .03, j = i * .55, M = i * .06, N = {
-		width: i,
-		height: i,
+	}, [e, r]);
+	let C = r * .055, w = r * .035, T = r * .03, E = r * .55, M = r * .06, N = {
+		width: r,
+		height: r,
 		display: "flex",
 		alignItems: "center",
 		justifyContent: "center",
 		position: "relative",
 		...s
-	}, P = /* @__PURE__ */ a("span", {
+	}, P = /* @__PURE__ */ o("span", {
 		ref: p,
 		onMouseEnter: () => {
 			l && !c && (_.current = !0, p.current && (p.current.style.filter = "brightness(1.35)"));
@@ -430,24 +430,24 @@ function j({ state: e, volume: n, size: i, className: o, style: s, disabled: c =
 			transition: "filter 0.3s ease",
 			cursor: l ? c ? "not-allowed" : "pointer" : "default"
 		},
-		children: Array.from({ length: E }, (t, n) => /* @__PURE__ */ a("span", {
+		children: Array.from({ length: D }, (t, n) => /* @__PURE__ */ o("span", {
 			ref: (e) => {
 				f.current[n] = e;
 			},
 			style: {
 				width: C,
 				minHeight: M,
-				maxHeight: j,
+				maxHeight: E,
 				height: M,
 				borderRadius: T,
-				background: k[e] ?? k.idle
+				background: A[e] ?? A.idle
 			}
 		}, n))
 	});
-	return l ? /* @__PURE__ */ a("button", {
+	return l ? /* @__PURE__ */ o("button", {
 		...d,
 		type: "button",
-		className: o,
+		className: a,
 		disabled: c,
 		onClick: c ? void 0 : u,
 		style: {
@@ -463,36 +463,36 @@ function j({ state: e, volume: n, size: i, className: o, style: s, disabled: c =
 			...N
 		},
 		children: P
-	}) : /* @__PURE__ */ a("div", {
+	}) : /* @__PURE__ */ o("div", {
 		...d,
-		className: o,
+		className: a,
 		style: N,
 		children: P
 	});
 }
 //#endregion
 //#region src/themes/cloud/CloudTheme.tsx
-var M = typeof window < "u" ? n : t, N = "\nattribute vec2 a_position;\n\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n", P = "\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_activity;\n\nfloat hash(vec2 p) {\n  p = fract(p * vec2(123.34, 456.21));\n  p += dot(p, p + 45.32);\n  return fract(p.x * p.y);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n\n  return mix(\n    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),\n    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),\n    u.y\n  );\n}\n\nfloat fbm(vec2 p) {\n  float value = 0.0;\n  float amplitude = 0.52;\n  mat2 rotation = mat2(0.80, 0.60, -0.60, 0.80);\n\n  for (int octave = 0; octave < 5; octave++) {\n    value += amplitude * noise(p);\n    p = rotation * p * 1.92 + vec2(9.7, 4.3);\n    amplitude *= 0.5;\n  }\n\n  return value;\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec2 centered = uv - 0.5;\n  float radius = length(centered);\n  float edge = 1.0 - smoothstep(0.488, 0.5, radius);\n\n  if (edge <= 0.0) discard;\n\n  vec2 p = centered * 2.0;\n  float t = u_time;\n\n  vec2 warp = vec2(\n    fbm(p * 1.02 + vec2(t * 0.34, -t * 0.24)),\n    fbm(p * 1.08 + vec2(-t * 0.27, t * 0.32) + vec2(6.7, 2.9))\n  );\n  vec2 curl = vec2(\n    sin(p.y * 2.4 + t * 0.68 + warp.y * 3.2),\n    cos(p.x * 2.1 - t * 0.61 + warp.x * 3.0)\n  );\n  vec2 warped =\n    p +\n    (warp - 0.5) * (1.18 + u_activity * 0.38) +\n    curl * (0.035 + u_activity * 0.07);\n  float broad = fbm(warped * 0.92 + vec2(t * 0.14, -t * 0.18));\n  float folded = fbm(warped * 1.66 + vec2(-t * 0.23, t * 0.19) + 5.2);\n  float field = mix(broad, folded, 0.3 + u_activity * 0.14);\n\n  float horizon =\n    0.46 +\n    0.08 * sin((uv.x + warp.x * 0.2) * 5.4 + t * 0.42) +\n    0.16 * (broad - 0.5);\n  float upper = smoothstep(horizon - 0.12, horizon + 0.08, uv.y);\n  float band = exp(-pow((uv.y - horizon) * (5.2 + u_activity * 0.8), 2.0));\n  float cloud = smoothstep(0.24, 0.79, field);\n\n  vec3 deepPeriwinkle = vec3(0.36, 0.39, 0.985);\n  vec3 upperPeriwinkle = vec3(0.48, 0.56, 0.985);\n  vec3 lowerLavender = vec3(0.72, 0.78, 0.975);\n  vec3 milk = vec3(0.89, 0.92, 0.995);\n\n  vec3 color = mix(lowerLavender, upperPeriwinkle, upper);\n  float upperDepth = upper * (0.14 + smoothstep(0.42, 0.78, folded) * 0.5);\n  color = mix(color, deepPeriwinkle, upperDepth);\n\n  float milkAmount = clamp(band * (0.42 + cloud * 0.62), 0.0, 0.88);\n  color = mix(color, milk, milkAmount);\n\n  float lowerMist = (1.0 - upper) * smoothstep(0.58, 0.9, broad) * 0.18;\n  color = mix(color, milk, lowerMist);\n\n  float grain = (noise(gl_FragCoord.xy * 0.64) - 0.5) / 255.0;\n  color += grain;\n\n  gl_FragColor = vec4(color, edge);\n}\n", F = .55, I = .204, L = .2145, R = .063, z = "#5659dc", ee = 1.178, B = 180, V = 300, H = 1350, te = 246, U = 420, ne = 354, re = 480;
-function W(e, t = 0, n = 1) {
+var N = typeof window < "u" ? n : t, P = "\nattribute vec2 a_position;\n\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n", F = "\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_activity;\n\nfloat hash(vec2 p) {\n  p = fract(p * vec2(123.34, 456.21));\n  p += dot(p, p + 45.32);\n  return fract(p.x * p.y);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n\n  return mix(\n    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),\n    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),\n    u.y\n  );\n}\n\nfloat fbm(vec2 p) {\n  float value = 0.0;\n  float amplitude = 0.52;\n  mat2 rotation = mat2(0.80, 0.60, -0.60, 0.80);\n\n  for (int octave = 0; octave < 5; octave++) {\n    value += amplitude * noise(p);\n    p = rotation * p * 1.92 + vec2(9.7, 4.3);\n    amplitude *= 0.5;\n  }\n\n  return value;\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec2 centered = uv - 0.5;\n  float radius = length(centered);\n  float edge = 1.0 - smoothstep(0.488, 0.5, radius);\n\n  if (edge <= 0.0) discard;\n\n  vec2 p = centered * 2.0;\n  float t = u_time;\n\n  vec2 warp = vec2(\n    fbm(p * 1.02 + vec2(t * 0.34, -t * 0.24)),\n    fbm(p * 1.08 + vec2(-t * 0.27, t * 0.32) + vec2(6.7, 2.9))\n  );\n  vec2 curl = vec2(\n    sin(p.y * 2.4 + t * 0.68 + warp.y * 3.2),\n    cos(p.x * 2.1 - t * 0.61 + warp.x * 3.0)\n  );\n  vec2 warped =\n    p +\n    (warp - 0.5) * (1.18 + u_activity * 0.38) +\n    curl * (0.035 + u_activity * 0.07);\n  float broad = fbm(warped * 0.92 + vec2(t * 0.14, -t * 0.18));\n  float folded = fbm(warped * 1.66 + vec2(-t * 0.23, t * 0.19) + 5.2);\n  float field = mix(broad, folded, 0.3 + u_activity * 0.14);\n\n  float horizon =\n    0.46 +\n    0.08 * sin((uv.x + warp.x * 0.2) * 5.4 + t * 0.42) +\n    0.16 * (broad - 0.5);\n  float upper = smoothstep(horizon - 0.12, horizon + 0.08, uv.y);\n  float band = exp(-pow((uv.y - horizon) * (5.2 + u_activity * 0.8), 2.0));\n  float cloud = smoothstep(0.24, 0.79, field);\n\n  vec3 deepPeriwinkle = vec3(0.36, 0.39, 0.985);\n  vec3 upperPeriwinkle = vec3(0.48, 0.56, 0.985);\n  vec3 lowerLavender = vec3(0.72, 0.78, 0.975);\n  vec3 milk = vec3(0.89, 0.92, 0.995);\n\n  vec3 color = mix(lowerLavender, upperPeriwinkle, upper);\n  float upperDepth = upper * (0.14 + smoothstep(0.42, 0.78, folded) * 0.5);\n  color = mix(color, deepPeriwinkle, upperDepth);\n\n  float milkAmount = clamp(band * (0.42 + cloud * 0.62), 0.0, 0.88);\n  color = mix(color, milk, milkAmount);\n\n  float lowerMist = (1.0 - upper) * smoothstep(0.58, 0.9, broad) * 0.18;\n  color = mix(color, milk, lowerMist);\n\n  float grain = (noise(gl_FragCoord.xy * 0.64) - 0.5) / 255.0;\n  color += grain;\n\n  gl_FragColor = vec4(color, edge);\n}\n", I = .55, L = .204, R = .2145, z = .063, B = "#5659dc", V = 1.178, H = 180, U = 300, W = 1350, ee = 246, te = 420, ne = 354, re = 480;
+function G(e, t = 0, n = 1) {
 	return Math.min(n, Math.max(t, e));
 }
-function G(e, t, n, r) {
+function K(e, t, n, r) {
 	return e + (t - e) * (1 - Math.exp(-n * r));
 }
 function ie(e) {
 	return 1 - (1 - e) ** 3;
 }
-function K(e, t, n) {
+function q(e, t, n) {
 	return e + (t - e) * n;
 }
-function q(e, t, n) {
-	let r = W((e - t) / (n - t));
+function J(e, t, n) {
+	let r = G((e - t) / (n - t));
 	return r * r * (3 - 2 * r);
 }
-function J(e) {
+function Y(e) {
 	return e === "listening" || e === "speaking" || e === "thinking";
 }
-function Y(e, t, n) {
+function X(e, t, n) {
 	let r = e.createShader(t);
 	if (r) {
 		if (e.shaderSource(r, n), e.compileShader(r), !e.getShaderParameter(r, e.COMPILE_STATUS)) {
@@ -509,7 +509,7 @@ function ae(e, t) {
 		premultipliedAlpha: !0
 	});
 	if (!n) return;
-	let r = Y(n, n.VERTEX_SHADER, N), i = Y(n, n.FRAGMENT_SHADER, P);
+	let r = X(n, n.VERTEX_SHADER, P), i = X(n, n.FRAGMENT_SHADER, F);
 	if (!r || !i) {
 		r && n.deleteShader(r), i && n.deleteShader(i);
 		return;
@@ -552,21 +552,21 @@ function ae(e, t) {
 	};
 }
 function oe(e) {
-	if (e <= B) return R;
-	if (e <= 480) return K(R, ee, ie((e - B) / V));
-	let t = e - B - V;
-	return t >= H ? 1 : 1 + .17799999999999994 * (1 - W(t / H)) ** 2;
+	if (e <= H) return z;
+	if (e <= 480) return q(z, V, ie((e - H) / U));
+	let t = e - H - U;
+	return t >= W ? 1 : 1 + .17799999999999994 * (1 - G(t / W)) ** 2;
 }
-function se({ state: e, volume: n, size: i, className: s, style: c, disabled: l = !1, interactive: u = !1, onClick: d, ...f }) {
-	let p = r(null), m = r(null), h = r(null), g = r(e), _ = r(n), v = r(u), y = r(!1);
-	M(() => {
+function se({ state: e, volume: n, size: r, className: a, style: c, disabled: l = !1, interactive: u = !1, onClick: d, ...f }) {
+	let p = i(null), m = i(null), h = i(null), g = i(e), _ = i(n), v = i(u), y = i(!1);
+	N(() => {
 		g.current = e, _.current = n, v.current = u;
 	}, [
 		u,
 		e,
 		n
 	]);
-	let b = i * F;
+	let b = r * I;
 	t(() => {
 		let e = p.current, t = m.current, n = h.current;
 		if (!e || !t || !n) return;
@@ -576,30 +576,30 @@ function se({ state: e, volume: n, size: i, className: s, style: c, disabled: l
 		i(), r.addEventListener("change", i);
 		let a = ae(e, b);
 		a || (e.style.background = "linear-gradient(180deg, #626afb 2%, #8f9dfb 32%, #dde6fd 52%, #c9d3fb 84%)");
-		let o = 0, s = performance.now(), c = g.current, l = J(c) ? s : void 0, u = W(_.current), d = 1, f = +!!J(c), x = 1, S = +(c === "connecting"), C = 0, w = (r) => {
+		let o = 0, s = performance.now(), c = g.current, l = Y(c) ? s : void 0, u = G(_.current), d = 1, f = +!!Y(c), x = 1, S = +(c === "connecting"), C = 0, w = (r) => {
 			let i = Math.min((r - s) / 1e3, .05);
 			s = r;
 			let p = g.current, m = y.current;
-			p !== c && (J(p) && !J(c) && (l = r), (p === "idle" || p === "error") && (l = void 0), c = p);
-			let h = W(_.current);
-			u = m ? 0 : G(u, h, h > u ? 11 : 6, i);
+			p !== c && (Y(p) && !Y(c) && (l = r), (p === "idle" || p === "error") && (l = void 0), c = p);
+			let h = G(_.current);
+			u = m ? 0 : K(u, h, h > u ? 11 : 6, i);
 			let b = 1;
-			p === "listening" && (b = 1 - u * I), p === "speaking" && (b = 1 + u * L);
+			p === "listening" && (b = 1 - u * L), p === "speaking" && (b = 1 + u * R);
 			let T = Math.abs(b - 1) > Math.abs(d - 1) ? 12 : 6;
-			d = m ? 1 : G(d, b, T, i);
-			let E = J(p), D = p === "idle" && v.current, O = E || D ? 1 : 0;
-			f = m ? O : G(f, O, 14, i);
+			d = m ? 1 : K(d, b, T, i);
+			let E = Y(p), D = p === "idle" && v.current, O = E || D ? 1 : 0;
+			f = m ? O : K(f, O, 14, i);
 			let k = E || D ? 1 : .92;
-			x = m ? k : G(x, k, 12, i);
+			x = m ? k : K(x, k, 12, i);
 			let A = d * x;
-			D && (A = R);
+			D && (A = z);
 			let j = +!D, M = D ? f : 0;
 			if (E && l !== void 0 && !m) {
-				let e = r - l, t = oe(e), n = W((e - B - V) / H);
-				A = t * K(1, d, n), j = q(e, te, U), M = f * (1 - q(e, ne, re)), e >= 1830 && (l = void 0);
+				let e = r - l, t = oe(e), n = G((e - H - U) / W);
+				A = t * q(1, d, n), j = J(e, ee, te), M = f * (1 - J(e, ne, re)), e >= 1830 && (l = void 0);
 			}
 			let N = +(p === "connecting");
-			S = m ? N : G(S, N, 18, i), e.style.opacity = String(f * j), e.style.transform = `scale(${A})`, t.style.opacity = String(M), t.style.transform = `scale(${A})`, n.style.opacity = String(S), n.style.transform = `rotate(${m ? 45 : r * .34}deg)`;
+			S = m ? N : K(S, N, 18, i), e.style.opacity = String(f * j), e.style.transform = `scale(${A})`, t.style.opacity = String(M), t.style.transform = `scale(${A})`, n.style.opacity = String(S), n.style.transform = `rotate(${m ? 45 : r * .34}deg)`;
 			let P = .24, F = .1;
 			p === "listening" ? (P = .72 + u * .78, F = .28 + u * .32) : p === "speaking" && (P = 1.65 + u * 1.55, F = .66 + u * .34), m || (C += i * P), a?.draw(C, F), o = requestAnimationFrame(w);
 		};
@@ -608,14 +608,14 @@ function se({ state: e, volume: n, size: i, className: s, style: c, disabled: l
 		};
 	}, [b]);
 	let x = {
-		width: i,
-		height: i,
+		width: r,
+		height: r,
 		display: "flex",
 		alignItems: "center",
 		justifyContent: "center",
 		position: "relative",
 		...c
-	}, S = /* @__PURE__ */ o("span", {
+	}, S = /* @__PURE__ */ s("span", {
 		style: {
 			position: "relative",
 			display: "block",
@@ -626,7 +626,7 @@ function se({ state: e, volume: n, size: i, className: s, style: c, disabled: l
 			cursor: u ? l ? "not-allowed" : "pointer" : "default"
 		},
 		children: [
-			/* @__PURE__ */ a("span", {
+			/* @__PURE__ */ o("span", {
 				ref: m,
 				"data-cloud-launch-dot": "",
 				"aria-hidden": "true",
@@ -635,14 +635,14 @@ function se({ state: e, volume: n, size: i, className: s, style: c, disabled: l
 					inset: 0,
 					display: "block",
 					borderRadius: "50%",
-					background: z,
+					background: B,
 					opacity: 0,
-					transform: `scale(${R})`,
+					transform: `scale(${z})`,
 					transformOrigin: "center",
 					willChange: "opacity, transform"
 				}
 			}),
-			/* @__PURE__ */ a("canvas", {
+			/* @__PURE__ */ o("canvas", {
 				ref: p,
 				"aria-hidden": "true",
 				style: {
@@ -653,12 +653,12 @@ function se({ state: e, volume: n, size: i, className: s, style: c, disabled: l
 					height: b,
 					borderRadius: "50%",
 					opacity: 0,
-					transform: `scale(${R})`,
+					transform: `scale(${z})`,
 					transformOrigin: "center",
 					willChange: "opacity, transform"
 				}
 			}),
-			/* @__PURE__ */ a("span", {
+			/* @__PURE__ */ o("span", {
 				ref: h,
 				"aria-hidden": "true",
 				style: {
@@ -682,10 +682,10 @@ function se({ state: e, volume: n, size: i, className: s, style: c, disabled: l
 			})
 		]
 	});
-	return u ? /* @__PURE__ */ a("button", {
+	return u ? /* @__PURE__ */ o("button", {
 		...f,
 		type: "button",
-		className: s,
+		className: a,
 		disabled: l,
 		onClick: l ? void 0 : d,
 		style: {
@@ -701,9 +701,9 @@ function se({ state: e, volume: n, size: i, className: s, style: c, disabled: l
 			...x
 		},
 		children: S
-	}) : /* @__PURE__ */ a("div", {
+	}) : /* @__PURE__ */ o("div", {
 		...f,
-		className: s,
+		className: a,
 		style: x,
 		children: S
 	});
@@ -711,13 +711,13 @@ function se({ state: e, volume: n, size: i, className: s, style: c, disabled: l
 //#endregion
 //#region src/themes/radial/RadialTheme.tsx
 var ce = typeof window < "u" ? n : t, le = "\nattribute vec2 a_position;\n\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n", ue = "\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_rotation;\nuniform float u_listen;\nuniform float u_speak;\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec2 p = (uv - 0.5) * 2.0;\n  float radius = length(p);\n  float edge = 1.0 - smoothstep(0.993, 1.0, radius);\n\n  if (edge <= 0.0) discard;\n\n  float angle = atan(p.y, p.x);\n  float warpStrength = 0.026 + u_speak * 0.105;\n  float angularWarp =\n    sin(angle * 3.0 - u_time * 0.54 + radius * 2.1) +\n    0.48 * sin(angle * 5.0 + u_time * 0.31 - radius * 3.7) +\n    0.22 * sin(angle * 8.0 - u_time * 0.19 + radius * 5.2);\n  float phase =\n    angle - 1.78 - u_rotation + angularWarp * warpStrength * (0.2 + radius * 0.8);\n\n  // Two opposing dark lobes and two opposing aqua lobes form the main pinwheel.\n  float lobeField = cos(phase * 2.0);\n  float darkMix = smoothstep(-0.04, 0.38, lobeField);\n\n  vec3 deepBlue = vec3(0.004, 0.105, 0.37);\n  vec3 cobalt = vec3(0.015, 0.34, 0.76);\n  vec3 aqua = vec3(0.24, 0.76, 0.79);\n  vec3 paleAqua = vec3(0.77, 0.96, 0.95);\n\n  float radialLight = 0.5 + 0.5 * sin(radius * 3.0 - u_time * 0.16);\n  vec3 darkColor = mix(cobalt, deepBlue, 0.42 + 0.38 * radius);\n  float darkRay = pow(max(lobeField, 0.0), 11.0);\n  darkColor = mix(darkColor, aqua, darkRay * (0.18 + radialLight * 0.16));\n\n  vec3 lightColor = mix(paleAqua, aqua, 0.5 + 0.2 * sin(radius * 3.4 + phase * 2.0));\n  float lightRay = pow(max(-lobeField, 0.0), 5.0);\n  lightColor = mix(lightColor, vec3(0.04, 0.42, 0.64), lightRay * 0.28);\n\n  vec3 color = mix(lightColor, darkColor, darkMix);\n\n  // Soft secondary streaks make each of the four lobes feel layered rather than flat.\n  float secondaryRay = 0.5 + 0.5 * sin(phase * 6.0 + radius * 1.8 - u_time * 0.42);\n  float rayStrength = (0.055 + u_speak * 0.045) * (0.25 + radius * 0.75);\n  color = mix(color, vec3(0.26, 0.76, 0.8), secondaryRay * rayStrength);\n\n  // The outer membrane keeps a circular perimeter while independent traveling waves\n  // continuously reshape its inner boundary.\n  float rimWave =\n    0.063 * sin(angle * 3.0 + u_time * 1.34) +\n    0.036 * sin(angle * 5.0 - u_time * 0.91 + 1.4) +\n    0.021 * sin(angle * 7.0 + u_time * 0.63 - 0.8) +\n    0.012 * sin(angle * 11.0 - u_time * 1.72 + sin(angle * 2.0 + u_time * 0.58));\n  rimWave *= 1.0 + u_listen * 0.38;\n  float rimInner = 0.82 + rimWave - u_listen * 0.2;\n  float rim = smoothstep(rimInner - 0.02, rimInner + 0.015, radius);\n  float rimStrength = rim * (0.3 + u_listen * 0.3);\n  vec3 membrane = mix(\n    vec3(0.47, 0.84, 0.84),\n    vec3(0.76, 0.93, 0.92),\n    smoothstep(0.78, 1.0, radius)\n  );\n  color = mix(color, membrane, clamp(rimStrength, 0.0, 0.72));\n\n  // Only one transition direction becomes a bright seam, producing two opposing ribbons.\n  float seamDirection = max(0.0, -sin(phase * 2.0));\n  float seamExponent = mix(30.0, 3.2, smoothstep(0.05, 1.0, radius));\n  float seam = pow(seamDirection, seamExponent) * (0.78 + radius * 0.25);\n  color = mix(color, vec3(0.985, 0.995, 0.995), clamp(seam, 0.0, 0.96));\n\n  // The drawing buffer uses premultiplied alpha. Premultiply the antialiased\n  // perimeter so translucent edge pixels cannot become a bright outline.\n  gl_FragColor = vec4(color * edge, edge);\n}\n", de = "\n@keyframes orb-radial-spinner {\n  to { transform: rotate(360deg); }\n}\n@media (prefers-reduced-motion: reduce) {\n  [data-radial-spinner] { animation: none !important; }\n}\n", fe = .66, pe = .2;
-function X(e, t = 0, n = 1) {
+function Z(e, t = 0, n = 1) {
 	return Math.min(n, Math.max(t, e));
 }
-function Z(e, t, n, r) {
+function Q(e, t, n, r) {
 	return e + (t - e) * (1 - Math.exp(-n * r));
 }
-function Q(e, t, n) {
+function $(e, t, n) {
 	let r = e.createShader(t);
 	if (r) {
 		if (e.shaderSource(r, n), e.compileShader(r), !e.getShaderParameter(r, e.COMPILE_STATUS)) {
@@ -734,7 +734,7 @@ function me(e, t) {
 		premultipliedAlpha: !0
 	});
 	if (!n) return;
-	let r = Q(n, n.VERTEX_SHADER, le), i = Q(n, n.FRAGMENT_SHADER, ue);
+	let r = $(n, n.VERTEX_SHADER, le), i = $(n, n.FRAGMENT_SHADER, ue);
 	if (!r || !i) {
 		r && n.deleteShader(r), i && n.deleteShader(i);
 		return;
@@ -780,7 +780,7 @@ function he(e) {
 	return e !== "idle" && e !== "connecting" && e !== "error";
 }
 function ge({ active: e }) {
-	return /* @__PURE__ */ a("svg", {
+	return /* @__PURE__ */ o("svg", {
 		"aria-hidden": "true",
 		fill: "none",
 		viewBox: "0 0 24 24",
@@ -792,18 +792,18 @@ function ge({ active: e }) {
 			transformOrigin: "center",
 			transition: "transform 180ms ease"
 		},
-		children: /* @__PURE__ */ a("path", {
+		children: /* @__PURE__ */ o("path", {
 			d: "M6.7 3.8 9.1 7a1.6 1.6 0 0 1-.2 2.1l-1.4 1.3a13.1 13.1 0 0 0 6.1 6.1l1.3-1.4a1.6 1.6 0 0 1 2.1-.2l3.2 2.4a1.6 1.6 0 0 1 .5 1.9l-.7 1.7c-.3.8-1.1 1.3-2 1.2C9.7 21.2 2.8 14.3 1.9 6c-.1-.9.4-1.7 1.2-2l1.7-.7a1.6 1.6 0 0 1 1.9.5Z",
 			fill: "currentColor"
 		})
 	});
 }
-function _e({ state: e, volume: n, size: i, className: s, style: c, disabled: l = !1, interactive: u = !1, onClick: d, ...f }) {
-	let p = r(null), m = r(e), h = r(n), g = r(!1);
+function _e({ state: e, volume: n, size: r, className: a, style: c, disabled: l = !1, interactive: u = !1, onClick: d, ...f }) {
+	let p = i(null), m = i(e), h = i(n), g = i(!1);
 	ce(() => {
 		m.current = e, h.current = n;
 	}, [e, n]);
-	let _ = i * fe, v = _ * pe;
+	let _ = r * fe, v = _ * pe;
 	t(() => {
 		let e = "orb-radial-keyframes";
 		if (!document.getElementById(e)) {
@@ -817,16 +817,16 @@ function _e({ state: e, volume: n, size: i, className: s, style: c, disabled: l
 			g.current = t.matches;
 		};
 		n(), t.addEventListener("change", n);
-		let r = me(e, _), i = 0, a = performance.now(), o = 0, s = .36, c = .62, l = .15, u = 0, d = 0, f = 0, v = 0, y = +(m.current === "speaking"), b = X(h.current), x = m.current === "listening" ? b : 0, S = m.current === "speaking" ? b : 0, C = (e) => {
+		let r = me(e, _), i = 0, a = performance.now(), o = 0, s = .36, c = .62, l = .15, u = 0, d = 0, f = 0, v = 0, y = +(m.current === "speaking"), b = Z(h.current), x = m.current === "listening" ? b : 0, S = m.current === "speaking" ? b : 0, C = (e) => {
 			let t = Math.min((e - a) / 1e3, .05);
 			a = e;
-			let n = m.current, p = g.current, _ = X(h.current);
-			b = p ? 0 : Z(b, _, _ > b ? 15 : 7, t);
+			let n = m.current, p = g.current, _ = Z(h.current);
+			b = p ? 0 : Q(b, _, _ > b ? 15 : 7, t);
 			let w = n === "listening" ? b : 0, T = n === "speaking" ? b : 0;
-			x = p ? 0 : Z(x, w, w > x ? 17 : 7, t), S = p ? 0 : Z(S, T, T > S ? 12 : 5, t);
+			x = p ? 0 : Q(x, w, w > x ? 17 : 7, t), S = p ? 0 : Q(S, T, T > S ? 12 : 5, t);
 			let E = .36, D = .62, O = .15;
 			if (n === "connecting" ? (E = .42, D = .68, O = .13) : n === "listening" ? (E = .54 + x * .26, D = .78 + x * .18, O = .18 + x * .04) : n === "thinking" ? (E = .46, D = .72, O = .16) : n === "speaking" && (E = 1.05 + S * 1.15), !p) {
-				s = Z(s, E, 3.6, t), c = Z(c, D, 3.6, t), l = Z(l, O, 3.6, t), y = Z(y, +(n === "speaking"), n === "speaking" ? 3.8 : 3, t), o += t * s, f += t * c;
+				s = Q(s, E, 3.6, t), c = Q(c, D, 3.6, t), l = Q(l, O, 3.6, t), y = Q(y, +(n === "speaking"), n === "speaking" ? 3.8 : 3, t), o += t * s, f += t * c;
 				let e = 1.2 + S * 1.35 + Math.sin(o * 1.73) * .34 + Math.sin(o * .61 + .8) * .18;
 				v += t * Math.max(.65, e);
 				let r = Math.sin(f) * l + Math.sin(f * .47 + 1.1) * .032, i = Math.sin(v * 1.08), a = Math.sin(v * 2.47 + .9), p = Math.sin(v * .43 - .5), m = r + (i * (.13 + S * .17) + a * (.035 + S * .035) + p * .055 - r) * y, h = 4.2 + y * 3, g = h * h, _ = 2 * h;
@@ -840,14 +840,14 @@ function _e({ state: e, volume: n, size: i, className: s, style: c, disabled: l
 	}, [_]);
 	let y = he(e), b = e === "connecting", x = _ + (u ? v * .5 : 0), S = {
 		"--orb-ui-radial-control-surround": "#fff",
-		width: i,
-		height: i,
+		width: r,
+		height: r,
 		display: "flex",
 		alignItems: "center",
 		justifyContent: "center",
 		position: "relative",
 		...c
-	}, C = /* @__PURE__ */ o("span", {
+	}, C = /* @__PURE__ */ s("span", {
 		style: {
 			position: "relative",
 			display: "block",
@@ -855,7 +855,7 @@ function _e({ state: e, volume: n, size: i, className: s, style: c, disabled: l
 			height: x,
 			lineHeight: 0
 		},
-		children: [/* @__PURE__ */ a("canvas", {
+		children: [/* @__PURE__ */ o("canvas", {
 			ref: p,
 			"aria-hidden": "true",
 			"data-radial-surface": "",
@@ -869,7 +869,7 @@ function _e({ state: e, volume: n, size: i, className: s, style: c, disabled: l
 				borderRadius: "50%",
 				background: "conic-gradient(from 12deg, #06358d 0deg, #0b65b5 72deg, #c7f1ef 92deg, #45c2c8 172deg, #06358d 196deg, #0b65b5 254deg, #c7f1ef 278deg, #45c2c8 360deg)"
 			}
-		}), u ? /* @__PURE__ */ a("button", {
+		}), u ? /* @__PURE__ */ o("button", {
 			...f,
 			type: "button",
 			"data-radial-control": "",
@@ -900,7 +900,7 @@ function _e({ state: e, volume: n, size: i, className: s, style: c, disabled: l
 				transition: "background 160ms ease, opacity 160ms ease, transform 160ms ease",
 				font: "inherit"
 			},
-			children: b ? /* @__PURE__ */ a("span", {
+			children: b ? /* @__PURE__ */ o("span", {
 				"aria-hidden": "true",
 				"data-radial-spinner": "",
 				style: {
@@ -913,72 +913,128 @@ function _e({ state: e, volume: n, size: i, className: s, style: c, disabled: l
 					borderRadius: "50%",
 					animation: "orb-radial-spinner 760ms linear infinite"
 				}
-			}) : /* @__PURE__ */ a(ge, { active: y })
+			}) : /* @__PURE__ */ o(ge, { active: y })
 		}) : null]
 	});
-	return u ? /* @__PURE__ */ a("div", {
-		className: s,
+	return u ? /* @__PURE__ */ o("div", {
+		className: a,
 		style: S,
 		children: C
-	}) : /* @__PURE__ */ a("div", {
+	}) : /* @__PURE__ */ o("div", {
 		...f,
-		className: s,
+		className: a,
 		style: S,
 		children: C
 	});
 }
 //#endregion
 //#region src/components/Orb/Orb.tsx
-function $({ signal: n, state: r, volume: o, adapter: l, theme: u = "debug", size: f = 200, className: p, style: m, disabled: h = !1, interactive: g = !0, onStart: _, onStop: v, ...y }) {
-	let [b, x] = i({ state: "idle" });
+function ve({ signal: n, state: i, volume: s, adapter: u, theme: d = "debug", size: p = 200, className: m, style: h, disabled: g = !1, interactive: _ = !0, onStart: v, onStop: y, renderTheme: b, ...x }) {
+	let [S, C] = a({ state: "idle" });
 	t(() => {
-		if (x({ state: "idle" }), l) return l.subscribe(x);
-	}, [l]);
-	let S = n ?? b, C = s(r, n, b), w = c(o, C, S), E = C !== "idle" && C !== "error", D = e(() => {
-		h || (E ? v ? v() : l?.stop?.() : _ ? _() : l?.start?.());
+		if (C({ state: "idle" }), u) return u.subscribe(C);
+	}, [u]);
+	let w = n ?? S, T = c(i, n, S), D = l(s, T, w), O = w.inputVolume ?? 0, k = w.outputVolume ?? 0, A = r(() => ({
+		...w,
+		state: T,
+		inputVolume: O,
+		outputVolume: k
+	}), [
+		w,
+		O,
+		k,
+		T
+	]), j = T !== "idle" && T !== "error", N = e(() => {
+		if (!g) return v ? v() : u?.start?.();
 	}, [
-		l,
-		h,
-		E,
-		_,
+		u,
+		g,
 		v
-	]), O = E ? !!(l?.stop || v) : !!(l?.start || _), k = g && O, A = k && !h ? D : void 0, M = {
-		state: C,
-		volume: w,
-		size: f,
-		className: p,
-		style: m,
-		disabled: h,
-		...y,
-		"aria-label": y["aria-label"] ?? (k ? `${E ? "Stop" : "Start"} voice session` : void 0)
-	}, N = {
-		...M,
-		interactive: k
+	]), P = e(() => {
+		if (!g) return y ? y() : u?.stop?.();
+	}, [
+		u,
+		g,
+		y
+	]), F = e(() => j ? P() : N(), [
+		j,
+		N,
+		P
+	]), I = j ? !!(u?.stop || y) : !!(u?.start || v), L = _ && I, R = L && !g ? F : void 0, z = x["aria-label"] ?? (L ? `${j ? "Stop" : "Start"} voice session` : void 0), B = {
+		...x,
+		"aria-label": z
+	};
+	if (b) {
+		let e = {
+			...x,
+			type: "button",
+			disabled: g || !L,
+			onClick: R,
+			"data-orb-ui-state": T,
+			"aria-label": z
+		};
+		return b({
+			state: T,
+			signal: A,
+			inputVolume: O,
+			outputVolume: k,
+			activity: D,
+			size: p,
+			isActive: j,
+			interactive: L,
+			disabled: g,
+			start: N,
+			stop: P,
+			toggle: F,
+			rootProps: {
+				className: m,
+				style: {
+					width: p,
+					height: p,
+					...h
+				},
+				"data-orb-ui-theme": "custom",
+				"data-orb-ui-state": T
+			},
+			controlProps: e
+		});
+	}
+	let V = {
+		state: T,
+		volume: D,
+		size: p,
+		className: m,
+		style: h,
+		disabled: g,
+		...B
+	}, H = {
+		...V,
+		interactive: L
 	};
-	switch (u) {
-		case "circle": return /* @__PURE__ */ a(T, {
-			...N,
-			onClick: A
+	switch (d) {
+		case "circle": return /* @__PURE__ */ o(E, {
+			...H,
+			onClick: R
 		});
-		case "bars": return /* @__PURE__ */ a(j, {
-			...N,
-			onClick: A
+		case "bars": return /* @__PURE__ */ o(M, {
+			...H,
+			onClick: R
 		});
-		case "cloud": return /* @__PURE__ */ a(se, {
-			...N,
-			onClick: A
+		case "cloud": return /* @__PURE__ */ o(se, {
+			...H,
+			onClick: R
 		});
-		case "radial": return /* @__PURE__ */ a(_e, {
-			...N,
-			onClick: A
+		case "radial": return /* @__PURE__ */ o(_e, {
+			...H,
+			onClick: R
 		});
-		default: return /* @__PURE__ */ a(d, {
-			...M,
-			disabled: h || !g,
-			onStart: h || !g ? void 0 : _ ?? (() => l?.start?.()),
-			onStop: h || !g ? void 0 : v ?? (() => l?.stop?.())
+		default: return /* @__PURE__ */ o(f, {
+			...V,
+			disabled: g || !_,
+			onStart: g || !_ ? void 0 : N,
+			onStop: g || !_ ? void 0 : P
 		});
 	}
 }
 //#endregion
-export { $ as Orb, $ as VoiceOrb };
+export { ve as Orb, ve as VoiceOrb };