@luxalgo/vela 0.8.1 → 0.8.3

package/dist/workspace.cjs

@@ -1256,6 +1256,7 @@ registerIcon("expand", S('<rect x="2.2" y="2.2" width="11.6" height="11.6" rx="1
 registerIcon("plus", S('<path d="M8 2.8v10.4M2.8 8h10.4"/>'));
 registerIcon("minus", S('<path d="M2.8 8h10.4"/>'));
 registerIcon("maximize", S('<path d="M2.5 6V3a.5.5 0 0 1 .5-.5h3M10 2.5h3a.5.5 0 0 1 .5.5v3M13.5 10v3a.5.5 0 0 1-.5.5h-3M6 13.5H3a.5.5 0 0 1-.5-.5v-3"/>'));
+registerIcon("restore", S('<path d="M6 2.5v3a.5.5 0 0 1-.5.5h-3M13.5 6h-3a.5.5 0 0 1-.5-.5v-3M10 13.5v-3a.5.5 0 0 1 .5-.5h3M2.5 10h3a.5.5 0 0 1 .5.5v3"/>'));
 registerIcon("restore", S('<path d="M6.2 2.5v3.7H2.5M9.8 13.5V9.8h3.7M13.5 6.2H9.8V2.5M2.5 9.8h3.7v3.7"/>'));
 registerIcon("star", S('<path d="M8 2.2l1.75 3.55 3.9.55-2.8 2.75.65 3.9L8 11.1l-3.5 1.85.65-3.9-2.8-2.75 3.9-.55z"/>'));
 registerIcon("star-filled", S('<path d="M8 2.2l1.75 3.55 3.9.55-2.8 2.75.65 3.9L8 11.1l-3.5 1.85.65-3.9-2.8-2.75 3.9-.55z"/>', 'fill="currentColor"'));
@@ -1337,6 +1338,17 @@ function nextUid(prefix) {
   return `${prefix}-${++uid}`;
 }
 
+// src/ui/surface-events.ts
+var SURFACE_OPEN_EVENT = "vela:surface-open";
+var SURFACE_CLOSE_EVENT = "vela:surface-close";
+function announceSurface(el, open2, kind, trigger = null) {
+  const View = el.ownerDocument.defaultView;
+  if (!View) return;
+  el.dispatchEvent(
+    new View.CustomEvent(open2 ? SURFACE_OPEN_EVENT : SURFACE_CLOSE_EVENT, { bubbles: true, composed: true, detail: { kind, trigger } })
+  );
+}
+
 // src/ui/keymap.ts
 var KEY_ALIASES = {
   esc: "escape",
@@ -1553,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,
@@ -1634,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 {
@@ -1698,11 +1788,16 @@ var Surface = class _Surface {
     /** Trigger rect captured when this level opened — the list stays put if the
      *  trigger then moves (favorite chips shifting the caret). */
     this.pinnedAnchor = null;
+    /** The open state last announced — see {@link announce}. */
+    this.shown = false;
+    /** The list's exit animation after a close; a reopen cancels it. */
+    this.exit = null;
     this.doc = doc;
     this.host = opts.host;
     this.onSelect = opts.onSelect;
     this.onFavorite = opts.onFavorite;
     this.checkmarks = opts.checkmarks === true;
+    this.iconBadges = opts.iconBadges === true;
     this.positioner = doc.createElement("div");
     this.positioner.className = "vela-ui-layer";
     this.list = doc.createElement("ul");
@@ -1711,6 +1806,7 @@ var Surface = class _Surface {
     this.positioner.appendChild(this.list);
     this.host.appendChild(this.positioner);
     const trigger = opts.trigger;
+    this.opener = trigger ?? opts.opener ?? null;
     this.ctrl = menuController({
       items: [],
       id: opts.id,
@@ -1732,15 +1828,37 @@ 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);
+      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);
   }
+  announce(open2) {
+    this.shown = open2;
+    announceSurface(this.list, open2, "menu", this.opener);
+  }
   setItems(items) {
     this.items = items;
     for (const sub2 of this.subs.values()) sub2.destroy();
@@ -1757,7 +1875,9 @@ 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();
   }
   byId(id) {
@@ -1782,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");
@@ -1807,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;
@@ -1851,9 +1984,11 @@ var Surface = class _Surface {
         const sub2 = new _Surface(doc, {
           host: this.host,
           placement: "right-start",
+          opener: li,
           onSelect: this.onSelect,
           onFavorite: this.onFavorite,
           checkmarks: this.checkmarks,
+          iconBadges: this.iconBadges,
           id: `${this.mid}--${item.id}`
         });
         sub2.setItems(item.submenu ?? []);
@@ -1879,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);
   }
@@ -1983,6 +2119,7 @@ var POPOVER_CSS = `
 
 // src/ui/components/popover/view.ts
 var open = null;
+var leaving = /* @__PURE__ */ new Set();
 function closeOpenPopovers() {
   open?.hide();
 }
@@ -2010,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;
@@ -2046,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`;
@@ -2070,16 +2213,21 @@ var Popover = class {
       this.hide();
     };
     const onReflow = () => this.place();
-    setTimeout(() => document.addEventListener("pointerdown", onOutside, true), 0);
+    setTimeout(() => {
+      if (this.onOutside === onOutside) document.addEventListener("pointerdown", onOutside, true);
+    }, 0);
     document.addEventListener("keydown", onKey, true);
     window.addEventListener("resize", onReflow, true);
     document.addEventListener("scroll", onReflow, true);
     this.onOutside = onOutside;
     this.onKey = onKey;
     this.onReflow = onReflow;
+    announceSurface(this.el, true, "popover", this.trigger);
   }
   hide() {
     if (!this.shown) return;
+    this.shown = false;
+    announceSurface(this.el, false, "popover", this.trigger);
     if (this.onOutside) document.removeEventListener("pointerdown", this.onOutside, true);
     if (this.onKey) document.removeEventListener("keydown", this.onKey, true);
     if (this.onReflow) {
@@ -2097,9 +2245,13 @@ 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);
     }
-    this.shown = false;
     if (open === this) open = null;
     this.ctrl.onClose?.();
   }
@@ -2110,6 +2262,7 @@ var Popover = class {
   }
   destroy() {
     this.hide();
+    this.exit?.finish();
   }
   reposition() {
     if (this.shown) this.place();
@@ -2305,6 +2458,11 @@ ${overlayScrollbarCss(".vela-dialog *")}
 `;
 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;
@@ -2401,19 +2559,73 @@ 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);
+      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() {
+    const opener = this.opener;
+    this.opener = null;
+    if (opener?.isConnected) opener.focus({ preventScroll: true });
+  }
+  announce(open2) {
+    const opener = this.opener === this.panel.ownerDocument.body ? null : this.opener;
+    announceSurface(this.panel, open2, "dialog", opener);
   }
   get open() {
     return this.ctrl.connect(this.handle.service).open;
   }
   show() {
+    this.opener = this.panel.ownerDocument.activeElement;
     this.ctrl.connect(this.handle.service).setOpen(true);
   }
   hide() {
@@ -2426,10 +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.backdrop.remove();
-    this.positioner.remove();
+    this.destroyed = true;
+    if (this.wasOpen) {
+      this.wasOpen = false;
+      this.announce(false);
+    }
+    this.restoreOpener();
+    if (!this.exit) this.detach();
   }
 };
 function drawerController(opts = {}) {
@@ -2556,6 +2774,11 @@ function swipeDirection(dx, dy) {
 }
 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;
@@ -2583,12 +2806,24 @@ 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);
+      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;
     });
   }
   /** Any element between `from` and the panel that has already been scrolled down —
@@ -2697,19 +2932,67 @@ 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() {
+    const opener = this.opener;
+    this.opener = null;
+    if (opener?.isConnected) opener.focus({ preventScroll: true });
+  }
+  announce(open2) {
+    const opener = this.opener === this.panel.ownerDocument.body ? null : this.opener;
+    announceSurface(this.panel, open2, "drawer", opener);
+  }
   get open() {
     return this.ctrl.connect(this.handle.service).open;
   }
   show() {
+    this.opener = this.panel.ownerDocument.activeElement;
     this.ctrl.connect(this.handle.service).setOpen(true);
   }
   hide() {
     this.ctrl.connect(this.handle.service).setOpen(false);
   }
   destroy() {
+    if (this.wasOpen && !this.open) this.handle.flush();
     this.handle.stop();
-    this.backdrop.remove();
-    this.positioner.remove();
+    this.destroyed = true;
+    if (this.wasOpen) {
+      this.wasOpen = false;
+      this.announce(false);
+    }
+    this.restoreOpener();
+    if (!this.exit) this.detach();
   }
 };
 
@@ -4845,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;
@@ -4978,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) => {
@@ -4998,6 +5283,7 @@ var LayoutPicker = class {
     const panel = doc.createElement("div");
     panel.className = "vela-lp";
     this.layer.appendChild(panel);
+    this.panel = panel;
     const cols = doc.createElement("div");
     cols.className = "vela-lp-cols";
     panel.appendChild(cols);
@@ -5071,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 = "";
@@ -5079,11 +5367,16 @@ var LayoutPicker = class {
     this.doc.addEventListener("pointerdown", this.onDocPointerDown, true);
     this.doc.addEventListener("keydown", this.onDocKeydown, true);
     this.opts.onOpenChange?.(true);
+    if (this.isOpen) announceSurface(this.panel, true, "popover", this.opts.trigger);
   }
   close() {
     if (!this.isOpen) return;
     this.isOpen = false;
-    this.layer.style.display = "none";
+    announceSurface(this.panel, false, "popover", this.opts.trigger);
+    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);
@@ -5098,6 +5391,7 @@ var LayoutPicker = class {
   }
   destroy() {
     this.close();
+    this.exit?.finish();
     this.infoTip.destroy();
     this.layer.remove();
   }
@@ -5164,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`;
@@ -5288,10 +5582,12 @@ function legendActions() {
 }
 function legendActionsProviderFor(chart, context) {
   return (indicatorId) => {
-    const handle = chart.indicators().find((h) => h.id === indicatorId);
+    const find = () => chart.indicators().find((h) => h.id === indicatorId);
+    const infoOf = (h) => ({ id: h.id, title: h.title, ...h.source !== void 0 ? { source: h.source } : {} });
+    const handle = find();
     if (!handle) return [];
-    const info = { id: handle.id, title: handle.title, ...handle.source !== void 0 ? { source: handle.source } : {} };
-    return legendActions().filter((d) => !d.when || d.when(info)).map((d) => ({ id: d.id, icon: d.icon, tooltip: d.tooltip, run: () => d.run(context(), info) }));
+    const info = infoOf(handle);
+    return legendActions().filter((d) => !d.when || d.when(info)).map((d) => ({ id: d.id, icon: d.icon, tooltip: d.tooltip, run: () => d.run(context(), infoOf(find() ?? handle)) }));
   };
 }
 var calloutRegistry = /* @__PURE__ */ new Map();
@@ -6139,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) {
@@ -6205,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) {
@@ -9489,6 +9792,10 @@ var FibRatios = class extends Drawing {
 
 // src/core/drawings/types/FibLevels.ts
 var FibLevels = class extends FibRatios {
+  /** Price of a level for the two anchor prices; subclasses override to change which anchor ratio 0 sits on. */
+  levelPrice(ratio, p1, p2) {
+    return p1 + ratio * (p2 - p1);
+  }
   /** Per-level pixel line + price for the ENABLED levels, spanning the anchors' time range. */
   levelLines(proj) {
     const a = this.anchors[0];
@@ -9498,11 +9805,10 @@ var FibLevels = class extends FibRatios {
     const xb = proj.xOf(b.time);
     const x1 = Math.min(xa, xb);
     const x2 = Math.max(xa, xb);
-    const delta = b.price - a.price;
     const out = [];
     for (const lv of this.levels) {
       if (!lv.enabled) continue;
-      const price = a.price + lv.ratio * delta;
+      const price = this.levelPrice(lv.ratio, a.price, b.price);
       const y = proj.yOf(price, this.paneId);
       if (y == null) continue;
       out.push({ ratio: lv.ratio, color: lv.color, label: lv.label, price, x1, x2, y });
@@ -9542,8 +9848,7 @@ var FibLevels = class extends FibRatios {
     const a = this.anchors[0];
     const b = this.anchors[1];
     if (!a || !b) return null;
-    const delta = b.price - a.price;
-    const prices = this.levels.filter((l) => l.enabled).map((l) => a.price + l.ratio * delta);
+    const prices = this.levels.filter((l) => l.enabled).map((l) => this.levelPrice(l.ratio, a.price, b.price));
     if (prices.length === 0) return null;
     return { min: Math.min(...prices), max: Math.max(...prices) };
   }
@@ -9629,13 +9934,24 @@ function cycleLevels(count, enabledCount = count) {
 // src/core/drawings/types/FibRetracement.ts
 var LEVELS = fibLevels([0, 0.236, 0.382, 0.5, 0.618, 0.786, 1]);
 var FibRetracement = class extends FibLevels {
-  constructor() {
-    super(...arguments);
+  constructor(init) {
+    super(init);
     this.type = "fibretracement";
+    if (this.reverse === void 0) this.reverse = false;
   }
   defaultLevels() {
     return LEVELS;
   }
+  levelPrice(ratio, p1, p2) {
+    return this.reverse ? p1 + ratio * (p2 - p1) : p2 + ratio * (p1 - p2);
+  }
+  writeProps() {
+    return { ...super.writeProps(), reverse: this.reverse };
+  }
+  readProps(props) {
+    super.readProps(props);
+    this.reverse = typeof props.reverse === "boolean" ? props.reverse : true;
+  }
 };
 
 // src/core/drawings/types/FibExtension.ts
@@ -12762,6 +13078,32 @@ var CSS5 = `
 .vela-panel-pin .vela-icon { width: 15px; height: 15px; }
 .vela-panel-pin:hover { background: var(--vela-hover); color: var(--vela-fg-bright); }
 .vela-panel-pin[data-on='1'] { color: var(--vela-fg-bright); }
+.vela-panel-max {
+    all: unset;
+    cursor: pointer;
+    width: 26px;
+    height: 26px;
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    color: var(--vela-fg-muted);
+}
+.vela-panel-max .vela-icon { width: 15px; height: 15px; }
+.vela-panel-max:hover { background: var(--vela-hover); color: var(--vela-fg-bright); }
+/* MAXIMIZED: the panel covers the whole dock host \u2014 every chart of the shell \u2014 whatever
+   its placement; the width handle and the pin have nothing to do meanwhile. */
+.vela-panel[data-maximized] {
+    position: absolute;
+    inset: 0;
+    width: auto;
+    max-width: none;
+    z-index: 26;
+    border-left: none;
+}
+.vela-panel[data-maximized] .vela-panel-resizer,
+.vela-panel[data-maximized] .vela-panel-pin { display: none; }
 .vela-panel-body { flex: 1; overflow: auto; padding: 8px; }
 .vela-panel-body::-webkit-scrollbar { width: 8px; }
 .vela-panel-body::-webkit-scrollbar-thumb { background: var(--vela-scroll); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; }
@@ -12814,6 +13156,7 @@ var CSS5 = `
     border-left: none;
 }
 [data-layout='mobile'] .vela-panel-resizer { display: none; }
+[data-layout='mobile'] .vela-panel-max { display: none; }
 `;
 function clampPanelWidth(px, min = DEFAULT_PANEL_MIN_WIDTH, max = DEFAULT_PANEL_MAX_WIDTH) {
   const lo = Number.isFinite(min) && min > 0 ? min : DEFAULT_PANEL_MIN_WIDTH;
@@ -12837,6 +13180,15 @@ var SidePanel = class {
      *  never on a programmatic {@link setOverlay}, for the same reason as widths. */
     this.onPlacementChange = null;
     this.pin = null;
+    this.maxButton = null;
+    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;
@@ -12871,7 +13223,13 @@ var SidePanel = class {
       });
       this.refreshPin();
     }
-    header.append(this.heading, this.slot, ...this.pin ? [this.pin] : [], close);
+    if (opts.maximizable) {
+      this.maxButton = doc.createElement("button");
+      this.maxButton.className = "vela-panel-max";
+      this.maxButton.addEventListener("click", () => this.setMaximized(!this.maximizedOn));
+      this.refreshMaxButton();
+    }
+    header.append(this.heading, this.slot, ...this.pin ? [this.pin] : [], ...this.maxButton ? [this.maxButton] : [], close);
     this.body = doc.createElement("div");
     this.body.className = "vela-panel-body";
     this.el.append(header, this.body);
@@ -12879,13 +13237,65 @@ 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) return;
-    this.el.hidden = !open2;
+  /**
+   * 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.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.isOpen) announceSurface(this.el, true, "panel");
+  }
+  /** Whether the panel covers every chart right now. */
+  get maximized() {
+    return this.maximizedOn;
+  }
+  /** Maximize the panel over the shell's charts, or restore it. A no-op on a panel not
+   *  declared `maximizable`. */
+  setMaximized(maximized) {
+    if (!this.maxButton || maximized === this.maximizedOn) return;
+    this.maximizedOn = maximized;
+    if (maximized) this.el.dataset.maximized = "1";
+    else delete this.el.dataset.maximized;
+    this.refreshMaxButton();
+  }
+  refreshMaxButton() {
+    if (!this.maxButton) return;
+    const doc = this.maxButton.ownerDocument;
+    this.maxButton.replaceChildren(iconEl(this.maximizedOn ? "restore" : "maximize", doc));
+    this.maxButton.title = this.maximizedOn ? "Restore" : "Maximize";
+    this.maxButton.setAttribute("aria-label", this.maxButton.title);
+    this.maxButton.setAttribute("aria-pressed", this.maximizedOn ? "true" : "false");
   }
   /** The scrolling body, for a panel filled from OUTSIDE the class — a contributed panel's
    *  `mount` receives exactly this element. Subclasses use the protected `body`. */
@@ -12937,6 +13347,8 @@ var SidePanel = class {
     this.pin.setAttribute("aria-pressed", pinned ? "true" : "false");
   }
   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
@@ -13241,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) {
@@ -14276,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. */
@@ -14353,19 +14765,22 @@ var PanelDock = class {
   /**
    * (Re)build the CONTRIBUTED panels from the registry — call once after the built-ins, and
    * again on `refreshActions()` so a late registration appears. Contributed panels that are
-   * gone from the registry are dropped; the ones still there are rebuilt, so a replaced
-   * descriptor takes effect.
+   * gone from the registry are dropped and a REPLACED descriptor is rebuilt; a panel whose
+   * descriptor is unchanged stays mounted as it is, so its content and state survive.
    */
   refresh() {
     const openBefore = this.openId;
-    for (const entry of [...this.entries]) if (entry.contributed) this.drop(entry);
-    for (const desc of sidePanels()) {
+    const registered = sidePanels();
+    for (const entry of [...this.entries]) if (entry.contributed && !registered.includes(entry.desc)) this.drop(entry);
+    for (const desc of registered) {
+      if (this.entries.some((e) => e.desc === desc)) continue;
       const panel = new SidePanel(this.host, desc.title, `vela-panel-${desc.id}`, {
         width: desc.width,
         resizable: desc.resizable,
         minWidth: desc.minWidth,
         maxWidth: desc.maxWidth,
-        overlay: desc.overlay
+        overlay: desc.overlay,
+        maximizable: desc.maximizable
       });
       const entry = {
         id: desc.id,
@@ -14373,10 +14788,19 @@ var PanelDock = class {
         icon: desc.icon,
         order: desc.order ?? DEFAULT_PANEL_ORDER,
         panel,
-        contributed: true
+        contributed: true,
+        desc
       };
       try {
-        entry.handle = desc.mount(this.deps.context(), panel.content, { slot: panel.headerSlot, setTitle: (t) => panel.setTitle(t) }) ?? void 0;
+        const header = {
+          slot: panel.headerSlot,
+          setTitle: (t) => panel.setTitle(t),
+          get maximized() {
+            return panel.maximized;
+          },
+          setMaximized: (on) => panel.setMaximized(on)
+        };
+        entry.handle = desc.mount(this.deps.context(), panel.content, header) ?? void 0;
         if (this.chart) entry.handle?.onChart?.(this.chart);
       } catch (err) {
         console.warn(`[vela] side panel "${desc.id}" failed to mount`, err);
@@ -14435,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). */
@@ -14451,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);
@@ -16127,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;
@@ -16169,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()) {
@@ -16347,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;
@@ -16428,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";
@@ -17708,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 = () => {
@@ -17737,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();
@@ -17845,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();
   }
@@ -18072,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;
@@ -18097,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) {
@@ -18107,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),
@@ -18119,6 +18587,7 @@ var DrawingToolbar = class {
         );
       }
     }
+    announceSurface(fly, true, "menu", cell);
   }
   openMagnetFlyout() {
     const cell = this.magnetCell;
@@ -18142,6 +18611,7 @@ var DrawingToolbar = class {
         })
       );
     }
+    announceSurface(fly, true, "menu", cell);
   }
   flyoutHeader(text) {
     const t = this.theme;
@@ -18155,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;
@@ -18210,9 +18683,16 @@ var DrawingToolbar = class {
   }
   closeFlyout() {
     this.starEls.clear();
-    if (this.flyout) {
-      this.flyout.remove();
+    const fly = this.flyout;
+    if (fly) {
       this.flyout = null;
+      announceSurface(fly, false, "menu", this.flyoutCell);
+      const owner = this.flyoutOwnerId ?? "";
+      const exit = holdForExit(fly, () => {
+        if (this.exitingFlyouts.get(owner)?.fly === fly) this.exitingFlyouts.delete(owner);
+        fly.remove();
+      });
+      if (exit) this.exitingFlyouts.set(owner, { fly, exit });
       this.flyoutCell?.classList.remove("vela-open");
       this.flyoutCell = null;
       this.flyoutOwnerId = null;
@@ -18296,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;}
@@ -18663,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
@@ -18881,7 +19399,7 @@ var IndicatorHandleImpl = class {
     this.controller.applyProps(this.id, values);
   }
   updateCode(source) {
-    this.controller.updateCode(this.id, source);
+    return this.controller.updateCode(this.id, source);
   }
   setVisible(visible) {
     this.controller.setVisible(this.id, visible);
@@ -19360,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;
@@ -19458,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);
@@ -20744,20 +21264,26 @@ var EngineOrchestrator = class _EngineOrchestrator {
   /**
    * IndicatorController: replace a SCRIPT indicator's source in place (see
    * {@link IndicatorHandle.updateCode}). Prepare-first: the running session keeps
-   * computing until the new source has compiled, so a broken edit costs the user
-   * nothing but an `error` event. Natives have no script — warn and leave them alone.
+   * computing until the new source has compiled; then the new code runs on TRIAL until
+   * its first model lands, and a failure before that puts the previous code back.
+   * Natives have no script — warn and leave them alone.
    */
   updateCode(id, source) {
     const record = this.registry.get(id);
     const handle = this.handles.get(id);
-    if (!record || !handle) return;
+    if (!record || !handle) return Promise.resolve({ ok: false, error: new Error(`[vela] updateCode("${id}") \u2014 the indicator is no longer on the chart.`) });
     if (record.native) {
       console.warn(`[vela] updateCode("${id}") \u2014 a native indicator has no script to update.`);
-      return;
+      return Promise.resolve({ ok: false, error: new Error(`[vela] updateCode("${id}") \u2014 a native indicator has no script to update.`) });
     }
-    if (source === record.source && record.pendingSource === void 0) return;
-    record.pendingSource = source;
-    void this.swapSource(id, source, handle);
+    const busy = record.pendingSource !== void 0 || record.codeTrial !== void 0;
+    if (!busy && source === record.source) return Promise.resolve({ ok: true, error: null });
+    return new Promise((resolve) => {
+      (record.codeWaiters ?? (record.codeWaiters = [])).push(resolve);
+      if (record.pendingSource === source || record.pendingSource === void 0 && record.codeTrial && record.source === source) return;
+      record.pendingSource = source;
+      void this.swapSource(id, source, handle);
+    });
   }
   async swapSource(id, source, handle) {
     const engine = this.registry.get(id)?.engine ?? this.engineFor(this.registry.get(id)?.options?.language);
@@ -20768,26 +21294,41 @@ var EngineOrchestrator = class _EngineOrchestrator {
       const record2 = this.registry.get(id);
       if (record2?.pendingSource === source) {
         record2.pendingSource = void 0;
-        this.fail(id, handle, err);
+        this.rejectCode(id, record2, handle, err);
       }
       return;
     }
     const record = this.registry.get(id);
     if (!record || record.pendingSource !== source) return;
     record.pendingSource = void 0;
+    const previous = record.codeTrial?.previous ?? {
+      source: record.source,
+      engine: record.engine,
+      prepared: record.prepared,
+      inputValues: record.inputValues,
+      propValues: record.propValues,
+      inputs: [...handle.inputs],
+      props: [...handle.props]
+    };
+    record.inputValues = valuesOnSchema(prepared.inputs, record.inputValues, record.prepared?.inputs);
+    record.propValues = valuesOnSchema(prepared.props ?? [], record.propValues, record.prepared?.props);
     record.source = source;
     record.engine = engine;
     record.prepared = prepared;
     handle.setSource(source);
-    record.inputValues = valuesOnSchema(prepared.inputs, record.inputValues);
-    record.propValues = valuesOnSchema(prepared.props ?? [], record.propValues);
     handle.setSchema(prepared.inputs);
     handle.setPropsSchema(prepared.props ?? []);
     record.session?.stop();
     record.session = void 0;
     record.pendingStructural = true;
     record.pendingCause = "code";
-    if (record.hidden) return;
+    if (record.hidden) {
+      record.codeTrial = void 0;
+      if (record.renderHandle) this.renderer.setIndicatorInputs(record.renderHandle, record.inputValues, record.propValues);
+      this.settleCode(record, { ok: true, error: null });
+      return;
+    }
+    record.codeTrial = { previous };
     if (record.renderHandle) {
       this.renderer.setIndicatorInputs(record.renderHandle, record.inputValues, record.propValues);
       this.setLoading(record, true);
@@ -20795,6 +21336,46 @@ var EngineOrchestrator = class _EngineOrchestrator {
       this.mountLoadingPlaceholder(id, record);
     }
     this.executeIndicator(id, handle);
+    if (this.bars.length === 0 && record.codeTrial) {
+      record.codeTrial = void 0;
+      this.settleCode(record, { ok: true, error: null });
+    }
+  }
+  /** Resolve every `updateCode` caller waiting on this record's chain of edits. */
+  settleCode(record, result) {
+    const waiters = record.codeWaiters;
+    record.codeWaiters = void 0;
+    if (waiters) for (const resolve of waiters) resolve(result);
+  }
+  /**
+   * An update failed — at prepare, or on trial before its first model. A trial puts the
+   * previous code back (source, engine, prepared script, values, schema) and restarts it;
+   * its visuals were never dropped, so the chart keeps painting throughout. Then the
+   * failure reports the usual way and every waiting caller learns it.
+   */
+  rejectCode(id, record, handle, err) {
+    const trial = record.codeTrial;
+    record.codeTrial = void 0;
+    this.fail(id, handle, err);
+    if (trial) {
+      const p = trial.previous;
+      record.session?.stop();
+      record.session = void 0;
+      record.source = p.source;
+      record.engine = p.engine;
+      record.prepared = p.prepared;
+      record.inputValues = p.inputValues;
+      record.propValues = p.propValues;
+      handle.setSource(p.source);
+      handle.setSchema(p.inputs);
+      handle.setPropsSchema(p.props);
+      record.pendingStructural = true;
+      record.pendingCause = void 0;
+      if (record.renderHandle) this.renderer.setIndicatorInputs(record.renderHandle, record.inputValues, record.propValues);
+      if (!record.hidden) this.executeIndicator(id, handle);
+    }
+    const error = err instanceof Error ? err : new Error(String(err));
+    this.settleCode(record, { ok: false, error });
   }
   /** IndicatorController: tear down an indicator and (if now empty) its pane. */
   /** Live handles of every indicator on the chart (script + native), insertion order. */
@@ -20809,6 +21390,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
   removeIndicator(id) {
     const record = this.registry.remove(id);
     if (record?.native?.type === "volume") this.volumeOptedOut = true;
+    if (record) this.settleCode(record, { ok: false, error: new Error(`[vela] updateCode("${id}") \u2014 the indicator was removed.`) });
     record?.session?.stop();
     if (record?.native?.started) record.native.instance.stop();
     this.handles.delete(id);
@@ -20836,6 +21418,10 @@ var EngineOrchestrator = class _EngineOrchestrator {
     if (!visible) {
       record.session?.stop();
       record.session = void 0;
+      if (record.codeTrial) {
+        record.codeTrial = void 0;
+        this.settleCode(record, { ok: true, error: null });
+      }
       if (record.native?.started) record.native.instance.suspend();
       if (record.renderHandle) this.renderer.setIndicatorVisible?.(record.renderHandle, false);
       else if (record.native) this.mountHiddenNativeRow(id, record);
@@ -20922,7 +21508,10 @@ 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();
       if (record.native?.started) record.native.instance.stop();
     }
@@ -20991,7 +21580,8 @@ var EngineOrchestrator = class _EngineOrchestrator {
     const record = this.registry.get(id);
     if (!record || !record.engine || !record.prepared || record.hidden) return;
     const mode = this.config.live && !record.prepared.reactsToViewport && record.engine.capabilities.streaming ? "live" : "static";
-    record.session = record.engine.execute(
+    const prepared = record.prepared;
+    const session = record.engine.execute(
       {
         prepared: record.prepared,
         market: this.market(),
@@ -21012,6 +21602,10 @@ var EngineOrchestrator = class _EngineOrchestrator {
           const cause = record.pendingCause ?? "history";
           if (!this.applyModel(id, model)) return;
           record.pendingCause = void 0;
+          if (record.codeTrial) {
+            record.codeTrial = void 0;
+            this.settleCode(record, { ok: true, error: null });
+          }
           this.emitContextChanged(id);
           this.emitScriptRun(id, cause, first);
         },
@@ -21022,9 +21616,17 @@ var EngineOrchestrator = class _EngineOrchestrator {
           handle.emit("alert", { id: a.id, message: a.message, title: a.title, time: a.time });
         },
         onWarning: (w) => this.events.emit("warning", w),
-        onError: (err) => this.fail(id, handle, err)
+        onError: (err) => {
+          if (record.codeTrial) this.rejectCode(id, record, handle, err);
+          else this.fail(id, handle, err);
+        }
       }
     );
+    if (record.prepared !== prepared) {
+      session.stop();
+      return;
+    }
+    record.session = session;
     this.emitContextChanged(id);
   }
   /**
@@ -21525,7 +22127,7 @@ function yieldToPaint() {
   }
   return new Promise((resolve) => setTimeout(resolve, 0));
 }
-function valuesOnSchema(schema, previous) {
+function valuesOnSchema(schema, previous, oldSchema = []) {
   const out = {};
   const declared = /* @__PURE__ */ new Set();
   for (const s of schema) {
@@ -21533,9 +22135,22 @@ function valuesOnSchema(schema, previous) {
     declared.add(s.key);
     declared.add(s.title);
   }
-  for (const [k, v] of Object.entries(previous)) if (declared.has(k)) out[k] = v;
+  const oldDefaults = /* @__PURE__ */ new Map();
+  for (const s of oldSchema) {
+    oldDefaults.set(s.key, s.defval);
+    if (!oldDefaults.has(s.title)) oldDefaults.set(s.title, s.defval);
+  }
+  for (const [k, v] of Object.entries(previous)) {
+    if (!declared.has(k)) continue;
+    if (oldDefaults.has(k) && sameInputValue(oldDefaults.get(k), v)) continue;
+    out[k] = v;
+  }
   return out;
 }
+function sameInputValue(a, b) {
+  if (a === b) return true;
+  return typeof a === "object" && a !== null && typeof b === "object" && b !== null && JSON.stringify(a) === JSON.stringify(b);
+}
 function blankedModel(model) {
   return {
     ...model,
@@ -23100,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;`;
@@ -23386,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. */
@@ -23494,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);
@@ -23506,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()) {
@@ -23597,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);
     });
@@ -23625,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;
@@ -23643,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;`;
@@ -24465,15 +25085,23 @@ var Batch = class {
     this.seg(x + w, y + h, x, y + h, lineWidth, c);
     this.seg(x, y + h, x, y, lineWidth, c);
   }
-  /** Filled circle (triangle fan). */
+  /**
+   * Filled circle (triangle fan), feathered like a line: the rim is padded by {@link AA_PAD} and
+   * edgeDist runs from 0 at the center to the padded radius at the rim, with edgeHalf = r. The
+   * distance grows linearly along each spoke, so the shader's line feather gives a round soft edge.
+   */
   circle(cx, cy, r, c, segments = 16) {
-    let px = cx + r;
+    const ext = r + AA_PAD;
+    let px = cx + ext;
     let py = cy;
+    this.ensure(segments * 3);
     for (let i = 1; i <= segments; i += 1) {
       const a = i / segments * Math.PI * 2;
-      const nx = cx + Math.cos(a) * r;
-      const ny = cy + Math.sin(a) * r;
-      this.tri(cx, cy, c, px, py, c, nx, ny, c);
+      const nx = cx + Math.cos(a) * ext;
+      const ny = cy + Math.sin(a) * ext;
+      this.v(cx, cy, c, 0, r);
+      this.v(px, py, c, ext, r);
+      this.v(nx, ny, c, ext, r);
       px = nx;
       py = ny;
     }
@@ -24654,7 +25282,7 @@ var WebGL2Backend = class {
   }
   mount(canvas) {
     this.canvas = canvas;
-    this.gl = canvas.getContext("webgl2", { alpha: true, antialias: true, depth: false, stencil: false, premultipliedAlpha: true });
+    this.gl = canvas.getContext("webgl2", { alpha: true, antialias: false, depth: false, stencil: false, premultipliedAlpha: true });
     if (!this.gl) return;
     if (!this.initGL()) {
       this.gl = null;
@@ -25879,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;
@@ -25942,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;
       }
@@ -25975,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);
@@ -26065,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);
     };
@@ -26106,7 +26739,7 @@ var InputController = class {
         this.deps.drawingsPointerUp?.(x, y, this.snapMode(e));
       } else if (tapRelease && this.region === "data") {
         this.deps.onClick(x, y);
-      } else if (this.dragging && this.region === "data") {
+      } else if (this.dragging && this.region === "data" && wasTouch) {
         const stale = e.timeStamp - this.lastT > FLING_STALE_MS;
         if (!stale && Math.abs(this.vx) > FLING_MIN_SPEED) {
           const pitch = this.deps.getCoords().pxPerBar();
@@ -26307,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);
@@ -28321,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;
 }
@@ -28522,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;
@@ -28874,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().
@@ -28980,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() };
@@ -28998,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,
@@ -29011,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) {
@@ -29067,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) {
@@ -29315,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;
@@ -29346,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;
@@ -29387,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
@@ -29406,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}`;
@@ -29447,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). */
@@ -32472,6 +33225,12 @@ var DrawingInteraction = class {
   activeDragId() {
     return this.state.kind === "pressed" && this.state.moved ? this.state.id : null;
   }
+  /** The store drawings a live drag is moving — the pressed one and its riders — or none
+   *  before the drag passes the slop. A Ctrl-drag moves copies, so its sources stay put. */
+  movingIds() {
+    if (this.state.kind !== "pressed" || !this.state.moved || this.state.clones) return /* @__PURE__ */ new Set();
+    return /* @__PURE__ */ new Set([this.state.id, ...this.state.riders.map((r) => r.id)]);
+  }
   /** The drawing under a press that has not been released yet (drag or click undecided), or null. */
   pressedId() {
     return this.state.kind === "pressed" ? this.state.id : null;
@@ -32846,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,
@@ -33130,6 +33890,17 @@ var DrawingSettingsDialog = class {
         }
       }));
     }
+    if (drawing instanceof FibRetracement) {
+      const fib = drawing;
+      grid.appendChild(fieldRow({
+        label: "Reverse",
+        bool: true,
+        toggle: {
+          checked: fib.reverse,
+          onChange: (v) => actions.patch({ reverse: v })
+        }
+      }));
+    }
     levels.forEach((lv, i) => {
       const row = document.createElement("div");
       row.className = "vela-field-span";
@@ -33490,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({
@@ -34283,6 +35054,8 @@ var UserDrawingController = class {
     this.drawings = [];
     /** Ids painted on an interleave layer this frame — the top canvas paints only their handles. */
     this.sliced = /* @__PURE__ */ new Set();
+    /** Interleaved drawings mid-drag: painted on the top canvas, left out of their slice. */
+    this.lifted = /* @__PURE__ */ new Set();
     /** Cached slice canvases, keyed `paneId|beforeZ`, reused across frames to avoid churn. */
     this.sliceCache = /* @__PURE__ */ new Map();
     /** Series boundaries per pane as of the last `prepareSlices` — lets a repaint between data
@@ -34370,7 +35143,7 @@ var UserDrawingController = class {
       selectedIds: () => this.selectedIds,
       emit: (i) => this.emit(i),
       changed: () => {
-        this.invalidateSlices();
+        this.syncLift();
         this.render();
       },
       openSettings: (id, x, y) => this.openSettingsById(id, x, y),
@@ -34659,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;
@@ -34996,6 +35775,20 @@ var UserDrawingController = class {
   /** A drawing that paints inside the series stack changed (content, not hover): its pixels
    *  live in the backend composite, so this layer alone can't show the change — ask for a
    *  data frame, which re-runs `prepareSlices` before the backend composites. */
+  /** A drawing being dragged leaves its interleave slice for the top canvas, so each pointer
+   *  move repaints one 2D layer instead of re-rasterizing and re-uploading a plot-sized slice
+   *  texture through the data frame. The slices rebuild once as the drag starts and once as it
+   *  ends (release, cancel), when the lifted set changes. */
+  syncLift() {
+    const moving = this.interaction.movingIds();
+    let same = moving.size === this.lifted.size;
+    if (same) {
+      for (const id of moving) if (!this.lifted.has(id)) same = false;
+    }
+    if (same) return;
+    this.lifted = new Set(moving);
+    this.invalidateSlices();
+  }
   invalidateSlices() {
     if (this.sliced.size > 0 || this.drawings.some((d) => this.isInterleaved(d))) this.deps.requestDataPaint();
   }
@@ -35014,7 +35807,7 @@ var UserDrawingController = class {
     const theme = this.deps.theme();
     const buckets = /* @__PURE__ */ new Map();
     for (const d of this.drawings) {
-      if (!d.visible) continue;
+      if (!d.visible || this.lifted.has(d.id)) continue;
       const beforeZ = sliceKeyFor(d.zIndex, this.lastBounds.get(d.paneId) ?? []);
       if (beforeZ === null) continue;
       const key = `${d.paneId}|${beforeZ}`;
@@ -35066,8 +35859,9 @@ var UserDrawingController = class {
       mutedLabel: edited instanceof TextLabel ? edited.id : null
     };
     this.painter.seriesLook = this.deps.seriesLook();
-    this.painter.paintAll(ctx, this.drawings.filter((d) => !this.isInterleaved(d)), proj, this.deps.theme(), targets);
-    this.painter.paintHighlights(ctx, this.drawings.filter((d) => this.isInterleaved(d)), proj, handleIdsFor(targets));
+    const onTop = (d) => !this.isInterleaved(d) || this.lifted.has(d.id);
+    this.painter.paintAll(ctx, this.drawings.filter(onTop), proj, this.deps.theme(), targets);
+    this.painter.paintHighlights(ctx, this.drawings.filter((d) => !onTop(d)), proj, handleIdsFor(targets));
     const clones = this.interaction.dragClones();
     if (clones) this.painter.paintAll(ctx, clones, proj, this.deps.theme(), { selected: new Set(clones.map((c) => c.id)) });
     this.layoutTextEditor();
@@ -35634,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;
@@ -36140,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;
   }
@@ -36217,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);
@@ -36706,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}). */
     /**
@@ -36740,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). */
@@ -36857,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) ──
@@ -36912,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) => {
@@ -36957,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);
   }
@@ -37095,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;
@@ -37210,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":
@@ -37883,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");
@@ -37890,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();
@@ -37948,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();
@@ -38263,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");
@@ -38609,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);
@@ -38846,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;
@@ -39421,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);
@@ -40218,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 */);
     }
