@ghchinoy/lit-audio-ui 0.4.0 → 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/{ui-audio-next-button.js → atoms/ui-audio-next-button.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 "@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";
@@ -39,8 +39,8 @@ var s = class extends r {
     `;
 	}
 };
-e([t({
-	context: n,
+n([e({
+	context: t,
 	subscribe: !0
-})], s.prototype, "playerState", void 0), s = e([o("ui-audio-next-button")], s);
+})], 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,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 "@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";
@@ -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/{ui-audio-prev-button.js → atoms/ui-audio-prev-button.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 "@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";
@@ -39,8 +39,8 @@ var s = class extends r {
     `;
 	}
 };
-e([t({
-	context: n,
+n([e({
+	context: t,
 	subscribe: !0
-})], s.prototype, "playerState", void 0), s = e([o("ui-audio-prev-button")], s);
+})], 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,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";
 var c = class extends r {
@@ -32,8 +32,8 @@ var c = class extends r {
 		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), e([s({ type: String })], c.prototype, "separator", void 0), e([s({ type: Boolean })], c.prototype, "compact", 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/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,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 { 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";
@@ -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,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 { 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";
@@ -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,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 "@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";

package/dist/components/{ui-3d-flip.js → molecules/ui-3d-flip.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 "@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";

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,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 "./ui-live-waveform.js";
 import "@material/web/icon/icon.js";
 import { LitElement as t, css as n, html as r } from "lit";

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";

package/dist/components/{ui-playlist.js → molecules/ui-playlist.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 "@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";
@@ -42,7 +42,8 @@ var c = class extends r {
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 0.05em;
-      color: var(--md-sys-color-primary);
+      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);
     }
 
@@ -54,12 +55,14 @@ var c = class extends r {
     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, rgba(0, 102, 204, 0.1));
+      background: var(--md-sys-color-primary-container);
     }
 
     .now-playing-icon {
@@ -99,8 +102,8 @@ var c = class extends r {
     `;
 	}
 };
-e([t({
-	context: n,
+n([e({
+	context: t,
 	subscribe: !0
-})], c.prototype, "playerState", void 0), e([s({ type: String })], c.prototype, "header", void 0), e([s({ type: String })], c.prototype, "emptyText", void 0), c = e([o("ui-playlist")], c);
+})], 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";

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

@@ -1,7 +1,7 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
-import { getNormalizedFrequencyData as t } from "../utils/audio-utils.js";
-import { c as n } from "../node_modules/@lit/context/lib/decorators/consume.js";
-import { audioPlayerContext as r } 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 { getNormalizedFrequencyData as r } from "../../utils/audio-utils.js";
 import { LitElement as i, css as a, html as o } from "lit";
 import { customElement as s, property as c, query as l } from "lit/decorators.js";
 /**
@@ -56,20 +56,20 @@ var u = class extends i {
 		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;
+		let t = this._canvas.getContext("2d");
+		if (!t) return;
+		let n = this._canvas.getBoundingClientRect(), i = window.devicePixelRatio || 1;
+		this._canvas.width !== n.width * i && (this._canvas.width = n.width * i, this._canvas.height = n.height * i, t.scale(i, i)), t.clearRect(0, 0, n.width, n.height);
+		let a = r(e, this._dataArray), o = this.barWidth + this.barGap, s = Math.floor(n.width / o), c = getComputedStyle(this), l = this.color;
+		l ||= c.getPropertyValue("--md-sys-color-primary").trim() || "#0066cc", t.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 r = (a[Math.floor(e / s * (a.length * .6))] || 0) * n.height, i = e * o, c = n.height - r;
+			t.fillRect(i, c, this.barWidth, r);
 		}
 	}
 };
-e([n({
-	context: r,
+n([e({
+	context: t,
 	subscribe: !0
-})], u.prototype, "playerState", void 0), e([c({ type: Number })], u.prototype, "barWidth", void 0), e([c({ type: Number })], u.prototype, "barGap", void 0), e([c({ type: Number })], u.prototype, "height", void 0), e([c({ type: String })], u.prototype, "color", void 0), e([l("canvas")], u.prototype, "_canvas", void 0), u = e([s("ui-spectrum-visualizer")], u);
+})], u.prototype, "playerState", void 0), n([c({ type: Number })], u.prototype, "barWidth", void 0), n([c({ type: Number })], u.prototype, "barGap", void 0), n([c({ type: Number })], u.prototype, "height", void 0), n([c({ type: String })], u.prototype, "color", void 0), n([l("canvas")], u.prototype, "_canvas", void 0), u = n([s("ui-spectrum-visualizer")], u);
 export { u as UiSpectrumVisualizer };

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

@@ -1,7 +1,7 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.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 "./ui-live-waveform.js";
-import { c as t } from "../node_modules/@lit/context/lib/decorators/consume.js";
-import { speechContext as n } from "../utils/speech-context.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 {
@@ -74,8 +74,8 @@ var c = class extends r {
     `;
 	}
 };
-e([t({
+t([e({
 	context: n,
 	subscribe: !0
-})], c.prototype, "_context", void 0), e([s({ type: String })], c.prototype, "placeholder", void 0), c = e([o("ui-speech-preview")], c);
+})], c.prototype, "_context", void 0), t([s({ type: String })], c.prototype, "placeholder", void 0), c = t([o("ui-speech-preview")], c);
 export { c as UiSpeechPreview };

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

@@ -1,11 +1,11 @@
-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, state as o } from "lit/decorators.js";
-import "@material/web/button/filled-button.js";
-import { classMap as s } from "lit/directives/class-map.js";
 import "@material/web/button/outlined-button.js";
+import { classMap as s } from "lit/directives/class-map.js";
+import "@material/web/button/filled-button.js";
 /**
 * Copyright 2026 Google LLC
 *

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

@@ -1,11 +1,11 @@
-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/button/outlined-button.js";
 import "@material/web/menu/menu.js";
 import "@material/web/menu/menu-item.js";
+import "@material/web/button/outlined-button.js";
 import "@material/web/textfield/outlined-text-field.js";
 /**
 * Copyright 2026 Google LLC

package/dist/components/{ui-waveform.js → molecules/ui-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";
 /**

package/dist/components/{ui-audio-player.js → organisms/ui-audio-player.js}

@@ -1,8 +1,8 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
-import "./ui-audio-provider.js";
-import "./ui-audio-play-button.js";
-import "./ui-audio-progress-slider.js";
-import "./ui-audio-time-display.js";
+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 "../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 {

package/dist/components/{ui-audio-provider.js → providers/ui-audio-provider.js}

@@ -1,6 +1,6 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
-import { e as t } from "../node_modules/@lit/context/lib/decorators/provide.js";
-import { audioPlayerContext as n } from "../utils/audio-context.js";
+import { e } from "../../node_modules/@lit/context/lib/decorators/provide.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, query as c, state as l } from "lit/decorators.js";
 var u = class extends r {
@@ -162,5 +162,5 @@ var u = class extends r {
 		this._animationFrameId = requestAnimationFrame(e);
 	}
 };
-e([s({ type: String })], u.prototype, "src", void 0), e([s({ type: Array })], u.prototype, "items", void 0), e([s({ type: Boolean })], u.prototype, "autoAdvance", void 0), e([c("audio")], u.prototype, "_audioEl", void 0), e([t({ context: n }), l()], u.prototype, "state", void 0), u = e([o("ui-audio-provider")], u);
+n([s({ type: String })], u.prototype, "src", void 0), n([s({ type: Array })], u.prototype, "items", void 0), n([s({ type: Boolean })], u.prototype, "autoAdvance", void 0), n([c("audio")], u.prototype, "_audioEl", void 0), n([e({ context: t }), l()], u.prototype, "state", void 0), u = n([o("ui-audio-provider")], u);
 export { u as UiAudioProvider };

package/dist/components/{ui-speech-provider.js → providers/ui-speech-provider.js}

@@ -1,7 +1,7 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
-import { createMockAnalyser as t } from "../utils/audio-utils.js";
-import { e as n } from "../node_modules/@lit/context/lib/decorators/provide.js";
-import { speechContext as r } from "../utils/speech-context.js";
+import { e } from "../../node_modules/@lit/context/lib/decorators/provide.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 { createMockAnalyser as r } from "../../utils/audio-utils.js";
 import { LitElement as i, css as a, html as o } from "lit";
 import { customElement as s, property as c, state as l } from "lit/decorators.js";
 var u = class extends i {
@@ -45,7 +45,7 @@ var u = class extends i {
 				return;
 			}
 			try {
-				if (this._updateContext({ state: "connecting" }), this.simulation) this._analyser = t();
+				if (this._updateContext({ state: "connecting" }), this.simulation) this._analyser = r();
 				else {
 					this._stream = await navigator.mediaDevices.getUserMedia({ audio: !0 }), this._audioCtx ||= new (window.AudioContext || window.webkitAudioContext)();
 					let e = this._audioCtx.createMediaStreamSource(this._stream);
@@ -128,5 +128,5 @@ var u = class extends i {
 		return o`<slot></slot>`;
 	}
 };
-e([n({ context: r }), l()], u.prototype, "_context", void 0), e([c({ type: String })], u.prototype, "state", void 0), e([c({ type: Boolean })], u.prototype, "simulation", void 0), e([c({ type: Boolean })], u.prototype, "manual", void 0), e([c({ type: String })], u.prototype, "transcript", void 0), e([c({ type: String })], u.prototype, "partialTranscript", void 0), u = e([s("ui-speech-provider")], u);
+t([e({ context: n }), l()], u.prototype, "_context", void 0), t([c({ type: String })], u.prototype, "state", void 0), t([c({ type: Boolean })], u.prototype, "simulation", void 0), t([c({ type: Boolean })], u.prototype, "manual", void 0), t([c({ type: String })], u.prototype, "transcript", void 0), t([c({ type: String })], u.prototype, "partialTranscript", void 0), u = t([s("ui-speech-provider")], u);
 export { u as UiSpeechProvider };

package/dist/index.js

@@ -1,30 +1,30 @@
-import { ScreamVoiceButton as e } from "./components/scream-voice-button.js";
-import { applyCanvasEdgeFade as t, createAudioAnalyser as n, createMockAnalyser as r, generateRandomAudioData as i, getNormalizedFrequencyData as a } from "./utils/audio-utils.js";
-import { UiLiveWaveform as o } from "./components/ui-live-waveform.js";
-import { UiVoiceButton as s } from "./components/ui-voice-button.js";
-import { UiWaveform as c } from "./components/ui-waveform.js";
-import { audioPlayerContext as l } from "./utils/audio-context.js";
-import { UiSpectrumVisualizer as u } from "./components/ui-spectrum-visualizer.js";
-import { UiAudioProvider as d } from "./components/ui-audio-provider.js";
-import { UiAudioPlayButton as f } from "./components/ui-audio-play-button.js";
-import { UiAudioProgressSlider as p } from "./components/ui-audio-progress-slider.js";
-import { UiAudioTimeDisplay as m } from "./components/ui-audio-time-display.js";
-import { UiAudioPlayer as h } from "./components/ui-audio-player.js";
-import { UiMicSelector as g } from "./components/ui-mic-selector.js";
-import { UiVoicePicker as _ } from "./components/ui-voice-picker.js";
-import { UiScrollingWaveform as v } from "./components/ui-scrolling-waveform.js";
-import { UiShowcaseCard as y } from "./components/ui-showcase-card.js";
-import { UiShimmeringText as b } from "./components/ui-shimmering-text.js";
-import { Ui3dFlip as x } from "./components/ui-3d-flip.js";
-import { UiPlaylist as S } from "./components/ui-playlist.js";
-import { UiAudioNextButton as C } from "./components/ui-audio-next-button.js";
-import { UiAudioPrevButton as w } from "./components/ui-audio-prev-button.js";
-import { speechContext as T } from "./utils/speech-context.js";
-import { UiSpeechProvider as E } from "./components/ui-speech-provider.js";
-import { UiSpeechRecordButton as D } from "./components/ui-speech-record-button.js";
-import { UiSpeechCancelButton as O } from "./components/ui-speech-cancel-button.js";
-import { UiSpeechPreview as k } from "./components/ui-speech-preview.js";
-import { UiAudioVolumeSlider as A } from "./components/ui-audio-volume-slider.js";
-import { UiOrb as j } from "./components/ui-orb.js";
+import { audioPlayerContext as e } from "./utils/audio-context.js";
+import { UiAudioPlayButton as t } from "./components/atoms/ui-audio-play-button.js";
+import { UiAudioNextButton as n } from "./components/atoms/ui-audio-next-button.js";
+import { UiAudioPrevButton as r } from "./components/atoms/ui-audio-prev-button.js";
+import { UiAudioProgressSlider as i } from "./components/atoms/ui-audio-progress-slider.js";
+import { UiAudioTimeDisplay as a } from "./components/atoms/ui-audio-time-display.js";
+import { UiAudioVolumeSlider as o } from "./components/atoms/ui-audio-volume-slider.js";
+import { speechContext as s } from "./utils/speech-context.js";
+import { UiSpeechRecordButton as c } from "./components/atoms/ui-speech-record-button.js";
+import { UiSpeechCancelButton as l } from "./components/atoms/ui-speech-cancel-button.js";
+import { UiShimmeringText as u } from "./components/atoms/ui-shimmering-text.js";
+import { applyCanvasEdgeFade as d, createAudioAnalyser as f, createMockAnalyser as p, generateRandomAudioData as m, getNormalizedFrequencyData as h } from "./utils/audio-utils.js";
+import { UiWaveform as g } from "./components/molecules/ui-waveform.js";
+import { UiLiveWaveform as _ } from "./components/molecules/ui-live-waveform.js";
+import { UiScrollingWaveform as v } from "./components/molecules/ui-scrolling-waveform.js";
+import { UiSpectrumVisualizer as y } from "./components/molecules/ui-spectrum-visualizer.js";
+import { UiMicSelector as b } from "./components/molecules/ui-mic-selector.js";
+import { UiVoicePicker as x } from "./components/molecules/ui-voice-picker.js";
+import { UiSpeechPreview as S } from "./components/molecules/ui-speech-preview.js";
+import { UiOrb as C } from "./components/molecules/ui-orb.js";
+import { Ui3dFlip as w } from "./components/molecules/ui-3d-flip.js";
+import { UiPlaylist as T } from "./components/molecules/ui-playlist.js";
+import { UiShowcaseCard as E } from "./components/molecules/ui-showcase-card.js";
+import { UiVoiceButton as D } from "./components/molecules/ui-voice-button.js";
+import { ScreamVoiceButton as O } from "./components/molecules/scream-voice-button.js";
+import { UiAudioProvider as k } from "./components/providers/ui-audio-provider.js";
+import { UiAudioPlayer as A } from "./components/organisms/ui-audio-player.js";
+import { UiSpeechProvider as j } from "./components/providers/ui-speech-provider.js";
 import "@material/web/icon/icon.js";
-export { e as ScreamVoiceButton, x as Ui3dFlip, C as UiAudioNextButton, f as UiAudioPlayButton, h as UiAudioPlayer, w as UiAudioPrevButton, p as UiAudioProgressSlider, d as UiAudioProvider, m as UiAudioTimeDisplay, A as UiAudioVolumeSlider, o as UiLiveWaveform, g as UiMicSelector, j as UiOrb, S as UiPlaylist, v as UiScrollingWaveform, b as UiShimmeringText, y as UiShowcaseCard, u as UiSpectrumVisualizer, O as UiSpeechCancelButton, k as UiSpeechPreview, E as UiSpeechProvider, D as UiSpeechRecordButton, s as UiVoiceButton, _ as UiVoicePicker, c as UiWaveform, t as applyCanvasEdgeFade, l as audioPlayerContext, n as createAudioAnalyser, r as createMockAnalyser, i as generateRandomAudioData, a as getNormalizedFrequencyData, T as speechContext };
+export { O as ScreamVoiceButton, w as Ui3dFlip, n as UiAudioNextButton, t as UiAudioPlayButton, A as UiAudioPlayer, r as UiAudioPrevButton, i as UiAudioProgressSlider, k as UiAudioProvider, a as UiAudioTimeDisplay, o as UiAudioVolumeSlider, _ as UiLiveWaveform, b as UiMicSelector, C as UiOrb, T as UiPlaylist, v as UiScrollingWaveform, u as UiShimmeringText, E as UiShowcaseCard, y as UiSpectrumVisualizer, l as UiSpeechCancelButton, S as UiSpeechPreview, j as UiSpeechProvider, c as UiSpeechRecordButton, D as UiVoiceButton, x as UiVoicePicker, g as UiWaveform, d as applyCanvasEdgeFade, e as audioPlayerContext, f as createAudioAnalyser, p as createMockAnalyser, m as generateRandomAudioData, h as getNormalizedFrequencyData, s as speechContext };