@luxalgo/vela 0.8.1 → 0.8.3

package/dist/vela.global.js

@@ -214,7 +214,7 @@ var Vela = (function (exports) {
       this.controller.applyProps(this.id, values);
     }
     updateCode(source) {
-      this.controller.updateCode(this.id, source);
+      return this.controller.updateCode(this.id, source);
     }
     setVisible(visible) {
       this.controller.setVisible(this.id, visible);
@@ -617,6 +617,7 @@ var Vela = (function (exports) {
   registerIcon("plus", S('<path d="M8 2.8v10.4M2.8 8h10.4"/>'));
   registerIcon("minus", S('<path d="M2.8 8h10.4"/>'));
   registerIcon("maximize", S('<path d="M2.5 6V3a.5.5 0 0 1 .5-.5h3M10 2.5h3a.5.5 0 0 1 .5.5v3M13.5 10v3a.5.5 0 0 1-.5.5h-3M6 13.5H3a.5.5 0 0 1-.5-.5v-3"/>'));
+  registerIcon("restore", S('<path d="M6 2.5v3a.5.5 0 0 1-.5.5h-3M13.5 6h-3a.5.5 0 0 1-.5-.5v-3M10 13.5v-3a.5.5 0 0 1 .5-.5h3M2.5 10h3a.5.5 0 0 1 .5.5v3"/>'));
   registerIcon("restore", S('<path d="M6.2 2.5v3.7H2.5M9.8 13.5V9.8h3.7M13.5 6.2H9.8V2.5M2.5 9.8h3.7v3.7"/>'));
   registerIcon("star", S('<path d="M8 2.2l1.75 3.55 3.9.55-2.8 2.75.65 3.9L8 11.1l-3.5 1.85.65-3.9-2.8-2.75 3.9-.55z"/>'));
   registerIcon("star-filled", S('<path d="M8 2.2l1.75 3.55 3.9.55-2.8 2.75.65 3.9L8 11.1l-3.5 1.85.65-3.9-2.8-2.75 3.9-.55z"/>', 'fill="currentColor"'));
@@ -3275,6 +3276,10 @@ var Vela = (function (exports) {
 
   // src/core/drawings/types/FibLevels.ts
   var FibLevels = class extends FibRatios {
+    /** Price of a level for the two anchor prices; subclasses override to change which anchor ratio 0 sits on. */
+    levelPrice(ratio, p1, p2) {
+      return p1 + ratio * (p2 - p1);
+    }
     /** Per-level pixel line + price for the ENABLED levels, spanning the anchors' time range. */
     levelLines(proj) {
       const a = this.anchors[0];
@@ -3284,11 +3289,10 @@ var Vela = (function (exports) {
       const xb = proj.xOf(b.time);
       const x1 = Math.min(xa, xb);
       const x2 = Math.max(xa, xb);
-      const delta = b.price - a.price;
       const out = [];
       for (const lv of this.levels) {
         if (!lv.enabled) continue;
-        const price = a.price + lv.ratio * delta;
+        const price = this.levelPrice(lv.ratio, a.price, b.price);
         const y = proj.yOf(price, this.paneId);
         if (y == null) continue;
         out.push({ ratio: lv.ratio, color: lv.color, label: lv.label, price, x1, x2, y });
@@ -3328,8 +3332,7 @@ var Vela = (function (exports) {
       const a = this.anchors[0];
       const b = this.anchors[1];
       if (!a || !b) return null;
-      const delta = b.price - a.price;
-      const prices = this.levels.filter((l) => l.enabled).map((l) => a.price + l.ratio * delta);
+      const prices = this.levels.filter((l) => l.enabled).map((l) => this.levelPrice(l.ratio, a.price, b.price));
       if (prices.length === 0) return null;
       return { min: Math.min(...prices), max: Math.max(...prices) };
     }
@@ -3415,13 +3418,24 @@ var Vela = (function (exports) {
   // src/core/drawings/types/FibRetracement.ts
   var LEVELS = fibLevels([0, 0.236, 0.382, 0.5, 0.618, 0.786, 1]);
   var FibRetracement = class extends FibLevels {
-    constructor() {
-      super(...arguments);
+    constructor(init) {
+      super(init);
       this.type = "fibretracement";
+      if (this.reverse === void 0) this.reverse = false;
     }
     defaultLevels() {
       return LEVELS;
     }
+    levelPrice(ratio, p1, p2) {
+      return this.reverse ? p1 + ratio * (p2 - p1) : p2 + ratio * (p1 - p2);
+    }
+    writeProps() {
+      return { ...super.writeProps(), reverse: this.reverse };
+    }
+    readProps(props) {
+      super.readProps(props);
+      this.reverse = typeof props.reverse === "boolean" ? props.reverse : true;
+    }
   };
 
   // src/core/drawings/types/FibExtension.ts
@@ -7850,6 +7864,7 @@ var Vela = (function (exports) {
       this.activeEngineStyle = null;
       /** The chart's current price style (tracked from the renderer's change events + initial read). */
       this.priceStyle = "candles";
+      this.priceStyleWillChangeUnsub = null;
       this.unresolvedUnsub = null;
       /** Latest chart visible range (left/right bar times), fed to viewport-dependent scripts. */
       this.visibleRange = null;
@@ -7948,6 +7963,7 @@ var Vela = (function (exports) {
       this.renderer.onThemeSelect?.((name) => this.setTheme(resolveTheme(name)));
       this.viewportUnsub = this.renderer.onViewportChange((range) => this.onViewportChange(range));
       this.renderer.onPriceStyleChange?.((style) => this.syncPriceStyle(style));
+      this.priceStyleWillChangeUnsub = this.renderer.onPriceStyleWillChange?.((from, to) => this.events.emit("priceStyle:change", { from, to })) ?? null;
       const initialStyle = this.renderer.readFeature("priceStyle");
       if (typeof initialStyle === "string") this.priceStyle = initialStyle;
       this.barTransform = barTransformFor(initialStyle);
@@ -9234,20 +9250,26 @@ var Vela = (function (exports) {
     /**
      * IndicatorController: replace a SCRIPT indicator's source in place (see
      * {@link IndicatorHandle.updateCode}). Prepare-first: the running session keeps
-     * computing until the new source has compiled, so a broken edit costs the user
-     * nothing but an `error` event. Natives have no script — warn and leave them alone.
+     * computing until the new source has compiled; then the new code runs on TRIAL until
+     * its first model lands, and a failure before that puts the previous code back.
+     * Natives have no script — warn and leave them alone.
      */
     updateCode(id, source) {
       const record = this.registry.get(id);
       const handle = this.handles.get(id);
-      if (!record || !handle) return;
+      if (!record || !handle) return Promise.resolve({ ok: false, error: new Error(`[vela] updateCode("${id}") \u2014 the indicator is no longer on the chart.`) });
       if (record.native) {
         console.warn(`[vela] updateCode("${id}") \u2014 a native indicator has no script to update.`);
-        return;
+        return Promise.resolve({ ok: false, error: new Error(`[vela] updateCode("${id}") \u2014 a native indicator has no script to update.`) });
       }
-      if (source === record.source && record.pendingSource === void 0) return;
-      record.pendingSource = source;
-      void this.swapSource(id, source, handle);
+      const busy = record.pendingSource !== void 0 || record.codeTrial !== void 0;
+      if (!busy && source === record.source) return Promise.resolve({ ok: true, error: null });
+      return new Promise((resolve) => {
+        (record.codeWaiters ?? (record.codeWaiters = [])).push(resolve);
+        if (record.pendingSource === source || record.pendingSource === void 0 && record.codeTrial && record.source === source) return;
+        record.pendingSource = source;
+        void this.swapSource(id, source, handle);
+      });
     }
     async swapSource(id, source, handle) {
       const engine = this.registry.get(id)?.engine ?? this.engineFor(this.registry.get(id)?.options?.language);
@@ -9258,26 +9280,41 @@ var Vela = (function (exports) {
         const record2 = this.registry.get(id);
         if (record2?.pendingSource === source) {
           record2.pendingSource = void 0;
-          this.fail(id, handle, err);
+          this.rejectCode(id, record2, handle, err);
         }
         return;
       }
       const record = this.registry.get(id);
       if (!record || record.pendingSource !== source) return;
       record.pendingSource = void 0;
+      const previous = record.codeTrial?.previous ?? {
+        source: record.source,
+        engine: record.engine,
+        prepared: record.prepared,
+        inputValues: record.inputValues,
+        propValues: record.propValues,
+        inputs: [...handle.inputs],
+        props: [...handle.props]
+      };
+      record.inputValues = valuesOnSchema(prepared.inputs, record.inputValues, record.prepared?.inputs);
+      record.propValues = valuesOnSchema(prepared.props ?? [], record.propValues, record.prepared?.props);
       record.source = source;
       record.engine = engine;
       record.prepared = prepared;
       handle.setSource(source);
-      record.inputValues = valuesOnSchema(prepared.inputs, record.inputValues);
-      record.propValues = valuesOnSchema(prepared.props ?? [], record.propValues);
       handle.setSchema(prepared.inputs);
       handle.setPropsSchema(prepared.props ?? []);
       record.session?.stop();
       record.session = void 0;
       record.pendingStructural = true;
       record.pendingCause = "code";
-      if (record.hidden) return;
+      if (record.hidden) {
+        record.codeTrial = void 0;
+        if (record.renderHandle) this.renderer.setIndicatorInputs(record.renderHandle, record.inputValues, record.propValues);
+        this.settleCode(record, { ok: true, error: null });
+        return;
+      }
+      record.codeTrial = { previous };
       if (record.renderHandle) {
         this.renderer.setIndicatorInputs(record.renderHandle, record.inputValues, record.propValues);
         this.setLoading(record, true);
@@ -9285,6 +9322,46 @@ var Vela = (function (exports) {
         this.mountLoadingPlaceholder(id, record);
       }
       this.executeIndicator(id, handle);
+      if (this.bars.length === 0 && record.codeTrial) {
+        record.codeTrial = void 0;
+        this.settleCode(record, { ok: true, error: null });
+      }
+    }
+    /** Resolve every `updateCode` caller waiting on this record's chain of edits. */
+    settleCode(record, result) {
+      const waiters = record.codeWaiters;
+      record.codeWaiters = void 0;
+      if (waiters) for (const resolve of waiters) resolve(result);
+    }
+    /**
+     * An update failed — at prepare, or on trial before its first model. A trial puts the
+     * previous code back (source, engine, prepared script, values, schema) and restarts it;
+     * its visuals were never dropped, so the chart keeps painting throughout. Then the
+     * failure reports the usual way and every waiting caller learns it.
+     */
+    rejectCode(id, record, handle, err) {
+      const trial = record.codeTrial;
+      record.codeTrial = void 0;
+      this.fail(id, handle, err);
+      if (trial) {
+        const p = trial.previous;
+        record.session?.stop();
+        record.session = void 0;
+        record.source = p.source;
+        record.engine = p.engine;
+        record.prepared = p.prepared;
+        record.inputValues = p.inputValues;
+        record.propValues = p.propValues;
+        handle.setSource(p.source);
+        handle.setSchema(p.inputs);
+        handle.setPropsSchema(p.props);
+        record.pendingStructural = true;
+        record.pendingCause = void 0;
+        if (record.renderHandle) this.renderer.setIndicatorInputs(record.renderHandle, record.inputValues, record.propValues);
+        if (!record.hidden) this.executeIndicator(id, handle);
+      }
+      const error = err instanceof Error ? err : new Error(String(err));
+      this.settleCode(record, { ok: false, error });
     }
     /** IndicatorController: tear down an indicator and (if now empty) its pane. */
     /** Live handles of every indicator on the chart (script + native), insertion order. */
@@ -9299,6 +9376,7 @@ var Vela = (function (exports) {
     removeIndicator(id) {
       const record = this.registry.remove(id);
       if (record?.native?.type === "volume") this.volumeOptedOut = true;
+      if (record) this.settleCode(record, { ok: false, error: new Error(`[vela] updateCode("${id}") \u2014 the indicator was removed.`) });
       record?.session?.stop();
       if (record?.native?.started) record.native.instance.stop();
       this.handles.delete(id);
@@ -9326,6 +9404,10 @@ var Vela = (function (exports) {
       if (!visible) {
         record.session?.stop();
         record.session = void 0;
+        if (record.codeTrial) {
+          record.codeTrial = void 0;
+          this.settleCode(record, { ok: true, error: null });
+        }
         if (record.native?.started) record.native.instance.suspend();
         if (record.renderHandle) this.renderer.setIndicatorVisible?.(record.renderHandle, false);
         else if (record.native) this.mountHiddenNativeRow(id, record);
@@ -9412,7 +9494,10 @@ var Vela = (function (exports) {
       if (this.viewportTimer != null) clearTimeout(this.viewportTimer);
       this.viewportUnsub?.();
       this.paneActionUnsub?.();
+      this.priceStyleWillChangeUnsub?.();
+      this.priceStyleWillChangeUnsub = null;
       for (const record of this.registry.all()) {
+        this.settleCode(record, { ok: false, error: new Error("[vela] updateCode \u2014 the chart was destroyed.") });
         record.session?.stop();
         if (record.native?.started) record.native.instance.stop();
       }
@@ -9481,7 +9566,8 @@ var Vela = (function (exports) {
       const record = this.registry.get(id);
       if (!record || !record.engine || !record.prepared || record.hidden) return;
       const mode = this.config.live && !record.prepared.reactsToViewport && record.engine.capabilities.streaming ? "live" : "static";
-      record.session = record.engine.execute(
+      const prepared = record.prepared;
+      const session = record.engine.execute(
         {
           prepared: record.prepared,
           market: this.market(),
@@ -9502,6 +9588,10 @@ var Vela = (function (exports) {
             const cause = record.pendingCause ?? "history";
             if (!this.applyModel(id, model)) return;
             record.pendingCause = void 0;
+            if (record.codeTrial) {
+              record.codeTrial = void 0;
+              this.settleCode(record, { ok: true, error: null });
+            }
             this.emitContextChanged(id);
             this.emitScriptRun(id, cause, first2);
           },
@@ -9512,9 +9602,17 @@ var Vela = (function (exports) {
             handle.emit("alert", { id: a.id, message: a.message, title: a.title, time: a.time });
           },
           onWarning: (w) => this.events.emit("warning", w),
-          onError: (err) => this.fail(id, handle, err)
+          onError: (err) => {
+            if (record.codeTrial) this.rejectCode(id, record, handle, err);
+            else this.fail(id, handle, err);
+          }
         }
       );
+      if (record.prepared !== prepared) {
+        session.stop();
+        return;
+      }
+      record.session = session;
       this.emitContextChanged(id);
     }
     /**
@@ -10015,7 +10113,7 @@ var Vela = (function (exports) {
     }
     return new Promise((resolve) => setTimeout(resolve, 0));
   }
-  function valuesOnSchema(schema, previous) {
+  function valuesOnSchema(schema, previous, oldSchema = []) {
     const out = {};
     const declared = /* @__PURE__ */ new Set();
     for (const s of schema) {
@@ -10023,9 +10121,22 @@ var Vela = (function (exports) {
       declared.add(s.key);
       declared.add(s.title);
     }
-    for (const [k, v] of Object.entries(previous)) if (declared.has(k)) out[k] = v;
+    const oldDefaults = /* @__PURE__ */ new Map();
+    for (const s of oldSchema) {
+      oldDefaults.set(s.key, s.defval);
+      if (!oldDefaults.has(s.title)) oldDefaults.set(s.title, s.defval);
+    }
+    for (const [k, v] of Object.entries(previous)) {
+      if (!declared.has(k)) continue;
+      if (oldDefaults.has(k) && sameInputValue(oldDefaults.get(k), v)) continue;
+      out[k] = v;
+    }
     return out;
   }
+  function sameInputValue(a, b) {
+    if (a === b) return true;
+    return typeof a === "object" && a !== null && typeof b === "object" && b !== null && JSON.stringify(a) === JSON.stringify(b);
+  }
   function blankedModel(model) {
     return {
       ...model,
@@ -13587,6 +13698,66 @@ ${STATIC_DECLS}
     return span;
   }
 
+  // src/ui/surface-events.ts
+  var SURFACE_OPEN_EVENT = "vela:surface-open";
+  var SURFACE_CLOSE_EVENT = "vela:surface-close";
+  function announceSurface(el, open2, kind, trigger = null) {
+    const View = el.ownerDocument.defaultView;
+    if (!View) return;
+    el.dispatchEvent(
+      new View.CustomEvent(open2 ? SURFACE_OPEN_EVENT : SURFACE_CLOSE_EVENT, { bubbles: true, composed: true, detail: { kind, trigger } })
+    );
+  }
+
+  // src/ui/surface-exit.ts
+  var CLOSING_ATTR = "data-closing";
+  var SURFACE_EXIT_CAP_MS = 1e3;
+  function animationsOf(els) {
+    return els.flatMap((el) => el.getAnimations({ subtree: true }));
+  }
+  function ends(a) {
+    return Number.isFinite(a.effect?.getComputedTiming().endTime ?? Number.POSITIVE_INFINITY);
+  }
+  function holdForExit(els, done, opts = {}) {
+    const list = Array.isArray(els) ? els : [els];
+    if (list.length === 0 || !list.every((el) => typeof el.getAnimations === "function")) {
+      done();
+      return null;
+    }
+    const before = new Set(animationsOf(list));
+    for (const el of list) el.setAttribute(CLOSING_ATTR, "");
+    const exit = animationsOf(list).filter((a) => !before.has(a) && ends(a));
+    if (exit.length === 0) {
+      for (const el of list) el.removeAttribute(CLOSING_ATTR);
+      done();
+      return null;
+    }
+    const frozen = [...list, ...opts.inert ?? []];
+    const wasInert = frozen.map((el) => el.inert);
+    for (const el of frozen) el.inert = true;
+    let settled = false;
+    const settle = (complete) => {
+      if (settled) return;
+      settled = true;
+      clearTimeout(cap);
+      for (const el of list) el.removeAttribute(CLOSING_ATTR);
+      frozen.forEach((el, i) => {
+        el.inert = wasInert[i];
+      });
+      if (complete) done();
+    };
+    const cap = setTimeout(() => settle(true), SURFACE_EXIT_CAP_MS);
+    let pending = exit.length;
+    const one = () => {
+      if (--pending === 0) settle(true);
+    };
+    for (const a of exit) a.finished.then(one, one);
+    return {
+      cancel: () => settle(false),
+      finish: () => settle(true)
+    };
+  }
+
   // node_modules/@zag-js/anatomy/dist/create-anatomy.mjs
   var createAnatomy = (name, parts3 = []) => ({
     parts: (...values) => {
@@ -17999,6 +18170,35 @@ ${STATIC_DECLS}
     color: var(--vela-fg-bright);
 }
 .vela-menu-item[data-checkmark] { color: var(--vela-fg-bright); }
+/* Badge mode (iconBadges): the row icon sits in a rounded tile and the row grows to fit
+   it. An icon-less row of the same level keeps an invisible slot, so labels align. */
+.vela-menu[data-badges] > .vela-menu-item { padding: 5px 10px 5px 6px; }
+.vela-menu-item .vela-menu-badge {
+    width: 24px;
+    height: 24px;
+    padding: 3px;
+    flex: none;
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--vela-radius-md);
+    background: var(--vela-hover);
+    border: 1px solid var(--vela-border);
+    color: var(--vela-fg-muted);
+    transition: background var(--vela-dur-fast) var(--vela-ease), border-color var(--vela-dur-fast) var(--vela-ease), color var(--vela-dur-fast) var(--vela-ease);
+}
+.vela-menu-item .vela-menu-badge:empty { background: transparent; border-color: transparent; }
+.vela-menu-item .vela-menu-badge .vela-icon { color: inherit; }
+.vela-menu-item[data-highlighted] .vela-menu-badge:not(:empty) { color: var(--vela-fg-bright); }
+/* The selected tile inverts: a bright fill under the surface-colored glyph. After the
+   hover rule, so a selected row keeps its tile while highlighted. */
+.vela-menu-item[data-checked] .vela-menu-badge:not(:empty),
+.vela-menu-item[data-checkmark] .vela-menu-badge:not(:empty) {
+    background: color-mix(in srgb, var(--vela-fg-bright) 83%, var(--vela-surface));
+    border-color: color-mix(in srgb, var(--vela-fg-bright) 40%, transparent);
+    color: var(--vela-surface);
+}
 /* Switch rows (boolean settings in a dropdown): a right-aligned toggle pill \u2014 the
    same control language as the settings dialog's toggles. */
 .vela-menu-switch {
@@ -18065,11 +18265,16 @@ ${STATIC_DECLS}
       /** Trigger rect captured when this level opened — the list stays put if the
        *  trigger then moves (favorite chips shifting the caret). */
       this.pinnedAnchor = null;
+      /** The open state last announced — see {@link announce}. */
+      this.shown = false;
+      /** The list's exit animation after a close; a reopen cancels it. */
+      this.exit = null;
       this.doc = doc;
       this.host = opts.host;
       this.onSelect = opts.onSelect;
       this.onFavorite = opts.onFavorite;
       this.checkmarks = opts.checkmarks === true;
+      this.iconBadges = opts.iconBadges === true;
       this.positioner = doc.createElement("div");
       this.positioner.className = "vela-ui-layer";
       this.list = doc.createElement("ul");
@@ -18078,6 +18283,7 @@ ${STATIC_DECLS}
       this.positioner.appendChild(this.list);
       this.host.appendChild(this.positioner);
       const trigger = opts.trigger;
+      this.opener = trigger ?? opts.opener ?? null;
       this.ctrl = menuController({
         items: [],
         id: opts.id,
@@ -18099,15 +18305,37 @@ ${STATIC_DECLS}
       if (opts.triggerId && trigger) trigger.id = opts.triggerId;
       this.handle = runMachine(this.ctrl.machine, this.ctrl.props, (service) => {
         const api = this.ctrl.connect(service);
+        const closing = this.shown && !api.open;
+        if (closing) this.announce(false);
+        if (api.open && this.exit) {
+          this.exit.cancel();
+          this.exit = null;
+        }
         if (trigger) spreadProps(trigger, api.getTriggerProps(), this.mid);
         spreadProps(this.positioner, api.getPositionerProps(), this.mid);
         spreadProps(this.list, api.getContentProps(), this.mid);
         this.project(api);
+        if (closing) this.holdExit();
+        if (api.open && !this.shown) this.announce(true);
+      });
+    }
+    /** Keep the just-closed list up through its exit animation. `spreadProps` re-applies
+     *  `hidden` only when the machine's value for it changes, so the list stays shown until
+     *  the exit ends — or until a reopen, which projects `hidden: false` itself. */
+    holdExit() {
+      this.list.hidden = false;
+      this.exit = holdForExit(this.list, () => {
+        this.exit = null;
+        if (!this.shown) this.list.hidden = true;
       });
     }
     get api() {
       return this.ctrl.connect(this.handle.service);
     }
+    announce(open2) {
+      this.shown = open2;
+      announceSurface(this.list, open2, "menu", this.opener);
+    }
     setItems(items) {
       this.items = items;
       for (const sub2 of this.subs.values()) sub2.destroy();
@@ -18124,7 +18352,9 @@ ${STATIC_DECLS}
     destroy() {
       for (const sub2 of this.subs.values()) sub2.destroy();
       this.subs.clear();
+      this.exit?.finish();
       this.handle.stop();
+      if (this.shown) this.announce(false);
       this.positioner.remove();
     }
     byId(id) {
@@ -18149,6 +18379,10 @@ ${STATIC_DECLS}
       const doc = this.doc;
       this.list.replaceChildren();
       const markable = this.checkmarks && this.items.some((i) => !(i.submenu && i.submenu.length > 0) && !i.toggle && i.checked !== void 0);
+      const iconic = this.items.some((i) => !!i.icon);
+      const badged = this.iconBadges && iconic;
+      if (badged) this.list.dataset.badges = "1";
+      else delete this.list.dataset.badges;
       for (const item of this.items) {
         if (item.separatorBefore) {
           const sep = doc.createElement("li");
@@ -18174,7 +18408,16 @@ ${STATIC_DECLS}
         } else if (!branch && !item.toggle && item.checked) {
           li.dataset.checked = "1";
         }
-        if (item.icon) li.appendChild(iconEl(item.icon, doc));
+        if (badged) {
+          const badge = doc.createElement("span");
+          badge.className = "vela-menu-badge";
+          if (item.icon) badge.appendChild(iconEl(item.icon, doc));
+          li.appendChild(badge);
+        } else if (item.icon) {
+          li.appendChild(iconEl(item.icon, doc));
+        } else if (iconic) {
+          li.appendChild(iconEl("", doc));
+        }
         const label = doc.createElement("span");
         label.className = "vela-menu-label";
         label.textContent = item.label;
@@ -18218,9 +18461,11 @@ ${STATIC_DECLS}
           const sub2 = new _Surface(doc, {
             host: this.host,
             placement: "right-start",
+            opener: li,
             onSelect: this.onSelect,
             onFavorite: this.onFavorite,
             checkmarks: this.checkmarks,
+            iconBadges: this.iconBadges,
             id: `${this.mid}--${item.id}`
           });
           sub2.setItems(item.submenu ?? []);
@@ -18246,7 +18491,8 @@ ${STATIC_DECLS}
         id: opts.id,
         minWidth: opts.minWidth,
         onFavorite: opts.onFavorite,
-        checkmarks: opts.checkmarks
+        checkmarks: opts.checkmarks,
+        iconBadges: opts.iconBadges
       });
       this.root.setItems(opts.items);
     }
@@ -18350,6 +18596,7 @@ ${STATIC_DECLS}
 
   // src/ui/components/popover/view.ts
   var open = null;
+  var leaving = /* @__PURE__ */ new Set();
   function closeOpenPopovers() {
     open?.hide();
   }
@@ -18377,6 +18624,8 @@ ${STATIC_DECLS}
       this.shown = false;
       /** The pending removal of a fading-out shell; a show() that reuses the shell cancels it. */
       this.leaveTimer = null;
+      /** The shell's exit animation before it leaves the DOM; a show() that reuses the shell cancels it. */
+      this.exit = null;
       const doc = opts.trigger.ownerDocument;
       injectStyles(POPOVER_STYLE_ID, POPOVER_CSS, doc);
       this.trigger = opts.trigger;
@@ -18413,6 +18662,10 @@ ${STATIC_DECLS}
         clearTimeout(this.leaveTimer);
         this.leaveTimer = null;
       }
+      this.exit?.cancel();
+      this.exit = null;
+      leaving.delete(this);
+      for (const p of [...leaving]) if (p.trigger === this.trigger) p.exit?.finish();
       ensureUIHost(this.el, this.inheritsTokens ? void 0 : this.theme);
       if (this.fadeMs > 0) {
         this.el.style.transition = `opacity ${this.fadeMs}ms ease`;
@@ -18437,16 +18690,21 @@ ${STATIC_DECLS}
         this.hide();
       };
       const onReflow = () => this.place();
-      setTimeout(() => document.addEventListener("pointerdown", onOutside, true), 0);
+      setTimeout(() => {
+        if (this.onOutside === onOutside) document.addEventListener("pointerdown", onOutside, true);
+      }, 0);
       document.addEventListener("keydown", onKey, true);
       window.addEventListener("resize", onReflow, true);
       document.addEventListener("scroll", onReflow, true);
       this.onOutside = onOutside;
       this.onKey = onKey;
       this.onReflow = onReflow;
+      announceSurface(this.el, true, "popover", this.trigger);
     }
     hide() {
       if (!this.shown) return;
+      this.shown = false;
+      announceSurface(this.el, false, "popover", this.trigger);
       if (this.onOutside) document.removeEventListener("pointerdown", this.onOutside, true);
       if (this.onKey) document.removeEventListener("keydown", this.onKey, true);
       if (this.onReflow) {
@@ -18464,9 +18722,13 @@ ${STATIC_DECLS}
           this.el.remove();
         }, this.fadeMs);
       } else {
-        this.el.remove();
+        this.exit = holdForExit(this.el, () => {
+          this.exit = null;
+          leaving.delete(this);
+          this.el.remove();
+        });
+        if (this.exit) leaving.add(this);
       }
-      this.shown = false;
       if (open === this) open = null;
       this.ctrl.onClose?.();
     }
@@ -18477,6 +18739,7 @@ ${STATIC_DECLS}
     }
     destroy() {
       this.hide();
+      this.exit?.finish();
     }
     reposition() {
       if (this.shown) this.place();
@@ -20356,6 +20619,11 @@ ${overlayScrollbarCss(".vela-dialog *")}
   // src/ui/components/dialog/view.ts
   var Dialog = class {
     constructor(opts = {}) {
+      this.opener = null;
+      this.wasOpen = false;
+      /** The panel and scrim's exit animation after a close; a reopen cancels it. */
+      this.exit = null;
+      this.destroyed = false;
       const doc = (opts.host ?? document.body).ownerDocument;
       injectStyles(DIALOG_STYLE_ID, DIALOG_CSS, doc);
       const host = opts.host ?? doc.body;
@@ -20452,19 +20720,73 @@ ${overlayScrollbarCss(".vela-dialog *")}
       const mid = String(this.ctrl.props.id);
       this.handle = runMachine(this.ctrl.machine, this.ctrl.props, (service) => {
         const api = this.ctrl.connect(service);
+        const closing = this.wasOpen && !api.open;
+        if (closing) this.announce(false);
         spreadProps(this.backdrop, api.getBackdropProps(), mid);
         spreadProps(this.positioner, api.getPositionerProps(), mid);
         spreadProps(this.panel, api.getContentProps(), mid);
         spreadProps(title, api.getTitleProps(), mid);
         spreadProps(close, api.getCloseTriggerProps(), mid);
-        this.backdrop.style.display = api.open ? "" : "none";
-        this.positioner.style.display = api.open ? "" : "none";
-      });
+        if (api.open) {
+          this.exit?.cancel();
+          this.exit = null;
+          this.setShown(true);
+        } else if (closing) {
+          this.holdExit();
+        } else if (!this.exit) {
+          this.setShown(false);
+        }
+        if (api.open && !this.wasOpen) this.announce(true);
+        if (this.wasOpen && !api.open) this.restoreOpener();
+        this.wasOpen = api.open;
+      });
+    }
+    setShown(shown) {
+      this.backdrop.style.display = shown ? "" : "none";
+      this.positioner.style.display = shown ? "" : "none";
+    }
+    /** Keep the just-closed dialog up through its exit animation, then hide it — or
+     *  remove it, when it was destroyed meanwhile. `spreadProps` re-applies the close
+     *  props' `hidden` only when its value changes, so lifting it keeps the panel and
+     *  scrim up until the exit ends. The positioner spans the viewport: inert, it lets
+     *  clicks through to the page while the panel animates out. */
+    holdExit() {
+      const held = [this.panel, this.backdrop];
+      for (const el of held) el.hidden = false;
+      this.exit = holdForExit(
+        held,
+        () => {
+          this.exit = null;
+          if (this.destroyed) {
+            this.detach();
+          } else if (!this.open) {
+            for (const el of held) el.hidden = true;
+            this.setShown(false);
+          }
+        },
+        { inert: [this.positioner] }
+      );
+    }
+    detach() {
+      this.backdrop.remove();
+      this.positioner.remove();
+    }
+    /** Closing hands focus back to whatever opened it (Escape, the ✕, hide(), or a
+     *  teardown that outruns the machine's close notification). */
+    restoreOpener() {
+      const opener = this.opener;
+      this.opener = null;
+      if (opener?.isConnected) opener.focus({ preventScroll: true });
+    }
+    announce(open2) {
+      const opener = this.opener === this.panel.ownerDocument.body ? null : this.opener;
+      announceSurface(this.panel, open2, "dialog", opener);
     }
     get open() {
       return this.ctrl.connect(this.handle.service).open;
     }
     show() {
+      this.opener = this.panel.ownerDocument.activeElement;
       this.ctrl.connect(this.handle.service).setOpen(true);
     }
     hide() {
@@ -20477,10 +20799,16 @@ ${overlayScrollbarCss(".vela-dialog *")}
       return el?.closest(".vela-popover, .vela-menu") != null;
     }
     destroy() {
+      if (this.wasOpen && !this.open) this.handle.flush();
       if (this.open) this.hide();
       this.handle.stop();
-      this.backdrop.remove();
-      this.positioner.remove();
+      this.destroyed = true;
+      if (this.wasOpen) {
+        this.wasOpen = false;
+        this.announce(false);
+      }
+      this.restoreOpener();
+      if (!this.exit) this.detach();
     }
   };
 
@@ -22932,7 +23260,10 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
   var LEGEND_CTL_PX = 18;
   var LEGEND_ROW_PAD_Y = 2;
   var LEGEND_ROW_PAD_X = 6;
+  var LEGEND_LEFT_PX = 10;
+  var LEGEND_SCALE_GAP_PX = 6;
   var LEGEND_TITLE_VALUES_GAP_PX = 6;
+  var LEGEND_VALUES_GAP_PX = 5;
   var LEGEND_TITLE_STATUS_GAP_PX = 8;
   var LEGEND_ACTION_GAP_PX = 6;
   var LEGEND_CTL_CSS = `cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border:none;line-height:0;padding:0;width:${LEGEND_CTL_PX}px;height:${LEGEND_CTL_PX}px;border-radius:3px;box-sizing:border-box;flex:none;`;
@@ -23218,14 +23549,15 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
         row.valuesEl.replaceChildren();
         return;
       }
-      row.valuesEl.style.display = "inline-flex";
+      row.valuesEl.style.display = "block";
       row.valuesEl.replaceChildren();
-      for (const v of row.plotValues) {
+      row.plotValues.forEach((v, i) => {
         const span = document.createElement("span");
         span.textContent = v.value;
         span.style.color = v.color;
+        if (i > 0) span.style.marginLeft = `${LEGEND_VALUES_GAP_PX}px`;
         row.valuesEl.appendChild(span);
-      }
+      });
     }
     // ── legend move/merge (menu + drag) ─────────────────────────────────────
     /** Open the "Move to" menu for a row, anchored under its move button. */
@@ -23326,7 +23658,7 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
       if (!lg) {
         lg = document.createElement("div");
         lg.dataset.velaPane = paneId;
-        lg.style.cssText = "position:absolute;left:10px;z-index:5;display:flex;flex-direction:column;align-items:flex-start;gap:0;pointer-events:none;font:12px -apple-system,Segoe UI,sans-serif;";
+        lg.style.cssText = `position:absolute;left:${LEGEND_LEFT_PX}px;z-index:5;display:flex;flex-direction:column;align-items:flex-start;gap:0;pointer-events:none;font:12px -apple-system,Segoe UI,sans-serif;`;
         applyChromeTokens(lg, this.theme);
         this.positionLegend(lg, paneId);
         this.container.appendChild(lg);
@@ -23338,6 +23670,7 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
       const bounds = this.paneBoundsOf ? this.paneBoundsOf(paneId) : { top: 0, height: Infinity };
       lg.toggleAttribute(LEGEND_AT_TOP_ATTR, bounds.top === 0);
       lg.style.display = bounds.height < 4 || !this.titlesVisible ? "none" : "flex";
+      lg.style.maxWidth = `calc(100% - ${(bounds.rightAxis ?? 0) + LEGEND_LEFT_PX + LEGEND_SCALE_GAP_PX}px)`;
       const collapsed = this.paneCollapse.has(paneId);
       const masterId = this.paneCollapse.get(paneId) ?? null;
       for (const row of this.rows.values()) {
@@ -23429,7 +23762,7 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
       }
       ensureDialogStyles();
       const el = document.createElement("div");
-      el.style.cssText = `pointer-events:auto;display:flex;align-items:center;background:${this.idleRowFill()};border-radius:4px;padding:${LEGEND_ROW_PAD_Y}px ${LEGEND_ROW_PAD_X}px;margin-left:-${LEGEND_ROW_PAD_X}px;min-height:${LEGEND_ROW_MIN_H}px;box-sizing:border-box;color:${this.theme.textColor};user-select:none;-webkit-user-select:none;`;
+      el.style.cssText = `pointer-events:auto;display:flex;align-items:center;background:${this.idleRowFill()};border-radius:4px;padding:${LEGEND_ROW_PAD_Y}px ${LEGEND_ROW_PAD_X}px;margin-left:-${LEGEND_ROW_PAD_X}px;max-width:calc(100% + ${LEGEND_ROW_PAD_X}px);min-height:${LEGEND_ROW_MIN_H}px;box-sizing:border-box;color:${this.theme.textColor};user-select:none;-webkit-user-select:none;`;
       el.addEventListener("mouseleave", () => {
         if (this.selectedId !== id) this.setRowHighlighted(id, false);
       });
@@ -23457,7 +23790,7 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
       const statusEl = document.createElement("span");
       statusEl.style.cssText = "display:none;box-sizing:border-box;flex:none;";
       const titleWrap = document.createElement("span");
-      titleWrap.style.cssText = "white-space:nowrap;";
+      titleWrap.style.cssText = "white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis;";
       titleWrap.addEventListener("mouseenter", () => this.setRowHighlighted(id, true));
       const titleEl = document.createElement("span");
       titleEl.textContent = title;
@@ -23475,7 +23808,7 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
       el.appendChild(calloutsEl);
       el.appendChild(statusEl);
       const valuesEl = document.createElement("span");
-      valuesEl.style.cssText = `display:none;align-items:center;gap:5px;margin-left:${LEGEND_TITLE_VALUES_GAP_PX}px;white-space:nowrap;font-variant-numeric:tabular-nums;`;
+      valuesEl.style.cssText = `display:none;flex:1 1 0%;min-width:0;overflow:hidden;text-overflow:ellipsis;margin-left:${LEGEND_TITLE_VALUES_GAP_PX}px;white-space:nowrap;font-variant-numeric:tabular-nums;`;
       el.appendChild(valuesEl);
       const controlsEl = document.createElement("span");
       controlsEl.style.cssText = `display:none;align-items:center;gap:${LEGEND_ACTION_GAP_PX}px;flex:none;margin-left:${LEGEND_ACTION_GAP_PX}px;`;
@@ -24648,15 +24981,23 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
       this.seg(x + w, y + h, x, y + h, lineWidth, c);
       this.seg(x, y + h, x, y, lineWidth, c);
     }
-    /** Filled circle (triangle fan). */
+    /**
+     * Filled circle (triangle fan), feathered like a line: the rim is padded by {@link AA_PAD} and
+     * edgeDist runs from 0 at the center to the padded radius at the rim, with edgeHalf = r. The
+     * distance grows linearly along each spoke, so the shader's line feather gives a round soft edge.
+     */
     circle(cx, cy, r, c, segments = 16) {
-      let px = cx + r;
+      const ext = r + AA_PAD;
+      let px = cx + ext;
       let py = cy;
+      this.ensure(segments * 3);
       for (let i = 1; i <= segments; i += 1) {
         const a = i / segments * Math.PI * 2;
-        const nx = cx + Math.cos(a) * r;
-        const ny = cy + Math.sin(a) * r;
-        this.tri(cx, cy, c, px, py, c, nx, ny, c);
+        const nx = cx + Math.cos(a) * ext;
+        const ny = cy + Math.sin(a) * ext;
+        this.v(cx, cy, c, 0, r);
+        this.v(px, py, c, ext, r);
+        this.v(nx, ny, c, ext, r);
         px = nx;
         py = ny;
       }
@@ -24837,7 +25178,7 @@ void main() {
     }
     mount(canvas) {
       this.canvas = canvas;
-      this.gl = canvas.getContext("webgl2", { alpha: true, antialias: true, depth: false, stencil: false, premultipliedAlpha: true });
+      this.gl = canvas.getContext("webgl2", { alpha: true, antialias: false, depth: false, stencil: false, premultipliedAlpha: true });
       if (!this.gl) return;
       if (!this.initGL()) {
         this.gl = null;
@@ -26062,6 +26403,11 @@ void main() {
       /** When true (the default), the separators between stacked panes are draggable to
        *  resize the panes above/below. When false, a press there is a normal data-area pan. */
       this.paneResize = true;
+      /** When true (the default), the user drawings take part in pointer input: they claim a
+       *  press over a drawing or with a tool armed, and see hover moves. When false, every press
+       *  is a plain pan/click and hover leaves them alone; a drawing gesture already under way
+       *  still finishes. */
+      this.drawings = true;
       this.el = null;
       this.dragging = false;
       this.moved = false;
@@ -26125,18 +26471,18 @@ void main() {
       this.onModifier = (e) => {
         if (e.repeat || e.key !== "Shift" && e.key !== "Control" && e.key !== "Meta") return;
         if (Number.isNaN(this.cursorX)) return;
-        if (this.dragging && this.region !== "drawing") return;
+        if (this.dragging ? this.region !== "drawing" : !this.drawings) return;
         this.deps.drawingsPointerMove?.(this.cursorX, this.cursorY, this.snapMode(e), e.shiftKey, e.ctrlKey || e.metaKey);
       };
       this.onDown = (e) => {
         if (e.button === 1) {
           const { x: x2, y: y2 } = this.local(e);
-          this.middleDeleted = this.deps.drawingsDeleteAt?.(x2, y2) ?? false;
+          this.middleDeleted = this.drawings && (this.deps.drawingsDeleteAt?.(x2, y2) ?? false);
           if (this.middleDeleted) e.preventDefault();
           return;
         }
         if (e.button === 2) {
-          this.rightCancelled = this.deps.drawingsCancelPlacement?.() ?? false;
+          this.rightCancelled = this.drawings && (this.deps.drawingsCancelPlacement?.() ?? false);
           if (this.rightCancelled) e.preventDefault();
           return;
         }
@@ -26158,20 +26504,20 @@ void main() {
         this.startY = y;
         this.prevPressDrawing = this.lastPressDrawing;
         this.lastPressDrawing = false;
-        if (this.deps.drawingsClaim?.(x, y)) {
+        if (this.drawings && this.deps.drawingsClaim?.(x, y)) {
           this.region = "drawing";
           this.lastPressDrawing = true;
           this.deps.drawingsPointerDown?.(x, y, this.snapMode(e), e.shiftKey, e.ctrlKey || e.metaKey);
           this.capture(e.pointerId);
           return;
         }
-        if (e.shiftKey && this.regionAt(x, y) === "data" && this.deps.drawingsMeasureStart?.(x, y, this.snapMode(e))) {
+        if (this.drawings && e.shiftKey && this.regionAt(x, y) === "data" && this.deps.drawingsMeasureStart?.(x, y, this.snapMode(e))) {
           this.region = "drawing";
           this.lastPressDrawing = true;
           this.capture(e.pointerId);
           return;
         }
-        if ((e.ctrlKey || e.metaKey) && this.regionAt(x, y) === "data" && this.deps.drawingsMarqueeStart?.(x, y)) {
+        if (this.drawings && (e.ctrlKey || e.metaKey) && this.regionAt(x, y) === "data" && this.deps.drawingsMarqueeStart?.(x, y)) {
           this.region = "drawing";
           this.lastPressDrawing = true;
           this.capture(e.pointerId);
@@ -26248,7 +26594,7 @@ void main() {
           const drawCursor = this.deps.drawingsCursor?.(x, y);
           const r = this.regionAt(x, y);
           this.el.style.cursor = drawCursor ?? (r === "price" ? "ns-resize" : r === "time" ? "ew-resize" : r === "separator" ? "row-resize" : "");
-          this.deps.drawingsPointerMove?.(x, y, this.snapMode(e), e.shiftKey, e.ctrlKey || e.metaKey);
+          if (this.drawings) this.deps.drawingsPointerMove?.(x, y, this.snapMode(e), e.shiftKey, e.ctrlKey || e.metaKey);
         }
         if (e.pointerType !== "touch") this.deps.onPointerMove(x, y);
       };
@@ -26289,7 +26635,7 @@ void main() {
           this.deps.drawingsPointerUp?.(x, y, this.snapMode(e));
         } else if (tapRelease && this.region === "data") {
           this.deps.onClick(x, y);
-        } else if (this.dragging && this.region === "data") {
+        } else if (this.dragging && this.region === "data" && wasTouch) {
           const stale = e.timeStamp - this.lastT > FLING_STALE_MS;
           if (!stale && Math.abs(this.vx) > FLING_MIN_SPEED) {
             const pitch = this.deps.getCoords().pxPerBar();
@@ -26490,7 +26836,7 @@ void main() {
     }
     /** Shared double-click / double-tap routing, by the region under the point. */
     doubleActivate(x, y) {
-      if (this.deps.drawingsDblClick?.(x, y)) return;
+      if (this.drawings && this.deps.drawingsDblClick?.(x, y)) return;
       const region = this.regionAt(x, y);
       if (region === "price") this.deps.resetPriceScale(x, y);
       else if (region === "separator") this.deps.resetPaneSize(y);
@@ -28504,10 +28850,13 @@ void main() {
     const norm = raw / mag;
     const step = (norm < 1.5 ? 1 : norm < 3 ? 2 : norm < 7 ? 5 : 10) * mag;
     const decimals = Math.max(0, -Math.floor(Math.log10(step)) + 1);
-    const out = [];
     const start = Math.ceil(min2 / step) * step;
-    for (let v = start; v <= max2 + step * 1e-6; v += step) {
-      out.push(Number(v.toFixed(decimals)));
+    if (!(step > 0) || start + step === start) return [];
+    const count = Math.floor((max2 - start) / step + 1e-6) + 1;
+    if (!(count > 0) || count > 1e3) return [];
+    const out = [];
+    for (let i = 0; i < count; i += 1) {
+      out.push(Number((start + i * step).toFixed(decimals)));
     }
     return out;
   }
@@ -28705,6 +29054,100 @@ void main() {
     return out;
   }
 
+  // src/renderers/native/chrome/priceAxisTicks.ts
+  var PriceAxisTickSource = class {
+    constructor() {
+      this.fn = null;
+      this.memo = /* @__PURE__ */ new WeakMap();
+      this.warned = false;
+    }
+    /** The host function, or null for the built-in ticks. */
+    get hook() {
+      return this.fn;
+    }
+    /** Set (or clear) the host function. Drops every memoized result, so setting the same
+     *  function again recomputes — how a host refreshes ticks that depend on its own state. */
+    setHook(fn) {
+      this.fn = fn;
+      this.memo = /* @__PURE__ */ new WeakMap();
+    }
+    /** The pane's master-scale ticks for this frame. An unscaled pane (`axisFormat: 'none'`)
+     *  gets none, and the host is never asked for it. */
+    ticksFor(scene, pane, coords) {
+      const format = pane.axisFormat;
+      if (format === "none") return [];
+      const pct = percentScaleFor(scene, pane);
+      const height = pane.bounds.height;
+      const fn = this.fn;
+      if (!fn || !(height > 0)) return paneAxisTicks(pane.scale, height, pct, scene.priceMintick, format);
+      const s = pane.scale;
+      const m = this.memo.get(pane);
+      const fontSize = scene.style.fontSize;
+      if (m && m.kind === pane.kind && m.min === s.min && m.max === s.max && m.log === !!s.log && m.invert === !!s.invert && m.height === height && m.baseline === pct?.baseline && m.indexed === !!pct?.indexed && m.mintick === scene.priceMintick && m.format === format && m.fontSize === fontSize) {
+        return m.ticks;
+      }
+      const defaults2 = paneAxisTicks(s, height, pct, scene.priceMintick, format);
+      const ticks = this.callHook(fn, scene, pane, coords, defaults2, pct?.baseline, pct ? pct.indexed ? "indexed" : "percent" : "price");
+      this.memo.set(pane, {
+        kind: pane.kind,
+        min: s.min,
+        max: s.max,
+        log: !!s.log,
+        invert: !!s.invert,
+        height,
+        baseline: pct?.baseline,
+        indexed: !!pct?.indexed,
+        mintick: scene.priceMintick,
+        format,
+        fontSize,
+        ticks
+      });
+      return ticks;
+    }
+    callHook(fn, scene, pane, coords, defaults2, baseline, mode) {
+      const scale = { min: pane.scale.min, max: pane.scale.max, log: !!pane.scale.log, invert: !!pane.scale.invert };
+      const bounds = { top: 0, height: pane.bounds.height };
+      const ctx = {
+        pane: { id: pane.id, kind: pane.kind },
+        min: Math.min(scale.min, scale.max),
+        max: Math.max(scale.min, scale.max),
+        log: !!scale.log,
+        height: bounds.height,
+        mode,
+        baseline,
+        mintick: scene.priceMintick,
+        fontSize: scene.style.fontSize,
+        priceToY: (price) => coords.priceToY(price, scale, bounds),
+        defaults: defaults2
+      };
+      let out;
+      try {
+        out = fn(ctx);
+      } catch (err) {
+        this.warnOnce("threw", err);
+        return defaults2;
+      }
+      if (out == null) return defaults2;
+      if (!Array.isArray(out)) {
+        this.warnOnce("returned a non-array", out);
+        return defaults2;
+      }
+      const ticks = [];
+      for (const t of out) {
+        if (!t || typeof t !== "object") continue;
+        const { price, label, major } = t;
+        if (typeof price !== "number" || !Number.isFinite(price) || typeof label !== "string") continue;
+        ticks.push(typeof major === "boolean" ? { price, label, major } : { price, label });
+      }
+      return ticks;
+    }
+    warnOnce(what, detail) {
+      if (this.warned) return;
+      this.warned = true;
+      console.warn(`[vela] the priceAxisTicks function ${what} \u2014 the default ticks are used instead.`, detail);
+    }
+  };
+
   // src/renderers/native/chrome/countdown.ts
   function countdownText(barOpen, barMs, now2) {
     if (!(barMs > 0)) return null;
@@ -29057,8 +29500,11 @@ void main() {
   }
 
   // src/renderers/native/chrome/ChromeRenderer.ts
+  var MINOR_LABEL_ALPHA = 0.5;
   var ChromeRenderer = class {
-    constructor() {
+    /** `axisTicks` is shared with the backdrop layer, so price labels and gridlines agree. */
+    constructor(axisTicks = new PriceAxisTickSource()) {
+      this.axisTicks = axisTicks;
       this.canvas = null;
       this.ctx = null;
       // The color for axis tick labels — the host-passed surface text, set each frame in render().
@@ -29163,7 +29609,8 @@ void main() {
       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. */
+    /** The timeline-mark lane — after the axis, so the tokens read over the plot's bottom edge,
+     *  but clipped to the data area so a glyph on the edge bar never paints over the price scale. */
     drawMarkLane(ctx, scene, coords, theme, dataW, dataH) {
       if (!scene.marks.visible || scene.timelineMarks.length === 0) {
         this.markLayout = { glyphs: [], stacks: /* @__PURE__ */ new Map() };
@@ -29181,6 +29628,10 @@ void main() {
         expanded: scene.marksExpandedStack
       });
       const nowMs = typeof performance !== "undefined" ? performance.now() : Date.now();
+      ctx.save();
+      ctx.beginPath();
+      ctx.rect(0, 0, dataW, dataH);
+      ctx.clip();
       paintMarkLane(ctx, this.markLayout, {
         axisY: dataH,
         background: theme.background,
@@ -29194,6 +29645,7 @@ void main() {
         flashKey: scene.marksFlash && scene.marksFlash.until > nowMs ? scene.marksFlash.key : null,
         nowMs
       });
+      ctx.restore();
     }
     barTimes(scene) {
       if (this.barTimesSrc !== scene.bars || this.barTimesCache.length !== scene.bars.length) {
@@ -29250,13 +29702,19 @@ void main() {
       if (!scene.showAxisLabels) return;
       ctx.fillStyle = this.axisTextColor;
       ctx.textAlign = "left";
+      const font = `${scene.style.fontSize}px ${theme.fontFamily}`;
+      const majorFont = `600 ${font}`;
+      const alpha = ctx.globalAlpha;
       for (const pane of panes) {
         if (pane.collapsed) continue;
-        const pct = percentScaleFor(scene, pane);
-        for (const t of paneAxisTicks(pane.scale, pane.bounds.height, pct, scene.priceMintick, pane.axisFormat)) {
+        for (const t of this.axisTicks.ticksFor(scene, pane, coords)) {
           const y = coords.priceToY(t.price, pane.scale, pane.bounds);
           if (y < pane.bounds.top + 6 || y > pane.bounds.top + pane.bounds.height - 4) continue;
+          if (t.major === true) ctx.font = majorFont;
+          else if (t.major === false) ctx.globalAlpha = alpha * MINOR_LABEL_ALPHA;
           ctx.fillText(t.label, dataW + 6, y);
+          if (t.major === true) ctx.font = font;
+          else if (t.major === false) ctx.globalAlpha = alpha;
         }
         if (pane.axisBands) {
           for (const b of pane.axisBands) {
@@ -29498,15 +29956,23 @@ void main() {
     constructor() {
       this.canvas = null;
       this.ctx = null;
+      this.shade = null;
     }
     mount(canvas) {
       this.canvas = canvas;
       this.ctx = canvas.getContext("2d");
     }
+    /** The plot area the last frame veiled for `crosshairOverride.shadeRight` — from the
+     *  picked bar's right edge to the price scale, full plot height (the union when both the
+     *  local and a synced crosshair veil) — or null when no veil was painted. */
+    get shadeRightArea() {
+      return this.shade;
+    }
     /** Clear the cursor canvas and (re)draw the crosshair lines + axis chips. The optional
      *  `separatorHoverY` highlights the draggable pane separator under the cursor;
      *  `external` is a SYNCED ghost crosshair (another chart's pointer, pixel-resolved). */
     render(scene, coords, theme, separatorHoverY = null, external = null) {
+      this.shade = null;
       const ctx = this.ctx;
       const canvas = this.canvas;
       if (!ctx || !canvas) return;
@@ -29529,12 +29995,7 @@ void main() {
       const x = crisp(coords.logicalToX(logical), ov?.width ?? cs.width);
       if (vertical && ov?.shadeRight) {
         const from = Math.max(0, Math.round(coords.logicalToX(logical + 0.5)));
-        if (from < dataW) {
-          ctx.fillStyle = ov.shadeRight.color;
-          ctx.globalAlpha = ov.shadeRight.opacity ?? 1;
-          ctx.fillRect(from, 0, dataW - from, dataH);
-          ctx.globalAlpha = 1;
-        }
+        if (from < dataW) this.paintShade(ctx, ov.shadeRight, from, dataW, dataH);
       }
       ctx.strokeStyle = ov?.color ?? cs.color ?? theme.textColor;
       ctx.lineWidth = ov?.width ?? cs.width;
@@ -29570,6 +30031,7 @@ void main() {
     destroy() {
       this.canvas = null;
       this.ctx = null;
+      this.shade = null;
     }
     /** The synced ghost: a dimmed vertical line at the bar the renderer resolved as
      *  CONTAINING the foreign time (+ horizontal line when a comparable price came
@@ -29589,12 +30051,7 @@ void main() {
       if (ov?.vertical === false) return;
       if (ov?.shadeRight) {
         const from = Math.max(0, Math.round(coords.logicalToX(Math.round(coords.xToLogical(ext.x)) + 0.5)));
-        if (from < dataW) {
-          ctx.fillStyle = ov.shadeRight.color;
-          ctx.globalAlpha = ov.shadeRight.opacity ?? 1;
-          ctx.fillRect(from, 0, dataW - from, dataH);
-          ctx.globalAlpha = 1;
-        }
+        if (from < dataW) this.paintShade(ctx, ov.shadeRight, from, dataW, dataH);
       }
       if (ext.line === false || x < 0 || x > dataW) return;
       ctx.font = `${scene.style.fontSize}px ${theme.fontFamily}`;
@@ -29630,6 +30087,15 @@ void main() {
       this.chip(ctx, x, dataH + 1, formatTimeStamp(ext.time, scene.timezone, coords.barInterval), chipBg, "center", true, theme.background);
       ctx.globalAlpha = 1;
     }
+    /** Paint the `shadeRight` veil from `from` to the price scale and record the veiled area. */
+    paintShade(ctx, shade, from, dataW, dataH) {
+      ctx.fillStyle = shade.color;
+      ctx.globalAlpha = shade.opacity ?? 1;
+      ctx.fillRect(from, 0, dataW - from, dataH);
+      ctx.globalAlpha = 1;
+      const x = this.shade ? Math.min(this.shade.x, from) : from;
+      this.shade = { x, width: dataW - x, height: dataH };
+    }
     /** A soft band + a brighter crisp center line over the hovered separator, so it reads as
      *  a draggable handle (the cursor is already `row-resize`). Spans the full width (data +
      *  scale gutter) to match the separator itself. Theme-derived (textColor). */
@@ -32745,6 +33211,12 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     activeDragId() {
       return this.state.kind === "pressed" && this.state.moved ? this.state.id : null;
     }
+    /** The store drawings a live drag is moving — the pressed one and its riders — or none
+     *  before the drag passes the slop. A Ctrl-drag moves copies, so its sources stay put. */
+    movingIds() {
+      if (this.state.kind !== "pressed" || !this.state.moved || this.state.clones) return /* @__PURE__ */ new Set();
+      return /* @__PURE__ */ new Set([this.state.id, ...this.state.riders.map((r) => r.id)]);
+    }
     /** The drawing under a press that has not been released yet (drag or click undecided), or null. */
     pressedId() {
       return this.state.kind === "pressed" ? this.state.id : null;
@@ -33119,15 +33591,16 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     }
     open(drawing, actions, kind) {
       this.close();
-      const snapshot2 = clonePlain(drawing.serialize());
+      const live = actions.resolve() ?? drawing;
+      const snapshot2 = clonePlain(live.serialize());
       const grid = fieldGrid({ variant: "inputs" });
       grid.style.padding = "16px 20px";
       grid.style.overflowY = "auto";
       grid.style.overflowX = "hidden";
       grid.style.flex = "1 1 auto";
-      if (kind === "position" && drawing instanceof PositionTool) this.buildPosition(grid, drawing, actions);
-      else if (kind === "frvp" && drawing instanceof FixedRangeVolumeProfile) this.buildFrvp(grid, drawing, actions);
-      else if (kind === "levels") this.buildLevels(grid, drawing, actions);
+      if (kind === "position" && live instanceof PositionTool) this.buildPosition(grid, live, actions);
+      else if (kind === "frvp" && live instanceof FixedRangeVolumeProfile) this.buildFrvp(grid, live, actions);
+      else if (kind === "levels") this.buildLevels(grid, live, actions);
       else return;
       const ui = new Dialog({
         host: this.host,
@@ -33403,6 +33876,17 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           }
         }));
       }
+      if (drawing instanceof FibRetracement) {
+        const fib = drawing;
+        grid.appendChild(fieldRow({
+          label: "Reverse",
+          bool: true,
+          toggle: {
+            checked: fib.reverse,
+            onChange: (v) => actions.patch({ reverse: v })
+          }
+        }));
+      }
       levels.forEach((lv, i) => {
         const row = document.createElement("div");
         row.className = "vela-field-span";
@@ -33763,7 +34247,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         this.reposition();
         return;
       }
-      const text = drawing.text;
+      const text = (actions.resolve() ?? drawing).text;
       const panel = document.createElement("div");
       panel.style.cssText = `padding:6px;border-top:1px solid var(--vela-border);display:flex;flex-direction:column;gap:4px;`;
       const ta = new TextArea({
@@ -34359,6 +34843,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
   // src/renderers/native/drawings/DrawingToolbar.ts
   var TOOLBAR_WIDTH = 44;
   var TOOLBAR_COLLAPSED_WIDTH = 16;
+  var FLYOUT_GAP = 3;
   var DrawingToolbar = class {
     constructor(host, theme, onArm, onMagnet = () => {
     }, onMeasure = () => {
@@ -34388,6 +34873,9 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       // group id (or MAGNET_ID) whose flyout is open
       this.flyoutCell = null;
       // the cell the open flyout is anchored to
+      /** Closed flyouts still playing their exit animation, by owner id — reopening the same
+       *  owner takes its element back instead of stacking a second one on it. */
+      this.exitingFlyouts = /* @__PURE__ */ new Map();
       this.groupCells = /* @__PURE__ */ new Map();
       // the composite cell (hover/active bg + flyout anchor)
       this.groupIcons = /* @__PURE__ */ new Map();
@@ -34496,6 +34984,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     }
     destroy() {
       this.closeFlyout();
+      for (const { exit } of [...this.exitingFlyouts.values()]) exit.finish();
       for (const dispose of this.tipDisposers.splice(0)) dispose();
       this.root.remove();
     }
@@ -34723,16 +35212,22 @@ ${overlayScrollbarCss(".vela-sd-pane")}
      *  outside-dismiss. Callers fill it with items. */
     beginFlyout(ownerId, cell) {
       const t = this.theme;
-      const fly = document.createElement("div");
+      const back = this.exitingFlyouts.get(ownerId);
+      if (back) {
+        this.exitingFlyouts.delete(ownerId);
+        back.exit.cancel();
+        back.fly.replaceChildren();
+      }
+      const fly = back?.fly ?? document.createElement("div");
       fly.className = "vela-dtb-flyout";
-      fly.style.cssText = `position:absolute;z-index:23;display:flex;flex-direction:column;gap:2px;padding:4px;border-radius:0 8px 8px 0;background:var(--vela-surface-elev);border:1px solid ${this.borderColor};border-left:none;box-shadow:var(--vela-shadow);pointer-events:auto;overflow-y:auto;overscroll-behavior:contain;`;
+      fly.style.cssText = `position:absolute;z-index:23;display:flex;flex-direction:column;gap:2px;padding:4px;border-radius:var(--vela-radius-md);background:var(--vela-surface);border:1px solid ${this.borderOverride ?? "var(--vela-border-strong)"};box-shadow:var(--vela-shadow);pointer-events:auto;overflow-y:auto;overscroll-behavior:contain;`;
       applyChromeTokens(fly, t);
       this.host.appendChild(fly);
       const r = cell.getBoundingClientRect();
       const rootR = this.root.getBoundingClientRect();
       const hostR = this.host.getBoundingClientRect();
       const top = r.top - hostR.top;
-      fly.style.left = `${rootR.right - hostR.left - 1}px`;
+      fly.style.left = `${rootR.right - hostR.left + FLYOUT_GAP}px`;
       fly.style.top = `${top}px`;
       fly.style.maxHeight = `${Math.max(120, hostR.height - top - 8)}px`;
       this.flyout = fly;
@@ -34748,6 +35243,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       if (!cell) return;
       const fly = this.beginFlyout(group.id, cell);
       const sections = group.sections ?? [{ label: "", tools: group.tools }];
+      const badge = sections.some((s) => s.tools.some((tool) => !!tool.icon));
       for (let si = 0; si < sections.length; si++) {
         const section = sections[si];
         if (section.label) {
@@ -34758,6 +35254,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           fly.appendChild(
             this.makeFlyoutItem({
               icon: tool.icon,
+              badge,
               label: tool.label,
               selected: tool.type === this.active,
               shortcut: this.shortcuts.get(tool.type),
@@ -34770,6 +35267,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           );
         }
       }
+      announceSurface(fly, true, "menu", cell);
     }
     openMagnetFlyout() {
       const cell = this.magnetCell;
@@ -34793,6 +35291,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           })
         );
       }
+      announceSurface(fly, true, "menu", cell);
     }
     flyoutHeader(text) {
       const t = this.theme;
@@ -34806,21 +35305,24 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       div.style.cssText = `height:1px;margin:4px 8px;background:${this.borderColor};`;
       return div;
     }
-    /** A flyout row, left to right: optional leading icon, label, a check when it's the selected
-     *  entry, an optional shortcut hint, and — at the far right — the favorite star (tool rows).
-     *  Hover tint is CSS (`.vela-dtb-item:hover`), so navigating the menu stays smooth. */
+    /** A flyout row, left to right: optional leading icon badge, label, a check when it's the
+     *  selected entry, an optional shortcut hint, and — at the far right — the favorite star (tool
+     *  rows). Hover tint is CSS (`.vela-dtb-item:hover`), so navigating the menu stays smooth. */
     makeFlyoutItem(opts) {
       const t = this.theme;
       const item = document.createElement("button");
       item.type = "button";
       item.className = "vela-dtb-item";
       item.setAttribute("aria-label", opts.label);
-      item.style.cssText = `display:flex;align-items:center;gap:8px;padding:5px 10px 5px 8px;cursor:pointer;color:${t.textColor};border-radius:var(--vela-radius-sm);font:13px ${t.fontFamily};white-space:nowrap;min-width:148px;`;
-      if (opts.icon) {
-        const icon2 = document.createElement("span");
-        icon2.style.cssText = "width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex:none;";
-        icon2.innerHTML = sizedIcon(opts.icon);
-        item.appendChild(icon2);
+      const badged = opts.badge === true || !!opts.icon;
+      const box = badged ? "gap:10px;padding:4px 10px 4px 6px;" : "gap:8px;padding:5px 10px 5px 8px;";
+      item.style.cssText = `display:flex;align-items:center;${box}cursor:pointer;color:${t.textColor};border-radius:var(--vela-radius-sm);font:13px ${t.fontFamily};white-space:nowrap;min-width:148px;`;
+      if (opts.selected) item.dataset.selected = "1";
+      if (badged) {
+        const badge = document.createElement("span");
+        badge.className = "vela-dtb-badge";
+        if (opts.icon) badge.innerHTML = opts.icon;
+        item.appendChild(badge);
       }
       const label = document.createElement("span");
       label.textContent = opts.label;
@@ -34861,9 +35363,16 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     }
     closeFlyout() {
       this.starEls.clear();
-      if (this.flyout) {
-        this.flyout.remove();
+      const fly = this.flyout;
+      if (fly) {
         this.flyout = null;
+        announceSurface(fly, false, "menu", this.flyoutCell);
+        const owner = this.flyoutOwnerId ?? "";
+        const exit = holdForExit(fly, () => {
+          if (this.exitingFlyouts.get(owner)?.fly === fly) this.exitingFlyouts.delete(owner);
+          fly.remove();
+        });
+        if (exit) this.exitingFlyouts.set(owner, { fly, exit });
         this.flyoutCell?.classList.remove("vela-open");
         this.flyoutCell = null;
         this.flyoutOwnerId = null;
@@ -34947,6 +35456,11 @@ ${overlayScrollbarCss(".vela-sd-pane")}
 .vela-dtb[data-collapsed='1'] .vela-dtb-collapse .vela-dtb-hit{width:14px;}
 .vela-dtb-item{background:transparent;border:none;transition:background var(--vela-dur-fast) ease;}
 .vela-dtb-item:hover{background:var(--vela-hover-strong);}
+.vela-dtb-badge{width:24px;height:24px;padding:3px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex:none;border-radius:var(--vela-radius-md);background:var(--vela-hover);border:1px solid var(--vela-border);color:var(--vela-fg-muted);transition:background var(--vela-dur-fast) ease,border-color var(--vela-dur-fast) ease,color var(--vela-dur-fast) ease;}
+.vela-dtb-badge:empty{background:transparent;border-color:transparent;}
+.vela-dtb-badge svg{width:100%;height:100%;}
+.vela-dtb-item:hover .vela-dtb-badge:not(:empty){background:var(--vela-active);color:var(--vela-fg-bright);}
+.vela-dtb-item[data-selected='1'] .vela-dtb-badge:not(:empty){background:color-mix(in srgb,var(--vela-fg-bright) 83%,var(--vela-surface));border-color:color-mix(in srgb,var(--vela-fg-bright) 40%,transparent);color:var(--vela-surface);}
 .vela-dtb-star{width:26px;height:22px;margin:-3px -5px -3px 0;padding:3px 5px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex:none;opacity:0;color:inherit;border-radius:var(--vela-radius-sm);transition:opacity .1s ease,color .1s ease,background .1s ease;}
 .vela-dtb-star svg{width:16px;height:16px;}
 .vela-dtb-item:hover .vela-dtb-star{opacity:.55;}
@@ -35188,6 +35702,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.drawings = [];
       /** Ids painted on an interleave layer this frame — the top canvas paints only their handles. */
       this.sliced = /* @__PURE__ */ new Set();
+      /** Interleaved drawings mid-drag: painted on the top canvas, left out of their slice. */
+      this.lifted = /* @__PURE__ */ new Set();
       /** Cached slice canvases, keyed `paneId|beforeZ`, reused across frames to avoid churn. */
       this.sliceCache = /* @__PURE__ */ new Map();
       /** Series boundaries per pane as of the last `prepareSlices` — lets a repaint between data
@@ -35275,7 +35791,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         selectedIds: () => this.selectedIds,
         emit: (i) => this.emit(i),
         changed: () => {
-          this.invalidateSlices();
+          this.syncLift();
           this.render();
         },
         openSettings: (id, x, y) => this.openSettingsById(id, x, y),
@@ -35564,6 +36080,12 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         this.render();
       }
     }
+    /** Drop the hover (its handles) — the pointer no longer reaches the drawings. */
+    clearHover() {
+      if (this.hoveredId == null) return;
+      this.hoveredId = null;
+      this.render();
+    }
     pointerUp(x, y, snap = "off") {
       if (this.eraserMode) {
         this.erasing = false;
@@ -35901,6 +36423,20 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     /** A drawing that paints inside the series stack changed (content, not hover): its pixels
      *  live in the backend composite, so this layer alone can't show the change — ask for a
      *  data frame, which re-runs `prepareSlices` before the backend composites. */
+    /** A drawing being dragged leaves its interleave slice for the top canvas, so each pointer
+     *  move repaints one 2D layer instead of re-rasterizing and re-uploading a plot-sized slice
+     *  texture through the data frame. The slices rebuild once as the drag starts and once as it
+     *  ends (release, cancel), when the lifted set changes. */
+    syncLift() {
+      const moving = this.interaction.movingIds();
+      let same = moving.size === this.lifted.size;
+      if (same) {
+        for (const id of moving) if (!this.lifted.has(id)) same = false;
+      }
+      if (same) return;
+      this.lifted = new Set(moving);
+      this.invalidateSlices();
+    }
     invalidateSlices() {
       if (this.sliced.size > 0 || this.drawings.some((d) => this.isInterleaved(d))) this.deps.requestDataPaint();
     }
@@ -35919,7 +36455,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       const theme = this.deps.theme();
       const buckets = /* @__PURE__ */ new Map();
       for (const d of this.drawings) {
-        if (!d.visible) continue;
+        if (!d.visible || this.lifted.has(d.id)) continue;
         const beforeZ = sliceKeyFor(d.zIndex, this.lastBounds.get(d.paneId) ?? []);
         if (beforeZ === null) continue;
         const key = `${d.paneId}|${beforeZ}`;
@@ -35971,8 +36507,9 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         mutedLabel: edited instanceof TextLabel ? edited.id : null
       };
       this.painter.seriesLook = this.deps.seriesLook();
-      this.painter.paintAll(ctx, this.drawings.filter((d) => !this.isInterleaved(d)), proj, this.deps.theme(), targets);
-      this.painter.paintHighlights(ctx, this.drawings.filter((d) => this.isInterleaved(d)), proj, handleIdsFor(targets));
+      const onTop = (d) => !this.isInterleaved(d) || this.lifted.has(d.id);
+      this.painter.paintAll(ctx, this.drawings.filter(onTop), proj, this.deps.theme(), targets);
+      this.painter.paintHighlights(ctx, this.drawings.filter((d) => !onTop(d)), proj, handleIdsFor(targets));
       const clones = this.interaction.dragClones();
       if (clones) this.painter.paintAll(ctx, clones, proj, this.deps.theme(), { selected: new Set(clones.map((c) => c.id)) });
       this.layoutTextEditor();
@@ -36539,9 +37076,10 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       consider(drawings.max);
     }
     if (min2 === Infinity || max2 === -Infinity) return { min: 0, max: 1 };
-    if (min2 === max2) {
-      const pad = Math.abs(min2) * 0.1 || 1;
-      return { min: min2 - pad, max: max2 + pad, log: log && min2 - pad > 0 };
+    if (max2 - min2 <= Math.max(Math.abs(min2), Math.abs(max2)) * 1e-12) {
+      const mid = (min2 + max2) / 2;
+      const pad = Math.abs(mid) * 0.1 || 1;
+      return { min: mid - pad, max: mid + pad, log: log && mid - pad > 0 };
     }
     const content = Math.max(0.1, 1 - (margins.top + margins.bottom) / 100);
     const above = margins.top / 100 / content;
@@ -37045,7 +37583,9 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     return Math.ceil(logical) - 0.5;
   }
   var BackdropRenderer = class {
-    constructor() {
+    /** `axisTicks` is shared with the chrome layer, so gridlines and price labels agree. */
+    constructor(axisTicks = new PriceAxisTickSource()) {
+      this.axisTicks = axisTicks;
       this.canvas = null;
       this.ctx = null;
     }
@@ -37122,9 +37662,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         if (scene.showGrid && gridHorz.visible && !pane.collapsed) {
           ctx.globalAlpha = gridAlpha;
           ctx.strokeStyle = horzColor;
-          const pct = percentScaleFor(scene, pane);
           ctx.beginPath();
-          for (const t of paneAxisTicks(pane.scale, pane.bounds.height, pct, void 0, pane.axisFormat)) {
+          for (const t of this.axisTicks.ticksFor(scene, pane, coords)) {
             const y = Math.round(coords.priceToY(t.price, pane.scale, pane.bounds)) + 0.5;
             if (y < pane.bounds.top || y > pane.bounds.top + pane.bounds.height) continue;
             ctx.moveTo(0, y);
@@ -37740,8 +38279,16 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.toolbarGutter = 0;
       // px reserved on the left for the docked drawings toolbar (0 when hidden)
       this.mountContainer = null;
+      /** The host-styleable twin of the `shadeRight` veil (`.vela-shade-right`), directly under
+       *  the cursor canvas; hidden whenever the crosshair layer paints no veil. */
+      this.shadeRightEl = null;
+      /** The veil geometry last written to {@link shadeRightEl} ('' = hidden) — the DOM is
+       *  touched only when it changes, never on a plain pointer move. */
+      this.shadeRightSig = "";
       this.userDrawings = null;
-      this.backdropRenderer = new BackdropRenderer();
+      /** One price-axis tick source for the gridlines (backdrop) and the labels (chrome). */
+      this.priceAxisTicks = new PriceAxisTickSource();
+      this.backdropRenderer = new BackdropRenderer(this.priceAxisTicks);
       this.volumeRenderer = new VolumeRenderer();
       /** SDK renderer layers instantiated at mount ({@link registerRendererLayer}). */
       /**
@@ -37774,7 +38321,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.backendMode = "auto";
       this.glowAmount = 0;
       // WebGL2 neon-glow intensity (canvas2d ignores it)
-      this.chrome = new ChromeRenderer();
+      this.chrome = new ChromeRenderer(this.priceAxisTicks);
       /** Prepaints each indicator's Pine drawings into interleave slices at the model's z. */
       this.indicatorSlices = new IndicatorDrawingSlices();
       /** Hover tooltips for Pine labels (canvas hit-rects collected by the chrome layer). */
@@ -37891,6 +38438,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       // pane just below it
       this.resizeSplitStart = null;
       // the two panes' shared span when the drag began
+      /** The user drawings take part in pointer input (the runtime `drawingsInteractive` feature). */
+      this.drawingsInteractive = true;
       this.hoverSeparatorY = null;
       // pixel y of the separator under the cursor (drives its hover highlight)
       // ── pane management (merge / reorder / collapse / maximize) ──
@@ -37946,8 +38495,9 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.toggleVisibleCbs = /* @__PURE__ */ new Set();
       this.moveIndicatorCbs = /* @__PURE__ */ new Set();
       this.priceStyleCbs = /* @__PURE__ */ new Set();
+      this.priceStyleWillChangeCbs = /* @__PURE__ */ new Set();
       this.name = "native";
-      this.features = ["logScale", "currentPriceLine", "priceLabel", "countdown", "upColor", "downColor", "glow", "animZoom", "animPan", "animScroll", "animAutoscale", "animLiveBar", "intro", "zoomAnchor", "axisDrag", "paneResize", "candleZOrder", "candleVisible", "seriesOrder", "highlights", "sessionZones", "gridlines", "axisLabels", "scaleMode", "invertScale", "paneScales", "autoScale", "timezone", "keyboard", "historyChords", "priceStyle", "priceBaseline", "baselinePrice", "settings", "attribution", "dialogHost", "tradeMarkers", "marks", "indicatorTitles", "indicatorValues", "crosshairOverride"];
+      this.features = ["logScale", "currentPriceLine", "priceLabel", "countdown", "upColor", "downColor", "glow", "animZoom", "animPan", "animScroll", "animAutoscale", "animLiveBar", "intro", "zoomAnchor", "axisDrag", "paneResize", "candleZOrder", "candleVisible", "seriesOrder", "highlights", "sessionZones", "gridlines", "axisLabels", "scaleMode", "invertScale", "paneScales", "autoScale", "timezone", "keyboard", "historyChords", "priceStyle", "priceBaseline", "baselinePrice", "settings", "attribution", "dialogHost", "tradeMarkers", "marks", "indicatorTitles", "indicatorValues", "crosshairOverride", "drawingsInteractive", "priceAxisTicks"];
       /** 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) => {
@@ -37991,6 +38541,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         this.scene.priceStyle = opts.priceStyle;
         this.scene.basePainting = basePaintingOf(opts.priceStyle);
         this.scene.candleOverride = candleOverrideFor(opts.priceStyle, this.scene.style.chartTypes);
+        if (typeof opts.priceAxisTicks === "function") this.priceAxisTicks.setHook(opts.priceAxisTicks);
       }
       this.theme = this.deriveTheme(DARK_THEME);
     }
@@ -38129,6 +38680,15 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         case "crosshairOverride":
           this.scene.crosshairOverride = sanitizeCrosshairOverride(value);
           break;
+        case "drawingsInteractive":
+          this.drawingsInteractive = value !== false;
+          if (this.input) this.input.drawings = this.drawingsInteractive;
+          if (!this.drawingsInteractive) this.userDrawings?.clearHover();
+          return;
+        // affects the next gesture only — clearHover repaints what it drops
+        case "priceAxisTicks":
+          this.priceAxisTicks.setHook(typeof value === "function" ? value : null);
+          break;
         case "keyboard":
           this.setKeyboardEnabled(Boolean(value));
           return;
@@ -38244,6 +38804,10 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           return { visible: this.scene.marks.visible, groups: { ...this.scene.marks.groups } };
         case "crosshairOverride":
           return this.scene.crosshairOverride ? { ...this.scene.crosshairOverride } : null;
+        case "drawingsInteractive":
+          return this.drawingsInteractive;
+        case "priceAxisTicks":
+          return this.priceAxisTicks.hook;
         case "keyboard":
           return this.keyboardEnabled;
         case "historyChords":
@@ -38917,6 +39481,12 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       Object.assign(this.drawingsCanvas.style, { position: "absolute", inset: "0", width: "100%", height: "100%", pointerEvents: "none" });
       this.cursorCanvas = document.createElement("canvas");
       Object.assign(this.cursorCanvas.style, { position: "absolute", inset: "0", width: "100%", height: "100%", pointerEvents: "none" });
+      this.shadeRightEl = document.createElement("div");
+      this.shadeRightEl.className = "vela-shade-right";
+      this.shadeRightEl.setAttribute("aria-hidden", "true");
+      this.shadeRightEl.hidden = true;
+      Object.assign(this.shadeRightEl.style, { position: "absolute", top: "0", left: "0", width: "0", height: "0", pointerEvents: "none", display: "none" });
+      this.shadeRightSig = "";
       this.overlayRoot = document.createElement("div");
       Object.assign(this.overlayRoot.style, { position: "absolute", inset: "0", pointerEvents: "none" });
       this.plot = document.createElement("div");
@@ -38924,7 +39494,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.extLayers = rendererLayers().map((def) => ({ def, instance: def.create(), canvas: this.createLayerCanvas(), channel: def.id, owner: null }));
       const below = this.extLayers.filter((l) => l.def.placement === "below-data").map((l) => l.canvas);
       const above = this.extLayers.filter((l) => l.def.placement !== "below-data").map((l) => l.canvas);
-      this.plot.append(this.backdropCanvas, ...below, this.dataCanvas, this.volumeCanvas, this.vpvrCanvas, ...above, this.chromeCanvas, this.drawingsCanvas, this.cursorCanvas, this.overlayRoot);
+      this.plot.append(this.backdropCanvas, ...below, this.dataCanvas, this.volumeCanvas, this.vpvrCanvas, ...above, this.chromeCanvas, this.drawingsCanvas, this.shadeRightEl, this.cursorCanvas, this.overlayRoot);
       this.layerOrderSig = "";
       this.wrapper.appendChild(this.plot);
       this.factoryConfig = this.getConfig();
@@ -38982,13 +39552,14 @@ ${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) ?? (this.chrome.markGlyphAt(x, y) ? "pointer" : null),
+        drawingsCursor: (x, y) => (this.drawingsInteractive ? this.userDrawings?.cursorAt(x, y) : null) ?? (this.chrome.markGlyphAt(x, y) ? "pointer" : null),
         drawingsDblClick: (x, y) => this.userDrawings?.dblClick(x, y) ?? false,
         drawingsClearTransient: () => this.userDrawings?.clearTransient()
       });
       this.input.rightEdgeZoom = this.zoomAnchorMode === "right";
       this.input.axisDrag = this.axisDragEnabled;
       this.input.paneResize = this.paneResizeEnabled;
+      this.input.drawings = this.drawingsInteractive;
       this.input.attach(this.dataCanvas);
       if (this.settingsEnabled) this.setSettingsEnabled(true);
       this.syncCountdownTimer();
@@ -39297,6 +39868,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.backend.destroy();
       this.chrome.destroy();
       this.crosshairLayer.destroy();
+      this.shadeRightEl?.remove();
+      this.shadeRightEl = null;
       this.attributionEl?.remove();
       this.attributionEl = null;
       this.mountContainer?.style.removeProperty("--vela-toolbar-gutter");
@@ -39643,14 +40216,21 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.priceStyleCbs.add(cb);
       return () => this.priceStyleCbs.delete(cb);
     }
+    onPriceStyleWillChange(cb) {
+      this.priceStyleWillChangeCbs.add(cb);
+      return () => this.priceStyleWillChangeCbs.delete(cb);
+    }
     /**
      * THE single write path for the base price style at runtime (feature set / settings dialog /
-     * config template — the constructor seeds the field directly, pre-listeners). Updates the
-     * scene, eases any reveal layer toward the new style's target, and notifies the core —
-     * which owns the DATA side of styles that need one (a chart type's SeriesDataEngine).
+     * config template — the constructor seeds the field directly, pre-listeners). Announces the
+     * switch while the scene still holds the old style (a listener may paint/capture that frame),
+     * then updates the scene, eases any reveal layer toward the new style's target, and notifies
+     * the core — which owns the DATA side of styles that need one (a chart type's SeriesDataEngine).
      */
     setPriceStyle(style) {
       if (style === this.scene.priceStyle) return;
+      const from = this.scene.priceStyle;
+      for (const cb of this.priceStyleWillChangeCbs) cb(from, style);
       this.scene.priceStyle = style;
       this.scene.basePainting = basePaintingOf(style);
       this.scene.candleOverride = candleOverrideFor(style, this.scene.style.chartTypes);
@@ -39880,7 +40460,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       if (this.easeLiveBar(dtMs)) active = true;
       this.skeletonClockMs += dtMs;
       this.paintData();
-      this.crosshairLayer.render(this.scene, this.coords, this.theme, this.hoverSeparatorY, this.externalCrossPx());
+      this.renderCrosshairLayer();
       this.updateLegendValues();
       this.emitViewportChange();
       return active;
@@ -40455,10 +41035,31 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         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());
+      this.renderCrosshairLayer();
       if (!repaintsData(level) && this.paintedData) this.repaintCursorLayers();
       this.updateLegendValues();
     }
+    /** Repaint the L2 crosshair canvas and keep the `.vela-shade-right` element on the veil it painted. */
+    renderCrosshairLayer() {
+      this.crosshairLayer.render(this.scene, this.coords, this.theme, this.hoverSeparatorY, this.externalCrossPx());
+      this.syncShadeRight();
+    }
+    /** Position (or hide) the `.vela-shade-right` element over the veil of the last crosshair frame. */
+    syncShadeRight() {
+      const el = this.shadeRightEl;
+      if (!el) return;
+      const area = this.crosshairLayer.shadeRightArea;
+      const sig = area ? `${area.x},${area.width},${area.height}` : "";
+      if (sig === this.shadeRightSig) return;
+      this.shadeRightSig = sig;
+      if (!area) {
+        el.hidden = true;
+        el.style.display = "none";
+        return;
+      }
+      Object.assign(el.style, { left: `${area.x}px`, width: `${area.width}px`, height: `${area.height}px`, display: "" });
+      el.hidden = false;
+    }
     /** Repaint the SDK layers that opted into cursor tracking (their own canvas only). */
     repaintCursorLayers() {
       const pane = this.scene.panes.get(PRICE_PANE_ID);
@@ -41252,7 +41853,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       if (this.animator.active) {
         this.computeScales();
         this.paintData();
-        this.crosshairLayer.render(this.scene, this.coords, this.theme, this.hoverSeparatorY, this.externalCrossPx());
+        this.renderCrosshairLayer();
       } else {
         this.scheduler.flushNow(4 /* Full */);
       }
@@ -45296,7 +45897,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         glow: options.glow ?? 0,
         upColor: options.upColor ?? BULLISH,
         downColor: options.downColor ?? BEARISH,
-        priceStyle: options.priceStyle ?? "candles"
+        priceStyle: options.priceStyle ?? "candles",
+        priceAxisTicks: options.priceAxis?.ticks ?? null
       };
       const RendererClass = options.renderer ?? NativeRenderer;
       if (typeof RendererClass !== "function") {
@@ -45782,6 +46384,23 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     return { ...Object.fromEntries(defaultEngines), ...overrides };
   }
 
+  // src/widget/context-menu-model.ts
+  var CONTEXT_MENU_BUILTIN_ORDER = {
+    body: { "reset-view": -30, "remove-drawings": -20, "remove-indicators": -10, settings: 1e3 },
+    "price-axis": {
+      auto: -80,
+      invert: -70,
+      "scale:regular": -60,
+      "scale:percent": -50,
+      "scale:indexed": -40,
+      "scale:log": -30,
+      labels: -20,
+      levels: -10,
+      settings: 1e3
+    },
+    "time-axis": { timezone: -10, settings: 1e3 }
+  };
+
   // src/widget/side-panel.ts
   var DEFAULT_PANEL_WIDTH = 280;
   var DEFAULT_PANEL_MIN_WIDTH = 200;
@@ -47031,6 +47650,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
   exports.BinanceProvider = BinanceProvider;
   exports.CATEGORICAL = CATEGORICAL;
   exports.CHIP_PLATE = CHIP_PLATE;
+  exports.CONTEXT_MENU_BUILTIN_ORDER = CONTEXT_MENU_BUILTIN_ORDER;
   exports.CROSSHAIR = CROSSHAIR;
   exports.CachingDataFeed = CachingDataFeed;
   exports.CoinbaseProvider = CoinbaseProvider;