wavegram 0.1.0 → 0.1.2

package/README.md

@@ -2,18 +2,20 @@
 
 Lightweight Web Component for previewing audio with a synchronized waveform, spectrogram, and playback cursor. It is intended for research demos, paper companion pages, audio dataset previews, and source-separation result comparisons.
 
+Wavegram aims to provide a minimal, academic, and scientific visualization surface rather than a general-purpose media player or audio editor.
+
 It is not an editor. It does not implement recording, effects, multitrack editing, annotation editing, ASR, or server-side processing.
 
 ## Design Focus
 
-Wavegram is closest in spirit to lightweight waveform players such as wavesurfer.js, but its primary view is not just a waveform. It always treats waveform and spectrogram as two synchronized views over the same audio timeline.
+Wavegram is closest in spirit to lightweight waveform players, but its primary view is not just a waveform. It always treats waveform and spectrogram as two synchronized views over the same audio timeline.
 
 The core feature set is deliberately narrow:
 
 - Simultaneous waveform and spectrogram display.
 - One playback cursor rendered at the same time position in both views.
 - Click-to-seek from either waveform or spectrogram. By default, clicking a stopped player starts playback from that position, and clicking a playing player pauses after seeking.
-- Scientific, low-decoration presentation suitable for papers, demos, and dataset browsers.
+- Minimal, low-decoration presentation suitable for academic papers, scientific demos, and dataset browsers.
 - No DAW-style editing, multitrack arrangement, effects, recording, or annotation workflow.
 
 ## Install
@@ -34,6 +36,8 @@ import "wavegram";
 ></wavegram-player>
 ```
 
+![Minimal wavegram-player example showing a waveform and spectrogram](docs/assets/minimal-example.png)
+
 The package is named `wavegram`. The custom element tag is `wavegram-player` because browser custom element names must contain a hyphen.
 
 The `src` value may be a relative URL such as `audio/example.wav` or an absolute URI such as the example above.
@@ -144,6 +148,12 @@ The older `<audio-preview-spectrogram>` tag is still registered as a compatibili
 
 The examples use WAV files from [`pdx-cs-sound/wavs`](https://github.com/pdx-cs-sound/wavs), a sample collection for Portland State University's Computers, Sound and Music course. The repository states that the files are Creative Commons CC0 unless otherwise indicated.
 
+The 16 kHz keyword-spotting example uses a WAV file from [`fkuhne/KWS-Dataset`](https://github.com/fkuhne/KWS-Dataset). Its `wavs` directory is described by that project as WAV audio converted to 16 kHz and is distributed under CC0-1.0.
+
+## Acknowledgements
+
+Wavegram is inspired by [`wavesurfer.js`](https://wavesurfer.xyz/), especially its lightweight browser-based waveform player model. Wavegram is an independent implementation focused on synchronized waveform and spectrogram previews for research demos and dataset browsing.
+
 ## Styling
 
 The component uses Shadow DOM and supports CSS custom properties:
@@ -182,16 +192,32 @@ npm run test:e2e
 
 ## Examples
 
-Run `npm run dev` and open:
+Run the local dev server:
+
+```sh
+npm run dev -- --port 4173
+```
 
-- `examples/basic.html`
-- `examples/multiple.html`
-- `examples/large-file.html`
-- `examples/profile.html`
-- `examples/multichannel.html`
-- `examples/waveform-only.html`
-- `examples/spectrogram-only.html`
-- `examples/styles.html`
+Then open:
+
+- `http://127.0.0.1:4173/examples/basic.html`
+- `http://127.0.0.1:4173/examples/multiple.html`
+- `http://127.0.0.1:4173/examples/large-file.html`
+- `http://127.0.0.1:4173/examples/profile.html`
+- `http://127.0.0.1:4173/examples/multichannel.html`
+- `http://127.0.0.1:4173/examples/kws-16khz.html`
+- `http://127.0.0.1:4173/examples/waveform-only.html`
+- `http://127.0.0.1:4173/examples/spectrogram-only.html`
+- `http://127.0.0.1:4173/examples/styles.html`
+
+For automated local checks, run:
+
+```sh
+npm run test
+npm run typecheck
+npm run build
+npm run test:e2e
+```
 
 ## License
 

package/dist/assets/{spectrogram.worker-Burn7NUr.js → spectrogram.worker-CJxyA_5B.js}

@@ -1 +1 @@
-(function(){"use strict";function g(t,o,n){return Math.min(n,Math.max(o,t))}const b=1e-10;function M(t){return Number.isInteger(t)&&t>0&&(t&t-1)===0}function x(t,o){const n=new Float32Array(t);if(t===1)return n[0]=1,n;for(let e=0;e<t;e+=1)o==="hann"?n[e]=.5-.5*Math.cos(2*Math.PI*e/(t-1)):o==="hamming"?n[e]=.54-.46*Math.cos(2*Math.PI*e/(t-1)):n[e]=1;return n}function S(t){let o=0;for(const n of t)o+=n;return o/t.length}function D(t){return 20*Math.log10(Math.abs(t)+b)}function I(t,o){const n=t.length;if(!M(n)||o.length!==n)throw new Error("FFT input length must be a radix-2 size.");for(let e=1,a=0;e<n;e+=1){let f=n>>1;for(;a&f;f>>=1)a^=f;if(a^=f,e<a){const h=t[e];t[e]=t[a],t[a]=h;const r=o[e];o[e]=o[a],o[a]=r}}for(let e=2;e<=n;e<<=1){const a=-2*Math.PI/e,f=Math.cos(a),h=Math.sin(a);for(let r=0;r<n;r+=e){let c=1,l=0;for(let s=0;s<e/2;s+=1){const d=t[r+s],p=o[r+s],m=t[r+s+e/2]*c-o[r+s+e/2]*l,u=t[r+s+e/2]*l+o[r+s+e/2]*c;t[r+s]=d+m,o[r+s]=p+u,t[r+s+e/2]=d-m,o[r+s+e/2]=p-u;const w=c*f-l*h;l=c*h+l*f,c=w}}}}function R(t,o,n){const{fftSize:e,hopSize:a,windowType:f,minDb:h,maxDb:r}=n;if(!M(e))throw new Error(`fftSize must be a power of two. Received ${e}.`);if(!Number.isInteger(a)||a<=0)throw new Error(`hopSize must be a positive integer. Received ${a}.`);if(r<=h)throw new Error("maxDb must be greater than minDb.");const c=e/2+1,l=Math.max(1,Math.floor(Math.max(0,t.length-e)/a)+1),s=new Float32Array(l*c),d=x(e,f),p=Math.max(b,e*S(d)/2),m=new Float32Array(e),u=new Float32Array(e);for(let w=0;w<l;w+=1){const y=w*a;m.fill(0),u.fill(0);for(let i=0;i<e;i+=1)m[i]=(t[y+i]??0)*d[i];I(m,u);for(let i=0;i<c;i+=1){const F=Math.hypot(m[i],u[i])/p;s[w*c+i]=g(D(F),h,r)}}return{values:s,freqBins:c,timeFrames:l,sampleRate:o,fftSize:e,hopSize:a,minDb:h,maxDb:r}}self.addEventListener("message",t=>{try{const o=R(t.data.samples,t.data.sampleRate,{fftSize:t.data.fftSize,hopSize:t.data.hopSize,windowType:t.data.windowType,minDb:t.data.minDb,maxDb:t.data.maxDb});self.postMessage(o,[o.values.buffer])}catch(o){self.postMessage({error:{message:o instanceof Error?o.message:"Failed to compute spectrogram."}})}})})();
+(function(){"use strict";function g(t,o,n){return Math.min(n,Math.max(o,t))}const b=1e-10;function M(t){return Number.isInteger(t)&&t>0&&(t&t-1)===0}function x(t,o){const n=new Float32Array(t);if(t===1)return n[0]=1,n;for(let e=0;e<t;e+=1)o==="hann"?n[e]=.5-.5*Math.cos(2*Math.PI*e/(t-1)):o==="hamming"?n[e]=.54-.46*Math.cos(2*Math.PI*e/(t-1)):n[e]=1;return n}function S(t){let o=0;for(const n of t)o+=n;return o/t.length}function y(t){return 20*Math.log10(Math.abs(t)+b)}function D(t,o){const n=t.length;if(!M(n)||o.length!==n)throw new Error("FFT input length must be a radix-2 size.");for(let e=1,a=0;e<n;e+=1){let f=n>>1;for(;a&f;f>>=1)a^=f;if(a^=f,e<a){const h=t[e];t[e]=t[a],t[a]=h;const r=o[e];o[e]=o[a],o[a]=r}}for(let e=2;e<=n;e<<=1){const a=-2*Math.PI/e,f=Math.cos(a),h=Math.sin(a);for(let r=0;r<n;r+=e){let c=1,l=0;for(let s=0;s<e/2;s+=1){const d=t[r+s],p=o[r+s],m=t[r+s+e/2]*c-o[r+s+e/2]*l,u=t[r+s+e/2]*l+o[r+s+e/2]*c;t[r+s]=d+m,o[r+s]=p+u,t[r+s+e/2]=d-m,o[r+s+e/2]=p-u;const w=c*f-l*h;l=c*h+l*f,c=w}}}}function F(t,o,n){const{fftSize:e,hopSize:a,windowType:f,minDb:h,maxDb:r}=n;if(!M(e))throw new Error(`fftSize must be a power of two. Received ${e}.`);if(!Number.isInteger(a)||a<=0)throw new Error(`hopSize must be a positive integer. Received ${a}.`);if(r<=h)throw new Error("maxDb must be greater than minDb.");const c=e/2+1,l=Math.max(1,Math.floor(Math.max(0,t.length-e)/a)+1),s=new Float32Array(l*c),d=x(e,f),p=Math.max(b,e*S(d)/2),m=new Float32Array(e),u=new Float32Array(e);for(let w=0;w<l;w+=1){const I=w*a;m.fill(0),u.fill(0);for(let i=0;i<e;i+=1)m[i]=(t[I+i]??0)*d[i];D(m,u);for(let i=0;i<c;i+=1){const R=Math.hypot(m[i],u[i])/p;s[w*c+i]=g(y(R),h,r)}}return{values:s,freqBins:c,timeFrames:l,sampleRate:o,maxFrequencyHz:o/2,fftSize:e,hopSize:a,minDb:h,maxDb:r}}self.addEventListener("message",t=>{try{const o=F(t.data.samples,t.data.sampleRate,{fftSize:t.data.fftSize,hopSize:t.data.hopSize,windowType:t.data.windowType,minDb:t.data.minDb,maxDb:t.data.maxDb});self.postMessage(o,[o.values.buffer])}catch(o){self.postMessage({error:{message:o instanceof Error?o.message:"Failed to compute spectrogram."}})}})})();

package/dist/audio/decodeAudio.d.ts

@@ -1,2 +1,2 @@
-export declare function decodeAudioData(arrayBuffer: ArrayBuffer): Promise<AudioBuffer>;
+export declare function decodeAudioData(arrayBuffer: ArrayBuffer, sampleRate?: number): Promise<AudioBuffer>;
 //# sourceMappingURL=decodeAudio.d.ts.map

package/dist/audio/decodeAudio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"decodeAudio.d.ts","sourceRoot":"","sources":["../../src/audio/decodeAudio.ts"],"names":[],"mappings":"AAOA,wBAAsB,eAAe,CAAC,WAAW,EAAE,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC,CAGpF"}
+{"version":3,"file":"decodeAudio.d.ts","sourceRoot":"","sources":["../../src/audio/decodeAudio.ts"],"names":[],"mappings":"AAYA,wBAAsB,eAAe,CAAC,WAAW,EAAE,WAAW,EAAE,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,WAAW,CAAC,CAGzG"}

package/dist/audio/readAudioSampleRate.d.ts

@@ -0,0 +1,2 @@
+export declare function readAudioFileSampleRate(arrayBuffer: ArrayBuffer): number | undefined;
+//# sourceMappingURL=readAudioSampleRate.d.ts.map

package/dist/audio/readAudioSampleRate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"readAudioSampleRate.d.ts","sourceRoot":"","sources":["../../src/audio/readAudioSampleRate.ts"],"names":[],"mappings":"AAAA,wBAAgB,uBAAuB,CAAC,WAAW,EAAE,WAAW,GAAG,MAAM,GAAG,SAAS,CAGpF"}

package/dist/component/Wavegram.d.ts

