@ghchinoy/lit-audio-ui 0.4.18 → 0.4.19

package/AGENT_SKILL.md

@@ -83,3 +83,7 @@ Do not forget to inject the Material Symbols font into the host document's `<hea
 - **Transparent Progress Overlays:** The `<ui-audio-progress-slider>` exposes its internal Material slider via `part="slider"`. This allows you to create "Producer Bar" layouts by setting `--md-slider-inactive-track-color: transparent` and layering it directly over a `<ui-waveform>`.
 - **Waveform Alignment:** Use `align="bottom"` on static or scrolling waveforms to draw bars upwards from the bottom of the container, rather than the default vertically-centered mirrored style.
 
+
+### 11. Interactive UX (v0.4.19+)
+- **Hover Timestamps:** To give users precision seeking capabilities, add `hoverTimestamp="true"` to `<ui-audio-progress-slider>`. This will automatically render a floating `MM:SS` tooltip above the cursor based on the context's total duration.
+

package/custom-elements.json

@@ -636,6 +636,29 @@
             }
           ],
           "description": "Creates an edge-fade gradient over a canvas to smoothly blend the left and right edges."
+        },
+        {
+          "kind": "function",
+          "name": "formatAudioTime",
+          "return": {
+            "type": {
+              "text": "string"
+            }
+          },
+          "parameters": [
+            {
+              "name": "seconds",
+              "type": {
+                "text": "number"
+              },
+              "description": "The time in seconds"
+            },
+            {
+              "description": "If true, omits leading zeros for minutes if under an hour.",
+              "name": "compact"
+            }
+          ],
+          "description": "Formats a duration in seconds into a standard MM:SS or HH:MM:SS string."
         }
       ],
       "exports": [
@@ -678,6 +701,14 @@
             "name": "applyCanvasEdgeFade",
             "module": "src/utils/audio-utils.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "formatAudioTime",
+          "declaration": {
+            "name": "formatAudioTime",
+            "module": "src/utils/audio-utils.ts"
+          }
         }
       ]
     },
@@ -928,16 +959,72 @@
               "privacy": "private",
               "default": "0"
             },
