@photonviz/core 0.1.0 → 0.2.0

package/dist/index.js

@@ -82,10 +82,10 @@ var Axis = class {
       }
       ticks = major;
     }
-    const fmt = this.config.format ?? ((v) => scale.formatTick(v));
+    const fmt2 = 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),
+      label: t.minor ? "" : t.label ?? fmt2(t.value),
       minor: t.minor ?? false,
       grid: t.grid ?? !t.minor
     }));
@@ -854,6 +854,196 @@ var BoxLayer = class {
   }
 };
 
+// src/layers/candlestick.ts
+var BODY_VERT = (
+  /* 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
+layout(location = 2) in vec4 aColor;
+${TRANSFORM_GLSL}
+out vec4 vColor;
+void main() {
+  vec2 p = mix(aRect.xy, aRect.zw, aCorner);
+  vColor = aColor;
+  gl_Position = vec4(dataToClip(p), 0.0, 1.0);
+}`
+);
+var WICK_VERT = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+layout(location = 0) in vec2 aCorner;  // (along 0..1, side -1..1)
+layout(location = 1) in vec4 aSeg;     // (x0,y0,x1,y1) offset data space
+layout(location = 2) in vec4 aColor;
+uniform vec2 uResolution;
+uniform float uWidth;
+${TRANSFORM_GLSL}
+out vec4 vColor;
+void main() {
+  vec2 s0 = (dataToClip(aSeg.xy) * 0.5 + 0.5) * uResolution;
+  vec2 s1 = (dataToClip(aSeg.zw) * 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);
+  vec2 pos = mix(s0, s1, aCorner.x) + nrm * (aCorner.y * uWidth * 0.5);
+  vColor = aColor;
+  gl_Position = vec4((pos / uResolution) * 2.0 - 1.0, 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 RECT_CORNERS = new Float32Array([0, 0, 1, 0, 1, 1, 0, 0, 1, 1, 0, 1]);
+var SEG_CORNERS = new Float32Array([0, -1, 1, -1, 1, 1, 0, -1, 1, 1, 0, 1]);
+var cache = /* @__PURE__ */ new WeakMap();
+function programs(gl) {
+  let p = cache.get(gl);
+  if (!p) {
+    p = { body: createProgram(gl, BODY_VERT, FRAG4), wick: createProgram(gl, WICK_VERT, FRAG4) };
+    cache.set(gl, p);
+  }
+  return p;
+}
+function medianSpacing2(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 counter4 = 0;
+var CandlestickLayer = class {
+  constructor(gl, opts) {
+    this.buffers = [];
+    this.xRef = 0;
+    this.yRef = 0;
+    this.xBounds = [0, 0];
+    this.yBounds = [0, 0];
+    this.id = `candlestick-${counter4++}`;
+    this.gl = gl;
+    this.progs = programs(gl);
+    this.name = opts.name ?? this.id;
+    this.yAxis = opts.yAxis ?? "y";
+    this.wickWidth = opts.wickWidth ?? 1.5;
+    const up = toColor(opts.upColor ?? "#26a69a");
+    const down = toColor(opts.downColor ?? "#ef5350");
+    this.colorCss = toColorCss(up);
+    const n = Math.min(opts.x.length, opts.open.length, opts.high.length, opts.low.length, opts.close.length);
+    this.count = n;
+    const width = opts.width ?? medianSpacing2(opts.x, n) * 0.7;
+    this.xRef = n > 0 ? opts.x[0] : 0;
+    this.yRef = n > 0 ? opts.open[0] : 0;
+    const rects = new Float32Array(n * 4);
+    const wicks = new Float32Array(n * 4);
+    const colors = new Float32Array(n * 4);
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+    for (let i = 0; i < n; i++) {
+      const cx = opts.x[i], o = opts.open[i], h = opts.high[i], l = opts.low[i], c = opts.close[i];
+      const x0 = cx - width / 2, x1 = cx + width / 2;
+      rects[i * 4] = x0 - this.xRef;
+      rects[i * 4 + 1] = o - this.yRef;
+      rects[i * 4 + 2] = x1 - this.xRef;
+      rects[i * 4 + 3] = c - this.yRef;
+      wicks[i * 4] = cx - this.xRef;
+      wicks[i * 4 + 1] = l - this.yRef;
+      wicks[i * 4 + 2] = cx - this.xRef;
+      wicks[i * 4 + 3] = h - this.yRef;
+      const col = c >= o ? up : down;
+      colors[i * 4] = col[0];
+      colors[i * 4 + 1] = col[1];
+      colors[i * 4 + 2] = col[2];
+      colors[i * 4 + 3] = col[3];
+      minX = Math.min(minX, x0);
+      maxX = Math.max(maxX, x1);
+      minY = Math.min(minY, l);
+      maxY = Math.max(maxY, h);
+    }
+    this.xBounds = [minX, maxX];
+    this.yBounds = [minY, maxY];
+    const cornerRect = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, cornerRect);
+    gl.bufferData(gl.ARRAY_BUFFER, RECT_CORNERS, gl.STATIC_DRAW);
+    const cornerSeg = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, cornerSeg);
+    gl.bufferData(gl.ARRAY_BUFFER, SEG_CORNERS, gl.STATIC_DRAW);
+    const rectBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, rectBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, rects, gl.STATIC_DRAW);
+    const wickBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, wickBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, wicks, gl.STATIC_DRAW);
+    const colorBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
+    this.buffers = [cornerRect, cornerSeg, rectBuf, wickBuf, colorBuf];
+    this.bodyVao = gl.createVertexArray();
+    gl.bindVertexArray(this.bodyVao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, cornerRect);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+    gl.bindBuffer(gl.ARRAY_BUFFER, rectBuf);
+    gl.enableVertexAttribArray(1);
+    gl.vertexAttribPointer(1, 4, gl.FLOAT, false, 0, 0);
+    gl.vertexAttribDivisor(1, 1);
+    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuf);
+    gl.enableVertexAttribArray(2);
+    gl.vertexAttribPointer(2, 4, gl.FLOAT, false, 0, 0);
+    gl.vertexAttribDivisor(2, 1);
+    this.wickVao = gl.createVertexArray();
+    gl.bindVertexArray(this.wickVao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, cornerSeg);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+    gl.bindBuffer(gl.ARRAY_BUFFER, wickBuf);
+    gl.enableVertexAttribArray(1);
+    gl.vertexAttribPointer(1, 4, gl.FLOAT, false, 0, 0);
+    gl.vertexAttribDivisor(1, 1);
+    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuf);
+    gl.enableVertexAttribArray(2);
+    gl.vertexAttribPointer(2, 4, gl.FLOAT, false, 0, 0);
+    gl.vertexAttribDivisor(2, 1);
+    gl.bindVertexArray(null);
+    this.uBody = uniformLocations(gl, this.progs.body, [...TRANSFORM_UNIFORMS]);
+    this.uWick = uniformLocations(gl, this.progs.wick, [...TRANSFORM_UNIFORMS, "uResolution", "uWidth"]);
+  }
+  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.progs.wick);
+    setTransformUniforms(gl, this.uWick, state.x, state.y, this.xRef, this.yRef);
+    gl.uniform2f(this.uWick.uResolution, state.pixelWidth, state.pixelHeight);
+    gl.uniform1f(this.uWick.uWidth, this.wickWidth * state.dpr);
+    gl.bindVertexArray(this.wickVao);
+    gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, this.count);
+    gl.bindVertexArray(null);
+    gl.useProgram(this.progs.body);
+    setTransformUniforms(gl, this.uBody, state.x, state.y, this.xRef, this.yRef);
+    gl.bindVertexArray(this.bodyVao);
+    gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, this.count);
+    gl.bindVertexArray(null);
+  }
+  dispose() {
+    this.gl.deleteVertexArray(this.bodyVao);
+    this.gl.deleteVertexArray(this.wickVao);
+    for (const b of this.buffers) this.gl.deleteBuffer(b);
+  }
+};
+function toColor(input) {
+  return Array.isArray(input) ? input : parseColor(input);
+}
+
 // src/color/colormap.ts
 var ANCHORS = {
   viridis: [
@@ -917,7 +1107,7 @@ ${TRANSFORM_GLSL}
 out vec4 vColor;
 void main() { vColor = aColor; gl_Position = vec4(dataToClip(aPos), 0.0, 1.0); }`
 );
-var FRAG4 = (
+var FRAG5 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -947,15 +1137,15 @@ var programCache4 = /* @__PURE__ */ new WeakMap();
 function getProgram4(gl) {
   let p = programCache4.get(gl);
   if (!p) {
-    p = createProgram(gl, VERT4, FRAG4);
+    p = createProgram(gl, VERT4, FRAG5);
     programCache4.set(gl, p);
   }
   return p;
 }
-var counter4 = 0;
+var counter5 = 0;
 var ContourLayer = class {
   constructor(gl, opts) {
-    this.id = `contour-${counter4++}`;
+    this.id = `contour-${counter5++}`;
     this.gl = gl;
     this.program = getProgram4(gl);
     this.yAxis = opts.yAxis ?? "y";
@@ -1036,6 +1226,230 @@ var ContourLayer = class {
   }
 };
 
+// src/layers/errorbar.ts
+var SEG_VERT = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+layout(location = 0) in vec2 aCorner;  // (along 0..1, side -1..1)
+layout(location = 1) in vec4 aSeg;     // (x0,y0,x1,y1) offset data space
+uniform vec2 uResolution;
+uniform float uWidth;
+${TRANSFORM_GLSL}
+void main() {
+  vec2 s0 = (dataToClip(aSeg.xy) * 0.5 + 0.5) * uResolution;
+  vec2 s1 = (dataToClip(aSeg.zw) * 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);
+  vec2 pos = mix(s0, s1, aCorner.x) + nrm * (aCorner.y * uWidth * 0.5);
+  gl_Position = vec4((pos / uResolution) * 2.0 - 1.0, 0.0, 1.0);
+}`
+);
+var CAP_VERT = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+layout(location = 0) in vec2 aCorner;  // unit quad [-1,1]^2
+layout(location = 1) in vec3 aCap;     // (cx, cy, orient) offset data space
+uniform vec2 uResolution;
+uniform float uCapSize;
+uniform float uWidth;
+${TRANSFORM_GLSL}
+void main() {
+  vec2 c = (dataToClip(aCap.xy) * 0.5 + 0.5) * uResolution;
+  vec2 h = aCap.z < 0.5 ? vec2(uCapSize * 0.5, uWidth * 0.5) : vec2(uWidth * 0.5, uCapSize * 0.5);
+  vec2 pos = c + aCorner * h;
+  gl_Position = vec4((pos / uResolution) * 2.0 - 1.0, 0.0, 1.0);
+}`
+);
+var BAND_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 SOLID_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 SEG_CORNERS2 = new Float32Array([0, -1, 1, -1, 1, 1, 0, -1, 1, 1, 0, 1]);
+var QUAD_CORNERS = new Float32Array([-1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1]);
+var cache2 = /* @__PURE__ */ new WeakMap();
+function programs2(gl) {
+  let p = cache2.get(gl);
+  if (!p) {
+    p = {
+      seg: createProgram(gl, SEG_VERT, SOLID_FRAG),
+      cap: createProgram(gl, CAP_VERT, SOLID_FRAG),
+      band: createProgram(gl, BAND_VERT, SOLID_FRAG)
+    };
+    cache2.set(gl, p);
+  }
+  return p;
+}
+var errAt = (e, i) => e == null ? 0 : typeof e === "number" ? e : e[i] ?? 0;
+var counter6 = 0;
+var ErrorBarLayer = class {
+  constructor(gl, opts) {
+    this.buffers = [];
+    this.segCount = 0;
+    this.capCount = 0;
+    this.bandVerts = 0;
+    this.xRef = 0;
+    this.yRef = 0;
+    this.xBounds = [0, 0];
+    this.yBounds = [0, 0];
+    this.id = `errorbar-${counter6++}`;
+    this.gl = gl;
+    this.progs = programs2(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";
+    this.width = opts.width ?? 1.5;
+    this.capSize = opts.capSize ?? 6;
+    this.bandOpacity = opts.bandOpacity ?? 0.2;
+    this.showBand = opts.band === true;
+    this.showWhiskers = opts.whiskers ?? true;
+    const n = Math.min(opts.x.length, opts.y.length);
+    this.xRef = n > 0 ? opts.x[0] : 0;
+    this.yRef = n > 0 ? opts.y[0] : 0;
+    const segs = [];
+    const caps = [];
+    const lowPts = [];
+    const highPts = [];
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+    const hasY = opts.yerr != null || opts.yerrLow != null || opts.yerrHigh != null;
+    const hasX = opts.xerr != null;
+    for (let i = 0; i < n; i++) {
+      const x = opts.x[i], y = opts.y[i];
+      const eyLo = opts.yerrLow != null ? errAt(opts.yerrLow, i) : errAt(opts.yerr, i);
+      const eyHi = opts.yerrHigh != null ? errAt(opts.yerrHigh, i) : errAt(opts.yerr, i);
+      const ex = errAt(opts.xerr, i);
+      const yLo = y - eyLo, yHi = y + eyHi;
+      const xLo = x - ex, xHi = x + ex;
+      if (hasY) {
+        segs.push(x - this.xRef, yLo - this.yRef, x - this.xRef, yHi - this.yRef);
+        caps.push(x - this.xRef, yLo - this.yRef, 0, x - this.xRef, yHi - this.yRef, 0);
+      }
+      if (hasX) {
+        segs.push(xLo - this.xRef, y - this.yRef, xHi - this.xRef, y - this.yRef);
+        caps.push(xLo - this.xRef, y - this.yRef, 1, xHi - this.xRef, y - this.yRef, 1);
+      }
+      lowPts.push([x - this.xRef, yLo - this.yRef]);
+      highPts.push([x - this.xRef, yHi - this.yRef]);
+      minX = Math.min(minX, xLo);
+      maxX = Math.max(maxX, xHi);
+      minY = Math.min(minY, yLo);
+      maxY = Math.max(maxY, yHi);
+    }
+    this.xBounds = [minX, maxX];
+    this.yBounds = [minY, maxY];
+    this.segCount = segs.length / 4;
+    this.capCount = this.capSize > 0 ? caps.length / 3 : 0;
+    const band = [];
+    for (let i = 0; i < n; i++) {
+      band.push(highPts[i][0], highPts[i][1], lowPts[i][0], lowPts[i][1]);
+    }
+    this.bandVerts = n * 2;
+    const cornerSeg = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, cornerSeg);
+    gl.bufferData(gl.ARRAY_BUFFER, SEG_CORNERS2, gl.STATIC_DRAW);
+    const cornerQuad = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, cornerQuad);
+    gl.bufferData(gl.ARRAY_BUFFER, QUAD_CORNERS, gl.STATIC_DRAW);
+    const segBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, segBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(segs), gl.STATIC_DRAW);
+    const capBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, capBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(caps), gl.STATIC_DRAW);
+    const bandBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, bandBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(band), gl.STATIC_DRAW);
+    this.buffers = [cornerSeg, cornerQuad, segBuf, capBuf, bandBuf];
+    this.segVao = gl.createVertexArray();
+    gl.bindVertexArray(this.segVao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, cornerSeg);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+    gl.bindBuffer(gl.ARRAY_BUFFER, segBuf);
+    gl.enableVertexAttribArray(1);
+    gl.vertexAttribPointer(1, 4, gl.FLOAT, false, 0, 0);
+    gl.vertexAttribDivisor(1, 1);
+    this.capVao = gl.createVertexArray();
+    gl.bindVertexArray(this.capVao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, cornerQuad);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+    gl.bindBuffer(gl.ARRAY_BUFFER, capBuf);
+    gl.enableVertexAttribArray(1);
+    gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 0, 0);
+    gl.vertexAttribDivisor(1, 1);
+    this.bandVao = gl.createVertexArray();
+    gl.bindVertexArray(this.bandVao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, bandBuf);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+    gl.bindVertexArray(null);
+    this.uSeg = uniformLocations(gl, this.progs.seg, [...TRANSFORM_UNIFORMS, "uColor", "uResolution", "uWidth"]);
+    this.uCap = uniformLocations(gl, this.progs.cap, [...TRANSFORM_UNIFORMS, "uColor", "uResolution", "uCapSize", "uWidth"]);
+    this.uBand = uniformLocations(gl, this.progs.band, [...TRANSFORM_UNIFORMS, "uColor"]);
+  }
+  bounds() {
+    if (this.segCount === 0 && this.bandVerts === 0) return null;
+    return { x: this.xBounds, y: this.yBounds };
+  }
+  draw(state) {
+    const gl = state.gl;
+    const [r, g, b, a] = this.color;
+    if (this.showBand && this.bandVerts >= 4) {
+      gl.useProgram(this.progs.band);
+      setTransformUniforms(gl, this.uBand, state.x, state.y, this.xRef, this.yRef);
+      gl.uniform4f(this.uBand.uColor, r, g, b, a * this.bandOpacity);
+      gl.bindVertexArray(this.bandVao);
+      gl.drawArrays(gl.TRIANGLE_STRIP, 0, this.bandVerts);
+      gl.bindVertexArray(null);
+    }
+    if (this.showWhiskers && this.segCount > 0) {
+      gl.useProgram(this.progs.seg);
+      setTransformUniforms(gl, this.uSeg, state.x, state.y, this.xRef, this.yRef);
+      gl.uniform4f(this.uSeg.uColor, r, g, b, a);
+      gl.uniform2f(this.uSeg.uResolution, state.pixelWidth, state.pixelHeight);
+      gl.uniform1f(this.uSeg.uWidth, this.width * state.dpr);
+      gl.bindVertexArray(this.segVao);
+      gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, this.segCount);
+      gl.bindVertexArray(null);
+      if (this.capCount > 0) {
+        gl.useProgram(this.progs.cap);
+        setTransformUniforms(gl, this.uCap, state.x, state.y, this.xRef, this.yRef);
+        gl.uniform4f(this.uCap.uColor, r, g, b, a);
+        gl.uniform2f(this.uCap.uResolution, state.pixelWidth, state.pixelHeight);
+        gl.uniform1f(this.uCap.uCapSize, this.capSize * state.dpr);
+        gl.uniform1f(this.uCap.uWidth, this.width * state.dpr);
+        gl.bindVertexArray(this.capVao);
+        gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, this.capCount);
+        gl.bindVertexArray(null);
+      }
+    }
+  }
+  dispose() {
+    this.gl.deleteVertexArray(this.segVao);
+    this.gl.deleteVertexArray(this.capVao);
+    this.gl.deleteVertexArray(this.bandVao);
+    for (const b of this.buffers) this.gl.deleteBuffer(b);
+  }
+};
+
 // src/layers/heatmap.ts
 var VERT5 = (
   /* glsl */
@@ -1050,7 +1464,7 @@ void main() {
   gl_Position = vec4(dataToClip(aPos), 0.0, 1.0);
 }`
 );
