@luxalgo/vela 0.7.8 → 0.8.0

package/dist/widget.cjs

@@ -1230,6 +1230,7 @@ registerIcon("chevron-down", S('<path d="M3.5 6 8 10.5 12.5 6"/>'));
 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"/>'));
@@ -4550,6 +4551,264 @@ var CalloutBubble = class {
   }
 };
 
+// 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/widget/layout-picker.ts
 var STYLE_ID = "vela-widget-layout-picker-v14";
 var CSS2 = `
@@ -4967,6 +5226,9 @@ function pinnedTopbarActionIds(comp) {
 }
 
 // src/widget/contributions.ts
+function mobilePlacement(action) {
+  return action.mobile ?? (action.align === "left" ? "bar" : "menu");
+}
 var registry3 = /* @__PURE__ */ new Map();
 var attachments = /* @__PURE__ */ new Map();
 var panels = /* @__PURE__ */ new Map();
@@ -5204,6 +5466,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;
 }
@@ -6091,8 +6369,8 @@ var Topbar = class {
 // 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;
   }
@@ -6108,15 +6386,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()));
   }
@@ -15370,16 +15648,16 @@ var MobileBar = class {
     host.appendChild(this.el);
     this.renderActions();
   }
-  /** Re-project the left-aligned contributed actions as icon-only stops in the
-   *  indicators slot (call after registrations change). Right-aligned actions stay
-   *  in the three-dots drawer — a primary stop is what `align: 'left'` opts into. */
+  /** Re-project the contributed actions placed on the bar (left-aligned by default —
+   *  see `mobilePlacement`) as icon-only stops in the indicators slot (call after
+   *  registrations change). The rest are three-dots drawer rows. */
   renderActions() {
     const ctx = this.opts.getContext?.();
     if (!ctx) return;
     const doc = this.el.ownerDocument;
     this.actionsHost.replaceChildren();
     const builtin = new Set(TOPBAR_BUILTIN_IDS);
-    for (const action of widgetActions("topbar", ctx).filter((a) => a.align === "left" && !builtin.has(a.id))) {
+    for (const action of widgetActions("topbar", ctx).filter((a) => mobilePlacement(a) === "bar" && !builtin.has(a.id))) {
       const b = doc.createElement("button");
       b.className = "vela-mb-item";
       b.setAttribute("aria-label", action.label);
@@ -15935,6 +16213,7 @@ var MoreDrawer = class {
       const value = shape ? `${shape.cols} \xD7 ${shape.rows}` : this.opts.layout.presets().find((p) => p.checked)?.label;
       list.appendChild(this.row(doc, "Layout", { icon: "layout", value, chevron: true, onClick: () => this.show("layout") }));
     }
+    for (const act of this.opts.primaryActions?.() ?? []) list.appendChild(this.actionRow(doc, act));
     for (const panel of this.opts.panels()) {
       list.appendChild(
         this.row(doc, panel.title, {
@@ -15950,19 +16229,19 @@ var MoreDrawer = class {
       const alertCount = this.opts.alerts().length;
       list.appendChild(this.row(doc, "Alerts", { icon: "bell", value: alertCount > 0 ? String(alertCount) : void 0, chevron: true, onClick: () => this.show("alerts") }));
     }
-    for (const act of this.opts.actions()) {
-      list.appendChild(
-        this.row(doc, act.label, {
-          icon: act.icon,
-          onClick: () => {
-            act.run();
-            this.drawer.hide();
-          }
-        })
-      );
-    }
+    for (const act of this.opts.actions()) list.appendChild(this.actionRow(doc, act));
     this.drawer.body.appendChild(list);
   }
+  /** A contributed action's row: runs it and closes the drawer. */
+  actionRow(doc, act) {
+    return this.row(doc, act.label, {
+      icon: act.icon,
+      onClick: () => {
+        act.run();
+        this.drawer.hide();
+      }
+    });
+  }
   renderStyle(doc) {
     const list = doc.createElement("div");
     list.className = "vela-md-list";
@@ -18336,6 +18615,7 @@ function sanitizeCell(raw) {
   if (typeof c.bars === "number" && Number.isFinite(c.bars) && c.bars > 0) out.bars = c.bars;
   if (c.session === "regular" || c.session === "extended") out.session = c.session;
   if (typeof c.watermark === "boolean") out.watermark = c.watermark;
+  if (typeof c.replayWatermark === "boolean") out.replayWatermark = c.replayWatermark;
   if (typeof c.indicatorTitles === "boolean") out.indicatorTitles = c.indicatorTitles;
   if (typeof c.indicatorValues === "boolean") out.indicatorValues = c.indicatorValues;
   if (c.rendererConfig != null && typeof c.rendererConfig === "object") out.rendererConfig = c.rendererConfig;
@@ -19074,6 +19354,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;
@@ -19126,6 +19407,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";
@@ -19349,6 +19656,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;
@@ -19491,6 +19802,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);
@@ -19548,15 +19889,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`
@@ -19680,6 +20026,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 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 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;
@@ -19751,7 +20488,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,
@@ -19877,6 +20614,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() {
@@ -19899,10 +20637,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 = [];
@@ -20207,6 +20946,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?.();
@@ -20305,6 +21051,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 });
@@ -20331,7 +21078,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,
@@ -20734,17 +21481,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);
     });
