@lofcz/orb-ui 0.7.0

package/dist/orb-ui.js

@@ -0,0 +1,984 @@
+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";
+//#region src/components/Orb/signals.ts
+function s(e, t, n) {
+	return e ?? t?.state ?? n.state;
+}
+function c(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 = [
+	"idle",
+	"connecting",
+	"listening",
+	"thinking",
+	"speaking",
+	"error"
+], u = {
+	idle: "#888",
+	connecting: "#f0c040",
+	listening: "#40c0f0",
+	thinking: "#c084fc",
+	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", {
+		...f,
+		className: r,
+		style: {
+			width: n,
+			fontFamily: "monospace",
+			fontSize: 12,
+			background: "#111",
+			color: "#ccc",
+			border: "1px solid #333",
+			borderRadius: 8,
+			padding: 12,
+			boxSizing: "border-box",
+			userSelect: "none",
+			...i
+		},
+		children: [
+			/* @__PURE__ */ a("div", {
+				style: {
+					color: "#555",
+					marginBottom: 10,
+					fontSize: 10,
+					letterSpacing: 1
+				},
+				children: "ORB DEBUG"
+			}),
+			/* @__PURE__ */ o("div", {
+				style: { marginBottom: 8 },
+				children: [/* @__PURE__ */ a("span", {
+					style: { color: "#555" },
+					children: "state "
+				}), /* @__PURE__ */ a("span", {
+					style: {
+						color: u[e],
+						fontWeight: "bold"
+					},
+					children: e
+				})]
+			}),
+			/* @__PURE__ */ o("div", {
+				style: { marginBottom: 10 },
+				children: [
+					/* @__PURE__ */ a("span", {
+						style: { color: "#555" },
+						children: "volume "
+					}),
+					/* @__PURE__ */ a("span", {
+						style: { color: "#ccc" },
+						children: t.toFixed(2)
+					}),
+					/* @__PURE__ */ a("div", {
+						style: {
+							marginTop: 4,
+							height: 4,
+							background: "#222",
+							borderRadius: 2,
+							overflow: "hidden"
+						},
+						children: /* @__PURE__ */ a("div", { style: {
+							height: "100%",
+							width: `${t * 100}%`,
+							background: u[e],
+							borderRadius: 2,
+							transition: "width 50ms linear"
+						} })
+					})
+				]
+			}),
+			/* @__PURE__ */ o("div", {
+				style: { marginBottom: 10 },
+				children: [/* @__PURE__ */ a("div", {
+					style: {
+						color: "#555",
+						marginBottom: 4,
+						fontSize: 10
+					},
+					children: "force state"
+				}), /* @__PURE__ */ a("div", {
+					style: {
+						display: "flex",
+						flexWrap: "wrap",
+						gap: 4
+					},
+					children: l.map((t) => /* @__PURE__ */ a("button", {
+						disabled: s,
+						style: {
+							fontSize: 10,
+							padding: "2px 6px",
+							background: e === t ? u[t] : "#222",
+							color: e === t ? "#000" : "#888",
+							border: `1px solid ${e === t ? u[t] : "#333"}`,
+							borderRadius: 3,
+							cursor: s ? "not-allowed" : "pointer"
+						},
+						onClick: () => {
+							console.warn(`[orb-ui debug] To force state '${t}', use controlled mode: <Orb state="${t}" />`);
+						},
+						children: t
+					}, t))
+				})]
+			}),
+			/* @__PURE__ */ o("div", {
+				style: {
+					display: "flex",
+					gap: 6
+				},
+				children: [/* @__PURE__ */ a("button", {
+					disabled: s,
+					onClick: c,
+					style: {
+						flex: 1,
+						padding: "4px 0",
+						background: "#1a3a1a",
+						color: "#40f080",
+						border: "1px solid #40f080",
+						borderRadius: 4,
+						cursor: s ? "not-allowed" : "pointer",
+						fontSize: 11
+					},
+					children: "Start"
+				}), /* @__PURE__ */ a("button", {
+					disabled: s,
+					onClick: d,
+					style: {
+						flex: 1,
+						padding: "4px 0",
+						background: "#3a1a1a",
+						color: "#f04040",
+						border: "1px solid #f04040",
+						borderRadius: 4,
+						cursor: s ? "not-allowed" : "pointer",
+						fontSize: 11
+					},
+					children: "Stop"
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/themes/circle/CircleTheme.tsx
+var f = typeof window < "u" ? n : t;
+function p(e) {
+	return [
+		parseInt(e.slice(1, 3), 16),
+		parseInt(e.slice(3, 5), 16),
+		parseInt(e.slice(5, 7), 16)
+	];
+}
+var m = {
+	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(() => {
+		A.current = n;
+	}, [n]);
+	let j = r(1), M = r(0), N = r(p(m.idle)), P = .06, F = r(v), I = r(y);
+	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(() => {
+		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 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;
+					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 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";
+					}
+					k.current = requestAnimationFrame(a);
+				};
+				return k.current = requestAnimationFrame(a), () => {
+					cancelAnimationFrame(k.current);
+				};
+			}
+			{
+				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 [a, o, s] = N.current;
+					N.current = [
+						a + (r[0] - a) * C,
+						o + (r[1] - o) * C,
+						s + (r[2] - s) * C
+					];
+					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);
+					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;
+					}
+					k.current = requestAnimationFrame(i);
+				};
+				return k.current = requestAnimationFrame(i), () => cancelAnimationFrame(k.current);
+			}
+		}
+	}, [e]);
+	let L = i * .55, R = {
+		width: i,
+		height: i,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		position: "relative",
+		...c
+	}, z = /* @__PURE__ */ o("span", {
+		ref: O,
+		onMouseEnter: () => {
+			O.current && u && !l && (O.current.style.transform = "scale(1.06)", O.current.style.filter = "brightness(1.12)");
+		},
+		onMouseLeave: () => {
+			O.current && (O.current.style.transform = "scale(1)", O.current.style.filter = "brightness(1)");
+		},
+		onTouchEnd: () => {
+			setTimeout(() => {
+				O.current && (O.current.style.transform = "scale(1)", O.current.style.filter = "brightness(1)");
+			}, 200);
+		},
+		style: {
+			position: "relative",
+			display: "inline-block",
+			transition: "transform 0.3s ease, filter 0.3s ease",
+			cursor: u ? l ? "not-allowed" : "pointer" : "default",
+			borderRadius: "50%",
+			lineHeight: 0
+		},
+		children: [/* @__PURE__ */ a("span", {
+			ref: D,
+			style: {
+				position: "absolute",
+				display: "block",
+				width: L,
+				height: L,
+				borderRadius: "50%",
+				pointerEvents: "none"
+			}
+		}), /* @__PURE__ */ a("span", {
+			ref: E,
+			style: {
+				position: "relative",
+				display: "block",
+				width: L,
+				height: L,
+				borderRadius: "50%",
+				background: m[e]
+			}
+		})]
+	});
+	return u ? /* @__PURE__ */ a("button", {
+		...T,
+		type: "button",
+		className: s,
+		disabled: l,
+		onClick: l ? void 0 : d,
+		style: {
+			appearance: "none",
+			WebkitAppearance: "none",
+			border: 0,
+			padding: 0,
+			margin: 0,
+			background: "transparent",
+			color: "inherit",
+			font: "inherit",
+			cursor: l ? "not-allowed" : "pointer",
+			...R
+		},
+		children: z
+	}) : /* @__PURE__ */ a("div", {
+		...T,
+		className: s,
+		style: R,
+		children: z
+	});
+}
+//#endregion
+//#region src/themes/bars/BarsTheme.tsx
+var E = 5, D = 1.4, O = Math.PI * 2 / E, k = {
+	idle: "#cccccc",
+	connecting: "#cccccc",
+	listening: "#999999",
+	thinking: "#d8d8d8",
+	speaking: "#e8e8e8",
+	error: "#f87171"
+};
+function A(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);
+	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 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;
+			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++) {
+				let i = f.current[r];
+				if (!i) continue;
+				let a = e === "idle" ? o[r] : 1, s = v.current * a;
+				i.style.height = `${Math.min(n[r] + s, t)}px`, i.style.background = m, i.style.animation = "none";
+			}
+		};
+		if (e === "listening" || e === "speaking") {
+			let i = 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;
+					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);
+					}
+					let l = e === "listening" ? .45 : 1;
+					h.current[r] += (c - h.current[r]) * l;
+				}
+				u(h.current, r), m.current = requestAnimationFrame(a);
+			};
+			return m.current = requestAnimationFrame(a), () => cancelAnimationFrame(m.current);
+		}
+		if (e === "connecting" || e === "thinking") {
+			let e = Date.now(), i = () => {
+				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;
+					h.current[e] += (o - h.current[e]) * .15;
+				}
+				u(h.current, r), m.current = requestAnimationFrame(i);
+			};
+			return m.current = requestAnimationFrame(i), () => 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);
+		};
+		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,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		position: "relative",
+		...s
+	}, P = /* @__PURE__ */ a("span", {
+		ref: p,
+		onMouseEnter: () => {
+			l && !c && (_.current = !0, p.current && (p.current.style.filter = "brightness(1.35)"));
+		},
+		onMouseLeave: () => {
+			_.current = !1, p.current && (p.current.style.filter = "brightness(1)");
+		},
+		onTouchEnd: () => {
+			setTimeout(() => {
+				_.current = !1, p.current && (p.current.style.filter = "brightness(1)");
+			}, 200);
+		},
+		style: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			gap: w,
+			transition: "filter 0.3s ease",
+			cursor: l ? c ? "not-allowed" : "pointer" : "default"
+		},
+		children: Array.from({ length: E }, (t, n) => /* @__PURE__ */ a("span", {
+			ref: (e) => {
+				f.current[n] = e;
+			},
+			style: {
+				width: C,
+				minHeight: M,
+				maxHeight: j,
+				height: M,
+				borderRadius: T,
+				background: k[e] ?? k.idle
+			}
+		}, n))
+	});
+	return l ? /* @__PURE__ */ a("button", {
+		...d,
+		type: "button",
+		className: o,
+		disabled: c,
+		onClick: c ? void 0 : u,
+		style: {
+			appearance: "none",
+			WebkitAppearance: "none",
+			border: 0,
+			padding: 0,
+			margin: 0,
+			background: "transparent",
+			color: "inherit",
+			font: "inherit",
+			cursor: c ? "not-allowed" : "pointer",
+			...N
+		},
+		children: P
+	}) : /* @__PURE__ */ a("div", {
+		...d,
+		className: o,
+		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) {
+	return Math.min(n, Math.max(t, e));
+}
+function G(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) {
+	return e + (t - e) * n;
+}
+function q(e, t, n) {
+	let r = W((e - t) / (n - t));
+	return r * r * (3 - 2 * r);
+}
+function J(e) {
+	return e === "listening" || e === "speaking" || e === "thinking";
+}
+function Y(e, t, n) {
+	let r = e.createShader(t);
+	if (r) {
+		if (e.shaderSource(r, n), e.compileShader(r), !e.getShaderParameter(r, e.COMPILE_STATUS)) {
+			e.deleteShader(r);
+			return;
+		}
+		return r;
+	}
+}
+function ae(e, t) {
+	let n = e.getContext("webgl", {
+		alpha: !0,
+		antialias: !0,
+		premultipliedAlpha: !0
+	});
+	if (!n) return;
+	let r = Y(n, n.VERTEX_SHADER, N), i = Y(n, n.FRAGMENT_SHADER, P);
+	if (!r || !i) {
+		r && n.deleteShader(r), i && n.deleteShader(i);
+		return;
+	}
+	let a = n.createProgram(), o = n.createBuffer();
+	if (!a || !o) {
+		a && n.deleteProgram(a), o && n.deleteBuffer(o), n.deleteShader(r), n.deleteShader(i);
+		return;
+	}
+	if (n.attachShader(a, r), n.attachShader(a, i), n.linkProgram(a), !n.getProgramParameter(a, n.LINK_STATUS)) {
+		n.deleteProgram(a), n.deleteBuffer(o), n.deleteShader(r), n.deleteShader(i);
+		return;
+	}
+	let s = n.getAttribLocation(a, "a_position"), c = n.getUniformLocation(a, "u_resolution"), l = n.getUniformLocation(a, "u_time"), u = n.getUniformLocation(a, "u_activity");
+	if (s < 0 || !c || !l || !u) {
+		n.deleteProgram(a), n.deleteBuffer(o), n.deleteShader(r), n.deleteShader(i);
+		return;
+	}
+	let d = Math.min(window.devicePixelRatio || 1, 2), f = Math.max(1, Math.round(t * d));
+	return e.width = f, e.height = f, n.viewport(0, 0, f, f), n.useProgram(a), n.bindBuffer(n.ARRAY_BUFFER, o), n.bufferData(n.ARRAY_BUFFER, new Float32Array([
+		-1,
+		-1,
+		1,
+		-1,
+		-1,
+		1,
+		-1,
+		1,
+		1,
+		-1,
+		1,
+		1
+	]), n.STATIC_DRAW), n.enableVertexAttribArray(s), n.vertexAttribPointer(s, 2, n.FLOAT, !1, 0, 0), n.uniform2f(c, f, f), {
+		draw(e, t) {
+			n.uniform1f(l, e), n.uniform1f(u, t), n.drawArrays(n.TRIANGLES, 0, 6);
+		},
+		destroy() {
+			n.deleteProgram(a), n.deleteBuffer(o), n.deleteShader(r), n.deleteShader(i);
+		}
+	};
+}
+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;
+}
+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(() => {
+		g.current = e, _.current = n, v.current = u;
+	}, [
+		u,
+		e,
+		n
+	]);
+	let b = i * F;
+	t(() => {
+		let e = p.current, t = m.current, n = h.current;
+		if (!e || !t || !n) return;
+		let r = window.matchMedia("(prefers-reduced-motion: reduce)"), i = () => {
+			y.current = r.matches;
+		};
+		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 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);
+			let b = 1;
+			p === "listening" && (b = 1 - u * I), p === "speaking" && (b = 1 + u * L);
+			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);
+			let k = E || D ? 1 : .92;
+			x = m ? k : G(x, k, 12, i);
+			let A = d * x;
+			D && (A = R);
+			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 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)`;
+			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);
+		};
+		return o = requestAnimationFrame(w), () => {
+			cancelAnimationFrame(o), r.removeEventListener("change", i), a?.destroy();
+		};
+	}, [b]);
+	let x = {
+		width: i,
+		height: i,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		position: "relative",
+		...c
+	}, S = /* @__PURE__ */ o("span", {
+		style: {
+			position: "relative",
+			display: "block",
+			width: b,
+			height: b,
+			borderRadius: "50%",
+			lineHeight: 0,
+			cursor: u ? l ? "not-allowed" : "pointer" : "default"
+		},
+		children: [
+			/* @__PURE__ */ a("span", {
+				ref: m,
+				"data-cloud-launch-dot": "",
+				"aria-hidden": "true",
+				style: {
+					position: "absolute",
+					inset: 0,
+					display: "block",
+					borderRadius: "50%",
+					background: z,
+					opacity: 0,
+					transform: `scale(${R})`,
+					transformOrigin: "center",
+					willChange: "opacity, transform"
+				}
+			}),
+			/* @__PURE__ */ a("canvas", {
+				ref: p,
+				"aria-hidden": "true",
+				style: {
+					position: "absolute",
+					inset: 0,
+					display: "block",
+					width: b,
+					height: b,
+					borderRadius: "50%",
+					opacity: 0,
+					transform: `scale(${R})`,
+					transformOrigin: "center",
+					willChange: "opacity, transform"
+				}
+			}),
+			/* @__PURE__ */ a("span", {
+				ref: h,
+				"aria-hidden": "true",
+				style: {
+					position: "absolute",
+					left: "50%",
+					top: "50%",
+					width: b * .105,
+					height: b * .105,
+					boxSizing: "border-box",
+					border: `${Math.max(1.5, b * .012)}px solid rgba(113, 120, 245, 0.24)`,
+					borderTopColor: "#777ff6",
+					borderRightColor: "#777ff6",
+					borderRadius: "50%",
+					opacity: 0,
+					transform: "rotate(0deg)",
+					transformOrigin: "center",
+					marginLeft: b * -.0525,
+					marginTop: b * -.0525,
+					willChange: "opacity, transform"
+				}
+			})
+		]
+	});
+	return u ? /* @__PURE__ */ a("button", {
+		...f,
+		type: "button",
+		className: s,
+		disabled: l,
+		onClick: l ? void 0 : d,
+		style: {
+			appearance: "none",
+			WebkitAppearance: "none",
+			border: 0,
+			padding: 0,
+			margin: 0,
+			background: "transparent",
+			color: "inherit",
+			font: "inherit",
+			cursor: l ? "not-allowed" : "pointer",
+			...x
+		},
+		children: S
+	}) : /* @__PURE__ */ a("div", {
+		...f,
+		className: s,
+		style: x,
+		children: S
+	});
+}
+//#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) {
+	return Math.min(n, Math.max(t, e));
+}
+function Z(e, t, n, r) {
+	return e + (t - e) * (1 - Math.exp(-n * r));
+}
+function Q(e, t, n) {
+	let r = e.createShader(t);
+	if (r) {
+		if (e.shaderSource(r, n), e.compileShader(r), !e.getShaderParameter(r, e.COMPILE_STATUS)) {
+			e.deleteShader(r);
+			return;
+		}
+		return r;
+	}
+}
+function me(e, t) {
+	let n = e.getContext("webgl", {
+		alpha: !0,
+		antialias: !0,
+		premultipliedAlpha: !0
+	});
+	if (!n) return;
+	let r = Q(n, n.VERTEX_SHADER, le), i = Q(n, n.FRAGMENT_SHADER, ue);
+	if (!r || !i) {
+		r && n.deleteShader(r), i && n.deleteShader(i);
+		return;
+	}
+	let a = n.createProgram(), o = n.createBuffer();
+	if (!a || !o) {
+		a && n.deleteProgram(a), o && n.deleteBuffer(o), n.deleteShader(r), n.deleteShader(i);
+		return;
+	}
+	if (n.attachShader(a, r), n.attachShader(a, i), n.linkProgram(a), !n.getProgramParameter(a, n.LINK_STATUS)) {
+		n.deleteProgram(a), n.deleteBuffer(o), n.deleteShader(r), n.deleteShader(i);
+		return;
+	}
+	let s = n.getAttribLocation(a, "a_position"), c = n.getUniformLocation(a, "u_resolution"), l = n.getUniformLocation(a, "u_time"), u = n.getUniformLocation(a, "u_rotation"), d = n.getUniformLocation(a, "u_listen"), f = n.getUniformLocation(a, "u_speak");
+	if (s < 0 || !c || !l || !u || !d || !f) {
+		n.deleteProgram(a), n.deleteBuffer(o), n.deleteShader(r), n.deleteShader(i);
+		return;
+	}
+	let p = Math.min(window.devicePixelRatio || 1, 2), m = Math.max(1, Math.round(t * p));
+	return e.width = m, e.height = m, n.viewport(0, 0, m, m), n.useProgram(a), n.bindBuffer(n.ARRAY_BUFFER, o), n.bufferData(n.ARRAY_BUFFER, new Float32Array([
+		-1,
+		-1,
+		1,
+		-1,
+		-1,
+		1,
+		-1,
+		1,
+		1,
+		-1,
+		1,
+		1
+	]), n.STATIC_DRAW), n.enableVertexAttribArray(s), n.vertexAttribPointer(s, 2, n.FLOAT, !1, 0, 0), n.uniform2f(c, m, m), {
+		draw(e, t, r, i) {
+			n.uniform1f(l, e), n.uniform1f(u, t), n.uniform1f(d, r), n.uniform1f(f, i), n.drawArrays(n.TRIANGLES, 0, 6);
+		},
+		destroy() {
+			n.deleteProgram(a), n.deleteBuffer(o), n.deleteShader(r), n.deleteShader(i);
+		}
+	};
+}
+function he(e) {
+	return e !== "idle" && e !== "connecting" && e !== "error";
+}
+function ge({ active: e }) {
+	return /* @__PURE__ */ a("svg", {
+		"aria-hidden": "true",
+		fill: "none",
+		viewBox: "0 0 24 24",
+		style: {
+			display: "block",
+			width: "50%",
+			height: "50%",
+			transform: `rotate(${e ? 132 : -8}deg)`,
+			transformOrigin: "center",
+			transition: "transform 180ms ease"
+		},
+		children: /* @__PURE__ */ a("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);
+	ce(() => {
+		m.current = e, h.current = n;
+	}, [e, n]);
+	let _ = i * fe, v = _ * pe;
+	t(() => {
+		let e = "orb-radial-keyframes";
+		if (!document.getElementById(e)) {
+			let t = document.createElement("style");
+			t.id = e, t.textContent = de, document.head.appendChild(t);
+		}
+	}, []), t(() => {
+		let e = p.current;
+		if (!e) return;
+		let t = window.matchMedia("(prefers-reduced-motion: reduce)"), n = () => {
+			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 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 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);
+			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;
+				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;
+				d += ((m - u) * g - d * _) * t, u += d * t;
+			}
+			r?.draw(o, u, x, S), i = requestAnimationFrame(C);
+		};
+		return i = requestAnimationFrame(C), () => {
+			cancelAnimationFrame(i), t.removeEventListener("change", n), r?.destroy();
+		};
+	}, [_]);
+	let y = he(e), b = e === "connecting", x = _ + (u ? v * .5 : 0), S = {
+		"--orb-ui-radial-control-surround": "#fff",
+		width: i,
+		height: i,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		position: "relative",
+		...c
+	}, C = /* @__PURE__ */ o("span", {
+		style: {
+			position: "relative",
+			display: "block",
+			width: _,
+			height: x,
+			lineHeight: 0
+		},
+		children: [/* @__PURE__ */ a("canvas", {
+			ref: p,
+			"aria-hidden": "true",
+			"data-radial-surface": "",
+			style: {
+				position: "absolute",
+				left: 0,
+				top: 0,
+				display: "block",
+				width: _,
+				height: _,
+				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", {
+			...f,
+			type: "button",
+			"data-radial-control": "",
+			disabled: l,
+			onClick: l ? void 0 : d,
+			style: {
+				appearance: "none",
+				WebkitAppearance: "none",
+				position: "absolute",
+				left: "50%",
+				top: _ - v * .52,
+				width: v,
+				height: v,
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				boxSizing: "border-box",
+				padding: 0,
+				margin: 0,
+				border: 0,
+				borderRadius: "50%",
+				background: b ? "#9da1aa" : y ? "#ef4146" : "#080808",
+				color: "#fff",
+				boxShadow: `0 0 0 ${Math.max(3, v * .085)}px var(--orb-ui-radial-control-surround), 0 2px 5px rgba(0, 0, 0, 0.18)`,
+				cursor: l ? "not-allowed" : "pointer",
+				opacity: l ? .52 : 1,
+				transform: "translateX(-50%)",
+				transition: "background 160ms ease, opacity 160ms ease, transform 160ms ease",
+				font: "inherit"
+			},
+			children: b ? /* @__PURE__ */ a("span", {
+				"aria-hidden": "true",
+				"data-radial-spinner": "",
+				style: {
+					width: "42%",
+					height: "42%",
+					boxSizing: "border-box",
+					border: `${Math.max(1.5, v * .055)}px solid rgba(255, 255, 255, 0.38)`,
+					borderTopColor: "#fff",
+					borderRightColor: "#fff",
+					borderRadius: "50%",
+					animation: "orb-radial-spinner 760ms linear infinite"
+				}
+			}) : /* @__PURE__ */ a(ge, { active: y })
+		}) : null]
+	});
+	return u ? /* @__PURE__ */ a("div", {
+		className: s,
+		style: S,
+		children: C
+	}) : /* @__PURE__ */ a("div", {
+		...f,
+		className: s,
+		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" });
+	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?.());
+	}, [
+		l,
+		h,
+		E,
+		_,
+		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
+	};
+	switch (u) {
+		case "circle": return /* @__PURE__ */ a(T, {
+			...N,
+			onClick: A
+		});
+		case "bars": return /* @__PURE__ */ a(j, {
+			...N,
+			onClick: A
+		});
+		case "cloud": return /* @__PURE__ */ a(se, {
+			...N,
+			onClick: A
+		});
+		case "radial": return /* @__PURE__ */ a(_e, {
+			...N,
+			onClick: A
+		});
+		default: return /* @__PURE__ */ a(d, {
+			...M,
+			disabled: h || !g,
+			onStart: h || !g ? void 0 : _ ?? (() => l?.start?.()),
+			onStop: h || !g ? void 0 : v ?? (() => l?.stop?.())
+		});
+	}
+}
+//#endregion
+export { $ as Orb, $ as VoiceOrb };