-var FRAG5 = (
+var FRAG6 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -1066,15 +1480,15 @@ var programCache5 = /* @__PURE__ */ new WeakMap();
 function getProgram5(gl) {
   let p = programCache5.get(gl);
   if (!p) {
-    p = createProgram(gl, VERT5, FRAG5);
+    p = createProgram(gl, VERT5, FRAG6);
     programCache5.set(gl, p);
   }
   return p;
 }
-var counter5 = 0;
+var counter7 = 0;
 var HeatmapLayer = class {
   constructor(gl, opts) {
-    this.id = `heatmap-${counter5++}`;
+    this.id = `heatmap-${counter7++}`;
     this.gl = gl;
     this.program = getProgram5(gl);
     this.yAxis = opts.yAxis ?? "y";
@@ -1191,7 +1605,7 @@ void main() {
   gl_Position = vec4(dataToClip(aCenter + aCorner * uRadius), 0.0, 1.0);
 }`
 );
-var FRAG6 = (
+var FRAG7 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -1214,12 +1628,12 @@ var programCache6 = /* @__PURE__ */ new WeakMap();
 function getProgram6(gl) {
   let p = programCache6.get(gl);
   if (!p) {
-    p = createProgram(gl, VERT6, FRAG6);
+    p = createProgram(gl, VERT6, FRAG7);
     programCache6.set(gl, p);
   }
   return p;
 }
-var counter6 = 0;
+var counter8 = 0;
 var HexbinLayer = class {
   constructor(gl, opts) {
     this.buffers = [];
@@ -1227,7 +1641,7 @@ var HexbinLayer = class {
     this.yRef = 0;
     this.xBounds = [0, 0];
     this.yBounds = [0, 0];
-    this.id = `hexbin-${counter6++}`;
+    this.id = `hexbin-${counter8++}`;
     this.gl = gl;
     this.program = getProgram6(gl);
     this.yAxis = opts.yAxis ?? "y";
@@ -1325,29 +1739,264 @@ var HexbinLayer = class {
   }
 };
 
-// src/layers/line.ts
-var VERT7 = (
+// src/layers/line-util.ts
+function decimateIndices(ys, i0, i1, cols) {
+  const out = [i0];
+  const visN = i1 - 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 (ys[i] < ys[iMin]) iMin = i;
+      if (ys[i] > ys[iMax]) iMax = i;
+    }
+    if (iMin < iMax) out.push(iMin, iMax);
+    else out.push(iMax, iMin);
+  }
+  out.push(i1);
+  return out;
+}
+
+// src/layers/gpu-decimate.ts
+var DEC_VERT = (
   /* 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;
+uniform sampler2D uPoints;
+uniform int uTexW;
+uniform int uI0;
+uniform int uI1;
+uniform int uCols;
+uniform int uMaxIter;      // per-column iteration cap; stride-samples beyond it
+out vec2 vOut;
+
+vec2 fetchPoint(int i) {
+  return texelFetch(uPoints, ivec2(i % uTexW, i / uTexW), 0).xy;
+}
+
 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
+  int v = gl_VertexID;
+  int last = 2 * uCols + 1;
+  int idx;
+  if (v == 0) {
+    idx = uI0;                       // left endpoint, so the line reaches the edge
+  } else if (v >= last) {
+    idx = uI1;                       // right endpoint
+  } else {
+    int col = (v - 1) / 2;
+    int which = (v - 1) - col * 2;   // 0 => min-index extreme, 1 => max-index extreme
+    // Float division avoids int32 overflow of visN*col for huge series.
+    float fvisN = float(uI1 - uI0);
+    int lo = uI0 + int(floor(fvisN * float(col) / float(uCols)));
+    int hi = uI0 + int(floor(fvisN * float(col + 1) / float(uCols)));
+    if (hi <= lo) {
+      idx = lo;
+    } else {
+      int stride = 1;
+      int span = hi - lo;
+      if (span > uMaxIter) stride = (span + uMaxIter - 1) / uMaxIter;
+      int iMin = lo, iMax = lo;
+      float yMin = fetchPoint(lo).y, yMax = yMin;
+      for (int i = lo; i < hi; i += stride) {
+        float y = fetchPoint(i).y;
+        if (y < yMin) { yMin = y; iMin = i; }
+        if (y > yMax) { yMax = y; iMax = i; }
+      }
+      // Emit in index order (matches decimateIndices) to preserve envelope shape.
+      idx = (which == 0) ? min(iMin, iMax) : max(iMin, iMax);
+    }
+  }
+  vOut = fetchPoint(idx);
+  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);   // rasterizer-discarded
+}`
+);
+var DEC_FRAG = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+out vec4 o;
+void main() { o = vec4(0.0); }`
+);
+var MAX_ITER = 4096;
+function compile(gl, type, src) {
+  const sh = gl.createShader(type);
+  gl.shaderSource(sh, src);
+  gl.compileShader(sh);
+  if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
+    const log = gl.getShaderInfoLog(sh);
+    gl.deleteShader(sh);
+    throw new Error(`Decimation shader compile error:
+${log}`);
+  }
+  return sh;
+}
+var programCache7 = /* @__PURE__ */ new WeakMap();
+function getDecProgram(gl) {
+  if (programCache7.has(gl)) return programCache7.get(gl);
+  let result = null;
+  try {
+    const vs = compile(gl, gl.VERTEX_SHADER, DEC_VERT);
+    const fs = compile(gl, gl.FRAGMENT_SHADER, DEC_FRAG);
+    const program = gl.createProgram();
+    gl.attachShader(program, vs);
+    gl.attachShader(program, fs);
+    gl.transformFeedbackVaryings(program, ["vOut"], gl.INTERLEAVED_ATTRIBS);
+    gl.linkProgram(program);
+    gl.deleteShader(vs);
+    gl.deleteShader(fs);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+      gl.deleteProgram(program);
+    } else {
+      const u = {};
+      for (const name of ["uPoints", "uTexW", "uI0", "uI1", "uCols", "uMaxIter"]) {
+        u[name] = gl.getUniformLocation(program, name);
+      }
+      result = { program, u };
+    }
+  } catch {
+    result = null;
+  }
+  programCache7.set(gl, result);
+  return result;
+}
+var GpuDecimator = class {
+  // point capacity currently allocated in the draw buffer
+  constructor(gl) {
+    this.tex = null;
+    this.tf = null;
+    this.emptyVao = null;
+    this.texW = 0;
+    this.decCapacity = -1;
+    this.gl = gl;
+    this.prog = getDecProgram(gl);
+    this.supported = this.prog != null;
+  }
+  /**
+   * (Re)upload the series into the point texture. `data` is interleaved
+   * (x-xRef, y-yRef) float32, exactly as the draw buffer stores it. Returns
+   * false and disables the GPU path if the texture can't be allocated.
+   */
+  setPoints(data, n) {
+    if (!this.supported || n === 0) return this.supported;
+    const gl = this.gl;
+    const maxTex = gl.getParameter(gl.MAX_TEXTURE_SIZE);
+    const texW = Math.min(maxTex, Math.max(1, Math.ceil(Math.sqrt(n))));
+    const texH = Math.ceil(n / texW);
+    if (texH > maxTex) return false;
+    this.texW = texW;
+    const packed = data.length >= texW * texH * 2 ? data : new Float32Array(texW * texH * 2);
+    if (packed !== data) packed.set(data.subarray(0, n * 2));
+    try {
+      if (!this.tex) this.tex = gl.createTexture();
+      gl.bindTexture(gl.TEXTURE_2D, this.tex);
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RG32F, texW, texH, 0, gl.RG, gl.FLOAT, packed);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+      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);
+    } catch {
+      return false;
+    }
+    if (!this.tf) this.tf = gl.createTransformFeedback();
+    if (!this.emptyVao) this.emptyVao = gl.createVertexArray();
+    return true;
+  }
+  /**
+   * Run the reduction for the visible window `[i0, i1]` into `decBuf`, matching
+   * the CPU envelope layout: left endpoint, `cols` min/max pairs, right endpoint.
+   * Returns the emitted point count, or null if the GPU path can't run this call.
+   */
+  run(i0, i1, cols, decBuf) {
+    if (!this.supported || !this.tex || !this.prog) return null;
+    const gl = this.gl;
+    const outCount = 2 * cols + 2;
+    if (this.decCapacity < outCount) {
+      gl.bindBuffer(gl.ARRAY_BUFFER, decBuf);
+      gl.bufferData(gl.ARRAY_BUFFER, outCount * 2 * 4, gl.DYNAMIC_COPY);
+      gl.bindBuffer(gl.ARRAY_BUFFER, null);
+      this.decCapacity = outCount;
+    }
+    const { program, u } = this.prog;
+    gl.useProgram(program);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, this.tex);
+    gl.uniform1i(u.uPoints, 0);
+    gl.uniform1i(u.uTexW, this.texW);
+    gl.uniform1i(u.uI0, i0);
+    gl.uniform1i(u.uI1, i1);
+    gl.uniform1i(u.uCols, cols);
+    gl.uniform1i(u.uMaxIter, MAX_ITER);
+    gl.bindVertexArray(this.emptyVao);
+    gl.enable(gl.RASTERIZER_DISCARD);
+    gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, this.tf);
+    gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, decBuf);
+    gl.beginTransformFeedback(gl.POINTS);
+    gl.drawArrays(gl.POINTS, 0, outCount);
+    gl.endTransformFeedback();
+    gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, null);
+    gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, null);
+    gl.disable(gl.RASTERIZER_DISCARD);
+    gl.bindVertexArray(null);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    return outCount;
+  }
+  dispose() {
+    const gl = this.gl;
+    if (this.tex) gl.deleteTexture(this.tex);
+    if (this.tf) gl.deleteTransformFeedback(this.tf);
+    if (this.emptyVao) gl.deleteVertexArray(this.emptyVao);
+    this.tex = null;
+    this.tf = null;
+    this.emptyVao = null;
+  }
+};
+
+// src/layers/pick.ts
+function pickNearest(xs, ys, count, mode, cursorPx, cursorPy, project, gatePx = Infinity) {
+  if (count === 0) return null;
+  let best = -1;
+  let bestDist = Infinity;
+  for (let i = 0; i < count; i++) {
+    const [px, py] = project(xs[i], ys[i]);
+    const dx = px - cursorPx;
+    const dy = py - cursorPy;
+    const d = mode === "x" ? Math.abs(dx) : mode === "y" ? Math.abs(dy) : Math.hypot(dx, dy);
+    if (d < bestDist) {
+      bestDist = d;
+      best = i;
+    }
+  }
+  if (best < 0 || bestDist > gatePx) return null;
+  return { x: xs[best], y: ys[best], index: best };
+}
+
+// src/layers/line.ts
+var GPU_DECIMATE_MIN = 2e5;
+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;
@@ -1356,7 +2005,7 @@ void main() {
   gl_Position = vec4((pos / uResolution) * 2.0 - 1.0, 0.0, 1.0);
 }`
 );
-var FRAG7 = (
+var FRAG8 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -1385,13 +2034,112 @@ void main() {
   outColor = vec4(uColor.rgb * uColor.a, uColor.a) * alpha;
 }`
 );
+var JOIN_VERT = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+layout(location = 0) in vec2 aPrev;
+layout(location = 1) in vec2 aP0;
+layout(location = 2) in vec2 aNext;
+uniform vec2 uResolution;
+uniform float uWidth;
+uniform float uMiter;        // >0.5 => miter, else bevel
+uniform float uMiterLimit;
+${TRANSFORM_GLSL}
+out vec2 vPix;
+flat out vec2 vE0;
+flat out vec2 vE1;
+flat out vec2 vInner;
+void main() {
+  vec2 sp = (dataToClip(aPrev) * 0.5 + 0.5) * uResolution;
+  vec2 s0 = (dataToClip(aP0)   * 0.5 + 0.5) * uResolution;
+  vec2 sn = (dataToClip(aNext) * 0.5 + 0.5) * uResolution;
+  vec2 din = s0 - sp;
+  vec2 dout = sn - s0;
+  float inl = length(din), outl = length(dout);
+  vec2 inN = vec2(0.0), outN = vec2(0.0);
+  float crs = 0.0;
+  bool ok = inl > 1e-6 && outl > 1e-6;
+  if (ok) {
+    din /= inl; dout /= outl;
+    inN = vec2(-din.y, din.x);
+    outN = vec2(-dout.y, dout.x);
+    crs = din.x * dout.y - din.y * dout.x;
+    ok = abs(crs) > 1e-6;                         // collinear => no notch
+  }
+  if (!ok) {                                       // degenerate: cull the wedge
+    vE0 = vec2(0.0); vE1 = vec2(0.0); vInner = vec2(0.0); vPix = vec2(0.0);
+    gl_Position = vec4(2.0, 2.0, 2.0, 1.0);
+    return;
+  }
+  float hw = uWidth * 0.5;
+  float outerSign = crs > 0.0 ? -1.0 : 1.0;
+  vec2 A = s0 + inN * hw * outerSign;
+  vec2 B = s0 + outN * hw * outerSign;
+  vec2 apex = 0.5 * (A + B);                        // bevel midpoint
+  if (uMiter > 0.5) {
+    vec2 mN = inN + outN;
+    float ml = length(mN);
+    if (ml > 1e-6) {
+      mN /= ml;
+      float denom = dot(mN, outN);
+      if (denom > 1e-3) {
+        float miterLen = 1.0 / denom;
+        if (miterLen <= uMiterLimit) apex = s0 + mN * outerSign * hw * miterLen;
+      }
+    }
+  }
+  int vid = gl_VertexID;
+  vec2 pos;
+  if (vid == 0 || vid == 3) pos = s0;
+  else if (vid == 1) pos = A;
+  else if (vid == 2 || vid == 4) pos = apex;
+  else pos = B;                                    // vid == 5
+  if (vid < 3) { vE0 = A; vE1 = apex; }            // triangle [s0, A, apex]
+  else { vE0 = apex; vE1 = B; }                    // triangle [s0, apex, B]
+  vInner = s0;
+  vPix = pos;
+  gl_Position = vec4((pos / uResolution) * 2.0 - 1.0, 0.0, 1.0);
+}`
+);
+var JOIN_FRAG = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+in vec2 vPix;
+flat in vec2 vE0;
+flat in vec2 vE1;
+flat in vec2 vInner;
+uniform vec4 uColor;
+out vec4 outColor;
+void main() {
+  vec2 e = vE1 - vE0;
+  float el = length(e);
+  if (el < 1e-6) discard;
+  vec2 n = vec2(-e.y, e.x) / el;
+  float sideInner = dot(vInner - vE0, n) >= 0.0 ? 1.0 : -1.0;
+  float d = dot(vPix - vE0, n) * sideInner;        // >0 inside the outer edge
+  float alpha = clamp(d + 0.5, 0.0, 1.0);
+  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();
+var programCache8 = /* @__PURE__ */ new WeakMap();
 function getProgram7(gl) {
-  let p = programCache7.get(gl);
+  let p = programCache8.get(gl);
   if (!p) {
-    p = createProgram(gl, VERT7, FRAG7);
-    programCache7.set(gl, p);
+    p = createProgram(gl, VERT7, FRAG8);
+    programCache8.set(gl, p);
+  }
+  return p;
+}
+var joinProgramCache = /* @__PURE__ */ new WeakMap();
+function getJoinProgram(gl) {
+  let p = joinProgramCache.get(gl);
+  if (!p) {
+    p = createProgram(gl, JOIN_VERT, JOIN_FRAG);
+    joinProgramCache.set(gl, p);
   }
   return p;
 }
@@ -1424,20 +2172,24 @@ function upperBound(a, v) {
   }
   return lo;
 }
-var counter7 = 0;
+var counter9 = 0;
 var LineLayer = class {
   constructor(gl, opts) {
+    this.gpuDec = null;
     this.xRef = 0;
     this.yRef = 0;
     this.xBounds = [0, 0];
     this.yBounds = [0, 0];
     this.decKey = "";
     this.decSegments = 0;
-    this.id = `line-${counter7++}`;
+    this.id = `line-${counter9++}`;
     this.gl = gl;
     this.program = getProgram7(gl);
+    this.joinProgram = getJoinProgram(gl);
     this.width = opts.width ?? 1.5;
-    this.round = (opts.join ?? "round") === "round";
+    this.joinStyle = opts.join ?? "round";
+    this.round = this.joinStyle === "round";
+    this.miterLimit = opts.miterLimit ?? 4;
     this.decimateOn = opts.decimate !== false;
     this.step = opts.step;
     const colorInput = opts.color ?? "#3b82f6";
@@ -1480,12 +2232,16 @@ var LineLayer = class {
     this.decBuf = gl.createBuffer();
     this.fullVao = gl.createVertexArray();
     this.decVao = gl.createVertexArray();
+    this.joinFullVao = gl.createVertexArray();
+    this.joinDecVao = 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.configureJoinVao(this.joinFullVao, this.posBuf);
+    this.configureJoinVao(this.joinDecVao, this.decBuf);
     this.uniforms = uniformLocations(gl, this.program, [
       ...TRANSFORM_UNIFORMS,
       "uColor",
@@ -1493,6 +2249,35 @@ var LineLayer = class {
       "uWidth",
       "uRound"
     ]);
+    this.joinUniforms = uniformLocations(gl, this.joinProgram, [
+      ...TRANSFORM_UNIFORMS,
+      "uColor",
+      "uResolution",
+      "uWidth",
+      "uMiter",
+      "uMiterLimit"
+    ]);
+    this.syncGpu(data, n);
+  }
+  // Keep the GPU decimation texture in sync for large series; disable it (fall
+  // back to CPU decimation) if the context can't support the path.
+  syncGpu(data, n) {
+    if (!this.decimateOn || n < GPU_DECIMATE_MIN) {
+      this.disposeGpu();
+      return;
+    }
+    if (!this.gpuDec) {
+      const dec = new GpuDecimator(this.gl);
+      if (!dec.supported) return;
+      this.gpuDec = dec;
+    }
+    if (!this.gpuDec.setPoints(data, n)) this.disposeGpu();
+  }
+  disposeGpu() {
+    if (this.gpuDec) {
+      this.gpuDec.dispose();
+      this.gpuDec = null;
+    }
   }
   configureVao(vao, pointBuf) {
     const gl = this.gl;
@@ -1509,21 +2294,25 @@ var LineLayer = class {
     gl.vertexAttribDivisor(2, 1);
     gl.bindVertexArray(null);
   }
+  // Join instances read three consecutive points (prev, p0, next) from the same
+  // buffer via overlapping attribute offsets; instance i covers vertex i+1.
+  configureJoinVao(vao, pointBuf) {
+    const gl = this.gl;
+    gl.bindVertexArray(vao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, pointBuf);
+    for (let loc = 0; loc < 3; loc++) {
+      gl.enableVertexAttribArray(loc);
+      gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 8, loc * 8);
+      gl.vertexAttribDivisor(loc, 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 };
+  pick(mode, cursorPx, cursorPy, project) {
+    return pickNearest(this.xs, this.ys, this.count, mode, cursorPx, cursorPy, project);
   }
   /** Replace the series data and re-upload the GPU buffer (for streaming). */
   setData(x, y) {
@@ -1560,6 +2349,7 @@ var LineLayer = class {
     this.decKey = "";
     this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.posBuf);
     this.gl.bufferData(this.gl.ARRAY_BUFFER, data, this.gl.DYNAMIC_DRAW);
+    this.syncGpu(data, n);
   }
   /**
    * Rebuild the min/max-decimated buffer for the visible x-window if it changed.
@@ -1576,41 +2366,38 @@ var LineLayer = class {
     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);
+    if (this.gpuDec) {
+      const outCount = this.gpuDec.run(i0, i1, cols, this.decBuf);
+      if (outCount != null) {
+        this.decKey = key;
+        this.decSegments = outCount - 1;
+        return this.decSegments;
       }
+      this.disposeGpu();
+    }
+    this.decKey = key;
+    const indices = decimateIndices(this.ys, i0, i1, cols);
+    const out = new Float32Array(indices.length * 2);
+    for (let k = 0; k < indices.length; k++) {
+      const i = indices[k];
+      out[k * 2] = this.xs[i] - this.xRef;
+      out[k * 2 + 1] = this.ys[i] - this.yRef;
     }
-    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;
+    gl.bufferData(gl.ARRAY_BUFFER, out, gl.DYNAMIC_DRAW);
+    this.decSegments = indices.length - 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;
+    const decimated = decSegs != null;
+    const vao = decimated ? this.decVao : this.fullVao;
+    const segments = decimated ? decSegs : this.count - 1;
     if (segments < 1) return;
+    const points = segments + 1;
     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]);
@@ -1620,17 +2407,262 @@ var LineLayer = class {
     gl.bindVertexArray(vao);
     gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, segments);
     gl.bindVertexArray(null);
+    if ((this.joinStyle === "miter" || this.joinStyle === "bevel") && points >= 3) {
+      gl.useProgram(this.joinProgram);
+      setTransformUniforms(gl, this.joinUniforms, state.x, state.y, this.xRef, this.yRef);
+      gl.uniform4f(this.joinUniforms.uColor, this.color[0], this.color[1], this.color[2], this.color[3]);
+      gl.uniform2f(this.joinUniforms.uResolution, state.pixelWidth, state.pixelHeight);
+      gl.uniform1f(this.joinUniforms.uWidth, this.width * state.dpr);
+      gl.uniform1f(this.joinUniforms.uMiter, this.joinStyle === "miter" ? 1 : 0);
+      gl.uniform1f(this.joinUniforms.uMiterLimit, this.miterLimit);
+      gl.bindVertexArray(decimated ? this.joinDecVao : this.joinFullVao);
+      gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, points - 2);
+      gl.bindVertexArray(null);
+    }
   }
   dispose() {
     const gl = this.gl;
+    this.disposeGpu();
     gl.deleteVertexArray(this.fullVao);
     gl.deleteVertexArray(this.decVao);
+    gl.deleteVertexArray(this.joinFullVao);
+    gl.deleteVertexArray(this.joinDecVao);
     gl.deleteBuffer(this.cornerBuf);
     gl.deleteBuffer(this.posBuf);
     gl.deleteBuffer(this.decBuf);
   }
 };
 
+// src/layers/quiver.ts
+var SHAFT_VERT = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+layout(location = 0) in vec2 aCorner;  // (along 0..1, side -1..1)
+layout(location = 1) in vec4 aArrow;   // (bx,by,tx,ty) offset data space
+layout(location = 2) in vec4 aColor;
+uniform vec2 uResolution;
+uniform float uWidth;
+${TRANSFORM_GLSL}
+out vec4 vColor;
+void main() {
+  vec2 s0 = (dataToClip(aArrow.xy) * 0.5 + 0.5) * uResolution;
+  vec2 s1 = (dataToClip(aArrow.zw) * 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);
+  vec2 pos = mix(s0, s1, aCorner.x) + nrm * (aCorner.y * uWidth * 0.5);
+  vColor = aColor;
+  gl_Position = vec4((pos / uResolution) * 2.0 - 1.0, 0.0, 1.0);
+}`
+);
+var HEAD_VERT = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+layout(location = 1) in vec4 aArrow;   // (bx,by,tx,ty) offset data space
+layout(location = 2) in vec4 aColor;
+uniform vec2 uResolution;
+uniform float uHeadSize;
+${TRANSFORM_GLSL}
+out vec4 vColor;
+void main() {
+  vec2 s0 = (dataToClip(aArrow.xy) * 0.5 + 0.5) * uResolution;
+  vec2 s1 = (dataToClip(aArrow.zw) * 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 w = uHeadSize * 0.6;
+  vec2 pos;
+  if (gl_VertexID == 0) pos = s1;                                  // tip
+  else if (gl_VertexID == 1) pos = s1 - dir * uHeadSize + nrm * w; // back-left
+  else pos = s1 - dir * uHeadSize - nrm * w;                       // back-right
+  vColor = aColor;
+  gl_Position = vec4((pos / uResolution) * 2.0 - 1.0, 0.0, 1.0);
+}`
+);
+var FRAG9 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+in vec4 vColor;
+uniform vec4 uColor;
+uniform float uUseVertexColor;
+out vec4 outColor;
+void main() {
+  vec4 c = uUseVertexColor > 0.5 ? vColor : uColor;
+  outColor = vec4(c.rgb * c.a, c.a);
+}`
+);
+var SEG_CORNERS3 = new Float32Array([0, -1, 1, -1, 1, 1, 0, -1, 1, 1, 0, 1]);
+var cache3 = /* @__PURE__ */ new WeakMap();
+function programs3(gl) {
+  let p = cache3.get(gl);
+  if (!p) {
+    p = { shaft: createProgram(gl, SHAFT_VERT, FRAG9), head: createProgram(gl, HEAD_VERT, FRAG9) };
+    cache3.set(gl, p);
+  }
+  return p;
+}
+var counter10 = 0;
+var QuiverLayer = class {
+  constructor(gl, opts) {
+    this.buffers = [];
+    this.xRef = 0;
+    this.yRef = 0;
+    this.xBounds = [0, 0];
+    this.yBounds = [0, 0];
+    this.id = `quiver-${counter10++}`;
+    this.gl = gl;
+    this.progs = programs3(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";
+    this.width = opts.width ?? 1.5;
+    this.headSize = opts.headSize ?? 9;
+    this.useVertexColor = opts.colorBy != null;
+    const n = Math.min(opts.x.length, opts.y.length, opts.u.length, opts.v.length);
+    this.count = n;
+    this.xRef = n > 0 ? opts.x[0] : 0;
+    this.yRef = n > 0 ? opts.y[0] : 0;
+    let maxMag = 0;
+    for (let i = 0; i < n; i++) maxMag = Math.max(maxMag, Math.hypot(opts.u[i], opts.v[i]));
+    let scale = opts.scale;
+    if (scale == null) {
+      let minX2 = Infinity, maxX2 = -Infinity, minY2 = Infinity, maxY2 = -Infinity;
+      for (let i = 0; i < n; i++) {
+        minX2 = Math.min(minX2, opts.x[i]);
+        maxX2 = Math.max(maxX2, opts.x[i]);
+        minY2 = Math.min(minY2, opts.y[i]);
+        maxY2 = Math.max(maxY2, opts.y[i]);
+      }
+      const diag = Math.hypot(maxX2 - minX2, maxY2 - minY2) || 1;
+      const cell = diag / Math.max(1, Math.sqrt(n));
+      scale = maxMag > 0 ? 0.9 * cell / maxMag : 1;
+    }
+    const arrows = new Float32Array(n * 4);
+    const colors = new Float32Array(n * 4);
+    const cmap = colormap(opts.colorBy?.colormap ?? "viridis");
+    const vals = opts.colorBy?.values;
+    let lo = opts.colorBy?.domain?.[0] ?? Infinity;
+    let hi = opts.colorBy?.domain?.[1] ?? -Infinity;
+    if (this.useVertexColor && !opts.colorBy?.domain) {
+      for (let i = 0; i < n; i++) {
+        const v = vals ? vals[i] : Math.hypot(opts.u[i], opts.v[i]);
+        lo = Math.min(lo, v);
+        hi = Math.max(hi, v);
+      }
+    }
+    const span = hi - lo || 1;
+    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];
+      const tx = x + opts.u[i] * scale, ty = y + opts.v[i] * scale;
+      arrows[i * 4] = x - this.xRef;
+      arrows[i * 4 + 1] = y - this.yRef;
+      arrows[i * 4 + 2] = tx - this.xRef;
+      arrows[i * 4 + 3] = ty - this.yRef;
+      if (this.useVertexColor) {
+        const v = vals ? vals[i] : Math.hypot(opts.u[i], opts.v[i]);
+        const [r, g, b] = cmap((v - lo) / span);
+        colors[i * 4] = r;
+        colors[i * 4 + 1] = g;
+        colors[i * 4 + 2] = b;
+        colors[i * 4 + 3] = 1;
+      }
+      minX = Math.min(minX, x, tx);
+      maxX = Math.max(maxX, x, tx);
+      minY = Math.min(minY, y, ty);
+      maxY = Math.max(maxY, y, ty);
+    }
+    this.xBounds = [minX, maxX];
+    this.yBounds = [minY, maxY];
+    const cornerBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, cornerBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, SEG_CORNERS3, gl.STATIC_DRAW);
+    const arrowBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, arrowBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, arrows, gl.STATIC_DRAW);
+    const colorBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
+    this.buffers = [cornerBuf, arrowBuf, colorBuf];
+    this.shaftVao = gl.createVertexArray();
+    gl.bindVertexArray(this.shaftVao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, cornerBuf);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+    this.bindInstanceAttribs(arrowBuf, colorBuf);
+    gl.bindVertexArray(null);
+    this.headVao = gl.createVertexArray();
+    gl.bindVertexArray(this.headVao);
+    this.bindInstanceAttribs(arrowBuf, colorBuf);
+    gl.bindVertexArray(null);
+    this.uShaft = uniformLocations(gl, this.progs.shaft, [
+      ...TRANSFORM_UNIFORMS,
+      "uColor",
+      "uResolution",
+      "uWidth",
+      "uUseVertexColor"
+    ]);
+    this.uHead = uniformLocations(gl, this.progs.head, [
+      ...TRANSFORM_UNIFORMS,
+      "uColor",
+      "uResolution",
+      "uHeadSize",
+      "uUseVertexColor"
+    ]);
+  }
+  bindInstanceAttribs(arrowBuf, colorBuf) {
+    const gl = this.gl;
+    gl.bindBuffer(gl.ARRAY_BUFFER, arrowBuf);
+    gl.enableVertexAttribArray(1);
+    gl.vertexAttribPointer(1, 4, gl.FLOAT, false, 0, 0);
+    gl.vertexAttribDivisor(1, 1);
+    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuf);
+    gl.enableVertexAttribArray(2);
+    gl.vertexAttribPointer(2, 4, gl.FLOAT, false, 0, 0);
+    gl.vertexAttribDivisor(2, 1);
+  }
+  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;
+    const [r, g, b, a] = this.color;
+    const uvc = this.useVertexColor ? 1 : 0;
+    gl.useProgram(this.progs.shaft);
+    setTransformUniforms(gl, this.uShaft, state.x, state.y, this.xRef, this.yRef);
+    gl.uniform4f(this.uShaft.uColor, r, g, b, a);
+    gl.uniform2f(this.uShaft.uResolution, state.pixelWidth, state.pixelHeight);
+    gl.uniform1f(this.uShaft.uWidth, this.width * state.dpr);
+    gl.uniform1f(this.uShaft.uUseVertexColor, uvc);
+    gl.bindVertexArray(this.shaftVao);
+    gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, this.count);
+    gl.bindVertexArray(null);
+    gl.useProgram(this.progs.head);
+    setTransformUniforms(gl, this.uHead, state.x, state.y, this.xRef, this.yRef);
+    gl.uniform4f(this.uHead.uColor, r, g, b, a);
+    gl.uniform2f(this.uHead.uResolution, state.pixelWidth, state.pixelHeight);
+    gl.uniform1f(this.uHead.uHeadSize, this.headSize * state.dpr);
+    gl.uniform1f(this.uHead.uUseVertexColor, uvc);
+    gl.bindVertexArray(this.headVao);
+    gl.drawArraysInstanced(gl.TRIANGLES, 0, 3, this.count);
+    gl.bindVertexArray(null);
+  }
+  dispose() {
+    this.gl.deleteVertexArray(this.shaftVao);
+    this.gl.deleteVertexArray(this.headVao);
+    for (const b of this.buffers) this.gl.deleteBuffer(b);
+  }
+};
+
 // src/layers/scatter.ts
 var VERT8 = (
   /* glsl */
@@ -1652,7 +2684,7 @@ void main() {
   gl_Position = vec4((pos / uResolution) * 2.0 - 1.0, 0.0, 1.0);
 }`
 );
-var FRAG8 = (
+var FRAG10 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -1670,16 +2702,16 @@ void main() {
 }`
 );
 var CORNERS3 = new Float32Array([-1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1]);
