@luxalgo/vela 0.8.2 → 0.8.3

package/dist/workspace.cjs

@@ -1565,6 +1565,55 @@ var Tooltip = class {
     this.trigger.removeAttribute("data-scope");
   }
 };
+
+// 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)
+  };
+}
 function menuController(opts) {
   return {
     machine: menu__namespace.machine,
@@ -1646,6 +1695,35 @@ var MENU_CSS = `
     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 {
@@ -1712,11 +1790,14 @@ var Surface = class _Surface {
     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");
@@ -1747,14 +1828,30 @@ var Surface = class _Surface {
     if (opts.triggerId && trigger) trigger.id = opts.triggerId;
     this.handle = runMachine(this.ctrl.machine, this.ctrl.props, (service) => {
       const api = this.ctrl.connect(service);
-      if (this.shown && !api.open) this.announce(false);
+      const closing = this.shown && !api.open;
+      if (closing) this.announce(false);
+      if (api.open && this.exit) {
+        this.exit.cancel();
+        this.exit = null;
+      }
       if (trigger) vanilla.spreadProps(trigger, api.getTriggerProps(), this.mid);
       vanilla.spreadProps(this.positioner, api.getPositionerProps(), this.mid);
       vanilla.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);
   }
@@ -1778,6 +1875,7 @@ var Surface = class _Surface {
   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();
@@ -1804,6 +1902,10 @@ var Surface = class _Surface {
     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");
@@ -1829,7 +1931,16 @@ var Surface = class _Surface {
       } 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;
@@ -1877,6 +1988,7 @@ var Surface = class _Surface {
           onSelect: this.onSelect,
           onFavorite: this.onFavorite,
           checkmarks: this.checkmarks,
+          iconBadges: this.iconBadges,
           id: `${this.mid}--${item.id}`
         });
         sub2.setItems(item.submenu ?? []);
@@ -1902,7 +2014,8 @@ var Menu = class {
       id: opts.id,
       minWidth: opts.minWidth,
       onFavorite: opts.onFavorite,
-      checkmarks: opts.checkmarks
+      checkmarks: opts.checkmarks,
+      iconBadges: opts.iconBadges
     });
     this.root.setItems(opts.items);
   }
@@ -2006,6 +2119,7 @@ var POPOVER_CSS = `
 
 // src/ui/components/popover/view.ts
 var open = null;
+var leaving = /* @__PURE__ */ new Set();
 function closeOpenPopovers() {
   open?.hide();
 }
@@ -2033,6 +2147,8 @@ var Popover = class {
     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;
@@ -2069,6 +2185,10 @@ var Popover = class {
       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`;
@@ -2125,7 +2245,12 @@ var Popover = class {
         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);
     }
     if (open === this) open = null;
     this.ctrl.onClose?.();
@@ -2137,6 +2262,7 @@ var Popover = class {
   }
   destroy() {
     this.hide();
+    this.exit?.finish();
   }
   reposition() {
     if (this.shown) this.place();
@@ -2334,6 +2460,9 @@ 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;
@@ -2430,19 +2559,57 @@ var Dialog = class {
     const mid = String(this.ctrl.props.id);
     this.handle = runMachine(this.ctrl.machine, this.ctrl.props, (service) => {
       const api = this.ctrl.connect(service);
-      if (this.wasOpen && !api.open) this.announce(false);
+      const closing = this.wasOpen && !api.open;
+      if (closing) this.announce(false);
       vanilla.spreadProps(this.backdrop, api.getBackdropProps(), mid);
       vanilla.spreadProps(this.positioner, api.getPositionerProps(), mid);
       vanilla.spreadProps(this.panel, api.getContentProps(), mid);
       vanilla.spreadProps(title, api.getTitleProps(), mid);
       vanilla.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() {
@@ -2471,15 +2638,16 @@ var Dialog = class {
     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.destroyed = true;
     if (this.wasOpen) {
       this.wasOpen = false;
       this.announce(false);
     }
     this.restoreOpener();
-    this.backdrop.remove();
-    this.positioner.remove();
+    if (!this.exit) this.detach();
   }
 };
 function drawerController(opts = {}) {
@@ -2608,6 +2776,9 @@ var Drawer = class {
   constructor(opts = {}) {
     this.opener = null;
     this.wasOpen = false;
+    /** The sheet 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(DRAWER_STYLE_ID, DRAWER_CSS, doc);
     const host = opts.host ?? doc.body;
@@ -2635,13 +2806,21 @@ var Drawer = class {
     const mid = String(this.ctrl.props.id);
     this.handle = runMachine(this.ctrl.machine, this.ctrl.props, (service) => {
       const api = this.ctrl.connect(service);
-      if (this.wasOpen && !api.open) this.announce(false);
+      const closing = this.wasOpen && !api.open;
+      if (closing) this.announce(false);
       vanilla.spreadProps(this.backdrop, api.getBackdropProps(), mid);
       vanilla.spreadProps(this.positioner, api.getPositionerProps(), mid);
       vanilla.spreadProps(this.panel, api.getContentProps(), mid);
       vanilla.spreadProps(this.titleEl, api.getTitleProps(), 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;
@@ -2753,6 +2932,36 @@ var Drawer = class {
   setTitle(title) {
     this.titleEl.textContent = title;
   }
+  setShown(shown) {
+    this.backdrop.style.display = shown ? "" : "none";
+    this.positioner.style.display = shown ? "" : "none";
+  }
+  /** Keep the just-closed sheet 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 sheet and
+   *  scrim up until the exit ends. The positioner spans the host: inert, it lets
+   *  clicks through to the page while the sheet 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() {
@@ -2775,14 +2984,15 @@ var Drawer = class {
     this.ctrl.connect(this.handle.service).setOpen(false);
   }
   destroy() {
+    if (this.wasOpen && !this.open) this.handle.flush();
     this.handle.stop();
+    this.destroyed = true;
     if (this.wasOpen) {
       this.wasOpen = false;
       this.announce(false);
     }
     this.restoreOpener();
-    this.backdrop.remove();
-    this.positioner.remove();
+    if (!this.exit) this.detach();
   }
 };
 
@@ -4918,11 +5128,11 @@ var DatePicker = class {
 };
 
 // src/widget/layout-picker.ts
-var STYLE_ID = "vela-widget-layout-picker-v14";
+var STYLE_ID = "vela-widget-layout-picker-v15";
 var CSS2 = `
 .vela-lp-layer { position: absolute; z-index: var(--vela-z-menu); }
 .vela-lp {
-    background: var(--vela-surface-elev);
+    background: var(--vela-surface);
     color: var(--vela-fg);
     border: 1px solid var(--vela-border-strong);
     border-radius: 8px;
@@ -5051,6 +5261,8 @@ var LayoutPicker = class {
   constructor(opts) {
     this.squares = [];
     this.isOpen = false;
+    /** The card's exit animation after a close; a reopen cancels it. */
+    this.exit = null;
     /** Hover preview (1-based rows/cols), null = show current shape. */
     this.hover = null;
     this.onDocPointerDown = (e) => {
@@ -5145,6 +5357,8 @@ var LayoutPicker = class {
   open() {
     if (this.isOpen) return;
     this.isOpen = true;
+    this.exit?.cancel();
+    this.exit = null;
     this.hover = null;
     this.refresh();
     this.layer.style.display = "";
@@ -5159,7 +5373,10 @@ var LayoutPicker = class {
     if (!this.isOpen) return;
     this.isOpen = false;
     announceSurface(this.panel, false, "popover", this.opts.trigger);
-    this.layer.style.display = "none";
+    this.exit = holdForExit(this.panel, () => {
+      this.exit = null;
+      if (!this.isOpen) this.layer.style.display = "none";
+    });
     this.opts.trigger.setAttribute("aria-expanded", "false");
     this.doc.removeEventListener("pointerdown", this.onDocPointerDown, true);
     this.doc.removeEventListener("keydown", this.onDocKeydown, true);
@@ -5174,6 +5391,7 @@ var LayoutPicker = class {
   }
   destroy() {
     this.close();
+    this.exit?.finish();
     this.infoTip.destroy();
     this.layer.remove();
   }
@@ -5240,7 +5458,7 @@ var LayoutPicker = class {
     const hostRect = this.opts.host.getBoundingClientRect();
     const trigRect = this.opts.trigger.getBoundingClientRect();
     let left = trigRect.left - hostRect.left;
-    const top = trigRect.bottom - hostRect.top + 4;
+    const top = trigRect.bottom - hostRect.top + 8;
     const width = this.layer.offsetWidth;
     if (left + width > hostRect.width - 8) left = Math.max(8, hostRect.width - 8 - width);
     this.layer.style.left = `${left}px`;
@@ -6217,7 +6435,8 @@ var Topbar = class {
       triggerId: "vela-topbar-style",
       host,
       items: this.styleItems(),
-      onSelect: (id) => opts.onPriceStyle(id)
+      onSelect: (id) => opts.onPriceStyle(id),
+      iconBadges: true
     });
   }
   setSymbol(symbol) {
@@ -6283,8 +6502,14 @@ var Topbar = class {
   renderLayoutButton(doc) {
     if (!this.layoutButton) return;
     this.layoutButton.replaceChildren();
-    if (iconMarkup("layout")) this.layoutButton.appendChild(iconEl("layout", doc));
-    else this.layoutButton.appendChild(doc.createTextNode(this.layoutId ?? ""));
+    const glyph = this.opts.layout?.glyph?.();
+    if (glyph || iconMarkup("layout")) {
+      const icon2 = iconEl("layout", doc);
+      if (glyph) icon2.innerHTML = glyph;
+      this.layoutButton.appendChild(icon2);
+    } else {
+      this.layoutButton.appendChild(doc.createTextNode(this.layoutId ?? ""));
+    }
     this.layoutButton.setAttribute("aria-label", `Layout \u2014 ${this.layoutId ?? ""}`);
   }
   renderStyleButton(doc) {
@@ -12959,6 +13184,11 @@ var SidePanel = class {
     this.maximizedOn = false;
     /** Set while the close is announced, so a listener's own close does not re-enter. */
     this.closing = false;
+    /** Open as far as the dock and the host are concerned — a closed panel can still be on
+     *  screen while its exit animation runs. */
+    this.isOpen = false;
+    /** The exit animation of a close; a reopen cancels it. */
+    this.exit = null;
     const doc = host.ownerDocument;
     injectStyles(STYLE_ID4, CSS5, doc);
     this.minWidth = opts.resizable ? opts.minWidth ?? DEFAULT_PANEL_MIN_WIDTH : 1;
@@ -13007,20 +13237,44 @@ var SidePanel = class {
     host.appendChild(this.el);
   }
   get open() {
-    return !this.el.hidden;
+    return this.isOpen;
   }
-  /** Open/close the panel — a bare call flips it. */
-  toggle(open2 = this.el.hidden) {
-    if (open2 === !this.el.hidden || !open2 && this.closing) return;
+  /**
+   * Open/close the panel — a bare call flips it. The panel reports closed at once, but a
+   * close keeps it on screen, marked `data-closing`, while a host exit animation runs.
+   * `instant` skips that, and also cuts short the exit of a panel already closing: a panel
+   * handing the dock to another leaves at once.
+   */
+  toggle(open2 = !this.isOpen, instant = false) {
+    if (open2 === this.isOpen) {
+      if (!open2 && instant) this.exit?.finish();
+      return;
+    }
+    if (!open2 && this.closing) return;
     if (!open2) {
       this.closing = true;
       announceSurface(this.el, false, "panel");
       this.closing = false;
     }
-    this.el.hidden = !open2;
-    if (!open2) this.setMaximized(false);
+    this.isOpen = open2;
+    if (open2) {
+      if (this.exit) {
+        this.exit.cancel();
+        this.exit = null;
+        this.setMaximized(false);
+      }
+      this.el.hidden = false;
+    } else {
+      const hide = () => {
+        this.exit = null;
+        this.el.hidden = true;
+        this.setMaximized(false);
+      };
+      if (instant) hide();
+      else this.exit = holdForExit(this.el, hide);
+    }
     this.onOpenChange?.(open2);
-    if (open2 && !this.el.hidden) announceSurface(this.el, true, "panel");
+    if (open2 && this.isOpen) announceSurface(this.el, true, "panel");
   }
   /** Whether the panel covers every chart right now. */
   get maximized() {
@@ -13094,6 +13348,7 @@ var SidePanel = class {
   }
   destroy() {
     if (this.open) announceSurface(this.el, false, "panel");
+    this.exit?.finish();
     this.el.remove();
   }
   /** The drag handle on the panel's inner (left) edge — the panel is docked right, so dragging
@@ -13398,8 +13653,8 @@ var ObjectTree = class extends SidePanel {
   set groups(next) {
     if (this.chart) this.groupsPerChart.set(this.chart, next);
   }
-  toggle(open2 = this.el.hidden) {
-    super.toggle(open2);
+  toggle(open2 = !this.open, instant = false) {
+    super.toggle(open2, instant);
     if (open2) this.refresh();
   }
   setSymbol(symbol) {
@@ -14433,8 +14688,8 @@ var DataWindow = class extends SidePanel {
     this.unsubs = [];
     injectStyles(STYLE_ID6, CSS7, host.ownerDocument);
   }
-  toggle(open2 = this.el.hidden) {
-    super.toggle(open2);
+  toggle(open2 = !this.open, instant = false) {
+    super.toggle(open2, instant);
     if (open2) this.refresh();
   }
   /** (Re)bind to a chart instance — called after every widget rebuild. */
@@ -14604,7 +14859,7 @@ var PanelDock = class {
     }
     this.pinned = new Set(state.pinned ?? []);
     for (const entry of this.entries) entry.panel.setOverlay(!this.pinned.has(entry.id));
-    for (const entry of this.entries) entry.panel.toggle(entry.id === state.open);
+    for (const entry of this.entries) entry.panel.toggle(entry.id === state.open, true);
     this.pendingOpen = state.open && !this.entries.some((e) => e.id === state.open) ? state.open : null;
   }
   /** Drop the contributed panels (the shell destroys its own). */
@@ -14620,7 +14875,7 @@ var PanelDock = class {
     if (this.pinned.has(entry.id)) entry.panel.setOverlay(false);
     entry.panel.onOpenChange = (open2) => {
       if (open2) {
-        for (const other of this.entries) if (other !== entry) other.panel.toggle(false);
+        for (const other of this.entries) if (other !== entry) other.panel.toggle(false, true);
         this.pendingOpen = null;
       }
       this.deps.chrome.setPanelActive(entry.id, open2);
@@ -16296,7 +16551,11 @@ var MoreDrawer = class {
   row(doc, label, opts) {
     const el = doc.createElement("div");
     el.className = "vela-md-row";
-    if (opts.icon) el.appendChild(iconEl(opts.icon, doc));
+    if (opts.icon) {
+      const icon2 = iconEl(opts.icon, doc);
+      if (opts.glyph) icon2.innerHTML = opts.glyph;
+      el.appendChild(icon2);
+    }
     const text = doc.createElement("span");
     text.className = "vela-md-row-label";
     text.textContent = label;
@@ -16338,7 +16597,7 @@ var MoreDrawer = class {
     if (this.opts.layout) {
       const shape = this.opts.layout.shape();
       const value = shape ? `${shape.cols} \xD7 ${shape.rows}` : this.opts.layout.presets().find((p) => p.checked)?.label;
-      list.appendChild(this.row(doc, "Layout", { icon: "layout", value, chevron: true, onClick: () => this.show("layout") }));
+      list.appendChild(this.row(doc, "Layout", { icon: "layout", glyph: this.opts.layout.glyph?.(), value, chevron: true, onClick: () => this.show("layout") }));
     }
     for (const act of this.opts.primaryActions?.() ?? []) list.appendChild(this.actionRow(doc, act));
     for (const panel of this.opts.panels()) {
@@ -16516,8 +16775,8 @@ var SETTINGS_SECTION = {
   "price-axis": "Scales and lines",
   "time-axis": "Scales and lines"
 };
-function settingsItem(zone, label) {
-  return { id: `settings:${SETTINGS_SECTION[zone]}`, label, separatorBefore: true };
+function settingsItem(zone, label, icon2) {
+  return { id: `settings:${SETTINGS_SECTION[zone]}`, label, ...icon2 ? { icon: icon2 } : {}, separatorBefore: true };
 }
 function settingsSectionOf(id) {
   return id.slice("settings:".length) || void 0;
@@ -16597,12 +16856,39 @@ function timeAxisItems(timezone) {
 }
 function bodyItems(counts) {
   return [
-    { id: "reset-view", label: "Reset chart view" },
-    { id: "remove-drawings", label: "Remove drawings", disabled: counts.drawings === 0, separatorBefore: true },
-    { id: "remove-indicators", label: "Remove indicators", disabled: counts.indicators === 0 },
-    settingsItem("body", "Settings\u2026")
+    { id: "reset-view", label: "Reset chart view", icon: "reset" },
+    { id: "remove-drawings", label: "Remove drawings", icon: "eraser", disabled: counts.drawings === 0, separatorBefore: true },
+    { id: "remove-indicators", label: "Remove indicators", icon: "indicators", disabled: counts.indicators === 0 },
+    settingsItem("body", "Settings\u2026", "gear")
   ];
 }
+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 }
+};
+function composeMenu(zone, builtin, contributed) {
+  const ranks = CONTEXT_MENU_BUILTIN_ORDER[zone];
+  const rows = [];
+  let group = 0;
+  for (const item of builtin) {
+    if (item.separatorBefore) group += 1;
+    rows.push({ item, rank: ranks[item.id.startsWith("settings") ? "settings" : item.id] ?? 0, group });
+  }
+  for (const { item, order } of contributed) rows.push({ item, rank: order ?? 0, group: -1 });
+  rows.sort((a, b) => a.rank - b.rank);
+  return rows.map(({ item, group: g }, i) => ({ ...item, separatorBefore: i > 0 && rows[i - 1].group !== g }));
+}
 
 // src/widget/price-scale-drawer.ts
 var STYLE_ID17 = "vela-widget-price-scale-drawer";
@@ -17877,6 +18163,7 @@ function chromeHint(text, opts) {
 // 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 = () => {
@@ -17906,6 +18193,9 @@ var DrawingToolbar = class {
     // 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();
@@ -18014,6 +18304,7 @@ var DrawingToolbar = class {
   }
   destroy() {
     this.closeFlyout();
+    for (const { exit } of [...this.exitingFlyouts.values()]) exit.finish();
     for (const dispose of this.tipDisposers.splice(0)) dispose();
     this.root.remove();
   }
@@ -18241,16 +18532,22 @@ var DrawingToolbar = class {
    *  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;
@@ -18266,6 +18563,7 @@ var DrawingToolbar = class {
     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) {
@@ -18276,6 +18574,7 @@ var DrawingToolbar = class {
         fly.appendChild(
           this.makeFlyoutItem({
             icon: tool.icon,
+            badge,
             label: tool.label,
             selected: tool.type === this.active,
             shortcut: this.shortcuts.get(tool.type),
@@ -18326,21 +18625,24 @@ var DrawingToolbar = class {
     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;
@@ -18385,7 +18687,12 @@ var DrawingToolbar = class {
     if (fly) {
       this.flyout = null;
       announceSurface(fly, false, "menu", this.flyoutCell);
-      fly.remove();
+      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;
@@ -18469,6 +18776,11 @@ function ensureStyles() {
 .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;}
@@ -18836,15 +19148,48 @@ function syncTargets(originId, setting, cellIds) {
 function rangesWithin(a, b, epsMs) {
   return Math.abs(a.from - b.from) <= epsMs && Math.abs(a.to - b.to) <= epsMs;
 }
-var STYLE_SYNC_CONFIG_KEYS = ["layout", "panes", "grid", "priceScale", "crosshair"];
-function styleConfigSlice(config) {
-  if (config == null || typeof config !== "object") return null;
-  const doc = config;
-  const out = {};
+var STYLE_SYNC_CONFIG_KEYS = [
+  "layout",
+  "panes",
+  "grid",
+  "margins",
+  "priceScale",
+  "crosshair",
+  "animations",
+  "candles",
+  "bars",
+  "line",
+  "area",
+  "baseline",
+  "sessions"
+];
+function styleConfigPatch(origin, follower) {
+  const from = asRecord(origin);
+  const to = asRecord(follower);
+  if (!from || !to) return null;
+  const patch = {};
   for (const key of STYLE_SYNC_CONFIG_KEYS) {
-    if (doc[key] != null && typeof doc[key] === "object") out[key] = doc[key];
+    const block = asRecord(from[key]);
+    if (block && JSON.stringify(block) !== JSON.stringify(to[key])) patch[key] = block;
   }
-  return Object.keys(out).length > 0 ? out : null;
+  const spacing = asRecord(from.series)?.spacing;
+  if (typeof spacing === "number" && spacing !== asRecord(to.series)?.spacing) patch.series = { spacing };
+  const fromTypes = asRecord(from.chartTypes) ?? {};
+  const toTypes = asRecord(to.chartTypes) ?? {};
+  const types = {};
+  for (const typeId of /* @__PURE__ */ new Set([...Object.keys(fromTypes), ...Object.keys(toTypes)])) {
+    const src = asRecord(fromTypes[typeId]) ?? {};
+    const dst = asRecord(toTypes[typeId]) ?? {};
+    for (const key of CANDLE_OVERRIDE_KEYS) {
+      const value = src[key] ?? null;
+      if (value !== (dst[key] ?? null)) (types[typeId] ?? (types[typeId] = {}))[key] = value;
+    }
+  }
+  if (Object.keys(types).length > 0) patch.chartTypes = types;
+  return Object.keys(patch).length > 0 ? patch : null;
+}
+function asRecord(v) {
+  return v != null && typeof v === "object" ? v : null;
 }
 
 // src/workspace/persist.ts
@@ -19533,6 +19878,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
     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;
@@ -19631,6 +19977,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
     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);
@@ -21161,6 +21508,8 @@ var EngineOrchestrator = class _EngineOrchestrator {
     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();
@@ -23366,7 +23715,10 @@ var LEGEND_ICON_PX2 = 16;
 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;`;
@@ -23652,14 +24004,15 @@ var InputsUI = class {
       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. */
@@ -23760,7 +24113,7 @@ var InputsUI = class {
     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);
@@ -23772,6 +24125,7 @@ var InputsUI = class {
     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()) {
@@ -23863,7 +24217,7 @@ var InputsUI = class {
     }
     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);
     });
@@ -23891,7 +24245,7 @@ var InputsUI = class {
     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;
@@ -23909,7 +24263,7 @@ var InputsUI = class {
     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;`;
@@ -26153,6 +26507,11 @@ var InputController = class {
     /** 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;
@@ -26216,18 +26575,18 @@ var InputController = class {
     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;
       }
@@ -26249,20 +26608,20 @@ var InputController = class {
       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);
@@ -26339,7 +26698,7 @@ var InputController = class {
         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);
     };
@@ -26581,7 +26940,7 @@ var InputController = class {
   }
   /** 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);
@@ -28595,10 +28954,13 @@ function priceTicks(min, max, target = 6) {
   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(min / step) * step;
-  for (let v = start; v <= max + step * 1e-6; v += step) {
-    out.push(Number(v.toFixed(decimals)));
+  if (!(step > 0) || start + step === start) return [];
+  const count = Math.floor((max - 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;
 }
@@ -28796,6 +29158,100 @@ function calendarTicks(zFrom, zTo, months, offsetMs) {
   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;
@@ -29148,8 +29604,11 @@ function standaloneSvg(markup, ink, px) {
 }
 
 // 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().
@@ -29254,7 +29713,8 @@ var ChromeRenderer = class {
     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() };
@@ -29272,6 +29732,10 @@ var ChromeRenderer = class {
       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,
@@ -29285,6 +29749,7 @@ var ChromeRenderer = class {
       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) {
@@ -29341,13 +29806,19 @@ var ChromeRenderer = class {
     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) {
@@ -29589,15 +30060,23 @@ var CrosshairRenderer = class {
   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;
@@ -29620,12 +30099,7 @@ var CrosshairRenderer = class {
     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;
@@ -29661,6 +30135,7 @@ var CrosshairRenderer = class {
   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
@@ -29680,12 +30155,7 @@ var CrosshairRenderer = class {
     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}`;
@@ -29721,6 +30191,15 @@ var CrosshairRenderer = class {
     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). */
@@ -33126,15 +33605,16 @@ var DrawingSettingsDialog = class {
   }
   open(drawing, actions, kind) {
     this.close();
-    const snapshot = clonePlain(drawing.serialize());
+    const live = actions.resolve() ?? drawing;
+    const snapshot = 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,
@@ -33781,7 +34261,7 @@ var DrawingSettingsPopup = class {
       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({
@@ -34952,6 +35432,12 @@ var UserDrawingController = class {
       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;
@@ -35942,9 +36428,10 @@ function computePaneScale(models, bars, includeCandles, i0, i1, drawings, log =
     consider(drawings.max);
   }
   if (min === Infinity || max === -Infinity) return { min: 0, max: 1 };
-  if (min === max) {
-    const pad = Math.abs(min) * 0.1 || 1;
-    return { min: min - pad, max: max + pad, log: log && min - pad > 0 };
+  if (max - min <= Math.max(Math.abs(min), Math.abs(max)) * 1e-12) {
+    const mid = (min + max) / 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;
@@ -36448,7 +36935,9 @@ function bandEdgeSlot(logical) {
   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;
   }
@@ -36525,9 +37014,8 @@ var BackdropRenderer = class {
       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);
@@ -37014,8 +37502,16 @@ var NativeRenderer = class {
     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}). */
     /**
@@ -37048,7 +37544,7 @@ var NativeRenderer = class {
     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). */
@@ -37165,6 +37661,8 @@ var NativeRenderer = class {
     // 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) ──
@@ -37220,8 +37718,9 @@ var NativeRenderer = class {
     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) => {
@@ -37265,6 +37764,7 @@ var NativeRenderer = class {
       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);
   }
@@ -37403,6 +37903,15 @@ var NativeRenderer = class {
       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;
@@ -37518,6 +38027,10 @@ var NativeRenderer = class {
         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":
@@ -38191,6 +38704,12 @@ var NativeRenderer = class {
     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");
@@ -38198,7 +38717,7 @@ var NativeRenderer = class {
     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();
@@ -38256,13 +38775,14 @@ var NativeRenderer = class {
       drawingsPointerDown: (x, y, snap, shift2, mod) => this.userDrawings?.pointerDown(x, y, snap, shift2, mod),
       drawingsPointerMove: (x, y, snap, shift2, mod) => this.userDrawings?.pointerMove(x, y, snap, shift2, mod),
       drawingsPointerUp: (x, y, snap) => this.userDrawings?.pointerUp(x, y, snap),
-      drawingsCursor: (x, y) => this.userDrawings?.cursorAt(x, y) ?? (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();
@@ -38571,6 +39091,8 @@ var NativeRenderer = class {
     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");
@@ -38917,14 +39439,21 @@ var NativeRenderer = class {
     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);
@@ -39154,7 +39683,7 @@ var NativeRenderer = class {
     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;
@@ -39729,10 +40258,31 @@ var NativeRenderer = class {
       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_ID2);
@@ -40526,7 +41076,7 @@ var NativeRenderer = class {
     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 */);
     }
@@ -44541,7 +45091,8 @@ var Vela = class {
       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") {
@@ -46059,16 +46610,25 @@ var CellControls = class {
 // src/widget/context-menu.ts
 var PRICE_AXIS_W = 60;
 var TIME_AXIS_H3 = 26;
+var OFF_PLOT = { price: null, time: null, paneKind: null };
 var ChartContextMenu = class {
   constructor(host, cbs) {
     this.cbs = cbs;
     this.chart = null;
+    this.offCrosshair = null;
+    /** The bound chart's latest crosshair report — a right-click always follows a pointer
+     *  move to its spot, so this is where it landed. */
+    this.crosshair = OFF_PLOT;
+    /** {@link crosshair} as it stood when the menu opened: the pointer moves on through the
+     *  menu before a row is picked, and `run` must see the right-clicked spot. */
+    this.pointer = OFF_PLOT;
     this.lastZone = "body";
     /** The pane whose scale the open price-axis menu targets (null ⇒ the main scale). */
     this.lastPane = null;
     this.onContextMenu = (e) => {
       e.preventDefault();
       if (!this.chart) return;
+      this.pointer = this.crosshair;
       this.lastZone = this.zoneOf(e);
       this.lastPane = this.lastZone === "price-axis" ? this.paneAt(e) : null;
       this.menu.setItems(this.itemsFor(this.lastZone));
@@ -46082,15 +46642,23 @@ var ChartContextMenu = class {
       // Pointer-anchored action menu: checked state reads as a leading ✓, not a
       // washed row (which would read as hover in a menu with no trigger button).
       checkmarks: true,
+      iconBadges: true,
       onSelect: (id) => this.run(id)
     });
     host.addEventListener("contextmenu", this.onContextMenu);
   }
   /** (Re)bind to a chart instance — called after every widget rebuild. */
   onChart(chart) {
+    this.offCrosshair?.();
     this.chart = chart;
+    this.crosshair = OFF_PLOT;
+    this.offCrosshair = chart.renderer.onCrosshairMove((e) => {
+      this.crosshair = { price: e.price, time: e.time, paneKind: e.paneKind ?? null };
+    });
   }
   destroy() {
+    this.offCrosshair?.();
+    this.offCrosshair = null;
     this.host.removeEventListener("contextmenu", this.onContextMenu);
     this.menu.destroy();
   }
@@ -46109,49 +46677,52 @@ var ChartContextMenu = class {
   flag(feature) {
     return Boolean(this.chart?.renderer.get(feature));
   }
-  contributed(zone) {
+  /** A fresh widget context carrying the pointer captured at open. Copied by property
+   *  descriptor: the context's getters must stay LIVE, and a spread would freeze them. */
+  context() {
     const ctx = this.cbs.getContext?.();
-    return widgetActions(`context:${zone}`, ctx).map((a, i) => ({
-      id: `action:${a.id}`,
-      label: a.label,
-      icon: a.icon,
-      separatorBefore: i === 0
+    if (!ctx) return void 0;
+    return Object.create(Object.getPrototypeOf(ctx), {
+      ...Object.getOwnPropertyDescriptors(ctx),
+      pointer: { value: this.pointer, enumerable: true }
+    });
+  }
+  contributed(zone) {
+    return widgetActions(`context:${zone}`, this.context()).map((a) => ({
+      item: { id: `action:${a.id}`, label: a.label, icon: a.icon },
+      order: a.order
     }));
   }
   itemsFor(zone) {
+    return composeMenu(zone, this.builtinItems(zone), this.contributed(zone));
+  }
+  builtinItems(zone) {
     if (zone === "price-axis") {
       const pane = this.lastPane;
-      return [
-        ...priceAxisItems({
-          auto: this.chart?.renderer.get("autoScale") !== false,
-          invert: pane ? pane.invert : this.flag("invertScale"),
-          choice: scaleChoiceOf(pane ?? { mode: String(this.chart?.renderer.get("scaleMode") ?? "price"), log: this.flag("logScale") }),
-          axisLabels: this.flag("axisLabels"),
-          priceLabel: this.flag("priceLabel"),
-          countdown: this.flag("countdown"),
-          priceLine: this.flag("currentPriceLine")
-        }),
-        ...this.contributed(zone)
-      ];
+      return priceAxisItems({
+        auto: this.chart?.renderer.get("autoScale") !== false,
+        invert: pane ? pane.invert : this.flag("invertScale"),
+        choice: scaleChoiceOf(pane ?? { mode: String(this.chart?.renderer.get("scaleMode") ?? "price"), log: this.flag("logScale") }),
+        axisLabels: this.flag("axisLabels"),
+        priceLabel: this.flag("priceLabel"),
+        countdown: this.flag("countdown"),
+        priceLine: this.flag("currentPriceLine")
+      });
     }
     if (zone === "time-axis") {
-      const tz = this.cbs.timezone?.() ?? String(this.chart?.renderer.get("timezone") ?? "Etc/UTC");
-      return [...timeAxisItems(tz), ...this.contributed("time-axis")];
+      return timeAxisItems(this.cbs.timezone?.() ?? String(this.chart?.renderer.get("timezone") ?? "Etc/UTC"));
     }
     const chart = this.chart;
-    return [
-      ...bodyItems({
-        drawings: chart?.drawings.supported ? chart.drawings.all().length : 0,
-        indicators: chart?.indicators().length ?? 0
-      }),
-      ...this.contributed("body")
-    ];
+    return bodyItems({
+      drawings: chart?.drawings.supported ? chart.drawings.all().length : 0,
+      indicators: chart?.indicators().length ?? 0
+    });
   }
   run(id) {
     const chart = this.chart;
     if (!chart) return;
     if (id.startsWith("action:")) {
-      const ctx = this.cbs.getContext?.();
+      const ctx = this.context();
       if (ctx) widgetActions(`context:${this.lastZone}`, ctx).find((a) => a.id === id.slice("action:".length))?.run(ctx);
       return;
     }
@@ -46275,8 +46846,8 @@ function seedDefaults(opts) {
   };
 }
 function cellChartDefaults(opts) {
-  const { renderer, defaultLanguage, currentPriceLine, logScale, animations, glow, upColor, downColor, drawings, settings } = opts;
-  return { renderer, defaultLanguage, currentPriceLine, logScale, animations, glow, upColor, downColor, drawings, settings };
+  const { renderer, defaultLanguage, currentPriceLine, logScale, animations, glow, upColor, downColor, drawings, settings, priceAxis } = opts;
+  return { renderer, defaultLanguage, currentPriceLine, logScale, animations, glow, upColor, downColor, drawings, settings, priceAxis };
 }
 function cellDrawings(opt) {
   if (opt === false) return false;
@@ -46846,12 +47417,14 @@ var ChartCell = class {
     this.watermarkOn = visible;
     this.watermark?.setVisible(visible);
     this.deps.onStateDirty();
+    this.deps.onStatusPrefsChanged(this.id);
   }
   /** Show/hide the "Replay" line under this cell's watermark while it replays (persisted per cell). */
   setReplayWatermarkVisible(visible) {
     this.replayWatermarkOn = visible;
     this.watermark?.setReplayVisible(visible);
     this.deps.onStateDirty();
+    this.deps.onStatusPrefsChanged(this.id);
   }
   /** Show/hide this cell's indicator titles — the in-chart legend rows (persisted per cell). */
   setIndicatorTitlesVisible(visible) {
@@ -46872,18 +47445,20 @@ var ChartCell = class {
     this.statusline?.setPartVisible(part, visible);
     this.deps.onStatusPrefsChanged(this.id);
   }
-  /** This cell's Status line tab prefs as one bundle (see {@link CellStatusPrefs}). */
+  /** This cell's Status line tab and watermark prefs as one bundle (see {@link CellStatusPrefs}). */
   statusPrefs() {
     const sl = this.statusline;
     return {
       parts: sl ? { logo: sl.partVisible("logo"), name: sl.partVisible("name"), market: sl.partVisible("market"), ohlc: sl.partVisible("ohlc"), change: sl.partVisible("change") } : null,
       indicatorTitles: this.indicatorTitlesOn,
-      indicatorValues: this.indicatorValuesOn
+      indicatorValues: this.indicatorValuesOn,
+      watermark: this.watermarkOn,
+      replayWatermark: this.replayWatermarkOn
     };
   }
-  /** Converge this cell's Status line tab prefs to `prefs` — the follower half of
-   *  the workspace's style link. Idempotent: matching values change nothing, so a
-   *  propagated echo dies on its own. */
+  /** Converge this cell's Status line tab and watermark prefs to `prefs` — the
+   *  follower half of the workspace's style link. Idempotent: matching values change
+   *  nothing, so a propagated echo dies on its own. */
   applyStatusPrefs(prefs) {
     if (prefs.parts && this.statusline) {
       for (const part of Object.keys(prefs.parts)) {
@@ -46892,6 +47467,8 @@ var ChartCell = class {
     }
     if (prefs.indicatorTitles !== this.indicatorTitlesOn) this.setIndicatorTitlesVisible(prefs.indicatorTitles);
     if (prefs.indicatorValues !== this.indicatorValuesOn) this.setIndicatorValuesVisible(prefs.indicatorValues);
+    if (prefs.watermark !== this.watermarkOn) this.setWatermarkVisible(prefs.watermark);
+    if (prefs.replayWatermark !== this.replayWatermarkOn) this.setReplayWatermarkVisible(prefs.replayWatermark);
   }
   /** The LIVE chart of this cell — never cache it across a layout change (the cell's
    *  identity is what endures; the chart dies with the cell). */
@@ -47802,6 +48379,55 @@ function occupancyGrid(def) {
   const cols = def.cols.length;
   return def.rows.map((_, r) => def.cols.map((_2, c) => def.cells[r * cols + c]?.id ?? `\xB7${r}x${c}`));
 }
+var GLYPH_MIN = 1.5;
+var GLYPH_SPAN = 13;
+function glyphStops(weights, n) {
+  const w = Array.from({ length: n }, (_, i) => {
+    const v = weights[i];
+    return v !== void 0 && Number.isFinite(v) && v > 0 ? v : 1;
+  });
+  const total = w.reduce((a, b) => a + b, 0);
+  const stops = [GLYPH_MIN];
+  let acc = 0;
+  for (const v of w) {
+    acc += v;
+    stops.push(Math.round((GLYPH_MIN + GLYPH_SPAN * acc / total) * 100) / 100);
+  }
+  return stops;
+}
+function layoutGlyph(def) {
+  const grid = occupancyGrid(def);
+  const rows = grid.length;
+  const cols = grid.reduce((n, row) => Math.max(n, row.length), 0);
+  const xs = glyphStops(def.cols, cols);
+  const ys = glyphStops(def.rows, rows);
+  const at = (r, c) => grid[r]?.[c];
+  const seams = [];
+  for (let c = 1; c < cols; c += 1) {
+    let start = -1;
+    for (let r = 0; r <= rows; r += 1) {
+      const split = r < rows && at(r, c - 1) !== at(r, c);
+      if (split && start < 0) start = r;
+      if (!split && start >= 0) {
+        seams.push(`M${xs[c]} ${ys[start]}V${ys[r]}`);
+        start = -1;
+      }
+    }
+  }
+  for (let r = 1; r < rows; r += 1) {
+    let start = -1;
+    for (let c = 0; c <= cols; c += 1) {
+      const split = c < cols && at(r - 1, c) !== at(r, c);
+      if (split && start < 0) start = c;
+      if (!split && start >= 0) {
+        seams.push(`M${xs[start]} ${ys[r]}H${xs[c]}`);
+        start = -1;
+      }
+    }
+  }
+  const frame = `<rect x="${GLYPH_MIN}" y="${GLYPH_MIN}" width="${GLYPH_SPAN}" height="${GLYPH_SPAN}" rx="1.5"/>`;
+  return svg16(seams.length > 0 ? `${frame}<path d="${seams.join("")}"/>` : frame);
+}
 function gridStyles(def, trackSizes) {
   const cols = trackSizes?.cols?.length === def.cols.length ? trackSizes.cols : def.cols;
   const rows = trackSizes?.rows?.length === def.rows.length ? trackSizes.rows : def.rows;
@@ -48333,7 +48959,8 @@ var VelaWorkspace = class {
         onToggleSync: (id) => {
           const kind = id;
           this.sync.set(kind, this.syncOpts[kind] ? false : true);
-        }
+        },
+        glyph: () => layoutGlyph(this.def)
       },
       getContext: () => this.context()
     });
@@ -48832,6 +49459,7 @@ var VelaWorkspace = class {
     this.applyGrid();
     this.buildCells();
     this.alignNewCellStyles(preexisting);
+    this.alignNewCellDrawings(preexisting);
     this.syncCellPresentation();
     this.refreshCellControls();
     this.topbar.setLayout(next.id);
@@ -49248,6 +49876,7 @@ var VelaWorkspace = class {
     const chart = cell.chart;
     chart.on("indicator:error", ({ error }) => this.toastHost.show(`[${cell.id}] ${error.message}`, "error", 5e3));
     chart.on("script:run", (run) => this.events.emit("script:run", { ...run, cell: cell.id }));
+    chart.on("priceStyle:change", ({ from, to }) => this.events.emit("cell:priceStyle", { id: cell.id, from, to }));
     chart.on("alert", (alert) => {
       const source = [parseSymbol(cell.symbol).ticker || cell.symbol, timeframeLabel(cell.timeframe), alert.indicator].filter(Boolean).join(" ");
       this.alerts.unshift({ cellId: cell.id, source, title: alert.title ?? "Alert", message: alert.message, time: alert.time });
@@ -49365,12 +49994,66 @@ var VelaWorkspace = class {
     }
   }
   /**
-   * Mirror an origin cell's presentation — the Canvas + Scales-and-lines slice of
-   * its renderer config plus its Status line tab prefs — onto its same-group
-   * followers (the style link). Loop-safe two ways: the busy guard eats the
-   * followers' SYNCHRONOUS echoes (their `applyConfig` re-fires `onConfigChanged`
-   * in the same tick), and the equality short-circuits leave already-converged
-   * followers untouched, so nothing re-emits once the group agrees.
+   * Bring cells minted by a layout change into their drawings group: with the link
+   * on, a NEW cell (fresh slot, or one returning from the pool that missed edits
+   * while dormant) receives the drawings of a pre-existing group peer — the active
+   * cell when it is one. A drawing the arriving cell already holds a linked copy of
+   * is refreshed in place; any other is copied and linked like a freshly synced
+   * drawing, so later edits and removals follow both ways. The arrival is the cell's
+   * starting state, not an edit: it stays out of the cell's undo timeline, and the
+   * busy guard keeps the copies' own events from fanning back out.
+   */
+  alignNewCellDrawings(preexisting) {
+    const setting = this.syncOpts.drawings;
+    if (!setting) return;
+    const ids = [...this.cellsById.keys()];
+    for (const id of ids) {
+      if (preexisting.has(id)) continue;
+      const cell = this.cellsById.get(id);
+      if (!cell?.chart.drawings.supported) continue;
+      const peers = syncTargets(id, setting, ids).filter((p) => preexisting.has(p));
+      if (peers.length === 0) continue;
+      const sourceId = this.activeId && peers.includes(this.activeId) ? this.activeId : peers[0];
+      const source = this.cellsById.get(sourceId);
+      if (!source) continue;
+      const drawings = cell.chart.drawings;
+      this.drawingSyncBusy = true;
+      try {
+        cell.history.silently(() => {
+          const held = new Set(drawings.all().map((d) => d.id));
+          for (const doc of source.chart.drawings.all()) {
+            const group = this.drawingLinks.get(`${sourceId}\0${doc.id}`) ?? /* @__PURE__ */ new Map([[sourceId, doc.id]]);
+            const peerId = group.get(id);
+            if (peerId != null && held.has(peerId)) {
+              drawings.update(peerId, { anchors: doc.anchors, style: doc.style, text: doc.text, props: doc.props });
+              continue;
+            }
+            const copy = drawings.add(doc.type, {
+              paneId: doc.paneId,
+              anchors: doc.anchors,
+              style: doc.style,
+              text: doc.text,
+              props: doc.props,
+              zIndex: doc.zIndex
+            });
+            if (!copy) continue;
+            if (peerId != null) this.drawingLinks.delete(`${id}\0${peerId}`);
+            group.set(id, copy.id);
+            for (const [cellId, dId] of group) this.drawingLinks.set(`${cellId}\0${dId}`, group);
+          }
+        });
+      } finally {
+        this.drawingSyncBusy = false;
+      }
+    }
+  }
+  /**
+   * Mirror an origin cell's presentation — the style-link slice of its renderer
+   * config ({@link styleConfigPatch}) plus its Status line and watermark prefs —
+   * onto its same-group followers (the style link). Loop-safe two ways: the busy
+   * guard eats the followers' SYNCHRONOUS echoes (their `applyConfig` re-fires
+   * `onConfigChanged` in the same tick), and the equality short-circuits leave
+   * already-converged followers untouched, so nothing re-emits once the group agrees.
    */
   propagateStylePrefs(originId) {
     if (this.styleSyncBusy || this.destroyed) return;
@@ -49378,17 +50061,15 @@ var VelaWorkspace = class {
     if (targets.length === 0) return;
     const origin = this.cellsById.get(originId);
     if (!origin) return;
-    const slice = styleConfigSlice(origin.chart.renderer.getConfig());
-    const sliceJson = slice ? JSON.stringify(slice) : null;
+    const config = origin.chart.renderer.getConfig();
     const prefs = origin.statusPrefs();
     this.styleSyncBusy = true;
     try {
       for (const id of targets) {
         const cell = this.cellsById.get(id);
         if (!cell) continue;
-        if (slice && sliceJson !== JSON.stringify(styleConfigSlice(cell.chart.renderer.getConfig()))) {
-          cell.chart.renderer.applyConfig(slice);
-        }
+        const patch = styleConfigPatch(config, cell.chart.renderer.getConfig());
+        if (patch) cell.chart.renderer.applyConfig(patch);
         cell.applyStatusPrefs(prefs);
       }
     } finally {
@@ -49709,7 +50390,8 @@ var VelaWorkspace = class {
         onToggleSync: (id) => {
           const kind = id;
           this.sync.set(kind, this.syncOpts[kind] ? false : true);
-        }
+        },
+        glyph: () => layoutGlyph(this.def)
       },
       onOpenChange: (open2) => this.trackDialog(open2)
     }));