@luxalgo/vela 0.7.8 → 0.8.0

package/dist/{chunk-N4ZZYLMP.js → chunk-QBPUT5SU.js}

@@ -1,6 +1,6 @@
-import { deserializeDrawing, chartTypes, rendererLayers, isLineLikeSeries, seriesShownOn, foldBaseModulation, registerChartType, rendererDefaults, getDrawingType, settingsRowVisible, normalizeSettingsRow, Magnifier, TextLabel, Callout, resetDrawingSettings, registerNativeIndicator, chartType, getNativeIndicator, nativeIndicatorDescriptors, nativeInstanceChannel, drawingTypes, settingsRowValueKeys, formatDuration, RegressionChannel, FixedRangeVolumeProfile, DEFAULT_DRAWING_COLOR, SegmentDrawing, ArrowMark, GlyphStamp, RadialFib, FibSpiral, DedekindTessellation, MachFigure, GannSquare, FibRatios, MeasureBox, PositionTool, AnchoredVwap, PatternDrawing, Comment, PriceNote, Signpost, Note, PriceLabel, GANN_SQUARE_ARCS, magnifierTimeframeLabel, lineSegmentIntersection, MAGNIFIER_TIMEFRAME_OPTIONS, GLYPH_OPTIONS, STAMP_SIZE_OPTIONS, LINE_STYLE_OPTIONS, DEDEKIND_CURVATURE_OPTIONS, MACH_NUMBER_OPTIONS, MACH_WAVE_COUNT_OPTIONS, TEXT_SIZE_OPTIONS, createDrawing, inputVisible, seriesInScale, tickerModifierIds, CalloutBase, DIRECTION_OPTIONS, stableSeriesId } from './chunk-BFA32GOU.js';
-import { themeTokens, Dialog, closeOpenPopovers, closeWidthPopover, fieldSection, buildFieldControl, fieldSeparator, fieldGrid, fieldRow, CALLOUT_STYLE_ID, CALLOUT_CSS, Popover, blendOver, splitColor, CalloutBubble, Menu, TextArea, NumberInput, buildColorPicker, isPopoverOpen, eventDismissedPopover, toggleSelectList, openPopoverTrigger, fieldGridColumns, FIELD_GAP_PX, STATIC_TOKENS } from './chunk-WTWGEB7K.js';
-import { icon, iconAt, withAlpha, WARNING, ACCENT, NEUTRAL, INFO, BULLISH, BEARISH, isDarkColor, injectStyles, SERIES_LINE, CHIP_PLATE, CROSSHAIR, TRADE_EXIT, TRADE_SHORT, TRADE_LONG, iconMarkup, overlayScrollbarCss, SLATE_DEEP, VALID, INVALID, SLATE, FIELD_FOCUS_CSS, FIELD_FOCUS_RING, svg24, svg24Solid } from './chunk-CAFCLMPF.js';
+import { deserializeDrawing, chartTypes, rendererLayers, isLineLikeSeries, seriesShownOn, foldBaseModulation, registerChartType, rendererDefaults, getDrawingType, settingsRowVisible, normalizeSettingsRow, Magnifier, TextLabel, Callout, resetDrawingSettings, registerNativeIndicator, chartType, getNativeIndicator, nativeIndicatorDescriptors, nativeInstanceChannel, drawingTypes, settingsRowValueKeys, formatDuration, RegressionChannel, FixedRangeVolumeProfile, DEFAULT_DRAWING_COLOR, SegmentDrawing, ArrowMark, GlyphStamp, RadialFib, FibSpiral, DedekindTessellation, MachFigure, GannSquare, FibRatios, MeasureBox, PositionTool, AnchoredVwap, PatternDrawing, Comment, PriceNote, Signpost, Note, PriceLabel, GANN_SQUARE_ARCS, magnifierTimeframeLabel, lineSegmentIntersection, MAGNIFIER_TIMEFRAME_OPTIONS, GLYPH_OPTIONS, STAMP_SIZE_OPTIONS, LINE_STYLE_OPTIONS, DEDEKIND_CURVATURE_OPTIONS, MACH_NUMBER_OPTIONS, MACH_WAVE_COUNT_OPTIONS, TEXT_SIZE_OPTIONS, createDrawing, inputVisible, seriesInScale, tickerModifierIds, CalloutBase, DIRECTION_OPTIONS, stableSeriesId } from './chunk-EZ5FWVLA.js';
+import { themeTokens, Dialog, closeOpenPopovers, closeWidthPopover, fieldSection, buildFieldControl, fieldSeparator, fieldGrid, fieldRow, CALLOUT_STYLE_ID, CALLOUT_CSS, Popover, blendOver, splitColor, CalloutBubble, Menu, TextArea, NumberInput, buildColorPicker, isPopoverOpen, DatePicker, eventDismissedPopover, toggleSelectList, normalizeDateInput, openPopoverTrigger, fieldGridColumns, FIELD_GAP_PX, STATIC_TOKENS } from './chunk-2IAETM2I.js';
+import { icon, iconAt, withAlpha, WARNING, ACCENT, NEUTRAL, INFO, BULLISH, BEARISH, isDarkColor, injectStyles, SERIES_LINE, CHIP_PLATE, CROSSHAIR, TRADE_EXIT, TRADE_SHORT, TRADE_LONG, iconMarkup, overlayScrollbarCss, SLATE_DEEP, VALID, INVALID, SLATE, FIELD_FOCUS_CSS, FIELD_FOCUS_RING, svg24, svg24Solid } from './chunk-BZQM2XO7.js';
 
 // src/core/events/EventBus.ts
 var TypedEventBus = class {
@@ -514,6 +514,12 @@ var RendererControl = class {
   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);
@@ -1780,11 +1786,76 @@ var MarksControl = class {
   }
 };
 
