@photonviz/core 0.3.0 → 0.3.1

package/dist/index.js

@@ -150,6 +150,9 @@ function toColorCss(c) {
 }
 
 // src/gl/program.ts
+function bufferUsage(gl, renderType) {
+  return renderType === "dynamic" ? gl.DYNAMIC_DRAW : gl.STATIC_DRAW;
+}
 function compileShader(gl, type, source) {
   const shader = gl.createShader(type);
   if (!shader) throw new Error("Failed to create shader");
@@ -273,6 +276,7 @@ var AreaLayer = class {
     this.colorCss = typeof colorInput === "string" ? colorInput : toColorCss(this.color);
     this.name = opts.name ?? this.id;
     this.yAxis = opts.yAxis ?? "y";
+    this.usage = bufferUsage(gl, opts.renderType);
     const n = Math.min(opts.x.length, opts.y.length);
     this.vertexCount = n * 2;
     const baseAt = (i) => opts.base == null ? 0 : typeof opts.base === "number" ? opts.base : opts.base[i];
@@ -299,7 +303,7 @@ var AreaLayer = class {
     this.buffer = buffer;
     gl.bindVertexArray(vao);
     gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+    gl.bufferData(gl.ARRAY_BUFFER, data, this.usage);
     gl.enableVertexAttribArray(0);
     gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
     gl.bindVertexArray(null);
@@ -328,7 +332,7 @@ var AreaLayer = class {
     this.xBounds = [minX, maxX];
     this.yBounds = [minY, maxY];
     this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffer);
-    this.gl.bufferData(this.gl.ARRAY_BUFFER, data, this.gl.DYNAMIC_DRAW);
+    this.gl.bufferData(this.gl.ARRAY_BUFFER, data, this.usage);
   }
   bounds() {
     if (this.vertexCount === 0) return null;
@@ -357,9 +361,12 @@ var VERT2 = (
 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;   // per-bar color
 ${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);
 }`
 );
@@ -367,9 +374,9 @@ var FRAG2 = (
   /* glsl */
   `#version 300 es
 precision highp float;
-uniform vec4 uColor;
+in vec4 vColor;
 out vec4 outColor;
-void main() { outColor = vec4(uColor.rgb * uColor.a, uColor.a); }`
+void main() { outColor = vec4(vColor.rgb * vColor.a, vColor.a); }`
 );
 var CORNERS = new Float32Array([0, 0, 1, 0, 1, 1, 0, 0, 1, 1, 0, 1]);
 var programCache2 = /* @__PURE__ */ new WeakMap();
@@ -381,6 +388,9 @@ function getProgram2(gl) {
   }
   return p;
 }
+function toColor(input) {
+  return Array.isArray(input) ? input : parseColor(input);
+}
 function medianSpacing(x, n) {
   if (n < 2) return 1;
   const diffs = [];
@@ -404,12 +414,15 @@ var BarLayer = class {
     this.colorCss = typeof colorInput === "string" ? colorInput : toColorCss(this.color);
     this.name = opts.name ?? this.id;
     this.yAxis = opts.yAxis ?? "y";
+    this.usage = bufferUsage(gl, opts.renderType);
     const n = Math.min(opts.x.length, opts.y.length);
     this.count = n;
     this.barWidth = opts.width ?? medianSpacing(opts.x, n) * 0.8;
     this.offset = opts.offset ?? 0;
     this.orientation = opts.orientation ?? "v";
     const rects = this.buildRects(opts.x, opts.y, opts.base, n);
+    this.colorsInput = opts.colors;
+    const colors = this.buildColors(n);
     const vao = gl.createVertexArray();
     this.vao = vao;
     gl.bindVertexArray(vao);
@@ -420,13 +433,32 @@ var BarLayer = class {
     gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
     const rectBuf = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, rectBuf);
-    gl.bufferData(gl.ARRAY_BUFFER, rects, gl.STATIC_DRAW);
+    gl.bufferData(gl.ARRAY_BUFFER, rects, this.usage);
     gl.enableVertexAttribArray(1);
     gl.vertexAttribPointer(1, 4, gl.FLOAT, false, 0, 0);
     gl.vertexAttribDivisor(1, 1);
+    const colorBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, colors, this.usage);
+    gl.enableVertexAttribArray(2);
+    gl.vertexAttribPointer(2, 4, gl.FLOAT, false, 0, 0);
+    gl.vertexAttribDivisor(2, 1);
     gl.bindVertexArray(null);
-    this.buffers = [cornerBuf, rectBuf];
-    this.uniforms = uniformLocations(gl, this.program, [...TRANSFORM_UNIFORMS, "uColor"]);
+    this.buffers = [cornerBuf, rectBuf, colorBuf];
+    this.uniforms = uniformLocations(gl, this.program, [...TRANSFORM_UNIFORMS]);
+  }
+  /** Per-bar color array (each bar uses its `colors[i]` or falls back to `color`). */
+  buildColors(n) {
+    const arr = new Float32Array(n * 4);
+    const per = this.colorsInput;
+    for (let i = 0; i < n; i++) {
+      const c = per && per[i] != null ? toColor(per[i]) : this.color;
+      arr[i * 4] = c[0];
+      arr[i * 4 + 1] = c[1];
+      arr[i * 4 + 2] = c[2];
+      arr[i * 4 + 3] = c[3];
+    }
+    return arr;
   }
   buildRects(x, y, base, n) {
     const width = this.barWidth, off = this.offset;
@@ -459,13 +491,17 @@ var BarLayer = class {
     this.yBounds = [minY, maxY];
     return rects;
   }
-  /** Replace bar values and re-upload (for streaming). */
-  setData(x, y, base) {
+  /** Replace bar values (and optionally per-bar colors) and re-upload for streaming. */
+  setData(x, y, base, colors) {
     const n = Math.min(x.length, y.length);
     this.count = n;
     const rects = this.buildRects(x, y, base, n);
     this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffers[1]);
-    this.gl.bufferData(this.gl.ARRAY_BUFFER, rects, this.gl.DYNAMIC_DRAW);
+    this.gl.bufferData(this.gl.ARRAY_BUFFER, rects, this.usage);
+    if (colors !== void 0) this.colorsInput = colors;
+    const colorArr = this.buildColors(n);
+    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffers[2]);
+    this.gl.bufferData(this.gl.ARRAY_BUFFER, colorArr, this.usage);
   }
   bounds() {
     if (this.count === 0) return null;
@@ -476,7 +512,6 @@ var BarLayer = class {
     const gl = state.gl;
     gl.useProgram(this.program);
     setTransformUniforms(gl, this.uniforms, state.x, state.y, this.xRef, this.yRef);
-    gl.uniform4f(this.uniforms.uColor, this.color[0], this.color[1], this.color[2], this.color[3]);
     gl.bindVertexArray(this.vao);
     gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, this.count);
     gl.bindVertexArray(null);
@@ -719,15 +754,39 @@ var BoxLayer = class {
     this.yRef = 0;
     this.xBounds = [0, 0];
     this.yBounds = [0, 0];
+    this.triCount = 0;
+    this.lineStart = 0;
+    this.lineCount = 0;
+    this.pointStart = 0;
+    this.pointCount = 0;
     this.id = `box-${counter3++}`;
     this.gl = gl;
     this.program = getProgram3(gl);
+    this.usage = bufferUsage(gl, opts.renderType);
     this.yAxis = opts.yAxis ?? "y";
-    const groups = opts.groups;
-    const width = opts.width ?? 0.6;
-    const hw = width / 2;
-    const showBox = opts.box !== false;
-    const showViolin = opts.violin === true;
+    this.width = opts.width ?? 0.6;
+    this.showBox = opts.box !== false;
+    this.showViolin = opts.violin === true;
+    const all = this.build(opts.groups);
+    const vao = gl.createVertexArray();
+    const buffer = gl.createBuffer();
+    this.vao = vao;
+    this.buffer = buffer;
+    gl.bindVertexArray(vao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, all, this.usage);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 24, 0);
+    gl.enableVertexAttribArray(1);
+    gl.vertexAttribPointer(1, 4, gl.FLOAT, false, 24, 8);
+    gl.bindVertexArray(null);
+    this.uniforms = uniformLocations(gl, this.program, [...TRANSFORM_UNIFORMS, "uPointSize", "uIsPoint"]);
+  }
+  /** Build box/whisker/violin geometry from the groups; sets refs, bounds and draw ranges. */
+  build(groups) {
+    const hw = this.width / 2;
+    const showBox = this.showBox;
+    const showViolin = this.showViolin;
     this.xRef = groups.length ? groups[0].position : 0;
     this.yRef = groups.length && groups[0].values.length ? groups[0].values[0] : 0;
     const tris = new Mesh();
@@ -812,25 +871,19 @@ var BoxLayer = class {
     }
     this.xBounds = [minX, maxX];
     this.yBounds = [minY, maxY];
-    const all = [...tris.data, ...lines.data, ...points.data];
     this.triCount = tris.count;
     this.lineStart = tris.count;
     this.lineCount = lines.count;
     this.pointStart = tris.count + lines.count;
     this.pointCount = points.count;
-    const vao = gl.createVertexArray();
-    const buffer = gl.createBuffer();
-    this.vao = vao;
-    this.buffer = buffer;
-    gl.bindVertexArray(vao);
-    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(all), gl.STATIC_DRAW);
-    gl.enableVertexAttribArray(0);
-    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 24, 0);
-    gl.enableVertexAttribArray(1);
-    gl.vertexAttribPointer(1, 4, gl.FLOAT, false, 24, 8);
-    gl.bindVertexArray(null);
-    this.uniforms = uniformLocations(gl, this.program, [...TRANSFORM_UNIFORMS, "uPointSize", "uIsPoint"]);
+    return new Float32Array([...tris.data, ...lines.data, ...points.data]);
+  }
+  /** Replace the box groups and rebuild the geometry (for streaming). */
+  setData(groups, width) {
+    if (width != null) this.width = width;
+    const all = this.build(groups);
+    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffer);
+    this.gl.bufferData(this.gl.ARRAY_BUFFER, all, this.usage);
   }
   bounds() {
     if (this.triCount + this.lineCount + this.pointCount === 0) return null;
@@ -931,6 +984,18 @@ var counter4 = 0;
 var CandlestickLayer = class {
   constructor(gl, opts) {
     this.buffers = [];
+    /** Body width in data units (median-derived unless the user fixed it). */
+    this.bodyWidth = 1;
+    // Retained OHLC (plain arrays so streaming can mutate/grow in place).
+    this.xs = [];
+    this.os = [];
+    this.hs = [];
+    this.ls = [];
+    this.cs = [];
+    this.rects = new Float32Array(0);
+    this.wicks = new Float32Array(0);
+    this.colors = new Float32Array(0);
+    this.count = 0;
     this.xRef = 0;
     this.yRef = 0;
     this.xBounds = [0, 0];
@@ -941,41 +1006,13 @@ var CandlestickLayer = class {
     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];
+    this.usage = bufferUsage(gl, opts.renderType);
+    this.up = toColor2(opts.upColor ?? "#26a69a");
+    this.down = toColor2(opts.downColor ?? "#ef5350");
+    this.colorCss = toColorCss(this.up);
+    this.explicitWidth = opts.width;
+    this.ingest(opts);
+    this.rebuild();
     const cornerRect = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, cornerRect);
     gl.bufferData(gl.ARRAY_BUFFER, RECT_CORNERS, gl.STATIC_DRAW);
@@ -984,13 +1021,13 @@ var CandlestickLayer = class {
     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);
+    gl.bufferData(gl.ARRAY_BUFFER, this.rects, this.usage);
     const wickBuf = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, wickBuf);
-    gl.bufferData(gl.ARRAY_BUFFER, wicks, gl.STATIC_DRAW);
+    gl.bufferData(gl.ARRAY_BUFFER, this.wicks, this.usage);
     const colorBuf = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, colorBuf);
-    gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
+    gl.bufferData(gl.ARRAY_BUFFER, this.colors, this.usage);
     this.buffers = [cornerRect, cornerSeg, rectBuf, wickBuf, colorBuf];
     this.bodyVao = gl.createVertexArray();
     gl.bindVertexArray(this.bodyVao);
@@ -1022,6 +1059,112 @@ var CandlestickLayer = class {
     this.uBody = uniformLocations(gl, this.progs.body, [...TRANSFORM_UNIFORMS]);
     this.uWick = uniformLocations(gl, this.progs.wick, [...TRANSFORM_UNIFORMS, "uResolution", "uWidth"]);
   }
+  /** Copy the incoming OHLC arrays into the retained plain arrays. */
+  ingest(d) {
+    const n = Math.min(d.x.length, d.open.length, d.high.length, d.low.length, d.close.length);
+    this.xs = Array.from({ length: n }, (_, i) => d.x[i]);
+    this.os = Array.from({ length: n }, (_, i) => d.open[i]);
+    this.hs = Array.from({ length: n }, (_, i) => d.high[i]);
+    this.ls = Array.from({ length: n }, (_, i) => d.low[i]);
+    this.cs = Array.from({ length: n }, (_, i) => d.close[i]);
+    if (d.width != null) this.explicitWidth = d.width;
+  }
+  /** Write candle `i`'s body rect, wick segment and up/down color into the arrays. */
+  emitCandle(i) {
+    const cx = this.xs[i], o = this.os[i], h = this.hs[i], l = this.ls[i], c = this.cs[i];
+    const x0 = cx - this.bodyWidth / 2, x1 = cx + this.bodyWidth / 2;
+    const r = this.rects, wk = this.wicks, col = this.colors;
+    r[i * 4] = x0 - this.xRef;
+    r[i * 4 + 1] = o - this.yRef;
+    r[i * 4 + 2] = x1 - this.xRef;
+    r[i * 4 + 3] = c - this.yRef;
+    wk[i * 4] = cx - this.xRef;
+    wk[i * 4 + 1] = l - this.yRef;
+    wk[i * 4 + 2] = cx - this.xRef;
+    wk[i * 4 + 3] = h - this.yRef;
+    const cc = c >= o ? this.up : this.down;
+    col[i * 4] = cc[0];
+    col[i * 4 + 1] = cc[1];
+    col[i * 4 + 2] = cc[2];
+    col[i * 4 + 3] = cc[3];
+  }
+  /** Recompute width/refs/bounds and refill the vertex arrays from the retained OHLC. */
+  rebuild() {
+    const n = this.xs.length;
+    this.count = n;
+    this.bodyWidth = this.explicitWidth ?? medianSpacing2(this.xs, n) * 0.7;
+    this.rects = new Float32Array(n * 4);
+    this.wicks = new Float32Array(n * 4);
+    this.colors = new Float32Array(n * 4);
+    this.xRef = n > 0 ? this.xs[0] : 0;
+    this.yRef = n > 0 ? this.os[0] : 0;
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+    for (let i = 0; i < n; i++) {
+      this.emitCandle(i);
+      minX = Math.min(minX, this.xs[i] - this.bodyWidth / 2);
+      maxX = Math.max(maxX, this.xs[i] + this.bodyWidth / 2);
+      minY = Math.min(minY, this.ls[i]);
+      maxY = Math.max(maxY, this.hs[i]);
+    }
+    this.xBounds = n > 0 ? [minX, maxX] : [0, 0];
+    this.yBounds = n > 0 ? [minY, maxY] : [0, 0];
+  }
+  /** Re-upload all three per-candle buffers (after a full rebuild). */
+  upload() {
+    const gl = this.gl;
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[2]);
+    gl.bufferData(gl.ARRAY_BUFFER, this.rects, this.usage);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[3]);
+    gl.bufferData(gl.ARRAY_BUFFER, this.wicks, this.usage);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[4]);
+    gl.bufferData(gl.ARRAY_BUFFER, this.colors, this.usage);
+  }
+  /** Replace every candle and re-upload (for streaming a whole new window). */
+  setData(data) {
+    this.ingest(data);
+    this.rebuild();
+    this.upload();
+  }
+  /**
+   * Append one new candle (grows the series). Prefer {@link updateLast} for the
+   * in-progress candle and `appendCandle` only when a bar closes and a new one opens.
+   */
+  appendCandle(c) {
+    this.xs.push(c.x);
+    this.os.push(c.open);
+    this.hs.push(c.high);
+    this.ls.push(c.low);
+    this.cs.push(c.close);
+    this.rebuild();
+    this.upload();
+  }
+  /**
+   * Update the most recent candle in place — the cheap hot path for a live
+   * (forming) bar. Only that candle's 12 floats are re-uploaded; bounds are
+   * extended (never shrunk) to include it. No-op when the series is empty.
+   */
+  updateLast(c) {
+    const i = this.xs.length - 1;
+    if (i < 0) return;
+    this.xs[i] = c.x;
+    this.os[i] = c.open;
+    this.hs[i] = c.high;
+    this.ls[i] = c.low;
+    this.cs[i] = c.close;
+    this.emitCandle(i);
+    const gl = this.gl, off = i * 4;
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[2]);
+    gl.bufferSubData(gl.ARRAY_BUFFER, off * 4, this.rects.subarray(off, off + 4));
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[3]);
+    gl.bufferSubData(gl.ARRAY_BUFFER, off * 4, this.wicks.subarray(off, off + 4));
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[4]);
+    gl.bufferSubData(gl.ARRAY_BUFFER, off * 4, this.colors.subarray(off, off + 4));
+    this.xBounds = [
+      Math.min(this.xBounds[0], c.x - this.bodyWidth / 2),
+      Math.max(this.xBounds[1], c.x + this.bodyWidth / 2)
+    ];
+    this.yBounds = [Math.min(this.yBounds[0], c.low), Math.max(this.yBounds[1], c.high)];
+  }
   bounds() {
     if (this.count === 0) return null;
     return { x: this.xBounds, y: this.yBounds };
@@ -1048,9 +1191,238 @@ var CandlestickLayer = class {
     for (const b of this.buffers) this.gl.deleteBuffer(b);
   }
 };
