@photonviz/core 0.3.1 → 0.3.2

package/dist/index.js

@@ -3300,7 +3300,7 @@ var LineLayer = class {
 
 // src/geo/earcut.ts
 var Z_ORDER_THRESHOLD = 80;
-var Node = class {
+var Node2 = class {
   constructor(i, x, y) {
     this.i = i;
     this.x = x;
@@ -3603,8 +3603,8 @@ function sectorContainsSector(m, p) {
   return area(m.prev, m, p.prev) < 0 && area(p.next, m, m.next) < 0;
 }
 function splitPolygon(a, b) {
-  const a2 = new Node(a.i, a.x, a.y);
-  const b2 = new Node(b.i, b.x, b.y);
+  const a2 = new Node2(a.i, a.x, a.y);
+  const b2 = new Node2(b.i, b.x, b.y);
   const an = a.next;
   const bp = b.prev;
   a.next = b;
@@ -3618,7 +3618,7 @@ function splitPolygon(a, b) {
   return b2;
 }
 function insertNode(i, x, y, last) {
-  const p = new Node(i, x, y);
+  const p = new Node2(i, x, y);
   if (!last) {
     p.prev = p;
     p.next = p;
@@ -4969,6 +4969,28 @@ function drawMarker(ctx, px, py, color) {
   ctx.restore();
 }
 
+// src/render/export.ts
+function canvasToBlob(canvas, type = "image/png", quality) {
+  return new Promise((resolve) => canvas.toBlob(resolve, type, quality));
+}
+async function downloadCanvas(canvas, filename = "chart.png", type = "image/png", quality) {
+  const blob = await canvasToBlob(canvas, type, quality);
+  if (!blob) return;
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+async function copyCanvasToClipboard(canvas) {
+  const blob = await canvasToBlob(canvas, "image/png");
+  if (!blob) throw new Error("Failed to render image");
+  const CI = globalThis.ClipboardItem;
+  if (!navigator.clipboard?.write || !CI) throw new Error("Clipboard image write is not supported here");
+  await navigator.clipboard.write([new CI({ "image/png": blob })]);
+}
+
 // src/scales/scale.ts
 var LinearScale = class {
   constructor(domain = [0, 1]) {
@@ -5155,18 +5177,27 @@ var OrdinalTimeScale = class {
     const i0 = Math.max(0, Math.ceil(this.domain[0] - 1e-9));
     const i1 = Math.min(n - 1, Math.floor(this.domain[1] + 1e-9));
     if (i1 < i0) return [];
+    const DAY2 = 864e5;
     const dayKey = (d) => d.getFullYear() * 1e4 + d.getMonth() * 100 + d.getDate();
+    const weekKey = (d) => {
+      const m = new Date(d.getFullYear(), d.getMonth(), d.getDate());
+      const dow = (m.getDay() + 6) % 7;
+      return Math.floor((m.getTime() - dow * DAY2) / DAY2);
+    };
+    const dayMonth = (d) => `${d.getDate()} ${MONTHS[d.getMonth()]}`;
+    const monthLabel = (d) => d.getMonth() === 0 ? `${d.getFullYear()}` : MONTHS[d.getMonth()];
     const levels = [
       { key: (d) => d.getFullYear(), label: (d) => `${d.getFullYear()}` },
-      {
-        key: (d) => d.getFullYear() * 12 + d.getMonth(),
-        label: (d) => d.getMonth() === 0 ? `${d.getFullYear()}` : MONTHS[d.getMonth()]
-      },
-      { key: dayKey, label: (d) => `${d.getDate()} ${MONTHS[d.getMonth()]}` },
-      { key: (d) => dayKey(d) * 100 + d.getHours(), label: hhmm },
-      { key: (d) => (dayKey(d) * 100 + d.getHours()) * 100 + d.getMinutes(), label: hhmm }
+      { key: (d) => d.getFullYear() * 4 + Math.floor(d.getMonth() / 3), label: monthLabel },
+      { key: (d) => d.getFullYear() * 12 + d.getMonth(), label: monthLabel },
+      { key: weekKey, label: dayMonth },
+      { key: dayKey, label: dayMonth },
+      { key: (d) => dayKey(d) * 4 + Math.floor(d.getHours() / 6), label: hhmm },
+      { key: (d) => dayKey(d) * 24 + d.getHours(), label: hhmm },
+      { key: (d) => (dayKey(d) * 24 + d.getHours()) * 4 + Math.floor(d.getMinutes() / 15), label: hhmm },
+      { key: (d) => (dayKey(d) * 24 + d.getHours()) * 60 + d.getMinutes(), label: hhmm }
     ];
-    const boundaries = (lvl) => {
+    const periodStarts = (lvl) => {
       const out = [];
       let prev = i0 > 0 ? lvl.key(new Date(this.times[i0 - 1])) : NaN;
       for (let i = i0; i <= i1; i++) {
@@ -5178,29 +5209,30 @@ var OrdinalTimeScale = class {
       }
       return out;
     };
-    let best = null;
+    let chosen = null;
+    let bestScore = Infinity;
     for (const lvl of levels) {
-      const b = boundaries(lvl);
+      const b = periodStarts(lvl);
       if (b.length === 0) continue;
-      best = { lvl, b };
-      if (b.length >= target) break;
-    }
-    let idxs;
-    let label;
-    if (best) {
-      idxs = best.b;
-      label = best.lvl.label;
-      if (idxs.length > target * 1.5) {
-        const stride = Math.ceil(idxs.length / target);
-        idxs = idxs.filter((_, k) => k % stride === 0);
+      const over = b.length > target * 1.5 ? (b.length - target * 1.5) * 3 : 0;
+      const sparse = b.length < 2 ? 100 : 0;
+      const score = Math.abs(b.length - target) + over + sparse;
+      if (score < bestScore) {
+        bestScore = score;
+        chosen = { lvl, b };
       }
-    } else {
-      idxs = [];
+    }
+    if (!chosen) {
+      const out = [];
       const step = Math.max(1, Math.floor((i1 - i0) / Math.max(1, target - 1)));
-      for (let i = i0; i <= i1; i += step) idxs.push(i);
-      label = (d) => `${d.getDate()} ${MONTHS[d.getMonth()]} ${hhmm(d)}`;
+      for (let i = i0; i <= i1; i += step) {
+        const d = new Date(this.times[i]);
+        out.push({ value: i, label: `${dayMonth(d)} ${hhmm(d)}` });
+      }
+      return out;
     }
-    return idxs.map((i) => ({ value: i, label: label(new Date(this.times[i])) }));
+    const c = chosen;
+    return c.b.map((i) => ({ value: i, label: c.lvl.label(new Date(this.times[i])) }));
   }
   formatTick(value) {
     const d = new Date(this.timeAt(value));
@@ -5249,7 +5281,14 @@ var ICONS = {
   pan: `<path d="M8 1.5v13M1.5 8h13M8 1.5 6 3.5M8 1.5l2 2M8 14.5l-2-2M8 14.5l2-2M1.5 8l2-2M1.5 8l2 2M14.5 8l-2-2M14.5 8l-2 2" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>`,
   box: `<rect x="2.5" y="2.5" width="11" height="11" rx="1" fill="none" stroke="currentColor" stroke-width="1.4" stroke-dasharray="2.4 2"/><circle cx="8" cy="8" r="1.4" fill="currentColor"/>`,
   boxX: `<path d="M1.5 8h13M3.5 5.5 1.5 8l2 2.5M12.5 5.5 14.5 8l-2 2.5" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/><rect x="4.5" y="3" width="7" height="10" rx="1" fill="none" stroke="currentColor" stroke-width="1.1" stroke-dasharray="2 1.8"/>`,
-  boxY: `<path d="M8 1.5v13M5.5 3.5 8 1.5l2.5 2M5.5 12.5 8 14.5l2.5-2" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/><rect x="3" y="4.5" width="10" height="7" rx="1" fill="none" stroke="currentColor" stroke-width="1.1" stroke-dasharray="2 1.8"/>`
+  boxY: `<path d="M8 1.5v13M5.5 3.5 8 1.5l2.5 2M5.5 12.5 8 14.5l2.5-2" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/><rect x="3" y="4.5" width="10" height="7" rx="1" fill="none" stroke="currentColor" stroke-width="1.1" stroke-dasharray="2 1.8"/>`,
+  download: `<path d="M8 1.8v8.4M4.8 7l3.2 3.2L11.2 7" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M2.5 11.5v1.7A1 1 0 0 0 3.5 14.2h9a1 1 0 0 0 1-1V11.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>`,
+  trendline: `<path d="M2 13 14 3" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="2" cy="13" r="1.6" fill="currentColor"/><circle cx="14" cy="3" r="1.6" fill="currentColor"/>`,
+  hline: `<path d="M1.5 8h13" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="8" cy="8" r="1.6" fill="currentColor"/>`,
+  ray: `<path d="M2 12 13 4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M13 4 10 4.4M13 4l-.4 3" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="2" cy="12" r="1.6" fill="currentColor"/>`,
+  fib: `<path d="M2 3h12M2 6.2h12M2 9.4h12M2 12.6h12" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>`,
+  rect: `<rect x="2.5" y="3.5" width="11" height="9" rx="1" fill="none" stroke="currentColor" stroke-width="1.4" stroke-dasharray="2.4 2"/>`,
+  trash: `<path d="M3 4.5h10M6.5 4.5V3h3v1.5M4.5 4.5l.6 8.5a1 1 0 0 0 1 .9h3.8a1 1 0 0 0 1-.9l.6-8.5" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>`
 };
 function createToolbar(container, host, dark) {
   const t = dark ? darkToolbar : lightToolbar;
@@ -5275,6 +5314,9 @@ function createToolbar(container, host, dark) {
     { key: "box-x", title: "Zoom X only", icon: ICONS.boxX, mode: "box-x" },
     { key: "box-y", title: "Zoom Y only", icon: ICONS.boxY, mode: "box-y" }
   ];
+  if (host.download) {
+    buttons.push({ key: "download", title: "Download PNG", icon: ICONS.download, action: () => host.download() });
+  }
   const modeButtons = /* @__PURE__ */ new Map();
   for (const b of buttons) {
     const btn = document.createElement("button");
@@ -5319,6 +5361,67 @@ function createToolbar(container, host, dark) {
   };
   setActive(host.getMode());
   host.onModeChange(setActive);
+  if (host.drawTools) {
+    const dt = host.drawTools;
+    const mkBtn = (icon, title) => {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.title = title;
+      btn.setAttribute("aria-label", title);
+      btn.innerHTML = `<svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">${icon}</svg>`;
+      Object.assign(btn.style, {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "26px",
+        height: "26px",
+        padding: "0",
+        border: "none",
+        borderRadius: "6px",
+        background: "transparent",
+        color: t.fg,
+        cursor: "pointer",
+        transition: "background 0.12s, color 0.12s"
+      });
+      btn.addEventListener("mouseenter", () => {
+        if (btn.dataset.active !== "true") btn.style.background = t.hoverBg;
+      });
+      btn.addEventListener("mouseleave", () => {
+        if (btn.dataset.active !== "true") btn.style.background = "transparent";
+      });
+      return btn;
+    };
+    const sep = document.createElement("div");
+    Object.assign(sep.style, { width: "1px", height: "18px", background: t.border, margin: "0 3px", alignSelf: "center" });
+    bar.appendChild(sep);
+    const drawList = [
+      { key: "trendline", title: "Trendline", icon: ICONS.trendline },
+      { key: "hline", title: "Horizontal line", icon: ICONS.hline },
+      { key: "ray", title: "Ray", icon: ICONS.ray },
+      { key: "fib", title: "Fibonacci retracement", icon: ICONS.fib },
+      { key: "rect", title: "Rectangle", icon: ICONS.rect }
+    ];
+    const drawBtns = /* @__PURE__ */ new Map();
+    for (const d of drawList) {
+      const btn = mkBtn(d.icon, d.title);
+      btn.addEventListener("click", () => dt.set(dt.get() === d.key ? null : d.key));
+      drawBtns.set(d.key, btn);
+      bar.appendChild(btn);
+    }
+    const clearBtn = mkBtn(ICONS.trash, "Clear drawings");
+    clearBtn.addEventListener("click", () => dt.clear());
+    bar.appendChild(clearBtn);
+    const setDrawActive = (tool) => {
+      for (const [k, b] of drawBtns) {
+        const active = k === tool;
+        b.dataset.active = String(active);
+        b.style.background = active ? t.activeBg : "transparent";
+        b.style.color = active ? t.activeFg : t.fg;
+      }
+    };
+    setDrawActive(dt.get());
+    dt.onChange(setDrawActive);
+  }
   container.appendChild(bar);
   return {
     element: bar,
@@ -5330,6 +5433,18 @@ function createToolbar(container, host, dark) {
 var DEFAULT_MARGIN = { top: 16, right: 16, bottom: 40, left: 56 };
 var Y_AXIS_GAP = 52;
 var TITLE_RESERVE = 28;
+function hexToRgba(hex, alpha) {
+  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return hex;
+  const n = parseInt(m[1], 16);
+  return `rgba(${n >> 16 & 255},${n >> 8 & 255},${n & 255},${alpha})`;
+}
+function segDist(px, py, ax, ay, bx, by) {
+  const dx = bx - ax, dy = by - ay;
+  const len2 = dx * dx + dy * dy;
+  const t = len2 === 0 ? 0 : Math.max(0, Math.min(1, ((px - ax) * dx + (py - ay) * dy) / len2));
+  return Math.hypot(px - (ax + t * dx), py - (ay + t * dy));
+}
 function isPickable(layer) {
   return typeof layer.pick === "function";
 }
@@ -5374,6 +5489,15 @@ var Plot = class {
     this.lastEmittedX = null;
     this.lastEmittedCursor = NaN;
     this.linkedCursorX = null;
+    // Interactive drawing tools (see setDrawTool / drawingTools option).
+    this.drawTool = null;
+    this.drawings = [];
+    this.pendingDrawing = null;
+    this.drawToolCbs = [];
+    // Selection / editing of existing drawings.
+    this.hoverDrawing = -1;
+    this.selectedDrawing = -1;
+    this.drawMenu = null;
     /** A point clicked to pin its details, until another click clears it. */
     this.selected = null;
     this.annotations = [];
@@ -5381,6 +5505,8 @@ var Plot = class {
     if (getComputedStyle(container).position === "static") {
       container.style.position = "relative";
     }
+    this.ariaLabel = options.ariaLabel;
+    container.setAttribute("role", "img");
     this.gridCanvas = this.makeCanvas(0);
     this.dataCanvas = this.makeCanvas(1);
     this.axisCanvas = this.makeCanvas(2);
@@ -5413,6 +5539,7 @@ var Plot = class {
     this.bgFill = options.background;
     this.borderFill = options.border;
     this.title = typeof options.title === "string" ? { text: options.title } : options.title ?? null;
+    this.updateAria();
     this.legend = options.legend === true ? {} : options.legend || null;
     this.mode = options.mode ?? "pan";
     this.hoverEnabled = options.hover !== false;
@@ -5493,7 +5620,14 @@ var Plot = class {
           setMode: (m) => this.setMode(m),
           getMode: () => this.mode,
           home: () => this.home(),
-          onModeChange: (cb) => this.modeChangeCbs.push(cb)
+          onModeChange: (cb) => this.modeChangeCbs.push(cb),
+          download: () => void this.downloadImage(),
+          drawTools: options.drawingTools ? {
+            set: (t) => this.setDrawTool(t),
+            get: () => this.drawTool,
+            clear: () => this.clearDrawings(),
+            onChange: (cb) => this.onDrawToolChange((t) => cb(t))
+          } : void 0
         },
         this.isDark
       );
@@ -5561,9 +5695,28 @@ var Plot = class {
     }
     this.layers.push(layer);
     this.autoscale();
+    this.updateAria();
     this.requestRender();
     return layer;
   }
+  // --- Accessibility --------------------------------------------------------
+  /** Set the chart's accessible label (`aria-label`). Pass `undefined` to auto-summarize. */
+  setAriaLabel(text) {
+    this.ariaLabel = text;
+    this.updateAria();
+  }
+  /** A one-line text summary of the chart (title + series), for a11y / tooltips. */
+  describe() {
+    const names = this.legendEntries().map((e) => e.name).filter((n) => !/^(line|scatter|bar|area)-\d+$/.test(n));
+    const title = this.title?.text ? `${this.title.text}. ` : "";
+    const nl = this.layers.length;
+    if (nl === 0) return `${title}Empty chart`.trim();
+    const series = names.length ? ` \u2014 ${names.join(", ")}` : "";
+    return `${title}Chart with ${nl} series${series}`.trim();
+  }
+  updateAria() {
+    this.container.setAttribute("aria-label", this.ariaLabel ?? this.describe());
+  }
   /**
    * Register a layer built outside core (e.g. `@photonviz/map`). Use with
    * {@link context} to construct the layer against this plot's WebGL2 context.
@@ -5770,6 +5923,275 @@ var Plot = class {
     this.annotations = [];
     this.requestRender();
   }
+  // --- Interactive drawing ---------------------------------------------------
+  /** Activate a drawing tool (click-drag on the plot to place), or `null` to stop drawing. */
+  setDrawTool(tool) {
+    if (this.drawTool === tool) return;
+    this.drawTool = tool;
+    this.pendingDrawing = null;
+    this.updateCursor();
+    for (const cb of this.drawToolCbs) cb(tool);
+    this.requestRender();
+  }
+  /** The active drawing tool, or `null`. */
+  getDrawTool() {
+    return this.drawTool;
+  }
+  /** Subscribe to draw-tool changes (used by the toolbar). Returns an unsubscribe fn. */
+  onDrawToolChange(cb) {
+    this.drawToolCbs.push(cb);
+    return () => {
+      this.drawToolCbs = this.drawToolCbs.filter((f) => f !== cb);
+    };
+  }
+  /** Add a drawing programmatically (same shapes the tools produce). */
+  addDrawing(a) {
+    this.drawings.push(a);
+    this.requestRender();
+  }
+  /** All user drawings (trendlines, fib levels, …). */
+  getDrawings() {
+    return [...this.drawings];
+  }
+  /** Remove every user drawing. */
+  clearDrawings() {
+    if (this.drawings.length === 0 && !this.pendingDrawing) return;
+    this.drawings = [];
+    this.pendingDrawing = null;
+    this.requestRender();
+  }
+  /** Canvas-space pixel → data coordinates on the x + primary y scale. */
+  dataAtPx(px, py) {
+    const region = plotRegion(this.layout());
+    const nx = (px - region.left) / region.width;
+    const ny = 1 - (py - region.top) / region.height;
+    return { x: this.scaleX.invert(nx), y: this.primaryY().scale.invert(ny) };
+  }
+  /** Build the annotation for a draw tool from its start + current data points. */
+  buildDrawing(tool, s, c) {
+    const col = "#f59e0b";
+    switch (tool) {
+      case "trendline":
+        return { type: "line", x0: s.x, y0: s.y, x1: c.x, y1: c.y, color: col, width: 1.5 };
+      case "ray":
+        return { type: "ray", x0: s.x, y0: s.y, x1: c.x, y1: c.y, color: col, width: 1.5 };
+      case "hline":
+        return { type: "span", dim: "y", value: c.y, color: col, width: 1.5 };
+      case "rect":
+        return { type: "box", x: [s.x, c.x], y: [s.y, c.y], color: "rgba(245,158,11,0.08)", border: col };
+      case "fib":
+        return { type: "fib", x0: s.x, x1: c.x, high: Math.max(s.y, c.y), low: Math.min(s.y, c.y), fill: true, color: "#94a3b8" };
+    }
+  }
+  drawingYScale(a) {
+    const id = "yAxis" in a ? a.yAxis : void 0;
+    return (this.yAxes.get(id ?? "y") ?? this.primaryY()).scale;
+  }
+  /** Editable handle points (data space) for a drawing; `[]` if it has none. */
+  drawingHandlePts(a) {
+    switch (a.type) {
+      case "line":
+      case "ray":
+        return [{ x: a.x0, y: a.y0 }, { x: a.x1, y: a.y1 }];
+      case "fib":
+        return [{ x: a.x0, y: a.high }, { x: a.x1, y: a.low }];
+      case "box":
+        return [{ x: a.x[0], y: a.y[0] }, { x: a.x[1], y: a.y[1] }];
+      case "span":
+        return a.dim === "y" ? [{ x: (this.scaleX.domain[0] + this.scaleX.domain[1]) / 2, y: a.value }] : [{ x: a.value, y: (this.primaryY().scale.domain[0] + this.primaryY().scale.domain[1]) / 2 }];
+      default:
+        return [];
+    }
+  }
+  /** Move handle `i` of a drawing to a new data-space point (all editable types). */
+  setDrawingHandle(a, i, x, y) {
+    switch (a.type) {
+      case "line":
+      case "ray":
+        if (i === 0) {
+          a.x0 = x;
+          a.y0 = y;
+        } else {
+          a.x1 = x;
+          a.y1 = y;
+        }
+        break;
+      case "fib":
+        if (i === 0) {
+          a.x0 = x;
+          a.high = y;
+        } else {
+          a.x1 = x;
+          a.low = y;
+        }
+        break;
+      case "box": {
+        const m = a;
+        if (i === 0) {
+          m.x = [x, a.x[1]];
+          m.y = [y, a.y[1]];
+        } else {
+          m.x = [a.x[0], x];
+          m.y = [a.y[0], y];
+        }
+        break;
+      }
+      case "span":
+        a.value = a.dim === "y" ? y : x;
+        break;
+    }
+  }
+  /** Translate a whole drawing by a data-space delta (drag the body). */
+  translateDrawing(a, dx, dy) {
+    const pts = this.drawingHandlePts(a);
+    for (let i = 0; i < pts.length; i++) this.setDrawingHandle(a, i, pts[i].x + dx, pts[i].y + dy);
+  }
+  /** Cursor→drawing distance in px (segment for line/ray, edges for box/fib, the line for span). */
+  drawingBodyDist(a, px, py, region) {
+    const s = this.drawingYScale(a);
+    const X = (x) => pxX(region, this.scaleX.norm(x));
+    const Y = (y) => pxY(region, s.norm(y));
+    if (a.type === "line" || a.type === "ray") return segDist(px, py, X(a.x0), Y(a.y0), X(a.x1), Y(a.y1));
+    if (a.type === "span") return a.dim === "y" ? Math.abs(py - Y(a.value)) : Math.abs(px - X(a.value));
+    if (a.type === "box" || a.type === "fib") {
+      const [x0, x1] = a.type === "box" ? [X(a.x[0]), X(a.x[1])] : [X(a.x0), X(a.x1)];
+      const [y0, y1] = a.type === "box" ? [Y(a.y[0]), Y(a.y[1])] : [Y(a.high), Y(a.low)];
+      const inX = px >= Math.min(x0, x1) - 4 && px <= Math.max(x0, x1) + 4;
+      const inY = py >= Math.min(y0, y1) - 4 && py <= Math.max(y0, y1) + 4;
+      if (inX && inY) return 0;
+    }
+    return Infinity;
+  }
+  /** Topmost drawing under the cursor and its handle (handle −1 = body, index −1 = none). */
+  hitDrawing(px, py) {
+    if (this.drawings.length === 0) return { index: -1, handle: -1 };
+    const region = plotRegion(this.layout());
+    for (let di = this.drawings.length - 1; di >= 0; di--) {
+      const a = this.drawings[di];
+      const s = this.drawingYScale(a);
+      const pts = this.drawingHandlePts(a);
+      for (let hi = 0; hi < pts.length; hi++) {
+        const hx = pxX(region, this.scaleX.norm(pts[hi].x)), hy = pxY(region, s.norm(pts[hi].y));
+        if (Math.hypot(hx - px, hy - py) <= 8) return { index: di, handle: hi };
+      }
+    }
+    for (let di = this.drawings.length - 1; di >= 0; di--) {
+      if (this.drawingBodyDist(this.drawings[di], px, py, region) <= 6) return { index: di, handle: -1 };
+    }
+    return { index: -1, handle: -1 };
+  }
+  removeDrawing(index) {
+    if (index < 0 || index >= this.drawings.length) return;
+    this.drawings.splice(index, 1);
+    if (this.selectedDrawing === index) this.selectedDrawing = -1;
+    else if (this.selectedDrawing > index) this.selectedDrawing--;
+    this.hoverDrawing = -1;
+    this.hideDrawMenu();
+    this.requestRender();
+  }
+  hideDrawMenu() {
+    if (this.drawMenu) {
+      this.drawMenu.remove();
+      this.drawMenu = null;
+    }
+  }
+  /** Right-click context menu for a drawing: rename, recolor, delete. */
+  showDrawMenu(clientX, clientY, index) {
+    this.hideDrawMenu();
+    const a = this.drawings[index];
+    if (!a) return;
+    this.selectedDrawing = index;
+    const menu = document.createElement("div");
+    Object.assign(menu.style, {
+      position: "fixed",
+      left: `${clientX}px`,
+      top: `${clientY}px`,
+      zIndex: "1000",
+      minWidth: "150px",
+      padding: "4px",
+      borderRadius: "8px",
+      background: this.isDark ? "rgba(15,23,42,0.98)" : "rgba(255,255,255,0.99)",
+      color: this.isDark ? "#e2e8f0" : "#1e293b",
+      border: `1px solid ${this.isDark ? "rgba(148,163,184,0.3)" : "rgba(100,116,139,0.3)"}`,
+      boxShadow: "0 6px 20px rgba(0,0,0,0.35)",
+      font: "13px system-ui, sans-serif",
+      userSelect: "none"
+    });
+    const item = (label, onClick) => {
+      const row = document.createElement("div");
+      row.textContent = label;
+      Object.assign(row.style, { padding: "6px 10px", borderRadius: "5px", cursor: "pointer" });
+      row.addEventListener("mouseenter", () => {
+        row.style.background = this.isDark ? "rgba(148,163,184,0.15)" : "rgba(100,116,139,0.12)";
+      });
+      row.addEventListener("mouseleave", () => {
+        row.style.background = "transparent";
+      });
+      row.addEventListener("mousedown", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onClick();
+      });
+      return row;
+    };
+    menu.appendChild(item("\u270E  Rename\u2026", () => {
+      this.hideDrawMenu();
+      this.renameDrawing(index);
+    }));
+    const colorRow = document.createElement("div");
+    Object.assign(colorRow.style, { display: "flex", gap: "6px", padding: "6px 10px" });
+    for (const c of ["#f59e0b", "#60a5fa", "#34d399", "#f472b6", "#e2e8f0"]) {
+      const sw = document.createElement("span");
+      Object.assign(sw.style, { width: "16px", height: "16px", borderRadius: "4px", background: c, cursor: "pointer", border: "1px solid rgba(0,0,0,0.2)" });
+      sw.addEventListener("mousedown", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.recolorDrawing(a, c);
+        this.hideDrawMenu();
+        this.requestRender();
+      });
+      colorRow.appendChild(sw);
+    }
+    menu.appendChild(colorRow);
+    const del = item("\u{1F5D1}  Delete", () => this.removeDrawing(index));
+    del.style.color = "#f87171";
+    menu.appendChild(del);
+    (document.fullscreenElement ?? document.body).appendChild(menu);
+    this.drawMenu = menu;
+    const dismiss = (ev) => {
+      if (ev && ev.type === "pointerdown" && ev.target instanceof Node && menu.contains(ev.target)) return;
+      window.removeEventListener("pointerdown", dismiss, true);
+      window.removeEventListener("blur", dismiss);
+      window.removeEventListener("resize", dismiss);
+      document.removeEventListener("fullscreenchange", dismiss);
+      document.removeEventListener("scroll", dismiss, true);
+      this.hideDrawMenu();
+    };
+    setTimeout(() => window.addEventListener("pointerdown", dismiss, true), 0);
+    window.addEventListener("blur", dismiss);
+    window.addEventListener("resize", dismiss);
+    document.addEventListener("fullscreenchange", dismiss);
+    document.addEventListener("scroll", dismiss, true);
+    this.requestRender();
+  }
+  /** Recolor a drawing: a box keeps its translucent fill + opaque border; others take the color directly. */
+  recolorDrawing(a, color) {
+    if (a.type === "box") {
+      a.border = color;
+      a.color = hexToRgba(color, 0.12);
+    } else {
+      a.color = color;
+    }
+  }
+  /** Prompt for a label on a drawing (double-click / context menu). */
+  renameDrawing(index) {
+    const a = this.drawings[index];
+    if (!a || a.type !== "line" && a.type !== "ray" && a.type !== "box" && a.type !== "fib") return;
+    const next = window.prompt("Label", a.label ?? "");
+    if (next === null) return;
+    a.label = next || void 0;
+    this.requestRender();
+  }
   /** Compute an STFT of `signal` and render it as a heatmap (time × frequency). */
   addHeatmapSpectrogram(signal, opts = {}) {
     const s = spectrogram(signal, opts);
@@ -5921,6 +6343,45 @@ var Plot = class {
     this.autoscale();
     this.requestRender();
   }
+  // --- Export ---------------------------------------------------------------
+  /**
+   * Composite this plot's layers (grid → data → axes/labels) into a single 2D
+   * canvas at device resolution. `background` fills behind the plot (default the
+   * theme's page color; pass `"transparent"` to keep alpha).
+   */
+  compositeCanvas(background) {
+    this.render();
+    const w = this.dataCanvas.width, h = this.dataCanvas.height;
+    const out = document.createElement("canvas");
+    out.width = w;
+    out.height = h;
+    const ctx = out.getContext("2d");
+    const bg = background ?? (this.isDark ? "#0b1220" : "#ffffff");
+    if (bg !== "transparent") {
+      ctx.fillStyle = bg;
+      ctx.fillRect(0, 0, w, h);
+    }
+    ctx.drawImage(this.gridCanvas, 0, 0);
+    ctx.drawImage(this.dataCanvas, 0, 0);
+    ctx.drawImage(this.axisCanvas, 0, 0);
+    return out;
+  }
+  /** Export the current view as a data URL (default PNG). */
+  toDataURL(type = "image/png", opts = {}) {
+    return this.compositeCanvas(opts.background).toDataURL(type, opts.quality);
+  }
+  /** Export the current view as a `Blob` (default PNG). */
+  toBlob(type = "image/png", opts = {}) {
+    return canvasToBlob(this.compositeCanvas(opts.background), type, opts.quality);
+  }
+  /** Download the current view as an image (PNG by default). */
+  downloadImage(filename = "chart.png", type = "image/png", opts = {}) {
+    return downloadCanvas(this.compositeCanvas(opts.background), filename, type, opts.quality);
+  }
+  /** Copy the current view to the clipboard as a PNG. Throws if the browser can't. */
+  copyToClipboard(opts = {}) {
+    return copyCanvasToClipboard(this.compositeCanvas(opts.background));
+  }
   /** Re-fit auto axes to the data: x over all series, each y axis over its own series. */
   autoscale() {
     if (this.autoX) {
@@ -5951,6 +6412,7 @@ var Plot = class {
   destroy() {
     this.resizeObserver.disconnect();
     this.toolbarHandle?.destroy();
+    this.hideDrawMenu();
     this.selectionDiv.remove();
     this.tooltip.remove();
     this.infoBox.remove();
@@ -6073,7 +6535,7 @@ var Plot = class {
       });
     }
     if (this.title) drawTitle(this.axisCtx, region, this.title, this.isDark);
-    if (this.annotations.length) this.renderAnnotations(region);
+    if (this.annotations.length || this.drawings.length || this.pendingDrawing) this.renderAnnotations(region);
     if (this.crosshair && this.pressPx) {
       drawCrosshairXY(this.axisCtx, region, this.pressPx.x, this.pressPx.y, this.theme);
     }
@@ -6161,7 +6623,8 @@ var Plot = class {
     ctx.beginPath();
     ctx.rect(left, top, right - left, bottom - top);
     ctx.clip();
-    for (const a of this.annotations) {
+    const items = this.pendingDrawing ? [...this.annotations, ...this.drawings, this.pendingDrawing] : this.drawings.length ? [...this.annotations, ...this.drawings] : this.annotations;
+    for (const a of items) {
       ctx.setLineDash([]);
       if (a.type === "span") {
         ctx.strokeStyle = a.color ?? this.theme.axis;
@@ -6203,13 +6666,91 @@ var Plot = class {
           ctx.lineWidth = 1;
           ctx.strokeRect(rx + 0.5, ry + 0.5, rw, rh);
         }
-      } else {
+        if (a.label) {
+          ctx.fillStyle = a.border ?? a.color ?? this.theme.text;
+          ctx.font = this.theme.font;
+          ctx.textAlign = "left";
+          ctx.textBaseline = "bottom";
+          ctx.fillText(a.label, rx + 4, ry - 3);
+        }
+      } else if (a.type === "label") {
         const s = yScaleOf(a.yAxis);
         ctx.fillStyle = a.color ?? this.theme.text;
         ctx.font = a.font ?? this.theme.font;
         ctx.textAlign = a.align ?? "left";
         ctx.textBaseline = "middle";
         ctx.fillText(a.text, px(a.x), py(s, a.y));
+      } else if (a.type === "line" || a.type === "ray") {
+        const s = yScaleOf(a.yAxis);
+        ctx.strokeStyle = a.color ?? this.theme.axis;
+        ctx.lineWidth = a.width ?? 1.5;
+        if (a.dash) ctx.setLineDash(a.dash);
+        const X0 = px(a.x0), Y0 = py(s, a.y0);
+        let X1 = px(a.x1), Y1 = py(s, a.y1);
+        if (a.type === "ray") {
+          const dx = X1 - X0, dy = Y1 - Y0, len = Math.hypot(dx, dy) || 1, f = 8e3 / len;
+          X1 = X0 + dx * f;
+          Y1 = Y0 + dy * f;
+        }
+        ctx.beginPath();
+        ctx.moveTo(X0, Y0);
+        ctx.lineTo(X1, Y1);
+        ctx.stroke();
+        if (a.label) {
+          ctx.setLineDash([]);
+          ctx.fillStyle = a.color ?? this.theme.text;
+          ctx.font = this.theme.font;
+          ctx.textAlign = "left";
+          ctx.textBaseline = "bottom";
+          ctx.fillText(a.label, px(a.x1) + 7, py(s, a.y1) - 4);
+        }
+      } else {
+        const s = yScaleOf(a.yAxis);
+        const ratios = a.ratios ?? [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1];
+        const span = a.high - a.low;
+        const fx0 = Math.min(px(a.x0), px(a.x1)), fx1 = Math.max(px(a.x0), px(a.x1));
+        const color = a.color ?? this.theme.axis;
+        const ys = ratios.map((r) => py(s, a.high - span * r));
+        if (a.fill) {
+          for (let i = 0; i < ys.length - 1; i++) {
+            ctx.fillStyle = `rgba(96,165,250,${i % 2 === 0 ? 0.06 : 0.12})`;
+            ctx.fillRect(fx0, Math.min(ys[i], ys[i + 1]), fx1 - fx0, Math.abs(ys[i + 1] - ys[i]));
+          }
+        }
+        ctx.setLineDash([]);
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 1;
+        ctx.fillStyle = color;
+        ctx.font = this.theme.font;
+        ctx.textAlign = "left";
+        ctx.textBaseline = "bottom";
+        for (let i = 0; i < ratios.length; i++) {
+          const y = Math.round(ys[i]) + 0.5;
+          ctx.beginPath();
+          ctx.moveTo(fx0, y);
+          ctx.lineTo(fx1, y);
+          ctx.stroke();
+          ctx.fillText(`${(ratios[i] * 100).toFixed(1)}% \xB7 ${(a.high - span * ratios[i]).toFixed(2)}`, fx0 + 4, y - 2);
+        }
+        if (a.label) ctx.fillText(a.label, fx0 + 4, Math.min(...ys) - 4);
+      }
+    }
+    const active = this.selectedDrawing >= 0 ? this.selectedDrawing : this.hoverDrawing;
+    if (active >= 0 && active < this.drawings.length) {
+      const a = this.drawings[active];
+      const s = yScaleOf(a.yAxis);
+      const col = a.border ?? a.color ?? this.theme.axis;
+      const selected = this.selectedDrawing === active;
+      ctx.setLineDash([]);
+      for (const pt of this.drawingHandlePts(a)) {
+        const hx = px(pt.x), hy = py(s, pt.y);
+        ctx.beginPath();
+        ctx.arc(hx, hy, selected ? 5 : 4, 0, Math.PI * 2);
+        ctx.fillStyle = col;
+        ctx.fill();
+        ctx.lineWidth = 1.6;
+        ctx.strokeStyle = this.isDark ? "#0b1220" : "#ffffff";
+        ctx.stroke();
       }
     }
     ctx.restore();
@@ -6258,7 +6799,7 @@ var Plot = class {
         tip.appendChild(el);
       }
     } else {
-      const xfmt = this.axisX.config.format ?? defaultFormat;
+      const xfmt = this.axisX.config.format ?? ((v) => this.scaleX.formatTick(v));
       const header = document.createElement("div");
       header.style.opacity = "0.7";
       header.style.marginBottom = "3px";
@@ -6298,7 +6839,7 @@ var Plot = class {
   }
   // ---- Interaction ----------------------------------------------------------
   updateCursor() {
-    this.axisCanvas.style.cursor = this.mode === "pan" ? "grab" : "crosshair";
+    this.axisCanvas.style.cursor = this.drawTool ? "crosshair" : this.mode === "pan" ? "grab" : "crosshair";
   }
   axisLock() {
     if (this.mode === "box-x") return { x: true, y: false };
@@ -6349,6 +6890,7 @@ var Plot = class {
   attachInteraction() {
     const el = this.axisCanvas;
     el.style.touchAction = "none";
+    el.style.outline = "none";
     el.addEventListener(
       "wheel",
       (e) => {
@@ -6364,6 +6906,10 @@ var Plot = class {
     );
     let panning = false;
     let selecting = false;
+    let drawing = false;
+    let drawStart = { x: 0, y: 0 };
+    let handleDrag = null;
+    let bodyDrag = null;
     let axisDrag = null;
     let lastX = 0;
     let lastY = 0;
@@ -6372,6 +6918,7 @@ var Plot = class {
     let downX = 0;
     let downY = 0;
     el.addEventListener("pointerdown", (e) => {
+      if (e.button !== 0) return;
       el.setPointerCapture(e.pointerId);
       this.hoverPx = null;
       const rect = el.getBoundingClientRect();
@@ -6380,19 +6927,34 @@ var Plot = class {
       downX = px;
       downY = py;
       const zone = this.zoneAt(px, py);
+      const drawHit = !this.drawTool && zone.type === "plot" && this.drawings.length ? this.hitDrawing(px, py) : { index: -1, handle: -1 };
       if (zone.type === "x") {
         axisDrag = "x";
         lastX = e.clientX;
       } else if (zone.type === "y") {
         axisDrag = { y: zone.id };
         lastY = e.clientY;
+      } else if (this.drawTool) {
+        drawing = true;
+        drawStart = this.dataAtPx(px, py);
+        this.pendingDrawing = this.buildDrawing(this.drawTool, drawStart, drawStart);
+        this.requestRender();
+      } else if (drawHit.index >= 0) {
+        this.selectedDrawing = drawHit.index;
+        el.focus({ preventScroll: true });
+        if (drawHit.handle >= 0) handleDrag = drawHit;
+        else bodyDrag = { index: drawHit.index, last: this.dataAtPx(px, py) };
+        el.style.cursor = "grabbing";
+        this.requestRender();
       } else if (this.mode === "pan") {
+        this.selectedDrawing = -1;
         panning = true;
         lastX = e.clientX;
         lastY = e.clientY;
         el.style.cursor = "grabbing";
         if (this.crosshair) this.setPress(px, py);
       } else {
+        this.selectedDrawing = -1;
         selecting = true;
         startX = px;
         startY = py;
@@ -6411,12 +6973,25 @@ var Plot = class {
         this.panY(axisDrag.y, e.clientY - lastY, region);
         lastY = e.clientY;
         this.requestRender();
+      } else if (handleDrag) {
+        const c = this.dataAtPx(e.clientX - rect.left, e.clientY - rect.top);
+        this.setDrawingHandle(this.drawings[handleDrag.index], handleDrag.handle, c.x, c.y);
+        this.requestRender();
+      } else if (bodyDrag) {
+        const c = this.dataAtPx(e.clientX - rect.left, e.clientY - rect.top);
+        this.translateDrawing(this.drawings[bodyDrag.index], c.x - bodyDrag.last.x, c.y - bodyDrag.last.y);
+        bodyDrag.last = c;
+        this.requestRender();
       } else if (panning) {
         this.panX(e.clientX - lastX, region);
         this.panY(null, e.clientY - lastY, region);
         lastX = e.clientX;
         lastY = e.clientY;
         this.requestRender();
+      } else if (drawing && this.drawTool) {
+        const c = this.dataAtPx(e.clientX - rect.left, e.clientY - rect.top);
+        this.pendingDrawing = this.buildDrawing(this.drawTool, drawStart, c);
+        this.requestRender();
       } else if (selecting) {
         this.drawSelection(startX, startY, e.clientX - rect.left, e.clientY - rect.top);
       } else {
@@ -6430,12 +7005,32 @@ var Plot = class {
           el.style.cursor = "ns-resize";
           this.setHover(null);
         } else {
-          this.updateCursor();
-          if (this.hoverEnabled) this.setHover({ x: px, y: py });
+          const hit = !this.drawTool && this.drawings.length ? this.hitDrawing(px, py) : { index: -1, handle: -1 };
+          if (hit.index >= 0) {
+            if (this.hoverDrawing !== hit.index) {
+              this.hoverDrawing = hit.index;
+              this.requestRender();
+            }
+            el.style.cursor = hit.handle >= 0 ? "grab" : "pointer";
+            this.setHover(null);
+          } else {
+            if (this.hoverDrawing !== -1) {
+              this.hoverDrawing = -1;
+              this.requestRender();
+            }
+            this.updateCursor();
+            if (this.hoverEnabled) this.setHover({ x: px, y: py });
+          }
         }
       }
     });
-    el.addEventListener("pointerleave", () => this.setHover(null));
+    el.addEventListener("pointerleave", () => {
+      this.setHover(null);
+      if (this.hoverDrawing !== -1) {
+        this.hoverDrawing = -1;
+        this.requestRender();
+      }
+    });
     const end = (e) => {
       if (el.hasPointerCapture(e.pointerId)) el.releasePointerCapture(e.pointerId);
       if (this.pressPx) {
@@ -6448,6 +7043,20 @@ var Plot = class {
       const isClick = e.type === "pointerup" && !axisDrag && Math.hypot(upPx - downX, upPy - downY) < 4;
       if (axisDrag) {
         axisDrag = null;
+      } else if (handleDrag) {
+        handleDrag = null;
+        this.updateCursor();
+        this.requestRender();
+      } else if (bodyDrag) {
+        bodyDrag = null;
+        this.updateCursor();
+        this.requestRender();
+      } else if (drawing) {
+        drawing = false;
+        const moved = Math.hypot(upPx - downX, upPy - downY);
+        if (this.pendingDrawing && (this.drawTool === "hline" || moved >= 3)) this.drawings.push(this.pendingDrawing);
+        this.pendingDrawing = null;
+        this.requestRender();
       } else if (panning) {
         panning = false;
         this.updateCursor();
@@ -6456,10 +7065,34 @@ var Plot = class {
         if (!isClick) this.applySelection(startX, startY, upPx, upPy);
         this.selectionDiv.style.display = "none";
       }
-      if (isClick) this.handleClick(upPx, upPy);
+      if (isClick && this.drawTool === null && this.selectedDrawing < 0) this.handleClick(upPx, upPy);
     };
     el.addEventListener("pointerup", end);
     el.addEventListener("pointercancel", end);
+    el.addEventListener("dblclick", (e) => {
+      const rect = el.getBoundingClientRect();
+      const hit = this.hitDrawing(e.clientX - rect.left, e.clientY - rect.top);
+      if (hit.index >= 0) {
+        e.preventDefault();
+        this.selectedDrawing = hit.index;
+        this.renameDrawing(hit.index);
+      }
+    });
+    el.addEventListener("contextmenu", (e) => {
+      const rect = el.getBoundingClientRect();
+      const hit = this.hitDrawing(e.clientX - rect.left, e.clientY - rect.top);
+      if (hit.index >= 0) {
+        e.preventDefault();
+        this.showDrawMenu(e.clientX, e.clientY, hit.index);
+      }
+    });
+    el.tabIndex = el.tabIndex >= 0 ? el.tabIndex : 0;
+    el.addEventListener("keydown", (e) => {
+      if ((e.key === "Delete" || e.key === "Backspace") && this.selectedDrawing >= 0) {
+        e.preventDefault();
+        this.removeDrawing(this.selectedDrawing);
+      }
+    });
   }
   setHover(px) {
     const had = this.hoverPx !== null;
@@ -6890,6 +7523,41 @@ var PolarPlot = class {
     this.retransform();
     this.requestRender();
   }
+  // --- Export ---------------------------------------------------------------
+  /** Composite grid → data → overlay into one canvas at device resolution. */
+  compositeCanvas(background) {
+    this.render();
+    const w = this.dataCanvas.width, h = this.dataCanvas.height;
+    const out = document.createElement("canvas");
+    out.width = w;
+    out.height = h;
+    const ctx = out.getContext("2d");
+    const bg = background ?? (this.isDark ? "#0b1220" : "#ffffff");
+    if (bg !== "transparent") {
+      ctx.fillStyle = bg;
+      ctx.fillRect(0, 0, w, h);
+    }
+    ctx.drawImage(this.gridCanvas, 0, 0);
+    ctx.drawImage(this.dataCanvas, 0, 0);
+    ctx.drawImage(this.overlayCanvas, 0, 0);
+    return out;
+  }
+  /** Export the current view as a data URL (default PNG). */
+  toDataURL(type = "image/png", opts = {}) {
+    return this.compositeCanvas(opts.background).toDataURL(type, opts.quality);
+  }
+  /** Export the current view as a `Blob` (default PNG). */
+  toBlob(type = "image/png", opts = {}) {
+    return canvasToBlob(this.compositeCanvas(opts.background), type, opts.quality);
+  }
+  /** Download the current view as an image (PNG by default). */
+  downloadImage(filename = "chart.png", type = "image/png", opts = {}) {
+    return downloadCanvas(this.compositeCanvas(opts.background), filename, type, opts.quality);
+  }
+  /** Copy the current view to the clipboard as a PNG. */
+  copyToClipboard(opts = {}) {
+    return copyCanvasToClipboard(this.compositeCanvas(opts.background));
+  }
   destroy() {
     this.resizeObserver.disconnect();
     for (const e of this.entries) e.layer.dispose();
@@ -9366,6 +10034,7 @@ var Plot3D = class {
     this.ambient = 0.35;
     this.controlsEl = null;
     this.resetBtn = null;
+    this.downloadBtn = null;
     /** Screen position (device px) of the picked point, for the highlight ring. */
     this.hoverHit = null;
     this.container = container;
@@ -9461,6 +10130,31 @@ var Plot3D = class {
       container.appendChild(btn);
       this.resetBtn = btn;
     }
+    if (options.downloadButton !== false) {
+      const dl = document.createElement("button");
+      dl.type = "button";
+      dl.title = "Download PNG";
+      dl.textContent = "\u2913";
+      Object.assign(dl.style, {
+        position: "absolute",
+        bottom: "8px",
+        left: options.resetButton !== false ? "40px" : "8px",
+        zIndex: "6",
+        width: "26px",
+        height: "26px",
+        padding: "0",
+        cursor: "pointer",
+        borderRadius: "6px",
+        font: "16px system-ui, sans-serif",
+        lineHeight: "24px",
+        background: "rgba(15,23,42,0.8)",
+        color: "#cbd5e1",
+        border: "1px solid rgba(148,163,184,0.25)"
+      });
+      dl.addEventListener("click", () => void this.downloadImage());
+      container.appendChild(dl);
+      this.downloadBtn = dl;
+    }
     this.lineProgram = createProgram(this.gl, LINE_VERT, LINE_FRAG);
     this.lineUniforms = uniformLocations(this.gl, this.lineProgram, ["uVP", "uColor"]);
     this.boxVao = this.gl.createVertexArray();
@@ -9671,6 +10365,38 @@ var Plot3D = class {
     this.recompute();
     this.requestRender();
   }
+  // --- Export ---------------------------------------------------------------
+  /** Copy the current 3D frame (already composited on one canvas) into a fresh canvas. */
+  compositeCanvas(background) {
+    this.render();
+    const w = this.canvas.width, h = this.canvas.height;
+    const out = document.createElement("canvas");
+    out.width = w;
+    out.height = h;
+    const ctx = out.getContext("2d");
+    if (background && background !== "transparent") {
+      ctx.fillStyle = background;
+      ctx.fillRect(0, 0, w, h);
+    }
+    ctx.drawImage(this.canvas, 0, 0);
+    return out;
+  }
+  /** Export the current view as a data URL (default PNG). */
+  toDataURL(type = "image/png", opts = {}) {
+    return this.compositeCanvas(opts.background).toDataURL(type, opts.quality);
+  }
+  /** Export the current view as a `Blob` (default PNG). */
+  toBlob(type = "image/png", opts = {}) {
+    return canvasToBlob(this.compositeCanvas(opts.background), type, opts.quality);
+  }
+  /** Download the current view as an image (PNG by default). */
+  downloadImage(filename = "chart.png", type = "image/png", opts = {}) {
+    return downloadCanvas(this.compositeCanvas(opts.background), filename, type, opts.quality);
+  }
+  /** Copy the current view to the clipboard as a PNG. */
+  copyToClipboard(opts = {}) {
+    return copyCanvasToClipboard(this.compositeCanvas(opts.background));
+  }
   destroy() {
     this.resizeObserver.disconnect();
     this.autoRotateSpeed = 0;
@@ -9687,6 +10413,7 @@ var Plot3D = class {
     this.colorbarDiv.remove();
     this.tooltip.remove();
     this.resetBtn?.remove();
+    this.downloadBtn?.remove();
     this.container.removeChild(this.canvas);
   }
   recompute() {
@@ -10202,6 +10929,137 @@ function firstFinite(values) {
   for (let i = 0; i < values.length; i++) if (!Number.isNaN(values[i])) return i;
   return -1;
 }
+function rollingHigh(v, period) {
+  const n = v.length, out = new Float64Array(n).fill(NaN);
+  for (let i = period - 1; i < n; i++) {
+    let m = -Infinity;
+    for (let k = 0; k < period; k++) m = Math.max(m, v[i - k]);
+    out[i] = m;
+  }
+  return out;
+}
+function rollingLow(v, period) {
+  const n = v.length, out = new Float64Array(n).fill(NaN);
+  for (let i = period - 1; i < n; i++) {
+    let m = Infinity;
+    for (let k = 0; k < period; k++) m = Math.min(m, v[i - k]);
+    out[i] = m;
+  }
+  return out;
+}
+function stochastic(high, low, close, kPeriod = 14, dPeriod = 3) {
+  const n = Math.min(high.length, low.length, close.length);
+  const hh = rollingHigh(high, kPeriod), ll = rollingLow(low, kPeriod);
+  const k = new Float64Array(n).fill(NaN);
+  for (let i = 0; i < n; i++) {
+    if (!Number.isNaN(hh[i])) {
+      const rng = hh[i] - ll[i];
+      k[i] = rng === 0 ? 50 : 100 * (close[i] - ll[i]) / rng;
+    }
+  }
+  return { k, d: sma(k, dPeriod) };
+}
+function keltner(high, low, close, period = 20, mult = 2, atrPeriod = 10) {
+  const middle = ema(close, period);
+  const a = atr(high, low, close, atrPeriod);
+  const n = close.length, upper = new Float64Array(n).fill(NaN), lower = new Float64Array(n).fill(NaN);
+  for (let i = 0; i < n; i++) if (!Number.isNaN(middle[i]) && !Number.isNaN(a[i])) {
+    upper[i] = middle[i] + mult * a[i];
+    lower[i] = middle[i] - mult * a[i];
+  }
+  return { middle, upper, lower };
+}
+function obv(close, volume) {
+  const n = Math.min(close.length, volume.length), out = new Float64Array(n);
+  for (let i = 1; i < n; i++) {
+    const d = close[i] - close[i - 1];
+    out[i] = out[i - 1] + (d > 0 ? volume[i] : d < 0 ? -volume[i] : 0);
+  }
+  return out;
+}
+function ichimoku(high, low, convPeriod = 9, basePeriod = 26, spanBPeriod = 52) {
+  const n = Math.min(high.length, low.length);
+  const mid = (p) => {
+    const hi = rollingHigh(high, p), lo = rollingLow(low, p), o = new Float64Array(n).fill(NaN);
+    for (let i = 0; i < n; i++) if (!Number.isNaN(hi[i])) o[i] = (hi[i] + lo[i]) / 2;
+    return o;
+  };
+  const conversion = mid(convPeriod), base = mid(basePeriod), spanB = mid(spanBPeriod);
+  const spanA = new Float64Array(n).fill(NaN);
+  for (let i = 0; i < n; i++) if (!Number.isNaN(conversion[i]) && !Number.isNaN(base[i])) spanA[i] = (conversion[i] + base[i]) / 2;
+  return { conversion, base, spanA, spanB };
+}
+function adx(high, low, close, period = 14) {
+  const n = Math.min(high.length, low.length, close.length);
+  const plusDI = new Float64Array(n).fill(NaN), minusDI = new Float64Array(n).fill(NaN), out = new Float64Array(n).fill(NaN);
+  if (n <= period) return { adx: out, plusDI, minusDI };
+  const tr = new Float64Array(n), pdm = new Float64Array(n), mdm = new Float64Array(n);
+  for (let i = 1; i < n; i++) {
+    const up = high[i] - high[i - 1], down = low[i - 1] - low[i];
+    pdm[i] = up > down && up > 0 ? up : 0;
+    mdm[i] = down > up && down > 0 ? down : 0;
+    const pc = close[i - 1];
+    tr[i] = Math.max(high[i] - low[i], Math.abs(high[i] - pc), Math.abs(low[i] - pc));
+  }
+  let sTR = 0, sP = 0, sM = 0;
+  for (let i = 1; i <= period; i++) {
+    sTR += tr[i];
+    sP += pdm[i];
+    sM += mdm[i];
+  }
+  const dx = new Float64Array(n).fill(NaN);
+  const diAt = (i) => {
+    const p = sTR === 0 ? 0 : 100 * sP / sTR, m = sTR === 0 ? 0 : 100 * sM / sTR;
+    plusDI[i] = p;
+    minusDI[i] = m;
+    const sum = p + m;
+    dx[i] = sum === 0 ? 0 : 100 * Math.abs(p - m) / sum;
+  };
+  diAt(period);
+  for (let i = period + 1; i < n; i++) {
+    sTR = sTR - sTR / period + tr[i];
+    sP = sP - sP / period + pdm[i];
+    sM = sM - sM / period + mdm[i];
+    diAt(i);
+  }
+  const start = period, adxStart = start + period;
+  if (adxStart < n) {
+    let acc = 0;
+    for (let i = start + 1; i <= adxStart; i++) acc += dx[i];
+    let prev = acc / period;
+    out[adxStart] = prev;
+    for (let i = adxStart + 1; i < n; i++) {
+      prev = (prev * (period - 1) + dx[i]) / period;
+      out[i] = prev;
+    }
+  }
+  return { adx: out, plusDI, minusDI };
+}
+function superTrend(high, low, close, period = 10, mult = 3) {
+  const n = Math.min(high.length, low.length, close.length);
+  const a = atr(high, low, close, period);
+  const trend = new Float64Array(n).fill(NaN), direction = new Float64Array(n).fill(NaN);
+  const finalUpper = new Float64Array(n), finalLower = new Float64Array(n);
+  let dir = 1;
+  for (let i = 0; i < n; i++) {
+    if (Number.isNaN(a[i])) continue;
+    const hl2 = (high[i] + low[i]) / 2;
+    const bU = hl2 + mult * a[i], bL = hl2 - mult * a[i];
+    const prevValid = i > 0 && !Number.isNaN(a[i - 1]);
+    finalUpper[i] = prevValid && (bU < finalUpper[i - 1] || close[i - 1] > finalUpper[i - 1]) ? bU : prevValid ? finalUpper[i - 1] : bU;
+    finalLower[i] = prevValid && (bL > finalLower[i - 1] || close[i - 1] < finalLower[i - 1]) ? bL : prevValid ? finalLower[i - 1] : bL;
+    if (!prevValid) dir = close[i] >= hl2 ? 1 : -1;
+    else if (dir === 1 && close[i] < finalLower[i]) dir = -1;
+    else if (dir === -1 && close[i] > finalUpper[i]) dir = 1;
+    direction[i] = dir;
+    trend[i] = dir === 1 ? finalLower[i] : finalUpper[i];
+  }
+  return { trend, direction };
+}
+function fibRetracements(high, low, ratios = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1]) {
+  const span = high - low;
+  return ratios.map((r) => ({ ratio: r, price: high - span * r }));
+}
 
 // src/finance/transforms.ts
 function heikinAshi(d) {
@@ -10437,17 +11295,908 @@ 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++) {
+    const c = text[i];
+    if (inQuotes) {
+      if (c === '"') {
+        if (text[i + 1] === '"') {
+          field += '"';
+          i++;
+        } else inQuotes = false;
+      } else field += c;
+      continue;
+    }
+    if (c === '"') {
+      inQuotes = true;
+    } else if (c === delim) {
+      row.push(field);
+      field = "";
+    } else if (c === "\n" || c === "\r") {
+      if (c === "\r" && text[i + 1] === "\n") i++;
+      row.push(field);
+      rows.push(row);
+      row = [];
+      field = "";
+    } else field += c;
+  }
+  if (field.length > 0 || row.length > 0) {
+    row.push(field);
+    rows.push(row);
+  }
+  return rows;
+}
+function parseCSV(text, opts = {}) {
+  const delim = opts.delimiter ?? ",";
+  const useHeader = opts.header !== false;
+  let all = tokenize(text, delim);
+  if (opts.skipEmpty !== false) all = all.filter((r) => !(r.length === 1 && r[0].trim() === ""));
+  let headers;
+  let dataRows;
+  if (useHeader && all.length) {
+    headers = all[0].map((h) => h.trim());
+    dataRows = all.slice(1);
+  } else {
+    const n = all[0]?.length ?? 0;
+    headers = Array.from({ length: n }, (_, i) => `col${i}`);
+    dataRows = all;
+  }
+  const idx = (name) => typeof name === "number" ? name : headers.indexOf(name);
+  return {
+    headers,
+    rows: dataRows,
+    get length() {
+      return dataRows.length;
+    },
+    column(name) {
+      const i = idx(name);
+      return dataRows.map((r) => r[i] ?? "");
+    },
+    numeric(name) {
+      const i = idx(name);
+      const out = new Float64Array(dataRows.length);
+      for (let k = 0; k < dataRows.length; k++) out[k] = Number.parseFloat(dataRows[k][i] ?? "");
+      return out;
+    }
+  };
+}
+
+// src/data/downsample.ts
+function lttb(x, y, threshold) {
+  const n = Math.min(x.length, y.length);
+  if (threshold >= n || threshold <= 2) {
+    const rx = new Float64Array(n), ry = new Float64Array(n);
+    for (let i = 0; i < n; i++) {
+      rx[i] = x[i];
+      ry[i] = y[i];
+    }
+    return { x: rx, y: ry };
+  }
+  const sx = new Float64Array(threshold), sy = new Float64Array(threshold);
+  const bucket = (n - 2) / (threshold - 2);
+  let a = 0;
+  sx[0] = x[0];
+  sy[0] = y[0];
+  let out = 1;
+  for (let i = 0; i < threshold - 2; i++) {
+    let avgX = 0, avgY = 0;
+    let rs = Math.floor((i + 1) * bucket) + 1;
+    const re = Math.min(Math.floor((i + 2) * bucket) + 1, n);
+    const rlen = re - rs || 1;
+    for (let k = rs; k < re; k++) {
+      avgX += x[k];
+      avgY += y[k];
+    }
+    avgX /= rlen;
+    avgY /= rlen;
+    let cs = Math.floor(i * bucket) + 1;
+    const ce = Math.floor((i + 1) * bucket) + 1;
+    const ax = x[a], ay = y[a];
+    let maxArea = -1, chosen = cs, cx = x[cs], cy = y[cs];
+    for (; cs < ce; cs++) {
+      const area2 = Math.abs((ax - avgX) * (y[cs] - ay) - (ax - x[cs]) * (avgY - ay));
+      if (area2 > maxArea) {
+        maxArea = area2;
+        chosen = cs;
+        cx = x[cs];
+        cy = y[cs];
+      }
+    }
+    sx[out] = cx;
+    sy[out] = cy;
+    out++;
+    a = chosen;
+  }
+  sx[out] = x[n - 1];
+  sy[out] = y[n - 1];
+  return { x: sx, y: sy };
+}
+
+// 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"
+];
+function worst(row, w, sum) {
+  if (row.length === 0 || w === 0) return Infinity;
+  let max = -Infinity, min = Infinity;
+  for (const a of row) {
+    if (a > max) max = a;
+    if (a < min) min = a;
+  }
+  const s2 = sum * sum, w2 = w * w;
+  return Math.max(w2 * max / s2, s2 / (w2 * min));
+}
+function treemapLayout(items, extent = DEFAULT_EXTENT) {
+  const clean = items.filter((it) => it.value > 0);
+  if (clean.length === 0) return [];
+  const order = clean.map((_, i) => i).sort((a, b) => clean[b].value - clean[a].value);
+  const total = clean.reduce((s, it) => s + it.value, 0);
+  let [x0, x1] = extent.x;
+  let [y0, y1] = extent.y;
+  const totalArea = Math.abs(x1 - x0) * Math.abs(y1 - y0);
+  const areas = order.map((i) => clean[i].value / total * totalArea);
+  const cells = [];
+  let pos = 0;
+  const layoutRow = (row, startPos) => {
+    const rowSum = row.reduce((s, a) => s + a, 0);
+    const w = Math.min(Math.abs(x1 - x0), Math.abs(y1 - y0));
+    if (rowSum === 0 || w === 0) return;
+    const horizontal = Math.abs(y1 - y0) < Math.abs(x1 - x0);
+    if (horizontal) {
+      const rowW = rowSum / Math.abs(y1 - y0);
+      let cy = y0;
+      for (let k = 0; k < row.length; k++) {
+        const idx = order[startPos + k];
+        const h = row[k] / rowSum * Math.abs(y1 - y0);
+        cells.push({
+          label: clean[idx].label,
+          value: clean[idx].value,
+          color: clean[idx].color,
+          x0,
+          y0: cy,
+          x1: x0 + rowW,
+          y1: cy + h
+        });
+        cy += h;
+      }
+      x0 += rowW;
+    } else {
+      const rowH = rowSum / Math.abs(x1 - x0);
+      let cx = x0;
+      for (let k = 0; k < row.length; k++) {
+        const idx = order[startPos + k];
+        const wdt = row[k] / rowSum * Math.abs(x1 - x0);
+        cells.push({
+          label: clean[idx].label,
+          value: clean[idx].value,
+          color: clean[idx].color,
+          x0: cx,
+          y0,
+          x1: cx + wdt,
+          y1: y0 + rowH
+        });
+        cx += wdt;
+      }
+      y0 += rowH;
+    }
+  };
+  while (pos < areas.length) {
+    const w = Math.min(Math.abs(x1 - x0), Math.abs(y1 - y0));
+    const row = [];
+    let rowSum = 0;
+    let start = pos;
+    while (pos < areas.length) {
+      const a = areas[pos];
+      const withNew = worst([...row, a], w, rowSum + a);
+      const current = worst(row, w, rowSum);
+      if (row.length > 0 && withNew > current) break;
+      row.push(a);
+      rowSum += a;
+      pos++;
+    }
+    layoutRow(row, start);
+  }
+  return cells;
+}
+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 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]
+  }));
+  const layer = plot.addPatches({
+    patches,
+    opacity: opts.opacity,
+    name: opts.name,
+    renderType: opts.renderType
+  });
+  if (opts.labels !== false) {
+    const minW = Math.abs(extent.x[1] - extent.x[0]) * LABEL_MIN_FRAC;
+    const minH = Math.abs(extent.y[1] - extent.y[0]) * LABEL_MIN_FRAC;
+    for (const c of cells) {
+      if (Math.abs(c.x1 - c.x0) < minW || Math.abs(c.y1 - c.y0) < minH) continue;
+      plot.addAnnotation({
+        type: "label",
+        x: (c.x0 + c.x1) / 2,
+        y: (c.y0 + c.y1) / 2,
+        text: c.label,
+        align: "center"
+      });
+    }
+  }
+  return layer;
+}
+
+// src/charts/funnel.ts
+var FUNNEL_PALETTE = [
+  "#4e79a7",
+  "#f28e2b",
+  "#e15759",
+  "#76b7b2",
+  "#59a14f",
+  "#edc948",
+  "#b07aa1",
+  "#ff9da7",
+  "#9c755f",
+  "#bab0ac"
+];
+function funnelLayout(items, opts = {}) {
+  const n = items.length;
+  if (n === 0) return [];
+  const fullW = opts.width ?? 1;
+  const fullH = opts.height ?? 1;
+  const neck = opts.neck ?? 0.4;
+  const maxV = items.reduce((m, it) => Math.max(m, it.value), 0) || 1;
+  const halfW = (i) => Math.max(0, items[i].value) / maxV * fullW * 0.5;
+  const stageH = fullH / n;
+  const stages = [];
+  for (let i = 0; i < n; i++) {
+    const top = fullH - i * stageH;
+    const bot = fullH - (i + 1) * stageH;
+    const wTop = halfW(i);
+    const wBot = i + 1 < n ? halfW(i + 1) : wTop * neck;
+    stages.push({
+      label: items[i].label,
+      value: items[i].value,
+      color: items[i].color,
+      // CW ring: top-left, top-right, bottom-right, bottom-left.
+      poly: {
+        x: [-wTop, wTop, wBot, -wBot],
+        y: [top, top, bot, bot]
+      }
+    });
+  }
+  return stages;
+}
+function addFunnel(plot, opts) {
+  const palette = opts.colors && opts.colors.length ? 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]
+  }));
+  const layer = plot.addPatches({
+    patches,
+    opacity: opts.opacity,
+    name: opts.name,
+    renderType: opts.renderType
+  });
+  if (opts.labels !== false) {
+    for (const s of stages) {
+      const cy = (s.poly.y[0] + s.poly.y[2]) / 2;
+      plot.addAnnotation({ type: "label", x: 0, y: cy, text: s.label, align: "center" });
+    }
+  }
+  return layer;
+}
+
+// src/charts/sunburst.ts
+var DEFAULT_COLORS2 = [
+  "#3b82f6",
+  "#f472b6",
+  "#22d3ee",
+  "#a3e635",
+  "#fbbf24",
+  "#a78bfa",
+  "#34d399",
+  "#fb7185",
+  "#60a5fa",
+  "#f59e0b"
+];
+function nodeValue(node) {
+  if (node.children && node.children.length > 0) {
+    let sum = 0;
+    for (const c of node.children) sum += nodeValue(c);
+    return sum;
+  }
+  return Math.max(0, node.value ?? 0);
+}
+function sunburstLayout(root, opts = {}) {
+  const ringWidth = opts.ringWidth ?? 1;
+  const center = opts.center ?? 0;
+  const start = opts.startAngle ?? Math.PI / 2;
+  const out = [];
+  const recurse = (node, depth2, a0, a1) => {
+    const r0 = center + depth2 * ringWidth;
+    out.push({ name: node.name, depth: depth2, a0, a1, r0, r1: r0 + ringWidth, color: node.color });
+    if (!node.children || node.children.length === 0) return;
+    const total = nodeValue(node) || 1;
+    let a = a0;
+    for (const child of node.children) {
+      const span = (a1 - a0) * nodeValue(child) / total;
+      recurse(child, depth2 + 1, a, a + span);
+      a += span;
+    }
+  };
+  recurse(root, 0, start, start + Math.PI * 2);
+  return out;
+}
+function arcRing(a0, a1, r0, r1, color) {
+  const step = Math.PI / 90;
+  const segs = Math.max(1, Math.ceil(Math.abs(a1 - a0) / step));
+  const x = [];
+  const y = [];
+  for (let s = 0; s <= segs; s++) {
+    const t = a0 + (a1 - a0) * s / segs;
+    x.push(r1 * Math.cos(t));
+    y.push(r1 * Math.sin(t));
+  }
+  for (let s = segs; s >= 0; s--) {
+    const t = a0 + (a1 - a0) * s / segs;
+    x.push(r0 * Math.cos(t));
+    y.push(r0 * Math.sin(t));
+  }
+  return { x, y, color };
+}
+function addSunburst(plot, opts) {
+  const palette = 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];
+    return arcRing(arc.a0, arc.a1, arc.r0, arc.r1, color);
+  });
+  return plot.addPatches({
+    patches,
+    opacity: opts.opacity,
+    name: opts.name,
+    renderType: opts.renderType
+  });
+}
+
+// src/charts/gauge.ts
+var DEG = Math.PI / 180;
+function arcRing2(a0, a1, r0, r1) {
+  const step = Math.PI / 90;
+  const segs = Math.max(1, Math.ceil(Math.abs(a1 - a0) / step));
+  const x = [];
+  const y = [];
+  for (let s = 0; s <= segs; s++) {
+    const t = a0 + (a1 - a0) * s / segs;
+    x.push(r1 * Math.cos(t));
+    y.push(r1 * Math.sin(t));
+  }
+  for (let s = segs; s >= 0; s--) {
+    const t = a0 + (a1 - a0) * s / segs;
+    x.push(r0 * Math.cos(t));
+    y.push(r0 * Math.sin(t));
+  }
+  return { x, y };
+}
+function gaugeLayout(opts) {
+  const min = opts.min ?? 0;
+  const max = opts.max ?? 100;
+  const a0 = (opts.startAngle ?? 200) * DEG;
+  const a1 = (opts.endAngle ?? -20) * DEG;
+  const rOut = opts.radius ?? 1;
+  const rIn = opts.innerRadius ?? 0.7;
+  const span = max - min || 1;
+  const t = Math.min(1, Math.max(0, (opts.value - min) / span));
+  const aVal = a0 + (a1 - a0) * t;
+  const len = rOut * 0.95;
+  const hw = (rOut - rIn) * 0.12;
+  const px = Math.cos(aVal + Math.PI / 2), py = Math.sin(aVal + Math.PI / 2);
+  const needle = {
+    x: [len * Math.cos(aVal), hw * px, -hw * px],
+    y: [len * Math.sin(aVal), hw * py, -hw * py]
+  };
+  return {
+    bg: arcRing2(a0, a1, rIn, rOut),
+    value: arcRing2(a0, aVal, rIn, rOut),
+    needle
+  };
+}
+function thresholdColor(value, thresholds, fallback) {
+  if (!thresholds || thresholds.length === 0) return fallback;
+  let color = fallback;
+  let best = -Infinity;
+  for (const th of thresholds) {
+    if (value >= th.value && th.value >= best) {
+      best = th.value;
+      color = th.color;
+    }
+  }
+  return color;
+}
+function addGauge(plot, opts) {
+  const track = opts.trackColor ?? "#e5e7eb";
+  const valColor = thresholdColor(opts.value, opts.thresholds, opts.color ?? "#3b82f6");
+  const needleColor = opts.needleColor ?? "#334155";
+  const geo = gaugeLayout({
+    value: opts.value,
+    min: opts.min,
+    max: opts.max,
+    startAngle: opts.startAngle,
+    endAngle: opts.endAngle
+  });
+  const patches = [
+    { x: geo.bg.x, y: geo.bg.y, color: track },
+    { x: geo.value.x, y: geo.value.y, color: valColor },
+    { x: geo.needle.x, y: geo.needle.y, color: needleColor }
+  ];
+  if (opts.label !== false) {
+    plot.addAnnotation({
+      type: "label",
+      x: 0,
+      y: -0.15,
+      text: opts.label ?? String(opts.value),
+      align: "center"
+    });
+  }
+  return plot.addPatches({ patches, name: opts.name, renderType: opts.renderType });
+}
+
+// src/charts/sankey.ts
+var DEFAULT_COLORS3 = [
+  "#3b82f6",
+  "#f472b6",
+  "#22d3ee",
+  "#a3e635",
+  "#fbbf24",
+  "#a78bfa",
+  "#34d399",
+  "#fb7185",
+  "#60a5fa",
+  "#f59e0b"
+];
+var RIBBON_SAMPLES = 20;
+function cubic(t, a, b, c, d) {
+  const u = 1 - t;
+  return u * u * u * a + 3 * u * u * t * b + 3 * u * t * t * c + t * t * t * d;
+}
+function sankeyLayout(nodes, links, opts = {}) {
+  const n = nodes.length;
+  const [ex0, ex1] = opts.extent?.x ?? [0, 1];
+  const [ey0, ey1] = opts.extent?.y ?? [0, 1];
+  const nodeWidth = opts.nodeWidth ?? 0.02;
+  const yHeight = ey1 - ey0;
+  const pad = (opts.nodePadding ?? 0.02) * yHeight;
+  if (n === 0) return { nodeRects: [], ribbons: [] };
+  const layer = new Array(n).fill(0);
+  const valid = links.filter((l) => l.source >= 0 && l.source < n && l.target >= 0 && l.target < n);
+  for (let iter = 0; iter < n; iter++) {
+    let changed = false;
+    for (const l of valid) {
+      if (layer[l.target] < layer[l.source] + 1) {
+        layer[l.target] = layer[l.source] + 1;
+        changed = true;
+      }
+    }
+    if (!changed) break;
+  }
+  const numLayers = Math.max(...layer) + 1;
+  const inSum = new Array(n).fill(0);
+  const outSum = new Array(n).fill(0);
+  for (const l of valid) {
+    const v = Math.max(0, l.value);
+    outSum[l.source] += v;
+    inSum[l.target] += v;
+  }
+  const flow = new Array(n);
+  for (let i = 0; i < n; i++) flow[i] = Math.max(inSum[i], outSum[i]);
+  const columns = Array.from({ length: numLayers }, () => []);
+  for (let i = 0; i < n; i++) columns[layer[i]].push(i);
+  let k = Infinity;
+  for (const col of columns) {
+    let sum = 0;
+    for (const i of col) sum += flow[i];
+    const avail = yHeight - (col.length - 1) * pad;
+    if (sum > 0 && avail > 0) k = Math.min(k, avail / sum);
+  }
+  if (!isFinite(k) || k <= 0) k = 0;
+  const nodeRects = [];
+  const rectOf = new Array(n).fill(null);
+  for (let li = 0; li < numLayers; li++) {
+    const col = columns[li];
+    const frac = numLayers > 1 ? li / (numLayers - 1) : 0.5;
+    const xc = ex0 + (ex1 - ex0 - nodeWidth) * frac;
+    const x0 = xc;
+    const x1 = xc + nodeWidth;
+    let colH = (col.length - 1) * pad;
+    for (const i of col) colH += k * flow[i];
+    let depth2 = Math.max(0, (yHeight - colH) / 2);
+    for (const i of col) {
+      const h = k * flow[i];
+      const yTop = ey1 - depth2;
+      const yBot = yTop - h;
+      const r = { i, x0, y0: yBot, x1, y1: yTop };
+      nodeRects.push(r);
+      rectOf[i] = r;
+      depth2 += h + pad;
+    }
+  }
+  const srcOff = new Array(n).fill(0);
+  const tgtOff = new Array(n).fill(0);
+  const ribbons = [];
+  for (let li = 0; li < links.length; li++) {
+    const l = links[li];
+    if (l.source < 0 || l.source >= n || l.target < 0 || l.target >= n) continue;
+    const sr = rectOf[l.source];
+    const tr = rectOf[l.target];
+    const thick = k * Math.max(0, l.value);
+    const sTop = sr.y1 - srcOff[l.source];
+    srcOff[l.source] += thick;
+    const tTop = tr.y1 - tgtOff[l.target];
+    tgtOff[l.target] += thick;
+    const sBot = sTop - thick;
+    const tBot = tTop - thick;
+    const sx = sr.x1;
+    const tx = tr.x0;
+    const mx = (sx + tx) / 2;
+    const x = [];
+    const y = [];
+    for (let s = 0; s <= RIBBON_SAMPLES; s++) {
+      const t = s / RIBBON_SAMPLES;
+      x.push(cubic(t, sx, mx, mx, tx));
+      y.push(cubic(t, sTop, sTop, tTop, tTop));
+    }
+    for (let s = 0; s <= RIBBON_SAMPLES; s++) {
+      const t = s / RIBBON_SAMPLES;
+      x.push(cubic(t, tx, mx, mx, sx));
+      y.push(cubic(t, tBot, tBot, sBot, sBot));
+    }
+    ribbons.push({ link: li, x, y });
+  }
+  return { nodeRects, ribbons };
+}
+function nodeColor(nodes, colors, i) {
+  return nodes[i].color ?? colors?.[i] ?? DEFAULT_COLORS3[i % DEFAULT_COLORS3.length];
+}
+var RIBBON_ALPHA = 0.5;
+function addSankey(plot, opts) {
+  const { nodes, links } = opts;
+  const { nodeRects, ribbons } = sankeyLayout(nodes, links, {
+    extent: opts.extent,
+    nodeWidth: opts.nodeWidth,
+    nodePadding: opts.nodePadding
+  });
+  const patches = [];
+  for (const rb of ribbons) {
+    const src = links[rb.link].source;
+    const base = parseColor(nodeColor(nodes, opts.colors, src));
+    const color = [base[0], base[1], base[2], base[3] * RIBBON_ALPHA];
+    patches.push({ x: rb.x, y: rb.y, color });
+  }
+  for (const r of nodeRects) {
+    patches.push({
+      x: [r.x0, r.x1, r.x1, r.x0],
+      y: [r.y0, r.y0, r.y1, r.y1],
+      color: nodeColor(nodes, opts.colors, r.i)
+    });
+  }
+  const layer = plot.addPatches({
+    patches,
+    opacity: opts.opacity ?? 1,
+    name: opts.name,
+    renderType: opts.renderType
+  });
+  if (opts.labels !== false) {
+    for (const r of nodeRects) {
+      plot.addAnnotation({
+        type: "label",
+        x: (r.x0 + r.x1) / 2,
+        y: (r.y0 + r.y1) / 2,
+        text: nodes[r.i].name,
+        align: "center"
+      });
+    }
+  }
+  return layer;
+}
+
+// src/charts/chord.ts
+var CHORD_PALETTE = [
+  "#4e79a7",
+  "#f28e2b",
+  "#e15759",
+  "#76b7b2",
+  "#59a14f",
+  "#edc948",
+  "#b07aa1",
+  "#ff9da7",
+  "#9c755f",
+  "#bab0ac"
+];
+function onCircle(r, a) {
+  return [r * Math.cos(a), r * Math.sin(a)];
+}
+function bezier(p0, p1, p2, t) {
+  const u = 1 - t;
+  const a = u * u, b = 2 * u * t, c = t * t;
+  return [a * p0[0] + b * p1[0] + c * p2[0], a * p0[1] + b * p1[1] + c * p2[1]];
+}
+function chordLayout(matrix, opts = {}) {
+  const n = matrix.length;
+  const radius = opts.radius ?? 1;
+  const padAngle = opts.padAngle ?? 0.1 * 2 * Math.PI;
+  const arcWidth = (opts.arcWidth ?? 0.06) * radius;
+  const samples = Math.max(2, opts.samples ?? 24);
+  const inner = radius - arcWidth;
+  const rowSums = matrix.map((row) => row.reduce((s, v) => s + Math.max(0, v || 0), 0));
+  const total = rowSums.reduce((s, v) => s + v, 0);
+  if (n === 0 || total <= 0) return { groupArcs: [], ribbons: [] };
+  const gaps = Math.min(padAngle, 0.9 * 2 * Math.PI);
+  const usable = 2 * Math.PI - gaps;
+  const gap = n > 0 ? gaps / n : 0;
+  const groupStart = new Array(n);
+  const groupEnd = new Array(n);
+  const subStart = matrix.map(() => new Array(n).fill(0));
+  const subEnd = matrix.map(() => new Array(n).fill(0));
+  let angle = 0;
+  for (let i = 0; i < n; i++) {
+    groupStart[i] = angle;
+    let a = angle;
+    for (let j = 0; j < n; j++) {
+      const w = Math.max(0, matrix[i][j] || 0);
+      const span = total > 0 ? w / total * usable : 0;
+      subStart[i][j] = a;
+      subEnd[i][j] = a + span;
+      a += span;
+    }
+    groupEnd[i] = a;
+    angle = a + gap;
+  }
+  const groupArcs = [];
+  for (let i = 0; i < n; i++) {
+    const a0 = groupStart[i], a1 = groupEnd[i];
+    if (a1 <= a0) continue;
+    const x = [], y = [];
+    for (let s = 0; s <= samples; s++) {
+      const [px, py] = onCircle(radius, a0 + (a1 - a0) * s / samples);
+      x.push(px);
+      y.push(py);
+    }
+    for (let s = samples; s >= 0; s--) {
+      const [px, py] = onCircle(inner, a0 + (a1 - a0) * s / samples);
+      x.push(px);
+      y.push(py);
+    }
+    groupArcs.push({ i, x, y });
+  }
+  const center = [0, 0];
+  const ribbons = [];
+  for (let i = 0; i < n; i++) {
+    for (let j = i; j < n; j++) {
+      const wij = Math.max(0, matrix[i][j] || 0);
+      const wji = Math.max(0, matrix[j][i] || 0);
+      if (wij <= 0 && wji <= 0) continue;
+      const iA0 = subStart[i][j], iA1 = subEnd[i][j];
+      const jA0 = subStart[j][i], jA1 = subEnd[j][i];
+      const x = [], y = [];
+      for (let s = 0; s <= samples; s++) {
+        const [px, py] = onCircle(inner, iA0 + (iA1 - iA0) * s / samples);
+        x.push(px);
+        y.push(py);
+      }
+      const iEnd = onCircle(inner, iA1);
+      const jStart = onCircle(inner, jA0);
+      for (let s = 1; s <= samples; s++) {
+        const [px, py] = bezier(iEnd, center, jStart, s / samples);
+        x.push(px);
+        y.push(py);
+      }
+      for (let s = 0; s <= samples; s++) {
+        const [px, py] = onCircle(inner, jA0 + (jA1 - jA0) * s / samples);
+        x.push(px);
+        y.push(py);
+      }
+      const jEnd = onCircle(inner, jA1);
+      const iStart = onCircle(inner, iA0);
+      for (let s = 1; s <= samples; s++) {
+        const [px, py] = bezier(jEnd, center, iStart, s / samples);
+        x.push(px);
+        y.push(py);
+      }
+      ribbons.push({ i, j, x, y });
+    }
+  }
+  return { groupArcs, ribbons };
+}
+function addChord(plot, opts) {
+  const radius = opts.radius ?? 1;
+  const palette = opts.colors && opts.colors.length ? 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 patches = [];
+  for (const rb of ribbons) {
+    patches.push({ x: rb.x, y: rb.y, color: withAlpha(color(rb.i), opacity) });
+  }
+  for (const arc of groupArcs) {
+    patches.push({ x: arc.x, y: arc.y, color: color(arc.i) });
+  }
+  const layer = plot.addPatches({
+    patches,
+    name: opts.name,
+    renderType: opts.renderType
+  });
+  const labels = opts.labels;
+  if (labels && labels.length) {
+    const n = opts.matrix.length;
+    const rowSums = opts.matrix.map((row) => row.reduce((s, v) => s + Math.max(0, v || 0), 0));
+    const total = rowSums.reduce((s, v) => s + v, 0);
+    if (total > 0 && n > 0) {
+      const padAngle = 0.1 * 2 * Math.PI;
+      const gaps = Math.min(padAngle, 0.9 * 2 * Math.PI);
+      const usable = 2 * Math.PI - gaps;
+      const gap = gaps / n;
+      let angle = 0;
+      const labelR = radius * 1.08;
+      for (let i = 0; i < n; i++) {
+        const span = rowSums[i] / total * usable;
+        const mid = angle + span / 2;
+        const text = labels[i];
+        if (text != null) {
+          plot.addAnnotation({
+            type: "label",
+            x: labelR * Math.cos(mid),
+            y: labelR * Math.sin(mid),
+            text,
+            align: "center"
+          });
+        }
+        angle += span + gap;
+      }
+    }
+  }
+  return layer;
+}
+function withAlpha(color, alpha) {
+  const hex = /^#([0-9a-f]{6})$/i.exec(color);
+  if (hex) {
+    const v = parseInt(hex[1], 16);
+    return `rgba(${v >> 16 & 255}, ${v >> 8 & 255}, ${v & 255}, ${alpha})`;
+  }
+  return color;
+}
+
+// src/charts/parallel.ts
+var PARALLEL_PALETTE = [
+  "#4e79a7",
+  "#f28e2b",
+  "#e15759",
+  "#76b7b2",
+  "#59a14f",
+  "#edc948",
+  "#b07aa1",
+  "#ff9da7",
+  "#9c755f",
+  "#bab0ac"
+];
+function parallelLayout(dimensions, rows) {
+  const d = dimensions.length;
+  const mins = new Array(d).fill(Infinity);
+  const maxs = new Array(d).fill(-Infinity);
+  for (const row of rows) {
+    for (let i = 0; i < d; i++) {
+      const v = row[i];
+      if (v == null || !Number.isFinite(v)) continue;
+      if (v < mins[i]) mins[i] = v;
+      if (v > maxs[i]) maxs[i] = v;
+    }
+  }
+  for (let i = 0; i < d; i++) {
+    if (!Number.isFinite(mins[i])) {
+      mins[i] = 0;
+      maxs[i] = 1;
+    }
+  }
+  const axes = dimensions.map((dim, i) => ({ dim, x: i, min: mins[i], max: maxs[i] }));
+  const lines = rows.map((row, r) => {
+    const x = new Array(d);
+    const y = new Array(d);
+    for (let i = 0; i < d; i++) {
+      const span = maxs[i] - mins[i];
+      const v = row[i];
+      const norm2 = v == null || !Number.isFinite(v) || span === 0 ? 0.5 : (v - mins[i]) / span;
+      x[i] = i;
+      y[i] = norm2;
+    }
+    return { row: r, x, y };
+  });
+  return { axes, lines };
+}
+function addParallelCoordinates(plot, opts) {
+  const palette = 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);
+  let cbMin = Infinity, cbMax = -Infinity;
+  if (opts.colorBy) {
+    for (const v of opts.colorBy) {
+      if (!Number.isFinite(v)) continue;
+      if (v < cbMin) cbMin = v;
+      if (v > cbMax) cbMax = v;
+    }
+  }
+  const cbSpan = cbMax - cbMin;
+  const rowColor = (r) => {
+    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];
+    }
+    return palette[r % palette.length];
+  };
+  const layers = lines.map(
+    (ln, r) => plot.addLine({
+      x: ln.x,
+      y: ln.y,
+      color: withAlpha2(rowColor(r), opacity),
+      width,
+      name: r === 0 ? opts.name : void 0,
+      renderType: opts.renderType
+    })
+  );
+  for (const ax of axes) {
+    plot.addAnnotation({ type: "span", dim: "x", value: ax.x });
+    plot.addAnnotation({ type: "label", x: ax.x, y: 1, text: ax.dim, align: "center" });
+  }
+  return { lines: layers };
+}
+function withAlpha2(color, alpha) {
+  const hex = /^#([0-9a-f]{6})$/i.exec(color);
+  if (hex) {
+    const v = parseInt(hex[1], 16);
+    return `rgba(${v >> 16 & 255}, ${v >> 8 & 255}, ${v & 255}, ${alpha})`;
+  }
+  return color;
+}
 export {
   AreaLayer,
   Axis,
   Bar3DLayer,
   BarLayer,
   BoxLayer,
+  CHORD_PALETTE,
   CandlestickLayer,
   CategoricalScale,
   Contour3DLayer,
   ContourLayer,
   ErrorBarLayer,
+  FUNNEL_PALETTE,
   GraphLayer,
   HeatmapLayer,
   HexbinLayer,
@@ -10459,6 +12208,7 @@ export {
   LogScale,
   OhlcLayer,
   OrdinalTimeScale,
+  PARALLEL_PALETTE,
   PatchesLayer,
   PieLayer,
   Plot,
@@ -10472,39 +12222,61 @@ export {
   SurfaceLayer,
   TRANSFORM_GLSL,
   TRANSFORM_UNIFORMS,
+  TREEMAP_PALETTE,
   TimeScale,
   VolumeLayer,
   addBollinger,
+  addChord,
   addDepth,
+  addFunnel,
+  addGauge,
   addHeikinAshi,
+  addParallelCoordinates,
   addRenko,
+  addSankey,
+  addSunburst,
+  addTreemap,
   addVolumeProfile,
+  adx,
   atr,
   autoTicks,
   bollinger,
   boxStats,
   bufferUsage,
+  canvasToBlob,
+  chordLayout,
   colormap,
   colormapLUT,
+  copyCanvasToClipboard,
   createProgram,
   createToolbar,
   darkTheme,
   defaultFormat,
   depth,
+  downloadCanvas,
   earcut,
   ema,
   fft,
+  fibRetracements,
   firstFinite,
   forceLayout,
+  funnelLayout,
+  gaugeLayout,
   heikinAshi,
   histogram,
+  ichimoku,
   kde,
+  keltner,
   lightTheme,
   lineBreak,
   linkX,
+  lttb,
   macd,
   makeScale,
   marchingCubes,
+  obv,
+  parallelLayout,
+  parseCSV,
   parseColor,
   pointAndFigure,
   quantileSorted,
@@ -10513,10 +12285,15 @@ export {
   resolveTicks,
   rollingStd,
   rsi,
+  sankeyLayout,
   setTransformUniforms,
   sma,
   spectrogram,
+  stochastic,
+  sunburstLayout,
+  superTrend,
   toColorCss,
+  treemapLayout,
   trueRange,
   uniformLocations,
   volumeProfile,