@seams/voice-capture 0.0.0-stage → 0.66.0

package/dist/esm/chunks/visual-Di3ojTED.js

@@ -0,0 +1,1520 @@
+import { styleNonce } from "../config.js";
+import { VoiceRibbon } from "../card/ribbon.js";
+import { createElement, render } from "preact";
+import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "preact/compat";
+//#region node_modules/.pnpm/voice-glow@0.2.1_react-dom@19.3.1_react@19.3.1__react@19.3.1/node_modules/voice-glow/dist/index.es.js
+function wa(n) {
+	const e = n.trim(), a = e.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+	if (a) {
+		const t = a[1].length === 3 ? a[1].split("").map((s) => s + s).join("") : a[1];
+		return [
+			parseInt(t.slice(0, 2), 16),
+			parseInt(t.slice(2, 4), 16),
+			parseInt(t.slice(4, 6), 16)
+		];
+	}
+	const r = e.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i);
+	return r ? [
+		Math.round(+r[1]),
+		Math.round(+r[2]),
+		Math.round(+r[3])
+	] : null;
+}
+function qa(n) {
+	const e = wa(n);
+	return e ? `rgb(${e[0]}, ${e[1]}, ${e[2]})` : null;
+}
+function Ne(n) {
+	const e = wa(n);
+	return e ? `${e[0]}, ${e[1]}, ${e[2]}` : null;
+}
+const Ga = {
+	dark: {
+		strokeOpacity: 1.16,
+		innerOpacity: .47,
+		bloomOpacity: .89,
+		innerShadow: "rgba(255, 255, 255, 0.1)",
+		saturation: 1.2,
+		brightness: 1.1
+	},
+	light: {
+		strokeOpacity: 1.2,
+		innerOpacity: .85,
+		bloomOpacity: .5,
+		innerShadow: "rgba(0, 0, 0, 0.08)",
+		saturation: 1.6,
+		brightness: .95,
+		hueRange: 40,
+		hueDuration: 8.5,
+		hueBase: 5,
+		strength: .8,
+		bandStrength: 1.7
+	}
+}, we = [
+	{
+		x: 0,
+		w: 74,
+		h: 46,
+		band: 0
+	},
+	{
+		x: -36,
+		w: 54,
+		h: 40,
+		band: 1
+	},
+	{
+		x: 36,
+		w: 54,
+		h: 40,
+		band: 1
+	},
+	{
+		x: -72,
+		w: 48,
+		h: 32,
+		band: 2
+	},
+	{
+		x: 72,
+		w: 48,
+		h: 32,
+		band: 2
+	},
+	{
+		x: -108,
+		w: 42,
+		h: 26,
+		band: 1
+	},
+	{
+		x: 108,
+		w: 42,
+		h: 26,
+		band: 1
+	}
+], Ka = 36 * we.length, Va = {
+	colorful: {
+		dark: [
+			"rgb(255, 70, 120)",
+			"rgb(60, 190, 255)",
+			"rgb(175, 70, 255)",
+			"rgb(60, 220, 130)",
+			"rgb(255, 150, 40)",
+			"rgb(90, 100, 255)",
+			"rgb(40, 200, 190)"
+		],
+		light: [
+			"rgb(255, 201, 21)",
+			"rgb(126, 196, 255)",
+			"rgb(180, 40, 230)",
+			"rgb(235, 100, 160)",
+			"rgb(255, 176, 122)",
+			"rgb(154, 160, 255)",
+			"rgb(127, 217, 238)"
+		]
+	},
+	mono: {
+		dark: [
+			"rgb(215, 215, 215)",
+			"rgb(180, 180, 180)",
+			"rgb(190, 190, 190)",
+			"rgb(160, 160, 160)",
+			"rgb(170, 170, 170)",
+			"rgb(150, 150, 150)",
+			"rgb(155, 155, 155)"
+		],
+		light: [
+			"rgb(60, 60, 60)",
+			"rgb(90, 90, 90)",
+			"rgb(85, 85, 85)",
+			"rgb(110, 110, 110)",
+			"rgb(105, 105, 105)",
+			"rgb(125, 125, 125)",
+			"rgb(120, 120, 120)"
+		]
+	},
+	ocean: {
+		dark: [
+			"rgb(80, 140, 255)",
+			"rgb(40, 200, 230)",
+			"rgb(120, 90, 255)",
+			"rgb(30, 170, 210)",
+			"rgb(160, 80, 240)",
+			"rgb(60, 110, 255)",
+			"rgb(40, 190, 180)"
+		],
+		light: [
+			"rgb(40, 100, 240)",
+			"rgb(20, 160, 200)",
+			"rgb(90, 60, 230)",
+			"rgb(20, 130, 180)",
+			"rgb(130, 50, 220)",
+			"rgb(40, 80, 230)",
+			"rgb(20, 150, 150)"
+		]
+	},
+	sunset: {
+		dark: [
+			"rgb(255, 110, 60)",
+			"rgb(255, 180, 40)",
+			"rgb(255, 60, 90)",
+			"rgb(255, 210, 80)",
+			"rgb(240, 70, 140)",
+			"rgb(255, 140, 50)",
+			"rgb(230, 50, 110)"
+		],
+		light: [
+			"rgb(235, 80, 30)",
+			"rgb(230, 150, 10)",
+			"rgb(230, 30, 70)",
+			"rgb(225, 175, 30)",
+			"rgb(215, 40, 110)",
+			"rgb(235, 110, 20)",
+			"rgb(205, 30, 90)"
+		]
+	},
+	forest: {
+		dark: [
+			"rgb(70, 220, 120)",
+			"rgb(40, 200, 180)",
+			"rgb(140, 230, 80)",
+			"rgb(30, 170, 140)",
+			"rgb(190, 235, 70)",
+			"rgb(50, 190, 110)",
+			"rgb(30, 150, 120)"
+		],
+		light: [
+			"rgb(30, 170, 80)",
+			"rgb(20, 150, 130)",
+			"rgb(90, 180, 30)",
+			"rgb(20, 130, 100)",
+			"rgb(130, 180, 20)",
+			"rgb(30, 150, 80)",
+			"rgb(20, 120, 90)"
+		]
+	},
+	candy: {
+		dark: [
+			"rgb(255, 90, 170)",
+			"rgb(255, 120, 220)",
+			"rgb(210, 80, 255)",
+			"rgb(255, 150, 190)",
+			"rgb(180, 110, 255)",
+			"rgb(255, 70, 140)",
+			"rgb(230, 100, 240)"
+		],
+		light: [
+			"rgb(235, 40, 140)",
+			"rgb(230, 70, 190)",
+			"rgb(180, 40, 230)",
+			"rgb(235, 100, 160)",
+			"rgb(150, 70, 230)",
+			"rgb(230, 30, 110)",
+			"rgb(200, 60, 210)"
+		]
+	},
+	ice: {
+		dark: [
+			"rgb(150, 230, 255)",
+			"rgb(90, 200, 255)",
+			"rgb(190, 240, 255)",
+			"rgb(120, 190, 255)",
+			"rgb(160, 220, 250)",
+			"rgb(80, 170, 255)",
+			"rgb(200, 235, 255)"
+		],
+		light: [
+			"rgb(30, 160, 220)",
+			"rgb(20, 130, 210)",
+			"rgb(60, 180, 230)",
+			"rgb(40, 120, 220)",
+			"rgb(50, 160, 220)",
+			"rgb(20, 110, 220)",
+			"rgb(70, 170, 230)"
+		]
+	},
+	gold: {
+		dark: [
+			"rgb(255, 200, 70)",
+			"rgb(255, 170, 40)",
+			"rgb(255, 220, 110)",
+			"rgb(240, 150, 30)",
+			"rgb(255, 235, 140)",
+			"rgb(230, 160, 40)",
+			"rgb(250, 210, 90)"
+		],
+		light: [
+			"rgb(200, 140, 10)",
+			"rgb(190, 120, 0)",
+			"rgb(210, 160, 30)",
+			"rgb(180, 110, 0)",
+			"rgb(205, 170, 40)",
+			"rgb(175, 115, 5)",
+			"rgb(195, 150, 20)"
+		]
+	}
+};
+function ja(n, e) {
+	const a = n.match(/^rgb\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/);
+	return a ? `rgba(${a[1]}, ${a[2]}, ${a[3]}, ${e.toFixed(2)})` : n;
+}
+function lt(n, e = 1) {
+	return Math.max(.5, Math.round(n * e * 100) / 100);
+}
+function Xa(n, e) {
+	return `calc(50% + (var(--vb-cx-${e}) + var(--vb-x${n}-${e})) * var(--vb-w-${e}) * var(--vb-z-${e}, 1))`;
+}
+function dt({ id: n, colors: e, alpha: a, sw: r, sh: t, y: s, fade: o, count: i }) {
+	return (i ? we.slice(0, i) : we).map((l, p) => {
+		const b = a >= 1 ? e[p % e.length] : ja(e[p % e.length], a), m = `calc(${Math.round(l.w * r)}px * var(--vb-w-${n}) * var(--vb-z-${n}, 1))`, d = `calc(${Math.round(l.h * t)}px * var(--vb-h-${n}) * var(--vb-l${p}-${n}) * var(--vb-z-${n}, 1))`, h = `calc(100% + (${s}px + var(--vb-y${p}-${n})) * var(--vb-z-${n}, 1))`;
+		return `radial-gradient(ellipse ${m} ${d} at ${Xa(p, n)} ${h}, ${b} 0%, transparent ${o}%)`;
+	}).join(`,
+    `);
+}
+function Ya(n) {
+	const { id: e, borderRadius: a, borderWidth: r, strokeOpacity: t, innerOpacity: s, bloomOpacity: o, innerShadow: i, colorVariant: u, colors: l, brightness: p, saturation: b, theme: m, hueBase: d = 0, glowSize: h = 1, glowWidth: T = 1, glowHeight: O = 1, strokeScale: L = 1, innerScale: _ = 1, innerHeight: G = 1, bloomScale: U = 1, bloomHeight: E = 1, coreSize: D = 1, coreLight: C = 0, coreLightWidth: z = 1, coreLightHeight: g = 1, rangeWidth: H = 1, rangeHeight: Q = 1, softness: le = 1, distortion: K = !1, scale: W = 1 } = n, R = Math.round(28 * W * 10) / 10, I = Math.round(9 * W * 10) / 10, P = Math.max(0, a - r), v = Math.round(Math.max(40, Math.min(95, 70 * le))), k = ($) => T * $, w = ($) => O * $, S = ($) => Math.round($ * 10) / 10, x = `var(--vb-z-${e}, 1)`, y = ($) => `calc(${S($)}px * ${x})`, oe = m === "dark", re = Va[u][oe ? "dark" : "light"].map(($, A) => {
+		const N = l == null ? void 0 : l[A];
+		return N && qa(N) || $;
+	}), V = u === "mono" ? .6 : 1, Me = (t * V).toFixed(2), ue = (s * V).toFixed(2), f = (o * V).toFixed(2), B = p.toFixed(2), j = b.toFixed(2), Z = `hue-rotate(calc(var(--voice-hue-base, ${d}deg) + var(--vb-hue-${e})))`, ge = K ? ` url(#vb-distort-${e})` : "", Fe = `filter: ${Z} brightness(${B}) saturate(${j});`, Ye = `filter: ${Z} brightness(${B}) saturate(${j})${ge};`, Je = `filter: blur(${y(lt(10, h))}) ${Z} brightness(${B}) saturate(${j});`, Qe = `filter: blur(${y(lt(10, h))}) ${Z} brightness(${B}) saturate(${j})${ge};`, pe = `calc(50% + var(--vb-cx-${e}) * var(--vb-w-${e}) * ${x})`, Re = `calc(100% + (2px + var(--vb-cy-${e})) * ${x})`, Ze = oe ? `radial-gradient(ellipse calc(${S(30 * D)}px * var(--vb-w-${e}) * ${x}) calc(${S(30 * D)}px * var(--vb-h-${e}) * ${x}) at ${pe} ${Re}, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.14) 30%, transparent 65%)` : `radial-gradient(ellipse calc(${S(40 * D)}px * var(--vb-w-${e}) * ${x}) calc(${S(30 * D)}px * var(--vb-h-${e}) * ${x}) at ${pe} ${Re}, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.22) 35%, transparent 70%)`, et = dt({
+		id: e,
+		colors: re,
+		alpha: 1,
+		sw: k(L),
+		sh: w(L),
+		y: 2,
+		fade: v
+	}), tt = dt({
+		id: e,
+		colors: re,
+		alpha: .46,
+		sw: k(.9 * _),
+		sh: w(.9 * _ * G),
+		y: 0,
+		fade: v
+	}), at = dt({
+		id: e,
+		colors: re,
+		alpha: oe ? .9 : .7,
+		sw: k(1.15 * U),
+		sh: w(1.5 * U * E),
+		y: 0,
+		fade: Math.min(95, v + 2)
+	}), ie = ($, A, N, ae = 0) => `radial-gradient(ellipse calc(${S($ * H)}px * var(--vb-w-${e}) * var(--vb-mw-${e}) * ${x}) calc((${S(A * Q)}px * var(--vb-h-${e}) + var(--vb-bh-${e})) * ${x}) at ${pe} calc(100% + var(--vb-cy-${e}) * ${x}), white 0%, rgba(255, 255, 255, 0.5) ${N}%${ae > 0 ? `, rgba(255, 255, 255, ${ae}) 85%` : ""}, transparent 100%)`, fe = ($, A) => `opacity: calc(var(--vb-opacity-${e}, 1) * var(--vb-glow-${e}) * ${A} * var(--voice-${$}-opacity, 1) * var(--voice-strength, 1));`, Pe = ($, A, N, ae) => `${$} {
+  ${A}
+  position: absolute;
+  inset: 0;
+  border-radius: ${y(a)};
+  background: ${tt};
+  box-shadow: inset 0 0 ${y(I)} 1px ${i};
+  -webkit-mask-image:
+    ${ie(170, 64, 45, .3)},
+    linear-gradient(white, transparent ${y(R)}, transparent calc(100% - ${R}px * ${x}), white),
+    linear-gradient(to right, white, transparent ${y(R)}, transparent calc(100% - ${R}px * ${x}), white);
+  -webkit-mask-composite: source-in, source-over;
+  mask-image:
+    ${ie(170, 64, 45, .3)},
+    linear-gradient(white, transparent ${y(R)}, transparent calc(100% - ${R}px * ${x}), white),
+    linear-gradient(to right, white, transparent ${y(R)}, transparent calc(100% - ${R}px * ${x}), white);
+  mask-composite: intersect, add;
+  pointer-events: none;
+  /* Its own compositing layer: WebKit otherwise re-rasterizes the
+     filtered layer into the parent every frame on the CPU (a phone-sized
+     host runs at a sixth of the frame rate without this). */
+  will-change: transform;
+  z-index: 1;
+  ${N}
+  ${fe("inner", ue)}
+  ${ae}
+}`;
+	return `
+@property --vb-opacity-${e} {
+  syntax: "<number>";
+  initial-value: 0;
+  inherits: true;
+}
+
+[data-voice-beam="${e}"] {
+  position: relative;
+  border-radius: ${a}px;
+  overflow: hidden;
+  --vb-h-${e}: 0.8;
+  --vb-w-${e}: 1;
+${we.map(($, A) => `  --vb-x${A}-${e}: ${$.x}px;
+  --vb-l${A}-${e}: 1;
+  --vb-y${A}-${e}: 0px;`).join(`
+`)}
+  --vb-glow-${e}: 0.4;
+  --vb-z-${e}: 1;
+  --vb-cx-${e}: 0px;
+  --vb-cy-${e}: 0px;
+  --vb-bh-${e}: 0px;
+  --vb-bendA-${e}: 0;
+  --vb-mw-${e}: 1;
+  --vb-hue-${e}: 0deg;
+  --vb-level-${e}: 0;
+}
+
+[data-voice-beam="${e}"][data-active] {
+  animation: vb-fade-in-${e} 0.6s ease forwards;
+}
+
+[data-voice-beam="${e}"][data-fading] {
+  animation: vb-fade-out-${e} 0.5s ease forwards;
+}
+
+/* Stroke — the colours painted into the 1px edge ring, masked to the centred ellipse. */
+[data-voice-beam="${e}"][data-active]::after,
+[data-voice-beam="${e}"][data-fading]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: ${y(P)};
+  padding: ${y(r)};
+  clip-path: inset(0 round ${y(a)});
+  background:
+    ${Ze},
+    ${et};
+  -webkit-mask:
+    ${ie(170, 64, 45)},
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: source-in, xor;
+  mask:
+    ${ie(170, 64, 45)},
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: intersect, exclude;
+  pointer-events: none;
+  /* Its own compositing layer: WebKit otherwise re-rasterizes the
+     filtered layer into the parent every frame on the CPU (a phone-sized
+     host runs at a sixth of the frame rate without this). */
+  will-change: transform;
+  z-index: 2;
+  ${fe("stroke", Me)}
+  ${Fe}
+}
+
+/* Inner glow — soft light inside the element, faded off at the corners.
+   With distortion on, this copy is clipped to ABOVE the band line (the
+   polygon the driver writes each frame) and a mirror layer below carries
+   the displacement filter, so only the glow under the line warps. */
+${Pe(`[data-voice-beam="${e}"][data-active]::before,
+[data-voice-beam="${e}"][data-fading]::before`, "content: \"\";", K ? `clip-path: var(--vb-clip-above-${e}, inset(0 round ${a}px));` : `clip-path: inset(0 round ${a}px);`, Fe)}
+${K ? Pe(`[data-voice-beam="${e}"][data-active] [data-voice-beam-warp="inner"],
+[data-voice-beam="${e}"][data-fading] [data-voice-beam-warp="inner"]`, "display: block;", `clip-path: var(--vb-clip-below-${e}, inset(0 round ${a}px));`, Ye) : ""}
+
+/* Bloom — the blurred halo, tallest of the three, above the content. */
+[data-voice-beam="${e}"] [data-voice-beam-bloom],
+[data-voice-beam="${e}"] [data-voice-beam-warp] {
+  display: none;
+  position: absolute;
+  inset: 0;
+  border-radius: ${y(P)};
+  pointer-events: none;
+  /* Its own compositing layer: WebKit otherwise re-rasterizes the
+     filtered layer into the parent every frame on the CPU (a phone-sized
+     host runs at a sixth of the frame rate without this). */
+  will-change: transform;
+  opacity: 0;
+}
+
+[data-voice-beam="${e}"] [data-voice-beam-bloom],
+[data-voice-beam="${e}"] [data-voice-beam-warp="bloom"] {
+  -webkit-mask: ${ie(200, 130, 35)};
+  mask: ${ie(200, 130, 35)};
+  background: ${at};
+  z-index: 3;
+}
+
+[data-voice-beam="${e}"][data-active] [data-voice-beam-bloom],
+[data-voice-beam="${e}"][data-fading] [data-voice-beam-bloom] {
+  display: block;
+  clip-path: ${K ? `var(--vb-clip-above-${e}, inset(0 round ${a}px))` : `inset(0 round ${a}px)`};
+  ${fe("bloom", f)}
+  ${Je}
+}
+${K ? `
+[data-voice-beam="${e}"][data-active] [data-voice-beam-warp="bloom"],
+[data-voice-beam="${e}"][data-fading] [data-voice-beam-warp="bloom"] {
+  display: block;
+  clip-path: var(--vb-clip-below-${e}, inset(0 round ${a}px));
+  ${fe("bloom", f)}
+  ${Qe}
+}
+
+/* Processing drops the distortion: the driver marks the wrapper once the
+   warp has faded out, the warp layers leave the paint and the base layers
+   give up their split at the band line. */
+[data-voice-beam="${e}"][data-voice-warp="off"]::before,
+[data-voice-beam="${e}"][data-voice-warp="off"] [data-voice-beam-bloom] {
+  clip-path: inset(0 round ${a}px);
+}
+
+[data-voice-beam="${e}"][data-voice-warp="off"] [data-voice-beam-warp] {
+  display: none;
+}` : ""}
+
+/* Epicentre — a soft white wash at the source, under the band line (the
+   driver's clip; unclipped when no line is drawn), sitting above every
+   glow layer and the band's halo so the centre reads lighter than the
+   band (same z as the band canvases, painted after them). Sized by the voice like the
+   other layers; off unless \`coreLight\` is set (the light theme sets it).
+   Up to 1 it is the wash's opacity; past 1 the solid white core widens
+   too, for a centre that stays lighter than a strong band. It follows the
+   glow's presence but not \`strength\`, which would only dim it. */
+${C > 0 ? (() => {
+		const $ = Math.max(0, Math.min(2, C - 1)), A = Math.min(1, $), N = Math.max(0, $ - 1), ae = 1 + .3 * $, nt = S(45 * A + 27 * N), ot = S(40 + 25 * A + 15 * N), rt = Math.min(1, .55 + .35 * A + .1 * N).toFixed(2), Le = S(72 + 14 * A + 8 * N);
+		return `[data-voice-beam="${e}"] [data-voice-beam-core] {
+  display: none;
+  position: absolute;
+  inset: 0;
+  border-radius: ${y(P)};
+  overflow: hidden;
+  pointer-events: none;
+  /* Its own compositing layer: WebKit otherwise re-rasterizes the
+     filtered layer into the parent every frame on the CPU (a phone-sized
+     host runs at a sixth of the frame rate without this). */
+  will-change: transform;
+  /* The blur sits on this wrapper and the band-line clip on the child,
+     so the cut edge is blurred too rather than left hard. */
+  filter: blur(${y(lt(8, h))});
+  z-index: 4;
+}
+
+[data-voice-beam="${e}"] [data-voice-beam-core] > div {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(ellipse calc(${S(120 * z * ae * W)}px * var(--vb-w-${e}) * ${x}) calc((${S(70 * g * ae * W)}px * var(--vb-h-${e}) + var(--vb-bh-${e})) * ${x}) at ${pe} calc(100% + var(--vb-cy-${e}) * ${x}), white 0%, white ${nt}%, rgba(255, 255, 255, ${rt}) ${ot}%, transparent ${Le}%);
+  clip-path: var(--vb-clip-below-${e}, none);
+}
+
+[data-voice-beam="${e}"][data-active] [data-voice-beam-core],
+[data-voice-beam="${e}"][data-fading] [data-voice-beam-core] {
+  display: block;
+  opacity: calc(var(--vb-opacity-${e}, 1) * min(1, var(--vb-glow-${e}) * ${Math.min(1, C).toFixed(2)} * ${(1.6 + 1.4 * $).toFixed(2)}) * var(--voice-core-light-opacity, 1));
+}
+`;
+	})() : ""}
+/* Band — the canvas the driver draws the bend's contour on: an organic
+   bell with chromatic fringes. Fades with the root, follows the strength
+   and turns with the hue drift like the other layers. */
+[data-voice-beam="${e}"] [data-voice-beam-band],
+[data-voice-beam="${e}"] [data-voice-beam-band-halo] {
+  display: none;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  /* Its own compositing layer: WebKit otherwise re-rasterizes the
+     filtered layer into the parent every frame on the CPU (a phone-sized
+     host runs at a sixth of the frame rate without this). */
+  will-change: transform;
+  z-index: 4;
+}
+
+[data-voice-beam="${e}"][data-active] [data-voice-beam-band],
+[data-voice-beam="${e}"][data-fading] [data-voice-beam-band],
+[data-voice-beam="${e}"][data-active] [data-voice-beam-band-halo],
+[data-voice-beam="${e}"][data-fading] [data-voice-beam-band-halo] {
+  display: block;
+  opacity: calc(var(--vb-opacity-${e}, 1) * var(--voice-band-opacity, 1) * var(--voice-strength, 1));
+  /* The blur vars are 0 where the canvas blurs its own strokes; where the
+     2D context has no filter (WebKit) the driver sets them and the layers
+     are blurred here instead — the ridge on the band canvas, its wider
+     halo on the canvas beneath. */
+  filter: blur(var(--vb-band-blur-${e}, 0px)) ${Z} brightness(${B}) saturate(${j});
+}
+
+[data-voice-beam="${e}"][data-active] [data-voice-beam-band-halo],
+[data-voice-beam="${e}"][data-fading] [data-voice-beam-band-halo] {
+  filter: blur(var(--vb-band-halo-blur-${e}, 0px)) ${Z} brightness(${B}) saturate(${j});
+}
+
+/* Resolution. The soft layers — inner light and its warp mirror, bloom and
+   its mirror, the epicentre — are rastered at half size and scaled back
+   up by the compositor: the box is halved, every length inside rides the
+   layer's factor \`--vb-z\` at 0.5 (the driver also writes the band-line
+   clips at half scale), and the will-change transform is rastered
+   pre-scale where the engine does that (Chromium, Safari 18). For blurred
+   gradients that is the same picture at a quarter of the raster and
+   filter work, which is what a phone at 3x runs out of. The 1px stroke
+   stays full-res on every screen: at half size it is half a CSS pixel,
+   which a 3x phone rasters into a faint smear instead of the hairline,
+   and the layer is cheap (no blur). The component sets
+   \`data-voice-halfres\`. */
+[data-voice-beam="${e}"][data-voice-halfres]::before,
+[data-voice-beam="${e}"][data-voice-halfres] [data-voice-beam-warp],
+[data-voice-beam="${e}"][data-voice-halfres] [data-voice-beam-bloom],
+[data-voice-beam="${e}"][data-voice-halfres] [data-voice-beam-core] {
+  --vb-z-${e}: 0.5;
+  inset: auto;
+  left: 0;
+  top: 0;
+  width: 50%;
+  height: 50%;
+  transform: translateZ(0) scale(2);
+  transform-origin: 0 0;
+}
+${K ? `[data-voice-beam="${e}"][data-voice-halfres][data-active]::before,
+[data-voice-beam="${e}"][data-voice-halfres][data-fading]::before,
+[data-voice-beam="${e}"][data-voice-halfres][data-active] [data-voice-beam-bloom],
+[data-voice-beam="${e}"][data-voice-halfres][data-fading] [data-voice-beam-bloom] {
+  clip-path: var(--vb-clip-above-z-${e}, inset(0 round ${y(a)}));
+}
+[data-voice-beam="${e}"][data-voice-halfres][data-active] [data-voice-beam-warp],
+[data-voice-beam="${e}"][data-voice-halfres][data-fading] [data-voice-beam-warp] {
+  clip-path: var(--vb-clip-below-z-${e}, inset(0 round ${y(a)}));
+}
+/* Processing (warp off): the mirrors are gone, so the base layers paint
+   the whole box again — this must outweigh the split above. */
+[data-voice-beam="${e}"][data-voice-halfres][data-voice-warp="off"]::before,
+[data-voice-beam="${e}"][data-voice-halfres][data-voice-warp="off"] [data-voice-beam-bloom] {
+  clip-path: inset(0 round ${y(a)});
+}` : `[data-voice-beam="${e}"][data-voice-halfres][data-active]::before,
+[data-voice-beam="${e}"][data-voice-halfres][data-fading]::before,
+[data-voice-beam="${e}"][data-voice-halfres][data-active] [data-voice-beam-bloom],
+[data-voice-beam="${e}"][data-voice-halfres][data-fading] [data-voice-beam-bloom] {
+  clip-path: inset(0 round ${y(a)});
+}`}
+[data-voice-beam="${e}"][data-voice-halfres] [data-voice-beam-core] > div {
+  clip-path: var(--vb-clip-below-z-${e}, none);
+}
+@keyframes vb-fade-in-${e} {
+  to { --vb-opacity-${e}: 1; }
+}
+
+@keyframes vb-fade-out-${e} {
+  from { --vb-opacity-${e}: 1; }
+  to { --vb-opacity-${e}: 0; }
+}
+
+[data-voice-beam="${e}"][data-paused],
+[data-voice-beam="${e}"][data-paused]::after,
+[data-voice-beam="${e}"][data-paused]::before,
+[data-voice-beam="${e}"][data-paused] [data-voice-beam-bloom] {
+  animation-play-state: paused !important;
+}
+`;
+}
+let Ae = null;
+function xa() {
+	if (typeof window > "u") return null;
+	const n = window;
+	return n.AudioContext ?? n.webkitAudioContext ?? null;
+}
+function ya() {
+	const n = xa();
+	return n ? (Ae || (Ae = new n()), Ae.state === "suspended" && Ae.resume().catch(() => {}), Ae) : null;
+}
+const ht = /* @__PURE__ */ new WeakMap();
+function Ja(n) {
+	const e = ya();
+	if (!e || n.getAudioTracks().length === 0) return null;
+	let a = ht.get(n);
+	a || (a = {
+		node: e.createMediaStreamSource(n),
+		refs: 0
+	}, ht.set(n, a)), a.refs += 1;
+	const r = e.createAnalyser();
+	r.fftSize = 1024, r.smoothingTimeConstant = .5, a.node.connect(r);
+	let t = !1;
+	return {
+		analyser: r,
+		release: () => {
+			if (!t) {
+				t = !0;
+				try {
+					a.node.disconnect(r);
+				} catch {}
+				if (a.refs -= 1, a.refs <= 0) {
+					try {
+						a.node.disconnect();
+					} catch {}
+					ht.delete(n);
+				}
+			}
+		}
+	};
+}
+const ua = /* @__PURE__ */ new WeakMap();
+function Qa(n) {
+	let e = ua.get(n);
+	return e || (e = {
+		level: 0,
+		bands: [
+			0,
+			0,
+			0
+		],
+		phase: 0,
+		scanA: 0,
+		scanT: 0,
+		t: 0,
+		lastTs: 0,
+		warp: 1
+	}, ua.set(n, e)), e;
+}
+const Xe = /* @__PURE__ */ new Set();
+let $e = null, ut = 0;
+const Za = 1e3 / 60 - 2, en = 22, tn = 500, an = 4e3;
+let Ve = 0, bt = !1, qe = !1, me = 0, ga = 0;
+const Ma = Math.PI * 2, nn = 5, on = 1.7, rn = [
+	[80, 300],
+	[300, 2e3],
+	[2e3, 6e3]
+];
+function Sa(n) {
+	return n < 0 ? 0 : n > 1 ? 1 : n;
+}
+function sn(n, e) {
+	const a = e / 2;
+	return ((n + a) % e + e) % e - a;
+}
+function cn(n, e) {
+	const a = n / (e / 2 + 4);
+	return Math.max(0, 1 - a * a);
+}
+function pa(n, e) {
+	if (n <= e) return 0;
+	const a = (n - e) / Math.max(.001, 1 - e);
+	return Sa((1 - Math.exp(-3 * a)) / (1 - Math.exp(-3)));
+}
+function Ge(n, e, a, r, t) {
+	const s = e > n ? r : t, o = 1 - Math.exp(-a / Math.max(.001, s));
+	return n + (e - n) * o;
+}
+const ln = 2, dn = .06, hn = .35, bn = .03, un = !(typeof navigator < "u" && /AppleWebKit/.test(navigator.userAgent) && !/Chrome\/|Chromium\/|Edg\/|OPR\//.test(navigator.userAgent)), fa = .05, gn = 6, pn = 12, fn = .1, va = .1, vn = 170, mn = 64, ma = 56;
+function $n(n, e, a, r) {
+	const t = n < 0 ? 1 - r : 1 + r, s = Math.max(.05, a * t), o = Math.exp(-Math.pow(Math.abs(n) / s, e)), i = Math.exp(-Math.pow(1 / s, e));
+	return Math.max(0, (o - i) / (1 - i));
+}
+function wn(n, e, a, r, t) {
+	if (a <= 0 || e <= 0) return 0;
+	const s = e * Math.max(0, Math.min(.98, r));
+	if (n <= s) return 0;
+	const o = Math.min(1, (n - s) / Math.max(1, e - s));
+	return a * Math.pow(o, Math.max(.5, t));
+}
+function Ta(n, e, a) {
+	return Math.max(0, Math.min(n, e / 2, a / 2));
+}
+function gt(n, e, a, r = 0) {
+	if (a <= 0) return 0;
+	const t = Math.min(n, e - n) - r;
+	if (t >= a) return 0;
+	if (t <= 0) return a;
+	const s = a - t;
+	return a - Math.sqrt(Math.max(0, a * a - s * s));
+}
+function xn(n, e, a, r) {
+	const t = a / 2 + e.cx * e.w, s = vn * n.rangeWidth * e.w * e.mw, o = r * .82 * Math.min(1, n.scale), i = Math.min(o, (mn * n.rangeHeight * e.h + e.lift) * n.bandPosition), u = r - n.bandOffset, l = Math.min(1, e.corner * 4), p = n.bandTail * (1 - l * l * (3 - 2 * l)), b = p > .001, m = b ? n.bandTailOverflow : 0, d = b ? -m : t - s, h = b ? a + m : t + s, T = [];
+	for (let O = 0; O <= ma; O++) {
+		const L = d + (h - d) * O / ma, _ = Math.max(-1, Math.min(1, (L - t) / Math.max(1, s))), G = (L < t ? t : a - t) + m, U = $n(_, n.bandCurve, n.bandSpread, n.bandSkew) + wn(Math.abs(L - t), G, p, n.bandTailPosition, n.bandTailCurve), E = e.corner > 0 ? gt(L, a, Ta(n.radius, a, r)) * e.corner : 0;
+		T.push([L, u - i * U - E]);
+	}
+	return T;
+}
+function yn(n, e, a, r, t) {
+	for (const [s, o] of [["", 1], ["-z", .5]]) {
+		const i = (b) => (b * o).toFixed(1) + "px", u = a.map(([b, m]) => `${i(b)} ${i(m)}`), l = `polygon(0 ${i(t)}, ${u.join(", ")}, ${i(r)} ${i(t)})`, p = `polygon(0 0, ${i(r)} 0, ${i(r)} ${i(t)}, ${u.slice().reverse().join(", ")}, 0 ${i(t)})`;
+		n.style.setProperty(`--vb-clip-below${s}-${e}`, l), n.style.setProperty(`--vb-clip-above${s}-${e}`, p);
+	}
+}
+function Mn(n, e, a) {
+	let r = a;
+	for (let i = 0; i < e.length; i++) e[i][1] < r && (r = e[i][1]);
+	const t = Math.max(0, Math.min(.9, Math.floor((r - gn) / a / fa) * fa));
+	if (t === n.filterTop) return;
+	n.filterTop = t;
+	const s = 1 + Math.max(fn, pn / a), o = n.filter;
+	o.setAttribute("x", `${-va * 100}%`), o.setAttribute("width", `${(1 + 2 * va) * 100}%`), o.setAttribute("y", `${(t * 100).toFixed(0)}%`), o.setAttribute("height", `${((s - t) * 100).toFixed(1)}%`);
+}
+function Sn(n, e, a) {
+	const { canvas: r, ctx: t, el: s, config: o } = n;
+	if (!r || !t) return;
+	const i = s.clientWidth, u = s.clientHeight;
+	if (!i || !u) return;
+	const l = Math.min(ln, typeof window < "u" && window.devicePixelRatio || 1), p = Math.round(i * l), b = Math.round(u * l);
+	(r.width !== p || r.height !== b) && (r.width = p, r.height = b), t.setTransform(l, 0, 0, l, 0, 0), t.clearRect(0, 0, i, u);
+	const m = n.haloCanvas, d = n.haloCtx;
+	m && d && ((m.width !== p || m.height !== b) && (m.width = p, m.height = b), d.setTransform(l, 0, 0, l, 0, 0), d.clearRect(0, 0, i, u));
+	const h = Math.min(1, .6 * o.bandStrength * e.strength);
+	if (h < .005 || o.bandWidth <= 0) return;
+	const T = o.theme === "dark", O = o.bandWidth * (1 + .35 * e.level), L = o.bandAberration * (.35 + .65 * e.level), _ = (4 + 12 * L) * o.scale, G = 4 * L * o.scale, U = (v, k) => {
+		t.beginPath(), t.moveTo(a[0][0] + v, a[0][1] + k);
+		for (let w = 1; w < a.length; w++) t.lineTo(a[w][0] + v, a[w][1] + k);
+	}, E = {
+		r: o.bandColors.above,
+		g: o.bandColors.mid,
+		c: o.bandColors.core,
+		b: o.bandColors.below
+	}, D = (T ? .42 : .4) * h, C = 14 * O, z = 3.5 * o.bandWidth / 2, g = z * l, H = typeof t.filter == "string", Q = H ? "0px" : `${z.toFixed(2)}px`;
+	n.cssBlur !== Q && (s.style.setProperty(`--vb-band-blur-${o.id}`, Q), s.style.setProperty(`--vb-band-halo-blur-${o.id}`, H ? "0px" : `${(z * 3).toFixed(2)}px`), n.cssBlur = Q);
+	const le = [
+		[1, .16],
+		[.72, .2],
+		[.46, .26],
+		[.22, .34]
+	], K = [
+		{
+			rgb: E.r,
+			a: 1,
+			ox: G,
+			oy: -_
+		},
+		{
+			rgb: E.g,
+			a: .55,
+			ox: G * .35,
+			oy: -_ * .35
+		},
+		{
+			rgb: E.b,
+			a: 1,
+			ox: -G,
+			oy: _
+		},
+		{
+			rgb: E.c,
+			a: .9,
+			ox: 0,
+			oy: 0
+		}
+	];
+	t.lineCap = "round", t.lineJoin = "round", t.globalCompositeOperation = "source-over";
+	const W = a[0][0], R = a[a.length - 1][0], I = (v, k) => {
+		const w = t.createLinearGradient(W, 0, R, 0), S = o.bandTail > 0 ? .015 : .18;
+		return w.addColorStop(0, `rgba(${v}, 0)`), w.addColorStop(S, `rgba(${v}, ${k.toFixed(3)})`), w.addColorStop(1 - S, `rgba(${v}, ${k.toFixed(3)})`), w.addColorStop(1, `rgba(${v}, 0)`), w;
+	}, P = !H && d ? d : t;
+	H && (t.filter = `blur(${(g * 3).toFixed(1)}px)`), P.lineCap = "round", P.lineJoin = "round", P.strokeStyle = I(E.c, D * .3), P.lineWidth = C * 2.2, P.beginPath(), P.moveTo(a[0][0], a[0][1]);
+	for (let v = 1; v < a.length; v++) P.lineTo(a[v][0], a[v][1]);
+	P.stroke(), H && (t.filter = `blur(${g.toFixed(1)}px)`);
+	for (const v of K) for (const [k, w] of le) t.strokeStyle = I(v.rgb, D * v.a * w), t.lineWidth = Math.max(.6, C * k), U(v.ox, v.oy), t.stroke();
+	H && (t.filter = "none"), t.globalCompositeOperation = "source-over";
+}
+function Tn(n) {
+	return (1 - Math.cos(Ma * n)) / 2;
+}
+function kn(n, e) {
+	const a = n.analyser, r = n.time, t = n.freq;
+	a.getFloatTimeDomainData(r);
+	let s = 0;
+	for (let i = 0; i < r.length; i++) s += r[i] * r[i];
+	e.level = Math.sqrt(s / r.length) * nn * n.config.sensitivity, a.getByteFrequencyData(t);
+	const o = a.context.sampleRate / a.fftSize;
+	for (let i = 0; i < 3; i++) {
+		const [u, l] = rn[i], p = Math.max(0, Math.floor(u / o)), b = Math.min(t.length - 1, Math.ceil(l / o));
+		let m = 0;
+		for (let h = p; h <= b; h++) m += t[h];
+		const d = b >= p ? m / (b - p + 1) / 255 : 0;
+		e.bands[i] = d * on * n.config.sensitivity;
+	}
+}
+const be = {
+	level: 0,
+	bands: [
+		0,
+		0,
+		0
+	]
+};
+function ka(n) {
+	$e = requestAnimationFrame(ka);
+	const e = Ve ? n - Ve : 0;
+	if (Ve = n, bt) {
+		if (qe = !qe, qe) return;
+		n >= ga && (bt = !1, me = 0);
+	} else e > en ? me ? n - me > tn && (bt = !0, qe = !1, ga = n + an) : me = n : me = 0;
+	n - ut < Za || (ut = n, Xe.forEach((a) => {
+		var ue;
+		const { el: r, config: t, source: s, s: o } = a, i = t.paused;
+		if (i && a.paintedConfig === t) return;
+		const u = i ? 0 : o.lastTs ? Math.min(.05, (n - o.lastTs) / 1e3) : 1 / 60;
+		o.lastTs = n, o.t += u;
+		const l = o.t;
+		if (!i) if (a.analyser) kn(a, be);
+		else {
+			const f = s.getLevel ? Sa(s.getLevel()) : 0;
+			be.level = f, be.bands[0] = f, be.bands[1] = f * (.72 + .28 * Math.sin(l * 9.1)), be.bands[2] = f * (.6 + .4 * Math.sin(l * 13.7 + 2));
+		}
+		const p = pa(be.level, t.threshold);
+		o.level = Ge(o.level, p, u, t.attack, t.release);
+		for (let f = 0; f < 3; f++) {
+			const B = pa(be.bands[f], t.threshold * .6);
+			o.bands[f] = Ge(o.bands[f], B, u, t.attack, t.release * 1.15);
+		}
+		const b = Ka * t.lobeSpacing;
+		t.processing && o.scanA < .001 && o.scanT === 0 && (o.scanT = Math.max(.05, t.processingDuration) / 2);
+		const d = Math.max(.05, t.processingEase);
+		o.scanA = Ge(o.scanA, t.processing ? 1 : 0, u, d * .9, d * .8), t.processing ? o.scanT += u : o.scanA < .001 && (o.scanT = 0);
+		const h = o.scanA * o.scanA * (3 - 2 * o.scanA), T = r.clientWidth, O = r.clientHeight, L = b / 2 * t.processingTravel, _ = o.scanT / Math.max(.05, t.processingDuration), G = Math.floor(_), U = _ - G, E = Math.max(1, t.processingCurve), D = U < .5 ? .5 * Math.pow(2 * U, E) : 1 - .5 * Math.pow(2 - 2 * U, E), C = t.reducedMotion ? 0 : G % 2 === 0 ? 2 * D - 1 : 1 - 2 * D, z = h * L * C, g = 1 - h * .6, H = 1 - h * .45, Q = 1 + h * .3 * (1 - C * C), le = t.reducedMotion ? .5 : .5 + .5 * Math.sin(Ma * l / t.breatheDuration), K = o.level + (1 - o.level) * t.idle * le, W = Math.max(0, Math.min(1, (h - .25) / .75)), R = W * W * (3 - 2 * W), I = Math.max(K, t.processingLevel * R), P = .15 + .85 * I, v = .5 + t.reach * I, k = (.85 + t.spread * I) * Q;
+		t.flow !== 0 && !t.reducedMotion && (o.phase = ((o.phase + t.flow * I * u) % b + b) % b), r.style.setProperty(`--vb-level-${t.id}`, o.level.toFixed(3)), r.style.setProperty(`--vb-cx-${t.id}`, `${z.toFixed(1)}px`), r.style.setProperty(`--vb-mw-${t.id}`, H.toFixed(3));
+		const w = t.bend * I;
+		r.style.setProperty(`--vb-bh-${t.id}`, `${Math.max(0, w).toFixed(1)}px`);
+		const S = t.bend > 0 ? Math.min(1, w / t.bend) : 0;
+		r.style.setProperty(`--vb-bendA-${t.id}`, S.toFixed(3));
+		const x = {
+			cx: z,
+			w: k,
+			h: v,
+			mw: H,
+			lift: w,
+			strength: S,
+			level: o.level,
+			corner: h
+		}, y = T / 2 + z * k, oe = 30 * t.scale * k, xe = Ta(t.radius, T, O), re = h * t.cornerFollow;
+		r.style.setProperty(`--vb-cy-${t.id}`, `${(-gt(y, T, xe, oe * 1.4) * re).toFixed(1)}px`), o.warp = Ge(o.warp, t.processing ? 0 : 1, u, hn, dn);
+		const ye = o.warp, V = a.displace != null && ye < bn;
+		if (V !== a.warpOff && (a.warpOff = V, V ? r.setAttribute("data-voice-warp", "off") : r.removeAttribute("data-voice-warp")), T && O && (a.ctx || a.displace)) {
+			const f = xn(t, x, T, O);
+			(a.displace && !V || t.coreLight > 0) && yn(r, t.id, f, T, O), a.filter && !V && un && Mn(a, f, O), a.ctx && Sn(a, x, f);
+		}
+		if (a.displace && !V) {
+			const f = t.reducedMotion ? 0 : t.distortion * 120 * t.scale * (.15 + .85 * I) * ye;
+			a.displace.scale.baseVal = f, a.noiseShift && (a.noiseShift.dx.baseVal = 8 * t.scale * Math.sin(l * .9), a.noiseShift.dy.baseVal = 4 * t.scale * Math.sin(l * .6 + 1.3));
+		}
+		r.style.setProperty(`--vb-glow-${t.id}`, P.toFixed(3)), r.style.setProperty(`--vb-h-${t.id}`, v.toFixed(3)), r.style.setProperty(`--vb-w-${t.id}`, k.toFixed(3));
+		for (let f = 0; f < we.length; f++) {
+			const B = we[f], j = sn(B.x * t.lobeSpacing + o.phase, b), Z = t.bands ? .6 + .7 * o.bands[B.band] : 1;
+			r.style.setProperty(`--vb-x${f}-${t.id}`, `${(j * g).toFixed(1)}px`), r.style.setProperty(`--vb-l${f}-${t.id}`, (Z * cn(j, b)).toFixed(3));
+			const ge = T / 2 + (z + j * g) * k;
+			r.style.setProperty(`--vb-y${f}-${t.id}`, `${(-gt(ge, T, xe, oe) * re).toFixed(1)}px`);
+		}
+		const Me = t.staticColors || t.reducedMotion || t.hueRange === 0 ? 0 : -t.hueRange + 2 * t.hueRange * Tn(l / t.hueDuration);
+		r.style.setProperty(`--vb-hue-${t.id}`, `${Me.toFixed(2)}deg`), (ue = a.onLevel) == null || ue.call(a, o.level), a.paintedConfig = t;
+	}));
+}
+function An() {
+	$e ?? (ut = 0, Ve = 0, me = 0, $e = requestAnimationFrame(ka));
+}
+function On() {
+	Xe.size === 0 && $e != null && (cancelAnimationFrame($e), $e = null);
+}
+function Fn(n, e, a, r) {
+	const t = {
+		el: n,
+		config: e,
+		source: a,
+		onLevel: r,
+		analyser: null,
+		releaseAnalyser: null,
+		time: null,
+		freq: null,
+		canvas: null,
+		ctx: null,
+		haloCanvas: null,
+		haloCtx: null,
+		displace: null,
+		noiseShift: null,
+		filter: null,
+		filterTop: -1,
+		s: Qa(n),
+		paintedConfig: null,
+		cssBlur: null,
+		warpOff: n.hasAttribute("data-voice-warp")
+	};
+	e.distortion > 0 && (t.displace = n.querySelector(":scope > svg feDisplacementMap"), t.noiseShift = n.querySelector(":scope > svg feOffset"), t.filter = n.querySelector(":scope > svg filter"));
+	const s = n.querySelector(":scope > [data-voice-beam-band]");
+	if (s) {
+		t.canvas = s, t.ctx = s.getContext("2d");
+		const o = n.querySelector(":scope > [data-voice-beam-band-halo]");
+		o && (t.haloCanvas = o, t.haloCtx = o.getContext("2d"));
+	}
+	if (t.s.lastTs = 0, a.stream) {
+		const o = Ja(a.stream);
+		o && (t.analyser = o.analyser, t.releaseAnalyser = o.release, t.time = new Float32Array(o.analyser.fftSize), t.freq = new Uint8Array(o.analyser.frequencyBinCount));
+	}
+	return Xe.add(t), An(), () => {
+		var o;
+		Xe.delete(t), (o = t.releaseAnalyser) == null || o.call(t), On();
+	};
+}
+const Rn = {
+	scale: 1,
+	glowSize: 1,
+	processingDuration: 1.1,
+	processingLevel: .55,
+	processingTravel: 1.55,
+	processingCurve: 2.1,
+	cornerFollow: .45,
+	strokeOpacity: 1,
+	innerOpacity: 1,
+	bloomOpacity: 1,
+	idle: .18,
+	reach: 1.2,
+	spread: 1.05,
+	flow: 48,
+	bend: 60,
+	bandStrength: 1.55,
+	bandWidth: 2.15,
+	bandPosition: .35,
+	bandCurve: 1.75,
+	bandSpread: .87,
+	bandSkew: .12,
+	bandOffset: -27,
+	bandTail: .59,
+	bandTailPosition: .67,
+	bandTailCurve: 2.4,
+	bandTailOverflow: 15,
+	bandAberration: .89,
+	distortion: .62,
+	distortionDetail: 2.3,
+	glowWidth: .65,
+	glowHeight: 1.25,
+	lobeSpacing: .85,
+	rangeWidth: .75,
+	rangeHeight: 1,
+	softness: 1.07,
+	coreSize: 1,
+	coreLight: 0,
+	coreLightWidth: 1,
+	coreLightHeight: 1,
+	strokeScale: 1,
+	innerScale: 1,
+	innerHeight: 1,
+	bloomScale: 1,
+	bloomHeight: 1
+}, Pn = {
+	default: {},
+	pill: {
+		scale: .45,
+		glowSize: .95,
+		strokeOpacity: 1.2,
+		innerOpacity: .85,
+		reach: 1.35,
+		spread: 1.1,
+		flow: 0,
+		bend: 23,
+		bandStrength: 1.55,
+		bandWidth: 1.85,
+		bandCurve: 1.95,
+		bandSpread: .38,
+		bandOffset: -16,
+		bandTail: 0,
+		processingTravel: 2,
+		cornerFollow: 0,
+		distortion: .45,
+		distortionDetail: 3,
+		glowWidth: .65,
+		glowHeight: .95,
+		lobeSpacing: .45,
+		rangeWidth: .8,
+		rangeHeight: .7,
+		softness: .88,
+		coreSize: .25,
+		strokeScale: 1.25,
+		innerScale: .95,
+		bloomScale: 1.05,
+		bloomHeight: 2.25
+	},
+	mobile: {
+		scale: 1.25,
+		spread: .45,
+		reach: 3,
+		flow: 60,
+		bend: 70,
+		bandWidth: 2.4,
+		bandCurve: 1.55,
+		bandSpread: .9,
+		bandOffset: -50,
+		bandTail: .62,
+		bandTailPosition: .42,
+		bandTailCurve: 2.7,
+		bandTailOverflow: 22,
+		processingDuration: 1.05,
+		processingLevel: .35,
+		processingTravel: 1,
+		cornerFollow: .4,
+		bandStrength: 1.8,
+		distortionDetail: 2,
+		glowWidth: 1.15,
+		glowHeight: 2.1,
+		lobeSpacing: 1.35,
+		rangeWidth: 1.25,
+		rangeHeight: 1.2,
+		softness: 1.1
+	}
+}, Ln = {
+	default: { brightness: 1.15 },
+	pill: {
+		brightness: 1.35,
+		saturation: 1.5
+	},
+	mobile: {
+		strength: 1,
+		brightness: 1.2,
+		saturation: 1.5
+	}
+}, Cn = {
+	default: {},
+	pill: {},
+	mobile: { strength: 1 }
+};
+function Wn(n = "default", e = "dark") {
+	return (e === "light" ? Cn[n] : void 0) ?? Ln[n];
+}
+const In = {
+	default: { bandStrength: 1.7 },
+	pill: { bandStrength: 2 },
+	mobile: { bandStrength: 1.7 }
+};
+function En(n = "default", e = "dark") {
+	const a = Pn[n], r = {};
+	return e === "light" && (a.reach === void 0 && (r.reach = 1.8), a.spread === void 0 && (r.spread = .8), a.coreLight === void 0 && (r.coreLight = 1.8)), {
+		...Rn,
+		...r,
+		...a,
+		...e === "light" ? In[n] : void 0
+	};
+}
+const Ue = {
+	dark: {
+		core: "255, 255, 255",
+		above: "255, 70, 80",
+		mid: "90, 255, 150",
+		below: "80, 140, 255"
+	},
+	light: {
+		core: "197, 139, 255",
+		above: "255, 122, 182",
+		mid: "126, 196, 255",
+		below: "45, 255, 171"
+	}
+}, zn = 1, _n = 16, Dn = 6e4, $a = typeof navigator < "u" && /AppleWebKit/.test(navigator.userAgent) && !/Chrome\/|Chromium\/|Edg\/|OPR\//.test(navigator.userAgent), Hn = (() => {
+	if (typeof document > "u") return !0;
+	const n = document.createElement("canvas").getContext("2d");
+	return !!n && typeof n.filter == "string";
+})();
+function Bn() {
+	const [n, e] = useState(() => typeof window > "u" || window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+	return useEffect(() => {
+		if (typeof window > "u") return;
+		const a = window.matchMedia("(prefers-color-scheme: dark)"), r = (t) => e(t.matches ? "dark" : "light");
+		return a.addEventListener("change", r), () => a.removeEventListener("change", r);
+	}, []), n;
+}
+function Nn() {
+	const [n, e] = useState(() => typeof window > "u" || !window.matchMedia ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+	return useEffect(() => {
+		if (typeof window > "u" || !window.matchMedia) return;
+		const a = window.matchMedia("(prefers-reduced-motion: reduce)"), r = (t) => e(t.matches);
+		return a.addEventListener("change", r), () => a.removeEventListener("change", r);
+	}, []), n;
+}
+function qn(n, e) {
+	return n === "auto" ? e : n;
+}
+//#endregion
+//#region src/card/visual.ts
+const VoiceBeamView = forwardRef(function({ children: e, type: a = "default", scale: r, stream: t = null, level: s = 0, sensitivity: o = 3.1, threshold: i = .015, attack: u = .325, release: l = .86, idle: p, breatheDuration: b = 5.2, reach: m, spread: d, bands: h = !0, flow: T, processing: O = !1, processingDuration: L, processingLevel: _, processingTravel: G, processingCurve: U, cornerFollow: E, processingEase: D = .6, colorVariant: C = "colorful", colors: z, bandColors: g, theme: H = "dark", staticColors: Q = !1, hueRange: le, hueDuration: K, active: W = !0, paused: R = !1, borderRadius: I, brightness: P, saturation: v, glowSize: k, strokeOpacity: w, innerOpacity: S, bloomOpacity: x, bend: y, bandStrength: oe, bandWidth: xe, bandPosition: re, bandCurve: ye, bandSpread: V, bandSkew: Me, bandOffset: ue, bandTail: f, bandTailPosition: B, bandTailCurve: j, bandTailOverflow: Z, bandAberration: ge, distortion: Fe, distortionDetail: Ye, glowWidth: Je, glowHeight: Qe, lobeSpacing: pe, rangeWidth: Re, rangeHeight: Ze, softness: et, coreSize: tt, coreLight: at, coreLightWidth: ie, coreLightHeight: fe, strokeScale: Pe, innerScale: $, innerHeight: A, bloomScale: N, bloomHeight: ae, strength: nt, className: ot, style: rt, css: Le, onLevel: pt, onActivate: Ce, onDeactivate: We, onAnimationEnd: Ie, ...Aa }, Se) {
+	const de = useId().replace(/:/g, "-"), Y = qn(H, Bn()), Fa = z ? z.join("|") : "", Ra = g ? [
+		g.core,
+		g.above,
+		g.mid,
+		g.below
+	].join("|") : "", c = En(a, Y), F = Math.max(.05, r ?? c.scale), ft = k ?? c.glowSize, vt = w ?? c.strokeOpacity, mt = S ?? c.innerOpacity, $t = x ?? c.bloomOpacity, wt = L ?? c.processingDuration, xt = _ ?? c.processingLevel, yt = G ?? c.processingTravel, Mt = U ?? c.processingCurve, St = E ?? c.cornerFollow, Tt = p ?? c.idle, kt = m ?? c.reach, At = d ?? c.spread, Ot = (T ?? c.flow) * F, Ft = (y ?? c.bend) * F, Rt = oe ?? c.bandStrength, Pt = (xe ?? c.bandWidth) * F, Lt = re ?? c.bandPosition, Ct = ye ?? c.bandCurve, Wt = V ?? c.bandSpread, It = Me ?? c.bandSkew, Et = (ue ?? c.bandOffset) * F, zt = f ?? c.bandTail, _t = B ?? c.bandTailPosition, Dt = j ?? c.bandTailCurve, Ht = (Z ?? c.bandTailOverflow) * F, Bt = ge ?? c.bandAberration, Pa = Fe ?? c.distortion, Nt = (Ye ?? c.distortionDetail) / F, qt = (Je ?? c.glowWidth) * F, Gt = (Qe ?? c.glowHeight) * F, Ut = (pe ?? c.lobeSpacing) * F, Ee = (Re ?? c.rangeWidth) * F, ze = (Ze ?? c.rangeHeight) * F, Kt = et ?? c.softness, Vt = (tt ?? c.coreSize) * F, Te = Math.max(0, Math.min(3, at ?? c.coreLight)), jt = ie ?? c.coreLightWidth, Xt = fe ?? c.coreLightHeight, Yt = Pe ?? c.strokeScale, Jt = $ ?? c.innerScale, Qt = A ?? c.innerHeight, Zt = N ?? c.bloomScale, ea = ae ?? c.bloomHeight, ta = Nn(), ke = useRef(null), [he, aa] = useState(W), [se, na] = useState(!1), [it, La] = useState(!0), [Ca, Wa] = useState(null), [Ia, Ea] = useState(0);
+	useEffect(() => {
+		if (!$a) return;
+		const M = ke.current;
+		if (!M) return;
+		const X = () => Ea(M.clientWidth * M.clientHeight);
+		if (X(), typeof ResizeObserver > "u") return;
+		const ce = new ResizeObserver(X);
+		return ce.observe(M), () => ce.disconnect();
+	}, []);
+	const ve = $a && Ia > Dn ? 0 : Pa;
+	useEffect(() => {
+		if (I != null) return;
+		const M = ke.current;
+		if (!M) return;
+		const X = () => {
+			const ee = M.firstElementChild;
+			if (!ee) return;
+			const He = getComputedStyle(ee), ct = parseFloat(He.borderTopLeftRadius);
+			!isNaN(ct) && ct > 0 && Wa(ct);
+		};
+		X();
+		const ce = new MutationObserver(X);
+		return ce.observe(M, {
+			childList: !0,
+			subtree: !1
+		}), () => ce.disconnect();
+	}, [I, e]), useEffect(() => {
+		W && !he && !se ? aa(!0) : !W && he && !se && na(!0);
+	}, [
+		W,
+		he,
+		se
+	]), useEffect(() => {
+		const M = ke.current;
+		if (!M || typeof IntersectionObserver > "u") return;
+		const X = new IntersectionObserver((ce) => {
+			for (const ee of ce) La(ee.isIntersecting);
+		}, { rootMargin: "256px" });
+		return X.observe(M), () => X.disconnect();
+	}, []);
+	const za = useCallback((M) => {
+		const X = M.animationName;
+		X.includes("fade-out") ? (aa(!1), na(!1), We?.()) : X.includes("fade-in") && Ce?.(), Ie?.(M);
+	}, [
+		Ce,
+		We,
+		Ie
+	]), J = Ga[Y], _e = I ?? Ca ?? _n, st = Wn(a, Y), _a = nt ?? st.strength ?? J.strength ?? 1, oa = le ?? J.hueRange ?? 24, ra = K ?? J.hueDuration ?? 12, ia = P ?? st.brightness ?? J.brightness, sa = v ?? st.saturation ?? J.saturation, ca = useMemo(() => Ya({
+		id: de,
+		borderRadius: _e,
+		borderWidth: zn,
+		strokeOpacity: J.strokeOpacity * vt,
+		innerOpacity: J.innerOpacity * mt,
+		bloomOpacity: J.bloomOpacity * $t,
+		innerShadow: J.innerShadow,
+		colorVariant: C,
+		colors: z,
+		brightness: ia,
+		saturation: sa,
+		theme: Y,
+		hueBase: J.hueBase ?? 0,
+		glowSize: ft * F,
+		glowWidth: qt,
+		glowHeight: Gt,
+		strokeScale: Yt,
+		innerScale: Jt,
+		innerHeight: Qt,
+		bloomScale: Zt,
+		bloomHeight: ea,
+		coreSize: Vt,
+		coreLight: Te,
+		coreLightWidth: jt,
+		coreLightHeight: Xt,
+		rangeWidth: Ee,
+		rangeHeight: ze,
+		softness: Kt,
+		distortion: ve > 0,
+		scale: F
+	}), [
+		de,
+		_e,
+		J,
+		C,
+		Fa,
+		ia,
+		sa,
+		Y,
+		c,
+		ft,
+		vt,
+		mt,
+		$t,
+		F,
+		qt,
+		Gt,
+		Yt,
+		Jt,
+		Qt,
+		Zt,
+		ea,
+		Vt,
+		Te,
+		jt,
+		Xt,
+		Ee,
+		ze,
+		Kt,
+		ve > 0
+	]), la = useMemo(() => ({
+		id: de,
+		sensitivity: Math.max(0, o),
+		threshold: Math.max(0, Math.min(.95, i)),
+		attack: Math.max(0, u),
+		release: Math.max(0, l),
+		idle: Math.max(0, Math.min(1, Tt)),
+		breatheDuration: Math.max(.2, b),
+		reach: Math.max(0, kt),
+		spread: Math.max(0, At),
+		bands: h,
+		flow: Ot,
+		lobeSpacing: Math.max(.1, Ut),
+		bend: Math.max(0, Ft),
+		bandStrength: Math.max(0, Rt),
+		bandWidth: Math.max(0, Pt),
+		bandPosition: Math.max(0, Lt),
+		bandCurve: Math.max(.3, Ct),
+		bandSpread: Math.max(.05, Wt),
+		bandSkew: Math.max(-.9, Math.min(.9, It)),
+		bandOffset: Et,
+		bandTail: Math.max(0, Math.min(1.5, zt)),
+		bandTailPosition: Math.max(0, Math.min(.98, _t)),
+		bandTailCurve: Math.max(.5, Dt),
+		bandTailOverflow: Math.max(0, Ht),
+		bandAberration: Math.max(0, Math.min(1, Bt)),
+		rangeWidth: Ee,
+		rangeHeight: ze,
+		theme: Y,
+		bandColors: {
+			core: (g == null ? void 0 : g.core) && Ne(g.core) || Ue[Y].core,
+			above: (g == null ? void 0 : g.above) && Ne(g.above) || Ue[Y].above,
+			mid: (g == null ? void 0 : g.mid) && Ne(g.mid) || Ue[Y].mid,
+			below: (g == null ? void 0 : g.below) && Ne(g.below) || Ue[Y].below
+		},
+		distortion: Math.max(0, Math.min(1, ve)),
+		coreLight: Te,
+		scale: F,
+		radius: _e,
+		processing: O,
+		processingDuration: Math.max(.05, wt),
+		processingLevel: Math.max(0, Math.min(1, xt)),
+		processingEase: Math.max(.05, D),
+		processingTravel: Math.max(0, yt),
+		processingCurve: Math.max(1, Mt),
+		cornerFollow: Math.max(0, Math.min(1, St)),
+		hueRange: Math.max(0, oa),
+		hueDuration: Math.max(.5, ra),
+		staticColors: C === "mono" ? !0 : Q,
+		reducedMotion: ta,
+		paused: R
+	}), [
+		de,
+		o,
+		i,
+		u,
+		l,
+		Tt,
+		b,
+		kt,
+		At,
+		h,
+		Ot,
+		Ut,
+		Ft,
+		Rt,
+		Pt,
+		Lt,
+		Ct,
+		Wt,
+		It,
+		Et,
+		zt,
+		_t,
+		Dt,
+		Ht,
+		Bt,
+		Ee,
+		ze,
+		Y,
+		Ra,
+		ve,
+		Te,
+		F,
+		_e,
+		O,
+		wt,
+		xt,
+		D,
+		yt,
+		Mt,
+		St,
+		oa,
+		ra,
+		Q,
+		C,
+		ta,
+		R
+	]), da = useRef(s);
+	da.current = s;
+	const De = useRef(pt);
+	De.current = pt, useEffect(() => {
+		if (!(he || se) || !it) return;
+		const M = ke.current;
+		return M ? Fn(M, la, {
+			stream: t,
+			getLevel: () => {
+				const ee = da.current;
+				return typeof ee == "function" ? ee() : ee;
+			}
+		}, (ee) => {
+			var He;
+			return (He = De.current) == null ? void 0 : He.call(De, ee);
+		}) : void 0;
+	}, [
+		la,
+		t,
+		he,
+		se,
+		it
+	]);
+	const Da = useCallback((M) => {
+		ke.current = M, typeof Se == "function" ? Se(M) : Se && (Se.current = M);
+	}, [Se]), Ha = {
+		...rt ?? {},
+		"--voice-strength": Math.max(0, Math.min(1, _a))
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", { children: Le ? `${ca}
+${Le.split("{id}").join(de)}` : ca }), /* @__PURE__ */ jsxs("div", {
+		...Aa,
+		ref: Da,
+		"data-voice-beam": de,
+		"data-voice-type": a,
+		"data-voice-halfres": "",
+		"data-active": he && !se ? "" : void 0,
+		"data-fading": se ? "" : void 0,
+		"data-paused": he && !se && (!it || R) ? "" : void 0,
+		"data-listening": t ? "" : void 0,
+		"data-processing": O ? "" : void 0,
+		className: ot,
+		style: Ha,
+		onAnimationEnd: za,
+		children: [
+			e,
+			/* @__PURE__ */ jsx("div", { "data-voice-beam-bloom": !0 }),
+			ve > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { "data-voice-beam-warp": "inner" }), /* @__PURE__ */ jsx("div", { "data-voice-beam-warp": "bloom" })] }),
+			!Hn && /* @__PURE__ */ jsx("canvas", {
+				"data-voice-beam-band-halo": !0,
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ jsx("canvas", {
+				"data-voice-beam-band": !0,
+				"aria-hidden": "true"
+			}),
+			Te > 0 && /* @__PURE__ */ jsx("div", {
+				"data-voice-beam-core": !0,
+				children: /* @__PURE__ */ jsx("div", {})
+			}),
+			ve > 0 && /* @__PURE__ */ jsx("svg", {
+				"aria-hidden": "true",
+				width: "0",
+				height: "0",
+				style: {
+					position: "absolute",
+					pointerEvents: "none"
+				},
+				children: /* @__PURE__ */ jsxs("filter", {
+					id: `vb-distort-${de}`,
+					x: "-20%",
+					y: "-20%",
+					width: "140%",
+					height: "140%",
+					colorInterpolationFilters: "sRGB",
+					children: [
+						/* @__PURE__ */ jsx("feTurbulence", {
+							type: "fractalNoise",
+							baseFrequency: `${(.012 * Nt).toFixed(4)} ${(.05 * Nt).toFixed(4)}`,
+							numOctaves: 2,
+							seed: 7,
+							result: "noise"
+						}),
+						/* @__PURE__ */ jsx("feOffset", {
+							in: "noise",
+							dx: "0",
+							dy: "0",
+							result: "moved"
+						}),
+						/* @__PURE__ */ jsx("feColorMatrix", {
+							in: "moved",
+							type: "matrix",
+							values: "1 0 0 0 0  0 0 0 0 0.5  0 0 0 0 0  0 0 0 0 1",
+							result: "map"
+						}),
+						/* @__PURE__ */ jsx("feDisplacementMap", {
+							in: "SourceGraphic",
+							in2: "map",
+							scale: 0,
+							xChannelSelector: "R",
+							yChannelSelector: "G"
+						})
+					]
+				})
+			})
+		]
+	})] });
+});
+/** Shared by enrollment, unlock and signing. The recorder remains the only audio owner. */
+var VoiceVisual = class {
+	element;
+	glow;
+	ribbon;
+	prompt;
+	themeObserver;
+	phase = "idle";
+	disposed = false;
+	constructor(document, prompt, checking) {
+		this.prompt = prompt;
+		this.ribbon = new VoiceRibbon(document, checking);
+		this.element = this.ribbon.element;
+		this.glow = document.createElement("div");
+		this.glow.className = "seams-voiceid-glow";
+		this.glow.setAttribute("aria-hidden", "true");
+		this.render();
+		const nonce = styleNonce();
+		if (nonce) for (const style of this.glow.querySelectorAll("style")) style.nonce = nonce;
+		this.themeObserver = new MutationObserver(this.render);
+		this.themeObserver.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["data-theme"]
+		});
+		this.themeObserver.observe(document.body, {
+			attributes: true,
+			attributeFilter: ["data-theme"]
+		});
+	}
+	listen() {
+		this.setPhase("listening");
+	}
+	add(event) {
+		this.ribbon.add(event);
+	}
+	checking() {
+		this.setPhase("processing");
+	}
+	accept() {
+		this.setPhase("idle");
+	}
+	/** The glow keeps working while the line rests flat, for a status line that takes its place. */
+	flatten() {
+		if (this.disposed) return;
+		this.phase = "processing";
+		this.ribbon.setPhase("idle");
+		this.render();
+	}
+	ready() {
+		this.setPhase("idle");
+	}
+	/** The glow settles while the ribbon closes into the success seal; resolves when the check is drawn. */
+	succeed(begin) {
+		if (this.disposed) return Promise.resolve();
+		this.phase = "idle";
+		this.render();
+		return this.ribbon.succeed(begin);
+	}
+	stop() {
+		if (this.disposed) return;
+		this.disposed = true;
+		this.themeObserver.disconnect();
+		this.ribbon.dispose();
+		render(null, this.glow);
+	}
+	setPhase(phase) {
+		if (this.disposed) return;
+		this.phase = phase;
+		this.ribbon.setPhase(phase);
+		this.render();
+	}
+	render = () => {
+		if (this.disposed) return;
+		render(createElement(VoiceBeamView, {
+			className: "seams-voiceid-beam",
+			theme: (this.prompt.closest("[data-theme]")?.getAttribute("data-theme") ?? this.prompt.ownerDocument.documentElement.getAttribute("data-theme")) === "light" ? "light" : "dark",
+			level: this.ribbon.readLevel,
+			processing: this.phase === "processing",
+			active: this.phase !== "idle",
+			staticColors: true,
+			colorVariant: "ocean",
+			borderRadius: Number.parseFloat(getComputedStyle(this.prompt).borderRadius) || 16,
+			children: null
+		}), this.glow);
+	};
+};
+//#endregion
+export { VoiceVisual as t };