@luxalgo/vela 0.7.6 → 0.7.7

package/dist/{chunk-ZADTVRUO.js → chunk-PVGWNF7V.js}

@@ -1,4 +1,4 @@
-import { normalizeProps, nextUid, runMachine, spreadProps } from './chunk-BKHSQ4YM.js';
+import { normalizeProps, nextUid, runMachine, spreadProps } from './chunk-WTWGEB7K.js';
 import { injectStyles } from './chunk-CAFCLMPF.js';
 import * as tooltip from '@zag-js/tooltip';
 import * as dialog from '@zag-js/dialog';

package/dist/{chunk-JSVCWYBF.js → chunk-RVQWJOEE.js}

@@ -1,5 +1,5 @@
 import { deserializeDrawing, chartTypes, rendererLayers, isLineLikeSeries, seriesShownOn, foldBaseModulation, registerChartType, rendererDefaults, getDrawingType, settingsRowVisible, normalizeSettingsRow, Magnifier, TextLabel, Callout, resetDrawingSettings, registerNativeIndicator, chartType, getNativeIndicator, nativeIndicatorDescriptors, nativeInstanceChannel, drawingTypes, settingsRowValueKeys, formatDuration, RegressionChannel, FixedRangeVolumeProfile, DEFAULT_DRAWING_COLOR, SegmentDrawing, ArrowMark, GlyphStamp, RadialFib, FibSpiral, DedekindTessellation, MachFigure, GannSquare, FibRatios, MeasureBox, PositionTool, AnchoredVwap, PatternDrawing, Comment, PriceNote, Signpost, Note, PriceLabel, GANN_SQUARE_ARCS, magnifierTimeframeLabel, lineSegmentIntersection, MAGNIFIER_TIMEFRAME_OPTIONS, GLYPH_OPTIONS, STAMP_SIZE_OPTIONS, LINE_STYLE_OPTIONS, DEDEKIND_CURVATURE_OPTIONS, MACH_NUMBER_OPTIONS, MACH_WAVE_COUNT_OPTIONS, TEXT_SIZE_OPTIONS, createDrawing, inputVisible, seriesInScale, tickerModifierIds, CalloutBase, DIRECTION_OPTIONS, stableSeriesId } from './chunk-BFA32GOU.js';
-import { themeTokens, Dialog, closeOpenPopovers, closeWidthPopover, fieldSection, buildFieldControl, fieldSeparator, fieldGrid, fieldRow, CALLOUT_STYLE_ID, CALLOUT_CSS, Popover, blendOver, splitColor, CalloutBubble, Menu, TextArea, NumberInput, buildColorPicker, isPopoverOpen, eventDismissedPopover, toggleSelectList, openPopoverTrigger, fieldGridColumns, FIELD_GAP_PX, STATIC_TOKENS } from './chunk-BKHSQ4YM.js';
+import { themeTokens, Dialog, closeOpenPopovers, closeWidthPopover, fieldSection, buildFieldControl, fieldSeparator, fieldGrid, fieldRow, CALLOUT_STYLE_ID, CALLOUT_CSS, Popover, blendOver, splitColor, CalloutBubble, Menu, TextArea, NumberInput, buildColorPicker, isPopoverOpen, eventDismissedPopover, toggleSelectList, openPopoverTrigger, fieldGridColumns, FIELD_GAP_PX, STATIC_TOKENS } from './chunk-WTWGEB7K.js';
 import { icon, iconAt, withAlpha, WARNING, ACCENT, NEUTRAL, BULLISH, CATEGORICAL, SERIES_LINE, BEARISH, isDarkColor, INFO, injectStyles, CHIP_PLATE, CROSSHAIR, TRADE_EXIT, TRADE_SHORT, TRADE_LONG, iconMarkup, overlayScrollbarCss, SLATE_DEEP, VALID, INVALID, SLATE, FIELD_FOCUS_CSS, FIELD_FOCUS_RING, svg24, svg24Solid } from './chunk-CAFCLMPF.js';
 
 // src/core/events/EventBus.ts
@@ -1845,9 +1845,22 @@ var TIMEZONES = [
   { value: "Pacific/Apia", label: "Apia" },
   { value: "Pacific/Kiritimati", label: "Kiritimati" }
 ];
