@luxalgo/vela 0.6.3 → 0.6.5

package/dist/widget.cjs

@@ -9878,7 +9878,7 @@ function attachChromeTooltip(anchor, opts) {
     } else {
       const left = Math.min(a.left - h.left, Math.max(0, h.width - tip.offsetWidth - 4));
       tip.style.left = `${Math.max(0, left)}px`;
-      tip.style.top = `${a.bottom - h.top + 6}px`;
+      tip.style.top = opts.placement === "above" ? `${Math.max(0, a.top - h.top - tip.offsetHeight - 6)}px` : `${a.bottom - h.top + 6}px`;
     }
   };
   const arm = (e) => {
@@ -10004,6 +10004,23 @@ var MENU_CSS = `
     background: var(--vela-hover-strong);
     color: var(--vela-fg-bright);
 }
+/* Checkmark mode (context/action menus): every row reserves the leading mark column so
+   labels align; a checked row fills it with a \u2713 and brightens its ink \u2014 the row surface
+   stays free for the hover wash. */
+.vela-menu-item .vela-menu-mark {
+    width: 14px;
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+.vela-menu-item .vela-menu-mark .vela-icon {
+    width: 14px;
+    height: 14px;
+    font-size: 14px;
+    color: var(--vela-fg-bright);
+}
+.vela-menu-item[data-checkmark] { color: var(--vela-fg-bright); }
 /* 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 {
@@ -10072,6 +10089,7 @@ var Surface = class _Surface {
     this.host = opts.host;
     this.onSelect = opts.onSelect;
     this.onFavorite = opts.onFavorite;
+    this.checkmarks = opts.checkmarks === true;
     this.positioner = doc.createElement("div");
     this.positioner.className = "vela-ui-layer";
     this.list = doc.createElement("ul");
@@ -10150,6 +10168,7 @@ var Surface = class _Surface {
   build() {
     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);
     for (const item of this.items) {
       if (item.separatorBefore) {
         const sep = doc.createElement("li");
@@ -10163,7 +10182,16 @@ var Surface = class _Surface {
       li.dataset.veiId = item.id;
       if (item.toggle) {
         li.dataset.toggle = "1";
-      } else if (!branch && item.checked) {
+      }
+      if (markable) {
+        const mark = doc.createElement("span");
+        mark.className = "vela-menu-mark";
+        if (!branch && !item.toggle && item.checked) {
+          mark.appendChild(iconEl("check", doc));
+          li.dataset.checkmark = "1";
+        }
+        li.appendChild(mark);
+      } else if (!branch && !item.toggle && item.checked) {
         li.dataset.checked = "1";
       }
       if (item.icon) li.appendChild(iconEl(item.icon, doc));
@@ -10212,6 +10240,7 @@ var Surface = class _Surface {
           placement: "right-start",
           onSelect: this.onSelect,
           onFavorite: this.onFavorite,
+          checkmarks: this.checkmarks,
           id: `${this.mid}--${item.id}`
         });
         sub.setItems(item.submenu ?? []);
@@ -10236,7 +10265,8 @@ var Menu = class {
       triggerId: opts.triggerId,
       id: opts.id,
       minWidth: opts.minWidth,
-      onFavorite: opts.onFavorite
+      onFavorite: opts.onFavorite,
+      checkmarks: opts.checkmarks
     });
     this.root.setItems(opts.items);
   }
@@ -10264,6 +10294,13 @@ var Menu = class {
   }
 };
 
+// src/core/model/inputs.ts
+function inputVisible(when, values) {
+  if (!when) return true;
+  const conds = Array.isArray(when) ? when : [when];
+  return conds.every((c) => c.anyOf ? c.anyOf.some((x) => x === values[c.key]) : values[c.key] === c.equals);
+}
+
 // src/ui/tokens.ts
 var STATIC_ID = "vela-ui-tokens";
 var STATIC_DECLS = Object.entries(STATIC_TOKENS).map(([k, v]) => `    ${k}: ${v};`).join("\n");
@@ -10272,8 +10309,13 @@ var STATIC_CSS = `
 ${STATIC_DECLS}
     font-family: var(--vela-font, -apple-system, system-ui, sans-serif);
     box-sizing: border-box;
+    /* Chrome text (titles, buttons, menus, readouts) is UI, not copy \u2014 never selectable. */
+    user-select: none;
+    -webkit-user-select: none;
 }
 .vela-ui *, .vela-ui-layer * { box-sizing: border-box; }
+/* Text ENTRY is the one exception: selection is part of editing. */
+.vela-ui :is(input, textarea), .vela-ui-layer :is(input, textarea) { user-select: text; -webkit-user-select: text; }
 .vela-icon { display: inline-flex; align-items: center; flex: none; }
 .vela-icon svg { display: block; }
 `;
@@ -11275,6 +11317,9 @@ var NUMBER_CSS = `
     transition: border-color 0.12s ease, box-shadow 0.12s ease;
     -moz-appearance: textfield;
     appearance: textfield;
+    /* Selectable even under a user-select:none host (chart wrapper, .vela-ui). */
+    user-select: text;
+    -webkit-user-select: text;
 }
 .vela-num input::-webkit-inner-spin-button, .vela-num input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
 .vela-num input:hover { border-color: var(--vela-fg-muted); }
@@ -11487,6 +11532,9 @@ var TEXT_CSS = `
     overflow: hidden;
     text-overflow: ellipsis;
     transition: border-color 0.12s ease, box-shadow 0.12s ease;
+    /* Selectable even under a user-select:none host (chart wrapper, .vela-ui). */
+    user-select: text;
+    -webkit-user-select: text;
 }
 .vela-text-field:hover { border-color: var(--vela-fg-muted); }
 .vela-text-field:focus { border-color: var(--vela-focus); box-shadow: 0 0 0 3px var(--vela-focus-soft); }
@@ -11580,6 +11628,9 @@ var TEXTAREA_CSS = `
     resize: vertical;
     outline: none;
     transition: border-color 0.12s ease, box-shadow 0.12s ease;
+    /* Selectable even under a user-select:none host (chart wrapper, .vela-ui). */
+    user-select: text;
+    -webkit-user-select: text;
 }
 .vela-textarea-field:hover { border-color: var(--vela-fg-muted); }
 .vela-textarea-field:focus { border-color: var(--vela-focus); box-shadow: 0 0 0 3px var(--vela-focus-soft); }
