@ghchinoy/lit-audio-ui 0.5.1 → 0.6.0

package/dist/components/molecules/ui-spectrum-visualizer.js

@@ -1,8 +1,9 @@
 import { audioPlayerContext as e } from "../../utils/audio-context.js";
-import { 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 { consume as c } from "@lit/context";
+import { __decorate as t } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
+import { 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";
+import { consume as l } from "@lit/context";
 /**
 * Copyright 2026 Google LLC
 *
@@ -18,17 +19,12 @@ import { consume as c } from "@lit/context";
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-var l = 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;
-}, u = class extends n {
-	constructor() {
-		super(...arguments), this.barWidth = 4, this.barGap = 2, this._animationFrameId = 0;
+var u = class extends r {
+	constructor(...e) {
+		super(...e), this.barWidth = 4, this.barGap = 2, this._animationFrameId = 0;
 	}
 	static {
-		this.styles = r`
+		this.styles = i`
     :host {
       display: block;
       width: 100%;
@@ -43,7 +39,7 @@ var l = function(e, t, n, r) {
   `;
 	}
 	render() {
-		return i`<canvas style="height: ${this.height === void 0 ? "100%" : typeof this.height == "number" || !isNaN(Number(this.height)) ? `${this.height}px` : this.height};"></canvas>`;
+		return a`<canvas style="height: ${this.height === void 0 ? "100%" : typeof this.height == "number" || !isNaN(Number(this.height)) ? `${this.height}px` : this.height};"></canvas>`;
 	}
 	firstUpdated() {
 		this._startLoop();
@@ -61,20 +57,22 @@ var l = function(e, t, n, r) {
 		if (!this._canvas || !this.playerState?.analyserNode) return;
 		let e = this.playerState.analyserNode;
 		this._dataArray ||= new Uint8Array(e.frequencyBinCount);
-		let n = this._canvas.getContext("2d");
-		if (!n) return;
-		let r = this._canvas.getBoundingClientRect(), i = window.devicePixelRatio || 1;
-		this._canvas.width !== r.width * i && (this._canvas.width = r.width * i, this._canvas.height = r.height * i, n.scale(i, i)), n.clearRect(0, 0, r.width, r.height);
-		let a = t(e, this._dataArray), o = this.barWidth + this.barGap, s = Math.floor(r.width / o), c = getComputedStyle(this), l = this.color;
-		l ||= c.getPropertyValue("--md-sys-color-primary").trim() || "#0066cc", n.fillStyle = l;
-		for (let e = 0; e < s; e++) {
-			let t = (a[Math.floor(e / s * (a.length * .6))] || 0) * r.height, i = e * o, c = r.height - t;
-			n.fillRect(i, c, this.barWidth, t);
+		let t = this._canvas.getContext("2d");
+		if (!t) return;
+		let r = this.getBoundingClientRect();
+		if (r.width === 0 || r.height === 0) return;
+		let i = window.devicePixelRatio || 1, a = Math.round(r.width * i), o = Math.round(r.height * i);
+		this._canvas.width !== a || this._canvas.height !== o ? (this._canvas.width = a, this._canvas.height = o, this._canvas.style.width = `${r.width}px`, this._canvas.style.height = `${r.height}px`, t.scale(i, i)) : t.clearRect(0, 0, r.width, r.height);
+		let s = n(e, this._dataArray), c = this.barWidth + this.barGap, l = Math.floor(r.width / c), u = getComputedStyle(this), d = this.color;
+		d ||= u.getPropertyValue("--md-sys-color-primary").trim() || "#0066cc", t.fillStyle = d;
+		for (let e = 0; e < l; e++) {
+			let n = (s[Math.floor(e / l * (s.length * .6))] || 0) * r.height, i = e * c, a = r.height - n;
+			t.fillRect(i, a, this.barWidth, n);
 		}
 	}
 };
-l([c({
+t([l({
 	context: e,
 	subscribe: !0
-})], u.prototype, "playerState", void 0), l([o({ type: Number })], u.prototype, "barWidth", void 0), l([o({ type: Number })], u.prototype, "barGap", void 0), l([o()], u.prototype, "height", void 0), l([o({ type: String })], u.prototype, "color", void 0), l([s("canvas")], u.prototype, "_canvas", void 0), u = l([a("ui-spectrum-visualizer")], u);
+})], u.prototype, "playerState", void 0), t([s({ type: Number })], u.prototype, "barWidth", void 0), t([s({ type: Number })], u.prototype, "barGap", void 0), t([s()], u.prototype, "height", void 0), t([s({ type: String })], u.prototype, "color", void 0), t([c("canvas")], u.prototype, "_canvas", void 0), u = t([o("ui-spectrum-visualizer")], u);
 export { u as UiSpectrumVisualizer };

package/dist/components/molecules/ui-speech-preview.js

@@ -1,19 +1,15 @@
-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 "./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";
-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.placeholder = "Jot down some thoughts...";
+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";
+var c = class extends n {
+	constructor(...e) {
+		super(...e), this.placeholder = "Jot down some thoughts...";
 	}
 	static {
-		this.styles = n`
+		this.styles = r`
     :host {
       display: inline-flex;
       align-items: center;
@@ -59,9 +55,9 @@ var s = function(e, t, n, r) {
   `;
 	}
 	render() {
-		let { state: e = "idle", transcript: t = "", partialTranscript: n = "", analyserNode: i = void 0 } = this._context || {}, a = e === "recording", o = e === "processing" || e === "connecting";
-		return r`
-      ${!a && !o && !(t || n) ? r`<span class="placeholder">${this.placeholder}</span>` : r`<span class="transcript">${n || t}</span>`}
+		let { state: e = "idle", transcript: t = "", partialTranscript: n = "", analyserNode: r = void 0 } = this._context || {}, a = e === "recording", o = e === "processing" || e === "connecting";
+		return i`
+      ${!a && !o && !(t || n) ? i`<span class="placeholder">${this.placeholder}</span>` : i`<span class="transcript">${n || t}</span>`}
 
       <div
         class="waveform-container ${a || o ? "" : "hidden"}"
@@ -69,7 +65,7 @@ var s = function(e, t, n, r) {
         <ui-live-waveform
           .active=${a}
           .processing=${o}
-          .analyserNode=${i}
+          .analyserNode=${r}
           barWidth="2"
           barGap="1"
           height="20"
@@ -79,8 +75,8 @@ var s = function(e, t, n, r) {
     `;
 	}
 };
-s([o({
-	context: e,
+e([s({
+	context: t,
 	subscribe: !0
-})], c.prototype, "_context", void 0), s([a({ type: String })], c.prototype, "placeholder", void 0), c = s([i("ui-speech-preview")], c);
+})], c.prototype, "_context", void 0), e([o({ type: String })], c.prototype, "placeholder", void 0), c = e([a("ui-speech-preview")], c);
 export { c as UiSpeechPreview };

package/dist/components/molecules/ui-voice-button.js

@@ -1,26 +1,22 @@
-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 "./ui-live-waveform.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, state as o } from "lit/decorators.js";
-import { consume as s } from "@lit/context";
+import { LitElement as n, css as r, html as i } from "lit";
+import { customElement as a, property as o, state as s } from "lit/decorators.js";
+import { consume as c } from "@lit/context";
 import "@material/web/button/outlined-button.js";
-import { classMap as c } from "lit/directives/class-map.js";
+import { classMap as l } from "lit/directives/class-map.js";
 import "@material/web/button/filled-button.js";
 /**
 * Copyright 2026 Google LLC
 */
-var l = 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;
-}, u = class extends t {
-	constructor() {
-		super(...arguments), this.state = "idle", this.disabled = !1, this._showFeedback = !1, this._feedbackType = null;
+var u = class extends n {
+	constructor(...e) {
+		super(...e), this.state = "idle", this.disabled = !1, this._showFeedback = !1, this._feedbackType = null;
 	}
 	static {
-		this.styles = n`
+		this.styles = r`
     :host {
       display: inline-block;
       --ui-waveform-height: 24px;
@@ -98,29 +94,29 @@ var l = function(e, t, n, r) {
 		}, 1500));
 	}
 	render() {
-		let e = this._context?.state || this.state, t = e === "recording", n = e === "processing" || e === "connecting", i = t || n, a = this.disabled || n, o = {
+		let e = this._context?.state || this.state, t = e === "recording", n = e === "processing" || e === "connecting", r = t || n, a = this.disabled || n, o = {
 			recording: t,
 			processing: n,
 			success: this._feedbackType === "success",
 			error: this._feedbackType === "error"
 		}, s = {
 			"waveform-slot": !0,
-			active: i
-		}, l = this._context?.analyserNode || this.analyserNode;
-		return r`
+			active: r
+		}, c = this._context?.analyserNode || this.analyserNode;
+		return i`
       <md-filled-button
-        class=${c(o)}
+        class=${l(o)}
         ?disabled=${a}
         @click=${this._handleClick}
       >
-        <div class="wrapper ${i ? "active" : ""}">
-          ${this.label ? r`<span>${this.label}</span>` : ""}
-          <div class=${c(s)}>
-            ${i ? r`
+        <div class="wrapper ${r ? "active" : ""}">
+          ${this.label ? i`<span>${this.label}</span>` : ""}
+          <div class=${l(s)}>
+            ${r ? i`
                   <ui-live-waveform
                     .active=${t}
                     .processing=${n}
-                    .analyserNode=${l}
+                    .analyserNode=${c}
                     .barWidth=${2}
                     .barGap=${1}
                     barColor="currentColor"
@@ -129,10 +125,10 @@ var l = function(e, t, n, r) {
                   ></ui-live-waveform>
                 ` : ""}
           </div>
-          ${this._showFeedback && this._feedbackType === "success" ? r`<div class="feedback-overlay success">
+          ${this._showFeedback && this._feedbackType === "success" ? i`<div class="feedback-overlay success">
                 <md-icon>check</md-icon>
               </div>` : ""}
-          ${this._showFeedback && this._feedbackType === "error" ? r`<div class="feedback-overlay error">
+          ${this._showFeedback && this._feedbackType === "error" ? i`<div class="feedback-overlay error">
                 <md-icon>close</md-icon>
               </div>` : ""}
         </div>
@@ -147,8 +143,8 @@ var l = function(e, t, n, r) {
 		}));
 	}
 };
-l([s({
-	context: e,
+e([c({
+	context: t,
 	subscribe: !0
-})], u.prototype, "_context", void 0), l([a({ type: String })], u.prototype, "state", void 0), l([a({ type: String })], u.prototype, "label", void 0), l([a({ type: String })], u.prototype, "trailing", void 0), l([a({ type: Boolean })], u.prototype, "disabled", void 0), l([a({ attribute: !1 })], u.prototype, "analyserNode", void 0), l([o()], u.prototype, "_showFeedback", void 0), l([o()], u.prototype, "_feedbackType", void 0), u = l([i("ui-voice-button")], u);
+})], u.prototype, "_context", void 0), e([o({ type: String })], u.prototype, "state", void 0), e([o({ type: String })], u.prototype, "label", void 0), e([o({ type: String })], u.prototype, "trailing", void 0), e([o({ type: Boolean })], u.prototype, "disabled", void 0), e([o({ attribute: !1 })], u.prototype, "analyserNode", void 0), e([s()], u.prototype, "_showFeedback", void 0), e([s()], u.prototype, "_feedbackType", void 0), u = e([a("ui-voice-button")], u);
 export { u as UiVoiceButton };

package/dist/components/molecules/ui-voice-picker.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/button/outlined-button.js";
@@ -21,17 +22,12 @@ import "@material/web/textfield/outlined-text-field.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.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 = "";
+var c = class extends t {
+	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`
+		this.styles = n`
     :host {
       display: inline-block;
       width: 100%;
@@ -239,7 +235,7 @@ var s = function(e, t, n, r) {
 			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`
+		return r`
       <!-- Hidden audio player for previews -->
       <audio
         crossorigin="anonymous"
@@ -258,22 +254,22 @@ var s = function(e, t, n, r) {
       >
         <div class="trigger-content">
           <div class="trigger-left">
-            ${e ? n`
+            ${e ? r`
                   <div
                     class="trigger-icon"
                     style="${this.useOrbs ? "overflow: hidden;" : ""}"
                   >
-                    ${this.useOrbs ? n`<ui-orb
+                    ${this.useOrbs ? r`<ui-orb
                           agentState="listening"
                           .colors="${e[this.colorKey] || ["#CADCFC", "#A0B9D1"]}"
-                        ></ui-orb>` : n`<md-icon style="font-size: 16px;"
+                        ></ui-orb>` : r`<md-icon style="font-size: 16px;"
                           >record_voice_over</md-icon
                         >`}
                   </div>
                   <span class="trigger-text"
                     >${e[this.titleKey] || e.name}</span
                   >
-                ` : n`
+                ` : r`
                   <span
                     class="trigger-text"
                     style="color: var(--md-sys-color-on-surface-variant)"
@@ -310,7 +306,7 @@ var s = function(e, t, n, r) {
           </md-outlined-text-field>
         </div>
 
-        ${t.length === 0 ? n` <div class="empty-state">No voice found.</div> ` : t.map((e) => n`
+        ${t.length === 0 ? r` <div class="empty-state">No voice found.</div> ` : t.map((e) => r`
                 <md-menu-item
                   @click=${() => this._selectVoice(e[this.idKey])}
                   ?selected=${this.value === e[this.idKey]}
@@ -323,13 +319,13 @@ var s = function(e, t, n, r) {
                       role="button"
                       @click=${(t) => this._togglePreview(t, e)}
                     >
-                      ${this.useOrbs ? n`<ui-orb
+                      ${this.useOrbs ? r`<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;"
+                          ></ui-orb>` : r`<md-icon style="font-size: 18px;"
                             >face</md-icon
                           >`}
-                      ${e[this.previewUrlKey] ? n`
+                      ${e[this.previewUrlKey] ? r`
                             <div
                               class="play-overlay ${this._previewingVoiceId === e[this.idKey] ? "active" : ""}"
                             >
@@ -343,11 +339,11 @@ var s = function(e, t, n, r) {
                     <!-- Voice Info -->
                     <div class="voice-info">
                       <span class="voice-name">${e[this.titleKey]}</span>
-                      ${e[this.subtitleKey] || e.labels ? n`
+                      ${e[this.subtitleKey] || e.labels ? r`
                             <div class="voice-labels">
-                              ${e[this.subtitleKey] ? n`<span class="voice-badge"
+                              ${e[this.subtitleKey] ? r`<span class="voice-badge"
                                     >${e[this.subtitleKey]}</span
-                                  >` : Object.values(e.labels || {}).filter(Boolean).map((e) => n`<span class="voice-badge"
+                                  >` : Object.values(e.labels || {}).filter(Boolean).map((e) => r`<span class="voice-badge"
                                           >${e}</span
                                         >`)}
                             </div>
@@ -355,7 +351,7 @@ var s = function(e, t, n, r) {
                     </div>
                   </div>
 
-                  ${this.value === e[this.idKey] ? n`<md-icon slot="end">check</md-icon>` : ""}
+                  ${this.value === e[this.idKey] ? r`<md-icon slot="end">check</md-icon>` : ""}
                 </md-menu-item>
               `)}
       </md-menu>
@@ -381,5 +377,5 @@ var s = function(e, t, n, r) {
 		this._audioEl && (this._audioEl.pause(), this._audioEl.currentTime = 0), this._previewingVoiceId = void 0;
 	}
 };
-s([i({ type: Array })], c.prototype, "voices", void 0), s([i({ type: String })], c.prototype, "value", void 0), s([i({ type: String })], c.prototype, "placeholder", void 0), s([i({ type: String })], c.prototype, "idKey", void 0), s([i({ type: String })], c.prototype, "titleKey", void 0), s([i({ type: String })], c.prototype, "subtitleKey", void 0), s([i({ type: String })], c.prototype, "previewUrlKey", void 0), s([i({ type: Boolean })], c.prototype, "useOrbs", void 0), s([i({ type: String })], c.prototype, "colorKey", void 0), s([o()], c.prototype, "_searchQuery", void 0), s([o()], c.prototype, "_previewingVoiceId", void 0), s([a("md-menu")], c.prototype, "_menuEl", void 0), s([a("audio")], c.prototype, "_audioEl", void 0), c = s([r("ui-voice-picker")], c);
+e([a({ type: Array })], c.prototype, "voices", void 0), e([a({ type: String })], c.prototype, "value", void 0), e([a({ type: String })], c.prototype, "placeholder", void 0), e([a({ type: String })], c.prototype, "idKey", void 0), e([a({ type: String })], c.prototype, "titleKey", void 0), e([a({ type: String })], c.prototype, "subtitleKey", void 0), e([a({ type: String })], c.prototype, "previewUrlKey", void 0), e([a({ type: Boolean })], c.prototype, "useOrbs", void 0), e([a({ type: String })], c.prototype, "colorKey", void 0), e([s()], c.prototype, "_searchQuery", void 0), e([s()], c.prototype, "_previewingVoiceId", void 0), e([o("md-menu")], c.prototype, "_menuEl", void 0), e([o("audio")], c.prototype, "_audioEl", void 0), c = e([i("ui-voice-picker")], c);
 export { c as UiVoicePicker };

package/dist/components/molecules/ui-voice-pill.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 "../atoms/ui-speech-record-button.js";
 import "../atoms/ui-speech-cancel-button.js";
 import "../atoms/ui-voice-waveform.js";
@@ -110,8 +110,8 @@ var l = class extends n {
     `;
 	}
 };
-t([c({
-	context: e,
+e([c({
+	context: t,
 	subscribe: !0
-})], l.prototype, "_context", void 0), t([o({ type: String })], l.prototype, "label", void 0), t([o({ type: Boolean })], l.prototype, "disabled", void 0), t([s()], l.prototype, "_showFeedback", void 0), t([s()], l.prototype, "_feedbackType", void 0), l = t([a("ui-voice-pill")], l);
+})], l.prototype, "_context", void 0), e([o({ type: String })], l.prototype, "label", void 0), e([o({ type: Boolean })], l.prototype, "disabled", void 0), e([s()], l.prototype, "_showFeedback", void 0), e([s()], l.prototype, "_feedbackType", void 0), l = e([a("ui-voice-pill")], l);
 export { l as UiVoicePill };

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

@@ -1,6 +1,8 @@
-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";
+import { __decorate as e } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
+import { applyCanvasEdgeFade as t, computeAudioPeaks as n } from "../../utils/audio-utils.js";
+import { layoutWithLines as r, prepareWithSegments as i } from "../../node_modules/@chenglou/pretext/dist/layout.js";
+import { LitElement as a, css as o, html as s } from "lit";
+import { customElement as c, property as l, query as u, state as d } from "lit/decorators.js";
 /**
 * Copyright 2026 Google LLC
 *
@@ -16,17 +18,12 @@ import { customElement as i, property as a, query as o } from "lit/decorators.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.data = [], this.barWidth = 4, this.barHeight = 4, this.barGap = 2, this.barRadius = 2, this.align = "center", this.fadeEdges = !0, this.fadeWidth = 24;
+var f = class extends a {
+	constructor(...e) {
+		super(...e), this.data = [], this.barWidth = 4, this.barHeight = 4, this.barGap = 2, this.barRadius = 2, this.align = "center", this.fadeEdges = !0, this.fadeWidth = 24, this.overlayFont = "14px Inter, sans-serif", this.overlayColor = "#ffffff", this._computedPeaks = null, this._preparedOverlayText = null;
 	}
 	static {
-		this.styles = n`
+		this.styles = o`
     :host {
       display: block;
       width: 100%;
@@ -48,7 +45,7 @@ var s = function(e, t, n, r) {
   `;
 	}
 	render() {
-		return r`
+		return s`
       <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>
@@ -59,37 +56,50 @@ var s = function(e, t, n, r) {
 			this._handleResize();
 		}), this._resizeObserver.observe(this._container);
 	}
-	updated(e) {
-		super.updated(e), (e.has("data") || e.has("peaks") || e.has("barColor") || e.has("align")) && this._renderWaveform();
+	async updated(e) {
+		super.updated(e);
+		let t = !1;
+		if ((e.has("overlayText") || e.has("overlayFont")) && (this.overlayText ? this._preparedOverlayText = i(this.overlayText, this.overlayFont, { whiteSpace: "pre-wrap" }) : this._preparedOverlayText = null, t = !0), e.has("src") && this.src) {
+			this._computedPeaks = null, this._renderWaveform();
+			try {
+				let e = this._container?.getBoundingClientRect().width || 800, t = Math.max(10, Math.floor(e / (this.barWidth + this.barGap)));
+				this._computedPeaks = await n(this.src, t);
+			} catch (e) {
+				console.error("Failed to compute audio peaks for src:", this.src, e);
+			}
+		}
+		(t || e.has("data") || e.has("peaks") || e.has("src") || e.has("barColor") || e.has("align") || e.has("_computedPeaks") || e.has("overlayColor")) && 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());
+		this._renderWaveform();
 	}
 	_renderWaveform() {
-		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;
-		if (!i) {
-			let e = r.getPropertyValue("--md-sys-color-primary").trim(), t = r.getPropertyValue("color").trim();
-			i = e || t || "#0066cc";
+		if (!this._canvas || !this._container) return;
+		let e = this._container.getBoundingClientRect();
+		if (e.width === 0 || e.height === 0) return;
+		let n = window.devicePixelRatio || 1, i = Math.round(e.width * n), a = Math.round(e.height * n), o = this._canvas.getContext("2d");
+		if (!o) return;
+		this._canvas.width !== i || this._canvas.height !== a ? (this._canvas.width = i, this._canvas.height = a, this._canvas.style.width = `${e.width}px`, this._canvas.style.height = `${e.height}px`, o.scale(n, n)) : o.clearRect(0, 0, e.width, e.height);
+		let s = getComputedStyle(this), c = this.barColor;
+		if (!c) {
+			let e = s.getPropertyValue("--md-sys-color-primary").trim(), t = s.getPropertyValue("color").trim();
+			c = e || t || "#0066cc";
+		}
+		let l = Math.floor(e.width / (this.barWidth + this.barGap)), u = e.height / 2, d = l * (this.barWidth + this.barGap) - this.barGap, f = Math.max(0, (e.width - d) / 2), p = this.peaks && this.peaks.length > 0 ? this.peaks : this._computedPeaks && this._computedPeaks.length > 0 ? this._computedPeaks : this.data;
+		for (let t = 0; t < l; t++) {
+			let n = p[p.length > 0 ? Math.floor(t / l * p.length) : 0] || .1, r = Math.max(this.barHeight, n * e.height * .8), i = f + t * (this.barWidth + this.barGap), a = u - r / 2;
+			this.align === "bottom" ? a = e.height - r : this.align === "top" && (a = 0), o.fillStyle = c, o.globalAlpha = .6 + n * .4, this.barRadius > 0 ? (o.beginPath(), o.roundRect(i, a, this.barWidth, r, this.barRadius), o.fill()) : o.fillRect(i, a, this.barWidth, r);
 		}
-		let a = Math.floor(n.width / (this.barWidth + this.barGap)), o = n.height / 2;
-		for (let e = 0; e < a; e++) {
-			let r = this.peaks && this.peaks.length > 0 ? this.peaks : this.data, s = r[r.length > 0 ? Math.floor(e / a * r.length) : 0] || 0, c = Math.max(this.barHeight, s * n.height * .8), l = e * (this.barWidth + this.barGap), u = o - c / 2;
-			t.fillStyle = i, t.globalAlpha = .6 + s * .4, this.barRadius > 0 ? (t.beginPath(), t.roundRect(l, u, this.barWidth, c, this.barRadius), t.fill()) : t.fillRect(l, u, this.barWidth, c);
+		if (o.globalAlpha = 1, this._preparedOverlayText) {
+			let t = parseInt(this.overlayFont, 10) * 1.5 || 20, { lines: n } = r(this._preparedOverlayText, e.width - 20, t);
+			o.font = this.overlayFont, o.fillStyle = this.overlayColor, o.textBaseline = "top";
+			for (let e = 0; e < n.length; e++) o.fillText(n[e].text, 10, 10 + e * t);
 		}
-		this.fadeEdges && e(t, n.width, n.height, this.fadeWidth), t.globalAlpha = 1;
+		this.fadeEdges && t(o, e.width, e.height, this.fadeWidth);
 	}
 };
-s([a({ type: Array })], c.prototype, "data", void 0), s([a({ type: Array })], c.prototype, "peaks", 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: String })], c.prototype, "align", 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([o("canvas")], c.prototype, "_canvas", void 0), s([o(".container")], c.prototype, "_container", void 0), c = s([i("ui-waveform")], c);
-export { c as UiWaveform };
+e([l({ type: String })], f.prototype, "src", void 0), e([l({ type: Array })], f.prototype, "data", void 0), e([l({ type: Array })], f.prototype, "peaks", void 0), e([l({ type: Number })], f.prototype, "barWidth", void 0), e([l({ type: Number })], f.prototype, "barHeight", void 0), e([l({ type: Number })], f.prototype, "barGap", void 0), e([l({ type: Number })], f.prototype, "barRadius", void 0), e([l({ type: String })], f.prototype, "barColor", void 0), e([l({ type: String })], f.prototype, "align", void 0), e([l({ type: Boolean })], f.prototype, "fadeEdges", void 0), e([l({ type: Number })], f.prototype, "fadeWidth", void 0), e([l()], f.prototype, "height", void 0), e([l({ type: String })], f.prototype, "overlayText", void 0), e([l({ type: String })], f.prototype, "overlayFont", void 0), e([l({ type: String })], f.prototype, "overlayColor", void 0), e([d()], f.prototype, "_computedPeaks", void 0), e([u("canvas")], f.prototype, "_canvas", void 0), e([u(".container")], f.prototype, "_container", void 0), f = e([c("ui-waveform")], f);
+export { f as UiWaveform };

package/dist/components/organisms/ui-audio-player.js

@@ -1,18 +1,14 @@
+import { __decorate as e } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
 import "../atoms/ui-audio-play-button.js";
 import "../atoms/ui-audio-progress-slider.js";
 import "../atoms/ui-audio-time-display.js";
 import "../atoms/ui-audio-player-error.js";
 import "../providers/ui-audio-provider.js";
-import { LitElement as e, css as t, html as n } from "lit";
-import { customElement as r, property as i } from "lit/decorators.js";
-var a = 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;
-}, o = class extends e {
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+var o = class extends t {
 	static {
-		this.styles = t`
+		this.styles = n`
     :host {
       display: inline-block;
       width: 100%;
@@ -42,7 +38,7 @@ var a = function(e, t, n, r) {
   `;
 	}
 	render() {
-		return n`
+		return r`
       <ui-audio-provider .src="${this.item?.src || ""}">
         <div class="player-pill" part="container">
           <!-- Atomic Play/Pause Button -->
@@ -65,5 +61,5 @@ var a = function(e, t, n, r) {
     `;
 	}
 };
-a([i({ type: Object })], o.prototype, "item", void 0), o = a([r("ui-audio-player")], o);
+e([a({ type: Object })], o.prototype, "item", void 0), o = e([i("ui-audio-player")], o);
 export { o as UiAudioPlayer };