@ghchinoy/lit-audio-ui 0.5.1 → 0.6.0

package/dist/components/atoms/ui-audio-volume-slider.js

@@ -1,21 +1,17 @@
 import { audioPlayerContext as e } from "../../utils/audio-context.js";
+import { __decorate as t } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
 import "@material/web/icon/icon.js";
-import { LitElement as t, css as n, html as r } from "lit";
-import { customElement as i, property as a } from "lit/decorators.js";
-import { consume as o } from "@lit/context";
+import { LitElement as n, css as r, html as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+import { consume as s } from "@lit/context";
 import "@material/web/iconbutton/icon-button.js";
 import "@material/web/slider/slider.js";
-var s = 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;
-}, c = class extends t {
-	constructor() {
-		super(...arguments), this.variant = "inline", this._isOpen = !1;
+var c = class extends n {
+	constructor(...e) {
+		super(...e), this.variant = "inline", this._isOpen = !1;
 	}
 	static {
-		this.styles = n`
+		this.styles = r`
     :host([variant="popover"]) {
       display: inline-block;
       width: auto;
@@ -105,8 +101,8 @@ var s = function(e, t, n, r) {
 	render() {
 		let e = this.playerState?.volume ?? 1, t = this.playerState?.muted ?? !1, n = "volume_up";
 		t || e === 0 ? n = "volume_off" : e < .5 && (n = "volume_down");
-		let i = t ? "Unmute audio" : "Mute audio";
-		return this.variant === "popover" ? r`
+		let r = t ? "Unmute audio" : "Mute audio";
+		return this.variant === "popover" ? i`
         <div 
           @mouseenter="${() => this._isOpen = !0}" 
           @mouseleave="${() => this._isOpen = !1}"
@@ -115,7 +111,7 @@ var s = function(e, t, n, r) {
           <md-icon-button
             @click="${this._toggleMute}"
             part="button"
-            aria-label="${i}"
+            aria-label="${r}"
           >
             <md-icon>${n}</md-icon>
           </md-icon-button>
@@ -133,11 +129,11 @@ var s = function(e, t, n, r) {
             </div>
           </div>
         </div>
-      ` : r`
+      ` : i`
       <md-icon-button
         @click="${this._toggleMute}"
         part="button"
-        aria-label="${i}"
+        aria-label="${r}"
       >
         <md-icon>${n}</md-icon>
       </md-icon-button>
@@ -161,14 +157,14 @@ var s = function(e, t, n, r) {
 		this.playerState && this.playerState.toggleMute();
 	}
 };
-s([o({
+t([s({
 	context: e,
 	subscribe: !0
-}), a({ attribute: !1 })], c.prototype, "playerState", void 0), s([a({
+}), o({ attribute: !1 })], c.prototype, "playerState", void 0), t([o({
 	type: String,
 	reflect: !0
-})], c.prototype, "variant", void 0), s([a({
+})], c.prototype, "variant", void 0), t([o({
 	type: Boolean,
 	state: !0
-})], c.prototype, "_isOpen", void 0), c = s([i("ui-audio-volume-slider")], c);
+})], c.prototype, "_isOpen", void 0), c = t([a("ui-audio-volume-slider")], c);
 export { c as UiAudioVolumeSlider };

package/dist/components/atoms/ui-speech-cancel-button.js

@@ -1,5 +1,5 @@
-import { speechContext as e } from "../../utils/speech-context.js";
-import { __decorate as t } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
+import { __decorate as e } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
+import { speechContext as t } from "../../utils/speech-context.js";
 import "@material/web/icon/icon.js";
 import { LitElement as n, css as r, html as i } from "lit";
 import { customElement as a } from "lit/decorators.js";
@@ -40,8 +40,8 @@ var s = class extends n {
 		this._context?.cancel();
 	}
 };
-t([o({
-	context: e,
+e([o({
+	context: t,
 	subscribe: !0
-})], s.prototype, "_context", void 0), s = t([a("ui-speech-cancel-button")], s);
+})], s.prototype, "_context", void 0), s = e([a("ui-speech-cancel-button")], s);
 export { s as UiSpeechCancelButton };

package/dist/components/atoms/ui-speech-record-button.js

@@ -1,5 +1,5 @@
-import { speechContext as e } from "../../utils/speech-context.js";
-import { __decorate as t } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
+import { __decorate as e } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
+import { speechContext as t } from "../../utils/speech-context.js";
 import "@material/web/icon/icon.js";
 import { LitElement as n, css as r, html as i } from "lit";
 import { customElement as a, property as o } from "lit/decorators.js";
@@ -77,8 +77,8 @@ var c = class extends n {
 		this._context && (this._context.state === "idle" ? this._context.start() : this._context.state === "recording" && this._context.stop());
 	}
 };
-t([s({
-	context: e,
+e([s({
+	context: t,
 	subscribe: !0
-})], c.prototype, "_context", void 0), t([o({ type: String })], c.prototype, "size", void 0), c = t([a("ui-speech-record-button")], c);
+})], c.prototype, "_context", void 0), e([o({ type: String })], c.prototype, "size", void 0), c = e([a("ui-speech-record-button")], c);
 export { c as UiSpeechRecordButton };

package/dist/components/atoms/ui-timed-text.js

@@ -1,18 +1,14 @@
 import { audioPlayerContext as e } from "../../utils/audio-context.js";
-import { LitElement as t, css as n, html as r } from "lit";
-import { customElement as i, property as a } from "lit/decorators.js";
-import { consume as o } from "@lit/context";
+import { __decorate as t } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
+import { LitElement as n, css as r, html as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+import { consume as s } from "@lit/context";
 /**
 * Copyright 2026 Google LLC
 */
-var s = 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;
-}, c = class extends t {
+var c = class extends n {
 	static {
-		this.styles = n`
+		this.styles = r`
     :host {
       display: block;
       font-family: inherit;
@@ -57,9 +53,9 @@ var s = function(e, t, n, r) {
 	}
 	render() {
 		let e = this.playerState?.transcript || [], t = this.playerState?.currentTime || 0;
-		return r`
+		return i`
       <slot></slot>
-      ${e.length > 0 ? r`
+      ${e.length > 0 ? i`
             <div class="transcript" part="container">
               ${e.map((e) => this._renderWord(e, t))}
             </div>
@@ -67,18 +63,18 @@ var s = function(e, t, n, r) {
     `;
 	}
 	_renderWord(e, t) {
-		let n = t >= e.start && t <= e.end, i = t > e.end;
-		return r`
+		let n = t >= e.start && t <= e.end, r = t > e.end;
+		return i`
       <span
-        class="word ${n ? "active" : ""} ${i ? "past" : ""}"
-        part="word ${n ? "word-active" : ""} ${i ? "word-past" : ""}"
+        class="word ${n ? "active" : ""} ${r ? "past" : ""}"
+        part="word ${n ? "word-active" : ""} ${r ? "word-past" : ""}"
         >${e.text}</span
       >
     `;
 	}
 };
-s([o({
+t([s({
 	context: e,
 	subscribe: !0
-}), a({ attribute: !1 })], c.prototype, "playerState", void 0), c = s([i("ui-timed-text")], c);
+}), o({ attribute: !1 })], c.prototype, "playerState", void 0), c = t([a("ui-timed-text")], c);
 export { c as UiTimedText };

package/dist/components/atoms/ui-voice-waveform.js

@@ -1,22 +1,18 @@
-import { speechContext as e } from "../../utils/speech-context.js";
+import { __decorate as e } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
+import { speechContext as t } from "../../utils/speech-context.js";
 import "../molecules/ui-live-waveform.js";
-import { LitElement as t, css as n, html as r } from "lit";
-import { customElement as i, property as a } from "lit/decorators.js";
-import { consume as o } from "@lit/context";
+import { LitElement as n, css as r, html as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+import { consume as s } from "@lit/context";
 /**
 * Copyright 2026 Google LLC
 */
-var s = 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;
-}, c = class extends t {
-	constructor() {
-		super(...arguments), this.barWidth = 2, this.barGap = 1, this.barColor = "currentColor", this.height = 20;
+var c = class extends n {
+	constructor(...e) {
+		super(...e), this.barWidth = 2, this.barGap = 1, this.barColor = "currentColor", this.height = 20;
 	}
 	static {
-		this.styles = n`
+		this.styles = r`
     :host {
       display: block;
       width: 100%;
@@ -24,9 +20,9 @@ var s = function(e, t, n, r) {
   `;
 	}
 	render() {
-		if (!this._context) return r``;
+		if (!this._context) return i``;
 		let e = this._context.state === "recording", t = this._context.state === "processing" || this._context.state === "connecting";
-		return e || t ? r`
+		return e || t ? i`
       <ui-live-waveform
         .active=${e}
         .processing=${t}
@@ -36,11 +32,11 @@ var s = function(e, t, n, r) {
         .barColor=${this.barColor}
         .height=${this.height}
       ></ui-live-waveform>
-    ` : r``;
+    ` : i``;
 	}
 };
-s([o({
-	context: e,
+e([s({
+	context: t,
 	subscribe: !0
-})], c.prototype, "_context", void 0), s([a({ type: Number })], c.prototype, "barWidth", void 0), s([a({ type: Number })], c.prototype, "barGap", void 0), s([a({ type: String })], c.prototype, "barColor", void 0), s([a({ type: Number })], c.prototype, "height", void 0), c = s([i("ui-voice-waveform")], c);
+})], c.prototype, "_context", void 0), e([o({ type: Number })], c.prototype, "barWidth", void 0), e([o({ type: Number })], c.prototype, "barGap", void 0), e([o({ type: String })], c.prototype, "barColor", void 0), e([o({ type: Number })], c.prototype, "height", void 0), c = e([a("ui-voice-waveform")], c);
 export { c as UiVoiceWaveform };

package/dist/components/molecules/ui-live-waveform.js

@@ -1,20 +1,16 @@
-import { applyCanvasEdgeFade as e, getNormalizedFrequencyData as t } from "../../utils/audio-utils.js";
-import { LitElement as n, css as r, html as i } from "lit";
-import { customElement as a, property as o, query as s } from "lit/decorators.js";
+import { __decorate as e } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
+import { applyCanvasEdgeFade as t, getNormalizedFrequencyData as n } from "../../utils/audio-utils.js";
+import { LitElement as r, css as i, html as a } from "lit";
+import { customElement as o, property as s, query as c } from "lit/decorators.js";
 /**
 * Copyright 2026 Google LLC
 */
-var c = 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;
-}, l = class extends n {
-	constructor() {
-		super(...arguments), 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.sensitivity = 1, this.updateRate = 30, this._animationFrameId = 0, this._lastUpdateTime = 0, this._currentBars = [], this._processingTime = 0, this._transitionProgress = 0, this._lastActiveData = [];
+var l = class extends r {
+	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.sensitivity = 1, this.updateRate = 30, this._animationFrameId = 0, this._lastUpdateTime = 0, this._currentBars = [], this._processingTime = 0, this._transitionProgress = 0, this._lastActiveData = [];
 	}
 	static {
-		this.styles = r`
+		this.styles = i`
     :host {
       display: block;
       width: 100%;
@@ -36,7 +32,7 @@ var c = function(e, t, n, r) {
   `;
 	}
 	render() {
-		return i`
+		return a`
       <div class="container" style="height: ${this.height === void 0 ? "100%" : typeof this.height == "number" || !isNaN(Number(this.height)) ? `${this.height}px` : this.height};">
         <canvas></canvas>
       </div>
@@ -72,12 +68,12 @@ var c = function(e, t, n, r) {
 		this._animationFrameId = requestAnimationFrame(e);
 	}
 	_updateData(e) {
-		if (!this._canvas) return;
-		let n = this._canvas.getBoundingClientRect(), r = Math.floor(n.width / (this.barWidth + this.barGap));
+		if (!this._container) return;
+		let t = this._container.getBoundingClientRect(), r = 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 n = t(this.analyserNode, this._dataArray), i = Math.floor(n.length * .05), a = Math.floor(n.length * .4), o = n.slice(i, a), s = Math.floor(r / 2), c = Array(r).fill(.05), l = o.length - 1;
+				let t = n(this.analyserNode, this._dataArray), i = Math.floor(t.length * .05), a = Math.floor(t.length * .4), o = t.slice(i, a), s = Math.floor(r / 2), c = Array(r).fill(.05), l = o.length - 1;
 				for (let e = 0; e <= s; e++) {
 					let t = e / s, n = o[Math.floor(t * l)] || 0;
 					t > .8 && (n *= 1 - (t - .8) * 5);
@@ -106,26 +102,31 @@ var c = function(e, t, n, r) {
 	}
 	_renderFrame() {
 		if (!this._canvas) return;
-		let t = this._canvas.getContext("2d");
-		if (!t) return;
-		let n = this._canvas.getBoundingClientRect();
-		t.clearRect(0, 0, n.width, n.height);
-		let r = getComputedStyle(this), i = this.barColor || "currentColor";
-		if (i.startsWith("var(")) {
-			let e = i.match(/var\(([^,)]+)/)?.[1].trim();
+		let e = this._canvas.getContext("2d");
+		if (!e) return;
+		let n = window.devicePixelRatio || 1, r = this._container.getBoundingClientRect();
+		if (r.width === 0 || r.height === 0) {
+			this._animationFrameId = requestAnimationFrame(() => this._renderFrame());
+			return;
+		}
+		let i = Math.round(r.width * n), a = Math.round(r.height * n);
+		this._canvas.width !== i || this._canvas.height !== a ? (this._canvas.width = i, this._canvas.height = a, this._canvas.style.width = `${r.width}px`, this._canvas.style.height = `${r.height}px`, e.scale(n, n)) : e.clearRect(0, 0, r.width, r.height);
+		let o = getComputedStyle(this), s = this.barColor || "currentColor";
+		if (s.startsWith("var(")) {
+			let e = s.match(/var\(([^,)]+)/)?.[1].trim();
 			if (e) {
-				let t = r.getPropertyValue(e).trim();
-				t && (i = t);
+				let t = o.getPropertyValue(e).trim();
+				t && (s = t);
 			}
 		}
-		(i === "currentColor" || !i) && (i = r.getPropertyValue("--md-sys-color-primary").trim() || "#0066cc");
-		let a = this.barWidth + this.barGap, o = Math.floor(n.width / a), s = n.height / 2;
-		for (let e = 0; e < o && e < this._currentBars.length; e++) {
-			let r = this._currentBars[e] || .05, o = e * a, c = Math.max(this.barHeight, r * n.height * .8), l = s - c / 2;
-			t.fillStyle = i, t.globalAlpha = .6 + r * .4, this.barRadius > 0 ? (t.beginPath(), t.roundRect(o, l, this.barWidth, c, this.barRadius), t.fill()) : t.fillRect(o, l, this.barWidth, c);
+		(s === "currentColor" || !s) && (s = o.getPropertyValue("--md-sys-color-primary").trim() || "#0066cc");
+		let c = this.barWidth + this.barGap, l = Math.floor(r.width / c), u = r.height / 2;
+		for (let t = 0; t < l && t < this._currentBars.length; t++) {
+			let n = this._currentBars[t] || .05, i = t * c, a = Math.max(this.barHeight, n * r.height * .8), o = u - a / 2;
+			e.fillStyle = s, e.globalAlpha = .6 + n * .4, this.barRadius > 0 ? (e.beginPath(), e.roundRect(i, o, this.barWidth, a, this.barRadius), e.fill()) : e.fillRect(i, o, this.barWidth, a);
 		}
-		this.fadeEdges && e(t, n.width, n.height, this.fadeWidth), t.globalAlpha = 1;
+		this.fadeEdges && t(e, r.width, r.height, this.fadeWidth), e.globalAlpha = 1;
 	}
 };
-c([o({ type: Boolean })], l.prototype, "active", void 0), c([o({ type: Boolean })], l.prototype, "processing", void 0), c([o({ attribute: !1 })], l.prototype, "analyserNode", void 0), c([o({ type: Number })], l.prototype, "barWidth", void 0), c([o({ type: Number })], l.prototype, "barHeight", void 0), c([o({ type: Number })], l.prototype, "barGap", void 0), c([o({ type: Number })], l.prototype, "barRadius", void 0), c([o({ type: String })], l.prototype, "barColor", void 0), c([o({ type: Boolean })], l.prototype, "fadeEdges", void 0), c([o({ type: Number })], l.prototype, "fadeWidth", void 0), c([o()], l.prototype, "height", void 0), c([o({ type: Number })], l.prototype, "sensitivity", void 0), c([o({ type: Number })], l.prototype, "updateRate", void 0), c([s("canvas")], l.prototype, "_canvas", void 0), c([s(".container")], l.prototype, "_container", void 0), l = c([a("ui-live-waveform")], l);
+e([s({ type: Boolean })], l.prototype, "active", void 0), e([s({ type: Boolean })], l.prototype, "processing", void 0), e([s({ attribute: !1 })], l.prototype, "analyserNode", void 0), e([s({ type: Number })], l.prototype, "barWidth", void 0), e([s({ type: Number })], l.prototype, "barHeight", void 0), e([s({ type: Number })], l.prototype, "barGap", void 0), e([s({ type: Number })], l.prototype, "barRadius", void 0), e([s({ type: String })], l.prototype, "barColor", void 0), e([s({ type: Boolean })], l.prototype, "fadeEdges", void 0), e([s({ type: Number })], l.prototype, "fadeWidth", void 0), e([s()], l.prototype, "height", void 0), e([s({ type: Number })], l.prototype, "sensitivity", void 0), e([s({ type: Number })], l.prototype, "updateRate", void 0), e([c("canvas")], l.prototype, "_canvas", void 0), e([c(".container")], l.prototype, "_container", void 0), l = e([o("ui-live-waveform")], l);
 export { l as UiLiveWaveform };

package/dist/components/molecules/ui-mic-selector.js

@@ -1,7 +1,8 @@
+import { __decorate as e } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
 import "./ui-live-waveform.js";
 import "@material/web/icon/icon.js";
-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 { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a, query as o, state as s } from "lit/decorators.js";
 import "@material/web/menu/menu.js";
 import "@material/web/menu/menu-item.js";
 import "@material/web/divider/divider.js";
@@ -22,19 +23,14 @@ import "@material/web/button/filled-tonal-button.js";
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-var s = 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;
-}, c = class extends e {
-	constructor() {
-		super(...arguments), this.muted = !1, this.disabled = !1, this._devices = [], this._loading = !0, this._error = null, this._hasPermission = !1, this._isMenuOpen = !1, this._handleDeviceChange = () => {
+var c = class extends t {
+	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`
+		this.styles = n`
     :host {
       display: inline-block;
       position: relative;
@@ -141,7 +137,7 @@ var s = function(e, t, n, r) {
 	}
 	render() {
 		let e = this._devices.find((e) => e.deviceId === this.value) || this._devices[0] || { label: this._loading ? "Loading..." : "No microphone" };
-		return n`
+		return r`
       <!-- Anchor Button -->
       <button
         id="anchor-button"
@@ -166,22 +162,22 @@ var s = function(e, t, n, r) {
         @closed=${() => this._isMenuOpen = !1}
         @opened=${() => this._isMenuOpen = !0}
       >
-        ${this._loading ? n`<md-menu-item disabled
+        ${this._loading ? r`<md-menu-item disabled
               ><div slot="headline">Loading devices...</div></md-menu-item
-            >` : this._error ? n`<md-menu-item disabled
+            >` : this._error ? r`<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`
+              >` : this._devices.map((e) => r`
                   <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>` : ""}
+                    ${this.value === e.deviceId || !this.value && this._devices[0]?.deviceId === e.deviceId ? r`<md-icon slot="end">check</md-icon>` : ""}
                   </md-menu-item>
                 `)}
-        ${this._devices.length > 0 ? n`
+        ${this._devices.length > 0 ? r`
               <md-divider></md-divider>
               <div class="menu-footer">
                 <md-text-button
@@ -275,5 +271,5 @@ var s = function(e, t, n, r) {
 		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;
 	}
 };
-s([i({ type: String })], c.prototype, "value", void 0), s([i({ type: Boolean })], c.prototype, "muted", void 0), s([i({ type: Boolean })], c.prototype, "disabled", void 0), s([o()], c.prototype, "_devices", void 0), s([o()], c.prototype, "_loading", void 0), s([o()], c.prototype, "_error", void 0), s([o()], c.prototype, "_hasPermission", void 0), s([o()], c.prototype, "_isMenuOpen", void 0), s([o()], c.prototype, "_previewAnalyser", void 0), s([a("md-menu")], c.prototype, "_menuEl", void 0), c = s([r("ui-mic-selector")], c);
+e([a({ type: String })], c.prototype, "value", void 0), e([a({ type: Boolean })], c.prototype, "muted", void 0), e([a({ type: Boolean })], c.prototype, "disabled", void 0), e([s()], c.prototype, "_devices", void 0), e([s()], c.prototype, "_loading", void 0), e([s()], c.prototype, "_error", void 0), e([s()], c.prototype, "_hasPermission", void 0), e([s()], c.prototype, "_isMenuOpen", void 0), e([s()], c.prototype, "_previewAnalyser", void 0), e([o("md-menu")], c.prototype, "_menuEl", void 0), c = e([i("ui-mic-selector")], c);
 export { c as UiMicSelector };

package/dist/components/molecules/ui-playlist.js

@@ -1,8 +1,9 @@
 import { audioPlayerContext as e } from "../../utils/audio-context.js";
+import { __decorate as t } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
 import "@material/web/icon/icon.js";
-import { LitElement as t, css as n, html as r } from "lit";
-import { customElement as i, property as a } from "lit/decorators.js";
-import { consume as o } from "@lit/context";
+import { LitElement as n, css as r, html as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+import { consume as s } from "@lit/context";
 import "@material/web/list/list.js";
 import "@material/web/list/list-item.js";
 /**
@@ -20,17 +21,12 @@ import "@material/web/list/list-item.js";
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-var s = 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;
-}, c = class extends t {
-	constructor() {
-		super(...arguments), this.header = "Queue", this.emptyText = "No tracks in queue";
+var c = class extends n {
+	constructor(...e) {
+		super(...e), this.header = "Queue", this.emptyText = "No tracks in queue";
 	}
 	static {
-		this.styles = n`
+		this.styles = r`
     :host {
       display: block;
       background: var(--md-sys-color-surface-container-low, transparent);
@@ -86,12 +82,12 @@ var s = function(e, t, n, r) {
 	}
 	render() {
 		let e = this.playerState?.items || [], t = this.playerState?.currentIndex ?? -1;
-		return r`
+		return i`
       <div class="playlist-header">${this.header}</div>
 
-      ${e.length === 0 ? r`<div class="empty-state">${this.emptyText}</div>` : r`
+      ${e.length === 0 ? i`<div class="empty-state">${this.emptyText}</div>` : i`
             <md-list>
-              ${e.map((e, n) => r`
+              ${e.map((e, n) => i`
                   <md-list-item
                     ?selected=${n === t}
                     @click=${() => this.playerState?.select(n)}
@@ -102,9 +98,9 @@ var s = function(e, t, n, r) {
                     <div slot="supporting-text">
                       ${e.artist || "Unknown Artist"}
                     </div>
-                    ${n === t ? r`<md-icon slot="start" class="now-playing-icon"
+                    ${n === t ? i`<md-icon slot="start" class="now-playing-icon"
                           >${this.playerState?.isPlaying ? "graphic_eq" : "play_arrow"}</md-icon
-                        >` : r`<md-icon slot="start">music_note</md-icon>`}
+                        >` : i`<md-icon slot="start">music_note</md-icon>`}
                   </md-list-item>
                 `)}
             </md-list>
@@ -112,8 +108,8 @@ var s = function(e, t, n, r) {
     `;
 	}
 };
-s([o({
+t([s({
 	context: e,
 	subscribe: !0
-})], c.prototype, "playerState", void 0), s([a({ type: String })], c.prototype, "header", void 0), s([a({ type: String })], c.prototype, "emptyText", void 0), c = s([i("ui-playlist")], c);
+})], c.prototype, "playerState", void 0), t([o({ type: String })], c.prototype, "header", void 0), t([o({ type: String })], c.prototype, "emptyText", void 0), c = t([a("ui-playlist")], c);
 export { c as UiPlaylist };

package/dist/components/molecules/ui-scrolling-waveform.js

@@ -1,17 +1,13 @@
-import { applyCanvasEdgeFade as e } from "../../utils/audio-utils.js";
-import { LitElement as t, css as n, html as r } from "lit";
-import { customElement as i, property as a, query as o } from "lit/decorators.js";
-var s = 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;
-}, c = class extends t {
-	constructor() {
-		super(...arguments), 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.align = "center", this.active = !0, this._animationFrameId = 0, this._lastTime = 0, this._bars = [], this._seed = Math.random(), this._dataIndex = 0;
+import { __decorate as e } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
+import { applyCanvasEdgeFade as t } from "../../utils/audio-utils.js";
+import { LitElement as n, css as r, html as i } from "lit";
+import { customElement as a, property as o, query as s } from "lit/decorators.js";
+var c = class extends n {
+	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.align = "center", this.active = !0, this._animationFrameId = 0, this._lastTime = 0, this._bars = [], this._seed = Math.random(), this._dataIndex = 0;
 	}
 	static {
-		this.styles = n`
+		this.styles = r`
     :host {
       display: block;
       width: 100%;
@@ -34,7 +30,7 @@ var s = function(e, t, n, r) {
   `;
 	}
 	render() {
-		return r`
+		return i`
       <div class="container" style="height: ${this.height === void 0 ? "100%" : typeof this.height == "number" || !isNaN(Number(this.height)) ? `${this.height}px` : this.height};">
         <canvas></canvas>
       </div>
@@ -69,20 +65,25 @@ var s = function(e, t, n, r) {
 	}
 	_startAnimation() {
 		this._lastTime = performance.now();
-		let t = (n) => {
+		let e = (n) => {
 			if (!this._canvas) return;
 			let r = this._canvas.getContext("2d");
 			if (!r) return;
 			let i = this._lastTime ? (n - this._lastTime) / 1e3 : 0;
 			this._lastTime = n;
-			let a = this._canvas.getBoundingClientRect();
-			r.clearRect(0, 0, a.width, a.height);
-			let o = this.barColor;
-			o ||= getComputedStyle(this).getPropertyValue("--md-sys-color-primary").trim() || "#0066cc";
-			let s = this.barWidth + this.barGap, c = this.active ? this.speed : 0;
-			for (let e = 0; e < this._bars.length; e++) this._bars[e].x -= c * i, this.active || (this._bars[e].height += (.05 - this._bars[e].height) * .15);
-			for (this._bars = this._bars.filter((e) => e.x + this.barWidth > -s); this._bars.length === 0 || this._bars[this._bars.length - 1].x < a.width;) {
-				let e = this._bars[this._bars.length - 1], t = e ? e.x + s : a.width, n, r = this.peaks && this.peaks.length > 0 ? this.peaks : this.data;
+			let a = window.devicePixelRatio || 1, o = this._container.getBoundingClientRect();
+			if (o.width === 0 || o.height === 0) {
+				this._animationFrameId = requestAnimationFrame(e);
+				return;
+			}
+			let s = Math.round(o.width * a), c = Math.round(o.height * a);
+			this._canvas.width !== s || this._canvas.height !== c ? (this._canvas.width = s, this._canvas.height = c, this._canvas.style.width = `${o.width}px`, this._canvas.style.height = `${o.height}px`, r.scale(a, a)) : r.clearRect(0, 0, o.width, o.height);
+			let l = this.barColor;
+			l ||= getComputedStyle(this).getPropertyValue("--md-sys-color-primary").trim() || "#0066cc";
+			let u = this.barWidth + this.barGap, d = this.active ? this.speed : 0;
+			for (let e = 0; e < this._bars.length; e++) this._bars[e].x -= d * i, this.active || (this._bars[e].height += (.05 - this._bars[e].height) * .15);
+			for (this._bars = this._bars.filter((e) => e.x + this.barWidth > -u); this._bars.length === 0 || this._bars[this._bars.length - 1].x < o.width;) {
+				let e = this._bars[this._bars.length - 1], t = e ? e.x + u : o.width, n, r = this.peaks && this.peaks.length > 0 ? this.peaks : this.data;
 				if (r && r.length > 0) n = r[this._dataIndex % r.length] || .1, this._dataIndex = (this._dataIndex + 1) % r.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);
@@ -99,15 +100,15 @@ var s = function(e, t, n, r) {
 					height: n
 				}), this._bars.length > this.barCount * 2) break;
 			}
-			let l = a.height / 2;
-			for (let e of this._bars) if (e.x < a.width && e.x + this.barWidth > 0) {
-				let t = Math.max(this.barHeight, e.height * a.height * .8), n = l - t / 2;
-				r.fillStyle = o, r.globalAlpha = .6 + e.height * .4, this.barRadius > 0 ? (r.beginPath(), r.roundRect(e.x, n, this.barWidth, t, this.barRadius), r.fill()) : r.fillRect(e.x, n, this.barWidth, t);
+			let f = o.height / 2;
+			for (let e of this._bars) if (e.x < o.width && e.x + this.barWidth > 0) {
+				let t = Math.max(this.barHeight, e.height * o.height * .8), n = f - t / 2;
+				r.fillStyle = l, r.globalAlpha = .6 + e.height * .4, this.barRadius > 0 ? (r.beginPath(), r.roundRect(e.x, n, this.barWidth, t, this.barRadius), r.fill()) : r.fillRect(e.x, n, this.barWidth, t);
 			}
-			r.globalAlpha = 1, this.fadeEdges && this.fadeWidth > 0 && e(r, a.width, a.height, this.fadeWidth), this._animationFrameId = requestAnimationFrame(t);
+			r.globalAlpha = 1, this.fadeEdges && this.fadeWidth > 0 && t(r, o.width, o.height, this.fadeWidth), this._animationFrameId = requestAnimationFrame(e);
 		};
-		this._animationFrameId = requestAnimationFrame(t);
+		this._animationFrameId = requestAnimationFrame(e);
 	}
 };
-s([a({ type: Number })], c.prototype, "speed", void 0), s([a({ type: Number })], c.prototype, "barCount", void 0), s([a({ type: Number })], c.prototype, "barWidth", void 0), s([a({ type: Number })], c.prototype, "barHeight", void 0), s([a({ type: Number })], c.prototype, "barGap", void 0), s([a({ type: Number })], c.prototype, "barRadius", void 0), s([a({ type: String })], c.prototype, "barColor", void 0), s([a({ type: Boolean })], c.prototype, "fadeEdges", void 0), s([a({ type: Number })], c.prototype, "fadeWidth", void 0), s([a()], c.prototype, "height", void 0), s([a({ type: String })], c.prototype, "align", void 0), s([a({ type: Array })], c.prototype, "data", void 0), s([a({ type: Array })], c.prototype, "peaks", void 0), s([a({ attribute: !1 })], c.prototype, "analyserNode", void 0), s([a({ type: Boolean })], c.prototype, "active", void 0), s([o("canvas")], c.prototype, "_canvas", void 0), s([o(".container")], c.prototype, "_container", void 0), c = s([i("ui-scrolling-waveform")], c);
+e([o({ type: Number })], c.prototype, "speed", void 0), e([o({ type: Number })], c.prototype, "barCount", void 0), e([o({ type: Number })], c.prototype, "barWidth", void 0), e([o({ type: Number })], c.prototype, "barHeight", void 0), e([o({ type: Number })], c.prototype, "barGap", void 0), e([o({ type: Number })], c.prototype, "barRadius", void 0), e([o({ type: String })], c.prototype, "barColor", void 0), e([o({ type: Boolean })], c.prototype, "fadeEdges", void 0), e([o({ type: Number })], c.prototype, "fadeWidth", void 0), e([o()], c.prototype, "height", void 0), e([o({ type: String })], c.prototype, "align", void 0), e([o({ type: Array })], c.prototype, "data", void 0), e([o({ type: Array })], c.prototype, "peaks", void 0), e([o({ attribute: !1 })], c.prototype, "analyserNode", void 0), e([o({ type: Boolean })], c.prototype, "active", void 0), e([s("canvas")], c.prototype, "_canvas", void 0), e([s(".container")], c.prototype, "_container", void 0), c = e([a("ui-scrolling-waveform")], c);
 export { c as UiScrollingWaveform };