+var EXCHANGE_TIMEZONE = "exchange";
+function isExchangeTimezone(zone) {
+  return zone === EXCHANGE_TIMEZONE;
+}
+function resolveTimezone(zone, exchangeZone) {
+  if (!isExchangeTimezone(zone)) return zone;
+  return exchangeZone && exchangeZone !== "" ? exchangeZone : "Etc/UTC";
+}
 function normalizeTimezone(zone) {
   return zone === "UTC" || zone === "Etc/UTC" || zone === "Etc/GMT" ? "Etc/UTC" : zone;
 }
+function timezoneMenuRows(current) {
+  const active = normalizeTimezone(current);
+  const [utc, ...zones] = TIMEZONES.map((t) => ({ value: t.value, label: tzMenuLabel(t.value, t.label), checked: t.value === active }));
+  return [utc, { value: EXCHANGE_TIMEZONE, label: "Exchange", checked: isExchangeTimezone(current) }, ...zones];
+}
 function tzOffset(zone, date = /* @__PURE__ */ new Date()) {
   try {
     const parts = new Intl.DateTimeFormat("en-US", { timeZone: zone, timeZoneName: "shortOffset" }).formatToParts(date);
@@ -3503,7 +3516,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);
@@ -3750,10 +3766,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(),
@@ -3765,80 +3777,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;
@@ -3947,7 +3889,7 @@ function groupInputs(inputs) {
 var CALENDAR_SVG = iconAt("calendar", 14);
 var CLOCK_SVG = iconAt("clock", 14);
 var DIALOG_STYLE_ID = "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;
@@ -3963,8 +3905,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;}
@@ -3975,6 +3921,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);}
@@ -4009,6 +3961,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();
@@ -4030,6 +3983,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);
@@ -5311,10 +5409,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,
@@ -5438,6 +5538,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()) {
@@ -5486,6 +5592,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);
@@ -5545,6 +5652,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,
@@ -10874,6 +10986,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 = []) {
@@ -11404,6 +11520,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"));
@@ -11975,23 +12095,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) {
@@ -16877,9 +16990,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) => {
@@ -16914,14 +17025,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;
@@ -18722,6 +18836,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,
@@ -18834,6 +18949,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,
@@ -19077,7 +19196,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. */
@@ -21019,6 +21138,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;
@@ -21034,7 +21154,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;
@@ -21045,7 +21165,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";
@@ -21074,7 +21194,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;
@@ -21115,13 +21235,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. */
@@ -21130,7 +21250,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;
   }
@@ -26911,4 +27031,4 @@ function resolveElement(container) {
   return element;
 }
 
-export { BUILTIN_PRICE_STYLES, BarStore, CachingDataFeed, DARK_THEME, DataControl, DrawingStore, DrawingToolbar, DrawingsControl, LEGEND_AT_TOP_ATTR, LIGHT_THEME, MarksControl, MultiProviderFeed, NativeRenderer, RendererControl, SecondClock, TIMEZONES, TypedEventBus, Vela, applyAttributionMarkTheme, buildToolbar, createAttributionMark, createCustomMark, defaultMemberOf, defaultToolbar, groupKeyOf, groupMembers, isGroupRow, normalizeSession, normalizeTimezone, parseSymbol, priceStyleIds, registerBuiltinChartTypes, resolveTheme, sharedBarStore, timeframeToMs, tzButtonLabel, tzMenuLabel, tzOffset };
+export { BUILTIN_PRICE_STYLES, BarStore, CachingDataFeed, DARK_THEME, DataControl, DrawingStore, DrawingToolbar, DrawingsControl, LEGEND_AT_TOP_ATTR, LIGHT_THEME, MarksControl, MultiProviderFeed, NativeRenderer, RendererControl, SecondClock, TIMEZONES, TypedEventBus, Vela, applyAttributionMarkTheme, buildToolbar, createAttributionMark, createCustomMark, defaultMemberOf, defaultToolbar, groupKeyOf, groupMembers, isGroupRow, normalizeSession, normalizeTimezone, parseSymbol, priceStyleIds, registerBuiltinChartTypes, resolveTheme, resolveTimezone, sharedBarStore, timeframeToMs, timezoneMenuRows, tzButtonLabel, tzMenuLabel, tzOffset };

package/dist/{chunk-BKHSQ4YM.js → chunk-WTWGEB7K.js}

@@ -2177,7 +2177,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;
@@ -2260,7 +2261,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();
@@ -2271,7 +2277,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));
   }
@@ -2294,7 +2301,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) {
@@ -2303,6 +2310,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;
@@ -2342,10 +2350,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();
   }
@@ -2829,7 +2842,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 };