@ghchinoy/lit-audio-ui 0.1.0 → 0.1.1

package/README.md

@@ -2,6 +2,8 @@
 
 A lightweight, framework-agnostic Web Components library for high-performance audio visualization and control, built natively for the browser using [Lit](https://lit.dev/).
 
+Take a look at the [examples and documentation](https://ghchinoy.github.io/scream-ui/) to see the components in action.
+
 ## Why Lit Web Components?
 
 When building complex, high-frequency audio visualizers (like real-time canvas waveforms), performance and bundle size are critical. Traditional React/ShadcnUI libraries often bring significant overhead due to Virtual DOM reconciliation loops and heavy CSS framework dependencies (like Tailwind).
@@ -14,16 +16,12 @@ By leveraging **Lit** and native Web Components, this library offers distinct ad
 * **Scoped Styling:** Uses standard CSS variables and Material Design 3 tokens. No Tailwind installation, complex class merging, or CSS-in-JS runtime required.
 * **Atomic Composition:** Powered by `@lit/context`, the complex monolithic audio players are broken down into atomic, highly composable state machines.
 
-## Acknowledgements
-
-This project is deeply inspired by the beautiful, open-source audio components designed and built by **[ElevenLabs](https://elevenlabs.io/)** (`@elevenlabs/ui`). 
-
-We are incredibly grateful for their contribution to the open-source community. Their original repository provided the foundational audio mathematics, canvas drawing logic, and WebGL shader configurations that make these visualizers look buttery smooth. While their library focuses heavily on the React ecosystem, this project reimagines those beautiful designs as standard, universal browser APIs.
 
 ## How to Use the Lit Components (For Users)
 
 As a Web Components library, you can use these elements directly in your HTML or inside any frontend framework.
 
+
 ### 1. Installation
 Install the package via npm:
 ```bash
@@ -135,6 +133,11 @@ npm run lint
 npm run fix
 ```
 
+## Acknowledgements
+
+This project is deeply inspired by the beautiful, open-source audio components designed and built by **[ElevenLabs](https://elevenlabs.io/)** (`@elevenlabs/ui`). 
+
+We are incredibly grateful for their contribution to the open-source community. Their original repository provided the foundational audio mathematics, canvas drawing logic, and WebGL shader configurations that make these visualizers look buttery smooth. While their library focuses heavily on the React ecosystem, this project reimagines those beautiful designs as standard, universal browser APIs.
 
 # License
 

package/dist/scream-audio-ui.es.js

@@ -13,9 +13,8 @@ import "@material/web/divider/divider.js";
 import "@material/web/button/text-button.js";
 import "@material/web/button/filled-tonal-button.js";
 import "@material/web/textfield/outlined-text-field.js";
-import * as c from "three";
 import "@material/web/iconbutton/icon-button.js";
-function l(e, t, n, r) {
+function c(e, t, n, r) {
 	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
 	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
 	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
@@ -36,7 +35,7 @@ function l(e, t, n, r) {
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-var u = class extends e {
+var l = class extends e {
 	constructor(...e) {
 		super(...e), this.state = "idle";
 	}
@@ -78,7 +77,7 @@ var u = class extends e {
 		}));
 	}
 };
-l([i({ type: String })], u.prototype, "state", void 0), u = l([r("scream-voice-button")], u);
+c([i({ type: String })], l.prototype, "state", void 0), l = c([r("scream-voice-button")], l);
 /**
 * Normalizes raw frequency data from the AnalyserNode into an array of values between 0.0 and 1.0.
 *
@@ -86,7 +85,7 @@ l([i({ type: String })], u.prototype, "state", void 0), u = l([r("scream-voice-b
 * @param dataArray A pre-allocated Uint8Array to hold the raw byte data
 * @returns An array of normalized numbers (0.0 to 1.0)
 */
-function d(e, t) {
+function u(e, t) {
 	e.getByteFrequencyData(t);
 	let n = [];
 	for (let e = 0; e < t.length; e++) n.push(t[e] / 255);
@@ -100,7 +99,7 @@ function d(e, t) {
 * @param height The logical height of the canvas
 * @param fadeWidth The physical width in pixels of the fade effect
 */
-function f(e, t, n, r) {
+function d(e, t, n, r) {
 	if (r <= 0 || t <= 0) return;
 	let i = e.createLinearGradient(0, 0, t, 0), a = Math.min(.2, r / t);
 	i.addColorStop(0, "rgba(0,0,0,0)"), i.addColorStop(a, "rgba(0,0,0,1)"), i.addColorStop(1 - a, "rgba(0,0,0,1)"), i.addColorStop(1, "rgba(0,0,0,0)"), e.globalCompositeOperation = "destination-in", e.fillStyle = i, e.fillRect(0, 0, t, n), e.globalCompositeOperation = "source-over";
@@ -120,7 +119,7 @@ function f(e, t, n, r) {
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-var p = class extends e {
+var f = class extends e {
 	constructor(...e) {
 		super(...e), this.active = !1, this.processing = !1, this.barWidth = 3, this.barHeight = 4, this.barGap = 1, this.barRadius = 1.5, this.fadeEdges = !0, this.fadeWidth = 24, this.height = 64, this.sensitivity = 1, this.updateRate = 30, this._animationFrameId = 0, this._lastUpdateTime = 0, this._currentBars = [], this._processingTime = 0, this._transitionProgress = 0, this._lastActiveData = [];
 	}
@@ -181,7 +180,7 @@ var p = class extends e {
 		if (this.active && this.analyserNode && this._dataArray) {
 			if (e - this._lastUpdateTime > this.updateRate) {
 				this._lastUpdateTime = e;
-				let t = d(this.analyserNode, this._dataArray), r = Math.floor(t.length * .05), i = Math.floor(t.length * .4), a = t.slice(r, i), o = Math.floor(n / 2), s = Array(n).fill(.05), c = a.length - 1;
+				let t = u(this.analyserNode, this._dataArray), r = Math.floor(t.length * .05), i = Math.floor(t.length * .4), a = t.slice(r, i), o = Math.floor(n / 2), s = Array(n).fill(.05), c = a.length - 1;
 				for (let e = 0; e <= o; e++) {
 					let t = e / o, r = a[Math.floor(t * c)] || 0;
 					t > .8 && (r *= 1 - (t - .8) * 5);
@@ -224,10 +223,10 @@ var p = class extends e {
 			let a = this._currentBars[n] || .05, s = n * i, c = Math.max(this.barHeight, a * t.height * .8), l = o - c / 2;
 			e.fillStyle = r, e.globalAlpha = .4 + a * .6, this.barRadius > 0 ? (e.beginPath(), e.roundRect(s, l, this.barWidth, c, this.barRadius), e.fill()) : e.fillRect(s, l, this.barWidth, c);
 		}
-		this.fadeEdges && f(e, t.width, t.height, this.fadeWidth), e.globalAlpha = 1;
+		this.fadeEdges && d(e, t.width, t.height, this.fadeWidth), e.globalAlpha = 1;
 	}
 };
-l([i({ type: Boolean })], p.prototype, "active", void 0), l([i({ type: Boolean })], p.prototype, "processing", void 0), l([i({ attribute: !1 })], p.prototype, "analyserNode", void 0), l([i({ type: Number })], p.prototype, "barWidth", void 0), l([i({ type: Number })], p.prototype, "barHeight", void 0), l([i({ type: Number })], p.prototype, "barGap", void 0), l([i({ type: Number })], p.prototype, "barRadius", void 0), l([i({ type: String })], p.prototype, "barColor", void 0), l([i({ type: Boolean })], p.prototype, "fadeEdges", void 0), l([i({ type: Number })], p.prototype, "fadeWidth", void 0), l([i({ type: Number })], p.prototype, "height", void 0), l([i({ type: Number })], p.prototype, "sensitivity", void 0), l([i({ type: Number })], p.prototype, "updateRate", void 0), l([a("canvas")], p.prototype, "_canvas", void 0), l([a(".container")], p.prototype, "_container", void 0), p = l([r("ui-live-waveform")], p);
+c([i({ type: Boolean })], f.prototype, "active", void 0), c([i({ type: Boolean })], f.prototype, "processing", void 0), c([i({ attribute: !1 })], f.prototype, "analyserNode", void 0), c([i({ type: Number })], f.prototype, "barWidth", void 0), c([i({ type: Number })], f.prototype, "barHeight", void 0), c([i({ type: Number })], f.prototype, "barGap", void 0), c([i({ type: Number })], f.prototype, "barRadius", void 0), c([i({ type: String })], f.prototype, "barColor", void 0), c([i({ type: Boolean })], f.prototype, "fadeEdges", void 0), c([i({ type: Number })], f.prototype, "fadeWidth", void 0), c([i({ type: Number })], f.prototype, "height", void 0), c([i({ type: Number })], f.prototype, "sensitivity", void 0), c([i({ type: Number })], f.prototype, "updateRate", void 0), c([a("canvas")], f.prototype, "_canvas", void 0), c([a(".container")], f.prototype, "_container", void 0), f = c([r("ui-live-waveform")], f);
 /**
 * Copyright 2026 Google LLC
 *
@@ -243,7 +242,7 @@ l([i({ type: Boolean })], p.prototype, "active", void 0), l([i({ type: Boolean }
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-var m = class extends e {
+var p = class extends e {
 	constructor(...e) {
 		super(...e), this.state = "idle", this.disabled = !1, this._showFeedback = !1;
 	}
@@ -426,7 +425,7 @@ var m = class extends e {
 		}));
 	}
 };
-l([i({ type: String })], m.prototype, "state", void 0), l([i({ type: String })], m.prototype, "label", void 0), l([i({ type: String })], m.prototype, "trailing", void 0), l([i({ type: Boolean })], m.prototype, "disabled", void 0), l([i({ attribute: !1 })], m.prototype, "analyserNode", void 0), l([o()], m.prototype, "_showFeedback", void 0), m = l([r("ui-voice-button")], m);
+c([i({ type: String })], p.prototype, "state", void 0), c([i({ type: String })], p.prototype, "label", void 0), c([i({ type: String })], p.prototype, "trailing", void 0), c([i({ type: Boolean })], p.prototype, "disabled", void 0), c([i({ attribute: !1 })], p.prototype, "analyserNode", void 0), c([o()], p.prototype, "_showFeedback", void 0), p = c([r("ui-voice-button")], p);
 /**
 * Copyright 2026 Google LLC
 *
@@ -442,7 +441,7 @@ l([i({ type: String })], m.prototype, "state", void 0), l([i({ type: String })],
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-var h = class extends e {
+var m = class extends e {
 	constructor(...e) {
 		super(...e), this.data = [], this.barWidth = 4, this.barHeight = 4, this.barGap = 2, this.barRadius = 2, this.fadeEdges = !0, this.fadeWidth = 24, this.height = 128;
 	}
@@ -507,16 +506,16 @@ var h = class extends e {
 			let o = Math.floor(n / i * this.data.length), s = this.data[o] || 0, c = Math.max(this.barHeight, s * t.height * .8), l = n * (this.barWidth + this.barGap), u = a - c / 2;
 			e.fillStyle = r, e.globalAlpha = .3 + s * .7, this.barRadius > 0 ? (e.beginPath(), e.roundRect(l, u, this.barWidth, c, this.barRadius), e.fill()) : e.fillRect(l, u, this.barWidth, c);
 		}
-		this.fadeEdges && f(e, t.width, t.height, this.fadeWidth), e.globalAlpha = 1;
+		this.fadeEdges && d(e, t.width, t.height, this.fadeWidth), e.globalAlpha = 1;
 	}
 };
-l([i({ type: Array })], h.prototype, "data", void 0), l([i({ type: Number })], h.prototype, "barWidth", void 0), l([i({ type: Number })], h.prototype, "barHeight", void 0), l([i({ type: Number })], h.prototype, "barGap", void 0), l([i({ type: Number })], h.prototype, "barRadius", void 0), l([i({ type: String })], h.prototype, "barColor", void 0), l([i({ type: Boolean })], h.prototype, "fadeEdges", void 0), l([i({ type: Number })], h.prototype, "fadeWidth", void 0), l([i({ type: Number })], h.prototype, "height", void 0), l([a("canvas")], h.prototype, "_canvas", void 0), l([a(".container")], h.prototype, "_container", void 0), h = l([r("ui-waveform")], h);
+c([i({ type: Array })], m.prototype, "data", void 0), c([i({ type: Number })], m.prototype, "barWidth", void 0), c([i({ type: Number })], m.prototype, "barHeight", void 0), c([i({ type: Number })], m.prototype, "barGap", void 0), c([i({ type: Number })], m.prototype, "barRadius", void 0), c([i({ type: String })], m.prototype, "barColor", void 0), c([i({ type: Boolean })], m.prototype, "fadeEdges", void 0), c([i({ type: Number })], m.prototype, "fadeWidth", void 0), c([i({ type: Number })], m.prototype, "height", void 0), c([a("canvas")], m.prototype, "_canvas", void 0), c([a(".container")], m.prototype, "_container", void 0), m = c([r("ui-waveform")], m);
 /**
 * @license
 * Copyright 2021 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
-var g = class extends Event {
+var h = class extends Event {
 	constructor(e, t, n, r) {
 		super("context-request", {
 			bubbles: !0,
@@ -529,14 +528,14 @@ var g = class extends Event {
 * Copyright 2021 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
-function _(e) {
+function g(e) {
 	return e;
 }
 /**
 * @license
 * Copyright 2021 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
-*/ var v = class {
+*/ var _ = class {
 	constructor(e, t, n, r) {
 		if (this.subscribe = !1, this.provided = !1, this.value = void 0, this.t = (e, t) => {
 			this.unsubscribe && (this.unsubscribe !== t && (this.provided = !1, this.unsubscribe()), this.subscribe || this.unsubscribe()), this.value = e, this.host.requestUpdate(), this.provided && !this.subscribe || (this.provided = !0, this.callback && this.callback(e, t)), this.unsubscribe = t;
@@ -553,9 +552,9 @@ function _(e) {
 		this.unsubscribe &&= (this.unsubscribe(), void 0);
 	}
 	dispatchRequest() {
-		this.host.dispatchEvent(new g(this.context, this.host, this.t, this.subscribe));
+		this.host.dispatchEvent(new h(this.context, this.host, this.t, this.subscribe));
 	}
-}, y = class {
+}, v = class {
 	get value() {
 		return this.o;
 	}
@@ -585,14 +584,14 @@ function _(e) {
 	clearCallbacks() {
 		this.subscriptions.clear();
 	}
-}, b = class extends Event {
+}, y = class extends Event {
 	constructor(e, t) {
 		super("context-provider", {
 			bubbles: !0,
 			composed: !0
 		}), this.context = e, this.contextTarget = t;
 	}
-}, x = class extends y {
+}, b = class extends v {
 	constructor(e, t, n) {
 		super(t.context === void 0 ? n : t.initialValue), this.onContextRequest = (e) => {
 			if (e.context !== this.context) return;
@@ -601,7 +600,7 @@ function _(e) {
 		}, this.onProviderRequest = (e) => {
 			if (e.context !== this.context || (e.contextTarget ?? e.composedPath()[0]) === this.host) return;
 			let t = /* @__PURE__ */ new Set();
-			for (let [e, { consumerHost: n }] of this.subscriptions) t.has(e) || (t.add(e), n.dispatchEvent(new g(this.context, n, e, !0)));
+			for (let [e, { consumerHost: n }] of this.subscriptions) t.has(e) || (t.add(e), n.dispatchEvent(new h(this.context, n, e, !0)));
 			e.stopPropagation();
 		}, this.host = e, t.context === void 0 ? this.context = t : this.context = t.context, this.attachListeners(), this.host.addController?.(this);
 	}
@@ -609,14 +608,14 @@ function _(e) {
 		this.host.addEventListener("context-request", this.onContextRequest), this.host.addEventListener("context-provider", this.onProviderRequest);
 	}
 	hostConnected() {
-		this.host.dispatchEvent(new b(this.context, this.host));
+		this.host.dispatchEvent(new y(this.context, this.host));
 	}
 };
 /**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
-*/ function S({ context: e }) {
+*/ function x({ context: e }) {
 	return (t, n) => {
 		let r = /* @__PURE__ */ new WeakMap();
 		if (typeof n == "object") return {
@@ -627,7 +626,7 @@ function _(e) {
 				return r.get(this).setValue(e), t.set.call(this, e);
 			},
 			init(t) {
-				return r.set(this, new x(this, {
+				return r.set(this, new b(this, {
 					context: e,
 					initialValue: t
 				})), t;
@@ -635,7 +634,7 @@ function _(e) {
 		};
 		{
 			t.constructor.addInitializer(((t) => {
-				r.set(t, new x(t, { context: e }));
+				r.set(t, new b(t, { context: e }));
 			}));
 			let i = Object.getOwnPropertyDescriptor(t, n), a;
 			if (i === void 0) {
@@ -668,10 +667,10 @@ function _(e) {
 * @license
 * Copyright 2022 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
-*/ function C({ context: e, subscribe: t }) {
+*/ function S({ context: e, subscribe: t }) {
 	return (n, r) => {
 		typeof r == "object" ? r.addInitializer((function() {
-			new v(this, {
+			new _(this, {
 				context: e,
 				callback: (e) => {
 					n.set.call(this, e);
@@ -679,7 +678,7 @@ function _(e) {
 				subscribe: t
 			});
 		})) : n.constructor.addInitializer(((n) => {
-			new v(n, {
+			new _(n, {
 				context: e,
 				callback: (e) => {
 					n[r] = e;
@@ -694,8 +693,8 @@ function _(e) {
 * Any component that uses @consume({context: audioPlayerContext})
 * will automatically receive updates when the nearest <ui-audio-provider> changes its state.
 */
-const w = _("ui-audio-player-context");
-var T = class extends e {
+const C = g("ui-audio-player-context");
+var w = class extends e {
 	constructor(...e) {
 		super(...e), this.src = "", this._animationFrameId = 0, this.state = {
 			src: "",
@@ -828,8 +827,8 @@ var T = class extends e {
 		this._animationFrameId = requestAnimationFrame(e);
 	}
 };
-l([i({ type: String })], T.prototype, "src", void 0), l([a("audio")], T.prototype, "_audioEl", void 0), l([S({ context: w }), o()], T.prototype, "state", void 0), T = l([r("ui-audio-provider")], T);
-var E = class extends e {
+c([i({ type: String })], w.prototype, "src", void 0), c([a("audio")], w.prototype, "_audioEl", void 0), c([x({ context: C }), o()], w.prototype, "state", void 0), w = c([r("ui-audio-provider")], w);
+var T = class extends e {
 	static {
 		this.styles = t`
     :host {
@@ -900,11 +899,11 @@ var E = class extends e {
 		this.playerState && this.playerState.togglePlay();
 	}
 };
-l([C({
-	context: w,
+c([S({
+	context: C,
 	subscribe: !0
-}), i({ attribute: !1 })], E.prototype, "playerState", void 0), E = l([r("ui-audio-play-button")], E);
-var D = class extends e {
+}), i({ attribute: !1 })], T.prototype, "playerState", void 0), T = c([r("ui-audio-play-button")], T);
+var E = class extends e {
 	constructor(...e) {
 		super(...e), this._isDragging = !1, this._dragValue = 0;
 	}
@@ -945,11 +944,11 @@ var D = class extends e {
 		this._dragValue = e.target.value, this.playerState && this.playerState.seek(this._dragValue), this._isDragging = !1;
 	}
 };
-l([C({
-	context: w,
+c([S({
+	context: C,
 	subscribe: !0
-}), i({ attribute: !1 })], D.prototype, "playerState", void 0), D = l([r("ui-audio-progress-slider")], D);
-var O = class extends e {
+}), i({ attribute: !1 })], E.prototype, "playerState", void 0), E = c([r("ui-audio-progress-slider")], E);
+var D = class extends e {
 	constructor(...e) {
 		super(...e), this.format = "full";
 	}
@@ -979,11 +978,11 @@ var O = class extends e {
 		return t > 0 && (i += "" + t + ":" + (n < 10 ? "0" : "")), i += "" + n + ":" + (r < 10 ? "0" : ""), i += "" + r, i;
 	}
 };
-l([C({
-	context: w,
+c([S({
+	context: C,
 	subscribe: !0
-}), i({ attribute: !1 })], O.prototype, "playerState", void 0), l([i({ type: String })], O.prototype, "format", void 0), O = l([r("ui-audio-time-display")], O);
-var k = class extends e {
+}), i({ attribute: !1 })], D.prototype, "playerState", void 0), c([i({ type: String })], D.prototype, "format", void 0), D = c([r("ui-audio-time-display")], D);
+var O = class extends e {
 	static {
 		this.styles = t`
     :host {
@@ -1035,7 +1034,7 @@ var k = class extends e {
     `;
 	}
 };
-l([i({ type: Object })], k.prototype, "item", void 0), k = l([r("ui-audio-player")], k);
+c([i({ type: Object })], O.prototype, "item", void 0), O = c([r("ui-audio-player")], O);
 /**
 * Copyright 2026 Google LLC
 *
@@ -1051,7 +1050,7 @@ l([i({ type: Object })], k.prototype, "item", void 0), k = l([r("ui-audio-player
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-var A = class extends e {
+var k = class extends e {
 	constructor(...e) {
 		super(...e), this.muted = !1, this.disabled = !1, this._devices = [], this._loading = !0, this._error = null, this._hasPermission = !1, this._isMenuOpen = !1, this._handleDeviceChange = () => {
 			this._hasPermission ? this._loadDevicesWithPermission() : this._loadDevicesWithoutPermission();
@@ -1269,7 +1268,7 @@ var A = class extends e {
 		this._previewStream &&= (this._previewStream.getTracks().forEach((e) => e.stop()), void 0), this._previewAudioContext && this._previewAudioContext.state !== "closed" && (this._previewAudioContext.close(), this._previewAudioContext = void 0), this._previewAnalyser = void 0;
 	}
 };
-l([i({ type: String })], A.prototype, "value", void 0), l([i({ type: Boolean })], A.prototype, "muted", void 0), l([i({ type: Boolean })], A.prototype, "disabled", void 0), l([o()], A.prototype, "_devices", void 0), l([o()], A.prototype, "_loading", void 0), l([o()], A.prototype, "_error", void 0), l([o()], A.prototype, "_hasPermission", void 0), l([o()], A.prototype, "_isMenuOpen", void 0), l([o()], A.prototype, "_previewAnalyser", void 0), l([a("md-menu")], A.prototype, "_menuEl", void 0), A = l([r("ui-mic-selector")], A);
+c([i({ type: String })], k.prototype, "value", void 0), c([i({ type: Boolean })], k.prototype, "muted", void 0), c([i({ type: Boolean })], k.prototype, "disabled", void 0), c([o()], k.prototype, "_devices", void 0), c([o()], k.prototype, "_loading", void 0), c([o()], k.prototype, "_error", void 0), c([o()], k.prototype, "_hasPermission", void 0), c([o()], k.prototype, "_isMenuOpen", void 0), c([o()], k.prototype, "_previewAnalyser", void 0), c([a("md-menu")], k.prototype, "_menuEl", void 0), k = c([r("ui-mic-selector")], k);
 /**
 * Copyright 2026 Google LLC
 *
@@ -1285,7 +1284,7 @@ l([i({ type: String })], A.prototype, "value", void 0), l([i({ type: Boolean })]
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-var j = class extends e {
+var A = class extends e {
 	constructor(...e) {
 		super(...e), this.voices = [], this.placeholder = "Select a voice...", this.idKey = "voiceId", this.titleKey = "name", this.subtitleKey = "category", this.previewUrlKey = "previewUrl", this.useOrbs = !1, this.colorKey = "colors", this._searchQuery = "";
 	}
@@ -1615,8 +1614,8 @@ var j = class extends e {
 		this._audioEl && (this._audioEl.pause(), this._audioEl.currentTime = 0), this._previewingVoiceId = void 0;
 	}
 };
-l([i({ type: Array })], j.prototype, "voices", void 0), l([i({ type: String })], j.prototype, "value", void 0), l([i({ type: String })], j.prototype, "placeholder", void 0), l([i({ type: String })], j.prototype, "idKey", void 0), l([i({ type: String })], j.prototype, "titleKey", void 0), l([i({ type: String })], j.prototype, "subtitleKey", void 0), l([i({ type: String })], j.prototype, "previewUrlKey", void 0), l([i({ type: Boolean })], j.prototype, "useOrbs", void 0), l([i({ type: String })], j.prototype, "colorKey", void 0), l([o()], j.prototype, "_searchQuery", void 0), l([o()], j.prototype, "_previewingVoiceId", void 0), l([a("md-menu")], j.prototype, "_menuEl", void 0), l([a("audio")], j.prototype, "_audioEl", void 0), j = l([r("ui-voice-picker")], j);
-var M = class extends e {
+c([i({ type: Array })], A.prototype, "voices", void 0), c([i({ type: String })], A.prototype, "value", void 0), c([i({ type: String })], A.prototype, "placeholder", void 0), c([i({ type: String })], A.prototype, "idKey", void 0), c([i({ type: String })], A.prototype, "titleKey", void 0), c([i({ type: String })], A.prototype, "subtitleKey", void 0), c([i({ type: String })], A.prototype, "previewUrlKey", void 0), c([i({ type: Boolean })], A.prototype, "useOrbs", void 0), c([i({ type: String })], A.prototype, "colorKey", void 0), c([o()], A.prototype, "_searchQuery", void 0), c([o()], A.prototype, "_previewingVoiceId", void 0), c([a("md-menu")], A.prototype, "_menuEl", void 0), c([a("audio")], A.prototype, "_audioEl", void 0), A = c([r("ui-voice-picker")], A);
+var j = class extends e {
 	constructor(...e) {
 		super(...e), this.speed = 50, this.barCount = 60, this.barWidth = 4, this.barHeight = 4, this.barGap = 2, this.barRadius = 2, this.fadeEdges = !0, this.fadeWidth = 24, this.height = 128, this.active = !0, this._animationFrameId = 0, this._lastTime = 0, this._bars = [], this._seed = Math.random(), this._dataIndex = 0;
 	}
@@ -1712,13 +1711,13 @@ var M = class extends e {
 				let t = Math.max(this.barHeight, e.height * i.height * .8), r = c - t / 2;
 				n.fillStyle = a, n.globalAlpha = .3 + e.height * .7, this.barRadius > 0 ? (n.beginPath(), n.roundRect(e.x, r, this.barWidth, t, this.barRadius), n.fill()) : n.fillRect(e.x, r, this.barWidth, t);
 			}
-			n.globalAlpha = 1, this.fadeEdges && this.fadeWidth > 0 && f(n, i.width, i.height, this.fadeWidth), this._animationFrameId = requestAnimationFrame(e);
+			n.globalAlpha = 1, this.fadeEdges && this.fadeWidth > 0 && d(n, i.width, i.height, this.fadeWidth), this._animationFrameId = requestAnimationFrame(e);
 		};
 		this._animationFrameId = requestAnimationFrame(e);
 	}
 };
-l([i({ type: Number })], M.prototype, "speed", void 0), l([i({ type: Number })], M.prototype, "barCount", void 0), l([i({ type: Number })], M.prototype, "barWidth", void 0), l([i({ type: Number })], M.prototype, "barHeight", void 0), l([i({ type: Number })], M.prototype, "barGap", void 0), l([i({ type: Number })], M.prototype, "barRadius", void 0), l([i({ type: String })], M.prototype, "barColor", void 0), l([i({ type: Boolean })], M.prototype, "fadeEdges", void 0), l([i({ type: Number })], M.prototype, "fadeWidth", void 0), l([i({ type: Number })], M.prototype, "height", void 0), l([i({ type: Array })], M.prototype, "data", void 0), l([i({ attribute: !1 })], M.prototype, "analyserNode", void 0), l([i({ type: Boolean })], M.prototype, "active", void 0), l([a("canvas")], M.prototype, "_canvas", void 0), l([a(".container")], M.prototype, "_container", void 0), M = l([r("ui-scrolling-waveform")], M);
-var N = class extends e {
+c([i({ type: Number })], j.prototype, "speed", void 0), c([i({ type: Number })], j.prototype, "barCount", void 0), c([i({ type: Number })], j.prototype, "barWidth", void 0), c([i({ type: Number })], j.prototype, "barHeight", void 0), c([i({ type: Number })], j.prototype, "barGap", void 0), c([i({ type: Number })], j.prototype, "barRadius", void 0), c([i({ type: String })], j.prototype, "barColor", void 0), c([i({ type: Boolean })], j.prototype, "fadeEdges", void 0), c([i({ type: Number })], j.prototype, "fadeWidth", void 0), c([i({ type: Number })], j.prototype, "height", void 0), c([i({ type: Array })], j.prototype, "data", void 0), c([i({ attribute: !1 })], j.prototype, "analyserNode", void 0), c([i({ type: Boolean })], j.prototype, "active", void 0), c([a("canvas")], j.prototype, "_canvas", void 0), c([a(".container")], j.prototype, "_container", void 0), j = c([r("ui-scrolling-waveform")], j);
+var M = class extends e {
 	constructor(...e) {
 		super(...e), this.title = "Component", this.description = "", this.mode = "preview";
 	}
@@ -1852,8 +1851,8 @@ var N = class extends e {
     `;
 	}
 };
-l([i({ type: String })], N.prototype, "title", void 0), l([i({ type: String })], N.prototype, "description", void 0), l([i({ type: String })], N.prototype, "mode", void 0), N = l([r("ui-showcase-card")], N);
-var P = class extends e {
+c([i({ type: String })], M.prototype, "title", void 0), c([i({ type: String })], M.prototype, "description", void 0), c([i({ type: String })], M.prototype, "mode", void 0), M = c([r("ui-showcase-card")], M);
+var N = class extends e {
 	constructor(...e) {
 		super(...e), this.text = "", this.duration = 2, this.delay = 0, this.repeat = !0, this.repeatDelay = .5, this.startOnView = !0, this.once = !1, this.spread = 2, this._isInView = !1;
 	}
@@ -1943,127 +1942,8 @@ var P = class extends e {
     `;
 	}
 };
-l([i({ type: String })], P.prototype, "text", void 0), l([i({ type: Number })], P.prototype, "duration", void 0), l([i({ type: Number })], P.prototype, "delay", void 0), l([i({ type: Boolean })], P.prototype, "repeat", void 0), l([i({ type: Number })], P.prototype, "repeatDelay", void 0), l([i({ type: Boolean })], P.prototype, "startOnView", void 0), l([i({ type: Boolean })], P.prototype, "once", void 0), l([i({ type: Number })], P.prototype, "spread", void 0), l([i({ type: String })], P.prototype, "color", void 0), l([i({ type: String })], P.prototype, "shimmerColor", void 0), l([o()], P.prototype, "_isInView", void 0), P = l([r("ui-shimmering-text")], P);
-var F = class extends e {
-	constructor(...e) {
-		super(...e), this.agentState = null, this.inputVolume = 0, this.outputVolume = 0, this.volumeMode = "auto", this.seed = Math.floor(Math.random() * 2 ** 32), this._animationFrameId = 0, this._animSpeed = .1, this._curIn = 0, this._curOut = 0, this._textureLoader = new c.TextureLoader(), this._lastTime = 0, this._vertexShader = "\nuniform float uTime;\nuniform sampler2D uPerlinTexture;\nvarying vec2 vUv;\n\nvoid main() {\n  vUv = uv;\n  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}\n", this._fragmentShader = "\nuniform float uTime;\nuniform float uAnimation;\nuniform float uInverted;\nuniform float uOffsets[7];\nuniform vec3 uColor1;\nuniform vec3 uColor2;\nuniform float uInputVolume;\nuniform float uOutputVolume;\nuniform float uOpacity;\nuniform sampler2D uPerlinTexture;\nvarying vec2 vUv;\n\nconst float PI = 3.14159265358979323846;\n\nbool drawOval(vec2 polarUv, vec2 polarCenter, float a, float b, bool reverseGradient, float softness, out vec4 color) {\n    vec2 p = polarUv - polarCenter;\n    float oval = (p.x * p.x) / (a * a) + (p.y * p.y) / (b * b);\n    float edge = smoothstep(1.0, 1.0 - softness, oval);\n    if (edge > 0.0) {\n        float gradient = reverseGradient ? (1.0 - (p.x / a + 1.0) / 2.0) : ((p.x / a + 1.0) / 2.0);\n        gradient = mix(0.5, gradient, 0.1);\n        color = vec4(vec3(gradient), 0.85 * edge);\n        return true;\n    }\n    return false;\n}\n\nvec3 colorRamp(float grayscale, vec3 color1, vec3 color2, vec3 color3, vec3 color4) {\n    if (grayscale < 0.33) {\n        return mix(color1, color2, grayscale * 3.0);\n    } else if (grayscale < 0.66) {\n        return mix(color2, color3, (grayscale - 0.33) * 3.0);\n    } else {\n        return mix(color3, color4, (grayscale - 0.66) * 3.0);\n    }\n}\n\nvec2 hash2(vec2 p) {\n    return fract(sin(vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)))) * 43758.5453);\n}\n\nfloat noise2D(vec2 p) {\n    vec2 i = floor(p);\n    vec2 f = fract(p);\n    vec2 u = f * f * (3.0 - 2.0 * f);\n    float n = mix(\n        mix(dot(hash2(i + vec2(0.0, 0.0)), f - vec2(0.0, 0.0)),\n            dot(hash2(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0)), u.x),\n        mix(dot(hash2(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0)),\n            dot(hash2(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0)), u.x),\n        u.y\n    );\n    return 0.5 + 0.5 * n;\n}\n\nfloat sharpRing(vec3 decomposed, float time) {\n    float ringStart = 1.0;\n    float ringWidth = 0.3;\n    float noiseScale = 5.0;\n    float noise = mix(\n        noise2D(vec2(decomposed.x, time) * noiseScale),\n        noise2D(vec2(decomposed.y, time) * noiseScale),\n        decomposed.z\n    );\n    noise = (noise - 0.5) * 2.5;\n    return ringStart + noise * ringWidth * 1.5;\n}\n\nfloat smoothRing(vec3 decomposed, float time) {\n    float ringStart = 0.9;\n    float ringWidth = 0.2;\n    float noiseScale = 6.0;\n    float noise = mix(\n        noise2D(vec2(decomposed.x, time) * noiseScale),\n        noise2D(vec2(decomposed.y, time) * noiseScale),\n        decomposed.z\n    );\n    noise = (noise - 0.5) * 5.0;\n    return ringStart + noise * ringWidth;\n}\n\nfloat flow(vec3 decomposed, float time) {\n    return mix(\n        texture(uPerlinTexture, vec2(time, decomposed.x / 2.0)).r,\n        texture(uPerlinTexture, vec2(time, decomposed.y / 2.0)).r,\n        decomposed.z\n    );\n}\n\nvoid main() {\n    vec2 uv = vUv * 2.0 - 1.0;\n    float radius = length(uv);\n    float theta = atan(uv.y, uv.x);\n    if (theta < 0.0) theta += 2.0 * PI;\n\n    vec3 decomposed = vec3(\n        theta / (2.0 * PI),\n        mod(theta / (2.0 * PI) + 0.5, 1.0) + 1.0,\n        abs(theta / PI - 1.0)\n    );\n\n    float noise = flow(decomposed, radius * 0.03 - uAnimation * 0.2) - 0.5;\n    theta += noise * mix(0.08, 0.25, uOutputVolume);\n\n    vec4 color = vec4(1.0, 1.0, 1.0, 1.0);\n    float originalCenters[7] = float[7](0.0, 0.5 * PI, 1.0 * PI, 1.5 * PI, 2.0 * PI, 2.5 * PI, 3.0 * PI);\n    float centers[7];\n    for (int i = 0; i < 7; i++) {\n        centers[i] = originalCenters[i] + 0.5 * sin(uTime / 20.0 + uOffsets[i]);\n    }\n\n    float a, b;\n    vec4 ovalColor;\n\n    for (int i = 0; i < 7; i++) {\n        float noise = texture(uPerlinTexture, vec2(mod(centers[i] + uTime * 0.05, 1.0), 0.5)).r;\n        a = 0.5 + noise * 0.3;\n        b = noise * mix(3.5, 2.5, uInputVolume);\n        bool reverseGradient = (i % 2 == 1);\n        float distTheta = min(\n            abs(theta - centers[i]),\n            min(abs(theta + 2.0 * PI - centers[i]), abs(theta - 2.0 * PI - centers[i]))\n        );\n        if (drawOval(vec2(distTheta, radius), vec2(0.0, 0.0), a, b, reverseGradient, 0.6, ovalColor)) {\n            color.rgb = mix(color.rgb, ovalColor.rgb, ovalColor.a);\n            color.a = max(color.a, ovalColor.a);\n        }\n    }\n    \n    float ringRadius1 = sharpRing(decomposed, uTime * 0.1);\n    float ringRadius2 = smoothRing(decomposed, uTime * 0.1);\n    float inputRadius1 = radius + uInputVolume * 0.2;\n    float inputRadius2 = radius + uInputVolume * 0.15;\n    float opacity1 = mix(0.2, 0.6, uInputVolume);\n    float opacity2 = mix(0.15, 0.45, uInputVolume);\n\n    float ringAlpha1 = (inputRadius2 >= ringRadius1) ? opacity1 : 0.0;\n    float ringAlpha2 = smoothstep(ringRadius2 - 0.05, ringRadius2 + 0.05, inputRadius1) * opacity2;\n    float totalRingAlpha = max(ringAlpha1, ringAlpha2);\n    \n    vec3 ringColor = vec3(1.0);\n    color.rgb = 1.0 - (1.0 - color.rgb) * (1.0 - ringColor * totalRingAlpha);\n\n    vec3 color1 = vec3(0.0, 0.0, 0.0);\n    vec3 color2 = uColor1;\n    vec3 color3 = uColor2;\n    vec3 color4 = vec3(1.0, 1.0, 1.0);\n\n    float luminance = mix(color.r, 1.0 - color.r, uInverted);\n    color.rgb = colorRamp(luminance, color1, color2, color3, color4);\n    color.a *= uOpacity;\n\n    gl_FragColor = color;\n}\n";
-	}
-	static {
-		this.styles = t`
-    :host {
-      display: block;
-      width: 100%;
-      height: 100%;
-      position: relative;
-    }
-    .container {
-      width: 100%;
-      height: 100%;
-    }
-    canvas {
-      display: block;
-      width: 100%;
-      height: 100%;
-    }
-  `;
-	}
-	render() {
-		return n`<div class="container"></div>`;
-	}
-	firstUpdated() {
-		this._initThree();
-	}
-	updated(e) {
-		e.has("colors") && this._updateColors();
-	}
-	_updateColors() {
-		if (!(!this._targetColor1 || !this._targetColor2)) if (this.colors && this.colors.length === 2) this._targetColor1.set(this.colors[0]), this._targetColor2.set(this.colors[1]);
-		else {
-			let e = getComputedStyle(this), t = e.getPropertyValue("--md-sys-color-primary").trim() || "#CADCFC", n = e.getPropertyValue("--md-sys-color-secondary").trim() || "#A0B9D1";
-			this._targetColor1.set(t), this._targetColor2.set(n);
-		}
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback(), this._animationFrameId && cancelAnimationFrame(this._animationFrameId), this._resizeObserver && this._resizeObserver.disconnect(), this._renderer && this._renderer.dispose(), this._mesh && (this._mesh.geometry.dispose(), this._mesh.material.dispose());
-	}
-	async _initThree() {
-		if (!this._container) return;
-		this._targetColor1 = new c.Color(), this._targetColor2 = new c.Color(), this._updateColors();
-		try {
-			this._perlinNoiseTexture = await this._textureLoader.loadAsync("https://storage.googleapis.com/eleven-public-cdn/images/perlin-noise.png"), this._perlinNoiseTexture.wrapS = c.RepeatWrapping, this._perlinNoiseTexture.wrapT = c.RepeatWrapping;
-		} catch (e) {
-			console.warn("Failed to load perlin noise texture for orb.", e);
-			return;
-		}
-		let e = this._container.clientWidth, t = this._container.clientHeight;
-		this._scene = new c.Scene(), this._camera = new c.OrthographicCamera(-5, 5, 5, -5, .1, 10), this._camera.position.z = 1, this._renderer = new c.WebGLRenderer({
-			alpha: !0,
-			antialias: !0,
-			premultipliedAlpha: !0
-		}), this._renderer.setSize(e, t), this._renderer.setPixelRatio(window.devicePixelRatio), this._container.appendChild(this._renderer.domElement);
-		let n = this._splitmix32(this.seed), r = new Float32Array(Array.from({ length: 7 }, () => n() * Math.PI * 2)), i = document.documentElement.classList.contains("dark") || window.matchMedia("(prefers-color-scheme: dark)").matches, a = {
-			uColor1: new c.Uniform(this._targetColor1),
-			uColor2: new c.Uniform(this._targetColor2),
-			uOffsets: { value: r },
-			uPerlinTexture: new c.Uniform(this._perlinNoiseTexture),
-			uTime: new c.Uniform(0),
-			uAnimation: new c.Uniform(.1),
-			uInverted: new c.Uniform(i ? 1 : 0),
-			uInputVolume: new c.Uniform(0),
-			uOutputVolume: new c.Uniform(0),
-			uOpacity: new c.Uniform(0)
-		}, o = new c.CircleGeometry(3.5, 64), s = new c.ShaderMaterial({
-			uniforms: a,
-			vertexShader: this._vertexShader,
-			fragmentShader: this._fragmentShader,
-			transparent: !0
-		});
-		this._mesh = new c.Mesh(o, s), this._scene.add(this._mesh), this._resizeObserver = new ResizeObserver(() => {
-			this._container && this._renderer && this._renderer.setSize(this._container.clientWidth, this._container.clientHeight);
-		}), this._resizeObserver.observe(this._container), new MutationObserver(() => {
-			if (!this._mesh) return;
-			let e = document.documentElement.classList.contains("dark");
-			this._mesh.material.uniforms.uInverted.value = e ? 1 : 0, this._updateColors();
-		}).observe(document.documentElement, {
-			attributes: !0,
-			attributeFilter: ["class"]
-		}), this._lastTime = performance.now(), this._animate();
-	}
-	_animate() {
-		if (this._animationFrameId = requestAnimationFrame(() => this._animate()), !this._mesh || !this._renderer || !this._scene || !this._camera) return;
-		let e = performance.now(), t = (e - this._lastTime) / 1e3;
-		this._lastTime = e;
-		let n = this._mesh.material.uniforms;
-		n.uTime.value += t * .5, n.uOpacity.value < 1 && (n.uOpacity.value = Math.min(1, n.uOpacity.value + t * 2));
-		let r = 0, i = .3;
-		if (this.volumeMode === "manual") r = this._clamp01(this.inputVolume), i = this._clamp01(this.outputVolume);
-		else {
-			let e = n.uTime.value * 2;
-			if (this.agentState === null) r = 0, i = .3;
-			else if (this.agentState === "listening") r = this._clamp01(.55 + Math.sin(e * 3.2) * .35), i = .45;
-			else if (this.agentState === "talking") r = this._clamp01(.65 + Math.sin(e * 4.8) * .22), i = this._clamp01(.75 + Math.sin(e * 3.6) * .22);
-			else {
-				let t = .38 + .07 * Math.sin(e * .7), n = .05 * Math.sin(e * 2.1) * Math.sin(e * .37 + 1.2);
-				r = this._clamp01(t + n), i = this._clamp01(.48 + .12 * Math.sin(e * 1.05 + .6));
-			}
-		}
-		this._curIn += (r - this._curIn) * .2, this._curOut += (i - this._curOut) * .2;
-		let a = .1 + (1 - (this._curOut - 1) ** 2) * .9;
-		this._animSpeed += (a - this._animSpeed) * .12, n.uAnimation.value += t * this._animSpeed, n.uInputVolume.value = this._curIn, n.uOutputVolume.value = this._curOut, n.uColor1.value.lerp(this._targetColor1, .08), n.uColor2.value.lerp(this._targetColor2, .08), this._renderer.render(this._scene, this._camera);
-	}
-	_splitmix32(e) {
-		return function() {
-			e |= 0, e = e + 2654435769 | 0;
-			let t = e ^ e >>> 16;
-			return t = Math.imul(t, 569420461), t ^= t >>> 15, t = Math.imul(t, 1935289751), ((t ^= t >>> 15) >>> 0) / 4294967296;
-		};
-	}
-	_clamp01(e) {
-		return Number.isFinite(e) ? Math.min(1, Math.max(0, e)) : 0;
-	}
-};
-l([i({ type: Array })], F.prototype, "colors", void 0), l([i({ type: String })], F.prototype, "agentState", void 0), l([i({ type: Number })], F.prototype, "inputVolume", void 0), l([i({ type: Number })], F.prototype, "outputVolume", void 0), l([i({ type: String })], F.prototype, "volumeMode", void 0), l([i({ type: Number })], F.prototype, "seed", void 0), l([a(".container")], F.prototype, "_container", void 0), F = l([r("ui-orb")], F);
-var I = class extends e {
+c([i({ type: String })], N.prototype, "text", void 0), c([i({ type: Number })], N.prototype, "duration", void 0), c([i({ type: Number })], N.prototype, "delay", void 0), c([i({ type: Boolean })], N.prototype, "repeat", void 0), c([i({ type: Number })], N.prototype, "repeatDelay", void 0), c([i({ type: Boolean })], N.prototype, "startOnView", void 0), c([i({ type: Boolean })], N.prototype, "once", void 0), c([i({ type: Number })], N.prototype, "spread", void 0), c([i({ type: String })], N.prototype, "color", void 0), c([i({ type: String })], N.prototype, "shimmerColor", void 0), c([o()], N.prototype, "_isInView", void 0), N = c([r("ui-shimmering-text")], N);
+var P = class extends e {
 	static {
 		this.styles = t`
     :host {
@@ -2114,8 +1994,8 @@ var I = class extends e {
 		this.playerState && this.playerState.toggleMute();
 	}
 };
-l([C({
-	context: w,
+c([S({
+	context: C,
 	subscribe: !0
-}), i({ attribute: !1 })], I.prototype, "playerState", void 0), I = l([r("ui-audio-volume-slider")], I);
-export { u as ScreamVoiceButton, E as UiAudioPlayButton, k as UiAudioPlayer, D as UiAudioProgressSlider, T as UiAudioProvider, O as UiAudioTimeDisplay, I as UiAudioVolumeSlider, p as UiLiveWaveform, A as UiMicSelector, F as UiOrb, M as UiScrollingWaveform, P as UiShimmeringText, N as UiShowcaseCard, m as UiVoiceButton, j as UiVoicePicker, h as UiWaveform, w as audioPlayerContext };
+}), i({ attribute: !1 })], P.prototype, "playerState", void 0), P = c([r("ui-audio-volume-slider")], P);
+export { l as ScreamVoiceButton, T as UiAudioPlayButton, O as UiAudioPlayer, E as UiAudioProgressSlider, w as UiAudioProvider, D as UiAudioTimeDisplay, P as UiAudioVolumeSlider, f as UiLiveWaveform, k as UiMicSelector, j as UiScrollingWaveform, N as UiShimmeringText, M as UiShowcaseCard, p as UiVoiceButton, A as UiVoicePicker, m as UiWaveform, C as audioPlayerContext };

package/dist/scream-audio-ui.umd.js

@@ -1,4 +1,4 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`lit`),require(`lit/decorators.js`),require(`@material/web/button/filled-button.js`),require(`@material/web/icon/icon.js`),require(`lit/directives/class-map.js`),require(`@material/web/button/outlined-button.js`),require(`@material/web/iconbutton/filled-icon-button.js`),require(`@material/web/progress/circular-progress.js`),require(`@material/web/slider/slider.js`),require(`@material/web/menu/menu.js`),require(`@material/web/menu/menu-item.js`),require(`@material/web/divider/divider.js`),require(`@material/web/button/text-button.js`),require(`@material/web/button/filled-tonal-button.js`),require(`@material/web/textfield/outlined-text-field.js`),require(`three`),require(`@material/web/iconbutton/icon-button.js`)):typeof define==`function`&&define.amd?define([`exports`,`lit`,`lit/decorators.js`,`@material/web/button/filled-button.js`,`@material/web/icon/icon.js`,`lit/directives/class-map.js`,`@material/web/button/outlined-button.js`,`@material/web/iconbutton/filled-icon-button.js`,`@material/web/progress/circular-progress.js`,`@material/web/slider/slider.js`,`@material/web/menu/menu.js`,`@material/web/menu/menu-item.js`,`@material/web/divider/divider.js`,`@material/web/button/text-button.js`,`@material/web/button/filled-tonal-button.js`,`@material/web/textfield/outlined-text-field.js`,`three`,`@material/web/iconbutton/icon-button.js`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.ScreamAudioUI={},e.Lit,e.Lit,e.MaterialWeb,e.MaterialWeb,e.Lit,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.THREE,e.MaterialWeb))})(this,function(e,t,n,r,i,a,o,s,c,l,u,d,f,p,m,h,g,_){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var v=Object.create,y=Object.defineProperty,b=Object.getOwnPropertyDescriptor,x=Object.getOwnPropertyNames,S=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty,w=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=x(t),a=0,o=i.length,s;a<o;a++)s=i[a],!C.call(e,s)&&s!==n&&y(e,s,{get:(e=>t[e]).bind(null,s),enumerable:!(r=b(t,s))||r.enumerable});return e};g=((e,t,n)=>(n=e==null?{}:v(S(e)),w(t||!e||!e.__esModule?y(n,`default`,{value:e,enumerable:!0}):n,e)))(g);function T(e,t,n,r){var i=arguments.length,a=i<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,n):r,o;if(typeof Reflect==`object`&&typeof Reflect.decorate==`function`)a=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}var E=class extends t.LitElement{constructor(...e){super(...e),this.state=`idle`}static{this.styles=t.css`
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`lit`),require(`lit/decorators.js`),require(`@material/web/button/filled-button.js`),require(`@material/web/icon/icon.js`),require(`lit/directives/class-map.js`),require(`@material/web/button/outlined-button.js`),require(`@material/web/iconbutton/filled-icon-button.js`),require(`@material/web/progress/circular-progress.js`),require(`@material/web/slider/slider.js`),require(`@material/web/menu/menu.js`),require(`@material/web/menu/menu-item.js`),require(`@material/web/divider/divider.js`),require(`@material/web/button/text-button.js`),require(`@material/web/button/filled-tonal-button.js`),require(`@material/web/textfield/outlined-text-field.js`),require(`@material/web/iconbutton/icon-button.js`)):typeof define==`function`&&define.amd?define([`exports`,`lit`,`lit/decorators.js`,`@material/web/button/filled-button.js`,`@material/web/icon/icon.js`,`lit/directives/class-map.js`,`@material/web/button/outlined-button.js`,`@material/web/iconbutton/filled-icon-button.js`,`@material/web/progress/circular-progress.js`,`@material/web/slider/slider.js`,`@material/web/menu/menu.js`,`@material/web/menu/menu-item.js`,`@material/web/divider/divider.js`,`@material/web/button/text-button.js`,`@material/web/button/filled-tonal-button.js`,`@material/web/textfield/outlined-text-field.js`,`@material/web/iconbutton/icon-button.js`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.ScreamAudioUI={},e.Lit,e.Lit,e.MaterialWeb,e.MaterialWeb,e.Lit,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb))})(this,function(e,t,n,r,i,a,o,s,c,l,u,d,f,p,m,h,g){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function _(e,t,n,r){var i=arguments.length,a=i<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,n):r,o;if(typeof Reflect==`object`&&typeof Reflect.decorate==`function`)a=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}var v=class extends t.LitElement{constructor(...e){super(...e),this.state=`idle`}static{this.styles=t.css`
     :host {
       display: inline-block;
     }
@@ -22,7 +22,7 @@
 
         ${this.state===`recording`?`Recording...`:`Speak`}
       </md-filled-button>
-    `}_handleClick(){this.state=this.state===`idle`?`recording`:`idle`,this.dispatchEvent(new CustomEvent(`voice-toggle`,{bubbles:!0,composed:!0,detail:{state:this.state}}))}};T([(0,n.property)({type:String})],E.prototype,`state`,void 0),E=T([(0,n.customElement)(`scream-voice-button`)],E);function D(e,t){e.getByteFrequencyData(t);let n=[];for(let e=0;e<t.length;e++)n.push(t[e]/255);return n}function O(e,t,n,r){if(r<=0||t<=0)return;let i=e.createLinearGradient(0,0,t,0),a=Math.min(.2,r/t);i.addColorStop(0,`rgba(0,0,0,0)`),i.addColorStop(a,`rgba(0,0,0,1)`),i.addColorStop(1-a,`rgba(0,0,0,1)`),i.addColorStop(1,`rgba(0,0,0,0)`),e.globalCompositeOperation=`destination-in`,e.fillStyle=i,e.fillRect(0,0,t,n),e.globalCompositeOperation=`source-over`}var k=class extends t.LitElement{constructor(...e){super(...e),this.active=!1,this.processing=!1,this.barWidth=3,this.barHeight=4,this.barGap=1,this.barRadius=1.5,this.fadeEdges=!0,this.fadeWidth=24,this.height=64,this.sensitivity=1,this.updateRate=30,this._animationFrameId=0,this._lastUpdateTime=0,this._currentBars=[],this._processingTime=0,this._transitionProgress=0,this._lastActiveData=[]}static{this.styles=t.css`
+    `}_handleClick(){this.state=this.state===`idle`?`recording`:`idle`,this.dispatchEvent(new CustomEvent(`voice-toggle`,{bubbles:!0,composed:!0,detail:{state:this.state}}))}};_([(0,n.property)({type:String})],v.prototype,`state`,void 0),v=_([(0,n.customElement)(`scream-voice-button`)],v);function y(e,t){e.getByteFrequencyData(t);let n=[];for(let e=0;e<t.length;e++)n.push(t[e]/255);return n}function b(e,t,n,r){if(r<=0||t<=0)return;let i=e.createLinearGradient(0,0,t,0),a=Math.min(.2,r/t);i.addColorStop(0,`rgba(0,0,0,0)`),i.addColorStop(a,`rgba(0,0,0,1)`),i.addColorStop(1-a,`rgba(0,0,0,1)`),i.addColorStop(1,`rgba(0,0,0,0)`),e.globalCompositeOperation=`destination-in`,e.fillStyle=i,e.fillRect(0,0,t,n),e.globalCompositeOperation=`source-over`}var x=class extends t.LitElement{constructor(...e){super(...e),this.active=!1,this.processing=!1,this.barWidth=3,this.barHeight=4,this.barGap=1,this.barRadius=1.5,this.fadeEdges=!0,this.fadeWidth=24,this.height=64,this.sensitivity=1,this.updateRate=30,this._animationFrameId=0,this._lastUpdateTime=0,this._currentBars=[],this._processingTime=0,this._transitionProgress=0,this._lastActiveData=[]}static{this.styles=t.css`
     :host {
       display: block;
       width: 100%;
@@ -43,7 +43,7 @@
       <div class="container" style="height: ${this.height}px;">
         <canvas></canvas>
       </div>
-    `}firstUpdated(){this._resizeObserver=new ResizeObserver(()=>{this._handleResize()}),this._resizeObserver.observe(this._container),this._startAnimationLoop()}updated(e){super.updated(e),e.has(`analyserNode`)&&this.analyserNode&&(this._dataArray=new Uint8Array(this.analyserNode.frequencyBinCount)),e.has(`processing`)&&this.processing&&!this.active&&(this._processingTime=0,this._transitionProgress=0)}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver&&this._resizeObserver.disconnect(),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId)}_handleResize(){if(!this._canvas||!this._container)return;let e=this._container.getBoundingClientRect(),t=window.devicePixelRatio||1;this._canvas.width=e.width*t,this._canvas.height=e.height*t,this._canvas.style.width=`${e.width}px`,this._canvas.style.height=`${e.height}px`;let n=this._canvas.getContext(`2d`);n&&n.scale(t,t),this._renderFrame()}_startAnimationLoop(){let e=t=>{this._updateData(t),this._renderFrame(),this._animationFrameId=requestAnimationFrame(e)};this._animationFrameId=requestAnimationFrame(e)}_updateData(e){if(!this._canvas)return;let t=this._canvas.getBoundingClientRect(),n=Math.floor(t.width/(this.barWidth+this.barGap));if(this.active&&this.analyserNode&&this._dataArray){if(e-this._lastUpdateTime>this.updateRate){this._lastUpdateTime=e;let t=D(this.analyserNode,this._dataArray),r=Math.floor(t.length*.05),i=Math.floor(t.length*.4),a=t.slice(r,i),o=Math.floor(n/2),s=Array(n).fill(.05),c=a.length-1;for(let e=0;e<=o;e++){let t=e/o,r=a[Math.floor(t*c)]||0;t>.8&&(r*=1-(t-.8)*5);let i=Math.max(.05,Math.min(1,r*this.sensitivity)),l=o+e,u=o-e;l<n&&(s[l]=i),u>=0&&(s[u]=i)}this._currentBars=s,this._lastActiveData=[...s]}}else if(this.processing&&!this.active){this._processingTime+=.03,this._transitionProgress=Math.min(1,this._transitionProgress+.02);let e=Array(n).fill(.05),t=Math.floor(n/2);for(let r=0;r<n;r++){let n=(r-t)/t,i=1-Math.abs(n)*.4,a=Math.sin(this._processingTime*1.5+n*3)*.25,o=Math.sin(this._processingTime*.8-n*2)*.2,s=Math.cos(this._processingTime*2+n)*.15,c=(.2+(a+o+s))*i,l=c;if(this._lastActiveData.length>0&&this._transitionProgress<1){let e=Math.min(r,this._lastActiveData.length-1);l=(this._lastActiveData[e]||0)*(1-this._transitionProgress)+c*this._transitionProgress}e[r]=Math.max(.05,Math.min(1,l))}this._currentBars=e}else if(this._currentBars.length>0){let e=!0;for(let t=0;t<this._currentBars.length;t++)this._currentBars[t]=Math.max(.05,this._currentBars[t]*.85),this._currentBars[t]>.06&&(e=!1);e&&(this._currentBars=[])}}_renderFrame(){if(!this._canvas)return;let e=this._canvas.getContext(`2d`);if(!e)return;let t=this._canvas.getBoundingClientRect();e.clearRect(0,0,t.width,t.height);let n=getComputedStyle(this),r=this.barColor;if(!r){let e=n.getPropertyValue(`--md-sys-color-primary`).trim(),t=n.getPropertyValue(`color`).trim();r=e||t||`#0066cc`}let i=this.barWidth+this.barGap,a=Math.floor(t.width/i),o=t.height/2;for(let n=0;n<a&&n<this._currentBars.length;n++){let a=this._currentBars[n]||.05,s=n*i,c=Math.max(this.barHeight,a*t.height*.8),l=o-c/2;e.fillStyle=r,e.globalAlpha=.4+a*.6,this.barRadius>0?(e.beginPath(),e.roundRect(s,l,this.barWidth,c,this.barRadius),e.fill()):e.fillRect(s,l,this.barWidth,c)}this.fadeEdges&&O(e,t.width,t.height,this.fadeWidth),e.globalAlpha=1}};T([(0,n.property)({type:Boolean})],k.prototype,`active`,void 0),T([(0,n.property)({type:Boolean})],k.prototype,`processing`,void 0),T([(0,n.property)({attribute:!1})],k.prototype,`analyserNode`,void 0),T([(0,n.property)({type:Number})],k.prototype,`barWidth`,void 0),T([(0,n.property)({type:Number})],k.prototype,`barHeight`,void 0),T([(0,n.property)({type:Number})],k.prototype,`barGap`,void 0),T([(0,n.property)({type:Number})],k.prototype,`barRadius`,void 0),T([(0,n.property)({type:String})],k.prototype,`barColor`,void 0),T([(0,n.property)({type:Boolean})],k.prototype,`fadeEdges`,void 0),T([(0,n.property)({type:Number})],k.prototype,`fadeWidth`,void 0),T([(0,n.property)({type:Number})],k.prototype,`height`,void 0),T([(0,n.property)({type:Number})],k.prototype,`sensitivity`,void 0),T([(0,n.property)({type:Number})],k.prototype,`updateRate`,void 0),T([(0,n.query)(`canvas`)],k.prototype,`_canvas`,void 0),T([(0,n.query)(`.container`)],k.prototype,`_container`,void 0),k=T([(0,n.customElement)(`ui-live-waveform`)],k);var A=class extends t.LitElement{constructor(...e){super(...e),this.state=`idle`,this.disabled=!1,this._showFeedback=!1}static{this.styles=t.css`
+    `}firstUpdated(){this._resizeObserver=new ResizeObserver(()=>{this._handleResize()}),this._resizeObserver.observe(this._container),this._startAnimationLoop()}updated(e){super.updated(e),e.has(`analyserNode`)&&this.analyserNode&&(this._dataArray=new Uint8Array(this.analyserNode.frequencyBinCount)),e.has(`processing`)&&this.processing&&!this.active&&(this._processingTime=0,this._transitionProgress=0)}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver&&this._resizeObserver.disconnect(),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId)}_handleResize(){if(!this._canvas||!this._container)return;let e=this._container.getBoundingClientRect(),t=window.devicePixelRatio||1;this._canvas.width=e.width*t,this._canvas.height=e.height*t,this._canvas.style.width=`${e.width}px`,this._canvas.style.height=`${e.height}px`;let n=this._canvas.getContext(`2d`);n&&n.scale(t,t),this._renderFrame()}_startAnimationLoop(){let e=t=>{this._updateData(t),this._renderFrame(),this._animationFrameId=requestAnimationFrame(e)};this._animationFrameId=requestAnimationFrame(e)}_updateData(e){if(!this._canvas)return;let t=this._canvas.getBoundingClientRect(),n=Math.floor(t.width/(this.barWidth+this.barGap));if(this.active&&this.analyserNode&&this._dataArray){if(e-this._lastUpdateTime>this.updateRate){this._lastUpdateTime=e;let t=y(this.analyserNode,this._dataArray),r=Math.floor(t.length*.05),i=Math.floor(t.length*.4),a=t.slice(r,i),o=Math.floor(n/2),s=Array(n).fill(.05),c=a.length-1;for(let e=0;e<=o;e++){let t=e/o,r=a[Math.floor(t*c)]||0;t>.8&&(r*=1-(t-.8)*5);let i=Math.max(.05,Math.min(1,r*this.sensitivity)),l=o+e,u=o-e;l<n&&(s[l]=i),u>=0&&(s[u]=i)}this._currentBars=s,this._lastActiveData=[...s]}}else if(this.processing&&!this.active){this._processingTime+=.03,this._transitionProgress=Math.min(1,this._transitionProgress+.02);let e=Array(n).fill(.05),t=Math.floor(n/2);for(let r=0;r<n;r++){let n=(r-t)/t,i=1-Math.abs(n)*.4,a=Math.sin(this._processingTime*1.5+n*3)*.25,o=Math.sin(this._processingTime*.8-n*2)*.2,s=Math.cos(this._processingTime*2+n)*.15,c=(.2+(a+o+s))*i,l=c;if(this._lastActiveData.length>0&&this._transitionProgress<1){let e=Math.min(r,this._lastActiveData.length-1);l=(this._lastActiveData[e]||0)*(1-this._transitionProgress)+c*this._transitionProgress}e[r]=Math.max(.05,Math.min(1,l))}this._currentBars=e}else if(this._currentBars.length>0){let e=!0;for(let t=0;t<this._currentBars.length;t++)this._currentBars[t]=Math.max(.05,this._currentBars[t]*.85),this._currentBars[t]>.06&&(e=!1);e&&(this._currentBars=[])}}_renderFrame(){if(!this._canvas)return;let e=this._canvas.getContext(`2d`);if(!e)return;let t=this._canvas.getBoundingClientRect();e.clearRect(0,0,t.width,t.height);let n=getComputedStyle(this),r=this.barColor;if(!r){let e=n.getPropertyValue(`--md-sys-color-primary`).trim(),t=n.getPropertyValue(`color`).trim();r=e||t||`#0066cc`}let i=this.barWidth+this.barGap,a=Math.floor(t.width/i),o=t.height/2;for(let n=0;n<a&&n<this._currentBars.length;n++){let a=this._currentBars[n]||.05,s=n*i,c=Math.max(this.barHeight,a*t.height*.8),l=o-c/2;e.fillStyle=r,e.globalAlpha=.4+a*.6,this.barRadius>0?(e.beginPath(),e.roundRect(s,l,this.barWidth,c,this.barRadius),e.fill()):e.fillRect(s,l,this.barWidth,c)}this.fadeEdges&&b(e,t.width,t.height,this.fadeWidth),e.globalAlpha=1}};_([(0,n.property)({type:Boolean})],x.prototype,`active`,void 0),_([(0,n.property)({type:Boolean})],x.prototype,`processing`,void 0),_([(0,n.property)({attribute:!1})],x.prototype,`analyserNode`,void 0),_([(0,n.property)({type:Number})],x.prototype,`barWidth`,void 0),_([(0,n.property)({type:Number})],x.prototype,`barHeight`,void 0),_([(0,n.property)({type:Number})],x.prototype,`barGap`,void 0),_([(0,n.property)({type:Number})],x.prototype,`barRadius`,void 0),_([(0,n.property)({type:String})],x.prototype,`barColor`,void 0),_([(0,n.property)({type:Boolean})],x.prototype,`fadeEdges`,void 0),_([(0,n.property)({type:Number})],x.prototype,`fadeWidth`,void 0),_([(0,n.property)({type:Number})],x.prototype,`height`,void 0),_([(0,n.property)({type:Number})],x.prototype,`sensitivity`,void 0),_([(0,n.property)({type:Number})],x.prototype,`updateRate`,void 0),_([(0,n.query)(`canvas`)],x.prototype,`_canvas`,void 0),_([(0,n.query)(`.container`)],x.prototype,`_container`,void 0),x=_([(0,n.customElement)(`ui-live-waveform`)],x);var S=class extends t.LitElement{constructor(...e){super(...e),this.state=`idle`,this.disabled=!1,this._showFeedback=!1}static{this.styles=t.css`
     :host {
       display: inline-block;
       --ui-waveform-height: 24px;
@@ -193,7 +193,7 @@
           </div>
         </div>
       </md-filled-button>
-    `}_handleClick(e){this.dispatchEvent(new CustomEvent(`voice-button-click`,{bubbles:!0,composed:!0,detail:{state:this.state}}))}};T([(0,n.property)({type:String})],A.prototype,`state`,void 0),T([(0,n.property)({type:String})],A.prototype,`label`,void 0),T([(0,n.property)({type:String})],A.prototype,`trailing`,void 0),T([(0,n.property)({type:Boolean})],A.prototype,`disabled`,void 0),T([(0,n.property)({attribute:!1})],A.prototype,`analyserNode`,void 0),T([(0,n.state)()],A.prototype,`_showFeedback`,void 0),A=T([(0,n.customElement)(`ui-voice-button`)],A);var j=class extends t.LitElement{constructor(...e){super(...e),this.data=[],this.barWidth=4,this.barHeight=4,this.barGap=2,this.barRadius=2,this.fadeEdges=!0,this.fadeWidth=24,this.height=128}static{this.styles=t.css`
+    `}_handleClick(e){this.dispatchEvent(new CustomEvent(`voice-button-click`,{bubbles:!0,composed:!0,detail:{state:this.state}}))}};_([(0,n.property)({type:String})],S.prototype,`state`,void 0),_([(0,n.property)({type:String})],S.prototype,`label`,void 0),_([(0,n.property)({type:String})],S.prototype,`trailing`,void 0),_([(0,n.property)({type:Boolean})],S.prototype,`disabled`,void 0),_([(0,n.property)({attribute:!1})],S.prototype,`analyserNode`,void 0),_([(0,n.state)()],S.prototype,`_showFeedback`,void 0),S=_([(0,n.customElement)(`ui-voice-button`)],S);var C=class extends t.LitElement{constructor(...e){super(...e),this.data=[],this.barWidth=4,this.barHeight=4,this.barGap=2,this.barRadius=2,this.fadeEdges=!0,this.fadeWidth=24,this.height=128}static{this.styles=t.css`
     :host {
       display: block;
       width: 100%;
@@ -214,7 +214,7 @@
       <div class="container" style="height: ${this.height}px;">
         <canvas></canvas>
       </div>
-    `}firstUpdated(){this._resizeObserver=new ResizeObserver(()=>{this._handleResize()}),this._resizeObserver.observe(this._container)}updated(e){super.updated(e),(e.has(`data`)||e.has(`barColor`))&&this._renderWaveform()}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver&&this._resizeObserver.disconnect()}_handleResize(){if(!this._canvas||!this._container)return;let e=this._container.getBoundingClientRect(),t=window.devicePixelRatio||1;this._canvas.width=e.width*t,this._canvas.height=e.height*t,this._canvas.style.width=`${e.width}px`,this._canvas.style.height=`${e.height}px`;let n=this._canvas.getContext(`2d`);n&&(n.scale(t,t),this._renderWaveform())}_renderWaveform(){if(!this._canvas)return;let e=this._canvas.getContext(`2d`);if(!e)return;let t=this._canvas.getBoundingClientRect();e.clearRect(0,0,t.width,t.height);let n=getComputedStyle(this),r=this.barColor;if(!r){let e=n.getPropertyValue(`--md-sys-color-primary`).trim(),t=n.getPropertyValue(`color`).trim();r=e||t||`#0066cc`}let i=Math.floor(t.width/(this.barWidth+this.barGap)),a=t.height/2;for(let n=0;n<i;n++){let o=Math.floor(n/i*this.data.length),s=this.data[o]||0,c=Math.max(this.barHeight,s*t.height*.8),l=n*(this.barWidth+this.barGap),u=a-c/2;e.fillStyle=r,e.globalAlpha=.3+s*.7,this.barRadius>0?(e.beginPath(),e.roundRect(l,u,this.barWidth,c,this.barRadius),e.fill()):e.fillRect(l,u,this.barWidth,c)}this.fadeEdges&&O(e,t.width,t.height,this.fadeWidth),e.globalAlpha=1}};T([(0,n.property)({type:Array})],j.prototype,`data`,void 0),T([(0,n.property)({type:Number})],j.prototype,`barWidth`,void 0),T([(0,n.property)({type:Number})],j.prototype,`barHeight`,void 0),T([(0,n.property)({type:Number})],j.prototype,`barGap`,void 0),T([(0,n.property)({type:Number})],j.prototype,`barRadius`,void 0),T([(0,n.property)({type:String})],j.prototype,`barColor`,void 0),T([(0,n.property)({type:Boolean})],j.prototype,`fadeEdges`,void 0),T([(0,n.property)({type:Number})],j.prototype,`fadeWidth`,void 0),T([(0,n.property)({type:Number})],j.prototype,`height`,void 0),T([(0,n.query)(`canvas`)],j.prototype,`_canvas`,void 0),T([(0,n.query)(`.container`)],j.prototype,`_container`,void 0),j=T([(0,n.customElement)(`ui-waveform`)],j);var M=class extends Event{constructor(e,t,n,r){super(`context-request`,{bubbles:!0,composed:!0}),this.context=e,this.contextTarget=t,this.callback=n,this.subscribe=r??!1}};function N(e){return e}var P=class{constructor(e,t,n,r){if(this.subscribe=!1,this.provided=!1,this.value=void 0,this.t=(e,t)=>{this.unsubscribe&&(this.unsubscribe!==t&&(this.provided=!1,this.unsubscribe()),this.subscribe||this.unsubscribe()),this.value=e,this.host.requestUpdate(),this.provided&&!this.subscribe||(this.provided=!0,this.callback&&this.callback(e,t)),this.unsubscribe=t},this.host=e,t.context!==void 0){let e=t;this.context=e.context,this.callback=e.callback,this.subscribe=e.subscribe??!1}else this.context=t,this.callback=n,this.subscribe=r??!1;this.host.addController(this)}hostConnected(){this.dispatchRequest()}hostDisconnected(){this.unsubscribe&&=(this.unsubscribe(),void 0)}dispatchRequest(){this.host.dispatchEvent(new M(this.context,this.host,this.t,this.subscribe))}},F=class{get value(){return this.o}set value(e){this.setValue(e)}setValue(e,t=!1){let n=t||!Object.is(e,this.o);this.o=e,n&&this.updateObservers()}constructor(e){this.subscriptions=new Map,this.updateObservers=()=>{for(let[e,{disposer:t}]of this.subscriptions)e(this.o,t)},e!==void 0&&(this.value=e)}addCallback(e,t,n){if(!n)return void e(this.value);this.subscriptions.has(e)||this.subscriptions.set(e,{disposer:()=>{this.subscriptions.delete(e)},consumerHost:t});let{disposer:r}=this.subscriptions.get(e);e(this.value,r)}clearCallbacks(){this.subscriptions.clear()}},I=class extends Event{constructor(e,t){super(`context-provider`,{bubbles:!0,composed:!0}),this.context=e,this.contextTarget=t}},L=class extends F{constructor(e,t,n){super(t.context===void 0?n:t.initialValue),this.onContextRequest=e=>{if(e.context!==this.context)return;let t=e.contextTarget??e.composedPath()[0];t!==this.host&&(e.stopPropagation(),this.addCallback(e.callback,t,e.subscribe))},this.onProviderRequest=e=>{if(e.context!==this.context||(e.contextTarget??e.composedPath()[0])===this.host)return;let t=new Set;for(let[e,{consumerHost:n}]of this.subscriptions)t.has(e)||(t.add(e),n.dispatchEvent(new M(this.context,n,e,!0)));e.stopPropagation()},this.host=e,t.context===void 0?this.context=t:this.context=t.context,this.attachListeners(),this.host.addController?.(this)}attachListeners(){this.host.addEventListener(`context-request`,this.onContextRequest),this.host.addEventListener(`context-provider`,this.onProviderRequest)}hostConnected(){this.host.dispatchEvent(new I(this.context,this.host))}};function R({context:e}){return(t,n)=>{let r=new WeakMap;if(typeof n==`object`)return{get(){return t.get.call(this)},set(e){return r.get(this).setValue(e),t.set.call(this,e)},init(t){return r.set(this,new L(this,{context:e,initialValue:t})),t}};{t.constructor.addInitializer((t=>{r.set(t,new L(t,{context:e}))}));let i=Object.getOwnPropertyDescriptor(t,n),a;if(i===void 0){let e=new WeakMap;a={get(){return e.get(this)},set(t){r.get(this).setValue(t),e.set(this,t)},configurable:!0,enumerable:!0}}else{let e=i.set;a={...i,set(t){r.get(this).setValue(t),e?.call(this,t)}}}Object.defineProperty(t,n,a);return}}}function z({context:e,subscribe:t}){return(n,r)=>{typeof r==`object`?r.addInitializer((function(){new P(this,{context:e,callback:e=>{n.set.call(this,e)},subscribe:t})})):n.constructor.addInitializer((n=>{new P(n,{context:e,callback:e=>{n[r]=e},subscribe:t})}))}}let B=N(`ui-audio-player-context`);var V=class extends t.LitElement{constructor(...e){super(...e),this.src=``,this._animationFrameId=0,this.state={src:``,isPlaying:!1,isBuffering:!1,currentTime:0,duration:0,volume:1,muted:!1,analyserNode:void 0,play:()=>this.play(),pause:()=>this.pause(),togglePlay:()=>this._togglePlay(),seek:e=>this._seek(e),setVolume:e=>this._setVolume(e),toggleMute:()=>this._toggleMute()}}static{this.styles=t.css`
+    `}firstUpdated(){this._resizeObserver=new ResizeObserver(()=>{this._handleResize()}),this._resizeObserver.observe(this._container)}updated(e){super.updated(e),(e.has(`data`)||e.has(`barColor`))&&this._renderWaveform()}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver&&this._resizeObserver.disconnect()}_handleResize(){if(!this._canvas||!this._container)return;let e=this._container.getBoundingClientRect(),t=window.devicePixelRatio||1;this._canvas.width=e.width*t,this._canvas.height=e.height*t,this._canvas.style.width=`${e.width}px`,this._canvas.style.height=`${e.height}px`;let n=this._canvas.getContext(`2d`);n&&(n.scale(t,t),this._renderWaveform())}_renderWaveform(){if(!this._canvas)return;let e=this._canvas.getContext(`2d`);if(!e)return;let t=this._canvas.getBoundingClientRect();e.clearRect(0,0,t.width,t.height);let n=getComputedStyle(this),r=this.barColor;if(!r){let e=n.getPropertyValue(`--md-sys-color-primary`).trim(),t=n.getPropertyValue(`color`).trim();r=e||t||`#0066cc`}let i=Math.floor(t.width/(this.barWidth+this.barGap)),a=t.height/2;for(let n=0;n<i;n++){let o=Math.floor(n/i*this.data.length),s=this.data[o]||0,c=Math.max(this.barHeight,s*t.height*.8),l=n*(this.barWidth+this.barGap),u=a-c/2;e.fillStyle=r,e.globalAlpha=.3+s*.7,this.barRadius>0?(e.beginPath(),e.roundRect(l,u,this.barWidth,c,this.barRadius),e.fill()):e.fillRect(l,u,this.barWidth,c)}this.fadeEdges&&b(e,t.width,t.height,this.fadeWidth),e.globalAlpha=1}};_([(0,n.property)({type:Array})],C.prototype,`data`,void 0),_([(0,n.property)({type:Number})],C.prototype,`barWidth`,void 0),_([(0,n.property)({type:Number})],C.prototype,`barHeight`,void 0),_([(0,n.property)({type:Number})],C.prototype,`barGap`,void 0),_([(0,n.property)({type:Number})],C.prototype,`barRadius`,void 0),_([(0,n.property)({type:String})],C.prototype,`barColor`,void 0),_([(0,n.property)({type:Boolean})],C.prototype,`fadeEdges`,void 0),_([(0,n.property)({type:Number})],C.prototype,`fadeWidth`,void 0),_([(0,n.property)({type:Number})],C.prototype,`height`,void 0),_([(0,n.query)(`canvas`)],C.prototype,`_canvas`,void 0),_([(0,n.query)(`.container`)],C.prototype,`_container`,void 0),C=_([(0,n.customElement)(`ui-waveform`)],C);var w=class extends Event{constructor(e,t,n,r){super(`context-request`,{bubbles:!0,composed:!0}),this.context=e,this.contextTarget=t,this.callback=n,this.subscribe=r??!1}};function T(e){return e}var E=class{constructor(e,t,n,r){if(this.subscribe=!1,this.provided=!1,this.value=void 0,this.t=(e,t)=>{this.unsubscribe&&(this.unsubscribe!==t&&(this.provided=!1,this.unsubscribe()),this.subscribe||this.unsubscribe()),this.value=e,this.host.requestUpdate(),this.provided&&!this.subscribe||(this.provided=!0,this.callback&&this.callback(e,t)),this.unsubscribe=t},this.host=e,t.context!==void 0){let e=t;this.context=e.context,this.callback=e.callback,this.subscribe=e.subscribe??!1}else this.context=t,this.callback=n,this.subscribe=r??!1;this.host.addController(this)}hostConnected(){this.dispatchRequest()}hostDisconnected(){this.unsubscribe&&=(this.unsubscribe(),void 0)}dispatchRequest(){this.host.dispatchEvent(new w(this.context,this.host,this.t,this.subscribe))}},D=class{get value(){return this.o}set value(e){this.setValue(e)}setValue(e,t=!1){let n=t||!Object.is(e,this.o);this.o=e,n&&this.updateObservers()}constructor(e){this.subscriptions=new Map,this.updateObservers=()=>{for(let[e,{disposer:t}]of this.subscriptions)e(this.o,t)},e!==void 0&&(this.value=e)}addCallback(e,t,n){if(!n)return void e(this.value);this.subscriptions.has(e)||this.subscriptions.set(e,{disposer:()=>{this.subscriptions.delete(e)},consumerHost:t});let{disposer:r}=this.subscriptions.get(e);e(this.value,r)}clearCallbacks(){this.subscriptions.clear()}},O=class extends Event{constructor(e,t){super(`context-provider`,{bubbles:!0,composed:!0}),this.context=e,this.contextTarget=t}},k=class extends D{constructor(e,t,n){super(t.context===void 0?n:t.initialValue),this.onContextRequest=e=>{if(e.context!==this.context)return;let t=e.contextTarget??e.composedPath()[0];t!==this.host&&(e.stopPropagation(),this.addCallback(e.callback,t,e.subscribe))},this.onProviderRequest=e=>{if(e.context!==this.context||(e.contextTarget??e.composedPath()[0])===this.host)return;let t=new Set;for(let[e,{consumerHost:n}]of this.subscriptions)t.has(e)||(t.add(e),n.dispatchEvent(new w(this.context,n,e,!0)));e.stopPropagation()},this.host=e,t.context===void 0?this.context=t:this.context=t.context,this.attachListeners(),this.host.addController?.(this)}attachListeners(){this.host.addEventListener(`context-request`,this.onContextRequest),this.host.addEventListener(`context-provider`,this.onProviderRequest)}hostConnected(){this.host.dispatchEvent(new O(this.context,this.host))}};function A({context:e}){return(t,n)=>{let r=new WeakMap;if(typeof n==`object`)return{get(){return t.get.call(this)},set(e){return r.get(this).setValue(e),t.set.call(this,e)},init(t){return r.set(this,new k(this,{context:e,initialValue:t})),t}};{t.constructor.addInitializer((t=>{r.set(t,new k(t,{context:e}))}));let i=Object.getOwnPropertyDescriptor(t,n),a;if(i===void 0){let e=new WeakMap;a={get(){return e.get(this)},set(t){r.get(this).setValue(t),e.set(this,t)},configurable:!0,enumerable:!0}}else{let e=i.set;a={...i,set(t){r.get(this).setValue(t),e?.call(this,t)}}}Object.defineProperty(t,n,a);return}}}function j({context:e,subscribe:t}){return(n,r)=>{typeof r==`object`?r.addInitializer((function(){new E(this,{context:e,callback:e=>{n.set.call(this,e)},subscribe:t})})):n.constructor.addInitializer((n=>{new E(n,{context:e,callback:e=>{n[r]=e},subscribe:t})}))}}let M=T(`ui-audio-player-context`);var N=class extends t.LitElement{constructor(...e){super(...e),this.src=``,this._animationFrameId=0,this.state={src:``,isPlaying:!1,isBuffering:!1,currentTime:0,duration:0,volume:1,muted:!1,analyserNode:void 0,play:()=>this.play(),pause:()=>this.pause(),togglePlay:()=>this._togglePlay(),seek:e=>this._seek(e),setVolume:e=>this._setVolume(e),toggleMute:()=>this._toggleMute()}}static{this.styles=t.css`
     :host {
       display: contents; /* We are completely invisible, just wrapping children */
     }
@@ -235,7 +235,7 @@
         @error="${this._handleError}"
       ></audio>
       <slot></slot>
-    `}willUpdate(e){e.has(`src`)&&this._updateState({src:this.src,isPlaying:!1,currentTime:0,error:void 0})}updated(e){e.has(`src`)&&this._audioEl&&this._audioEl.load()}disconnectedCallback(){super.disconnectedCallback(),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId),this._audioContext&&this._audioContext.state!==`closed`&&this._audioContext.close()}_updateState(e){this.state={...this.state,...e},this.dispatchEvent(new CustomEvent(`state-change`,{detail:this.state,bubbles:!0,composed:!0}))}_setupAudioContext(){if(!(this._audioContext||!this._audioEl))try{this._audioContext=new(window.AudioContext||window.webkitAudioContext),this._analyserNode=this._audioContext.createAnalyser(),this._analyserNode.fftSize=256,this._analyserNode.smoothingTimeConstant=.8,this._mediaSource=this._audioContext.createMediaElementSource(this._audioEl),this._mediaSource.connect(this._analyserNode),this._analyserNode.connect(this._audioContext.destination),this._updateState({analyserNode:this._analyserNode})}catch(e){console.warn(`Failed to set up AudioContext for visualizer:`,e)}}play(){this._audioEl.src&&(this._setupAudioContext(),this._audioContext?.state===`suspended`&&this._audioContext.resume(),this._audioEl.play().catch(e=>{console.error(`Error playing audio`,e),this._updateState({error:`Playback failed`})}))}pause(){this._audioEl&&this._audioEl.pause()}_togglePlay(){this.state.isPlaying?this.pause():this.play()}_seek(e){this._audioEl&&(this._audioEl.currentTime=e,this._updateState({currentTime:e}))}_setVolume(e){this._audioEl&&(this._audioEl.volume=e,this._updateState({volume:e,muted:e===0}))}_toggleMute(){this._audioEl&&(this._audioEl.muted=!this._audioEl.muted,this._updateState({muted:this._audioEl.muted}))}_handleLoadedMetadata(){this._updateState({duration:this._audioEl.duration})}_handleEnded(){this._updateState({isPlaying:!1,currentTime:0}),this._audioEl.currentTime=0}_handlePlaying(){this._updateState({isPlaying:!0,isBuffering:!1,error:void 0}),this._startTrackingTime()}_handlePause(){this._updateState({isPlaying:!1}),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId)}_handleError(){this._updateState({error:`Error loading audio`,isPlaying:!1,isBuffering:!1})}_startTrackingTime(){let e=()=>{this._audioEl&&this.state.isPlaying&&(Math.abs(this.state.currentTime-this._audioEl.currentTime)>.05&&this._updateState({currentTime:this._audioEl.currentTime}),this._animationFrameId=requestAnimationFrame(e))};this._animationFrameId=requestAnimationFrame(e)}};T([(0,n.property)({type:String})],V.prototype,`src`,void 0),T([(0,n.query)(`audio`)],V.prototype,`_audioEl`,void 0),T([R({context:B}),(0,n.state)()],V.prototype,`state`,void 0),V=T([(0,n.customElement)(`ui-audio-provider`)],V);var H=class extends t.LitElement{static{this.styles=t.css`
+    `}willUpdate(e){e.has(`src`)&&this._updateState({src:this.src,isPlaying:!1,currentTime:0,error:void 0})}updated(e){e.has(`src`)&&this._audioEl&&this._audioEl.load()}disconnectedCallback(){super.disconnectedCallback(),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId),this._audioContext&&this._audioContext.state!==`closed`&&this._audioContext.close()}_updateState(e){this.state={...this.state,...e},this.dispatchEvent(new CustomEvent(`state-change`,{detail:this.state,bubbles:!0,composed:!0}))}_setupAudioContext(){if(!(this._audioContext||!this._audioEl))try{this._audioContext=new(window.AudioContext||window.webkitAudioContext),this._analyserNode=this._audioContext.createAnalyser(),this._analyserNode.fftSize=256,this._analyserNode.smoothingTimeConstant=.8,this._mediaSource=this._audioContext.createMediaElementSource(this._audioEl),this._mediaSource.connect(this._analyserNode),this._analyserNode.connect(this._audioContext.destination),this._updateState({analyserNode:this._analyserNode})}catch(e){console.warn(`Failed to set up AudioContext for visualizer:`,e)}}play(){this._audioEl.src&&(this._setupAudioContext(),this._audioContext?.state===`suspended`&&this._audioContext.resume(),this._audioEl.play().catch(e=>{console.error(`Error playing audio`,e),this._updateState({error:`Playback failed`})}))}pause(){this._audioEl&&this._audioEl.pause()}_togglePlay(){this.state.isPlaying?this.pause():this.play()}_seek(e){this._audioEl&&(this._audioEl.currentTime=e,this._updateState({currentTime:e}))}_setVolume(e){this._audioEl&&(this._audioEl.volume=e,this._updateState({volume:e,muted:e===0}))}_toggleMute(){this._audioEl&&(this._audioEl.muted=!this._audioEl.muted,this._updateState({muted:this._audioEl.muted}))}_handleLoadedMetadata(){this._updateState({duration:this._audioEl.duration})}_handleEnded(){this._updateState({isPlaying:!1,currentTime:0}),this._audioEl.currentTime=0}_handlePlaying(){this._updateState({isPlaying:!0,isBuffering:!1,error:void 0}),this._startTrackingTime()}_handlePause(){this._updateState({isPlaying:!1}),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId)}_handleError(){this._updateState({error:`Error loading audio`,isPlaying:!1,isBuffering:!1})}_startTrackingTime(){let e=()=>{this._audioEl&&this.state.isPlaying&&(Math.abs(this.state.currentTime-this._audioEl.currentTime)>.05&&this._updateState({currentTime:this._audioEl.currentTime}),this._animationFrameId=requestAnimationFrame(e))};this._animationFrameId=requestAnimationFrame(e)}};_([(0,n.property)({type:String})],N.prototype,`src`,void 0),_([(0,n.query)(`audio`)],N.prototype,`_audioEl`,void 0),_([A({context:M}),(0,n.state)()],N.prototype,`state`,void 0),N=_([(0,n.customElement)(`ui-audio-provider`)],N);var P=class extends t.LitElement{static{this.styles=t.css`
     :host {
       display: inline-flex;
       position: relative;
@@ -294,7 +294,7 @@
         <md-icon>${e?`pause`:`play_arrow`}</md-icon>
       </md-filled-icon-button>
       ${n&&e?t.html`<md-circular-progress indeterminate></md-circular-progress>`:``}
-    `}_handleClick(){this.playerState&&this.playerState.togglePlay()}};T([z({context:B,subscribe:!0}),(0,n.property)({attribute:!1})],H.prototype,`playerState`,void 0),H=T([(0,n.customElement)(`ui-audio-play-button`)],H);var U=class extends t.LitElement{constructor(...e){super(...e),this._isDragging=!1,this._dragValue=0}static{this.styles=t.css`
+    `}_handleClick(){this.playerState&&this.playerState.togglePlay()}};_([j({context:M,subscribe:!0}),(0,n.property)({attribute:!1})],P.prototype,`playerState`,void 0),P=_([(0,n.customElement)(`ui-audio-play-button`)],P);var F=class extends t.LitElement{constructor(...e){super(...e),this._isDragging=!1,this._dragValue=0}static{this.styles=t.css`
     :host {
       display: flex;
       width: 100%;
@@ -317,7 +317,7 @@
         @input="${this._handleInput}"
         @change="${this._handleChange}"
       ></md-slider>
-    `}_handleInput(e){this._isDragging=!0,this._dragValue=e.target.value}_handleChange(e){this._dragValue=e.target.value,this.playerState&&this.playerState.seek(this._dragValue),this._isDragging=!1}};T([z({context:B,subscribe:!0}),(0,n.property)({attribute:!1})],U.prototype,`playerState`,void 0),U=T([(0,n.customElement)(`ui-audio-progress-slider`)],U);var W=class extends t.LitElement{constructor(...e){super(...e),this.format=`full`}static{this.styles=t.css`
+    `}_handleInput(e){this._isDragging=!0,this._dragValue=e.target.value}_handleChange(e){this._dragValue=e.target.value,this.playerState&&this.playerState.seek(this._dragValue),this._isDragging=!1}};_([j({context:M,subscribe:!0}),(0,n.property)({attribute:!1})],F.prototype,`playerState`,void 0),F=_([(0,n.customElement)(`ui-audio-progress-slider`)],F);var I=class extends t.LitElement{constructor(...e){super(...e),this.format=`full`}static{this.styles=t.css`
     :host {
       display: inline-block;
       font-variant-numeric: tabular-nums;
@@ -326,7 +326,7 @@
       font-family: inherit;
     }
   `}render(){let e=this.playerState?.currentTime||0,n=this.playerState?.duration||0;if(this.format===`elapsed`)return t.html`${this._formatTime(e)}`;if(this.format===`remaining`){let r=Math.max(0,n-e);return t.html`-${this._formatTime(r)}`}else return t.html`${this._formatTime(e)} /
-      ${n?this._formatTime(n):`--:--`}`}_formatTime(e){if(!e||isNaN(e))return`0:00`;let t=Math.floor(e/3600),n=Math.floor(e%3600/60),r=Math.floor(e%60),i=``;return t>0&&(i+=``+t+`:`+(n<10?`0`:``)),i+=``+n+`:`+(r<10?`0`:``),i+=``+r,i}};T([z({context:B,subscribe:!0}),(0,n.property)({attribute:!1})],W.prototype,`playerState`,void 0),T([(0,n.property)({type:String})],W.prototype,`format`,void 0),W=T([(0,n.customElement)(`ui-audio-time-display`)],W);var G=class extends t.LitElement{static{this.styles=t.css`
+      ${n?this._formatTime(n):`--:--`}`}_formatTime(e){if(!e||isNaN(e))return`0:00`;let t=Math.floor(e/3600),n=Math.floor(e%3600/60),r=Math.floor(e%60),i=``;return t>0&&(i+=``+t+`:`+(n<10?`0`:``)),i+=``+n+`:`+(r<10?`0`:``),i+=``+r,i}};_([j({context:M,subscribe:!0}),(0,n.property)({attribute:!1})],I.prototype,`playerState`,void 0),_([(0,n.property)({type:String})],I.prototype,`format`,void 0),I=_([(0,n.customElement)(`ui-audio-time-display`)],I);var L=class extends t.LitElement{static{this.styles=t.css`
     :host {
       display: inline-block;
       width: 100%;
@@ -370,7 +370,7 @@
           </div>
         </div>
       </ui-audio-provider>
-    `}};T([(0,n.property)({type:Object})],G.prototype,`item`,void 0),G=T([(0,n.customElement)(`ui-audio-player`)],G);var K=class extends t.LitElement{constructor(...e){super(...e),this.muted=!1,this.disabled=!1,this._devices=[],this._loading=!0,this._error=null,this._hasPermission=!1,this._isMenuOpen=!1,this._handleDeviceChange=()=>{this._hasPermission?this._loadDevicesWithPermission():this._loadDevicesWithoutPermission()}}static{this.styles=t.css`
+    `}};_([(0,n.property)({type:Object})],L.prototype,`item`,void 0),L=_([(0,n.customElement)(`ui-audio-player`)],L);var R=class extends t.LitElement{constructor(...e){super(...e),this.muted=!1,this.disabled=!1,this._devices=[],this._loading=!0,this._error=null,this._hasPermission=!1,this._isMenuOpen=!1,this._handleDeviceChange=()=>{this._hasPermission?this._loadDevicesWithPermission():this._loadDevicesWithoutPermission()}}static{this.styles=t.css`
     :host {
       display: inline-block;
       position: relative;
@@ -501,7 +501,7 @@
               </div>
             `:``}
       </md-menu>
-    `}_toggleMenu(){this._menuEl&&(this._menuEl.open=!this._menuEl.open,this._isMenuOpen=this._menuEl.open)}_selectDevice(e){this.value=e,this.dispatchEvent(new CustomEvent(`device-change`,{detail:{deviceId:e},bubbles:!0,composed:!0})),this._isMenuOpen&&!this.muted&&this._hasPermission&&this._startPreview()}_toggleMute(e){e.stopPropagation(),this.muted=!this.muted,this.dispatchEvent(new CustomEvent(`mute-change`,{detail:{muted:this.muted},bubbles:!0,composed:!0}))}async _loadDevicesWithoutPermission(){try{this._loading=!0,this._error=null;let e=await navigator.mediaDevices.enumerateDevices();this._parseDeviceList(e)}catch(e){this._error=e instanceof Error?e.message:`Failed to get audio devices`}finally{this._loading=!1}}async _loadDevicesWithPermission(){if(!this._loading)try{this._loading=!0,this._error=null,(await navigator.mediaDevices.getUserMedia({audio:!0})).getTracks().forEach(e=>e.stop());let e=await navigator.mediaDevices.enumerateDevices();this._parseDeviceList(e),this._hasPermission=!0,this._isMenuOpen&&!this.muted&&this._startPreview()}catch(e){this._error=e instanceof Error?e.message:`Permission denied`}finally{this._loading=!1}}_parseDeviceList(e){let t=e.filter(e=>e.kind===`audioinput`).map(e=>{let t=e.label||"Microphone ${device.deviceId.slice(0, 8)}";return t=t.replace(/\s*\([^)]*\)/g,``).trim(),{deviceId:e.deviceId,label:t,groupId:e.groupId}});this._devices=t,!this.value&&t.length>0&&(this.value=t[0].deviceId,this.dispatchEvent(new CustomEvent(`device-change`,{detail:{deviceId:this.value},bubbles:!0,composed:!0})))}async _startPreview(){if(this._stopPreview(),this.value)try{this._previewStream=await navigator.mediaDevices.getUserMedia({audio:{deviceId:{exact:this.value}}}),this._previewAudioContext=new(window.AudioContext||window.webkitAudioContext),this._previewAnalyser=this._previewAudioContext.createAnalyser(),this._previewAnalyser.fftSize=256,this._previewAnalyser.smoothingTimeConstant=.8,this._previewAudioContext.createMediaStreamSource(this._previewStream).connect(this._previewAnalyser)}catch(e){console.warn(`Failed to start preview stream`,e)}}_stopPreview(){this._previewStream&&=(this._previewStream.getTracks().forEach(e=>e.stop()),void 0),this._previewAudioContext&&this._previewAudioContext.state!==`closed`&&(this._previewAudioContext.close(),this._previewAudioContext=void 0),this._previewAnalyser=void 0}};T([(0,n.property)({type:String})],K.prototype,`value`,void 0),T([(0,n.property)({type:Boolean})],K.prototype,`muted`,void 0),T([(0,n.property)({type:Boolean})],K.prototype,`disabled`,void 0),T([(0,n.state)()],K.prototype,`_devices`,void 0),T([(0,n.state)()],K.prototype,`_loading`,void 0),T([(0,n.state)()],K.prototype,`_error`,void 0),T([(0,n.state)()],K.prototype,`_hasPermission`,void 0),T([(0,n.state)()],K.prototype,`_isMenuOpen`,void 0),T([(0,n.state)()],K.prototype,`_previewAnalyser`,void 0),T([(0,n.query)(`md-menu`)],K.prototype,`_menuEl`,void 0),K=T([(0,n.customElement)(`ui-mic-selector`)],K);var q=class extends t.LitElement{constructor(...e){super(...e),this.voices=[],this.placeholder=`Select a voice...`,this.idKey=`voiceId`,this.titleKey=`name`,this.subtitleKey=`category`,this.previewUrlKey=`previewUrl`,this.useOrbs=!1,this.colorKey=`colors`,this._searchQuery=``}static{this.styles=t.css`
+    `}_toggleMenu(){this._menuEl&&(this._menuEl.open=!this._menuEl.open,this._isMenuOpen=this._menuEl.open)}_selectDevice(e){this.value=e,this.dispatchEvent(new CustomEvent(`device-change`,{detail:{deviceId:e},bubbles:!0,composed:!0})),this._isMenuOpen&&!this.muted&&this._hasPermission&&this._startPreview()}_toggleMute(e){e.stopPropagation(),this.muted=!this.muted,this.dispatchEvent(new CustomEvent(`mute-change`,{detail:{muted:this.muted},bubbles:!0,composed:!0}))}async _loadDevicesWithoutPermission(){try{this._loading=!0,this._error=null;let e=await navigator.mediaDevices.enumerateDevices();this._parseDeviceList(e)}catch(e){this._error=e instanceof Error?e.message:`Failed to get audio devices`}finally{this._loading=!1}}async _loadDevicesWithPermission(){if(!this._loading)try{this._loading=!0,this._error=null,(await navigator.mediaDevices.getUserMedia({audio:!0})).getTracks().forEach(e=>e.stop());let e=await navigator.mediaDevices.enumerateDevices();this._parseDeviceList(e),this._hasPermission=!0,this._isMenuOpen&&!this.muted&&this._startPreview()}catch(e){this._error=e instanceof Error?e.message:`Permission denied`}finally{this._loading=!1}}_parseDeviceList(e){let t=e.filter(e=>e.kind===`audioinput`).map(e=>{let t=e.label||"Microphone ${device.deviceId.slice(0, 8)}";return t=t.replace(/\s*\([^)]*\)/g,``).trim(),{deviceId:e.deviceId,label:t,groupId:e.groupId}});this._devices=t,!this.value&&t.length>0&&(this.value=t[0].deviceId,this.dispatchEvent(new CustomEvent(`device-change`,{detail:{deviceId:this.value},bubbles:!0,composed:!0})))}async _startPreview(){if(this._stopPreview(),this.value)try{this._previewStream=await navigator.mediaDevices.getUserMedia({audio:{deviceId:{exact:this.value}}}),this._previewAudioContext=new(window.AudioContext||window.webkitAudioContext),this._previewAnalyser=this._previewAudioContext.createAnalyser(),this._previewAnalyser.fftSize=256,this._previewAnalyser.smoothingTimeConstant=.8,this._previewAudioContext.createMediaStreamSource(this._previewStream).connect(this._previewAnalyser)}catch(e){console.warn(`Failed to start preview stream`,e)}}_stopPreview(){this._previewStream&&=(this._previewStream.getTracks().forEach(e=>e.stop()),void 0),this._previewAudioContext&&this._previewAudioContext.state!==`closed`&&(this._previewAudioContext.close(),this._previewAudioContext=void 0),this._previewAnalyser=void 0}};_([(0,n.property)({type:String})],R.prototype,`value`,void 0),_([(0,n.property)({type:Boolean})],R.prototype,`muted`,void 0),_([(0,n.property)({type:Boolean})],R.prototype,`disabled`,void 0),_([(0,n.state)()],R.prototype,`_devices`,void 0),_([(0,n.state)()],R.prototype,`_loading`,void 0),_([(0,n.state)()],R.prototype,`_error`,void 0),_([(0,n.state)()],R.prototype,`_hasPermission`,void 0),_([(0,n.state)()],R.prototype,`_isMenuOpen`,void 0),_([(0,n.state)()],R.prototype,`_previewAnalyser`,void 0),_([(0,n.query)(`md-menu`)],R.prototype,`_menuEl`,void 0),R=_([(0,n.customElement)(`ui-mic-selector`)],R);var z=class extends t.LitElement{constructor(...e){super(...e),this.voices=[],this.placeholder=`Select a voice...`,this.idKey=`voiceId`,this.titleKey=`name`,this.subtitleKey=`category`,this.previewUrlKey=`previewUrl`,this.useOrbs=!1,this.colorKey=`colors`,this._searchQuery=``}static{this.styles=t.css`
     :host {
       display: inline-block;
       width: 100%;
@@ -796,7 +796,7 @@
                 </md-menu-item>
               `)}
       </md-menu>
-    `}_toggleMenu(){this._menuEl&&(this._menuEl.open=!this._menuEl.open)}_handleMenuClosed(){this._stopPreview()}_selectVoice(e){this.value=e,this.dispatchEvent(new CustomEvent(`voice-change`,{detail:{voiceId:e},bubbles:!0,composed:!0}))}_togglePreview(e,t){e.stopPropagation(),e.preventDefault(),!(!t[this.previewUrlKey]||!this._audioEl)&&(this._previewingVoiceId===t[this.idKey]?this._stopPreview():(this._audioEl.src=t[this.previewUrlKey],this._audioEl.play().catch(console.error),this._previewingVoiceId=t[this.idKey]))}_stopPreview(){this._audioEl&&(this._audioEl.pause(),this._audioEl.currentTime=0),this._previewingVoiceId=void 0}};T([(0,n.property)({type:Array})],q.prototype,`voices`,void 0),T([(0,n.property)({type:String})],q.prototype,`value`,void 0),T([(0,n.property)({type:String})],q.prototype,`placeholder`,void 0),T([(0,n.property)({type:String})],q.prototype,`idKey`,void 0),T([(0,n.property)({type:String})],q.prototype,`titleKey`,void 0),T([(0,n.property)({type:String})],q.prototype,`subtitleKey`,void 0),T([(0,n.property)({type:String})],q.prototype,`previewUrlKey`,void 0),T([(0,n.property)({type:Boolean})],q.prototype,`useOrbs`,void 0),T([(0,n.property)({type:String})],q.prototype,`colorKey`,void 0),T([(0,n.state)()],q.prototype,`_searchQuery`,void 0),T([(0,n.state)()],q.prototype,`_previewingVoiceId`,void 0),T([(0,n.query)(`md-menu`)],q.prototype,`_menuEl`,void 0),T([(0,n.query)(`audio`)],q.prototype,`_audioEl`,void 0),q=T([(0,n.customElement)(`ui-voice-picker`)],q);var J=class extends t.LitElement{constructor(...e){super(...e),this.speed=50,this.barCount=60,this.barWidth=4,this.barHeight=4,this.barGap=2,this.barRadius=2,this.fadeEdges=!0,this.fadeWidth=24,this.height=128,this.active=!0,this._animationFrameId=0,this._lastTime=0,this._bars=[],this._seed=Math.random(),this._dataIndex=0}static{this.styles=t.css`
+    `}_toggleMenu(){this._menuEl&&(this._menuEl.open=!this._menuEl.open)}_handleMenuClosed(){this._stopPreview()}_selectVoice(e){this.value=e,this.dispatchEvent(new CustomEvent(`voice-change`,{detail:{voiceId:e},bubbles:!0,composed:!0}))}_togglePreview(e,t){e.stopPropagation(),e.preventDefault(),!(!t[this.previewUrlKey]||!this._audioEl)&&(this._previewingVoiceId===t[this.idKey]?this._stopPreview():(this._audioEl.src=t[this.previewUrlKey],this._audioEl.play().catch(console.error),this._previewingVoiceId=t[this.idKey]))}_stopPreview(){this._audioEl&&(this._audioEl.pause(),this._audioEl.currentTime=0),this._previewingVoiceId=void 0}};_([(0,n.property)({type:Array})],z.prototype,`voices`,void 0),_([(0,n.property)({type:String})],z.prototype,`value`,void 0),_([(0,n.property)({type:String})],z.prototype,`placeholder`,void 0),_([(0,n.property)({type:String})],z.prototype,`idKey`,void 0),_([(0,n.property)({type:String})],z.prototype,`titleKey`,void 0),_([(0,n.property)({type:String})],z.prototype,`subtitleKey`,void 0),_([(0,n.property)({type:String})],z.prototype,`previewUrlKey`,void 0),_([(0,n.property)({type:Boolean})],z.prototype,`useOrbs`,void 0),_([(0,n.property)({type:String})],z.prototype,`colorKey`,void 0),_([(0,n.state)()],z.prototype,`_searchQuery`,void 0),_([(0,n.state)()],z.prototype,`_previewingVoiceId`,void 0),_([(0,n.query)(`md-menu`)],z.prototype,`_menuEl`,void 0),_([(0,n.query)(`audio`)],z.prototype,`_audioEl`,void 0),z=_([(0,n.customElement)(`ui-voice-picker`)],z);var B=class extends t.LitElement{constructor(...e){super(...e),this.speed=50,this.barCount=60,this.barWidth=4,this.barHeight=4,this.barGap=2,this.barRadius=2,this.fadeEdges=!0,this.fadeWidth=24,this.height=128,this.active=!0,this._animationFrameId=0,this._lastTime=0,this._bars=[],this._seed=Math.random(),this._dataIndex=0}static{this.styles=t.css`
     :host {
       display: block;
       width: 100%;
@@ -818,7 +818,7 @@
       <div class="container" style="height: ${this.height}px;">
         <canvas></canvas>
       </div>
-    `}firstUpdated(){this._resizeObserver=new ResizeObserver(()=>{this._handleResize()}),this._resizeObserver.observe(this._container),this._canvas&&this._container&&this._populateInitialBars(),this._startAnimation()}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver&&this._resizeObserver.disconnect(),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId)}_handleResize(){if(!this._canvas||!this._container)return;let e=this._container.getBoundingClientRect(),t=window.devicePixelRatio||1;this._canvas.width=e.width*t,this._canvas.height=e.height*t,this._canvas.style.width=`${e.width}px`,this._canvas.style.height=`${e.height}px`;let n=this._canvas.getContext(`2d`);n&&n.scale(t,t)}_seededRandom(e){let t=Math.sin(this._seed*1e4+e*137.5)*1e4;return t-Math.floor(t)}_populateInitialBars(){let e=this._container.getBoundingClientRect(),t=this.barWidth+this.barGap,n=e.width,r=0;for(this._bars=[];n>-t;)this._bars.push({x:n,height:.2+this._seededRandom(r++)*.6}),n-=t;this._bars.reverse()}_startAnimation(){this._lastTime=performance.now();let e=t=>{if(!this._canvas)return;let n=this._canvas.getContext(`2d`);if(!n)return;let r=this._lastTime?(t-this._lastTime)/1e3:0;this._lastTime=t;let i=this._canvas.getBoundingClientRect();n.clearRect(0,0,i.width,i.height);let a=this.barColor;a||=getComputedStyle(this).getPropertyValue(`--md-sys-color-primary`).trim()||`#0066cc`;let o=this.barWidth+this.barGap,s=this.active?this.speed:0;for(let e=0;e<this._bars.length;e++)this._bars[e].x-=s*r,this.active||(this._bars[e].height+=(.05-this._bars[e].height)*.15);for(this._bars=this._bars.filter(e=>e.x+this.barWidth>-o);this._bars.length===0||this._bars[this._bars.length-1].x<i.width;){let e=this._bars[this._bars.length-1],t=e?e.x+o:i.width,n;if(this.data&&this.data.length>0)n=this.data[this._dataIndex%this.data.length]||.1,this._dataIndex=(this._dataIndex+1)%this.data.length;else if(this.analyserNode){(!this._dataArray||this._dataArray.length!==this.analyserNode.frequencyBinCount)&&(this._dataArray=new Uint8Array(this.analyserNode.frequencyBinCount)),this.analyserNode.getByteFrequencyData(this._dataArray);let e=0,t=Math.min(this._dataArray.length,50);for(let n=0;n<t;n++)e+=this._dataArray[n];let r=e/t/255;n=Math.max(.1,r**1.5*1.5)}else{let e=Date.now()/1e3,t=this._bars.length+e*.01,r=Math.sin(t*.1)*.2,i=Math.cos(t*.05)*.15,a=this._seededRandom(t)*.4;n=Math.max(.1,Math.min(.9,.3+r+i+a))}if(this._bars.push({x:t,height:n}),this._bars.length>this.barCount*2)break}let c=i.height/2;for(let e of this._bars)if(e.x<i.width&&e.x+this.barWidth>0){let t=Math.max(this.barHeight,e.height*i.height*.8),r=c-t/2;n.fillStyle=a,n.globalAlpha=.3+e.height*.7,this.barRadius>0?(n.beginPath(),n.roundRect(e.x,r,this.barWidth,t,this.barRadius),n.fill()):n.fillRect(e.x,r,this.barWidth,t)}n.globalAlpha=1,this.fadeEdges&&this.fadeWidth>0&&O(n,i.width,i.height,this.fadeWidth),this._animationFrameId=requestAnimationFrame(e)};this._animationFrameId=requestAnimationFrame(e)}};T([(0,n.property)({type:Number})],J.prototype,`speed`,void 0),T([(0,n.property)({type:Number})],J.prototype,`barCount`,void 0),T([(0,n.property)({type:Number})],J.prototype,`barWidth`,void 0),T([(0,n.property)({type:Number})],J.prototype,`barHeight`,void 0),T([(0,n.property)({type:Number})],J.prototype,`barGap`,void 0),T([(0,n.property)({type:Number})],J.prototype,`barRadius`,void 0),T([(0,n.property)({type:String})],J.prototype,`barColor`,void 0),T([(0,n.property)({type:Boolean})],J.prototype,`fadeEdges`,void 0),T([(0,n.property)({type:Number})],J.prototype,`fadeWidth`,void 0),T([(0,n.property)({type:Number})],J.prototype,`height`,void 0),T([(0,n.property)({type:Array})],J.prototype,`data`,void 0),T([(0,n.property)({attribute:!1})],J.prototype,`analyserNode`,void 0),T([(0,n.property)({type:Boolean})],J.prototype,`active`,void 0),T([(0,n.query)(`canvas`)],J.prototype,`_canvas`,void 0),T([(0,n.query)(`.container`)],J.prototype,`_container`,void 0),J=T([(0,n.customElement)(`ui-scrolling-waveform`)],J);var Y=class extends t.LitElement{constructor(...e){super(...e),this.title=`Component`,this.description=``,this.mode=`preview`}static{this.styles=t.css`
+    `}firstUpdated(){this._resizeObserver=new ResizeObserver(()=>{this._handleResize()}),this._resizeObserver.observe(this._container),this._canvas&&this._container&&this._populateInitialBars(),this._startAnimation()}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver&&this._resizeObserver.disconnect(),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId)}_handleResize(){if(!this._canvas||!this._container)return;let e=this._container.getBoundingClientRect(),t=window.devicePixelRatio||1;this._canvas.width=e.width*t,this._canvas.height=e.height*t,this._canvas.style.width=`${e.width}px`,this._canvas.style.height=`${e.height}px`;let n=this._canvas.getContext(`2d`);n&&n.scale(t,t)}_seededRandom(e){let t=Math.sin(this._seed*1e4+e*137.5)*1e4;return t-Math.floor(t)}_populateInitialBars(){let e=this._container.getBoundingClientRect(),t=this.barWidth+this.barGap,n=e.width,r=0;for(this._bars=[];n>-t;)this._bars.push({x:n,height:.2+this._seededRandom(r++)*.6}),n-=t;this._bars.reverse()}_startAnimation(){this._lastTime=performance.now();let e=t=>{if(!this._canvas)return;let n=this._canvas.getContext(`2d`);if(!n)return;let r=this._lastTime?(t-this._lastTime)/1e3:0;this._lastTime=t;let i=this._canvas.getBoundingClientRect();n.clearRect(0,0,i.width,i.height);let a=this.barColor;a||=getComputedStyle(this).getPropertyValue(`--md-sys-color-primary`).trim()||`#0066cc`;let o=this.barWidth+this.barGap,s=this.active?this.speed:0;for(let e=0;e<this._bars.length;e++)this._bars[e].x-=s*r,this.active||(this._bars[e].height+=(.05-this._bars[e].height)*.15);for(this._bars=this._bars.filter(e=>e.x+this.barWidth>-o);this._bars.length===0||this._bars[this._bars.length-1].x<i.width;){let e=this._bars[this._bars.length-1],t=e?e.x+o:i.width,n;if(this.data&&this.data.length>0)n=this.data[this._dataIndex%this.data.length]||.1,this._dataIndex=(this._dataIndex+1)%this.data.length;else if(this.analyserNode){(!this._dataArray||this._dataArray.length!==this.analyserNode.frequencyBinCount)&&(this._dataArray=new Uint8Array(this.analyserNode.frequencyBinCount)),this.analyserNode.getByteFrequencyData(this._dataArray);let e=0,t=Math.min(this._dataArray.length,50);for(let n=0;n<t;n++)e+=this._dataArray[n];let r=e/t/255;n=Math.max(.1,r**1.5*1.5)}else{let e=Date.now()/1e3,t=this._bars.length+e*.01,r=Math.sin(t*.1)*.2,i=Math.cos(t*.05)*.15,a=this._seededRandom(t)*.4;n=Math.max(.1,Math.min(.9,.3+r+i+a))}if(this._bars.push({x:t,height:n}),this._bars.length>this.barCount*2)break}let c=i.height/2;for(let e of this._bars)if(e.x<i.width&&e.x+this.barWidth>0){let t=Math.max(this.barHeight,e.height*i.height*.8),r=c-t/2;n.fillStyle=a,n.globalAlpha=.3+e.height*.7,this.barRadius>0?(n.beginPath(),n.roundRect(e.x,r,this.barWidth,t,this.barRadius),n.fill()):n.fillRect(e.x,r,this.barWidth,t)}n.globalAlpha=1,this.fadeEdges&&this.fadeWidth>0&&b(n,i.width,i.height,this.fadeWidth),this._animationFrameId=requestAnimationFrame(e)};this._animationFrameId=requestAnimationFrame(e)}};_([(0,n.property)({type:Number})],B.prototype,`speed`,void 0),_([(0,n.property)({type:Number})],B.prototype,`barCount`,void 0),_([(0,n.property)({type:Number})],B.prototype,`barWidth`,void 0),_([(0,n.property)({type:Number})],B.prototype,`barHeight`,void 0),_([(0,n.property)({type:Number})],B.prototype,`barGap`,void 0),_([(0,n.property)({type:Number})],B.prototype,`barRadius`,void 0),_([(0,n.property)({type:String})],B.prototype,`barColor`,void 0),_([(0,n.property)({type:Boolean})],B.prototype,`fadeEdges`,void 0),_([(0,n.property)({type:Number})],B.prototype,`fadeWidth`,void 0),_([(0,n.property)({type:Number})],B.prototype,`height`,void 0),_([(0,n.property)({type:Array})],B.prototype,`data`,void 0),_([(0,n.property)({attribute:!1})],B.prototype,`analyserNode`,void 0),_([(0,n.property)({type:Boolean})],B.prototype,`active`,void 0),_([(0,n.query)(`canvas`)],B.prototype,`_canvas`,void 0),_([(0,n.query)(`.container`)],B.prototype,`_container`,void 0),B=_([(0,n.customElement)(`ui-scrolling-waveform`)],B);var V=class extends t.LitElement{constructor(...e){super(...e),this.title=`Component`,this.description=``,this.mode=`preview`}static{this.styles=t.css`
     :host {
       display: block;
       background: var(--md-sys-color-surface, #ffffff);
@@ -941,7 +941,7 @@
           class="code-panel ${this.mode===`code`?`active`:``}"
         ><code><slot name="code"></slot></code></pre>
       </div>
-    `}};T([(0,n.property)({type:String})],Y.prototype,`title`,void 0),T([(0,n.property)({type:String})],Y.prototype,`description`,void 0),T([(0,n.property)({type:String})],Y.prototype,`mode`,void 0),Y=T([(0,n.customElement)(`ui-showcase-card`)],Y);var X=class extends t.LitElement{constructor(...e){super(...e),this.text=``,this.duration=2,this.delay=0,this.repeat=!0,this.repeatDelay=.5,this.startOnView=!0,this.once=!1,this.spread=2,this._isInView=!1}static{this.styles=t.css`
+    `}};_([(0,n.property)({type:String})],V.prototype,`title`,void 0),_([(0,n.property)({type:String})],V.prototype,`description`,void 0),_([(0,n.property)({type:String})],V.prototype,`mode`,void 0),V=_([(0,n.customElement)(`ui-showcase-card`)],V);var H=class extends t.LitElement{constructor(...e){super(...e),this.text=``,this.duration=2,this.delay=0,this.repeat=!0,this.repeatDelay=.5,this.startOnView=!0,this.once=!1,this.spread=2,this._isInView=!1}static{this.styles=t.css`
     :host {
       display: inline-block;
       font-family: inherit;
@@ -999,187 +999,7 @@
       <span class="${e?`active`:``}" style="${o}">
         ${this.text}
       </span>
-    `}};T([(0,n.property)({type:String})],X.prototype,`text`,void 0),T([(0,n.property)({type:Number})],X.prototype,`duration`,void 0),T([(0,n.property)({type:Number})],X.prototype,`delay`,void 0),T([(0,n.property)({type:Boolean})],X.prototype,`repeat`,void 0),T([(0,n.property)({type:Number})],X.prototype,`repeatDelay`,void 0),T([(0,n.property)({type:Boolean})],X.prototype,`startOnView`,void 0),T([(0,n.property)({type:Boolean})],X.prototype,`once`,void 0),T([(0,n.property)({type:Number})],X.prototype,`spread`,void 0),T([(0,n.property)({type:String})],X.prototype,`color`,void 0),T([(0,n.property)({type:String})],X.prototype,`shimmerColor`,void 0),T([(0,n.state)()],X.prototype,`_isInView`,void 0),X=T([(0,n.customElement)(`ui-shimmering-text`)],X);var Z=class extends t.LitElement{constructor(...e){super(...e),this.agentState=null,this.inputVolume=0,this.outputVolume=0,this.volumeMode=`auto`,this.seed=Math.floor(Math.random()*2**32),this._animationFrameId=0,this._animSpeed=.1,this._curIn=0,this._curOut=0,this._textureLoader=new g.TextureLoader,this._lastTime=0,this._vertexShader=`
-uniform float uTime;
-uniform sampler2D uPerlinTexture;
-varying vec2 vUv;
-
-void main() {
-  vUv = uv;
-  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-}
-`,this._fragmentShader=`
-uniform float uTime;
-uniform float uAnimation;
-uniform float uInverted;
-uniform float uOffsets[7];
-uniform vec3 uColor1;
-uniform vec3 uColor2;
-uniform float uInputVolume;
-uniform float uOutputVolume;
-uniform float uOpacity;
-uniform sampler2D uPerlinTexture;
-varying vec2 vUv;
-
-const float PI = 3.14159265358979323846;
-
-bool drawOval(vec2 polarUv, vec2 polarCenter, float a, float b, bool reverseGradient, float softness, out vec4 color) {
-    vec2 p = polarUv - polarCenter;
-    float oval = (p.x * p.x) / (a * a) + (p.y * p.y) / (b * b);
-    float edge = smoothstep(1.0, 1.0 - softness, oval);
-    if (edge > 0.0) {
-        float gradient = reverseGradient ? (1.0 - (p.x / a + 1.0) / 2.0) : ((p.x / a + 1.0) / 2.0);
-        gradient = mix(0.5, gradient, 0.1);
-        color = vec4(vec3(gradient), 0.85 * edge);
-        return true;
-    }
-    return false;
-}
-
-vec3 colorRamp(float grayscale, vec3 color1, vec3 color2, vec3 color3, vec3 color4) {
-    if (grayscale < 0.33) {
-        return mix(color1, color2, grayscale * 3.0);
-    } else if (grayscale < 0.66) {
-        return mix(color2, color3, (grayscale - 0.33) * 3.0);
-    } else {
-        return mix(color3, color4, (grayscale - 0.66) * 3.0);
-    }
-}
-
-vec2 hash2(vec2 p) {
-    return fract(sin(vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)))) * 43758.5453);
-}
-
-float noise2D(vec2 p) {
-    vec2 i = floor(p);
-    vec2 f = fract(p);
-    vec2 u = f * f * (3.0 - 2.0 * f);
-    float n = mix(
-        mix(dot(hash2(i + vec2(0.0, 0.0)), f - vec2(0.0, 0.0)),
-            dot(hash2(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0)), u.x),
-        mix(dot(hash2(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0)),
-            dot(hash2(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0)), u.x),
-        u.y
-    );
-    return 0.5 + 0.5 * n;
-}
-
-float sharpRing(vec3 decomposed, float time) {
-    float ringStart = 1.0;
-    float ringWidth = 0.3;
-    float noiseScale = 5.0;
-    float noise = mix(
-        noise2D(vec2(decomposed.x, time) * noiseScale),
-        noise2D(vec2(decomposed.y, time) * noiseScale),
-        decomposed.z
-    );
-    noise = (noise - 0.5) * 2.5;
-    return ringStart + noise * ringWidth * 1.5;
-}
-
-float smoothRing(vec3 decomposed, float time) {
-    float ringStart = 0.9;
-    float ringWidth = 0.2;
-    float noiseScale = 6.0;
-    float noise = mix(
-        noise2D(vec2(decomposed.x, time) * noiseScale),
-        noise2D(vec2(decomposed.y, time) * noiseScale),
-        decomposed.z
-    );
-    noise = (noise - 0.5) * 5.0;
-    return ringStart + noise * ringWidth;
-}
-
-float flow(vec3 decomposed, float time) {
-    return mix(
-        texture(uPerlinTexture, vec2(time, decomposed.x / 2.0)).r,
-        texture(uPerlinTexture, vec2(time, decomposed.y / 2.0)).r,
-        decomposed.z
-    );
-}
-
-void main() {
-    vec2 uv = vUv * 2.0 - 1.0;
-    float radius = length(uv);
-    float theta = atan(uv.y, uv.x);
-    if (theta < 0.0) theta += 2.0 * PI;
-
-    vec3 decomposed = vec3(
-        theta / (2.0 * PI),
-        mod(theta / (2.0 * PI) + 0.5, 1.0) + 1.0,
-        abs(theta / PI - 1.0)
-    );
-
-    float noise = flow(decomposed, radius * 0.03 - uAnimation * 0.2) - 0.5;
-    theta += noise * mix(0.08, 0.25, uOutputVolume);
-
-    vec4 color = vec4(1.0, 1.0, 1.0, 1.0);
-    float originalCenters[7] = float[7](0.0, 0.5 * PI, 1.0 * PI, 1.5 * PI, 2.0 * PI, 2.5 * PI, 3.0 * PI);
-    float centers[7];
-    for (int i = 0; i < 7; i++) {
-        centers[i] = originalCenters[i] + 0.5 * sin(uTime / 20.0 + uOffsets[i]);
-    }
-
-    float a, b;
-    vec4 ovalColor;
-
-    for (int i = 0; i < 7; i++) {
-        float noise = texture(uPerlinTexture, vec2(mod(centers[i] + uTime * 0.05, 1.0), 0.5)).r;
-        a = 0.5 + noise * 0.3;
-        b = noise * mix(3.5, 2.5, uInputVolume);
-        bool reverseGradient = (i % 2 == 1);
-        float distTheta = min(
-            abs(theta - centers[i]),
-            min(abs(theta + 2.0 * PI - centers[i]), abs(theta - 2.0 * PI - centers[i]))
-        );
-        if (drawOval(vec2(distTheta, radius), vec2(0.0, 0.0), a, b, reverseGradient, 0.6, ovalColor)) {
-            color.rgb = mix(color.rgb, ovalColor.rgb, ovalColor.a);
-            color.a = max(color.a, ovalColor.a);
-        }
-    }
-    
-    float ringRadius1 = sharpRing(decomposed, uTime * 0.1);
-    float ringRadius2 = smoothRing(decomposed, uTime * 0.1);
-    float inputRadius1 = radius + uInputVolume * 0.2;
-    float inputRadius2 = radius + uInputVolume * 0.15;
-    float opacity1 = mix(0.2, 0.6, uInputVolume);
-    float opacity2 = mix(0.15, 0.45, uInputVolume);
-
-    float ringAlpha1 = (inputRadius2 >= ringRadius1) ? opacity1 : 0.0;
-    float ringAlpha2 = smoothstep(ringRadius2 - 0.05, ringRadius2 + 0.05, inputRadius1) * opacity2;
-    float totalRingAlpha = max(ringAlpha1, ringAlpha2);
-    
-    vec3 ringColor = vec3(1.0);
-    color.rgb = 1.0 - (1.0 - color.rgb) * (1.0 - ringColor * totalRingAlpha);
-
-    vec3 color1 = vec3(0.0, 0.0, 0.0);
-    vec3 color2 = uColor1;
-    vec3 color3 = uColor2;
-    vec3 color4 = vec3(1.0, 1.0, 1.0);
-
-    float luminance = mix(color.r, 1.0 - color.r, uInverted);
-    color.rgb = colorRamp(luminance, color1, color2, color3, color4);
-    color.a *= uOpacity;
-
-    gl_FragColor = color;
-}
-`}static{this.styles=t.css`
-    :host {
-      display: block;
-      width: 100%;
-      height: 100%;
-      position: relative;
-    }
-    .container {
-      width: 100%;
-      height: 100%;
-    }
-    canvas {
-      display: block;
-      width: 100%;
-      height: 100%;
-    }
-  `}render(){return t.html`<div class="container"></div>`}firstUpdated(){this._initThree()}updated(e){e.has(`colors`)&&this._updateColors()}_updateColors(){if(!(!this._targetColor1||!this._targetColor2))if(this.colors&&this.colors.length===2)this._targetColor1.set(this.colors[0]),this._targetColor2.set(this.colors[1]);else{let e=getComputedStyle(this),t=e.getPropertyValue(`--md-sys-color-primary`).trim()||`#CADCFC`,n=e.getPropertyValue(`--md-sys-color-secondary`).trim()||`#A0B9D1`;this._targetColor1.set(t),this._targetColor2.set(n)}}disconnectedCallback(){super.disconnectedCallback(),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId),this._resizeObserver&&this._resizeObserver.disconnect(),this._renderer&&this._renderer.dispose(),this._mesh&&(this._mesh.geometry.dispose(),this._mesh.material.dispose())}async _initThree(){if(!this._container)return;this._targetColor1=new g.Color,this._targetColor2=new g.Color,this._updateColors();try{this._perlinNoiseTexture=await this._textureLoader.loadAsync(`https://storage.googleapis.com/eleven-public-cdn/images/perlin-noise.png`),this._perlinNoiseTexture.wrapS=g.RepeatWrapping,this._perlinNoiseTexture.wrapT=g.RepeatWrapping}catch(e){console.warn(`Failed to load perlin noise texture for orb.`,e);return}let e=this._container.clientWidth,t=this._container.clientHeight;this._scene=new g.Scene,this._camera=new g.OrthographicCamera(-5,5,5,-5,.1,10),this._camera.position.z=1,this._renderer=new g.WebGLRenderer({alpha:!0,antialias:!0,premultipliedAlpha:!0}),this._renderer.setSize(e,t),this._renderer.setPixelRatio(window.devicePixelRatio),this._container.appendChild(this._renderer.domElement);let n=this._splitmix32(this.seed),r=new Float32Array(Array.from({length:7},()=>n()*Math.PI*2)),i=document.documentElement.classList.contains(`dark`)||window.matchMedia(`(prefers-color-scheme: dark)`).matches,a={uColor1:new g.Uniform(this._targetColor1),uColor2:new g.Uniform(this._targetColor2),uOffsets:{value:r},uPerlinTexture:new g.Uniform(this._perlinNoiseTexture),uTime:new g.Uniform(0),uAnimation:new g.Uniform(.1),uInverted:new g.Uniform(i?1:0),uInputVolume:new g.Uniform(0),uOutputVolume:new g.Uniform(0),uOpacity:new g.Uniform(0)},o=new g.CircleGeometry(3.5,64),s=new g.ShaderMaterial({uniforms:a,vertexShader:this._vertexShader,fragmentShader:this._fragmentShader,transparent:!0});this._mesh=new g.Mesh(o,s),this._scene.add(this._mesh),this._resizeObserver=new ResizeObserver(()=>{this._container&&this._renderer&&this._renderer.setSize(this._container.clientWidth,this._container.clientHeight)}),this._resizeObserver.observe(this._container),new MutationObserver(()=>{if(!this._mesh)return;let e=document.documentElement.classList.contains(`dark`);this._mesh.material.uniforms.uInverted.value=e?1:0,this._updateColors()}).observe(document.documentElement,{attributes:!0,attributeFilter:[`class`]}),this._lastTime=performance.now(),this._animate()}_animate(){if(this._animationFrameId=requestAnimationFrame(()=>this._animate()),!this._mesh||!this._renderer||!this._scene||!this._camera)return;let e=performance.now(),t=(e-this._lastTime)/1e3;this._lastTime=e;let n=this._mesh.material.uniforms;n.uTime.value+=t*.5,n.uOpacity.value<1&&(n.uOpacity.value=Math.min(1,n.uOpacity.value+t*2));let r=0,i=.3;if(this.volumeMode===`manual`)r=this._clamp01(this.inputVolume),i=this._clamp01(this.outputVolume);else{let e=n.uTime.value*2;if(this.agentState===null)r=0,i=.3;else if(this.agentState===`listening`)r=this._clamp01(.55+Math.sin(e*3.2)*.35),i=.45;else if(this.agentState===`talking`)r=this._clamp01(.65+Math.sin(e*4.8)*.22),i=this._clamp01(.75+Math.sin(e*3.6)*.22);else{let t=.38+.07*Math.sin(e*.7),n=.05*Math.sin(e*2.1)*Math.sin(e*.37+1.2);r=this._clamp01(t+n),i=this._clamp01(.48+.12*Math.sin(e*1.05+.6))}}this._curIn+=(r-this._curIn)*.2,this._curOut+=(i-this._curOut)*.2;let a=.1+(1-(this._curOut-1)**2)*.9;this._animSpeed+=(a-this._animSpeed)*.12,n.uAnimation.value+=t*this._animSpeed,n.uInputVolume.value=this._curIn,n.uOutputVolume.value=this._curOut,n.uColor1.value.lerp(this._targetColor1,.08),n.uColor2.value.lerp(this._targetColor2,.08),this._renderer.render(this._scene,this._camera)}_splitmix32(e){return function(){e|=0,e=e+2654435769|0;let t=e^e>>>16;return t=Math.imul(t,569420461),t^=t>>>15,t=Math.imul(t,1935289751),((t^=t>>>15)>>>0)/4294967296}}_clamp01(e){return Number.isFinite(e)?Math.min(1,Math.max(0,e)):0}};T([(0,n.property)({type:Array})],Z.prototype,`colors`,void 0),T([(0,n.property)({type:String})],Z.prototype,`agentState`,void 0),T([(0,n.property)({type:Number})],Z.prototype,`inputVolume`,void 0),T([(0,n.property)({type:Number})],Z.prototype,`outputVolume`,void 0),T([(0,n.property)({type:String})],Z.prototype,`volumeMode`,void 0),T([(0,n.property)({type:Number})],Z.prototype,`seed`,void 0),T([(0,n.query)(`.container`)],Z.prototype,`_container`,void 0),Z=T([(0,n.customElement)(`ui-orb`)],Z);var Q=class extends t.LitElement{static{this.styles=t.css`
+    `}};_([(0,n.property)({type:String})],H.prototype,`text`,void 0),_([(0,n.property)({type:Number})],H.prototype,`duration`,void 0),_([(0,n.property)({type:Number})],H.prototype,`delay`,void 0),_([(0,n.property)({type:Boolean})],H.prototype,`repeat`,void 0),_([(0,n.property)({type:Number})],H.prototype,`repeatDelay`,void 0),_([(0,n.property)({type:Boolean})],H.prototype,`startOnView`,void 0),_([(0,n.property)({type:Boolean})],H.prototype,`once`,void 0),_([(0,n.property)({type:Number})],H.prototype,`spread`,void 0),_([(0,n.property)({type:String})],H.prototype,`color`,void 0),_([(0,n.property)({type:String})],H.prototype,`shimmerColor`,void 0),_([(0,n.state)()],H.prototype,`_isInView`,void 0),H=_([(0,n.customElement)(`ui-shimmering-text`)],H);var U=class extends t.LitElement{static{this.styles=t.css`
     :host {
       display: flex;
       align-items: center;
@@ -1214,4 +1034,4 @@ void main() {
         ?disabled="${!this.playerState?.src}"
         @input="${this._handleInput}"
       ></md-slider>
-    `}_handleInput(e){let t=e.target;this.playerState&&this.playerState.setVolume(t.value)}_toggleMute(){this.playerState&&this.playerState.toggleMute()}};T([z({context:B,subscribe:!0}),(0,n.property)({attribute:!1})],Q.prototype,`playerState`,void 0),Q=T([(0,n.customElement)(`ui-audio-volume-slider`)],Q),Object.defineProperty(e,`ScreamVoiceButton`,{enumerable:!0,get:function(){return E}}),Object.defineProperty(e,`UiAudioPlayButton`,{enumerable:!0,get:function(){return H}}),Object.defineProperty(e,`UiAudioPlayer`,{enumerable:!0,get:function(){return G}}),Object.defineProperty(e,`UiAudioProgressSlider`,{enumerable:!0,get:function(){return U}}),Object.defineProperty(e,`UiAudioProvider`,{enumerable:!0,get:function(){return V}}),Object.defineProperty(e,`UiAudioTimeDisplay`,{enumerable:!0,get:function(){return W}}),Object.defineProperty(e,`UiAudioVolumeSlider`,{enumerable:!0,get:function(){return Q}}),Object.defineProperty(e,`UiLiveWaveform`,{enumerable:!0,get:function(){return k}}),Object.defineProperty(e,`UiMicSelector`,{enumerable:!0,get:function(){return K}}),Object.defineProperty(e,`UiOrb`,{enumerable:!0,get:function(){return Z}}),Object.defineProperty(e,`UiScrollingWaveform`,{enumerable:!0,get:function(){return J}}),Object.defineProperty(e,`UiShimmeringText`,{enumerable:!0,get:function(){return X}}),Object.defineProperty(e,`UiShowcaseCard`,{enumerable:!0,get:function(){return Y}}),Object.defineProperty(e,`UiVoiceButton`,{enumerable:!0,get:function(){return A}}),Object.defineProperty(e,`UiVoicePicker`,{enumerable:!0,get:function(){return q}}),Object.defineProperty(e,`UiWaveform`,{enumerable:!0,get:function(){return j}}),e.audioPlayerContext=B});
+    `}_handleInput(e){let t=e.target;this.playerState&&this.playerState.setVolume(t.value)}_toggleMute(){this.playerState&&this.playerState.toggleMute()}};_([j({context:M,subscribe:!0}),(0,n.property)({attribute:!1})],U.prototype,`playerState`,void 0),U=_([(0,n.customElement)(`ui-audio-volume-slider`)],U),Object.defineProperty(e,`ScreamVoiceButton`,{enumerable:!0,get:function(){return v}}),Object.defineProperty(e,`UiAudioPlayButton`,{enumerable:!0,get:function(){return P}}),Object.defineProperty(e,`UiAudioPlayer`,{enumerable:!0,get:function(){return L}}),Object.defineProperty(e,`UiAudioProgressSlider`,{enumerable:!0,get:function(){return F}}),Object.defineProperty(e,`UiAudioProvider`,{enumerable:!0,get:function(){return N}}),Object.defineProperty(e,`UiAudioTimeDisplay`,{enumerable:!0,get:function(){return I}}),Object.defineProperty(e,`UiAudioVolumeSlider`,{enumerable:!0,get:function(){return U}}),Object.defineProperty(e,`UiLiveWaveform`,{enumerable:!0,get:function(){return x}}),Object.defineProperty(e,`UiMicSelector`,{enumerable:!0,get:function(){return R}}),Object.defineProperty(e,`UiScrollingWaveform`,{enumerable:!0,get:function(){return B}}),Object.defineProperty(e,`UiShimmeringText`,{enumerable:!0,get:function(){return H}}),Object.defineProperty(e,`UiShowcaseCard`,{enumerable:!0,get:function(){return V}}),Object.defineProperty(e,`UiVoiceButton`,{enumerable:!0,get:function(){return S}}),Object.defineProperty(e,`UiVoicePicker`,{enumerable:!0,get:function(){return z}}),Object.defineProperty(e,`UiWaveform`,{enumerable:!0,get:function(){return C}}),e.audioPlayerContext=M});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ghchinoy/lit-audio-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A pure Lit WebComponents port of modern audio UI components",
   "author": "G. Hussain Chinoy",
   "license": "Apache-2.0",
@@ -21,11 +21,11 @@
   },
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite demo",
     "build": "npm run build:lib && npm run build:demo",
     "build:lib": "tsc && vite build",
     "build:demo": "vite build -c vite.demo.config.ts",
-    "preview": "vite preview",
+    "preview": "vite preview dist-demo",
     "lint": "gts lint",
     "clean": "gts clean",
     "compile": "tsc",