@ghchinoy/lit-audio-ui 0.2.1 → 0.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/components/ui-mic-selector.js +14 -0
  2. package/dist/components/ui-speech-cancel-button.js +15 -2
  3. package/dist/components/ui-speech-preview.js +8 -3
  4. package/dist/components/ui-speech-provider.js +23 -18
  5. package/dist/components/ui-speech-record-button.js +8 -2
  6. package/dist/components/ui-voice-button.js +77 -34
  7. package/dist/components/ui-voice-picker.js +4 -0
  8. package/dist/scream-audio-ui.umd.js +138 -54
  9. package/dist/utils/audio-utils.js +22 -3
  10. package/package.json +1 -1
package/dist/components/ui-mic-selector.js CHANGED
@@ -78,6 +78,15 @@ var c = class extends t {
78
78
  );
79
79
  --md-menu-container-shape: 12px;
80
80
  min-width: 280px;
81
+ font-family: inherit;
82
+ }
83
+
84
+ md-menu-item {
85
+ font-family: inherit;
86
+ }
87
+
88
+ md-menu-item div[slot='headline'] {
89
+ font-family: inherit;
81
90
  }
82
91
 
83
92
  .menu-footer {
@@ -86,6 +95,11 @@ var c = class extends t {
86
95
  justify-content: space-between;
87
96
  padding: 8px 12px;
88
97
  gap: 12px;
98
+ font-family: inherit;
99
+ }
100
+
101
+ md-text-button {
102
+ font-family: inherit;
89
103
  }
90
104
 
91
105
  .preview-waveform {
package/dist/components/ui-speech-cancel-button.js CHANGED
@@ -9,10 +9,23 @@ var s = class extends r {
9
9
  static {
10
10
  this.styles = i`
11
11
  :host {
12
- display: none;
12
+ display: inline-block;
13
+ opacity: 0;
14
+ visibility: hidden;
15
+ transition: all 0.3s ease;
16
+ width: 0;
17
+ overflow: hidden;
13
18
  }
14
19
  :host([active]) {
15
- display: inline-block;
20
+ opacity: 1;
21
+ visibility: visible;
22
+ width: 40px;
23
+ }
24
+ md-icon-button {
25
+ --md-icon-button-icon-color: var(
26
+ --md-sys-color-on-surface-variant,
27
+ #444444
28
+ );
16
29
  }
17
30
  `;
18
31
  }
package/dist/components/ui-speech-preview.js CHANGED
@@ -20,7 +20,7 @@ var c = class extends r {
20
20
 
21
21
  .transcript {
22
22
  font-size: 14px;
23
- color: var(--md-sys-color-on-surface);
23
+ color: var(--md-sys-color-on-surface, #1e1e1e);
24
24
  white-space: nowrap;
25
25
  overflow: hidden;
26
26
  text-overflow: ellipsis;
@@ -28,7 +28,7 @@ var c = class extends r {
28
28
  }
29
29
 
30
30
  .placeholder {
31
- color: var(--md-sys-color-outline);
31
+ color: var(--md-sys-color-outline, #79747e);
32
32
  font-style: italic;
33
33
  }
34
34
 
@@ -37,12 +37,17 @@ var c = class extends r {
37
37
  height: 24px;
38
38
  display: flex;
39
39
  align-items: center;
40
- transition: opacity 0.3s ease;
40
+ justify-content: center;
41
+ background: transparent;
42
+ border-radius: 4px;
43
+ transition: all 0.3s ease;
41
44
  }
42
45
 
43
46
  .hidden {
47
+ width: 0;
44
48
  opacity: 0;
45
49
  pointer-events: none;
50
+ margin-left: -12px;
46
51
  }
47
52
  `;
48
53
  }
package/dist/components/ui-speech-provider.js CHANGED
@@ -1,9 +1,10 @@
1
1
  import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
2
- import { e as t } from "../node_modules/@lit/context/lib/decorators/provide.js";
3
- import { speechContext as n } from "../utils/speech-context.js";
4
- import { LitElement as r, css as i, html as a } from "lit";
5
- import { customElement as o, property as s, state as c } from "lit/decorators.js";
6
- var l = class extends r {
2
+ import { createMockAnalyser as t } from "../utils/audio-utils.js";
3
+ import { e as n } from "../node_modules/@lit/context/lib/decorators/provide.js";
4
+ import { speechContext as r } from "../utils/speech-context.js";
5
+ import { LitElement as i, css as a, html as o } from "lit";
6
+ import { customElement as s, property as c, state as l } from "lit/decorators.js";
7
+ var u = class extends i {
7
8
  constructor(...e) {
8
9
  super(...e), this._context = {
9
10
  state: "idle",
@@ -12,7 +13,7 @@ var l = class extends r {
12
13
  start: () => this.start(),
13
14
  stop: () => this.stop(),
14
15
  cancel: () => this.cancel()
15
- }, this.state = "idle", this._fakeTranscript = [
16
+ }, this.state = "idle", this.simulation = !1, this._fakeTranscript = [
16
17
  "I",
17
18
  " am",
18
19
  " recording",
@@ -24,7 +25,7 @@ var l = class extends r {
24
25
  ];
25
26
  }
26
27
  static {
27
- this.styles = i`
28
+ this.styles = a`
28
29
  :host {
29
30
  display: contents;
30
31
  }
@@ -35,20 +36,24 @@ var l = class extends r {
35
36
  }
36
37
  async start() {
37
38
  if (this._context.state === "idle") try {
38
- this._updateContext({ state: "connecting" }), this._stream = await navigator.mediaDevices.getUserMedia({ audio: !0 }), this._audioCtx ||= new (window.AudioContext || window.webkitAudioContext)();
39
- let e = this._audioCtx.createMediaStreamSource(this._stream);
40
- this._analyser = this._audioCtx.createAnalyser(), this._analyser.fftSize = 256, e.connect(this._analyser), this._updateContext({
39
+ if (this._updateContext({ state: "connecting" }), this.simulation) this._analyser = t();
40
+ else {
41
+ this._stream = await navigator.mediaDevices.getUserMedia({ audio: !0 }), this._audioCtx ||= new (window.AudioContext || window.webkitAudioContext)();
42
+ let e = this._audioCtx.createMediaStreamSource(this._stream);
43
+ this._analyser = this._audioCtx.createAnalyser(), this._analyser.fftSize = 256, e.connect(this._analyser);
44
+ }
45
+ this._updateContext({
41
46
  state: "recording",
42
47
  analyserNode: this._analyser,
43
48
  transcript: "",
44
49
  partialTranscript: "Listening..."
45
50
  });
46
- let t = 0;
51
+ let e = 0;
47
52
  this._transcriptInterval = setInterval(() => {
48
- if (t < this._fakeTranscript.length) {
49
- t === 0 && this._updateContext({ partialTranscript: "" });
50
- let e = this._context.partialTranscript;
51
- this._updateContext({ partialTranscript: e + this._fakeTranscript[t] }), t++;
53
+ if (e < this._fakeTranscript.length) {
54
+ e === 0 && this._updateContext({ partialTranscript: "" });
55
+ let t = this._context.partialTranscript;
56
+ this._updateContext({ partialTranscript: t + this._fakeTranscript[e] }), e++;
52
57
  }
53
58
  }, 500), this.dispatchEvent(new CustomEvent("speech-start", {
54
59
  bubbles: !0,
@@ -99,8 +104,8 @@ var l = class extends r {
99
104
  }));
100
105
  }
101
106
  render() {
102
- return a`<slot></slot>`;
107
+ return o`<slot></slot>`;
103
108
  }
104
109
  };
105
- e([t({ context: n }), c()], l.prototype, "_context", void 0), e([s({ type: String })], l.prototype, "state", void 0), l = e([o("ui-speech-provider")], l);
106
- export { l as UiSpeechProvider };
110
+ e([n({ context: r }), l()], u.prototype, "_context", void 0), e([c({ type: String })], u.prototype, "state", void 0), e([c({ type: Boolean })], u.prototype, "simulation", void 0), u = e([s("ui-speech-provider")], u);
111
+ export { u as UiSpeechProvider };
package/dist/components/ui-speech-record-button.js CHANGED
@@ -32,10 +32,16 @@ var c = class extends r {
32
32
  }
33
33
 
34
34
  .recording {
35
- --md-filled-icon-button-container-color: var(--md-sys-color-error);
35
+ --md-filled-icon-button-container-color: var(
36
+ --md-sys-color-error,
37
+ #ba1a1a
38
+ );
36
39
  }
37
40
  .processing {
38
- --md-filled-icon-button-container-color: var(--md-sys-color-secondary);
41
+ --md-filled-icon-button-container-color: var(
42
+ --md-sys-color-secondary,
43
+ #0066cc
44
+ );
39
45
  animation: pulse 2s infinite;
40
46
  }
41
47
 
package/dist/components/ui-voice-button.js CHANGED
@@ -23,7 +23,7 @@ import "@material/web/button/outlined-button.js";
23
23
  */
24
24
  var c = class extends t {
25
25
  constructor(...e) {
26
- super(...e), this.state = "idle", this.disabled = !1, this._showFeedback = !1;
26
+ super(...e), this.state = "idle", this.disabled = !1, this._showFeedback = !1, this._feedbackType = null;
27
27
  }
28
28
  static {
29
29
  this.styles = n`
@@ -42,6 +42,7 @@ var c = class extends t {
42
42
  md-filled-button,
43
43
  md-outlined-button {
44
44
  transition: all 0.2s ease-in-out;
45
+ font-family: inherit;
45
46
  }
46
47
 
47
48
  /* Customize the button depending on the state */
@@ -54,6 +55,26 @@ var c = class extends t {
54
55
  --md-sys-color-on-error-container,
55
56
  #410002
56
57
  );
58
+ --md-filled-button-hover-label-text-color: var(
59
+ --md-sys-color-on-error-container,
60
+ #410002
61
+ );
62
+ --md-filled-button-focus-label-text-color: var(
63
+ --md-sys-color-on-error-container,
64
+ #410002
65
+ );
66
+ --md-filled-button-pressed-label-text-color: var(
67
+ --md-sys-color-on-error-container,
68
+ #410002
69
+ );
70
+ --md-filled-button-with-icon-icon-color: var(
71
+ --md-sys-color-on-error-container,
72
+ #410002
73
+ );
74
+ --md-filled-button-with-icon-hover-icon-color: var(
75
+ --md-sys-color-on-error-container,
76
+ #410002
77
+ );
57
78
  }
58
79
 
59
80
  md-filled-button.processing {
@@ -87,19 +108,28 @@ var c = class extends t {
87
108
  display: flex;
88
109
  align-items: center;
89
110
  justify-content: center;
90
- background: var(--md-sys-color-surface-container-highest, #e3e3e3);
91
- border: 1px solid var(--md-sys-color-outline-variant, #c4c7c5);
92
- transition: background-color 0.3s ease;
111
+ background: transparent;
112
+ border: none;
113
+ transition: all 0.3s ease;
114
+ }
115
+
116
+ .waveform-slot.idle {
117
+ width: 0;
118
+ opacity: 0;
119
+ margin-left: -12px; /* Pull back to hide gap when idle */
120
+ }
121
+
122
+ .waveform-slot.recording,
123
+ .waveform-slot.processing {
124
+ opacity: 1;
93
125
  }
94
126
 
95
127
  .waveform-slot.recording {
96
- background: var(--md-sys-color-error-container, #ffdad6);
97
- border-color: transparent;
128
+ color: var(--md-sys-color-on-error-container, #410002);
98
129
  }
99
130
 
100
131
  .waveform-slot.processing {
101
- background: var(--md-sys-color-secondary-container, #cce5ff);
102
- border-color: transparent;
132
+ color: var(--md-sys-color-on-secondary-container, #001d36);
103
133
  }
104
134
 
105
135
  .trailing-text {
@@ -116,18 +146,28 @@ var c = class extends t {
116
146
  display: flex;
117
147
  align-items: center;
118
148
  justify-content: center;
119
- background: var(--md-sys-color-surface, #fff);
149
+ background: inherit;
150
+ border-radius: inherit;
120
151
  animation: fadeIn 0.3s ease forwards;
152
+ pointer-events: none;
153
+ }
154
+
155
+ .feedback-overlay.success {
156
+ background: var(--md-sys-color-primary-container, #d1e4ff);
157
+ }
158
+
159
+ .feedback-overlay.error {
160
+ background: var(--md-sys-color-error-container, #ffdad6);
121
161
  }
122
162
 
123
163
  .feedback-icon {
124
164
  font-size: 16px;
125
165
  }
126
166
  .feedback-icon.success {
127
- color: var(--md-sys-color-primary, #0066cc);
167
+ color: var(--md-sys-color-on-primary-container, #001d36);
128
168
  }
129
169
  .feedback-icon.error {
130
- color: var(--md-sys-color-error, #ba1a1a);
170
+ color: var(--md-sys-color-on-error-container, #410002);
131
171
  }
132
172
 
133
173
  @keyframes fadeIn {
@@ -141,32 +181,33 @@ var c = class extends t {
141
181
  `;
142
182
  }
143
183
  updated(e) {
144
- super.updated(e), e.has("state") && (this.state === "success" || this.state === "error" ? (this._showFeedback = !0, this._feedbackTimeout && clearTimeout(this._feedbackTimeout), this._feedbackTimeout = setTimeout(() => {
145
- this._showFeedback = !1, (this.state === "success" || this.state === "error") && (this.state = "idle");
146
- }, 1500)) : this._showFeedback = !1);
184
+ super.updated(e), e.has("state") && (this.state === "success" || this.state === "error" ? (this._showFeedback = !0, this._feedbackType = this.state, this._feedbackTimeout && clearTimeout(this._feedbackTimeout), this._feedbackTimeout = setTimeout(() => {
185
+ this._showFeedback = !1, this._feedbackType = null, (this.state === "success" || this.state === "error") && (this.state = "idle");
186
+ }, 1500)) : this.state !== "idle" && (this._showFeedback = !1, this._feedbackType = null));
147
187
  }
148
188
  render() {
149
- let e = this.state === "recording", t = this.state === "processing", n = this.state === "success", i = this.state === "error", a = this.disabled || t, o = e || t, c = !o && !this._showFeedback && this.trailing, l = {
189
+ let e = this.state === "recording", t = this.state === "processing", n = this.disabled || t, i = e || t, a = !i && !this._showFeedback && this.trailing, o = {
150
190
  recording: e,
151
191
  processing: t,
152
- success: n && this._showFeedback,
153
- error: i && this._showFeedback
154
- }, u = {
192
+ success: this._feedbackType === "success",
193
+ error: this._feedbackType === "error"
194
+ }, c = {
155
195
  "waveform-slot": !0,
196
+ idle: !e && !t,
156
197
  recording: e,
157
198
  processing: t
158
199
  };
159
200
  return r`
160
201
  <md-filled-button
161
- class=${s(l)}
162
- ?disabled=${a}
202
+ class=${s(o)}
203
+ ?disabled=${n}
163
204
  @click=${this._handleClick}
164
205
  >
165
206
  <div class="wrapper">
166
207
  ${this.label ? r`<span>${this.label}</span>` : ""}
167
208
 
168
- <div class=${s(u)}>
169
- ${o ? r`
209
+ <div class=${s(c)}>
210
+ ${i ? r`
170
211
  <ui-live-waveform
171
212
  .active=${e}
172
213
  .processing=${t}
@@ -176,22 +217,24 @@ var c = class extends t {
176
217
  .barRadius=${4}
177
218
  .fadeEdges=${!1}
178
219
  .sensitivity=${1.8}
220
+ barColor="currentColor"
179
221
  height="20"
180
222
  style="position: absolute; inset: 0;"
181
223
  ></ui-live-waveform>
182
224
  ` : ""}
183
- ${c ? r` <span class="trailing-text">${this.trailing}</span> ` : ""}
184
- ${this._showFeedback && n ? r`
185
- <div class="feedback-overlay">
186
- <md-icon class="feedback-icon success">check</md-icon>
187
- </div>
188
- ` : ""}
189
- ${this._showFeedback && i ? r`
190
- <div class="feedback-overlay">
191
- <md-icon class="feedback-icon error">close</md-icon>
192
- </div>
193
- ` : ""}
225
+ ${a ? r` <span class="trailing-text">${this.trailing}</span> ` : ""}
194
226
  </div>
227
+
228
+ ${this._showFeedback && this._feedbackType === "success" ? r`
229
+ <div class="feedback-overlay success">
230
+ <md-icon class="feedback-icon success">check</md-icon>
231
+ </div>
232
+ ` : ""}
233
+ ${this._showFeedback && this._feedbackType === "error" ? r`
234
+ <div class="feedback-overlay error">
235
+ <md-icon class="feedback-icon error">close</md-icon>
236
+ </div>
237
+ ` : ""}
195
238
  </div>
196
239
  </md-filled-button>
197
240
  `;
@@ -204,5 +247,5 @@ var c = class extends t {
204
247
  }));
205
248
  }
206
249
  };
207
- e([a({ type: String })], c.prototype, "state", void 0), e([a({ type: String })], c.prototype, "label", void 0), e([a({ type: String })], c.prototype, "trailing", void 0), e([a({ type: Boolean })], c.prototype, "disabled", void 0), e([a({ attribute: !1 })], c.prototype, "analyserNode", void 0), e([o()], c.prototype, "_showFeedback", void 0), c = e([i("ui-voice-button")], c);
250
+ e([a({ type: String })], c.prototype, "state", void 0), e([a({ type: String })], c.prototype, "label", void 0), e([a({ type: String })], c.prototype, "trailing", void 0), e([a({ type: Boolean })], c.prototype, "disabled", void 0), e([a({ attribute: !1 })], c.prototype, "analyserNode", void 0), e([o()], c.prototype, "_showFeedback", void 0), e([o()], c.prototype, "_feedbackType", void 0), c = e([i("ui-voice-button")], c);
208
251
  export { c as UiVoiceButton };
package/dist/components/ui-voice-picker.js CHANGED
@@ -102,17 +102,20 @@ var c = class extends t {
102
102
  --md-menu-container-shape: 12px;
103
103
  --md-menu-container-color: var(--md-sys-color-surface-container, #f3f3f3);
104
104
  max-width: 400px;
105
+ font-family: inherit;
105
106
  }
106
107
 
107
108
  .search-container {
108
109
  padding: 8px 12px;
109
110
  background: var(--md-sys-color-surface-container, #f3f3f3);
110
111
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
112
+ font-family: inherit;
111
113
  }
112
114
 
113
115
  md-outlined-text-field {
114
116
  width: 100%;
115
117
  --md-outlined-text-field-container-shape: 8px;
118
+ font-family: inherit;
116
119
  }
117
120
 
118
121
  md-menu-item {
@@ -122,6 +125,7 @@ var c = class extends t {
122
125
  --md-menu-item-focus-state-layer-color: var(
123
126
  --md-sys-color-on-surface-variant
124
127
  );
128
+ font-family: inherit;
125
129
  }
126
130
 
127
131
  .voice-item-content {
package/dist/scream-audio-ui.umd.js CHANGED
@@ -1,4 +1,4 @@
1
- (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(`@material/web/iconbutton/icon-button.js`),require(`three`)):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`,`@material/web/iconbutton/icon-button.js`,`three`],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.MaterialWeb,e.THREE))})(this,function(e,t,n,r,i,a,o,s,c,l,u,ee,d,te,ne,re,f,p){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var m=Object.create,h=Object.defineProperty,g=Object.getOwnPropertyDescriptor,_=Object.getOwnPropertyNames,v=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty,b=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=_(t),a=0,o=i.length,s;a<o;a++)s=i[a],!y.call(e,s)&&s!==n&&h(e,s,{get:(e=>t[e]).bind(null,s),enumerable:!(r=g(t,s))||r.enumerable});return e};p=((e,t,n)=>(n=e==null?{}:m(v(e)),b(t||!e||!e.__esModule?h(n,`default`,{value:e,enumerable:!0}):n,e)))(p);function x(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 S=class extends t.LitElement{constructor(...e){super(...e),this.state=`idle`}static{this.styles=t.css`
1
+ (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(`@material/web/iconbutton/icon-button.js`),require(`three`)):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`,`@material/web/iconbutton/icon-button.js`,`three`],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.MaterialWeb,e.THREE))})(this,function(e,t,n,r,i,a,o,s,c,l,u,ee,d,te,ne,re,ie,f){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var p=Object.create,m=Object.defineProperty,h=Object.getOwnPropertyDescriptor,g=Object.getOwnPropertyNames,_=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty,y=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=g(t),a=0,o=i.length,s;a<o;a++)s=i[a],!v.call(e,s)&&s!==n&&m(e,s,{get:(e=>t[e]).bind(null,s),enumerable:!(r=h(t,s))||r.enumerable});return e};f=((e,t,n)=>(n=e==null?{}:p(_(e)),y(t||!e||!e.__esModule?m(n,`default`,{value:e,enumerable:!0}):n,e)))(f);function b(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 x=class extends t.LitElement{constructor(...e){super(...e),this.state=`idle`}static{this.styles=t.css`
2
2
  :host {
3
3
  display: inline-block;
4
4
  }
@@ -22,7 +22,7 @@
22
22
 
23
23
  ${this.state===`recording`?`Recording...`:`Speak`}
24
24
  </md-filled-button>
25
- `}_handleClick(){this.state=this.state===`idle`?`recording`:`idle`,this.dispatchEvent(new CustomEvent(`voice-toggle`,{bubbles:!0,composed:!0,detail:{state:this.state}}))}};x([(0,n.property)({type:String})],S.prototype,`state`,void 0),S=x([(0,n.customElement)(`scream-voice-button`)],S);function C(e,t){e.getByteFrequencyData(t);let n=[];for(let e=0;e<t.length;e++)n.push(t[e]/255);return n}function w(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 T=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`
25
+ `}_handleClick(){this.state=this.state===`idle`?`recording`:`idle`,this.dispatchEvent(new CustomEvent(`voice-toggle`,{bubbles:!0,composed:!0,detail:{state:this.state}}))}};b([(0,n.property)({type:String})],x.prototype,`state`,void 0),x=b([(0,n.customElement)(`scream-voice-button`)],x);function S(){return{fftSize:256,frequencyBinCount:128,getByteFrequencyData:e=>{let t=performance.now()/1e3;for(let n=0;n<e.length;n++){let r=Math.sin(t*2+n*.1)*50+Math.sin(t*5+n*.2)*30+100;e[n]=Math.max(0,Math.min(255,r))}}}}function C(e,t){e.getByteFrequencyData(t);let n=[];for(let e=0;e<t.length;e++)n.push(t[e]/255);return n}function w(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 T=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`
26
26
  :host {
27
27
  display: block;
28
28
  width: 100%;
@@ -43,7 +43,7 @@
43
43
  <div class="container" style="height: ${this.height}px;">
44
44
  <canvas></canvas>
45
45
  </div>
46
- `}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=C(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&&w(e,t.width,t.height,this.fadeWidth),e.globalAlpha=1}};x([(0,n.property)({type:Boolean})],T.prototype,`active`,void 0),x([(0,n.property)({type:Boolean})],T.prototype,`processing`,void 0),x([(0,n.property)({attribute:!1})],T.prototype,`analyserNode`,void 0),x([(0,n.property)({type:Number})],T.prototype,`barWidth`,void 0),x([(0,n.property)({type:Number})],T.prototype,`barHeight`,void 0),x([(0,n.property)({type:Number})],T.prototype,`barGap`,void 0),x([(0,n.property)({type:Number})],T.prototype,`barRadius`,void 0),x([(0,n.property)({type:String})],T.prototype,`barColor`,void 0),x([(0,n.property)({type:Boolean})],T.prototype,`fadeEdges`,void 0),x([(0,n.property)({type:Number})],T.prototype,`fadeWidth`,void 0),x([(0,n.property)({type:Number})],T.prototype,`height`,void 0),x([(0,n.property)({type:Number})],T.prototype,`sensitivity`,void 0),x([(0,n.property)({type:Number})],T.prototype,`updateRate`,void 0),x([(0,n.query)(`canvas`)],T.prototype,`_canvas`,void 0),x([(0,n.query)(`.container`)],T.prototype,`_container`,void 0),T=x([(0,n.customElement)(`ui-live-waveform`)],T);var E=class extends t.LitElement{constructor(...e){super(...e),this.state=`idle`,this.disabled=!1,this._showFeedback=!1}static{this.styles=t.css`
46
+ `}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=C(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&&w(e,t.width,t.height,this.fadeWidth),e.globalAlpha=1}};b([(0,n.property)({type:Boolean})],T.prototype,`active`,void 0),b([(0,n.property)({type:Boolean})],T.prototype,`processing`,void 0),b([(0,n.property)({attribute:!1})],T.prototype,`analyserNode`,void 0),b([(0,n.property)({type:Number})],T.prototype,`barWidth`,void 0),b([(0,n.property)({type:Number})],T.prototype,`barHeight`,void 0),b([(0,n.property)({type:Number})],T.prototype,`barGap`,void 0),b([(0,n.property)({type:Number})],T.prototype,`barRadius`,void 0),b([(0,n.property)({type:String})],T.prototype,`barColor`,void 0),b([(0,n.property)({type:Boolean})],T.prototype,`fadeEdges`,void 0),b([(0,n.property)({type:Number})],T.prototype,`fadeWidth`,void 0),b([(0,n.property)({type:Number})],T.prototype,`height`,void 0),b([(0,n.property)({type:Number})],T.prototype,`sensitivity`,void 0),b([(0,n.property)({type:Number})],T.prototype,`updateRate`,void 0),b([(0,n.query)(`canvas`)],T.prototype,`_canvas`,void 0),b([(0,n.query)(`.container`)],T.prototype,`_container`,void 0),T=b([(0,n.customElement)(`ui-live-waveform`)],T);var E=class extends t.LitElement{constructor(...e){super(...e),this.state=`idle`,this.disabled=!1,this._showFeedback=!1,this._feedbackType=null}static{this.styles=t.css`
47
47
  :host {
48
48
  display: inline-block;
49
49
  --ui-waveform-height: 24px;
@@ -59,6 +59,7 @@
59
59
  md-filled-button,
60
60
  md-outlined-button {
61
61
  transition: all 0.2s ease-in-out;
62
+ font-family: inherit;
62
63
  }
63
64
 
64
65
  /* Customize the button depending on the state */
@@ -71,6 +72,26 @@
71
72
  --md-sys-color-on-error-container,
72
73
  #410002
73
74
  );
75
+ --md-filled-button-hover-label-text-color: var(
76
+ --md-sys-color-on-error-container,
77
+ #410002
78
+ );
79
+ --md-filled-button-focus-label-text-color: var(
80
+ --md-sys-color-on-error-container,
81
+ #410002
82
+ );
83
+ --md-filled-button-pressed-label-text-color: var(
84
+ --md-sys-color-on-error-container,
85
+ #410002
86
+ );
87
+ --md-filled-button-with-icon-icon-color: var(
88
+ --md-sys-color-on-error-container,
89
+ #410002
90
+ );
91
+ --md-filled-button-with-icon-hover-icon-color: var(
92
+ --md-sys-color-on-error-container,
93
+ #410002
94
+ );
74
95
  }
75
96
 
76
97
  md-filled-button.processing {
@@ -104,19 +125,28 @@
104
125
  display: flex;
105
126
  align-items: center;
106
127
  justify-content: center;
107
- background: var(--md-sys-color-surface-container-highest, #e3e3e3);
108
- border: 1px solid var(--md-sys-color-outline-variant, #c4c7c5);
109
- transition: background-color 0.3s ease;
128
+ background: transparent;
129
+ border: none;
130
+ transition: all 0.3s ease;
131
+ }
132
+
133
+ .waveform-slot.idle {
134
+ width: 0;
135
+ opacity: 0;
136
+ margin-left: -12px; /* Pull back to hide gap when idle */
137
+ }
138
+
139
+ .waveform-slot.recording,
140
+ .waveform-slot.processing {
141
+ opacity: 1;
110
142
  }
111
143
 
112
144
  .waveform-slot.recording {
113
- background: var(--md-sys-color-error-container, #ffdad6);
114
- border-color: transparent;
145
+ color: var(--md-sys-color-on-error-container, #410002);
115
146
  }
116
147
 
117
148
  .waveform-slot.processing {
118
- background: var(--md-sys-color-secondary-container, #cce5ff);
119
- border-color: transparent;
149
+ color: var(--md-sys-color-on-secondary-container, #001d36);
120
150
  }
121
151
 
122
152
  .trailing-text {
@@ -133,18 +163,28 @@
133
163
  display: flex;
134
164
  align-items: center;
135
165
  justify-content: center;
136
- background: var(--md-sys-color-surface, #fff);
166
+ background: inherit;
167
+ border-radius: inherit;
137
168
  animation: fadeIn 0.3s ease forwards;
169
+ pointer-events: none;
170
+ }
171
+
172
+ .feedback-overlay.success {
173
+ background: var(--md-sys-color-primary-container, #d1e4ff);
174
+ }
175
+
176
+ .feedback-overlay.error {
177
+ background: var(--md-sys-color-error-container, #ffdad6);
138
178
  }
139
179
 
140
180
  .feedback-icon {
141
181
  font-size: 16px;
142
182
  }
143
183
  .feedback-icon.success {
144
- color: var(--md-sys-color-primary, #0066cc);
184
+ color: var(--md-sys-color-on-primary-container, #001d36);
145
185
  }
146
186
  .feedback-icon.error {
147
- color: var(--md-sys-color-error, #ba1a1a);
187
+ color: var(--md-sys-color-on-error-container, #410002);
148
188
  }
149
189
 
150
190
  @keyframes fadeIn {
@@ -155,17 +195,17 @@
155
195
  opacity: 0.9;
156
196
  }
157
197
  }
158
- `}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`
198
+ `}updated(e){super.updated(e),e.has(`state`)&&(this.state===`success`||this.state===`error`?(this._showFeedback=!0,this._feedbackType=this.state,this._feedbackTimeout&&clearTimeout(this._feedbackTimeout),this._feedbackTimeout=setTimeout(()=>{this._showFeedback=!1,this._feedbackType=null,(this.state===`success`||this.state===`error`)&&(this.state=`idle`)},1500)):this.state!==`idle`&&(this._showFeedback=!1,this._feedbackType=null))}render(){let e=this.state===`recording`,n=this.state===`processing`,r=this.disabled||n,i=e||n,o=!i&&!this._showFeedback&&this.trailing,s={recording:e,processing:n,success:this._feedbackType===`success`,error:this._feedbackType===`error`},c={"waveform-slot":!0,idle:!e&&!n,recording:e,processing:n};return t.html`
159
199
  <md-filled-button
160
- class=${(0,a.classMap)(l)}
161
- ?disabled=${o}
200
+ class=${(0,a.classMap)(s)}
201
+ ?disabled=${r}
162
202
  @click=${this._handleClick}
163
203
  >
164
204
  <div class="wrapper">
165
205
  ${this.label?t.html`<span>${this.label}</span>`:``}
166
206
 
167
- <div class=${(0,a.classMap)(u)}>
168
- ${s?t.html`
207
+ <div class=${(0,a.classMap)(c)}>
208
+ ${i?t.html`
169
209
  <ui-live-waveform
170
210
  .active=${e}
171
211
  .processing=${n}
@@ -175,25 +215,27 @@
175
215
  .barRadius=${4}
176
216
  .fadeEdges=${!1}
177
217
  .sensitivity=${1.8}
218
+ barColor="currentColor"
178
219
  height="20"
179
220
  style="position: absolute; inset: 0;"
180
221
  ></ui-live-waveform>
181
222
  `:``}
182
- ${c?t.html` <span class="trailing-text">${this.trailing}</span> `:``}
183
- ${this._showFeedback&&r?t.html`
184
- <div class="feedback-overlay">
185
- <md-icon class="feedback-icon success">check</md-icon>
186
- </div>
187
- `:``}
188
- ${this._showFeedback&&i?t.html`
189
- <div class="feedback-overlay">
190
- <md-icon class="feedback-icon error">close</md-icon>
191
- </div>
192
- `:``}
223
+ ${o?t.html` <span class="trailing-text">${this.trailing}</span> `:``}
193
224
  </div>
225
+
226
+ ${this._showFeedback&&this._feedbackType===`success`?t.html`
227
+ <div class="feedback-overlay success">
228
+ <md-icon class="feedback-icon success">check</md-icon>
229
+ </div>
230
+ `:``}
231
+ ${this._showFeedback&&this._feedbackType===`error`?t.html`
232
+ <div class="feedback-overlay error">
233
+ <md-icon class="feedback-icon error">close</md-icon>
234
+ </div>
235
+ `:``}
194
236
  </div>
195
237
  </md-filled-button>
196
- `}_handleClick(e){this.dispatchEvent(new CustomEvent(`voice-button-click`,{bubbles:!0,composed:!0,detail:{state:this.state}}))}};x([(0,n.property)({type:String})],E.prototype,`state`,void 0),x([(0,n.property)({type:String})],E.prototype,`label`,void 0),x([(0,n.property)({type:String})],E.prototype,`trailing`,void 0),x([(0,n.property)({type:Boolean})],E.prototype,`disabled`,void 0),x([(0,n.property)({attribute:!1})],E.prototype,`analyserNode`,void 0),x([(0,n.state)()],E.prototype,`_showFeedback`,void 0),E=x([(0,n.customElement)(`ui-voice-button`)],E);var D=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`
238
+ `}_handleClick(e){this.dispatchEvent(new CustomEvent(`voice-button-click`,{bubbles:!0,composed:!0,detail:{state:this.state}}))}};b([(0,n.property)({type:String})],E.prototype,`state`,void 0),b([(0,n.property)({type:String})],E.prototype,`label`,void 0),b([(0,n.property)({type:String})],E.prototype,`trailing`,void 0),b([(0,n.property)({type:Boolean})],E.prototype,`disabled`,void 0),b([(0,n.property)({attribute:!1})],E.prototype,`analyserNode`,void 0),b([(0,n.state)()],E.prototype,`_showFeedback`,void 0),b([(0,n.state)()],E.prototype,`_feedbackType`,void 0),E=b([(0,n.customElement)(`ui-voice-button`)],E);var D=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`
197
239
  :host {
198
240
  display: block;
199
241
  width: 100%;
@@ -214,7 +256,7 @@
214
256
  <div class="container" style="height: ${this.height}px;">
215
257
  <canvas></canvas>
216
258
  </div>
217
- `}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&&w(e,t.width,t.height,this.fadeWidth),e.globalAlpha=1}};x([(0,n.property)({type:Array})],D.prototype,`data`,void 0),x([(0,n.property)({type:Number})],D.prototype,`barWidth`,void 0),x([(0,n.property)({type:Number})],D.prototype,`barHeight`,void 0),x([(0,n.property)({type:Number})],D.prototype,`barGap`,void 0),x([(0,n.property)({type:Number})],D.prototype,`barRadius`,void 0),x([(0,n.property)({type:String})],D.prototype,`barColor`,void 0),x([(0,n.property)({type:Boolean})],D.prototype,`fadeEdges`,void 0),x([(0,n.property)({type:Number})],D.prototype,`fadeWidth`,void 0),x([(0,n.property)({type:Number})],D.prototype,`height`,void 0),x([(0,n.query)(`canvas`)],D.prototype,`_canvas`,void 0),x([(0,n.query)(`.container`)],D.prototype,`_container`,void 0),D=x([(0,n.customElement)(`ui-waveform`)],D);var O=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 k(e){return e}var A=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 O(this.context,this.host,this.t,this.subscribe))}},j=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()}},M=class extends Event{constructor(e,t){super(`context-provider`,{bubbles:!0,composed:!0}),this.context=e,this.contextTarget=t}},N=class extends j{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 O(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 M(this.context,this.host))}};function P({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 N(this,{context:e,initialValue:t})),t}};{t.constructor.addInitializer((t=>{r.set(t,new N(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 F({context:e,subscribe:t}){return(n,r)=>{typeof r==`object`?r.addInitializer((function(){new A(this,{context:e,callback:e=>{n.set.call(this,e)},subscribe:t})})):n.constructor.addInitializer((n=>{new A(n,{context:e,callback:e=>{n[r]=e},subscribe:t})}))}}let I=k(`ui-audio-player-context`);var L=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`
259
+ `}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&&w(e,t.width,t.height,this.fadeWidth),e.globalAlpha=1}};b([(0,n.property)({type:Array})],D.prototype,`data`,void 0),b([(0,n.property)({type:Number})],D.prototype,`barWidth`,void 0),b([(0,n.property)({type:Number})],D.prototype,`barHeight`,void 0),b([(0,n.property)({type:Number})],D.prototype,`barGap`,void 0),b([(0,n.property)({type:Number})],D.prototype,`barRadius`,void 0),b([(0,n.property)({type:String})],D.prototype,`barColor`,void 0),b([(0,n.property)({type:Boolean})],D.prototype,`fadeEdges`,void 0),b([(0,n.property)({type:Number})],D.prototype,`fadeWidth`,void 0),b([(0,n.property)({type:Number})],D.prototype,`height`,void 0),b([(0,n.query)(`canvas`)],D.prototype,`_canvas`,void 0),b([(0,n.query)(`.container`)],D.prototype,`_container`,void 0),D=b([(0,n.customElement)(`ui-waveform`)],D);var O=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 k(e){return e}var A=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 O(this.context,this.host,this.t,this.subscribe))}},j=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()}},M=class extends Event{constructor(e,t){super(`context-provider`,{bubbles:!0,composed:!0}),this.context=e,this.contextTarget=t}},N=class extends j{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 O(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 M(this.context,this.host))}};function P({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 N(this,{context:e,initialValue:t})),t}};{t.constructor.addInitializer((t=>{r.set(t,new N(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 F({context:e,subscribe:t}){return(n,r)=>{typeof r==`object`?r.addInitializer((function(){new A(this,{context:e,callback:e=>{n.set.call(this,e)},subscribe:t})})):n.constructor.addInitializer((n=>{new A(n,{context:e,callback:e=>{n[r]=e},subscribe:t})}))}}let I=k(`ui-audio-player-context`);var L=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`
218
260
  :host {
219
261
  display: contents; /* We are completely invisible, just wrapping children */
220
262
  }
@@ -235,7 +277,7 @@
235
277
  @error="${this._handleError}"
236
278
  ></audio>
237
279
  <slot></slot>
238
- `}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)}};x([(0,n.property)({type:String})],L.prototype,`src`,void 0),x([(0,n.query)(`audio`)],L.prototype,`_audioEl`,void 0),x([P({context:I}),(0,n.state)()],L.prototype,`state`,void 0),L=x([(0,n.customElement)(`ui-audio-provider`)],L);var R=class extends t.LitElement{static{this.styles=t.css`
280
+ `}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)}};b([(0,n.property)({type:String})],L.prototype,`src`,void 0),b([(0,n.query)(`audio`)],L.prototype,`_audioEl`,void 0),b([P({context:I}),(0,n.state)()],L.prototype,`state`,void 0),L=b([(0,n.customElement)(`ui-audio-provider`)],L);var R=class extends t.LitElement{static{this.styles=t.css`
239
281
  :host {
240
282
  display: inline-flex;
241
283
  position: relative;
@@ -294,7 +336,7 @@
294
336
  <md-icon>${e?`pause`:`play_arrow`}</md-icon>
295
337
  </md-filled-icon-button>
296
338
  ${n&&e?t.html`<md-circular-progress indeterminate></md-circular-progress>`:``}
297
- `}_handleClick(){this.playerState&&this.playerState.togglePlay()}};x([F({context:I,subscribe:!0}),(0,n.property)({attribute:!1})],R.prototype,`playerState`,void 0),R=x([(0,n.customElement)(`ui-audio-play-button`)],R);var z=class extends t.LitElement{constructor(...e){super(...e),this._isDragging=!1,this._dragValue=0}static{this.styles=t.css`
339
+ `}_handleClick(){this.playerState&&this.playerState.togglePlay()}};b([F({context:I,subscribe:!0}),(0,n.property)({attribute:!1})],R.prototype,`playerState`,void 0),R=b([(0,n.customElement)(`ui-audio-play-button`)],R);var z=class extends t.LitElement{constructor(...e){super(...e),this._isDragging=!1,this._dragValue=0}static{this.styles=t.css`
298
340
  :host {
299
341
  display: flex;
300
342
  width: 100%;
@@ -317,7 +359,7 @@
317
359
  @input="${this._handleInput}"
318
360
  @change="${this._handleChange}"
319
361
  ></md-slider>
320
- `}_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}};x([F({context:I,subscribe:!0}),(0,n.property)({attribute:!1})],z.prototype,`playerState`,void 0),z=x([(0,n.customElement)(`ui-audio-progress-slider`)],z);var B=class extends t.LitElement{constructor(...e){super(...e),this.format=`full`}static{this.styles=t.css`
362
+ `}_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}};b([F({context:I,subscribe:!0}),(0,n.property)({attribute:!1})],z.prototype,`playerState`,void 0),z=b([(0,n.customElement)(`ui-audio-progress-slider`)],z);var B=class extends t.LitElement{constructor(...e){super(...e),this.format=`full`}static{this.styles=t.css`
321
363
  :host {
322
364
  display: inline-block;
323
365
  font-variant-numeric: tabular-nums;
@@ -326,7 +368,7 @@
326
368
  font-family: inherit;
327
369
  }
328
370
  `}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)} /
329
- ${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}};x([F({context:I,subscribe:!0}),(0,n.property)({attribute:!1})],B.prototype,`playerState`,void 0),x([(0,n.property)({type:String})],B.prototype,`format`,void 0),B=x([(0,n.customElement)(`ui-audio-time-display`)],B);var V=class extends t.LitElement{static{this.styles=t.css`
371
+ ${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}};b([F({context:I,subscribe:!0}),(0,n.property)({attribute:!1})],B.prototype,`playerState`,void 0),b([(0,n.property)({type:String})],B.prototype,`format`,void 0),B=b([(0,n.customElement)(`ui-audio-time-display`)],B);var V=class extends t.LitElement{static{this.styles=t.css`
330
372
  :host {
331
373
  display: inline-block;
332
374
  width: 100%;
@@ -370,7 +412,7 @@
370
412
  </div>
371
413
  </div>
372
414
  </ui-audio-provider>
373
- `}};x([(0,n.property)({type:Object})],V.prototype,`item`,void 0),V=x([(0,n.customElement)(`ui-audio-player`)],V);var H=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`
415
+ `}};b([(0,n.property)({type:Object})],V.prototype,`item`,void 0),V=b([(0,n.customElement)(`ui-audio-player`)],V);var H=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`
374
416
  :host {
375
417
  display: inline-block;
376
418
  position: relative;
@@ -418,6 +460,15 @@
418
460
  );
419
461
  --md-menu-container-shape: 12px;
420
462
  min-width: 280px;
463
+ font-family: inherit;
464
+ }
465
+
466
+ md-menu-item {
467
+ font-family: inherit;
468
+ }
469
+
470
+ md-menu-item div[slot='headline'] {
471
+ font-family: inherit;
421
472
  }
422
473
 
423
474
  .menu-footer {
@@ -426,6 +477,11 @@
426
477
  justify-content: space-between;
427
478
  padding: 8px 12px;
428
479
  gap: 12px;
480
+ font-family: inherit;
481
+ }
482
+
483
+ md-text-button {
484
+ font-family: inherit;
429
485
  }
430
486
 
431
487
  .preview-waveform {
@@ -501,7 +557,7 @@
501
557
  </div>
502
558
  `:``}
503
559
  </md-menu>
504
- `}_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}};x([(0,n.property)({type:String})],H.prototype,`value`,void 0),x([(0,n.property)({type:Boolean})],H.prototype,`muted`,void 0),x([(0,n.property)({type:Boolean})],H.prototype,`disabled`,void 0),x([(0,n.state)()],H.prototype,`_devices`,void 0),x([(0,n.state)()],H.prototype,`_loading`,void 0),x([(0,n.state)()],H.prototype,`_error`,void 0),x([(0,n.state)()],H.prototype,`_hasPermission`,void 0),x([(0,n.state)()],H.prototype,`_isMenuOpen`,void 0),x([(0,n.state)()],H.prototype,`_previewAnalyser`,void 0),x([(0,n.query)(`md-menu`)],H.prototype,`_menuEl`,void 0),H=x([(0,n.customElement)(`ui-mic-selector`)],H);var U=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`
560
+ `}_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}};b([(0,n.property)({type:String})],H.prototype,`value`,void 0),b([(0,n.property)({type:Boolean})],H.prototype,`muted`,void 0),b([(0,n.property)({type:Boolean})],H.prototype,`disabled`,void 0),b([(0,n.state)()],H.prototype,`_devices`,void 0),b([(0,n.state)()],H.prototype,`_loading`,void 0),b([(0,n.state)()],H.prototype,`_error`,void 0),b([(0,n.state)()],H.prototype,`_hasPermission`,void 0),b([(0,n.state)()],H.prototype,`_isMenuOpen`,void 0),b([(0,n.state)()],H.prototype,`_previewAnalyser`,void 0),b([(0,n.query)(`md-menu`)],H.prototype,`_menuEl`,void 0),H=b([(0,n.customElement)(`ui-mic-selector`)],H);var U=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`
505
561
  :host {
506
562
  display: inline-block;
507
563
  width: 100%;
@@ -576,17 +632,20 @@
576
632
  --md-menu-container-shape: 12px;
577
633
  --md-menu-container-color: var(--md-sys-color-surface-container, #f3f3f3);
578
634
  max-width: 400px;
635
+ font-family: inherit;
579
636
  }
580
637
 
581
638
  .search-container {
582
639
  padding: 8px 12px;
583
640
  background: var(--md-sys-color-surface-container, #f3f3f3);
584
641
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
642
+ font-family: inherit;
585
643
  }
586
644
 
587
645
  md-outlined-text-field {
588
646
  width: 100%;
589
647
  --md-outlined-text-field-container-shape: 8px;
648
+ font-family: inherit;
590
649
  }
591
650
 
592
651
  md-menu-item {
@@ -596,6 +655,7 @@
596
655
  --md-menu-item-focus-state-layer-color: var(
597
656
  --md-sys-color-on-surface-variant
598
657
  );
658
+ font-family: inherit;
599
659
  }
600
660
 
601
661
  .voice-item-content {
@@ -796,7 +856,7 @@
796
856
  </md-menu-item>
797
857
  `)}
798
858
  </md-menu>
799
- `}_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}};x([(0,n.property)({type:Array})],U.prototype,`voices`,void 0),x([(0,n.property)({type:String})],U.prototype,`value`,void 0),x([(0,n.property)({type:String})],U.prototype,`placeholder`,void 0),x([(0,n.property)({type:String})],U.prototype,`idKey`,void 0),x([(0,n.property)({type:String})],U.prototype,`titleKey`,void 0),x([(0,n.property)({type:String})],U.prototype,`subtitleKey`,void 0),x([(0,n.property)({type:String})],U.prototype,`previewUrlKey`,void 0),x([(0,n.property)({type:Boolean})],U.prototype,`useOrbs`,void 0),x([(0,n.property)({type:String})],U.prototype,`colorKey`,void 0),x([(0,n.state)()],U.prototype,`_searchQuery`,void 0),x([(0,n.state)()],U.prototype,`_previewingVoiceId`,void 0),x([(0,n.query)(`md-menu`)],U.prototype,`_menuEl`,void 0),x([(0,n.query)(`audio`)],U.prototype,`_audioEl`,void 0),U=x([(0,n.customElement)(`ui-voice-picker`)],U);var W=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`
859
+ `}_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}};b([(0,n.property)({type:Array})],U.prototype,`voices`,void 0),b([(0,n.property)({type:String})],U.prototype,`value`,void 0),b([(0,n.property)({type:String})],U.prototype,`placeholder`,void 0),b([(0,n.property)({type:String})],U.prototype,`idKey`,void 0),b([(0,n.property)({type:String})],U.prototype,`titleKey`,void 0),b([(0,n.property)({type:String})],U.prototype,`subtitleKey`,void 0),b([(0,n.property)({type:String})],U.prototype,`previewUrlKey`,void 0),b([(0,n.property)({type:Boolean})],U.prototype,`useOrbs`,void 0),b([(0,n.property)({type:String})],U.prototype,`colorKey`,void 0),b([(0,n.state)()],U.prototype,`_searchQuery`,void 0),b([(0,n.state)()],U.prototype,`_previewingVoiceId`,void 0),b([(0,n.query)(`md-menu`)],U.prototype,`_menuEl`,void 0),b([(0,n.query)(`audio`)],U.prototype,`_audioEl`,void 0),U=b([(0,n.customElement)(`ui-voice-picker`)],U);var W=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`
800
860
  :host {
801
861
  display: block;
802
862
  width: 100%;
@@ -818,7 +878,7 @@
818
878
  <div class="container" style="height: ${this.height}px;">
819
879
  <canvas></canvas>
820
880
  </div>
821
- `}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&&w(n,i.width,i.height,this.fadeWidth),this._animationFrameId=requestAnimationFrame(e)};this._animationFrameId=requestAnimationFrame(e)}};x([(0,n.property)({type:Number})],W.prototype,`speed`,void 0),x([(0,n.property)({type:Number})],W.prototype,`barCount`,void 0),x([(0,n.property)({type:Number})],W.prototype,`barWidth`,void 0),x([(0,n.property)({type:Number})],W.prototype,`barHeight`,void 0),x([(0,n.property)({type:Number})],W.prototype,`barGap`,void 0),x([(0,n.property)({type:Number})],W.prototype,`barRadius`,void 0),x([(0,n.property)({type:String})],W.prototype,`barColor`,void 0),x([(0,n.property)({type:Boolean})],W.prototype,`fadeEdges`,void 0),x([(0,n.property)({type:Number})],W.prototype,`fadeWidth`,void 0),x([(0,n.property)({type:Number})],W.prototype,`height`,void 0),x([(0,n.property)({type:Array})],W.prototype,`data`,void 0),x([(0,n.property)({attribute:!1})],W.prototype,`analyserNode`,void 0),x([(0,n.property)({type:Boolean})],W.prototype,`active`,void 0),x([(0,n.query)(`canvas`)],W.prototype,`_canvas`,void 0),x([(0,n.query)(`.container`)],W.prototype,`_container`,void 0),W=x([(0,n.customElement)(`ui-scrolling-waveform`)],W);var G=class extends t.LitElement{constructor(...e){super(...e),this.title=`Component`,this.description=``,this.mode=`preview`}static{this.styles=t.css`
881
+ `}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&&w(n,i.width,i.height,this.fadeWidth),this._animationFrameId=requestAnimationFrame(e)};this._animationFrameId=requestAnimationFrame(e)}};b([(0,n.property)({type:Number})],W.prototype,`speed`,void 0),b([(0,n.property)({type:Number})],W.prototype,`barCount`,void 0),b([(0,n.property)({type:Number})],W.prototype,`barWidth`,void 0),b([(0,n.property)({type:Number})],W.prototype,`barHeight`,void 0),b([(0,n.property)({type:Number})],W.prototype,`barGap`,void 0),b([(0,n.property)({type:Number})],W.prototype,`barRadius`,void 0),b([(0,n.property)({type:String})],W.prototype,`barColor`,void 0),b([(0,n.property)({type:Boolean})],W.prototype,`fadeEdges`,void 0),b([(0,n.property)({type:Number})],W.prototype,`fadeWidth`,void 0),b([(0,n.property)({type:Number})],W.prototype,`height`,void 0),b([(0,n.property)({type:Array})],W.prototype,`data`,void 0),b([(0,n.property)({attribute:!1})],W.prototype,`analyserNode`,void 0),b([(0,n.property)({type:Boolean})],W.prototype,`active`,void 0),b([(0,n.query)(`canvas`)],W.prototype,`_canvas`,void 0),b([(0,n.query)(`.container`)],W.prototype,`_container`,void 0),W=b([(0,n.customElement)(`ui-scrolling-waveform`)],W);var G=class extends t.LitElement{constructor(...e){super(...e),this.title=`Component`,this.description=``,this.mode=`preview`}static{this.styles=t.css`
822
882
  :host {
823
883
  display: block;
824
884
  background: var(--md-sys-color-surface, #ffffff);
@@ -941,7 +1001,7 @@
941
1001
  class="code-panel ${this.mode===`code`?`active`:``}"
942
1002
  ><code><slot name="code"></slot></code></pre>
943
1003
  </div>
944
- `}};x([(0,n.property)({type:String})],G.prototype,`title`,void 0),x([(0,n.property)({type:String})],G.prototype,`description`,void 0),x([(0,n.property)({type:String})],G.prototype,`mode`,void 0),G=x([(0,n.customElement)(`ui-showcase-card`)],G);var K=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`
1004
+ `}};b([(0,n.property)({type:String})],G.prototype,`title`,void 0),b([(0,n.property)({type:String})],G.prototype,`description`,void 0),b([(0,n.property)({type:String})],G.prototype,`mode`,void 0),G=b([(0,n.customElement)(`ui-showcase-card`)],G);var K=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`
945
1005
  :host {
946
1006
  display: inline-block;
947
1007
  font-family: inherit;
@@ -999,11 +1059,11 @@
999
1059
  <span class="${e?`active`:``}" style="${o}">
1000
1060
  ${this.text}
1001
1061
  </span>
1002
- `}};x([(0,n.property)({type:String})],K.prototype,`text`,void 0),x([(0,n.property)({type:Number})],K.prototype,`duration`,void 0),x([(0,n.property)({type:Number})],K.prototype,`delay`,void 0),x([(0,n.property)({type:Boolean})],K.prototype,`repeat`,void 0),x([(0,n.property)({type:Number})],K.prototype,`repeatDelay`,void 0),x([(0,n.property)({type:Boolean})],K.prototype,`startOnView`,void 0),x([(0,n.property)({type:Boolean})],K.prototype,`once`,void 0),x([(0,n.property)({type:Number})],K.prototype,`spread`,void 0),x([(0,n.property)({type:String})],K.prototype,`color`,void 0),x([(0,n.property)({type:String})],K.prototype,`shimmerColor`,void 0),x([(0,n.state)()],K.prototype,`_isInView`,void 0),K=x([(0,n.customElement)(`ui-shimmering-text`)],K);let q=k(`ui-speech-context`);var J=class extends t.LitElement{constructor(...e){super(...e),this._context={state:`idle`,transcript:``,partialTranscript:``,start:()=>this.start(),stop:()=>this.stop(),cancel:()=>this.cancel()},this.state=`idle`,this._fakeTranscript=[`I`,` am`,` recording`,` a`,` message`,` using`,` atomic`,` components...`]}static{this.styles=t.css`
1062
+ `}};b([(0,n.property)({type:String})],K.prototype,`text`,void 0),b([(0,n.property)({type:Number})],K.prototype,`duration`,void 0),b([(0,n.property)({type:Number})],K.prototype,`delay`,void 0),b([(0,n.property)({type:Boolean})],K.prototype,`repeat`,void 0),b([(0,n.property)({type:Number})],K.prototype,`repeatDelay`,void 0),b([(0,n.property)({type:Boolean})],K.prototype,`startOnView`,void 0),b([(0,n.property)({type:Boolean})],K.prototype,`once`,void 0),b([(0,n.property)({type:Number})],K.prototype,`spread`,void 0),b([(0,n.property)({type:String})],K.prototype,`color`,void 0),b([(0,n.property)({type:String})],K.prototype,`shimmerColor`,void 0),b([(0,n.state)()],K.prototype,`_isInView`,void 0),K=b([(0,n.customElement)(`ui-shimmering-text`)],K);let q=k(`ui-speech-context`);var J=class extends t.LitElement{constructor(...e){super(...e),this._context={state:`idle`,transcript:``,partialTranscript:``,start:()=>this.start(),stop:()=>this.stop(),cancel:()=>this.cancel()},this.state=`idle`,this.simulation=!1,this._fakeTranscript=[`I`,` am`,` recording`,` a`,` message`,` using`,` atomic`,` components...`]}static{this.styles=t.css`
1003
1063
  :host {
1004
1064
  display: contents;
1005
1065
  }
1006
- `}willUpdate(e){e.has(`state`)&&this._updateContext({state:this.state})}async start(){if(this._context.state===`idle`)try{this._updateContext({state:`connecting`}),this._stream=await navigator.mediaDevices.getUserMedia({audio:!0}),this._audioCtx||=new(window.AudioContext||window.webkitAudioContext);let e=this._audioCtx.createMediaStreamSource(this._stream);this._analyser=this._audioCtx.createAnalyser(),this._analyser.fftSize=256,e.connect(this._analyser),this._updateContext({state:`recording`,analyserNode:this._analyser,transcript:``,partialTranscript:`Listening...`});let t=0;this._transcriptInterval=setInterval(()=>{if(t<this._fakeTranscript.length){t===0&&this._updateContext({partialTranscript:``});let e=this._context.partialTranscript;this._updateContext({partialTranscript:e+this._fakeTranscript[t]}),t++}},500),this.dispatchEvent(new CustomEvent(`speech-start`,{bubbles:!0,composed:!0,detail:{stream:this._stream}}))}catch(e){console.error(`Failed to start speech recording`,e),this._updateContext({state:`error`,error:e.message})}}stop(){this._context.state===`recording`&&(clearInterval(this._transcriptInterval),this._cleanupStream(),this._updateContext({state:`processing`,transcript:this._context.partialTranscript,partialTranscript:``}),this.dispatchEvent(new CustomEvent(`speech-stop`,{bubbles:!0,composed:!0})),setTimeout(()=>{this._context.state===`processing`&&(this._updateContext({state:`success`}),setTimeout(()=>this.cancel(),2e3))},1500))}cancel(){clearInterval(this._transcriptInterval),this._cleanupStream(),this._updateContext({state:`idle`,transcript:``,partialTranscript:``,analyserNode:void 0}),this.dispatchEvent(new CustomEvent(`speech-cancel`,{bubbles:!0,composed:!0}))}_cleanupStream(){this._stream&&=(this._stream.getTracks().forEach(e=>e.stop()),void 0)}_updateContext(e){this._context={...this._context,...e},e.state&&(this.state=e.state),this.dispatchEvent(new CustomEvent(`state-change`,{bubbles:!0,composed:!0,detail:this._context}))}render(){return t.html`<slot></slot>`}};x([P({context:q}),(0,n.state)()],J.prototype,`_context`,void 0),x([(0,n.property)({type:String})],J.prototype,`state`,void 0),J=x([(0,n.customElement)(`ui-speech-provider`)],J);var Y=class extends t.LitElement{constructor(...e){super(...e),this.size=`default`}static{this.styles=t.css`
1066
+ `}willUpdate(e){e.has(`state`)&&this._updateContext({state:this.state})}async start(){if(this._context.state===`idle`)try{if(this._updateContext({state:`connecting`}),this.simulation)this._analyser=S();else{this._stream=await navigator.mediaDevices.getUserMedia({audio:!0}),this._audioCtx||=new(window.AudioContext||window.webkitAudioContext);let e=this._audioCtx.createMediaStreamSource(this._stream);this._analyser=this._audioCtx.createAnalyser(),this._analyser.fftSize=256,e.connect(this._analyser)}this._updateContext({state:`recording`,analyserNode:this._analyser,transcript:``,partialTranscript:`Listening...`});let e=0;this._transcriptInterval=setInterval(()=>{if(e<this._fakeTranscript.length){e===0&&this._updateContext({partialTranscript:``});let t=this._context.partialTranscript;this._updateContext({partialTranscript:t+this._fakeTranscript[e]}),e++}},500),this.dispatchEvent(new CustomEvent(`speech-start`,{bubbles:!0,composed:!0,detail:{stream:this._stream}}))}catch(e){console.error(`Failed to start speech recording`,e),this._updateContext({state:`error`,error:e.message})}}stop(){this._context.state===`recording`&&(clearInterval(this._transcriptInterval),this._cleanupStream(),this._updateContext({state:`processing`,transcript:this._context.partialTranscript,partialTranscript:``}),this.dispatchEvent(new CustomEvent(`speech-stop`,{bubbles:!0,composed:!0})),setTimeout(()=>{this._context.state===`processing`&&(this._updateContext({state:`success`}),setTimeout(()=>this.cancel(),2e3))},1500))}cancel(){clearInterval(this._transcriptInterval),this._cleanupStream(),this._updateContext({state:`idle`,transcript:``,partialTranscript:``,analyserNode:void 0}),this.dispatchEvent(new CustomEvent(`speech-cancel`,{bubbles:!0,composed:!0}))}_cleanupStream(){this._stream&&=(this._stream.getTracks().forEach(e=>e.stop()),void 0)}_updateContext(e){this._context={...this._context,...e},e.state&&(this.state=e.state),this.dispatchEvent(new CustomEvent(`state-change`,{bubbles:!0,composed:!0,detail:this._context}))}render(){return t.html`<slot></slot>`}};b([P({context:q}),(0,n.state)()],J.prototype,`_context`,void 0),b([(0,n.property)({type:String})],J.prototype,`state`,void 0),b([(0,n.property)({type:Boolean})],J.prototype,`simulation`,void 0),J=b([(0,n.customElement)(`ui-speech-provider`)],J);var Y=class extends t.LitElement{constructor(...e){super(...e),this.size=`default`}static{this.styles=t.css`
1007
1067
  :host {
1008
1068
  display: inline-block;
1009
1069
  }
@@ -1025,10 +1085,16 @@
1025
1085
  }
1026
1086
 
1027
1087
  .recording {
1028
- --md-filled-icon-button-container-color: var(--md-sys-color-error);
1088
+ --md-filled-icon-button-container-color: var(
1089
+ --md-sys-color-error,
1090
+ #ba1a1a
1091
+ );
1029
1092
  }
1030
1093
  .processing {
1031
- --md-filled-icon-button-container-color: var(--md-sys-color-secondary);
1094
+ --md-filled-icon-button-container-color: var(
1095
+ --md-sys-color-secondary,
1096
+ #0066cc
1097
+ );
1032
1098
  animation: pulse 2s infinite;
1033
1099
  }
1034
1100
 
@@ -1051,18 +1117,31 @@
1051
1117
  >
1052
1118
  <md-icon>${i}</md-icon>
1053
1119
  </md-filled-icon-button>
1054
- `}_handleClick(){this._context&&(this._context.state===`idle`?this._context.start():this._context.state===`recording`&&this._context.stop())}};x([F({context:q,subscribe:!0})],Y.prototype,`_context`,void 0),x([(0,n.property)({type:String})],Y.prototype,`size`,void 0),Y=x([(0,n.customElement)(`ui-speech-record-button`)],Y);var X=class extends t.LitElement{static{this.styles=t.css`
1120
+ `}_handleClick(){this._context&&(this._context.state===`idle`?this._context.start():this._context.state===`recording`&&this._context.stop())}};b([F({context:q,subscribe:!0})],Y.prototype,`_context`,void 0),b([(0,n.property)({type:String})],Y.prototype,`size`,void 0),Y=b([(0,n.customElement)(`ui-speech-record-button`)],Y);var X=class extends t.LitElement{static{this.styles=t.css`
1055
1121
  :host {
1056
- display: none;
1122
+ display: inline-block;
1123
+ opacity: 0;
1124
+ visibility: hidden;
1125
+ transition: all 0.3s ease;
1126
+ width: 0;
1127
+ overflow: hidden;
1057
1128
  }
1058
1129
  :host([active]) {
1059
- display: inline-block;
1130
+ opacity: 1;
1131
+ visibility: visible;
1132
+ width: 40px;
1133
+ }
1134
+ md-icon-button {
1135
+ --md-icon-button-icon-color: var(
1136
+ --md-sys-color-on-surface-variant,
1137
+ #444444
1138
+ );
1060
1139
  }
1061
1140
  `}render(){return this._context?(this._context.state===`recording`||this._context.state===`processing`||this._context.state===`error`?this.setAttribute(`active`,``):this.removeAttribute(`active`),t.html`
1062
1141
  <md-icon-button @click=${this._handleClick}>
1063
1142
  <md-icon>close</md-icon>
1064
1143
  </md-icon-button>
1065
- `):t.html``}_handleClick(){this._context?.cancel()}};x([F({context:q,subscribe:!0})],X.prototype,`_context`,void 0),X=x([(0,n.customElement)(`ui-speech-cancel-button`)],X);var Z=class extends t.LitElement{constructor(...e){super(...e),this.placeholder=`Jot down some thoughts...`}static{this.styles=t.css`
1144
+ `):t.html``}_handleClick(){this._context?.cancel()}};b([F({context:q,subscribe:!0})],X.prototype,`_context`,void 0),X=b([(0,n.customElement)(`ui-speech-cancel-button`)],X);var Z=class extends t.LitElement{constructor(...e){super(...e),this.placeholder=`Jot down some thoughts...`}static{this.styles=t.css`
1066
1145
  :host {
1067
1146
  display: inline-flex;
1068
1147
  align-items: center;
@@ -1073,7 +1152,7 @@
1073
1152
 
1074
1153
  .transcript {
1075
1154
  font-size: 14px;
1076
- color: var(--md-sys-color-on-surface);
1155
+ color: var(--md-sys-color-on-surface, #1e1e1e);
1077
1156
  white-space: nowrap;
1078
1157
  overflow: hidden;
1079
1158
  text-overflow: ellipsis;
@@ -1081,7 +1160,7 @@
1081
1160
  }
1082
1161
 
1083
1162
  .placeholder {
1084
- color: var(--md-sys-color-outline);
1163
+ color: var(--md-sys-color-outline, #79747e);
1085
1164
  font-style: italic;
1086
1165
  }
1087
1166
 
@@ -1090,12 +1169,17 @@
1090
1169
  height: 24px;
1091
1170
  display: flex;
1092
1171
  align-items: center;
1093
- transition: opacity 0.3s ease;
1172
+ justify-content: center;
1173
+ background: transparent;
1174
+ border-radius: 4px;
1175
+ transition: all 0.3s ease;
1094
1176
  }
1095
1177
 
1096
1178
  .hidden {
1179
+ width: 0;
1097
1180
  opacity: 0;
1098
1181
  pointer-events: none;
1182
+ margin-left: -12px;
1099
1183
  }
1100
1184
  `}render(){if(!this._context)return t.html``;let{state:e,transcript:n,partialTranscript:r,analyserNode:i}=this._context,a=e===`recording`,o=e===`processing`||e===`connecting`;return t.html`
1101
1185
  ${!a&&!o&&!(n||r)?t.html`<span class="placeholder">${this.placeholder}</span>`:t.html`<span class="transcript">${r||n}</span>`}
@@ -1110,7 +1194,7 @@
1110
1194
  height="20"
1111
1195
  ></ui-live-waveform>
1112
1196
  </div>
1113
- `}};x([F({context:q,subscribe:!0})],Z.prototype,`_context`,void 0),x([(0,n.property)({type:String})],Z.prototype,`placeholder`,void 0),Z=x([(0,n.customElement)(`ui-speech-preview`)],Z);var Q=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 p.TextureLoader,this._lastTime=0,this._vertexShader=`
1197
+ `}};b([F({context:q,subscribe:!0})],Z.prototype,`_context`,void 0),b([(0,n.property)({type:String})],Z.prototype,`placeholder`,void 0),Z=b([(0,n.customElement)(`ui-speech-preview`)],Z);var Q=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 f.TextureLoader,this._lastTime=0,this._vertexShader=`
1114
1198
  uniform float uTime;
1115
1199
  uniform sampler2D uPerlinTexture;
1116
1200
  varying vec2 vUv;
@@ -1290,7 +1374,7 @@ void main() {
1290
1374
  width: 100%;
1291
1375
  height: 100%;
1292
1376
  }
1293
- `}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 p.Color,this._targetColor2=new p.Color,this._updateColors();try{this._perlinNoiseTexture=await this._textureLoader.loadAsync(`https://storage.googleapis.com/eleven-public-cdn/images/perlin-noise.png`),this._perlinNoiseTexture.wrapS=p.RepeatWrapping,this._perlinNoiseTexture.wrapT=p.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 p.Scene,this._camera=new p.OrthographicCamera(-5,5,5,-5,.1,10),this._camera.position.z=1,this._renderer=new p.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 p.Uniform(this._targetColor1),uColor2:new p.Uniform(this._targetColor2),uOffsets:{value:r},uPerlinTexture:new p.Uniform(this._perlinNoiseTexture),uTime:new p.Uniform(0),uAnimation:new p.Uniform(.1),uInverted:new p.Uniform(i?1:0),uInputVolume:new p.Uniform(0),uOutputVolume:new p.Uniform(0),uOpacity:new p.Uniform(0)},o=new p.CircleGeometry(3.5,64),s=new p.ShaderMaterial({uniforms:a,vertexShader:this._vertexShader,fragmentShader:this._fragmentShader,transparent:!0});this._mesh=new p.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}};x([(0,n.property)({type:Array})],Q.prototype,`colors`,void 0),x([(0,n.property)({type:String})],Q.prototype,`agentState`,void 0),x([(0,n.property)({type:Number})],Q.prototype,`inputVolume`,void 0),x([(0,n.property)({type:Number})],Q.prototype,`outputVolume`,void 0),x([(0,n.property)({type:String})],Q.prototype,`volumeMode`,void 0),x([(0,n.property)({type:Number})],Q.prototype,`seed`,void 0),x([(0,n.query)(`.container`)],Q.prototype,`_container`,void 0),Q=x([(0,n.customElement)(`ui-orb`)],Q);var $=class extends t.LitElement{static{this.styles=t.css`
1377
+ `}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 f.Color,this._targetColor2=new f.Color,this._updateColors();try{this._perlinNoiseTexture=await this._textureLoader.loadAsync(`https://storage.googleapis.com/eleven-public-cdn/images/perlin-noise.png`),this._perlinNoiseTexture.wrapS=f.RepeatWrapping,this._perlinNoiseTexture.wrapT=f.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 f.Scene,this._camera=new f.OrthographicCamera(-5,5,5,-5,.1,10),this._camera.position.z=1,this._renderer=new f.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 f.Uniform(this._targetColor1),uColor2:new f.Uniform(this._targetColor2),uOffsets:{value:r},uPerlinTexture:new f.Uniform(this._perlinNoiseTexture),uTime:new f.Uniform(0),uAnimation:new f.Uniform(.1),uInverted:new f.Uniform(i?1:0),uInputVolume:new f.Uniform(0),uOutputVolume:new f.Uniform(0),uOpacity:new f.Uniform(0)},o=new f.CircleGeometry(3.5,64),s=new f.ShaderMaterial({uniforms:a,vertexShader:this._vertexShader,fragmentShader:this._fragmentShader,transparent:!0});this._mesh=new f.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}};b([(0,n.property)({type:Array})],Q.prototype,`colors`,void 0),b([(0,n.property)({type:String})],Q.prototype,`agentState`,void 0),b([(0,n.property)({type:Number})],Q.prototype,`inputVolume`,void 0),b([(0,n.property)({type:Number})],Q.prototype,`outputVolume`,void 0),b([(0,n.property)({type:String})],Q.prototype,`volumeMode`,void 0),b([(0,n.property)({type:Number})],Q.prototype,`seed`,void 0),b([(0,n.query)(`.container`)],Q.prototype,`_container`,void 0),Q=b([(0,n.customElement)(`ui-orb`)],Q);var $=class extends t.LitElement{static{this.styles=t.css`
1294
1378
  :host {
1295
1379
  display: flex;
1296
1380
  align-items: center;
@@ -1325,4 +1409,4 @@ void main() {
1325
1409
  ?disabled="${!this.playerState?.src}"
1326
1410
  @input="${this._handleInput}"
1327
1411
  ></md-slider>
1328
- `}_handleInput(e){let t=e.target;this.playerState&&this.playerState.setVolume(t.value)}_toggleMute(){this.playerState&&this.playerState.toggleMute()}};x([F({context:I,subscribe:!0}),(0,n.property)({attribute:!1})],$.prototype,`playerState`,void 0),$=x([(0,n.customElement)(`ui-audio-volume-slider`)],$),Object.defineProperty(e,`ScreamVoiceButton`,{enumerable:!0,get:function(){return S}}),Object.defineProperty(e,`UiAudioPlayButton`,{enumerable:!0,get:function(){return R}}),Object.defineProperty(e,`UiAudioPlayer`,{enumerable:!0,get:function(){return V}}),Object.defineProperty(e,`UiAudioProgressSlider`,{enumerable:!0,get:function(){return z}}),Object.defineProperty(e,`UiAudioProvider`,{enumerable:!0,get:function(){return L}}),Object.defineProperty(e,`UiAudioTimeDisplay`,{enumerable:!0,get:function(){return B}}),Object.defineProperty(e,`UiAudioVolumeSlider`,{enumerable:!0,get:function(){return $}}),Object.defineProperty(e,`UiLiveWaveform`,{enumerable:!0,get:function(){return T}}),Object.defineProperty(e,`UiMicSelector`,{enumerable:!0,get:function(){return H}}),Object.defineProperty(e,`UiOrb`,{enumerable:!0,get:function(){return Q}}),Object.defineProperty(e,`UiScrollingWaveform`,{enumerable:!0,get:function(){return W}}),Object.defineProperty(e,`UiShimmeringText`,{enumerable:!0,get:function(){return K}}),Object.defineProperty(e,`UiShowcaseCard`,{enumerable:!0,get:function(){return G}}),Object.defineProperty(e,`UiSpeechCancelButton`,{enumerable:!0,get:function(){return X}}),Object.defineProperty(e,`UiSpeechPreview`,{enumerable:!0,get:function(){return Z}}),Object.defineProperty(e,`UiSpeechProvider`,{enumerable:!0,get:function(){return J}}),Object.defineProperty(e,`UiSpeechRecordButton`,{enumerable:!0,get:function(){return Y}}),Object.defineProperty(e,`UiVoiceButton`,{enumerable:!0,get:function(){return E}}),Object.defineProperty(e,`UiVoicePicker`,{enumerable:!0,get:function(){return U}}),Object.defineProperty(e,`UiWaveform`,{enumerable:!0,get:function(){return D}}),e.audioPlayerContext=I,e.speechContext=q});
1412
+ `}_handleInput(e){let t=e.target;this.playerState&&this.playerState.setVolume(t.value)}_toggleMute(){this.playerState&&this.playerState.toggleMute()}};b([F({context:I,subscribe:!0}),(0,n.property)({attribute:!1})],$.prototype,`playerState`,void 0),$=b([(0,n.customElement)(`ui-audio-volume-slider`)],$),Object.defineProperty(e,`ScreamVoiceButton`,{enumerable:!0,get:function(){return x}}),Object.defineProperty(e,`UiAudioPlayButton`,{enumerable:!0,get:function(){return R}}),Object.defineProperty(e,`UiAudioPlayer`,{enumerable:!0,get:function(){return V}}),Object.defineProperty(e,`UiAudioProgressSlider`,{enumerable:!0,get:function(){return z}}),Object.defineProperty(e,`UiAudioProvider`,{enumerable:!0,get:function(){return L}}),Object.defineProperty(e,`UiAudioTimeDisplay`,{enumerable:!0,get:function(){return B}}),Object.defineProperty(e,`UiAudioVolumeSlider`,{enumerable:!0,get:function(){return $}}),Object.defineProperty(e,`UiLiveWaveform`,{enumerable:!0,get:function(){return T}}),Object.defineProperty(e,`UiMicSelector`,{enumerable:!0,get:function(){return H}}),Object.defineProperty(e,`UiOrb`,{enumerable:!0,get:function(){return Q}}),Object.defineProperty(e,`UiScrollingWaveform`,{enumerable:!0,get:function(){return W}}),Object.defineProperty(e,`UiShimmeringText`,{enumerable:!0,get:function(){return K}}),Object.defineProperty(e,`UiShowcaseCard`,{enumerable:!0,get:function(){return G}}),Object.defineProperty(e,`UiSpeechCancelButton`,{enumerable:!0,get:function(){return X}}),Object.defineProperty(e,`UiSpeechPreview`,{enumerable:!0,get:function(){return Z}}),Object.defineProperty(e,`UiSpeechProvider`,{enumerable:!0,get:function(){return J}}),Object.defineProperty(e,`UiSpeechRecordButton`,{enumerable:!0,get:function(){return Y}}),Object.defineProperty(e,`UiVoiceButton`,{enumerable:!0,get:function(){return E}}),Object.defineProperty(e,`UiVoicePicker`,{enumerable:!0,get:function(){return U}}),Object.defineProperty(e,`UiWaveform`,{enumerable:!0,get:function(){return D}}),e.audioPlayerContext=I,e.speechContext=q});
package/dist/utils/audio-utils.js CHANGED
@@ -1,11 +1,30 @@
1
1
  /**
2
+ * Creates a mock AnalyserNode that generates procedural data.
3
+ * Useful for demo environments where microphone access is not available.
4
+ *
5
+ * @returns A partial AnalyserNode-like object.
6
+ */
7
+ function e() {
8
+ return {
9
+ fftSize: 256,
10
+ frequencyBinCount: 128,
11
+ getByteFrequencyData: (e) => {
12
+ let t = performance.now() / 1e3;
13
+ for (let n = 0; n < e.length; n++) {
14
+ let r = Math.sin(t * 2 + n * .1) * 50 + Math.sin(t * 5 + n * .2) * 30 + 100;
15
+ e[n] = Math.max(0, Math.min(255, r));
16
+ }
17
+ }
18
+ };
19
+ }
20
+ /**
2
21
  * Normalizes raw frequency data from the AnalyserNode into an array of values between 0.0 and 1.0.
3
22
  *
4
23
  * @param analyser The AnalyserNode to read from
5
24
  * @param dataArray A pre-allocated Uint8Array to hold the raw byte data
6
25
  * @returns An array of normalized numbers (0.0 to 1.0)
7
26
  */
8
- function e(e, t) {
27
+ function t(e, t) {
9
28
  e.getByteFrequencyData(t);
10
29
  let n = [];
11
30
  for (let e = 0; e < t.length; e++) n.push(t[e] / 255);
@@ -19,9 +38,9 @@ function e(e, t) {
19
38
  * @param height The logical height of the canvas
20
39
  * @param fadeWidth The physical width in pixels of the fade effect
21
40
  */
22
- function t(e, t, n, r) {
41
+ function n(e, t, n, r) {
23
42
  if (r <= 0 || t <= 0) return;
24
43
  let i = e.createLinearGradient(0, 0, t, 0), a = Math.min(.2, r / t);
25
44
  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";
26
45
  }
27
- export { t as applyCanvasEdgeFade, e as getNormalizedFrequencyData };
46
+ export { n as applyCanvasEdgeFade, e as createMockAnalyser, t as getNormalizedFrequencyData };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ghchinoy/lit-audio-ui",
3
- "version": "0.2.1",
3
+ "version": "0.2.3",
4
4
  "description": "A pure Lit WebComponents port of modern audio UI components",
5
5
  "author": "G. Hussain Chinoy",
6
6
  "license": "Apache-2.0",