@@ -12108,6 +12159,8 @@ var FIELD_CSS = `
     font-size: 14px;
 }
 .vela-field-label[data-size='sm'] { font-size: inherit; opacity: 0.85; }
+/* Titles are fully inert: spans, not label[for] \u2014 native labels propagate :hover and
+   clicks onto their control, and both belong to the input alone. */
 .vela-field-cell { display: flex; align-items: center; gap: 8px; justify-self: start; }
 .vela-field-bool { display: flex; align-items: center; gap: 8px; min-height: 22px; }
 .vela-field-stacked { display: flex; flex-direction: column; gap: 8px; }
@@ -12166,11 +12219,17 @@ function fieldSeparator() {
   return el;
 }
 function labelEl(text, opts) {
-  const el = opts.id ? document.createElement("label") : document.createElement("span");
-  if (opts.id && el instanceof HTMLLabelElement) el.htmlFor = opts.id;
+  const el = document.createElement("span");
   el.className = "vela-field-label";
   if (opts.size) el.dataset.size = opts.size;
   el.textContent = text;
+  const id = opts.id;
+  if (id) {
+    el.id = `${id}--title`;
+    queueMicrotask(() => {
+      el.ownerDocument.getElementById(id)?.setAttribute("aria-labelledby", el.id);
+    });
+  }
   return el;
 }
 function asList(control) {
@@ -12199,9 +12258,7 @@ function fieldRow(opts) {
       it.className = "vela-field-inline-item";
       if (item.toggleFirst) it.style.flexDirection = "row-reverse";
       if (item.label) {
-        const lbl = labelEl(item.label, { id: item.id, size });
-        if (item.toggleFirst) lbl.style.cursor = "pointer";
-        it.appendChild(lbl);
+        it.appendChild(labelEl(item.label, { id: item.id, size }));
       }
       if (item.fit) it.appendChild(item.control);
       else {
@@ -12226,7 +12283,7 @@ function fieldRow(opts) {
       tone: "bright",
       onChange: (v) => opts.toggle?.onChange(v)
     });
-    wrap2.append(sw.el, labelEl(opts.label, { size }));
+    wrap2.append(sw.el, labelEl(opts.label, { id: opts.toggle?.id ?? opts.id, size }));
     if (opts.info) wrap2.appendChild(opts.info);
     if (opts.toggle?.get) {
       const get = opts.toggle.get;
@@ -12265,7 +12322,7 @@ function fieldRow(opts) {
         if (controls.length > 0) dimControls(controls, v);
       }
     });
-    left.append(sw.el, labelEl(opts.label, { size }));
+    left.append(sw.el, labelEl(opts.label, { id: opts.toggle.id ?? opts.id, size }));
     wrap.appendChild(left);
     if (controls.length > 0) dimControls(controls, opts.toggle.checked);
     if (opts.toggle.get) {
@@ -12419,6 +12476,8 @@ var IndicatorInputsDialog = class {
     this.row = null;
     this.snapshot = null;
     this.dialogTips = [];
+    /** Re-applies every `when` gate against current values; set while the dialog is open. */
+    this.refreshVisibility = null;
     this.choicePop = null;
     this.calendarPop = null;
     this.calendarAnchor = null;
@@ -12481,14 +12540,17 @@ var IndicatorInputsDialog = class {
     tabs.style.cssText = `display:flex;gap:12px;padding:0 20px;border-bottom:1px solid ${border};flex:0 0 auto;`;
     const tabEls = [];
     const bodies = [];
+    const gates = [];
+    let active = 0;
     const activate = (idx) => {
+      active = idx;
       for (let i = 0; i < tabEls.length; i += 1) {
-        const active = i === idx;
+        const on = i === idx;
         const el = tabEls[i];
-        el.style.borderBottomColor = active ? fg : "transparent";
-        el.style.color = active ? "inherit" : "var(--vela-fg-muted)";
-        el.classList.toggle("vela-ind-tab-active", active);
-        bodies[i].style.display = active ? "grid" : "none";
+        el.style.borderBottomColor = on ? fg : "transparent";
+        el.style.color = on ? "inherit" : "var(--vela-fg-muted)";
+        el.classList.toggle("vela-ind-tab-active", on);
+        bodies[i].style.display = on ? "grid" : "none";
       }
     };
     for (const [idx, def] of tabDefs.entries()) {
@@ -12499,11 +12561,24 @@ var IndicatorInputsDialog = class {
       tab.addEventListener("click", () => activate(idx));
       tabs.appendChild(tab);
       tabEls.push(tab);
-      bodies.push(this.buildTabBody(def.inputs, row));
+      bodies.push(this.buildTabBody(def.inputs, row, gates));
+      if (def.inputs.every((d) => d.when)) {
+        gates.push({ el: tab, visible: (bag) => def.inputs.some((d) => inputVisible(d.when, bag)) });
+      }
     }
     ui.body.appendChild(tabs);
     for (const b of bodies) ui.body.appendChild(b);
     activate(0);
+    const refresh = () => {
+      const bag = valuesBag(row);
+      for (const g of gates) g.el.style.display = g.visible(bag) ? "" : "none";
+      if (tabEls[active]?.style.display === "none") {
+        const next = tabEls.findIndex((el) => el.style.display !== "none");
+        if (next >= 0) activate(next);
+      }
+    };
+    this.refreshVisibility = refresh;
+    refresh();
     const onBackdropDown = (e) => {
       if (e.target !== ui.backdrop && e.target !== ui.positioner) return;
       if (isPopoverOpen() || eventDismissedPopover(e)) {
@@ -12523,16 +12598,27 @@ var IndicatorInputsDialog = class {
   }
   /** One tab's scrollable body — one shared grid so every group's controls share a
    *  left edge (a 100px number field lines up with a wider session/time pair). */
-  buildTabBody(inputs, row) {
+  buildTabBody(inputs, row, gates) {
     const body = document.createElement("div");
     body.style.cssText = inputDialogBodyStyle(this.host.mobile());
     for (const group of groupInputs(inputs)) {
       const section = document.createElement("div");
       section.style.cssText = "display:contents;";
+      let header = null;
       if (group.name) {
-        section.appendChild(fieldSection(group.name, { variant: "inputs", first: body.childElementCount === 0 }));
+        header = fieldSection(group.name, { variant: "inputs", first: body.childElementCount === 0 });
+        section.appendChild(header);
+      }
+      for (const inputRow of group.rows) {
+        const el = this.buildInputRow(section, inputRow, row);
+        if (inputRow.some((d) => d.when)) {
+          gates.push({ el, visible: (bag) => rowVisible(inputRow, bag) });
+        }
+      }
+      if (header && group.rows.every((r) => r.every((d) => d.when))) {
+        const rows = group.rows;
+        gates.push({ el: header, visible: (bag) => rows.some((r) => rowVisible(r, bag)) });
       }
-      for (const inputRow of group.rows) this.buildInputRow(section, inputRow, row);
       body.appendChild(section);
     }
     return body;
@@ -12540,6 +12626,7 @@ var IndicatorInputsDialog = class {
   close() {
     document.removeEventListener("keydown", this.onDialogKey);
     closeOpenPopovers();
+    this.refreshVisibility = null;
     this.choicePop = null;
     this.calendarPop = null;
     this.calendarAnchor = null;
@@ -12569,11 +12656,21 @@ var IndicatorInputsDialog = class {
     }
     this.close();
   }
+  /** Write one edit through: store it, notify the host, and re-apply the `when` gates. */
+  commit(row, key, value) {
+    row.values[key] = value;
+    this.host.onChange?.({ indicatorId: row.id, key, value });
+    this.refreshVisibility?.();
+  }
   /** One settings row (or several `inline=` inputs) placed into a section's grid. */
   buildInputRow(grid, decls, row) {
     const idOf = (inp) => `vela-inp-${row.id}-${inp.key}`;
+    const append = (el) => {
+      grid.appendChild(el);
+      return el;
+    };
     if (decls.length > 1) {
-      grid.appendChild(fieldRow({
+      return append(fieldRow({
         label: "",
         inline: decls.map((d) => ({
           label: nameOf(d) || void 0,
@@ -12584,14 +12681,13 @@ var IndicatorInputsDialog = class {
         })),
         info: [...decls].reverse().find((d) => d.tooltip)?.tooltip ? this.infoButton([...decls].reverse().find((d) => d.tooltip).tooltip) : void 0
       }));
-      return;
     }
     const lead = decls[0];
     const id = idOf(lead);
     const info = lead.tooltip ? this.infoButton(lead.tooltip) : void 0;
     if (lead.type === "bool") {
       const current = Boolean(row.values[lead.key] ?? lead.defval);
-      grid.appendChild(fieldRow({
+      return append(fieldRow({
         label: nameOf(lead),
         id,
         bool: true,
@@ -12599,26 +12695,21 @@ var IndicatorInputsDialog = class {
         toggle: {
           id,
           checked: current,
-          onChange: (v) => {
-            row.values[lead.key] = v;
-            this.host.onChange?.({ indicatorId: row.id, key: lead.key, value: v });
-          }
+          onChange: (v) => this.commit(row, lead.key, v)
         }
       }));
-      return;
     }
     if (lead.type === "text_area") {
-      grid.appendChild(fieldRow({
+      return append(fieldRow({
         label: nameOf(lead),
         id,
         stacked: true,
         info,
         control: this.buildControl(row, lead, id)
       }));
-      return;
     }
     const fit = lead.type === "color" || lead.type === "session" || lead.type === "time";
-    grid.appendChild(fieldRow({
+    return append(fieldRow({
       label: nameOf(lead),
       id,
       fit,
@@ -12630,10 +12721,7 @@ var IndicatorInputsDialog = class {
   /** Build the typed control for one input, committing edits live via `onChange`. */
   buildControl(row, inp, id) {
     const current = row.values[inp.key] ?? inp.defval;
-    const emit = (value) => {
-      row.values[inp.key] = value;
-      this.host.onChange?.({ indicatorId: row.id, key: inp.key, value });
-    };
+    const emit = (value) => this.commit(row, inp.key, value);
     if (inp.type === "bool") {
       return buildFieldControl({ kind: "switch", id, checked: Boolean(current), onChange: (v) => emit(v) }).el;
     }
@@ -13054,6 +13142,14 @@ function tabInputs(inputs) {
   }
   return names.map((name) => ({ name, inputs: byTab.get(name) }));
 }
+function rowVisible(decls, bag) {
+  return decls.some((d) => inputVisible(d.when, bag));
+}
+function valuesBag(row) {
+  const bag = {};
+  for (const inp of row.inputs) bag[inp.key] = row.values[inp.key] ?? inp.defval;
+  return bag;
+}
 function groupInputs(inputs) {
   const order = [];
   const byGroup = /* @__PURE__ */ new Map();
@@ -13516,6 +13612,8 @@ var InputsUI = class {
         host: this.container,
         items,
         placement: "bottom-start",
+        // Right-click action menu — checked state reads as a leading ✓ (see the kit Menu).
+        checkmarks: true,
         onSelect: (itemId) => {
           if (itemId !== "values" || !this.rowMenuId) return;
           const target = this.rows.get(this.rowMenuId);
@@ -13851,6 +13949,8 @@ var InputsUI = class {
   syncRowActions(row) {
     const open2 = row.highlighted;
     row.controlsEl.style.display = open2 || row.hidden ? "inline-flex" : "none";
+    if (open2) row.el.appendChild(row.statusEl);
+    else row.el.insertBefore(row.statusEl, row.valuesEl);
     for (const child of Array.from(row.controlsEl.children)) {
       if (!(child instanceof HTMLElement) || child === row.eyeEl) continue;
       if (child === row.extrasEl) {
@@ -14094,6 +14194,148 @@ var PaneControls = class {
   }
 };
 
+// src/renderers/native/chrome/axisLayout.ts
+var AXIS_MASTER_W = 64;
+var AXIS_MERGED_W = 56;
+var PANE_SEPARATOR_PX = 3;
+function axisColumnX(dataW, column) {
+  return column === 0 ? dataW : dataW + AXIS_MASTER_W + (column - 1) * AXIS_MERGED_W;
+}
+
+// src/renderers/native/chrome/AxisScaleButtons.ts
+var STYLE_ID2 = "vela-axis-scale-buttons";
+var BTN_PX = 18;
+var BTN_GAP = 4;
+var AXIS_BORDER = 1;
+var CLUSTER_W = AXIS_MASTER_W - AXIS_BORDER;
+var PAD_TOP = 8;
+var PAD_BOTTOM = 6;
+var CLUSTER_H = BTN_PX + PAD_TOP + PAD_BOTTOM;
+var MIN_PANE_H = 48;
+function ensureStyles2() {
+  if (typeof document === "undefined" || document.getElementById(STYLE_ID2)) return;
+  const st = document.createElement("style");
+  st.id = STYLE_ID2;
+  st.textContent = `
+.vela-axis-btn{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:var(--vela-radius-sm);background:transparent;cursor:pointer;font:600 10px/1 -apple-system,Segoe UI,sans-serif;color:var(--vela-fg-muted);}
+.vela-axis-btn:hover{background:var(--vela-active);color:var(--vela-fg-bright);}
+.vela-axis-on,.vela-axis-on:hover{background:var(--vela-selected-bg);color:var(--vela-selected-fg);}
+`;
+  document.head.appendChild(st);
+}
+var AxisScaleButtons = class {
+  constructor(plot, theme, deps) {
+    this.plot = plot;
+    this.theme = theme;
+    this.deps = deps;
+    this.tipDisposers = [];
+    this.hoverPaneId = null;
+    /** Reveal over the master scale column of the pane under the cursor (mouse only —
+     *  touch has no hover, and a drag-rescale on the axis must not sprout buttons). */
+    this.onPlotMove = (e) => {
+      if (e.pointerType !== "mouse") return;
+      const rect = this.plot.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const gutterLeft = rect.width - this.deps.rightAxis();
+      let hit = null;
+      if (x >= gutterLeft && x <= gutterLeft + AXIS_MASTER_W) {
+        const y = e.clientY - rect.top;
+        for (const p of this.deps.panes()) {
+          if (p.collapsed || p.height < MIN_PANE_H) continue;
+          if (y >= p.top && y <= p.top + p.height) {
+            hit = p.id;
+            break;
+          }
+        }
+      }
+      this.setHoverPane(hit);
+      if (hit) this.sync();
+    };
+    this.onPlotLeave = () => this.setHoverPane(null);
+    ensureStyles2();
+    this.cluster = document.createElement("div");
+    Object.assign(this.cluster.style, {
+      position: "absolute",
+      display: "none",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: `${BTN_GAP}px`,
+      padding: `${PAD_TOP}px 0 ${PAD_BOTTOM}px`,
+      width: `${CLUSTER_W}px`,
+      boxSizing: "border-box",
+      zIndex: "6",
+      pointerEvents: "auto"
+    });
+    this.applyTheme();
+    this.autoBtn = this.button("A", "Auto (fits data to screen)", () => this.deps.onToggleAuto(this.hoverPaneId ?? ""));
+    this.logBtn = this.button("L", "Logarithmic scale", () => this.deps.onToggleLog(this.hoverPaneId ?? ""));
+    this.cluster.append(this.autoBtn, this.logBtn);
+    this.plot.appendChild(this.cluster);
+    this.plot.addEventListener("pointermove", this.onPlotMove);
+    this.plot.addEventListener("pointerleave", this.onPlotLeave);
+  }
+  button(label, title, onClick) {
+    const b = document.createElement("button");
+    b.type = "button";
+    b.setAttribute("aria-label", title);
+    b.textContent = label;
+    b.className = "vela-axis-btn";
+    Object.assign(b.style, { width: `${BTN_PX}px`, height: `${BTN_PX}px` });
+    this.tipDisposers.push(attachChromeTooltip(b, {
+      host: this.plot,
+      theme: () => this.theme,
+      text: () => title,
+      placement: "above"
+    }));
+    b.addEventListener("click", (e) => {
+      e.stopPropagation();
+      onClick();
+      this.sync();
+    });
+    return b;
+  }
+  /** Re-tint the chip when the plot background/border change (theme swap, config edit). */
+  setTheme(theme) {
+    this.theme = theme;
+    this.applyTheme();
+  }
+  /** The strip is SOLID chart background: the buttons cover axis labels, never blend with them. */
+  applyTheme() {
+    this.cluster.style.background = this.theme.background;
+  }
+  setHoverPane(paneId) {
+    if (this.hoverPaneId === paneId) return;
+    this.hoverPaneId = paneId;
+    this.reposition();
+  }
+  /** Re-place (or hide) the cluster after a hover or pane-layout change. */
+  reposition() {
+    const pane = this.hoverPaneId ? this.deps.panes().find((p) => p.id === this.hoverPaneId) : void 0;
+    if (!pane || pane.collapsed || pane.height < MIN_PANE_H) {
+      this.cluster.style.display = "none";
+      return;
+    }
+    this.cluster.style.right = `${this.deps.rightAxis() - AXIS_MASTER_W}px`;
+    this.cluster.style.top = `${pane.top + pane.height - CLUSTER_H}px`;
+    this.cluster.style.display = "flex";
+    this.sync();
+  }
+  /** Reflect the hovered pane's current auto/log state on the buttons. */
+  sync() {
+    const pane = this.deps.panes().find((p) => p.id === this.hoverPaneId);
+    if (!pane) return;
+    this.autoBtn.classList.toggle("vela-axis-on", pane.auto);
+    this.logBtn.classList.toggle("vela-axis-on", pane.log);
+  }
+  destroy() {
+    this.plot.removeEventListener("pointermove", this.onPlotMove);
+    this.plot.removeEventListener("pointerleave", this.onPlotLeave);
+    for (const dispose of this.tipDisposers) dispose();
+    this.tipDisposers.length = 0;
+    this.cluster.remove();
+  }
+};
+
 // src/renderers/shared/TableOverlay.ts
 var SIZE_PX3 = {
   auto: 13,
@@ -14451,6 +14693,8 @@ var BASELINE_BOTTOM_LINE = BEARISH;
 var BASELINE_FILL_ALPHA = 0.25;
 var BASELINE_FILL_ALPHA_FAR = 0.05;
 var BASELINE_LEVEL_DEFAULT = 50;
+var PREMARKET_SHADE = withAlpha(WARNING, 0.08);
+var POSTMARKET_SHADE = withAlpha(ACCENT, 0.08);
 function defaultChartStyle() {
   return {
     chartTypes: {},
@@ -14481,7 +14725,8 @@ function defaultChartStyle() {
       bottomFillColor2: null,
       width: 2,
       baselineLevel: BASELINE_LEVEL_DEFAULT
-    }
+    },
+    sessions: { premarketColor: PREMARKET_SHADE, postmarketColor: POSTMARKET_SHADE }
   };
 }
 var LINE_STYLES = ["solid", "dashed", "dotted"];
@@ -14615,6 +14860,7 @@ function mergeConfig(base, patch) {
   const area = asObject(p.area);
   const baseline = asObject(p.baseline);
   const series = asObject(p.series);
+  const sessions = asObject(p.sessions);
   const stacking = asObject(p.stacking);
   const stackSeries = asObject(stacking.series);
   return {
@@ -14707,6 +14953,10 @@ function mergeConfig(base, patch) {
       baseline: series.baseline === null ? null : isNum(series.baseline) ? series.baseline : base.series.baseline,
       spacing: isNum(series.spacing) ? clampSpacing(series.spacing) : base.series.spacing
     },
+    sessions: {
+      premarketColor: isColor(sessions.premarketColor) ? sessions.premarketColor : base.sessions.premarketColor,
+      postmarketColor: isColor(sessions.postmarketColor) ? sessions.postmarketColor : base.sessions.postmarketColor
+    },
     stacking: {
       candles: isNum(stacking.candles) ? stacking.candles : base.stacking.candles,
       // Additive like `chartTypes`: a patch names only the ids it carries; the rest keep
@@ -14953,6 +15203,8 @@ var SceneGraph = class {
     this.tradeMarkers = defaultTradeMarkersState();
     /** Renderer-owned shaded time bands (session highlighting), behind grid + data. */
     this.highlights = [];
+    /** Pre/post-market bands pushed by the host (`sessionZones` feature); null ⇒ no sessions. */
+    this.sessionZones = null;
     /** Draw-order key of the price candles, relative to indicator series z (see `seriesZ`).
      *  Indicators with z below this draw BEHIND the candles; at/above draw in front.
      *  Default 0 with indicators mounting at z < 0 ⇒ the price reads on top of every overlay,
@@ -14987,6 +15239,15 @@ var SceneGraph = class {
     if (!this.orderedCache) this.orderedCache = [...this.panes.values()].sort((a, b) => a.order - b.order);
     return this.orderedCache;
   }
+  /** The session zones resolved into colored bands (pre/post-market washes from the
+   *  config's session colors) — consumed by the same painting path as {@link highlights}. */
+  sessionHighlightBands() {
+    if (!this.sessionZones) return [];
+    const out = [];
+    for (const [from, to] of this.sessionZones.pre) out.push({ from, to, color: this.style.sessions.premarketColor });
+    for (const [from, to] of this.sessionZones.post) out.push({ from, to, color: this.style.sessions.postmarketColor });
+    return out;
+  }
   indicatorsForPane(paneId) {
     const out = [];
     for (const model of this.indicators.values()) if (model.paneId === paneId) out.push(model);
@@ -15070,6 +15331,12 @@ var SceneGraph = class {
   assignIndicatorZ(id) {
     if (!this.seriesZ.has(id)) this.seriesZ.set(id, this.bottomZ() - 1);
   }
+  /** Mount-time default for a LAYER-BACKED native (it paints on a canvas stacked above the
+   *  data canvas by default): top of the stack, so the recorded order tells the truth from
+   *  the first frame. Keeps an existing key, so a restored stack survives the remount. */
+  assignIndicatorZTop(id) {
+    if (!this.seriesZ.has(id)) this.seriesZ.set(id, this.topZ() + 1);
+  }
   forgetIndicatorZ(id) {
     this.seriesZ.delete(id);
   }
@@ -15917,10 +16184,12 @@ var WebGL2Backend = class {
       }
     }
   }
-  /** Renderer-owned session highlight bands, clipped per-pane (scissor reconstructs full height). */
+  /** Renderer-owned session highlight bands, clipped per-pane (scissor reconstructs full height).
+   *  Session-zone washes (pre/post-market) paint first, host highlights on top. */
   emitHighlights(b, scene, pane, coords) {
-    if (scene.highlights.length === 0) return;
-    for (const band of scene.highlights) {
+    const bands = [...scene.sessionHighlightBands(), ...scene.highlights];
+    if (bands.length === 0) return;
+    for (const band of bands) {
       const x1 = coords.timeToX(band.from);
       const x2 = coords.timeToX(band.to);
       if (x2 < 0 || x1 > coords.width || x2 <= x1) continue;
@@ -17894,10 +18163,12 @@ var Canvas2dBackend = class {
     ctx.fillStyle = bg.color;
     ctx.fillRect(x1, pane.bounds.top, x2 - x1, pane.bounds.height);
   }
-  /** Renderer-owned session highlight bands: full-height (all panes), behind grid + data. */
+  /** Renderer-owned session highlight bands: full-height (all panes), behind grid + data.
+   *  Session-zone washes (pre/post-market) paint first, host highlights on top. */
   drawHighlights(ctx, scene, coords) {
-    if (scene.highlights.length === 0) return;
-    for (const band of scene.highlights) {
+    const bands = [...scene.sessionHighlightBands(), ...scene.highlights];
+    if (bands.length === 0) return;
+    for (const band of bands) {
       const x1 = coords.timeToX(band.from);
       const x2 = coords.timeToX(band.to);
       if (x2 < 0 || x1 > coords.width || x2 <= x1) continue;
@@ -18671,14 +18942,6 @@ var DrawingSceneRenderer = class {
   }
 };
 
-// src/renderers/native/chrome/axisLayout.ts
-var AXIS_MASTER_W = 64;
-var AXIS_MERGED_W = 56;
-var PANE_SEPARATOR_PX = 3;
-function axisColumnX(dataW, column) {
-  return column === 0 ? dataW : dataW + AXIS_MASTER_W + (column - 1) * AXIS_MERGED_W;
-}
-
 // src/renderers/native/chrome/ChromeRenderer.ts
 var ChromeRenderer = class {
   constructor() {
@@ -19565,6 +19828,7 @@ var SettingsDialog = class {
         for (const hr of hs.rows) {
           if (hr.kind === "heading") body.append(this.sectionTitle(hr.label));
           else if (hr.kind === "toggle") body.append(this.boolRow(hr.label, hr.get(), (v) => hr.set(v)));
+          else if (hr.kind === "color") body.append(this.colorRow(hr.label, hr.get(), (v) => hr.set(v)));
           else body.append(this.selectRowLabeled(hr.label, hr.get(), hr.options.map((o) => [o, o]), (v) => hr.set(v)));
         }
       }
@@ -22289,14 +22553,14 @@ function btn(label, primary, onClick) {
 // src/renderers/native/drawings/DrawingSettingsPopup.ts
 var BTN = 30;
 var ICON = 21;
-var STYLE_ID2 = "vela-drawing-popup-styles";
+var STYLE_ID3 = "vela-drawing-popup-styles";
 var STYLE_REV = "3";
-function ensureStyles2() {
+function ensureStyles3() {
   if (typeof document === "undefined") return;
-  const existing = document.getElementById(STYLE_ID2);
+  const existing = document.getElementById(STYLE_ID3);
   if (existing?.dataset.rev === STYLE_REV) return;
   const s = existing ?? document.createElement("style");
-  s.id = STYLE_ID2;
+  s.id = STYLE_ID3;
   s.dataset.rev = STYLE_REV;
   s.textContent = `
 .vela-dpop-btn{background:transparent;color:var(--vela-fg-muted);transition:background var(--vela-dur-fast) ease,color var(--vela-dur-fast) ease;}
