@luxalgo/vela 0.7.5 → 0.7.7

package/dist/index.cjs

@@ -129,10 +129,18 @@ var IndicatorRegistry = class {
     this.records = /* @__PURE__ */ new Map();
     this.counter = 0;
   }
-  /** Allocate a unique, stable per-instance id. */
-  nextId(prefix = "ind") {
-    this.counter += 1;
-    return `${prefix}-${this.counter}`;
+  /**
+   * Mint a unique per-instance id. Host-supplied ids share the namespace, so a minted
+   * id skips anything already recorded — and anything `taken` reports live elsewhere
+   * (a handle the orchestrator holds outside the records, e.g. a fail-soft native).
+   */
+  nextId(prefix = "ind", taken = () => false) {
+    let id;
+    do {
+      this.counter += 1;
+      id = `${prefix}-${this.counter}`;
+    } while (this.records.has(id) || taken(id));
+    return id;
   }
   add(record) {
     this.records.set(record.id, record);
@@ -8677,7 +8685,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
     this.engines.set(language, engine);
   }
   addIndicator(source, options = {}) {
-    const id = this.registry.nextId();
+    const id = this.claimIndicatorId(options.id);
     const title = options.title ?? "Indicator";
     const handle = new IndicatorHandleImpl(id, title, this, source);
     this.handles.set(id, handle);
@@ -8699,7 +8707,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
       const existing = this.registry.all().find((r) => r.native?.type === type);
       if (existing) return this.handles.get(existing.id) ?? new IndicatorHandleImpl(existing.id, existing.title, this, void 0, type);
     }
-    const id = this.registry.nextId("native");
+    const id = this.registry.nextId("native", (candidate) => this.handles.has(candidate));
     const title = descriptor?.title ?? type;
     const handle = new IndicatorHandleImpl(id, title, this, void 0, type);
     this.handles.set(id, handle);
@@ -8977,6 +8985,24 @@ var EngineOrchestrator = class _EngineOrchestrator {
     this.events.clear();
   }
   // ── internals ───────────────────────────────────────────────
+  /**
+   * The id a new script indicator runs under: the host's when supplied, else a minted
+   * one. A host id is opaque but must be a non-empty string, and it must not be live
+   * on this chart — a duplicate is a programming error surfaced synchronously, never
+   * renamed behind the caller's back (the whole point of supplying one is that
+   * `handle.id` equals what was passed). "Live" reads both the records and the handle
+   * map: a fail-soft handle never enters the registry but still owns its id.
+   */
+  claimIndicatorId(requested) {
+    if (requested === void 0) return this.registry.nextId("ind", (candidate) => this.handles.has(candidate));
+    if (typeof requested !== "string" || requested.length === 0) {
+      throw new TypeError("[vela] addIndicator: `id` must be a non-empty string");
+    }
+    if (this.handles.has(requested) || this.registry.get(requested)) {
+      throw new Error(`[vela] addIndicator: indicator id "${requested}" is already live on this chart`);
+    }
+    return requested;
+  }
   async startIndicator(id, source, options, handle) {
     try {
       await this.readyPromise;
@@ -13119,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;
@@ -13202,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();
@@ -13213,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));
   }
@@ -13236,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) {
@@ -13245,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;
@@ -13284,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();
   }
@@ -13768,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 };
@@ -14146,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);
@@ -14393,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(),
@@ -14408,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;
@@ -14590,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;
@@ -14606,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;}
@@ -14618,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);}
@@ -14652,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();
@@ -14673,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);
@@ -15954,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,
@@ -16081,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()) {
@@ -16129,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);
@@ -16188,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,
@@ -21558,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 = []) {
@@ -22088,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"));
@@ -22659,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) {
@@ -28194,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) => {
@@ -28231,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;
@@ -30065,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,
@@ -30177,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,
@@ -30420,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. */
@@ -32362,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;
@@ -32377,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;
@@ -32388,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";
@@ -32417,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;
@@ -32458,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. */
@@ -32473,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;
   }
@@ -35587,6 +35734,7 @@ function registerClassicIndicators() {
 }
 
 // src/Vela.ts
+var asError = (err) => err instanceof Error ? err : new Error(String(err));
 var Vela = class {
   constructor(container, options = {}, deps = {}) {
     registerBuiltinChartTypes();
@@ -35710,7 +35858,12 @@ var Vela = class {
    * fetch from — the same relationship `script:run` has to `context:changed`.
    */
   runScript(source, options) {
-    const handle = this.addIndicator(source, options);
+    let handle;
+    try {
+      handle = this.addIndicator(source, options);
+    } catch (err) {
+      return Promise.resolve({ ok: false, run: null, error: asError(err), onUpdate: () => () => void 0, remove: () => void 0 });
+    }
     const updates = /* @__PURE__ */ new Set();
     const drop = () => {
       try {
@@ -35754,7 +35907,12 @@ var Vela = class {
     });
   }
   runIndicator(source, options) {
-    const handle = this.addIndicator(source, options);
+    let handle;
+    try {
+      handle = this.addIndicator(source, options);
+    } catch (err) {
+      return Promise.resolve({ ok: false, handle: null, error: asError(err), context: null });
+    }
     return new Promise((resolve) => {
       const offReady = handle.on("ready", () => {
         offReady();