@@ -20797,6 +21544,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())));
@@ -20997,6 +21754,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);
@@ -21495,6 +22258,71 @@ 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/model/inputs.ts
 function inputVisible(when, values) {
   if (!when) return true;
@@ -22104,10 +22932,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;
@@ -22232,28 +23066,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);}
@@ -22287,174 +23099,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);
@@ -25158,7 +25802,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;
@@ -25172,7 +25816,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;
@@ -25971,6 +26615,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). */
@@ -27887,9 +28533,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);
 }
@@ -28701,19 +29347,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;
@@ -28726,11 +29388,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;
@@ -28741,23 +29403,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);
     }
@@ -28766,7 +29442,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) {
@@ -28806,6 +29482,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]);
@@ -36244,7 +36923,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) => {
@@ -36423,6 +37102,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;
@@ -36536,6 +37218,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":
@@ -37114,8 +37798,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) {
@@ -37131,8 +37815,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);
@@ -37655,10 +38339,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;
     }
@@ -38340,10 +39027,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);
@@ -38904,9 +39591,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");
@@ -38915,7 +39603,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) {
@@ -43591,6 +44279,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
@@ -43830,6 +44519,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);
   }
@@ -44025,9 +44724,15 @@ var CSS21 = `
 }
 .vela-statusline .vela-sl-symbol { font-weight: 600; font-size: var(--vela-font-size-lg); }
 .vela-statusline .vela-sl-meta { color: var(--vela-fg-muted); font-size: var(--vela-font-size-md); font-weight: 600; }
+/* The meta opens with "\xB7 " \u2014 sit its dot one space-width after the ticker, as far as the
+ * venue sits after it, not a full row gap away. */
+.vela-statusline .vela-sl-symbol + .vela-sl-meta { margin-left: calc(var(--vela-space-1) - var(--vela-space-2)); }
 /* Market status badge \u2014 a kit callout bubble (icon-only 16px circle, label on hover
- * via the kit tooltip); the session tint is applied per status in setMarketStatus. */
-.vela-statusline .vela-sl-market { align-self: center; }
+ * via the kit tooltip); the session tint is applied per status in setMarketStatus. While
+ * the chart replays past bars it wears the replay badge instead (the inverse chip). */
+.vela-statusline .vela-sl-market { align-self: center; display: inline-flex; }
+.vela-statusline .vela-sl-market > [hidden] { display: none !important; }
+.vela-statusline .vela-sl-replay-badge, .vela-statusline .vela-sl-replay-badge svg { display: block; width: 16px; height: 16px; }
 .vela-statusline .vela-sl-ohlc { display: flex; gap: var(--vela-space-1); color: var(--vela-fg-muted); }
 .vela-statusline .vela-sl-ohlc b { color: var(--vela-fg); font-weight: 500; }
 /* The change value wears the SAME ink as the OHLC values (set inline per render) \u2014
@@ -44080,6 +44785,8 @@ var MARKET_LABELS = {
   closed: "Market Closed",
   holiday: "Market Holiday"
 };
+var REPLAY_LABEL = "Replay Mode";
+var REPLAY_BADGE_SVG = '<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><circle cx="8" cy="8" r="8" style="fill: var(--vela-selected-bg)"/><path d="M11.7 4.75v6.5L7.2 8zM7.2 4.75v6.5L2.7 8z" style="fill: var(--vela-selected-fg); stroke: var(--vela-selected-fg); stroke-width: 0.8; stroke-linejoin: round"/></svg>';
 var MARKET_INKS = {
   open: "var(--vela-up)",
   pre: SESSION_PRE,
@@ -44118,6 +44825,9 @@ var Statusline = class {
     this.host = host;
     this.iconFor = iconFor;
     this.parts = { logo: true, name: true, market: true, ohlc: true, change: true };
+    this.marketStatus = "open";
+    /** The chart replays past bars — the badge shows the replay mode (see {@link setReplaying}). */
+    this.replaying = false;
     /** The right-click action menu — present once a host wires it via {@link attachMenu}. */
     this.menu = null;
     this.menuHooks = null;
@@ -44169,8 +44879,13 @@ var Statusline = class {
       label: MARKET_LABELS.open,
       host
     });
-    this.marketEl = this.marketBubble.el;
-    this.marketEl.classList.add("vela-sl-market");
+    this.replayBadge = doc.createElement("span");
+    this.replayBadge.className = "vela-sl-replay-badge";
+    this.replayBadge.innerHTML = REPLAY_BADGE_SVG;
+    this.replayBadge.hidden = true;
+    this.marketEl = doc.createElement("span");
+    this.marketEl.className = "vela-sl-market";
+    this.marketEl.append(this.marketBubble.el, this.replayBadge);
     this.ohlcEl = doc.createElement("span");
     this.ohlcEl.className = "vela-sl-ohlc";
     this.changeEl = doc.createElement("span");
@@ -44292,6 +45007,25 @@ var Statusline = class {
   /** Dress the market badge for a session state: its icon, tinted circle, and the
    *  hover label. Callers with no session model leave the constructor's 'open'. */
   setMarketStatus(status) {
+    this.marketStatus = status;
+    this.dressBadge();
+  }
+  /** The chart entered or left a bar replay: the badge shows the replay mode meanwhile
+   *  (the session state of a past bar says nothing about the market now). */
+  setReplaying(replaying) {
+    if (replaying === this.replaying) return;
+    this.replaying = replaying;
+    this.dressBadge();
+  }
+  dressBadge() {
+    this.marketBubble.el.hidden = this.replaying;
+    this.replayBadge.hidden = !this.replaying;
+    if (this.replaying) {
+      this.marketEl.dataset.status = "replay";
+      this.marketTip.setContent(REPLAY_LABEL);
+      return;
+    }
+    const status = this.marketStatus;
     this.marketEl.dataset.status = status;
     const ink = MARKET_INKS[status];
     this.marketBubble.set({
@@ -44364,11 +45098,23 @@ var Statusline = class {
         this.lastBar = b;
         if (!this.hoverBar) this.render();
       }),
+      // A replay cut or restore replaces the newest bar without a `bar` event.
+      chart.on("replay:start", () => {
+        this.lastBar = null;
+        this.setReplaying(true);
+        this.render();
+      }),
+      chart.on("replay:end", () => {
+        this.lastBar = null;
+        this.setReplaying(false);
+        this.render();
+      }),
       chart.renderer.onCrosshairMove((e) => {
         this.hoverBar = e.ohlc;
         this.render();
       })
     );
+    this.setReplaying(chart.replay.state.active);
     this.render();
   }
   destroy() {
@@ -44609,26 +45355,26 @@ function isWeekday(ms, tz) {
     return false;
   }
 }
-function deriveMarketStatus(now, w, tz, overnight = false) {
-  const within = (ws) => ws.find(([s, e]) => now >= s && now < e);
+function deriveMarketStatus(now2, w, tz, overnight = false) {
+  const within = (ws) => ws.find(([s, e]) => now2 >= s && now2 < e);
   if (within(w.regular)) return "open";
   const ext = within(w.extended);
   if (ext) {
     if (overnight) return "extended";
-    return w.regular.some(([s]) => s >= now && s < ext[1]) ? "pre" : "post";
+    return w.regular.some(([s]) => s >= now2 && s < ext[1]) ? "pre" : "post";
   }
-  if (isWeekday(now, tz)) {
-    const today = civilDate(now, tz);
+  if (isWeekday(now2, tz)) {
+    const today = civilDate(now2, tz);
     if (today !== "" && !w.extended.some(([s]) => civilDate(s, tz) === today)) return "holiday";
   }
   return "closed";
 }
-function nextStatusBoundary(now, w) {
+function nextStatusBoundary(now2, w) {
   let next = null;
   for (const ws of [w.regular, w.extended]) {
     for (const [s, e] of ws) {
       for (const t of [s, e]) {
-        if (t > now && (next == null || t < next)) next = t;
+        if (t > now2 && (next == null || t < next)) next = t;
       }
     }
   }
@@ -44667,8 +45413,8 @@ var MarketStatusTracker = class {
       return;
     }
     const tz = typeof si?.timezone === "string" && si.timezone !== "" ? si.timezone : "Etc/UTC";
-    const now = Date.now();
-    const range = { from: now - FETCH_BACK_MS, to: now + FETCH_AHEAD_MS };
+    const now2 = Date.now();
+    const range = { from: now2 - FETCH_BACK_MS, to: now2 + FETCH_AHEAD_MS };
     const [regular, extended] = await Promise.all([
       provider.getCalendar(resolved.ticker, { ...range, session: "regular" }).catch(() => null),
       provider.getCalendar(resolved.ticker, { ...range, session: "extended" }).catch(() => null)
@@ -44680,9 +45426,9 @@ var MarketStatusTracker = class {
     }
     const w = { regular, extended };
     const overnight = parseSessionSpec(si)?.overnight === true;
-    this.onStatus(deriveMarketStatus(now, w, tz, overnight));
-    const boundary = nextStatusBoundary(now, w);
-    const delay = Math.min(boundary != null ? boundary - now : MAX_TIMER_MS, MAX_TIMER_MS);
+    this.onStatus(deriveMarketStatus(now2, w, tz, overnight));
+    const boundary = nextStatusBoundary(now2, w);
+    const delay = Math.min(boundary != null ? boundary - now2 : MAX_TIMER_MS, MAX_TIMER_MS);
     this.arm(my, data, symbol, Math.max(delay, MIN_TIMER_MS));
   }
   arm(my, data, symbol, delay) {
@@ -44715,6 +45461,7 @@ var CSS22 = `
     left: var(--vela-toolbar-gutter, 0px);
     right: var(--vela-scale-gutter, 0px);
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
     overflow: hidden;
