@luxalgo/vela 0.7.6 → 0.7.7

package/dist/vela.global.js

@@ -20561,7 +20561,8 @@ ${overlayScrollbarCss(".vela-dialog *")}
     recents.unshift(hex6);
     if (recents.length > 10) recents.length = 10;
   }
-  function buildColorPicker(color, theme, onChange) {
+  function buildColorPicker(color, theme, onChange, options = {}) {
+    const commit = options.commit ?? "live";
     const parsed = splitColor(color);
     let curHex = parsed.hex6;
     let curAlpha = parsed.alpha;
@@ -20644,7 +20645,12 @@ ${overlayScrollbarCss(".vela-dialog *")}
       const r = track.getBoundingClientRect();
       curAlpha = Math.max(0, Math.min(1, (clientX - r.left) / r.width));
       paintOpacity();
-      emit();
+      if (commit === "live") emit();
+    };
+    const endDrag = () => {
+      if (!dragging) return;
+      dragging = false;
+      if (commit === "release") emit();
     };
     track.addEventListener("pointerdown", (e) => {
       e.stopPropagation();
@@ -20655,7 +20661,8 @@ ${overlayScrollbarCss(".vela-dialog *")}
     track.addEventListener("pointermove", (e) => {
       if (dragging) onDrag(e.clientX);
     });
-    track.addEventListener("pointerup", () => dragging = false);
+    track.addEventListener("pointerup", endDrag);
+    track.addEventListener("pointercancel", endDrag);
     function emit() {
       onChange(combineColor(curHex, curAlpha));
     }
@@ -20678,7 +20685,7 @@ ${overlayScrollbarCss(".vela-dialog *")}
     return root;
   }
   function colorField(theme, getVal, onVal, opts) {
-    return new ColorField({ theme, getVal, onVal, shape: opts?.shape, id: opts?.id, popover: opts?.popover }).el;
+    return new ColorField({ theme, getVal, onVal, shape: opts?.shape, id: opts?.id, popover: opts?.popover, commit: opts?.commit }).el;
   }
   var ColorField = class {
     constructor(opts) {
@@ -20687,6 +20694,7 @@ ${overlayScrollbarCss(".vela-dialog *")}
       this.getVal = opts.getVal;
       this.onVal = opts.onVal;
       this.popoverOpts = opts.popover;
+      this.commit = opts.commit;
       const trigger = document.createElement("button");
       trigger.type = "button";
       if (opts.id) trigger.id = opts.id;
@@ -20726,10 +20734,15 @@ ${overlayScrollbarCss(".vela-dialog *")}
         boundary: this.popoverOpts?.boundary,
         zIndex: this.popoverOpts?.zIndex,
         className: "vela-color-field-pop",
-        content: buildColorPicker(this.getVal(), this.theme, (val) => {
-          this.onVal(val);
-          this.paint();
-        })
+        content: buildColorPicker(
+          this.getVal(),
+          this.theme,
+          (val) => {
+            this.onVal(val);
+            this.paint();
+          },
+          { commit: this.commit }
+        )
       });
       pop.show();
     }
@@ -21210,7 +21223,8 @@ ${overlayScrollbarCss(".vela-dialog *")}
       const el2 = colorField(desc.theme, desc.get, desc.onChange, {
         shape: "circle",
         id: desc.id,
-        popover: desc.popover
+        popover: desc.popover,
+        commit: desc.commit
       });
       if (desc.title) el2.title = desc.title;
       return { el: el2 };
@@ -21588,7 +21602,10 @@ ${overlayScrollbarCss(".vela-dialog *")}
           id,
           theme: this.host.theme(),
           get: () => String(bagOf(row, inp)[inp.key] ?? inp.defval),
-          onChange: (v) => emit(v)
+          onChange: (v) => emit(v),
+          // An input change re-executes the script over its whole history: commit the
+          // opacity drag once on release, not once per pointer move.
+          commit: "release"
         }).el;
       }
       if (inp.type === "symbol") return this.buildSymbol(id, String(current), emit);
