@luxalgo/vela 0.7.6 → 0.7.7

package/dist/index.cjs

@@ -13145,7 +13145,8 @@ function addRecent(hex6) {
   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;
@@ -13228,7 +13229,12 @@ function buildColorPicker(color, theme, onChange) {
     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();
@@ -13239,7 +13245,8 @@ function buildColorPicker(color, theme, onChange) {
   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));
   }
@@ -13262,7 +13269,7 @@ function buildColorPicker(color, theme, onChange) {
   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) {
@@ -13271,6 +13278,7 @@ var ColorField = class {
     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;
@@ -13310,10 +13318,15 @@ var ColorField = class {
       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();
   }
@@ -13794,7 +13807,8 @@ function buildFieldControl(desc) {
     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 };
@@ -14172,7 +14186,10 @@ var IndicatorInputsDialog = class {
         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);
@@ -14419,10 +14436,6 @@ var IndicatorInputsDialog = class {
   }
   /** 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(),
@@ -14434,80 +14447,10 @@ var IndicatorInputsDialog = class {
         this.calendarPop = null;
         this.calendarAnchor = null;
       },
-      content: (el) => {
-        const title = document.createElement("div");
-        title.className = "vela-ind-cal-title";
-        const prev2 = document.createElement("button");
-        prev2.type = "button";
-        prev2.className = "vela-ind-cal-nav";
-        prev2.setAttribute("aria-label", "Previous month");
-        prev2.innerHTML = iconAt("chevron-left", 14);
-        const next = document.createElement("button");
-        next.type = "button";
-        next.className = "vela-ind-cal-nav";
-        next.setAttribute("aria-label", "Next month");
-        next.innerHTML = iconAt("chevron-right", 14);
-        const head = document.createElement("div");
-        head.className = "vela-ind-cal-head";
-        head.append(prev2, title, next);
-        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 first = new Date(year, month, 1);
-          const startPad = first.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);
-          }
-        };
-        prev2.addEventListener("click", (e) => {
-          e.stopPropagation();
-          month -= 1;
-          if (month < 0) {
-            month = 11;
-            year -= 1;
-          }
-          paint();
-        });
-        next.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;
@@ -14616,7 +14559,7 @@ function groupInputs(inputs) {
 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;
@@ -14632,8 +14575,12 @@ function ensureDialogStyles() {
 .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;}
@@ -14644,6 +14591,12 @@ function ensureDialogStyles() {
 .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);}
@@ -14678,6 +14631,7 @@ var TIME_OPTIONS = Array.from({ length: 48 }, (_, i) => {
   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();
@@ -14699,6 +14653,151 @@ function parseIsoDate(raw) {
 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 prev2 = document.createElement("button");
+  prev2.type = "button";
+  prev2.className = "vela-ind-cal-nav";
+  prev2.innerHTML = iconAt("chevron-left", 14);
+  const next = document.createElement("button");
+  next.type = "button";
+  next.className = "vela-ind-cal-nav";
+  next.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(prev2, title, next);
+  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";
+    prev2.setAttribute("aria-label", mode === "date" ? "Previous month" : mode === "month" ? "Previous year" : "Previous decade");
+    next.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();
+  };
+  prev2.addEventListener("click", (e) => {
+    e.stopPropagation();
+    step(-1);
+  });
+  next.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);
@@ -15980,10 +16079,12 @@ var BASELINE_LEVEL_DEFAULT = 50;
 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,
@@ -16107,6 +16208,12 @@ function clampLevel(v) {
 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()) {
@@ -16155,6 +16262,7 @@ function mergeConfig(base, patch) {
   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);
@@ -16214,6 +16322,11 @@ function mergeConfig(base, patch) {
     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,
@@ -21584,6 +21697,10 @@ var BUILTIN_SETTINGS_IDS = [
   "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 = []) {
@@ -22114,6 +22231,10 @@ var SettingsDialog = class {
     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"));
@@ -22685,23 +22806,16 @@ var SettingsDialog = class {
     this.hintTips.push(dispose);
     return el;
   }
-  numberRow(label, value, min, max, step, onChange) {
-    return fieldRow({
-      label,
-      labelSize: "sm",
-      className: "vela-sd-row",
-      control: buildFieldControl({
-        kind: "number",
-        value,
-        min,
-        max,
-        step,
-        fill: false,
-        commit: "live",
-        steppers: true,
-        onChange
-      }).el
-    });
+  /** `unit` (optional) trails the input as muted text — "%", "bars". */
+  numberRow(label, value, min, max, step, onChange, unit) {
+    const controls = [buildFieldControl({ kind: "number", value, min, max, 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) {
@@ -28220,9 +28334,7 @@ function createProjector(coords, paneOf, paneIdAtY, barsInRange, seriesInRange)
 }
 
 // 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 min = Infinity;
   let max = -Infinity;
   const consider = (v) => {
@@ -28257,14 +28369,17 @@ function computePaneScale(models, bars, includeCandles, i0, i1, drawings, log =
     const pad = Math.abs(min) * 0.1 || 1;
     return { min: min - pad, max: max + pad, log: log && min - 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 && min > 0) {
     const lmin = Math.log(min);
     const lmax = Math.log(max);
     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 = max - min;
-  return { min: min - span * MARGIN_BOTTOM, max: max + span * MARGIN_TOP };
+  return { min: min - span * below, max: max + span * above };
 }
 function considerSeries(s, i0, i1, off, consider) {
   if (!seriesInScale(s)) return;
@@ -30091,6 +30206,7 @@ var NativeRenderer = class {
         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,
@@ -30203,6 +30319,10 @@ var NativeRenderer = class {
     this.animAutoscale.toggle(next.animations.autoscale);
     this.intro = { style: next.animations.intro ? this.introOnStyle : false, duration: this.intro.duration || INTRO_DURATION_DEFAULT_MS };
     s.separatorColor = keepInherit(s.separatorColor, next.panes.separatorColor, prevTheme.borderColor);
+    if (next.margins.right !== s.margins.right && this.coords.barCount > 0) {
+      this.applyViewport({ barSpacing: this.coords.getViewport().barSpacing, rightOffset: next.margins.right });
+    }
+    s.margins = { ...next.margins };
     this.scene.tradeMarkers = {
       visible: next.trades.visible,
       labels: next.trades.labels,
@@ -30446,7 +30566,7 @@ var NativeRenderer = class {
   /** 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. */
@@ -32388,6 +32508,7 @@ var NativeRenderer = class {
     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;
@@ -32403,7 +32524,7 @@ var NativeRenderer = class {
         if (or) dr = dr ? { min: Math.min(dr.min, or.min), max: Math.max(dr.max, or.max) } : or;
       }
       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;
@@ -32414,7 +32535,7 @@ var NativeRenderer = class {
           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";
@@ -32443,7 +32564,7 @@ var NativeRenderer = class {
           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;
@@ -32484,13 +32605,13 @@ var NativeRenderer = class {
     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. */
@@ -32499,7 +32620,7 @@ var NativeRenderer = class {
     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;
   }

package/dist/index.d.cts

@@ -1,9 +1,9 @@
-import { D as DrawingsDocument, R as Resolved } from './contributions-D6p1RB38.cjs';
-export { B as BarsChangeReason, C as CellStateContext, b as ContextSelect, c as DataControl, d as DrawingsControl, e as EngineAlert, f as EngineCapabilities, g as EngineContextSnapshot, h as EngineFactory, i as EngineWarning, j as ExecutionHandlers, k as ExecutionMarket, l as ExecutionRequest, m as ExecutionSession, E as ExternalIndicatorEntry, F as FetchSeries, n as IndicatorEventMap, I as IndicatorHandle, o as IndicatorSummary, L as LegendActionDescriptor, p as LegendCalloutContent, q as LegendCalloutDescriptor, r as LegendCalloutItem, s as LegendCalloutSpec, t as LegendIndicatorInfo, M as MarksControl, N as NativeIndicator, u as NativeIndicatorContext, v as NativeIndicatorDescriptor, w as NativeIndicatorInfo, x as NativeIndicatorOutput, O as OVERRIDABLE_TOPBAR_IDS, P as ParsedSymbol, y as PreparedScript, z as RendererControl, A as RunIndicatorResult, G as SceneInspection, a as ScriptRun, H as ScriptRunCause, J as ScriptRunResult, S as ScriptingEngine, K as SidePanelButton, Q as SidePanelDescriptor, T as SidePanelHandle, U as SidePanelHeader, X as StatePersistenceHandler, Y as StrategyFill, Z as StrategyState, _ as StrategyTrade, $ as SymbolRankingHook, a0 as TypedEventBus, V as Vela, a1 as VelaDeps, a2 as VelaEventMap, a3 as VisibleBarRange, a4 as WidgetActionDescriptor, a5 as WidgetActionTarget, a6 as WidgetAttachment, W as WidgetContext, a7 as getNativeIndicator, a8 as legendActions, a9 as legendCallouts, aa as nativeIndicatorDescriptors, ab as nativeIndicatorTypes, ac as registerDefaultEngine, ad as registerLegendAction, ae as registerLegendCallout, af as registerNativeIndicator, ag as registerSidePanel, ah as registerStatePersistence, ai as registerSymbolRanking, aj as registerWidgetAction, ak as registerWidgetAttachment, al as resolveEngines, am as sidePanels, an as statePersistenceHandlers, ao as symbolRanking, ap as topbarActionOverride, aq as unregisterDefaultEngine, ar as unregisterLegendAction, as as unregisterLegendCallout, at as unregisterNativeIndicator, au as unregisterSidePanel, av as unregisterStatePersistence, aw as unregisterWidgetAction, ax as unregisterWidgetAttachment, ay as widgetActions, az as widgetAttachments } from './contributions-D6p1RB38.cjs';
+import { D as DrawingsDocument, R as Resolved } from './contributions-DF_Ea07m.cjs';
+export { B as BarsChangeReason, C as CellStateContext, b as ContextSelect, c as DataControl, d as DrawingsControl, e as EngineAlert, f as EngineCapabilities, g as EngineContextSnapshot, h as EngineFactory, i as EngineWarning, j as ExecutionHandlers, k as ExecutionMarket, l as ExecutionRequest, m as ExecutionSession, E as ExternalIndicatorEntry, F as FetchSeries, n as IndicatorEventMap, I as IndicatorHandle, o as IndicatorSummary, L as LegendActionDescriptor, p as LegendCalloutContent, q as LegendCalloutDescriptor, r as LegendCalloutItem, s as LegendCalloutSpec, t as LegendIndicatorInfo, M as MarksControl, N as NativeIndicator, u as NativeIndicatorContext, v as NativeIndicatorDescriptor, w as NativeIndicatorInfo, x as NativeIndicatorOutput, O as OVERRIDABLE_TOPBAR_IDS, P as ParsedSymbol, y as PreparedScript, z as RendererControl, A as RunIndicatorResult, G as SceneInspection, a as ScriptRun, H as ScriptRunCause, J as ScriptRunResult, S as ScriptingEngine, K as SidePanelButton, Q as SidePanelDescriptor, T as SidePanelHandle, U as SidePanelHeader, X as StatePersistenceHandler, Y as StrategyFill, Z as StrategyState, _ as StrategyTrade, $ as SymbolRankingHook, a0 as TypedEventBus, V as Vela, a1 as VelaDeps, a2 as VelaEventMap, a3 as VisibleBarRange, a4 as WidgetActionDescriptor, a5 as WidgetActionTarget, a6 as WidgetAttachment, W as WidgetContext, a7 as getNativeIndicator, a8 as legendActions, a9 as legendCallouts, aa as nativeIndicatorDescriptors, ab as nativeIndicatorTypes, ac as registerDefaultEngine, ad as registerLegendAction, ae as registerLegendCallout, af as registerNativeIndicator, ag as registerSidePanel, ah as registerStatePersistence, ai as registerSymbolRanking, aj as registerWidgetAction, ak as registerWidgetAttachment, al as resolveEngines, am as sidePanels, an as statePersistenceHandlers, ao as symbolRanking, ap as topbarActionOverride, aq as unregisterDefaultEngine, ar as unregisterLegendAction, as as unregisterLegendCallout, at as unregisterNativeIndicator, au as unregisterSidePanel, av as unregisterStatePersistence, aw as unregisterWidgetAction, ax as unregisterWidgetAttachment, ay as widgetActions, az as widgetAttachments } from './contributions-DF_Ea07m.cjs';
 import { D as Drawing, S as SerializedDrawing, U as Unsubscribe, L as LineStyle, P as PriceStyle, e as IChartRenderer, R as RendererCapabilities, f as RendererDisplayOptions, g as IndicatorRenderHandle, h as IndicatorStatus, c as VelaTheme, W as WallClock, O as OHLCV, i as Pane, j as PaneAction, k as MoveTarget, l as IndicatorModel, m as ScenePatch, I as InputValue, n as SymbolPickerFn, o as LegendActionView, p as LegendCalloutView, q as InputChangeEvent, T as ThemeName, C as CrosshairEvent, r as ClickEvent, A as AxisLongPressEvent, s as TimelineMark, t as MarkGroup, u as MarkClickEvent, a as VisibleRange, v as DataWindowReadout, w as IDrawingsRendererPort, x as Millis, y as SnapMode, z as DrawingTypeKey, B as ToolbarDefinition, M as MarketConfig } from './options-D1AJKsn_.cjs';
 export { E as AddIndicatorOptions, F as AnimationConfig, G as Background, H as BoxFontFamily, J as BoxHAlign, K as BoxTextSize, Q as BoxVAlign, X as CandleBarColor, Y as CandleSeries, Z as CandleStyle, _ as DataWindowGroup, $ as DataWindowOHLC, a0 as DataWindowRow, a1 as DirtyRange, a2 as DrawingBox, a3 as DrawingExtend, a4 as DrawingIntent, a5 as DrawingLabel, a6 as DrawingLine, a7 as DrawingLinefill, a8 as DrawingMode, a9 as DrawingPoint, aa as DrawingPolyline, ab as DrawingSeriesBar, ac as DrawingSeriesGateway, ad as DrawingSeriesState, ae as DrawingStyle, af as DrawingTable, ag as DrawingText, ah as DrawingXLoc, ai as DrawingsOption, aj as Fill, ak as FillGradientStop, al as IndicatorMeta, am as InputCondition, an as InputSchema, ao as InputType, ap as InputWhen, aq as IntroAnimation, ar as IntroConfig, as as IntroStyle, at as LabelStyle, au as LabelYLoc, av as LineLikeKind, aw as LineLikeSeries, ax as LineLikeStyle, ay as MarkContent, az as MarkContentSource, aA as MarkGlyph, aB as MarkPanelItem, aC as MarkShape, aD as MarkerPoint, aE as MarkerSeries, aF as MarketSnapshot, aG as MarketSwitch, aH as PaneAxis, aI as PaneAxisBand, aJ as PaneHint, aK as PaneKind, aL as PolylinePoint, aM as PriceLine, aN as Projector, aO as ProviderName, aP as RendererConstructor, aQ as Scene, aR as SchemaPatch, aS as SecondClock, aT as SeriesDisplay, aU as SeriesKind, aV as SeriesPoint, aW as SeriesSpec, aX as SeriesSurface, aY as SeriesValueDelta, aZ as SettingsField, a_ as SettingsSchema, a$ as SettingsVisibilityPolicy, b0 as TableCell, b1 as TableMerge, b2 as TablePosition, b3 as ToolbarGroupConfig, b4 as TradeExecution, b5 as ValuePatch, b as VelaOptions, V as VisibleRangePreset, b6 as buildToolbar, b7 as defaultToolbar, b8 as inputDeltas, b9 as inputVisible, ba as seriesInScale, bb as seriesShownOn } from './options-D1AJKsn_.cjs';
 import { M as MarketDataFeed, D as DataProvider, P as ProviderInfo, a as SymbolDescriptor, S as SymbolInfo, b as ProviderCapabilities, B as BarRange } from './DataProvider-CGa4KHRa.cjs';
-export { A as ACCENT, a as ACCENT_BRIGHT, B as BEARISH, b as BULLISH, c as BarTransform, d as BasePaintingModulation, C as CATEGORICAL, e as CHIP_PLATE, f as CROSSHAIR, g as ChartTypeDefinition, h as ChartTypeSettingsInstance, i as ChartTypeSettingsSection, j as ChartTypeSettingsSubsection, D as DrawingTypeMeta, H as HIGHLIGHT, I as INFO, k as INVALID, l as IdentifiableKind, M as MARKER, N as NEUTRAL, m as NormalizedSettingsRow, R as RendererLayerArgs, n as RendererLayerDefinition, o as RendererLayerInstance, S as SERIES_LINE, p as SESSION_OFF, q as SESSION_POST, r as SESSION_PRE, s as SLATE, t as SLATE_DEEP, u as SeriesDataEngine, v as SeriesDataEngineHost, w as SettingsInlineControl, x as SettingsRowCondition, y as SettingsRowDescriptor, z as SettingsRowInlineNumber, E as SettingsRowSwatch, F as SettingsRowValueKey, G as SettingsRowWhen, J as SettingsRowWidth, K as SettingsSelectOption, L as SettingsValueRow, T as TRADE_EXIT, O as TRADE_LONG, P as TRADE_SHORT, V as VALID, W as WARNING, Q as categoricalColor, U as chartType, X as chartTypes, Y as createDrawing, Z as deserializeDrawing, _ as drawingTypes, $ as getDrawingType, a0 as normalizeSettingsRow, a1 as registerChartType, a2 as registerDrawingType, a3 as registerRendererDefaults, a4 as registerRendererLayer, a5 as rendererDefaults, a6 as rendererLayers, a7 as settingsRowValueKeys, a8 as stableSeriesId, a9 as tickerModifierIds, aa as unregisterChartType, ab as unregisterRendererDefaults, ac as unregisterRendererLayer } from './plugin-CxWfg6vK.cjs';
+export { A as ACCENT, a as ACCENT_BRIGHT, B as BEARISH, b as BULLISH, c as BarTransform, d as BasePaintingModulation, C as CATEGORICAL, e as CHIP_PLATE, f as CROSSHAIR, g as ChartTypeDefinition, h as ChartTypeSettingsInstance, i as ChartTypeSettingsSection, j as ChartTypeSettingsSubsection, D as DrawingTypeMeta, H as HIGHLIGHT, I as INFO, k as INVALID, l as IdentifiableKind, M as MARKER, N as NEUTRAL, m as NormalizedSettingsRow, R as RendererLayerArgs, n as RendererLayerDefinition, o as RendererLayerInstance, S as SERIES_LINE, p as SESSION_OFF, q as SESSION_POST, r as SESSION_PRE, s as SLATE, t as SLATE_DEEP, u as SeriesDataEngine, v as SeriesDataEngineHost, w as SettingsInlineControl, x as SettingsRowCondition, y as SettingsRowDescriptor, z as SettingsRowInlineNumber, E as SettingsRowSwatch, F as SettingsRowValueKey, G as SettingsRowWhen, J as SettingsRowWidth, K as SettingsSelectOption, L as SettingsValueRow, T as TRADE_EXIT, O as TRADE_LONG, P as TRADE_SHORT, V as VALID, W as WARNING, Q as categoricalColor, U as chartType, X as chartTypes, Y as createDrawing, Z as deserializeDrawing, _ as drawingTypes, $ as getDrawingType, a0 as normalizeSettingsRow, a1 as registerChartType, a2 as registerDrawingType, a3 as registerRendererDefaults, a4 as registerRendererLayer, a5 as rendererDefaults, a6 as rendererLayers, a7 as settingsRowValueKeys, a8 as stableSeriesId, a9 as tickerModifierIds, aa as unregisterChartType, ab as unregisterRendererDefaults, ac as unregisterRendererLayer } from './plugin-DPyVJFoA.cjs';
 export { D as DEFAULT_PANEL_MAX_WIDTH, a as DEFAULT_PANEL_MIN_WIDTH, b as DEFAULT_PANEL_WIDTH, S as SidePanelOptions, c as clampPanelWidth } from './side-panel-HF0IAzwf.cjs';
 export { i as iconMarkup, r as registerIcon } from './icons-BZYbJXSV.cjs';
 export { a as KeyBindingDescriptor, R as ResolvedBinding } from './keymap-CGOz5F5f.cjs';
@@ -138,11 +138,23 @@ interface SessionShadeStyle {
     postmarketColor: string;
     extendedColor: string;
 }
+/**
+ * Empty space kept around the data. `top` / `bottom` are the share of each pane's
+ * PIXEL height the autoscaled window reserves above the highest / below the lowest
+ * visible value (percent); `right` is the whitespace after the newest bar, in bars,
+ * that fit, re-frame and scroll-to-latest land on.
+ */
+interface ChartMargins {
+    top: number;
+    bottom: number;
+    right: number;
+}
 interface ChartStyle {
     /** Per-chart-type settings (plugin SDK sections), keyed by type id then row key. */
     chartTypes: Record<string, Record<string, unknown>>;
     /** Axis/label font size in CSS px (the family stays on the theme). */
     fontSize: number;
+    margins: ChartMargins;
     gridVert: GridLineStyle;
     gridHorz: GridLineStyle;
     /** Axis frame lines (the right price-axis border); `null` ⇒ inherit `theme.borderColor`. */
@@ -213,6 +225,9 @@ interface ChartConfig {
     panes: {
         separatorColor: string;
     };
+    /** Whitespace around the data (the Canvas tab's Margins group): top/bottom in percent
+     *  of pane height, right in bars. See {@link ChartMargins}. */
+    margins: ChartMargins;
     /** Strategy trade markers (the `tradeMarkers` feature): the order-fill units on the price pane. */
     trades: {
         visible: boolean;
@@ -982,7 +997,7 @@ declare class NativeRenderer implements IChartRenderer {
     private tradesScaleHints;
     private fitContent;
     /** 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. */