@photonviz/core 0.2.1 → 0.3.0

package/dist/index.js

@@ -1,11 +1,11 @@
 // src/axes/ticks.ts
 function niceStep(rawStep) {
   const mag = Math.pow(10, Math.floor(Math.log10(rawStep)));
-  const norm = rawStep / mag;
+  const norm2 = rawStep / mag;
   let nice;
-  if (norm < 1.5) nice = 1;
-  else if (norm < 3) nice = 2;
-  else if (norm < 7) nice = 5;
+  if (norm2 < 1.5) nice = 1;
+  else if (norm2 < 3) nice = 2;
+  else if (norm2 < 7) nice = 5;
   else nice = 10;
   return nice * mag;
 }
@@ -408,6 +408,7 @@ var BarLayer = class {
     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);
     const vao = gl.createVertexArray();
     this.vao = vao;
@@ -429,23 +430,30 @@ var BarLayer = class {
   }
   buildRects(x, y, base, n) {
     const width = this.barWidth, off = this.offset;
+    const horizontal = this.orientation === "h";
     const baseAt = (i) => base == null ? 0 : typeof base === "number" ? base : base[i];
-    this.xRef = n > 0 ? x[0] : 0;
-    this.yRef = n > 0 ? y[0] : 0;
+    const posRef = n > 0 ? x[0] : 0;
+    const valRef = n > 0 ? y[0] : 0;
+    this.xRef = horizontal ? valRef : posRef;
+    this.yRef = horizontal ? posRef : valRef;
     const rects = new Float32Array(n * 4);
     let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
     for (let i = 0; i < n; i++) {
-      const cx = x[i] + off;
-      const x0 = cx - width / 2, x1 = cx + width / 2;
-      const b = baseAt(i), top = y[i];
-      rects[i * 4] = x0 - this.xRef;
-      rects[i * 4 + 1] = b - this.yRef;
-      rects[i * 4 + 2] = x1 - this.xRef;
-      rects[i * 4 + 3] = top - this.yRef;
-      minX = Math.min(minX, x0);
-      maxX = Math.max(maxX, x1);
-      minY = Math.min(minY, b, top);
-      maxY = Math.max(maxY, b, top);
+      const cpos = x[i] + off;
+      const p0 = cpos - width / 2, p1 = cpos + width / 2;
+      const b = baseAt(i), val = y[i];
+      const ax0 = horizontal ? b : p0;
+      const ax1 = horizontal ? val : p1;
+      const ay0 = horizontal ? p0 : b;
+      const ay1 = horizontal ? p1 : val;
+      rects[i * 4] = ax0 - this.xRef;
+      rects[i * 4 + 1] = ay0 - this.yRef;
+      rects[i * 4 + 2] = ax1 - this.xRef;
+      rects[i * 4 + 3] = ay1 - this.yRef;
+      minX = Math.min(minX, ax0, ax1);
+      maxX = Math.max(maxX, ax0, ax1);
+      minY = Math.min(minY, ay0, ay1);
+      maxY = Math.max(maxY, ay0, ay1);
     }
     this.xBounds = [minX, maxX];
     this.yBounds = [minY, maxY];
@@ -638,7 +646,7 @@ function kde(values, lo, hi, points = 64, bandwidth) {
   const h = bandwidth ?? 1.06 * sd * Math.pow(Math.max(1, n), -0.2);
   const xs = new Float64Array(points);
   const ys = new Float64Array(points);
-  const norm = 1 / (n * h * Math.sqrt(2 * Math.PI));
+  const norm2 = 1 / (n * h * Math.sqrt(2 * Math.PI));
   for (let p = 0; p < points; p++) {
     const x = lo + (hi - lo) * p / (points - 1);
     let sum = 0;
@@ -647,7 +655,7 @@ function kde(values, lo, hi, points = 64, bandwidth) {
       sum += Math.exp(-0.5 * u * u);
     }
     xs[p] = x;
-    ys[p] = sum * norm;
+    ys[p] = sum * norm2;
   }
   return { xs, ys };
 }
@@ -1082,17 +1090,38 @@ var ANCHORS = {
     [0.95, 0.95, 0.95]
   ]
 };
-function colormap(name = "viridis") {
+var LUT_SIZE = 256;
+var lutCache = /* @__PURE__ */ new Map();
+function buildLUT(name) {
   const anchors = ANCHORS[name];
   const last = anchors.length - 1;
-  return (t) => {
-    const clamped = t <= 0 ? 0 : t >= 1 ? 1 : t;
-    const pos = clamped * last;
+  const lut = new Float32Array(LUT_SIZE * 3);
+  for (let s = 0; s < LUT_SIZE; s++) {
+    const pos = s / (LUT_SIZE - 1) * last;
     const i = Math.min(last - 1, Math.floor(pos));
     const f = pos - i;
     const a = anchors[i];
     const b = anchors[i + 1];
-    return [a[0] + (b[0] - a[0]) * f, a[1] + (b[1] - a[1]) * f, a[2] + (b[2] - a[2]) * f];
+    lut[s * 3] = a[0] + (b[0] - a[0]) * f;
+    lut[s * 3 + 1] = a[1] + (b[1] - a[1]) * f;
+    lut[s * 3 + 2] = a[2] + (b[2] - a[2]) * f;
+  }
+  return lut;
+}
+function colormapLUT(name = "viridis") {
+  let lut = lutCache.get(name);
+  if (!lut) {
+    lut = buildLUT(name);
+    lutCache.set(name, lut);
+  }
+  return lut;
+}
+function colormap(name = "viridis") {
+  const lut = colormapLUT(name);
+  return (t) => {
+    const c = t <= 0 ? 0 : t >= 1 ? 1 : t;
+    const j = (c * (LUT_SIZE - 1) | 0) * 3;
+    return [lut[j], lut[j + 1], lut[j + 2]];
   };
 }
 
@@ -1450,6 +1479,148 @@ var ErrorBarLayer = class {
   }
 };
 
+// src/layers/graph.ts
+var EDGE_VERT = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+layout(location = 0) in vec2 aPos;
+${TRANSFORM_GLSL}
+void main() { gl_Position = vec4(dataToClip(aPos), 0.0, 1.0); }`
+);
+var SOLID_FRAG2 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+uniform vec4 uColor;
+out vec4 outColor;
+void main() { outColor = vec4(uColor.rgb * uColor.a, uColor.a); }`
+);
+var NODE_VERT = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+layout(location = 0) in vec2 aPos;
+uniform float uSize;
+${TRANSFORM_GLSL}
+void main() {
+  gl_Position = vec4(dataToClip(aPos), 0.0, 1.0);
+  gl_PointSize = uSize;
+}`
+);
+var NODE_FRAG = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+uniform vec4 uColor;
+out vec4 outColor;
+void main() {
+  vec2 p = gl_PointCoord * 2.0 - 1.0;
+  float r = length(p);
+  if (r > 1.0) discard;
+  float a = smoothstep(1.0, 0.82, r);
+  outColor = vec4(uColor.rgb * uColor.a * a, uColor.a * a);
+}`
+);
+var programCache5 = /* @__PURE__ */ new WeakMap();
+function getPrograms(gl) {
+  let p = programCache5.get(gl);
+  if (!p) {
+    p = { edge: createProgram(gl, EDGE_VERT, SOLID_FRAG2), node: createProgram(gl, NODE_VERT, NODE_FRAG) };
+    programCache5.set(gl, p);
+  }
+  return p;
+}
+var counter7 = 0;
+var GraphLayer = class {
+  constructor(gl, opts) {
+    this.buffers = [];
+    this.xRef = 0;
+    this.yRef = 0;
+    this.xBounds = [0, 0];
+    this.yBounds = [0, 0];
+    this.id = `graph-${counter7++}`;
+    this.gl = gl;
+    this.progs = getPrograms(gl);
+    this.name = opts.name ?? this.id;
+    this.yAxis = opts.yAxis ?? "y";
+    const nc = opts.nodeColor ?? "#60a5fa";
+    this.nodeColor = Array.isArray(nc) ? nc : parseColor(nc);
+    this.colorCss = typeof nc === "string" ? nc : toColorCss(this.nodeColor);
+    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);
+    this.nodeCount = n;
+    this.xRef = n > 0 ? opts.x[0] : 0;
+    this.yRef = n > 0 ? opts.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];
+      nodePos[i * 2] = px - this.xRef;
+      nodePos[i * 2 + 1] = py - this.yRef;
+      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 edgePos = [];
+    for (const [a, b] of opts.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);
+    }
+    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"]);
+  }
+  bounds() {
+    if (this.nodeCount === 0) return null;
+    return { x: this.xBounds, y: this.yBounds };
+  }
+  draw(state) {
+    if (this.nodeCount === 0) return;
+    const gl = state.gl;
+    if (this.edgeVerts > 0) {
+      gl.useProgram(this.progs.edge);
+      setTransformUniforms(gl, this.edgeUniforms, state.x, state.y, this.xRef, this.yRef);
+      gl.uniform4f(this.edgeUniforms.uColor, this.edgeColor[0], this.edgeColor[1], this.edgeColor[2], this.edgeColor[3]);
+      gl.bindVertexArray(this.edgeVao);
+      gl.drawArrays(gl.LINES, 0, this.edgeVerts);
+    }
+    gl.useProgram(this.progs.node);
+    setTransformUniforms(gl, this.nodeUniforms, state.x, state.y, this.xRef, this.yRef);
+    gl.uniform4f(this.nodeUniforms.uColor, this.nodeColor[0], this.nodeColor[1], this.nodeColor[2], this.nodeColor[3]);
+    gl.uniform1f(this.nodeUniforms.uSize, this.nodeSize * state.dpr);
+    gl.bindVertexArray(this.nodeVao);
+    gl.drawArrays(gl.POINTS, 0, this.nodeCount);
+    gl.bindVertexArray(null);
+  }
+  dispose() {
+    this.gl.deleteVertexArray(this.nodeVao);
+    this.gl.deleteVertexArray(this.edgeVao);
+    for (const b of this.buffers) this.gl.deleteBuffer(b);
+  }
+};
+
 // src/layers/heatmap.ts
 var VERT5 = (
   /* glsl */
@@ -1476,19 +1647,19 @@ void main() {
   outColor = vec4(c.rgb * c.a, c.a);
 }`
 );
-var programCache5 = /* @__PURE__ */ new WeakMap();
+var programCache6 = /* @__PURE__ */ new WeakMap();
 function getProgram5(gl) {
-  let p = programCache5.get(gl);
+  let p = programCache6.get(gl);
   if (!p) {
     p = createProgram(gl, VERT5, FRAG6);
-    programCache5.set(gl, p);
+    programCache6.set(gl, p);
   }
   return p;
 }
-var counter7 = 0;
+var counter8 = 0;
 var HeatmapLayer = class {
   constructor(gl, opts) {
-    this.id = `heatmap-${counter7++}`;
+    this.id = `heatmap-${counter8++}`;
     this.gl = gl;
     this.program = getProgram5(gl);
     this.yAxis = opts.yAxis ?? "y";
@@ -1498,7 +1669,7 @@ var HeatmapLayer = class {
     this.xRef = x0;
     this.yRef = y0;
     const { cols, rows, values } = opts;
-    const cmap = colormap(opts.colormap ?? "viridis");
+    const lut = colormapLUT(opts.colormap ?? "viridis");
     let lo = opts.domain?.[0] ?? Infinity;
     let hi = opts.domain?.[1] ?? -Infinity;
     if (!opts.domain) {
@@ -1511,10 +1682,12 @@ var HeatmapLayer = class {
     const span = hi - lo || 1;
     const pixels = new Uint8Array(cols * rows * 4);
     for (let i = 0; i < cols * rows; i++) {
-      const [r, g, b] = cmap((values[i] - lo) / span);
-      pixels[i * 4] = Math.round(r * 255);
-      pixels[i * 4 + 1] = Math.round(g * 255);
-      pixels[i * 4 + 2] = Math.round(b * 255);
+      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;
     }
     const texture = gl.createTexture();
@@ -1624,16 +1797,16 @@ var HEX = (() => {
   }
   return new Float32Array(verts);
 })();
-var programCache6 = /* @__PURE__ */ new WeakMap();
+var programCache7 = /* @__PURE__ */ new WeakMap();
 function getProgram6(gl) {
-  let p = programCache6.get(gl);
+  let p = programCache7.get(gl);
   if (!p) {
     p = createProgram(gl, VERT6, FRAG7);
-    programCache6.set(gl, p);
+    programCache7.set(gl, p);
   }
   return p;
 }
-var counter8 = 0;
+var counter9 = 0;
 var HexbinLayer = class {
   constructor(gl, opts) {
     this.buffers = [];
@@ -1641,7 +1814,7 @@ var HexbinLayer = class {
     this.yRef = 0;
     this.xBounds = [0, 0];
     this.yBounds = [0, 0];
-    this.id = `hexbin-${counter8++}`;
+    this.id = `hexbin-${counter9++}`;
     this.gl = gl;
     this.program = getProgram6(gl);
     this.yAxis = opts.yAxis ?? "y";
@@ -1739,6 +1912,155 @@ var HexbinLayer = class {
   }
 };
 
+// src/layers/image.ts
+var VERT7 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+layout(location = 0) in vec2 aPos;  // offset data space
+layout(location = 1) in vec2 aUV;
+${TRANSFORM_GLSL}
+out vec2 vUV;
+void main() {
+  vUV = aUV;
+  gl_Position = vec4(dataToClip(aPos), 0.0, 1.0);
+}`
+);
+var FRAG8 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+in vec2 vUV;
+uniform sampler2D uTex;
+uniform float uOpacity;
+out vec4 outColor;
+void main() {
+  vec4 c = texture(uTex, vUV);
+  float a = c.a * uOpacity;
+  outColor = vec4(c.rgb * a, a);
+}`
+);
+var programCache8 = /* @__PURE__ */ new WeakMap();
+function getProgram7(gl) {
+  let p = programCache8.get(gl);
+  if (!p) {
+    p = createProgram(gl, VERT7, FRAG8);
+    programCache8.set(gl, p);
+  }
+  return p;
+}
+var counter10 = 0;
+var ImageLayer = class {
+  constructor(gl, opts) {
+    this.colorCss = "#94a3b8";
+    this.ready = false;
+    this.img = null;
+    this.id = `image-${counter10++}`;
+    this.gl = gl;
+    this.program = getProgram7(gl);
+    this.name = opts.name ?? this.id;
+    this.yAxis = opts.yAxis ?? "y";
+    this.ext = opts.extent;
+    this.opacity = opts.opacity ?? 1;
+    this.smooth = opts.smooth !== false;
+    const [x0, x1] = opts.extent.x;
+    const [y0, y1] = opts.extent.y;
+    this.xRef = x0;
+    this.yRef = y0;
+    this.texture = gl.createTexture();
+    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);
+    }
+    const data = new Float32Array([
+      x0 - this.xRef,
+      y0 - this.yRef,
+      0,
+      0,
+      x1 - this.xRef,
+      y0 - this.yRef,
+      1,
+      0,
+      x1 - this.xRef,
+      y1 - this.yRef,
+      1,
+      1,
+      x0 - this.xRef,
+      y0 - this.yRef,
+      0,
+      0,
+      x1 - this.xRef,
+      y1 - this.yRef,
+      1,
+      1,
+      x0 - this.xRef,
+      y1 - this.yRef,
+      0,
+      1
+    ]);
+    const vao = gl.createVertexArray();
+    const buffer = gl.createBuffer();
+    this.vao = vao;
+    this.buffer = buffer;
+    gl.bindVertexArray(vao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 16, 0);
+    gl.enableVertexAttribArray(1);
+    gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 16, 8);
+    gl.bindVertexArray(null);
+    this.uniforms = uniformLocations(gl, this.program, [...TRANSFORM_UNIFORMS, "uTex", "uOpacity"]);
+  }
+  upload(src) {
+    const gl = this.gl;
+    gl.bindTexture(gl.TEXTURE_2D, this.texture);
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, src);
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+    const filter = this.smooth ? gl.LINEAR : gl.NEAREST;
+    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.ready = true;
+  }
+  bounds() {
+    return { x: this.ext.x, y: this.ext.y };
+  }
+  draw(state) {
+    if (!this.ready) return;
+    const gl = state.gl;
+    gl.useProgram(this.program);
+    setTransformUniforms(gl, this.uniforms, state.x, state.y, this.xRef, this.yRef);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, this.texture);
+    gl.uniform1i(this.uniforms.uTex, 0);
+    gl.uniform1f(this.uniforms.uOpacity, this.opacity);
+    gl.bindVertexArray(this.vao);
+    gl.drawArrays(gl.TRIANGLES, 0, 6);
+    gl.bindVertexArray(null);
+  }
+  dispose() {
+    if (this.img) this.img.onload = null;
+    this.gl.deleteVertexArray(this.vao);
+    this.gl.deleteBuffer(this.buffer);
+    this.gl.deleteTexture(this.texture);
+  }
+};
+
 // src/layers/line-util.ts
 function decimateIndices(ys, i0, i1, cols) {
   const out = [i0];
@@ -1832,9 +2154,9 @@ ${log}`);
   }
   return sh;
 }