@@ -44233,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") {
@@ -44723,6 +45582,9 @@ var CSS21 = `
 .vela-statusline .vela-sl-market { align-self: center; display: inline-flex; }
 .vela-statusline .vela-sl-market > [hidden] { display: none !important; }
 .vela-statusline .vela-sl-replay-badge, .vela-statusline .vela-sl-replay-badge svg { display: block; width: 16px; height: 16px; }
+/* Tabular figures: every digit has one advance, so a readout whose text changes only in
+ * its digits keeps its width \u2014 render() skips the ladder for those (see widthKey). */
+.vela-statusline .vela-sl-values { font-variant-numeric: tabular-nums; }
 .vela-statusline .vela-sl-ohlc { display: flex; gap: var(--vela-space-1); color: var(--vela-fg-muted); }
 .vela-statusline .vela-sl-ohlc b { color: var(--vela-fg); font-weight: 500; }
 /* The change value wears the SAME ink as the OHLC values (set inline per render) \u2014
@@ -44840,6 +45702,10 @@ var Statusline = class {
     this.fitRO = null;
     /** The ladder rung currently applied — see {@link fit}. */
     this.layout = { stacked: false, level: "full" };
+    /** The readout {@link widthKey} the applied rung was fitted to. */
+    this.fitKey = null;
+    /** Web fonts landing after the last fit change every width without a resize. */
+    this.onFontsLoaded = () => this.fit();
     this.onContextMenu = (e) => {
       if (!this.menu || !this.menuHooks) return;
       e.preventDefault();
@@ -44903,6 +45769,7 @@ var Statusline = class {
       this.fitRO = new ResizeObserver(() => this.fit());
       this.fitRO.observe(host);
     }
+    doc.fonts?.addEventListener("loadingdone", this.onFontsLoaded);
     this.marketTip = new Tooltip(this.marketEl, { content: MARKET_LABELS.open, placement: "bottom" });
     this.eyeTip = new Tooltip(this.eyeEl, { content: "Show chart", placement: "bottom" });
     this.setMarketStatus("open");
@@ -44955,6 +45822,7 @@ var Statusline = class {
    * (detached host, node tests) nothing overflows, so the widest rung stays.
    */
   fit() {
+    this.fitKey = this.widthKey();
     this.syncParts();
     const seg = segmentVisibility(this.parts, this.chartHidden);
     const overflows = () => this.el.scrollWidth > this.el.clientWidth;
@@ -45111,6 +45979,7 @@ var Statusline = class {
     this.detach();
     this.fitRO?.disconnect();
     this.fitRO = null;
+    this.el.ownerDocument.fonts?.removeEventListener("loadingdone", this.onFontsLoaded);
     this.el.removeEventListener("contextmenu", this.onContextMenu);
     this.menu?.destroy();
     this.menu = null;
@@ -45126,7 +45995,22 @@ var Statusline = class {
   }
   render() {
     if (this.menuHooks) this.setChartHidden(!this.menuHooks.chartVisible());
-    this.fit();
+    if (this.widthKey() === this.fitKey) this.renderValues();
+    else this.fit();
+  }
+  /** Everything the readout's width depends on, at every rung: its shape, and each
+   *  value's sign, digit count and decimals (the digits themselves are tabular — see
+   *  the CSS; the grouping commas follow from the digit count). `toFixed` carries all
+   *  three at a fraction of the locale formatter's cost — this runs per pointer move.
+   *  The parts, the host's size and the fonts re-fit through their own paths. */
+  widthKey() {
+    const bar = this.hoverBar ?? this.lastBar;
+    if (!bar) return this.readout;
+    const dp = decimalsFor(bar.close);
+    const diff = bar.close - bar.open;
+    const text = [bar.open, bar.high, bar.low, bar.close, diff].map((v) => v.toFixed(dp));
+    text.push((diff / bar.open * 100).toFixed(2));
+    return `${this.readout} ${text.join(" ")}`.replace(/\d/g, "0");
   }
   /** Write the value readout for the current bar at the current ladder level. */
   renderValues() {
@@ -45726,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));
@@ -45749,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();
   }
@@ -45776,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;
     }
@@ -45942,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;
@@ -46513,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) {
@@ -46539,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)) {
@@ -46559,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). */
@@ -47469,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;
@@ -48000,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()
     });
@@ -48499,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);
@@ -48915,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 });
@@ -49032,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;
@@ -49045,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 {
@@ -49376,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)
     }));