@luxalgo/vela 0.6.20 → 0.6.22

package/dist/index.cjs

@@ -26,19 +26,48 @@ var menu__namespace = /*#__PURE__*/_interopNamespace(menu);
 var dialog__namespace = /*#__PURE__*/_interopNamespace(dialog);
 
 // src/core/options.ts
+var ZOOM_EASE_DEFAULT_MS = 70;
+var PAN_INERTIA_DEFAULT_MS = 110;
+var SCROLL_EASE_DEFAULT_MS = 130;
+var AUTOSCALE_EASE_DEFAULT_MS = 80;
 var LIVE_BAR_EASE_DEFAULT_MS = 90;
-var LIVE_BAR_EASE_MAX_MS = 1e3;
-function resolveLiveBarEaseMs(value) {
-  if (value === true) return LIVE_BAR_EASE_DEFAULT_MS;
+var INTRO_DURATION_DEFAULT_MS = 650;
+var ANIMATION_EASE_MAX_MS = 1e3;
+var LIVE_BAR_EASE_MAX_MS = ANIMATION_EASE_MAX_MS;
+var INTRO_DURATION_MAX_MS = 5e3;
+function resolveEaseMs(value, defaultMs, maxMs = ANIMATION_EASE_MAX_MS) {
+  if (value === true) return defaultMs;
   if (typeof value !== "number" || !Number.isFinite(value) || value <= 0) return 0;
-  return Math.min(value, LIVE_BAR_EASE_MAX_MS);
+  return Math.min(value, maxMs);
+}
+function resolveLiveBarEaseMs(value) {
+  return resolveEaseMs(value, LIVE_BAR_EASE_DEFAULT_MS, LIVE_BAR_EASE_MAX_MS);
+}
+function resolveIntro(value) {
+  const off = { style: false, duration: 0 };
+  if (value === true) return { style: "settle", duration: INTRO_DURATION_DEFAULT_MS };
+  if (value === "settle" || value === "grow") return { style: value, duration: INTRO_DURATION_DEFAULT_MS };
+  if (value && typeof value === "object") {
+    const o = value;
+    const d = o.duration;
+    return {
+      style: o.style === "grow" ? "grow" : "settle",
+      duration: typeof d === "number" && Number.isFinite(d) && d > 0 ? Math.min(d, INTRO_DURATION_MAX_MS) : INTRO_DURATION_DEFAULT_MS
+    };
+  }
+  return off;
 }
 function resolveAnimations(animations) {
-  if (typeof animations === "boolean") return { animZoom: animations, animPan: animations, animLiveBar: 0 };
+  if (animations === false) return { animZoom: 0, animPan: 0, animScroll: 0, animAutoscale: 0, animLiveBar: 0, animIntro: { style: false, duration: 0 } };
+  const cfg = animations === true || animations == null ? {} : animations;
+  const animPan = resolveEaseMs(cfg.pan ?? true, PAN_INERTIA_DEFAULT_MS);
   return {
-    animZoom: animations?.zoom ?? true,
-    animPan: animations?.pan ?? true,
-    animLiveBar: resolveLiveBarEaseMs(animations?.liveBar)
+    animZoom: resolveEaseMs(cfg.zoom ?? true, ZOOM_EASE_DEFAULT_MS),
+    animPan,
+    animScroll: cfg.scroll === void 0 ? animPan > 0 ? SCROLL_EASE_DEFAULT_MS : 0 : resolveEaseMs(cfg.scroll, SCROLL_EASE_DEFAULT_MS),
+    animAutoscale: resolveEaseMs(cfg.autoscale ?? true, AUTOSCALE_EASE_DEFAULT_MS),
+    animLiveBar: resolveLiveBarEaseMs(cfg.liveBar),
+    animIntro: resolveIntro(cfg.intro ?? true)
   };
 }
 
@@ -7081,6 +7110,93 @@ var DrawingController = class {
   }
 };
 
+// src/core/marks/MarksController.ts
+var MarksController = class {
+  constructor(renderer, events) {
+    this.renderer = renderer;
+    /** Insertion-ordered — the order a cluster falls back to for equal times. */
+    this.marks = /* @__PURE__ */ new Map();
+    this.groups = /* @__PURE__ */ new Map();
+    this.subs = [];
+    this.enabled = !!renderer.capabilities.timelineMarks && typeof renderer.setTimelineMarks === "function";
+    if (this.enabled && renderer.onMarkClick) this.subs.push(renderer.onMarkClick((e) => events.emit("mark:click", e)));
+  }
+  /** Whether the active renderer paints timeline marks. */
+  get supported() {
+    return this.enabled;
+  }
+  /** Add (or replace, by id) one mark. */
+  add(mark) {
+    this.marks.set(mark.id, validateMark(mark));
+    this.sync();
+  }
+  /** Replace the whole set — a market switch. */
+  set(marks) {
+    this.marks.clear();
+    for (const m of marks) this.marks.set(m.id, validateMark(m));
+    this.sync();
+  }
+  remove(id) {
+    const had = this.marks.delete(id);
+    if (had) this.sync();
+    return had;
+  }
+  clear() {
+    if (this.marks.size === 0) return;
+    this.marks.clear();
+    this.sync();
+  }
+  /** Every mark, in insertion order (shallow copies — mutating one changes nothing). */
+  all() {
+    return [...this.marks.values()].map((m) => ({ ...m, glyph: { ...m.glyph } }));
+  }
+  /** Define (or replace) a group's presentation — its settings label and default visibility. */
+  defineGroup(group) {
+    if (!group || typeof group.id !== "string" || group.id.length === 0) throw new Error("[vela] marks.defineGroup: `id` must be a non-empty string");
+    if (typeof group.label !== "string") throw new Error(`[vela] marks.defineGroup: group "${group.id}" needs a string \`label\``);
+    this.groups.set(group.id, { ...group });
+    this.sync();
+  }
+  /** The defined groups, in definition order. */
+  groupDefinitions() {
+    return [...this.groups.values()].map((g) => ({ ...g }));
+  }
+  /**
+   * Show or hide one group's marks. The choice lives in the renderer's cosmetic config
+   * (the `marks` feature) — what the settings dialog's Events checkboxes edit and what
+   * a persisted chart restores — so it warns + no-ops on a renderer without it.
+   */
+  setGroupVisible(id, visible) {
+    if (!this.renderer.features.includes("marks")) {
+      console.warn(`[vela] renderer "${this.renderer.name}" does not paint timeline marks \u2014 setGroupVisible ignored.`);
+      return;
+    }
+    this.renderer.applyFeature("marks", { groups: { [id]: visible } });
+  }
+  /** A group's effective visibility: the user's (persisted) choice, else the group's declared default, else visible. */
+  isGroupVisible(id) {
+    const state = this.renderer.readFeature("marks");
+    const chosen = state?.groups?.[id];
+    if (typeof chosen === "boolean") return chosen;
+    return this.groups.get(id)?.visible !== false;
+  }
+  destroy() {
+    for (const unsub of this.subs) unsub();
+    this.subs.length = 0;
+  }
+  sync() {
+    if (!this.enabled) return;
+    this.renderer.setTimelineMarks([...this.marks.values()], [...this.groups.values()]);
+  }
+};
+function validateMark(mark) {
+  if (!mark || typeof mark !== "object") throw new Error("[vela] marks: a mark must be an object");
+  if (typeof mark.id !== "string" || mark.id.length === 0) throw new Error("[vela] marks: `id` must be a non-empty string");
+  if (typeof mark.time !== "number" || !Number.isFinite(mark.time)) throw new Error(`[vela] marks: mark "${mark.id}" needs a finite epoch-ms \`time\``);
+  if (!mark.glyph || typeof mark.glyph !== "object" || typeof mark.glyph.color !== "string") throw new Error(`[vela] marks: mark "${mark.id}" needs a glyph with a \`color\``);
+  return { ...mark, glyph: { ...mark.glyph } };
+}
+
 // src/data/timeframe.ts
 var NAMED_TF_MS = { D: 864e5, W: 6048e5, M: 2592e6 };
 function timeframeToMs(timeframe) {
@@ -7759,6 +7875,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
       marketKey: () => `${this.config.market.symbol ?? ""}|${this.config.market.session ?? ""}`
     });
     this.drawings = new DrawingController(this.renderer, this.events, config.drawings, drawingSeries);