@@ -22353,7 +22617,7 @@ var DrawingSettingsPopup = class {
    *  `onClose` fires on an outside-click dismissal (not a programmatic close). */
   open(drawing, anchor, actions, onClose) {
     this.close();
-    ensureStyles2();
+    ensureStyles3();
     this.onClose = onClose ?? null;
     const t = this.theme;
     const schema = drawing.schema();
@@ -23081,7 +23345,7 @@ var DrawingToolbar = class {
     this.onCollapse = options.onCollapse ?? (() => {
     });
     this.onDrawingsSync = options.onDrawingsSync ?? null;
-    ensureStyles3();
+    ensureStyles4();
     this.root = document.createElement("div");
     this.root.className = "vela-dtb";
     this.styleRoot();
@@ -23564,13 +23828,13 @@ var DrawingToolbar = class {
   }
 };
 var MAGNET_ID = "__magnet__";
-var STYLE_ID3 = "vela-drawing-toolbar-styles";
-function ensureStyles3() {
+var STYLE_ID4 = "vela-drawing-toolbar-styles";
+function ensureStyles4() {
   if (typeof document === "undefined") return;
-  let s = document.getElementById(STYLE_ID3);
+  let s = document.getElementById(STYLE_ID4);
   if (!s) {
     s = document.createElement("style");
-    s.id = STYLE_ID3;
+    s.id = STYLE_ID4;
     document.head.appendChild(s);
   }
   s.textContent = `
@@ -24829,13 +25093,26 @@ function rendererLayers() {
   return [...registry3.values()];
 }
 
+// src/renderers/native/core/layerStacking.ts
+function stackLayers(entries, candleZ) {
+  const keyed = entries.map((e) => ({
+    id: e.id,
+    key: e.ownerZ ?? (e.placement === "below-data" ? -Infinity : candleZ)
+  }));
+  keyed.sort((a, b) => a.key - b.key);
+  const below = [];
+  const above = [];
+  for (const k of keyed) (k.key < candleZ ? below : above).push(k.id);
+  return { below, above };
+}
+
 // src/renderers/native/chrome/luxalgo-logos.ts
 var LUXALGO_SYMBOL_SVG = '<svg viewBox="0 0 45 40" aria-hidden="true"><g fill="currentColor"><path d="m40.25 38 4.58-7.998L28.802 2l-16.03 28 9.16-.001 6.87-12z"/><path d="M34.525 32.002 9.33 31.997 27.655 0h-9.158L.18 31.993 4.759 40h34.347z"/></g></svg>';
 var LUXALGO_WORDMARK_SVG = '<svg viewBox="0 0 964 252" aria-hidden="true"><path fill="currentColor" fill-rule="evenodd" d="M 614 94.500 L 614 189 633.500 189 L 653 189 653 94.500 L 653 0 633.500 0 L 614 0 614 94.500 M 0 97.500 L 0 189 63.023 189 L 126.045 189 125.773 170.750 L 125.500 152.500 84.250 152.239 L 43 151.978 43 78.989 L 43 6 21.500 6 L 0 6 0 97.500 M 450.387 96.451 C 421.871 146.253, 398.306 186.994, 398.020 186.987 C 397.423 186.972, 362 124.724, 362 123.691 C 362 123.316, 370.100 108.818, 380 91.472 C 389.900 74.127, 398 59.500, 398 58.968 C 398 58.380, 391.007 58, 380.210 58 L 362.420 58 348.060 83.138 C 334.400 107.052, 333.637 108.160, 332.399 105.888 C 331.682 104.575, 325.287 93.375, 318.187 81 L 305.277 58.500 287.139 58.227 C 277.162 58.078, 269 58.186, 269 58.469 C 269 58.751, 277.154 73.274, 287.120 90.741 C 297.086 108.209, 305.261 122.983, 305.287 123.574 C 305.312 124.164, 297.318 138.789, 287.522 156.074 C 277.725 173.358, 269.524 187.838, 269.296 188.250 C 269.068 188.662, 276.977 189, 286.870 189 L 304.859 189 319.163 163.959 C 331.321 142.674, 333.647 139.165, 334.670 140.563 C 335.331 141.468, 341.864 152.737, 349.186 165.606 L 362.500 189.003 402.442 188.752 L 442.384 188.500 472.080 136.695 C 488.413 108.203, 501.939 84.729, 502.138 84.531 C 502.337 84.333, 516 107.757, 532.500 136.583 L 562.500 188.994 584.750 188.997 C 596.987 188.999, 607 188.854, 607 188.675 C 607 188.319, 503.014 6.686, 502.532 6.201 C 502.369 6.037, 478.904 46.649, 450.387 96.451 M 717.500 55.017 C 697.175 57.389, 680.641 68.752, 672.036 86.264 C 665.866 98.818, 663.840 108.024, 663.840 123.500 C 663.840 133.409, 664.328 138.355, 665.892 144.300 C 672.076 167.810, 689.191 184.757, 711.529 189.489 C 730.549 193.518, 747.264 189.540, 761.282 177.648 C 764.944 174.542, 768.178 172, 768.470 172 C 769.345 172, 769.030 185.018, 767.979 192.285 C 765.618 208.613, 755.148 218.672, 738.473 220.632 C 732.586 221.324, 723.136 219.599, 717.709 216.843 C 712.693 214.295, 706.636 207.946, 703.972 202.443 C 702.789 199.999, 701.749 198, 701.661 198.001 C 700.201 198.007, 665.596 205.071, 665.230 205.437 C 664.326 206.341, 669.156 218.313, 672.607 223.721 C 682.146 238.672, 700.008 248.257, 723.500 251.033 C 758.132 255.124, 788.930 241.875, 800.287 218 C 806.923 204.047, 807 203.001, 807 126.542 L 807 58 788.500 58 L 770 58 770 66.500 C 770 71.175, 769.641 75, 769.203 75 C 768.765 75, 766.627 73.142, 764.453 70.872 C 752.805 58.708, 735.614 52.903, 717.500 55.017 M 878.500 55.031 C 850.107 59.412, 830.755 75.064, 822.285 100.500 C 819.905 107.644, 819.614 110.051, 819.565 123 C 819.501 139.581, 820.786 145.825, 826.763 158 C 832.104 168.880, 842.842 179.424, 854.077 184.822 C 867.651 191.343, 873.132 192.462, 891.500 192.462 C 909.868 192.462, 915.349 191.343, 928.923 184.822 C 944.653 177.265, 956.667 162.306, 961.710 144 C 963.074 139.048, 963.481 134.047, 963.418 123 C 963.346 110.140, 963.038 107.595, 960.694 100.500 C 953.325 78.193, 936.695 62.854, 913.500 56.969 C 904.262 54.625, 887.240 53.682, 878.500 55.031 M 134.015 102.750 C 134.027 139.250, 134.310 148.689, 135.549 153.947 C 141.139 177.663, 159.815 193, 183.105 193 C 196.453 193, 210.163 186.171, 217.936 175.650 C 219.826 173.093, 221.738 171, 222.186 171 C 222.634 171, 223 175.050, 223 180 L 223 189 242.507 189 L 262.014 189 261.757 123.750 L 261.500 58.500 242.500 58.500 L 223.500 58.500 223 99.500 C 222.513 139.406, 222.441 140.610, 220.289 144.634 C 209.729 164.377, 183.014 164.880, 174.299 145.500 C 172.677 141.895, 172.469 137.382, 172.190 99.750 L 171.880 58 152.940 58 L 134 58 134.015 102.750 M 729.932 87.998 C 719.311 89.821, 710.155 97.164, 705.141 107.880 C 702.851 112.772, 702.510 114.798, 702.505 123.521 C 702.500 132.834, 702.732 134.014, 705.787 140.218 C 709.761 148.290, 715.989 154.097, 723.853 157.063 C 731.409 159.912, 744.359 159.466, 750.795 156.136 C 767.289 147.601, 774.103 127.713, 767.019 108.780 C 761.433 93.851, 746.051 85.232, 729.932 87.998 M 883.972 88.348 C 865.749 92.310, 854.873 109.966, 858.119 130.316 C 860.933 147.963, 872.346 158.830, 889.084 159.799 C 900.714 160.472, 906.867 158.234, 914.650 150.497 C 919.856 145.323, 921.123 143.340, 922.900 137.587 C 925.412 129.456, 925.655 118.570, 923.489 111.275 C 918.479 94.405, 901.478 84.541, 883.972 88.348"/></svg>';
 
 // src/renderers/native/chrome/AttributionMark.ts
 var ATTRIBUTION_URL = "https://luxalgo.com/vela";
-var STYLE_ID4 = "vela-attribution-styles";
+var STYLE_ID5 = "vela-attribution-styles";
 var CSS2 = `
 .vela-attribution {
     text-decoration: none;
@@ -24898,11 +25175,11 @@ var CSS2 = `
 [data-vela-layout='mobile'] .vela-attribution:hover .vela-attr-wordmark,
 [data-layout='mobile'] .vela-attribution:hover .vela-attr-wordmark { transform: translateX(0); }
 `;
-function ensureStyles4(doc) {
-  let s = doc.getElementById(STYLE_ID4);
+function ensureStyles5(doc) {
+  let s = doc.getElementById(STYLE_ID5);
   if (!s) {
     s = doc.createElement("style");
-    s.id = STYLE_ID4;
+    s.id = STYLE_ID5;
     doc.head.appendChild(s);
   }
   s.textContent = CSS2;
@@ -24931,7 +25208,7 @@ function createCustomMark(doc, html, background) {
   return el;
 }
 function createAttributionMark(doc, background) {
-  ensureStyles4(doc);
+  ensureStyles5(doc);
   const a = doc.createElement("a");
   a.className = "vela-attribution";
   a.href = ATTRIBUTION_URL;
@@ -25329,6 +25606,8 @@ var NativeRenderer = class {
     this.volumeRenderer = new VolumeRenderer();
     /** SDK renderer layers instantiated at mount ({@link registerRendererLayer}). */
     this.extLayers = [];
+    /** Last applied layer-canvas order (ids below + above the data canvas) — re-slotted only on change. */
+    this.layerOrderSig = "";
     // The attribution mark (see chrome/AttributionMark + the NOTICE file): default-on;
     // disabling requires an equivalent visible attribution elsewhere in the host UI.
     this.attributionEl = null;
@@ -25443,6 +25722,8 @@ var NativeRenderer = class {
     // total right-gutter width (master column + merged-scale columns)
     this.paneControls = null;
     // per-pane hover button cluster (top-right)
+    this.axisScaleButtons = null;
+    // A/L hover buttons at the bottom of each pane's price scale
     this.paneActionCbs = /* @__PURE__ */ new Set();
     // ── data window (crosshair OHLC + per-series readout, pulled by host panels) ──
     this.hoverLogical = null;
@@ -25486,7 +25767,7 @@ var NativeRenderer = class {
     this.priceStyleCbs = /* @__PURE__ */ new Set();
     this.tableOverlays = /* @__PURE__ */ new Map();
     this.name = "native";
-    this.features = ["logScale", "currentPriceLine", "priceLabel", "countdown", "upColor", "downColor", "glow", "animZoom", "animPan", "intro", "zoomAnchor", "axisDrag", "paneResize", "candleZOrder", "candleVisible", "seriesOrder", "highlights", "gridlines", "axisLabels", "scaleMode", "invertScale", "paneScales", "autoScale", "timezone", "keyboard", "historyChords", "priceStyle", "priceBaseline", "baselinePrice", "settings", "attribution", "dialogHost", "tradeMarkers", "indicatorTitles", "indicatorValues"];
+    this.features = ["logScale", "currentPriceLine", "priceLabel", "countdown", "upColor", "downColor", "glow", "animZoom", "animPan", "intro", "zoomAnchor", "axisDrag", "paneResize", "candleZOrder", "candleVisible", "seriesOrder", "highlights", "sessionZones", "gridlines", "axisLabels", "scaleMode", "invertScale", "paneScales", "autoScale", "timezone", "keyboard", "historyChords", "priceStyle", "priceBaseline", "baselinePrice", "settings", "attribution", "dialogHost", "tradeMarkers", "indicatorTitles", "indicatorValues"];
     /** 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) => {
@@ -25602,6 +25883,9 @@ var NativeRenderer = class {
       case "highlights":
         this.scene.highlights = sanitizeHighlights(value);
         break;
+      case "sessionZones":
+        this.scene.sessionZones = sanitizeSessionZones(value);
+        break;
       case "gridlines":
         this.scene.showGrid = Boolean(value);
         break;
@@ -25718,6 +26002,8 @@ var NativeRenderer = class {
         return this.scene.indicatorZOrder();
       case "highlights":
         return this.scene.highlights;
+      case "sessionZones":
+        return this.scene.sessionZones;
       case "gridlines":
         return this.scene.showGrid;
       case "axisLabels":
@@ -25927,7 +26213,8 @@ var NativeRenderer = class {
           baselineLevel: s.baseline.baselineLevel
         };
       })(),
-      series: { style: this.scene.priceStyle, baseline: this.scene.baselineValue, spacing: this.coords.spacingScale }
+      series: { style: this.scene.priceStyle, baseline: this.scene.baselineValue, spacing: this.coords.spacingScale },
+      sessions: { premarketColor: s.sessions.premarketColor, postmarketColor: s.sessions.postmarketColor }
     };
   }
   /**
@@ -26009,6 +26296,7 @@ var NativeRenderer = class {
       width: next.baseline.width,
       baselineLevel: next.baseline.baselineLevel
     };
+    s.sessions = { premarketColor: next.sessions.premarketColor, postmarketColor: next.sessions.postmarketColor };
     this.setPriceStyle(next.series.style);
     this.scene.candleOverride = candleOverrideFor(this.scene.priceStyle, s.chartTypes);
     this.scene.baselineValue = next.series.baseline;
@@ -26022,6 +26310,7 @@ var NativeRenderer = class {
     }
     this.inputsUI?.setTheme(this.theme);
     this.paneControls?.setTheme(this.theme);
+    this.axisScaleButtons?.setTheme(this.theme);
     this.userDrawings?.setTheme(this.chromeTheme());
     this.refreshScrollButtonTheme();
     this.refreshAttributionColor();
@@ -26249,9 +26538,7 @@ var NativeRenderer = class {
         if (el.getAttribute("data-vela-screenshot") === "under") rasterizeOverlay(ctx, el, frame);
       }
     }
-    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);
-    for (const canvas of [...below, this.dataCanvas, this.volumeCanvas, this.vpvrCanvas, ...above, this.chromeCanvas, this.drawingsCanvas]) {
+    for (const canvas of [...this.canvasPile(), this.chromeCanvas, this.drawingsCanvas]) {
       if (canvas && canvas.width > 0 && canvas.height > 0) ctx.drawImage(canvas, 0, 0);
     }
     if (frame) {
@@ -26360,7 +26647,7 @@ var NativeRenderer = class {
     this.surfaceBackground = theme.background;
     this.surfaceTextColor = theme.textColor;
     this.wrapper = document.createElement("div");
-    Object.assign(this.wrapper.style, { position: "relative", width: "100%", height: "100%", overflow: "hidden", cursor: "crosshair" });
+    Object.assign(this.wrapper.style, { position: "relative", width: "100%", height: "100%", overflow: "hidden", cursor: "crosshair", userSelect: "none", webkitUserSelect: "none" });
     applyChromeTokens(this.wrapper, this.chromeTheme());
     this.volumeCanvas = document.createElement("canvas");
     Object.assign(this.volumeCanvas.style, { position: "absolute", inset: "0", width: "100%", height: "100%", pointerEvents: "none" });
@@ -26385,6 +26672,7 @@ var NativeRenderer = class {
     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(...below, this.dataCanvas, this.volumeCanvas, this.vpvrCanvas, ...above, this.chromeCanvas, this.drawingsCanvas, this.cursorCanvas, this.overlayRoot);
+    this.layerOrderSig = "";
     this.wrapper.appendChild(this.plot);
     this.factoryConfig = this.getConfig();
     this.attributionEl = this.buildAttributionEl();
@@ -26529,6 +26817,15 @@ var NativeRenderer = class {
         this.emitPaneAction({ type: "maximize", paneId, maximized });
       }
     });
+    this.axisScaleButtons = new AxisScaleButtons(this.plot, theme, {
+      panes: () => this.axisScaleViews(),
+      rightAxis: () => this.rightAxisW,
+      onToggleAuto: (paneId) => this.togglePaneAuto(paneId),
+      onToggleLog: (paneId) => {
+        const pane = this.scene.panes.get(paneId);
+        if (pane) this.setPaneLog(paneId, !paneLogScale(this.scene, pane));
+      }
+    });
     this.resizeObserver = new ResizeObserver(() => this.resize());
     this.resizeObserver.observe(this.wrapper);
     this.watchDpr();
@@ -26605,6 +26902,7 @@ var NativeRenderer = class {
     this.applyBackground();
     this.inputsUI.setTheme(theme);
     this.paneControls?.setTheme(this.theme);
+    this.axisScaleButtons?.setTheme(this.theme);
     this.settingsDialog?.refreshConfig(this.getConfig());
     this.syncThemeControl();
     this.settingsDialog?.setTheme(this.theme);
@@ -26653,6 +26951,7 @@ var NativeRenderer = class {
     this.liveRegion = null;
     this.inputsUI?.destroy();
     this.paneControls?.destroy();
+    this.axisScaleButtons?.destroy();
     for (const overlay of this.tableOverlays.values()) overlay.destroy();
     this.tableOverlays.clear();
     this.resizeObserver?.disconnect();
@@ -26902,7 +27201,8 @@ var NativeRenderer = class {
   mountIndicator(model) {
     this.scene.indicators.set(model.id, model);
     this.refreshAnchorOffset(model);
-    this.scene.assignIndicatorZ(model.id);
+    if (model.native && this.extLayers.some((l) => l.def.id === model.native.type)) this.scene.assignIndicatorZTop(model.id);
+    else this.scene.assignIndicatorZ(model.id);
     this.inputsUI.upsert(model.id, model.shorttitle ?? model.title, model.inputs, model.inputValues, model.paneId, {
       native: !!model.native,
       ...model.shorttitle ? { settingsTitle: model.title } : {}
@@ -27721,10 +28021,17 @@ var NativeRenderer = class {
     const nowMs = typeof performance !== "undefined" ? performance.now() : Date.now();
     for (const l of this.extLayers) {
       if (!l.def.repaintOnCursor) continue;
-      l.instance.render(this.extLayerArgs(l.def.id, pane.scale, pane.bounds, nowMs));
+      const lp = this.layerPane(l.def.id) ?? pane;
+      if (lp.collapsed) continue;
+      l.instance.render(this.extLayerArgs(l.def.id, lp.scale, lp.bounds, nowMs));
       if (this.animZoom && l.instance.animating?.()) this.animator.start();
     }
   }
+  /** Blank one SDK layer canvas (a collapsed host pane suppresses the layer's painting). */
+  clearLayerCanvas(canvas) {
+    if (canvas.width === 0 || canvas.height === 0) return;
+    canvas.getContext("2d")?.clearRect(0, 0, canvas.width, canvas.height);
+  }
   /** One frame's args for an SDK renderer layer (shared by the data + cursor paint paths). */
   extLayerArgs(id, scale, bounds, nowMs) {
     return {
@@ -27743,6 +28050,7 @@ var NativeRenderer = class {
   }
   /** Paint the below-data (L-1) + geometry (L0) + chrome (L1) layers from the current scene/coords. */
   paintData() {
+    this.syncLayerCanvasOrder();
     this.stampScaleInvert();
     this.backend.modelAlpha = this.modelAlpha;
     this.backend.candleBodyAlpha = this.candleBodyAlpha;
@@ -27773,9 +28081,14 @@ var NativeRenderer = class {
       const nowMs = typeof performance !== "undefined" ? performance.now() : Date.now();
       let folded = null;
       for (const l of this.extLayers) {
-        const args = this.extLayerArgs(l.def.id, pane.scale, pane.bounds, nowMs);
+        const lp = this.layerPane(l.def.id) ?? pane;
+        if (lp.collapsed) {
+          this.clearLayerCanvas(l.canvas);
+          continue;
+        }
+        const args = this.extLayerArgs(l.def.id, lp.scale, lp.bounds, nowMs);
         l.instance.render(args);
-        folded = foldBaseModulation(folded, l.instance.modulateBase?.(args) ?? null);
+        if (lp === pane) folded = foldBaseModulation(folded, l.instance.modulateBase?.(args) ?? null);
         if (this.animZoom && l.instance.animating?.()) this.animator.start();
       }
       if (folded) {
@@ -27937,6 +28250,9 @@ var NativeRenderer = class {
           pane.scaleTarget = { min: 0, max: maxVol / VOLUME_PANE_FILL_FRAC };
           pane.axisFormat = "volume";
         }
+      } else if (this.layerNativesOwnPane(pane, masterModels)) {
+        pane.scaleTarget = computePaneScale([], this.bars, true, i0, i1, dr, paneLogScale(this.scene, pane), (id) => this.scene.offsetOf(id));
+        pane.percentBaseline = this.bars[i0]?.close ?? 0;
       }
       if (pane === pricePane && this.scene.tradeMarkers.visible && pane.bounds.height > 0) {
         const th = this.tradesScaleHints(vr);
@@ -28023,6 +28339,59 @@ var NativeRenderer = class {
     }
     return null;
   }
+  /** The mounted native indicator that OWNS an SDK layer — the one whose type equals the
+   *  layer id (the id doubles as the data channel, so the pairing is the SDK's own
+   *  contract). Null for chart-type channels and while the owner is hidden (a hidden
+   *  indicator leaves the scene; its cleared data channel paints nothing anyway). */
+  layerOwner(layerId) {
+    for (const m of this.scene.indicators.values()) {
+      if (m.native?.type === layerId) return m;
+    }
+    return null;
+  }
+  /** The pane an SDK layer paints on: its owner's pane, else the price pane. */
+  layerPane(layerId) {
+    const owner = this.layerOwner(layerId);
+    const paneId = owner ? owner.paneId ?? PRICE_PANE_ID : PRICE_PANE_ID;
+    return this.scene.panes.get(paneId) ?? null;
+  }
+  /** The SDK layer canvases split around the data canvas, each side back-to-front:
+   *  owned layers by their owner's z key against the candles' (an indicator restacked
+   *  below the candles takes its layer canvas along), unowned by declared placement. */
+  orderedLayerCanvases() {
+    const byId = new Map(this.extLayers.map((l) => [l.def.id, l.canvas]));
+    const { below, above } = stackLayers(
+      this.extLayers.map((l) => {
+        const owner = this.layerOwner(l.def.id);
+        return {
+          id: l.def.id,
+          placement: l.def.placement === "below-data" ? "below-data" : "above-data",
+          ownerZ: owner ? this.scene.zOf(owner.id) : null
+        };
+      }),
+      this.scene.candleZ
+    );
+    return { below: below.map((id) => byId.get(id)), above: above.map((id) => byId.get(id)) };
+  }
+  /** The full canvas pile in paint order (layers + data/volume/vpvr) — what the DOM
+   *  stacking and the screenshot compositor must both follow. */
+  canvasPile() {
+    const { below, above } = this.orderedLayerCanvases();
+    return [...below, this.dataCanvas, this.volumeCanvas, this.vpvrCanvas, ...above];
+  }
+  /** Re-slot the SDK layer canvases in the plot when the computed order changed (a z
+   *  write, a restored config, an indicator mount/remove/restack). Runs at the top of
+   *  every data frame; a no-op when the signature is unchanged. Re-inserting an
+   *  absolutely-positioned, pointer-transparent canvas repaints nothing by itself. */
+  syncLayerCanvasOrder() {
+    if (this.extLayers.length === 0 || !this.plot) return;
+    const { below, above } = this.orderedLayerCanvases();
+    const sig = [...below.map((c) => this.extLayers.find((l) => l.canvas === c).def.id), "|", ...above.map((c) => this.extLayers.find((l) => l.canvas === c).def.id)].join(",");
+    if (sig === this.layerOrderSig) return;
+    this.layerOrderSig = sig;
+    for (const c of below) this.plot.insertBefore(c, this.dataCanvas);
+    for (const c of above) this.plot.insertBefore(c, this.chromeCanvas);
+  }
   /** True when an active volume layer is this study pane's ONLY content — so its scale should
    *  come from volume, not the empty {0,1} placeholder. (In the price pane, or alongside a real
    *  series, volume stays a bottom overlay and the master scale wins.) */
@@ -28032,6 +28401,15 @@ var NativeRenderer = class {
     if (this.nativeLayerPane("volume") !== pane) return false;
     return masterModels.every((m) => m.native?.type === "volume");
   }
+  /** True when this study pane's master content is only SDK-layer natives (series-less
+   *  models whose type names a mounted layer) — its scale then follows the visible bars
+   *  (see the call site). Any real master series takes over the scale as usual. */
+  layerNativesOwnPane(pane, masterModels) {
+    if (pane.kind === "price" || masterModels.length === 0) return false;
+    return masterModels.every(
+      (m) => m.series.length === 0 && !!m.native && this.extLayers.some((l) => l.def.id === m.native.type)
+    );
+  }
   /** Per-pane scale state for a host UI (e.g. a price-axis context menu): the pane's pixel
    *  band (`top`/`height`, so a click y maps to a pane) plus its current axis `mode`/`log`.
    *  Top-to-bottom order. Every pane is independent — the price pane from the scene setting,
@@ -28047,6 +28425,25 @@ var NativeRenderer = class {
       invert: paneInvert(this.scene, p)
     }));
   }
+  /** Thin projection of the panes for the axis A/L hover buttons (top-to-bottom order). */
+  axisScaleViews() {
+    return this.scene.orderedPanes().map((p) => ({
+      id: p.id,
+      top: p.bounds.top,
+      height: p.bounds.height,
+      collapsed: p.collapsed,
+      auto: p.manualScale == null,
+      log: paneLogScale(this.scene, p)
+    }));
+  }
+  /** Toggle one pane's autoscale (the A axis button): off freezes the current window into
+   *  manual mode, on drops it — the per-pane twin of the chart-level `autoScale` feature. */
+  togglePaneAuto(paneId) {
+    const pane = this.scene.panes.get(paneId);
+    if (!pane) return;
+    pane.manualScale = pane.manualScale == null ? { ...pane.scale } : null;
+    this.scheduler?.invalidate(4 /* Full */);
+  }
   /** Set one pane's axis mode. The price pane routes to the scene-level setting (persisted +
    *  keyboard shortcuts); a study pane keeps its own, so panes never affect each other. */
   setPaneScaleMode(paneId, mode) {
@@ -28058,19 +28455,18 @@ var NativeRenderer = class {
     }
     this.scheduler?.invalidate(4 /* Full */);
   }
-  /** Set one pane's logarithmic flag. Clears that pane's frozen (manual) window so the new
-   *  space re-fits, and routes the price pane to the scene-level flag. */
+  /** Set one pane's logarithmic flag; the price pane routes to the scene-level flag.
+   *  Log and auto are INDEPENDENT: a frozen (manual) window is kept — its price bounds
+   *  stay put and only its `log` tag flips, so the same range re-renders in the new
+   *  space instead of snapping back to autoscale. */
   setPaneLog(paneId, log) {
-    if (paneId === PRICE_PANE_ID) {
-      this.scene.logScale = log;
-      const price = this.scene.orderedPanes().find((p) => p.kind === "price");
-      if (price) price.manualScale = null;
-    } else {
-      const p = this.scene.panes.get(paneId);
-      if (!p) return;
-      p.logScale = log;
-      p.manualScale = null;
+    const pane = paneId === PRICE_PANE_ID ? this.scene.orderedPanes().find((p) => p.kind === "price") : this.scene.panes.get(paneId);
+    if (paneId === PRICE_PANE_ID) this.scene.logScale = log;
+    else {
+      if (!pane) return;
+      pane.logScale = log;
     }
+    if (pane?.manualScale) pane.manualScale.log = log;
     this.scheduler?.invalidate(4 /* Full */);
   }
   /** Flip one pane's axis (high at the bottom). The price pane routes to the scene-level flag
@@ -28169,6 +28565,7 @@ var NativeRenderer = class {
       }
       this.inputsUI?.reposition();
       this.paneControls?.reposition();
+      this.axisScaleButtons?.reposition();
       this.repositionScrollButton();
       this.positionAttribution();
       this.publishPricePaneBounds();
@@ -28187,6 +28584,7 @@ var NativeRenderer = class {
     }
     this.inputsUI?.reposition();
     this.paneControls?.reposition();
+    this.axisScaleButtons?.reposition();
     this.repositionScrollButton();
     this.positionAttribution();
     this.publishPricePaneBounds();
@@ -28394,6 +28792,22 @@ function sanitizeHighlights(value) {
   }
   return out.sort((a, b) => a.from - b.from);
 }
+function sanitizeSessionZones(value) {
+  if (value == null || typeof value !== "object") return null;
+  const v = value;
+  const windows = (raw) => {
+    if (!Array.isArray(raw)) return [];
+    const out = [];
+    for (const w of raw) {
+      if (!Array.isArray(w)) continue;
+      const from = Number(w[0]);
+      const to = Number(w[1]);
+      if (Number.isFinite(from) && Number.isFinite(to) && to > from) out.push([from, to]);
+    }
+    return out.sort((a, b) => a[0] - b[0]);
+  };
+  return { pre: windows(v.pre), post: windows(v.post) };
+}
 function clamp012(v) {
   return Math.max(0, Math.min(1, v));
 }
@@ -29426,7 +29840,7 @@ var Drawer = class {
 };
 
 // src/widget/layout-picker.ts
-var STYLE_ID5 = "vela-widget-layout-picker-v14";
+var STYLE_ID6 = "vela-widget-layout-picker-v14";
 var CSS3 = `
 .vela-lp-layer { position: absolute; z-index: var(--vela-z-menu); }
 .vela-lp {
@@ -29531,7 +29945,7 @@ var CSS3 = `
 `;
 var GRID = 4;
 function layoutGridCanvas(doc) {
-  injectStyles(STYLE_ID5, CSS3, doc);
+  injectStyles(STYLE_ID6, CSS3, doc);
   const el = doc.createElement("div");
   el.className = "vela-lp-grid";
   const squares = [];
@@ -29571,7 +29985,7 @@ var LayoutPicker = class {
     };
     this.opts = opts;
     this.doc = opts.host.ownerDocument;
-    injectStyles(STYLE_ID5, CSS3, this.doc);
+    injectStyles(STYLE_ID6, CSS3, this.doc);
     const doc = this.doc;
     this.layer = doc.createElement("div");
     this.layer.className = "vela-ui-layer vela-lp-layer";
@@ -29916,7 +30330,7 @@ function timeframeLabel(value) {
 }
 
 // src/widget/topbar.ts
-var STYLE_ID6 = "vela-topbar";
+var STYLE_ID7 = "vela-topbar";
 var CSS4 = `
 .vela-widget-topbar {
     display: flex;
@@ -29973,12 +30387,14 @@ var CSS4 = `
     color: var(--vela-fg-muted);
 }
 .vela-widget-tf-caret:hover { background: var(--vela-hover); color: var(--vela-fg-bright); }
+/* The merged trigger is a plain button (hover feedback only) \u2014 the highlight
+   background marks the CURRENT chip among favorites, and a lone trigger with a
+   permanent highlight would read as stuck-pressed. */
 .vela-widget-tf-caret[data-solo='1'] {
     width: auto;
     padding: 0 6px 0 9px;
     gap: 4px;
     color: var(--vela-fg-bright);
-    background: var(--vela-hover-strong);
     font-size: 13px;
     font-weight: 550;
     white-space: nowrap;
@@ -30081,7 +30497,7 @@ var Topbar = class {
     this.timeframe = opts.timeframe;
     this.priceStyle = opts.priceStyle;
     const doc = host.ownerDocument;
-    injectStyles(STYLE_ID6, CSS4, doc);
+    injectStyles(STYLE_ID7, CSS4, doc);
     this.el = doc.createElement("div");
     this.el.className = "vela-widget-topbar";
     this.symbolEl = doc.createElement("button");
@@ -30430,7 +30846,7 @@ function tickerIconEl(doc, base, name, className) {
 }
 
 // src/widget/statusline.ts
-var STYLE_ID7 = "vela-widget-statusline";
+var STYLE_ID8 = "vela-widget-statusline";
 var CSS5 = `
 .vela-statusline {
     position: absolute;
@@ -30622,7 +31038,7 @@ var Statusline = class {
     this.fitMode = false;
     this.fitRO = null;
     const doc = host.ownerDocument;
-    injectStyles(STYLE_ID7, CSS5, doc);
+    injectStyles(STYLE_ID8, CSS5, doc);
     host.classList.add("vela-has-statusline");
     this.el = doc.createElement("div");
     this.el.className = "vela-statusline";
@@ -30895,11 +31311,70 @@ var MarketStatusTracker = class {
   }
 };
 
+// src/widget/session-shading.ts
+function deriveSessionZones(regular, extended) {
+  const pre = [];
+  const post = [];
+  for (const [extStart, extEnd] of extended) {
+    const inside = regular.filter(([s, e]) => e > extStart && s < extEnd).sort((a, b) => a[0] - b[0]);
+    let cursor = extStart;
+    for (const [regStart, regEnd] of inside) {
+      if (regStart > cursor) pre.push([cursor, Math.min(regStart, extEnd)]);
+      cursor = Math.max(cursor, regEnd);
+    }
+    if (cursor < extEnd) post.push([cursor, extEnd]);
+  }
+  return { pre, post };
+}
+var FETCH_AHEAD_MS2 = 10 * 864e5;
+var MIN_LOOKBACK_MS = 3 * 864e5;
+var MAX_LOOKBACK_MS = 120 * 864e5;
+var SessionShadingTracker = class {
+  constructor(onZones) {
+    this.onZones = onZones;
+    /** Invalidates detached async work — bumped by every track()/stop(). */
+    this.epoch = 0;
+  }
+  /** (Re)bind to a chart's data surface + market and evaluate once. */
+  track(data, symbol, opts) {
+    const my = ++this.epoch;
+    void this.evaluate(my, data, symbol, opts);
+  }
+  stop() {
+    this.epoch += 1;
+  }
+  async evaluate(my, data, symbol, opts) {
+    const resolved = data.resolve(symbol);
+    const provider = resolved ? data.providerInstance(resolved.provider) : void 0;
+    const si = await data.symbolInfo(symbol).catch(() => void 0);
+    if (my !== this.epoch) return;
+    const hasSessions = typeof si?.session === "string" && si.session !== "" && si.session !== "24x7";
+    if (!provider?.getCalendar || !hasSessions || !resolved) {
+      this.onZones(null);
+      return;
+    }
+    if (opts.session !== "extended") {
+      this.onZones({ pre: [], post: [] });
+      return;
+    }
+    const now = Date.now();
+    const lookback = Math.max(MIN_LOOKBACK_MS, Math.min(MAX_LOOKBACK_MS, opts.lookbackMs));
+    const range = { from: now - lookback, to: now + FETCH_AHEAD_MS2 };
+    const [regular, extended] = await Promise.all([
+      provider.getCalendar(resolved.ticker, { ...range, session: "regular" }).catch(() => null),
+      provider.getCalendar(resolved.ticker, { ...range, session: "extended" }).catch(() => null)
+    ]);
+    if (my !== this.epoch) return;
+    if (!regular || !extended) return;
+    this.onZones(deriveSessionZones(regular, extended));
+  }
+};
+
 // src/widget/watermark.ts
 var MAX_FONT_PX = 36;
 var MIN_FONT_PX = 12;
 var FILL = 0.9;
-var STYLE_ID8 = "vela-widget-watermark";
+var STYLE_ID9 = "vela-widget-watermark";
 var CSS6 = `
 .vela-watermark {
     position: absolute;
@@ -30938,7 +31413,7 @@ var Watermark = class {
      *  canvas, so the mark stays out of its way. Starts true: the FIRST `load:start`
      *  fires during chart construction, before any subscriber can see it. */
     this.loading = true;
-    injectStyles(STYLE_ID8, CSS6, host.ownerDocument);
+    injectStyles(STYLE_ID9, CSS6, host.ownerDocument);
     this.el = host.ownerDocument.createElement("div");
     this.el.className = "vela-watermark";
     this.el.dataset.velaScreenshot = "under";
@@ -31002,7 +31477,7 @@ var RANGE_PRESETS = [
   { id: "ALL", tf: "W", preset: "ALL", bars: 5e3 }
   // everything the provider serves
 ];
-var STYLE_ID9 = "vela-widget-bottombar";
+var STYLE_ID10 = "vela-widget-bottombar";
 var CSS7 = `
 .vela-widget-bottombar {
     display: flex;
@@ -31082,7 +31557,7 @@ var Bottombar = class {
     this.timer = null;
     this.timezone = opts.timezone;
     const doc = host.ownerDocument;
-    injectStyles(STYLE_ID9, CSS7, doc);
+    injectStyles(STYLE_ID10, CSS7, doc);
     this.el = doc.createElement("div");
     this.el.className = "vela-widget-bottombar";
     for (const preset of RANGE_PRESETS) {
@@ -31109,7 +31584,8 @@ var Bottombar = class {
     const session = doc.createElement("span");
     session.className = "vela-bb-session";
     this.sessionEl = session;
-    session.title = "Session \u2014 stocks & ETFs only";
+    session.style.display = "none";
+    session.title = "Session \u2014 regular (RTH) vs extended (ETH) hours";
     for (const [key, label] of [["regular", "RTH"], ["extended", "ETH"]]) {
       const b = doc.createElement("button");
       b.className = "vela-bb-session-btn" + (key === "regular" ? " is-active" : "");
@@ -31160,15 +31636,15 @@ var Bottombar = class {
   }
   /**
    * Reflect the ACTIVE chart's session posture. `enabled: false` (a continuous
-   * market, or metadata not landed yet) shows the disabled RTH-active stub — the
-   * pre-session-model look, byte-for-byte. Enabled, the chips become clickable and
-   * the active one tracks the chart's current session.
+   * market, or metadata not landed yet) HIDES the toggle entirely — RTH/ETH is
+   * meaningless there. Enabled, the chips appear and the active one tracks the
+   * chart's current session.
    */
   setSession(state) {
-    if (this.sessionEl) this.sessionEl.title = state.enabled ? "Session \u2014 regular (RTH) vs extended (ETH) hours" : "Session \u2014 stocks & ETFs only";
+    if (this.sessionEl) this.sessionEl.style.display = state.enabled ? "" : "none";
     for (const [key, b] of this.sessionButtons) {
       b.disabled = !state.enabled;
-      b.classList.toggle("is-active", state.enabled ? key === state.session : key === "regular");
+      b.classList.toggle("is-active", key === (state.enabled ? state.session : "regular"));
     }
   }
   destroy() {
@@ -31241,7 +31717,7 @@ function filterSymbols(list, query, limit = 100) {
   }
   return [...prefix, ...substr, ...desc, ...venue].slice(0, limit);
 }
-var STYLE_ID10 = "vela-widget-symbolpicker";
+var STYLE_ID11 = "vela-widget-symbolpicker";
 var CSS8 = `
 .vela-sp-searchrow {
     display: flex;
@@ -31331,6 +31807,7 @@ var CSS8 = `
 .vela-sp-badge[data-p='hyperliquid'] { color: #50d2c1; } /* palette-exempt: venue brand mark */
 .vela-sp-empty { padding: var(--vela-space-3); color: var(--vela-fg-muted); text-align: center; }
 `;
+var PAGE = 100;
 var SymbolPicker = class {
   constructor(opts) {
     this.source = () => [];
@@ -31338,8 +31815,9 @@ var SymbolPicker = class {
     this.highlighted = 0;
     this.seed = "";
     this.activeTab = "All";
+    this.visible = PAGE;
     const doc = (opts.host ?? document.body).ownerDocument;
-    injectStyles(STYLE_ID10, CSS8, doc);
+    injectStyles(STYLE_ID11, CSS8, doc);
     this.input = doc.createElement("input");
     this.input.className = "vela-sp-input";
     this.input.placeholder = "Search symbol\u2026";
@@ -31364,6 +31842,12 @@ var SymbolPicker = class {
     }
     this.list = doc.createElement("div");
     this.list.className = "vela-sp-list";
+    this.list.addEventListener("scroll", () => {
+      if (this.rows.length < this.visible) return;
+      if (this.list.scrollTop + this.list.clientHeight < this.list.scrollHeight - 200) return;
+      this.visible += PAGE;
+      this.grow();
+    });
     this.dialog = new Dialog({
       title: "Symbol Search",
       host: opts.host,
@@ -31429,11 +31913,15 @@ var SymbolPicker = class {
       } else delete el.dataset.highlighted;
     });
   }
-  refresh() {
-    const doc = this.list.ownerDocument;
+  computeRows() {
     const TAB_TYPES = { Crypto: ["crypto"], Stocks: ["stock"], ETFs: ["etf"], Forex: ["forex"], Commodities: ["commodity"] };
     const pool = this.activeTab === "All" ? this.source() : this.source().filter((s) => TAB_TYPES[this.activeTab]?.includes((s.type ?? "").toLowerCase()) || this.activeTab === "Crypto" && (s.type ?? "").toLowerCase() === "futures");
-    this.rows = filterSymbols(pool, this.input.value);
+    return filterSymbols(pool, this.input.value, this.visible);
+  }
+  refresh() {
+    const doc = this.list.ownerDocument;
+    this.visible = PAGE;
+    this.rows = this.computeRows();
     this.highlighted = 0;
     this.list.replaceChildren();
     if (!this.rows.length) {
@@ -31443,34 +31931,42 @@ var SymbolPicker = class {
       this.list.appendChild(empty);
       return;
     }
-    for (const s of this.rows) {
-      const row = doc.createElement("div");
-      row.className = "vela-sp-row";
-      row.dataset.ticker = s.ticker;
-      const venue = s.prefix ?? s.provider;
-      if (venue) row.dataset.venue = venue;
-      const av = tickerIconEl(doc, baseOf(s), s.ticker, "vela-sp-avatar");
-      const main = doc.createElement("span");
-      main.className = "vela-sp-main";
-      const t = doc.createElement("span");
-      t.className = "vela-sp-ticker";
-      t.textContent = s.ticker;
-      const d = doc.createElement("span");
-      d.className = "vela-sp-desc";
-      d.textContent = s.description ?? (s.type ?? "");
-      main.append(t, d);
-      row.append(av, main);
-      if (venue) {
-        const badge = doc.createElement("span");
-        badge.className = "vela-sp-badge";
-        badge.dataset.p = s.provider ?? venue;
-        badge.textContent = venue;
-        row.appendChild(badge);
-      }
-      this.list.appendChild(row);
-    }
+    for (const s of this.rows) this.list.appendChild(this.rowEl(s));
     this.renderHighlight();
   }
+  /** Append the page the grown `visible` just uncovered — rows already on screen stay put. */
+  grow() {
+    const already = this.rows.length;
+    this.rows = this.computeRows();
+    for (const s of this.rows.slice(already)) this.list.appendChild(this.rowEl(s));
+  }
+  rowEl(s) {
+    const doc = this.list.ownerDocument;
+    const row = doc.createElement("div");
+    row.className = "vela-sp-row";
+    row.dataset.ticker = s.ticker;
+    const venue = s.prefix ?? s.provider;
+    if (venue) row.dataset.venue = venue;
+    const av = tickerIconEl(doc, baseOf(s), s.ticker, "vela-sp-avatar");
+    const main = doc.createElement("span");
+    main.className = "vela-sp-main";
+    const t = doc.createElement("span");
+    t.className = "vela-sp-ticker";
+    t.textContent = s.ticker;
+    const d = doc.createElement("span");
+    d.className = "vela-sp-desc";
+    d.textContent = s.description ?? (s.type ?? "");
+    main.append(t, d);
+    row.append(av, main);
+    if (venue) {
+      const badge = doc.createElement("span");
+      badge.className = "vela-sp-badge";
+      badge.dataset.p = s.provider ?? venue;
+      badge.textContent = venue;
+      row.appendChild(badge);
+    }
+    return row;
+  }
 };
 
 // src/widget/object-tree-model.ts
@@ -31662,7 +32158,7 @@ function treeIsEmpty(panes) {
 }
 
 // src/widget/side-panel.ts
-var STYLE_ID11 = "vela-widget-sidepanel";
+var STYLE_ID12 = "vela-widget-sidepanel";
 var DEFAULT_PANEL_WIDTH = 280;
 var DEFAULT_PANEL_MIN_WIDTH = 200;
 var DEFAULT_PANEL_MAX_WIDTH = 640;
@@ -31766,7 +32262,7 @@ var SidePanel = class {
      *  a programmatic {@link setWidth}, so restoring a persisted width raises no change. */
     this.onWidthChange = null;
     const doc = host.ownerDocument;
-    injectStyles(STYLE_ID11, CSS9, doc);
+    injectStyles(STYLE_ID12, CSS9, doc);
     this.minWidth = opts.resizable ? opts.minWidth ?? DEFAULT_PANEL_MIN_WIDTH : 1;
     this.maxWidth = opts.resizable ? opts.maxWidth ?? DEFAULT_PANEL_MAX_WIDTH : Number.POSITIVE_INFINITY;
     this.declaredWidth = clampPanelWidth(opts.width ?? DEFAULT_PANEL_WIDTH, this.minWidth, this.maxWidth);
@@ -31875,7 +32371,7 @@ var SidePanel = class {
 };
 
 // src/widget/object-tree.ts
-var STYLE_ID12 = "vela-widget-objtree";
+var STYLE_ID13 = "vela-widget-objtree";
 var CSS10 = `
 /* One pane's block. The transparent border reserves the drop-target outline. */
 .vela-ot-pane {
@@ -32114,7 +32610,7 @@ var ObjectTree = class extends SidePanel {
     this.menu = null;
     this.menuActions = /* @__PURE__ */ new Map();
     this.drag = null;
-    injectStyles(STYLE_ID12, CSS10, host.ownerDocument);
+    injectStyles(STYLE_ID13, CSS10, host.ownerDocument);
     this.body.addEventListener("contextmenu", (e) => this.onContextMenu(e));
     this.body.addEventListener("pointerdown", (e) => this.onPointerDown(e));
   }
@@ -33096,7 +33592,7 @@ var ObjectTree = class extends SidePanel {
 };
 
 // src/widget/data-window.ts
-var STYLE_ID13 = "vela-widget-datawindow";
+var STYLE_ID14 = "vela-widget-datawindow";
 var CSS11 = `
 .vela-dw-group {
     padding: 10px 8px 4px;
@@ -33109,6 +33605,9 @@ var CSS11 = `
     letter-spacing: 0.08em;
 }
 .vela-dw-group:first-child { border-top: none; margin-top: 0; padding-top: 8px; }
+/* The readout is DATA, not chrome: selectable (an exception to the UI-wide
+   user-select:none) so values can be copied out. The panel header stays chrome. */
+.vela-dw-group, .vela-dw-row { user-select: text; -webkit-user-select: text; cursor: text; }
 .vela-dw-row {
     display: flex;
     align-items: center;
@@ -33156,7 +33655,7 @@ var DataWindow = class extends SidePanel {
     super(host, "Data window", "vela-dw");
     this.chart = null;
     this.unsubs = [];
-    injectStyles(STYLE_ID13, CSS11, host.ownerDocument);
+    injectStyles(STYLE_ID14, CSS11, host.ownerDocument);
   }
   toggle(open2 = this.el.hidden) {
     super.toggle(open2);
@@ -33358,7 +33857,7 @@ var PanelDock = class {
 };
 
 // src/widget/shortcuts-help.ts
-var STYLE_ID14 = "vela-widget-shortcuts";
+var STYLE_ID15 = "vela-widget-shortcuts";
 var CSS12 = `
 .vela-sh-cat {
     color: var(--vela-fg-muted);
@@ -33384,7 +33883,7 @@ var ShortcutsHelp = class {
   constructor(keymap, host, onOpenChange) {
     this.keymap = keymap;
     const doc = (host ?? document.body).ownerDocument;
-    injectStyles(STYLE_ID14, CSS12, doc);
+    injectStyles(STYLE_ID15, CSS12, doc);
     this.list = doc.createElement("div");
     this.dialog = new Dialog({
       title: "Keyboard shortcuts",
@@ -33571,6 +34070,9 @@ var ChartContextMenu = class {
       host,
       items: [],
       placement: "bottom-start",
+      // 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,
       onSelect: (id) => this.run(id)
     });
     host.addEventListener("contextmenu", this.onContextMenu);
@@ -33672,7 +34174,7 @@ var ChartContextMenu = class {
 };
 
 // src/widget/indicator-picker.ts
-var STYLE_ID15 = "vela-widget-indpicker";
+var STYLE_ID16 = "vela-widget-indpicker";
 var CSS13 = `
 .vela-ip-searchrow {
     display: flex;
@@ -33750,7 +34252,7 @@ var IndicatorPicker = class {
     this.isOpen = false;
     this.opts = opts;
     const doc = (opts.host ?? document.body).ownerDocument;
-    injectStyles(STYLE_ID15, CSS13, doc);
+    injectStyles(STYLE_ID16, CSS13, doc);
     this.search = doc.createElement("input");
     this.search.className = "vela-ip-search";
     this.search.placeholder = "Search\u2026";
@@ -33878,7 +34380,7 @@ var IndicatorPicker = class {
 };
 
 // src/widget/timeframe-quick.ts
-var STYLE_ID16 = "vela-widget-tfquick";
+var STYLE_ID17 = "vela-widget-tfquick";
 var CSS14 = `
 .vela-tq-input {
     display: block;
@@ -33902,7 +34404,7 @@ var CSS14 = `
 var TimeframeQuick = class {
   constructor(opts) {
     const doc = (opts.host ?? document.body).ownerDocument;
-    injectStyles(STYLE_ID16, CSS14, doc);
+    injectStyles(STYLE_ID17, CSS14, doc);
     this.input = doc.createElement("input");
     this.input.className = "vela-tq-input";
     this.input.setAttribute("spellcheck", "false");
@@ -34084,7 +34586,7 @@ var LayoutModeController = class {
 };
 
 // src/widget/mobile-bar.ts
-var STYLE_ID17 = "vela-widget-mobilebar";
+var STYLE_ID18 = "vela-widget-mobilebar";
 var CSS15 = `
 .vela-mobilebar {
     display: none;
@@ -34135,7 +34637,7 @@ var MobileBar = class {
   constructor(host, opts) {
     this.opts = opts;
     const doc = host.ownerDocument;
-    injectStyles(STYLE_ID17, CSS15, doc);
+    injectStyles(STYLE_ID18, CSS15, doc);
     this.el = doc.createElement("div");
     this.el.className = "vela-mobilebar";
     const item = (cls, label, onClick, icon2) => {
@@ -34194,7 +34696,7 @@ var MobileBar = class {
 };
 
 // src/widget/timeframe-drawer.ts
-var STYLE_ID18 = "vela-widget-tf-drawer";
+var STYLE_ID19 = "vela-widget-tf-drawer";
 var CSS16 = `
 .vela-tfd-heading {
     padding: 4px 2px 8px;
@@ -34251,7 +34753,7 @@ var TimeframeDrawer = class {
     this.rangeChips = /* @__PURE__ */ new Map();
     this.tfChips = /* @__PURE__ */ new Map();
     const doc = opts.host.ownerDocument;
-    injectStyles(STYLE_ID18, CSS16, doc);
+    injectStyles(STYLE_ID19, CSS16, doc);
     this.drawer = new Drawer({ host: opts.host, onOpenChange: opts.onOpenChange });
     const rangeHeading = doc.createElement("div");
     rangeHeading.className = "vela-tfd-heading";
@@ -34309,7 +34811,7 @@ var TimeframeDrawer = class {
 };
 
 // src/widget/drawings-drawer.ts
-var STYLE_ID19 = "vela-widget-drawings-drawer";
+var STYLE_ID20 = "vela-widget-drawings-drawer";
 var CSS17 = `
 /* Search + tabs stay pinned while the tool list scrolls underneath. */
 .vela-dd-sticky {
@@ -34412,7 +34914,7 @@ var DrawingsDrawer = class {
     this.definition = { groups: [] };
     this.activeGroup = "";
     const doc = opts.host.ownerDocument;
-    injectStyles(STYLE_ID19, CSS17, doc);
+    injectStyles(STYLE_ID20, CSS17, doc);
     this.drawer = new Drawer({
       host: opts.host,
       title: "Drawings",
@@ -34554,7 +35056,7 @@ var DrawingsDrawer = class {
 };
 
 // src/widget/more-drawer.ts
-var STYLE_ID20 = "vela-widget-more-drawer";
+var STYLE_ID21 = "vela-widget-more-drawer";
 var CSS18 = `
 .vela-md-actions {
     display: flex;
@@ -34630,7 +35132,7 @@ var MoreDrawer = class {
   constructor(opts) {
     this.opts = opts;
     this.view = "main";
-    injectStyles(STYLE_ID20, CSS18, opts.host.ownerDocument);
+    injectStyles(STYLE_ID21, CSS18, opts.host.ownerDocument);
     this.drawer = new Drawer({ host: opts.host, onOpenChange: opts.onOpenChange });
   }
   open() {
@@ -34822,7 +35324,7 @@ var MoreDrawer = class {
 };
 
 // src/widget/timezone-drawer.ts
-var STYLE_ID21 = "vela-widget-timezone-drawer";
+var STYLE_ID22 = "vela-widget-timezone-drawer";
 var CSS19 = `
 .vela-tzd-list { padding: 2px 0 4px; }
 .vela-tzd-row {
@@ -34842,7 +35344,7 @@ var CSS19 = `
 var TimezoneDrawer = class {
   constructor(opts) {
     this.opts = opts;
-    injectStyles(STYLE_ID21, CSS19, opts.host.ownerDocument);
+    injectStyles(STYLE_ID22, CSS19, opts.host.ownerDocument);
     this.drawer = new Drawer({ host: opts.host, title: "Time zone", onOpenChange: opts.onOpenChange });
   }
   open() {
@@ -34880,7 +35382,7 @@ var TimezoneDrawer = class {
 };
 
 // src/widget/price-scale-drawer.ts
-var STYLE_ID22 = "vela-widget-price-scale-drawer";
+var STYLE_ID23 = "vela-widget-price-scale-drawer";
 var CSS20 = `
 .vela-psd-list { padding: 2px 0 4px; }
 .vela-psd-row {
@@ -34910,7 +35412,7 @@ var PriceScaleDrawer = class {
   constructor(opts) {
     this.opts = opts;
     this.pane = null;
-    injectStyles(STYLE_ID22, CSS20, opts.host.ownerDocument);
+    injectStyles(STYLE_ID23, CSS20, opts.host.ownerDocument);
     this.drawer = new Drawer({ host: opts.host, title: "Price scale", onOpenChange: opts.onOpenChange });
   }
   open() {
@@ -35046,7 +35548,7 @@ var PriceScaleDrawer = class {
 };
 
 // src/widget/drawing-pill.ts
-var STYLE_ID23 = "vela-widget-drawing-pill";
+var STYLE_ID24 = "vela-widget-drawing-pill";
 var CSS21 = `
 .vela-drawpill { display: none; }
 [data-layout='mobile'] .vela-drawpill {
@@ -35107,7 +35609,7 @@ var DrawingPill = class {
     this.chart = null;
     this.chartSubs = [];
     const doc = host.ownerDocument;
-    injectStyles(STYLE_ID23, CSS21, doc);
+    injectStyles(STYLE_ID24, CSS21, doc);
     this.el = doc.createElement("div");
     this.el.className = "vela-drawpill";
     this.el.hidden = true;
@@ -35495,7 +35997,7 @@ var WidgetHistory = class {
 };
 
 // src/widget/toast.ts
-var STYLE_ID24 = "vela-widget-toast";
+var STYLE_ID25 = "vela-widget-toast";
 var CSS22 = `
 .vela-toast {
     position: absolute;
@@ -35526,7 +36028,7 @@ var CSS22 = `
 var Toast = class {
   constructor(host) {
     this.timer = null;
-    injectStyles(STYLE_ID24, CSS22, host.ownerDocument);
+    injectStyles(STYLE_ID25, CSS22, host.ownerDocument);
     this.el = host.ownerDocument.createElement("div");
     this.el.className = "vela-toast";
     host.appendChild(this.el);
@@ -35609,6 +36111,11 @@ var WIDGET_CSS = `
 `;
 var VelaWidget = class {
   constructor(container, opts) {
+    /** Keeps the pre/post-market shading on the symbol's real calendar (see {@link SessionShadingTracker}). */
+    this.sessionShading = new SessionShadingTracker((zones) => this.inner?.renderer.set("sessionZones", zones));
+    /** Whether the ACTIVE symbol declares real trading sessions (RTH/ETH meaningful) —
+     *  gates the bottombar toggle and the settings dialog's Trading session group. */
+    this.sessionsAvailable = false;
     this.shortcutsHelp = null;
     this.inner = null;
     /** The manifest library (loaded once). */
@@ -36072,17 +36579,140 @@ var VelaWidget = class {
     this.markStateDirty();
     void this.inner?.setMarket({ session });
   }
-  /** Re-derive the RTH/ETH toggle's posture from the ACTIVE symbol's metadata: enabled
-   *  iff the resolved symbol declares a real session vocabulary (not `24x7`). */
+  /** Re-derive the session chrome from the ACTIVE symbol's metadata: the RTH/ETH
+   *  toggle shows (and the settings dialog's Trading session group appears) iff the
+   *  resolved symbol declares a real session vocabulary (not `24x7`); the pre/post
+   *  shading re-derives for the new market either way. */
   refreshSessionToggle() {
     const chart = this.inner;
-    if (!chart || !this.bottombar) return;
+    if (!chart) return;
     void chart.data.symbolInfo(this.symbol).then((si) => {
       if (this.destroyed || this.inner !== chart) return;
       const enabled = typeof si?.session === "string" && si.session !== "" && si.session !== "24x7";
       this.bottombar?.setSession({ session: this.session ?? "regular", enabled });
+      if (enabled !== this.sessionsAvailable) {
+        this.sessionsAvailable = enabled;
+        this.pushSettingsSections();
+      }
+      this.refreshSessionShading();
     });
   }
+  /** (Re)derive the pre/post-market shading bands for the current market. The loaded
+   *  depth (bars × timeframe) bounds the calendar fetch; the tracker clamps it. */
+  refreshSessionShading() {
+    const chart = this.inner;
+    if (!chart) return;
+    const lookbackMs = Math.max(this.bars, this.rangeBars) * timeframeMs(this.timeframe);
+    this.sessionShading.track(chart.data, this.symbol, { session: this.session ?? "regular", lookbackMs });
+  }
+  /** The session-shade colors live in the renderer CONFIG (persisted with it, edited
+   *  live by the dialog swatch) — the widget only proxies them into its settings rows. */
+  sessionShadeColor(key) {
+    const cfg = this.inner?.renderer.getConfig();
+    const v = cfg?.sessions?.[key];
+    return typeof v === "string" ? v : "";
+  }
+  setSessionShadeColor(key, color) {
+    this.inner?.renderer.applyConfig({ sessions: { [key]: color } });
+    this.markStateDirty();
+  }
+  /**
+   * (Re)contribute the widget's settings-dialog sections: status line parts, the fetch
+   * depth, the watermark toggle, and — only while the active symbol HAS sessions — the
+   * Trading session group (RTH/ETH switch + the pre/post-market shading colors) inside
+   * the Symbol tab. Re-run whenever a gate changes (the dialog reads them on open).
+   */
+  pushSettingsSections() {
+    const chart = this.inner;
+    if (!chart) return;
+    const rth = "Regular hours (RTH)";
+    const eth = "Extended hours (ETH)";
+    const sessionSection = {
+      title: "Trading session",
+      placement: "symbol",
+      rows: [
+        {
+          kind: "select",
+          label: "Session",
+          options: [rth, eth],
+          get: () => (this.session ?? "regular") === "extended" ? eth : rth,
+          set: (v) => this.setSession(v === eth ? "extended" : "regular")
+        },
+        {
+          kind: "color",
+          label: "Pre-market",
+          get: () => this.sessionShadeColor("premarketColor"),
+          set: (v) => this.setSessionShadeColor("premarketColor", v)
+        },
+        {
+          kind: "color",
+          label: "Post-market",
+          get: () => this.sessionShadeColor("postmarketColor"),
+          set: (v) => this.setSessionShadeColor("postmarketColor", v)
+        }
+      ]
+    };
+    const advanced = {
+      title: "Advanced",
+      placement: "end",
+      rows: [
+        {
+          kind: "select",
+          label: "Bars to fetch",
+          options: ["500", "1000", "2000", "5000", "10000", "20000"],
+          get: () => String(this.bars),
+          set: (v) => {
+            this.bars = Number(v);
+            this.markStateDirty();
+            void this.inner?.setMarket({ bars: Math.max(this.bars, this.rangeBars) });
+          }
+        }
+      ]
+    };
+    const watermarkSection = {
+      title: "Watermark",
+      placement: "symbol",
+      rows: [
+        {
+          kind: "toggle",
+          label: "Symbol watermark",
+          get: () => this.watermarkOn,
+          set: (v) => this.setWatermarkVisible(v)
+        }
+      ]
+    };
+    const sections = [];
+    if (this.statusline) {
+      const sl = this.statusline;
+      sections.push({
+        title: "Status line",
+        rows: [
+          { kind: "heading", label: "Status line" },
+          { kind: "toggle", label: "Symbol name", get: () => sl.partVisible("name"), set: (v) => sl.setPartVisible("name", v) },
+          { kind: "toggle", label: "Market status", get: () => sl.partVisible("market"), set: (v) => sl.setPartVisible("market", v) },
+          { kind: "toggle", label: "OHLC values", get: () => sl.partVisible("ohlc"), set: (v) => sl.setPartVisible("ohlc", v) },
+          { kind: "toggle", label: "Bar change values", get: () => sl.partVisible("change"), set: (v) => sl.setPartVisible("change", v) },
+          { kind: "heading", label: "Indicators" },
+          {
+            kind: "toggle",
+            label: "Titles",
+            get: () => this.indicatorTitlesOn,
+            set: (v) => this.setIndicatorTitlesVisible(v)
+          },
+          {
+            kind: "toggle",
+            label: "Values",
+            get: () => this.indicatorValuesOn,
+            set: (v) => this.setIndicatorValuesVisible(v)
+          }
+        ]
+      });
+    }
+    sections.push(advanced);
+    if (this.sessionsAvailable) sections.push(sessionSection);
+    sections.push(watermarkSection);
+    chart.renderer.setSettingsSections(sections);
+  }
   /** Star/unstar a timeframe — the topbar chips and dropdown stars follow, and the
    *  set persists with the rest of the shell state. */
   setTimeframeFavorite(tf, on) {
@@ -36388,6 +37018,7 @@ var VelaWidget = class {
     this.indicatorPicker?.destroy();
     this.tfQuick.destroy();
     this.marketStatus?.stop();
+    this.sessionShading.stop();
     this.statusline?.destroy();
     this.watermark?.destroy();
     this.bottombar?.destroy();
@@ -36526,7 +37157,10 @@ var VelaWidget = class {
         this.refreshSessionToggle();
         this.marketStatus?.track(chart.data, symbol);
       }
-      if (timeframe !== this.timeframe) this.syncTimeframeChrome(timeframe);
+      if (timeframe !== this.timeframe) {
+        this.syncTimeframeChrome(timeframe);
+        this.refreshSessionShading();
+      }
     });
     this.history.onChart(chart);
     chart.on("alert", (alert) => {
@@ -36575,67 +37209,7 @@ var VelaWidget = class {
     this.statusline?.onChart(chart);
     this.drawingPill.onChart(chart);
     this.syncStatuslineColors();
-    const advanced = {
-      title: "Advanced",
-      placement: "end",
-      rows: [
-        {
-          kind: "select",
-          label: "Bars to fetch",
-          options: ["500", "1000", "2000", "5000", "10000", "20000"],
-          get: () => String(this.bars),
-          set: (v) => {
-            this.bars = Number(v);
-            this.markStateDirty();
-            void this.inner?.setMarket({ bars: Math.max(this.bars, this.rangeBars) });
-          }
-        }
-      ]
-    };
-    const watermarkSection = {
-      title: "Watermark",
-      placement: "symbol",
-      rows: [
-        {
-          kind: "toggle",
-          label: "Symbol watermark",
-          get: () => this.watermarkOn,
-          set: (v) => this.setWatermarkVisible(v)
-        }
-      ]
-    };
-    if (this.statusline) {
-      const sl = this.statusline;
-      chart.renderer.setSettingsSections([
-        {
-          title: "Status line",
-          rows: [
-            { kind: "heading", label: "Status line" },
-            { kind: "toggle", label: "Symbol name", get: () => sl.partVisible("name"), set: (v) => sl.setPartVisible("name", v) },
-            { kind: "toggle", label: "Market status", get: () => sl.partVisible("market"), set: (v) => sl.setPartVisible("market", v) },
-            { kind: "toggle", label: "OHLC values", get: () => sl.partVisible("ohlc"), set: (v) => sl.setPartVisible("ohlc", v) },
-            { kind: "toggle", label: "Bar change values", get: () => sl.partVisible("change"), set: (v) => sl.setPartVisible("change", v) },
-            { kind: "heading", label: "Indicators" },
-            {
-              kind: "toggle",
-              label: "Titles",
-              get: () => this.indicatorTitlesOn,
-              set: (v) => this.setIndicatorTitlesVisible(v)
-            },
-            {
-              kind: "toggle",
-              label: "Values",
-              get: () => this.indicatorValuesOn,
-              set: (v) => this.setIndicatorValuesVisible(v)
-            }
-          ]
-        },
-        advanced,
-        watermarkSection
-      ]);
-    } else {
-      chart.renderer.setSettingsSections([advanced, watermarkSection]);
-    }
+    this.pushSettingsSections();
     void chart.ready().then(() => {
       if (this.buildSeq !== seq || this.destroyed) return;
       if (this.pendingRange) {