@luxalgo/vela 0.7.8 → 0.8.0

package/dist/vela.global.js

@@ -591,6 +591,7 @@ var Vela = (function (exports) {
   registerIcon("chevron-up", S('<path d="M3.5 10 8 5.5 12.5 10"/>'));
   registerIcon("chevrons-right", S('<path d="m4 3.5 4.5 4.5L4 12.5"/><path d="m8.5 3.5 4.5 4.5-4.5 4.5"/>'));
   registerIcon("chevrons-left", S('<path d="M12 3.5 7.5 8l4.5 4.5"/><path d="M7.5 3.5 3 8l4.5 4.5"/>'));
+  registerIcon("replay", S('<path d="M14 4.2v7.6L8.6 8z"/><path d="M7.4 4.2v7.6L2 8z"/>'));
   registerIcon("check", S('<path d="m2.8 8.4 3.4 3.4 7-7.6"/>'));
   registerIcon("close", S('<path d="m3.8 3.8 8.4 8.4M12.2 3.8l-8.4 8.4"/>'));
   registerIcon("pin", S('<path d="M5.6 2.5h4.8M6.4 2.5v3.6L4.4 8.4v.9h7.2v-.9L9.6 6.1V2.5M8 9.3v4.2"/>'));
@@ -7808,6 +7809,7 @@ var Vela = (function (exports) {
   var FIRST_PAINT_BARS = 20;
   var GAP_FACTOR = 1.5;
   var HEAL_COOLDOWN_MS = 5e3;
+  var MIN_TICK_UPDATE_MS = 16;
   var EngineOrchestrator = class _EngineOrchestrator {
     constructor(container, renderer, feed, engines, config, dataControl) {
       this.renderer = renderer;
@@ -7860,6 +7862,32 @@ var Vela = (function (exports) {
       this.lastHealAt = 0;
       /** The `visibilitychange` catch-up listener (removed on destroy). */
       this.onVisible = null;
+      // ── bar replay: `rawBars` holds the history up to the cursor, the rest waits here ──
+      /** Bars still hidden right of the replay cursor, oldest first; null ≡ replay off. */
+      this.replayQueue = null;
+      this.replayTimer = null;
+      this.replayPlaying = false;
+      this.replayIntervalMs = 1e3;
+      /** The depth (`market.bars`) before a replay deepened the history — restored when it ends. */
+      this.replayDepth = null;
+      /** A start is loading older history before it can cut; `seek` = a replay was running
+       *  (and left silently to deepen), so abandoning the load must announce its end. */
+      this.replayLoading = null;
+      /** A replay carried over a timeframe/session switch, between the old series' silent end
+       *  and the cut of the new one: still ACTIVE for the outside (`replayState`), resumed
+       *  at `revealedEnd` once the new bars land, unless stopped (`cancelled`) meanwhile. */
+      this.replayCarrying = null;
+      /** Intrabar prices for the bars replay reveals — null ≡ whole bars. */
+      this.replayTickSource = null;
+      /** The bar being revealed tick by tick: its stored form (what it settles on), its ticks,
+       *  the next tick to apply, the candle built so far, the volume each tick adds when the
+       *  ticks carry none, and its pacing (ticks per update, ms between updates — one play
+       *  interval per tick — and the clock time tick 0 is due at, so late timers catch up). */
+      this.replayForming = null;
+      /** Tick requests by bar time, shared by prefetch and playback; `ticks` once they landed. */
+      this.replayTickFetches = /* @__PURE__ */ new Map();
+      /** Aborts the tick requests in flight — renewed whenever the replay moves on. */
+      this.replayTickAbort = null;
       /** What the last applied bar did: refine the open candle, or open a new one (which
        *  settles the previous). Read by the `script:run` cause attribution. */
       this.barCause = "tick";
@@ -8083,6 +8111,10 @@ var Vela = (function (exports) {
         const paint = (bars, final) => {
           if (this.generation !== gen || !final && bars.length === 0) return;
           if (!painted && !final && bars.length < Math.min(requested, FIRST_PAINT_BARS)) return;
+          if (painted && this.replayQueue) {
+            this.mergeHistoryIntoReplay(bars);
+            return;
+          }
           this.setBarSeries(bars, painted ? { preserveView: true } : void 0);
           if (!painted && bars.length > 0) {
             painted = true;
@@ -8225,6 +8257,36 @@ var Vela = (function (exports) {
       // exactly like a timeframe change; the cache keys the sessions apart.
       next2.session !== void 0 && next2.session !== m.session || next2.data !== void 0;
       const depthChanged = next2.bars !== void 0 && next2.bars !== m.bars;
+      const sameClock = identityChanged && next2.data === void 0 && (next2.symbol === void 0 || next2.symbol === m.symbol) && (next2.timeframe !== void 0 || next2.session !== void 0);
+      const pending = identityChanged ? this.replayCarrying : null;
+      if (pending) {
+        this.replayCarrying = null;
+        if (!sameClock) {
+          pending.cancelled = true;
+          this.events.emit("replay:end", { reason: "market" });
+        }
+      }
+      const replayCarry = this.replayQueue && sameClock && this.rawBars.length > 0 ? { revealedEnd: this.rawBars[this.rawBars.length - 1].time + this.barIntervalMs(), playing: this.replayPlaying, cancelled: false } : pending && sameClock ? { revealedEnd: pending.revealedEnd, playing: pending.playing, cancelled: false } : null;
+      if (pending) pending.cancelled = true;
+      if (replayCarry) this.replayCarrying = replayCarry;
+      if (replayCarry && this.replayQueue) {
+        this.endReplay(null, { restore: false, resume: false });
+        const depth = this.replayDepth;
+        this.replayDepth = null;
+        if (depth && next2.bars === void 0) {
+          if (depth.bars === void 0) delete m.bars;
+          else m.bars = depth.bars;
+        }
+      }
+      if (this.replayQueue && (identityChanged || depthChanged)) this.endReplay("market", { restore: !identityChanged, resume: false });
+      if (this.replayLoading && (identityChanged || depthChanged)) {
+        const depth = this.replayDepth;
+        this.abandonReplayLoad("market");
+        if (depth && next2.bars === void 0) {
+          if (depth.bars === void 0) delete m.bars;
+          else m.bars = depth.bars;
+        }
+      }
       const depthOnly = depthChanged && !identityChanged && this.rawBars.length > 0 && !m.data?.length && ((next2.bars ?? 0) <= this.rawBars.length || typeof this.feed.loadRange === "function");
       if (!identityChanged && !depthChanged) {
         if (typeof next2.visibleRange === "string") this.setVisibleRangePreset(next2.visibleRange);
@@ -8282,15 +8344,20 @@ var Vela = (function (exports) {
         const from = bars[Math.max(0, idx - (carriedCount - 1))].time;
         this.renderer.setVisibleRange({ from, to: Math.max(carried.right, bars[idx].time + 1) });
       }
-      if (!depthOnly) {
+      const carry = replayCarry && !replayCarry.cancelled ? replayCarry : null;
+      const carryFrom = carry ? carry.revealedEnd - this.barIntervalMs() : 0;
+      const carryNow = carry != null && this.rawBars.length > 0 && carryFrom >= this.rawBars[0].time;
+      const replayBack = carryNow && this.resumeCarriedReplay(this.replayStart({ from: carryFrom }), carry);
+      if (!depthOnly && !replayBack) {
         this.restartNativeIndicators();
         this.restartChartTypeEngine();
         this.reexecuteIndicators();
       }
-      this.startLive();
+      if (!replayBack) this.startLive();
       if (identityChanged) {
         this.events.emit("market:changed", { symbol: m.symbol ?? "TEST", timeframe: m.timeframe ?? "60", prev: prev3 });
       }
+      if (carry && !carryNow) this.resumeCarriedReplay(this.replayStart({ from: carryFrom }), carry);
     }
     /**
      * Restart every native indicator over the new market: a `NativeIndicatorContext`
@@ -8414,6 +8481,397 @@ var Vela = (function (exports) {
     historyComplete() {
       return this.historyCompletePromise;
     }
+    // ── bar replay ──────────────────────────────────────────────
+    /**
+     * Enter replay — or seek, when already replaying — keeping every bar opened at or before
+     * `opts.from` and queueing the rest. A `from` inside the loaded bars cuts at once, even
+     * while older history is still streaming in: what lands later joins the tape's head
+     * (see {@link mergeHistoryIntoReplay}) and leaves the cut alone. An older `from` waits
+     * for that load, then deepens if it still has to. Consumers restart over the cut exactly
+     * as on a market switch — their models describe bars that are now hidden — and the
+     * active chart-type engine is rebuilt without live data.
+     */
+    async replayStart(opts) {
+      if (this.rawBars.length === 0) {
+        console.warn("[vela] chart.replay.start() ignored \u2014 the chart has no bars yet");
+        return;
+      }
+      let gen = this.generation;
+      if (opts.from < this.rawBars[0].time) {
+        await this.historyCompletePromise;
+        if (this.generation !== gen || this.rawBars.length === 0) return;
+      }
+      const oldest = this.rawBars[0].time;
+      if (opts.from < oldest && this.canHeal() && typeof this.feed.loadRange === "function") {
+        const held = this.rawBars.length + (this.replayQueue?.length ?? 0);
+        const bars = held + Math.ceil((oldest - opts.from) / this.barIntervalMs()) + 1;
+        const seek = this.replayQueue !== null;
+        if (seek) this.endReplay(null, { restore: true, resume: false });
+        this.replayDepth ?? (this.replayDepth = { bars: this.config.market.bars });
+        const deepened = this.setMarket({ bars });
+        this.replayLoading = { seek };
+        await deepened;
+        gen = this.generation;
+        await this.historyCompletePromise;
+        if (!this.replayLoading || this.generation !== gen || this.rawBars.length === 0) return;
+        this.replayLoading = null;
+      }
+      this.settleFormingBar();
+      this.dropTickFetches();
+      const tape = this.replayQueue ? [...this.rawBars, ...this.replayQueue] : this.rawBars;
+      let cut = 0;
+      while (cut < tape.length && tape[cut].time <= opts.from) cut += 1;
+      cut = Math.max(1, cut);
+      if (cut >= tape.length) {
+        console.warn("[vela] chart.replay.start() ignored \u2014 no bar opens after the requested time");
+        return;
+      }
+      const wasPlaying = this.replayPlaying;
+      this.clearReplayTimer();
+      if (!this.replayQueue) this.stopLive();
+      this.replayQueue = tape.slice(cut);
+      this.setBarSeries(tape.slice(0, cut));
+      this.restartBarConsumers({ blank: true });
+      if (wasPlaying) this.events.emit("replay:pause", void 0);
+      this.events.emit("replay:start", { cursorTime: tape[cut - 1].time, remaining: this.replayQueue.length });
+      this.prefetchTicks();
+    }
+    /** Reveal the next queued bar through the live-bar path — or complete the bar forming
+     *  tick by tick; the last one ends the replay. */
+    replayStep() {
+      if (this.replayForming) {
+        this.finishFormingBar();
+        return true;
+      }
+      const queue = this.replayQueue;
+      const bar = queue?.shift();
+      if (!queue || !bar) return false;
+      this.replayTickFetches.delete(bar.time);
+      this.applyBar(bar);
+      this.completeReveal(bar);
+      this.prefetchTicks();
+      return true;
+    }
+    /**
+     * Follow up a replay carried onto a new series of the same symbol (another timeframe or
+     * session). The cut asked for keeps the bars that CLOSED by the end of what was revealed —
+     * every finer bar of the last revealed one, never a coarser bar still open at that point
+     * (no look-ahead). Once it settles: playback resumes if it was on; if the replay did not
+     * come back (nothing left after that point, or a later switch took over), it ends as a
+     * market switch would. Returns whether the replay is back already — a start with no
+     * history to wait for cuts synchronously (an async function runs up to its first await).
+     */
+    resumeCarriedReplay(start, carry) {
+      if (this.replayQueue && this.replayCarrying === carry) this.replayCarrying = null;
+      void start.then(() => {
+        if (this.replayCarrying === carry) this.replayCarrying = null;
+        if (carry.cancelled) return;
+        if (!this.replayQueue) this.events.emit("replay:end", { reason: "market" });
+        else if (carry.playing) this.replayPlay();
+      });
+      return this.replayQueue !== null;
+    }
+    replayStepUpdate() {
+      if (!this.replayQueue) return false;
+      if (this.replayForming) {
+        this.applyReplayTicks(1);
+        return true;
+      }
+      const bar = this.replayQueue[0];
+      if (!bar) return false;
+      const entry = this.replayTickSource ? this.requestTicks(bar) : null;
+      if (entry && !entry.ticks) {
+        const epoch = this.replayTickAbort;
+        void entry.done.then(() => {
+          if (!this.replayPlaying && !this.replayForming && this.replayTickAbort === epoch && this.replayQueue?.[0] === bar) this.replayStepUpdate();
+        });
+        return true;
+      }
+      if (!entry?.ticks?.length) return this.replayStep();
+      this.openFormingBar(entry.ticks, 1);
+      return true;
+    }
+    replaySetTicks(source) {
+      this.finishFormingBar();
+      this.dropTickFetches();
+      this.replayTickSource = source;
+      this.prefetchTicks();
+    }
+    replayPlay(intervalMs2) {
+      if (!this.replayQueue) return;
+      if (intervalMs2 !== void 0) {
+        if (!(Number.isFinite(intervalMs2) && intervalMs2 > 0)) {
+          console.warn(`[vela] chart.replay.play(${intervalMs2}) ignored \u2014 the interval must be a positive number of ms`);
+          return;
+        }
+        this.replayIntervalMs = intervalMs2;
+      }
+      this.clearReplayTimer();
+      this.replayPlaying = true;
+      if (this.replayForming) this.paceFormingBar(this.replayForming);
+      this.scheduleReplayStep(this.replayForming?.delayMs);
+      this.events.emit("replay:play", { intervalMs: this.replayIntervalMs });
+    }
+    replayPause() {
+      if (!this.replayPlaying) return;
+      this.clearReplayTimer();
+      this.events.emit("replay:pause", void 0);
+    }
+    replayStop() {
+      const carrying = this.replayCarrying;
+      if (carrying) {
+        carrying.cancelled = true;
+        this.replayCarrying = null;
+        this.events.emit("replay:end", { reason: "stopped" });
+      }
+      if (this.replayLoading) {
+        const depth = this.replayDepth;
+        this.abandonReplayLoad("stopped");
+        void this.setMarket({ bars: depth?.bars ?? 500 });
+        return;
+      }
+      this.endReplay("stopped", { restore: true, resume: true });
+    }
+    abandonReplayLoad(reason) {
+      const loading = this.replayLoading;
+      if (!loading) return;
+      this.replayLoading = null;
+      this.replayDepth = null;
+      if (loading.seek) this.events.emit("replay:end", { reason });
+    }
+    replayState() {
+      const active = this.replayQueue !== null;
+      return {
+        active: active || this.replayCarrying !== null,
+        // a replay carried over a switch stays on while the new bars load
+        playing: this.replayCarrying?.playing ?? this.replayPlaying,
+        cursorTime: active ? this.rawBars[this.rawBars.length - 1]?.time ?? null : null,
+        remaining: this.replayQueue?.length ?? 0,
+        nextTime: this.replayForming?.bar.time ?? this.replayQueue?.[0]?.time ?? null,
+        intervalMs: this.replayIntervalMs
+      };
+    }
+    replayBounds() {
+      const first2 = this.rawBars[0];
+      const last2 = this.replayQueue?.[this.replayQueue.length - 1] ?? this.rawBars[this.rawBars.length - 1];
+      return first2 && last2 ? { first: first2.time, last: last2.time } : null;
+    }
+    scheduleReplayStep(delayMs = this.replayIntervalMs) {
+      this.replayTimer = setTimeout(() => {
+        this.replayTimer = null;
+        this.replayAdvance();
+      }, delayMs);
+    }
+    /** One beat of timed playback: the forming bar's next ticks, else the next bar — whole,
+     *  or opened from its ticks (waiting for them when they have not landed yet). */
+    replayAdvance() {
+      if (!this.replayPlaying || !this.replayQueue) return;
+      const forming = this.replayForming;
+      if (forming) {
+        const due = Math.floor((now() - forming.origin) / this.replayIntervalMs) + 1;
+        this.applyReplayTicks(Math.max(forming.batch, due - forming.next));
+        if (this.replayPlaying) this.scheduleReplayStep(forming.delayMs);
+        return;
+      }
+      const bar = this.replayQueue[0];
+      if (!bar) return;
+      const entry = this.replayTickSource ? this.requestTicks(bar) : null;
+      if (entry && !entry.ticks) {
+        const epoch = this.replayTickAbort;
+        void entry.done.then(() => {
+          if (this.replayPlaying && this.replayTimer == null && this.replayTickAbort === epoch && this.replayQueue?.[0] === bar) this.replayAdvance();
+        });
+        return;
+      }
+      if (!entry?.ticks?.length) {
+        if (this.replayStep() && this.replayPlaying) this.scheduleReplayStep();
+        return;
+      }
+      this.openFormingBar(entry.ticks);
+      if (this.replayPlaying) this.scheduleReplayStep(this.replayForming?.delayMs);
+    }
+    /** Take the next queued bar off the tape and open it at its first tick (the first
+     *  `count` ticks — default: one timed update's worth). */
+    openFormingBar(ticks, count) {
+      const bar = this.replayQueue.shift();
+      const volumeEach = ticks.every((t) => t.volume === void 0) ? (bar.volume ?? 0) / ticks.length : null;
+      const forming = { bar, ticks, next: 0, candle: null, volumeEach, batch: 1, delayMs: this.replayIntervalMs, origin: 0 };
+      this.paceFormingBar(forming);
+      this.replayForming = forming;
+      this.applyReplayTicks(count ?? forming.batch);
+      this.prefetchTicks();
+    }
+    /** One tick per interval, batched when the interval is shorter than a frame; the clock
+     *  is anchored on the ticks already applied (a resume or a pace change carries on from
+     *  there, never jumps). */
+    paceFormingBar(f) {
+      f.batch = Math.max(1, Math.ceil(MIN_TICK_UPDATE_MS / this.replayIntervalMs));
+      f.delayMs = this.replayIntervalMs * f.batch;
+      f.origin = now() - Math.max(0, f.next - 1) * this.replayIntervalMs;
+    }
+    /** Fold the next `count` ticks into the forming candle; the last one settles the bar. */
+    applyReplayTicks(count) {
+      const f = this.replayForming;
+      if (!f) return;
+      let c = f.candle;
+      const stop = Math.min(f.ticks.length, f.next + count);
+      for (; f.next < stop; f.next += 1) {
+        const t = f.ticks[f.next];
+        const v = f.volumeEach ?? t.volume ?? 0;
+        const hi = Math.max(t.high ?? t.price, t.price);
+        const lo = Math.min(t.low ?? t.price, t.price);
+        if (c) {
+          c = { ...c, high: Math.max(c.high, hi), low: Math.min(c.low, lo), close: t.price, volume: (c.volume ?? 0) + v };
+        } else {
+          const open2 = t.open ?? t.price;
+          c = { time: f.bar.time, open: open2, high: Math.max(open2, hi), low: Math.min(open2, lo), close: t.price, volume: v };
+        }
+      }
+      f.candle = c;
+      if (f.next >= f.ticks.length) {
+        this.finishFormingBar();
+        return;
+      }
+      this.applyBar(c);
+      this.events.emit("replay:tick", { cursorTime: f.bar.time, index: f.next - 1, count: f.ticks.length });
+    }
+    /** Settle the forming bar on its stored values and announce it revealed. */
+    finishFormingBar() {
+      const f = this.replayForming;
+      if (!f) return;
+      this.replayForming = null;
+      this.replayTickFetches.delete(f.bar.time);
+      this.applyBar(f.bar);
+      this.events.emit("replay:tick", { cursorTime: f.bar.time, index: f.ticks.length - 1, count: f.ticks.length });
+      this.completeReveal(f.bar);
+    }
+    /** Put the forming bar back in its stored form, silently — a seek or an end rebuilds
+     *  from the tape, which must hold the stored bar. */
+    settleFormingBar() {
+      const f = this.replayForming;
+      if (!f) return;
+      this.replayForming = null;
+      this.applyBar(f.bar);
+    }
+    /**
+     * A history answer landing mid-replay (a progressive snapshot — the whole answer so far):
+     * the tape keeps its cut and its hidden queue; bars older than the tape join its head,
+     * bars newer than it join the queue's end.
+     */
+    mergeHistoryIntoReplay(bars) {
+      const queue = this.replayQueue;
+      const head = this.rawBars[0];
+      if (!queue || !head) return;
+      const tail = queue[queue.length - 1] ?? this.rawBars[this.rawBars.length - 1];
+      let older = 0;
+      while (older < bars.length && bars[older].time < head.time) older += 1;
+      let newer = bars.length;
+      while (newer > older && bars[newer - 1].time > tail.time) newer -= 1;
+      if (newer < bars.length) queue.push(...bars.slice(newer));
+      if (older > 0) {
+        this.setBarSeries([...bars.slice(0, older), ...this.rawBars], { preserveView: true });
+        this.notifySessionsBars("backfill");
+      }
+    }
+    /** A bar is fully on screen: announce it, and end the replay if it was the last. */
+    completeReveal(bar) {
+      const queue = this.replayQueue;
+      if (!queue) return;
+      this.events.emit("replay:step", { cursorTime: bar.time, remaining: queue.length });
+      if (queue.length === 0) this.endReplay("finished", { restore: true, resume: true });
+    }
+    /** Ask for the ticks of the next hidden bar ahead of time. */
+    prefetchTicks() {
+      const next2 = this.replayQueue?.[0];
+      if (next2 && this.replayTickSource) this.requestTicks(next2);
+    }
+    /** The (shared) tick request of a queued bar — the source runs once per bar. */
+    requestTicks(bar) {
+      const known = this.replayTickFetches.get(bar.time);
+      if (known) return known;
+      const source = this.replayTickSource;
+      this.replayTickAbort ?? (this.replayTickAbort = new AbortController());
+      const signal = this.replayTickAbort.signal;
+      const queue = this.replayQueue ?? [];
+      const end = queue[queue.indexOf(bar) + 1]?.time ?? bar.time + this.barIntervalMs();
+      const entry = { ticks: null, done: Promise.resolve() };
+      const land = (ticks) => {
+        entry.ticks = usableTicks(ticks);
+      };
+      const fail = (e) => {
+        if (!signal.aborted) console.warn(`[vela] replay tick source failed \u2014 revealing the bar whole (${e instanceof Error ? e.message : String(e)})`);
+        land([]);
+      };
+      try {
+        const out = source(bar, { end, signal });
+        if (Array.isArray(out)) land(out);
+        else entry.done = Promise.resolve(out).then(land, fail);
+      } catch (e) {
+        fail(e);
+      }
+      this.replayTickFetches.set(bar.time, entry);
+      return entry;
+    }
+    /** Abort the tick requests in flight and forget the landed ones. */
+    dropTickFetches() {
+      this.replayTickAbort?.abort();
+      this.replayTickAbort = null;
+      this.replayTickFetches.clear();
+    }
+    clearReplayTimer() {
+      if (this.replayTimer != null) clearTimeout(this.replayTimer);
+      this.replayTimer = null;
+      this.replayPlaying = false;
+    }
+    /**
+     * Leave replay. `restore` puts the queued bars back and restarts the consumers over the
+     * full history (a market switch skips it: its load replaces everything anyway); `resume`
+     * restarts live updates and heals the bars that closed while replaying. A null reason
+     * leaves silently — a seek that re-enters right after.
+     */
+    endReplay(reason, opts) {
+      const queue = this.replayQueue;
+      if (!queue) return;
+      this.clearReplayTimer();
+      if (opts.restore) this.settleFormingBar();
+      else this.replayForming = null;
+      this.dropTickFetches();
+      this.replayQueue = null;
+      const depth = reason ? this.replayDepth : null;
+      if (reason) this.replayDepth = null;
+      if (depth) {
+        if (depth.bars === void 0) delete this.config.market.bars;
+        else this.config.market.bars = depth.bars;
+      }
+      if (opts.restore) {
+        const keep = depth ? depth.bars ?? 500 : Infinity;
+        if (queue.length > 0 || this.rawBars.length > keep) {
+          const full = [...this.rawBars, ...queue];
+          this.setBarSeries(full.length > keep ? full.slice(full.length - keep) : full);
+          this.restartBarConsumers({ blank: false });
+        } else if (this.config.live) {
+          this.restartNativeIndicators();
+          this.restartChartTypeEngine();
+        }
+      }
+      if (opts.resume && this.config.live) {
+        this.startLive();
+        const last2 = this.rawBars[this.rawBars.length - 1];
+        if (last2 && this.canHeal()) void this.healGap(last2.time);
+      }
+      if (reason) this.events.emit("replay:end", { reason });
+    }
+    /**
+     * The bars were replaced by a cut or a restore of the SAME market: every consumer re-runs.
+     * A cut also blanks the mounted models first — they still paint the hidden bars' values,
+     * which must not show until the re-runs land.
+     */
+    restartBarConsumers(opts) {
+      if (opts.blank) this.blankIndicatorVisuals();
+      this.restartNativeIndicators();
+      this.restartChartTypeEngine();
+      this.reexecuteIndicators();
+    }
     /** The primary symbol as the data layer resolves it, or null if no symbol is set. */
     qualifiedSymbol() {
       const market = this.config.market;
@@ -8485,7 +8943,7 @@ var Vela = (function (exports) {
       engine.start({
         symbol: this.config.market.symbol ?? "TEST",
         timeframe: this.config.market.timeframe ?? "60",
-        live: this.config.live ?? false,
+        live: (this.config.live ?? false) && this.replayQueue === null,
         session: this.config.market.session,
         bars: () => this.bars,
         data: this.dataControl,
@@ -8611,6 +9069,7 @@ var Vela = (function (exports) {
           record.session.notifyBars(reason);
         } else if (record.native) record.native.instance.onBars();
       }
+      if (this.activeEngineStyle) this.typeEngines.get(this.activeEngineStyle)?.onBars?.();
     }
     /** Gap healing needs a ranged feed and a provider-backed series (offline `data` has no source). */
     canHeal() {
@@ -8633,10 +9092,11 @@ var Vela = (function (exports) {
       try {
         const bars = await this.feed.loadRange(this.config.market, { from: fromMs });
         if (this.generation !== gen) return;
+        if (this.replayQueue) return;
         for (const b of bars) this.applyBar(b, false);
       } catch {
       } finally {
-        if (this.generation === gen) {
+        if (this.generation === gen && !this.replayQueue) {
           this.healing = false;
           const pending = this.healBuffer;
           this.healBuffer = [];
@@ -8941,6 +9401,13 @@ var Vela = (function (exports) {
     destroy() {
       this.bumpGeneration();
       this.resolveHistoryComplete();
+      this.clearReplayTimer();
+      this.replayQueue = null;
+      this.replayForming = null;
+      this.replayCarrying = null;
+      this.dropTickFetches();
+      this.replayDepth = null;
+      this.replayLoading = null;
       this.stopLive();
       if (this.viewportTimer != null) clearTimeout(this.viewportTimer);
       this.viewportUnsub?.();
@@ -9039,6 +9506,7 @@ var Vela = (function (exports) {
             this.emitScriptRun(id, cause, first2);
           },
           onAlert: (a) => {
+            if (this.replayQueue || this.replayCarrying) return;
             const indicator = record.options?.title ?? record.prepared?.meta.title ?? record.title;
             this.events.emit("alert", { ...a, indicator });
             handle.emit("alert", { id: a.id, message: a.message, title: a.title, time: a.time });
@@ -9065,7 +9533,7 @@ var Vela = (function (exports) {
           id,
           symbol: this.config.market.symbol ?? "TEST",
           timeframe: this.config.market.timeframe ?? "60",
-          live: this.config.live,
+          live: this.config.live && this.replayQueue === null,
           session: this.config.market.session,
           bars: () => this.bars,
           data: this.dataControl,
@@ -9468,17 +9936,17 @@ var Vela = (function (exports) {
     }
     emitContextChanged(id) {
       if (!this.registry.get(id)?.session?.getContext) return;
-      const now = Date.now();
-      if (now - (this.contextEmitAt.get(id) ?? 0) < 1e3) return;
-      this.contextEmitAt.set(id, now);
+      const now2 = Date.now();
+      if (now2 - (this.contextEmitAt.get(id) ?? 0) < 1e3) return;
+      this.contextEmitAt.set(id, now2);
       this.events.emit("context:changed", { id });
     }
     emitScriptRun(id, cause, first2) {
       const record = this.registry.get(id);
       if (!record || record.native || !this.events.hasListeners("script:run")) return;
-      const now = Date.now();
-      if (cause === "tick" && now - (this.runEmitAt.get(id) ?? 0) < RUN_EMIT_THROTTLE_MS) return;
-      this.runEmitAt.set(id, now);
+      const now2 = Date.now();
+      if (cause === "tick" && now2 - (this.runEmitAt.get(id) ?? 0) < RUN_EMIT_THROTTLE_MS) return;
+      this.runEmitAt.set(id, now2);
       void Promise.resolve().then(() => this.buildScriptRun(record, cause, first2)).then((run) => {
         if (run && this.registry.get(id)) this.events.emit("script:run", run);
       });
@@ -9531,6 +9999,16 @@ var Vela = (function (exports) {
       handle?.emit("error", { error });
     }
   };
+  function now() {
+    return typeof performance !== "undefined" ? performance.now() : Date.now();
+  }
+  function usableTicks(value) {
+    if (!Array.isArray(value)) return [];
+    const optional = (n) => n === void 0 || Number.isFinite(n);
+    return value.filter(
+      (t) => t != null && Number.isFinite(t.price) && optional(t.volume) && optional(t.high) && optional(t.low) && optional(t.open)
+    );
+  }
   function yieldToPaint() {
     if (typeof requestAnimationFrame === "function") {
       return new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
@@ -9731,6 +10209,12 @@ var Vela = (function (exports) {
     onCrosshairMove(cb) {
       return this.renderer.onCrosshairMove(cb);
     }
+    /** A click — or a touch tap — on the plot, never the end of a pan: the open time of
+     *  the bar under it (`null` off the bars). On touch, where a tap moves no crosshair,
+     *  this is how an interaction learns which bar was chosen. */
+    onClick(cb) {
+      return this.renderer.onClick(cb);
+    }
     /** Touch long-press on a price or time axis strip — silent no-op without the seam. */
     onAxisLongPress(cb) {
       return this.renderer.onAxisLongPress?.(cb) ?? (() => void 0);
@@ -10806,11 +11290,76 @@ var Vela = (function (exports) {
     }
   };
 
+  // src/core/ReplayControl.ts
+  var ReplayControl = class {
+    constructor(ctrl) {
+      this.ctrl = ctrl;
+    }
+    /**
+     * Enter replay (or seek, when already replaying) at `opts.from`. Resolves once the
+     * chart shows the rewound history — after any in-flight history load has finished.
+     * Starts paused; call {@link play} or {@link step}.
+     */
+    start(opts) {
+      return this.ctrl.replayStart(opts);
+    }
+    /** Reveal the next bar — or, mid-way through a bar played tick by tick, complete it.
+     *  Returns false when replay is off or nothing is left. */
+    step() {
+      return this.ctrl.replayStep();
+    }
+    /** Reveal the next UPDATE: with {@link setTicks}, the next tick of the forming bar — or
+     *  the next bar opened at its first tick (once its ticks are in, if still loading);
+     *  otherwise the next whole bar, like {@link step}. Returns false when nothing is left. */
+    stepUpdate() {
+      return this.ctrl.replayStepUpdate();
+    }
+    /** Reveal one bar (one tick, with {@link setTicks}) every `intervalMs` (default: the last
+     *  interval used, else 1000). Calling it again while playing changes the pace. */
+    play(intervalMs2) {
+      this.ctrl.replayPlay(intervalMs2);
+      return this;
+    }
+    pause() {
+      this.ctrl.replayPause();
+      return this;
+    }
+    /** Leave replay: the full history comes back and live updates resume. Also cancels a
+     *  `start()` still loading older history (the chart returns to its previous depth). */
+    stop() {
+      this.ctrl.replayStop();
+      return this;
+    }
+    get state() {
+      return this.ctrl.replayState();
+    }
+    /** The loaded history a replay can walk — hidden bars included while replaying. Null
+     *  before any bar loaded. A start older than `first` deepens the history first. */
+    get bounds() {
+      return this.ctrl.replayBounds();
+    }
+    /**
+     * Play each revealed bar as a series of intrabar updates instead of whole: while
+     * playing, the forming candle opens at the first tick, then every tick moves its close
+     * and stretches its high and low, exactly like a live tick — indicators, chart types
+     * and the `bar` event follow — and the last one settles it on the stored bar. The play
+     * interval is then the time between two TICKS: a bar lasts as many intervals as it
+     * has ticks (below ~16 ms, ticks are batched per frame). The next bar's ticks are
+     * requested while the current one plays; playback waits for them. `null` goes back to
+     * whole bars. Takes effect from the next bar; a bar forming when the source changes
+     * completes at once.
+     */
+    setTicks(source) {
+      this.ctrl.replaySetTicks(source);
+      return this;
+    }
+  };
+
   // src/core/util/wall-clock.ts
   var BOUNDARY_SLACK_MS = 5;
   var SecondClock = class _SecondClock {
-    constructor(now = () => Date.now()) {
-      this.now = now;
+    constructor(now2 = () => Date.now()) {
+      this.now = now2;
       this.subs = /* @__PURE__ */ new Set();
       this.timer = null;
     }
@@ -10826,15 +11375,15 @@ var Vela = (function (exports) {
       };
     }
     /** Milliseconds from `now` to just past the next second boundary. */
-    static delayToNextSecond(now) {
-      const intoSecond = (now % 1e3 + 1e3) % 1e3;
+    static delayToNextSecond(now2) {
+      const intoSecond = (now2 % 1e3 + 1e3) % 1e3;
       return 1e3 - intoSecond + BOUNDARY_SLACK_MS;
     }
     arm() {
       this.timer = setTimeout(() => {
         this.timer = null;
-        const now = this.now();
-        for (const cb of this.subs) cb(now);
+        const now2 = this.now();
+        for (const cb of this.subs) cb(now2);
         if (this.subs.size > 0) this.arm();
       }, _SecondClock.delayToNextSecond(this.now()));
     }
@@ -19935,6 +20484,264 @@ ${overlayScrollbarCss(".vela-dialog *")}
     }
   };
 
+  // src/ui/components/date-picker/controller.ts
+  var MONTH_LABELS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+  var MONTH_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+  var WEEKDAY_LABELS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+  function isoDate(d) {
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+  }
+  function normalizeDateInput(raw) {
+    const m = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(raw.trim());
+    if (!m) return null;
+    const y = Number(m[1]);
+    const mo = Number(m[2]);
+    const d = Number(m[3]);
+    const dt = new Date(y, mo - 1, d);
+    if (dt.getFullYear() !== y || dt.getMonth() !== mo - 1 || dt.getDate() !== d) return null;
+    return isoDate(dt);
+  }
+  function parseIsoDate(raw) {
+    const iso = raw ? normalizeDateInput(raw) : null;
+    if (!iso) return null;
+    const [y, mo, d] = iso.split("-").map(Number);
+    return new Date(y, mo - 1, d);
+  }
+  function datePickerController(opts = {}) {
+    const today = opts.today ?? /* @__PURE__ */ new Date();
+    let selected = parseIsoDate(opts.value);
+    let year = selected?.getFullYear() ?? today.getFullYear();
+    let month = selected?.getMonth() ?? today.getMonth();
+    let panel = "date";
+    const decade = () => Math.floor(year / 10) * 10;
+    return {
+      get panel() {
+        return panel;
+      },
+      get year() {
+        return year;
+      },
+      get month() {
+        return month;
+      },
+      get value() {
+        return selected ? isoDate(selected) : null;
+      },
+      header() {
+        return {
+          month: MONTH_LABELS[month] ?? "",
+          monthVisible: panel === "date",
+          year: panel === "year" ? `${decade()}-${decade() + 9}` : String(year),
+          yearDisabled: panel === "year"
+          // in the decade panel the year reads as its title
+        };
+      },
+      navLabels() {
+        if (panel === "date") return { prev: "Previous month", next: "Next month" };
+        if (panel === "month") return { prev: "Previous year", next: "Next year" };
+        return { prev: "Previous decade", next: "Next decade" };
+      },
+      cells() {
+        const out = [];
+        if (panel === "date") {
+          const startPad = new Date(year, month, 1).getDay();
+          const days = new Date(year, month + 1, 0).getDate();
+          const todayIso = isoDate(today);
+          const selectedIso = selected ? isoDate(selected) : "";
+          for (let i = 0; i < startPad; i++) out.push({ label: "", value: "", checked: false, today: false, blank: true });
+          for (let day = 1; day <= days; day++) {
+            const iso = `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+            out.push({ label: String(day), value: iso, checked: iso === selectedIso, today: iso === todayIso });
+          }
+          return out;
+        }
+        if (panel === "month") {
+          for (let m = 0; m < 12; m++) {
+            out.push({
+              label: MONTH_SHORT[m] ?? "",
+              value: m,
+              checked: selected?.getFullYear() === year && selected.getMonth() === m,
+              today: today.getFullYear() === year && today.getMonth() === m
+            });
+          }
+          return out;
+        }
+        const d = decade();
+        for (let y = d - 1; y <= d + 10; y++) {
+          out.push({ label: String(y), value: y, checked: selected?.getFullYear() === y, today: today.getFullYear() === y, outside: y < d || y > d + 9 });
+        }
+        return out;
+      },
+      step(dir) {
+        if (panel === "date") {
+          month += dir;
+          if (month < 0) {
+            month = 11;
+            year -= 1;
+          }
+          if (month > 11) {
+            month = 0;
+            year += 1;
+          }
+        } else {
+          year += panel === "month" ? dir : dir * 10;
+        }
+      },
+      showMonths() {
+        panel = "month";
+      },
+      showYears() {
+        panel = "year";
+      },
+      choose(cell) {
+        if (cell.blank) return null;
+        if (panel === "date") {
+          selected = parseIsoDate(String(cell.value));
+          return selected ? isoDate(selected) : null;
+        }
+        if (panel === "month") {
+          month = Number(cell.value);
+          panel = "date";
+          return null;
+        }
+        year = Number(cell.value);
+        panel = "month";
+        return null;
+      },
+      setValue(value) {
+        selected = parseIsoDate(value);
+        if (selected) {
+          year = selected.getFullYear();
+          month = selected.getMonth();
+        }
+        panel = "date";
+      }
+    };
+  }
+
+  // src/ui/components/date-picker/styles.ts
+  var DATE_PICKER_STYLE_ID = "vela-date-picker-styles";
+  var DATE_PICKER_CSS = `
+.vela-date-picker{color:var(--vela-fg);font:14px var(--vela-font);user-select:none;}
+.vela-date-picker [hidden]{display:none !important;}
+.vela-date-picker-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
+.vela-date-picker-title{flex:1;display:flex;align-items:center;justify-content:center;gap:2px;min-width:0;}
+.vela-date-picker-switch{border:none;background:transparent;color:var(--vela-fg-bright);font:inherit;font-weight:600;font-size:14px;padding:2px 6px;border-radius:4px;cursor:pointer;}
+.vela-date-picker-switch:not(:disabled):hover{background:var(--vela-hover);}
+.vela-date-picker-switch:disabled{cursor:default;}
+.vela-date-picker-nav{width:24px;height:24px;border:none;background:transparent;color:var(--vela-fg-muted);border-radius:4px;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:14px;}
+.vela-date-picker-nav:hover{background:var(--vela-hover);color:var(--vela-fg-bright);}
+.vela-date-picker-week,.vela-date-picker-grid{display:grid;grid-template-columns:repeat(7,28px);gap:2px;}
+.vela-date-picker-week{margin-bottom:4px;color:var(--vela-fg-muted);font-size:11px;text-align:center;}
+.vela-date-picker-week span{line-height:20px;}
+.vela-date-picker-blank{width:28px;height:28px;}
+.vela-date-picker-day{width:28px;height:28px;border:none;background:transparent;color:inherit;border-radius:4px;padding:0;cursor:pointer;font:inherit;font-size:14px;}
+.vela-date-picker-day:hover{background:var(--vela-hover);}
+.vela-date-picker-day[data-checked]{background:var(--vela-hover-strong);color:var(--vela-fg-bright);}
+.vela-date-picker-day[data-today]:not([data-checked]){box-shadow:inset 0 0 0 1px var(--vela-border-strong);}
+.vela-date-picker-cells{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:calc(7 * 28px + 6 * 2px);}
+.vela-date-picker-cell{height:36px;border:none;background:transparent;color:inherit;border-radius:4px;padding:0 4px;cursor:pointer;font:inherit;font-size:14px;}
+.vela-date-picker-cell:hover{background:var(--vela-hover);}
+.vela-date-picker-cell[data-checked]{background:var(--vela-hover-strong);color:var(--vela-fg-bright);}
+.vela-date-picker-cell[data-today]:not([data-checked]){box-shadow:inset 0 0 0 1px var(--vela-border-strong);}
+.vela-date-picker-cell[data-outside]{opacity:0.45;}
+`;
+
+  // src/ui/components/date-picker/view.ts
+  var DatePicker = class {
+    constructor(opts = {}) {
+      this.opts = opts;
+      const doc = document;
+      injectStyles(DATE_PICKER_STYLE_ID, DATE_PICKER_CSS, doc);
+      this.ctrl = datePickerController(opts);
+      const button = (className) => {
+        const b = doc.createElement("button");
+        b.type = "button";
+        b.className = className;
+        return b;
+      };
+      this.prev = button("vela-date-picker-nav");
+      this.prev.append(iconEl("chevron-left", doc));
+      this.next = button("vela-date-picker-nav");
+      this.next.append(iconEl("chevron-right", doc));
+      this.monthBtn = button("vela-date-picker-switch");
+      this.monthBtn.setAttribute("aria-label", "Choose month");
+      this.yearBtn = button("vela-date-picker-switch");
+      this.yearBtn.setAttribute("aria-label", "Choose year");
+      const title = doc.createElement("div");
+      title.className = "vela-date-picker-title";
+      title.append(this.monthBtn, this.yearBtn);
+      const head = doc.createElement("div");
+      head.className = "vela-date-picker-head";
+      head.append(this.prev, title, this.next);
+      this.week = doc.createElement("div");
+      this.week.className = "vela-date-picker-week";
+      for (const d of WEEKDAY_LABELS) {
+        const cell = doc.createElement("span");
+        cell.textContent = d;
+        this.week.appendChild(cell);
+      }
+      this.grid = doc.createElement("div");
+      const on = (el, run) => el.addEventListener("click", (e) => {
+        e.stopPropagation();
+        run();
+        this.paint();
+      });
+      on(this.prev, () => this.ctrl.step(-1));
+      on(this.next, () => this.ctrl.step(1));
+      on(this.monthBtn, () => this.ctrl.showMonths());
+      on(this.yearBtn, () => this.ctrl.showYears());
+      this.el = doc.createElement("div");
+      this.el.className = "vela-date-picker";
+      this.el.append(head, this.week, this.grid);
+      this.paint();
+    }
+    get value() {
+      return this.ctrl.value;
+    }
+    /** Rewrite the selection without emitting (the calendar opens on its month). */
+    setValue(value) {
+      this.ctrl.setValue(value);
+      this.paint();
+    }
+    paint() {
+      const doc = this.el.ownerDocument;
+      const h = this.ctrl.header();
+      this.monthBtn.hidden = !h.monthVisible;
+      this.monthBtn.textContent = h.month;
+      this.yearBtn.textContent = h.year;
+      this.yearBtn.disabled = h.yearDisabled;
+      const nav = this.ctrl.navLabels();
+      this.prev.setAttribute("aria-label", nav.prev);
+      this.next.setAttribute("aria-label", nav.next);
+      const dates = this.ctrl.panel === "date";
+      this.week.hidden = !dates;
+      this.grid.className = dates ? "vela-date-picker-grid" : "vela-date-picker-cells";
+      this.grid.replaceChildren(...this.ctrl.cells().map((cell) => this.cellEl(doc, cell, dates)));
+    }
+    cellEl(doc, cell, dates) {
+      if (cell.blank) {
+        const blank = doc.createElement("span");
+        blank.className = "vela-date-picker-blank";
+        return blank;
+      }
+      const b = doc.createElement("button");
+      b.type = "button";
+      b.className = dates ? "vela-date-picker-day" : "vela-date-picker-cell";
+      b.textContent = cell.label;
+      if (cell.checked) b.dataset.checked = "1";
+      if (cell.today) b.dataset.today = "1";
+      if (cell.outside) b.dataset.outside = "1";
+      b.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const picked = this.ctrl.choose(cell);
+        if (picked) this.opts.onPick?.(picked);
+        else this.paint();
+      });
+      return b;
+    }
+  };
+
   // src/ui/components/switch/controller.ts
   function switchController(opts = {}) {
     let checked = opts.checked ?? false;
@@ -21887,10 +22694,16 @@ ${overlayScrollbarCss(".vela-dialog *")}
           this.calendarPop = null;
           this.calendarAnchor = null;
         },
-        content: (el) => fillCalendar(el, current, (iso) => {
-          pop.hide();
-          onPick(iso);
-        })
+        content: (el) => {
+          const picker = new DatePicker({
+            value: current,
+            onPick: (iso) => {
+              pop.hide();
+              onPick(iso);
+            }
+          });
+          el.append(picker.el);
+        }
       });
       this.calendarPop = pop;
       this.calendarAnchor = anchor;
@@ -22015,28 +22828,6 @@ ${overlayScrollbarCss(".vela-dialog *")}
 .vela-ind-combo-chevron{position:absolute;right:0;top:0;bottom:0;width:26px;border:none;background:transparent;color:inherit;opacity:0.55;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
 .vela-ind-combo-chevron:hover{opacity:0.9;}
 .vela-ind-cal{background:var(--vela-bg);color:var(--vela-fg);border:none;border-radius:6px;box-shadow:var(--vela-shadow);font:14px var(--vela-font);padding:10px 12px;user-select:none;}
-.vela-ind-cal [hidden]{display:none !important;}
-.vela-ind-cal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
-.vela-ind-cal-title{flex:1;display:flex;align-items:center;justify-content:center;gap:2px;min-width:0;}
-.vela-ind-cal-switch{border:none;background:transparent;color:var(--vela-fg-bright);font:inherit;font-weight:600;font-size:14px;padding:2px 6px;border-radius:4px;cursor:pointer;}
-.vela-ind-cal-switch:not(:disabled):hover{background:var(--vela-hover);}
-.vela-ind-cal-switch:disabled{cursor:default;}
-.vela-ind-cal-nav{width:24px;height:24px;border:none;background:transparent;color:var(--vela-fg-muted);border-radius:4px;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
-.vela-ind-cal-nav:hover{background:var(--vela-hover);color:var(--vela-fg-bright);}
-.vela-ind-cal-week,.vela-ind-cal-grid{display:grid;grid-template-columns:repeat(7,28px);gap:2px;}
-.vela-ind-cal-week{margin-bottom:4px;color:var(--vela-fg-muted);font-size:11px;text-align:center;}
-.vela-ind-cal-week span{line-height:20px;}
-.vela-ind-cal-blank{width:28px;height:28px;}
-.vela-ind-cal-day{width:28px;height:28px;border:none;background:transparent;color:inherit;border-radius:4px;padding:0;cursor:pointer;font:inherit;font-size:14px;}
-.vela-ind-cal-day:hover{background:var(--vela-hover);}
-.vela-ind-cal-day[data-checked]{background:var(--vela-hover-strong);color:var(--vela-fg-bright);}
-.vela-ind-cal-day[data-today]:not([data-checked]){box-shadow:inset 0 0 0 1px var(--vela-border-strong);}
-.vela-ind-cal-cells{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:calc(7 * 28px + 6 * 2px);}
-.vela-ind-cal-cell{height:36px;border:none;background:transparent;color:inherit;border-radius:4px;padding:0 4px;cursor:pointer;font:inherit;font-size:14px;}
-.vela-ind-cal-cell:hover{background:var(--vela-hover);}
-.vela-ind-cal-cell[data-checked]{background:var(--vela-hover-strong);color:var(--vela-fg-bright);}
-.vela-ind-cal-cell[data-today]:not([data-checked]){box-shadow:inset 0 0 0 1px var(--vela-border-strong);}
-.vela-ind-cal-cell[data-outside]{opacity:0.45;}
 ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
 .vela-ind-tab{font-weight:600;font-size:13px;line-height:20px;transition:color var(--vela-dur-fast) ease,border-color var(--vela-dur-fast) ease;}
 .vela-ind-tab:not(.vela-ind-tab-active):hover{color:var(--vela-fg-bright);}
@@ -22070,174 +22861,6 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
     const v = `${hh}:${mm}`;
     return { value: v, label: v };
   });
-  var MONTH_LABELS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-  var MONTH_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-  var WEEKDAY_LABELS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-  function normalizeDateInput(raw) {
-    const t = raw.trim();
-    const m = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(t);
-    if (!m) return null;
-    const y = Number(m[1]);
-    const mo = Number(m[2]);
-    const d = Number(m[3]);
-    const dt = new Date(y, mo - 1, d);
-    if (dt.getFullYear() !== y || dt.getMonth() !== mo - 1 || dt.getDate() !== d) return null;
-    return isoDate(dt);
-  }
-  function parseIsoDate(raw) {
-    const iso = normalizeDateInput(raw);
-    if (!iso) return null;
-    const [y, mo, d] = iso.split("-").map(Number);
-    return new Date(y, mo - 1, d);
-  }
-  function isoDate(d) {
-    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
-  }
-  function fillCalendar(el, current, onPick) {
-    const today = /* @__PURE__ */ new Date();
-    const selected = parseIsoDate(current);
-    let year = selected?.getFullYear() ?? today.getFullYear();
-    let month = selected?.getMonth() ?? today.getMonth();
-    let mode = "date";
-    const prev3 = document.createElement("button");
-    prev3.type = "button";
-    prev3.className = "vela-ind-cal-nav";
-    prev3.innerHTML = iconAt("chevron-left", 14);
-    const next2 = document.createElement("button");
-    next2.type = "button";
-    next2.className = "vela-ind-cal-nav";
-    next2.innerHTML = iconAt("chevron-right", 14);
-    const monthBtn = document.createElement("button");
-    monthBtn.type = "button";
-    monthBtn.className = "vela-ind-cal-switch";
-    monthBtn.setAttribute("aria-label", "Choose month");
-    const yearBtn = document.createElement("button");
-    yearBtn.type = "button";
-    yearBtn.className = "vela-ind-cal-switch";
-    yearBtn.setAttribute("aria-label", "Choose year");
-    const title = document.createElement("div");
-    title.className = "vela-ind-cal-title";
-    title.append(monthBtn, yearBtn);
-    const head = document.createElement("div");
-    head.className = "vela-ind-cal-head";
-    head.append(prev3, title, next2);
-    const week = document.createElement("div");
-    week.className = "vela-ind-cal-week";
-    for (const d of WEEKDAY_LABELS) {
-      const cell = document.createElement("span");
-      cell.textContent = d;
-      week.appendChild(cell);
-    }
-    const grid = document.createElement("div");
-    const paint = () => {
-      const decade = Math.floor(year / 10) * 10;
-      monthBtn.hidden = mode !== "date";
-      monthBtn.textContent = MONTH_LABELS[month] ?? "";
-      yearBtn.textContent = mode === "year" ? `${decade}-${decade + 9}` : String(year);
-      yearBtn.disabled = mode === "year";
-      week.hidden = mode !== "date";
-      prev3.setAttribute("aria-label", mode === "date" ? "Previous month" : mode === "month" ? "Previous year" : "Previous decade");
-      next2.setAttribute("aria-label", mode === "date" ? "Next month" : mode === "month" ? "Next year" : "Next decade");
-      grid.className = mode === "date" ? "vela-ind-cal-grid" : "vela-ind-cal-cells";
-      grid.replaceChildren();
-      if (mode === "date") {
-        const startPad = new Date(year, month, 1).getDay();
-        const days = new Date(year, month + 1, 0).getDate();
-        const todayIso = isoDate(today);
-        const selectedIso = selected ? isoDate(selected) : "";
-        for (let i = 0; i < startPad; i++) {
-          const blank = document.createElement("span");
-          blank.className = "vela-ind-cal-blank";
-          grid.appendChild(blank);
-        }
-        for (let day = 1; day <= days; day++) {
-          const iso = `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
-          const b = document.createElement("button");
-          b.type = "button";
-          b.className = "vela-ind-cal-day";
-          b.textContent = String(day);
-          if (iso === selectedIso) b.dataset.checked = "1";
-          if (iso === todayIso) b.dataset.today = "1";
-          b.addEventListener("click", (e) => {
-            e.stopPropagation();
-            onPick(iso);
-          });
-          grid.appendChild(b);
-        }
-        return;
-      }
-      if (mode === "month") {
-        for (let m = 0; m < 12; m++) {
-          const b = document.createElement("button");
-          b.type = "button";
-          b.className = "vela-ind-cal-cell";
-          b.textContent = MONTH_SHORT[m] ?? "";
-          if (selected?.getFullYear() === year && selected.getMonth() === m) b.dataset.checked = "1";
-          if (today.getFullYear() === year && today.getMonth() === m) b.dataset.today = "1";
-          b.addEventListener("click", (e) => {
-            e.stopPropagation();
-            month = m;
-            mode = "date";
-            paint();
-          });
-          grid.appendChild(b);
-        }
-        return;
-      }
-      for (let y = decade - 1; y <= decade + 10; y++) {
-        const b = document.createElement("button");
-        b.type = "button";
-        b.className = "vela-ind-cal-cell";
-        b.textContent = String(y);
-        if (y < decade || y > decade + 9) b.dataset.outside = "1";
-        if (selected?.getFullYear() === y) b.dataset.checked = "1";
-        if (today.getFullYear() === y) b.dataset.today = "1";
-        b.addEventListener("click", (e) => {
-          e.stopPropagation();
-          year = y;
-          mode = "month";
-          paint();
-        });
-        grid.appendChild(b);
-      }
-    };
-    const step = (dir) => {
-      if (mode === "date") {
-        month += dir;
-        if (month < 0) {
-          month = 11;
-          year -= 1;
-        }
-        if (month > 11) {
-          month = 0;
-          year += 1;
-        }
-      } else {
-        year += mode === "month" ? dir : dir * 10;
-      }
-      paint();
-    };
-    prev3.addEventListener("click", (e) => {
-      e.stopPropagation();
-      step(-1);
-    });
-    next2.addEventListener("click", (e) => {
-      e.stopPropagation();
-      step(1);
-    });
-    monthBtn.addEventListener("click", (e) => {
-      e.stopPropagation();
-      mode = "month";
-      paint();
-    });
-    yearBtn.addEventListener("click", (e) => {
-      e.stopPropagation();
-      mode = "year";
-      paint();
-    });
-    paint();
-    el.append(head, week, grid);
-  }
   function normalizeTimeInput(raw) {
     const t = raw.trim();
     const m = /^(\d{1,2}):(\d{2})$/.exec(t) ?? /^(\d{2})(\d{2})$/.exec(t);
@@ -23615,6 +24238,22 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
     for (const t of chartTypes()) if (!out.includes(t.id)) out.push(t.id);
     return out;
   }
+  function sanitizeCrosshairOverride(value) {
+    if (!value || typeof value !== "object") return null;
+    const v = value;
+    const out = {};
+    if (isBool(v.vertical)) out.vertical = v.vertical;
+    if (isBool(v.horizontal)) out.horizontal = v.horizontal;
+    if (isColor(v.color)) out.color = v.color;
+    if (isNum(v.width)) out.width = Math.max(0.5, Math.min(8, v.width));
+    if (isLineStyle(v.style)) out.style = v.style;
+    if (isNum(v.opacity)) out.opacity = clampOpacity(v.opacity);
+    const shade = v.shadeRight;
+    if (shade && typeof shade === "object" && isColor(shade.color)) {
+      out.shadeRight = isNum(shade.opacity) ? { color: shade.color, opacity: clampOpacity(shade.opacity) } : { color: shade.color };
+    }
+    return Object.keys(out).length > 0 ? out : null;
+  }
   function isColor(v) {
     return typeof v === "string" && v.trim().length > 0;
   }
@@ -25276,7 +25915,7 @@ void main() {
 
   // src/renderers/native/core/Animator.ts
   var Animator = class {
-    constructor(tick, raf3, cancel, now) {
+    constructor(tick, raf3, cancel, now2) {
       this.tick = tick;
       this.handle = null;
       this.last = 0;
@@ -25290,7 +25929,7 @@ void main() {
       };
       this.raf = raf3 ?? ((cb) => requestAnimationFrame(cb));
       this.cancel = cancel ?? ((h) => cancelAnimationFrame(h));
-      this.now = now ?? (() => performance.now());
+      this.now = now2 ?? (() => performance.now());
     }
     get active() {
       return this.handle !== null;
@@ -26089,6 +26728,8 @@ void main() {
       /** VPVR-layer config pushed by the VPVR native indicator (null ⇒ layer off). Ephemeral. */
       this.vpvrLayer = null;
       this.crosshair = null;
+      /** Runtime override of the crosshair's lines and style (the `crosshairOverride` feature). Ephemeral. */
+      this.crosshairOverride = null;
       /** How the base price series is drawn on the price pane (candles by default). */
       this.priceStyle = "candles";
       /** Price-series base painting for the ACTIVE style (see ChartTypeDefinition.basePainting). */
@@ -28005,9 +28646,9 @@ void main() {
   }
 
   // src/renderers/native/chrome/countdown.ts
-  function countdownText(barOpen, barMs, now) {
+  function countdownText(barOpen, barMs, now2) {
     if (!(barMs > 0)) return null;
-    const remaining = barOpen + barMs - now;
+    const remaining = barOpen + barMs - now2;
     if (remaining <= 0) return null;
     return formatCountdown(remaining);
   }
@@ -28819,19 +29460,35 @@ void main() {
       const dataH = coords.height;
       if (!ch || ch.x < 0 || ch.x > dataW || ch.y < 0 || ch.y > dataH) return;
       const cs = scene.style.crosshair;
+      const ov = scene.crosshairOverride;
+      const vertical = ov?.vertical !== false;
+      const horizontal = ov?.horizontal !== false;
       ctx.font = `${scene.style.fontSize}px ${theme.fontFamily}`;
       ctx.textBaseline = "middle";
       const logical = Math.round(coords.xToLogical(ch.x));
-      const x = Math.round(coords.logicalToX(logical)) + 0.5;
-      ctx.strokeStyle = cs.color ?? theme.textColor;
-      ctx.lineWidth = cs.width;
-      ctx.globalAlpha = cs.opacity;
-      setDash3(ctx, cs.style);
+      const x = crisp(coords.logicalToX(logical), ov?.width ?? cs.width);
+      if (vertical && ov?.shadeRight) {
+        const from = Math.max(0, Math.round(coords.logicalToX(logical + 0.5)));
+        if (from < dataW) {
+          ctx.fillStyle = ov.shadeRight.color;
+          ctx.globalAlpha = ov.shadeRight.opacity ?? 1;
+          ctx.fillRect(from, 0, dataW - from, dataH);
+          ctx.globalAlpha = 1;
+        }
+      }
+      ctx.strokeStyle = ov?.color ?? cs.color ?? theme.textColor;
+      ctx.lineWidth = ov?.width ?? cs.width;
+      ctx.globalAlpha = ov?.opacity ?? cs.opacity;
+      setDash3(ctx, ov?.style ?? cs.style);
       ctx.beginPath();
-      ctx.moveTo(x, 0);
-      ctx.lineTo(x, dataH);
-      ctx.moveTo(0, Math.round(ch.y) + 0.5);
-      ctx.lineTo(dataW, Math.round(ch.y) + 0.5);
+      if (vertical) {
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, dataH);
+      }
+      if (horizontal) {
+        ctx.moveTo(0, Math.round(ch.y) + 0.5);
+        ctx.lineTo(dataW, Math.round(ch.y) + 0.5);
+      }
       ctx.stroke();
       ctx.setLineDash([]);
       ctx.lineWidth = 1;
@@ -28844,11 +29501,11 @@ void main() {
         }
       }
       const chipBg = cs.labelBackground ?? theme.borderColor;
-      if (pane && pane.axisFormat !== "none") {
+      if (horizontal && pane && pane.axisFormat !== "none") {
         const price = coords.yToPrice(ch.y, pane.scale, pane.bounds);
         this.chip(ctx, dataW + 1, ch.y, formatAxisValue(pane.scale, pane.bounds.height, price, percentScaleFor(scene, pane), scene.priceMintick, pane.axisFormat), chipBg, "left", false, theme.background);
       }
-      this.chip(ctx, x, dataH + 1, formatTimeStamp(coords.logicalToTime(logical), scene.timezone, coords.barInterval), chipBg, "center", true, theme.background);
+      if (vertical) this.chip(ctx, x, dataH + 1, formatTimeStamp(coords.logicalToTime(logical), scene.timezone, coords.barInterval), chipBg, "center", true, theme.background);
     }
     destroy() {
       this.canvas = null;
@@ -28859,23 +29516,37 @@ void main() {
      *  along), with that bar's time chip in this chart's own timezone and — when the
      *  level resolved — the price chip on the right axis. The snap happened upstream
      *  (`externalCrossPx`, floor-to-containing-bar) — this method only draws. Chips
-     *  render slightly dimmed so the ghost still reads as foreign. */
+     *  render slightly dimmed so the ghost still reads as foreign. A `crosshairOverride`
+     *  applies to the ghost as well — its line style, a dropped horizontal line, and the
+     *  `shadeRight` veil from the ghost bar's right edge — so a pick that spans several
+     *  charts reads the same on every one of them. */
     drawExternal(ctx, ext, scene, coords, theme) {
       const cs = scene.style.crosshair;
+      const ov = scene.crosshairOverride;
       const dataW = coords.width;
       const dataH = coords.height;
-      const x = Math.round(ext.x) + 0.5;
-      if (x < 0 || x > dataW) return;
+      const x = crisp(ext.x, ov?.width ?? cs.width);
+      if (ov?.vertical === false) return;
+      if (ov?.shadeRight) {
+        const from = Math.max(0, Math.round(coords.logicalToX(Math.round(coords.xToLogical(ext.x)) + 0.5)));
+        if (from < dataW) {
+          ctx.fillStyle = ov.shadeRight.color;
+          ctx.globalAlpha = ov.shadeRight.opacity ?? 1;
+          ctx.fillRect(from, 0, dataW - from, dataH);
+          ctx.globalAlpha = 1;
+        }
+      }
+      if (ext.line === false || x < 0 || x > dataW) return;
       ctx.font = `${scene.style.fontSize}px ${theme.fontFamily}`;
       ctx.textBaseline = "middle";
-      ctx.strokeStyle = cs.color ?? theme.textColor;
-      ctx.lineWidth = cs.width;
-      ctx.globalAlpha = cs.opacity * 0.55;
-      setDash3(ctx, cs.style);
+      ctx.strokeStyle = ov?.color ?? cs.color ?? theme.textColor;
+      ctx.lineWidth = ov?.width ?? cs.width;
+      ctx.globalAlpha = (ov?.opacity ?? cs.opacity) * 0.55;
+      setDash3(ctx, ov?.style ?? cs.style);
       ctx.beginPath();
       ctx.moveTo(x, 0);
       ctx.lineTo(x, dataH);
-      if (ext.y != null) {
+      if (ext.y != null && ov?.horizontal !== false) {
         ctx.moveTo(0, Math.round(ext.y) + 0.5);
         ctx.lineTo(dataW, Math.round(ext.y) + 0.5);
       }
@@ -28884,7 +29555,7 @@ void main() {
       ctx.lineWidth = 1;
       ctx.globalAlpha = 0.8;
       const chipBg = cs.labelBackground ?? theme.borderColor;
-      if (ext.y != null && ext.price != null) {
+      if (ext.y != null && ext.price != null && ov?.horizontal !== false) {
         let pane;
         for (const p of scene.panes.values()) {
           if (ext.y >= p.bounds.top && ext.y <= p.bounds.top + p.bounds.height) {
@@ -28924,6 +29595,9 @@ void main() {
       ctx.textAlign = "start";
     }
   };
+  function crisp(px, width) {
+    return Math.round(px) + (Math.round(width) % 2 === 1 ? 0.5 : 0);
+  }
   function setDash3(ctx, style) {
     if (style === "dashed") ctx.setLineDash([6, 4]);
     else if (style === "dotted") ctx.setLineDash([2, 3]);
@@ -37220,7 +37894,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.moveIndicatorCbs = /* @__PURE__ */ new Set();
       this.priceStyleCbs = /* @__PURE__ */ new Set();
       this.name = "native";
-      this.features = ["logScale", "currentPriceLine", "priceLabel", "countdown", "upColor", "downColor", "glow", "animZoom", "animPan", "animScroll", "animAutoscale", "animLiveBar", "intro", "zoomAnchor", "axisDrag", "paneResize", "candleZOrder", "candleVisible", "seriesOrder", "highlights", "sessionZones", "gridlines", "axisLabels", "scaleMode", "invertScale", "paneScales", "autoScale", "timezone", "keyboard", "historyChords", "priceStyle", "priceBaseline", "baselinePrice", "settings", "attribution", "dialogHost", "tradeMarkers", "marks", "indicatorTitles", "indicatorValues"];
+      this.features = ["logScale", "currentPriceLine", "priceLabel", "countdown", "upColor", "downColor", "glow", "animZoom", "animPan", "animScroll", "animAutoscale", "animLiveBar", "intro", "zoomAnchor", "axisDrag", "paneResize", "candleZOrder", "candleVisible", "seriesOrder", "highlights", "sessionZones", "gridlines", "axisLabels", "scaleMode", "invertScale", "paneScales", "autoScale", "timezone", "keyboard", "historyChords", "priceStyle", "priceBaseline", "baselinePrice", "settings", "attribution", "dialogHost", "tradeMarkers", "marks", "indicatorTitles", "indicatorValues", "crosshairOverride"];
       /** Track cursor proximity to the scroll button on the plot (bubbles from the button too,
        *  so moving onto the button doesn't count as leaving). */
       this.onScrollProximityMove = (e) => {
@@ -37399,6 +38073,9 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           this.scene.marks = mergeMarksState(this.scene.marks, value);
           this.markPopover?.close();
           break;
+        case "crosshairOverride":
+          this.scene.crosshairOverride = sanitizeCrosshairOverride(value);
+          break;
         case "keyboard":
           this.setKeyboardEnabled(Boolean(value));
           return;
@@ -37512,6 +38189,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           return { ...this.scene.tradeMarkers, colors: { ...this.scene.tradeMarkers.colors } };
         case "marks":
           return { visible: this.scene.marks.visible, groups: { ...this.scene.marks.groups } };
+        case "crosshairOverride":
+          return this.scene.crosshairOverride ? { ...this.scene.crosshairOverride } : null;
         case "keyboard":
           return this.keyboardEnabled;
         case "historyChords":
@@ -38090,8 +38769,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       for (const pane of this.scene.panes.values()) pane.scale = { ...pane.scaleTarget };
       this.modelAlpha = 0;
       const start = performance.now();
-      const step = (now) => {
-        const p = Math.min(1, (now - start) / duration);
+      const step = (now2) => {
+        const p = Math.min(1, (now2 - start) / duration);
         this.scene.bars = p >= 1 ? real : real.map((b, i) => this.revealCandle(b, i, p, n, style));
         this.paintData();
         if (p < 1) {
@@ -38107,8 +38786,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     fadeInModels() {
       const fade = Math.min(INTRO_MODEL_FADE_MS, this.intro.duration || INTRO_MODEL_FADE_MS);
       const start = performance.now();
-      const step = (now) => {
-        this.modelAlpha = Math.min(1, (now - start) / fade);
+      const step = (now2) => {
+        this.modelAlpha = Math.min(1, (now2 - start) / fade);
         this.paintData();
         if (this.modelAlpha < 1) {
           this.introRaf = requestAnimationFrame(step);
@@ -38631,10 +39310,13 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           this.animator.start();
         }
       } else if (!last2 || bar.time > last2.time) {
+        const vp = this.coords.getViewport();
+        const holdView = n > 0 && vp.rightOffset < 0 && this.scrollTargetRO === null;
         this.bars.push(bar);
         this.syncLiveEase(bar);
         if (this.coords.barInterval > 0) this.coords.appendBar(bar.time);
         else this.coords.setBars(this.bars.map((b) => b.time));
+        if (holdView) this.coords.setViewport({ ...vp, rightOffset: vp.rightOffset - 1 });
       } else {
         return;
       }
@@ -39316,10 +39998,10 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       if (this.markPulseRaf !== null || typeof requestAnimationFrame !== "function") return;
       const tick = () => {
         this.markPulseRaf = null;
-        const now = frameNow();
-        if (this.scene.marksFlash && this.scene.marksFlash.until <= now) this.scene.marksFlash = null;
+        const now2 = frameNow();
+        if (this.scene.marksFlash && this.scene.marksFlash.until <= now2) this.scene.marksFlash = null;
         this.scheduler?.invalidate(2 /* Chrome */);
-        const pulsing = this.scene.marksHoverKey !== null && now - this.scene.marksHoverSince < MARK_PULSE_MS;
+        const pulsing = this.scene.marksHoverKey !== null && now2 - this.scene.marksHoverSince < MARK_PULSE_MS;
         if (pulsing || this.scene.marksFlash !== null) this.markPulseRaf = requestAnimationFrame(tick);
       };
       this.markPulseRaf = requestAnimationFrame(tick);
@@ -39880,9 +40562,10 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       const ext = this.externalCross;
       if (!ext || this.coords.barCount === 0) return null;
       const logical = Math.floor(this.coords.timeToLogical(ext.time));
-      if (logical < 0 || logical >= this.coords.barCount) return null;
-      const x = this.coords.logicalToX(logical);
-      if (!Number.isFinite(x) || x < 0 || x > this.coords.width) return null;
+      if (!(logical < this.coords.barCount)) return null;
+      const x = this.coords.logicalToX(Math.max(logical, -1));
+      if (!Number.isFinite(x)) return null;
+      const line = logical >= 0 && x >= 0 && x <= this.coords.width;
       let y = null;
       if (ext.price != null) {
         const pricePane = this.scene.orderedPanes().find((p) => p.kind === "price");
@@ -39891,7 +40574,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           if (!Number.isFinite(y) || y < pricePane.bounds.top || y > pricePane.bounds.top + pricePane.bounds.height) y = null;
         }
       }
-      return { x, y, time: this.coords.logicalToTime(logical), price: y != null ? ext.price : null };
+      return { x, y, time: this.coords.logicalToTime(Math.max(logical, 0)), price: y != null ? ext.price : null, line };
     }
     /** Set the sticky magnet mode (called by the drawings toolbar's 3-state button). */
     setSnapMode(mode) {
@@ -44596,6 +45279,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.panesControl = new PanesControl(this.orchestrator);
       this.drawingsControl = new DrawingsControl(this.orchestrator.drawings);
       this.marksControl = new MarksControl(this.orchestrator.marks);
+      this.replayControl = new ReplayControl(this.orchestrator);
     }
     /**
      * Register a scripting engine so `addIndicator({ language })` can run that
@@ -44835,6 +45519,16 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     get marks() {
       return this.marksControl;
     }
+    /**
+     * The chart's bar-replay control surface: rewind to a past bar and reveal the
+     * following ones by hand or on a timer, from the history already loaded —
+     * `await chart.replay.start({ from })`, `chart.replay.play(2000)`, `chart.replay.step()`,
+     * `chart.replay.stop()`. Revealed bars behave like live bars for indicators; live
+     * updates pause meanwhile. Follow it with the `replay:*` events.
+     */
+    get replay() {
+      return this.replayControl;
+    }
     on(event, handler) {
       return this.orchestrator.events.on(event, handler);
     }
@@ -44893,6 +45587,28 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     return element;
   }
 
+  // src/core/replayTicks.ts
+  function lowerTimeframeTicks(chart, timeframe) {
+    return async (bar, { end, signal }) => {
+      const { symbol, session } = chart.market;
+      const resolved = symbol ? chart.data.resolve(symbol) : null;
+      const provider = resolved ? chart.data.providerInstance(resolved.provider) : void 0;
+      if (!resolved || !provider) return [];
+      const bars = await provider.getBars(resolved.ticker, timeframe, { from: bar.time, to: end - 1, ...session ? { session } : {} });
+      if (signal.aborted) return [];
+      return barsToTicks(bars.filter((b) => b.time >= bar.time && b.time < end));
+    };
+  }
+  function barsToTicks(bars) {
+    return bars.map((b) => ({
+      price: b.close,
+      open: b.open,
+      high: b.high,
+      low: b.low,
+      ...b.volume === void 0 ? {} : { volume: b.volume }
+    }));
+  }
+
   // src/widget/topbar-composition.ts
   var TOPBAR_BUILTIN_IDS = ["symbol", "timeframes", "style", "layout", "indicators", "actions", "undo-redo", "alerts", "panels", "screenshot"];
 
@@ -45824,8 +46540,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     /** Block until the spacing window opens and any pause has elapsed, then reserve the next slot. */
     async waitForTurn() {
       for (; ; ) {
-        const now = this.clock.now();
-        const wait = Math.max(this.pausedUntil - now, this.nextStartAt - now);
+        const now2 = this.clock.now();
+        const wait = Math.max(this.pausedUntil - now2, this.nextStartAt - now2);
         if (wait <= 0) break;
         await this.clock.delay(wait);
       }
@@ -46286,6 +47002,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
   exports.NativeRenderer = NativeRenderer;
   exports.OVERRIDABLE_TOPBAR_IDS = OVERRIDABLE_TOPBAR_IDS;
   exports.RendererControl = RendererControl;
+  exports.ReplayControl = ReplayControl;
   exports.SERIES_LINE = SERIES_LINE;
   exports.SESSION_OFF = SESSION_OFF;
   exports.SESSION_POST = SESSION_POST;
@@ -46300,6 +47017,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
   exports.VALID = VALID;
   exports.Vela = Vela;
   exports.WARNING = WARNING;
+  exports.barsToTicks = barsToTicks;
   exports.buildColorPicker = buildColorPicker;
   exports.buildToolbar = buildToolbar;
   exports.categoricalColor = categoricalColor;
@@ -46318,6 +47036,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
   exports.inputVisible = inputVisible;
   exports.legendActions = legendActions;
   exports.legendCallouts = legendCallouts;
+  exports.lowerTimeframeTicks = lowerTimeframeTicks;
   exports.nativeIndicatorDescriptors = nativeIndicatorDescriptors;
   exports.nativeIndicatorTypes = nativeIndicatorTypes;
   exports.normalizeSettingsRow = normalizeSettingsRow;