+    this.marks = new MarksController(this.renderer, this.events);
     this.unresolvedUnsub = this.feed.onUnresolved?.((info) => {
       this.endLoad();
       this.events.emit("data:unresolved", info);
@@ -8131,6 +8248,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
       if (!record.native) continue;
       record.native.instance.stop();
       record.native.instance = record.native.descriptor.create();
+      record.native.started = false;
       record.pendingStructural = true;
       if (record.hidden) {
         record.native.stale = true;
@@ -8622,11 +8740,12 @@ var EngineOrchestrator = class _EngineOrchestrator {
       record.session = void 0;
       record.native?.instance.suspend();
       if (record.renderHandle) this.renderer.setIndicatorVisible?.(record.renderHandle, false);
+      else if (record.native) this.mountHiddenNativeRow(id, record);
     } else {
       if (record.renderHandle) this.renderer.setIndicatorVisible?.(record.renderHandle, true);
       record.pendingStructural = true;
       if (record.native) {
-        if (record.native.stale) {
+        if (record.native.stale || !record.native.started) {
           record.native.stale = false;
           const handle = this.handles.get(id);
           if (handle) void this.startNativeIndicator(id, handle);
@@ -8709,6 +8828,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
     this.unresolvedUnsub = null;
     this.feed.destroy?.();
     this.drawings.destroy();
+    this.marks.destroy();
     this.renderer.destroy();
     this.events.clear();
   }
@@ -8807,6 +8927,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
         }
       };
       record.native.instance.start(ctx, record.inputValues);
+      record.native.started = true;
     } catch (err) {
       this.fail(id, handle, err);
     }
@@ -8821,6 +8942,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
       overlay: d.overlay,
       paneHint: d.paneHint,
       native: { type: record.native.type },
+      ...d.legend === false ? { legend: false } : {},
       ...out.paneAxis != null ? { paneAxis: out.paneAxis } : {},
       series: out.series ?? [],
       fills: out.fills ?? [],
@@ -8843,9 +8965,17 @@ var EngineOrchestrator = class _EngineOrchestrator {
    * over it in place (`pendingStructural`), clears the spinner, and only THEN fires
    * `indicator:added`/`ready` — so event semantics and `inspect()` (which skips
    * loading records) still mean "the indicator produced output".
+   *
+   * A HIDDEN record mounts too — dimmed, no spinner (its session never starts while
+   * hidden, so nothing is computing and no model will ever arrive to mount the row
+   * later). Without this an indicator ADDED hidden (a restored ledger/ext entry) had
+   * no legend row at all: invisible AND unreachable — the eye that unhides it never
+   * existed. The hidden mount announces immediately for the same reason: the "first
+   * computed model" that normally announces cannot come until the indicator is shown,
+   * and host UIs (object tree, landing watchers) must know it exists NOW.
    */
   mountLoadingPlaceholder(id, record) {
-    if (record.renderHandle || record.hidden || !record.prepared) return;
+    if (record.renderHandle || !record.prepared) return;
     const meta = record.prepared.meta;
     const model = {
       id,
@@ -8869,8 +8999,34 @@ var EngineOrchestrator = class _EngineOrchestrator {
     this.ensurePaneFor(paneId);
     record.renderHandle = this.renderer.mountIndicator(model);
     record.pendingStructural = true;
+    if (record.hidden) {
+      this.renderer.setIndicatorVisible?.(record.renderHandle, false);
+      this.announce(record, this.handles.get(id));
+      return;
+    }
     this.setLoading(record, true);
   }
+  /**
+   * Mount the legend row for a NATIVE indicator that is being hidden BEFORE it ever
+   * started (a restored-hidden ledger entry: `startNativeIndicator` bails on hidden
+   * records, so no model — and therefore no row — would ever mount). The native
+   * counterpart of {@link mountLoadingPlaceholder}'s hidden branch: an empty model
+   * carries the title + inputs schema, the renderer marks the row hidden, and the
+   * announce makes the indicator visible to host UIs. Showing later STARTS the
+   * instance (the `started` flag path) and its first emit remounts over this row.
+   */
+  mountHiddenNativeRow(id, record) {
+    if (record.renderHandle || !record.native) return;
+    const model = this.buildNativeModel(record, {});
+    const paneId = this.routePane(id, model, record.options ?? {});
+    this.placeModel(model, id, paneId);
+    record.model = model;
+    this.ensurePaneFor(paneId);
+    record.renderHandle = this.renderer.mountIndicator(model);
+    record.pendingStructural = true;
+    this.renderer.setIndicatorVisible?.(record.renderHandle, false);
+    this.announce(record, this.handles.get(id));
+  }
   /** Flip the record's loading state and reflect it in the legend row (spinner on/off). */
   setLoading(record, loading) {
     record.loading = loading;
@@ -8905,6 +9061,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
     for (const r of this.registry.all()) {
       const model = r.model;
       if (!model) continue;
+      if (model.legend === false) continue;
       const paneId = model.paneId ?? "price";
       if (!byPane.has(paneId)) byPane.set(paneId, []);
       byPane.get(paneId).push({
@@ -9480,6 +9637,16 @@ var RendererControl = class {
     this.renderer.setLayoutMode?.(mode);
     return this;
   }
+  /**
+   * Drive the renderer's time-of-day chrome (the countdown-to-bar-close chip) from the
+   * host's own second pulse, so it ticks in step with a host clock display instead of
+   * on a separate timer that can read a different second. `null` hands the pulse back
+   * to the renderer. Silent no-op on a renderer without time-of-day chrome.
+   */
+  setWallClock(clock) {
+    this.renderer.setWallClock?.(clock);
+    return this;
+  }
 };
 
 // src/core/renderer-defaults.ts
@@ -10372,6 +10539,95 @@ var DrawingsControl = class {
   }
 };
 
+// src/core/MarksControl.ts
+var MarksControl = class {
+  constructor(ctrl) {
+    this.ctrl = ctrl;
+  }
+  /** Whether the active renderer paints timeline marks. */
+  get supported() {
+    return this.ctrl.supported;
+  }
+  /** Add one mark; an existing id is replaced in place. */
+  add(mark) {
+    this.ctrl.add(mark);
+    return this;
+  }
+  /** Replace the whole set (a market switch). */
+  set(marks) {
+    this.ctrl.set(marks);
+    return this;
+  }
+  remove(id) {
+    this.ctrl.remove(id);
+    return this;
+  }
+  clear() {
+    this.ctrl.clear();
+    return this;
+  }
+  /** Every mark, in insertion order. */
+  all() {
+    return this.ctrl.all();
+  }
+  /**
+   * Define a visibility group's presentation: the label of its checkbox in chart
+   * settings (the Events tab) and its default visibility. Marks may name a group
+   * that was never defined — it then shows its capitalized id.
+   */
+  defineGroup(group) {
+    this.ctrl.defineGroup(group);
+    return this;
+  }
+  /** The defined groups, in definition order. */
+  groups() {
+    return this.ctrl.groupDefinitions();
+  }
+  /** Show or hide one group's marks — the same switch as the settings checkbox, persisted with the chart's config. */
+  setGroupVisible(id, visible = true) {
+    this.ctrl.setGroupVisible(id, visible);
+    return this;
+  }
+  /** A group's effective visibility (the user's choice, else the group's declared default). */
+  isGroupVisible(id) {
+    return this.ctrl.isGroupVisible(id);
+  }
+};
+
+// src/core/util/wall-clock.ts
+var BOUNDARY_SLACK_MS = 5;
+var SecondClock = class _SecondClock {
+  constructor(now = () => Date.now()) {
+    this.now = now;
+    this.subs = /* @__PURE__ */ new Set();
+    this.timer = null;
+  }
+  onTick(cb) {
+    this.subs.add(cb);
+    if (this.timer == null) this.arm();
+    return () => {
+      this.subs.delete(cb);
+      if (this.subs.size === 0 && this.timer != null) {
+        clearTimeout(this.timer);
+        this.timer = null;
+      }
+    };
+  }
+  /** Milliseconds from `now` to just past the next second boundary. */
+  static delayToNextSecond(now) {
+    const intoSecond = (now % 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);
+      if (this.subs.size > 0) this.arm();
+    }, _SecondClock.delayToNextSecond(this.now()));
+  }
+};
+
 // src/core/color.ts
 function parseRgb(color) {
   const s = color.trim();
@@ -11032,7 +11288,7 @@ function intersectRects(a, b) {
   return { left, top, right, bottom, width: right - left, height: bottom - top };
 }
 function placePopover(a) {
-  let left = a.align === "end" ? a.trigger.right - a.pop.width : a.trigger.left;
+  let left = a.align === "end" ? a.trigger.right - a.pop.width : a.align === "center" ? a.trigger.left + a.trigger.width / 2 - a.pop.width / 2 : a.trigger.left;
   const below = a.trigger.bottom + a.gap;
   const above = a.trigger.top - a.pop.height - a.gap;
   const fitsBelow = below + a.pop.height <= a.clamp.bottom;
@@ -11104,6 +11360,8 @@ var Popover = class {
     this.onKey = null;
     this.onReflow = null;
     this.shown = false;
+    /** The pending removal of a fading-out shell; a show() that reuses the shell cancels it. */
+    this.leaveTimer = null;
     const doc = opts.trigger.ownerDocument;
     injectStyles(POPOVER_STYLE_ID, POPOVER_CSS, doc);
     this.trigger = opts.trigger;
@@ -11111,6 +11369,7 @@ var Popover = class {
     this.ctrl = popoverController(opts);
     this.boundary = opts.boundary ?? "viewport";
     this.theme = opts.theme;
+    this.fadeMs = Math.max(0, opts.fadeMs ?? 0);
     this.el = doc.createElement("div");
     this.el.className = "vela-popover vela-ui-layer" + (opts.className ? ` ${opts.className}` : "");
     this.el.dataset.position = this.ctrl.position;
@@ -11134,11 +11393,21 @@ var Popover = class {
       return;
     }
     if (open && open !== this) open.hide();
+    if (this.leaveTimer !== null) {
+      clearTimeout(this.leaveTimer);
+      this.leaveTimer = null;
+    }
     ensureUIHost(this.el, this.theme);
+    if (this.fadeMs > 0) {
+      this.el.style.transition = `opacity ${this.fadeMs}ms ease`;
+      this.el.style.opacity = "0";
+      this.el.style.pointerEvents = "";
+    }
     this.host.appendChild(this.el);
     this.shown = true;
     open = this;
     this.place();
+    if (this.fadeMs > 0) this.el.style.opacity = "1";
     const onOutside = (ev) => {
       const t = ev.target;
       if (this.el.contains(t) || this.trigger.contains(t)) return;
@@ -11171,7 +11440,16 @@ var Popover = class {
     this.onOutside = null;
     this.onKey = null;
     this.onReflow = null;
-    this.el.remove();
+    if (this.fadeMs > 0) {
+      this.el.style.opacity = "0";
+      this.el.style.pointerEvents = "none";
+      this.leaveTimer = setTimeout(() => {
+        this.leaveTimer = null;
+        this.el.remove();
+      }, this.fadeMs);
+    } else {
+      this.el.remove();
+    }
     this.shown = false;
     if (open === this) open = null;
     this.ctrl.onClose?.();
@@ -15378,6 +15656,8 @@ var NATIVE_CAPABILITIES = {
   // canvas-painted into the owning indicator's interleave slice
   trades: true,
   // strategy order-fill markers (arrows + labels + fill-price ticks)
+  timelineMarks: true,
+  // host events on a lane above the time axis (glyphs + detail popup)
   inputsUI: true
   // reuses the DOM InputsUI
 };
@@ -15650,9 +15930,12 @@ function mergeConfig(base, patch) {
   const gh = asObject(grid.horzLines);
   const cross = asObject(p.crosshair);
   const ps = asObject(p.priceScale);
+  const anim = asObject(p.animations);
   const panes = asObject(p.panes);
   const trades = asObject(p.trades);
   const ts = asObject(p.timeScale);
+  const marks = asObject(p.marks);
+  const markGroups = asObject(marks.groups);
   const candles = asObject(p.candles);
   const bars = asObject(p.bars);
   const line = asObject(p.line);
@@ -15699,6 +15982,12 @@ function mergeConfig(base, patch) {
       countdown: isBool(ps.countdown) ? ps.countdown : base.priceScale.countdown,
       animateLastPrice: isBool(ps.animateLastPrice) ? ps.animateLastPrice : base.priceScale.animateLastPrice
     },
+    animations: {
+      zoom: isBool(anim.zoom) ? anim.zoom : base.animations.zoom,
+      pan: isBool(anim.pan) ? anim.pan : base.animations.pan,
+      autoscale: isBool(anim.autoscale) ? anim.autoscale : base.animations.autoscale,
+      intro: isBool(anim.intro) ? anim.intro : base.animations.intro
+    },
     panes: {
       separatorColor: isColor(panes.separatorColor) ? panes.separatorColor : base.panes.separatorColor
     },
@@ -15713,6 +16002,15 @@ function mergeConfig(base, patch) {
     timeScale: {
       timezone: typeof ts.timezone === "string" && ts.timezone ? ts.timezone : base.timeScale.timezone
     },
+    marks: {
+      visible: isBool(marks.visible) ? marks.visible : base.marks.visible,
+      // Additive like `stacking.series`: a patch names only the groups it carries, so a
+      // choice stored for a group the host has not registered yet survives verbatim.
+      groups: {
+        ...base.marks.groups,
+        ...Object.fromEntries(Object.entries(markGroups).filter(([, v]) => isBool(v)))
+      }
+    },
     candles: {
       upColor: isColor(candles.upColor) ? candles.upColor : base.candles.upColor,
       downColor: isColor(candles.downColor) ? candles.downColor : base.candles.downColor,
@@ -17231,6 +17529,31 @@ var Animator = class {
     }
   }
 };
+var EaseSetting = class {
+  /** `defaultMs` is what the on/off switch restores when nothing else was configured;
+   *  `initialMs` (default: `defaultMs`) is the starting value — 0 for a motion that
+   *  ships off. */
+  constructor(defaultMs, initialMs = defaultMs) {
+    this.onMs = defaultMs;
+    this.ms = initialMs;
+  }
+  /** The active time-constant; 0 when off. */
+  get tau() {
+    return this.ms;
+  }
+  get on() {
+    return this.ms > 0;
+  }
+  /** Set the time-constant (0 = off). A non-zero value becomes what `toggle(true)` restores. */
+  set(ms) {
+    this.ms = ms;
+    if (ms > 0) this.onMs = ms;
+  }
+  /** On/off only — the duration stays the last one configured. */
+  toggle(on) {
+    this.ms = on ? this.onMs : 0;
+  }
+};
 function easeToward(current, target, dtMs, tauMs) {
   if (tauMs <= 0) return target;
   return current + (target - current) * (1 - Math.exp(-dtMs / tauMs));
@@ -17954,6 +18277,25 @@ function drawTextLines(ctx, lines, x, firstY, step, color) {
   for (let i = 0; i < lines.length; i += 1) ctx.fillText(lines[i], x, firstY + i * step);
 }
 
+// src/renderers/shared/marks-state.ts
+function defaultMarksState() {
+  return { visible: true, groups: {} };
+}
+function mergeMarksState(base, patch) {
+  if (typeof patch === "boolean") return { visible: patch, groups: { ...base.groups } };
+  const p = patch && typeof patch === "object" ? patch : {};
+  const g = p.groups && typeof p.groups === "object" ? p.groups : {};
+  const groups = { ...base.groups };
+  for (const [id, v] of Object.entries(g)) if (typeof v === "boolean") groups[id] = v;
+  return { visible: typeof p.visible === "boolean" ? p.visible : base.visible, groups };
+}
+function markGroupVisible(state, groupId, groups) {
+  if (groupId === void 0) return true;
+  const chosen = state.groups[groupId];
+  if (typeof chosen === "boolean") return chosen;
+  return groups.find((g) => g.id === groupId)?.visible !== false;
+}
+
 // src/renderers/native/core/SceneGraph.ts
 var SceneGraph = class {
   constructor() {
@@ -18017,6 +18359,20 @@ var SceneGraph = class {
     /** Strategy trade-marker display (the `tradeMarkers` feature): master toggle, the
      *  two text lines, and the palette. Trade markers always paint on the price pane. */
     this.tradeMarkers = defaultTradeMarkersState();
+    /** Timeline-mark display (the `marks` feature): the lane's master toggle + per-group visibility. */
+    this.marks = defaultMarksState();
+    /** The host's timeline marks + group definitions (`setTimelineMarks`), painted on the lane above the time axis. */
+    this.timelineMarks = [];
+    this.markGroups = [];
+    /** The mark stack (bar index) fanned out by hover or tap, if any. */
+    this.marksExpandedStack = null;
+    /** The lane glyph (cluster key) under the pointer — it pulses — and when the hover began (frame-clock ms). */
+    this.marksHoverKey = null;
+    this.marksHoverSince = 0;
+    /** The cluster whose popup is open: its glyph paints filled ("active"). */
+    this.marksActiveKey = null;
+    /** A content-less click's brief filled flash — the cluster key and the frame-clock time it ends. */
+    this.marksFlash = null;
     /** Renderer-owned shaded time bands (session highlighting), behind grid + data. */
     this.highlights = [];
     /** Pre/post-market bands pushed by the host (`sessionZones` feature); null ⇒ no sessions. */
@@ -19865,6 +20221,315 @@ function timeTicks(fromMs, toMs, target = 8, offsetMs = 0) {
   return out;
 }
 
+// src/renderers/native/chrome/countdown.ts
+function countdownText(barOpen, barMs, now) {
+  if (!(barMs > 0)) return null;
+  const remaining = barOpen + barMs - now;
+  if (remaining <= 0) return null;
+  return formatCountdown(remaining);
+}
+function formatCountdown(ms) {
+  const total = Math.max(0, Math.ceil(ms / 1e3));
+  const s = total % 60;
+  const m = Math.floor(total / 60) % 60;
+  const h = Math.floor(total / 3600);
+  const pad = (v) => String(v).padStart(2, "0");
+  return h > 0 ? `${h}:${pad(m)}:${pad(s)}` : `${pad(m)}:${pad(s)}`;
+}
+
+// src/renderers/native/chrome/contrast.ts
+function tagTextColor(bg, over) {
+  const [r, g, b, a] = parseColor(bg);
+  let R = r;
+  let G = g;
+  let B = b;
+  if (a < 1) {
+    const [or, og, ob] = parseColor(over);
+    R = r * a + or * (1 - a);
+    G = g * a + og * (1 - a);
+    B = b * a + ob * (1 - a);
+  }
+  const lin = (c) => c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  const L = 0.2126 * lin(R) + 0.7152 * lin(G) + 0.0722 * lin(B);
+  return L >= 0.4 ? "#000000" : "#ffffff";
+}
+
+// src/renderers/native/chrome/marks/layout.ts
+var MARK_GLYPH_PX = 16;
+var MARK_CLUSTER_PX = 20;
+var MARK_LANE_INSET = 4;
+var MARK_DECK_STEP = 3;
+var MARK_FAN_GAP = 4;
+var MARK_HIT_PAD = 3;
+var MARK_FAN_HOLD = 8;
+function snapMarkBar(time, barTimes, intervalMs2) {
+  const n = barTimes.length;
+  if (n === 0 || !(intervalMs2 > 0) || !Number.isFinite(time)) return null;
+  if (time < barTimes[0]) return null;
+  const last = barTimes[n - 1];
+  if (time >= last + intervalMs2) return n - 1 + Math.floor((time - last) / intervalMs2);
+  let lo = 0;
+  let hi = n - 1;
+  while (lo < hi) {
+    const mid = lo + hi + 1 >> 1;
+    if (barTimes[mid] <= time) lo = mid;
+    else hi = mid - 1;
+  }
+  if (time < barTimes[lo] + intervalMs2) return lo;
+  return lo + 1;
+}
+function clusterMarks(marks, barTimes, intervalMs2, hidden) {
+  const byKey = /* @__PURE__ */ new Map();
+  marks.forEach((m, seq) => {
+    if (m.group !== void 0 && hidden(m.group)) return;
+    const bar = snapMarkBar(m.time, barTimes, intervalMs2);
+    if (bar === null) return;
+    const key = `${bar}|${m.group ?? ""}`;
+    let c = byKey.get(key);
+    if (!c) {
+      c = { key, bar, group: m.group, marks: [], seq: [] };
+      byKey.set(key, c);
+    }
+    c.marks.push(m);
+    c.seq.push(seq);
+  });
+  const out = [];
+  for (const c of byKey.values()) {
+    const order = c.marks.map((m, i) => ({ m, seq: c.seq[i] })).sort((a, b) => a.m.time - b.m.time || a.seq - b.seq);
+    out.push({ key: c.key, bar: c.bar, group: c.group, marks: order.map((o) => o.m) });
+  }
+  return out;
+}
+function groupRank(groups, clusters) {
+  const rank = /* @__PURE__ */ new Map();
+  groups.forEach((g, i) => rank.set(g.id, i));
+  for (const c of clusters) {
+    if (c.group !== void 0 && !rank.has(c.group)) rank.set(c.group, rank.size);
+  }
+  return (group) => group === void 0 ? Number.MAX_SAFE_INTEGER : rank.get(group) ?? Number.MAX_SAFE_INTEGER - 1;
+}
+function layoutMarkLane(input) {
+  const clusters = clusterMarks(input.marks, input.barTimes, input.intervalMs, input.hidden);
+  const rankOf = groupRank(input.groups, clusters);
+  const byBar = /* @__PURE__ */ new Map();
+  for (const c of clusters) {
+    const list = byBar.get(c.bar);
+    if (list) list.push(c);
+    else byBar.set(c.bar, [c]);
+  }
+  const glyphs = [];
+  const stacks = /* @__PURE__ */ new Map();
+  for (const [bar, list] of byBar) {
+    const x = input.xOf(bar);
+    if (!Number.isFinite(x) || x < -MARK_CLUSTER_PX || x > input.dataW + MARK_CLUSTER_PX) continue;
+    list.sort((a, b) => rankOf(a.group) - rankOf(b.group));
+    const multi = list.length > 1;
+    const expanded = multi && input.expanded === bar;
+    const decked = multi && !expanded;
+    const placed = [];
+    const deckSize = list[0].marks.length > 1 ? MARK_CLUSTER_PX : MARK_GLYPH_PX;
+    let bottom = input.axisY - MARK_LANE_INSET;
+    list.forEach((cluster, depth) => {
+      const size = decked ? deckSize : cluster.marks.length > 1 ? MARK_CLUSTER_PX : MARK_GLYPH_PX;
+      let y;
+      if (expanded) {
+        y = bottom - size / 2;
+        bottom -= size + MARK_FAN_GAP;
+      } else {
+        y = input.axisY - MARK_LANE_INSET - size / 2 - depth * MARK_DECK_STEP;
+      }
+      placed.push({ cluster, x, y, size, stack: bar, depth, decked });
+    });
+    for (let i = placed.length - 1; i >= 0; i--) glyphs.push(placed[i]);
+    stacks.set(bar, placed);
+  }
+  return { glyphs, stacks };
+}
+function markGlyphAt(layout, x, y) {
+  for (let i = layout.glyphs.length - 1; i >= 0; i--) {
+    const g = layout.glyphs[i];
+    if (g.decked && g.depth !== 0) continue;
+    const r = g.size / 2 + MARK_HIT_PAD;
+    if (Math.abs(x - g.x) <= r && Math.abs(y - g.y) <= r) return g;
+  }
+  return null;
+}
+function markStackAt(layout, x, y) {
+  for (const [bar, placed] of layout.stacks) {
+    for (const g of placed) {
+      const r = g.size / 2 + MARK_HIT_PAD;
+      if (Math.abs(x - g.x) <= r && Math.abs(y - g.y) <= r) return bar;
+    }
+    if (placed.length > 1 && !placed[0].decked) {
+      const top = placed[placed.length - 1];
+      const base = placed[0];
+      const r = Math.max(top.size, base.size) / 2 + MARK_HIT_PAD;
+      if (Math.abs(x - base.x) <= r && y >= top.y - top.size / 2 - MARK_FAN_HOLD && y <= base.y + base.size / 2 + MARK_HIT_PAD) return bar;
+    }
+  }
+  return null;
+}
+function clusterTooltip(cluster, groups) {
+  const first = cluster.marks[0];
+  if (!first) return null;
+  if (cluster.marks.length === 1) return first.tooltip ?? first.title ?? null;
+  const label = cluster.group !== void 0 ? markGroupLabel(cluster.group, groups) : first.title ?? first.tooltip ?? "Marks";
+  return `${label} \xB7 ${cluster.marks.length}`;
+}
+function markGroupLabel(groupId, groups) {
+  const def = groups.find((g) => g.id === groupId);
+  if (def) return def.label;
+  return groupId.charAt(0).toUpperCase() + groupId.slice(1);
+}
+function effectiveMarkGroups(marks, groups) {
+  const out = groups.map((g) => ({ ...g }));
+  const seen = new Set(out.map((g) => g.id));
+  for (const m of marks) {
+    if (m.group === void 0 || seen.has(m.group)) continue;
+    seen.add(m.group);
+    out.push({ id: m.group, label: markGroupLabel(m.group, groups) });
+  }
+  return out;
+}
+
+// src/renderers/native/chrome/marks/paint.ts
+var MARK_PULSE_MS = 360;
+var MARK_PULSE_AMPLITUDE = 0.1;
+var ACTIVE_INK = "#ffffff";
+function pulseScale(elapsedMs) {
+  if (!(elapsedMs > 0) || elapsedMs >= MARK_PULSE_MS) return 1;
+  return 1 + MARK_PULSE_AMPLITUDE * Math.sin(Math.PI * elapsedMs / MARK_PULSE_MS);
+}
+function paintMarkLane(ctx, layout, deps) {
+  if (layout.glyphs.length === 0) return;
+  ctx.save();
+  ctx.setLineDash([]);
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  for (const g of layout.glyphs) {
+    const mark = g.cluster.marks[0];
+    if (!mark) continue;
+    const key = g.cluster.key;
+    const color = mark.glyph.color;
+    const active = key === deps.activeKey || key === deps.flashKey;
+    const size = g.size * (key === deps.hoverKey ? pulseScale(deps.nowMs - deps.hoverSince) : 1);
+    if (g.depth === 0) {
+      const sx = Math.round(g.x) + 0.5;
+      ctx.lineWidth = 1;
+      ctx.strokeStyle = deps.stemColor;
+      ctx.beginPath();
+      ctx.moveTo(sx, g.y + g.size / 2);
+      ctx.lineTo(sx, deps.axisY);
+      ctx.stroke();
+    }
+    const shape = mark.glyph.shape ?? "circle";
+    const center = traceShape(ctx, shape, g.x, g.y, size);
+    ctx.lineWidth = 4;
+    ctx.strokeStyle = deps.background;
+    ctx.stroke();
+    ctx.fillStyle = active ? color : deps.background;
+    ctx.fill();
+    ctx.lineWidth = 1.5;
+    ctx.strokeStyle = color;
+    ctx.stroke();
+    const ink = active ? ACTIVE_INK : color;
+    const symbolPx = Math.round(size * 0.62);
+    if (mark.glyph.icon) {
+      const img = deps.icons.get(mark.glyph.icon, ink, symbolPx, deps.dpr);
+      if (img) ctx.drawImage(img, center.x - symbolPx / 2, center.y - symbolPx / 2, symbolPx, symbolPx);
+    } else if (mark.glyph.letter) {
+      ctx.fillStyle = ink;
+      ctx.font = `600 ${Math.round(size * 0.58)}px ${deps.fontFamily}`;
+      ctx.fillText(mark.glyph.letter.slice(0, 2), center.x, center.y + 0.5);
+    }
+  }
+  ctx.restore();
+}
+function traceShape(ctx, shape, x, y, size) {
+  const r = size / 2;
+  ctx.beginPath();
+  switch (shape) {
+    case "square": {
+      const c = Math.min(3, r / 2);
+      roundedRect(ctx, x - r, y - r, size, size, c);
+      return { x, y };
+    }
+    case "diamond":
+      ctx.moveTo(x, y - r);
+      ctx.lineTo(x + r, y);
+      ctx.lineTo(x, y + r);
+      ctx.lineTo(x - r, y);
+      ctx.closePath();
+      return { x, y };
+    case "pin": {
+      const hr = r * 0.82;
+      const hy = y - r + hr;
+      ctx.arc(x, hy, hr, Math.PI * 0.75, Math.PI * 0.25, false);
+      ctx.lineTo(x, y + r);
+      ctx.closePath();
+      return { x, y: hy };
+    }
+    case "circle":
+    default:
+      ctx.arc(x, y, r, 0, Math.PI * 2);
+      return { x, y };
+  }
+}
+function roundedRect(ctx, x, y, w, h, radius) {
+  ctx.moveTo(x + radius, y);
+  ctx.lineTo(x + w - radius, y);
+  ctx.quadraticCurveTo(x + w, y, x + w, y + radius);
+  ctx.lineTo(x + w, y + h - radius);
+  ctx.quadraticCurveTo(x + w, y + h, x + w - radius, y + h);
+  ctx.lineTo(x + radius, y + h);
+  ctx.quadraticCurveTo(x, y + h, x, y + h - radius);
+  ctx.lineTo(x, y + radius);
+  ctx.quadraticCurveTo(x, y, x + radius, y);
+  ctx.closePath();
+}
+var MarkIconRaster = class {
+  constructor(onReady) {
+    this.onReady = onReady;
+    this.cache = /* @__PURE__ */ new Map();
+  }
+  get(icon2, ink, px, dpr) {
+    const key = `${icon2}|${ink}|${px}|${dpr}`;
+    if (this.cache.has(key)) {
+      const img2 = this.cache.get(key);
+      return img2 && img2.complete && img2.naturalWidth > 0 ? img2 : null;
+    }
+    const markup = iconMarkup(icon2);
+    if (!markup || typeof document === "undefined" || typeof Image === "undefined" || typeof XMLSerializer === "undefined") {
+      this.cache.set(key, null);
+      return null;
+    }
+    const svg = standaloneSvg(markup, ink, Math.max(1, Math.ceil(px * dpr)));
+    if (!svg) {
+      this.cache.set(key, null);
+      return null;
+    }
+    const img = new Image();
+    img.onload = () => this.onReady();
+    img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+    this.cache.set(key, img);
+    return null;
+  }
+  clear() {
+    this.cache.clear();
+  }
+};
+function standaloneSvg(markup, ink, px) {
+  const tpl = document.createElement("template");
+  tpl.innerHTML = markup;
+  const svg = tpl.content.firstElementChild;
+  if (!svg || svg.tagName.toLowerCase() !== "svg") return null;
+  svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+  svg.setAttribute("width", String(px));
+  svg.setAttribute("height", String(px));
+  svg.setAttribute("color", ink);
+  return new XMLSerializer().serializeToString(svg);
+}
+
 // src/renderers/native/chrome/ChromeRenderer.ts
 var ChromeRenderer = class {
   constructor() {
@@ -19874,11 +20539,40 @@ var ChromeRenderer = class {
     this.axisTextColor = DARK_THEME.textColor;
     // Shared Pine-drawing renderer, used here for autoscale geometry only; widthCache persists.
     this.drawScene = new DrawingSceneRenderer({ timeToLogical: () => 0, barAt: () => null, theme: {} });
+    /** The timeline-mark lane as laid out by the last frame — what hover/click hit-test against. */
+    this.markLayout = { glyphs: [], stacks: /* @__PURE__ */ new Map() };
+    /** Registry icons rasterized for the lane; the owner is asked for a chrome repaint when one lands. */
+    this.markIcons = new MarkIconRaster(() => this.onMarkIconReady?.());
+    this.onMarkIconReady = null;
+    /** Bar open times of the current series, rebuilt only when the array or its length changes (a live tick keeps both). */
+    this.barTimesSrc = null;
+    this.barTimesCache = [];
   }
   mount(canvas) {
     this.canvas = canvas;
     this.ctx = canvas.getContext("2d");
   }
+  /** Where to ask for a chrome repaint when a lane icon finishes rasterizing. */
+  setMarkIconReady(cb) {
+    this.onMarkIconReady = cb;
+  }
+  /** The interactive mark glyph under a plot point (last frame's layout), or null. */
+  markGlyphAt(x, y) {
+    return markGlyphAt(this.markLayout, x, y);
+  }
+  /** The mark stack (bar index) whose glyphs — or the gaps of its fan — cover a plot point. */
+  markStackAt(x, y) {
+    return markStackAt(this.markLayout, x, y);
+  }
+  /** A glyph of the last frame by its cluster key — how an open popup follows its anchor. */
+  markGlyphByKey(key) {
+    return this.markLayout.glyphs.find((g) => g.cluster.key === key) ?? null;
+  }
+  /** Hover text of the mark glyph under a plot point, or null. */
+  markTooltipAt(x, y, groups) {
+    const g = this.markGlyphAt(x, y);
+    return g ? clusterTooltip(g.cluster, groups) : null;
+  }
   /** Wire the drawing coordinate resolvers + theme (call once per frame before use). */
   prepare(scene, coords, theme) {
     this.drawScene.setDeps({
@@ -19927,6 +20621,7 @@ var ChromeRenderer = class {
     const panes = scene.orderedPanes();
     if (coords.barCount === 0) {
       this.drawPaneSeparators(ctx, scene, theme, fullW, panes);
+      this.markLayout = { glyphs: [], stacks: /* @__PURE__ */ new Map() };
       return;
     }
     const pricePane = panes.find((p) => p.kind === "price") ?? null;
@@ -19940,6 +20635,46 @@ var ChromeRenderer = class {
     this.drawPaneSeparators(ctx, scene, theme, fullW, panes);
     this.drawPriceLineAndCountdown(ctx, scene, coords, theme, dataW, pricePane);
     this.drawTimeAxis(ctx, scene, coords, theme, dataW, dataH, fullH);
+    this.drawMarkLane(ctx, scene, coords, theme, dataW, dataH);
+  }
+  /** The timeline-mark lane — after the axis, so the tokens read over the plot's bottom edge. */
+  drawMarkLane(ctx, scene, coords, theme, dataW, dataH) {
+    if (!scene.marks.visible || scene.timelineMarks.length === 0) {
+      this.markLayout = { glyphs: [], stacks: /* @__PURE__ */ new Map() };
+      return;
+    }
+    this.markLayout = layoutMarkLane({
+      marks: scene.timelineMarks,
+      groups: scene.markGroups,
+      hidden: (groupId) => !markGroupVisible(scene.marks, groupId, scene.markGroups),
+      barTimes: this.barTimes(scene),
+      intervalMs: coords.barInterval,
+      xOf: (bar) => coords.logicalToX(bar),
+      axisY: dataH,
+      dataW,
+      expanded: scene.marksExpandedStack
+    });
+    const nowMs = typeof performance !== "undefined" ? performance.now() : Date.now();
+    paintMarkLane(ctx, this.markLayout, {
+      axisY: dataH,
+      background: theme.background,
+      stemColor: scene.style.borderColor ?? theme.borderColor,
+      fontFamily: theme.fontFamily,
+      dpr: coords.dpr,
+      icons: this.markIcons,
+      hoverKey: scene.marksHoverKey,
+      hoverSince: scene.marksHoverSince,
+      activeKey: scene.marksActiveKey,
+      flashKey: scene.marksFlash && scene.marksFlash.until > nowMs ? scene.marksFlash.key : null,
+      nowMs
+    });
+  }
+  barTimes(scene) {
+    if (this.barTimesSrc !== scene.bars || this.barTimesCache.length !== scene.bars.length) {
+      this.barTimesSrc = scene.bars;
+      this.barTimesCache = scene.bars.map((b) => b.time);
+    }
+    return this.barTimesCache;
   }
   destroy() {
     this.canvas = null;
@@ -20055,7 +20790,8 @@ var ChromeRenderer = class {
    *  - the countdown-to-bar-close chip (`showCountdown`).
    * When the label and countdown are both on they merge into one stacked block (countdown
    * under the label, text flushed left); a lone label or countdown is centered on the
-   * price level with centered text. The countdown ticks once per second (repaint scheduled).
+   * price level with centered text. The countdown repaints on the renderer's second pulse
+   * and disappears once the bar has closed, until the next bar arrives.
    */
   drawPriceLineAndCountdown(ctx, scene, coords, theme, dataW, pricePane) {
     const n = scene.bars.length;
@@ -20075,17 +20811,16 @@ var ChromeRenderer = class {
       ctx.stroke();
       setDash2(ctx, "solid");
     }
-    const interval = coords.barInterval;
-    const showCountdown = scene.showCountdown && interval > 0;
+    const cdText = scene.showCountdown ? countdownText(last.time, coords.barInterval, Date.now()) : null;
+    const showCountdown = cdText !== null;
     const showLabel = scene.showPriceLabel;
     if (!showLabel && !showCountdown) return;
     const priceText = formatAxisValue(pricePane.scale, pricePane.bounds.height, last.close, percentScaleFor(scene, pricePane), scene.priceMintick);
-    const cdText = showCountdown ? formatCountdown(last.time + interval - Date.now()) : "";
     const PAD = 8;
     const x = dataW + 1;
     const textColor = tagTextColor(color, theme.background);
     ctx.textBaseline = "middle";
-    if (showLabel && showCountdown) {
+    if (showLabel && cdText !== null) {
       const w2 = Math.max(ctx.measureText(priceText).width, ctx.measureText(cdText).width) + PAD;
       const top = y - 8;
       const tx = x + PAD / 2;
@@ -20098,7 +20833,7 @@ var ChromeRenderer = class {
       ctx.textAlign = "start";
       return;
     }
-    const text = showLabel ? priceText : cdText;
+    const text = showLabel ? priceText : cdText ?? "";
     const w = ctx.measureText(text).width + PAD;
     ctx.fillStyle = color;
     ctx.fillRect(x, y - 8, w, 16);
@@ -20169,29 +20904,6 @@ function setDash2(ctx, style) {
   else if (style === "dotted") ctx.setLineDash([2, 3]);
   else ctx.setLineDash([]);
 }
-function tagTextColor(bg, over) {
-  const [r, g, b, a] = parseColor(bg);
-  let R = r;
-  let G = g;
-  let B = b;
-  if (a < 1) {
-    const [or, og, ob] = parseColor(over);
-    R = r * a + or * (1 - a);
-    G = g * a + og * (1 - a);
-    B = b * a + ob * (1 - a);
-  }
-  const lin = (c) => c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
-  const L = 0.2126 * lin(R) + 0.7152 * lin(G) + 0.0722 * lin(B);
-  return L >= 0.4 ? "#000000" : "#ffffff";
-}
-function formatCountdown(ms) {
-  const total = Math.max(0, Math.floor(ms / 1e3));
-  const s = total % 60;
-  const m = Math.floor(total / 60) % 60;
-  const h = Math.floor(total / 3600);
-  const pad = (v) => String(v).padStart(2, "0");
-  return h > 0 ? `${h}:${pad(m)}:${pad(s)}` : `${pad(m)}:${pad(s)}`;
-}
 
 // src/renderers/native/chrome/LabelTooltip.ts
 var HOVER_DELAY_MS = 350;
@@ -20474,6 +21186,11 @@ function tzMenuLabel(zone, location) {
 function settingsIdSlug(label) {
   return label.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
 }
+var MARKS_SETTINGS_ID = "events";
+var MARKS_GROUPS_SETTINGS_ID = "events.groups";
+function markGroupSettingsId(groupId) {
+  return `${MARKS_GROUPS_SETTINGS_ID}.${settingsIdSlug(groupId)}`;
+}
 function settingsIdHidden(id, hidden) {
   if (hidden.size === 0) return false;
   let path = id;
@@ -20567,7 +21284,11 @@ var BUILTIN_SETTINGS_IDS = [
   "symbol.style.baseline.base-level",
   "symbol.style.baseline.width",
   "symbol.animation",
+  "symbol.animation.zoom",
+  "symbol.animation.pan",
+  "symbol.animation.autoscale",
   "symbol.animation.price-changes",
+  "symbol.animation.intro",
   "symbol.timezone",
   "scales",
   "scales.price-scale",
@@ -20593,8 +21314,13 @@ var BUILTIN_SETTINGS_IDS = [
   "canvas.grid.horizontal",
   "canvas.theme"
 ];
-function settingsIdCatalog(hostSections) {
+function settingsIdCatalog(hostSections, markGroups = []) {
   const ids = new Set(BUILTIN_SETTINGS_IDS);
+  if (markGroups.length > 0) {
+    ids.add(MARKS_SETTINGS_ID);
+    ids.add(MARKS_GROUPS_SETTINGS_ID);
+    for (const g of markGroups) ids.add(markGroupSettingsId(g.id));
+  }
   for (const def of chartTypes()) {
     if (hasOwnCandlePaint(def.id)) {
       const style = `symbol.style.${def.id}`;
@@ -20634,7 +21360,7 @@ function styleLabel(id) {
   return chartType(id)?.label ?? BUILTIN_STYLE_LABELS[id] ?? id;
 }
 var SD_STYLE_ID = "vela-settings-controls";
-var SD_STYLE_REV = "5";
+var SD_STYLE_REV = "6";
 var SETTINGS_BORDER = "var(--vela-border)";
 function ensureControlStyles() {
   if (typeof document === "undefined") return;
@@ -20710,7 +21436,15 @@ ${overlayScrollbarCss(".vela-sd-pane")}
 .vela-sd-mobile .vela-select-trigger,.vela-sd-mobile .vela-num input,.vela-sd-mobile .vela-width-field{height:34px;}
 .vela-sd-mobile .vela-sd-close{width:40px;height:40px;}
 .vela-sd-mobile .vela-sd-btn{height:38px;}
-.vela-sd-mobile .vela-sd-row span,.vela-sd-mobile .vela-sd-bool span,.vela-sd-mobile .vela-field-label{white-space:normal !important;}`;
+.vela-sd-mobile .vela-sd-row span,.vela-sd-mobile .vela-sd-bool span,.vela-sd-mobile .vela-field-label{white-space:normal !important;}
+/* The wrap rule above is for ROW LABELS only: a select's closed value must keep its
+   single-line ellipsis, or a long option wraps to several lines inside the 34px
+   trigger and spills over the rows around it. Three classes so it outranks the
+   two-classes-plus-element selector above. The kit's fixed 100px column is a desktop
+   alignment device; on mobile the trigger hugs its value instead (the grid's control
+   column is max-content), capped so a long option still ellipsizes before the label. */
+.vela-sd-mobile .vela-select-trigger .vela-select-label{white-space:nowrap !important;}
+.vela-sd-mobile .vela-select:not([data-fill]){width:auto;min-width:100px;max-width:min(220px,55vw);}`;
   if (!existing) document.head.appendChild(st);
 }
 var SettingsDialog = class {
@@ -20725,6 +21459,9 @@ var SettingsDialog = class {
     this.config = null;
     this.syncTypeTabs = null;
     this.hostSections = [];
+    /** The timeline-mark groups (defined + named by marks) — one checkbox each on the Events tab. */
+    this.markGroups = [];
+    this.markGroupVisible = () => true;
     /** The Canvas → Theme row: current app theme + where a pick is raised. The row is a
      *  host callback, NOT a config patch — the app theme stays out of the persisted
      *  `ChartConfig`, so exported templates never carry it. */
@@ -20749,6 +21486,11 @@ var SettingsDialog = class {
   setHostSections(sections) {
     this.hostSections = sections;
   }
+  /** The timeline-mark groups and their current visibility — the Events tab's rows on next open. */
+  setMarkGroups(groups, visible) {
+    this.markGroups = groups;
+    this.markGroupVisible = visible;
+  }
   /** Replace the visibility policy — an open dialog rebuilds in place to honor it. */
   setHiddenSettings(ids) {
     const next = new Set(ids);
@@ -20922,12 +21664,36 @@ var SettingsDialog = class {
     }
     showActive(config.series.style);
     body.append(sid(this.sectionTitle("Animation"), "symbol.animation"));
+    body.append(sid(this.boolRow(
+      "Animate zoom",
+      config.animations.zoom,
+      (v) => this.emit({ animations: { zoom: v } }),
+      this.hint("Glide the chart to each zoom step instead of jumping.")
+    ), "symbol.animation.zoom"));
+    body.append(sid(this.boolRow(
+      "Pan momentum",
+      config.animations.pan,
+      (v) => this.emit({ animations: { pan: v } }),
+      this.hint("Keep gliding briefly after a drag release, and ease scroll-to-latest and keyboard pans.")
+    ), "symbol.animation.pan"));
+    body.append(sid(this.boolRow(
+      "Animate price scale",
+      config.animations.autoscale,
+      (v) => this.emit({ animations: { autoscale: v } }),
+      this.hint("Glide the price scale to its new range while zooming or panning.")
+    ), "symbol.animation.autoscale"));
     body.append(sid(this.boolRow(
       "Animate price changes",
       config.priceScale.animateLastPrice,
       (v) => this.emit({ priceScale: { animateLastPrice: v } }),
       this.hint("Glide the live bar to each new price instead of snapping.")
     ), "symbol.animation.price-changes"));
+    body.append(sid(this.boolRow(
+      "Reveal on load",
+      config.animations.intro,
+      (v) => this.emit({ animations: { intro: v } }),
+      this.hint("Draw the candles in when a chart first loads. Takes effect on the next load.")
+    ), "symbol.animation.intro"));
     body.append(sid(this.sectionTitle("Time zone"), "symbol.timezone"));
     body.append(sid(this.selectRowLabeled("Time zone", normalizeTimezone(config.timeScale.timezone), timezoneOptions(config.timeScale.timezone), (v) => this.emit({ timeScale: { timezone: v } })), "symbol.timezone"));
     const renderHostSections = (placement) => {
@@ -20997,6 +21763,13 @@ var SettingsDialog = class {
       body.append(sid(this.sectionTitle("Theme"), "canvas.theme"));
       body.append(sid(this.selectRow("Color theme", tc.current === "dark" ? "Dark" : "Light", ["Dark", "Light"], (v) => tc.onSelect(v === "Dark" ? "dark" : "light")), "canvas.theme"));
     }
+    if (this.markGroups.length > 0) {
+      body.append(sid(this.section("Events"), MARKS_SETTINGS_ID));
+      body.append(sid(this.sectionTitle("Visible events"), MARKS_GROUPS_SETTINGS_ID));
+      for (const g of this.markGroups) {
+        body.append(sid(this.boolRow(g.label, this.markGroupVisible(g.id), (v) => this.emit({ marks: { groups: { [g.id]: v } } })), markGroupSettingsId(g.id)));
+      }
+    }
     renderChartTypeSections("end");
     renderHostSections("end");
     if (this.hiddenSettings.size > 0) {
@@ -27201,6 +27974,383 @@ function expandScaleByPixels(scale, heightPx, abovePx, belowPx) {
   return { ...scale, min: scale.min - belowPx * perPx, max: scale.max + abovePx * perPx };
 }
 
+// src/ui/sanitize-html.ts
+var ALLOWED_TAGS = /* @__PURE__ */ new Set([
+  "a",
+  "abbr",
+  "b",
+  "blockquote",
+  "br",
+  "code",
+  "dd",
+  "del",
+  "div",
+  "dl",
+  "dt",
+  "em",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "hr",
+  "i",
+  "img",
+  "ins",
+  "kbd",
+  "li",
+  "mark",
+  "ol",
+  "p",
+  "pre",
+  "q",
+  "s",
+  "small",
+  "span",
+  "strong",
+  "sub",
+  "sup",
+  "table",
+  "tbody",
+  "td",
+  "tfoot",
+  "th",
+  "thead",
+  "tr",
+  "u",
+  "ul"
+]);
+var DROPPED_TAGS = /* @__PURE__ */ new Set([
+  "script",
+  "style",
+  "iframe",
+  "frame",
+  "frameset",
+  "object",
+  "embed",
+  "applet",
+  "form",
+  "input",
+  "textarea",
+  "button",
+  "select",
+  "option",
+  "link",
+  "meta",
+  "base",
+  "svg",
+  "math",
+  "template",
+  "noscript",
+  "audio",
+  "video",
+  "canvas",
+  "dialog",
+  "head",
+  "title"
+]);
+var ALLOWED_ATTRS = {
+  a: /* @__PURE__ */ new Set(["href"]),
+  img: /* @__PURE__ */ new Set(["src", "alt", "width", "height"]),
+  td: /* @__PURE__ */ new Set(["colspan", "rowspan"]),
+  th: /* @__PURE__ */ new Set(["colspan", "rowspan"]),
+  ol: /* @__PURE__ */ new Set(["start"])
+};
+var BLOCKED_SCHEMES = /* @__PURE__ */ new Set(["javascript", "vbscript", "data", "file", "blob"]);
+function tagDisposition(tag) {
+  const t = tag.toLowerCase();
+  if (DROPPED_TAGS.has(t)) return "drop";
+  return ALLOWED_TAGS.has(t) ? "keep" : "unwrap";
+}
+function attributeAllowed(tag, name) {
+  const n = name.toLowerCase();
+  if (n.startsWith("on") || n === "style") return false;
+  if (n === "title") return true;
+  return ALLOWED_ATTRS[tag.toLowerCase()]?.has(n) ?? false;
+}
+function safeUrl(value, absoluteOnly = false) {
+  let url = "";
+  for (const ch of value) if (ch.charCodeAt(0) > 32) url += ch;
+  const m = /^([a-z][a-z0-9+.-]*):/i.exec(url);
+  const scheme = m ? m[1].toLowerCase() : null;
+  if (scheme !== null && BLOCKED_SCHEMES.has(scheme)) return null;
+  if (absoluteOnly && scheme !== "http" && scheme !== "https") return null;
+  return url;
+}
+var ELEMENT_NODE = 1;
+var TEXT_NODE = 3;
+function sanitizeHtml(html, doc) {
+  const tpl = doc.createElement("template");
+  tpl.innerHTML = html;
+  const out = doc.createDocumentFragment();
+  copyChildren(tpl.content, out, doc);
+  return out;
+}
+function copyChildren(from, to, doc) {
+  for (const child of Array.from(from.childNodes)) {
+    if (child.nodeType === TEXT_NODE) {
+      to.appendChild(doc.createTextNode(child.textContent ?? ""));
+      continue;
+    }
+    if (child.nodeType !== ELEMENT_NODE) continue;
+    const el = child;
+    const tag = el.tagName.toLowerCase();
+    const disposition = tagDisposition(tag);
+    if (disposition === "drop") continue;
+    if (disposition === "unwrap") {
+      copyChildren(el, to, doc);
+      continue;
+    }
+    const clean = doc.createElement(tag);
+    for (const attr of Array.from(el.attributes)) {
+      const name = attr.name.toLowerCase();
+      if (!attributeAllowed(tag, name)) continue;
+      let value = attr.value;
+      if (name === "href" || name === "src") {
+        const safe = safeUrl(value, name === "src");
+        if (safe === null) continue;
+        value = safe;
+      }
+      clean.setAttribute(name, value);
+    }
+    if (tag === "a") {
+      clean.setAttribute("target", "_blank");
+      clean.setAttribute("rel", "noopener noreferrer");
+    }
+    copyChildren(el, clean, doc);
+    to.appendChild(clean);
+  }
+}
+
+// src/renderers/native/chrome/marks/MarkPopover.ts
+var MARKS_STYLE_ID = "vela-marks-popover";
+var MARKS_CSS = `
+.vela-marks-panel { padding: 0; gap: 0; min-width: 220px; max-width: 320px; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
+.vela-marks-section { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; }
+.vela-marks-section + .vela-marks-section { border-top: 1px solid var(--vela-border); }
+.vela-marks-field { display: flex; justify-content: space-between; gap: 16px; line-height: 1.45; }
+.vela-marks-field-label { color: var(--vela-fg-muted); }
+.vela-marks-field-value { color: var(--vela-fg-bright); text-align: right; font-variant-numeric: tabular-nums; }
+.vela-marks-html { color: var(--vela-fg); line-height: 1.45; overflow-wrap: anywhere; }
+.vela-marks-html p { margin: 0 0 6px; }
+.vela-marks-html p:last-child { margin-bottom: 0; }
+.vela-marks-html a { color: var(--vela-accent); }
+.vela-marks-html img { max-width: 100%; height: auto; }
+.vela-marks-html table { border-collapse: collapse; }
+.vela-marks-html td, .vela-marks-html th { padding: 2px 6px; border: 1px solid var(--vela-border); }
+.vela-marks-html pre, .vela-marks-html code { font-family: var(--vela-font-mono, monospace); font-size: 0.92em; }
+.vela-marks-loading, .vela-marks-error { color: var(--vela-fg-muted); font-style: italic; }
+`;
+var MarkPopover = class {
+  constructor(deps) {
+    this.deps = deps;
+    this.pop = null;
+    this.openKey = null;
+    /** Bumped per open/close — a lazy content resolving after its popup went away is dropped. */
+    this.generation = 0;
+    const doc = deps.plot.ownerDocument;
+    injectStyles(CALLOUT_STYLE_ID, CALLOUT_CSS, doc);
+    injectStyles(MARKS_STYLE_ID, MARKS_CSS, doc);
+    this.anchor = doc.createElement("div");
+    this.anchor.className = "vela-marks-anchor";
+    Object.assign(this.anchor.style, { position: "absolute", pointerEvents: "none", left: "0", top: "0", width: "0", height: "0" });
+    deps.plot.appendChild(this.anchor);
+  }
+  /** The cluster key the open popup belongs to, or null. */
+  get key() {
+    return this.openKey;
+  }
+  open(cluster, rect) {
+    this.close();
+    this.place(rect);
+    const gen = ++this.generation;
+    this.openKey = cluster.key;
+    this.pop = new Popover({
+      trigger: this.anchor,
+      host: this.deps.host(),
+      theme: this.deps.theme(),
+      gap: 8,
+      align: "center",
+      // centered on the glyph
+      fadeMs: 120,
+      // a short, discreet fade in and out
+      className: "vela-marks-pop",
+      content: (body) => this.build(body, cluster, gen),
+      onClose: () => {
+        if (this.generation === gen) {
+          this.openKey = null;
+          this.pop = null;
+          this.deps.onOpenChange?.(null);
+        }
+      }
+    });
+    this.pop.show();
+    this.deps.onOpenChange?.(cluster.key);
+  }
+  /** Follow the anchor glyph after a repaint; `null` (glyph gone — hidden, scrolled off, marks replaced) closes. */
+  track(rect) {
+    if (!this.pop) return;
+    if (!rect) {
+      this.close();
+      return;
+    }
+    this.place(rect);
+    this.pop.reposition();
+  }
+  close() {
+    const pop = this.pop;
+    const wasOpen = this.openKey !== null;
+    this.pop = null;
+    this.openKey = null;
+    this.generation++;
+    pop?.destroy();
+    if (wasOpen) this.deps.onOpenChange?.(null);
+  }
+  destroy() {
+    this.close();
+    this.anchor.remove();
+  }
+  place(rect) {
+    Object.assign(this.anchor.style, {
+      left: `${rect.x - rect.size / 2}px`,
+      top: `${rect.y - rect.size / 2}px`,
+      width: `${rect.size}px`,
+      height: `${rect.size}px`
+    });
+  }
+  build(body, cluster, gen) {
+    const doc = body.ownerDocument;
+    const root = doc.createElement("div");
+    root.className = "vela-callout-panel vela-marks-panel";
+    const pending = [];
+    for (const mark of cluster.marks) {
+      const section = doc.createElement("section");
+      section.className = "vela-marks-section";
+      if (mark.title) {
+        const title = doc.createElement("div");
+        title.className = "vela-callout-title";
+        title.textContent = mark.title;
+        section.appendChild(title);
+      }
+      const content = mark.content;
+      if (typeof content === "function") {
+        const slot = doc.createElement("div");
+        slot.className = "vela-marks-loading";
+        slot.textContent = "Loading\u2026";
+        section.appendChild(slot);
+        pending.push({ el: section, resolve: () => this.resolveLazy(content, slot, gen) });
+      } else if (content !== void 0) {
+        this.renderContent(section, content);
+      }
+      if (section.childElementCount > 0) root.appendChild(section);
+    }
+    body.appendChild(root);
+    if (pending.length > 0) scheduleLazy(root, pending);
+  }
+  resolveLazy(source, slot, gen) {
+    let result;
+    try {
+      result = Promise.resolve(source());
+    } catch (err) {
+      result = Promise.reject(err instanceof Error ? err : new Error(String(err)));
+    }
+    void result.then(
+      (content) => {
+        if (gen !== this.generation) return;
+        const section = slot.parentElement;
+        if (!section) return;
+        slot.remove();
+        this.renderContent(section, content);
+        this.pop?.reposition();
+      },
+      () => {
+        if (gen !== this.generation) return;
+        slot.className = "vela-marks-error";
+        slot.textContent = "Couldn\u2019t load this entry.";
+      }
+    );
+  }
+  renderContent(section, content) {
+    const doc = section.ownerDocument;
+    if (!content || typeof content !== "object") return;
+    if ("text" in content) {
+      const text = doc.createElement("div");
+      text.className = "vela-callout-text";
+      text.textContent = String(content.text);
+      section.appendChild(text);
+      return;
+    }
+    if ("html" in content) {
+      const html = doc.createElement("div");
+      html.className = "vela-marks-html";
+      html.appendChild(sanitizeHtml(String(content.html), doc));
+      section.appendChild(html);
+      return;
+    }
+    if ("panel" in content && content.panel && Array.isArray(content.panel.items)) {
+      let actions = null;
+      for (const item of content.panel.items) {
+        if (!item || typeof item !== "object") continue;
+        if (item.type === "button") {
+          if (!actions) {
+            actions = doc.createElement("div");
+            actions.className = "vela-callout-actions";
+            section.appendChild(actions);
+          }
+          const btn2 = doc.createElement("button");
+          btn2.type = "button";
+          btn2.className = "vela-callout-btn" + (item.primary ? " vela-callout-btn-primary" : "");
+          btn2.textContent = item.label;
+          btn2.addEventListener("click", () => {
+            item.run();
+            if (item.close !== false) this.close();
+          });
+          actions.appendChild(btn2);
+          continue;
+        }
+        actions = null;
+        if (item.type === "text") {
+          const text = doc.createElement("div");
+          text.className = "vela-callout-text";
+          text.textContent = item.text;
+          section.appendChild(text);
+        } else if (item.type === "field") {
+          const row = doc.createElement("div");
+          row.className = "vela-marks-field";
+          const label = doc.createElement("span");
+          label.className = "vela-marks-field-label";
+          label.textContent = item.label;
+          const value = doc.createElement("span");
+          value.className = "vela-marks-field-value";
+          value.textContent = item.value;
+          row.append(label, value);
+          section.appendChild(row);
+        }
+      }
+    }
+  }
+};
+function scheduleLazy(scroller, pending) {
+  if (typeof IntersectionObserver === "undefined") {
+    for (const p of pending) p.resolve();
+    return;
+  }
+  const io = new IntersectionObserver(
+    (entries) => {
+      for (const e of entries) {
+        if (!e.isIntersecting) continue;
+        const p = pending.find((q) => q.el === e.target);
+        if (!p) continue;
+        io.unobserve(e.target);
+        p.resolve();
+      }
+    },
+    { root: scroller }
+  );
+  for (const p of pending) io.observe(p.el);
+}
+
 // src/renderers/native/core/manualScale.ts
 function rescaleAround(start, factor) {
   if (start.log && start.min > 0 && start.max > start.min) {
@@ -27929,11 +29079,12 @@ var SCROLL_BTN_BOTTOM = TIME_AXIS_H + 14;
 var SCROLL_BTN_PROXIMITY_PX = 120;
 var MIN_VISIBLE_BARS = 2;
 var ZOOM_OUT_MARGIN_BARS = 6;
-var ZOOM_TAU_MS = 70;
-var SCALE_TAU_MS = 80;
-var FLING_TAU_MS = 110;
-var SCROLL_TO_TAU_MS = 130;
+var INTRO_MODEL_FADE_MS = 350;
 var FLING_STOP_PX = 0.02;
+var MARK_FLASH_MS = 220;
+function frameNow() {
+  return typeof performance !== "undefined" ? performance.now() : Date.now();
+}
 var PRICE_SCALE_K = 4e-3;
 var KEY_ZOOM_STEP = 0.2;
 var SEPARATOR_HIT_PX = 4;
@@ -27982,9 +29133,20 @@ var NativeRenderer = class {
     this.indicatorSlices = new IndicatorDrawingSlices();
     /** Hover tooltips for Pine labels (canvas hit-rects collected by the chrome layer). */
     this.labelTooltip = null;
+    /** The timeline-mark popup (a kit Popover anchored on a lane glyph); null before mount. */
+    this.markPopover = null;
+    /** How the fanned mark stack was opened: a hover folds when the pointer leaves, a tap only on a tap elsewhere. */
+    this.marksExpandedBy = "hover";
+    /** The rAF loop keeping the chrome repainting while a lane glyph pulses (hover) or flashes (click); null when idle. */
+    this.markPulseRaf = null;
+    this.markClickCbs = /* @__PURE__ */ new Set();
     this.crosshairLayer = new CrosshairRenderer();
-    /** 1 Hz repaint pump so the price-axis countdown-to-bar-close ticks; null when off. */
-    this.countdownTimer = null;
+    /** The second pulse the countdown-to-bar-close chip ticks on: the host's (`setWallClock`)
+     *  when one is wired, else the renderer's own second-aligned clock. */
+    this.hostClock = null;
+    this.ownClock = null;
+    /** Live subscription to the pulse while the countdown is on; null when off. */
+    this.countdownUnsub = null;
     this.symbolPicker = null;
     /** Indicator titles (the legend rows) shown — held here so a remount re-applies it. */
     this.indicatorTitlesOn = true;
@@ -28002,19 +29164,25 @@ var NativeRenderer = class {
     /** Drawings layer self-serves Ctrl+Z/Y (see the `historyChords` feature). */
     this.historyChordsEnabled = true;
     this.liveRegion = null;
-    // ── animation state (eased zoom + inertial pan + live-bar glide) ──
-    this.animZoom = true;
-    this.animPan = true;
-    this.animLiveBarMs = 0;
-    // forming-bar OHLC glide time-constant; 0 = each tick snaps
-    this.animLiveBarOnMs = LIVE_BAR_EASE_DEFAULT_MS;
-    // the duration the settings-dialog on/off toggle restores (last non-zero value configured)
+    // ── animation state: one ease time-constant per motion (0 = off), each remembering the
+    // host's duration so the config's on/off switches restore it (see EaseSetting) ──
+    this.animZoom = new EaseSetting(ZOOM_EASE_DEFAULT_MS);
+    // wheel-zoom glide
+    this.animPan = new EaseSetting(PAN_INERTIA_DEFAULT_MS);
+    // inertial-pan velocity decay
+    this.animScroll = new EaseSetting(SCROLL_EASE_DEFAULT_MS);
+    // scroll-to-latest / panBy glide
+    this.animAutoscale = new EaseSetting(AUTOSCALE_EASE_DEFAULT_MS);
+    // autoscale glide during zoom/fling
+    this.animLiveBar = new EaseSetting(LIVE_BAR_EASE_DEFAULT_MS, 0);
+    // forming-bar OHLC glide; ships off
     // Brand default candles.
     this.candleUp = BULLISH;
     this.candleDown = BEARISH;
     // ── intro reveal (plays once when candles first appear) ──
-    this.introStyle = "settle";
-    // 'grow' | 'settle' | '' (off)
+    this.intro = { style: "settle", duration: INTRO_DURATION_DEFAULT_MS };
+    this.introOnStyle = "settle";
+    // the style the config's on/off switch restores
     this.introPlayed = false;
     this.introRaf = null;
     /** The load affordance (three pulsing dots) — up while the host reports a bar load in
@@ -28133,7 +29301,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", "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", "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"];
     /** 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) => {
@@ -28165,9 +29333,12 @@ var NativeRenderer = class {
       this.scene.showPriceLine = opts.currentPriceLine;
       this.scene.logScale = opts.logScale;
       this.backendMode = opts.nativeBackend;
-      this.animZoom = opts.animZoom;
-      this.animPan = opts.animPan;
-      this.setLiveBarEase(resolveLiveBarEaseMs(opts.animLiveBar));
+      this.animZoom.set(opts.animZoom);
+      this.animPan.set(opts.animPan);
+      this.animScroll.set(opts.animScroll);
+      this.animAutoscale.set(opts.animAutoscale);
+      this.animLiveBar.set(opts.animLiveBar);
+      this.setIntro(opts.animIntro);
       this.glowAmount = opts.glow;
       this.candleUp = opts.upColor;
       this.candleDown = opts.downColor;
@@ -28211,20 +29382,29 @@ var NativeRenderer = class {
         if (this.backend && "glow" in this.backend) this.backend.glow = this.glowAmount;
         break;
       case "animZoom":
-        this.animZoom = Boolean(value);
+        this.animZoom.set(resolveEaseMs(value, ZOOM_EASE_DEFAULT_MS));
         return;
       // affects the next interaction only — nothing to repaint
-      case "animPan":
-        this.animPan = Boolean(value);
+      case "animPan": {
+        const ms = resolveEaseMs(value, PAN_INERTIA_DEFAULT_MS);
+        this.animPan.set(ms);
+        this.animScroll.toggle(ms > 0);
+        return;
+      }
+      case "animScroll":
+        this.animScroll.set(resolveEaseMs(value, SCROLL_EASE_DEFAULT_MS));
+        return;
+      case "animAutoscale":
+        this.animAutoscale.set(resolveEaseMs(value, AUTOSCALE_EASE_DEFAULT_MS));
         return;
+      // a glide in flight finishes at the new rate (or snaps at 0)
       case "animLiveBar":
-        this.setLiveBarEase(resolveLiveBarEaseMs(value));
+        this.animLiveBar.set(resolveLiveBarEaseMs(value));
         return;
       // affects the next tick only; a glide in flight finishes at the new rate (or snaps at 0)
       case "intro": {
-        const s = value === false || value === "none" || value === "off" || value == null ? "" : String(value);
-        this.introStyle = s;
-        if (s) this.playIntro(s);
+        this.setIntro(resolveIntro(value));
+        if (this.intro.style) this.playIntro();
         return;
       }
       case "zoomAnchor":
@@ -28296,6 +29476,10 @@ var NativeRenderer = class {
       case "tradeMarkers":
         this.scene.tradeMarkers = mergeTradeMarkersState(this.scene.tradeMarkers, value);
         break;
+      case "marks":
+        this.scene.marks = mergeMarksState(this.scene.marks, value);
+        this.markPopover?.close();
+        break;
       case "keyboard":
         this.setKeyboardEnabled(Boolean(value));
         return;
@@ -28354,13 +29538,17 @@ var NativeRenderer = class {
       case "glow":
         return this.glowAmount;
       case "animZoom":
-        return this.animZoom;
+        return this.animZoom.tau;
       case "animPan":
-        return this.animPan;
+        return this.animPan.tau;
+      case "animScroll":
+        return this.animScroll.tau;
+      case "animAutoscale":
+        return this.animAutoscale.tau;
       case "animLiveBar":
-        return this.animLiveBarMs;
+        return this.animLiveBar.tau;
       case "intro":
-        return this.introStyle;
+        return this.intro.style;
       case "zoomAnchor":
         return this.zoomAnchorMode;
       case "axisDrag":
@@ -28403,6 +29591,8 @@ var NativeRenderer = class {
       }
       case "tradeMarkers":
         return { ...this.scene.tradeMarkers, colors: { ...this.scene.tradeMarkers.colors } };
+      case "marks":
+        return { visible: this.scene.marks.visible, groups: { ...this.scene.marks.groups } };
       case "keyboard":
         return this.keyboardEnabled;
       case "historyChords":
@@ -28528,7 +29718,13 @@ var NativeRenderer = class {
         currentPriceLine: this.scene.showPriceLine,
         priceLabel: this.scene.showPriceLabel,
         countdown: this.scene.showCountdown,
-        animateLastPrice: this.animLiveBarMs > 0
+        animateLastPrice: this.animLiveBar.on
+      },
+      animations: {
+        zoom: this.animZoom.on,
+        pan: this.animPan.on,
+        autoscale: this.animAutoscale.on,
+        intro: this.intro.style !== false
       },
       panes: { separatorColor: s.separatorColor ?? t.borderColor },
       trades: {
@@ -28540,6 +29736,7 @@ var NativeRenderer = class {
         exitColor: this.scene.tradeMarkers.colors.exit
       },
       timeScale: { timezone: this.scene.timezone },
+      marks: { visible: this.scene.marks.visible, groups: { ...this.scene.marks.groups } },
       candles: {
         upColor: this.candleUp,
         downColor: this.candleDown,
@@ -28635,7 +29832,12 @@ var NativeRenderer = class {
     this.scene.showPriceLabel = next.priceScale.priceLabel;
     this.scene.showCountdown = next.priceScale.countdown;
     this.syncCountdownTimer();
-    this.animLiveBarMs = next.priceScale.animateLastPrice ? this.animLiveBarOnMs : 0;
+    this.animLiveBar.toggle(next.priceScale.animateLastPrice);
+    this.animZoom.toggle(next.animations.zoom);
+    this.animPan.toggle(next.animations.pan);
+    this.animScroll.toggle(next.animations.pan);
+    this.animAutoscale.toggle(next.animations.autoscale);
+    this.intro = { style: next.animations.intro ? this.introOnStyle : false, duration: this.intro.duration || INTRO_DURATION_DEFAULT_MS };
     s.separatorColor = keepInherit(s.separatorColor, next.panes.separatorColor, prevTheme.borderColor);
     this.scene.tradeMarkers = {
       visible: next.trades.visible,
@@ -28644,6 +29846,7 @@ var NativeRenderer = class {
       colors: { long: next.trades.longColor, short: next.trades.shortColor, exit: next.trades.exitColor }
     };
     this.scene.timezone = next.timeScale.timezone;
+    this.scene.marks = { visible: next.marks.visible, groups: { ...next.marks.groups } };
     this.candleUp = next.candles.upColor;
     this.candleDown = next.candles.downColor;
     s.candle = {
@@ -28776,6 +29979,7 @@ var NativeRenderer = class {
     }
     this.settingsDialog.setTheme(this.theme);
     this.settingsDialog.setHostSections(this.hostSettingsSections);
+    this.settingsDialog.setMarkGroups(this.markGroupsInUse(), (id) => markGroupVisible(this.scene.marks, id, this.scene.markGroups));
     this.settingsDialog.setHiddenSettings(this.hiddenSettings);
     this.syncThemeControl();
     this.settingsDialog.toggle(
@@ -28866,10 +30070,10 @@ var NativeRenderer = class {
     this.glideRightOffset(ZOOM_OUT_MARGIN_BARS);
   }
   /** Ease rightOffset to `target` at constant zoom (see animTick's scroll glide);
-   *  instant when pan animation is off. Shared by scroll-to-latest and panBy. */
+   *  instant when the scroll glide is off. Shared by scroll-to-latest and panBy. */
   glideRightOffset(target) {
     const vp = this.coords.getViewport();
-    if (!this.animPan) {
+    if (!this.animScroll.on) {
       this.applyViewport({ barSpacing: vp.barSpacing, rightOffset: target });
       return;
     }
@@ -28934,20 +30138,21 @@ var NativeRenderer = class {
    * full size, eased, with a left→right stagger so the chart draws itself; `settle`
    * adds an ease-out-back overshoot. Autoscale stays on the real bars so the frame
    * never moves. Re-callable, so styles can be compared live from the console.
+   * Style and sweep duration come from the resolved `intro` setting.
    */
-  playIntro(style) {
+  playIntro() {
     if (this.introRaf != null) cancelAnimationFrame(this.introRaf);
     this.introRaf = null;
+    const { style, duration } = this.intro;
     const real = this.bars;
     const n = real.length;
-    if (n === 0) return;
+    if (n === 0 || !style) return;
     this.computeScales();
     for (const pane of this.scene.panes.values()) pane.scale = { ...pane.scaleTarget };
     this.modelAlpha = 0;
-    const DURATION = 650;
     const start = performance.now();
     const step = (now) => {
-      const p = Math.min(1, (now - start) / DURATION);
+      const p = Math.min(1, (now - start) / duration);
       this.scene.bars = p >= 1 ? real : real.map((b, i) => this.revealCandle(b, i, p, n, style));
       this.paintData();
       if (p < 1) {
@@ -28961,10 +30166,10 @@ var NativeRenderer = class {
   }
   /** After the candle reveal, fade the indicator models (series/fills/…) from hidden to full. */
   fadeInModels() {
-    const FADE = 350;
+    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);
+      this.modelAlpha = Math.min(1, (now - start) / fade);
       this.paintData();
       if (this.modelAlpha < 1) {
         this.introRaf = requestAnimationFrame(step);
@@ -29079,7 +30284,8 @@ var NativeRenderer = class {
       zoomTo: (target, anchorLogical, anchorX) => this.zoomTo(target, anchorLogical, anchorX),
       fling: (v) => this.fling(v),
       onPointerMove: (x, y) => this.handlePointerMove(x, y),
-      onClick: (x) => {
+      onClick: (x, y) => {
+        if (this.handleMarkClick(x, y)) return;
         this.userDrawings?.deselect();
         this.handleClick(x);
       },
@@ -29108,7 +30314,7 @@ var NativeRenderer = class {
       drawingsPointerDown: (x, y, snap, shift2, mod) => this.userDrawings?.pointerDown(x, y, snap, shift2, mod),
       drawingsPointerMove: (x, y, snap, shift2, mod) => this.userDrawings?.pointerMove(x, y, snap, shift2, mod),
       drawingsPointerUp: (x, y, snap) => this.userDrawings?.pointerUp(x, y, snap),
-      drawingsCursor: (x, y) => this.userDrawings?.cursorAt(x, y) ?? null,
+      drawingsCursor: (x, y) => this.userDrawings?.cursorAt(x, y) ?? (this.chrome.markGlyphAt(x, y) ? "pointer" : null),
       drawingsDblClick: (x, y) => this.userDrawings?.dblClick(x, y) ?? false,
       drawingsClearTransient: () => this.userDrawings?.clearTransient()
     });
@@ -29124,8 +30330,18 @@ var NativeRenderer = class {
     this.plot.addEventListener("pointerleave", this.onScrollProximityLeave);
     this.labelTooltip = new LabelTooltip(this.plot, {
       theme: () => this.chromeTheme(),
-      lookup: (x, y) => this.indicatorSlices.labelTooltipAt(x, y)
+      lookup: (x, y) => this.indicatorSlices.labelTooltipAt(x, y) ?? this.chrome.markTooltipAt(x, y, this.markGroupsInUse())
     });
+    this.markPopover = new MarkPopover({
+      plot: this.plot,
+      host: () => this.dialogHost ?? this.plot,
+      theme: () => this.chromeTheme(),
+      onOpenChange: (key) => {
+        this.scene.marksActiveKey = key;
+        this.scheduler?.invalidate(2 /* Chrome */);
+      }
+    });
+    this.chrome.setMarkIconReady(() => this.scheduler?.invalidate(2 /* Chrome */));
     this.userDrawings = new UserDrawingController(this.wrapper, this.plot, this.drawingsCanvas, {
       projector: () => this.drawingProjector(),
       dpr: () => this.coords.dpr,
@@ -29340,29 +30556,40 @@ var NativeRenderer = class {
   resize() {
     this.syncSize();
   }
-  /** Run a 1 Hz repaint pump while the countdown chip is on (so it ticks); stop it otherwise.
-   *  Chrome tier: only the chip's wall-clock text moves — an idle chart must not recompute
+  /** Drive the countdown chip from the host's second pulse (`null` → the renderer's own). */
+  setWallClock(clock) {
+    if (clock === this.hostClock) return;
+    this.hostClock = clock;
+    if (this.countdownUnsub != null) {
+      this.countdownUnsub();
+      this.countdownUnsub = null;
+    }
+    this.syncCountdownTimer();
+  }
+  /** Subscribe to the second pulse while the countdown chip is on (so it ticks); unsubscribe
+   *  otherwise. Chrome tier: only the chip's text moves — an idle chart must not recompute
    *  scales or repaint the geometry/volume/VPVR/SDK layers once a second (that cost
    *  multiplies by the cell count in a multi-chart workspace). */
   syncCountdownTimer() {
     if (this.scene.showCountdown) {
-      if (this.countdownTimer == null) {
-        this.countdownTimer = setInterval(() => {
+      if (this.countdownUnsub == null) {
+        const clock = this.hostClock ?? (this.ownClock ?? (this.ownClock = new SecondClock()));
+        this.countdownUnsub = clock.onTick(() => {
           if (this.scene.showCountdown && this.scene.bars.length > 0) this.scheduler?.invalidate(2 /* Chrome */);
-        }, 1e3);
+        });
       }
-    } else if (this.countdownTimer != null) {
-      clearInterval(this.countdownTimer);
-      this.countdownTimer = null;
+    } else if (this.countdownUnsub != null) {
+      this.countdownUnsub();
+      this.countdownUnsub = null;
     }
   }
   destroy() {
     if (this.introRaf != null) cancelAnimationFrame(this.introRaf);
     this.loadingEl?.remove();
     this.loadingEl = null;
-    if (this.countdownTimer != null) {
-      clearInterval(this.countdownTimer);
-      this.countdownTimer = null;
+    if (this.countdownUnsub != null) {
+      this.countdownUnsub();
+      this.countdownUnsub = null;
     }
     this.scheduler?.destroy();
     this.animator?.stop();
@@ -29387,6 +30614,11 @@ var NativeRenderer = class {
     this.plot?.removeEventListener("pointerleave", this.onScrollProximityLeave);
     this.labelTooltip?.destroy();
     this.labelTooltip = null;
+    this.markPopover?.destroy();
+    this.markPopover = null;
+    this.chrome.setMarkIconReady(null);
+    if (this.markPulseRaf !== null) cancelAnimationFrame(this.markPulseRaf);
+    this.markPulseRaf = null;
     this.scrollButton?.remove();
     this.scrollButton = null;
     for (const l of this.extLayers) l.instance.destroy?.();
@@ -29445,8 +30677,8 @@ var NativeRenderer = class {
     }
     if (!this.introPlayed && this.bars.length > 0) {
       this.introPlayed = true;
-      if (this.introStyle) {
-        this.playIntro(this.introStyle);
+      if (this.intro.style) {
+        this.playIntro();
         return;
       }
     }
@@ -29457,7 +30689,7 @@ var NativeRenderer = class {
     const last = this.bars[n - 1];
     if (last && bar.time === last.time) {
       this.bars[n - 1] = bar;
-      if (this.animLiveBarMs <= 0 || this.liveEaseTime !== bar.time) {
+      if (!this.animLiveBar.on || this.liveEaseTime !== bar.time) {
         this.syncLiveEase(bar);
       } else {
         this.animator.start();
@@ -29473,11 +30705,11 @@ var NativeRenderer = class {
     this.scene.bars = this.bars;
     this.scheduler.invalidate(4 /* Full */);
   }
-  /** Set the live-bar glide duration (0 = off). A non-zero value is also remembered as
-   *  what the config's on/off toggle (`priceScale.animateLastPrice`) switches back on to. */
-  setLiveBarEase(ms) {
-    this.animLiveBarMs = ms;
-    if (ms > 0) this.animLiveBarOnMs = ms;
+  /** Set the reveal (style + duration). A non-off style is also remembered as what the
+   *  config's on/off toggle (`animations.intro`) switches back on to. */
+  setIntro(next) {
+    this.intro = next;
+    if (next.style) this.introOnStyle = next.style;
   }
   /** Snap the eased forming-bar state to `bar` — no glide (a fresh bar or the first tick of one). */
   syncLiveEase(bar) {
@@ -29491,7 +30723,7 @@ var NativeRenderer = class {
     const target = this.bars[this.bars.length - 1];
     if (!target || this.liveEaseTime !== target.time) return false;
     const eps = Math.max(1e-9, Math.abs(target.close) * 1e-6);
-    const tau = this.animLiveBarMs;
+    const tau = this.animLiveBar.tau;
     const nh = easeToward(this.liveEaseHigh, target.high, dtMs, tau);
     const nl = easeToward(this.liveEaseLow, target.low, dtMs, tau);
     const nc = easeToward(this.liveEaseClose, target.close, dtMs, tau);
@@ -29631,10 +30863,12 @@ var NativeRenderer = class {
     this.refreshAnchorOffset(model);
     if (model.native && this.extLayers.some((l) => l.def.id === model.native.type)) this.scene.assignIndicatorZTop(model.id);
     else this.scene.assignIndicatorZ(model.id);
-    this.inputsUI.upsert(model.id, model.shorttitle ?? model.title, model.inputs, model.inputValues, model.paneId, {
-      native: !!model.native,
-      ...model.props ? { props: model.props, propValues: model.propValues ?? {} } : {}
-    });
+    if (model.legend !== false) {
+      this.inputsUI.upsert(model.id, model.shorttitle ?? model.title, model.inputs, model.inputValues, model.paneId, {
+        native: !!model.native,
+        ...model.props ? { props: model.props, propValues: model.propValues ?? {} } : {}
+      });
+    }
     if (model.native?.type === "volume") {
       this.volumeActive = true;
       this.volumeHidden = false;
@@ -29781,7 +31015,7 @@ var NativeRenderer = class {
     this.settingsDialog?.setHiddenSettings(this.hiddenSettings);
   }
   listSettingsIds() {
-    return settingsIdCatalog(this.hostSettingsSections);
+    return settingsIdCatalog(this.hostSettingsSections, this.markGroupsInUse());
   }
   onChartTypeSettingsChange(cb) {
     this.chartTypeSettingsCbs.add(cb);
@@ -29807,6 +31041,22 @@ var NativeRenderer = class {
     this.axisLongPressCbs.add(cb);
     return () => this.axisLongPressCbs.delete(cb);
   }
+  // ── timeline marks (the `chart.marks` model; see the port) ──
+  setTimelineMarks(marks, groups) {
+    this.scene.timelineMarks = marks;
+    this.scene.markGroups = groups;
+    this.scene.marksExpandedStack = null;
+    this.markPopover?.close();
+    this.scheduler?.invalidate(2 /* Chrome */);
+  }
+  onMarkClick(cb) {
+    this.markClickCbs.add(cb);
+    return () => this.markClickCbs.delete(cb);
+  }
+  /** Every group the lane knows: the defined ones, then those marks name without a definition. */
+  markGroupsInUse() {
+    return effectiveMarkGroups(this.scene.timelineMarks, this.scene.markGroups);
+  }
   onViewportChange(cb) {
     this.viewportCbs.add(cb);
     return () => this.viewportCbs.delete(cb);
@@ -29860,7 +31110,7 @@ var NativeRenderer = class {
     this.zoomAnchorX = anchorX;
     this.panVelocity = 0;
     this.scrollTargetRO = null;
-    if (!this.animZoom) {
+    if (!this.animZoom.on) {
       const v = this.clampViewport(barSpacing, this.anchoredRightOffset(barSpacing));
       this.coords.setViewport(v);
       this.targetBarSpacing = v.barSpacing;
@@ -29873,7 +31123,7 @@ var NativeRenderer = class {
   }
   /** Inertial pan: continue with a rightOffset velocity (logical units / ms) that decays. */
   fling(velocity) {
-    if (!this.animPan) return;
+    if (!this.animPan.on) return;
     this.scrollTargetRO = null;
     this.panVelocity = velocity;
     this.animator.start();
@@ -29913,7 +31163,7 @@ var NativeRenderer = class {
     let active = false;
     const tbs = this.targetBarSpacing;
     if (Math.abs(barSpacing - tbs) > tbs * 1e-3) {
-      barSpacing = clampBarSpacing(easeToward(barSpacing, tbs, dtMs, ZOOM_TAU_MS));
+      barSpacing = clampBarSpacing(easeToward(barSpacing, tbs, dtMs, this.animZoom.tau));
       rightOffset = this.anchoredRightOffset(barSpacing);
       active = true;
     } else if (barSpacing !== tbs) {
@@ -29923,13 +31173,14 @@ var NativeRenderer = class {
     const stopVel = FLING_STOP_PX / Math.max(1e-6, barSpacing * this.coords.spacingScale);
     if (Math.abs(this.panVelocity) > stopVel) {
       rightOffset += this.panVelocity * dtMs;
-      this.panVelocity *= Math.exp(-dtMs / FLING_TAU_MS);
+      const tau = this.animPan.tau;
+      this.panVelocity = tau > 0 ? this.panVelocity * Math.exp(-dtMs / tau) : 0;
       if (Math.abs(this.panVelocity) <= stopVel) this.panVelocity = 0;
       else active = true;
     }
     if (this.scrollTargetRO != null) {
       const target = this.scrollTargetRO;
-      const next = easeToward(rightOffset, target, dtMs, SCROLL_TO_TAU_MS);
+      const next = easeToward(rightOffset, target, dtMs, this.animScroll.tau);
       if (Math.abs(next - target) < 1e-3) {
         rightOffset = target;
         this.scrollTargetRO = null;
@@ -29957,6 +31208,7 @@ var NativeRenderer = class {
    *  through Math.log), not a non-linear jump. */
   easeScales(dtMs) {
     let moving = false;
+    const tau = this.animAutoscale.tau;
     for (const pane of this.scene.panes.values()) {
       const t = pane.scaleTarget;
       const s = pane.scale;
@@ -29964,8 +31216,8 @@ var NativeRenderer = class {
         const lt0 = Math.log(t.min);
         const lt1 = Math.log(t.max);
         const lspan = Math.max(1e-9, Math.abs(lt1 - lt0));
-        const n0 = easeToward(Math.log(s.min), lt0, dtMs, SCALE_TAU_MS);
-        const n1 = easeToward(Math.log(s.max), lt1, dtMs, SCALE_TAU_MS);
+        const n0 = easeToward(Math.log(s.min), lt0, dtMs, tau);
+        const n1 = easeToward(Math.log(s.max), lt1, dtMs, tau);
         if (Math.abs(n0 - lt0) <= lspan * 1e-3 && Math.abs(n1 - lt1) <= lspan * 1e-3) {
           pane.scale = { min: t.min, max: t.max, log: true };
         } else {
@@ -29975,8 +31227,8 @@ var NativeRenderer = class {
         continue;
       }
       const span = Math.max(1e-9, Math.abs(t.max - t.min));
-      let nmin = easeToward(s.min, t.min, dtMs, SCALE_TAU_MS);
-      let nmax = easeToward(s.max, t.max, dtMs, SCALE_TAU_MS);
+      let nmin = easeToward(s.min, t.min, dtMs, tau);
+      let nmax = easeToward(s.max, t.max, dtMs, tau);
       if (Math.abs(nmin - t.min) <= span * 1e-3 && Math.abs(nmax - t.max) <= span * 1e-3) {
         nmin = t.min;
         nmax = t.max;
@@ -29989,8 +31241,8 @@ var NativeRenderer = class {
       const t = sl.scaleTarget;
       const s = sl.scale;
       const span = Math.max(1e-9, Math.abs(t.max - t.min));
-      let nmin = easeToward(s.min, t.min, dtMs, SCALE_TAU_MS);
-      let nmax = easeToward(s.max, t.max, dtMs, SCALE_TAU_MS);
+      let nmin = easeToward(s.min, t.min, dtMs, tau);
+      let nmax = easeToward(s.max, t.max, dtMs, tau);
       if (Math.abs(nmin - t.min) <= span * 1e-3 && Math.abs(nmax - t.max) <= span * 1e-3) {
         nmin = t.min;
         nmax = t.max;
@@ -30011,6 +31263,8 @@ var NativeRenderer = class {
       this.scene.crosshair = null;
       this.hoverSeparatorY = null;
       this.lastPointer = null;
+      if (this.marksExpandedBy === "hover") this.setMarksExpanded(null);
+      this.setMarkHover(null);
       this.scheduler.invalidate(1 /* Cursor */);
       this.hoverLogical = null;
       const empty = { time: null, price: null, paneKind: null, values: /* @__PURE__ */ new Map(), ohlc: null };
@@ -30022,6 +31276,8 @@ var NativeRenderer = class {
     this.lastPointer = inData ? { x, y } : null;
     this.hoverSeparatorY = x >= 0 && y >= 0 && y <= this.coords.height ? this.separatorHoverY(y) : null;
     this.scheduler.invalidate(1 /* Cursor */);
+    this.setMarksExpanded(inData ? this.chrome.markStackAt(x, y) : null);
+    this.setMarkHover(inData ? this.chrome.markGlyphAt(x, y)?.cluster.key ?? null : null);
     const logical = Math.round(this.coords.xToLogical(x));
     const onBar = logical >= 0 && logical < this.coords.barCount;
     const time = onBar ? this.coords.logicalToTime(logical) : null;
@@ -30051,6 +31307,76 @@ var NativeRenderer = class {
     const onBar = logical >= 0 && logical < this.coords.barCount;
     for (const cb of this.clickCbs) cb({ time: onBar ? this.coords.logicalToTime(logical) : null, price: null });
   }
+  /**
+   * Fan out (or collapse, with null) a multi-group mark stack; repaints the chrome tier when
+   * it changes. A stack whose glyph holds the open popup stays fanned — the pointer leaving
+   * the plot for the popup must not bury the glyph under the deck (which would close it).
+   */
+  setMarksExpanded(stack, by = "hover") {
+    if (this.scene.marksExpandedStack === stack) return;
+    if (stack === null && this.markPopover?.key) {
+      const open2 = this.chrome.markGlyphByKey(this.markPopover.key);
+      if (open2 && open2.stack === this.scene.marksExpandedStack) return;
+    }
+    this.scene.marksExpandedStack = stack;
+    this.marksExpandedBy = by;
+    this.scheduler?.invalidate(2 /* Chrome */);
+  }
+  /**
+   * A click on the mark lane: a collapsed deck fans out (the touch path — a mouse already
+   * fanned it by hovering), a glyph reports its cluster (`onMarkClick`) and opens the popup
+   * when any of its marks carries content. True when the click landed on the lane.
+   */
+  handleMarkClick(x, y) {
+    const glyph = this.chrome.markGlyphAt(x, y);
+    if (!glyph) {
+      if (this.scene.marksExpandedStack !== null && this.chrome.markStackAt(x, y) === null) this.setMarksExpanded(null);
+      return false;
+    }
+    if (glyph.decked) {
+      this.setMarksExpanded(glyph.stack, "tap");
+      return true;
+    }
+    const marks = glyph.cluster.marks;
+    const first = marks[0];
+    const event = { id: first.id, ids: marks.map((m) => m.id), time: first.time, ...glyph.cluster.group !== void 0 ? { group: glyph.cluster.group } : {} };
+    for (const cb of this.markClickCbs) cb(event);
+    if (marks.some((m) => m.content !== void 0)) {
+      this.markPopover?.open(glyph.cluster, { x: glyph.x, y: glyph.y, size: glyph.size });
+    } else {
+      this.scene.marksFlash = { key: glyph.cluster.key, until: frameNow() + MARK_FLASH_MS };
+      this.syncMarkPulse();
+    }
+    return true;
+  }
+  /** After a chrome frame: keep the open mark popup on its glyph, or close it once the glyph is gone. */
+  trackMarkPopover() {
+    const key = this.markPopover?.key;
+    if (!key) return;
+    const g = this.chrome.markGlyphByKey(key);
+    this.markPopover.track(g && !(g.decked && g.depth !== 0) ? { x: g.x, y: g.y, size: g.size } : null);
+  }
+  /** The lane glyph under the pointer — it swells once as the pointer lands (a rAF-driven chrome repaint for the pulse's duration). */
+  setMarkHover(key) {
+    if (this.scene.marksHoverKey === key) return;
+    this.scene.marksHoverKey = key;
+    this.scene.marksHoverSince = frameNow();
+    this.scheduler?.invalidate(2 /* Chrome */);
+    this.syncMarkPulse();
+  }
+  /** Run a chrome-tier repaint loop while a glyph's hover pulse or click flash plays; it stops itself once both are over. */
+  syncMarkPulse() {
+    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;
+      this.scheduler?.invalidate(2 /* Chrome */);
+      const pulsing = this.scene.marksHoverKey !== null && now - this.scene.marksHoverSince < MARK_PULSE_MS;
+      if (pulsing || this.scene.marksFlash !== null) this.markPulseRaf = requestAnimationFrame(tick);
+    };
+    this.markPulseRaf = requestAnimationFrame(tick);
+  }
   paneAtY(y) {
     return this.paneNodeAtY(y);
   }
@@ -30442,6 +31768,7 @@ var NativeRenderer = class {
     } else if (repaintsChrome(level) && this.paintedData) {
       this.chrome.prepare(this.scene, this.coords, this.theme);
       this.chrome.render(this.scene, this.coords, this.theme, this.axisSurface());
+      this.trackMarkPopover();
     }
     this.crosshairLayer.render(this.scene, this.coords, this.theme, this.hoverSeparatorY, this.externalCrossPx());
     if (!repaintsData(level) && this.paintedData) this.repaintCursorLayers();
@@ -30457,7 +31784,7 @@ var NativeRenderer = class {
       const lp = this.layerPane(l.def.id) ?? pane;
       if (lp.collapsed) continue;
       l.instance.render(this.extLayerArgs(l.def.id, lp.scale, lp.bounds, nowMs));
-      if (this.animZoom && l.instance.animating?.()) this.animator.start();
+      if (this.animZoom.on && l.instance.animating?.()) this.animator.start();
     }
   }
   /** Blank one SDK layer canvas (a collapsed host pane suppresses the layer's painting). */
@@ -30522,7 +31849,7 @@ var NativeRenderer = class {
         const args = this.extLayerArgs(l.def.id, lp.scale, lp.bounds, nowMs);
         l.instance.render(args);
         if (lp === pane) folded = foldBaseModulation(folded, l.instance.modulateBase?.(args) ?? null);
-        if (this.animZoom && l.instance.animating?.()) this.animator.start();
+        if (this.animZoom.on && l.instance.animating?.()) this.animator.start();
       }
       if (folded) {
         if (folded.candleBodyScale != null) this.backend.candleBodyScale = clamp012(folded.candleBodyScale) || 0.01;
@@ -30541,6 +31868,7 @@ var NativeRenderer = class {
     this.backdropRenderer.render(this.scene, this.coords, this.theme, gridAlpha);
     this.backend.render(this.scene, this.coords, this.theme);
     this.chrome.render(this.scene, this.coords, this.theme, this.axisSurface());
+    this.trackMarkPopover();
     this.userDrawings?.render();
     if (easeLive && liveActual) this.bars[li] = liveActual;
     this.paintedData = true;
@@ -31053,7 +32381,7 @@ var NativeRenderer = class {
     const map2 = /* @__PURE__ */ new Map();
     for (const pane of this.scene.panes.values()) {
       if (!pane.collapsed) continue;
-      const models = this.scene.orderedIndicatorsForPane(pane.id);
+      const models = this.scene.orderedIndicatorsForPane(pane.id).filter((m) => m.legend !== false);
       const merged = new Set(this.scene.ownScaleIndicatorsForPane(pane.id).map((m) => m.id));
       const master = models.find((m) => !merged.has(m.id)) ?? models[0];
       map2.set(pane.id, master?.id ?? null);
@@ -31331,6 +32659,8 @@ function volumeLayerData(inputs) {
 }
 var VolumeIndicator = class {
   constructor() {
+    /** Null until start() — pre-start setInputs/resume must record without pushing. */
+    this.ctx = null;
     this.inputs = {};
   }
   start(ctx, inputs) {
@@ -31347,13 +32677,13 @@ var VolumeIndicator = class {
   }
   setInputs(inputs) {
     this.inputs = inputs;
-    this.ctx.pushData(volumeLayerData(inputs));
+    this.ctx?.pushData(volumeLayerData(inputs));
   }
   /** Hiding is a renderer-layer flag (set via `setIndicatorVisible`); no resources to free. */
   suspend() {
   }
   resume() {
-    this.ctx.pushData(volumeLayerData(this.inputs));
+    this.ctx?.pushData(volumeLayerData(this.inputs));
   }
   stop() {
   }
@@ -31399,6 +32729,8 @@ function vpvrLayerData(inputs) {
 }
 var VpvrIndicator = class {
   constructor() {
+    /** Null until start() — pre-start setInputs/resume must record without pushing. */
+    this.ctx = null;
     this.inputs = {};
   }
   start(ctx, inputs) {
@@ -31415,13 +32747,13 @@ var VpvrIndicator = class {
   }
   setInputs(inputs) {
     this.inputs = inputs;
-    this.ctx.pushData(vpvrLayerData(inputs));
+    this.ctx?.pushData(vpvrLayerData(inputs));
   }
   /** Hiding is a renderer-layer flag (set via `setIndicatorVisible`); no resources to free. */
   suspend() {
   }
   resume() {
-    this.ctx.pushData(vpvrLayerData(this.inputs));
+    this.ctx?.pushData(vpvrLayerData(this.inputs));
   }
   stop() {
   }
@@ -33873,6 +35205,7 @@ var Vela = class {
     if (Object.keys(defaults2).length > 0) this.rendererControl.set(defaults2);
     this.panesControl = new PanesControl(this.orchestrator);
     this.drawingsControl = new DrawingsControl(this.orchestrator.drawings);
+    this.marksControl = new MarksControl(this.orchestrator.marks);
   }
   /**
    * Register a scripting engine so `addIndicator({ language })` can run that
@@ -34091,6 +35424,17 @@ var Vela = class {
   get drawings() {
     return this.drawingsControl;
   }
+  /**
+   * The chart's timeline-marks control surface: host events pinned to a bar and shown
+   * as glyphs on a lane above the time axis, each opening a popup on click —
+   * `chart.marks.add({ id, time, glyph, title, content })`, `chart.marks.set(list)`,
+   * `chart.marks.defineGroup({ id, label })`. Marks are data, not user state: re-supply
+   * them on `market:changed`. On a renderer without the `timelineMarks` capability the
+   * model still fills but nothing paints (`chart.marks.supported`).
+   */
+  get marks() {
+    return this.marksControl;
+  }
   on(event, handler) {
     return this.orchestrator.events.on(event, handler);
   }
@@ -34303,6 +35647,7 @@ exports.INFO = INFO;
 exports.INVALID = INVALID;
 exports.LIGHT_THEME = LIGHT_THEME;
 exports.MARKER = MARKER;
+exports.MarksControl = MarksControl;
 exports.MultiProviderFeed = MultiProviderFeed;
 exports.NEUTRAL = NEUTRAL;
 exports.NativeRenderer = NativeRenderer;
@@ -34314,6 +35659,7 @@ exports.SESSION_POST = SESSION_POST;
 exports.SESSION_PRE = SESSION_PRE;
 exports.SLATE = SLATE;
 exports.SLATE_DEEP = SLATE_DEEP;
+exports.SecondClock = SecondClock;
 exports.TRADE_EXIT = TRADE_EXIT;
 exports.TRADE_LONG = TRADE_LONG;
 exports.TRADE_SHORT = TRADE_SHORT;