@luxalgo/vela 0.6.21 → 0.7.0

package/dist/vela.global.js

@@ -2,19 +2,48 @@ var Vela = (function (exports) {
   'use strict';
 
   // 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)
     };
   }
 
@@ -7057,6 +7086,93 @@ var Vela = (function (exports) {
     }
   };
 
+  // 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) {
@@ -7735,6 +7851,7 @@ var Vela = (function (exports) {
         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);
@@ -8599,6 +8716,7 @@ var Vela = (function (exports) {
         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;
@@ -8686,6 +8804,7 @@ var Vela = (function (exports) {
       this.unresolvedUnsub = null;
       this.feed.destroy?.();
       this.drawings.destroy();
+      this.marks.destroy();
       this.renderer.destroy();
       this.events.clear();
     }
@@ -8799,6 +8918,7 @@ var Vela = (function (exports) {
         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 ?? [],
@@ -8821,9 +8941,17 @@ var Vela = (function (exports) {
      * 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,
@@ -8847,8 +8975,34 @@ var Vela = (function (exports) {
       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;
@@ -8883,6 +9037,7 @@ var Vela = (function (exports) {
       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({
@@ -9458,6 +9613,16 @@ var Vela = (function (exports) {
       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
@@ -10350,6 +10515,95 @@ var Vela = (function (exports) {
     }
   };
 
+  // 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();
@@ -17261,7 +17515,7 @@ ${STATIC_DECLS}
     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;
@@ -17333,6 +17587,8 @@ ${STATIC_DECLS}
       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;
@@ -17340,6 +17596,7 @@ ${STATIC_DECLS}
       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;
@@ -17363,11 +17620,21 @@ ${STATIC_DECLS}
         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;
@@ -17400,7 +17667,16 @@ ${STATIC_DECLS}
       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?.();
@@ -22796,6 +23072,8 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
     // 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
   };
@@ -23068,9 +23346,12 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
     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);
@@ -23117,6 +23398,12 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
         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
       },
@@ -23131,6 +23418,15 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
       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,
@@ -24649,6 +24945,31 @@ void main() {
       }
     }
   };
+  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));
@@ -25372,6 +25693,25 @@ void main() {
     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() {
@@ -25435,6 +25775,20 @@ void main() {
       /** 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. */
@@ -27283,6 +27637,315 @@ void main() {
     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 [or2, og, ob] = parseColor(over);
+      R = r * a + or2 * (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 last2 = barTimes[n - 1];
+    if (time >= last2 + intervalMs2) return n - 1 + Math.floor((time - last2) / 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 size3 = decked ? deckSize : cluster.marks.length > 1 ? MARK_CLUSTER_PX : MARK_GLYPH_PX;
+        let y;
+        if (expanded) {
+          y = bottom - size3 / 2;
+          bottom -= size3 + MARK_FAN_GAP;
+        } else {
+          y = input.axisY - MARK_LANE_INSET - size3 / 2 - depth * MARK_DECK_STEP;
+        }
+        placed.push({ cluster, x, y, size: size3, 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 first2 = cluster.marks[0];
+    if (!first2) return null;
+    if (cluster.marks.length === 1) return first2.tooltip ?? first2.title ?? null;
+    const label = cluster.group !== void 0 ? markGroupLabel(cluster.group, groups) : first2.title ?? first2.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 size3 = 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, size3);
+      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(size3 * 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(size3 * 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, size3) {
+    const r = size3 / 2;
+    ctx.beginPath();
+    switch (shape) {
+      case "square": {
+        const c = Math.min(3, r / 2);
+        roundedRect(ctx, x - r, y - r, size3, size3, 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() {
@@ -27292,11 +27955,40 @@ void main() {
       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({
@@ -27345,6 +28037,7 @@ void main() {
       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;
@@ -27358,6 +28051,46 @@ void main() {
       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;
@@ -27473,7 +28206,8 @@ void main() {
      *  - 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;
@@ -27493,17 +28227,16 @@ void main() {
         ctx.stroke();
         setDash2(ctx, "solid");
       }
-      const interval = coords.barInterval;
-      const showCountdown = scene.showCountdown && interval > 0;
+      const cdText = scene.showCountdown ? countdownText(last2.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, last2.close, percentScaleFor(scene, pricePane), scene.priceMintick);
-      const cdText = showCountdown ? formatCountdown(last2.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;
@@ -27516,7 +28249,7 @@ void main() {
         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);
@@ -27587,29 +28320,6 @@ void main() {
     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 [or2, og, ob] = parseColor(over);
-      R = r * a + or2 * (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;
@@ -27892,6 +28602,11 @@ void main() {
   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;
@@ -27985,7 +28700,11 @@ void main() {
     "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",
@@ -28011,8 +28730,13 @@ void main() {
     "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}`;
@@ -28052,7 +28776,7 @@ void main() {
     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;
@@ -28128,7 +28852,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 {
@@ -28143,6 +28875,9 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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. */
@@ -28167,6 +28902,11 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     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 next2 = new Set(ids);
@@ -28340,12 +29080,36 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       }
       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) => {
@@ -28415,6 +29179,13 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         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) {
@@ -34619,6 +35390,383 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     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_NODE2 = 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_NODE2) 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) {
@@ -35347,11 +36495,12 @@ ${overlayScrollbarCss(".vela-sd-pane")}
   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;
@@ -35400,9 +36549,20 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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;
@@ -35420,19 +36580,25 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       /** 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
@@ -35551,7 +36717,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.moveIndicatorCbs = /* @__PURE__ */ new Set();
       this.priceStyleCbs = /* @__PURE__ */ new Set();
       this.name = "native";
-      this.features = ["logScale", "currentPriceLine", "priceLabel", "countdown", "upColor", "downColor", "glow", "animZoom", "animPan", "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) => {
@@ -35583,9 +36749,12 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         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;
@@ -35629,20 +36798,29 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           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":
@@ -35714,6 +36892,10 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         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;
@@ -35772,13 +36954,17 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         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":
@@ -35821,6 +37007,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         }
         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":
@@ -35946,7 +37134,13 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           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: {
@@ -35958,6 +37152,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           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,
@@ -36053,7 +37248,12 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.scene.showPriceLabel = next2.priceScale.priceLabel;
       this.scene.showCountdown = next2.priceScale.countdown;
       this.syncCountdownTimer();
-      this.animLiveBarMs = next2.priceScale.animateLastPrice ? this.animLiveBarOnMs : 0;
+      this.animLiveBar.toggle(next2.priceScale.animateLastPrice);
+      this.animZoom.toggle(next2.animations.zoom);
+      this.animPan.toggle(next2.animations.pan);
+      this.animScroll.toggle(next2.animations.pan);
+      this.animAutoscale.toggle(next2.animations.autoscale);
+      this.intro = { style: next2.animations.intro ? this.introOnStyle : false, duration: this.intro.duration || INTRO_DURATION_DEFAULT_MS };
       s.separatorColor = keepInherit(s.separatorColor, next2.panes.separatorColor, prevTheme.borderColor);
       this.scene.tradeMarkers = {
         visible: next2.trades.visible,
@@ -36062,6 +37262,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         colors: { long: next2.trades.longColor, short: next2.trades.shortColor, exit: next2.trades.exitColor }
       };
       this.scene.timezone = next2.timeScale.timezone;
+      this.scene.marks = { visible: next2.marks.visible, groups: { ...next2.marks.groups } };
       this.candleUp = next2.candles.upColor;
       this.candleDown = next2.candles.downColor;
       s.candle = {
@@ -36194,6 +37395,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       }
       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(
@@ -36284,10 +37486,10 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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;
       }
@@ -36352,20 +37554,21 @@ ${overlayScrollbarCss(".vela-sd-pane")}
      * 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) {
@@ -36379,10 +37582,10 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     }
     /** 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);
@@ -36497,7 +37700,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         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);
         },
@@ -36526,7 +37730,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         drawingsPointerDown: (x, y, snap, shift4, mod) => this.userDrawings?.pointerDown(x, y, snap, shift4, mod),
         drawingsPointerMove: (x, y, snap, shift4, mod) => this.userDrawings?.pointerMove(x, y, snap, shift4, 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()
       });
@@ -36542,8 +37746,18 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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,
@@ -36758,29 +37972,40 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     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();
@@ -36805,6 +38030,11 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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?.();
@@ -36863,8 +38093,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       }
       if (!this.introPlayed && this.bars.length > 0) {
         this.introPlayed = true;
-        if (this.introStyle) {
-          this.playIntro(this.introStyle);
+        if (this.intro.style) {
+          this.playIntro();
           return;
         }
       }
@@ -36875,7 +38105,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       const last2 = this.bars[n - 1];
       if (last2 && bar.time === last2.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();
@@ -36891,11 +38121,11 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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(next2) {
+      this.intro = next2;
+      if (next2.style) this.introOnStyle = next2.style;
     }
     /** Snap the eased forming-bar state to `bar` — no glide (a fresh bar or the first tick of one). */
     syncLiveEase(bar) {
@@ -36909,7 +38139,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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);
@@ -37049,10 +38279,12 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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;
@@ -37199,7 +38431,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.settingsDialog?.setHiddenSettings(this.hiddenSettings);
     }
     listSettingsIds() {
-      return settingsIdCatalog(this.hostSettingsSections);
+      return settingsIdCatalog(this.hostSettingsSections, this.markGroupsInUse());
     }
     onChartTypeSettingsChange(cb) {
       this.chartTypeSettingsCbs.add(cb);
@@ -37225,6 +38457,22 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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);
@@ -37278,7 +38526,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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;
@@ -37291,7 +38539,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     }
     /** 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();
@@ -37331,7 +38579,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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) {
@@ -37341,13 +38589,14 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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 next2 = easeToward(rightOffset, target, dtMs, SCROLL_TO_TAU_MS);
+        const next2 = easeToward(rightOffset, target, dtMs, this.animScroll.tau);
         if (Math.abs(next2 - target) < 1e-3) {
           rightOffset = target;
           this.scrollTargetRO = null;
@@ -37375,6 +38624,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
      *  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;
@@ -37382,8 +38632,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           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 {
@@ -37393,8 +38643,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           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;
@@ -37407,8 +38657,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         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;
@@ -37429,6 +38679,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         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 };
@@ -37440,6 +38692,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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;
@@ -37469,6 +38723,76 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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 first2 = marks[0];
+      const event = { id: first2.id, ids: marks.map((m) => m.id), time: first2.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);
     }
@@ -37860,6 +39184,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       } 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();
@@ -37875,7 +39200,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         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). */
@@ -37940,7 +39265,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           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;
@@ -37959,6 +39284,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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;
@@ -38471,7 +39797,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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);
@@ -41295,6 +42621,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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
@@ -41513,6 +42840,17 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     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);
     }
@@ -42958,6 +44296,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
   exports.INVALID = INVALID;
   exports.LIGHT_THEME = LIGHT_THEME;
   exports.MARKER = MARKER;
+  exports.MarksControl = MarksControl;
   exports.MultiProviderFeed = MultiProviderFeed;
   exports.NEUTRAL = NEUTRAL;
   exports.NativeRenderer = NativeRenderer;
@@ -42969,6 +44308,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
   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;