@photonviz/core 0.1.0

package/dist/index.js

@@ -0,0 +1,3859 @@
+// src/axes/ticks.ts
+function niceStep(rawStep) {
+  const mag = Math.pow(10, Math.floor(Math.log10(rawStep)));
+  const norm = rawStep / mag;
+  let nice;
+  if (norm < 1.5) nice = 1;
+  else if (norm < 3) nice = 2;
+  else if (norm < 7) nice = 5;
+  else nice = 10;
+  return nice * mag;
+}
+function autoTicks(min, max, target = 6) {
+  if (!isFinite(min) || !isFinite(max) || min === max) return [];
+  const span = max - min;
+  const step = niceStep(span / Math.max(1, target));
+  const start = Math.ceil(min / step) * step;
+  const ticks = [];
+  for (let i = 0; i < 1e3; i++) {
+    const v = start + i * step;
+    if (v > max + step * 1e-6) break;
+    ticks.push({ value: Math.abs(v) < step * 1e-6 ? 0 : v });
+  }
+  return ticks;
+}
+function withMinorTicks(major, count) {
+  if (count <= 0 || major.length < 2) return major;
+  const out = [];
+  for (let i = 0; i < major.length; i++) {
+    out.push(major[i]);
+    if (i < major.length - 1) {
+      const a = major[i].value;
+      const b = major[i + 1].value;
+      const step = (b - a) / (count + 1);
+      for (let k = 1; k <= count; k++) {
+        out.push({ value: a + step * k, minor: true, grid: false });
+      }
+    }
+  }
+  return out;
+}
+function normalize(entry) {
+  return typeof entry === "number" ? { value: entry } : entry;
+}
+function resolveTicks(spec, min, max) {
+  if (spec == null) return null;
+  const raw = typeof spec === "function" ? spec(min, max) : spec;
+  return raw.map(normalize).sort((a, b) => a.value - b.value);
+}
+function defaultFormat(value) {
+  if (value === 0) return "0";
+  const abs = Math.abs(value);
+  if (abs >= 1e6 || abs < 1e-4) return value.toExponential(1);
+  return parseFloat(value.toPrecision(6)).toString();
+}
+
+// src/axes/axis.ts
+var Axis = class {
+  constructor(config = {}) {
+    this.config = config;
+  }
+  update(patch) {
+    this.config = { ...this.config, ...patch };
+  }
+  /** Resolve the concrete tick list (labels filled) for the scale's domain. */
+  resolve(scale) {
+    const [min, max] = scale.domain;
+    const explicit = resolveTicks(this.config.ticks, min, max);
+    let ticks;
+    if (explicit) {
+      ticks = explicit;
+    } else {
+      let major = scale.ticks();
+      const minor = this.config.minorTicks;
+      if (minor && scale.type === "linear") {
+        major = withMinorTicks(major, minor === true ? 4 : minor);
+      }
+      if (this.config.addTicks?.length) {
+        const extra = this.config.addTicks.map(
+          (e) => typeof e === "number" ? { value: e } : e
+        );
+        major = [...major, ...extra].sort((a, b) => a.value - b.value);
+      }
+      ticks = major;
+    }
+    const fmt = this.config.format ?? ((v) => scale.formatTick(v));
+    return ticks.filter((t) => t.value >= min && t.value <= max).map((t) => ({
+      value: t.value,
+      label: t.minor ? "" : t.label ?? fmt(t.value),
+      minor: t.minor ?? false,
+      grid: t.grid ?? !t.minor
+    }));
+  }
+};
+
+// src/gl/shared.ts
+var shared = null;
+function getSharedGL() {
+  if (shared) return shared;
+  const canvas = document.createElement("canvas");
+  const gl = canvas.getContext("webgl2", {
+    antialias: true,
+    premultipliedAlpha: true,
+    alpha: true,
+    // Required so the rendered frame survives long enough to be blitted out.
+    preserveDrawingBuffer: true,
+    depth: true
+  });
+  if (!gl) throw new Error("WebGL2 is not supported in this environment");
+  shared = { canvas, gl };
+  return shared;
+}
+function begin2D(gl) {
+  gl.disable(gl.DEPTH_TEST);
+  gl.enable(gl.BLEND);
+  gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+}
+function begin3D(gl) {
+  gl.enable(gl.DEPTH_TEST);
+  gl.enable(gl.BLEND);
+  gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+}
+function sizeShared(gl, w, h) {
+  const c = gl.canvas;
+  if (c.width !== w) c.width = w;
+  if (c.height !== h) c.height = h;
+}
+
+// src/gl/context.ts
+function parseColor(input) {
+  const s = input.trim();
+  if (s.startsWith("#")) {
+    let hex = s.slice(1);
+    if (hex.length === 3) hex = hex.split("").map((c) => c + c).join("");
+    const r = parseInt(hex.slice(0, 2), 16) / 255;
+    const g = parseInt(hex.slice(2, 4), 16) / 255;
+    const b = parseInt(hex.slice(4, 6), 16) / 255;
+    const a = hex.length >= 8 ? parseInt(hex.slice(6, 8), 16) / 255 : 1;
+    return [r, g, b, a];
+  }
+  const m = s.match(/rgba?\(([^)]+)\)/);
+  if (m) {
+    const parts = m[1].split(",").map((p) => parseFloat(p.trim()));
+    return [(parts[0] ?? 0) / 255, (parts[1] ?? 0) / 255, (parts[2] ?? 0) / 255, parts[3] ?? 1];
+  }
+  return [0, 0, 0, 1];
+}
+function toColorCss(c) {
+  const to255 = (v) => Math.round(v * 255);
+  return `rgba(${to255(c[0])},${to255(c[1])},${to255(c[2])},${c[3]})`;
+}
+
+// src/gl/program.ts
+function compileShader(gl, type, source) {
+  const shader = gl.createShader(type);
+  if (!shader) throw new Error("Failed to create shader");
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    const log = gl.getShaderInfoLog(shader);
+    gl.deleteShader(shader);
+    throw new Error(`Shader compile error:
+${log}
+---
+${source}`);
+  }
+  return shader;
+}
+function createProgram(gl, vert, frag) {
+  const vs = compileShader(gl, gl.VERTEX_SHADER, vert);
+  const fs = compileShader(gl, gl.FRAGMENT_SHADER, frag);
+  const program = gl.createProgram();
+  if (!program) throw new Error("Failed to create program");
+  gl.attachShader(program, vs);
+  gl.attachShader(program, fs);
+  gl.linkProgram(program);
+  gl.deleteShader(vs);
+  gl.deleteShader(fs);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    const log = gl.getProgramInfoLog(program);
+    gl.deleteProgram(program);
+    throw new Error(`Program link error:
+${log}`);
+  }
+  return program;
+}
+function uniformLocations(gl, program, names) {
+  const out = {};
+  for (const name of names) out[name] = gl.getUniformLocation(program, name);
+  return out;
+}
+
+// src/gl/transform.ts
+var TRANSFORM_GLSL = (
+  /* glsl */
+  `
+uniform vec2 uDomainX;   // linear: (lo-ref, hi-ref) ; log: (log10 lo, log10 hi)
+uniform vec2 uDomainY;
+uniform float uXRef;
+uniform float uYRef;
+uniform float uLogX;     // >0.5 => log axis
+uniform float uLogY;
+
+vec2 dataToNorm(vec2 p) {
+  float cx = (uLogX > 0.5) ? log(p.x + uXRef) / 2.302585092994046 : p.x;
+  float cy = (uLogY > 0.5) ? log(p.y + uYRef) / 2.302585092994046 : p.y;
+  float nx = (cx - uDomainX.x) / (uDomainX.y - uDomainX.x);
+  float ny = (cy - uDomainY.x) / (uDomainY.y - uDomainY.x);
+  return vec2(nx, ny);
+}
+
+vec2 dataToClip(vec2 p) {
+  return dataToNorm(p) * 2.0 - 1.0;
+}
+`
+);
+var TRANSFORM_UNIFORMS = [
+  "uDomainX",
+  "uDomainY",
+  "uXRef",
+  "uYRef",
+  "uLogX",
+  "uLogY"
+];
+function setTransformUniforms(gl, u, x, y, xRef, yRef) {
+  const [lox, hix] = x.log ? [Math.log10(x.lo), Math.log10(x.hi)] : [x.lo - xRef, x.hi - xRef];
+  const [loy, hiy] = y.log ? [Math.log10(y.lo), Math.log10(y.hi)] : [y.lo - yRef, y.hi - yRef];
+  gl.uniform2f(u.uDomainX, lox, hix);
+  gl.uniform2f(u.uDomainY, loy, hiy);
+  gl.uniform1f(u.uXRef, xRef);
+  gl.uniform1f(u.uYRef, yRef);
+  gl.uniform1f(u.uLogX, x.log ? 1 : 0);
+  gl.uniform1f(u.uLogY, y.log ? 1 : 0);
+}
+
+// src/layers/area.ts
+var VERT = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+layout(location = 0) in vec2 aPos;  // offset data space
+${TRANSFORM_GLSL}
+void main() { gl_Position = vec4(dataToClip(aPos), 0.0, 1.0); }`
+);
+var FRAG = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+uniform vec4 uColor;
+out vec4 outColor;
+void main() { outColor = vec4(uColor.rgb * uColor.a, uColor.a); }`
+);
+var programCache = /* @__PURE__ */ new WeakMap();
+function getProgram(gl) {
+  let p = programCache.get(gl);
+  if (!p) {
+    p = createProgram(gl, VERT, FRAG);
+    programCache.set(gl, p);
+  }
+  return p;
+}
+var counter = 0;
+var AreaLayer = class {
+  constructor(gl, opts) {
+    this.xRef = 0;
+    this.yRef = 0;
+    this.xBounds = [0, 0];
+    this.yBounds = [0, 0];
+    this.id = `area-${counter++}`;
+    this.gl = gl;
+    this.program = getProgram(gl);
+    const colorInput = opts.color ?? "rgba(59,130,246,0.4)";
+    this.color = Array.isArray(colorInput) ? colorInput : parseColor(colorInput);
+    this.colorCss = typeof colorInput === "string" ? colorInput : toColorCss(this.color);
+    this.name = opts.name ?? this.id;
+    this.yAxis = opts.yAxis ?? "y";
+    const n = Math.min(opts.x.length, opts.y.length);
+    this.vertexCount = n * 2;
+    const baseAt = (i) => opts.base == null ? 0 : typeof opts.base === "number" ? opts.base : opts.base[i];
+    this.xRef = n > 0 ? opts.x[0] : 0;
+    this.yRef = n > 0 ? opts.y[0] : 0;
+    const data = new Float32Array(n * 4);
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+    for (let i = 0; i < n; i++) {
+      const x = opts.x[i], b = baseAt(i), top = opts.y[i];
+      data[i * 4] = x - this.xRef;
+      data[i * 4 + 1] = b - this.yRef;
+      data[i * 4 + 2] = x - this.xRef;
+      data[i * 4 + 3] = top - this.yRef;
+      minX = Math.min(minX, x);
+      maxX = Math.max(maxX, x);
+      minY = Math.min(minY, b, top);
+      maxY = Math.max(maxY, b, top);
+    }
+    this.xBounds = [minX, maxX];
+    this.yBounds = [minY, maxY];
+    const vao = gl.createVertexArray();
+    const buffer = gl.createBuffer();
+    this.vao = vao;
+    this.buffer = buffer;
+    gl.bindVertexArray(vao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+    gl.bindVertexArray(null);
+    this.uniforms = uniformLocations(gl, this.program, [...TRANSFORM_UNIFORMS, "uColor"]);
+  }
+  /** Replace the area data and re-upload (for streaming). */
+  setData(x, y, base) {
+    const n = Math.min(x.length, y.length);
+    this.vertexCount = n * 2;
+    const baseAt = (i) => base == null ? 0 : typeof base === "number" ? base : base[i];
+    this.xRef = n > 0 ? x[0] : 0;
+    this.yRef = n > 0 ? y[0] : 0;
+    const data = new Float32Array(n * 4);
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+    for (let i = 0; i < n; i++) {
+      const vx = x[i], b = baseAt(i), top = y[i];
+      data[i * 4] = vx - this.xRef;
+      data[i * 4 + 1] = b - this.yRef;
+      data[i * 4 + 2] = vx - this.xRef;
+      data[i * 4 + 3] = top - this.yRef;
+      if (vx < minX) minX = vx;
+      if (vx > maxX) maxX = vx;
+      minY = Math.min(minY, b, top);
+      maxY = Math.max(maxY, b, top);
+    }
+    this.xBounds = [minX, maxX];
+    this.yBounds = [minY, maxY];
+    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffer);
+    this.gl.bufferData(this.gl.ARRAY_BUFFER, data, this.gl.DYNAMIC_DRAW);
+  }
+  bounds() {
+    if (this.vertexCount === 0) return null;
+    return { x: this.xBounds, y: this.yBounds };
+  }
+  draw(state) {
+    if (this.vertexCount < 4) return;
+    const gl = state.gl;
+    gl.useProgram(this.program);
+    setTransformUniforms(gl, this.uniforms, state.x, state.y, this.xRef, this.yRef);
+    gl.uniform4f(this.uniforms.uColor, this.color[0], this.color[1], this.color[2], this.color[3]);
+    gl.bindVertexArray(this.vao);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, this.vertexCount);
+    gl.bindVertexArray(null);
+  }
+  dispose() {
+    this.gl.deleteVertexArray(this.vao);
+    this.gl.deleteBuffer(this.buffer);
+  }
+};
+
+// src/layers/bar.ts
+var VERT2 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+layout(location = 0) in vec2 aCorner;  // unit rect [0,1]^2
+layout(location = 1) in vec4 aRect;    // (x0,y0,x1,y1) offset data space
+${TRANSFORM_GLSL}
+void main() {
+  vec2 p = mix(aRect.xy, aRect.zw, aCorner);
+  gl_Position = vec4(dataToClip(p), 0.0, 1.0);
+}`
+);
+var FRAG2 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+uniform vec4 uColor;
+out vec4 outColor;
+void main() { outColor = vec4(uColor.rgb * uColor.a, uColor.a); }`
+);
+var CORNERS = new Float32Array([0, 0, 1, 0, 1, 1, 0, 0, 1, 1, 0, 1]);
+var programCache2 = /* @__PURE__ */ new WeakMap();
+function getProgram2(gl) {
+  let p = programCache2.get(gl);
+  if (!p) {
+    p = createProgram(gl, VERT2, FRAG2);
+    programCache2.set(gl, p);
+  }
+  return p;
+}
+function medianSpacing(x, n) {
+  if (n < 2) return 1;
+  const diffs = [];
+  for (let i = 1; i < n; i++) diffs.push(Math.abs(x[i] - x[i - 1]));
+  diffs.sort((a, b) => a - b);
+  return diffs[Math.floor(diffs.length / 2)] || 1;
+}
+var counter2 = 0;
+var BarLayer = class {
+  constructor(gl, opts) {
+    this.buffers = [];
+    this.xRef = 0;
+    this.yRef = 0;
+    this.xBounds = [0, 0];
+    this.yBounds = [0, 0];
+    this.id = `bar-${counter2++}`;
+    this.gl = gl;
+    this.program = getProgram2(gl);
+    const colorInput = opts.color ?? "#3b82f6";
+    this.color = Array.isArray(colorInput) ? colorInput : parseColor(colorInput);
+    this.colorCss = typeof colorInput === "string" ? colorInput : toColorCss(this.color);
+    this.name = opts.name ?? this.id;
+    this.yAxis = opts.yAxis ?? "y";
+    const n = Math.min(opts.x.length, opts.y.length);
+    this.count = n;
+    this.barWidth = opts.width ?? medianSpacing(opts.x, n) * 0.8;
+    this.offset = opts.offset ?? 0;
+    const rects = this.buildRects(opts.x, opts.y, opts.base, n);
+    const vao = gl.createVertexArray();
+    this.vao = vao;
+    gl.bindVertexArray(vao);
+    const cornerBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, cornerBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, CORNERS, gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+    const rectBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, rectBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, rects, gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(1);
+    gl.vertexAttribPointer(1, 4, gl.FLOAT, false, 0, 0);
+    gl.vertexAttribDivisor(1, 1);
+    gl.bindVertexArray(null);
+    this.buffers = [cornerBuf, rectBuf];
+    this.uniforms = uniformLocations(gl, this.program, [...TRANSFORM_UNIFORMS, "uColor"]);
+  }
+  buildRects(x, y, base, n) {
+    const width = this.barWidth, off = this.offset;
+    const baseAt = (i) => base == null ? 0 : typeof base === "number" ? base : base[i];
+    this.xRef = n > 0 ? x[0] : 0;
+    this.yRef = n > 0 ? y[0] : 0;
+    const rects = new Float32Array(n * 4);
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+    for (let i = 0; i < n; i++) {
+      const cx = x[i] + off;
+      const x0 = cx - width / 2, x1 = cx + width / 2;
+      const b = baseAt(i), top = y[i];
+      rects[i * 4] = x0 - this.xRef;
+      rects[i * 4 + 1] = b - this.yRef;
+      rects[i * 4 + 2] = x1 - this.xRef;
+      rects[i * 4 + 3] = top - this.yRef;
+      minX = Math.min(minX, x0);
+      maxX = Math.max(maxX, x1);
+      minY = Math.min(minY, b, top);
+      maxY = Math.max(maxY, b, top);
+    }
+    this.xBounds = [minX, maxX];
+    this.yBounds = [minY, maxY];
+    return rects;
+  }
+  /** Replace bar values and re-upload (for streaming). */
+  setData(x, y, base) {
+    const n = Math.min(x.length, y.length);
+    this.count = n;
+    const rects = this.buildRects(x, y, base, n);
+    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffers[1]);
+    this.gl.bufferData(this.gl.ARRAY_BUFFER, rects, this.gl.DYNAMIC_DRAW);
+  }
+  bounds() {
+    if (this.count === 0) return null;
+    return { x: this.xBounds, y: this.yBounds };
+  }
+  draw(state) {
+    if (this.count === 0) return;
+    const gl = state.gl;
+    gl.useProgram(this.program);
+    setTransformUniforms(gl, this.uniforms, state.x, state.y, this.xRef, this.yRef);
+    gl.uniform4f(this.uniforms.uColor, this.color[0], this.color[1], this.color[2], this.color[3]);
+    gl.bindVertexArray(this.vao);
+    gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, this.count);
+    gl.bindVertexArray(null);
+  }
+  dispose() {
+    this.gl.deleteVertexArray(this.vao);
+    for (const b of this.buffers) this.gl.deleteBuffer(b);
+  }
+};
+
+// src/stats/index.ts
+function histogram(values, opts = {}) {
+  const n = values.length;
+  let edges;
+  if (opts.edges) {
+    edges = Float64Array.from(opts.edges);
+  } else {
+    let lo2 = opts.range?.[0] ?? Infinity;
+    let hi2 = opts.range?.[1] ?? -Infinity;
+    if (!opts.range) {
+      for (let i = 0; i < n; i++) {
+        const v = values[i];
+        if (v < lo2) lo2 = v;
+        if (v > hi2) hi2 = v;
+      }
+    }
+    if (!isFinite(lo2) || !isFinite(hi2) || lo2 === hi2) {
+      lo2 = (lo2 || 0) - 0.5;
+      hi2 = (hi2 || 0) + 0.5;
+    }
+    const bins2 = opts.bins ?? Math.max(1, Math.ceil(Math.log2(n || 1) + 1));
+    edges = new Float64Array(bins2 + 1);
+    for (let i = 0; i <= bins2; i++) edges[i] = lo2 + (hi2 - lo2) * i / bins2;
+  }
+  const bins = edges.length - 1;
+  const counts = new Float64Array(bins);
+  const lo = edges[0], hi = edges[bins];
+  const width = (hi - lo) / bins;
+  for (let i = 0; i < n; i++) {
+    const v = values[i];
+    if (v < lo || v > hi) continue;
+    let b = Math.floor((v - lo) / width);
+    if (b >= bins) b = bins - 1;
+    counts[b] += 1;
+  }
+  const centers = new Float64Array(bins);
+  for (let i = 0; i < bins; i++) centers[i] = (edges[i] + edges[i + 1]) / 2;
+  return { edges, counts, centers, binWidth: width };
+}
+function quantileSorted(sorted, q) {
+  const n = sorted.length;
+  if (n === 0) return NaN;
+  if (n === 1) return sorted[0];
+  const pos = (n - 1) * q;
+  const lo = Math.floor(pos);
+  const frac = pos - lo;
+  const a = sorted[lo];
+  const b = sorted[Math.min(n - 1, lo + 1)];
+  return a + (b - a) * frac;
+}
+function boxStats(values) {
+  const sorted = Float64Array.from(values).sort();
+  const n = sorted.length;
+  const q1 = quantileSorted(sorted, 0.25);
+  const median = quantileSorted(sorted, 0.5);
+  const q3 = quantileSorted(sorted, 0.75);
+  const iqr = q3 - q1;
+  const fenceLo = q1 - 1.5 * iqr;
+  const fenceHi = q3 + 1.5 * iqr;
+  let whiskerLo = q1, whiskerHi = q3;
+  const outliers = [];
+  for (let i = 0; i < n; i++) {
+    const v = sorted[i];
+    if (v < fenceLo || v > fenceHi) outliers.push(v);
+    else {
+      if (v < whiskerLo) whiskerLo = v;
+      if (v > whiskerHi) whiskerHi = v;
+    }
+  }
+  return {
+    min: n ? sorted[0] : NaN,
+    q1,
+    median,
+    q3,
+    max: n ? sorted[n - 1] : NaN,
+    whiskerLo,
+    whiskerHi,
+    outliers
+  };
+}
+function stddev(values, mean) {
+  const n = values.length;
+  let s = 0;
+  for (let i = 0; i < n; i++) {
+    const d = values[i] - mean;
+    s += d * d;
+  }
+  return Math.sqrt(s / Math.max(1, n - 1));
+}
+function fft(re, im) {
+  const n = re.length;
+  for (let i = 1, j = 0; i < n; i++) {
+    let bit = n >> 1;
+    for (; j & bit; bit >>= 1) j ^= bit;
+    j ^= bit;
+    if (i < j) {
+      [re[i], re[j]] = [re[j], re[i]];
+      [im[i], im[j]] = [im[j], im[i]];
+    }
+  }
+  for (let len = 2; len <= n; len <<= 1) {
+    const ang = -2 * Math.PI / len;
+    const wRe = Math.cos(ang), wIm = Math.sin(ang);
+    for (let i = 0; i < n; i += len) {
+      let curRe = 1, curIm = 0;
+      for (let k = 0; k < len / 2; k++) {
+        const a = i + k, b = i + k + len / 2;
+        const tRe = re[b] * curRe - im[b] * curIm;
+        const tIm = re[b] * curIm + im[b] * curRe;
+        re[b] = re[a] - tRe;
+        im[b] = im[a] - tIm;
+        re[a] = re[a] + tRe;
+        im[a] = im[a] + tIm;
+        const nRe = curRe * wRe - curIm * wIm;
+        curIm = curRe * wIm + curIm * wRe;
+        curRe = nRe;
+      }
+    }
+  }
+}
+function spectrogram(signal, opts = {}) {
+  const fftSize = opts.fftSize ?? 256;
+  const hop = opts.hop ?? fftSize >> 1;
+  const sr = opts.sampleRate ?? 1;
+  const N = signal.length;
+  const frames = Math.max(1, Math.floor((N - fftSize) / hop) + 1);
+  const bins = fftSize >> 1;
+  const values = new Float64Array(bins * frames);
+  const re = new Float64Array(fftSize);
+  const im = new Float64Array(fftSize);
+  for (let f = 0; f < frames; f++) {
+    const start = f * hop;
+    for (let i = 0; i < fftSize; i++) {
+      const w = 0.5 - 0.5 * Math.cos(2 * Math.PI * i / (fftSize - 1));
+      re[i] = (signal[start + i] ?? 0) * w;
+      im[i] = 0;
+    }
+    fft(re, im);
+    for (let b = 0; b < bins; b++) {
+      const mag = Math.hypot(re[b], im[b]) / fftSize;
+      values[b * frames + f] = 20 * Math.log10(mag + 1e-9);
+    }
+  }
+  return {
+    values,
+    cols: frames,
+    rows: bins,
+    extent: { x: [0, N / sr], y: [0, sr / 2] }
+  };
+}
+function kde(values, lo, hi, points = 64, bandwidth) {
+  const n = values.length;
+  let mean = 0;
+  for (let i = 0; i < n; i++) mean += values[i];
+  mean /= Math.max(1, n);
+  const sd = stddev(values, mean) || 1;
+  const h = bandwidth ?? 1.06 * sd * Math.pow(Math.max(1, n), -0.2);
+  const xs = new Float64Array(points);
+  const ys = new Float64Array(points);
+  const norm = 1 / (n * h * Math.sqrt(2 * Math.PI));
+  for (let p = 0; p < points; p++) {
+    const x = lo + (hi - lo) * p / (points - 1);
+    let sum = 0;
+    for (let i = 0; i < n; i++) {
+      const u = (x - values[i]) / h;
+      sum += Math.exp(-0.5 * u * u);
+    }
+    xs[p] = x;
+    ys[p] = sum * norm;
+  }
+  return { xs, ys };
+}
+
+// src/layers/box.ts
+var VERT3 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+layout(location = 0) in vec2 aPos;
+layout(location = 1) in vec4 aColor;
+uniform float uPointSize;
+${TRANSFORM_GLSL}
+out vec4 vColor;
+void main() {
+  vColor = aColor;
+  gl_PointSize = uPointSize;
+  gl_Position = vec4(dataToClip(aPos), 0.0, 1.0);
+}`
+);
+var FRAG3 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+in vec4 vColor;
+uniform float uIsPoint;
+out vec4 outColor;
+void main() {
+  if (uIsPoint > 0.5) {
+    vec2 d = gl_PointCoord - 0.5;
+    if (length(d) > 0.5) discard;
+  }
+  outColor = vec4(vColor.rgb * vColor.a, vColor.a);
+}`
+);
+var programCache3 = /* @__PURE__ */ new WeakMap();
+function getProgram3(gl) {
+  let p = programCache3.get(gl);
+  if (!p) {
+    p = createProgram(gl, VERT3, FRAG3);
+    programCache3.set(gl, p);
+  }
+  return p;
+}
+var DEFAULT_COLOR = "#3b82f6";
+var counter3 = 0;
+var Mesh = class {
+  constructor() {
+    this.data = [];
+  }
+  push(x, y, c) {
+    this.data.push(x, y, c[0], c[1], c[2], c[3]);
+  }
+  get count() {
+    return this.data.length / 6;
+  }
+};
+var BoxLayer = class {
+  constructor(gl, opts) {
+    this.xRef = 0;
+    this.yRef = 0;
+    this.xBounds = [0, 0];
+    this.yBounds = [0, 0];
+    this.id = `box-${counter3++}`;
+    this.gl = gl;
+    this.program = getProgram3(gl);
+    this.yAxis = opts.yAxis ?? "y";
+    const groups = opts.groups;
+    const width = opts.width ?? 0.6;
+    const hw = width / 2;
+    const showBox = opts.box !== false;
+    const showViolin = opts.violin === true;
+    this.xRef = groups.length ? groups[0].position : 0;
+    this.yRef = groups.length && groups[0].values.length ? groups[0].values[0] : 0;
+    const tris = new Mesh();
+    const lines = new Mesh();
+    const points = new Mesh();
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+    const track = (x, y) => {
+      if (x < minX) minX = x;
+      if (x > maxX) maxX = x;
+      if (y < minY) minY = y;
+      if (y > maxY) maxY = y;
+    };
+    const ox = (v) => v - this.xRef;
+    const oy = (v) => v - this.yRef;
+    for (const g of groups) {
+      const cx = g.position;
+      const base = Array.isArray(g.color) ? g.color : parseColor(g.color ?? DEFAULT_COLOR);
+      const fill = [base[0], base[1], base[2], 0.35];
+      const stroke = [base[0], base[1], base[2], 1];
+      const s = boxStats(g.values);
+      track(cx - hw, s.whiskerLo);
+      track(cx + hw, s.whiskerHi);
+      if (showViolin) {
+        const lo = s.min, hi = s.max;
+        const d = kde(g.values, lo, hi, 48);
+        let maxD = 0;
+        for (let i = 0; i < d.ys.length; i++) maxD = Math.max(maxD, d.ys[i]);
+        maxD = maxD || 1;
+        for (let i = 0; i < d.xs.length - 1; i++) {
+          const w0 = d.ys[i] / maxD * hw;
+          const w1 = d.ys[i + 1] / maxD * hw;
+          const y0 = d.xs[i], y1 = d.xs[i + 1];
+          tris.push(ox(cx - w0), oy(y0), fill);
+          tris.push(ox(cx + w0), oy(y0), fill);
+          tris.push(ox(cx + w1), oy(y1), fill);
+          tris.push(ox(cx - w0), oy(y0), fill);
+          tris.push(ox(cx + w1), oy(y1), fill);
+          tris.push(ox(cx - w1), oy(y1), fill);
+        }
+        track(cx - hw, lo);
+        track(cx + hw, hi);
+      }
+      if (showBox) {
+        const x0 = ox(cx - hw), x1 = ox(cx + hw);
+        const yq1 = oy(s.q1), yq3 = oy(s.q3);
+        if (!showViolin) {
+          tris.push(x0, yq1, fill);
+          tris.push(x1, yq1, fill);
+          tris.push(x1, yq3, fill);
+          tris.push(x0, yq1, fill);
+          tris.push(x1, yq3, fill);
+          tris.push(x0, yq3, fill);
+        }
+        const edge = [
+          [x0, yq1, x1, yq1],
+          [x1, yq1, x1, yq3],
+          [x1, yq3, x0, yq3],
+          [x0, yq3, x0, yq1]
+        ];
+        for (const [ax, ay, bx, by] of edge) {
+          lines.push(ax, ay, stroke);
+          lines.push(bx, by, stroke);
+        }
+        const ym = oy(s.median);
+        lines.push(x0, ym, stroke);
+        lines.push(x1, ym, stroke);
+        const cxo = ox(cx);
+        lines.push(cxo, oy(s.q3), stroke);
+        lines.push(cxo, oy(s.whiskerHi), stroke);
+        lines.push(cxo, oy(s.q1), stroke);
+        lines.push(cxo, oy(s.whiskerLo), stroke);
+        const capHw = hw * 0.5;
+        lines.push(ox(cx - capHw), oy(s.whiskerHi), stroke);
+        lines.push(ox(cx + capHw), oy(s.whiskerHi), stroke);
+        lines.push(ox(cx - capHw), oy(s.whiskerLo), stroke);
+        lines.push(ox(cx + capHw), oy(s.whiskerLo), stroke);
+        for (const v of s.outliers) {
+          points.push(cxo, oy(v), stroke);
+          track(cx, v);
+        }
+      }
+    }
+    this.xBounds = [minX, maxX];
+    this.yBounds = [minY, maxY];
+    const all = [...tris.data, ...lines.data, ...points.data];
+    this.triCount = tris.count;
+    this.lineStart = tris.count;
+    this.lineCount = lines.count;
+    this.pointStart = tris.count + lines.count;
+    this.pointCount = points.count;
+    const vao = gl.createVertexArray();
+    const buffer = gl.createBuffer();
+    this.vao = vao;
+    this.buffer = buffer;
+    gl.bindVertexArray(vao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(all), gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 24, 0);
+    gl.enableVertexAttribArray(1);
+    gl.vertexAttribPointer(1, 4, gl.FLOAT, false, 24, 8);
+    gl.bindVertexArray(null);
+    this.uniforms = uniformLocations(gl, this.program, [...TRANSFORM_UNIFORMS, "uPointSize", "uIsPoint"]);
+  }
+  bounds() {
+    if (this.triCount + this.lineCount + this.pointCount === 0) return null;
+    return { x: this.xBounds, y: this.yBounds };
+  }
+  draw(state) {
+    const gl = state.gl;
+    gl.useProgram(this.program);
+    setTransformUniforms(gl, this.uniforms, state.x, state.y, this.xRef, this.yRef);
+    gl.uniform1f(this.uniforms.uPointSize, 5 * state.dpr);
+    gl.bindVertexArray(this.vao);
+    if (this.triCount > 0) {
+      gl.uniform1f(this.uniforms.uIsPoint, 0);
+      gl.drawArrays(gl.TRIANGLES, 0, this.triCount);
+    }
+    if (this.lineCount > 0) {
+      gl.uniform1f(this.uniforms.uIsPoint, 0);
+      gl.drawArrays(gl.LINES, this.lineStart, this.lineCount);
+    }
+    if (this.pointCount > 0) {
+      gl.uniform1f(this.uniforms.uIsPoint, 1);
+      gl.drawArrays(gl.POINTS, this.pointStart, this.pointCount);
+    }
+    gl.bindVertexArray(null);
+  }
+  dispose() {
+    this.gl.deleteVertexArray(this.vao);
+    this.gl.deleteBuffer(this.buffer);
+  }
+};
+
+// src/color/colormap.ts
+var ANCHORS = {
+  viridis: [
+    [0.267, 5e-3, 0.329],
+    [0.283, 0.141, 0.458],
+    [0.254, 0.265, 0.53],
+    [0.207, 0.372, 0.553],
+    [0.164, 0.471, 0.558],
+    [0.128, 0.567, 0.551],
+    [0.135, 0.659, 0.518],
+    [0.267, 0.749, 0.441],
+    [0.478, 0.821, 0.318],
+    [0.741, 0.873, 0.15],
+    [0.993, 0.906, 0.144]
+  ],
+  plasma: [
+    [0.05, 0.03, 0.53],
+    [0.29, 0.01, 0.63],
+    [0.49, 0.01, 0.66],
+    [0.66, 0.13, 0.59],
+    [0.8, 0.28, 0.47],
+    [0.9, 0.43, 0.35],
+    [0.97, 0.6, 0.24],
+    [0.99, 0.78, 0.15],
+    [0.94, 0.98, 0.13]
+  ],
+  coolwarm: [
+    [0.23, 0.3, 0.75],
+    [0.55, 0.69, 0.98],
+    [0.87, 0.87, 0.87],
+    [0.96, 0.6, 0.48],
+    [0.71, 0.02, 0.15]
+  ],
+  grayscale: [
+    [0.05, 0.05, 0.05],
+    [0.95, 0.95, 0.95]
+  ]
+};
+function colormap(name = "viridis") {
+  const anchors = ANCHORS[name];
+  const last = anchors.length - 1;
+  return (t) => {
+    const clamped = t <= 0 ? 0 : t >= 1 ? 1 : t;
+    const pos = clamped * last;
+    const i = Math.min(last - 1, Math.floor(pos));
+    const f = pos - i;
+    const a = anchors[i];
+    const b = anchors[i + 1];
+    return [a[0] + (b[0] - a[0]) * f, a[1] + (b[1] - a[1]) * f, a[2] + (b[2] - a[2]) * f];
+  };
+}
+
+// src/layers/contour.ts
+var VERT4 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+layout(location = 0) in vec2 aPos;
+layout(location = 1) in vec4 aColor;
+${TRANSFORM_GLSL}
+out vec4 vColor;
+void main() { vColor = aColor; gl_Position = vec4(dataToClip(aPos), 0.0, 1.0); }`
+);
+var FRAG4 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+in vec4 vColor;
+out vec4 outColor;
+void main() { outColor = vec4(vColor.rgb * vColor.a, vColor.a); }`
+);
+var CASES = [
+  [],
+  [[3, 0]],
+  [[0, 1]],
+  [[3, 1]],
+  [[1, 2]],
+  [[3, 0], [1, 2]],
+  [[0, 2]],
+  [[3, 2]],
+  [[2, 3]],
+  [[2, 0]],
+  [[0, 1], [2, 3]],
+  [[2, 1]],
+  [[1, 3]],
+  [[1, 0]],
+  [[0, 3]],
+  []
+];
+var programCache4 = /* @__PURE__ */ new WeakMap();
+function getProgram4(gl) {
+  let p = programCache4.get(gl);
+  if (!p) {
+    p = createProgram(gl, VERT4, FRAG4);
+    programCache4.set(gl, p);
+  }
+  return p;
+}
+var counter4 = 0;
+var ContourLayer = class {
+  constructor(gl, opts) {
+    this.id = `contour-${counter4++}`;
+    this.gl = gl;
+    this.program = getProgram4(gl);
+    this.yAxis = opts.yAxis ?? "y";
+    this.ext = opts.extent;
+    const { cols, rows, values } = opts;
+    const [x0, x1] = opts.extent.x, [y0, y1] = opts.extent.y;
+    this.xRef = x0;
+    this.yRef = y0;
+    let vmin = Infinity, vmax = -Infinity;
+    for (let i = 0; i < values.length; i++) {
+      const v = values[i];
+      if (v < vmin) vmin = v;
+      if (v > vmax) vmax = v;
+    }
+    const count = typeof opts.levels === "number" ? opts.levels : 8;
+    const levels = Array.isArray(opts.levels) ? opts.levels : Array.from({ length: count }, (_, i) => vmin + (vmax - vmin) * (i + 1) / (count + 1));
+    const cmap = colormap(opts.colormap ?? "viridis");
+    const fixed = opts.color != null ? Array.isArray(opts.color) ? opts.color : parseColor(opts.color) : null;
+    const gx = (c) => x0 + c / (cols - 1) * (x1 - x0) - this.xRef;
+    const gy = (r) => y0 + r / (rows - 1) * (y1 - y0) - this.yRef;
+    const at = (c, r) => values[r * cols + c];
+    const data = [];
+    const lspan = vmax - vmin || 1;
+    for (let li = 0; li < levels.length; li++) {
+      const L = levels[li];
+      const col = fixed ?? [...cmap((L - vmin) / lspan), 1];
+      for (let r = 0; r < rows - 1; r++) {
+        for (let c = 0; c < cols - 1; c++) {
+          const v0 = at(c, r), v1 = at(c + 1, r), v2 = at(c + 1, r + 1), v3 = at(c, r + 1);
+          const idx = (v0 >= L ? 1 : 0) | (v1 >= L ? 2 : 0) | (v2 >= L ? 4 : 0) | (v3 >= L ? 8 : 0);
+          const segs = CASES[idx];
+          if (segs.length === 0) continue;
+          const lerp = (t, ax, ay, bx, by) => [ax + (bx - ax) * t, ay + (by - ay) * t];
+          const edge = (e) => {
+            if (e === 0) return lerp((L - v0) / (v1 - v0 || 1e-9), gx(c), gy(r), gx(c + 1), gy(r));
+            if (e === 1) return lerp((L - v1) / (v2 - v1 || 1e-9), gx(c + 1), gy(r), gx(c + 1), gy(r + 1));
+            if (e === 2) return lerp((L - v2) / (v3 - v2 || 1e-9), gx(c + 1), gy(r + 1), gx(c), gy(r + 1));
+            return lerp((L - v3) / (v0 - v3 || 1e-9), gx(c), gy(r + 1), gx(c), gy(r));
+          };
+          for (const [ea, eb] of segs) {
+            const pa = edge(ea), pb = edge(eb);
+            data.push(pa[0], pa[1], col[0], col[1], col[2], col[3]);
+            data.push(pb[0], pb[1], col[0], col[1], col[2], col[3]);
+          }
+        }
+      }
+    }
+    this.vertexCount = data.length / 6;
+    const vao = gl.createVertexArray();
+    const buffer = gl.createBuffer();
+    this.vao = vao;
+    this.buffer = buffer;
+    gl.bindVertexArray(vao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 24, 0);
+    gl.enableVertexAttribArray(1);
+    gl.vertexAttribPointer(1, 4, gl.FLOAT, false, 24, 8);
+    gl.bindVertexArray(null);
+    this.uniforms = uniformLocations(gl, this.program, [...TRANSFORM_UNIFORMS]);
+  }
+  bounds() {
+    return { x: this.ext.x, y: this.ext.y };
+  }
+  draw(state) {
+    if (this.vertexCount === 0) return;
+    const gl = state.gl;
+    gl.useProgram(this.program);
+    setTransformUniforms(gl, this.uniforms, state.x, state.y, this.xRef, this.yRef);
+    gl.bindVertexArray(this.vao);
+    gl.drawArrays(gl.LINES, 0, this.vertexCount);
+    gl.bindVertexArray(null);
+  }
+  dispose() {
+    this.gl.deleteVertexArray(this.vao);
+    this.gl.deleteBuffer(this.buffer);
+  }
+};
+
+// src/layers/heatmap.ts
+var VERT5 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+layout(location = 0) in vec2 aPos;  // offset data space
+layout(location = 1) in vec2 aUV;
+${TRANSFORM_GLSL}
+out vec2 vUV;
+void main() {
+  vUV = aUV;
+  gl_Position = vec4(dataToClip(aPos), 0.0, 1.0);
+}`
+);
+var FRAG5 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+in vec2 vUV;
+uniform sampler2D uTex;
+out vec4 outColor;
+void main() {
+  vec4 c = texture(uTex, vUV);
+  outColor = vec4(c.rgb * c.a, c.a);
+}`
+);
+var programCache5 = /* @__PURE__ */ new WeakMap();
+function getProgram5(gl) {
+  let p = programCache5.get(gl);
+  if (!p) {
+    p = createProgram(gl, VERT5, FRAG5);
+    programCache5.set(gl, p);
+  }
+  return p;
+}
+var counter5 = 0;
+var HeatmapLayer = class {
+  constructor(gl, opts) {
+    this.id = `heatmap-${counter5++}`;
+    this.gl = gl;
+    this.program = getProgram5(gl);
+    this.yAxis = opts.yAxis ?? "y";
+    this.ext = opts.extent;
+    const [x0, x1] = opts.extent.x;
+    const [y0, y1] = opts.extent.y;
+    this.xRef = x0;
+    this.yRef = y0;
+    const { cols, rows, values } = opts;
+    const cmap = colormap(opts.colormap ?? "viridis");
+    let lo = opts.domain?.[0] ?? Infinity;
+    let hi = opts.domain?.[1] ?? -Infinity;
+    if (!opts.domain) {
+      for (let i = 0; i < values.length; i++) {
+        const v = values[i];
+        if (v < lo) lo = v;
+        if (v > hi) hi = v;
+      }
+    }
+    const span = hi - lo || 1;
+    const pixels = new Uint8Array(cols * rows * 4);
+    for (let i = 0; i < cols * rows; i++) {
+      const [r, g, b] = cmap((values[i] - lo) / span);
+      pixels[i * 4] = Math.round(r * 255);
+      pixels[i * 4 + 1] = Math.round(g * 255);
+      pixels[i * 4 + 2] = Math.round(b * 255);
+      pixels[i * 4 + 3] = 255;
+    }
+    const texture = gl.createTexture();
+    this.texture = texture;
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, cols, rows, 0, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+    const filter = opts.smooth === false ? gl.NEAREST : gl.LINEAR;
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    const data = new Float32Array([
+      x0 - this.xRef,
+      y0 - this.yRef,
+      0,
+      0,
+      x1 - this.xRef,
+      y0 - this.yRef,
+      1,
+      0,
+      x1 - this.xRef,
+      y1 - this.yRef,
+      1,
+      1,
+      x0 - this.xRef,
+      y0 - this.yRef,
+      0,
+      0,
+      x1 - this.xRef,
+      y1 - this.yRef,
+      1,
+      1,
+      x0 - this.xRef,
+      y1 - this.yRef,
+      0,
+      1
+    ]);
+    const vao = gl.createVertexArray();
+    const buffer = gl.createBuffer();
+    this.vao = vao;
+    this.buffer = buffer;
+    gl.bindVertexArray(vao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 16, 0);
+    gl.enableVertexAttribArray(1);
+    gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 16, 8);
+    gl.bindVertexArray(null);
+    this.uniforms = uniformLocations(gl, this.program, [...TRANSFORM_UNIFORMS, "uTex"]);
+  }
+  bounds() {
+    return { x: this.ext.x, y: this.ext.y };
+  }
+  draw(state) {
+    const gl = state.gl;
+    gl.useProgram(this.program);
+    setTransformUniforms(gl, this.uniforms, state.x, state.y, this.xRef, this.yRef);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, this.texture);
+    gl.uniform1i(this.uniforms.uTex, 0);
+    gl.bindVertexArray(this.vao);
+    gl.drawArrays(gl.TRIANGLES, 0, 6);
+    gl.bindVertexArray(null);
+  }
+  dispose() {
+    this.gl.deleteVertexArray(this.vao);
+    this.gl.deleteBuffer(this.buffer);
+    this.gl.deleteTexture(this.texture);
+  }
+};
+
+// src/layers/hexbin.ts
+var VERT6 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+layout(location = 0) in vec2 aCorner;  // unit hexagon (data-unit offsets)
+layout(location = 1) in vec2 aCenter;  // offset data space
+layout(location = 2) in vec4 aColor;
+uniform float uRadius;
+${TRANSFORM_GLSL}
+out vec4 vColor;
+void main() {
+  vColor = aColor;
+  gl_Position = vec4(dataToClip(aCenter + aCorner * uRadius), 0.0, 1.0);
+}`
+);
+var FRAG6 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+in vec4 vColor;
+out vec4 outColor;
+void main() { outColor = vec4(vColor.rgb * vColor.a, vColor.a); }`
+);
+var HEX = (() => {
+  const verts = [];
+  const pt = (a) => [Math.cos(a), Math.sin(a)];
+  for (let i = 0; i < 6; i++) {
+    const a0 = Math.PI / 3 * i + Math.PI / 6;
+    const a1 = Math.PI / 3 * (i + 1) + Math.PI / 6;
+    const [x0, y0] = pt(a0), [x1, y1] = pt(a1);
+    verts.push(0, 0, x0, y0, x1, y1);
+  }
+  return new Float32Array(verts);
+})();
+var programCache6 = /* @__PURE__ */ new WeakMap();
+function getProgram6(gl) {
+  let p = programCache6.get(gl);
+  if (!p) {
+    p = createProgram(gl, VERT6, FRAG6);
+    programCache6.set(gl, p);
+  }
+  return p;
+}
+var counter6 = 0;
+var HexbinLayer = class {
+  constructor(gl, opts) {
+    this.buffers = [];
+    this.xRef = 0;
+    this.yRef = 0;
+    this.xBounds = [0, 0];
+    this.yBounds = [0, 0];
+    this.id = `hexbin-${counter6++}`;
+    this.gl = gl;
+    this.program = getProgram6(gl);
+    this.yAxis = opts.yAxis ?? "y";
+    const n = Math.min(opts.x.length, opts.y.length);
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+    for (let i = 0; i < n; i++) {
+      const x = opts.x[i], y = opts.y[i];
+      if (x < minX) minX = x;
+      if (x > maxX) maxX = x;
+      if (y < minY) minY = y;
+      if (y > maxY) maxY = y;
+    }
+    this.xBounds = [minX, maxX];
+    this.yBounds = [minY, maxY];
+    const r = opts.radius ?? ((maxX - minX) / 30 || 1);
+    this.radius = r;
+    const dx = r * 2 * Math.sin(Math.PI / 3);
+    const dy = r * 1.5;
+    const cells = /* @__PURE__ */ new Map();
+    let maxCount = 1;
+    for (let i = 0; i < n; i++) {
+      const px = opts.x[i], py = opts.y[i];
+      const pj = Math.round(py / dy);
+      const pi = Math.round(px / dx - (pj & 1) / 2);
+      const key = `${pi},${pj}`;
+      let cell = cells.get(key);
+      if (!cell) {
+        cell = { cx: (pi + (pj & 1) / 2) * dx, cy: pj * dy, count: 0 };
+        cells.set(key, cell);
+      }
+      cell.count++;
+      if (cell.count > maxCount) maxCount = cell.count;
+    }
+    this.cellCount = cells.size;
+    this.xRef = minX;
+    this.yRef = minY;
+    const centers = new Float32Array(this.cellCount * 2);
+    const colors = new Float32Array(this.cellCount * 4);
+    const cmap = colormap(opts.colormap ?? "viridis");
+    const lo = opts.domain?.[0] ?? 1;
+    const hi = opts.domain?.[1] ?? maxCount;
+    const span = hi - lo || 1;
+    let k = 0;
+    for (const cell of cells.values()) {
+      centers[k * 2] = cell.cx - this.xRef;
+      centers[k * 2 + 1] = cell.cy - this.yRef;
+      const [cr, cg, cb] = cmap((cell.count - lo) / span);
+      colors[k * 4] = cr;
+      colors[k * 4 + 1] = cg;
+      colors[k * 4 + 2] = cb;
+      colors[k * 4 + 3] = 1;
+      k++;
+    }
+    const vao = gl.createVertexArray();
+    this.vao = vao;
+    gl.bindVertexArray(vao);
+    const hexBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, hexBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, HEX, gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+    const centerBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, centerBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, centers, gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(1);
+    gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 0, 0);
+    gl.vertexAttribDivisor(1, 1);
+    const colorBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(2);
+    gl.vertexAttribPointer(2, 4, gl.FLOAT, false, 0, 0);
+    gl.vertexAttribDivisor(2, 1);
+    gl.bindVertexArray(null);
+    this.buffers = [hexBuf, centerBuf, colorBuf];
+    this.uniforms = uniformLocations(gl, this.program, [...TRANSFORM_UNIFORMS, "uRadius"]);
+  }
+  bounds() {
+    if (this.cellCount === 0) return null;
+    return { x: this.xBounds, y: this.yBounds };
+  }
+  draw(state) {
+    if (this.cellCount === 0) return;
+    const gl = state.gl;
+    gl.useProgram(this.program);
+    setTransformUniforms(gl, this.uniforms, state.x, state.y, this.xRef, this.yRef);
+    gl.uniform1f(this.uniforms.uRadius, this.radius);
+    gl.bindVertexArray(this.vao);
+    gl.drawArraysInstanced(gl.TRIANGLES, 0, 18, this.cellCount);
+    gl.bindVertexArray(null);
+  }
+  dispose() {
+    this.gl.deleteVertexArray(this.vao);
+    for (const b of this.buffers) this.gl.deleteBuffer(b);
+  }
+};
+
+// src/layers/line.ts
+var VERT7 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+layout(location = 0) in vec2 aCorner;  // (along 0..1, side -1..1)
+layout(location = 1) in vec2 aP0;
+layout(location = 2) in vec2 aP1;
+uniform vec2 uResolution;
+uniform float uWidth;
+uniform float uRound;
+${TRANSFORM_GLSL}
+out vec2 vPix;
+out vec2 vS0;
+out vec2 vS1;
+void main() {
+  vec2 s0 = (dataToClip(aP0) * 0.5 + 0.5) * uResolution;
+  vec2 s1 = (dataToClip(aP1) * 0.5 + 0.5) * uResolution;
+  vec2 d = s1 - s0;
+  float len = length(d);
+  vec2 dir = len > 1e-6 ? d / len : vec2(1.0, 0.0);
+  vec2 nrm = vec2(-dir.y, dir.x);
+  float hw = uWidth * 0.5 + 1.5;                 // half width + AA margin
+  float ext = uRound > 0.5 ? hw : 0.0;           // extend for round caps
+  vec2 endpoint = mix(s0, s1, aCorner.x);
+  vec2 outward = (aCorner.x < 0.5 ? -dir : dir) * ext;
+  vec2 pos = endpoint + outward + nrm * (aCorner.y * hw);
+  vPix = pos; vS0 = s0; vS1 = s1;
+  gl_Position = vec4((pos / uResolution) * 2.0 - 1.0, 0.0, 1.0);
+}`
+);
+var FRAG7 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+in vec2 vPix;
+in vec2 vS0;
+in vec2 vS1;
+uniform vec4 uColor;
+uniform float uWidth;
+uniform float uRound;
+out vec4 outColor;
+void main() {
+  vec2 pa = vPix - vS0;
+  vec2 ba = vS1 - vS0;
+  float bb = dot(ba, ba);
+  float t = bb > 1e-6 ? dot(pa, ba) / bb : 0.0;
+  float d;
+  if (uRound > 0.5) {
+    d = length(pa - ba * clamp(t, 0.0, 1.0));    // round caps/joins
+  } else {
+    if (t < 0.0 || t > 1.0) discard;             // butt caps
+    d = length(pa - ba * t);
+  }
+  float hw = uWidth * 0.5;
+  float alpha = 1.0 - smoothstep(hw - 1.0, hw + 1.0, d);
+  if (alpha <= 0.0) discard;
+  outColor = vec4(uColor.rgb * uColor.a, uColor.a) * alpha;
+}`
+);
+var CORNERS2 = new Float32Array([0, -1, 1, -1, 1, 1, 0, -1, 1, 1, 0, 1]);
+var programCache7 = /* @__PURE__ */ new WeakMap();
+function getProgram7(gl) {
+  let p = programCache7.get(gl);
+  if (!p) {
+    p = createProgram(gl, VERT7, FRAG7);
+    programCache7.set(gl, p);
+  }
+  return p;
+}
+function stepExpand(xs, ys, n, mode) {
+  const ox = [], oy = [];
+  for (let i = 0; i < n - 1; i++) {
+    const x0 = xs[i], y0 = ys[i], x1 = xs[i + 1], y1 = ys[i + 1];
+    if (mode === "center") {
+      const xm = (x0 + x1) / 2;
+      ox.push(x0, xm, xm);
+      oy.push(y0, y0, y1);
+    } else if (mode === "after") {
+      ox.push(x0, x1);
+      oy.push(y0, y0);
+    } else {
+      ox.push(x0, x0);
+      oy.push(y0, y1);
+    }
+  }
+  ox.push(xs[n - 1]);
+  oy.push(ys[n - 1]);
+  return { xs: Float64Array.from(ox), ys: Float64Array.from(oy) };
+}
+function upperBound(a, v) {
+  let lo = 0, hi = a.length;
+  while (lo < hi) {
+    const m = lo + hi >> 1;
+    if (a[m] <= v) lo = m + 1;
+    else hi = m;
+  }
+  return lo;
+}
+var counter7 = 0;
+var LineLayer = class {
+  constructor(gl, opts) {
+    this.xRef = 0;
+    this.yRef = 0;
+    this.xBounds = [0, 0];
+    this.yBounds = [0, 0];
+    this.decKey = "";
+    this.decSegments = 0;
+    this.id = `line-${counter7++}`;
+    this.gl = gl;
+    this.program = getProgram7(gl);
+    this.width = opts.width ?? 1.5;
+    this.round = (opts.join ?? "round") === "round";
+    this.decimateOn = opts.decimate !== false;
+    this.step = opts.step;
+    const colorInput = opts.color ?? "#3b82f6";
+    this.color = Array.isArray(colorInput) ? colorInput : parseColor(colorInput);
+    this.colorCss = typeof colorInput === "string" ? colorInput : toColorCss(this.color);
+    this.name = opts.name ?? this.id;
+    this.yAxis = opts.yAxis ?? "y";
+    let n = Math.min(opts.x.length, opts.y.length);
+    let xs = opts.x, ys = opts.y;
+    if (opts.step && n >= 2) {
+      const e = stepExpand(opts.x, opts.y, n, opts.step);
+      xs = e.xs;
+      ys = e.ys;
+      n = e.xs.length;
+    }
+    this.xs = new Float64Array(n);
+    this.ys = new Float64Array(n);
+    this.xRef = n > 0 ? xs[0] : 0;
+    this.yRef = n > 0 ? ys[0] : 0;
+    const data = new Float32Array(n * 2);
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity, mono = true;
+    for (let i = 0; i < n; i++) {
+      const x = xs[i], y = ys[i];
+      this.xs[i] = x;
+      this.ys[i] = y;
+      data[i * 2] = x - this.xRef;
+      data[i * 2 + 1] = y - this.yRef;
+      if (i > 0 && x < xs[i - 1]) mono = false;
+      if (x < minX) minX = x;
+      if (x > maxX) maxX = x;
+      if (y < minY) minY = y;
+      if (y > maxY) maxY = y;
+    }
+    this.xBounds = [minX, maxX];
+    this.yBounds = [minY, maxY];
+    this.count = n;
+    this.monotonic = mono;
+    this.cornerBuf = gl.createBuffer();
+    this.posBuf = gl.createBuffer();
+    this.decBuf = gl.createBuffer();
+    this.fullVao = gl.createVertexArray();
+    this.decVao = gl.createVertexArray();
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.cornerBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, CORNERS2, gl.STATIC_DRAW);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.posBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+    this.configureVao(this.fullVao, this.posBuf);
+    this.configureVao(this.decVao, this.decBuf);
+    this.uniforms = uniformLocations(gl, this.program, [
+      ...TRANSFORM_UNIFORMS,
+      "uColor",
+      "uResolution",
+      "uWidth",
+      "uRound"
+    ]);
+  }
+  configureVao(vao, pointBuf) {
+    const gl = this.gl;
+    gl.bindVertexArray(vao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.cornerBuf);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+    gl.bindBuffer(gl.ARRAY_BUFFER, pointBuf);
+    gl.enableVertexAttribArray(1);
+    gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 8, 0);
+    gl.vertexAttribDivisor(1, 1);
+    gl.enableVertexAttribArray(2);
+    gl.vertexAttribPointer(2, 2, gl.FLOAT, false, 8, 8);
+    gl.vertexAttribDivisor(2, 1);
+    gl.bindVertexArray(null);
+  }
+  bounds() {
+    if (this.count === 0) return null;
+    return { x: this.xBounds, y: this.yBounds };
+  }
+  nearestByX(x) {
+    if (this.count === 0) return null;
+    let best = 0, bestDist = Infinity;
+    for (let i = 0; i < this.count; i++) {
+      const d = Math.abs(this.xs[i] - x);
+      if (d < bestDist) {
+        bestDist = d;
+        best = i;
+      }
+    }
+    return { x: this.xs[best], y: this.ys[best], index: best };
+  }
+  /** Replace the series data and re-upload the GPU buffer (for streaming). */
+  setData(x, y) {
+    let n = Math.min(x.length, y.length);
+    let xs = x, ys = y;
+    if (this.step && n >= 2) {
+      const e = stepExpand(x, y, n, this.step);
+      xs = e.xs;
+      ys = e.ys;
+      n = e.xs.length;
+    }
+    this.xs = new Float64Array(n);
+    this.ys = new Float64Array(n);
+    this.xRef = n > 0 ? xs[0] : 0;
+    this.yRef = n > 0 ? ys[0] : 0;
+    const data = new Float32Array(n * 2);
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity, mono = true;
+    for (let i = 0; i < n; i++) {
+      const vx = xs[i], vy = ys[i];
+      this.xs[i] = vx;
+      this.ys[i] = vy;
+      data[i * 2] = vx - this.xRef;
+      data[i * 2 + 1] = vy - this.yRef;
+      if (i > 0 && vx < xs[i - 1]) mono = false;
+      if (vx < minX) minX = vx;
+      if (vx > maxX) maxX = vx;
+      if (vy < minY) minY = vy;
+      if (vy > maxY) maxY = vy;
+    }
+    this.xBounds = [minX, maxX];
+    this.yBounds = [minY, maxY];
+    this.count = n;
+    this.monotonic = mono;
+    this.decKey = "";
+    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.posBuf);
+    this.gl.bufferData(this.gl.ARRAY_BUFFER, data, this.gl.DYNAMIC_DRAW);
+  }
+  /**
+   * Rebuild the min/max-decimated buffer for the visible x-window if it changed.
+   * Returns the segment count to draw from `decVao`, or null to draw everything.
+   */
+  decimate(x, cols) {
+    if (!this.decimateOn || !this.monotonic || this.count < 4 * cols) return null;
+    const target = Math.max(2, cols * 2);
+    let i0 = upperBound(this.xs, x.lo) - 1;
+    let i1 = upperBound(this.xs, x.hi);
+    i0 = Math.max(0, i0);
+    i1 = Math.min(this.count - 1, i1);
+    const visN = i1 - i0;
+    if (visN <= target * 1.5) return null;
+    const key = `${i0}:${i1}:${target}`;
+    if (key === this.decKey) return this.decSegments;
+    this.decKey = key;
+    const out = [];
+    const push = (i) => out.push(this.xs[i] - this.xRef, this.ys[i] - this.yRef);
+    push(i0);
+    for (let b = 0; b < cols; b++) {
+      const lo = i0 + Math.floor(visN * b / cols);
+      const hi = i0 + Math.floor(visN * (b + 1) / cols);
+      if (hi <= lo) continue;
+      let iMin = lo, iMax = lo;
+      for (let i = lo; i < hi; i++) {
+        if (this.ys[i] < this.ys[iMin]) iMin = i;
+        if (this.ys[i] > this.ys[iMax]) iMax = i;
+      }
+      if (iMin < iMax) {
+        push(iMin);
+        push(iMax);
+      } else {
+        push(iMax);
+        push(iMin);
+      }
+    }
+    push(i1);
+    const gl = this.gl;
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.decBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(out), gl.DYNAMIC_DRAW);
+    this.decSegments = out.length / 2 - 1;
+    return this.decSegments;
+  }
+  draw(state) {
+    if (this.count < 2) return;
+    const gl = state.gl;
+    const decSegs = this.decimate(state.x, Math.max(1, Math.round(state.pixelWidth)));
+    const vao = decSegs != null ? this.decVao : this.fullVao;
+    const segments = decSegs != null ? decSegs : this.count - 1;
+    if (segments < 1) return;
+    gl.useProgram(this.program);
+    setTransformUniforms(gl, this.uniforms, state.x, state.y, this.xRef, this.yRef);
+    gl.uniform4f(this.uniforms.uColor, this.color[0], this.color[1], this.color[2], this.color[3]);
+    gl.uniform2f(this.uniforms.uResolution, state.pixelWidth, state.pixelHeight);
+    gl.uniform1f(this.uniforms.uWidth, this.width * state.dpr);
+    gl.uniform1f(this.uniforms.uRound, this.round ? 1 : 0);
+    gl.bindVertexArray(vao);
+    gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, segments);
+    gl.bindVertexArray(null);
+  }
+  dispose() {
+    const gl = this.gl;
+    gl.deleteVertexArray(this.fullVao);
+    gl.deleteVertexArray(this.decVao);
+    gl.deleteBuffer(this.cornerBuf);
+    gl.deleteBuffer(this.posBuf);
+    gl.deleteBuffer(this.decBuf);
+  }
+};
+
+// src/layers/scatter.ts
+var VERT8 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+layout(location = 0) in vec2 aCorner;  // unit quad [-1,1]^2
+layout(location = 1) in vec2 aPos;     // point (offset data space)
+layout(location = 2) in vec4 aColor;   // per-point color (used if uUseVertexColor>0.5)
+uniform vec2 uResolution;
+uniform float uSize;                   // radius in device px
+${TRANSFORM_GLSL}
+out vec2 vLocal;
+out vec4 vColor;
+void main() {
+  vec2 center = (dataToClip(aPos) * 0.5 + 0.5) * uResolution;
+  vec2 pos = center + aCorner * uSize;
+  vLocal = aCorner;
+  vColor = aColor;
+  gl_Position = vec4((pos / uResolution) * 2.0 - 1.0, 0.0, 1.0);
+}`
+);
+var FRAG8 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+in vec2 vLocal;
+in vec4 vColor;
+uniform vec4 uColor;
+uniform float uUseVertexColor;
+out vec4 outColor;
+void main() {
+  float r = length(vLocal);
+  if (r > 1.0) discard;
+  float alpha = smoothstep(1.0, 1.0 - 0.15, r);  // soft edge
+  vec4 c = uUseVertexColor > 0.5 ? vColor : uColor;
+  outColor = vec4(c.rgb * c.a * alpha, c.a * alpha);
+}`
+);
+var CORNERS3 = new Float32Array([-1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1]);
+var programCache8 = /* @__PURE__ */ new WeakMap();
+function getProgram8(gl) {
+  let p = programCache8.get(gl);
+  if (!p) {
+    p = createProgram(gl, VERT8, FRAG8);
+    programCache8.set(gl, p);
+  }
+  return p;
+}
+var counter8 = 0;
+var ScatterLayer = class {
+  constructor(gl, opts) {
+    this.buffers = [];
+    this.xRef = 0;
+    this.yRef = 0;
+    this.xBounds = [0, 0];
+    this.yBounds = [0, 0];
+    this.id = `scatter-${counter8++}`;
+    this.gl = gl;
+    this.program = getProgram8(gl);
+    this.size = opts.size ?? 5;
+    const colorInput = opts.color ?? "#3b82f6";
+    this.color = Array.isArray(colorInput) ? colorInput : parseColor(colorInput);
+    this.colorCss = typeof colorInput === "string" ? colorInput : toColorCss(this.color);
+    this.name = opts.name ?? this.id;
+    this.yAxis = opts.yAxis ?? "y";
+    this.useVertexColor = opts.colorBy != null;
+    const n = Math.min(opts.x.length, opts.y.length);
+    this.count = n;
+    this.xs = new Float64Array(n);
+    this.ys = new Float64Array(n);
+    this.xRef = n > 0 ? opts.x[0] : 0;
+    this.yRef = n > 0 ? opts.y[0] : 0;
+    const pos = new Float32Array(n * 2);
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+    for (let i = 0; i < n; i++) {
+      const x = opts.x[i], y = opts.y[i];
+      this.xs[i] = x;
+      this.ys[i] = y;
+      pos[i * 2] = x - this.xRef;
+      pos[i * 2 + 1] = y - this.yRef;
+      if (x < minX) minX = x;
+      if (x > maxX) maxX = x;
+      if (y < minY) minY = y;
+      if (y > maxY) maxY = y;
+    }
+    this.xBounds = [minX, maxX];
+    this.yBounds = [minY, maxY];
+    const colors = new Float32Array(n * 4);
+    if (opts.colorBy) {
+      const vals = opts.colorBy.values;
+      const cmap = colormap(opts.colorBy.colormap ?? "viridis");
+      let lo = opts.colorBy.domain?.[0] ?? Infinity;
+      let hi = opts.colorBy.domain?.[1] ?? -Infinity;
+      if (!opts.colorBy.domain) {
+        for (let i = 0; i < n; i++) {
+          const v = vals[i];
+          if (v < lo) lo = v;
+          if (v > hi) hi = v;
+        }
+      }
+      const span = hi - lo || 1;
+      for (let i = 0; i < n; i++) {
+        const [r, g, b] = cmap((vals[i] - lo) / span);
+        colors[i * 4] = r;
+        colors[i * 4 + 1] = g;
+        colors[i * 4 + 2] = b;
+        colors[i * 4 + 3] = 1;
+      }
+    }
+    const vao = gl.createVertexArray();
+    this.vao = vao;
+    gl.bindVertexArray(vao);
+    const cornerBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, cornerBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, CORNERS3, gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+    const posBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, posBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, pos, gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(1);
+    gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 0, 0);
+    gl.vertexAttribDivisor(1, 1);
+    const colorBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(2);
+    gl.vertexAttribPointer(2, 4, gl.FLOAT, false, 0, 0);
+    gl.vertexAttribDivisor(2, 1);
+    gl.bindVertexArray(null);
+    this.buffers = [cornerBuf, posBuf, colorBuf];
+    this.uniforms = uniformLocations(gl, this.program, [
+      ...TRANSFORM_UNIFORMS,
+      "uColor",
+      "uResolution",
+      "uSize",
+      "uUseVertexColor"
+    ]);
+  }
+  bounds() {
+    if (this.count === 0) return null;
+    return { x: this.xBounds, y: this.yBounds };
+  }
+  nearestByX(x) {
+    if (this.count === 0) return null;
+    let best = 0, bestDist = Infinity;
+    for (let i = 0; i < this.count; i++) {
+      const d = Math.abs(this.xs[i] - x);
+      if (d < bestDist) {
+        bestDist = d;
+        best = i;
+      }
+    }
+    return { x: this.xs[best], y: this.ys[best], index: best };
+  }
+  /** Replace point positions and re-upload (for streaming). Keeps uniform color. */
+  setData(x, y) {
+    const n = Math.min(x.length, y.length);
+    this.count = n;
+    this.xs = new Float64Array(n);
+    this.ys = new Float64Array(n);
+    this.xRef = n > 0 ? x[0] : 0;
+    this.yRef = n > 0 ? y[0] : 0;
+    const pos = new Float32Array(n * 2);
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+    for (let i = 0; i < n; i++) {
+      const vx = x[i], vy = y[i];
+      this.xs[i] = vx;
+      this.ys[i] = vy;
+      pos[i * 2] = vx - this.xRef;
+      pos[i * 2 + 1] = vy - this.yRef;
+      if (vx < minX) minX = vx;
+      if (vx > maxX) maxX = vx;
+      if (vy < minY) minY = vy;
+      if (vy > maxY) maxY = vy;
+    }
+    this.xBounds = [minX, maxX];
+    this.yBounds = [minY, maxY];
+    this.useVertexColor = false;
+    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffers[1]);
+    this.gl.bufferData(this.gl.ARRAY_BUFFER, pos, this.gl.DYNAMIC_DRAW);
+  }
+  draw(state) {
+    if (this.count === 0) return;
+    const gl = state.gl;
+    gl.useProgram(this.program);
+    setTransformUniforms(gl, this.uniforms, state.x, state.y, this.xRef, this.yRef);
+    gl.uniform4f(this.uniforms.uColor, this.color[0], this.color[1], this.color[2], this.color[3]);
+    gl.uniform2f(this.uniforms.uResolution, state.pixelWidth, state.pixelHeight);
+    gl.uniform1f(this.uniforms.uSize, this.size / 2 * state.dpr);
+    gl.uniform1f(this.uniforms.uUseVertexColor, this.useVertexColor ? 1 : 0);
+    gl.bindVertexArray(this.vao);
+    gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, this.count);
+    gl.bindVertexArray(null);
+  }
+  dispose() {
+    this.gl.deleteVertexArray(this.vao);
+    for (const b of this.buffers) this.gl.deleteBuffer(b);
+  }
+};
+
+// src/render/overlay.ts
+function plotRegion(layout) {
+  const { margin } = layout;
+  return {
+    left: margin.left,
+    top: margin.top,
+    width: Math.max(0, layout.cssWidth - margin.left - margin.right),
+    height: Math.max(0, layout.cssHeight - margin.top - margin.bottom)
+  };
+}
+var lightTheme = {
+  axis: "#334155",
+  grid: "rgba(100,116,139,0.18)",
+  gridMinor: "rgba(100,116,139,0.08)",
+  text: "#475569",
+  font: "12px system-ui, -apple-system, sans-serif"
+};
+var darkTheme = {
+  axis: "#cbd5e1",
+  grid: "rgba(148,163,184,0.16)",
+  gridMinor: "rgba(148,163,184,0.07)",
+  text: "#94a3b8",
+  font: "12px system-ui, -apple-system, sans-serif"
+};
+function pxX(region, t) {
+  return region.left + t * region.width;
+}
+function pxY(region, t) {
+  return region.top + (1 - t) * region.height;
+}
+function drawGrid(ctx, region, scaleX, scaleY, ticksX, ticksY, theme) {
+  ctx.save();
+  ctx.lineWidth = 1;
+  for (const t of ticksX) {
+    if (!t.grid) continue;
+    const x = Math.round(pxX(region, scaleX.norm(t.value))) + 0.5;
+    ctx.strokeStyle = t.minor ? theme.gridMinor : theme.grid;
+    ctx.beginPath();
+    ctx.moveTo(x, region.top);
+    ctx.lineTo(x, region.top + region.height);
+    ctx.stroke();
+  }
+  for (const t of ticksY) {
+    if (!t.grid) continue;
+    const y = Math.round(pxY(region, scaleY.norm(t.value))) + 0.5;
+    ctx.strokeStyle = t.minor ? theme.gridMinor : theme.grid;
+    ctx.beginPath();
+    ctx.moveTo(region.left, y);
+    ctx.lineTo(region.left + region.width, y);
+    ctx.stroke();
+  }
+  ctx.restore();
+}
+function drawXAxis(ctx, region, scaleX, ticksX, theme, title) {
+  ctx.save();
+  ctx.strokeStyle = theme.axis;
+  ctx.fillStyle = theme.text;
+  ctx.font = theme.font;
+  ctx.lineWidth = 1;
+  const bottom = region.top + region.height;
+  ctx.beginPath();
+  ctx.moveTo(region.left, bottom + 0.5);
+  ctx.lineTo(region.left + region.width, bottom + 0.5);
+  ctx.stroke();
+  ctx.textAlign = "center";
+  ctx.textBaseline = "top";
+  for (const t of ticksX) {
+    const x = Math.round(pxX(region, scaleX.norm(t.value))) + 0.5;
+    const len = t.minor ? 3 : 5;
+    ctx.beginPath();
+    ctx.moveTo(x, bottom);
+    ctx.lineTo(x, bottom + len);
+    ctx.stroke();
+    if (t.label) ctx.fillText(t.label, x, bottom + len + 3);
+  }
+  if (title) {
+    ctx.textBaseline = "bottom";
+    ctx.fillText(title, region.left + region.width / 2, bottom + 34);
+  }
+  ctx.restore();
+}
+function drawYAxis(ctx, region, scaleY, ticksY, theme, opts) {
+  ctx.save();
+  const color = opts.color ?? theme.axis;
+  ctx.strokeStyle = color;
+  ctx.fillStyle = opts.color ?? theme.text;
+  ctx.font = theme.font;
+  ctx.lineWidth = 1;
+  const ax = Math.round(opts.x) + 0.5;
+  const dir = opts.side === "left" ? -1 : 1;
+  ctx.beginPath();
+  ctx.moveTo(ax, region.top);
+  ctx.lineTo(ax, region.top + region.height);
+  ctx.stroke();
+  ctx.textAlign = opts.side === "left" ? "right" : "left";
+  ctx.textBaseline = "middle";
+  for (const t of ticksY) {
+    const y = Math.round(pxY(region, scaleY.norm(t.value))) + 0.5;
+    const len = t.minor ? 3 : 5;
+    ctx.beginPath();
+    ctx.moveTo(ax, y);
+    ctx.lineTo(ax + dir * len, y);
+    ctx.stroke();
+    if (t.label) ctx.fillText(t.label, ax + dir * (len + 4), y);
+  }
+  if (opts.title) {
+    ctx.save();
+    const tx = opts.titleX ?? (opts.side === "left" ? 12 : region.left + region.width + 36);
+    ctx.translate(tx, region.top + region.height / 2);
+    ctx.rotate(-Math.PI / 2);
+    ctx.textAlign = "center";
+    ctx.textBaseline = opts.side === "left" ? "top" : "bottom";
+    ctx.fillText(opts.title, 0, 0);
+    ctx.restore();
+  }
+  ctx.restore();
+}
+function drawCrosshair(ctx, region, px, theme) {
+  ctx.save();
+  ctx.strokeStyle = theme.text;
+  ctx.globalAlpha = 0.4;
+  ctx.setLineDash([3, 3]);
+  ctx.lineWidth = 1;
+  const x = Math.round(px) + 0.5;
+  ctx.beginPath();
+  ctx.moveTo(x, region.top);
+  ctx.lineTo(x, region.top + region.height);
+  ctx.stroke();
+  ctx.restore();
+}
+function drawMarker(ctx, px, py, color) {
+  ctx.save();
+  ctx.fillStyle = color;
+  ctx.strokeStyle = "#ffffff";
+  ctx.lineWidth = 1.5;
+  ctx.beginPath();
+  ctx.arc(px, py, 4, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.stroke();
+  ctx.restore();
+}
+
+// src/scales/scale.ts
+var LinearScale = class {
+  constructor(domain = [0, 1]) {
+    this.type = "linear";
+    this.log = false;
+    this.domain = domain;
+  }
+  norm(value) {
+    const [a, b] = this.domain;
+    return b === a ? 0 : (value - a) / (b - a);
+  }
+  invert(t) {
+    const [a, b] = this.domain;
+    return a + t * (b - a);
+  }
+  ticks(target = 6) {
+    return autoTicks(this.domain[0], this.domain[1], target);
+  }
+  formatTick(value) {
+    return defaultFormat(value);
+  }
+};
+var LogScale = class _LogScale {
+  constructor(domain = [1, 1e3]) {
+    this.type = "log";
+    this.log = true;
+    this.domain = _LogScale.sanitize(domain);
+  }
+  static sanitize(d) {
+    const lo = d[0] > 0 ? d[0] : 1e-9;
+    const hi = d[1] > lo ? d[1] : lo * 10;
+    return [lo, hi];
+  }
+  get la() {
+    return Math.log10(this.domain[0]);
+  }
+  get lb() {
+    return Math.log10(this.domain[1]);
+  }
+  norm(value) {
+    if (value <= 0) return 0;
+    return (Math.log10(value) - this.la) / (this.lb - this.la);
+  }
+  invert(t) {
+    return Math.pow(10, this.la + t * (this.lb - this.la));
+  }
+  ticks() {
+    const [a, b] = this.domain;
+    const lo = Math.floor(Math.log10(a));
+    const hi = Math.ceil(Math.log10(b));
+    const ticks = [];
+    for (let e = lo; e <= hi; e++) {
+      const base = Math.pow(10, e);
+      ticks.push({ value: base });
+      for (let m = 2; m <= 9; m++) ticks.push({ value: m * base, minor: true, grid: false });
+    }
+    return ticks;
+  }
+  formatTick(value) {
+    const e = Math.round(Math.log10(value));
+    if (e <= -4 || e >= 5) return `1e${e}`;
+    return defaultFormat(value);
+  }
+};
+var SECOND = 1e3;
+var MINUTE = 6e4;
+var HOUR = 36e5;
+var DAY = 864e5;
+var TIME_STEPS = [
+  SECOND,
+  5 * SECOND,
+  15 * SECOND,
+  30 * SECOND,
+  MINUTE,
+  5 * MINUTE,
+  15 * MINUTE,
+  30 * MINUTE,
+  HOUR,
+  3 * HOUR,
+  6 * HOUR,
+  12 * HOUR,
+  DAY,
+  2 * DAY,
+  7 * DAY,
+  30 * DAY,
+  90 * DAY,
+  365 * DAY
+];
+function pad2(n) {
+  return n < 10 ? `0${n}` : `${n}`;
+}
+var TimeScale = class {
+  constructor(domain = [0, DAY]) {
+    this.type = "time";
+    this.log = false;
+    this.domain = domain;
+  }
+  norm(value) {
+    const [a, b] = this.domain;
+    return b === a ? 0 : (value - a) / (b - a);
+  }
+  invert(t) {
+    const [a, b] = this.domain;
+    return a + t * (b - a);
+  }
+  chooseStep(target) {
+    const ideal = (this.domain[1] - this.domain[0]) / target;
+    for (const s of TIME_STEPS) if (s >= ideal) return s;
+    return TIME_STEPS[TIME_STEPS.length - 1];
+  }
+  ticks(target = 6) {
+    const [a, b] = this.domain;
+    if (!isFinite(a) || !isFinite(b) || a === b) return [];
+    const step = this.chooseStep(target);
+    const start = Math.ceil(a / step) * step;
+    const ticks = [];
+    for (let i = 0; i < 1e3; i++) {
+      const v = start + i * step;
+      if (v > b) break;
+      ticks.push({ value: v });
+    }
+    return ticks;
+  }
+  formatTick(value) {
+    const span = this.domain[1] - this.domain[0];
+    const d = new Date(value);
+    if (span < DAY) return `${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
+    if (span < 90 * DAY) return `${d.getMonth() + 1}/${d.getDate()}`;
+    return `${d.getFullYear()}`;
+  }
+};
+function makeScale(type, domain) {
+  switch (type) {
+    case "linear":
+      return new LinearScale(domain);
+    case "log":
+      return new LogScale(domain);
+    case "time":
+      return new TimeScale(domain);
+    default:
+      throw new Error(`Unknown scale type: ${type}`);
+  }
+}
+
+// src/ui/toolbar.ts
+var lightToolbar = {
+  bg: "rgba(255,255,255,0.9)",
+  fg: "#475569",
+  border: "rgba(100,116,139,0.25)",
+  activeBg: "#3b82f6",
+  activeFg: "#ffffff",
+  hoverBg: "rgba(100,116,139,0.12)"
+};
+var darkToolbar = {
+  bg: "rgba(15,23,42,0.85)",
+  fg: "#cbd5e1",
+  border: "rgba(148,163,184,0.25)",
+  activeBg: "#3b82f6",
+  activeFg: "#ffffff",
+  hoverBg: "rgba(148,163,184,0.15)"
+};
+var ICONS = {
+  home: `<path d="M2 7.5 8 2l6 5.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 7v6.5h3.2V10h1.6v3.5H12V7" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>`,
+  pan: `<path d="M8 1.5v13M1.5 8h13M8 1.5 6 3.5M8 1.5l2 2M8 14.5l-2-2M8 14.5l2-2M1.5 8l2-2M1.5 8l2 2M14.5 8l-2-2M14.5 8l-2 2" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>`,
+  box: `<rect x="2.5" y="2.5" width="11" height="11" rx="1" fill="none" stroke="currentColor" stroke-width="1.4" stroke-dasharray="2.4 2"/><circle cx="8" cy="8" r="1.4" fill="currentColor"/>`,
+  boxX: `<path d="M1.5 8h13M3.5 5.5 1.5 8l2 2.5M12.5 5.5 14.5 8l-2 2.5" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/><rect x="4.5" y="3" width="7" height="10" rx="1" fill="none" stroke="currentColor" stroke-width="1.1" stroke-dasharray="2 1.8"/>`,
+  boxY: `<path d="M8 1.5v13M5.5 3.5 8 1.5l2.5 2M5.5 12.5 8 14.5l2.5-2" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/><rect x="3" y="4.5" width="10" height="7" rx="1" fill="none" stroke="currentColor" stroke-width="1.1" stroke-dasharray="2 1.8"/>`
+};
+function createToolbar(container, host, dark) {
+  const t = dark ? darkToolbar : lightToolbar;
+  const bar = document.createElement("div");
+  Object.assign(bar.style, {
+    position: "absolute",
+    top: "8px",
+    right: "8px",
+    zIndex: "3",
+    display: "flex",
+    gap: "2px",
+    padding: "3px",
+    borderRadius: "8px",
+    background: t.bg,
+    border: `1px solid ${t.border}`,
+    backdropFilter: "blur(6px)",
+    boxShadow: "0 2px 8px rgba(0,0,0,0.15)"
+  });
+  const buttons = [
+    { key: "home", title: "Reset view (Home)", icon: ICONS.home, action: () => host.home() },
+    { key: "pan", title: "Pan", icon: ICONS.pan, mode: "pan" },
+    { key: "box", title: "Box zoom", icon: ICONS.box, mode: "box" },
+    { key: "box-x", title: "Zoom X only", icon: ICONS.boxX, mode: "box-x" },
+    { key: "box-y", title: "Zoom Y only", icon: ICONS.boxY, mode: "box-y" }
+  ];
+  const modeButtons = /* @__PURE__ */ new Map();
+  for (const b of buttons) {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.title = b.title;
+    btn.setAttribute("aria-label", b.title);
+    btn.innerHTML = `<svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">${b.icon}</svg>`;
+    Object.assign(btn.style, {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "26px",
+      height: "26px",
+      padding: "0",
+      border: "none",
+      borderRadius: "6px",
+      background: "transparent",
+      color: t.fg,
+      cursor: "pointer",
+      transition: "background 0.12s, color 0.12s"
+    });
+    btn.addEventListener("mouseenter", () => {
+      if (btn.dataset.active !== "true") btn.style.background = t.hoverBg;
+    });
+    btn.addEventListener("mouseleave", () => {
+      if (btn.dataset.active !== "true") btn.style.background = "transparent";
+    });
+    btn.addEventListener("click", () => {
+      if (b.action) b.action();
+      if (b.mode) host.setMode(b.mode);
+    });
+    if (b.mode) modeButtons.set(b.mode, btn);
+    bar.appendChild(btn);
+  }
+  const setActive = (mode) => {
+    for (const [m, btn] of modeButtons) {
+      const active = m === mode;
+      btn.dataset.active = String(active);
+      btn.style.background = active ? t.activeBg : "transparent";
+      btn.style.color = active ? t.activeFg : t.fg;
+    }
+  };
+  setActive(host.getMode());
+  host.onModeChange(setActive);
+  container.appendChild(bar);
+  return {
+    element: bar,
+    destroy: () => bar.remove()
+  };
+}
+
+// src/plot.ts
+var DEFAULT_MARGIN = { top: 16, right: 16, bottom: 40, left: 56 };
+var Y_AXIS_GAP = 52;
+function isPickable(layer) {
+  return typeof layer.nearestByX === "function";
+}
+function padDomain(min, max, log, frac) {
+  if (log) {
+    const lo = min > 0 ? min : max > 0 ? max / 1e3 : 1e-9;
+    const hi = max > lo ? max : lo * 10;
+    const f = Math.pow(hi / lo, frac);
+    return [lo / f, hi * f];
+  }
+  const pad = (max - min) * frac || 1;
+  return [min - pad, max + pad];
+}
+var Plot = class {
+  constructor(container, options = {}) {
+    /** Named y axes, insertion-ordered. `"y"` is always the primary. */
+    this.yAxes = /* @__PURE__ */ new Map();
+    this.layers = [];
+    this.dpr = 1;
+    this.frameRequested = false;
+    this.modeChangeCbs = [];
+    this.toolbarHandle = null;
+    this.hoverPx = null;
+    this.container = container;
+    if (getComputedStyle(container).position === "static") {
+      container.style.position = "relative";
+    }
+    this.gridCanvas = this.makeCanvas(0);
+    this.dataCanvas = this.makeCanvas(1);
+    this.axisCanvas = this.makeCanvas(2);
+    this.gridCtx = this.gridCanvas.getContext("2d");
+    this.dataCtx = this.dataCanvas.getContext("2d");
+    this.axisCtx = this.axisCanvas.getContext("2d");
+    const s = getSharedGL();
+    this.gl = s.gl;
+    this.sharedCanvas = s.canvas;
+    const sx = options.scales?.x ?? {};
+    const sy = options.scales?.y ?? {};
+    this.scaleX = makeScale(sx.type ?? "linear", sx.domain ?? [0, 1]);
+    this.autoX = sx.domain == null;
+    this.initialX = sx.domain ?? null;
+    this.axisX = new Axis(options.axes?.x);
+    this.yAxes.set("y", {
+      id: "y",
+      scale: makeScale(sy.type ?? "linear", sy.domain ?? [0, 1]),
+      axis: new Axis(options.axes?.y),
+      side: "left",
+      auto: sy.domain == null,
+      initial: sy.domain ?? null
+    });
+    this.isDark = options.theme === "dark";
+    this.theme = options.theme === "dark" ? darkTheme : options.theme === "light" || options.theme == null ? lightTheme : options.theme;
+    this.baseMargin = { ...DEFAULT_MARGIN, ...options.margin };
+    this.mode = options.mode ?? "box";
+    this.hoverEnabled = options.hover !== false;
+    this.selectionDiv = document.createElement("div");
+    Object.assign(this.selectionDiv.style, {
+      position: "absolute",
+      display: "none",
+      zIndex: "2",
+      pointerEvents: "none",
+      background: "rgba(59,130,246,0.15)",
+      border: "1px solid rgba(59,130,246,0.9)",
+      borderRadius: "1px"
+    });
+    container.appendChild(this.selectionDiv);
+    this.tooltip = document.createElement("div");
+    Object.assign(this.tooltip.style, {
+      position: "absolute",
+      display: "none",
+      zIndex: "4",
+      pointerEvents: "none",
+      padding: "6px 8px",
+      borderRadius: "6px",
+      font: "12px system-ui, -apple-system, sans-serif",
+      lineHeight: "1.4",
+      whiteSpace: "nowrap",
+      background: this.isDark ? "rgba(15,23,42,0.92)" : "rgba(255,255,255,0.96)",
+      color: this.isDark ? "#e2e8f0" : "#1e293b",
+      border: `1px solid ${this.isDark ? "rgba(148,163,184,0.25)" : "rgba(100,116,139,0.25)"}`,
+      boxShadow: "0 4px 12px rgba(0,0,0,0.18)"
+    });
+    container.appendChild(this.tooltip);
+    this.resizeObserver = new ResizeObserver(() => this.resize());
+    this.resizeObserver.observe(container);
+    this.resize();
+    if (options.interactive !== false) this.attachInteraction();
+    if (options.toolbar !== false) {
+      this.toolbarHandle = createToolbar(
+        container,
+        {
+          setMode: (m) => this.setMode(m),
+          getMode: () => this.mode,
+          home: () => this.home(),
+          onModeChange: (cb) => this.modeChangeCbs.push(cb)
+        },
+        this.isDark
+      );
+    }
+    this.updateCursor();
+  }
+  makeCanvas(z) {
+    const c = document.createElement("canvas");
+    Object.assign(c.style, {
+      position: "absolute",
+      inset: "0",
+      width: "100%",
+      height: "100%",
+      zIndex: String(z)
+    });
+    if (z < 2) c.style.pointerEvents = "none";
+    this.container.appendChild(c);
+    return c;
+  }
+  /** Margins grow to make room for extra y axes on each side. */
+  computeMargin() {
+    let leftCount = 0;
+    let rightCount = 0;
+    for (const ya of this.yAxes.values()) {
+      if (ya.side === "left") leftCount++;
+      else rightCount++;
+    }
+    return {
+      top: this.baseMargin.top,
+      bottom: this.baseMargin.bottom,
+      left: this.baseMargin.left + Math.max(0, leftCount - 1) * Y_AXIS_GAP,
+      right: this.baseMargin.right + rightCount * Y_AXIS_GAP
+    };
+  }
+  layout() {
+    return {
+      cssWidth: this.container.clientWidth,
+      cssHeight: this.container.clientHeight,
+      margin: this.computeMargin()
+    };
+  }
+  /** Pixel x-position (and title x) for each y axis, by draw order per side. */
+  yAxisPositions() {
+    const region = plotRegion(this.layout());
+    const out = /* @__PURE__ */ new Map();
+    let li = 0;
+    let ri = 0;
+    for (const ya of this.yAxes.values()) {
+      if (ya.side === "left") {
+        const x = region.left - li * Y_AXIS_GAP;
+        out.set(ya.id, { x, titleX: x - 42 });
+        li++;
+      } else {
+        const x = region.left + region.width + ri * Y_AXIS_GAP;
+        out.set(ya.id, { x, titleX: x + 42 });
+        ri++;
+      }
+    }
+    return out;
+  }
+  // ---- Public API -----------------------------------------------------------
+  register(layer) {
+    if (!this.yAxes.has(layer.yAxis)) {
+      throw new Error(`Unknown y axis "${layer.yAxis}". Call addYAxis() first.`);
+    }
+    this.layers.push(layer);
+    this.autoscale();
+    this.requestRender();
+    return layer;
+  }
+  addLine(opts) {
+    return this.register(new LineLayer(this.gl, opts));
+  }
+  addScatter(opts) {
+    return this.register(new ScatterLayer(this.gl, opts));
+  }
+  addBar(opts) {
+    return this.register(new BarLayer(this.gl, opts));
+  }
+  addArea(opts) {
+    return this.register(new AreaLayer(this.gl, opts));
+  }
+  addHeatmap(opts) {
+    return this.register(new HeatmapLayer(this.gl, opts));
+  }
+  addBox(opts) {
+    return this.register(new BoxLayer(this.gl, opts));
+  }
+  addHexbin(opts) {
+    return this.register(new HexbinLayer(this.gl, opts));
+  }
+  addContour(opts) {
+    return this.register(new ContourLayer(this.gl, opts));
+  }
+  /** Compute an STFT of `signal` and render it as a heatmap (time × frequency). */
+  addHeatmapSpectrogram(signal, opts = {}) {
+    const s = spectrogram(signal, opts);
+    return this.register(
+      new HeatmapLayer(this.gl, {
+        values: s.values,
+        cols: s.cols,
+        rows: s.rows,
+        extent: s.extent,
+        colormap: opts.colormap ?? "plasma"
+      })
+    );
+  }
+  /** Bin raw `values` and render a histogram as bars. */
+  addHistogram(values, opts = {}) {
+    const h = histogram(values, { bins: opts.bins, range: opts.range });
+    return this.register(
+      new BarLayer(this.gl, {
+        x: h.centers,
+        y: h.counts,
+        width: h.binWidth * 0.98,
+        color: opts.color,
+        name: opts.name,
+        yAxis: opts.yAxis
+      })
+    );
+  }
+  /** Register an additional named y axis. Series opt in via `addLine({ yAxis })`. */
+  addYAxis(id, opts = {}) {
+    if (this.yAxes.has(id)) throw new Error(`Y axis "${id}" already exists`);
+    const { type, domain, side, color, ...axisConfig } = opts;
+    this.yAxes.set(id, {
+      id,
+      scale: makeScale(type ?? "linear", domain ?? [0, 1]),
+      axis: new Axis(axisConfig),
+      side: side ?? "right",
+      auto: domain == null,
+      initial: domain ?? null,
+      color
+    });
+    this.autoscale();
+    this.requestRender();
+  }
+  removeLayer(layer) {
+    const i = this.layers.indexOf(layer);
+    if (i >= 0) {
+      this.layers.splice(i, 1);
+      layer.dispose();
+      this.autoscale();
+      this.requestRender();
+    }
+  }
+  /** Configure ticks/format/title for the x axis or a y axis (default primary "y"). */
+  setAxis(dim, config) {
+    if (dim === "x") {
+      this.axisX.update(config);
+    } else {
+      const ya = this.yAxes.get(dim === "y" ? "y" : dim);
+      if (!ya) throw new Error(`Unknown axis "${dim}"`);
+      ya.axis.update(config);
+    }
+    this.requestRender();
+  }
+  /** Set (or lock) the visible domain. `y` targets the primary axis; use `yAxes` for others. */
+  setView(view) {
+    if (view.x) {
+      this.scaleX.domain = view.x;
+      this.autoX = false;
+    }
+    if (view.y) this.setYDomain("y", view.y);
+    if (view.yAxes) {
+      for (const [id, r] of Object.entries(view.yAxes)) this.setYDomain(id, r);
+    }
+    this.requestRender();
+  }
+  setYDomain(id, range) {
+    const ya = this.yAxes.get(id);
+    if (!ya) throw new Error(`Unknown y axis "${id}"`);
+    ya.scale.domain = range;
+    ya.auto = false;
+  }
+  // ---- Interaction control --------------------------------------------------
+  setMode(mode) {
+    if (mode === this.mode) return;
+    this.mode = mode;
+    this.updateCursor();
+    for (const cb of this.modeChangeCbs) cb(mode);
+  }
+  getMode() {
+    return this.mode;
+  }
+  onModeChange(cb) {
+    this.modeChangeCbs.push(cb);
+  }
+  /** Reset to the home view: explicit domains restored, auto axes re-fit to data. */
+  home() {
+    if (this.initialX) {
+      this.scaleX.domain = this.initialX;
+      this.autoX = false;
+    } else {
+      this.autoX = true;
+    }
+    for (const ya of this.yAxes.values()) {
+      if (ya.initial) {
+        ya.scale.domain = ya.initial;
+        ya.auto = false;
+      } else {
+        ya.auto = true;
+      }
+    }
+    this.autoscale();
+    this.requestRender();
+  }
+  /** Re-fit auto axes to the data: x over all series, each y axis over its own series. */
+  autoscale() {
+    if (this.autoX) {
+      let minX = Infinity, maxX = -Infinity, any = false;
+      for (const l of this.layers) {
+        const b = l.bounds();
+        if (!b) continue;
+        any = true;
+        minX = Math.min(minX, b.x[0]);
+        maxX = Math.max(maxX, b.x[1]);
+      }
+      if (any) this.scaleX.domain = padDomain(minX, maxX, this.scaleX.log, 0.02);
+    }
+    for (const ya of this.yAxes.values()) {
+      if (!ya.auto) continue;
+      let minY = Infinity, maxY = -Infinity, any = false;
+      for (const l of this.layers) {
+        if (l.yAxis !== ya.id) continue;
+        const b = l.bounds();
+        if (!b) continue;
+        any = true;
+        minY = Math.min(minY, b.y[0]);
+        maxY = Math.max(maxY, b.y[1]);
+      }
+      if (any) ya.scale.domain = padDomain(minY, maxY, ya.scale.log, 0.05);
+    }
+  }
+  destroy() {
+    this.resizeObserver.disconnect();
+    this.toolbarHandle?.destroy();
+    this.selectionDiv.remove();
+    this.tooltip.remove();
+    for (const l of this.layers) l.dispose();
+    this.container.removeChild(this.gridCanvas);
+    this.container.removeChild(this.dataCanvas);
+    this.container.removeChild(this.axisCanvas);
+  }
+  // ---- Rendering ------------------------------------------------------------
+  resize() {
+    const dpr = window.devicePixelRatio || 1;
+    this.dpr = dpr;
+    const w = this.container.clientWidth;
+    const h = this.container.clientHeight;
+    for (const c of [this.gridCanvas, this.dataCanvas, this.axisCanvas]) {
+      c.width = Math.max(1, Math.round(w * dpr));
+      c.height = Math.max(1, Math.round(h * dpr));
+    }
+    this.gridCtx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.dataCtx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.axisCtx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.render();
+  }
+  requestRender() {
+    if (this.frameRequested) return;
+    this.frameRequested = true;
+    requestAnimationFrame(() => {
+      this.frameRequested = false;
+      this.render();
+    });
+  }
+  primaryY() {
+    return this.yAxes.get("y");
+  }
+  render() {
+    const layout = this.layout();
+    const region = plotRegion(layout);
+    const primary = this.primaryY();
+    const ticksX = this.axisX.resolve(this.scaleX);
+    const ticksYPrimary = primary.axis.resolve(primary.scale);
+    this.gridCtx.clearRect(0, 0, layout.cssWidth, layout.cssHeight);
+    drawGrid(this.gridCtx, region, this.scaleX, primary.scale, ticksX, ticksYPrimary, this.theme);
+    const gl = this.gl;
+    const devW = this.dataCanvas.width;
+    const devH = this.dataCanvas.height;
+    sizeShared(gl, devW, devH);
+    begin2D(gl);
+    gl.clearColor(0, 0, 0, 0);
+    gl.disable(gl.SCISSOR_TEST);
+    gl.viewport(0, 0, devW, devH);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    const dpr = this.dpr;
+    const vx = Math.round(region.left * dpr);
+    const vw = Math.round(region.width * dpr);
+    const vh = Math.round(region.height * dpr);
+    const vy = devH - Math.round((region.top + region.height) * dpr);
+    gl.enable(gl.SCISSOR_TEST);
+    gl.scissor(vx, vy, vw, vh);
+    gl.viewport(vx, vy, vw, vh);
+    const xFrame = {
+      lo: this.scaleX.domain[0],
+      hi: this.scaleX.domain[1],
+      log: this.scaleX.log
+    };
+    for (const layer of this.layers) {
+      const ya = this.yAxes.get(layer.yAxis);
+      layer.draw({
+        gl,
+        x: xFrame,
+        y: { lo: ya.scale.domain[0], hi: ya.scale.domain[1], log: ya.scale.log },
+        pixelWidth: vw,
+        pixelHeight: vh,
+        dpr: this.dpr
+      });
+    }
+    gl.disable(gl.SCISSOR_TEST);
+    this.dataCtx.clearRect(0, 0, layout.cssWidth, layout.cssHeight);
+    this.dataCtx.drawImage(this.sharedCanvas, 0, 0, layout.cssWidth, layout.cssHeight);
+    this.axisCtx.clearRect(0, 0, layout.cssWidth, layout.cssHeight);
+    drawXAxis(this.axisCtx, region, this.scaleX, ticksX, this.theme, this.axisX.config.title);
+    const positions = this.yAxisPositions();
+    for (const ya of this.yAxes.values()) {
+      const pos = positions.get(ya.id);
+      const ticks = ya.axis.resolve(ya.scale);
+      drawYAxis(this.axisCtx, region, ya.scale, ticks, this.theme, {
+        x: pos.x,
+        side: ya.side,
+        title: ya.axis.config.title,
+        color: ya.color,
+        titleX: pos.titleX
+      });
+    }
+    if (this.hoverEnabled && this.hoverPx) this.renderHover(region);
+    else this.tooltip.style.display = "none";
+  }
+  renderHover(region) {
+    const cursor = this.hoverPx;
+    if (cursor.x < region.left || cursor.x > region.left + region.width || cursor.y < region.top || cursor.y > region.top + region.height) {
+      this.tooltip.style.display = "none";
+      return;
+    }
+    const nx = (cursor.x - region.left) / region.width;
+    const dataX = this.scaleX.invert(nx);
+    drawCrosshair(this.axisCtx, region, cursor.x, this.theme);
+    const rows = [];
+    for (const layer of this.layers) {
+      if (!isPickable(layer)) continue;
+      const p = layer.nearestByX(dataX);
+      if (!p) continue;
+      const ya = this.yAxes.get(layer.yAxis);
+      const px = pxX(region, this.scaleX.norm(p.x));
+      const py = pxY(region, ya.scale.norm(p.y));
+      drawMarker(this.axisCtx, px, py, layer.colorCss);
+      rows.push({ layer, x: p.x, y: p.y });
+    }
+    if (rows.length === 0) {
+      this.tooltip.style.display = "none";
+      return;
+    }
+    this.updateTooltip(rows, cursor, dataX);
+  }
+  updateTooltip(rows, cursor, dataX) {
+    const tip = this.tooltip;
+    tip.replaceChildren();
+    const xfmt = this.axisX.config.format ?? defaultFormat;
+    const header = document.createElement("div");
+    header.style.opacity = "0.7";
+    header.style.marginBottom = "3px";
+    header.textContent = `x = ${xfmt(dataX)}`;
+    tip.appendChild(header);
+    for (const r of rows) {
+      const yfmt = this.yAxes.get(r.layer.yAxis).axis.config.format ?? defaultFormat;
+      const row = document.createElement("div");
+      row.style.display = "flex";
+      row.style.alignItems = "center";
+      row.style.gap = "6px";
+      const dot = document.createElement("span");
+      Object.assign(dot.style, {
+        width: "8px",
+        height: "8px",
+        borderRadius: "50%",
+        background: r.layer.colorCss,
+        flex: "0 0 auto"
+      });
+      const label = document.createElement("span");
+      label.textContent = `${r.layer.name}: ${yfmt(r.y)}`;
+      row.appendChild(dot);
+      row.appendChild(label);
+      tip.appendChild(row);
+    }
+    tip.style.display = "block";
+    const cw = this.container.clientWidth;
+    const tw = tip.offsetWidth;
+    const th = tip.offsetHeight;
+    let left = cursor.x + 14;
+    if (left + tw > cw) left = cursor.x - tw - 14;
+    let top = cursor.y + 14;
+    if (top + th > this.container.clientHeight) top = cursor.y - th - 14;
+    tip.style.left = `${Math.max(0, left)}px`;
+    tip.style.top = `${Math.max(0, top)}px`;
+  }
+  // ---- Interaction ----------------------------------------------------------
+  updateCursor() {
+    this.axisCanvas.style.cursor = this.mode === "pan" ? "grab" : "crosshair";
+  }
+  axisLock() {
+    if (this.mode === "box-x") return { x: true, y: false };
+    if (this.mode === "box-y") return { x: false, y: true };
+    return { x: true, y: true };
+  }
+  /**
+   * Which region the pointer is over: the plot body, the x-axis strip (below),
+   * or a specific y-axis strip (in a side margin). Dragging an axis strip pans
+   * just that axis.
+   */
+  zoneAt(px, py) {
+    const region = plotRegion(this.layout());
+    const inX = px >= region.left && px <= region.left + region.width;
+    const inY = py >= region.top && py <= region.top + region.height;
+    if (inX && py > region.top + region.height) return { type: "x" };
+    if (inY && !inX) {
+      const positions = this.yAxisPositions();
+      let bestId = null;
+      let bestD = Infinity;
+      for (const [id, pos] of positions) {
+        const d = Math.abs(pos.x - px);
+        if (d < bestD) {
+          bestD = d;
+          bestId = id;
+        }
+      }
+      if (bestId && bestD <= Y_AXIS_GAP) return { type: "y", id: bestId };
+    }
+    return { type: "plot" };
+  }
+  panX(dxPx, region) {
+    const dxData = dxPx / region.width * (this.scaleX.domain[1] - this.scaleX.domain[0]);
+    this.scaleX.domain = [this.scaleX.domain[0] - dxData, this.scaleX.domain[1] - dxData];
+    this.autoX = false;
+  }
+  panY(id, dyPx, region) {
+    const dyFrac = dyPx / region.height;
+    for (const ya of this.yAxes.values()) {
+      if (id && ya.id !== id) continue;
+      const span = ya.scale.domain[1] - ya.scale.domain[0];
+      const d = dyFrac * span;
+      ya.scale.domain = [ya.scale.domain[0] + d, ya.scale.domain[1] + d];
+      ya.auto = false;
+    }
+  }
+  attachInteraction() {
+    const el = this.axisCanvas;
+    el.style.touchAction = "none";
+    el.addEventListener(
+      "wheel",
+      (e) => {
+        e.preventDefault();
+        const region = plotRegion(this.layout());
+        const rect = el.getBoundingClientRect();
+        const nx = (e.clientX - rect.left - region.left) / region.width;
+        const ny = 1 - (e.clientY - rect.top - region.top) / region.height;
+        const factor = Math.exp(e.deltaY * 1e-3);
+        this.zoomAround(nx, ny, factor);
+      },
+      { passive: false }
+    );
+    let panning = false;
+    let selecting = false;
+    let axisDrag = null;
+    let lastX = 0;
+    let lastY = 0;
+    let startX = 0;
+    let startY = 0;
+    el.addEventListener("pointerdown", (e) => {
+      el.setPointerCapture(e.pointerId);
+      this.hoverPx = null;
+      const rect = el.getBoundingClientRect();
+      const px = e.clientX - rect.left;
+      const py = e.clientY - rect.top;
+      const zone = this.zoneAt(px, py);
+      if (zone.type === "x") {
+        axisDrag = "x";
+        lastX = e.clientX;
+      } else if (zone.type === "y") {
+        axisDrag = { y: zone.id };
+        lastY = e.clientY;
+      } else if (this.mode === "pan") {
+        panning = true;
+        lastX = e.clientX;
+        lastY = e.clientY;
+        el.style.cursor = "grabbing";
+      } else {
+        selecting = true;
+        startX = px;
+        startY = py;
+      }
+    });
+    el.addEventListener("pointermove", (e) => {
+      const rect = el.getBoundingClientRect();
+      const region = plotRegion(this.layout());
+      if (axisDrag === "x") {
+        this.panX(e.clientX - lastX, region);
+        lastX = e.clientX;
+        this.requestRender();
+      } else if (axisDrag && typeof axisDrag === "object") {
+        this.panY(axisDrag.y, e.clientY - lastY, region);
+        lastY = e.clientY;
+        this.requestRender();
+      } else if (panning) {
+        this.panX(e.clientX - lastX, region);
+        this.panY(null, e.clientY - lastY, region);
+        lastX = e.clientX;
+        lastY = e.clientY;
+        this.requestRender();
+      } else if (selecting) {
+        this.drawSelection(startX, startY, e.clientX - rect.left, e.clientY - rect.top);
+      } else {
+        const px = e.clientX - rect.left;
+        const py = e.clientY - rect.top;
+        const zone = this.zoneAt(px, py);
+        if (zone.type === "x") {
+          el.style.cursor = "ew-resize";
+          this.setHover(null);
+        } else if (zone.type === "y") {
+          el.style.cursor = "ns-resize";
+          this.setHover(null);
+        } else {
+          this.updateCursor();
+          if (this.hoverEnabled) this.setHover({ x: px, y: py });
+        }
+      }
+    });
+    el.addEventListener("pointerleave", () => this.setHover(null));
+    const end = (e) => {
+      if (el.hasPointerCapture(e.pointerId)) el.releasePointerCapture(e.pointerId);
+      if (axisDrag) {
+        axisDrag = null;
+      } else if (panning) {
+        panning = false;
+        this.updateCursor();
+      } else if (selecting) {
+        selecting = false;
+        const rect = el.getBoundingClientRect();
+        this.applySelection(startX, startY, e.clientX - rect.left, e.clientY - rect.top);
+        this.selectionDiv.style.display = "none";
+      }
+    };
+    el.addEventListener("pointerup", end);
+    el.addEventListener("pointercancel", end);
+  }
+  setHover(px) {
+    const had = this.hoverPx !== null;
+    if (!px && !had) return;
+    this.hoverPx = px;
+    this.requestRender();
+  }
+  drawSelection(x0, y0, x1, y1) {
+    const region = plotRegion(this.layout());
+    const lock = this.axisLock();
+    const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
+    let left, width, top, height;
+    if (lock.x) {
+      const a = clamp(x0, region.left, region.left + region.width);
+      const b = clamp(x1, region.left, region.left + region.width);
+      left = Math.min(a, b);
+      width = Math.abs(a - b);
+    } else {
+      left = region.left;
+      width = region.width;
+    }
+    if (lock.y) {
+      const a = clamp(y0, region.top, region.top + region.height);
+      const b = clamp(y1, region.top, region.top + region.height);
+      top = Math.min(a, b);
+      height = Math.abs(a - b);
+    } else {
+      top = region.top;
+      height = region.height;
+    }
+    Object.assign(this.selectionDiv.style, {
+      display: "block",
+      left: `${left}px`,
+      top: `${top}px`,
+      width: `${width}px`,
+      height: `${height}px`
+    });
+  }
+  applySelection(x0, y0, x1, y1) {
+    const region = plotRegion(this.layout());
+    const lock = this.axisLock();
+    const dxPx = Math.abs(x1 - x0);
+    const dyPx = Math.abs(y1 - y0);
+    if (lock.x && lock.y) {
+      if (dxPx < 5 && dyPx < 5) return;
+    } else if (lock.x && dxPx < 5) return;
+    else if (lock.y && dyPx < 5) return;
+    const clamp01 = (v) => Math.max(0, Math.min(1, v));
+    if (lock.x) {
+      const nA = clamp01((Math.min(x0, x1) - region.left) / region.width);
+      const nB = clamp01((Math.max(x0, x1) - region.left) / region.width);
+      const a = this.scaleX.invert(nA);
+      const b = this.scaleX.invert(nB);
+      this.scaleX.domain = [Math.min(a, b), Math.max(a, b)];
+      this.autoX = false;
+    }
+    if (lock.y) {
+      const nTop = clamp01(1 - (Math.min(y0, y1) - region.top) / region.height);
+      const nBot = clamp01(1 - (Math.max(y0, y1) - region.top) / region.height);
+      for (const ya of this.yAxes.values()) {
+        const a = ya.scale.invert(nTop);
+        const b = ya.scale.invert(nBot);
+        ya.scale.domain = [Math.min(a, b), Math.max(a, b)];
+        ya.auto = false;
+      }
+    }
+    this.requestRender();
+  }
+  zoomAround(nx, ny, factor) {
+    const lock = this.axisLock();
+    if (lock.x) {
+      const [x0, x1] = this.scaleX.domain;
+      const cx = x0 + nx * (x1 - x0);
+      this.scaleX.domain = [cx + (x0 - cx) * factor, cx + (x1 - cx) * factor];
+      this.autoX = false;
+    }
+    if (lock.y) {
+      for (const ya of this.yAxes.values()) {
+        const [y0, y1] = ya.scale.domain;
+        const cy = y0 + ny * (y1 - y0);
+        ya.scale.domain = [cy + (y0 - cy) * factor, cy + (y1 - cy) * factor];
+        ya.auto = false;
+      }
+    }
+    this.requestRender();
+  }
+};
+
+// src/polar/polar.ts
+var PolarPlot = class {
+  constructor(container, options = {}) {
+    this.entries = [];
+    this.R = 1;
+    this.dpr = 1;
+    this.frameRequested = false;
+    this.container = container;
+    if (getComputedStyle(container).position === "static") container.style.position = "relative";
+    this.gridCanvas = this.makeCanvas(0);
+    this.dataCanvas = this.makeCanvas(1);
+    this.gridCtx = this.gridCanvas.getContext("2d");
+    this.dataCtx = this.dataCanvas.getContext("2d");
+    const s = getSharedGL();
+    this.gl = s.gl;
+    this.sharedCanvas = s.canvas;
+    this.theme = options.theme === "dark" ? darkTheme : options.theme === "light" || options.theme == null ? lightTheme : options.theme;
+    this.toRad = options.angleUnit === "deg" ? Math.PI / 180 : 1;
+    this.fixedR = options.maxRadius;
+    this.margin = options.margin ?? 28;
+    this.resizeObserver = new ResizeObserver(() => this.resize());
+    this.resizeObserver.observe(container);
+    this.resize();
+  }
+  makeCanvas(z) {
+    const c = document.createElement("canvas");
+    Object.assign(c.style, { position: "absolute", inset: "0", width: "100%", height: "100%", zIndex: String(z) });
+    c.style.pointerEvents = "none";
+    this.container.appendChild(c);
+    return c;
+  }
+  toXY(theta, r, closed) {
+    const n = Math.min(theta.length, r.length);
+    const m = closed && n > 0 ? n + 1 : n;
+    const x = new Float64Array(m), y = new Float64Array(m);
+    let maxR = 0;
+    for (let i = 0; i < n; i++) {
+      const a = theta[i] * this.toRad, rr = r[i];
+      x[i] = rr * Math.cos(a);
+      y[i] = rr * Math.sin(a);
+      if (Math.abs(rr) > maxR) maxR = Math.abs(rr);
+    }
+    if (closed && n > 0) {
+      x[n] = x[0];
+      y[n] = y[0];
+    }
+    return { x, y, maxR };
+  }
+  addLine(opts) {
+    const closed = opts.closed ?? false;
+    const { x, y, maxR } = this.toXY(opts.theta, opts.r, closed);
+    const layer = new LineLayer(this.gl, { x, y, color: opts.color, width: opts.width ?? 2, decimate: false });
+    const entry = { layer, closed, maxR };
+    this.entries.push(entry);
+    this.refit();
+    return this.handle(entry);
+  }
+  addScatter(opts) {
+    const { x, y, maxR } = this.toXY(opts.theta, opts.r, false);
+    const layer = new ScatterLayer(this.gl, { x, y, color: opts.color, size: opts.size ?? 5 });
+    const entry = { layer, closed: false, maxR };
+    this.entries.push(entry);
+    this.refit();
+    return this.handle(entry);
+  }
+  handle(entry) {
+    return {
+      setData: (theta, r) => {
+        const { x, y, maxR } = this.toXY(theta, r, entry.closed);
+        entry.layer.setData(x, y);
+        entry.maxR = maxR;
+        this.refit();
+        this.requestRender();
+      }
+    };
+  }
+  refit() {
+    if (this.fixedR != null) {
+      this.R = this.fixedR;
+      return;
+    }
+    let m = 0;
+    for (const e of this.entries) m = Math.max(m, e.maxR);
+    this.R = m || 1;
+  }
+  destroy() {
+    this.resizeObserver.disconnect();
+    for (const e of this.entries) e.layer.dispose();
+    this.container.removeChild(this.gridCanvas);
+    this.container.removeChild(this.dataCanvas);
+  }
+  resize() {
+    this.dpr = window.devicePixelRatio || 1;
+    const w = this.container.clientWidth, h = this.container.clientHeight;
+    for (const c of [this.gridCanvas, this.dataCanvas]) {
+      c.width = Math.max(1, Math.round(w * this.dpr));
+      c.height = Math.max(1, Math.round(h * this.dpr));
+    }
+    this.gridCtx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
+    this.dataCtx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
+    this.render();
+  }
+  requestRender() {
+    if (this.frameRequested) return;
+    this.frameRequested = true;
+    requestAnimationFrame(() => {
+      this.frameRequested = false;
+      this.render();
+    });
+  }
+  /** The square drawing region (CSS px). */
+  square() {
+    const w = this.container.clientWidth, h = this.container.clientHeight;
+    const side = Math.max(1, Math.min(w, h) - this.margin * 2);
+    return { cx: w / 2, cy: h / 2, side, left: (w - side) / 2, top: (h - side) / 2 };
+  }
+  render() {
+    const sq = this.square();
+    const w = this.container.clientWidth, h = this.container.clientHeight;
+    const gl = this.gl;
+    const devW = this.dataCanvas.width, devH = this.dataCanvas.height;
+    sizeShared(gl, devW, devH);
+    begin2D(gl);
+    gl.clearColor(0, 0, 0, 0);
+    gl.disable(gl.SCISSOR_TEST);
+    gl.viewport(0, 0, devW, devH);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    const dpr = this.dpr;
+    const vx = Math.round(sq.left * dpr), vw = Math.round(sq.side * dpr), vh = Math.round(sq.side * dpr);
+    const vy = devH - Math.round((sq.top + sq.side) * dpr);
+    gl.enable(gl.SCISSOR_TEST);
+    gl.scissor(vx, vy, vw, vh);
+    gl.viewport(vx, vy, vw, vh);
+    const frame = { lo: -this.R, hi: this.R, log: false };
+    for (const e of this.entries) {
+      e.layer.draw({ gl, x: frame, y: frame, pixelWidth: vw, pixelHeight: vh, dpr });
+    }
+    gl.disable(gl.SCISSOR_TEST);
+    this.dataCtx.clearRect(0, 0, w, h);
+    this.dataCtx.drawImage(this.sharedCanvas, 0, 0, w, h);
+    this.drawGrid(sq);
+  }
+  drawGrid(sq) {
+    const ctx = this.gridCtx;
+    const w = this.container.clientWidth, h = this.container.clientHeight;
+    ctx.clearRect(0, 0, w, h);
+    const pr = sq.side / 2;
+    const { cx, cy } = sq;
+    ctx.save();
+    ctx.font = this.theme.font;
+    ctx.fillStyle = this.theme.text;
+    ctx.strokeStyle = this.theme.grid;
+    ctx.lineWidth = 1;
+    for (let deg = 0; deg < 360; deg += 30) {
+      const a = deg * Math.PI / 180;
+      const ex = cx + Math.cos(a) * pr, ey = cy - Math.sin(a) * pr;
+      ctx.beginPath();
+      ctx.moveTo(cx, cy);
+      ctx.lineTo(ex, ey);
+      ctx.stroke();
+      const lx = cx + Math.cos(a) * (pr + 12), ly = cy - Math.sin(a) * (pr + 12);
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(`${deg}\xB0`, lx, ly);
+    }
+    const ticks = autoTicks(0, this.R, 4).map((t) => t.value).filter((v) => v > 0);
+    ctx.strokeStyle = this.theme.grid;
+    for (const rv of ticks) {
+      const rad = rv / this.R * pr;
+      ctx.beginPath();
+      ctx.arc(cx, cy, rad, 0, Math.PI * 2);
+      ctx.stroke();
+    }
+    ctx.restore();
+  }
+};
+
+// src/plot3d/mat4.ts
+function identity() {
+  const m = new Float32Array(16);
+  m[0] = m[5] = m[10] = m[15] = 1;
+  return m;
+}
+function multiply(a, b) {
+  const o = new Float32Array(16);
+  for (let c = 0; c < 4; c++) {
+    for (let r = 0; r < 4; r++) {
+      let s = 0;
+      for (let k = 0; k < 4; k++) s += a[k * 4 + r] * b[c * 4 + k];
+      o[c * 4 + r] = s;
+    }
+  }
+  return o;
+}
+function perspective(fovy, aspect, near, far) {
+  const f = 1 / Math.tan(fovy / 2);
+  const nf = 1 / (near - far);
+  const m = new Float32Array(16);
+  m[0] = f / aspect;
+  m[5] = f;
+  m[10] = (far + near) * nf;
+  m[11] = -1;
+  m[14] = 2 * far * near * nf;
+  return m;
+}
+var sub = (a, b) => [a[0] - b[0], a[1] - b[1], a[2] - b[2]];
+var cross = (a, b) => [
+  a[1] * b[2] - a[2] * b[1],
+  a[2] * b[0] - a[0] * b[2],
+  a[0] * b[1] - a[1] * b[0]
+];
+function normalize2(v) {
+  const l = Math.hypot(v[0], v[1], v[2]) || 1;
+  return [v[0] / l, v[1] / l, v[2] / l];
+}
+function lookAt(eye, center, up) {
+  const z = normalize2(sub(eye, center));
+  const x = normalize2(cross(up, z));
+  const y = cross(z, x);
+  const m = identity();
+  m[0] = x[0];
+  m[4] = x[1];
+  m[8] = x[2];
+  m[1] = y[0];
+  m[5] = y[1];
+  m[9] = y[2];
+  m[2] = z[0];
+  m[6] = z[1];
+  m[10] = z[2];
+  m[12] = -(x[0] * eye[0] + x[1] * eye[1] + x[2] * eye[2]);
+  m[13] = -(y[0] * eye[0] + y[1] * eye[1] + y[2] * eye[2]);
+  m[14] = -(z[0] * eye[0] + z[1] * eye[1] + z[2] * eye[2]);
+  return m;
+}
+function transformPoint(m, x, y, z) {
+  return [
+    m[0] * x + m[4] * y + m[8] * z + m[12],
+    m[1] * x + m[5] * y + m[9] * z + m[13],
+    m[2] * x + m[6] * y + m[10] * z + m[14],
+    m[3] * x + m[7] * y + m[11] * z + m[15]
+  ];
+}
+function scaleTranslate(s, t) {
+  const m = identity();
+  m[0] = s[0];
+  m[5] = s[1];
+  m[10] = s[2];
+  m[12] = t[0];
+  m[13] = t[1];
+  m[14] = t[2];
+  return m;
+}
+
+// src/plot3d/pointcloud.ts
+var VERT9 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+layout(location = 0) in vec3 aPos;
+layout(location = 1) in vec3 aColor;
+uniform mat4 uMVP;
+uniform float uSize;
+out vec3 vColor;
+void main() {
+  vColor = aColor;
+  gl_Position = uMVP * vec4(aPos, 1.0);
+  gl_PointSize = uSize;
+}`
+);
+var FRAG9 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+in vec3 vColor;
+out vec4 outColor;
+void main() {
+  vec2 d = gl_PointCoord - 0.5;
+  if (length(d) > 0.5) discard;
+  outColor = vec4(vColor, 1.0);
+}`
+);
+var programCache9 = /* @__PURE__ */ new WeakMap();
+function getProgram9(gl) {
+  let p = programCache9.get(gl);
+  if (!p) {
+    p = createProgram(gl, VERT9, FRAG9);
+    programCache9.set(gl, p);
+  }
+  return p;
+}
+var counter9 = 0;
+var PointCloudLayer = class {
+  constructor(gl, opts) {
+    this.id = `points3d-${counter9++}`;
+    this.gl = gl;
+    this.program = getProgram9(gl);
+    this.size = opts.size ?? 4;
+    const n = Math.min(opts.x.length, opts.y.length, opts.z.length);
+    this.count = n;
+    const base = opts.color != null ? Array.isArray(opts.color) ? opts.color : parseColor(opts.color) : [0.4, 0.7, 1, 1];
+    const cmap = opts.colorBy ? colormap(opts.colorBy.colormap ?? "viridis") : null;
+    let lo = opts.colorBy?.domain?.[0] ?? Infinity;
+    let hi = opts.colorBy?.domain?.[1] ?? -Infinity;
+    if (opts.colorBy && !opts.colorBy.domain) {
+      const v = opts.colorBy.values;
+      for (let i = 0; i < n; i++) {
+        const t = v[i];
+        if (t < lo) lo = t;
+        if (t > hi) hi = t;
+      }
+    }
+    const span = hi - lo || 1;
+    const data = new Float32Array(n * 6);
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity, minZ = Infinity, maxZ = -Infinity;
+    for (let i = 0; i < n; i++) {
+      const x = opts.x[i], y = opts.y[i], z = opts.z[i];
+      data[i * 6] = x;
+      data[i * 6 + 1] = y;
+      data[i * 6 + 2] = z;
+      let c;
+      if (cmap && opts.colorBy) c = cmap((opts.colorBy.values[i] - lo) / span);
+      else c = [base[0], base[1], base[2]];
+      data[i * 6 + 3] = c[0];
+      data[i * 6 + 4] = c[1];
+      data[i * 6 + 5] = c[2];
+      if (x < minX) minX = x;
+      if (x > maxX) maxX = x;
+      if (y < minY) minY = y;
+      if (y > maxY) maxY = y;
+      if (z < minZ) minZ = z;
+      if (z > maxZ) maxZ = z;
+    }
+    this.b3 = { x: [minX, maxX], y: [minY, maxY], z: [minZ, maxZ] };
+    const vao = gl.createVertexArray();
+    const buffer = gl.createBuffer();
+    this.vao = vao;
+    this.buffer = buffer;
+    gl.bindVertexArray(vao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 24, 0);
+    gl.enableVertexAttribArray(1);
+    gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 24, 12);
+    gl.bindVertexArray(null);
+    this.uniforms = uniformLocations(gl, this.program, ["uMVP", "uSize"]);
+  }
+  bounds3() {
+    return this.count ? this.b3 : null;
+  }
+  draw(gl, mvp) {
+    if (this.count === 0) return;
+    gl.useProgram(this.program);
+    gl.uniformMatrix4fv(this.uniforms.uMVP, false, mvp);
+    gl.uniform1f(this.uniforms.uSize, this.size);
+    gl.bindVertexArray(this.vao);
+    gl.drawArrays(gl.POINTS, 0, this.count);
+    gl.bindVertexArray(null);
+  }
+  dispose() {
+    this.gl.deleteVertexArray(this.vao);
+    this.gl.deleteBuffer(this.buffer);
+  }
+};
+
+// src/plot3d/surface.ts
+var VERT10 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+layout(location = 0) in vec3 aPos;
+layout(location = 1) in vec3 aNormal;
+layout(location = 2) in vec3 aColor;
+uniform mat4 uMVP;
+out vec3 vColor;
+out vec3 vN;
+void main() { vColor = aColor; vN = aNormal; gl_Position = uMVP * vec4(aPos, 1.0); }`
+);
+var FRAG10 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+in vec3 vColor;
+in vec3 vN;
+uniform vec3 uLightDir;
+uniform float uAmbient;
+out vec4 outColor;
+void main() {
+  float d = max(dot(normalize(vN), normalize(uLightDir)), 0.0);
+  float shade = uAmbient + (1.0 - uAmbient) * d;
+  outColor = vec4(vColor * shade, 1.0);
+}`
+);
+var programCache10 = /* @__PURE__ */ new WeakMap();
+function getProgram10(gl) {
+  let p = programCache10.get(gl);
+  if (!p) {
+    p = createProgram(gl, VERT10, FRAG10);
+    programCache10.set(gl, p);
+  }
+  return p;
+}
+var counter10 = 0;
+var SurfaceLayer = class {
+  constructor(gl, opts) {
+    this.lightDir = [0.5, 1, 0.35];
+    this.ambient = 0.35;
+    this.id = `surface-${counter10++}`;
+    this.gl = gl;
+    this.program = getProgram10(gl);
+    const { cols, rows, values } = opts;
+    const [x0, x1] = opts.extentX ?? [0, cols - 1];
+    const [z0, z1] = opts.extentZ ?? [0, rows - 1];
+    const dxWorld = (x1 - x0) / Math.max(1, cols - 1);
+    const dzWorld = (z1 - z0) / Math.max(1, rows - 1);
+    let vmin = Infinity, vmax = -Infinity;
+    for (let i = 0; i < values.length; i++) {
+      const v = values[i];
+      if (v < vmin) vmin = v;
+      if (v > vmax) vmax = v;
+    }
+    const span = vmax - vmin || 1;
+    const cmap = colormap(opts.colormap ?? "viridis");
+    const wx = (c) => x0 + c / (cols - 1) * (x1 - x0);
+    const wz = (r) => z0 + r / (rows - 1) * (z1 - z0);
+    const at = (c, r) => values[r * cols + c];
+    const normalAt = (c, r) => {
+      const cl = Math.max(0, Math.min(cols - 1, c)), rl = Math.max(0, Math.min(rows - 1, r));
+      const dzdx = (at(Math.min(cols - 1, cl + 1), rl) - at(Math.max(0, cl - 1), rl)) / (2 * dxWorld);
+      const dzdz = (at(cl, Math.min(rows - 1, rl + 1)) - at(cl, Math.max(0, rl - 1))) / (2 * dzWorld);
+      const nl = Math.hypot(-dzdx, 1, -dzdz) || 1;
+      return [-dzdx / nl, 1 / nl, -dzdz / nl];
+    };
+    const data = [];
+    const vert = (c, r) => {
+      const [nx, ny, nz] = normalAt(c, r);
+      const [cr, cg, cb] = cmap((at(c, r) - vmin) / span);
+      data.push(wx(c), at(c, r), wz(r), nx, ny, nz, cr, cg, cb);
+    };
+    for (let r = 0; r < rows - 1; r++) {
+      for (let c = 0; c < cols - 1; c++) {
+        vert(c, r);
+        vert(c + 1, r);
+        vert(c + 1, r + 1);
+        vert(c, r);
+        vert(c + 1, r + 1);
+        vert(c, r + 1);
+      }
+    }
+    this.vertexCount = data.length / 9;
+    this.b3 = { x: [x0, x1], y: [vmin, vmax], z: [z0, z1] };
+    const vao = gl.createVertexArray();
+    const buffer = gl.createBuffer();
+    this.vao = vao;
+    this.buffer = buffer;
+    gl.bindVertexArray(vao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 36, 0);
+    gl.enableVertexAttribArray(1);
+    gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 36, 12);
+    gl.enableVertexAttribArray(2);
+    gl.vertexAttribPointer(2, 3, gl.FLOAT, false, 36, 24);
+    gl.bindVertexArray(null);
+    this.uniforms = uniformLocations(gl, this.program, ["uMVP", "uLightDir", "uAmbient"]);
+  }
+  bounds3() {
+    return this.b3;
+  }
+  /** Set the light direction (world space) and ambient term (0..1). */
+  setLight(dir, ambient) {
+    this.lightDir = dir;
+    this.ambient = ambient;
+  }
+  draw(gl, mvp) {
+    gl.useProgram(this.program);
+    gl.uniformMatrix4fv(this.uniforms.uMVP, false, mvp);
+    gl.uniform3f(this.uniforms.uLightDir, this.lightDir[0], this.lightDir[1], this.lightDir[2]);
+    gl.uniform1f(this.uniforms.uAmbient, this.ambient);
+    gl.bindVertexArray(this.vao);
+    gl.drawArrays(gl.TRIANGLES, 0, this.vertexCount);
+    gl.bindVertexArray(null);
+  }
+  dispose() {
+    this.gl.deleteVertexArray(this.vao);
+    this.gl.deleteBuffer(this.buffer);
+  }
+};
+
+// src/plot3d/plot3d.ts
+var LINE_VERT = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+layout(location = 0) in vec3 aPos;
+uniform mat4 uVP;
+void main() { gl_Position = uVP * vec4(aPos, 1.0); }`
+);
+var LINE_FRAG = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+uniform vec4 uColor;
+out vec4 outColor;
+void main() { outColor = uColor; }`
+);
+var BOX_EDGES = new Float32Array([
+  -1,
+  -1,
+  -1,
+  1,
+  -1,
+  -1,
+  1,
+  -1,
+  -1,
+  1,
+  1,
+  -1,
+  1,
+  1,
+  -1,
+  -1,
+  1,
+  -1,
+  -1,
+  1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  1,
+  1,
+  -1,
+  1,
+  1,
+  -1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  1,
+  -1,
+  1,
+  1,
+  -1,
+  1,
+  1,
+  -1,
+  -1,
+  1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  1,
+  1,
+  -1,
+  -1,
+  1,
+  -1,
+  1,
+  1,
+  1,
+  -1,
+  1,
+  1,
+  1,
+  -1,
+  1,
+  -1,
+  -1,
+  1,
+  1
+]);
+var Plot3D = class {
+  constructor(container, options = {}) {
+    this.layers = [];
+    this.normalize = scaleTranslate([1, 1, 1], [0, 0, 0]);
+    this.dataBounds = null;
+    this.dpr = 1;
+    this.frameRequested = false;
+    this.tickCount = 0;
+    this.labels = [];
+    // Lighting.
+    this.lightAz = 0.9;
+    this.lightEl = 0.9;
+    this.ambient = 0.35;
+    this.controlsEl = null;
+    this.container = container;
+    if (getComputedStyle(container).position === "static") container.style.position = "relative";
+    this.canvas = document.createElement("canvas");
+    Object.assign(this.canvas.style, { position: "absolute", inset: "0", width: "100%", height: "100%" });
+    container.appendChild(this.canvas);
+    this.displayCtx = this.canvas.getContext("2d");
+    const s = getSharedGL();
+    this.gl = s.gl;
+    this.sharedCanvas = s.canvas;
+    this.bg = options.background ?? [0.04, 0.06, 0.13, 1];
+    this.azimuth = options.azimuth ?? 0.7;
+    this.elevation = options.elevation ?? 0.5;
+    this.distance = options.distance ?? 3.6;
+    this.axisLabels = options.axisLabels ?? {};
+    this.lineProgram = createProgram(this.gl, LINE_VERT, LINE_FRAG);
+    this.lineUniforms = uniformLocations(this.gl, this.lineProgram, ["uVP", "uColor"]);
+    this.boxVao = this.gl.createVertexArray();
+    this.boxBuf = this.gl.createBuffer();
+    this.bindLineVao(this.boxVao, this.boxBuf, BOX_EDGES);
+    this.tickVao = this.gl.createVertexArray();
+    this.tickBuf = this.gl.createBuffer();
+    this.bindLineVao(this.tickVao, this.tickBuf, new Float32Array(0));
+    if (options.lightControls) this.buildControls();
+    this.resizeObserver = new ResizeObserver(() => this.resize());
+    this.resizeObserver.observe(container);
+    this.attachControls();
+    this.resize();
+  }
+  bindLineVao(vao, buf, data) {
+    const gl = this.gl;
+    gl.bindVertexArray(vao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
+    gl.bindVertexArray(null);
+  }
+  addSurface(opts) {
+    const l = new SurfaceLayer(this.gl, opts);
+    l.setLight(this.lightDir(), this.ambient);
+    this.layers.push(l);
+    this.recompute();
+    this.requestRender();
+    return l;
+  }
+  addPointCloud(opts) {
+    const l = new PointCloudLayer(this.gl, opts);
+    this.layers.push(l);
+    this.recompute();
+    this.requestRender();
+    return l;
+  }
+  /** Update the light direction (azimuth/elevation, radians) and ambient (0..1). */
+  setLight(params) {
+    if (params.azimuth != null) this.lightAz = params.azimuth;
+    if (params.elevation != null) this.lightEl = params.elevation;
+    if (params.ambient != null) this.ambient = params.ambient;
+    const dir = this.lightDir();
+    for (const l of this.layers) {
+      if ("setLight" in l) l.setLight(dir, this.ambient);
+    }
+    this.requestRender();
+  }
+  lightDir() {
+    const el = this.lightEl, az = this.lightAz;
+    return [Math.cos(el) * Math.cos(az), Math.sin(el), Math.cos(el) * Math.sin(az)];
+  }
+  destroy() {
+    this.resizeObserver.disconnect();
+    for (const l of this.layers) l.dispose();
+    this.gl.deleteProgram(this.lineProgram);
+    this.gl.deleteVertexArray(this.boxVao);
+    this.gl.deleteVertexArray(this.tickVao);
+    this.gl.deleteBuffer(this.boxBuf);
+    this.gl.deleteBuffer(this.tickBuf);
+    this.controlsEl?.remove();
+    this.container.removeChild(this.canvas);
+  }
+  recompute() {
+    let b = null;
+    for (const l of this.layers) {
+      const lb = l.bounds3();
+      if (!lb) continue;
+      b = b ? {
+        x: [Math.min(b.x[0], lb.x[0]), Math.max(b.x[1], lb.x[1])],
+        y: [Math.min(b.y[0], lb.y[0]), Math.max(b.y[1], lb.y[1])],
+        z: [Math.min(b.z[0], lb.z[0]), Math.max(b.z[1], lb.z[1])]
+      } : lb;
+    }
+    if (!b) return;
+    this.dataBounds = b;
+    const axis = (r) => {
+      const span = r[1] - r[0];
+      return span === 0 ? [1, -r[0]] : [2 / span, -(r[1] + r[0]) / span];
+    };
+    const [sx, tx] = axis(b.x), [sy, ty] = axis(b.y), [sz, tz] = axis(b.z);
+    this.normalize = scaleTranslate([sx, sy, sz], [tx, ty, tz]);
+    this.buildAxes();
+  }
+  /** Build tick-mark line geometry + tick/title labels from the data bounds. */
+  buildAxes() {
+    const b = this.dataBounds;
+    if (!b) return;
+    const cube = (r, v) => 2 * (v - r[0]) / (r[1] - r[0] || 1) - 1;
+    const seg = [];
+    const labels = [];
+    const mark = (x0, y0, z0, x1, y1, z1) => seg.push(x0, y0, z0, x1, y1, z1);
+    for (const t of autoTicks(b.x[0], b.x[1], 5)) {
+      const cx = cube(b.x, t.value);
+      mark(cx, -1, -1, cx, -1, -1.06);
+      labels.push({ p: [cx, -1, -1.16], text: defaultFormat(t.value) });
+    }
+    for (const t of autoTicks(b.y[0], b.y[1], 5)) {
+      const cy = cube(b.y, t.value);
+      mark(-1, cy, -1, -1.06, cy, -1);
+      labels.push({ p: [-1.16, cy, -1], text: defaultFormat(t.value) });
+    }
+    for (const t of autoTicks(b.z[0], b.z[1], 5)) {
+      const cz = cube(b.z, t.value);
+      mark(-1, -1, cz, -1.06, -1, cz);
+      labels.push({ p: [-1.16, -1, cz], text: defaultFormat(t.value) });
+    }
+    if (this.axisLabels.x) labels.push({ p: [0, -1.25, -1.3], text: this.axisLabels.x, title: true });
+    if (this.axisLabels.y) labels.push({ p: [-1.35, 0, -1], text: this.axisLabels.y, title: true });
+    if (this.axisLabels.z) labels.push({ p: [-1.3, -1.25, 0], text: this.axisLabels.z, title: true });
+    this.labels = labels;
+    this.tickCount = seg.length / 3;
+    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.tickBuf);
+    this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(seg), this.gl.STATIC_DRAW);
+  }
+  resize() {
+    this.dpr = window.devicePixelRatio || 1;
+    const w = this.container.clientWidth, h = this.container.clientHeight;
+    this.canvas.width = Math.max(1, Math.round(w * this.dpr));
+    this.canvas.height = Math.max(1, Math.round(h * this.dpr));
+    this.render();
+  }
+  requestRender() {
+    if (this.frameRequested) return;
+    this.frameRequested = true;
+    requestAnimationFrame(() => {
+      this.frameRequested = false;
+      this.render();
+    });
+  }
+  viewProj() {
+    const aspect = this.canvas.width / Math.max(1, this.canvas.height);
+    const proj = perspective(50 * Math.PI / 180, aspect, 0.01, 100);
+    const el = Math.max(-1.5, Math.min(1.5, this.elevation));
+    const eye = [
+      this.distance * Math.cos(el) * Math.sin(this.azimuth),
+      this.distance * Math.sin(el),
+      this.distance * Math.cos(el) * Math.cos(this.azimuth)
+    ];
+    const view = lookAt(eye, [0, 0, 0], [0, 1, 0]);
+    const vp = multiply(proj, view);
+    return { vp, mvp: multiply(vp, this.normalize) };
+  }
+  render() {
+    const gl = this.gl;
+    const w = this.canvas.width, h = this.canvas.height;
+    sizeShared(gl, w, h);
+    begin3D(gl);
+    gl.viewport(0, 0, w, h);
+    gl.clearColor(this.bg[0], this.bg[1], this.bg[2], this.bg[3]);
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+    const { vp, mvp } = this.viewProj();
+    gl.useProgram(this.lineProgram);
+    gl.uniformMatrix4fv(this.lineUniforms.uVP, false, vp);
+    gl.uniform4f(this.lineUniforms.uColor, 0.6, 0.65, 0.75, 0.4);
+    gl.bindVertexArray(this.boxVao);
+    gl.drawArrays(gl.LINES, 0, BOX_EDGES.length / 3);
+    if (this.tickCount > 0) {
+      gl.uniform4f(this.lineUniforms.uColor, 0.75, 0.8, 0.9, 0.8);
+      gl.bindVertexArray(this.tickVao);
+      gl.drawArrays(gl.LINES, 0, this.tickCount);
+    }
+    gl.bindVertexArray(null);
+    for (const l of this.layers) l.draw(gl, mvp);
+    this.displayCtx.clearRect(0, 0, w, h);
+    this.displayCtx.drawImage(this.sharedCanvas, 0, 0);
+    this.drawLabels(vp, w, h);
+  }
+  drawLabels(vp, w, h) {
+    if (this.labels.length === 0) return;
+    const ctx = this.displayCtx;
+    ctx.save();
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillStyle = "#cbd5e1";
+    for (const lab of this.labels) {
+      const c = transformPoint(vp, lab.p[0], lab.p[1], lab.p[2]);
+      if (c[3] <= 0) continue;
+      const sx = (c[0] / c[3] * 0.5 + 0.5) * w;
+      const sy = (1 - (c[1] / c[3] * 0.5 + 0.5)) * h;
+      ctx.font = `${(lab.title ? 13 : 11) * this.dpr}px system-ui, sans-serif`;
+      ctx.fillStyle = lab.title ? "#e2e8f0" : "#94a3b8";
+      ctx.fillText(lab.text, sx, sy);
+    }
+    ctx.restore();
+  }
+  attachControls() {
+    const el = this.canvas;
+    el.style.touchAction = "none";
+    el.style.cursor = "grab";
+    let dragging = false, lastX = 0, lastY = 0;
+    el.addEventListener("pointerdown", (e) => {
+      dragging = true;
+      lastX = e.clientX;
+      lastY = e.clientY;
+      el.setPointerCapture(e.pointerId);
+      el.style.cursor = "grabbing";
+    });
+    el.addEventListener("pointermove", (e) => {
+      if (!dragging) return;
+      this.azimuth -= (e.clientX - lastX) * 0.01;
+      this.elevation += (e.clientY - lastY) * 0.01;
+      lastX = e.clientX;
+      lastY = e.clientY;
+      this.requestRender();
+    });
+    const end = (e) => {
+      dragging = false;
+      if (el.hasPointerCapture(e.pointerId)) el.releasePointerCapture(e.pointerId);
+      el.style.cursor = "grab";
+    };
+    el.addEventListener("pointerup", end);
+    el.addEventListener("pointercancel", end);
+    el.addEventListener("wheel", (e) => {
+      e.preventDefault();
+      this.distance = Math.max(0.5, Math.min(20, this.distance * Math.exp(e.deltaY * 1e-3)));
+      this.requestRender();
+    }, { passive: false });
+  }
+  buildControls() {
+    const panel = document.createElement("div");
+    Object.assign(panel.style, {
+      position: "absolute",
+      top: "8px",
+      left: "8px",
+      zIndex: "5",
+      display: "flex",
+      flexDirection: "column",
+      gap: "4px",
+      padding: "8px 10px",
+      borderRadius: "8px",
+      background: "rgba(15,23,42,0.8)",
+      border: "1px solid rgba(148,163,184,0.25)",
+      font: "11px system-ui, sans-serif",
+      color: "#cbd5e1",
+      backdropFilter: "blur(6px)"
+    });
+    const row = (label, min, max, val, on) => {
+      const wrap = document.createElement("label");
+      wrap.style.display = "flex";
+      wrap.style.alignItems = "center";
+      wrap.style.gap = "6px";
+      const span = document.createElement("span");
+      span.textContent = label;
+      span.style.width = "48px";
+      const input = document.createElement("input");
+      input.type = "range";
+      input.min = String(min);
+      input.max = String(max);
+      input.value = String(val);
+      input.style.width = "90px";
+      input.addEventListener("input", () => on(parseFloat(input.value)));
+      wrap.appendChild(span);
+      wrap.appendChild(input);
+      panel.appendChild(wrap);
+    };
+    row("light", 0, 360, this.lightAz * 180 / Math.PI, (v) => this.setLight({ azimuth: v * Math.PI / 180 }));
+    row("ambient", 0, 100, this.ambient * 100, (v) => this.setLight({ ambient: v / 100 }));
+    this.container.appendChild(panel);
+    this.controlsEl = panel;
+  }
+};
+export {
+  AreaLayer,
+  Axis,
+  BarLayer,
+  BoxLayer,
+  ContourLayer,
+  HeatmapLayer,
+  HexbinLayer,
+  LineLayer,
+  LinearScale,
+  LogScale,
+  Plot,
+  Plot3D,
+  PointCloudLayer,
+  PolarPlot,
+  ScatterLayer,
+  SurfaceLayer,
+  TimeScale,
+  autoTicks,
+  boxStats,
+  colormap,
+  createToolbar,
+  darkTheme,
+  defaultFormat,
+  fft,
+  histogram,
+  kde,
+  lightTheme,
+  makeScale,
+  parseColor,
+  quantileSorted,
+  resolveTicks,
+  spectrogram,
+  toColorCss,
+  withMinorTicks
+};
+//# sourceMappingURL=index.js.map