@photonviz/core 0.1.1 → 0.2.0

package/dist/index.js

@@ -82,10 +82,10 @@ var Axis = class {
       }
       ticks = major;
     }
-    const fmt = this.config.format ?? ((v) => scale.formatTick(v));
+    const fmt2 = this.config.format ?? ((v) => scale.formatTick(v));
     return ticks.filter((t) => t.value >= min && t.value <= max).map((t) => ({
       value: t.value,
-      label: t.minor ? "" : t.label ?? fmt(t.value),
+      label: t.minor ? "" : t.label ?? fmt2(t.value),
       minor: t.minor ?? false,
       grid: t.grid ?? !t.minor
     }));
@@ -1954,6 +1954,25 @@ var GpuDecimator = class {
   }
 };
 
+// src/layers/pick.ts
+function pickNearest(xs, ys, count, mode, cursorPx, cursorPy, project, gatePx = Infinity) {
+  if (count === 0) return null;
+  let best = -1;
+  let bestDist = Infinity;
+  for (let i = 0; i < count; i++) {
+    const [px, py] = project(xs[i], ys[i]);
+    const dx = px - cursorPx;
+    const dy = py - cursorPy;
+    const d = mode === "x" ? Math.abs(dx) : mode === "y" ? Math.abs(dy) : Math.hypot(dx, dy);
+    if (d < bestDist) {
+      bestDist = d;
+      best = i;
+    }
+  }
+  if (best < 0 || bestDist > gatePx) return null;
+  return { x: xs[best], y: ys[best], index: best };
+}
+
 // src/layers/line.ts
 var GPU_DECIMATE_MIN = 2e5;
 var VERT7 = (
@@ -2292,17 +2311,8 @@ var LineLayer = class {
     if (this.count === 0) return null;
     return { x: this.xBounds, y: this.yBounds };
   }
-  nearestByX(x) {
-    if (this.count === 0) return null;
-    let best = 0, bestDist = Infinity;
-    for (let i = 0; i < this.count; i++) {
-      const d = Math.abs(this.xs[i] - x);
-      if (d < bestDist) {
-        bestDist = d;
-        best = i;
-      }
-    }
-    return { x: this.xs[best], y: this.ys[best], index: best };
+  pick(mode, cursorPx, cursorPy, project) {
+    return pickNearest(this.xs, this.ys, this.count, mode, cursorPx, cursorPy, project);
   }
   /** Replace the series data and re-upload the GPU buffer (for streaming). */
   setData(x, y) {
@@ -2719,6 +2729,7 @@ var ScatterLayer = class {
     this.name = opts.name ?? this.id;
     this.yAxis = opts.yAxis ?? "y";
     this.useVertexColor = opts.colorBy != null;
+    this.labels = opts.labels;
     const n = Math.min(opts.x.length, opts.y.length);
     this.count = n;
     this.xs = new Float64Array(n);
@@ -2796,17 +2807,14 @@ var ScatterLayer = class {
     if (this.count === 0) return null;
     return { x: this.xBounds, y: this.yBounds };
   }
-  nearestByX(x) {
-    if (this.count === 0) return null;
-    let best = 0, bestDist = Infinity;
-    for (let i = 0; i < this.count; i++) {
-      const d = Math.abs(this.xs[i] - x);
-      if (d < bestDist) {
-        bestDist = d;
-        best = i;
-      }
-    }
-    return { x: this.xs[best], y: this.ys[best], index: best };
+  pick(mode, cursorPx, cursorPy, project) {
+    const gatePx = this.size / 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. */
+  infoAt(index) {
+    const label = this.labels?.[index];
+    return label != null ? [label] : null;
   }
   /** Replace point positions and re-upload (for streaming). Keeps uniform color. */
   setData(x, y) {
@@ -3010,17 +3018,8 @@ var StemLayer = class {
     if (this.count === 0) return null;
     return { x: this.xBounds, y: this.yBounds };
   }
-  nearestByX(x) {
-    if (this.count === 0) return null;
-    let best = 0, bestDist = Infinity;
-    for (let i = 0; i < this.count; i++) {
-      const d = Math.abs(this.xs[i] - x);
-      if (d < bestDist) {
-        bestDist = d;
-        best = i;
-      }
-    }
-    return { x: this.xs[best], y: this.ys[best], index: best };
+  pick(mode, cursorPx, cursorPy, project) {
+    return pickNearest(this.xs, this.ys, this.count, mode, cursorPx, cursorPy, project);
   }
   draw(state) {
     if (this.count === 0) return;
@@ -3182,6 +3181,27 @@ function drawCrosshair(ctx, region, px, theme) {
   ctx.stroke();
   ctx.restore();
 }
+function drawCrosshairXY(ctx, region, px, py, theme) {
+  const left = region.left;
+  const right = region.left + region.width;
+  const top = region.top;
+  const bottom = region.top + region.height;
+  if (px < left || px > right || py < top || py > bottom) return;
+  ctx.save();
+  ctx.strokeStyle = theme.text;
+  ctx.globalAlpha = 0.4;
+  ctx.setLineDash([3, 3]);
+  ctx.lineWidth = 1;
+  const x = Math.round(px) + 0.5;
+  const y = Math.round(py) + 0.5;
+  ctx.beginPath();
+  ctx.moveTo(x, top);
+  ctx.lineTo(x, bottom);
+  ctx.moveTo(left, y);
+  ctx.lineTo(right, y);
+  ctx.stroke();
+  ctx.restore();
+}
 function drawMarker(ctx, px, py, color) {
   ctx.save();
   ctx.fillStyle = color;
@@ -3441,7 +3461,7 @@ function createToolbar(container, host, dark) {
 var DEFAULT_MARGIN = { top: 16, right: 16, bottom: 40, left: 56 };
 var Y_AXIS_GAP = 52;
 function isPickable(layer) {
-  return typeof layer.nearestByX === "function";
+  return typeof layer.pick === "function";
 }
 function padDomain(min, max, log, frac) {
   if (log) {
@@ -3453,6 +3473,19 @@ function padDomain(min, max, log, frac) {
   const pad = (max - min) * frac || 1;
   return [min - pad, max + pad];
 }
+function clampAxis(domain, bounds) {
+  const [lo, hi] = domain;
+  const span = hi - lo;
+  const [dlo, dhi] = bounds;
+  if (span >= dhi - dlo) {
+    const loMin = dhi - span;
+    const clampedLo2 = Math.min(Math.max(lo, loMin), dlo);
+    return [clampedLo2, clampedLo2 + span];
+  }
+  let clampedLo = Math.max(lo, dlo);
+  if (clampedLo + span > dhi) clampedLo = dhi - span;
+  return [clampedLo, clampedLo + span];
+}
 var Plot = class {
   constructor(container, options = {}) {
     /** Named y axes, insertion-ordered. `"y"` is always the primary. */
@@ -3463,6 +3496,10 @@ var Plot = class {
     this.modeChangeCbs = [];
     this.toolbarHandle = null;
     this.hoverPx = null;
+    /** Cursor position while the pointer is pressed, when `crosshair`. */
+    this.pressPx = null;
+    /** A point clicked to pin its details, until another click clears it. */
+    this.selected = null;
     this.container = container;
     if (getComputedStyle(container).position === "static") {
       container.style.position = "relative";
@@ -3493,8 +3530,14 @@ var Plot = class {
     this.isDark = options.theme === "dark";
     this.theme = options.theme === "dark" ? darkTheme : options.theme === "light" || options.theme == null ? lightTheme : options.theme;
     this.baseMargin = { ...DEFAULT_MARGIN, ...options.margin };
-    this.mode = options.mode ?? "box";
+    this.mode = options.mode ?? "pan";
     this.hoverEnabled = options.hover !== false;
+    this.pickMode = options.pick ?? "x";
+    this.pointInfo = options.pointInfo ?? "click";
+    this.crosshair = options.crosshair ?? true;
+    this.equalAspect = options.equalAspect ?? false;
+    this.boundedPan = options.boundedPan ?? false;
+    this.hoverReadout = options.hoverReadout;
     this.selectionDiv = document.createElement("div");
     Object.assign(this.selectionDiv.style, {
       position: "absolute",
@@ -3523,11 +3566,28 @@ var Plot = class {
       boxShadow: "0 4px 12px rgba(0,0,0,0.18)"
     });
     container.appendChild(this.tooltip);
+    this.infoBox = document.createElement("div");
+    Object.assign(this.infoBox.style, {
+      position: "absolute",
+      display: "none",
+      zIndex: "6",
+      pointerEvents: "none",
+      padding: "6px 8px",
+      borderRadius: "6px",
+      font: "12px system-ui, -apple-system, sans-serif",
+      lineHeight: "1.4",
+      whiteSpace: "nowrap",
+      background: this.isDark ? "rgba(15,23,42,0.96)" : "rgba(255,255,255,0.98)",
+      color: this.isDark ? "#e2e8f0" : "#1e293b",
+      border: `1px solid ${this.isDark ? "rgba(148,163,184,0.4)" : "rgba(100,116,139,0.4)"}`,
+      boxShadow: "0 6px 18px rgba(0,0,0,0.25)"
+    });
+    container.appendChild(this.infoBox);
     this.resizeObserver = new ResizeObserver(() => this.resize());
     this.resizeObserver.observe(container);
     this.resize();
     if (options.interactive !== false) this.attachInteraction();
-    if (options.toolbar !== false) {
+    if (options.showToolbar !== false) {
       this.toolbarHandle = createToolbar(
         container,
         {
@@ -3605,6 +3665,34 @@ var Plot = class {
     this.requestRender();
     return layer;
   }
+  /**
+   * Register a layer built outside core (e.g. `@photonviz/map`). Use with
+   * {@link context} to construct the layer against this plot's WebGL2 context.
+   */
+  add(layer) {
+    return this.register(layer);
+  }
+  /** The shared WebGL2 context, for constructing custom layers. */
+  get context() {
+    return this.gl;
+  }
+  /**
+   * 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
+   * custom hit-testing (e.g. map feature picking on click).
+   */
+  dataAt(clientX, clientY) {
+    const rect = this.axisCanvas.getBoundingClientRect();
+    const region = plotRegion(this.layout());
+    const px = clientX - rect.left;
+    const py = clientY - rect.top;
+    if (px < region.left || px > region.left + region.width || py < region.top || py > region.top + region.height) {
+      return null;
+    }
+    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) };
+  }
   addLine(opts) {
     return this.register(new LineLayer(this.gl, opts));
   }
@@ -3786,6 +3874,7 @@ var Plot = class {
     this.toolbarHandle?.destroy();
     this.selectionDiv.remove();
     this.tooltip.remove();
+    this.infoBox.remove();
     for (const l of this.layers) l.dispose();
     this.container.removeChild(this.gridCanvas);
     this.container.removeChild(this.dataCanvas);
@@ -3820,6 +3909,8 @@ var Plot = class {
   render() {
     const layout = this.layout();
     const region = plotRegion(layout);
+    if (this.equalAspect) this.applyAspect(region);
+    if (this.boundedPan) this.clampView();
     const primary = this.primaryY();
     const ticksX = this.axisX.resolve(this.scaleX);
     const ticksYPrimary = primary.axis.resolve(primary.scale);
@@ -3875,8 +3966,16 @@ var Plot = class {
         titleX: pos.titleX
       });
     }
-    if (this.hoverEnabled && this.hoverPx) this.renderHover(region);
-    else this.tooltip.style.display = "none";
+    if (this.crosshair && this.pressPx) {
+      drawCrosshairXY(this.axisCtx, region, this.pressPx.x, this.pressPx.y, this.theme);
+    }
+    if (this.hoverEnabled && this.hoverPx) {
+      this.renderHover(region);
+    } else {
+      this.tooltip.style.display = "none";
+      if (this.pointInfo === "hover") this.selected = null;
+    }
+    this.updateInfoBox(region);
   }
   renderHover(region) {
     const cursor = this.hoverPx;
@@ -3886,33 +3985,49 @@ var Plot = class {
     }
     const nx = (cursor.x - region.left) / region.width;
     const dataX = this.scaleX.invert(nx);
-    drawCrosshair(this.axisCtx, region, cursor.x, this.theme);
+    const ny = 1 - (cursor.y - region.top) / region.height;
+    const dataY = this.primaryY().scale.invert(ny);
+    if (this.crosshair) {
+      drawCrosshairXY(this.axisCtx, region, cursor.x, cursor.y, this.theme);
+    } else {
+      drawCrosshair(this.axisCtx, region, cursor.x, this.theme);
+    }
     const rows = [];
     for (const layer of this.layers) {
       if (!isPickable(layer)) continue;
-      const p = layer.nearestByX(dataX);
-      if (!p) continue;
       const ya = this.yAxes.get(layer.yAxis);
-      const px = pxX(region, this.scaleX.norm(p.x));
-      const py = pxY(region, ya.scale.norm(p.y));
+      const project = (x, y) => [
+        pxX(region, this.scaleX.norm(x)),
+        pxY(region, ya.scale.norm(y))
+      ];
+      const p = layer.pick(this.pickMode, cursor.x, cursor.y, project);
+      if (!p) continue;
+      const [px, py] = project(p.x, p.y);
       drawMarker(this.axisCtx, px, py, layer.colorCss);
       rows.push({ layer, x: p.x, y: p.y });
     }
-    if (rows.length === 0) {
-      this.tooltip.style.display = "none";
-      return;
-    }
-    this.updateTooltip(rows, cursor, dataX);
+    this.updateTooltip(rows, cursor, dataX, dataY);
+    if (this.pointInfo === "hover") this.selected = this.pickPoint(cursor.x, cursor.y);
   }
-  updateTooltip(rows, cursor, dataX) {
+  updateTooltip(rows, cursor, dataX, dataY) {
     const tip = this.tooltip;
     tip.replaceChildren();
-    const xfmt = this.axisX.config.format ?? defaultFormat;
-    const header = document.createElement("div");
-    header.style.opacity = "0.7";
-    header.style.marginBottom = "3px";
-    header.textContent = `x = ${xfmt(dataX)}`;
-    tip.appendChild(header);
+    if (this.hoverReadout) {
+      for (const line of this.hoverReadout(dataX, dataY)) {
+        const el = document.createElement("div");
+        el.style.opacity = "0.7";
+        el.style.marginBottom = "3px";
+        el.textContent = `${line.label} ${line.value}`;
+        tip.appendChild(el);
+      }
+    } else {
+      const xfmt = this.axisX.config.format ?? defaultFormat;
+      const header = document.createElement("div");
+      header.style.opacity = "0.7";
+      header.style.marginBottom = "3px";
+      header.textContent = `x = ${xfmt(dataX)}`;
+      tip.appendChild(header);
+    }
     for (const r of rows) {
       const yfmt = this.yAxes.get(r.layer.yAxis).axis.config.format ?? defaultFormat;
       const row = document.createElement("div");
@@ -4017,12 +4132,16 @@ var Plot = class {
     let lastY = 0;
     let startX = 0;
     let startY = 0;
+    let downX = 0;
+    let downY = 0;
     el.addEventListener("pointerdown", (e) => {
       el.setPointerCapture(e.pointerId);
       this.hoverPx = null;
       const rect = el.getBoundingClientRect();
       const px = e.clientX - rect.left;
       const py = e.clientY - rect.top;
+      downX = px;
+      downY = py;
       const zone = this.zoneAt(px, py);
       if (zone.type === "x") {
         axisDrag = "x";
@@ -4035,15 +4154,18 @@ var Plot = class {
         lastX = e.clientX;
         lastY = e.clientY;
         el.style.cursor = "grabbing";
+        if (this.crosshair) this.setPress(px, py);
       } else {
         selecting = true;
         startX = px;
         startY = py;
+        if (this.crosshair) this.setPress(px, py);
       }
     });
     el.addEventListener("pointermove", (e) => {
       const rect = el.getBoundingClientRect();
       const region = plotRegion(this.layout());
+      if (this.pressPx) this.setPress(e.clientX - rect.left, e.clientY - rect.top);
       if (axisDrag === "x") {
         this.panX(e.clientX - lastX, region);
         lastX = e.clientX;
@@ -4079,6 +4201,14 @@ var Plot = class {
     el.addEventListener("pointerleave", () => this.setHover(null));
     const end = (e) => {
       if (el.hasPointerCapture(e.pointerId)) el.releasePointerCapture(e.pointerId);
+      if (this.pressPx) {
+        this.pressPx = null;
+        this.requestRender();
+      }
+      const rect = el.getBoundingClientRect();
+      const upPx = e.clientX - rect.left;
+      const upPy = e.clientY - rect.top;
+      const isClick = e.type === "pointerup" && !axisDrag && Math.hypot(upPx - downX, upPy - downY) < 4;
       if (axisDrag) {
         axisDrag = null;
       } else if (panning) {
@@ -4086,10 +4216,10 @@ var Plot = class {
         this.updateCursor();
       } else if (selecting) {
         selecting = false;
-        const rect = el.getBoundingClientRect();
-        this.applySelection(startX, startY, e.clientX - rect.left, e.clientY - rect.top);
+        if (!isClick) this.applySelection(startX, startY, upPx, upPy);
         this.selectionDiv.style.display = "none";
       }
+      if (isClick) this.handleClick(upPx, upPy);
     };
     el.addEventListener("pointerup", end);
     el.addEventListener("pointercancel", end);
@@ -4100,6 +4230,160 @@ var Plot = class {
     this.hoverPx = px;
     this.requestRender();
   }
+  /** Update the press-crosshair position and redraw. */
+  setPress(x, y) {
+    this.pressPx = { x, y };
+    this.requestRender();
+  }
+  /** Nearest point (2D, within a small radius) under the cursor, or null. */
+  pickPoint(cursorPx, cursorPy) {
+    const region = plotRegion(this.layout());
+    let hit = null;
+    let hitDist = Infinity;
+    for (const layer of this.layers) {
+      if (!isPickable(layer)) continue;
+      const ya = this.yAxes.get(layer.yAxis);
+      const project = (x, y) => [
+        pxX(region, this.scaleX.norm(x)),
+        pxY(region, ya.scale.norm(y))
+      ];
+      const p = layer.pick("xy", cursorPx, cursorPy, project);
+      if (!p) continue;
+      const [ppx, ppy] = project(p.x, p.y);
+      const d = Math.hypot(ppx - cursorPx, ppy - cursorPy);
+      if (d < hitDist) {
+        hitDist = d;
+        hit = { layer, x: p.x, y: p.y, index: p.index };
+      }
+    }
+    return hit && hitDist <= 14 ? hit : null;
+  }
+  /** Click handler: in `pointInfo:"click"` mode, pin the point under the cursor. */
+  handleClick(cursorPx, cursorPy) {
+    if (this.pointInfo !== "click") return;
+    this.selected = this.pickPoint(cursorPx, cursorPy);
+    this.requestRender();
+  }
+  /** Draw the pinned point's marker and position its info box (or hide it). */
+  updateInfoBox(region) {
+    const box = this.infoBox;
+    if (!this.selected) {
+      box.style.display = "none";
+      return;
+    }
+    const { layer, x, y, index } = this.selected;
+    const ya = this.yAxes.get(layer.yAxis);
+    const px = pxX(region, this.scaleX.norm(x));
+    const py = pxY(region, ya.scale.norm(y));
+    if (px < region.left || px > region.left + region.width || py < region.top || py > region.top + region.height) {
+      box.style.display = "none";
+      return;
+    }
+    drawMarker(this.axisCtx, px, py, layer.colorCss);
+    box.replaceChildren();
+    const info = layer.infoAt ? layer.infoAt(index) : null;
+    const title = document.createElement("div");
+    title.style.fontWeight = "600";
+    title.style.marginBottom = "2px";
+    title.textContent = info && info.length ? info[0] : layer.name;
+    box.appendChild(title);
+    if (info && info.length > 1) {
+      for (let i = 1; i < info.length; i++) {
+        const row = document.createElement("div");
+        row.textContent = info[i];
+        box.appendChild(row);
+      }
+    } else {
+      const lines = this.hoverReadout ? this.hoverReadout(x, y) : [
+        { label: "x", value: (this.axisX.config.format ?? defaultFormat)(x) },
+        { label: "y", value: (ya.axis.config.format ?? defaultFormat)(y) }
+      ];
+      for (const ln of lines) {
+        const row = document.createElement("div");
+        row.textContent = `${ln.label} ${ln.value}`;
+        box.appendChild(row);
+      }
+    }
+    box.style.display = "block";
+    const cw = this.container.clientWidth;
+    const tw = box.offsetWidth;
+    const th = box.offsetHeight;
+    let left = px + 12;
+    if (left + tw > cw) left = px - tw - 12;
+    let top = py + 12;
+    if (top + th > this.container.clientHeight) top = py - th - 12;
+    box.style.left = `${Math.max(0, left)}px`;
+    box.style.top = `${Math.max(0, top)}px`;
+  }
+  /** Data-space x extent across all layers, or null if empty. */
+  layerBoundsX() {
+    let lo = Infinity;
+    let hi = -Infinity;
+    let any = false;
+    for (const l of this.layers) {
+      const b = l.bounds();
+      if (!b) continue;
+      any = true;
+      lo = Math.min(lo, b.x[0]);
+      hi = Math.max(hi, b.x[1]);
+    }
+    return any ? [lo, hi] : null;
+  }
+  /** Data-space y extent across the layers bound to axis `id`, or null. */
+  layerBoundsY(id) {
+    let lo = Infinity;
+    let hi = -Infinity;
+    let any = false;
+    for (const l of this.layers) {
+      if (l.yAxis !== id) continue;
+      const b = l.bounds();
+      if (!b) continue;
+      any = true;
+      lo = Math.min(lo, b.y[0]);
+      hi = Math.max(hi, b.y[1]);
+    }
+    return any ? [lo, hi] : null;
+  }
+  /** Keep the view inside the data bounds (used when `boundedPan`). */
+  clampView() {
+    if (!this.scaleX.log) {
+      const bx = this.layerBoundsX();
+      if (bx) this.scaleX.domain = clampAxis(this.scaleX.domain, bx);
+    }
+    for (const ya of this.yAxes.values()) {
+      if (ya.scale.log) continue;
+      const by = this.layerBoundsY(ya.id);
+      if (by) ya.scale.domain = clampAxis(ya.scale.domain, by);
+    }
+  }
+  /**
+   * Expand the looser axis so both axes share the same data-units-per-pixel,
+   * preventing distortion (maps set `equalAspect`). Linear axes only; balances
+   * the primary y against x, and is idempotent once balanced.
+   */
+  applyAspect(region) {
+    if (this.scaleX.log) return;
+    const primary = this.primaryY();
+    if (primary.scale.log) return;
+    const w = region.width;
+    const h = region.height;
+    if (w <= 0 || h <= 0) return;
+    const [xlo, xhi] = this.scaleX.domain;
+    const [ylo, yhi] = primary.scale.domain;
+    const uppX = (xhi - xlo) / w;
+    const uppY = (yhi - ylo) / h;
+    if (uppX <= 0 || uppY <= 0) return;
+    if (Math.abs(uppX - uppY) <= 1e-9 * Math.max(uppX, uppY)) return;
+    if (uppX > uppY) {
+      const target = uppX * h;
+      const cy = (ylo + yhi) / 2;
+      primary.scale.domain = [cy - target / 2, cy + target / 2];
+    } else {
+      const target = uppY * w;
+      const cx = (xlo + xhi) / 2;
+      this.scaleX.domain = [cx - target / 2, cx + target / 2];
+    }
+  }
   drawSelection(x0, y0, x1, y1) {
     const region = plotRegion(this.layout());
     const lock = this.axisLock();
@@ -4184,29 +4468,80 @@ var PolarPlot = class {
   constructor(container, options = {}) {
     this.entries = [];
     this.R = 1;
+    this.baseR = 1;
     this.dpr = 1;
     this.frameRequested = false;
+    /** Multiplier on the fitted radius: <1 zooms in (smaller r-domain), >1 out. */
+    this.zoom = 1;
+    /** Angular offset (radians, CCW) applied to all series + gridlines. */
+    this.rotation = 0;
+    this.hoverPx = null;
+    this.homeButton = null;
+    /** A point clicked to pin its details, until another click clears it. */
+    this.selected = null;
     this.container = container;
     if (getComputedStyle(container).position === "static") container.style.position = "relative";
-    this.gridCanvas = this.makeCanvas(0);
-    this.dataCanvas = this.makeCanvas(1);
+    this.gridCanvas = this.makeCanvas(0, false);
+    this.dataCanvas = this.makeCanvas(1, false);
+    this.overlayCanvas = this.makeCanvas(2, true);
     this.gridCtx = this.gridCanvas.getContext("2d");
     this.dataCtx = this.dataCanvas.getContext("2d");
+    this.overlayCtx = this.overlayCanvas.getContext("2d");
     const s = getSharedGL();
     this.gl = s.gl;
     this.sharedCanvas = s.canvas;
+    this.isDark = options.theme === "dark";
     this.theme = options.theme === "dark" ? darkTheme : options.theme === "light" || options.theme == null ? lightTheme : options.theme;
     this.toRad = options.angleUnit === "deg" ? Math.PI / 180 : 1;
     this.fixedR = options.maxRadius;
     this.margin = options.margin ?? 28;
+    this.interactive = options.interactive !== false;
+    this.hoverEnabled = options.hover !== false;
+    this.pointInfo = options.pointInfo ?? "click";
+    this.tooltip = document.createElement("div");
+    Object.assign(this.tooltip.style, {
+      position: "absolute",
+      display: "none",
+      zIndex: "4",
+      pointerEvents: "none",
+      padding: "6px 8px",
+      borderRadius: "6px",
+      font: "12px system-ui, -apple-system, sans-serif",
+      lineHeight: "1.4",
+      whiteSpace: "nowrap",
+      background: this.isDark ? "rgba(15,23,42,0.92)" : "rgba(255,255,255,0.96)",
+      color: this.isDark ? "#e2e8f0" : "#1e293b",
+      border: `1px solid ${this.isDark ? "rgba(148,163,184,0.25)" : "rgba(100,116,139,0.25)"}`,
+      boxShadow: "0 4px 12px rgba(0,0,0,0.18)"
+    });
+    container.appendChild(this.tooltip);
+    this.infoBox = document.createElement("div");
+    Object.assign(this.infoBox.style, {
+      position: "absolute",
+      display: "none",
+      zIndex: "6",
+      pointerEvents: "none",
+      padding: "6px 8px",
+      borderRadius: "6px",
+      font: "12px system-ui, -apple-system, sans-serif",
+      lineHeight: "1.4",
+      whiteSpace: "nowrap",
+      background: this.isDark ? "rgba(15,23,42,0.96)" : "rgba(255,255,255,0.98)",
+      color: this.isDark ? "#e2e8f0" : "#1e293b",
+      border: `1px solid ${this.isDark ? "rgba(148,163,184,0.4)" : "rgba(100,116,139,0.4)"}`,
+      boxShadow: "0 6px 18px rgba(0,0,0,0.25)"
+    });
+    container.appendChild(this.infoBox);
     this.resizeObserver = new ResizeObserver(() => this.resize());
     this.resizeObserver.observe(container);
     this.resize();
+    if (this.interactive) this.attachInteraction();
+    if (options.showToolbar !== false) this.homeButton = this.makeHomeButton();
   }
-  makeCanvas(z) {
+  makeCanvas(z, interactive) {
     const c = document.createElement("canvas");
     Object.assign(c.style, { position: "absolute", inset: "0", width: "100%", height: "100%", zIndex: String(z) });
-    c.style.pointerEvents = "none";
+    if (!interactive) c.style.pointerEvents = "none";
     this.container.appendChild(c);
     return c;
   }
@@ -4214,9 +4549,10 @@ var PolarPlot = class {
     const n = Math.min(theta.length, r.length);
     const m = closed && n > 0 ? n + 1 : n;
     const x = new Float64Array(m), y = new Float64Array(m);
+    const rot = this.rotation;
     let maxR = 0;
     for (let i = 0; i < n; i++) {
-      const a = theta[i] * this.toRad, rr = r[i];
+      const a = theta[i] * this.toRad + rot, rr = r[i];
       x[i] = rr * Math.cos(a);
       y[i] = rr * Math.sin(a);
       if (Math.abs(rr) > maxR) maxR = Math.abs(rr);
@@ -4231,7 +4567,7 @@ var PolarPlot = class {
     const closed = opts.closed ?? false;
     const { x, y, maxR } = this.toXY(opts.theta, opts.r, closed);
     const layer = new LineLayer(this.gl, { x, y, color: opts.color, width: opts.width ?? 2, decimate: false });
-    const entry = { layer, closed, maxR };
+    const entry = { layer, closed, maxR, theta: opts.theta, r: opts.r };
     this.entries.push(entry);
     this.refit();
     return this.handle(entry);
@@ -4239,7 +4575,7 @@ var PolarPlot = class {
   addScatter(opts) {
     const { x, y, maxR } = this.toXY(opts.theta, opts.r, false);
     const layer = new ScatterLayer(this.gl, { x, y, color: opts.color, size: opts.size ?? 5 });
-    const entry = { layer, closed: false, maxR };
+    const entry = { layer, closed: false, maxR, theta: opts.theta, r: opts.r, labels: opts.labels };
     this.entries.push(entry);
     this.refit();
     return this.handle(entry);
@@ -4247,6 +4583,8 @@ var PolarPlot = class {
   handle(entry) {
     return {
       setData: (theta, r) => {
+        entry.theta = theta;
+        entry.r = r;
         const { x, y, maxR } = this.toXY(theta, r, entry.closed);
         entry.layer.setData(x, y);
         entry.maxR = maxR;
@@ -4256,29 +4594,63 @@ var PolarPlot = class {
     };
   }
   refit() {
+    let base;
     if (this.fixedR != null) {
-      this.R = this.fixedR;
-      return;
+      base = this.fixedR;
+    } else {
+      let m = 0;
+      for (const e of this.entries) m = Math.max(m, e.maxR);
+      base = m || 1;
+    }
+    this.baseR = base;
+    this.R = base * this.zoom;
+  }
+  /** Re-project every series with the current rotation (called when rotation changes). */
+  retransform() {
+    for (const e of this.entries) {
+      const { x, y } = this.toXY(e.theta, e.r, e.closed);
+      e.layer.setData(x, y);
     }
-    let m = 0;
-    for (const e of this.entries) m = Math.max(m, e.maxR);
-    this.R = m || 1;
+  }
+  // ---- Interaction control --------------------------------------------------
+  /** Reset zoom (r-domain) and rotation back to the initial view. */
+  home() {
+    this.zoom = 1;
+    this.rotation = 0;
+    this.refit();
+    this.retransform();
+    this.requestRender();
+  }
+  /** Current rotation offset in radians (CCW). */
+  getRotation() {
+    return this.rotation;
+  }
+  /** Set the rotation offset (radians, CCW) and redraw. */
+  setRotation(rad) {
+    this.rotation = rad;
+    this.retransform();
+    this.requestRender();
   }
   destroy() {
     this.resizeObserver.disconnect();
     for (const e of this.entries) e.layer.dispose();
+    this.tooltip.remove();
+    this.infoBox.remove();
+    this.homeButton?.remove();
     this.container.removeChild(this.gridCanvas);
     this.container.removeChild(this.dataCanvas);
+    this.container.removeChild(this.overlayCanvas);
   }
   resize() {
     this.dpr = window.devicePixelRatio || 1;
     const w = this.container.clientWidth, h = this.container.clientHeight;
-    for (const c of [this.gridCanvas, this.dataCanvas]) {
+    for (const c of [this.gridCanvas, this.dataCanvas, this.overlayCanvas]) {
       c.width = Math.max(1, Math.round(w * this.dpr));
       c.height = Math.max(1, Math.round(h * this.dpr));
     }
     this.gridCtx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
     this.dataCtx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
+    this.overlayCtx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
     this.render();
   }
   requestRender() {
@@ -4320,6 +4692,14 @@ var PolarPlot = class {
     this.dataCtx.clearRect(0, 0, w, h);
     this.dataCtx.drawImage(this.sharedCanvas, 0, 0, w, h);
     this.drawGrid(sq);
+    this.overlayCtx.clearRect(0, 0, w, h);
+    if (this.hoverEnabled && this.hoverPx) {
+      this.renderHover(sq);
+    } else {
+      this.tooltip.style.display = "none";
+      if (this.pointInfo === "hover") this.selected = null;
+    }
+    this.updateInfoBox(sq);
   }
   drawGrid(sq) {
     const ctx = this.gridCtx;
@@ -4333,7 +4713,7 @@ var PolarPlot = class {
     ctx.strokeStyle = this.theme.grid;
     ctx.lineWidth = 1;
     for (let deg = 0; deg < 360; deg += 30) {
-      const a = deg * Math.PI / 180;
+      const a = deg * Math.PI / 180 + this.rotation;
       const ex = cx + Math.cos(a) * pr, ey = cy - Math.sin(a) * pr;
       ctx.beginPath();
       ctx.moveTo(cx, cy);
@@ -4354,7 +4734,270 @@ var PolarPlot = class {
     }
     ctx.restore();
   }
+  // ---- Hover ----------------------------------------------------------------
+  setHover(px) {
+    const had = this.hoverPx !== null;
+    if (!px && !had) return;
+    this.hoverPx = px;
+    this.requestRender();
+  }
+  /** Nearest data point (across all series) to a cursor position, in CSS px. */
+  pickNearest(sq, cursorX, cursorY) {
+    const pr = sq.side / 2;
+    const { cx, cy } = sq;
+    const rot = this.rotation;
+    let best = null;
+    for (const e of this.entries) {
+      const n = Math.min(e.theta.length, e.r.length);
+      for (let i = 0; i < n; i++) {
+        const a = e.theta[i] * this.toRad + rot, rr = e.r[i];
+        const px = cx + rr * Math.cos(a) / this.R * pr;
+        const py = cy - rr * Math.sin(a) / this.R * pr;
+        const dx = px - cursorX, dy = py - cursorY;
+        const d2 = dx * dx + dy * dy;
+        if (!best || d2 < best.d2) best = { entry: e, index: i, px, py, theta: e.theta[i], r: rr, d2 };
+      }
+    }
+    return best;
+  }
+  /** Draw a filled, white-ringed marker on the overlay at a screen position. */
+  drawPointMarker(px, py, color) {
+    const ctx = this.overlayCtx;
+    ctx.save();
+    ctx.fillStyle = color;
+    ctx.strokeStyle = "#ffffff";
+    ctx.lineWidth = 1.5;
+    ctx.beginPath();
+    ctx.arc(px, py, 4, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.stroke();
+    ctx.restore();
+  }
+  renderHover(sq) {
+    const cursor = this.hoverPx;
+    const best = this.pickNearest(sq, cursor.x, cursor.y);
+    const within = best != null && best.d2 <= 24 * 24;
+    if (this.pointInfo === "hover") {
+      this.selected = within ? { entry: best.entry, index: best.index } : null;
+    }
+    if (!within) {
+      this.tooltip.style.display = "none";
+      return;
+    }
+    this.drawPointMarker(best.px, best.py, best.entry.layer.colorCss);
+    this.updateTooltip(best.entry, best.theta, best.r, cursor);
+  }
+  /** Click handler: pin the nearest point's details, or clear on empty space. */
+  handleClick(sq, cursorX, cursorY) {
+    if (this.pointInfo !== "click") return;
+    const hit = this.pickNearest(sq, cursorX, cursorY);
+    this.selected = hit && hit.d2 <= 14 * 14 ? { entry: hit.entry, index: hit.index } : null;
+    this.requestRender();
+  }
+  /** Draw the pinned point's marker and position its info box (or hide it). */
+  updateInfoBox(sq) {
+    const box = this.infoBox;
+    if (!this.selected) {
+      box.style.display = "none";
+      return;
+    }
+    const { entry, index } = this.selected;
+    if (index >= Math.min(entry.theta.length, entry.r.length)) {
+      this.selected = null;
+      box.style.display = "none";
+      return;
+    }
+    const pr = sq.side / 2;
+    const a = entry.theta[index] * this.toRad + this.rotation, rr = entry.r[index];
+    const px = sq.cx + rr * Math.cos(a) / this.R * pr;
+    const py = sq.cy - rr * Math.sin(a) / this.R * pr;
+    if (px < sq.left || px > sq.left + sq.side || py < sq.top || py > sq.top + sq.side) {
+      box.style.display = "none";
+      return;
+    }
+    this.drawPointMarker(px, py, entry.layer.colorCss);
+    box.replaceChildren();
+    const label = entry.labels && index < entry.labels.length ? entry.labels[index] : void 0;
+    const title = document.createElement("div");
+    title.style.fontWeight = "600";
+    title.style.marginBottom = "2px";
+    title.textContent = label != null && label !== "" ? label : entry.layer.name;
+    box.appendChild(title);
+    const unit = this.toRad === 1 ? "" : "\xB0";
+    const rRow = document.createElement("div");
+    rRow.textContent = `r = ${fmt(rr)}`;
+    const tRow = document.createElement("div");
+    tRow.textContent = `\u03B8 = ${fmt(entry.theta[index])}${unit}`;
+    box.appendChild(rRow);
+    box.appendChild(tRow);
+    box.style.display = "block";
+    const cw = this.container.clientWidth, ch = this.container.clientHeight;
+    const tw = box.offsetWidth, th = box.offsetHeight;
+    let left = px + 12;
+    if (left + tw > cw) left = px - tw - 12;
+    let top = py + 12;
+    if (top + th > ch) top = py - th - 12;
+    box.style.left = `${Math.max(0, left)}px`;
+    box.style.top = `${Math.max(0, top)}px`;
+  }
+  updateTooltip(entry, theta, r, cursor) {
+    const tip = this.tooltip;
+    tip.replaceChildren();
+    const head = document.createElement("div");
+    head.style.display = "flex";
+    head.style.alignItems = "center";
+    head.style.gap = "6px";
+    head.style.marginBottom = "3px";
+    const dot = document.createElement("span");
+    Object.assign(dot.style, {
+      width: "8px",
+      height: "8px",
+      borderRadius: "50%",
+      background: entry.layer.colorCss,
+      flex: "0 0 auto"
+    });
+    const nameEl = document.createElement("span");
+    nameEl.textContent = entry.layer.name;
+    head.appendChild(dot);
+    head.appendChild(nameEl);
+    tip.appendChild(head);
+    const unit = this.toRad === 1 ? "" : "\xB0";
+    const rRow = document.createElement("div");
+    rRow.textContent = `r = ${fmt(r)}`;
+    const tRow = document.createElement("div");
+    tRow.textContent = `\u03B8 = ${fmt(theta)}${unit}`;
+    tip.appendChild(rRow);
+    tip.appendChild(tRow);
+    tip.style.display = "block";
+    const cw = this.container.clientWidth;
+    const tw = tip.offsetWidth, th = tip.offsetHeight;
+    let left = cursor.x + 14;
+    if (left + tw > cw) left = cursor.x - tw - 14;
+    let top = cursor.y + 14;
+    if (top + th > this.container.clientHeight) top = cursor.y - th - 14;
+    tip.style.left = `${Math.max(0, left)}px`;
+    tip.style.top = `${Math.max(0, top)}px`;
+  }
+  // ---- Interaction ----------------------------------------------------------
+  attachInteraction() {
+    const el = this.overlayCanvas;
+    el.style.touchAction = "none";
+    el.style.cursor = "grab";
+    el.addEventListener(
+      "wheel",
+      (e) => {
+        e.preventDefault();
+        const factor = Math.exp(e.deltaY * 1e-3);
+        this.zoom = Math.max(1e-3, Math.min(1e3, this.zoom * factor));
+        this.R = this.baseR * this.zoom;
+        this.requestRender();
+      },
+      { passive: false }
+    );
+    let rotating = false;
+    let lastAngle = 0;
+    let downX = 0, downY = 0;
+    const cursorAngle = (px, py) => {
+      const sq = this.square();
+      return Math.atan2(sq.cy - py, px - sq.cx);
+    };
+    el.addEventListener("pointerdown", (e) => {
+      el.setPointerCapture(e.pointerId);
+      const rect = el.getBoundingClientRect();
+      downX = e.clientX - rect.left;
+      downY = e.clientY - rect.top;
+      rotating = true;
+      lastAngle = cursorAngle(downX, downY);
+      this.hoverPx = null;
+      el.style.cursor = "grabbing";
+    });
+    el.addEventListener("pointermove", (e) => {
+      const rect = el.getBoundingClientRect();
+      const px = e.clientX - rect.left;
+      const py = e.clientY - rect.top;
+      if (rotating) {
+        const ang = cursorAngle(px, py);
+        let d = ang - lastAngle;
+        if (d > Math.PI) d -= 2 * Math.PI;
+        else if (d < -Math.PI) d += 2 * Math.PI;
+        this.rotation += d;
+        lastAngle = ang;
+        this.retransform();
+        this.requestRender();
+      } else if (this.hoverEnabled) {
+        this.setHover({ x: px, y: py });
+      }
+    });
+    el.addEventListener("pointerleave", () => this.setHover(null));
+    const end = (e, click) => {
+      if (el.hasPointerCapture(e.pointerId)) el.releasePointerCapture(e.pointerId);
+      if (rotating) {
+        rotating = false;
+        el.style.cursor = "grab";
+      }
+      if (!click) return;
+      const rect = el.getBoundingClientRect();
+      const px = e.clientX - rect.left, py = e.clientY - rect.top;
+      if (Math.hypot(px - downX, py - downY) < 4) this.handleClick(this.square(), px, py);
+    };
+    el.addEventListener("pointerup", (e) => end(e, true));
+    el.addEventListener("pointercancel", (e) => end(e, false));
+  }
+  makeHomeButton() {
+    const dark = this.isDark;
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.title = "Reset view (Home)";
+    btn.setAttribute("aria-label", "Reset view (Home)");
+    Object.assign(btn.style, {
+      position: "absolute",
+      top: "8px",
+      right: "8px",
+      zIndex: "5",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "26px",
+      height: "26px",
+      padding: "0",
+      borderRadius: "6px",
+      background: dark ? "rgba(15,23,42,0.85)" : "rgba(255,255,255,0.9)",
+      color: dark ? "#cbd5e1" : "#475569",
+      border: `1px solid ${dark ? "rgba(148,163,184,0.25)" : "rgba(100,116,139,0.25)"}`,
+      backdropFilter: "blur(6px)",
+      boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
+      cursor: "pointer"
+    });
+    const svgNS = "http://www.w3.org/2000/svg";
+    const svg = document.createElementNS(svgNS, "svg");
+    svg.setAttribute("width", "16");
+    svg.setAttribute("height", "16");
+    svg.setAttribute("viewBox", "0 0 16 16");
+    svg.setAttribute("aria-hidden", "true");
+    const mkPath = (d) => {
+      const p = document.createElementNS(svgNS, "path");
+      p.setAttribute("d", d);
+      p.setAttribute("fill", "none");
+      p.setAttribute("stroke", "currentColor");
+      p.setAttribute("stroke-width", "1.5");
+      p.setAttribute("stroke-linecap", "round");
+      p.setAttribute("stroke-linejoin", "round");
+      return p;
+    };
+    svg.appendChild(mkPath("M2 7.5 8 2l6 5.5"));
+    svg.appendChild(mkPath("M4 7v6.5h3.2V10h1.6v3.5H12V7"));
+    btn.appendChild(svg);
+    btn.addEventListener("click", () => this.home());
+    this.container.appendChild(btn);
+    return btn;
+  }
 };
+function fmt(v) {
+  if (!Number.isFinite(v)) return String(v);
+  const a = Math.abs(v);
+  if (a !== 0 && (a < 1e-3 || a >= 1e5)) return v.toExponential(2);
+  return String(Math.round(v * 1e3) / 1e3);
+}
 
 // src/plot3d/mat4.ts
 function identity() {
@@ -5072,10 +5715,13 @@ export {
   ScatterLayer,
   StemLayer,
   SurfaceLayer,
+  TRANSFORM_GLSL,
+  TRANSFORM_UNIFORMS,
   TimeScale,
   autoTicks,
   boxStats,
   colormap,
+  createProgram,
   createToolbar,
   darkTheme,
   defaultFormat,
@@ -5087,8 +5733,10 @@ export {
   parseColor,
   quantileSorted,
   resolveTicks,
+  setTransformUniforms,
   spectrogram,
   toColorCss,
+  uniformLocations,
   withMinorTicks
 };
 //# sourceMappingURL=index.js.map