@luxalgo/vela 0.6.2 → 0.6.4

package/dist/vela.global.js

@@ -9872,7 +9872,7 @@ var Vela = (function (exports) {
       } 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) => {
@@ -16247,6 +16247,23 @@ var Vela = (function (exports) {
     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 {
@@ -16317,6 +16334,7 @@ var Vela = (function (exports) {
       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");
@@ -16395,6 +16413,7 @@ var Vela = (function (exports) {
     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");
@@ -16408,7 +16427,16 @@ var Vela = (function (exports) {
         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));
@@ -16457,6 +16485,7 @@ var Vela = (function (exports) {
             placement: "right-start",
             onSelect: this.onSelect,
             onFavorite: this.onFavorite,
+            checkmarks: this.checkmarks,
             id: `${this.mid}--${item.id}`
           });
           sub.setItems(item.submenu ?? []);
@@ -16481,7 +16510,8 @@ var Vela = (function (exports) {
         triggerId: opts.triggerId,
         id: opts.id,
         minWidth: opts.minWidth,
-        onFavorite: opts.onFavorite
+        onFavorite: opts.onFavorite,
+        checkmarks: opts.checkmarks
       });
       this.root.setItems(opts.items);
     }
@@ -16509,6 +16539,13 @@ var Vela = (function (exports) {
     }
   };
 
+  // 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");
@@ -16517,8 +16554,13 @@ var Vela = (function (exports) {
 ${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; }
 `;
@@ -18704,6 +18746,9 @@ ${overlayScrollbarCss(".vela-dialog *")}
     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); }
@@ -18916,6 +18961,9 @@ ${overlayScrollbarCss(".vela-dialog *")}
     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); }
@@ -19009,6 +19057,9 @@ ${overlayScrollbarCss(".vela-dialog *")}
     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); }
@@ -19537,6 +19588,8 @@ ${overlayScrollbarCss(".vela-dialog *")}
     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; }
@@ -19595,11 +19648,17 @@ ${overlayScrollbarCss(".vela-dialog *")}
     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) {
@@ -19628,9 +19687,7 @@ ${overlayScrollbarCss(".vela-dialog *")}
         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: size3 });
-          if (item.toggleFirst) lbl.style.cursor = "pointer";
-          it.appendChild(lbl);
+          it.appendChild(labelEl(item.label, { id: item.id, size: size3 }));
         }
         if (item.fit) it.appendChild(item.control);
         else {
@@ -19655,7 +19712,7 @@ ${overlayScrollbarCss(".vela-dialog *")}
         tone: "bright",
         onChange: (v) => opts.toggle?.onChange(v)
       });
-      wrap3.append(sw.el, labelEl(opts.label, { size: size3 }));
+      wrap3.append(sw.el, labelEl(opts.label, { id: opts.toggle?.id ?? opts.id, size: size3 }));
       if (opts.info) wrap3.appendChild(opts.info);
       if (opts.toggle?.get) {
         const get = opts.toggle.get;
@@ -19694,7 +19751,7 @@ ${overlayScrollbarCss(".vela-dialog *")}
           if (controls.length > 0) dimControls(controls, v);
         }
       });
-      left.append(sw.el, labelEl(opts.label, { size: size3 }));
+      left.append(sw.el, labelEl(opts.label, { id: opts.toggle.id ?? opts.id, size: size3 }));
       wrap2.appendChild(left);
       if (controls.length > 0) dimControls(controls, opts.toggle.checked);
       if (opts.toggle.get) {
@@ -19848,6 +19905,8 @@ ${overlayScrollbarCss(".vela-dialog *")}
       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;
@@ -19910,14 +19969,17 @@ ${overlayScrollbarCss(".vela-dialog *")}
       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()) {
@@ -19928,11 +19990,24 @@ ${overlayScrollbarCss(".vela-dialog *")}
         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 next2 = tabEls.findIndex((el) => el.style.display !== "none");
+          if (next2 >= 0) activate(next2);
+        }
+      };
+      this.refreshVisibility = refresh;
+      refresh();
       const onBackdropDown = (e) => {
         if (e.target !== ui.backdrop && e.target !== ui.positioner) return;
         if (isPopoverOpen() || eventDismissedPopover(e)) {
@@ -19952,16 +20027,27 @@ ${overlayScrollbarCss(".vela-dialog *")}
     }
     /** 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;
@@ -19969,6 +20055,7 @@ ${overlayScrollbarCss(".vela-dialog *")}
     close() {
       document.removeEventListener("keydown", this.onDialogKey);
       closeOpenPopovers();
+      this.refreshVisibility = null;
       this.choicePop = null;
       this.calendarPop = null;
       this.calendarAnchor = null;
@@ -19998,11 +20085,21 @@ ${overlayScrollbarCss(".vela-dialog *")}
       }
       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,
@@ -20013,14 +20110,13 @@ ${overlayScrollbarCss(".vela-dialog *")}
           })),
           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,
@@ -20028,26 +20124,21 @@ ${overlayScrollbarCss(".vela-dialog *")}
           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,
@@ -20059,10 +20150,7 @@ ${overlayScrollbarCss(".vela-dialog *")}
     /** 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;
       }
@@ -20483,6 +20571,14 @@ ${overlayScrollbarCss(".vela-dialog *")}
     }
     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();
@@ -20945,6 +21041,8 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
           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);
@@ -21280,6 +21378,8 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
     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) {
@@ -21523,6 +21623,148 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
     }
   };
 
+  // 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,
@@ -21880,6 +22122,8 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
   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: {},
@@ -21910,7 +22154,8 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
         bottomFillColor2: null,
         width: 2,
         baselineLevel: BASELINE_LEVEL_DEFAULT
-      }
+      },
+      sessions: { premarketColor: PREMARKET_SHADE, postmarketColor: POSTMARKET_SHADE }
     };
   }
   var LINE_STYLES = ["solid", "dashed", "dotted"];
@@ -22044,6 +22289,7 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
     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 {
@@ -22136,6 +22382,10 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
         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
@@ -22382,6 +22632,8 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
       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,
@@ -22416,6 +22668,15 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
       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);
@@ -23346,10 +23607,12 @@ void main() {
         }
       }
     }
-    /** 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;
@@ -25323,10 +25586,12 @@ void main() {
       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;
@@ -26100,14 +26365,6 @@ void main() {
     }
   };
 
-  // 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() {
@@ -26990,6 +27247,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           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)));
           }
         }
@@ -29714,14 +29972,14 @@ ${overlayScrollbarCss(".vela-sd-pane")}
   // 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;}
@@ -29778,7 +30036,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
      *  `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();
@@ -30506,7 +30764,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.onCollapse = options.onCollapse ?? (() => {
       });
       this.onDrawingsSync = options.onDrawingsSync ?? null;
-      ensureStyles3();
+      ensureStyles4();
       this.root = document.createElement("div");
       this.root.className = "vela-dtb";
       this.styleRoot();
@@ -30989,13 +31247,13 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     }
   };
   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 = `
@@ -32266,7 +32524,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
 
   // 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;
@@ -32329,11 +32587,11 @@ ${overlayScrollbarCss(".vela-sd-pane")}
 [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;
@@ -32362,7 +32620,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     return el;
   }
   function createAttributionMark(doc, background) {
-    ensureStyles4(doc);
+    ensureStyles5(doc);
     const a = doc.createElement("a");
     a.className = "vela-attribution";
     a.href = ATTRIBUTION_URL;
@@ -32874,6 +33132,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       // 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;
@@ -32917,7 +33177,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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) => {
@@ -33033,6 +33293,9 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         case "highlights":
           this.scene.highlights = sanitizeHighlights(value);
           break;
+        case "sessionZones":
+          this.scene.sessionZones = sanitizeSessionZones(value);
+          break;
         case "gridlines":
           this.scene.showGrid = Boolean(value);
           break;
@@ -33149,6 +33412,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           return this.scene.indicatorZOrder();
         case "highlights":
           return this.scene.highlights;
+        case "sessionZones":
+          return this.scene.sessionZones;
         case "gridlines":
           return this.scene.showGrid;
         case "axisLabels":
@@ -33358,7 +33623,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
             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 }
       };
     }
     /**
@@ -33440,6 +33706,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         width: next2.baseline.width,
         baselineLevel: next2.baseline.baselineLevel
       };
+      s.sessions = { premarketColor: next2.sessions.premarketColor, postmarketColor: next2.sessions.postmarketColor };
       this.setPriceStyle(next2.series.style);
       this.scene.candleOverride = candleOverrideFor(this.scene.priceStyle, s.chartTypes);
       this.scene.baselineValue = next2.series.baseline;
@@ -33453,6 +33720,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       }
       this.inputsUI?.setTheme(this.theme);
       this.paneControls?.setTheme(this.theme);
+      this.axisScaleButtons?.setTheme(this.theme);
       this.userDrawings?.setTheme(this.chromeTheme());
       this.refreshScrollButtonTheme();
       this.refreshAttributionColor();
@@ -33791,7 +34059,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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" });
@@ -33960,6 +34228,15 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           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();
@@ -34036,6 +34313,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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);
@@ -34084,6 +34362,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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();
@@ -35478,6 +35757,25 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         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) {
@@ -35489,19 +35787,18 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       }
       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
@@ -35600,6 +35897,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         }
         this.inputsUI?.reposition();
         this.paneControls?.reposition();
+        this.axisScaleButtons?.reposition();
         this.repositionScrollButton();
         this.positionAttribution();
         this.publishPricePaneBounds();
@@ -35618,6 +35916,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       }
       this.inputsUI?.reposition();
       this.paneControls?.reposition();
+      this.axisScaleButtons?.reposition();
       this.repositionScrollButton();
       this.positionAttribution();
       this.publishPricePaneBounds();
@@ -35825,6 +36124,22 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     }
     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));
   }
@@ -37703,6 +38018,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
   exports.getDrawingType = getDrawingType;
   exports.getNativeIndicator = getNativeIndicator;
   exports.iconMarkup = iconMarkup;
+  exports.inputVisible = inputVisible;
   exports.legendActions = legendActions;
   exports.nativeIndicatorDescriptors = nativeIndicatorDescriptors;
   exports.nativeIndicatorTypes = nativeIndicatorTypes;