@waveform-playlist/spectrogram 5.3.0

package/dist/index.mjs

@@ -0,0 +1,4440 @@
+// src/computation/fft.ts
+import FFT from "fft.js";
+var fftInstances = /* @__PURE__ */ new Map();
+var complexBuffers = /* @__PURE__ */ new Map();
+function getFftInstance(size) {
+  let instance = fftInstances.get(size);
+  if (!instance) {
+    instance = new FFT(size);
+    fftInstances.set(size, instance);
+    complexBuffers.set(size, instance.createComplexArray());
+  }
+  return instance;
+}
+function getComplexBuffer(size) {
+  return complexBuffers.get(size);
+}
+function fftMagnitudeDb(real, out) {
+  const n = real.length;
+  const f = getFftInstance(n);
+  const complexOut = getComplexBuffer(n);
+  f.realTransform(complexOut, real);
+  const half = n >> 1;
+  for (let i = 0; i < half; i++) {
+    const re = complexOut[i * 2];
+    const im = complexOut[i * 2 + 1];
+    let db = 20 * Math.log10(Math.sqrt(re * re + im * im) + 1e-10);
+    if (db < -160) db = -160;
+    out[i] = db;
+  }
+}
+
+// src/computation/windowFunctions.ts
+function getWindowFunction(name, size, alpha) {
+  const window2 = new Float32Array(size);
+  const N = size;
+  switch (name) {
+    case "rectangular":
+      for (let i = 0; i < size; i++) window2[i] = 1;
+      break;
+    case "bartlett":
+      for (let i = 0; i < size; i++) {
+        window2[i] = 1 - Math.abs((2 * i - N) / N);
+      }
+      break;
+    case "hann":
+      for (let i = 0; i < size; i++) {
+        window2[i] = 0.5 * (1 - Math.cos(2 * Math.PI * i / N));
+      }
+      break;
+    case "hamming":
+      for (let i = 0; i < size; i++) {
+        const a = alpha ?? 0.54;
+        window2[i] = a - (1 - a) * Math.cos(2 * Math.PI * i / N);
+      }
+      break;
+    case "blackman": {
+      const a0 = 0.42;
+      const a1 = 0.5;
+      const a2 = 0.08;
+      for (let i = 0; i < size; i++) {
+        window2[i] = a0 - a1 * Math.cos(2 * Math.PI * i / N) + a2 * Math.cos(4 * Math.PI * i / N);
+      }
+      break;
+    }
+    case "blackman-harris": {
+      const c0 = 0.35875;
+      const c1 = 0.48829;
+      const c2 = 0.14128;
+      const c3 = 0.01168;
+      for (let i = 0; i < size; i++) {
+        window2[i] = c0 - c1 * Math.cos(2 * Math.PI * i / N) + c2 * Math.cos(4 * Math.PI * i / N) - c3 * Math.cos(6 * Math.PI * i / N);
+      }
+      break;
+    }
+    default:
+      console.warn(`[spectrogram] Unknown window function "${name}", falling back to hann`);
+      for (let i = 0; i < size; i++) {
+        window2[i] = 0.5 * (1 - Math.cos(2 * Math.PI * i / N));
+      }
+  }
+  let sum = 0;
+  for (let i = 0; i < size; i++) sum += window2[i];
+  if (sum > 0) {
+    const scale = 2 / sum;
+    for (let i = 0; i < size; i++) window2[i] *= scale;
+  }
+  return window2;
+}
+
+// src/computation/computeSpectrogram.ts
+function computeSpectrogram(audioBuffer, config = {}, offsetSamples = 0, durationSamples, channel = 0) {
+  const windowSize = config.fftSize ?? 2048;
+  const zeroPaddingFactor = config.zeroPaddingFactor ?? 2;
+  const actualFftSize = windowSize * zeroPaddingFactor;
+  const hopSize = config.hopSize ?? Math.floor(windowSize / 4);
+  const windowName = config.windowFunction ?? "hann";
+  const gainDb = config.gainDb ?? 20;
+  const rangeDb = config.rangeDb ?? 80;
+  const alpha = config.alpha;
+  const sampleRate = audioBuffer.sampleRate;
+  const frequencyBinCount = actualFftSize >> 1;
+  const totalSamples = durationSamples ?? audioBuffer.length - offsetSamples;
+  const channelIdx = Math.min(channel, audioBuffer.numberOfChannels - 1);
+  const channelData = audioBuffer.getChannelData(channelIdx);
+  const window2 = getWindowFunction(windowName, windowSize, alpha);
+  const frameCount = Math.max(1, Math.floor((totalSamples - windowSize) / hopSize) + 1);
+  const data = new Float32Array(frameCount * frequencyBinCount);
+  const real = new Float32Array(actualFftSize);
+  const dbBuf = new Float32Array(frequencyBinCount);
+  for (let frame = 0; frame < frameCount; frame++) {
+    const start = offsetSamples + frame * hopSize;
+    for (let i = 0; i < windowSize; i++) {
+      const sampleIdx = start + i;
+      real[i] = sampleIdx < channelData.length ? channelData[sampleIdx] * window2[i] : 0;
+    }
+    for (let i = windowSize; i < actualFftSize; i++) {
+      real[i] = 0;
+    }
+    fftMagnitudeDb(real, dbBuf);
+    data.set(dbBuf, frame * frequencyBinCount);
+  }
+  return {
+    fftSize: actualFftSize,
+    windowSize,
+    frequencyBinCount,
+    sampleRate,
+    hopSize,
+    frameCount,
+    data,
+    gainDb,
+    rangeDb
+  };
+}
+function computeSpectrogramMono(audioBuffer, config = {}, offsetSamples = 0, durationSamples) {
+  if (audioBuffer.numberOfChannels === 1) {
+    return computeSpectrogram(audioBuffer, config, offsetSamples, durationSamples, 0);
+  }
+  const windowSize = config.fftSize ?? 2048;
+  const zeroPaddingFactor = config.zeroPaddingFactor ?? 2;
+  const actualFftSize = windowSize * zeroPaddingFactor;
+  const hopSize = config.hopSize ?? Math.floor(windowSize / 4);
+  const windowName = config.windowFunction ?? "hann";
+  const gainDb = config.gainDb ?? 20;
+  const rangeDb = config.rangeDb ?? 80;
+  const alpha = config.alpha;
+  const sampleRate = audioBuffer.sampleRate;
+  const frequencyBinCount = actualFftSize >> 1;
+  const totalSamples = durationSamples ?? audioBuffer.length - offsetSamples;
+  const numChannels = audioBuffer.numberOfChannels;
+  const window2 = getWindowFunction(windowName, windowSize, alpha);
+  const frameCount = Math.max(1, Math.floor((totalSamples - windowSize) / hopSize) + 1);
+  const data = new Float32Array(frameCount * frequencyBinCount);
+  const real = new Float32Array(actualFftSize);
+  const dbBuf = new Float32Array(frequencyBinCount);
+  const channels = [];
+  for (let ch = 0; ch < numChannels; ch++) {
+    channels.push(audioBuffer.getChannelData(ch));
+  }
+  for (let frame = 0; frame < frameCount; frame++) {
+    const start = offsetSamples + frame * hopSize;
+    for (let i = 0; i < windowSize; i++) {
+      const sampleIdx = start + i;
+      let sum = 0;
+      for (let ch = 0; ch < numChannels; ch++) {
+        sum += sampleIdx < channels[ch].length ? channels[ch][sampleIdx] : 0;
+      }
+      real[i] = sum / numChannels * window2[i];
+    }
+    for (let i = windowSize; i < actualFftSize; i++) {
+      real[i] = 0;
+    }
+    fftMagnitudeDb(real, dbBuf);
+    data.set(dbBuf, frame * frequencyBinCount);
+  }
+  return {
+    fftSize: actualFftSize,
+    windowSize,
+    frequencyBinCount,
+    sampleRate,
+    hopSize,
+    frameCount,
+    data,
+    gainDb,
+    rangeDb
+  };
+}
+
+// src/computation/colorMaps.ts
+function interpolateLUT(stops) {
+  const lut = new Uint8Array(256 * 3);
+  const n = stops.length;
+  for (let i = 0; i < 256; i++) {
+    const t = i / 255;
+    const pos = t * (n - 1);
+    const lo = Math.floor(pos);
+    const hi = Math.min(lo + 1, n - 1);
+    const frac = pos - lo;
+    lut[i * 3] = Math.round(stops[lo][0] * (1 - frac) + stops[hi][0] * frac);
+    lut[i * 3 + 1] = Math.round(stops[lo][1] * (1 - frac) + stops[hi][1] * frac);
+    lut[i * 3 + 2] = Math.round(stops[lo][2] * (1 - frac) + stops[hi][2] * frac);
+  }
+  return lut;
+}
+var VIRIDIS_LUT = new Uint8Array([
+  68,
+  1,
+  84,
+  68,
+  2,
+  86,
+  69,
+  4,
+  87,
+  69,
+  5,
+  89,
+  70,
+  7,
+  90,
+  70,
+  8,
+  92,
+  70,
+  10,
+  93,
+  70,
+  11,
+  94,
+  71,
+  13,
+  96,
+  71,
+  14,
+  97,
+  71,
+  16,
+  99,
+  71,
+  17,
+  100,
+  71,
+  19,
+  101,
+  72,
+  20,
+  103,
+  72,
+  22,
+  104,
+  72,
+  23,
+  105,
+  72,
+  24,
+  106,
+  72,
+  26,
+  108,
+  72,
+  27,
+  109,
+  72,
+  28,
+  110,
+  72,
+  29,
+  111,
+  72,
+  31,
+  112,
+  72,
+  32,
+  113,
+  72,
+  33,
+  115,
+  72,
+  35,
+  116,
+  72,
+  36,
+  117,
+  72,
+  37,
+  118,
+  72,
+  38,
+  119,
+  72,
+  40,
+  120,
+  72,
+  41,
+  121,
+  71,
+  42,
+  122,
+  71,
+  44,
+  122,
+  71,
+  45,
+  123,
+  71,
+  46,
+  124,
+  71,
+  47,
+  125,
+  70,
+  48,
+  126,
+  70,
+  50,
+  126,
+  70,
+  51,
+  127,
+  70,
+  52,
+  128,
+  69,
+  53,
+  129,
+  69,
+  55,
+  129,
+  69,
+  56,
+  130,
+  68,
+  57,
+  131,
+  68,
+  58,
+  131,
+  68,
+  59,
+  132,
+  67,
+  61,
+  132,
+  67,
+  62,
+  133,
+  66,
+  63,
+  133,
+  66,
+  64,
+  134,
+  66,
+  65,
+  134,
+  65,
+  66,
+  135,
+  65,
+  68,
+  135,
+  64,
+  69,
+  136,
+  64,
+  70,
+  136,
+  63,
+  71,
+  136,
+  63,
+  72,
+  137,
+  62,
+  73,
+  137,
+  62,
+  74,
+  137,
+  62,
+  76,
+  138,
+  61,
+  77,
+  138,
+  61,
+  78,
+  138,
+  60,
+  79,
+  138,
+  60,
+  80,
+  139,
+  59,
+  81,
+  139,
+  59,
+  82,
+  139,
+  58,
+  83,
+  139,
+  58,
+  84,
+  140,
+  57,
+  85,
+  140,
+  57,
+  86,
+  140,
+  56,
+  88,
+  140,
+  56,
+  89,
+  140,
+  55,
+  90,
+  140,
+  55,
+  91,
+  141,
+  54,
+  92,
+  141,
+  54,
+  93,
+  141,
+  53,
+  94,
+  141,
+  53,
+  95,
+  141,
+  52,
+  96,
+  141,
+  52,
+  97,
+  141,
+  51,
+  98,
+  141,
+  51,
+  99,
+  141,
+  50,
+  100,
+  142,
+  50,
+  101,
+  142,
+  49,
+  102,
+  142,
+  49,
+  103,
+  142,
+  49,
+  104,
+  142,
+  48,
+  105,
+  142,
+  48,
+  106,
+  142,
+  47,
+  107,
+  142,
+  47,
+  108,
+  142,
+  46,
+  109,
+  142,
+  46,
+  110,
+  142,
+  46,
+  111,
+  142,
+  45,
+  112,
+  142,
+  45,
+  113,
+  142,
+  44,
+  113,
+  142,
+  44,
+  114,
+  142,
+  44,
+  115,
+  142,
+  43,
+  116,
+  142,
+  43,
+  117,
+  142,
+  42,
+  118,
+  142,
+  42,
+  119,
+  142,
+  42,
+  120,
+  142,
+  41,
+  121,
+  142,
+  41,
+  122,
+  142,
+  41,
+  123,
+  142,
+  40,
+  124,
+  142,
+  40,
+  125,
+  142,
+  39,
+  126,
+  142,
+  39,
+  127,
+  142,
+  39,
+  128,
+  142,
+  38,
+  129,
+  142,
+  38,
+  130,
+  142,
+  38,
+  130,
+  142,
+  37,
+  131,
+  142,
+  37,
+  132,
+  142,
+  37,
+  133,
+  142,
+  36,
+  134,
+  142,
+  36,
+  135,
+  142,
+  35,
+  136,
+  142,
+  35,
+  137,
+  142,
+  35,
+  138,
+  141,
+  34,
+  139,
+  141,
+  34,
+  140,
+  141,
+  34,
+  141,
+  141,
+  33,
+  142,
+  141,
+  33,
+  143,
+  141,
+  33,
+  144,
+  141,
+  33,
+  145,
+  140,
+  32,
+  146,
+  140,
+  32,
+  146,
+  140,
+  32,
+  147,
+  140,
+  31,
+  148,
+  140,
+  31,
+  149,
+  139,
+  31,
+  150,
+  139,
+  31,
+  151,
+  139,
+  31,
+  152,
+  139,
+  31,
+  153,
+  138,
+  31,
+  154,
+  138,
+  30,
+  155,
+  138,
+  30,
+  156,
+  137,
+  30,
+  157,
+  137,
+  31,
+  158,
+  137,
+  31,
+  159,
+  136,
+  31,
+  160,
+  136,
+  31,
+  161,
+  136,
+  31,
+  161,
+  135,
+  31,
+  162,
+  135,
+  32,
+  163,
+  134,
+  32,
+  164,
+  134,
+  33,
+  165,
+  133,
+  33,
+  166,
+  133,
+  34,
+  167,
+  133,
+  34,
+  168,
+  132,
+  35,
+  169,
+  131,
+  36,
+  170,
+  131,
+  37,
+  171,
+  130,
+  37,
+  172,
+  130,
+  38,
+  173,
+  129,
+  39,
+  173,
+  129,
+  40,
+  174,
+  128,
+  41,
+  175,
+  127,
+  42,
+  176,
+  127,
+  44,
+  177,
+  126,
+  45,
+  178,
+  125,
+  46,
+  179,
+  124,
+  47,
+  180,
+  124,
+  49,
+  181,
+  123,
+  50,
+  182,
+  122,
+  52,
+  182,
+  121,
+  53,
+  183,
+  121,
+  55,
+  184,
+  120,
+  56,
+  185,
+  119,
+  58,
+  186,
+  118,
+  59,
+  187,
+  117,
+  61,
+  188,
+  116,
+  63,
+  188,
+  115,
+  64,
+  189,
+  114,
+  66,
+  190,
+  113,
+  68,
+  191,
+  112,
+  70,
+  192,
+  111,
+  72,
+  193,
+  110,
+  74,
+  193,
+  109,
+  76,
+  194,
+  108,
+  78,
+  195,
+  107,
+  80,
+  196,
+  106,
+  82,
+  197,
+  105,
+  84,
+  197,
+  104,
+  86,
+  198,
+  103,
+  88,
+  199,
+  101,
+  90,
+  200,
+  100,
+  92,
+  200,
+  99,
+  94,
+  201,
+  98,
+  96,
+  202,
+  96,
+  99,
+  203,
+  95,
+  101,
+  203,
+  94,
+  103,
+  204,
+  92,
+  105,
+  205,
+  91,
+  108,
+  205,
+  90,
+  110,
+  206,
+  88,
+  112,
+  207,
+  87,
+  115,
+  208,
+  86,
+  117,
+  208,
+  84,
+  119,
+  209,
+  83,
+  122,
+  209,
+  81,
+  124,
+  210,
+  80,
+  127,
+  211,
+  78,
+  129,
+  211,
+  77,
+  132,
+  212,
+  75,
+  134,
+  213,
+  73,
+  137,
+  213,
+  72,
+  139,
+  214,
+  70,
+  142,
+  214,
+  69,
+  144,
+  215,
+  67,
+  147,
+  215,
+  65,
+  149,
+  216,
+  64,
+  152,
+  216,
+  62,
+  155,
+  217,
+  60,
+  157,
+  217,
+  59,
+  160,
+  218,
+  57,
+  162,
+  218,
+  55,
+  165,
+  219,
+  54,
+  168,
+  219,
+  52,
+  170,
+  220,
+  50,
+  173,
+  220,
+  48,
+  176,
+  221,
+  47,
+  178,
+  221,
+  45,
+  181,
+  222,
+  43,
+  184,
+  222,
+  41,
+  186,
+  222,
+  40,
+  189,
+  223,
+  38,
+  192,
+  223,
+  37,
+  194,
+  223,
+  35,
+  197,
+  224,
+  33,
+  200,
+  224,
+  32,
+  202,
+  225,
+  31,
+  205,
+  225,
+  29,
+  208,
+  225,
+  28,
+  210,
+  226,
+  27,
+  213,
+  226,
+  26,
+  216,
+  226,
+  25,
+  218,
+  227,
+  25,
+  221,
+  227,
+  24,
+  223,
+  227,
+  24,
+  226,
+  228,
+  24,
+  229,
+  228,
+  25,
+  231,
+  228,
+  25,
+  234,
+  229,
+  26,
+  236,
+  229,
+  27,
+  239,
+  229,
+  28,
+  241,
+  229,
+  29,
+  244,
+  230,
+  30,
+  246,
+  230,
+  32,
+  248,
+  230,
+  33,
+  251,
+  231,
+  35,
+  253,
+  231,
+  37
+]);
+var MAGMA_LUT = new Uint8Array([
+  0,
+  0,
+  4,
+  1,
+  0,
+  5,
+  1,
+  1,
+  6,
+  1,
+  1,
+  8,
+  2,
+  1,
+  9,
+  2,
+  2,
+  11,
+  2,
+  2,
+  13,
+  3,
+  3,
+  15,
+  3,
+  3,
+  18,
+  4,
+  4,
+  20,
+  5,
+  4,
+  22,
+  6,
+  5,
+  24,
+  6,
+  5,
+  26,
+  7,
+  6,
+  28,
+  8,
+  7,
+  30,
+  9,
+  7,
+  32,
+  10,
+  8,
+  34,
+  11,
+  9,
+  36,
+  12,
+  9,
+  38,
+  13,
+  10,
+  41,
+  14,
+  11,
+  43,
+  16,
+  11,
+  45,
+  17,
+  12,
+  47,
+  18,
+  13,
+  49,
+  19,
+  13,
+  52,
+  20,
+  14,
+  54,
+  21,
+  14,
+  56,
+  22,
+  15,
+  59,
+  24,
+  15,
+  61,
+  25,
+  16,
+  63,
+  26,
+  16,
+  66,
+  28,
+  16,
+  68,
+  29,
+  17,
+  71,
+  30,
+  17,
+  73,
+  32,
+  17,
+  75,
+  33,
+  17,
+  78,
+  34,
+  17,
+  80,
+  36,
+  18,
+  83,
+  37,
+  18,
+  85,
+  39,
+  18,
+  88,
+  41,
+  17,
+  90,
+  42,
+  17,
+  92,
+  44,
+  17,
+  95,
+  45,
+  17,
+  97,
+  47,
+  17,
+  99,
+  49,
+  17,
+  101,
+  51,
+  16,
+  103,
+  52,
+  16,
+  105,
+  54,
+  16,
+  107,
+  56,
+  16,
+  108,
+  57,
+  15,
+  110,
+  59,
+  15,
+  112,
+  61,
+  15,
+  113,
+  63,
+  15,
+  114,
+  64,
+  15,
+  116,
+  66,
+  15,
+  117,
+  68,
+  15,
+  118,
+  69,
+  16,
+  119,
+  71,
+  16,
+  120,
+  73,
+  16,
+  120,
+  74,
+  16,
+  121,
+  76,
+  17,
+  122,
+  78,
+  17,
+  123,
+  79,
+  18,
+  123,
+  81,
+  18,
+  124,
+  82,
+  19,
+  124,
+  84,
+  19,
+  125,
+  86,
+  20,
+  125,
+  87,
+  21,
+  126,
+  89,
+  21,
+  126,
+  90,
+  22,
+  126,
+  92,
+  22,
+  127,
+  93,
+  23,
+  127,
+  95,
+  24,
+  127,
+  96,
+  24,
+  128,
+  98,
+  25,
+  128,
+  100,
+  26,
+  128,
+  101,
+  26,
+  128,
+  103,
+  27,
+  128,
+  104,
+  28,
+  129,
+  106,
+  28,
+  129,
+  107,
+  29,
+  129,
+  109,
+  29,
+  129,
+  110,
+  30,
+  129,
+  112,
+  31,
+  129,
+  114,
+  31,
+  129,
+  115,
+  32,
+  129,
+  117,
+  33,
+  129,
+  118,
+  33,
+  129,
+  120,
+  34,
+  129,
+  121,
+  34,
+  130,
+  123,
+  35,
+  130,
+  124,
+  35,
+  130,
+  126,
+  36,
+  130,
+  128,
+  37,
+  130,
+  129,
+  37,
+  129,
+  131,
+  38,
+  129,
+  132,
+  38,
+  129,
+  134,
+  39,
+  129,
+  136,
+  39,
+  129,
+  137,
+  40,
+  129,
+  139,
+  41,
+  129,
+  140,
+  41,
+  129,
+  142,
+  42,
+  129,
+  144,
+  42,
+  129,
+  145,
+  43,
+  129,
+  147,
+  43,
+  128,
+  148,
+  44,
+  128,
+  150,
+  44,
+  128,
+  152,
+  45,
+  128,
+  153,
+  45,
+  128,
+  155,
+  46,
+  127,
+  156,
+  46,
+  127,
+  158,
+  47,
+  127,
+  160,
+  47,
+  127,
+  161,
+  48,
+  126,
+  163,
+  48,
+  126,
+  165,
+  49,
+  126,
+  166,
+  49,
+  125,
+  168,
+  50,
+  125,
+  170,
+  51,
+  125,
+  171,
+  51,
+  124,
+  173,
+  52,
+  124,
+  174,
+  52,
+  123,
+  176,
+  53,
+  123,
+  178,
+  53,
+  123,
+  179,
+  54,
+  122,
+  181,
+  54,
+  122,
+  183,
+  55,
+  121,
+  184,
+  55,
+  121,
+  186,
+  56,
+  120,
+  188,
+  57,
+  120,
+  189,
+  57,
+  119,
+  191,
+  58,
+  119,
+  192,
+  58,
+  118,
+  194,
+  59,
+  117,
+  196,
+  60,
+  117,
+  197,
+  60,
+  116,
+  199,
+  61,
+  115,
+  200,
+  62,
+  115,
+  202,
+  62,
+  114,
+  204,
+  63,
+  113,
+  205,
+  64,
+  113,
+  207,
+  64,
+  112,
+  208,
+  65,
+  111,
+  210,
+  66,
+  111,
+  211,
+  67,
+  110,
+  213,
+  68,
+  109,
+  214,
+  69,
+  108,
+  216,
+  69,
+  108,
+  217,
+  70,
+  107,
+  219,
+  71,
+  106,
+  220,
+  72,
+  105,
+  222,
+  73,
+  104,
+  223,
+  74,
+  104,
+  224,
+  76,
+  103,
+  226,
+  77,
+  102,
+  227,
+  78,
+  101,
+  228,
+  79,
+  100,
+  229,
+  80,
+  100,
+  231,
+  82,
+  99,
+  232,
+  83,
+  98,
+  233,
+  84,
+  98,
+  234,
+  86,
+  97,
+  235,
+  87,
+  96,
+  236,
+  88,
+  96,
+  237,
+  90,
+  95,
+  238,
+  91,
+  94,
+  239,
+  93,
+  94,
+  240,
+  95,
+  94,
+  241,
+  96,
+  93,
+  242,
+  98,
+  93,
+  242,
+  100,
+  92,
+  243,
+  101,
+  92,
+  244,
+  103,
+  92,
+  244,
+  105,
+  92,
+  245,
+  107,
+  92,
+  246,
+  108,
+  92,
+  246,
+  110,
+  92,
+  247,
+  112,
+  92,
+  247,
+  114,
+  92,
+  248,
+  116,
+  92,
+  248,
+  118,
+  92,
+  249,
+  120,
+  93,
+  249,
+  121,
+  93,
+  249,
+  123,
+  93,
+  250,
+  125,
+  94,
+  250,
+  127,
+  94,
+  250,
+  129,
+  95,
+  251,
+  131,
+  95,
+  251,
+  133,
+  96,
+  251,
+  135,
+  97,
+  252,
+  137,
+  97,
+  252,
+  138,
+  98,
+  252,
+  140,
+  99,
+  252,
+  142,
+  100,
+  252,
+  144,
+  101,
+  253,
+  146,
+  102,
+  253,
+  148,
+  103,
+  253,
+  150,
+  104,
+  253,
+  152,
+  105,
+  253,
+  154,
+  106,
+  253,
+  155,
+  107,
+  254,
+  157,
+  108,
+  254,
+  159,
+  109,
+  254,
+  161,
+  110,
+  254,
+  163,
+  111,
+  254,
+  165,
+  113,
+  254,
+  167,
+  114,
+  254,
+  169,
+  115,
+  254,
+  170,
+  116,
+  254,
+  172,
+  118,
+  254,
+  174,
+  119,
+  254,
+  176,
+  120,
+  254,
+  178,
+  122,
+  254,
+  180,
+  123,
+  254,
+  182,
+  124,
+  254,
+  183,
+  126,
+  254,
+  185,
+  127,
+  254,
+  187,
+  129,
+  254,
+  189,
+  130,
+  254,
+  191,
+  132,
+  254,
+  193,
+  133,
+  254,
+  194,
+  135,
+  254,
+  196,
+  136,
+  254,
+  198,
+  138,
+  254,
+  200,
+  140,
+  254,
+  202,
+  141,
+  254,
+  204,
+  143,
+  254,
+  205,
+  144,
+  254,
+  207,
+  146,
+  254,
+  209,
+  148,
+  254,
+  211,
+  149,
+  254,
+  213,
+  151,
+  254,
+  215,
+  153,
+  254,
+  216,
+  154,
+  253,
+  218,
+  156,
+  253,
+  220,
+  158,
+  253,
+  222,
+  160,
+  253,
+  224,
+  161,
+  253,
+  226,
+  163,
+  253,
+  227,
+  165,
+  253,
+  229,
+  167,
+  253,
+  231,
+  169,
+  253,
+  233,
+  170,
+  253,
+  235,
+  172,
+  252,
+  236,
+  174,
+  252,
+  238,
+  176,
+  252,
+  240,
+  178,
+  252,
+  242,
+  180,
+  252,
+  244,
+  182,
+  252,
+  246,
+  184,
+  252,
+  247,
+  185,
+  252,
+  249,
+  187,
+  252,
+  251,
+  189,
+  252,
+  253,
+  191
+]);
+var INFERNO_LUT = new Uint8Array([
+  0,
+  0,
+  4,
+  1,
+  0,
+  5,
+  1,
+  1,
+  6,
+  1,
+  1,
+  8,
+  2,
+  1,
+  10,
+  2,
+  2,
+  12,
+  2,
+  2,
+  14,
+  3,
+  2,
+  16,
+  4,
+  3,
+  18,
+  4,
+  3,
+  20,
+  5,
+  4,
+  23,
+  6,
+  4,
+  25,
+  7,
+  5,
+  27,
+  8,
+  5,
+  29,
+  9,
+  6,
+  31,
+  10,
+  7,
+  34,
+  11,
+  7,
+  36,
+  12,
+  8,
+  38,
+  13,
+  8,
+  41,
+  14,
+  9,
+  43,
+  16,
+  9,
+  45,
+  17,
+  10,
+  48,
+  18,
+  10,
+  50,
+  20,
+  11,
+  52,
+  21,
+  11,
+  55,
+  22,
+  11,
+  57,
+  24,
+  12,
+  60,
+  25,
+  12,
+  62,
+  27,
+  12,
+  65,
+  28,
+  12,
+  67,
+  30,
+  12,
+  69,
+  31,
+  12,
+  72,
+  33,
+  12,
+  74,
+  35,
+  12,
+  76,
+  36,
+  12,
+  79,
+  38,
+  12,
+  81,
+  40,
+  11,
+  83,
+  41,
+  11,
+  85,
+  43,
+  11,
+  87,
+  45,
+  11,
+  89,
+  47,
+  10,
+  91,
+  49,
+  10,
+  92,
+  50,
+  10,
+  94,
+  52,
+  10,
+  95,
+  54,
+  9,
+  97,
+  56,
+  9,
+  98,
+  57,
+  9,
+  99,
+  59,
+  9,
+  100,
+  61,
+  9,
+  101,
+  62,
+  9,
+  102,
+  64,
+  10,
+  103,
+  66,
+  10,
+  104,
+  68,
+  10,
+  104,
+  69,
+  10,
+  105,
+  71,
+  11,
+  106,
+  73,
+  11,
+  106,
+  74,
+  12,
+  107,
+  76,
+  12,
+  107,
+  77,
+  13,
+  108,
+  79,
+  13,
+  108,
+  81,
+  14,
+  108,
+  82,
+  14,
+  109,
+  84,
+  15,
+  109,
+  85,
+  15,
+  109,
+  87,
+  16,
+  110,
+  89,
+  16,
+  110,
+  90,
+  17,
+  110,
+  92,
+  18,
+  110,
+  93,
+  18,
+  110,
+  95,
+  19,
+  110,
+  97,
+  19,
+  110,
+  98,
+  20,
+  110,
+  100,
+  21,
+  110,
+  101,
+  21,
+  110,
+  103,
+  22,
+  110,
+  105,
+  22,
+  110,
+  106,
+  23,
+  110,
+  108,
+  24,
+  110,
+  109,
+  24,
+  110,
+  111,
+  25,
+  110,
+  113,
+  25,
+  110,
+  114,
+  26,
+  110,
+  116,
+  26,
+  110,
+  117,
+  27,
+  110,
+  119,
+  28,
+  109,
+  120,
+  28,
+  109,
+  122,
+  29,
+  109,
+  124,
+  29,
+  109,
+  125,
+  30,
+  109,
+  127,
+  30,
+  108,
+  128,
+  31,
+  108,
+  130,
+  32,
+  108,
+  132,
+  32,
+  107,
+  133,
+  33,
+  107,
+  135,
+  33,
+  107,
+  136,
+  34,
+  106,
+  138,
+  34,
+  106,
+  140,
+  35,
+  105,
+  141,
+  35,
+  105,
+  143,
+  36,
+  105,
+  144,
+  37,
+  104,
+  146,
+  37,
+  104,
+  147,
+  38,
+  103,
+  149,
+  38,
+  103,
+  151,
+  39,
+  102,
+  152,
+  39,
+  102,
+  154,
+  40,
+  101,
+  155,
+  41,
+  100,
+  157,
+  41,
+  100,
+  159,
+  42,
+  99,
+  160,
+  42,
+  99,
+  162,
+  43,
+  98,
+  163,
+  44,
+  97,
+  165,
+  44,
+  96,
+  166,
+  45,
+  96,
+  168,
+  46,
+  95,
+  169,
+  46,
+  94,
+  171,
+  47,
+  94,
+  173,
+  48,
+  93,
+  174,
+  48,
+  92,
+  176,
+  49,
+  91,
+  177,
+  50,
+  90,
+  179,
+  50,
+  90,
+  180,
+  51,
+  89,
+  182,
+  52,
+  88,
+  183,
+  53,
+  87,
+  185,
+  53,
+  86,
+  186,
+  54,
+  85,
+  188,
+  55,
+  84,
+  189,
+  56,
+  83,
+  191,
+  57,
+  82,
+  192,
+  58,
+  81,
+  193,
+  58,
+  80,
+  195,
+  59,
+  79,
+  196,
+  60,
+  78,
+  198,
+  61,
+  77,
+  199,
+  62,
+  76,
+  200,
+  63,
+  75,
+  202,
+  64,
+  74,
+  203,
+  65,
+  73,
+  204,
+  66,
+  72,
+  206,
+  67,
+  71,
+  207,
+  68,
+  70,
+  208,
+  69,
+  69,
+  210,
+  70,
+  68,
+  211,
+  71,
+  67,
+  212,
+  72,
+  66,
+  213,
+  74,
+  65,
+  215,
+  75,
+  63,
+  216,
+  76,
+  62,
+  217,
+  77,
+  61,
+  218,
+  78,
+  60,
+  219,
+  80,
+  59,
+  221,
+  81,
+  58,
+  222,
+  82,
+  56,
+  223,
+  83,
+  55,
+  224,
+  85,
+  54,
+  225,
+  86,
+  53,
+  226,
+  87,
+  52,
+  227,
+  89,
+  51,
+  228,
+  90,
+  49,
+  229,
+  92,
+  48,
+  230,
+  93,
+  47,
+  231,
+  94,
+  46,
+  232,
+  96,
+  45,
+  233,
+  97,
+  43,
+  234,
+  99,
+  42,
+  235,
+  100,
+  41,
+  235,
+  102,
+  40,
+  236,
+  103,
+  38,
+  237,
+  105,
+  37,
+  238,
+  106,
+  36,
+  239,
+  108,
+  35,
+  239,
+  110,
+  33,
+  240,
+  111,
+  32,
+  241,
+  113,
+  31,
+  241,
+  115,
+  29,
+  242,
+  116,
+  28,
+  243,
+  118,
+  27,
+  243,
+  120,
+  25,
+  244,
+  121,
+  24,
+  245,
+  123,
+  23,
+  245,
+  125,
+  21,
+  246,
+  126,
+  20,
+  246,
+  128,
+  19,
+  247,
+  130,
+  18,
+  247,
+  132,
+  16,
+  248,
+  133,
+  15,
+  248,
+  135,
+  14,
+  248,
+  137,
+  12,
+  249,
+  139,
+  11,
+  249,
+  140,
+  10,
+  249,
+  142,
+  9,
+  250,
+  144,
+  8,
+  250,
+  146,
+  7,
+  250,
+  148,
+  7,
+  251,
+  150,
+  6,
+  251,
+  151,
+  6,
+  251,
+  153,
+  6,
+  251,
+  155,
+  6,
+  251,
+  157,
+  7,
+  252,
+  159,
+  7,
+  252,
+  161,
+  8,
+  252,
+  163,
+  9,
+  252,
+  165,
+  10,
+  252,
+  166,
+  12,
+  252,
+  168,
+  13,
+  252,
+  170,
+  15,
+  252,
+  172,
+  17,
+  252,
+  174,
+  18,
+  252,
+  176,
+  20,
+  252,
+  178,
+  22,
+  252,
+  180,
+  24,
+  251,
+  182,
+  26,
+  251,
+  184,
+  29,
+  251,
+  186,
+  31,
+  251,
+  188,
+  33,
+  251,
+  190,
+  35,
+  250,
+  192,
+  38,
+  250,
+  194,
+  40,
+  250,
+  196,
+  42,
+  250,
+  198,
+  45,
+  249,
+  199,
+  47,
+  249,
+  201,
+  50,
+  249,
+  203,
+  53,
+  248,
+  205,
+  55,
+  248,
+  207,
+  58,
+  247,
+  209,
+  61,
+  247,
+  211,
+  64,
+  246,
+  213,
+  67,
+  246,
+  215,
+  70,
+  245,
+  217,
+  73,
+  245,
+  219,
+  76,
+  244,
+  221,
+  79,
+  244,
+  223,
+  83,
+  244,
+  225,
+  86,
+  243,
+  227,
+  90,
+  243,
+  229,
+  93,
+  242,
+  230,
+  97,
+  242,
+  232,
+  101,
+  242,
+  234,
+  105,
+  241,
+  236,
+  109,
+  241,
+  237,
+  113,
+  241,
+  239,
+  117,
+  241,
+  241,
+  121,
+  242,
+  242,
+  125,
+  242,
+  244,
+  130,
+  243,
+  245,
+  134,
+  243,
+  246,
+  138,
+  244,
+  248,
+  142,
+  245,
+  249,
+  146,
+  246,
+  250,
+  150,
+  248,
+  251,
+  154,
+  249,
+  252,
+  157,
+  250,
+  253,
+  161,
+  252,
+  255,
+  164
+]);
+var ROSEUS_LUT = new Uint8Array([
+  1,
+  1,
+  1,
+  1,
+  2,
+  2,
+  2,
+  2,
+  2,
+  2,
+  3,
+  3,
+  2,
+  3,
+  4,
+  2,
+  4,
+  5,
+  2,
+  5,
+  6,
+  3,
+  6,
+  7,
+  3,
+  7,
+  8,
+  3,
+  8,
+  10,
+  3,
+  9,
+  12,
+  3,
+  10,
+  14,
+  3,
+  12,
+  16,
+  3,
+  13,
+  17,
+  3,
+  14,
+  19,
+  2,
+  15,
+  21,
+  2,
+  16,
+  23,
+  2,
+  17,
+  25,
+  2,
+  18,
+  27,
+  2,
+  19,
+  30,
+  1,
+  20,
+  32,
+  1,
+  21,
+  34,
+  1,
+  22,
+  36,
+  1,
+  23,
+  38,
+  1,
+  24,
+  40,
+  0,
+  25,
+  43,
+  0,
+  26,
+  45,
+  0,
+  27,
+  47,
+  0,
+  27,
+  50,
+  0,
+  28,
+  52,
+  0,
+  29,
+  54,
+  0,
+  30,
+  57,
+  0,
+  30,
+  59,
+  1,
+  31,
+  62,
+  1,
+  32,
+  64,
+  1,
+  32,
+  67,
+  2,
+  33,
+  69,
+  3,
+  33,
+  72,
+  4,
+  34,
+  74,
+  5,
+  35,
+  77,
+  6,
+  35,
+  79,
+  8,
+  35,
+  82,
+  9,
+  36,
+  84,
+  11,
+  36,
+  86,
+  13,
+  37,
+  89,
+  15,
+  37,
+  91,
+  17,
+  37,
+  94,
+  19,
+  37,
+  96,
+  21,
+  38,
+  99,
+  23,
+  38,
+  101,
+  25,
+  38,
+  104,
+  27,
+  38,
+  106,
+  29,
+  38,
+  108,
+  31,
+  38,
+  111,
+  33,
+  38,
+  113,
+  35,
+  38,
+  115,
+  38,
+  38,
+  118,
+  40,
+  38,
+  120,
+  42,
+  38,
+  122,
+  44,
+  38,
+  124,
+  46,
+  38,
+  126,
+  49,
+  38,
+  128,
+  51,
+  38,
+  130,
+  53,
+  37,
+  132,
+  55,
+  37,
+  134,
+  58,
+  37,
+  136,
+  60,
+  36,
+  138,
+  62,
+  36,
+  139,
+  65,
+  36,
+  141,
+  67,
+  35,
+  143,
+  69,
+  35,
+  144,
+  72,
+  35,
+  146,
+  74,
+  34,
+  147,
+  76,
+  34,
+  149,
+  79,
+  33,
+  150,
+  81,
+  33,
+  151,
+  84,
+  32,
+  152,
+  86,
+  32,
+  153,
+  88,
+  31,
+  154,
+  91,
+  31,
+  155,
+  93,
+  30,
+  156,
+  95,
+  29,
+  157,
+  98,
+  29,
+  158,
+  100,
+  28,
+  159,
+  103,
+  28,
+  159,
+  105,
+  27,
+  160,
+  107,
+  27,
+  160,
+  110,
+  26,
+  161,
+  112,
+  26,
+  161,
+  114,
+  25,
+  161,
+  117,
+  25,
+  162,
+  119,
+  24,
+  162,
+  121,
+  24,
+  162,
+  124,
+  23,
+  162,
+  126,
+  23,
+  162,
+  128,
+  23,
+  162,
+  131,
+  22,
+  161,
+  133,
+  22,
+  161,
+  135,
+  22,
+  161,
+  137,
+  22,
+  161,
+  140,
+  22,
+  160,
+  142,
+  22,
+  160,
+  144,
+  22,
+  159,
+  146,
+  22,
+  159,
+  148,
+  22,
+  158,
+  150,
+  22,
+  157,
+  153,
+  22,
+  157,
+  155,
+  23,
+  156,
+  157,
+  23,
+  155,
+  159,
+  23,
+  154,
+  161,
+  24,
+  153,
+  163,
+  24,
+  152,
+  165,
+  25,
+  151,
+  167,
+  26,
+  150,
+  169,
+  26,
+  149,
+  171,
+  27,
+  148,
+  173,
+  28,
+  147,
+  175,
+  29,
+  146,
+  177,
+  29,
+  145,
+  179,
+  30,
+  144,
+  181,
+  31,
+  142,
+  183,
+  32,
+  141,
+  184,
+  33,
+  140,
+  186,
+  34,
+  139,
+  188,
+  35,
+  137,
+  190,
+  36,
+  136,
+  192,
+  37,
+  135,
+  193,
+  39,
+  133,
+  195,
+  40,
+  132,
+  197,
+  41,
+  130,
+  198,
+  42,
+  129,
+  200,
+  43,
+  128,
+  202,
+  45,
+  126,
+  203,
+  46,
+  125,
+  205,
+  47,
+  123,
+  206,
+  48,
+  122,
+  208,
+  50,
+  120,
+  209,
+  51,
+  119,
+  211,
+  52,
+  117,
+  212,
+  54,
+  116,
+  214,
+  55,
+  114,
+  215,
+  57,
+  113,
+  217,
+  58,
+  111,
+  218,
+  60,
+  110,
+  219,
+  61,
+  109,
+  221,
+  63,
+  107,
+  222,
+  64,
+  106,
+  223,
+  66,
+  104,
+  225,
+  67,
+  103,
+  226,
+  69,
+  101,
+  227,
+  70,
+  100,
+  228,
+  72,
+  99,
+  229,
+  73,
+  97,
+  230,
+  75,
+  96,
+  231,
+  77,
+  94,
+  233,
+  78,
+  93,
+  234,
+  80,
+  92,
+  235,
+  82,
+  91,
+  236,
+  83,
+  89,
+  237,
+  85,
+  88,
+  237,
+  87,
+  87,
+  238,
+  89,
+  86,
+  239,
+  90,
+  84,
+  240,
+  92,
+  83,
+  241,
+  94,
+  82,
+  242,
+  96,
+  81,
+  242,
+  97,
+  80,
+  243,
+  99,
+  79,
+  244,
+  101,
+  78,
+  245,
+  103,
+  77,
+  245,
+  105,
+  76,
+  246,
+  107,
+  75,
+  246,
+  108,
+  74,
+  247,
+  110,
+  74,
+  248,
+  112,
+  73,
+  248,
+  114,
+  72,
+  248,
+  116,
+  72,
+  249,
+  118,
+  71,
+  249,
+  120,
+  71,
+  250,
+  122,
+  70,
+  250,
+  124,
+  70,
+  250,
+  126,
+  70,
+  251,
+  128,
+  70,
+  251,
+  130,
+  69,
+  251,
+  132,
+  70,
+  251,
+  134,
+  70,
+  251,
+  136,
+  70,
+  252,
+  138,
+  70,
+  252,
+  140,
+  70,
+  252,
+  142,
+  71,
+  252,
+  144,
+  72,
+  252,
+  146,
+  72,
+  252,
+  148,
+  73,
+  252,
+  150,
+  74,
+  251,
+  152,
+  75,
+  251,
+  154,
+  76,
+  251,
+  156,
+  77,
+  251,
+  158,
+  78,
+  251,
+  160,
+  80,
+  251,
+  162,
+  81,
+  250,
+  164,
+  83,
+  250,
+  166,
+  85,
+  250,
+  168,
+  87,
+  249,
+  170,
+  88,
+  249,
+  172,
+  90,
+  248,
+  174,
+  93,
+  248,
+  176,
+  95,
+  248,
+  178,
+  97,
+  247,
+  180,
+  99,
+  247,
+  182,
+  102,
+  246,
+  184,
+  104,
+  246,
+  186,
+  107,
+  245,
+  188,
+  110,
+  244,
+  190,
+  112,
+  244,
+  192,
+  115,
+  243,
+  194,
+  118,
+  243,
+  195,
+  121,
+  242,
+  197,
+  124,
+  242,
+  199,
+  127,
+  241,
+  201,
+  131,
+  240,
+  203,
+  134,
+  240,
+  205,
+  137,
+  239,
+  207,
+  140,
+  239,
+  208,
+  144,
+  238,
+  210,
+  147,
+  238,
+  212,
+  151,
+  237,
+  213,
+  154,
+  237,
+  215,
+  158,
+  236,
+  217,
+  161,
+  236,
+  218,
+  165,
+  236,
+  220,
+  169,
+  236,
+  222,
+  172,
+  235,
+  223,
+  176,
+  235,
+  225,
+  180,
+  235,
+  226,
+  183,
+  235,
+  228,
+  187,
+  235,
+  229,
+  191,
+  235,
+  230,
+  194,
+  236,
+  232,
+  198,
+  236,
+  233,
+  201,
+  236,
+  234,
+  205,
+  237,
+  236,
+  208,
+  237,
+  237,
+  212,
+  238,
+  238,
+  215,
+  239,
+  239,
+  219,
+  240,
+  240,
+  222,
+  241,
+  242,
+  225,
+  242,
+  243,
+  228,
+  243,
+  244,
+  231,
+  244,
+  245,
+  234,
+  246,
+  246,
+  237,
+  247,
+  247,
+  240,
+  249,
+  248,
+  242,
+  251,
+  249,
+  245,
+  253,
+  250,
+  247,
+  254,
+  251,
+  249
+]);
+var lutCache = /* @__PURE__ */ new Map();
+function grayscaleLUT() {
+  let lut = lutCache.get("grayscale");
+  if (!lut) {
+    lut = new Uint8Array(256 * 3);
+    for (let i = 0; i < 256; i++) {
+      lut[i * 3] = lut[i * 3 + 1] = lut[i * 3 + 2] = i;
+    }
+    lutCache.set("grayscale", lut);
+  }
+  return lut;
+}
+function igrayLUT() {
+  let lut = lutCache.get("igray");
+  if (!lut) {
+    lut = new Uint8Array(256 * 3);
+    for (let i = 0; i < 256; i++) {
+      const v = 255 - i;
+      lut[i * 3] = lut[i * 3 + 1] = lut[i * 3 + 2] = v;
+    }
+    lutCache.set("igray", lut);
+  }
+  return lut;
+}
+function getColorMap(value) {
+  if (Array.isArray(value)) {
+    return interpolateLUT(value);
+  }
+  switch (value) {
+    case "viridis":
+      return VIRIDIS_LUT;
+    case "magma":
+      return MAGMA_LUT;
+    case "inferno":
+      return INFERNO_LUT;
+    case "roseus":
+      return ROSEUS_LUT;
+    case "grayscale":
+      return grayscaleLUT();
+    case "igray":
+      return igrayLUT();
+    default:
+      return VIRIDIS_LUT;
+  }
+}
+
+// src/computation/frequencyScales.ts
+function linearScale(f, minF, maxF) {
+  if (maxF === minF) return 0;
+  return (f - minF) / (maxF - minF);
+}
+function logarithmicScale(f, minF, maxF) {
+  const logMin = Math.log2(Math.max(minF, 1));
+  const logMax = Math.log2(maxF);
+  if (logMax === logMin) return 0;
+  return (Math.log2(Math.max(f, 1)) - logMin) / (logMax - logMin);
+}
+function hzToMel(f) {
+  return 2595 * Math.log10(1 + f / 700);
+}
+function melScale(f, minF, maxF) {
+  const melMin = hzToMel(minF);
+  const melMax = hzToMel(maxF);
+  if (melMax === melMin) return 0;
+  return (hzToMel(f) - melMin) / (melMax - melMin);
+}
+function hzToBark(f) {
+  return 13 * Math.atan(76e-5 * f) + 3.5 * Math.atan((f / 7500) ** 2);
+}
+function barkScale(f, minF, maxF) {
+  const barkMin = hzToBark(minF);
+  const barkMax = hzToBark(maxF);
+  if (barkMax === barkMin) return 0;
+  return (hzToBark(f) - barkMin) / (barkMax - barkMin);
+}
+function hzToErb(f) {
+  return 21.4 * Math.log10(1 + 437e-5 * f);
+}
+function erbScale(f, minF, maxF) {
+  const erbMin = hzToErb(minF);
+  const erbMax = hzToErb(maxF);
+  if (erbMax === erbMin) return 0;
+  return (hzToErb(f) - erbMin) / (erbMax - erbMin);
+}
+function getFrequencyScale(name) {
+  switch (name) {
+    case "logarithmic":
+      return logarithmicScale;
+    case "mel":
+      return melScale;
+    case "bark":
+      return barkScale;
+    case "erb":
+      return erbScale;
+    case "linear":
+      return linearScale;
+    default:
+      console.warn(`[spectrogram] Unknown frequency scale "${name}", falling back to linear`);
+      return linearScale;
+  }
+}
+
+// src/components/SpectrogramMenuItems.tsx
+import styled from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SectionLabel = styled.div`
+  font-size: 0.65rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  opacity: 0.5;
+  margin-bottom: 0.25rem;
+`;
+var RadioLabel = styled.label`
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.2rem 0;
+  font-size: 0.8rem;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.8;
+  }
+`;
+var SettingsButton = styled.button`
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  font-size: 0.8rem;
+  padding: 0.35rem 0.75rem;
+  width: 100%;
+  text-align: left;
+
+  &:hover {
+    background: rgba(128, 128, 128, 0.15);
+  }
+`;
+var DropdownSection = styled.div`
+  padding: 0.25rem 0.75rem;
+`;
+var RENDER_MODES = [
+  { value: "waveform", label: "Waveform" },
+  { value: "spectrogram", label: "Spectrogram" },
+  { value: "both", label: "Both" }
+];
+function SpectrogramMenuItems({
+  renderMode,
+  onRenderModeChange,
+  onOpenSettings,
+  onClose
+}) {
+  return [
+    {
+      id: "spectrogram-display",
+      label: "Display",
+      content: /* @__PURE__ */ jsxs(DropdownSection, { children: [
+        /* @__PURE__ */ jsx(SectionLabel, { children: "Display" }),
+        RENDER_MODES.map(({ value, label }) => /* @__PURE__ */ jsxs(RadioLabel, { children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "radio",
+              name: "render-mode",
+              checked: renderMode === value,
+              onChange: () => {
+                onRenderModeChange(value);
+                onClose?.();
+              }
+            }
+          ),
+          label
+        ] }, value))
+      ] })
+    },
+    {
+      id: "spectrogram-settings",
+      content: /* @__PURE__ */ jsx(
+        SettingsButton,
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            onClose?.();
+            onOpenSettings();
+          },
+          onMouseDown: (e) => e.stopPropagation(),
+          children: "Spectrogram Settings..."
+        }
+      )
+    }
+  ];
+}
+
+// src/components/SpectrogramSettingsModal.tsx
+import { useRef, useEffect, useState } from "react";
+import styled2 from "styled-components";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var StyledDialog = styled2.dialog`
+  border: 1px solid rgba(128, 128, 128, 0.4);
+  border-radius: 8px;
+  padding: 1.5rem;
+  background: ${(p) => p.theme.timescaleBackgroundColor ?? "#222"};
+  color: ${(p) => p.theme.textColor ?? "inherit"};
+  min-width: 380px;
+  max-width: 500px;
+
+  &::backdrop {
+    background: rgba(0, 0, 0, 0.5);
+  }
+`;
+var Title = styled2.h3`
+  margin: 0 0 1rem;
+  font-size: 1rem;
+`;
+var FormGrid = styled2.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+`;
+var Field = styled2.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  grid-column: ${(p) => p.$span ? "1 / -1" : "auto"};
+`;
+var Label = styled2.label`
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  opacity: 0.6;
+`;
+var Select = styled2.select`
+  padding: 0.3rem 0.4rem;
+  border: 1px solid rgba(128, 128, 128, 0.4);
+  border-radius: 4px;
+  background: rgba(128, 128, 128, 0.15);
+  color: inherit;
+  font-size: 0.85rem;
+`;
+var NumberInput = styled2.input`
+  padding: 0.3rem 0.4rem;
+  border: 1px solid rgba(128, 128, 128, 0.4);
+  border-radius: 4px;
+  background: rgba(128, 128, 128, 0.15);
+  color: inherit;
+  font-size: 0.85rem;
+  width: 100%;
+  box-sizing: border-box;
+`;
+var RangeRow = styled2.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+`;
+var RangeValue = styled2.span`
+  font-size: 0.75rem;
+  font-family: monospace;
+  opacity: 0.6;
+  min-width: 3ch;
+  text-align: right;
+`;
+var CheckboxLabel = styled2.label`
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.85rem;
+  cursor: pointer;
+`;
+var ButtonRow = styled2.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 1.25rem;
+`;
+var ModalButton = styled2.button`
+  padding: 0.4rem 1rem;
+  border: 1px solid rgba(128, 128, 128, 0.4);
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.85rem;
+  background: ${(p) => p.$primary ? "var(--ifm-color-primary, #4a9)" : "transparent"};
+  color: ${(p) => p.$primary ? "#fff" : "inherit"};
+
+  &:hover {
+    opacity: 0.85;
+  }
+`;
+var FFT_SIZES = [256, 512, 1024, 2048, 4096, 8192];
+var WINDOW_FUNCTIONS = ["hann", "hamming", "blackman", "blackman-harris", "bartlett", "rectangular"];
+var FREQ_SCALES = ["linear", "logarithmic", "mel", "bark", "erb"];
+var COLOR_MAPS = ["viridis", "magma", "inferno", "grayscale", "igray", "roseus"];
+var SpectrogramSettingsModal = ({
+  open,
+  onClose,
+  config,
+  colorMap,
+  onApply
+}) => {
+  const dialogRef = useRef(null);
+  const [fftSize, setFftSize] = useState(config.fftSize ?? 2048);
+  const [windowFn, setWindowFn] = useState(config.windowFunction ?? "hann");
+  const [freqScale, setFreqScale] = useState(config.frequencyScale ?? "mel");
+  const [localColorMap, setLocalColorMap] = useState(
+    typeof colorMap === "string" ? colorMap : "viridis"
+  );
+  const [minFreq, setMinFreq] = useState(config.minFrequency ?? 0);
+  const [maxFreq, setMaxFreq] = useState(config.maxFrequency ?? 2e4);
+  const [gainDb, setGainDb] = useState(config.gainDb ?? 20);
+  const [rangeDb, setRangeDb] = useState(config.rangeDb ?? 80);
+  const [zeroPadding, setZeroPadding] = useState(config.zeroPaddingFactor ?? 2);
+  const [hopSize, setHopSize] = useState(config.hopSize ?? Math.floor((config.fftSize ?? 2048) / 4));
+  const [showLabels, setShowLabels] = useState(config.labels ?? false);
+  useEffect(() => {
+    setFftSize(config.fftSize ?? 2048);
+    setWindowFn(config.windowFunction ?? "hann");
+    setFreqScale(config.frequencyScale ?? "mel");
+    setLocalColorMap(typeof colorMap === "string" ? colorMap : "viridis");
+    setMinFreq(config.minFrequency ?? 0);
+    setMaxFreq(config.maxFrequency ?? 2e4);
+    setGainDb(config.gainDb ?? 20);
+    setRangeDb(config.rangeDb ?? 80);
+    setZeroPadding(config.zeroPaddingFactor ?? 2);
+    setHopSize(config.hopSize ?? Math.floor((config.fftSize ?? 2048) / 4));
+    setShowLabels(config.labels ?? false);
+  }, [config, colorMap]);
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open && !dialog.open) {
+      dialog.showModal();
+    } else if (!open && dialog.open) {
+      dialog.close();
+    }
+    const handleClose = () => {
+      if (open) {
+        onClose();
+      }
+    };
+    dialog.addEventListener("close", handleClose);
+    return () => dialog.removeEventListener("close", handleClose);
+  }, [open, onClose]);
+  const handleApply = () => {
+    onApply(
+      {
+        fftSize,
+        windowFunction: windowFn,
+        frequencyScale: freqScale,
+        minFrequency: minFreq,
+        maxFrequency: maxFreq,
+        gainDb,
+        rangeDb,
+        zeroPaddingFactor: zeroPadding,
+        hopSize,
+        labels: showLabels
+      },
+      localColorMap
+    );
+    onClose();
+  };
+  return /* @__PURE__ */ jsxs2(StyledDialog, { ref: dialogRef, children: [
+    /* @__PURE__ */ jsx2(Title, { children: "Spectrogram Settings" }),
+    /* @__PURE__ */ jsxs2(FormGrid, { children: [
+      /* @__PURE__ */ jsxs2(Field, { children: [
+        /* @__PURE__ */ jsx2(Label, { children: "FFT Size" }),
+        /* @__PURE__ */ jsx2(Select, { value: fftSize, onChange: (e) => {
+          const v = Number(e.target.value);
+          setFftSize(v);
+          setHopSize(Math.floor(v / 4));
+        }, children: FFT_SIZES.map((s) => /* @__PURE__ */ jsx2("option", { value: s, children: s }, s)) })
+      ] }),
+      /* @__PURE__ */ jsxs2(Field, { children: [
+        /* @__PURE__ */ jsx2(Label, { children: "Hop Size" }),
+        /* @__PURE__ */ jsx2(Select, { value: hopSize, onChange: (e) => setHopSize(Number(e.target.value)), children: [
+          { label: `${fftSize} (no overlap)`, value: fftSize },
+          { label: `${Math.floor(fftSize / 2)} (50%)`, value: Math.floor(fftSize / 2) },
+          { label: `${Math.floor(fftSize / 4)} (75%)`, value: Math.floor(fftSize / 4) },
+          { label: `${Math.floor(fftSize / 8)} (87.5%)`, value: Math.floor(fftSize / 8) }
+        ].map((o) => /* @__PURE__ */ jsx2("option", { value: o.value, children: o.label }, o.value)) })
+      ] }),
+      /* @__PURE__ */ jsxs2(Field, { children: [
+        /* @__PURE__ */ jsx2(Label, { children: "Zero Padding" }),
+        /* @__PURE__ */ jsx2(Select, { value: zeroPadding, onChange: (e) => setZeroPadding(Number(e.target.value)), children: [1, 2, 4, 8, 16].map((v) => /* @__PURE__ */ jsx2("option", { value: v, children: v }, v)) })
+      ] }),
+      /* @__PURE__ */ jsxs2(Field, { children: [
+        /* @__PURE__ */ jsx2(Label, { children: "Window Function" }),
+        /* @__PURE__ */ jsx2(Select, { value: windowFn, onChange: (e) => setWindowFn(e.target.value), children: WINDOW_FUNCTIONS.map((w) => /* @__PURE__ */ jsx2("option", { value: w, children: w }, w)) })
+      ] }),
+      /* @__PURE__ */ jsxs2(Field, { children: [
+        /* @__PURE__ */ jsx2(Label, { children: "Frequency Scale" }),
+        /* @__PURE__ */ jsx2(Select, { value: freqScale, onChange: (e) => setFreqScale(e.target.value), children: FREQ_SCALES.map((s) => /* @__PURE__ */ jsx2("option", { value: s, children: s }, s)) })
+      ] }),
+      /* @__PURE__ */ jsxs2(Field, { children: [
+        /* @__PURE__ */ jsx2(Label, { children: "Color Map" }),
+        /* @__PURE__ */ jsx2(Select, { value: localColorMap, onChange: (e) => setLocalColorMap(e.target.value), children: COLOR_MAPS.map((c) => /* @__PURE__ */ jsx2("option", { value: c, children: c }, c)) })
+      ] }),
+      /* @__PURE__ */ jsxs2(Field, { children: [
+        /* @__PURE__ */ jsx2(Label, { children: "Min Frequency (Hz)" }),
+        /* @__PURE__ */ jsx2(
+          NumberInput,
+          {
+            type: "number",
+            min: 0,
+            max: 5e3,
+            step: 50,
+            value: minFreq,
+            onChange: (e) => setMinFreq(Number(e.target.value))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs2(Field, { children: [
+        /* @__PURE__ */ jsx2(Label, { children: "Max Frequency (Hz)" }),
+        /* @__PURE__ */ jsx2(
+          NumberInput,
+          {
+            type: "number",
+            min: 1e3,
+            max: 22050,
+            step: 50,
+            value: maxFreq,
+            onChange: (e) => setMaxFreq(Number(e.target.value))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs2(Field, { children: [
+        /* @__PURE__ */ jsx2(Label, { children: "Range (dB)" }),
+        /* @__PURE__ */ jsx2(
+          NumberInput,
+          {
+            type: "number",
+            min: 1,
+            max: 120,
+            step: 1,
+            value: rangeDb,
+            onChange: (e) => setRangeDb(Number(e.target.value))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs2(Field, { children: [
+        /* @__PURE__ */ jsx2(Label, { children: "Gain (dB)" }),
+        /* @__PURE__ */ jsx2(
+          NumberInput,
+          {
+            type: "number",
+            min: -20,
+            max: 60,
+            step: 1,
+            value: gainDb,
+            onChange: (e) => setGainDb(Number(e.target.value))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx2(Field, { $span: true, children: /* @__PURE__ */ jsxs2(CheckboxLabel, { children: [
+        /* @__PURE__ */ jsx2("input", { type: "checkbox", checked: showLabels, onChange: (e) => setShowLabels(e.target.checked) }),
+        "Show Frequency Labels"
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs2(ButtonRow, { children: [
+      /* @__PURE__ */ jsx2(ModalButton, { onClick: onClose, children: "Cancel" }),
+      /* @__PURE__ */ jsx2(ModalButton, { $primary: true, onClick: handleApply, children: "Apply" })
+    ] })
+  ] });
+};
+
+// src/worker/createSpectrogramWorker.ts
+var idCounter = 0;
+function createSpectrogramWorker(worker) {
+  const pending = /* @__PURE__ */ new Map();
+  const registeredClipIds = /* @__PURE__ */ new Set();
+  let terminated = false;
+  worker.onmessage = (e) => {
+    const msg = e.data;
+    const entry = pending.get(msg.id);
+    if (entry) {
+      pending.delete(msg.id);
+      switch (msg.type) {
+        case "error":
+          entry.reject(new Error(msg.error));
+          break;
+        case "cache-key":
+          entry.resolve({ cacheKey: msg.cacheKey });
+          break;
+        case "done":
+          entry.resolve(void 0);
+          break;
+        case "spectrograms":
+          entry.resolve(msg.spectrograms);
+          break;
+      }
+    } else if (msg.id) {
+      console.warn(`[spectrogram] Received response for unknown message ID: ${msg.id}`);
+    }
+  };
+  worker.onerror = (e) => {
+    terminated = true;
+    for (const [, entry] of pending) {
+      entry.reject(e.error ?? new Error(e.message));
+    }
+    pending.clear();
+  };
+  return {
+    compute(params) {
+      if (terminated) return Promise.reject(new Error("Worker terminated"));
+      const id = String(++idCounter);
+      return new Promise((resolve, reject) => {
+        pending.set(id, { resolve, reject });
+        const transferableArrays = params.channelDataArrays.map((arr) => arr.slice());
+        const transferables = transferableArrays.map((arr) => arr.buffer);
+        worker.postMessage(
+          {
+            id,
+            channelDataArrays: transferableArrays,
+            config: params.config,
+            sampleRate: params.sampleRate,
+            offsetSamples: params.offsetSamples,
+            durationSamples: params.durationSamples,
+            mono: params.mono
+          },
+          transferables
+        );
+      });
+    },
+    computeFFT(params) {
+      if (terminated) return Promise.reject(new Error("Worker terminated"));
+      const id = String(++idCounter);
+      return new Promise((resolve, reject) => {
+        pending.set(id, { resolve, reject });
+        const isPreRegistered = registeredClipIds.has(params.clipId);
+        const transferableArrays = isPreRegistered ? [] : params.channelDataArrays.map((arr) => arr.slice());
+        const transferables = transferableArrays.map((arr) => arr.buffer);
+        worker.postMessage(
+          {
+            type: "compute-fft",
+            id,
+            clipId: params.clipId,
+            channelDataArrays: transferableArrays,
+            config: params.config,
+            sampleRate: params.sampleRate,
+            offsetSamples: params.offsetSamples,
+            durationSamples: params.durationSamples,
+            mono: params.mono,
+            ...params.sampleRange ? { sampleRange: params.sampleRange } : {}
+          },
+          transferables
+        );
+      });
+    },
+    renderChunks(params) {
+      if (terminated) return Promise.reject(new Error("Worker terminated"));
+      const id = String(++idCounter);
+      return new Promise((resolve, reject) => {
+        pending.set(id, { resolve, reject });
+        worker.postMessage({
+          type: "render-chunks",
+          id,
+          cacheKey: params.cacheKey,
+          canvasIds: params.canvasIds,
+          canvasWidths: params.canvasWidths,
+          globalPixelOffsets: params.globalPixelOffsets,
+          canvasHeight: params.canvasHeight,
+          devicePixelRatio: params.devicePixelRatio,
+          samplesPerPixel: params.samplesPerPixel,
+          colorLUT: params.colorLUT,
+          frequencyScale: params.frequencyScale,
+          minFrequency: params.minFrequency,
+          maxFrequency: params.maxFrequency,
+          gainDb: params.gainDb,
+          rangeDb: params.rangeDb,
+          channelIndex: params.channelIndex
+        });
+      });
+    },
+    registerCanvas(canvasId, canvas) {
+      worker.postMessage(
+        { type: "register-canvas", canvasId, canvas },
+        [canvas]
+      );
+    },
+    unregisterCanvas(canvasId) {
+      worker.postMessage({ type: "unregister-canvas", canvasId });
+    },
+    registerAudioData(clipId, channelDataArrays, sampleRate) {
+      const transferableArrays = channelDataArrays.map((arr) => arr.slice());
+      const transferables = transferableArrays.map((arr) => arr.buffer);
+      worker.postMessage(
+        { type: "register-audio-data", clipId, channelDataArrays: transferableArrays, sampleRate },
+        transferables
+      );
+      registeredClipIds.add(clipId);
+    },
+    unregisterAudioData(clipId) {
+      worker.postMessage({ type: "unregister-audio-data", clipId });
+      registeredClipIds.delete(clipId);
+    },
+    computeAndRender(params) {
+      if (terminated) return Promise.reject(new Error("Worker terminated"));
+      const id = String(++idCounter);
+      return new Promise((resolve, reject) => {
+        pending.set(id, { resolve, reject });
+        const transferableArrays = params.channelDataArrays.map((arr) => arr.slice());
+        const transferables = transferableArrays.map((arr) => arr.buffer);
+        worker.postMessage(
+          {
+            type: "compute-render",
+            id,
+            channelDataArrays: transferableArrays,
+            config: params.config,
+            sampleRate: params.sampleRate,
+            offsetSamples: params.offsetSamples,
+            durationSamples: params.durationSamples,
+            mono: params.mono,
+            render: params.render
+          },
+          transferables
+        );
+      });
+    },
+    terminate() {
+      terminated = true;
+      worker.terminate();
+      for (const [, entry] of pending) {
+        entry.reject(new Error("Worker terminated"));
+      }
+      pending.clear();
+    }
+  };
+}
+
+// src/SpectrogramProvider.tsx
+import { useState as useState2, useEffect as useEffect2, useRef as useRef2, useCallback, useMemo } from "react";
+import { SpectrogramIntegrationProvider } from "@waveform-playlist/browser";
+import { usePlaylistData, usePlaylistControls } from "@waveform-playlist/browser";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var SpectrogramProvider = ({
+  config: spectrogramConfig,
+  colorMap: spectrogramColorMap,
+  children
+}) => {
+  const {
+    tracks,
+    waveHeight,
+    samplesPerPixel,
+    isReady,
+    mono,
+    controls
+  } = usePlaylistData();
+  const { scrollContainerRef } = usePlaylistControls();
+  const [spectrogramDataMap, setSpectrogramDataMap] = useState2(/* @__PURE__ */ new Map());
+  const [trackSpectrogramOverrides, setTrackSpectrogramOverrides] = useState2(/* @__PURE__ */ new Map());
+  const spectrogramCanvasRegistryRef = useRef2(/* @__PURE__ */ new Map());
+  const [spectrogramCanvasVersion, setSpectrogramCanvasVersion] = useState2(0);
+  const prevSpectrogramConfigRef = useRef2(/* @__PURE__ */ new Map());
+  const prevSpectrogramFFTKeyRef = useRef2(/* @__PURE__ */ new Map());
+  const spectrogramWorkerRef = useRef2(null);
+  const spectrogramGenerationRef = useRef2(0);
+  const prevCanvasVersionRef = useRef2(0);
+  const [spectrogramWorkerReady, setSpectrogramWorkerReady] = useState2(false);
+  const clipCacheKeysRef = useRef2(/* @__PURE__ */ new Map());
+  const backgroundRenderAbortRef = useRef2(null);
+  const registeredAudioClipIdsRef = useRef2(/* @__PURE__ */ new Set());
+  useEffect2(() => {
+    return () => {
+      spectrogramWorkerRef.current?.terminate();
+      spectrogramWorkerRef.current = null;
+    };
+  }, []);
+  useEffect2(() => {
+    if (!isReady || tracks.length === 0) return;
+    let workerApi = spectrogramWorkerRef.current;
+    if (!workerApi) {
+      try {
+        const rawWorker = new Worker(
+          new URL("@waveform-playlist/spectrogram/worker/spectrogram.worker", import.meta.url),
+          { type: "module" }
+        );
+        workerApi = createSpectrogramWorker(rawWorker);
+        spectrogramWorkerRef.current = workerApi;
+        setSpectrogramWorkerReady(true);
+      } catch {
+        console.warn("Spectrogram Web Worker unavailable for pre-transfer");
+        return;
+      }
+    }
+    const currentClipIds = /* @__PURE__ */ new Set();
+    for (const track of tracks) {
+      for (const clip of track.clips) {
+        if (!clip.audioBuffer) continue;
+        currentClipIds.add(clip.id);
+        if (!registeredAudioClipIdsRef.current.has(clip.id)) {
+          const channelDataArrays = [];
+          for (let ch = 0; ch < clip.audioBuffer.numberOfChannels; ch++) {
+            channelDataArrays.push(clip.audioBuffer.getChannelData(ch));
+          }
+          workerApi.registerAudioData(clip.id, channelDataArrays, clip.audioBuffer.sampleRate);
+          registeredAudioClipIdsRef.current.add(clip.id);
+        }
+      }
+    }
+    for (const clipId of registeredAudioClipIdsRef.current) {
+      if (!currentClipIds.has(clipId)) {
+        workerApi.unregisterAudioData(clipId);
+        registeredAudioClipIdsRef.current.delete(clipId);
+      }
+    }
+  }, [isReady, tracks]);
+  useEffect2(() => {
+    if (tracks.length === 0) return;
+    const currentKeys = /* @__PURE__ */ new Map();
+    const currentFFTKeys = /* @__PURE__ */ new Map();
+    tracks.forEach((track) => {
+      const mode = trackSpectrogramOverrides.get(track.id)?.renderMode ?? track.renderMode ?? "waveform";
+      if (mode === "waveform") return;
+      const cfg = trackSpectrogramOverrides.get(track.id)?.config ?? track.spectrogramConfig ?? spectrogramConfig;
+      const cm = trackSpectrogramOverrides.get(track.id)?.colorMap ?? track.spectrogramColorMap ?? spectrogramColorMap;
+      currentKeys.set(track.id, JSON.stringify({ mode, cfg, cm, mono }));
+      const computeConfig = {
+        fftSize: cfg?.fftSize,
+        hopSize: cfg?.hopSize,
+        windowFunction: cfg?.windowFunction,
+        alpha: cfg?.alpha,
+        zeroPaddingFactor: cfg?.zeroPaddingFactor
+      };
+      currentFFTKeys.set(track.id, JSON.stringify({ mode, mono, ...computeConfig }));
+    });
+    const prevKeys = prevSpectrogramConfigRef.current;
+    const prevFFTKeys = prevSpectrogramFFTKeyRef.current;
+    let configChanged = currentKeys.size !== prevKeys.size;
+    if (!configChanged) {
+      for (const [idx, key] of currentKeys) {
+        if (prevKeys.get(idx) !== key) {
+          configChanged = true;
+          break;
+        }
+      }
+    }
+    let fftKeyChanged = currentFFTKeys.size !== prevFFTKeys.size;
+    if (!fftKeyChanged) {
+      for (const [idx, key] of currentFFTKeys) {
+        if (prevFFTKeys.get(idx) !== key) {
+          fftKeyChanged = true;
+          break;
+        }
+      }
+    }
+    const canvasVersionChanged = spectrogramCanvasVersion !== prevCanvasVersionRef.current;
+    prevCanvasVersionRef.current = spectrogramCanvasVersion;
+    if (!configChanged && !canvasVersionChanged) return;
+    if (configChanged) {
+      prevSpectrogramConfigRef.current = currentKeys;
+      prevSpectrogramFFTKeyRef.current = currentFFTKeys;
+    }
+    if (configChanged) {
+      setSpectrogramDataMap((prevMap) => {
+        const activeClipIds = /* @__PURE__ */ new Set();
+        for (const track of tracks) {
+          const mode = trackSpectrogramOverrides.get(track.id)?.renderMode ?? track.renderMode ?? "waveform";
+          if (mode === "spectrogram" || mode === "both") {
+            for (const clip of track.clips) {
+              activeClipIds.add(clip.id);
+            }
+          }
+        }
+        const newMap = new Map(prevMap);
+        for (const clipId of newMap.keys()) {
+          if (!activeClipIds.has(clipId)) {
+            newMap.delete(clipId);
+          }
+        }
+        return newMap;
+      });
+    }
+    if (backgroundRenderAbortRef.current) {
+      backgroundRenderAbortRef.current.aborted = true;
+    }
+    const generation = ++spectrogramGenerationRef.current;
+    let workerApi = spectrogramWorkerRef.current;
+    if (!workerApi) {
+      try {
+        const rawWorker = new Worker(
+          new URL("@waveform-playlist/spectrogram/worker/spectrogram.worker", import.meta.url),
+          { type: "module" }
+        );
+        workerApi = createSpectrogramWorker(rawWorker);
+        spectrogramWorkerRef.current = workerApi;
+        setSpectrogramWorkerReady(true);
+      } catch {
+        console.warn("Spectrogram Web Worker unavailable, falling back to synchronous computation");
+      }
+    }
+    const clipsNeedingFFT = [];
+    const clipsNeedingDisplayOnly = [];
+    tracks.forEach((track, i) => {
+      const mode = trackSpectrogramOverrides.get(track.id)?.renderMode ?? track.renderMode ?? "waveform";
+      if (mode === "waveform") return;
+      const trackConfigChanged = configChanged && currentKeys.get(track.id) !== prevKeys.get(track.id);
+      const trackFFTChanged = fftKeyChanged && currentFFTKeys.get(track.id) !== prevFFTKeys.get(track.id);
+      const hasRegisteredCanvases = canvasVersionChanged && track.clips.some(
+        (clip) => spectrogramCanvasRegistryRef.current.has(clip.id)
+      );
+      if (!trackConfigChanged && !hasRegisteredCanvases) return;
+      const cfg = trackSpectrogramOverrides.get(track.id)?.config ?? track.spectrogramConfig ?? spectrogramConfig ?? {};
+      const cm = trackSpectrogramOverrides.get(track.id)?.colorMap ?? track.spectrogramColorMap ?? spectrogramColorMap ?? "viridis";
+      for (const clip of track.clips) {
+        if (!clip.audioBuffer) continue;
+        const monoFlag = mono || clip.audioBuffer.numberOfChannels === 1;
+        if (!trackFFTChanged && !hasRegisteredCanvases && clipCacheKeysRef.current.has(clip.id)) {
+          clipsNeedingDisplayOnly.push({
+            clipId: clip.id,
+            trackIndex: i,
+            config: cfg,
+            clipStartSample: clip.startSample,
+            monoFlag,
+            colorMap: cm,
+            numChannels: monoFlag ? 1 : clip.audioBuffer.numberOfChannels
+          });
+          continue;
+        }
+        const channelDataArrays = [];
+        for (let ch = 0; ch < clip.audioBuffer.numberOfChannels; ch++) {
+          channelDataArrays.push(clip.audioBuffer.getChannelData(ch));
+        }
+        clipsNeedingFFT.push({
+          clipId: clip.id,
+          trackIndex: i,
+          channelDataArrays,
+          config: cfg,
+          sampleRate: clip.audioBuffer.sampleRate,
+          offsetSamples: clip.offsetSamples,
+          durationSamples: clip.durationSamples,
+          clipStartSample: clip.startSample,
+          monoFlag,
+          colorMap: cm
+        });
+      }
+    });
+    if (clipsNeedingFFT.length === 0 && clipsNeedingDisplayOnly.length === 0) return;
+    if (!workerApi) {
+      try {
+        setSpectrogramDataMap((prevMap) => {
+          const newMap = new Map(prevMap);
+          for (const item of clipsNeedingFFT) {
+            const clip = tracks.flatMap((t) => t.clips).find((c) => c.id === item.clipId);
+            if (!clip?.audioBuffer) continue;
+            const channelSpectrograms = [];
+            if (item.monoFlag) {
+              channelSpectrograms.push(
+                computeSpectrogramMono(
+                  clip.audioBuffer,
+                  item.config,
+                  item.offsetSamples,
+                  item.durationSamples
+                )
+              );
+            } else {
+              for (let ch = 0; ch < clip.audioBuffer.numberOfChannels; ch++) {
+                channelSpectrograms.push(
+                  computeSpectrogram(clip.audioBuffer, item.config, item.offsetSamples, item.durationSamples, ch)
+                );
+              }
+            }
+            newMap.set(item.clipId, channelSpectrograms);
+          }
+          return newMap;
+        });
+      } catch (err) {
+        console.error("[waveform-playlist] Synchronous spectrogram computation failed:", err);
+      }
+      return;
+    }
+    const getVisibleChunkRange = (canvasWidths, clipPixelOffset = 0) => {
+      const container = scrollContainerRef.current;
+      if (!container) {
+        return { visibleIndices: canvasWidths.map((_, i) => i), remainingIndices: [] };
+      }
+      const scrollLeft = container.scrollLeft;
+      const viewportWidth = container.clientWidth;
+      const controlWidth = controls.show ? controls.width : 0;
+      const visibleIndices = [];
+      const remainingIndices = [];
+      let offset = 0;
+      for (let i = 0; i < canvasWidths.length; i++) {
+        const chunkLeft = offset + controlWidth + clipPixelOffset;
+        const chunkRight = chunkLeft + canvasWidths[i];
+        if (chunkRight > scrollLeft && chunkLeft < scrollLeft + viewportWidth) {
+          visibleIndices.push(i);
+        } else {
+          remainingIndices.push(i);
+        }
+        offset += canvasWidths[i];
+      }
+      return { visibleIndices, remainingIndices };
+    };
+    const renderChunkSubset = async (api, cacheKey, channelInfo, indices, item, channelIndex) => {
+      if (indices.length === 0) return;
+      const canvasIds = indices.map((i) => channelInfo.canvasIds[i]);
+      const canvasWidths = indices.map((i) => channelInfo.canvasWidths[i]);
+      const globalPixelOffsets = [];
+      for (const idx of indices) {
+        let offset = 0;
+        for (let j = 0; j < idx; j++) {
+          offset += channelInfo.canvasWidths[j];
+        }
+        globalPixelOffsets.push(offset);
+      }
+      const colorLUT = getColorMap(item.colorMap);
+      await api.renderChunks({
+        cacheKey,
+        canvasIds,
+        canvasWidths,
+        globalPixelOffsets,
+        canvasHeight: waveHeight,
+        devicePixelRatio: typeof window !== "undefined" ? window.devicePixelRatio : 1,
+        samplesPerPixel,
+        colorLUT,
+        frequencyScale: item.config.frequencyScale ?? "mel",
+        minFrequency: item.config.minFrequency ?? 0,
+        maxFrequency: item.config.maxFrequency ?? 0,
+        gainDb: item.config.gainDb ?? 20,
+        rangeDb: item.config.rangeDb ?? 80,
+        channelIndex
+      });
+    };
+    const computeAsync = async () => {
+      const abortToken = { aborted: false };
+      backgroundRenderAbortRef.current = abortToken;
+      for (const item of clipsNeedingFFT) {
+        if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
+        try {
+          const clipCanvasInfo = spectrogramCanvasRegistryRef.current.get(item.clipId);
+          if (clipCanvasInfo && clipCanvasInfo.size > 0) {
+            const numChannels = item.monoFlag ? 1 : item.channelDataArrays.length;
+            const clipPixelOffset = Math.floor(item.clipStartSample / samplesPerPixel);
+            const container = scrollContainerRef.current;
+            const windowSize = item.config.fftSize ?? 2048;
+            let visibleRange;
+            if (container) {
+              const scrollLeft = container.scrollLeft;
+              const viewportWidth = container.clientWidth;
+              const controlWidth = controls.show ? controls.width : 0;
+              const vpStartPx = Math.max(0, scrollLeft - controlWidth);
+              const vpEndPx = vpStartPx + viewportWidth;
+              const clipStartPx = clipPixelOffset;
+              const clipEndPx = clipStartPx + Math.ceil(item.durationSamples / samplesPerPixel);
+              const overlapStartPx = Math.max(vpStartPx, clipStartPx);
+              const overlapEndPx = Math.min(vpEndPx, clipEndPx);
+              if (overlapEndPx > overlapStartPx) {
+                const localStartPx = overlapStartPx - clipStartPx;
+                const localEndPx = overlapEndPx - clipStartPx;
+                const visStartSample = item.offsetSamples + Math.floor(localStartPx * samplesPerPixel);
+                const visEndSample = Math.min(
+                  item.offsetSamples + item.durationSamples,
+                  item.offsetSamples + Math.ceil(localEndPx * samplesPerPixel)
+                );
+                const paddedStart = Math.max(item.offsetSamples, visStartSample - windowSize);
+                const paddedEnd = Math.min(item.offsetSamples + item.durationSamples, visEndSample + windowSize);
+                if (paddedEnd - paddedStart < item.durationSamples * 0.8) {
+                  visibleRange = { start: paddedStart, end: paddedEnd };
+                }
+              }
+            }
+            const fullClipAlreadyCached = clipCacheKeysRef.current.has(item.clipId);
+            if (visibleRange && !fullClipAlreadyCached) {
+              const { cacheKey: visibleCacheKey } = await workerApi.computeFFT({
+                clipId: item.clipId,
+                channelDataArrays: item.channelDataArrays,
+                config: item.config,
+                sampleRate: item.sampleRate,
+                offsetSamples: item.offsetSamples,
+                durationSamples: item.durationSamples,
+                mono: item.monoFlag,
+                sampleRange: visibleRange
+              });
+              if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
+              for (let ch = 0; ch < numChannels; ch++) {
+                const channelInfo = clipCanvasInfo.get(ch);
+                if (!channelInfo) continue;
+                const { visibleIndices } = getVisibleChunkRange(channelInfo.canvasWidths, clipPixelOffset);
+                await renderChunkSubset(workerApi, visibleCacheKey, channelInfo, visibleIndices, item, ch);
+              }
+              if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
+            }
+            const { cacheKey } = await workerApi.computeFFT({
+              clipId: item.clipId,
+              channelDataArrays: item.channelDataArrays,
+              config: item.config,
+              sampleRate: item.sampleRate,
+              offsetSamples: item.offsetSamples,
+              durationSamples: item.durationSamples,
+              mono: item.monoFlag
+            });
+            if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
+            clipCacheKeysRef.current.set(item.clipId, cacheKey);
+            for (let ch = 0; ch < numChannels; ch++) {
+              const channelInfo = clipCanvasInfo.get(ch);
+              if (!channelInfo) continue;
+              const { visibleIndices, remainingIndices } = getVisibleChunkRange(channelInfo.canvasWidths, clipPixelOffset);
+              await renderChunkSubset(workerApi, cacheKey, channelInfo, visibleIndices, item, ch);
+              if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
+              const BATCH_SIZE = 4;
+              for (let batchStart = 0; batchStart < remainingIndices.length; batchStart += BATCH_SIZE) {
+                if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
+                const batch = remainingIndices.slice(batchStart, batchStart + BATCH_SIZE);
+                await new Promise((resolve) => {
+                  if (typeof requestIdleCallback === "function") {
+                    requestIdleCallback(() => resolve());
+                  } else {
+                    setTimeout(resolve, 0);
+                  }
+                });
+                if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
+                await renderChunkSubset(workerApi, cacheKey, channelInfo, batch, item, ch);
+              }
+            }
+          } else {
+            const spectrograms = await workerApi.compute({
+              channelDataArrays: item.channelDataArrays,
+              config: item.config,
+              sampleRate: item.sampleRate,
+              offsetSamples: item.offsetSamples,
+              durationSamples: item.durationSamples,
+              mono: item.monoFlag
+            });
+            if (spectrogramGenerationRef.current !== generation) return;
+            setSpectrogramDataMap((prevMap) => {
+              const newMap = new Map(prevMap);
+              newMap.set(item.clipId, spectrograms);
+              return newMap;
+            });
+          }
+        } catch (err) {
+          console.warn("Spectrogram worker error for clip", item.clipId, err);
+        }
+      }
+      for (const item of clipsNeedingDisplayOnly) {
+        if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
+        const cacheKey = clipCacheKeysRef.current.get(item.clipId);
+        if (!cacheKey) continue;
+        const clipCanvasInfo = spectrogramCanvasRegistryRef.current.get(item.clipId);
+        if (!clipCanvasInfo || clipCanvasInfo.size === 0) continue;
+        try {
+          const clipPixelOffset = Math.floor(item.clipStartSample / samplesPerPixel);
+          for (let ch = 0; ch < item.numChannels; ch++) {
+            const channelInfo = clipCanvasInfo.get(ch);
+            if (!channelInfo) continue;
+            const { visibleIndices, remainingIndices } = getVisibleChunkRange(channelInfo.canvasWidths, clipPixelOffset);
+            await renderChunkSubset(workerApi, cacheKey, channelInfo, visibleIndices, item, ch);
+            if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
+            const BATCH_SIZE = 4;
+            for (let batchStart = 0; batchStart < remainingIndices.length; batchStart += BATCH_SIZE) {
+              if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
+              const batch = remainingIndices.slice(batchStart, batchStart + BATCH_SIZE);
+              await new Promise((resolve) => {
+                if (typeof requestIdleCallback === "function") {
+                  requestIdleCallback(() => resolve());
+                } else {
+                  setTimeout(resolve, 0);
+                }
+              });
+              if (spectrogramGenerationRef.current !== generation || abortToken.aborted) return;
+              await renderChunkSubset(workerApi, cacheKey, channelInfo, batch, item, ch);
+            }
+          }
+        } catch (err) {
+          console.warn("Spectrogram display re-render error for clip", item.clipId, err);
+        }
+      }
+    };
+    computeAsync().catch((err) => {
+      console.error("[waveform-playlist] Spectrogram computation failed:", err);
+    });
+  }, [tracks, mono, spectrogramConfig, spectrogramColorMap, trackSpectrogramOverrides, waveHeight, samplesPerPixel, spectrogramCanvasVersion, controls, scrollContainerRef]);
+  const setTrackRenderMode = useCallback((trackId, mode) => {
+    setTrackSpectrogramOverrides((prev) => {
+      const next = new Map(prev);
+      const existing = next.get(trackId);
+      next.set(trackId, { ...existing, renderMode: mode });
+      return next;
+    });
+  }, []);
+  const setTrackSpectrogramConfig = useCallback((trackId, config, colorMap) => {
+    setTrackSpectrogramOverrides((prev) => {
+      const next = new Map(prev);
+      const existing = next.get(trackId);
+      next.set(trackId, {
+        renderMode: existing?.renderMode ?? "waveform",
+        config,
+        ...colorMap !== void 0 ? { colorMap } : { colorMap: existing?.colorMap }
+      });
+      return next;
+    });
+  }, []);
+  const registerSpectrogramCanvases = useCallback((clipId, channelIndex, canvasIds, canvasWidths) => {
+    const registry = spectrogramCanvasRegistryRef.current;
+    if (!registry.has(clipId)) {
+      registry.set(clipId, /* @__PURE__ */ new Map());
+    }
+    registry.get(clipId).set(channelIndex, { canvasIds, canvasWidths });
+    setSpectrogramCanvasVersion((v) => v + 1);
+  }, []);
+  const unregisterSpectrogramCanvases = useCallback((clipId, channelIndex) => {
+    const registry = spectrogramCanvasRegistryRef.current;
+    const clipChannels = registry.get(clipId);
+    if (clipChannels) {
+      clipChannels.delete(channelIndex);
+      if (clipChannels.size === 0) {
+        registry.delete(clipId);
+      }
+    }
+  }, []);
+  const renderMenuItems = useCallback((props) => {
+    return SpectrogramMenuItems({
+      renderMode: props.renderMode,
+      onRenderModeChange: props.onRenderModeChange,
+      onOpenSettings: props.onOpenSettings,
+      onClose: props.onClose
+    });
+  }, []);
+  const value = useMemo(() => ({
+    spectrogramDataMap,
+    trackSpectrogramOverrides,
+    spectrogramWorkerApi: spectrogramWorkerReady ? spectrogramWorkerRef.current : null,
+    spectrogramConfig,
+    spectrogramColorMap,
+    setTrackRenderMode,
+    setTrackSpectrogramConfig,
+    registerSpectrogramCanvases,
+    unregisterSpectrogramCanvases,
+    renderMenuItems,
+    SettingsModal: SpectrogramSettingsModal,
+    getColorMap,
+    getFrequencyScale
+  }), [
+    spectrogramDataMap,
+    trackSpectrogramOverrides,
+    spectrogramWorkerReady,
+    spectrogramConfig,
+    spectrogramColorMap,
+    setTrackRenderMode,
+    setTrackSpectrogramConfig,
+    registerSpectrogramCanvases,
+    unregisterSpectrogramCanvases,
+    renderMenuItems
+  ]);
+  return /* @__PURE__ */ jsx3(SpectrogramIntegrationProvider, { value, children });
+};
+export {
+  SpectrogramMenuItems,
+  SpectrogramProvider,
+  SpectrogramSettingsModal,
+  computeSpectrogram,
+  computeSpectrogramMono,
+  createSpectrogramWorker,
+  getColorMap,
+  getFrequencyScale
+};
+//# sourceMappingURL=index.mjs.map