@photonviz/core 0.4.0 → 0.5.0

package/dist/index.js

@@ -1450,6 +1450,62 @@ var ANCHORS = {
     [0.99, 0.78, 0.15],
     [0.94, 0.98, 0.13]
   ],
+  inferno: [
+    [1e-3, 0, 0.014],
+    [0.113, 0.045, 0.226],
+    [0.267, 0.051, 0.327],
+    [0.417, 0.09, 0.328],
+    [0.578, 0.148, 0.284],
+    [0.735, 0.216, 0.212],
+    [0.865, 0.317, 0.126],
+    [0.951, 0.462, 0.043],
+    [0.988, 0.645, 0.04],
+    [0.964, 0.843, 0.273],
+    [0.988, 0.998, 0.645]
+  ],
+  magma: [
+    [1e-3, 0, 0.014],
+    [0.107, 0.047, 0.222],
+    [0.255, 0.059, 0.367],
+    [0.4, 0.096, 0.451],
+    [0.55, 0.145, 0.47],
+    [0.702, 0.196, 0.446],
+    [0.847, 0.267, 0.38],
+    [0.945, 0.396, 0.331],
+    [0.986, 0.559, 0.415],
+    [0.997, 0.727, 0.545],
+    [0.987, 0.991, 0.749]
+  ],
+  cividis: [
+    [0, 0.135, 0.305],
+    [0, 0.204, 0.396],
+    [0.086, 0.273, 0.432],
+    [0.243, 0.339, 0.428],
+    [0.353, 0.406, 0.437],
+    [0.447, 0.474, 0.458],
+    [0.542, 0.545, 0.469],
+    [0.647, 0.62, 0.446],
+    [0.76, 0.699, 0.399],
+    [0.879, 0.783, 0.32],
+    [0.995, 0.875, 0.203]
+  ],
+  turbo: [
+    [0.19, 0.072, 0.232],
+    [0.276, 0.394, 0.858],
+    [0.144, 0.678, 0.933],
+    [0.07, 0.886, 0.706],
+    [0.336, 0.982, 0.404],
+    [0.694, 0.994, 0.184],
+    [0.917, 0.87, 0.196],
+    [0.995, 0.646, 0.203],
+    [0.958, 0.372, 0.106],
+    [0.812, 0.166, 0.024],
+    [0.48, 0.016, 0.011]
+  ],
+  grayscale: [
+    [0.05, 0.05, 0.05],
+    [0.95, 0.95, 0.95]
+  ],
   coolwarm: [
     [0.23, 0.3, 0.75],
     [0.55, 0.69, 0.98],
@@ -1457,15 +1513,84 @@ var ANCHORS = {
     [0.96, 0.6, 0.48],
     [0.71, 0.02, 0.15]
   ],
-  grayscale: [
-    [0.05, 0.05, 0.05],
-    [0.95, 0.95, 0.95]
+  RdBu: [
+    [0.404, 0, 0.121],
+    [0.698, 0.094, 0.168],
+    [0.839, 0.376, 0.302],
+    [0.957, 0.647, 0.51],
+    [0.992, 0.859, 0.78],
+    [0.969, 0.969, 0.969],
+    [0.82, 0.898, 0.941],
+    [0.573, 0.773, 0.871],
+    [0.262, 0.576, 0.765],
+    [0.129, 0.4, 0.674],
+    [0.019, 0.188, 0.38]
+  ],
+  BrBG: [
+    [0.329, 0.188, 0.02],
+    [0.549, 0.317, 0.039],
+    [0.749, 0.506, 0.176],
+    [0.875, 0.761, 0.49],
+    [0.965, 0.91, 0.764],
+    [0.961, 0.961, 0.961],
+    [0.78, 0.918, 0.898],
+    [0.502, 0.804, 0.757],
+    [0.208, 0.592, 0.561],
+    [4e-3, 0.4, 0.369],
+    [0, 0.235, 0.188]
+  ],
+  spectral: [
+    [0.62, 4e-3, 0.259],
+    [0.835, 0.243, 0.31],
+    [0.957, 0.427, 0.263],
+    [0.992, 0.682, 0.38],
+    [0.996, 0.878, 0.545],
+    [1, 1, 0.749],
+    [0.902, 0.961, 0.596],
+    [0.671, 0.867, 0.643],
+    [0.4, 0.761, 0.647],
+    [0.196, 0.533, 0.741],
+    [0.369, 0.31, 0.635]
+  ],
+  twilight: [
+    [0.886, 0.851, 0.887],
+    [0.657, 0.749, 0.869],
+    [0.4, 0.596, 0.784],
+    [0.243, 0.427, 0.663],
+    [0.196, 0.259, 0.478],
+    [0.18, 0.129, 0.239],
+    [0.318, 0.114, 0.216],
+    [0.518, 0.18, 0.271],
+    [0.694, 0.325, 0.353],
+    [0.831, 0.545, 0.518],
+    [0.886, 0.851, 0.887]
   ]
 };
+var COLORMAP_KIND = {
+  viridis: "sequential",
+  plasma: "sequential",
+  inferno: "sequential",
+  magma: "sequential",
+  cividis: "sequential",
+  turbo: "sequential",
+  grayscale: "sequential",
+  coolwarm: "diverging",
+  RdBu: "diverging",
+  BrBG: "diverging",
+  spectral: "diverging",
+  twilight: "cyclic"
+};
+function colormapNames() {
+  return Object.keys(ANCHORS);
+}
+function registerColormap(name, stops) {
+  if (stops.length < 2) throw new Error(`Colormap "${name}" needs at least 2 stops`);
+  ANCHORS[name] = stops.map(toRgb);
+  lutCache.delete(name);
+}
 var LUT_SIZE = 256;
 var lutCache = /* @__PURE__ */ new Map();
-function buildLUT(name) {
-  const anchors = ANCHORS[name];
+function buildLUT(anchors) {
   const last = anchors.length - 1;
   const lut = new Float32Array(LUT_SIZE * 3);
   for (let s = 0; s < LUT_SIZE; s++) {
@@ -1480,22 +1605,64 @@ function buildLUT(name) {
   }
   return lut;
 }
-function colormapLUT(name = "viridis") {
-  let lut = lutCache.get(name);
+function colormapLUT(spec = "viridis") {
+  const key = typeof spec === "string" ? spec : `\0${spec.map((s) => typeof s === "string" ? s : s.join(",")).join("|")}`;
+  let lut = lutCache.get(key);
   if (!lut) {
-    lut = buildLUT(name);
-    lutCache.set(name, lut);
+    lut = buildLUT(typeof spec === "string" ? ANCHORS[spec] ?? ANCHORS.viridis : spec.map(toRgb));
+    lutCache.set(key, lut);
   }
   return lut;
 }
-function colormap(name = "viridis") {
-  const lut = colormapLUT(name);
+function sampler(lut) {
   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]];
   };
 }
+function colormap(spec = "viridis") {
+  return sampler(colormapLUT(spec));
+}
+function colormapFromStops(stops) {
+  return sampler(buildLUT(stops.map(toRgb)));
+}
+function reverseColormap(spec = "viridis") {
+  const lut = colormapLUT(spec);
+  const flipped = new Float32Array(lut.length);
+  for (let s = 0; s < LUT_SIZE; s++) {
+    const src = (LUT_SIZE - 1 - s) * 3;
+    flipped[s * 3] = lut[src];
+    flipped[s * 3 + 1] = lut[src + 1];
+    flipped[s * 3 + 2] = lut[src + 2];
+  }
+  return sampler(flipped);
+}
+function discreteColormap(spec, steps) {
+  const sample = colormap(spec);
+  const n = Math.max(1, Math.floor(steps));
+  return (t) => {
+    const c = t <= 0 ? 0 : t >= 1 ? 1 : t;
+    const band = Math.min(n - 1, Math.floor(c * n));
+    return sample(n === 1 ? 0.5 : band / (n - 1));
+  };
+}
+function symmetricDomain(values, center = 0) {
+  let reach = 0;
+  for (let i = 0; i < values.length; i++) {
+    const d = Math.abs(values[i] - center);
+    if (d > reach && Number.isFinite(d)) reach = d;
+  }
+  if (reach === 0) reach = 1;
+  return [center - reach, center + reach];
+}
+function toRgb(c) {
+  if (typeof c !== "string") return c;
+  let hex = c.trim().replace(/^#/, "");
+  if (hex.length === 3) hex = hex.split("").map((ch) => ch + ch).join("");
+  const n = parseInt(hex.slice(0, 6), 16);
+  return [(n >> 16 & 255) / 255, (n >> 8 & 255) / 255, (n & 255) / 255];
+}
 
 // src/layers/contour.ts
 var VERT4 = (
@@ -1547,6 +1714,7 @@ var counter6 = 0;
 var ContourLayer = class {
   constructor(gl, opts) {
     this.vertexCount = 0;
+    this.cInfo = null;
     this.id = `contour-${counter6++}`;
     this.gl = gl;
     this.program = getProgram5(gl);
@@ -1559,7 +1727,9 @@ var ContourLayer = class {
     this.xRef = x0;
     this.yRef = y0;
     this.levelsOpt = opts.levels;
-    this.cmap = colormap(opts.colormap ?? "viridis");
+    this.cmapName = opts.colormap ?? "viridis";
+    this.label = opts.name;
+    this.cmap = colormap(this.cmapName);
     this.fixedColor = opts.color != null ? Array.isArray(opts.color) ? opts.color : parseColor(opts.color) : null;
     const data = this.build(opts.values, opts.cols, opts.rows);
     const vao = gl.createVertexArray();
@@ -1594,6 +1764,7 @@ var ContourLayer = class {
     const at = (c, r) => values[r * cols + c];
     const data = [];
     const lspan = vmax - vmin || 1;
+    this.cInfo = this.fixedColor ? null : { colormap: this.cmapName, domain: [vmin, vmax], ...this.label ? { label: this.label } : {} };
     for (let li = 0; li < levels.length; li++) {
       const L = levels[li];
       const col = fixed ?? [...cmap((L - vmin) / lspan), 1];
@@ -1629,6 +1800,9 @@ var ContourLayer = class {
     this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffer);
     this.gl.bufferData(this.gl.ARRAY_BUFFER, data, this.usage);
   }
+  colorInfo() {
+    return this.cInfo;
+  }
   bounds() {
     return { x: this.ext.x, y: this.ext.y };
   }
@@ -2156,6 +2330,7 @@ function getProgram6(gl) {
 var counter9 = 0;
 var HeatmapLayer = class {
   constructor(gl, opts) {
+    this.cInfo = null;
     this.id = `heatmap-${counter9++}`;
     this.gl = gl;
     this.program = getProgram6(gl);
@@ -2165,7 +2340,9 @@ var HeatmapLayer = class {
     const [y0, y1] = opts.extent.y;
     this.xRef = x0;
     this.yRef = y0;
-    this.lut = colormapLUT(opts.colormap ?? "viridis");
+    this.cmapName = opts.colormap ?? "viridis";
+    this.label = opts.name;
+    this.lut = colormapLUT(this.cmapName);
     this.fixedDomain = opts.domain;
     this.cols = opts.cols;
     this.rows = opts.rows;
@@ -2233,6 +2410,7 @@ var HeatmapLayer = class {
       }
     }
     const span = hi - lo || 1;
+    this.cInfo = { colormap: this.cmapName, domain: [lo, hi], ...this.label ? { label: this.label } : {} };
     const pixels = new Uint8Array(cols * rows * 4);
     for (let i = 0; i < cols * rows; i++) {
       let t = (values[i] - lo) / span;
@@ -2254,6 +2432,9 @@ var HeatmapLayer = class {
     this.rows = rows;
     this.uploadValues(values, cols, rows);
   }
+  colorInfo() {
+    return this.cInfo;
+  }
   bounds() {
     return { x: this.ext.x, y: this.ext.y };
   }
@@ -2329,12 +2510,15 @@ var HexbinLayer = class {
     this.yRef = 0;
     this.xBounds = [0, 0];
     this.yBounds = [0, 0];
+    this.cInfo = null;
     this.id = `hexbin-${counter10++}`;
     this.gl = gl;
     this.program = getProgram7(gl);
     this.usage = bufferUsage(gl, opts.renderType);
     this.yAxis = opts.yAxis ?? "y";
-    this.cmap = colormap(opts.colormap ?? "viridis");
+    this.cmapName = opts.colormap ?? "viridis";
+    this.label = opts.name;
+    this.cmap = colormap(this.cmapName);
     this.explicitRadius = opts.radius;
     this.domain = opts.domain;
     const { centers, colors } = this.build(opts.x, opts.y);
@@ -2402,6 +2586,7 @@ var HexbinLayer = class {
     const lo = this.domain?.[0] ?? 1;
     const hi = this.domain?.[1] ?? maxCount;
     const span = hi - lo || 1;
+    this.cInfo = { colormap: this.cmapName, domain: [lo, hi], ...this.label ? { label: this.label } : {} };
     let k = 0;
     for (const cell of cells.values()) {
       centers[k * 2] = cell.cx - this.xRef;
@@ -2424,6 +2609,9 @@ var HexbinLayer = class {
     gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[2]);
     gl.bufferData(gl.ARRAY_BUFFER, colors, this.usage);
   }
+  colorInfo() {
+    return this.cInfo;
+  }
   bounds() {
     if (this.cellCount === 0) return null;
     return { x: this.xBounds, y: this.yBounds };
@@ -2846,6 +3034,7 @@ precision highp float;
 layout(location = 0) in vec2 aCorner;  // (along 0..1, side -1..1)
 layout(location = 1) in vec2 aP0;
 layout(location = 2) in vec2 aP1;
+layout(location = 3) in float aDist;   // cumulative data-space length at P0
 uniform vec2 uResolution;
 uniform float uWidth;
 uniform float uRound;
@@ -2853,6 +3042,7 @@ ${TRANSFORM_GLSL}
 out vec2 vPix;
 out vec2 vS0;
 out vec2 vS1;
+out float vDash0;
 void main() {
   vec2 s0 = (dataToClip(aP0) * 0.5 + 0.5) * uResolution;
   vec2 s1 = (dataToClip(aP1) * 0.5 + 0.5) * uResolution;
@@ -2865,6 +3055,10 @@ void main() {
   vec2 endpoint = mix(s0, s1, aCorner.x);
   vec2 outward = (aCorner.x < 0.5 ? -dir : dir) * ext;
   vec2 pos = endpoint + outward + nrm * (aCorner.y * hw);
+  // Convert the CPU-side data-space arc length into screen px using this
+  // segment own scale, so the pattern stays continuous across vertices.
+  float dataLen = length(aP1 - aP0);
+  vDash0 = dataLen > 1e-12 ? aDist * (len / dataLen) : 0.0;
   vPix = pos; vS0 = s0; vS1 = s1;
   gl_Position = vec4((pos / uResolution) * 2.0 - 1.0, 0.0, 1.0);
 }`
@@ -2876,9 +3070,13 @@ precision highp float;
 in vec2 vPix;
 in vec2 vS0;
 in vec2 vS1;
+in float vDash0;
 uniform vec4 uColor;
 uniform float uWidth;
 uniform float uRound;
+uniform float uDash[8];
+uniform int uDashCount;
+uniform float uDashPeriod;
 out vec4 outColor;
 void main() {
   vec2 pa = vPix - vS0;
@@ -2892,6 +3090,17 @@ void main() {
     if (t < 0.0 || t > 1.0) discard;             // butt caps
     d = length(pa - ba * t);
   }
+  if (uDashCount > 0) {
+    float phase = mod(vDash0 + clamp(t, 0.0, 1.0) * length(ba), uDashPeriod);
+    float acc = 0.0;
+    bool on = true;
+    for (int i = 0; i < 8; i++) {
+      if (i >= uDashCount) break;
+      acc += uDash[i];
+      if (phase < acc) { on = (i - (i / 2) * 2) == 0; break; }
+    }
+    if (!on) discard;
+  }
   float hw = uWidth * 0.5;
   float alpha = 1.0 - smoothstep(hw - 1.0, hw + 1.0, d);
   if (alpha <= 0.0) discard;
@@ -3054,7 +3263,9 @@ var LineLayer = class {
     this.joinStyle = opts.join ?? "round";
     this.round = this.joinStyle === "round";
     this.miterLimit = opts.miterLimit ?? 4;
-    this.decimateOn = opts.decimate !== false;
+    this.dash = (opts.dash ?? []).filter((v) => v > 0).slice(0, 8);
+    this.dashPeriod = this.dash.reduce((a, b) => a + b, 0);
+    this.decimateOn = opts.decimate !== false && this.dash.length === 0;
     this.step = opts.step;
     const colorInput = opts.color ?? "#3b82f6";
     this.color = Array.isArray(colorInput) ? colorInput : parseColor(colorInput);
@@ -3092,8 +3303,13 @@ var LineLayer = class {
     this.yBounds = [minY, maxY];
     this.count = n;
     this.monotonic = mono;
+    const dists = new Float32Array(this.dash.length ? n : 0);
+    for (let i = 1; i < dists.length; i++) {
+      dists[i] = dists[i - 1] + Math.hypot(data[i * 2] - data[(i - 1) * 2], data[i * 2 + 1] - data[(i - 1) * 2 + 1]);
+    }
     this.cornerBuf = gl.createBuffer();
     this.posBuf = gl.createBuffer();
+    this.distBuf = gl.createBuffer();
     this.decBuf = gl.createBuffer();
     this.fullVao = gl.createVertexArray();
     this.decVao = gl.createVertexArray();
@@ -3103,6 +3319,8 @@ var LineLayer = class {
     gl.bufferData(gl.ARRAY_BUFFER, CORNERS2, gl.STATIC_DRAW);
     gl.bindBuffer(gl.ARRAY_BUFFER, this.posBuf);
     gl.bufferData(gl.ARRAY_BUFFER, data, this.usage);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.distBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, dists, this.usage);
     this.configureVao(this.fullVao, this.posBuf);
     this.configureVao(this.decVao, this.decBuf);
     this.configureJoinVao(this.joinFullVao, this.posBuf);
@@ -3112,7 +3330,10 @@ var LineLayer = class {
       "uColor",
       "uResolution",
       "uWidth",
-      "uRound"
+      "uRound",
+      "uDash[0]",
+      "uDashCount",
+      "uDashPeriod"
     ]);
     this.joinUniforms = uniformLocations(gl, this.joinProgram, [
       ...TRANSFORM_UNIFORMS,
@@ -3157,6 +3378,12 @@ var LineLayer = class {
     gl.enableVertexAttribArray(2);
     gl.vertexAttribPointer(2, 2, gl.FLOAT, false, 8, 8);
     gl.vertexAttribDivisor(2, 1);
+    if (this.dash.length) {
+      gl.bindBuffer(gl.ARRAY_BUFFER, this.distBuf);
+      gl.enableVertexAttribArray(3);
+      gl.vertexAttribPointer(3, 1, gl.FLOAT, false, 4, 0);
+      gl.vertexAttribDivisor(3, 1);
+    }
     gl.bindVertexArray(null);
   }
   // Join instances read three consecutive points (prev, p0, next) from the same
@@ -3211,6 +3438,10 @@ var LineLayer = class {
     this.yBounds = [minY, maxY];
     this.count = n;
     this.monotonic = mono;
+    const dists = new Float32Array(this.dash.length ? n : 0);
+    for (let i = 1; i < dists.length; i++) {
+      dists[i] = dists[i - 1] + Math.hypot(data[i * 2] - data[(i - 1) * 2], data[i * 2 + 1] - data[(i - 1) * 2 + 1]);
+    }
     this.decKey = "";
     this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.posBuf);
     this.gl.bufferData(this.gl.ARRAY_BUFFER, data, this.usage);
@@ -3269,6 +3500,13 @@ var LineLayer = class {
     gl.uniform2f(this.uniforms.uResolution, state.pixelWidth, state.pixelHeight);
     gl.uniform1f(this.uniforms.uWidth, this.width * state.dpr);
     gl.uniform1f(this.uniforms.uRound, this.round ? 1 : 0);
+    gl.uniform1i(this.uniforms.uDashCount, this.dash.length);
+    if (this.dash.length) {
+      const scaled = new Float32Array(8);
+      for (let i = 0; i < this.dash.length; i++) scaled[i] = this.dash[i] * state.dpr;
+      gl.uniform1fv(this.uniforms["uDash[0]"], scaled);
+      gl.uniform1f(this.uniforms.uDashPeriod, this.dashPeriod * state.dpr);
+    }
     gl.bindVertexArray(vao);
     gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, segments);
     gl.bindVertexArray(null);
@@ -3294,6 +3532,7 @@ var LineLayer = class {
     gl.deleteVertexArray(this.joinDecVao);
     gl.deleteBuffer(this.cornerBuf);
     gl.deleteBuffer(this.posBuf);
+    gl.deleteBuffer(this.distBuf);
     gl.deleteBuffer(this.decBuf);
   }
 };
@@ -3759,6 +3998,7 @@ var PatchesLayer = class {
     this.yRef = 0;
     this.xBounds = [0, 0];
     this.yBounds = [0, 0];
+    this.cInfo = null;
     this.id = `patches-${counter13++}`;
     this.gl = gl;
     this.program = getFillProgram(gl);
@@ -3768,6 +4008,7 @@ var PatchesLayer = class {
     this.defRgba = Array.isArray(defColor) ? defColor : parseColor(defColor);
     this.colorCss = typeof defColor === "string" ? defColor : "#3b82f6";
     this.opacity = opts.opacity ?? 1;
+    this.cmapName = opts.colormap;
     this.cmap = opts.colormap ? colormap(opts.colormap) : null;
     this.domainOpt = opts.domain;
     this.usage = bufferUsage(gl, opts.renderType);
@@ -3803,6 +4044,7 @@ var PatchesLayer = class {
       }
     }
     const span = hi - lo || 1;
+    this.cInfo = cmap && this.cmapName && lo <= hi ? { colormap: this.cmapName, domain: [lo, hi], ...this.name !== this.id ? { label: this.name } : {} } : null;
     this.xRef = 0;
     this.yRef = 0;
     for (const patch of patches) {
@@ -3862,6 +4104,9 @@ var PatchesLayer = class {
     gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[1]);
     gl.bufferData(gl.ARRAY_BUFFER, colors, this.usage);
   }
+  colorInfo() {
+    return this.cInfo;
+  }
   bounds() {
     if (this.vertexCount === 0) return null;
     return { x: this.xBounds, y: this.yBounds };
@@ -4099,6 +4344,7 @@ var counter15 = 0;
 var QuiverLayer = class {
   constructor(gl, opts) {
     this.buffers = [];
+    this.cInfo = null;
     this.xRef = 0;
     this.yRef = 0;
     this.xBounds = [0, 0];
@@ -4116,6 +4362,7 @@ var QuiverLayer = class {
     this.useVertexColor = opts.colorBy != null;
     this.explicitScale = opts.scale;
     this.colorBy = opts.colorBy;
+    this.label = opts.name;
     this.usage = bufferUsage(gl, opts.renderType);
     const { arrows, colors } = this.build(opts.x, opts.y, opts.u, opts.v);
     const cornerBuf = gl.createBuffer();
@@ -4200,6 +4447,11 @@ var QuiverLayer = class {
       }
     }
     const span = hi - lo || 1;
+    this.cInfo = this.useVertexColor ? {
+      colormap: this.colorBy?.colormap ?? "viridis",
+      domain: [lo, hi],
+      ...this.label ? { label: this.label } : {}
+    } : null;
     let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
     for (let i = 0; i < n; i++) {
       const xi = x[i], yi = y[i];
@@ -4234,6 +4486,9 @@ var QuiverLayer = class {
     gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[2]);
     gl.bufferData(gl.ARRAY_BUFFER, colors, this.usage);
   }
+  colorInfo() {
+    return this.cInfo;
+  }
   bounds() {
     if (this.count === 0) return null;
     return { x: this.xBounds, y: this.yBounds };
@@ -4285,14 +4540,17 @@ precision highp float;
 layout(location = 0) in vec2 aCorner;  // unit quad [-1,1]^2
 layout(location = 1) in vec2 aPos;     // point (offset data space)
 layout(location = 2) in vec4 aColor;   // per-point color (used if uUseVertexColor>0.5)
+layout(location = 3) in float aSize;   // per-point diameter in CSS px (0 => uniform uSize)
 uniform vec2 uResolution;
 uniform float uSize;                   // radius in device px
+uniform float uDpr;
 ${TRANSFORM_GLSL}
 out vec2 vLocal;
 out vec4 vColor;
 void main() {
   vec2 center = (dataToClip(aPos) * 0.5 + 0.5) * uResolution;
-  vec2 pos = center + aCorner * uSize;
+  float radius = aSize > 0.0 ? aSize * 0.5 * uDpr : uSize;
+  vec2 pos = center + aCorner * radius;
   vLocal = aCorner;
   vColor = aColor;
   gl_Position = vec4((pos / uResolution) * 2.0 - 1.0, 0.0, 1.0);
@@ -4365,6 +4623,7 @@ var counter16 = 0;
 var ScatterLayer = class {
   constructor(gl, opts) {
     this.buffers = [];
+    this.cInfo = null;
     this.xRef = 0;
     this.yRef = 0;
     this.xBounds = [0, 0];
@@ -4373,6 +4632,7 @@ var ScatterLayer = class {
     this.gl = gl;
     this.program = getProgram10(gl);
     this.size = opts.size ?? 5;
+    this.maxSize = this.size;
     this.marker = MARKERS[opts.marker ?? "circle"];
     const colorInput = opts.color ?? "#3b82f6";
     this.color = Array.isArray(colorInput) ? colorInput : parseColor(colorInput);
@@ -4403,7 +4663,28 @@ var ScatterLayer = class {
     }
     this.xBounds = [minX, maxX];
     this.yBounds = [minY, maxY];
+    const sizes = new Float32Array(n);
+    if (opts.sizes) {
+      let max = this.size;
+      for (let i = 0; i < n; i++) {
+        const s = opts.sizes[i] ?? 0;
+        sizes[i] = s > 0 ? s : 0;
+        if (s > max) max = s;
+      }
+      this.maxSize = max;
+    }
     const colors = new Float32Array(n * 4);
+    if (opts.colors && !opts.colorBy) {
+      this.useVertexColor = true;
+      for (let i = 0; i < n; i++) {
+        const c = opts.colors[i];
+        const rgba = c == null ? this.color : Array.isArray(c) ? c : parseColor(c);
+        colors[i * 4] = rgba[0];
+        colors[i * 4 + 1] = rgba[1];
+        colors[i * 4 + 2] = rgba[2];
+        colors[i * 4 + 3] = rgba[3];
+      }
+    }
     if (opts.colorBy) {
       const vals = opts.colorBy.values;
       const lut = colormapLUT(opts.colorBy.colormap ?? "viridis");
@@ -4417,6 +4698,11 @@ var ScatterLayer = class {
         }
       }
       const span = hi - lo || 1;
+      this.cInfo = {
+        colormap: opts.colorBy.colormap ?? "viridis",
+        domain: [lo, hi],
+        ...opts.name ? { label: opts.name } : {}
+      };
       for (let i = 0; i < n; i++) {
         let t = (vals[i] - lo) / span;
         t = t <= 0 ? 0 : t >= 1 ? 1 : t;
@@ -4447,23 +4733,33 @@ var ScatterLayer = class {
     gl.enableVertexAttribArray(2);
     gl.vertexAttribPointer(2, 4, gl.FLOAT, false, 0, 0);
     gl.vertexAttribDivisor(2, 1);
+    const sizeBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, sizeBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, sizes, this.usage);
+    gl.enableVertexAttribArray(3);
+    gl.vertexAttribPointer(3, 1, gl.FLOAT, false, 0, 0);
+    gl.vertexAttribDivisor(3, 1);
     gl.bindVertexArray(null);
-    this.buffers = [cornerBuf, posBuf, colorBuf];
+    this.buffers = [cornerBuf, posBuf, colorBuf, sizeBuf];
     this.uniforms = uniformLocations(gl, this.program, [
       ...TRANSFORM_UNIFORMS,
       "uColor",
       "uResolution",
       "uSize",
+      "uDpr",
       "uUseVertexColor",
       "uMarker"
     ]);
   }
+  colorInfo() {
+    return this.cInfo;
+  }
   bounds() {
     if (this.count === 0) return null;
     return { x: this.xBounds, y: this.yBounds };
   }
   pick(mode, cursorPx, cursorPy, project) {
-    const gatePx = this.size / 2 + 4;
+    const gatePx = this.maxSize / 2 + 4;
     return pickNearest(this.xs, this.ys, this.count, mode, cursorPx, cursorPy, project, gatePx);
   }
   /** User-supplied text for a point, shown when it is clicked. */
@@ -4495,8 +4791,12 @@ var ScatterLayer = class {
     this.xBounds = [minX, maxX];
     this.yBounds = [minY, maxY];
     this.useVertexColor = false;
+    this.cInfo = null;
+    this.maxSize = this.size;
     this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffers[1]);
     this.gl.bufferData(this.gl.ARRAY_BUFFER, pos, this.usage);
+    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffers[3]);
+    this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(n), this.usage);
   }
   draw(state) {
     if (this.count === 0) return;
@@ -4506,6 +4806,7 @@ var ScatterLayer = class {
     gl.uniform4f(this.uniforms.uColor, this.color[0], this.color[1], this.color[2], this.color[3]);
     gl.uniform2f(this.uniforms.uResolution, state.pixelWidth, state.pixelHeight);
     gl.uniform1f(this.uniforms.uSize, this.size / 2 * state.dpr);
+    gl.uniform1f(this.uniforms.uDpr, state.dpr);
     gl.uniform1f(this.uniforms.uUseVertexColor, this.useVertexColor ? 1 : 0);
     gl.uniform1i(this.uniforms.uMarker, this.marker);
     gl.bindVertexArray(this.vao);
@@ -4991,6 +5292,104 @@ async function copyCanvasToClipboard(canvas) {
   await navigator.clipboard.write([new CI({ "image/png": blob })]);
 }
 
+// src/render/colorbar.ts
+var GRADIENT_STOPS = 24;
+function colormapGradient(spec, stops = GRADIENT_STOPS) {
+  const cmap = colormap(spec);
+  const parts = [];
+  for (let i = 0; i <= stops; i++) {
+    const t = i / stops;
+    const [r, g, b] = cmap(t);
+    parts.push(
+      `rgb(${Math.round(r * 255)},${Math.round(g * 255)},${Math.round(b * 255)}) ${(t * 100).toFixed(2)}%`
+    );
+  }
+  return `linear-gradient(to top, ${parts.join(",")})`;
+}
+function barTicks(domain, target) {
+  const [lo, hi] = domain;
+  if (!Number.isFinite(lo) || !Number.isFinite(hi)) return [];
+  if (lo === hi) return [lo];
+  const ticks = autoTicks(lo, hi, target).map((t) => t.value).filter((v) => v >= lo && v <= hi);
+  return ticks.length >= 2 ? ticks : [lo, hi];
+}
+function compact(value) {
+  if (value === 0) return "0";
+  const abs = Math.abs(value);
+  if (abs >= 1e5 || abs < 1e-3) return value.toExponential(1).replace("e+", "e");
+  return String(parseFloat(value.toPrecision(3)));
+}
+function buildBar(info, opts, theme, heightPx) {
+  const wrap = document.createElement("div");
+  Object.assign(wrap.style, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    gap: "3px"
+  });
+  const label = opts.label ?? info.label;
+  if (label) {
+    const caption = document.createElement("div");
+    caption.textContent = label;
+    Object.assign(caption.style, {
+      color: theme.text,
+      font: theme.font,
+      opacity: "0.85",
+      whiteSpace: "nowrap"
+    });
+    wrap.appendChild(caption);
+  }
+  const row = document.createElement("div");
+  Object.assign(row.style, { display: "flex", alignItems: "stretch", gap: "4px" });
+  const barHeight = Math.max(24, heightPx);
+  const bar = document.createElement("div");
+  Object.assign(bar.style, {
+    width: `${opts.width ?? 12}px`,
+    height: `${barHeight}px`,
+    borderRadius: "2px",
+    background: colormapGradient(info.colormap),
+    border: `1px solid ${theme.border}`,
+    flex: "0 0 auto"
+  });
+  const format = opts.format ?? compact;
+  const [lo, hi] = info.domain;
+  const span = hi - lo || 1;
+  const ticks = document.createElement("div");
+  Object.assign(ticks.style, {
+    position: "relative",
+    height: `${barHeight}px`,
+    minWidth: "1px",
+    color: theme.text,
+    font: theme.font,
+    whiteSpace: "nowrap"
+  });
+  for (const v of barTicks(info.domain, opts.ticks ?? 5)) {
+    const t = document.createElement("span");
+    t.textContent = format(v);
+    Object.assign(t.style, {
+      position: "absolute",
+      left: "0",
+      top: `${(1 - (v - lo) / span) * barHeight}px`,
+      transform: "translateY(-50%)"
+    });
+    ticks.appendChild(t);
+  }
+  row.append(bar, ticks);
+  wrap.appendChild(row);
+  return wrap;
+}
+function renderColorbars(host, infos, opts, theme, regionHeight) {
+  if (infos.length === 0) {
+    host.style.display = "none";
+    return;
+  }
+  const fraction = opts.heightFraction ?? 0.72;
+  const per = regionHeight * fraction / infos.length - (infos.length > 1 ? 22 : 0);
+  host.replaceChildren();
+  for (const info of infos) host.appendChild(buildBar(info, opts, theme, per));
+  host.style.display = "flex";
+}
+
 // src/scales/scale.ts
 var LinearScale = class {
   constructor(domain = [0, 1]) {
@@ -5432,6 +5831,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 COLORBAR_GAP = 62;
 var TITLE_RESERVE = 28;
 function hexToRgba(hex, alpha) {
   const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
@@ -5501,6 +5901,9 @@ var Plot = class {
     /** A point clicked to pin its details, until another click clears it. */
     this.selected = null;
     this.annotations = [];
+    /** Ids of layers hidden via the legend / {@link setLayerVisible}. */
+    this.hidden = /* @__PURE__ */ new Set();
+    this.visibilityCbs = [];
     this.container = container;
     if (getComputedStyle(container).position === "static") {
       container.style.position = "relative";
@@ -5541,6 +5944,7 @@ var Plot = class {
     this.title = typeof options.title === "string" ? { text: options.title } : options.title ?? null;
     this.updateAria();
     this.legend = options.legend === true ? {} : options.legend || null;
+    this.colorbar = options.colorbar === false ? null : options.colorbar === true || options.colorbar == null ? {} : options.colorbar;
     this.mode = options.mode ?? "pan";
     this.hoverEnabled = options.hover !== false;
     this.pickMode = options.pick ?? "x";
@@ -5609,6 +6013,17 @@ var Plot = class {
       border: `1px solid ${this.isDark ? "rgba(148,163,184,0.25)" : "rgba(100,116,139,0.2)"}`
     });
     container.appendChild(this.legendDiv);
+    this.colorbarDiv = document.createElement("div");
+    Object.assign(this.colorbarDiv.style, {
+      position: "absolute",
+      display: "none",
+      zIndex: "3",
+      pointerEvents: "none",
+      flexDirection: "column",
+      gap: "10px",
+      justifyContent: "center"
+    });
+    container.appendChild(this.colorbarDiv);
     this.resizeObserver = new ResizeObserver(() => this.resize());
     this.resizeObserver.observe(container);
     this.resize();
@@ -5659,9 +6074,40 @@ var Plot = class {
       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
+      right: this.baseMargin.right + rightCount * Y_AXIS_GAP + (this.colorInfos().length ? COLORBAR_GAP : 0)
     };
   }
+  /** Colour scales reported by the layers, in draw order. */
+  colorInfos() {
+    if (!this.colorbar) return [];
+    const out = [];
+    for (const l of this.layers) {
+      if (this.hidden.has(l.id)) continue;
+      const info = l.colorInfo?.();
+      if (info) out.push(info);
+    }
+    return out;
+  }
+  /** Rebuild + place the colorbar stack in the reserved side margin. */
+  updateColorbars(region) {
+    const infos = this.colorInfos();
+    const cfg = this.colorbar;
+    if (!cfg || infos.length === 0) {
+      this.colorbarDiv.style.display = "none";
+      return;
+    }
+    renderColorbars(this.colorbarDiv, infos, cfg, {
+      text: cfg.textColor ?? this.theme.text,
+      border: cfg.borderColor ?? this.theme.axis,
+      font: cfg.font ?? "10px system-ui, -apple-system, sans-serif"
+    }, region.height);
+    let rightAxes = 0;
+    for (const ya of this.yAxes.values()) if (ya.side === "right") rightAxes++;
+    const left = cfg.position === "left" ? Math.max(4, region.left - COLORBAR_GAP + 8) : region.left + region.width + rightAxes * Y_AXIS_GAP + 12;
+    this.colorbarDiv.style.left = `${left}px`;
+    this.colorbarDiv.style.top = `${region.top}px`;
+    this.colorbarDiv.style.height = `${region.height}px`;
+  }
   layout() {
     return {
       cssWidth: this.container.clientWidth,
@@ -5728,6 +6174,14 @@ var Plot = class {
   get context() {
     return this.gl;
   }
+  /**
+   * The container this plot renders into (already `position: relative`), for
+   * custom overlays — a chart-specific tooltip, a colorbar, a caption. Append
+   * absolutely-positioned children with `zIndex >= 3` to sit above the canvases.
+   */
+  get element() {
+    return this.container;
+  }
   /**
    * Convert a client (screen) coordinate to data space — the shared x and the
    * primary y. Returns null if the point is outside the plot region. Useful for
@@ -6251,6 +6705,7 @@ var Plot = class {
     const i = this.layers.indexOf(layer);
     if (i >= 0) {
       this.layers.splice(i, 1);
+      this.hidden.delete(layer.id);
       layer.dispose();
       this.autoscale();
       this.requestRender();
@@ -6387,6 +6842,7 @@ var Plot = class {
     if (this.autoX) {
       let minX = Infinity, maxX = -Infinity, any = false;
       for (const l of this.layers) {
+        if (this.hidden.has(l.id)) continue;
         const b = l.bounds();
         if (!b) continue;
         any = true;
@@ -6399,7 +6855,7 @@ var Plot = class {
       if (!ya.auto) continue;
       let minY = Infinity, maxY = -Infinity, any = false;
       for (const l of this.layers) {
-        if (l.yAxis !== ya.id) continue;
+        if (l.yAxis !== ya.id || this.hidden.has(l.id)) continue;
         const b = l.bounds();
         if (!b) continue;
         any = true;
@@ -6417,6 +6873,7 @@ var Plot = class {
     this.tooltip.remove();
     this.infoBox.remove();
     this.legendDiv.remove();
+    this.colorbarDiv.remove();
     for (const l of this.layers) l.dispose();
     this.container.removeChild(this.gridCanvas);
     this.container.removeChild(this.dataCanvas);
@@ -6507,6 +6964,7 @@ var Plot = class {
       log: this.scaleX.log
     };
     for (const layer of this.layers) {
+      if (this.hidden.has(layer.id)) continue;
       const ya = this.yAxes.get(layer.yAxis);
       layer.draw({
         gl,
@@ -6553,6 +7011,7 @@ var Plot = class {
     }
     this.updateInfoBox(region);
     this.updateLegend(region);
+    this.updateColorbars(region);
   }
   /** Named series that can appear in the legend: any layer exposing name + colorCss. */
   legendEntries() {
@@ -6560,11 +7019,38 @@ var Plot = class {
     for (const l of this.layers) {
       const a = l;
       if (typeof a.name === "string" && a.name && a.name !== a.id && typeof a.colorCss === "string") {
-        out.push({ name: a.name, colorCss: a.colorCss });
+        out.push({ layer: l, name: a.name, colorCss: a.colorCss });
       }
     }
     return out;
   }
+  // ---- Series visibility ----------------------------------------------------
+  /** Whether a layer is currently drawn (hidden layers also drop out of autoscale). */
+  isLayerVisible(layer) {
+    return !this.hidden.has(layer.id);
+  }
+  /** Show or hide a layer, re-fitting the auto axes to what remains visible. */
+  setLayerVisible(layer, visible) {
+    const changed = visible ? this.hidden.delete(layer.id) : (this.hidden.add(layer.id), true);
+    if (!changed) return;
+    this.autoscale();
+    this.updateAria();
+    this.requestRender();
+    for (const cb of this.visibilityCbs) cb(layer, visible);
+  }
+  /** Flip a layer's visibility. Returns the new state. */
+  toggleLayer(layer) {
+    const next = !this.isLayerVisible(layer);
+    this.setLayerVisible(layer, next);
+    return next;
+  }
+  /** Subscribe to show/hide changes (legend clicks included). Returns an unsubscribe fn. */
+  onVisibilityChange(cb) {
+    this.visibilityCbs.push(cb);
+    return () => {
+      this.visibilityCbs = this.visibilityCbs.filter((f) => f !== cb);
+    };
+  }
   /** Rebuild and position the legend overlay (or hide it). */
   updateLegend(region) {
     const div = this.legendDiv;
@@ -6582,8 +7068,11 @@ var Plot = class {
     div.style.display = "flex";
     div.style.flexDirection = horizontal ? "row" : "column";
     div.style.gap = horizontal ? "12px" : "3px";
+    const interactive = cfg.interactive !== false;
+    div.style.pointerEvents = interactive ? "auto" : "none";
     div.replaceChildren();
     for (const e of entries) {
+      const visible = this.isLayerVisible(e.layer);
       const row = document.createElement("div");
       row.style.display = "flex";
       row.style.alignItems = "center";
@@ -6593,13 +7082,31 @@ var Plot = class {
         width: "10px",
         height: "10px",
         borderRadius: "2px",
-        background: e.colorCss,
+        background: visible ? e.colorCss : "transparent",
+        border: `1px solid ${e.colorCss}`,
+        boxSizing: "border-box",
         flex: "0 0 auto"
       });
       const label = document.createElement("span");
       label.textContent = e.name;
       row.appendChild(swatch);
       row.appendChild(label);
+      if (interactive) {
+        row.style.cursor = "pointer";
+        row.style.opacity = visible ? "1" : "0.45";
+        row.style.userSelect = "none";
+        row.tabIndex = 0;
+        row.setAttribute("role", "switch");
+        row.setAttribute("aria-checked", String(visible));
+        row.setAttribute("aria-label", `${e.name} series`);
+        row.addEventListener("click", () => this.toggleLayer(e.layer));
+        row.addEventListener("keydown", (ev) => {
+          if (ev.key === "Enter" || ev.key === " ") {
+            ev.preventDefault();
+            this.toggleLayer(e.layer);
+          }
+        });
+      }
       div.appendChild(row);
     }
     const inset = 8;
@@ -6772,7 +7279,7 @@ var Plot = class {
     }
     const rows = [];
     for (const layer of this.layers) {
-      if (!isPickable(layer)) continue;
+      if (!isPickable(layer) || this.hidden.has(layer.id)) continue;
       const ya = this.yAxes.get(layer.yAxis);
       const project = (x, y) => [
         pxX(region, this.scaleX.norm(x)),
@@ -7111,7 +7618,7 @@ var Plot = class {
     let hit = null;
     let hitDist = Infinity;
     for (const layer of this.layers) {
-      if (!isPickable(layer)) continue;
+      if (!isPickable(layer) || this.hidden.has(layer.id)) continue;
       const ya = this.yAxes.get(layer.yAxis);
       const project = (x, y) => [
         pxX(region, this.scaleX.norm(x)),
@@ -8123,6 +8630,183 @@ var Bar3DLayer = class {
   }
 };
 
+// src/plot3d/boxes3d.ts
+function buildCube2() {
+  const faces = [
+    { n: [1, 0, 0], v: [[0.5, -0.5, -0.5], [0.5, 0.5, -0.5], [0.5, 0.5, 0.5], [0.5, -0.5, -0.5], [0.5, 0.5, 0.5], [0.5, -0.5, 0.5]] },
+    { n: [-1, 0, 0], v: [[-0.5, -0.5, 0.5], [-0.5, 0.5, 0.5], [-0.5, 0.5, -0.5], [-0.5, -0.5, 0.5], [-0.5, 0.5, -0.5], [-0.5, -0.5, -0.5]] },
+    { n: [0, 1, 0], v: [[-0.5, 0.5, -0.5], [0.5, 0.5, -0.5], [0.5, 0.5, 0.5], [-0.5, 0.5, -0.5], [0.5, 0.5, 0.5], [-0.5, 0.5, 0.5]] },
+    { n: [0, -1, 0], v: [[-0.5, -0.5, 0.5], [0.5, -0.5, 0.5], [0.5, -0.5, -0.5], [-0.5, -0.5, 0.5], [0.5, -0.5, -0.5], [-0.5, -0.5, -0.5]] },
+    { n: [0, 0, 1], v: [[-0.5, -0.5, 0.5], [0.5, -0.5, 0.5], [0.5, 0.5, 0.5], [-0.5, -0.5, 0.5], [0.5, 0.5, 0.5], [-0.5, 0.5, 0.5]] },
+    { n: [0, 0, -1], v: [[0.5, -0.5, -0.5], [-0.5, -0.5, -0.5], [-0.5, 0.5, -0.5], [0.5, -0.5, -0.5], [-0.5, 0.5, -0.5], [0.5, 0.5, -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);
+}
+var CUBE2 = buildCube2();
+var CUBE_VERTS = CUBE2.length / 6;
+var VERT11 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+layout(location = 0) in vec3 aCube;    // unit cube centered on the origin
+layout(location = 1) in vec3 aNormal;
+layout(location = 2) in vec3 aCenter;  // instance center
+layout(location = 3) in vec3 aSize;    // instance full size
+layout(location = 4) in vec3 aColor;
+uniform mat4 uMVP;
+out vec3 vColor;
+out vec3 vN;
+void main() {
+  vColor = aColor;
+  // Box normals stay axis-aligned under a non-uniform scale, so pass them through.
+  vN = aNormal;
+  gl_Position = uMVP * vec4(aCenter + aCube * aSize, 1.0);
+}`
+);
+var FRAG14 = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+in vec3 vColor;
+in vec3 vN;
+uniform vec3 uLightDir;
+uniform float uAmbient;
+uniform float uOpacity;
+out vec4 outColor;
+void main() {
+  float d = max(dot(normalize(vN), normalize(uLightDir)), 0.0);
+  float shade = uAmbient + (1.0 - uAmbient) * d;
+  outColor = vec4(vColor * shade * uOpacity, uOpacity);
+}`
+);
+var programCache15 = /* @__PURE__ */ new WeakMap();
+function getProgram12(gl) {
+  let p = programCache15.get(gl);
+  if (!p) {
+    p = createProgram(gl, VERT11, FRAG14);
+    programCache15.set(gl, p);
+  }
+  return p;
+}
+var INSTANCE_FLOATS = 9;
+var INSTANCE_STRIDE = INSTANCE_FLOATS * 4;
+var counter19 = 0;
+var Boxes3DLayer = class {
+  constructor(gl, opts) {
+    this.buffers = [];
+    this.count = 0;
+    this.b3 = { x: [0, 0], y: [0, 0], z: [0, 0] };
+    this.positions = new Float32Array(0);
+    this.labels = [];
+    this.lightDir = [0.5, 1, 0.35];
+    this.ambient = 0.35;
+    this.id = `boxes3d-${counter19++}`;
+    this.gl = gl;
+    this.program = getProgram12(gl);
+    this.name = opts.name;
+    this.usage = bufferUsage(gl, opts.renderType);
+    this.opacity = opts.opacity ?? 1;
+    const ci = opts.color ?? "#60a5fa";
+    this.base = Array.isArray(ci) ? ci : parseColor(ci);
+    this.colorCss = typeof ci === "string" ? ci : toColorCss(this.base);
+    this.vao = gl.createVertexArray();
+    gl.bindVertexArray(this.vao);
+    const cubeBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, cubeBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, CUBE2, 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);
+    for (let loc = 2; loc <= 4; loc++) {
+      gl.enableVertexAttribArray(loc);
+      gl.vertexAttribPointer(loc, 3, gl.FLOAT, false, INSTANCE_STRIDE, (loc - 2) * 12);
+      gl.vertexAttribDivisor(loc, 1);
+    }
+    gl.bindVertexArray(null);
+    this.buffers = [cubeBuf, instBuf];
+    this.instBuf = instBuf;
+    this.build(opts.boxes);
+    this.uniforms = uniformLocations(gl, this.program, ["uMVP", "uLightDir", "uAmbient", "uOpacity"]);
+  }
+  /** Pack the instance attributes, recompute bounds/pick data, and upload. */
+  build(boxes) {
+    const n = boxes.length;
+    this.count = n;
+    const inst = new Float32Array(n * INSTANCE_FLOATS);
+    this.positions = new Float32Array(n * 3);
+    this.labels = new Array(n);
+    let minX = Infinity, maxX = -Infinity;
+    let minY = Infinity, maxY = -Infinity;
+    let minZ = Infinity, maxZ = -Infinity;
+    for (let i = 0; i < n; i++) {
+      const b = boxes[i];
+      const o = i * INSTANCE_FLOATS;
+      inst[o] = b.x;
+      inst[o + 1] = b.y;
+      inst[o + 2] = b.z;
+      inst[o + 3] = b.w;
+      inst[o + 4] = b.h;
+      inst[o + 5] = b.d;
+      const rgba = b.color != null ? Array.isArray(b.color) ? b.color : parseColor(b.color) : this.base;
+      inst[o + 6] = rgba[0];
+      inst[o + 7] = rgba[1];
+      inst[o + 8] = rgba[2];
+      this.positions[i * 3] = b.x;
+      this.positions[i * 3 + 1] = b.y;
+      this.positions[i * 3 + 2] = b.z;
+      this.labels[i] = b.label;
+      const hw = b.w / 2, hh = b.h / 2, hd = b.d / 2;
+      if (b.x - hw < minX) minX = b.x - hw;
+      if (b.x + hw > maxX) maxX = b.x + hw;
+      if (b.y - hh < minY) minY = b.y - hh;
+      if (b.y + hh > maxY) maxY = b.y + hh;
+      if (b.z - hd < minZ) minZ = b.z - hd;
+      if (b.z + hd > maxZ) maxZ = b.z + hd;
+    }
+    this.b3 = n ? { x: [minX, maxX], y: [minY, maxY], z: [minZ, maxZ] } : { x: [0, 0], y: [0, 0], z: [0, 0] };
+    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.instBuf);
+    this.gl.bufferData(this.gl.ARRAY_BUFFER, inst, this.usage);
+  }
+  /** Replace every box. Call `plot.refresh()` afterwards to re-fit + redraw. */
+  setData(boxes) {
+    this.build(boxes);
+  }
+  bounds3() {
+    return this.count ? this.b3 : null;
+  }
+  pickData() {
+    if (!this.count) return null;
+    const labels = this.labels;
+    const hasLabels = labels.some((l) => l != null);
+    return hasLabels ? { positions: this.positions, label: (i) => labels[i] ?? "" } : { positions: this.positions };
+  }
+  /** 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.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.drawArraysInstanced(gl.TRIANGLES, 0, CUBE_VERTS, 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 = [
   [],
@@ -8142,7 +8826,7 @@ var CASES2 = [
   [[0, 3]],
   []
 ];
-var VERT11 = (
+var VERT12 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -8152,7 +8836,7 @@ uniform mat4 uMVP;
 out vec3 vColor;
 void main() { vColor = aColor; gl_Position = uMVP * vec4(aPos, 1.0); }`
 );
-var FRAG14 = (
+var FRAG15 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -8160,22 +8844,22 @@ in vec3 vColor;
 out vec4 outColor;
 void main() { outColor = vec4(vColor, 1.0); }`
 );
-var programCache15 = /* @__PURE__ */ new WeakMap();
-function getProgram12(gl) {
-  let p = programCache15.get(gl);
+var programCache16 = /* @__PURE__ */ new WeakMap();
+function getProgram13(gl) {
+  let p = programCache16.get(gl);
   if (!p) {
-    p = createProgram(gl, VERT11, FRAG14);
-    programCache15.set(gl, p);
+    p = createProgram(gl, VERT12, FRAG15);
+    programCache16.set(gl, p);
   }
   return p;
 }
-var counter19 = 0;
+var counter20 = 0;
 var Contour3DLayer = class {
   constructor(gl, opts) {
     this.cInfo = null;
-    this.id = `contour3d-${counter19++}`;
+    this.id = `contour3d-${counter20++}`;
     this.gl = gl;
-    this.program = getProgram12(gl);
+    this.program = getProgram13(gl);
     this.name = opts.name;
     this.usage = bufferUsage(gl, opts.renderType);
     this.cmapName = opts.colormap ?? "viridis";
@@ -8885,7 +9569,7 @@ function marchingCubes(values, dims, isoLevel, extent) {
 }
 
 // src/plot3d/isosurface.ts
-var VERT12 = (
+var VERT13 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -8895,7 +9579,7 @@ uniform mat4 uMVP;
 out vec3 vN;
 void main() { vN = aNormal; gl_Position = uMVP * vec4(aPos, 1.0); }`
 );
-var FRAG15 = (
+var FRAG16 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -8912,23 +9596,23 @@ void main() {
   outColor = vec4(uColor * shade * uOpacity, uOpacity);
 }`
 );
-var programCache16 = /* @__PURE__ */ new WeakMap();
-function getProgram13(gl) {
-  let p = programCache16.get(gl);
+var programCache17 = /* @__PURE__ */ new WeakMap();
+function getProgram14(gl) {
+  let p = programCache17.get(gl);
   if (!p) {
-    p = createProgram(gl, VERT12, FRAG15);
-    programCache16.set(gl, p);
+    p = createProgram(gl, VERT13, FRAG16);
+    programCache17.set(gl, p);
   }
   return p;
 }
-var counter20 = 0;
+var counter21 = 0;
 var IsosurfaceLayer = class {
   constructor(gl, opts) {
     this.lightDir = [0.5, 1, 0.35];
     this.ambient = 0.35;
-    this.id = `isosurface-${counter20++}`;
+    this.id = `isosurface-${counter21++}`;
     this.gl = gl;
-    this.program = getProgram13(gl);
+    this.program = getProgram14(gl);
     this.name = opts.name;
     this.usage = bufferUsage(gl, opts.renderType);
     const ci = opts.color ?? "#38bdf8";
@@ -8998,7 +9682,7 @@ var IsosurfaceLayer = class {
 };
 
 // src/plot3d/line3d.ts
-var VERT13 = (
+var VERT14 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -9006,7 +9690,7 @@ layout(location = 0) in vec3 aPos;
 uniform mat4 uMVP;
 void main() { gl_Position = uMVP * vec4(aPos, 1.0); }`
 );
-var FRAG16 = (
+var FRAG17 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -9014,21 +9698,21 @@ uniform vec4 uColor;
 out vec4 outColor;
 void main() { outColor = uColor; }`
 );
-var programCache17 = /* @__PURE__ */ new WeakMap();
-function getProgram14(gl) {
-  let p = programCache17.get(gl);
+var programCache18 = /* @__PURE__ */ new WeakMap();
+function getProgram15(gl) {
+  let p = programCache18.get(gl);
   if (!p) {
-    p = createProgram(gl, VERT13, FRAG16);
-    programCache17.set(gl, p);
+    p = createProgram(gl, VERT14, FRAG17);
+    programCache18.set(gl, p);
   }
   return p;
 }
-var counter21 = 0;
+var counter22 = 0;
 var Line3DLayer = class {
   constructor(gl, opts) {
-    this.id = `line3d-${counter21++}`;
+    this.id = `line3d-${counter22++}`;
     this.gl = gl;
-    this.program = getProgram14(gl);
+    this.program = getProgram15(gl);
     this.usage = bufferUsage(gl, opts.renderType);
     this.name = opts.name;
     const ci = opts.color ?? "#38bdf8";
@@ -9134,6 +9818,15 @@ function perspective(fovy, aspect, near, far) {
   m[14] = 2 * far * near * nf;
   return m;
 }
+function orthographic(halfHeight, aspect, near, far) {
+  const m = identity();
+  const halfWidth = halfHeight * aspect;
+  m[0] = 1 / halfWidth;
+  m[5] = 1 / halfHeight;
+  m[10] = 2 / (near - far);
+  m[14] = (far + near) / (near - far);
+  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],
@@ -9183,7 +9876,7 @@ function scaleTranslate(s, t) {
 }
 
 // src/plot3d/pointcloud.ts
-var VERT14 = (
+var VERT15 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -9199,7 +9892,7 @@ void main() {
   gl_PointSize = aSize > 0.0 ? aSize : uSize;
 }`
 );
-var FRAG17 = (
+var FRAG18 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -9211,23 +9904,23 @@ void main() {
   outColor = vec4(vColor, 1.0);
 }`
 );
-var programCache18 = /* @__PURE__ */ new WeakMap();
-function getProgram15(gl) {
-  let p = programCache18.get(gl);
+var programCache19 = /* @__PURE__ */ new WeakMap();
+function getProgram16(gl) {
+  let p = programCache19.get(gl);
   if (!p) {
-    p = createProgram(gl, VERT14, FRAG17);
-    programCache18.set(gl, p);
+    p = createProgram(gl, VERT15, FRAG18);
+    programCache19.set(gl, p);
   }
   return p;
 }
-var counter22 = 0;
+var counter23 = 0;
 var PointCloudLayer = class {
   constructor(gl, opts) {
     this.b3 = { x: [0, 0], y: [0, 0], z: [0, 0] };
     this.cInfo = null;
-    this.id = `points3d-${counter22++}`;
+    this.id = `points3d-${counter23++}`;
     this.gl = gl;
-    this.program = getProgram15(gl);
+    this.program = getProgram16(gl);
     this.usage = bufferUsage(gl, opts.renderType);
     this.size = opts.size ?? 4;
     this.name = opts.name;
@@ -9345,7 +10038,7 @@ var PointCloudLayer = class {
 };
 
 // src/plot3d/quiver3d.ts
-var VERT15 = (
+var VERT16 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -9355,7 +10048,7 @@ uniform mat4 uMVP;
 out vec3 vColor;
 void main() { vColor = aColor; gl_Position = uMVP * vec4(aPos, 1.0); }`
 );
-var FRAG18 = (
+var FRAG19 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -9363,12 +10056,12 @@ in vec3 vColor;
 out vec4 outColor;
 void main() { outColor = vec4(vColor, 1.0); }`
 );
-var programCache19 = /* @__PURE__ */ new WeakMap();
-function getProgram16(gl) {
-  let p = programCache19.get(gl);
+var programCache20 = /* @__PURE__ */ new WeakMap();
+function getProgram17(gl) {
+  let p = programCache20.get(gl);
   if (!p) {
-    p = createProgram(gl, VERT15, FRAG18);
-    programCache19.set(gl, p);
+    p = createProgram(gl, VERT16, FRAG19);
+    programCache20.set(gl, p);
   }
   return p;
 }
@@ -9379,13 +10072,13 @@ function norm(x, y, z) {
 function cross2(a, b) {
   return [a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0]];
 }
-var counter23 = 0;
+var counter24 = 0;
 var Quiver3DLayer = class {
   constructor(gl, opts) {
     this.cInfo = null;
-    this.id = `quiver3d-${counter23++}`;
+    this.id = `quiver3d-${counter24++}`;
     this.gl = gl;
-    this.program = getProgram16(gl);
+    this.program = getProgram17(gl);
     this.name = opts.name;
     this.usage = bufferUsage(gl, opts.renderType);
     this.scale = opts.scale ?? 1;
@@ -9495,7 +10188,7 @@ var Quiver3DLayer = class {
 };
 
 // src/plot3d/surface.ts
-var VERT16 = (
+var VERT17 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -9507,7 +10200,7 @@ out vec3 vColor;
 out vec3 vN;
 void main() { vColor = aColor; vN = aNormal; gl_Position = uMVP * vec4(aPos, 1.0); }`
 );
-var FRAG19 = (
+var FRAG20 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -9540,12 +10233,12 @@ in vec3 vColor;
 out vec4 outColor;
 void main() { outColor = vec4(vColor, 1.0); }`
 );
-var programCache20 = /* @__PURE__ */ new WeakMap();
-function getProgram17(gl) {
-  let p = programCache20.get(gl);
+var programCache21 = /* @__PURE__ */ new WeakMap();
+function getProgram18(gl) {
+  let p = programCache21.get(gl);
   if (!p) {
-    p = createProgram(gl, VERT16, FRAG19);
-    programCache20.set(gl, p);
+    p = createProgram(gl, VERT17, FRAG20);
+    programCache21.set(gl, p);
   }
   return p;
 }
@@ -9558,16 +10251,16 @@ function getWireProgram(gl) {
   }
   return p;
 }
-var counter24 = 0;
+var counter25 = 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-${counter24++}`;
+    this.id = `surface-${counter25++}`;
     this.gl = gl;
     this.wireframe = opts.wireframe ?? false;
-    this.program = this.wireframe ? getWireProgram(gl) : getProgram17(gl);
+    this.program = this.wireframe ? getWireProgram(gl) : getProgram18(gl);
     this.name = opts.name;
     this.cmapName = opts.colormap ?? "viridis";
     this.usage = bufferUsage(gl, opts.renderType);
@@ -9703,7 +10396,7 @@ var SurfaceLayer = class {
 
 // src/plot3d/volume.ts
 var STEPS = 160;
-var VERT17 = (
+var VERT18 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -9713,7 +10406,7 @@ uniform mat4 uMVP;
 out vec3 vLocal;
 void main() { vLocal = aLocal; gl_Position = uMVP * vec4(aPos, 1.0); }`
 );
-var FRAG20 = (
+var FRAG21 = (
   /* glsl */
   `#version 300 es
 precision highp float;
@@ -9751,12 +10444,12 @@ void main() {
   outColor = acc; // premultiplied
 }`
 );
-var programCache21 = /* @__PURE__ */ new WeakMap();
-function getProgram18(gl) {
-  let p = programCache21.get(gl);
+var programCache22 = /* @__PURE__ */ new WeakMap();
+function getProgram19(gl) {
+  let p = programCache22.get(gl);
   if (!p) {
-    p = createProgram(gl, VERT17, FRAG20);
-    programCache21.set(gl, p);
+    p = createProgram(gl, VERT18, FRAG21);
+    programCache22.set(gl, p);
   }
   return p;
 }
@@ -9778,14 +10471,14 @@ var CUBE_FACES = [
   [0, 3, 7, 0, 7, 4],
   [1, 5, 6, 1, 6, 2]
 ];
-var counter25 = 0;
+var counter26 = 0;
 var VolumeLayer = class {
   constructor(gl, opts) {
     this.vDomain = [0, 1];
     this.camLocal = [0.5, 0.5, 2];
-    this.id = `volume-${counter25++}`;
+    this.id = `volume-${counter26++}`;
     this.gl = gl;
-    this.program = getProgram18(gl);
+    this.program = getProgram19(gl);
     this.name = opts.name;
     this.usage = bufferUsage(gl, opts.renderType);
     this.density = opts.density ?? 1;
@@ -10018,6 +10711,8 @@ var Plot3D = class {
     this.frameRequested = false;
     this.tickCount = 0;
     this.labels = [];
+    /** User labels anchored in data space (see {@link addLabel3D}). */
+    this.dataLabels = [];
     /** Tick positions in cube space [-1,1], per axis, for the grid planes. */
     this.tickCube = { x: [], y: [], z: [] };
     this.gridVao = null;
@@ -10059,6 +10754,9 @@ var Plot3D = class {
     this.colorbarOpt = options.colorbar ?? true;
     this.hoverEnabled = options.hover !== false;
     this.gridPlanes = options.gridPlanes !== false;
+    this.aspectMode = options.aspectMode ?? "cube";
+    this.showAxes = options.showAxes !== false;
+    this.projection = options.projection ?? "perspective";
     this.legendDiv = document.createElement("div");
     Object.assign(this.legendDiv.style, {
       position: "absolute",
@@ -10214,6 +10912,15 @@ var Plot3D = class {
     this.requestRender();
     return l;
   }
+  /** Independently sized lit cuboids (voxels, bounding boxes, model layer blocks). */
+  addBoxes3D(opts) {
+    const l = new Boxes3DLayer(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);
@@ -10247,6 +10954,28 @@ var Plot3D = class {
     this.requestRender();
     return l;
   }
+  /**
+   * Pin a text label to a point in data space. It is re-projected every frame,
+   * so it tracks the point as the camera orbits. Returns a disposer that removes
+   * just this label.
+   */
+  addLabel3D(label) {
+    this.dataLabels.push(label);
+    this.requestRender();
+    return () => {
+      const i = this.dataLabels.indexOf(label);
+      if (i >= 0) {
+        this.dataLabels.splice(i, 1);
+        this.requestRender();
+      }
+    };
+  }
+  /** Remove every data-space label. */
+  clearLabels3D() {
+    if (this.dataLabels.length === 0) return;
+    this.dataLabels = [];
+    this.requestRender();
+  }
   /** Update the light direction (azimuth/elevation, radians) and ambient (0..1). */
   setLight(params) {
     if (params.azimuth != null) this.lightAz = params.azimuth;
@@ -10429,7 +11158,9 @@ var Plot3D = class {
     }
     if (!b) return;
     this.dataBounds = b;
+    const shared2 = this.aspectMode === "data" ? 2 / (Math.max(b.x[1] - b.x[0], b.y[1] - b.y[0], b.z[1] - b.z[0]) || 1) : 0;
     const axis = (r) => {
+      if (shared2) return [shared2, -shared2 * (r[0] + r[1]) / 2];
       const span = r[1] - r[0];
       return span === 0 ? [1, -r[0]] : [2 / span, -(r[1] + r[0]) / span];
     };
@@ -10491,12 +11222,13 @@ var Plot3D = class {
   }
   viewProj() {
     const aspect = this.canvas.width / Math.max(1, this.canvas.height);
-    const proj = perspective(50 * Math.PI / 180, aspect, 0.01, 100);
+    const proj = this.projection === "orthographic" ? orthographic(this.distance / 2, aspect, -100, 100) : perspective(50 * Math.PI / 180, aspect, 0.01, 100);
     const el = Math.max(-1.5, Math.min(1.5, this.elevation));
+    const radius = this.projection === "orthographic" ? 8 : this.distance;
     const eye = [
-      this.distance * Math.cos(el) * Math.sin(this.azimuth),
-      this.distance * Math.sin(el),
-      this.distance * Math.cos(el) * Math.cos(this.azimuth)
+      radius * Math.cos(el) * Math.sin(this.azimuth),
+      radius * Math.sin(el),
+      radius * Math.cos(el) * Math.cos(this.azimuth)
     ];
     const view = lookAt(eye, [0, 0, 0], [0, 1, 0]);
     const vp = multiply(proj, view);
@@ -10538,13 +11270,15 @@ var Plot3D = class {
     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);
-    gl.drawArrays(gl.LINES, 0, BOX_EDGES.length / 3);
-    if (this.tickCount > 0) {
-      gl.uniform4f(this.lineUniforms.uColor, 0.75, 0.8, 0.9, 0.8);
-      gl.bindVertexArray(this.tickVao);
-      gl.drawArrays(gl.LINES, 0, this.tickCount);
+    if (this.showAxes) {
+      gl.uniform4f(this.lineUniforms.uColor, 0.6, 0.65, 0.75, 0.4);
+      gl.bindVertexArray(this.boxVao);
+      gl.drawArrays(gl.LINES, 0, BOX_EDGES.length / 3);
+      if (this.tickCount > 0) {
+        gl.uniform4f(this.lineUniforms.uColor, 0.75, 0.8, 0.9, 0.8);
+        gl.bindVertexArray(this.tickVao);
+        gl.drawArrays(gl.LINES, 0, this.tickCount);
+      }
     }
     gl.bindVertexArray(null);
     const n = this.norm;
@@ -10556,6 +11290,7 @@ var Plot3D = class {
     this.displayCtx.clearRect(0, 0, w, h);
     this.displayCtx.drawImage(this.sharedCanvas, 0, 0);
     this.drawLabels(vp, w, h);
+    this.drawDataLabels(mvp, w, h);
     if (this.title) {
       const ctx = this.displayCtx;
       ctx.save();
@@ -10661,8 +11396,38 @@ var Plot3D = class {
     div.appendChild(rowWrap);
     div.style.display = "block";
   }
+  /**
+   * Draw the user's data-space labels. Coordinates come out of the projection in
+   * device px; we scale the context by dpr instead so the caller's `font` string
+   * means CSS px, and outline each label so it stays readable over any fill.
+   */
+  drawDataLabels(mvp, w, h) {
+    if (this.dataLabels.length === 0) return;
+    const ctx = this.displayCtx;
+    const dpr = this.dpr;
+    ctx.save();
+    ctx.scale(dpr, dpr);
+    ctx.lineJoin = "round";
+    for (const l of this.dataLabels) {
+      const c = transformPoint(mvp, l.x, l.y, l.z);
+      if (c[3] <= 0) continue;
+      const sx = (c[0] / c[3] * 0.5 + 0.5) * w;
+      const sy = (1 - (c[1] / c[3] * 0.5 + 0.5)) * h;
+      ctx.font = l.font ?? "11px system-ui, -apple-system, sans-serif";
+      ctx.textAlign = l.align ?? "center";
+      ctx.textBaseline = l.baseline ?? "middle";
+      const x = sx / dpr + (l.dx ?? 0);
+      const y = sy / dpr + (l.dy ?? 0);
+      ctx.lineWidth = 3;
+      ctx.strokeStyle = "rgba(2,6,23,0.75)";
+      ctx.strokeText(l.text, x, y);
+      ctx.fillStyle = l.color ?? "#e2e8f0";
+      ctx.fillText(l.text, x, y);
+    }
+    ctx.restore();
+  }
   drawLabels(vp, w, h) {
-    if (this.labels.length === 0) return;
+    if (!this.showAxes || this.labels.length === 0) return;
     const ctx = this.displayCtx;
     ctx.save();
     ctx.textAlign = "center";
@@ -10770,6 +11535,352 @@ var Plot3D = class {
   }
 };
 
+// src/stats/signal.ts
+function windowFunction(name, n) {
+  const w = new Float64Array(n);
+  if (n === 0) return w;
+  if (n === 1) {
+    w[0] = 1;
+    return w;
+  }
+  const d = n - 1;
+  for (let i = 0; i < n; i++) {
+    const t = 2 * Math.PI * i / d;
+    switch (name) {
+      case "rectangular":
+        w[i] = 1;
+        break;
+      case "hamming":
+        w[i] = 0.54 - 0.46 * Math.cos(t);
+        break;
+      case "blackman":
+        w[i] = 0.42 - 0.5 * Math.cos(t) + 0.08 * Math.cos(2 * t);
+        break;
+      case "bartlett":
+        w[i] = 1 - Math.abs((i - d / 2) / (d / 2));
+        break;
+      default:
+        w[i] = 0.5 - 0.5 * Math.cos(t);
+        break;
+    }
+  }
+  return w;
+}
+function welch(signal, opts = {}) {
+  const sr = opts.sampleRate ?? 1;
+  const requested = opts.segment ?? 256;
+  let size = 1;
+  while (size * 2 <= Math.min(requested, signal.length)) size *= 2;
+  const bins = size >> 1;
+  if (bins < 1) return { frequencies: new Float64Array(0), power: new Float64Array(0) };
+  const overlap = Math.min(0.95, Math.max(0, opts.overlap ?? 0.5));
+  const step = Math.max(1, Math.round(size * (1 - overlap)));
+  const win = windowFunction(opts.window ?? "hann", size);
+  let winPower = 0;
+  for (let i = 0; i < size; i++) winPower += win[i] * win[i];
+  const norm2 = 1 / (sr * winPower);
+  const power = new Float64Array(bins);
+  const re = new Float64Array(size);
+  const im = new Float64Array(size);
+  let segments = 0;
+  for (let start = 0; start + size <= signal.length; start += step) {
+    for (let i = 0; i < size; i++) {
+      re[i] = signal[start + i] * win[i];
+      im[i] = 0;
+    }
+    fft(re, im);
+    for (let b = 0; b < bins; b++) {
+      const scale = b === 0 ? 1 : 2;
+      power[b] += (re[b] * re[b] + im[b] * im[b]) * norm2 * scale;
+    }
+    segments++;
+  }
+  if (segments > 1) for (let b = 0; b < bins; b++) power[b] /= segments;
+  const frequencies = new Float64Array(bins);
+  for (let b = 0; b < bins; b++) frequencies[b] = b * sr / size;
+  return { frequencies, power };
+}
+function savitzkyGolay(values, window2 = 9, order = 2) {
+  const n = values.length;
+  const out = new Float64Array(n);
+  let m = Math.max(3, Math.floor(window2));
+  if (m % 2 === 0) m += 1;
+  const half = m - 1 >> 1;
+  const deg = Math.max(0, Math.min(order, m - 1));
+  if (n === 0) return out;
+  if (n < m) {
+    for (let i = 0; i < n; i++) out[i] = values[i];
+    return out;
+  }
+  const size = deg + 1;
+  const ata = Array.from({ length: size }, () => new Array(size).fill(0));
+  for (let t = -half; t <= half; t++) {
+    const powers = new Array(size);
+    powers[0] = 1;
+    for (let p = 1; p < size; p++) powers[p] = powers[p - 1] * t;
+    for (let r = 0; r < size; r++) for (let c = 0; c < size; c++) ata[r][c] += powers[r] * powers[c];
+  }
+  const aug = ata.map((row, r) => [...row, r === 0 ? 1 : 0]);
+  for (let c = 0; c < size; c++) {
+    let pivot = c;
+    for (let r = c + 1; r < size; r++) if (Math.abs(aug[r][c]) > Math.abs(aug[pivot][c])) pivot = r;
+    if (Math.abs(aug[pivot][c]) < 1e-12) continue;
+    [aug[c], aug[pivot]] = [aug[pivot], aug[c]];
+    const p = aug[c][c];
+    for (let k = c; k <= size; k++) aug[c][k] /= p;
+    for (let r = 0; r < size; r++) {
+      if (r === c) continue;
+      const f = aug[r][c];
+      if (f === 0) continue;
+      for (let k = c; k <= size; k++) aug[r][k] -= f * aug[c][k];
+    }
+  }
+  const coef = aug.map((row) => row[size]);
+  const weights = new Float64Array(m);
+  for (let t = -half, i = 0; t <= half; t++, i++) {
+    let w = 0;
+    let tp = 1;
+    for (let p = 0; p < size; p++) {
+      w += coef[p] * tp;
+      tp *= t;
+    }
+    weights[i] = w;
+  }
+  for (let i = 0; i < n; i++) {
+    let acc = 0;
+    for (let k = 0; k < m; k++) {
+      const idx = Math.min(n - 1, Math.max(0, i + k - half));
+      acc += weights[k] * values[idx];
+    }
+    out[i] = acc;
+  }
+  return out;
+}
+function crossCorrelate(a, b, maxLag = Math.min(a.length, b.length) - 1, normalize4 = true) {
+  const n = Math.min(a.length, b.length);
+  const lag = Math.max(0, Math.min(Math.floor(maxLag), n - 1));
+  let meanA = 0;
+  let meanB = 0;
+  for (let i = 0; i < n; i++) {
+    meanA += a[i];
+    meanB += b[i];
+  }
+  meanA /= n || 1;
+  meanB /= n || 1;
+  let varA = 0;
+  let varB = 0;
+  for (let i = 0; i < n; i++) {
+    varA += (a[i] - meanA) ** 2;
+    varB += (b[i] - meanB) ** 2;
+  }
+  const denom = normalize4 ? Math.sqrt(varA * varB) || 1 : 1;
+  const count = 2 * lag + 1;
+  const lags = new Int32Array(count);
+  const values = new Float64Array(count);
+  for (let k = -lag, j = 0; k <= lag; k++, j++) {
+    let acc = 0;
+    for (let i = 0; i < n; i++) {
+      const bi = i + k;
+      if (bi < 0 || bi >= n) continue;
+      acc += (a[i] - meanA) * (b[bi] - meanB);
+    }
+    lags[j] = k;
+    values[j] = acc / denom;
+  }
+  return { lags, values };
+}
+
+// src/stats/regression.ts
+function linearRegression(x, y) {
+  const len = Math.min(x.length, y.length);
+  let n = 0;
+  let sx = 0;
+  let sy = 0;
+  for (let i = 0; i < len; i++) {
+    const xi = x[i];
+    const yi = y[i];
+    if (!Number.isFinite(xi) || !Number.isFinite(yi)) continue;
+    sx += xi;
+    sy += yi;
+    n++;
+  }
+  if (n < 2) {
+    const intercept2 = n === 1 ? sy : 0;
+    return { slope: 0, intercept: intercept2, r2: 0, stderr: 0, n, predict: () => intercept2 };
+  }
+  const mx = sx / n;
+  const my = sy / n;
+  let sxx = 0;
+  let sxy = 0;
+  let syy = 0;
+  for (let i = 0; i < len; i++) {
+    const xi = x[i];
+    const yi = y[i];
+    if (!Number.isFinite(xi) || !Number.isFinite(yi)) continue;
+    const dx = xi - mx;
+    const dy = yi - my;
+    sxx += dx * dx;
+    sxy += dx * dy;
+    syy += dy * dy;
+  }
+  const slope = sxx === 0 ? 0 : sxy / sxx;
+  const intercept = my - slope * mx;
+  const ssRes = Math.max(0, syy - slope * sxy);
+  const r22 = syy === 0 ? 1 : 1 - ssRes / syy;
+  const stderr = n > 2 ? Math.sqrt(ssRes / (n - 2)) : 0;
+  return { slope, intercept, r2: r22, stderr, n, predict: (v) => slope * v + intercept };
+}
+function linearTrend(x, y, opts = {}) {
+  const fit = linearRegression(x, y);
+  const points = Math.max(2, opts.points ?? 2);
+  let lo = Infinity;
+  let hi = -Infinity;
+  for (let i = 0; i < x.length; i++) {
+    const v = x[i];
+    if (!Number.isFinite(v)) continue;
+    if (v < lo) lo = v;
+    if (v > hi) hi = v;
+  }
+  if (!Number.isFinite(lo)) {
+    lo = 0;
+    hi = 1;
+  }
+  const gx = new Float64Array(points);
+  const gy = new Float64Array(points);
+  for (let i = 0; i < points; i++) {
+    gx[i] = lo + (hi - lo) * i / (points - 1);
+    gy[i] = fit.predict(gx[i]);
+  }
+  if (!opts.band) return { x: gx, y: gy };
+  const k = opts.band;
+  const lower = new Float64Array(points);
+  const upper = new Float64Array(points);
+  for (let i = 0; i < points; i++) {
+    lower[i] = gy[i] - k * fit.stderr;
+    upper[i] = gy[i] + k * fit.stderr;
+  }
+  return { x: gx, y: gy, lower, upper };
+}
+function loess(x, y, opts = {}) {
+  const len = Math.min(x.length, y.length);
+  const pairs = [];
+  for (let i = 0; i < len; i++) {
+    const xi = x[i];
+    const yi = y[i];
+    if (Number.isFinite(xi) && Number.isFinite(yi)) pairs.push([xi, yi]);
+  }
+  pairs.sort((a, b) => a[0] - b[0]);
+  const n = pairs.length;
+  const grid = Math.max(2, Math.min(opts.points ?? 100, Math.max(2, n)));
+  const gx = new Float64Array(grid);
+  const gy = new Float64Array(grid);
+  if (n === 0) return { x: gx, y: gy };
+  const bandwidth = Math.min(1, Math.max(2 / n, opts.bandwidth ?? 0.3));
+  const span = Math.max(2, Math.round(bandwidth * n));
+  const lo = pairs[0][0];
+  const hi = pairs[n - 1][0];
+  for (let g = 0; g < grid; g++) {
+    const x0 = grid === 1 ? lo : lo + (hi - lo) * g / (grid - 1);
+    gx[g] = x0;
+    const dists = pairs.map(([px], i) => [Math.abs(px - x0), i]);
+    dists.sort((a, b) => a[0] - b[0]);
+    const maxDist = dists[Math.min(span, n) - 1][0] || 1e-12;
+    let sw = 0, swx = 0, swy = 0, swxx = 0, swxy = 0;
+    for (let k = 0; k < Math.min(span, n); k++) {
+      const [d, idx] = dists[k];
+      const u = d / maxDist;
+      const w = u >= 1 ? 0 : (1 - u * u * u) ** 3;
+      if (w === 0) continue;
+      const [px, py] = pairs[idx];
+      sw += w;
+      swx += w * px;
+      swy += w * py;
+      swxx += w * px * px;
+      swxy += w * px * py;
+    }
+    if (sw === 0) {
+      gy[g] = pairs[Math.min(n - 1, g)][1];
+      continue;
+    }
+    const denom = sw * swxx - swx * swx;
+    if (Math.abs(denom) < 1e-12) {
+      gy[g] = swy / sw;
+      continue;
+    }
+    const slope = (sw * swxy - swx * swy) / denom;
+    const intercept = (swy - slope * swx) / sw;
+    gy[g] = slope * x0 + intercept;
+  }
+  return { x: gx, y: gy };
+}
+function ecdf(values) {
+  const xs = [];
+  for (let i = 0; i < values.length; i++) if (Number.isFinite(values[i])) xs.push(values[i]);
+  xs.sort((a, b) => a - b);
+  const n = xs.length;
+  const x = new Float64Array(n);
+  const y = new Float64Array(n);
+  for (let i = 0; i < n; i++) {
+    x[i] = xs[i];
+    y[i] = (i + 1) / n;
+  }
+  return { x, y };
+}
+function zscore(values) {
+  const n = values.length;
+  const out = new Float64Array(n);
+  let count = 0;
+  let mean = 0;
+  for (let i = 0; i < n; i++) if (Number.isFinite(values[i])) {
+    mean += values[i];
+    count++;
+  }
+  if (count === 0) return out;
+  mean /= count;
+  let varSum = 0;
+  for (let i = 0; i < n; i++) if (Number.isFinite(values[i])) varSum += (values[i] - mean) ** 2;
+  const sd = Math.sqrt(varSum / count) || 1;
+  for (let i = 0; i < n; i++) out[i] = Number.isFinite(values[i]) ? (values[i] - mean) / sd : values[i];
+  return out;
+}
+function correlation(a, b) {
+  const n = Math.min(a.length, b.length);
+  let ma = 0, mb = 0, count = 0;
+  for (let i = 0; i < n; i++) {
+    if (!Number.isFinite(a[i]) || !Number.isFinite(b[i])) continue;
+    ma += a[i];
+    mb += b[i];
+    count++;
+  }
+  if (count < 2) return 0;
+  ma /= count;
+  mb /= count;
+  let saa = 0, sbb = 0, sab = 0;
+  for (let i = 0; i < n; i++) {
+    if (!Number.isFinite(a[i]) || !Number.isFinite(b[i])) continue;
+    const da = a[i] - ma;
+    const db = b[i] - mb;
+    saa += da * da;
+    sbb += db * db;
+    sab += da * db;
+  }
+  const denom = Math.sqrt(saa * sbb);
+  return denom === 0 ? 0 : sab / denom;
+}
+function corrMatrix(columns) {
+  const k = columns.length;
+  const values = new Float64Array(k * k);
+  for (let i = 0; i < k; i++) {
+    values[i * k + i] = 1;
+    for (let j = i + 1; j < k; j++) {
+      const r = correlation(columns[i], columns[j]);
+      values[i * k + j] = r;
+      values[j * k + i] = r;
+    }
+  }
+  return { values, size: k };
+}
+
 // src/finance/indicators.ts
 function sma(values, period) {
   const n = values.length;
@@ -11060,6 +12171,137 @@ function fibRetracements(high, low, ratios = [0, 0.236, 0.382, 0.5, 0.618, 0.786
   const span = high - low;
   return ratios.map((r) => ({ ratio: r, price: high - span * r }));
 }
+function cci(high, low, close, period = 20) {
+  const n = Math.min(high.length, low.length, close.length);
+  const out = new Float64Array(n).fill(NaN);
+  if (period <= 0 || n < period) return out;
+  const tp = new Float64Array(n);
+  for (let i = 0; i < n; i++) tp[i] = (high[i] + low[i] + close[i]) / 3;
+  const avg = sma(tp, period);
+  for (let i = period - 1; i < n; i++) {
+    let dev = 0;
+    for (let k = i - period + 1; k <= i; k++) dev += Math.abs(tp[k] - avg[i]);
+    dev /= period;
+    out[i] = dev === 0 ? 0 : (tp[i] - avg[i]) / (0.015 * dev);
+  }
+  return out;
+}
+function mfi(high, low, close, volume, period = 14) {
+  const n = Math.min(high.length, low.length, close.length, volume.length);
+  const out = new Float64Array(n).fill(NaN);
+  if (period <= 0 || n <= period) return out;
+  const tp = new Float64Array(n);
+  for (let i = 0; i < n; i++) tp[i] = (high[i] + low[i] + close[i]) / 3;
+  for (let i = period; i < n; i++) {
+    let pos = 0;
+    let neg = 0;
+    for (let k = i - period + 1; k <= i; k++) {
+      const flow = tp[k] * volume[k];
+      if (tp[k] > tp[k - 1]) pos += flow;
+      else if (tp[k] < tp[k - 1]) neg += flow;
+    }
+    out[i] = neg === 0 ? 100 : 100 - 100 / (1 + pos / neg);
+  }
+  return out;
+}
+function williamsR(high, low, close, period = 14) {
+  const n = Math.min(high.length, low.length, close.length);
+  const out = new Float64Array(n).fill(NaN);
+  if (period <= 0 || n < period) return out;
+  for (let i = period - 1; i < n; i++) {
+    let hh = -Infinity;
+    let ll = Infinity;
+    for (let k = i - period + 1; k <= i; k++) {
+      if (high[k] > hh) hh = high[k];
+      if (low[k] < ll) ll = low[k];
+    }
+    const span = hh - ll;
+    out[i] = span === 0 ? 0 : (hh - close[i]) / span * -100;
+  }
+  return out;
+}
+function aroon(high, low, period = 25) {
+  const n = Math.min(high.length, low.length);
+  const up = new Float64Array(n).fill(NaN);
+  const down = new Float64Array(n).fill(NaN);
+  const oscillator = new Float64Array(n).fill(NaN);
+  if (period <= 0 || n <= period) return { up, down, oscillator };
+  for (let i = period; i < n; i++) {
+    let hi = -Infinity, lo = Infinity, hIdx = i, lIdx = i;
+    for (let k = i - period; k <= i; k++) {
+      if (high[k] >= hi) {
+        hi = high[k];
+        hIdx = k;
+      }
+      if (low[k] <= lo) {
+        lo = low[k];
+        lIdx = k;
+      }
+    }
+    up[i] = (period - (i - hIdx)) / period * 100;
+    down[i] = (period - (i - lIdx)) / period * 100;
+    oscillator[i] = up[i] - down[i];
+  }
+  return { up, down, oscillator };
+}
+function donchian(high, low, period = 20) {
+  const n = Math.min(high.length, low.length);
+  const upper = new Float64Array(n).fill(NaN);
+  const lower = new Float64Array(n).fill(NaN);
+  const middle = new Float64Array(n).fill(NaN);
+  if (period <= 0 || n < period) return { middle, upper, lower };
+  for (let i = period - 1; i < n; i++) {
+    let hh = -Infinity;
+    let ll = Infinity;
+    for (let k = i - period + 1; k <= i; k++) {
+      if (high[k] > hh) hh = high[k];
+      if (low[k] < ll) ll = low[k];
+    }
+    upper[i] = hh;
+    lower[i] = ll;
+    middle[i] = (hh + ll) / 2;
+  }
+  return { middle, upper, lower };
+}
+function parabolicSar(high, low, step = 0.02, max = 0.2) {
+  const n = Math.min(high.length, low.length);
+  const out = new Float64Array(n).fill(NaN);
+  if (n < 2) return out;
+  let rising = high[1] >= high[0];
+  let sar = rising ? low[0] : high[0];
+  let extreme = rising ? high[1] : low[1];
+  let accel = step;
+  out[1] = sar;
+  for (let i = 2; i < n; i++) {
+    sar += accel * (extreme - sar);
+    if (rising) sar = Math.min(sar, low[i - 1], low[i - 2]);
+    else sar = Math.max(sar, high[i - 1], high[i - 2]);
+    if (rising ? low[i] < sar : high[i] > sar) {
+      rising = !rising;
+      sar = extreme;
+      extreme = rising ? high[i] : low[i];
+      accel = step;
+    } else if (rising ? high[i] > extreme : low[i] < extreme) {
+      extreme = rising ? high[i] : low[i];
+      accel = Math.min(max, accel + step);
+    }
+    out[i] = sar;
+  }
+  return out;
+}
+function pivotPoints(high, low, close) {
+  const pivot = (high + low + close) / 3;
+  const range = high - low;
+  return {
+    pivot,
+    r1: 2 * pivot - low,
+    s1: 2 * pivot - high,
+    r2: pivot + range,
+    s2: pivot - range,
+    r3: high + 2 * (pivot - low),
+    s3: low - 2 * (high - pivot)
+  };
+}
 
 // src/finance/transforms.ts
 function heikinAshi(d) {
@@ -11203,6 +12445,72 @@ function depth(bids, asks) {
   }
   return { bidPrice, bidCum, askPrice, askCum };
 }
+function resampleOhlc(time, ohlc, bucketMs, volume) {
+  const n = Math.min(time.length, ohlc.open.length, ohlc.high.length, ohlc.low.length, ohlc.close.length);
+  const ts = [];
+  const o = [];
+  const h = [];
+  const l = [];
+  const c = [];
+  const v = [];
+  if (bucketMs <= 0 || n === 0) {
+    const empty = new Float64Array(0);
+    return { time: empty, open: empty, high: empty, low: empty, close: empty, ...volume ? { volume: empty } : {} };
+  }
+  let bucket = NaN;
+  for (let i = 0; i < n; i++) {
+    const b = Math.floor(time[i] / bucketMs) * bucketMs;
+    if (b !== bucket) {
+      bucket = b;
+      ts.push(b);
+      o.push(ohlc.open[i]);
+      h.push(ohlc.high[i]);
+      l.push(ohlc.low[i]);
+      c.push(ohlc.close[i]);
+      v.push(volume ? volume[i] : 0);
+      continue;
+    }
+    const k = ts.length - 1;
+    if (ohlc.high[i] > h[k]) h[k] = ohlc.high[i];
+    if (ohlc.low[i] < l[k]) l[k] = ohlc.low[i];
+    c[k] = ohlc.close[i];
+    if (volume) v[k] += volume[i];
+  }
+  return {
+    time: Float64Array.from(ts),
+    open: Float64Array.from(o),
+    high: Float64Array.from(h),
+    low: Float64Array.from(l),
+    close: Float64Array.from(c),
+    ...volume ? { volume: Float64Array.from(v) } : {}
+  };
+}
+function drawdown(equity) {
+  const n = equity.length;
+  const values = new Float64Array(n);
+  const peak = new Float64Array(n);
+  let high = -Infinity;
+  let highIdx = -1;
+  let maxDrawdown = 0;
+  let troughIndex = -1;
+  let peakIndex = -1;
+  for (let i = 0; i < n; i++) {
+    const e = equity[i];
+    if (e > high) {
+      high = e;
+      highIdx = i;
+    }
+    peak[i] = high;
+    const dd = high === 0 ? 0 : e / high - 1;
+    values[i] = dd;
+    if (dd < maxDrawdown) {
+      maxDrawdown = dd;
+      troughIndex = i;
+      peakIndex = highIdx;
+    }
+  }
+  return { values, peak, maxDrawdown, troughIndex, peakIndex };
+}
 
 // src/finance/charts.ts
 function addHeikinAshi(plot, opts) {
@@ -11295,14 +12603,44 @@ function addDepth(plot, opts) {
     })
   };
 }
-
-// src/data/csv.ts
-function tokenize(text, delim) {
-  const rows = [];
-  let row = [];
-  let field = "";
-  let inQuotes = false;
-  for (let i = 0; i < text.length; i++) {
+function addDrawdown(plot, opts) {
+  const stats = drawdown(opts.equity);
+  const n = stats.values.length;
+  const scale = opts.percent === false ? 1 : 100;
+  const x = opts.x ?? Float64Array.from({ length: n }, (_, i) => i);
+  const y = Float64Array.from(stats.values, (v) => v * scale);
+  const color = opts.color ?? "#ef4444";
+  const area2 = plot.addArea({
+    x,
+    y,
+    base: 0,
+    color,
+    name: opts.name ?? `drawdown \xB7 max ${(stats.maxDrawdown * scale).toFixed(opts.percent === false ? 3 : 1)}${opts.percent === false ? "" : "%"}`,
+    yAxis: opts.yAxis,
+    renderType: opts.renderType
+  });
+  if ((opts.markMax ?? true) && stats.troughIndex >= 0) {
+    const tx = x[stats.troughIndex];
+    plot.addAnnotation({
+      type: "span",
+      dim: "x",
+      value: tx,
+      color,
+      width: 1,
+      dash: [4, 4],
+      yAxis: opts.yAxis
+    });
+  }
+  return { area: area2, stats };
+}
+
+// src/data/csv.ts
+function tokenize(text, delim) {
+  const rows = [];
+  let row = [];
+  let field = "";
+  let inQuotes = false;
+  for (let i = 0; i < text.length; i++) {
     const c = text[i];
     if (inQuotes) {
       if (c === '"') {
@@ -11550,6 +12888,154 @@ function emaSmooth(values, weight = 0.6) {
   }
   return out;
 }
+function mse(yTrue, yPred) {
+  const n = Math.min(yTrue.length, yPred.length);
+  if (n === 0) return NaN;
+  let acc = 0;
+  for (let i = 0; i < n; i++) acc += (yTrue[i] - yPred[i]) ** 2;
+  return acc / n;
+}
+function rmse(yTrue, yPred) {
+  return Math.sqrt(mse(yTrue, yPred));
+}
+function mae(yTrue, yPred) {
+  const n = Math.min(yTrue.length, yPred.length);
+  if (n === 0) return NaN;
+  let acc = 0;
+  for (let i = 0; i < n; i++) acc += Math.abs(yTrue[i] - yPred[i]);
+  return acc / n;
+}
+function r2(yTrue, yPred) {
+  const n = Math.min(yTrue.length, yPred.length);
+  if (n === 0) return NaN;
+  let mean = 0;
+  for (let i = 0; i < n; i++) mean += yTrue[i];
+  mean /= n;
+  let ssRes = 0;
+  let ssTot = 0;
+  for (let i = 0; i < n; i++) {
+    ssRes += (yTrue[i] - yPred[i]) ** 2;
+    ssTot += (yTrue[i] - mean) ** 2;
+  }
+  return ssTot === 0 ? ssRes === 0 ? 1 : 0 : 1 - ssRes / ssTot;
+}
+function logLoss(probs, labels, eps = 1e-15) {
+  const n = Math.min(probs.length, labels.length);
+  if (n === 0) return NaN;
+  let acc = 0;
+  for (let i = 0; i < n; i++) {
+    const p = Math.min(1 - eps, Math.max(eps, probs[i]));
+    acc += labels[i] > 0 ? -Math.log(p) : -Math.log(1 - p);
+  }
+  return acc / n;
+}
+function brierScore(probs, labels) {
+  const n = Math.min(probs.length, labels.length);
+  if (n === 0) return NaN;
+  let acc = 0;
+  for (let i = 0; i < n; i++) acc += (probs[i] - (labels[i] > 0 ? 1 : 0)) ** 2;
+  return acc / n;
+}
+function classificationReport(yTrue, yPred, classes) {
+  const n = Math.min(yTrue.length, yPred.length);
+  let k = classes ?? 0;
+  if (!classes) for (let i = 0; i < n; i++) k = Math.max(k, yTrue[i] + 1, yPred[i] + 1);
+  k = Math.max(0, Math.floor(k));
+  const tp = new Float64Array(k);
+  const fp = new Float64Array(k);
+  const fn = new Float64Array(k);
+  const support = new Float64Array(k);
+  let correct = 0;
+  for (let i = 0; i < n; i++) {
+    const t = yTrue[i];
+    const p = yPred[i];
+    if (t >= 0 && t < k) support[t] += 1;
+    if (t === p) {
+      correct++;
+      if (t >= 0 && t < k) tp[t] += 1;
+    } else {
+      if (p >= 0 && p < k) fp[p] += 1;
+      if (t >= 0 && t < k) fn[t] += 1;
+    }
+  }
+  const perClass = [];
+  for (let c = 0; c < k; c++) {
+    const precision = tp[c] + fp[c] === 0 ? 0 : tp[c] / (tp[c] + fp[c]);
+    const recall = tp[c] + fn[c] === 0 ? 0 : tp[c] / (tp[c] + fn[c]);
+    const f1 = precision + recall === 0 ? 0 : 2 * precision * recall / (precision + recall);
+    perClass.push({ label: c, precision, recall, f1, support: support[c] });
+  }
+  const avg = (pick, weights) => {
+    if (k === 0) return 0;
+    if (!weights) {
+      let acc2 = 0;
+      for (const s of perClass) acc2 += pick(s);
+      return acc2 / k;
+    }
+    let acc = 0;
+    let total = 0;
+    for (let c = 0; c < k; c++) {
+      acc += pick(perClass[c]) * weights[c];
+      total += weights[c];
+    }
+    return total === 0 ? 0 : acc / total;
+  };
+  return {
+    perClass,
+    accuracy: n === 0 ? 0 : correct / n,
+    macro: { precision: avg((s) => s.precision), recall: avg((s) => s.recall), f1: avg((s) => s.f1) },
+    weighted: {
+      precision: avg((s) => s.precision, support),
+      recall: avg((s) => s.recall, support),
+      f1: avg((s) => s.f1, support)
+    }
+  };
+}
+function liftCurve(scores, labels) {
+  const n = Math.min(scores.length, labels.length);
+  const order = Array.from({ length: n }, (_, i) => i).sort((a, b) => scores[b] - scores[a]);
+  let positives = 0;
+  for (let i = 0; i < n; i++) if (labels[i] > 0) positives++;
+  const fraction = new Float64Array(n + 1);
+  const gain = new Float64Array(n + 1);
+  const lift = new Float64Array(n + 1);
+  let hits = 0;
+  for (let i = 0; i < n; i++) {
+    if (labels[order[i]] > 0) hits++;
+    const f = (i + 1) / n;
+    fraction[i + 1] = f;
+    gain[i + 1] = positives === 0 ? 0 : hits / positives;
+    lift[i + 1] = f === 0 ? 0 : gain[i + 1] / f;
+  }
+  lift[0] = n === 0 ? 0 : lift[1];
+  return { fraction, gain, lift, positives };
+}
+function rocCurveOvR(scores, labels, classes) {
+  const n = labels.length;
+  const perClass = [];
+  let macro = 0;
+  const pooledScores = new Float64Array(n * classes);
+  const pooledLabels = new Float64Array(n * classes);
+  for (let c = 0; c < classes; c++) {
+    const s = new Float64Array(n);
+    const l = new Float64Array(n);
+    for (let i = 0; i < n; i++) {
+      s[i] = scores[i * classes + c];
+      l[i] = labels[i] === c ? 1 : 0;
+      pooledScores[c * n + i] = s[i];
+      pooledLabels[c * n + i] = l[i];
+    }
+    const roc = rocCurve(s, l);
+    perClass.push({ label: c, fpr: roc.fpr, tpr: roc.tpr, auc: roc.auc });
+    macro += roc.auc;
+  }
+  const micro = rocCurve(pooledScores, pooledLabels);
+  return {
+    perClass,
+    macroAuc: classes === 0 ? 0 : macro / classes,
+    microAuc: micro.auc
+  };
+}
 
 // src/ml/reduce.ts
 function standardize(data, n, d) {
@@ -11645,19 +13131,72 @@ function normalize3(vec, d) {
   return norm2;
 }
 
+// src/color/palettes.ts
+var PALETTES = {
+  tableau10: [
+    "#4e79a7",
+    "#f28e2b",
+    "#e15759",
+    "#76b7b2",
+    "#59a14f",
+    "#edc948",
+    "#b07aa1",
+    "#ff9da7",
+    "#9c755f",
+    "#bab0ac"
+  ],
+  "okabe-ito": [
+    "#0072b2",
+    "#e69f00",
+    "#009e73",
+    "#cc79a7",
+    "#56b4e9",
+    "#d55e00",
+    "#f0e442",
+    "#000000"
+  ],
+  set2: [
+    "#66c2a5",
+    "#fc8d62",
+    "#8da0cb",
+    "#e78ac3",
+    "#a6d854",
+    "#ffd92f",
+    "#e5c494",
+    "#b3b3b3"
+  ],
+  bright: [
+    "#60a5fa",
+    "#f472b6",
+    "#34d399",
+    "#fbbf24",
+    "#a78bfa",
+    "#22d3ee",
+    "#fb923c",
+    "#f87171",
+    "#c084fc",
+    "#4ade80"
+  ]
+};
+var DEFAULT_PALETTE = PALETTES.tableau10;
+function registerPalette(name, colors) {
+  if (colors.length === 0) throw new Error(`Palette "${name}" needs at least one colour`);
+  PALETTES[name] = colors;
+}
+function paletteNames() {
+  return Object.keys(PALETTES);
+}
+function palette(spec = "tableau10") {
+  if (typeof spec !== "string") return spec.length ? spec : DEFAULT_PALETTE;
+  return PALETTES[spec] ?? DEFAULT_PALETTE;
+}
+function paletteColor(index, spec = "tableau10") {
+  const p = palette(spec);
+  return p[(index % p.length + p.length) % p.length];
+}
+
 // src/ml/charts.ts
-var ML_PALETTE = [
-  "#4e79a7",
-  "#f28e2b",
-  "#e15759",
-  "#76b7b2",
-  "#59a14f",
-  "#edc948",
-  "#b07aa1",
-  "#ff9da7",
-  "#9c755f",
-  "#bab0ac"
-];
+var ML_PALETTE = DEFAULT_PALETTE;
 function addConfusionMatrix(plot, opts) {
   const cm = confusionMatrix(opts.yTrue, opts.yPred, opts.classes);
   const C = cm.classes;
@@ -11753,7 +13292,7 @@ function addEmbedding(plot, opts) {
       })]
     };
   }
-  return { layers: [plot.addScatter({ x: opts.x, y: opts.y, size, color: (opts.palette ?? ML_PALETTE)[0], name: opts.name, labels: opts.text, renderType: opts.renderType })] };
+  return { layers: [plot.addScatter({ x: opts.x, y: opts.y, size, color: palette(opts.palette ?? ML_PALETTE)[0], name: opts.name, labels: opts.text, renderType: opts.renderType })] };
 }
 function addDecisionBoundary(plot, opts) {
   const heatmap = plot.addHeatmap({
@@ -11868,14 +13407,14 @@ function addAttentionMap(plot, opts) {
   return { heatmap, queries: Q, keys: K };
 }
 function addTrainingCurves(plot, opts) {
-  const palette = opts.palette ?? ML_PALETTE;
+  const palette2 = palette(opts.palette ?? ML_PALETTE);
   const smoothing = opts.smoothing ?? 0.6;
   const width = opts.width ?? 2;
   const raw = [], smoothed = [];
   opts.series.forEach((s, i) => {
     const n = s.y.length;
     const x = s.x ?? Float64Array.from({ length: n }, (_, j) => j);
-    const color = s.color ?? palette[i % palette.length];
+    const color = s.color ?? palette2[i % palette2.length];
     if (smoothing > 0) {
       if (opts.showRaw ?? true) raw.push(plot.addLine({ x, y: s.y, color: withAlpha(color, 0.25), width: 1, renderType: opts.renderType }));
       smoothed.push(plot.addLine({ x, y: emaSmooth(s.y, smoothing), color, width, name: s.name, renderType: opts.renderType }));
@@ -11912,7 +13451,7 @@ function addRidgeline(plot, opts) {
     hi = (hi || 0) + 1;
   }
   const points = opts.points ?? 96;
-  const palette = opts.palette ?? ML_PALETTE;
+  const palette2 = palette(opts.palette ?? ML_PALETTE);
   const height = 1 + Math.max(0, opts.overlap ?? 1);
   const areas = [], lines = [];
   g.forEach((grp, i) => {
@@ -11922,7 +13461,7 @@ function addRidgeline(plot, opts) {
     const scale = peak > 0 ? height / peak : 0;
     const y = new Float64Array(dens.ys.length);
     for (let j = 0; j < y.length; j++) y[j] = i + dens.ys[j] * scale;
-    const color = palette[i % palette.length];
+    const color = palette2[i % palette2.length];
     if (opts.fill ?? true) areas.push(plot.addArea({ x: dens.xs, y, base: i, color: withAlpha(color, 0.55) }));
     lines.push(plot.addLine({ x: dens.xs, y, color, width: 1.5 }));
     if (grp.label) plot.addAnnotation({ type: "label", x: lo, y: i + 0.05, text: `${grp.label} `, align: "right", color: "#e5e7eb" });
@@ -11961,9 +13500,10 @@ function beeswarmLayout(x, opts = {}) {
   }
   return y;
 }
-function scatterByClass(plot, x, y, labels, classNames, palette = ML_PALETTE, size = 4, text, renderType) {
+function scatterByClass(plot, x, y, labels, classNames, paletteSpec = ML_PALETTE, size = 4, text, renderType) {
+  const palette2 = palette(paletteSpec);
   const n = Math.min(x.length, y.length);
-  if (!labels) return [plot.addScatter({ x, y, size, color: palette[0], labels: text, renderType })];
+  if (!labels) return [plot.addScatter({ x, y, size, color: palette2[0], labels: text, renderType })];
   const keys = [];
   const seen = /* @__PURE__ */ new Set();
   for (let i = 0; i < n; i++) {
@@ -11985,7 +13525,7 @@ function scatterByClass(plot, x, y, labels, classNames, palette = ML_PALETTE, si
       if (text) st.push(String(text[i]));
     }
     const name = classNames && typeof key === "number" ? classNames[key] ?? String(key) : String(key);
-    layers.push(plot.addScatter({ x: sx, y: sy, size, color: palette[ci % palette.length], name, labels: text ? st : void 0, renderType }));
+    layers.push(plot.addScatter({ x: sx, y: sy, size, color: palette2[ci % palette2.length], name, labels: text ? st : void 0, renderType }));
   });
   return layers;
 }
@@ -11997,21 +13537,968 @@ function withAlpha(color, alpha) {
   }
   return color;
 }
+function addPredVsActual(plot, opts) {
+  const n = Math.min(opts.yTrue.length, opts.yPred.length);
+  let lo = Infinity;
+  let hi = -Infinity;
+  for (let i = 0; i < n; i++) {
+    lo = Math.min(lo, opts.yTrue[i], opts.yPred[i]);
+    hi = Math.max(hi, opts.yTrue[i], opts.yPred[i]);
+  }
+  if (!Number.isFinite(lo)) {
+    lo = 0;
+    hi = 1;
+  }
+  const reference = plot.addLine({
+    x: Float64Array.from([lo, hi]),
+    y: Float64Array.from([lo, hi]),
+    color: opts.referenceColor ?? "#64748b",
+    width: 1.5,
+    dash: [6, 4]
+  });
+  const points = plot.addScatter({
+    x: opts.yTrue,
+    y: opts.yPred,
+    size: opts.size ?? 4,
+    color: opts.color ?? ML_PALETTE[0],
+    name: opts.name ?? `predictions \xB7 R\xB2=${r2(opts.yTrue, opts.yPred).toFixed(3)}`,
+    renderType: opts.renderType
+  });
+  return { points, reference, r2: r2(opts.yTrue, opts.yPred) };
+}
+function addResiduals(plot, opts) {
+  const n = Math.min(opts.yTrue.length, opts.yPred.length);
+  const residuals = new Float64Array(n);
+  const xs = new Float64Array(n);
+  const byIndex = opts.against === "index";
+  let lo = Infinity;
+  let hi = -Infinity;
+  for (let i = 0; i < n; i++) {
+    residuals[i] = opts.yTrue[i] - opts.yPred[i];
+    xs[i] = byIndex ? i : opts.yPred[i];
+    if (xs[i] < lo) lo = xs[i];
+    if (xs[i] > hi) hi = xs[i];
+  }
+  if (!Number.isFinite(lo)) {
+    lo = 0;
+    hi = 1;
+  }
+  const zero = plot.addLine({
+    x: Float64Array.from([lo, hi]),
+    y: Float64Array.from([0, 0]),
+    color: "#64748b",
+    width: 1.5,
+    dash: [6, 4]
+  });
+  const points = plot.addScatter({
+    x: xs,
+    y: residuals,
+    size: opts.size ?? 4,
+    color: opts.color ?? ML_PALETTE[2],
+    name: opts.name ?? "residuals",
+    renderType: opts.renderType
+  });
+  return { points, zero, residuals };
+}
+function addLiftCurve(plot, opts) {
+  const curve = liftCurve(opts.scores, opts.labels);
+  const gainMode = (opts.mode ?? "gain") === "gain";
+  const baseline = plot.addLine({
+    x: Float64Array.from([0, 1]),
+    y: gainMode ? Float64Array.from([0, 1]) : Float64Array.from([1, 1]),
+    color: opts.baselineColor ?? "#64748b",
+    width: 1.5,
+    dash: [6, 4],
+    name: "random"
+  });
+  const line = plot.addLine({
+    x: curve.fraction,
+    y: gainMode ? curve.gain : curve.lift,
+    color: opts.color ?? ML_PALETTE[0],
+    width: opts.width ?? 2,
+    name: opts.name ?? (gainMode ? "cumulative gain" : "lift"),
+    renderType: opts.renderType
+  });
+  return { line, baseline, positives: curve.positives };
+}
+function addLearningCurve(plot, opts) {
+  const trainColor = opts.trainColor ?? ML_PALETTE[0];
+  const valColor = opts.validationColor ?? ML_PALETTE[1];
+  const bands = [];
+  const addBand = (mean, std, color) => {
+    if (!std) return;
+    const n = Math.min(mean.length, std.length);
+    const upper = new Float64Array(n);
+    const lower = new Float64Array(n);
+    for (let i = 0; i < n; i++) {
+      upper[i] = mean[i] + std[i];
+      lower[i] = mean[i] - std[i];
+    }
+    bands.push(plot.addArea({ x: opts.sizes, y: upper, base: lower, color: `${color}33`, renderType: opts.renderType }));
+  };
+  addBand(opts.train, opts.trainStd, trainColor);
+  addBand(opts.validation, opts.validationStd, valColor);
+  const train = plot.addLine({
+    x: opts.sizes,
+    y: opts.train,
+    color: trainColor,
+    width: opts.width ?? 2,
+    name: "train",
+    renderType: opts.renderType
+  });
+  const validation = plot.addLine({
+    x: opts.sizes,
+    y: opts.validation,
+    color: valColor,
+    width: opts.width ?? 2,
+    name: "validation",
+    renderType: opts.renderType
+  });
+  return { train, validation, bands };
+}
+
+// src/ml/model.ts
+var LAYER_COLORS = {
+  input: "#94a3b8",
+  conv: "#60a5fa",
+  linear: "#a78bfa",
+  norm: "#34d399",
+  activation: "#fbbf24",
+  pool: "#22d3ee",
+  dropout: "#64748b",
+  attention: "#f472b6",
+  embedding: "#c084fc",
+  recurrent: "#fb923c",
+  reshape: "#7dd3fc",
+  merge: "#f87171",
+  output: "#94a3b8",
+  other: "#8ba3c7"
+};
+var CATEGORY_RULES = [
+  ["input", ["input", "placeholder"]],
+  ["output", ["output"]],
+  ["conv", ["conv"]],
+  ["attention", ["attention", "attn", "multihead", "mha"]],
+  ["recurrent", ["lstm", "gru", "rnn"]],
+  ["embedding", ["embed"]],
+  ["norm", ["norm"]],
+  ["pool", ["pool", "upsample", "interpolate", "resize"]],
+  ["dropout", ["dropout"]],
+  ["linear", ["linear", "dense", "gemm", "matmul", "fc"]],
+  ["activation", [
+    "relu",
+    "gelu",
+    "silu",
+    "swish",
+    "sigmoid",
+    "tanh",
+    "softmax",
+    "softplus",
+    "elu",
+    "mish",
+    "hardswish",
+    "glu",
+    "activation"
+  ]],
+  ["merge", ["concat", "cat", "add", "mul", "sum", "residual"]],
+  ["reshape", ["flatten", "reshape", "view", "permute", "transpose", "squeeze"]]
+];
+function layerCategory(type) {
+  const t = type.toLowerCase();
+  for (const [category, keys] of CATEGORY_RULES) {
+    for (const key of keys) if (t.includes(key)) return category;
+  }
+  return "other";
+}
+function formatCount(n) {
+  const abs = Math.abs(n);
+  if (abs < 1e3) return String(Math.round(n));
+  const units = [[1e9, "B"], [1e6, "M"], [1e3, "K"]];
+  for (const [scale, suffix] of units) {
+    if (abs >= scale) {
+      const v = n / scale;
+      return `${Math.abs(v) < 10 ? v.toFixed(1) : Math.round(v)}${suffix}`;
+    }
+  }
+  return String(n);
+}
+function formatShape(shape) {
+  return shape && shape.length ? shape.join("\xD7") : "";
+}
+function uniqueId(base, seen) {
+  if (!seen.has(base)) {
+    seen.add(base);
+    return base;
+  }
+  let i = 1;
+  while (seen.has(`${base}_${i}`)) i++;
+  const id = `${base}_${i}`;
+  seen.add(id);
+  return id;
+}
+function sequentialModel(layers, name) {
+  const seen = /* @__PURE__ */ new Set();
+  const nodes = layers.map((l, i) => ({
+    ...l,
+    id: uniqueId(l.id ?? l.name ?? `${l.type}_${i}`, seen)
+  }));
+  const edges = [];
+  for (let i = 1; i < nodes.length; i++) edges.push({ from: nodes[i - 1].id, to: nodes[i].id });
+  return { name, nodes, edges };
+}
+function shortTarget(target) {
+  const fn = /<built-in (?:function|method) ([^>]+)>/.exec(target);
+  const raw = fn ? fn[1] : target;
+  const parts = raw.split(".");
+  return parts[parts.length - 1].trim() || raw;
+}
+function modelGraphFromTorchFx(nodes, opts = {}) {
+  const skip = new Set(opts.skipOps ?? ["get_attr"]);
+  const kept = nodes.filter((n) => !skip.has(n.op));
+  const known = new Set(kept.map((n) => n.name));
+  const out = kept.map((n) => ({
+    id: n.name,
+    name: n.op === "call_module" ? n.target ?? n.name : n.name,
+    type: n.moduleType ?? (n.target ? shortTarget(n.target) : n.op),
+    ...n.shape ? { shape: n.shape } : {},
+    ...n.params != null ? { params: n.params } : {},
+    ...n.flops != null ? { flops: n.flops } : {}
+  }));
+  const edges = [];
+  for (const n of kept) {
+    for (const a of n.args ?? []) if (known.has(a)) edges.push({ from: a, to: n.name });
+  }
+  return { name: opts.name, nodes: out, edges };
+}
+function modelGraphFromOnnx(graph, opts = {}) {
+  const initializers = new Set((graph.initializer ?? []).map((i) => i.name));
+  const shapes = opts.shapes ?? {};
+  const paramCounts = opts.paramCounts ?? {};
+  const nodes = [];
+  const seen = /* @__PURE__ */ new Set();
+  const producer = /* @__PURE__ */ new Map();
+  for (const gi of graph.input ?? []) {
+    if (initializers.has(gi.name)) continue;
+    const id = uniqueId(gi.name, seen);
+    nodes.push({
+      id,
+      name: gi.name,
+      type: "Input",
+      ...shapes[gi.name] ? { shape: shapes[gi.name] } : {}
+    });
+    producer.set(gi.name, id);
+  }
+  for (let i = 0; i < graph.node.length; i++) {
+    const n = graph.node[i];
+    const id = uniqueId(n.name || `${n.opType}_${i}`, seen);
+    const outName = n.output?.[0];
+    let params = 0;
+    for (const inp of n.input ?? []) if (initializers.has(inp)) params += paramCounts[inp] ?? 0;
+    nodes.push({
+      id,
+      name: n.name || n.opType,
+      type: n.opType,
+      ...outName && shapes[outName] ? { shape: shapes[outName] } : {},
+      ...params > 0 ? { params } : {}
+    });
+    for (const o of n.output ?? []) producer.set(o, id);
+  }
+  const edges = [];
+  for (let i = 0; i < graph.node.length; i++) {
+    const n = graph.node[i];
+    const to = producer.get(n.output?.[0] ?? "");
+    if (!to) continue;
+    for (const inp of n.input ?? []) {
+      if (initializers.has(inp)) continue;
+      const from = producer.get(inp);
+      if (from && from !== to) edges.push({ from, to });
+    }
+  }
+  return { name: opts.name ?? graph.name, nodes, edges };
+}
+function collectNames(value, known, out) {
+  if (typeof value === "string") {
+    if (known.has(value)) out.add(value);
+    return;
+  }
+  if (Array.isArray(value)) {
+    for (const v of value) collectNames(v, known, out);
+    return;
+  }
+  if (value && typeof value === "object") {
+    for (const v of Object.values(value)) collectNames(v, known, out);
+  }
+}
+function modelGraphFromKeras(model, opts = {}) {
+  const layers = model.config?.layers ?? model.layers ?? [];
+  const shapes = opts.shapes ?? {};
+  const params = opts.params ?? {};
+  const seen = /* @__PURE__ */ new Set();
+  const names = layers.map(
+    (l, i) => uniqueId(l.config?.name ?? l.name ?? `${l.class_name}_${i}`, seen)
+  );
+  const known = new Set(names);
+  const nodes = layers.map((l, i) => {
+    const id = names[i];
+    const batchShape = l.config?.batch_input_shape ?? l.config?.batch_shape;
+    const inferred = batchShape ? batchShape.slice(1).filter((v) => typeof v === "number") : void 0;
+    const shape = shapes[id] ?? (inferred && inferred.length ? inferred : void 0);
+    return {
+      id,
+      name: id,
+      type: l.class_name,
+      ...shape ? { shape } : {},
+      ...params[id] != null ? { params: params[id] } : {}
+    };
+  });
+  const inbound = layers.map((l) => {
+    const out = /* @__PURE__ */ new Set();
+    collectNames(l.inbound_nodes, known, out);
+    return out;
+  });
+  const wired = inbound.some((s) => s.size > 0);
+  const edges = [];
+  if (wired) {
+    for (let i = 0; i < layers.length; i++) {
+      for (const from of inbound[i]) if (from !== names[i]) edges.push({ from, to: names[i] });
+    }
+  } else {
+    for (let i = 1; i < names.length; i++) edges.push({ from: names[i - 1], to: names[i] });
+  }
+  return { name: opts.name ?? model.config?.name, nodes, edges };
+}
+function modelGraphFromSklearn(root, opts = {}) {
+  const nodes = [];
+  const edges = [];
+  const seen = /* @__PURE__ */ new Set();
+  const walk = (step, path) => {
+    const id = uniqueId(path ? `${path}.${step.name}` : step.name, seen);
+    if (!step.steps || step.steps.length === 0) {
+      const label = step.columns?.length ? `${step.name} [${step.columns.join(", ")}]` : step.name;
+      nodes.push({
+        id,
+        name: label,
+        type: step.type,
+        ...step.shape ? { shape: step.shape } : {},
+        ...step.params != null ? { params: step.params } : {},
+        ...path ? { group: path } : {}
+      });
+      return { entries: [id], exits: [id] };
+    }
+    const childPath = path ? `${path}.${step.name}` : step.name;
+    const children = step.steps.map((child) => walk(child, childPath));
+    if ((step.mode ?? "sequential") === "parallel") {
+      return {
+        entries: children.flatMap((c) => c.entries),
+        exits: children.flatMap((c) => c.exits)
+      };
+    }
+    for (let i = 1; i < children.length; i++) {
+      for (const from of children[i - 1].exits) {
+        for (const to of children[i].entries) edges.push({ from, to });
+      }
+    }
+    return { entries: children[0].entries, exits: children[children.length - 1].exits };
+  };
+  walk(root, "");
+  return { name: opts.name ?? root.name, nodes, edges };
+}
+function mlpModel(layerSizes, opts = {}) {
+  const activation = opts.activation ?? "ReLU";
+  const layers = [];
+  if (layerSizes.length === 0) return { name: opts.name, nodes: [], edges: [] };
+  layers.push({ id: "input", name: "input", type: "Input", shape: [layerSizes[0]] });
+  for (let i = 1; i < layerSizes.length; i++) {
+    const nIn = layerSizes[i - 1];
+    const nOut = layerSizes[i];
+    const last = i === layerSizes.length - 1;
+    layers.push({
+      id: `dense_${i}`,
+      name: last ? "output" : `dense_${i}`,
+      type: "Linear",
+      shape: [nOut],
+      params: nIn * nOut + nOut
+    });
+    const act = last ? opts.outputActivation : activation;
+    if (act) layers.push({ id: `${act.toLowerCase()}_${i}`, type: act, shape: [nOut] });
+  }
+  return sequentialModel(layers, opts.name);
+}
+function assignRanks(n, outAdj, inAdj) {
+  const rank = new Array(n).fill(0);
+  const indeg = new Array(n).fill(0);
+  for (let i = 0; i < n; i++) indeg[i] = inAdj[i].length;
+  const queue = [];
+  for (let i = 0; i < n; i++) if (indeg[i] === 0) queue.push(i);
+  const visited = new Uint8Array(n);
+  let head = 0;
+  while (head < queue.length) {
+    const u = queue[head++];
+    visited[u] = 1;
+    for (const v of outAdj[u]) {
+      if (rank[u] + 1 > rank[v]) rank[v] = rank[u] + 1;
+      if (--indeg[v] === 0) queue.push(v);
+    }
+  }
+  for (let i = 0; i < n; i++) {
+    if (visited[i]) continue;
+    let r = 0;
+    for (const p of inAdj[i]) if (visited[p] && rank[p] + 1 > r) r = rank[p] + 1;
+    rank[i] = r;
+    visited[i] = 1;
+  }
+  return rank;
+}
+function orderRanks(byRank, outAdj, inAdj, sweeps) {
+  const pos = /* @__PURE__ */ new Map();
+  const reindex = () => {
+    for (const rankNodes of byRank) {
+      for (let i = 0; i < rankNodes.length; i++) pos.set(rankNodes[i], i);
+    }
+  };
+  const barycenter = (v, neighbours) => {
+    let sum = 0;
+    let count = 0;
+    for (const u of neighbours) {
+      const p = pos.get(u);
+      if (p != null) {
+        sum += p;
+        count++;
+      }
+    }
+    return count === 0 ? pos.get(v) : sum / count;
+  };
+  reindex();
+  for (let s = 0; s < sweeps; s++) {
+    const down = s % 2 === 0;
+    const order = down ? byRank.map((_, i) => i).slice(1) : byRank.map((_, i) => i).slice(0, -1).reverse();
+    for (const r of order) {
+      const rankNodes = byRank[r];
+      const keys = /* @__PURE__ */ new Map();
+      for (const v of rankNodes) keys.set(v, barycenter(v, down ? inAdj[v] : outAdj[v]));
+      rankNodes.sort((a, b) => keys.get(a) - keys.get(b) || pos.get(a) - pos.get(b));
+      reindex();
+    }
+  }
+}
+function modelLayout(graph, opts = {}) {
+  const vertical = (opts.direction ?? "vertical") === "vertical";
+  const nodeWidth = opts.nodeWidth ?? 2.6;
+  const nodeHeight = opts.nodeHeight ?? 0.9;
+  const rankGap = opts.rankGap ?? 0.7;
+  const nodeGap = opts.nodeGap ?? 0.6;
+  const sweeps = opts.sweeps ?? 4;
+  const [minScale, maxScale] = opts.sizeRange ?? [0.55, 1.5];
+  const n = graph.nodes.length;
+  if (n === 0) {
+    return { nodes: [], edges: [], extent: { x: [0, 1], y: [0, 1] }, ranks: 0 };
+  }
+  const index = /* @__PURE__ */ new Map();
+  for (let i = 0; i < n; i++) index.set(graph.nodes[i].id, i);
+  const outAdj = Array.from({ length: n }, () => []);
+  const inAdj = Array.from({ length: n }, () => []);
+  const edgeList = [];
+  for (const e of graph.edges) {
+    const from = index.get(e.from);
+    const to = index.get(e.to);
+    if (from == null || to == null || from === to) continue;
+    outAdj[from].push(to);
+    inAdj[to].push(from);
+    edgeList.push({ edge: e, from, to });
+  }
+  const rank = assignRanks(n, outAdj, inAdj);
+  const ranks = Math.max(...rank) + 1;
+  const byRank = Array.from({ length: ranks }, () => []);
+  for (let i = 0; i < n; i++) byRank[rank[i]].push(i);
+  orderRanks(byRank, outAdj, inAdj, sweeps);
+  const metric = opts.sizeBy && opts.sizeBy !== "none" ? graph.nodes.map((node) => Math.max(0, (opts.sizeBy === "flops" ? node.flops : node.params) ?? 0)) : null;
+  let metricMax = 0;
+  if (metric) {
+    for (const v of metric) if (v > metricMax) metricMax = v;
+  }
+  const scaleOf = (i) => {
+    if (!metric || metricMax <= 0) return 1;
+    const t = Math.log1p(metric[i]) / Math.log1p(metricMax);
+    return minScale + (maxScale - minScale) * t;
+  };
+  const boxes = new Array(n);
+  const rankStep = (vertical ? nodeHeight : nodeWidth) + rankGap;
+  for (let r = 0; r < ranks; r++) {
+    const rankNodes = byRank[r];
+    const sizes = rankNodes.map((i) => (vertical ? nodeWidth : nodeHeight) * scaleOf(i));
+    let total = 0;
+    for (const s of sizes) total += s;
+    total += nodeGap * Math.max(0, rankNodes.length - 1);
+    let cursor = -total / 2;
+    for (let k = 0; k < rankNodes.length; k++) {
+      const i = rankNodes[k];
+      const across = sizes[k];
+      const center = cursor + across / 2;
+      cursor += across + nodeGap;
+      const node = graph.nodes[i];
+      const category = layerCategory(node.type);
+      boxes[i] = {
+        node,
+        category,
+        color: LAYER_COLORS[category],
+        x: vertical ? center : r * rankStep,
+        y: vertical ? -r * rankStep : -center,
+        w: vertical ? across : nodeWidth,
+        h: vertical ? nodeHeight : across,
+        rank: r,
+        order: k
+      };
+    }
+  }
+  const rankEdge = new Array(ranks).fill(vertical ? -Infinity : Infinity);
+  for (const b of boxes) {
+    rankEdge[b.rank] = vertical ? Math.max(rankEdge[b.rank], b.x + b.w / 2) : Math.min(rankEdge[b.rank], b.y - b.h / 2);
+  }
+  const lead = rankGap * 0.4;
+  const laneFor = (ra, rb) => {
+    const lo = Math.min(ra, rb);
+    const hi = Math.max(ra, rb);
+    let lane = rankEdge[lo];
+    for (let r = lo + 1; r <= hi; r++) {
+      lane = vertical ? Math.max(lane, rankEdge[r]) : Math.min(lane, rankEdge[r]);
+    }
+    return lane + (vertical ? 1 : -1) * nodeGap * 0.8;
+  };
+  const edges = [];
+  for (const { edge, from, to } of edgeList) {
+    const a = boxes[from];
+    const b = boxes[to];
+    const span = b.rank - a.rank;
+    const points = [];
+    if (vertical) {
+      const y0 = a.y - a.h / 2;
+      const y1 = b.y + b.h / 2;
+      if (span === 1 && Math.abs(a.x - b.x) < 1e-9) {
+        points.push({ x: a.x, y: y0 }, { x: b.x, y: y1 });
+      } else if (span === 1) {
+        const mid = (y0 + y1) / 2;
+        points.push({ x: a.x, y: y0 }, { x: a.x, y: mid }, { x: b.x, y: mid }, { x: b.x, y: y1 });
+      } else {
+        const lane = laneFor(a.rank, b.rank);
+        points.push(
+          { x: a.x, y: y0 },
+          { x: a.x, y: y0 - lead },
+          { x: lane, y: y0 - lead },
+          { x: lane, y: y1 + lead },
+          { x: b.x, y: y1 + lead },
+          { x: b.x, y: y1 }
+        );
+      }
+    } else {
+      const x0 = a.x + a.w / 2;
+      const x1 = b.x - b.w / 2;
+      if (span === 1 && Math.abs(a.y - b.y) < 1e-9) {
+        points.push({ x: x0, y: a.y }, { x: x1, y: b.y });
+      } else if (span === 1) {
+        const mid = (x0 + x1) / 2;
+        points.push({ x: x0, y: a.y }, { x: mid, y: a.y }, { x: mid, y: b.y }, { x: x1, y: b.y });
+      } else {
+        const lane = laneFor(a.rank, b.rank);
+        points.push(
+          { x: x0, y: a.y },
+          { x: x0 + lead, y: a.y },
+          { x: x0 + lead, y: lane },
+          { x: x1 - lead, y: lane },
+          { x: x1 - lead, y: b.y },
+          { x: x1, y: b.y }
+        );
+      }
+    }
+    edges.push({ from: edge.from, to: edge.to, ...edge.label ? { label: edge.label } : {}, points });
+  }
+  let minX = Infinity;
+  let maxX = -Infinity;
+  let minY = Infinity;
+  let maxY = -Infinity;
+  const cover = (x, y) => {
+    if (x < minX) minX = x;
+    if (x > maxX) maxX = x;
+    if (y < minY) minY = y;
+    if (y > maxY) maxY = y;
+  };
+  for (const b of boxes) {
+    cover(b.x - b.w / 2, b.y - b.h / 2);
+    cover(b.x + b.w / 2, b.y + b.h / 2);
+  }
+  for (const e of edges) for (const p of e.points) cover(p.x, p.y);
+  return { nodes: boxes, edges, extent: { x: [minX, maxX], y: [minY, maxY] }, ranks };
+}
+function shapeMetrics(shape) {
+  if (!shape || shape.length === 0) return [1, 1, 1];
+  if (shape.length === 1) return [1, Math.max(1, shape[0]), 1];
+  const h = Math.max(1, shape[shape.length - 2]);
+  const w = Math.max(1, shape[shape.length - 1]);
+  let c = 1;
+  for (let i = 0; i < shape.length - 2; i++) c *= Math.max(1, shape[i]);
+  return [c, h, w];
+}
+function modelBoxDims(nodes, opts = {}) {
+  const maxThickness = opts.maxThickness ?? 0.9;
+  const maxFace = opts.maxFace ?? 2.2;
+  const minSize = opts.minSize ?? 0.08;
+  const scale = opts.sizeScale ?? "log";
+  const f = scale === "log" ? (v) => Math.log1p(v) : scale === "sqrt" ? (v) => Math.sqrt(v) : (v) => v;
+  const baseline = f(1);
+  const raw = nodes.map(
+    (node) => shapeMetrics(node.shape).map((v) => Math.max(0, f(v) - baseline))
+  );
+  let maxC = 0;
+  let maxH = 0;
+  let maxW = 0;
+  for (const [c, h, w] of raw) {
+    if (c > maxC) maxC = c;
+    if (h > maxH) maxH = h;
+    if (w > maxW) maxW = w;
+  }
+  const norm2 = (v, max, target) => max > 0 ? Math.max(minSize, v / max * target) : target;
+  return raw.map(([c, h, w]) => [
+    norm2(c, maxC, maxThickness),
+    norm2(h, maxH, maxFace),
+    norm2(w, maxW, maxFace)
+  ]);
+}
+
+// src/ml/model-chart.ts
+function colorTable(overrides) {
+  return overrides ? { ...LAYER_COLORS, ...overrides } : LAYER_COLORS;
+}
+function describeNode(node) {
+  const parts = [node.name && node.name !== node.type ? `${node.name} \xB7 ${node.type}` : node.type];
+  const shape = formatShape(node.shape);
+  if (shape) parts.push(shape);
+  if (node.params) parts.push(`${formatCount(node.params)} params`);
+  if (node.flops) parts.push(`${formatCount(node.flops)} FLOPs`);
+  return parts.join(" \xB7 ");
+}
+function roundedRect(cx, cy, w, h, r, seg = 3) {
+  const hw = w / 2;
+  const hh = h / 2;
+  const rad = Math.max(0, Math.min(r, hw, hh));
+  if (rad === 0) {
+    return { x: [cx - hw, cx + hw, cx + hw, cx - hw], y: [cy - hh, cy - hh, cy + hh, cy + hh] };
+  }
+  const corners = [
+    [cx + hw - rad, cy + hh - rad, 0],
+    [cx - hw + rad, cy + hh - rad, Math.PI / 2],
+    [cx - hw + rad, cy - hh + rad, Math.PI],
+    [cx + hw - rad, cy - hh + rad, 3 * Math.PI / 2]
+  ];
+  const x = [];
+  const y = [];
+  for (const [ccx, ccy, a0] of corners) {
+    for (let i = 0; i <= seg; i++) {
+      const a = a0 + Math.PI / 2 * (i / seg);
+      x.push(ccx + rad * Math.cos(a));
+      y.push(ccy + rad * Math.sin(a));
+    }
+  }
+  return { x, y };
+}
+function segmentQuad(x0, y0, x1, y1, thickness) {
+  const dx = x1 - x0;
+  const dy = y1 - y0;
+  const len = Math.hypot(dx, dy);
+  if (len < 1e-12) return null;
+  const ux = dx / len;
+  const uy = dy / len;
+  const half = thickness / 2;
+  const ax = x0 - ux * half;
+  const ay = y0 - uy * half;
+  const bx = x1 + ux * half;
+  const by = y1 + uy * half;
+  const nx = -uy * half;
+  const ny = ux * half;
+  return {
+    x: [ax + nx, bx + nx, bx - nx, ax - nx],
+    y: [ay + ny, by + ny, by - ny, ay - ny]
+  };
+}
+function arrowHead(x0, y0, x1, y1, size) {
+  const dx = x1 - x0;
+  const dy = y1 - y0;
+  const len = Math.hypot(dx, dy);
+  if (len < 1e-12 || size <= 0) return null;
+  const ux = dx / len;
+  const uy = dy / len;
+  const bx = x1 - ux * size;
+  const by = y1 - uy * size;
+  const wx = -uy * size * 0.45;
+  const wy = ux * size * 0.45;
+  return { x: [x1, bx + wx, bx - wx], y: [y1, by + wy, by - wy] };
+}
+function addModelGraph(plot, opts) {
+  const layout = modelLayout(opts.graph, opts);
+  const colors = colorTable(opts.colors);
+  const cornerRadius = opts.cornerRadius ?? 0.14;
+  const edgeWidth = opts.edgeWidth ?? 0.05;
+  const arrowSize = opts.arrowSize ?? 0.18;
+  const dark = (opts.theme ?? "dark") === "dark";
+  const edgeColor = opts.edgeColor ?? (dark ? "#64748b" : "#94a3b8");
+  const labelMode = opts.labels ?? "full";
+  const labelColor = opts.labelColor ?? (dark ? "#f1f5f9" : "#0f172a");
+  const subLabelColor = opts.subLabelColor ?? (dark ? "#cbd5e1" : "#475569");
+  const labelFont = opts.labelFont ?? "600 12px system-ui, -apple-system, sans-serif";
+  const subLabelFont = opts.subLabelFont ?? "10px system-ui, -apple-system, sans-serif";
+  const edgePatches = [];
+  for (const e of layout.edges) {
+    for (let i = 1; i < e.points.length; i++) {
+      const a = e.points[i - 1];
+      const b = e.points[i];
+      const quad = segmentQuad(a.x, a.y, b.x, b.y, edgeWidth);
+      if (quad) edgePatches.push({ ...quad, color: edgeColor });
+    }
+    const last = e.points[e.points.length - 1];
+    const prev = e.points[e.points.length - 2];
+    if (prev) {
+      const head = arrowHead(prev.x, prev.y, last.x, last.y, arrowSize);
+      if (head) edgePatches.push({ ...head, color: edgeColor });
+    }
+  }
+  const edges = plot.addPatches({ patches: edgePatches, color: edgeColor });
+  const nodePatches = layout.nodes.map((b) => ({
+    ...roundedRect(b.x, b.y, b.w, b.h, cornerRadius),
+    color: colors[b.category]
+  }));
+  const nodes = plot.addPatches({
+    patches: nodePatches,
+    opacity: opts.opacity ?? 0.9,
+    ...opts.name ? { name: opts.name } : {}
+  });
+  const disposers = [];
+  if (labelMode !== "none") {
+    for (const b of layout.nodes) {
+      const lines = [];
+      if (labelMode === "name") {
+        lines.push({ text: b.node.name ?? b.node.type, sub: false });
+      } else {
+        lines.push({ text: b.node.type, sub: false });
+        const name = b.node.name ?? b.node.id;
+        if (name && name !== b.node.type) lines.push({ text: name, sub: true });
+        const detail = [formatShape(b.node.shape), b.node.params ? `${formatCount(b.node.params)}p` : ""].filter(Boolean).join("  ");
+        if (detail) lines.push({ text: detail, sub: true });
+      }
+      const step = Math.min(b.h, opts.nodeHeight ?? 0.9) * 0.27;
+      const top = (lines.length - 1) / 2 * step;
+      for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        disposers.push(
+          plot.addAnnotation({
+            type: "label",
+            x: b.x,
+            y: b.y + top - i * step,
+            text: line.text,
+            align: "center",
+            color: line.sub ? subLabelColor : labelColor,
+            font: line.sub ? subLabelFont : labelFont
+          })
+        );
+      }
+    }
+  }
+  if (opts.hideAxes !== false) {
+    plot.setAxis("x", { ticks: [], showAxisLine: false });
+    plot.setAxis("y", { ticks: [], showAxisLine: false });
+  }
+  const nodeAt = (x, y) => {
+    for (let i = layout.nodes.length - 1; i >= 0; i--) {
+      const b = layout.nodes[i];
+      if (Math.abs(x - b.x) <= b.w / 2 && Math.abs(y - b.y) <= b.h / 2) return b;
+    }
+    return null;
+  };
+  let teardownTooltip = () => {
+  };
+  if (opts.tooltip !== false) {
+    const host = plot.element;
+    const tip = document.createElement("div");
+    Object.assign(tip.style, {
+      position: "absolute",
+      display: "none",
+      zIndex: "7",
+      pointerEvents: "none",
+      padding: "6px 8px",
+      borderRadius: "6px",
+      font: "12px system-ui, -apple-system, sans-serif",
+      lineHeight: "1.45",
+      whiteSpace: "nowrap",
+      background: dark ? "rgba(15,23,42,0.94)" : "rgba(255,255,255,0.97)",
+      color: dark ? "#e2e8f0" : "#1e293b",
+      border: `1px solid ${dark ? "rgba(148,163,184,0.3)" : "rgba(100,116,139,0.3)"}`,
+      boxShadow: "0 6px 18px rgba(0,0,0,0.25)"
+    });
+    host.appendChild(tip);
+    const hide = () => {
+      tip.style.display = "none";
+    };
+    const move = (ev) => {
+      const data = plot.dataAt(ev.clientX, ev.clientY);
+      const box = data && nodeAt(data.x, data.y);
+      if (!box) {
+        hide();
+        return;
+      }
+      tip.replaceChildren();
+      const title = document.createElement("div");
+      title.textContent = box.node.name ?? box.node.id;
+      title.style.fontWeight = "600";
+      tip.appendChild(title);
+      const detail = document.createElement("div");
+      detail.style.opacity = "0.75";
+      detail.textContent = describeNode(box.node);
+      tip.appendChild(detail);
+      tip.style.display = "block";
+      const rect = host.getBoundingClientRect();
+      const lx = ev.clientX - rect.left;
+      const ly = ev.clientY - rect.top;
+      let left = lx + 14;
+      if (left + tip.offsetWidth > host.clientWidth) left = lx - tip.offsetWidth - 14;
+      let top = ly + 14;
+      if (top + tip.offsetHeight > host.clientHeight) top = ly - tip.offsetHeight - 14;
+      tip.style.left = `${Math.max(0, left)}px`;
+      tip.style.top = `${Math.max(0, top)}px`;
+    };
+    host.addEventListener("pointermove", move);
+    host.addEventListener("pointerleave", hide);
+    teardownTooltip = () => {
+      host.removeEventListener("pointermove", move);
+      host.removeEventListener("pointerleave", hide);
+      tip.remove();
+    };
+  }
+  return {
+    layout,
+    nodes,
+    edges,
+    nodeAt,
+    destroy() {
+      for (const d of disposers) d();
+      disposers.length = 0;
+      teardownTooltip();
+      teardownTooltip = () => {
+      };
+    }
+  };
+}
+function addModelGraph3D(plot, opts) {
+  const { graph } = opts;
+  const layout = modelLayout(graph, opts);
+  const dims = modelBoxDims(graph.nodes, opts);
+  const colors = colorTable(opts.colors);
+  const rankSpacing = opts.rankSpacing ?? 1.1;
+  const branchSpacing = opts.branchSpacing ?? 3;
+  const rankThickness = new Array(layout.ranks).fill(0);
+  const rankCount = new Array(layout.ranks).fill(0);
+  for (let i = 0; i < layout.nodes.length; i++) {
+    const r = layout.nodes[i].rank;
+    const t = dims[i][0];
+    if (t > rankThickness[r]) rankThickness[r] = t;
+    rankCount[r]++;
+  }
+  const rankX = new Array(layout.ranks).fill(0);
+  for (let r = 1; r < layout.ranks; r++) {
+    rankX[r] = rankX[r - 1] + rankThickness[r - 1] / 2 + rankSpacing + rankThickness[r] / 2;
+  }
+  const blocks = layout.nodes.map((b, i) => {
+    const [w, h, d] = dims[i];
+    const siblings = rankCount[b.rank];
+    return {
+      node: b.node,
+      category: b.category,
+      x: rankX[b.rank],
+      y: 0,
+      z: (b.order - (siblings - 1) / 2) * branchSpacing,
+      w,
+      h,
+      d,
+      rank: b.rank
+    };
+  });
+  const boxes = plot.addBoxes3D({
+    boxes: blocks.map((b) => ({
+      x: b.x,
+      y: b.y,
+      z: b.z,
+      w: b.w,
+      h: b.h,
+      d: b.d,
+      color: colors[b.category],
+      label: describeNode(b.node)
+    })),
+    opacity: opts.opacity ?? 1,
+    ...opts.name ? { name: opts.name } : {}
+  });
+  const labelMode = opts.labels ?? "name";
+  const disposers = [];
+  if (labelMode !== "none") {
+    const labelColor = opts.labelColor ?? "#e2e8f0";
+    const subLabelColor = opts.subLabelColor ?? "#94a3b8";
+    const labelFont = opts.labelFont ?? "600 11px system-ui, -apple-system, sans-serif";
+    const subLabelFont = opts.subLabelFont ?? "9px system-ui, -apple-system, sans-serif";
+    for (const b of blocks) {
+      const head = labelMode === "type" ? b.node.type : b.node.name ?? b.node.id;
+      disposers.push(plot.addLabel3D({
+        x: b.x,
+        y: b.y + b.h / 2,
+        z: b.z,
+        text: head,
+        color: labelColor,
+        font: labelFont,
+        dy: -10,
+        baseline: "bottom"
+      }));
+      const shape = labelMode === "full" ? formatShape(b.node.shape) : "";
+      if (shape) {
+        disposers.push(plot.addLabel3D({
+          x: b.x,
+          y: b.y - b.h / 2,
+          z: b.z,
+          text: shape,
+          color: subLabelColor,
+          font: subLabelFont,
+          dy: 10,
+          baseline: "top"
+        }));
+      }
+    }
+  }
+  const connectors = [];
+  if (opts.connectors !== false) {
+    const byId = /* @__PURE__ */ new Map();
+    for (const b of blocks) byId.set(b.node.id, b);
+    const color = opts.connectorColor ?? "#64748b";
+    for (const e of graph.edges) {
+      const a = byId.get(e.from);
+      const b = byId.get(e.to);
+      if (!a || !b) continue;
+      const x0 = a.x + a.w / 2;
+      const x1 = b.x - b.w / 2;
+      const mid = (x0 + x1) / 2;
+      const straight = Math.abs(a.z - b.z) < 1e-9;
+      const xs = straight ? [x0, x1] : [x0, mid, mid, x1];
+      const ys = straight ? [a.y, b.y] : [a.y, a.y, b.y, b.y];
+      const zs = straight ? [a.z, b.z] : [a.z, a.z, b.z, b.z];
+      connectors.push(plot.addLine3D({ x: xs, y: ys, z: zs, color }));
+    }
+  }
+  return {
+    boxes,
+    connectors,
+    blocks,
+    destroy() {
+      for (const d of disposers) d();
+      disposers.length = 0;
+    }
+  };
+}
 
 // src/charts/treemap.ts
 var DEFAULT_EXTENT = { x: [0, 1], y: [0, 1] };
-var TREEMAP_PALETTE = [
-  "#4e79a7",
-  "#f28e2b",
-  "#e15759",
-  "#76b7b2",
-  "#59a14f",
-  "#edc948",
-  "#b07aa1",
-  "#ff9da7",
-  "#9c755f",
-  "#bab0ac"
-];
+var TREEMAP_PALETTE = DEFAULT_PALETTE;
 function worst(row, w, sum) {
   if (row.length === 0 || w === 0) return Infinity;
   let max = -Infinity, min = Infinity;
@@ -12097,12 +14584,12 @@ function treemapLayout(items, extent = DEFAULT_EXTENT) {
 var LABEL_MIN_FRAC = 0.04;
 function addTreemap(plot, opts) {
   const extent = opts.extent ?? DEFAULT_EXTENT;
-  const palette = opts.colors && opts.colors.length ? opts.colors : TREEMAP_PALETTE;
+  const palette2 = palette(opts.colors ?? TREEMAP_PALETTE);
   const cells = treemapLayout(opts.items, extent);
   const patches = cells.map((c, i) => ({
     x: [c.x0, c.x1, c.x1, c.x0],
     y: [c.y0, c.y0, c.y1, c.y1],
-    color: c.color ?? palette[i % palette.length]
+    color: c.color ?? palette2[i % palette2.length]
   }));
   const layer = plot.addPatches({
     patches,
@@ -12128,18 +14615,7 @@ function addTreemap(plot, opts) {
 }
 
 // src/charts/funnel.ts
-var FUNNEL_PALETTE = [
-  "#4e79a7",
-  "#f28e2b",
-  "#e15759",
-  "#76b7b2",
-  "#59a14f",
-  "#edc948",
-  "#b07aa1",
-  "#ff9da7",
-  "#9c755f",
-  "#bab0ac"
-];
+var FUNNEL_PALETTE = DEFAULT_PALETTE;
 function funnelLayout(items, opts = {}) {
   const n = items.length;
   if (n === 0) return [];
@@ -12169,12 +14645,12 @@ function funnelLayout(items, opts = {}) {
   return stages;
 }
 function addFunnel(plot, opts) {
-  const palette = opts.colors && opts.colors.length ? opts.colors : FUNNEL_PALETTE;
+  const palette2 = palette(opts.colors ?? FUNNEL_PALETTE);
   const stages = funnelLayout(opts.items, opts);
   const patches = stages.map((s, i) => ({
     x: s.poly.x,
     y: s.poly.y,
-    color: s.color ?? palette[i % palette.length]
+    color: s.color ?? palette2[i % palette2.length]
   }));
   const layer = plot.addPatches({
     patches,
@@ -12250,11 +14726,11 @@ function arcRing(a0, a1, r0, r1, color) {
   return { x, y, color };
 }
 function addSunburst(plot, opts) {
-  const palette = opts.colors && opts.colors.length > 0 ? opts.colors : DEFAULT_COLORS2;
+  const palette2 = opts.colors && opts.colors.length > 0 ? opts.colors : DEFAULT_COLORS2;
   const arcs = sunburstLayout(opts.root, { ringWidth: opts.ringWidth });
   const patches = arcs.map((arc, i) => {
     if (arc.a1 - arc.a0 <= 0) return { x: [], y: [] };
-    const color = arc.color ?? palette[i % palette.length];
+    const color = arc.color ?? palette2[i % palette2.length];
     return arcRing(arc.a0, arc.a1, arc.r0, arc.r1, color);
   });
   return plot.addPatches({
@@ -12506,18 +14982,7 @@ function addSankey(plot, opts) {
 }
 
 // src/charts/chord.ts
-var CHORD_PALETTE = [
-  "#4e79a7",
-  "#f28e2b",
-  "#e15759",
-  "#76b7b2",
-  "#59a14f",
-  "#edc948",
-  "#b07aa1",
-  "#ff9da7",
-  "#9c755f",
-  "#bab0ac"
-];
+var CHORD_PALETTE = DEFAULT_PALETTE;
 function onCircle(r, a) {
   return [r * Math.cos(a), r * Math.sin(a)];
 }
@@ -12615,10 +15080,10 @@ function chordLayout(matrix, opts = {}) {
 }
 function addChord(plot, opts) {
   const radius = opts.radius ?? 1;
-  const palette = opts.colors && opts.colors.length ? opts.colors : CHORD_PALETTE;
+  const palette2 = palette(opts.colors ?? CHORD_PALETTE);
   const opacity = opts.opacity ?? 0.65;
   const { groupArcs, ribbons } = chordLayout(opts.matrix, { radius });
-  const color = (i) => palette[i % palette.length];
+  const color = (i) => palette2[i % palette2.length];
   const patches = [];
   for (const rb of ribbons) {
     patches.push({ x: rb.x, y: rb.y, color: withAlpha2(color(rb.i), opacity) });
@@ -12672,18 +15137,7 @@ function withAlpha2(color, alpha) {
 }
 
 // src/charts/parallel.ts
-var PARALLEL_PALETTE = [
-  "#4e79a7",
-  "#f28e2b",
-  "#e15759",
-  "#76b7b2",
-  "#59a14f",
-  "#edc948",
-  "#b07aa1",
-  "#ff9da7",
-  "#9c755f",
-  "#bab0ac"
-];
+var PARALLEL_PALETTE = DEFAULT_PALETTE;
 function parallelLayout(dimensions, rows) {
   const d = dimensions.length;
   const mins = new Array(d).fill(Infinity);
@@ -12718,7 +15172,7 @@ function parallelLayout(dimensions, rows) {
   return { axes, lines };
 }
 function addParallelCoordinates(plot, opts) {
-  const palette = opts.colors && opts.colors.length ? opts.colors : PARALLEL_PALETTE;
+  const palette2 = opts.colors && opts.colors.length ? opts.colors : PARALLEL_PALETTE;
   const width = opts.width ?? 1;
   const opacity = opts.opacity ?? 0.7;
   const { axes, lines } = parallelLayout(opts.dimensions, opts.rows);
@@ -12735,10 +15189,10 @@ function addParallelCoordinates(plot, opts) {
     if (opts.colorBy && Number.isFinite(cbMin)) {
       const v = opts.colorBy[r];
       const t = v == null || !Number.isFinite(v) || cbSpan === 0 ? 0 : (v - cbMin) / cbSpan;
-      const band = Math.min(palette.length - 1, Math.max(0, Math.floor(t * palette.length)));
-      return palette[band];
+      const band = Math.min(palette2.length - 1, Math.max(0, Math.floor(t * palette2.length)));
+      return palette2[band];
     }
-    return palette[r % palette.length];
+    return palette2[r % palette2.length];
   };
   const layers = lines.map(
     (ln, r) => plot.addLine({
@@ -12764,17 +15218,104 @@ function withAlpha3(color, alpha) {
   }
   return color;
 }
+
+// src/stats/charts.ts
+function addRegression(plot, opts) {
+  const method = opts.method ?? "ols";
+  const color = opts.color ?? "#f472b6";
+  const trend = method === "loess" ? loess(opts.x, opts.y, { bandwidth: opts.bandwidth, points: opts.points ?? 100 }) : linearTrend(opts.x, opts.y, { points: opts.points ?? 2, band: opts.band });
+  const fit = method === "ols" ? linearRegression(opts.x, opts.y) : null;
+  let band;
+  if (trend.lower && trend.upper) {
+    band = plot.addArea({
+      x: trend.x,
+      y: trend.upper,
+      base: trend.lower,
+      color: opts.bandColor ?? `${color}33`,
+      yAxis: opts.yAxis,
+      renderType: opts.renderType
+    });
+  }
+  const label = opts.name ?? (fit ? `fit \xB7 r\xB2=${fit.r2.toFixed(3)}` : "loess");
+  const line = plot.addLine({
+    x: trend.x,
+    y: trend.y,
+    color,
+    width: opts.width ?? 2,
+    name: label,
+    yAxis: opts.yAxis,
+    renderType: opts.renderType
+  });
+  return { line, ...band ? { band } : {}, fit };
+}
+function addEcdf(plot, opts) {
+  const { x, y } = ecdf(opts.values);
+  return plot.addLine({
+    x,
+    y,
+    step: "after",
+    color: opts.color ?? "#60a5fa",
+    width: opts.width ?? 2,
+    name: opts.name,
+    yAxis: opts.yAxis,
+    renderType: opts.renderType
+  });
+}
+function addCorrMatrix(plot, opts) {
+  const { values, size } = corrMatrix(opts.columns);
+  const heatmap = plot.addHeatmap({
+    values,
+    cols: size,
+    rows: size,
+    extent: { x: [-0.5, size - 0.5], y: [-0.5, size - 0.5] },
+    colormap: opts.colormap ?? "RdBu",
+    domain: [-1, 1],
+    smooth: false,
+    name: opts.name ?? "correlation",
+    yAxis: opts.yAxis
+  });
+  if (opts.labelAxes !== false && opts.names?.length) {
+    const names = opts.names;
+    const ticks = names.map((_, i) => i);
+    const format = (v) => names[Math.round(v)] ?? "";
+    plot.setAxis("x", { ticks, format });
+    plot.setAxis(opts.yAxis ?? "y", { ticks, format });
+  }
+  return { heatmap, values, size };
+}
+function addPsd(plot, opts) {
+  const psd = welch(opts.signal, {
+    sampleRate: opts.sampleRate,
+    segment: opts.segment,
+    overlap: opts.overlap,
+    window: opts.window
+  });
+  const y = opts.decibels === false ? psd.power : Float64Array.from(psd.power, (p) => 10 * Math.log10(p + 1e-20));
+  const line = plot.addLine({
+    x: psd.frequencies,
+    y,
+    color: opts.color ?? "#38bdf8",
+    width: opts.width ?? 1.5,
+    name: opts.name ?? "PSD",
+    yAxis: opts.yAxis,
+    renderType: opts.renderType
+  });
+  return { line, frequencies: psd.frequencies, power: psd.power };
+}
 export {
   AreaLayer,
   Axis,
   Bar3DLayer,
   BarLayer,
   BoxLayer,
+  Boxes3DLayer,
   CHORD_PALETTE,
+  COLORMAP_KIND,
   CandlestickLayer,
   CategoricalScale,
   Contour3DLayer,
   ContourLayer,
+  DEFAULT_PALETTE,
   ErrorBarLayer,
   FUNNEL_PALETTE,
   GraphLayer,
@@ -12782,6 +15323,7 @@ export {
   HexbinLayer,
   ImageLayer,
   IsosurfaceLayer,
+  LAYER_COLORS,
   Line3DLayer,
   LineLayer,
   LinearScale,
@@ -12789,6 +15331,7 @@ export {
   ML_PALETTE,
   OhlcLayer,
   OrdinalTimeScale,
+  PALETTES,
   PARALLEL_PALETTE,
   PatchesLayer,
   PieLayer,
@@ -12811,17 +15354,28 @@ export {
   addCalibration,
   addChord,
   addConfusionMatrix,
+  addCorrMatrix,
   addDecisionBoundary,
   addDepth,
+  addDrawdown,
+  addEcdf,
   addEmbedding,
   addFeatureImportance,
   addFunnel,
   addGauge,
   addHeikinAshi,
+  addLearningCurve,
+  addLiftCurve,
+  addModelGraph,
+  addModelGraph3D,
   addParallelCoordinates,
   addPartialDependence,
   addPrCurve,
+  addPredVsActual,
+  addPsd,
+  addRegression,
   addRenko,
+  addResiduals,
   addRidgeline,
   addRocCurve,
   addSankey,
@@ -12831,32 +15385,48 @@ export {
   addTreemap,
   addVolumeProfile,
   adx,
+  aroon,
   atr,
   autoTicks,
   beeswarmLayout,
   bollinger,
   boxStats,
+  brierScore,
   bufferUsage,
   calibrationCurve,
   canvasToBlob,
+  cci,
   chordLayout,
+  classificationReport,
   colormap,
+  colormapFromStops,
+  colormapGradient,
   colormapLUT,
+  colormapNames,
   confusionMatrix,
   copyCanvasToClipboard,
+  corrMatrix,
+  correlation,
   createProgram,
   createToolbar,
+  crossCorrelate,
   darkTheme,
   defaultFormat,
   depth,
+  discreteColormap,
+  donchian,
   downloadCanvas,
+  drawdown,
   earcut,
+  ecdf,
   ema,
   emaSmooth,
   fft,
   fibRetracements,
   firstFinite,
   forceLayout,
+  formatCount,
+  formatShape,
   funnelLayout,
   gaugeLayout,
   heikinAshi,
@@ -12864,28 +15434,59 @@ export {
   ichimoku,
   kde,
   keltner,
+  layerCategory,
+  liftCurve,
   lightTheme,
   lineBreak,
+  linearRegression,
+  linearTrend,
   linkX,
+  loess,
+  logLoss,
   lttb,
   macd,
+  mae,
   makeScale,
   marchingCubes,
+  mfi,
+  mlpModel,
+  modelBoxDims,
+  modelGraphFromKeras,
+  modelGraphFromOnnx,
+  modelGraphFromSklearn,
+  modelGraphFromTorchFx,
+  modelLayout,
+  mse,
   obv,
+  palette,
+  paletteColor,
+  paletteNames,
+  parabolicSar,
   parallelLayout,
   parseCSV,
   parseColor,
   pca,
+  pivotPoints,
   pointAndFigure,
   prCurve,
   quantileSorted,
+  r2,
+  registerColormap,
+  registerPalette,
+  renderColorbars,
   renko,
+  resampleOhlc,
   resolveAxisStyle,
   resolveTicks,
+  reverseColormap,
+  rmse,
   rocCurve,
+  rocCurveOvR,
   rollingStd,
   rsi,
   sankeyLayout,
+  savitzkyGolay,
+  sequentialModel,
   setTransformUniforms,
   sma,
   spectrogram,
@@ -12893,13 +15494,18 @@ export {
   stochastic,
   sunburstLayout,
   superTrend,
+  symmetricDomain,
   toColorCss,
   treemapLayout,
   trueRange,
   uniformLocations,
   volumeProfile,
   vwap,
+  welch,
+  williamsR,
+  windowFunction,
   withMinorTicks,
-  wma
+  wma,
+  zscore
 };
 //# sourceMappingURL=index.js.map