-var programCache7 = /* @__PURE__ */ new WeakMap();
+var programCache9 = /* @__PURE__ */ new WeakMap();
 function getDecProgram(gl) {
-  if (programCache7.has(gl)) return programCache7.get(gl);
+  if (programCache9.has(gl)) return programCache9.get(gl);
   let result = null;
   try {
     const vs = compile(gl, gl.VERTEX_SHADER, DEC_VERT);
@@ -1858,7 +2180,7 @@ function getDecProgram(gl) {
   } catch {
     result = null;
   }
-  programCache7.set(gl, result);
+  programCache9.set(gl, result);
   return result;
 }
 var GpuDecimator = class {
@@ -1975,7 +2297,7 @@ function pickNearest(xs, ys, count, mode, cursorPx, cursorPy, project, gatePx =
 
 // src/layers/line.ts
 var GPU_DECIMATE_MIN = 2e5;
-var VERT7 = (
+var VERT8 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -2005,7 +2327,7 @@ void main() {
   gl_Position = vec4((pos / uResolution) * 2.0 - 1.0, 0.0, 1.0);
 }`
 );
-var FRAG8 = (
+var FRAG9 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -2125,12 +2447,12 @@ void main() {
 }`
 );
 var CORNERS2 = new Float32Array([0, -1, 1, -1, 1, 1, 0, -1, 1, 1, 0, 1]);
-var programCache8 = /* @__PURE__ */ new WeakMap();
-function getProgram7(gl) {
-  let p = programCache8.get(gl);
+var programCache10 = /* @__PURE__ */ new WeakMap();
+function getProgram8(gl) {
+  let p = programCache10.get(gl);
   if (!p) {
-    p = createProgram(gl, VERT7, FRAG8);
-    programCache8.set(gl, p);
+    p = createProgram(gl, VERT8, FRAG9);
+    programCache10.set(gl, p);
   }
   return p;
 }
@@ -2172,7 +2494,7 @@ function upperBound(a, v) {
   }
   return lo;
 }
-var counter9 = 0;
+var counter11 = 0;
 var LineLayer = class {
   constructor(gl, opts) {
     this.gpuDec = null;
@@ -2182,9 +2504,9 @@ var LineLayer = class {
     this.yBounds = [0, 0];
     this.decKey = "";
     this.decSegments = 0;
-    this.id = `line-${counter9++}`;
+    this.id = `line-${counter11++}`;
     this.gl = gl;
-    this.program = getProgram7(gl);
+    this.program = getProgram8(gl);
     this.joinProgram = getJoinProgram(gl);
     this.width = opts.width ?? 1.5;
     this.joinStyle = opts.join ?? "round";
@@ -2433,14 +2755,757 @@ var LineLayer = class {
   }
 };
 
-// src/layers/quiver.ts
-var SHAFT_VERT = (
-  /* glsl */
-  `#version 300 es
-precision highp float;
-layout(location = 0) in vec2 aCorner;  // (along 0..1, side -1..1)
-layout(location = 1) in vec4 aArrow;   // (bx,by,tx,ty) offset data space
-layout(location = 2) in vec4 aColor;
+// 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 {
+  constructor(i, x, y) {
+    this.i = i;
+    this.x = x;
+    this.y = y;
+    this.prev = this;
+    this.next = this;
+    this.steiner = false;
+    /** Morton (z-order) code; 0 until {@link indexCurve} assigns it. */
+    this.z = 0;
+    /** Neighbours in the z-order-sorted list (null outside the hashed path). */
+    this.prevZ = null;
+    this.nextZ = null;
+  }
+};
+function earcut(data, holeIndices, dim = 2) {
+  const hasHoles = holeIndices != null && holeIndices.length > 0;
+  const outerLen = hasHoles ? holeIndices[0] * dim : data.length;
+  let outerNode = linkedList(data, 0, outerLen, dim, true);
+  const triangles = [];
+  if (!outerNode || outerNode.next === outerNode.prev) return triangles;
+  if (hasHoles) outerNode = eliminateHoles(data, holeIndices, outerNode, dim);
+  let minX = 0;
+  let minY = 0;
+  let invSize = 0;
+  if (data.length > Z_ORDER_THRESHOLD * dim) {
+    minX = Infinity;
+    minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (let i = 0; i < outerLen; i += dim) {
+      const x = data[i];
+      const y = data[i + 1];
+      if (x < minX) minX = x;
+      if (y < minY) minY = y;
+      if (x > maxX) maxX = x;
+      if (y > maxY) maxY = y;
+    }
+    const size = Math.max(maxX - minX, maxY - minY);
+    invSize = size !== 0 ? 32767 / size : 0;
+  }
+  earcutLinked(outerNode, triangles, dim, minX, minY, invSize, 0);
+  return triangles;
+}
+function linkedList(data, start, end, dim, clockwise) {
+  let last = null;
+  if (clockwise === ringArea(data, start, end, dim) > 0) {
+    for (let i = start; i < end; i += dim) last = insertNode(i, data[i], data[i + 1], last);
+  } else {
+    for (let i = end - dim; i >= start; i -= dim) last = insertNode(i, data[i], data[i + 1], last);
+  }
+  if (last && equals(last, last.next)) {
+    removeNode(last);
+    last = last.next;
+  }
+  return last;
+}
+function filterPoints(start, end) {
+  if (!start) return start;
+  let e = end ?? start;
+  let p = start;
+  let again;
+  do {
+    again = false;
+    if (!p.steiner && (equals(p, p.next) || area(p.prev, p, p.next) === 0)) {
+      removeNode(p);
+      p = e = p.prev;
+      if (p === p.next) break;
+      again = true;
+    } else {
+      p = p.next;
+    }
+  } while (again || p !== e);
+  return e;
+}
+function earcutLinked(earStart, triangles, dim, minX, minY, invSize, pass) {
+  if (!earStart) return;
+  let ear = earStart;
+  if (pass === 0 && invSize) indexCurve(ear, minX, minY, invSize);
+  let stop = earStart;
+  while (ear.prev !== ear.next) {
+    const prev = ear.prev;
+    const next = ear.next;
+    const found = invSize ? isEarHashed(ear, minX, minY, invSize) : isEar(ear);
+    if (found) {
+      triangles.push(prev.i / dim | 0, ear.i / dim | 0, next.i / dim | 0);
+      removeNode(ear);
+      ear = next.next;
+      stop = next.next;
+      continue;
+    }
+    ear = next;
+    if (ear === stop) {
+      if (pass === 0) earcutLinked(filterPoints(ear), triangles, dim, minX, minY, invSize, 1);
+      else if (pass === 1) {
+        const cured = cureLocalIntersections(filterPoints(ear), triangles, dim);
+        earcutLinked(cured, triangles, dim, minX, minY, invSize, 2);
+      } else if (pass === 2) splitEarcut(ear, triangles, dim, minX, minY, invSize);
+      break;
+    }
+  }
+}
+function isEar(ear) {
+  const a = ear.prev;
+  const b = ear;
+  const c = ear.next;
+  if (area(a, b, c) >= 0) return false;
+  let p = ear.next.next;
+  while (p !== ear.prev) {
+    if (pointInTriangle(a.x, a.y, b.x, b.y, c.x, c.y, p.x, p.y) && area(p.prev, p, p.next) >= 0) {
+      return false;
+    }
+    p = p.next;
+  }
+  return true;
+}
+function isEarHashed(ear, minX, minY, invSize) {
+  const a = ear.prev;
+  const b = ear;
+  const c = ear.next;
+  if (area(a, b, c) >= 0) return false;
+  const ax = a.x;
+  const bx = b.x;
+  const cx = c.x;
+  const ay = a.y;
+  const by = b.y;
+  const cy = c.y;
+  const x0 = Math.min(ax, bx, cx);
+  const y0 = Math.min(ay, by, cy);
+  const x1 = Math.max(ax, bx, cx);
+  const y1 = Math.max(ay, by, cy);
+  const minZ = zOrder(x0, y0, minX, minY, invSize);
+  const maxZ = zOrder(x1, y1, minX, minY, invSize);
+  let p = ear.prevZ;
+  let n = ear.nextZ;
+  const blocks = (q) => q.x >= x0 && q.x <= x1 && q.y >= y0 && q.y <= y1 && q !== a && q !== c && pointInTriangle(ax, ay, bx, by, cx, cy, q.x, q.y) && area(q.prev, q, q.next) >= 0;
+  while (p && p.z >= minZ && n && n.z <= maxZ) {
+    if (blocks(p)) return false;
+    p = p.prevZ;
+    if (blocks(n)) return false;
+    n = n.nextZ;
+  }
+  while (p && p.z >= minZ) {
+    if (blocks(p)) return false;
+    p = p.prevZ;
+  }
+  while (n && n.z <= maxZ) {
+    if (blocks(n)) return false;
+    n = n.nextZ;
+  }
+  return true;
+}
+function eliminateHoles(data, holeIndices, outerNode, dim) {
+  const queue = [];
+  for (let i = 0, len = holeIndices.length; i < len; i++) {
+    const start = holeIndices[i] * dim;
+    const end = i < len - 1 ? holeIndices[i + 1] * dim : data.length;
+    const list = linkedList(data, start, end, dim, false);
+    if (list) {
+      if (list === list.next) list.steiner = true;
+      queue.push(getLeftmost(list));
+    }
+  }
+  queue.sort((a, b) => a.x - b.x);
+  let node = outerNode;
+  for (const hole of queue) node = eliminateHole(hole, node);
+  return node;
+}
+function eliminateHole(hole, outerNode) {
+  const bridge = findHoleBridge(hole, outerNode);
+  if (!bridge) return outerNode;
+  const bridgeReverse = splitPolygon(bridge, hole);
+  filterPoints(bridgeReverse, bridgeReverse.next);
+  return filterPoints(bridge, bridge.next);
+}
+function findHoleBridge(hole, outerNode) {
+  let p = outerNode;
+  const hx = hole.x;
+  const hy = hole.y;
+  let qx = -Infinity;
+  let m = null;
+  do {
+    if (hy <= p.y && hy >= p.next.y && p.next.y !== p.y) {
+      const x = p.x + (hy - p.y) / (p.next.y - p.y) * (p.next.x - p.x);
+      if (x <= hx && x > qx) {
+        qx = x;
+        m = p.x < p.next.x ? p : p.next;
+        if (x === hx) return m;
+      }
+    }
+    p = p.next;
+  } while (p !== outerNode);
+  if (!m) return null;
+  const stop = m;
+  const mx = m.x;
+  const my = m.y;
+  let tanMin = Infinity;
+  p = m;
+  do {
+    if (hx >= p.x && p.x >= mx && hx !== p.x && pointInTriangle(hy < my ? hx : qx, hy, mx, my, hy < my ? qx : hx, hy, p.x, p.y)) {
+      const tan = Math.abs(hy - p.y) / (hx - p.x);
+      if (locallyInside(p, hole) && (tan < tanMin || tan === tanMin && (p.x > m.x || p.x === m.x && sectorContainsSector(m, p)))) {
+        m = p;
+        tanMin = tan;
+      }
+    }
+    p = p.next;
+  } while (p !== stop);
+  return m;
+}
+function cureLocalIntersections(start, triangles, dim) {
+  let p = start;
+  do {
+    const a = p.prev;
+    const b = p.next.next;
+    if (!equals(a, b) && intersects(a, p, p.next, b) && locallyInside(a, b) && locallyInside(b, a)) {
+      triangles.push(a.i / dim | 0, p.i / dim | 0, b.i / dim | 0);
+      removeNode(p);
+      removeNode(p.next);
+      p = start = b;
+    }
+    p = p.next;
+  } while (p !== start);
+  return filterPoints(p);
+}
+function splitEarcut(start, triangles, dim, minX, minY, invSize) {
+  let a = start;
+  do {
+    let b = a.next.next;
+    while (b !== a.prev) {
+      if (a.i !== b.i && isValidDiagonal(a, b)) {
+        let c = splitPolygon(a, b);
+        const a2 = filterPoints(a, a.next);
+        c = filterPoints(c, c.next);
+        earcutLinked(a2, triangles, dim, minX, minY, invSize, 0);
+        earcutLinked(c, triangles, dim, minX, minY, invSize, 0);
+        return;
+      }
+      b = b.next;
+    }
+    a = a.next;
+  } while (a !== start);
+}
+function area(p, q, r) {
+  return (q.y - p.y) * (r.x - q.x) - (q.x - p.x) * (r.y - q.y);
+}
+function equals(a, b) {
+  return a.x === b.x && a.y === b.y;
+}
+function pointInTriangle(ax, ay, bx, by, cx, cy, px, py) {
+  return (cx - px) * (ay - py) - (ax - px) * (cy - py) >= 0 && (ax - px) * (by - py) - (bx - px) * (ay - py) >= 0 && (bx - px) * (cy - py) - (cx - px) * (by - py) >= 0;
+}
+function isValidDiagonal(a, b) {
+  return a.next.i !== b.i && a.prev.i !== b.i && !intersectsPolygon(a, b) && (locallyInside(a, b) && locallyInside(b, a) && middleInside(a, b) && (area(a.prev, a, b.prev) !== 0 || area(a, b.prev, b) !== 0) || equals(a, b) && area(a.prev, a, a.next) > 0 && area(b.prev, b, b.next) > 0);
+}
+function onSegment(p, q, r) {
+  return q.x <= Math.max(p.x, r.x) && q.x >= Math.min(p.x, r.x) && q.y <= Math.max(p.y, r.y) && q.y >= Math.min(p.y, r.y);
+}
+function sign(n) {
+  return n > 0 ? 1 : n < 0 ? -1 : 0;
+}
+function intersects(p1, q1, p2, q2) {
+  const o1 = sign(area(p1, q1, p2));
+  const o2 = sign(area(p1, q1, q2));
+  const o3 = sign(area(p2, q2, p1));
+  const o4 = sign(area(p2, q2, q1));
+  if (o1 !== o2 && o3 !== o4) return true;
+  if (o1 === 0 && onSegment(p1, p2, q1)) return true;
+  if (o2 === 0 && onSegment(p1, q2, q1)) return true;
+  if (o3 === 0 && onSegment(p2, p1, q2)) return true;
+  if (o4 === 0 && onSegment(p2, q1, q2)) return true;
+  return false;
+}
+function intersectsPolygon(a, b) {
+  let p = a;
+  do {
+    if (p.i !== a.i && p.next.i !== a.i && p.i !== b.i && p.next.i !== b.i && intersects(p, p.next, a, b)) {
+      return true;
+    }
+    p = p.next;
+  } while (p !== a);
+  return false;
+}
+function locallyInside(a, b) {
+  return area(a.prev, a, a.next) < 0 ? area(a, b, a.next) >= 0 && area(a, a.prev, b) >= 0 : area(a, b, a.prev) < 0 || area(a, a.next, b) < 0;
+}
+function middleInside(a, b) {
+  let p = a;
+  let inside = false;
+  const px = (a.x + b.x) / 2;
+  const py = (a.y + b.y) / 2;
+  do {
+    if (p.y > py !== p.next.y > py && p.next.y !== p.y && px < (p.next.x - p.x) * (py - p.y) / (p.next.y - p.y) + p.x) {
+      inside = !inside;
+    }
+    p = p.next;
+  } while (p !== a);
+  return inside;
+}
+function sectorContainsSector(m, p) {
+  return area(m.prev, m, p.prev) < 0 && area(p.next, m, m.next) < 0;
+}
+function splitPolygon(a, b) {
+  const a2 = new Node(a.i, a.x, a.y);
+  const b2 = new Node(b.i, b.x, b.y);
+  const an = a.next;
+  const bp = b.prev;
+  a.next = b;
+  b.prev = a;
+  a2.next = an;
+  an.prev = a2;
+  b2.next = a2;
+  a2.prev = b2;
+  bp.next = b2;
+  b2.prev = bp;
+  return b2;
+}
+function insertNode(i, x, y, last) {
+  const p = new Node(i, x, y);
+  if (!last) {
+    p.prev = p;
+    p.next = p;
+  } else {
+    p.next = last.next;
+    p.prev = last;
+    last.next.prev = p;
+    last.next = p;
+  }
+  return p;
+}
+function removeNode(p) {
+  p.next.prev = p.prev;
+  p.prev.next = p.next;
+  if (p.prevZ) p.prevZ.nextZ = p.nextZ;
+  if (p.nextZ) p.nextZ.prevZ = p.prevZ;
+}
+function getLeftmost(start) {
+  let p = start;
+  let leftmost = start;
+  do {
+    if (p.x < leftmost.x || p.x === leftmost.x && p.y < leftmost.y) leftmost = p;
+    p = p.next;
+  } while (p !== start);
+  return leftmost;
+}
+function ringArea(data, start, end, dim) {
+  let sum = 0;
+  for (let i = start, j = end - dim; i < end; i += dim) {
+    sum += (data[j] - data[i]) * (data[i + 1] + data[j + 1]);
+    j = i;
+  }
+  return sum;
+}
+function indexCurve(start, minX, minY, invSize) {
+  let p = start;
+  do {
+    if (p.z === 0) p.z = zOrder(p.x, p.y, minX, minY, invSize);
+    p.prevZ = p.prev;
+    p.nextZ = p.next;
+    p = p.next;
+  } while (p !== start);
+  p.prevZ.nextZ = null;
+  p.prevZ = null;
+  sortLinked(p);
+}
+function sortLinked(list) {
+  let inSize = 1;
+  let numMerges;
+  do {
+    let p = list;
+    list = null;
+    let tail = null;
+    numMerges = 0;
+    while (p) {
+      numMerges++;
+      let q = p;
+      let pSize = 0;
+      for (let i = 0; i < inSize; i++) {
+        pSize++;
+        q = q.nextZ;
+        if (!q) break;
+      }
+      let qSize = inSize;
+      while (pSize > 0 || qSize > 0 && q) {
+        let e;
+        if (pSize !== 0 && (qSize === 0 || !q || p.z <= q.z)) {
+          e = p;
+          p = p.nextZ;
+          pSize--;
+        } else {
+          e = q;
+          q = q.nextZ;
+          qSize--;
+        }
+        if (tail) tail.nextZ = e;
+        else list = e;
+        e.prevZ = tail;
+        tail = e;
+      }
+      p = q;
+    }
+    tail.nextZ = null;
+    inSize *= 2;
+  } while (numMerges > 1);
+}
+function zOrder(x, y, minX, minY, invSize) {
+  let ix = (x - minX) * invSize | 0;
+  let iy = (y - minY) * invSize | 0;
+  ix = (ix | ix << 8) & 16711935;
+  ix = (ix | ix << 4) & 252645135;
+  ix = (ix | ix << 2) & 858993459;
+  ix = (ix | ix << 1) & 1431655765;
+  iy = (iy | iy << 8) & 16711935;
+  iy = (iy | iy << 4) & 252645135;
+  iy = (iy | iy << 2) & 858993459;
+  iy = (iy | iy << 1) & 1431655765;
+  return ix | iy << 1;
+}
+
+// src/layers/patches.ts
+var FILL_VERT = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+layout(location = 0) in vec2 aPos;   // offset data-space position
+layout(location = 1) in vec4 aColor; // per-vertex color (premultiplied on output)
+${TRANSFORM_GLSL}
+out vec4 vColor;
+void main() {
+  vColor = aColor;
+  gl_Position = vec4(dataToClip(aPos), 0.0, 1.0);
+}`
+);
+var FILL_FRAG = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+in vec4 vColor;
+out vec4 outColor;
+void main() { outColor = vec4(vColor.rgb * vColor.a, vColor.a); }`
+);
+var programCache11 = /* @__PURE__ */ new WeakMap();
+function getFillProgram(gl) {
+  let p = programCache11.get(gl);
+  if (!p) {
+    p = createProgram(gl, FILL_VERT, FILL_FRAG);
+    programCache11.set(gl, p);
+  }
+  return p;
+}
+var counter12 = 0;
+var PatchesLayer = class {
+  constructor(gl, opts) {
+    this.buffers = [];
+    this.vertexCount = 0;
+    this.xRef = 0;
+    this.yRef = 0;
+    this.xBounds = [0, 0];
+    this.yBounds = [0, 0];
+    this.id = `patches-${counter12++}`;
+    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.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) {
+        const v = patch.value;
+        if (v == null) continue;
+        if (v < lo) lo = v;
+        if (v > hi) hi = v;
+      }
+    }
+    const span = hi - lo || 1;
+    for (const patch of opts.patches) {
+      if (patch.x.length > 0) {
+        this.xRef = patch.x[0];
+        this.yRef = patch.y[0];
+        break;
+      }
+    }
+    const positions = [];
+    const colors = [];
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+    for (const patch of opts.patches) {
+      const n = Math.min(patch.x.length, patch.y.length);
+      if (n < 3) continue;
+      let rgba;
+      if (patch.color != null) {
+        rgba = Array.isArray(patch.color) ? patch.color : parseColor(patch.color);
+      } else if (cmap && patch.value != null) {
+        const [r, g, b] = cmap((patch.value - lo) / span);
+        rgba = [r, g, b, 1];
+      } else {
+        rgba = defRgba;
+      }
+      const a = rgba[3] * opacity;
+      const flat = new Array(n * 2);
+      for (let i = 0; i < n; i++) {
+        flat[i * 2] = patch.x[i];
+        flat[i * 2 + 1] = patch.y[i];
+      }
+      const tris = earcut(flat, patch.holes && patch.holes.length ? patch.holes : void 0, 2);
+      for (const idx of tris) {
+        const px = flat[idx * 2];
+        const py = flat[idx * 2 + 1];
+        positions.push(px - this.xRef, py - this.yRef);
+        colors.push(rgba[0], rgba[1], rgba[2], a);
+      }
+      for (let i = 0; i < n; i++) {
+        const px = patch.x[i], py = patch.y[i];
+        if (px < minX) minX = px;
+        if (px > maxX) maxX = px;
+        if (py < minY) minY = py;
+        if (py > maxY) maxY = py;
+      }
+    }
+    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]);
+  }
+  bounds() {
+    if (this.vertexCount === 0) return null;
+    return { x: this.xBounds, y: this.yBounds };
+  }
+  draw(state) {
+    if (this.vertexCount === 0) return;
+    const gl = state.gl;
+    gl.useProgram(this.program);
+    setTransformUniforms(gl, this.uniforms, state.x, state.y, this.xRef, this.yRef);
+    gl.bindVertexArray(this.vao);
+    gl.drawArrays(gl.TRIANGLES, 0, this.vertexCount);
+    gl.bindVertexArray(null);
+  }
+  dispose() {
+    this.gl.deleteVertexArray(this.vao);
+    for (const b of this.buffers) this.gl.deleteBuffer(b);
+  }
+};
+
+// src/layers/pie.ts
+var DEFAULT_COLORS = [
+  "#3b82f6",
+  "#f472b6",
+  "#22d3ee",
+  "#a3e635",
+  "#fbbf24",
+  "#a78bfa",
+  "#34d399",
+  "#fb7185",
+  "#60a5fa",
+  "#f59e0b"
+];
+var counter13 = 0;
+var PieLayer = class {
+  constructor(gl, opts) {
+    this.buffers = [];
+    this.vertexCount = 0;
+    this.id = `pie-${counter13++}`;
+    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.xRef = cx;
+    this.yRef = cy;
+    this.xBounds = [cx - R, cx + R];
+    this.yBounds = [cy - R, cy + R];
+    this.colorCss = "#3b82f6";
+    const n = opts.values.length;
+    let total = 0;
+    for (let i = 0; i < n; i++) total += Math.max(0, opts.values[i]);
+    if (total <= 0) total = 1;
+    const cmap = opts.colormap ? colormap(opts.colormap) : null;
+    const colorAt = (i) => {
+      if (opts.colors?.[i] != null) {
+        const c = opts.colors[i];
+        return Array.isArray(c) ? c : parseColor(c);
+      }
+      if (cmap) {
+        const [r, g, b] = cmap(n > 1 ? i / (n - 1) : 0);
+        return [r, g, b, 1];
+      }
+      return parseColor(DEFAULT_COLORS[i % DEFAULT_COLORS.length]);
+    };
+    const positions = [];
+    const colors = [];
+    const push = (x, y, c) => {
+      positions.push(x - cx, y - cy);
+      colors.push(c[0], c[1], c[2], c[3]);
+    };
+    let a0 = start;
+    for (let i = 0; i < n; i++) {
+      const frac = Math.max(0, opts.values[i]) / total;
+      const span = frac * Math.PI * 2;
+      if (span <= 0) continue;
+      const a1 = a0 - span;
+      const c = colorAt(i);
+      const segs = Math.max(2, Math.ceil(span / (Math.PI / 64)));
+      for (let s = 0; s < segs; s++) {
+        const t0 = a0 + (a1 - a0) * s / segs;
+        const t1 = a0 + (a1 - a0) * (s + 1) / segs;
+        const ox0 = cx + R * Math.cos(t0), oy0 = cy + R * Math.sin(t0);
+        const ox1 = cx + R * Math.cos(t1), oy1 = cy + R * Math.sin(t1);
+        if (rIn <= 0) {
+          push(cx, cy, c);
+          push(ox0, oy0, c);
+          push(ox1, oy1, c);
+        } else {
+          const ix0 = cx + rIn * Math.cos(t0), iy0 = cy + rIn * Math.sin(t0);
+          const ix1 = cx + rIn * Math.cos(t1), iy1 = cy + rIn * Math.sin(t1);
+          push(ix0, iy0, c);
+          push(ox0, oy0, c);
+          push(ox1, oy1, c);
+          push(ix0, iy0, c);
+          push(ox1, oy1, c);
+          push(ix1, iy1, c);
+        }
+      }
+      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]);
+  }
+  bounds() {
+    if (this.vertexCount === 0) return null;
+    return { x: this.xBounds, y: this.yBounds };
+  }
+  draw(state) {
+    if (this.vertexCount === 0) return;
+    const gl = state.gl;
+    gl.useProgram(this.program);
+    setTransformUniforms(gl, this.uniforms, state.x, state.y, this.xRef, this.yRef);
+    gl.bindVertexArray(this.vao);
+    gl.drawArrays(gl.TRIANGLES, 0, this.vertexCount);
+    gl.bindVertexArray(null);
+  }
+  dispose() {
+    this.gl.deleteVertexArray(this.vao);
+    for (const b of this.buffers) this.gl.deleteBuffer(b);
+  }
+};
+
+// src/layers/quiver.ts
+var SHAFT_VERT = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+layout(location = 0) in vec2 aCorner;  // (along 0..1, side -1..1)
+layout(location = 1) in vec4 aArrow;   // (bx,by,tx,ty) offset data space
+layout(location = 2) in vec4 aColor;
 uniform vec2 uResolution;
 uniform float uWidth;
 ${TRANSFORM_GLSL}
@@ -2483,7 +3548,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;
@@ -2501,12 +3566,12 @@ var cache3 = /* @__PURE__ */ new WeakMap();
 function programs3(gl) {
   let p = cache3.get(gl);
   if (!p) {
-    p = { shaft: createProgram(gl, SHAFT_VERT, FRAG9), head: createProgram(gl, HEAD_VERT, FRAG9) };
+    p = { shaft: createProgram(gl, SHAFT_VERT, FRAG10), head: createProgram(gl, HEAD_VERT, FRAG10) };
     cache3.set(gl, p);
   }
   return p;
 }
-var counter10 = 0;
+var counter14 = 0;
 var QuiverLayer = class {
   constructor(gl, opts) {
     this.buffers = [];
@@ -2514,7 +3579,7 @@ var QuiverLayer = class {
     this.yRef = 0;
     this.xBounds = [0, 0];
     this.yBounds = [0, 0];
-    this.id = `quiver-${counter10++}`;
+    this.id = `quiver-${counter14++}`;
     this.gl = gl;
     this.progs = programs3(gl);
     const colorInput = opts.color ?? "#3b82f6";
@@ -2664,7 +3729,15 @@ var QuiverLayer = class {
 };
 
 // src/layers/scatter.ts
-var VERT8 = (
+var MARKERS = {
+  circle: 0,
+  square: 1,
+  triangle: 2,
+  diamond: 3,
+  cross: 4,
+  plus: 5
+};
+var VERT9 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -2684,7 +3757,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;
@@ -2692,26 +3765,62 @@ in vec2 vLocal;
 in vec4 vColor;
 uniform vec4 uColor;
 uniform float uUseVertexColor;
+uniform int uMarker;
 out vec4 outColor;
+
+float sdBox(vec2 p, vec2 b) {
+  vec2 d = abs(p) - b;
+  return length(max(d, 0.0)) + min(max(d.x, d.y), 0.0);
+}
+// iq's equilateral-triangle SDF (apex toward +y).
+float sdTri(vec2 p) {
+  const float k = sqrt(3.0);
+  p.x = abs(p.x) - 1.0;
+  p.y = p.y + 1.0 / k;
+  if (p.x + k * p.y > 0.0) p = vec2(p.x - k * p.y, -k * p.x - p.y) / 2.0;
+  p.x -= clamp(p.x, -2.0, 0.0);
+  return -length(p) * sign(p.y);
+}
+
 void main() {
-  float r = length(vLocal);
-  if (r > 1.0) discard;
-  float alpha = smoothstep(1.0, 1.0 - 0.15, r);  // soft edge
+  vec2 p = vLocal;
+  if (uMarker == 0) {
+    // Circle \u2014 original soft-edged path, unchanged.
+    float r = length(p);
+    if (r > 1.0) discard;
+    float alpha = smoothstep(1.0, 1.0 - 0.15, r);
+    vec4 c0 = uUseVertexColor > 0.5 ? vColor : uColor;
+    outColor = vec4(c0.rgb * c0.a * alpha, c0.a * alpha);
+    return;
+  }
+  float d;
+  if (uMarker == 1) d = sdBox(p, vec2(0.88));                        // square
+  else if (uMarker == 2) d = sdTri(p);                              // triangle (point up)
+  else if (uMarker == 3) d = abs(p.x) + abs(p.y) - 1.0;             // diamond
+  else if (uMarker == 4) {                                           // cross (\xD7)
+    vec2 q = vec2(p.x + p.y, p.x - p.y) * 0.70710678;
+    d = min(sdBox(q, vec2(1.0, 0.30)), sdBox(q, vec2(0.30, 1.0)));
+  } else {                                                           // plus (+)
+    d = min(sdBox(p, vec2(1.0, 0.30)), sdBox(p, vec2(0.30, 1.0)));
+  }
+  float aa = fwidth(d) + 1e-4;
+  float alpha = 1.0 - smoothstep(-aa, aa, d);
+  if (alpha <= 0.0) discard;
   vec4 c = uUseVertexColor > 0.5 ? vColor : uColor;
   outColor = vec4(c.rgb * c.a * alpha, c.a * alpha);
 }`
 );
 var CORNERS3 = new Float32Array([-1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1]);
-var programCache9 = /* @__PURE__ */ new WeakMap();
-function getProgram8(gl) {
-  let p = programCache9.get(gl);
+var programCache12 = /* @__PURE__ */ new WeakMap();
+function getProgram9(gl) {
+  let p = programCache12.get(gl);
   if (!p) {
-    p = createProgram(gl, VERT8, FRAG10);
-    programCache9.set(gl, p);
+    p = createProgram(gl, VERT9, FRAG11);
+    programCache12.set(gl, p);
   }
   return p;
 }
-var counter11 = 0;
+var counter15 = 0;
 var ScatterLayer = class {
   constructor(gl, opts) {
     this.buffers = [];
@@ -2719,10 +3828,11 @@ var ScatterLayer = class {
     this.yRef = 0;
     this.xBounds = [0, 0];
     this.yBounds = [0, 0];
-    this.id = `scatter-${counter11++}`;
+    this.id = `scatter-${counter15++}`;
     this.gl = gl;
-    this.program = getProgram8(gl);
+    this.program = getProgram9(gl);
     this.size = opts.size ?? 5;
+    this.marker = MARKERS[opts.marker ?? "circle"];
     const colorInput = opts.color ?? "#3b82f6";
     this.color = Array.isArray(colorInput) ? colorInput : parseColor(colorInput);
     this.colorCss = typeof colorInput === "string" ? colorInput : toColorCss(this.color);
@@ -2754,7 +3864,7 @@ var ScatterLayer = class {
     const colors = new Float32Array(n * 4);
     if (opts.colorBy) {
       const vals = opts.colorBy.values;
-      const cmap = colormap(opts.colorBy.colormap ?? "viridis");
+      const lut = colormapLUT(opts.colorBy.colormap ?? "viridis");
       let lo = opts.colorBy.domain?.[0] ?? Infinity;
       let hi = opts.colorBy.domain?.[1] ?? -Infinity;
       if (!opts.colorBy.domain) {
@@ -2766,10 +3876,12 @@ var ScatterLayer = class {
       }
       const span = hi - lo || 1;
       for (let i = 0; i < n; i++) {
-        const [r, g, b] = cmap((vals[i] - lo) / span);
-        colors[i * 4] = r;
-        colors[i * 4 + 1] = g;
-        colors[i * 4 + 2] = b;
+        let t = (vals[i] - lo) / span;
+        t = t <= 0 ? 0 : t >= 1 ? 1 : t;
+        const j = (t * 255 | 0) * 3;
+        colors[i * 4] = lut[j];
+        colors[i * 4 + 1] = lut[j + 1];
+        colors[i * 4 + 2] = lut[j + 2];
         colors[i * 4 + 3] = 1;
       }
     }
@@ -2800,7 +3912,8 @@ var ScatterLayer = class {
       "uColor",
       "uResolution",
       "uSize",
-      "uUseVertexColor"
+      "uUseVertexColor",
+      "uMarker"
     ]);
   }
   bounds() {
@@ -2852,6 +3965,7 @@ var ScatterLayer = class {
     gl.uniform2f(this.uniforms.uResolution, state.pixelWidth, state.pixelHeight);
     gl.uniform1f(this.uniforms.uSize, this.size / 2 * state.dpr);
     gl.uniform1f(this.uniforms.uUseVertexColor, this.useVertexColor ? 1 : 0);
+    gl.uniform1i(this.uniforms.uMarker, this.marker);
     gl.bindVertexArray(this.vao);
     gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, this.count);
     gl.bindVertexArray(null);
@@ -2900,7 +4014,7 @@ void main() {
   gl_Position = vec4((pos / uResolution) * 2.0 - 1.0, 0.0, 1.0);
 }`
 );
-var SOLID_FRAG2 = (
+var SOLID_FRAG3 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -2928,12 +4042,12 @@ var cache4 = /* @__PURE__ */ new WeakMap();
 function programs4(gl) {
   let p = cache4.get(gl);
   if (!p) {
-    p = { stem: createProgram(gl, STEM_VERT, SOLID_FRAG2), marker: createProgram(gl, MARKER_VERT, DISC_FRAG) };
+    p = { stem: createProgram(gl, STEM_VERT, SOLID_FRAG3), marker: createProgram(gl, MARKER_VERT, DISC_FRAG) };
     cache4.set(gl, p);
   }
   return p;
 }
-var counter12 = 0;
+var counter16 = 0;
 var StemLayer = class {
   constructor(gl, opts) {
     this.buffers = [];
@@ -2941,7 +4055,7 @@ var StemLayer = class {
     this.yRef = 0;
     this.xBounds = [0, 0];
     this.yBounds = [0, 0];
-    this.id = `stem-${counter12++}`;
+    this.id = `stem-${counter16++}`;
     this.gl = gl;
     this.progs = programs4(gl);
     const colorInput = opts.color ?? "#3b82f6";
@@ -3075,89 +4189,173 @@ var darkTheme = {
   text: "#94a3b8",
   font: "12px system-ui, -apple-system, sans-serif"
 };
-function pxX(region, t) {
-  return region.left + t * region.width;
+function resolveAxisStyle(cfg, theme, colorOverride) {
+  const line = colorOverride ?? theme.axis;
+  const text = colorOverride ?? theme.text;
+  return {
+    showAxisLine: cfg.showAxisLine ?? true,
+    axisLineColor: cfg.axisLineColor ?? line,
+    axisLineWidth: cfg.axisLineWidth ?? 1,
+    showTicks: cfg.showTicks ?? true,
+    tickColor: cfg.tickColor ?? line,
+    tickLength: cfg.tickLength ?? 5,
+    tickMinorLength: 3,
+    tickWidth: cfg.tickWidth ?? 1,
+    labelColor: cfg.labelColor ?? text,
+    labelFont: cfg.labelFont ?? theme.font,
+    labelRotation: cfg.labelRotation ?? 0,
+    labelStandoff: cfg.labelStandoff ?? 3,
+    titleColor: cfg.titleColor ?? text,
+    titleFont: cfg.titleFont ?? theme.font,
+    showGrid: cfg.showGrid ?? true,
+    gridColor: cfg.gridColor ?? theme.grid,
+    gridMinorColor: cfg.gridMinorColor ?? theme.gridMinor,
+    gridWidth: cfg.gridWidth ?? 1,
+    gridDash: cfg.gridDash ?? []
+  };
 }
-function pxY(region, t) {
+function drawTitle(ctx, region, title, isDark) {
+  ctx.save();
+  ctx.font = title.font ?? "600 15px system-ui, -apple-system, sans-serif";
+  ctx.fillStyle = title.color ?? (isDark ? "#e2e8f0" : "#1e293b");
+  ctx.textBaseline = "middle";
+  const align = title.align ?? "center";
+  const y = region.top / 2;
+  let x;
+  if (align === "left") {
+    ctx.textAlign = "left";
+    x = region.left;
+  } else if (align === "right") {
+    ctx.textAlign = "right";
+    x = region.left + region.width;
+  } else {
+    ctx.textAlign = "center";
+    x = region.left + region.width / 2;
+  }
+  ctx.fillText(title.text, x, y);
+  ctx.restore();
+}
+function pxX(region, t) {
+  return region.left + t * region.width;
+}
+function pxY(region, t) {
   return region.top + (1 - t) * region.height;
 }
-function drawGrid(ctx, region, scaleX, scaleY, ticksX, ticksY, theme) {
+function drawGrid(ctx, region, scaleX, scaleY, ticksX, ticksY, styleX, styleY) {
   ctx.save();
-  ctx.lineWidth = 1;
-  for (const t of ticksX) {
-    if (!t.grid) continue;
-    const x = Math.round(pxX(region, scaleX.norm(t.value))) + 0.5;
-    ctx.strokeStyle = t.minor ? theme.gridMinor : theme.grid;
-    ctx.beginPath();
-    ctx.moveTo(x, region.top);
-    ctx.lineTo(x, region.top + region.height);
-    ctx.stroke();
+  if (styleX.showGrid) {
+    ctx.lineWidth = styleX.gridWidth;
+    ctx.setLineDash(styleX.gridDash);
+    for (const t of ticksX) {
+      if (!t.grid) continue;
+      const x = Math.round(pxX(region, scaleX.norm(t.value))) + 0.5;
+      ctx.strokeStyle = t.minor ? styleX.gridMinorColor : styleX.gridColor;
+      ctx.beginPath();
+      ctx.moveTo(x, region.top);
+      ctx.lineTo(x, region.top + region.height);
+      ctx.stroke();
+    }
   }
-  for (const t of ticksY) {
-    if (!t.grid) continue;
-    const y = Math.round(pxY(region, scaleY.norm(t.value))) + 0.5;
-    ctx.strokeStyle = t.minor ? theme.gridMinor : theme.grid;
-    ctx.beginPath();
-    ctx.moveTo(region.left, y);
-    ctx.lineTo(region.left + region.width, y);
-    ctx.stroke();
+  if (styleY.showGrid) {
+    ctx.lineWidth = styleY.gridWidth;
+    ctx.setLineDash(styleY.gridDash);
+    for (const t of ticksY) {
+      if (!t.grid) continue;
+      const y = Math.round(pxY(region, scaleY.norm(t.value))) + 0.5;
+      ctx.strokeStyle = t.minor ? styleY.gridMinorColor : styleY.gridColor;
+      ctx.beginPath();
+      ctx.moveTo(region.left, y);
+      ctx.lineTo(region.left + region.width, y);
+      ctx.stroke();
+    }
   }
   ctx.restore();
 }
-function drawXAxis(ctx, region, scaleX, ticksX, theme, title) {
+function drawXAxis(ctx, region, scaleX, ticksX, style, title) {
   ctx.save();
-  ctx.strokeStyle = theme.axis;
-  ctx.fillStyle = theme.text;
-  ctx.font = theme.font;
-  ctx.lineWidth = 1;
+  ctx.lineWidth = style.axisLineWidth;
   const bottom = region.top + region.height;
-  ctx.beginPath();
-  ctx.moveTo(region.left, bottom + 0.5);
-  ctx.lineTo(region.left + region.width, bottom + 0.5);
-  ctx.stroke();
-  ctx.textAlign = "center";
-  ctx.textBaseline = "top";
-  for (const t of ticksX) {
-    const x = Math.round(pxX(region, scaleX.norm(t.value))) + 0.5;
-    const len = t.minor ? 3 : 5;
+  if (style.showAxisLine) {
+    ctx.strokeStyle = style.axisLineColor;
     ctx.beginPath();
-    ctx.moveTo(x, bottom);
-    ctx.lineTo(x, bottom + len);
+    ctx.moveTo(region.left, bottom + 0.5);
+    ctx.lineTo(region.left + region.width, bottom + 0.5);
     ctx.stroke();
-    if (t.label) ctx.fillText(t.label, x, bottom + len + 3);
+  }
+  ctx.fillStyle = style.labelColor;
+  ctx.font = style.labelFont;
+  const rot = style.labelRotation * Math.PI / 180;
+  for (const t of ticksX) {
+    const x = Math.round(pxX(region, scaleX.norm(t.value))) + 0.5;
+    const len = t.minor ? style.tickMinorLength : style.tickLength;
+    if (style.showTicks) {
+      ctx.strokeStyle = style.tickColor;
+      ctx.lineWidth = style.tickWidth;
+      ctx.beginPath();
+      ctx.moveTo(x, bottom);
+      ctx.lineTo(x, bottom + len);
+      ctx.stroke();
+    }
+    if (!t.label) continue;
+    const ly = bottom + (style.showTicks ? len : 0) + style.labelStandoff;
+    if (rot !== 0) {
+      ctx.save();
+      ctx.translate(x, ly);
+      ctx.rotate(rot);
+      ctx.textAlign = "right";
+      ctx.textBaseline = "middle";
+      ctx.fillText(t.label, 0, 0);
+      ctx.restore();
+    } else {
+      ctx.textAlign = "center";
+      ctx.textBaseline = "top";
+      ctx.fillText(t.label, x, ly);
+    }
   }
   if (title) {
+    ctx.fillStyle = style.titleColor;
+    ctx.font = style.titleFont;
+    ctx.textAlign = "center";
     ctx.textBaseline = "bottom";
     ctx.fillText(title, region.left + region.width / 2, bottom + 34);
   }
   ctx.restore();
 }
-function drawYAxis(ctx, region, scaleY, ticksY, theme, opts) {
+function drawYAxis(ctx, region, scaleY, ticksY, style, opts) {
   ctx.save();
-  const color = opts.color ?? theme.axis;
-  ctx.strokeStyle = color;
-  ctx.fillStyle = opts.color ?? theme.text;
-  ctx.font = theme.font;
-  ctx.lineWidth = 1;
+  ctx.font = style.labelFont;
+  ctx.lineWidth = style.axisLineWidth;
   const ax = Math.round(opts.x) + 0.5;
   const dir = opts.side === "left" ? -1 : 1;
-  ctx.beginPath();
-  ctx.moveTo(ax, region.top);
-  ctx.lineTo(ax, region.top + region.height);
-  ctx.stroke();
+  if (style.showAxisLine) {
+    ctx.strokeStyle = style.axisLineColor;
+    ctx.beginPath();
+    ctx.moveTo(ax, region.top);
+    ctx.lineTo(ax, region.top + region.height);
+    ctx.stroke();
+  }
+  ctx.fillStyle = style.labelColor;
   ctx.textAlign = opts.side === "left" ? "right" : "left";
   ctx.textBaseline = "middle";
   for (const t of ticksY) {
     const y = Math.round(pxY(region, scaleY.norm(t.value))) + 0.5;
-    const len = t.minor ? 3 : 5;
-    ctx.beginPath();
-    ctx.moveTo(ax, y);
-    ctx.lineTo(ax + dir * len, y);
-    ctx.stroke();
-    if (t.label) ctx.fillText(t.label, ax + dir * (len + 4), y);
+    const len = t.minor ? style.tickMinorLength : style.tickLength;
+    if (style.showTicks) {
+      ctx.strokeStyle = style.tickColor;
+      ctx.lineWidth = style.tickWidth;
+      ctx.beginPath();
+      ctx.moveTo(ax, y);
+      ctx.lineTo(ax + dir * len, y);
+      ctx.stroke();
+    }
+    if (t.label) {
+      ctx.fillText(t.label, ax + dir * ((style.showTicks ? len : 0) + style.labelStandoff + 1), y);
+    }
   }
   if (opts.title) {
     ctx.save();
+    ctx.fillStyle = style.titleColor;
+    ctx.font = style.titleFont;
     const tx = opts.titleX ?? (opts.side === "left" ? 12 : region.left + region.width + 36);
     ctx.translate(tx, region.top + region.height / 2);
     ctx.rotate(-Math.PI / 2);
@@ -3345,7 +4543,32 @@ var TimeScale = class {
     return `${d.getFullYear()}`;
   }
 };
-function makeScale(type, domain) {
+var CategoricalScale = class {
+  constructor(factors = []) {
+    this.type = "categorical";
+    this.log = false;
+    this.factors = factors;
+    const n = factors.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);
+  }
+  // Continuous linear inverse (satisfies the Scale contract used by pan/box math).
+  // The nearest factor index is `Math.round(scale.invert(t))`.
+  invert(t) {
+    const [a, b] = this.domain;
+    return a + t * (b - a);
+  }
+  ticks() {
+    return this.factors.map((f, i) => ({ value: i, label: f, grid: false }));
+  }
+  formatTick(value) {
+    return this.factors[Math.round(value)] ?? "";
+  }
+};
+function makeScale(type, domain, factors) {
   switch (type) {
     case "linear":
       return new LinearScale(domain);
@@ -3353,6 +4576,8 @@ function makeScale(type, domain) {
       return new LogScale(domain);
     case "time":
       return new TimeScale(domain);
+    case "categorical":
+      return new CategoricalScale(factors ?? []);
     default:
       throw new Error(`Unknown scale type: ${type}`);
   }
@@ -3460,6 +4685,7 @@ function createToolbar(container, host, dark) {
 // src/plot.ts
 var DEFAULT_MARGIN = { top: 16, right: 16, bottom: 40, left: 56 };
 var Y_AXIS_GAP = 52;
+var TITLE_RESERVE = 28;
 function isPickable(layer) {
   return typeof layer.pick === "function";
 }
@@ -3500,6 +4726,7 @@ var Plot = class {
     this.pressPx = null;
     /** A point clicked to pin its details, until another click clears it. */
     this.selected = null;
+    this.annotations = [];
     this.container = container;
     if (getComputedStyle(container).position === "static") {
       container.style.position = "relative";
@@ -3515,21 +4742,28 @@ var Plot = class {
     this.sharedCanvas = s.canvas;
     const sx = options.scales?.x ?? {};
     const sy = options.scales?.y ?? {};
-    this.scaleX = makeScale(sx.type ?? "linear", sx.domain ?? [0, 1]);
-    this.autoX = sx.domain == null;
-    this.initialX = sx.domain ?? null;
+    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;
     this.axisX = new Axis(options.axes?.x);
+    const yCat = sy.type === "categorical";
+    const yScale = makeScale(sy.type ?? "linear", sy.domain ?? [0, 1], sy.factors);
     this.yAxes.set("y", {
       id: "y",
-      scale: makeScale(sy.type ?? "linear", sy.domain ?? [0, 1]),
+      scale: yScale,
       axis: new Axis(options.axes?.y),
       side: "left",
-      auto: sy.domain == null,
-      initial: sy.domain ?? null
+      auto: !yCat && sy.domain == null,
+      initial: yCat ? 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;
     this.baseMargin = { ...DEFAULT_MARGIN, ...options.margin };
+    this.bgFill = options.background;
+    this.borderFill = options.border;
+    this.title = typeof options.title === "string" ? { text: options.title } : options.title ?? null;
+    this.legend = options.legend === true ? {} : options.legend || null;
     this.mode = options.mode ?? "pan";
     this.hoverEnabled = options.hover !== false;
     this.pickMode = options.pick ?? "x";
@@ -3583,6 +4817,21 @@ var Plot = class {
       boxShadow: "0 6px 18px rgba(0,0,0,0.25)"
     });
     container.appendChild(this.infoBox);
+    this.legendDiv = document.createElement("div");
+    Object.assign(this.legendDiv.style, {
+      position: "absolute",
+      display: "none",
+      zIndex: "5",
+      pointerEvents: "none",
+      padding: "6px 8px",
+      borderRadius: "6px",
+      font: "12px system-ui, -apple-system, sans-serif",
+      lineHeight: "1.5",
+      background: this.isDark ? "rgba(15,23,42,0.85)" : "rgba(255,255,255,0.9)",
+      color: this.isDark ? "#e2e8f0" : "#1e293b",
+      border: `1px solid ${this.isDark ? "rgba(148,163,184,0.25)" : "rgba(100,116,139,0.2)"}`
+    });
+    container.appendChild(this.legendDiv);
     this.resizeObserver = new ResizeObserver(() => this.resize());
     this.resizeObserver.observe(container);
     this.resize();
@@ -3623,7 +4872,7 @@ var Plot = class {
       else rightCount++;
     }
     return {
-      top: this.baseMargin.top,
+      top: this.baseMargin.top + (this.title ? TITLE_RESERVE : 0),
       bottom: this.baseMargin.bottom,
       left: this.baseMargin.left + Math.max(0, leftCount - 1) * Y_AXIS_GAP,
       right: this.baseMargin.right + rightCount * Y_AXIS_GAP
@@ -3702,6 +4951,67 @@ var Plot = class {
   addBar(opts) {
     return this.register(new BarLayer(this.gl, opts));
   }
+  /**
+   * Grouped (clustered) bars: one {@link BarLayer} per series, each shifted within
+   * its category group so the bars sit side by side. Returns the layers in order.
+   */
+  addGroupedBars(opts) {
+    const m = opts.series.length;
+    if (m === 0) return [];
+    const groupWidth = opts.groupWidth ?? 0.8;
+    const slot = groupWidth / m;
+    const barWidth = slot * (1 - (opts.gap ?? 0.1));
+    const layers = [];
+    for (let s = 0; s < m; s++) {
+      const ser = opts.series[s];
+      const off = (s - (m - 1) / 2) * slot;
+      layers.push(
+        new BarLayer(this.gl, {
+          x: opts.x,
+          y: ser.y,
+          width: barWidth,
+          offset: off,
+          color: ser.color,
+          name: ser.name,
+          orientation: opts.orientation,
+          yAxis: opts.yAxis
+        })
+      );
+    }
+    for (const l of layers) this.register(l);
+    return layers;
+  }
+  /**
+   * Stacked bars: each series is drawn from the running cumulative total of the
+   * ones before it, so they stack. Returns the layers bottom-to-top.
+   */
+  addStackedBars(opts) {
+    const n = opts.x.length;
+    const cum = new Float64Array(n);
+    const layers = [];
+    for (const ser of opts.series) {
+      const base = Float64Array.from(cum);
+      const top = new Float64Array(n);
+      for (let i = 0; i < n; i++) {
+        top[i] = cum[i] + (ser.y[i] ?? 0);
+        cum[i] = top[i];
+      }
+      layers.push(
+        new BarLayer(this.gl, {
+          x: opts.x,
+          y: top,
+          base,
+          width: opts.width,
+          color: ser.color,
+          name: ser.name,
+          orientation: opts.orientation,
+          yAxis: opts.yAxis
+        })
+      );
+    }
+    for (const l of layers) this.register(l);
+    return layers;
+  }
   addArea(opts) {
     return this.register(new AreaLayer(this.gl, opts));
   }
@@ -3729,6 +5039,83 @@ var Plot = class {
   addCandlestick(opts) {
     return this.register(new CandlestickLayer(this.gl, opts));
   }
+  /** Filled polygons (choropleth-capable). Rings are triangulated with earcut. */
+  addPatches(opts) {
+    return this.register(new PatchesLayer(this.gl, opts));
+  }
+  /** A pie / donut chart. Set `equalAspect: true` on the plot so it stays circular. */
+  addPie(opts) {
+    return this.register(new PieLayer(this.gl, opts));
+  }
+  /** An RGBA image / URL drawn over a data-space extent. URLs redraw on load. */
+  addImage(opts) {
+    return this.register(
+      new ImageLayer(this.gl, {
+        ...opts,
+        onLoad: () => {
+          this.requestRender();
+          opts.onLoad?.();
+        }
+      })
+    );
+  }
+  /**
+   * A node-link graph. Provide node `x`/`y`, or omit them (with `nodes`, or let the
+   * count be inferred from the edges) to auto-place with a force-directed layout.
+   */
+  addGraph(opts) {
+    let { x, y } = opts;
+    if (!x || !y) {
+      const n = opts.nodes ?? opts.edges.reduce((m, [a, b]) => Math.max(m, a, b), -1) + 1;
+      const layout = forceLayout(n, opts.edges);
+      x = layout.x;
+      y = layout.y;
+    }
+    return this.register(new GraphLayer(this.gl, { ...opts, x, y }));
+  }
+  /**
+   * Stacked area: each series is filled from the running cumulative total of the
+   * ones before it. Returns the layers bottom-to-top.
+   */
+  addStackedArea(opts) {
+    const n = opts.x.length;
+    const cum = new Float64Array(n);
+    const layers = [];
+    for (const ser of opts.series) {
+      const base = Float64Array.from(cum);
+      const top = new Float64Array(n);
+      for (let i = 0; i < n; i++) {
+        top[i] = cum[i] + (ser.y[i] ?? 0);
+        cum[i] = top[i];
+      }
+      layers.push(
+        new AreaLayer(this.gl, { x: opts.x, y: top, base, color: ser.color, name: ser.name, yAxis: opts.yAxis })
+      );
+    }
+    for (const l of layers) this.register(l);
+    return layers;
+  }
+  /**
+   * Add a Canvas2D annotation (span / band / box / label) drawn above the data.
+   * Returns a disposer that removes just this annotation.
+   */
+  addAnnotation(a) {
+    this.annotations.push(a);
+    this.requestRender();
+    return () => {
+      const i = this.annotations.indexOf(a);
+      if (i >= 0) {
+        this.annotations.splice(i, 1);
+        this.requestRender();
+      }
+    };
+  }
+  /** Remove all annotations. */
+  clearAnnotations() {
+    if (this.annotations.length === 0) return;
+    this.annotations = [];
+    this.requestRender();
+  }
   /** Compute an STFT of `signal` and render it as a heatmap (time × frequency). */
   addHeatmapSpectrogram(signal, opts = {}) {
     const s = spectrogram(signal, opts);
@@ -3759,14 +5146,16 @@ 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, side, color, ...axisConfig } = opts;
+    const { type, domain, factors, side, color, ...axisConfig } = opts;
+    const cat = type === "categorical";
+    const scale = makeScale(type ?? "linear", domain ?? [0, 1], factors);
     this.yAxes.set(id, {
       id,
-      scale: makeScale(type ?? "linear", domain ?? [0, 1]),
+      scale,
       axis: new Axis(axisConfig),
       side: side ?? "right",
-      auto: domain == null,
-      initial: domain ?? null,
+      auto: !cat && domain == null,
+      initial: cat ? scale.domain : domain ?? null,
       color
     });
     this.autoscale();
@@ -3875,6 +5264,7 @@ var Plot = class {
     this.selectionDiv.remove();
     this.tooltip.remove();
     this.infoBox.remove();
+    this.legendDiv.remove();
     for (const l of this.layers) l.dispose();
     this.container.removeChild(this.gridCanvas);
     this.container.removeChild(this.dataCanvas);
@@ -3914,8 +5304,18 @@ var Plot = class {
     const primary = this.primaryY();
     const ticksX = this.axisX.resolve(this.scaleX);
     const ticksYPrimary = primary.axis.resolve(primary.scale);
+    const styleX = resolveAxisStyle(this.axisX.config, this.theme);
+    const styleYPrimary = resolveAxisStyle(primary.axis.config, this.theme, primary.color);
     this.gridCtx.clearRect(0, 0, layout.cssWidth, layout.cssHeight);
-    drawGrid(this.gridCtx, region, this.scaleX, primary.scale, ticksX, ticksYPrimary, this.theme);
+    if (this.borderFill) {
+      this.gridCtx.fillStyle = this.borderFill;
+      this.gridCtx.fillRect(0, 0, layout.cssWidth, layout.cssHeight);
+    }
+    if (this.bgFill) {
+      this.gridCtx.fillStyle = this.bgFill;
+      this.gridCtx.fillRect(region.left, region.top, region.width, region.height);
+    }
+    drawGrid(this.gridCtx, region, this.scaleX, primary.scale, ticksX, ticksYPrimary, styleX, styleYPrimary);
     const gl = this.gl;
     const devW = this.dataCanvas.width;
     const devH = this.dataCanvas.height;
@@ -3953,19 +5353,21 @@ var Plot = class {
     this.dataCtx.clearRect(0, 0, layout.cssWidth, layout.cssHeight);
     this.dataCtx.drawImage(this.sharedCanvas, 0, 0, layout.cssWidth, layout.cssHeight);
     this.axisCtx.clearRect(0, 0, layout.cssWidth, layout.cssHeight);
-    drawXAxis(this.axisCtx, region, this.scaleX, ticksX, this.theme, this.axisX.config.title);
+    drawXAxis(this.axisCtx, region, this.scaleX, ticksX, styleX, this.axisX.config.title);
     const positions = this.yAxisPositions();
     for (const ya of this.yAxes.values()) {
       const pos = positions.get(ya.id);
       const ticks = ya.axis.resolve(ya.scale);
-      drawYAxis(this.axisCtx, region, ya.scale, ticks, this.theme, {
+      const styleY = ya === primary ? styleYPrimary : resolveAxisStyle(ya.axis.config, this.theme, ya.color);
+      drawYAxis(this.axisCtx, region, ya.scale, ticks, styleY, {
         x: pos.x,
         side: ya.side,
         title: ya.axis.config.title,
-        color: ya.color,
         titleX: pos.titleX
       });
     }
+    if (this.title) drawTitle(this.axisCtx, region, this.title, this.isDark);
+    if (this.annotations.length) this.renderAnnotations(region);
     if (this.crosshair && this.pressPx) {
       drawCrosshairXY(this.axisCtx, region, this.pressPx.x, this.pressPx.y, this.theme);
     }
@@ -3976,6 +5378,129 @@ var Plot = class {
       if (this.pointInfo === "hover") this.selected = null;
     }
     this.updateInfoBox(region);
+    this.updateLegend(region);
+  }
+  /** Named series that can appear in the legend: any layer exposing name + colorCss. */
+  legendEntries() {
+    const out = [];
+    for (const l of this.layers) {
+      const a = l;
+      if (typeof a.name === "string" && a.name && typeof a.colorCss === "string") {
+        out.push({ name: a.name, colorCss: a.colorCss });
+      }
+    }
+    return out;
+  }
+  /** Rebuild and position the legend overlay (or hide it). */
+  updateLegend(region) {
+    const div = this.legendDiv;
+    const entries = this.legend ? this.legendEntries() : [];
+    if (!this.legend || entries.length === 0) {
+      div.style.display = "none";
+      return;
+    }
+    const cfg = this.legend;
+    if (cfg.background) div.style.background = cfg.background;
+    if (cfg.border) div.style.border = `1px solid ${cfg.border}`;
+    if (cfg.textColor) div.style.color = cfg.textColor;
+    if (cfg.font) div.style.font = cfg.font;
+    const horizontal = cfg.orientation === "horizontal";
+    div.style.display = "flex";
+    div.style.flexDirection = horizontal ? "row" : "column";
+    div.style.gap = horizontal ? "12px" : "3px";
+    div.replaceChildren();
+    for (const e of entries) {
+      const row = document.createElement("div");
+      row.style.display = "flex";
+      row.style.alignItems = "center";
+      row.style.gap = "6px";
+      const swatch = document.createElement("span");
+      Object.assign(swatch.style, {
+        width: "10px",
+        height: "10px",
+        borderRadius: "2px",
+        background: e.colorCss,
+        flex: "0 0 auto"
+      });
+      const label = document.createElement("span");
+      label.textContent = e.name;
+      row.appendChild(swatch);
+      row.appendChild(label);
+      div.appendChild(row);
+    }
+    const inset = 8;
+    const pos = cfg.position ?? "top-right";
+    const w = div.offsetWidth;
+    const h = div.offsetHeight;
+    const left = pos.endsWith("left") ? region.left + inset : region.left + region.width - w - inset;
+    const top = pos.startsWith("top") ? region.top + inset : region.top + region.height - h - inset;
+    div.style.left = `${Math.max(0, left)}px`;
+    div.style.top = `${Math.max(0, top)}px`;
+  }
+  /** Draw all annotations, projected through the scales and clipped to the region. */
+  renderAnnotations(region) {
+    const ctx = this.axisCtx;
+    const left = region.left, right = region.left + region.width;
+    const top = region.top, bottom = region.top + region.height;
+    const yScaleOf = (id) => (this.yAxes.get(id ?? "y") ?? this.primaryY()).scale;
+    const px = (v) => pxX(region, this.scaleX.norm(v));
+    const py = (s, v) => pxY(region, s.norm(v));
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(left, top, right - left, bottom - top);
+    ctx.clip();
+    for (const a of this.annotations) {
+      ctx.setLineDash([]);
+      if (a.type === "span") {
+        ctx.strokeStyle = a.color ?? this.theme.axis;
+        ctx.lineWidth = a.width ?? 1;
+        if (a.dash) ctx.setLineDash(a.dash);
+        ctx.beginPath();
+        if (a.dim === "x") {
+          const x = Math.round(px(a.value)) + 0.5;
+          ctx.moveTo(x, top);
+          ctx.lineTo(x, bottom);
+        } else {
+          const y = Math.round(py(yScaleOf(a.yAxis), a.value)) + 0.5;
+          ctx.moveTo(left, y);
+          ctx.lineTo(right, y);
+        }
+        ctx.stroke();
+      } else if (a.type === "band") {
+        ctx.fillStyle = a.color ?? "rgba(59,130,246,0.15)";
+        if (a.dim === "x") {
+          const x0 = px(a.from), x1 = px(a.to);
+          ctx.fillRect(Math.min(x0, x1), top, Math.abs(x1 - x0), bottom - top);
+        } else {
+          const s = yScaleOf(a.yAxis);
+          const y0 = py(s, a.from), y1 = py(s, a.to);
+          ctx.fillRect(left, Math.min(y0, y1), right - left, Math.abs(y1 - y0));
+        }
+      } else if (a.type === "box") {
+        const s = yScaleOf(a.yAxis);
+        const x0 = px(a.x[0]), x1 = px(a.x[1]);
+        const y0 = py(s, a.y[0]), y1 = py(s, a.y[1]);
+        const rx = Math.min(x0, x1), ry = Math.min(y0, y1);
+        const rw = Math.abs(x1 - x0), rh = Math.abs(y1 - y0);
+        if (a.color) {
+          ctx.fillStyle = a.color;
+          ctx.fillRect(rx, ry, rw, rh);
+        }
+        if (a.border) {
+          ctx.strokeStyle = a.border;
+          ctx.lineWidth = 1;
+          ctx.strokeRect(rx + 0.5, ry + 0.5, rw, rh);
+        }
+      } else {
+        const s = yScaleOf(a.yAxis);
+        ctx.fillStyle = a.color ?? this.theme.text;
+        ctx.font = a.font ?? this.theme.font;
+        ctx.textAlign = a.align ?? "left";
+        ctx.textBaseline = "middle";
+        ctx.fillText(a.text, px(a.x), py(s, a.y));
+      }
+    }
+    ctx.restore();
   }
   renderHover(region) {
     const cursor = this.hoverPx;
@@ -4999,154 +6524,1076 @@ function fmt(v) {
   return String(Math.round(v * 1e3) / 1e3);
 }
 
-// src/plot3d/mat4.ts
-function identity() {
-  const m = new Float32Array(16);
-  m[0] = m[5] = m[10] = m[15] = 1;
-  return m;
-}
-function multiply(a, b) {
-  const o = new Float32Array(16);
-  for (let c = 0; c < 4; c++) {
-    for (let r = 0; r < 4; r++) {
-      let s = 0;
-      for (let k = 0; k < 4; k++) s += a[k * 4 + r] * b[c * 4 + k];
-      o[c * 4 + r] = s;
-    }
-  }
-  return o;
-}
-function perspective(fovy, aspect, near, far) {
-  const f = 1 / Math.tan(fovy / 2);
-  const nf = 1 / (near - far);
-  const m = new Float32Array(16);
-  m[0] = f / aspect;
-  m[5] = f;
-  m[10] = (far + near) * nf;
-  m[11] = -1;
-  m[14] = 2 * far * near * nf;
-  return m;
-}
-var sub = (a, b) => [a[0] - b[0], a[1] - b[1], a[2] - b[2]];
-var cross = (a, b) => [
-  a[1] * b[2] - a[2] * b[1],
-  a[2] * b[0] - a[0] * b[2],
-  a[0] * b[1] - a[1] * b[0]
-];
-function normalize2(v) {
-  const l = Math.hypot(v[0], v[1], v[2]) || 1;
-  return [v[0] / l, v[1] / l, v[2] / l];
-}
-function lookAt(eye, center, up) {
-  const z = normalize2(sub(eye, center));
-  const x = normalize2(cross(up, z));
-  const y = cross(z, x);
-  const m = identity();
-  m[0] = x[0];
-  m[4] = x[1];
-  m[8] = x[2];
-  m[1] = y[0];
-  m[5] = y[1];
-  m[9] = y[2];
-  m[2] = z[0];
-  m[6] = z[1];
-  m[10] = z[2];
-  m[12] = -(x[0] * eye[0] + x[1] * eye[1] + x[2] * eye[2]);
-  m[13] = -(y[0] * eye[0] + y[1] * eye[1] + y[2] * eye[2]);
-  m[14] = -(z[0] * eye[0] + z[1] * eye[1] + z[2] * eye[2]);
-  return m;
-}
-function transformPoint(m, x, y, z) {
-  return [
-    m[0] * x + m[4] * y + m[8] * z + m[12],
-    m[1] * x + m[5] * y + m[9] * z + m[13],
-    m[2] * x + m[6] * y + m[10] * z + m[14],
-    m[3] * x + m[7] * y + m[11] * z + m[15]
+// src/plot3d/bar3d.ts
+function buildCube() {
+  const faces = [
+    { n: [1, 0, 0], v: [[0.5, 0, -0.5], [0.5, 1, -0.5], [0.5, 1, 0.5], [0.5, 0, -0.5], [0.5, 1, 0.5], [0.5, 0, 0.5]] },
+    { n: [-1, 0, 0], v: [[-0.5, 0, 0.5], [-0.5, 1, 0.5], [-0.5, 1, -0.5], [-0.5, 0, 0.5], [-0.5, 1, -0.5], [-0.5, 0, -0.5]] },
+    { n: [0, 1, 0], v: [[-0.5, 1, -0.5], [0.5, 1, -0.5], [0.5, 1, 0.5], [-0.5, 1, -0.5], [0.5, 1, 0.5], [-0.5, 1, 0.5]] },
+    { n: [0, -1, 0], v: [[-0.5, 0, 0.5], [0.5, 0, 0.5], [0.5, 0, -0.5], [-0.5, 0, 0.5], [0.5, 0, -0.5], [-0.5, 0, -0.5]] },
+    { n: [0, 0, 1], v: [[-0.5, 0, 0.5], [0.5, 0, 0.5], [0.5, 1, 0.5], [-0.5, 0, 0.5], [0.5, 1, 0.5], [-0.5, 1, 0.5]] },
+    { n: [0, 0, -1], v: [[0.5, 0, -0.5], [-0.5, 0, -0.5], [-0.5, 1, -0.5], [0.5, 0, -0.5], [-0.5, 1, -0.5], [0.5, 1, -0.5]] }
   ];
+  const out = [];
+  for (const f of faces) for (const p of f.v) out.push(p[0], p[1], p[2], f.n[0], f.n[1], f.n[2]);
+  return new Float32Array(out);
 }
-function scaleTranslate(s, t) {
-  const m = identity();
-  m[0] = s[0];
-  m[5] = s[1];
-  m[10] = s[2];
-  m[12] = t[0];
-  m[13] = t[1];
-  m[14] = t[2];
-  return m;
-}
-
-// src/plot3d/pointcloud.ts
-var VERT9 = (
+var CUBE = buildCube();
+var VERT10 = (
   /* glsl */
   `#version 300 es
 precision highp float;
-layout(location = 0) in vec3 aPos;
-layout(location = 1) in vec3 aColor;
+layout(location = 0) in vec3 aCube;   // unit cube (y in [0,1])
+layout(location = 1) in vec3 aNormal;
+layout(location = 2) in vec2 aBase;   // instance x,z
+layout(location = 3) in float aHeight;
+layout(location = 4) in vec3 aColor;
 uniform mat4 uMVP;
-uniform float uSize;
+uniform float uWidth;
 out vec3 vColor;
+out vec3 vN;
 void main() {
+  vec3 world = vec3(aBase.x + aCube.x * uWidth, aCube.y * aHeight, aBase.y + aCube.z * uWidth);
   vColor = aColor;
-  gl_Position = uMVP * vec4(aPos, 1.0);
-  gl_PointSize = uSize;
+  vN = aNormal;
+  gl_Position = uMVP * vec4(world, 1.0);
 }`
 );
-var FRAG11 = (
+var FRAG12 = (
   /* glsl */
   `#version 300 es
 precision highp float;
 in vec3 vColor;
+in vec3 vN;
+uniform vec3 uLightDir;
+uniform float uAmbient;
 out vec4 outColor;
 void main() {
-  vec2 d = gl_PointCoord - 0.5;
-  if (length(d) > 0.5) discard;
-  outColor = vec4(vColor, 1.0);
+  float d = max(dot(normalize(vN), normalize(uLightDir)), 0.0);
+  float shade = uAmbient + (1.0 - uAmbient) * d;
+  outColor = vec4(vColor * shade, 1.0);
 }`
 );
-var programCache10 = /* @__PURE__ */ new WeakMap();
-function getProgram9(gl) {
-  let p = programCache10.get(gl);
+var programCache13 = /* @__PURE__ */ new WeakMap();
+function getProgram10(gl) {
+  let p = programCache13.get(gl);
   if (!p) {
-    p = createProgram(gl, VERT9, FRAG11);
-    programCache10.set(gl, p);
+    p = createProgram(gl, VERT10, FRAG12);
+    programCache13.set(gl, p);
   }
   return p;
 }
-var counter13 = 0;
-var PointCloudLayer = class {
-  constructor(gl, opts) {
-    this.id = `points3d-${counter13++}`;
-    this.gl = gl;
-    this.program = getProgram9(gl);
-    this.size = opts.size ?? 4;
+function medianSpacing3(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++) {
+    const d = s[i] - s[i - 1];
+    if (d > 1e-9) diffs.push(d);
+  }
+  if (!diffs.length) return 1;
+  diffs.sort((a, b) => a - b);
+  return diffs[Math.floor(diffs.length / 2)];
+}
+var counter17 = 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.gl = gl;
+    this.program = getProgram10(gl);
+    this.name = opts.name;
     const n = Math.min(opts.x.length, opts.y.length, opts.z.length);
     this.count = n;
-    const base = opts.color != null ? Array.isArray(opts.color) ? opts.color : parseColor(opts.color) : [0.4, 0.7, 1, 1];
+    const 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 (opts.colorBy && !opts.colorBy.domain) {
-      const v = opts.colorBy.values;
+    if (cmap && cvals && !opts.colorBy?.domain) {
       for (let i = 0; i < n; i++) {
-        const t = v[i];
-        if (t < lo) lo = t;
-        if (t > hi) hi = t;
+        const v = cvals[i];
+        if (v < lo) lo = v;
+        if (v > hi) hi = v;
       }
     }
     const span = hi - lo || 1;
-    const data = new Float32Array(n * 6);
-    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity, minZ = Infinity, maxZ = -Infinity;
+    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], y = opts.y[i], z = opts.z[i];
-      data[i * 6] = x;
-      data[i * 6 + 1] = y;
-      data[i * 6 + 2] = z;
+      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 && opts.colorBy) c = cmap((opts.colorBy.values[i] - lo) / span);
+      if (cmap && cvals) c = cmap((cvals[i] - lo) / span);
       else c = [base[0], base[1], base[2]];
-      data[i * 6 + 3] = c[0];
-      data[i * 6 + 4] = c[1];
-      data[i * 6 + 5] = c[2];
+      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.vao = gl.createVertexArray();
+    gl.bindVertexArray(this.vao);
+    const cubeBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, cubeBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, CUBE, gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 24, 0);
+    gl.enableVertexAttribArray(1);
+    gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 24, 12);
+    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);
+    gl.enableVertexAttribArray(3);
+    gl.vertexAttribPointer(3, 1, gl.FLOAT, false, 24, 8);
+    gl.vertexAttribDivisor(3, 1);
+    gl.enableVertexAttribArray(4);
+    gl.vertexAttribPointer(4, 3, gl.FLOAT, false, 24, 12);
+    gl.vertexAttribDivisor(4, 1);
+    gl.bindVertexArray(null);
+    this.buffers = [cubeBuf, instBuf];
+    this.uniforms = uniformLocations(gl, this.program, ["uMVP", "uWidth", "uLightDir", "uAmbient"]);
+  }
+  bounds3() {
+    return this.count ? this.b3 : null;
+  }
+  colorInfo() {
+    return this.cInfo;
+  }
+  pickData() {
+    return this.count ? { positions: this.positions } : null;
+  }
+  /** Set the light direction (world space) and ambient term (0..1). */
+  setLight(dir, ambient) {
+    this.lightDir = dir;
+    this.ambient = ambient;
+  }
+  draw(gl, mvp) {
+    if (this.count === 0) return;
+    gl.useProgram(this.program);
+    gl.uniformMatrix4fv(this.uniforms.uMVP, false, mvp);
+    gl.uniform1f(this.uniforms.uWidth, this.width);
+    gl.uniform3f(this.uniforms.uLightDir, this.lightDir[0], this.lightDir[1], this.lightDir[2]);
+    gl.uniform1f(this.uniforms.uAmbient, this.ambient);
+    gl.bindVertexArray(this.vao);
+    gl.drawArraysInstanced(gl.TRIANGLES, 0, 36, this.count);
+    gl.bindVertexArray(null);
+  }
+  dispose() {
+    this.gl.deleteVertexArray(this.vao);
+    for (const b of this.buffers) this.gl.deleteBuffer(b);
+  }
+};
+
+// src/plot3d/contour3d.ts
+var CASES2 = [
+  [],
+  [[3, 0]],
+  [[0, 1]],
+  [[3, 1]],
+  [[1, 2]],
+  [[3, 0], [1, 2]],
+  [[0, 2]],
+  [[3, 2]],
+  [[2, 3]],
+  [[2, 0]],
+  [[0, 1], [2, 3]],
+  [[2, 1]],
+  [[1, 3]],
+  [[1, 0]],
+  [[0, 3]],
+  []
+];
+var VERT11 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+layout(location = 0) in vec3 aPos;
+layout(location = 1) in vec3 aColor;
+uniform mat4 uMVP;
+out vec3 vColor;
+void main() { vColor = aColor; gl_Position = uMVP * vec4(aPos, 1.0); }`
+);
+var FRAG13 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+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);
+  if (!p) {
+    p = createProgram(gl, VERT11, FRAG13);
+    programCache14.set(gl, p);
+  }
+  return p;
+}
+var counter18 = 0;
+var Contour3DLayer = class {
+  constructor(gl, opts) {
+    this.cInfo = null;
+    this.id = `contour3d-${counter18++}`;
+    this.gl = gl;
+    this.program = getProgram11(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];
+    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 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 wx = (c) => x0 + c / (cols - 1) * (x1 - x0);
+    const wz = (r) => z0 + r / (rows - 1) * (z1 - z0);
+    const at = (c, r) => values[r * cols + c];
+    const data = [];
+    for (const L of levels) {
+      const col = fixed ? [fixed[0], fixed[1], fixed[2]] : cmap((L - vmin) / lspan);
+      for (let r = 0; r < rows - 1; r++) {
+        for (let c = 0; c < cols - 1; c++) {
+          const v0 = at(c, r), v1 = at(c + 1, r), v2 = at(c + 1, r + 1), v3 = at(c, r + 1);
+          const idx = (v0 >= L ? 1 : 0) | (v1 >= L ? 2 : 0) | (v2 >= L ? 4 : 0) | (v3 >= L ? 8 : 0);
+          const segs = CASES2[idx];
+          if (segs.length === 0) continue;
+          const lerp = (t, ax, az, bx, bz) => [ax + (bx - ax) * t, az + (bz - az) * t];
+          const edge = (e) => {
+            if (e === 0) return lerp((L - v0) / (v1 - v0 || 1e-9), wx(c), wz(r), wx(c + 1), wz(r));
+            if (e === 1) return lerp((L - v1) / (v2 - v1 || 1e-9), wx(c + 1), wz(r), wx(c + 1), wz(r + 1));
+            if (e === 2) return lerp((L - v2) / (v3 - v2 || 1e-9), wx(c + 1), wz(r + 1), wx(c), wz(r + 1));
+            return lerp((L - v3) / (v0 - v3 || 1e-9), wx(c), wz(r + 1), wx(c), wz(r));
+          };
+          for (const [ea, eb] of segs) {
+            const pa = edge(ea), pb = edge(eb);
+            data.push(pa[0], L, pa[1], col[0], col[1], col[2]);
+            data.push(pb[0], L, pb[1], col[0], col[1], col[2]);
+          }
+        }
+      }
+    }
+    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.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"]);
+  }
+  bounds3() {
+    return this.vertCount ? this.b3 : null;
+  }
+  colorInfo() {
+    return this.cInfo;
+  }
+  draw(gl, mvp) {
+    if (this.vertCount === 0) return;
+    gl.useProgram(this.program);
+    gl.uniformMatrix4fv(this.uniforms.uMVP, false, mvp);
+    gl.bindVertexArray(this.vao);
+    gl.drawArrays(gl.LINES, 0, this.vertCount);
+    gl.bindVertexArray(null);
+  }
+  dispose() {
+    this.gl.deleteVertexArray(this.vao);
+    this.gl.deleteBuffer(this.buffer);
+  }
+};
+
+// src/plot3d/marching-cubes.ts
+var EDGE_TABLE = [
+  0,
+  265,
+  515,
+  778,
+  1030,
+  1295,
+  1541,
+  1804,
+  2060,
+  2309,
+  2575,
+  2822,
+  3082,
+  3331,
+  3593,
+  3840,
+  400,
+  153,
+  915,
+  666,
+  1430,
+  1183,
+  1941,
+  1692,
+  2460,
+  2197,
+  2975,
+  2710,
+  3482,
+  3219,
+  3993,
+  3728,
+  560,
+  825,
+  51,
+  314,
+  1590,
+  1855,
+  1077,
+  1340,
+  2620,
+  2869,
+  2111,
+  2358,
+  3642,
+  3891,
+  3129,
+  3376,
+  928,
+  681,
+  419,
+  170,
+  1958,
+  1711,
+  1445,
+  1196,
+  2988,
+  2725,
+  2479,
+  2214,
+  4010,
+  3747,
+  3497,
+  3232,
+  1120,
+  1385,
+  1635,
+  1898,
+  102,
+  367,
+  613,
+  876,
+  3180,
+  3429,
+  3695,
+  3942,
+  2154,
+  2403,
+  2665,
+  2912,
+  1520,
+  1273,
+  2035,
+  1786,
+  502,
+  255,
+  1013,
+  764,
+  3580,
+  3317,
+  4095,
+  3830,
+  2554,
+  2291,
+  3065,
+  2800,
+  1616,
+  1881,
+  1107,
+  1370,
+  598,
+  863,
+  85,
+  348,
+  3676,
+  3925,
+  3167,
+  3414,
+  2650,
+  2899,
+  2137,
+  2384,
+  1984,
+  1737,
+  1475,
+  1226,
+  966,
+  719,
+  453,
+  204,
+  4044,
+  3781,
+  3535,
+  3270,
+  3018,
+  2755,
+  2505,
+  2240,
+  2240,
+  2505,
+  2755,
+  3018,
+  3270,
+  3535,
+  3781,
+  4044,
+  204,
+  453,
+  719,
+  966,
+  1226,
+  1475,
+  1737,
+  1984,
+  2384,
+  2137,
+  2899,
+  2650,
+  3414,
+  3167,
+  3925,
+  3676,
+  348,
+  85,
+  863,
+  598,
+  1370,
+  1107,
+  1881,
+  1616,
+  2800,
+  3065,
+  2291,
+  2554,
+  3830,
+  4095,
+  3317,
+  3580,
+  764,
+  1013,
+  255,
+  502,
+  1786,
+  2035,
+  1273,
+  1520,
+  2912,
+  2665,
+  2403,
+  2154,
+  3942,
+  3695,
+  3429,
+  3180,
+  876,
+  613,
+  367,
+  102,
+  1898,
+  1635,
+  1385,
+  1120,
+  3232,
+  3497,
+  3747,
+  4010,
+  2214,
+  2479,
+  2725,
+  2988,
+  1196,
+  1445,
+  1711,
+  1958,
+  170,
+  419,
+  681,
+  928,
+  3376,
+  3129,
+  3891,
+  3642,
+  2358,
+  2111,
+  2869,
+  2620,
+  1340,
+  1077,
+  1855,
+  1590,
+  314,
+  51,
+  825,
+  560,
+  3728,
+  3993,
+  3219,
+  3482,
+  2710,
+  2975,
+  2197,
+  2460,
+  1692,
+  1941,
+  1183,
+  1430,
+  666,
+  915,
+  153,
+  400,
+  3840,
+  3593,
+  3331,
+  3082,
+  2822,
+  2575,
+  2309,
+  2060,
+  1804,
+  1541,
+  1295,
+  1030,
+  778,
+  515,
+  265,
+  0
+];
+var TRI_TABLE = [
+  [],
+  [0, 8, 3],
+  [0, 1, 9],
+  [1, 8, 3, 9, 8, 1],
+  [1, 2, 10],
+  [0, 8, 3, 1, 2, 10],
+  [9, 2, 10, 0, 2, 9],
+  [2, 8, 3, 2, 10, 8, 10, 9, 8],
+  [3, 11, 2],
+  [0, 11, 2, 8, 11, 0],
+  [1, 9, 0, 2, 3, 11],
+  [1, 11, 2, 1, 9, 11, 9, 8, 11],
+  [3, 10, 1, 11, 10, 3],
+  [0, 10, 1, 0, 8, 10, 8, 11, 10],
+  [3, 9, 0, 3, 11, 9, 11, 10, 9],
+  [9, 8, 10, 10, 8, 11],
+  [4, 7, 8],
+  [4, 3, 0, 7, 3, 4],
+  [0, 1, 9, 8, 4, 7],
+  [4, 1, 9, 4, 7, 1, 7, 3, 1],
+  [1, 2, 10, 8, 4, 7],
+  [3, 4, 7, 3, 0, 4, 1, 2, 10],
+  [9, 2, 10, 9, 0, 2, 8, 4, 7],
+  [2, 10, 9, 2, 9, 7, 2, 7, 3, 7, 9, 4],
+  [8, 4, 7, 3, 11, 2],
+  [11, 4, 7, 11, 2, 4, 2, 0, 4],
+  [9, 0, 1, 8, 4, 7, 2, 3, 11],
+  [4, 7, 11, 9, 4, 11, 9, 11, 2, 9, 2, 1],
+  [3, 10, 1, 3, 11, 10, 7, 8, 4],
+  [1, 11, 10, 1, 4, 11, 1, 0, 4, 7, 11, 4],
+  [4, 7, 8, 9, 0, 11, 9, 11, 10, 11, 0, 3],
+  [4, 7, 11, 4, 11, 9, 9, 11, 10],
+  [9, 5, 4],
+  [9, 5, 4, 0, 8, 3],
+  [0, 5, 4, 1, 5, 0],
+  [8, 5, 4, 8, 3, 5, 3, 1, 5],
+  [1, 2, 10, 9, 5, 4],
+  [3, 0, 8, 1, 2, 10, 4, 9, 5],
+  [5, 2, 10, 5, 4, 2, 4, 0, 2],
+  [2, 10, 5, 3, 2, 5, 3, 5, 4, 3, 4, 8],
+  [9, 5, 4, 2, 3, 11],
+  [0, 11, 2, 0, 8, 11, 4, 9, 5],
+  [0, 5, 4, 0, 1, 5, 2, 3, 11],
+  [2, 1, 5, 2, 5, 8, 2, 8, 11, 4, 8, 5],
+  [10, 3, 11, 10, 1, 3, 9, 5, 4],
+  [4, 9, 5, 0, 8, 1, 8, 10, 1, 8, 11, 10],
+  [5, 4, 0, 5, 0, 11, 5, 11, 10, 11, 0, 3],
+  [5, 4, 8, 5, 8, 10, 10, 8, 11],
+  [9, 7, 8, 5, 7, 9],
+  [9, 3, 0, 9, 5, 3, 5, 7, 3],
+  [0, 7, 8, 0, 1, 7, 1, 5, 7],
+  [1, 5, 3, 3, 5, 7],
+  [9, 7, 8, 9, 5, 7, 10, 1, 2],
+  [10, 1, 2, 9, 5, 0, 5, 3, 0, 5, 7, 3],
+  [8, 0, 2, 8, 2, 5, 8, 5, 7, 10, 5, 2],
+  [2, 10, 5, 2, 5, 3, 3, 5, 7],
+  [7, 9, 5, 7, 8, 9, 3, 11, 2],
+  [9, 5, 7, 9, 7, 2, 9, 2, 0, 2, 7, 11],
+  [2, 3, 11, 0, 1, 8, 1, 7, 8, 1, 5, 7],
+  [11, 2, 1, 11, 1, 7, 7, 1, 5],
+  [9, 5, 8, 8, 5, 7, 10, 1, 3, 10, 3, 11],
+  [5, 7, 0, 5, 0, 9, 7, 11, 0, 1, 0, 10, 11, 10, 0],
+  [11, 10, 0, 11, 0, 3, 10, 5, 0, 8, 0, 7, 5, 7, 0],
+  [11, 10, 5, 7, 11, 5],
+  [10, 6, 5],
+  [0, 8, 3, 5, 10, 6],
+  [9, 0, 1, 5, 10, 6],
+  [1, 8, 3, 1, 9, 8, 5, 10, 6],
+  [1, 6, 5, 2, 6, 1],
+  [1, 6, 5, 1, 2, 6, 3, 0, 8],
+  [9, 6, 5, 9, 0, 6, 0, 2, 6],
+  [5, 9, 8, 5, 8, 2, 5, 2, 6, 3, 2, 8],
+  [2, 3, 11, 10, 6, 5],
+  [11, 0, 8, 11, 2, 0, 10, 6, 5],
+  [0, 1, 9, 2, 3, 11, 5, 10, 6],
+  [5, 10, 6, 1, 9, 2, 9, 11, 2, 9, 8, 11],
+  [6, 3, 11, 6, 5, 3, 5, 1, 3],
+  [0, 8, 11, 0, 11, 5, 0, 5, 1, 5, 11, 6],
+  [3, 11, 6, 0, 3, 6, 0, 6, 5, 0, 5, 9],
+  [6, 5, 9, 6, 9, 11, 11, 9, 8],
+  [5, 10, 6, 4, 7, 8],
+  [4, 3, 0, 4, 7, 3, 6, 5, 10],
+  [1, 9, 0, 5, 10, 6, 8, 4, 7],
+  [10, 6, 5, 1, 9, 7, 1, 7, 3, 7, 9, 4],
+  [6, 1, 2, 6, 5, 1, 4, 7, 8],
+  [1, 2, 5, 5, 2, 6, 3, 0, 4, 3, 4, 7],
+  [8, 4, 7, 9, 0, 5, 0, 6, 5, 0, 2, 6],
+  [7, 3, 9, 7, 9, 4, 3, 2, 9, 5, 9, 6, 2, 6, 9],
+  [3, 11, 2, 7, 8, 4, 10, 6, 5],
+  [5, 10, 6, 4, 7, 2, 4, 2, 0, 2, 7, 11],
+  [0, 1, 9, 4, 7, 8, 2, 3, 11, 5, 10, 6],
+  [9, 2, 1, 9, 11, 2, 9, 4, 11, 7, 11, 4, 5, 10, 6],
+  [8, 4, 7, 3, 11, 5, 3, 5, 1, 5, 11, 6],
+  [5, 1, 11, 5, 11, 6, 1, 0, 11, 7, 11, 4, 0, 4, 11],
+  [0, 5, 9, 0, 6, 5, 0, 3, 6, 11, 6, 3, 8, 4, 7],
+  [6, 5, 9, 6, 9, 11, 4, 7, 9, 7, 11, 9],
+  [10, 4, 9, 6, 4, 10],
+  [4, 10, 6, 4, 9, 10, 0, 8, 3],
+  [10, 0, 1, 10, 6, 0, 6, 4, 0],
+  [8, 3, 1, 8, 1, 6, 8, 6, 4, 6, 1, 10],
+  [1, 4, 9, 1, 2, 4, 2, 6, 4],
+  [3, 0, 8, 1, 2, 9, 2, 4, 9, 2, 6, 4],
+  [0, 2, 4, 4, 2, 6],
+  [8, 3, 2, 8, 2, 4, 4, 2, 6],
+  [10, 4, 9, 10, 6, 4, 11, 2, 3],
+  [0, 8, 2, 2, 8, 11, 4, 9, 10, 4, 10, 6],
+  [3, 11, 2, 0, 1, 6, 0, 6, 4, 6, 1, 10],
+  [6, 4, 1, 6, 1, 10, 4, 8, 1, 2, 1, 11, 8, 11, 1],
+  [9, 6, 4, 9, 3, 6, 9, 1, 3, 11, 6, 3],
+  [8, 11, 1, 8, 1, 0, 11, 6, 1, 9, 1, 4, 6, 4, 1],
+  [3, 11, 6, 3, 6, 0, 0, 6, 4],
+  [6, 4, 8, 11, 6, 8],
+  [7, 10, 6, 7, 8, 10, 8, 9, 10],
+  [0, 7, 3, 0, 10, 7, 0, 9, 10, 6, 7, 10],
+  [10, 6, 7, 1, 10, 7, 1, 7, 8, 1, 8, 0],
+  [10, 6, 7, 10, 7, 1, 1, 7, 3],
+  [1, 2, 6, 1, 6, 8, 1, 8, 9, 8, 6, 7],
+  [2, 6, 9, 2, 9, 1, 6, 7, 9, 0, 9, 3, 7, 3, 9],
+  [7, 8, 0, 7, 0, 6, 6, 0, 2],
+  [7, 3, 2, 6, 7, 2],
+  [2, 3, 11, 10, 6, 8, 10, 8, 9, 8, 6, 7],
+  [2, 0, 7, 2, 7, 11, 0, 9, 7, 6, 7, 10, 9, 10, 7],
+  [1, 8, 0, 1, 7, 8, 1, 10, 7, 6, 7, 10, 2, 3, 11],
+  [11, 2, 1, 11, 1, 7, 10, 6, 1, 6, 7, 1],
+  [8, 9, 6, 8, 6, 7, 9, 1, 6, 11, 6, 3, 1, 3, 6],
+  [0, 9, 1, 11, 6, 7],
+  [7, 8, 0, 7, 0, 6, 3, 11, 0, 11, 6, 0],
+  [7, 11, 6],
+  [7, 6, 11],
+  [3, 0, 8, 11, 7, 6],
+  [0, 1, 9, 11, 7, 6],
+  [8, 1, 9, 8, 3, 1, 11, 7, 6],
+  [10, 1, 2, 6, 11, 7],
+  [1, 2, 10, 3, 0, 8, 6, 11, 7],
+  [2, 9, 0, 2, 10, 9, 6, 11, 7],
+  [6, 11, 7, 2, 10, 3, 10, 8, 3, 10, 9, 8],
+  [7, 2, 3, 6, 2, 7],
+  [7, 0, 8, 7, 6, 0, 6, 2, 0],
+  [2, 7, 6, 2, 3, 7, 0, 1, 9],
+  [1, 6, 2, 1, 8, 6, 1, 9, 8, 8, 7, 6],
+  [10, 7, 6, 10, 1, 7, 1, 3, 7],
+  [10, 7, 6, 1, 7, 10, 1, 8, 7, 1, 0, 8],
+  [0, 3, 7, 0, 7, 10, 0, 10, 9, 6, 10, 7],
+  [7, 6, 10, 7, 10, 8, 8, 10, 9],
+  [6, 8, 4, 11, 8, 6],
+  [3, 6, 11, 3, 0, 6, 0, 4, 6],
+  [8, 6, 11, 8, 4, 6, 9, 0, 1],
+  [9, 4, 6, 9, 6, 3, 9, 3, 1, 11, 3, 6],
+  [6, 8, 4, 6, 11, 8, 2, 10, 1],
+  [1, 2, 10, 3, 0, 11, 0, 6, 11, 0, 4, 6],
+  [4, 11, 8, 4, 6, 11, 0, 2, 9, 2, 10, 9],
+  [10, 9, 3, 10, 3, 2, 9, 4, 3, 11, 3, 6, 4, 6, 3],
+  [8, 2, 3, 8, 4, 2, 4, 6, 2],
+  [0, 4, 2, 4, 6, 2],
+  [1, 9, 0, 2, 3, 4, 2, 4, 6, 4, 3, 8],
+  [1, 9, 4, 1, 4, 2, 2, 4, 6],
+  [8, 1, 3, 8, 6, 1, 8, 4, 6, 6, 10, 1],
+  [10, 1, 0, 10, 0, 6, 6, 0, 4],
+  [4, 6, 3, 4, 3, 8, 6, 10, 3, 0, 3, 9, 10, 9, 3],
+  [10, 9, 4, 6, 10, 4],
+  [4, 9, 5, 7, 6, 11],
+  [0, 8, 3, 4, 9, 5, 11, 7, 6],
+  [5, 0, 1, 5, 4, 0, 7, 6, 11],
+  [11, 7, 6, 8, 3, 4, 3, 5, 4, 3, 1, 5],
+  [9, 5, 4, 10, 1, 2, 7, 6, 11],
+  [6, 11, 7, 1, 2, 10, 0, 8, 3, 4, 9, 5],
+  [7, 6, 11, 5, 4, 10, 4, 2, 10, 4, 0, 2],
+  [3, 4, 8, 3, 5, 4, 3, 2, 5, 10, 5, 2, 11, 7, 6],
+  [7, 2, 3, 7, 6, 2, 5, 4, 9],
+  [9, 5, 4, 0, 8, 6, 0, 6, 2, 6, 8, 7],
+  [3, 6, 2, 3, 7, 6, 1, 5, 0, 5, 4, 0],
+  [6, 2, 8, 6, 8, 7, 2, 1, 8, 4, 8, 5, 1, 5, 8],
+  [9, 5, 4, 10, 1, 6, 1, 7, 6, 1, 3, 7],
+  [1, 6, 10, 1, 7, 6, 1, 0, 7, 8, 7, 0, 9, 5, 4],
+  [4, 0, 10, 4, 10, 5, 0, 3, 10, 6, 10, 7, 3, 7, 10],
+  [7, 6, 10, 7, 10, 8, 5, 4, 10, 4, 8, 10],
+  [6, 9, 5, 6, 11, 9, 11, 8, 9],
+  [3, 6, 11, 0, 6, 3, 0, 5, 6, 0, 9, 5],
+  [0, 11, 8, 0, 5, 11, 0, 1, 5, 5, 6, 11],
+  [6, 11, 3, 6, 3, 5, 5, 3, 1],
+  [1, 2, 10, 9, 5, 11, 9, 11, 8, 11, 5, 6],
+  [0, 11, 3, 0, 6, 11, 0, 9, 6, 5, 6, 9, 1, 2, 10],
+  [11, 8, 5, 11, 5, 6, 8, 0, 5, 10, 5, 2, 0, 2, 5],
+  [6, 11, 3, 6, 3, 5, 2, 10, 3, 10, 5, 3],
+  [5, 8, 9, 5, 2, 8, 5, 6, 2, 3, 8, 2],
+  [9, 5, 6, 9, 6, 0, 0, 6, 2],
+  [1, 5, 8, 1, 8, 0, 5, 6, 8, 3, 8, 2, 6, 2, 8],
+  [1, 5, 6, 2, 1, 6],
+  [1, 3, 6, 1, 6, 10, 3, 8, 6, 5, 6, 9, 8, 9, 6],
+  [10, 1, 0, 10, 0, 6, 9, 5, 0, 5, 6, 0],
+  [0, 3, 8, 5, 6, 10],
+  [10, 5, 6],
+  [11, 5, 10, 7, 5, 11],
+  [11, 5, 10, 11, 7, 5, 8, 3, 0],
+  [5, 11, 7, 5, 10, 11, 1, 9, 0],
+  [10, 7, 5, 10, 11, 7, 9, 8, 1, 8, 3, 1],
+  [11, 1, 2, 11, 7, 1, 7, 5, 1],
+  [0, 8, 3, 1, 2, 7, 1, 7, 5, 7, 2, 11],
+  [9, 7, 5, 9, 2, 7, 9, 0, 2, 2, 11, 7],
+  [7, 5, 2, 7, 2, 11, 5, 9, 2, 3, 2, 8, 9, 8, 2],
+  [2, 5, 10, 2, 3, 5, 3, 7, 5],
+  [8, 2, 0, 8, 5, 2, 8, 7, 5, 10, 2, 5],
+  [9, 0, 1, 5, 10, 3, 5, 3, 7, 3, 10, 2],
+  [9, 8, 2, 9, 2, 1, 8, 7, 2, 10, 2, 5, 7, 5, 2],
+  [1, 3, 5, 3, 7, 5],
+  [0, 8, 7, 0, 7, 1, 1, 7, 5],
+  [9, 0, 3, 9, 3, 5, 5, 3, 7],
+  [9, 8, 7, 5, 9, 7],
+  [5, 8, 4, 5, 10, 8, 10, 11, 8],
+  [5, 0, 4, 5, 11, 0, 5, 10, 11, 11, 3, 0],
+  [0, 1, 9, 8, 4, 10, 8, 10, 11, 10, 4, 5],
+  [10, 11, 4, 10, 4, 5, 11, 3, 4, 9, 4, 1, 3, 1, 4],
+  [2, 5, 1, 2, 8, 5, 2, 11, 8, 4, 5, 8],
+  [0, 4, 11, 0, 11, 3, 4, 5, 11, 2, 11, 1, 5, 1, 11],
+  [0, 2, 5, 0, 5, 9, 2, 11, 5, 4, 5, 8, 11, 8, 5],
+  [9, 4, 5, 2, 11, 3],
+  [2, 5, 10, 3, 5, 2, 3, 4, 5, 3, 8, 4],
+  [5, 10, 2, 5, 2, 4, 4, 2, 0],
+  [3, 10, 2, 3, 5, 10, 3, 8, 5, 4, 5, 8, 0, 1, 9],
+  [5, 10, 2, 5, 2, 4, 1, 9, 2, 9, 4, 2],
+  [8, 4, 5, 8, 5, 3, 3, 5, 1],
+  [0, 4, 5, 1, 0, 5],
+  [8, 4, 5, 8, 5, 3, 9, 0, 5, 0, 3, 5],
+  [9, 4, 5],
+  [4, 11, 7, 4, 9, 11, 9, 10, 11],
+  [0, 8, 3, 4, 9, 7, 9, 11, 7, 9, 10, 11],
+  [1, 10, 11, 1, 11, 4, 1, 4, 0, 7, 4, 11],
+  [3, 1, 4, 3, 4, 8, 1, 10, 4, 7, 4, 11, 10, 11, 4],
+  [4, 11, 7, 9, 11, 4, 9, 2, 11, 9, 1, 2],
+  [9, 7, 4, 9, 11, 7, 9, 1, 11, 2, 11, 1, 0, 8, 3],
+  [11, 7, 4, 11, 4, 2, 2, 4, 0],
+  [11, 7, 4, 11, 4, 2, 8, 3, 4, 3, 2, 4],
+  [2, 9, 10, 2, 7, 9, 2, 3, 7, 7, 4, 9],
+  [9, 10, 7, 9, 7, 4, 10, 2, 7, 8, 7, 0, 2, 0, 7],
+  [3, 7, 10, 3, 10, 2, 7, 4, 10, 1, 10, 0, 4, 0, 10],
+  [1, 10, 2, 8, 7, 4],
+  [4, 9, 1, 4, 1, 7, 7, 1, 3],
+  [4, 9, 1, 4, 1, 7, 0, 8, 1, 8, 7, 1],
+  [4, 0, 3, 7, 4, 3],
+  [4, 8, 7],
+  [9, 10, 8, 10, 11, 8],
+  [3, 0, 9, 3, 9, 11, 11, 9, 10],
+  [0, 1, 10, 0, 10, 8, 8, 10, 11],
+  [3, 1, 10, 11, 3, 10],
+  [1, 2, 11, 1, 11, 9, 9, 11, 8],
+  [3, 0, 9, 3, 9, 11, 1, 2, 9, 2, 11, 9],
+  [0, 2, 11, 8, 0, 11],
+  [3, 2, 11],
+  [2, 3, 8, 2, 8, 10, 10, 8, 9],
+  [9, 10, 2, 0, 9, 2],
+  [2, 3, 8, 2, 8, 10, 0, 1, 8, 1, 10, 8],
+  [1, 10, 2],
+  [1, 3, 8, 9, 1, 8],
+  [0, 9, 1],
+  [0, 3, 8],
+  []
+];
+var EDGE_CORNERS = [
+  [0, 1],
+  [1, 2],
+  [2, 3],
+  [3, 0],
+  [4, 5],
+  [5, 6],
+  [6, 7],
+  [7, 4],
+  [0, 4],
+  [1, 5],
+  [2, 6],
+  [3, 7]
+];
+var CORNER = [
+  [0, 0, 0],
+  [1, 0, 0],
+  [1, 1, 0],
+  [0, 1, 0],
+  [0, 0, 1],
+  [1, 0, 1],
+  [1, 1, 1],
+  [0, 1, 1]
+];
+function marchingCubes(values, dims, isoLevel, extent) {
+  const [nx, ny, nz] = dims;
+  const ex = extent?.x ?? [0, nx - 1];
+  const ez = extent?.z ?? [0, nz - 1];
+  const ey = extent?.y ?? [0, ny - 1];
+  const wx = (x) => ex[0] + x / Math.max(1, nx - 1) * (ex[1] - ex[0]);
+  const wy = (y) => ey[0] + y / Math.max(1, ny - 1) * (ey[1] - ey[0]);
+  const wz = (z) => ez[0] + z / Math.max(1, nz - 1) * (ez[1] - ez[0]);
+  const idx = (x, y, z) => x + y * nx + z * nx * ny;
+  const val = (x, y, z) => values[idx(x, y, z)];
+  const grad = (x, y, z) => {
+    const gx = val(Math.min(nx - 1, x + 1), y, z) - val(Math.max(0, x - 1), y, z);
+    const gy = val(x, Math.min(ny - 1, y + 1), z) - val(x, Math.max(0, y - 1), z);
+    const gz = val(x, y, Math.min(nz - 1, z + 1)) - val(x, y, Math.max(0, z - 1));
+    return [gx, gy, gz];
+  };
+  const positions = [];
+  const normals = [];
+  const cornerVal = new Array(8);
+  const edgeP = new Array(12);
+  const edgeN = new Array(12);
+  for (let z = 0; z < nz - 1; z++) {
+    for (let y = 0; y < ny - 1; y++) {
+      for (let x = 0; x < nx - 1; x++) {
+        let cubeIndex = 0;
+        for (let i = 0; i < 8; i++) {
+          const co = CORNER[i];
+          cornerVal[i] = val(x + co[0], y + co[1], z + co[2]);
+          if (cornerVal[i] < isoLevel) cubeIndex |= 1 << i;
+        }
+        const edges = EDGE_TABLE[cubeIndex];
+        if (edges === 0) continue;
+        for (let e = 0; e < 12; e++) {
+          if (!(edges & 1 << e)) continue;
+          const [a, b] = EDGE_CORNERS[e];
+          const va = cornerVal[a], vb = cornerVal[b];
+          const t = Math.abs(vb - va) < 1e-9 ? 0.5 : (isoLevel - va) / (vb - va);
+          const ca = CORNER[a], cb = CORNER[b];
+          const px = x + ca[0] + (cb[0] - ca[0]) * t;
+          const py = y + ca[1] + (cb[1] - ca[1]) * t;
+          const pz = z + ca[2] + (cb[2] - ca[2]) * t;
+          edgeP[e] = [wx(px), wy(py), wz(pz)];
+          const ga = grad(x + ca[0], y + ca[1], z + ca[2]);
+          const gb = grad(x + cb[0], y + cb[1], z + cb[2]);
+          let nxn = -(ga[0] + (gb[0] - ga[0]) * t);
+          let nyn = -(ga[1] + (gb[1] - ga[1]) * t);
+          let nzn = -(ga[2] + (gb[2] - ga[2]) * t);
+          const nl = Math.hypot(nxn, nyn, nzn) || 1;
+          nxn /= nl;
+          nyn /= nl;
+          nzn /= nl;
+          edgeN[e] = [nxn, nyn, nzn];
+        }
+        const tris = TRI_TABLE[cubeIndex];
+        for (let i = 0; i < tris.length; i += 3) {
+          for (let k = 0; k < 3; k++) {
+            const p = edgeP[tris[i + k]];
+            const nrm = edgeN[tris[i + k]];
+            positions.push(p[0], p[1], p[2]);
+            normals.push(nrm[0], nrm[1], nrm[2]);
+          }
+        }
+      }
+    }
+  }
+  return { positions: new Float32Array(positions), normals: new Float32Array(normals) };
+}
+
+// src/plot3d/isosurface.ts
+var VERT12 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+layout(location = 0) in vec3 aPos;
+layout(location = 1) in vec3 aNormal;
+uniform mat4 uMVP;
+out vec3 vN;
+void main() { vN = aNormal; gl_Position = uMVP * vec4(aPos, 1.0); }`
+);
+var FRAG14 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+in vec3 vN;
+uniform vec3 uColor;
+uniform vec3 uLightDir;
+uniform float uAmbient;
+uniform float uOpacity;
+out vec4 outColor;
+void main() {
+  // Two-sided: isosurfaces are viewed from inside and out.
+  float d = abs(dot(normalize(vN), normalize(uLightDir)));
+  float shade = uAmbient + (1.0 - uAmbient) * d;
+  outColor = vec4(uColor * shade * uOpacity, uOpacity);
+}`
+);
+var programCache15 = /* @__PURE__ */ new WeakMap();
+function getProgram12(gl) {
+  let p = programCache15.get(gl);
+  if (!p) {
+    p = createProgram(gl, VERT12, FRAG14);
+    programCache15.set(gl, p);
+  }
+  return p;
+}
+var counter19 = 0;
+var IsosurfaceLayer = class {
+  constructor(gl, opts) {
+    this.lightDir = [0.5, 1, 0.35];
+    this.ambient = 0.35;
+    this.id = `isosurface-${counter19++}`;
+    this.gl = gl;
+    this.program = getProgram12(gl);
+    this.name = opts.name;
+    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.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];
+    this.b3 = { x: ex, y: ey, z: ez };
+    const data = new Float32Array(this.vertCount * 6);
+    for (let i = 0; i < this.vertCount; i++) {
+      data[i * 6] = positions[i * 3];
+      data[i * 6 + 1] = positions[i * 3 + 1];
+      data[i * 6 + 2] = positions[i * 3 + 2];
+      data[i * 6 + 3] = normals[i * 3];
+      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.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"]);
+  }
+  bounds3() {
+    return this.vertCount ? this.b3 : null;
+  }
+  /** Set the light direction (world space) and ambient term (0..1). */
+  setLight(dir, ambient) {
+    this.lightDir = dir;
+    this.ambient = ambient;
+  }
+  draw(gl, mvp) {
+    if (this.vertCount === 0) return;
+    gl.useProgram(this.program);
+    gl.uniformMatrix4fv(this.uniforms.uMVP, false, mvp);
+    gl.uniform3f(this.uniforms.uColor, this.color[0], this.color[1], this.color[2]);
+    gl.uniform3f(this.uniforms.uLightDir, this.lightDir[0], this.lightDir[1], this.lightDir[2]);
+    gl.uniform1f(this.uniforms.uAmbient, this.ambient);
+    gl.uniform1f(this.uniforms.uOpacity, this.opacity);
+    gl.bindVertexArray(this.vao);
+    gl.drawArrays(gl.TRIANGLES, 0, this.vertCount);
+    gl.bindVertexArray(null);
+  }
+  dispose() {
+    this.gl.deleteVertexArray(this.vao);
+    this.gl.deleteBuffer(this.buffer);
+  }
+};
+
+// src/plot3d/line3d.ts
+var VERT13 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+layout(location = 0) in vec3 aPos;
+uniform mat4 uMVP;
+void main() { gl_Position = uMVP * vec4(aPos, 1.0); }`
+);
+var FRAG15 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+uniform vec4 uColor;
+out vec4 outColor;
+void main() { outColor = uColor; }`
+);
+var programCache16 = /* @__PURE__ */ new WeakMap();
+function getProgram13(gl) {
+  let p = programCache16.get(gl);
+  if (!p) {
+    p = createProgram(gl, VERT13, FRAG15);
+    programCache16.set(gl, p);
+  }
+  return p;
+}
+var counter20 = 0;
+var Line3DLayer = class {
+  constructor(gl, opts) {
+    this.id = `line3d-${counter20++}`;
+    this.gl = gl;
+    this.program = getProgram13(gl);
+    this.name = opts.name;
+    const ci = opts.color ?? "#38bdf8";
+    this.color = Array.isArray(ci) ? ci : parseColor(ci);
+    this.colorCss = typeof ci === "string" ? ci : toColorCss(this.color);
+    const n = Math.min(opts.x.length, opts.y.length, opts.z.length);
+    this.count = n;
+    const data = new Float32Array(n * 3);
+    this.positions = data;
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity, minZ = Infinity, maxZ = -Infinity;
+    for (let i = 0; i < n; i++) {
+      const x = opts.x[i], y = opts.y[i], z = opts.z[i];
+      data[i * 3] = x;
+      data[i * 3 + 1] = y;
+      data[i * 3 + 2] = z;
       if (x < minX) minX = x;
       if (x > maxX) maxX = x;
       if (y < minY) minY = y;
@@ -5155,30 +7602,425 @@ var PointCloudLayer = class {
       if (z > maxZ) maxZ = z;
     }
     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, data, gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
+    gl.bindVertexArray(null);
+    this.uniforms = uniformLocations(gl, this.program, ["uMVP", "uColor"]);
+  }
+  bounds3() {
+    return this.count ? this.b3 : null;
+  }
+  pickData() {
+    return this.count ? { positions: this.positions } : null;
+  }
+  /** Stream a new path. Call `plot.refresh()` afterwards to re-fit + redraw. */
+  setData(x, y, z) {
+    const n = Math.min(x.length, y.length, z.length);
+    this.count = n;
+    const data = new Float32Array(n * 3);
+    this.positions = data;
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity, minZ = Infinity, maxZ = -Infinity;
+    for (let i = 0; i < n; i++) {
+      const px = x[i], py = y[i], pz = z[i];
+      data[i * 3] = px;
+      data[i * 3 + 1] = py;
+      data[i * 3 + 2] = pz;
+      if (px < minX) minX = px;
+      if (px > maxX) maxX = px;
+      if (py < minY) minY = py;
+      if (py > maxY) maxY = py;
+      if (pz < minZ) minZ = pz;
+      if (pz > maxZ) maxZ = pz;
+    }
+    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);
+  }
+  draw(gl, mvp) {
+    if (this.count < 2) return;
+    gl.useProgram(this.program);
+    gl.uniformMatrix4fv(this.uniforms.uMVP, false, mvp);
+    gl.uniform4f(this.uniforms.uColor, this.color[0], this.color[1], this.color[2], this.color[3]);
+    gl.bindVertexArray(this.vao);
+    gl.drawArrays(gl.LINE_STRIP, 0, this.count);
+    gl.bindVertexArray(null);
+  }
+  dispose() {
+    this.gl.deleteVertexArray(this.vao);
+    this.gl.deleteBuffer(this.buffer);
+  }
+};
+
+// src/plot3d/mat4.ts
+function identity() {
+  const m = new Float32Array(16);
+  m[0] = m[5] = m[10] = m[15] = 1;
+  return m;
+}
+function multiply(a, b) {
+  const o = new Float32Array(16);
+  for (let c = 0; c < 4; c++) {
+    for (let r = 0; r < 4; r++) {
+      let s = 0;
+      for (let k = 0; k < 4; k++) s += a[k * 4 + r] * b[c * 4 + k];
+      o[c * 4 + r] = s;
+    }
+  }
+  return o;
+}
+function perspective(fovy, aspect, near, far) {
+  const f = 1 / Math.tan(fovy / 2);
+  const nf = 1 / (near - far);
+  const m = new Float32Array(16);
+  m[0] = f / aspect;
+  m[5] = f;
+  m[10] = (far + near) * nf;
+  m[11] = -1;
+  m[14] = 2 * far * near * nf;
+  return m;
+}
+var sub = (a, b) => [a[0] - b[0], a[1] - b[1], a[2] - b[2]];
+var cross = (a, b) => [
+  a[1] * b[2] - a[2] * b[1],
+  a[2] * b[0] - a[0] * b[2],
+  a[0] * b[1] - a[1] * b[0]
+];
+function normalize2(v) {
+  const l = Math.hypot(v[0], v[1], v[2]) || 1;
+  return [v[0] / l, v[1] / l, v[2] / l];
+}
+function lookAt(eye, center, up) {
+  const z = normalize2(sub(eye, center));
+  const x = normalize2(cross(up, z));
+  const y = cross(z, x);
+  const m = identity();
+  m[0] = x[0];
+  m[4] = x[1];
+  m[8] = x[2];
+  m[1] = y[0];
+  m[5] = y[1];
+  m[9] = y[2];
+  m[2] = z[0];
+  m[6] = z[1];
+  m[10] = z[2];
+  m[12] = -(x[0] * eye[0] + x[1] * eye[1] + x[2] * eye[2]);
+  m[13] = -(y[0] * eye[0] + y[1] * eye[1] + y[2] * eye[2]);
+  m[14] = -(z[0] * eye[0] + z[1] * eye[1] + z[2] * eye[2]);
+  return m;
+}
+function transformPoint(m, x, y, z) {
+  return [
+    m[0] * x + m[4] * y + m[8] * z + m[12],
+    m[1] * x + m[5] * y + m[9] * z + m[13],
+    m[2] * x + m[6] * y + m[10] * z + m[14],
+    m[3] * x + m[7] * y + m[11] * z + m[15]
+  ];
+}
+function scaleTranslate(s, t) {
+  const m = identity();
+  m[0] = s[0];
+  m[5] = s[1];
+  m[10] = s[2];
+  m[12] = t[0];
+  m[13] = t[1];
+  m[14] = t[2];
+  return m;
+}
+
+// src/plot3d/pointcloud.ts
+var VERT14 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+layout(location = 0) in vec3 aPos;
+layout(location = 1) in vec3 aColor;
+layout(location = 2) in float aSize;
+uniform mat4 uMVP;
+uniform float uSize;
+out vec3 vColor;
+void main() {
+  vColor = aColor;
+  gl_Position = uMVP * vec4(aPos, 1.0);
+  gl_PointSize = aSize > 0.0 ? aSize : uSize;
+}`
+);
+var FRAG16 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+in vec3 vColor;
+out vec4 outColor;
+void main() {
+  vec2 d = gl_PointCoord - 0.5;
+  if (length(d) > 0.5) discard;
+  outColor = vec4(vColor, 1.0);
+}`
+);
+var programCache17 = /* @__PURE__ */ new WeakMap();
+function getProgram14(gl) {
+  let p = programCache17.get(gl);
+  if (!p) {
+    p = createProgram(gl, VERT14, FRAG16);
+    programCache17.set(gl, p);
+  }
+  return p;
+}
+var counter21 = 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.gl = gl;
+    this.program = getProgram14(gl);
+    this.size = opts.size ?? 4;
+    this.name = opts.name;
+    this.labels = opts.labels;
+    const n = Math.min(opts.x.length, opts.y.length, opts.z.length);
+    this.count = n;
+    const base = opts.color != null ? Array.isArray(opts.color) ? opts.color : parseColor(opts.color) : [0.4, 0.7, 1, 1];
+    const lut = opts.colorBy ? colormapLUT(opts.colorBy.colormap ?? "viridis") : null;
+    let lo = opts.colorBy?.domain?.[0] ?? Infinity;
+    let hi = opts.colorBy?.domain?.[1] ?? -Infinity;
+    if (opts.colorBy && !opts.colorBy.domain) {
+      const v = opts.colorBy.values;
+      for (let i = 0; i < n; i++) {
+        const t = v[i];
+        if (t < lo) lo = t;
+        if (t > hi) hi = t;
+      }
+    }
+    const span = hi - lo || 1;
+    if (opts.colorBy) this.cInfo = { colormap: opts.colorBy.colormap ?? "viridis", domain: [lo, hi], label: opts.name };
+    else this.colorCss = toColorCss(base);
+    this.data = new Float32Array(n * 7);
+    this.positions = new Float32Array(n * 3);
+    for (let i = 0; i < n; i++) {
+      const x = opts.x[i], y = opts.y[i], z = opts.z[i];
+      this.data[i * 7] = x;
+      this.data[i * 7 + 1] = y;
+      this.data[i * 7 + 2] = z;
+      this.positions[i * 3] = x;
+      this.positions[i * 3 + 1] = y;
+      this.positions[i * 3 + 2] = z;
+      if (lut && opts.colorBy) {
+        let t = (opts.colorBy.values[i] - lo) / span;
+        t = t <= 0 ? 0 : t >= 1 ? 1 : t;
+        const j = (t * 255 | 0) * 3;
+        this.data[i * 7 + 3] = lut[j];
+        this.data[i * 7 + 4] = lut[j + 1];
+        this.data[i * 7 + 5] = lut[j + 2];
+      } else {
+        this.data[i * 7 + 3] = base[0];
+        this.data[i * 7 + 4] = base[1];
+        this.data[i * 7 + 5] = base[2];
+      }
+      this.data[i * 7 + 6] = opts.sizes ? opts.sizes[i] : 0;
+    }
+    this.updateBounds();
     const vao = gl.createVertexArray();
     const buffer = gl.createBuffer();
     this.vao = vao;
     this.buffer = buffer;
     gl.bindVertexArray(vao);
     gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+    gl.bufferData(gl.ARRAY_BUFFER, this.data, gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 28, 0);
+    gl.enableVertexAttribArray(1);
+    gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 28, 12);
+    gl.enableVertexAttribArray(2);
+    gl.vertexAttribPointer(2, 1, gl.FLOAT, false, 28, 24);
+    gl.bindVertexArray(null);
+    this.uniforms = uniformLocations(gl, this.program, ["uMVP", "uSize"]);
+  }
+  updateBounds() {
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity, minZ = Infinity, maxZ = -Infinity;
+    for (let i = 0; i < this.count; i++) {
+      const x = this.positions[i * 3], y = this.positions[i * 3 + 1], z = this.positions[i * 3 + 2];
+      if (x < minX) minX = x;
+      if (x > maxX) maxX = x;
+      if (y < minY) minY = y;
+      if (y > maxY) maxY = y;
+      if (z < minZ) minZ = z;
+      if (z > maxZ) maxZ = z;
+    }
+    this.b3 = { x: [minX, maxX], y: [minY, maxY], z: [minZ, maxZ] };
+  }
+  /** Stream new point positions (same count keeps colors/sizes). Call `plot.refresh()` after. */
+  setData(x, y, z) {
+    const n = Math.min(x.length, y.length, z.length, this.count);
+    for (let i = 0; i < n; i++) {
+      const px = x[i], py = y[i], pz = z[i];
+      this.data[i * 7] = px;
+      this.data[i * 7 + 1] = py;
+      this.data[i * 7 + 2] = pz;
+      this.positions[i * 3] = px;
+      this.positions[i * 3 + 1] = py;
+      this.positions[i * 3 + 2] = pz;
+    }
+    this.updateBounds();
+    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffer);
+    this.gl.bufferData(this.gl.ARRAY_BUFFER, this.data, this.gl.DYNAMIC_DRAW);
+  }
+  bounds3() {
+    return this.count ? this.b3 : null;
+  }
+  colorInfo() {
+    return this.cInfo;
+  }
+  pickData() {
+    if (!this.count) return null;
+    return { positions: this.positions, label: this.labels ? (i) => String(this.labels[i]) : void 0 };
+  }
+  draw(gl, mvp) {
+    if (this.count === 0) return;
+    gl.useProgram(this.program);
+    gl.uniformMatrix4fv(this.uniforms.uMVP, false, mvp);
+    gl.uniform1f(this.uniforms.uSize, this.size);
+    gl.bindVertexArray(this.vao);
+    gl.drawArrays(gl.POINTS, 0, this.count);
+    gl.bindVertexArray(null);
+  }
+  dispose() {
+    this.gl.deleteVertexArray(this.vao);
+    this.gl.deleteBuffer(this.buffer);
+  }
+};
+
+// src/plot3d/quiver3d.ts
+var VERT15 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+layout(location = 0) in vec3 aPos;
+layout(location = 1) in vec3 aColor;
+uniform mat4 uMVP;
+out vec3 vColor;
+void main() { vColor = aColor; gl_Position = uMVP * vec4(aPos, 1.0); }`
+);
+var FRAG17 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+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);
+  if (!p) {
+    p = createProgram(gl, VERT15, FRAG17);
+    programCache18.set(gl, p);
+  }
+  return p;
+}
+function norm(x, y, z) {
+  const l = Math.hypot(x, y, z) || 1;
+  return [x / l, y / l, z / l];
+}
+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 Quiver3DLayer = class {
+  constructor(gl, opts) {
+    this.cInfo = null;
+    this.id = `quiver3d-${counter22++}`;
+    this.gl = gl;
+    this.program = getProgram15(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) {
+      for (let i = 0; i < n; i++) {
+        const m = mag(i);
+        if (m < lo) lo = m;
+        if (m > hi) hi = m;
+      }
+    }
+    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);
+    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;
+    };
+    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 tx = bx + ux, ty = by + uy, tz = bz + uz;
+      this.positions[i * 3] = bx;
+      this.positions[i * 3 + 1] = by;
+      this.positions[i * 3 + 2] = bz;
+      const c = cmap ? cmap((mag(i) - lo) / span) : [base[0], base[1], base[2]];
+      const seg = (x0, y0, z0, x1, y1, z1) => {
+        data.push(x0, y0, z0, c[0], c[1], c[2], x1, y1, z1, c[0], c[1], c[2]);
+      };
+      seg(bx, by, bz, tx, ty, tz);
+      bump(bx, by, bz);
+      bump(tx, ty, tz);
+      const len = Math.hypot(ux, uy, uz);
+      if (len > 1e-6) {
+        const dir = norm(ux, uy, uz);
+        const ref = Math.abs(dir[1]) > 0.9 ? [1, 0, 0] : [0, 1, 0];
+        const p1 = norm(...cross2(dir, ref));
+        const p2 = norm(...cross2(dir, p1));
+        const hl = len * headSize, hw = hl * 0.5;
+        const backX = tx - dir[0] * hl, backY = ty - dir[1] * hl, backZ = tz - dir[2] * hl;
+        for (const p of [p1, p2, [-p1[0], -p1[1], -p1[2]], [-p2[0], -p2[1], -p2[2]]]) {
+          seg(tx, ty, tz, backX + p[0] * hw, backY + p[1] * hw, backZ + p[2] * hw);
+        }
+      }
+    }
+    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.enableVertexAttribArray(0);
     gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 24, 0);
     gl.enableVertexAttribArray(1);
     gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 24, 12);
     gl.bindVertexArray(null);
-    this.uniforms = uniformLocations(gl, this.program, ["uMVP", "uSize"]);
+    this.uniforms = uniformLocations(gl, this.program, ["uMVP"]);
   }
   bounds3() {
-    return this.count ? this.b3 : null;
+    return this.vertCount ? this.b3 : null;
+  }
+  colorInfo() {
+    return this.cInfo;
+  }
+  pickData() {
+    return this.positions.length ? { positions: this.positions } : null;
   }
   draw(gl, mvp) {
-    if (this.count === 0) return;
+    if (this.vertCount === 0) return;
     gl.useProgram(this.program);
     gl.uniformMatrix4fv(this.uniforms.uMVP, false, mvp);
-    gl.uniform1f(this.uniforms.uSize, this.size);
     gl.bindVertexArray(this.vao);
-    gl.drawArrays(gl.POINTS, 0, this.count);
+    gl.drawArrays(gl.LINES, 0, this.vertCount);
     gl.bindVertexArray(null);
   }
   dispose() {
@@ -5188,7 +8030,7 @@ var PointCloudLayer = class {
 };
 
 // src/plot3d/surface.ts
-var VERT10 = (
+var VERT16 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -5200,7 +8042,7 @@ out vec3 vColor;
 out vec3 vN;
 void main() { vColor = aColor; vN = aNormal; gl_Position = uMVP * vec4(aPos, 1.0); }`
 );