-function toColor(input) {
+function toColor2(input) {
+  return Array.isArray(input) ? input : parseColor(input);
+}
+
+// src/layers/ohlc.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
+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 FRAG5 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+in vec4 vColor;
+out vec4 outColor;
+void main() { outColor = vec4(vColor.rgb * vColor.a, vColor.a); }`
+);
+var SEG_CORNERS2 = new Float32Array([0, -1, 1, -1, 1, 1, 0, -1, 1, 1, 0, 1]);
+var SEGS_PER_BAR = 3;
+var programCache4 = /* @__PURE__ */ new WeakMap();
+function getProgram4(gl) {
+  let p = programCache4.get(gl);
+  if (!p) {
+    p = createProgram(gl, SEG_VERT, FRAG5);
+    programCache4.set(gl, p);
+  }
+  return p;
+}
+function medianSpacing3(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;
+}
+function toColor3(input) {
   return Array.isArray(input) ? input : parseColor(input);
 }
+var counter5 = 0;
+var OhlcLayer = class {
+  constructor(gl, opts) {
+    this.buffers = [];
+    this.barWidth = 1;
+    this.xs = [];
+    this.os = [];
+    this.hs = [];
+    this.ls = [];
+    this.cs = [];
+    this.segs = new Float32Array(0);
+    this.colors = new Float32Array(0);
+    this.count = 0;
+    // number of bars
+    this.xRef = 0;
+    this.yRef = 0;
+    this.xBounds = [0, 0];
+    this.yBounds = [0, 0];
+    this.id = `ohlc-${counter5++}`;
+    this.gl = gl;
+    this.program = getProgram4(gl);
+    this.name = opts.name ?? this.id;
+    this.yAxis = opts.yAxis ?? "y";
+    this.lineWidth = opts.lineWidth ?? 1.5;
+    this.usage = bufferUsage(gl, opts.renderType);
+    this.up = toColor3(opts.upColor ?? "#26a69a");
+    this.down = toColor3(opts.downColor ?? "#ef5350");
+    this.colorCss = toColorCss(this.up);
+    this.explicitWidth = opts.width;
+    this.ingest(opts);
+    this.rebuild();
+    const vao = gl.createVertexArray();
+    this.vao = vao;
+    gl.bindVertexArray(vao);
+    const cornerBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, cornerBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, SEG_CORNERS2, gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+    const segBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, segBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, this.segs, this.usage);
+    gl.enableVertexAttribArray(1);
+    gl.vertexAttribPointer(1, 4, gl.FLOAT, false, 0, 0);
+    gl.vertexAttribDivisor(1, 1);
+    const colorBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, this.colors, this.usage);
+    gl.enableVertexAttribArray(2);
+    gl.vertexAttribPointer(2, 4, gl.FLOAT, false, 0, 0);
+    gl.vertexAttribDivisor(2, 1);
+    gl.bindVertexArray(null);
+    this.buffers = [cornerBuf, segBuf, colorBuf];
+    this.uniforms = uniformLocations(gl, this.program, [...TRANSFORM_UNIFORMS, "uResolution", "uWidth"]);
+  }
+  ingest(d) {
+    const n = Math.min(d.x.length, d.open.length, d.high.length, d.low.length, d.close.length);
+    this.xs = Array.from({ length: n }, (_, i) => d.x[i]);
+    this.os = Array.from({ length: n }, (_, i) => d.open[i]);
+    this.hs = Array.from({ length: n }, (_, i) => d.high[i]);
+    this.ls = Array.from({ length: n }, (_, i) => d.low[i]);
+    this.cs = Array.from({ length: n }, (_, i) => d.close[i]);
+    if (d.width != null) this.explicitWidth = d.width;
+  }
+  /** Write bar `i`'s three segments (+ colors) at instance base `i * SEGS_PER_BAR`. */
+  emitBar(i) {
+    const cx = this.xs[i], o = this.os[i], h = this.hs[i], l = this.ls[i], c = this.cs[i];
+    const half = this.barWidth / 2;
+    const s = this.segs, col = this.colors;
+    const b = i * SEGS_PER_BAR * 4;
+    s[b] = cx - this.xRef;
+    s[b + 1] = l - this.yRef;
+    s[b + 2] = cx - this.xRef;
+    s[b + 3] = h - this.yRef;
+    s[b + 4] = cx - half - this.xRef;
+    s[b + 5] = o - this.yRef;
+    s[b + 6] = cx - this.xRef;
+    s[b + 7] = o - this.yRef;
+    s[b + 8] = cx - this.xRef;
+    s[b + 9] = c - this.yRef;
+    s[b + 10] = cx + half - this.xRef;
+    s[b + 11] = c - this.yRef;
+    const cc = c >= o ? this.up : this.down;
+    for (let k = 0; k < SEGS_PER_BAR; k++) {
+      const o4 = (i * SEGS_PER_BAR + k) * 4;
+      col[o4] = cc[0];
+      col[o4 + 1] = cc[1];
+      col[o4 + 2] = cc[2];
+      col[o4 + 3] = cc[3];
+    }
+  }
+  rebuild() {
+    const n = this.xs.length;
+    this.count = n;
+    this.barWidth = this.explicitWidth ?? medianSpacing3(this.xs, n) * 0.7;
+    this.segs = new Float32Array(n * SEGS_PER_BAR * 4);
+    this.colors = new Float32Array(n * SEGS_PER_BAR * 4);
+    this.xRef = n > 0 ? this.xs[0] : 0;
+    this.yRef = n > 0 ? this.os[0] : 0;
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+    for (let i = 0; i < n; i++) {
+      this.emitBar(i);
+      minX = Math.min(minX, this.xs[i] - this.barWidth / 2);
+      maxX = Math.max(maxX, this.xs[i] + this.barWidth / 2);
+      minY = Math.min(minY, this.ls[i]);
+      maxY = Math.max(maxY, this.hs[i]);
+    }
+    this.xBounds = n > 0 ? [minX, maxX] : [0, 0];
+    this.yBounds = n > 0 ? [minY, maxY] : [0, 0];
+  }
+  upload() {
+    const gl = this.gl;
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[1]);
+    gl.bufferData(gl.ARRAY_BUFFER, this.segs, this.usage);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[2]);
+    gl.bufferData(gl.ARRAY_BUFFER, this.colors, this.usage);
+  }
+  /** Replace every bar and re-upload (for streaming a whole new window). */
+  setData(data) {
+    this.ingest(data);
+    this.rebuild();
+    this.upload();
+  }
+  /** Append one new bar (grows the series). */
+  appendCandle(c) {
+    this.xs.push(c.x);
+    this.os.push(c.open);
+    this.hs.push(c.high);
+    this.ls.push(c.low);
+    this.cs.push(c.close);
+    this.rebuild();
+    this.upload();
+  }
+  /** Update the most recent bar in place — the cheap hot path for a live bar. */
+  updateLast(c) {
+    const i = this.xs.length - 1;
+    if (i < 0) return;
+    this.xs[i] = c.x;
+    this.os[i] = c.open;
+    this.hs[i] = c.high;
+    this.ls[i] = c.low;
+    this.cs[i] = c.close;
+    this.emitBar(i);
+    const gl = this.gl, off = i * SEGS_PER_BAR * 4;
+    const span = SEGS_PER_BAR * 4;
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[1]);
+    gl.bufferSubData(gl.ARRAY_BUFFER, off * 4, this.segs.subarray(off, off + span));
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[2]);
+    gl.bufferSubData(gl.ARRAY_BUFFER, off * 4, this.colors.subarray(off, off + span));
+    this.xBounds = [
+      Math.min(this.xBounds[0], c.x - this.barWidth / 2),
+      Math.max(this.xBounds[1], c.x + this.barWidth / 2)
+    ];
+    this.yBounds = [Math.min(this.yBounds[0], c.low), Math.max(this.yBounds[1], c.high)];
+  }
+  bounds() {
+    if (this.count === 0) return null;
+    return { x: this.xBounds, y: this.yBounds };
+  }
+  draw(state) {
+    if (this.count === 0) return;
+    const gl = state.gl;
+    gl.useProgram(this.program);
+    setTransformUniforms(gl, this.uniforms, state.x, state.y, this.xRef, this.yRef);
+    gl.uniform2f(this.uniforms.uResolution, state.pixelWidth, state.pixelHeight);
+    gl.uniform1f(this.uniforms.uWidth, this.lineWidth * state.dpr);
+    gl.bindVertexArray(this.vao);
+    gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, this.count * SEGS_PER_BAR);
+    gl.bindVertexArray(null);
+  }
+  dispose() {
+    this.gl.deleteVertexArray(this.vao);
+    for (const b of this.buffers) this.gl.deleteBuffer(b);
+  }
+};
 
 // src/color/colormap.ts
 var ANCHORS = {
@@ -1136,7 +1508,7 @@ ${TRANSFORM_GLSL}
 out vec4 vColor;
 void main() { vColor = aColor; gl_Position = vec4(dataToClip(aPos), 0.0, 1.0); }`
 );
-var FRAG5 = (
+var FRAG6 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -1162,37 +1534,61 @@ var CASES = [
   [[0, 3]],
   []
 ];
-var programCache4 = /* @__PURE__ */ new WeakMap();
-function getProgram4(gl) {
-  let p = programCache4.get(gl);
+var programCache5 = /* @__PURE__ */ new WeakMap();
+function getProgram5(gl) {
+  let p = programCache5.get(gl);
   if (!p) {
-    p = createProgram(gl, VERT4, FRAG5);
-    programCache4.set(gl, p);
+    p = createProgram(gl, VERT4, FRAG6);
+    programCache5.set(gl, p);
   }
   return p;
 }
-var counter5 = 0;
+var counter6 = 0;
 var ContourLayer = class {
   constructor(gl, opts) {
-    this.id = `contour-${counter5++}`;
+    this.vertexCount = 0;
+    this.id = `contour-${counter6++}`;
     this.gl = gl;
-    this.program = getProgram4(gl);
+    this.program = getProgram5(gl);
+    this.usage = bufferUsage(gl, opts.renderType);
     this.yAxis = opts.yAxis ?? "y";
     this.ext = opts.extent;
-    const { cols, rows, values } = opts;
-    const [x0, x1] = opts.extent.x, [y0, y1] = opts.extent.y;
+    this.cols = opts.cols;
+    this.rows = opts.rows;
+    const [x0, y0] = [opts.extent.x[0], opts.extent.y[0]];
     this.xRef = x0;
     this.yRef = y0;
+    this.levelsOpt = opts.levels;
+    this.cmap = colormap(opts.colormap ?? "viridis");
+    this.fixedColor = opts.color != null ? Array.isArray(opts.color) ? opts.color : parseColor(opts.color) : null;
+    const data = this.build(opts.values, opts.cols, opts.rows);
+    const vao = gl.createVertexArray();
+    const buffer = gl.createBuffer();
+    this.vao = vao;
+    this.buffer = buffer;
+    gl.bindVertexArray(vao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, data, this.usage);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 24, 0);
+    gl.enableVertexAttribArray(1);
+    gl.vertexAttribPointer(1, 4, gl.FLOAT, false, 24, 8);
+    gl.bindVertexArray(null);
+    this.uniforms = uniformLocations(gl, this.program, [...TRANSFORM_UNIFORMS]);
+  }
+  /** Marching-squares the scalar field into iso-line segments; sets vertexCount. */
+  build(values, cols, rows) {
+    const [x0, x1] = this.ext.x, [y0, y1] = this.ext.y;
     let vmin = Infinity, vmax = -Infinity;
     for (let i = 0; i < values.length; i++) {
       const v = values[i];
       if (v < vmin) vmin = v;
       if (v > vmax) vmax = v;
     }
-    const count = typeof opts.levels === "number" ? opts.levels : 8;
-    const levels = Array.isArray(opts.levels) ? opts.levels : Array.from({ length: count }, (_, i) => vmin + (vmax - vmin) * (i + 1) / (count + 1));
-    const cmap = colormap(opts.colormap ?? "viridis");
-    const fixed = opts.color != null ? Array.isArray(opts.color) ? opts.color : parseColor(opts.color) : null;
+    const count = typeof this.levelsOpt === "number" ? this.levelsOpt : 8;
+    const levels = Array.isArray(this.levelsOpt) ? this.levelsOpt : Array.from({ length: count }, (_, i) => vmin + (vmax - vmin) * (i + 1) / (count + 1));
+    const cmap = this.cmap;
+    const fixed = this.fixedColor;
     const gx = (c) => x0 + c / (cols - 1) * (x1 - x0) - this.xRef;
     const gy = (r) => y0 + r / (rows - 1) * (y1 - y0) - this.yRef;
     const at = (c, r) => values[r * cols + c];
@@ -1223,19 +1619,15 @@ var ContourLayer = class {
       }
     }
     this.vertexCount = data.length / 6;
-    const vao = gl.createVertexArray();
-    const buffer = gl.createBuffer();
-    this.vao = vao;
-    this.buffer = buffer;
-    gl.bindVertexArray(vao);
-    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
-    gl.enableVertexAttribArray(0);
-    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 24, 0);
-    gl.enableVertexAttribArray(1);
-    gl.vertexAttribPointer(1, 4, gl.FLOAT, false, 24, 8);
-    gl.bindVertexArray(null);
-    this.uniforms = uniformLocations(gl, this.program, [...TRANSFORM_UNIFORMS]);
+    return new Float32Array(data);
+  }
+  /** Replace the scalar field and recompute the iso lines (for streaming). */
+  setData(values, cols = this.cols, rows = this.rows) {
+    this.cols = cols;
+    this.rows = rows;
+    const data = this.build(values, cols, rows);
+    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffer);
+    this.gl.bufferData(this.gl.ARRAY_BUFFER, data, this.usage);
   }
   bounds() {
     return { x: this.ext.x, y: this.ext.y };
@@ -1256,7 +1648,7 @@ var ContourLayer = class {
 };
 
 // src/layers/errorbar.ts
-var SEG_VERT = (
+var SEG_VERT2 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -1309,14 +1701,14 @@ 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 SEG_CORNERS3 = 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),
+      seg: createProgram(gl, SEG_VERT2, SOLID_FRAG),
       cap: createProgram(gl, CAP_VERT, SOLID_FRAG),
       band: createProgram(gl, BAND_VERT, SOLID_FRAG)
     };
@@ -1325,7 +1717,7 @@ function programs2(gl) {
   return p;
 }
 var errAt = (e, i) => e == null ? 0 : typeof e === "number" ? e : e[i] ?? 0;
-var counter6 = 0;
+var counter7 = 0;
 var ErrorBarLayer = class {
   constructor(gl, opts) {
     this.buffers = [];
@@ -1336,7 +1728,7 @@ var ErrorBarLayer = class {
     this.yRef = 0;
     this.xBounds = [0, 0];
     this.yBounds = [0, 0];
-    this.id = `errorbar-${counter6++}`;
+    this.id = `errorbar-${counter7++}`;
     this.gl = gl;
     this.progs = programs2(gl);
     const colorInput = opts.color ?? "#3b82f6";
@@ -1349,62 +1741,23 @@ var ErrorBarLayer = class {
     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;
+    this.usage = bufferUsage(gl, opts.renderType);
+    const { segs, caps, band } = this.build(opts);
     const cornerSeg = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, cornerSeg);
-    gl.bufferData(gl.ARRAY_BUFFER, SEG_CORNERS2, gl.STATIC_DRAW);
+    gl.bufferData(gl.ARRAY_BUFFER, SEG_CORNERS3, 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);
+    gl.bufferData(gl.ARRAY_BUFFER, segs, this.usage);
     const capBuf = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, capBuf);
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(caps), gl.STATIC_DRAW);
+    gl.bufferData(gl.ARRAY_BUFFER, caps, this.usage);
     const bandBuf = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, bandBuf);
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(band), gl.STATIC_DRAW);
+    gl.bufferData(gl.ARRAY_BUFFER, band, this.usage);
     this.buffers = [cornerSeg, cornerQuad, segBuf, capBuf, bandBuf];
     this.segVao = gl.createVertexArray();
     gl.bindVertexArray(this.segVao);
@@ -1434,6 +1787,62 @@ var ErrorBarLayer = class {
     this.uCap = uniformLocations(gl, this.progs.cap, [...TRANSFORM_UNIFORMS, "uColor", "uResolution", "uCapSize", "uWidth"]);
     this.uBand = uniformLocations(gl, this.progs.band, [...TRANSFORM_UNIFORMS, "uColor"]);
   }
+  /** Recompute refs/bounds/counts and the whisker/cap/band vertex arrays from new data. */
+  build(d) {
+    const n = Math.min(d.x.length, d.y.length);
+    this.xRef = n > 0 ? d.x[0] : 0;
+    this.yRef = n > 0 ? d.y[0] : 0;
+    const segs = [];
+    const caps = [];
+    const lowPts = [];
+    const highPts = [];
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+    const hasY = d.yerr != null || d.yerrLow != null || d.yerrHigh != null;
+    const hasX = d.xerr != null;
+    for (let i = 0; i < n; i++) {
+      const x = d.x[i], y = d.y[i];
+      const eyLo = d.yerrLow != null ? errAt(d.yerrLow, i) : errAt(d.yerr, i);
+      const eyHi = d.yerrHigh != null ? errAt(d.yerrHigh, i) : errAt(d.yerr, i);
+      const ex = errAt(d.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;
+    return { segs: new Float32Array(segs), caps: new Float32Array(caps), band: new Float32Array(band) };
+  }
+  /** Replace the data and re-upload (for streaming). */
+  setData(data) {
+    const gl = this.gl;
+    const { segs, caps, band } = this.build(data);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[2]);
+    gl.bufferData(gl.ARRAY_BUFFER, segs, this.usage);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[3]);
+    gl.bufferData(gl.ARRAY_BUFFER, caps, this.usage);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[4]);
+    gl.bufferData(gl.ARRAY_BUFFER, band, this.usage);
+  }
   bounds() {
     if (this.segCount === 0 && this.bandVerts === 0) return null;
     return { x: this.xBounds, y: this.yBounds };
@@ -1479,6 +1888,64 @@ var ErrorBarLayer = class {
   }
 };
 
