@wick-charts/vue 0.5.1 → 0.6.1

package/dist/core/dist/series/candlestick.js

@@ -1,65 +1,72 @@
-import { Animator as G } from "../animation/animator.js";
-import { DEFAULT_CANDLESTICK_SMOOTH as U, DEFAULT_CANDLESTICK_ENTRY as X } from "../animation/config.js";
-import { easeOutCubic as j } from "../animation/easing.js";
-import { ScalarSpring as P } from "../animation/scalar-spring.js";
-import { decimateOHLCData as q } from "../data/decimation.js";
-import { TimeSeriesStore as J } from "../data/store.js";
-import { resolveCandlestickBodyColor as E } from "../theme/resolve.js";
-import { hexToRgba as $ } from "../utils/color.js";
-import { clamp as Q, lerp as V } from "../utils/math.js";
-import { isPoisonedNumber as N, reportPoisonedData as Z } from "../utils/poisoned-data-reporter.js";
-import { normalizeOHLCArray as tt, normalizeTime as F } from "../utils/time.js";
-import { fillRoundedRect as H } from "./painters/canvas-path.js";
-import { resolveCandlePainter as et } from "./painters/resolve.js";
-const it = 0.15, ot = 5e-3;
-class st {
+import { Animator as st } from "../animation/animator.js";
+import { DEFAULT_HISTORY_REVEAL as tt, DEFAULT_CANDLESTICK_INTRO as it, DEFAULT_CANDLESTICK_SMOOTH as et, DEFAULT_CANDLESTICK_ENTRY as ot } from "../animation/config.js";
+import { easeOutCubic as nt } from "../animation/easing.js";
+import { IntroWave as U } from "../animation/intro-wave.js";
+import { ScalarSpring as V } from "../animation/scalar-spring.js";
+import { decimateOHLCData as at } from "../data/decimation.js";
+import { TimeSeriesStore as rt } from "../data/store.js";
+import { resolveCandlestickBodyColor as I } from "../theme/resolve.js";
+import { hexToRgba as K, mixColors as Q } from "../utils/color.js";
+import { clamp as _, lerp as $ } from "../utils/math.js";
+import { isPoisonedNumber as N, reportPoisonedData as ht } from "../utils/poisoned-data-reporter.js";
+import { normalizeOHLCArray as G, normalizeTime as J } from "../utils/time.js";
+import { candleUnfoldIntro as lt } from "./candlestick-intro.js";
+import { fillRoundedRect as Z } from "./painters/canvas-path.js";
+import { resolveCandlePainter as mt } from "./painters/resolve.js";
+import { fadeIntro as ct } from "./wave-intro.js";
+const pt = 0.15, ut = 5e-3;
+class dt {
   #t;
-  #e;
-  #o;
-  #n;
   #i;
   #s;
+  #r;
+  #e;
+  #n;
   // Sticky once any seen candle carries volume — mirrors the old lerp, which
   // only emitted `volume` when a side had it, so a volume-less candle stays
   // volume-less and the histogram keeps skipping it.
-  #r;
+  #h;
   constructor(t) {
-    this.#t = new P(t.open), this.#e = new P(t.high), this.#o = new P(t.low), this.#n = new P(t.close), this.#i = new P(t.volume ?? 0), this.#s = t.time, this.#r = t.volume !== void 0;
+    this.#t = new V(t.open), this.#i = new V(t.high), this.#s = new V(t.low), this.#r = new V(t.close), this.#e = new V(t.volume ?? 0), this.#n = t.time, this.#h = t.volume !== void 0;
   }
-  retarget(t, e = {}) {
-    this.#s = t.time, t.volume !== void 0 && (this.#r = !0), this.#t.retarget(t.open, e), this.#e.retarget(t.high, e), this.#o.retarget(t.low, e), this.#n.retarget(t.close, e), this.#i.retarget(t.volume ?? 0, e);
+  retarget(t, i = {}) {
+    this.#n = t.time, t.volume !== void 0 && (this.#h = !0), this.#t.retarget(t.open, i), this.#i.retarget(t.high, i), this.#s.retarget(t.low, i), this.#r.retarget(t.close, i), this.#e.retarget(t.volume ?? 0, i);
   }
   tick(t) {
-    const e = this.#t.tick(t), s = this.#e.tick(t), i = this.#o.tick(t), r = this.#n.tick(t), o = this.#i.tick(t);
-    return e || s || i || r || o;
+    const i = this.#t.tick(t), e = this.#i.tick(t), o = this.#s.tick(t), a = this.#r.tick(t), s = this.#e.tick(t);
+    return i || e || o || a || s;
   }
   get current() {
     const t = {
-      time: this.#s,
+      time: this.#n,
       open: this.#t.current,
-      high: this.#e.current,
-      low: this.#o.current,
-      close: this.#n.current
+      high: this.#i.current,
+      low: this.#s.current,
+      close: this.#r.current
     };
-    return this.#r && (t.volume = this.#i.current), t;
+    return this.#h && (t.volume = this.#e.current), t;
   }
 }
-const O = 2, nt = { tl: !0, tr: !0, br: !0, bl: !0 }, _ = { tl: !0, tr: !0, br: !1, bl: !1 }, rt = {
+const O = 2, ft = { tl: !0, tr: !0, br: !0, bl: !0 }, j = { tl: !0, tr: !0, br: !1, bl: !1 }, bt = lt(), Yt = ct(), gt = {
   up: { body: "#26a69a", wick: "#26a69a" },
   down: { body: "#ef5350", wick: "#ef5350" },
   bodyWidthRatio: 0.6,
   cornerRadius: O,
-  entryMs: X,
-  smoothMs: U
+  entryMs: ot,
+  smoothMs: et,
+  introMs: it,
+  historyRevealMs: tt
 };
-function I(a) {
+function q(h) {
   return {
-    ...a,
-    entryMs: a.entryMs === !1 ? 0 : a.entryMs ?? X,
-    smoothMs: a.smoothMs === !1 ? 0 : a.smoothMs ?? U
+    ...h,
+    entryMs: h.entryMs === !1 ? 0 : h.entryMs ?? ot,
+    smoothMs: h.smoothMs === !1 ? 0 : h.smoothMs ?? et,
+    introMs: h.introMs === !1 ? 0 : h.introMs ?? it,
+    historyRevealMs: h.historyRevealMs === !1 ? 0 : h.historyRevealMs ?? tt
   };
 }
-class at {
+class xt {
   kind = "candlestick";
   store;
   options;
@@ -72,81 +79,130 @@ class at {
   #t = null;
   /** EMA-smoothed volume scale (tallest visible bar). `null` re-seeds (snaps)
    *  on the next frame — set on construction and bulk data replacement. */
-  #e = null;
+  #i = null;
   /** False while {@link #displayedMaxVol} is still chasing the raw window max —
    *  feeds {@link needsAnimation} so frames keep flowing until it converges. */
-  #o = !0;
+  #s = !0;
   /** Whether the previous frame was rendering decimated (bucketed) candles.
    *  Crossing this boundary changes `volume` semantics (per-candle ↔ summed
    *  bucket), so the volume scale snaps rather than easing — otherwise the EMA
    *  clamps every bar to full band height for ~30 frames. */
-  #n = !1;
+  #r = !1;
   /** Series-level alpha for visibility cross-fade. Chart calls {@link setAlpha} on hide. */
-  #i = new G({
+  #e = new st({
     initial: 1,
     duration: 0,
-    lerp: (t, e, s) => t + (e - t) * s
+    lerp: (t, i, e) => t + (i - t) * e
   });
+  /** Initial-load reveal clock — armed on the first empty → non-empty seed;
+   *  candles reveal in a left-to-right wave across the visible window. */
+  introWave = new U();
+  /** Per-frame intro directives, resolved once per render while the wave
+   *  runs; `null` when no intro is in flight. */
+  #n = null;
+  /** Visible range captured alongside {@link #introDirectives} — positions
+   *  the per-element wave stagger. */
+  #h = null;
+  /** History-prepend reveal clock — armed by {@link prependPoints} so the
+   *  new candles wave in from the data boundary instead of popping. */
+  #o = new U();
+  /** Prepended time span: `from` = deepest new point, `to` = the boundary
+   *  (the pre-prepend first point). Element stagger position is `0` at the
+   *  boundary and `1` at the deepest point. */
+  #a = null;
+  /** Per-frame history-reveal directives; `null` when no reveal is in flight. */
+  #l = null;
+  /** Loading-indicator placeholder shapes handed over by the chart right
+   *  before a prepend (media px relative to `anchorTime`, the data boundary
+   *  they were measured against) — mapped into bitmap space each frame and
+   *  exposed to the reveal fn as {@link CandleIntroFrame.placeholders}.
+   *  Cleared once the reveal settles. */
+  #m = null;
   /** Body gradients keyed by `top|bottom|height` — built once at y=0..h and
    *  positioned per candle via `ctx.translate`, instead of a fresh
    *  `createLinearGradient` for every body on every frame. */
-  #s = /* @__PURE__ */ new Map();
-  constructor(t, e) {
-    this.store = t, this.options = I({ ...rt, ...e }), this.displayedLast = t.last() ?? null;
+  #c = /* @__PURE__ */ new Map();
+  constructor(t, i) {
+    this.store = t, this.options = q({ ...gt, ...i }), this.displayedLast = t.last() ?? null;
   }
   isEntryEnabled() {
     return (this.options.entryAnimation ?? "unfold") !== "none";
   }
   updateOptions(t) {
-    this.options = I({ ...this.options, ...t });
+    this.options = q({ ...this.options, ...t });
   }
   getColor() {
-    return E(this.options.up.body);
+    return I(this.options.up.body);
   }
   // --- SeriesRenderer interface implementation ------------------------------
   setData(t) {
-    this.store.setData(tt(t ?? []));
+    const i = this.store.length > 0;
+    this.store.setData(G(t ?? [])), !i && this.store.length > 0 && this.introWave.arm(this.options.introMs);
     const e = this.store.last();
-    this.displayedLast = e ?? null, this.#t = null, this.entries.clear(), this.#e = null;
+    this.displayedLast = e ?? null, this.#t = null, this.entries.clear(), this.#i = null, this.#o.finish(), this.#a = null, this.#m = null;
   }
   appendPoint(t) {
-    const e = t, s = F(e.time), i = { ...e, time: s };
-    this.store.append(i), this.displayedLast = i, this.#t = null;
-    const r = this.options.entryMs;
-    this.isEntryEnabled() && r > 0 && this.entries.set(s, { startTime: performance.now() });
+    const i = t, e = J(i.time), o = { ...i, time: e };
+    this.store.append(o), this.displayedLast = o, this.#t = null;
+    const a = this.options.entryMs;
+    this.isEntryEnabled() && a > 0 && this.entries.set(e, { startTime: performance.now() });
+  }
+  prependPoints(t) {
+    if (t.length === 0) return;
+    const i = G(t), e = this.store.first()?.time;
+    this.store.prepend(i), this.#u(i[0].time, e);
+  }
+  /**
+   * Arm (or extend) the history-reveal wave for freshly prepended candles.
+   * While a reveal is already in flight, only the range grows — restarting
+   * the clock would snap half-revealed candles back to invisible.
+   */
+  #u(t, i) {
+    const e = this.options.historyRevealMs;
+    if (!(this.options.historyReveal === "none" || e <= 0 || i === void 0)) {
+      if (this.#o.active && this.#a !== null) {
+        this.#a = { from: Math.min(this.#a.from, t), to: this.#a.to };
+        return;
+      }
+      this.#a = { from: t, to: i }, this.#o.arm(e);
+    }
+  }
+  setHistoryHandoff(t) {
+    const i = this.store.first()?.time;
+    i !== void 0 && (this.#m = { bars: t, anchorTime: i });
   }
   updateLastPoint(t) {
-    const e = t, s = F(e.time), i = { ...e, time: s };
-    this.store.updateLast(i);
-    const r = this.options.smoothMs;
-    if (r <= 0) {
-      this.displayedLast = i, this.#t = null;
+    const i = t, e = J(i.time), o = { ...i, time: e };
+    this.store.updateLast(o);
+    const a = this.options.smoothMs;
+    if (a <= 0) {
+      this.displayedLast = o, this.#t = null;
       return;
     }
-    let o = this.#t;
-    if (o === null) {
-      const l = this.displayedLast ?? i;
-      o = new st(l), this.#t = o;
+    let s = this.#t;
+    if (s === null) {
+      const u = this.displayedLast ?? o;
+      s = new dt(u), this.#t = s;
     }
-    o.retarget(i, { settleMs: r });
+    s.retarget(o, { settleMs: a });
   }
   keepLast(t) {
     if (t < 0) return;
-    const e = this.store.length - t;
-    e <= 0 || this.store.trimStart(e);
+    const i = this.store.length - t;
+    i <= 0 || this.store.trimStart(i);
   }
   getLayerCount() {
     return 1;
   }
-  setLayerVisible(t, e) {
+  setLayerVisible(t, i) {
   }
   isLayerVisible(t) {
     return !0;
   }
   getLayerColors() {
-    return [E(this.options.up.body)];
+    return [I(this.options.up.body)];
   }
-  applyTheme(t, e) {
+  applyTheme(t, i) {
     this.updateOptions({
       up: { ...t.candlestick.up },
       down: { ...t.candlestick.down }
@@ -164,46 +220,51 @@ class at {
    * fully-settled entrance entries. Called from `render()` once per frame.
    */
   tickAnimations(t) {
-    this.#i.tick(t);
-    const e = this.#t;
-    if (e !== null) {
-      const i = e.tick(t);
-      this.displayedLast = e.current, i || (this.#t = null);
+    this.introWave.tick(t), this.#o.tick(t), this.#o.active || (this.#m = null), this.#e.tick(t);
+    const i = this.#t;
+    if (i !== null) {
+      const o = i.tick(t);
+      this.displayedLast = i.current, o || (this.#t = null);
     }
-    const s = this.options.entryMs;
-    if (s <= 0) {
+    const e = this.options.entryMs;
+    if (e <= 0) {
       this.entries.clear();
       return;
     }
-    for (const [i, r] of this.entries)
-      t - r.startTime >= s && this.entries.delete(i);
+    for (const [o, a] of this.entries)
+      t - a.startTime >= e && this.entries.delete(o);
   }
-  /** True while OHLC chase, any per-candle entrance, alpha fade, or the volume
-   *  scale is unsettled. */
+  /** True while OHLC chase, any per-candle entrance, the initial reveal,
+   *  alpha fade, or the volume scale is unsettled. */
   get needsAnimation() {
-    return this.#i.animating || this.#t !== null || this.entries.size > 0 || !this.#o;
+    return this.introWave.active || this.#o.active || this.#e.animating || this.#t !== null || this.entries.size > 0 || !this.#s;
   }
-  /** Abort in-flight per-candle entrance animations. Live-OHLC chase is left intact. */
+  /** Reveal-front position of the initial-load intro; `1` once settled. */
+  getIntroFront() {
+    return this.introWave.sweep();
+  }
+  /** Abort in-flight per-candle entrance animations, including the initial
+   *  reveal. Live-OHLC chase is left intact. */
   cancelEntranceAnimations() {
-    this.entries.clear();
+    this.introWave.finish(), this.entries.clear();
   }
-  setAlpha(t, e) {
-    this.#i.setTarget(t, { duration: e });
+  setAlpha(t, i) {
+    this.#e.setTarget(t, { duration: i });
   }
   getAlpha() {
-    return this.#i.current;
+    return this.#e.current;
   }
   getLastValue() {
     const t = this.store.last();
     return t ? t.close : null;
   }
-  getDataAtTime(t, e) {
-    return this.store.findNearest(t, e);
+  getDataAtTime(t, i) {
+    return this.store.findNearest(t, i);
   }
   // --- TimeSeriesRenderer data queries --------------------------------------
   getTimeBounds() {
-    const t = this.store.first(), e = this.store.last();
-    return !t || !e ? null : { first: t.time, last: e.time };
+    const t = this.store.first(), i = this.store.last();
+    return !t || !i ? null : { first: t.time, last: i.time };
   }
   getLastDataPoint() {
     return this.store.last() ?? null;
@@ -213,214 +274,331 @@ class at {
     return t.length >= 2 ? t[t.length - 2] : null;
   }
   sampleTimes(t) {
-    return this.store.getAll().slice(0, t).map((e) => e.time);
+    return this.store.getAll().slice(0, t).map((i) => i.time);
   }
-  getVisibleDataPoints(t, e) {
-    return this.store.getVisibleData(t, e);
+  getVisibleDataPoints(t, i) {
+    return this.store.getVisibleData(t, i);
   }
-  getValueRange(t, e) {
-    const s = this.store.getVisibleData(t, e);
-    let i = 1 / 0, r = -1 / 0;
-    for (const o of s)
-      Number.isFinite(o.low) && o.low < i && (i = o.low), Number.isFinite(o.high) && o.high > r && (r = o.high);
-    return i === 1 / 0 || r === -1 / 0 ? null : { min: i, max: r };
+  getValueRange(t, i) {
+    const e = this.store.getVisibleData(t, i);
+    let o = 1 / 0, a = -1 / 0;
+    for (const s of e)
+      Number.isFinite(s.low) && s.low < o && (o = s.low), Number.isFinite(s.high) && s.high > a && (a = s.high);
+    return o === 1 / 0 || a === -1 / 0 ? null : { min: o, max: a };
   }
   render(t) {
     this.tickAnimations(performance.now());
-    const { scope: e, timeScale: s, yScale: i, dataInterval: r } = t, { context: o, horizontalPixelRatio: l } = e, M = s.getRange();
-    let h = this.store.getVisibleData(M.from, M.to);
-    const d = e.mediaSize.width, k = h.length > d * 2;
-    if (k && (h = q(h, Math.round(d * 1.5))), h.length === 0) return;
-    const y = this.displayedLast;
-    if (!k && y !== null) {
-      const p = h.length - 1;
-      h[p].time === y.time && (h = [...h.slice(0, p), y]);
+    const { scope: i, timeScale: e, yScale: o, dataInterval: a } = t, { context: s, horizontalPixelRatio: u } = i, y = e.getRange();
+    let m = this.store.getVisibleData(y.from, y.to);
+    const b = i.mediaSize.width, w = m.length > b * 2;
+    if (w && (m = at(m, Math.round(b * 1.5))), m.length === 0) return;
+    const S = this.displayedLast;
+    if (!w && S !== null) {
+      const r = m.length - 1;
+      m[r].time === S.time && (m = [...m.slice(0, r), S]);
+    }
+    if (this.#n = null, this.#h = null, this.introWave.active) {
+      const r = this.options.introAnimation ?? bt;
+      this.#h = y, this.#n = r({
+        progress: this.introWave.linear(),
+        // Plot-area extent, not the canvas bitmap — the canvas also carries
+        // the axis strips, so a width-based front (wipeIntro) would overshoot
+        // the data area.
+        width: e.getMediaWidth() * i.horizontalPixelRatio,
+        height: o.getMediaHeight() * i.verticalPixelRatio,
+        range: y,
+        timeToX: (l) => e.timeToBitmapX(l)
+      });
+    }
+    this.#l = null;
+    const c = this.#a;
+    if (this.#o.active && c !== null) {
+      const r = this.options.historyReveal ?? Yt;
+      if (r !== "none") {
+        let l;
+        const x = this.#m;
+        if (x !== null && x.bars.length > 0) {
+          const P = e.timeToBitmapX(x.anchorTime);
+          l = x.bars.map((k) => ({
+            x: P - k.offsetX * i.horizontalPixelRatio,
+            y: k.y * i.verticalPixelRatio,
+            halfHeight: k.halfHeight * i.verticalPixelRatio,
+            width: k.width * i.horizontalPixelRatio
+          }));
+        }
+        this.#l = r({
+          progress: this.#o.linear(),
+          width: Math.abs(e.timeToBitmapX(c.to) - e.timeToBitmapX(c.from)),
+          height: o.getMediaHeight() * i.verticalPixelRatio,
+          range: c,
+          timeToX: (P) => e.timeToBitmapX(P),
+          placeholders: l
+        });
+      }
     }
-    let c = null;
+    let W = null;
     if (this.entries.size > 0) {
-      const p = this.options.entryMs, u = performance.now();
-      for (const B of h) {
-        const D = this.entries.get(B.time);
-        if (D === void 0) continue;
-        const W = u - D.startTime, C = p <= 0 ? 1 : Math.min(1, Math.max(0, W / p));
-        if (C >= 1) continue;
-        const K = j(C);
-        c === null && (c = /* @__PURE__ */ new Map()), c.set(B.time, K);
+      const r = this.options.entryMs, l = performance.now();
+      for (const x of m) {
+        const P = this.entries.get(x.time);
+        if (P === void 0 || r <= 0) continue;
+        const k = l - P.startTime, z = Math.min(1, Math.max(0, k / r));
+        z >= 1 || (W === null && (W = /* @__PURE__ */ new Map()), W.set(x.time, nt(z)));
       }
     }
-    const L = s.barWidthBitmap(r), m = Math.round(30 * l), b = h.length <= 2 ? Math.min(m, L) : L, w = Math.max(1, Math.round(l));
-    let n = Math.max(1, Math.round(b * this.options.bodyWidthRatio) - 2);
-    (n & 1) !== (w & 1) && (n = n > 1 ? n - 1 : 2);
-    const T = Math.floor(n / 2), Y = k !== this.#n;
-    this.#n = k;
-    const x = Math.round(i.getMediaHeight() * e.verticalPixelRatio);
+    const X = e.barWidthBitmap(a), f = Math.round(30 * u), M = m.length <= 2 ? Math.min(f, X) : X, d = Math.max(1, Math.round(u));
+    let Y = Math.max(1, Math.round(M * this.options.bodyWidthRatio) - 2);
+    (Y & 1) !== (d & 1) && (Y = Y > 1 ? Y - 1 : 2);
+    const R = Math.floor(Y / 2), v = this.#n?.clip;
+    if (v !== void 0) {
+      const r = v.fromX ?? 0, l = v.toX ?? i.bitmapSize.width;
+      s.save(), s.beginPath(), s.rect(r, 0, Math.max(0, l - r), i.bitmapSize.height), s.clip();
+    }
+    const T = this.#l?.clip;
+    let A = !1;
+    if (T !== void 0 && c !== null) {
+      const r = e.timeToBitmapX(c.to), l = Math.abs(r - e.timeToBitmapX(c.from)), x = M, P = T.fromX ?? 0, k = T.toX ?? l;
+      s.save(), s.beginPath(), s.rect(r - k - x, 0, Math.max(0, k - P + x), i.bitmapSize.height), s.rect(r, 0, Math.max(0, i.bitmapSize.width - r), i.bitmapSize.height), s.clip(), A = !0;
+    }
+    const n = w !== this.#r;
+    this.#r = w;
+    const p = Math.round(o.getMediaHeight() * i.verticalPixelRatio);
     this.drawVolume({
-      ctx: o,
-      data: h,
-      timeScale: s,
-      chartHeight: x,
-      barWidth: b,
-      wickWidth: w,
-      entranceByTime: c,
-      snapVolScale: Y,
-      radius: (this.options.cornerRadius ?? O) * l
+      ctx: s,
+      data: m,
+      timeScale: e,
+      chartHeight: p,
+      barWidth: M,
+      wickWidth: d,
+      entranceByTime: W,
+      snapVolScale: n,
+      radius: (this.options.cornerRadius ?? O) * u
     });
-    const f = [], v = [], g = [];
-    let A = null;
-    for (let p = 0; p < h.length; p++) {
-      const u = h[p];
-      if (N(u.open) || N(u.close) || N(u.high) || N(u.low)) {
-        g.push(p), A === null && (A = u);
+    const g = [], L = [], B = [];
+    let C = null;
+    for (let r = 0; r < m.length; r++) {
+      const l = m[r];
+      if (N(l.open) || N(l.close) || N(l.high) || N(l.low)) {
+        B.push(r), C === null && (C = l);
         continue;
       }
-      u.close >= u.open ? f.push(u) : v.push(u);
+      l.close >= l.open ? g.push(l) : L.push(l);
     }
-    A !== null && Z(this, "candlestick", g, `time ${A.time}`);
-    const S = {
-      painter: et(this.options.candlePainter),
+    C !== null && ht(this, "candlestick", B, `time ${C.time}`);
+    const E = {
+      painter: mt(this.options.candlePainter),
       env: {
-        ctx: o,
+        ctx: s,
         theme: t.theme,
-        horizontalPixelRatio: l,
-        verticalPixelRatio: e.verticalPixelRatio
+        horizontalPixelRatio: u,
+        verticalPixelRatio: i.verticalPixelRatio
       },
-      radius: (this.options.cornerRadius ?? O) * l
-    }, R = {
-      ctx: o,
-      timeScale: s,
-      yScale: i,
-      halfBody: T,
-      bodyWidth: n,
-      wickWidth: w,
-      entranceByTime: c,
-      candlePass: S
+      radius: (this.options.cornerRadius ?? O) * u
+    }, D = {
+      ctx: s,
+      timeScale: e,
+      yScale: o,
+      halfBody: R,
+      bodyWidth: Y,
+      wickWidth: d,
+      entranceByTime: W,
+      candlePass: E
     };
     this.drawCandles({
-      ...R,
-      candles: f,
+      ...D,
+      candles: g,
       body: this.options.up.body,
       wickColor: this.options.up.wick
     }), this.drawCandles({
-      ...R,
-      candles: v,
+      ...D,
+      candles: L,
       body: this.options.down.body,
       wickColor: this.options.down.wick
-    });
+    }), A && s.restore(), v !== void 0 && s.restore();
+  }
+  /**
+   * Apply the intro's per-element directive to one element's settled (or
+   * entry-transformed) geometry. Returns `null` when no element directive
+   * is in flight this frame.
+   */
+  introTransform(t) {
+    const i = this.#l?.element, e = this.#a;
+    if (i !== void 0 && e !== null && t.time < e.to) {
+      const m = e.to - e.from, b = m > 0 ? _((e.to - t.time) / m, 0, 1) : 0, w = i({ ...t, position: b, progress: this.#o.progressAt(b) });
+      return this.#p(w, t);
+    }
+    const o = this.#n?.element, a = this.#h;
+    if (o === void 0 || a === null) return null;
+    const s = a.to - a.from, u = s > 0 ? _((t.time - a.from) / s, 0, 1) : 0, y = o({ ...t, position: u, progress: this.introWave.progressAt(u) });
+    return this.#p(y, t);
+  }
+  /** Map a directive's declarative transform onto the element's settled
+   *  geometry. Absolute `topY`/`bottomY` overrides (a morph's arbitrary
+   *  start shape) replace the anchor-relative `unfold` math; offsets apply
+   *  either way. */
+  #p(t, i) {
+    const e = t.unfold ?? 1, o = t.offsetY ?? 0;
+    return {
+      x: i.x + (t.offsetX ?? 0),
+      topY: (t.topY ?? $(i.anchorY, i.topY, e)) + o,
+      bottomY: (t.bottomY ?? $(i.anchorY, i.bottomY, e)) + o,
+      alpha: t.alpha ?? 1,
+      tint: t.tint
+    };
   }
   drawVolume({
     ctx: t,
-    data: e,
-    timeScale: s,
-    chartHeight: i,
-    barWidth: r,
-    wickWidth: o,
-    entranceByTime: l,
-    snapVolScale: M,
-    radius: h
+    data: i,
+    timeScale: e,
+    chartHeight: o,
+    barWidth: a,
+    wickWidth: s,
+    entranceByTime: u,
+    snapVolScale: y,
+    radius: m
   }) {
-    let d = 0;
-    for (const n of e)
-      Number.isFinite(n.volume) && n.volume > d && (d = n.volume);
-    if (d === 0) {
-      this.#e = null, this.#o = !0;
+    let b = 0;
+    for (const d of i)
+      Number.isFinite(d.volume) && d.volume > b && (b = d.volume);
+    if (b === 0) {
+      this.#i = null, this.#s = !0;
       return;
     }
-    this.#e === null || M ? this.#e = d : this.#e += (d - this.#e) * it, this.#o = Math.abs(d - this.#e) <= d * ot;
-    const k = this.#e, y = i * 0.2;
-    let c = Math.max(1, r - 2);
-    (c & 1) !== (o & 1) && (c = c > 1 ? c - 1 : 2);
-    const L = Math.floor(c / 2), m = $(E(this.options.up.body), 0.2), b = $(E(this.options.down.body), 0.2), w = this.options.entryAnimation ?? "unfold";
-    for (const n of e) {
-      if (!Number.isFinite(n.volume) || n.volume <= 0) continue;
-      const T = n.volume, Y = s.timeToBitmapX(n.time), x = Math.min(y, Math.max(1, T / k * y)), f = n.close >= n.open;
-      t.fillStyle = f ? m : b;
-      const v = l?.get(n.time) ?? 1;
-      if (v >= 1 || w === "none") {
-        H(t, {
-          x: Y - L,
-          y: i - x,
+    this.#i === null || y ? this.#i = b : this.#i += (b - this.#i) * pt, this.#s = Math.abs(b - this.#i) <= b * ut;
+    const w = this.#i, S = o * 0.2;
+    let c = Math.max(1, a - 2);
+    (c & 1) !== (s & 1) && (c = c > 1 ? c - 1 : 2);
+    const W = Math.floor(c / 2), X = K(I(this.options.up.body), 0.2), f = K(I(this.options.down.body), 0.2), M = this.options.entryAnimation ?? "unfold";
+    for (const d of i) {
+      if (!Number.isFinite(d.volume) || d.volume <= 0) continue;
+      const Y = d.volume, R = e.timeToBitmapX(d.time), v = Math.min(S, Math.max(1, Y / w * S)), T = d.close >= d.open;
+      t.fillStyle = T ? X : f;
+      const A = u?.get(d.time) ?? 1;
+      let n = { x: R - W, topY: o - v, bottomY: o, alpha: 1 };
+      if (A < 1 && M !== "none") {
+        const g = F(A, M, {
+          x: n.x,
+          barWidth: c,
+          anchorY: o,
+          topY: n.topY,
+          bottomY: n.bottomY
+        });
+        n = { x: g.x, topY: g.topY, bottomY: g.bottomY, alpha: g.alpha };
+      }
+      const p = this.introTransform({
+        element: "volume",
+        time: d.time,
+        x: n.x,
+        topY: n.topY,
+        bottomY: n.bottomY,
+        anchorY: o,
+        barWidth: c
+      });
+      if (p !== null && (n = { x: p.x, topY: p.topY, bottomY: p.bottomY, alpha: n.alpha * p.alpha }), n.alpha >= 1) {
+        Z(t, {
+          x: n.x,
+          y: n.topY,
           width: c,
-          height: x,
-          radius: h,
-          corners: _
+          height: Math.max(1, n.bottomY - n.topY),
+          radius: m,
+          corners: j
         });
         continue;
       }
-      const g = z(v, w, {
-        x: Y - L,
-        barWidth: c,
-        anchorY: i,
-        topY: i - x,
-        bottomY: i
-      });
-      t.save(), t.globalAlpha = g.alpha, H(t, {
-        x: g.x,
-        y: g.topY,
+      t.save(), t.globalAlpha = n.alpha, Z(t, {
+        x: n.x,
+        y: n.topY,
         width: c,
-        height: Math.max(1, g.bottomY - g.topY),
-        radius: h,
-        corners: _
+        height: Math.max(1, n.bottomY - n.topY),
+        radius: m,
+        corners: j
       }), t.restore();
     }
   }
   drawCandles({
     ctx: t,
-    candles: e,
-    timeScale: s,
-    yScale: i,
-    halfBody: r,
-    bodyWidth: o,
-    wickWidth: l,
-    body: M,
-    wickColor: h,
-    entranceByTime: d,
-    candlePass: k
+    candles: i,
+    timeScale: e,
+    yScale: o,
+    halfBody: a,
+    bodyWidth: s,
+    wickWidth: u,
+    body: y,
+    wickColor: m,
+    entranceByTime: b,
+    candlePass: w
   }) {
-    if (e.length === 0) return;
-    const y = this.options.entryAnimation ?? "unfold", c = o + 2;
-    t.fillStyle = h;
-    for (const m of e) {
-      const b = d?.get(m.time) ?? 1, w = s.timeToBitmapX(m.time), n = i.valueToBitmapY(m.open), T = i.valueToBitmapY(m.high), Y = i.valueToBitmapY(m.low), x = w - Math.floor(l / 2);
-      if (b >= 1 || y === "none") {
-        t.fillRect(x, T, l, Y - T);
-        continue;
+    if (i.length === 0) return;
+    const S = this.options.entryAnimation ?? "unfold", c = s + 2, W = w.env.theme.axis.textColor ?? "#787b86";
+    t.fillStyle = m;
+    for (const f of i) {
+      const M = b?.get(f.time) ?? 1, d = e.timeToBitmapX(f.time), Y = o.valueToBitmapY(f.open), R = o.valueToBitmapY(f.high), v = o.valueToBitmapY(f.low), T = d - Math.floor(u / 2);
+      let A = !1, n = { x: T, topY: R, bottomY: v, alpha: 1 };
+      if (M < 1 && S !== "none") {
+        const L = F(M, S, {
+          x: T,
+          barWidth: c,
+          anchorY: Y,
+          topY: R,
+          bottomY: v
+        });
+        n = { x: L.x, topY: L.topY, bottomY: L.bottomY, alpha: L.alpha }, A = !0;
       }
-      const f = z(b, y, {
-        x,
-        barWidth: c,
-        anchorY: n,
-        topY: T,
-        bottomY: Y
+      const p = this.introTransform({
+        element: "wick",
+        time: f.time,
+        x: n.x,
+        topY: n.topY,
+        bottomY: n.bottomY,
+        anchorY: Y,
+        barWidth: c
       });
-      t.save(), t.globalAlpha = f.alpha, t.fillRect(f.x, f.topY, l, Math.max(1, f.bottomY - f.topY)), t.restore();
+      let g = 0;
+      if (p !== null && (n = { x: p.x, topY: p.topY, bottomY: p.bottomY, alpha: n.alpha * p.alpha }, g = p.tint ?? 0, A = !0), !A) {
+        t.fillRect(T, R, u, v - R);
+        continue;
+      }
+      t.save(), t.globalAlpha = n.alpha, g > 0 && (t.fillStyle = Q(m, W, g)), t.fillRect(n.x, n.topY, u, Math.max(1, n.bottomY - n.topY)), t.restore();
     }
-    const L = Array.isArray(M);
-    for (const m of e) {
-      const b = d?.get(m.time) ?? 1, w = s.timeToBitmapX(m.time), n = i.valueToBitmapY(m.open), T = i.valueToBitmapY(m.close), Y = Math.min(n, T), x = Math.max(n, T), f = Math.max(1, x - Y), v = b < 1 && y !== "none";
-      let g = w - r, A = Y, S = f, R = 1;
-      if (v) {
-        const C = z(b, y, {
-          x: w - r,
+    const X = Array.isArray(y);
+    for (const f of i) {
+      const M = b?.get(f.time) ?? 1, d = e.timeToBitmapX(f.time), Y = o.valueToBitmapY(f.open), R = o.valueToBitmapY(f.close), v = Math.min(Y, R), T = Math.max(Y, R), A = Math.max(1, T - v);
+      let n = d - a, p = v, g = T, L = 1, B = !1;
+      if (M < 1 && S !== "none") {
+        const H = F(M, S, {
+          x: n,
           barWidth: c,
-          anchorY: n,
-          topY: Y,
-          bottomY: x
+          anchorY: Y,
+          topY: v,
+          bottomY: T
         });
-        g = C.x, A = C.topY, S = Math.max(1, C.bottomY - C.topY), R = C.alpha;
+        n = H.x, p = H.topY, g = H.bottomY, L = H.alpha, B = !0;
       }
-      v && t.save();
-      const p = Array.isArray(M) ? M[0] : M, u = L && S > 2, B = u ? this.#r(t, M, S) : p;
-      t.fillStyle = B, v && (t.globalAlpha = R), u && t.translate(0, A);
-      const D = u ? 0 : A, W = Q(k.radius, 0, Math.min(o, S) / 2);
-      W < 1 && !this.options.candlePainter ? t.fillRect(g, D, o, S) : k.painter(k.env, {
-        geom: { x: g, y: D, width: o, height: S },
-        fillStyle: B,
-        color: p,
-        corners: nt,
-        radius: W,
-        progress: b,
-        isBullish: m.close >= m.open
-      }), u && t.translate(0, -A), v && t.restore();
+      const C = this.introTransform({
+        element: "body",
+        time: f.time,
+        x: n,
+        topY: p,
+        bottomY: g,
+        anchorY: Y,
+        barWidth: c
+      });
+      let E = 0;
+      C !== null && (n = C.x, p = C.topY, g = C.bottomY, L *= C.alpha, E = C.tint ?? 0, B = !0);
+      const D = B ? Math.max(1, g - p) : A;
+      B && t.save();
+      const r = Array.isArray(y) ? y[0] : y, l = E > 0 ? Q(r, W, E) : r, x = X && D > 2 && E <= 0, P = x ? this.#d(t, y, D) : l;
+      t.fillStyle = P, B && (t.globalAlpha = L), x && t.translate(0, p);
+      const k = x ? 0 : p, z = _(w.radius, 0, Math.min(s, D) / 2);
+      z < 1 && !this.options.candlePainter ? t.fillRect(n, k, s, D) : w.painter(w.env, {
+        geom: { x: n, y: k, width: s, height: D },
+        fillStyle: P,
+        color: l,
+        corners: ft,
+        radius: z,
+        progress: M,
+        isBullish: f.close >= f.open
+      }), x && t.translate(0, -p), B && t.restore();
     }
   }
   /**
@@ -430,52 +608,52 @@ class at {
    * frame. The map is hard-bounded — entrance animations sweep heights
    * continuously, and a full clear is cheaper than an eviction policy.
    */
-  #r(t, e, s) {
-    const i = Math.max(3, Math.round(s)), r = `${e[0]}|${e[1]}|${i}`, o = this.#s.get(r);
-    if (o !== void 0) return o;
-    this.#s.size >= 512 && this.#s.clear();
-    const l = t.createLinearGradient(0, 0, 0, i);
-    return l.addColorStop(0, e[0]), l.addColorStop(1, e[1]), this.#s.set(r, l), l;
+  #d(t, i, e) {
+    const o = Math.max(3, Math.round(e)), a = `${i[0]}|${i[1]}|${o}`, s = this.#c.get(a);
+    if (s !== void 0) return s;
+    this.#c.size >= 512 && this.#c.clear();
+    const u = t.createLinearGradient(0, 0, 0, o);
+    return u.addColorStop(0, i[0]), u.addColorStop(1, i[1]), this.#c.set(a, u), u;
   }
 }
-function z(a, t, e) {
+function F(h, t, i) {
   switch (t) {
     case "none":
-      return { x: e.x, topY: e.topY, bottomY: e.bottomY, alpha: 1 };
+      return { x: i.x, topY: i.topY, bottomY: i.bottomY, alpha: 1 };
     case "fade":
-      return { x: e.x, topY: e.topY, bottomY: e.bottomY, alpha: a };
+      return { x: i.x, topY: i.topY, bottomY: i.bottomY, alpha: h };
     case "unfold":
       return {
-        x: e.x,
-        topY: V(e.anchorY, e.topY, a),
-        bottomY: V(e.anchorY, e.bottomY, a),
+        x: i.x,
+        topY: $(i.anchorY, i.topY, h),
+        bottomY: $(i.anchorY, i.bottomY, h),
         alpha: 1
       };
     case "slide":
       return {
-        x: e.x + (1 - a) * e.barWidth,
-        topY: e.topY,
-        bottomY: e.bottomY,
-        alpha: a
+        x: i.x + (1 - h) * i.barWidth,
+        topY: i.topY,
+        bottomY: i.bottomY,
+        alpha: h
       };
     case "fade-unfold":
       return {
-        x: e.x,
-        topY: V(e.anchorY, e.topY, a),
-        bottomY: V(e.anchorY, e.bottomY, a),
-        alpha: a
+        x: i.x,
+        topY: $(i.anchorY, i.topY, h),
+        bottomY: $(i.anchorY, i.bottomY, h),
+        alpha: h
       };
   }
 }
-const xt = {
+const Et = {
   type: "candlestick",
-  create: ({ theme: a }, t) => new at(new J(), {
-    up: { ...a.candlestick.up },
-    down: { ...a.candlestick.down },
+  create: ({ theme: h }, t) => new xt(new rt(), {
+    up: { ...h.candlestick.up },
+    down: { ...h.candlestick.down },
     ...t
   })
 };
 export {
-  at as CandlestickRenderer,
-  xt as CandlestickSeriesDef
+  xt as CandlestickRenderer,
+  Et as CandlestickSeriesDef
 };