@@ -21835,10 +21852,6 @@ ${overlayScrollbarCss(".vela-dialog *")}
     }
     /** Open a themed month calendar under `anchor` — same surface + shadow as the choice list. */
     openCalendar(anchor, current, onPick) {
-      const parsed = parseIsoDate(current);
-      let year = parsed?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear();
-      let month = parsed?.getMonth() ?? (/* @__PURE__ */ new Date()).getMonth();
-      const selected = parsed ? isoDate(parsed) : current;
       const pop = new Popover({
         trigger: anchor,
         theme: this.host.theme(),
@@ -21850,80 +21863,10 @@ ${overlayScrollbarCss(".vela-dialog *")}
           this.calendarPop = null;
           this.calendarAnchor = null;
         },
-        content: (el) => {
-          const title = document.createElement("div");
-          title.className = "vela-ind-cal-title";
-          const prev3 = document.createElement("button");
-          prev3.type = "button";
-          prev3.className = "vela-ind-cal-nav";
-          prev3.setAttribute("aria-label", "Previous month");
-          prev3.innerHTML = iconAt("chevron-left", 14);
-          const next2 = document.createElement("button");
-          next2.type = "button";
-          next2.className = "vela-ind-cal-nav";
-          next2.setAttribute("aria-label", "Next month");
-          next2.innerHTML = iconAt("chevron-right", 14);
-          const head = document.createElement("div");
-          head.className = "vela-ind-cal-head";
-          head.append(prev3, title, next2);
-          const week = document.createElement("div");
-          week.className = "vela-ind-cal-week";
-          for (const d of WEEKDAY_LABELS) {
-            const cell = document.createElement("span");
-            cell.textContent = d;
-            week.appendChild(cell);
-          }
-          const grid = document.createElement("div");
-          grid.className = "vela-ind-cal-grid";
-          const paint = () => {
-            title.textContent = `${MONTH_LABELS[month]} ${year}`;
-            grid.replaceChildren();
-            const first2 = new Date(year, month, 1);
-            const startPad = first2.getDay();
-            const days = new Date(year, month + 1, 0).getDate();
-            const today = isoDate(/* @__PURE__ */ new Date());
-            for (let i = 0; i < startPad; i++) {
-              const blank = document.createElement("span");
-              blank.className = "vela-ind-cal-blank";
-              grid.appendChild(blank);
-            }
-            for (let day = 1; day <= days; day++) {
-              const iso = `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
-              const b = document.createElement("button");
-              b.type = "button";
-              b.className = "vela-ind-cal-day";
-              b.textContent = String(day);
-              if (iso === selected) b.dataset.checked = "1";
-              if (iso === today) b.dataset.today = "1";
-              b.addEventListener("click", (e) => {
-                e.stopPropagation();
-                pop.hide();
-                onPick(iso);
-              });
-              grid.appendChild(b);
-            }
-          };
-          prev3.addEventListener("click", (e) => {
-            e.stopPropagation();
-            month -= 1;
-            if (month < 0) {
-              month = 11;
-              year -= 1;
-            }
-            paint();
-          });
-          next2.addEventListener("click", (e) => {
-            e.stopPropagation();
-            month += 1;
-            if (month > 11) {
-              month = 0;
-              year += 1;
-            }
-            paint();
-          });
-          paint();
-          el.append(head, week, grid);
-        }
+        content: (el) => fillCalendar(el, current, (iso) => {
+          pop.hide();
+          onPick(iso);
+        })
       });
       this.calendarPop = pop;
       this.calendarAnchor = anchor;
@@ -22032,7 +21975,7 @@ ${overlayScrollbarCss(".vela-dialog *")}
   var CALENDAR_SVG = iconAt("calendar", 14);
   var CLOCK_SVG = iconAt("clock", 14);
   var DIALOG_STYLE_ID2 = "vela-ind-dialog-styles";
-  var DIALOG_STYLE_REV = "29";
+  var DIALOG_STYLE_REV = "30";
   var LEGEND_ICON_PX = 16;
   function ensureDialogStyles() {
     if (typeof document === "undefined") return;
@@ -22048,8 +21991,12 @@ ${overlayScrollbarCss(".vela-dialog *")}
 .vela-ind-combo-chevron{position:absolute;right:0;top:0;bottom:0;width:26px;border:none;background:transparent;color:inherit;opacity:0.55;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
 .vela-ind-combo-chevron:hover{opacity:0.9;}
 .vela-ind-cal{background:var(--vela-bg);color:var(--vela-fg);border:none;border-radius:6px;box-shadow:var(--vela-shadow);font:14px var(--vela-font);padding:10px 12px;user-select:none;}
+.vela-ind-cal [hidden]{display:none !important;}
 .vela-ind-cal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
-.vela-ind-cal-title{flex:1;text-align:center;font-weight:600;font-size:14px;color:var(--vela-fg-bright);}
+.vela-ind-cal-title{flex:1;display:flex;align-items:center;justify-content:center;gap:2px;min-width:0;}
+.vela-ind-cal-switch{border:none;background:transparent;color:var(--vela-fg-bright);font:inherit;font-weight:600;font-size:14px;padding:2px 6px;border-radius:4px;cursor:pointer;}
+.vela-ind-cal-switch:not(:disabled):hover{background:var(--vela-hover);}
+.vela-ind-cal-switch:disabled{cursor:default;}
 .vela-ind-cal-nav{width:24px;height:24px;border:none;background:transparent;color:var(--vela-fg-muted);border-radius:4px;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
 .vela-ind-cal-nav:hover{background:var(--vela-hover);color:var(--vela-fg-bright);}
 .vela-ind-cal-week,.vela-ind-cal-grid{display:grid;grid-template-columns:repeat(7,28px);gap:2px;}
@@ -22060,6 +22007,12 @@ ${overlayScrollbarCss(".vela-dialog *")}
 .vela-ind-cal-day:hover{background:var(--vela-hover);}
 .vela-ind-cal-day[data-checked]{background:var(--vela-hover-strong);color:var(--vela-fg-bright);}
 .vela-ind-cal-day[data-today]:not([data-checked]){box-shadow:inset 0 0 0 1px var(--vela-border-strong);}
+.vela-ind-cal-cells{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:calc(7 * 28px + 6 * 2px);}
+.vela-ind-cal-cell{height:36px;border:none;background:transparent;color:inherit;border-radius:4px;padding:0 4px;cursor:pointer;font:inherit;font-size:14px;}
+.vela-ind-cal-cell:hover{background:var(--vela-hover);}
+.vela-ind-cal-cell[data-checked]{background:var(--vela-hover-strong);color:var(--vela-fg-bright);}
+.vela-ind-cal-cell[data-today]:not([data-checked]){box-shadow:inset 0 0 0 1px var(--vela-border-strong);}
+.vela-ind-cal-cell[data-outside]{opacity:0.45;}
 ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
 .vela-ind-tab{font-weight:600;font-size:13px;line-height:20px;transition:color var(--vela-dur-fast) ease,border-color var(--vela-dur-fast) ease;}
 .vela-ind-tab:not(.vela-ind-tab-active):hover{color:var(--vela-fg-bright);}
@@ -22094,6 +22047,7 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
     return { value: v, label: v };
   });
   var MONTH_LABELS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+  var MONTH_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
   var WEEKDAY_LABELS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
   function normalizeDateInput(raw) {
     const t = raw.trim();
@@ -22115,6 +22069,151 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
   function isoDate(d) {
     return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
   }
+  function fillCalendar(el, current, onPick) {
+    const today = /* @__PURE__ */ new Date();
+    const selected = parseIsoDate(current);
+    let year = selected?.getFullYear() ?? today.getFullYear();
+    let month = selected?.getMonth() ?? today.getMonth();
+    let mode = "date";
+    const prev3 = document.createElement("button");
+    prev3.type = "button";
+    prev3.className = "vela-ind-cal-nav";
+    prev3.innerHTML = iconAt("chevron-left", 14);
+    const next2 = document.createElement("button");
+    next2.type = "button";
+    next2.className = "vela-ind-cal-nav";
+    next2.innerHTML = iconAt("chevron-right", 14);
+    const monthBtn = document.createElement("button");
+    monthBtn.type = "button";
+    monthBtn.className = "vela-ind-cal-switch";
+    monthBtn.setAttribute("aria-label", "Choose month");
+    const yearBtn = document.createElement("button");
+    yearBtn.type = "button";
+    yearBtn.className = "vela-ind-cal-switch";
+    yearBtn.setAttribute("aria-label", "Choose year");
+    const title = document.createElement("div");
+    title.className = "vela-ind-cal-title";
+    title.append(monthBtn, yearBtn);
+    const head = document.createElement("div");
+    head.className = "vela-ind-cal-head";
+    head.append(prev3, title, next2);
+    const week = document.createElement("div");
+    week.className = "vela-ind-cal-week";
+    for (const d of WEEKDAY_LABELS) {
+      const cell = document.createElement("span");
+      cell.textContent = d;
+      week.appendChild(cell);
+    }
+    const grid = document.createElement("div");
+    const paint = () => {
+      const decade = Math.floor(year / 10) * 10;
+      monthBtn.hidden = mode !== "date";
+      monthBtn.textContent = MONTH_LABELS[month] ?? "";
+      yearBtn.textContent = mode === "year" ? `${decade}-${decade + 9}` : String(year);
+      yearBtn.disabled = mode === "year";
+      week.hidden = mode !== "date";
+      prev3.setAttribute("aria-label", mode === "date" ? "Previous month" : mode === "month" ? "Previous year" : "Previous decade");
+      next2.setAttribute("aria-label", mode === "date" ? "Next month" : mode === "month" ? "Next year" : "Next decade");
+      grid.className = mode === "date" ? "vela-ind-cal-grid" : "vela-ind-cal-cells";
+      grid.replaceChildren();
+      if (mode === "date") {
+        const startPad = new Date(year, month, 1).getDay();
+        const days = new Date(year, month + 1, 0).getDate();
+        const todayIso = isoDate(today);
+        const selectedIso = selected ? isoDate(selected) : "";
+        for (let i = 0; i < startPad; i++) {
+          const blank = document.createElement("span");
+          blank.className = "vela-ind-cal-blank";
+          grid.appendChild(blank);
+        }
+        for (let day = 1; day <= days; day++) {
+          const iso = `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+          const b = document.createElement("button");
+          b.type = "button";
+          b.className = "vela-ind-cal-day";
+          b.textContent = String(day);
+          if (iso === selectedIso) b.dataset.checked = "1";
+          if (iso === todayIso) b.dataset.today = "1";
+          b.addEventListener("click", (e) => {
+            e.stopPropagation();
+            onPick(iso);
+          });
+          grid.appendChild(b);
+        }
+        return;
+      }
+      if (mode === "month") {
+        for (let m = 0; m < 12; m++) {
+          const b = document.createElement("button");
+          b.type = "button";
+          b.className = "vela-ind-cal-cell";
+          b.textContent = MONTH_SHORT[m] ?? "";
+          if (selected?.getFullYear() === year && selected.getMonth() === m) b.dataset.checked = "1";
+          if (today.getFullYear() === year && today.getMonth() === m) b.dataset.today = "1";
+          b.addEventListener("click", (e) => {
+            e.stopPropagation();
+            month = m;
+            mode = "date";
+            paint();
+          });
+          grid.appendChild(b);
+        }
+        return;
+      }
+      for (let y = decade - 1; y <= decade + 10; y++) {
+        const b = document.createElement("button");
+        b.type = "button";
+        b.className = "vela-ind-cal-cell";
+        b.textContent = String(y);
+        if (y < decade || y > decade + 9) b.dataset.outside = "1";
+        if (selected?.getFullYear() === y) b.dataset.checked = "1";
+        if (today.getFullYear() === y) b.dataset.today = "1";
+        b.addEventListener("click", (e) => {
+          e.stopPropagation();
+          year = y;
+          mode = "month";
+          paint();
+        });
+        grid.appendChild(b);
+      }
+    };
+    const step = (dir) => {
+      if (mode === "date") {
+        month += dir;
+        if (month < 0) {
+          month = 11;
+          year -= 1;
+        }
+        if (month > 11) {
+          month = 0;
+          year += 1;
+        }
+      } else {
+        year += mode === "month" ? dir : dir * 10;
+      }
+      paint();
+    };
+    prev3.addEventListener("click", (e) => {
+      e.stopPropagation();
+      step(-1);
+    });
+    next2.addEventListener("click", (e) => {
+      e.stopPropagation();
+      step(1);
+    });
+    monthBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      mode = "month";
+      paint();
+    });
+    yearBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      mode = "year";
+      paint();
+    });
+    paint();
+    el.append(head, week, grid);
+  }
   function normalizeTimeInput(raw) {
     const t = raw.trim();
     const m = /^(\d{1,2}):(\d{2})$/.exec(t) ?? /^(\d{2})(\d{2})$/.exec(t);
@@ -23396,10 +23495,12 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
   var PREMARKET_SHADE = withAlpha(WARNING, 0.08);
   var POSTMARKET_SHADE = withAlpha(ACCENT, 0.08);
   var EXTENDED_SHADE = POSTMARKET_SHADE;
+  var DEFAULT_MARGINS = { top: 10, bottom: 10, right: 10 };
   function defaultChartStyle() {
     return {
       chartTypes: {},
       fontSize: 11,
+      margins: { ...DEFAULT_MARGINS },
       gridVert: { visible: true, color: null },
       gridHorz: { visible: true, color: null },
       borderColor: null,
@@ -23523,6 +23624,12 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
   function clampSpacing(v) {
     return v < 0.1 ? 0.1 : v > 10 ? 10 : v;
   }
+  function clampMarginPct(v) {
+    return v < 0 ? 0 : v > 40 ? 40 : v;
+  }
+  function clampMarginBars(v) {
+    return Math.round(v < 0 ? 0 : v > 200 ? 200 : v);
+  }
   function factoryResetConfig(factory, priceStyle = factory.series.style) {
     const bag = {};
     for (const t of chartTypes()) {
@@ -23571,6 +23678,7 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
     const ps = asObject(p.priceScale);
     const anim = asObject(p.animations);
     const panes = asObject(p.panes);
+    const margins = asObject(p.margins);
     const trades = asObject(p.trades);
     const ts = asObject(p.timeScale);
     const marks = asObject(p.marks);
@@ -23630,6 +23738,11 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
       panes: {
         separatorColor: isColor(panes.separatorColor) ? panes.separatorColor : base.panes.separatorColor
       },
+      margins: {
+        top: isNum(margins.top) ? clampMarginPct(margins.top) : base.margins.top,
+        bottom: isNum(margins.bottom) ? clampMarginPct(margins.bottom) : base.margins.bottom,
+        right: isNum(margins.right) ? clampMarginBars(margins.right) : base.margins.right
+      },
       trades: {
         visible: isBool(trades.visible) ? trades.visible : base.trades.visible,
         labels: isBool(trades.labels) ? trades.labels : base.trades.labels,
@@ -29000,6 +29113,10 @@ void main() {
     "canvas.grid",
     "canvas.grid.vertical",
     "canvas.grid.horizontal",
+    "canvas.margins",
+    "canvas.margins.top",
+    "canvas.margins.bottom",
+    "canvas.margins.right",
     "canvas.theme"
   ];
   function settingsIdCatalog(hostSections, markGroups = []) {
@@ -29530,6 +29647,10 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       body.append(sid(this.toggleRow("Horizontal", config.grid.horzLines.visible, (v) => this.emit({ grid: { horzLines: { visible: v } } }), [
         this.swatch(config.grid.horzLines.color, (v) => this.emit({ grid: { horzLines: { color: v } } }))
       ]), "canvas.grid.horizontal"));
+      body.append(sid(this.sectionTitle("Margins"), "canvas.margins"));
+      body.append(sid(this.numberRow("Top", config.margins.top, 0, 40, 1, (v) => this.emit({ margins: { top: v } }), "%"), "canvas.margins.top"));
+      body.append(sid(this.numberRow("Bottom", config.margins.bottom, 0, 40, 1, (v) => this.emit({ margins: { bottom: v } }), "%"), "canvas.margins.bottom"));
+      body.append(sid(this.numberRow("Right", config.margins.right, 0, 200, 1, (v) => this.emit({ margins: { right: v } }), "bars"), "canvas.margins.right"));
       if (this.themeControl) {
         const tc = this.themeControl;
         body.append(sid(this.sectionTitle("Theme"), "canvas.theme"));
@@ -30101,23 +30222,16 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.hintTips.push(dispose);
       return el;
     }
-    numberRow(label, value, min2, max2, step, onChange) {
-      return fieldRow({
-        label,
-        labelSize: "sm",
-        className: "vela-sd-row",
-        control: buildFieldControl({
-          kind: "number",
-          value,
-          min: min2,
-          max: max2,
-          step,
-          fill: false,
-          commit: "live",
-          steppers: true,
-          onChange
-        }).el
-      });
+    /** `unit` (optional) trails the input as muted text — "%", "bars". */
+    numberRow(label, value, min2, max2, step, onChange, unit) {
+      const controls = [buildFieldControl({ kind: "number", value, min: min2, max: max2, step, fill: false, commit: "live", steppers: true, onChange }).el];
+      if (unit) {
+        const u = document.createElement("span");
+        u.textContent = unit;
+        u.style.cssText = "color:var(--vela-fg-muted);";
+        controls.push(u);
+      }
+      return this.rowWith(label, controls);
     }
     /** A dropdown whose option values differ from their display labels. */
     selectRowLabeled(label, value, options, onChange) {
@@ -35636,9 +35750,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
   }
 
   // src/renderers/native/core/autoscale.ts
-  var MARGIN_TOP = 2 / 7;
-  var MARGIN_BOTTOM = 1 / 7;
-  function computePaneScale(models, bars, includeCandles, i0, i1, drawings, log = false, offsetOf = () => 0) {
+  function computePaneScale(models, bars, includeCandles, i0, i1, drawings, log = false, offsetOf = () => 0, margins = DEFAULT_MARGINS) {
     let min2 = Infinity;
     let max2 = -Infinity;
     const consider = (v) => {
@@ -35673,14 +35785,17 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       const pad = Math.abs(min2) * 0.1 || 1;
       return { min: min2 - pad, max: max2 + pad, log: log && min2 - pad > 0 };
     }
+    const content = Math.max(0.1, 1 - (margins.top + margins.bottom) / 100);
+    const above = margins.top / 100 / content;
+    const below = margins.bottom / 100 / content;
     if (log && min2 > 0) {
       const lmin = Math.log(min2);
       const lmax = Math.log(max2);
       const lspan = lmax - lmin;
-      return { min: Math.exp(lmin - lspan * MARGIN_BOTTOM), max: Math.exp(lmax + lspan * MARGIN_TOP), log: true };
+      return { min: Math.exp(lmin - lspan * below), max: Math.exp(lmax + lspan * above), log: true };
     }
     const span = max2 - min2;
-    return { min: min2 - span * MARGIN_BOTTOM, max: max2 + span * MARGIN_TOP };
+    return { min: min2 - span * below, max: max2 + span * above };
   }
   function considerSeries(s, i0, i1, off, consider) {
     if (!seriesInScale(s)) return;
@@ -37507,6 +37622,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           intro: this.intro.style !== false
         },
         panes: { separatorColor: s.separatorColor ?? t.borderColor },
+        margins: { ...s.margins },
         trades: {
           visible: this.scene.tradeMarkers.visible,
           labels: this.scene.tradeMarkers.labels,
@@ -37619,6 +37735,10 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.animAutoscale.toggle(next2.animations.autoscale);
       this.intro = { style: next2.animations.intro ? this.introOnStyle : false, duration: this.intro.duration || INTRO_DURATION_DEFAULT_MS };
       s.separatorColor = keepInherit(s.separatorColor, next2.panes.separatorColor, prevTheme.borderColor);
+      if (next2.margins.right !== s.margins.right && this.coords.barCount > 0) {
+        this.applyViewport({ barSpacing: this.coords.getViewport().barSpacing, rightOffset: next2.margins.right });
+      }
+      s.margins = { ...next2.margins };
       this.scene.tradeMarkers = {
         visible: next2.trades.visible,
         labels: next2.trades.labels,
@@ -37862,7 +37982,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     /** Glide the view back to the most recent bars, keeping the current zoom (barSpacing). */
     scrollToRealtime() {
       if (this.coords.barCount === 0) return;
-      this.glideRightOffset(ZOOM_OUT_MARGIN_BARS);
+      this.glideRightOffset(this.scene.style.margins.right);
     }
     /** Ease rightOffset to `target` at constant zoom (see animTick's scroll glide);
      *  instant when the scroll glide is off. Shared by scroll-to-latest and panBy. */
@@ -39804,6 +39924,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       const pricePane = panes.find((p) => p.kind === "price") ?? null;
       this.chrome.prepare(this.scene, this.coords, this.theme);
       const animating = this.animator.active;
+      const margins = this.scene.style.margins;
       for (const pane of panes) {
         if (pane.manualScale) {
           pane.scaleTarget = pane.manualScale;
@@ -39819,7 +39940,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           if (or2) dr = dr ? { min: Math.min(dr.min, or2.min), max: Math.max(dr.max, or2.max) } : or2;
         }
         const includeCandles = pane.kind === "price" && (!this.scene.candlesHidden || this.priceLayersAnchoredToBars(masterModels) || !this.paneHasMeasurableContent(masterModels, dr));
-        pane.scaleTarget = computePaneScale(masterModels, this.bars, includeCandles, i0, i1, dr, paneLogScale(this.scene, pane), (id) => this.scene.offsetOf(id));
+        pane.scaleTarget = computePaneScale(masterModels, this.bars, includeCandles, i0, i1, dr, paneLogScale(this.scene, pane), (id) => this.scene.offsetOf(id), margins);
         pane.percentBaseline = pane.kind === "price" ? this.bars[i0]?.close ?? 0 : this.firstVisibleValue(masterModels, i0);
         pane.axisFormat = void 0;
         pane.axisBands = void 0;
@@ -39830,7 +39951,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
             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.scaleTarget = computePaneScale([], this.bars, true, i0, i1, dr, paneLogScale(this.scene, pane), (id) => this.scene.offsetOf(id), margins);
           pane.percentBaseline = this.bars[i0]?.close ?? 0;
           if (masterModels.every((m) => m.paneAxis != null)) {
             pane.axisFormat = "none";
@@ -39859,7 +39980,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
             continue;
           }
           const mdr = this.chrome.paneDrawingsRange([model], this.scene, false, vr);
-          sl.scaleTarget = computePaneScale([model], this.bars, false, i0, i1, mdr, false, (id) => this.scene.offsetOf(id));
+          sl.scaleTarget = computePaneScale([model], this.bars, false, i0, i1, mdr, false, (id) => this.scene.offsetOf(id), margins);
           if (!animating || !sl.initialized) {
             sl.scale = { ...sl.scaleTarget };
             sl.initialized = true;
@@ -39900,13 +40021,13 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       for (const pane of this.scene.panes.values()) pane.manualScale = null;
       for (const sl of this.scene.indicatorScales.values()) sl.manualScale = null;
       const visibleBars = Math.min(n, 200);
-      const rightOffset = 6;
+      const rightOffset = this.scene.style.margins.right;
       const v = this.clampViewport(w / ((visibleBars + rightOffset) * this.coords.spacingScale), rightOffset);
       this.coords.setViewport(v);
       this.targetBarSpacing = v.barSpacing;
     }
     /** Re-frame after a series replacement (a symbol/timeframe switch): keep the user's
-     *  zoom (bar spacing), re-anchor the newest bars at the default right offset.
+     *  zoom (bar spacing), re-anchor the newest bars at the configured right margin.
      *  `clampViewport`'s fit-all-bars floor deliberately does NOT apply — a progressive
      *  head may still be backfilling toward the previous depth, and raising the spacing
      *  to its temporary bar count would lose the zoom this exists to keep. */
@@ -39915,7 +40036,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.panVelocity = 0;
       for (const pane of this.scene.panes.values()) pane.manualScale = null;
       for (const sl of this.scene.indicatorScales.values()) sl.manualScale = null;
-      const v = { barSpacing: clampBarSpacing(this.coords.getViewport().barSpacing), rightOffset: defaultViewport().rightOffset };
+      const v = { barSpacing: clampBarSpacing(this.coords.getViewport().barSpacing), rightOffset: this.scene.style.margins.right };
       this.coords.setViewport(v);
       this.targetBarSpacing = v.barSpacing;
     }