@luxalgo/vela 0.7.6 → 0.7.7

package/dist/widget.cjs

@@ -3521,7 +3521,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;
@@ -3604,7 +3605,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();
@@ -3615,7 +3621,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));
   }
@@ -3638,7 +3645,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) {
@@ -3647,6 +3654,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;
@@ -3686,10 +3694,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();
   }
@@ -4277,7 +4290,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 };
@@ -5070,10 +5084,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,
@@ -5197,6 +5213,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()) {
@@ -5245,6 +5267,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);
@@ -5304,6 +5327,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,
@@ -6125,9 +6153,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);
@@ -6250,6 +6291,7 @@ var Bottombar = class {
     this.sessionButtons = /* @__PURE__ */ new Map();
     this.sessionEl = null;
     this.timezone = opts.timezone;
+    this.exchangeTimezone = opts.exchangeTimezone;
     const doc = host.ownerDocument;
     injectStyles(STYLE_ID3, CSS4, doc);
     this.el = doc.createElement("div");
@@ -6273,7 +6315,7 @@ var Bottombar = class {
     this.clockEl = doc.createElement("span");
     this.clockEl.className = "vela-bb-clock";
     this.tzLabelEl = doc.createElement("span");
-    this.tzLabelEl.textContent = tzButtonLabel(this.timezone);
+    this.tzLabelEl.textContent = tzButtonLabel(this.displayZone);
     this.tzButton.append(this.clockEl, this.tzLabelEl);
     const session = doc.createElement("span");
     session.className = "vela-bb-session";
@@ -6308,19 +6350,32 @@ var Bottombar = class {
       placement: "top-end",
       items: this.tzItems(),
       onSelect: (zone) => {
-        this.setTimezone(zone);
+        this.setTimezone(zone, this.exchangeTimezone);
         opts.onTimezone(zone);
       }
     });
     this.tick();
     this.unsubClock = (opts.clock ?? new SecondClock()).onTick(() => this.tick());
   }
