@ghchinoy/lit-audio-ui 0.3.5 → 0.4.1

package/AGENT_SKILL.md

@@ -0,0 +1,50 @@
+# Agent Skill: Lit Audio UI Integration
+
+A specialized skill for AI agents to autonomously implement high-performance audio visualizations and controls using the `@ghchinoy/lit-audio-ui` library.
+
+## Capabilities
+- Orchestrate complex audio playback using a headless provider.
+- Implement real-time 2D and 3D audio visualizations (Orb, Waveforms, Spectrum).
+- Construct accessible, theme-aware audio interfaces.
+- Manage multi-track playlists with automatic state synchronization.
+
+## Protocol: The "Lit Way"
+
+### 1. Bootstrapping the Provider
+Always wrap atomic components in a `<ui-audio-provider>` (for playback) or `<ui-speech-provider>` (for recording). These components manage the state machine and shared context.
+
+### 2. Playlist & State Synchronization
+When using `<ui-audio-provider>` with the `items` property:
+- Listen to the `@state-change` event on the provider.
+- Use `e.detail.currentIndex` to synchronize your parent component's metadata (e.g., Title, Artist, Album Art).
+- The provider handles internal track advancing automatically when `autoAdvance` is true.
+
+### 3. Visualizer "Bridge" Logic
+Most visual components (`ui-orb`, `ui-spectrum-visualizer`, `ui-live-waveform`) require an `analyserNode`. 
+- They attempt to consume this from context automatically.
+- **Tip:** Ensure the provider has finished initializing its AudioContext (triggered by the first user interaction) before expecting visualizations to appear.
+
+### 4. Theming & Branding (Zero-JS)
+The library uses Material Design 3 tokens with semantic overrides. Use these for dark-theme consistency:
+- `--md-sys-color-primary`: Main theme color (e.g., `#d0bcff`).
+- `--md-sys-color-surface-container-low`: Primary background for pickers and lists.
+- `--ui-speech-wave-color`: Custom color for waveforms inside buttons (prevents 'black-on-black' issues).
+- `--md-list-item-label-text-color`: high-contrast text color for playlists.
+
+### 5. Layout & 3D Environments
+If a component is inside a 3D transformed container (perspective/translateZ):
+- Ensure `md-menu` (inside pickers) uses `positioning="popover"`.
+- Use the `<ui-3d-flip>` utility for compact "back-of-card" tracklists.
+- Apply `font-family: inherit` to library components to avoid default serif fonts.
+
+### 6. Component Utility Registry
+- `<ui-audio-time-display>`: Defaults to `full` mode (`current / total`). Use `format="elapsed"` or `format="remaining"` for single values.
+- `<ui-spectrum-visualizer>`: Requires a `.height` property for reliable rendering.
+
+## Simulation Mode
+For development without microphone access, enable the `simulation` property on `<ui-speech-provider>`. This generates procedural audio data and mock transcription events.
+
+## Quality Gates
+- Ensure `crossorigin="anonymous"` is set on audio/video tags to allow analysis.
+- Use `color-scheme: light dark;` on host elements to support native dark-mode sensitivity.
+- Verify that `manual` mode handlers clear intervals/timeouts during state transitions.

package/dist/components/atoms/ui-audio-next-button.js