+            {
+              "kind": "field",
+              "name": "hoverTimestamp",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_hoverX",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "_showHover",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_hoverTime",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "_sliderEl",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :host { display: flex; width: 100%; align-items: center; min-width: 0; } md-slider { width: 100%; min-width: 0; flex: 1; /* Give the slider track better contrast against backgrounds */ --md-slider-inactive-track-color: var(--md-sys-color-outline, #79747e); } `"
+              "default": "css` :host { display: flex; width: 100%; align-items: center; min-width: 0; position: relative; } .hover-tooltip { position: absolute; top: -32px; transform: translateX(-50%); background: var(--md-sys-color-inverse-surface, #313033); color: var(--md-sys-color-inverse-on-surface, #f4eff4); padding: 4px 8px; border-radius: 4px; font-size: 12px; font-family: inherit; font-variant-numeric: tabular-nums; pointer-events: none; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.1s ease; z-index: 100; } .hover-tooltip.show { opacity: 1; visibility: visible; } /* Little downward pointing triangle */ .hover-tooltip::after { content: ''; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); border-width: 4px 4px 0; border-style: solid; border-color: var(--md-sys-color-inverse-surface, #313033) transparent transparent transparent; } md-slider { width: 100%; min-width: 0; flex: 1; /* Give the slider track better contrast against backgrounds */ --md-slider-inactive-track-color: var(--md-sys-color-outline, #79747e); } `"
             },
             {
               "kind": "method",
               "name": "render"
             },
+            {
+              "kind": "method",
+              "name": "_handleMouseMove",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "_handleInput",
@@ -1654,6 +1741,51 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/organisms/ui-audio-player.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A monolithic backward-compatibility wrapper that renders the classic ElevenLabs\npill-shaped audio player. Internally, it relies completely on the new\ncompound <ui-audio-provider> architecture.",
+          "name": "UiAudioPlayer",
+          "members": [
+            {
+              "kind": "field",
+              "name": "item",
+              "type": {
+                "text": "AudioPlayerItem | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "styles",
+              "static": true,
+              "default": "css` :host { display: inline-block; width: 100%; max-width: 400px; } .player-pill { display: flex; align-items: center; gap: var(--ui-audio-player-gap, 16px); padding: var(--ui-audio-player-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; } `"
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UiAudioPlayer",
+          "declaration": {
+            "name": "UiAudioPlayer",
+            "module": "src/components/organisms/ui-audio-player.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/providers/ui-audio-provider.ts",
@@ -1881,7 +2013,16 @@
             {
               "kind": "method",
               "name": "_handleError",
-              "privacy": "private"
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "optional": true,
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
@@ -2141,51 +2282,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/organisms/ui-audio-player.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A monolithic backward-compatibility wrapper that renders the classic ElevenLabs\npill-shaped audio player. Internally, it relies completely on the new\ncompound <ui-audio-provider> architecture.",
-          "name": "UiAudioPlayer",
-          "members": [
-            {
-              "kind": "field",
-              "name": "item",
-              "type": {
-                "text": "AudioPlayerItem | undefined"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "styles",
-              "static": true,
-              "default": "css` :host { display: inline-block; width: 100%; max-width: 400px; } .player-pill { display: flex; align-items: center; gap: var(--ui-audio-player-gap, 16px); padding: var(--ui-audio-player-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; } `"
-            },
-            {
-              "kind": "method",
-              "name": "render"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UiAudioPlayer",
-          "declaration": {
-            "name": "UiAudioPlayer",
-            "module": "src/components/organisms/ui-audio-player.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/components/molecules/scream-voice-button.ts",

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

@@ -1,24 +1,62 @@
 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 { formatAudioTime 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, state as c } from "lit/decorators.js";
+import { consume as l } from "@lit/context";
 import "@material/web/slider/slider.js";
-var s = function(e, t, n, r) {
+var u = 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 {
+}, d = class extends n {
 	constructor() {
-		super(...arguments), this._isDragging = !1, this._dragValue = 0;
+		super(...arguments), this._isDragging = !1, this._dragValue = 0, this.hoverTimestamp = !1, this._hoverX = 0, this._showHover = !1, this._hoverTime = 0;
 	}
 	static {
-		this.styles = n`
+		this.styles = r`
+    
+
     :host {
       display: flex;
       width: 100%;
       align-items: center;
       min-width: 0;
+      position: relative;
+    }
+
+    .hover-tooltip {
+      position: absolute;
+      top: -32px;
+      transform: translateX(-50%);
+      background: var(--md-sys-color-inverse-surface, #313033);
+      color: var(--md-sys-color-inverse-on-surface, #f4eff4);
+      padding: 4px 8px;
+      border-radius: 4px;
+      font-size: 12px;
+      font-family: inherit;
+      font-variant-numeric: tabular-nums;
+      pointer-events: none;
+      white-space: nowrap;
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 0.1s ease;
+      z-index: 100;
+    }
+    .hover-tooltip.show {
+      opacity: 1;
+      visibility: visible;
+    }
+    /* Little downward pointing triangle */
+    .hover-tooltip::after {
+      content: '';
+      position: absolute;
+      bottom: -4px;
+      left: 50%;
+      transform: translateX(-50%);
+      border-width: 4px 4px 0;
+      border-style: solid;
+      border-color: var(--md-sys-color-inverse-surface, #313033) transparent transparent transparent;
     }
 
     md-slider {
@@ -31,21 +69,41 @@ var s = function(e, t, n, r) {
   `;
 	}
 	render() {
-		let e = this.playerState?.duration || 0, t = e === 0 || !this.playerState?.src, n = this._isDragging ? this._dragValue : this.playerState?.currentTime || 0;
-		return r`
-      <md-slider
+		let e = this.playerState?.duration || 0, n = e === 0 || !this.playerState?.src, r = this._isDragging ? this._dragValue : this.playerState?.currentTime || 0;
+		return i`
+      <div 
+        style="position: relative; width: 100%; display: flex; align-items: center;"
+        @mousemove="${this._handleMouseMove}"
+        @mouseenter="${() => this._showHover = !0}"
+        @mouseleave="${() => this._showHover = !1}"
+      >
+        ${this.hoverTimestamp && this.playerState?.src ? i`
+          <div 
+            class="hover-tooltip ${this._showHover ? "show" : ""}" 
+            style="left: ${this._hoverX}px;"
+          >
+            ${t(this._hoverTime)}
+          </div>
+        ` : ""}
+        <md-slider
         part="slider"
         aria-label="Playback progress"
         min="0"
         max="${e || 100}"
-        value="${n}"
+        value="${r}"
         step="0.1"
-        ?disabled="${t}"
+        ?disabled="${n}"
         @input="${this._handleInput}"
         @change="${this._handleChange}"
-      ></md-slider>
+        ></md-slider>
+      </div>
     `;
 	}
+	_handleMouseMove(e) {
+		if (!this.hoverTimestamp || !this._sliderEl || !this.playerState?.duration) return;
+		let t = e.currentTarget.getBoundingClientRect(), n = e.clientX - t.left;
+		n = Math.max(0, Math.min(n, t.width)), this._hoverX = n, this._hoverTime = n / t.width * this.playerState.duration;
+	}
 	_handleInput(e) {
 		this._isDragging = !0, this._dragValue = e.target.value;
 	}
@@ -53,8 +111,8 @@ var s = function(e, t, n, r) {
 		this._dragValue = e.target.value, this.playerState && this.playerState.seek(this._dragValue), this._isDragging = !1;
 	}
 };
-s([o({
+u([l({
 	context: e,
 	subscribe: !0
-}), a({ attribute: !1 })], c.prototype, "playerState", void 0), c = s([i("ui-audio-progress-slider")], c);
-export { c as UiAudioProgressSlider };
+}), o({ attribute: !1 })], d.prototype, "playerState", void 0), u([o({ type: Boolean })], d.prototype, "hoverTimestamp", void 0), u([c()], d.prototype, "_hoverX", void 0), u([c()], d.prototype, "_showHover", void 0), u([c()], d.prototype, "_hoverTime", void 0), u([s("md-slider")], d.prototype, "_sliderEl", void 0), d = u([a("ui-audio-progress-slider")], d);
+export { d as UiAudioProgressSlider };

package/dist/components/atoms/ui-audio-time-display.js

@@ -1,11 +1,16 @@
 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 { formatAudioTime 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 } from "lit/decorators.js";
 import { consume as s } from "@lit/context";
-var c = class extends n {
-	constructor(...e) {
-		super(...e), this.format = "combined", this.separator = " / ", this.compact = !1;
+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.format = "combined", this.separator = " / ", this.compact = !1;
 	}
 	static {
 		this.styles = r`
@@ -27,13 +32,11 @@ var c = class extends n {
 		} else return i`${this._formatTime(e)}${this.separator}${t ? this._formatTime(t) : "--:--"}`;
 	}
 	_formatTime(e) {
-		if (!e || isNaN(e)) return this.compact, "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" : "") : this.compact, i += "" + n + ":" + (r < 10 ? "0" : ""), i += "" + r, i;
+		return t(e);
 	}
 };
-t([s({
+c([s({
 	context: e,
 	subscribe: !0
-}), o({ attribute: !1 })], c.prototype, "playerState", void 0), t([o({ type: String })], c.prototype, "format", void 0), t([o({ type: String })], c.prototype, "separator", void 0), t([o({ type: Boolean })], c.prototype, "compact", void 0), c = t([a("ui-audio-time-display")], c);
-export { c as UiAudioTimeDisplay };
+}), o({ attribute: !1 })], l.prototype, "playerState", void 0), c([o({ type: String })], l.prototype, "format", void 0), c([o({ type: String })], l.prototype, "separator", void 0), c([o({ type: Boolean })], l.prototype, "compact", void 0), l = c([a("ui-audio-time-display")], l);
+export { l as UiAudioTimeDisplay };

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

@@ -1,16 +1,20 @@
-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";
+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";
 /**
 * Copyright 2026 Google LLC
 */
-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.height = 64, this.sensitivity = 1, this.updateRate = 30, this._animationFrameId = 0, this._lastUpdateTime = 0, this._currentBars = [], this._processingTime = 0, this._transitionProgress = 0, this._lastActiveData = [];
+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.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 = i`
+		this.styles = r`
     :host {
       display: block;
       width: 100%;
@@ -30,7 +34,7 @@ var l = class extends r {
   `;
 	}
 	render() {
-		return a`
+		return i`
       <div class="container" style="height: ${this.height}px;">
         <canvas></canvas>
       </div>
@@ -67,11 +71,11 @@ var l = class extends r {
 	}
 	_updateData(e) {
 		if (!this._canvas) return;
-		let t = this._canvas.getBoundingClientRect(), r = Math.floor(t.width / (this.barWidth + this.barGap));
+		let n = this._canvas.getBoundingClientRect(), r = Math.floor(n.width / (this.barWidth + this.barGap));
 		if (this.active && this.analyserNode && this._dataArray) {
 			if (e - this._lastUpdateTime > this.updateRate) {
 				this._lastUpdateTime = e;
-				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;
+				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;
 				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);
@@ -100,10 +104,10 @@ var l = class extends r {
 	}
 	_renderFrame() {
 		if (!this._canvas) return;
-		let e = this._canvas.getContext("2d");
-		if (!e) return;
+		let t = this._canvas.getContext("2d");
+		if (!t) return;
 		let n = this._canvas.getBoundingClientRect();
-		e.clearRect(0, 0, n.width, n.height);
+		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();
@@ -114,12 +118,12 @@ var l = class extends r {
 		}
 		(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 t = 0; t < o && t < this._currentBars.length; t++) {
-			let r = this._currentBars[t] || .05, o = t * a, c = Math.max(this.barHeight, r * n.height * .8), l = s - c / 2;
-			e.fillStyle = i, e.globalAlpha = .6 + r * .4, this.barRadius > 0 ? (e.beginPath(), e.roundRect(o, l, this.barWidth, c, this.barRadius), e.fill()) : e.fillRect(o, l, this.barWidth, c);
+		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);
 		}
-		this.fadeEdges && t(e, n.width, n.height, this.fadeWidth), e.globalAlpha = 1;
+		this.fadeEdges && e(t, n.width, n.height, this.fadeWidth), t.globalAlpha = 1;
 	}
 };
-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({ type: Number })], 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);
+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({ type: Number })], 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);
 export { l as UiLiveWaveform };

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

@@ -1,9 +1,8 @@
 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 { 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";
+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";
 /**
 * Copyright 2026 Google LLC
 *
@@ -19,12 +18,17 @@ import { consume as l } from "@lit/context";
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-var u = class extends r {
-	constructor(...e) {
-		super(...e), this.barWidth = 4, this.barGap = 2, this.height = 100, this._animationFrameId = 0;
+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.height = 100, this._animationFrameId = 0;
 	}
 	static {
-		this.styles = i`
+		this.styles = r`
     :host {
       display: block;
       width: 100%;
@@ -38,7 +42,7 @@ var u = class extends r {
   `;
 	}
 	render() {
-		return a`<canvas style="height: ${this.height}px;"></canvas>`;
+		return i`<canvas style="height: ${this.height}px;"></canvas>`;
 	}
 	firstUpdated() {
 		this._startLoop();
@@ -56,20 +60,20 @@ var u = class extends r {
 		if (!this._canvas || !this.playerState?.analyserNode) return;
 		let e = this.playerState.analyserNode;
 		this._dataArray ||= new Uint8Array(e.frequencyBinCount);
-		let t = this._canvas.getContext("2d");
-		if (!t) return;
+		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, t.scale(i, i)), t.clearRect(0, 0, r.width, r.height);
-		let a = n(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", t.fillStyle = l;
+		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 n = (a[Math.floor(e / s * (a.length * .6))] || 0) * r.height, i = e * o, c = r.height - n;
-			t.fillRect(i, c, this.barWidth, n);
+			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);
 		}
 	}
 };
-t([l({
+l([c({
 	context: e,
 	subscribe: !0
-})], 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({ type: Number })], 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);
+})], 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({ type: Number })], 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);
 export { u as UiSpectrumVisualizer };

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

@@ -1,14 +1,18 @@
-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 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 {
+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 {
 	static {
-		this.styles = n`
+		this.styles = t`
     :host {
       display: inline-block;
       width: 100%;
@@ -38,7 +42,7 @@ var o = class extends t {
   `;
 	}
 	render() {
-		return r`
+		return n`
       <ui-audio-provider .src="${this.item?.src || ""}">
         <div class="player-pill" part="container">
           <!-- Atomic Play/Pause Button -->
@@ -61,5 +65,5 @@ var o = class extends t {
     `;
 	}
 };
-e([a({ type: Object })], o.prototype, "item", void 0), o = e([i("ui-audio-player")], o);
+a([i({ type: Object })], o.prototype, "item", void 0), o = a([r("ui-audio-player")], o);
 export { o as UiAudioPlayer };