-  setTimezone(zone) {
+  /**
+   * Reflect the stored choice AND the active chart's market zone. The clock and the
+   * offset label read the RESOLVED zone, so a workspace on the exchange rule re-labels
+   * when the active cell (or its symbol) changes market — the host re-projects on
+   * both. Idempotent: unchanged inputs leave the menu alone.
+   */
+  setTimezone(zone, exchangeTimezone) {
+    if (zone === this.timezone && exchangeTimezone === this.exchangeTimezone) return;
+    const choiceChanged = zone !== this.timezone;
     this.timezone = zone;
-    this.tzLabelEl.textContent = tzButtonLabel(zone);
-    this.tzMenu.setItems(this.tzItems());
+    this.exchangeTimezone = exchangeTimezone;
+    this.tzLabelEl.textContent = tzButtonLabel(this.displayZone);
+    if (choiceChanged) this.tzMenu.setItems(this.tzItems());
     this.tick();
   }
+  /** The zone the bar's clock and label render in. */
+  get displayZone() {
+    return resolveTimezone(this.timezone, this.exchangeTimezone);
+  }
   /** Highlight (or clear with null) the active range chip — cleared on manual tf changes. */
   setActiveRange(id) {
     for (const [key, b] of this.rangeButtons) {
@@ -6348,11 +6403,7 @@ var Bottombar = class {
     this.el.remove();
   }
   tzItems() {
-    return TIMEZONES.map((t) => ({
-      id: t.value,
-      label: tzMenuLabel(t.value, t.label),
-      checked: t.value === normalizeTimezone(this.timezone)
-    }));
+    return timezoneMenuRows(this.timezone).map((r) => ({ id: r.value, label: r.label, checked: r.checked }));
   }
   tick() {
     try {
@@ -6361,7 +6412,7 @@ var Bottombar = class {
         minute: "2-digit",
         second: "2-digit",
         hour12: false,
-        timeZone: this.timezone
+        timeZone: this.displayZone
       }).format(/* @__PURE__ */ new Date());
     } catch {
       this.clockEl.textContent = "";
@@ -16011,15 +16062,14 @@ var TimezoneDrawer = class {
     this.drawer.body.replaceChildren();
     const list = doc.createElement("div");
     list.className = "vela-tzd-list";
-    const current = normalizeTimezone(this.opts.timezone());
-    for (const tz of TIMEZONES) {
+    for (const tz of timezoneMenuRows(this.opts.timezone())) {
       const row = doc.createElement("div");
       row.className = "vela-tzd-row";
       const label = doc.createElement("span");
       label.className = "vela-tzd-row-label";
-      label.textContent = tzMenuLabel(tz.value, tz.label);
+      label.textContent = tz.label;
       row.appendChild(label);
-      if (tz.value === current) row.appendChild(iconEl("check", doc));
+      if (tz.checked) row.appendChild(iconEl("check", doc));
       row.addEventListener("click", () => {
         this.opts.onTimezone(tz.value);
         this.drawer.hide();
@@ -16106,12 +16156,11 @@ function priceAxisItems(s) {
   ];
 }
 function timeAxisItems(timezone) {
-  const active = timezone === "UTC" ? "Etc/UTC" : timezone;
   return [
     {
       id: "timezone",
       label: "Time zone",
-      submenu: TIMEZONES.map((t) => ({ id: `tz:${t.value}`, label: tzMenuLabel(t.value, t.label), checked: t.value === active }))
+      submenu: timezoneMenuRows(timezone).map((r) => ({ id: `tz:${r.value}`, label: r.label, checked: r.checked }))
     },
     settingsItem("time-axis", "More settings\u2026")
   ];
@@ -21770,7 +21819,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);
@@ -22017,10 +22069,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(),
@@ -22032,80 +22080,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;
@@ -22214,7 +22192,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;
@@ -22230,8 +22208,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;}
@@ -22242,6 +22224,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);}
@@ -22276,6 +22264,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();
@@ -22297,6 +22286,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);
@@ -28784,6 +28918,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 = []) {
@@ -29314,6 +29452,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"));
@@ -29885,23 +30027,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) {
@@ -34775,9 +34910,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) => {
@@ -34812,14 +34945,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;
@@ -36510,6 +36646,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,
@@ -36622,6 +36759,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,
@@ -36865,7 +37006,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. */
@@ -38807,6 +38948,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;
@@ -38822,7 +38964,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;
@@ -38833,7 +38975,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";
@@ -38862,7 +39004,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;
@@ -38903,13 +39045,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. */
@@ -38918,7 +39060,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;
   }
@@ -43530,7 +43672,7 @@ var ChartContextMenu = class {
     } else if (id.startsWith("tz:")) {
       const zone = id.slice("tz:".length);
       if (this.cbs.setTimezone) this.cbs.setTimezone(zone);
-      else chart.renderer.set("timezone", zone);
+      else chart.renderer.set("timezone", resolveTimezone(zone, void 0));
     } else if (id === "auto") {
       chart.renderer.set("autoScale", chart.renderer.get("autoScale") === false);
     } else if (id === "invert") {
@@ -43763,7 +43905,7 @@ var ChartCell = class {
     this.history.onChart(this.inner);
     this.inner.renderer.onConfigChanged(() => {
       const zone = this.inner?.renderer.get("timezone");
-      if (typeof zone === "string" && normalizeTimezone(zone) !== normalizeTimezone(this.deps.timezone())) {
+      if (typeof zone === "string" && normalizeTimezone(zone) !== normalizeTimezone(this.displayTimezone)) {
         this.deps.setTimezone(normalizeTimezone(zone));
       }
       const style = this.priceStyle;
@@ -43805,8 +43947,7 @@ var ChartCell = class {
       this.refreshSessionShading();
     });
     this.inner.on("viewport:changed", (range) => this.sessionShading.updateRange(range));
-    const tz = deps.timezone();
-    if (tz !== "Etc/UTC") this.inner.renderer.set("timezone", tz);
+    this.applyTimezone();
     this.indicatorTitlesOn = seed.indicatorTitles ?? true;
     if (!this.indicatorTitlesOn) this.inner.renderer.set("indicatorTitles", false);
     this.indicatorValuesOn = seed.indicatorValues ?? true;
@@ -43828,7 +43969,7 @@ var ChartCell = class {
         this.statusline?.setSymbol(this.state.symbol);
         this.statusline?.setMeta(this.state.timeframe ?? "60", this.inner.data.displayPrefix(this.state.symbol) ?? this.state.provider ?? "");
       }
-      this.refreshSessionAvailable();
+      this.refreshSymbolMetadata();
       if (this.inner && this.state.symbol) this.marketStatus?.track(this.inner.data, this.state.symbol);
     });
     this.syncStatuslineColors();
@@ -43902,7 +44043,7 @@ var ChartCell = class {
     this.offMarket = this.inner.on("market:changed", ({ symbol: symbol2, timeframe }) => {
       this.projectMarket(symbol2, timeframe);
       this.refreshNativeCatalog();
-      this.refreshSessionAvailable();
+      this.refreshSymbolMetadata();
       if (this.inner) this.marketStatus?.track(this.inner.data, symbol2);
       this.deps.onMarketChanged(this.id);
     });
@@ -43943,7 +44084,35 @@ var ChartCell = class {
     this.deps.onStateDirty();
     void this.inner?.setMarket({ session });
   }
-  refreshSessionAvailable() {
+  /**
+   * The symbol's own trading zone, once its metadata has landed — what the exchange
+   * rule resolves to on this cell (the workspace labels the shared bottom bar with the
+   * ACTIVE cell's). Undefined = unknown or undeclared (the rule then renders UTC).
+   */
+  get exchangeTimezone() {
+    return this.exchangeZone;
+  }
+  /** The IANA zone this cell's axis renders in: the workspace choice, resolved. */
+  get displayTimezone() {
+    return resolveTimezone(this.deps.timezone(), this.exchangeZone);
+  }
+  /**
+   * Push the resolved zone to the renderer — on the workspace choice changing, and on
+   * this cell's market zone changing under the exchange rule. Skips the write when the
+   * renderer already holds it (its config default is the bare `'UTC'` alias).
+   */
+  applyTimezone() {
+    const chart = this.inner;
+    if (!chart) return;
+    const zone = this.displayTimezone;
+    const current = chart.renderer.get("timezone");
+    const held = typeof current === "string" && current ? current : "UTC";
+    if (normalizeTimezone(held) === normalizeTimezone(zone)) return;
+    chart.renderer.set("timezone", zone);
+  }
+  /** Re-read the symbol's metadata: session posture (RTH/ETH toggle, shading) and its
+   *  trading zone (the exchange rule). Async — the workspace re-projects when a verdict lands. */
+  refreshSymbolMetadata() {
     const chart = this.inner;
     const symbol = this.state.symbol;
     if (!chart || !symbol) return;
@@ -43951,7 +44120,13 @@ var ChartCell = class {
       if (this.inner !== chart) return;
       const available = typeof si?.session === "string" && si.session !== "" && si.session !== "24x7";
       const overnight = parseSessionSpec(si)?.overnight === true;
-      if (available !== this.sessionAvailableFlag || overnight !== this.sessionOvernightFlag) {
+      const zone = typeof si?.timezone === "string" && si.timezone !== "" ? si.timezone : void 0;
+      const zoneChanged = zone !== this.exchangeZone;
+      if (zoneChanged) {
+        this.exchangeZone = zone;
+        this.applyTimezone();
+      }
+      if (available !== this.sessionAvailableFlag || overnight !== this.sessionOvernightFlag || zoneChanged) {
         this.sessionAvailableFlag = available;
         this.sessionOvernightFlag = overnight;
         this.deps.onMarketChanged(this.id);
@@ -45721,13 +45896,23 @@ var VelaWorkspace = class {
       }
     }
   }
-  /** Set the workspace-global display timezone — applied to EVERY cell. */
+  /**
+   * Set the workspace-global display timezone — applied to EVERY cell. An IANA zone,
+   * or `'exchange'` (the exchange rule): each cell then renders in its OWN market's
+   * zone (Chicago for a CME future, New York for a US equity, UTC for crypto), and the
+   * bottom bar follows the active cell's.
+   */
   setTimezone(zone) {
     this.timezone = zone;
-    this.bottombar?.setTimezone(zone);
-    for (const cell of this.cellsById.values()) cell.chart.renderer.set("timezone", zone);
+    this.projectTimezone();
+    for (const cell of this.cellsById.values()) cell.applyTimezone();
     this.markStateDirty();
   }
+  /** Bottom bar ⇐ the stored choice + the ACTIVE cell's market zone (labels the exchange row). */
+  projectTimezone() {
+    const active = this.activeId ? this.cellsById.get(this.activeId) : void 0;
+    this.bottombar?.setTimezone(this.timezone, active?.exchangeTimezone);
+  }
   /**
    * Swap the workspace theme at runtime — `'dark'`, `'light'`, or a full custom theme,
    * applied to the shared chrome (topbar, panels, drawing toolbar) and EVERY cell.
@@ -45932,6 +46117,7 @@ var VelaWorkspace = class {
     this.dock.onChart(cell.chart);
     this.bottombar?.setActiveRange(cell.activeRangeId);
     this.bottombar?.setSession({ session: cell.session, enabled: cell.sessionAvailable });
+    this.projectTimezone();
     this.indicatorPicker?.sync();
     this.glider.stop();
     const d = cell.chart.drawings;
@@ -46516,6 +46702,7 @@ var VelaWorkspace = class {
     this.mobileBar?.setTimeframe(cell.timeframe);
     this.objectTree.setSymbol(cell.symbol);
     this.bottombar?.setSession({ session: cell.session, enabled: cell.sessionAvailable });
+    this.projectTimezone();
     this.bottombar?.setActiveRange(cell.activeRangeId);
   }
   /** Trigger ② — a cell's price style changed: the topbar button/menu only if active.