@ghchinoy/lit-audio-ui 0.4.19 → 0.5.0

package/custom-elements.json

@@ -183,6 +183,14 @@
             "module": "src/components/molecules/ui-orb.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/components/molecules/ui-moving-gradient.js"
+          }
+        },
         {
           "kind": "js",
           "name": "*",
@@ -800,7 +808,7 @@
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :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-filled-icon-button.error { --md-filled-icon-button-container-color: var( --ui-audio-error-color, var(--md-sys-color-error, #ba1a1a) ); --md-filled-icon-button-icon-color: var(--md-sys-color-on-error, #ffffff); } md-circular-progress { position: absolute; --md-circular-progress-size: 48px; } `"
+              "default": "css` :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-filled-icon-button.error { --md-filled-icon-button-container-color: var( --ui-audio-error-color, var(--md-sys-color-error, #ba1a1a) ); --md-filled-icon-button-icon-color: var(--md-sys-color-on-error, #ffffff); } md-circular-progress { --md-circular-progress-size: 24px; } `"
             },
             {
               "kind": "method",
@@ -1743,29 +1751,43 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/organisms/ui-audio-player.ts",
+      "path": "src/components/molecules/scream-voice-button.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A monolithic backward-compatibility wrapper that renders the classic ElevenLabs\npill-shaped audio player. Internally, it relies completely on the new\ncompound <ui-audio-provider> architecture.",
-          "name": "UiAudioPlayer",
+          "description": "A basic demonstration of the ported audio button.",
+          "name": "ScreamVoiceButton",
           "members": [
             {
               "kind": "field",
-              "name": "item",
+              "name": "state",
               "type": {
-                "text": "AudioPlayerItem | undefined"
-              }
+                "text": "VoiceState"
+              },
+              "default": "'idle'"
             },
             {
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :host { display: inline-block; width: 100%; max-width: 400px; } .player-pill { display: flex; align-items: center; gap: var(--ui-audio-player-gap, 16px); padding: var(--ui-audio-player-padding, 12px 24px); background: var(--md-sys-color-surface-container-high, #e2e2e2); border-radius: 999px; /* Pill shape */ width: fit-content; font-family: inherit; } .time-container { min-width: 85px; /* prevent jitter when times change */ } .slider-container { width: 200px; display: flex; align-items: center; } `"
+              "default": "css` :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 ); } `"
             },
             {
               "kind": "method",
               "name": "render"
+            },
+            {
+              "kind": "method",
+              "name": "_handleClick",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "name": "voice-toggle",
+              "type": {
+                "text": "CustomEvent"
+              }
             }
           ],
           "superclass": {
@@ -1778,532 +1800,572 @@
       "exports": [
         {
           "kind": "js",
-          "name": "UiAudioPlayer",
+          "name": "ScreamVoiceButton",
           "declaration": {
-            "name": "UiAudioPlayer",
-            "module": "src/components/organisms/ui-audio-player.ts"
+            "name": "ScreamVoiceButton",
+            "module": "src/components/molecules/scream-voice-button.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/providers/ui-audio-provider.ts",
+      "path": "src/components/molecules/ui-3d-flip.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A headless (invisible) WebComponent that manages an internal <audio> tag\nand provides state to any child components via",
-          "name": "UiAudioProvider",
+          "description": "A layout utility component that provides 3D card flipping functionality.",
+          "name": "Ui3dFlip",
           "members": [
             {
               "kind": "field",
-              "name": "src",
+              "name": "flipped",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''"
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "items",
+              "name": "axis",
               "type": {
-                "text": "PlaylistTrack[]"
+                "text": "'x' | 'y'"
               },
-              "default": "[]"
+              "default": "'y'"
             },
             {
               "kind": "field",
-              "name": "autoAdvance",
+              "name": "duration",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "true"
+              "default": "'0.6s'"
             },
             {
               "kind": "field",
-              "name": "_audioEl",
-              "type": {
-                "text": "HTMLAudioElement"
-              },
-              "privacy": "private"
+              "name": "styles",
+              "static": true,
+              "default": "css` :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); } .flip-trigger { position: absolute; top: 12px; right: 12px; z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; } `"
             },
             {
-              "kind": "field",
-              "name": "_audioContext",
-              "type": {
-                "text": "AudioContext | undefined"
-              },
-              "privacy": "private"
+              "kind": "method",
+              "name": "render"
             },
+            {
+              "kind": "method",
+              "name": "toggle",
+              "privacy": "public"
+            }
+          ],
+          "events": [
+            {
+              "name": "flip-change",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Ui3dFlip",
+          "declaration": {
+            "name": "Ui3dFlip",
+            "module": "src/components/molecules/ui-3d-flip.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/molecules/ui-chat-item.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A composite component representing a single chat message item.\nSupports avatars and alignment for inbound/outbound messages.",
+          "name": "UiChatItem",
+          "members": [
             {
               "kind": "field",
-              "name": "_analyserNode",
+              "name": "direction",
               "type": {
-                "text": "AnalyserNode | undefined"
+                "text": "'inbound' | 'outbound'"
               },
-              "privacy": "private"
+              "default": "'inbound'"
             },
             {
               "kind": "field",
-              "name": "_mediaSource",
+              "name": "variant",
               "type": {
-                "text": "MediaElementAudioSourceNode | undefined"
+                "text": "'contained' | 'flat'"
               },
-              "privacy": "private"
+              "default": "'contained'"
             },
             {
               "kind": "field",
-              "name": "_animationFrameId",
+              "name": "avatarSrc",
               "type": {
-                "text": "number"
-              },
-              "privacy": "private",
-              "default": "0"
+                "text": "string | undefined"
+              }
             },
             {
               "kind": "field",
-              "name": "state",
+              "name": "avatarName",
               "type": {
-                "text": "AudioPlayerState"
-              },
-              "privacy": "public",
-              "default": "{ src: '', isPlaying: false, isBuffering: false, currentTime: 0, duration: 0, volume: 1, muted: false, items: [], currentIndex: -1, autoAdvance: true, analyserNode: undefined, play: () => this.play(), pause: () => this.pause(), togglePlay: () => this._togglePlay(), seek: (time: number) => this._seek(time), setVolume: (volume: number) => this._setVolume(volume), toggleMute: () => this._toggleMute(), next: () => this.next(), previous: () => this.previous(), select: (index: number) => this.select(index), }"
+                "text": "string | undefined"
+              }
             },
             {
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :host { display: contents; /* We are completely invisible, just wrapping children */ } audio { display: none; } `"
+              "default": "css` :host { display: block; margin-bottom: var(--ui-chat-item-margin-bottom, 8px); width: 100%; } .item-wrapper { display: flex; width: 100%; gap: var(--ui-chat-item-gap, 8px); align-items: flex-end; } .item-wrapper.outbound { flex-direction: row-reverse; } .item-wrapper.inbound { flex-direction: row; } .avatar { width: var(--ui-chat-item-avatar-size, 32px); height: var(--ui-chat-item-avatar-size, 32px); border-radius: 50%; background: var(--md-sys-color-surface-container-highest); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; font-size: 12px; font-weight: 500; color: var(--md-sys-color-on-surface-variant); border: 1px solid var(--md-sys-color-outline-variant); } .avatar img { width: 100%; height: 100%; object-fit: cover; } `"
             },
             {
               "kind": "method",
               "name": "render"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UiChatItem",
+          "declaration": {
+            "name": "UiChatItem",
+            "module": "src/components/molecules/ui-chat-item.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/molecules/ui-chat-list.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "MOLECULE: Chat List\nA scrollable container for ui-chat-items.\nAutomatically handles scrolling to the bottom when new children are added.",
+          "name": "UiChatList",
+          "members": [
+            {
+              "kind": "field",
+              "name": "_container",
+              "type": {
+                "text": "HTMLDivElement"
+              },
+              "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "willUpdate",
-              "parameters": [
-                {
-                  "name": "changed",
-                  "type": {
-                    "text": "Map<string, any>"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "_isAtBottom",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "true"
             },
             {
-              "kind": "method",
-              "name": "updated",
-              "parameters": [
-                {
-                  "name": "changed",
-                  "type": {
-                    "text": "Map<string, any>"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "styles",
+              "static": true,
+              "default": "css` :host { display: block; height: 100%; width: 100%; overflow: hidden; position: relative; } .scroll-container { height: 100%; width: 100%; overflow-y: auto; display: flex; flex-direction: column; padding: var(--ui-chat-list-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; } .scroll-button { position: absolute; bottom: var(--ui-chat-list-scroll-btn-bottom, 16px); left: 50%; transform: translateX(-50%); background: var(--md-sys-color-surface-container-highest); border-radius: 50%; box-shadow: var(--md-sys-elevation-level2); z-index: 10; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .scroll-button.visible { opacity: 1; visibility: visible; } `"
             },
             {
               "kind": "method",
-              "name": "_updateState",
-              "privacy": "private",
+              "name": "updated",
+              "privacy": "protected",
               "parameters": [
                 {
-                  "name": "updates",
+                  "name": "changedProperties",
                   "type": {
-                    "text": "Partial<AudioPlayerState>"
+                    "text": "PropertyValues"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_setupAudioContext",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "play",
-              "privacy": "public"
-            },
-            {
-              "kind": "method",
-              "name": "pause",
-              "privacy": "public"
+              "name": "scrollToBottom",
+              "privacy": "public",
+              "description": "Imperatively scroll to the most recent message."
             },
             {
               "kind": "method",
-              "name": "_togglePlay",
+              "name": "_handleScroll",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "_seek",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "time",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_setVolume",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "volume",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_toggleMute",
-              "privacy": "private"
-            },
+              "name": "render"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "ui-chat-list",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UiChatList",
+          "declaration": {
+            "name": "UiChatList",
+            "module": "src/components/molecules/ui-chat-list.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/molecules/ui-conversation-bar.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "MOLECULE: Conversation Bar\nA specialized interaction bar for AI conversations.\nCombines mic selection, live visualization, and text input.",
+          "name": "UiConversationBar",
+          "members": [
             {
-              "kind": "method",
-              "name": "next",
-              "privacy": "public"
+              "kind": "field",
+              "name": "agentId",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "(Optional) ID of the AI agent."
             },
             {
-              "kind": "method",
-              "name": "previous",
-              "privacy": "public"
+              "kind": "field",
+              "name": "simulation",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enable mock transcription for demos."
             },
             {
-              "kind": "method",
-              "name": "select",
-              "privacy": "public",
-              "parameters": [
-                {
-                  "name": "index",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "_keyboardOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
             },
             {
-              "kind": "method",
-              "name": "_handleLoadedMetadata",
-              "privacy": "private"
+              "kind": "field",
+              "name": "_textInput",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''"
             },
             {
-              "kind": "method",
-              "name": "_handleEnded",
-              "privacy": "private"
+              "kind": "field",
+              "name": "_isMuted",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
             },
             {
-              "kind": "method",
-              "name": "_handlePlaying",
-              "privacy": "private"
+              "kind": "field",
+              "name": "styles",
+              "static": true,
+              "default": "css` :host { display: block; width: 100%; font-family: inherit; } .container { background: var(--md-sys-color-surface-container, #f3f3f3); border-radius: var(--ui-conversation-bar-radius, 24px); border: 1px solid var(--md-sys-color-outline-variant); box-shadow: var(--md-sys-elevation-level1); overflow: hidden; display: flex; flex-direction: column-reverse; transition: all 0.3s ease; } .toolbar { display: flex; align-items: center; justify-content: space-between; padding: var(--ui-conversation-bar-padding, 8px 16px); gap: 12px; color: var(--md-sys-color-on-surface, #1d1b20); } .visualizer-section { display: flex; align-items: center; gap: 12px; flex: 1; height: 40px; background: var(--md-sys-color-surface-container-high, #e2e2e2); border-radius: 12px; padding: 0 12px; overflow: hidden; color: var(--md-sys-color-on-surface, #1d1b20); } ui-mic-selector { --md-sys-color-on-surface: var(--md-sys-color-on-surface-variant, #49454f); } .waveform-wrapper { flex: 1; height: 24px; color: var(--md-sys-color-primary, #0066cc); } .controls { display: flex; align-items: center; gap: 4px; color: var(--md-sys-color-on-surface-variant, #49454f); } md-icon-button { --md-icon-button-icon-color: var(--md-sys-color-on-surface-variant, #49454f); } .input-area { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; background: var(--md-sys-color-surface-container); } .input-area.open { max-height: 200px; } .input-container { padding: 16px; display: flex; gap: 8px; align-items: flex-end; } md-outlined-text-field { flex: 1; --md-outlined-text-field-container-shape: 16px; font-family: inherit; --md-outlined-text-field-input-text-font: inherit; --md-outlined-text-field-label-text-font: inherit; } .keyboard-toggle.active { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } md-divider { margin: 0; } `"
             },
             {
               "kind": "method",
-              "name": "_handlePause",
-              "privacy": "private"
+              "name": "render"
             },
             {
               "kind": "method",
-              "name": "_handleError",
+              "name": "_handleKeyDown",
               "privacy": "private",
               "parameters": [
                 {
                   "name": "e",
-                  "optional": true,
                   "type": {
-                    "text": "Event"
+                    "text": "KeyboardEvent"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_startTrackingTime",
+              "name": "_sendMessage",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_handleCallToggle",
               "privacy": "private"
             }
           ],
           "events": [
             {
-              "name": "state-change",
+              "name": "message-sent",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Dispatched when a text message is sent. detail: { message }"
+            },
+            {
+              "name": "call-toggle",
               "type": {
                 "text": "CustomEvent"
               }
+            },
+            {
+              "description": "Dispatched when the conversation state changes.",
+              "name": "state-change"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
+          "tagName": "ui-conversation-bar",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "UiAudioProvider",
+          "name": "UiConversationBar",
           "declaration": {
-            "name": "UiAudioProvider",
-            "module": "src/components/providers/ui-audio-provider.ts"
+            "name": "UiConversationBar",
+            "module": "src/components/molecules/ui-conversation-bar.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/providers/ui-speech-provider.ts",
+      "path": "src/components/molecules/ui-live-waveform.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A headless provider component that manages the speech recording lifecycle.\nIt provides a `SpeechContext` to all children components, allowing them to\nreact to recording states and access transcripts.\n\nIt supports three modes:\n1. Auto (Default): Handles getUserMedia and provides a real MediaStream.\n2. Simulation: Provides a mock AnalyserNode and fake transcription for demos.\n3. Manual: Only emits intent events, leaving state management to a backend/agent.",
-          "name": "UiSpeechProvider",
+          "description": "A real-time audio visualizer component.",
+          "name": "UiLiveWaveform",
           "members": [
             {
               "kind": "field",
-              "name": "_context",
+              "name": "active",
               "type": {
-                "text": "SpeechContext"
+                "text": "boolean"
               },
-              "privacy": "private",
-              "default": "{ state: 'idle', transcript: '', partialTranscript: '', analyserNode: undefined, start: () => this.start(), stop: () => this.stop(), cancel: () => this.cancel(), }"
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "state",
+              "name": "processing",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "'idle'",
-              "description": "The current recording state ('idle', 'connecting', 'recording', 'processing', 'success', 'error')."
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "simulation",
+              "name": "analyserNode",
               "type": {
-                "text": "boolean"
+                "text": "AnalyserNode | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "barWidth",
+              "type": {
+                "text": "number"
               },
-              "default": "false",
-              "description": "Enable mock transcription and audio data for demos."
+              "default": "3"
             },
             {
               "kind": "field",
-              "name": "manual",
+              "name": "barHeight",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "If true, the provider will not start recording automatically but will emit requests."
+              "default": "4"
             },
             {
               "kind": "field",
-              "name": "transcript",
+              "name": "barGap",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "''",
-              "description": "The final confirmed transcript."
+              "default": "1"
             },
             {
               "kind": "field",
-              "name": "partialTranscript",
+              "name": "barRadius",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "''",
-              "description": "The live, interim transcript."
+              "default": "1.5"
             },
             {
               "kind": "field",
-              "name": "deviceId",
+              "name": "barColor",
               "type": {
                 "text": "string | undefined"
               }
             },
             {
               "kind": "field",
-              "name": "_stream",
+              "name": "fadeEdges",
               "type": {
-                "text": "MediaStream | undefined"
+                "text": "boolean"
               },
-              "privacy": "private"
+              "default": "true"
             },
             {
               "kind": "field",
-              "name": "_audioCtx",
+              "name": "fadeWidth",
               "type": {
-                "text": "AudioContext | undefined"
+                "text": "number"
               },
-              "privacy": "private"
+              "default": "24"
             },
             {
               "kind": "field",
-              "name": "_analyser",
+              "name": "height",
               "type": {
-                "text": "AnalyserNode | undefined"
+                "text": "number | string | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "sensitivity",
+              "type": {
+                "text": "number"
               },
-              "privacy": "private"
+              "default": "1.0"
             },
             {
               "kind": "field",
-              "name": "_transcriptInterval",
+              "name": "updateRate",
               "type": {
-                "text": "any | undefined"
+                "text": "number"
+              },
+              "default": "30"
+            },
+            {
+              "kind": "field",
+              "name": "_canvas",
+              "type": {
+                "text": "HTMLCanvasElement"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_fakeTranscript",
+              "name": "_container",
               "type": {
-                "text": "array"
+                "text": "HTMLDivElement"
               },
-              "privacy": "private",
-              "default": "[ 'I', ' am', ' recording', ' a', ' message', ' using', ' atomic', ' components...', ]"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "styles",
-              "static": true,
-              "default": "css` :host { display: contents; } `"
+              "name": "_animationFrameId",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
             },
             {
-              "kind": "method",
-              "name": "willUpdate",
-              "parameters": [
-                {
-                  "name": "changedProperties",
-                  "type": {
-                    "text": "Map<string, any>"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "start"
-            },
-            {
-              "kind": "method",
-              "name": "stop"
-            },
-            {
-              "kind": "method",
-              "name": "cancel"
-            },
-            {
-              "kind": "method",
-              "name": "_cleanupStream",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "_updateContext",
+              "kind": "field",
+              "name": "_lastUpdateTime",
+              "type": {
+                "text": "number"
+              },
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "update",
-                  "type": {
-                    "text": "Partial<SpeechContext>"
-                  }
-                }
-              ]
+              "default": "0"
             },
             {
-              "kind": "method",
-              "name": "render"
-            }
-          ],
-          "events": [
-            {
-              "name": "speech-request-start",
+              "kind": "field",
+              "name": "_resizeObserver",
               "type": {
-                "text": "CustomEvent"
+                "text": "ResizeObserver | undefined"
               },
-              "description": "Dispatched in 'manual' mode when a child wants to start."
+              "privacy": "private"
             },
             {
-              "name": "speech-start",
+              "kind": "field",
+              "name": "_themeObserver",
               "type": {
-                "text": "CustomEvent"
+                "text": "MutationObserver | undefined"
               },
-              "description": "Dispatched when recording actually begins."
+              "privacy": "private"
             },
             {
-              "name": "speech-request-stop",
+              "kind": "field",
+              "name": "_dataArray",
               "type": {
-                "text": "CustomEvent"
+                "text": "Uint8Array | undefined"
               },
-              "description": "Dispatched in 'manual' mode when a child wants to stop."
+              "privacy": "private"
             },
             {
-              "name": "speech-stop",
+              "kind": "field",
+              "name": "_currentBars",
               "type": {
-                "text": "CustomEvent"
+                "text": "number[]"
               },
-              "description": "Dispatched when recording is stopped."
+              "privacy": "private",
+              "default": "[]"
             },
             {
-              "name": "speech-cancel",
+              "kind": "field",
+              "name": "_processingTime",
               "type": {
-                "text": "CustomEvent"
-              }
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
             },
             {
-              "name": "state-change",
+              "kind": "field",
+              "name": "_transitionProgress",
               "type": {
-                "text": "CustomEvent"
+                "text": "number"
               },
-              "description": "Dispatched whenever the internal context state changes."
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "ui-speech-provider",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UiSpeechProvider",
-          "declaration": {
-            "name": "UiSpeechProvider",
-            "module": "src/components/providers/ui-speech-provider.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/molecules/scream-voice-button.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A basic demonstration of the ported audio button.",
-          "name": "ScreamVoiceButton",
-          "members": [
+              "privacy": "private",
+              "default": "0"
+            },
             {
               "kind": "field",
-              "name": "state",
+              "name": "_lastActiveData",
               "type": {
-                "text": "VoiceState"
+                "text": "number[]"
               },
-              "default": "'idle'"
+              "privacy": "private",
+              "default": "[]"
             },
             {
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :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 ); } `"
+              "default": "css` :host { display: block; width: 100%; height: 64px; /* default height, can be overridden by CSS */ } .container { position: relative; width: 100%; height: 100%; } canvas { position: absolute; top: 0; left: 0; display: block; height: 100%; width: 100%; } `"
             },
             {
               "kind": "method",
@@ -2311,16 +2373,49 @@
             },
             {
               "kind": "method",
-              "name": "_handleClick",
+              "name": "firstUpdated",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "updated",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "changedProperties",
+                  "type": {
+                    "text": "PropertyValues"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleResize",
               "privacy": "private"
-            }
-          ],
-          "events": [
+            },
             {
-              "name": "voice-toggle",
-              "type": {
-                "text": "CustomEvent"
-              }
+              "kind": "method",
+              "name": "_startAnimationLoop",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_updateData",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "timestamp",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_renderFrame",
+              "privacy": "private"
             }
           ],
           "superclass": {
@@ -2333,502 +2428,367 @@
       "exports": [
         {
           "kind": "js",
-          "name": "ScreamVoiceButton",
+          "name": "UiLiveWaveform",
           "declaration": {
-            "name": "ScreamVoiceButton",
-            "module": "src/components/molecules/scream-voice-button.ts"
+            "name": "UiLiveWaveform",
+            "module": "src/components/molecules/ui-live-waveform.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/molecules/ui-3d-flip.ts",
+      "path": "src/components/molecules/ui-mic-selector.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A layout utility component that provides 3D card flipping functionality.",
-          "name": "Ui3dFlip",
+          "description": "A native Lit WebComponent that provides a dropdown menu for selecting audio input devices.\nIt automatically handles permission requests, device enumeration, and provides a\nlive preview waveform of the selected input.",
+          "name": "UiMicSelector",
           "members": [
             {
               "kind": "field",
-              "name": "flipped",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false"
+              "description": "The deviceId of the currently selected audio input."
             },
             {
               "kind": "field",
-              "name": "axis",
+              "name": "muted",
               "type": {
-                "text": "'x' | 'y'"
+                "text": "boolean"
               },
-              "default": "'y'"
+              "default": "false",
+              "description": "Whether the microphone is visually/logically muted in the selector."
             },
             {
               "kind": "field",
-              "name": "duration",
+              "name": "disabled",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "'0.6s'"
+              "default": "false",
+              "description": "Whether the selector interaction is disabled."
             },
             {
               "kind": "field",
-              "name": "styles",
-              "static": true,
-              "default": "css` :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); } .flip-trigger { position: absolute; top: 12px; right: 12px; z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; } `"
-            },
-            {
-              "kind": "method",
-              "name": "render"
+              "name": "_devices",
+              "type": {
+                "text": "AudioDevice[]"
+              },
+              "privacy": "private",
+              "default": "[]"
             },
             {
-              "kind": "method",
-              "name": "toggle",
-              "privacy": "public"
-            }
-          ],
-          "events": [
-            {
-              "name": "flip-change",
+              "kind": "field",
+              "name": "_loading",
               "type": {
-                "text": "CustomEvent"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "Ui3dFlip",
-          "declaration": {
-            "name": "Ui3dFlip",
-            "module": "src/components/molecules/ui-3d-flip.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/molecules/ui-chat-item.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A composite component representing a single chat message item.\nSupports avatars and alignment for inbound/outbound messages.",
-          "name": "UiChatItem",
-          "members": [
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "true"
+            },
             {
               "kind": "field",
-              "name": "direction",
+              "name": "_error",
               "type": {
-                "text": "'inbound' | 'outbound'"
+                "text": "string | null"
               },
-              "default": "'inbound'"
+              "privacy": "private",
+              "default": "null"
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "_hasPermission",
               "type": {
-                "text": "'contained' | 'flat'"
+                "text": "boolean"
               },
-              "default": "'contained'"
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "avatarSrc",
+              "name": "_isMenuOpen",
               "type": {
-                "text": "string | undefined"
-              }
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "avatarName",
+              "name": "_previewAnalyser",
               "type": {
-                "text": "string | undefined"
-              }
+                "text": "AnalyserNode | undefined"
+              },
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "styles",
-              "static": true,
-              "default": "css` :host { display: block; margin-bottom: var(--ui-chat-item-margin-bottom, 8px); width: 100%; } .item-wrapper { display: flex; width: 100%; gap: var(--ui-chat-item-gap, 8px); align-items: flex-end; } .item-wrapper.outbound { flex-direction: row-reverse; } .item-wrapper.inbound { flex-direction: row; } .avatar { width: var(--ui-chat-item-avatar-size, 32px); height: var(--ui-chat-item-avatar-size, 32px); border-radius: 50%; background: var(--md-sys-color-surface-container-highest); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; font-size: 12px; font-weight: 500; color: var(--md-sys-color-on-surface-variant); border: 1px solid var(--md-sys-color-outline-variant); } .avatar img { width: 100%; height: 100%; object-fit: cover; } `"
+              "name": "_menuEl",
+              "type": {
+                "text": "any"
+              },
+              "privacy": "private"
             },
-            {
-              "kind": "method",
-              "name": "render"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UiChatItem",
-          "declaration": {
-            "name": "UiChatItem",
-            "module": "src/components/molecules/ui-chat-item.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/molecules/ui-chat-list.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "MOLECULE: Chat List\nA scrollable container for ui-chat-items.\nAutomatically handles scrolling to the bottom when new children are added.",
-          "name": "UiChatList",
-          "members": [
             {
               "kind": "field",
-              "name": "_container",
+              "name": "_previewStream",
               "type": {
-                "text": "HTMLDivElement"
+                "text": "MediaStream | undefined"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_isAtBottom",
+              "name": "_previewAudioContext",
               "type": {
-                "text": "boolean"
+                "text": "AudioContext | undefined"
               },
-              "privacy": "private",
-              "default": "true"
+              "privacy": "private"
             },
             {
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :host { display: block; height: 100%; width: 100%; overflow: hidden; position: relative; } .scroll-container { height: 100%; width: 100%; overflow-y: auto; display: flex; flex-direction: column; padding: var(--ui-chat-list-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; } .scroll-button { position: absolute; bottom: var(--ui-chat-list-scroll-btn-bottom, 16px); left: 50%; transform: translateX(-50%); background: var(--md-sys-color-surface-container-highest); border-radius: 50%; box-shadow: var(--md-sys-elevation-level2); z-index: 10; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .scroll-button.visible { opacity: 1; visibility: visible; } `"
+              "default": "css` :host { display: inline-block; position: relative; font-family: inherit; color-scheme: light dark; } .anchor-button { display: flex; align-items: center; gap: var(--ui-mic-selector-gap, 8px); padding: var(--ui-mic-selector-padding, 8px 16px); background: var(--md-sys-color-surface-container-high, transparent); color: var(--md-sys-color-on-surface); border-radius: 999px; cursor: pointer; border: 1px solid var(--md-sys-color-outline-variant, currentColor); font-family: inherit; font-size: 14px; font-weight: 500; transition: background-color 0.2s; max-width: 250px; } .anchor-button:hover:not(:disabled) { background: var(--md-sys-color-surface-container-highest); } .anchor-button:disabled { opacity: 0.5; cursor: not-allowed; } .label-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; } md-menu { --md-menu-container-color: var( --md-sys-color-surface-container, var(--md-sys-color-surface) ); --md-menu-container-shape: 12px; min-width: 280px; font-family: inherit; /* Force typescale fonts to inherit project font */ --md-sys-typescale-body-medium-font: inherit; --md-sys-typescale-label-large-font: inherit; border: 1px solid var(--md-sys-color-outline-variant); } md-menu-item { font-family: inherit; --md-menu-item-label-text-font: inherit; --md-sys-typescale-label-large-font: inherit; } md-menu-item div[slot='headline'] { font-family: inherit; } .menu-footer { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; gap: 12px; font-family: inherit; } md-text-button { font-family: inherit; --md-text-button-label-text-font: inherit; --md-sys-typescale-label-large-font: inherit; } .preview-waveform { flex: 1; height: 24px; background: var( --md-sys-color-surface-variant, var(--md-sys-color-surface-container-highest) ); border-radius: 6px; overflow: hidden; display: flex; align-items: center; padding: 0 4px; } `"
             },
             {
               "kind": "method",
               "name": "updated",
-              "privacy": "protected",
               "parameters": [
                 {
                   "name": "changedProperties",
                   "type": {
                     "text": "PropertyValues"
                   }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "scrollToBottom",
-              "privacy": "public",
-              "description": "Imperatively scroll to the most recent message."
-            },
-            {
-              "kind": "method",
-              "name": "_handleScroll",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "render"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "ui-chat-list",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UiChatList",
-          "declaration": {
-            "name": "UiChatList",
-            "module": "src/components/molecules/ui-chat-list.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/molecules/ui-conversation-bar.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "MOLECULE: Conversation Bar\nA specialized interaction bar for AI conversations.\nCombines mic selection, live visualization, and text input.",
-          "name": "UiConversationBar",
-          "members": [
-            {
-              "kind": "field",
-              "name": "agentId",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "(Optional) ID of the AI agent."
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "simulation",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Enable mock transcription for demos."
+              "kind": "method",
+              "name": "render"
             },
             {
-              "kind": "field",
-              "name": "_keyboardOpen",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
+              "kind": "method",
+              "name": "_toggleMenu",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "_textInput",
-              "type": {
-                "text": "string"
-              },
+              "kind": "method",
+              "name": "_selectDevice",
               "privacy": "private",
-              "default": "''"
+              "parameters": [
+                {
+                  "name": "deviceId",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "_isMuted",
-              "type": {
-                "text": "boolean"
-              },
+              "kind": "method",
+              "name": "_toggleMute",
               "privacy": "private",
-              "default": "false"
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
               "kind": "field",
-              "name": "styles",
-              "static": true,
-              "default": "css` :host { display: block; width: 100%; font-family: inherit; } .container { background: var(--md-sys-color-surface-container, #f3f3f3); border-radius: var(--ui-conversation-bar-radius, 24px); border: 1px solid var(--md-sys-color-outline-variant); box-shadow: var(--md-sys-elevation-level1); overflow: hidden; display: flex; flex-direction: column-reverse; transition: all 0.3s ease; } .toolbar { display: flex; align-items: center; justify-content: space-between; padding: var(--ui-conversation-bar-padding, 8px 16px); gap: 12px; color: var(--md-sys-color-on-surface, #1d1b20); } .visualizer-section { display: flex; align-items: center; gap: 12px; flex: 1; height: 40px; background: var(--md-sys-color-surface-container-high, #e2e2e2); border-radius: 12px; padding: 0 12px; overflow: hidden; color: var(--md-sys-color-on-surface, #1d1b20); } ui-mic-selector { --md-sys-color-on-surface: var(--md-sys-color-on-surface-variant, #49454f); } .waveform-wrapper { flex: 1; height: 24px; color: var(--md-sys-color-primary, #0066cc); } .controls { display: flex; align-items: center; gap: 4px; color: var(--md-sys-color-on-surface-variant, #49454f); } md-icon-button { --md-icon-button-icon-color: var(--md-sys-color-on-surface-variant, #49454f); } .input-area { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; background: var(--md-sys-color-surface-container); } .input-area.open { max-height: 200px; } .input-container { padding: 16px; display: flex; gap: 8px; align-items: flex-end; } md-outlined-text-field { flex: 1; --md-outlined-text-field-container-shape: 16px; font-family: inherit; --md-outlined-text-field-input-text-font: inherit; --md-outlined-text-field-label-text-font: inherit; } .keyboard-toggle.active { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } md-divider { margin: 0; } `"
+              "name": "_handleDeviceChange",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "render"
+              "name": "_loadDevicesWithoutPermission",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "_handleKeyDown",
+              "name": "_loadDevicesWithPermission",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_parseDeviceList",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "deviceList",
                   "type": {
-                    "text": "KeyboardEvent"
+                    "text": "MediaDeviceInfo[]"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_sendMessage",
+              "name": "_startPreview",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "_handleCallToggle",
+              "name": "_stopPreview",
               "privacy": "private"
             }
           ],
           "events": [
             {
-              "name": "message-sent",
+              "name": "device-change",
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Dispatched when a text message is sent. detail: { message }"
+              "description": "Dispatched when a new device is selected. detail: { deviceId }"
             },
             {
-              "name": "call-toggle",
+              "name": "mute-change",
               "type": {
                 "text": "CustomEvent"
-              }
-            },
-            {
-              "description": "Dispatched when the conversation state changes.",
-              "name": "state-change"
+              },
+              "description": "Dispatched when the mute state is toggled. detail: { muted }"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "ui-conversation-bar",
+          "tagName": "ui-mic-selector",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "UiConversationBar",
+          "name": "UiMicSelector",
           "declaration": {
-            "name": "UiConversationBar",
-            "module": "src/components/molecules/ui-conversation-bar.ts"
+            "name": "UiMicSelector",
+            "module": "src/components/molecules/ui-mic-selector.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/molecules/ui-live-waveform.ts",
+      "path": "src/components/molecules/ui-moving-gradient.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A real-time audio visualizer component.",
-          "name": "UiLiveWaveform",
+          "description": "A 3D WebGL 'Moving Gradient' component used to visualize AI agent states.",
+          "name": "UiMovingGradient",
           "members": [
             {
               "kind": "field",
-              "name": "active",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "processing",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "analyserNode",
+              "name": "colors",
               "type": {
-                "text": "AnalyserNode | undefined"
+                "text": "[string, string, string] | undefined"
               }
             },
             {
               "kind": "field",
-              "name": "barWidth",
+              "name": "stops",
               "type": {
-                "text": "number"
-              },
-              "default": "3"
+                "text": "[number, number, number] | undefined"
+              }
             },
             {
               "kind": "field",
-              "name": "barHeight",
+              "name": "agentState",
               "type": {
-                "text": "number"
+                "text": "AgentState"
               },
-              "default": "4"
+              "default": "null"
             },
             {
               "kind": "field",
-              "name": "barGap",
+              "name": "inputVolume",
               "type": {
                 "text": "number"
               },
-              "default": "1"
+              "default": "0"
             },
             {
               "kind": "field",
-              "name": "barRadius",
+              "name": "outputVolume",
               "type": {
                 "text": "number"
               },
-              "default": "1.5"
-            },
-            {
-              "kind": "field",
-              "name": "barColor",
-              "type": {
-                "text": "string | undefined"
-              }
+              "default": "0"
             },
             {
               "kind": "field",
-              "name": "fadeEdges",
+              "name": "volumeMode",
               "type": {
-                "text": "boolean"
+                "text": "'auto' | 'manual'"
               },
-              "default": "true"
+              "default": "'auto'"
             },
             {
               "kind": "field",
-              "name": "fadeWidth",
+              "name": "baseHeight",
               "type": {
                 "text": "number"
               },
-              "default": "24"
+              "default": "0.05"
             },
             {
               "kind": "field",
-              "name": "height",
+              "name": "speed",
               "type": {
                 "text": "number"
               },
-              "default": "64"
+              "default": "1.0"
             },
             {
               "kind": "field",
-              "name": "sensitivity",
+              "name": "_container",
               "type": {
-                "text": "number"
+                "text": "HTMLDivElement"
               },
-              "default": "1.0"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "updateRate",
+              "name": "_renderer",
               "type": {
-                "text": "number"
+                "text": "THREE.WebGLRenderer | undefined"
               },
-              "default": "30"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_canvas",
+              "name": "_scene",
               "type": {
-                "text": "HTMLCanvasElement"
+                "text": "THREE.Scene | undefined"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_container",
+              "name": "_camera",
               "type": {
-                "text": "HTMLDivElement"
+                "text": "THREE.OrthographicCamera | undefined"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_animationFrameId",
+              "name": "_mesh",
               "type": {
-                "text": "number"
+                "text": "THREE.Mesh<THREE.PlaneGeometry, THREE.ShaderMaterial> | undefined"
               },
-              "privacy": "private",
-              "default": "0"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_lastUpdateTime",
+              "name": "_animationFrameId",
               "type": {
                 "text": "number"
               },
@@ -2845,61 +2805,60 @@
             },
             {
               "kind": "field",
-              "name": "_themeObserver",
+              "name": "_animSpeed",
               "type": {
-                "text": "MutationObserver | undefined"
+                "text": "number"
               },
-              "privacy": "private"
+              "privacy": "private",
+              "default": "1.0"
             },
             {
               "kind": "field",
-              "name": "_dataArray",
+              "name": "_curIn",
               "type": {
-                "text": "Uint8Array | undefined"
+                "text": "number"
               },
-              "privacy": "private"
+              "privacy": "private",
+              "default": "0"
             },
             {
               "kind": "field",
-              "name": "_currentBars",
+              "name": "_curOut",
               "type": {
-                "text": "number[]"
+                "text": "number"
               },
               "privacy": "private",
-              "default": "[]"
+              "default": "0"
             },
             {
               "kind": "field",
-              "name": "_processingTime",
+              "name": "_targetColor1",
               "type": {
-                "text": "number"
+                "text": "THREE.Color"
               },
-              "privacy": "private",
-              "default": "0"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_transitionProgress",
+              "name": "_targetColor2",
               "type": {
-                "text": "number"
+                "text": "THREE.Color"
               },
-              "privacy": "private",
-              "default": "0"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_lastActiveData",
+              "name": "_targetColor3",
               "type": {
-                "text": "number[]"
+                "text": "THREE.Color"
               },
-              "privacy": "private",
-              "default": "[]"
+              "privacy": "private"
             },
             {
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :host { display: block; width: 100%; } .container { position: relative; width: 100%; } canvas { position: absolute; top: 0; left: 0; display: block; height: 100%; width: 100%; } `"
+              "default": "css` :host { display: block; width: 100%; height: 100%; position: relative; background-color: #0E0E0F; } .container { width: 100%; height: 100%; } canvas { display: block; width: 100%; height: 100%; } `"
             },
             {
               "kind": "method",
@@ -2918,28 +2877,42 @@
                 {
                   "name": "changedProperties",
                   "type": {
-                    "text": "PropertyValues"
+                    "text": "Map<string, any>"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_handleResize",
+              "name": "_updateColors",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "_startAnimationLoop",
+              "name": "_initThree",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_lastTime",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
             {
               "kind": "method",
-              "name": "_updateData",
+              "name": "_animate",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_clamp01",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "timestamp",
+                  "name": "n",
                   "type": {
                     "text": "number"
                   }
@@ -2947,9 +2920,16 @@
               ]
             },
             {
-              "kind": "method",
-              "name": "_renderFrame",
-              "privacy": "private"
+              "kind": "field",
+              "name": "_vertexShader",
+              "privacy": "private",
+              "default": "` varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 1.0); } `"
+            },
+            {
+              "kind": "field",
+              "name": "_fragmentShader",
+              "privacy": "private",
+              "default": "` uniform float uTime; uniform vec3 uColor1; uniform vec3 uColor2; uniform vec3 uColor3; uniform float uInputVolume; uniform float uOutputVolume; uniform float uOpacity; uniform float uAspect; uniform float uBaseHeight; uniform float uStop1; uniform float uStop2; uniform float uStop3; varying vec2 vUv; // Simple 2D noise function vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); } float snoise(vec2 v){ const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439); vec2 i = floor(v + dot(v, C.yy) ); vec2 x0 = v - i + dot(i, C.xx); vec2 i1; i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0); vec4 x12 = x0.xyxy + C.xxzz; x12.xy -= i1; i = mod(i, 289.0); vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 )) + i.x + vec3(0.0, i1.x, 1.0 )); vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0); m = m*m ; m = m*m ; vec3 x = 2.0 * fract(p * C.www) - 1.0; vec3 h = abs(x) - 0.5; vec3 ox = floor(x + 0.5); vec3 a0 = x - ox; m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h ); vec3 g; g.x = a0.x * x0.x + h.x * x0.y; g.yz = a0.yz * x12.xz + h.yz * x12.yw; return 130.0 * dot(m, g); } void main() { // Normalize coordinates vec2 uv = vUv; // Total combined activity (0.0 to ~1.0) float activity = max(uInputVolume, uOutputVolume); // Base glow height (how far up from the bottom it starts) // Idle is very low (uBaseHeight), active pushes it up (to uBaseHeight + 0.35) float baseHeight = uBaseHeight + (activity * 0.35); // Create an undulating wave effect along the X axis // Combine several sine waves and noise for a natural feel float wave1 = sin(uv.x * 3.0 + uTime * 0.5) * 0.02; float wave2 = cos(uv.x * 5.0 - uTime * 0.8) * 0.015; // Add noise that scales with activity float n = snoise(vec2(uv.x * 2.0 - uTime * 0.2, uTime * 0.1)); float noiseWave = n * (0.02 + activity * 0.08); // Calculate the threshold y-value for this x position float yThreshold = baseHeight + wave1 + wave2 + noiseWave; // Smooth gradient from the bottom up to the threshold // Softness expands slightly when active float softness = 0.2 + (activity * 0.1); // Distance from the \"top\" of the wave. // > 0 means below the wave (solid), < 0 means above (transparent) float dist = yThreshold - uv.y; // Alpha falls off smoothly above the wave threshold, and is solid below it float alpha = smoothstep(-softness, 0.05, dist); // If it's the very bottom of the screen, force opacity up so it doesn't detach alpha = max(alpha, smoothstep(0.05, 0.0, uv.y) * 0.5); // Mix colors based on height and X position to give the gradient a \"sweep\" float colorMix = smoothstep(0.0, yThreshold, uv.y) + (sin(uv.x * 2.0 + uTime) * 0.2); // map the 0.0 -> 1.0 range of colorMix to the 3 colors using the stops float c = clamp(colorMix, 0.0, 1.0); vec3 finalColor; if (c <= uStop2) { float t = (c - uStop1) / max(0.001, uStop2 - uStop1); finalColor = mix(uColor1, uColor2, clamp(t, 0.0, 1.0)); } else { float t = (c - uStop2) / max(0.001, uStop3 - uStop2); finalColor = mix(uColor2, uColor3, clamp(t, 0.0, 1.0)); } // Add a slight bright rim at the edge of the wave when active float rim = smoothstep(0.0, 0.05, dist) * smoothstep(0.1, 0.0, dist); finalColor += vec3(rim * activity * 0.3); // Add brightness at the rim gl_FragColor = vec4(finalColor, alpha * uOpacity); } `"
             }
           ],
           "superclass": {
@@ -2962,123 +2942,177 @@
       "exports": [
         {
           "kind": "js",
-          "name": "UiLiveWaveform",
+          "name": "UiMovingGradient",
           "declaration": {
-            "name": "UiLiveWaveform",
-            "module": "src/components/molecules/ui-live-waveform.ts"
+            "name": "UiMovingGradient",
+            "module": "src/components/molecules/ui-moving-gradient.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/molecules/ui-mic-selector.ts",
+      "path": "src/components/molecules/ui-orb.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A native Lit WebComponent that provides a dropdown menu for selecting audio input devices.\nIt automatically handles permission requests, device enumeration, and provides a\nlive preview waveform of the selected input.",
-          "name": "UiMicSelector",
+          "description": "A 3D WebGL 'Orb' component used to visualize AI agent states.",
+          "name": "UiOrb",
           "members": [
             {
               "kind": "field",
-              "name": "value",
+              "name": "colors",
               "type": {
-                "text": "string"
+                "text": "[string, string] | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "agentState",
+              "type": {
+                "text": "AgentState"
               },
-              "description": "The deviceId of the currently selected audio input."
+              "default": "null"
             },
             {
               "kind": "field",
-              "name": "muted",
+              "name": "inputVolume",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Whether the microphone is visually/logically muted in the selector."
+              "default": "0"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "outputVolume",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Whether the selector interaction is disabled."
+              "default": "0"
             },
             {
               "kind": "field",
-              "name": "_devices",
+              "name": "volumeMode",
               "type": {
-                "text": "AudioDevice[]"
+                "text": "'auto' | 'manual'"
               },
-              "privacy": "private",
-              "default": "[]"
+              "default": "'auto'"
             },
             {
               "kind": "field",
-              "name": "_loading",
+              "name": "seed"
+            },
+            {
+              "kind": "field",
+              "name": "_container",
               "type": {
-                "text": "boolean"
+                "text": "HTMLDivElement"
               },
-              "privacy": "private",
-              "default": "true"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_error",
+              "name": "_renderer",
               "type": {
-                "text": "string | null"
+                "text": "THREE.WebGLRenderer | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_scene",
+              "type": {
+                "text": "THREE.Scene | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_camera",
+              "type": {
+                "text": "THREE.OrthographicCamera | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_mesh",
+              "type": {
+                "text": "THREE.Mesh<THREE.CircleGeometry, THREE.ShaderMaterial> | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_animationFrameId",
+              "type": {
+                "text": "number"
               },
               "privacy": "private",
-              "default": "null"
+              "default": "0"
             },
             {
               "kind": "field",
-              "name": "_hasPermission",
+              "name": "_resizeObserver",
               "type": {
-                "text": "boolean"
+                "text": "ResizeObserver | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_animSpeed",
+              "type": {
+                "text": "number"
               },
               "privacy": "private",
-              "default": "false"
+              "default": "0.1"
             },
             {
               "kind": "field",
-              "name": "_isMenuOpen",
+              "name": "_curIn",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
               "privacy": "private",
-              "default": "false"
+              "default": "0"
             },
             {
               "kind": "field",
-              "name": "_previewAnalyser",
+              "name": "_curOut",
               "type": {
-                "text": "AnalyserNode | undefined"
+                "text": "number"
               },
-              "privacy": "private"
+              "privacy": "private",
+              "default": "0"
             },
             {
               "kind": "field",
-              "name": "_menuEl",
+              "name": "_targetColor1",
               "type": {
-                "text": "any"
+                "text": "THREE.Color"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_previewStream",
+              "name": "_targetColor2",
               "type": {
-                "text": "MediaStream | undefined"
+                "text": "THREE.Color"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_previewAudioContext",
+              "name": "_textureLoader",
+              "privacy": "private",
+              "default": "new THREE.TextureLoader()"
+            },
+            {
+              "kind": "field",
+              "name": "_perlinNoiseTexture",
               "type": {
-                "text": "AudioContext | undefined"
+                "text": "THREE.Texture | undefined"
               },
               "privacy": "private"
             },
@@ -3086,250 +3120,332 @@
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :host { display: inline-block; position: relative; font-family: inherit; color-scheme: light dark; } .anchor-button { display: flex; align-items: center; gap: var(--ui-mic-selector-gap, 8px); padding: var(--ui-mic-selector-padding, 8px 16px); background: var(--md-sys-color-surface-container-high, transparent); color: var(--md-sys-color-on-surface); border-radius: 999px; cursor: pointer; border: 1px solid var(--md-sys-color-outline-variant, currentColor); font-family: inherit; font-size: 14px; font-weight: 500; transition: background-color 0.2s; max-width: 250px; } .anchor-button:hover:not(:disabled) { background: var(--md-sys-color-surface-container-highest); } .anchor-button:disabled { opacity: 0.5; cursor: not-allowed; } .label-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; } md-menu { --md-menu-container-color: var( --md-sys-color-surface-container, var(--md-sys-color-surface) ); --md-menu-container-shape: 12px; min-width: 280px; font-family: inherit; /* Force typescale fonts to inherit project font */ --md-sys-typescale-body-medium-font: inherit; --md-sys-typescale-label-large-font: inherit; border: 1px solid var(--md-sys-color-outline-variant); } md-menu-item { font-family: inherit; --md-menu-item-label-text-font: inherit; --md-sys-typescale-label-large-font: inherit; } md-menu-item div[slot='headline'] { font-family: inherit; } .menu-footer { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; gap: 12px; font-family: inherit; } md-text-button { font-family: inherit; --md-text-button-label-text-font: inherit; --md-sys-typescale-label-large-font: inherit; } .preview-waveform { flex: 1; height: 24px; background: var( --md-sys-color-surface-variant, var(--md-sys-color-surface-container-highest) ); border-radius: 6px; overflow: hidden; display: flex; align-items: center; padding: 0 4px; } `"
+              "default": "css` :host { display: block; width: 100%; height: 100%; position: relative; } .container { width: 100%; height: 100%; } canvas { display: block; width: 100%; height: 100%; } `"
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            },
+            {
+              "kind": "method",
+              "name": "firstUpdated",
+              "privacy": "protected"
             },
             {
               "kind": "method",
               "name": "updated",
+              "privacy": "protected",
               "parameters": [
                 {
                   "name": "changedProperties",
                   "type": {
-                    "text": "PropertyValues"
+                    "text": "Map<string, any>"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "render"
+              "name": "_updateSeed",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "_toggleMenu",
+              "name": "_updateColors",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "_selectDevice",
+              "name": "_initThree",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_lastTime",
+              "type": {
+                "text": "number"
+              },
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "deviceId",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "default": "0"
             },
             {
               "kind": "method",
-              "name": "_toggleMute",
+              "name": "_animate",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_splitmix32",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "a",
                   "type": {
-                    "text": "Event"
+                    "text": "number"
                   }
                 }
               ]
             },
-            {
-              "kind": "field",
-              "name": "_handleDeviceChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "_loadDevicesWithoutPermission",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "_loadDevicesWithPermission",
-              "privacy": "private"
-            },
             {
               "kind": "method",
-              "name": "_parseDeviceList",
+              "name": "_clamp01",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "deviceList",
+                  "name": "n",
                   "type": {
-                    "text": "MediaDeviceInfo[]"
+                    "text": "number"
                   }
                 }
               ]
             },
             {
-              "kind": "method",
-              "name": "_startPreview",
-              "privacy": "private"
+              "kind": "field",
+              "name": "_vertexShader",
+              "privacy": "private",
+              "default": "` uniform float uTime; varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `"
             },
             {
-              "kind": "method",
-              "name": "_stopPreview",
+              "kind": "field",
+              "name": "_fragmentShader",
+              "privacy": "private",
+              "default": "` uniform float uTime; uniform float uAnimation; uniform float uInverted; uniform float uOffsets[7]; uniform vec3 uColor1; uniform vec3 uColor2; uniform float uInputVolume; uniform float uOutputVolume; uniform float uOpacity; uniform sampler2D uPerlinTexture; varying vec2 vUv; const float PI = 3.14159265358979323846; bool drawOval(vec2 polarUv, vec2 polarCenter, float a, float b, bool reverseGradient, float softness, out vec4 color) { vec2 p = polarUv - polarCenter; float oval = (p.x * p.x) / (a * a) + (p.y * p.y) / (b * b); float edge = smoothstep(1.0, 1.0 - softness, oval); if (edge > 0.0) { float gradient = reverseGradient ? (1.0 - (p.x / a + 1.0) / 2.0) : ((p.x / a + 1.0) / 2.0); gradient = mix(0.5, gradient, 0.1); color = vec4(vec3(gradient), 0.85 * edge); return true; } return false; } vec3 colorRamp(float grayscale, vec3 color1, vec3 color2, vec3 color3, vec3 color4) { if (grayscale < 0.33) { return mix(color1, color2, grayscale * 3.0); } else if (grayscale < 0.66) { return mix(color2, color3, (grayscale - 0.33) * 3.0); } else { return mix(color3, color4, (grayscale - 0.66) * 3.0); } } vec2 hash2(vec2 p) { return fract(sin(vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)))) * 43758.5453); } float noise2D(vec2 p) { vec2 i = floor(p); vec2 f = fract(p); vec2 u = f * f * (3.0 - 2.0 * f); float n = mix( mix(dot(hash2(i + vec2(0.0, 0.0)), f - vec2(0.0, 0.0)), dot(hash2(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0)), u.x), mix(dot(hash2(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0)), dot(hash2(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0)), u.x), u.y ); return 0.5 + 0.5 * n; } float sharpRing(vec3 decomposed, float time) { float ringStart = 1.0; float ringWidth = 0.3; float noiseScale = 5.0; float noise = mix( noise2D(vec2(decomposed.x, time) * noiseScale), noise2D(vec2(decomposed.y, time) * noiseScale), decomposed.z ); noise = (noise - 0.5) * 2.5; return ringStart + noise * ringWidth * 1.5; } float smoothRing(vec3 decomposed, float time) { float ringStart = 0.9; float ringWidth = 0.2; float noiseScale = 6.0; float noise = mix( noise2D(vec2(decomposed.x, time) * noiseScale), noise2D(vec2(decomposed.y, time) * noiseScale), decomposed.z ); noise = (noise - 0.5) * 5.0; return ringStart + noise * ringWidth; } float flow(vec3 decomposed, float time) { return mix( texture(uPerlinTexture, vec2(time, decomposed.x / 2.0)).r, texture(uPerlinTexture, vec2(time, decomposed.y / 2.0)).r, decomposed.z ); } void main() { vec2 uv = vUv * 2.0 - 1.0; float radius = length(uv); float theta = atan(uv.y, uv.x); if (theta < 0.0) theta += 2.0 * PI; vec3 decomposed = vec3( theta / (2.0 * PI), mod(theta / (2.0 * PI) + 0.5, 1.0) + 1.0, abs(theta / PI - 1.0) ); float noise = flow(decomposed, radius * 0.03 - uAnimation * 0.2) - 0.5; theta += noise * mix(0.08, 0.25, uOutputVolume); vec4 color = vec4(1.0, 1.0, 1.0, 1.0); float originalCenters[7] = float[7](0.0, 0.5 * PI, 1.0 * PI, 1.5 * PI, 2.0 * PI, 2.5 * PI, 3.0 * PI); float centers[7]; for (int i = 0; i < 7; i++) { centers[i] = originalCenters[i] + 0.5 * sin(uTime / 20.0 + uOffsets[i]); } float a, b; vec4 ovalColor; for (int i = 0; i < 7; i++) { float noise = texture(uPerlinTexture, vec2(mod(centers[i] + uTime * 0.05, 1.0), 0.5)).r; a = 0.5 + noise * 0.3; b = noise * mix(3.5, 2.5, uInputVolume); bool reverseGradient = (i % 2 == 1); float distTheta = min( abs(theta - centers[i]), min(abs(theta + 2.0 * PI - centers[i]), abs(theta - 2.0 * PI - centers[i])) ); if (drawOval(vec2(distTheta, radius), vec2(0.0, 0.0), a, b, reverseGradient, 0.6, ovalColor)) { color.rgb = mix(color.rgb, ovalColor.rgb, ovalColor.a); color.a = max(color.a, ovalColor.a); } } vec3 color1 = vec3(0.0, 0.0, 0.0); vec3 color2 = uColor1; vec3 color3 = uColor2; vec3 color4 = vec3(1.0, 1.0, 1.0); float luminance = mix(color.r, 1.0 - color.r, uInverted); color.rgb = colorRamp(luminance, color1, color2, color3, color4); color.a *= uOpacity; gl_FragColor = color; } `"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UiOrb",
+          "declaration": {
+            "name": "UiOrb",
+            "module": "src/components/molecules/ui-orb.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/molecules/ui-playlist.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A reactive list component that displays and manages a playlist.\nConsumes AudioPlayerState from the nearest ui-audio-provider.",
+          "name": "UiPlaylist",
+          "members": [
+            {
+              "kind": "field",
+              "name": "playerState",
+              "type": {
+                "text": "AudioPlayerState | undefined"
+              },
               "privacy": "private"
-            }
-          ],
-          "events": [
+            },
             {
-              "name": "device-change",
+              "kind": "field",
+              "name": "header",
               "type": {
-                "text": "CustomEvent"
+                "text": "string"
               },
-              "description": "Dispatched when a new device is selected. detail: { deviceId }"
+              "default": "'Queue'",
+              "description": "Title for the playlist header (default: 'Queue')."
             },
             {
-              "name": "mute-change",
+              "kind": "field",
+              "name": "emptyText",
               "type": {
-                "text": "CustomEvent"
+                "text": "string"
               },
-              "description": "Dispatched when the mute state is toggled. detail: { muted }"
+              "default": "'No tracks in queue'",
+              "description": "Message to show when the playlist is empty."
+            },
+            {
+              "kind": "field",
+              "name": "styles",
+              "static": true,
+              "default": "css` :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: var(--ui-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: var(--ui-playlist-empty-padding, 32px); text-align: center; color: var(--md-sys-color-on-surface-variant); font-size: 0.9rem; } `"
+            },
+            {
+              "kind": "method",
+              "name": "render"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "ui-mic-selector",
+          "tagName": "ui-playlist",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "UiMicSelector",
+          "name": "UiPlaylist",
           "declaration": {
-            "name": "UiMicSelector",
-            "module": "src/components/molecules/ui-mic-selector.ts"
+            "name": "UiPlaylist",
+            "module": "src/components/molecules/ui-playlist.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/molecules/ui-orb.ts",
+      "path": "src/components/molecules/ui-scrolling-waveform.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A 3D WebGL 'Orb' component used to visualize AI agent states.",
-          "name": "UiOrb",
+          "description": "A native Lit WebComponent that provides a smooth, infinitely scrolling audio waveform animation.\nReplaces the React/ElevenLabs ScrollingWaveform.",
+          "name": "UiScrollingWaveform",
           "members": [
             {
               "kind": "field",
-              "name": "colors",
+              "name": "speed",
               "type": {
-                "text": "[string, string] | undefined"
-              }
+                "text": "number"
+              },
+              "default": "50"
             },
             {
               "kind": "field",
-              "name": "agentState",
+              "name": "barCount",
               "type": {
-                "text": "AgentState"
+                "text": "number"
               },
-              "default": "null"
+              "default": "60"
             },
             {
               "kind": "field",
-              "name": "inputVolume",
+              "name": "barWidth",
               "type": {
                 "text": "number"
               },
-              "default": "0"
+              "default": "4"
             },
             {
               "kind": "field",
-              "name": "outputVolume",
+              "name": "barHeight",
               "type": {
                 "text": "number"
               },
-              "default": "0"
+              "default": "4"
             },
             {
               "kind": "field",
-              "name": "volumeMode",
+              "name": "barGap",
               "type": {
-                "text": "'auto' | 'manual'"
+                "text": "number"
               },
-              "default": "'auto'"
+              "default": "2"
             },
             {
               "kind": "field",
-              "name": "seed"
+              "name": "barRadius",
+              "type": {
+                "text": "number"
+              },
+              "default": "2"
             },
             {
               "kind": "field",
-              "name": "_container",
+              "name": "barColor",
               "type": {
-                "text": "HTMLDivElement"
-              },
-              "privacy": "private"
+                "text": "string | undefined"
+              }
             },
             {
               "kind": "field",
-              "name": "_renderer",
+              "name": "fadeEdges",
               "type": {
-                "text": "THREE.WebGLRenderer | undefined"
+                "text": "boolean"
               },
-              "privacy": "private"
+              "default": "true"
             },
             {
               "kind": "field",
-              "name": "_scene",
+              "name": "fadeWidth",
               "type": {
-                "text": "THREE.Scene | undefined"
+                "text": "number"
               },
-              "privacy": "private"
+              "default": "24"
             },
             {
               "kind": "field",
-              "name": "_camera",
+              "name": "height",
               "type": {
-                "text": "THREE.OrthographicCamera | undefined"
+                "text": "number | string | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "align",
+              "type": {
+                "text": "'center' | 'bottom' | 'top'"
               },
-              "privacy": "private"
+              "default": "'center'"
             },
             {
               "kind": "field",
-              "name": "_mesh",
+              "name": "data",
               "type": {
-                "text": "THREE.Mesh<THREE.CircleGeometry, THREE.ShaderMaterial> | undefined"
+                "text": "number[] | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "peaks",
+              "type": {
+                "text": "number[] | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "analyserNode",
+              "type": {
+                "text": "AnalyserNode | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "active",
+              "type": {
+                "text": "boolean"
               },
-              "privacy": "private"
+              "default": "true"
             },
             {
               "kind": "field",
-              "name": "_animationFrameId",
+              "name": "_canvas",
               "type": {
-                "text": "number"
+                "text": "HTMLCanvasElement"
               },
-              "privacy": "private",
-              "default": "0"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_resizeObserver",
+              "name": "_container",
               "type": {
-                "text": "ResizeObserver | undefined"
+                "text": "HTMLDivElement"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_animSpeed",
+              "name": "_resizeObserver",
               "type": {
-                "text": "number"
+                "text": "ResizeObserver | undefined"
               },
-              "privacy": "private",
-              "default": "0.1"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_curIn",
+              "name": "_animationFrameId",
               "type": {
                 "text": "number"
               },
@@ -3338,7 +3454,7 @@
             },
             {
               "kind": "field",
-              "name": "_curOut",
+              "name": "_lastTime",
               "type": {
                 "text": "number"
               },
@@ -3347,39 +3463,40 @@
             },
             {
               "kind": "field",
-              "name": "_targetColor1",
+              "name": "_dataArray",
               "type": {
-                "text": "THREE.Color"
+                "text": "Uint8Array | undefined"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_targetColor2",
+              "name": "_bars",
               "type": {
-                "text": "THREE.Color"
+                "text": "BarData[]"
               },
-              "privacy": "private"
+              "privacy": "private",
+              "default": "[]"
             },
             {
               "kind": "field",
-              "name": "_textureLoader",
-              "privacy": "private",
-              "default": "new THREE.TextureLoader()"
+              "name": "_seed",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_perlinNoiseTexture",
+              "name": "_dataIndex",
               "type": {
-                "text": "THREE.Texture | undefined"
+                "text": "number"
               },
-              "privacy": "private"
+              "privacy": "private",
+              "default": "0"
             },
             {
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :host { display: block; width: 100%; height: 100%; position: relative; } .container { width: 100%; height: 100%; } canvas { display: block; width: 100%; height: 100%; } `"
+              "default": "css` :host { display: block; width: 100%; height: 128px; /* default height, can be overridden by CSS */ } .container { position: relative; width: 100%; height: 100%; overflow: hidden; } canvas { position: absolute; top: 0; left: 0; display: block; height: 100%; width: 100%; } `"
             },
             {
               "kind": "method",
@@ -3387,58 +3504,20 @@
             },
             {
               "kind": "method",
-              "name": "firstUpdated",
-              "privacy": "protected"
-            },
-            {
-              "kind": "method",
-              "name": "updated",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "changedProperties",
-                  "type": {
-                    "text": "Map<string, any>"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_updateSeed",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "_updateColors",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "_initThree",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "_lastTime",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "private",
-              "default": "0"
+              "name": "firstUpdated"
             },
             {
               "kind": "method",
-              "name": "_animate",
+              "name": "_handleResize",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "_splitmix32",
+              "name": "_seededRandom",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "a",
+                  "name": "index",
                   "type": {
                     "text": "number"
                   }
@@ -3447,28 +3526,13 @@
             },
             {
               "kind": "method",
-              "name": "_clamp01",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "n",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "field",
-              "name": "_vertexShader",
-              "privacy": "private",
-              "default": "` uniform float uTime; varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `"
+              "name": "_populateInitialBars",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "_fragmentShader",
-              "privacy": "private",
-              "default": "` uniform float uTime; uniform float uAnimation; uniform float uInverted; uniform float uOffsets[7]; uniform vec3 uColor1; uniform vec3 uColor2; uniform float uInputVolume; uniform float uOutputVolume; uniform float uOpacity; uniform sampler2D uPerlinTexture; varying vec2 vUv; const float PI = 3.14159265358979323846; bool drawOval(vec2 polarUv, vec2 polarCenter, float a, float b, bool reverseGradient, float softness, out vec4 color) { vec2 p = polarUv - polarCenter; float oval = (p.x * p.x) / (a * a) + (p.y * p.y) / (b * b); float edge = smoothstep(1.0, 1.0 - softness, oval); if (edge > 0.0) { float gradient = reverseGradient ? (1.0 - (p.x / a + 1.0) / 2.0) : ((p.x / a + 1.0) / 2.0); gradient = mix(0.5, gradient, 0.1); color = vec4(vec3(gradient), 0.85 * edge); return true; } return false; } vec3 colorRamp(float grayscale, vec3 color1, vec3 color2, vec3 color3, vec3 color4) { if (grayscale < 0.33) { return mix(color1, color2, grayscale * 3.0); } else if (grayscale < 0.66) { return mix(color2, color3, (grayscale - 0.33) * 3.0); } else { return mix(color3, color4, (grayscale - 0.66) * 3.0); } } vec2 hash2(vec2 p) { return fract(sin(vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)))) * 43758.5453); } float noise2D(vec2 p) { vec2 i = floor(p); vec2 f = fract(p); vec2 u = f * f * (3.0 - 2.0 * f); float n = mix( mix(dot(hash2(i + vec2(0.0, 0.0)), f - vec2(0.0, 0.0)), dot(hash2(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0)), u.x), mix(dot(hash2(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0)), dot(hash2(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0)), u.x), u.y ); return 0.5 + 0.5 * n; } float sharpRing(vec3 decomposed, float time) { float ringStart = 1.0; float ringWidth = 0.3; float noiseScale = 5.0; float noise = mix( noise2D(vec2(decomposed.x, time) * noiseScale), noise2D(vec2(decomposed.y, time) * noiseScale), decomposed.z ); noise = (noise - 0.5) * 2.5; return ringStart + noise * ringWidth * 1.5; } float smoothRing(vec3 decomposed, float time) { float ringStart = 0.9; float ringWidth = 0.2; float noiseScale = 6.0; float noise = mix( noise2D(vec2(decomposed.x, time) * noiseScale), noise2D(vec2(decomposed.y, time) * noiseScale), decomposed.z ); noise = (noise - 0.5) * 5.0; return ringStart + noise * ringWidth; } float flow(vec3 decomposed, float time) { return mix( texture(uPerlinTexture, vec2(time, decomposed.x / 2.0)).r, texture(uPerlinTexture, vec2(time, decomposed.y / 2.0)).r, decomposed.z ); } void main() { vec2 uv = vUv * 2.0 - 1.0; float radius = length(uv); float theta = atan(uv.y, uv.x); if (theta < 0.0) theta += 2.0 * PI; vec3 decomposed = vec3( theta / (2.0 * PI), mod(theta / (2.0 * PI) + 0.5, 1.0) + 1.0, abs(theta / PI - 1.0) ); float noise = flow(decomposed, radius * 0.03 - uAnimation * 0.2) - 0.5; theta += noise * mix(0.08, 0.25, uOutputVolume); vec4 color = vec4(1.0, 1.0, 1.0, 1.0); float originalCenters[7] = float[7](0.0, 0.5 * PI, 1.0 * PI, 1.5 * PI, 2.0 * PI, 2.5 * PI, 3.0 * PI); float centers[7]; for (int i = 0; i < 7; i++) { centers[i] = originalCenters[i] + 0.5 * sin(uTime / 20.0 + uOffsets[i]); } float a, b; vec4 ovalColor; for (int i = 0; i < 7; i++) { float noise = texture(uPerlinTexture, vec2(mod(centers[i] + uTime * 0.05, 1.0), 0.5)).r; a = 0.5 + noise * 0.3; b = noise * mix(3.5, 2.5, uInputVolume); bool reverseGradient = (i % 2 == 1); float distTheta = min( abs(theta - centers[i]), min(abs(theta + 2.0 * PI - centers[i]), abs(theta - 2.0 * PI - centers[i])) ); if (drawOval(vec2(distTheta, radius), vec2(0.0, 0.0), a, b, reverseGradient, 0.6, ovalColor)) { color.rgb = mix(color.rgb, ovalColor.rgb, ovalColor.a); color.a = max(color.a, ovalColor.a); } } vec3 color1 = vec3(0.0, 0.0, 0.0); vec3 color2 = uColor1; vec3 color3 = uColor2; vec3 color4 = vec3(1.0, 1.0, 1.0); float luminance = mix(color.r, 1.0 - color.r, uInverted); color.rgb = colorRamp(luminance, color1, color2, color3, color4); color.a *= uOpacity; gl_FragColor = color; } `"
+              "kind": "method",
+              "name": "_startAnimation",
+              "privacy": "private"
             }
           ],
           "superclass": {
@@ -3481,54 +3545,52 @@
       "exports": [
         {
           "kind": "js",
-          "name": "UiOrb",
+          "name": "UiScrollingWaveform",
           "declaration": {
-            "name": "UiOrb",
-            "module": "src/components/molecules/ui-orb.ts"
+            "name": "UiScrollingWaveform",
+            "module": "src/components/molecules/ui-scrolling-waveform.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/molecules/ui-playlist.ts",
+      "path": "src/components/molecules/ui-showcase-card.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A reactive list component that displays and manages a playlist.\nConsumes AudioPlayerState from the nearest ui-audio-provider.",
-          "name": "UiPlaylist",
+          "description": "A container component used in the demo to showcase individual components.",
+          "name": "UiShowcaseCard",
           "members": [
             {
               "kind": "field",
-              "name": "playerState",
+              "name": "title",
               "type": {
-                "text": "AudioPlayerState | undefined"
+                "text": "string"
               },
-              "privacy": "private"
+              "default": "'Component'"
             },
             {
               "kind": "field",
-              "name": "header",
+              "name": "description",
               "type": {
                 "text": "string"
               },
-              "default": "'Queue'",
-              "description": "Title for the playlist header (default: 'Queue')."
+              "default": "''"
             },
             {
               "kind": "field",
-              "name": "emptyText",
+              "name": "mode",
               "type": {
-                "text": "string"
+                "text": "'preview' | 'code'"
               },
-              "default": "'No tracks in queue'",
-              "description": "Message to show when the playlist is empty."
+              "default": "'preview'"
             },
             {
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :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: var(--ui-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: var(--ui-playlist-empty-padding, 32px); text-align: center; color: var(--md-sys-color-on-surface-variant); font-size: 0.9rem; } `"
+              "default": "css` :host { display: block; border-radius: 12px; background: var(--md-sys-color-surface-container-low, #f7f9fc); border: 1px solid var(--md-sys-color-outline-variant, #e0e0e0); overflow: hidden; margin-bottom: var(--ui-showcase-card-margin-bottom, 24px); } .header { padding: var(--ui-showcase-card-header-padding, 16px 20px); border-bottom: 1px solid var(--md-sys-color-outline-variant, #e0e0e0); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .title-group h3 { margin: 0; font-size: 1.1rem; color: var(--md-sys-color-on-surface, #1e1e1e); } .title-group p { margin: 4px 0 0; font-size: 0.85rem; color: var(--md-sys-color-on-surface-variant, #444); } .tabs { display: flex; gap: 8px; } .tab-btn { padding: 6px 12px; background: transparent; border: 1px solid var(--md-sys-color-outline, #79747e); border-radius: 8px; color: var(--md-sys-color-on-surface-variant, #444); font-family: inherit; font-weight: 500; font-size: 0.85rem; cursor: pointer; transition: all 0.2s; } .tab-btn:hover { background: var(--md-sys-color-surface-container-highest, #e3e3e3); } .tab-btn.active { background: var(--md-sys-color-secondary-container, #e8def8); color: var(--md-sys-color-on-secondary-container, #1d192b); border-color: transparent; } .content { padding: var(--ui-showcase-card-content-padding, 24px); min-height: 100px; position: relative; } .preview-panel { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 16px; } :host([mode='code']) .preview-panel { position: absolute; visibility: hidden; pointer-events: none; height: 0; overflow: hidden; } .code-panel { display: none; background: var(--md-sys-color-surface-container-highest, #1e1e1e); color: var(--md-sys-color-on-surface, #e3e3e3); padding: 16px; border-radius: 8px; overflow-x: auto; font-family: 'Courier New', Courier, monospace; font-size: 0.85rem; line-height: 1.5; margin: 0; border: 1px solid var(--md-sys-color-outline-variant, #e0e0e0); } :host([mode='code']) .code-panel { display: block; } `"
             },
             {
               "kind": "method",
@@ -3539,260 +3601,356 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "ui-playlist",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "UiPlaylist",
+          "name": "UiShowcaseCard",
           "declaration": {
-            "name": "UiPlaylist",
-            "module": "src/components/molecules/ui-playlist.ts"
+            "name": "UiShowcaseCard",
+            "module": "src/components/molecules/ui-showcase-card.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/molecules/ui-scrolling-waveform.ts",
+      "path": "src/components/molecules/ui-spectrum-visualizer.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A native Lit WebComponent that provides a smooth, infinitely scrolling audio waveform animation.\nReplaces the React/ElevenLabs ScrollingWaveform.",
-          "name": "UiScrollingWaveform",
+          "description": "A standard frequency spectrum visualizer (bars).\nAutomatically consumes AudioPlayerState from the nearest ui-audio-provider.",
+          "name": "UiSpectrumVisualizer",
           "members": [
             {
               "kind": "field",
-              "name": "speed",
+              "name": "playerState",
               "type": {
-                "text": "number"
+                "text": "AudioPlayerState | undefined"
               },
-              "default": "50"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "barCount",
+              "name": "barWidth",
               "type": {
                 "text": "number"
               },
-              "default": "60"
+              "default": "4",
+              "description": "Width of each spectrum bar (default: 4)."
             },
             {
               "kind": "field",
-              "name": "barWidth",
+              "name": "barGap",
               "type": {
                 "text": "number"
               },
-              "default": "4"
+              "default": "2",
+              "description": "Gap between bars (default: 2)."
             },
             {
               "kind": "field",
-              "name": "barHeight",
+              "name": "height",
               "type": {
                 "text": "number"
               },
-              "default": "4"
+              "description": "Container height (default: 100)."
             },
             {
               "kind": "field",
-              "name": "barGap",
+              "name": "color",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "2"
+              "description": "Bar color. Falls back to --md-sys-color-primary."
             },
             {
               "kind": "field",
-              "name": "barRadius",
+              "name": "_canvas",
               "type": {
-                "text": "number"
+                "text": "HTMLCanvasElement"
               },
-              "default": "2"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "barColor",
+              "name": "_animationFrameId",
               "type": {
-                "text": "string | undefined"
-              }
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
             },
             {
               "kind": "field",
-              "name": "fadeEdges",
+              "name": "_dataArray",
               "type": {
-                "text": "boolean"
+                "text": "Uint8Array | undefined"
               },
-              "default": "true"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "fadeWidth",
-              "type": {
-                "text": "number"
-              },
-              "default": "24"
+              "name": "styles",
+              "static": true,
+              "default": "css` :host { display: block; width: 100%; height: 100px; /* default height, can be overridden by CSS */ overflow: hidden; } canvas { display: block; width: 100%; height: 100%; } `"
             },
             {
-              "kind": "field",
-              "name": "height",
-              "type": {
-                "text": "number"
-              },
-              "default": "128"
+              "kind": "method",
+              "name": "render"
+            },
+            {
+              "kind": "method",
+              "name": "firstUpdated"
+            },
+            {
+              "kind": "method",
+              "name": "_startLoop",
+              "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "_renderFrame",
+              "privacy": "private"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "ui-spectrum-visualizer",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UiSpectrumVisualizer",
+          "declaration": {
+            "name": "UiSpectrumVisualizer",
+            "module": "src/components/molecules/ui-spectrum-visualizer.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/molecules/ui-speech-preview.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "UiSpeechPreview",
+          "members": [
             {
               "kind": "field",
-              "name": "align",
+              "name": "_context",
               "type": {
-                "text": "'center' | 'bottom' | 'top'"
+                "text": "SpeechContext | undefined"
               },
-              "default": "'center'"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "data",
+              "name": "placeholder",
               "type": {
-                "text": "number[] | undefined"
-              }
+                "text": "string"
+              },
+              "default": "'Jot down some thoughts...'"
             },
             {
               "kind": "field",
-              "name": "peaks",
-              "type": {
-                "text": "number[] | undefined"
-              }
+              "name": "styles",
+              "static": true,
+              "default": "css` :host { display: inline-flex; align-items: center; gap: var(--ui-speech-preview-gap, 8px); font-family: inherit; min-width: 0; color: var(--md-sys-color-primary); } .transcript { font-size: var(--ui-speech-preview-font-size, 14px); font-family: var(--ui-speech-preview-font-family, inherit); color: var(--md-sys-color-on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } .placeholder { color: var(--md-sys-color-on-surface-variant); opacity: 0.7; font-style: italic; } .waveform-container { width: 32px; height: 24px; display: flex; align-items: center; justify-content: center; background: transparent; border-radius: 4px; transition: all 0.3s ease; } .hidden { width: 0; opacity: 0; pointer-events: none; margin-left: -8px; } `"
             },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UiSpeechPreview",
+          "declaration": {
+            "name": "UiSpeechPreview",
+            "module": "src/components/molecules/ui-speech-preview.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/molecules/ui-typing-indicator.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "MOLECULE: Typing Indicator\nA group of animated dots indicating active 'typing' or 'thinking' state.",
+          "name": "UiTypingIndicator",
+          "members": [
             {
               "kind": "field",
-              "name": "analyserNode",
-              "type": {
-                "text": "AnalyserNode | undefined"
-              }
+              "name": "styles",
+              "static": true,
+              "default": "css` :host { display: inline-flex; align-items: center; gap: var(--ui-typing-indicator-gap, 4px); padding: var(--ui-typing-indicator-padding, 8px 12px); background: var(--md-sys-color-surface-container-low); border-radius: 12px; border-bottom-left-radius: 4px; } `"
             },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "ui-typing-indicator",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UiTypingIndicator",
+          "declaration": {
+            "name": "UiTypingIndicator",
+            "module": "src/components/molecules/ui-typing-indicator.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/molecules/ui-voice-button.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A native Lit WebComponent replacement for the ElevenLabs React voice-button.\nNow refactored to consume speechContext but maintains backward compatibility\nfor manual state control.",
+          "name": "UiVoiceButton",
+          "members": [
             {
               "kind": "field",
-              "name": "active",
+              "name": "_context",
               "type": {
-                "text": "boolean"
+                "text": "SpeechContext | undefined"
               },
-              "default": "true"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_canvas",
+              "name": "state",
               "type": {
-                "text": "HTMLCanvasElement"
+                "text": "VoiceButtonState"
               },
-              "privacy": "private"
+              "default": "'idle'"
             },
             {
               "kind": "field",
-              "name": "_container",
+              "name": "label",
               "type": {
-                "text": "HTMLDivElement"
-              },
-              "privacy": "private"
+                "text": "string | undefined"
+              }
             },
             {
               "kind": "field",
-              "name": "_resizeObserver",
+              "name": "trailing",
               "type": {
-                "text": "ResizeObserver | undefined"
-              },
-              "privacy": "private"
+                "text": "string | undefined"
+              }
             },
             {
               "kind": "field",
-              "name": "_animationFrameId",
+              "name": "disabled",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "privacy": "private",
-              "default": "0"
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "_lastTime",
+              "name": "analyserNode",
               "type": {
-                "text": "number"
-              },
-              "privacy": "private",
-              "default": "0"
+                "text": "AnalyserNode | undefined"
+              }
             },
             {
               "kind": "field",
-              "name": "_dataArray",
+              "name": "_showFeedback",
               "type": {
-                "text": "Uint8Array | undefined"
+                "text": "boolean"
               },
-              "privacy": "private"
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "_bars",
+              "name": "_feedbackType",
               "type": {
-                "text": "BarData[]"
+                "text": "'success' | 'error' | null"
               },
               "privacy": "private",
-              "default": "[]"
-            },
-            {
-              "kind": "field",
-              "name": "_seed",
-              "privacy": "private"
+              "default": "null"
             },
             {
               "kind": "field",
-              "name": "_dataIndex",
+              "name": "_feedbackTimeout",
               "type": {
-                "text": "number"
+                "text": "ReturnType<typeof setTimeout> | undefined"
               },
-              "privacy": "private",
-              "default": "0"
+              "privacy": "private"
             },
             {
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :host { display: block; width: 100%; } .container { position: relative; width: 100%; overflow: hidden; } canvas { position: absolute; top: 0; left: 0; display: block; height: 100%; width: 100%; } `"
-            },
-            {
-              "kind": "method",
-              "name": "render"
+              "default": "css` :host { display: inline-block; --ui-waveform-height: 24px; --ui-waveform-width: 96px; } .wrapper { display: flex; align-items: center; justify-content: center; /* Dynamic gap based on state to ensure perfect centering */ gap: 0; min-width: 100%; transition: gap 0.3s ease; } .wrapper.active { gap: 12px; } md-filled-button, md-outlined-button { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-family: inherit; min-width: 140px; } md-filled-button.recording { --md-filled-button-container-color: var( --ui-speech-record-color, #ffdad6 ); --md-filled-button-label-text-color: #410002; } .waveform-slot { position: relative; width: 0; height: var(--ui-waveform-height); border-radius: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: transparent; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; opacity: 0; } .waveform-slot.active { width: var(--ui-waveform-width); opacity: 1; } .feedback-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: inherit; border-radius: inherit; animation: fadeIn 0.3s ease forwards; pointer-events: none; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 0.9; } } `"
             },
             {
               "kind": "method",
-              "name": "firstUpdated"
+              "name": "updated",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "changedProperties",
+                  "type": {
+                    "text": "PropertyValues"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "_handleResize",
-              "privacy": "private"
+              "name": "render"
             },
             {
               "kind": "method",
-              "name": "_seededRandom",
+              "name": "_handleClick",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "index",
+                  "name": "_e",
                   "type": {
-                    "text": "number"
+                    "text": "Event"
                   }
                 }
               ]
-            },
-            {
-              "kind": "method",
-              "name": "_populateInitialBars",
-              "privacy": "private"
-            },
+            }
+          ],
+          "events": [
             {
-              "kind": "method",
-              "name": "_startAnimation",
-              "privacy": "private"
+              "name": "voice-button-click",
+              "type": {
+                "text": "CustomEvent"
+              }
             }
           ],
           "superclass": {
@@ -3805,150 +3963,132 @@
       "exports": [
         {
           "kind": "js",
-          "name": "UiScrollingWaveform",
+          "name": "UiVoiceButton",
           "declaration": {
-            "name": "UiScrollingWaveform",
-            "module": "src/components/molecules/ui-scrolling-waveform.ts"
+            "name": "UiVoiceButton",
+            "module": "src/components/molecules/ui-voice-button.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/molecules/ui-showcase-card.ts",
+      "path": "src/components/molecules/ui-voice-picker.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A container component used in the demo to showcase individual components.",
-          "name": "UiShowcaseCard",
+          "description": "A native Lit WebComponent that provides a searchable dropdown menu for selecting\na voice persona. It supports custom data mapping, optional 3D 'Orb' avatars,\nand built-in audio preview capabilities.",
+          "name": "UiVoicePicker",
           "members": [
             {
               "kind": "field",
-              "name": "title",
+              "name": "voices",
               "type": {
-                "text": "string"
+                "text": "Array"
               },
-              "default": "'Component'"
+              "default": "[]",
+              "description": "The list of voice objects to display."
             },
             {
               "kind": "field",
-              "name": "description",
+              "name": "value",
               "type": {
                 "text": "string"
               },
-              "default": "''"
+              "description": "The ID of the currently selected voice."
             },
             {
               "kind": "field",
-              "name": "mode",
+              "name": "placeholder",
               "type": {
-                "text": "'preview' | 'code'"
+                "text": "string"
               },
-              "default": "'preview'"
+              "default": "'Select a voice...'",
+              "description": "Text to display when no voice is selected."
             },
             {
               "kind": "field",
-              "name": "styles",
-              "static": true,
-              "default": "css` :host { display: block; border-radius: 12px; background: var(--md-sys-color-surface-container-low, #f7f9fc); border: 1px solid var(--md-sys-color-outline-variant, #e0e0e0); overflow: hidden; margin-bottom: var(--ui-showcase-card-margin-bottom, 24px); } .header { padding: var(--ui-showcase-card-header-padding, 16px 20px); border-bottom: 1px solid var(--md-sys-color-outline-variant, #e0e0e0); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .title-group h3 { margin: 0; font-size: 1.1rem; color: var(--md-sys-color-on-surface, #1e1e1e); } .title-group p { margin: 4px 0 0; font-size: 0.85rem; color: var(--md-sys-color-on-surface-variant, #444); } .tabs { display: flex; gap: 8px; } .tab-btn { padding: 6px 12px; background: transparent; border: 1px solid var(--md-sys-color-outline, #79747e); border-radius: 8px; color: var(--md-sys-color-on-surface-variant, #444); font-family: inherit; font-weight: 500; font-size: 0.85rem; cursor: pointer; transition: all 0.2s; } .tab-btn:hover { background: var(--md-sys-color-surface-container-highest, #e3e3e3); } .tab-btn.active { background: var(--md-sys-color-secondary-container, #e8def8); color: var(--md-sys-color-on-secondary-container, #1d192b); border-color: transparent; } .content { padding: var(--ui-showcase-card-content-padding, 24px); min-height: 100px; position: relative; } .preview-panel { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 16px; } :host([mode='code']) .preview-panel { position: absolute; visibility: hidden; pointer-events: none; height: 0; overflow: hidden; } .code-panel { display: none; background: var(--md-sys-color-surface-container-highest, #1e1e1e); color: var(--md-sys-color-on-surface, #e3e3e3); padding: 16px; border-radius: 8px; overflow-x: auto; font-family: 'Courier New', Courier, monospace; font-size: 0.85rem; line-height: 1.5; margin: 0; border: 1px solid var(--md-sys-color-outline-variant, #e0e0e0); } :host([mode='code']) .code-panel { display: block; } `"
+              "name": "idKey",
+              "type": {
+                "text": "string"
+              },
+              "default": "'voiceId'",
+              "description": "Key in the voice object to use as the unique ID (default: 'voiceId')."
             },
             {
-              "kind": "method",
-              "name": "render"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UiShowcaseCard",
-          "declaration": {
-            "name": "UiShowcaseCard",
-            "module": "src/components/molecules/ui-showcase-card.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/molecules/ui-spectrum-visualizer.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A standard frequency spectrum visualizer (bars).\nAutomatically consumes AudioPlayerState from the nearest ui-audio-provider.",
-          "name": "UiSpectrumVisualizer",
-          "members": [
+              "kind": "field",
+              "name": "titleKey",
+              "type": {
+                "text": "string"
+              },
+              "default": "'name'",
+              "description": "Key in the voice object to use as the display name (default: 'name')."
+            },
             {
               "kind": "field",
-              "name": "playerState",
+              "name": "subtitleKey",
               "type": {
-                "text": "AudioPlayerState | undefined"
+                "text": "string"
               },
-              "privacy": "private"
+              "default": "'category'",
+              "description": "Key in the voice object to use as the category/subtitle (default: 'category')."
             },
             {
               "kind": "field",
-              "name": "barWidth",
+              "name": "previewUrlKey",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "4",
-              "description": "Width of each spectrum bar (default: 4)."
+              "default": "'previewUrl'",
+              "description": "Key in the voice object containing the preview audio URL."
             },
             {
               "kind": "field",
-              "name": "barGap",
+              "name": "useOrbs",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "2",
-              "description": "Gap between bars (default: 2)."
+              "default": "false",
+              "description": "Whether to display 3D ui-orb avatars for each voice."
             },
             {
               "kind": "field",
-              "name": "height",
+              "name": "colorKey",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "100",
-              "description": "Container height (default: 100)."
+              "default": "'colors'"
             },
             {
               "kind": "field",
-              "name": "color",
+              "name": "_searchQuery",
               "type": {
                 "text": "string"
               },
-              "description": "Bar color. Falls back to --md-sys-color-primary."
+              "privacy": "private",
+              "default": "''"
             },
             {
               "kind": "field",
-              "name": "_canvas",
+              "name": "_previewingVoiceId",
               "type": {
-                "text": "HTMLCanvasElement"
+                "text": "string | undefined"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_animationFrameId",
+              "name": "_menuEl",
               "type": {
-                "text": "number"
+                "text": "any"
               },
-              "privacy": "private",
-              "default": "0"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_dataArray",
+              "name": "_audioEl",
               "type": {
-                "text": "Uint8Array | undefined"
+                "text": "HTMLAudioElement"
               },
               "privacy": "private"
             },
@@ -3956,7 +4096,7 @@
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :host { display: block; width: 100%; overflow: hidden; } canvas { display: block; width: 100%; height: 100%; } `"
+              "default": "css` :host { display: inline-block; width: 100%; font-family: inherit; color-scheme: light dark; } .anchor-button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--ui-voice-picker-padding, 8px 16px); background: var( --ui-voice-picker-anchor-bg, var(--md-sys-color-surface-container-high, transparent) ); border: 1px solid var(--md-sys-color-outline-variant, currentColor); border-radius: 8px; color: var(--md-sys-color-on-surface); cursor: pointer; font-family: inherit; font-size: 14px; min-height: 48px; transition: background-color 0.2s, border-color 0.2s; } .anchor-button:hover { background: var(--md-sys-color-surface-container-highest); } .anchor-button:focus-visible { outline: none; border-color: var(--md-sys-color-primary); box-shadow: 0 0 0 1px var(--md-sys-color-primary); } .trigger-content { display: flex; align-items: center; justify-content: space-between; width: 100%; min-width: 100%; padding: 4px 0; } .trigger-left { display: flex; align-items: center; gap: var(--ui-voice-picker-trigger-gap, 12px); overflow: hidden; } .trigger-icon { width: 24px; height: 24px; border-radius: 50%; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .trigger-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--md-sys-color-on-surface); } md-menu { --md-menu-container-shape: 12px; --md-menu-container-color: var( --md-sys-color-surface-container, var(--md-sys-color-surface) ); max-width: 400px; font-family: inherit; --md-sys-typescale-body-medium-font: inherit; border: 1px solid var(--md-sys-color-outline-variant); } .search-container { padding: 8px 12px; background: var(--md-sys-color-surface-container); border-bottom: 1px solid var(--md-sys-color-outline-variant); font-family: inherit; } md-outlined-text-field { width: 100%; --md-outlined-text-field-container-shape: 8px; font-family: inherit; --md-outlined-text-field-label-text-font: inherit; --md-outlined-text-field-input-text-font: inherit; --md-sys-typescale-body-large-font: inherit; } md-menu-item { --md-menu-item-hover-state-layer-color: var( --md-sys-color-on-surface-variant ); --md-menu-item-focus-state-layer-color: var( --md-sys-color-on-surface-variant ); --md-menu-item-label-text-color: var(--md-sys-color-on-surface); --md-menu-item-label-text-font: inherit; --md-sys-typescale-label-large-font: inherit; font-family: inherit; } .voice-item-content { display: flex; align-items: center; gap: var(--ui-voice-picker-item-gap, 16px); width: 100%; padding: var(--ui-voice-picker-item-padding, 8px 0); } .voice-avatar { position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--md-sys-color-surface-variant); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; overflow: hidden; color: var(--md-sys-color-on-surface-variant); z-index: 2; /* Keep above the menu item ripple */ } .voice-avatar:hover .play-overlay { opacity: 1; } .play-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; color: white; opacity: 0; transition: opacity 0.2s; border-radius: 50%; } .play-overlay.active { opacity: 1; background: rgba(0, 0, 0, 0.6); } .voice-info { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow: hidden; } .voice-name { font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--md-sys-color-on-surface); } .voice-labels { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--md-sys-color-on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .label-dot { font-size: 8px; } .empty-state { padding: 24px; text-align: center; color: var(--md-sys-color-on-surface-variant); font-size: 14px; } `"
             },
             {
               "kind": "method",
@@ -3964,46 +4104,88 @@
             },
             {
               "kind": "method",
-              "name": "firstUpdated"
+              "name": "_toggleMenu",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "_startLoop",
+              "name": "_handleMenuClosed",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "_renderFrame",
+              "name": "_selectVoice",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "voiceId",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_togglePreview",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                },
+                {
+                  "name": "voice",
+                  "type": {
+                    "text": "VoiceItem"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_stopPreview",
               "privacy": "private"
             }
           ],
+          "events": [
+            {
+              "name": "voice-change",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Dispatched when a voice is selected. detail: { voiceId }"
+            }
+          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "ui-spectrum-visualizer",
+          "tagName": "ui-voice-picker",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "UiSpectrumVisualizer",
+          "name": "UiVoicePicker",
           "declaration": {
-            "name": "UiSpectrumVisualizer",
-            "module": "src/components/molecules/ui-spectrum-visualizer.ts"
+            "name": "UiVoicePicker",
+            "module": "src/components/molecules/ui-voice-picker.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/molecules/ui-speech-preview.ts",
+      "path": "src/components/molecules/ui-voice-pill.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "UiSpeechPreview",
+          "description": "A composite \"Pill\" style voice interaction component.\nIt combines the recording button, a live waveform, and a cancel button\ninto a single cohesive UI element.",
+          "name": "UiVoicePill",
           "members": [
             {
               "kind": "field",
@@ -4015,55 +4197,63 @@
             },
             {
               "kind": "field",
-              "name": "placeholder",
+              "name": "label",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
               },
-              "default": "'Jot down some thoughts...'"
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "styles",
-              "static": true,
-              "default": "css` :host { display: inline-flex; align-items: center; gap: var(--ui-speech-preview-gap, 8px); font-family: inherit; min-width: 0; color: var(--md-sys-color-primary); } .transcript { font-size: var(--ui-speech-preview-font-size, 14px); font-family: var(--ui-speech-preview-font-family, inherit); color: var(--md-sys-color-on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } .placeholder { color: var(--md-sys-color-on-surface-variant); opacity: 0.7; font-style: italic; } .waveform-container { width: 32px; height: 24px; display: flex; align-items: center; justify-content: center; background: transparent; border-radius: 4px; transition: all 0.3s ease; } .hidden { width: 0; opacity: 0; pointer-events: none; margin-left: -8px; } `"
+              "name": "_showFeedback",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
             },
             {
-              "kind": "method",
-              "name": "render"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UiSpeechPreview",
-          "declaration": {
-            "name": "UiSpeechPreview",
-            "module": "src/components/molecules/ui-speech-preview.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/molecules/ui-typing-indicator.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "MOLECULE: Typing Indicator\nA group of animated dots indicating active 'typing' or 'thinking' state.",
-          "name": "UiTypingIndicator",
-          "members": [
+              "kind": "field",
+              "name": "_feedbackType",
+              "type": {
+                "text": "'success' | 'error' | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_feedbackTimeout",
+              "type": {
+                "text": "ReturnType<typeof setTimeout> | undefined"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :host { display: inline-flex; align-items: center; gap: var(--ui-typing-indicator-gap, 4px); padding: var(--ui-typing-indicator-padding, 8px 12px); background: var(--md-sys-color-surface-container-low); border-radius: 12px; border-bottom-left-radius: 4px; } `"
+              "default": "css` :host { display: inline-block; } .pill { display: flex; align-items: center; background: var(--md-sys-color-surface-container-highest, #e6e0e9); border-radius: 100px; padding: var(--ui-voice-pill-padding, 4px); gap: var(--ui-voice-pill-gap, 8px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .label { padding-left: 12px; font-family: inherit; font-weight: 500; color: var(--md-sys-color-on-surface, #1d1b20); white-space: nowrap; } .waveform-container { width: 0; overflow: hidden; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .active .waveform-container { width: 80px; } .feedback-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--md-sys-color-surface-container-highest); border-radius: inherit; animation: fadeIn 0.3s ease forwards; pointer-events: none; z-index: 2; } .feedback-overlay.success md-icon { color: var(--md-sys-color-primary, #0066cc); } .feedback-overlay.error md-icon { color: var(--md-sys-color-error, #ba1a1a); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 0.9; } } `"
+            },
+            {
+              "kind": "method",
+              "name": "updated",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "changedProperties",
+                  "type": {
+                    "text": "PropertyValues"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
@@ -4074,98 +4264,136 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "ui-typing-indicator",
+          "tagName": "ui-voice-pill",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "UiTypingIndicator",
+          "name": "UiVoicePill",
           "declaration": {
-            "name": "UiTypingIndicator",
-            "module": "src/components/molecules/ui-typing-indicator.ts"
+            "name": "UiVoicePill",
+            "module": "src/components/molecules/ui-voice-pill.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/molecules/ui-voice-button.ts",
+      "path": "src/components/molecules/ui-waveform.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A native Lit WebComponent replacement for the ElevenLabs React voice-button.\nNow refactored to consume speechContext but maintains backward compatibility\nfor manual state control.",
-          "name": "UiVoiceButton",
+          "description": "",
+          "name": "UiWaveform",
           "members": [
             {
               "kind": "field",
-              "name": "_context",
+              "name": "data",
               "type": {
-                "text": "SpeechContext | undefined"
+                "text": "number[]"
               },
-              "privacy": "private"
+              "default": "[]"
             },
             {
               "kind": "field",
-              "name": "state",
+              "name": "peaks",
               "type": {
-                "text": "VoiceButtonState"
+                "text": "number[] | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "barWidth",
+              "type": {
+                "text": "number"
               },
-              "default": "'idle'"
+              "default": "4"
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "barHeight",
               "type": {
-                "text": "string | undefined"
-              }
+                "text": "number"
+              },
+              "default": "4"
             },
             {
               "kind": "field",
-              "name": "trailing",
+              "name": "barGap",
+              "type": {
+                "text": "number"
+              },
+              "default": "2"
+            },
+            {
+              "kind": "field",
+              "name": "barRadius",
+              "type": {
+                "text": "number"
+              },
+              "default": "2"
+            },
+            {
+              "kind": "field",
+              "name": "barColor",
               "type": {
                 "text": "string | undefined"
               }
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "align",
+              "type": {
+                "text": "'center' | 'bottom' | 'top'"
+              },
+              "default": "'center'"
+            },
+            {
+              "kind": "field",
+              "name": "fadeEdges",
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "true"
             },
             {
               "kind": "field",
-              "name": "analyserNode",
+              "name": "fadeWidth",
               "type": {
-                "text": "AnalyserNode | undefined"
+                "text": "number"
+              },
+              "default": "24"
+            },
+            {
+              "kind": "field",
+              "name": "height",
+              "type": {
+                "text": "number | string | undefined"
               }
             },
             {
               "kind": "field",
-              "name": "_showFeedback",
+              "name": "_canvas",
               "type": {
-                "text": "boolean"
+                "text": "HTMLCanvasElement"
               },
-              "privacy": "private",
-              "default": "false"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_feedbackType",
+              "name": "_container",
               "type": {
-                "text": "'success' | 'error' | null"
+                "text": "HTMLDivElement"
               },
-              "privacy": "private",
-              "default": "null"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_feedbackTimeout",
+              "name": "_resizeObserver",
               "type": {
-                "text": "ReturnType<typeof setTimeout> | undefined"
+                "text": "ResizeObserver | undefined"
               },
               "privacy": "private"
             },
@@ -4173,12 +4401,19 @@
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :host { display: inline-block; --ui-waveform-height: 24px; --ui-waveform-width: 96px; } .wrapper { display: flex; align-items: center; justify-content: center; /* Dynamic gap based on state to ensure perfect centering */ gap: 0; min-width: 100%; transition: gap 0.3s ease; } .wrapper.active { gap: 12px; } md-filled-button, md-outlined-button { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-family: inherit; min-width: 140px; } md-filled-button.recording { --md-filled-button-container-color: var( --ui-speech-record-color, #ffdad6 ); --md-filled-button-label-text-color: #410002; } .waveform-slot { position: relative; width: 0; height: var(--ui-waveform-height); border-radius: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: transparent; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; opacity: 0; } .waveform-slot.active { width: var(--ui-waveform-width); opacity: 1; } .feedback-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: inherit; border-radius: inherit; animation: fadeIn 0.3s ease forwards; pointer-events: none; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 0.9; } } `"
+              "default": "css` :host { display: block; width: 100%; height: 128px; /* default height, can be overridden by CSS */ } .container { position: relative; width: 100%; height: 100%; } canvas { position: absolute; top: 0; left: 0; display: block; height: 100%; width: 100%; } `"
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            },
+            {
+              "kind": "method",
+              "name": "firstUpdated"
             },
             {
               "kind": "method",
               "name": "updated",
-              "privacy": "protected",
               "parameters": [
                 {
                   "name": "changedProperties",
@@ -4190,28 +4425,58 @@
             },
             {
               "kind": "method",
-              "name": "render"
+              "name": "_handleResize",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "_handleClick",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "_e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "name": "_renderWaveform",
+              "privacy": "private"
             }
           ],
-          "events": [
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UiWaveform",
+          "declaration": {
+            "name": "UiWaveform",
+            "module": "src/components/molecules/ui-waveform.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/organisms/ui-audio-player.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A monolithic backward-compatibility wrapper that renders the classic ElevenLabs\npill-shaped audio player. Internally, it relies completely on the new\ncompound <ui-audio-provider> architecture.",
+          "name": "UiAudioPlayer",
+          "members": [
             {
-              "name": "voice-button-click",
+              "kind": "field",
+              "name": "item",
               "type": {
-                "text": "CustomEvent"
+                "text": "AudioPlayerItem | undefined"
               }
+            },
+            {
+              "kind": "field",
+              "name": "styles",
+              "static": true,
+              "default": "css` :host { display: inline-block; width: 100%; max-width: 400px; } .player-pill { display: flex; align-items: center; gap: var(--ui-audio-player-gap, 16px); padding: var(--ui-audio-player-padding, 12px 24px); background: var(--md-sys-color-surface-container-high, #e2e2e2); border-radius: 999px; /* Pill shape */ width: fit-content; font-family: inherit; } .time-container { min-width: 85px; /* prevent jitter when times change */ } .slider-container { width: 200px; display: flex; align-items: center; } `"
+            },
+            {
+              "kind": "method",
+              "name": "render"
             }
           ],
           "superclass": {
@@ -4224,492 +4489,511 @@
       "exports": [
         {
           "kind": "js",
-          "name": "UiVoiceButton",
+          "name": "UiAudioPlayer",
           "declaration": {
-            "name": "UiVoiceButton",
-            "module": "src/components/molecules/ui-voice-button.ts"
+            "name": "UiAudioPlayer",
+            "module": "src/components/organisms/ui-audio-player.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/molecules/ui-voice-picker.ts",
+      "path": "src/components/providers/ui-audio-provider.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A native Lit WebComponent that provides a searchable dropdown menu for selecting\na voice persona. It supports custom data mapping, optional 3D 'Orb' avatars,\nand built-in audio preview capabilities.",
-          "name": "UiVoicePicker",
+          "description": "A headless (invisible) WebComponent that manages an internal <audio> tag\nand provides state to any child components via",
+          "name": "UiAudioProvider",
           "members": [
             {
               "kind": "field",
-              "name": "voices",
-              "type": {
-                "text": "Array"
-              },
-              "default": "[]",
-              "description": "The list of voice objects to display."
-            },
-            {
-              "kind": "field",
-              "name": "value",
+              "name": "src",
               "type": {
                 "text": "string"
               },
-              "description": "The ID of the currently selected voice."
+              "default": "''"
             },
             {
               "kind": "field",
-              "name": "placeholder",
+              "name": "items",
               "type": {
-                "text": "string"
+                "text": "PlaylistTrack[]"
               },
-              "default": "'Select a voice...'",
-              "description": "Text to display when no voice is selected."
+              "default": "[]"
             },
             {
               "kind": "field",
-              "name": "idKey",
+              "name": "autoAdvance",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "'voiceId'",
-              "description": "Key in the voice object to use as the unique ID (default: 'voiceId')."
+              "default": "true"
             },
             {
               "kind": "field",
-              "name": "titleKey",
+              "name": "_audioEl",
               "type": {
-                "text": "string"
+                "text": "HTMLAudioElement"
               },
-              "default": "'name'",
-              "description": "Key in the voice object to use as the display name (default: 'name')."
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "subtitleKey",
+              "name": "_audioContext",
               "type": {
-                "text": "string"
+                "text": "AudioContext | undefined"
               },
-              "default": "'category'",
-              "description": "Key in the voice object to use as the category/subtitle (default: 'category')."
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "previewUrlKey",
+              "name": "_analyserNode",
               "type": {
-                "text": "string"
+                "text": "AnalyserNode | undefined"
               },
-              "default": "'previewUrl'",
-              "description": "Key in the voice object containing the preview audio URL."
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "useOrbs",
+              "name": "_mediaSource",
               "type": {
-                "text": "boolean"
+                "text": "MediaElementAudioSourceNode | undefined"
               },
-              "default": "false",
-              "description": "Whether to display 3D ui-orb avatars for each voice."
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "colorKey",
+              "name": "_animationFrameId",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "'colors'"
+              "privacy": "private",
+              "default": "0"
             },
             {
               "kind": "field",
-              "name": "_searchQuery",
+              "name": "state",
               "type": {
-                "text": "string"
+                "text": "AudioPlayerState"
               },
-              "privacy": "private",
-              "default": "''"
+              "privacy": "public",
+              "default": "{ src: '', isPlaying: false, isBuffering: false, currentTime: 0, duration: 0, volume: 1, muted: false, items: [], currentIndex: -1, autoAdvance: true, analyserNode: undefined, play: () => this.play(), pause: () => this.pause(), togglePlay: () => this._togglePlay(), seek: (time: number) => this.seek(time), reset: () => this.reset(), setVolume: (volume: number) => this._setVolume(volume), toggleMute: () => this._toggleMute(), next: () => this.next(), previous: () => this.previous(), select: (index: number) => this.select(index), }"
             },
             {
               "kind": "field",
-              "name": "_previewingVoiceId",
-              "type": {
-                "text": "string | undefined"
-              },
-              "privacy": "private"
+              "name": "styles",
+              "static": true,
+              "default": "css` :host { display: contents; /* We are completely invisible, just wrapping children */ } audio { display: none; } `"
             },
             {
-              "kind": "field",
-              "name": "_menuEl",
-              "type": {
-                "text": "any"
-              },
-              "privacy": "private"
+              "kind": "method",
+              "name": "render"
             },
             {
-              "kind": "field",
-              "name": "_audioEl",
-              "type": {
-                "text": "HTMLAudioElement"
-              },
-              "privacy": "private"
+              "kind": "method",
+              "name": "willUpdate",
+              "parameters": [
+                {
+                  "name": "changed",
+                  "type": {
+                    "text": "Map<string, any>"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "styles",
-              "static": true,
-              "default": "css` :host { display: inline-block; width: 100%; font-family: inherit; color-scheme: light dark; } .anchor-button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--ui-voice-picker-padding, 8px 16px); background: var( --ui-voice-picker-anchor-bg, var(--md-sys-color-surface-container-high, transparent) ); border: 1px solid var(--md-sys-color-outline-variant, currentColor); border-radius: 8px; color: var(--md-sys-color-on-surface); cursor: pointer; font-family: inherit; font-size: 14px; min-height: 48px; transition: background-color 0.2s, border-color 0.2s; } .anchor-button:hover { background: var(--md-sys-color-surface-container-highest); } .anchor-button:focus-visible { outline: none; border-color: var(--md-sys-color-primary); box-shadow: 0 0 0 1px var(--md-sys-color-primary); } .trigger-content { display: flex; align-items: center; justify-content: space-between; width: 100%; min-width: 100%; padding: 4px 0; } .trigger-left { display: flex; align-items: center; gap: var(--ui-voice-picker-trigger-gap, 12px); overflow: hidden; } .trigger-icon { width: 24px; height: 24px; border-radius: 50%; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .trigger-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--md-sys-color-on-surface); } md-menu { --md-menu-container-shape: 12px; --md-menu-container-color: var( --md-sys-color-surface-container, var(--md-sys-color-surface) ); max-width: 400px; font-family: inherit; --md-sys-typescale-body-medium-font: inherit; border: 1px solid var(--md-sys-color-outline-variant); } .search-container { padding: 8px 12px; background: var(--md-sys-color-surface-container); border-bottom: 1px solid var(--md-sys-color-outline-variant); font-family: inherit; } md-outlined-text-field { width: 100%; --md-outlined-text-field-container-shape: 8px; font-family: inherit; --md-outlined-text-field-label-text-font: inherit; --md-outlined-text-field-input-text-font: inherit; --md-sys-typescale-body-large-font: inherit; } md-menu-item { --md-menu-item-hover-state-layer-color: var( --md-sys-color-on-surface-variant ); --md-menu-item-focus-state-layer-color: var( --md-sys-color-on-surface-variant ); --md-menu-item-label-text-color: var(--md-sys-color-on-surface); --md-menu-item-label-text-font: inherit; --md-sys-typescale-label-large-font: inherit; font-family: inherit; } .voice-item-content { display: flex; align-items: center; gap: var(--ui-voice-picker-item-gap, 16px); width: 100%; padding: var(--ui-voice-picker-item-padding, 8px 0); } .voice-avatar { position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--md-sys-color-surface-variant); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; overflow: hidden; color: var(--md-sys-color-on-surface-variant); z-index: 2; /* Keep above the menu item ripple */ } .voice-avatar:hover .play-overlay { opacity: 1; } .play-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; color: white; opacity: 0; transition: opacity 0.2s; border-radius: 50%; } .play-overlay.active { opacity: 1; background: rgba(0, 0, 0, 0.6); } .voice-info { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow: hidden; } .voice-name { font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--md-sys-color-on-surface); } .voice-labels { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--md-sys-color-on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .label-dot { font-size: 8px; } .empty-state { padding: 24px; text-align: center; color: var(--md-sys-color-on-surface-variant); font-size: 14px; } `"
+              "kind": "method",
+              "name": "updated",
+              "parameters": [
+                {
+                  "name": "changed",
+                  "type": {
+                    "text": "Map<string, any>"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "render"
+              "name": "_updateState",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "updates",
+                  "type": {
+                    "text": "Partial<AudioPlayerState>"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "_toggleMenu",
+              "name": "_setupAudioContext",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "_handleMenuClosed",
+              "name": "play",
+              "privacy": "public"
+            },
+            {
+              "kind": "method",
+              "name": "pause",
+              "privacy": "public"
+            },
+            {
+              "kind": "method",
+              "name": "_togglePlay",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "_selectVoice",
-              "privacy": "private",
+              "name": "seek",
+              "privacy": "public",
               "parameters": [
                 {
-                  "name": "voiceId",
+                  "name": "time",
                   "type": {
-                    "text": "string"
+                    "text": "number"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_togglePreview",
+              "name": "reset",
+              "privacy": "public"
+            },
+            {
+              "kind": "method",
+              "name": "_setVolume",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                },
-                {
-                  "name": "voice",
+                  "name": "volume",
                   "type": {
-                    "text": "VoiceItem"
+                    "text": "number"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_stopPreview",
-              "privacy": "private"
-            }
-          ],
-          "events": [
-            {
-              "name": "voice-change",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "Dispatched when a voice is selected. detail: { voiceId }"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "ui-voice-picker",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UiVoicePicker",
-          "declaration": {
-            "name": "UiVoicePicker",
-            "module": "src/components/molecules/ui-voice-picker.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/molecules/ui-voice-pill.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A composite \"Pill\" style voice interaction component.\nIt combines the recording button, a live waveform, and a cancel button\ninto a single cohesive UI element.",
-          "name": "UiVoicePill",
-          "members": [
-            {
-              "kind": "field",
-              "name": "_context",
-              "type": {
-                "text": "SpeechContext | undefined"
-              },
+              "name": "_toggleMute",
               "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              }
+              "kind": "method",
+              "name": "next",
+              "privacy": "public"
             },
             {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
+              "kind": "method",
+              "name": "previous",
+              "privacy": "public"
             },
             {
-              "kind": "field",
-              "name": "_showFeedback",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
+              "kind": "method",
+              "name": "select",
+              "privacy": "public",
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "_feedbackType",
-              "type": {
-                "text": "'success' | 'error' | null"
-              },
-              "privacy": "private",
-              "default": "null"
+              "kind": "method",
+              "name": "_handleLoadedMetadata",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "_feedbackTimeout",
-              "type": {
-                "text": "ReturnType<typeof setTimeout> | undefined"
-              },
+              "kind": "method",
+              "name": "_handleEnded",
               "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "styles",
-              "static": true,
-              "default": "css` :host { display: inline-block; } .pill { display: flex; align-items: center; background: var(--md-sys-color-surface-container-highest, #e6e0e9); border-radius: 100px; padding: var(--ui-voice-pill-padding, 4px); gap: var(--ui-voice-pill-gap, 8px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .label { padding-left: 12px; font-family: inherit; font-weight: 500; color: var(--md-sys-color-on-surface, #1d1b20); white-space: nowrap; } .waveform-container { width: 0; overflow: hidden; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .active .waveform-container { width: 80px; } .feedback-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--md-sys-color-surface-container-highest); border-radius: inherit; animation: fadeIn 0.3s ease forwards; pointer-events: none; z-index: 2; } .feedback-overlay.success md-icon { color: var(--md-sys-color-primary, #0066cc); } .feedback-overlay.error md-icon { color: var(--md-sys-color-error, #ba1a1a); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 0.9; } } `"
+              "kind": "method",
+              "name": "_handlePlaying",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "updated",
-              "privacy": "protected",
+              "name": "_handlePause",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_handleError",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "changedProperties",
+                  "name": "e",
+                  "optional": true,
                   "type": {
-                    "text": "PropertyValues"
+                    "text": "Event"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "render"
+              "name": "_startTrackingTime",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "name": "state-change",
+              "type": {
+                "text": "CustomEvent"
+              }
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "ui-voice-pill",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "UiVoicePill",
+          "name": "UiAudioProvider",
           "declaration": {
-            "name": "UiVoicePill",
-            "module": "src/components/molecules/ui-voice-pill.ts"
+            "name": "UiAudioProvider",
+            "module": "src/components/providers/ui-audio-provider.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/molecules/ui-waveform.ts",
+      "path": "src/components/providers/ui-speech-provider.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "UiWaveform",
+          "description": "A headless provider component that manages the speech recording lifecycle.\nIt provides a `SpeechContext` to all children components, allowing them to\nreact to recording states and access transcripts.\n\nIt supports three modes:\n1. Auto (Default): Handles getUserMedia and provides a real MediaStream.\n2. Simulation: Provides a mock AnalyserNode and fake transcription for demos.\n3. Manual: Only emits intent events, leaving state management to a backend/agent.",
+          "name": "UiSpeechProvider",
           "members": [
             {
               "kind": "field",
-              "name": "data",
+              "name": "_context",
               "type": {
-                "text": "number[]"
+                "text": "SpeechContext"
               },
-              "default": "[]"
+              "privacy": "private",
+              "default": "{ state: 'idle', transcript: '', partialTranscript: '', analyserNode: undefined, start: () => this.start(), stop: () => this.stop(), cancel: () => this.cancel(), }"
             },
             {
               "kind": "field",
-              "name": "peaks",
+              "name": "state",
               "type": {
-                "text": "number[] | undefined"
-              }
+                "text": "string"
+              },
+              "default": "'idle'",
+              "description": "The current recording state ('idle', 'connecting', 'recording', 'processing', 'success', 'error')."
             },
             {
               "kind": "field",
-              "name": "barWidth",
+              "name": "simulation",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "4"
+              "default": "false",
+              "description": "Enable mock transcription and audio data for demos."
             },
             {
               "kind": "field",
-              "name": "barHeight",
+              "name": "manual",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "4"
+              "default": "false",
+              "description": "If true, the provider will not start recording automatically but will emit requests."
             },
             {
               "kind": "field",
-              "name": "barGap",
+              "name": "transcript",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "2"
+              "default": "''",
+              "description": "The final confirmed transcript."
             },
             {
               "kind": "field",
-              "name": "barRadius",
+              "name": "partialTranscript",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "2"
+              "default": "''",
+              "description": "The live, interim transcript."
             },
             {
               "kind": "field",
-              "name": "barColor",
+              "name": "deviceId",
               "type": {
                 "text": "string | undefined"
               }
             },
             {
               "kind": "field",
-              "name": "align",
-              "type": {
-                "text": "'center' | 'bottom' | 'top'"
-              },
-              "default": "'center'"
-            },
-            {
-              "kind": "field",
-              "name": "fadeEdges",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true"
-            },
-            {
-              "kind": "field",
-              "name": "fadeWidth",
+              "name": "_stream",
               "type": {
-                "text": "number"
+                "text": "MediaStream | undefined"
               },
-              "default": "24"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "height",
+              "name": "_audioCtx",
               "type": {
-                "text": "number"
+                "text": "AudioContext | undefined"
               },
-              "default": "128"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_canvas",
+              "name": "_analyser",
               "type": {
-                "text": "HTMLCanvasElement"
+                "text": "AnalyserNode | undefined"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_container",
+              "name": "_transcriptInterval",
               "type": {
-                "text": "HTMLDivElement"
+                "text": "any | undefined"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_resizeObserver",
+              "name": "_fakeTranscript",
               "type": {
-                "text": "ResizeObserver | undefined"
+                "text": "array"
               },
-              "privacy": "private"
+              "privacy": "private",
+              "default": "[ 'I', ' am', ' recording', ' a', ' message', ' using', ' atomic', ' components...', ]"
             },
             {
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :host { display: block; width: 100%; } .container { position: relative; width: 100%; } canvas { position: absolute; top: 0; left: 0; display: block; height: 100%; width: 100%; } `"
+              "default": "css` :host { display: contents; } `"
             },
             {
               "kind": "method",
-              "name": "render"
+              "name": "willUpdate",
+              "parameters": [
+                {
+                  "name": "changedProperties",
+                  "type": {
+                    "text": "Map<string, any>"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "firstUpdated"
+              "name": "start"
             },
             {
               "kind": "method",
-              "name": "updated",
+              "name": "stop"
+            },
+            {
+              "kind": "method",
+              "name": "cancel"
+            },
+            {
+              "kind": "method",
+              "name": "_cleanupStream",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_updateContext",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "changedProperties",
+                  "name": "update",
                   "type": {
-                    "text": "PropertyValues"
+                    "text": "Partial<SpeechContext>"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_handleResize",
-              "privacy": "private"
+              "name": "render"
+            }
+          ],
+          "events": [
+            {
+              "name": "speech-request-start",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Dispatched in 'manual' mode when a child wants to start."
             },
             {
-              "kind": "method",
-              "name": "_renderWaveform",
-              "privacy": "private"
+              "name": "speech-start",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Dispatched when recording actually begins."
+            },
+            {
+              "name": "speech-request-stop",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Dispatched in 'manual' mode when a child wants to stop."
+            },
+            {
+              "name": "speech-stop",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Dispatched when recording is stopped."
+            },
+            {
+              "name": "speech-cancel",
+              "type": {
+                "text": "CustomEvent"
+              }
+            },
+            {
+              "name": "state-change",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Dispatched whenever the internal context state changes."
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
+          "tagName": "ui-speech-provider",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "UiWaveform",
+          "name": "UiSpeechProvider",
           "declaration": {
-            "name": "UiWaveform",
-            "module": "src/components/molecules/ui-waveform.ts"
+            "name": "UiSpeechProvider",
+            "module": "src/components/providers/ui-speech-provider.ts"
           }
         }
       ]