@ghchinoy/lit-audio-ui 0.4.3 → 0.4.5

package/README.md

@@ -2,56 +2,40 @@
 
 A lightweight, framework-agnostic Web Components library for high-performance audio visualization and control, built natively for the browser using [Lit](https://lit.dev/).
 
-Take a look at the [examples and documentation](https://ghchinoy.github.io/scream-ui/) to see the components in action.
+Take a look at the [interactive gallery and documentation](https://ghchinoy.github.io/scream-ui/) to see the components in action.
 
 ## Why Lit Web Components?
 
-When building complex, high-frequency audio visualizers (like real-time canvas waveforms), performance and bundle size are critical. Traditional React/ShadcnUI libraries often bring significant overhead due to Virtual DOM reconciliation loops and heavy CSS framework dependencies (like Tailwind).
-
-By leveraging **Lit** and native Web Components, this library offers distinct advantages:
+When building complex, high-frequency audio visualizers (like real-time canvas waveforms), performance and bundle size are critical. By leveraging **Lit** and native Web Components, this library offers distinct advantages:
 
 * **Microscopic Footprint:** No massive framework runtimes. Lit simply provides lightweight, reactive syntactic sugar over standard browser APIs.
-* **Blazing Fast Canvas & Audio:** Direct DOM access means no Virtual DOM bottlenecks when piping 60fps `AnalyserNode` data directly into `<canvas>` elements.
-* **Framework Agnostic:** Because they compile to standard HTML tags (e.g., `<ui-live-waveform>`), you can drop these components into **any** frontend stack—React, Vue, Angular, Svelte, or vanilla HTML—with zero friction.
-* **Scoped Styling:** Uses standard CSS variables and Material Design 3 tokens. No Tailwind installation, complex class merging, or CSS-in-JS runtime required.
-* **Atomic Composition:** Powered by `@lit/context`, the complex monolithic audio players are broken down into atomic, highly composable state machines.
-
+* **Blazing Fast Canvas & Audio:** Direct DOM access means no Virtual DOM bottlenecks when piping 60fps data directly into `<canvas>` elements.
+* **Framework Agnostic:** Compiles to standard HTML tags. Drop these into React, Vue, Angular, Svelte, or vanilla HTML with zero friction.
+* **Atomic Design:** Organized into **Atoms, Molecules, Organisms, and Providers** for maximum reusability.
 
 ## How to Use (For AI Agents)
 
-If you are an AI coding agent integrating this library into an application, please refer to the [AGENT_SKILL.md](./AGENT_SKILL.md) for specialized integration protocols, state management patterns, and "Zero-JS" branding guidelines. This document is designed to help you autonomously implement robust audio interfaces that adhere to the library's "Lit Way" architecture.
-
-
-## How to Use the Lit Components (For Users)
-
-As a Web Components library, you can use these elements directly in your HTML or inside any frontend framework.
+If you are an AI coding agent integrating this library into an application, please refer to the [AGENT_SKILL.md](https://github.com/ghchinoy/scream-ui/blob/main/packages/lit-audio-ui/AGENT_SKILL.md) for specialized integration protocols, state management patterns, and "Zero-JS" branding guidelines.
 
+## How to Use (For Users)
 
 ### 1. Installation
-Install the package via npm:
 ```bash
 npm install @ghchinoy/lit-audio-ui
 ```
 
-### 2. Usage (CDN)
-For a zero-install experience, you can use the library directly from a CDN like [esm.run](https://esm.run/):
-```html
-<script type="module" src="https://esm.run/@ghchinoy/lit-audio-ui"></script>
-```
-
-### 3. Import the Library (Bundlers)
-Import the components into your JavaScript/TypeScript entry point:
+### 2. Import the Library
 ```javascript
 // Import the entire library
 import '@ghchinoy/lit-audio-ui';
 
-// Or import specific components
-import '@ghchinoy/lit-audio-ui/components/ui-voice-button';
-import '@ghchinoy/lit-audio-ui/components/ui-live-waveform';
+// Or import specific categories for better tree-shaking
+import '@ghchinoy/lit-audio-ui/atoms/ui-audio-play-button.js';
+import '@ghchinoy/lit-audio-ui/molecules/ui-live-waveform.js';
 ```
 
-### 4. Use in HTML
-Once imported, the custom elements are registered with the browser and can be used like standard HTML tags:
+### 3. Use in HTML
+Once imported, custom elements are registered and used like standard HTML tags:
 
 ```html
 <!-- Example: A voice recording button -->
@@ -61,98 +45,45 @@ Once imported, the custom elements are registered with the browser and can be us
 <ui-live-waveform .analyserNode="${myAudioAnalyser}"></ui-live-waveform>
 ```
 
-### 5. Theming (Material Design 3)
-These components are deeply theme-aware and utilize Material Design 3 design tokens. To customize their colors (or support light/dark modes), simply define the CSS variables in your stylesheet:
-
-```css
-:root {
-  --md-sys-color-primary: #0066cc;
-  --md-sys-color-on-primary: #ffffff;
-  --md-sys-color-surface-container: #f3f3f3;
-  /* ...other MD3 tokens */
-}
-
-.dark {
-  --md-sys-color-primary: #a8c7fa;
-  --md-sys-color-on-primary: #003062;
-  --md-sys-color-surface-container: #212121;
-}
-```
-
 ## Available Components
 
-The library currently ships with the following native WebComponents:
+### 🧪 Atoms (Primitives)
+*   **`<ui-audio-play-button>`**: Context-aware play/pause toggle.
+*   **`<ui-audio-next-button>` / `<ui-audio-prev-button>`**: Playlist navigation buttons.
+*   **`<ui-audio-progress-slider>`**: Reactive scrubber for playback.
+*   **`<ui-audio-time-display>`**: Flexible time visualizer (elapsed, remaining, combined).
+*   **`<ui-speech-record-button>`**: Atomic trigger for recording context.
+*   **`<ui-shimmering-text>`**: Pure CSS text loading effect.
 
-*   🎙️ **`<ui-voice-button>`**: A compound interactive button that dynamically mounts a live visualizer depending on its state. Cycles gracefully through `idle`, `recording`, `processing`, `success`, and `error` states.
-*   📊 **`<ui-waveform>`**: A static, pre-computed scrubbable waveform timeline for audio playback visualization.
-*   🌊 **`<ui-live-waveform>`**: A real-time visualizer that responds to an active `AudioContext`. Includes aggressive noise-gating, center-out mirroring, and a synthetic "processing" animation state.
-*   〰️ **`<ui-scrolling-waveform>`**: An infinitely scrolling procedural audio visualization animation. Perfect for active "listening" states where a live `AnalyserNode` is unavailable.
-*   🎵 **`<ui-audio-player>`**: A classic monolithic pill-shaped audio player.
-*   🧩 **Compound Audio Architecture**: Use `<ui-audio-provider>`, `<ui-audio-play-button>`, `<ui-audio-progress-slider>`, and `<ui-audio-time-display>` to construct entirely custom audio layouts powered by a headless state machine via `@lit/context`.
-*   ✨ **`<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.
+### 🧬 Molecules (Functional Units)
+*   **`<ui-live-waveform>`**: Real-time visualizer for an active `AudioContext`.
+*   **`<ui-spectrum-visualizer>`**: Traditional frequency-bar spectrum.
+*   **`<ui-orb>`**: 3D WebGL (Three.js) agent visualizer.
+*   **`<ui-3d-flip>`**: Layout utility for 3D card-flipping interactions.
+*   **`<ui-playlist>`**: Reactive list component for queue management.
+*   **`<ui-mic-selector>`**: Hardware enumeration and permission handler.
+*   **`<ui-voice-picker>`**: Searchable persona selector with audio previews.
 
+### 🧩 Providers (State)
+*   **`<ui-audio-provider>`**: Headless state machine for playback and playlists.
+*   **`<ui-speech-provider>`**: Headless lifecycle manager for voice recording (Auto, Simulation, or Manual mode).
 
-## How to Build & Extend (For Developers)
+## Theming (Material Design 3)
 
-We welcome contributions! If you want to extend the components, tweak the canvas math, or add new visualizers, here is how you can get started.
+Customize colors and typography via standard CSS variables:
 
-### Prerequisites
-- Node.js (v18+)
-- npm or pnpm
-
-### Local Development Setup
-
-1. **Clone & Install**
-   ```bash
-   git clone <repository-url>
-   cd packages/lit-audio-ui
-   npm install
-   ```
-
-2. **Start the Dev Server**
-   This will start a local Vite development server. It serves the `index.html` file, which acts as our component workbench and functional test bed.
-   ```bash
-   npm run dev
-   ```
-
-3. **Code Structure**
-   - `/packages/lit-audio-ui/src/components/`: This is where the Lit elements (`.ts`) live. Each component should be self-contained with its scoped CSS (`static styles`).
-   - `/packages/lit-audio-ui/src/utils/`: Shared utilities, such as the `AudioContext` and FFT math ported from the original ElevenLabs React repository.
-   - `/packages/lit-audio-ui/demo/index.html`: The development workbench. Whenever you create a new component or port a feature, add a demo block here.
-   - `/packages/lit-audio-ui/demo/demo-layouts.ts`: Complex composite examples and layout logic used in the workbench.
-
-### Building for Production
-To compile the TypeScript and bundle the library for distribution:
-```bash
-cd packages/lit-audio-ui
-npm run build
-```
-This generates the optimized assets in the `/dist` folder.
-
-### Linting
-We use `google/gts` (Google TypeScript Style) and the `eslint-plugin-lit` ruleset to enforce code quality and Lit best practices.
-```bash
-cd packages/lit-audio-ui
-npm run lint
-npm run fix
+```css
+:root {
+  --md-sys-color-primary: #0066cc;
+  --ui-speech-record-color: #ff4444; /* Custom branding */
+  --ui-speech-preview-font-size: 18px;
+}
 ```
 
 ## Acknowledgements
 
-This project is deeply inspired by the beautiful, open-source audio components designed and built by **[ElevenLabs](https://elevenlabs.io/)** (`@elevenlabs/ui`). 
-
-We are incredibly grateful for their contribution to the open-source community. Their original repository provided the foundational audio mathematics, canvas drawing logic, and WebGL shader configurations that make these visualizers look buttery smooth. While their library focuses heavily on the React ecosystem, this project reimagines those beautiful designs as standard, universal browser APIs.
+Deeply inspired by the beautiful, open-source audio components built by **[ElevenLabs](https://elevenlabs.io/)** (`@elevenlabs/ui`). This project reimplement those designs as standard, universal browser APIs.
 
 # License
 
 Apache 2.0; see [`LICENSE`](LICENSE) for details.
-
-
-# Disclaimer
-
-This project is not an official Google project. It is not supported by
-Google and Google specifically disclaims all warranties as to its quality,
-merchantability, or fitness for a particular purpose.

package/dist/components/atoms/ui-message-bubble.js

@@ -0,0 +1,95 @@
+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";
+/**
+* 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.variant = "contained", this.direction = "inbound";
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: inline-flex;
+      max-width: 85%;
+      font-family: inherit;
+      color-scheme: light dark;
+    }
+
+    .bubble {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      padding: 14px 18px;
+      font-size: 0.95rem;
+      line-height: 1.5;
+      box-sizing: border-box;
+      transition: background-color 0.2s, color 0.2s;
+    }
+
+    /* Variant: Contained */
+    :host([variant='contained']) .bubble {
+      border-radius: 16px;
+    }
+
+    :host([variant='contained'][direction='inbound']) .bubble {
+      background: var(
+        --ui-message-bubble-inbound-bg,
+        var(--md-sys-color-surface-container-high, #e2e2e2)
+      );
+      color: var(--md-sys-color-on-surface);
+      border-bottom-left-radius: 4px;
+    }
+
+    :host([variant='contained'][direction='outbound']) .bubble {
+      background: var(
+        --ui-message-bubble-outbound-bg,
+        var(--md-sys-color-primary, #0066cc)
+      );
+      color: var(--md-sys-color-on-primary, #ffffff);
+      border-bottom-right-radius: 4px;
+    }
+
+    /* Variant: Flat */
+    :host([variant='flat']) .bubble {
+      padding: 8px 0;
+      background: transparent;
+      color: var(--md-sys-color-on-surface);
+    }
+
+    :host([variant='flat'][direction='outbound']) .bubble {
+      padding: 12px 16px;
+      background: var(--md-sys-color-surface-container-highest);
+      border-radius: 12px;
+    }
+  `;
+	}
+	render() {
+		return r`
+      <div class="bubble">
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "variant", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "direction", void 0), o = e([i("ui-message-bubble")], o);
+export { o as UiMessageBubble };

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

@@ -59,12 +59,11 @@ var c = class extends r {
   `;
 	}
 	render() {
-		if (!this._context) return a``;
-		let { state: e } = this._context, t = e === "recording", n = e === "processing" || e === "connecting", r = "mic";
+		let e = this._context?.state || "idle", t = e === "recording", n = e === "processing" || e === "connecting", r = "mic";
 		return t && (r = "stop"), n && (r = "hourglass_empty"), e === "success" && (r = "check"), e === "error" && (r = "error"), a`
       <md-filled-icon-button
         class="${e}"
-        ?disabled=${n}
+        ?disabled=${n || !this._context}
         @click=${this._handleClick}
       >
         <md-icon>${r}</md-icon>

package/dist/components/atoms/ui-typing-dot.js

@@ -0,0 +1,54 @@
+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";
+/**
+* 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.delay = "0s";
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: inline-block;
+    }
+    .dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: var(--ui-typing-dot-color, currentColor);
+      animation: pulse 1.2s infinite ease-in-out;
+    }
+
+    @keyframes pulse {
+      0%,
+      100% {
+        transform: scale(0.8);
+        opacity: 0.4;
+      }
+      50% {
+        transform: scale(1.2);
+        opacity: 1;
+      }
+    }
+  `;
+	}
+	render() {
+		return r`<div class="dot" style="animation-delay: ${this.delay}"></div>`;
+	}
+};
+e([a({ type: String })], o.prototype, "delay", void 0), o = e([i("ui-typing-dot")], o);
+export { o as UiTypingDot };

package/dist/components/molecules/ui-chat-item.js

@@ -0,0 +1,112 @@
+import { __decorate as e } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
+import "../atoms/ui-message-bubble.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 { classMap as o } from "lit/directives/class-map.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 t {
+	constructor(...e) {
+		super(...e), this.direction = "inbound", this.variant = "contained";
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: flex;
+      width: 100%;
+      margin-bottom: 1rem;
+      font-family: inherit;
+    }
+
+    .item-container {
+      display: flex;
+      gap: 12px;
+      width: 100%;
+      align-items: flex-end;
+    }
+
+    .item-container.inbound {
+      justify-content: flex-start;
+    }
+
+    .item-container.outbound {
+      flex-direction: row-reverse;
+      justify-content: flex-start; /* This correctly pushes to the right because of row-reverse */
+    }
+
+    .avatar-slot {
+      width: 32px;
+      height: 32px;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    /* Hide avatar slot if no children are present */
+    .avatar-slot:not(:has(*)) {
+      display: none;
+    }
+
+    .content-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      max-width: 80%;
+    }
+
+    .item-container.inbound .content-wrapper {
+      align-items: flex-start;
+    }
+
+    .item-container.outbound .content-wrapper {
+      align-items: flex-end;
+    }
+
+    .meta-slot {
+      font-size: 0.7rem;
+      font-weight: 500;
+      opacity: 0.6;
+      padding: 0 4px;
+      display: flex;
+      gap: 8px;
+    }
+  `;
+	}
+	render() {
+		return r`
+      <div class=${o({
+			"item-container": !0,
+			[this.direction]: !0
+		})}>
+        <div class="avatar-slot">
+          <slot name="avatar"></slot>
+        </div>
+
+        <div class="content-wrapper">
+          <ui-message-bubble .direction=${this.direction} .variant=${this.variant}>
+            <slot></slot>
+          </ui-message-bubble>
+          <div class="meta-slot">
+            <slot name="meta"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+	}
+};
+e([a({ type: String })], s.prototype, "direction", void 0), e([a({ type: String })], s.prototype, "variant", void 0), s = e([i("ui-chat-item")], s);
+export { s as UiChatItem };

package/dist/components/molecules/ui-chat-list.js

@@ -0,0 +1,71 @@
+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, query 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 {
+	static {
+		this.styles = n`
+    :host {
+      display: block;
+      height: 100%;
+      width: 100%;
+      overflow: hidden;
+    }
+
+    .scroll-container {
+      height: 100%;
+      width: 100%;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      padding: 1rem;
+      box-sizing: border-box;
+      scroll-behavior: smooth;
+    }
+
+    /* Scrollbar Styling */
+    .scroll-container::-webkit-scrollbar {
+      width: 6px;
+    }
+    .scroll-container::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    .scroll-container::-webkit-scrollbar-thumb {
+      background: var(--md-sys-color-outline-variant);
+      border-radius: 10px;
+    }
+  `;
+	}
+	updated(e) {
+		super.updated(e), this.scrollToBottom();
+	}
+	/**
+	* Imperatively scroll to the most recent message.
+	*/
+	scrollToBottom() {
+		this._container && (this._container.scrollTop = this._container.scrollHeight);
+	}
+	render() {
+		return r`
+      <div class="scroll-container">
+        <slot @slotchange=${this.scrollToBottom}></slot>
+      </div>
+    `;
+	}
+};
+e([a(".scroll-container")], o.prototype, "_container", void 0), o = e([i("ui-chat-list")], o);
+export { o as UiChatList };

package/dist/components/molecules/ui-showcase-card.js

@@ -77,11 +77,15 @@ var o = class extends t {
     }
 
     .preview-panel {
-      display: none;
+      display: block; /* Keep in DOM for script access */
     }
 
-    .preview-panel.active {
-      display: block;
+    :host([mode='code']) .preview-panel {
+      position: absolute;
+      visibility: hidden;
+      pointer-events: none;
+      height: 0;
+      overflow: hidden;
     }
 
     .code-panel {
@@ -98,7 +102,7 @@ var o = class extends t {
       border: 1px solid var(--md-sys-color-outline-variant);
     }
 
-    .code-panel.active {
+    :host([mode='code']) .code-panel {
       display: block;
     }
   `;
@@ -126,16 +130,17 @@ var o = class extends t {
       </div>
 
       <div class="content-area">
-        <div class="preview-panel ${this.mode === "preview" ? "active" : ""}">
+        <div class="preview-panel">
           <slot></slot>
         </div>
 
-        <pre
-          class="code-panel ${this.mode === "code" ? "active" : ""}"
-        ><code><slot name="code"></slot></code></pre>
+        <pre class="code-panel"><code><slot name="code"></slot></code></pre>
       </div>
     `;
 	}
 };
-e([a({ type: String })], o.prototype, "title", void 0), e([a({ type: String })], o.prototype, "description", void 0), e([a({ type: String })], o.prototype, "mode", void 0), o = e([i("ui-showcase-card")], o);
+e([a({ type: String })], o.prototype, "title", void 0), e([a({ type: String })], o.prototype, "description", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "mode", void 0), o = e([i("ui-showcase-card")], o);
 export { o as UiShowcaseCard };

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

@@ -53,8 +53,7 @@ var c = class extends r {
   `;
 	}
 	render() {
-		if (!this._context) return a``;
-		let { state: e, transcript: t, partialTranscript: n, analyserNode: r } = this._context, i = e === "recording", o = e === "processing" || e === "connecting";
+		let { state: e = "idle", transcript: t = "", partialTranscript: n = "", analyserNode: r = void 0 } = this._context || {}, i = e === "recording", o = e === "processing" || e === "connecting";
 		return a`
       ${!i && !o && !(t || n) ? a`<span class="placeholder">${this.placeholder}</span>` : a`<span class="transcript">${n || t}</span>`}
 

package/dist/components/molecules/ui-typing-indicator.js

@@ -0,0 +1,43 @@
+import { __decorate as e } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
+import "../atoms/ui-typing-dot.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i } 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 a = class extends t {
+	static {
+		this.styles = n`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 8px 12px;
+      background: var(--md-sys-color-surface-container-low);
+      border-radius: 12px;
+      border-bottom-left-radius: 4px;
+    }
+  `;
+	}
+	render() {
+		return r`
+      <ui-typing-dot delay="0s"></ui-typing-dot>
+      <ui-typing-dot delay="0.2s"></ui-typing-dot>
+      <ui-typing-dot delay="0.4s"></ui-typing-dot>
+    `;
+	}
+};
+a = e([i("ui-typing-indicator")], a);
+export { a as UiTypingIndicator };

package/dist/components/providers/ui-speech-provider.js

@@ -10,6 +10,7 @@ var u = class extends i {
 			state: "idle",
 			transcript: "",
 			partialTranscript: "",
+			analyserNode: void 0,
 			start: () => this.start(),
 			stop: () => this.stop(),
 			cancel: () => this.cancel()