-var programCache8 = /* @__PURE__ */ new WeakMap();
+var programCache9 = /* @__PURE__ */ new WeakMap();
 function getProgram8(gl) {
-  let p = programCache8.get(gl);
+  let p = programCache9.get(gl);
   if (!p) {
-    p = createProgram(gl, VERT8, FRAG8);
-    programCache8.set(gl, p);
+    p = createProgram(gl, VERT8, FRAG10);
+    programCache9.set(gl, p);
   }
   return p;
 }
-var counter8 = 0;
+var counter11 = 0;
 var ScatterLayer = class {
   constructor(gl, opts) {
     this.buffers = [];
@@ -1687,7 +2719,7 @@ var ScatterLayer = class {
     this.yRef = 0;
     this.xBounds = [0, 0];
     this.yBounds = [0, 0];
-    this.id = `scatter-${counter8++}`;
+    this.id = `scatter-${counter11++}`;
     this.gl = gl;
     this.program = getProgram8(gl);
     this.size = opts.size ?? 5;
@@ -1697,6 +2729,7 @@ var ScatterLayer = class {
     this.name = opts.name ?? this.id;
     this.yAxis = opts.yAxis ?? "y";
     this.useVertexColor = opts.colorBy != null;
+    this.labels = opts.labels;
     const n = Math.min(opts.x.length, opts.y.length);
     this.count = n;
     this.xs = new Float64Array(n);
@@ -1774,17 +2807,14 @@ var ScatterLayer = class {
     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 };
+  pick(mode, cursorPx, cursorPy, project) {
+    const gatePx = this.size / 2 + 4;
+    return pickNearest(this.xs, this.ys, this.count, mode, cursorPx, cursorPy, project, gatePx);
+  }
+  /** User-supplied text for a point, shown when it is clicked. */
+  infoAt(index) {
+    const label = this.labels?.[index];
+    return label != null ? [label] : null;
   }
   /** Replace point positions and re-upload (for streaming). Keeps uniform color. */
   setData(x, y) {
@@ -1816,18 +2846,207 @@ var ScatterLayer = class {
   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.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/layers/stem.ts
+var STEM_VERT = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+layout(location = 0) in vec2 aCorner;  // (along 0..1, side -1..1)
+layout(location = 1) in vec4 aSeg;     // (x0,y0,x1,y1) offset data space
+uniform vec2 uResolution;
+uniform float uWidth;
+${TRANSFORM_GLSL}
+void main() {
+  vec2 s0 = (dataToClip(aSeg.xy) * 0.5 + 0.5) * uResolution;
+  vec2 s1 = (dataToClip(aSeg.zw) * 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);
+  vec2 pos = mix(s0, s1, aCorner.x) + nrm * (aCorner.y * uWidth * 0.5);
+  gl_Position = vec4((pos / uResolution) * 2.0 - 1.0, 0.0, 1.0);
+}`
+);
+var MARKER_VERT = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+layout(location = 0) in vec2 aCorner;  // unit quad [-1,1]^2
+layout(location = 1) in vec2 aPos;     // tip point (offset data space)
+uniform vec2 uResolution;
+uniform float uSize;                   // radius in device px
+${TRANSFORM_GLSL}
+out vec2 vLocal;
+void main() {
+  vec2 c = (dataToClip(aPos) * 0.5 + 0.5) * uResolution;
+  vLocal = aCorner;
+  vec2 pos = c + aCorner * uSize;
+  gl_Position = vec4((pos / uResolution) * 2.0 - 1.0, 0.0, 1.0);
+}`
+);
+var SOLID_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 DISC_FRAG = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+in vec2 vLocal;
+uniform vec4 uColor;
+out vec4 outColor;
+void main() {
+  float r = length(vLocal);
+  if (r > 1.0) discard;
+  float alpha = smoothstep(1.0, 1.0 - 0.15, r);
+  outColor = vec4(uColor.rgb * uColor.a * alpha, uColor.a * alpha);
+}`
+);
+var SEG_CORNERS4 = new Float32Array([0, -1, 1, -1, 1, 1, 0, -1, 1, 1, 0, 1]);
+var QUAD_CORNERS2 = new Float32Array([-1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1]);
+var cache4 = /* @__PURE__ */ new WeakMap();
+function programs4(gl) {
+  let p = cache4.get(gl);
+  if (!p) {
+    p = { stem: createProgram(gl, STEM_VERT, SOLID_FRAG2), marker: createProgram(gl, MARKER_VERT, DISC_FRAG) };
+    cache4.set(gl, p);
+  }
+  return p;
+}
+var counter12 = 0;
+var StemLayer = class {
+  constructor(gl, opts) {
+    this.buffers = [];
+    this.xRef = 0;
+    this.yRef = 0;
+    this.xBounds = [0, 0];
+    this.yBounds = [0, 0];
+    this.id = `stem-${counter12++}`;
+    this.gl = gl;
+    this.progs = programs4(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";
+    this.width = opts.width ?? 1.5;
+    this.markerSize = opts.markerSize ?? 6;
+    this.baseline = opts.baseline ?? 0;
+    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 segs = new Float32Array(n * 4);
+    const tips = new Float32Array(n * 2);
+    let minX = Infinity, maxX = -Infinity;
+    let minY = Math.min(this.baseline, Infinity), maxY = Math.max(this.baseline, -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;
+      segs[i * 4] = x - this.xRef;
+      segs[i * 4 + 1] = this.baseline - this.yRef;
+      segs[i * 4 + 2] = x - this.xRef;
+      segs[i * 4 + 3] = y - this.yRef;
+      tips[i * 2] = x - this.xRef;
+      tips[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 cornerSeg = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, cornerSeg);
+    gl.bufferData(gl.ARRAY_BUFFER, SEG_CORNERS4, gl.STATIC_DRAW);
+    const cornerQuad = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, cornerQuad);
+    gl.bufferData(gl.ARRAY_BUFFER, QUAD_CORNERS2, gl.STATIC_DRAW);
+    const segBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, segBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, segs, gl.STATIC_DRAW);
+    const tipBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, tipBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, tips, gl.STATIC_DRAW);
+    this.buffers = [cornerSeg, cornerQuad, segBuf, tipBuf];
+    this.stemVao = gl.createVertexArray();
+    gl.bindVertexArray(this.stemVao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, cornerSeg);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+    gl.bindBuffer(gl.ARRAY_BUFFER, segBuf);
+    gl.enableVertexAttribArray(1);
+    gl.vertexAttribPointer(1, 4, gl.FLOAT, false, 0, 0);
+    gl.vertexAttribDivisor(1, 1);
+    this.markerVao = gl.createVertexArray();
+    gl.bindVertexArray(this.markerVao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, cornerQuad);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+    gl.bindBuffer(gl.ARRAY_BUFFER, tipBuf);
+    gl.enableVertexAttribArray(1);
+    gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 0, 0);
+    gl.vertexAttribDivisor(1, 1);
+    gl.bindVertexArray(null);
+    this.uStem = uniformLocations(gl, this.progs.stem, [...TRANSFORM_UNIFORMS, "uColor", "uResolution", "uWidth"]);
+    this.uMarker = uniformLocations(gl, this.progs.marker, [...TRANSFORM_UNIFORMS, "uColor", "uResolution", "uSize"]);
+  }
+  bounds() {
+    if (this.count === 0) return null;
+    return { x: this.xBounds, y: this.yBounds };
+  }
+  pick(mode, cursorPx, cursorPy, project) {
+    return pickNearest(this.xs, this.ys, this.count, mode, cursorPx, cursorPy, project);
+  }
+  draw(state) {
+    if (this.count === 0) return;
+    const gl = state.gl;
+    const [r, g, b, a] = this.color;
+    gl.useProgram(this.progs.stem);
+    setTransformUniforms(gl, this.uStem, state.x, state.y, this.xRef, this.yRef);
+    gl.uniform4f(this.uStem.uColor, r, g, b, a);
+    gl.uniform2f(this.uStem.uResolution, state.pixelWidth, state.pixelHeight);
+    gl.uniform1f(this.uStem.uWidth, this.width * state.dpr);
+    gl.bindVertexArray(this.stemVao);
     gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, this.count);
     gl.bindVertexArray(null);
+    if (this.markerSize > 0) {
+      gl.useProgram(this.progs.marker);
+      setTransformUniforms(gl, this.uMarker, state.x, state.y, this.xRef, this.yRef);
+      gl.uniform4f(this.uMarker.uColor, r, g, b, a);
+      gl.uniform2f(this.uMarker.uResolution, state.pixelWidth, state.pixelHeight);
+      gl.uniform1f(this.uMarker.uSize, this.markerSize / 2 * state.dpr);
+      gl.bindVertexArray(this.markerVao);
+      gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, this.count);
+      gl.bindVertexArray(null);
+    }
   }
   dispose() {
-    this.gl.deleteVertexArray(this.vao);
+    this.gl.deleteVertexArray(this.stemVao);
+    this.gl.deleteVertexArray(this.markerVao);
     for (const b of this.buffers) this.gl.deleteBuffer(b);
   }
 };
@@ -1962,6 +3181,27 @@ function drawCrosshair(ctx, region, px, theme) {
   ctx.stroke();
   ctx.restore();
 }
+function drawCrosshairXY(ctx, region, px, py, theme) {
+  const left = region.left;
+  const right = region.left + region.width;
+  const top = region.top;
+  const bottom = region.top + region.height;
+  if (px < left || px > right || py < top || py > bottom) return;
+  ctx.save();
+  ctx.strokeStyle = theme.text;
+  ctx.globalAlpha = 0.4;
+  ctx.setLineDash([3, 3]);
+  ctx.lineWidth = 1;
+  const x = Math.round(px) + 0.5;
+  const y = Math.round(py) + 0.5;
+  ctx.beginPath();
+  ctx.moveTo(x, top);
+  ctx.lineTo(x, bottom);
+  ctx.moveTo(left, y);
+  ctx.lineTo(right, y);
+  ctx.stroke();
+  ctx.restore();
+}
 function drawMarker(ctx, px, py, color) {
   ctx.save();
   ctx.fillStyle = color;
@@ -2221,7 +3461,7 @@ function createToolbar(container, host, dark) {
 var DEFAULT_MARGIN = { top: 16, right: 16, bottom: 40, left: 56 };
 var Y_AXIS_GAP = 52;
 function isPickable(layer) {
-  return typeof layer.nearestByX === "function";
+  return typeof layer.pick === "function";
 }
 function padDomain(min, max, log, frac) {
   if (log) {
@@ -2233,6 +3473,19 @@ function padDomain(min, max, log, frac) {
   const pad = (max - min) * frac || 1;
   return [min - pad, max + pad];
 }
+function clampAxis(domain, bounds) {
+  const [lo, hi] = domain;
+  const span = hi - lo;
+  const [dlo, dhi] = bounds;
+  if (span >= dhi - dlo) {
+    const loMin = dhi - span;
+    const clampedLo2 = Math.min(Math.max(lo, loMin), dlo);
+    return [clampedLo2, clampedLo2 + span];
+  }
+  let clampedLo = Math.max(lo, dlo);
+  if (clampedLo + span > dhi) clampedLo = dhi - span;
+  return [clampedLo, clampedLo + span];
+}
 var Plot = class {
   constructor(container, options = {}) {
     /** Named y axes, insertion-ordered. `"y"` is always the primary. */
@@ -2243,6 +3496,10 @@ var Plot = class {
     this.modeChangeCbs = [];
     this.toolbarHandle = null;
     this.hoverPx = null;
+    /** Cursor position while the pointer is pressed, when `crosshair`. */
+    this.pressPx = null;
+    /** A point clicked to pin its details, until another click clears it. */
+    this.selected = null;
     this.container = container;
     if (getComputedStyle(container).position === "static") {
       container.style.position = "relative";
@@ -2273,8 +3530,14 @@ var Plot = class {
     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.mode = options.mode ?? "pan";
     this.hoverEnabled = options.hover !== false;
+    this.pickMode = options.pick ?? "x";
+    this.pointInfo = options.pointInfo ?? "click";
+    this.crosshair = options.crosshair ?? true;
+    this.equalAspect = options.equalAspect ?? false;
+    this.boundedPan = options.boundedPan ?? false;
+    this.hoverReadout = options.hoverReadout;
     this.selectionDiv = document.createElement("div");
     Object.assign(this.selectionDiv.style, {
       position: "absolute",
@@ -2303,11 +3566,28 @@ var Plot = class {
       boxShadow: "0 4px 12px rgba(0,0,0,0.18)"
     });
     container.appendChild(this.tooltip);
+    this.infoBox = document.createElement("div");
+    Object.assign(this.infoBox.style, {
+      position: "absolute",
+      display: "none",
+      zIndex: "6",
+      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.96)" : "rgba(255,255,255,0.98)",
+      color: this.isDark ? "#e2e8f0" : "#1e293b",
+      border: `1px solid ${this.isDark ? "rgba(148,163,184,0.4)" : "rgba(100,116,139,0.4)"}`,
+      boxShadow: "0 6px 18px rgba(0,0,0,0.25)"
+    });
+    container.appendChild(this.infoBox);
     this.resizeObserver = new ResizeObserver(() => this.resize());
     this.resizeObserver.observe(container);
     this.resize();
     if (options.interactive !== false) this.attachInteraction();
-    if (options.toolbar !== false) {
+    if (options.showToolbar !== false) {
       this.toolbarHandle = createToolbar(
         container,
         {
@@ -2385,6 +3665,34 @@ var Plot = class {
     this.requestRender();
     return layer;
   }
+  /**
+   * Register a layer built outside core (e.g. `@photonviz/map`). Use with
+   * {@link context} to construct the layer against this plot's WebGL2 context.
+   */
+  add(layer) {
+    return this.register(layer);
+  }
+  /** The shared WebGL2 context, for constructing custom layers. */
+  get context() {
+    return this.gl;
+  }
+  /**
+   * Convert a client (screen) coordinate to data space — the shared x and the
+   * primary y. Returns null if the point is outside the plot region. Useful for
+   * custom hit-testing (e.g. map feature picking on click).
+   */
+  dataAt(clientX, clientY) {
+    const rect = this.axisCanvas.getBoundingClientRect();
+    const region = plotRegion(this.layout());
+    const px = clientX - rect.left;
+    const py = clientY - rect.top;
+    if (px < region.left || px > region.left + region.width || py < region.top || py > region.top + region.height) {
+      return null;
+    }
+    const nx = (px - region.left) / region.width;
+    const ny = 1 - (py - region.top) / region.height;
+    return { x: this.scaleX.invert(nx), y: this.primaryY().scale.invert(ny) };
+  }
   addLine(opts) {
     return this.register(new LineLayer(this.gl, opts));
   }
@@ -2409,6 +3717,18 @@ var Plot = class {
   addContour(opts) {
     return this.register(new ContourLayer(this.gl, opts));
   }
+  addErrorBar(opts) {
+    return this.register(new ErrorBarLayer(this.gl, opts));
+  }
+  addStem(opts) {
+    return this.register(new StemLayer(this.gl, opts));
+  }
+  addQuiver(opts) {
+    return this.register(new QuiverLayer(this.gl, opts));
+  }
+  addCandlestick(opts) {
+    return this.register(new CandlestickLayer(this.gl, opts));
+  }
   /** Compute an STFT of `signal` and render it as a heatmap (time × frequency). */
   addHeatmapSpectrogram(signal, opts = {}) {
     const s = spectrogram(signal, opts);
@@ -2554,6 +3874,7 @@ var Plot = class {
     this.toolbarHandle?.destroy();
     this.selectionDiv.remove();
     this.tooltip.remove();
+    this.infoBox.remove();
     for (const l of this.layers) l.dispose();
     this.container.removeChild(this.gridCanvas);
     this.container.removeChild(this.dataCanvas);
@@ -2588,6 +3909,8 @@ var Plot = class {
   render() {
     const layout = this.layout();
     const region = plotRegion(layout);
+    if (this.equalAspect) this.applyAspect(region);
+    if (this.boundedPan) this.clampView();
     const primary = this.primaryY();
     const ticksX = this.axisX.resolve(this.scaleX);
     const ticksYPrimary = primary.axis.resolve(primary.scale);
@@ -2643,8 +3966,16 @@ var Plot = class {
         titleX: pos.titleX
       });
     }
-    if (this.hoverEnabled && this.hoverPx) this.renderHover(region);
-    else this.tooltip.style.display = "none";
+    if (this.crosshair && this.pressPx) {
+      drawCrosshairXY(this.axisCtx, region, this.pressPx.x, this.pressPx.y, this.theme);
+    }
+    if (this.hoverEnabled && this.hoverPx) {
+      this.renderHover(region);
+    } else {
+      this.tooltip.style.display = "none";
+      if (this.pointInfo === "hover") this.selected = null;
+    }
+    this.updateInfoBox(region);
   }
   renderHover(region) {
     const cursor = this.hoverPx;
@@ -2654,33 +3985,49 @@ var Plot = class {
     }
     const nx = (cursor.x - region.left) / region.width;
     const dataX = this.scaleX.invert(nx);
-    drawCrosshair(this.axisCtx, region, cursor.x, this.theme);
+    const ny = 1 - (cursor.y - region.top) / region.height;
+    const dataY = this.primaryY().scale.invert(ny);
+    if (this.crosshair) {
+      drawCrosshairXY(this.axisCtx, region, cursor.x, cursor.y, this.theme);
+    } else {
+      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));
+      const project = (x, y) => [
+        pxX(region, this.scaleX.norm(x)),
+        pxY(region, ya.scale.norm(y))
+      ];
+      const p = layer.pick(this.pickMode, cursor.x, cursor.y, project);
+      if (!p) continue;
+      const [px, py] = project(p.x, 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);
+    this.updateTooltip(rows, cursor, dataX, dataY);
+    if (this.pointInfo === "hover") this.selected = this.pickPoint(cursor.x, cursor.y);
   }
-  updateTooltip(rows, cursor, dataX) {
+  updateTooltip(rows, cursor, dataX, dataY) {
     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);
+    if (this.hoverReadout) {
+      for (const line of this.hoverReadout(dataX, dataY)) {
+        const el = document.createElement("div");
+        el.style.opacity = "0.7";
+        el.style.marginBottom = "3px";
+        el.textContent = `${line.label} ${line.value}`;
+        tip.appendChild(el);
+      }
+    } else {
+      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");
@@ -2746,18 +4093,19 @@ var Plot = class {
     }
     return { type: "plot" };
   }
+  // Pan/zoom shift the domain in the scale's *transformed* space (via invert),
+  // not raw data space — so a log axis stays positive instead of crossing zero
+  // into NaN. For linear/time scales this is identical to the old arithmetic.
   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];
+    const f = dxPx / region.width;
+    this.scaleX.domain = [this.scaleX.invert(-f), this.scaleX.invert(1 - f)];
     this.autoX = false;
   }
   panY(id, dyPx, region) {
-    const dyFrac = dyPx / region.height;
+    const f = 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.scale.domain = [ya.scale.invert(f), ya.scale.invert(1 + f)];
       ya.auto = false;
     }
   }
@@ -2784,12 +4132,16 @@ var Plot = class {
     let lastY = 0;
     let startX = 0;
     let startY = 0;
+    let downX = 0;
+    let downY = 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;
+      downX = px;
+      downY = py;
       const zone = this.zoneAt(px, py);
       if (zone.type === "x") {
         axisDrag = "x";
@@ -2802,15 +4154,18 @@ var Plot = class {
         lastX = e.clientX;
         lastY = e.clientY;
         el.style.cursor = "grabbing";
+        if (this.crosshair) this.setPress(px, py);
       } else {
         selecting = true;
         startX = px;
         startY = py;
+        if (this.crosshair) this.setPress(px, py);
       }
     });
     el.addEventListener("pointermove", (e) => {
       const rect = el.getBoundingClientRect();
       const region = plotRegion(this.layout());
+      if (this.pressPx) this.setPress(e.clientX - rect.left, e.clientY - rect.top);
       if (axisDrag === "x") {
         this.panX(e.clientX - lastX, region);
         lastX = e.clientX;
@@ -2846,6 +4201,14 @@ var Plot = class {
     el.addEventListener("pointerleave", () => this.setHover(null));
     const end = (e) => {
       if (el.hasPointerCapture(e.pointerId)) el.releasePointerCapture(e.pointerId);
+      if (this.pressPx) {
+        this.pressPx = null;
+        this.requestRender();
+      }
+      const rect = el.getBoundingClientRect();
+      const upPx = e.clientX - rect.left;
+      const upPy = e.clientY - rect.top;
+      const isClick = e.type === "pointerup" && !axisDrag && Math.hypot(upPx - downX, upPy - downY) < 4;
       if (axisDrag) {
         axisDrag = null;
       } else if (panning) {
@@ -2853,10 +4216,10 @@ var Plot = class {
         this.updateCursor();
       } else if (selecting) {
         selecting = false;
-        const rect = el.getBoundingClientRect();
-        this.applySelection(startX, startY, e.clientX - rect.left, e.clientY - rect.top);
+        if (!isClick) this.applySelection(startX, startY, upPx, upPy);
         this.selectionDiv.style.display = "none";
       }
+      if (isClick) this.handleClick(upPx, upPy);
     };
     el.addEventListener("pointerup", end);
     el.addEventListener("pointercancel", end);
@@ -2867,6 +4230,160 @@ var Plot = class {
     this.hoverPx = px;
     this.requestRender();
   }
+  /** Update the press-crosshair position and redraw. */
+  setPress(x, y) {
+    this.pressPx = { x, y };
+    this.requestRender();
+  }
+  /** Nearest point (2D, within a small radius) under the cursor, or null. */
+  pickPoint(cursorPx, cursorPy) {
+    const region = plotRegion(this.layout());
+    let hit = null;
+    let hitDist = Infinity;
+    for (const layer of this.layers) {
+      if (!isPickable(layer)) continue;
+      const ya = this.yAxes.get(layer.yAxis);
+      const project = (x, y) => [
+        pxX(region, this.scaleX.norm(x)),
+        pxY(region, ya.scale.norm(y))
+      ];
+      const p = layer.pick("xy", cursorPx, cursorPy, project);
+      if (!p) continue;
+      const [ppx, ppy] = project(p.x, p.y);
+      const d = Math.hypot(ppx - cursorPx, ppy - cursorPy);
+      if (d < hitDist) {
+        hitDist = d;
+        hit = { layer, x: p.x, y: p.y, index: p.index };
+      }
+    }
+    return hit && hitDist <= 14 ? hit : null;
+  }
+  /** Click handler: in `pointInfo:"click"` mode, pin the point under the cursor. */
+  handleClick(cursorPx, cursorPy) {
+    if (this.pointInfo !== "click") return;
+    this.selected = this.pickPoint(cursorPx, cursorPy);
+    this.requestRender();
+  }
+  /** Draw the pinned point's marker and position its info box (or hide it). */
+  updateInfoBox(region) {
+    const box = this.infoBox;
+    if (!this.selected) {
+      box.style.display = "none";
+      return;
+    }
+    const { layer, x, y, index } = this.selected;
+    const ya = this.yAxes.get(layer.yAxis);
+    const px = pxX(region, this.scaleX.norm(x));
+    const py = pxY(region, ya.scale.norm(y));
+    if (px < region.left || px > region.left + region.width || py < region.top || py > region.top + region.height) {
+      box.style.display = "none";
+      return;
+    }
+    drawMarker(this.axisCtx, px, py, layer.colorCss);
+    box.replaceChildren();
+    const info = layer.infoAt ? layer.infoAt(index) : null;
+    const title = document.createElement("div");
+    title.style.fontWeight = "600";
+    title.style.marginBottom = "2px";
+    title.textContent = info && info.length ? info[0] : layer.name;
+    box.appendChild(title);
+    if (info && info.length > 1) {
+      for (let i = 1; i < info.length; i++) {
+        const row = document.createElement("div");
+        row.textContent = info[i];
+        box.appendChild(row);
+      }
+    } else {
+      const lines = this.hoverReadout ? this.hoverReadout(x, y) : [
+        { label: "x", value: (this.axisX.config.format ?? defaultFormat)(x) },
+        { label: "y", value: (ya.axis.config.format ?? defaultFormat)(y) }
+      ];
+      for (const ln of lines) {
+        const row = document.createElement("div");
+        row.textContent = `${ln.label} ${ln.value}`;
+        box.appendChild(row);
+      }
+    }
+    box.style.display = "block";
+    const cw = this.container.clientWidth;
+    const tw = box.offsetWidth;
+    const th = box.offsetHeight;
+    let left = px + 12;
+    if (left + tw > cw) left = px - tw - 12;
+    let top = py + 12;
+    if (top + th > this.container.clientHeight) top = py - th - 12;
+    box.style.left = `${Math.max(0, left)}px`;
+    box.style.top = `${Math.max(0, top)}px`;
+  }
+  /** Data-space x extent across all layers, or null if empty. */
+  layerBoundsX() {
+    let lo = Infinity;
+    let hi = -Infinity;
+    let any = false;
+    for (const l of this.layers) {
+      const b = l.bounds();
+      if (!b) continue;
+      any = true;
+      lo = Math.min(lo, b.x[0]);
+      hi = Math.max(hi, b.x[1]);
+    }
+    return any ? [lo, hi] : null;
+  }
+  /** Data-space y extent across the layers bound to axis `id`, or null. */
+  layerBoundsY(id) {
+    let lo = Infinity;
+    let hi = -Infinity;
+    let any = false;
+    for (const l of this.layers) {
+      if (l.yAxis !== id) continue;
+      const b = l.bounds();
+      if (!b) continue;
+      any = true;
+      lo = Math.min(lo, b.y[0]);
+      hi = Math.max(hi, b.y[1]);
+    }
+    return any ? [lo, hi] : null;
+  }
+  /** Keep the view inside the data bounds (used when `boundedPan`). */
+  clampView() {
+    if (!this.scaleX.log) {
+      const bx = this.layerBoundsX();
+      if (bx) this.scaleX.domain = clampAxis(this.scaleX.domain, bx);
+    }
+    for (const ya of this.yAxes.values()) {
+      if (ya.scale.log) continue;
+      const by = this.layerBoundsY(ya.id);
+      if (by) ya.scale.domain = clampAxis(ya.scale.domain, by);
+    }
+  }
+  /**
+   * Expand the looser axis so both axes share the same data-units-per-pixel,
+   * preventing distortion (maps set `equalAspect`). Linear axes only; balances
+   * the primary y against x, and is idempotent once balanced.
+   */
+  applyAspect(region) {
+    if (this.scaleX.log) return;
+    const primary = this.primaryY();
+    if (primary.scale.log) return;
+    const w = region.width;
+    const h = region.height;
+    if (w <= 0 || h <= 0) return;
+    const [xlo, xhi] = this.scaleX.domain;
+    const [ylo, yhi] = primary.scale.domain;
+    const uppX = (xhi - xlo) / w;
+    const uppY = (yhi - ylo) / h;
+    if (uppX <= 0 || uppY <= 0) return;
+    if (Math.abs(uppX - uppY) <= 1e-9 * Math.max(uppX, uppY)) return;
+    if (uppX > uppY) {
+      const target = uppX * h;
+      const cy = (ylo + yhi) / 2;
+      primary.scale.domain = [cy - target / 2, cy + target / 2];
+    } else {
+      const target = uppY * w;
+      const cx = (xlo + xhi) / 2;
+      this.scaleX.domain = [cx - target / 2, cx + target / 2];
+    }
+  }
   drawSelection(x0, y0, x1, y1) {
     const region = plotRegion(this.layout());
     const lock = this.axisLock();
@@ -2931,16 +4448,14 @@ var Plot = class {
   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];
+      const t = nx * (1 - factor);
+      this.scaleX.domain = [this.scaleX.invert(t), this.scaleX.invert(t + factor)];
       this.autoX = false;
     }
     if (lock.y) {
+      const t = ny * (1 - factor);
       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.scale.domain = [ya.scale.invert(t), ya.scale.invert(t + factor)];
         ya.auto = false;
       }
     }
@@ -2953,29 +4468,80 @@ var PolarPlot = class {
   constructor(container, options = {}) {
     this.entries = [];
     this.R = 1;
+    this.baseR = 1;
     this.dpr = 1;
     this.frameRequested = false;
+    /** Multiplier on the fitted radius: <1 zooms in (smaller r-domain), >1 out. */
+    this.zoom = 1;
+    /** Angular offset (radians, CCW) applied to all series + gridlines. */
+    this.rotation = 0;
+    this.hoverPx = null;
+    this.homeButton = null;
+    /** A point clicked to pin its details, until another click clears it. */
+    this.selected = null;
     this.container = container;
     if (getComputedStyle(container).position === "static") container.style.position = "relative";
-    this.gridCanvas = this.makeCanvas(0);
-    this.dataCanvas = this.makeCanvas(1);
+    this.gridCanvas = this.makeCanvas(0, false);
+    this.dataCanvas = this.makeCanvas(1, false);
+    this.overlayCanvas = this.makeCanvas(2, true);
     this.gridCtx = this.gridCanvas.getContext("2d");
     this.dataCtx = this.dataCanvas.getContext("2d");
+    this.overlayCtx = this.overlayCanvas.getContext("2d");
     const s = getSharedGL();
     this.gl = s.gl;
     this.sharedCanvas = s.canvas;
+    this.isDark = options.theme === "dark";
     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.interactive = options.interactive !== false;
+    this.hoverEnabled = options.hover !== false;
+    this.pointInfo = options.pointInfo ?? "click";
+    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.infoBox = document.createElement("div");
+    Object.assign(this.infoBox.style, {
+      position: "absolute",
+      display: "none",
+      zIndex: "6",
+      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.96)" : "rgba(255,255,255,0.98)",
+      color: this.isDark ? "#e2e8f0" : "#1e293b",
+      border: `1px solid ${this.isDark ? "rgba(148,163,184,0.4)" : "rgba(100,116,139,0.4)"}`,
+      boxShadow: "0 6px 18px rgba(0,0,0,0.25)"
+    });
+    container.appendChild(this.infoBox);
     this.resizeObserver = new ResizeObserver(() => this.resize());
     this.resizeObserver.observe(container);
     this.resize();
+    if (this.interactive) this.attachInteraction();
+    if (options.showToolbar !== false) this.homeButton = this.makeHomeButton();
   }
-  makeCanvas(z) {
+  makeCanvas(z, interactive) {
     const c = document.createElement("canvas");
     Object.assign(c.style, { position: "absolute", inset: "0", width: "100%", height: "100%", zIndex: String(z) });
-    c.style.pointerEvents = "none";
+    if (!interactive) c.style.pointerEvents = "none";
     this.container.appendChild(c);
     return c;
   }
@@ -2983,9 +4549,10 @@ var PolarPlot = class {
     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);
+    const rot = this.rotation;
     let maxR = 0;
     for (let i = 0; i < n; i++) {
-      const a = theta[i] * this.toRad, rr = r[i];
+      const a = theta[i] * this.toRad + rot, rr = r[i];
       x[i] = rr * Math.cos(a);
       y[i] = rr * Math.sin(a);
       if (Math.abs(rr) > maxR) maxR = Math.abs(rr);
@@ -3000,7 +4567,7 @@ var PolarPlot = class {
     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 };
+    const entry = { layer, closed, maxR, theta: opts.theta, r: opts.r };
     this.entries.push(entry);
     this.refit();
     return this.handle(entry);
@@ -3008,7 +4575,7 @@ var PolarPlot = class {
   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 };
+    const entry = { layer, closed: false, maxR, theta: opts.theta, r: opts.r, labels: opts.labels };
     this.entries.push(entry);
     this.refit();
     return this.handle(entry);
@@ -3016,6 +4583,8 @@ var PolarPlot = class {
   handle(entry) {
     return {
       setData: (theta, r) => {
+        entry.theta = theta;
+        entry.r = r;
         const { x, y, maxR } = this.toXY(theta, r, entry.closed);
         entry.layer.setData(x, y);
         entry.maxR = maxR;
@@ -3025,29 +4594,63 @@ var PolarPlot = class {
     };
   }
   refit() {
+    let base;
     if (this.fixedR != null) {
-      this.R = this.fixedR;
-      return;
+      base = this.fixedR;
+    } else {
+      let m = 0;
+      for (const e of this.entries) m = Math.max(m, e.maxR);
+      base = m || 1;
+    }
+    this.baseR = base;
+    this.R = base * this.zoom;
+  }
+  /** Re-project every series with the current rotation (called when rotation changes). */
+  retransform() {
+    for (const e of this.entries) {
+      const { x, y } = this.toXY(e.theta, e.r, e.closed);
+      e.layer.setData(x, y);
     }
-    let m = 0;
-    for (const e of this.entries) m = Math.max(m, e.maxR);
-    this.R = m || 1;
+  }
+  // ---- Interaction control --------------------------------------------------
+  /** Reset zoom (r-domain) and rotation back to the initial view. */
+  home() {
+    this.zoom = 1;
+    this.rotation = 0;
+    this.refit();
+    this.retransform();
+    this.requestRender();
+  }
+  /** Current rotation offset in radians (CCW). */
+  getRotation() {
+    return this.rotation;
+  }
+  /** Set the rotation offset (radians, CCW) and redraw. */
+  setRotation(rad) {
+    this.rotation = rad;
+    this.retransform();
+    this.requestRender();
   }
   destroy() {
     this.resizeObserver.disconnect();
     for (const e of this.entries) e.layer.dispose();
+    this.tooltip.remove();
+    this.infoBox.remove();
+    this.homeButton?.remove();
     this.container.removeChild(this.gridCanvas);
     this.container.removeChild(this.dataCanvas);
+    this.container.removeChild(this.overlayCanvas);
   }
   resize() {
     this.dpr = window.devicePixelRatio || 1;
     const w = this.container.clientWidth, h = this.container.clientHeight;
-    for (const c of [this.gridCanvas, this.dataCanvas]) {
+    for (const c of [this.gridCanvas, this.dataCanvas, this.overlayCanvas]) {
       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.overlayCtx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
     this.render();
   }
   requestRender() {
@@ -3089,6 +4692,14 @@ var PolarPlot = class {
     this.dataCtx.clearRect(0, 0, w, h);
     this.dataCtx.drawImage(this.sharedCanvas, 0, 0, w, h);
     this.drawGrid(sq);
+    this.overlayCtx.clearRect(0, 0, w, h);
+    if (this.hoverEnabled && this.hoverPx) {
+      this.renderHover(sq);
+    } else {
+      this.tooltip.style.display = "none";
+      if (this.pointInfo === "hover") this.selected = null;
+    }
+    this.updateInfoBox(sq);
   }
   drawGrid(sq) {
     const ctx = this.gridCtx;
@@ -3102,7 +4713,7 @@ var PolarPlot = class {
     ctx.strokeStyle = this.theme.grid;
     ctx.lineWidth = 1;
     for (let deg = 0; deg < 360; deg += 30) {
-      const a = deg * Math.PI / 180;
+      const a = deg * Math.PI / 180 + this.rotation;
       const ex = cx + Math.cos(a) * pr, ey = cy - Math.sin(a) * pr;
       ctx.beginPath();
       ctx.moveTo(cx, cy);
@@ -3123,7 +4734,270 @@ var PolarPlot = class {
     }
     ctx.restore();
   }
+  // ---- Hover ----------------------------------------------------------------
+  setHover(px) {
+    const had = this.hoverPx !== null;
+    if (!px && !had) return;
+    this.hoverPx = px;
+    this.requestRender();
+  }
+  /** Nearest data point (across all series) to a cursor position, in CSS px. */
+  pickNearest(sq, cursorX, cursorY) {
+    const pr = sq.side / 2;
+    const { cx, cy } = sq;
+    const rot = this.rotation;
+    let best = null;
+    for (const e of this.entries) {
+      const n = Math.min(e.theta.length, e.r.length);
+      for (let i = 0; i < n; i++) {
+        const a = e.theta[i] * this.toRad + rot, rr = e.r[i];
+        const px = cx + rr * Math.cos(a) / this.R * pr;
+        const py = cy - rr * Math.sin(a) / this.R * pr;
+        const dx = px - cursorX, dy = py - cursorY;
+        const d2 = dx * dx + dy * dy;
+        if (!best || d2 < best.d2) best = { entry: e, index: i, px, py, theta: e.theta[i], r: rr, d2 };
+      }
+    }
+    return best;
+  }
+  /** Draw a filled, white-ringed marker on the overlay at a screen position. */
+  drawPointMarker(px, py, color) {
+    const ctx = this.overlayCtx;
+    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();
+  }
+  renderHover(sq) {
+    const cursor = this.hoverPx;
+    const best = this.pickNearest(sq, cursor.x, cursor.y);
+    const within = best != null && best.d2 <= 24 * 24;
+    if (this.pointInfo === "hover") {
+      this.selected = within ? { entry: best.entry, index: best.index } : null;
+    }
+    if (!within) {
+      this.tooltip.style.display = "none";
+      return;
+    }
+    this.drawPointMarker(best.px, best.py, best.entry.layer.colorCss);
+    this.updateTooltip(best.entry, best.theta, best.r, cursor);
+  }
+  /** Click handler: pin the nearest point's details, or clear on empty space. */
+  handleClick(sq, cursorX, cursorY) {
+    if (this.pointInfo !== "click") return;
+    const hit = this.pickNearest(sq, cursorX, cursorY);
+    this.selected = hit && hit.d2 <= 14 * 14 ? { entry: hit.entry, index: hit.index } : null;
+    this.requestRender();
+  }
+  /** Draw the pinned point's marker and position its info box (or hide it). */
+  updateInfoBox(sq) {
+    const box = this.infoBox;
+    if (!this.selected) {
+      box.style.display = "none";
+      return;
+    }
+    const { entry, index } = this.selected;
+    if (index >= Math.min(entry.theta.length, entry.r.length)) {
+      this.selected = null;
+      box.style.display = "none";
+      return;
+    }
+    const pr = sq.side / 2;
+    const a = entry.theta[index] * this.toRad + this.rotation, rr = entry.r[index];
+    const px = sq.cx + rr * Math.cos(a) / this.R * pr;
+    const py = sq.cy - rr * Math.sin(a) / this.R * pr;
+    if (px < sq.left || px > sq.left + sq.side || py < sq.top || py > sq.top + sq.side) {
+      box.style.display = "none";
+      return;
+    }
+    this.drawPointMarker(px, py, entry.layer.colorCss);
+    box.replaceChildren();
+    const label = entry.labels && index < entry.labels.length ? entry.labels[index] : void 0;
+    const title = document.createElement("div");
+    title.style.fontWeight = "600";
+    title.style.marginBottom = "2px";
+    title.textContent = label != null && label !== "" ? label : entry.layer.name;
+    box.appendChild(title);
+    const unit = this.toRad === 1 ? "" : "\xB0";
+    const rRow = document.createElement("div");
+    rRow.textContent = `r = ${fmt(rr)}`;
+    const tRow = document.createElement("div");
+    tRow.textContent = `\u03B8 = ${fmt(entry.theta[index])}${unit}`;
+    box.appendChild(rRow);
+    box.appendChild(tRow);
+    box.style.display = "block";
+    const cw = this.container.clientWidth, ch = this.container.clientHeight;
+    const tw = box.offsetWidth, th = box.offsetHeight;
+    let left = px + 12;
+    if (left + tw > cw) left = px - tw - 12;
+    let top = py + 12;
+    if (top + th > ch) top = py - th - 12;
+    box.style.left = `${Math.max(0, left)}px`;
+    box.style.top = `${Math.max(0, top)}px`;
+  }
+  updateTooltip(entry, theta, r, cursor) {
+    const tip = this.tooltip;
+    tip.replaceChildren();
+    const head = document.createElement("div");
+    head.style.display = "flex";
+    head.style.alignItems = "center";
+    head.style.gap = "6px";
+    head.style.marginBottom = "3px";
+    const dot = document.createElement("span");
+    Object.assign(dot.style, {
+      width: "8px",
+      height: "8px",
+      borderRadius: "50%",
+      background: entry.layer.colorCss,
+      flex: "0 0 auto"
+    });
+    const nameEl = document.createElement("span");
+    nameEl.textContent = entry.layer.name;
+    head.appendChild(dot);
+    head.appendChild(nameEl);
+    tip.appendChild(head);
+    const unit = this.toRad === 1 ? "" : "\xB0";
+    const rRow = document.createElement("div");
+    rRow.textContent = `r = ${fmt(r)}`;
+    const tRow = document.createElement("div");
+    tRow.textContent = `\u03B8 = ${fmt(theta)}${unit}`;
+    tip.appendChild(rRow);
+    tip.appendChild(tRow);
+    tip.style.display = "block";
+    const cw = this.container.clientWidth;
+    const tw = tip.offsetWidth, 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 ----------------------------------------------------------
+  attachInteraction() {
+    const el = this.overlayCanvas;
+    el.style.touchAction = "none";
+    el.style.cursor = "grab";
+    el.addEventListener(
+      "wheel",
+      (e) => {
+        e.preventDefault();
+        const factor = Math.exp(e.deltaY * 1e-3);
+        this.zoom = Math.max(1e-3, Math.min(1e3, this.zoom * factor));
+        this.R = this.baseR * this.zoom;
+        this.requestRender();
+      },
+      { passive: false }
+    );
+    let rotating = false;
+    let lastAngle = 0;
+    let downX = 0, downY = 0;
+    const cursorAngle = (px, py) => {
+      const sq = this.square();
+      return Math.atan2(sq.cy - py, px - sq.cx);
+    };
+    el.addEventListener("pointerdown", (e) => {
+      el.setPointerCapture(e.pointerId);
+      const rect = el.getBoundingClientRect();
+      downX = e.clientX - rect.left;
+      downY = e.clientY - rect.top;
+      rotating = true;
+      lastAngle = cursorAngle(downX, downY);
+      this.hoverPx = null;
+      el.style.cursor = "grabbing";
+    });
+    el.addEventListener("pointermove", (e) => {
+      const rect = el.getBoundingClientRect();
+      const px = e.clientX - rect.left;
+      const py = e.clientY - rect.top;
+      if (rotating) {
+        const ang = cursorAngle(px, py);
+        let d = ang - lastAngle;
+        if (d > Math.PI) d -= 2 * Math.PI;
+        else if (d < -Math.PI) d += 2 * Math.PI;
+        this.rotation += d;
+        lastAngle = ang;
+        this.retransform();
+        this.requestRender();
+      } else if (this.hoverEnabled) {
+        this.setHover({ x: px, y: py });
+      }
+    });
+    el.addEventListener("pointerleave", () => this.setHover(null));
+    const end = (e, click) => {
+      if (el.hasPointerCapture(e.pointerId)) el.releasePointerCapture(e.pointerId);
+      if (rotating) {
+        rotating = false;
+        el.style.cursor = "grab";
+      }
+      if (!click) return;
+      const rect = el.getBoundingClientRect();
+      const px = e.clientX - rect.left, py = e.clientY - rect.top;
+      if (Math.hypot(px - downX, py - downY) < 4) this.handleClick(this.square(), px, py);
+    };
+    el.addEventListener("pointerup", (e) => end(e, true));
+    el.addEventListener("pointercancel", (e) => end(e, false));
+  }
+  makeHomeButton() {
+    const dark = this.isDark;
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.title = "Reset view (Home)";
+    btn.setAttribute("aria-label", "Reset view (Home)");
+    Object.assign(btn.style, {
+      position: "absolute",
+      top: "8px",
+      right: "8px",
+      zIndex: "5",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "26px",
+      height: "26px",
+      padding: "0",
+      borderRadius: "6px",
+      background: dark ? "rgba(15,23,42,0.85)" : "rgba(255,255,255,0.9)",
+      color: dark ? "#cbd5e1" : "#475569",
+      border: `1px solid ${dark ? "rgba(148,163,184,0.25)" : "rgba(100,116,139,0.25)"}`,
+      backdropFilter: "blur(6px)",
+      boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
+      cursor: "pointer"
+    });
+    const svgNS = "http://www.w3.org/2000/svg";
+    const svg = document.createElementNS(svgNS, "svg");
+    svg.setAttribute("width", "16");
+    svg.setAttribute("height", "16");
+    svg.setAttribute("viewBox", "0 0 16 16");
+    svg.setAttribute("aria-hidden", "true");
+    const mkPath = (d) => {
+      const p = document.createElementNS(svgNS, "path");
+      p.setAttribute("d", d);
+      p.setAttribute("fill", "none");
+      p.setAttribute("stroke", "currentColor");
+      p.setAttribute("stroke-width", "1.5");
+      p.setAttribute("stroke-linecap", "round");
+      p.setAttribute("stroke-linejoin", "round");
+      return p;
+    };
+    svg.appendChild(mkPath("M2 7.5 8 2l6 5.5"));
+    svg.appendChild(mkPath("M4 7v6.5h3.2V10h1.6v3.5H12V7"));
+    btn.appendChild(svg);
+    btn.addEventListener("click", () => this.home());
+    this.container.appendChild(btn);
+    return btn;
+  }
 };
+function fmt(v) {
+  if (!Number.isFinite(v)) return String(v);
+  const a = Math.abs(v);
+  if (a !== 0 && (a < 1e-3 || a >= 1e5)) return v.toExponential(2);
+  return String(Math.round(v * 1e3) / 1e3);
+}
 
 // src/plot3d/mat4.ts
 function identity() {
@@ -3217,7 +5091,7 @@ void main() {
   gl_PointSize = uSize;
 }`
 );
-var FRAG9 = (
+var FRAG11 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -3229,19 +5103,19 @@ void main() {
   outColor = vec4(vColor, 1.0);
 }`
 );
-var programCache9 = /* @__PURE__ */ new WeakMap();
+var programCache10 = /* @__PURE__ */ new WeakMap();
 function getProgram9(gl) {
-  let p = programCache9.get(gl);
+  let p = programCache10.get(gl);
   if (!p) {
-    p = createProgram(gl, VERT9, FRAG9);
-    programCache9.set(gl, p);
+    p = createProgram(gl, VERT9, FRAG11);
+    programCache10.set(gl, p);
   }
   return p;
 }
-var counter9 = 0;
+var counter13 = 0;
 var PointCloudLayer = class {
   constructor(gl, opts) {
-    this.id = `points3d-${counter9++}`;
+    this.id = `points3d-${counter13++}`;
     this.gl = gl;
     this.program = getProgram9(gl);
     this.size = opts.size ?? 4;
@@ -3326,7 +5200,7 @@ out vec3 vColor;
 out vec3 vN;
 void main() { vColor = aColor; vN = aNormal; gl_Position = uMVP * vec4(aPos, 1.0); }`
 );
-var FRAG10 = (
+var FRAG12 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -3341,21 +5215,21 @@ void main() {
   outColor = vec4(vColor * shade, 1.0);
 }`
 );
-var programCache10 = /* @__PURE__ */ new WeakMap();
+var programCache11 = /* @__PURE__ */ new WeakMap();
 function getProgram10(gl) {
-  let p = programCache10.get(gl);
+  let p = programCache11.get(gl);
   if (!p) {
-    p = createProgram(gl, VERT10, FRAG10);
-    programCache10.set(gl, p);
+    p = createProgram(gl, VERT10, FRAG12);
+    programCache11.set(gl, p);
   }
   return p;
 }
-var counter10 = 0;
+var counter14 = 0;
 var SurfaceLayer = class {
   constructor(gl, opts) {
     this.lightDir = [0.5, 1, 0.35];
     this.ambient = 0.35;
-    this.id = `surface-${counter10++}`;
+    this.id = `surface-${counter14++}`;
     this.gl = gl;
     this.program = getProgram10(gl);
     const { cols, rows, values } = opts;
@@ -3825,7 +5699,9 @@ export {
   Axis,
   BarLayer,
   BoxLayer,
+  CandlestickLayer,
   ContourLayer,
+  ErrorBarLayer,
   HeatmapLayer,
   HexbinLayer,
   LineLayer,
@@ -3835,12 +5711,17 @@ export {
   Plot3D,
   PointCloudLayer,
   PolarPlot,
+  QuiverLayer,
   ScatterLayer,
+  StemLayer,
   SurfaceLayer,
+  TRANSFORM_GLSL,
+  TRANSFORM_UNIFORMS,
   TimeScale,
   autoTicks,
   boxStats,
   colormap,
+  createProgram,
   createToolbar,
   darkTheme,
   defaultFormat,
@@ -3852,8 +5733,10 @@ export {
   parseColor,
   quantileSorted,
   resolveTicks,
+  setTransformUniforms,
   spectrogram,
   toColorCss,
+  uniformLocations,
   withMinorTicks
 };
 //# sourceMappingURL=index.js.map