@@ -44728,6 +45475,14 @@ var CSS22 = `
     user-select: none;
     white-space: nowrap;
 }
+.vela-watermark-replay {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25em;
+    margin-top: 0.1em;
+    font-size: 0.8em;
+}
+.vela-watermark [hidden] { display: none !important; }
 `;
 function watermarkFontPx(availPx, textPxAtMax) {
   if (textPxAtMax <= 0) return MAX_FONT_PX;
@@ -44738,6 +45493,10 @@ var Watermark = class {
     this.resizeObserver = null;
     /** The host's visibility preference (the persisted watermark toggle). */
     this.shown = true;
+    /** The host's preference for the replay line (its own persisted toggle). */
+    this.replayShown = true;
+    /** The chart is replaying past bars. */
+    this.replaying = false;
     /** A bar load is in flight with nothing painted — the loading affordance owns the
      *  canvas, so the mark stays out of its way. Starts true: the FIRST `load:start`
      *  fires during chart construction, before any subscriber can see it. */
@@ -44747,7 +45506,10 @@ var Watermark = class {
     this.el.className = "vela-watermark";
     this.el.dataset.velaScreenshot = "under";
     this.text = host.ownerDocument.createElement("span");
-    this.el.appendChild(this.text);
+    this.replayLine = host.ownerDocument.createElement("span");
+    this.replayLine.className = "vela-watermark-replay";
+    this.replayLine.append(iconEl("replay", host.ownerDocument), host.ownerDocument.createTextNode("Replay"));
+    this.el.append(this.text, this.replayLine);
     host.appendChild(this.el);
     if (typeof ResizeObserver !== "undefined") {
       this.resizeObserver = new ResizeObserver(() => this.fit());
@@ -44760,13 +45522,26 @@ var Watermark = class {
     this.shown = visible;
     this.sync();
   }
+  /** Show/hide the replay line (the host's toggle); it only ever shows while replaying. */
+  setReplayVisible(visible) {
+    this.replayShown = visible;
+    this.sync();
+  }
+  /** The chart entered or left a bar replay. */
+  setReplaying(replaying) {
+    this.replaying = replaying;
+    this.sync();
+  }
   /** Loading and the watermark never share the canvas — hidden while a load is up. */
   setLoading(loading) {
     this.loading = loading;
     this.sync();
   }
   sync() {
-    this.el.style.display = this.shown && !this.loading ? "" : "none";
+    const replay = this.replayShown && this.replaying;
+    this.text.hidden = !this.shown;
+    this.replayLine.hidden = !replay;
+    this.el.style.display = (this.shown || replay) && !this.loading ? "" : "none";
   }
   update(symbol, timeframe) {
     this.text.textContent = symbol ? `${parseSymbol(symbol).ticker} \xB7 ${timeframeLabel(timeframe)}` : "";
@@ -45355,8 +46130,12 @@ var ChartCell = class {
     this.indicatorValuesOn = seed.indicatorValues ?? true;
     if (!this.indicatorValuesOn) this.inner.renderer.set("indicatorValues", false);
     this.watermarkOn = seed.watermark ?? deps.watermark;
+    this.replayWatermarkOn = seed.replayWatermark ?? true;
     this.watermark = deps.watermark ? new Watermark(this.host, symbol ?? "", seed.timeframe ?? "60") : null;
     if (!this.watermarkOn) this.watermark?.setVisible(false);
+    if (!this.replayWatermarkOn) this.watermark?.setReplayVisible(false);
+    this.inner.on("replay:start", () => this.watermark?.setReplaying(true));
+    this.inner.on("replay:end", () => this.watermark?.setReplaying(false));
     this.statusline = deps.statusline ? new Statusline(this.host, symbol ?? "", (sym) => this.inner?.data.symbolIcon(sym)) : null;
     this.statusline?.setMeta(seed.timeframe ?? "60", this.state.provider ?? "");
     this.statusline?.onChart(this.inner);
@@ -45551,10 +46330,10 @@ var ChartCell = class {
     const chart = this.inner;
     const symbol = this.state.symbol;
     if (!chart || !symbol) return;
-    const now = Date.now();
+    const now2 = Date.now();
     const requestedSpan = Math.max(this.state.bars ?? 1e3, this.rangeBars) * timeframeMs(this.state.timeframe ?? "60");
     const fallbackSpan = Number.isFinite(requestedSpan) ? Math.max(3 * 864e5, requestedSpan) : 3 * 864e5;
-    const range = chart.getVisibleRange() ?? { from: now - fallbackSpan, to: now };
+    const range = chart.getVisibleRange() ?? { from: now2 - fallbackSpan, to: now2 };
     this.sessionShading.track(chart.data, symbol, { session: this.session, timeframe: this.timeframe, range });
   }
   /** The session-shade colors live in the renderer CONFIG (persisted with it, edited
@@ -45670,6 +46449,13 @@ var ChartCell = class {
           id: "visible",
           get: () => this.watermarkOn,
           set: (v) => this.setWatermarkVisible(v)
+        },
+        {
+          kind: "toggle",
+          label: "Replay watermark",
+          id: "replay",
+          get: () => this.replayWatermarkOn,
+          set: (v) => this.setReplayWatermarkVisible(v)
         }
       ]
     };
@@ -45738,6 +46524,12 @@ var ChartCell = class {
     this.watermark?.setVisible(visible);
     this.deps.onStateDirty();
   }
+  /** Show/hide the "Replay" line under this cell's watermark while it replays (persisted per cell). */
+  setReplayWatermarkVisible(visible) {
+    this.replayWatermarkOn = visible;
+    this.watermark?.setReplayVisible(visible);
+    this.deps.onStateDirty();
+  }
   /** Show/hide this cell's indicator titles — the in-chart legend rows (persisted per cell). */
   setIndicatorTitlesVisible(visible) {
     this.indicatorTitlesOn = visible;
@@ -46211,6 +47003,7 @@ var ChartCell = class {
     if (!this.inner || this.destroyed) return;
     if (cs.priceStyle && cs.priceStyle !== this.priceStyle) this.setPriceStyle(cs.priceStyle);
     if (cs.watermark !== void 0 && cs.watermark !== this.watermarkOn) this.setWatermarkVisible(cs.watermark);
+    if (cs.replayWatermark !== void 0 && cs.replayWatermark !== this.replayWatermarkOn) this.setReplayWatermarkVisible(cs.replayWatermark);
     if (cs.indicatorTitles !== void 0 && cs.indicatorTitles !== this.indicatorTitlesOn) this.setIndicatorTitlesVisible(cs.indicatorTitles);
     if (cs.indicatorValues !== void 0 && cs.indicatorValues !== this.indicatorValuesOn) this.setIndicatorValuesVisible(cs.indicatorValues);
     if (cs.rendererConfig != null) this.inner.renderer.applyConfig(cs.rendererConfig);
@@ -46245,6 +47038,7 @@ var ChartCell = class {
       ...live ? { symbol: live.symbol, provider: live.provider, timeframe: live.timeframe } : {},
       priceStyle: this.priceStyle,
       watermark: this.watermarkOn,
+      replayWatermark: this.replayWatermarkOn,
       indicatorTitles: this.indicatorTitlesOn,
       indicatorValues: this.indicatorValuesOn,
       rendererConfig: this.inner?.renderer.getConfig() ?? void 0,
@@ -46309,6 +47103,7 @@ function buildContext(host) {
     setPriceStyle: (style) => host.active()?.setPriceStyle(style),
     openSymbolSearch: (query) => host.openSymbolSearch(query),
     togglePanel: (id, open2) => host.togglePanel(id, open2),
+    dockStrip: (el) => host.dockStrip(el),
     host: host.root,
     toast: (message, kind) => host.toast(message, kind),
     addIndicator: (entry) => host.active()?.addExternalIndicator(entry),
@@ -46320,10 +47115,303 @@ function buildContext(host) {
     get activeCellId() {
       return host.active()?.id ?? "";
     },
-    setActiveCell: (id) => host.setActiveCell(id)
+    setActiveCell: (id) => host.setActiveCell(id),
+    replay: host.replay
   };
 }
 
+// src/workspace/WorkspaceReplay.ts
+var MAX_BARS_PER_STEP = 1e5;
+var WorkspaceReplay = class {
+  constructor(host) {
+    this.host = host;
+    this.bus = new TypedEventBus();
+    /** The running session: the shared replay time (every chart shows the bars closed by it). */
+    this.session = null;
+    this.playing = false;
+    this.intervalMs = 1e3;
+    this.timer = null;
+    /** Cells whose replay a symbol switch ended — restarted at the shared time once their bars land. */
+    this.rejoining = /* @__PURE__ */ new Set();
+    this.cellSubs = /* @__PURE__ */ new Map();
+    /** Inside a group step: chart events are the controller's own doing. */
+    this.stepping = false;
+    /** Inside `finish`: the charts' `replay:end` events are the controller's own doing. */
+    this.stopping = false;
+    /** Driving a chart's own timer: its play/pause events are not the user's. */
+    this.muted = 0;
+    /** A chart finished during a group step — the session ends right after it. */
+    this.finishedDuringStep = false;
+    for (const cell of host.cells()) this.watch(cell);
+    this.offHost = host.onCells((e) => {
+      if (e.kind === "created") this.onCellCreated(e.id);
+      else if (e.kind === "destroyed") this.onCellDestroyed(e.id);
+    });
+  }
+  /**
+   * Enter replay on every cell (or seek, when already replaying) — paused. Resolves once
+   * every chart shows its rewound history (a chart whose history does not reach that far
+   * loads older bars first). A chart with nothing to replay after the shared time stays
+   * as it is.
+   */
+  async start(opts) {
+    const cells = this.host.cells();
+    const ref = cells.find((c) => c.id === (opts.cell ?? this.host.activeId())) ?? cells[0];
+    if (!ref) return;
+    if (this.playing) this.pause();
+    this.rejoining.clear();
+    await ref.chart.replay.start({ from: opts.from });
+    const cursor = ref.chart.replay.state.cursorTime;
+    if (cursor == null) return;
+    const session = { clock: barClose(cursor, ref.chart.market.timeframe) };
+    this.session = session;
+    await Promise.all(this.host.cells().filter((c) => c.id !== ref.id).map((c) => this.startCell(c, session.clock)));
+    if (this.session !== session) return;
+    this.syncPlayback();
+    const s = this.activeChart()?.replay.state;
+    this.bus.emit("replay:start", { cursorTime: s?.cursorTime ?? cursor, remaining: s?.remaining ?? 0 });
+  }
+  /** Reveal the next bar(s): the clock moves to the next bar close on any chart. Returns false when nothing is left. */
+  step() {
+    const solo = this.solo();
+    return solo ? solo.replay.step() : this.stepGroup();
+  }
+  /** Reveal the next update — in a single-chart layout, the chart's `stepUpdate()` (tick replay); otherwise {@link step}. */
+  stepUpdate() {
+    const solo = this.solo();
+    return solo ? solo.replay.stepUpdate() : this.stepGroup();
+  }
+  /** Advance one update every `intervalMs` (default: the last pace, initially 1000). Calling it again while playing changes the pace. */
+  play(intervalMs2) {
+    if (!this.session) return this;
+    if (intervalMs2 !== void 0) {
+      if (!(Number.isFinite(intervalMs2) && intervalMs2 > 0)) {
+        console.warn(`[vela] workspace.replay.play(${intervalMs2}) ignored \u2014 the interval must be a positive number of ms`);
+        return this;
+      }
+      this.intervalMs = intervalMs2;
+    }
+    this.playing = true;
+    this.clearTimer();
+    this.syncPlayback();
+    this.bus.emit("replay:play", { intervalMs: this.intervalMs });
+    return this;
+  }
+  pause() {
+    if (!this.playing) return this;
+    this.playing = false;
+    this.syncPlayback();
+    this.bus.emit("replay:pause", void 0);
+    return this;
+  }
+  /** Leave replay on every chart: full history back, live updates resumed. */
+  stop() {
+    this.finish("stopped");
+    return this;
+  }
+  /** `active`/`playing`/`intervalMs` for the whole workspace; the cursor fields read the ACTIVE cell's chart. */
+  get state() {
+    const s = this.session ? this.activeChart()?.replay.state : void 0;
+    return {
+      active: this.session !== null,
+      playing: this.playing,
+      cursorTime: s?.cursorTime ?? null,
+      remaining: s?.remaining ?? 0,
+      nextTime: s?.nextTime ?? null,
+      intervalMs: this.intervalMs
+    };
+  }
+  /** The active cell's replayable history (`chart.replay.bounds`). */
+  get bounds() {
+    return this.activeChart()?.replay.bounds ?? null;
+  }
+  on(event, handler) {
+    return this.bus.on(event, handler);
+  }
+  destroy() {
+    this.session = null;
+    this.playing = false;
+    this.clearTimer();
+    this.offHost();
+    for (const off of this.cellSubs.values()) off();
+    this.cellSubs.clear();
+    this.bus.clear();
+  }
+  // ── internals ──
+  /** The one chart of a single-chart layout — it replays on its own, tick replay included. */
+  solo() {
+    const cells = this.host.cells();
+    return cells.length === 1 ? cells[0].chart : null;
+  }
+  activeChart() {
+    const cells = this.host.cells();
+    return (cells.find((c) => c.id === this.host.activeId()) ?? cells[0])?.chart ?? null;
+  }
+  /** Rewind one chart to the shared time: every bar that closed by `clock`, none after. */
+  async startCell(cell, clock) {
+    const replay = cell.chart.replay;
+    const from = lastOpenClosedBy(clock, cell.chart.market.timeframe);
+    const bounds = replay.bounds;
+    if (!bounds || bounds.last <= from) return;
+    await replay.start({ from });
+  }
+  /** Move the clock to the next bar close on any chart; each chart reveals what closed by then. */
+  stepGroup() {
+    const session = this.session;
+    if (!session) return false;
+    const cells = this.host.cells();
+    let next = Infinity;
+    for (const c of cells) {
+      const t = c.chart.replay.state.nextTime;
+      if (t != null) next = Math.min(next, barClose(t, c.chart.market.timeframe));
+    }
+    if (!Number.isFinite(next)) return false;
+    this.stepping = true;
+    try {
+      for (const c of cells) {
+        const tf = c.chart.market.timeframe;
+        for (let n = 0; n < MAX_BARS_PER_STEP; n += 1) {
+          const t = c.chart.replay.state.nextTime;
+          if (t == null || barClose(t, tf) > next) break;
+          if (!c.chart.replay.step()) break;
+        }
+      }
+    } finally {
+      this.stepping = false;
+    }
+    session.clock = next;
+    if (this.finishedDuringStep) {
+      this.finishedDuringStep = false;
+      this.finish("finished");
+      return true;
+    }
+    const s = this.activeChart()?.replay.state;
+    if (s?.cursorTime != null) this.bus.emit("replay:step", { cursorTime: s.cursorTime, remaining: s.remaining });
+    return true;
+  }
+  /** Put the timers in the state `playing` asks for: a single chart runs its own (it paces
+   *  ticks), several run on the controller's clock. */
+  syncPlayback() {
+    const solo = this.solo();
+    const run = this.playing && this.session !== null;
+    this.muted += 1;
+    try {
+      for (const c of this.host.cells()) {
+        if (c.chart === solo && run) {
+          if (!c.chart.replay.state.playing || c.chart.replay.state.intervalMs !== this.intervalMs) c.chart.replay.play(this.intervalMs);
+        } else if (c.chart.replay.state.playing) {
+          c.chart.replay.pause();
+        }
+      }
+    } finally {
+      this.muted -= 1;
+    }
+    if (!run || solo) this.clearTimer();
+    else if (this.timer == null) this.schedule();
+  }
+  schedule() {
+    this.timer = setTimeout(() => {
+      this.timer = null;
+      if (!this.playing || !this.session || this.solo()) return;
+      if (this.stepGroup() || this.rejoining.size > 0) {
+        if (this.playing && this.session && this.timer == null) this.schedule();
+      } else {
+        this.pause();
+      }
+    }, this.intervalMs);
+  }
+  clearTimer() {
+    if (this.timer != null) clearTimeout(this.timer);
+    this.timer = null;
+  }
+  /** End the session on every chart (idempotent). */
+  finish(reason) {
+    const had = this.session !== null;
+    this.session = null;
+    this.playing = false;
+    this.clearTimer();
+    this.rejoining.clear();
+    this.stopping = true;
+    try {
+      for (const c of this.host.cells()) c.chart.replay.stop();
+    } finally {
+      this.stopping = false;
+    }
+    if (had) this.bus.emit("replay:end", { reason });
+  }
+  watch(cell) {
+    const { id, chart } = cell;
+    const isActive = () => (this.host.activeId() ?? this.host.cells()[0]?.id) === id;
+    const offs = [
+      chart.on("replay:end", ({ reason }) => {
+        if (!this.session || this.stopping) return;
+        if (reason === "market") this.rejoining.add(id);
+        else if (this.stepping) this.finishedDuringStep || (this.finishedDuringStep = reason === "finished");
+        else this.finish(reason);
+      }),
+      chart.on("market:changed", () => {
+        if (!this.rejoining.delete(id) || !this.session) return;
+        void this.startCell(cell, this.session.clock).then(() => this.syncPlayback());
+      }),
+      chart.on("replay:step", (e) => {
+        if (this.session && !this.stepping && isActive()) this.bus.emit("replay:step", e);
+      }),
+      chart.on("replay:tick", (e) => {
+        if (this.session && isActive()) this.bus.emit("replay:tick", e);
+      }),
+      // A single chart runs its own timer: a pause it takes on its own (a seek) is the session's.
+      chart.on("replay:pause", () => {
+        if (!this.session || this.muted > 0 || !this.playing || chart !== this.solo()) return;
+        this.playing = false;
+        this.bus.emit("replay:pause", void 0);
+      })
+    ];
+    this.cellSubs.set(id, () => {
+      for (const off of offs) off();
+    });
+  }
+  onCellCreated(id) {
+    const cell = this.host.cells().find((c) => c.id === id);
+    if (!cell) return;
+    this.watch(cell);
+    const session = this.session;
+    if (!session) return;
+    this.rejoining.add(id);
+    void cell.chart.ready().then(async () => {
+      if (this.session !== session || !this.rejoining.delete(id)) return;
+      await this.startCell(cell, session.clock);
+      this.syncPlayback();
+    });
+    this.syncPlayback();
+  }
+  onCellDestroyed(id) {
+    this.cellSubs.get(id)?.();
+    this.cellSubs.delete(id);
+    this.rejoining.delete(id);
+    this.syncPlayback();
+  }
+};
+function barClose(open2, timeframe) {
+  const months = monthSpan(timeframe);
+  if (months > 0) {
+    const d = new Date(open2);
+    return Date.UTC(d.getUTCFullYear(), d.getUTCMonth() + months, d.getUTCDate(), d.getUTCHours(), d.getUTCMinutes());
+  }
+  return open2 + timeframeToMs(timeframe ?? "60");
+}
+function lastOpenClosedBy(time, timeframe) {
+  const months = monthSpan(timeframe);
+  if (months > 0) {
+    const d = new Date(time);
+    return Date.UTC(d.getUTCFullYear(), d.getUTCMonth() - months, d.getUTCDate(), d.getUTCHours(), d.getUTCMinutes());
+  }
+  return time - timeframeToMs(timeframe ?? "60");
+}
+function monthSpan(timeframe) {
+  const m = /^(\d*)M$/.exec((timeframe ?? "").trim());
+  return m ? Number(m[1] || 1) : 0;
+}
+
 // src/workspace/layouts.ts
 var registry5 = /* @__PURE__ */ new Map();
 function registerLayout(def) {
@@ -46622,6 +47710,8 @@ var CSS24 = `
 .vela-workspace { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; background: var(--vela-bg); }
 .vela-ws-main { position: relative; display: flex; flex-direction: row; flex: 1 1 auto; min-height: 0; }
 .vela-ws-toolbar { position: relative; flex: none; }
+.vela-ws-strips { position: relative; flex: none; display: flex; flex-direction: column; min-width: 0; }
+.vela-ws-strips:empty { display: none; }
 .vela-ws-grid { position: relative; flex: 1 1 auto; min-width: 0; display: grid; gap: ${GAP_PX}px; background: var(--vela-border-soft); }
 .vela-cell { background: var(--vela-bg); position: relative; }
 /* Active-cell highlight: an overlay ring ABOVE the chart's own canvas stack (a plain
@@ -46793,6 +47883,20 @@ var VelaWorkspace = class {
     const hostEl = typeof container === "string" ? document.querySelector(container) : container;
     if (!hostEl) throw new Error(`VelaWorkspace: container not found: ${String(container)}`);
     this.opts = opts;
+    this.replay = new WorkspaceReplay({
+      cells: () => this.cells(),
+      activeId: () => this.activeId,
+      onCells: (handler) => {
+        const offs = [
+          this.events.on("cell:created", ({ id }) => handler({ kind: "created", id })),
+          this.events.on("cell:destroyed", ({ id }) => handler({ kind: "destroyed", id })),
+          this.events.on("cell:active", ({ id }) => handler({ kind: "active", id }))
+        ];
+        return () => {
+          for (const off of offs) off();
+        };
+      }
+    });
     this.persistKey = opts.persist === void 0 || opts.persist === false ? null : opts.persist === true ? "vela-workspace" : opts.persist;
     this.storage = opts.storage ?? localStorageAdapter();
     let boot = null;
@@ -46930,6 +48034,9 @@ var VelaWorkspace = class {
     this.dock.refresh();
     if (boot?.panels) this.dock.applyState(boot.panels);
     this.root.appendChild(main);
+    this.stripsEl = doc.createElement("div");
+    this.stripsEl.className = "vela-ws-strips";
+    this.root.appendChild(this.stripsEl);
     this.toastHost = new Toast(this.gridEl);
     const attribution = rendererDefaults().attribution;
     if (attribution !== false) {
@@ -47164,9 +48271,16 @@ var VelaWorkspace = class {
       setActiveCell: (id) => this.setActiveCell(id),
       openSymbolSearch: (query) => this.symbolPicker.open(query ?? ""),
       togglePanel: (id, open2) => this.dock.toggle(id, open2),
+      dockStrip: (el) => {
+        this.stripsEl.appendChild(el);
+        return () => {
+          if (el.parentElement === this.stripsEl) el.remove();
+        };
+      },
       root: this.root,
       toast: (message, kind) => this.toastHost.show(message, kind),
-      stateDirty: () => this.markStateDirty()
+      stateDirty: () => this.markStateDirty(),
+      replay: this.replay
     });
   }
   /** Re-project contributed topbar actions + side panels, and mount late-registered attachments. */
@@ -47474,6 +48588,7 @@ var VelaWorkspace = class {
     if (this.destroyed) return;
     this.flushPendingState();
     this.destroyed = true;
+    this.replay.destroy();
     if (this.persistKey !== null && typeof window !== "undefined") window.removeEventListener("beforeunload", this.onUnload);
     this.resizeObserver?.disconnect();
     this.splitters.destroy();
@@ -48240,14 +49355,13 @@ var VelaWorkspace = class {
       panels: () => has("panels") ? [...this.dock.list()] : [],
       onTogglePanel: (id) => this.dock.toggle(id),
       ...has("alerts") ? { alerts: () => this.alerts.map((a) => ({ title: `${a.source} \xB7 ${a.title}`, message: a.message, time: a.time })) } : {},
-      // Left-aligned actions have their own bottom-bar stop — only the rest
-      // lands in the drawer, or every left action would appear twice. Built-in-id
-      // actions are slot OVERRIDES: they reach the drawer through the slot's own
-      // routed button (screenshot) or stop (indicators), never as an extra row.
-      actions: () => {
-        const builtin = new Set(TOPBAR_BUILTIN_IDS);
-        return widgetActions("topbar", this.context()).filter((a) => a.align !== "left" && !builtin.has(a.id)).map((a) => ({ label: a.label, icon: a.icon, run: () => a.run(this.context()) }));
-      },
+      // Actions placed on the bottom bar (left-aligned by default) have their stop
+      // there — only the menu-placed ones land in the drawer, or they would appear
+      // twice: left (primary) ones with the primary rows, right ones at the end.
+      // Built-in-id actions are slot OVERRIDES: they reach the drawer through the
+      // slot's own routed button (screenshot) or stop (indicators), never as a row.
+      primaryActions: () => this.drawerActions("left"),
+      actions: () => this.drawerActions("right"),
       // The desktop layout dropdown's whole surface — the grid canvas, the
       // non-canvas presets and the sync switches — relocated into the kebab
       // drawer (the topbar is hidden on mobile). Same reads as the topbar block;
@@ -48272,6 +49386,11 @@ var VelaWorkspace = class {
     }));
     this.moreDrawer.open();
   }
+  /** The contributed topbar actions the mobile menu lists, from one cluster. */
+  drawerActions(cluster) {
+    const builtin = new Set(TOPBAR_BUILTIN_IDS);
+    return widgetActions("topbar", this.context()).filter((a) => mobilePlacement(a) === "menu" && a.align === "left" === (cluster === "left") && !builtin.has(a.id)).map((a) => ({ label: a.label, icon: a.icon, run: () => a.run(this.context()) }));
+  }
   openTimezoneDrawer() {
     this.timezoneDrawer ?? (this.timezoneDrawer = new TimezoneDrawer({
       host: this.root,