@ghchinoy/lit-audio-ui 0.1.1 → 0.2.0

package/README.md

@@ -87,6 +87,7 @@ The library currently ships with the following native WebComponents:
 *   ✨ **`<ui-shimmering-text>`**: A pure CSS, dependency-free text loading effect translating complex gradients into native `@keyframes`.
 *   🎛️ **`<ui-mic-selector>`**: Handles hardware microphone enumeration (`navigator.mediaDevices`), permissions, and displays a live audio preview directly inside a dropdown menu.
 *   🎭 **`<ui-voice-picker>`**: A searchable dropdown menu (combobox) that handles rendering complex persona objects, including real-time audio previews injected directly into the menu items.
+*   🗣️ **Atomic Speech Architecture**: Use `<ui-speech-provider>`, `<ui-speech-record-button>`, `<ui-speech-preview>`, and `<ui-speech-cancel-button>` to build custom recording UIs (like the Smart Textarea) with built-in state management and visualization.
 
 
 ## How to Build & Extend (For Developers)

package/dist/_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js

@@ -0,0 +1,7 @@
+function e(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;
+}
+export { e as __decorate };

package/dist/components/scream-voice-button.js

@@ -0,0 +1,64 @@
+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/filled-button.js";
+import "@material/web/icon/icon.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.state = "idle";
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: inline-block;
+    }
+
+    md-filled-button {
+      --md-filled-button-container-shape: 999px;
+    }
+
+    md-filled-button.recording {
+      --md-filled-button-container-color: var(--md-sys-color-error, #ba1a1a);
+      --md-filled-button-label-text-color: var(
+        --md-sys-color-on-error,
+        #ffffff
+      );
+    }
+  `;
+	}
+	render() {
+		return r`
+      <md-filled-button class="${this.state}" @click="${this._handleClick}">
+        <md-icon slot="icon">
+          ${this.state === "recording" ? "stop" : "mic"}
+        </md-icon>
+
+        ${this.state === "recording" ? "Recording..." : "Speak"}
+      </md-filled-button>
+    `;
+	}
+	_handleClick() {
+		this.state = this.state === "idle" ? "recording" : "idle", this.dispatchEvent(new CustomEvent("voice-toggle", {
+			bubbles: !0,
+			composed: !0,
+			detail: { state: this.state }
+		}));
+	}
+};
+e([a({ type: String })], o.prototype, "state", void 0), o = e([i("scream-voice-button")], o);
+export { o as ScreamVoiceButton };

package/dist/components/ui-audio-play-button.js

@@ -0,0 +1,84 @@
+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 { 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 {
+	static {
+		this.styles = i`
+    :host {
+      display: inline-flex;
+      position: relative;
+      align-items: center;
+      justify-content: center;
+      font-family: inherit;
+    }
+
+    md-filled-icon-button {
+      --md-filled-icon-button-container-color: var(
+        --md-sys-color-primary,
+        #0066cc
+      );
+      --md-filled-icon-button-icon-color: var(
+        --md-sys-color-on-primary,
+        #ffffff
+      );
+      --md-filled-icon-button-hover-icon-color: var(
+        --md-sys-color-on-primary,
+        #ffffff
+      );
+      --md-filled-icon-button-focus-icon-color: var(
+        --md-sys-color-on-primary,
+        #ffffff
+      );
+      --md-filled-icon-button-pressed-icon-color: var(
+        --md-sys-color-on-primary,
+        #ffffff
+      );
+
+      --md-filled-icon-button-toggle-icon-color: var(
+        --md-sys-color-on-primary,
+        #ffffff
+      );
+      --md-filled-icon-button-selected-container-color: var(
+        --md-sys-color-primary,
+        #0066cc
+      );
+      --md-filled-icon-button-selected-icon-color: var(
+        --md-sys-color-on-primary,
+        #ffffff
+      );
+      color: var(--md-sys-color-on-primary, #ffffff);
+    }
+
+    md-circular-progress {
+      position: absolute;
+      --md-circular-progress-size: 48px;
+    }
+  `;
+	}
+	render() {
+		let e = this.playerState?.isPlaying ?? !1, t = this.playerState?.isBuffering ?? !1;
+		return a`
+      <md-filled-icon-button
+        part="button"
+        @click="${this._handleClick}"
+        ?disabled="${!this.playerState?.src}"
+      >
+        <md-icon>${e ? "pause" : "play_arrow"}</md-icon>
+      </md-filled-icon-button>
+      ${t && e ? a`<md-circular-progress indeterminate></md-circular-progress>` : ""}
+    `;
+	}
+	_handleClick() {
+		this.playerState && this.playerState.togglePlay();
+	}
+};
+e([t({
+	context: n,
+	subscribe: !0
+}), s({ attribute: !1 })], c.prototype, "playerState", void 0), c = e([o("ui-audio-play-button")], c);
+export { c as UiAudioPlayButton };

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

@@ -0,0 +1,61 @@
+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 { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+var o = class extends t {
+	static {
+		this.styles = n`
+    :host {
+      display: inline-block;
+      width: 100%;
+      max-width: 400px;
+    }
+
+    .player-pill {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      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;
+    }
+  `;
+	}
+	render() {
+		return r`
+      <ui-audio-provider .src="${this.item?.src || ""}">
+        <div class="player-pill" part="container">
+          <!-- Atomic Play/Pause Button -->
+          <ui-audio-play-button></ui-audio-play-button>
+
+          <!-- Atomic Time Display (Full format: 0:00 / 0:00) -->
+          <div class="time-container">
+            <ui-audio-time-display format="full"></ui-audio-time-display>
+          </div>
+
+          <!-- Atomic Slider -->
+          <div class="slider-container">
+            <ui-audio-progress-slider></ui-audio-progress-slider>
+          </div>
+        </div>
+      </ui-audio-provider>
+    `;
+	}
+};
+e([a({ type: Object })], o.prototype, "item", void 0), o = e([i("ui-audio-player")], o);
+export { o as UiAudioPlayer };

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

@@ -0,0 +1,52 @@
+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 { 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";
+var c = class extends r {
+	constructor(...e) {
+		super(...e), this._isDragging = !1, this._dragValue = 0;
+	}
+	static {
+		this.styles = i`
+    :host {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      min-width: 100px;
+    }
+
+    md-slider {
+      width: 100%;
+      /* Give the slider track better contrast against backgrounds */
+      --md-slider-inactive-track-color: var(--md-sys-color-outline, #79747e);
+    }
+  `;
+	}
+	render() {
+		let e = this.playerState?.duration || 0, t = e === 0 || !this.playerState?.src, n = this._isDragging ? this._dragValue : this.playerState?.currentTime || 0;
+		return a`
+      <md-slider
+        min="0"
+        max="${e || 100}"
+        value="${n}"
+        step="0.1"
+        ?disabled="${t}"
+        @input="${this._handleInput}"
+        @change="${this._handleChange}"
+      ></md-slider>
+    `;
+	}
+	_handleInput(e) {
+		this._isDragging = !0, this._dragValue = e.target.value;
+	}
+	_handleChange(e) {
+		this._dragValue = e.target.value, this.playerState && this.playerState.seek(this._dragValue), this._isDragging = !1;
+	}
+};
+e([t({
+	context: n,
+	subscribe: !0
+}), s({ attribute: !1 })], c.prototype, "playerState", void 0), c = e([o("ui-audio-progress-slider")], c);
+export { c as UiAudioProgressSlider };

package/dist/components/ui-audio-provider.js

@@ -0,0 +1,140 @@
+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 { 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 {
+	constructor(...e) {
+		super(...e), this.src = "", this._animationFrameId = 0, this.state = {
+			src: "",
+			isPlaying: !1,
+			isBuffering: !1,
+			currentTime: 0,
+			duration: 0,
+			volume: 1,
+			muted: !1,
+			analyserNode: void 0,
+			play: () => this.play(),
+			pause: () => this.pause(),
+			togglePlay: () => this._togglePlay(),
+			seek: (e) => this._seek(e),
+			setVolume: (e) => this._setVolume(e),
+			toggleMute: () => this._toggleMute()
+		};
+	}
+	static {
+		this.styles = i`
+    :host {
+      display: contents; /* We are completely invisible, just wrapping children */
+    }
+    audio {
+      display: none;
+    }
+  `;
+	}
+	render() {
+		return a`
+      <audio
+        crossorigin="anonymous"
+        src="${this.src}"
+        preload="metadata"
+        @loadedmetadata="${this._handleLoadedMetadata}"
+        @ended="${this._handleEnded}"
+        @playing="${this._handlePlaying}"
+        @pause="${this._handlePause}"
+        @waiting="${() => this._updateState({ isBuffering: !0 })}"
+        @canplay="${() => this._updateState({ isBuffering: !1 })}"
+        @error="${this._handleError}"
+      ></audio>
+      <slot></slot>
+    `;
+	}
+	willUpdate(e) {
+		e.has("src") && this._updateState({
+			src: this.src,
+			isPlaying: !1,
+			currentTime: 0,
+			error: void 0
+		});
+	}
+	updated(e) {
+		e.has("src") && this._audioEl && this._audioEl.load();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._animationFrameId && cancelAnimationFrame(this._animationFrameId), this._audioContext && this._audioContext.state !== "closed" && this._audioContext.close();
+	}
+	_updateState(e) {
+		this.state = {
+			...this.state,
+			...e
+		}, this.dispatchEvent(new CustomEvent("state-change", {
+			detail: this.state,
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_setupAudioContext() {
+		if (!(this._audioContext || !this._audioEl)) try {
+			this._audioContext = new (window.AudioContext || window.webkitAudioContext)(), this._analyserNode = this._audioContext.createAnalyser(), this._analyserNode.fftSize = 256, this._analyserNode.smoothingTimeConstant = .8, this._mediaSource = this._audioContext.createMediaElementSource(this._audioEl), this._mediaSource.connect(this._analyserNode), this._analyserNode.connect(this._audioContext.destination), this._updateState({ analyserNode: this._analyserNode });
+		} catch (e) {
+			console.warn("Failed to set up AudioContext for visualizer:", e);
+		}
+	}
+	play() {
+		this._audioEl.src && (this._setupAudioContext(), this._audioContext?.state === "suspended" && this._audioContext.resume(), this._audioEl.play().catch((e) => {
+			console.error("Error playing audio", e), this._updateState({ error: "Playback failed" });
+		}));
+	}
+	pause() {
+		this._audioEl && this._audioEl.pause();
+	}
+	_togglePlay() {
+		this.state.isPlaying ? this.pause() : this.play();
+	}
+	_seek(e) {
+		this._audioEl && (this._audioEl.currentTime = e, this._updateState({ currentTime: e }));
+	}
+	_setVolume(e) {
+		this._audioEl && (this._audioEl.volume = e, this._updateState({
+			volume: e,
+			muted: e === 0
+		}));
+	}
+	_toggleMute() {
+		this._audioEl && (this._audioEl.muted = !this._audioEl.muted, this._updateState({ muted: this._audioEl.muted }));
+	}
+	_handleLoadedMetadata() {
+		this._updateState({ duration: this._audioEl.duration });
+	}
+	_handleEnded() {
+		this._updateState({
+			isPlaying: !1,
+			currentTime: 0
+		}), this._audioEl.currentTime = 0;
+	}
+	_handlePlaying() {
+		this._updateState({
+			isPlaying: !0,
+			isBuffering: !1,
+			error: void 0
+		}), this._startTrackingTime();
+	}
+	_handlePause() {
+		this._updateState({ isPlaying: !1 }), this._animationFrameId && cancelAnimationFrame(this._animationFrameId);
+	}
+	_handleError() {
+		this._updateState({
+			error: "Error loading audio",
+			isPlaying: !1,
+			isBuffering: !1
+		});
+	}
+	_startTrackingTime() {
+		let e = () => {
+			this._audioEl && this.state.isPlaying && (Math.abs(this.state.currentTime - this._audioEl.currentTime) > .05 && this._updateState({ currentTime: this._audioEl.currentTime }), this._animationFrameId = requestAnimationFrame(e));
+		};
+		this._animationFrameId = requestAnimationFrame(e);
+	}
+};
+e([s({ type: String })], u.prototype, "src", 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);
+export { u as UiAudioProvider };

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

@@ -0,0 +1,40 @@
+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 { 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";
+	}
+	static {
+		this.styles = i`
+    :host {
+      display: inline-block;
+      font-variant-numeric: tabular-nums;
+      font-size: 14px;
+      color: var(--md-sys-color-on-surface-variant, #444);
+      font-family: inherit;
+    }
+  `;
+	}
+	render() {
+		let e = this.playerState?.currentTime || 0, t = this.playerState?.duration || 0;
+		if (this.format === "elapsed") return a`${this._formatTime(e)}`;
+		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) : "--:--"}`;
+	}
+	_formatTime(e) {
+		if (!e || isNaN(e)) return "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;
+	}
+};
+e([t({
+	context: n,
+	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);
+export { c as UiAudioTimeDisplay };

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

@@ -0,0 +1,64 @@
+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 { 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";
+var c = class extends r {
+	static {
+		this.styles = i`
+    :host {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    md-slider {
+      flex: 1;
+      min-width: 0; /* Prevent flex overflow */
+      width: 100%;
+      --md-slider-inactive-track-color: var(
+        --md-sys-color-outline-variant,
+        #c4c7c5
+      );
+    }
+
+    md-icon-button {
+      color: var(--md-sys-color-on-surface-variant, #444);
+    }
+  `;
+	}
+	render() {
+		let e = this.playerState?.volume ?? 1, t = this.playerState?.muted ?? !1, n = "volume_up";
+		return t || e === 0 ? n = "volume_off" : e < .5 && (n = "volume_down"), a`
+      <md-icon-button @click="${this._toggleMute}" part="button">
+        <md-icon>${n}</md-icon>
+      </md-icon-button>
+      <md-slider
+        part="slider"
+        min="0"
+        max="1"
+        value="${t ? 0 : e}"
+        step="0.01"
+        ?disabled="${!this.playerState?.src}"
+        @input="${this._handleInput}"
+      ></md-slider>
+    `;
+	}
+	_handleInput(e) {
+		let t = e.target;
+		this.playerState && this.playerState.setVolume(t.value);
+	}
+	_toggleMute() {
+		this.playerState && this.playerState.toggleMute();
+	}
+};
+e([t({
+	context: n,
+	subscribe: !0
+}), s({ attribute: !1 })], c.prototype, "playerState", void 0), c = e([o("ui-audio-volume-slider")], c);
+export { c as UiAudioVolumeSlider };

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

@@ -0,0 +1,128 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
+import { applyCanvasEdgeFade as t, getNormalizedFrequencyData as n } from "../utils/audio-utils.js";
+import { LitElement as r, css as i, html as a } from "lit";
+import { customElement as o, property as s, query as c } from "lit/decorators.js";
+/**
+* Copyright 2026 Google LLC
+*
+* 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 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 = [];
+	}
+	static {
+		this.styles = i`
+    :host {
+      display: block;
+      width: 100%;
+    }
+    .container {
+      position: relative;
+      width: 100%;
+    }
+    canvas {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: block;
+      height: 100%;
+      width: 100%;
+    }
+  `;
+	}
+	render() {
+		return a`
+      <div class="container" style="height: ${this.height}px;">
+        <canvas></canvas>
+      </div>
+    `;
+	}
+	firstUpdated() {
+		this._resizeObserver = new ResizeObserver(() => {
+			this._handleResize();
+		}), this._resizeObserver.observe(this._container), this._startAnimationLoop();
+	}
+	updated(e) {
+		super.updated(e), e.has("analyserNode") && this.analyserNode && (this._dataArray = new Uint8Array(this.analyserNode.frequencyBinCount)), e.has("processing") && this.processing && !this.active && (this._processingTime = 0, this._transitionProgress = 0);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._resizeObserver && this._resizeObserver.disconnect(), this._animationFrameId && cancelAnimationFrame(this._animationFrameId);
+	}
+	_handleResize() {
+		if (!this._canvas || !this._container) return;
+		let e = this._container.getBoundingClientRect(), t = window.devicePixelRatio || 1;
+		this._canvas.width = e.width * t, this._canvas.height = e.height * t, this._canvas.style.width = `${e.width}px`, this._canvas.style.height = `${e.height}px`;
+		let n = this._canvas.getContext("2d");
+		n && n.scale(t, t), this._renderFrame();
+	}
+	_startAnimationLoop() {
+		let e = (t) => {
+			this._updateData(t), this._renderFrame(), this._animationFrameId = requestAnimationFrame(e);
+		};
+		this._animationFrameId = requestAnimationFrame(e);
+	}
+	_updateData(e) {
+		if (!this._canvas) return;
+		let t = this._canvas.getBoundingClientRect(), r = Math.floor(t.width / (this.barWidth + this.barGap));
+		if (this.active && this.analyserNode && this._dataArray) {
+			if (e - this._lastUpdateTime > this.updateRate) {
+				this._lastUpdateTime = e;
+				let t = n(this.analyserNode, this._dataArray), i = Math.floor(t.length * .05), a = Math.floor(t.length * .4), o = t.slice(i, a), s = Math.floor(r / 2), c = Array(r).fill(.05), l = o.length - 1;
+				for (let e = 0; e <= s; e++) {
+					let t = e / s, n = o[Math.floor(t * l)] || 0;
+					t > .8 && (n *= 1 - (t - .8) * 5);
+					let i = Math.max(.05, Math.min(1, n * this.sensitivity)), a = s + e, u = s - e;
+					a < r && (c[a] = i), u >= 0 && (c[u] = i);
+				}
+				this._currentBars = c, this._lastActiveData = [...c];
+			}
+		} else if (this.processing && !this.active) {
+			this._processingTime += .03, this._transitionProgress = Math.min(1, this._transitionProgress + .02);
+			let e = Array(r).fill(.05), t = Math.floor(r / 2);
+			for (let n = 0; n < r; n++) {
+				let r = (n - t) / t, i = 1 - Math.abs(r) * .4, a = Math.sin(this._processingTime * 1.5 + r * 3) * .25, o = Math.sin(this._processingTime * .8 - r * 2) * .2, s = Math.cos(this._processingTime * 2 + r) * .15, c = (.2 + (a + o + s)) * i, l = c;
+				if (this._lastActiveData.length > 0 && this._transitionProgress < 1) {
+					let e = Math.min(n, this._lastActiveData.length - 1);
+					l = (this._lastActiveData[e] || 0) * (1 - this._transitionProgress) + c * this._transitionProgress;
+				}
+				e[n] = Math.max(.05, Math.min(1, l));
+			}
+			this._currentBars = e;
+		} else if (this._currentBars.length > 0) {
+			let e = !0;
+			for (let t = 0; t < this._currentBars.length; t++) this._currentBars[t] = Math.max(.05, this._currentBars[t] * .85), this._currentBars[t] > .06 && (e = !1);
+			e && (this._currentBars = []);
+		}
+	}
+	_renderFrame() {
+		if (!this._canvas) return;
+		let e = this._canvas.getContext("2d");
+		if (!e) return;
+		let n = this._canvas.getBoundingClientRect();
+		e.clearRect(0, 0, n.width, n.height);
+		let r = getComputedStyle(this), i = this.barColor;
+		if (!i) {
+			let e = r.getPropertyValue("--md-sys-color-primary").trim(), t = r.getPropertyValue("color").trim();
+			i = e || t || "#0066cc";
+		}
+		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 = .4 + r * .6, this.barRadius > 0 ? (e.beginPath(), e.roundRect(o, l, this.barWidth, c, this.barRadius), e.fill()) : e.fillRect(o, l, this.barWidth, c);
+		}
+		this.fadeEdges && t(e, n.width, n.height, this.fadeWidth), e.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);
+export { l as UiLiveWaveform };