+// src/graph/force.ts
+function forceLayout(nodeCount, edges, opts = {}) {
+  const n = nodeCount;
+  const x = new Float64Array(n);
+  const y = new Float64Array(n);
+  for (let i = 0; i < n; i++) {
+    const a = i / n * Math.PI * 2;
+    x[i] = Math.cos(a);
+    y[i] = Math.sin(a);
+  }
+  if (n < 2) return { x, y };
+  const iterations = opts.iterations ?? 300;
+  const area2 = opts.area ?? 1;
+  const k = Math.sqrt(area2 / n);
+  const gravity = opts.gravity ?? 0.05;
+  const dispX = new Float64Array(n);
+  const dispY = new Float64Array(n);
+  let temp = 0.1;
+  for (let it = 0; it < iterations; it++) {
+    dispX.fill(0);
+    dispY.fill(0);
+    for (let i = 0; i < n; i++) {
+      for (let j = i + 1; j < n; j++) {
+        const dx = x[i] - x[j];
+        const dy = y[i] - y[j];
+        const d = Math.hypot(dx, dy) || 1e-6;
+        const f = k * k / d;
+        const ux = dx / d, uy = dy / d;
+        dispX[i] += ux * f;
+        dispY[i] += uy * f;
+        dispX[j] -= ux * f;
+        dispY[j] -= uy * f;
+      }
+    }
+    for (const [a, b] of edges) {
+      const dx = x[a] - x[b];
+      const dy = y[a] - y[b];
+      const d = Math.hypot(dx, dy) || 1e-6;
+      const f = d * d / k;
+      const ux = dx / d, uy = dy / d;
+      dispX[a] -= ux * f;
+      dispY[a] -= uy * f;
+      dispX[b] += ux * f;
+      dispY[b] += uy * f;
+    }
+    for (let i = 0; i < n; i++) {
+      dispX[i] -= x[i] * gravity;
+      dispY[i] -= y[i] * gravity;
+      const d = Math.hypot(dispX[i], dispY[i]) || 1e-6;
+      const lim = Math.min(d, temp);
+      x[i] += dispX[i] / d * lim;
+      y[i] += dispY[i] / d * lim;
+    }
+    temp *= 0.99;
+  }
+  return { x, y };
+}
+
 // src/layers/graph.ts
 var EDGE_VERT = (
   /* glsl */
@@ -1522,26 +1989,29 @@ void main() {
   outColor = vec4(uColor.rgb * uColor.a * a, uColor.a * a);
 }`
 );
-var programCache5 = /* @__PURE__ */ new WeakMap();
+var programCache6 = /* @__PURE__ */ new WeakMap();
 function getPrograms(gl) {
-  let p = programCache5.get(gl);
+  let p = programCache6.get(gl);
   if (!p) {
     p = { edge: createProgram(gl, EDGE_VERT, SOLID_FRAG2), node: createProgram(gl, NODE_VERT, NODE_FRAG) };
-    programCache5.set(gl, p);
+    programCache6.set(gl, p);
   }
   return p;
 }
-var counter7 = 0;
+var counter8 = 0;
 var GraphLayer = class {
   constructor(gl, opts) {
     this.buffers = [];
+    this.nodeCount = 0;
+    this.edgeVerts = 0;
     this.xRef = 0;
     this.yRef = 0;
     this.xBounds = [0, 0];
     this.yBounds = [0, 0];
-    this.id = `graph-${counter7++}`;
+    this.id = `graph-${counter8++}`;
     this.gl = gl;
     this.progs = getPrograms(gl);
+    this.usage = bufferUsage(gl, opts.renderType);
     this.name = opts.name ?? this.id;
     this.yAxis = opts.yAxis ?? "y";
     const nc = opts.nodeColor ?? "#60a5fa";
@@ -1550,14 +2020,36 @@ var GraphLayer = class {
     const ec = opts.edgeColor ?? "rgba(148,163,184,0.5)";
     this.edgeColor = Array.isArray(ec) ? ec : parseColor(ec);
     this.nodeSize = opts.nodeSize ?? 10;
-    const n = Math.min(opts.x.length, opts.y.length);
+    const { nodePos, edgePos } = this.build(opts.x, opts.y, opts.edges);
+    const nodeBuf = gl.createBuffer();
+    const edgeBuf = gl.createBuffer();
+    this.buffers = [nodeBuf, edgeBuf];
+    this.nodeVao = gl.createVertexArray();
+    gl.bindVertexArray(this.nodeVao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, nodeBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, nodePos, this.usage);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+    this.edgeVao = gl.createVertexArray();
+    gl.bindVertexArray(this.edgeVao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, edgeBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, edgePos, this.usage);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+    gl.bindVertexArray(null);
+    this.edgeUniforms = uniformLocations(gl, this.progs.edge, [...TRANSFORM_UNIFORMS, "uColor"]);
+    this.nodeUniforms = uniformLocations(gl, this.progs.node, [...TRANSFORM_UNIFORMS, "uColor", "uSize"]);
+  }
+  /** Build node/edge vertex arrays from positions + edges; sets counts, refs and bounds. */
+  build(x, y, edges) {
+    const n = Math.min(x.length, y.length);
     this.nodeCount = n;
-    this.xRef = n > 0 ? opts.x[0] : 0;
-    this.yRef = n > 0 ? opts.y[0] : 0;
+    this.xRef = n > 0 ? x[0] : 0;
+    this.yRef = n > 0 ? y[0] : 0;
     const nodePos = new Float32Array(n * 2);
     let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
     for (let i = 0; i < n; i++) {
-      const px = opts.x[i], py = opts.y[i];
+      const px = x[i], py = y[i];
       nodePos[i * 2] = px - this.xRef;
       nodePos[i * 2 + 1] = py - this.yRef;
       if (px < minX) minX = px;
@@ -1568,29 +2060,34 @@ var GraphLayer = class {
     this.xBounds = [minX, maxX];
     this.yBounds = [minY, maxY];
     const edgePos = [];
-    for (const [a, b] of opts.edges) {
+    for (const [a, b] of edges) {
       if (a < 0 || b < 0 || a >= n || b >= n) continue;
-      edgePos.push(opts.x[a] - this.xRef, opts.y[a] - this.yRef, opts.x[b] - this.xRef, opts.y[b] - this.yRef);
+      edgePos.push(x[a] - this.xRef, y[a] - this.yRef, x[b] - this.xRef, y[b] - this.yRef);
     }
     this.edgeVerts = edgePos.length / 2;
-    const nodeBuf = gl.createBuffer();
-    const edgeBuf = gl.createBuffer();
-    this.buffers = [nodeBuf, edgeBuf];
-    this.nodeVao = gl.createVertexArray();
-    gl.bindVertexArray(this.nodeVao);
-    gl.bindBuffer(gl.ARRAY_BUFFER, nodeBuf);
-    gl.bufferData(gl.ARRAY_BUFFER, nodePos, gl.STATIC_DRAW);
-    gl.enableVertexAttribArray(0);
-    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
-    this.edgeVao = gl.createVertexArray();
-    gl.bindVertexArray(this.edgeVao);
-    gl.bindBuffer(gl.ARRAY_BUFFER, edgeBuf);
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(edgePos), gl.STATIC_DRAW);
-    gl.enableVertexAttribArray(0);
-    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
-    gl.bindVertexArray(null);
-    this.edgeUniforms = uniformLocations(gl, this.progs.edge, [...TRANSFORM_UNIFORMS, "uColor"]);
-    this.nodeUniforms = uniformLocations(gl, this.progs.node, [...TRANSFORM_UNIFORMS, "uColor", "uSize"]);
+    return { nodePos, edgePos: new Float32Array(edgePos) };
+  }
+  /**
+   * Replace nodes and edges (for streaming). When `x`/`y` are omitted, node
+   * positions are recomputed with the package's force layout from the edges.
+   */
+  setData(data) {
+    let x = data.x, y = data.y;
+    if (x == null || y == null) {
+      let nc = data.nodeCount ?? 0;
+      if (data.nodeCount == null) {
+        for (const [a, b] of data.edges) nc = Math.max(nc, a + 1, b + 1);
+      }
+      const laid = forceLayout(nc, data.edges);
+      x = laid.x;
+      y = laid.y;
+    }
+    const { nodePos, edgePos } = this.build(x, y, data.edges);
+    const gl = this.gl;
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[0]);
+    gl.bufferData(gl.ARRAY_BUFFER, nodePos, this.usage);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[1]);
+    gl.bufferData(gl.ARRAY_BUFFER, edgePos, this.usage);
   }
   bounds() {
     if (this.nodeCount === 0) return null;
@@ -1635,7 +2132,7 @@ void main() {
   gl_Position = vec4(dataToClip(aPos), 0.0, 1.0);
 }`
 );
-var FRAG6 = (
+var FRAG7 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -1647,60 +2144,41 @@ void main() {
   outColor = vec4(c.rgb * c.a, c.a);
 }`
 );
-var programCache6 = /* @__PURE__ */ new WeakMap();
-function getProgram5(gl) {
-  let p = programCache6.get(gl);
+var programCache7 = /* @__PURE__ */ new WeakMap();
+function getProgram6(gl) {
+  let p = programCache7.get(gl);
   if (!p) {
-    p = createProgram(gl, VERT5, FRAG6);
-    programCache6.set(gl, p);
+    p = createProgram(gl, VERT5, FRAG7);
+    programCache7.set(gl, p);
   }
   return p;
 }
-var counter8 = 0;
+var counter9 = 0;
 var HeatmapLayer = class {
   constructor(gl, opts) {
-    this.id = `heatmap-${counter8++}`;
+    this.id = `heatmap-${counter9++}`;
     this.gl = gl;
-    this.program = getProgram5(gl);
+    this.program = getProgram6(gl);
     this.yAxis = opts.yAxis ?? "y";
     this.ext = opts.extent;
     const [x0, x1] = opts.extent.x;
     const [y0, y1] = opts.extent.y;
     this.xRef = x0;
     this.yRef = y0;
-    const { cols, rows, values } = opts;
-    const lut = colormapLUT(opts.colormap ?? "viridis");
-    let lo = opts.domain?.[0] ?? Infinity;
-    let hi = opts.domain?.[1] ?? -Infinity;
-    if (!opts.domain) {
-      for (let i = 0; i < values.length; i++) {
-        const v = values[i];
-        if (v < lo) lo = v;
-        if (v > hi) hi = v;
-      }
-    }
-    const span = hi - lo || 1;
-    const pixels = new Uint8Array(cols * rows * 4);
-    for (let i = 0; i < cols * rows; i++) {
-      let t = (values[i] - lo) / span;
-      t = t <= 0 ? 0 : t >= 1 ? 1 : t;
-      const j = (t * 255 | 0) * 3;
-      pixels[i * 4] = lut[j] * 255 + 0.5 | 0;
-      pixels[i * 4 + 1] = lut[j + 1] * 255 + 0.5 | 0;
-      pixels[i * 4 + 2] = lut[j + 2] * 255 + 0.5 | 0;
-      pixels[i * 4 + 3] = 255;
-    }
+    this.lut = colormapLUT(opts.colormap ?? "viridis");
+    this.fixedDomain = opts.domain;
+    this.cols = opts.cols;
+    this.rows = opts.rows;
     const texture = gl.createTexture();
     this.texture = texture;
     gl.bindTexture(gl.TEXTURE_2D, texture);
-    gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
-    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, cols, rows, 0, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
     const filter = opts.smooth === false ? gl.NEAREST : gl.LINEAR;
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
     gl.bindTexture(gl.TEXTURE_2D, null);
+    this.uploadValues(opts.values, opts.cols, opts.rows);
     const data = new Float32Array([
       x0 - this.xRef,
       y0 - this.yRef,
@@ -1741,6 +2219,41 @@ var HeatmapLayer = class {
     gl.bindVertexArray(null);
     this.uniforms = uniformLocations(gl, this.program, [...TRANSFORM_UNIFORMS, "uTex"]);
   }
+  /** Bake a `cols*rows` value grid into the RGBA data texture via the colormap. */
+  uploadValues(values, cols, rows) {
+    const gl = this.gl;
+    const lut = this.lut;
+    let lo = this.fixedDomain?.[0] ?? Infinity;
+    let hi = this.fixedDomain?.[1] ?? -Infinity;
+    if (!this.fixedDomain) {
+      for (let i = 0; i < values.length; i++) {
+        const v = values[i];
+        if (v < lo) lo = v;
+        if (v > hi) hi = v;
+      }
+    }
+    const span = hi - lo || 1;
+    const pixels = new Uint8Array(cols * rows * 4);
+    for (let i = 0; i < cols * rows; i++) {
+      let t = (values[i] - lo) / span;
+      t = t <= 0 ? 0 : t >= 1 ? 1 : t;
+      const j = (t * 255 | 0) * 3;
+      pixels[i * 4] = lut[j] * 255 + 0.5 | 0;
+      pixels[i * 4 + 1] = lut[j + 1] * 255 + 0.5 | 0;
+      pixels[i * 4 + 2] = lut[j + 2] * 255 + 0.5 | 0;
+      pixels[i * 4 + 3] = 255;
+    }
+    gl.bindTexture(gl.TEXTURE_2D, this.texture);
+    gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, cols, rows, 0, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+  }
+  /** Replace the value grid and re-bake the data texture (for streaming). */
+  setData(values, cols = this.cols, rows = this.rows) {
+    this.cols = cols;
+    this.rows = rows;
+    this.uploadValues(values, cols, rows);
+  }
   bounds() {
     return { x: this.ext.x, y: this.ext.y };
   }
@@ -1778,7 +2291,7 @@ void main() {
   gl_Position = vec4(dataToClip(aCenter + aCorner * uRadius), 0.0, 1.0);
 }`
 );
-var FRAG7 = (
+var FRAG8 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -1797,46 +2310,79 @@ var HEX = (() => {
   }
   return new Float32Array(verts);
 })();
-var programCache7 = /* @__PURE__ */ new WeakMap();
-function getProgram6(gl) {
-  let p = programCache7.get(gl);
+var programCache8 = /* @__PURE__ */ new WeakMap();
+function getProgram7(gl) {
+  let p = programCache8.get(gl);
   if (!p) {
-    p = createProgram(gl, VERT6, FRAG7);
-    programCache7.set(gl, p);
+    p = createProgram(gl, VERT6, FRAG8);
+    programCache8.set(gl, p);
   }
   return p;
 }
-var counter9 = 0;
+var counter10 = 0;
 var HexbinLayer = class {
   constructor(gl, opts) {
     this.buffers = [];
+    this.radius = 1;
+    this.cellCount = 0;
     this.xRef = 0;
     this.yRef = 0;
     this.xBounds = [0, 0];
     this.yBounds = [0, 0];
-    this.id = `hexbin-${counter9++}`;
+    this.id = `hexbin-${counter10++}`;
     this.gl = gl;
-    this.program = getProgram6(gl);
+    this.program = getProgram7(gl);
+    this.usage = bufferUsage(gl, opts.renderType);
     this.yAxis = opts.yAxis ?? "y";
-    const n = Math.min(opts.x.length, opts.y.length);
+    this.cmap = colormap(opts.colormap ?? "viridis");
+    this.explicitRadius = opts.radius;
+    this.domain = opts.domain;
+    const { centers, colors } = this.build(opts.x, opts.y);
+    const vao = gl.createVertexArray();
+    this.vao = vao;
+    gl.bindVertexArray(vao);
+    const hexBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, hexBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, HEX, gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+    const centerBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, centerBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, centers, this.usage);
+    gl.enableVertexAttribArray(1);
+    gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 0, 0);
+    gl.vertexAttribDivisor(1, 1);
+    const colorBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, colors, this.usage);
+    gl.enableVertexAttribArray(2);
+    gl.vertexAttribPointer(2, 4, gl.FLOAT, false, 0, 0);
+    gl.vertexAttribDivisor(2, 1);
+    gl.bindVertexArray(null);
+    this.buffers = [hexBuf, centerBuf, colorBuf];
+    this.uniforms = uniformLocations(gl, this.program, [...TRANSFORM_UNIFORMS, "uRadius"]);
+  }
+  /** Bin the points into hex cells; sets radius, refs, bounds and cell count. */
+  build(x, y) {
+    const n = Math.min(x.length, y.length);
     let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
     for (let i = 0; i < n; i++) {
-      const x = opts.x[i], y = opts.y[i];
-      if (x < minX) minX = x;
-      if (x > maxX) maxX = x;
-      if (y < minY) minY = y;
-      if (y > maxY) maxY = y;
+      const px = x[i], py = y[i];
+      if (px < minX) minX = px;
+      if (px > maxX) maxX = px;
+      if (py < minY) minY = py;
+      if (py > maxY) maxY = py;
     }
     this.xBounds = [minX, maxX];
     this.yBounds = [minY, maxY];
-    const r = opts.radius ?? ((maxX - minX) / 30 || 1);
+    const r = this.explicitRadius ?? ((maxX - minX) / 30 || 1);
     this.radius = r;
     const dx = r * 2 * Math.sin(Math.PI / 3);
     const dy = r * 1.5;
     const cells = /* @__PURE__ */ new Map();
     let maxCount = 1;
     for (let i = 0; i < n; i++) {
-      const px = opts.x[i], py = opts.y[i];
+      const px = x[i], py = y[i];
       const pj = Math.round(py / dy);
       const pi = Math.round(px / dx - (pj & 1) / 2);
       const key = `${pi},${pj}`;
@@ -1853,44 +2399,30 @@ var HexbinLayer = class {
     this.yRef = minY;
     const centers = new Float32Array(this.cellCount * 2);
     const colors = new Float32Array(this.cellCount * 4);
-    const cmap = colormap(opts.colormap ?? "viridis");
-    const lo = opts.domain?.[0] ?? 1;
-    const hi = opts.domain?.[1] ?? maxCount;
+    const lo = this.domain?.[0] ?? 1;
+    const hi = this.domain?.[1] ?? maxCount;
     const span = hi - lo || 1;
     let k = 0;
     for (const cell of cells.values()) {
       centers[k * 2] = cell.cx - this.xRef;
       centers[k * 2 + 1] = cell.cy - this.yRef;
-      const [cr, cg, cb] = cmap((cell.count - lo) / span);
+      const [cr, cg, cb] = this.cmap((cell.count - lo) / span);
       colors[k * 4] = cr;
       colors[k * 4 + 1] = cg;
       colors[k * 4 + 2] = cb;
       colors[k * 4 + 3] = 1;
       k++;
     }
-    const vao = gl.createVertexArray();
-    this.vao = vao;
-    gl.bindVertexArray(vao);
-    const hexBuf = gl.createBuffer();
-    gl.bindBuffer(gl.ARRAY_BUFFER, hexBuf);
-    gl.bufferData(gl.ARRAY_BUFFER, HEX, gl.STATIC_DRAW);
-    gl.enableVertexAttribArray(0);
-    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
-    const centerBuf = gl.createBuffer();
-    gl.bindBuffer(gl.ARRAY_BUFFER, centerBuf);
-    gl.bufferData(gl.ARRAY_BUFFER, centers, gl.STATIC_DRAW);
-    gl.enableVertexAttribArray(1);
-    gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 0, 0);
-    gl.vertexAttribDivisor(1, 1);
-    const colorBuf = gl.createBuffer();
-    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuf);
-    gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
-    gl.enableVertexAttribArray(2);
-    gl.vertexAttribPointer(2, 4, gl.FLOAT, false, 0, 0);
-    gl.vertexAttribDivisor(2, 1);
-    gl.bindVertexArray(null);
-    this.buffers = [hexBuf, centerBuf, colorBuf];
-    this.uniforms = uniformLocations(gl, this.program, [...TRANSFORM_UNIFORMS, "uRadius"]);
+    return { centers, colors };
+  }
+  /** Replace the point arrays, re-bin and re-upload the cells (for streaming). */
+  setData(x, y) {
+    const { centers, colors } = this.build(x, y);
+    const gl = this.gl;
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[1]);
+    gl.bufferData(gl.ARRAY_BUFFER, centers, this.usage);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[2]);
+    gl.bufferData(gl.ARRAY_BUFFER, colors, this.usage);
   }
   bounds() {
     if (this.cellCount === 0) return null;
@@ -1926,7 +2458,7 @@ void main() {
   gl_Position = vec4(dataToClip(aPos), 0.0, 1.0);
 }`
 );
-var FRAG8 = (
+var FRAG9 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -1940,24 +2472,24 @@ void main() {
   outColor = vec4(c.rgb * a, a);
 }`
 );
