velo-plot 2.20.0 → 3.1.0

package/dist/{index-qunX30Xu.js → index-B7PTX94B.js}

@@ -1,2393 +1,2393 @@
 var dt = Object.defineProperty;
 var ct = (c, t, i) => t in c ? dt(c, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : c[t] = i;
 var u = (c, t, i) => ct(c, typeof t != "symbol" ? t + "" : t, i);
-import { d as O, e as N, E as ut } from "./axisFormat-CzumxpCL.js";
-class ft {
-  constructor(t, i) {
-    u(this, "ctx");
-    u(this, "options");
-    u(this, "state", {
-      enabled: !1,
-      selectionState: "idle",
-      point1: null,
-      point2: null,
-      hoveredPoint: null,
-      lastMeasurement: null
-    });
-    u(this, "overlayCanvas", null);
-    u(this, "overlayCtx", null);
-    // Label dragging
-    u(this, "labelOffset", { x: 15, y: 0 });
-    u(this, "isDraggingLabel", !1);
-    u(this, "labelBounds", null);
-    u(this, "dragStart", { x: 0, y: 0 });
-    u(this, "crosshairPosition", null);
-    // Bound handlers
-    u(this, "boundMouseMove");
-    u(this, "boundClick");
-    u(this, "boundKeyDown");
-    u(this, "boundMouseDown");
-    u(this, "boundMouseUp");
-    u(this, "boundResize");
-    this.ctx = t, this.options = {
-      lineColor: "#ff6b6b",
-      lineWidth: 2,
-      showLabels: !0,
-      labelFontSize: 12,
-      labelBackground: "rgba(0, 0, 0, 0.85)",
-      labelColor: "#ffffff",
-      showDelta: !0,
-      precision: 4,
-      showSlope: !0,
-      showDistance: !0,
-      className: "velo-plot-delta-tool",
-      highlightSize: 12,
-      highlightColor: "#00f2ff",
-      snapRadius: 30,
-      ...i
-    }, this.boundMouseMove = this.handleMouseMove.bind(this), this.boundClick = this.handleClick.bind(this), this.boundKeyDown = this.handleKeyDown.bind(this), this.boundMouseDown = this.handleLabelMouseDown.bind(this), this.boundMouseUp = this.handleLabelMouseUp.bind(this), this.boundResize = this.resizeOverlay.bind(this);
-  }
-  /**
-   * Enable the delta measurement tool
-   */
-  enable() {
-    this.state.enabled || (this.state.enabled = !0, this.state.selectionState = "idle", this.createOverlay(), this.attachListeners(), this.ctx.container.style.cursor = "crosshair");
-  }
-  /**
-   * Disable the delta measurement tool
-   */
-  disable() {
-    this.state.enabled && (this.state.enabled = !1, this.state.selectionState = "idle", this.state.point1 = null, this.state.point2 = null, this.state.hoveredPoint = null, this.detachListeners(), this.destroyOverlay(), this.ctx.container.style.cursor = "");
-  }
-  /**
-   * Toggle the tool on/off
-   */
-  toggle() {
-    this.state.enabled ? this.disable() : this.enable();
-  }
-  /**
-   * Check if tool is enabled
-   */
-  isEnabled() {
-    return this.state.enabled;
-  }
-  /**
-   * Get the current state
-   */
-  getState() {
-    return { ...this.state };
-  }
-  /**
-   * Get the last completed measurement
-   */
-  getMeasurement() {
-    return this.state.lastMeasurement;
-  }
-  /**
-   * Clear the current measurement
-   */
-  clear() {
-    this.state.point1 = null, this.state.point2 = null, this.state.selectionState = "idle", this.state.lastMeasurement = null, this.labelBounds = null, this.labelOffset = { x: 15, y: 0 }, this.renderOverlay();
-  }
-  /**
-   * Destroy the tool and cleanup
-   */
-  destroy() {
-    this.disable(), this.state.lastMeasurement = null;
-  }
-  /**
-   * Recalculate measurements (useful if data changes)
-   */
-  recalculate() {
-    if (!this.state.point1 || !this.state.point2) return;
-    const t = this.ctx.getSeries ? this.ctx.getSeries() : [], i = (s) => {
-      const o = t.find((l) => l.id === s.seriesId);
-      if (o && s.index < o.x.length) {
-        s.x = o.x[s.index], s.y = o.y[s.index], s.yAxisId = o.yAxisId;
-        const l = this.ctx.getPlotArea(), h = this.ctx.getViewBounds(), a = this.ctx.getYBounds ? this.ctx.getYBounds(o.yAxisId) : { yMin: h.yMin, yMax: h.yMax };
-        return s.pixelX = l.x + (s.x - h.xMin) / (h.xMax - h.xMin) * l.width, s.pixelY = l.y + (1 - (s.y - a.yMin) / (a.yMax - a.yMin)) * l.height, !0;
-      }
-      return !1;
-    }, e = i(this.state.point1), n = i(this.state.point2);
-    e && n ? (this.state.lastMeasurement = this.calculateMeasurement(), this.ctx.onMeasure && this.ctx.onMeasure(this.state.lastMeasurement)) : this.clear(), this.renderOverlay();
-  }
-  // ============================================
-  // Private Methods
-  // ============================================
-  createOverlay() {
-    this.overlayCanvas || (this.overlayCanvas = document.createElement("canvas"), this.overlayCanvas.className = this.options.className, this.overlayCanvas.style.cssText = `
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      pointer-events: none;
-      z-index: 1000;
-    `, this.resizeOverlay(), this.overlayCtx = this.overlayCanvas.getContext("2d"), this.ctx.container.appendChild(this.overlayCanvas));
-  }
-  resizeOverlay() {
-    if (!this.overlayCanvas) return;
-    const t = this.ctx.container.getBoundingClientRect(), i = window.devicePixelRatio || 1;
-    this.overlayCanvas.width = t.width * i, this.overlayCanvas.height = t.height * i, this.overlayCtx && (this.overlayCtx.setTransform(1, 0, 0, 1, 0, 0), this.overlayCtx.scale(i, i));
-  }
-  destroyOverlay() {
-    this.overlayCanvas && this.overlayCanvas.parentNode && this.overlayCanvas.parentNode.removeChild(this.overlayCanvas), this.overlayCanvas = null, this.overlayCtx = null;
-  }
-  attachListeners() {
-    this.ctx.container.addEventListener("mousemove", this.boundMouseMove, !0), this.ctx.container.addEventListener("mousedown", this.boundClick, !0), this.ctx.container.addEventListener("mousedown", this.boundMouseDown, !0), this.ctx.container.addEventListener("mouseup", this.boundMouseUp, !0), window.addEventListener("resize", this.boundResize), document.addEventListener("keydown", this.boundKeyDown);
-  }
-  detachListeners() {
-    this.ctx.container.removeEventListener("mousemove", this.boundMouseMove, !0), this.ctx.container.removeEventListener("mousedown", this.boundClick, !0), this.ctx.container.removeEventListener("mousedown", this.boundMouseDown, !0), this.ctx.container.removeEventListener("mouseup", this.boundMouseUp, !0), window.removeEventListener("resize", this.boundResize), document.removeEventListener("keydown", this.boundKeyDown);
-  }
-  handleMouseMove(t) {
-    if (!this.state.enabled) return;
-    const i = this.ctx.container.getBoundingClientRect(), e = this.ctx.getPlotArea(), n = this.ctx.getViewBounds(), s = t.clientX - i.left, o = t.clientY - i.top;
-    if (this.isDraggingLabel) {
-      this.labelOffset.x += s - this.dragStart.x, this.labelOffset.y += o - this.dragStart.y, this.dragStart = { x: s, y: o }, this.renderOverlay();
-      return;
-    }
-    if (this.labelBounds && s >= this.labelBounds.x && s <= this.labelBounds.x + this.labelBounds.width && o >= this.labelBounds.y && o <= this.labelBounds.y + this.labelBounds.height ? this.ctx.container.style.cursor = "move" : this.ctx.container.style.cursor = "crosshair", s < e.x || s > e.x + e.width || o < e.y || o > e.y + e.height) {
-      this.state.hoveredPoint = null, this.crosshairPosition = null, this.renderOverlay();
-      return;
-    }
-    this.crosshairPosition = { x: s, y: o };
-    const l = this.findNearestPoint(s, o, e, n);
-    this.state.hoveredPoint = l, this.renderOverlay();
-  }
-  handleLabelMouseDown(t) {
-    if (!this.state.enabled || !this.labelBounds) return;
-    const i = this.ctx.container.getBoundingClientRect(), e = t.clientX - i.left, n = t.clientY - i.top;
-    e >= this.labelBounds.x && e <= this.labelBounds.x + this.labelBounds.width && n >= this.labelBounds.y && n <= this.labelBounds.y + this.labelBounds.height && (this.isDraggingLabel = !0, this.dragStart = { x: e, y: n }, t.stopPropagation(), t.preventDefault());
-  }
-  handleLabelMouseUp() {
-    this.isDraggingLabel = !1;
-  }
-  async handleClick(t) {
-    var h;
-    if (!this.state.enabled) return;
-    (h = this.ctx.animationEngine) != null && h.isAnimating() && await this.ctx.animationEngine.waitForIdle(), t.stopPropagation(), t.preventDefault();
-    const i = this.ctx.container.getBoundingClientRect(), e = this.ctx.getPlotArea(), n = this.ctx.getViewBounds(), s = t.clientX - i.left, o = t.clientY - i.top;
-    if (s < e.x || s > e.x + e.width || o < e.y || o > e.y + e.height)
-      return;
-    const l = this.findNearestPoint(s, o, e, n);
-    if (l) {
-      if (t.preventDefault(), t.stopPropagation(), this.state.selectionState === "idle" || this.state.selectionState === "complete")
-        this.state.point1 = l, this.state.point2 = null, this.state.selectionState = "waitingSecond", this.state.lastMeasurement = null;
-      else if (this.state.selectionState === "waitingSecond") {
-        this.state.point2 = l, this.state.selectionState = "complete";
-        const a = this.calculateMeasurement();
-        this.state.lastMeasurement = a, this.ctx.onMeasure && this.ctx.onMeasure(a);
-      }
-      this.renderOverlay();
-    }
-  }
-  handleKeyDown(t) {
-    t.key === "Escape" && this.state.enabled && this.clear();
-  }
-  findNearestPoint(t, i, e, n) {
-    if (!this.ctx.getSeries) return null;
-    const s = this.ctx.getSeries();
-    let o = null, l = this.options.snapRadius;
-    for (const h of s) {
-      const a = h.x, r = h.y, d = Math.min(a.length, r.length), f = this.ctx.getYBounds ? this.ctx.getYBounds(h.yAxisId) : { yMin: n.yMin, yMax: n.yMax };
-      for (let p = 0; p < d; p++) {
-        const g = a[p], y = r[p], b = e.x + (g - n.xMin) / (n.xMax - n.xMin) * e.width, x = e.y + (1 - (y - f.yMin) / (f.yMax - f.yMin)) * e.height;
-        if (b < e.x || b > e.x + e.width || x < e.y || x > e.y + e.height) continue;
-        const S = Math.sqrt((t - b) ** 2 + (i - x) ** 2);
-        S < l && (l = S, o = {
-          x: g,
-          y,
-          seriesId: h.id,
-          yAxisId: h.yAxisId,
-          index: p,
-          pixelX: b,
-          pixelY: x
-        });
-      }
-    }
-    return o;
-  }
-  calculateMeasurement() {
-    const t = this.state.point1, i = this.state.point2, e = i.x - t.x, n = i.y - t.y, s = e !== 0 ? n / e : 1 / 0, o = Math.sqrt(e * e + n * n);
-    return {
-      x1: t.x,
-      y1: t.y,
-      x2: i.x,
-      y2: i.y,
-      deltaX: e,
-      deltaY: n,
-      slope: s,
-      distance: o,
-      pixelX1: t.pixelX,
-      pixelY1: t.pixelY,
-      pixelX2: i.pixelX,
-      pixelY2: i.pixelY
-    };
-  }
-  renderOverlay() {
-    if (!this.overlayCtx || !this.overlayCanvas) return;
-    this.resizeOverlay();
-    const t = this.ctx.container.getBoundingClientRect();
-    this.overlayCtx.clearRect(0, 0, t.width, t.height);
-    const i = this.options, e = this.overlayCtx, n = this.ctx.getPlotArea(), s = this.ctx.getViewBounds();
-    if (this.state.point1) {
-      const o = this.state.point1, l = this.ctx.getYBounds ? this.ctx.getYBounds(o.yAxisId) : { yMin: s.yMin, yMax: s.yMax };
-      o.pixelX = n.x + (o.x - s.xMin) / (s.xMax - s.xMin) * n.width, o.pixelY = n.y + (1 - (o.y - l.yMin) / (l.yMax - l.yMin)) * n.height;
-    }
-    if (this.state.point2) {
-      const o = this.state.point2, l = this.ctx.getYBounds ? this.ctx.getYBounds(o.yAxisId) : { yMin: s.yMin, yMax: s.yMax };
-      o.pixelX = n.x + (o.x - s.xMin) / (s.xMax - s.xMin) * n.width, o.pixelY = n.y + (1 - (o.y - l.yMin) / (l.yMax - l.yMin)) * n.height;
-    }
-    if (this.crosshairPosition && this.state.selectionState !== "complete") {
-      const o = this.crosshairPosition.x, l = this.crosshairPosition.y;
-      e.save(), e.setLineDash([4, 4]), e.strokeStyle = "rgba(150, 150, 150, 0.7)", e.lineWidth = 1, e.beginPath(), e.moveTo(o, n.y), e.lineTo(o, n.y + n.height), e.stroke(), e.beginPath(), e.moveTo(n.x, l), e.lineTo(n.x + n.width, l), e.stroke(), e.restore();
-    }
-    if (this.state.hoveredPoint && this.state.selectionState !== "complete") {
-      const o = this.state.hoveredPoint;
-      e.beginPath(), e.arc(o.pixelX, o.pixelY, i.highlightSize + 4, 0, Math.PI * 2), e.fillStyle = i.highlightColor + "30", e.fill(), e.beginPath(), e.arc(o.pixelX, o.pixelY, i.highlightSize, 0, Math.PI * 2), e.strokeStyle = i.highlightColor, e.lineWidth = 2, e.stroke(), e.beginPath(), e.arc(o.pixelX, o.pixelY, 4, 0, Math.PI * 2), e.fillStyle = i.highlightColor, e.fill(), this.drawPointTooltip(e, o, "Hover");
-    }
-    if (this.state.point1) {
-      const o = this.state.point1;
-      e.beginPath(), e.arc(o.pixelX, o.pixelY, i.highlightSize, 0, Math.PI * 2), e.fillStyle = i.lineColor, e.fill(), e.beginPath(), e.arc(o.pixelX, o.pixelY, i.highlightSize - 3, 0, Math.PI * 2), e.fillStyle = "#ffffff", e.fill(), e.beginPath(), e.arc(o.pixelX, o.pixelY, 3, 0, Math.PI * 2), e.fillStyle = i.lineColor, e.fill(), this.drawPointLabel(e, o.pixelX, o.pixelY - i.highlightSize - 8, "P1", i.lineColor);
-    }
-    if (this.state.point2) {
-      const o = this.state.point2;
-      e.beginPath(), e.arc(o.pixelX, o.pixelY, i.highlightSize, 0, Math.PI * 2), e.fillStyle = "#4ade80", e.fill(), e.beginPath(), e.arc(o.pixelX, o.pixelY, i.highlightSize - 3, 0, Math.PI * 2), e.fillStyle = "#ffffff", e.fill(), e.beginPath(), e.arc(o.pixelX, o.pixelY, 3, 0, Math.PI * 2), e.fillStyle = "#4ade80", e.fill(), this.drawPointLabel(e, o.pixelX, o.pixelY - i.highlightSize - 8, "P2", "#4ade80");
-    }
-    if (this.state.point1 && this.state.point2) {
-      const o = this.state.point1, l = this.state.point2;
-      e.beginPath(), e.moveTo(o.pixelX, o.pixelY), e.lineTo(l.pixelX, l.pixelY), e.strokeStyle = i.lineColor, e.lineWidth = i.lineWidth, e.setLineDash([6, 4]), e.stroke(), e.setLineDash([]), e.beginPath(), e.moveTo(o.pixelX, o.pixelY), e.lineTo(l.pixelX, o.pixelY), e.lineTo(l.pixelX, l.pixelY), e.strokeStyle = "rgba(255, 107, 107, 0.4)", e.lineWidth = 1, e.setLineDash([3, 3]), e.stroke(), e.setLineDash([]), i.showLabels && this.state.lastMeasurement && this.drawMeasurementLabel(e, o, l, this.state.lastMeasurement);
-    }
-    this.drawStatusIndicator(e);
-  }
-  drawPointTooltip(t, i, e) {
-    const n = this.options, s = `${e}: (${this.formatValue(i.x)}, ${this.formatValue(i.y)})`;
-    t.font = `${n.labelFontSize}px system-ui, sans-serif`;
-    const o = t.measureText(s), l = 6, h = o.width + l * 2, a = n.labelFontSize + l * 2;
-    let r = i.pixelX + 15, d = i.pixelY - a / 2;
-    const f = this.ctx.container.getBoundingClientRect();
-    r + h > f.width && (r = i.pixelX - h - 15), d < 0 && (d = 5), d + a > f.height && (d = f.height - a - 5), t.fillStyle = n.labelBackground, this.roundRect(t, r, d, h, a, 4), t.fill(), t.fillStyle = n.labelColor, t.textAlign = "left", t.textBaseline = "middle", t.fillText(s, r + l, d + a / 2);
-  }
-  drawPointLabel(t, i, e, n, s) {
-    const o = this.options;
-    t.font = `bold ${o.labelFontSize}px system-ui, sans-serif`, t.textAlign = "center", t.textBaseline = "bottom";
-    const l = t.measureText(n), h = 4, a = l.width + h * 2, r = o.labelFontSize + h;
-    t.fillStyle = s, this.roundRect(t, i - a / 2, e - r, a, r, 3), t.fill(), t.fillStyle = "#ffffff", t.fillText(n, i, e - 2);
-  }
-  drawMeasurementLabel(t, i, e, n) {
-    const s = this.options, o = (i.pixelX + e.pixelX) / 2, l = (i.pixelY + e.pixelY) / 2, h = [];
-    s.showDelta && (h.push(`ΔX: ${this.formatValue(n.deltaX)}`), h.push(`ΔY: ${this.formatValue(n.deltaY)}`)), s.showSlope && isFinite(n.slope) && h.push(`Slope: ${this.formatValue(n.slope)}`), s.showDistance && h.push(`Distance: ${this.formatValue(n.distance)}`);
-    const a = s.labelFontSize + 4, r = 10, d = 170, f = h.length * a + r * 2;
-    let p = o + this.labelOffset.x, g = l + this.labelOffset.y;
-    const y = this.ctx.container.getBoundingClientRect();
-    p < 0 && (p = 0), p + d > y.width && (p = y.width - d), g < 0 && (g = 0), g + f > y.height && (g = y.height - f), this.labelBounds = { x: p, y: g, width: d, height: f }, t.fillStyle = s.labelBackground, t.strokeStyle = s.lineColor, t.lineWidth = 2, this.roundRect(t, p, g, d, f, 8), t.fill(), t.stroke(), t.fillStyle = s.labelColor, t.font = `${s.labelFontSize}px system-ui, sans-serif`, t.textAlign = "left", t.textBaseline = "top", h.forEach((b, x) => {
-      t.fillText(b, p + r, g + r + x * a);
-    });
-  }
-  drawStatusIndicator(t) {
-    const i = this.options, e = this.ctx.getPlotArea();
-    let n = "", s = "#666";
-    if (this.state.selectionState === "idle" ? (n = "📏 Click a point to start measuring", s = i.highlightColor) : this.state.selectionState === "waitingSecond" ? (n = "📏 Click second point to complete", s = "#f59e0b") : this.state.selectionState === "complete" && (n = "📏 Measurement complete (ESC to clear)", s = "#4ade80"), !n) return;
-    t.font = "12px system-ui, sans-serif";
-    const h = t.measureText(n).width + 8 * 2, a = 24, r = e.x + 10, d = e.y + 10;
-    t.fillStyle = "rgba(0, 0, 0, 0.75)", this.roundRect(t, r, d, h, a, 4), t.fill(), t.beginPath(), t.arc(r + 16, d + a / 2, 4, 0, Math.PI * 2), t.fillStyle = s, t.fill(), t.fillStyle = "#fff", t.textAlign = "left", t.textBaseline = "middle", t.fillText(n, r + 26, d + a / 2);
-  }
-  roundRect(t, i, e, n, s, o) {
-    t.beginPath(), t.moveTo(i + o, e), t.lineTo(i + n - o, e), t.quadraticCurveTo(i + n, e, i + n, e + o), t.lineTo(i + n, e + s - o), t.quadraticCurveTo(i + n, e + s, i + n - o, e + s), t.lineTo(i + o, e + s), t.quadraticCurveTo(i, e + s, i, e + s - o), t.lineTo(i, e + o), t.quadraticCurveTo(i, e, i + o, e), t.closePath();
-  }
-  formatValue(t) {
-    const i = Math.abs(t);
-    return i === 0 ? "0" : i >= 1e6 || i < 1e-3 ? t.toExponential(this.options.precision - 1) : t.toPrecision(this.options.precision);
-  }
+import { d as O, e as N, E as ut } from "./axisFormat-Sz4WIJfQ.js";
+const V = {
+  top: 10,
+  right: 12,
+  bottom: 10,
+  left: 12
+}, L = {
+  // Container
+  backgroundColor: "rgba(15, 18, 25, 0.95)",
+  backgroundGradient: "rgba(25, 30, 40, 0.90)",
+  borderColor: "rgba(255, 255, 255, 0.12)",
+  borderWidth: 1,
+  borderRadius: 8,
+  backdropBlur: 12,
+  shadow: {
+    color: "rgba(0, 0, 0, 0.4)",
+    offsetX: 0,
+    offsetY: 4,
+    blur: 16
+  },
+  // Typography
+  fontFamily: "Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif",
+  textColor: "#ffffff",
+  textSecondaryColor: "rgba(255, 255, 255, 0.6)",
+  titleFontSize: 12,
+  titleFontWeight: 600,
+  contentFontSize: 11,
+  lineHeight: 1.4,
+  // Spacing
+  padding: V,
+  itemGap: 4,
+  headerGap: 8,
+  // Decorations
+  showSeriesIndicator: !0,
+  seriesIndicatorSize: 8,
+  showHeaderSeparator: !0,
+  separatorColor: "rgba(255, 255, 255, 0.1)",
+  showArrow: !0,
+  arrowSize: 6
+}, et = {
+  // Container
+  backgroundColor: "rgba(255, 255, 255, 0.98)",
+  borderColor: "rgba(0, 0, 0, 0.12)",
+  borderWidth: 1,
+  borderRadius: 8,
+  backdropBlur: 8,
+  shadow: {
+    color: "rgba(0, 0, 0, 0.12)",
+    offsetX: 0,
+    offsetY: 4,
+    blur: 12
+  },
+  // Typography
+  fontFamily: "Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif",
+  textColor: "#1a1a1a",
+  textSecondaryColor: "rgba(0, 0, 0, 0.55)",
+  titleFontSize: 12,
+  titleFontWeight: 600,
+  contentFontSize: 11,
+  lineHeight: 1.4,
+  // Spacing
+  padding: V,
+  itemGap: 4,
+  headerGap: 8,
+  // Decorations
+  showSeriesIndicator: !0,
+  seriesIndicatorSize: 8,
+  showHeaderSeparator: !0,
+  separatorColor: "rgba(0, 0, 0, 0.08)",
+  showArrow: !0,
+  arrowSize: 6
+}, ft = {
+  // Container
+  backgroundColor: "rgba(255, 255, 255, 0.08)",
+  backgroundGradient: "rgba(255, 255, 255, 0.04)",
+  borderColor: "rgba(255, 255, 255, 0.2)",
+  borderWidth: 1,
+  borderRadius: 12,
+  backdropBlur: 20,
+  shadow: {
+    color: "rgba(0, 0, 0, 0.3)",
+    offsetX: 0,
+    offsetY: 8,
+    blur: 32
+  },
+  // Typography
+  fontFamily: "Inter, system-ui, sans-serif",
+  textColor: "rgba(255, 255, 255, 0.95)",
+  textSecondaryColor: "rgba(255, 255, 255, 0.6)",
+  titleFontSize: 12,
+  titleFontWeight: 600,
+  contentFontSize: 11,
+  lineHeight: 1.5,
+  // Spacing
+  padding: { top: 12, right: 14, bottom: 12, left: 14 },
+  itemGap: 5,
+  headerGap: 10,
+  // Decorations
+  showSeriesIndicator: !0,
+  seriesIndicatorSize: 8,
+  showHeaderSeparator: !0,
+  separatorColor: "rgba(255, 255, 255, 0.15)",
+  showArrow: !0,
+  arrowSize: 7
+}, it = {
+  // Container
+  backgroundColor: "rgba(10, 15, 30, 0.95)",
+  backgroundGradient: "rgba(20, 25, 50, 0.90)",
+  borderColor: "rgba(100, 120, 255, 0.25)",
+  borderWidth: 1,
+  borderRadius: 8,
+  backdropBlur: 15,
+  shadow: {
+    color: "rgba(50, 70, 150, 0.25)",
+    offsetX: 0,
+    offsetY: 4,
+    blur: 20
+  },
+  // Typography
+  fontFamily: "Inter, system-ui, sans-serif",
+  textColor: "#e0e8ff",
+  textSecondaryColor: "rgba(180, 190, 255, 0.6)",
+  titleFontSize: 12,
+  titleFontWeight: 600,
+  contentFontSize: 11,
+  lineHeight: 1.4,
+  // Spacing
+  padding: V,
+  itemGap: 4,
+  headerGap: 8,
+  // Decorations
+  showSeriesIndicator: !0,
+  seriesIndicatorSize: 8,
+  showHeaderSeparator: !0,
+  separatorColor: "rgba(100, 120, 255, 0.15)",
+  showArrow: !0,
+  arrowSize: 6
+}, st = {
+  // Container
+  backgroundColor: "rgba(8, 20, 40, 0.96)",
+  backgroundGradient: "rgba(15, 35, 60, 0.92)",
+  borderColor: "rgba(30, 136, 229, 0.35)",
+  borderWidth: 1,
+  borderRadius: 6,
+  backdropBlur: 10,
+  shadow: {
+    color: "rgba(30, 136, 229, 0.2)",
+    offsetX: 0,
+    offsetY: 4,
+    blur: 16
+  },
+  // Typography
+  fontFamily: '"JetBrains Mono", "Fira Code", monospace',
+  textColor: "#bbdefb",
+  textSecondaryColor: "rgba(144, 202, 249, 0.7)",
+  titleFontSize: 11,
+  titleFontWeight: 600,
+  contentFontSize: 11,
+  lineHeight: 1.5,
+  // Spacing
+  padding: { top: 8, right: 10, bottom: 8, left: 10 },
+  itemGap: 3,
+  headerGap: 6,
+  // Decorations
+  showSeriesIndicator: !0,
+  seriesIndicatorSize: 6,
+  showHeaderSeparator: !0,
+  separatorColor: "rgba(30, 136, 229, 0.2)",
+  showArrow: !0,
+  arrowSize: 5
+}, pt = {
+  // Container
+  backgroundColor: "rgba(0, 0, 0, 0.92)",
+  borderColor: "#00ffff",
+  borderWidth: 1,
+  borderRadius: 4,
+  backdropBlur: 0,
+  shadow: {
+    color: "rgba(0, 255, 255, 0.35)",
+    offsetX: 0,
+    offsetY: 0,
+    blur: 20
+  },
+  // Typography
+  fontFamily: '"Orbitron", "Exo 2", sans-serif',
+  textColor: "#00ffff",
+  textSecondaryColor: "rgba(0, 255, 255, 0.6)",
+  titleFontSize: 11,
+  titleFontWeight: 700,
+  contentFontSize: 10,
+  lineHeight: 1.4,
+  // Spacing
+  padding: { top: 8, right: 12, bottom: 8, left: 12 },
+  itemGap: 4,
+  headerGap: 6,
+  // Decorations
+  showSeriesIndicator: !0,
+  seriesIndicatorSize: 6,
+  showHeaderSeparator: !0,
+  separatorColor: "rgba(0, 255, 255, 0.3)",
+  showArrow: !1,
+  arrowSize: 0
+}, gt = {
+  // Container
+  backgroundColor: "rgba(30, 35, 45, 0.9)",
+  borderColor: "transparent",
+  borderWidth: 0,
+  borderRadius: 4,
+  backdropBlur: 8,
+  shadow: {
+    color: "rgba(0, 0, 0, 0.3)",
+    offsetX: 0,
+    offsetY: 2,
+    blur: 8
+  },
+  // Typography
+  fontFamily: "Inter, system-ui, sans-serif",
+  textColor: "#ffffff",
+  textSecondaryColor: "rgba(255, 255, 255, 0.7)",
+  titleFontSize: 10,
+  titleFontWeight: 500,
+  contentFontSize: 10,
+  lineHeight: 1.3,
+  // Spacing
+  padding: { top: 6, right: 8, bottom: 6, left: 8 },
+  itemGap: 2,
+  headerGap: 4,
+  // Decorations
+  showSeriesIndicator: !1,
+  seriesIndicatorSize: 0,
+  showHeaderSeparator: !1,
+  separatorColor: "transparent",
+  showArrow: !1,
+  arrowSize: 0
+}, yt = {
+  dark: L,
+  light: et,
+  glass: ft,
+  midnight: it,
+  electrochemistry: st,
+  neon: pt,
+  minimal: gt
+};
+function xt(c) {
+  const t = yt[c];
+  return t || (console.warn(`[Tooltip] Unknown theme "${c}", using dark`), L);
 }
-class pt {
-  constructor(t, i) {
-    u(this, "ctx");
-    u(this, "options");
-    u(this, "state", {
-      enabled: !1,
-      selectionState: "idle",
-      point1: null,
-      point2: null,
-      hoveredPoint: null,
-      lastMeasurement: null
-    });
-    u(this, "overlayCanvas", null);
-    u(this, "overlayCtx", null);
-    // Label dragging
-    u(this, "labelOffset", { x: 15, y: 0 });
-    u(this, "isDraggingLabel", !1);
-    u(this, "labelBounds", null);
-    u(this, "dragStart", { x: 0, y: 0 });
-    u(this, "crosshairPosition", null);
-    // Bound handlers
-    u(this, "boundMouseMove");
-    u(this, "boundClick");
-    u(this, "boundKeyDown");
-    u(this, "boundMouseDown");
-    u(this, "boundMouseUp");
-    u(this, "boundResize");
-    this.ctx = t, this.options = {
-      lineColor: "#ff6b6b",
-      lineWidth: 2,
-      showLabels: !0,
-      labelFontSize: 12,
-      labelBackground: "rgba(0, 0, 0, 0.85)",
-      labelColor: "#ffffff",
-      showPeak: !0,
-      precision: 4,
-      className: "velo-plot-peak-tool",
-      highlightSize: 12,
-      highlightColor: "#00f2ff",
-      snapRadius: 30,
-      baselineWindow: 10,
-      areaFill: "rgba(255, 107, 107, 0.3)",
-      ...i
-    }, this.boundMouseMove = this.handleMouseMove.bind(this), this.boundClick = this.handleClick.bind(this), this.boundKeyDown = this.handleKeyDown.bind(this), this.boundMouseDown = this.handleLabelMouseDown.bind(this), this.boundMouseUp = this.handleLabelMouseUp.bind(this), this.boundResize = this.resizeOverlay.bind(this);
-  }
-  /**
-   * Enable the peak measurement tool
-   */
-  enable() {
-    this.state.enabled || (this.state.enabled = !0, this.state.selectionState = "idle", this.createOverlay(), this.attachListeners(), this.ctx.container.style.cursor = "crosshair");
+function bt(c, t) {
+  const i = typeof c == "string" ? xt(c) : c;
+  return {
+    ...i,
+    ...t,
+    padding: { ...i.padding, ...t.padding },
+    shadow: { ...i.shadow, ...t.shadow }
+  };
+}
+function B(c) {
+  switch (c.toLowerCase()) {
+    case "light":
+      return et;
+    case "midnight":
+      return it;
+    case "electrochemistry":
+    case "electrochem":
+      return st;
+    case "dark":
+    default:
+      return L;
   }
-  /**
-   * Disable the peak measurement tool
-   */
-  disable() {
-    this.state.enabled && (this.state.enabled = !1, this.state.selectionState = "idle", this.state.point1 = null, this.state.point2 = null, this.state.hoveredPoint = null, this.detachListeners(), this.destroyOverlay(), this.ctx.container.style.cursor = "");
+}
+const St = L, mt = {
+  offset: { x: 12, y: 12 },
+  preferredPosition: "auto",
+  constrainToPlotArea: !0,
+  constrainToContainer: !0,
+  autoFlip: !0,
+  showArrow: !0,
+  arrowSize: 6
+};
+class Tt {
+  constructor(t = {}) {
+    u(this, "config");
+    u(this, "containerWidth", 0);
+    u(this, "containerHeight", 0);
+    u(this, "plotArea", null);
+    this.config = { ...mt, ...t };
   }
   /**
-   * Toggle the tool on/off
+   * Update container dimensions
    */
-  toggle() {
-    this.state.enabled ? this.disable() : this.enable();
+  setContainerSize(t, i) {
+    this.containerWidth = t, this.containerHeight = i;
   }
   /**
-   * Check if tool is enabled
+   * Update plot area bounds
    */
-  isEnabled() {
-    return this.state.enabled;
+  setPlotArea(t) {
+    this.plotArea = t;
   }
   /**
-   * Get the current state
+   * Update configuration
    */
-  getState() {
-    return { ...this.state };
+  configure(t) {
+    this.config = { ...this.config, ...t };
   }
   /**
-   * Get the last completed measurement
+   * Calculate optimal tooltip position
+   * 
+   * @param targetX - Target X coordinate (where tooltip points to)
+   * @param targetY - Target Y coordinate
+   * @param measurement - Tooltip dimensions
+   * @returns Calculated position with arrow configuration
    */
-  getMeasurement() {
-    return this.state.lastMeasurement;
+  calculatePosition(t, i, e) {
+    const { offset: n, preferredPosition: s, autoFlip: o, showArrow: l, arrowSize: h } = this.config, a = e.width + e.padding.left + e.padding.right, r = e.height + e.padding.top + e.padding.bottom, d = this.determinePosition(
+      t,
+      i,
+      a,
+      r,
+      s
+    );
+    let { x: f, y: p, arrowPosition: g } = this.calculateCoordinates(
+      t,
+      i,
+      a,
+      r,
+      d,
+      n,
+      l ? h : 0
+    ), y = !1;
+    if (o && !this.fitsInBounds(f, p, a, r)) {
+      const S = this.flipPosition(d), T = this.calculateCoordinates(
+        t,
+        i,
+        a,
+        r,
+        S,
+        n,
+        l ? h : 0
+      );
+      this.fitsInBounds(T.x, T.y, a, r) && (f = T.x, p = T.y, g = T.arrowPosition, y = !0);
+    }
+    const b = this.constrainToBounds(f, p, a, r);
+    let x = 0;
+    if (l) {
+      if (g === "top" || g === "bottom") {
+        const S = t - b.x;
+        x = Math.max(h + 4, Math.min(a - h - 4, S));
+      } else if (g === "left" || g === "right") {
+        const S = i - b.y;
+        x = Math.max(h + 4, Math.min(r - h - 4, S));
+      }
+    }
+    return {
+      x: b.x,
+      y: b.y,
+      arrowPosition: l ? g : "none",
+      arrowOffset: x,
+      wasFlipped: y
+    };
   }
   /**
-   * Clear the current measurement
+   * Determine best position based on available space
    */
-  clear() {
-    this.state.point1 = null, this.state.point2 = null, this.state.selectionState = "idle", this.state.lastMeasurement = null, this.labelBounds = null, this.labelOffset = { x: 15, y: 0 }, this.renderOverlay();
+  determinePosition(t, i, e, n, s) {
+    if (s !== "auto")
+      return s;
+    const o = this.getConstraintBounds(), l = i - o.top, h = o.bottom - i, a = t - o.left, r = o.right - t, d = l >= n + this.config.offset.y, f = h >= n + this.config.offset.y, p = r >= e + this.config.offset.x, g = a >= e + this.config.offset.x;
+    return d && l >= h ? "top" : f ? "bottom" : p && r >= a ? "right" : g ? "left" : [
+      { pos: "top", space: l },
+      { pos: "bottom", space: h },
+      { pos: "right", space: r },
+      { pos: "left", space: a }
+    ].sort((b, x) => x.space - b.space)[0].pos;
   }
   /**
-   * Destroy the tool and cleanup
+   * Calculate tooltip coordinates for a given position
    */
-  destroy() {
-    this.disable(), this.state.lastMeasurement = null;
+  calculateCoordinates(t, i, e, n, s, o, l) {
+    let h, a, r;
+    switch (s) {
+      case "top":
+        h = t - e / 2, a = i - n - o.y - l, r = "bottom";
+        break;
+      case "bottom":
+        h = t - e / 2, a = i + o.y + l, r = "top";
+        break;
+      case "right":
+        h = t + o.x + l, a = i - n / 2, r = "left";
+        break;
+      case "left":
+        h = t - e - o.x - l, a = i - n / 2, r = "right";
+        break;
+    }
+    return { x: h, y: a, arrowPosition: r };
   }
   /**
-   * Recalculate measurements (useful if data changes)
+   * Get the opposite position for flipping
    */
-  recalculate() {
-    if (!this.state.point1 || !this.state.point2) return;
-    const t = this.ctx.getSeries ? this.ctx.getSeries() : [], i = (s) => {
-      const o = t.find((l) => l.id === s.seriesId);
-      if (o && s.index < o.x.length) {
-        s.x = o.x[s.index], s.y = o.y[s.index], s.yAxisId = o.yAxisId;
-        const l = this.ctx.getPlotArea(), h = this.ctx.getViewBounds(), a = this.ctx.getYBounds ? this.ctx.getYBounds(o.yAxisId) : { yMin: h.yMin, yMax: h.yMax };
-        return s.pixelX = l.x + (s.x - h.xMin) / (h.xMax - h.xMin) * l.width, s.pixelY = l.y + (1 - (s.y - a.yMin) / (a.yMax - a.yMin)) * l.height, !0;
-      }
-      return !1;
-    }, e = i(this.state.point1), n = i(this.state.point2);
-    e && n ? (this.state.lastMeasurement = this.calculateMeasurement(), this.ctx.onMeasure && this.ctx.onMeasure(this.state.lastMeasurement)) : this.clear(), this.renderOverlay();
-  }
-  // ============================================
-  // Private Methods
-  // ============================================
-  createOverlay() {
-    this.overlayCanvas || (this.overlayCanvas = document.createElement("canvas"), this.overlayCanvas.className = this.options.className, this.overlayCanvas.style.cssText = `
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      pointer-events: none;
-      z-index: 1000;
-    `, this.resizeOverlay(), this.overlayCtx = this.overlayCanvas.getContext("2d"), this.ctx.container.appendChild(this.overlayCanvas));
-  }
-  resizeOverlay() {
-    if (!this.overlayCanvas) return;
-    const t = this.ctx.container.getBoundingClientRect(), i = window.devicePixelRatio || 1;
-    this.overlayCanvas.width = t.width * i, this.overlayCanvas.height = t.height * i, this.overlayCtx && (this.overlayCtx.setTransform(1, 0, 0, 1, 0, 0), this.overlayCtx.scale(i, i));
-  }
-  destroyOverlay() {
-    this.overlayCanvas && this.overlayCanvas.parentNode && this.overlayCanvas.parentNode.removeChild(this.overlayCanvas), this.overlayCanvas = null, this.overlayCtx = null;
-  }
-  attachListeners() {
-    this.ctx.container.addEventListener("mousemove", this.boundMouseMove, !0), this.ctx.container.addEventListener("mousedown", this.boundClick, !0), this.ctx.container.addEventListener("mousedown", this.boundMouseDown, !0), this.ctx.container.addEventListener("mouseup", this.boundMouseUp, !0), window.addEventListener("resize", this.boundResize), document.addEventListener("keydown", this.boundKeyDown);
-  }
-  detachListeners() {
-    this.ctx.container.removeEventListener("mousemove", this.boundMouseMove, !0), this.ctx.container.removeEventListener("mousedown", this.boundClick, !0), this.ctx.container.removeEventListener("mousedown", this.boundMouseDown, !0), this.ctx.container.removeEventListener("mouseup", this.boundMouseUp, !0), window.removeEventListener("resize", this.boundResize), document.removeEventListener("keydown", this.boundKeyDown);
-  }
-  handleMouseMove(t) {
-    if (!this.state.enabled) return;
-    const i = this.ctx.container.getBoundingClientRect(), e = this.ctx.getPlotArea(), n = this.ctx.getViewBounds(), s = t.clientX - i.left, o = t.clientY - i.top;
-    if (this.isDraggingLabel) {
-      this.labelOffset.x += s - this.dragStart.x, this.labelOffset.y += o - this.dragStart.y, this.dragStart = { x: s, y: o }, this.renderOverlay();
-      return;
-    }
-    if (this.labelBounds && s >= this.labelBounds.x && s <= this.labelBounds.x + this.labelBounds.width && o >= this.labelBounds.y && o <= this.labelBounds.y + this.labelBounds.height ? this.ctx.container.style.cursor = "move" : this.ctx.container.style.cursor = "crosshair", s < e.x || s > e.x + e.width || o < e.y || o > e.y + e.height) {
-      this.state.hoveredPoint = null, this.crosshairPosition = null, this.renderOverlay();
-      return;
-    }
-    this.crosshairPosition = { x: s, y: o };
-    const l = this.state.selectionState === "waitingSecond" && this.state.point1 ? this.state.point1.seriesId : void 0, h = this.findNearestPoint(s, o, e, n, l);
-    this.state.hoveredPoint = h, this.renderOverlay();
-  }
-  handleLabelMouseDown(t) {
-    if (!this.state.enabled || !this.labelBounds) return;
-    const i = this.ctx.container.getBoundingClientRect(), e = t.clientX - i.left, n = t.clientY - i.top;
-    e >= this.labelBounds.x && e <= this.labelBounds.x + this.labelBounds.width && n >= this.labelBounds.y && n <= this.labelBounds.y + this.labelBounds.height && (this.isDraggingLabel = !0, this.dragStart = { x: e, y: n }, t.stopPropagation(), t.preventDefault());
-  }
-  handleLabelMouseUp() {
-    this.isDraggingLabel = !1;
-  }
-  async handleClick(t) {
-    var a;
-    if (!this.state.enabled) return;
-    (a = this.ctx.animationEngine) != null && a.isAnimating() && await this.ctx.animationEngine.waitForIdle(), t.stopPropagation(), t.preventDefault();
-    const i = this.ctx.container.getBoundingClientRect(), e = this.ctx.getPlotArea(), n = this.ctx.getViewBounds(), s = t.clientX - i.left, o = t.clientY - i.top;
-    if (s < e.x || s > e.x + e.width || o < e.y || o > e.y + e.height)
-      return;
-    const l = this.state.selectionState === "waitingSecond" && this.state.point1 ? this.state.point1.seriesId : void 0, h = this.findNearestPoint(s, o, e, n, l);
-    if (h) {
-      if (t.preventDefault(), t.stopPropagation(), this.state.selectionState === "idle" || this.state.selectionState === "complete")
-        this.state.point1 = h, this.state.point2 = null, this.state.selectionState = "waitingSecond", this.state.lastMeasurement = null;
-      else if (this.state.selectionState === "waitingSecond") {
-        if (this.state.point1 && h.seriesId !== this.state.point1.seriesId)
-          return;
-        this.state.point2 = h, this.state.selectionState = "complete";
-        const r = this.calculateMeasurement();
-        this.state.lastMeasurement = r, this.ctx.onMeasure && this.ctx.onMeasure(r);
-      }
-      this.renderOverlay();
-    }
-  }
-  handleKeyDown(t) {
-    t.key === "Escape" && this.state.enabled && this.clear();
-  }
-  findNearestPoint(t, i, e, n, s) {
-    if (!this.ctx.getSeries) return null;
-    const o = this.ctx.getSeries();
-    let l = null, h = this.options.snapRadius;
-    for (const a of o) {
-      if (s && a.id !== s) continue;
-      const r = a.x, d = a.y, f = Math.min(r.length, d.length), p = this.ctx.getYBounds ? this.ctx.getYBounds(a.yAxisId) : { yMin: n.yMin, yMax: n.yMax };
-      for (let g = 0; g < f; g++) {
-        const y = r[g], b = d[g], x = e.x + (y - n.xMin) / (n.xMax - n.xMin) * e.width, S = e.y + (1 - (b - p.yMin) / (p.yMax - p.yMin)) * e.height;
-        if (x < e.x || x > e.x + e.width || S < e.y || S > e.y + e.height) continue;
-        const T = Math.sqrt((t - x) ** 2 + (i - S) ** 2);
-        T < h && (h = T, l = {
-          x: y,
-          y: b,
-          seriesId: a.id,
-          yAxisId: a.yAxisId,
-          index: g,
-          pixelX: x,
-          pixelY: S
-        });
-      }
+  flipPosition(t) {
+    switch (t) {
+      case "top":
+        return "bottom";
+      case "bottom":
+        return "top";
+      case "left":
+        return "right";
+      case "right":
+        return "left";
     }
-    return l;
   }
-  calculateMeasurement() {
-    const t = this.state.point1, i = this.state.point2, n = (this.ctx.getSeries ? this.ctx.getSeries() : []).find((m) => m.id === t.seriesId);
-    if (!n)
-      return {
-        x1: t.x,
-        y1: t.y,
-        x2: i.x,
-        y2: i.y,
-        area: 0,
-        integral: 0,
-        baselineSlope: 0,
-        baselineIntercept: 0,
-        peakHeight: 0,
-        peakX: 0,
-        peakY: 0,
-        pixelX1: t.pixelX,
-        pixelY1: t.pixelY,
-        pixelX2: i.pixelX,
-        pixelY2: i.pixelY
-      };
-    const s = n.x, o = n.y, l = Math.min(t.index, i.index), h = Math.max(t.index, i.index), a = this.options.baselineWindow, r = [], d = [];
-    for (let m = Math.max(0, l - Math.floor(a / 2)); m <= Math.min(s.length - 1, l + Math.floor(a / 2)); m++)
-      r.push(s[m]), d.push(o[m]);
-    for (let m = Math.max(0, h - Math.floor(a / 2)); m <= Math.min(s.length - 1, h + Math.floor(a / 2)); m++)
-      r.push(s[m]), d.push(o[m]);
-    const f = r.length;
-    let p = 0, g = 0, y = 0, b = 0;
-    for (let m = 0; m < f; m++)
-      p += r[m], g += d[m], y += r[m] * d[m], b += r[m] * r[m];
-    const x = (f * y - p * g) / (f * b - p * p), S = (g - x * p) / f;
-    let T = 0, v = 0, Y = -1 / 0, w = 0, C = 0;
-    for (let m = l; m < h; m++) {
-      const I = s[m], A = o[m], $ = s[m + 1], R = o[m + 1], D = $ - I, q = (A + R) / 2;
-      v += q * D;
-      const j = x * I + S, rt = x * $ + S, ht = (j + rt) / 2;
-      T += (q - ht) * D;
-      const J = A - j;
-      J > Y && (Y = J, w = I, C = A);
-    }
+  /**
+   * Check if tooltip fits within bounds
+   */
+  fitsInBounds(t, i, e, n) {
+    const s = this.getConstraintBounds();
+    return t >= s.left && i >= s.top && t + e <= s.right && i + n <= s.bottom;
+  }
+  /**
+   * Constrain position to stay within bounds
+   */
+  constrainToBounds(t, i, e, n) {
+    const s = this.getConstraintBounds(), o = 4;
+    let l = t, h = i;
+    return l < s.left + o ? l = s.left + o : l + e > s.right - o && (l = s.right - e - o), h < s.top + o ? h = s.top + o : h + n > s.bottom - o && (h = s.bottom - n - o), { x: l, y: h };
+  }
+  /**
+   * Get the bounds to constrain tooltip within
+   */
+  getConstraintBounds() {
+    let t = {
+      top: 0,
+      left: 0,
+      right: this.containerWidth,
+      bottom: this.containerHeight
+    };
+    return this.config.constrainToPlotArea && this.plotArea && (t = {
+      top: Math.max(t.top, this.plotArea.y),
+      left: Math.max(t.left, this.plotArea.x),
+      right: Math.min(t.right, this.plotArea.x + this.plotArea.width),
+      bottom: Math.min(t.bottom, this.plotArea.y + this.plotArea.height)
+    }), t;
+  }
+  /**
+   * Calculate position for crosshair tooltip (follows cursor vertically)
+   */
+  calculateCrosshairPosition(t, i, e) {
+    const { offset: n } = this.config, s = this.getConstraintBounds(), o = e.width + e.padding.left + e.padding.right, l = e.height + e.padding.top + e.padding.bottom;
+    let h = t + n.x, a = "left";
+    h + o > s.right - 4 && (h = t - o - n.x, a = "right");
+    let r = i - l / 2;
+    r = Math.max(s.top + 4, Math.min(s.bottom - l - 4, r));
+    const d = i - r;
     return {
-      x1: t.x,
-      y1: t.y,
-      x2: i.x,
-      y2: i.y,
-      area: T,
-      integral: v,
-      baselineSlope: x,
-      baselineIntercept: S,
-      peakHeight: Y,
-      peakX: w,
-      peakY: C,
-      pixelX1: t.pixelX,
-      pixelY1: t.pixelY,
-      pixelX2: i.pixelX,
-      pixelY2: i.pixelY
+      x: h,
+      y: r,
+      arrowPosition: a,
+      arrowOffset: Math.max(8, Math.min(l - 8, d)),
+      wasFlipped: a === "right"
     };
   }
-  renderOverlay() {
-    if (!this.overlayCtx || !this.overlayCanvas) return;
-    this.resizeOverlay();
-    const t = this.ctx.container.getBoundingClientRect();
-    this.overlayCtx.clearRect(0, 0, t.width, t.height);
-    const i = this.options, e = this.overlayCtx, n = this.ctx.getPlotArea(), s = this.ctx.getViewBounds();
-    if (this.state.point1) {
-      const o = this.state.point1, l = this.ctx.getYBounds ? this.ctx.getYBounds(o.yAxisId) : { yMin: s.yMin, yMax: s.yMax };
-      o.pixelX = n.x + (o.x - s.xMin) / (s.xMax - s.xMin) * n.width, o.pixelY = n.y + (1 - (o.y - l.yMin) / (l.yMax - l.yMin)) * n.height;
-    }
-    if (this.state.point2) {
-      const o = this.state.point2, l = this.ctx.getYBounds ? this.ctx.getYBounds(o.yAxisId) : { yMin: s.yMin, yMax: s.yMax };
-      o.pixelX = n.x + (o.x - s.xMin) / (s.xMax - s.xMin) * n.width, o.pixelY = n.y + (1 - (o.y - l.yMin) / (l.yMax - l.yMin)) * n.height;
-    }
-    if (this.crosshairPosition && this.state.selectionState !== "complete") {
-      const o = this.crosshairPosition.x, l = this.crosshairPosition.y;
-      e.save(), e.setLineDash([4, 4]), e.strokeStyle = "rgba(150, 150, 150, 0.7)", e.lineWidth = 1, e.beginPath(), e.moveTo(o, n.y), e.lineTo(o, n.y + n.height), e.stroke(), e.beginPath(), e.moveTo(n.x, l), e.lineTo(n.x + n.width, l), e.stroke(), e.restore();
-    }
-    if (this.state.hoveredPoint && this.state.selectionState !== "complete") {
-      const o = this.state.hoveredPoint;
-      e.beginPath(), e.arc(o.pixelX, o.pixelY, i.highlightSize + 4, 0, Math.PI * 2), e.fillStyle = i.highlightColor + "30", e.fill(), e.beginPath(), e.arc(o.pixelX, o.pixelY, i.highlightSize, 0, Math.PI * 2), e.strokeStyle = i.highlightColor, e.lineWidth = 2, e.stroke(), e.beginPath(), e.arc(o.pixelX, o.pixelY, 4, 0, Math.PI * 2), e.fillStyle = i.highlightColor, e.fill(), this.drawPointTooltip(e, o, "Hover");
-    }
-    if (this.state.point1) {
-      const o = this.state.point1;
-      e.beginPath(), e.arc(o.pixelX, o.pixelY, i.highlightSize, 0, Math.PI * 2), e.fillStyle = i.lineColor, e.fill(), e.beginPath(), e.arc(o.pixelX, o.pixelY, i.highlightSize - 3, 0, Math.PI * 2), e.fillStyle = "#ffffff", e.fill(), e.beginPath(), e.arc(o.pixelX, o.pixelY, 3, 0, Math.PI * 2), e.fillStyle = i.lineColor, e.fill(), this.drawPointLabel(e, o.pixelX, o.pixelY - i.highlightSize - 8, "P1", i.lineColor);
-    }
-    if (this.state.point2) {
-      const o = this.state.point2;
-      e.beginPath(), e.arc(o.pixelX, o.pixelY, i.highlightSize, 0, Math.PI * 2), e.fillStyle = "#4ade80", e.fill(), e.beginPath(), e.arc(o.pixelX, o.pixelY, i.highlightSize - 3, 0, Math.PI * 2), e.fillStyle = "#ffffff", e.fill(), e.beginPath(), e.arc(o.pixelX, o.pixelY, 3, 0, Math.PI * 2), e.fillStyle = "#4ade80", e.fill(), this.drawPointLabel(e, o.pixelX, o.pixelY - i.highlightSize - 8, "P2", "#4ade80");
-    }
-    if (this.state.point1 && this.state.point2 && this.state.lastMeasurement) {
-      const o = this.state.point1, l = this.state.point2, h = this.state.lastMeasurement, a = this.ctx.getPlotArea(), r = this.ctx.getViewBounds(), f = (this.ctx.getSeries ? this.ctx.getSeries() : []).find((S) => S.id === o.seriesId);
-      if (f) {
-        const S = f.x, T = f.y, v = Math.min(o.index, l.index), Y = Math.max(o.index, l.index), w = this.ctx.getYBounds ? this.ctx.getYBounds(f.yAxisId) : { yMin: r.yMin, yMax: r.yMax };
-        e.beginPath(), e.moveTo(o.pixelX, o.pixelY);
-        for (let C = v; C <= Y; C++) {
-          const m = a.x + (S[C] - r.xMin) / (r.xMax - r.xMin) * a.width, I = a.y + (1 - (T[C] - w.yMin) / (w.yMax - w.yMin)) * a.height;
-          e.lineTo(m, I);
-        }
-        e.lineTo(l.pixelX, l.pixelY), e.closePath(), e.fillStyle = i.areaFill, e.fill();
-      }
-      e.beginPath(), e.moveTo(o.pixelX, o.pixelY), e.lineTo(l.pixelX, l.pixelY), e.strokeStyle = i.lineColor, e.lineWidth = 1, e.stroke();
-      const p = this.ctx.getYBounds ? this.ctx.getYBounds(o.yAxisId) : { yMin: r.yMin, yMax: r.yMax }, g = a.x + (h.peakX - r.xMin) / (r.xMax - r.xMin) * a.width, y = a.y + (1 - (h.peakY - p.yMin) / (p.yMax - p.yMin)) * a.height, b = h.baselineSlope * h.peakX + h.baselineIntercept, x = a.y + (1 - (b - p.yMin) / (p.yMax - p.yMin)) * a.height;
-      e.beginPath(), e.moveTo(g, y), e.lineTo(g, x), e.strokeStyle = i.lineColor, e.setLineDash([2, 2]), e.stroke(), e.setLineDash([]), i.showLabels && this.drawMeasurementLabel(e, o, l, h);
-    }
-    this.drawStatusIndicator(e);
+}
+class wt {
+  constructor(t, i) {
+    u(this, "ctx");
+    u(this, "theme");
+    this.ctx = t, this.theme = i;
   }
-  drawPointTooltip(t, i, e) {
-    const n = this.options, s = `${e}: (${this.formatValue(i.x)}, ${this.formatValue(i.y)})`;
-    t.font = `${n.labelFontSize}px system-ui, sans-serif`;
-    const o = t.measureText(s), l = 6, h = o.width + l * 2, a = n.labelFontSize + l * 2;
-    let r = i.pixelX + 15, d = i.pixelY - a / 2;
-    const f = this.ctx.container.getBoundingClientRect();
-    r + h > f.width && (r = i.pixelX - h - 15), d < 0 && (d = 5), d + a > f.height && (d = f.height - a - 5), t.fillStyle = n.labelBackground, this.roundRect(t, r, d, h, a, 4), t.fill(), t.fillStyle = n.labelColor, t.textAlign = "left", t.textBaseline = "middle", t.fillText(s, r + l, d + a / 2);
+  /**
+   * Update the theme
+   */
+  setTheme(t) {
+    this.theme = t;
   }
-  drawPointLabel(t, i, e, n, s) {
-    const o = this.options;
-    t.font = `bold ${o.labelFontSize}px system-ui, sans-serif`, t.textAlign = "center", t.textBaseline = "bottom";
-    const l = t.measureText(n), h = 4, a = l.width + h * 2, r = o.labelFontSize + h;
-    t.fillStyle = s, this.roundRect(t, i - a / 2, e - r, a, r, 3), t.fill(), t.fillStyle = "#ffffff", t.fillText(n, i, e - 2);
+  /**
+   * Render a tooltip with the given template
+   */
+  render(t, i, e) {
+    const n = e.measure(this.ctx, t, this.theme), s = n.width + n.padding.left + n.padding.right, o = n.height + n.padding.top + n.padding.bottom;
+    this.ctx.save(), this.drawBackground(i.x, i.y, s, o, i.arrowPosition || "none"), i.arrowPosition && i.arrowPosition !== "none" && this.drawArrow(
+      i.x,
+      i.y,
+      s,
+      o,
+      i.arrowPosition,
+      i.arrowOffset || 0
+    ), e.render(this.ctx, t, i, n, this.theme), this.ctx.restore();
   }
-  drawMeasurementLabel(t, i, e, n) {
-    const s = this.options, o = (i.pixelX + e.pixelX) / 2, l = (i.pixelY + e.pixelY) / 2, h = [];
-    s.showPeak && (h.push(`Peak Area: ${this.formatValue(n.area)}`), h.push(`Peak Height: ${this.formatValue(n.peakHeight)}`), h.push(`Integral: ${this.formatValue(n.integral)}`));
-    const a = s.labelFontSize + 4, r = 10, d = 170, f = h.length * a + r * 2;
-    let p = o + this.labelOffset.x, g = l + this.labelOffset.y;
-    const y = this.ctx.container.getBoundingClientRect();
-    p < 0 && (p = 0), p + d > y.width && (p = y.width - d), g < 0 && (g = 0), g + f > y.height && (g = y.height - f), this.labelBounds = { x: p, y: g, width: d, height: f }, t.fillStyle = s.labelBackground, t.strokeStyle = s.lineColor, t.lineWidth = 2, this.roundRect(t, p, g, d, f, 8), t.fill(), t.stroke(), t.fillStyle = s.labelColor, t.font = `${s.labelFontSize}px system-ui, sans-serif`, t.textAlign = "left", t.textBaseline = "top", h.forEach((b, x) => {
-      t.fillText(b, p + r, g + r + x * a);
-    });
+  /**
+   * Draw tooltip background with all effects
+   */
+  drawBackground(t, i, e, n, s) {
+    const { ctx: o, theme: l } = this, h = l.borderRadius;
+    if (o.save(), l.shadow.blur > 0 && (o.shadowColor = l.shadow.color, o.shadowOffsetX = l.shadow.offsetX, o.shadowOffsetY = l.shadow.offsetY, o.shadowBlur = l.shadow.blur), o.beginPath(), this.roundRect(t, i, e, n, h), l.backgroundGradient) {
+      const a = o.createLinearGradient(t, i, t, i + n);
+      a.addColorStop(0, l.backgroundColor), a.addColorStop(1, l.backgroundGradient), o.fillStyle = a;
+    } else
+      o.fillStyle = l.backgroundColor;
+    o.fill(), o.shadowColor = "transparent", l.borderWidth > 0 && (o.strokeStyle = l.borderColor, o.lineWidth = l.borderWidth, o.stroke()), o.restore();
   }
-  drawStatusIndicator(t) {
-    const i = this.options, e = this.ctx.getPlotArea();
-    let n = "", s = "#666";
-    if (this.state.selectionState === "idle" ? (n = "📏 Click a point to start measuring", s = i.highlightColor) : this.state.selectionState === "waitingSecond" ? (n = "📏 Click second point to complete", s = "#f59e0b") : this.state.selectionState === "complete" && (n = "📏 Measurement complete (ESC to clear)", s = "#4ade80"), !n) return;
-    t.font = "12px system-ui, sans-serif";
-    const h = t.measureText(n).width + 8 * 2, a = 24, r = e.x + 10, d = e.y + 10;
-    t.fillStyle = "rgba(0, 0, 0, 0.75)", this.roundRect(t, r, d, h, a, 4), t.fill(), t.beginPath(), t.arc(r + 16, d + a / 2, 4, 0, Math.PI * 2), t.fillStyle = s, t.fill(), t.fillStyle = "#fff", t.textAlign = "left", t.textBaseline = "middle", t.fillText(n, r + 26, d + a / 2);
+  /**
+   * Draw arrow pointing to target
+   */
+  drawArrow(t, i, e, n, s, o) {
+    const { ctx: l, theme: h } = this, a = h.arrowSize;
+    if (!(a <= 0 || s === "none")) {
+      switch (l.save(), l.fillStyle = h.backgroundColor, l.strokeStyle = h.borderColor, l.lineWidth = h.borderWidth, l.beginPath(), s) {
+        case "top":
+          const r = t + o;
+          l.moveTo(r - a, i), l.lineTo(r, i - a), l.lineTo(r + a, i);
+          break;
+        case "bottom":
+          const d = t + o, f = i + n;
+          l.moveTo(d - a, f), l.lineTo(d, f + a), l.lineTo(d + a, f);
+          break;
+        case "left":
+          const p = i + o;
+          l.moveTo(t, p - a), l.lineTo(t - a, p), l.lineTo(t, p + a);
+          break;
+        case "right":
+          const g = t + e, y = i + o;
+          l.moveTo(g, y - a), l.lineTo(g + a, y), l.lineTo(g, y + a);
+          break;
+      }
+      l.closePath(), l.fill(), h.borderWidth > 0 && l.stroke(), l.restore();
+    }
   }
-  roundRect(t, i, e, n, s, o) {
-    t.beginPath(), t.moveTo(i + o, e), t.lineTo(i + n - o, e), t.quadraticCurveTo(i + n, e, i + n, e + o), t.lineTo(i + n, e + s - o), t.quadraticCurveTo(i + n, e + s, i + n - o, e + s), t.lineTo(i + o, e + s), t.quadraticCurveTo(i, e + s, i, e + s - o), t.lineTo(i, e + o), t.quadraticCurveTo(i, e, i + o, e), t.closePath();
+  /**
+   * Draw a rounded rectangle path
+   */
+  roundRect(t, i, e, n, s) {
+    const { ctx: o } = this, l = Math.min(s, e / 2, n / 2);
+    o.moveTo(t + l, i), o.lineTo(t + e - l, i), o.arcTo(t + e, i, t + e, i + l, l), o.lineTo(t + e, i + n - l), o.arcTo(t + e, i + n, t + e - l, i + n, l), o.lineTo(t + l, i + n), o.arcTo(t, i + n, t, i + n - l, l), o.lineTo(t, i + l), o.arcTo(t, i, t + l, i, l), o.closePath();
+  }
+  /**
+   * Draw a horizontal separator line
+   */
+  drawSeparator(t, i, e) {
+    const { ctx: n, theme: s } = this;
+    s.showHeaderSeparator && (n.save(), n.strokeStyle = s.separatorColor, n.lineWidth = 1, n.beginPath(), n.moveTo(t, i), n.lineTo(t + e, i), n.stroke(), n.restore());
+  }
+  /**
+   * Draw a series color indicator (small circle or square)
+   */
+  drawSeriesIndicator(t, i, e) {
+    const { ctx: n, theme: s } = this;
+    if (!s.showSeriesIndicator) return;
+    const l = s.seriesIndicatorSize / 2;
+    n.save(), n.fillStyle = e, n.beginPath(), n.arc(t + l, i, l, 0, Math.PI * 2), n.fill(), n.restore();
   }
-  formatValue(t) {
-    const i = Math.abs(t);
-    return i === 0 ? "0" : i >= 1e6 || i < 1e-3 ? t.toExponential(this.options.precision - 1) : t.toPrecision(this.options.precision);
+  /**
+   * Measure text width
+   */
+  measureText(t, i, e = 400) {
+    const { ctx: n, theme: s } = this;
+    return n.font = `${e} ${i}px ${s.fontFamily}`, n.measureText(t).width;
+  }
+  /**
+   * Draw text with theme styling
+   */
+  drawText(t, i, e, n = {}) {
+    const { ctx: s, theme: o } = this, {
+      fontSize: l = o.contentFontSize,
+      fontWeight: h = 400,
+      color: a = o.textColor,
+      align: r = "left",
+      baseline: d = "top"
+    } = n;
+    s.save(), s.font = `${h} ${l}px ${o.fontFamily}`, s.fillStyle = a, s.textAlign = r, s.textBaseline = d, s.fillText(t, i, e), s.restore();
+  }
+  /**
+   * Draw a label-value pair
+   */
+  drawLabelValue(t, i, e, n, s) {
+    const { theme: o } = this;
+    this.drawText(e, t, i, {
+      color: o.textSecondaryColor,
+      fontSize: o.contentFontSize
+    }), this.drawText(n, t + s, i, {
+      color: o.textColor,
+      fontSize: o.contentFontSize,
+      align: "right"
+    });
+  }
+  /**
+   * Get theme for external use
+   */
+  getTheme() {
+    return this.theme;
   }
 }
-const V = {
-  top: 10,
-  right: 12,
-  bottom: 10,
-  left: 12
-}, L = {
-  // Container
-  backgroundColor: "rgba(15, 18, 25, 0.95)",
-  backgroundGradient: "rgba(25, 30, 40, 0.90)",
-  borderColor: "rgba(255, 255, 255, 0.12)",
-  borderWidth: 1,
-  borderRadius: 8,
-  backdropBlur: 12,
-  shadow: {
-    color: "rgba(0, 0, 0, 0.4)",
-    offsetX: 0,
-    offsetY: 4,
-    blur: 16
-  },
-  // Typography
-  fontFamily: "Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif",
-  textColor: "#ffffff",
-  textSecondaryColor: "rgba(255, 255, 255, 0.6)",
-  titleFontSize: 12,
-  titleFontWeight: 600,
-  contentFontSize: 11,
-  lineHeight: 1.4,
-  // Spacing
-  padding: V,
-  itemGap: 4,
-  headerGap: 8,
-  // Decorations
-  showSeriesIndicator: !0,
-  seriesIndicatorSize: 8,
-  showHeaderSeparator: !0,
-  separatorColor: "rgba(255, 255, 255, 0.1)",
-  showArrow: !0,
-  arrowSize: 6
-}, et = {
-  // Container
-  backgroundColor: "rgba(255, 255, 255, 0.98)",
-  borderColor: "rgba(0, 0, 0, 0.12)",
-  borderWidth: 1,
-  borderRadius: 8,
-  backdropBlur: 8,
-  shadow: {
-    color: "rgba(0, 0, 0, 0.12)",
-    offsetX: 0,
-    offsetY: 4,
-    blur: 12
-  },
-  // Typography
-  fontFamily: "Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif",
-  textColor: "#1a1a1a",
-  textSecondaryColor: "rgba(0, 0, 0, 0.55)",
-  titleFontSize: 12,
-  titleFontWeight: 600,
-  contentFontSize: 11,
-  lineHeight: 1.4,
-  // Spacing
-  padding: V,
-  itemGap: 4,
-  headerGap: 8,
-  // Decorations
-  showSeriesIndicator: !0,
-  seriesIndicatorSize: 8,
-  showHeaderSeparator: !0,
-  separatorColor: "rgba(0, 0, 0, 0.08)",
-  showArrow: !0,
-  arrowSize: 6
-}, gt = {
-  // Container
-  backgroundColor: "rgba(255, 255, 255, 0.08)",
-  backgroundGradient: "rgba(255, 255, 255, 0.04)",
-  borderColor: "rgba(255, 255, 255, 0.2)",
-  borderWidth: 1,
-  borderRadius: 12,
-  backdropBlur: 20,
-  shadow: {
-    color: "rgba(0, 0, 0, 0.3)",
-    offsetX: 0,
-    offsetY: 8,
-    blur: 32
-  },
-  // Typography
-  fontFamily: "Inter, system-ui, sans-serif",
-  textColor: "rgba(255, 255, 255, 0.95)",
-  textSecondaryColor: "rgba(255, 255, 255, 0.6)",
-  titleFontSize: 12,
-  titleFontWeight: 600,
-  contentFontSize: 11,
-  lineHeight: 1.5,
-  // Spacing
-  padding: { top: 12, right: 14, bottom: 12, left: 14 },
-  itemGap: 5,
-  headerGap: 10,
-  // Decorations
-  showSeriesIndicator: !0,
-  seriesIndicatorSize: 8,
-  showHeaderSeparator: !0,
-  separatorColor: "rgba(255, 255, 255, 0.15)",
-  showArrow: !0,
-  arrowSize: 7
-}, it = {
-  // Container
-  backgroundColor: "rgba(10, 15, 30, 0.95)",
-  backgroundGradient: "rgba(20, 25, 50, 0.90)",
-  borderColor: "rgba(100, 120, 255, 0.25)",
-  borderWidth: 1,
-  borderRadius: 8,
-  backdropBlur: 15,
-  shadow: {
-    color: "rgba(50, 70, 150, 0.25)",
-    offsetX: 0,
-    offsetY: 4,
-    blur: 20
-  },
-  // Typography
-  fontFamily: "Inter, system-ui, sans-serif",
-  textColor: "#e0e8ff",
-  textSecondaryColor: "rgba(180, 190, 255, 0.6)",
-  titleFontSize: 12,
-  titleFontWeight: 600,
-  contentFontSize: 11,
-  lineHeight: 1.4,
-  // Spacing
-  padding: V,
-  itemGap: 4,
-  headerGap: 8,
-  // Decorations
-  showSeriesIndicator: !0,
-  seriesIndicatorSize: 8,
-  showHeaderSeparator: !0,
-  separatorColor: "rgba(100, 120, 255, 0.15)",
-  showArrow: !0,
-  arrowSize: 6
-}, st = {
-  // Container
-  backgroundColor: "rgba(8, 20, 40, 0.96)",
-  backgroundGradient: "rgba(15, 35, 60, 0.92)",
-  borderColor: "rgba(30, 136, 229, 0.35)",
-  borderWidth: 1,
-  borderRadius: 6,
-  backdropBlur: 10,
-  shadow: {
-    color: "rgba(30, 136, 229, 0.2)",
-    offsetX: 0,
-    offsetY: 4,
-    blur: 16
-  },
-  // Typography
-  fontFamily: '"JetBrains Mono", "Fira Code", monospace',
-  textColor: "#bbdefb",
-  textSecondaryColor: "rgba(144, 202, 249, 0.7)",
-  titleFontSize: 11,
-  titleFontWeight: 600,
-  contentFontSize: 11,
-  lineHeight: 1.5,
-  // Spacing
-  padding: { top: 8, right: 10, bottom: 8, left: 10 },
-  itemGap: 3,
-  headerGap: 6,
-  // Decorations
-  showSeriesIndicator: !0,
-  seriesIndicatorSize: 6,
-  showHeaderSeparator: !0,
-  separatorColor: "rgba(30, 136, 229, 0.2)",
-  showArrow: !0,
-  arrowSize: 5
-}, yt = {
-  // Container
-  backgroundColor: "rgba(0, 0, 0, 0.92)",
-  borderColor: "#00ffff",
-  borderWidth: 1,
-  borderRadius: 4,
-  backdropBlur: 0,
-  shadow: {
-    color: "rgba(0, 255, 255, 0.35)",
-    offsetX: 0,
-    offsetY: 0,
-    blur: 20
-  },
-  // Typography
-  fontFamily: '"Orbitron", "Exo 2", sans-serif',
-  textColor: "#00ffff",
-  textSecondaryColor: "rgba(0, 255, 255, 0.6)",
-  titleFontSize: 11,
-  titleFontWeight: 700,
-  contentFontSize: 10,
-  lineHeight: 1.4,
-  // Spacing
-  padding: { top: 8, right: 12, bottom: 8, left: 12 },
-  itemGap: 4,
-  headerGap: 6,
-  // Decorations
-  showSeriesIndicator: !0,
-  seriesIndicatorSize: 6,
-  showHeaderSeparator: !0,
-  separatorColor: "rgba(0, 255, 255, 0.3)",
-  showArrow: !1,
-  arrowSize: 0
-}, xt = {
-  // Container
-  backgroundColor: "rgba(30, 35, 45, 0.9)",
-  borderColor: "transparent",
-  borderWidth: 0,
-  borderRadius: 4,
-  backdropBlur: 8,
-  shadow: {
-    color: "rgba(0, 0, 0, 0.3)",
-    offsetX: 0,
-    offsetY: 2,
-    blur: 8
-  },
-  // Typography
-  fontFamily: "Inter, system-ui, sans-serif",
-  textColor: "#ffffff",
-  textSecondaryColor: "rgba(255, 255, 255, 0.7)",
-  titleFontSize: 10,
-  titleFontWeight: 500,
-  contentFontSize: 10,
-  lineHeight: 1.3,
-  // Spacing
-  padding: { top: 6, right: 8, bottom: 6, left: 8 },
-  itemGap: 2,
-  headerGap: 4,
-  // Decorations
-  showSeriesIndicator: !1,
-  seriesIndicatorSize: 0,
-  showHeaderSeparator: !1,
-  separatorColor: "transparent",
-  showArrow: !1,
-  arrowSize: 0
-}, bt = {
-  dark: L,
-  light: et,
-  glass: gt,
-  midnight: it,
-  electrochemistry: st,
-  neon: yt,
-  minimal: xt
-};
-function St(c) {
-  const t = bt[c];
-  return t || (console.warn(`[Tooltip] Unknown theme "${c}", using dark`), L);
-}
-function mt(c, t) {
-  const i = typeof c == "string" ? St(c) : c;
-  return {
-    ...i,
-    ...t,
-    padding: { ...i.padding, ...t.padding },
-    shadow: { ...i.shadow, ...t.shadow }
-  };
+function ot(c) {
+  return c.axisFormat ? O(c.dataX, c.axisFormat) : W(c.dataX);
 }
-function B(c) {
-  switch (c.toLowerCase()) {
-    case "light":
-      return et;
-    case "midnight":
-      return it;
-    case "electrochemistry":
-    case "electrochem":
-      return st;
-    case "dark":
-    default:
-      return L;
+function nt(c) {
+  return c.axisFormat ? N(c.dataY, c.axisFormat) : W(c.dataY);
+}
+function Mt(c) {
+  return c.axisFormat ? O(c.dataX, c.axisFormat) : W(c.dataX);
+}
+function vt(c, t) {
+  return t.axisFormat ? N(c, t.axisFormat) : W(c);
+}
+function W(c) {
+  if (c == null || isNaN(c)) return "N/A";
+  const t = Math.abs(c);
+  return t === 0 ? "0" : t < 1e-4 || t >= 1e4 ? c.toExponential(2) : t < 0.01 ? c.toPrecision(4) : t < 1 ? c.toFixed(4) : t < 100 ? c.toFixed(3) : c.toFixed(1);
+}
+function k(c, t) {
+  const i = t === "x" ? c.dataX : c.dataY;
+  if (c.axisFormat)
+    return t === "x" ? O(i, c.axisFormat) : N(i, c.axisFormat);
+  if (i == null || isNaN(i)) return "N/A";
+  const e = Math.abs(i);
+  return e === 0 ? "0" : e >= 1e9 ? (i / 1e9).toFixed(1) + "G" : e >= 1e6 ? (i / 1e6).toFixed(1) + "M" : e >= 1e3 ? (i / 1e3).toFixed(1) + "k" : e >= 1 ? i.toFixed(2) : e >= 1e-3 ? (i * 1e3).toFixed(1) + "m" : e >= 1e-6 ? (i * 1e6).toFixed(1) + "µ" : e >= 1e-9 ? (i * 1e9).toFixed(1) + "n" : i.toExponential(1);
+}
+function z(c, t, i) {
+  if (t && i === "x") return ot(t);
+  if (t && i === "y") return nt(t);
+  if (c == null || isNaN(c)) return "N/A";
+  const e = Math.abs(c);
+  return e !== 0 && (e < 1e-4 || e >= 1e4) ? c.toExponential(2) : e < 0.01 ? c.toPrecision(4) : e < 1 ? c.toFixed(4) : e < 100 ? c.toFixed(3) : c.toFixed(1);
+}
+class Ct {
+  constructor() {
+    u(this, "id", "default");
+    u(this, "name", "Default Data Point");
+    u(this, "supportedTypes", ["datapoint"]);
+    // Cached measurements
+    u(this, "cachedKey", "");
+    u(this, "cachedMeasurement", null);
+  }
+  /**
+   * Measure tooltip dimensions
+   */
+  measure(t, i, e) {
+    const n = `${i.seriesId}-${i.dataIndex}-${i.dataX}-${i.dataY}`;
+    if (n === this.cachedKey && this.cachedMeasurement)
+      return this.cachedMeasurement;
+    t.font = `${e.titleFontWeight} ${e.titleFontSize}px ${e.fontFamily}`;
+    const s = t.measureText(i.seriesName).width;
+    t.font = `400 ${e.contentFontSize}px ${e.fontFamily}`;
+    const o = 35, l = t.measureText(z(i.dataX, i, "x")).width, h = t.measureText(z(i.dataY, i, "y")).width;
+    let a = o + Math.max(l, h), r = e.contentFontSize * e.lineHeight * 2;
+    if (i.yError) {
+      const g = `± ${z(i.yError[0])} / ${z(i.yError[1])}`;
+      a = Math.max(a, t.measureText(g).width), r += e.contentFontSize * e.lineHeight;
+    }
+    if (i.cycle !== void 0) {
+      const g = `Cycle: ${i.cycle}`;
+      a = Math.max(a, t.measureText(g).width), r += e.contentFontSize * e.lineHeight;
+    }
+    const d = e.showSeriesIndicator ? e.seriesIndicatorSize + 6 : 0, f = Math.max(s + d, a), p = e.titleFontSize * e.lineHeight + e.headerGap + r;
+    return this.cachedMeasurement = {
+      width: f + 2,
+      // Tiny buffer
+      height: p + 4,
+      padding: e.padding,
+      arrow: e.showArrow ? { width: e.arrowSize * 2, height: e.arrowSize } : void 0
+    }, this.cachedKey = n, this.cachedMeasurement;
+  }
+  /**
+   * Render the tooltip
+   */
+  render(t, i, e, n, s) {
+    const { x: o, y: l } = e, { padding: h } = s;
+    let a = o + h.left, r = l + h.top;
+    if (t.save(), t.textAlign = "left", t.textBaseline = "top", s.showSeriesIndicator) {
+      const f = r + s.titleFontSize / 2;
+      t.save(), t.fillStyle = i.seriesColor, t.beginPath(), t.arc(a + s.seriesIndicatorSize / 2, f, s.seriesIndicatorSize / 2, 0, Math.PI * 2), t.fill(), t.restore(), a += s.seriesIndicatorSize + 6;
+    }
+    if (t.font = `${s.titleFontWeight} ${s.titleFontSize}px ${s.fontFamily}`, t.fillStyle = s.textColor, t.fillText(i.seriesName, a, r), r += s.titleFontSize * s.lineHeight + 2, s.showHeaderSeparator) {
+      const f = n.width;
+      t.save(), t.strokeStyle = s.separatorColor, t.lineWidth = 1, t.globalAlpha = 0.4, t.beginPath(), t.moveTo(o + h.left, r + s.headerGap / 2), t.lineTo(o + h.left + f, r + s.headerGap / 2), t.stroke(), t.restore();
+    }
+    r += s.headerGap + 2, a = o + h.left, t.font = `400 ${s.contentFontSize}px ${s.fontFamily}`, t.fillStyle = s.textSecondaryColor, t.fillText("X:", a, r), t.fillStyle = s.textColor;
+    const d = 35;
+    if (t.fillText(z(i.dataX, i, "x"), a + d, r), r += s.contentFontSize * s.lineHeight + 2, t.fillStyle = s.textSecondaryColor, t.fillText("Y:", a, r), t.fillStyle = s.textColor, t.fillText(z(i.dataY, i, "y"), a + d, r), r += s.contentFontSize * s.lineHeight + 2, i.yError) {
+      t.fillStyle = s.textSecondaryColor;
+      const f = `± ${z(i.yError[0])} / +${z(i.yError[1])}`;
+      t.fillText(f, a, r), r += s.contentFontSize * s.lineHeight;
+    }
+    i.cycle !== void 0 && (t.fillStyle = s.textSecondaryColor, t.fillText("Cycle:", a, r), t.fillStyle = s.textColor, t.fillText(String(i.cycle), a + 45, r)), t.restore();
   }
 }
-const Tt = L, wt = {
-  offset: { x: 12, y: 12 },
-  preferredPosition: "auto",
-  constrainToPlotArea: !0,
-  constrainToContainer: !0,
-  autoFlip: !0,
-  showArrow: !0,
-  arrowSize: 6
+const H = new Ct();
+class Pt {
+  constructor() {
+    u(this, "id", "minimal");
+    u(this, "name", "Minimal");
+    u(this, "supportedTypes", ["datapoint"]);
+    // Cached measurements
+    u(this, "cachedKey", "");
+    u(this, "cachedMeasurement", null);
+  }
+  /**
+   * Measure tooltip dimensions
+   */
+  measure(t, i, e) {
+    const n = `${i.seriesId}-${i.dataIndex}-${i.dataX}-${i.dataY}-${e.fontFamily}`;
+    if (n === this.cachedKey && this.cachedMeasurement)
+      return this.cachedMeasurement;
+    t.font = `${e.contentFontSize}px ${e.fontFamily}`;
+    const s = `${k(i, "x")} ▪ ${k(i, "y")}`, o = t.measureText(s).width;
+    return this.cachedMeasurement = {
+      width: o,
+      height: e.contentFontSize * e.lineHeight,
+      padding: {
+        top: 6,
+        right: 8,
+        bottom: 6,
+        left: 8
+      }
+    }, this.cachedKey = n, this.cachedMeasurement;
+  }
+  /**
+   * Render the tooltip
+   */
+  render(t, i, e, n, s) {
+    const { padding: o } = n, l = e.x + o.left, h = e.y + o.top, a = k(i, "x"), r = k(i, "y");
+    t.save(), t.font = `${s.contentFontSize}px ${s.fontFamily}`, t.textAlign = "left", t.textBaseline = "top", t.fillStyle = s.textSecondaryColor, t.fillText(a, l, h);
+    const d = t.measureText(a).width;
+    t.fillStyle = i.seriesColor, t.fillText(" ▪ ", l + d, h);
+    const f = t.measureText(" ▪ ").width;
+    t.fillStyle = s.textColor, t.fillText(r, l + d + f, h), t.restore();
+  }
+}
+const at = new Pt(), F = {
+  INDICATOR_MARGIN: 8,
+  MIN_LABEL_WIDTH: 60,
+  LINE_SPACING: 2,
+  SAFETY_BUFFER: 4,
+  HEADER_SPACING: 2,
+  GAP_SPACING: 2
 };
-class Mt {
-  constructor(t = {}) {
-    u(this, "config");
-    u(this, "containerWidth", 0);
-    u(this, "containerHeight", 0);
-    u(this, "plotArea", null);
-    this.config = { ...wt, ...t };
+class Ft {
+  constructor() {
+    u(this, "id", "crosshair");
+    u(this, "name", "Multi-Series Crosshair");
+    u(this, "supportedTypes", ["crosshair"]);
+    // Cached measurements
+    u(this, "cachedKey", "");
+    u(this, "cachedMeasurement", null);
+    u(this, "formattedData", null);
   }
   /**
-   * Update container dimensions
+   * Generate cache key from data and theme
    */
-  setContainerSize(t, i) {
-    this.containerWidth = t, this.containerHeight = i;
+  getCacheKey(t, i) {
+    const e = t.interpolatedValues.map((n) => `${n.seriesName}-${n.y}`).join("|");
+    return [
+      t.dataX,
+      e,
+      i.fontFamily,
+      i.titleFontSize,
+      i.contentFontSize,
+      i.showSeriesIndicator,
+      i.seriesIndicatorSize,
+      `${i.padding.top}-${i.padding.right}-${i.padding.bottom}-${i.padding.left}`
+    ].join(":");
+  }
+  /**
+   * Format data for rendering
+   */
+  formatData(t) {
+    return {
+      header: `⌖ X = ${Mt(t)}`,
+      series: t.interpolatedValues.map((i) => ({
+        name: i.seriesName,
+        value: vt(i.y, t),
+        color: i.seriesColor,
+        isInterpolated: i.isInterpolated
+      }))
+    };
+  }
+  /**
+   * Measure tooltip dimensions
+   */
+  measure(t, i, e) {
+    if (!i.interpolatedValues || i.interpolatedValues.length === 0)
+      return {
+        width: 100,
+        height: e.titleFontSize * e.lineHeight,
+        padding: e.padding
+      };
+    const n = this.getCacheKey(i, e);
+    if (n === this.cachedKey && this.cachedMeasurement)
+      return this.cachedMeasurement;
+    this.formattedData = this.formatData(i), t.font = `${e.titleFontWeight} ${e.titleFontSize}px ${e.fontFamily}`;
+    let s = t.measureText(this.formattedData.header).width;
+    t.font = `400 ${e.contentFontSize}px ${e.fontFamily}`;
+    const o = e.showSeriesIndicator ? e.seriesIndicatorSize + F.INDICATOR_MARGIN : 0;
+    for (const r of this.formattedData.series) {
+      const d = t.measureText(`${r.name}:`).width, f = t.measureText(r.value).width, p = o + Math.max(d, F.MIN_LABEL_WIDTH) + f;
+      s = Math.max(s, p);
+    }
+    const l = e.titleFontSize * e.lineHeight, a = this.formattedData.series.length * (e.contentFontSize * e.lineHeight + F.LINE_SPACING);
+    return this.cachedMeasurement = {
+      width: s + F.SAFETY_BUFFER,
+      height: l + e.headerGap + a,
+      padding: e.padding
+    }, this.cachedKey = n, this.cachedMeasurement;
   }
   /**
-   * Update plot area bounds
+   * Render the tooltip
    */
-  setPlotArea(t) {
-    this.plotArea = t;
+  render(t, i, e, n, s) {
+    if (!i.interpolatedValues || i.interpolatedValues.length === 0)
+      return;
+    const o = this.formattedData || this.formatData(i), { x: l, y: h } = e, { padding: a } = s;
+    let r = h + a.top;
+    const d = l + a.left;
+    t.save(), t.textAlign = "left", t.textBaseline = "top", t.font = `${s.titleFontWeight} ${s.titleFontSize}px ${s.fontFamily}`, t.fillStyle = s.textColor, t.fillText(o.header, d, r), r += s.titleFontSize * s.lineHeight + F.HEADER_SPACING, s.showHeaderSeparator && (t.strokeStyle = s.separatorColor, t.lineWidth = 1, t.globalAlpha = 0.4, t.beginPath(), t.moveTo(d, r + s.headerGap / 2), t.lineTo(d + n.width, r + s.headerGap / 2), t.stroke(), t.globalAlpha = 1), r += s.headerGap + F.GAP_SPACING, t.font = `400 ${s.contentFontSize}px ${s.fontFamily}`;
+    for (const f of o.series) {
+      let p = d;
+      if (s.showSeriesIndicator && s.seriesIndicatorSize > 0) {
+        const b = r + s.contentFontSize / 2, x = s.seriesIndicatorSize / 2;
+        t.save(), t.beginPath(), t.arc(p + x, b, x, 0, Math.PI * 2), f.isInterpolated ? (t.strokeStyle = f.color, t.lineWidth = 1.5, t.stroke()) : (t.fillStyle = f.color, t.fill()), t.restore(), p += s.seriesIndicatorSize + F.INDICATOR_MARGIN;
+      }
+      t.fillStyle = s.textSecondaryColor, t.fillText(`${f.name}:`, p, r);
+      const g = t.measureText(`${f.name}: `).width, y = Math.max(g, F.MIN_LABEL_WIDTH);
+      t.fillStyle = s.textColor, t.fillText(f.value, p + y, r), r += s.contentFontSize * s.lineHeight + F.LINE_SPACING;
+    }
+    t.restore();
+  }
+}
+const G = new Ft();
+function P(c) {
+  if (c == null || isNaN(c))
+    return "N/A";
+  const t = Math.abs(c);
+  return t === 0 ? "0" : t < 1e-4 || t >= 1e4 ? c.toExponential(3) : t < 0.01 ? c.toPrecision(4) : t < 1 ? c.toFixed(4) : t < 100 ? c.toFixed(3) : c.toFixed(2);
+}
+class It {
+  constructor() {
+    u(this, "id", "heatmap");
+    u(this, "name", "Heatmap Value");
+    u(this, "supportedTypes", ["heatmap"]);
+    // Color swatch dimensions
+    u(this, "swatchSize", 14);
+    u(this, "swatchGap", 8);
+    // Cached measurements
+    u(this, "cachedKey", "");
+    u(this, "cachedMeasurement", null);
   }
   /**
-   * Update configuration
+   * Measure tooltip dimensions
    */
-  configure(t) {
-    this.config = { ...this.config, ...t };
+  measure(t, i, e) {
+    const n = `${i.seriesId}-${i.xIndex}-${i.yIndex}-${e.fontFamily}-${e.titleFontSize}`;
+    if (n === this.cachedKey && this.cachedMeasurement)
+      return this.cachedMeasurement;
+    t.font = `${e.titleFontWeight} ${e.titleFontSize}px ${e.fontFamily}`;
+    const s = `Grid [${i.xIndex}, ${i.yIndex}]`;
+    let o = t.measureText(s).width;
+    t.font = `400 ${e.contentFontSize}px ${e.fontFamily}`;
+    const l = `Value: ${P(i.zValue)}`, h = this.swatchSize + this.swatchGap + t.measureText(l).width;
+    if (o = Math.max(o, h), i.colorScale) {
+      const y = `Min: ${P(i.colorScale.min)}  Max: ${P(i.colorScale.max)}`;
+      o = Math.max(o, this.swatchSize + this.swatchGap + t.measureText(y).width);
+    }
+    const a = 25, r = a + t.measureText(P(i.dataX)).width, d = a + t.measureText(P(i.dataY)).width;
+    o = Math.max(o, r, d);
+    const f = e.titleFontSize * e.lineHeight, g = (i.colorScale ? 4 : 3) * e.contentFontSize * e.lineHeight;
+    return this.cachedMeasurement = {
+      width: o + 4,
+      // Small buffer
+      height: f + e.headerGap + g + e.itemGap,
+      padding: e.padding
+    }, this.cachedKey = n, this.cachedMeasurement;
   }
   /**
-   * Calculate optimal tooltip position
-   * 
-   * @param targetX - Target X coordinate (where tooltip points to)
-   * @param targetY - Target Y coordinate
-   * @param measurement - Tooltip dimensions
-   * @returns Calculated position with arrow configuration
+   * Render the tooltip
    */
-  calculatePosition(t, i, e) {
-    const { offset: n, preferredPosition: s, autoFlip: o, showArrow: l, arrowSize: h } = this.config, a = e.width + e.padding.left + e.padding.right, r = e.height + e.padding.top + e.padding.bottom;
-    let d = this.determinePosition(
-      t,
-      i,
-      a,
-      r,
-      s
-    ), { x: f, y: p, arrowPosition: g } = this.calculateCoordinates(
-      t,
-      i,
-      a,
-      r,
-      d,
-      n,
-      l ? h : 0
-    ), y = !1;
-    if (o && !this.fitsInBounds(f, p, a, r)) {
-      const S = this.flipPosition(d), T = this.calculateCoordinates(
-        t,
-        i,
-        a,
-        r,
-        S,
-        n,
-        l ? h : 0
-      );
-      this.fitsInBounds(T.x, T.y, a, r) && (f = T.x, p = T.y, g = T.arrowPosition, y = !0);
-    }
-    const b = this.constrainToBounds(f, p, a, r);
-    let x = 0;
-    if (l) {
-      if (g === "top" || g === "bottom") {
-        const S = t - b.x;
-        x = Math.max(h + 4, Math.min(a - h - 4, S));
-      } else if (g === "left" || g === "right") {
-        const S = i - b.y;
-        x = Math.max(h + 4, Math.min(r - h - 4, S));
-      }
+  render(t, i, e, n, s) {
+    const { x: o, y: l } = e, { padding: h } = s;
+    let a = l + h.top;
+    const r = o + h.left;
+    t.save(), t.textAlign = "left", t.textBaseline = "top", t.font = `${s.titleFontWeight} ${s.titleFontSize}px ${s.fontFamily}`, t.fillStyle = s.textColor;
+    const d = `Grid [${i.xIndex}, ${i.yIndex}]`;
+    t.fillText(d, r, a), a += s.titleFontSize * s.lineHeight + 2, s.showHeaderSeparator && (t.strokeStyle = s.separatorColor, t.lineWidth = 1, t.globalAlpha = 0.4, t.beginPath(), t.moveTo(r, a + s.headerGap / 2), t.lineTo(r + n.width, a + s.headerGap / 2), t.stroke(), t.globalAlpha = 1), a += s.headerGap + 2, t.font = `400 ${s.contentFontSize}px ${s.fontFamily}`;
+    const f = a + (s.contentFontSize * s.lineHeight - this.swatchSize) / 2;
+    t.fillStyle = i.mappedColor || s.textColor, t.fillRect(r, f, this.swatchSize, this.swatchSize), t.strokeStyle = s.separatorColor, t.lineWidth = 1, t.strokeRect(r, f, this.swatchSize, this.swatchSize), t.fillStyle = s.textSecondaryColor, t.fillText("Value:", r + this.swatchSize + this.swatchGap, a), t.fillStyle = s.textColor;
+    const p = t.measureText("Value: ").width;
+    if (t.fillText(P(i.zValue), r + this.swatchSize + this.swatchGap + p, a), a += s.contentFontSize * s.lineHeight, i.colorScale) {
+      t.fillStyle = s.textSecondaryColor, t.font = `400 ${s.contentFontSize - 1}px ${s.fontFamily}`;
+      const g = `Min: ${P(i.colorScale.min)}  Max: ${P(i.colorScale.max)}`;
+      t.fillText(g, r + this.swatchSize + this.swatchGap, a), a += s.contentFontSize * s.lineHeight;
     }
-    return {
-      x: b.x,
-      y: b.y,
-      arrowPosition: l ? g : "none",
-      arrowOffset: x,
-      wasFlipped: y
-    };
+    a += s.itemGap + 2, t.font = `400 ${s.contentFontSize}px ${s.fontFamily}`, t.fillStyle = s.textSecondaryColor, t.fillText("X:", r, a), t.fillStyle = s.textColor, t.fillText(P(i.dataX), r + 25, a), a += s.contentFontSize * s.lineHeight + 2, t.fillStyle = s.textSecondaryColor, t.fillText("Y:", r, a), t.fillStyle = s.textColor, t.fillText(P(i.dataY), r + 25, a), t.restore();
+  }
+}
+const _ = new It();
+function Q(c) {
+  var t, i;
+  return ((i = (t = c.axisFormat) == null ? void 0 : t.x) == null ? void 0 : i.type) === "time" ? ot(c) : E(c.dataX);
+}
+function Z(c) {
+  var t, i;
+  return ((i = (t = c.axisFormat) == null ? void 0 : t.y) == null ? void 0 : i.scientific) === !1 ? nt(c) : E(c.dataY);
+}
+function E(c, t = 3) {
+  if (c == null || isNaN(c))
+    return "N/A";
+  if (c === 0) return "0";
+  const i = Math.floor(Math.log10(Math.abs(c))), e = c / Math.pow(10, i);
+  if (Math.abs(i) <= 2)
+    return c.toPrecision(t);
+  const n = {
+    0: "⁰",
+    1: "¹",
+    2: "²",
+    3: "³",
+    4: "⁴",
+    5: "⁵",
+    6: "⁶",
+    7: "⁷",
+    8: "⁸",
+    9: "⁹",
+    "-": "⁻",
+    "+": "⁺"
+  }, s = i.toString();
+  let o = "";
+  for (const l of s)
+    o += n[l] || l;
+  return `${e.toFixed(t - 1)} × 10${o}`;
+}
+class zt {
+  constructor() {
+    u(this, "id", "scientific");
+    u(this, "name", "Scientific Notation");
+    u(this, "supportedTypes", ["datapoint"]);
+    // Cached measurements
+    u(this, "cachedKey", "");
+    u(this, "cachedMeasurement", null);
   }
   /**
-   * Determine best position based on available space
+   * Measure tooltip dimensions
    */
-  determinePosition(t, i, e, n, s) {
-    if (s !== "auto")
-      return s;
-    const o = this.getConstraintBounds(), l = i - o.top, h = o.bottom - i, a = t - o.left, r = o.right - t, d = l >= n + this.config.offset.y, f = h >= n + this.config.offset.y, p = r >= e + this.config.offset.x, g = a >= e + this.config.offset.x;
-    return d && l >= h ? "top" : f ? "bottom" : p && r >= a ? "right" : g ? "left" : [
-      { pos: "top", space: l },
-      { pos: "bottom", space: h },
-      { pos: "right", space: r },
-      { pos: "left", space: a }
-    ].sort((b, x) => x.space - b.space)[0].pos;
+  measure(t, i, e) {
+    const n = `${i.seriesId}-${i.dataIndex}-${i.dataX}-${i.dataY}-${e.fontFamily}-${e.titleFontSize}`;
+    if (n === this.cachedKey && this.cachedMeasurement)
+      return this.cachedMeasurement;
+    t.font = `${e.titleFontWeight} ${e.titleFontSize}px ${e.fontFamily}`;
+    const s = t.measureText(i.seriesName).width + (e.showSeriesIndicator ? e.seriesIndicatorSize + 8 : 0);
+    t.font = `400 ${e.contentFontSize}px ${e.fontFamily}`;
+    const o = 28, l = Q(i);
+    let h = Math.max(s, o + t.measureText(l).width);
+    const a = Z(i);
+    let r = o + t.measureText(a).width;
+    i.yError && (r += t.measureText(` ± ${E(i.yError[0])}`).width), h = Math.max(h, r);
+    let d = `Index: ${i.dataIndex}`;
+    i.cycle !== void 0 && (d += `  │  Cycle: ${i.cycle}`), h = Math.max(h, t.measureText(d).width);
+    let f = 3;
+    (i.cycle !== void 0 || i.yError) && (f += 1);
+    const p = e.titleFontSize * e.lineHeight + e.headerGap, g = (f - 1) * e.contentFontSize * e.lineHeight, y = i.cycle !== void 0 ? e.itemGap : 0;
+    return this.cachedMeasurement = {
+      width: h,
+      height: p + g + y,
+      padding: e.padding
+    }, this.cachedKey = n, this.cachedMeasurement;
   }
   /**
-   * Calculate tooltip coordinates for a given position
+   * Render the tooltip
    */
-  calculateCoordinates(t, i, e, n, s, o, l) {
-    let h, a, r;
-    switch (s) {
-      case "top":
-        h = t - e / 2, a = i - n - o.y - l, r = "bottom";
-        break;
-      case "bottom":
-        h = t - e / 2, a = i + o.y + l, r = "top";
-        break;
-      case "right":
-        h = t + o.x + l, a = i - n / 2, r = "left";
-        break;
-      case "left":
-        h = t - e - o.x - l, a = i - n / 2, r = "right";
-        break;
+  render(t, i, e, n, s) {
+    const { x: o, y: l } = e, { padding: h } = s;
+    let a = l + h.top, r = o + h.left;
+    if (t.save(), t.textAlign = "left", t.textBaseline = "top", s.showSeriesIndicator) {
+      const p = a + s.titleFontSize / 2;
+      t.fillStyle = i.seriesColor, t.beginPath(), t.arc(r + s.seriesIndicatorSize / 2, p, s.seriesIndicatorSize / 2, 0, Math.PI * 2), t.fill(), r += s.seriesIndicatorSize + 8;
     }
-    return { x: h, y: a, arrowPosition: r };
+    t.font = `${s.titleFontWeight} ${s.titleFontSize}px ${s.fontFamily}`, t.fillStyle = s.textColor, t.fillText(i.seriesName, r, a), a += s.titleFontSize * s.lineHeight + 2, r = o + h.left, s.showHeaderSeparator && (t.strokeStyle = s.separatorColor, t.lineWidth = 1, t.globalAlpha = 0.4, t.beginPath(), t.moveTo(r, a + s.headerGap / 2), t.lineTo(r + n.width, a + s.headerGap / 2), t.stroke(), t.globalAlpha = 1), a += s.headerGap + 2, t.font = `400 ${s.contentFontSize}px ${s.fontFamily}`;
+    const d = 28;
+    t.fillStyle = s.textSecondaryColor, t.fillText("X:", r, a), t.fillStyle = s.textColor, t.fillText(Q(i), r + d, a), a += s.contentFontSize * s.lineHeight + 2, t.fillStyle = s.textSecondaryColor, t.fillText("Y:", r, a), t.fillStyle = s.textColor;
+    const f = Z(i);
+    if (t.fillText(f, r + d, a), i.yError) {
+      const p = t.measureText(f).width;
+      t.fillStyle = s.textSecondaryColor, t.fillText(` ± ${E(i.yError[0])}`, r + d + p, a);
+    }
+    if (a += s.contentFontSize * s.lineHeight + 2, i.cycle !== void 0) {
+      a += s.itemGap, t.strokeStyle = s.separatorColor, t.globalAlpha = 0.3, t.beginPath(), t.moveTo(r, a - s.itemGap / 2), t.lineTo(r + n.width, a - s.itemGap / 2), t.stroke(), t.globalAlpha = 1, t.fillStyle = s.textSecondaryColor, t.font = `400 ${s.contentFontSize - 1}px ${s.fontFamily}`;
+      let p = `Index: ${i.dataIndex}`;
+      i.cycle !== void 0 && (p += `  │  Cycle: ${i.cycle}`), t.fillText(p, r, a);
+    }
+    t.restore();
+  }
+}
+const lt = new zt();
+function X(c) {
+  if (c == null || isNaN(c))
+    return "N/A";
+  const t = Math.abs(c);
+  return t === 0 ? "0" : t < 1e-4 || t >= 1e4 ? c.toExponential(2) : t < 1 ? c.toFixed(4) : c.toFixed(2);
+}
+class Yt {
+  constructor() {
+    u(this, "id", "annotation");
+    u(this, "name", "Annotation Info");
+    u(this, "supportedTypes", ["annotation"]);
+    // Cache
+    u(this, "cachedKey", "");
+    u(this, "cachedMeasurement", null);
   }
   /**
-   * Get the opposite position for flipping
+   * Measure tooltip dimensions
    */
-  flipPosition(t) {
-    switch (t) {
-      case "top":
-        return "bottom";
-      case "bottom":
-        return "top";
-      case "left":
-        return "right";
-      case "right":
-        return "left";
+  measure(t, i, e) {
+    const n = `${i.annotationId}-${i.label}-${e.fontFamily}-${e.titleFontSize}`;
+    if (n === this.cachedKey && this.cachedMeasurement)
+      return this.cachedMeasurement;
+    t.font = `${e.titleFontWeight} ${e.titleFontSize}px ${e.fontFamily}`;
+    const s = i.label || `Annotation: ${i.annotationType}`;
+    let o = t.measureText(s).width;
+    t.font = `400 ${e.contentFontSize}px ${e.fontFamily}`;
+    let l = 0;
+    const h = 50;
+    if (i.value !== void 0) {
+      const r = X(i.value);
+      o = Math.max(o, h + t.measureText(r).width), l += e.contentFontSize * e.lineHeight;
+    }
+    if (i.valueX !== void 0 && i.valueY !== void 0) {
+      const r = X(i.valueX), d = X(i.valueY);
+      o = Math.max(o, h + t.measureText(r).width, h + t.measureText(d).width), l += e.contentFontSize * e.lineHeight * 2;
     }
+    const a = e.titleFontSize * e.lineHeight + e.headerGap;
+    return this.cachedMeasurement = {
+      width: o + 10,
+      height: a + l + 4,
+      padding: e.padding
+    }, this.cachedKey = n, this.cachedMeasurement;
   }
   /**
-   * Check if tooltip fits within bounds
+   * Render the tooltip
    */
-  fitsInBounds(t, i, e, n) {
-    const s = this.getConstraintBounds();
-    return t >= s.left && i >= s.top && t + e <= s.right && i + n <= s.bottom;
+  render(t, i, e, n, s) {
+    const { x: o, y: l } = e, { padding: h } = s;
+    let a = l + h.top;
+    const r = o + h.left;
+    t.save(), t.textAlign = "left", t.textBaseline = "top", t.font = `${s.titleFontWeight} ${s.titleFontSize}px ${s.fontFamily}`, t.fillStyle = s.textColor;
+    const d = i.label || `${i.annotationType.toUpperCase()}`;
+    t.fillText(d, r, a), a += s.titleFontSize * s.lineHeight + 2, s.showHeaderSeparator && (t.strokeStyle = s.separatorColor, t.globalAlpha = 0.4, t.beginPath(), t.moveTo(r, a + s.headerGap / 2), t.lineTo(r + n.width, a + s.headerGap / 2), t.stroke(), t.globalAlpha = 1), a += s.headerGap + 2, t.font = `400 ${s.contentFontSize}px ${s.fontFamily}`;
+    const f = 50;
+    i.value !== void 0 && (t.fillStyle = s.textSecondaryColor, t.fillText("Value:", r, a), t.fillStyle = s.textColor, t.fillText(X(i.value), r + f, a), a += s.contentFontSize * s.lineHeight), i.valueX !== void 0 && i.valueY !== void 0 && (t.fillStyle = s.textSecondaryColor, t.fillText("X:", r, a), t.fillStyle = s.textColor, t.fillText(X(i.valueX), r + f, a), a += s.contentFontSize * s.lineHeight, t.fillStyle = s.textSecondaryColor, t.fillText("Y:", r, a), t.fillStyle = s.textColor, t.fillText(X(i.valueY), r + f, a)), t.restore();
   }
-  /**
-   * Constrain position to stay within bounds
-   */
-  constrainToBounds(t, i, e, n) {
-    const s = this.getConstraintBounds(), o = 4;
-    let l = t, h = i;
-    return l < s.left + o ? l = s.left + o : l + e > s.right - o && (l = s.right - e - o), h < s.top + o ? h = s.top + o : h + n > s.bottom - o && (h = s.bottom - n - o), { x: l, y: h };
+}
+const K = new Yt();
+function M(c) {
+  if (c == null || isNaN(c))
+    return "N/A";
+  const t = Math.abs(c);
+  return t === 0 ? "0" : t < 1e-4 || t >= 1e4 ? c.toExponential(3) : t < 1 ? c.toFixed(4) : c.toFixed(3);
+}
+class At {
+  constructor() {
+    u(this, "id", "range");
+    u(this, "name", "Range Statistics");
+    u(this, "supportedTypes", ["range"]);
+    // Cache
+    u(this, "cachedKey", "");
+    u(this, "cachedMeasurement", null);
   }
   /**
-   * Get the bounds to constrain tooltip within
+   * Measure tooltip dimensions
    */
-  getConstraintBounds() {
-    let t = {
-      top: 0,
-      left: 0,
-      right: this.containerWidth,
-      bottom: this.containerHeight
-    };
-    return this.config.constrainToPlotArea && this.plotArea && (t = {
-      top: Math.max(t.top, this.plotArea.y),
-      left: Math.max(t.left, this.plotArea.x),
-      right: Math.min(t.right, this.plotArea.x + this.plotArea.width),
-      bottom: Math.min(t.bottom, this.plotArea.y + this.plotArea.height)
-    }), t;
+  measure(t, i, e) {
+    const n = i.statistics, s = `${i.xMin}-${i.xMax}-${n.count}-${n.mean}-${e.fontFamily}`;
+    if (s === this.cachedKey && this.cachedMeasurement)
+      return this.cachedMeasurement;
+    t.font = `${e.titleFontWeight} ${e.titleFontSize}px ${e.fontFamily}`;
+    let l = t.measureText("Range Statistics").width;
+    t.font = `400 ${e.contentFontSize}px ${e.fontFamily}`;
+    let h = e.contentFontSize * e.lineHeight * 2;
+    const a = [
+      `Range: ${M(i.xMin)} to ${M(i.xMax)}`,
+      `Count: ${n.count}`
+    ];
+    n.min !== void 0 && a.push(`Min: ${M(n.min)}`), n.max !== void 0 && a.push(`Max: ${M(n.max)}`), n.mean !== void 0 && a.push(`Mean: ${M(n.mean)}`), n.area !== void 0 && a.push(`Area: ${M(n.area)}`);
+    for (const d of a)
+      l = Math.max(l, t.measureText(d).width + 10);
+    h = a.length * e.contentFontSize * e.lineHeight;
+    const r = e.titleFontSize * e.lineHeight + e.headerGap;
+    return this.cachedMeasurement = {
+      width: Math.max(l, 140),
+      height: r + h + 10,
+      padding: e.padding
+    }, this.cachedKey = s, this.cachedMeasurement;
   }
   /**
-   * Calculate position for crosshair tooltip (follows cursor vertically)
+   * Render the tooltip
    */
-  calculateCrosshairPosition(t, i, e) {
-    const { offset: n } = this.config, s = this.getConstraintBounds(), o = e.width + e.padding.left + e.padding.right, l = e.height + e.padding.top + e.padding.bottom;
-    let h = t + n.x, a = "left";
-    h + o > s.right - 4 && (h = t - o - n.x, a = "right");
-    let r = i - l / 2;
-    r = Math.max(s.top + 4, Math.min(s.bottom - l - 4, r));
-    const d = i - r;
-    return {
-      x: h,
-      y: r,
-      arrowPosition: a,
-      arrowOffset: Math.max(8, Math.min(l - 8, d)),
-      wasFlipped: a === "right"
+  render(t, i, e, n, s) {
+    const { x: o, y: l } = e, { padding: h } = s, a = i.statistics;
+    let r = l + h.top;
+    const d = o + h.left;
+    t.save(), t.textAlign = "left", t.textBaseline = "top", t.font = `${s.titleFontWeight} ${s.titleFontSize}px ${s.fontFamily}`, t.fillStyle = s.textColor, t.fillText("Range Statistics", d, r), r += s.titleFontSize * s.lineHeight + 2, s.showHeaderSeparator && (t.strokeStyle = s.separatorColor, t.globalAlpha = 0.4, t.beginPath(), t.moveTo(d, r + s.headerGap / 2), t.lineTo(d + n.width, r + s.headerGap / 2), t.stroke(), t.globalAlpha = 1), r += s.headerGap + 2, t.font = `400 ${s.contentFontSize}px ${s.fontFamily}`;
+    const f = 60, p = (g, y) => {
+      t.fillStyle = s.textSecondaryColor, t.fillText(g, d, r), t.fillStyle = s.textColor, t.fillText(String(y), d + f, r), r += s.contentFontSize * s.lineHeight;
     };
+    p("Points:", a.count), a.min !== void 0 && p("Min:", M(a.min)), a.max !== void 0 && p("Max:", M(a.max)), a.mean !== void 0 && p("Mean:", M(a.mean)), a.stdDev !== void 0 && p("StdDev:", M(a.stdDev)), a.area !== void 0 && p("Area:", M(a.area)), a.peakX !== void 0 && (r += 4, t.fillStyle = s.textSecondaryColor, t.font = `italic ${s.contentFontSize - 1}px ${s.fontFamily}`, t.fillText(`Peak: ${M(a.peakY ?? 0)} at X=${M(a.peakX)}`, d, r)), t.restore();
   }
 }
-class vt {
-  constructor(t, i) {
+const U = new At(), Xt = [
+  H,
+  at,
+  G,
+  _,
+  lt,
+  K,
+  U
+];
+function $t(c) {
+  return Xt.find((t) => t.id === c);
+}
+function tt(c) {
+  switch (c) {
+    case "datapoint":
+      return H;
+    case "crosshair":
+      return G;
+    case "heatmap":
+      return _;
+    case "annotation":
+      return K;
+    case "range":
+      return U;
+    default:
+      return H;
+  }
+}
+class Dt {
+  constructor(t) {
     u(this, "ctx");
+    u(this, "getPlotArea");
+    u(this, "getSeries");
+    u(this, "pixelToDataX");
+    u(this, "pixelToDataY");
+    u(this, "getXScale");
+    u(this, "getYScales");
+    u(this, "getViewBounds");
+    u(this, "getXAxisOptions");
+    u(this, "getYAxisOptions");
+    u(this, "options");
     u(this, "theme");
-    this.ctx = t, this.theme = i;
+    u(this, "positioner");
+    u(this, "renderer");
+    u(this, "templates", /* @__PURE__ */ new Map());
+    u(this, "events", new ut());
+    u(this, "activeTooltips", /* @__PURE__ */ new Map());
+    u(this, "tooltipIdCounter", 0);
+    u(this, "showTimeoutId", null);
+    u(this, "hideTimeoutId", null);
+    u(this, "lastCursorX", null);
+    u(this, "lastCursorY", null);
+    u(this, "hoveredSeriesId", null);
+    u(this, "hoveredDataIndex", null);
+    u(this, "cachedNearestResult", null);
+    // Large dataset optimizations
+    u(this, "snapMode", "auto");
+    u(this, "largeDatasetThreshold", 5e4);
+    u(this, "lastKnownDataSize", 0);
+    // Hysteresis factor: new point must be this much closer to switch (2 = 2x closer)
+    u(this, "hysteresisRatio", 2);
+    // Suspended state - used during drag operations to hide tooltip
+    u(this, "suspended", !1);
+    var i;
+    this.ctx = t.overlayCtx, this.getPlotArea = t.getPlotArea, this.getSeries = t.getSeries, this.pixelToDataX = t.pixelToDataX, this.pixelToDataY = t.pixelToDataY, this.getXScale = t.getXScale, this.getYScales = t.getYScales, this.getViewBounds = t.getViewBounds, this.getXAxisOptions = t.getXAxisOptions, this.getYAxisOptions = t.getYAxisOptions, this.options = {
+      enabled: !0,
+      showDelay: 50,
+      hideDelay: 100,
+      followCursor: !1,
+      offset: { x: 12, y: 12 },
+      dataPoint: {
+        enabled: !0,
+        templateId: "default",
+        snapToPoint: !0,
+        hitRadius: 20
+      },
+      crosshair: {
+        enabled: !1,
+        templateId: "crosshair",
+        interpolate: !0,
+        visibleSeriesOnly: !0
+      },
+      range: {
+        enabled: !1,
+        templateId: "default",
+        calculateStats: !0
+      },
+      annotation: {
+        enabled: !0,
+        templateId: "default"
+      },
+      heatmap: {
+        enabled: !0,
+        templateId: "heatmap",
+        showColorInfo: !0
+      },
+      positioning: "auto",
+      preferredPosition: "auto",
+      constrainToPlotArea: !0,
+      constrainToContainer: !0,
+      autoFlip: !0
+    }, this.theme = (i = t.options) != null && i.theme ? typeof t.options.theme == "string" ? B(t.options.theme) : bt(St, t.options.theme) : B(t.chartTheme.name), this.positioner = new Tt({
+      offset: this.options.offset,
+      preferredPosition: this.options.preferredPosition,
+      constrainToPlotArea: this.options.constrainToPlotArea,
+      constrainToContainer: this.options.constrainToContainer,
+      autoFlip: this.options.autoFlip,
+      showArrow: this.theme.showArrow,
+      arrowSize: this.theme.arrowSize
+    }), this.renderer = new wt(this.ctx, this.theme), this.registerBuiltinTemplates(), t.options && this.configure(t.options);
+  }
+  /**
+   * Register built-in templates
+   */
+  registerBuiltinTemplates() {
+    this.templates.set(
+      "default",
+      H
+    ), this.templates.set(
+      "minimal",
+      at
+    ), this.templates.set(
+      "crosshair",
+      G
+    ), this.templates.set(
+      "heatmap",
+      _
+    ), this.templates.set(
+      "scientific",
+      lt
+    ), this.templates.set(
+      "annotation",
+      K
+    ), this.templates.set(
+      "range",
+      U
+    );
   }
   /**
-   * Update the theme
+   * Configure tooltip options
    */
-  setTheme(t) {
-    this.theme = t;
+  configure(t) {
+    t.enabled !== void 0 && (this.options.enabled = t.enabled), t.showDelay !== void 0 && (this.options.showDelay = t.showDelay), t.hideDelay !== void 0 && (this.options.hideDelay = t.hideDelay), t.followCursor !== void 0 && (this.options.followCursor = t.followCursor), t.offset && (this.options.offset = { ...this.options.offset, ...t.offset }), t.dataPoint && (this.options.dataPoint = {
+      ...this.options.dataPoint,
+      ...t.dataPoint
+    }), t.crosshair && (this.options.crosshair = {
+      ...this.options.crosshair,
+      ...t.crosshair
+    }), t.heatmap && (this.options.heatmap = { ...this.options.heatmap, ...t.heatmap }), t.preferredPosition && (this.options.preferredPosition = t.preferredPosition), t.constrainToPlotArea !== void 0 && (this.options.constrainToPlotArea = t.constrainToPlotArea), t.constrainToContainer !== void 0 && (this.options.constrainToContainer = t.constrainToContainer), t.autoFlip !== void 0 && (this.options.autoFlip = t.autoFlip), t.snapMode !== void 0 && (this.snapMode = t.snapMode), t.largeDatasetThreshold !== void 0 && (this.largeDatasetThreshold = Math.max(
+      1e3,
+      t.largeDatasetThreshold
+    )), this.positioner.configure({
+      offset: this.options.offset,
+      preferredPosition: this.options.preferredPosition,
+      constrainToPlotArea: this.options.constrainToPlotArea,
+      constrainToContainer: this.options.constrainToContainer,
+      autoFlip: this.options.autoFlip
+    });
   }
   /**
-   * Render a tooltip with the given template
+   * Get current options
    */
-  render(t, i, e) {
-    const n = e.measure(this.ctx, t, this.theme), s = n.width + n.padding.left + n.padding.right, o = n.height + n.padding.top + n.padding.bottom;
-    this.ctx.save(), this.drawBackground(i.x, i.y, s, o, i.arrowPosition || "none"), i.arrowPosition && i.arrowPosition !== "none" && this.drawArrow(
-      i.x,
-      i.y,
-      s,
-      o,
-      i.arrowPosition,
-      i.arrowOffset || 0
-    ), e.render(this.ctx, t, i, n, this.theme), this.ctx.restore();
+  getOptions() {
+    return { ...this.options };
   }
   /**
-   * Draw tooltip background with all effects
+   * Enable/disable tooltips
    */
-  drawBackground(t, i, e, n, s) {
-    const { ctx: o, theme: l } = this, h = l.borderRadius;
-    if (o.save(), l.shadow.blur > 0 && (o.shadowColor = l.shadow.color, o.shadowOffsetX = l.shadow.offsetX, o.shadowOffsetY = l.shadow.offsetY, o.shadowBlur = l.shadow.blur), o.beginPath(), this.roundRect(t, i, e, n, h), l.backgroundGradient) {
-      const a = o.createLinearGradient(t, i, t, i + n);
-      a.addColorStop(0, l.backgroundColor), a.addColorStop(1, l.backgroundGradient), o.fillStyle = a;
-    } else
-      o.fillStyle = l.backgroundColor;
-    o.fill(), o.shadowColor = "transparent", l.borderWidth > 0 && (o.strokeStyle = l.borderColor, o.lineWidth = l.borderWidth, o.stroke()), o.restore();
+  setEnabled(t) {
+    this.options.enabled = t, t || this.hideAll();
   }
   /**
-   * Draw arrow pointing to target
+   * Check if tooltips are enabled
    */
-  drawArrow(t, i, e, n, s, o) {
-    const { ctx: l, theme: h } = this, a = h.arrowSize;
-    if (!(a <= 0 || s === "none")) {
-      switch (l.save(), l.fillStyle = h.backgroundColor, l.strokeStyle = h.borderColor, l.lineWidth = h.borderWidth, l.beginPath(), s) {
-        case "top":
-          const r = t + o;
-          l.moveTo(r - a, i), l.lineTo(r, i - a), l.lineTo(r + a, i);
-          break;
-        case "bottom":
-          const d = t + o, f = i + n;
-          l.moveTo(d - a, f), l.lineTo(d, f + a), l.lineTo(d + a, f);
-          break;
-        case "left":
-          const p = i + o;
-          l.moveTo(t, p - a), l.lineTo(t - a, p), l.lineTo(t, p + a);
-          break;
-        case "right":
-          const g = t + e, y = i + o;
-          l.moveTo(g, y - a), l.lineTo(g + a, y), l.lineTo(g, y + a);
-          break;
-      }
-      l.closePath(), l.fill(), h.borderWidth > 0 && l.stroke(), l.restore();
-    }
+  isEnabled() {
+    return this.options.enabled;
   }
   /**
-   * Draw a rounded rectangle path
+   * Suspend tooltip display (used during drag operations)
+   * When suspended, tooltips are immediately hidden and cursor movements are ignored
    */
-  roundRect(t, i, e, n, s) {
-    const { ctx: o } = this, l = Math.min(s, e / 2, n / 2);
-    o.moveTo(t + l, i), o.lineTo(t + e - l, i), o.arcTo(t + e, i, t + e, i + l, l), o.lineTo(t + e, i + n - l), o.arcTo(t + e, i + n, t + e - l, i + n, l), o.lineTo(t + l, i + n), o.arcTo(t, i + n, t, i + n - l, l), o.lineTo(t, i + l), o.arcTo(t, i, t + l, i, l), o.closePath();
+  setSuspended(t) {
+    this.suspended = t, t && this.hideAll();
   }
   /**
-   * Draw a horizontal separator line
+   * Check if tooltips are suspended
    */
-  drawSeparator(t, i, e) {
-    const { ctx: n, theme: s } = this;
-    s.showHeaderSeparator && (n.save(), n.strokeStyle = s.separatorColor, n.lineWidth = 1, n.beginPath(), n.moveTo(t, i), n.lineTo(t + e, i), n.stroke(), n.restore());
+  isSuspended() {
+    return this.suspended;
   }
   /**
-   * Draw a series color indicator (small circle or square)
+   * Set tooltip theme
    */
-  drawSeriesIndicator(t, i, e) {
-    const { ctx: n, theme: s } = this;
-    if (!s.showSeriesIndicator) return;
-    const l = s.seriesIndicatorSize / 2;
-    n.save(), n.fillStyle = e, n.beginPath(), n.arc(t + l, i, l, 0, Math.PI * 2), n.fill(), n.restore();
+  setTheme(t) {
+    this.theme = typeof t == "string" ? B(t) : t, this.renderer.setTheme(this.theme), this.positioner.configure({
+      showArrow: this.theme.showArrow,
+      arrowSize: this.theme.arrowSize
+    });
   }
   /**
-   * Measure text width
+   * Update theme based on chart theme
    */
-  measureText(t, i, e = 400) {
-    const { ctx: n, theme: s } = this;
-    return n.font = `${e} ${i}px ${s.fontFamily}`, n.measureText(t).width;
+  updateChartTheme(t) {
+    this.options.theme || (this.theme = B(t.name), this.renderer.setTheme(this.theme));
   }
   /**
-   * Draw text with theme styling
+   * Get current theme
    */
-  drawText(t, i, e, n = {}) {
-    const { ctx: s, theme: o } = this, {
-      fontSize: l = o.contentFontSize,
-      fontWeight: h = 400,
-      color: a = o.textColor,
-      align: r = "left",
-      baseline: d = "top"
-    } = n;
-    s.save(), s.font = `${h} ${l}px ${o.fontFamily}`, s.fillStyle = a, s.textAlign = r, s.textBaseline = d, s.fillText(t, i, e), s.restore();
+  getTheme() {
+    return this.theme;
   }
   /**
-   * Draw a label-value pair
+   * Register a custom template
    */
-  drawLabelValue(t, i, e, n, s) {
-    const { theme: o } = this;
-    this.drawText(e, t, i, {
-      color: o.textSecondaryColor,
-      fontSize: o.contentFontSize
-    }), this.drawText(n, t + s, i, {
-      color: o.textColor,
-      fontSize: o.contentFontSize,
-      align: "right"
-    });
+  registerTemplate(t) {
+    this.templates.set(t.id, t);
   }
   /**
-   * Get theme for external use
+   * Get a template by ID
    */
-  getTheme() {
-    return this.theme;
-  }
-}
-function ot(c) {
-  return c.axisFormat ? O(c.dataX, c.axisFormat) : W(c.dataX);
-}
-function nt(c) {
-  return c.axisFormat ? N(c.dataY, c.axisFormat) : W(c.dataY);
-}
-function Ct(c) {
-  return c.axisFormat ? O(c.dataX, c.axisFormat) : W(c.dataX);
-}
-function Pt(c, t) {
-  return t.axisFormat ? N(c, t.axisFormat) : W(c);
-}
-function W(c) {
-  if (c == null || isNaN(c)) return "N/A";
-  const t = Math.abs(c);
-  return t === 0 ? "0" : t < 1e-4 || t >= 1e4 ? c.toExponential(2) : t < 0.01 ? c.toPrecision(4) : t < 1 ? c.toFixed(4) : t < 100 ? c.toFixed(3) : c.toFixed(1);
-}
-function k(c, t) {
-  const i = t === "x" ? c.dataX : c.dataY;
-  if (c.axisFormat)
-    return t === "x" ? O(i, c.axisFormat) : N(i, c.axisFormat);
-  if (i == null || isNaN(i)) return "N/A";
-  const e = Math.abs(i);
-  return e === 0 ? "0" : e >= 1e9 ? (i / 1e9).toFixed(1) + "G" : e >= 1e6 ? (i / 1e6).toFixed(1) + "M" : e >= 1e3 ? (i / 1e3).toFixed(1) + "k" : e >= 1 ? i.toFixed(2) : e >= 1e-3 ? (i * 1e3).toFixed(1) + "m" : e >= 1e-6 ? (i * 1e6).toFixed(1) + "µ" : e >= 1e-9 ? (i * 1e9).toFixed(1) + "n" : i.toExponential(1);
-}
-function z(c, t, i) {
-  if (t && i === "x") return ot(t);
-  if (t && i === "y") return nt(t);
-  if (c == null || isNaN(c)) return "N/A";
-  const e = Math.abs(c);
-  return e !== 0 && (e < 1e-4 || e >= 1e4) ? c.toExponential(2) : e < 0.01 ? c.toPrecision(4) : e < 1 ? c.toFixed(4) : e < 100 ? c.toFixed(3) : c.toFixed(1);
-}
-class Ft {
-  constructor() {
-    u(this, "id", "default");
-    u(this, "name", "Default Data Point");
-    u(this, "supportedTypes", ["datapoint"]);
-    // Cached measurements
-    u(this, "cachedKey", "");
-    u(this, "cachedMeasurement", null);
+  getTemplate(t) {
+    return this.templates.get(t) || $t(t);
   }
   /**
-   * Measure tooltip dimensions
+   * Handle cursor movement - main entry point for hover detection
+   * Optimized with hysteresis to prevent jumping between nearby points
    */
-  measure(t, i, e) {
-    const n = `${i.seriesId}-${i.dataIndex}-${i.dataX}-${i.dataY}`;
-    if (n === this.cachedKey && this.cachedMeasurement)
-      return this.cachedMeasurement;
-    t.font = `${e.titleFontWeight} ${e.titleFontSize}px ${e.fontFamily}`;
-    const s = t.measureText(i.seriesName).width;
-    t.font = `400 ${e.contentFontSize}px ${e.fontFamily}`;
-    const o = 35, l = t.measureText(z(i.dataX, i, "x")).width, h = t.measureText(z(i.dataY, i, "y")).width;
-    let a = o + Math.max(l, h), r = e.contentFontSize * e.lineHeight * 2;
-    if (i.yError) {
-      const g = `± ${z(i.yError[0])} / ${z(i.yError[1])}`;
-      a = Math.max(a, t.measureText(g).width), r += e.contentFontSize * e.lineHeight;
-    }
-    if (i.cycle !== void 0) {
-      const g = `Cycle: ${i.cycle}`;
-      a = Math.max(a, t.measureText(g).width), r += e.contentFontSize * e.lineHeight;
+  handleCursorMove(t, i) {
+    if (!this.options.enabled || this.suspended) return;
+    this.lastCursorX = t, this.lastCursorY = i;
+    const e = this.getPlotArea();
+    if (!(t >= e.x && t <= e.x + e.width && i >= e.y && i <= e.y + e.height)) {
+      this.cachedNearestResult = null, this.scheduleHide();
+      return;
     }
-    const d = e.showSeriesIndicator ? e.seriesIndicatorSize + 6 : 0, f = Math.max(s + d, a), p = e.titleFontSize * e.lineHeight + e.headerGap + r;
-    return this.cachedMeasurement = {
-      width: f + 2,
-      // Tiny buffer
-      height: p + 4,
-      padding: e.padding,
-      arrow: e.showArrow ? { width: e.arrowSize * 2, height: e.arrowSize } : void 0
-    }, this.cachedKey = n, this.cachedMeasurement;
+    this.positioner.setContainerSize(
+      this.ctx.canvas.width / (window.devicePixelRatio || 1),
+      this.ctx.canvas.height / (window.devicePixelRatio || 1)
+    ), this.positioner.setPlotArea(e), this.lastKnownDataSize = this.getTotalDataPoints(), this.performTooltipUpdateWithHysteresis(t, i);
   }
   /**
-   * Render the tooltip
+   * Handle cursor leave
    */
-  render(t, i, e, n, s) {
-    const { x: o, y: l } = e, { padding: h } = s;
-    let a = o + h.left, r = l + h.top;
-    if (t.save(), t.textAlign = "left", t.textBaseline = "top", s.showSeriesIndicator) {
-      const f = r + s.titleFontSize / 2;
-      t.save(), t.fillStyle = i.seriesColor, t.beginPath(), t.arc(a + s.seriesIndicatorSize / 2, f, s.seriesIndicatorSize / 2, 0, Math.PI * 2), t.fill(), t.restore(), a += s.seriesIndicatorSize + 6;
-    }
-    if (t.font = `${s.titleFontWeight} ${s.titleFontSize}px ${s.fontFamily}`, t.fillStyle = s.textColor, t.fillText(i.seriesName, a, r), r += s.titleFontSize * s.lineHeight + 2, s.showHeaderSeparator) {
-      const f = n.width;
-      t.save(), t.strokeStyle = s.separatorColor, t.lineWidth = 1, t.globalAlpha = 0.4, t.beginPath(), t.moveTo(o + h.left, r + s.headerGap / 2), t.lineTo(o + h.left + f, r + s.headerGap / 2), t.stroke(), t.restore();
-    }
-    r += s.headerGap + 2, a = o + h.left, t.font = `400 ${s.contentFontSize}px ${s.fontFamily}`, t.fillStyle = s.textSecondaryColor, t.fillText("X:", a, r), t.fillStyle = s.textColor;
-    const d = 35;
-    if (t.fillText(z(i.dataX, i, "x"), a + d, r), r += s.contentFontSize * s.lineHeight + 2, t.fillStyle = s.textSecondaryColor, t.fillText("Y:", a, r), t.fillStyle = s.textColor, t.fillText(z(i.dataY, i, "y"), a + d, r), r += s.contentFontSize * s.lineHeight + 2, i.yError) {
-      t.fillStyle = s.textSecondaryColor;
-      const f = `± ${z(i.yError[0])} / +${z(i.yError[1])}`;
-      t.fillText(f, a, r), r += s.contentFontSize * s.lineHeight;
+  handleCursorLeave() {
+    this.lastCursorX = null, this.lastCursorY = null, this.cachedNearestResult = null, this.scheduleHide();
+  }
+  /**
+   * Get total number of data points across all visible series
+   */
+  getTotalDataPoints() {
+    let t = 0;
+    const i = this.getSeries();
+    for (const e of i) {
+      if (!e.isVisible()) continue;
+      const n = e.getData();
+      n.x && (t += n.x.length);
     }
-    i.cycle !== void 0 && (t.fillStyle = s.textSecondaryColor, t.fillText("Cycle:", a, r), t.fillStyle = s.textColor, t.fillText(String(i.cycle), a + 45, r)), t.restore();
+    return t;
   }
-}
-const H = new Ft();
-class It {
-  constructor() {
-    u(this, "id", "minimal");
-    u(this, "name", "Minimal");
-    u(this, "supportedTypes", ["datapoint"]);
-    // Cached measurements
-    u(this, "cachedKey", "");
-    u(this, "cachedMeasurement", null);
+  /**
+   * Determine the effective snap mode based on configuration and data size
+   */
+  getEffectiveSnapMode() {
+    return this.snapMode === "x-only" ? "x-only" : this.snapMode === "nearest" ? "nearest" : this.lastKnownDataSize > this.largeDatasetThreshold ? "x-only" : "nearest";
   }
   /**
-   * Measure tooltip dimensions
+   * Perform tooltip update with hysteresis to prevent jumping.
+   * The tooltip "sticks" to the current point unless the cursor is
+   * significantly closer to a new point.
    */
-  measure(t, i, e) {
-    const n = `${i.seriesId}-${i.dataIndex}-${i.dataX}-${i.dataY}-${e.fontFamily}`;
-    if (n === this.cachedKey && this.cachedMeasurement)
-      return this.cachedMeasurement;
-    t.font = `${e.contentFontSize}px ${e.fontFamily}`;
-    const s = `${k(i, "x")} ▪ ${k(i, "y")}`, o = t.measureText(s).width;
-    return this.cachedMeasurement = {
-      width: o,
-      height: e.contentFontSize * e.lineHeight,
-      padding: {
-        top: 6,
-        right: 8,
-        bottom: 6,
-        left: 8
+  performTooltipUpdateWithHysteresis(t, i) {
+    var s;
+    if (!((s = this.options.dataPoint) != null && s.enabled)) {
+      this.performFallbackTooltipUpdate(t, i);
+      return;
+    }
+    const n = this.getEffectiveSnapMode() === "x-only" ? this.findDataPointByXOnly(t) : this.findNearestDataPointOptimized(t, i);
+    if (!n) {
+      this.performFallbackTooltipUpdate(t, i);
+      return;
+    }
+    if (this.cachedNearestResult && this.hoveredSeriesId !== null) {
+      const o = this.cachedNearestResult, l = o.pixelX - t, h = o.pixelY - i, a = l * l + h * h, r = n.pixelX - t, d = n.pixelY - i;
+      if ((r * r + d * d) * this.hysteresisRatio >= a) {
+        this.updateTooltipPosition(this.cachedNearestResult);
+        return;
       }
-    }, this.cachedKey = n, this.cachedMeasurement;
+    }
+    this.cachedNearestResult = n, this.scheduleShow(n);
   }
   /**
-   * Render the tooltip
+   * Handle heatmap and crosshair tooltip types (fallback)
    */
-  render(t, i, e, n, s) {
-    const { padding: o } = n, l = e.x + o.left, h = e.y + o.top, a = k(i, "x"), r = k(i, "y");
-    t.save(), t.font = `${s.contentFontSize}px ${s.fontFamily}`, t.textAlign = "left", t.textBaseline = "top", t.fillStyle = s.textSecondaryColor, t.fillText(a, l, h);
-    const d = t.measureText(a).width;
-    t.fillStyle = i.seriesColor, t.fillText(" ▪ ", l + d, h);
-    const f = t.measureText(" ▪ ").width;
-    t.fillStyle = s.textColor, t.fillText(r, l + d + f, h), t.restore();
+  performFallbackTooltipUpdate(t, i) {
+    var e, n;
+    if ((e = this.options.heatmap) != null && e.enabled) {
+      const s = this.findHeatmapCell(t, i);
+      if (s) {
+        this.scheduleShow(s);
+        return;
+      }
+    }
+    if ((n = this.options.crosshair) != null && n.enabled) {
+      const s = this.buildCrosshairTooltip(t, i);
+      if (s) {
+        this.scheduleShow(s);
+        return;
+      }
+    }
+    this.cachedNearestResult = null, this.scheduleHide();
   }
-}
-const at = new It(), F = {
-  INDICATOR_MARGIN: 8,
-  MIN_LABEL_WIDTH: 60,
-  LINE_SPACING: 2,
-  SAFETY_BUFFER: 4,
-  HEADER_SPACING: 2,
-  GAP_SPACING: 2
-};
-class zt {
-  constructor() {
-    u(this, "id", "crosshair");
-    u(this, "name", "Multi-Series Crosshair");
-    u(this, "supportedTypes", ["crosshair"]);
-    // Cached measurements
-    u(this, "cachedKey", "");
-    u(this, "cachedMeasurement", null);
-    u(this, "formattedData", null);
+  buildAxisFormat(t) {
+    var o, l;
+    const i = this.getViewBounds(), e = i.xMax - i.xMin, n = (o = this.getXAxisOptions) == null ? void 0 : o.call(this), s = (l = this.getYAxisOptions) == null ? void 0 : l.call(this, t);
+    if (!(!n && !s && !Number.isFinite(e)))
+      return {
+        x: n,
+        y: s,
+        xSpan: Number.isFinite(e) ? e : void 0
+      };
   }
   /**
-   * Generate cache key from data and theme
+   * Find data point by X coordinate only (O(log n) - fastest method)
+   * Best for very large datasets where precision is less important than speed
    */
-  getCacheKey(t, i) {
-    const e = t.interpolatedValues.map((n) => `${n.seriesName}-${n.y}`).join("|");
-    return [
-      t.dataX,
-      e,
-      i.fontFamily,
-      i.titleFontSize,
-      i.contentFontSize,
-      i.showSeriesIndicator,
-      i.seriesIndicatorSize,
-      `${i.padding.top}-${i.padding.right}-${i.padding.bottom}-${i.padding.left}`
-    ].join(":");
+  findDataPointByXOnly(t) {
+    var h, a, r;
+    const i = this.getSeries().filter(
+      (d) => d.isVisible() && d.getType() !== "heatmap"
+    );
+    if (i.length === 0) return null;
+    const e = this.getXScale(), n = this.getYScales(), s = this.pixelToDataX(t);
+    let o = null, l = 1 / 0;
+    for (const d of i) {
+      const f = d.getData();
+      if (!f.x || f.x.length === 0) continue;
+      const p = n.get(((h = d.getYAxisId) == null ? void 0 : h.call(d)) || "default") || n.values().next().value;
+      if (!p) continue;
+      const g = this.binarySearchClosest(f.x, s), y = Math.abs(f.x[g] - s);
+      if (y < l) {
+        l = y;
+        const b = d.getStyle(), x = e.transform(f.x[g]), S = p.transform(f.y[g]);
+        o = {
+          type: "datapoint",
+          seriesId: d.getId(),
+          seriesName: d.getId(),
+          seriesColor: b.color || "#ff0055",
+          dataIndex: g,
+          dataX: f.x[g],
+          dataY: f.y[g],
+          pixelX: x,
+          pixelY: S,
+          cycle: (a = d.getCycle) == null ? void 0 : a.call(d),
+          axisFormat: this.buildAxisFormat((r = d.getYAxisId) == null ? void 0 : r.call(d))
+        };
+        const T = d.getYError(g);
+        T && (o.yError = T);
+      }
+    }
+    return o;
   }
   /**
-   * Format data for rendering
+   * Optimized nearest data point finder
    */
-  formatData(t) {
-    return {
-      header: `⌖ X = ${Ct(t)}`,
-      series: t.interpolatedValues.map((i) => ({
-        name: i.seriesName,
-        value: Pt(i.y, t),
-        color: i.seriesColor,
-        isInterpolated: i.isInterpolated
-      }))
-    };
+  findNearestDataPointOptimized(t, i) {
+    var r, d, f, p;
+    const e = this.getSeries().filter((g) => g.isVisible()), n = ((r = this.options.dataPoint) == null ? void 0 : r.hitRadius) ?? 20, s = this.getXScale(), o = this.getYScales();
+    let l = n * n, h = null;
+    const a = this.pixelToDataX(t);
+    for (const g of e) {
+      if (g.getType() === "heatmap") continue;
+      const y = g.getData(), b = o.get(((d = g.getYAxisId) == null ? void 0 : d.call(g)) || "default") || o.values().next().value;
+      if (!b || !y.x || y.x.length === 0) continue;
+      const x = this.binarySearchClosest(y.x, a), S = y.x.length, T = S > 1e5 ? 2 : S > 1e4 ? 3 : 5, v = Math.max(0, x - T), Y = Math.min(S, x + T + 1);
+      for (let w = v; w < Y; w++) {
+        const C = s.transform(y.x[w]), m = b.transform(y.y[w]), I = C - t, A = m - i, $ = I * I + A * A;
+        if ($ < l) {
+          l = $;
+          const R = g.getStyle();
+          h = {
+            type: "datapoint",
+            seriesId: g.getId(),
+            seriesName: g.getId(),
+            seriesColor: R.color || "#ff0055",
+            dataIndex: w,
+            dataX: y.x[w],
+            dataY: y.y[w],
+            pixelX: C,
+            pixelY: m,
+            cycle: (f = g.getCycle) == null ? void 0 : f.call(g),
+            axisFormat: this.buildAxisFormat((p = g.getYAxisId) == null ? void 0 : p.call(g))
+          };
+          const D = g.getYError(w);
+          D && (h.yError = D);
+        }
+      }
+    }
+    return h;
   }
   /**
-   * Measure tooltip dimensions
+   * Find heatmap cell under cursor
    */
-  measure(t, i, e) {
-    if (!i.interpolatedValues || i.interpolatedValues.length === 0)
+  findHeatmapCell(t, i) {
+    var h, a;
+    const e = this.getSeries().filter(
+      (r) => r.isVisible() && r.getType() === "heatmap"
+    );
+    if (e.length === 0) return null;
+    const n = this.getXScale(), s = this.getYScales(), o = this.pixelToDataX(t), l = this.pixelToDataY(i);
+    for (const r of e) {
+      const d = r.getHeatmapData();
+      if (!d || !d.xValues || !d.yValues || !d.zValues) continue;
+      const f = this.binarySearchClosest(d.xValues, o), p = this.binarySearchClosest(d.yValues, l), g = d.xValues[f], y = d.yValues[p], b = s.get(((h = r.getYAxisId) == null ? void 0 : h.call(r)) || "default") || s.values().next().value;
+      if (!b) continue;
+      const x = n.transform(g), S = b.transform(y), T = d.zValues[p * d.xValues.length + f], v = ((a = r.getHeatmapStyle) == null ? void 0 : a.call(r)) || {};
       return {
-        width: 100,
-        height: e.titleFontSize * e.lineHeight,
-        padding: e.padding
+        type: "heatmap",
+        seriesId: r.getId(),
+        seriesName: r.getId(),
+        xIndex: f,
+        yIndex: p,
+        dataX: g,
+        dataY: y,
+        zValue: T,
+        pixelX: x,
+        pixelY: S,
+        colorScale: v.colorScale
       };
-    const n = this.getCacheKey(i, e);
-    if (n === this.cachedKey && this.cachedMeasurement)
-      return this.cachedMeasurement;
-    this.formattedData = this.formatData(i), t.font = `${e.titleFontWeight} ${e.titleFontSize}px ${e.fontFamily}`;
-    let s = t.measureText(this.formattedData.header).width;
-    t.font = `400 ${e.contentFontSize}px ${e.fontFamily}`;
-    const o = e.showSeriesIndicator ? e.seriesIndicatorSize + F.INDICATOR_MARGIN : 0;
-    for (const r of this.formattedData.series) {
-      const d = t.measureText(`${r.name}:`).width, f = t.measureText(r.value).width, p = o + Math.max(d, F.MIN_LABEL_WIDTH) + f;
-      s = Math.max(s, p);
     }
-    const l = e.titleFontSize * e.lineHeight, a = this.formattedData.series.length * (e.contentFontSize * e.lineHeight + F.LINE_SPACING);
-    return this.cachedMeasurement = {
-      width: s + F.SAFETY_BUFFER,
-      height: l + e.headerGap + a,
-      padding: e.padding
-    }, this.cachedKey = n, this.cachedMeasurement;
+    return null;
   }
   /**
-   * Render the tooltip
+   * Binary search for closest value
    */
-  render(t, i, e, n, s) {
-    if (!i.interpolatedValues || i.interpolatedValues.length === 0)
-      return;
-    const o = this.formattedData || this.formatData(i), { x: l, y: h } = e, { padding: a } = s;
-    let r = h + a.top;
-    const d = l + a.left;
-    t.save(), t.textAlign = "left", t.textBaseline = "top", t.font = `${s.titleFontWeight} ${s.titleFontSize}px ${s.fontFamily}`, t.fillStyle = s.textColor, t.fillText(o.header, d, r), r += s.titleFontSize * s.lineHeight + F.HEADER_SPACING, s.showHeaderSeparator && (t.strokeStyle = s.separatorColor, t.lineWidth = 1, t.globalAlpha = 0.4, t.beginPath(), t.moveTo(d, r + s.headerGap / 2), t.lineTo(d + n.width, r + s.headerGap / 2), t.stroke(), t.globalAlpha = 1), r += s.headerGap + F.GAP_SPACING, t.font = `400 ${s.contentFontSize}px ${s.fontFamily}`;
-    for (const f of o.series) {
-      let p = d;
-      if (s.showSeriesIndicator && s.seriesIndicatorSize > 0) {
-        const b = r + s.contentFontSize / 2, x = s.seriesIndicatorSize / 2;
-        t.save(), t.beginPath(), t.arc(p + x, b, x, 0, Math.PI * 2), f.isInterpolated ? (t.strokeStyle = f.color, t.lineWidth = 1.5, t.stroke()) : (t.fillStyle = f.color, t.fill()), t.restore(), p += s.seriesIndicatorSize + F.INDICATOR_MARGIN;
-      }
-      t.fillStyle = s.textSecondaryColor, t.fillText(`${f.name}:`, p, r);
-      const g = t.measureText(`${f.name}: `).width, y = Math.max(g, F.MIN_LABEL_WIDTH);
-      t.fillStyle = s.textColor, t.fillText(f.value, p + y, r), r += s.contentFontSize * s.lineHeight + F.LINE_SPACING;
+  binarySearchClosest(t, i) {
+    let e = 0, n = t.length - 1;
+    for (; e < n; ) {
+      const s = Math.floor((e + n) / 2);
+      t[s] < i ? e = s + 1 : n = s;
     }
-    t.restore();
-  }
-}
-const G = new zt();
-function P(c) {
-  if (c == null || isNaN(c))
-    return "N/A";
-  const t = Math.abs(c);
-  return t === 0 ? "0" : t < 1e-4 || t >= 1e4 ? c.toExponential(3) : t < 0.01 ? c.toPrecision(4) : t < 1 ? c.toFixed(4) : t < 100 ? c.toFixed(3) : c.toFixed(2);
-}
-class Yt {
-  constructor() {
-    u(this, "id", "heatmap");
-    u(this, "name", "Heatmap Value");
-    u(this, "supportedTypes", ["heatmap"]);
-    // Color swatch dimensions
-    u(this, "swatchSize", 14);
-    u(this, "swatchGap", 8);
-    // Cached measurements
-    u(this, "cachedKey", "");
-    u(this, "cachedMeasurement", null);
+    return e > 0 && Math.abs(t[e - 1] - i) < Math.abs(t[e] - i) ? e - 1 : e;
   }
   /**
-   * Measure tooltip dimensions
+   * Build crosshair tooltip data
    */
-  measure(t, i, e) {
-    const n = `${i.seriesId}-${i.xIndex}-${i.yIndex}-${e.fontFamily}-${e.titleFontSize}`;
-    if (n === this.cachedKey && this.cachedMeasurement)
-      return this.cachedMeasurement;
-    t.font = `${e.titleFontWeight} ${e.titleFontSize}px ${e.fontFamily}`;
-    const s = `Grid [${i.xIndex}, ${i.yIndex}]`;
-    let o = t.measureText(s).width;
-    t.font = `400 ${e.contentFontSize}px ${e.fontFamily}`;
-    const l = `Value: ${P(i.zValue)}`, h = this.swatchSize + this.swatchGap + t.measureText(l).width;
-    if (o = Math.max(o, h), i.colorScale) {
-      const y = `Min: ${P(i.colorScale.min)}  Max: ${P(i.colorScale.max)}`;
-      o = Math.max(o, this.swatchSize + this.swatchGap + t.measureText(y).width);
+  buildCrosshairTooltip(t, i) {
+    var l, h;
+    const e = this.getSeries().filter(
+      (a) => a.isVisible() && a.getType() !== "heatmap"
+    );
+    if (e.length === 0) return null;
+    const n = this.pixelToDataX(t), s = this.getYScales(), o = [];
+    for (const a of e) {
+      const r = a.getData();
+      if (!r.x || r.x.length === 0 || !(s.get(((l = a.getYAxisId) == null ? void 0 : l.call(a)) || "default") || s.values().next().value)) continue;
+      const f = this.binarySearchClosest(r.x, n);
+      let p, g = !1;
+      if (f === 0 || f >= r.x.length - 1 || r.x[f] === n)
+        p = r.y[f];
+      else if ((h = this.options.crosshair) != null && h.interpolate) {
+        const b = r.x[f - 1], x = r.x[f], S = r.y[f - 1], T = r.y[f], v = (n - b) / (x - b);
+        p = S + v * (T - S), g = !0;
+      } else
+        p = r.y[f];
+      const y = a.getStyle();
+      o.push({
+        seriesId: a.getId(),
+        seriesName: a.getId(),
+        seriesColor: y.color || "#ff0055",
+        x: n,
+        y: p,
+        isInterpolated: g
+      });
     }
-    const a = 25, r = a + t.measureText(P(i.dataX)).width, d = a + t.measureText(P(i.dataY)).width;
-    o = Math.max(o, r, d);
-    const f = e.titleFontSize * e.lineHeight, g = (i.colorScale ? 4 : 3) * e.contentFontSize * e.lineHeight;
-    return this.cachedMeasurement = {
-      width: o + 4,
-      // Small buffer
-      height: f + e.headerGap + g + e.itemGap,
-      padding: e.padding
-    }, this.cachedKey = n, this.cachedMeasurement;
+    return o.length === 0 ? null : {
+      type: "crosshair",
+      cursorX: t,
+      cursorY: i,
+      dataX: n,
+      interpolatedValues: o,
+      axisFormat: this.buildAxisFormat()
+    };
   }
   /**
-   * Render the tooltip
+   * Schedule showing a tooltip
    */
-  render(t, i, e, n, s) {
-    const { x: o, y: l } = e, { padding: h } = s;
-    let a = l + h.top;
-    const r = o + h.left;
-    t.save(), t.textAlign = "left", t.textBaseline = "top", t.font = `${s.titleFontWeight} ${s.titleFontSize}px ${s.fontFamily}`, t.fillStyle = s.textColor;
-    const d = `Grid [${i.xIndex}, ${i.yIndex}]`;
-    t.fillText(d, r, a), a += s.titleFontSize * s.lineHeight + 2, s.showHeaderSeparator && (t.strokeStyle = s.separatorColor, t.lineWidth = 1, t.globalAlpha = 0.4, t.beginPath(), t.moveTo(r, a + s.headerGap / 2), t.lineTo(r + n.width, a + s.headerGap / 2), t.stroke(), t.globalAlpha = 1), a += s.headerGap + 2, t.font = `400 ${s.contentFontSize}px ${s.fontFamily}`;
-    const f = a + (s.contentFontSize * s.lineHeight - this.swatchSize) / 2;
-    t.fillStyle = i.mappedColor || s.textColor, t.fillRect(r, f, this.swatchSize, this.swatchSize), t.strokeStyle = s.separatorColor, t.lineWidth = 1, t.strokeRect(r, f, this.swatchSize, this.swatchSize), t.fillStyle = s.textSecondaryColor, t.fillText("Value:", r + this.swatchSize + this.swatchGap, a), t.fillStyle = s.textColor;
-    const p = t.measureText("Value: ").width;
-    if (t.fillText(P(i.zValue), r + this.swatchSize + this.swatchGap + p, a), a += s.contentFontSize * s.lineHeight, i.colorScale) {
-      t.fillStyle = s.textSecondaryColor, t.font = `400 ${s.contentFontSize - 1}px ${s.fontFamily}`;
-      const g = `Min: ${P(i.colorScale.min)}  Max: ${P(i.colorScale.max)}`;
-      t.fillText(g, r + this.swatchSize + this.swatchGap, a), a += s.contentFontSize * s.lineHeight;
+  scheduleShow(t) {
+    if (this.clearHideTimeout(), t.type === "datapoint") {
+      const e = t;
+      if (this.hoveredSeriesId === e.seriesId && this.hoveredDataIndex === e.dataIndex) {
+        this.updateTooltipPosition(t);
+        return;
+      }
+      this.hoveredSeriesId = e.seriesId, this.hoveredDataIndex = e.dataIndex;
     }
-    a += s.itemGap + 2, t.font = `400 ${s.contentFontSize}px ${s.fontFamily}`, t.fillStyle = s.textSecondaryColor, t.fillText("X:", r, a), t.fillStyle = s.textColor, t.fillText(P(i.dataX), r + 25, a), a += s.contentFontSize * s.lineHeight + 2, t.fillStyle = s.textSecondaryColor, t.fillText("Y:", r, a), t.fillStyle = s.textColor, t.fillText(P(i.dataY), r + 25, a), t.restore();
-  }
-}
-const _ = new Yt();
-function Q(c) {
-  var t, i;
-  return ((i = (t = c.axisFormat) == null ? void 0 : t.x) == null ? void 0 : i.type) === "time" ? ot(c) : E(c.dataX);
-}
-function Z(c) {
-  var t, i;
-  return ((i = (t = c.axisFormat) == null ? void 0 : t.y) == null ? void 0 : i.scientific) === !1 ? nt(c) : E(c.dataY);
-}
-function E(c, t = 3) {
-  if (c == null || isNaN(c))
-    return "N/A";
-  if (c === 0) return "0";
-  const i = Math.floor(Math.log10(Math.abs(c))), e = c / Math.pow(10, i);
-  if (Math.abs(i) <= 2)
-    return c.toPrecision(t);
-  const n = {
-    0: "⁰",
-    1: "¹",
-    2: "²",
-    3: "³",
-    4: "⁴",
-    5: "⁵",
-    6: "⁶",
-    7: "⁷",
-    8: "⁸",
-    9: "⁹",
-    "-": "⁻",
-    "+": "⁺"
-  }, s = i.toString();
-  let o = "";
-  for (const l of s)
-    o += n[l] || l;
-  return `${e.toFixed(t - 1)} × 10${o}`;
-}
-class At {
-  constructor() {
-    u(this, "id", "scientific");
-    u(this, "name", "Scientific Notation");
-    u(this, "supportedTypes", ["datapoint"]);
-    // Cached measurements
-    u(this, "cachedKey", "");
-    u(this, "cachedMeasurement", null);
+    this.clearShowTimeout();
+    const i = this.activeTooltips.size > 0 ? 0 : this.options.showDelay;
+    i > 0 ? this.showTimeoutId = window.setTimeout(() => {
+      this.showTooltip(t);
+    }, i) : this.showTooltip(t);
   }
   /**
-   * Measure tooltip dimensions
+   * Schedule hiding tooltips
    */
-  measure(t, i, e) {
-    const n = `${i.seriesId}-${i.dataIndex}-${i.dataX}-${i.dataY}-${e.fontFamily}-${e.titleFontSize}`;
-    if (n === this.cachedKey && this.cachedMeasurement)
-      return this.cachedMeasurement;
-    t.font = `${e.titleFontWeight} ${e.titleFontSize}px ${e.fontFamily}`;
-    const s = t.measureText(i.seriesName).width + (e.showSeriesIndicator ? e.seriesIndicatorSize + 8 : 0);
-    t.font = `400 ${e.contentFontSize}px ${e.fontFamily}`;
-    const o = 28, l = Q(i);
-    let h = Math.max(s, o + t.measureText(l).width);
-    const a = Z(i);
-    let r = o + t.measureText(a).width;
-    i.yError && (r += t.measureText(` ± ${E(i.yError[0])}`).width), h = Math.max(h, r);
-    let d = `Index: ${i.dataIndex}`;
-    i.cycle !== void 0 && (d += `  │  Cycle: ${i.cycle}`), h = Math.max(h, t.measureText(d).width);
-    let f = 3;
-    (i.cycle !== void 0 || i.yError) && (f += 1);
-    const p = e.titleFontSize * e.lineHeight + e.headerGap, g = (f - 1) * e.contentFontSize * e.lineHeight, y = i.cycle !== void 0 ? e.itemGap : 0;
-    return this.cachedMeasurement = {
-      width: h,
-      height: p + g + y,
-      padding: e.padding
-    }, this.cachedKey = n, this.cachedMeasurement;
+  scheduleHide() {
+    this.clearShowTimeout(), this.hoveredSeriesId = null, this.hoveredDataIndex = null, this.options.hideDelay > 0 ? this.hideTimeoutId = window.setTimeout(() => {
+      this.hideAll();
+    }, this.options.hideDelay) : this.hideAll();
+  }
+  clearShowTimeout() {
+    this.showTimeoutId !== null && (clearTimeout(this.showTimeoutId), this.showTimeoutId = null);
+  }
+  clearHideTimeout() {
+    this.hideTimeoutId !== null && (clearTimeout(this.hideTimeoutId), this.hideTimeoutId = null);
   }
   /**
-   * Render the tooltip
+   * Show a tooltip with the given data
    */
-  render(t, i, e, n, s) {
-    const { x: o, y: l } = e, { padding: h } = s;
-    let a = l + h.top, r = o + h.left;
-    if (t.save(), t.textAlign = "left", t.textBaseline = "top", s.showSeriesIndicator) {
-      const p = a + s.titleFontSize / 2;
-      t.fillStyle = i.seriesColor, t.beginPath(), t.arc(r + s.seriesIndicatorSize / 2, p, s.seriesIndicatorSize / 2, 0, Math.PI * 2), t.fill(), r += s.seriesIndicatorSize + 8;
-    }
-    t.font = `${s.titleFontWeight} ${s.titleFontSize}px ${s.fontFamily}`, t.fillStyle = s.textColor, t.fillText(i.seriesName, r, a), a += s.titleFontSize * s.lineHeight + 2, r = o + h.left, s.showHeaderSeparator && (t.strokeStyle = s.separatorColor, t.lineWidth = 1, t.globalAlpha = 0.4, t.beginPath(), t.moveTo(r, a + s.headerGap / 2), t.lineTo(r + n.width, a + s.headerGap / 2), t.stroke(), t.globalAlpha = 1), a += s.headerGap + 2, t.font = `400 ${s.contentFontSize}px ${s.fontFamily}`;
-    const d = 28;
-    t.fillStyle = s.textSecondaryColor, t.fillText("X:", r, a), t.fillStyle = s.textColor, t.fillText(Q(i), r + d, a), a += s.contentFontSize * s.lineHeight + 2, t.fillStyle = s.textSecondaryColor, t.fillText("Y:", r, a), t.fillStyle = s.textColor;
-    let f = Z(i);
-    if (t.fillText(f, r + d, a), i.yError) {
-      const p = t.measureText(f).width;
-      t.fillStyle = s.textSecondaryColor, t.fillText(` ± ${E(i.yError[0])}`, r + d + p, a);
-    }
-    if (a += s.contentFontSize * s.lineHeight + 2, i.cycle !== void 0) {
-      a += s.itemGap, t.strokeStyle = s.separatorColor, t.globalAlpha = 0.3, t.beginPath(), t.moveTo(r, a - s.itemGap / 2), t.lineTo(r + n.width, a - s.itemGap / 2), t.stroke(), t.globalAlpha = 1, t.fillStyle = s.textSecondaryColor, t.font = `400 ${s.contentFontSize - 1}px ${s.fontFamily}`;
-      let p = `Index: ${i.dataIndex}`;
-      i.cycle !== void 0 && (p += `  │  Cycle: ${i.cycle}`), t.fillText(p, r, a);
-    }
-    t.restore();
-  }
-}
-const lt = new At();
-function X(c) {
-  if (c == null || isNaN(c))
-    return "N/A";
-  const t = Math.abs(c);
-  return t === 0 ? "0" : t < 1e-4 || t >= 1e4 ? c.toExponential(2) : t < 1 ? c.toFixed(4) : c.toFixed(2);
-}
-class Xt {
-  constructor() {
-    u(this, "id", "annotation");
-    u(this, "name", "Annotation Info");
-    u(this, "supportedTypes", ["annotation"]);
-    // Cache
-    u(this, "cachedKey", "");
-    u(this, "cachedMeasurement", null);
+  showTooltip(t) {
+    const i = this.getTemplateIdForType(t.type), e = this.templates.get(i) || tt(t.type), n = t.pixelX ?? this.lastCursorX ?? 0, s = t.pixelY ?? this.lastCursorY ?? 0, o = e.measure(this.ctx, t, this.theme), l = this.positioner.calculatePosition(
+      n,
+      s,
+      o
+    ), h = "main";
+    this.activeTooltips.set(h, {
+      id: h,
+      data: t,
+      position: l,
+      template: e
+    });
   }
   /**
-   * Measure tooltip dimensions
+   * Update tooltip position
    */
-  measure(t, i, e) {
-    const n = `${i.annotationId}-${i.label}-${e.fontFamily}-${e.titleFontSize}`;
-    if (n === this.cachedKey && this.cachedMeasurement)
-      return this.cachedMeasurement;
-    t.font = `${e.titleFontWeight} ${e.titleFontSize}px ${e.fontFamily}`;
-    const s = i.label || `Annotation: ${i.annotationType}`;
-    let o = t.measureText(s).width;
-    t.font = `400 ${e.contentFontSize}px ${e.fontFamily}`;
-    let l = 0;
-    const h = 50;
-    if (i.value !== void 0) {
-      const r = X(i.value);
-      o = Math.max(o, h + t.measureText(r).width), l += e.contentFontSize * e.lineHeight;
-    }
-    if (i.valueX !== void 0 && i.valueY !== void 0) {
-      const r = X(i.valueX), d = X(i.valueY);
-      o = Math.max(o, h + t.measureText(r).width, h + t.measureText(d).width), l += e.contentFontSize * e.lineHeight * 2;
-    }
-    const a = e.titleFontSize * e.lineHeight + e.headerGap;
-    return this.cachedMeasurement = {
-      width: o + 10,
-      height: a + l + 4,
-      padding: e.padding
-    }, this.cachedKey = n, this.cachedMeasurement;
+  updateTooltipPosition(t) {
+    const i = this.activeTooltips.get("main");
+    if (!i) return;
+    const e = t || i.data, n = e.pixelX ?? this.lastCursorX ?? 0, s = e.pixelY ?? this.lastCursorY ?? 0, o = i.template.measure(
+      this.ctx,
+      e,
+      this.theme
+    );
+    i.position = this.positioner.calculatePosition(
+      n,
+      s,
+      o
+    ), i.data = e;
   }
   /**
-   * Render the tooltip
+   * Get template ID for a tooltip type
    */
-  render(t, i, e, n, s) {
-    const { x: o, y: l } = e, { padding: h } = s;
-    let a = l + h.top;
-    const r = o + h.left;
-    t.save(), t.textAlign = "left", t.textBaseline = "top", t.font = `${s.titleFontWeight} ${s.titleFontSize}px ${s.fontFamily}`, t.fillStyle = s.textColor;
-    const d = i.label || `${i.annotationType.toUpperCase()}`;
-    t.fillText(d, r, a), a += s.titleFontSize * s.lineHeight + 2, s.showHeaderSeparator && (t.strokeStyle = s.separatorColor, t.globalAlpha = 0.4, t.beginPath(), t.moveTo(r, a + s.headerGap / 2), t.lineTo(r + n.width, a + s.headerGap / 2), t.stroke(), t.globalAlpha = 1), a += s.headerGap + 2, t.font = `400 ${s.contentFontSize}px ${s.fontFamily}`;
-    const f = 50;
-    i.value !== void 0 && (t.fillStyle = s.textSecondaryColor, t.fillText("Value:", r, a), t.fillStyle = s.textColor, t.fillText(X(i.value), r + f, a), a += s.contentFontSize * s.lineHeight), i.valueX !== void 0 && i.valueY !== void 0 && (t.fillStyle = s.textSecondaryColor, t.fillText("X:", r, a), t.fillStyle = s.textColor, t.fillText(X(i.valueX), r + f, a), a += s.contentFontSize * s.lineHeight, t.fillStyle = s.textSecondaryColor, t.fillText("Y:", r, a), t.fillStyle = s.textColor, t.fillText(X(i.valueY), r + f, a)), t.restore();
-  }
-}
-const K = new Xt();
-function M(c) {
-  if (c == null || isNaN(c))
-    return "N/A";
-  const t = Math.abs(c);
-  return t === 0 ? "0" : t < 1e-4 || t >= 1e4 ? c.toExponential(3) : t < 1 ? c.toFixed(4) : c.toFixed(3);
-}
-class $t {
-  constructor() {
-    u(this, "id", "range");
-    u(this, "name", "Range Statistics");
-    u(this, "supportedTypes", ["range"]);
-    // Cache
-    u(this, "cachedKey", "");
-    u(this, "cachedMeasurement", null);
+  getTemplateIdForType(t) {
+    var i, e, n;
+    switch (t) {
+      case "datapoint":
+        return ((i = this.options.dataPoint) == null ? void 0 : i.templateId) || "default";
+      case "crosshair":
+        return ((e = this.options.crosshair) == null ? void 0 : e.templateId) || "crosshair";
+      case "heatmap":
+        return ((n = this.options.heatmap) == null ? void 0 : n.templateId) || "heatmap";
+      default:
+        return "default";
+    }
   }
   /**
-   * Measure tooltip dimensions
+   * Show a tooltip programmatically
    */
-  measure(t, i, e) {
-    const n = i.statistics, s = `${i.xMin}-${i.xMax}-${n.count}-${n.mean}-${e.fontFamily}`;
-    if (s === this.cachedKey && this.cachedMeasurement)
-      return this.cachedMeasurement;
-    t.font = `${e.titleFontWeight} ${e.titleFontSize}px ${e.fontFamily}`;
-    let l = t.measureText("Range Statistics").width;
-    t.font = `400 ${e.contentFontSize}px ${e.fontFamily}`;
-    let h = e.contentFontSize * e.lineHeight * 2;
-    const a = [
-      `Range: ${M(i.xMin)} to ${M(i.xMax)}`,
-      `Count: ${n.count}`
-    ];
-    n.min !== void 0 && a.push(`Min: ${M(n.min)}`), n.max !== void 0 && a.push(`Max: ${M(n.max)}`), n.mean !== void 0 && a.push(`Mean: ${M(n.mean)}`), n.area !== void 0 && a.push(`Area: ${M(n.area)}`);
-    for (const d of a)
-      l = Math.max(l, t.measureText(d).width + 10);
-    h = a.length * e.contentFontSize * e.lineHeight;
-    const r = e.titleFontSize * e.lineHeight + e.headerGap;
-    return this.cachedMeasurement = {
-      width: Math.max(l, 140),
-      height: r + h + 10,
-      padding: e.padding
-    }, this.cachedKey = s, this.cachedMeasurement;
+  show(t, i) {
+    const e = `tooltip-${++this.tooltipIdCounter}`, n = (i == null ? void 0 : i.templateId) || this.getTemplateIdForType(t.type), s = this.templates.get(n) || tt(t.type);
+    let o;
+    if (i != null && i.position) {
+      const l = s.measure(this.ctx, t, this.theme);
+      o = this.positioner.calculatePosition(
+        i.position.x,
+        i.position.y,
+        l
+      );
+    } else {
+      const l = t.pixelX ?? 0, h = t.pixelY ?? 0, a = s.measure(this.ctx, t, this.theme);
+      o = this.positioner.calculatePosition(
+        l,
+        h,
+        a
+      );
+    }
+    return this.activeTooltips.set(e, {
+      id: e,
+      data: t,
+      position: o,
+      template: s
+    }), i != null && i.duration && i.duration > 0 && setTimeout(() => this.hide(e), i.duration), e;
   }
   /**
-   * Render the tooltip
+   * Hide a specific tooltip
    */
-  render(t, i, e, n, s) {
-    const { x: o, y: l } = e, { padding: h } = s, a = i.statistics;
-    let r = l + h.top;
-    const d = o + h.left;
-    t.save(), t.textAlign = "left", t.textBaseline = "top", t.font = `${s.titleFontWeight} ${s.titleFontSize}px ${s.fontFamily}`, t.fillStyle = s.textColor, t.fillText("Range Statistics", d, r), r += s.titleFontSize * s.lineHeight + 2, s.showHeaderSeparator && (t.strokeStyle = s.separatorColor, t.globalAlpha = 0.4, t.beginPath(), t.moveTo(d, r + s.headerGap / 2), t.lineTo(d + n.width, r + s.headerGap / 2), t.stroke(), t.globalAlpha = 1), r += s.headerGap + 2, t.font = `400 ${s.contentFontSize}px ${s.fontFamily}`;
-    const f = 60, p = (g, y) => {
-      t.fillStyle = s.textSecondaryColor, t.fillText(g, d, r), t.fillStyle = s.textColor, t.fillText(String(y), d + f, r), r += s.contentFontSize * s.lineHeight;
-    };
-    p("Points:", a.count), a.min !== void 0 && p("Min:", M(a.min)), a.max !== void 0 && p("Max:", M(a.max)), a.mean !== void 0 && p("Mean:", M(a.mean)), a.stdDev !== void 0 && p("StdDev:", M(a.stdDev)), a.area !== void 0 && p("Area:", M(a.area)), a.peakX !== void 0 && (r += 4, t.fillStyle = s.textSecondaryColor, t.font = `italic ${s.contentFontSize - 1}px ${s.fontFamily}`, t.fillText(`Peak: ${M(a.peakY ?? 0)} at X=${M(a.peakX)}`, d, r)), t.restore();
+  hide(t) {
+    this.activeTooltips.delete(t);
   }
-}
-const U = new $t(), Dt = [
-  H,
-  at,
-  G,
-  _,
-  lt,
-  K,
-  U
-];
-function Bt(c) {
-  return Dt.find((t) => t.id === c);
-}
-function tt(c) {
-  switch (c) {
-    case "datapoint":
-      return H;
-    case "crosshair":
-      return G;
-    case "heatmap":
-      return _;
-    case "annotation":
-      return K;
-    case "range":
-      return U;
-    default:
-      return H;
+  /**
+   * Hide all tooltips immediately
+   */
+  hideAll() {
+    this.activeTooltips.clear(), this.hoveredSeriesId = null, this.hoveredDataIndex = null;
   }
-}
-class kt {
-  constructor(t) {
-    u(this, "ctx");
-    u(this, "getPlotArea");
-    u(this, "getSeries");
-    u(this, "pixelToDataX");
-    u(this, "pixelToDataY");
-    u(this, "getXScale");
-    u(this, "getYScales");
-    u(this, "getViewBounds");
-    u(this, "getXAxisOptions");
-    u(this, "getYAxisOptions");
-    u(this, "options");
-    u(this, "theme");
-    u(this, "positioner");
-    u(this, "renderer");
-    u(this, "templates", /* @__PURE__ */ new Map());
-    u(this, "events", new ut());
-    u(this, "activeTooltips", /* @__PURE__ */ new Map());
-    u(this, "tooltipIdCounter", 0);
-    u(this, "showTimeoutId", null);
-    u(this, "hideTimeoutId", null);
-    u(this, "lastCursorX", null);
-    u(this, "lastCursorY", null);
-    u(this, "hoveredSeriesId", null);
-    u(this, "hoveredDataIndex", null);
-    u(this, "cachedNearestResult", null);
-    // Large dataset optimizations
-    u(this, "snapMode", "auto");
-    u(this, "largeDatasetThreshold", 5e4);
-    u(this, "lastKnownDataSize", 0);
-    // Hysteresis factor: new point must be this much closer to switch (2 = 2x closer)
-    u(this, "hysteresisRatio", 2);
-    // Suspended state - used during drag operations to hide tooltip
-    u(this, "suspended", !1);
-    var i;
-    this.ctx = t.overlayCtx, this.getPlotArea = t.getPlotArea, this.getSeries = t.getSeries, this.pixelToDataX = t.pixelToDataX, this.pixelToDataY = t.pixelToDataY, this.getXScale = t.getXScale, this.getYScales = t.getYScales, this.getViewBounds = t.getViewBounds, this.getXAxisOptions = t.getXAxisOptions, this.getYAxisOptions = t.getYAxisOptions, this.options = {
-      enabled: !0,
-      showDelay: 50,
-      hideDelay: 100,
-      followCursor: !1,
-      offset: { x: 12, y: 12 },
-      dataPoint: {
-        enabled: !0,
-        templateId: "default",
-        snapToPoint: !0,
-        hitRadius: 20
-      },
-      crosshair: {
-        enabled: !1,
-        templateId: "crosshair",
-        interpolate: !0,
-        visibleSeriesOnly: !0
-      },
-      range: {
-        enabled: !1,
-        templateId: "default",
-        calculateStats: !0
-      },
-      annotation: {
-        enabled: !0,
-        templateId: "default"
-      },
-      heatmap: {
-        enabled: !0,
-        templateId: "heatmap",
-        showColorInfo: !0
-      },
-      positioning: "auto",
-      preferredPosition: "auto",
-      constrainToPlotArea: !0,
-      constrainToContainer: !0,
-      autoFlip: !0
-    }, this.theme = (i = t.options) != null && i.theme ? typeof t.options.theme == "string" ? B(t.options.theme) : mt(Tt, t.options.theme) : B(t.chartTheme.name), this.positioner = new Mt({
-      offset: this.options.offset,
-      preferredPosition: this.options.preferredPosition,
-      constrainToPlotArea: this.options.constrainToPlotArea,
-      constrainToContainer: this.options.constrainToContainer,
-      autoFlip: this.options.autoFlip,
-      showArrow: this.theme.showArrow,
-      arrowSize: this.theme.arrowSize
-    }), this.renderer = new vt(this.ctx, this.theme), this.registerBuiltinTemplates(), t.options && this.configure(t.options);
+  /**
+   * Render all active tooltips
+   */
+  render() {
+    if (!(!this.options.enabled || this.activeTooltips.size === 0))
+      for (const t of this.activeTooltips.values())
+        this.renderer.render(t.data, t.position, t.template);
   }
   /**
-   * Register built-in templates
+   * Check if any tooltip is currently visible
    */
-  registerBuiltinTemplates() {
-    this.templates.set(
-      "default",
-      H
-    ), this.templates.set(
-      "minimal",
-      at
-    ), this.templates.set(
-      "crosshair",
-      G
-    ), this.templates.set(
-      "heatmap",
-      _
-    ), this.templates.set(
-      "scientific",
-      lt
-    ), this.templates.set(
-      "annotation",
-      K
-    ), this.templates.set(
-      "range",
-      U
-    );
+  hasActiveTooltip() {
+    return this.activeTooltips.size > 0;
   }
   /**
-   * Configure tooltip options
+   * Subscribe to tooltip events
    */
-  configure(t) {
-    t.enabled !== void 0 && (this.options.enabled = t.enabled), t.showDelay !== void 0 && (this.options.showDelay = t.showDelay), t.hideDelay !== void 0 && (this.options.hideDelay = t.hideDelay), t.followCursor !== void 0 && (this.options.followCursor = t.followCursor), t.offset && (this.options.offset = { ...this.options.offset, ...t.offset }), t.dataPoint && (this.options.dataPoint = {
-      ...this.options.dataPoint,
-      ...t.dataPoint
-    }), t.crosshair && (this.options.crosshair = {
-      ...this.options.crosshair,
-      ...t.crosshair
-    }), t.heatmap && (this.options.heatmap = { ...this.options.heatmap, ...t.heatmap }), t.preferredPosition && (this.options.preferredPosition = t.preferredPosition), t.constrainToPlotArea !== void 0 && (this.options.constrainToPlotArea = t.constrainToPlotArea), t.constrainToContainer !== void 0 && (this.options.constrainToContainer = t.constrainToContainer), t.autoFlip !== void 0 && (this.options.autoFlip = t.autoFlip), t.snapMode !== void 0 && (this.snapMode = t.snapMode), t.largeDatasetThreshold !== void 0 && (this.largeDatasetThreshold = Math.max(
-      1e3,
-      t.largeDatasetThreshold
-    )), this.positioner.configure({
-      offset: this.options.offset,
-      preferredPosition: this.options.preferredPosition,
-      constrainToPlotArea: this.options.constrainToPlotArea,
-      constrainToContainer: this.options.constrainToContainer,
-      autoFlip: this.options.autoFlip
-    });
+  on(t, i) {
+    this.events.on(t, i);
   }
   /**
-   * Get current options
+   * Unsubscribe from tooltip events
    */
-  getOptions() {
-    return { ...this.options };
+  off(t, i) {
+    this.events.off(t, i);
   }
   /**
-   * Enable/disable tooltips
+   * Destroy the tooltip manager
    */
-  setEnabled(t) {
-    this.options.enabled = t, t || this.hideAll();
+  destroy() {
+    this.clearShowTimeout(), this.clearHideTimeout(), this.activeTooltips.clear(), this.templates.clear(), this.events.clear();
+  }
+}
+class Bt {
+  constructor(t, i) {
+    u(this, "ctx");
+    u(this, "options");
+    u(this, "state", {
+      enabled: !1,
+      selectionState: "idle",
+      point1: null,
+      point2: null,
+      hoveredPoint: null,
+      lastMeasurement: null
+    });
+    u(this, "overlayCanvas", null);
+    u(this, "overlayCtx", null);
+    // Label dragging
+    u(this, "labelOffset", { x: 15, y: 0 });
+    u(this, "isDraggingLabel", !1);
+    u(this, "labelBounds", null);
+    u(this, "dragStart", { x: 0, y: 0 });
+    u(this, "crosshairPosition", null);
+    // Bound handlers
+    u(this, "boundMouseMove");
+    u(this, "boundClick");
+    u(this, "boundKeyDown");
+    u(this, "boundMouseDown");
+    u(this, "boundMouseUp");
+    u(this, "boundResize");
+    this.ctx = t, this.options = {
+      lineColor: "#ff6b6b",
+      lineWidth: 2,
+      showLabels: !0,
+      labelFontSize: 12,
+      labelBackground: "rgba(0, 0, 0, 0.85)",
+      labelColor: "#ffffff",
+      showDelta: !0,
+      precision: 4,
+      showSlope: !0,
+      showDistance: !0,
+      className: "velo-plot-delta-tool",
+      highlightSize: 12,
+      highlightColor: "#00f2ff",
+      snapRadius: 30,
+      ...i
+    }, this.boundMouseMove = this.handleMouseMove.bind(this), this.boundClick = this.handleClick.bind(this), this.boundKeyDown = this.handleKeyDown.bind(this), this.boundMouseDown = this.handleLabelMouseDown.bind(this), this.boundMouseUp = this.handleLabelMouseUp.bind(this), this.boundResize = this.resizeOverlay.bind(this);
   }
   /**
-   * Check if tooltips are enabled
+   * Enable the delta measurement tool
    */
-  isEnabled() {
-    return this.options.enabled;
+  enable() {
+    this.state.enabled || (this.state.enabled = !0, this.state.selectionState = "idle", this.createOverlay(), this.attachListeners(), this.ctx.container.style.cursor = "crosshair");
   }
   /**
-   * Suspend tooltip display (used during drag operations)
-   * When suspended, tooltips are immediately hidden and cursor movements are ignored
+   * Disable the delta measurement tool
    */
-  setSuspended(t) {
-    this.suspended = t, t && this.hideAll();
+  disable() {
+    this.state.enabled && (this.state.enabled = !1, this.state.selectionState = "idle", this.state.point1 = null, this.state.point2 = null, this.state.hoveredPoint = null, this.detachListeners(), this.destroyOverlay(), this.ctx.container.style.cursor = "");
   }
   /**
-   * Check if tooltips are suspended
+   * Toggle the tool on/off
    */
-  isSuspended() {
-    return this.suspended;
+  toggle() {
+    this.state.enabled ? this.disable() : this.enable();
   }
   /**
-   * Set tooltip theme
+   * Check if tool is enabled
    */
-  setTheme(t) {
-    this.theme = typeof t == "string" ? B(t) : t, this.renderer.setTheme(this.theme), this.positioner.configure({
-      showArrow: this.theme.showArrow,
-      arrowSize: this.theme.arrowSize
-    });
+  isEnabled() {
+    return this.state.enabled;
   }
   /**
-   * Update theme based on chart theme
+   * Get the current state
    */
-  updateChartTheme(t) {
-    this.options.theme || (this.theme = B(t.name), this.renderer.setTheme(this.theme));
+  getState() {
+    return { ...this.state };
   }
   /**
-   * Get current theme
+   * Get the last completed measurement
    */
-  getTheme() {
-    return this.theme;
+  getMeasurement() {
+    return this.state.lastMeasurement;
   }
   /**
-   * Register a custom template
+   * Clear the current measurement
    */
-  registerTemplate(t) {
-    this.templates.set(t.id, t);
+  clear() {
+    this.state.point1 = null, this.state.point2 = null, this.state.selectionState = "idle", this.state.lastMeasurement = null, this.labelBounds = null, this.labelOffset = { x: 15, y: 0 }, this.renderOverlay();
   }
   /**
-   * Get a template by ID
+   * Destroy the tool and cleanup
    */
-  getTemplate(t) {
-    return this.templates.get(t) || Bt(t);
+  destroy() {
+    this.disable(), this.state.lastMeasurement = null;
   }
   /**
-   * Handle cursor movement - main entry point for hover detection
-   * Optimized with hysteresis to prevent jumping between nearby points
+   * Recalculate measurements (useful if data changes)
    */
-  handleCursorMove(t, i) {
-    if (!this.options.enabled || this.suspended) return;
-    this.lastCursorX = t, this.lastCursorY = i;
-    const e = this.getPlotArea();
-    if (!(t >= e.x && t <= e.x + e.width && i >= e.y && i <= e.y + e.height)) {
-      this.cachedNearestResult = null, this.scheduleHide();
+  recalculate() {
+    if (!this.state.point1 || !this.state.point2) return;
+    const t = this.ctx.getSeries ? this.ctx.getSeries() : [], i = (s) => {
+      const o = t.find((l) => l.id === s.seriesId);
+      if (o && s.index < o.x.length) {
+        s.x = o.x[s.index], s.y = o.y[s.index], s.yAxisId = o.yAxisId;
+        const l = this.ctx.getPlotArea(), h = this.ctx.getViewBounds(), a = this.ctx.getYBounds ? this.ctx.getYBounds(o.yAxisId) : { yMin: h.yMin, yMax: h.yMax };
+        return s.pixelX = l.x + (s.x - h.xMin) / (h.xMax - h.xMin) * l.width, s.pixelY = l.y + (1 - (s.y - a.yMin) / (a.yMax - a.yMin)) * l.height, !0;
+      }
+      return !1;
+    }, e = i(this.state.point1), n = i(this.state.point2);
+    e && n ? (this.state.lastMeasurement = this.calculateMeasurement(), this.ctx.onMeasure && this.ctx.onMeasure(this.state.lastMeasurement)) : this.clear(), this.renderOverlay();
+  }
+  // ============================================
+  // Private Methods
+  // ============================================
+  createOverlay() {
+    this.overlayCanvas || (this.overlayCanvas = document.createElement("canvas"), this.overlayCanvas.className = this.options.className, this.overlayCanvas.style.cssText = `
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      z-index: 1000;
+    `, this.resizeOverlay(), this.overlayCtx = this.overlayCanvas.getContext("2d"), this.ctx.container.appendChild(this.overlayCanvas));
+  }
+  resizeOverlay() {
+    if (!this.overlayCanvas) return;
+    const t = this.ctx.container.getBoundingClientRect(), i = window.devicePixelRatio || 1;
+    this.overlayCanvas.width = t.width * i, this.overlayCanvas.height = t.height * i, this.overlayCtx && (this.overlayCtx.setTransform(1, 0, 0, 1, 0, 0), this.overlayCtx.scale(i, i));
+  }
+  destroyOverlay() {
+    this.overlayCanvas && this.overlayCanvas.parentNode && this.overlayCanvas.parentNode.removeChild(this.overlayCanvas), this.overlayCanvas = null, this.overlayCtx = null;
+  }
+  attachListeners() {
+    this.ctx.container.addEventListener("mousemove", this.boundMouseMove, !0), this.ctx.container.addEventListener("mousedown", this.boundClick, !0), this.ctx.container.addEventListener("mousedown", this.boundMouseDown, !0), this.ctx.container.addEventListener("mouseup", this.boundMouseUp, !0), window.addEventListener("resize", this.boundResize), document.addEventListener("keydown", this.boundKeyDown);
+  }
+  detachListeners() {
+    this.ctx.container.removeEventListener("mousemove", this.boundMouseMove, !0), this.ctx.container.removeEventListener("mousedown", this.boundClick, !0), this.ctx.container.removeEventListener("mousedown", this.boundMouseDown, !0), this.ctx.container.removeEventListener("mouseup", this.boundMouseUp, !0), window.removeEventListener("resize", this.boundResize), document.removeEventListener("keydown", this.boundKeyDown);
+  }
+  handleMouseMove(t) {
+    if (!this.state.enabled) return;
+    const i = this.ctx.container.getBoundingClientRect(), e = this.ctx.getPlotArea(), n = this.ctx.getViewBounds(), s = t.clientX - i.left, o = t.clientY - i.top;
+    if (this.isDraggingLabel) {
+      this.labelOffset.x += s - this.dragStart.x, this.labelOffset.y += o - this.dragStart.y, this.dragStart = { x: s, y: o }, this.renderOverlay();
       return;
     }
-    this.positioner.setContainerSize(
-      this.ctx.canvas.width / (window.devicePixelRatio || 1),
-      this.ctx.canvas.height / (window.devicePixelRatio || 1)
-    ), this.positioner.setPlotArea(e), this.lastKnownDataSize = this.getTotalDataPoints(), this.performTooltipUpdateWithHysteresis(t, i);
+    if (this.labelBounds && s >= this.labelBounds.x && s <= this.labelBounds.x + this.labelBounds.width && o >= this.labelBounds.y && o <= this.labelBounds.y + this.labelBounds.height ? this.ctx.container.style.cursor = "move" : this.ctx.container.style.cursor = "crosshair", s < e.x || s > e.x + e.width || o < e.y || o > e.y + e.height) {
+      this.state.hoveredPoint = null, this.crosshairPosition = null, this.renderOverlay();
+      return;
+    }
+    this.crosshairPosition = { x: s, y: o };
+    const l = this.findNearestPoint(s, o, e, n);
+    this.state.hoveredPoint = l, this.renderOverlay();
   }
-  /**
-   * Handle cursor leave
-   */
-  handleCursorLeave() {
-    this.lastCursorX = null, this.lastCursorY = null, this.cachedNearestResult = null, this.scheduleHide();
+  handleLabelMouseDown(t) {
+    if (!this.state.enabled || !this.labelBounds) return;
+    const i = this.ctx.container.getBoundingClientRect(), e = t.clientX - i.left, n = t.clientY - i.top;
+    e >= this.labelBounds.x && e <= this.labelBounds.x + this.labelBounds.width && n >= this.labelBounds.y && n <= this.labelBounds.y + this.labelBounds.height && (this.isDraggingLabel = !0, this.dragStart = { x: e, y: n }, t.stopPropagation(), t.preventDefault());
+  }
+  handleLabelMouseUp() {
+    this.isDraggingLabel = !1;
+  }
+  async handleClick(t) {
+    var h;
+    if (!this.state.enabled) return;
+    (h = this.ctx.animationEngine) != null && h.isAnimating() && await this.ctx.animationEngine.waitForIdle(), t.stopPropagation(), t.preventDefault();
+    const i = this.ctx.container.getBoundingClientRect(), e = this.ctx.getPlotArea(), n = this.ctx.getViewBounds(), s = t.clientX - i.left, o = t.clientY - i.top;
+    if (s < e.x || s > e.x + e.width || o < e.y || o > e.y + e.height)
+      return;
+    const l = this.findNearestPoint(s, o, e, n);
+    if (l) {
+      if (t.preventDefault(), t.stopPropagation(), this.state.selectionState === "idle" || this.state.selectionState === "complete")
+        this.state.point1 = l, this.state.point2 = null, this.state.selectionState = "waitingSecond", this.state.lastMeasurement = null;
+      else if (this.state.selectionState === "waitingSecond") {
+        this.state.point2 = l, this.state.selectionState = "complete";
+        const a = this.calculateMeasurement();
+        this.state.lastMeasurement = a, this.ctx.onMeasure && this.ctx.onMeasure(a);
+      }
+      this.renderOverlay();
+    }
   }
-  /**
-   * Get total number of data points across all visible series
-   */
-  getTotalDataPoints() {
-    let t = 0;
-    const i = this.getSeries();
-    for (const e of i) {
-      if (!e.isVisible()) continue;
-      const n = e.getData();
-      n.x && (t += n.x.length);
+  handleKeyDown(t) {
+    t.key === "Escape" && this.state.enabled && this.clear();
+  }
+  findNearestPoint(t, i, e, n) {
+    if (!this.ctx.getSeries) return null;
+    const s = this.ctx.getSeries();
+    let o = null, l = this.options.snapRadius;
+    for (const h of s) {
+      const a = h.x, r = h.y, d = Math.min(a.length, r.length), f = this.ctx.getYBounds ? this.ctx.getYBounds(h.yAxisId) : { yMin: n.yMin, yMax: n.yMax };
+      for (let p = 0; p < d; p++) {
+        const g = a[p], y = r[p], b = e.x + (g - n.xMin) / (n.xMax - n.xMin) * e.width, x = e.y + (1 - (y - f.yMin) / (f.yMax - f.yMin)) * e.height;
+        if (b < e.x || b > e.x + e.width || x < e.y || x > e.y + e.height) continue;
+        const S = Math.sqrt((t - b) ** 2 + (i - x) ** 2);
+        S < l && (l = S, o = {
+          x: g,
+          y,
+          seriesId: h.id,
+          yAxisId: h.yAxisId,
+          index: p,
+          pixelX: b,
+          pixelY: x
+        });
+      }
     }
-    return t;
+    return o;
   }
-  /**
-   * Determine the effective snap mode based on configuration and data size
-   */
-  getEffectiveSnapMode() {
-    return this.snapMode === "x-only" ? "x-only" : this.snapMode === "nearest" ? "nearest" : this.lastKnownDataSize > this.largeDatasetThreshold ? "x-only" : "nearest";
+  calculateMeasurement() {
+    const t = this.state.point1, i = this.state.point2, e = i.x - t.x, n = i.y - t.y, s = e !== 0 ? n / e : 1 / 0, o = Math.sqrt(e * e + n * n);
+    return {
+      x1: t.x,
+      y1: t.y,
+      x2: i.x,
+      y2: i.y,
+      deltaX: e,
+      deltaY: n,
+      slope: s,
+      distance: o,
+      pixelX1: t.pixelX,
+      pixelY1: t.pixelY,
+      pixelX2: i.pixelX,
+      pixelY2: i.pixelY
+    };
   }
-  /**
-   * Perform tooltip update with hysteresis to prevent jumping.
-   * The tooltip "sticks" to the current point unless the cursor is
-   * significantly closer to a new point.
-   */
-  performTooltipUpdateWithHysteresis(t, i) {
-    var s;
-    if (!((s = this.options.dataPoint) != null && s.enabled)) {
-      this.performFallbackTooltipUpdate(t, i);
-      return;
+  renderOverlay() {
+    if (!this.overlayCtx || !this.overlayCanvas) return;
+    this.resizeOverlay();
+    const t = this.ctx.container.getBoundingClientRect();
+    this.overlayCtx.clearRect(0, 0, t.width, t.height);
+    const i = this.options, e = this.overlayCtx, n = this.ctx.getPlotArea(), s = this.ctx.getViewBounds();
+    if (this.state.point1) {
+      const o = this.state.point1, l = this.ctx.getYBounds ? this.ctx.getYBounds(o.yAxisId) : { yMin: s.yMin, yMax: s.yMax };
+      o.pixelX = n.x + (o.x - s.xMin) / (s.xMax - s.xMin) * n.width, o.pixelY = n.y + (1 - (o.y - l.yMin) / (l.yMax - l.yMin)) * n.height;
     }
-    const n = this.getEffectiveSnapMode() === "x-only" ? this.findDataPointByXOnly(t) : this.findNearestDataPointOptimized(t, i);
-    if (!n) {
-      this.performFallbackTooltipUpdate(t, i);
-      return;
+    if (this.state.point2) {
+      const o = this.state.point2, l = this.ctx.getYBounds ? this.ctx.getYBounds(o.yAxisId) : { yMin: s.yMin, yMax: s.yMax };
+      o.pixelX = n.x + (o.x - s.xMin) / (s.xMax - s.xMin) * n.width, o.pixelY = n.y + (1 - (o.y - l.yMin) / (l.yMax - l.yMin)) * n.height;
     }
-    if (this.cachedNearestResult && this.hoveredSeriesId !== null) {
-      const o = this.cachedNearestResult, l = o.pixelX - t, h = o.pixelY - i, a = l * l + h * h, r = n.pixelX - t, d = n.pixelY - i;
-      if ((r * r + d * d) * this.hysteresisRatio >= a) {
-        this.updateTooltipPosition(this.cachedNearestResult);
-        return;
-      }
+    if (this.crosshairPosition && this.state.selectionState !== "complete") {
+      const o = this.crosshairPosition.x, l = this.crosshairPosition.y;
+      e.save(), e.setLineDash([4, 4]), e.strokeStyle = "rgba(150, 150, 150, 0.7)", e.lineWidth = 1, e.beginPath(), e.moveTo(o, n.y), e.lineTo(o, n.y + n.height), e.stroke(), e.beginPath(), e.moveTo(n.x, l), e.lineTo(n.x + n.width, l), e.stroke(), e.restore();
     }
-    this.cachedNearestResult = n, this.scheduleShow(n);
-  }
-  /**
-   * Handle heatmap and crosshair tooltip types (fallback)
-   */
-  performFallbackTooltipUpdate(t, i) {
-    var e, n;
-    if ((e = this.options.heatmap) != null && e.enabled) {
-      const s = this.findHeatmapCell(t, i);
-      if (s) {
-        this.scheduleShow(s);
-        return;
-      }
+    if (this.state.hoveredPoint && this.state.selectionState !== "complete") {
+      const o = this.state.hoveredPoint;
+      e.beginPath(), e.arc(o.pixelX, o.pixelY, i.highlightSize + 4, 0, Math.PI * 2), e.fillStyle = i.highlightColor + "30", e.fill(), e.beginPath(), e.arc(o.pixelX, o.pixelY, i.highlightSize, 0, Math.PI * 2), e.strokeStyle = i.highlightColor, e.lineWidth = 2, e.stroke(), e.beginPath(), e.arc(o.pixelX, o.pixelY, 4, 0, Math.PI * 2), e.fillStyle = i.highlightColor, e.fill(), this.drawPointTooltip(e, o, "Hover");
     }
-    if ((n = this.options.crosshair) != null && n.enabled) {
-      const s = this.buildCrosshairTooltip(t, i);
-      if (s) {
-        this.scheduleShow(s);
-        return;
-      }
+    if (this.state.point1) {
+      const o = this.state.point1;
+      e.beginPath(), e.arc(o.pixelX, o.pixelY, i.highlightSize, 0, Math.PI * 2), e.fillStyle = i.lineColor, e.fill(), e.beginPath(), e.arc(o.pixelX, o.pixelY, i.highlightSize - 3, 0, Math.PI * 2), e.fillStyle = "#ffffff", e.fill(), e.beginPath(), e.arc(o.pixelX, o.pixelY, 3, 0, Math.PI * 2), e.fillStyle = i.lineColor, e.fill(), this.drawPointLabel(e, o.pixelX, o.pixelY - i.highlightSize - 8, "P1", i.lineColor);
     }
-    this.cachedNearestResult = null, this.scheduleHide();
+    if (this.state.point2) {
+      const o = this.state.point2;
+      e.beginPath(), e.arc(o.pixelX, o.pixelY, i.highlightSize, 0, Math.PI * 2), e.fillStyle = "#4ade80", e.fill(), e.beginPath(), e.arc(o.pixelX, o.pixelY, i.highlightSize - 3, 0, Math.PI * 2), e.fillStyle = "#ffffff", e.fill(), e.beginPath(), e.arc(o.pixelX, o.pixelY, 3, 0, Math.PI * 2), e.fillStyle = "#4ade80", e.fill(), this.drawPointLabel(e, o.pixelX, o.pixelY - i.highlightSize - 8, "P2", "#4ade80");
+    }
+    if (this.state.point1 && this.state.point2) {
+      const o = this.state.point1, l = this.state.point2;
+      e.beginPath(), e.moveTo(o.pixelX, o.pixelY), e.lineTo(l.pixelX, l.pixelY), e.strokeStyle = i.lineColor, e.lineWidth = i.lineWidth, e.setLineDash([6, 4]), e.stroke(), e.setLineDash([]), e.beginPath(), e.moveTo(o.pixelX, o.pixelY), e.lineTo(l.pixelX, o.pixelY), e.lineTo(l.pixelX, l.pixelY), e.strokeStyle = "rgba(255, 107, 107, 0.4)", e.lineWidth = 1, e.setLineDash([3, 3]), e.stroke(), e.setLineDash([]), i.showLabels && this.state.lastMeasurement && this.drawMeasurementLabel(e, o, l, this.state.lastMeasurement);
+    }
+    this.drawStatusIndicator(e);
   }
-  buildAxisFormat(t) {
-    var o, l;
-    const i = this.getViewBounds(), e = i.xMax - i.xMin, n = (o = this.getXAxisOptions) == null ? void 0 : o.call(this), s = (l = this.getYAxisOptions) == null ? void 0 : l.call(this, t);
-    if (!(!n && !s && !Number.isFinite(e)))
-      return {
-        x: n,
-        y: s,
-        xSpan: Number.isFinite(e) ? e : void 0
-      };
+  drawPointTooltip(t, i, e) {
+    const n = this.options, s = `${e}: (${this.formatValue(i.x)}, ${this.formatValue(i.y)})`;
+    t.font = `${n.labelFontSize}px system-ui, sans-serif`;
+    const o = t.measureText(s), l = 6, h = o.width + l * 2, a = n.labelFontSize + l * 2;
+    let r = i.pixelX + 15, d = i.pixelY - a / 2;
+    const f = this.ctx.container.getBoundingClientRect();
+    r + h > f.width && (r = i.pixelX - h - 15), d < 0 && (d = 5), d + a > f.height && (d = f.height - a - 5), t.fillStyle = n.labelBackground, this.roundRect(t, r, d, h, a, 4), t.fill(), t.fillStyle = n.labelColor, t.textAlign = "left", t.textBaseline = "middle", t.fillText(s, r + l, d + a / 2);
   }
-  /**
-   * Find data point by X coordinate only (O(log n) - fastest method)
-   * Best for very large datasets where precision is less important than speed
-   */
-  findDataPointByXOnly(t) {
-    var h, a, r;
-    const i = this.getSeries().filter(
-      (d) => d.isVisible() && d.getType() !== "heatmap"
-    );
-    if (i.length === 0) return null;
-    const e = this.getXScale(), n = this.getYScales(), s = this.pixelToDataX(t);
-    let o = null, l = 1 / 0;
-    for (const d of i) {
-      const f = d.getData();
-      if (!f.x || f.x.length === 0) continue;
-      const p = n.get(((h = d.getYAxisId) == null ? void 0 : h.call(d)) || "default") || n.values().next().value;
-      if (!p) continue;
-      const g = this.binarySearchClosest(f.x, s), y = Math.abs(f.x[g] - s);
-      if (y < l) {
-        l = y;
-        const b = d.getStyle(), x = e.transform(f.x[g]), S = p.transform(f.y[g]);
-        o = {
-          type: "datapoint",
-          seriesId: d.getId(),
-          seriesName: d.getId(),
-          seriesColor: b.color || "#ff0055",
-          dataIndex: g,
-          dataX: f.x[g],
-          dataY: f.y[g],
-          pixelX: x,
-          pixelY: S,
-          cycle: (a = d.getCycle) == null ? void 0 : a.call(d),
-          axisFormat: this.buildAxisFormat((r = d.getYAxisId) == null ? void 0 : r.call(d))
-        };
-        const T = d.getYError(g);
-        T && (o.yError = T);
-      }
-    }
-    return o;
+  drawPointLabel(t, i, e, n, s) {
+    const o = this.options;
+    t.font = `bold ${o.labelFontSize}px system-ui, sans-serif`, t.textAlign = "center", t.textBaseline = "bottom";
+    const l = t.measureText(n), h = 4, a = l.width + h * 2, r = o.labelFontSize + h;
+    t.fillStyle = s, this.roundRect(t, i - a / 2, e - r, a, r, 3), t.fill(), t.fillStyle = "#ffffff", t.fillText(n, i, e - 2);
+  }
+  drawMeasurementLabel(t, i, e, n) {
+    const s = this.options, o = (i.pixelX + e.pixelX) / 2, l = (i.pixelY + e.pixelY) / 2, h = [];
+    s.showDelta && (h.push(`ΔX: ${this.formatValue(n.deltaX)}`), h.push(`ΔY: ${this.formatValue(n.deltaY)}`)), s.showSlope && isFinite(n.slope) && h.push(`Slope: ${this.formatValue(n.slope)}`), s.showDistance && h.push(`Distance: ${this.formatValue(n.distance)}`);
+    const a = s.labelFontSize + 4, r = 10, d = 170, f = h.length * a + r * 2;
+    let p = o + this.labelOffset.x, g = l + this.labelOffset.y;
+    const y = this.ctx.container.getBoundingClientRect();
+    p < 0 && (p = 0), p + d > y.width && (p = y.width - d), g < 0 && (g = 0), g + f > y.height && (g = y.height - f), this.labelBounds = { x: p, y: g, width: d, height: f }, t.fillStyle = s.labelBackground, t.strokeStyle = s.lineColor, t.lineWidth = 2, this.roundRect(t, p, g, d, f, 8), t.fill(), t.stroke(), t.fillStyle = s.labelColor, t.font = `${s.labelFontSize}px system-ui, sans-serif`, t.textAlign = "left", t.textBaseline = "top", h.forEach((b, x) => {
+      t.fillText(b, p + r, g + r + x * a);
+    });
+  }
+  drawStatusIndicator(t) {
+    const i = this.options, e = this.ctx.getPlotArea();
+    let n = "", s = "#666";
+    if (this.state.selectionState === "idle" ? (n = "📏 Click a point to start measuring", s = i.highlightColor) : this.state.selectionState === "waitingSecond" ? (n = "📏 Click second point to complete", s = "#f59e0b") : this.state.selectionState === "complete" && (n = "📏 Measurement complete (ESC to clear)", s = "#4ade80"), !n) return;
+    t.font = "12px system-ui, sans-serif";
+    const h = t.measureText(n).width + 8 * 2, a = 24, r = e.x + 10, d = e.y + 10;
+    t.fillStyle = "rgba(0, 0, 0, 0.75)", this.roundRect(t, r, d, h, a, 4), t.fill(), t.beginPath(), t.arc(r + 16, d + a / 2, 4, 0, Math.PI * 2), t.fillStyle = s, t.fill(), t.fillStyle = "#fff", t.textAlign = "left", t.textBaseline = "middle", t.fillText(n, r + 26, d + a / 2);
+  }
+  roundRect(t, i, e, n, s, o) {
+    t.beginPath(), t.moveTo(i + o, e), t.lineTo(i + n - o, e), t.quadraticCurveTo(i + n, e, i + n, e + o), t.lineTo(i + n, e + s - o), t.quadraticCurveTo(i + n, e + s, i + n - o, e + s), t.lineTo(i + o, e + s), t.quadraticCurveTo(i, e + s, i, e + s - o), t.lineTo(i, e + o), t.quadraticCurveTo(i, e, i + o, e), t.closePath();
+  }
+  formatValue(t) {
+    const i = Math.abs(t);
+    return i === 0 ? "0" : i >= 1e6 || i < 1e-3 ? t.toExponential(this.options.precision - 1) : t.toPrecision(this.options.precision);
+  }
+}
+class kt {
+  constructor(t, i) {
+    u(this, "ctx");
+    u(this, "options");
+    u(this, "state", {
+      enabled: !1,
+      selectionState: "idle",
+      point1: null,
+      point2: null,
+      hoveredPoint: null,
+      lastMeasurement: null
+    });
+    u(this, "overlayCanvas", null);
+    u(this, "overlayCtx", null);
+    // Label dragging
+    u(this, "labelOffset", { x: 15, y: 0 });
+    u(this, "isDraggingLabel", !1);
+    u(this, "labelBounds", null);
+    u(this, "dragStart", { x: 0, y: 0 });
+    u(this, "crosshairPosition", null);
+    // Bound handlers
+    u(this, "boundMouseMove");
+    u(this, "boundClick");
+    u(this, "boundKeyDown");
+    u(this, "boundMouseDown");
+    u(this, "boundMouseUp");
+    u(this, "boundResize");
+    this.ctx = t, this.options = {
+      lineColor: "#ff6b6b",
+      lineWidth: 2,
+      showLabels: !0,
+      labelFontSize: 12,
+      labelBackground: "rgba(0, 0, 0, 0.85)",
+      labelColor: "#ffffff",
+      showPeak: !0,
+      precision: 4,
+      className: "velo-plot-peak-tool",
+      highlightSize: 12,
+      highlightColor: "#00f2ff",
+      snapRadius: 30,
+      baselineWindow: 10,
+      areaFill: "rgba(255, 107, 107, 0.3)",
+      ...i
+    }, this.boundMouseMove = this.handleMouseMove.bind(this), this.boundClick = this.handleClick.bind(this), this.boundKeyDown = this.handleKeyDown.bind(this), this.boundMouseDown = this.handleLabelMouseDown.bind(this), this.boundMouseUp = this.handleLabelMouseUp.bind(this), this.boundResize = this.resizeOverlay.bind(this);
   }
   /**
-   * Optimized nearest data point finder
+   * Enable the peak measurement tool
    */
-  findNearestDataPointOptimized(t, i) {
-    var r, d, f, p;
-    const e = this.getSeries().filter((g) => g.isVisible()), n = ((r = this.options.dataPoint) == null ? void 0 : r.hitRadius) ?? 20, s = this.getXScale(), o = this.getYScales();
-    let l = n * n, h = null;
-    const a = this.pixelToDataX(t);
-    for (const g of e) {
-      if (g.getType() === "heatmap") continue;
-      const y = g.getData(), b = o.get(((d = g.getYAxisId) == null ? void 0 : d.call(g)) || "default") || o.values().next().value;
-      if (!b || !y.x || y.x.length === 0) continue;
-      const x = this.binarySearchClosest(y.x, a), S = y.x.length, T = S > 1e5 ? 2 : S > 1e4 ? 3 : 5, v = Math.max(0, x - T), Y = Math.min(S, x + T + 1);
-      for (let w = v; w < Y; w++) {
-        const C = s.transform(y.x[w]), m = b.transform(y.y[w]), I = C - t, A = m - i, $ = I * I + A * A;
-        if ($ < l) {
-          l = $;
-          const R = g.getStyle();
-          h = {
-            type: "datapoint",
-            seriesId: g.getId(),
-            seriesName: g.getId(),
-            seriesColor: R.color || "#ff0055",
-            dataIndex: w,
-            dataX: y.x[w],
-            dataY: y.y[w],
-            pixelX: C,
-            pixelY: m,
-            cycle: (f = g.getCycle) == null ? void 0 : f.call(g),
-            axisFormat: this.buildAxisFormat((p = g.getYAxisId) == null ? void 0 : p.call(g))
-          };
-          const D = g.getYError(w);
-          D && (h.yError = D);
-        }
-      }
-    }
-    return h;
+  enable() {
+    this.state.enabled || (this.state.enabled = !0, this.state.selectionState = "idle", this.createOverlay(), this.attachListeners(), this.ctx.container.style.cursor = "crosshair");
   }
   /**
-   * Find heatmap cell under cursor
+   * Disable the peak measurement tool
    */
-  findHeatmapCell(t, i) {
-    var h, a;
-    const e = this.getSeries().filter(
-      (r) => r.isVisible() && r.getType() === "heatmap"
-    );
-    if (e.length === 0) return null;
-    const n = this.getXScale(), s = this.getYScales(), o = this.pixelToDataX(t), l = this.pixelToDataY(i);
-    for (const r of e) {
-      const d = r.getHeatmapData();
-      if (!d || !d.xValues || !d.yValues || !d.zValues) continue;
-      const f = this.binarySearchClosest(d.xValues, o), p = this.binarySearchClosest(d.yValues, l), g = d.xValues[f], y = d.yValues[p], b = s.get(((h = r.getYAxisId) == null ? void 0 : h.call(r)) || "default") || s.values().next().value;
-      if (!b) continue;
-      const x = n.transform(g), S = b.transform(y), T = d.zValues[p * d.xValues.length + f], v = ((a = r.getHeatmapStyle) == null ? void 0 : a.call(r)) || {};
-      return {
-        type: "heatmap",
-        seriesId: r.getId(),
-        seriesName: r.getId(),
-        xIndex: f,
-        yIndex: p,
-        dataX: g,
-        dataY: y,
-        zValue: T,
-        pixelX: x,
-        pixelY: S,
-        colorScale: v.colorScale
-      };
-    }
-    return null;
+  disable() {
+    this.state.enabled && (this.state.enabled = !1, this.state.selectionState = "idle", this.state.point1 = null, this.state.point2 = null, this.state.hoveredPoint = null, this.detachListeners(), this.destroyOverlay(), this.ctx.container.style.cursor = "");
   }
   /**
-   * Binary search for closest value
+   * Toggle the tool on/off
    */
-  binarySearchClosest(t, i) {
-    let e = 0, n = t.length - 1;
-    for (; e < n; ) {
-      const s = Math.floor((e + n) / 2);
-      t[s] < i ? e = s + 1 : n = s;
-    }
-    return e > 0 && Math.abs(t[e - 1] - i) < Math.abs(t[e] - i) ? e - 1 : e;
+  toggle() {
+    this.state.enabled ? this.disable() : this.enable();
   }
   /**
-   * Build crosshair tooltip data
+   * Check if tool is enabled
    */
-  buildCrosshairTooltip(t, i) {
-    var l, h;
-    const e = this.getSeries().filter(
-      (a) => a.isVisible() && a.getType() !== "heatmap"
-    );
-    if (e.length === 0) return null;
-    const n = this.pixelToDataX(t), s = this.getYScales(), o = [];
-    for (const a of e) {
-      const r = a.getData();
-      if (!r.x || r.x.length === 0 || !(s.get(((l = a.getYAxisId) == null ? void 0 : l.call(a)) || "default") || s.values().next().value)) continue;
-      const f = this.binarySearchClosest(r.x, n);
-      let p, g = !1;
-      if (f === 0 || f >= r.x.length - 1 || r.x[f] === n)
-        p = r.y[f];
-      else if ((h = this.options.crosshair) != null && h.interpolate) {
-        const b = r.x[f - 1], x = r.x[f], S = r.y[f - 1], T = r.y[f], v = (n - b) / (x - b);
-        p = S + v * (T - S), g = !0;
-      } else
-        p = r.y[f];
-      const y = a.getStyle();
-      o.push({
-        seriesId: a.getId(),
-        seriesName: a.getId(),
-        seriesColor: y.color || "#ff0055",
-        x: n,
-        y: p,
-        isInterpolated: g
-      });
-    }
-    return o.length === 0 ? null : {
-      type: "crosshair",
-      cursorX: t,
-      cursorY: i,
-      dataX: n,
-      interpolatedValues: o,
-      axisFormat: this.buildAxisFormat()
-    };
+  isEnabled() {
+    return this.state.enabled;
   }
   /**
-   * Schedule showing a tooltip
+   * Get the current state
    */
-  scheduleShow(t) {
-    if (this.clearHideTimeout(), t.type === "datapoint") {
-      const e = t;
-      if (this.hoveredSeriesId === e.seriesId && this.hoveredDataIndex === e.dataIndex) {
-        this.updateTooltipPosition(t);
-        return;
-      }
-      this.hoveredSeriesId = e.seriesId, this.hoveredDataIndex = e.dataIndex;
-    }
-    this.clearShowTimeout();
-    const i = this.activeTooltips.size > 0 ? 0 : this.options.showDelay;
-    i > 0 ? this.showTimeoutId = window.setTimeout(() => {
-      this.showTooltip(t);
-    }, i) : this.showTooltip(t);
+  getState() {
+    return { ...this.state };
   }
   /**
-   * Schedule hiding tooltips
+   * Get the last completed measurement
    */
-  scheduleHide() {
-    this.clearShowTimeout(), this.hoveredSeriesId = null, this.hoveredDataIndex = null, this.options.hideDelay > 0 ? this.hideTimeoutId = window.setTimeout(() => {
-      this.hideAll();
-    }, this.options.hideDelay) : this.hideAll();
+  getMeasurement() {
+    return this.state.lastMeasurement;
   }
-  clearShowTimeout() {
-    this.showTimeoutId !== null && (clearTimeout(this.showTimeoutId), this.showTimeoutId = null);
+  /**
+   * Clear the current measurement
+   */
+  clear() {
+    this.state.point1 = null, this.state.point2 = null, this.state.selectionState = "idle", this.state.lastMeasurement = null, this.labelBounds = null, this.labelOffset = { x: 15, y: 0 }, this.renderOverlay();
   }
-  clearHideTimeout() {
-    this.hideTimeoutId !== null && (clearTimeout(this.hideTimeoutId), this.hideTimeoutId = null);
+  /**
+   * Destroy the tool and cleanup
+   */
+  destroy() {
+    this.disable(), this.state.lastMeasurement = null;
   }
   /**
-   * Show a tooltip with the given data
+   * Recalculate measurements (useful if data changes)
    */
-  showTooltip(t) {
-    const i = this.getTemplateIdForType(t.type), e = this.templates.get(i) || tt(t.type), n = t.pixelX ?? this.lastCursorX ?? 0, s = t.pixelY ?? this.lastCursorY ?? 0, o = e.measure(this.ctx, t, this.theme), l = this.positioner.calculatePosition(
-      n,
-      s,
-      o
-    ), h = "main";
-    this.activeTooltips.set(h, {
-      id: h,
-      data: t,
-      position: l,
-      template: e
-    });
+  recalculate() {
+    if (!this.state.point1 || !this.state.point2) return;
+    const t = this.ctx.getSeries ? this.ctx.getSeries() : [], i = (s) => {
+      const o = t.find((l) => l.id === s.seriesId);
+      if (o && s.index < o.x.length) {
+        s.x = o.x[s.index], s.y = o.y[s.index], s.yAxisId = o.yAxisId;
+        const l = this.ctx.getPlotArea(), h = this.ctx.getViewBounds(), a = this.ctx.getYBounds ? this.ctx.getYBounds(o.yAxisId) : { yMin: h.yMin, yMax: h.yMax };
+        return s.pixelX = l.x + (s.x - h.xMin) / (h.xMax - h.xMin) * l.width, s.pixelY = l.y + (1 - (s.y - a.yMin) / (a.yMax - a.yMin)) * l.height, !0;
+      }
+      return !1;
+    }, e = i(this.state.point1), n = i(this.state.point2);
+    e && n ? (this.state.lastMeasurement = this.calculateMeasurement(), this.ctx.onMeasure && this.ctx.onMeasure(this.state.lastMeasurement)) : this.clear(), this.renderOverlay();
+  }
+  // ============================================
+  // Private Methods
+  // ============================================
+  createOverlay() {
+    this.overlayCanvas || (this.overlayCanvas = document.createElement("canvas"), this.overlayCanvas.className = this.options.className, this.overlayCanvas.style.cssText = `
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      z-index: 1000;
+    `, this.resizeOverlay(), this.overlayCtx = this.overlayCanvas.getContext("2d"), this.ctx.container.appendChild(this.overlayCanvas));
+  }
+  resizeOverlay() {
+    if (!this.overlayCanvas) return;
+    const t = this.ctx.container.getBoundingClientRect(), i = window.devicePixelRatio || 1;
+    this.overlayCanvas.width = t.width * i, this.overlayCanvas.height = t.height * i, this.overlayCtx && (this.overlayCtx.setTransform(1, 0, 0, 1, 0, 0), this.overlayCtx.scale(i, i));
+  }
+  destroyOverlay() {
+    this.overlayCanvas && this.overlayCanvas.parentNode && this.overlayCanvas.parentNode.removeChild(this.overlayCanvas), this.overlayCanvas = null, this.overlayCtx = null;
+  }
+  attachListeners() {
+    this.ctx.container.addEventListener("mousemove", this.boundMouseMove, !0), this.ctx.container.addEventListener("mousedown", this.boundClick, !0), this.ctx.container.addEventListener("mousedown", this.boundMouseDown, !0), this.ctx.container.addEventListener("mouseup", this.boundMouseUp, !0), window.addEventListener("resize", this.boundResize), document.addEventListener("keydown", this.boundKeyDown);
+  }
+  detachListeners() {
+    this.ctx.container.removeEventListener("mousemove", this.boundMouseMove, !0), this.ctx.container.removeEventListener("mousedown", this.boundClick, !0), this.ctx.container.removeEventListener("mousedown", this.boundMouseDown, !0), this.ctx.container.removeEventListener("mouseup", this.boundMouseUp, !0), window.removeEventListener("resize", this.boundResize), document.removeEventListener("keydown", this.boundKeyDown);
+  }
+  handleMouseMove(t) {
+    if (!this.state.enabled) return;
+    const i = this.ctx.container.getBoundingClientRect(), e = this.ctx.getPlotArea(), n = this.ctx.getViewBounds(), s = t.clientX - i.left, o = t.clientY - i.top;
+    if (this.isDraggingLabel) {
+      this.labelOffset.x += s - this.dragStart.x, this.labelOffset.y += o - this.dragStart.y, this.dragStart = { x: s, y: o }, this.renderOverlay();
+      return;
+    }
+    if (this.labelBounds && s >= this.labelBounds.x && s <= this.labelBounds.x + this.labelBounds.width && o >= this.labelBounds.y && o <= this.labelBounds.y + this.labelBounds.height ? this.ctx.container.style.cursor = "move" : this.ctx.container.style.cursor = "crosshair", s < e.x || s > e.x + e.width || o < e.y || o > e.y + e.height) {
+      this.state.hoveredPoint = null, this.crosshairPosition = null, this.renderOverlay();
+      return;
+    }
+    this.crosshairPosition = { x: s, y: o };
+    const l = this.state.selectionState === "waitingSecond" && this.state.point1 ? this.state.point1.seriesId : void 0, h = this.findNearestPoint(s, o, e, n, l);
+    this.state.hoveredPoint = h, this.renderOverlay();
+  }
+  handleLabelMouseDown(t) {
+    if (!this.state.enabled || !this.labelBounds) return;
+    const i = this.ctx.container.getBoundingClientRect(), e = t.clientX - i.left, n = t.clientY - i.top;
+    e >= this.labelBounds.x && e <= this.labelBounds.x + this.labelBounds.width && n >= this.labelBounds.y && n <= this.labelBounds.y + this.labelBounds.height && (this.isDraggingLabel = !0, this.dragStart = { x: e, y: n }, t.stopPropagation(), t.preventDefault());
+  }
+  handleLabelMouseUp() {
+    this.isDraggingLabel = !1;
+  }
+  async handleClick(t) {
+    var a;
+    if (!this.state.enabled) return;
+    (a = this.ctx.animationEngine) != null && a.isAnimating() && await this.ctx.animationEngine.waitForIdle(), t.stopPropagation(), t.preventDefault();
+    const i = this.ctx.container.getBoundingClientRect(), e = this.ctx.getPlotArea(), n = this.ctx.getViewBounds(), s = t.clientX - i.left, o = t.clientY - i.top;
+    if (s < e.x || s > e.x + e.width || o < e.y || o > e.y + e.height)
+      return;
+    const l = this.state.selectionState === "waitingSecond" && this.state.point1 ? this.state.point1.seriesId : void 0, h = this.findNearestPoint(s, o, e, n, l);
+    if (h) {
+      if (t.preventDefault(), t.stopPropagation(), this.state.selectionState === "idle" || this.state.selectionState === "complete")
+        this.state.point1 = h, this.state.point2 = null, this.state.selectionState = "waitingSecond", this.state.lastMeasurement = null;
+      else if (this.state.selectionState === "waitingSecond") {
+        if (this.state.point1 && h.seriesId !== this.state.point1.seriesId)
+          return;
+        this.state.point2 = h, this.state.selectionState = "complete";
+        const r = this.calculateMeasurement();
+        this.state.lastMeasurement = r, this.ctx.onMeasure && this.ctx.onMeasure(r);
+      }
+      this.renderOverlay();
+    }
   }
-  /**
-   * Update tooltip position
-   */
-  updateTooltipPosition(t) {
-    const i = this.activeTooltips.get("main");
-    if (!i) return;
-    const e = t || i.data, n = e.pixelX ?? this.lastCursorX ?? 0, s = e.pixelY ?? this.lastCursorY ?? 0, o = i.template.measure(
-      this.ctx,
-      e,
-      this.theme
-    );
-    i.position = this.positioner.calculatePosition(
-      n,
-      s,
-      o
-    ), i.data = e;
+  handleKeyDown(t) {
+    t.key === "Escape" && this.state.enabled && this.clear();
   }
-  /**
-   * Get template ID for a tooltip type
-   */
-  getTemplateIdForType(t) {
-    var i, e, n;
-    switch (t) {
-      case "datapoint":
-        return ((i = this.options.dataPoint) == null ? void 0 : i.templateId) || "default";
-      case "crosshair":
-        return ((e = this.options.crosshair) == null ? void 0 : e.templateId) || "crosshair";
-      case "heatmap":
-        return ((n = this.options.heatmap) == null ? void 0 : n.templateId) || "heatmap";
-      default:
-        return "default";
+  findNearestPoint(t, i, e, n, s) {
+    if (!this.ctx.getSeries) return null;
+    const o = this.ctx.getSeries();
+    let l = null, h = this.options.snapRadius;
+    for (const a of o) {
+      if (s && a.id !== s) continue;
+      const r = a.x, d = a.y, f = Math.min(r.length, d.length), p = this.ctx.getYBounds ? this.ctx.getYBounds(a.yAxisId) : { yMin: n.yMin, yMax: n.yMax };
+      for (let g = 0; g < f; g++) {
+        const y = r[g], b = d[g], x = e.x + (y - n.xMin) / (n.xMax - n.xMin) * e.width, S = e.y + (1 - (b - p.yMin) / (p.yMax - p.yMin)) * e.height;
+        if (x < e.x || x > e.x + e.width || S < e.y || S > e.y + e.height) continue;
+        const T = Math.sqrt((t - x) ** 2 + (i - S) ** 2);
+        T < h && (h = T, l = {
+          x: y,
+          y: b,
+          seriesId: a.id,
+          yAxisId: a.yAxisId,
+          index: g,
+          pixelX: x,
+          pixelY: S
+        });
+      }
     }
+    return l;
   }
-  /**
-   * Show a tooltip programmatically
-   */
-  show(t, i) {
-    const e = `tooltip-${++this.tooltipIdCounter}`, n = (i == null ? void 0 : i.templateId) || this.getTemplateIdForType(t.type), s = this.templates.get(n) || tt(t.type);
-    let o;
-    if (i != null && i.position) {
-      const l = s.measure(this.ctx, t, this.theme);
-      o = this.positioner.calculatePosition(
-        i.position.x,
-        i.position.y,
-        l
-      );
-    } else {
-      const l = t.pixelX ?? 0, h = t.pixelY ?? 0, a = s.measure(this.ctx, t, this.theme);
-      o = this.positioner.calculatePosition(
-        l,
-        h,
-        a
-      );
+  calculateMeasurement() {
+    const t = this.state.point1, i = this.state.point2, n = (this.ctx.getSeries ? this.ctx.getSeries() : []).find((m) => m.id === t.seriesId);
+    if (!n)
+      return {
+        x1: t.x,
+        y1: t.y,
+        x2: i.x,
+        y2: i.y,
+        area: 0,
+        integral: 0,
+        baselineSlope: 0,
+        baselineIntercept: 0,
+        peakHeight: 0,
+        peakX: 0,
+        peakY: 0,
+        pixelX1: t.pixelX,
+        pixelY1: t.pixelY,
+        pixelX2: i.pixelX,
+        pixelY2: i.pixelY
+      };
+    const s = n.x, o = n.y, l = Math.min(t.index, i.index), h = Math.max(t.index, i.index), a = this.options.baselineWindow, r = [], d = [];
+    for (let m = Math.max(0, l - Math.floor(a / 2)); m <= Math.min(s.length - 1, l + Math.floor(a / 2)); m++)
+      r.push(s[m]), d.push(o[m]);
+    for (let m = Math.max(0, h - Math.floor(a / 2)); m <= Math.min(s.length - 1, h + Math.floor(a / 2)); m++)
+      r.push(s[m]), d.push(o[m]);
+    const f = r.length;
+    let p = 0, g = 0, y = 0, b = 0;
+    for (let m = 0; m < f; m++)
+      p += r[m], g += d[m], y += r[m] * d[m], b += r[m] * r[m];
+    const x = (f * y - p * g) / (f * b - p * p), S = (g - x * p) / f;
+    let T = 0, v = 0, Y = -1 / 0, w = 0, C = 0;
+    for (let m = l; m < h; m++) {
+      const I = s[m], A = o[m], $ = s[m + 1], R = o[m + 1], D = $ - I, q = (A + R) / 2;
+      v += q * D;
+      const j = x * I + S, rt = x * $ + S, ht = (j + rt) / 2;
+      T += (q - ht) * D;
+      const J = A - j;
+      J > Y && (Y = J, w = I, C = A);
     }
-    return this.activeTooltips.set(e, {
-      id: e,
-      data: t,
-      position: o,
-      template: s
-    }), i != null && i.duration && i.duration > 0 && setTimeout(() => this.hide(e), i.duration), e;
+    return {
+      x1: t.x,
+      y1: t.y,
+      x2: i.x,
+      y2: i.y,
+      area: T,
+      integral: v,
+      baselineSlope: x,
+      baselineIntercept: S,
+      peakHeight: Y,
+      peakX: w,
+      peakY: C,
+      pixelX1: t.pixelX,
+      pixelY1: t.pixelY,
+      pixelX2: i.pixelX,
+      pixelY2: i.pixelY
+    };
   }
-  /**
-   * Hide a specific tooltip
-   */
-  hide(t) {
-    this.activeTooltips.delete(t);
+  renderOverlay() {
+    if (!this.overlayCtx || !this.overlayCanvas) return;
+    this.resizeOverlay();
+    const t = this.ctx.container.getBoundingClientRect();
+    this.overlayCtx.clearRect(0, 0, t.width, t.height);
+    const i = this.options, e = this.overlayCtx, n = this.ctx.getPlotArea(), s = this.ctx.getViewBounds();
+    if (this.state.point1) {
+      const o = this.state.point1, l = this.ctx.getYBounds ? this.ctx.getYBounds(o.yAxisId) : { yMin: s.yMin, yMax: s.yMax };
+      o.pixelX = n.x + (o.x - s.xMin) / (s.xMax - s.xMin) * n.width, o.pixelY = n.y + (1 - (o.y - l.yMin) / (l.yMax - l.yMin)) * n.height;
+    }
+    if (this.state.point2) {
+      const o = this.state.point2, l = this.ctx.getYBounds ? this.ctx.getYBounds(o.yAxisId) : { yMin: s.yMin, yMax: s.yMax };
+      o.pixelX = n.x + (o.x - s.xMin) / (s.xMax - s.xMin) * n.width, o.pixelY = n.y + (1 - (o.y - l.yMin) / (l.yMax - l.yMin)) * n.height;
+    }
+    if (this.crosshairPosition && this.state.selectionState !== "complete") {
+      const o = this.crosshairPosition.x, l = this.crosshairPosition.y;
+      e.save(), e.setLineDash([4, 4]), e.strokeStyle = "rgba(150, 150, 150, 0.7)", e.lineWidth = 1, e.beginPath(), e.moveTo(o, n.y), e.lineTo(o, n.y + n.height), e.stroke(), e.beginPath(), e.moveTo(n.x, l), e.lineTo(n.x + n.width, l), e.stroke(), e.restore();
+    }
+    if (this.state.hoveredPoint && this.state.selectionState !== "complete") {
+      const o = this.state.hoveredPoint;
+      e.beginPath(), e.arc(o.pixelX, o.pixelY, i.highlightSize + 4, 0, Math.PI * 2), e.fillStyle = i.highlightColor + "30", e.fill(), e.beginPath(), e.arc(o.pixelX, o.pixelY, i.highlightSize, 0, Math.PI * 2), e.strokeStyle = i.highlightColor, e.lineWidth = 2, e.stroke(), e.beginPath(), e.arc(o.pixelX, o.pixelY, 4, 0, Math.PI * 2), e.fillStyle = i.highlightColor, e.fill(), this.drawPointTooltip(e, o, "Hover");
+    }
+    if (this.state.point1) {
+      const o = this.state.point1;
+      e.beginPath(), e.arc(o.pixelX, o.pixelY, i.highlightSize, 0, Math.PI * 2), e.fillStyle = i.lineColor, e.fill(), e.beginPath(), e.arc(o.pixelX, o.pixelY, i.highlightSize - 3, 0, Math.PI * 2), e.fillStyle = "#ffffff", e.fill(), e.beginPath(), e.arc(o.pixelX, o.pixelY, 3, 0, Math.PI * 2), e.fillStyle = i.lineColor, e.fill(), this.drawPointLabel(e, o.pixelX, o.pixelY - i.highlightSize - 8, "P1", i.lineColor);
+    }
+    if (this.state.point2) {
+      const o = this.state.point2;
+      e.beginPath(), e.arc(o.pixelX, o.pixelY, i.highlightSize, 0, Math.PI * 2), e.fillStyle = "#4ade80", e.fill(), e.beginPath(), e.arc(o.pixelX, o.pixelY, i.highlightSize - 3, 0, Math.PI * 2), e.fillStyle = "#ffffff", e.fill(), e.beginPath(), e.arc(o.pixelX, o.pixelY, 3, 0, Math.PI * 2), e.fillStyle = "#4ade80", e.fill(), this.drawPointLabel(e, o.pixelX, o.pixelY - i.highlightSize - 8, "P2", "#4ade80");
+    }
+    if (this.state.point1 && this.state.point2 && this.state.lastMeasurement) {
+      const o = this.state.point1, l = this.state.point2, h = this.state.lastMeasurement, a = this.ctx.getPlotArea(), r = this.ctx.getViewBounds(), f = (this.ctx.getSeries ? this.ctx.getSeries() : []).find((S) => S.id === o.seriesId);
+      if (f) {
+        const S = f.x, T = f.y, v = Math.min(o.index, l.index), Y = Math.max(o.index, l.index), w = this.ctx.getYBounds ? this.ctx.getYBounds(f.yAxisId) : { yMin: r.yMin, yMax: r.yMax };
+        e.beginPath(), e.moveTo(o.pixelX, o.pixelY);
+        for (let C = v; C <= Y; C++) {
+          const m = a.x + (S[C] - r.xMin) / (r.xMax - r.xMin) * a.width, I = a.y + (1 - (T[C] - w.yMin) / (w.yMax - w.yMin)) * a.height;
+          e.lineTo(m, I);
+        }
+        e.lineTo(l.pixelX, l.pixelY), e.closePath(), e.fillStyle = i.areaFill, e.fill();
+      }
+      e.beginPath(), e.moveTo(o.pixelX, o.pixelY), e.lineTo(l.pixelX, l.pixelY), e.strokeStyle = i.lineColor, e.lineWidth = 1, e.stroke();
+      const p = this.ctx.getYBounds ? this.ctx.getYBounds(o.yAxisId) : { yMin: r.yMin, yMax: r.yMax }, g = a.x + (h.peakX - r.xMin) / (r.xMax - r.xMin) * a.width, y = a.y + (1 - (h.peakY - p.yMin) / (p.yMax - p.yMin)) * a.height, b = h.baselineSlope * h.peakX + h.baselineIntercept, x = a.y + (1 - (b - p.yMin) / (p.yMax - p.yMin)) * a.height;
+      e.beginPath(), e.moveTo(g, y), e.lineTo(g, x), e.strokeStyle = i.lineColor, e.setLineDash([2, 2]), e.stroke(), e.setLineDash([]), i.showLabels && this.drawMeasurementLabel(e, o, l, h);
+    }
+    this.drawStatusIndicator(e);
   }
-  /**
-   * Hide all tooltips immediately
-   */
-  hideAll() {
-    this.activeTooltips.clear(), this.hoveredSeriesId = null, this.hoveredDataIndex = null;
+  drawPointTooltip(t, i, e) {
+    const n = this.options, s = `${e}: (${this.formatValue(i.x)}, ${this.formatValue(i.y)})`;
+    t.font = `${n.labelFontSize}px system-ui, sans-serif`;
+    const o = t.measureText(s), l = 6, h = o.width + l * 2, a = n.labelFontSize + l * 2;
+    let r = i.pixelX + 15, d = i.pixelY - a / 2;
+    const f = this.ctx.container.getBoundingClientRect();
+    r + h > f.width && (r = i.pixelX - h - 15), d < 0 && (d = 5), d + a > f.height && (d = f.height - a - 5), t.fillStyle = n.labelBackground, this.roundRect(t, r, d, h, a, 4), t.fill(), t.fillStyle = n.labelColor, t.textAlign = "left", t.textBaseline = "middle", t.fillText(s, r + l, d + a / 2);
   }
-  /**
-   * Render all active tooltips
-   */
-  render() {
-    if (!(!this.options.enabled || this.activeTooltips.size === 0))
-      for (const t of this.activeTooltips.values())
-        this.renderer.render(t.data, t.position, t.template);
+  drawPointLabel(t, i, e, n, s) {
+    const o = this.options;
+    t.font = `bold ${o.labelFontSize}px system-ui, sans-serif`, t.textAlign = "center", t.textBaseline = "bottom";
+    const l = t.measureText(n), h = 4, a = l.width + h * 2, r = o.labelFontSize + h;
+    t.fillStyle = s, this.roundRect(t, i - a / 2, e - r, a, r, 3), t.fill(), t.fillStyle = "#ffffff", t.fillText(n, i, e - 2);
   }
-  /**
-   * Check if any tooltip is currently visible
-   */
-  hasActiveTooltip() {
-    return this.activeTooltips.size > 0;
+  drawMeasurementLabel(t, i, e, n) {
+    const s = this.options, o = (i.pixelX + e.pixelX) / 2, l = (i.pixelY + e.pixelY) / 2, h = [];
+    s.showPeak && (h.push(`Peak Area: ${this.formatValue(n.area)}`), h.push(`Peak Height: ${this.formatValue(n.peakHeight)}`), h.push(`Integral: ${this.formatValue(n.integral)}`));
+    const a = s.labelFontSize + 4, r = 10, d = 170, f = h.length * a + r * 2;
+    let p = o + this.labelOffset.x, g = l + this.labelOffset.y;
+    const y = this.ctx.container.getBoundingClientRect();
+    p < 0 && (p = 0), p + d > y.width && (p = y.width - d), g < 0 && (g = 0), g + f > y.height && (g = y.height - f), this.labelBounds = { x: p, y: g, width: d, height: f }, t.fillStyle = s.labelBackground, t.strokeStyle = s.lineColor, t.lineWidth = 2, this.roundRect(t, p, g, d, f, 8), t.fill(), t.stroke(), t.fillStyle = s.labelColor, t.font = `${s.labelFontSize}px system-ui, sans-serif`, t.textAlign = "left", t.textBaseline = "top", h.forEach((b, x) => {
+      t.fillText(b, p + r, g + r + x * a);
+    });
   }
-  /**
-   * Subscribe to tooltip events
-   */
-  on(t, i) {
-    this.events.on(t, i);
+  drawStatusIndicator(t) {
+    const i = this.options, e = this.ctx.getPlotArea();
+    let n = "", s = "#666";
+    if (this.state.selectionState === "idle" ? (n = "📏 Click a point to start measuring", s = i.highlightColor) : this.state.selectionState === "waitingSecond" ? (n = "📏 Click second point to complete", s = "#f59e0b") : this.state.selectionState === "complete" && (n = "📏 Measurement complete (ESC to clear)", s = "#4ade80"), !n) return;
+    t.font = "12px system-ui, sans-serif";
+    const h = t.measureText(n).width + 8 * 2, a = 24, r = e.x + 10, d = e.y + 10;
+    t.fillStyle = "rgba(0, 0, 0, 0.75)", this.roundRect(t, r, d, h, a, 4), t.fill(), t.beginPath(), t.arc(r + 16, d + a / 2, 4, 0, Math.PI * 2), t.fillStyle = s, t.fill(), t.fillStyle = "#fff", t.textAlign = "left", t.textBaseline = "middle", t.fillText(n, r + 26, d + a / 2);
   }
-  /**
-   * Unsubscribe from tooltip events
-   */
-  off(t, i) {
-    this.events.off(t, i);
+  roundRect(t, i, e, n, s, o) {
+    t.beginPath(), t.moveTo(i + o, e), t.lineTo(i + n - o, e), t.quadraticCurveTo(i + n, e, i + n, e + o), t.lineTo(i + n, e + s - o), t.quadraticCurveTo(i + n, e + s, i + n - o, e + s), t.lineTo(i + o, e + s), t.quadraticCurveTo(i, e + s, i, e + s - o), t.lineTo(i, e + o), t.quadraticCurveTo(i, e, i + o, e), t.closePath();
   }
-  /**
-   * Destroy the tooltip manager
-   */
-  destroy() {
-    this.clearShowTimeout(), this.clearHideTimeout(), this.activeTooltips.clear(), this.templates.clear(), this.events.clear();
+  formatValue(t) {
+    const i = Math.abs(t);
+    return i === 0 ? "0" : i >= 1e6 || i < 1e-3 ? t.toExponential(this.options.precision - 1) : t.toPrecision(this.options.precision);
   }
 }
 const Ht = {
@@ -2421,14 +2421,14 @@ function Wt(c = {}) {
         }),
         onMeasure: (l) => n.events.emit("measure", l)
       };
-      if ((c.enableDeltaTool ?? !0) && (t = new ft(s)), (c.enablePeakTool ?? !0) && (i = new pt(s)), c.useEnhancedTooltips ?? !0) {
+      if ((c.enableDeltaTool ?? !0) && (t = new Bt(s)), (c.enablePeakTool ?? !0) && (i = new kt(s)), c.useEnhancedTooltips ?? !0) {
         const l = n.chart;
         n.log.debug("TooltipManager init - checking deps:", {
           hasCtx2d: !!n.render.ctx2d,
           hasXScale: !!l.xScale,
           hasYScales: !!l.yScales,
           seriesCount: n.data.getAllSeries().length
-        }), n.render.ctx2d ? e = new kt({
+        }), n.render.ctx2d ? e = new Dt({
           overlayCtx: n.render.ctx2d,
           chartTheme: n.ui.theme,
           getPlotArea: () => n.render.plotArea,
@@ -2461,11 +2461,11 @@ function Wt(c = {}) {
   };
 }
 export {
-  ft as D,
+  Bt as D,
   Wt as P,
-  kt as T,
-  bt as a,
-  pt as b,
+  Dt as T,
+  yt as a,
+  kt as b,
   B as g
 };
-//# sourceMappingURL=index-qunX30Xu.js.map
+//# sourceMappingURL=index-B7PTX94B.js.map