@ghchinoy/lit-audio-ui 0.1.0

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

@@ -0,0 +1,2121 @@
+import { LitElement as e, css as t, html as n } from "lit";
+import { customElement as r, property as i, query as a, state as o } from "lit/decorators.js";
+import "@material/web/button/filled-button.js";
+import "@material/web/icon/icon.js";
+import { classMap as s } from "lit/directives/class-map.js";
+import "@material/web/button/outlined-button.js";
+import "@material/web/iconbutton/filled-icon-button.js";
+import "@material/web/progress/circular-progress.js";
+import "@material/web/slider/slider.js";
+import "@material/web/menu/menu.js";
+import "@material/web/menu/menu-item.js";
+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) {
+	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;
+}
+/**
+* Copyright 2026 Google LLC
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+var u = class extends e {
+	constructor(...e) {
+		super(...e), this.state = "idle";
+	}
+	static {
+		this.styles = t`
+    :host {
+      display: inline-block;
+    }
+
+    md-filled-button {
+      --md-filled-button-container-shape: 999px;
+    }
+
+    md-filled-button.recording {
+      --md-filled-button-container-color: var(--md-sys-color-error, #ba1a1a);
+      --md-filled-button-label-text-color: var(
+        --md-sys-color-on-error,
+        #ffffff
+      );
+    }
+  `;
+	}
+	render() {
+		return n`
+      <md-filled-button class="${this.state}" @click="${this._handleClick}">
+        <md-icon slot="icon">
+          ${this.state === "recording" ? "stop" : "mic"}
+        </md-icon>
+
+        ${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 }
+		}));
+	}
+};
+l([i({ type: String })], u.prototype, "state", void 0), u = l([r("scream-voice-button")], u);
+/**
+* Normalizes raw frequency data from the AnalyserNode into an array of values between 0.0 and 1.0.
+*
+* @param analyser The AnalyserNode to read from
+* @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) {
+	e.getByteFrequencyData(t);
+	let n = [];
+	for (let e = 0; e < t.length; e++) n.push(t[e] / 255);
+	return n;
+}
+/**
+* Creates an edge-fade gradient over a canvas to smoothly blend the left and right edges.
+*
+* @param ctx The canvas 2D rendering context
+* @param width The logical width of the canvas
+* @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) {
+	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";
+}
+/**
+* Copyright 2026 Google LLC
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+var p = 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 = [];
+	}
+	static {
+		this.styles = t`
+    :host {
+      display: block;
+      width: 100%;
+    }
+    .container {
+      position: relative;
+      width: 100%;
+    }
+    canvas {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: block;
+      height: 100%;
+      width: 100%;
+    }
+  `;
+	}
+	render() {
+		return n`
+      <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 && f(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);
+/**
+* Copyright 2026 Google LLC
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+var m = class extends e {
+	constructor(...e) {
+		super(...e), this.state = "idle", this.disabled = !1, this._showFeedback = !1;
+	}
+	static {
+		this.styles = t`
+    :host {
+      display: inline-block;
+      --ui-waveform-height: 24px;
+      --ui-waveform-width: 96px;
+    }
+
+    .wrapper {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    md-filled-button,
+    md-outlined-button {
+      transition: all 0.2s ease-in-out;
+    }
+
+    /* Customize the button depending on the state */
+    md-filled-button.recording {
+      --md-filled-button-container-color: var(
+        --md-sys-color-error-container,
+        #ffdad6
+      );
+      --md-filled-button-label-text-color: var(
+        --md-sys-color-on-error-container,
+        #410002
+      );
+    }
+
+    md-filled-button.processing {
+      --md-filled-button-container-color: var(
+        --md-sys-color-secondary-container,
+        #cce5ff
+      );
+      --md-filled-button-label-text-color: var(
+        --md-sys-color-on-secondary-container,
+        #001d36
+      );
+    }
+
+    md-filled-button.success {
+      --md-filled-button-container-color: var(
+        --md-sys-color-primary-container,
+        #d1e4ff
+      );
+      --md-filled-button-label-text-color: var(
+        --md-sys-color-on-primary-container,
+        #001d36
+      );
+    }
+
+    .waveform-slot {
+      position: relative;
+      width: var(--ui-waveform-width);
+      height: var(--ui-waveform-height);
+      border-radius: 4px;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--md-sys-color-surface-container-highest, #e3e3e3);
+      border: 1px solid var(--md-sys-color-outline-variant, #c4c7c5);
+      transition: background-color 0.3s ease;
+    }
+
+    .waveform-slot.recording {
+      background: var(--md-sys-color-error-container, #ffdad6);
+      border-color: transparent;
+    }
+
+    .waveform-slot.processing {
+      background: var(--md-sys-color-secondary-container, #cce5ff);
+      border-color: transparent;
+    }
+
+    .trailing-text {
+      font-family: monospace;
+      font-size: 11px;
+      color: var(--md-sys-color-on-surface-variant, #444);
+      font-weight: 500;
+      user-select: none;
+    }
+
+    .feedback-overlay {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--md-sys-color-surface, #fff);
+      animation: fadeIn 0.3s ease forwards;
+    }
+
+    .feedback-icon {
+      font-size: 16px;
+    }
+    .feedback-icon.success {
+      color: var(--md-sys-color-primary, #0066cc);
+    }
+    .feedback-icon.error {
+      color: var(--md-sys-color-error, #ba1a1a);
+    }
+
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 0.9;
+      }
+    }
+  `;
+	}
+	updated(e) {
+		super.updated(e), e.has("state") && (this.state === "success" || this.state === "error" ? (this._showFeedback = !0, this._feedbackTimeout && clearTimeout(this._feedbackTimeout), this._feedbackTimeout = setTimeout(() => {
+			this._showFeedback = !1, (this.state === "success" || this.state === "error") && (this.state = "idle");
+		}, 1500)) : this._showFeedback = !1);
+	}
+	render() {
+		let e = this.state === "recording", t = this.state === "processing", r = this.state === "success", i = this.state === "error", a = this.disabled || t, o = e || t, c = !o && !this._showFeedback && this.trailing, l = {
+			recording: e,
+			processing: t,
+			success: r && this._showFeedback,
+			error: i && this._showFeedback
+		}, u = {
+			"waveform-slot": !0,
+			recording: e,
+			processing: t
+		};
+		return n`
+      <md-filled-button
+        class=${s(l)}
+        ?disabled=${a}
+        @click=${this._handleClick}
+      >
+        <div class="wrapper">
+          ${this.label ? n`<span>${this.label}</span>` : ""}
+
+          <div class=${s(u)}>
+            ${o ? n`
+                  <ui-live-waveform
+                    .active=${e}
+                    .processing=${t}
+                    .analyserNode=${this.analyserNode}
+                    .barWidth=${2}
+                    .barGap=${1}
+                    .barRadius=${4}
+                    .fadeEdges=${!1}
+                    .sensitivity=${1.8}
+                    height="20"
+                    style="position: absolute; inset: 0;"
+                  ></ui-live-waveform>
+                ` : ""}
+            ${c ? n` <span class="trailing-text">${this.trailing}</span> ` : ""}
+            ${this._showFeedback && r ? n`
+                  <div class="feedback-overlay">
+                    <md-icon class="feedback-icon success">check</md-icon>
+                  </div>
+                ` : ""}
+            ${this._showFeedback && i ? n`
+                  <div class="feedback-overlay">
+                    <md-icon class="feedback-icon error">close</md-icon>
+                  </div>
+                ` : ""}
+          </div>
+        </div>
+      </md-filled-button>
+    `;
+	}
+	_handleClick(e) {
+		this.dispatchEvent(new CustomEvent("voice-button-click", {
+			bubbles: !0,
+			composed: !0,
+			detail: { state: this.state }
+		}));
+	}
+};
+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);
+/**
+* Copyright 2026 Google LLC
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+var h = 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;
+	}
+	static {
+		this.styles = t`
+    :host {
+      display: block;
+      width: 100%;
+    }
+    .container {
+      position: relative;
+      width: 100%;
+    }
+    canvas {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: block;
+      height: 100%;
+      width: 100%;
+    }
+  `;
+	}
+	render() {
+		return n`
+      <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 && f(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);
+/**
+* @license
+* Copyright 2021 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+var g = 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;
+	}
+};
+/**
+* @license
+* Copyright 2021 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+function _(e) {
+	return e;
+}
+/**
+* @license
+* Copyright 2021 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/ var v = 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 g(this.context, this.host, this.t, this.subscribe));
+	}
+}, y = 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 = /* @__PURE__ */ 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();
+	}
+}, b = class extends Event {
+	constructor(e, t) {
+		super("context-provider", {
+			bubbles: !0,
+			composed: !0
+		}), this.context = e, this.contextTarget = t;
+	}
+}, x = class extends y {
+	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 = /* @__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)));
+			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 b(this.context, this.host));
+	}
+};
+/**
+* @license
+* Copyright 2017 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/ function S({ context: e }) {
+	return (t, n) => {
+		let r = /* @__PURE__ */ 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 x(this, {
+					context: e,
+					initialValue: t
+				})), t;
+			}
+		};
+		{
+			t.constructor.addInitializer(((t) => {
+				r.set(t, new x(t, { context: e }));
+			}));
+			let i = Object.getOwnPropertyDescriptor(t, n), a;
+			if (i === void 0) {
+				let e = /* @__PURE__ */ 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;
+		}
+	};
+}
+/**
+* @license
+* Copyright 2022 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/ function C({ context: e, subscribe: t }) {
+	return (n, r) => {
+		typeof r == "object" ? r.addInitializer((function() {
+			new v(this, {
+				context: e,
+				callback: (e) => {
+					n.set.call(this, e);
+				},
+				subscribe: t
+			});
+		})) : n.constructor.addInitializer(((n) => {
+			new v(n, {
+				context: e,
+				callback: (e) => {
+					n[r] = e;
+				},
+				subscribe: t
+			});
+		}));
+	};
+}
+/**
+* A unique token to identify our context.
+* 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 {
+	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`
+    :host {
+      display: contents; /* We are completely invisible, just wrapping children */
+    }
+    audio {
+      display: none;
+    }
+  `;
+	}
+	render() {
+		return n`
+      <audio
+        crossorigin="anonymous"
+        src="${this.src}"
+        preload="metadata"
+        @loadedmetadata="${this._handleLoadedMetadata}"
+        @ended="${this._handleEnded}"
+        @playing="${this._handlePlaying}"
+        @pause="${this._handlePause}"
+        @waiting="${() => this._updateState({ isBuffering: !0 })}"
+        @canplay="${() => this._updateState({ isBuffering: !1 })}"
+        @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);
+	}
+};
+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 {
+	static {
+		this.styles = t`
+    :host {
+      display: inline-flex;
+      position: relative;
+      align-items: center;
+      justify-content: center;
+      font-family: inherit;
+    }
+
+    md-filled-icon-button {
+      --md-filled-icon-button-container-color: var(
+        --md-sys-color-primary,
+        #0066cc
+      );
+      --md-filled-icon-button-icon-color: var(
+        --md-sys-color-on-primary,
+        #ffffff
+      );
+      --md-filled-icon-button-hover-icon-color: var(
+        --md-sys-color-on-primary,
+        #ffffff
+      );
+      --md-filled-icon-button-focus-icon-color: var(
+        --md-sys-color-on-primary,
+        #ffffff
+      );
+      --md-filled-icon-button-pressed-icon-color: var(
+        --md-sys-color-on-primary,
+        #ffffff
+      );
+
+      --md-filled-icon-button-toggle-icon-color: var(
+        --md-sys-color-on-primary,
+        #ffffff
+      );
+      --md-filled-icon-button-selected-container-color: var(
+        --md-sys-color-primary,
+        #0066cc
+      );
+      --md-filled-icon-button-selected-icon-color: var(
+        --md-sys-color-on-primary,
+        #ffffff
+      );
+      color: var(--md-sys-color-on-primary, #ffffff);
+    }
+
+    md-circular-progress {
+      position: absolute;
+      --md-circular-progress-size: 48px;
+    }
+  `;
+	}
+	render() {
+		let e = this.playerState?.isPlaying ?? !1, t = this.playerState?.isBuffering ?? !1;
+		return n`
+      <md-filled-icon-button
+        part="button"
+        @click="${this._handleClick}"
+        ?disabled="${!this.playerState?.src}"
+      >
+        <md-icon>${e ? "pause" : "play_arrow"}</md-icon>
+      </md-filled-icon-button>
+      ${t && e ? n`<md-circular-progress indeterminate></md-circular-progress>` : ""}
+    `;
+	}
+	_handleClick() {
+		this.playerState && this.playerState.togglePlay();
+	}
+};
+l([C({
+	context: w,
+	subscribe: !0
+}), i({ attribute: !1 })], E.prototype, "playerState", void 0), E = l([r("ui-audio-play-button")], E);
+var D = class extends e {
+	constructor(...e) {
+		super(...e), this._isDragging = !1, this._dragValue = 0;
+	}
+	static {
+		this.styles = t`
+    :host {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      min-width: 100px;
+    }
+
+    md-slider {
+      width: 100%;
+      /* Give the slider track better contrast against backgrounds */
+      --md-slider-inactive-track-color: var(--md-sys-color-outline, #79747e);
+    }
+  `;
+	}
+	render() {
+		let e = this.playerState?.duration || 0, t = e === 0 || !this.playerState?.src, r = this._isDragging ? this._dragValue : this.playerState?.currentTime || 0;
+		return n`
+      <md-slider
+        min="0"
+        max="${e || 100}"
+        value="${r}"
+        step="0.1"
+        ?disabled="${t}"
+        @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;
+	}
+};
+l([C({
+	context: w,
+	subscribe: !0
+}), i({ attribute: !1 })], D.prototype, "playerState", void 0), D = l([r("ui-audio-progress-slider")], D);
+var O = class extends e {
+	constructor(...e) {
+		super(...e), this.format = "full";
+	}
+	static {
+		this.styles = t`
+    :host {
+      display: inline-block;
+      font-variant-numeric: tabular-nums;
+      font-size: 14px;
+      color: var(--md-sys-color-on-surface-variant, #444);
+      font-family: inherit;
+    }
+  `;
+	}
+	render() {
+		let e = this.playerState?.currentTime || 0, t = this.playerState?.duration || 0;
+		if (this.format === "elapsed") return n`${this._formatTime(e)}`;
+		if (this.format === "remaining") {
+			let r = Math.max(0, t - e);
+			return n`-${this._formatTime(r)}`;
+		} else return n`${this._formatTime(e)} /
+      ${t ? this._formatTime(t) : "--:--"}`;
+	}
+	_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;
+	}
+};
+l([C({
+	context: w,
+	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 {
+	static {
+		this.styles = t`
+    :host {
+      display: inline-block;
+      width: 100%;
+      max-width: 400px;
+    }
+
+    .player-pill {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding: 12px 24px;
+      background: var(--md-sys-color-surface-container-high, #e2e2e2);
+      border-radius: 999px; /* Pill shape */
+      width: fit-content;
+      font-family: inherit;
+    }
+
+    .time-container {
+      min-width: 85px; /* prevent jitter when times change */
+    }
+
+    .slider-container {
+      width: 200px;
+      display: flex;
+      align-items: center;
+    }
+  `;
+	}
+	render() {
+		return n`
+      <ui-audio-provider .src="${this.item?.src || ""}">
+        <div class="player-pill" part="container">
+          <!-- Atomic Play/Pause Button -->
+          <ui-audio-play-button></ui-audio-play-button>
+
+          <!-- Atomic Time Display (Full format: 0:00 / 0:00) -->
+          <div class="time-container">
+            <ui-audio-time-display format="full"></ui-audio-time-display>
+          </div>
+
+          <!-- Atomic Slider -->
+          <div class="slider-container">
+            <ui-audio-progress-slider></ui-audio-progress-slider>
+          </div>
+        </div>
+      </ui-audio-provider>
+    `;
+	}
+};
+l([i({ type: Object })], k.prototype, "item", void 0), k = l([r("ui-audio-player")], k);
+/**
+* Copyright 2026 Google LLC
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+var A = 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();
+		};
+	}
+	static {
+		this.styles = t`
+    :host {
+      display: inline-block;
+      position: relative;
+      font-family: inherit;
+    }
+
+    .anchor-button {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 16px;
+      background: var(--md-sys-color-surface-container-high, #e2e2e2);
+      color: var(--md-sys-color-on-surface, #1e1e1e);
+      border-radius: 999px;
+      cursor: pointer;
+      border: none;
+      font-family: inherit;
+      font-size: 14px;
+      font-weight: 500;
+      transition: background-color 0.2s;
+      max-width: 250px;
+    }
+
+    .anchor-button:hover:not(:disabled) {
+      background: var(--md-sys-color-surface-container-highest, #e3e3e3);
+    }
+
+    .anchor-button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .label-text {
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      text-align: left;
+    }
+
+    md-menu {
+      --md-menu-container-color: var(
+        --md-sys-color-surface-container,
+        var(--md-sys-color-surface, #ffffff)
+      );
+      --md-menu-container-shape: 12px;
+      min-width: 280px;
+    }
+
+    .menu-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 8px 12px;
+      gap: 12px;
+    }
+
+    .preview-waveform {
+      flex: 1;
+      height: 24px;
+      background: var(
+        --md-sys-color-surface-variant,
+        var(--md-sys-color-surface-container-highest, #e1e2e1)
+      );
+      border-radius: 6px;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      padding: 0 4px;
+    }
+  `;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._loadDevicesWithoutPermission(), navigator.mediaDevices.addEventListener("devicechange", this._handleDeviceChange);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), navigator.mediaDevices.removeEventListener("devicechange", this._handleDeviceChange), this._stopPreview();
+	}
+	updated(e) {
+		super.updated(e), e.has("_isMenuOpen") && this._isMenuOpen && (!this._hasPermission && !this._loading ? this._loadDevicesWithPermission() : this._hasPermission && !this.muted && this._startPreview()), (e.has("_isMenuOpen") && !this._isMenuOpen || e.has("muted") && this.muted) && this._stopPreview(), e.has("muted") && !this.muted && this._isMenuOpen && this._hasPermission && this._startPreview();
+	}
+	render() {
+		let e = this._devices.find((e) => e.deviceId === this.value) || this._devices[0] || { label: this._loading ? "Loading..." : "No microphone" };
+		return n`
+      <!-- Anchor Button -->
+      <button
+        id="anchor-button"
+        class="anchor-button"
+        ?disabled=${this._loading || this.disabled}
+        @click=${this._toggleMenu}
+      >
+        <md-icon>${this.muted ? "mic_off" : "mic"}</md-icon>
+        <span class="label-text">${e.label}</span>
+        <md-icon style="font-size: 18px;">unfold_more</md-icon>
+      </button>
+
+      <!-- Dropdown Menu -->
+      <md-menu
+        id="device-menu"
+        anchor="anchor-button"
+        positioning="popover"
+        @closed=${() => this._isMenuOpen = !1}
+        @opened=${() => this._isMenuOpen = !0}
+      >
+        ${this._loading ? n`<md-menu-item disabled
+              ><div slot="headline">Loading devices...</div></md-menu-item
+            >` : this._error ? n`<md-menu-item disabled
+                ><div slot="headline" style="color: var(--md-sys-color-error)">
+                  ${this._error}
+                </div></md-menu-item
+              >` : this._devices.map((e) => n`
+                  <md-menu-item
+                    @click=${() => this._selectDevice(e.deviceId)}
+                    ?selected=${this.value === e.deviceId || !this.value && this._devices[0]?.deviceId === e.deviceId}
+                  >
+                    <div slot="headline">${e.label}</div>
+                    ${this.value === e.deviceId || !this.value && this._devices[0]?.deviceId === e.deviceId ? n`<md-icon slot="end">check</md-icon>` : ""}
+                  </md-menu-item>
+                `)}
+        ${this._devices.length > 0 ? n`
+              <md-divider></md-divider>
+              <div class="menu-footer">
+                <md-text-button @click=${this._toggleMute}>
+                  <md-icon slot="icon"
+                    >${this.muted ? "mic_off" : "mic"}</md-icon
+                  >
+                  ${this.muted ? "Unmute" : "Mute"}
+                </md-text-button>
+
+                <div class="preview-waveform">
+                  <ui-live-waveform
+                    .active=${this._isMenuOpen && !this.muted && this._hasPermission}
+                    .processing=${!1}
+                    .analyserNode=${this._previewAnalyser}
+                    .barWidth=${3}
+                    .barGap=${1}
+                    .fadeEdges=${!1}
+                    height="16"
+                  ></ui-live-waveform>
+                </div>
+              </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;
+	}
+};
+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);
+/**
+* Copyright 2026 Google LLC
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+var j = 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 = "";
+	}
+	static {
+		this.styles = t`
+    :host {
+      display: inline-block;
+      width: 100%;
+      font-family: inherit;
+    }
+
+    .anchor-button {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      padding: 8px 16px;
+      background: transparent;
+      border: 1px solid var(--md-sys-color-outline, #79747e);
+      border-radius: 8px;
+      color: var(--md-sys-color-on-surface, #1e1e1e);
+      cursor: pointer;
+      font-family: inherit;
+      font-size: 14px;
+      min-height: 48px;
+      transition:
+        background-color 0.2s,
+        border-color 0.2s;
+    }
+
+    .anchor-button:hover {
+      background: var(--md-sys-color-surface-container-highest, #e3e3e3);
+    }
+
+    .anchor-button:focus-visible {
+      outline: none;
+      border-color: var(--md-sys-color-primary, #0066cc);
+      box-shadow: 0 0 0 1px var(--md-sys-color-primary, #0066cc);
+    }
+
+    .trigger-content {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      min-width: 100%;
+      padding: 4px 0;
+    }
+
+    .trigger-left {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      overflow: hidden;
+    }
+
+    .trigger-icon {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      background: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    .trigger-text {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: var(--md-sys-color-on-surface);
+    }
+
+    md-menu {
+      --md-menu-container-shape: 12px;
+      --md-menu-container-color: var(--md-sys-color-surface-container, #f3f3f3);
+      max-width: 400px;
+    }
+
+    .search-container {
+      padding: 8px 12px;
+      background: var(--md-sys-color-surface-container, #f3f3f3);
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    }
+
+    md-outlined-text-field {
+      width: 100%;
+      --md-outlined-text-field-container-shape: 8px;
+    }
+
+    md-menu-item {
+      --md-menu-item-hover-state-layer-color: var(
+        --md-sys-color-on-surface-variant
+      );
+      --md-menu-item-focus-state-layer-color: var(
+        --md-sys-color-on-surface-variant
+      );
+    }
+
+    .voice-item-content {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      width: 100%;
+      padding: 8px 0;
+    }
+
+    .voice-avatar {
+      position: relative;
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      background: var(--md-sys-color-surface-variant);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      cursor: pointer;
+      overflow: hidden;
+      color: var(--md-sys-color-on-surface-variant);
+      z-index: 2; /* Keep above the menu item ripple */
+    }
+
+    .voice-avatar:hover .play-overlay {
+      opacity: 1;
+    }
+
+    .play-overlay {
+      position: absolute;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.4);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      opacity: 0;
+      transition: opacity 0.2s;
+      border-radius: 50%;
+    }
+
+    .play-overlay.active {
+      opacity: 1;
+      background: rgba(0, 0, 0, 0.6);
+    }
+
+    .voice-info {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      flex: 1;
+      overflow: hidden;
+    }
+
+    .voice-name {
+      font-weight: 500;
+      font-size: 14px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: var(--md-sys-color-on-surface);
+    }
+
+    .voice-labels {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 12px;
+      color: var(--md-sys-color-on-surface-variant);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .label-dot {
+      font-size: 8px;
+    }
+
+    .empty-state {
+      padding: 24px;
+      text-align: center;
+      color: var(--md-sys-color-on-surface-variant);
+      font-size: 14px;
+    }
+  `;
+	}
+	render() {
+		let e = this.voices.find((e) => e[this.idKey] === this.value), t = this.voices.filter((e) => {
+			if (!this._searchQuery) return !0;
+			let t = this._searchQuery.toLowerCase();
+			return e[this.titleKey].toLowerCase().includes(t) || e.labels?.accent?.toLowerCase().includes(t) || e.labels?.gender?.toLowerCase().includes(t) || e.labels?.age?.toLowerCase().includes(t);
+		});
+		return n`
+      <!-- Hidden audio player for previews -->
+      <audio
+        crossorigin="anonymous"
+        @ended=${() => this._previewingVoiceId = void 0}
+        @pause=${() => this._previewingVoiceId = void 0}
+      ></audio>
+
+      <!-- Anchor Button -->
+      <button
+        class="anchor-button"
+        part="button"
+        id="voice-anchor"
+        @click=${this._toggleMenu}
+      >
+        <div class="trigger-content">
+          <div class="trigger-left">
+            ${e ? n`
+                  <div
+                    class="trigger-icon"
+                    style="${this.useOrbs ? "overflow: hidden;" : ""}"
+                  >
+                    ${this.useOrbs ? n`<ui-orb
+                          agentState="listening"
+                          .colors="${e[this.colorKey] || ["#CADCFC", "#A0B9D1"]}"
+                        ></ui-orb>` : n`<md-icon style="font-size: 16px;"
+                          >record_voice_over</md-icon
+                        >`}
+                  </div>
+                  <span class="trigger-text"
+                    >${e[this.titleKey] || e.name}</span
+                  >
+                ` : n`
+                  <span
+                    class="trigger-text"
+                    style="color: var(--md-sys-color-on-surface-variant)"
+                    >${this.placeholder}</span
+                  >
+                `}
+          </div>
+          <md-icon style="color: var(--md-sys-color-on-surface-variant);"
+            >unfold_more</md-icon
+          >
+        </div>
+      </button>
+
+      <!-- Dropdown Menu -->
+      <md-menu
+        id="voice-menu"
+        anchor="voice-anchor"
+        positioning="popover"
+        @closed=${this._handleMenuClosed}
+      >
+        <!-- The click.stop modifier stops the menu from closing when searching -->
+        <div
+          class="search-container"
+          @click=${(e) => e.stopPropagation()}
+        >
+          <md-outlined-text-field
+            placeholder="Search voices..."
+            .value=${this._searchQuery}
+            @input=${(e) => this._searchQuery = e.target.value}
+          >
+            <md-icon slot="leading-icon">search</md-icon>
+          </md-outlined-text-field>
+        </div>
+
+        ${t.length === 0 ? n` <div class="empty-state">No voice found.</div> ` : t.map((e) => n`
+                <md-menu-item
+                  @click=${() => this._selectVoice(e[this.idKey])}
+                  ?selected=${this.value === e[this.idKey]}
+                >
+                  <div slot="headline" class="voice-item-content">
+                    <!-- Avatar / Preview Button -->
+                    <div
+                      class="voice-avatar"
+                      @click=${(t) => this._togglePreview(t, e)}
+                    >
+                      ${this.useOrbs ? n`<ui-orb
+                            agentState="${this._previewingVoiceId === e[this.idKey] ? "talking" : "listening"}"
+                            .colors="${e[this.colorKey] || ["#CADCFC", "#A0B9D1"]}"
+                          ></ui-orb>` : n`<md-icon style="font-size: 18px;"
+                            >face</md-icon
+                          >`}
+                      ${e[this.previewUrlKey] ? n`
+                            <div
+                              class="play-overlay ${this._previewingVoiceId === e[this.idKey] ? "active" : ""}"
+                            >
+                              <md-icon style="font-size: 16px;">
+                                ${this._previewingVoiceId === e[this.idKey] ? "pause" : "play_arrow"}
+                              </md-icon>
+                            </div>
+                          ` : ""}
+                    </div>
+
+                    <!-- Voice Info -->
+                    <div class="voice-info">
+                      <span class="voice-name">${e[this.titleKey]}</span>
+                      ${e[this.subtitleKey] || e.labels ? n`
+                            <div class="voice-labels">
+                              ${e[this.subtitleKey] ? n`<span class="voice-badge"
+                                    >${e[this.subtitleKey]}</span
+                                  >` : Object.values(e.labels || {}).filter(Boolean).map((e) => n`<span class="voice-badge"
+                                          >${e}</span
+                                        >`)}
+                            </div>
+                          ` : ""}
+                    </div>
+                  </div>
+
+                  ${this.value === e[this.idKey] ? n`<md-icon slot="end">check</md-icon>` : ""}
+                </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;
+	}
+};
+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 {
+	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`
+    :host {
+      display: block;
+      width: 100%;
+    }
+    .container {
+      position: relative;
+      width: 100%;
+      overflow: hidden;
+    }
+    canvas {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: block;
+      height: 100%;
+      width: 100%;
+    }
+  `;
+	}
+	render() {
+		return n`
+      <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 && f(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 {
+	constructor(...e) {
+		super(...e), this.title = "Component", this.description = "", this.mode = "preview";
+	}
+	static {
+		this.styles = t`
+    :host {
+      display: block;
+      background: var(--md-sys-color-surface, #ffffff);
+      color: var(--md-sys-color-on-surface, #1e1e1e);
+      border-radius: 12px;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      transition:
+        background-color 0.3s,
+        color 0.3s;
+      overflow: hidden;
+      font-family: inherit;
+      border: 1px solid var(--md-sys-color-outline-variant, #c4c7c5);
+    }
+
+    .header {
+      padding: 1.5rem 2rem 1rem 2rem;
+    }
+
+    .title {
+      margin-top: 0;
+      margin-bottom: 0.5rem;
+      font-size: 1.4rem;
+      font-weight: 600;
+    }
+
+    .description {
+      margin: 0;
+      font-size: 0.95rem;
+      color: var(--md-sys-color-on-surface-variant, #444444);
+      line-height: 1.5;
+    }
+
+    .tabs {
+      display: flex;
+      gap: 8px;
+      padding: 0 2rem;
+      border-bottom: 1px solid var(--md-sys-color-outline-variant, #c4c7c5);
+    }
+
+    .tab-btn {
+      padding: 8px 16px;
+      background: transparent;
+      border: none;
+      border-bottom: 2px solid transparent;
+      color: var(--md-sys-color-on-surface-variant, #444444);
+      font-family: inherit;
+      font-weight: 600;
+      font-size: 0.9rem;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+
+    .tab-btn:hover {
+      color: var(--md-sys-color-primary, #0066cc);
+      background: var(--md-sys-color-surface-container-highest, #e3e3e3);
+    }
+
+    .tab-btn.active {
+      color: var(--md-sys-color-primary, #0066cc);
+      border-bottom-color: var(--md-sys-color-primary, #0066cc);
+    }
+
+    .content-area {
+      padding: 2rem;
+      position: relative;
+      background: var(--md-sys-color-surface, #ffffff);
+    }
+
+    .preview-panel {
+      display: none;
+    }
+
+    .preview-panel.active {
+      display: block;
+    }
+
+    .code-panel {
+      display: none;
+      background: #1e1e1e; /* Standard terminal color */
+      color: #e3e3e3;
+      padding: 1.5rem;
+      border-radius: 8px;
+      overflow-x: auto;
+      font-family: 'Courier New', Courier, monospace;
+      font-size: 0.85rem;
+      line-height: 1.5;
+      margin: 0;
+    }
+
+    .code-panel.active {
+      display: block;
+    }
+  `;
+	}
+	render() {
+		return n`
+      <div class="header">
+        <h2 class="title">${this.title}</h2>
+        ${this.description ? n`<p class="description">${this.description}</p>` : ""}
+      </div>
+
+      <div class="tabs">
+        <button
+          class="tab-btn ${this.mode === "preview" ? "active" : ""}"
+          @click="${() => this.mode = "preview"}"
+        >
+          Preview
+        </button>
+        <button
+          class="tab-btn ${this.mode === "code" ? "active" : ""}"
+          @click="${() => this.mode = "code"}"
+        >
+          Code
+        </button>
+      </div>
+
+      <div class="content-area">
+        <div class="preview-panel ${this.mode === "preview" ? "active" : ""}">
+          <slot></slot>
+        </div>
+
+        <pre
+          class="code-panel ${this.mode === "code" ? "active" : ""}"
+        ><code><slot name="code"></slot></code></pre>
+      </div>
+    `;
+	}
+};
+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 {
+	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`
+    :host {
+      display: inline-block;
+      font-family: inherit;
+    }
+
+    span {
+      position: relative;
+      display: inline-block;
+
+      /* Default colors fallback to MD3 tokens if available */
+      /* Use a highly transparent base color for maximum contrast against the shimmer */
+      --base-color: color-mix(
+        in srgb,
+        var(--md-sys-color-on-surface, #1e1e1e) 20%,
+        transparent
+      );
+      --shimmer-color: var(--md-sys-color-on-surface, #1e1e1e);
+
+      --shimmer-bg: linear-gradient(
+        90deg,
+        transparent calc(50% - var(--spread)),
+        var(--shimmer-color) 50%,
+        transparent calc(50% + var(--spread))
+      );
+
+      background-image:
+        var(--shimmer-bg), linear-gradient(var(--base-color), var(--base-color));
+      background-size:
+        250% 100%,
+        auto; /* Important: this defines the size of the animated gradient */
+      background-position: 100% center;
+      background-repeat: no-repeat;
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+      -webkit-text-fill-color: transparent;
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+
+    /* When active, trigger the keyframe animation */
+    span.active {
+      opacity: 1;
+    }
+
+    @keyframes shimmer {
+      0% {
+        background-position: 100% center;
+      }
+      100% {
+        background-position: 0% center;
+      }
+    }
+  `;
+	}
+	firstUpdated() {
+		this.startOnView ? (this._intersectionObserver = new IntersectionObserver((e) => {
+			e.forEach((e) => {
+				e.isIntersecting ? (this._isInView = !0, this.once && this._intersectionObserver && this._intersectionObserver.disconnect()) : this.once || (this._isInView = !1);
+			});
+		}), this._intersectionObserver.observe(this)) : this._isInView = !0;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._intersectionObserver && this._intersectionObserver.disconnect();
+	}
+	render() {
+		let e = !this.startOnView || this._isInView, t = `${this.text.length * this.spread}px`, r = this.duration + this.repeatDelay, i = this.repeat ? "infinite" : "1", a = {
+			"--spread": t,
+			...this.color && { "--base-color": this.color },
+			...this.shimmerColor && { "--shimmer-color": this.shimmerColor },
+			"animation-name": e ? "shimmer" : "none",
+			"animation-duration": `${r}s`,
+			"animation-timing-function": "linear",
+			"animation-delay": `${this.delay}s`,
+			"animation-iteration-count": i,
+			"background-position": e && !this.repeat ? "0% center" : "100% center"
+		}, o = Object.entries(a).map(([e, t]) => `${e}: ${t}`).join("; ");
+		return n`
+      <span class="${e ? "active" : ""}" style="${o}">
+        ${this.text}
+      </span>
+    `;
+	}
+};
+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 {
+	static {
+		this.styles = t`
+    :host {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    md-slider {
+      flex: 1;
+      min-width: 0; /* Prevent flex overflow */
+      width: 100%;
+      --md-slider-inactive-track-color: var(
+        --md-sys-color-outline-variant,
+        #c4c7c5
+      );
+    }
+
+    md-icon-button {
+      color: var(--md-sys-color-on-surface-variant, #444);
+    }
+  `;
+	}
+	render() {
+		let e = this.playerState?.volume ?? 1, t = this.playerState?.muted ?? !1, r = "volume_up";
+		return t || e === 0 ? r = "volume_off" : e < .5 && (r = "volume_down"), n`
+      <md-icon-button @click="${this._toggleMute}" part="button">
+        <md-icon>${r}</md-icon>
+      </md-icon-button>
+      <md-slider
+        part="slider"
+        min="0"
+        max="1"
+        value="${t ? 0 : e}"
+        step="0.01"
+        ?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();
+	}
+};
+l([C({
+	context: w,
+	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 };