@photonviz/core 0.1.0 → 0.1.1

package/dist/index.js

@@ -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,245 @@ 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/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 +1986,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 +2015,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, 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, VERT7, FRAG7);
-    programCache7.set(gl, p);
+    p = createProgram(gl, JOIN_VERT, JOIN_FRAG);
+    joinProgramCache.set(gl, p);
   }
   return p;
 }
@@ -1424,20 +2153,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,154 +2213,443 @@ 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",
       "uResolution",
-      "uWidth",
-      "uRound"
+      "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;
+    gl.bindVertexArray(vao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.cornerBuf);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+    gl.bindBuffer(gl.ARRAY_BUFFER, pointBuf);
+    gl.enableVertexAttribArray(1);
+    gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 8, 0);
+    gl.vertexAttribDivisor(1, 1);
+    gl.enableVertexAttribArray(2);
+    gl.vertexAttribPointer(2, 2, gl.FLOAT, false, 8, 8);
+    gl.vertexAttribDivisor(2, 1);
+    gl.bindVertexArray(null);
+  }
+  // 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 };
+  }
+  /** Replace the series data and re-upload the GPU buffer (for streaming). */
+  setData(x, y) {
+    let n = Math.min(x.length, y.length);
+    let xs = x, ys = y;
+    if (this.step && n >= 2) {
+      const e = stepExpand(x, y, n, this.step);
+      xs = e.xs;
+      ys = e.ys;
+      n = e.xs.length;
+    }
+    this.xs = new Float64Array(n);
+    this.ys = new Float64Array(n);
+    this.xRef = n > 0 ? xs[0] : 0;
+    this.yRef = n > 0 ? ys[0] : 0;
+    const data = new Float32Array(n * 2);
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity, mono = true;
+    for (let i = 0; i < n; i++) {
+      const vx = xs[i], vy = ys[i];
+      this.xs[i] = vx;
+      this.ys[i] = vy;
+      data[i * 2] = vx - this.xRef;
+      data[i * 2 + 1] = vy - this.yRef;
+      if (i > 0 && vx < xs[i - 1]) mono = false;
+      if (vx < minX) minX = vx;
+      if (vx > maxX) maxX = vx;
+      if (vy < minY) minY = vy;
+      if (vy > maxY) maxY = vy;
+    }
+    this.xBounds = [minX, maxX];
+    this.yBounds = [minY, maxY];
+    this.count = n;
+    this.monotonic = mono;
+    this.decKey = "";
+    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.posBuf);
+    this.gl.bufferData(this.gl.ARRAY_BUFFER, data, this.gl.DYNAMIC_DRAW);
+    this.syncGpu(data, n);
+  }
+  /**
+   * Rebuild the min/max-decimated buffer for the visible x-window if it changed.
+   * Returns the segment count to draw from `decVao`, or null to draw everything.
+   */
+  decimate(x, cols) {
+    if (!this.decimateOn || !this.monotonic || this.count < 4 * cols) return null;
+    const target = Math.max(2, cols * 2);
+    let i0 = upperBound(this.xs, x.lo) - 1;
+    let i1 = upperBound(this.xs, x.hi);
+    i0 = Math.max(0, i0);
+    i1 = Math.min(this.count - 1, i1);
+    const visN = i1 - i0;
+    if (visN <= target * 1.5) return null;
+    const key = `${i0}:${i1}:${target}`;
+    if (key === this.decKey) return this.decSegments;
+    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;
+    }
+    const gl = this.gl;
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.decBuf);
+    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 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]);
+    gl.uniform2f(this.uniforms.uResolution, state.pixelWidth, state.pixelHeight);
+    gl.uniform1f(this.uniforms.uWidth, this.width * state.dpr);
+    gl.uniform1f(this.uniforms.uRound, this.round ? 1 : 0);
+    gl.bindVertexArray(vao);
+    gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, segments);
+    gl.bindVertexArray(null);
+    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"
     ]);
   }
-  configureVao(vao, pointBuf) {
+  bindInstanceAttribs(arrowBuf, colorBuf) {
     const gl = this.gl;
-    gl.bindVertexArray(vao);
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.cornerBuf);
-    gl.enableVertexAttribArray(0);
-    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
-    gl.bindBuffer(gl.ARRAY_BUFFER, pointBuf);
+    gl.bindBuffer(gl.ARRAY_BUFFER, arrowBuf);
     gl.enableVertexAttribArray(1);
-    gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 8, 0);
+    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, 2, gl.FLOAT, false, 8, 8);
+    gl.vertexAttribPointer(2, 4, gl.FLOAT, false, 0, 0);
     gl.vertexAttribDivisor(2, 1);
-    gl.bindVertexArray(null);
   }
   bounds() {
     if (this.count === 0) return null;
     return { x: this.xBounds, y: this.yBounds };
   }
