spectral-display 0.1.0

package/dist/index.js

@@ -0,0 +1,1751 @@
+import { useRef, useEffect, useState, useCallback } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/LoudnessCanvas.tsx
+var DEFAULT_COLORS = {
+  rms: "rgba(0, 200, 255, 0.6)",
+  momentary: "rgba(255, 200, 0, 0.8)",
+  shortTerm: "rgba(0, 255, 100, 0.8)",
+  integrated: "rgba(255, 255, 255, 0.9)",
+  truePeak: "rgba(255, 80, 80, 0.9)"
+};
+function lufsToY(lufs, canvasHeight) {
+  if (!isFinite(lufs) || lufs < -60) return canvasHeight / 2;
+  const amplitude = Math.pow(10, lufs / 20);
+  return canvasHeight / 2 - amplitude * (canvasHeight / 2);
+}
+function drawRmsEnvelope(loudness, color, dimensions, context) {
+  const { rmsEnvelope, pointCount } = loudness;
+  const { width, height } = dimensions;
+  if (pointCount === 0) return;
+  const centerY = height / 2;
+  const halfHeight = height / 2;
+  const stride = (pointCount - 1) / width;
+  context.beginPath();
+  context.moveTo(0, centerY);
+  for (let px = 0; px < width; px++) {
+    const ptStart = Math.floor(px * stride);
+    const ptEnd = Math.min(Math.floor((px + 1) * stride), pointCount - 1);
+    let maxRms = 0;
+    for (let pt = ptStart; pt <= ptEnd; pt++) {
+      const rms = rmsEnvelope[pt];
+      if (rms > maxRms) maxRms = rms;
+    }
+    context.lineTo(px, centerY - maxRms * halfHeight);
+  }
+  for (let px = width - 1; px >= 0; px--) {
+    const ptStart = Math.floor(px * stride);
+    const ptEnd = Math.min(Math.floor((px + 1) * stride), pointCount - 1);
+    let maxRms = 0;
+    for (let pt = ptStart; pt <= ptEnd; pt++) {
+      const rms = rmsEnvelope[pt];
+      if (rms > maxRms) maxRms = rms;
+    }
+    context.lineTo(px, centerY + maxRms * halfHeight);
+  }
+  context.closePath();
+  context.fillStyle = color;
+  context.fill();
+}
+function drawLufsLine(lufsData, pointCount, color, dimensions, context) {
+  const { width, height } = dimensions;
+  if (pointCount === 0) return;
+  const stride = (pointCount - 1) / width;
+  context.beginPath();
+  context.moveTo(0, lufsToY(lufsData[0], height));
+  for (let px = 1; px < width; px++) {
+    const pt = Math.min(Math.round(px * stride), pointCount - 1);
+    context.lineTo(px, lufsToY(lufsData[pt], height));
+  }
+  context.strokeStyle = color;
+  context.lineWidth = 1.5;
+  context.stroke();
+}
+function drawAmplitudeLine(amplitude, color, dimensions, context) {
+  const { width, height } = dimensions;
+  if (amplitude <= 0) return;
+  const py = height / 2 - amplitude * (height / 2);
+  context.beginPath();
+  context.setLineDash([6, 4]);
+  context.moveTo(0, py);
+  context.lineTo(width, py);
+  context.strokeStyle = color;
+  context.lineWidth = 1.5;
+  context.stroke();
+  context.setLineDash([]);
+}
+function drawIntegratedLine(integratedLufs, color, dimensions, context) {
+  const { width, height } = dimensions;
+  if (!isFinite(integratedLufs) || integratedLufs < -60) return;
+  const py = lufsToY(integratedLufs, height);
+  context.beginPath();
+  context.setLineDash([6, 4]);
+  context.moveTo(0, py);
+  context.lineTo(width, py);
+  context.strokeStyle = color;
+  context.lineWidth = 1.5;
+  context.stroke();
+  context.setLineDash([]);
+}
+var LoudnessCanvas = ({ computeResult, rmsEnvelope = true, momentary = false, shortTerm = false, integrated = true, truePeak = false, colors }) => {
+  const canvasRef = useRef(null);
+  const resolvedColors = {
+    rms: colors?.rms ?? DEFAULT_COLORS.rms,
+    momentary: colors?.momentary ?? DEFAULT_COLORS.momentary,
+    shortTerm: colors?.shortTerm ?? DEFAULT_COLORS.shortTerm,
+    integrated: colors?.integrated ?? DEFAULT_COLORS.integrated,
+    truePeak: colors?.truePeak ?? DEFAULT_COLORS.truePeak
+  };
+  const dimensions = computeResult.status === "ready" ? computeResult.options.sampleQuery : { width: 0, height: 0 };
+  const { width, height } = dimensions;
+  useEffect(() => {
+    const canvasElement = canvasRef.current;
+    if (!canvasElement) return;
+    const context = canvasElement.getContext("2d");
+    if (!context) return;
+    context.clearRect(0, 0, width, height);
+    if (computeResult.status !== "ready") return;
+    const { loudnessData } = computeResult;
+    if (!loudnessData || loudnessData.pointCount < 2) return;
+    if (rmsEnvelope) {
+      drawRmsEnvelope(loudnessData, resolvedColors.rms, dimensions, context);
+    }
+    if (momentary) {
+      drawLufsLine(loudnessData.momentaryLufs, loudnessData.pointCount, resolvedColors.momentary, dimensions, context);
+    }
+    if (shortTerm) {
+      drawLufsLine(loudnessData.shortTermLufs, loudnessData.pointCount, resolvedColors.shortTerm, dimensions, context);
+    }
+    if (integrated) {
+      drawIntegratedLine(loudnessData.integratedLufs, resolvedColors.integrated, dimensions, context);
+    }
+    if (truePeak && loudnessData.truePeak !== void 0) {
+      drawAmplitudeLine(loudnessData.truePeak, resolvedColors.truePeak, dimensions, context);
+    }
+  }, [computeResult, width, height, rmsEnvelope, momentary, shortTerm, integrated, truePeak, resolvedColors.rms, resolvedColors.momentary, resolvedColors.shortTerm, resolvedColors.integrated, resolvedColors.truePeak]);
+  if (computeResult.status !== "ready" || !computeResult.loudnessData) return null;
+  return /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref: canvasRef,
+      width,
+      height
+    }
+  );
+};
+
+// src/engine/shaders.ts
+var FFT_PIPELINE_SHADER = (
+  /* wgsl */
+  `
+
+override WORKGROUP_SIZE: u32;
+override FFT_SIZE: u32;
+
+struct Uniforms {
+  fft_size: u32,
+  chunk_offset: u32,
+  num_bands: u32,
+  use_band_mapping: u32,
+  hop_size: u32,
+}
+
+@group(0) @binding(0) var<storage, read> input_samples: array<f32>;
+@group(0) @binding(1) var<storage, read_write> magnitude_output: array<f32>;
+@group(0) @binding(2) var<storage, read> band_mapping: array<f32>;
+@group(0) @binding(3) var<uniform> uniforms: Uniforms;
+
+var<workgroup> shared_re: array<f32, FFT_SIZE>;
+var<workgroup> shared_im: array<f32, FFT_SIZE>;
+
+fn bit_reverse(value: u32, bits: u32) -> u32 {
+  var reversed: u32 = 0u;
+  var remaining = value;
+  for (var bit: u32 = 0u; bit < bits; bit = bit + 1u) {
+    reversed = (reversed << 1u) | (remaining & 1u);
+    remaining = remaining >> 1u;
+  }
+  return reversed;
+}
+
+@compute @workgroup_size(WORKGROUP_SIZE)
+fn main(
+  @builtin(workgroup_id) workgroup_id: vec3<u32>,
+  @builtin(local_invocation_id) local_id: vec3<u32>,
+) {
+  let hop_index = workgroup_id.x;
+  let thread_id = local_id.x;
+  let fft_size = uniforms.fft_size;
+  let half_fft = fft_size / 2u;
+  let log2_fft = u32(log2(f32(fft_size)));
+  let hop_size = uniforms.hop_size;
+  let sample_base = hop_index * hop_size;
+
+  // Load samples with bit-reversal permutation and Hann window
+  let threads_per_load = WORKGROUP_SIZE;
+  for (var offset: u32 = thread_id; offset < fft_size; offset = offset + threads_per_load) {
+    let reversed = bit_reverse(offset, log2_fft);
+    let sample_index = sample_base + offset;
+    var sample_value: f32 = 0.0;
+    if (sample_index < arrayLength(&input_samples)) {
+      sample_value = input_samples[sample_index];
+    }
+    // Hann window
+    let hann = 0.5 * (1.0 - cos(2.0 * 3.14159265358979323846 * f32(offset) / f32(fft_size - 1u)));
+    shared_re[reversed] = sample_value * hann;
+    shared_im[reversed] = 0.0;
+  }
+
+  workgroupBarrier();
+
+  // Butterfly stages
+  for (var stage: u32 = 0u; stage < log2_fft; stage = stage + 1u) {
+    let block_size = 1u << (stage + 1u);
+    let half_block = 1u << stage;
+
+    for (var index: u32 = thread_id; index < half_fft; index = index + threads_per_load) {
+      let block_index = index / half_block;
+      let inner_index = index % half_block;
+      let top = block_index * block_size + inner_index;
+      let bottom = top + half_block;
+
+      let angle = -2.0 * 3.14159265358979323846 * f32(inner_index) / f32(block_size);
+      let twiddle_re = cos(angle);
+      let twiddle_im = sin(angle);
+
+      let bottom_re = shared_re[bottom] * twiddle_re - shared_im[bottom] * twiddle_im;
+      let bottom_im = shared_re[bottom] * twiddle_im + shared_im[bottom] * twiddle_re;
+
+      let top_re = shared_re[top];
+      let top_im = shared_im[top];
+
+      shared_re[top] = top_re + bottom_re;
+      shared_im[top] = top_im + bottom_im;
+      shared_re[bottom] = top_re - bottom_re;
+      shared_im[bottom] = top_im - bottom_im;
+    }
+
+    workgroupBarrier();
+  }
+
+  // Compute magnitudes and write output
+  let num_bins = half_fft + 1u;
+  let scale_factor = 2.0 / f32(fft_size);
+  let frame_index = uniforms.chunk_offset + hop_index;
+
+  if (uniforms.use_band_mapping == 0u) {
+    // Linear scale: write raw magnitudes
+    for (var bin: u32 = thread_id; bin < num_bins; bin = bin + threads_per_load) {
+      let re = shared_re[bin];
+      let im = shared_im[bin];
+      let magnitude = sqrt(re * re + im * im) * scale_factor;
+      magnitude_output[frame_index * uniforms.num_bands + bin] = magnitude;
+    }
+  } else {
+    // Non-linear scale: apply band mapping
+    for (var band: u32 = thread_id; band < uniforms.num_bands; band = band + threads_per_load) {
+      let mapping_offset = band * 4u;
+      let bin_start = u32(band_mapping[mapping_offset]);
+      let bin_end = u32(band_mapping[mapping_offset + 1u]);
+      let weight_start = band_mapping[mapping_offset + 2u];
+      let weight_end = band_mapping[mapping_offset + 3u];
+
+      var accumulated: f32 = 0.0;
+      for (var bin: u32 = bin_start; bin <= bin_end; bin = bin + 1u) {
+        let re = shared_re[bin];
+        let im = shared_im[bin];
+        let magnitude = sqrt(re * re + im * im) * scale_factor;
+
+        var weight: f32 = 1.0;
+        if (bin == bin_start) {
+          weight = weight_start;
+        } else if (bin == bin_end) {
+          weight = weight_end;
+        }
+
+        accumulated = accumulated + magnitude * weight;
+      }
+
+      var weight_sum: f32;
+      if (bin_start == bin_end) {
+        weight_sum = weight_start;
+      } else {
+        weight_sum = weight_start + weight_end + f32(bin_end - bin_start - 1u);
+      }
+      if (weight_sum > 0.0) {
+        accumulated = accumulated / weight_sum;
+      }
+      magnitude_output[frame_index * uniforms.num_bands + band] = accumulated;
+    }
+  }
+}
+`
+);
+var SPECTROGRAM_VISUALIZE_SHADER = (
+  /* wgsl */
+  `
+
+struct Uniforms {
+  total_frames: u32,
+  num_bands: u32,
+  output_width: u32,
+  output_height: u32,
+  db_min: f32,
+  db_max: f32,
+}
+
+@group(0) @binding(0) var<storage, read> magnitude_buffer: array<f32>;
+@group(0) @binding(1) var<storage, read> colormap_buffer: array<u32>;
+@group(0) @binding(2) var output_texture: texture_storage_2d<rgba8unorm, write>;
+@group(0) @binding(3) var<uniform> uniforms: Uniforms;
+
+@compute @workgroup_size(64, 1)
+fn main(@builtin(global_invocation_id) global_id: vec3<u32>) {
+  let column = global_id.x;
+  let pixel_row = global_id.y;
+
+  if (column >= uniforms.output_width || pixel_row >= uniforms.output_height) {
+    return;
+  }
+
+  // Map pixel row to band with interpolation
+  let band_float = f32(pixel_row) * f32(uniforms.num_bands - 1u) / f32(max(1u, uniforms.output_height - 1u));
+  let band_low = u32(band_float);
+  let band_high = min(band_low + 1u, uniforms.num_bands - 1u);
+  let band_frac = band_float - f32(band_low);
+
+  let stride = f32(uniforms.total_frames) / f32(uniforms.output_width);
+
+  var max_magnitude: f32 = 0.0;
+
+  if (stride >= 1.0) {
+    let frame_start = u32(f32(column) * stride);
+    let frame_end = min(u32(f32(column + 1u) * stride), uniforms.total_frames);
+
+    var max_mag_low: f32 = 0.0;
+    var max_mag_high: f32 = 0.0;
+
+    for (var frame: u32 = frame_start; frame < frame_end; frame = frame + 1u) {
+      max_mag_low = max(max_mag_low, magnitude_buffer[frame * uniforms.num_bands + band_low]);
+      max_mag_high = max(max_mag_high, magnitude_buffer[frame * uniforms.num_bands + band_high]);
+    }
+
+    max_magnitude = max_mag_low * (1.0 - band_frac) + max_mag_high * band_frac;
+  } else {
+    let exact_frame = f32(column) * stride;
+    let frame_low = min(u32(exact_frame), uniforms.total_frames - 1u);
+    let frame_high = min(frame_low + 1u, uniforms.total_frames - 1u);
+    let frame_frac = exact_frame - f32(frame_low);
+
+    let mag_ll = magnitude_buffer[frame_low * uniforms.num_bands + band_low];
+    let mag_lh = magnitude_buffer[frame_low * uniforms.num_bands + band_high];
+    let mag_hl = magnitude_buffer[frame_high * uniforms.num_bands + band_low];
+    let mag_hh = magnitude_buffer[frame_high * uniforms.num_bands + band_high];
+
+    let mag_low_interp = mag_ll * (1.0 - frame_frac) + mag_hl * frame_frac;
+    let mag_high_interp = mag_lh * (1.0 - frame_frac) + mag_hh * frame_frac;
+
+    max_magnitude = mag_low_interp * (1.0 - band_frac) + mag_high_interp * band_frac;
+  }
+
+  // Convert to dB
+  let db_value = 20.0 * log(max(max_magnitude, 1e-10)) / log(10.0);
+  let db_range = uniforms.db_max - uniforms.db_min;
+  let normalized = clamp((db_value - uniforms.db_min) / db_range, 0.0, 1.0);
+
+  // Index into colormap (256 entries)
+  let colormap_index = u32(normalized * 255.0);
+  let packed = colormap_buffer[colormap_index];
+  let red = f32(packed & 0xFFu) / 255.0;
+  let green = f32((packed >> 8u) & 0xFFu) / 255.0;
+  let blue = f32((packed >> 16u) & 0xFFu) / 255.0;
+  let alpha = f32((packed >> 24u) & 0xFFu) / 255.0;
+
+  let pixel_y = uniforms.output_height - 1u - pixel_row;
+  textureStore(output_texture, vec2<i32>(i32(column), i32(pixel_y)), vec4<f32>(red, green, blue, alpha));
+}
+`
+);
+var WAVEFORM_VISUALIZE_SHADER = (
+  /* wgsl */
+  `
+
+struct Uniforms {
+  total_points: u32,
+  output_width: u32,
+  output_height: u32,
+  waveform_color_r: f32,
+  waveform_color_g: f32,
+  waveform_color_b: f32,
+}
+
+@group(0) @binding(0) var<storage, read> waveform_buffer: array<f32>;
+@group(0) @binding(1) var output_texture: texture_storage_2d<rgba8unorm, write>;
+@group(0) @binding(2) var<uniform> uniforms: Uniforms;
+
+@compute @workgroup_size(64)
+fn main(@builtin(global_invocation_id) global_id: vec3<u32>) {
+  let column = global_id.x;
+
+  if (column >= uniforms.output_width) {
+    return;
+  }
+
+  let stride = f32(uniforms.total_points) / f32(uniforms.output_width);
+  let point_start = min(u32(f32(column) * stride), uniforms.total_points - 1u);
+  let point_end = max(point_start + 1u, min(u32(f32(column + 1u) * stride), uniforms.total_points));
+
+  var min_val: f32 = 1.0;
+  var max_val: f32 = -1.0;
+
+  for (var point: u32 = point_start; point < point_end; point = point + 1u) {
+    let min_sample = waveform_buffer[point * 2u];
+    let max_sample = waveform_buffer[point * 2u + 1u];
+    min_val = min(min_val, min_sample);
+    max_val = max(max_val, max_sample);
+  }
+
+  let half_height = f32(uniforms.output_height) / 2.0;
+
+  let y_min_pixel = u32(clamp(half_height - max_val * half_height, 0.0, f32(uniforms.output_height - 1u)));
+  let y_max_pixel = u32(clamp(half_height - min_val * half_height, 0.0, f32(uniforms.output_height - 1u)));
+
+  let color = vec4<f32>(
+    uniforms.waveform_color_r / 255.0,
+    uniforms.waveform_color_g / 255.0,
+    uniforms.waveform_color_b / 255.0,
+    1.0,
+  );
+  let transparent = vec4<f32>(0.0, 0.0, 0.0, 0.0);
+
+  for (var pixel_y: u32 = 0u; pixel_y < uniforms.output_height; pixel_y = pixel_y + 1u) {
+    if (pixel_y >= y_min_pixel && pixel_y <= y_max_pixel) {
+      textureStore(output_texture, vec2<i32>(i32(column), i32(pixel_y)), color);
+    } else {
+      textureStore(output_texture, vec2<i32>(i32(column), i32(pixel_y)), transparent);
+    }
+  }
+}
+`
+);
+var BLIT_VERTEX_SHADER = (
+  /* wgsl */
+  `
+
+struct VertexOutput {
+  @builtin(position) position: vec4<f32>,
+  @location(0) uv: vec2<f32>,
+}
+
+@vertex
+fn main(@builtin(vertex_index) vertex_index: u32) -> VertexOutput {
+  // Fullscreen quad from two triangles using vertex_index
+  var positions = array<vec2<f32>, 6>(
+    vec2<f32>(-1.0, -1.0),
+    vec2<f32>(1.0, -1.0),
+    vec2<f32>(-1.0, 1.0),
+    vec2<f32>(-1.0, 1.0),
+    vec2<f32>(1.0, -1.0),
+    vec2<f32>(1.0, 1.0),
+  );
+
+  var uvs = array<vec2<f32>, 6>(
+    vec2<f32>(0.0, 1.0),
+    vec2<f32>(1.0, 1.0),
+    vec2<f32>(0.0, 0.0),
+    vec2<f32>(0.0, 0.0),
+    vec2<f32>(1.0, 1.0),
+    vec2<f32>(1.0, 0.0),
+  );
+
+  var output: VertexOutput;
+  output.position = vec4<f32>(positions[vertex_index], 0.0, 1.0);
+  output.uv = uvs[vertex_index];
+  return output;
+}
+`
+);
+var BLIT_FRAGMENT_SHADER = (
+  /* wgsl */
+  `
+
+@group(0) @binding(0) var source_texture: texture_2d<f32>;
+@group(0) @binding(1) var source_sampler: sampler;
+
+@fragment
+fn main(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {
+  return textureSample(source_texture, source_sampler, uv);
+}
+`
+);
+
+// src/engine/blit.ts
+var BlitRenderer = class {
+  constructor(device, canvas) {
+    this.device = device;
+    const context = canvas.getContext("webgpu");
+    if (!context) {
+      throw new Error("Failed to get WebGPU canvas context");
+    }
+    this.context = context;
+    this.canvasFormat = navigator.gpu.getPreferredCanvasFormat();
+    this.context.configure({
+      device: this.device,
+      format: this.canvasFormat,
+      alphaMode: "premultiplied"
+    });
+    this.sampler = device.createSampler({
+      magFilter: "linear",
+      minFilter: "linear"
+    });
+    const vertexModule = device.createShaderModule({ code: BLIT_VERTEX_SHADER });
+    const fragmentModule = device.createShaderModule({ code: BLIT_FRAGMENT_SHADER });
+    this.pipeline = device.createRenderPipeline({
+      layout: "auto",
+      vertex: {
+        module: vertexModule,
+        entryPoint: "main"
+      },
+      fragment: {
+        module: fragmentModule,
+        entryPoint: "main",
+        targets: [{ format: this.canvasFormat }]
+      },
+      primitive: {
+        topology: "triangle-list"
+      }
+    });
+  }
+  render(texture) {
+    const textureView = texture.createView();
+    const bindGroup = this.device.createBindGroup({
+      layout: this.pipeline.getBindGroupLayout(0),
+      entries: [
+        { binding: 0, resource: textureView },
+        { binding: 1, resource: this.sampler }
+      ]
+    });
+    const commandEncoder = this.device.createCommandEncoder();
+    const renderPass = commandEncoder.beginRenderPass({
+      colorAttachments: [
+        {
+          view: this.context.getCurrentTexture().createView(),
+          clearValue: { r: 0, g: 0, b: 0, a: 1 },
+          loadOp: "clear",
+          storeOp: "store"
+        }
+      ]
+    });
+    renderPass.setPipeline(this.pipeline);
+    renderPass.setBindGroup(0, bindGroup);
+    renderPass.draw(6);
+    renderPass.end();
+    this.device.queue.submit([commandEncoder.finish()]);
+  }
+  resize(width, height) {
+    const canvas = this.context.canvas;
+    canvas.width = width;
+    canvas.height = height;
+    this.context.configure({
+      device: this.device,
+      format: this.canvasFormat,
+      alphaMode: "premultiplied"
+    });
+  }
+  destroy() {
+    this.context.unconfigure();
+  }
+};
+function useCanvasRef(ref) {
+  const internalCanvasReference = useRef(null);
+  const externalRefRef = useRef(ref);
+  externalRefRef.current = ref;
+  const canvasCallback = useCallback((canvas) => {
+    internalCanvasReference.current = canvas;
+    const externalRef = externalRefRef.current;
+    if (typeof externalRef === "function") {
+      externalRef(canvas);
+    } else if (externalRef) {
+      externalRef.current = canvas;
+    }
+  }, []);
+  return [internalCanvasReference, canvasCallback];
+}
+var SpectrogramCanvas = ({ computeResult, ref }) => {
+  const [internalCanvasReference, canvasCallback] = useCanvasRef(ref);
+  const blitReference = useRef(null);
+  const blitDeviceRef = useRef(null);
+  useEffect(() => {
+    const canvas = internalCanvasReference.current;
+    if (!canvas || computeResult.status !== "ready" || !computeResult.spectrogramTexture) {
+      return;
+    }
+    const { device } = computeResult.options.config;
+    const { width: width2, height: height2 } = computeResult.options.sampleQuery;
+    if (blitReference.current && blitDeviceRef.current !== device) {
+      blitReference.current.destroy();
+      blitReference.current = null;
+    }
+    blitReference.current ?? (blitReference.current = new BlitRenderer(device, canvas));
+    blitDeviceRef.current = device;
+    blitReference.current.resize(width2, height2);
+    blitReference.current.render(computeResult.spectrogramTexture);
+  }, [computeResult]);
+  useEffect(
+    () => () => {
+      blitReference.current?.destroy();
+      blitReference.current = null;
+    },
+    []
+  );
+  const { width, height } = computeResult.status === "ready" ? computeResult.options.sampleQuery : { width: 0, height: 0 };
+  return /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref: canvasCallback,
+      width,
+      height
+    }
+  );
+};
+
+// src/engine/band-mapping.ts
+function freqToMel(frequency) {
+  return 2595 * Math.log10(1 + frequency / 700);
+}
+function melToFreq(mel) {
+  return 700 * (Math.pow(10, mel / 2595) - 1);
+}
+function freqToErb(frequency) {
+  return 21.4 * Math.log10(1 + 437e-5 * frequency);
+}
+function erbToFreq(erb) {
+  return (Math.pow(10, erb / 21.4) - 1) / 437e-5;
+}
+function computeScaledBandMappings(numBands, minFreq, maxFreq, sampleRate, fftSize, toScale, fromScale) {
+  const scaleMin = toScale(minFreq);
+  const scaleMax = toScale(maxFreq);
+  const scaleStep = (scaleMax - scaleMin) / numBands;
+  const binWidth = sampleRate / fftSize;
+  const numLinearBins = fftSize / 2 + 1;
+  const mappings = [];
+  for (let band = 0; band < numBands; band++) {
+    const freqLow = fromScale(scaleMin + band * scaleStep);
+    const freqHigh = fromScale(scaleMin + (band + 1) * scaleStep);
+    const exactBinLow = freqLow / binWidth;
+    const exactBinHigh = freqHigh / binWidth;
+    const binStart = Math.max(0, Math.floor(exactBinLow));
+    const binEnd = Math.min(numLinearBins - 1, Math.ceil(exactBinHigh));
+    const weightStart = 1 - (exactBinLow - binStart);
+    const weightEnd = 1 - (binEnd - exactBinHigh);
+    mappings.push({
+      binStart,
+      binEnd: Math.max(binStart, binEnd),
+      weightStart: Math.max(0, Math.min(1, weightStart)),
+      weightEnd: Math.max(0, Math.min(1, weightEnd))
+    });
+  }
+  return mappings;
+}
+function computeBandMappings(scale, numBands, sampleRate, fftSize) {
+  if (scale === "linear") {
+    return new Float32Array(0);
+  }
+  const minFreq = 20;
+  const maxFreq = sampleRate / 2;
+  let mappings;
+  if (scale === "log") {
+    mappings = computeScaledBandMappings(
+      numBands,
+      minFreq,
+      maxFreq,
+      sampleRate,
+      fftSize,
+      Math.log,
+      Math.exp
+    );
+  } else if (scale === "mel") {
+    mappings = computeScaledBandMappings(
+      numBands,
+      minFreq,
+      maxFreq,
+      sampleRate,
+      fftSize,
+      freqToMel,
+      melToFreq
+    );
+  } else {
+    mappings = computeScaledBandMappings(
+      numBands,
+      minFreq,
+      maxFreq,
+      sampleRate,
+      fftSize,
+      freqToErb,
+      erbToFreq
+    );
+  }
+  const result = new Float32Array(mappings.length * 4);
+  for (let index = 0; index < mappings.length; index++) {
+    const mapping = mappings[index];
+    const offset = index * 4;
+    if (!mapping) {
+      continue;
+    }
+    result[offset] = mapping.binStart;
+    result[offset + 1] = mapping.binEnd;
+    result[offset + 2] = mapping.weightStart;
+    result[offset + 3] = mapping.weightEnd;
+  }
+  return result;
+}
+
+// src/utils/lava.ts
+var controlPoints = [
+  [0, 0, 0],
+  [5, 5, 30],
+  [15, 20, 70],
+  [30, 15, 50],
+  [80, 10, 5],
+  [140, 20, 0],
+  [185, 55, 0],
+  [215, 100, 5],
+  [240, 155, 25],
+  [252, 210, 70],
+  [255, 240, 140],
+  [255, 255, 255]
+];
+var lavaColormap = {
+  colors: controlPoints.map((color, index) => ({
+    position: index / (controlPoints.length - 1),
+    color
+  }))
+};
+
+// src/utils/viridis.ts
+var controlPoints2 = [
+  [68, 1, 84],
+  [72, 35, 116],
+  [64, 68, 135],
+  [52, 96, 141],
+  [33, 137, 136],
+  [26, 158, 123],
+  [42, 182, 91],
+  [118, 191, 47],
+  [168, 186, 35],
+  [208, 200, 29],
+  [240, 218, 28],
+  [253, 231, 37]
+];
+var viridisColormap = {
+  colors: controlPoints2.map((color, index) => ({
+    position: index / (controlPoints2.length - 1),
+    color
+  }))
+};
+
+// src/engine/colormap.ts
+function generateColormapBuffer(definition) {
+  const buffer = new Uint8Array(256 * 4);
+  const { colors } = definition;
+  for (let index = 0; index < 256; index++) {
+    const position = index / 255;
+    let lowerIndex = 0;
+    for (let ci = 0; ci < colors.length - 1; ci++) {
+      const entry = colors[ci];
+      if (entry && entry.position <= position) {
+        lowerIndex = ci;
+      }
+    }
+    const lower = colors[lowerIndex];
+    const upper = colors[Math.min(lowerIndex + 1, colors.length - 1)];
+    if (!lower || !upper) {
+      continue;
+    }
+    const range = upper.position - lower.position;
+    const interpolation = range === 0 ? 0 : (position - lower.position) / range;
+    const clamped = Math.max(0, Math.min(1, interpolation));
+    const offset = index * 4;
+    buffer[offset] = Math.round(lower.color[0] + (upper.color[0] - lower.color[0]) * clamped);
+    buffer[offset + 1] = Math.round(lower.color[1] + (upper.color[1] - lower.color[1]) * clamped);
+    buffer[offset + 2] = Math.round(lower.color[2] + (upper.color[2] - lower.color[2]) * clamped);
+    buffer[offset + 3] = 255;
+  }
+  return buffer;
+}
+function resolveColormap(colormap) {
+  if (colormap === "lava") {
+    return lavaColormap;
+  }
+  if (colormap === "viridis") {
+    return viridisColormap;
+  }
+  return colormap;
+}
+function resolveWaveformColor(colormap, override) {
+  if (override) {
+    return override;
+  }
+  if (colormap === "lava") {
+    return [40, 135, 180];
+  }
+  if (colormap === "viridis") {
+    return [180, 115, 42];
+  }
+  return [200, 200, 200];
+}
+
+// src/engine/device.ts
+var cachedDevicePromise = null;
+async function getDevice(provided) {
+  if (provided) {
+    void provided.lost.then((info) => {
+      console.error(`WebGPU device was lost: ${info.message}`);
+    });
+    checkSharedMemoryLimit(provided);
+    return provided;
+  }
+  if (cachedDevicePromise) return cachedDevicePromise;
+  cachedDevicePromise = createDevice();
+  return cachedDevicePromise;
+}
+async function createDevice() {
+  const gpu = navigator.gpu;
+  if (!gpu) {
+    throw new Error("WebGPU is not supported in this browser");
+  }
+  const adapter = await gpu.requestAdapter();
+  if (!adapter) {
+    throw new Error("Failed to obtain WebGPU adapter");
+  }
+  const device = await adapter.requestDevice({
+    requiredLimits: {
+      maxComputeWorkgroupStorageSize: adapter.limits.maxComputeWorkgroupStorageSize
+    }
+  });
+  void device.lost.then((info) => {
+    console.error(`WebGPU device was lost: ${info.message}`);
+    cachedDevicePromise = null;
+  });
+  checkSharedMemoryLimit(device);
+  return device;
+}
+function getMaxFftSize(device) {
+  const maxStorage = device.limits.maxComputeWorkgroupStorageSize;
+  const maxFft = Math.floor(maxStorage / (2 * 4));
+  return Math.pow(2, Math.floor(Math.log2(maxFft)));
+}
+function checkSharedMemoryLimit(device) {
+  const maxStorage = device.limits.maxComputeWorkgroupStorageSize;
+  const maxFft = getMaxFftSize(device);
+  if (maxStorage < 32768) {
+    console.warn(
+      `WebGPU device shared memory is ${maxStorage} bytes. FFT size will be clamped to ${maxFft} (max supported by this device).`
+    );
+  }
+}
+
+// src/engine/SpectralEngine.ts
+var DEFAULT_NON_LINEAR_BANDS = 512;
+var HOP_OVERLAP_FACTOR = 4;
+var MAX_INPUT_BUFFER_SAMPLES = 131072;
+async function checkShaderCompilation(module, label) {
+  const info = await module.getCompilationInfo();
+  const errors = info.messages.filter((entry) => entry.type === "error");
+  if (errors.length > 0) {
+    const details = errors.map((entry) => entry.message).join("\n");
+    throw new Error(`Shader compilation failed (${label}):
+${details}`);
+  }
+}
+function resolveConfig(config) {
+  const colormapInput = config.colormap ?? "lava";
+  const resolvedColormap = resolveColormap(colormapInput);
+  const waveformColor = resolveWaveformColor(colormapInput, config.waveformColor);
+  return {
+    ...config,
+    fftSize: config.fftSize ?? 4096,
+    frequencyScale: config.frequencyScale ?? "log",
+    dbRange: config.dbRange ?? [-120, 0],
+    colormap: resolvedColormap,
+    waveformColor,
+    spectrogram: config.spectrogram ?? true,
+    loudness: config.loudness ?? true,
+    truePeak: config.truePeak ?? true
+  };
+}
+function makeCacheKey(fftSize, frequencyScale) {
+  return `${fftSize}:${frequencyScale}`;
+}
+var SpectralEngine = class {
+  constructor(device) {
+    this.pipelineCache = /* @__PURE__ */ new Map();
+    this.device = device;
+  }
+  async prepare(sampleCount, sampleRate, config) {
+    const { fftSize: requestedFftSize, frequencyScale } = config;
+    const maxFft = getMaxFftSize(this.device);
+    const fftSize = Math.min(requestedFftSize, maxFft);
+    if (sampleCount < fftSize) {
+      throw new Error(`Audio segment too short for FFT size ${fftSize} \u2014 need at least ${fftSize} samples, got ${sampleCount}`);
+    }
+    const isLinear = frequencyScale === "linear";
+    const numBands = isLinear ? fftSize / 2 + 1 : DEFAULT_NON_LINEAR_BANDS;
+    const hopSize = Math.max(1, Math.floor(fftSize / HOP_OVERLAP_FACTOR));
+    const totalFrames = Math.floor((sampleCount - fftSize) / hopSize) + 1;
+    const bandMappingData = computeBandMappings(frequencyScale, numBands, sampleRate, fftSize);
+    const resolvedColormap = typeof config.colormap === "string" ? resolveColormap(config.colormap) : config.colormap;
+    const colormapData = generateColormapBuffer(resolvedColormap);
+    const pipelines = await this.getOrCreatePipelines(fftSize, frequencyScale);
+    const magnitudeBuffer = this.device.createBuffer({
+      size: totalFrames * numBands * 4,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
+    });
+    const bandMappingBuffer = this.device.createBuffer({
+      size: Math.max(16, bandMappingData.byteLength),
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+      mappedAtCreation: true
+    });
+    new Float32Array(bandMappingBuffer.getMappedRange(0, bandMappingData.byteLength)).set(bandMappingData);
+    bandMappingBuffer.unmap();
+    const colormapPackedData = new Uint32Array(256);
+    for (let index = 0; index < 256; index++) {
+      const offset = index * 4;
+      const red = colormapData[offset] ?? 0;
+      const green = colormapData[offset + 1] ?? 0;
+      const blue = colormapData[offset + 2] ?? 0;
+      const alpha = colormapData[offset + 3] ?? 0;
+      colormapPackedData[index] = red | green << 8 | blue << 16 | alpha << 24;
+    }
+    const colormapBuffer = this.device.createBuffer({
+      size: colormapPackedData.byteLength,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+      mappedAtCreation: true
+    });
+    new Uint32Array(colormapBuffer.getMappedRange()).set(colormapPackedData);
+    colormapBuffer.unmap();
+    const inputBuffer = this.device.createBuffer({
+      size: (MAX_INPUT_BUFFER_SAMPLES + fftSize) * 4,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+    });
+    const uniformBuffer = this.device.createBuffer({
+      size: 32,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    });
+    return {
+      fftSize,
+      hopSize,
+      totalFrames,
+      overlapBuffer: new Float32Array(fftSize),
+      overlapCount: 0,
+      hopOffset: 0,
+      magnitudeBuffer,
+      bandMappingBuffer,
+      colormapBuffer,
+      inputBuffer,
+      uniformBuffer,
+      pipelines,
+      numBands,
+      isLinear
+    };
+  }
+  submitChunk(monoSamples, chunkLength, context) {
+    const { fftSize, hopSize, totalFrames, overlapBuffer } = context;
+    const totalSamples = context.overlapCount + chunkLength;
+    const combined = new Float32Array(totalSamples);
+    if (context.overlapCount > 0) {
+      combined.set(overlapBuffer.subarray(0, context.overlapCount));
+    }
+    combined.set(monoSamples.subarray(0, chunkLength), context.overlapCount);
+    let localOffset = 0;
+    while (localOffset + fftSize <= totalSamples && context.hopOffset < totalFrames) {
+      const maxHops = Math.floor((totalSamples - localOffset - fftSize) / hopSize) + 1;
+      const remainingHops = totalFrames - context.hopOffset;
+      const hopsInBatch = Math.min(maxHops, remainingHops, Math.floor((MAX_INPUT_BUFFER_SAMPLES - fftSize) / hopSize) + 1);
+      if (hopsInBatch <= 0) break;
+      const batchSamples = (hopsInBatch - 1) * hopSize + fftSize;
+      const batchData = combined.subarray(localOffset, localOffset + batchSamples);
+      this.device.queue.writeBuffer(context.inputBuffer, 0, batchData.buffer, batchData.byteOffset, batchData.byteLength);
+      const uniformData = new Uint32Array(8);
+      uniformData[0] = fftSize;
+      uniformData[1] = context.hopOffset;
+      uniformData[2] = context.numBands;
+      uniformData[3] = context.isLinear ? 0 : 1;
+      uniformData[4] = hopSize;
+      this.device.queue.writeBuffer(context.uniformBuffer, 0, uniformData);
+      const fftBindGroup = this.device.createBindGroup({
+        layout: context.pipelines.fftPipeline.getBindGroupLayout(0),
+        entries: [
+          { binding: 0, resource: { buffer: context.inputBuffer } },
+          { binding: 1, resource: { buffer: context.magnitudeBuffer } },
+          { binding: 2, resource: { buffer: context.bandMappingBuffer } },
+          { binding: 3, resource: { buffer: context.uniformBuffer } }
+        ]
+      });
+      const commandEncoder = this.device.createCommandEncoder();
+      const computePass = commandEncoder.beginComputePass();
+      computePass.setPipeline(context.pipelines.fftPipeline);
+      computePass.setBindGroup(0, fftBindGroup);
+      computePass.dispatchWorkgroups(hopsInBatch);
+      computePass.end();
+      this.device.queue.submit([commandEncoder.finish()]);
+      localOffset += hopsInBatch * hopSize;
+      context.hopOffset += hopsInBatch;
+    }
+    const consumed = localOffset;
+    const remaining = totalSamples - consumed;
+    if (remaining > 0) {
+      overlapBuffer.set(combined.subarray(consumed, consumed + remaining));
+    }
+    context.overlapCount = remaining;
+  }
+  finalize(dimensions, context, config) {
+    const { width, height } = dimensions;
+    const spectrogramTexture = this.device.createTexture({
+      size: dimensions,
+      format: "rgba8unorm",
+      usage: GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_SRC
+    });
+    const spectrogramUniformData = new ArrayBuffer(24);
+    const spectrogramUniforms = new DataView(spectrogramUniformData);
+    spectrogramUniforms.setUint32(0, context.totalFrames, true);
+    spectrogramUniforms.setUint32(4, context.numBands, true);
+    spectrogramUniforms.setUint32(8, width, true);
+    spectrogramUniforms.setUint32(12, height, true);
+    spectrogramUniforms.setFloat32(16, config.dbRange[0], true);
+    spectrogramUniforms.setFloat32(20, config.dbRange[1], true);
+    const spectrogramUniformBuffer = this.device.createBuffer({
+      size: 24,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+      mappedAtCreation: true
+    });
+    new Uint8Array(spectrogramUniformBuffer.getMappedRange()).set(new Uint8Array(spectrogramUniformData));
+    spectrogramUniformBuffer.unmap();
+    const spectrogramBindGroup = this.device.createBindGroup({
+      layout: context.pipelines.spectrogramPipeline.getBindGroupLayout(0),
+      entries: [
+        { binding: 0, resource: { buffer: context.magnitudeBuffer } },
+        { binding: 1, resource: { buffer: context.colormapBuffer } },
+        { binding: 2, resource: spectrogramTexture.createView() },
+        { binding: 3, resource: { buffer: spectrogramUniformBuffer } }
+      ]
+    });
+    const commandEncoder = this.device.createCommandEncoder();
+    const computePass = commandEncoder.beginComputePass();
+    computePass.setPipeline(context.pipelines.spectrogramPipeline);
+    computePass.setBindGroup(0, spectrogramBindGroup);
+    computePass.dispatchWorkgroups(Math.ceil(width / 64), height);
+    computePass.end();
+    this.device.queue.submit([commandEncoder.finish()]);
+    spectrogramUniformBuffer.destroy();
+    this.cleanupContext(context);
+    return { spectrogramTexture, width, height };
+  }
+  cleanupContext(context) {
+    context.magnitudeBuffer.destroy();
+    context.bandMappingBuffer.destroy();
+    context.colormapBuffer.destroy();
+    context.inputBuffer.destroy();
+    context.uniformBuffer.destroy();
+  }
+  destroy() {
+    this.pipelineCache.clear();
+  }
+  async getOrCreatePipelines(fftSize, frequencyScale) {
+    const cacheString = makeCacheKey(fftSize, frequencyScale);
+    const cached = this.pipelineCache.get(cacheString);
+    if (cached) {
+      return cached;
+    }
+    const workgroupSize = Math.min(fftSize / 2, 256);
+    const fftModule = this.device.createShaderModule({ code: FFT_PIPELINE_SHADER });
+    const spectrogramModule = this.device.createShaderModule({ code: SPECTROGRAM_VISUALIZE_SHADER });
+    await checkShaderCompilation(fftModule, "FFT pipeline");
+    await checkShaderCompilation(spectrogramModule, "spectrogram visualization");
+    const fftPipeline = this.device.createComputePipeline({
+      layout: "auto",
+      compute: {
+        module: fftModule,
+        entryPoint: "main",
+        constants: {
+          WORKGROUP_SIZE: workgroupSize,
+          FFT_SIZE: fftSize
+        }
+      }
+    });
+    const spectrogramPipeline = this.device.createComputePipeline({
+      layout: "auto",
+      compute: {
+        module: spectrogramModule,
+        entryPoint: "main"
+      }
+    });
+    const pipelines = { fftPipeline, spectrogramPipeline };
+    this.pipelineCache.set(cacheString, pipelines);
+    return pipelines;
+  }
+};
+
+// src/engine/loudness.ts
+var LUFS_OFFSET = -0.691;
+var ABSOLUTE_GATE_THRESHOLD = -70;
+var RELATIVE_GATE_OFFSET = -10;
+var WAVEFORM_POINTS_PER_SECOND = 500;
+var MOMENTARY_WINDOW_MS = 400;
+var SHORT_TERM_WINDOW_MS = 3e3;
+var BLOCK_DURATION_MS = 400;
+var BLOCK_STEP_MS = 100;
+function meanSquareToLufs(meanSquare) {
+  if (meanSquare <= 0) return -Infinity;
+  return LUFS_OFFSET + 10 * Math.log10(meanSquare);
+}
+function computeMomentaryLufs(kWeightedMeanSquare, windowPoints) {
+  const pointCount = kWeightedMeanSquare.length;
+  const result = new Float32Array(pointCount);
+  let runningSum = 0;
+  for (let pt = 0; pt < pointCount; pt++) {
+    runningSum += kWeightedMeanSquare[pt];
+    if (pt >= windowPoints) {
+      runningSum -= kWeightedMeanSquare[pt - windowPoints];
+    }
+    if (pt + 1 < windowPoints) {
+      result[pt] = -Infinity;
+    } else {
+      result[pt] = meanSquareToLufs(runningSum / windowPoints);
+    }
+  }
+  return result;
+}
+function computeIntegratedLufs(blockLoudness) {
+  const absoluteSurvivors = [];
+  for (let bi = 0; bi < blockLoudness.length; bi++) {
+    const lufs = blockLoudness[bi];
+    if (lufs > ABSOLUTE_GATE_THRESHOLD) {
+      absoluteSurvivors.push(lufs);
+    }
+  }
+  if (absoluteSurvivors.length === 0) return -Infinity;
+  let absoluteMeanPower = 0;
+  for (const lufs of absoluteSurvivors) {
+    absoluteMeanPower += Math.pow(10, (lufs - LUFS_OFFSET) / 10);
+  }
+  absoluteMeanPower /= absoluteSurvivors.length;
+  const relativeThreshold = meanSquareToLufs(absoluteMeanPower) + RELATIVE_GATE_OFFSET;
+  let relativeMeanPower = 0;
+  let relativeCount = 0;
+  for (const lufs of absoluteSurvivors) {
+    if (lufs > relativeThreshold) {
+      relativeMeanPower += Math.pow(10, (lufs - LUFS_OFFSET) / 10);
+      relativeCount++;
+    }
+  }
+  if (relativeCount === 0) return -Infinity;
+  relativeMeanPower /= relativeCount;
+  return meanSquareToLufs(relativeMeanPower);
+}
+function computeLoudnessData(scanContext, overallPeak, overallRms, truePeak) {
+  const { rmsEnvelope, peakEnvelope } = scanContext;
+  const pointCount = scanContext.state.pointIndex;
+  const kWeightedMeanSquare = scanContext.kWeightedMeanSquare.subarray(0, pointCount);
+  const momentaryWindowPoints = Math.round(MOMENTARY_WINDOW_MS / 1e3 * WAVEFORM_POINTS_PER_SECOND);
+  const shortTermWindowPoints = Math.round(SHORT_TERM_WINDOW_MS / 1e3 * WAVEFORM_POINTS_PER_SECOND);
+  const momentaryLufs = computeMomentaryLufs(kWeightedMeanSquare, momentaryWindowPoints);
+  const shortTermLufs = computeMomentaryLufs(kWeightedMeanSquare, shortTermWindowPoints);
+  const blockPoints = Math.round(BLOCK_DURATION_MS / 1e3 * WAVEFORM_POINTS_PER_SECOND);
+  const stepPoints = Math.round(BLOCK_STEP_MS / 1e3 * WAVEFORM_POINTS_PER_SECOND);
+  const blockLoudnessValues = [];
+  for (let start = 0; start + blockPoints <= pointCount; start += stepPoints) {
+    let sum = 0;
+    for (let pt = start; pt < start + blockPoints; pt++) {
+      sum += kWeightedMeanSquare[pt];
+    }
+    blockLoudnessValues.push(meanSquareToLufs(sum / blockPoints));
+  }
+  const blockLoudness = new Float32Array(blockLoudnessValues);
+  const integratedLufs = computeIntegratedLufs(blockLoudness);
+  const peakDb = overallPeak > 0 ? 20 * Math.log10(overallPeak) : -Infinity;
+  const truePeakDb = truePeak !== void 0 && truePeak > 0 ? 20 * Math.log10(truePeak) : void 0;
+  const rmsDb = overallRms > 0 ? 20 * Math.log10(overallRms) : -Infinity;
+  const crestFactor = overallRms > 0 ? 20 * Math.log10(overallPeak / overallRms) : 0;
+  return {
+    rmsEnvelope,
+    peakEnvelope,
+    momentaryLufs,
+    shortTermLufs,
+    integratedLufs,
+    peakDb,
+    truePeak,
+    truePeakDb,
+    rmsDb,
+    crestFactor,
+    pointCount
+  };
+}
+
+// src/engine/k-weighting.ts
+function createBiquadState() {
+  return { x1: 0, x2: 0, y1: 0, y2: 0 };
+}
+function computeHighShelfCoefficients(sampleRate) {
+  const freq = 1681.974450955533;
+  const gain = 3.999843853973347;
+  const quality = 0.7071752369554196;
+  const vh = Math.pow(10, gain / 20);
+  const vb = Math.sqrt(vh);
+  const kk = Math.tan(Math.PI * freq / sampleRate);
+  const k2 = kk * kk;
+  const denominator = 1 + kk / quality + k2;
+  return {
+    b0: (vh + vb * kk / quality + k2) / denominator,
+    b1: 2 * (k2 - vh) / denominator,
+    b2: (vh - vb * kk / quality + k2) / denominator,
+    a1: 2 * (k2 - 1) / denominator,
+    a2: (1 - kk / quality + k2) / denominator
+  };
+}
+function computeHighPassCoefficients(sampleRate) {
+  const freq = 38.13547087602444;
+  const quality = 0.5003270373238773;
+  const kk = Math.tan(Math.PI * freq / sampleRate);
+  const k2 = kk * kk;
+  const denominator = 1 + kk / quality + k2;
+  return {
+    b0: 1 / denominator,
+    b1: -2 / denominator,
+    b2: 1 / denominator,
+    a1: 2 * (k2 - 1) / denominator,
+    a2: (1 - kk / quality + k2) / denominator
+  };
+}
+function computeKWeightingCoefficients(sampleRate) {
+  return {
+    stage1: computeHighShelfCoefficients(sampleRate),
+    stage2: computeHighPassCoefficients(sampleRate)
+  };
+}
+
+// src/engine/true-peak.ts
+var OVERSAMPLING = 4;
+var TAPS_PER_PHASE = 12;
+var FILTER_LENGTH = TAPS_PER_PHASE * OVERSAMPLING;
+function createTruePeakState() {
+  return {
+    buffer: new Float32Array(TAPS_PER_PHASE * 2),
+    index: 0
+  };
+}
+function besselI0(x) {
+  let sum = 1;
+  let term = 1;
+  for (let ki = 1; ki <= 25; ki++) {
+    term *= x / (2 * ki) * (x / (2 * ki));
+    sum += term;
+  }
+  return sum;
+}
+function computePhases() {
+  const center = (FILTER_LENGTH - 1) / 2;
+  const prototype = new Float32Array(FILTER_LENGTH);
+  const beta = 9;
+  const i0Beta = besselI0(beta);
+  for (let ni = 0; ni < FILTER_LENGTH; ni++) {
+    const x = (ni - center) / OVERSAMPLING;
+    const sinc = x === 0 ? 1 : Math.sin(Math.PI * x) / (Math.PI * x);
+    const arg = 2 * ni / (FILTER_LENGTH - 1) - 1;
+    const win = besselI0(beta * Math.sqrt(Math.max(0, 1 - arg * arg))) / i0Beta;
+    prototype[ni] = sinc * win;
+  }
+  const phases = [];
+  for (let ph = 0; ph < OVERSAMPLING; ph++) {
+    const phase = new Float32Array(TAPS_PER_PHASE);
+    for (let ti = 0; ti < TAPS_PER_PHASE; ti++) {
+      phase[ti] = prototype[OVERSAMPLING * ti + ph];
+    }
+    const dcGain = phase.reduce((sum, coeff) => sum + coeff, 0);
+    if (dcGain > 0) {
+      for (let ti = 0; ti < TAPS_PER_PHASE; ti++) {
+        phase[ti] = phase[ti] / dcGain;
+      }
+    }
+    phases.push(phase);
+  }
+  return phases;
+}
+var truePeakPhases = computePhases();
+function truePeakMaxAbs(sample, state) {
+  const { buffer } = state;
+  buffer[state.index] = sample;
+  buffer[state.index + TAPS_PER_PHASE] = sample;
+  state.index = state.index + 1;
+  if (state.index >= TAPS_PER_PHASE) state.index = 0;
+  const readBase = state.index;
+  let maxAbs = 0;
+  for (let ph = 0; ph < OVERSAMPLING; ph++) {
+    const phase = truePeakPhases[ph];
+    let sum = 0;
+    for (let ti = 0; ti < TAPS_PER_PHASE; ti++) {
+      sum += phase[ti] * buffer[readBase + TAPS_PER_PHASE - 1 - ti];
+    }
+    const abs = sum < 0 ? -sum : sum;
+    if (abs > maxAbs) maxAbs = abs;
+  }
+  return maxAbs;
+}
+
+// src/engine/sample-scan.ts
+function createScanContext(metadata, pointCount, samplesPerPoint, chunkSize, computeLoudness = true, computeTruePeak = true) {
+  const { channelCount, sampleRate, channelWeights: weights } = metadata;
+  const biquadStates = [];
+  const truePeakStates = [];
+  for (let ch = 0; ch < channelCount; ch++) {
+    biquadStates.push({
+      stage1: createBiquadState(),
+      stage2: createBiquadState()
+    });
+    truePeakStates.push(createTruePeakState());
+  }
+  const channelWeights = new Float32Array(channelCount);
+  if (weights) {
+    for (let ch = 0; ch < channelCount; ch++) {
+      channelWeights[ch] = weights[ch] ?? 1;
+    }
+  } else {
+    channelWeights.fill(1);
+  }
+  return {
+    channelCount,
+    channelWeights,
+    samplesPerPoint,
+    computeLoudness,
+    computeTruePeak,
+    kWeightingCoefficients: computeKWeightingCoefficients(sampleRate),
+    state: {
+      pointIndex: 0,
+      samplesInCurrentPoint: 0,
+      pointMin: Infinity,
+      pointMax: -Infinity,
+      pointSumSq: 0,
+      pointPeak: 0,
+      kWeightedPointSum: 0,
+      overallPeakAbs: 0,
+      overallSumSquares: 0,
+      totalSampleValues: 0,
+      truePeakAbs: 0,
+      biquadStates,
+      truePeakStates
+    },
+    monoBuffer: new Float32Array(chunkSize),
+    kwBuffer: new Float32Array(chunkSize),
+    waveformBuffer: new Float32Array(pointCount * 2),
+    rmsEnvelope: new Float32Array(pointCount),
+    peakEnvelope: new Float32Array(pointCount),
+    kWeightedMeanSquare: new Float32Array(pointCount)
+  };
+}
+function finalizeScan(context) {
+  const { state } = context;
+  return {
+    overallPeak: state.overallPeakAbs,
+    overallRms: state.totalSampleValues > 0 ? Math.sqrt(state.overallSumSquares / state.totalSampleValues) : 0,
+    truePeak: state.truePeakAbs
+  };
+}
+function scanSamples(channelBuffers, samplesPerChannel, context, timing) {
+  const { channelCount, channelWeights, samplesPerPoint, computeLoudness, computeTruePeak, kWeightingCoefficients, state, monoBuffer, kwBuffer, waveformBuffer, rmsEnvelope, peakEnvelope, kWeightedMeanSquare } = context;
+  const invChannels = 1 / channelCount;
+  const { stage1: s1Coeffs, stage2: s2Coeffs } = kWeightingCoefficients;
+  const lastChannel = channelCount - 1;
+  const pointCount = Math.ceil(waveformBuffer.length / 2);
+  monoBuffer.fill(0, 0, samplesPerChannel);
+  kwBuffer.fill(0, 0, samplesPerChannel);
+  let { pointIndex, samplesInCurrentPoint } = state;
+  let { pointMin, pointMax, pointSumSq, pointPeak, kWeightedPointSum } = state;
+  let { overallPeakAbs, overallSumSquares, totalSampleValues, truePeakAbs } = state;
+  const s1b0 = s1Coeffs.b0;
+  const s1b1 = s1Coeffs.b1;
+  const s1b2 = s1Coeffs.b2;
+  const s1a1 = s1Coeffs.a1;
+  const s1a2 = s1Coeffs.a2;
+  const s2b0 = s2Coeffs.b0;
+  const s2b1 = s2Coeffs.b1;
+  const s2b2 = s2Coeffs.b2;
+  const s2a1 = s2Coeffs.a1;
+  const s2a2 = s2Coeffs.a2;
+  for (let ch = 0; ch < channelCount; ch++) {
+    const channelData = channelBuffers[ch];
+    const biquad = state.biquadStates[ch];
+    const chWeight = channelWeights[ch];
+    const tpState = state.truePeakStates[ch];
+    let s1x1 = biquad.stage1.x1;
+    let s1x2 = biquad.stage1.x2;
+    let s1y1 = biquad.stage1.y1;
+    let s1y2 = biquad.stage1.y2;
+    let s2x1 = biquad.stage2.x1;
+    let s2x2 = biquad.stage2.x2;
+    let s2y1 = biquad.stage2.y1;
+    let s2y2 = biquad.stage2.y2;
+    if (ch < lastChannel) {
+      for (let si = 0; si < samplesPerChannel; si++) {
+        const sample = channelData[si];
+        monoBuffer[si] = monoBuffer[si] + sample;
+        if (computeLoudness) {
+          const s1out = s1b0 * sample + s1b1 * s1x1 + s1b2 * s1x2 - s1a1 * s1y1 - s1a2 * s1y2;
+          s1x2 = s1x1;
+          s1x1 = sample;
+          s1y2 = s1y1;
+          s1y1 = s1out;
+          const kw = s2b0 * s1out + s2b1 * s2x1 + s2b2 * s2x2 - s2a1 * s2y1 - s2a2 * s2y2;
+          s2x2 = s2x1;
+          s2x1 = s1out;
+          s2y2 = s2y1;
+          s2y1 = kw;
+          kwBuffer[si] = kwBuffer[si] + chWeight * kw * kw;
+        }
+        if (computeTruePeak) {
+          const tp = truePeakMaxAbs(sample, tpState);
+          if (tp > truePeakAbs) truePeakAbs = tp;
+        }
+      }
+    } else {
+      for (let si = 0; si < samplesPerChannel; si++) {
+        const sample = channelData[si];
+        const mono = (monoBuffer[si] + sample) * invChannels;
+        monoBuffer[si] = mono;
+        if (computeLoudness) {
+          const s1out = s1b0 * sample + s1b1 * s1x1 + s1b2 * s1x2 - s1a1 * s1y1 - s1a2 * s1y2;
+          s1x2 = s1x1;
+          s1x1 = sample;
+          s1y2 = s1y1;
+          s1y1 = s1out;
+          const kw = s2b0 * s1out + s2b1 * s2x1 + s2b2 * s2x2 - s2a1 * s2y1 - s2a2 * s2y2;
+          s2x2 = s2x1;
+          s2x1 = s1out;
+          s2y2 = s2y1;
+          s2y1 = kw;
+          kWeightedPointSum += kwBuffer[si] + chWeight * kw * kw;
+        }
+        if (computeTruePeak) {
+          const tp = truePeakMaxAbs(sample, tpState);
+          if (tp > truePeakAbs) truePeakAbs = tp;
+        }
+        const sq = mono * mono;
+        const abs = mono < 0 ? -mono : mono;
+        if (mono < pointMin) pointMin = mono;
+        if (mono > pointMax) pointMax = mono;
+        pointSumSq += sq;
+        if (abs > pointPeak) pointPeak = abs;
+        if (abs > overallPeakAbs) overallPeakAbs = abs;
+        overallSumSquares += sq;
+        samplesInCurrentPoint++;
+        totalSampleValues++;
+        if (samplesInCurrentPoint >= samplesPerPoint && pointIndex < pointCount) {
+          const wo = pointIndex * 2;
+          const invSamples = 1 / samplesInCurrentPoint;
+          waveformBuffer[wo] = pointMin;
+          waveformBuffer[wo + 1] = pointMax;
+          rmsEnvelope[pointIndex] = Math.sqrt(pointSumSq * invSamples);
+          peakEnvelope[pointIndex] = pointPeak;
+          kWeightedMeanSquare[pointIndex] = kWeightedPointSum * invSamples;
+          pointMin = Infinity;
+          pointMax = -Infinity;
+          pointSumSq = 0;
+          pointPeak = 0;
+          kWeightedPointSum = 0;
+          samplesInCurrentPoint = 0;
+          pointIndex++;
+        }
+      }
+    }
+    biquad.stage1.x1 = s1x1;
+    biquad.stage1.x2 = s1x2;
+    biquad.stage1.y1 = s1y1;
+    biquad.stage1.y2 = s1y2;
+    biquad.stage2.x1 = s2x1;
+    biquad.stage2.x2 = s2x2;
+    biquad.stage2.y1 = s2y1;
+    biquad.stage2.y2 = s2y2;
+  }
+  state.overallPeakAbs = overallPeakAbs;
+  state.overallSumSquares = overallSumSquares;
+  state.totalSampleValues = totalSampleValues;
+  state.truePeakAbs = truePeakAbs;
+  state.pointIndex = pointIndex;
+  state.samplesInCurrentPoint = samplesInCurrentPoint;
+  state.pointMin = pointMin;
+  state.pointMax = pointMax;
+  state.pointSumSq = pointSumSq;
+  state.pointPeak = pointPeak;
+  state.kWeightedPointSum = kWeightedPointSum;
+}
+
+// src/engine/runPipeline.ts
+var DEFAULT_CHUNK_SIZE = 131072;
+function yieldControl() {
+  if (typeof scheduler !== "undefined" && typeof scheduler.yield === "function") {
+    return scheduler.yield();
+  }
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
+async function runPipeline(options, engine) {
+  const { metadata, sampleQuery, readSamples, config } = options;
+  const { sampleRate, channelCount } = metadata;
+  const { startSample, endSample } = sampleQuery;
+  const { signal } = config;
+  const sampleCount = endSample - startSample;
+  const samplesPerPoint = Math.round(sampleRate / WAVEFORM_POINTS_PER_SECOND);
+  const pointCount = Math.ceil(sampleCount / samplesPerPoint);
+  const resolvedConfig = resolveConfig(config);
+  const { spectrogram, loudness, truePeak: computeTruePeak } = resolvedConfig;
+  const scanContext = createScanContext(metadata, pointCount, samplesPerPoint, DEFAULT_CHUNK_SIZE, loudness, computeTruePeak);
+  const spectralContext = spectrogram ? await engine.prepare(sampleCount, sampleRate, resolvedConfig) : null;
+  let offset = 0;
+  try {
+    while (offset < sampleCount) {
+      if (signal.aborted) {
+        if (spectralContext) engine.cleanupContext(spectralContext);
+        throw new DOMException("Aborted", "AbortError");
+      }
+      const chunkFrames = Math.min(DEFAULT_CHUNK_SIZE, sampleCount - offset);
+      const channelBuffers = await Promise.all(Array.from({ length: channelCount }, (_, ch) => readSamples(ch, startSample + offset, chunkFrames)));
+      scanSamples(channelBuffers, chunkFrames, scanContext);
+      if (spectralContext) {
+        engine.submitChunk(scanContext.monoBuffer, chunkFrames, spectralContext);
+      }
+      offset += chunkFrames;
+      await yieldControl();
+    }
+  } catch (error) {
+    if (spectralContext) engine.cleanupContext(spectralContext);
+    throw error;
+  }
+  const { overallPeak, overallRms, truePeak } = finalizeScan(scanContext);
+  const loudnessData = loudness ? computeLoudnessData(scanContext, overallPeak, overallRms, computeTruePeak ? truePeak : void 0) : null;
+  const spectrogramTexture = spectralContext ? engine.finalize(sampleQuery, spectralContext, resolvedConfig).spectrogramTexture : null;
+  const resolvedOptions = {
+    ...options,
+    config: resolvedConfig
+  };
+  return {
+    waveformBuffer: scanContext.waveformBuffer,
+    waveformPointCount: scanContext.state.pointIndex,
+    loudnessData,
+    spectrogramTexture,
+    options: resolvedOptions
+  };
+}
+
+// src/useSpectralCompute.tsx
+var EMPTY_RESULT = { status: "idle" };
+function useSpectralCompute(options) {
+  const { metadata, query, readSamples, config } = options;
+  const { sampleRate, sampleCount, channelCount } = metadata;
+  const { startMs, endMs, width, height } = query;
+  const providedDevice = config?.device;
+  let signal = config?.signal;
+  const deviceReference = useRef(null);
+  const engineReference = useRef(null);
+  const engineDeviceRef = useRef(null);
+  const previousTextureRef = useRef(null);
+  const abortControllerReference = useRef(null);
+  const readSamplesRef = useRef(readSamples);
+  readSamplesRef.current = readSamples;
+  const [result, setResult] = useState(EMPTY_RESULT);
+  const configKey = JSON.stringify(config ?? null);
+  useEffect(() => {
+    abortControllerReference.current?.abort();
+    if (metadata.sampleCount === 0) return;
+    const controller = new AbortController();
+    abortControllerReference.current = controller;
+    signal ?? (signal = controller.signal);
+    if (signal.aborted) {
+      controller.abort();
+    } else {
+      signal.addEventListener("abort", () => controller.abort(), { once: true });
+    }
+    const sampleQuery = {
+      startSample: Math.floor(startMs / 1e3 * sampleRate),
+      endSample: Math.min(Math.ceil(endMs / 1e3 * sampleRate), sampleCount),
+      width,
+      height
+    };
+    void (async () => {
+      try {
+        deviceReference.current ?? (deviceReference.current = await getDevice(providedDevice));
+        const device = deviceReference.current;
+        const pipelineOptions = {
+          metadata,
+          sampleQuery,
+          readSamples,
+          config: {
+            ...config,
+            device,
+            signal
+          }
+        };
+        if (engineReference.current && engineDeviceRef.current !== device) {
+          engineReference.current.destroy();
+          engineReference.current = null;
+        }
+        engineReference.current ?? (engineReference.current = new SpectralEngine(device));
+        engineDeviceRef.current = device;
+        const pipelineResult = await runPipeline(pipelineOptions, engineReference.current);
+        previousTextureRef.current?.destroy();
+        previousTextureRef.current = pipelineResult.spectrogramTexture;
+        setResult({
+          status: "ready",
+          ...pipelineResult
+        });
+      } catch (error) {
+        if (error instanceof DOMException && error.name === "AbortError") {
+          return;
+        }
+        setResult({
+          status: "error",
+          error: error instanceof Error ? error : new Error(String(error))
+        });
+      }
+    })();
+    return () => {
+      controller.abort();
+    };
+  }, [sampleRate, channelCount, sampleCount, startMs, endMs, width, height, providedDevice, configKey]);
+  useEffect(
+    () => () => {
+      engineReference.current?.destroy();
+      engineReference.current = null;
+      previousTextureRef.current?.destroy();
+      previousTextureRef.current = null;
+    },
+    []
+  );
+  return result;
+}
+var DEFAULT_WAVEFORM_COLOR = [0, 255, 0];
+var WaveformCanvas = ({ computeResult, ref, color = DEFAULT_WAVEFORM_COLOR }) => {
+  const [internalCanvasReference, canvasCallback] = useCanvasRef(ref);
+  const blitReference = useRef(null);
+  const blitDeviceRef = useRef(null);
+  const pipelineReference = useRef(null);
+  const waveformGpuBufferRef = useRef(null);
+  const outputTextureRef = useRef(null);
+  const uniformBufferRef = useRef(null);
+  const bindGroupRef = useRef(null);
+  const lastComputeResultRef = useRef(null);
+  const lastDimensionsRef = useRef(null);
+  useEffect(() => {
+    const canvas = internalCanvasReference.current;
+    if (!canvas || computeResult.status !== "ready" || !computeResult.waveformBuffer || computeResult.waveformPointCount === 0) {
+      return;
+    }
+    const { device } = computeResult.options.config;
+    const { width: width2, height: height2 } = computeResult.options.sampleQuery;
+    const { waveformBuffer, waveformPointCount } = computeResult;
+    if (blitReference.current && blitDeviceRef.current !== device) {
+      blitReference.current.destroy();
+      blitReference.current = null;
+      pipelineReference.current = null;
+      waveformGpuBufferRef.current?.destroy();
+      waveformGpuBufferRef.current = null;
+      outputTextureRef.current?.destroy();
+      outputTextureRef.current = null;
+      uniformBufferRef.current?.destroy();
+      uniformBufferRef.current = null;
+      bindGroupRef.current = null;
+      lastComputeResultRef.current = null;
+      lastDimensionsRef.current = null;
+    }
+    blitReference.current ?? (blitReference.current = new BlitRenderer(device, canvas));
+    blitDeviceRef.current = device;
+    if (!pipelineReference.current) {
+      const shaderModule = device.createShaderModule({ code: WAVEFORM_VISUALIZE_SHADER });
+      pipelineReference.current = device.createComputePipeline({
+        layout: "auto",
+        compute: {
+          module: shaderModule,
+          entryPoint: "main"
+        }
+      });
+    }
+    const pipeline = pipelineReference.current;
+    const computeResultChanged = lastComputeResultRef.current !== computeResult;
+    if (computeResultChanged) {
+      waveformGpuBufferRef.current?.destroy();
+      outputTextureRef.current?.destroy();
+      uniformBufferRef.current?.destroy();
+      const gpuWaveformBuffer = device.createBuffer({
+        size: waveformBuffer.byteLength,
+        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+        mappedAtCreation: true
+      });
+      new Float32Array(gpuWaveformBuffer.getMappedRange()).set(waveformBuffer);
+      gpuWaveformBuffer.unmap();
+      const outputTexture = device.createTexture({
+        size: { width: width2, height: height2 },
+        format: "rgba8unorm",
+        usage: GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_SRC
+      });
+      const uniformBuffer = device.createBuffer({
+        size: 24,
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+      });
+      const bindGroup = device.createBindGroup({
+        layout: pipeline.getBindGroupLayout(0),
+        entries: [
+          { binding: 0, resource: { buffer: gpuWaveformBuffer } },
+          { binding: 1, resource: outputTexture.createView() },
+          { binding: 2, resource: { buffer: uniformBuffer } }
+        ]
+      });
+      waveformGpuBufferRef.current = gpuWaveformBuffer;
+      outputTextureRef.current = outputTexture;
+      uniformBufferRef.current = uniformBuffer;
+      bindGroupRef.current = bindGroup;
+      lastComputeResultRef.current = computeResult;
+      lastDimensionsRef.current = { width: width2, height: height2 };
+    }
+    const uniformData = new ArrayBuffer(24);
+    const uniforms = new DataView(uniformData);
+    uniforms.setUint32(0, waveformPointCount, true);
+    uniforms.setUint32(4, width2, true);
+    uniforms.setUint32(8, height2, true);
+    uniforms.setFloat32(12, color[0], true);
+    uniforms.setFloat32(16, color[1], true);
+    uniforms.setFloat32(20, color[2], true);
+    device.queue.writeBuffer(uniformBufferRef.current, 0, uniformData);
+    const commandEncoder = device.createCommandEncoder();
+    const computePass = commandEncoder.beginComputePass();
+    computePass.setPipeline(pipeline);
+    computePass.setBindGroup(0, bindGroupRef.current);
+    computePass.dispatchWorkgroups(Math.ceil(width2 / 64));
+    computePass.end();
+    device.queue.submit([commandEncoder.finish()]);
+    blitReference.current.resize(width2, height2);
+    blitReference.current.render(outputTextureRef.current);
+  }, [computeResult, color[0], color[1], color[2]]);
+  useEffect(
+    () => () => {
+      blitReference.current?.destroy();
+      blitReference.current = null;
+      pipelineReference.current = null;
+      waveformGpuBufferRef.current?.destroy();
+      waveformGpuBufferRef.current = null;
+      outputTextureRef.current?.destroy();
+      outputTextureRef.current = null;
+      uniformBufferRef.current?.destroy();
+      uniformBufferRef.current = null;
+      bindGroupRef.current = null;
+    },
+    []
+  );
+  const { width, height } = computeResult.status === "ready" ? computeResult.options.sampleQuery : { width: 0, height: 0 };
+  return /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref: canvasCallback,
+      width,
+      height
+    }
+  );
+};
+
+export { LoudnessCanvas, SpectrogramCanvas, WaveformCanvas, lavaColormap, useSpectralCompute, viridisColormap };