@wick-charts/vue 0.5.1 → 0.6.0

package/dist/core/dist/series/line.js

@@ -1,60 +1,81 @@
-import { DEFAULT_LINE_PULSE as et, DEFAULT_LINE_SMOOTH as it, DEFAULT_LINE_ENTRY as ot } from "../animation/config.js";
-import { easeOutCubic as J } from "../animation/easing.js";
-import { decimateLineData as K } from "../data/decimation.js";
-import { hexToRgba as D } from "../utils/color.js";
-import { lerp as U } from "../utils/math.js";
-import { BaseMultiLayerSeries as nt } from "./base-multi-layer.js";
-import { buildCurveSegments as Q } from "./painters/canvas-path.js";
-import { resolveLinePainter as lt } from "./painters/resolve.js";
-const rt = {
+import { DEFAULT_HISTORY_REVEAL as tt, DEFAULT_LINE_INTRO as et, DEFAULT_LINE_PULSE as it, DEFAULT_LINE_SMOOTH as ot, DEFAULT_LINE_ENTRY as st } from "../animation/config.js";
+import { easeOutCubic as _ } from "../animation/easing.js";
+import { decimateLineData as j } from "../data/decimation.js";
+import { hexToRgba as C } from "../utils/color.js";
+import { lerp as Y } from "../utils/math.js";
+import { BaseMultiLayerSeries as rt } from "./base-multi-layer.js";
+import { unfoldIntro as lt, backfillSweepIntro as at } from "./line-intro.js";
+import { buildCurveSegments as q } from "./painters/canvas-path.js";
+import { resolveLinePainter as ht } from "./painters/resolve.js";
+const ct = {
   colors: ["#2962FF"],
   strokeWidth: 1,
   area: { visible: !0 },
   pulse: !0,
   stacking: "off",
   curve: "straight",
-  entryMs: ot,
-  smoothMs: it,
-  pulseMs: et
+  entryMs: st,
+  smoothMs: ot,
+  pulseMs: it,
+  introMs: et,
+  historyRevealMs: tt
 };
-function Z(v) {
+function Q(v) {
   const t = v.areaFill, e = t !== void 0 && v.area === void 0 ? { visible: !!t } : v.area;
   return {
     ...v,
     area: e,
-    entryMs: v.entryMs === !1 ? 0 : v.entryMs ?? ot,
-    smoothMs: v.smoothMs === !1 ? 0 : v.smoothMs ?? it,
-    pulseMs: v.pulseMs === !1 ? 0 : v.pulseMs ?? et
+    entryMs: v.entryMs === !1 ? 0 : v.entryMs ?? st,
+    smoothMs: v.smoothMs === !1 ? 0 : v.smoothMs ?? ot,
+    pulseMs: v.pulseMs === !1 ? 0 : v.pulseMs ?? it,
+    introMs: v.introMs === !1 ? 0 : v.introMs ?? et,
+    historyRevealMs: v.historyRevealMs === !1 ? 0 : v.historyRevealMs ?? tt
   };
 }
-function $(v) {
+function Z(v) {
   return v.map(([t, e]) => ({ x: t, y: e }));
 }
-function tt(v, t) {
+const $ = 0.15, ut = at();
+function U(v, t, e) {
+  if (v.length === 0) return null;
+  if (t <= v[0].time) return Number.isFinite(v[0].value) ? e(v[0]) : null;
+  const i = v[v.length - 1];
+  if (t >= i.time) return Number.isFinite(i.value) ? e(i) : null;
+  let s = 0, o = v.length - 1;
+  for (; o - s > 1; ) {
+    const a = s + o >> 1;
+    v[a].time <= t ? s = a : o = a;
+  }
+  const n = v[s], r = v[o];
+  if (!Number.isFinite(n.value) || !Number.isFinite(r.value)) return null;
+  const l = r.time - n.time;
+  return l <= 0 ? e(n) : Y(e(n), e(r), (t - n.time) / l);
+}
+function K(v, t) {
   for (const e of t)
     e.kind === "line" ? v.lineTo(e.x, e.y) : v.bezierCurveTo(e.cp1x, e.cp1y, e.cp2x, e.cp2y, e.x, e.y);
 }
-function at(v, t, e) {
-  for (let s = e.length - 1; s >= 0; s--) {
-    const r = e[s], n = s > 0 ? e[s - 1] : t[0];
-    r.kind === "line" ? v.lineTo(n.x, n.y) : v.bezierCurveTo(r.cp2x, r.cp2y, r.cp1x, r.cp1y, n.x, n.y);
+function ft(v, t, e) {
+  for (let i = e.length - 1; i >= 0; i--) {
+    const s = e[i], o = i > 0 ? e[i - 1] : t[0];
+    s.kind === "line" ? v.lineTo(o.x, o.y) : v.bezierCurveTo(s.cp2x, s.cp2y, s.cp1x, s.cp1y, o.x, o.y);
   }
 }
-class ht extends nt {
+class mt extends rt {
   kind = "line";
   areaGradientCache = /* @__PURE__ */ new Map();
   constructor(t, e) {
-    super(t), this.options = Z({ ...rt, ...e });
+    super(t), this.options = Q({ ...ct, ...e });
   }
   updateOptions(t) {
-    this.options = Z({ ...this.options, ...t });
+    this.options = Q({ ...this.options, ...t });
   }
   getStacking() {
     return this.options.stacking;
   }
   applyTheme(t, e) {
-    const s = this.stores.length === 1 ? [t.line.color] : t.seriesColors.slice(0, this.stores.length);
-    this.updateOptions({ colors: s }), this.options.strokeWidth === e.line.width && this.updateOptions({ strokeWidth: t.line.width });
+    const i = this.stores.length === 1 ? [t.line.color] : t.seriesColors.slice(0, this.stores.length);
+    this.updateOptions({ colors: i }), this.options.strokeWidth === e.line.width && this.updateOptions({ strokeWidth: t.line.width });
   }
   isEntryEnabled() {
     return (this.options.entryAnimation ?? "grow") !== "none";
@@ -66,15 +87,254 @@ class ht extends nt {
     return this.hasPulse;
   }
   hasOverlayContentInRange(t, e) {
-    for (let s = 0; s < this.stores.length; s++) {
-      if (this.getLayerAlpha(s) <= 0) continue;
-      const r = this.stores[s].last();
-      if (r && r.time >= t) return !0;
+    for (let i = 0; i < this.stores.length; i++) {
+      if (this.getLayerAlpha(i) <= 0) continue;
+      const s = this.stores[i].last();
+      if (s && s.time >= t) return !0;
     }
     return !1;
   }
   render(t) {
-    this.tickAnimations(performance.now()), this.options.stacking === "off" ? this.renderOff(t) : this.renderStacked(t, this.options.stacking === "percent");
+    this.tickAnimations(performance.now());
+    const { context: e } = t.scope;
+    this.historyDirectives = null;
+    const i = this.historyRange;
+    if (this.historyWave.active && i !== null) {
+      const r = this.options.historyReveal ?? ut;
+      r !== "none" && (this.historyDirectives = r(this.buildHistoryFrame(t, i)));
+    }
+    const s = this.historyDirectives, o = s?.ghostAlpha ?? 0;
+    o > 0 && (e.save(), e.globalAlpha *= o, this.introGhostPass = !0, this.renderBody(t), this.introGhostPass = !1, e.restore());
+    const n = this.applyHistoryClip(t, s, i);
+    this.introWave.active ? this.renderWithIntro(t) : (this.introDirectives = null, this.renderBody(t)), n && e.restore(), s?.heads !== void 0 && s.heads.length > 0 && this.drawIntroHeads(t, s.heads, this.historyWave.linear());
+  }
+  /**
+   * Initial-load intro pass: the resolved LineIntroFn describes this frame
+   * declaratively (clip window / ghost pass / heads / value transform); the
+   * renderer executes the directives around the untouched body pass.
+   */
+  renderWithIntro(t) {
+    const e = this.resolveIntro()(this.buildIntroFrame(t));
+    this.introDirectives = e;
+    const { context: i } = t.scope, { width: s, height: o } = t.scope.bitmapSize, n = e.ghostAlpha ?? 0;
+    n > 0 && (i.save(), i.globalAlpha *= n, this.introGhostPass = !0, this.renderBody(t), this.introGhostPass = !1, i.restore());
+    const r = e.clip, l = r !== void 0 && (r.fromX !== void 0 || r.toX !== void 0);
+    if (l) {
+      const a = r.fromX ?? 0, p = r.toX ?? s;
+      i.save(), i.beginPath(), i.rect(a, 0, Math.max(0, p - a), o), i.clip();
+    }
+    this.renderBody(t), l && i.restore(), e.heads !== void 0 && e.heads.length > 0 && this.drawIntroHeads(t, e.heads, this.introWave.linear());
+  }
+  /**
+   * Apply the history reveal's clip directive, mapped from reveal space
+   * (`x = 0` at the data boundary, increasing into the prepended history)
+   * to bitmap space. Everything at or after the boundary always draws; a
+   * small pad keeps the stroke cap at the reveal front from being shaved.
+   */
+  applyHistoryClip(t, e, i) {
+    const s = e?.clip;
+    if (s === void 0 || i === null || s.fromX === void 0 && s.toX === void 0) return !1;
+    const { context: o } = t.scope, { width: n, height: r } = t.scope.bitmapSize, l = t.timeScale.timeToBitmapX(i.to), a = Math.abs(l - t.timeScale.timeToBitmapX(i.from)), p = Math.max(2, (this.options.strokeWidth ?? 1) * t.scope.horizontalPixelRatio), f = s.fromX ?? 0, y = s.toX ?? a;
+    return o.save(), o.beginPath(), o.rect(l - y - p, 0, Math.max(0, y - f + p), r), o.rect(l, 0, Math.max(0, n - l), r), o.clip(), !0;
+  }
+  renderBody(t) {
+    this.options.stacking === "off" ? this.renderOff(t) : this.renderStacked(t, this.options.stacking === "percent");
+  }
+  /** True while a ghost pre-pass is drawing — skips the area fill so the
+   *  translucent pass shows only the stroke skeleton. */
+  introGhostPass = !1;
+  /**
+   * Directives produced for the current intro frame. Kept between passes so
+   * the overlay (pulse dot) applies the same value transform the main pass
+   * drew with; `null` once the wave settles.
+   */
+  introDirectives = null;
+  /** Per-frame history-reveal directives; `null` when no reveal is in flight. */
+  historyDirectives = null;
+  /** Default intro, built lazily — one instance per renderer. */
+  defaultIntro = null;
+  resolveIntro() {
+    const t = this.options.introAnimation;
+    return t !== void 0 ? t : (this.defaultIntro === null && (this.defaultIntro = lt()), this.defaultIntro);
+  }
+  /**
+   * Frame context handed to the intro fn — progress plus memoized data
+   * accessors, so a directive-producing fn stays pure and cheap.
+   */
+  buildIntroFrame(t) {
+    return this.buildFrame(t, {
+      progress: this.introWave.linear(),
+      range: t.timeScale.getRange(),
+      // Plot-area extent, not the canvas bitmap — the canvas also carries the
+      // axis strips, so `bitmapSize` would make `width / 2` land right of the
+      // data center and any width-based x→time mapping sample the wrong time.
+      width: t.timeScale.getMediaWidth() * t.scope.horizontalPixelRatio
+    });
+  }
+  /**
+   * Localized frame for the history reveal fn: `range` is the prepended
+   * span (boundary at `range.to`), `width` its bitmap width, and the data
+   * accessors are scoped to that span — `layerMean` anchors an unfold to
+   * the new history, not the whole window.
+   */
+  buildHistoryFrame(t, e) {
+    return this.buildFrame(t, {
+      progress: this.historyWave.linear(),
+      range: e,
+      width: Math.abs(t.timeScale.timeToBitmapX(e.to) - t.timeScale.timeToBitmapX(e.from))
+    });
+  }
+  buildFrame(t, e) {
+    const { timeScale: i, yScale: s, scope: o } = t, { progress: n, range: r, width: l } = e, a = new Array(this.stores.length), p = new Array(this.stores.length);
+    let f;
+    const y = (h) => {
+      let m = a[h];
+      return m === void 0 && (m = this.stores[h]?.getVisibleData(r.from, r.to) ?? [], a[h] = m), m;
+    };
+    return {
+      progress: n,
+      range: r,
+      width: l,
+      height: s.getMediaHeight() * o.verticalPixelRatio,
+      stacking: this.options.stacking,
+      timeToX: (h) => i.timeToBitmapX(h),
+      xToTime: (h) => i.xToTime(h / o.horizontalPixelRatio),
+      valueToY: (h) => s.valueToBitmapY(h),
+      layerCount: this.stores.length,
+      layerData: y,
+      layerMean: (h) => {
+        let m = p[h];
+        if (m === void 0) {
+          let u = 0, A = 0;
+          for (const R of y(h))
+            Number.isFinite(R.value) && (u += R.value, A++);
+          m = A > 0 ? u / A : null, p[h] = m;
+        }
+        return m;
+      },
+      primaryPath: () => {
+        if (f === void 0) {
+          f = null;
+          for (let h = 0; h < this.stores.length; h++) {
+            if (this.getLayerAlpha(h) <= 0 || !this.stores[h].isVisible()) continue;
+            const m = y(h).filter((u) => Number.isFinite(u.value));
+            if (!(m.length < 2)) {
+              f = m.map((u) => ({
+                x: i.timeToBitmapX(u.time),
+                y: s.valueToBitmapY(u.value),
+                time: u.time
+              }));
+              break;
+            }
+          }
+        }
+        return f;
+      }
+    };
+  }
+  /**
+   * A custom/built-in intro's value transform rides this hook: every
+   * rendered value (stroke, area, stacked cumulative, trailing endpoint,
+   * overlay pulse) already flows through `effectiveValue`, so one override
+   * animates the whole geometry.
+   */
+  effectiveValue(t, e, i, s) {
+    const o = super.effectiveValue(t, e, i, s), n = this.historyWave.active ? this.historyDirectives?.value : void 0, r = this.historyRange;
+    if (n !== void 0 && r !== null && i < r.to) {
+      const y = r.to - r.from, h = y > 0 ? Math.min(1, Math.max(0, (r.to - i) / y)) : 0;
+      return n({ layerIndex: e, time: i, value: o, position: h });
+    }
+    const l = this.introWave.active ? this.introDirectives?.value : void 0;
+    if (l === void 0) return o;
+    const a = t.timeScale.getRange(), p = a.to - a.from, f = p > 0 ? Math.min(1, Math.max(0, (i - a.from) / p)) : 0;
+    return l({ layerIndex: e, time: i, value: o, position: f });
+  }
+  /**
+   * Extends the base last-value query with the 'grow' entrance's value-space
+   * equivalent of {@link chainedTailPositions}'s eased position lerp — the Y
+   * scale is affine, so lerping the *value* by the same eased progress and
+   * mapping it through `yScale` afterward lands on the identical pixel the
+   * renderer paints. Without this, a tooltip/YLabel query would report a
+   * freshly-appended point's raw value the instant it lands, `entryMs`
+   * before the marker visually arrives there.
+   */
+  snapshotValue(t, e, i) {
+    const s = super.snapshotValue(t, e, i);
+    return (this.options.entryAnimation ?? "grow") !== "grow" ? s : this.chainedTailValues(t)?.get(e) ?? s;
+  }
+  /** Value-space counterpart of {@link chainedTailPositions} — see {@link snapshotValue}. */
+  chainedTailValues(t) {
+    const e = this.unsettledTail(t);
+    if (e.length === 0) return null;
+    const i = this.stores[t].getAll(), s = i.length - 1 - e.length;
+    if (s < 0) return null;
+    const o = i[s];
+    if (!Number.isFinite(o.value)) return null;
+    let n = this.liveValue(t, o.time, o.value);
+    const r = /* @__PURE__ */ new Map();
+    for (let l = 0; l < e.length; l++) {
+      const a = i[s + 1 + l];
+      if (!Number.isFinite(a.value)) return null;
+      const p = _(e[l].progress), f = this.liveValue(t, a.time, a.value), y = Y(n, f, p);
+      r.set(a.time, y), n = y;
+    }
+    return r;
+  }
+  /**
+   * Glowing pulse dots riding the intro's head anchors — the line reads as
+   * being plotted live, and hands off to the regular pulse dot the frame
+   * the reveal lands. Off-mode only: recomputing the stacked cumulative at
+   * an arbitrary head time isn't worth it for a one-second decoration.
+   */
+  drawIntroHeads(t, e, i) {
+    if (this.options.stacking !== "off") return;
+    const s = Math.min(1, i / $), o = Math.min(1, (1 - i) / $), n = Math.max(0, Math.min(s, o));
+    if (n <= 0) return;
+    const { scope: r } = t;
+    for (const l of e)
+      for (let a = 0; a < this.stores.length; a++) {
+        const p = this.getLayerAlpha(a);
+        if (p <= 0 || !this.stores[a].isVisible()) continue;
+        const f = this.introHeadAnchor(t, a, l);
+        f !== null && this.drawPulse({
+          ctx: r.context,
+          x: f.x,
+          y: f.y,
+          color: this.resolveLayerColor(a, f.value),
+          pixelRatio: r.horizontalPixelRatio,
+          phase: i * 2,
+          alpha: n * p
+        });
+      }
+  }
+  /**
+   * Where a head dot sits for one layer: pinned to the polyline as it is
+   * actually drawn this frame. Interior anchors interpolate through
+   * {@link effectiveValue}, so live smoothing and the intro's own value
+   * transform are honored while data streams during the reveal. Past the
+   * last point the head parks on the trailing endpoint — the exact spot the
+   * settled pulse dot takes over — and before the first point it parks on
+   * the line's start. Without the clamps the head slides into the
+   * right-padding region beyond the line's end (the sweep front travels the
+   * visible range, not the data span) and jumps back on settle.
+   */
+  introHeadAnchor(t, e, i) {
+    const { timeScale: s, yScale: o } = t, n = s.getRange(), r = this.stores[e].getVisibleData(n.from, n.to);
+    if (r.length === 0) return null;
+    const l = this.stores[e].last();
+    if (l !== void 0 && i.time >= l.time) {
+      if (!Number.isFinite(l.value)) return null;
+      const f = this.trailingEndpoint(t, e);
+      return f === null ? null : { x: f.x, y: f.y, value: l.value };
+    }
+    const a = r[0];
+    if (i.time <= a.time) {
+      if (!Number.isFinite(a.value)) return null;
+      const f = this.effectiveValue(t, e, a.time, a.value);
+      return { x: s.timeToBitmapX(a.time), y: o.valueToBitmapY(f), value: a.value };
+    }
+    const p = U(r, i.time, (f) => this.effectiveValue(t, e, f.time, f.value));
+    return p === null ? null : { x: i.x, y: o.valueToBitmapY(p), value: p };
   }
   /**
    * Rendered positions of the layer's still-unsettled trailing points, keyed
@@ -88,20 +348,70 @@ class ht extends nt {
    * unsettled or any value in the chain (anchor included) is non-finite —
    * callers fall back to raw geometry, mirroring the old NaN guard.
    */
+  /**
+   * Stacked cumulative value for `layerIndex` at `queryT`, alpha-weighted
+   * and reduced through {@link effectiveValue} — the single source of truth
+   * shared by {@link renderStacked}'s geometry and the overlay's crosshair /
+   * pulse dots, so they can never disagree. Any OTHER layer without a
+   * sample exactly at `queryT` holds its nearest earlier value forward
+   * instead of contributing 0: ragged streams tick independently, so a
+   * lagging sibling shouldn't zero out the moment another layer ticks past
+   * it (see `renderStacked`'s `valueMaps` comment for the full rationale).
+   */
+  stackedValueAt(t, e, i) {
+    const s = this.options.stacking === "percent", o = (l) => {
+      const a = this.getLayerAlpha(l);
+      if (a <= 0) return 0;
+      const p = this.stores[l].getAll();
+      if (p.length === 0 || i < p[0].time) return 0;
+      const f = U(p, i, (y) => this.effectiveValue(t, l, y.time, y.value));
+      return f === null ? 0 : f * a;
+    };
+    let n = 0;
+    if (s)
+      for (let l = 0; l < this.stores.length; l++) n += o(l);
+    let r = 0;
+    for (let l = 0; l <= e; l++) {
+      const a = o(l);
+      r += s && n > 0 ? a / n * 100 : a;
+    }
+    return r;
+  }
+  /**
+   * Bitmap position for layer `li`'s stacked boundary at time `t`, chain-
+   * lerped through that layer's own still-unsettled trailing entries when
+   * `t` is its current live tip — a single dot has no shared edge to tear,
+   * so (unlike `renderStacked`'s polygon boundaries) gating off the layer's
+   * own entrance state is enough. Falls back to the raw settled position
+   * for historical points or when the 'grow' entrance is disabled.
+   */
+  stackedPositionAt(t, e, i) {
+    const { timeScale: s, yScale: o } = t, n = s.timeToBitmapX(i), r = o.valueToBitmapY(this.stackedValueAt(t, e, i)), l = this.stores[e].last()?.time;
+    if ((this.options.entryAnimation ?? "grow") !== "grow" || i !== l) return { x: n, y: r };
+    const a = this.unsettledTail(e), p = this.stores[e].getAll(), f = p.length - 1 - a.length;
+    if (a.length === 0 || f < 0) return { x: n, y: r };
+    const y = p[f];
+    let h = s.timeToBitmapX(y.time), m = o.valueToBitmapY(this.stackedValueAt(t, e, y.time));
+    for (let u = 0; u < a.length; u++) {
+      const A = p[f + 1 + u], R = _(a[u].progress), M = s.timeToBitmapX(A.time), I = o.valueToBitmapY(this.stackedValueAt(t, e, A.time));
+      h = Y(h, M, R), m = Y(m, I, R);
+    }
+    return { x: h, y: m };
+  }
   chainedTailPositions(t, e) {
-    const s = this.unsettledTail(t, e);
-    if (s.length === 0) return null;
-    const r = this.stores[e].getAll(), n = r.length - 1 - s.length;
-    if (n < 0) return null;
-    const { timeScale: l, yScale: d } = t, L = r[n];
-    if (!Number.isFinite(L.value)) return null;
-    let k = l.timeToBitmapX(L.time), B = d.valueToBitmapY(this.effectiveValue(t, e, L.time, L.value));
+    const i = this.unsettledTail(e);
+    if (i.length === 0) return null;
+    const s = this.stores[e].getAll(), o = s.length - 1 - i.length;
+    if (o < 0) return null;
+    const { timeScale: n, yScale: r } = t, l = s[o];
+    if (!Number.isFinite(l.value)) return null;
+    let a = n.timeToBitmapX(l.time), p = r.valueToBitmapY(this.effectiveValue(t, e, l.time, l.value));
     const f = /* @__PURE__ */ new Map();
-    for (let m = 0; m < s.length; m++) {
-      const h = r[n + 1 + m];
+    for (let y = 0; y < i.length; y++) {
+      const h = s[o + 1 + y];
       if (!Number.isFinite(h.value)) return null;
-      const P = J(s[m].progress), o = l.timeToBitmapX(h.time), C = d.valueToBitmapY(this.effectiveValue(t, e, h.time, h.value)), y = U(k, o, P), g = U(B, C, P);
-      f.set(h.time, { x: y, y: g }), k = y, B = g;
+      const m = _(i[y].progress), u = n.timeToBitmapX(h.time), A = r.valueToBitmapY(this.effectiveValue(t, e, h.time, h.value)), R = Y(a, u, m), M = Y(p, A, m);
+      f.set(h.time, { x: R, y: M }), a = R, p = M;
     }
     return f;
   }
@@ -116,10 +426,10 @@ class ht extends nt {
    * of teleporting to the raw last.time while the line still unfurls.
    */
   trailingEndpoint(t, e) {
-    const s = this.stores[e].last();
-    if (!s) return null;
-    const { timeScale: r, yScale: n } = t, l = r.timeToBitmapX(s.time), d = n.valueToBitmapY(this.effectiveValue(t, e, s.time, s.value));
-    return (this.options.entryAnimation ?? "grow") !== "grow" ? { x: l, y: d } : this.chainedTailPositions(t, e)?.get(s.time) ?? { x: l, y: d };
+    const i = this.stores[e].last();
+    if (!i) return null;
+    const { timeScale: s, yScale: o } = t, n = s.timeToBitmapX(i.time), r = o.valueToBitmapY(this.effectiveValue(t, e, i.time, i.value));
+    return (this.options.entryAnimation ?? "grow") !== "grow" ? { x: n, y: r } : this.chainedTailPositions(t, e)?.get(i.time) ?? { x: n, y: r };
   }
   /**
    * Vertical stroke + area gradients for `options.threshold`, pinned to the
@@ -131,191 +441,232 @@ class ht extends nt {
    * the row would miss almost every frame anyway.
    */
   buildThresholdPaint(t, e) {
-    const s = this.options.threshold;
-    if (!s) return null;
-    const { scope: r, yScale: n } = t, { context: l } = r, d = r.bitmapSize.height, L = s.above, k = s.below ?? e, B = Math.min(1, Math.max(0, n.valueToBitmapY(s.value) / d)), f = Math.min(6 * r.verticalPixelRatio, d * 0.02) / d, m = Math.max(0, B - f), h = Math.min(1, B + f), P = l.createLinearGradient(0, 0, 0, d);
-    P.addColorStop(0, L), P.addColorStop(m, L), P.addColorStop(h, k), P.addColorStop(1, k);
-    const o = l.createLinearGradient(0, 0, 0, d);
-    return o.addColorStop(0, D(L, 0.26)), o.addColorStop(m, D(L, 0.14)), o.addColorStop(h, D(k, 0.1)), o.addColorStop(1, D(k, 0.01)), { stroke: P, area: o };
+    const i = this.options.threshold;
+    if (!i) return null;
+    const { scope: s, yScale: o } = t, { context: n } = s, r = s.bitmapSize.height, l = i.above, a = i.below ?? e, p = Math.min(1, Math.max(0, o.valueToBitmapY(i.value) / r)), f = Math.min(6 * s.verticalPixelRatio, r * 0.02) / r, y = Math.max(0, p - f), h = Math.min(1, p + f), m = n.createLinearGradient(0, 0, 0, r);
+    m.addColorStop(0, l), m.addColorStop(y, l), m.addColorStop(h, a), m.addColorStop(1, a);
+    const u = n.createLinearGradient(0, 0, 0, r);
+    return u.addColorStop(0, C(l, 0.26)), u.addColorStop(y, C(l, 0.14)), u.addColorStop(h, C(a, 0.1)), u.addColorStop(1, C(a, 0.01)), { stroke: m, area: u };
+  }
+  /**
+   * Dot markers at each data point (`options.points`). Callers pass the same
+   * animated vertices the stroke was built from, so the dots glide with the
+   * entrance unfurl and live-value smoothing instead of snapping to raw
+   * geometry. Skipped for the frame when the average horizontal spacing falls
+   * under ~1.5 dot diameters — dots that dense melt into a fat line and hide
+   * the stroke.
+   */
+  drawPointMarkers(t) {
+    const e = this.options.points;
+    if (!e?.visible) return;
+    const { context: i, points: s, pixelRatio: o, color: n } = t;
+    if (s.length === 0) return;
+    const r = Math.max(1, (e.radius ?? 3) * o);
+    if (!(s.length > 1 && (s[s.length - 1].x - s[0].x) / (s.length - 1) < r * 3)) {
+      i.beginPath();
+      for (const l of s)
+        i.moveTo(l.x + r, l.y), i.arc(l.x, l.y, r, 0, Math.PI * 2);
+      i.fillStyle = e.color ?? n, i.fill();
+    }
   }
   /** Each layer drawn independently */
   renderOff(t) {
-    const { scope: e, timeScale: s, yScale: r } = t, { context: n } = e, l = s.getRange(), { verticalPixelRatio: d } = e, L = this.options.strokeWidth > 0, k = Math.max(1, Math.round(this.options.strokeWidth * d)), B = this.options.entryAnimation ?? "grow", f = lt(this.options.linePainter ?? this.options.curve ?? "straight"), m = {
-      ctx: n,
+    const { scope: e, timeScale: i, yScale: s } = t, { context: o } = e, n = i.getRange(), { verticalPixelRatio: r } = e, l = this.options.strokeWidth > 0, a = Math.max(1, Math.round(this.options.strokeWidth * r)), p = this.options.entryAnimation ?? "grow", f = ht(this.options.linePainter ?? this.options.curve ?? "straight"), y = {
+      ctx: o,
       theme: t.theme,
       horizontalPixelRatio: e.horizontalPixelRatio,
-      verticalPixelRatio: d
+      verticalPixelRatio: r
     };
     for (let h = 0; h < this.stores.length; h++) {
-      const P = this.getLayerAlpha(h);
-      if (P <= 0) continue;
-      let o = this.stores[h].getVisibleData(l.from, l.to);
-      const C = e.mediaSize.width;
-      if (o.length > C * 2 && (o = K(o, Math.round(C * 1.5))), o.length < 2) continue;
-      const y = this.stores[h].last()?.value ?? o[o.length - 1].value, g = this.resolveLayerColor(h, y), I = this.buildThresholdPaint(t, g), E = o[o.length - 1], b = this.stores[h].last(), W = b !== void 0 && E.time === b.time, Y = W ? this.entranceProgress(t, h, E.time) : 1, N = W && B === "fade" && Y < 1, T = (W ? this.trailingEndpoint(t, h) : null) ?? {
-        x: s.timeToBitmapX(E.time),
-        y: r.valueToBitmapY(this.effectiveValue(t, h, E.time, E.value))
-      }, z = T.x, i = T.y, c = W && B === "grow" ? this.chainedTailPositions(t, h) : null, a = P < 1;
-      (a || N) && (n.save(), a && (n.globalAlpha *= P), N && (n.globalAlpha *= Y));
-      const S = o.length - 1, p = [];
-      let x = null;
-      for (let u = 0; u < S; u++) {
-        const w = o[u].value;
-        if (!Number.isFinite(w)) {
-          x = null;
+      const m = this.getLayerAlpha(h);
+      if (m <= 0) continue;
+      let u = this.stores[h].getVisibleData(n.from, n.to);
+      const A = e.mediaSize.width;
+      if (u.length > A * 2 && (u = j(u, Math.round(A * 1.5))), u.length < 2) continue;
+      const R = this.stores[h].last()?.value ?? u[u.length - 1].value, M = this.resolveLayerColor(h, R), I = this.buildThresholdPaint(t, M), F = u[u.length - 1], z = this.stores[h].last(), D = z !== void 0 && F.time === z.time, N = D ? this.entranceProgress(h, F.time) : 1, W = D && p === "fade" && N < 1, E = (D ? this.trailingEndpoint(t, h) : null) ?? {
+        x: i.timeToBitmapX(F.time),
+        y: s.valueToBitmapY(this.effectiveValue(t, h, F.time, F.value))
+      }, G = E.x, c = E.y, x = D && p === "grow" ? this.chainedTailPositions(t, h) : null, b = m < 1;
+      (b || W) && (o.save(), b && (o.globalAlpha *= m), W && (o.globalAlpha *= N));
+      const S = u.length - 1, d = [];
+      let T = null;
+      for (let P = 0; P < S; P++) {
+        const B = u[P].value;
+        if (!Number.isFinite(B)) {
+          T = null;
           continue;
         }
-        x || (x = [], p.push(x));
-        const A = c?.get(o[u].time);
-        if (A)
-          x.push({ x: A.x, y: A.y });
+        T || (T = [], d.push(T));
+        const g = x?.get(u[P].time);
+        if (g)
+          T.push({ x: g.x, y: g.y });
         else {
-          const O = r.valueToBitmapY(this.effectiveValue(t, h, o[u].time, w));
-          x.push({ x: s.timeToBitmapX(o[u].time), y: O });
+          const L = s.valueToBitmapY(this.effectiveValue(t, h, u[P].time, B));
+          T.push({ x: i.timeToBitmapX(u[P].time), y: L });
         }
       }
-      const F = o[S]?.value, _ = Number.isFinite(z) && Number.isFinite(i) && Number.isFinite(F), H = B === "grow" && Y < 1;
-      let X = null;
-      if (_ && (x ? (x.push({ x: z, y: i }), X = x) : p.push([{ x: z, y: i }])), L && p.some((u) => u.length >= 2)) {
-        n.beginPath();
-        for (const u of p)
-          u.length < 2 || f(m, { points: u, color: g, lineWidth: k, closing: !1, grew: H && u === X });
-        n.strokeStyle = I ? I.stroke : g, n.lineWidth = k, n.lineJoin = "round", n.lineCap = "round", n.stroke();
+      const k = u[S]?.value, V = Number.isFinite(G) && Number.isFinite(c) && Number.isFinite(k), X = p === "grow" && N < 1;
+      let H = null;
+      if (V && (T ? (T.push({ x: G, y: c }), H = T) : d.push([{ x: G, y: c }])), l && d.some((P) => P.length >= 2)) {
+        o.beginPath();
+        for (const P of d)
+          P.length < 2 || f(y, { points: P, color: M, lineWidth: a, closing: !1, grew: X && P === H });
+        o.strokeStyle = I ? I.stroke : M, o.lineWidth = a, o.lineJoin = "round", o.lineCap = "round", o.stroke();
       }
-      if (L) {
-        const u = Math.max(1, k / 2);
-        let w = !1;
-        for (const A of p)
-          A.length === 1 && (w || (n.beginPath(), w = !0), n.moveTo(A[0].x + u, A[0].y), n.arc(A[0].x, A[0].y, u, 0, Math.PI * 2));
-        w && (n.fillStyle = g, n.fill());
+      if (l) {
+        const P = Math.max(1, a / 2);
+        let B = !1;
+        for (const g of d)
+          g.length === 1 && (B || (o.beginPath(), B = !0), o.moveTo(g[0].x + P, g[0].y), o.arc(g[0].x, g[0].y, P, 0, Math.PI * 2));
+        B && (o.fillStyle = M, o.fill());
       }
-      if (this.options.area.visible) {
-        const u = e.bitmapSize.height;
-        let w;
+      if (this.options.area.visible && !this.introGhostPass) {
+        const P = e.bitmapSize.height;
+        let B;
         if (I)
-          w = I.area;
+          B = I.area;
         else {
-          const A = String(h), O = this.areaGradientCache.get(A);
-          O && O.bottomY === u && O.color === g ? w = O.gradient : (w = n.createLinearGradient(0, 0, 0, u), w.addColorStop(0, D(g, 0.12)), w.addColorStop(1, D(g, 0.01)), this.areaGradientCache.set(A, { gradient: w, bottomY: u, color: g }));
+          const g = String(h), L = this.areaGradientCache.get(g);
+          L && L.bottomY === P && L.color === M ? B = L.gradient : (B = o.createLinearGradient(0, 0, 0, P), B.addColorStop(0, C(M, 0.12)), B.addColorStop(1, C(M, 0.01)), this.areaGradientCache.set(g, { gradient: B, bottomY: P, color: M }));
         }
-        n.fillStyle = w;
-        for (const A of p)
-          A.length < 2 || (n.beginPath(), f(m, { points: A, color: g, lineWidth: k, closing: !0, grew: H && A === X }), n.lineTo(A[A.length - 1].x, u), n.lineTo(A[0].x, u), n.closePath(), n.fill());
+        o.fillStyle = B;
+        for (const g of d)
+          g.length < 2 || (o.beginPath(), f(y, { points: g, color: M, lineWidth: a, closing: !0, grew: X && g === H }), o.lineTo(g[g.length - 1].x, P), o.lineTo(g[0].x, P), o.closePath(), o.fill());
+      }
+      if (this.options.points?.visible) {
+        const P = [];
+        for (const B of d)
+          for (const g of B) P.push(g);
+        this.drawPointMarkers({ context: o, points: P, pixelRatio: e.horizontalPixelRatio, color: M });
       }
-      (N || a) && n.restore();
+      (W || b) && o.restore();
     }
   }
   /** Stacked area rendering */
   renderStacked(t, e) {
-    const { scope: s, timeScale: r, yScale: n } = t, { context: l } = s, d = r.getRange(), { verticalPixelRatio: L } = s, k = this.options.strokeWidth > 0, B = Math.max(1, Math.round(this.options.strokeWidth * L)), f = this.options.curve ?? "straight", m = s.mediaSize.width, h = this.stores.map((i, c) => {
-      if (this.getLayerAlpha(c) <= 0) return [];
-      let a = i.getVisibleData(d.from, d.to);
-      return a.length > m * 2 && (a = K(a, Math.round(m * 1.5))), a;
-    }), P = /* @__PURE__ */ new Set();
-    for (const i of h)
-      for (const c of i) P.add(c.time);
-    const o = Array.from(P).sort((i, c) => i - c);
-    if (o.length < 2) return;
-    const C = h.map((i, c) => {
-      const a = /* @__PURE__ */ new Map(), S = this.getLayerAlpha(c);
-      for (const p of i) a.set(p.time, this.effectiveValue(t, c, p.time, p.value) * S);
-      return a;
-    }), y = Array.from({ length: this.stores.length }, () => new Array(o.length).fill(0));
-    for (let i = 0; i < o.length; i++) {
-      const c = o[i];
-      let a = 0;
+    const { scope: i, timeScale: s, yScale: o } = t, { context: n } = i, r = s.getRange(), { verticalPixelRatio: l } = i, a = this.options.strokeWidth > 0, p = Math.max(1, Math.round(this.options.strokeWidth * l)), f = this.options.curve ?? "straight", y = i.mediaSize.width, h = this.stores.map((c, x) => {
+      if (this.getLayerAlpha(x) <= 0) return [];
+      let b = c.getVisibleData(r.from, r.to);
+      return b.length > y * 2 && (b = j(b, Math.round(y * 1.5))), b;
+    }), m = /* @__PURE__ */ new Set();
+    for (const c of h)
+      for (const x of c) m.add(x.time);
+    const u = Array.from(m).sort((c, x) => c - x);
+    if (u.length < 2) return;
+    const A = h.map((c, x) => {
+      const b = /* @__PURE__ */ new Map();
+      if (c.length === 0) return b;
+      const S = this.getLayerAlpha(x), d = c[0].time;
+      for (const T of u) {
+        if (T < d) continue;
+        const k = U(c, T, (V) => this.effectiveValue(t, x, V.time, V.value));
+        k !== null && b.set(T, k * S);
+      }
+      return b;
+    }), R = Array.from({ length: this.stores.length }, () => new Array(u.length).fill(0));
+    for (let c = 0; c < u.length; c++) {
+      const x = u[c];
+      let b = 0;
       if (e)
-        for (let p = 0; p < this.stores.length; p++) {
-          const x = C[p].get(c);
-          Number.isFinite(x) && (a += x);
+        for (let d = 0; d < this.stores.length; d++) {
+          const T = A[d].get(x);
+          Number.isFinite(T) && (b += T);
         }
       let S = 0;
-      for (let p = 0; p < this.stores.length; p++) {
-        const x = C[p].get(c), F = Number.isFinite(x) ? x : 0;
-        S += e && a > 0 ? F / a * 100 : F, y[p][i] = S;
+      for (let d = 0; d < this.stores.length; d++) {
+        const T = A[d].get(x), k = Number.isFinite(T) ? T : 0;
+        S += e && b > 0 ? k / b * 100 : k, R[d][c] = S;
       }
     }
-    const g = this.options.entryAnimation ?? "grow", I = /* @__PURE__ */ new Map();
-    for (let i = 0; i < o.length; i++) I.set(o[i], i);
-    const E = Array.from({ length: this.stores.length }, () => []), b = new Array(this.stores.length).fill(1);
-    for (let i = 0; i < this.stores.length; i++) {
-      if (this.getLayerAlpha(i) <= 0) continue;
-      const c = this.unsettledTail(t, i), a = c.length;
-      if (a === 0) continue;
+    const M = this.options.entryAnimation ?? "grow", I = /* @__PURE__ */ new Map();
+    for (let c = 0; c < u.length; c++) I.set(u[c], c);
+    const F = new Array(this.stores.length).fill(1);
+    for (let c = 0; c < this.stores.length; c++) {
+      if (this.getLayerAlpha(c) <= 0) continue;
+      const x = this.unsettledTail(c), b = x.length;
+      if (b === 0) continue;
       let S = !0;
-      for (let F = 0; F < a; F++)
-        if (I.get(c[F].time) !== o.length - a + F) {
+      for (let d = 0; d < b; d++)
+        if (I.get(x[d].time) !== u.length - b + d) {
           S = !1;
           break;
         }
-      if (!S) continue;
-      const p = this.stores[i].getAll(), x = p.length - 1 - a;
-      x < 0 || I.get(p[x].time) === o.length - a - 1 && (E[i] = c.map((F) => J(F.progress)), b[i] = c[a - 1].progress);
+      S && (F[c] = x[b - 1].progress);
     }
-    const W = (i, c) => {
-      const a = c.length;
-      if (!(a === 0 || i.length < a + 1))
-        for (let S = 0; S < a; S++) {
-          const p = i.length - a + S, x = i[p - 1], F = i[p];
-          i[p] = [U(x[0], F[0], c[S]), U(x[1], F[1], c[S])];
+    const z = [];
+    if (M === "grow")
+      for (let c = u.length - 1; c >= 0; c--) {
+        const x = u[c];
+        let b = 1, S = !1;
+        for (let d = 0; d < this.stores.length; d++) {
+          if (this.getLayerAlpha(d) <= 0 || this.entries[d]?.get(x) === void 0) continue;
+          const T = this.entranceProgress(d, x);
+          T >= 1 || (S = !0, T < b && (b = T));
         }
-    }, Y = s.bitmapSize.height;
-    let N = -1, T = -1;
-    for (let i = 0; i < this.stores.length; i++)
-      if (!(this.getLayerAlpha(i) <= 0))
-        if (N < 0)
-          N = i;
-        else {
-          T = i;
-          break;
+        if (!S) break;
+        z.unshift(_(b));
+      }
+    const D = (c, x) => {
+      const b = x.length;
+      if (!(b === 0 || c.length < b + 1))
+        for (let S = 0; S < b; S++) {
+          const d = c.length - b + S, T = c[d - 1], k = c[d];
+          c[d] = [Y(T[0], k[0], x[S]), Y(T[1], k[1], x[S])];
         }
-    const z = N >= 0 ? this.getLayerAlpha(N) : 1;
-    for (let i = this.stores.length - 1; i >= 0; i--) {
-      const c = this.getLayerAlpha(i);
-      if (c <= 0) continue;
-      const a = this.stores[i].last()?.value ?? 0, S = this.resolveLayerColor(i, a), p = E[i];
-      let x = -1;
-      for (let R = i - 1; R >= 0; R--)
-        if (this.getLayerAlpha(R) > 0) {
-          x = R;
+    }, N = i.bitmapSize.height;
+    let W = -1, E = -1;
+    for (let c = 0; c < this.stores.length; c++)
+      if (!(this.getLayerAlpha(c) <= 0))
+        if (W < 0)
+          W = c;
+        else {
+          E = c;
           break;
         }
-      const F = x >= 0 ? E[x] : [], _ = i === N, H = T >= 0 && i === T && z < 1, X = [];
-      for (let R = 0; R < o.length; R++) {
-        const V = i > 0 ? n.valueToBitmapY(y[i - 1][R]) : Y;
-        let G = V;
-        _ ? G = Y : H && (G = V + (Y - V) * (1 - z)), X.push([r.timeToBitmapX(o[R]), G]);
+    const G = W >= 0 ? this.getLayerAlpha(W) : 1;
+    for (let c = this.stores.length - 1; c >= 0; c--) {
+      const x = this.getLayerAlpha(c);
+      if (x <= 0) continue;
+      const b = this.stores[c].last()?.value ?? 0, S = this.resolveLayerColor(c, b), d = c === W, T = E >= 0 && c === E && G < 1, k = [];
+      for (let g = 0; g < u.length; g++) {
+        const L = c > 0 ? o.valueToBitmapY(R[c - 1][g]) : N;
+        let O = L;
+        d ? O = N : T && (O = L + (N - L) * (1 - G)), k.push([s.timeToBitmapX(u[g]), O]);
       }
-      g === "grow" && W(X, F);
-      const u = [];
-      for (let R = 0; R < o.length; R++) {
-        let V = n.valueToBitmapY(y[i][R]);
-        _ && c < 1 && (V = Y + (V - Y) * c), u.push([r.timeToBitmapX(o[R]), V]);
+      M === "grow" && !d && D(k, z);
+      const V = [];
+      for (let g = 0; g < u.length; g++) {
+        let L = o.valueToBitmapY(R[c][g]);
+        d && x < 1 && (L = N + (L - N) * x), V.push([s.timeToBitmapX(u[g]), L]);
       }
-      g === "grow" && W(u, p);
-      const w = $(u), A = Q(w, f, g === "grow" && p.length > 0), O = g === "fade" && b[i] < 1;
-      if (O && (l.save(), l.globalAlpha = b[i]), this.options.area.visible) {
-        let R = u[0][1], V = X[0][1];
-        for (let M = 1; M < u.length; M++)
-          u[M][1] < R && (R = u[M][1]);
-        for (let M = 1; M < X.length; M++)
-          X[M][1] > V && (V = X[M][1]);
-        let G = D(S, 0.25);
-        if (V > R + 0.5) {
-          const M = l.createLinearGradient(0, R, 0, V);
-          M.addColorStop(0, D(S, 0.25)), M.addColorStop(1, D(S, 0.05)), G = M;
+      M === "grow" && D(V, z);
+      const X = Z(V), H = q(X, f, M === "grow" && z.length > 0), P = M === "fade" && F[c] < 1;
+      if (P && (n.save(), n.globalAlpha *= F[c]), this.options.area.visible && !this.introGhostPass) {
+        let g = V[0][1], L = k[0][1];
+        for (let w = 1; w < V.length; w++)
+          V[w][1] < g && (g = V[w][1]);
+        for (let w = 1; w < k.length; w++)
+          k[w][1] > L && (L = k[w][1]);
+        let O = C(S, 0.25);
+        if (L > g + 0.5) {
+          const w = n.createLinearGradient(0, g, 0, L);
+          w.addColorStop(0, C(S, 0.25)), w.addColorStop(1, C(S, 0.05)), O = w;
         }
-        if (l.beginPath(), l.moveTo(w[0].x, w[0].y), tt(l, A), _)
-          for (let M = X.length - 1; M >= 0; M--)
-            l.lineTo(X[M][0], X[M][1]);
+        if (n.beginPath(), n.moveTo(X[0].x, X[0].y), K(n, H), d)
+          for (let w = k.length - 1; w >= 0; w--)
+            n.lineTo(k[w][0], k[w][1]);
         else {
-          const M = $(X), st = Q(M, f, g === "grow" && F.length > 0), q = M[M.length - 1];
-          l.lineTo(q.x, q.y), at(l, M, st);
+          const w = Z(k), nt = q(w, f, M === "grow" && z.length > 0), J = w[w.length - 1];
+          n.lineTo(J.x, J.y), ft(n, w, nt);
         }
-        l.closePath(), l.fillStyle = G, l.fill();
+        n.closePath(), n.fillStyle = O, n.fill();
+      }
+      const B = a && x < 1;
+      if (B && (n.save(), n.globalAlpha *= x), a && (n.beginPath(), n.moveTo(X[0].x, X[0].y), K(n, H), n.strokeStyle = S, n.lineWidth = p, n.lineJoin = "round", n.lineCap = "round", n.stroke()), B && n.restore(), this.options.points?.visible) {
+        const g = x < 1;
+        g && (n.save(), n.globalAlpha *= x), this.drawPointMarkers({ context: n, points: X, pixelRatio: i.horizontalPixelRatio, color: S }), g && n.restore();
       }
-      const j = k && c < 1;
-      j && (l.save(), l.globalAlpha *= c), k && (l.beginPath(), l.moveTo(w[0].x, w[0].y), tt(l, A), l.strokeStyle = S, l.lineWidth = B, l.lineJoin = "round", l.lineCap = "round", l.stroke()), j && l.restore(), O && l.restore();
+      P && n.restore();
     }
   }
   /**
@@ -324,97 +675,54 @@ class ht extends nt {
    */
   drawOverlay(t) {
     this.tickAnimations(performance.now());
-    const { scope: e, timeScale: s, yScale: r, crosshair: n, dataInterval: l } = t, d = e, L = this.options.pulseMs, k = L > 0 ? performance.now() / (L * 2 * Math.PI) % 1 : 0;
-    if (n) {
-      const B = this.options.stacking, f = 4 * d.horizontalPixelRatio, m = [], h = [];
-      for (let o = 0; o < this.stores.length; o++) {
-        const C = this.stores[o].findNearest(n.time, l);
-        C ? (m.push(C.value), h.push(C.time)) : (m.push(0), h.push(null));
-      }
-      const P = [];
-      if (B === "off")
-        for (const o of m) P.push(o);
-      else {
-        let o = 0;
-        if (B === "percent")
-          for (let y = 0; y < m.length; y++)
-            o += m[y] * this.getLayerAlpha(y);
-        let C = 0;
-        for (let y = 0; y < m.length; y++) {
-          const g = m[y] * this.getLayerAlpha(y);
-          C += B === "percent" && o > 0 ? g / o * 100 : g, P.push(C);
-        }
-      }
-      for (let o = 0; o < this.stores.length; o++) {
-        const C = h[o];
-        if (C === null) continue;
-        const y = this.getLayerAlpha(o);
-        if (y <= 0) continue;
-        const g = this.resolveLayerColor(o, m[o]), I = s.timeToBitmapX(C), E = r.valueToBitmapY(P[o]), b = y < 1;
-        b && (e.context.save(), e.context.globalAlpha *= y), e.context.save(), e.context.globalAlpha *= 0.25, e.context.beginPath(), e.context.arc(I, E, f + 3 * d.horizontalPixelRatio, 0, Math.PI * 2), e.context.fillStyle = g, e.context.fill(), e.context.restore(), e.context.beginPath(), e.context.arc(I, E, f, 0, Math.PI * 2), e.context.fillStyle = g, e.context.fill(), b && e.context.restore();
+    const { scope: e, timeScale: i, yScale: s, crosshair: o, dataInterval: n } = t, r = e, l = this.options.pulseMs, a = l > 0 ? performance.now() / (l * 2 * Math.PI) % 1 : 0;
+    if (o) {
+      const y = this.options.stacking, h = 4 * r.horizontalPixelRatio;
+      for (let m = 0; m < this.stores.length; m++) {
+        const u = this.getLayerAlpha(m);
+        if (u <= 0) continue;
+        const A = this.stores[m].findNearest(o.time, n);
+        if (!A) continue;
+        const R = this.resolveLayerColor(m, A.value), { x: M, y: I } = y === "off" ? {
+          x: i.timeToBitmapX(A.time),
+          y: s.valueToBitmapY(this.effectiveValue(t, m, A.time, A.value))
+        } : this.stackedPositionAt(t, m, A.time), F = u < 1;
+        F && (e.context.save(), e.context.globalAlpha *= u), e.context.save(), e.context.globalAlpha *= 0.25, e.context.beginPath(), e.context.arc(M, I, h + 3 * r.horizontalPixelRatio, 0, Math.PI * 2), e.context.fillStyle = R, e.context.fill(), e.context.restore(), e.context.beginPath(), e.context.arc(M, I, h, 0, Math.PI * 2), e.context.fillStyle = R, e.context.fill(), F && e.context.restore();
       }
     }
-    if (this.hasPulse && L > 0) {
-      const B = this.options.stacking;
-      for (let f = 0; f < this.stores.length; f++) {
-        const m = this.getLayerAlpha(f);
+    const p = this.introWave.active && this.introDirectives?.clip !== void 0;
+    let f = 1;
+    if (p && (f = Math.max(0, (this.introWave.linear() - (1 - $)) / $)), this.hasPulse && l > 0 && f > 0) {
+      const y = this.options.stacking;
+      for (let h = 0; h < this.stores.length; h++) {
+        const m = this.getLayerAlpha(h);
         if (m <= 0) continue;
-        const h = this.stores[f].last()?.value ?? 0, P = this.resolveLayerColor(f, h);
-        if (B === "off") {
-          const b = this.trailingEndpoint(t, f);
-          if (!b) continue;
+        const u = this.stores[h].last()?.value ?? 0, A = this.resolveLayerColor(h, u);
+        if (y === "off") {
+          const F = this.trailingEndpoint(t, h);
+          if (!F) continue;
           this.drawPulse({
             ctx: e.context,
-            x: b.x,
-            y: b.y,
-            color: P,
-            pixelRatio: d.horizontalPixelRatio,
-            phase: k,
-            alpha: m
+            x: F.x,
+            y: F.y,
+            color: A,
+            pixelRatio: r.horizontalPixelRatio,
+            phase: a,
+            alpha: m * f
           });
           continue;
         }
-        const o = this.stores[f].last();
-        if (!o) continue;
-        const C = o.time, y = B === "percent", g = (b) => {
-          const W = (T) => {
-            const z = this.getLayerAlpha(T);
-            if (z <= 0) return 0;
-            const i = T === f && b === C ? o : this.stores[T].findNearest(b, 0);
-            return !i || i.time !== b ? 0 : this.effectiveValue(t, T, b, i.value) * z;
-          };
-          let Y = 0;
-          if (y)
-            for (let T = 0; T < this.stores.length; T++)
-              Y += W(T);
-          let N = 0;
-          for (let T = 0; T <= f; T++) {
-            const z = W(T);
-            N += y && Y > 0 ? z / Y * 100 : z;
-          }
-          return N;
-        };
-        let I = s.timeToBitmapX(C), E = r.valueToBitmapY(g(C));
-        if ((this.options.entryAnimation ?? "grow") === "grow") {
-          const b = this.unsettledTail(t, f), W = this.stores[f].getAll(), Y = W.length - 1 - b.length;
-          if (b.length > 0 && Y >= 0) {
-            const N = W[Y];
-            let T = s.timeToBitmapX(N.time), z = r.valueToBitmapY(g(N.time));
-            for (let i = 0; i < b.length; i++) {
-              const c = W[Y + 1 + i], a = J(b[i].progress), S = s.timeToBitmapX(c.time), p = r.valueToBitmapY(g(c.time));
-              T = U(T, S, a), z = U(z, p, a);
-            }
-            I = T, E = z;
-          }
-        }
+        const R = this.stores[h].last();
+        if (!R) continue;
+        const { x: M, y: I } = this.stackedPositionAt(t, h, R.time);
         this.drawPulse({
           ctx: e.context,
-          x: I,
-          y: E,
-          color: P,
-          pixelRatio: d.horizontalPixelRatio,
-          phase: k,
-          alpha: m
+          x: M,
+          y: I,
+          color: A,
+          pixelRatio: r.horizontalPixelRatio,
+          phase: a,
+          alpha: m * f
         });
       }
     }
@@ -422,25 +730,25 @@ class ht extends nt {
   drawPulse({
     ctx: t,
     x: e,
-    y: s,
-    color: r,
-    pixelRatio: n,
-    phase: l,
-    alpha: d = 1
+    y: i,
+    color: s,
+    pixelRatio: o,
+    phase: n,
+    alpha: r = 1
   }) {
-    const L = 3 * n, k = 0.4 + 0.6 * Math.abs(Math.sin(l * 2 * Math.PI)), B = L + 4 * n * k, f = d < 1;
-    f && (t.save(), t.globalAlpha *= d), t.beginPath(), t.arc(e, s, B, 0, Math.PI * 2), t.fillStyle = D(r, k * 0.3), t.fill(), t.beginPath(), t.arc(e, s, L, 0, Math.PI * 2), t.fillStyle = r, t.fill(), f && t.restore();
+    const l = 3 * o, a = 0.4 + 0.6 * Math.abs(Math.sin(n * 2 * Math.PI)), p = l + 4 * o * a, f = r < 1;
+    f && (t.save(), t.globalAlpha *= r), t.beginPath(), t.arc(e, i, p, 0, Math.PI * 2), t.fillStyle = C(s, a * 0.3), t.fill(), t.beginPath(), t.arc(e, i, l, 0, Math.PI * 2), t.fillStyle = s, t.fill(), f && t.restore();
   }
 }
-const xt = {
+const Pt = {
   type: "line",
-  create: ({ theme: v, layerCount: t }, e) => new ht(t, {
+  create: ({ theme: v, layerCount: t }, e) => new mt(t, {
     colors: t === 1 ? [v.line.color] : v.seriesColors.slice(0, t),
     strokeWidth: v.line.width,
     ...e
   })
 };
 export {
-  ht as LineRenderer,
-  xt as LineSeriesDef
+  mt as LineRenderer,
+  Pt as LineSeriesDef
 };