@@ -0,0 +1,46 @@
+import { c as e } from "../../node_modules/@lit/context/lib/decorators/consume.js";
+import { audioPlayerContext as t } from "../../utils/audio-context.js";
+import { __decorate as n } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
+import "@material/web/icon/icon.js";
+import { LitElement as r, css as i, html as a } from "lit";
+import { customElement as o } from "lit/decorators.js";
+import "@material/web/iconbutton/icon-button.js";
+/**
+* Copyright 2026 Google LLC
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+var s = class extends r {
+	static {
+		this.styles = i`
+    :host {
+      display: inline-block;
+    }
+  `;
+	}
+	render() {
+		return a`
+      <md-icon-button
+        ?disabled=${!(this.playerState && this.playerState.items.length > 0 && (this.playerState.currentIndex < this.playerState.items.length - 1 || this.playerState.autoAdvance))}
+        @click=${() => this.playerState?.next()}
+      >
+        <md-icon>skip_next</md-icon>
+      </md-icon-button>
+    `;
+	}
+};
+n([e({
+	context: t,
+	subscribe: !0
+})], s.prototype, "playerState", void 0), s = n([o("ui-audio-next-button")], s);
+export { s as UiAudioNextButton };

package/dist/components/{ui-audio-play-button.js → atoms/ui-audio-play-button.js}

@@ -1,9 +1,9 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
-import { c as t } from "../node_modules/@lit/context/lib/decorators/consume.js";
-import { audioPlayerContext as n } from "../utils/audio-context.js";
+import { c as e } from "../../node_modules/@lit/context/lib/decorators/consume.js";
+import { audioPlayerContext as t } from "../../utils/audio-context.js";
+import { __decorate as n } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
+import "@material/web/icon/icon.js";
 import { LitElement as r, css as i, html as a } from "lit";
 import { customElement as o, property as s } from "lit/decorators.js";
-import "@material/web/icon/icon.js";
 import "@material/web/iconbutton/filled-icon-button.js";
 import "@material/web/progress/circular-progress.js";
 var c = class extends r {
@@ -77,8 +77,8 @@ var c = class extends r {
 		this.playerState && this.playerState.togglePlay();
 	}
 };
-e([t({
-	context: n,
+n([e({
+	context: t,
 	subscribe: !0
-}), s({ attribute: !1 })], c.prototype, "playerState", void 0), c = e([o("ui-audio-play-button")], c);
+}), s({ attribute: !1 })], c.prototype, "playerState", void 0), c = n([o("ui-audio-play-button")], c);
 export { c as UiAudioPlayButton };

package/dist/components/atoms/ui-audio-prev-button.js

@@ -0,0 +1,46 @@
+import { c as e } from "../../node_modules/@lit/context/lib/decorators/consume.js";
+import { audioPlayerContext as t } from "../../utils/audio-context.js";
+import { __decorate as n } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
+import "@material/web/icon/icon.js";
+import { LitElement as r, css as i, html as a } from "lit";
+import { customElement as o } from "lit/decorators.js";
+import "@material/web/iconbutton/icon-button.js";
+/**
+* Copyright 2026 Google LLC
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+var s = class extends r {
+	static {
+		this.styles = i`
+    :host {
+      display: inline-block;
+    }
+  `;
+	}
+	render() {
+		return a`
+      <md-icon-button
+        ?disabled=${!(this.playerState && this.playerState.items.length > 0 && (this.playerState.currentIndex > 0 || this.playerState.autoAdvance))}
+        @click=${() => this.playerState?.previous()}
+      >
+        <md-icon>skip_previous</md-icon>
+      </md-icon-button>
+    `;
+	}
+};
+n([e({
+	context: t,
+	subscribe: !0
+})], s.prototype, "playerState", void 0), s = n([o("ui-audio-prev-button")], s);
+export { s as UiAudioPrevButton };

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

@@ -1,6 +1,6 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
-import { c as t } from "../node_modules/@lit/context/lib/decorators/consume.js";
-import { audioPlayerContext as n } from "../utils/audio-context.js";
+import { c as e } from "../../node_modules/@lit/context/lib/decorators/consume.js";
+import { audioPlayerContext as t } from "../../utils/audio-context.js";
+import { __decorate as n } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
 import { LitElement as r, css as i, html as a } from "lit";
 import { customElement as o, property as s } from "lit/decorators.js";
 import "@material/web/slider/slider.js";
@@ -45,8 +45,8 @@ var c = class extends r {
 		this._dragValue = e.target.value, this.playerState && this.playerState.seek(this._dragValue), this._isDragging = !1;
 	}
 };
-e([t({
-	context: n,
+n([e({
+	context: t,
 	subscribe: !0
-}), s({ attribute: !1 })], c.prototype, "playerState", void 0), c = e([o("ui-audio-progress-slider")], c);
+}), s({ attribute: !1 })], c.prototype, "playerState", void 0), c = n([o("ui-audio-progress-slider")], c);
 export { c as UiAudioProgressSlider };

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

@@ -1,11 +1,11 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
-import { c as t } from "../node_modules/@lit/context/lib/decorators/consume.js";
-import { audioPlayerContext as n } from "../utils/audio-context.js";
+import { c as e } from "../../node_modules/@lit/context/lib/decorators/consume.js";
+import { audioPlayerContext as t } from "../../utils/audio-context.js";
+import { __decorate as n } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
 import { LitElement as r, css as i, html as a } from "lit";
 import { customElement as o, property as s } from "lit/decorators.js";
 var c = class extends r {
 	constructor(...e) {
-		super(...e), this.format = "full";
+		super(...e), this.format = "combined", this.separator = " / ", this.compact = !1;
 	}
 	static {
 		this.styles = i`
@@ -24,17 +24,16 @@ var c = class extends r {
 		if (this.format === "remaining") {
 			let n = Math.max(0, t - e);
 			return a`-${this._formatTime(n)}`;
-		} else return a`${this._formatTime(e)} /
-      ${t ? this._formatTime(t) : "--:--"}`;
+		} else return a`${this._formatTime(e)}${this.separator}${t ? this._formatTime(t) : "--:--"}`;
 	}
 	_formatTime(e) {
-		if (!e || isNaN(e)) return "0:00";
+		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" : "")), i += "" + n + ":" + (r < 10 ? "0" : ""), i += "" + r, i;
+		return t > 0 ? i += "" + t + ":" + (n < 10 ? "0" : "") : this.compact, i += "" + n + ":" + (r < 10 ? "0" : ""), i += "" + r, i;
 	}
 };
-e([t({
-	context: n,
+n([e({
+	context: t,
 	subscribe: !0
-}), s({ attribute: !1 })], c.prototype, "playerState", void 0), e([s({ type: String })], c.prototype, "format", void 0), c = e([o("ui-audio-time-display")], c);
+}), s({ attribute: !1 })], c.prototype, "playerState", void 0), n([s({ type: String })], c.prototype, "format", void 0), n([s({ type: String })], c.prototype, "separator", void 0), n([s({ type: Boolean })], c.prototype, "compact", void 0), c = n([o("ui-audio-time-display")], c);
 export { c as UiAudioTimeDisplay };

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

@@ -1,11 +1,11 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
-import { c as t } from "../node_modules/@lit/context/lib/decorators/consume.js";
-import { audioPlayerContext as n } from "../utils/audio-context.js";
+import { c as e } from "../../node_modules/@lit/context/lib/decorators/consume.js";
+import { audioPlayerContext as t } from "../../utils/audio-context.js";
+import { __decorate as n } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
+import "@material/web/icon/icon.js";
 import { LitElement as r, css as i, html as a } from "lit";
 import { customElement as o, property as s } from "lit/decorators.js";
-import "@material/web/icon/icon.js";
-import "@material/web/slider/slider.js";
 import "@material/web/iconbutton/icon-button.js";
+import "@material/web/slider/slider.js";
 var c = class extends r {
 	static {
 		this.styles = i`
@@ -57,8 +57,8 @@ var c = class extends r {
 		this.playerState && this.playerState.toggleMute();
 	}
 };
-e([t({
-	context: n,
+n([e({
+	context: t,
 	subscribe: !0
-}), s({ attribute: !1 })], c.prototype, "playerState", void 0), c = e([o("ui-audio-volume-slider")], c);
+}), s({ attribute: !1 })], c.prototype, "playerState", void 0), c = n([o("ui-audio-volume-slider")], c);
 export { c as UiAudioVolumeSlider };

package/dist/components/{ui-shimmering-text.js → atoms/ui-shimmering-text.js}

@@ -1,4 +1,4 @@
-import { __decorate as e } 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 { 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";
 var s = class extends t {

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

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

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

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

package/dist/components/{scream-voice-button.js → molecules/scream-voice-button.js}

@@ -1,8 +1,8 @@
-import { __decorate as e } 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 "@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 "@material/web/button/filled-button.js";
-import "@material/web/icon/icon.js";
 /**
 * Copyright 2026 Google LLC
 *

package/dist/components/molecules/ui-3d-flip.js

@@ -0,0 +1,126 @@
+import { __decorate as e } 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";
+/**
+* Copyright 2026 Google LLC
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.flipped = !1, this.axis = "y", this.duration = "0.6s";
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: block;
+      perspective: 1000px;
+      width: 100%;
+      height: 100%;
+    }
+
+    .flip-container {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      text-align: center;
+      transition: transform var(--ui-3d-flip-duration, 0.6s);
+      transform-style: preserve-3d;
+    }
+
+    :host([flipped]) .flip-container {
+      transform: rotateY(180deg);
+    }
+
+    :host([flipped][axis='x']) .flip-container {
+      transform: rotateX(180deg);
+    }
+
+    .front,
+    .back {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      backface-visibility: hidden;
+      -webkit-backface-visibility: hidden;
+      display: flex;
+      flex-direction: column;
+      border-radius: inherit;
+      overflow: hidden;
+    }
+
+    .back {
+      transform: rotateY(180deg);
+      background: var(--md-sys-color-surface, #ffffff);
+    }
+
+    :host([axis='x']) .back {
+      transform: rotateX(180deg);
+    }
+
+    /* Slot for optional trigger icon */
+    .flip-trigger {
+      position: absolute;
+      top: 12px;
+      right: 12px;
+      z-index: 10;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  `;
+	}
+	render() {
+		return r`
+      <div
+        class="flip-container"
+        style="--ui-3d-flip-duration: ${this.duration}"
+      >
+        <div class="front">
+          <slot name="front"></slot>
+          <div class="flip-trigger" @click=${this.toggle}>
+            <slot name="flip-icon">
+              <!-- Default info icon if nothing provided -->
+              <md-icon style="color: white; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));">info</md-icon>
+            </slot>
+          </div>
+        </div>
+        <div class="back">
+          <slot name="back"></slot>
+          <div class="flip-trigger" @click=${this.toggle}>
+            <slot name="flip-icon-back">
+              <md-icon style="color: var(--md-sys-color-primary);">close</md-icon>
+            </slot>
+          </div>
+        </div>
+      </div>
+    `;
+	}
+	toggle() {
+		this.flipped = !this.flipped, this.dispatchEvent(new CustomEvent("flip-change", {
+			detail: { flipped: this.flipped },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+};
+e([a({
+	type: Boolean,
+	reflect: !0
+})], o.prototype, "flipped", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "axis", void 0), e([a({ type: String })], o.prototype, "duration", void 0), o = e([i("ui-3d-flip")], o);
+export { o as Ui3dFlip };

package/dist/components/{ui-live-waveform.js → molecules/ui-live-waveform.js}

@@ -1,5 +1,5 @@
-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 { __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";
 /**

package/dist/components/{ui-mic-selector.js → molecules/ui-mic-selector.js}

@@ -1,8 +1,8 @@
-import { __decorate as e } 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 "./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, query as o, state as s } from "lit/decorators.js";
-import "@material/web/icon/icon.js";
 import "@material/web/menu/menu.js";
 import "@material/web/menu/menu-item.js";
 import "@material/web/divider/divider.js";

package/dist/components/{ui-orb.js → molecules/ui-orb.js}

@@ -1,4 +1,4 @@
-import { __decorate as e } 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 { 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 * as s from "three";
@@ -32,7 +32,12 @@ var c = class extends t {
 		this._initThree();
 	}
 	updated(e) {
-		e.has("colors") && this._updateColors();
+		e.has("colors") && this._updateColors(), e.has("seed") && this._updateSeed();
+	}
+	_updateSeed() {
+		if (!this._mesh) return;
+		let e = this._splitmix32(this.seed), t = new Float32Array(Array.from({ length: 7 }, () => e() * Math.PI * 2));
+		this._mesh.material.uniforms.uOffsets.value = t;
 	}
 	_updateColors() {
 		if (!(!this._targetColor1 || !this._targetColor2)) if (this.colors && this.colors.length === 2) this._targetColor1.set(this.colors[0]), this._targetColor2.set(this.colors[1]);

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

@@ -0,0 +1,109 @@
+import { c as e } from "../../node_modules/@lit/context/lib/decorators/consume.js";
+import { audioPlayerContext as t } from "../../utils/audio-context.js";
+import { __decorate as n } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
+import "@material/web/icon/icon.js";
+import { LitElement as r, css as i, html as a } from "lit";
+import { customElement as o, property as s } from "lit/decorators.js";
+import "@material/web/list/list.js";
+import "@material/web/list/list-item.js";
+/**
+* Copyright 2026 Google LLC
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+var c = class extends r {
+	constructor(...e) {
+		super(...e), this.header = "Queue", this.emptyText = "No tracks in queue";
+	}
+	static {
+		this.styles = i`
+    :host {
+      display: block;
+      background: var(--md-sys-color-surface-container-low, transparent);
+      border-radius: 12px;
+      overflow: hidden;
+      font-family: inherit;
+      color-scheme: light dark;
+    }
+
+    .playlist-header {
+      padding: 16px 20px;
+      font-size: 0.75rem;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--md-sys-color-primary, #0066cc);
+      background: var(--md-sys-color-surface-container-low);
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    }
+
+    md-list {
+      background: transparent;
+      --md-list-container-color: transparent;
+    }
+
+    md-list-item {
+      --md-list-item-label-text-font: inherit;
+      --md-list-item-supporting-text-font: inherit;
+      --md-list-item-label-text-color: var(--md-sys-color-on-surface);
+      --md-list-item-supporting-text-color: var(--md-sys-color-on-surface-variant);
+      cursor: pointer;
+    }
+
+    md-list-item[selected] {
+      --md-list-item-label-text-color: var(--md-sys-color-primary);
+      background: var(--md-sys-color-primary-container);
+    }
+
+    .now-playing-icon {
+      color: var(--md-sys-color-primary);
+      font-size: 18px;
+    }
+
+    .empty-state {
+      padding: 32px;
+      text-align: center;
+      color: var(--md-sys-color-on-surface-variant);
+      font-size: 0.9rem;
+    }
+  `;
+	}
+	render() {
+		let e = this.playerState?.items || [], t = this.playerState?.currentIndex ?? -1;
+		return a`
+      <div class="playlist-header">${this.header}</div>
+
+      ${e.length === 0 ? a`<div class="empty-state">${this.emptyText}</div>` : a`
+            <md-list>
+              ${e.map((e, n) => a`
+                  <md-list-item
+                    ?selected=${n === t}
+                    @click=${() => this.playerState?.select(n)}
+                  >
+                    <div slot="headline">${e.title || "Untitled Track"}</div>
+                    <div slot="supporting-text">${e.artist || "Unknown Artist"}</div>
+                    ${n === t ? a`<md-icon slot="start" class="now-playing-icon"
+                          >${this.playerState?.isPlaying ? "graphic_eq" : "play_arrow"}</md-icon
+                        >` : a`<md-icon slot="start">music_note</md-icon>`}
+                  </md-list-item>
+                `)}
+            </md-list>
+          `}
+    `;
+	}
+};
+n([e({
+	context: t,
+	subscribe: !0
+})], c.prototype, "playerState", void 0), n([s({ type: String })], c.prototype, "header", void 0), n([s({ type: String })], c.prototype, "emptyText", void 0), c = n([o("ui-playlist")], c);
+export { c as UiPlaylist };

package/dist/components/{ui-scrolling-waveform.js → molecules/ui-scrolling-waveform.js}

@@ -1,5 +1,5 @@
-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 { __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 {

package/dist/components/{ui-showcase-card.js → molecules/ui-showcase-card.js}

@@ -1,4 +1,4 @@
-import { __decorate as e } 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 { LitElement as t, css as n, html as r } from "lit";
 import { customElement as i, property as a } from "lit/decorators.js";
 import "@material/web/button/text-button.js";