@@ -3,12 +3,14 @@ export declare class Wavegram extends HTMLElement {
     static observedAttributes: string[];
     private audio?;
     private audioBuffer?;
+    private sourceSampleRate?;
     private waveformPeaks?;
     private spectrogram?;
     private worker?;
     private resizeObserver?;
     private animationFrame;
     private loadingToken;
+    private waveformPeaksWidth;
     private blobUrl?;
     private playRequestedAt?;
     private readonly root;
@@ -73,6 +75,7 @@ export declare class Wavegram extends HTMLElement {
     private computeSpectrogramForCurrentBuffer;
     private computeSpectrogramInWorker;
     private bindAudio;
+    private handleResize;
     private layoutAndRender;
     private drawCursors;
     private clearCursor;

package/dist/component/Wavegram.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Wavegram.d.ts","sourceRoot":"","sources":["../../src/component/Wavegram.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Wavegram.d.ts","sourceRoot":"","sources":["../../src/component/Wavegram.ts"],"names":[],"mappings":"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"}

package/dist/index.es.js

@@ -1,115 +1,196 @@
-var D = Object.defineProperty;
-var N = (e, s, t) => s in e ? D(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
-var c = (e, s, t) => N(e, typeof s != "symbol" ? s + "" : s, t);
-let x;
-function q() {
-  return x ?? (x = new AudioContext()), x;
+var q = Object.defineProperty;
+var I = (e, o, t) => o in e ? q(e, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[o] = t;
+var c = (e, o, t) => I(e, typeof o != "symbol" ? o + "" : o, t);
+let v, P;
+function V(e) {
+  return (!v || P !== e) && (v == null || v.close(), v = new AudioContext(e ? { sampleRate: e } : void 0), P = e), v;
 }
-async function z(e) {
-  return q().decodeAudioData(e.slice(0));
+async function $(e, o) {
+  return V(o).decodeAudioData(e.slice(0));
 }
-async function I(e) {
-  const s = await fetch(e);
-  if (!s.ok)
-    throw new Error(`Failed to load audio: ${s.status} ${s.statusText}`);
-  return s.arrayBuffer();
+async function j(e) {
+  const o = await fetch(e);
+  if (!o.ok)
+    throw new Error(`Failed to load audio: ${o.status} ${o.statusText}`);
+  return o.arrayBuffer();
 }
-function O(e, s) {
+function Y(e, o) {
   const t = new Audio(e);
-  return t.preload = "auto", t.autoplay = s, t.crossOrigin = "anonymous", t;
+  return t.preload = "auto", t.autoplay = o, t.crossOrigin = "anonymous", t;
 }
-function S(e, s, t) {
-  return Math.min(t, Math.max(s, e));
+function X(e) {
+  const o = new DataView(e);
+  return K(o) ?? G(o) ?? J(o) ?? _(o);
 }
-const H = 1e-10;
-function W(e) {
+function K(e) {
+  if (e.byteLength < 28 || !A(e, 0, "RIFF") && !A(e, 0, "RF64") || !A(e, 8, "WAVE")) return;
+  let o = 12;
+  for (; o + 8 <= e.byteLength; ) {
+    const t = U(e, o, 4), r = e.getUint32(o + 4, !0), i = o + 8;
+    if (i + r > e.byteLength) return;
+    if (t === "fmt ") {
+      if (r < 8) return;
+      const s = e.getUint32(i + 4, !0);
+      return Number.isFinite(s) && s > 0 ? s : void 0;
+    }
+    o = i + r + r % 2;
+  }
+}
+function G(e) {
+  if (!A(e, 0, "fLaC")) return;
+  let o = 4;
+  for (; o + 4 <= e.byteLength; ) {
+    const r = e.getUint8(o) & 127, i = e.getUint8(o + 1) << 16 | e.getUint8(o + 2) << 8 | e.getUint8(o + 3), s = o + 4;
+    if (s + i > e.byteLength) return;
+    if (r === 0) {
+      if (i < 13) return;
+      const a = e.getUint8(s + 10) << 12 | e.getUint8(s + 11) << 4 | e.getUint8(s + 12) >> 4;
+      return a > 0 ? a : void 0;
+    }
+    o = s + i;
+  }
+}
+function J(e) {
+  const o = R(e, [1, 118, 111, 114, 98, 105, 115]);
+  if (o !== -1 && o + 16 <= e.byteLength) {
+    const r = e.getUint32(o + 12, !0);
+    return r > 0 ? r : void 0;
+  }
+  const t = R(e, [79, 112, 117, 115, 72, 101, 97, 100]);
+  if (t !== -1 && t + 16 <= e.byteLength) {
+    const r = e.getUint32(t + 12, !0);
+    return r > 0 ? r : 48e3;
+  }
+}
+function _(e) {
+  let o = 0;
+  A(e, 0, "ID3") && e.byteLength >= 10 && (o = 10 + Q(e, 6));
+  const t = [44100, 48e3, 32e3], r = [22050, 24e3, 16e3], i = [11025, 12e3, 8e3];
+  for (; o + 4 <= e.byteLength; o += 1) {
+    const s = e.getUint8(o), a = e.getUint8(o + 1);
+    if (s !== 255 || (a & 224) !== 224) continue;
+    const n = a >> 3 & 3, h = a >> 1 & 3, l = e.getUint8(o + 2) >> 2 & 3;
+    if (n === 1 || h === 0 || l === 3) continue;
+    return (n === 3 ? t : n === 2 ? r : i)[l];
+  }
+}
+function R(e, o) {
+  const t = e.byteLength - o.length;
+  for (let r = 0; r <= t; r += 1) {
+    let i = !0;
+    for (let s = 0; s < o.length; s += 1)
+      if (e.getUint8(r + s) !== o[s]) {
+        i = !1;
+        break;
+      }
+    if (i) return r;
+  }
+  return -1;
+}
+function Q(e, o) {
+  return e.getUint8(o) << 21 | e.getUint8(o + 1) << 14 | e.getUint8(o + 2) << 7 | e.getUint8(o + 3);
+}
+function A(e, o, t) {
+  return o + t.length > e.byteLength ? !1 : U(e, o, t.length) === t;
+}
+function U(e, o, t) {
+  let r = "";
+  for (let i = 0; i < t; i += 1)
+    r += String.fromCharCode(e.getUint8(o + i));
+  return r;
+}
+function M(e, o, t) {
+  return Math.min(t, Math.max(o, e));
+}
+const D = 1e-10;
+function z(e) {
   return Number.isInteger(e) && e > 0 && (e & e - 1) === 0;
 }
-function U(e, s) {
+function Z(e, o) {
   const t = new Float32Array(e);
   if (e === 1)
     return t[0] = 1, t;
   for (let r = 0; r < e; r += 1)
-    s === "hann" ? t[r] = 0.5 - 0.5 * Math.cos(2 * Math.PI * r / (e - 1)) : s === "hamming" ? t[r] = 0.54 - 0.46 * Math.cos(2 * Math.PI * r / (e - 1)) : t[r] = 1;
+    o === "hann" ? t[r] = 0.5 - 0.5 * Math.cos(2 * Math.PI * r / (e - 1)) : o === "hamming" ? t[r] = 0.54 - 0.46 * Math.cos(2 * Math.PI * r / (e - 1)) : t[r] = 1;
   return t;
 }
-function V(e) {
-  let s = 0;
+function tt(e) {
+  let o = 0;
   for (const t of e)
-    s += t;
-  return s / e.length;
+    o += t;
+  return o / e.length;
 }
-function $(e) {
-  return 20 * Math.log10(Math.abs(e) + H);
+function et(e) {
+  return 20 * Math.log10(Math.abs(e) + D);
 }
-function j(e, s) {
+function rt(e, o) {
   const t = e.length;
-  if (!W(t) || s.length !== t)
+  if (!z(t) || o.length !== t)
     throw new Error("FFT input length must be a radix-2 size.");
   for (let r = 1, i = 0; r < t; r += 1) {
-    let o = t >> 1;
-    for (; i & o; o >>= 1)
-      i ^= o;
-    if (i ^= o, r < i) {
+    let s = t >> 1;
+    for (; i & s; s >>= 1)
+      i ^= s;
+    if (i ^= s, r < i) {
       const a = e[r];
       e[r] = e[i], e[i] = a;
-      const n = s[r];
-      s[r] = s[i], s[i] = n;
+      const n = o[r];
+      o[r] = o[i], o[i] = n;
     }
   }
   for (let r = 2; r <= t; r <<= 1) {
-    const i = -2 * Math.PI / r, o = Math.cos(i), a = Math.sin(i);
+    const i = -2 * Math.PI / r, s = Math.cos(i), a = Math.sin(i);
     for (let n = 0; n < t; n += r) {
       let h = 1, l = 0;
       for (let u = 0; u < r / 2; u += 1) {
-        const d = e[n + u], m = s[n + u], p = e[n + u + r / 2] * h - s[n + u + r / 2] * l, g = e[n + u + r / 2] * l + s[n + u + r / 2] * h;
-        e[n + u] = d + p, s[n + u] = m + g, e[n + u + r / 2] = d - p, s[n + u + r / 2] = m - g;
-        const b = h * o - l * a;
-        l = h * a + l * o, h = b;
+        const d = e[n + u], m = o[n + u], g = e[n + u + r / 2] * h - o[n + u + r / 2] * l, p = e[n + u + r / 2] * l + o[n + u + r / 2] * h;
+        e[n + u] = d + g, o[n + u] = m + p, e[n + u + r / 2] = d - g, o[n + u + r / 2] = m - p;
+        const b = h * s - l * a;
+        l = h * a + l * s, h = b;
       }
     }
   }
 }
-function Y(e, s, t) {
-  const { fftSize: r, hopSize: i, windowType: o, minDb: a, maxDb: n } = t;
-  if (!W(r))
+function ot(e, o, t) {
+  const { fftSize: r, hopSize: i, windowType: s, minDb: a, maxDb: n } = t;
+  if (!z(r))
     throw new Error(`fftSize must be a power of two. Received ${r}.`);
   if (!Number.isInteger(i) || i <= 0)
     throw new Error(`hopSize must be a positive integer. Received ${i}.`);
   if (n <= a)
     throw new Error("maxDb must be greater than minDb.");
-  const h = r / 2 + 1, l = Math.max(1, Math.floor(Math.max(0, e.length - r) / i) + 1), u = new Float32Array(l * h), d = U(r, o), m = Math.max(H, r * V(d) / 2), p = new Float32Array(r), g = new Float32Array(r);
+  const h = r / 2 + 1, l = Math.max(1, Math.floor(Math.max(0, e.length - r) / i) + 1), u = new Float32Array(l * h), d = Z(r, s), m = Math.max(D, r * tt(d) / 2), g = new Float32Array(r), p = new Float32Array(r);
   for (let b = 0; b < l; b += 1) {
     const w = b * i;
-    p.fill(0), g.fill(0);
+    g.fill(0), p.fill(0);
     for (let f = 0; f < r; f += 1)
-      p[f] = (e[w + f] ?? 0) * d[f];
-    j(p, g);
+      g[f] = (e[w + f] ?? 0) * d[f];
+    rt(g, p);
     for (let f = 0; f < h; f += 1) {
-      const k = Math.hypot(p[f], g[f]) / m;
-      u[b * h + f] = S($(k), a, n);
+      const x = Math.hypot(g[f], p[f]) / m;
+      u[b * h + f] = M(et(x), a, n);
     }
   }
-  return { values: u, freqBins: h, timeFrames: l, sampleRate: s, fftSize: r, hopSize: i, minDb: a, maxDb: n };
+  return { values: u, freqBins: h, timeFrames: l, sampleRate: o, maxFrequencyHz: o / 2, fftSize: r, hopSize: i, minDb: a, maxDb: n };
 }
-function F(e, s) {
-  if (s === "mix") {
+function N(e, o) {
+  if (o === "mix") {
     const t = new Float32Array(e.length);
     for (let r = 0; r < e.numberOfChannels; r += 1) {
       const i = e.getChannelData(r);
-      for (let o = 0; o < t.length; o += 1)
-        t[o] += i[o] / e.numberOfChannels;
+      for (let s = 0; s < t.length; s += 1)
+        t[s] += i[s] / e.numberOfChannels;
     }
     return t;
   }
-  if (!Number.isInteger(s) || s < 0 || s >= e.numberOfChannels)
-    throw new Error(`Invalid channel ${s}. Audio has ${e.numberOfChannels} channel(s).`);
-  return new Float32Array(e.getChannelData(s));
+  if (!Number.isInteger(o) || o < 0 || o >= e.numberOfChannels)
+    throw new Error(`Invalid channel ${o}. Audio has ${e.numberOfChannels} channel(s).`);
+  return new Float32Array(e.getChannelData(o));
 }
-function K(e, s) {
-  const t = Math.max(1, Math.floor(s)), r = new Float32Array(t), i = new Float32Array(t), o = e.length / t;
+function it(e, o) {
+  const t = Math.max(1, Math.floor(o)), r = new Float32Array(t), i = new Float32Array(t), s = e.length / t;
   for (let a = 0; a < t; a += 1) {
-    const n = Math.floor(a * o), h = Math.max(n + 1, Math.floor((a + 1) * o));
+    const n = Math.floor(a * s), h = Math.max(n + 1, Math.floor((a + 1) * s));
     let l = 1, u = -1;
     for (let d = n; d < h && d < e.length; d += 1) {
       const m = e[d] ?? 0;
@@ -119,36 +200,38 @@ function K(e, s) {
   }
   return { min: r, max: i };
 }
-function E(e, s, t) {
-  return K(F(e, t), s);
+function E(e, o, t) {
+  return it(N(e, t), o);
 }
-function v(e, s, t) {
+function y(e, o, t) {
   const r = window.devicePixelRatio || 1;
-  e.style.width = "100%", e.style.height = `${t}px`, e.width = Math.max(1, Math.floor(s * r)), e.height = Math.max(1, Math.floor(t * r));
+  e.style.width = "100%", e.style.height = `${t}px`, e.width = Math.max(1, Math.floor(o * r)), e.height = Math.max(1, Math.floor(t * r));
   const i = e.getContext("2d");
   if (!i)
     throw new Error("Canvas 2D context is unavailable.");
   return i.setTransform(r, 0, 0, r, 0, 0), i;
 }
-function T(e, s, t, r, i = "rgba(0, 0, 0, 0.45)") {
+function B(e, o, t, r, i = "rgba(0, 0, 0, 0.45)") {
   if (!Number.isFinite(t) || t <= 0) return;
-  const o = e.getContext("2d");
-  if (!o) return;
-  const a = e.clientWidth, n = e.clientHeight, h = Math.max(0, Math.min(a, s / t * a));
-  o.save(), o.strokeStyle = i, o.lineWidth = 2, o.beginPath(), o.moveTo(h, 0), o.lineTo(h, n), o.stroke(), o.strokeStyle = r, o.lineWidth = 1, o.beginPath(), o.moveTo(h, 0), o.lineTo(h, n), o.stroke(), o.restore();
+  const s = o / t;
+  if (!Number.isFinite(s) || s >= 1) return;
+  const a = e.getContext("2d");
+  if (!a) return;
+  const n = e.clientWidth, h = e.clientHeight, l = Math.max(0, Math.min(n, s * n));
+  a.save(), a.strokeStyle = i, a.lineWidth = 2, a.beginPath(), a.moveTo(l, 0), a.lineTo(l, h), a.stroke(), a.strokeStyle = r, a.lineWidth = 1, a.beginPath(), a.moveTo(l, 0), a.lineTo(l, h), a.stroke(), a.restore();
 }
-function A(e, s) {
-  const t = S(s, 0, 1) * (e.length - 1), r = Math.floor(t), i = Math.min(r + 1, e.length - 1), o = t - r, a = e[r], n = e[i];
+function k(e, o) {
+  const t = M(o, 0, 1) * (e.length - 1), r = Math.floor(t), i = Math.min(r + 1, e.length - 1), s = t - r, a = e[r], n = e[i];
   return [
-    Math.round(a[0] + (n[0] - a[0]) * o),
-    Math.round(a[1] + (n[1] - a[1]) * o),
-    Math.round(a[2] + (n[2] - a[2]) * o)
+    Math.round(a[0] + (n[0] - a[0]) * s),
+    Math.round(a[1] + (n[1] - a[1]) * s),
+    Math.round(a[2] + (n[2] - a[2]) * s)
   ];
 }
-function G(e, s) {
-  const t = S(s, 0, 1);
+function st(e, o) {
+  const t = M(o, 0, 1);
   if (e === "audition")
-    return A(
+    return k(
       [
         [0, 0, 0],
         [12, 7, 34],
@@ -165,7 +248,7 @@ function G(e, s) {
     const r = Math.round(t * 255);
     return [r, r, r];
   }
-  return A(
+  return k(
     e === "viridis" ? [
       [68, 1, 84],
       [59, 82, 139],
@@ -188,127 +271,136 @@ function G(e, s) {
     t
   );
 }
-function X(e, s, t) {
+function at(e, o, t) {
   const r = e.getContext("2d");
   if (!r) return;
-  const i = e.clientWidth, o = e.clientHeight, a = Math.max(1, e.width), n = Math.max(1, e.height);
-  if (r.clearRect(0, 0, i, o), r.fillStyle = t.background, r.fillRect(0, 0, i, o), !s) return;
-  const h = r.createImageData(a, n), l = s.maxDb - s.minDb;
+  const i = e.clientWidth, s = e.clientHeight, a = Math.max(1, e.width), n = Math.max(1, e.height);
+  if (r.clearRect(0, 0, i, s), r.fillStyle = t.background, r.fillRect(0, 0, i, s), !o) return;
+  const h = r.createImageData(a, n), l = o.maxDb - o.minDb;
   for (let u = 0; u < h.width; u += 1) {
-    const d = Math.min(s.timeFrames - 1, Math.floor(u / h.width * s.timeFrames));
+    const d = Math.min(o.timeFrames - 1, Math.floor(u / h.width * o.timeFrames));
     for (let m = 0; m < h.height; m += 1) {
-      const p = Math.min(
-        s.freqBins - 1,
-        Math.floor((h.height - 1 - m) / h.height * s.freqBins)
-      ), g = s.values[d * s.freqBins + p], b = S((g - s.minDb) / l, 0, 1), [w, f, k] = G(t.colorMap, b), y = (m * h.width + u) * 4;
-      h.data[y] = w, h.data[y + 1] = f, h.data[y + 2] = k, h.data[y + 3] = 255;
+      const g = Math.min(
+        o.freqBins - 1,
+        Math.floor((h.height - 1 - m) / h.height * o.freqBins)
+      ), p = o.values[d * o.freqBins + g], b = M((p - o.minDb) / l, 0, 1), [w, f, x] = st(t.colorMap, b), S = (m * h.width + u) * 4;
+      h.data[S] = w, h.data[S + 1] = f, h.data[S + 2] = x, h.data[S + 3] = 255;
     }
   }
-  r.putImageData(h, 0, 0), _(r, i, o, s.sampleRate, t.tickColor);
+  r.putImageData(h, 0, 0), ht(r, i, s, o.maxFrequencyHz, t.tickColor);
 }
-function J(e, s) {
+function nt(e, o) {
   if (!Number.isFinite(e) || e <= 0) return 1e3;
-  const t = Math.max(2, Math.min(6, Math.floor(s / 28))), r = e / t, i = 10 ** Math.floor(Math.log10(r)), o = r / i;
-  return (o <= 1 ? 1 : o <= 2 ? 2 : o <= 7.5 ? 5 : 10) * i;
+  const t = Math.max(2, Math.min(6, Math.floor(o / 28))), r = e / t, i = 10 ** Math.floor(Math.log10(r)), s = r / i;
+  return (s <= 1 ? 1 : s <= 2 ? 2 : s <= 7.5 ? 5 : 10) * i;
 }
-function _(e, s, t, r, i = "rgba(255, 255, 255, 0.42)") {
-  const o = r / 2, a = J(o, t), n = 5;
+function ht(e, o, t, r, i = "rgba(255, 255, 255, 0.42)") {
+  const s = nt(r, t), a = 5;
   e.save(), e.strokeStyle = i, e.fillStyle = i, e.lineWidth = 1, e.font = "10px system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif", e.textAlign = "left", e.textBaseline = "middle";
-  for (let h = a; h < o; h += a) {
-    const l = t - h / o * t;
-    e.beginPath(), e.moveTo(0, l + 0.5), e.lineTo(s, l + 0.5), e.stroke(), e.fillText(Q(h), n, l);
+  for (let n = s; n < r; n += s) {
+    const h = t - n / r * t;
+    e.beginPath(), e.moveTo(0, h + 0.5), e.lineTo(o, h + 0.5), e.stroke(), e.fillText(W(n), a, h);
   }
-  e.restore();
+  e.beginPath(), e.moveTo(0, 0.5), e.lineTo(o, 0.5), e.stroke(), e.fillText(W(r), a, 8), e.restore();
 }
-function Q(e) {
+function W(e) {
   if (e >= 1e3) {
-    const s = e / 1e3;
-    return `${Number.isInteger(s) ? s.toFixed(0) : s.toFixed(1)}k`;
+    const o = e / 1e3;
+    return `${Number.isInteger(o) ? o.toFixed(0) : o.toFixed(1)}k`;
   }
   return `${Math.round(e)}`;
 }
-function P(e, s, t) {
+function L(e, o, t) {
   const r = e.getContext("2d");
   if (!r) return;
-  const i = e.clientWidth, o = e.clientHeight;
-  if (r.clearRect(0, 0, i, o), r.fillStyle = t.background, r.fillRect(0, 0, i, o), r.strokeStyle = t.centerColor ?? t.color, r.lineWidth = 1, !s) return;
-  const a = t.style ?? "waveform", n = tt(s), h = et(a), l = Math.max(1, t.barWidth ?? h.barWidth), u = Math.max(0, t.barSpacing ?? h.barSpacing);
-  a === "waveform" ? rt(r, s, o, {
+  const { width: i, height: s } = lt(e, r);
+  if (r.clearRect(0, 0, i, s), r.fillStyle = t.background, r.fillRect(0, 0, i, s), r.strokeStyle = t.centerColor ?? t.color, r.lineWidth = 1, !o) return;
+  const a = t.style ?? "waveform", n = ct(o), h = dt(a), l = Math.max(1, t.barWidth ?? h.barWidth), u = Math.max(0, t.barSpacing ?? h.barSpacing);
+  a === "waveform" ? mt(r, o, s, {
     unplayedColor: t.color,
     playedColor: t.playedColor ?? t.progressColor ?? t.color,
     centerColor: t.centerColor ?? t.color,
     progress: t.progress ?? 0
-  }) : a === "lines" ? it(r, n, i, o, t.color) : a === "blocks" ? st(r, n, i, o, t.color, l, u) : a === "dots" ? at(r, n, i, o, t.color, l, u) : ot(r, n, i, o, t.color, l, u);
+  }) : a === "lines" ? gt(r, n, i, s, t.color) : a === "blocks" ? pt(r, n, i, s, t.color, l, u) : a === "dots" ? bt(r, n, i, s, t.color, l, u) : ft(r, n, i, s, t.color, l, u);
 }
-function Z(e, s) {
-  return Math.max(Math.abs(e.min[s] ?? 0), Math.abs(e.max[s] ?? 0));
+function lt(e, o) {
+  if (typeof o.getTransform != "function")
+    return { width: e.clientWidth, height: e.clientHeight };
+  const t = o.getTransform(), r = Math.abs(t.a) || 1, i = Math.abs(t.d) || 1;
+  return {
+    width: Math.max(e.clientWidth, e.width / r),
+    height: Math.max(e.clientHeight, e.height / i)
+  };
 }
-function tt(e) {
-  const s = [];
+function ut(e, o) {
+  return Math.max(Math.abs(e.min[o] ?? 0), Math.abs(e.max[o] ?? 0));
+}
+function ct(e) {
+  const o = [];
   for (let t = 0; t < e.max.length; t += 1)
-    s.push(Z(e, t));
-  return s;
+    o.push(ut(e, t));
+  return o;
 }
-function M(e, s) {
-  if (e.length === s) return e;
-  if (e.length === 0 || s <= 0) return [];
+function C(e, o) {
+  if (e.length === o) return e;
+  if (e.length === 0 || o <= 0) return [];
   const t = [];
-  if (s > e.length) {
-    const r = (e.length - 1) / Math.max(1, s - 1);
-    for (let i = 0; i < s; i += 1) {
-      const o = i * r, a = Math.floor(o), n = Math.ceil(o), h = o - a;
+  if (o > e.length) {
+    const r = (e.length - 1) / Math.max(1, o - 1);
+    for (let i = 0; i < o; i += 1) {
+      const s = i * r, a = Math.floor(s), n = Math.ceil(s), h = s - a;
       n >= e.length ? t.push(e[e.length - 1] ?? 0) : a === n ? t.push(e[a] ?? 0) : t.push((e[a] ?? 0) * (1 - h) + (e[n] ?? 0) * h);
     }
   } else {
-    const r = e.length / s;
-    for (let i = 0; i < s; i += 1) {
-      const o = Math.floor(i * r), a = Math.floor((i + 1) * r);
+    const r = e.length / o;
+    for (let i = 0; i < o; i += 1) {
+      const s = Math.floor(i * r), a = Math.floor((i + 1) * r);
       let n = 0, h = 0;
-      for (let l = o; l <= a && l < e.length; l += 1)
+      for (let l = s; l <= a && l < e.length; l += 1)
         n = Math.max(n, e[l] ?? 0), h += 1;
       h === 0 && (n = e[Math.min(Math.round(i * r), e.length - 1)] ?? 0), t.push(n);
     }
   }
   return t;
 }
-function et(e) {
+function dt(e) {
   return e === "bars" ? { barWidth: 3, barSpacing: 1 } : e === "blocks" ? { barWidth: 4, barSpacing: 2 } : e === "dots" ? { barWidth: 3, barSpacing: 3 } : { barWidth: 2, barSpacing: 0 };
 }
-function rt(e, s, t, r) {
+function mt(e, o, t, r) {
   const i = t / 2;
-  e.strokeStyle = r.centerColor, e.lineWidth = 1, e.beginPath(), e.moveTo(0, i), e.lineTo(s.max.length, i), e.stroke(), B(e, s, t, 0, s.min.length, r.unplayedColor);
-  const o = Math.max(0, Math.min(s.min.length, Math.round(s.min.length * r.progress)));
-  o > 0 && B(e, s, t, 0, o, r.playedColor);
+  e.strokeStyle = r.centerColor, e.lineWidth = 1, e.beginPath(), e.moveTo(0, i), e.lineTo(o.max.length, i), e.stroke(), H(e, o, t, 0, o.min.length, r.unplayedColor);
+  const s = Math.max(0, Math.min(o.min.length, Math.round(o.min.length * r.progress)));
+  s > 0 && H(e, o, t, 0, s, r.playedColor);
 }
-function B(e, s, t, r, i, o) {
+function H(e, o, t, r, i, s) {
   const a = t / 2;
-  e.strokeStyle = o, e.beginPath();
+  e.strokeStyle = s, e.beginPath();
   for (let n = r; n < i; n += 1) {
-    const h = a - s.min[n] * a, l = a - s.max[n] * a;
+    const h = a - o.min[n] * a, l = a - o.max[n] * a;
     e.moveTo(n + 0.5, h), e.lineTo(n + 0.5, l);
   }
   e.stroke();
 }
-function ot(e, s, t, r, i, o, a) {
-  const n = Math.floor(t / (o + a)), h = M(s, n);
+function ft(e, o, t, r, i, s, a) {
+  const n = Math.floor(t / (s + a)), h = C(o, n);
   e.fillStyle = i;
   for (let l = 0; l < h.length; l += 1) {
-    const u = l * (o + a);
-    if (u + o > t) break;
+    const u = l * (s + a);
+    if (u + s > t) break;
     const d = h[l] * r * 0.9;
-    e.fillRect(u, r - d, o, d);
+    e.fillRect(u, r - d, s, d);
   }
 }
-function it(e, s, t, r, i) {
-  const o = r / 2, a = M(s, Math.max(2, Math.floor(t / 3)));
-  e.strokeStyle = i, e.lineWidth = 2, e.lineCap = "round", e.lineJoin = "round", e.strokeStyle = "rgba(255, 255, 255, 0.03)", e.lineWidth = 0.5, e.beginPath(), e.moveTo(0, o), e.lineTo(t, o), e.stroke();
+function gt(e, o, t, r, i) {
+  const s = r / 2, a = C(o, Math.max(2, Math.floor(t / 3)));
+  e.strokeStyle = i, e.lineWidth = 2, e.lineCap = "round", e.lineJoin = "round", e.strokeStyle = "rgba(255, 255, 255, 0.03)", e.lineWidth = 0.5, e.beginPath(), e.moveTo(0, s), e.lineTo(t, s), e.stroke();
   for (let h = 0; h <= 10; h += 1) {
     const l = t / 10 * h;
     e.beginPath(), e.moveTo(l, 0), e.lineTo(l, r), e.stroke();
   }
-  e.strokeStyle = i, e.lineWidth = 2, e.beginPath(), e.moveTo(0, o);
+  e.strokeStyle = i, e.lineWidth = 2, e.beginPath(), e.moveTo(0, s);
   const n = a.map((h, l) => {
-    const u = l / Math.max(1, a.length - 1) * t, d = o + Math.sin(l * 0.1) * h * r * 0.35;
+    const u = l / Math.max(1, a.length - 1) * t, d = s + Math.sin(l * 0.1) * h * r * 0.35;
     return { x: u, y: d };
   });
   for (let h = 0; h < n.length - 1; h += 1) {
@@ -317,37 +409,37 @@ function it(e, s, t, r, i) {
   }
   e.stroke();
 }
-function st(e, s, t, r, i, o, a) {
-  const n = r / 2, h = Math.floor(t / (o + a)), l = M(s, h), u = 4, d = 2;
+function pt(e, o, t, r, i, s, a) {
+  const n = r / 2, h = Math.floor(t / (s + a)), l = C(o, h), u = 4, d = 2;
   e.fillStyle = i;
   for (let m = 0; m < l.length; m += 1) {
-    const p = m * (o + a);
-    if (p + o > t) break;
-    const g = l[m] * r * 0.9, b = Math.floor(g / (u + d));
+    const g = m * (s + a);
+    if (g + s > t) break;
+    const p = l[m] * r * 0.9, b = Math.floor(p / (u + d));
     for (let w = 0; w < b; w += 1) {
       const f = w * (u + d);
-      e.fillRect(p, n - f - u, o, u), w > 0 && e.fillRect(p, n + f, o, u);
+      e.fillRect(g, n - f - u, s, u), w > 0 && e.fillRect(g, n + f, s, u);
     }
   }
 }
-function at(e, s, t, r, i, o, a) {
-  const n = r / 2, h = Math.floor(t / (o + a)), l = M(s, h), u = Math.max(1.5, o / 2);
+function bt(e, o, t, r, i, s, a) {
+  const n = r / 2, h = Math.floor(t / (s + a)), l = C(o, h), u = Math.max(1.5, s / 2);
   e.fillStyle = i;
   for (let d = 0; d < l.length; d += 1) {
-    const m = d * (o + a) + o / 2;
+    const m = d * (s + a) + s / 2;
     if (m > t) break;
-    const p = l[d] * r * 0.9;
-    e.beginPath(), e.arc(m, n - p / 2, u, 0, Math.PI * 2), e.fill(), e.beginPath(), e.arc(m, n + p / 2, u, 0, Math.PI * 2), e.fill();
+    const g = l[d] * r * 0.9;
+    e.beginPath(), e.arc(m, n - g / 2, u, 0, Math.PI * 2), e.fill(), e.beginPath(), e.arc(m, n + g / 2, u, 0, Math.PI * 2), e.fill();
   }
 }
-function R(e) {
+function F(e) {
   if (!Number.isFinite(e) || e < 0)
     return "00:00.000";
-  const s = Math.floor(e * 1e3), t = s % 1e3, r = Math.floor(s / 1e3), i = r % 60, o = Math.floor(r / 60);
-  return `${String(o).padStart(2, "0")}:${String(i).padStart(2, "0")}.${String(t).padStart(3, "0")}`;
+  const o = Math.floor(e * 1e3), t = o % 1e3, r = Math.floor(o / 1e3), i = r % 60, s = Math.floor(r / 60);
+  return `${String(s).padStart(2, "0")}:${String(i).padStart(2, "0")}.${String(t).padStart(3, "0")}`;
 }
-const L = document.createElement("template");
-L.innerHTML = `
+const O = document.createElement("template");
+O.innerHTML = `
   <style>
     :host {
       --ap-bg: #ffffff;
@@ -538,17 +630,19 @@ L.innerHTML = `
     </div>
   </div>
 `;
-class C extends HTMLElement {
+class T extends HTMLElement {
   constructor() {
     super();
     c(this, "audio");
     c(this, "audioBuffer");
+    c(this, "sourceSampleRate");
     c(this, "waveformPeaks");
     c(this, "spectrogram");
     c(this, "worker");
     c(this, "resizeObserver");
     c(this, "animationFrame", 0);
     c(this, "loadingToken", 0);
+    c(this, "waveformPeaksWidth", 0);
     c(this, "blobUrl");
     c(this, "playRequestedAt");
     c(this, "root");
@@ -571,8 +665,8 @@ class C extends HTMLElement {
     });
     c(this, "handleSeekClick", (t) => {
       if (!this.audio || !Number.isFinite(this.duration) || this.duration <= 0) return;
-      const i = t.currentTarget.getBoundingClientRect(), o = (t.clientX - i.left) / i.width;
-      this.audio.currentTime = Math.max(0, Math.min(this.duration, o * this.duration)), this.updateTimeLabels(), this.drawCursors(), this.dispatchTypedEvent("seek"), this.audio.paused ? (this.playRequestedAt = performance.now(), this.audio.play().catch((a) => this.handleError("Audio playback failed.", a))) : this.audio.pause();
+      const i = t.currentTarget.getBoundingClientRect(), s = (t.clientX - i.left) / i.width;
+      this.audio.currentTime = Math.max(0, Math.min(this.duration, s * this.duration)), this.updateTimeLabels(), this.drawCursors(), this.dispatchTypedEvent("seek"), this.audio.paused ? (this.playRequestedAt = performance.now(), this.audio.play().catch((a) => this.handleError("Audio playback failed.", a))) : this.audio.pause();
     });
     c(this, "handleKeydown", (t) => {
       t.key !== " " && t.key !== "Enter" || (t.preventDefault(), this.handlePlayButton());
@@ -597,9 +691,9 @@ class C extends HTMLElement {
     });
     c(this, "updateTimeLabels", () => {
       var t;
-      this.currentEl.textContent = R(((t = this.audio) == null ? void 0 : t.currentTime) ?? 0), this.durationEl.textContent = R(this.duration);
+      this.currentEl.textContent = F(((t = this.audio) == null ? void 0 : t.currentTime) ?? 0), this.durationEl.textContent = F(this.duration);
     });
-    this.root = this.attachShadow({ mode: "open" }), this.root.append(L.content.cloneNode(!0)), this.button = this.requireElement("button"), this.button.dataset.state = "play", this.toolbar = this.requireElement(".toolbar"), this.timeEl = this.requireElement(".time"), this.currentEl = this.requireElement(".current"), this.durationEl = this.requireElement(".duration"), this.statusEl = this.requireElement(".status"), this.errorEl = this.requireElement(".error"), this.waveformPane = this.requireElement(".waveform-pane"), this.spectrogramPane = this.requireElement(".spectrogram-pane"), this.waveformCanvas = this.requireElement(".waveform"), this.spectrogramCanvas = this.requireElement(".spectrogram"), this.spectrogramOverlay = this.requireElement(".spectrogram-overlay"), this.waveformCursor = this.requireElement(".waveform-cursor"), this.spectrogramCursor = this.requireElement(".spectrogram-cursor");
+    this.root = this.attachShadow({ mode: "open" }), this.root.append(O.content.cloneNode(!0)), this.button = this.requireElement("button"), this.button.dataset.state = "play", this.toolbar = this.requireElement(".toolbar"), this.timeEl = this.requireElement(".time"), this.currentEl = this.requireElement(".current"), this.durationEl = this.requireElement(".duration"), this.statusEl = this.requireElement(".status"), this.errorEl = this.requireElement(".error"), this.waveformPane = this.requireElement(".waveform-pane"), this.spectrogramPane = this.requireElement(".spectrogram-pane"), this.waveformCanvas = this.requireElement(".waveform"), this.spectrogramCanvas = this.requireElement(".spectrogram"), this.spectrogramOverlay = this.requireElement(".spectrogram-overlay"), this.waveformCursor = this.requireElement(".waveform-cursor"), this.spectrogramCursor = this.requireElement(".spectrogram-cursor");
   }
   get src() {
     return this.getAttribute("src") ?? "";
@@ -722,7 +816,7 @@ class C extends HTMLElement {
     this.setAttribute("channel", String(t));
   }
   connectedCallback() {
-    this.button.addEventListener("click", this.handlePlayButton), this.waveformPane.addEventListener("click", this.handleSeekClick), this.spectrogramPane.addEventListener("click", this.handleSeekClick), this.addEventListener("keydown", this.handleKeydown), this.tabIndex = this.tabIndex >= 0 ? this.tabIndex : 0, this.resizeObserver = new ResizeObserver(() => this.layoutAndRender()), this.resizeObserver.observe(this), this.layoutAndRender(), this.src && this.load();
+    this.button.addEventListener("click", this.handlePlayButton), this.waveformPane.addEventListener("click", this.handleSeekClick), this.spectrogramPane.addEventListener("click", this.handleSeekClick), this.addEventListener("keydown", this.handleKeydown), this.tabIndex = this.tabIndex >= 0 ? this.tabIndex : 0, this.resizeObserver = new ResizeObserver(() => this.handleResize()), this.resizeObserver.observe(this), this.layoutAndRender(), this.src && this.load();
   }
   disconnectedCallback() {
     var t, r, i;
@@ -742,23 +836,23 @@ class C extends HTMLElement {
     }
   }
   async load() {
-    var i, o, a;
+    var i, s, a;
     const t = this.src, r = ++this.loadingToken;
-    if (this.clearError(), this.setStatus(t ? "Loading" : ""), this.dispatchTypedEvent("loadstart"), this.button.disabled = !0, this.waveformPeaks = void 0, this.spectrogram = void 0, this.layoutAndRender(), (i = this.worker) == null || i.terminate(), (o = this.audio) == null || o.pause(), this.revokeBlobUrl(), !t) {
+    if (this.clearError(), this.setStatus(t ? "Loading" : ""), this.dispatchTypedEvent("loadstart"), this.button.disabled = !0, this.sourceSampleRate = void 0, this.waveformPeaks = void 0, this.waveformPeaksWidth = 0, this.spectrogram = void 0, this.layoutAndRender(), (i = this.worker) == null || i.terminate(), (s = this.audio) == null || s.pause(), this.revokeBlobUrl(), !t) {
       this.setStatus("");
       return;
     }
     try {
-      const n = performance.now(), h = await I(t), l = performance.now();
+      const n = performance.now(), h = await j(t), l = performance.now();
       if (r !== this.loadingToken) return;
-      this.blobUrl = URL.createObjectURL(new Blob([h])), this.audio = O(this.blobUrl, this.autoplay), this.bindAudio();
+      this.sourceSampleRate = X(h), this.blobUrl = URL.createObjectURL(new Blob([h])), this.audio = Y(this.blobUrl, this.autoplay), this.bindAudio();
       const u = this.waitForAudioReady(this.audio);
-      this.audioBuffer = await z(h);
+      this.audioBuffer = await $(h, this.sourceSampleRate);
       const d = performance.now();
       if (r !== this.loadingToken) return;
-      const m = Math.max(1, Math.floor(this.getCanvasWidth())), p = performance.now();
-      this.waveformPeaks = this.showWaveform ? E(this.audioBuffer, m, this.channel) : void 0;
-      const g = performance.now();
+      const m = Math.max(1, Math.floor(this.getCanvasWidth())), g = performance.now();
+      this.waveformPeaks = this.showWaveform ? E(this.audioBuffer, m, this.channel) : void 0, this.waveformPeaksWidth = this.waveformPeaks ? m : 0;
+      const p = performance.now();
       await u;
       const b = performance.now();
       if (r !== this.loadingToken) return;
@@ -767,7 +861,7 @@ class C extends HTMLElement {
         fetchMs: l - n,
         audioReadyMs: b - l,
         decodeMs: d - l,
-        waveformMs: g - p,
+        waveformMs: p - g,
         firstUsableMs: w - n
       };
       this.dispatchEvent(new CustomEvent("profile", { detail: f })), this.layoutAndRender(), this.computeSpectrogramForCurrentBuffer(r, f, n), this.autoplay && await ((a = this.audio) == null ? void 0 : a.play());
@@ -779,7 +873,7 @@ class C extends HTMLElement {
   async recomputeAnalysis() {
     if (!this.audioBuffer) return;
     const t = Math.max(1, Math.floor(this.getCanvasWidth()));
-    this.waveformPeaks = this.showWaveform ? E(this.audioBuffer, t, this.channel) : void 0, this.layoutAndRender(), this.showSpectrogram ? (this.setStatus("Analyzing"), this.spectrogram = await this.computeSpectrogramInWorker(), this.setStatus("")) : this.spectrogram = void 0, this.layoutAndRender();
+    this.waveformPeaks = this.showWaveform ? E(this.audioBuffer, t, this.channel) : void 0, this.waveformPeaksWidth = this.waveformPeaks ? t : 0, this.layoutAndRender(), this.showSpectrogram ? (this.setStatus("Analyzing"), this.spectrogram = await this.computeSpectrogramInWorker(), this.setStatus("")) : this.spectrogram = void 0, this.layoutAndRender();
   }
   async computeSpectrogramForCurrentBuffer(t, r, i) {
     if (!this.audioBuffer || !this.showSpectrogram) {
@@ -787,7 +881,7 @@ class C extends HTMLElement {
       return;
     }
     try {
-      const o = performance.now();
+      const s = performance.now();
       this.spectrogram = await this.computeSpectrogramInWorker();
       const a = performance.now();
       if (t !== this.loadingToken) return;
@@ -795,18 +889,18 @@ class C extends HTMLElement {
         new CustomEvent("profile", {
           detail: {
             ...r,
-            spectrogramMs: a - o,
+            spectrogramMs: a - s,
             totalMs: a - i
           }
         })
       );
-    } catch (o) {
+    } catch (s) {
       if (t !== this.loadingToken) return;
       this.spectrogram = void 0, this.setStatus("Spectrogram unavailable"), this.dispatchEvent(
         new CustomEvent("error", {
           detail: {
-            message: o instanceof Error ? o.message : "Failed to compute spectrogram.",
-            cause: o
+            message: s instanceof Error ? s.message : "Failed to compute spectrogram.",
+            cause: s
           }
         })
       );
@@ -814,28 +908,28 @@ class C extends HTMLElement {
   }
   computeSpectrogramInWorker() {
     if (!this.audioBuffer) return Promise.resolve(void 0);
-    const t = F(this.audioBuffer, this.channel), r = {
+    const t = N(this.audioBuffer, this.channel), r = {
       samples: t,
-      sampleRate: this.audioBuffer.sampleRate,
+      sampleRate: this.sourceSampleRate ?? this.audioBuffer.sampleRate,
       fftSize: this.fftSize,
       hopSize: this.hopSize,
       windowType: this.windowType,
       minDb: this.minDb,
       maxDb: this.maxDb
     };
-    return typeof Worker > "u" ? Promise.resolve(Y(t, this.audioBuffer.sampleRate, r)) : new Promise((i, o) => {
+    return typeof Worker > "u" ? Promise.resolve(ot(t, r.sampleRate, r)) : new Promise((i, s) => {
       var a;
       (a = this.worker) == null || a.terminate(), this.worker = new Worker(new URL(
         /* @vite-ignore */
-        "/assets/spectrogram.worker-Burn7NUr.js",
+        "/assets/spectrogram.worker-CJxyA_5B.js",
         import.meta.url
       ), { type: "module" }), this.worker.addEventListener(
         "message",
         (n) => {
-          "error" in n.data ? o(new Error(n.data.error.message)) : i(n.data);
+          "error" in n.data ? s(new Error(n.data.error.message)) : i(n.data);
         },
         { once: !0 }
-      ), this.worker.addEventListener("error", () => o(new Error("Spectrogram worker failed.")), { once: !0 }), this.worker.postMessage(r, [r.samples.buffer]);
+      ), this.worker.addEventListener("error", () => s(new Error("Spectrogram worker failed.")), { once: !0 }), this.worker.postMessage(r, [r.samples.buffer]);
     });
   }
   bindAudio() {
@@ -844,9 +938,13 @@ class C extends HTMLElement {
       return this.handleError("Audio playback failed.", (t = this.audio) == null ? void 0 : t.error);
     }));
   }
+  handleResize() {
+    const t = Math.max(1, Math.floor(this.getCanvasWidth()));
+    this.audioBuffer && this.showWaveform && t !== this.waveformPeaksWidth ? (this.waveformPeaks = E(this.audioBuffer, t, this.channel), this.waveformPeaksWidth = t) : this.showWaveform || (this.waveformPeaksWidth = 0), this.layoutAndRender();
+  }
   layoutAndRender() {
     const t = Math.max(1, Math.floor(this.getCanvasWidth())), { waveformHeight: r, spectrogramHeight: i } = this.getPaneHeights();
-    this.toolbar.classList.toggle("hidden", !this.showControls && !this.showTime), this.button.classList.toggle("hidden", !this.showControls), this.timeEl.classList.toggle("hidden", !this.showTime), this.waveformPane.classList.toggle("hidden", !this.showWaveform), this.spectrogramPane.classList.toggle("hidden", !this.showSpectrogram), this.showWaveform && (v(this.waveformCanvas, t, r), v(this.waveformCursor, t, r), P(this.waveformCanvas, this.waveformPeaks, {
+    this.toolbar.classList.toggle("hidden", !this.showControls && !this.showTime), this.button.classList.toggle("hidden", !this.showControls), this.timeEl.classList.toggle("hidden", !this.showTime), this.waveformPane.classList.toggle("hidden", !this.showWaveform), this.spectrogramPane.classList.toggle("hidden", !this.showSpectrogram), this.showWaveform && (y(this.waveformCanvas, t, r), y(this.waveformCursor, t, r), L(this.waveformCanvas, this.waveformPeaks, {
       color: this.cssVar("--ap-waveform", "rgba(0, 214, 163, 0.34)"),
       playedColor: this.cssVar("--ap-waveform-played", "#00f0b5"),
       centerColor: this.cssVar("--ap-waveform-center", "rgba(0, 92, 58, 0.7)"),
@@ -856,7 +954,7 @@ class C extends HTMLElement {
       barWidth: this.waveformBarWidth,
       barSpacing: this.waveformBarSpacing,
       progress: this.playbackProgress
-    })), this.showSpectrogram && (v(this.spectrogramCanvas, t, i), v(this.spectrogramOverlay, t, i), v(this.spectrogramCursor, t, i), X(this.spectrogramCanvas, this.spectrogram, {
+    })), this.showSpectrogram && (y(this.spectrogramCanvas, t, i), y(this.spectrogramOverlay, t, i), y(this.spectrogramCursor, t, i), at(this.spectrogramCanvas, this.spectrogram, {
       colorMap: this.colorMap,
       background: this.cssVar("--ap-bg", "#ffffff"),
       tickColor: this.cssVar("--ap-spectrogram-tick", "rgba(255, 255, 255, 0.42)")
@@ -864,8 +962,8 @@ class C extends HTMLElement {
   }
   drawCursors() {
     var a;
-    const t = ((a = this.audio) == null ? void 0 : a.currentTime) ?? 0, r = this.duration, i = this.cssVar("--ap-cursor", "#ff0000"), o = this.cssVar("--ap-cursor-shadow", "rgba(0, 0, 0, 0.45)");
-    this.showWaveform && this.waveformStyle === "waveform" && P(this.waveformCanvas, this.waveformPeaks, {
+    const t = ((a = this.audio) == null ? void 0 : a.currentTime) ?? 0, r = this.duration, i = this.cssVar("--ap-cursor", "#ff0000"), s = this.cssVar("--ap-cursor-shadow", "rgba(0, 0, 0, 0.45)");
+    this.showWaveform && this.waveformStyle === "waveform" && L(this.waveformCanvas, this.waveformPeaks, {
       color: this.cssVar("--ap-waveform", "rgba(0, 214, 163, 0.34)"),
       playedColor: this.cssVar("--ap-waveform-played", "#00f0b5"),
       centerColor: this.cssVar("--ap-waveform-center", "rgba(0, 92, 58, 0.7)"),
@@ -875,19 +973,21 @@ class C extends HTMLElement {
       barWidth: this.waveformBarWidth,
       barSpacing: this.waveformBarSpacing,
       progress: this.playbackProgress
-    }), this.drawSpectrogramOverlay(), this.clearCursor(this.waveformCursor), this.clearCursor(this.spectrogramCursor), this.showWaveform && T(this.waveformCursor, t, r, i, o), this.showSpectrogram && T(this.spectrogramCursor, t, r, i, o);
+    }), this.drawSpectrogramOverlay(), this.clearCursor(this.waveformCursor), this.clearCursor(this.spectrogramCursor), this.showWaveform && B(this.waveformCursor, t, r, i, s), this.showSpectrogram && B(this.spectrogramCursor, t, r, i, s);
   }
   clearCursor(t) {
     const r = t.getContext("2d");
-    r == null || r.clearRect(0, 0, t.clientWidth, t.clientHeight);
+    if (!r) return;
+    const i = typeof r.getTransform == "function" ? r.getTransform() : void 0, s = Math.abs((i == null ? void 0 : i.a) ?? 1) || 1, a = Math.abs((i == null ? void 0 : i.d) ?? 1) || 1, n = Math.max(t.clientWidth, t.width / s), h = Math.max(t.clientHeight, t.height / a);
+    r.clearRect(0, 0, n, h);
   }
   drawSpectrogramOverlay() {
     const t = this.spectrogramOverlay.getContext("2d");
     if (!t) return;
     const r = this.spectrogramOverlay.clientWidth, i = this.spectrogramOverlay.clientHeight;
     if (t.clearRect(0, 0, r, i), !this.showSpectrogram || !this.spectrogram) return;
-    const o = r * this.playbackProgress, a = 1 - this.cssNumberVar("--ap-spectrogram-unplayed-opacity", 0.48);
-    o < r && (t.fillStyle = `rgba(0, 0, 0, ${Math.max(0, Math.min(1, a))})`, t.fillRect(o, 0, r - o, i));
+    const s = r * this.playbackProgress, a = 1 - this.cssNumberVar("--ap-spectrogram-unplayed-opacity", 0.48);
+    s < r && (t.fillStyle = `rgba(0, 0, 0, ${Math.max(0, Math.min(1, a))})`, t.fillRect(s, 0, r - s, i));
   }
   startAnimation() {
     this.stopAnimation();
@@ -942,10 +1042,10 @@ class C extends HTMLElement {
         waveformHeight: this.showWaveform ? this.waveformHeight : 0,
         spectrogramHeight: this.showSpectrogram ? this.spectrogramHeight : 0
       };
-    const o = this.height;
-    return this.showWaveform && !this.showSpectrogram ? { waveformHeight: r ? this.waveformHeight : o, spectrogramHeight: 0 } : !this.showWaveform && this.showSpectrogram ? { waveformHeight: 0, spectrogramHeight: i ? this.spectrogramHeight : o } : r && i ? { waveformHeight: this.waveformHeight, spectrogramHeight: this.spectrogramHeight } : r ? { waveformHeight: this.waveformHeight, spectrogramHeight: Math.max(1, o - this.waveformHeight) } : i ? { waveformHeight: Math.max(1, o - this.spectrogramHeight), spectrogramHeight: this.spectrogramHeight } : {
-      waveformHeight: Math.max(1, Math.round(o * (80 / 200))),
-      spectrogramHeight: Math.max(1, o - Math.round(o * (80 / 200)))
+    const s = this.height;
+    return this.showWaveform && !this.showSpectrogram ? { waveformHeight: r ? this.waveformHeight : s, spectrogramHeight: 0 } : !this.showWaveform && this.showSpectrogram ? { waveformHeight: 0, spectrogramHeight: i ? this.spectrogramHeight : s } : r && i ? { waveformHeight: this.waveformHeight, spectrogramHeight: this.spectrogramHeight } : r ? { waveformHeight: this.waveformHeight, spectrogramHeight: Math.max(1, s - this.waveformHeight) } : i ? { waveformHeight: Math.max(1, s - this.spectrogramHeight), spectrogramHeight: this.spectrogramHeight } : {
+      waveformHeight: Math.max(1, Math.round(s * (80 / 200))),
+      spectrogramHeight: Math.max(1, s - Math.round(s * (80 / 200)))
     };
   }
   getNumberAttribute(t, r) {
@@ -979,12 +1079,12 @@ class C extends HTMLElement {
   }
   waitForAudioReady(t) {
     return t.readyState >= HTMLMediaElement.HAVE_METADATA ? Promise.resolve() : new Promise((r, i) => {
-      const o = () => {
+      const s = () => {
         t.removeEventListener("loadedmetadata", a), t.removeEventListener("error", n);
       }, a = () => {
-        o(), r();
+        s(), r();
       }, n = () => {
-        o(), i(t.error ?? new Error("Audio metadata failed to load."));
+        s(), i(t.error ?? new Error("Audio metadata failed to load."));
       };
       t.addEventListener("loadedmetadata", a, { once: !0 }), t.addEventListener("error", n, { once: !0 }), t.load();
     });
@@ -993,7 +1093,7 @@ class C extends HTMLElement {
     this.blobUrl && (URL.revokeObjectURL(this.blobUrl), this.blobUrl = void 0);
   }
 }
-c(C, "observedAttributes", [
+c(T, "observedAttributes", [
   "src",
   "height",
   "waveform-height",
@@ -1014,11 +1114,11 @@ c(C, "observedAttributes", [
   "color-map",
   "channel"
 ]);
-class nt extends C {
+class wt extends T {
 }
-customElements.get("wavegram-player") || customElements.define("wavegram-player", C);
-customElements.get("audio-preview-spectrogram") || customElements.define("audio-preview-spectrogram", nt);
+customElements.get("wavegram-player") || customElements.define("wavegram-player", T);
+customElements.get("audio-preview-spectrogram") || customElements.define("audio-preview-spectrogram", wt);
 export {
-  nt as AudioPreviewSpectrogram,
-  C as Wavegram
+  wt as AudioPreviewSpectrogram,
+  T as Wavegram
 };

package/dist/index.umd.js

@@ -1,4 +1,4 @@
-(function(b,g){typeof exports=="object"&&typeof module<"u"?g(exports):typeof define=="function"&&define.amd?define(["exports"],g):(b=typeof globalThis<"u"?globalThis:b||self,g(b.Wavegram={}))})(this,(function(b){"use strict";var ht=Object.defineProperty;var lt=(b,g,A)=>g in b?ht(b,g,{enumerable:!0,configurable:!0,writable:!0,value:A}):b[g]=A;var c=(b,g,A)=>lt(b,typeof g!="symbol"?g+"":g,A);var g=typeof document<"u"?document.currentScript:null;let A;function z(){return A??(A=new AudioContext),A}async function I(e){return z().decodeAudioData(e.slice(0))}async function O(e){const s=await fetch(e);if(!s.ok)throw new Error(`Failed to load audio: ${s.status} ${s.statusText}`);return s.arrayBuffer()}function U(e,s){const t=new Audio(e);return t.preload="auto",t.autoplay=s,t.crossOrigin="anonymous",t}function M(e,s,t){return Math.min(t,Math.max(s,e))}const P=1e-10;function R(e){return Number.isInteger(e)&&e>0&&(e&e-1)===0}function V(e,s){const t=new Float32Array(e);if(e===1)return t[0]=1,t;for(let r=0;r<e;r+=1)s==="hann"?t[r]=.5-.5*Math.cos(2*Math.PI*r/(e-1)):s==="hamming"?t[r]=.54-.46*Math.cos(2*Math.PI*r/(e-1)):t[r]=1;return t}function $(e){let s=0;for(const t of e)s+=t;return s/e.length}function j(e){return 20*Math.log10(Math.abs(e)+P)}function Y(e,s){const t=e.length;if(!R(t)||s.length!==t)throw new Error("FFT input length must be a radix-2 size.");for(let r=1,i=0;r<t;r+=1){let o=t>>1;for(;i&o;o>>=1)i^=o;if(i^=o,r<i){const a=e[r];e[r]=e[i],e[i]=a;const n=s[r];s[r]=s[i],s[i]=n}}for(let r=2;r<=t;r<<=1){const i=-2*Math.PI/r,o=Math.cos(i),a=Math.sin(i);for(let n=0;n<t;n+=r){let h=1,l=0;for(let u=0;u<r/2;u+=1){const d=e[n+u],m=s[n+u],p=e[n+u+r/2]*h-s[n+u+r/2]*l,w=e[n+u+r/2]*l+s[n+u+r/2]*h;e[n+u]=d+p,s[n+u]=m+w,e[n+u+r/2]=d-p,s[n+u+r/2]=m-w;const v=h*o-l*a;l=h*a+l*o,h=v}}}}function _(e,s,t){const{fftSize:r,hopSize:i,windowType:o,minDb:a,maxDb:n}=t;if(!R(r))throw new Error(`fftSize must be a power of two. Received ${r}.`);if(!Number.isInteger(i)||i<=0)throw new Error(`hopSize must be a positive integer. Received ${i}.`);if(n<=a)throw new Error("maxDb must be greater than minDb.");const h=r/2+1,l=Math.max(1,Math.floor(Math.max(0,e.length-r)/i)+1),u=new Float32Array(l*h),d=V(r,o),m=Math.max(P,r*$(d)/2),p=new Float32Array(r),w=new Float32Array(r);for(let v=0;v<l;v+=1){const y=v*i;p.fill(0),w.fill(0);for(let f=0;f<r;f+=1)p[f]=(e[y+f]??0)*d[f];Y(p,w);for(let f=0;f<h;f+=1){const T=Math.hypot(p[f],w[f])/m;u[v*h+f]=M(j(T),a,n)}}return{values:u,freqBins:h,timeFrames:l,sampleRate:s,fftSize:r,hopSize:i,minDb:a,maxDb:n}}function B(e,s){if(s==="mix"){const t=new Float32Array(e.length);for(let r=0;r<e.numberOfChannels;r+=1){const i=e.getChannelData(r);for(let o=0;o<t.length;o+=1)t[o]+=i[o]/e.numberOfChannels}return t}if(!Number.isInteger(s)||s<0||s>=e.numberOfChannels)throw new Error(`Invalid channel ${s}. Audio has ${e.numberOfChannels} channel(s).`);return new Float32Array(e.getChannelData(s))}function K(e,s){const t=Math.max(1,Math.floor(s)),r=new Float32Array(t),i=new Float32Array(t),o=e.length/t;for(let a=0;a<t;a+=1){const n=Math.floor(a*o),h=Math.max(n+1,Math.floor((a+1)*o));let l=1,u=-1;for(let d=n;d<h&&d<e.length;d+=1){const m=e[d]??0;m<l&&(l=m),m>u&&(u=m)}r[a]=l===1?0:l,i[a]=u===-1?0:u}return{min:r,max:i}}function H(e,s,t){return K(B(e,t),s)}function S(e,s,t){const r=window.devicePixelRatio||1;e.style.width="100%",e.style.height=`${t}px`,e.width=Math.max(1,Math.floor(s*r)),e.height=Math.max(1,Math.floor(t*r));const i=e.getContext("2d");if(!i)throw new Error("Canvas 2D context is unavailable.");return i.setTransform(r,0,0,r,0,0),i}function W(e,s,t,r,i="rgba(0, 0, 0, 0.45)"){if(!Number.isFinite(t)||t<=0)return;const o=e.getContext("2d");if(!o)return;const a=e.clientWidth,n=e.clientHeight,h=Math.max(0,Math.min(a,s/t*a));o.save(),o.strokeStyle=i,o.lineWidth=2,o.beginPath(),o.moveTo(h,0),o.lineTo(h,n),o.stroke(),o.strokeStyle=r,o.lineWidth=1,o.beginPath(),o.moveTo(h,0),o.lineTo(h,n),o.stroke(),o.restore()}function k(e,s){const t=M(s,0,1)*(e.length-1),r=Math.floor(t),i=Math.min(r+1,e.length-1),o=t-r,a=e[r],n=e[i];return[Math.round(a[0]+(n[0]-a[0])*o),Math.round(a[1]+(n[1]-a[1])*o),Math.round(a[2]+(n[2]-a[2])*o)]}function G(e,s){const t=M(s,0,1);if(e==="audition")return k([[0,0,0],[12,7,34],[25,37,114],[18,104,174],[39,178,172],[244,180,43],[252,76,27],[255,238,117]],t);if(e==="gray"){const r=Math.round(t*255);return[r,r,r]}return k(e==="viridis"?[[68,1,84],[59,82,139],[33,145,140],[94,201,98],[253,231,37]]:e==="inferno"?[[0,0,4],[87,15,109],[187,55,84],[249,142,8],[252,255,164]]:[[0,0,4],[73,16,105],[182,54,121],[251,136,97],[252,253,191]],t)}function X(e,s,t){const r=e.getContext("2d");if(!r)return;const i=e.clientWidth,o=e.clientHeight,a=Math.max(1,e.width),n=Math.max(1,e.height);if(r.clearRect(0,0,i,o),r.fillStyle=t.background,r.fillRect(0,0,i,o),!s)return;const h=r.createImageData(a,n),l=s.maxDb-s.minDb;for(let u=0;u<h.width;u+=1){const d=Math.min(s.timeFrames-1,Math.floor(u/h.width*s.timeFrames));for(let m=0;m<h.height;m+=1){const p=Math.min(s.freqBins-1,Math.floor((h.height-1-m)/h.height*s.freqBins)),w=s.values[d*s.freqBins+p],v=M((w-s.minDb)/l,0,1),[y,f,T]=G(t.colorMap,v),E=(m*h.width+u)*4;h.data[E]=y,h.data[E+1]=f,h.data[E+2]=T,h.data[E+3]=255}}r.putImageData(h,0,0),Q(r,i,o,s.sampleRate,t.tickColor)}function J(e,s){if(!Number.isFinite(e)||e<=0)return 1e3;const t=Math.max(2,Math.min(6,Math.floor(s/28))),r=e/t,i=10**Math.floor(Math.log10(r)),o=r/i;return(o<=1?1:o<=2?2:o<=7.5?5:10)*i}function Q(e,s,t,r,i="rgba(255, 255, 255, 0.42)"){const o=r/2,a=J(o,t),n=5;e.save(),e.strokeStyle=i,e.fillStyle=i,e.lineWidth=1,e.font="10px system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif",e.textAlign="left",e.textBaseline="middle";for(let h=a;h<o;h+=a){const l=t-h/o*t;e.beginPath(),e.moveTo(0,l+.5),e.lineTo(s,l+.5),e.stroke(),e.fillText(Z(h),n,l)}e.restore()}function Z(e){if(e>=1e3){const s=e/1e3;return`${Number.isInteger(s)?s.toFixed(0):s.toFixed(1)}k`}return`${Math.round(e)}`}function F(e,s,t){const r=e.getContext("2d");if(!r)return;const i=e.clientWidth,o=e.clientHeight;if(r.clearRect(0,0,i,o),r.fillStyle=t.background,r.fillRect(0,0,i,o),r.strokeStyle=t.centerColor??t.color,r.lineWidth=1,!s)return;const a=t.style??"waveform",n=et(s),h=rt(a),l=Math.max(1,t.barWidth??h.barWidth),u=Math.max(0,t.barSpacing??h.barSpacing);a==="waveform"?ot(r,s,o,{unplayedColor:t.color,playedColor:t.playedColor??t.progressColor??t.color,centerColor:t.centerColor??t.color,progress:t.progress??0}):a==="lines"?st(r,n,i,o,t.color):a==="blocks"?at(r,n,i,o,t.color,l,u):a==="dots"?nt(r,n,i,o,t.color,l,u):it(r,n,i,o,t.color,l,u)}function tt(e,s){return Math.max(Math.abs(e.min[s]??0),Math.abs(e.max[s]??0))}function et(e){const s=[];for(let t=0;t<e.max.length;t+=1)s.push(tt(e,t));return s}function C(e,s){if(e.length===s)return e;if(e.length===0||s<=0)return[];const t=[];if(s>e.length){const r=(e.length-1)/Math.max(1,s-1);for(let i=0;i<s;i+=1){const o=i*r,a=Math.floor(o),n=Math.ceil(o),h=o-a;n>=e.length?t.push(e[e.length-1]??0):a===n?t.push(e[a]??0):t.push((e[a]??0)*(1-h)+(e[n]??0)*h)}}else{const r=e.length/s;for(let i=0;i<s;i+=1){const o=Math.floor(i*r),a=Math.floor((i+1)*r);let n=0,h=0;for(let l=o;l<=a&&l<e.length;l+=1)n=Math.max(n,e[l]??0),h+=1;h===0&&(n=e[Math.min(Math.round(i*r),e.length-1)]??0),t.push(n)}}return t}function rt(e){return e==="bars"?{barWidth:3,barSpacing:1}:e==="blocks"?{barWidth:4,barSpacing:2}:e==="dots"?{barWidth:3,barSpacing:3}:{barWidth:2,barSpacing:0}}function ot(e,s,t,r){const i=t/2;e.strokeStyle=r.centerColor,e.lineWidth=1,e.beginPath(),e.moveTo(0,i),e.lineTo(s.max.length,i),e.stroke(),L(e,s,t,0,s.min.length,r.unplayedColor);const o=Math.max(0,Math.min(s.min.length,Math.round(s.min.length*r.progress)));o>0&&L(e,s,t,0,o,r.playedColor)}function L(e,s,t,r,i,o){const a=t/2;e.strokeStyle=o,e.beginPath();for(let n=r;n<i;n+=1){const h=a-s.min[n]*a,l=a-s.max[n]*a;e.moveTo(n+.5,h),e.lineTo(n+.5,l)}e.stroke()}function it(e,s,t,r,i,o,a){const n=Math.floor(t/(o+a)),h=C(s,n);e.fillStyle=i;for(let l=0;l<h.length;l+=1){const u=l*(o+a);if(u+o>t)break;const d=h[l]*r*.9;e.fillRect(u,r-d,o,d)}}function st(e,s,t,r,i){const o=r/2,a=C(s,Math.max(2,Math.floor(t/3)));e.strokeStyle=i,e.lineWidth=2,e.lineCap="round",e.lineJoin="round",e.strokeStyle="rgba(255, 255, 255, 0.03)",e.lineWidth=.5,e.beginPath(),e.moveTo(0,o),e.lineTo(t,o),e.stroke();for(let h=0;h<=10;h+=1){const l=t/10*h;e.beginPath(),e.moveTo(l,0),e.lineTo(l,r),e.stroke()}e.strokeStyle=i,e.lineWidth=2,e.beginPath(),e.moveTo(0,o);const n=a.map((h,l)=>{const u=l/Math.max(1,a.length-1)*t,d=o+Math.sin(l*.1)*h*r*.35;return{x:u,y:d}});for(let h=0;h<n.length-1;h+=1){const l=n[h],u=n[h+1],d=l.x+(u.x-l.x)*.5,m=u.x-(u.x-l.x)*.5;e.bezierCurveTo(d,l.y,m,u.y,u.x,u.y)}e.stroke()}function at(e,s,t,r,i,o,a){const n=r/2,h=Math.floor(t/(o+a)),l=C(s,h),u=4,d=2;e.fillStyle=i;for(let m=0;m<l.length;m+=1){const p=m*(o+a);if(p+o>t)break;const w=l[m]*r*.9,v=Math.floor(w/(u+d));for(let y=0;y<v;y+=1){const f=y*(u+d);e.fillRect(p,n-f-u,o,u),y>0&&e.fillRect(p,n+f,o,u)}}}function nt(e,s,t,r,i,o,a){const n=r/2,h=Math.floor(t/(o+a)),l=C(s,h),u=Math.max(1.5,o/2);e.fillStyle=i;for(let d=0;d<l.length;d+=1){const m=d*(o+a)+o/2;if(m>t)break;const p=l[d]*r*.9;e.beginPath(),e.arc(m,n-p/2,u,0,Math.PI*2),e.fill(),e.beginPath(),e.arc(m,n+p/2,u,0,Math.PI*2),e.fill()}}function D(e){if(!Number.isFinite(e)||e<0)return"00:00.000";const s=Math.floor(e*1e3),t=s%1e3,r=Math.floor(s/1e3),i=r%60,o=Math.floor(r/60);return`${String(o).padStart(2,"0")}:${String(i).padStart(2,"0")}.${String(t).padStart(3,"0")}`}const N=document.createElement("template");N.innerHTML=`
+(function(b,p){typeof exports=="object"&&typeof module<"u"?p(exports):typeof define=="function"&&define.amd?define(["exports"],p):(b=typeof globalThis<"u"?globalThis:b||self,p(b.Wavegram={}))})(this,(function(b){"use strict";var vt=Object.defineProperty;var yt=(b,p,y)=>p in b?vt(b,p,{enumerable:!0,configurable:!0,writable:!0,value:y}):b[p]=y;var c=(b,p,y)=>yt(b,typeof p!="symbol"?p+"":p,y);var p=typeof document<"u"?document.currentScript:null;let y,B;function $(e){return(!y||B!==e)&&(y==null||y.close(),y=new AudioContext(e?{sampleRate:e}:void 0),B=e),y}async function j(e,o){return $(o).decodeAudioData(e.slice(0))}async function Y(e){const o=await fetch(e);if(!o.ok)throw new Error(`Failed to load audio: ${o.status} ${o.statusText}`);return o.arrayBuffer()}function _(e,o){const t=new Audio(e);return t.preload="auto",t.autoplay=o,t.crossOrigin="anonymous",t}function X(e){const o=new DataView(e);return K(o)??G(o)??J(o)??Q(o)}function K(e){if(e.byteLength<28||!A(e,0,"RIFF")&&!A(e,0,"RF64")||!A(e,8,"WAVE"))return;let o=12;for(;o+8<=e.byteLength;){const t=L(e,o,4),r=e.getUint32(o+4,!0),i=o+8;if(i+r>e.byteLength)return;if(t==="fmt "){if(r<8)return;const s=e.getUint32(i+4,!0);return Number.isFinite(s)&&s>0?s:void 0}o=i+r+r%2}}function G(e){if(!A(e,0,"fLaC"))return;let o=4;for(;o+4<=e.byteLength;){const r=e.getUint8(o)&127,i=e.getUint8(o+1)<<16|e.getUint8(o+2)<<8|e.getUint8(o+3),s=o+4;if(s+i>e.byteLength)return;if(r===0){if(i<13)return;const a=e.getUint8(s+10)<<12|e.getUint8(s+11)<<4|e.getUint8(s+12)>>4;return a>0?a:void 0}o=s+i}}function J(e){const o=W(e,[1,118,111,114,98,105,115]);if(o!==-1&&o+16<=e.byteLength){const r=e.getUint32(o+12,!0);return r>0?r:void 0}const t=W(e,[79,112,117,115,72,101,97,100]);if(t!==-1&&t+16<=e.byteLength){const r=e.getUint32(t+12,!0);return r>0?r:48e3}}function Q(e){let o=0;A(e,0,"ID3")&&e.byteLength>=10&&(o=10+Z(e,6));const t=[44100,48e3,32e3],r=[22050,24e3,16e3],i=[11025,12e3,8e3];for(;o+4<=e.byteLength;o+=1){const s=e.getUint8(o),a=e.getUint8(o+1);if(s!==255||(a&224)!==224)continue;const n=a>>3&3,h=a>>1&3,l=e.getUint8(o+2)>>2&3;if(n===1||h===0||l===3)continue;return(n===3?t:n===2?r:i)[l]}}function W(e,o){const t=e.byteLength-o.length;for(let r=0;r<=t;r+=1){let i=!0;for(let s=0;s<o.length;s+=1)if(e.getUint8(r+s)!==o[s]){i=!1;break}if(i)return r}return-1}function Z(e,o){return e.getUint8(o)<<21|e.getUint8(o+1)<<14|e.getUint8(o+2)<<7|e.getUint8(o+3)}function A(e,o,t){return o+t.length>e.byteLength?!1:L(e,o,t.length)===t}function L(e,o,t){let r="";for(let i=0;i<t;i+=1)r+=String.fromCharCode(e.getUint8(o+i));return r}function M(e,o,t){return Math.min(t,Math.max(o,e))}const F=1e-10;function H(e){return Number.isInteger(e)&&e>0&&(e&e-1)===0}function tt(e,o){const t=new Float32Array(e);if(e===1)return t[0]=1,t;for(let r=0;r<e;r+=1)o==="hann"?t[r]=.5-.5*Math.cos(2*Math.PI*r/(e-1)):o==="hamming"?t[r]=.54-.46*Math.cos(2*Math.PI*r/(e-1)):t[r]=1;return t}function et(e){let o=0;for(const t of e)o+=t;return o/e.length}function rt(e){return 20*Math.log10(Math.abs(e)+F)}function ot(e,o){const t=e.length;if(!H(t)||o.length!==t)throw new Error("FFT input length must be a radix-2 size.");for(let r=1,i=0;r<t;r+=1){let s=t>>1;for(;i&s;s>>=1)i^=s;if(i^=s,r<i){const a=e[r];e[r]=e[i],e[i]=a;const n=o[r];o[r]=o[i],o[i]=n}}for(let r=2;r<=t;r<<=1){const i=-2*Math.PI/r,s=Math.cos(i),a=Math.sin(i);for(let n=0;n<t;n+=r){let h=1,l=0;for(let u=0;u<r/2;u+=1){const d=e[n+u],m=o[n+u],g=e[n+u+r/2]*h-o[n+u+r/2]*l,w=e[n+u+r/2]*l+o[n+u+r/2]*h;e[n+u]=d+g,o[n+u]=m+w,e[n+u+r/2]=d-g,o[n+u+r/2]=m-w;const v=h*s-l*a;l=h*a+l*s,h=v}}}}function it(e,o,t){const{fftSize:r,hopSize:i,windowType:s,minDb:a,maxDb:n}=t;if(!H(r))throw new Error(`fftSize must be a power of two. Received ${r}.`);if(!Number.isInteger(i)||i<=0)throw new Error(`hopSize must be a positive integer. Received ${i}.`);if(n<=a)throw new Error("maxDb must be greater than minDb.");const h=r/2+1,l=Math.max(1,Math.floor(Math.max(0,e.length-r)/i)+1),u=new Float32Array(l*h),d=tt(r,s),m=Math.max(F,r*et(d)/2),g=new Float32Array(r),w=new Float32Array(r);for(let v=0;v<l;v+=1){const S=v*i;g.fill(0),w.fill(0);for(let f=0;f<r;f+=1)g[f]=(e[S+f]??0)*d[f];ot(g,w);for(let f=0;f<h;f+=1){const R=Math.hypot(g[f],w[f])/m;u[v*h+f]=M(rt(R),a,n)}}return{values:u,freqBins:h,timeFrames:l,sampleRate:o,maxFrequencyHz:o/2,fftSize:r,hopSize:i,minDb:a,maxDb:n}}function U(e,o){if(o==="mix"){const t=new Float32Array(e.length);for(let r=0;r<e.numberOfChannels;r+=1){const i=e.getChannelData(r);for(let s=0;s<t.length;s+=1)t[s]+=i[s]/e.numberOfChannels}return t}if(!Number.isInteger(o)||o<0||o>=e.numberOfChannels)throw new Error(`Invalid channel ${o}. Audio has ${e.numberOfChannels} channel(s).`);return new Float32Array(e.getChannelData(o))}function st(e,o){const t=Math.max(1,Math.floor(o)),r=new Float32Array(t),i=new Float32Array(t),s=e.length/t;for(let a=0;a<t;a+=1){const n=Math.floor(a*s),h=Math.max(n+1,Math.floor((a+1)*s));let l=1,u=-1;for(let d=n;d<h&&d<e.length;d+=1){const m=e[d]??0;m<l&&(l=m),m>u&&(u=m)}r[a]=l===1?0:l,i[a]=u===-1?0:u}return{min:r,max:i}}function P(e,o,t){return st(U(e,t),o)}function k(e,o,t){const r=window.devicePixelRatio||1;e.style.width="100%",e.style.height=`${t}px`,e.width=Math.max(1,Math.floor(o*r)),e.height=Math.max(1,Math.floor(t*r));const i=e.getContext("2d");if(!i)throw new Error("Canvas 2D context is unavailable.");return i.setTransform(r,0,0,r,0,0),i}function D(e,o,t,r,i="rgba(0, 0, 0, 0.45)"){if(!Number.isFinite(t)||t<=0)return;const s=o/t;if(!Number.isFinite(s)||s>=1)return;const a=e.getContext("2d");if(!a)return;const n=e.clientWidth,h=e.clientHeight,l=Math.max(0,Math.min(n,s*n));a.save(),a.strokeStyle=i,a.lineWidth=2,a.beginPath(),a.moveTo(l,0),a.lineTo(l,h),a.stroke(),a.strokeStyle=r,a.lineWidth=1,a.beginPath(),a.moveTo(l,0),a.lineTo(l,h),a.stroke(),a.restore()}function C(e,o){const t=M(o,0,1)*(e.length-1),r=Math.floor(t),i=Math.min(r+1,e.length-1),s=t-r,a=e[r],n=e[i];return[Math.round(a[0]+(n[0]-a[0])*s),Math.round(a[1]+(n[1]-a[1])*s),Math.round(a[2]+(n[2]-a[2])*s)]}function at(e,o){const t=M(o,0,1);if(e==="audition")return C([[0,0,0],[12,7,34],[25,37,114],[18,104,174],[39,178,172],[244,180,43],[252,76,27],[255,238,117]],t);if(e==="gray"){const r=Math.round(t*255);return[r,r,r]}return C(e==="viridis"?[[68,1,84],[59,82,139],[33,145,140],[94,201,98],[253,231,37]]:e==="inferno"?[[0,0,4],[87,15,109],[187,55,84],[249,142,8],[252,255,164]]:[[0,0,4],[73,16,105],[182,54,121],[251,136,97],[252,253,191]],t)}function nt(e,o,t){const r=e.getContext("2d");if(!r)return;const i=e.clientWidth,s=e.clientHeight,a=Math.max(1,e.width),n=Math.max(1,e.height);if(r.clearRect(0,0,i,s),r.fillStyle=t.background,r.fillRect(0,0,i,s),!o)return;const h=r.createImageData(a,n),l=o.maxDb-o.minDb;for(let u=0;u<h.width;u+=1){const d=Math.min(o.timeFrames-1,Math.floor(u/h.width*o.timeFrames));for(let m=0;m<h.height;m+=1){const g=Math.min(o.freqBins-1,Math.floor((h.height-1-m)/h.height*o.freqBins)),w=o.values[d*o.freqBins+g],v=M((w-o.minDb)/l,0,1),[S,f,R]=at(t.colorMap,v),T=(m*h.width+u)*4;h.data[T]=S,h.data[T+1]=f,h.data[T+2]=R,h.data[T+3]=255}}r.putImageData(h,0,0),lt(r,i,s,o.maxFrequencyHz,t.tickColor)}function ht(e,o){if(!Number.isFinite(e)||e<=0)return 1e3;const t=Math.max(2,Math.min(6,Math.floor(o/28))),r=e/t,i=10**Math.floor(Math.log10(r)),s=r/i;return(s<=1?1:s<=2?2:s<=7.5?5:10)*i}function lt(e,o,t,r,i="rgba(255, 255, 255, 0.42)"){const s=ht(r,t),a=5;e.save(),e.strokeStyle=i,e.fillStyle=i,e.lineWidth=1,e.font="10px system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif",e.textAlign="left",e.textBaseline="middle";for(let n=s;n<r;n+=s){const h=t-n/r*t;e.beginPath(),e.moveTo(0,h+.5),e.lineTo(o,h+.5),e.stroke(),e.fillText(N(n),a,h)}e.beginPath(),e.moveTo(0,.5),e.lineTo(o,.5),e.stroke(),e.fillText(N(r),a,8),e.restore()}function N(e){if(e>=1e3){const o=e/1e3;return`${Number.isInteger(o)?o.toFixed(0):o.toFixed(1)}k`}return`${Math.round(e)}`}function z(e,o,t){const r=e.getContext("2d");if(!r)return;const{width:i,height:s}=ut(e,r);if(r.clearRect(0,0,i,s),r.fillStyle=t.background,r.fillRect(0,0,i,s),r.strokeStyle=t.centerColor??t.color,r.lineWidth=1,!o)return;const a=t.style??"waveform",n=dt(o),h=mt(a),l=Math.max(1,t.barWidth??h.barWidth),u=Math.max(0,t.barSpacing??h.barSpacing);a==="waveform"?ft(r,o,s,{unplayedColor:t.color,playedColor:t.playedColor??t.progressColor??t.color,centerColor:t.centerColor??t.color,progress:t.progress??0}):a==="lines"?pt(r,n,i,s,t.color):a==="blocks"?bt(r,n,i,s,t.color,l,u):a==="dots"?wt(r,n,i,s,t.color,l,u):gt(r,n,i,s,t.color,l,u)}function ut(e,o){if(typeof o.getTransform!="function")return{width:e.clientWidth,height:e.clientHeight};const t=o.getTransform(),r=Math.abs(t.a)||1,i=Math.abs(t.d)||1;return{width:Math.max(e.clientWidth,e.width/r),height:Math.max(e.clientHeight,e.height/i)}}function ct(e,o){return Math.max(Math.abs(e.min[o]??0),Math.abs(e.max[o]??0))}function dt(e){const o=[];for(let t=0;t<e.max.length;t+=1)o.push(ct(e,t));return o}function x(e,o){if(e.length===o)return e;if(e.length===0||o<=0)return[];const t=[];if(o>e.length){const r=(e.length-1)/Math.max(1,o-1);for(let i=0;i<o;i+=1){const s=i*r,a=Math.floor(s),n=Math.ceil(s),h=s-a;n>=e.length?t.push(e[e.length-1]??0):a===n?t.push(e[a]??0):t.push((e[a]??0)*(1-h)+(e[n]??0)*h)}}else{const r=e.length/o;for(let i=0;i<o;i+=1){const s=Math.floor(i*r),a=Math.floor((i+1)*r);let n=0,h=0;for(let l=s;l<=a&&l<e.length;l+=1)n=Math.max(n,e[l]??0),h+=1;h===0&&(n=e[Math.min(Math.round(i*r),e.length-1)]??0),t.push(n)}}return t}function mt(e){return e==="bars"?{barWidth:3,barSpacing:1}:e==="blocks"?{barWidth:4,barSpacing:2}:e==="dots"?{barWidth:3,barSpacing:3}:{barWidth:2,barSpacing:0}}function ft(e,o,t,r){const i=t/2;e.strokeStyle=r.centerColor,e.lineWidth=1,e.beginPath(),e.moveTo(0,i),e.lineTo(o.max.length,i),e.stroke(),I(e,o,t,0,o.min.length,r.unplayedColor);const s=Math.max(0,Math.min(o.min.length,Math.round(o.min.length*r.progress)));s>0&&I(e,o,t,0,s,r.playedColor)}function I(e,o,t,r,i,s){const a=t/2;e.strokeStyle=s,e.beginPath();for(let n=r;n<i;n+=1){const h=a-o.min[n]*a,l=a-o.max[n]*a;e.moveTo(n+.5,h),e.lineTo(n+.5,l)}e.stroke()}function gt(e,o,t,r,i,s,a){const n=Math.floor(t/(s+a)),h=x(o,n);e.fillStyle=i;for(let l=0;l<h.length;l+=1){const u=l*(s+a);if(u+s>t)break;const d=h[l]*r*.9;e.fillRect(u,r-d,s,d)}}function pt(e,o,t,r,i){const s=r/2,a=x(o,Math.max(2,Math.floor(t/3)));e.strokeStyle=i,e.lineWidth=2,e.lineCap="round",e.lineJoin="round",e.strokeStyle="rgba(255, 255, 255, 0.03)",e.lineWidth=.5,e.beginPath(),e.moveTo(0,s),e.lineTo(t,s),e.stroke();for(let h=0;h<=10;h+=1){const l=t/10*h;e.beginPath(),e.moveTo(l,0),e.lineTo(l,r),e.stroke()}e.strokeStyle=i,e.lineWidth=2,e.beginPath(),e.moveTo(0,s);const n=a.map((h,l)=>{const u=l/Math.max(1,a.length-1)*t,d=s+Math.sin(l*.1)*h*r*.35;return{x:u,y:d}});for(let h=0;h<n.length-1;h+=1){const l=n[h],u=n[h+1],d=l.x+(u.x-l.x)*.5,m=u.x-(u.x-l.x)*.5;e.bezierCurveTo(d,l.y,m,u.y,u.x,u.y)}e.stroke()}function bt(e,o,t,r,i,s,a){const n=r/2,h=Math.floor(t/(s+a)),l=x(o,h),u=4,d=2;e.fillStyle=i;for(let m=0;m<l.length;m+=1){const g=m*(s+a);if(g+s>t)break;const w=l[m]*r*.9,v=Math.floor(w/(u+d));for(let S=0;S<v;S+=1){const f=S*(u+d);e.fillRect(g,n-f-u,s,u),S>0&&e.fillRect(g,n+f,s,u)}}}function wt(e,o,t,r,i,s,a){const n=r/2,h=Math.floor(t/(s+a)),l=x(o,h),u=Math.max(1.5,s/2);e.fillStyle=i;for(let d=0;d<l.length;d+=1){const m=d*(s+a)+s/2;if(m>t)break;const g=l[d]*r*.9;e.beginPath(),e.arc(m,n-g/2,u,0,Math.PI*2),e.fill(),e.beginPath(),e.arc(m,n+g/2,u,0,Math.PI*2),e.fill()}}function O(e){if(!Number.isFinite(e)||e<0)return"00:00.000";const o=Math.floor(e*1e3),t=o%1e3,r=Math.floor(o/1e3),i=r%60,s=Math.floor(r/60);return`${String(s).padStart(2,"0")}:${String(i).padStart(2,"0")}.${String(t).padStart(3,"0")}`}const q=document.createElement("template");q.innerHTML=`
   <style>
     :host {
       --ap-bg: #ffffff;
@@ -188,4 +188,4 @@
       </div>
     </div>
   </div>
-`;class x extends HTMLElement{constructor(){super();c(this,"audio");c(this,"audioBuffer");c(this,"waveformPeaks");c(this,"spectrogram");c(this,"worker");c(this,"resizeObserver");c(this,"animationFrame",0);c(this,"loadingToken",0);c(this,"blobUrl");c(this,"playRequestedAt");c(this,"root");c(this,"button");c(this,"toolbar");c(this,"timeEl");c(this,"currentEl");c(this,"durationEl");c(this,"statusEl");c(this,"errorEl");c(this,"waveformPane");c(this,"spectrogramPane");c(this,"waveformCanvas");c(this,"spectrogramCanvas");c(this,"spectrogramOverlay");c(this,"waveformCursor");c(this,"spectrogramCursor");c(this,"handlePlayButton",()=>{this.audio&&(this.audio.paused?(this.playRequestedAt=performance.now(),this.audio.play().catch(t=>this.handleError("Audio playback failed.",t))):this.audio.pause())});c(this,"handleSeekClick",t=>{if(!this.audio||!Number.isFinite(this.duration)||this.duration<=0)return;const i=t.currentTarget.getBoundingClientRect(),o=(t.clientX-i.left)/i.width;this.audio.currentTime=Math.max(0,Math.min(this.duration,o*this.duration)),this.updateTimeLabels(),this.drawCursors(),this.dispatchTypedEvent("seek"),this.audio.paused?(this.playRequestedAt=performance.now(),this.audio.play().catch(a=>this.handleError("Audio playback failed.",a))):this.audio.pause()});c(this,"handleKeydown",t=>{t.key!==" "&&t.key!=="Enter"||(t.preventDefault(),this.handlePlayButton())});c(this,"handleTimeUpdate",()=>{this.updateTimeLabels(),this.dispatchTypedEvent("timeupdate")});c(this,"handleAudioPlay",()=>{this.button.textContent="Pause",this.button.setAttribute("aria-label","Pause"),this.button.dataset.state="pause",this.dispatchTypedEvent("play")});c(this,"handleAudioPlaying",()=>{if(this.playRequestedAt!==void 0){const t={playToPlayingMs:performance.now()-this.playRequestedAt};this.dispatchEvent(new CustomEvent("playprofile",{detail:t})),this.playRequestedAt=void 0}this.startAnimation()});c(this,"handleAudioPause",()=>{this.button.textContent="Play",this.button.setAttribute("aria-label","Play"),this.button.dataset.state="play",this.dispatchTypedEvent("pause"),this.stopAnimation(),this.drawCursors()});c(this,"updateTimeLabels",()=>{var t;this.currentEl.textContent=D(((t=this.audio)==null?void 0:t.currentTime)??0),this.durationEl.textContent=D(this.duration)});this.root=this.attachShadow({mode:"open"}),this.root.append(N.content.cloneNode(!0)),this.button=this.requireElement("button"),this.button.dataset.state="play",this.toolbar=this.requireElement(".toolbar"),this.timeEl=this.requireElement(".time"),this.currentEl=this.requireElement(".current"),this.durationEl=this.requireElement(".duration"),this.statusEl=this.requireElement(".status"),this.errorEl=this.requireElement(".error"),this.waveformPane=this.requireElement(".waveform-pane"),this.spectrogramPane=this.requireElement(".spectrogram-pane"),this.waveformCanvas=this.requireElement(".waveform"),this.spectrogramCanvas=this.requireElement(".spectrogram"),this.spectrogramOverlay=this.requireElement(".spectrogram-overlay"),this.waveformCursor=this.requireElement(".waveform-cursor"),this.spectrogramCursor=this.requireElement(".spectrogram-cursor")}get src(){return this.getAttribute("src")??""}set src(t){this.setAttribute("src",t)}get height(){return this.getNumberAttribute("height",this.waveformHeight+this.spectrogramHeight)}set height(t){this.setAttribute("height",String(t))}get waveformHeight(){return this.getNumberAttribute("waveform-height",80)}set waveformHeight(t){this.setAttribute("waveform-height",String(t))}get spectrogramHeight(){return this.getNumberAttribute("spectrogram-height",120)}set spectrogramHeight(t){this.setAttribute("spectrogram-height",String(t))}get showWaveform(){return this.getBooleanAttribute("show-waveform",!0)}set showWaveform(t){this.setBooleanAttribute("show-waveform",t)}get showSpectrogram(){return this.getBooleanAttribute("show-spectrogram",!0)}set showSpectrogram(t){this.setBooleanAttribute("show-spectrogram",t)}get showControls(){return this.getBooleanAttribute("show-controls",!1)}set showControls(t){this.setBooleanAttribute("show-controls",t)}get showTime(){return this.getBooleanAttribute("show-time",!1)}set showTime(t){this.setBooleanAttribute("show-time",t)}get waveformStyle(){const t=this.getAttribute("waveform-style");return t==="line"?"lines":t==="waveform"?"waveform":t==="bars"||t==="lines"||t==="blocks"||t==="dots"?t:"waveform"}set waveformStyle(t){this.setAttribute("waveform-style",t)}get waveformBarWidth(){return this.getOptionalNumberAttribute("waveform-bar-width")}set waveformBarWidth(t){this.setAttribute("waveform-bar-width",String(t))}get waveformBarSpacing(){return this.getOptionalNumberAttribute("waveform-bar-spacing")}set waveformBarSpacing(t){this.setAttribute("waveform-bar-spacing",String(t))}get autoplay(){return this.getBooleanAttribute("autoplay",!1)}set autoplay(t){this.setBooleanAttribute("autoplay",t)}get fftSize(){return this.getNumberAttribute("fft-size",1024)}set fftSize(t){this.setAttribute("fft-size",String(t))}get hopSize(){return this.getNumberAttribute("hop-size",256)}set hopSize(t){this.setAttribute("hop-size",String(t))}get windowType(){const t=this.getAttribute("window-type");return t==="hamming"||t==="rectangular"?t:"hann"}set windowType(t){this.setAttribute("window-type",t)}get minDb(){return this.getNumberAttribute("min-db",-80)}set minDb(t){this.setAttribute("min-db",String(t))}get maxDb(){return this.getNumberAttribute("max-db",0)}set maxDb(t){this.setAttribute("max-db",String(t))}get colorMap(){const t=this.getAttribute("color-map");return t==="gray"||t==="magma"||t==="viridis"||t==="inferno"?t:"audition"}set colorMap(t){this.setAttribute("color-map",t)}get channel(){const t=this.getAttribute("channel");if(!t||t==="mix")return"mix";const r=Number(t);return Number.isInteger(r)?r:"mix"}set channel(t){this.setAttribute("channel",String(t))}connectedCallback(){this.button.addEventListener("click",this.handlePlayButton),this.waveformPane.addEventListener("click",this.handleSeekClick),this.spectrogramPane.addEventListener("click",this.handleSeekClick),this.addEventListener("keydown",this.handleKeydown),this.tabIndex=this.tabIndex>=0?this.tabIndex:0,this.resizeObserver=new ResizeObserver(()=>this.layoutAndRender()),this.resizeObserver.observe(this),this.layoutAndRender(),this.src&&this.load()}disconnectedCallback(){var t,r,i;this.button.removeEventListener("click",this.handlePlayButton),this.waveformPane.removeEventListener("click",this.handleSeekClick),this.spectrogramPane.removeEventListener("click",this.handleSeekClick),this.removeEventListener("keydown",this.handleKeydown),(t=this.resizeObserver)==null||t.disconnect(),this.stopAnimation(),(r=this.worker)==null||r.terminate(),(i=this.audio)==null||i.pause(),this.revokeBlobUrl()}attributeChangedCallback(t,r,i){if(!(r===i||!this.isConnected)){if(t==="src"){this.load();return}if(["fft-size","hop-size","window-type","min-db","max-db","channel"].includes(t)){this.audioBuffer&&this.recomputeAnalysis();return}this.layoutAndRender()}}async load(){var i,o,a;const t=this.src,r=++this.loadingToken;if(this.clearError(),this.setStatus(t?"Loading":""),this.dispatchTypedEvent("loadstart"),this.button.disabled=!0,this.waveformPeaks=void 0,this.spectrogram=void 0,this.layoutAndRender(),(i=this.worker)==null||i.terminate(),(o=this.audio)==null||o.pause(),this.revokeBlobUrl(),!t){this.setStatus("");return}try{const n=performance.now(),h=await O(t),l=performance.now();if(r!==this.loadingToken)return;this.blobUrl=URL.createObjectURL(new Blob([h])),this.audio=U(this.blobUrl,this.autoplay),this.bindAudio();const u=this.waitForAudioReady(this.audio);this.audioBuffer=await I(h);const d=performance.now();if(r!==this.loadingToken)return;const m=Math.max(1,Math.floor(this.getCanvasWidth())),p=performance.now();this.waveformPeaks=this.showWaveform?H(this.audioBuffer,m,this.channel):void 0;const w=performance.now();await u;const v=performance.now();if(r!==this.loadingToken)return;this.button.disabled=!1,this.setStatus(this.showSpectrogram?"Analyzing":""),this.updateTimeLabels(),this.dispatchTypedEvent("loaded");const y=performance.now(),f={fetchMs:l-n,audioReadyMs:v-l,decodeMs:d-l,waveformMs:w-p,firstUsableMs:y-n};this.dispatchEvent(new CustomEvent("profile",{detail:f})),this.layoutAndRender(),this.computeSpectrogramForCurrentBuffer(r,f,n),this.autoplay&&await((a=this.audio)==null?void 0:a.play())}catch(n){if(r!==this.loadingToken)return;this.handleError("Failed to load audio.",n)}}async recomputeAnalysis(){if(!this.audioBuffer)return;const t=Math.max(1,Math.floor(this.getCanvasWidth()));this.waveformPeaks=this.showWaveform?H(this.audioBuffer,t,this.channel):void 0,this.layoutAndRender(),this.showSpectrogram?(this.setStatus("Analyzing"),this.spectrogram=await this.computeSpectrogramInWorker(),this.setStatus("")):this.spectrogram=void 0,this.layoutAndRender()}async computeSpectrogramForCurrentBuffer(t,r,i){if(!this.audioBuffer||!this.showSpectrogram){this.spectrogram=void 0,this.setStatus(""),this.layoutAndRender();return}try{const o=performance.now();this.spectrogram=await this.computeSpectrogramInWorker();const a=performance.now();if(t!==this.loadingToken)return;this.setStatus(""),this.layoutAndRender(),this.dispatchEvent(new CustomEvent("profile",{detail:{...r,spectrogramMs:a-o,totalMs:a-i}}))}catch(o){if(t!==this.loadingToken)return;this.spectrogram=void 0,this.setStatus("Spectrogram unavailable"),this.dispatchEvent(new CustomEvent("error",{detail:{message:o instanceof Error?o.message:"Failed to compute spectrogram.",cause:o}}))}}computeSpectrogramInWorker(){if(!this.audioBuffer)return Promise.resolve(void 0);const t=B(this.audioBuffer,this.channel),r={samples:t,sampleRate:this.audioBuffer.sampleRate,fftSize:this.fftSize,hopSize:this.hopSize,windowType:this.windowType,minDb:this.minDb,maxDb:this.maxDb};return typeof Worker>"u"?Promise.resolve(_(t,this.audioBuffer.sampleRate,r)):new Promise((i,o)=>{var a;(a=this.worker)==null||a.terminate(),this.worker=new Worker(new URL("/assets/spectrogram.worker-Burn7NUr.js",typeof document>"u"&&typeof location>"u"?require("url").pathToFileURL(__filename).href:typeof document>"u"?location.href:g&&g.tagName.toUpperCase()==="SCRIPT"&&g.src||new URL("index.umd.js",document.baseURI).href),{type:"module"}),this.worker.addEventListener("message",n=>{"error"in n.data?o(new Error(n.data.error.message)):i(n.data)},{once:!0}),this.worker.addEventListener("error",()=>o(new Error("Spectrogram worker failed.")),{once:!0}),this.worker.postMessage(r,[r.samples.buffer])})}bindAudio(){this.audio&&(this.audio.addEventListener("loadedmetadata",this.updateTimeLabels),this.audio.addEventListener("timeupdate",this.handleTimeUpdate),this.audio.addEventListener("play",this.handleAudioPlay),this.audio.addEventListener("playing",this.handleAudioPlaying),this.audio.addEventListener("pause",this.handleAudioPause),this.audio.addEventListener("ended",this.handleAudioPause),this.audio.addEventListener("error",()=>{var t;return this.handleError("Audio playback failed.",(t=this.audio)==null?void 0:t.error)}))}layoutAndRender(){const t=Math.max(1,Math.floor(this.getCanvasWidth())),{waveformHeight:r,spectrogramHeight:i}=this.getPaneHeights();this.toolbar.classList.toggle("hidden",!this.showControls&&!this.showTime),this.button.classList.toggle("hidden",!this.showControls),this.timeEl.classList.toggle("hidden",!this.showTime),this.waveformPane.classList.toggle("hidden",!this.showWaveform),this.spectrogramPane.classList.toggle("hidden",!this.showSpectrogram),this.showWaveform&&(S(this.waveformCanvas,t,r),S(this.waveformCursor,t,r),F(this.waveformCanvas,this.waveformPeaks,{color:this.cssVar("--ap-waveform","rgba(0, 214, 163, 0.34)"),playedColor:this.cssVar("--ap-waveform-played","#00f0b5"),centerColor:this.cssVar("--ap-waveform-center","rgba(0, 92, 58, 0.7)"),progressColor:this.cssVar("--ap-waveform-progress","#00f0b5"),background:this.cssVar("--ap-waveform-bg","#020604"),style:this.waveformStyle,barWidth:this.waveformBarWidth,barSpacing:this.waveformBarSpacing,progress:this.playbackProgress})),this.showSpectrogram&&(S(this.spectrogramCanvas,t,i),S(this.spectrogramOverlay,t,i),S(this.spectrogramCursor,t,i),X(this.spectrogramCanvas,this.spectrogram,{colorMap:this.colorMap,background:this.cssVar("--ap-bg","#ffffff"),tickColor:this.cssVar("--ap-spectrogram-tick","rgba(255, 255, 255, 0.42)")}),this.drawSpectrogramOverlay()),this.drawCursors()}drawCursors(){var a;const t=((a=this.audio)==null?void 0:a.currentTime)??0,r=this.duration,i=this.cssVar("--ap-cursor","#ff0000"),o=this.cssVar("--ap-cursor-shadow","rgba(0, 0, 0, 0.45)");this.showWaveform&&this.waveformStyle==="waveform"&&F(this.waveformCanvas,this.waveformPeaks,{color:this.cssVar("--ap-waveform","rgba(0, 214, 163, 0.34)"),playedColor:this.cssVar("--ap-waveform-played","#00f0b5"),centerColor:this.cssVar("--ap-waveform-center","rgba(0, 92, 58, 0.7)"),progressColor:this.cssVar("--ap-waveform-progress","#00f0b5"),background:this.cssVar("--ap-waveform-bg","#020604"),style:this.waveformStyle,barWidth:this.waveformBarWidth,barSpacing:this.waveformBarSpacing,progress:this.playbackProgress}),this.drawSpectrogramOverlay(),this.clearCursor(this.waveformCursor),this.clearCursor(this.spectrogramCursor),this.showWaveform&&W(this.waveformCursor,t,r,i,o),this.showSpectrogram&&W(this.spectrogramCursor,t,r,i,o)}clearCursor(t){const r=t.getContext("2d");r==null||r.clearRect(0,0,t.clientWidth,t.clientHeight)}drawSpectrogramOverlay(){const t=this.spectrogramOverlay.getContext("2d");if(!t)return;const r=this.spectrogramOverlay.clientWidth,i=this.spectrogramOverlay.clientHeight;if(t.clearRect(0,0,r,i),!this.showSpectrogram||!this.spectrogram)return;const o=r*this.playbackProgress,a=1-this.cssNumberVar("--ap-spectrogram-unplayed-opacity",.48);o<r&&(t.fillStyle=`rgba(0, 0, 0, ${Math.max(0,Math.min(1,a))})`,t.fillRect(o,0,r-o,i))}startAnimation(){this.stopAnimation();const t=()=>{this.updateTimeLabels(),this.drawCursors(),this.animationFrame=requestAnimationFrame(t)};this.animationFrame=requestAnimationFrame(t)}stopAnimation(){this.animationFrame&&(cancelAnimationFrame(this.animationFrame),this.animationFrame=0)}get duration(){var t,r;return((t=this.audio)==null?void 0:t.duration)||((r=this.audioBuffer)==null?void 0:r.duration)||0}get playbackProgress(){var r;const t=this.duration;return!Number.isFinite(t)||t<=0?0:Math.max(0,Math.min(1,(((r=this.audio)==null?void 0:r.currentTime)??0)/t))}dispatchTypedEvent(t){var i;const r={currentTime:((i=this.audio)==null?void 0:i.currentTime)??0,duration:this.duration};this.dispatchEvent(new CustomEvent(t,{detail:r}))}handleError(t,r){this.button.disabled=!0,this.setStatus("");const i={message:r instanceof Error?`${t} ${r.message}`:t,cause:r};this.errorEl.textContent=i.message,this.errorEl.classList.remove("hidden"),this.dispatchEvent(new CustomEvent("error",{detail:i}))}clearError(){this.errorEl.textContent="",this.errorEl.classList.add("hidden")}setStatus(t){this.statusEl.textContent=t}getCanvasWidth(){return this.clientWidth||this.getBoundingClientRect().width||640}getPaneHeights(){if(!this.showWaveform&&!this.showSpectrogram)return{waveformHeight:0,spectrogramHeight:0};const t=this.hasAttribute("height"),r=this.hasAttribute("waveform-height"),i=this.hasAttribute("spectrogram-height");if(!t)return{waveformHeight:this.showWaveform?this.waveformHeight:0,spectrogramHeight:this.showSpectrogram?this.spectrogramHeight:0};const o=this.height;return this.showWaveform&&!this.showSpectrogram?{waveformHeight:r?this.waveformHeight:o,spectrogramHeight:0}:!this.showWaveform&&this.showSpectrogram?{waveformHeight:0,spectrogramHeight:i?this.spectrogramHeight:o}:r&&i?{waveformHeight:this.waveformHeight,spectrogramHeight:this.spectrogramHeight}:r?{waveformHeight:this.waveformHeight,spectrogramHeight:Math.max(1,o-this.waveformHeight)}:i?{waveformHeight:Math.max(1,o-this.spectrogramHeight),spectrogramHeight:this.spectrogramHeight}:{waveformHeight:Math.max(1,Math.round(o*(80/200))),spectrogramHeight:Math.max(1,o-Math.round(o*(80/200)))}}getNumberAttribute(t,r){const i=Number(this.getAttribute(t));return Number.isFinite(i)&&i>0?i:r}getOptionalNumberAttribute(t){if(!this.hasAttribute(t))return;const r=Number(this.getAttribute(t));return Number.isFinite(r)&&r>0?r:void 0}getBooleanAttribute(t,r){if(!this.hasAttribute(t))return r;const i=this.getAttribute(t);return i===""||i==="true"||i===t}setBooleanAttribute(t,r){r?this.setAttribute(t,""):this.setAttribute(t,"false")}cssVar(t,r){return getComputedStyle(this).getPropertyValue(t).trim()||r}cssNumberVar(t,r){const i=Number(getComputedStyle(this).getPropertyValue(t).trim());return Number.isFinite(i)?i:r}requireElement(t){const r=this.root.querySelector(t);if(!r)throw new Error(`Missing template element: ${t}`);return r}waitForAudioReady(t){return t.readyState>=HTMLMediaElement.HAVE_METADATA?Promise.resolve():new Promise((r,i)=>{const o=()=>{t.removeEventListener("loadedmetadata",a),t.removeEventListener("error",n)},a=()=>{o(),r()},n=()=>{o(),i(t.error??new Error("Audio metadata failed to load."))};t.addEventListener("loadedmetadata",a,{once:!0}),t.addEventListener("error",n,{once:!0}),t.load()})}revokeBlobUrl(){this.blobUrl&&(URL.revokeObjectURL(this.blobUrl),this.blobUrl=void 0)}}c(x,"observedAttributes",["src","height","waveform-height","spectrogram-height","show-waveform","show-spectrogram","show-controls","show-time","waveform-style","waveform-bar-width","waveform-bar-spacing","autoplay","fft-size","hop-size","window-type","min-db","max-db","color-map","channel"]);class q extends x{}customElements.get("wavegram-player")||customElements.define("wavegram-player",x),customElements.get("audio-preview-spectrogram")||customElements.define("audio-preview-spectrogram",q),b.AudioPreviewSpectrogram=q,b.Wavegram=x,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})}));
+`;class E extends HTMLElement{constructor(){super();c(this,"audio");c(this,"audioBuffer");c(this,"sourceSampleRate");c(this,"waveformPeaks");c(this,"spectrogram");c(this,"worker");c(this,"resizeObserver");c(this,"animationFrame",0);c(this,"loadingToken",0);c(this,"waveformPeaksWidth",0);c(this,"blobUrl");c(this,"playRequestedAt");c(this,"root");c(this,"button");c(this,"toolbar");c(this,"timeEl");c(this,"currentEl");c(this,"durationEl");c(this,"statusEl");c(this,"errorEl");c(this,"waveformPane");c(this,"spectrogramPane");c(this,"waveformCanvas");c(this,"spectrogramCanvas");c(this,"spectrogramOverlay");c(this,"waveformCursor");c(this,"spectrogramCursor");c(this,"handlePlayButton",()=>{this.audio&&(this.audio.paused?(this.playRequestedAt=performance.now(),this.audio.play().catch(t=>this.handleError("Audio playback failed.",t))):this.audio.pause())});c(this,"handleSeekClick",t=>{if(!this.audio||!Number.isFinite(this.duration)||this.duration<=0)return;const i=t.currentTarget.getBoundingClientRect(),s=(t.clientX-i.left)/i.width;this.audio.currentTime=Math.max(0,Math.min(this.duration,s*this.duration)),this.updateTimeLabels(),this.drawCursors(),this.dispatchTypedEvent("seek"),this.audio.paused?(this.playRequestedAt=performance.now(),this.audio.play().catch(a=>this.handleError("Audio playback failed.",a))):this.audio.pause()});c(this,"handleKeydown",t=>{t.key!==" "&&t.key!=="Enter"||(t.preventDefault(),this.handlePlayButton())});c(this,"handleTimeUpdate",()=>{this.updateTimeLabels(),this.dispatchTypedEvent("timeupdate")});c(this,"handleAudioPlay",()=>{this.button.textContent="Pause",this.button.setAttribute("aria-label","Pause"),this.button.dataset.state="pause",this.dispatchTypedEvent("play")});c(this,"handleAudioPlaying",()=>{if(this.playRequestedAt!==void 0){const t={playToPlayingMs:performance.now()-this.playRequestedAt};this.dispatchEvent(new CustomEvent("playprofile",{detail:t})),this.playRequestedAt=void 0}this.startAnimation()});c(this,"handleAudioPause",()=>{this.button.textContent="Play",this.button.setAttribute("aria-label","Play"),this.button.dataset.state="play",this.dispatchTypedEvent("pause"),this.stopAnimation(),this.drawCursors()});c(this,"updateTimeLabels",()=>{var t;this.currentEl.textContent=O(((t=this.audio)==null?void 0:t.currentTime)??0),this.durationEl.textContent=O(this.duration)});this.root=this.attachShadow({mode:"open"}),this.root.append(q.content.cloneNode(!0)),this.button=this.requireElement("button"),this.button.dataset.state="play",this.toolbar=this.requireElement(".toolbar"),this.timeEl=this.requireElement(".time"),this.currentEl=this.requireElement(".current"),this.durationEl=this.requireElement(".duration"),this.statusEl=this.requireElement(".status"),this.errorEl=this.requireElement(".error"),this.waveformPane=this.requireElement(".waveform-pane"),this.spectrogramPane=this.requireElement(".spectrogram-pane"),this.waveformCanvas=this.requireElement(".waveform"),this.spectrogramCanvas=this.requireElement(".spectrogram"),this.spectrogramOverlay=this.requireElement(".spectrogram-overlay"),this.waveformCursor=this.requireElement(".waveform-cursor"),this.spectrogramCursor=this.requireElement(".spectrogram-cursor")}get src(){return this.getAttribute("src")??""}set src(t){this.setAttribute("src",t)}get height(){return this.getNumberAttribute("height",this.waveformHeight+this.spectrogramHeight)}set height(t){this.setAttribute("height",String(t))}get waveformHeight(){return this.getNumberAttribute("waveform-height",80)}set waveformHeight(t){this.setAttribute("waveform-height",String(t))}get spectrogramHeight(){return this.getNumberAttribute("spectrogram-height",120)}set spectrogramHeight(t){this.setAttribute("spectrogram-height",String(t))}get showWaveform(){return this.getBooleanAttribute("show-waveform",!0)}set showWaveform(t){this.setBooleanAttribute("show-waveform",t)}get showSpectrogram(){return this.getBooleanAttribute("show-spectrogram",!0)}set showSpectrogram(t){this.setBooleanAttribute("show-spectrogram",t)}get showControls(){return this.getBooleanAttribute("show-controls",!1)}set showControls(t){this.setBooleanAttribute("show-controls",t)}get showTime(){return this.getBooleanAttribute("show-time",!1)}set showTime(t){this.setBooleanAttribute("show-time",t)}get waveformStyle(){const t=this.getAttribute("waveform-style");return t==="line"?"lines":t==="waveform"?"waveform":t==="bars"||t==="lines"||t==="blocks"||t==="dots"?t:"waveform"}set waveformStyle(t){this.setAttribute("waveform-style",t)}get waveformBarWidth(){return this.getOptionalNumberAttribute("waveform-bar-width")}set waveformBarWidth(t){this.setAttribute("waveform-bar-width",String(t))}get waveformBarSpacing(){return this.getOptionalNumberAttribute("waveform-bar-spacing")}set waveformBarSpacing(t){this.setAttribute("waveform-bar-spacing",String(t))}get autoplay(){return this.getBooleanAttribute("autoplay",!1)}set autoplay(t){this.setBooleanAttribute("autoplay",t)}get fftSize(){return this.getNumberAttribute("fft-size",1024)}set fftSize(t){this.setAttribute("fft-size",String(t))}get hopSize(){return this.getNumberAttribute("hop-size",256)}set hopSize(t){this.setAttribute("hop-size",String(t))}get windowType(){const t=this.getAttribute("window-type");return t==="hamming"||t==="rectangular"?t:"hann"}set windowType(t){this.setAttribute("window-type",t)}get minDb(){return this.getNumberAttribute("min-db",-80)}set minDb(t){this.setAttribute("min-db",String(t))}get maxDb(){return this.getNumberAttribute("max-db",0)}set maxDb(t){this.setAttribute("max-db",String(t))}get colorMap(){const t=this.getAttribute("color-map");return t==="gray"||t==="magma"||t==="viridis"||t==="inferno"?t:"audition"}set colorMap(t){this.setAttribute("color-map",t)}get channel(){const t=this.getAttribute("channel");if(!t||t==="mix")return"mix";const r=Number(t);return Number.isInteger(r)?r:"mix"}set channel(t){this.setAttribute("channel",String(t))}connectedCallback(){this.button.addEventListener("click",this.handlePlayButton),this.waveformPane.addEventListener("click",this.handleSeekClick),this.spectrogramPane.addEventListener("click",this.handleSeekClick),this.addEventListener("keydown",this.handleKeydown),this.tabIndex=this.tabIndex>=0?this.tabIndex:0,this.resizeObserver=new ResizeObserver(()=>this.handleResize()),this.resizeObserver.observe(this),this.layoutAndRender(),this.src&&this.load()}disconnectedCallback(){var t,r,i;this.button.removeEventListener("click",this.handlePlayButton),this.waveformPane.removeEventListener("click",this.handleSeekClick),this.spectrogramPane.removeEventListener("click",this.handleSeekClick),this.removeEventListener("keydown",this.handleKeydown),(t=this.resizeObserver)==null||t.disconnect(),this.stopAnimation(),(r=this.worker)==null||r.terminate(),(i=this.audio)==null||i.pause(),this.revokeBlobUrl()}attributeChangedCallback(t,r,i){if(!(r===i||!this.isConnected)){if(t==="src"){this.load();return}if(["fft-size","hop-size","window-type","min-db","max-db","channel"].includes(t)){this.audioBuffer&&this.recomputeAnalysis();return}this.layoutAndRender()}}async load(){var i,s,a;const t=this.src,r=++this.loadingToken;if(this.clearError(),this.setStatus(t?"Loading":""),this.dispatchTypedEvent("loadstart"),this.button.disabled=!0,this.sourceSampleRate=void 0,this.waveformPeaks=void 0,this.waveformPeaksWidth=0,this.spectrogram=void 0,this.layoutAndRender(),(i=this.worker)==null||i.terminate(),(s=this.audio)==null||s.pause(),this.revokeBlobUrl(),!t){this.setStatus("");return}try{const n=performance.now(),h=await Y(t),l=performance.now();if(r!==this.loadingToken)return;this.sourceSampleRate=X(h),this.blobUrl=URL.createObjectURL(new Blob([h])),this.audio=_(this.blobUrl,this.autoplay),this.bindAudio();const u=this.waitForAudioReady(this.audio);this.audioBuffer=await j(h,this.sourceSampleRate);const d=performance.now();if(r!==this.loadingToken)return;const m=Math.max(1,Math.floor(this.getCanvasWidth())),g=performance.now();this.waveformPeaks=this.showWaveform?P(this.audioBuffer,m,this.channel):void 0,this.waveformPeaksWidth=this.waveformPeaks?m:0;const w=performance.now();await u;const v=performance.now();if(r!==this.loadingToken)return;this.button.disabled=!1,this.setStatus(this.showSpectrogram?"Analyzing":""),this.updateTimeLabels(),this.dispatchTypedEvent("loaded");const S=performance.now(),f={fetchMs:l-n,audioReadyMs:v-l,decodeMs:d-l,waveformMs:w-g,firstUsableMs:S-n};this.dispatchEvent(new CustomEvent("profile",{detail:f})),this.layoutAndRender(),this.computeSpectrogramForCurrentBuffer(r,f,n),this.autoplay&&await((a=this.audio)==null?void 0:a.play())}catch(n){if(r!==this.loadingToken)return;this.handleError("Failed to load audio.",n)}}async recomputeAnalysis(){if(!this.audioBuffer)return;const t=Math.max(1,Math.floor(this.getCanvasWidth()));this.waveformPeaks=this.showWaveform?P(this.audioBuffer,t,this.channel):void 0,this.waveformPeaksWidth=this.waveformPeaks?t:0,this.layoutAndRender(),this.showSpectrogram?(this.setStatus("Analyzing"),this.spectrogram=await this.computeSpectrogramInWorker(),this.setStatus("")):this.spectrogram=void 0,this.layoutAndRender()}async computeSpectrogramForCurrentBuffer(t,r,i){if(!this.audioBuffer||!this.showSpectrogram){this.spectrogram=void 0,this.setStatus(""),this.layoutAndRender();return}try{const s=performance.now();this.spectrogram=await this.computeSpectrogramInWorker();const a=performance.now();if(t!==this.loadingToken)return;this.setStatus(""),this.layoutAndRender(),this.dispatchEvent(new CustomEvent("profile",{detail:{...r,spectrogramMs:a-s,totalMs:a-i}}))}catch(s){if(t!==this.loadingToken)return;this.spectrogram=void 0,this.setStatus("Spectrogram unavailable"),this.dispatchEvent(new CustomEvent("error",{detail:{message:s instanceof Error?s.message:"Failed to compute spectrogram.",cause:s}}))}}computeSpectrogramInWorker(){if(!this.audioBuffer)return Promise.resolve(void 0);const t=U(this.audioBuffer,this.channel),r={samples:t,sampleRate:this.sourceSampleRate??this.audioBuffer.sampleRate,fftSize:this.fftSize,hopSize:this.hopSize,windowType:this.windowType,minDb:this.minDb,maxDb:this.maxDb};return typeof Worker>"u"?Promise.resolve(it(t,r.sampleRate,r)):new Promise((i,s)=>{var a;(a=this.worker)==null||a.terminate(),this.worker=new Worker(new URL("/assets/spectrogram.worker-CJxyA_5B.js",typeof document>"u"&&typeof location>"u"?require("url").pathToFileURL(__filename).href:typeof document>"u"?location.href:p&&p.tagName.toUpperCase()==="SCRIPT"&&p.src||new URL("index.umd.js",document.baseURI).href),{type:"module"}),this.worker.addEventListener("message",n=>{"error"in n.data?s(new Error(n.data.error.message)):i(n.data)},{once:!0}),this.worker.addEventListener("error",()=>s(new Error("Spectrogram worker failed.")),{once:!0}),this.worker.postMessage(r,[r.samples.buffer])})}bindAudio(){this.audio&&(this.audio.addEventListener("loadedmetadata",this.updateTimeLabels),this.audio.addEventListener("timeupdate",this.handleTimeUpdate),this.audio.addEventListener("play",this.handleAudioPlay),this.audio.addEventListener("playing",this.handleAudioPlaying),this.audio.addEventListener("pause",this.handleAudioPause),this.audio.addEventListener("ended",this.handleAudioPause),this.audio.addEventListener("error",()=>{var t;return this.handleError("Audio playback failed.",(t=this.audio)==null?void 0:t.error)}))}handleResize(){const t=Math.max(1,Math.floor(this.getCanvasWidth()));this.audioBuffer&&this.showWaveform&&t!==this.waveformPeaksWidth?(this.waveformPeaks=P(this.audioBuffer,t,this.channel),this.waveformPeaksWidth=t):this.showWaveform||(this.waveformPeaksWidth=0),this.layoutAndRender()}layoutAndRender(){const t=Math.max(1,Math.floor(this.getCanvasWidth())),{waveformHeight:r,spectrogramHeight:i}=this.getPaneHeights();this.toolbar.classList.toggle("hidden",!this.showControls&&!this.showTime),this.button.classList.toggle("hidden",!this.showControls),this.timeEl.classList.toggle("hidden",!this.showTime),this.waveformPane.classList.toggle("hidden",!this.showWaveform),this.spectrogramPane.classList.toggle("hidden",!this.showSpectrogram),this.showWaveform&&(k(this.waveformCanvas,t,r),k(this.waveformCursor,t,r),z(this.waveformCanvas,this.waveformPeaks,{color:this.cssVar("--ap-waveform","rgba(0, 214, 163, 0.34)"),playedColor:this.cssVar("--ap-waveform-played","#00f0b5"),centerColor:this.cssVar("--ap-waveform-center","rgba(0, 92, 58, 0.7)"),progressColor:this.cssVar("--ap-waveform-progress","#00f0b5"),background:this.cssVar("--ap-waveform-bg","#020604"),style:this.waveformStyle,barWidth:this.waveformBarWidth,barSpacing:this.waveformBarSpacing,progress:this.playbackProgress})),this.showSpectrogram&&(k(this.spectrogramCanvas,t,i),k(this.spectrogramOverlay,t,i),k(this.spectrogramCursor,t,i),nt(this.spectrogramCanvas,this.spectrogram,{colorMap:this.colorMap,background:this.cssVar("--ap-bg","#ffffff"),tickColor:this.cssVar("--ap-spectrogram-tick","rgba(255, 255, 255, 0.42)")}),this.drawSpectrogramOverlay()),this.drawCursors()}drawCursors(){var a;const t=((a=this.audio)==null?void 0:a.currentTime)??0,r=this.duration,i=this.cssVar("--ap-cursor","#ff0000"),s=this.cssVar("--ap-cursor-shadow","rgba(0, 0, 0, 0.45)");this.showWaveform&&this.waveformStyle==="waveform"&&z(this.waveformCanvas,this.waveformPeaks,{color:this.cssVar("--ap-waveform","rgba(0, 214, 163, 0.34)"),playedColor:this.cssVar("--ap-waveform-played","#00f0b5"),centerColor:this.cssVar("--ap-waveform-center","rgba(0, 92, 58, 0.7)"),progressColor:this.cssVar("--ap-waveform-progress","#00f0b5"),background:this.cssVar("--ap-waveform-bg","#020604"),style:this.waveformStyle,barWidth:this.waveformBarWidth,barSpacing:this.waveformBarSpacing,progress:this.playbackProgress}),this.drawSpectrogramOverlay(),this.clearCursor(this.waveformCursor),this.clearCursor(this.spectrogramCursor),this.showWaveform&&D(this.waveformCursor,t,r,i,s),this.showSpectrogram&&D(this.spectrogramCursor,t,r,i,s)}clearCursor(t){const r=t.getContext("2d");if(!r)return;const i=typeof r.getTransform=="function"?r.getTransform():void 0,s=Math.abs((i==null?void 0:i.a)??1)||1,a=Math.abs((i==null?void 0:i.d)??1)||1,n=Math.max(t.clientWidth,t.width/s),h=Math.max(t.clientHeight,t.height/a);r.clearRect(0,0,n,h)}drawSpectrogramOverlay(){const t=this.spectrogramOverlay.getContext("2d");if(!t)return;const r=this.spectrogramOverlay.clientWidth,i=this.spectrogramOverlay.clientHeight;if(t.clearRect(0,0,r,i),!this.showSpectrogram||!this.spectrogram)return;const s=r*this.playbackProgress,a=1-this.cssNumberVar("--ap-spectrogram-unplayed-opacity",.48);s<r&&(t.fillStyle=`rgba(0, 0, 0, ${Math.max(0,Math.min(1,a))})`,t.fillRect(s,0,r-s,i))}startAnimation(){this.stopAnimation();const t=()=>{this.updateTimeLabels(),this.drawCursors(),this.animationFrame=requestAnimationFrame(t)};this.animationFrame=requestAnimationFrame(t)}stopAnimation(){this.animationFrame&&(cancelAnimationFrame(this.animationFrame),this.animationFrame=0)}get duration(){var t,r;return((t=this.audio)==null?void 0:t.duration)||((r=this.audioBuffer)==null?void 0:r.duration)||0}get playbackProgress(){var r;const t=this.duration;return!Number.isFinite(t)||t<=0?0:Math.max(0,Math.min(1,(((r=this.audio)==null?void 0:r.currentTime)??0)/t))}dispatchTypedEvent(t){var i;const r={currentTime:((i=this.audio)==null?void 0:i.currentTime)??0,duration:this.duration};this.dispatchEvent(new CustomEvent(t,{detail:r}))}handleError(t,r){this.button.disabled=!0,this.setStatus("");const i={message:r instanceof Error?`${t} ${r.message}`:t,cause:r};this.errorEl.textContent=i.message,this.errorEl.classList.remove("hidden"),this.dispatchEvent(new CustomEvent("error",{detail:i}))}clearError(){this.errorEl.textContent="",this.errorEl.classList.add("hidden")}setStatus(t){this.statusEl.textContent=t}getCanvasWidth(){return this.clientWidth||this.getBoundingClientRect().width||640}getPaneHeights(){if(!this.showWaveform&&!this.showSpectrogram)return{waveformHeight:0,spectrogramHeight:0};const t=this.hasAttribute("height"),r=this.hasAttribute("waveform-height"),i=this.hasAttribute("spectrogram-height");if(!t)return{waveformHeight:this.showWaveform?this.waveformHeight:0,spectrogramHeight:this.showSpectrogram?this.spectrogramHeight:0};const s=this.height;return this.showWaveform&&!this.showSpectrogram?{waveformHeight:r?this.waveformHeight:s,spectrogramHeight:0}:!this.showWaveform&&this.showSpectrogram?{waveformHeight:0,spectrogramHeight:i?this.spectrogramHeight:s}:r&&i?{waveformHeight:this.waveformHeight,spectrogramHeight:this.spectrogramHeight}:r?{waveformHeight:this.waveformHeight,spectrogramHeight:Math.max(1,s-this.waveformHeight)}:i?{waveformHeight:Math.max(1,s-this.spectrogramHeight),spectrogramHeight:this.spectrogramHeight}:{waveformHeight:Math.max(1,Math.round(s*(80/200))),spectrogramHeight:Math.max(1,s-Math.round(s*(80/200)))}}getNumberAttribute(t,r){const i=Number(this.getAttribute(t));return Number.isFinite(i)&&i>0?i:r}getOptionalNumberAttribute(t){if(!this.hasAttribute(t))return;const r=Number(this.getAttribute(t));return Number.isFinite(r)&&r>0?r:void 0}getBooleanAttribute(t,r){if(!this.hasAttribute(t))return r;const i=this.getAttribute(t);return i===""||i==="true"||i===t}setBooleanAttribute(t,r){r?this.setAttribute(t,""):this.setAttribute(t,"false")}cssVar(t,r){return getComputedStyle(this).getPropertyValue(t).trim()||r}cssNumberVar(t,r){const i=Number(getComputedStyle(this).getPropertyValue(t).trim());return Number.isFinite(i)?i:r}requireElement(t){const r=this.root.querySelector(t);if(!r)throw new Error(`Missing template element: ${t}`);return r}waitForAudioReady(t){return t.readyState>=HTMLMediaElement.HAVE_METADATA?Promise.resolve():new Promise((r,i)=>{const s=()=>{t.removeEventListener("loadedmetadata",a),t.removeEventListener("error",n)},a=()=>{s(),r()},n=()=>{s(),i(t.error??new Error("Audio metadata failed to load."))};t.addEventListener("loadedmetadata",a,{once:!0}),t.addEventListener("error",n,{once:!0}),t.load()})}revokeBlobUrl(){this.blobUrl&&(URL.revokeObjectURL(this.blobUrl),this.blobUrl=void 0)}}c(E,"observedAttributes",["src","height","waveform-height","spectrogram-height","show-waveform","show-spectrogram","show-controls","show-time","waveform-style","waveform-bar-width","waveform-bar-spacing","autoplay","fft-size","hop-size","window-type","min-db","max-db","color-map","channel"]);class V extends E{}customElements.get("wavegram-player")||customElements.define("wavegram-player",E),customElements.get("audio-preview-spectrogram")||customElements.define("audio-preview-spectrogram",V),b.AudioPreviewSpectrogram=V,b.Wavegram=E,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})}));

package/dist/render/drawCursor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawCursor.d.ts","sourceRoot":"","sources":["../../src/render/drawCursor.ts"],"names":[],"mappings":"AAAA,wBAAgB,UAAU,CACxB,MAAM,EAAE,iBAAiB,EACzB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,EACb,WAAW,SAAwB,GAClC,IAAI,CAuBN"}
+{"version":3,"file":"drawCursor.d.ts","sourceRoot":"","sources":["../../src/render/drawCursor.ts"],"names":[],"mappings":"AAAA,wBAAgB,UAAU,CACxB,MAAM,EAAE,iBAAiB,EACzB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,EACb,WAAW,SAAwB,GAClC,IAAI,CA0BN"}

package/dist/render/drawWaveform.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawWaveform.d.ts","sourceRoot":"","sources":["../../src/render/drawWaveform.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE7D,wBAAgB,YAAY,CAC1B,MAAM,EAAE,iBAAiB,EACzB,KAAK,EAAE,aAAa,GAAG,SAAS,EAChC,OAAO,EAAE;IACP,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,GACA,IAAI,CAqCN"}
+{"version":3,"file":"drawWaveform.d.ts","sourceRoot":"","sources":["../../src/render/drawWaveform.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE7D,wBAAgB,YAAY,CAC1B,MAAM,EAAE,iBAAiB,EACzB,KAAK,EAAE,aAAa,GAAG,SAAS,EAChC,OAAO,EAAE;IACP,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,GACA,IAAI,CAoCN"}

package/dist/types.d.ts

@@ -11,6 +11,7 @@ export type SpectrogramData = {
     freqBins: number;
     timeFrames: number;
     sampleRate: number;
+    maxFrequencyHz: number;
     fftSize: number;
     hopSize: number;
     minDb: number;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,aAAa,CAAC;AAC5D,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;AACjF,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,KAAK,CAAC;AAC9C,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE9E,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,EAAE,YAAY,CAAC;IAClB,GAAG,EAAE,YAAY,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,YAAY,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,UAAU,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,kBAAkB,GAAG;IAC1D,OAAO,EAAE,YAAY,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,eAAe,EAAE,MAAM,CAAC;CACzB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,aAAa,CAAC;AAC5D,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;AACjF,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,KAAK,CAAC;AAC9C,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE9E,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,EAAE,YAAY,CAAC;IAClB,GAAG,EAAE,YAAY,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,YAAY,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,UAAU,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,kBAAkB,GAAG;IAC1D,OAAO,EAAE,YAAY,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,eAAe,EAAE,MAAM,CAAC;CACzB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wavegram",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Lightweight waveform and spectrogram Web Component for audio previews.",
   "type": "module",
   "license": "MIT",