+// 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;
   }
@@ -1800,15 +1871,15 @@ var SecondClock = class _SecondClock {
     };
   }
   /** 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()));
   }
@@ -3801,10 +3872,16 @@ var IndicatorInputsDialog = class {
         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;
@@ -3929,28 +4006,6 @@ function ensureDialogStyles() {
 .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);}
@@ -3984,174 +4039,6 @@ var TIME_OPTIONS = Array.from({ length: 48 }, (_, i) => {
   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 prev2 = document.createElement("button");
-  prev2.type = "button";
-  prev2.className = "vela-ind-cal-nav";
-  prev2.innerHTML = iconAt("chevron-left", 14);
-  const next = document.createElement("button");
-  next.type = "button";
-  next.className = "vela-ind-cal-nav";
-  next.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(prev2, title, next);
-  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";
-    prev2.setAttribute("aria-label", mode === "date" ? "Previous month" : mode === "month" ? "Previous year" : "Previous decade");
-    next.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();
-  };
-  prev2.addEventListener("click", (e) => {
-    e.stopPropagation();
-    step(-1);
-  });
-  next.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);
@@ -5529,6 +5416,22 @@ function priceStyleIds() {
   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;
 }
@@ -7190,7 +7093,7 @@ var Scheduler = class {
 
 // src/renderers/native/core/Animator.ts
 var Animator = class {
-  constructor(tick, raf, cancel, now) {
+  constructor(tick, raf, cancel, now2) {
     this.tick = tick;
     this.handle = null;
     this.last = 0;
@@ -7204,7 +7107,7 @@ var Animator = class {
     };
     this.raf = raf ?? ((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;
@@ -8039,6 +7942,8 @@ var SceneGraph = class {
     /** 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). */
@@ -9955,9 +9860,9 @@ function timeTicks(fromMs, toMs, target = 8, offsetMs = 0) {
 }
 
 // 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);
 }
@@ -10769,19 +10674,35 @@ var CrosshairRenderer = class {
     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;
@@ -10794,11 +10715,11 @@ var CrosshairRenderer = class {
       }
     }
     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;
@@ -10809,23 +10730,37 @@ var CrosshairRenderer = class {
    *  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);
     }
@@ -10834,7 +10769,7 @@ var CrosshairRenderer = class {
     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) {
@@ -10874,6 +10809,9 @@ var CrosshairRenderer = class {
     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]);