-var FRAG12 = (
+var FRAG18 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -5215,23 +8057,54 @@ void main() {
   outColor = vec4(vColor * shade, 1.0);
 }`
 );
-var programCache11 = /* @__PURE__ */ new WeakMap();
-function getProgram10(gl) {
-  let p = programCache11.get(gl);
+var WF_VERT = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+layout(location = 0) in vec3 aPos;
+layout(location = 1) in vec3 aColor;
+uniform mat4 uMVP;
+out vec3 vColor;
+void main() { vColor = aColor; gl_Position = uMVP * vec4(aPos, 1.0); }`
+);
+var WF_FRAG = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+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);
   if (!p) {
-    p = createProgram(gl, VERT10, FRAG12);
-    programCache11.set(gl, p);
+    p = createProgram(gl, VERT16, FRAG18);
+    programCache19.set(gl, p);
   }
   return p;
 }
-var counter14 = 0;
+var wireCache = /* @__PURE__ */ new WeakMap();
+function getWireProgram(gl) {
+  let p = wireCache.get(gl);
+  if (!p) {
+    p = createProgram(gl, WF_VERT, WF_FRAG);
+    wireCache.set(gl, p);
+  }
+  return p;
+}
+var counter23 = 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-${counter14++}`;
+    this.id = `surface-${counter23++}`;
     this.gl = gl;
-    this.program = getProgram10(gl);
+    this.wireframe = opts.wireframe ?? false;
+    this.program = this.wireframe ? getWireProgram(gl) : getProgram16(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];
@@ -5256,42 +8129,71 @@ var SurfaceLayer = class {
       return [-dzdx / nl, 1 / nl, -dzdz / nl];
     };
     const data = [];
-    const vert = (c, r) => {
-      const [nx, ny, nz] = normalAt(c, r);
-      const [cr, cg, cb] = cmap((at(c, r) - vmin) / span);
-      data.push(wx(c), at(c, r), wz(r), nx, ny, nz, cr, cg, cb);
-    };
-    for (let r = 0; r < rows - 1; r++) {
-      for (let c = 0; c < cols - 1; c++) {
-        vert(c, r);
-        vert(c + 1, r);
-        vert(c + 1, r + 1);
-        vert(c, r);
-        vert(c + 1, r + 1);
-        vert(c, r + 1);
-      }
-    }
-    this.vertexCount = data.length / 9;
     this.b3 = { x: [x0, x1], y: [vmin, vmax], z: [z0, z1] };
+    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.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
-    gl.enableVertexAttribArray(0);
-    gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 36, 0);
-    gl.enableVertexAttribArray(1);
-    gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 36, 12);
-    gl.enableVertexAttribArray(2);
-    gl.vertexAttribPointer(2, 3, gl.FLOAT, false, 36, 24);
+    if (this.wireframe) {
+      const vertL = (c, r) => {
+        const [cr, cg, cb] = cmap((at(c, r) - vmin) / span);
+        data.push(wx(c), at(c, r), wz(r), cr, cg, cb);
+      };
+      for (let r = 0; r < rows; r++) {
+        for (let c = 0; c < cols; c++) {
+          if (c < cols - 1) {
+            vertL(c, r);
+            vertL(c + 1, r);
+          }
+          if (r < rows - 1) {
+            vertL(c, r);
+            vertL(c, r + 1);
+          }
+        }
+      }
+      this.vertexCount = data.length / 6;
+      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
+      gl.enableVertexAttribArray(0);
+      gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 24, 0);
+      gl.enableVertexAttribArray(1);
+      gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 24, 12);
+    } else {
+      const vert = (c, r) => {
+        const [nx, ny, nz] = normalAt(c, r);
+        const [cr, cg, cb] = cmap((at(c, r) - vmin) / span);
+        data.push(wx(c), at(c, r), wz(r), nx, ny, nz, cr, cg, cb);
+      };
+      for (let r = 0; r < rows - 1; r++) {
+        for (let c = 0; c < cols - 1; c++) {
+          vert(c, r);
+          vert(c + 1, r);
+          vert(c + 1, r + 1);
+          vert(c, r);
+          vert(c + 1, r + 1);
+          vert(c, r + 1);
+        }
+      }
+      this.vertexCount = data.length / 9;
+      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
+      gl.enableVertexAttribArray(0);
+      gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 36, 0);
+      gl.enableVertexAttribArray(1);
+      gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 36, 12);
+      gl.enableVertexAttribArray(2);
+      gl.vertexAttribPointer(2, 3, gl.FLOAT, false, 36, 24);
+    }
     gl.bindVertexArray(null);
     this.uniforms = uniformLocations(gl, this.program, ["uMVP", "uLightDir", "uAmbient"]);
   }
   bounds3() {
     return this.b3;
   }
+  colorInfo() {
+    return { colormap: this.cmapName, domain: this.vDomain, label: this.name };
+  }
   /** Set the light direction (world space) and ambient term (0..1). */
   setLight(dir, ambient) {
     this.lightDir = dir;
@@ -5300,15 +8202,221 @@ var SurfaceLayer = class {
   draw(gl, mvp) {
     gl.useProgram(this.program);
     gl.uniformMatrix4fv(this.uniforms.uMVP, false, mvp);
-    gl.uniform3f(this.uniforms.uLightDir, this.lightDir[0], this.lightDir[1], this.lightDir[2]);
-    gl.uniform1f(this.uniforms.uAmbient, this.ambient);
+    if (this.wireframe) {
+      gl.bindVertexArray(this.vao);
+      gl.drawArrays(gl.LINES, 0, this.vertexCount);
+    } else {
+      gl.uniform3f(this.uniforms.uLightDir, this.lightDir[0], this.lightDir[1], this.lightDir[2]);
+      gl.uniform1f(this.uniforms.uAmbient, this.ambient);
+      gl.bindVertexArray(this.vao);
+      gl.drawArrays(gl.TRIANGLES, 0, this.vertexCount);
+    }
+    gl.bindVertexArray(null);
+  }
+  dispose() {
+    this.gl.deleteVertexArray(this.vao);
+    this.gl.deleteBuffer(this.buffer);
+  }
+};
+
+// src/plot3d/volume.ts
+var STEPS = 160;
+var VERT17 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+layout(location = 0) in vec3 aPos;    // world position of the box corner
+layout(location = 1) in vec3 aLocal;  // [0,1]^3 texture coord of the corner
+uniform mat4 uMVP;
+out vec3 vLocal;
+void main() { vLocal = aLocal; gl_Position = uMVP * vec4(aPos, 1.0); }`
+);
+var FRAG19 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+in vec3 vLocal;
+uniform highp sampler3D uVolume;
+uniform sampler2D uLUT;
+uniform vec3 uCamLocal;
+uniform float uDensity;
+out vec4 outColor;
+
+void main() {
+  vec3 dir = normalize(vLocal - uCamLocal);
+  vec3 invDir = 1.0 / dir;
+  vec3 t0 = (vec3(0.0) - uCamLocal) * invDir;
+  vec3 t1 = (vec3(1.0) - uCamLocal) * invDir;
+  vec3 tmin = min(t0, t1), tmax = max(t0, t1);
+  float tNear = max(max(tmin.x, tmin.y), tmin.z);
+  float tFar = min(min(tmax.x, tmax.y), tmax.z);
+  tNear = max(tNear, 0.0);
+  if (tFar <= tNear) discard;
+
+  float dt = (tFar - tNear) / float(${STEPS});
+  vec4 acc = vec4(0.0);
+  for (int i = 0; i < ${STEPS}; i++) {
+    float t = tNear + (float(i) + 0.5) * dt;
+    vec3 p = uCamLocal + dir * t;
+    float v = texture(uVolume, p).r; // normalized 0..1
+    vec3 col = texture(uLUT, vec2(v, 0.5)).rgb;
+    float a = clamp(v * uDensity * dt * 120.0, 0.0, 1.0);
+    acc.rgb += (1.0 - acc.a) * col * a;
+    acc.a += (1.0 - acc.a) * a;
+    if (acc.a > 0.98) break;
+  }
+  if (acc.a < 0.001) discard;
+  outColor = acc; // premultiplied
+}`
+);
+var programCache20 = /* @__PURE__ */ new WeakMap();
+function getProgram17(gl) {
+  let p = programCache20.get(gl);
+  if (!p) {
+    p = createProgram(gl, VERT17, FRAG19);
+    programCache20.set(gl, p);
+  }
+  return p;
+}
+var CUBE_CORNERS = [
+  [0, 0, 0],
+  [1, 0, 0],
+  [1, 1, 0],
+  [0, 1, 0],
+  [0, 0, 1],
+  [1, 0, 1],
+  [1, 1, 1],
+  [0, 1, 1]
+];
+var CUBE_FACES = [
+  [0, 1, 2, 0, 2, 3],
+  [4, 6, 5, 4, 7, 6],
+  [0, 4, 5, 0, 5, 1],
+  [3, 2, 6, 3, 6, 7],
+  [0, 3, 7, 0, 7, 4],
+  [1, 5, 6, 1, 6, 2]
+];
+var counter24 = 0;
+var VolumeLayer = class {
+  constructor(gl, opts) {
+    this.camLocal = [0.5, 0.5, 2];
+    this.id = `volume-${counter24++}`;
+    this.gl = gl;
+    this.program = getProgram17(gl);
+    this.name = opts.name;
+    this.density = opts.density ?? 1;
+    this.cmapName = opts.colormap ?? "viridis";
+    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);
+    const cmap = colormap(this.cmapName);
+    const lutPix = new Uint8Array(256 * 4);
+    for (let i = 0; i < 256; i++) {
+      const [r, g, b] = cmap(i / 255);
+      lutPix[i * 4] = Math.round(r * 255);
+      lutPix[i * 4 + 1] = Math.round(g * 255);
+      lutPix[i * 4 + 2] = Math.round(b * 255);
+      lutPix[i * 4 + 3] = 255;
+    }
+    this.lut = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, this.lut);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 256, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, lutPix);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    const data = [];
+    for (const face of CUBE_FACES) {
+      for (const ci of face) {
+        const c = CUBE_CORNERS[ci];
+        const wxp = ex[0] + c[0] * (ex[1] - ex[0]);
+        const wyp = ey[0] + c[1] * (ey[1] - ey[0]);
+        const wzp = ez[0] + c[2] * (ez[1] - ez[0]);
+        data.push(wxp, wyp, wzp, c[0], c[1], c[2]);
+      }
+    }
+    this.vao = gl.createVertexArray();
+    this.buffer = gl.createBuffer();
     gl.bindVertexArray(this.vao);
-    gl.drawArrays(gl.TRIANGLES, 0, this.vertexCount);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 24, 0);
+    gl.enableVertexAttribArray(1);
+    gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 24, 12);
+    gl.bindVertexArray(null);
+    this.uniforms = uniformLocations(gl, this.program, ["uMVP", "uVolume", "uLUT", "uCamLocal", "uDensity"]);
+  }
+  bounds3() {
+    return this.b3;
+  }
+  colorInfo() {
+    return { colormap: this.cmapName, domain: this.vDomain, label: this.name };
+  }
+  /** Set the camera position in world space; converted to the volume's [0,1] local space. */
+  setCamera(worldEye) {
+    const { x, y, z } = this.ext;
+    this.camLocal = [
+      (worldEye[0] - x[0]) / (x[1] - x[0] || 1),
+      (worldEye[1] - y[0]) / (y[1] - y[0] || 1),
+      (worldEye[2] - z[0]) / (z[1] - z[0] || 1)
+    ];
+  }
+  draw(gl, mvp) {
+    gl.useProgram(this.program);
+    gl.uniformMatrix4fv(this.uniforms.uMVP, false, mvp);
+    gl.uniform3f(this.uniforms.uCamLocal, this.camLocal[0], this.camLocal[1], this.camLocal[2]);
+    gl.uniform1f(this.uniforms.uDensity, this.density);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_3D, this.tex);
+    gl.uniform1i(this.uniforms.uVolume, 0);
+    gl.activeTexture(gl.TEXTURE1);
+    gl.bindTexture(gl.TEXTURE_2D, this.lut);
+    gl.uniform1i(this.uniforms.uLUT, 1);
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+    gl.depthMask(false);
+    gl.enable(gl.CULL_FACE);
+    gl.cullFace(gl.FRONT);
+    gl.bindVertexArray(this.vao);
+    gl.drawArrays(gl.TRIANGLES, 0, 36);
     gl.bindVertexArray(null);
+    gl.disable(gl.CULL_FACE);
+    gl.depthMask(true);
+    gl.disable(gl.BLEND);
+    gl.activeTexture(gl.TEXTURE0);
   }
   dispose() {
     this.gl.deleteVertexArray(this.vao);
     this.gl.deleteBuffer(this.buffer);
+    this.gl.deleteTexture(this.tex);
+    this.gl.deleteTexture(this.lut);
   }
 };
 
@@ -5412,11 +8520,24 @@ var Plot3D = class {
     this.frameRequested = false;
     this.tickCount = 0;
     this.labels = [];
+    /** Tick positions in cube space [-1,1], per axis, for the grid planes. */
+    this.tickCube = { x: [], y: [], z: [] };
+    this.gridVao = null;
+    this.gridBuf = null;
+    /** Normalize params (world→cube: `cube = s*world + t`), for the volume camera. */
+    this.norm = { sx: 1, sy: 1, sz: 1, tx: 0, ty: 0, tz: 0 };
+    /** Auto-orbit speed (rad/frame); 0 = off. Paused while the pointer is down. */
+    this.autoRotateSpeed = 0;
+    this.rotating = false;
+    this.interacting = false;
     // Lighting.
     this.lightAz = 0.9;
     this.lightEl = 0.9;
     this.ambient = 0.35;
     this.controlsEl = null;
+    this.resetBtn = null;
+    /** Screen position (device px) of the picked point, for the highlight ring. */
+    this.hoverHit = null;
     this.container = container;
     if (getComputedStyle(container).position === "static") container.style.position = "relative";
     this.canvas = document.createElement("canvas");
@@ -5430,7 +8551,86 @@ var Plot3D = class {
     this.azimuth = options.azimuth ?? 0.7;
     this.elevation = options.elevation ?? 0.5;
     this.distance = options.distance ?? 3.6;
+    this.initialAz = this.azimuth;
+    this.initialEl = this.elevation;
+    this.initialDist = this.distance;
     this.axisLabels = options.axisLabels ?? {};
+    this.title = options.title;
+    this.showLegend = options.legend ?? false;
+    this.colorbarOpt = options.colorbar ?? true;
+    this.hoverEnabled = options.hover !== false;
+    this.gridPlanes = options.gridPlanes !== false;
+    this.legendDiv = document.createElement("div");
+    Object.assign(this.legendDiv.style, {
+      position: "absolute",
+      top: "8px",
+      right: "8px",
+      zIndex: "5",
+      display: "none",
+      pointerEvents: "none",
+      padding: "6px 8px",
+      borderRadius: "6px",
+      font: "12px system-ui, sans-serif",
+      lineHeight: "1.5",
+      background: "rgba(15,23,42,0.8)",
+      color: "#e2e8f0",
+      border: "1px solid rgba(148,163,184,0.25)"
+    });
+    container.appendChild(this.legendDiv);
+    this.colorbarDiv = document.createElement("div");
+    Object.assign(this.colorbarDiv.style, {
+      position: "absolute",
+      bottom: "12px",
+      right: "10px",
+      zIndex: "5",
+      display: "none",
+      pointerEvents: "none",
+      font: "10px system-ui, sans-serif",
+      color: "#cbd5e1",
+      textAlign: "center"
+    });
+    container.appendChild(this.colorbarDiv);
+    this.tooltip = document.createElement("div");
+    Object.assign(this.tooltip.style, {
+      position: "absolute",
+      display: "none",
+      zIndex: "6",
+      pointerEvents: "none",
+      padding: "5px 7px",
+      borderRadius: "6px",
+      font: "12px system-ui, sans-serif",
+      whiteSpace: "nowrap",
+      background: "rgba(15,23,42,0.92)",
+      color: "#e2e8f0",
+      border: "1px solid rgba(148,163,184,0.3)",
+      boxShadow: "0 4px 12px rgba(0,0,0,0.3)"
+    });
+    container.appendChild(this.tooltip);
+    if (options.resetButton !== false) {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.title = "Reset view";
+      btn.textContent = "\u2302";
+      Object.assign(btn.style, {
+        position: "absolute",
+        bottom: "8px",
+        left: "8px",
+        zIndex: "6",
+        width: "26px",
+        height: "26px",
+        padding: "0",
+        cursor: "pointer",
+        borderRadius: "6px",
+        font: "15px system-ui, sans-serif",
+        lineHeight: "24px",
+        background: "rgba(15,23,42,0.8)",
+        color: "#cbd5e1",
+        border: "1px solid rgba(148,163,184,0.25)"
+      });
+      btn.addEventListener("click", () => this.resetView());
+      container.appendChild(btn);
+      this.resetBtn = btn;
+    }
     this.lineProgram = createProgram(this.gl, LINE_VERT, LINE_FRAG);
     this.lineUniforms = uniformLocations(this.gl, this.lineProgram, ["uVP", "uColor"]);
     this.boxVao = this.gl.createVertexArray();
@@ -5439,11 +8639,15 @@ var Plot3D = class {
     this.tickVao = this.gl.createVertexArray();
     this.tickBuf = this.gl.createBuffer();
     this.bindLineVao(this.tickVao, this.tickBuf, new Float32Array(0));
+    this.gridVao = this.gl.createVertexArray();
+    this.gridBuf = this.gl.createBuffer();
+    this.bindLineVao(this.gridVao, this.gridBuf, new Float32Array(0));
     if (options.lightControls) this.buildControls();
     this.resizeObserver = new ResizeObserver(() => this.resize());
     this.resizeObserver.observe(container);
     this.attachControls();
     this.resize();
+    if (options.autoRotate) this.setAutoRotate(options.autoRotate);
   }
   bindLineVao(vao, buf, data) {
     const gl = this.gl;
@@ -5469,6 +8673,56 @@ var Plot3D = class {
     this.requestRender();
     return l;
   }
+  /** A 3D polyline / path. */
+  addLine3D(opts) {
+    const l = new Line3DLayer(this.gl, opts);
+    this.layers.push(l);
+    this.recompute();
+    this.requestRender();
+    return l;
+  }
+  /** 3D bars (columns) on an x/z grid, lit and optionally colormapped. */
+  addBar3D(opts) {
+    const l = new Bar3DLayer(this.gl, opts);
+    l.setLight(this.lightDir(), this.ambient);
+    this.layers.push(l);
+    this.recompute();
+    this.requestRender();
+    return l;
+  }
+  /** A 3D vector field (arrows), optionally colored by magnitude. */
+  addQuiver3D(opts) {
+    const l = new Quiver3DLayer(this.gl, opts);
+    this.layers.push(l);
+    this.recompute();
+    this.requestRender();
+    return l;
+  }
+  /** 3D iso-height contour lines of a grid, stacked at their level heights. */
+  addContour3D(opts) {
+    const l = new Contour3DLayer(this.gl, opts);
+    this.layers.push(l);
+    this.recompute();
+    this.requestRender();
+    return l;
+  }
+  /** A marching-cubes isosurface of a 3D scalar volume (lit, solid-colored). */
+  addIsosurface(opts) {
+    const l = new IsosurfaceLayer(this.gl, opts);
+    l.setLight(this.lightDir(), this.ambient);
+    this.layers.push(l);
+    this.recompute();
+    this.requestRender();
+    return l;
+  }
+  /** Direct volume rendering (GPU raymarch) of a 3D scalar field. */
+  addVolume(opts) {
+    const l = new VolumeLayer(this.gl, opts);
+    this.layers.push(l);
+    this.recompute();
+    this.requestRender();
+    return l;
+  }
   /** Update the light direction (azimuth/elevation, radians) and ambient (0..1). */
   setLight(params) {
     if (params.azimuth != null) this.lightAz = params.azimuth;
@@ -5484,15 +8738,125 @@ var Plot3D = class {
     const el = this.lightEl, az = this.lightAz;
     return [Math.cos(el) * Math.cos(az), Math.sin(el), Math.cos(el) * Math.sin(az)];
   }
+  /** Auto-orbit the camera. `true` = default speed, number = radians/frame, `false`/0 stops. */
+  setAutoRotate(speed) {
+    this.autoRotateSpeed = speed === true ? 6e-3 : speed === false ? 0 : speed;
+    if (this.autoRotateSpeed !== 0 && !this.rotating) {
+      this.rotating = true;
+      const loop = () => {
+        if (this.autoRotateSpeed === 0) {
+          this.rotating = false;
+          return;
+        }
+        if (!this.interacting) {
+          this.azimuth += this.autoRotateSpeed;
+          this.render();
+        }
+        requestAnimationFrame(loop);
+      };
+      requestAnimationFrame(loop);
+    }
+  }
+  /** Restore the initial camera orientation and zoom. */
+  resetView() {
+    this.azimuth = this.initialAz;
+    this.elevation = this.initialEl;
+    this.distance = this.initialDist;
+    this.requestRender();
+  }
+  /** Nearest pickable point to the cursor. Screen coords are device px. */
+  pick(clientX, clientY) {
+    const { mvp } = this.viewProj();
+    const w = this.canvas.width, h = this.canvas.height;
+    const rect = this.canvas.getBoundingClientRect();
+    const cx = (clientX - rect.left) * this.dpr;
+    const cy = (clientY - rect.top) * this.dpr;
+    const gate = 14 * this.dpr;
+    let bestD = gate * gate;
+    let best = null;
+    for (const l of this.layers) {
+      const pd = l.pickData?.();
+      if (!pd) continue;
+      const pos = pd.positions;
+      const n = pos.length / 3;
+      for (let i = 0; i < n; i++) {
+        const c = transformPoint(mvp, pos[i * 3], pos[i * 3 + 1], pos[i * 3 + 2]);
+        if (c[3] <= 0) continue;
+        const sx = (c[0] / c[3] * 0.5 + 0.5) * w;
+        const sy = (1 - (c[1] / c[3] * 0.5 + 0.5)) * h;
+        const dx = sx - cx, dy = sy - cy;
+        const d = dx * dx + dy * dy;
+        if (d < bestD) {
+          bestD = d;
+          best = {
+            sx,
+            sy,
+            label: pd.label ? pd.label(i) : `${defaultFormat(pos[i * 3])}, ${defaultFormat(pos[i * 3 + 1])}, ${defaultFormat(pos[i * 3 + 2])}`
+          };
+        }
+      }
+    }
+    return best;
+  }
+  /** Show/hide the hover tooltip + highlight ring for the point under the cursor. */
+  updateHover(clientX, clientY) {
+    if (!this.hoverEnabled) return;
+    const hit = this.pick(clientX, clientY);
+    const had = this.hoverHit !== null;
+    if (!hit) {
+      this.tooltip.style.display = "none";
+      if (had) {
+        this.hoverHit = null;
+        this.requestRender();
+      }
+      return;
+    }
+    this.hoverHit = { sx: hit.sx, sy: hit.sy };
+    this.requestRender();
+    const rect = this.canvas.getBoundingClientRect();
+    this.tooltip.textContent = hit.label;
+    this.tooltip.style.display = "block";
+    const lx = clientX - rect.left, ly = clientY - rect.top;
+    const cw = this.container.clientWidth, ch = this.container.clientHeight;
+    const tw = this.tooltip.offsetWidth, th = this.tooltip.offsetHeight;
+    let left = lx + 14;
+    if (left + tw > cw) left = lx - tw - 14;
+    let top = ly + 14;
+    if (top + th > ch) top = ly - th - 14;
+    this.tooltip.style.left = `${Math.max(0, left)}px`;
+    this.tooltip.style.top = `${Math.max(0, top)}px`;
+  }
+  /** Remove a layer, re-fit, and redraw. */
+  removeLayer(layer) {
+    const i = this.layers.indexOf(layer);
+    if (i >= 0) {
+      this.layers.splice(i, 1);
+      layer.dispose();
+      this.recompute();
+      this.requestRender();
+    }
+  }
+  /** Re-fit the axes to the data and redraw — call after a layer's `setData(...)`. */
+  refresh() {
+    this.recompute();
+    this.requestRender();
+  }
   destroy() {
     this.resizeObserver.disconnect();
+    this.autoRotateSpeed = 0;
     for (const l of this.layers) l.dispose();
     this.gl.deleteProgram(this.lineProgram);
     this.gl.deleteVertexArray(this.boxVao);
     this.gl.deleteVertexArray(this.tickVao);
+    if (this.gridVao) this.gl.deleteVertexArray(this.gridVao);
     this.gl.deleteBuffer(this.boxBuf);
     this.gl.deleteBuffer(this.tickBuf);
+    if (this.gridBuf) this.gl.deleteBuffer(this.gridBuf);
     this.controlsEl?.remove();
+    this.legendDiv.remove();
+    this.colorbarDiv.remove();
+    this.tooltip.remove();
+    this.resetBtn?.remove();
     this.container.removeChild(this.canvas);
   }
   recompute() {
@@ -5514,6 +8878,7 @@ var Plot3D = class {
     };
     const [sx, tx] = axis(b.x), [sy, ty] = axis(b.y), [sz, tz] = axis(b.z);
     this.normalize = scaleTranslate([sx, sy, sz], [tx, ty, tz]);
+    this.norm = { sx, sy, sz, tx, ty, tz };
     this.buildAxes();
   }
   /** Build tick-mark line geometry + tick/title labels from the data bounds. */
@@ -5523,22 +8888,27 @@ var Plot3D = class {
     const cube = (r, v) => 2 * (v - r[0]) / (r[1] - r[0] || 1) - 1;
     const seg = [];
     const labels = [];
+    const tc = { x: [], y: [], z: [] };
     const mark = (x0, y0, z0, x1, y1, z1) => seg.push(x0, y0, z0, x1, y1, z1);
     for (const t of autoTicks(b.x[0], b.x[1], 5)) {
       const cx = cube(b.x, t.value);
+      tc.x.push(cx);
       mark(cx, -1, -1, cx, -1, -1.06);
       labels.push({ p: [cx, -1, -1.16], text: defaultFormat(t.value) });
     }
     for (const t of autoTicks(b.y[0], b.y[1], 5)) {
       const cy = cube(b.y, t.value);
+      tc.y.push(cy);
       mark(-1, cy, -1, -1.06, cy, -1);
       labels.push({ p: [-1.16, cy, -1], text: defaultFormat(t.value) });
     }
     for (const t of autoTicks(b.z[0], b.z[1], 5)) {
       const cz = cube(b.z, t.value);
+      tc.z.push(cz);
       mark(-1, -1, cz, -1.06, -1, cz);
       labels.push({ p: [-1.16, -1, cz], text: defaultFormat(t.value) });
     }
+    this.tickCube = tc;
     if (this.axisLabels.x) labels.push({ p: [0, -1.25, -1.3], text: this.axisLabels.x, title: true });
     if (this.axisLabels.y) labels.push({ p: [-1.35, 0, -1], text: this.axisLabels.y, title: true });
     if (this.axisLabels.z) labels.push({ p: [-1.3, -1.25, 0], text: this.axisLabels.z, title: true });
@@ -5573,7 +8943,31 @@ var Plot3D = class {
     ];
     const view = lookAt(eye, [0, 0, 0], [0, 1, 0]);
     const vp = multiply(proj, view);
-    return { vp, mvp: multiply(vp, this.normalize) };
+    return { vp, mvp: multiply(vp, this.normalize), eye };
+  }
+  /** Build + draw grid lines on the 3 back walls (cube space) for the current eye. */
+  drawGridPlanes(vp, eye) {
+    const tc = this.tickCube;
+    if (!this.gridVao || tc.x.length + tc.y.length + tc.z.length === 0) return;
+    const sx = eye[0] > 0 ? -1 : 1;
+    const sy = eye[1] > 0 ? -1 : 1;
+    const sz = eye[2] > 0 ? -1 : 1;
+    const seg = [];
+    const L = (x0, y0, z0, x1, y1, z1) => seg.push(x0, y0, z0, x1, y1, z1);
+    for (const cy of tc.y) L(sx, cy, -1, sx, cy, 1);
+    for (const cz of tc.z) L(sx, -1, cz, sx, 1, cz);
+    for (const cx of tc.x) L(cx, sy, -1, cx, sy, 1);
+    for (const cz of tc.z) L(-1, sy, cz, 1, sy, cz);
+    for (const cx of tc.x) L(cx, -1, sz, cx, 1, sz);
+    for (const cy of tc.y) L(-1, cy, sz, 1, cy, sz);
+    const gl = this.gl;
+    gl.bindVertexArray(this.gridVao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.gridBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(seg), gl.DYNAMIC_DRAW);
+    gl.uniformMatrix4fv(this.lineUniforms.uVP, false, vp);
+    gl.uniform4f(this.lineUniforms.uColor, 0.55, 0.6, 0.72, 0.22);
+    gl.drawArrays(gl.LINES, 0, seg.length / 3);
+    gl.bindVertexArray(null);
   }
   render() {
     const gl = this.gl;
@@ -5583,8 +8977,9 @@ var Plot3D = class {
     gl.viewport(0, 0, w, h);
     gl.clearColor(this.bg[0], this.bg[1], this.bg[2], this.bg[3]);
     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-    const { vp, mvp } = this.viewProj();
+    const { vp, mvp, eye } = this.viewProj();
     gl.useProgram(this.lineProgram);
+    if (this.gridPlanes) this.drawGridPlanes(vp, eye);
     gl.uniformMatrix4fv(this.lineUniforms.uVP, false, vp);
     gl.uniform4f(this.lineUniforms.uColor, 0.6, 0.65, 0.75, 0.4);
     gl.bindVertexArray(this.boxVao);
@@ -5595,10 +8990,119 @@ var Plot3D = class {
       gl.drawArrays(gl.LINES, 0, this.tickCount);
     }
     gl.bindVertexArray(null);
-    for (const l of this.layers) l.draw(gl, mvp);
+    const n = this.norm;
+    const worldEye = [(eye[0] - n.tx) / n.sx, (eye[1] - n.ty) / n.sy, (eye[2] - n.tz) / n.sz];
+    for (const l of this.layers) {
+      if ("setCamera" in l) l.setCamera(worldEye);
+      l.draw(gl, mvp);
+    }
     this.displayCtx.clearRect(0, 0, w, h);
     this.displayCtx.drawImage(this.sharedCanvas, 0, 0);
     this.drawLabels(vp, w, h);
+    if (this.title) {
+      const ctx = this.displayCtx;
+      ctx.save();
+      ctx.font = `600 ${15 * this.dpr}px system-ui, sans-serif`;
+      ctx.fillStyle = "#e2e8f0";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "top";
+      ctx.fillText(this.title, w / 2, 10 * this.dpr);
+      ctx.restore();
+    }
+    if (this.hoverHit) {
+      const ctx = this.displayCtx;
+      ctx.save();
+      ctx.strokeStyle = "#e2e8f0";
+      ctx.lineWidth = 2 * this.dpr;
+      ctx.beginPath();
+      ctx.arc(this.hoverHit.sx, this.hoverHit.sy, 7 * this.dpr, 0, Math.PI * 2);
+      ctx.stroke();
+      ctx.restore();
+    }
+    this.updateLegend();
+    this.updateColorbar();
+  }
+  /** DOM legend of named, solid-colored layers. */
+  updateLegend() {
+    const div = this.legendDiv;
+    const entries = this.showLegend ? this.layers.filter((l) => typeof l.name === "string" && !!l.name && typeof l.colorCss === "string") : [];
+    if (entries.length === 0) {
+      div.style.display = "none";
+      return;
+    }
+    div.replaceChildren();
+    for (const e of entries) {
+      const row = document.createElement("div");
+      Object.assign(row.style, { display: "flex", alignItems: "center", gap: "6px" });
+      const sw = document.createElement("span");
+      Object.assign(sw.style, { width: "10px", height: "10px", borderRadius: "2px", background: e.colorCss, flex: "0 0 auto" });
+      const label = document.createElement("span");
+      label.textContent = e.name;
+      row.appendChild(sw);
+      row.appendChild(label);
+      div.appendChild(row);
+    }
+    div.style.display = "block";
+  }
+  /** DOM colorbar for the first colormapped layer (gradient + value range). */
+  updateColorbar() {
+    const div = this.colorbarDiv;
+    if (this.colorbarOpt === false) {
+      div.style.display = "none";
+      return;
+    }
+    let info = null;
+    for (const l of this.layers) {
+      const ci = l.colorInfo?.();
+      if (ci) {
+        info = ci;
+        break;
+      }
+    }
+    if (!info) {
+      div.style.display = "none";
+      return;
+    }
+    const cmap = colormap(info.colormap);
+    const stops = [];
+    for (let i = 0; i <= 12; i++) {
+      const t = i / 12;
+      const [r, g, b] = cmap(t);
+      stops.push(`rgb(${Math.round(r * 255)},${Math.round(g * 255)},${Math.round(b * 255)}) ${t * 100}%`);
+    }
+    const label = (typeof this.colorbarOpt === "object" ? this.colorbarOpt.label : void 0) ?? info.label;
+    div.replaceChildren();
+    if (label) {
+      const cap = document.createElement("div");
+      cap.textContent = label;
+      cap.style.marginBottom = "3px";
+      div.appendChild(cap);
+    }
+    const rowWrap = document.createElement("div");
+    Object.assign(rowWrap.style, { display: "flex", alignItems: "stretch", gap: "4px", justifyContent: "flex-end" });
+    const bar = document.createElement("div");
+    Object.assign(bar.style, {
+      width: "10px",
+      height: "90px",
+      borderRadius: "2px",
+      background: `linear-gradient(to top, ${stops.join(",")})`,
+      border: "1px solid rgba(148,163,184,0.3)"
+    });
+    const ticks = document.createElement("div");
+    Object.assign(ticks.style, { display: "flex", flexDirection: "column", justifyContent: "space-between" });
+    const hi = document.createElement("span");
+    hi.textContent = defaultFormat(info.domain[1]);
+    const mid = document.createElement("span");
+    mid.textContent = defaultFormat((info.domain[0] + info.domain[1]) / 2);
+    const lo = document.createElement("span");
+    lo.textContent = defaultFormat(info.domain[0]);
+    ticks.appendChild(hi);
+    ticks.appendChild(mid);
+    ticks.appendChild(lo);
+    rowWrap.appendChild(ticks);
+    rowWrap.appendChild(bar);
+    div.appendChild(rowWrap);
+    div.style.display = "block";
   }
   drawLabels(vp, w, h) {
     if (this.labels.length === 0) return;
@@ -5625,21 +9129,35 @@ var Plot3D = class {
     let dragging = false, lastX = 0, lastY = 0;
     el.addEventListener("pointerdown", (e) => {
       dragging = true;
+      this.interacting = true;
       lastX = e.clientX;
       lastY = e.clientY;
       el.setPointerCapture(e.pointerId);
       el.style.cursor = "grabbing";
+      this.tooltip.style.display = "none";
+      this.hoverHit = null;
     });
     el.addEventListener("pointermove", (e) => {
-      if (!dragging) return;
+      if (!dragging) {
+        this.updateHover(e.clientX, e.clientY);
+        return;
+      }
       this.azimuth -= (e.clientX - lastX) * 0.01;
       this.elevation += (e.clientY - lastY) * 0.01;
       lastX = e.clientX;
       lastY = e.clientY;
       this.requestRender();
     });
+    el.addEventListener("pointerleave", () => {
+      this.tooltip.style.display = "none";
+      if (this.hoverHit) {
+        this.hoverHit = null;
+        this.requestRender();
+      }
+    });
     const end = (e) => {
       dragging = false;
+      this.interacting = false;
       if (el.hasPointerCapture(e.pointerId)) el.releasePointerCapture(e.pointerId);
       el.style.cursor = "grab";
     };
@@ -5697,20 +9215,30 @@ var Plot3D = class {
 export {
   AreaLayer,
   Axis,
+  Bar3DLayer,
   BarLayer,
   BoxLayer,
   CandlestickLayer,
+  CategoricalScale,
+  Contour3DLayer,
   ContourLayer,
   ErrorBarLayer,
+  GraphLayer,
   HeatmapLayer,
   HexbinLayer,
+  ImageLayer,
+  IsosurfaceLayer,
+  Line3DLayer,
   LineLayer,
   LinearScale,
   LogScale,
+  PatchesLayer,
+  PieLayer,
   Plot,
   Plot3D,
   PointCloudLayer,
   PolarPlot,
+  Quiver3DLayer,
   QuiverLayer,
   ScatterLayer,
   StemLayer,
@@ -5718,20 +9246,26 @@ export {
   TRANSFORM_GLSL,
   TRANSFORM_UNIFORMS,
   TimeScale,
+  VolumeLayer,
   autoTicks,
   boxStats,
   colormap,
+  colormapLUT,
   createProgram,
   createToolbar,
   darkTheme,
   defaultFormat,
+  earcut,
   fft,
+  forceLayout,
   histogram,
   kde,
   lightTheme,
   makeScale,
+  marchingCubes,
   parseColor,
   quantileSorted,
+  resolveAxisStyle,
   resolveTicks,
   setTransformUniforms,
   spectrogram,