-  nearestByX(x) {
-    if (this.count === 0) return null;
-    let best = 0, bestDist = Infinity;
-    for (let i = 0; i < this.count; i++) {
-      const d = Math.abs(this.xs[i] - x);
-      if (d < bestDist) {
-        bestDist = d;
-        best = i;
-      }
-    }
-    return { x: this.xs[best], y: this.ys[best], index: best };
-  }
-  /** Replace the series data and re-upload the GPU buffer (for streaming). */
-  setData(x, y) {
-    let n = Math.min(x.length, y.length);
-    let xs = x, ys = y;
-    if (this.step && n >= 2) {
-      const e = stepExpand(x, y, n, this.step);
-      xs = e.xs;
-      ys = e.ys;
-      n = e.xs.length;
-    }
-    this.xs = new Float64Array(n);
-    this.ys = new Float64Array(n);
-    this.xRef = n > 0 ? xs[0] : 0;
-    this.yRef = n > 0 ? ys[0] : 0;
-    const data = new Float32Array(n * 2);
-    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity, mono = true;
-    for (let i = 0; i < n; i++) {
-      const vx = xs[i], vy = ys[i];
-      this.xs[i] = vx;
-      this.ys[i] = vy;
-      data[i * 2] = vx - this.xRef;
-      data[i * 2 + 1] = vy - this.yRef;
-      if (i > 0 && vx < xs[i - 1]) mono = false;
-      if (vx < minX) minX = vx;
-      if (vx > maxX) maxX = vx;
-      if (vy < minY) minY = vy;
-      if (vy > maxY) maxY = vy;
-    }
-    this.xBounds = [minX, maxX];
-    this.yBounds = [minY, maxY];
-    this.count = n;
-    this.monotonic = mono;
-    this.decKey = "";
-    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.posBuf);
-    this.gl.bufferData(this.gl.ARRAY_BUFFER, data, this.gl.DYNAMIC_DRAW);
-  }
-  /**
-   * Rebuild the min/max-decimated buffer for the visible x-window if it changed.
-   * Returns the segment count to draw from `decVao`, or null to draw everything.
-   */
-  decimate(x, cols) {
-    if (!this.decimateOn || !this.monotonic || this.count < 4 * cols) return null;
-    const target = Math.max(2, cols * 2);
-    let i0 = upperBound(this.xs, x.lo) - 1;
-    let i1 = upperBound(this.xs, x.hi);
-    i0 = Math.max(0, i0);
-    i1 = Math.min(this.count - 1, i1);
-    const visN = i1 - i0;
-    if (visN <= target * 1.5) return null;
-    const key = `${i0}:${i1}:${target}`;
-    if (key === this.decKey) return this.decSegments;
-    this.decKey = key;
-    const out = [];
-    const push = (i) => out.push(this.xs[i] - this.xRef, this.ys[i] - this.yRef);
-    push(i0);
-    for (let b = 0; b < cols; b++) {
-      const lo = i0 + Math.floor(visN * b / cols);
-      const hi = i0 + Math.floor(visN * (b + 1) / cols);
-      if (hi <= lo) continue;
-      let iMin = lo, iMax = lo;
-      for (let i = lo; i < hi; i++) {
-        if (this.ys[i] < this.ys[iMin]) iMin = i;
-        if (this.ys[i] > this.ys[iMax]) iMax = i;
-      }
-      if (iMin < iMax) {
-        push(iMin);
-        push(iMax);
-      } else {
-        push(iMax);
-        push(iMin);
-      }
-    }
-    push(i1);
-    const gl = this.gl;
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.decBuf);
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(out), gl.DYNAMIC_DRAW);
-    this.decSegments = out.length / 2 - 1;
-    return this.decSegments;
-  }
   draw(state) {
-    if (this.count < 2) return;
+    if (this.count === 0) return;
     const gl = state.gl;
-    const decSegs = this.decimate(state.x, Math.max(1, Math.round(state.pixelWidth)));
-    const vao = decSegs != null ? this.decVao : this.fullVao;
-    const segments = decSegs != null ? decSegs : this.count - 1;
-    if (segments < 1) return;
-    gl.useProgram(this.program);
-    setTransformUniforms(gl, this.uniforms, state.x, state.y, this.xRef, this.yRef);
-    gl.uniform4f(this.uniforms.uColor, this.color[0], this.color[1], this.color[2], this.color[3]);
-    gl.uniform2f(this.uniforms.uResolution, state.pixelWidth, state.pixelHeight);
-    gl.uniform1f(this.uniforms.uWidth, this.width * state.dpr);
-    gl.uniform1f(this.uniforms.uRound, this.round ? 1 : 0);
-    gl.bindVertexArray(vao);
-    gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, segments);
+    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() {
-    const gl = this.gl;
-    gl.deleteVertexArray(this.fullVao);
-    gl.deleteVertexArray(this.decVao);
-    gl.deleteBuffer(this.cornerBuf);
-    gl.deleteBuffer(this.posBuf);
-    gl.deleteBuffer(this.decBuf);
+    this.gl.deleteVertexArray(this.shaftVao);
+    this.gl.deleteVertexArray(this.headVao);
+    for (const b of this.buffers) this.gl.deleteBuffer(b);
   }
 };
 
@@ -1652,7 +2674,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 +2692,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 +2709,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;
@@ -1832,6 +2854,204 @@ var ScatterLayer = class {
   }
 };
 
+// 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 };
+  }
+  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 };
+  }
+  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.stemVao);
+    this.gl.deleteVertexArray(this.markerVao);
+    for (const b of this.buffers) this.gl.deleteBuffer(b);
+  }
+};
+
 // src/render/overlay.ts
 function plotRegion(layout) {
   const { margin } = layout;
@@ -2409,6 +3629,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);
@@ -2746,18 +3978,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;
     }
   }
@@ -2931,16 +4164,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;
       }
     }
@@ -3217,7 +4448,7 @@ void main() {
   gl_PointSize = uSize;
 }`
 );
-var FRAG9 = (
+var FRAG11 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -3229,19 +4460,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 +4557,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 +4572,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 +5056,9 @@ export {
   Axis,
   BarLayer,
   BoxLayer,
+  CandlestickLayer,
   ContourLayer,
+  ErrorBarLayer,
   HeatmapLayer,
   HexbinLayer,
   LineLayer,
@@ -3835,7 +5068,9 @@ export {
   Plot3D,
   PointCloudLayer,
   PolarPlot,
+  QuiverLayer,
   ScatterLayer,
+  StemLayer,
   SurfaceLayer,
   TimeScale,
   autoTicks,