@@ -18434,7 +18372,7 @@ var NativeRenderer = class {
     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) => {
@@ -18613,6 +18551,9 @@ var NativeRenderer = class {
         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;
@@ -18726,6 +18667,8 @@ var NativeRenderer = class {
         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":
@@ -19304,8 +19247,8 @@ var NativeRenderer = class {
     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) {
@@ -19321,8 +19264,8 @@ var NativeRenderer = class {
   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);
@@ -19845,10 +19788,13 @@ var NativeRenderer = class {
         this.animator.start();
       }
     } else if (!last || bar.time > last.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;
     }
@@ -20530,10 +20476,10 @@ var NativeRenderer = class {
     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);
@@ -21094,9 +21040,10 @@ var NativeRenderer = class {
     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");
@@ -21105,7 +21052,7 @@ var NativeRenderer = class {
         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) {
@@ -22329,6 +22276,7 @@ var CHUNK_BARS = 1e4;
 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;
@@ -22381,6 +22329,32 @@ var EngineOrchestrator = class _EngineOrchestrator {
     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";
@@ -22604,6 +22578,10 @@ var EngineOrchestrator = class _EngineOrchestrator {
       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;
@@ -22746,6 +22724,36 @@ var EngineOrchestrator = class _EngineOrchestrator {
     // exactly like a timeframe change; the cache keys the sessions apart.
     next.session !== void 0 && next.session !== m.session || next.data !== void 0;
     const depthChanged = next.bars !== void 0 && next.bars !== m.bars;
+    const sameClock = identityChanged && next.data === void 0 && (next.symbol === void 0 || next.symbol === m.symbol) && (next.timeframe !== void 0 || next.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 && next.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 && next.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 && ((next.bars ?? 0) <= this.rawBars.length || typeof this.feed.loadRange === "function");
     if (!identityChanged && !depthChanged) {
       if (typeof next.visibleRange === "string") this.setVisibleRangePreset(next.visibleRange);
@@ -22803,15 +22811,20 @@ var EngineOrchestrator = class _EngineOrchestrator {
       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: prev2 });
     }
+    if (carry && !carryNow) this.resumeCarriedReplay(this.replayStart({ from: carryFrom }), carry);
   }
   /**
    * Restart every native indicator over the new market: a `NativeIndicatorContext`
@@ -22935,6 +22948,397 @@ var EngineOrchestrator = class _EngineOrchestrator {
   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 first = this.rawBars[0];
+    const last = this.replayQueue?.[this.replayQueue.length - 1] ?? this.rawBars[this.rawBars.length - 1];
+    return first && last ? { first: first.time, last: last.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 open = t.open ?? t.price;
+        c = { time: f.bar.time, open, high: Math.max(open, hi), low: Math.min(open, 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 next = this.replayQueue?.[0];
+    if (next && this.replayTickSource) this.requestTicks(next);
+  }
+  /** 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 last = this.rawBars[this.rawBars.length - 1];
+      if (last && this.canHeal()) void this.healGap(last.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;
@@ -23006,7 +23410,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
     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,
@@ -23132,6 +23536,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
         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() {
@@ -23154,10 +23559,11 @@ var EngineOrchestrator = class _EngineOrchestrator {
     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 = [];
@@ -23462,6 +23868,13 @@ var EngineOrchestrator = class _EngineOrchestrator {
   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?.();
@@ -23560,6 +23973,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
           this.emitScriptRun(id, cause, first);
         },
         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 });
@@ -23586,7 +24000,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
         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,
@@ -23989,17 +24403,17 @@ var EngineOrchestrator = class _EngineOrchestrator {
   }
   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, first) {
     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, first)).then((run) => {
       if (run && this.registry.get(id)) this.events.emit("script:run", run);
     });
@@ -24052,6 +24466,16 @@ var EngineOrchestrator = class _EngineOrchestrator {
     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())));
@@ -28127,6 +28551,7 @@ var Vela = class {
     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
@@ -28366,6 +28791,16 @@ var Vela = class {
   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);
   }
@@ -28424,4 +28859,4 @@ function resolveElement(container) {
   return element;
 }
 
-export { BUILTIN_PRICE_STYLES, BarStore, CachingDataFeed, DARK_THEME, DataControl, DrawingStore, DrawingToolbar, DrawingsControl, LEGEND_AT_TOP_ATTR, LIGHT_THEME, MarksControl, MultiProviderFeed, NativeRenderer, RendererControl, SecondClock, TIMEZONES, TypedEventBus, Vela, applyAttributionMarkTheme, buildToolbar, createAttributionMark, createCustomMark, defaultMemberOf, defaultToolbar, groupKeyOf, groupMembers, isExchangeTimezone, isGroupRow, normalizeSession, normalizeTimezone, parseSymbol, priceStyleIds, registerBuiltinChartTypes, resolveTheme, resolveTimezone, sharedBarStore, timeframeToMs, timezoneMenuRows, tzButtonLabel, tzMenuLabel, tzOffset };
+export { BUILTIN_PRICE_STYLES, BarStore, CachingDataFeed, DARK_THEME, DataControl, DrawingStore, DrawingToolbar, DrawingsControl, LEGEND_AT_TOP_ATTR, LIGHT_THEME, MarksControl, MultiProviderFeed, NativeRenderer, RendererControl, ReplayControl, SecondClock, TIMEZONES, TypedEventBus, Vela, applyAttributionMarkTheme, buildToolbar, createAttributionMark, createCustomMark, defaultMemberOf, defaultToolbar, groupKeyOf, groupMembers, isExchangeTimezone, isGroupRow, normalizeSession, normalizeTimezone, parseSymbol, priceStyleIds, registerBuiltinChartTypes, resolveTheme, resolveTimezone, sharedBarStore, timeframeToMs, timezoneMenuRows, tzButtonLabel, tzMenuLabel, tzOffset };