-var programCache8 = /* @__PURE__ */ new WeakMap();
-function getProgram7(gl) {
-  let p = programCache8.get(gl);
+var programCache9 = /* @__PURE__ */ new WeakMap();
+function getProgram8(gl) {
+  let p = programCache9.get(gl);
   if (!p) {
-    p = createProgram(gl, VERT7, FRAG8);
-    programCache8.set(gl, p);
+    p = createProgram(gl, VERT7, FRAG9);
+    programCache9.set(gl, p);
   }
   return p;
 }
-var counter10 = 0;
+var counter11 = 0;
 var ImageLayer = class {
   constructor(gl, opts) {
     this.colorCss = "#94a3b8";
     this.ready = false;
     this.img = null;
-    this.id = `image-${counter10++}`;
+    this.id = `image-${counter11++}`;
     this.gl = gl;
-    this.program = getProgram7(gl);
+    this.program = getProgram8(gl);
     this.name = opts.name ?? this.id;
     this.yAxis = opts.yAxis ?? "y";
     this.ext = opts.extent;
@@ -1971,18 +2503,7 @@ var ImageLayer = class {
     gl.bindTexture(gl.TEXTURE_2D, this.texture);
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 0, 0]));
     gl.bindTexture(gl.TEXTURE_2D, null);
-    if (typeof opts.source === "string") {
-      const img = new Image();
-      this.img = img;
-      img.crossOrigin = "anonymous";
-      img.onload = () => {
-        this.upload(img);
-        opts.onLoad?.();
-      };
-      img.src = opts.source;
-    } else {
-      this.upload(opts.source);
-    }
+    this.setSource(opts.source, opts.onLoad);
     const data = new Float32Array([
       x0 - this.xRef,
       y0 - this.yRef,
@@ -2023,6 +2544,27 @@ var ImageLayer = class {
     gl.bindVertexArray(null);
     this.uniforms = uniformLocations(gl, this.program, [...TRANSFORM_UNIFORMS, "uTex", "uOpacity"]);
   }
+  /** Point the texture at a new source: load a URL async, or upload a bitmap now. */
+  setSource(source, onLoad) {
+    if (typeof source === "string") {
+      if (this.img) this.img.onload = null;
+      const img = new Image();
+      this.img = img;
+      img.crossOrigin = "anonymous";
+      img.onload = () => {
+        this.upload(img);
+        onLoad?.();
+      };
+      img.src = source;
+    } else {
+      this.img = null;
+      this.upload(source);
+    }
+  }
+  /** Replace the image source and re-upload the texture (for streaming). */
+  setData(source, onLoad) {
+    this.setSource(source, onLoad);
+  }
   upload(src) {
     const gl = this.gl;
     gl.bindTexture(gl.TEXTURE_2D, this.texture);
@@ -2154,9 +2696,9 @@ ${log}`);
   }
   return sh;
 }
-var programCache9 = /* @__PURE__ */ new WeakMap();
+var programCache10 = /* @__PURE__ */ new WeakMap();
 function getDecProgram(gl) {
-  if (programCache9.has(gl)) return programCache9.get(gl);
+  if (programCache10.has(gl)) return programCache10.get(gl);
   let result = null;
   try {
     const vs = compile(gl, gl.VERTEX_SHADER, DEC_VERT);
@@ -2180,7 +2722,7 @@ function getDecProgram(gl) {
   } catch {
     result = null;
   }
-  programCache9.set(gl, result);
+  programCache10.set(gl, result);
   return result;
 }
 var GpuDecimator = class {
@@ -2327,7 +2869,7 @@ void main() {
   gl_Position = vec4((pos / uResolution) * 2.0 - 1.0, 0.0, 1.0);
 }`
 );
-var FRAG9 = (
+var FRAG10 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -2447,12 +2989,12 @@ void main() {
 }`
 );
 var CORNERS2 = new Float32Array([0, -1, 1, -1, 1, 1, 0, -1, 1, 1, 0, 1]);
-var programCache10 = /* @__PURE__ */ new WeakMap();
-function getProgram8(gl) {
-  let p = programCache10.get(gl);
+var programCache11 = /* @__PURE__ */ new WeakMap();
+function getProgram9(gl) {
+  let p = programCache11.get(gl);
   if (!p) {
-    p = createProgram(gl, VERT8, FRAG9);
-    programCache10.set(gl, p);
+    p = createProgram(gl, VERT8, FRAG10);
+    programCache11.set(gl, p);
   }
   return p;
 }
@@ -2494,7 +3036,7 @@ function upperBound(a, v) {
   }
   return lo;
 }
-var counter11 = 0;
+var counter12 = 0;
 var LineLayer = class {
   constructor(gl, opts) {
     this.gpuDec = null;
@@ -2504,9 +3046,9 @@ var LineLayer = class {
     this.yBounds = [0, 0];
     this.decKey = "";
     this.decSegments = 0;
-    this.id = `line-${counter11++}`;
+    this.id = `line-${counter12++}`;
     this.gl = gl;
-    this.program = getProgram8(gl);
+    this.program = getProgram9(gl);
     this.joinProgram = getJoinProgram(gl);
     this.width = opts.width ?? 1.5;
     this.joinStyle = opts.join ?? "round";
@@ -2519,6 +3061,7 @@ var LineLayer = class {
     this.colorCss = typeof colorInput === "string" ? colorInput : toColorCss(this.color);
     this.name = opts.name ?? this.id;
     this.yAxis = opts.yAxis ?? "y";
+    this.usage = bufferUsage(gl, opts.renderType);
     let n = Math.min(opts.x.length, opts.y.length);
     let xs = opts.x, ys = opts.y;
     if (opts.step && n >= 2) {
@@ -2559,7 +3102,7 @@ var LineLayer = class {
     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);
+    gl.bufferData(gl.ARRAY_BUFFER, data, this.usage);
     this.configureVao(this.fullVao, this.posBuf);
     this.configureVao(this.decVao, this.decBuf);
     this.configureJoinVao(this.joinFullVao, this.posBuf);
@@ -2670,7 +3213,7 @@ var LineLayer = class {
     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.gl.bufferData(this.gl.ARRAY_BUFFER, data, this.usage);
     this.syncGpu(data, n);
   }
   /**
@@ -2755,64 +3298,6 @@ var LineLayer = class {
   }
 };
 
-// src/graph/force.ts
-function forceLayout(nodeCount, edges, opts = {}) {
-  const n = nodeCount;
-  const x = new Float64Array(n);
-  const y = new Float64Array(n);
-  for (let i = 0; i < n; i++) {
-    const a = i / n * Math.PI * 2;
-    x[i] = Math.cos(a);
-    y[i] = Math.sin(a);
-  }
-  if (n < 2) return { x, y };
-  const iterations = opts.iterations ?? 300;
-  const area2 = opts.area ?? 1;
-  const k = Math.sqrt(area2 / n);
-  const gravity = opts.gravity ?? 0.05;
-  const dispX = new Float64Array(n);
-  const dispY = new Float64Array(n);
-  let temp = 0.1;
-  for (let it = 0; it < iterations; it++) {
-    dispX.fill(0);
-    dispY.fill(0);
-    for (let i = 0; i < n; i++) {
-      for (let j = i + 1; j < n; j++) {
-        const dx = x[i] - x[j];
-        const dy = y[i] - y[j];
-        const d = Math.hypot(dx, dy) || 1e-6;
-        const f = k * k / d;
-        const ux = dx / d, uy = dy / d;
-        dispX[i] += ux * f;
-        dispY[i] += uy * f;
-        dispX[j] -= ux * f;
-        dispY[j] -= uy * f;
-      }
-    }
-    for (const [a, b] of edges) {
-      const dx = x[a] - x[b];
-      const dy = y[a] - y[b];
-      const d = Math.hypot(dx, dy) || 1e-6;
-      const f = d * d / k;
-      const ux = dx / d, uy = dy / d;
-      dispX[a] -= ux * f;
-      dispY[a] -= uy * f;
-      dispX[b] += ux * f;
-      dispY[b] += uy * f;
-    }
-    for (let i = 0; i < n; i++) {
-      dispX[i] -= x[i] * gravity;
-      dispY[i] -= y[i] * gravity;
-      const d = Math.hypot(dispX[i], dispY[i]) || 1e-6;
-      const lim = Math.min(d, temp);
-      x[i] += dispX[i] / d * lim;
-      y[i] += dispY[i] / d * lim;
-    }
-    temp *= 0.99;
-  }
-  return { x, y };
-}
-
 // src/geo/earcut.ts
 var Z_ORDER_THRESHOLD = 80;
 var Node = class {
@@ -3256,16 +3741,16 @@ in vec4 vColor;
 out vec4 outColor;
 void main() { outColor = vec4(vColor.rgb * vColor.a, vColor.a); }`
 );
-var programCache11 = /* @__PURE__ */ new WeakMap();
+var programCache12 = /* @__PURE__ */ new WeakMap();
 function getFillProgram(gl) {
-  let p = programCache11.get(gl);
+  let p = programCache12.get(gl);
   if (!p) {
     p = createProgram(gl, FILL_VERT, FILL_FRAG);
-    programCache11.set(gl, p);
+    programCache12.set(gl, p);
   }
   return p;
 }
-var counter12 = 0;
+var counter13 = 0;
 var PatchesLayer = class {
   constructor(gl, opts) {
     this.buffers = [];
@@ -3274,20 +3759,43 @@ var PatchesLayer = class {
     this.yRef = 0;
     this.xBounds = [0, 0];
     this.yBounds = [0, 0];
-    this.id = `patches-${counter12++}`;
+    this.id = `patches-${counter13++}`;
     this.gl = gl;
     this.program = getFillProgram(gl);
     this.name = opts.name ?? this.id;
     this.yAxis = opts.yAxis ?? "y";
     const defColor = opts.color ?? "#3b82f6";
-    const defRgba = Array.isArray(defColor) ? defColor : parseColor(defColor);
+    this.defRgba = Array.isArray(defColor) ? defColor : parseColor(defColor);
     this.colorCss = typeof defColor === "string" ? defColor : "#3b82f6";
-    const opacity = opts.opacity ?? 1;
-    const cmap = opts.colormap ? colormap(opts.colormap) : null;
-    let lo = opts.domain?.[0] ?? Infinity;
-    let hi = opts.domain?.[1] ?? -Infinity;
-    if (cmap && !opts.domain) {
-      for (const patch of opts.patches) {
+    this.opacity = opts.opacity ?? 1;
+    this.cmap = opts.colormap ? colormap(opts.colormap) : null;
+    this.domainOpt = opts.domain;
+    this.usage = bufferUsage(gl, opts.renderType);
+    const { positions, colors } = this.build(opts.patches);
+    const vao = gl.createVertexArray();
+    this.vao = vao;
+    gl.bindVertexArray(vao);
+    const posBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, posBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, positions, this.usage);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+    const colBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, colBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, colors, this.usage);
+    gl.enableVertexAttribArray(1);
+    gl.vertexAttribPointer(1, 4, gl.FLOAT, false, 0, 0);
+    gl.bindVertexArray(null);
+    this.buffers = [posBuf, colBuf];
+    this.uniforms = uniformLocations(gl, this.program, [...TRANSFORM_UNIFORMS]);
+  }
+  /** Triangulate the patches and recompute refs/bounds/vertexCount into position/color arrays. */
+  build(patches) {
+    const defRgba = this.defRgba, opacity = this.opacity, cmap = this.cmap;
+    let lo = this.domainOpt?.[0] ?? Infinity;
+    let hi = this.domainOpt?.[1] ?? -Infinity;
+    if (cmap && !this.domainOpt) {
+      for (const patch of patches) {
         const v = patch.value;
         if (v == null) continue;
         if (v < lo) lo = v;
@@ -3295,7 +3803,9 @@ var PatchesLayer = class {
       }
     }
     const span = hi - lo || 1;
-    for (const patch of opts.patches) {
+    this.xRef = 0;
+    this.yRef = 0;
+    for (const patch of patches) {
       if (patch.x.length > 0) {
         this.xRef = patch.x[0];
         this.yRef = patch.y[0];
@@ -3305,7 +3815,7 @@ var PatchesLayer = class {
     const positions = [];
     const colors = [];
     let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
-    for (const patch of opts.patches) {
+    for (const patch of patches) {
       const n = Math.min(patch.x.length, patch.y.length);
       if (n < 3) continue;
       let rgba;
@@ -3341,22 +3851,16 @@ var PatchesLayer = class {
     this.vertexCount = positions.length / 2;
     this.xBounds = minX <= maxX ? [minX, maxX] : [0, 0];
     this.yBounds = minY <= maxY ? [minY, maxY] : [0, 0];
-    const vao = gl.createVertexArray();
-    this.vao = vao;
-    gl.bindVertexArray(vao);
-    const posBuf = gl.createBuffer();
-    gl.bindBuffer(gl.ARRAY_BUFFER, posBuf);
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
-    gl.enableVertexAttribArray(0);
-    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
-    const colBuf = gl.createBuffer();
-    gl.bindBuffer(gl.ARRAY_BUFFER, colBuf);
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
-    gl.enableVertexAttribArray(1);
-    gl.vertexAttribPointer(1, 4, gl.FLOAT, false, 0, 0);
-    gl.bindVertexArray(null);
-    this.buffers = [posBuf, colBuf];
-    this.uniforms = uniformLocations(gl, this.program, [...TRANSFORM_UNIFORMS]);
+    return { positions: new Float32Array(positions), colors: new Float32Array(colors) };
+  }
+  /** Replace the patches and re-upload (for streaming). */
+  setData(patches) {
+    const gl = this.gl;
+    const { positions, colors } = this.build(patches);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[0]);
+    gl.bufferData(gl.ARRAY_BUFFER, positions, this.usage);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[1]);
+    gl.bufferData(gl.ARRAY_BUFFER, colors, this.usage);
   }
   bounds() {
     if (this.vertexCount === 0) return null;
@@ -3390,33 +3894,59 @@ var DEFAULT_COLORS = [
   "#60a5fa",
   "#f59e0b"
 ];
-var counter13 = 0;
+var counter14 = 0;
 var PieLayer = class {
   constructor(gl, opts) {
     this.buffers = [];
     this.vertexCount = 0;
-    this.id = `pie-${counter13++}`;
+    this.id = `pie-${counter14++}`;
     this.gl = gl;
     this.program = getFillProgram(gl);
     this.name = opts.name ?? this.id;
     this.yAxis = opts.yAxis ?? "y";
     const [cx, cy] = opts.center ?? [0, 0];
-    const R = opts.radius ?? 1;
-    const rIn = opts.innerRadius ?? 0;
-    const start = opts.startAngle ?? Math.PI / 2;
+    this.cx = cx;
+    this.cy = cy;
+    this.R = opts.radius ?? 1;
+    this.rIn = opts.innerRadius ?? 0;
+    this.start = opts.startAngle ?? Math.PI / 2;
     this.xRef = cx;
     this.yRef = cy;
-    this.xBounds = [cx - R, cx + R];
-    this.yBounds = [cy - R, cy + R];
+    this.xBounds = [cx - this.R, cx + this.R];
+    this.yBounds = [cy - this.R, cy + this.R];
     this.colorCss = "#3b82f6";
-    const n = opts.values.length;
+    this.colorsOpt = opts.colors;
+    this.cmap = opts.colormap ? colormap(opts.colormap) : null;
+    this.usage = bufferUsage(gl, opts.renderType);
+    const { positions, colors } = this.build(opts.values);
+    const vao = gl.createVertexArray();
+    this.vao = vao;
+    gl.bindVertexArray(vao);
+    const posBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, posBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, positions, this.usage);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+    const colBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, colBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, colors, this.usage);
+    gl.enableVertexAttribArray(1);
+    gl.vertexAttribPointer(1, 4, gl.FLOAT, false, 0, 0);
+    gl.bindVertexArray(null);
+    this.buffers = [posBuf, colBuf];
+    this.uniforms = uniformLocations(gl, this.program, [...TRANSFORM_UNIFORMS]);
+  }
+  /** Recompute vertexCount and the position/color triangle soup from new slice values. */
+  build(values) {
+    const { cx, cy, R, rIn, start } = this;
+    const n = values.length;
     let total = 0;
-    for (let i = 0; i < n; i++) total += Math.max(0, opts.values[i]);
+    for (let i = 0; i < n; i++) total += Math.max(0, values[i]);
     if (total <= 0) total = 1;
-    const cmap = opts.colormap ? colormap(opts.colormap) : null;
+    const cmap = this.cmap;
     const colorAt = (i) => {
-      if (opts.colors?.[i] != null) {
-        const c = opts.colors[i];
+      if (this.colorsOpt?.[i] != null) {
+        const c = this.colorsOpt[i];
         return Array.isArray(c) ? c : parseColor(c);
       }
       if (cmap) {
@@ -3433,7 +3963,7 @@ var PieLayer = class {
     };
     let a0 = start;
     for (let i = 0; i < n; i++) {
-      const frac = Math.max(0, opts.values[i]) / total;
+      const frac = Math.max(0, values[i]) / total;
       const span = frac * Math.PI * 2;
       if (span <= 0) continue;
       const a1 = a0 - span;
@@ -3462,22 +3992,16 @@ var PieLayer = class {
       a0 = a1;
     }
     this.vertexCount = positions.length / 2;
-    const vao = gl.createVertexArray();
-    this.vao = vao;
-    gl.bindVertexArray(vao);
-    const posBuf = gl.createBuffer();
-    gl.bindBuffer(gl.ARRAY_BUFFER, posBuf);
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
-    gl.enableVertexAttribArray(0);
-    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
-    const colBuf = gl.createBuffer();
-    gl.bindBuffer(gl.ARRAY_BUFFER, colBuf);
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
-    gl.enableVertexAttribArray(1);
-    gl.vertexAttribPointer(1, 4, gl.FLOAT, false, 0, 0);
-    gl.bindVertexArray(null);
-    this.buffers = [posBuf, colBuf];
-    this.uniforms = uniformLocations(gl, this.program, [...TRANSFORM_UNIFORMS]);
+    return { positions: new Float32Array(positions), colors: new Float32Array(colors) };
+  }
+  /** Replace the slice values and re-upload (for streaming). */
+  setData(values) {
+    const gl = this.gl;
+    const { positions, colors } = this.build(values);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[0]);
+    gl.bufferData(gl.ARRAY_BUFFER, positions, this.usage);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[1]);
+    gl.bufferData(gl.ARRAY_BUFFER, colors, this.usage);
   }
   bounds() {
     if (this.vertexCount === 0) return null;
@@ -3548,7 +4072,7 @@ void main() {
   gl_Position = vec4((pos / uResolution) * 2.0 - 1.0, 0.0, 1.0);
 }`
 );
-var FRAG10 = (
+var FRAG11 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -3561,17 +4085,17 @@ void main() {
   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 SEG_CORNERS4 = 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, FRAG10), head: createProgram(gl, HEAD_VERT, FRAG10) };
+    p = { shaft: createProgram(gl, SHAFT_VERT, FRAG11), head: createProgram(gl, HEAD_VERT, FRAG11) };
     cache3.set(gl, p);
   }
   return p;
 }
-var counter14 = 0;
+var counter15 = 0;
 var QuiverLayer = class {
   constructor(gl, opts) {
     this.buffers = [];
@@ -3579,7 +4103,7 @@ var QuiverLayer = class {
     this.yRef = 0;
     this.xBounds = [0, 0];
     this.yBounds = [0, 0];
-    this.id = `quiver-${counter14++}`;
+    this.id = `quiver-${counter15++}`;
     this.gl = gl;
     this.progs = programs3(gl);
     const colorInput = opts.color ?? "#3b82f6";
@@ -3590,71 +4114,19 @@ var QuiverLayer = class {
     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];
+    this.explicitScale = opts.scale;
+    this.colorBy = opts.colorBy;
+    this.usage = bufferUsage(gl, opts.renderType);
+    const { arrows, colors } = this.build(opts.x, opts.y, opts.u, opts.v);
     const cornerBuf = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, cornerBuf);
-    gl.bufferData(gl.ARRAY_BUFFER, SEG_CORNERS3, gl.STATIC_DRAW);
+    gl.bufferData(gl.ARRAY_BUFFER, SEG_CORNERS4, gl.STATIC_DRAW);
     const arrowBuf = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, arrowBuf);
-    gl.bufferData(gl.ARRAY_BUFFER, arrows, gl.STATIC_DRAW);
+    gl.bufferData(gl.ARRAY_BUFFER, arrows, this.usage);
     const colorBuf = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, colorBuf);
-    gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
+    gl.bufferData(gl.ARRAY_BUFFER, colors, this.usage);
     this.buffers = [cornerBuf, arrowBuf, colorBuf];
     this.shaftVao = gl.createVertexArray();
     gl.bindVertexArray(this.shaftVao);
@@ -3693,6 +4165,75 @@ var QuiverLayer = class {
     gl.vertexAttribPointer(2, 4, gl.FLOAT, false, 0, 0);
     gl.vertexAttribDivisor(2, 1);
   }
+  /** Recompute count/refs/bounds and the arrow+color arrays from new x/y/u/v. */
+  build(x, y, u, v) {
+    const n = Math.min(x.length, y.length, u.length, v.length);
+    this.count = n;
+    this.xRef = n > 0 ? x[0] : 0;
+    this.yRef = n > 0 ? y[0] : 0;
+    let maxMag = 0;
+    for (let i = 0; i < n; i++) maxMag = Math.max(maxMag, Math.hypot(u[i], v[i]));
+    let scale = this.explicitScale;
+    if (scale == null) {
+      let minX2 = Infinity, maxX2 = -Infinity, minY2 = Infinity, maxY2 = -Infinity;
+      for (let i = 0; i < n; i++) {
+        minX2 = Math.min(minX2, x[i]);
+        maxX2 = Math.max(maxX2, x[i]);
+        minY2 = Math.min(minY2, y[i]);
+        maxY2 = Math.max(maxY2, 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(this.colorBy?.colormap ?? "viridis");
+    const vals = this.colorBy?.values;
+    let lo = this.colorBy?.domain?.[0] ?? Infinity;
+    let hi = this.colorBy?.domain?.[1] ?? -Infinity;
+    if (this.useVertexColor && !this.colorBy?.domain) {
+      for (let i = 0; i < n; i++) {
+        const val = vals ? vals[i] : Math.hypot(u[i], v[i]);
+        lo = Math.min(lo, val);
+        hi = Math.max(hi, val);
+      }
+    }
+    const span = hi - lo || 1;
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+    for (let i = 0; i < n; i++) {
+      const xi = x[i], yi = y[i];
+      const tx = xi + u[i] * scale, ty = yi + v[i] * scale;
+      arrows[i * 4] = xi - this.xRef;
+      arrows[i * 4 + 1] = yi - this.yRef;
+      arrows[i * 4 + 2] = tx - this.xRef;
+      arrows[i * 4 + 3] = ty - this.yRef;
+      if (this.useVertexColor) {
+        const val = vals ? vals[i] : Math.hypot(u[i], v[i]);
+        const [r, g, b] = cmap((val - 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, xi, tx);
+      maxX = Math.max(maxX, xi, tx);
+      minY = Math.min(minY, yi, ty);
+      maxY = Math.max(maxY, yi, ty);
+    }
+    this.xBounds = [minX, maxX];
+    this.yBounds = [minY, maxY];
+    return { arrows, colors };
+  }
+  /** Replace the data and re-upload (for streaming). */
+  setData(x, y, u, v) {
+    const gl = this.gl;
+    const { arrows, colors } = this.build(x, y, u, v);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[1]);
+    gl.bufferData(gl.ARRAY_BUFFER, arrows, this.usage);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[2]);
+    gl.bufferData(gl.ARRAY_BUFFER, colors, this.usage);
+  }
   bounds() {
     if (this.count === 0) return null;
     return { x: this.xBounds, y: this.yBounds };
@@ -3757,7 +4298,7 @@ void main() {
   gl_Position = vec4((pos / uResolution) * 2.0 - 1.0, 0.0, 1.0);
 }`
 );
-var FRAG11 = (
+var FRAG12 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -3811,16 +4352,16 @@ void main() {
 }`
 );
 var CORNERS3 = new Float32Array([-1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1]);
-var programCache12 = /* @__PURE__ */ new WeakMap();
-function getProgram9(gl) {
-  let p = programCache12.get(gl);
+var programCache13 = /* @__PURE__ */ new WeakMap();
+function getProgram10(gl) {
+  let p = programCache13.get(gl);
   if (!p) {
-    p = createProgram(gl, VERT9, FRAG11);
-    programCache12.set(gl, p);
+    p = createProgram(gl, VERT9, FRAG12);
+    programCache13.set(gl, p);
   }
   return p;
 }
-var counter15 = 0;
+var counter16 = 0;
 var ScatterLayer = class {
   constructor(gl, opts) {
     this.buffers = [];
@@ -3828,9 +4369,9 @@ var ScatterLayer = class {
     this.yRef = 0;
     this.xBounds = [0, 0];
     this.yBounds = [0, 0];
-    this.id = `scatter-${counter15++}`;
+    this.id = `scatter-${counter16++}`;
     this.gl = gl;
-    this.program = getProgram9(gl);
+    this.program = getProgram10(gl);
     this.size = opts.size ?? 5;
     this.marker = MARKERS[opts.marker ?? "circle"];
     const colorInput = opts.color ?? "#3b82f6";
@@ -3838,6 +4379,7 @@ var ScatterLayer = class {
     this.colorCss = typeof colorInput === "string" ? colorInput : toColorCss(this.color);
     this.name = opts.name ?? this.id;
     this.yAxis = opts.yAxis ?? "y";
+    this.usage = bufferUsage(gl, opts.renderType);
     this.useVertexColor = opts.colorBy != null;
     this.labels = opts.labels;
     const n = Math.min(opts.x.length, opts.y.length);
@@ -3895,13 +4437,13 @@ var ScatterLayer = class {
     gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
     const posBuf = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, posBuf);
-    gl.bufferData(gl.ARRAY_BUFFER, pos, gl.STATIC_DRAW);
+    gl.bufferData(gl.ARRAY_BUFFER, pos, this.usage);
     gl.enableVertexAttribArray(1);
     gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 0, 0);
     gl.vertexAttribDivisor(1, 1);
     const colorBuf = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, colorBuf);
-    gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
+    gl.bufferData(gl.ARRAY_BUFFER, colors, this.usage);
     gl.enableVertexAttribArray(2);
     gl.vertexAttribPointer(2, 4, gl.FLOAT, false, 0, 0);
     gl.vertexAttribDivisor(2, 1);
@@ -3954,7 +4496,7 @@ var ScatterLayer = class {
     this.yBounds = [minY, maxY];
     this.useVertexColor = false;
     this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffers[1]);
-    this.gl.bufferData(this.gl.ARRAY_BUFFER, pos, this.gl.DYNAMIC_DRAW);
+    this.gl.bufferData(this.gl.ARRAY_BUFFER, pos, this.usage);
   }
   draw(state) {
     if (this.count === 0) return;
@@ -4036,7 +4578,7 @@ void main() {
   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 SEG_CORNERS5 = 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) {
@@ -4047,7 +4589,7 @@ function programs4(gl) {
   }
   return p;
 }
-var counter16 = 0;
+var counter17 = 0;
 var StemLayer = class {
   constructor(gl, opts) {
     this.buffers = [];
@@ -4055,7 +4597,7 @@ var StemLayer = class {
     this.yRef = 0;
     this.xBounds = [0, 0];
     this.yBounds = [0, 0];
-    this.id = `stem-${counter16++}`;
+    this.id = `stem-${counter17++}`;
     this.gl = gl;
     this.progs = programs4(gl);
     const colorInput = opts.color ?? "#3b82f6";
@@ -4066,45 +4608,20 @@ var StemLayer = class {
     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];
+    this.usage = bufferUsage(gl, opts.renderType);
+    const { segs, tips } = this.build(opts.x, opts.y);
     const cornerSeg = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, cornerSeg);
-    gl.bufferData(gl.ARRAY_BUFFER, SEG_CORNERS4, gl.STATIC_DRAW);
+    gl.bufferData(gl.ARRAY_BUFFER, SEG_CORNERS5, 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);
+    gl.bufferData(gl.ARRAY_BUFFER, segs, this.usage);
     const tipBuf = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, tipBuf);
-    gl.bufferData(gl.ARRAY_BUFFER, tips, gl.STATIC_DRAW);
+    gl.bufferData(gl.ARRAY_BUFFER, tips, this.usage);
     this.buffers = [cornerSeg, cornerQuad, segBuf, tipBuf];
     this.stemVao = gl.createVertexArray();
     gl.bindVertexArray(this.stemVao);
@@ -4128,6 +4645,46 @@ var StemLayer = class {
     this.uStem = uniformLocations(gl, this.progs.stem, [...TRANSFORM_UNIFORMS, "uColor", "uResolution", "uWidth"]);
     this.uMarker = uniformLocations(gl, this.progs.marker, [...TRANSFORM_UNIFORMS, "uColor", "uResolution", "uSize"]);
   }
+  /** Recompute count/refs/bounds and the stem+tip vertex arrays from new x/y. */
+  build(x, y) {
+    const n = Math.min(x.length, y.length);
+    this.count = n;
+    this.xs = new Float64Array(n);
+    this.ys = new Float64Array(n);
+    this.xRef = n > 0 ? x[0] : 0;
+    this.yRef = n > 0 ? y[0] : 0;
+    const 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 xi = x[i], yi = y[i];
+      this.xs[i] = xi;
+      this.ys[i] = yi;
+      segs[i * 4] = xi - this.xRef;
+      segs[i * 4 + 1] = this.baseline - this.yRef;
+      segs[i * 4 + 2] = xi - this.xRef;
+      segs[i * 4 + 3] = yi - this.yRef;
+      tips[i * 2] = xi - this.xRef;
+      tips[i * 2 + 1] = yi - this.yRef;
+      if (xi < minX) minX = xi;
+      if (xi > maxX) maxX = xi;
+      if (yi < minY) minY = yi;
+      if (yi > maxY) maxY = yi;
+    }
+    this.xBounds = [minX, maxX];
+    this.yBounds = [minY, maxY];
+    return { segs, tips };
+  }
+  /** Replace the data and re-upload (for streaming). */
+  setData(x, y) {
+    const gl = this.gl;
+    const { segs, tips } = this.build(x, y);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[2]);
+    gl.bufferData(gl.ARRAY_BUFFER, segs, this.usage);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[3]);
+    gl.bufferData(gl.ARRAY_BUFFER, tips, this.usage);
+  }
   bounds() {
     if (this.count === 0) return null;
     return { x: this.xBounds, y: this.yBounds };
@@ -4568,7 +5125,92 @@ var CategoricalScale = class {
     return this.factors[Math.round(value)] ?? "";
   }
 };
-function makeScale(type, domain, factors) {
+var MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+var OrdinalTimeScale = class {
+  constructor(times = []) {
+    this.type = "ordinal-time";
+    this.log = false;
+    this.times = Array.from({ length: times.length }, (_, i) => times[i]);
+    const n = this.times.length;
+    this.domain = n > 0 ? [-0.5, n - 0.5] : [-0.5, 0.5];
+  }
+  norm(value) {
+    const [a, b] = this.domain;
+    return b === a ? 0 : (value - a) / (b - a);
+  }
+  invert(t) {
+    const [a, b] = this.domain;
+    return a + t * (b - a);
+  }
+  /** Timestamp at a (rounded, clamped) index. */
+  timeAt(i) {
+    const n = this.times.length;
+    if (n === 0) return 0;
+    const k = Math.max(0, Math.min(n - 1, Math.round(i)));
+    return this.times[k];
+  }
+  ticks(target = 6) {
+    const n = this.times.length;
+    if (n === 0) return [];
+    const i0 = Math.max(0, Math.ceil(this.domain[0] - 1e-9));
+    const i1 = Math.min(n - 1, Math.floor(this.domain[1] + 1e-9));
+    if (i1 < i0) return [];
+    const dayKey = (d) => d.getFullYear() * 1e4 + d.getMonth() * 100 + d.getDate();
+    const levels = [
+      { key: (d) => d.getFullYear(), label: (d) => `${d.getFullYear()}` },
+      {
+        key: (d) => d.getFullYear() * 12 + d.getMonth(),
+        label: (d) => d.getMonth() === 0 ? `${d.getFullYear()}` : MONTHS[d.getMonth()]
+      },
+      { key: dayKey, label: (d) => `${d.getDate()} ${MONTHS[d.getMonth()]}` },
+      { key: (d) => dayKey(d) * 100 + d.getHours(), label: hhmm },
+      { key: (d) => (dayKey(d) * 100 + d.getHours()) * 100 + d.getMinutes(), label: hhmm }
+    ];
+    const boundaries = (lvl) => {
+      const out = [];
+      let prev = i0 > 0 ? lvl.key(new Date(this.times[i0 - 1])) : NaN;
+      for (let i = i0; i <= i1; i++) {
+        const k = lvl.key(new Date(this.times[i]));
+        if (k !== prev) {
+          out.push(i);
+          prev = k;
+        }
+      }
+      return out;
+    };
+    let best = null;
+    for (const lvl of levels) {
+      const b = boundaries(lvl);
+      if (b.length === 0) continue;
+      best = { lvl, b };
+      if (b.length >= target) break;
+    }
+    let idxs;
+    let label;
+    if (best) {
+      idxs = best.b;
+      label = best.lvl.label;
+      if (idxs.length > target * 1.5) {
+        const stride = Math.ceil(idxs.length / target);
+        idxs = idxs.filter((_, k) => k % stride === 0);
+      }
+    } else {
+      idxs = [];
+      const step = Math.max(1, Math.floor((i1 - i0) / Math.max(1, target - 1)));
+      for (let i = i0; i <= i1; i += step) idxs.push(i);
+      label = (d) => `${d.getDate()} ${MONTHS[d.getMonth()]} ${hhmm(d)}`;
+    }
+    return idxs.map((i) => ({ value: i, label: label(new Date(this.times[i])) }));
+  }
+  formatTick(value) {
+    const d = new Date(this.timeAt(value));
+    return `${d.getDate()} ${MONTHS[d.getMonth()]} ${hhmm(d)}`;
+  }
+};
+function hhmm(d) {
+  return `${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
+}
+function makeScale(type, domain, factors, times) {
   switch (type) {
     case "linear":
       return new LinearScale(domain);
@@ -4578,6 +5220,8 @@ function makeScale(type, domain, factors) {
       return new TimeScale(domain);
     case "categorical":
       return new CategoricalScale(factors ?? []);
+    case "ordinal-time":
+      return new OrdinalTimeScale(times ?? []);
     default:
       throw new Error(`Unknown scale type: ${type}`);
   }
@@ -4724,6 +5368,12 @@ var Plot = class {
     this.hoverPx = null;
     /** Cursor position while the pointer is pressed, when `crosshair`. */
     this.pressPx = null;
+    // Linked-pane plumbing (see linkX). View/cursor changes are emitted from render().
+    this.viewListeners = [];
+    this.cursorListeners = [];
+    this.lastEmittedX = null;
+    this.lastEmittedCursor = NaN;
+    this.linkedCursorX = null;
     /** A point clicked to pin its details, until another click clears it. */
     this.selected = null;
     this.annotations = [];
@@ -4742,20 +5392,20 @@ var Plot = class {
     this.sharedCanvas = s.canvas;
     const sx = options.scales?.x ?? {};
     const sy = options.scales?.y ?? {};
-    const xCat = sx.type === "categorical";
-    this.scaleX = makeScale(sx.type ?? "linear", sx.domain ?? [0, 1], sx.factors);
-    this.autoX = !xCat && sx.domain == null;
-    this.initialX = xCat ? this.scaleX.domain : sx.domain ?? null;
+    const xBand = sx.type === "categorical" || sx.type === "ordinal-time";
+    this.scaleX = makeScale(sx.type ?? "linear", sx.domain ?? [0, 1], sx.factors, sx.times);
+    this.autoX = !xBand && sx.domain == null;
+    this.initialX = xBand ? this.scaleX.domain : sx.domain ?? null;
     this.axisX = new Axis(options.axes?.x);
-    const yCat = sy.type === "categorical";
-    const yScale = makeScale(sy.type ?? "linear", sy.domain ?? [0, 1], sy.factors);
+    const yBand = sy.type === "categorical" || sy.type === "ordinal-time";
+    const yScale = makeScale(sy.type ?? "linear", sy.domain ?? [0, 1], sy.factors, sy.times);
     this.yAxes.set("y", {
       id: "y",
       scale: yScale,
       axis: new Axis(options.axes?.y),
       side: "left",
-      auto: !yCat && sy.domain == null,
-      initial: yCat ? yScale.domain : sy.domain ?? null
+      auto: !yBand && sy.domain == null,
+      initial: yBand ? yScale.domain : sy.domain ?? null
     });
     this.isDark = options.theme === "dark";
     this.theme = options.theme === "dark" ? darkTheme : options.theme === "light" || options.theme == null ? lightTheme : options.theme;
@@ -5039,6 +5689,10 @@ var Plot = class {
   addCandlestick(opts) {
     return this.register(new CandlestickLayer(this.gl, opts));
   }
+  /** An OHLC bar chart (low→high line with open/close ticks). Streams like candlesticks. */
+  addOhlc(opts) {
+    return this.register(new OhlcLayer(this.gl, opts));
+  }
   /** Filled polygons (choropleth-capable). Rings are triangulated with earcut. */
   addPatches(opts) {
     return this.register(new PatchesLayer(this.gl, opts));
@@ -5146,21 +5800,31 @@ var Plot = class {
   /** Register an additional named y axis. Series opt in via `addLine({ yAxis })`. */
   addYAxis(id, opts = {}) {
     if (this.yAxes.has(id)) throw new Error(`Y axis "${id}" already exists`);
-    const { type, domain, factors, side, color, ...axisConfig } = opts;
-    const cat = type === "categorical";
-    const scale = makeScale(type ?? "linear", domain ?? [0, 1], factors);
+    const { type, domain, factors, times, side, color, ...axisConfig } = opts;
+    const band = type === "categorical" || type === "ordinal-time";
+    const scale = makeScale(type ?? "linear", domain ?? [0, 1], factors, times);
     this.yAxes.set(id, {
       id,
       scale,
       axis: new Axis(axisConfig),
       side: side ?? "right",
-      auto: !cat && domain == null,
-      initial: cat ? scale.domain : domain ?? null,
+      auto: !band && domain == null,
+      initial: band ? scale.domain : domain ?? null,
       color
     });
     this.autoscale();
     this.requestRender();
   }
+  /** Whether a y axis with this id exists (the primary is always `"y"`). */
+  hasYAxis(id) {
+    return this.yAxes.has(id);
+  }
+  /** Remove a secondary y axis. No-op for the primary `"y"` or an unknown id. */
+  removeYAxis(id) {
+    if (id === "y" || !this.yAxes.has(id)) return;
+    this.yAxes.delete(id);
+    this.requestRender();
+  }
   removeLayer(layer) {
     const i = this.layers.indexOf(layer);
     if (i >= 0) {
@@ -5193,6 +5857,32 @@ var Plot = class {
     }
     this.requestRender();
   }
+  /**
+   * Subscribe to x-domain changes (pan / zoom / home / setView). Fires once per
+   * frame after the domain settles. Returns an unsubscribe function. See {@link linkX}.
+   */
+  onViewChange(cb) {
+    this.viewListeners.push(cb);
+    return () => {
+      this.viewListeners = this.viewListeners.filter((f) => f !== cb);
+    };
+  }
+  /**
+   * Subscribe to the hover cursor's data-space x (or `null` when it leaves the
+   * plot). Returns an unsubscribe function. Used to share a crosshair across panes.
+   */
+  onCursorMove(cb) {
+    this.cursorListeners.push(cb);
+    return () => {
+      this.cursorListeners = this.cursorListeners.filter((f) => f !== cb);
+    };
+  }
+  /** Draw a linked crosshair at this data-space x (pushed from another pane), or clear it with `null`. */
+  setLinkedCursor(dataX) {
+    if (this.linkedCursorX === dataX) return;
+    this.linkedCursorX = dataX;
+    this.requestRender();
+  }
   setYDomain(id, range) {
     const ya = this.yAxes.get(id);
     if (!ya) throw new Error(`Unknown y axis "${id}"`);
@@ -5296,11 +5986,27 @@ var Plot = class {
   primaryY() {
     return this.yAxes.get("y");
   }
+  /** Fire view/cursor listeners once the frame's x-domain + cursor are settled. */
+  emitLinks(region) {
+    const dx = this.scaleX.domain;
+    if (!this.lastEmittedX || this.lastEmittedX[0] !== dx[0] || this.lastEmittedX[1] !== dx[1]) {
+      this.lastEmittedX = [dx[0], dx[1]];
+      for (const cb of this.viewListeners) cb(this.lastEmittedX);
+    }
+    if (this.cursorListeners.length) {
+      const cx = this.hoverEnabled && this.hoverPx ? this.scaleX.invert(Math.max(0, Math.min(1, (this.hoverPx.x - region.left) / region.width))) : null;
+      if (cx !== this.lastEmittedCursor) {
+        this.lastEmittedCursor = cx;
+        for (const cb of this.cursorListeners) cb(cx);
+      }
+    }
+  }
   render() {
     const layout = this.layout();
     const region = plotRegion(layout);
     if (this.equalAspect) this.applyAspect(region);
     if (this.boundedPan) this.clampView();
+    this.emitLinks(region);
     const primary = this.primaryY();
     const ticksX = this.axisX.resolve(this.scaleX);
     const ticksYPrimary = primary.axis.resolve(primary.scale);
@@ -5371,6 +6077,12 @@ var Plot = class {
     if (this.crosshair && this.pressPx) {
       drawCrosshairXY(this.axisCtx, region, this.pressPx.x, this.pressPx.y, this.theme);
     }
+    if (this.linkedCursorX != null) {
+      const nx = this.scaleX.norm(this.linkedCursorX);
+      if (nx >= -1e-3 && nx <= 1.001) {
+        drawCrosshair(this.axisCtx, region, pxX(region, nx), this.theme);
+      }
+    }
     if (this.hoverEnabled && this.hoverPx) {
       this.renderHover(region);
     } else {
@@ -5987,6 +6699,28 @@ var Plot = class {
     this.requestRender();
   }
 };
+function linkX(plots) {
+  let applying = false;
+  const unsubs = [];
+  for (const p of plots) {
+    unsubs.push(
+      p.onViewChange((x) => {
+        if (applying) return;
+        applying = true;
+        for (const q of plots) if (q !== p) q.setView({ x });
+        applying = false;
+      })
+    );
+    unsubs.push(
+      p.onCursorMove((cx) => {
+        for (const q of plots) if (q !== p) q.setLinkedCursor(cx);
+      })
+    );
+  }
+  return () => {
+    for (const u of unsubs) u();
+  };
+}
 
 // src/polar/polar.ts
 var PolarPlot = class {
@@ -6091,7 +6825,7 @@ var PolarPlot = class {
   addLine(opts) {
     const closed = opts.closed ?? false;
     const { x, y, maxR } = this.toXY(opts.theta, opts.r, closed);
-    const layer = new LineLayer(this.gl, { x, y, color: opts.color, width: opts.width ?? 2, decimate: false });
+    const layer = new LineLayer(this.gl, { x, y, color: opts.color, width: opts.width ?? 2, decimate: false, renderType: opts.renderType });
     const entry = { layer, closed, maxR, theta: opts.theta, r: opts.r };
     this.entries.push(entry);
     this.refit();
@@ -6099,7 +6833,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 layer = new ScatterLayer(this.gl, { x, y, color: opts.color, size: opts.size ?? 5, renderType: opts.renderType });
     const entry = { layer, closed: false, maxR, theta: opts.theta, r: opts.r, labels: opts.labels };
     this.entries.push(entry);
     this.refit();
@@ -6559,7 +7293,7 @@ void main() {
   gl_Position = uMVP * vec4(world, 1.0);
 }`
 );
-var FRAG12 = (
+var FRAG13 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -6574,16 +7308,16 @@ void main() {
   outColor = vec4(vColor * shade, 1.0);
 }`
 );
-var programCache13 = /* @__PURE__ */ new WeakMap();
-function getProgram10(gl) {
-  let p = programCache13.get(gl);
+var programCache14 = /* @__PURE__ */ new WeakMap();
+function getProgram11(gl) {
+  let p = programCache14.get(gl);
   if (!p) {
-    p = createProgram(gl, VERT10, FRAG12);
-    programCache13.set(gl, p);
+    p = createProgram(gl, VERT10, FRAG13);
+    programCache14.set(gl, p);
   }
   return p;
 }
-function medianSpacing3(vals, n) {
+function medianSpacing4(vals, n) {
   const s = Array.from({ length: n }, (_, i) => vals[i]).sort((a, b) => a - b);
   const diffs = [];
   for (let i = 1; i < n; i++) {
@@ -6594,62 +7328,22 @@ function medianSpacing3(vals, n) {
   diffs.sort((a, b) => a - b);
   return diffs[Math.floor(diffs.length / 2)];
 }
-var counter17 = 0;
+var counter18 = 0;
 var Bar3DLayer = class {
   constructor(gl, opts) {
     this.buffers = [];
     this.cInfo = null;
     this.lightDir = [0.5, 1, 0.35];
     this.ambient = 0.35;
-    this.id = `bar3d-${counter17++}`;
+    this.id = `bar3d-${counter18++}`;
     this.gl = gl;
-    this.program = getProgram10(gl);
+    this.program = getProgram11(gl);
     this.name = opts.name;
-    const n = Math.min(opts.x.length, opts.y.length, opts.z.length);
-    this.count = n;
-    const dx = medianSpacing3(opts.x, n), dz = medianSpacing3(opts.z, n);
-    this.width = opts.width ?? Math.min(dx, dz) * 0.7;
-    const base = opts.color != null ? Array.isArray(opts.color) ? opts.color : parseColor(opts.color) : [0.24, 0.55, 0.96, 1];
-    const cvals = opts.colorBy?.values ?? (opts.colorBy ? opts.y : null);
-    const cmap = opts.colorBy ? colormap(opts.colorBy.colormap ?? "viridis") : null;
-    let lo = opts.colorBy?.domain?.[0] ?? Infinity;
-    let hi = opts.colorBy?.domain?.[1] ?? -Infinity;
-    if (cmap && cvals && !opts.colorBy?.domain) {
-      for (let i = 0; i < n; i++) {
-        const v = cvals[i];
-        if (v < lo) lo = v;
-        if (v > hi) hi = v;
-      }
-    }
-    const span = hi - lo || 1;
-    if (cmap) this.cInfo = { colormap: opts.colorBy.colormap ?? "viridis", domain: [lo, hi], label: opts.name };
-    else this.colorCss = opts.color != null && typeof opts.color === "string" ? opts.color : "#3b82f6";
-    const inst = new Float32Array(n * 6);
-    this.positions = new Float32Array(n * 3);
-    let minX = Infinity, maxX = -Infinity, minZ = Infinity, maxZ = -Infinity, minY = 0, maxY = 0;
-    const hw = this.width / 2;
-    for (let i = 0; i < n; i++) {
-      const x = opts.x[i], z = opts.z[i], h = opts.y[i];
-      inst[i * 6] = x;
-      inst[i * 6 + 1] = z;
-      inst[i * 6 + 2] = h;
-      this.positions[i * 3] = x;
-      this.positions[i * 3 + 1] = h;
-      this.positions[i * 3 + 2] = z;
-      let c;
-      if (cmap && cvals) c = cmap((cvals[i] - lo) / span);
-      else c = [base[0], base[1], base[2]];
-      inst[i * 6 + 3] = c[0];
-      inst[i * 6 + 4] = c[1];
-      inst[i * 6 + 5] = c[2];
-      if (x - hw < minX) minX = x - hw;
-      if (x + hw > maxX) maxX = x + hw;
-      if (z - hw < minZ) minZ = z - hw;
-      if (z + hw > maxZ) maxZ = z + hw;
-      if (h < minY) minY = h;
-      if (h > maxY) maxY = h;
-    }
-    this.b3 = { x: [minX, maxX], y: [minY, maxY], z: [minZ, maxZ] };
+    this.usage = bufferUsage(gl, opts.renderType);
+    this.optWidth = opts.width;
+    this.colorByOpt = opts.colorBy;
+    this.base = opts.color != null ? Array.isArray(opts.color) ? opts.color : parseColor(opts.color) : [0.24, 0.55, 0.96, 1];
+    if (!opts.colorBy) this.colorCss = opts.color != null && typeof opts.color === "string" ? opts.color : "#3b82f6";
     this.vao = gl.createVertexArray();
     gl.bindVertexArray(this.vao);
     const cubeBuf = gl.createBuffer();
@@ -6661,7 +7355,6 @@ var Bar3DLayer = class {
     gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 24, 12);
     const instBuf = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, instBuf);
-    gl.bufferData(gl.ARRAY_BUFFER, inst, gl.STATIC_DRAW);
     gl.enableVertexAttribArray(2);
     gl.vertexAttribPointer(2, 2, gl.FLOAT, false, 24, 0);
     gl.vertexAttribDivisor(2, 1);
@@ -6673,8 +7366,64 @@ var Bar3DLayer = class {
     gl.vertexAttribDivisor(4, 1);
     gl.bindVertexArray(null);
     this.buffers = [cubeBuf, instBuf];
+    this.instBuf = instBuf;
+    this.build(opts.x, opts.z, opts.y);
     this.uniforms = uniformLocations(gl, this.program, ["uMVP", "uWidth", "uLightDir", "uAmbient"]);
   }
+  /** Build the per-bar instances (base/height/color) and (re)upload the instance buffer. */
+  build(x, z, y) {
+    const gl = this.gl;
+    const n = Math.min(x.length, y.length, z.length);
+    this.count = n;
+    const dx = medianSpacing4(x, n), dz = medianSpacing4(z, n);
+    this.width = this.optWidth ?? Math.min(dx, dz) * 0.7;
+    const base = this.base;
+    const cvals = this.colorByOpt?.values ?? (this.colorByOpt ? y : null);
+    const cmap = this.colorByOpt ? colormap(this.colorByOpt.colormap ?? "viridis") : null;
+    let lo = this.colorByOpt?.domain?.[0] ?? Infinity;
+    let hi = this.colorByOpt?.domain?.[1] ?? -Infinity;
+    if (cmap && cvals && !this.colorByOpt?.domain) {
+      for (let i = 0; i < n; i++) {
+        const v = cvals[i];
+        if (v < lo) lo = v;
+        if (v > hi) hi = v;
+      }
+    }
+    const span = hi - lo || 1;
+    if (cmap) this.cInfo = { colormap: this.colorByOpt.colormap ?? "viridis", domain: [lo, hi], label: this.name };
+    const inst = new Float32Array(n * 6);
+    this.positions = new Float32Array(n * 3);
+    let minX = Infinity, maxX = -Infinity, minZ = Infinity, maxZ = -Infinity, minY = 0, maxY = 0;
+    const hw = this.width / 2;
+    for (let i = 0; i < n; i++) {
+      const px = x[i], pz = z[i], h = y[i];
+      inst[i * 6] = px;
+      inst[i * 6 + 1] = pz;
+      inst[i * 6 + 2] = h;
+      this.positions[i * 3] = px;
+      this.positions[i * 3 + 1] = h;
+      this.positions[i * 3 + 2] = pz;
+      let c;
+      if (cmap && cvals) c = cmap((cvals[i] - lo) / span);
+      else c = [base[0], base[1], base[2]];
+      inst[i * 6 + 3] = c[0];
+      inst[i * 6 + 4] = c[1];
+      inst[i * 6 + 5] = c[2];
+      if (px - hw < minX) minX = px - hw;
+      if (px + hw > maxX) maxX = px + hw;
+      if (pz - hw < minZ) minZ = pz - hw;
+      if (pz + hw > maxZ) maxZ = pz + hw;
+      if (h < minY) minY = h;
+      if (h > maxY) maxY = h;
+    }
+    this.b3 = { x: [minX, maxX], y: [minY, maxY], z: [minZ, maxZ] };
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.instBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, inst, this.usage);
+  }
+  /** Stream new bar positions/heights (instances rebuilt). Call `plot.refresh()` after. */
+  setData(x, z, y) {
+    this.build(x, z, y);
+  }
   bounds3() {
     return this.count ? this.b3 : null;
   }
@@ -6735,7 +7484,7 @@ uniform mat4 uMVP;
 out vec3 vColor;
 void main() { vColor = aColor; gl_Position = uMVP * vec4(aPos, 1.0); }`
 );
-var FRAG13 = (
+var FRAG14 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -6743,26 +7492,41 @@ in vec3 vColor;
 out vec4 outColor;
 void main() { outColor = vec4(vColor, 1.0); }`
 );
-var programCache14 = /* @__PURE__ */ new WeakMap();
-function getProgram11(gl) {
-  let p = programCache14.get(gl);
+var programCache15 = /* @__PURE__ */ new WeakMap();
+function getProgram12(gl) {
+  let p = programCache15.get(gl);
   if (!p) {
-    p = createProgram(gl, VERT11, FRAG13);
-    programCache14.set(gl, p);
+    p = createProgram(gl, VERT11, FRAG14);
+    programCache15.set(gl, p);
   }
   return p;
 }
-var counter18 = 0;
+var counter19 = 0;
 var Contour3DLayer = class {
   constructor(gl, opts) {
     this.cInfo = null;
-    this.id = `contour3d-${counter18++}`;
+    this.id = `contour3d-${counter19++}`;
     this.gl = gl;
-    this.program = getProgram11(gl);
+    this.program = getProgram12(gl);
     this.name = opts.name;
-    const { cols, rows, values } = opts;
-    const [x0, x1] = opts.extentX ?? [0, cols - 1];
-    const [z0, z1] = opts.extentZ ?? [0, rows - 1];
+    this.usage = bufferUsage(gl, opts.renderType);
+    this.cmapName = opts.colormap ?? "viridis";
+    this.levelsOpt = opts.levels;
+    this.fixed = opts.color != null ? Array.isArray(opts.color) ? opts.color : parseColor(opts.color) : null;
+    this.vao = gl.createVertexArray();
+    this.buffer = gl.createBuffer();
+    this.build(opts.values, opts.cols, opts.rows, opts.extentX, opts.extentZ);
+    this.uniforms = uniformLocations(gl, this.program, ["uMVP"]);
+  }
+  /** Marching-squares the grid at each iso level and (re)upload the line buffer. */
+  build(values, cols, rows, extentX, extentZ) {
+    const gl = this.gl;
+    this.cols = cols;
+    this.rows = rows;
+    const [x0, x1] = extentX ?? [0, cols - 1];
+    const [z0, z1] = extentZ ?? [0, rows - 1];
+    this.extentX = [x0, x1];
+    this.extentZ = [z0, z1];
     let vmin = Infinity, vmax = -Infinity;
     for (let i = 0; i < values.length; i++) {
       const v = values[i];
@@ -6770,11 +7534,11 @@ var Contour3DLayer = class {
       if (v > vmax) vmax = v;
     }
     const lspan = vmax - vmin || 1;
-    const count = typeof opts.levels === "number" ? opts.levels : 10;
-    const levels = Array.isArray(opts.levels) ? opts.levels : Array.from({ length: count }, (_, i) => vmin + lspan * (i + 1) / (count + 1));
-    const cmap = colormap(opts.colormap ?? "viridis");
-    const fixed = opts.color != null ? Array.isArray(opts.color) ? opts.color : parseColor(opts.color) : null;
-    if (!fixed) this.cInfo = { colormap: opts.colormap ?? "viridis", domain: [vmin, vmax], label: opts.name };
+    const count = typeof this.levelsOpt === "number" ? this.levelsOpt : 10;
+    const levels = Array.isArray(this.levelsOpt) ? this.levelsOpt : Array.from({ length: count }, (_, i) => vmin + lspan * (i + 1) / (count + 1));
+    const cmap = colormap(this.cmapName);
+    const fixed = this.fixed;
+    if (!fixed) this.cInfo = { colormap: this.cmapName, domain: [vmin, vmax], label: this.name };
     const wx = (c) => x0 + c / (cols - 1) * (x1 - x0);
     const wz = (r) => z0 + r / (rows - 1) * (z1 - z0);
     const at = (c, r) => values[r * cols + c];
@@ -6804,17 +7568,24 @@ var Contour3DLayer = class {
     }
     this.vertCount = data.length / 6;
     this.b3 = { x: [x0, x1], y: [vmin, vmax], z: [z0, z1] };
-    this.vao = gl.createVertexArray();
-    this.buffer = gl.createBuffer();
     gl.bindVertexArray(this.vao);
     gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), this.usage);
     gl.enableVertexAttribArray(0);
     gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 24, 0);
     gl.enableVertexAttribArray(1);
     gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 24, 12);
     gl.bindVertexArray(null);
-    this.uniforms = uniformLocations(gl, this.program, ["uMVP"]);
+  }
+  /** Stream a new scalar field (contours recomputed). Call `plot.refresh()` after. */
+  setData(values, opts) {
+    this.build(
+      values,
+      opts?.cols ?? this.cols,
+      opts?.rows ?? this.rows,
+      opts?.extentX ?? this.extentX,
+      opts?.extentZ ?? this.extentZ
+    );
   }
   bounds3() {
     return this.vertCount ? this.b3 : null;
@@ -7456,7 +8227,7 @@ uniform mat4 uMVP;
 out vec3 vN;
 void main() { vN = aNormal; gl_Position = uMVP * vec4(aPos, 1.0); }`
 );
-var FRAG14 = (
+var FRAG15 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -7473,33 +8244,42 @@ void main() {
   outColor = vec4(uColor * shade * uOpacity, uOpacity);
 }`
 );
-var programCache15 = /* @__PURE__ */ new WeakMap();
-function getProgram12(gl) {
-  let p = programCache15.get(gl);
+var programCache16 = /* @__PURE__ */ new WeakMap();
+function getProgram13(gl) {
+  let p = programCache16.get(gl);
   if (!p) {
-    p = createProgram(gl, VERT12, FRAG14);
-    programCache15.set(gl, p);
+    p = createProgram(gl, VERT12, FRAG15);
+    programCache16.set(gl, p);
   }
   return p;
 }
-var counter19 = 0;
+var counter20 = 0;
 var IsosurfaceLayer = class {
   constructor(gl, opts) {
     this.lightDir = [0.5, 1, 0.35];
     this.ambient = 0.35;
-    this.id = `isosurface-${counter19++}`;
+    this.id = `isosurface-${counter20++}`;
     this.gl = gl;
-    this.program = getProgram12(gl);
+    this.program = getProgram13(gl);
     this.name = opts.name;
+    this.usage = bufferUsage(gl, opts.renderType);
     const ci = opts.color ?? "#38bdf8";
     this.color = Array.isArray(ci) ? ci : parseColor(ci);
     this.colorCss = typeof ci === "string" ? ci : toColorCss(this.color);
     this.opacity = opts.opacity ?? 1;
-    const { positions, normals } = marchingCubes(opts.values, opts.dims, opts.isoLevel, opts.extent);
+    this.vao = gl.createVertexArray();
+    this.buffer = gl.createBuffer();
+    this.build(opts.values, opts.dims, opts.isoLevel, opts.extent);
+    this.uniforms = uniformLocations(gl, this.program, ["uMVP", "uColor", "uLightDir", "uAmbient", "uOpacity"]);
+  }
+  /** Run marching cubes and (re)upload the interleaved pos/normal vertex buffer. */
+  build(values, dims, isoLevel, extent) {
+    const gl = this.gl;
+    const { positions, normals } = marchingCubes(values, dims, isoLevel, extent);
     this.vertCount = positions.length / 3;
-    const ex = opts.extent?.x ?? [0, opts.dims[0] - 1];
-    const ey = opts.extent?.y ?? [0, opts.dims[1] - 1];
-    const ez = opts.extent?.z ?? [0, opts.dims[2] - 1];
+    const ex = extent?.x ?? [0, dims[0] - 1];
+    const ey = extent?.y ?? [0, dims[1] - 1];
+    const ez = extent?.z ?? [0, dims[2] - 1];
     this.b3 = { x: ex, y: ey, z: ez };
     const data = new Float32Array(this.vertCount * 6);
     for (let i = 0; i < this.vertCount; i++) {
@@ -7510,17 +8290,18 @@ var IsosurfaceLayer = class {
       data[i * 6 + 4] = normals[i * 3 + 1];
       data[i * 6 + 5] = normals[i * 3 + 2];
     }
-    this.vao = gl.createVertexArray();
-    this.buffer = gl.createBuffer();
     gl.bindVertexArray(this.vao);
     gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
-    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+    gl.bufferData(gl.ARRAY_BUFFER, data, this.usage);
     gl.enableVertexAttribArray(0);
     gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 24, 0);
     gl.enableVertexAttribArray(1);
     gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 24, 12);
     gl.bindVertexArray(null);
-    this.uniforms = uniformLocations(gl, this.program, ["uMVP", "uColor", "uLightDir", "uAmbient", "uOpacity"]);
+  }
+  /** Stream a new volume + iso level (marching-cubes mesh recomputed). Call `plot.refresh()` after. */
+  setData(values, dims, isoLevel, extent) {
+    this.build(values, dims, isoLevel, extent);
   }
   bounds3() {
     return this.vertCount ? this.b3 : null;
@@ -7557,7 +8338,7 @@ layout(location = 0) in vec3 aPos;
 uniform mat4 uMVP;
 void main() { gl_Position = uMVP * vec4(aPos, 1.0); }`
 );
-var FRAG15 = (
+var FRAG16 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -7565,21 +8346,22 @@ uniform vec4 uColor;
 out vec4 outColor;
 void main() { outColor = uColor; }`
 );
-var programCache16 = /* @__PURE__ */ new WeakMap();
-function getProgram13(gl) {
-  let p = programCache16.get(gl);
+var programCache17 = /* @__PURE__ */ new WeakMap();
+function getProgram14(gl) {
+  let p = programCache17.get(gl);
   if (!p) {
-    p = createProgram(gl, VERT13, FRAG15);
-    programCache16.set(gl, p);
+    p = createProgram(gl, VERT13, FRAG16);
+    programCache17.set(gl, p);
   }
   return p;
 }
-var counter20 = 0;
+var counter21 = 0;
 var Line3DLayer = class {
   constructor(gl, opts) {
-    this.id = `line3d-${counter20++}`;
+    this.id = `line3d-${counter21++}`;
     this.gl = gl;
-    this.program = getProgram13(gl);
+    this.program = getProgram14(gl);
+    this.usage = bufferUsage(gl, opts.renderType);
     this.name = opts.name;
     const ci = opts.color ?? "#38bdf8";
     this.color = Array.isArray(ci) ? ci : parseColor(ci);
@@ -7606,7 +8388,7 @@ var Line3DLayer = class {
     this.buffer = gl.createBuffer();
     gl.bindVertexArray(this.vao);
     gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
-    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+    gl.bufferData(gl.ARRAY_BUFFER, data, this.usage);
     gl.enableVertexAttribArray(0);
     gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
     gl.bindVertexArray(null);
@@ -7639,7 +8421,7 @@ var Line3DLayer = class {
     }
     this.b3 = { x: [minX, maxX], y: [minY, maxY], z: [minZ, maxZ] };
     this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffer);
-    this.gl.bufferData(this.gl.ARRAY_BUFFER, data, this.gl.DYNAMIC_DRAW);
+    this.gl.bufferData(this.gl.ARRAY_BUFFER, data, this.usage);
   }
   draw(gl, mvp) {
     if (this.count < 2) return;
@@ -7749,7 +8531,7 @@ void main() {
   gl_PointSize = aSize > 0.0 ? aSize : uSize;
 }`
 );
-var FRAG16 = (
+var FRAG17 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -7761,23 +8543,24 @@ void main() {
   outColor = vec4(vColor, 1.0);
 }`
 );
-var programCache17 = /* @__PURE__ */ new WeakMap();
-function getProgram14(gl) {
-  let p = programCache17.get(gl);
+var programCache18 = /* @__PURE__ */ new WeakMap();
+function getProgram15(gl) {
+  let p = programCache18.get(gl);
   if (!p) {
-    p = createProgram(gl, VERT14, FRAG16);
-    programCache17.set(gl, p);
+    p = createProgram(gl, VERT14, FRAG17);
+    programCache18.set(gl, p);
   }
   return p;
 }
-var counter21 = 0;
+var counter22 = 0;
 var PointCloudLayer = class {
   constructor(gl, opts) {
     this.b3 = { x: [0, 0], y: [0, 0], z: [0, 0] };
     this.cInfo = null;
-    this.id = `points3d-${counter21++}`;
+    this.id = `points3d-${counter22++}`;
     this.gl = gl;
-    this.program = getProgram14(gl);
+    this.program = getProgram15(gl);
+    this.usage = bufferUsage(gl, opts.renderType);
     this.size = opts.size ?? 4;
     this.name = opts.name;
     this.labels = opts.labels;
@@ -7829,7 +8612,7 @@ var PointCloudLayer = class {
     this.buffer = buffer;
     gl.bindVertexArray(vao);
     gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-    gl.bufferData(gl.ARRAY_BUFFER, this.data, gl.STATIC_DRAW);
+    gl.bufferData(gl.ARRAY_BUFFER, this.data, this.usage);
     gl.enableVertexAttribArray(0);
     gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 28, 0);
     gl.enableVertexAttribArray(1);
@@ -7866,7 +8649,7 @@ var PointCloudLayer = class {
     }
     this.updateBounds();
     this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffer);
-    this.gl.bufferData(this.gl.ARRAY_BUFFER, this.data, this.gl.DYNAMIC_DRAW);
+    this.gl.bufferData(this.gl.ARRAY_BUFFER, this.data, this.usage);
   }
   bounds3() {
     return this.count ? this.b3 : null;
@@ -7904,7 +8687,7 @@ uniform mat4 uMVP;
 out vec3 vColor;
 void main() { vColor = aColor; gl_Position = uMVP * vec4(aPos, 1.0); }`
 );
-var FRAG17 = (
+var FRAG18 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -7912,12 +8695,12 @@ in vec3 vColor;
 out vec4 outColor;
 void main() { outColor = vec4(vColor, 1.0); }`
 );
-var programCache18 = /* @__PURE__ */ new WeakMap();
-function getProgram15(gl) {
-  let p = programCache18.get(gl);
+var programCache19 = /* @__PURE__ */ new WeakMap();
+function getProgram16(gl) {
+  let p = programCache19.get(gl);
   if (!p) {
-    p = createProgram(gl, VERT15, FRAG17);
-    programCache18.set(gl, p);
+    p = createProgram(gl, VERT15, FRAG18);
+    programCache19.set(gl, p);
   }
   return p;
 }
@@ -7928,23 +8711,37 @@ function norm(x, y, z) {
 function cross2(a, b) {
   return [a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0]];
 }
-var counter22 = 0;
+var counter23 = 0;
 var Quiver3DLayer = class {
   constructor(gl, opts) {
     this.cInfo = null;
-    this.id = `quiver3d-${counter22++}`;
+    this.id = `quiver3d-${counter23++}`;
     this.gl = gl;
-    this.program = getProgram15(gl);
+    this.program = getProgram16(gl);
     this.name = opts.name;
-    const scale = opts.scale ?? 1;
-    const headSize = opts.headSize ?? 0.28;
-    const n = Math.min(opts.x.length, opts.y.length, opts.z.length, opts.u.length, opts.v.length, opts.w.length);
-    const base = opts.color != null ? Array.isArray(opts.color) ? opts.color : parseColor(opts.color) : [0.5, 0.8, 1, 1];
-    const cmap = opts.colorBy ? colormap(opts.colorBy.colormap ?? "viridis") : null;
-    let lo = opts.colorBy?.domain?.[0] ?? Infinity;
-    let hi = opts.colorBy?.domain?.[1] ?? -Infinity;
-    const mag = (i) => Math.hypot(opts.u[i], opts.v[i], opts.w[i]);
-    if (cmap && !opts.colorBy?.domain) {
+    this.usage = bufferUsage(gl, opts.renderType);
+    this.scale = opts.scale ?? 1;
+    this.headSize = opts.headSize ?? 0.28;
+    this.colorByOpt = opts.colorBy;
+    this.base = opts.color != null ? Array.isArray(opts.color) ? opts.color : parseColor(opts.color) : [0.5, 0.8, 1, 1];
+    if (!opts.colorBy) this.colorCss = typeof opts.color === "string" ? opts.color : toColorCss(this.base);
+    this.vao = gl.createVertexArray();
+    this.buffer = gl.createBuffer();
+    this.build(opts.x, opts.y, opts.z, opts.u, opts.v, opts.w);
+    this.uniforms = uniformLocations(gl, this.program, ["uMVP"]);
+  }
+  /** Build the arrow line geometry (shaft + 4-wing head) and (re)upload the vertex buffer. */
+  build(x, y, z, u, v, w) {
+    const gl = this.gl;
+    const scale = this.scale;
+    const headSize = this.headSize;
+    const n = Math.min(x.length, y.length, z.length, u.length, v.length, w.length);
+    const base = this.base;
+    const cmap = this.colorByOpt ? colormap(this.colorByOpt.colormap ?? "viridis") : null;
+    let lo = this.colorByOpt?.domain?.[0] ?? Infinity;
+    let hi = this.colorByOpt?.domain?.[1] ?? -Infinity;
+    const mag = (i) => Math.hypot(u[i], v[i], w[i]);
+    if (cmap && !this.colorByOpt?.domain) {
       for (let i = 0; i < n; i++) {
         const m = mag(i);
         if (m < lo) lo = m;
@@ -7952,22 +8749,21 @@ var Quiver3DLayer = class {
       }
     }
     const span = hi - lo || 1;
-    if (cmap) this.cInfo = { colormap: opts.colorBy.colormap ?? "viridis", domain: [lo, hi], label: opts.name };
-    else this.colorCss = typeof opts.color === "string" ? opts.color : toColorCss(base);
+    if (cmap) this.cInfo = { colormap: this.colorByOpt.colormap ?? "viridis", domain: [lo, hi], label: this.name };
     const data = [];
     this.positions = new Float32Array(n * 3);
     let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity, minZ = Infinity, maxZ = -Infinity;
-    const bump = (x, y, z) => {
-      if (x < minX) minX = x;
-      if (x > maxX) maxX = x;
-      if (y < minY) minY = y;
-      if (y > maxY) maxY = y;
-      if (z < minZ) minZ = z;
-      if (z > maxZ) maxZ = z;
+    const bump = (x2, y2, z2) => {
+      if (x2 < minX) minX = x2;
+      if (x2 > maxX) maxX = x2;
+      if (y2 < minY) minY = y2;
+      if (y2 > maxY) maxY = y2;
+      if (z2 < minZ) minZ = z2;
+      if (z2 > maxZ) maxZ = z2;
     };
     for (let i = 0; i < n; i++) {
-      const bx = opts.x[i], by = opts.y[i], bz = opts.z[i];
-      const ux = opts.u[i] * scale, uy = opts.v[i] * scale, uz = opts.w[i] * scale;
+      const bx = x[i], by = y[i], bz = z[i];
+      const ux = u[i] * scale, uy = v[i] * scale, uz = w[i] * scale;
       const tx = bx + ux, ty = by + uy, tz = bz + uz;
       this.positions[i * 3] = bx;
       this.positions[i * 3 + 1] = by;
@@ -7994,17 +8790,18 @@ var Quiver3DLayer = class {
     }
     this.vertCount = data.length / 6;
     this.b3 = { x: [minX, maxX], y: [minY, maxY], z: [minZ, maxZ] };
-    this.vao = gl.createVertexArray();
-    this.buffer = gl.createBuffer();
     gl.bindVertexArray(this.vao);
     gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), this.usage);
     gl.enableVertexAttribArray(0);
     gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 24, 0);
     gl.enableVertexAttribArray(1);
     gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 24, 12);
     gl.bindVertexArray(null);
-    this.uniforms = uniformLocations(gl, this.program, ["uMVP"]);
+  }
+  /** Stream a new vector field (arrows rebuilt). Call `plot.refresh()` after. */
+  setData(x, y, z, u, v, w) {
+    this.build(x, y, z, u, v, w);
   }
   bounds3() {
     return this.vertCount ? this.b3 : null;
@@ -8042,7 +8839,7 @@ out vec3 vColor;
 out vec3 vN;
 void main() { vColor = aColor; vN = aNormal; gl_Position = uMVP * vec4(aPos, 1.0); }`
 );
-var FRAG18 = (
+var FRAG19 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -8075,12 +8872,12 @@ in vec3 vColor;
 out vec4 outColor;
 void main() { outColor = vec4(vColor, 1.0); }`
 );
-var programCache19 = /* @__PURE__ */ new WeakMap();
-function getProgram16(gl) {
-  let p = programCache19.get(gl);
+var programCache20 = /* @__PURE__ */ new WeakMap();
+function getProgram17(gl) {
+  let p = programCache20.get(gl);
   if (!p) {
-    p = createProgram(gl, VERT16, FRAG18);
-    programCache19.set(gl, p);
+    p = createProgram(gl, VERT16, FRAG19);
+    programCache20.set(gl, p);
   }
   return p;
 }
@@ -8093,21 +8890,33 @@ function getWireProgram(gl) {
   }
   return p;
 }
-var counter23 = 0;
+var counter24 = 0;
 var SurfaceLayer = class {
   constructor(gl, opts) {
     this.vDomain = [0, 1];
     this.lightDir = [0.5, 1, 0.35];
     this.ambient = 0.35;
-    this.id = `surface-${counter23++}`;
+    this.id = `surface-${counter24++}`;
     this.gl = gl;
     this.wireframe = opts.wireframe ?? false;
-    this.program = this.wireframe ? getWireProgram(gl) : getProgram16(gl);
+    this.program = this.wireframe ? getWireProgram(gl) : getProgram17(gl);
     this.name = opts.name;
     this.cmapName = opts.colormap ?? "viridis";
-    const { cols, rows, values } = opts;
-    const [x0, x1] = opts.extentX ?? [0, cols - 1];
-    const [z0, z1] = opts.extentZ ?? [0, rows - 1];
+    this.usage = bufferUsage(gl, opts.renderType);
+    this.vao = gl.createVertexArray();
+    this.buffer = gl.createBuffer();
+    this.build(opts.values, opts.cols, opts.rows, opts.extentX, opts.extentZ);
+    this.uniforms = uniformLocations(gl, this.program, ["uMVP", "uLightDir", "uAmbient"]);
+  }
+  /** Build the mesh (positions/normals/colors or wireframe) and (re)upload the vertex buffer. */
+  build(values, cols, rows, extentX, extentZ) {
+    const gl = this.gl;
+    this.cols = cols;
+    this.rows = rows;
+    const [x0, x1] = extentX ?? [0, cols - 1];
+    const [z0, z1] = extentZ ?? [0, rows - 1];
+    this.extentX = [x0, x1];
+    this.extentZ = [z0, z1];
     const dxWorld = (x1 - x0) / Math.max(1, cols - 1);
     const dzWorld = (z1 - z0) / Math.max(1, rows - 1);
     let vmin = Infinity, vmax = -Infinity;
@@ -8117,7 +8926,7 @@ var SurfaceLayer = class {
       if (v > vmax) vmax = v;
     }
     const span = vmax - vmin || 1;
-    const cmap = colormap(opts.colormap ?? "viridis");
+    const cmap = colormap(this.cmapName);
     const wx = (c) => x0 + c / (cols - 1) * (x1 - x0);
     const wz = (r) => z0 + r / (rows - 1) * (z1 - z0);
     const at = (c, r) => values[r * cols + c];
@@ -8131,12 +8940,8 @@ var SurfaceLayer = class {
     const data = [];
     this.b3 = { x: [x0, x1], y: [vmin, vmax], z: [z0, z1] };
     this.vDomain = [vmin, vmax];
-    const vao = gl.createVertexArray();
-    const buffer = gl.createBuffer();
-    this.vao = vao;
-    this.buffer = buffer;
-    gl.bindVertexArray(vao);
-    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.bindVertexArray(this.vao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
     if (this.wireframe) {
       const vertL = (c, r) => {
         const [cr, cg, cb] = cmap((at(c, r) - vmin) / span);
@@ -8155,7 +8960,7 @@ var SurfaceLayer = class {
         }
       }
       this.vertexCount = data.length / 6;
-      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
+      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), this.usage);
       gl.enableVertexAttribArray(0);
       gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 24, 0);
       gl.enableVertexAttribArray(1);
@@ -8177,7 +8982,7 @@ var SurfaceLayer = class {
         }
       }
       this.vertexCount = data.length / 9;
-      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
+      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), this.usage);
       gl.enableVertexAttribArray(0);
       gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 36, 0);
       gl.enableVertexAttribArray(1);
@@ -8186,7 +8991,16 @@ var SurfaceLayer = class {
       gl.vertexAttribPointer(2, 3, gl.FLOAT, false, 36, 24);
     }
     gl.bindVertexArray(null);
-    this.uniforms = uniformLocations(gl, this.program, ["uMVP", "uLightDir", "uAmbient"]);
+  }
+  /** Stream a new height grid (mesh/normals/wireframe rebuilt). Call `plot.refresh()` after. */
+  setData(values, opts) {
+    this.build(
+      values,
+      opts?.cols ?? this.cols,
+      opts?.rows ?? this.rows,
+      opts?.extentX ?? this.extentX,
+      opts?.extentZ ?? this.extentZ
+    );
   }
   bounds3() {
     return this.b3;
@@ -8231,7 +9045,7 @@ uniform mat4 uMVP;
 out vec3 vLocal;
 void main() { vLocal = aLocal; gl_Position = uMVP * vec4(aPos, 1.0); }`
 );
-var FRAG19 = (
+var FRAG20 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -8269,12 +9083,12 @@ void main() {
   outColor = acc; // premultiplied
 }`
 );
-var programCache20 = /* @__PURE__ */ new WeakMap();
-function getProgram17(gl) {
-  let p = programCache20.get(gl);
+var programCache21 = /* @__PURE__ */ new WeakMap();
+function getProgram18(gl) {
+  let p = programCache21.get(gl);
   if (!p) {
-    p = createProgram(gl, VERT17, FRAG19);
-    programCache20.set(gl, p);
+    p = createProgram(gl, VERT17, FRAG20);
+    programCache21.set(gl, p);
   }
   return p;
 }
@@ -8296,45 +9110,35 @@ var CUBE_FACES = [
   [0, 3, 7, 0, 7, 4],
   [1, 5, 6, 1, 6, 2]
 ];
-var counter24 = 0;
+var counter25 = 0;
 var VolumeLayer = class {
   constructor(gl, opts) {
+    this.vDomain = [0, 1];
     this.camLocal = [0.5, 0.5, 2];
-    this.id = `volume-${counter24++}`;
+    this.id = `volume-${counter25++}`;
     this.gl = gl;
-    this.program = getProgram17(gl);
+    this.program = getProgram18(gl);
     this.name = opts.name;
+    this.usage = bufferUsage(gl, opts.renderType);
     this.density = opts.density ?? 1;
     this.cmapName = opts.colormap ?? "viridis";
+    this.dims = opts.dims;
+    this.domainOpt = opts.domain;
     const [nx, ny, nz] = opts.dims;
     const ex = opts.extent?.x ?? [0, nx - 1];
     const ey = opts.extent?.y ?? [0, ny - 1];
     const ez = opts.extent?.z ?? [0, nz - 1];
     this.ext = { x: ex, y: ey, z: ez };
     this.b3 = { x: ex, y: ey, z: ez };
-    let vmin = opts.domain?.[0] ?? Infinity;
-    let vmax = opts.domain?.[1] ?? -Infinity;
-    if (!opts.domain) {
-      for (let i = 0; i < opts.values.length; i++) {
-        const v = opts.values[i];
-        if (v < vmin) vmin = v;
-        if (v > vmax) vmax = v;
-      }
-    }
-    this.vDomain = [vmin, vmax];
-    const span = vmax - vmin || 1;
-    const voxels = new Uint8Array(nx * ny * nz);
-    for (let i = 0; i < voxels.length; i++) voxels[i] = Math.max(0, Math.min(255, Math.round((opts.values[i] - vmin) / span * 255)));
     this.tex = gl.createTexture();
     gl.bindTexture(gl.TEXTURE_3D, this.tex);
-    gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
-    gl.texImage3D(gl.TEXTURE_3D, 0, gl.R8, nx, ny, nz, 0, gl.RED, gl.UNSIGNED_BYTE, voxels);
     gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
     gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
     gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
     gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
     gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_WRAP_R, gl.CLAMP_TO_EDGE);
     gl.bindTexture(gl.TEXTURE_3D, null);
+    this.uploadVolume(opts.values);
     const cmap = colormap(this.cmapName);
     const lutPix = new Uint8Array(256 * 4);
     for (let i = 0; i < 256; i++) {
@@ -8365,7 +9169,7 @@ var VolumeLayer = class {
     this.buffer = gl.createBuffer();
     gl.bindVertexArray(this.vao);
     gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), this.usage);
     gl.enableVertexAttribArray(0);
     gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 24, 0);
     gl.enableVertexAttribArray(1);
@@ -8373,6 +9177,32 @@ var VolumeLayer = class {
     gl.bindVertexArray(null);
     this.uniforms = uniformLocations(gl, this.program, ["uMVP", "uVolume", "uLUT", "uCamLocal", "uDensity"]);
   }
+  /** Normalize the scalar field and (re)upload it into the R8 3D texture. */
+  uploadVolume(values) {
+    const gl = this.gl;
+    const [nx, ny, nz] = this.dims;
+    let vmin = this.domainOpt?.[0] ?? Infinity;
+    let vmax = this.domainOpt?.[1] ?? -Infinity;
+    if (!this.domainOpt) {
+      for (let i = 0; i < values.length; i++) {
+        const v = values[i];
+        if (v < vmin) vmin = v;
+        if (v > vmax) vmax = v;
+      }
+    }
+    this.vDomain = [vmin, vmax];
+    const span = vmax - vmin || 1;
+    const voxels = new Uint8Array(nx * ny * nz);
+    for (let i = 0; i < voxels.length; i++) voxels[i] = Math.max(0, Math.min(255, Math.round((values[i] - vmin) / span * 255)));
+    gl.bindTexture(gl.TEXTURE_3D, this.tex);
+    gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
+    gl.texImage3D(gl.TEXTURE_3D, 0, gl.R8, nx, ny, nz, 0, gl.RED, gl.UNSIGNED_BYTE, voxels);
+    gl.bindTexture(gl.TEXTURE_3D, null);
+  }
+  /** Stream a new scalar volume (same dims); re-uploads the 3D texture. Call `plot.refresh()` after. */
+  setData(values) {
+    this.uploadVolume(values);
+  }
   bounds3() {
     return this.b3;
   }
@@ -9212,6 +10042,401 @@ var Plot3D = class {
     this.controlsEl = panel;
   }
 };
+
+// src/finance/indicators.ts
+function sma(values, period) {
+  const n = values.length;
+  const out = new Float64Array(n).fill(NaN);
+  if (period <= 0 || n < period) return out;
+  let sum = 0;
+  for (let i = 0; i < n; i++) {
+    sum += values[i];
+    if (i >= period) sum -= values[i - period];
+    if (i >= period - 1) out[i] = sum / period;
+  }
+  return out;
+}
+function wma(values, period) {
+  const n = values.length;
+  const out = new Float64Array(n).fill(NaN);
+  if (period <= 0 || n < period) return out;
+  const denom = period * (period + 1) / 2;
+  for (let i = period - 1; i < n; i++) {
+    let acc = 0;
+    for (let k = 0; k < period; k++) acc += values[i - period + 1 + k] * (k + 1);
+    out[i] = acc / denom;
+  }
+  return out;
+}
+function ema(values, period) {
+  const n = values.length;
+  const out = new Float64Array(n).fill(NaN);
+  if (period <= 0 || n < period) return out;
+  const alpha = 2 / (period + 1);
+  let seed = 0;
+  for (let i = 0; i < period; i++) seed += values[i];
+  let prev = seed / period;
+  out[period - 1] = prev;
+  for (let i = period; i < n; i++) {
+    prev = values[i] * alpha + prev * (1 - alpha);
+    out[i] = prev;
+  }
+  return out;
+}
+function rollingStd(values, period) {
+  const n = values.length;
+  const out = new Float64Array(n).fill(NaN);
+  if (period <= 0 || n < period) return out;
+  let sum = 0, sumSq = 0;
+  for (let i = 0; i < n; i++) {
+    const v = values[i];
+    sum += v;
+    sumSq += v * v;
+    if (i >= period) {
+      const old = values[i - period];
+      sum -= old;
+      sumSq -= old * old;
+    }
+    if (i >= period - 1) {
+      const mean = sum / period;
+      const variance = Math.max(0, sumSq / period - mean * mean);
+      out[i] = Math.sqrt(variance);
+    }
+  }
+  return out;
+}
+function bollinger(close, period = 20, k = 2) {
+  const middle = sma(close, period);
+  const sd = rollingStd(close, period);
+  const n = close.length;
+  const upper = new Float64Array(n).fill(NaN);
+  const lower = new Float64Array(n).fill(NaN);
+  for (let i = 0; i < n; i++) {
+    if (!Number.isNaN(middle[i])) {
+      upper[i] = middle[i] + k * sd[i];
+      lower[i] = middle[i] - k * sd[i];
+    }
+  }
+  return { middle, upper, lower };
+}
+function rsi(close, period = 14) {
+  const n = close.length;
+  const out = new Float64Array(n).fill(NaN);
+  if (period <= 0 || n <= period) return out;
+  let gain = 0, loss = 0;
+  for (let i = 1; i <= period; i++) {
+    const ch = close[i] - close[i - 1];
+    if (ch >= 0) gain += ch;
+    else loss -= ch;
+  }
+  let avgGain = gain / period, avgLoss = loss / period;
+  out[period] = avgLoss === 0 ? 100 : 100 - 100 / (1 + avgGain / avgLoss);
+  for (let i = period + 1; i < n; i++) {
+    const ch = close[i] - close[i - 1];
+    const g = ch > 0 ? ch : 0, l = ch < 0 ? -ch : 0;
+    avgGain = (avgGain * (period - 1) + g) / period;
+    avgLoss = (avgLoss * (period - 1) + l) / period;
+    out[i] = avgLoss === 0 ? 100 : 100 - 100 / (1 + avgGain / avgLoss);
+  }
+  return out;
+}
+function macd(close, fast = 12, slow = 26, signalPeriod = 9) {
+  const n = close.length;
+  const emaFast = ema(close, fast);
+  const emaSlow = ema(close, slow);
+  const line = new Float64Array(n).fill(NaN);
+  for (let i = 0; i < n; i++) {
+    if (!Number.isNaN(emaFast[i]) && !Number.isNaN(emaSlow[i])) line[i] = emaFast[i] - emaSlow[i];
+  }
+  const firstValid = line.findIndex((v) => !Number.isNaN(v));
+  const signal = new Float64Array(n).fill(NaN);
+  if (firstValid >= 0) {
+    const seg = line.subarray(firstValid);
+    const sig = ema(seg, signalPeriod);
+    for (let i = 0; i < sig.length; i++) signal[firstValid + i] = sig[i];
+  }
+  const histogram2 = new Float64Array(n).fill(NaN);
+  for (let i = 0; i < n; i++) {
+    if (!Number.isNaN(line[i]) && !Number.isNaN(signal[i])) histogram2[i] = line[i] - signal[i];
+  }
+  return { macd: line, signal, histogram: histogram2 };
+}
+function vwap(high, low, close, volume) {
+  const n = Math.min(high.length, low.length, close.length, volume.length);
+  const out = new Float64Array(n).fill(NaN);
+  let cumPV = 0, cumV = 0;
+  for (let i = 0; i < n; i++) {
+    const typical = (high[i] + low[i] + close[i]) / 3;
+    cumPV += typical * volume[i];
+    cumV += volume[i];
+    out[i] = cumV === 0 ? NaN : cumPV / cumV;
+  }
+  return out;
+}
+function trueRange(high, low, close) {
+  const n = Math.min(high.length, low.length, close.length);
+  const out = new Float64Array(n);
+  if (n > 0) out[0] = high[0] - low[0];
+  for (let i = 1; i < n; i++) {
+    const pc = close[i - 1];
+    out[i] = Math.max(high[i] - low[i], Math.abs(high[i] - pc), Math.abs(low[i] - pc));
+  }
+  return out;
+}
+function atr(high, low, close, period = 14) {
+  const tr = trueRange(high, low, close);
+  const n = tr.length;
+  const out = new Float64Array(n).fill(NaN);
+  if (n < period || period <= 0) return out;
+  let sum = 0;
+  for (let i = 0; i < period; i++) sum += tr[i];
+  let prev = sum / period;
+  out[period - 1] = prev;
+  for (let i = period; i < n; i++) {
+    prev = (prev * (period - 1) + tr[i]) / period;
+    out[i] = prev;
+  }
+  return out;
+}
+function firstFinite(values) {
+  for (let i = 0; i < values.length; i++) if (!Number.isNaN(values[i])) return i;
+  return -1;
+}
+
+// src/finance/transforms.ts
+function heikinAshi(d) {
+  const n = Math.min(d.open.length, d.high.length, d.low.length, d.close.length);
+  const open = new Float64Array(n), high = new Float64Array(n), low = new Float64Array(n), close = new Float64Array(n);
+  for (let i = 0; i < n; i++) {
+    const o = d.open[i], h = d.high[i], l = d.low[i], c = d.close[i];
+    const haClose = (o + h + l + c) / 4;
+    const haOpen = i === 0 ? (o + c) / 2 : (open[i - 1] + close[i - 1]) / 2;
+    close[i] = haClose;
+    open[i] = haOpen;
+    high[i] = Math.max(h, haOpen, haClose);
+    low[i] = Math.min(l, haOpen, haClose);
+  }
+  return { open, high, low, close };
+}
+function renko(close, brickSize) {
+  const bricks = [];
+  const n = close.length;
+  if (n === 0 || brickSize <= 0) return bricks;
+  let base = close[0];
+  let x = 0;
+  for (let i = 1; i < n; i++) {
+    let diff = close[i] - base;
+    while (Math.abs(diff) >= brickSize) {
+      const up = diff > 0;
+      const open = base;
+      const next = base + (up ? brickSize : -brickSize);
+      bricks.push({ x: x++, open, close: next, up });
+      base = next;
+      diff = close[i] - base;
+    }
+  }
+  return bricks;
+}
+function lineBreak(close, lines = 3) {
+  const bricks = [];
+  const n = close.length;
+  if (n === 0) return bricks;
+  const ends = [close[0]];
+  let x = 0;
+  for (let i = 1; i < n; i++) {
+    const c = close[i];
+    const recent = ends.slice(-lines);
+    const hi = Math.max(...recent);
+    const lo = Math.min(...recent);
+    if (c > hi) {
+      bricks.push({ x: x++, open: ends[ends.length - 1], close: c, up: true });
+      ends.push(c);
+    } else if (c < lo) {
+      bricks.push({ x: x++, open: ends[ends.length - 1], close: c, up: false });
+      ends.push(c);
+    }
+  }
+  return bricks;
+}
+function pointAndFigure(high, low, boxSize, reversal = 3) {
+  const n = Math.min(high.length, low.length);
+  const cols = [];
+  if (n === 0 || boxSize <= 0) return cols;
+  const q = (p) => Math.floor(p / boxSize) * boxSize;
+  let dir = null;
+  let top = q(high[0]), bottom = q(low[0]);
+  let col = 0;
+  const pushCol = (kind, from, to) => {
+    const boxes = [];
+    for (let b = Math.min(from, to); b <= Math.max(from, to) + 1e-9; b += boxSize) boxes.push(b + boxSize / 2);
+    cols.push({ col, kind, from, to, boxes });
+  };
+  for (let i = 1; i < n; i++) {
+    const h = q(high[i]), l = q(low[i]);
+    if (dir === null) {
+      dir = h - bottom >= l - bottom ? "X" : "O";
+    }
+    if (dir === "X") {
+      if (h > top) top = h;
+      else if (bottom - l >= reversal * boxSize || top - l >= reversal * boxSize) {
+        pushCol("X", bottom, top);
+        col++;
+        dir = "O";
+        bottom = l;
+      }
+    } else {
+      if (l < bottom) bottom = l;
+      else if (h - top >= reversal * boxSize || h - bottom >= reversal * boxSize) {
+        pushCol("O", top, bottom);
+        col++;
+        dir = "X";
+        top = h;
+      }
+    }
+  }
+  if (dir === "X") pushCol("X", bottom, top);
+  else if (dir === "O") pushCol("O", top, bottom);
+  return cols;
+}
+function volumeProfile(price, volume, bins = 24) {
+  const n = Math.min(price.length, volume.length);
+  let lo = Infinity, hi = -Infinity;
+  for (let i = 0; i < n; i++) {
+    const p = price[i];
+    if (p < lo) lo = p;
+    if (p > hi) hi = p;
+  }
+  if (!isFinite(lo) || !isFinite(hi) || bins <= 0) {
+    return { levels: new Float64Array(0), volume: new Float64Array(0), binSize: 0, priceMin: 0, priceMax: 0, pocIndex: -1 };
+  }
+  if (hi === lo) hi = lo + 1;
+  const binSize = (hi - lo) / bins;
+  const levels = new Float64Array(bins);
+  const vol = new Float64Array(bins);
+  for (let b = 0; b < bins; b++) levels[b] = lo + (b + 0.5) * binSize;
+  for (let i = 0; i < n; i++) {
+    let b = Math.floor((price[i] - lo) / binSize);
+    if (b < 0) b = 0;
+    else if (b >= bins) b = bins - 1;
+    vol[b] += volume[i];
+  }
+  let pocIndex = 0;
+  for (let b = 1; b < bins; b++) if (vol[b] > vol[pocIndex]) pocIndex = b;
+  return { levels, volume: vol, binSize, priceMin: lo, priceMax: hi, pocIndex };
+}
+function depth(bids, asks) {
+  const b = Array.from({ length: bids.length }, (_, i) => bids[i]).sort((p, q) => q[0] - p[0]);
+  const a = Array.from({ length: asks.length }, (_, i) => asks[i]).sort((p, q) => p[0] - q[0]);
+  const bidPrice = new Float64Array(b.length), bidCum = new Float64Array(b.length);
+  let cum = 0;
+  for (let i = 0; i < b.length; i++) {
+    cum += b[i][1];
+    bidPrice[i] = b[i][0];
+    bidCum[i] = cum;
+  }
+  bidPrice.reverse();
+  bidCum.reverse();
+  const askPrice = new Float64Array(a.length), askCum = new Float64Array(a.length);
+  cum = 0;
+  for (let i = 0; i < a.length; i++) {
+    cum += a[i][1];
+    askPrice[i] = a[i][0];
+    askCum[i] = cum;
+  }
+  return { bidPrice, bidCum, askPrice, askCum };
+}
+
+// src/finance/charts.ts
+function addHeikinAshi(plot, opts) {
+  const ha = heikinAshi(opts);
+  return plot.addCandlestick({ ...opts, open: ha.open, high: ha.high, low: ha.low, close: ha.close });
+}
+function addRenko(plot, opts) {
+  const bricks = renko(opts.close, opts.brickSize);
+  const n = bricks.length;
+  const x = new Float64Array(n), open = new Float64Array(n), high = new Float64Array(n);
+  const low = new Float64Array(n), close = new Float64Array(n);
+  for (let i = 0; i < n; i++) {
+    const b = bricks[i];
+    x[i] = b.x;
+    open[i] = b.open;
+    close[i] = b.close;
+    high[i] = Math.max(b.open, b.close);
+    low[i] = Math.min(b.open, b.close);
+  }
+  return plot.addCandlestick({
+    x,
+    open,
+    high,
+    low,
+    close,
+    width: 1,
+    upColor: opts.upColor,
+    downColor: opts.downColor,
+    wickWidth: 1e-3,
+    name: opts.name,
+    yAxis: opts.yAxis,
+    renderType: opts.renderType
+  });
+}
+function addVolumeProfile(plot, opts) {
+  const vp = volumeProfile(opts.price, opts.volume, opts.bins ?? 24);
+  const base = opts.color ?? "#60a5fa";
+  const colors = opts.pocColor ? Array.from(vp.levels, (_, i) => i === vp.pocIndex ? opts.pocColor : base) : void 0;
+  return plot.addBar({
+    x: vp.levels,
+    y: vp.volume,
+    orientation: "h",
+    base: 0,
+    width: vp.binSize * 0.85,
+    color: base,
+    colors,
+    name: opts.name,
+    yAxis: opts.yAxis,
+    renderType: opts.renderType
+  });
+}
+function addBollinger(plot, opts) {
+  const { middle, upper, lower } = bollinger(opts.close, opts.period ?? 20, opts.k ?? 2);
+  const start = firstFinite(middle);
+  const slice = (a) => start < 0 ? a.subarray(0, 0) : a.subarray(start);
+  const n = middle.length;
+  const xs = new Float64Array(Math.max(0, n - Math.max(0, start)));
+  for (let i = 0; i < xs.length; i++) xs[i] = opts.x[start + i];
+  const color = opts.color ?? "#a78bfa";
+  const width = opts.width ?? 1;
+  const rt = opts.renderType;
+  const band = opts.bandColor ? plot.addArea({ x: xs, y: slice(upper), base: slice(lower), color: opts.bandColor, yAxis: opts.yAxis, renderType: rt }) : void 0;
+  return {
+    band,
+    upper: plot.addLine({ x: xs, y: slice(upper), color, width, yAxis: opts.yAxis, renderType: rt }),
+    middle: plot.addLine({ x: xs, y: slice(middle), color, width, name: "BB", yAxis: opts.yAxis, renderType: rt }),
+    lower: plot.addLine({ x: xs, y: slice(lower), color, width, yAxis: opts.yAxis, renderType: rt })
+  };
+}
+function addDepth(plot, opts) {
+  const d = depth(opts.bids, opts.asks);
+  return {
+    bid: plot.addArea({
+      x: d.bidPrice,
+      y: d.bidCum,
+      base: 0,
+      color: opts.bidColor ?? "rgba(38,166,154,0.4)",
+      name: "bids",
+      yAxis: opts.yAxis,
+      renderType: opts.renderType
+    }),
+    ask: plot.addArea({
+      x: d.askPrice,
+      y: d.askCum,
+      base: 0,
+      color: opts.askColor ?? "rgba(239,83,80,0.4)",
+      name: "asks",
+      yAxis: opts.yAxis,
+      renderType: opts.renderType
+    })
+  };
+}
 export {
   AreaLayer,
   Axis,
@@ -9232,6 +10457,8 @@ export {
   LineLayer,
   LinearScale,
   LogScale,
+  OhlcLayer,
+  OrdinalTimeScale,
   PatchesLayer,
   PieLayer,
   Plot,
@@ -9247,30 +10474,54 @@ export {
   TRANSFORM_UNIFORMS,
   TimeScale,
   VolumeLayer,
+  addBollinger,
+  addDepth,
+  addHeikinAshi,
+  addRenko,
+  addVolumeProfile,
+  atr,
   autoTicks,
+  bollinger,
   boxStats,
+  bufferUsage,
   colormap,
   colormapLUT,
   createProgram,
   createToolbar,
   darkTheme,
   defaultFormat,
+  depth,
   earcut,
+  ema,
   fft,
+  firstFinite,
   forceLayout,
+  heikinAshi,
   histogram,
   kde,
   lightTheme,
+  lineBreak,
+  linkX,
+  macd,
   makeScale,
   marchingCubes,
   parseColor,
+  pointAndFigure,
   quantileSorted,
+  renko,
   resolveAxisStyle,
   resolveTicks,
+  rollingStd,
+  rsi,
   setTransformUniforms,
+  sma,
   spectrogram,
   toColorCss,
+  trueRange,
   uniformLocations,
-  withMinorTicks
+  volumeProfile,
+  vwap,
+  withMinorTicks,
+  wma
 };
 //# sourceMappingURL=index.js.map