@ghchinoy/lit-audio-ui 0.1.0

package/dist/scream-audio-ui.umd.js

@@ -0,0 +1,1217 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`lit`),require(`lit/decorators.js`),require(`@material/web/button/filled-button.js`),require(`@material/web/icon/icon.js`),require(`lit/directives/class-map.js`),require(`@material/web/button/outlined-button.js`),require(`@material/web/iconbutton/filled-icon-button.js`),require(`@material/web/progress/circular-progress.js`),require(`@material/web/slider/slider.js`),require(`@material/web/menu/menu.js`),require(`@material/web/menu/menu-item.js`),require(`@material/web/divider/divider.js`),require(`@material/web/button/text-button.js`),require(`@material/web/button/filled-tonal-button.js`),require(`@material/web/textfield/outlined-text-field.js`),require(`three`),require(`@material/web/iconbutton/icon-button.js`)):typeof define==`function`&&define.amd?define([`exports`,`lit`,`lit/decorators.js`,`@material/web/button/filled-button.js`,`@material/web/icon/icon.js`,`lit/directives/class-map.js`,`@material/web/button/outlined-button.js`,`@material/web/iconbutton/filled-icon-button.js`,`@material/web/progress/circular-progress.js`,`@material/web/slider/slider.js`,`@material/web/menu/menu.js`,`@material/web/menu/menu-item.js`,`@material/web/divider/divider.js`,`@material/web/button/text-button.js`,`@material/web/button/filled-tonal-button.js`,`@material/web/textfield/outlined-text-field.js`,`three`,`@material/web/iconbutton/icon-button.js`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.ScreamAudioUI={},e.Lit,e.Lit,e.MaterialWeb,e.MaterialWeb,e.Lit,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.THREE,e.MaterialWeb))})(this,function(e,t,n,r,i,a,o,s,c,l,u,d,f,p,m,h,g,_){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var v=Object.create,y=Object.defineProperty,b=Object.getOwnPropertyDescriptor,x=Object.getOwnPropertyNames,S=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty,w=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=x(t),a=0,o=i.length,s;a<o;a++)s=i[a],!C.call(e,s)&&s!==n&&y(e,s,{get:(e=>t[e]).bind(null,s),enumerable:!(r=b(t,s))||r.enumerable});return e};g=((e,t,n)=>(n=e==null?{}:v(S(e)),w(t||!e||!e.__esModule?y(n,`default`,{value:e,enumerable:!0}):n,e)))(g);function T(e,t,n,r){var i=arguments.length,a=i<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,n):r,o;if(typeof Reflect==`object`&&typeof Reflect.decorate==`function`)a=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}var E=class extends t.LitElement{constructor(...e){super(...e),this.state=`idle`}static{this.styles=t.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
+      );
+    }
+  `}render(){return t.html`
+      <md-filled-button class="${this.state}" @click="${this._handleClick}">
+        <md-icon slot="icon">
+          ${this.state===`recording`?`stop`:`mic`}
+        </md-icon>
+
+        ${this.state===`recording`?`Recording...`:`Speak`}
+      </md-filled-button>
+    `}_handleClick(){this.state=this.state===`idle`?`recording`:`idle`,this.dispatchEvent(new CustomEvent(`voice-toggle`,{bubbles:!0,composed:!0,detail:{state:this.state}}))}};T([(0,n.property)({type:String})],E.prototype,`state`,void 0),E=T([(0,n.customElement)(`scream-voice-button`)],E);function D(e,t){e.getByteFrequencyData(t);let n=[];for(let e=0;e<t.length;e++)n.push(t[e]/255);return n}function O(e,t,n,r){if(r<=0||t<=0)return;let i=e.createLinearGradient(0,0,t,0),a=Math.min(.2,r/t);i.addColorStop(0,`rgba(0,0,0,0)`),i.addColorStop(a,`rgba(0,0,0,1)`),i.addColorStop(1-a,`rgba(0,0,0,1)`),i.addColorStop(1,`rgba(0,0,0,0)`),e.globalCompositeOperation=`destination-in`,e.fillStyle=i,e.fillRect(0,0,t,n),e.globalCompositeOperation=`source-over`}var k=class extends t.LitElement{constructor(...e){super(...e),this.active=!1,this.processing=!1,this.barWidth=3,this.barHeight=4,this.barGap=1,this.barRadius=1.5,this.fadeEdges=!0,this.fadeWidth=24,this.height=64,this.sensitivity=1,this.updateRate=30,this._animationFrameId=0,this._lastUpdateTime=0,this._currentBars=[],this._processingTime=0,this._transitionProgress=0,this._lastActiveData=[]}static{this.styles=t.css`
+    :host {
+      display: block;
+      width: 100%;
+    }
+    .container {
+      position: relative;
+      width: 100%;
+    }
+    canvas {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: block;
+      height: 100%;
+      width: 100%;
+    }
+  `}render(){return t.html`
+      <div class="container" style="height: ${this.height}px;">
+        <canvas></canvas>
+      </div>
+    `}firstUpdated(){this._resizeObserver=new ResizeObserver(()=>{this._handleResize()}),this._resizeObserver.observe(this._container),this._startAnimationLoop()}updated(e){super.updated(e),e.has(`analyserNode`)&&this.analyserNode&&(this._dataArray=new Uint8Array(this.analyserNode.frequencyBinCount)),e.has(`processing`)&&this.processing&&!this.active&&(this._processingTime=0,this._transitionProgress=0)}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver&&this._resizeObserver.disconnect(),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId)}_handleResize(){if(!this._canvas||!this._container)return;let e=this._container.getBoundingClientRect(),t=window.devicePixelRatio||1;this._canvas.width=e.width*t,this._canvas.height=e.height*t,this._canvas.style.width=`${e.width}px`,this._canvas.style.height=`${e.height}px`;let n=this._canvas.getContext(`2d`);n&&n.scale(t,t),this._renderFrame()}_startAnimationLoop(){let e=t=>{this._updateData(t),this._renderFrame(),this._animationFrameId=requestAnimationFrame(e)};this._animationFrameId=requestAnimationFrame(e)}_updateData(e){if(!this._canvas)return;let t=this._canvas.getBoundingClientRect(),n=Math.floor(t.width/(this.barWidth+this.barGap));if(this.active&&this.analyserNode&&this._dataArray){if(e-this._lastUpdateTime>this.updateRate){this._lastUpdateTime=e;let t=D(this.analyserNode,this._dataArray),r=Math.floor(t.length*.05),i=Math.floor(t.length*.4),a=t.slice(r,i),o=Math.floor(n/2),s=Array(n).fill(.05),c=a.length-1;for(let e=0;e<=o;e++){let t=e/o,r=a[Math.floor(t*c)]||0;t>.8&&(r*=1-(t-.8)*5);let i=Math.max(.05,Math.min(1,r*this.sensitivity)),l=o+e,u=o-e;l<n&&(s[l]=i),u>=0&&(s[u]=i)}this._currentBars=s,this._lastActiveData=[...s]}}else if(this.processing&&!this.active){this._processingTime+=.03,this._transitionProgress=Math.min(1,this._transitionProgress+.02);let e=Array(n).fill(.05),t=Math.floor(n/2);for(let r=0;r<n;r++){let n=(r-t)/t,i=1-Math.abs(n)*.4,a=Math.sin(this._processingTime*1.5+n*3)*.25,o=Math.sin(this._processingTime*.8-n*2)*.2,s=Math.cos(this._processingTime*2+n)*.15,c=(.2+(a+o+s))*i,l=c;if(this._lastActiveData.length>0&&this._transitionProgress<1){let e=Math.min(r,this._lastActiveData.length-1);l=(this._lastActiveData[e]||0)*(1-this._transitionProgress)+c*this._transitionProgress}e[r]=Math.max(.05,Math.min(1,l))}this._currentBars=e}else if(this._currentBars.length>0){let e=!0;for(let t=0;t<this._currentBars.length;t++)this._currentBars[t]=Math.max(.05,this._currentBars[t]*.85),this._currentBars[t]>.06&&(e=!1);e&&(this._currentBars=[])}}_renderFrame(){if(!this._canvas)return;let e=this._canvas.getContext(`2d`);if(!e)return;let t=this._canvas.getBoundingClientRect();e.clearRect(0,0,t.width,t.height);let n=getComputedStyle(this),r=this.barColor;if(!r){let e=n.getPropertyValue(`--md-sys-color-primary`).trim(),t=n.getPropertyValue(`color`).trim();r=e||t||`#0066cc`}let i=this.barWidth+this.barGap,a=Math.floor(t.width/i),o=t.height/2;for(let n=0;n<a&&n<this._currentBars.length;n++){let a=this._currentBars[n]||.05,s=n*i,c=Math.max(this.barHeight,a*t.height*.8),l=o-c/2;e.fillStyle=r,e.globalAlpha=.4+a*.6,this.barRadius>0?(e.beginPath(),e.roundRect(s,l,this.barWidth,c,this.barRadius),e.fill()):e.fillRect(s,l,this.barWidth,c)}this.fadeEdges&&O(e,t.width,t.height,this.fadeWidth),e.globalAlpha=1}};T([(0,n.property)({type:Boolean})],k.prototype,`active`,void 0),T([(0,n.property)({type:Boolean})],k.prototype,`processing`,void 0),T([(0,n.property)({attribute:!1})],k.prototype,`analyserNode`,void 0),T([(0,n.property)({type:Number})],k.prototype,`barWidth`,void 0),T([(0,n.property)({type:Number})],k.prototype,`barHeight`,void 0),T([(0,n.property)({type:Number})],k.prototype,`barGap`,void 0),T([(0,n.property)({type:Number})],k.prototype,`barRadius`,void 0),T([(0,n.property)({type:String})],k.prototype,`barColor`,void 0),T([(0,n.property)({type:Boolean})],k.prototype,`fadeEdges`,void 0),T([(0,n.property)({type:Number})],k.prototype,`fadeWidth`,void 0),T([(0,n.property)({type:Number})],k.prototype,`height`,void 0),T([(0,n.property)({type:Number})],k.prototype,`sensitivity`,void 0),T([(0,n.property)({type:Number})],k.prototype,`updateRate`,void 0),T([(0,n.query)(`canvas`)],k.prototype,`_canvas`,void 0),T([(0,n.query)(`.container`)],k.prototype,`_container`,void 0),k=T([(0,n.customElement)(`ui-live-waveform`)],k);var A=class extends t.LitElement{constructor(...e){super(...e),this.state=`idle`,this.disabled=!1,this._showFeedback=!1}static{this.styles=t.css`
+    :host {
+      display: inline-block;
+      --ui-waveform-height: 24px;
+      --ui-waveform-width: 96px;
+    }
+
+    .wrapper {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    md-filled-button,
+    md-outlined-button {
+      transition: all 0.2s ease-in-out;
+    }
+
+    /* Customize the button depending on the state */
+    md-filled-button.recording {
+      --md-filled-button-container-color: var(
+        --md-sys-color-error-container,
+        #ffdad6
+      );
+      --md-filled-button-label-text-color: var(
+        --md-sys-color-on-error-container,
+        #410002
+      );
+    }
+
+    md-filled-button.processing {
+      --md-filled-button-container-color: var(
+        --md-sys-color-secondary-container,
+        #cce5ff
+      );
+      --md-filled-button-label-text-color: var(
+        --md-sys-color-on-secondary-container,
+        #001d36
+      );
+    }
+
+    md-filled-button.success {
+      --md-filled-button-container-color: var(
+        --md-sys-color-primary-container,
+        #d1e4ff
+      );
+      --md-filled-button-label-text-color: var(
+        --md-sys-color-on-primary-container,
+        #001d36
+      );
+    }
+
+    .waveform-slot {
+      position: relative;
+      width: var(--ui-waveform-width);
+      height: var(--ui-waveform-height);
+      border-radius: 4px;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--md-sys-color-surface-container-highest, #e3e3e3);
+      border: 1px solid var(--md-sys-color-outline-variant, #c4c7c5);
+      transition: background-color 0.3s ease;
+    }
+
+    .waveform-slot.recording {
+      background: var(--md-sys-color-error-container, #ffdad6);
+      border-color: transparent;
+    }
+
+    .waveform-slot.processing {
+      background: var(--md-sys-color-secondary-container, #cce5ff);
+      border-color: transparent;
+    }
+
+    .trailing-text {
+      font-family: monospace;
+      font-size: 11px;
+      color: var(--md-sys-color-on-surface-variant, #444);
+      font-weight: 500;
+      user-select: none;
+    }
+
+    .feedback-overlay {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--md-sys-color-surface, #fff);
+      animation: fadeIn 0.3s ease forwards;
+    }
+
+    .feedback-icon {
+      font-size: 16px;
+    }
+    .feedback-icon.success {
+      color: var(--md-sys-color-primary, #0066cc);
+    }
+    .feedback-icon.error {
+      color: var(--md-sys-color-error, #ba1a1a);
+    }
+
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 0.9;
+      }
+    }
+  `}updated(e){super.updated(e),e.has(`state`)&&(this.state===`success`||this.state===`error`?(this._showFeedback=!0,this._feedbackTimeout&&clearTimeout(this._feedbackTimeout),this._feedbackTimeout=setTimeout(()=>{this._showFeedback=!1,(this.state===`success`||this.state===`error`)&&(this.state=`idle`)},1500)):this._showFeedback=!1)}render(){let e=this.state===`recording`,n=this.state===`processing`,r=this.state===`success`,i=this.state===`error`,o=this.disabled||n,s=e||n,c=!s&&!this._showFeedback&&this.trailing,l={recording:e,processing:n,success:r&&this._showFeedback,error:i&&this._showFeedback},u={"waveform-slot":!0,recording:e,processing:n};return t.html`
+      <md-filled-button
+        class=${(0,a.classMap)(l)}
+        ?disabled=${o}
+        @click=${this._handleClick}
+      >
+        <div class="wrapper">
+          ${this.label?t.html`<span>${this.label}</span>`:``}
+
+          <div class=${(0,a.classMap)(u)}>
+            ${s?t.html`
+                  <ui-live-waveform
+                    .active=${e}
+                    .processing=${n}
+                    .analyserNode=${this.analyserNode}
+                    .barWidth=${2}
+                    .barGap=${1}
+                    .barRadius=${4}
+                    .fadeEdges=${!1}
+                    .sensitivity=${1.8}
+                    height="20"
+                    style="position: absolute; inset: 0;"
+                  ></ui-live-waveform>
+                `:``}
+            ${c?t.html` <span class="trailing-text">${this.trailing}</span> `:``}
+            ${this._showFeedback&&r?t.html`
+                  <div class="feedback-overlay">
+                    <md-icon class="feedback-icon success">check</md-icon>
+                  </div>
+                `:``}
+            ${this._showFeedback&&i?t.html`
+                  <div class="feedback-overlay">
+                    <md-icon class="feedback-icon error">close</md-icon>
+                  </div>
+                `:``}
+          </div>
+        </div>
+      </md-filled-button>
+    `}_handleClick(e){this.dispatchEvent(new CustomEvent(`voice-button-click`,{bubbles:!0,composed:!0,detail:{state:this.state}}))}};T([(0,n.property)({type:String})],A.prototype,`state`,void 0),T([(0,n.property)({type:String})],A.prototype,`label`,void 0),T([(0,n.property)({type:String})],A.prototype,`trailing`,void 0),T([(0,n.property)({type:Boolean})],A.prototype,`disabled`,void 0),T([(0,n.property)({attribute:!1})],A.prototype,`analyserNode`,void 0),T([(0,n.state)()],A.prototype,`_showFeedback`,void 0),A=T([(0,n.customElement)(`ui-voice-button`)],A);var j=class extends t.LitElement{constructor(...e){super(...e),this.data=[],this.barWidth=4,this.barHeight=4,this.barGap=2,this.barRadius=2,this.fadeEdges=!0,this.fadeWidth=24,this.height=128}static{this.styles=t.css`
+    :host {
+      display: block;
+      width: 100%;
+    }
+    .container {
+      position: relative;
+      width: 100%;
+    }
+    canvas {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: block;
+      height: 100%;
+      width: 100%;
+    }
+  `}render(){return t.html`
+      <div class="container" style="height: ${this.height}px;">
+        <canvas></canvas>
+      </div>
+    `}firstUpdated(){this._resizeObserver=new ResizeObserver(()=>{this._handleResize()}),this._resizeObserver.observe(this._container)}updated(e){super.updated(e),(e.has(`data`)||e.has(`barColor`))&&this._renderWaveform()}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver&&this._resizeObserver.disconnect()}_handleResize(){if(!this._canvas||!this._container)return;let e=this._container.getBoundingClientRect(),t=window.devicePixelRatio||1;this._canvas.width=e.width*t,this._canvas.height=e.height*t,this._canvas.style.width=`${e.width}px`,this._canvas.style.height=`${e.height}px`;let n=this._canvas.getContext(`2d`);n&&(n.scale(t,t),this._renderWaveform())}_renderWaveform(){if(!this._canvas)return;let e=this._canvas.getContext(`2d`);if(!e)return;let t=this._canvas.getBoundingClientRect();e.clearRect(0,0,t.width,t.height);let n=getComputedStyle(this),r=this.barColor;if(!r){let e=n.getPropertyValue(`--md-sys-color-primary`).trim(),t=n.getPropertyValue(`color`).trim();r=e||t||`#0066cc`}let i=Math.floor(t.width/(this.barWidth+this.barGap)),a=t.height/2;for(let n=0;n<i;n++){let o=Math.floor(n/i*this.data.length),s=this.data[o]||0,c=Math.max(this.barHeight,s*t.height*.8),l=n*(this.barWidth+this.barGap),u=a-c/2;e.fillStyle=r,e.globalAlpha=.3+s*.7,this.barRadius>0?(e.beginPath(),e.roundRect(l,u,this.barWidth,c,this.barRadius),e.fill()):e.fillRect(l,u,this.barWidth,c)}this.fadeEdges&&O(e,t.width,t.height,this.fadeWidth),e.globalAlpha=1}};T([(0,n.property)({type:Array})],j.prototype,`data`,void 0),T([(0,n.property)({type:Number})],j.prototype,`barWidth`,void 0),T([(0,n.property)({type:Number})],j.prototype,`barHeight`,void 0),T([(0,n.property)({type:Number})],j.prototype,`barGap`,void 0),T([(0,n.property)({type:Number})],j.prototype,`barRadius`,void 0),T([(0,n.property)({type:String})],j.prototype,`barColor`,void 0),T([(0,n.property)({type:Boolean})],j.prototype,`fadeEdges`,void 0),T([(0,n.property)({type:Number})],j.prototype,`fadeWidth`,void 0),T([(0,n.property)({type:Number})],j.prototype,`height`,void 0),T([(0,n.query)(`canvas`)],j.prototype,`_canvas`,void 0),T([(0,n.query)(`.container`)],j.prototype,`_container`,void 0),j=T([(0,n.customElement)(`ui-waveform`)],j);var M=class extends Event{constructor(e,t,n,r){super(`context-request`,{bubbles:!0,composed:!0}),this.context=e,this.contextTarget=t,this.callback=n,this.subscribe=r??!1}};function N(e){return e}var P=class{constructor(e,t,n,r){if(this.subscribe=!1,this.provided=!1,this.value=void 0,this.t=(e,t)=>{this.unsubscribe&&(this.unsubscribe!==t&&(this.provided=!1,this.unsubscribe()),this.subscribe||this.unsubscribe()),this.value=e,this.host.requestUpdate(),this.provided&&!this.subscribe||(this.provided=!0,this.callback&&this.callback(e,t)),this.unsubscribe=t},this.host=e,t.context!==void 0){let e=t;this.context=e.context,this.callback=e.callback,this.subscribe=e.subscribe??!1}else this.context=t,this.callback=n,this.subscribe=r??!1;this.host.addController(this)}hostConnected(){this.dispatchRequest()}hostDisconnected(){this.unsubscribe&&=(this.unsubscribe(),void 0)}dispatchRequest(){this.host.dispatchEvent(new M(this.context,this.host,this.t,this.subscribe))}},F=class{get value(){return this.o}set value(e){this.setValue(e)}setValue(e,t=!1){let n=t||!Object.is(e,this.o);this.o=e,n&&this.updateObservers()}constructor(e){this.subscriptions=new Map,this.updateObservers=()=>{for(let[e,{disposer:t}]of this.subscriptions)e(this.o,t)},e!==void 0&&(this.value=e)}addCallback(e,t,n){if(!n)return void e(this.value);this.subscriptions.has(e)||this.subscriptions.set(e,{disposer:()=>{this.subscriptions.delete(e)},consumerHost:t});let{disposer:r}=this.subscriptions.get(e);e(this.value,r)}clearCallbacks(){this.subscriptions.clear()}},I=class extends Event{constructor(e,t){super(`context-provider`,{bubbles:!0,composed:!0}),this.context=e,this.contextTarget=t}},L=class extends F{constructor(e,t,n){super(t.context===void 0?n:t.initialValue),this.onContextRequest=e=>{if(e.context!==this.context)return;let t=e.contextTarget??e.composedPath()[0];t!==this.host&&(e.stopPropagation(),this.addCallback(e.callback,t,e.subscribe))},this.onProviderRequest=e=>{if(e.context!==this.context||(e.contextTarget??e.composedPath()[0])===this.host)return;let t=new Set;for(let[e,{consumerHost:n}]of this.subscriptions)t.has(e)||(t.add(e),n.dispatchEvent(new M(this.context,n,e,!0)));e.stopPropagation()},this.host=e,t.context===void 0?this.context=t:this.context=t.context,this.attachListeners(),this.host.addController?.(this)}attachListeners(){this.host.addEventListener(`context-request`,this.onContextRequest),this.host.addEventListener(`context-provider`,this.onProviderRequest)}hostConnected(){this.host.dispatchEvent(new I(this.context,this.host))}};function R({context:e}){return(t,n)=>{let r=new WeakMap;if(typeof n==`object`)return{get(){return t.get.call(this)},set(e){return r.get(this).setValue(e),t.set.call(this,e)},init(t){return r.set(this,new L(this,{context:e,initialValue:t})),t}};{t.constructor.addInitializer((t=>{r.set(t,new L(t,{context:e}))}));let i=Object.getOwnPropertyDescriptor(t,n),a;if(i===void 0){let e=new WeakMap;a={get(){return e.get(this)},set(t){r.get(this).setValue(t),e.set(this,t)},configurable:!0,enumerable:!0}}else{let e=i.set;a={...i,set(t){r.get(this).setValue(t),e?.call(this,t)}}}Object.defineProperty(t,n,a);return}}}function z({context:e,subscribe:t}){return(n,r)=>{typeof r==`object`?r.addInitializer((function(){new P(this,{context:e,callback:e=>{n.set.call(this,e)},subscribe:t})})):n.constructor.addInitializer((n=>{new P(n,{context:e,callback:e=>{n[r]=e},subscribe:t})}))}}let B=N(`ui-audio-player-context`);var V=class extends t.LitElement{constructor(...e){super(...e),this.src=``,this._animationFrameId=0,this.state={src:``,isPlaying:!1,isBuffering:!1,currentTime:0,duration:0,volume:1,muted:!1,analyserNode:void 0,play:()=>this.play(),pause:()=>this.pause(),togglePlay:()=>this._togglePlay(),seek:e=>this._seek(e),setVolume:e=>this._setVolume(e),toggleMute:()=>this._toggleMute()}}static{this.styles=t.css`
+    :host {
+      display: contents; /* We are completely invisible, just wrapping children */
+    }
+    audio {
+      display: none;
+    }
+  `}render(){return t.html`
+      <audio
+        crossorigin="anonymous"
+        src="${this.src}"
+        preload="metadata"
+        @loadedmetadata="${this._handleLoadedMetadata}"
+        @ended="${this._handleEnded}"
+        @playing="${this._handlePlaying}"
+        @pause="${this._handlePause}"
+        @waiting="${()=>this._updateState({isBuffering:!0})}"
+        @canplay="${()=>this._updateState({isBuffering:!1})}"
+        @error="${this._handleError}"
+      ></audio>
+      <slot></slot>
+    `}willUpdate(e){e.has(`src`)&&this._updateState({src:this.src,isPlaying:!1,currentTime:0,error:void 0})}updated(e){e.has(`src`)&&this._audioEl&&this._audioEl.load()}disconnectedCallback(){super.disconnectedCallback(),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId),this._audioContext&&this._audioContext.state!==`closed`&&this._audioContext.close()}_updateState(e){this.state={...this.state,...e},this.dispatchEvent(new CustomEvent(`state-change`,{detail:this.state,bubbles:!0,composed:!0}))}_setupAudioContext(){if(!(this._audioContext||!this._audioEl))try{this._audioContext=new(window.AudioContext||window.webkitAudioContext),this._analyserNode=this._audioContext.createAnalyser(),this._analyserNode.fftSize=256,this._analyserNode.smoothingTimeConstant=.8,this._mediaSource=this._audioContext.createMediaElementSource(this._audioEl),this._mediaSource.connect(this._analyserNode),this._analyserNode.connect(this._audioContext.destination),this._updateState({analyserNode:this._analyserNode})}catch(e){console.warn(`Failed to set up AudioContext for visualizer:`,e)}}play(){this._audioEl.src&&(this._setupAudioContext(),this._audioContext?.state===`suspended`&&this._audioContext.resume(),this._audioEl.play().catch(e=>{console.error(`Error playing audio`,e),this._updateState({error:`Playback failed`})}))}pause(){this._audioEl&&this._audioEl.pause()}_togglePlay(){this.state.isPlaying?this.pause():this.play()}_seek(e){this._audioEl&&(this._audioEl.currentTime=e,this._updateState({currentTime:e}))}_setVolume(e){this._audioEl&&(this._audioEl.volume=e,this._updateState({volume:e,muted:e===0}))}_toggleMute(){this._audioEl&&(this._audioEl.muted=!this._audioEl.muted,this._updateState({muted:this._audioEl.muted}))}_handleLoadedMetadata(){this._updateState({duration:this._audioEl.duration})}_handleEnded(){this._updateState({isPlaying:!1,currentTime:0}),this._audioEl.currentTime=0}_handlePlaying(){this._updateState({isPlaying:!0,isBuffering:!1,error:void 0}),this._startTrackingTime()}_handlePause(){this._updateState({isPlaying:!1}),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId)}_handleError(){this._updateState({error:`Error loading audio`,isPlaying:!1,isBuffering:!1})}_startTrackingTime(){let e=()=>{this._audioEl&&this.state.isPlaying&&(Math.abs(this.state.currentTime-this._audioEl.currentTime)>.05&&this._updateState({currentTime:this._audioEl.currentTime}),this._animationFrameId=requestAnimationFrame(e))};this._animationFrameId=requestAnimationFrame(e)}};T([(0,n.property)({type:String})],V.prototype,`src`,void 0),T([(0,n.query)(`audio`)],V.prototype,`_audioEl`,void 0),T([R({context:B}),(0,n.state)()],V.prototype,`state`,void 0),V=T([(0,n.customElement)(`ui-audio-provider`)],V);var H=class extends t.LitElement{static{this.styles=t.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-circular-progress {
+      position: absolute;
+      --md-circular-progress-size: 48px;
+    }
+  `}render(){let e=this.playerState?.isPlaying??!1,n=this.playerState?.isBuffering??!1;return t.html`
+      <md-filled-icon-button
+        part="button"
+        @click="${this._handleClick}"
+        ?disabled="${!this.playerState?.src}"
+      >
+        <md-icon>${e?`pause`:`play_arrow`}</md-icon>
+      </md-filled-icon-button>
+      ${n&&e?t.html`<md-circular-progress indeterminate></md-circular-progress>`:``}
+    `}_handleClick(){this.playerState&&this.playerState.togglePlay()}};T([z({context:B,subscribe:!0}),(0,n.property)({attribute:!1})],H.prototype,`playerState`,void 0),H=T([(0,n.customElement)(`ui-audio-play-button`)],H);var U=class extends t.LitElement{constructor(...e){super(...e),this._isDragging=!1,this._dragValue=0}static{this.styles=t.css`
+    :host {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      min-width: 100px;
+    }
+
+    md-slider {
+      width: 100%;
+      /* Give the slider track better contrast against backgrounds */
+      --md-slider-inactive-track-color: var(--md-sys-color-outline, #79747e);
+    }
+  `}render(){let e=this.playerState?.duration||0,n=e===0||!this.playerState?.src,r=this._isDragging?this._dragValue:this.playerState?.currentTime||0;return t.html`
+      <md-slider
+        min="0"
+        max="${e||100}"
+        value="${r}"
+        step="0.1"
+        ?disabled="${n}"
+        @input="${this._handleInput}"
+        @change="${this._handleChange}"
+      ></md-slider>
+    `}_handleInput(e){this._isDragging=!0,this._dragValue=e.target.value}_handleChange(e){this._dragValue=e.target.value,this.playerState&&this.playerState.seek(this._dragValue),this._isDragging=!1}};T([z({context:B,subscribe:!0}),(0,n.property)({attribute:!1})],U.prototype,`playerState`,void 0),U=T([(0,n.customElement)(`ui-audio-progress-slider`)],U);var W=class extends t.LitElement{constructor(...e){super(...e),this.format=`full`}static{this.styles=t.css`
+    :host {
+      display: inline-block;
+      font-variant-numeric: tabular-nums;
+      font-size: 14px;
+      color: var(--md-sys-color-on-surface-variant, #444);
+      font-family: inherit;
+    }
+  `}render(){let e=this.playerState?.currentTime||0,n=this.playerState?.duration||0;if(this.format===`elapsed`)return t.html`${this._formatTime(e)}`;if(this.format===`remaining`){let r=Math.max(0,n-e);return t.html`-${this._formatTime(r)}`}else return t.html`${this._formatTime(e)} /
+      ${n?this._formatTime(n):`--:--`}`}_formatTime(e){if(!e||isNaN(e))return`0:00`;let t=Math.floor(e/3600),n=Math.floor(e%3600/60),r=Math.floor(e%60),i=``;return t>0&&(i+=``+t+`:`+(n<10?`0`:``)),i+=``+n+`:`+(r<10?`0`:``),i+=``+r,i}};T([z({context:B,subscribe:!0}),(0,n.property)({attribute:!1})],W.prototype,`playerState`,void 0),T([(0,n.property)({type:String})],W.prototype,`format`,void 0),W=T([(0,n.customElement)(`ui-audio-time-display`)],W);var G=class extends t.LitElement{static{this.styles=t.css`
+    :host {
+      display: inline-block;
+      width: 100%;
+      max-width: 400px;
+    }
+
+    .player-pill {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding: 12px 24px;
+      background: var(--md-sys-color-surface-container-high, #e2e2e2);
+      border-radius: 999px; /* Pill shape */
+      width: fit-content;
+      font-family: inherit;
+    }
+
+    .time-container {
+      min-width: 85px; /* prevent jitter when times change */
+    }
+
+    .slider-container {
+      width: 200px;
+      display: flex;
+      align-items: center;
+    }
+  `}render(){return t.html`
+      <ui-audio-provider .src="${this.item?.src||``}">
+        <div class="player-pill" part="container">
+          <!-- Atomic Play/Pause Button -->
+          <ui-audio-play-button></ui-audio-play-button>
+
+          <!-- Atomic Time Display (Full format: 0:00 / 0:00) -->
+          <div class="time-container">
+            <ui-audio-time-display format="full"></ui-audio-time-display>
+          </div>
+
+          <!-- Atomic Slider -->
+          <div class="slider-container">
+            <ui-audio-progress-slider></ui-audio-progress-slider>
+          </div>
+        </div>
+      </ui-audio-provider>
+    `}};T([(0,n.property)({type:Object})],G.prototype,`item`,void 0),G=T([(0,n.customElement)(`ui-audio-player`)],G);var K=class extends t.LitElement{constructor(...e){super(...e),this.muted=!1,this.disabled=!1,this._devices=[],this._loading=!0,this._error=null,this._hasPermission=!1,this._isMenuOpen=!1,this._handleDeviceChange=()=>{this._hasPermission?this._loadDevicesWithPermission():this._loadDevicesWithoutPermission()}}static{this.styles=t.css`
+    :host {
+      display: inline-block;
+      position: relative;
+      font-family: inherit;
+    }
+
+    .anchor-button {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 16px;
+      background: var(--md-sys-color-surface-container-high, #e2e2e2);
+      color: var(--md-sys-color-on-surface, #1e1e1e);
+      border-radius: 999px;
+      cursor: pointer;
+      border: none;
+      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, #e3e3e3);
+    }
+
+    .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, #ffffff)
+      );
+      --md-menu-container-shape: 12px;
+      min-width: 280px;
+    }
+
+    .menu-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 8px 12px;
+      gap: 12px;
+    }
+
+    .preview-waveform {
+      flex: 1;
+      height: 24px;
+      background: var(
+        --md-sys-color-surface-variant,
+        var(--md-sys-color-surface-container-highest, #e1e2e1)
+      );
+      border-radius: 6px;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      padding: 0 4px;
+    }
+  `}connectedCallback(){super.connectedCallback(),this._loadDevicesWithoutPermission(),navigator.mediaDevices.addEventListener(`devicechange`,this._handleDeviceChange)}disconnectedCallback(){super.disconnectedCallback(),navigator.mediaDevices.removeEventListener(`devicechange`,this._handleDeviceChange),this._stopPreview()}updated(e){super.updated(e),e.has(`_isMenuOpen`)&&this._isMenuOpen&&(!this._hasPermission&&!this._loading?this._loadDevicesWithPermission():this._hasPermission&&!this.muted&&this._startPreview()),(e.has(`_isMenuOpen`)&&!this._isMenuOpen||e.has(`muted`)&&this.muted)&&this._stopPreview(),e.has(`muted`)&&!this.muted&&this._isMenuOpen&&this._hasPermission&&this._startPreview()}render(){let e=this._devices.find(e=>e.deviceId===this.value)||this._devices[0]||{label:this._loading?`Loading...`:`No microphone`};return t.html`
+      <!-- Anchor Button -->
+      <button
+        id="anchor-button"
+        class="anchor-button"
+        ?disabled=${this._loading||this.disabled}
+        @click=${this._toggleMenu}
+      >
+        <md-icon>${this.muted?`mic_off`:`mic`}</md-icon>
+        <span class="label-text">${e.label}</span>
+        <md-icon style="font-size: 18px;">unfold_more</md-icon>
+      </button>
+
+      <!-- Dropdown Menu -->
+      <md-menu
+        id="device-menu"
+        anchor="anchor-button"
+        positioning="popover"
+        @closed=${()=>this._isMenuOpen=!1}
+        @opened=${()=>this._isMenuOpen=!0}
+      >
+        ${this._loading?t.html`<md-menu-item disabled
+              ><div slot="headline">Loading devices...</div></md-menu-item
+            >`:this._error?t.html`<md-menu-item disabled
+                ><div slot="headline" style="color: var(--md-sys-color-error)">
+                  ${this._error}
+                </div></md-menu-item
+              >`:this._devices.map(e=>t.html`
+                  <md-menu-item
+                    @click=${()=>this._selectDevice(e.deviceId)}
+                    ?selected=${this.value===e.deviceId||!this.value&&this._devices[0]?.deviceId===e.deviceId}
+                  >
+                    <div slot="headline">${e.label}</div>
+                    ${this.value===e.deviceId||!this.value&&this._devices[0]?.deviceId===e.deviceId?t.html`<md-icon slot="end">check</md-icon>`:``}
+                  </md-menu-item>
+                `)}
+        ${this._devices.length>0?t.html`
+              <md-divider></md-divider>
+              <div class="menu-footer">
+                <md-text-button @click=${this._toggleMute}>
+                  <md-icon slot="icon"
+                    >${this.muted?`mic_off`:`mic`}</md-icon
+                  >
+                  ${this.muted?`Unmute`:`Mute`}
+                </md-text-button>
+
+                <div class="preview-waveform">
+                  <ui-live-waveform
+                    .active=${this._isMenuOpen&&!this.muted&&this._hasPermission}
+                    .processing=${!1}
+                    .analyserNode=${this._previewAnalyser}
+                    .barWidth=${3}
+                    .barGap=${1}
+                    .fadeEdges=${!1}
+                    height="16"
+                  ></ui-live-waveform>
+                </div>
+              </div>
+            `:``}
+      </md-menu>
+    `}_toggleMenu(){this._menuEl&&(this._menuEl.open=!this._menuEl.open,this._isMenuOpen=this._menuEl.open)}_selectDevice(e){this.value=e,this.dispatchEvent(new CustomEvent(`device-change`,{detail:{deviceId:e},bubbles:!0,composed:!0})),this._isMenuOpen&&!this.muted&&this._hasPermission&&this._startPreview()}_toggleMute(e){e.stopPropagation(),this.muted=!this.muted,this.dispatchEvent(new CustomEvent(`mute-change`,{detail:{muted:this.muted},bubbles:!0,composed:!0}))}async _loadDevicesWithoutPermission(){try{this._loading=!0,this._error=null;let e=await navigator.mediaDevices.enumerateDevices();this._parseDeviceList(e)}catch(e){this._error=e instanceof Error?e.message:`Failed to get audio devices`}finally{this._loading=!1}}async _loadDevicesWithPermission(){if(!this._loading)try{this._loading=!0,this._error=null,(await navigator.mediaDevices.getUserMedia({audio:!0})).getTracks().forEach(e=>e.stop());let e=await navigator.mediaDevices.enumerateDevices();this._parseDeviceList(e),this._hasPermission=!0,this._isMenuOpen&&!this.muted&&this._startPreview()}catch(e){this._error=e instanceof Error?e.message:`Permission denied`}finally{this._loading=!1}}_parseDeviceList(e){let t=e.filter(e=>e.kind===`audioinput`).map(e=>{let t=e.label||"Microphone ${device.deviceId.slice(0, 8)}";return t=t.replace(/\s*\([^)]*\)/g,``).trim(),{deviceId:e.deviceId,label:t,groupId:e.groupId}});this._devices=t,!this.value&&t.length>0&&(this.value=t[0].deviceId,this.dispatchEvent(new CustomEvent(`device-change`,{detail:{deviceId:this.value},bubbles:!0,composed:!0})))}async _startPreview(){if(this._stopPreview(),this.value)try{this._previewStream=await navigator.mediaDevices.getUserMedia({audio:{deviceId:{exact:this.value}}}),this._previewAudioContext=new(window.AudioContext||window.webkitAudioContext),this._previewAnalyser=this._previewAudioContext.createAnalyser(),this._previewAnalyser.fftSize=256,this._previewAnalyser.smoothingTimeConstant=.8,this._previewAudioContext.createMediaStreamSource(this._previewStream).connect(this._previewAnalyser)}catch(e){console.warn(`Failed to start preview stream`,e)}}_stopPreview(){this._previewStream&&=(this._previewStream.getTracks().forEach(e=>e.stop()),void 0),this._previewAudioContext&&this._previewAudioContext.state!==`closed`&&(this._previewAudioContext.close(),this._previewAudioContext=void 0),this._previewAnalyser=void 0}};T([(0,n.property)({type:String})],K.prototype,`value`,void 0),T([(0,n.property)({type:Boolean})],K.prototype,`muted`,void 0),T([(0,n.property)({type:Boolean})],K.prototype,`disabled`,void 0),T([(0,n.state)()],K.prototype,`_devices`,void 0),T([(0,n.state)()],K.prototype,`_loading`,void 0),T([(0,n.state)()],K.prototype,`_error`,void 0),T([(0,n.state)()],K.prototype,`_hasPermission`,void 0),T([(0,n.state)()],K.prototype,`_isMenuOpen`,void 0),T([(0,n.state)()],K.prototype,`_previewAnalyser`,void 0),T([(0,n.query)(`md-menu`)],K.prototype,`_menuEl`,void 0),K=T([(0,n.customElement)(`ui-mic-selector`)],K);var q=class extends t.LitElement{constructor(...e){super(...e),this.voices=[],this.placeholder=`Select a voice...`,this.idKey=`voiceId`,this.titleKey=`name`,this.subtitleKey=`category`,this.previewUrlKey=`previewUrl`,this.useOrbs=!1,this.colorKey=`colors`,this._searchQuery=``}static{this.styles=t.css`
+    :host {
+      display: inline-block;
+      width: 100%;
+      font-family: inherit;
+    }
+
+    .anchor-button {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      padding: 8px 16px;
+      background: transparent;
+      border: 1px solid var(--md-sys-color-outline, #79747e);
+      border-radius: 8px;
+      color: var(--md-sys-color-on-surface, #1e1e1e);
+      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, #e3e3e3);
+    }
+
+    .anchor-button:focus-visible {
+      outline: none;
+      border-color: var(--md-sys-color-primary, #0066cc);
+      box-shadow: 0 0 0 1px var(--md-sys-color-primary, #0066cc);
+    }
+
+    .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: 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, #f3f3f3);
+      max-width: 400px;
+    }
+
+    .search-container {
+      padding: 8px 12px;
+      background: var(--md-sys-color-surface-container, #f3f3f3);
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    }
+
+    md-outlined-text-field {
+      width: 100%;
+      --md-outlined-text-field-container-shape: 8px;
+    }
+
+    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
+      );
+    }
+
+    .voice-item-content {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      width: 100%;
+      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;
+    }
+  `}render(){let e=this.voices.find(e=>e[this.idKey]===this.value),n=this.voices.filter(e=>{if(!this._searchQuery)return!0;let t=this._searchQuery.toLowerCase();return e[this.titleKey].toLowerCase().includes(t)||e.labels?.accent?.toLowerCase().includes(t)||e.labels?.gender?.toLowerCase().includes(t)||e.labels?.age?.toLowerCase().includes(t)});return t.html`
+      <!-- Hidden audio player for previews -->
+      <audio
+        crossorigin="anonymous"
+        @ended=${()=>this._previewingVoiceId=void 0}
+        @pause=${()=>this._previewingVoiceId=void 0}
+      ></audio>
+
+      <!-- Anchor Button -->
+      <button
+        class="anchor-button"
+        part="button"
+        id="voice-anchor"
+        @click=${this._toggleMenu}
+      >
+        <div class="trigger-content">
+          <div class="trigger-left">
+            ${e?t.html`
+                  <div
+                    class="trigger-icon"
+                    style="${this.useOrbs?`overflow: hidden;`:``}"
+                  >
+                    ${this.useOrbs?t.html`<ui-orb
+                          agentState="listening"
+                          .colors="${e[this.colorKey]||[`#CADCFC`,`#A0B9D1`]}"
+                        ></ui-orb>`:t.html`<md-icon style="font-size: 16px;"
+                          >record_voice_over</md-icon
+                        >`}
+                  </div>
+                  <span class="trigger-text"
+                    >${e[this.titleKey]||e.name}</span
+                  >
+                `:t.html`
+                  <span
+                    class="trigger-text"
+                    style="color: var(--md-sys-color-on-surface-variant)"
+                    >${this.placeholder}</span
+                  >
+                `}
+          </div>
+          <md-icon style="color: var(--md-sys-color-on-surface-variant);"
+            >unfold_more</md-icon
+          >
+        </div>
+      </button>
+
+      <!-- Dropdown Menu -->
+      <md-menu
+        id="voice-menu"
+        anchor="voice-anchor"
+        positioning="popover"
+        @closed=${this._handleMenuClosed}
+      >
+        <!-- The click.stop modifier stops the menu from closing when searching -->
+        <div
+          class="search-container"
+          @click=${e=>e.stopPropagation()}
+        >
+          <md-outlined-text-field
+            placeholder="Search voices..."
+            .value=${this._searchQuery}
+            @input=${e=>this._searchQuery=e.target.value}
+          >
+            <md-icon slot="leading-icon">search</md-icon>
+          </md-outlined-text-field>
+        </div>
+
+        ${n.length===0?t.html` <div class="empty-state">No voice found.</div> `:n.map(e=>t.html`
+                <md-menu-item
+                  @click=${()=>this._selectVoice(e[this.idKey])}
+                  ?selected=${this.value===e[this.idKey]}
+                >
+                  <div slot="headline" class="voice-item-content">
+                    <!-- Avatar / Preview Button -->
+                    <div
+                      class="voice-avatar"
+                      @click=${t=>this._togglePreview(t,e)}
+                    >
+                      ${this.useOrbs?t.html`<ui-orb
+                            agentState="${this._previewingVoiceId===e[this.idKey]?`talking`:`listening`}"
+                            .colors="${e[this.colorKey]||[`#CADCFC`,`#A0B9D1`]}"
+                          ></ui-orb>`:t.html`<md-icon style="font-size: 18px;"
+                            >face</md-icon
+                          >`}
+                      ${e[this.previewUrlKey]?t.html`
+                            <div
+                              class="play-overlay ${this._previewingVoiceId===e[this.idKey]?`active`:``}"
+                            >
+                              <md-icon style="font-size: 16px;">
+                                ${this._previewingVoiceId===e[this.idKey]?`pause`:`play_arrow`}
+                              </md-icon>
+                            </div>
+                          `:``}
+                    </div>
+
+                    <!-- Voice Info -->
+                    <div class="voice-info">
+                      <span class="voice-name">${e[this.titleKey]}</span>
+                      ${e[this.subtitleKey]||e.labels?t.html`
+                            <div class="voice-labels">
+                              ${e[this.subtitleKey]?t.html`<span class="voice-badge"
+                                    >${e[this.subtitleKey]}</span
+                                  >`:Object.values(e.labels||{}).filter(Boolean).map(e=>t.html`<span class="voice-badge"
+                                          >${e}</span
+                                        >`)}
+                            </div>
+                          `:``}
+                    </div>
+                  </div>
+
+                  ${this.value===e[this.idKey]?t.html`<md-icon slot="end">check</md-icon>`:``}
+                </md-menu-item>
+              `)}
+      </md-menu>
+    `}_toggleMenu(){this._menuEl&&(this._menuEl.open=!this._menuEl.open)}_handleMenuClosed(){this._stopPreview()}_selectVoice(e){this.value=e,this.dispatchEvent(new CustomEvent(`voice-change`,{detail:{voiceId:e},bubbles:!0,composed:!0}))}_togglePreview(e,t){e.stopPropagation(),e.preventDefault(),!(!t[this.previewUrlKey]||!this._audioEl)&&(this._previewingVoiceId===t[this.idKey]?this._stopPreview():(this._audioEl.src=t[this.previewUrlKey],this._audioEl.play().catch(console.error),this._previewingVoiceId=t[this.idKey]))}_stopPreview(){this._audioEl&&(this._audioEl.pause(),this._audioEl.currentTime=0),this._previewingVoiceId=void 0}};T([(0,n.property)({type:Array})],q.prototype,`voices`,void 0),T([(0,n.property)({type:String})],q.prototype,`value`,void 0),T([(0,n.property)({type:String})],q.prototype,`placeholder`,void 0),T([(0,n.property)({type:String})],q.prototype,`idKey`,void 0),T([(0,n.property)({type:String})],q.prototype,`titleKey`,void 0),T([(0,n.property)({type:String})],q.prototype,`subtitleKey`,void 0),T([(0,n.property)({type:String})],q.prototype,`previewUrlKey`,void 0),T([(0,n.property)({type:Boolean})],q.prototype,`useOrbs`,void 0),T([(0,n.property)({type:String})],q.prototype,`colorKey`,void 0),T([(0,n.state)()],q.prototype,`_searchQuery`,void 0),T([(0,n.state)()],q.prototype,`_previewingVoiceId`,void 0),T([(0,n.query)(`md-menu`)],q.prototype,`_menuEl`,void 0),T([(0,n.query)(`audio`)],q.prototype,`_audioEl`,void 0),q=T([(0,n.customElement)(`ui-voice-picker`)],q);var J=class extends t.LitElement{constructor(...e){super(...e),this.speed=50,this.barCount=60,this.barWidth=4,this.barHeight=4,this.barGap=2,this.barRadius=2,this.fadeEdges=!0,this.fadeWidth=24,this.height=128,this.active=!0,this._animationFrameId=0,this._lastTime=0,this._bars=[],this._seed=Math.random(),this._dataIndex=0}static{this.styles=t.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%;
+    }
+  `}render(){return t.html`
+      <div class="container" style="height: ${this.height}px;">
+        <canvas></canvas>
+      </div>
+    `}firstUpdated(){this._resizeObserver=new ResizeObserver(()=>{this._handleResize()}),this._resizeObserver.observe(this._container),this._canvas&&this._container&&this._populateInitialBars(),this._startAnimation()}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver&&this._resizeObserver.disconnect(),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId)}_handleResize(){if(!this._canvas||!this._container)return;let e=this._container.getBoundingClientRect(),t=window.devicePixelRatio||1;this._canvas.width=e.width*t,this._canvas.height=e.height*t,this._canvas.style.width=`${e.width}px`,this._canvas.style.height=`${e.height}px`;let n=this._canvas.getContext(`2d`);n&&n.scale(t,t)}_seededRandom(e){let t=Math.sin(this._seed*1e4+e*137.5)*1e4;return t-Math.floor(t)}_populateInitialBars(){let e=this._container.getBoundingClientRect(),t=this.barWidth+this.barGap,n=e.width,r=0;for(this._bars=[];n>-t;)this._bars.push({x:n,height:.2+this._seededRandom(r++)*.6}),n-=t;this._bars.reverse()}_startAnimation(){this._lastTime=performance.now();let e=t=>{if(!this._canvas)return;let n=this._canvas.getContext(`2d`);if(!n)return;let r=this._lastTime?(t-this._lastTime)/1e3:0;this._lastTime=t;let i=this._canvas.getBoundingClientRect();n.clearRect(0,0,i.width,i.height);let a=this.barColor;a||=getComputedStyle(this).getPropertyValue(`--md-sys-color-primary`).trim()||`#0066cc`;let o=this.barWidth+this.barGap,s=this.active?this.speed:0;for(let e=0;e<this._bars.length;e++)this._bars[e].x-=s*r,this.active||(this._bars[e].height+=(.05-this._bars[e].height)*.15);for(this._bars=this._bars.filter(e=>e.x+this.barWidth>-o);this._bars.length===0||this._bars[this._bars.length-1].x<i.width;){let e=this._bars[this._bars.length-1],t=e?e.x+o:i.width,n;if(this.data&&this.data.length>0)n=this.data[this._dataIndex%this.data.length]||.1,this._dataIndex=(this._dataIndex+1)%this.data.length;else if(this.analyserNode){(!this._dataArray||this._dataArray.length!==this.analyserNode.frequencyBinCount)&&(this._dataArray=new Uint8Array(this.analyserNode.frequencyBinCount)),this.analyserNode.getByteFrequencyData(this._dataArray);let e=0,t=Math.min(this._dataArray.length,50);for(let n=0;n<t;n++)e+=this._dataArray[n];let r=e/t/255;n=Math.max(.1,r**1.5*1.5)}else{let e=Date.now()/1e3,t=this._bars.length+e*.01,r=Math.sin(t*.1)*.2,i=Math.cos(t*.05)*.15,a=this._seededRandom(t)*.4;n=Math.max(.1,Math.min(.9,.3+r+i+a))}if(this._bars.push({x:t,height:n}),this._bars.length>this.barCount*2)break}let c=i.height/2;for(let e of this._bars)if(e.x<i.width&&e.x+this.barWidth>0){let t=Math.max(this.barHeight,e.height*i.height*.8),r=c-t/2;n.fillStyle=a,n.globalAlpha=.3+e.height*.7,this.barRadius>0?(n.beginPath(),n.roundRect(e.x,r,this.barWidth,t,this.barRadius),n.fill()):n.fillRect(e.x,r,this.barWidth,t)}n.globalAlpha=1,this.fadeEdges&&this.fadeWidth>0&&O(n,i.width,i.height,this.fadeWidth),this._animationFrameId=requestAnimationFrame(e)};this._animationFrameId=requestAnimationFrame(e)}};T([(0,n.property)({type:Number})],J.prototype,`speed`,void 0),T([(0,n.property)({type:Number})],J.prototype,`barCount`,void 0),T([(0,n.property)({type:Number})],J.prototype,`barWidth`,void 0),T([(0,n.property)({type:Number})],J.prototype,`barHeight`,void 0),T([(0,n.property)({type:Number})],J.prototype,`barGap`,void 0),T([(0,n.property)({type:Number})],J.prototype,`barRadius`,void 0),T([(0,n.property)({type:String})],J.prototype,`barColor`,void 0),T([(0,n.property)({type:Boolean})],J.prototype,`fadeEdges`,void 0),T([(0,n.property)({type:Number})],J.prototype,`fadeWidth`,void 0),T([(0,n.property)({type:Number})],J.prototype,`height`,void 0),T([(0,n.property)({type:Array})],J.prototype,`data`,void 0),T([(0,n.property)({attribute:!1})],J.prototype,`analyserNode`,void 0),T([(0,n.property)({type:Boolean})],J.prototype,`active`,void 0),T([(0,n.query)(`canvas`)],J.prototype,`_canvas`,void 0),T([(0,n.query)(`.container`)],J.prototype,`_container`,void 0),J=T([(0,n.customElement)(`ui-scrolling-waveform`)],J);var Y=class extends t.LitElement{constructor(...e){super(...e),this.title=`Component`,this.description=``,this.mode=`preview`}static{this.styles=t.css`
+    :host {
+      display: block;
+      background: var(--md-sys-color-surface, #ffffff);
+      color: var(--md-sys-color-on-surface, #1e1e1e);
+      border-radius: 12px;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      transition:
+        background-color 0.3s,
+        color 0.3s;
+      overflow: hidden;
+      font-family: inherit;
+      border: 1px solid var(--md-sys-color-outline-variant, #c4c7c5);
+    }
+
+    .header {
+      padding: 1.5rem 2rem 1rem 2rem;
+    }
+
+    .title {
+      margin-top: 0;
+      margin-bottom: 0.5rem;
+      font-size: 1.4rem;
+      font-weight: 600;
+    }
+
+    .description {
+      margin: 0;
+      font-size: 0.95rem;
+      color: var(--md-sys-color-on-surface-variant, #444444);
+      line-height: 1.5;
+    }
+
+    .tabs {
+      display: flex;
+      gap: 8px;
+      padding: 0 2rem;
+      border-bottom: 1px solid var(--md-sys-color-outline-variant, #c4c7c5);
+    }
+
+    .tab-btn {
+      padding: 8px 16px;
+      background: transparent;
+      border: none;
+      border-bottom: 2px solid transparent;
+      color: var(--md-sys-color-on-surface-variant, #444444);
+      font-family: inherit;
+      font-weight: 600;
+      font-size: 0.9rem;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+
+    .tab-btn:hover {
+      color: var(--md-sys-color-primary, #0066cc);
+      background: var(--md-sys-color-surface-container-highest, #e3e3e3);
+    }
+
+    .tab-btn.active {
+      color: var(--md-sys-color-primary, #0066cc);
+      border-bottom-color: var(--md-sys-color-primary, #0066cc);
+    }
+
+    .content-area {
+      padding: 2rem;
+      position: relative;
+      background: var(--md-sys-color-surface, #ffffff);
+    }
+
+    .preview-panel {
+      display: none;
+    }
+
+    .preview-panel.active {
+      display: block;
+    }
+
+    .code-panel {
+      display: none;
+      background: #1e1e1e; /* Standard terminal color */
+      color: #e3e3e3;
+      padding: 1.5rem;
+      border-radius: 8px;
+      overflow-x: auto;
+      font-family: 'Courier New', Courier, monospace;
+      font-size: 0.85rem;
+      line-height: 1.5;
+      margin: 0;
+    }
+
+    .code-panel.active {
+      display: block;
+    }
+  `}render(){return t.html`
+      <div class="header">
+        <h2 class="title">${this.title}</h2>
+        ${this.description?t.html`<p class="description">${this.description}</p>`:``}
+      </div>
+
+      <div class="tabs">
+        <button
+          class="tab-btn ${this.mode===`preview`?`active`:``}"
+          @click="${()=>this.mode=`preview`}"
+        >
+          Preview
+        </button>
+        <button
+          class="tab-btn ${this.mode===`code`?`active`:``}"
+          @click="${()=>this.mode=`code`}"
+        >
+          Code
+        </button>
+      </div>
+
+      <div class="content-area">
+        <div class="preview-panel ${this.mode===`preview`?`active`:``}">
+          <slot></slot>
+        </div>
+
+        <pre
+          class="code-panel ${this.mode===`code`?`active`:``}"
+        ><code><slot name="code"></slot></code></pre>
+      </div>
+    `}};T([(0,n.property)({type:String})],Y.prototype,`title`,void 0),T([(0,n.property)({type:String})],Y.prototype,`description`,void 0),T([(0,n.property)({type:String})],Y.prototype,`mode`,void 0),Y=T([(0,n.customElement)(`ui-showcase-card`)],Y);var X=class extends t.LitElement{constructor(...e){super(...e),this.text=``,this.duration=2,this.delay=0,this.repeat=!0,this.repeatDelay=.5,this.startOnView=!0,this.once=!1,this.spread=2,this._isInView=!1}static{this.styles=t.css`
+    :host {
+      display: inline-block;
+      font-family: inherit;
+    }
+
+    span {
+      position: relative;
+      display: inline-block;
+
+      /* Default colors fallback to MD3 tokens if available */
+      /* Use a highly transparent base color for maximum contrast against the shimmer */
+      --base-color: color-mix(
+        in srgb,
+        var(--md-sys-color-on-surface, #1e1e1e) 20%,
+        transparent
+      );
+      --shimmer-color: var(--md-sys-color-on-surface, #1e1e1e);
+
+      --shimmer-bg: linear-gradient(
+        90deg,
+        transparent calc(50% - var(--spread)),
+        var(--shimmer-color) 50%,
+        transparent calc(50% + var(--spread))
+      );
+
+      background-image:
+        var(--shimmer-bg), linear-gradient(var(--base-color), var(--base-color));
+      background-size:
+        250% 100%,
+        auto; /* Important: this defines the size of the animated gradient */
+      background-position: 100% center;
+      background-repeat: no-repeat;
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+      -webkit-text-fill-color: transparent;
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+
+    /* When active, trigger the keyframe animation */
+    span.active {
+      opacity: 1;
+    }
+
+    @keyframes shimmer {
+      0% {
+        background-position: 100% center;
+      }
+      100% {
+        background-position: 0% center;
+      }
+    }
+  `}firstUpdated(){this.startOnView?(this._intersectionObserver=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting?(this._isInView=!0,this.once&&this._intersectionObserver&&this._intersectionObserver.disconnect()):this.once||(this._isInView=!1)})}),this._intersectionObserver.observe(this)):this._isInView=!0}disconnectedCallback(){super.disconnectedCallback(),this._intersectionObserver&&this._intersectionObserver.disconnect()}render(){let e=!this.startOnView||this._isInView,n=`${this.text.length*this.spread}px`,r=this.duration+this.repeatDelay,i=this.repeat?`infinite`:`1`,a={"--spread":n,...this.color&&{"--base-color":this.color},...this.shimmerColor&&{"--shimmer-color":this.shimmerColor},"animation-name":e?`shimmer`:`none`,"animation-duration":`${r}s`,"animation-timing-function":`linear`,"animation-delay":`${this.delay}s`,"animation-iteration-count":i,"background-position":e&&!this.repeat?`0% center`:`100% center`},o=Object.entries(a).map(([e,t])=>`${e}: ${t}`).join(`; `);return t.html`
+      <span class="${e?`active`:``}" style="${o}">
+        ${this.text}
+      </span>
+    `}};T([(0,n.property)({type:String})],X.prototype,`text`,void 0),T([(0,n.property)({type:Number})],X.prototype,`duration`,void 0),T([(0,n.property)({type:Number})],X.prototype,`delay`,void 0),T([(0,n.property)({type:Boolean})],X.prototype,`repeat`,void 0),T([(0,n.property)({type:Number})],X.prototype,`repeatDelay`,void 0),T([(0,n.property)({type:Boolean})],X.prototype,`startOnView`,void 0),T([(0,n.property)({type:Boolean})],X.prototype,`once`,void 0),T([(0,n.property)({type:Number})],X.prototype,`spread`,void 0),T([(0,n.property)({type:String})],X.prototype,`color`,void 0),T([(0,n.property)({type:String})],X.prototype,`shimmerColor`,void 0),T([(0,n.state)()],X.prototype,`_isInView`,void 0),X=T([(0,n.customElement)(`ui-shimmering-text`)],X);var Z=class extends t.LitElement{constructor(...e){super(...e),this.agentState=null,this.inputVolume=0,this.outputVolume=0,this.volumeMode=`auto`,this.seed=Math.floor(Math.random()*2**32),this._animationFrameId=0,this._animSpeed=.1,this._curIn=0,this._curOut=0,this._textureLoader=new g.TextureLoader,this._lastTime=0,this._vertexShader=`
+uniform float uTime;
+uniform sampler2D uPerlinTexture;
+varying vec2 vUv;
+
+void main() {
+  vUv = uv;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+`,this._fragmentShader=`
+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);
+        }
+    }
+    
+    float ringRadius1 = sharpRing(decomposed, uTime * 0.1);
+    float ringRadius2 = smoothRing(decomposed, uTime * 0.1);
+    float inputRadius1 = radius + uInputVolume * 0.2;
+    float inputRadius2 = radius + uInputVolume * 0.15;
+    float opacity1 = mix(0.2, 0.6, uInputVolume);
+    float opacity2 = mix(0.15, 0.45, uInputVolume);
+
+    float ringAlpha1 = (inputRadius2 >= ringRadius1) ? opacity1 : 0.0;
+    float ringAlpha2 = smoothstep(ringRadius2 - 0.05, ringRadius2 + 0.05, inputRadius1) * opacity2;
+    float totalRingAlpha = max(ringAlpha1, ringAlpha2);
+    
+    vec3 ringColor = vec3(1.0);
+    color.rgb = 1.0 - (1.0 - color.rgb) * (1.0 - ringColor * totalRingAlpha);
+
+    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;
+}
+`}static{this.styles=t.css`
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+      position: relative;
+    }
+    .container {
+      width: 100%;
+      height: 100%;
+    }
+    canvas {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  `}render(){return t.html`<div class="container"></div>`}firstUpdated(){this._initThree()}updated(e){e.has(`colors`)&&this._updateColors()}_updateColors(){if(!(!this._targetColor1||!this._targetColor2))if(this.colors&&this.colors.length===2)this._targetColor1.set(this.colors[0]),this._targetColor2.set(this.colors[1]);else{let e=getComputedStyle(this),t=e.getPropertyValue(`--md-sys-color-primary`).trim()||`#CADCFC`,n=e.getPropertyValue(`--md-sys-color-secondary`).trim()||`#A0B9D1`;this._targetColor1.set(t),this._targetColor2.set(n)}}disconnectedCallback(){super.disconnectedCallback(),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId),this._resizeObserver&&this._resizeObserver.disconnect(),this._renderer&&this._renderer.dispose(),this._mesh&&(this._mesh.geometry.dispose(),this._mesh.material.dispose())}async _initThree(){if(!this._container)return;this._targetColor1=new g.Color,this._targetColor2=new g.Color,this._updateColors();try{this._perlinNoiseTexture=await this._textureLoader.loadAsync(`https://storage.googleapis.com/eleven-public-cdn/images/perlin-noise.png`),this._perlinNoiseTexture.wrapS=g.RepeatWrapping,this._perlinNoiseTexture.wrapT=g.RepeatWrapping}catch(e){console.warn(`Failed to load perlin noise texture for orb.`,e);return}let e=this._container.clientWidth,t=this._container.clientHeight;this._scene=new g.Scene,this._camera=new g.OrthographicCamera(-5,5,5,-5,.1,10),this._camera.position.z=1,this._renderer=new g.WebGLRenderer({alpha:!0,antialias:!0,premultipliedAlpha:!0}),this._renderer.setSize(e,t),this._renderer.setPixelRatio(window.devicePixelRatio),this._container.appendChild(this._renderer.domElement);let n=this._splitmix32(this.seed),r=new Float32Array(Array.from({length:7},()=>n()*Math.PI*2)),i=document.documentElement.classList.contains(`dark`)||window.matchMedia(`(prefers-color-scheme: dark)`).matches,a={uColor1:new g.Uniform(this._targetColor1),uColor2:new g.Uniform(this._targetColor2),uOffsets:{value:r},uPerlinTexture:new g.Uniform(this._perlinNoiseTexture),uTime:new g.Uniform(0),uAnimation:new g.Uniform(.1),uInverted:new g.Uniform(i?1:0),uInputVolume:new g.Uniform(0),uOutputVolume:new g.Uniform(0),uOpacity:new g.Uniform(0)},o=new g.CircleGeometry(3.5,64),s=new g.ShaderMaterial({uniforms:a,vertexShader:this._vertexShader,fragmentShader:this._fragmentShader,transparent:!0});this._mesh=new g.Mesh(o,s),this._scene.add(this._mesh),this._resizeObserver=new ResizeObserver(()=>{this._container&&this._renderer&&this._renderer.setSize(this._container.clientWidth,this._container.clientHeight)}),this._resizeObserver.observe(this._container),new MutationObserver(()=>{if(!this._mesh)return;let e=document.documentElement.classList.contains(`dark`);this._mesh.material.uniforms.uInverted.value=e?1:0,this._updateColors()}).observe(document.documentElement,{attributes:!0,attributeFilter:[`class`]}),this._lastTime=performance.now(),this._animate()}_animate(){if(this._animationFrameId=requestAnimationFrame(()=>this._animate()),!this._mesh||!this._renderer||!this._scene||!this._camera)return;let e=performance.now(),t=(e-this._lastTime)/1e3;this._lastTime=e;let n=this._mesh.material.uniforms;n.uTime.value+=t*.5,n.uOpacity.value<1&&(n.uOpacity.value=Math.min(1,n.uOpacity.value+t*2));let r=0,i=.3;if(this.volumeMode===`manual`)r=this._clamp01(this.inputVolume),i=this._clamp01(this.outputVolume);else{let e=n.uTime.value*2;if(this.agentState===null)r=0,i=.3;else if(this.agentState===`listening`)r=this._clamp01(.55+Math.sin(e*3.2)*.35),i=.45;else if(this.agentState===`talking`)r=this._clamp01(.65+Math.sin(e*4.8)*.22),i=this._clamp01(.75+Math.sin(e*3.6)*.22);else{let t=.38+.07*Math.sin(e*.7),n=.05*Math.sin(e*2.1)*Math.sin(e*.37+1.2);r=this._clamp01(t+n),i=this._clamp01(.48+.12*Math.sin(e*1.05+.6))}}this._curIn+=(r-this._curIn)*.2,this._curOut+=(i-this._curOut)*.2;let a=.1+(1-(this._curOut-1)**2)*.9;this._animSpeed+=(a-this._animSpeed)*.12,n.uAnimation.value+=t*this._animSpeed,n.uInputVolume.value=this._curIn,n.uOutputVolume.value=this._curOut,n.uColor1.value.lerp(this._targetColor1,.08),n.uColor2.value.lerp(this._targetColor2,.08),this._renderer.render(this._scene,this._camera)}_splitmix32(e){return function(){e|=0,e=e+2654435769|0;let t=e^e>>>16;return t=Math.imul(t,569420461),t^=t>>>15,t=Math.imul(t,1935289751),((t^=t>>>15)>>>0)/4294967296}}_clamp01(e){return Number.isFinite(e)?Math.min(1,Math.max(0,e)):0}};T([(0,n.property)({type:Array})],Z.prototype,`colors`,void 0),T([(0,n.property)({type:String})],Z.prototype,`agentState`,void 0),T([(0,n.property)({type:Number})],Z.prototype,`inputVolume`,void 0),T([(0,n.property)({type:Number})],Z.prototype,`outputVolume`,void 0),T([(0,n.property)({type:String})],Z.prototype,`volumeMode`,void 0),T([(0,n.property)({type:Number})],Z.prototype,`seed`,void 0),T([(0,n.query)(`.container`)],Z.prototype,`_container`,void 0),Z=T([(0,n.customElement)(`ui-orb`)],Z);var Q=class extends t.LitElement{static{this.styles=t.css`
+    :host {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    md-slider {
+      flex: 1;
+      min-width: 0; /* Prevent flex overflow */
+      width: 100%;
+      --md-slider-inactive-track-color: var(
+        --md-sys-color-outline-variant,
+        #c4c7c5
+      );
+    }
+
+    md-icon-button {
+      color: var(--md-sys-color-on-surface-variant, #444);
+    }
+  `}render(){let e=this.playerState?.volume??1,n=this.playerState?.muted??!1,r=`volume_up`;return n||e===0?r=`volume_off`:e<.5&&(r=`volume_down`),t.html`
+      <md-icon-button @click="${this._toggleMute}" part="button">
+        <md-icon>${r}</md-icon>
+      </md-icon-button>
+      <md-slider
+        part="slider"
+        min="0"
+        max="1"
+        value="${n?0:e}"
+        step="0.01"
+        ?disabled="${!this.playerState?.src}"
+        @input="${this._handleInput}"
+      ></md-slider>
+    `}_handleInput(e){let t=e.target;this.playerState&&this.playerState.setVolume(t.value)}_toggleMute(){this.playerState&&this.playerState.toggleMute()}};T([z({context:B,subscribe:!0}),(0,n.property)({attribute:!1})],Q.prototype,`playerState`,void 0),Q=T([(0,n.customElement)(`ui-audio-volume-slider`)],Q),Object.defineProperty(e,`ScreamVoiceButton`,{enumerable:!0,get:function(){return E}}),Object.defineProperty(e,`UiAudioPlayButton`,{enumerable:!0,get:function(){return H}}),Object.defineProperty(e,`UiAudioPlayer`,{enumerable:!0,get:function(){return G}}),Object.defineProperty(e,`UiAudioProgressSlider`,{enumerable:!0,get:function(){return U}}),Object.defineProperty(e,`UiAudioProvider`,{enumerable:!0,get:function(){return V}}),Object.defineProperty(e,`UiAudioTimeDisplay`,{enumerable:!0,get:function(){return W}}),Object.defineProperty(e,`UiAudioVolumeSlider`,{enumerable:!0,get:function(){return Q}}),Object.defineProperty(e,`UiLiveWaveform`,{enumerable:!0,get:function(){return k}}),Object.defineProperty(e,`UiMicSelector`,{enumerable:!0,get:function(){return K}}),Object.defineProperty(e,`UiOrb`,{enumerable:!0,get:function(){return Z}}),Object.defineProperty(e,`UiScrollingWaveform`,{enumerable:!0,get:function(){return J}}),Object.defineProperty(e,`UiShimmeringText`,{enumerable:!0,get:function(){return X}}),Object.defineProperty(e,`UiShowcaseCard`,{enumerable:!0,get:function(){return Y}}),Object.defineProperty(e,`UiVoiceButton`,{enumerable:!0,get:function(){return A}}),Object.defineProperty(e,`UiVoicePicker`,{enumerable:!0,get:function(){return q}}),Object.defineProperty(e,`UiWaveform`,{enumerable:!0,get:function(){return j}}),e.audioPlayerContext=B});