@luxalgo/vela 0.6.5 → 0.6.6

package/dist/workspace.cjs

@@ -337,8 +337,12 @@ var BarStore = class {
     this.series = /* @__PURE__ */ new Map();
     /** Earliest bar-open time fetched for a series — what the cache actually covers. */
     this.coveredFrom = /* @__PURE__ */ new Map();
-    /** Symbols protected from the current-symbol purge (multi-chart cells). Empty = legacy single-chart behavior. */
+    /** Symbols protected from the current-symbol purge (multi-chart cells) — the UNION
+     *  of every owner's declaration. Empty = legacy single-chart behavior. */
     this.retained = /* @__PURE__ */ new Set();
+    /** Per-owner declarations behind {@link retained} — several shells on one page must
+     *  not clobber (or, on destroy, evict) each other's protected symbols. */
+    this.retainedByOwner = /* @__PURE__ */ new Map();
   }
   get(key) {
     return this.series.get(key);
@@ -382,14 +386,21 @@ var BarStore = class {
    * Declare the set of symbols a multi-chart workspace is displaying (CANONICAL
    * tickers, post-registry resolution — `chart.data.resolve(sym).ticker`). These
    * survive every {@link retainSymbol} purge, so cells loading different symbols
-   * stop evicting each other's history. Replaces the previous set and purges
-   * anything now outside `symbols ∪ {currentSymbol}` immediately. An empty set
-   * restores the legacy single-chart policy. Note: SECONDARY symbols a script
-   * fetches (`request.security` cross-symbol) are not in this set and still drop
-   * on cross-cell loads — correctness is unaffected (they re-fetch on demand).
+   * stop evicting each other's history. Replaces the previous set FOR THAT OWNER
+   * (pass the shell instance as `owner`; several shells on one page keep separate
+   * declarations, the effective set is their union) and purges anything now outside
+   * the union ∪ {currentSymbol} immediately. An empty set releases the owner's
+   * declaration — with no owners left, the legacy single-chart policy is back.
+   * Note: SECONDARY symbols a script fetches (`request.security` cross-symbol) are
+   * not in this set and still drop on cross-cell loads — correctness is unaffected
+   * (they re-fetch on demand).
    */
-  retain(symbols) {
-    this.retained = new Set(symbols);
+  retain(symbols, owner = "default") {
+    if (symbols.size === 0) this.retainedByOwner.delete(owner);
+    else this.retainedByOwner.set(owner, new Set(symbols));
+    const union = /* @__PURE__ */ new Set();
+    for (const set of this.retainedByOwner.values()) for (const s of set) union.add(s);
+    this.retained = union;
     this.purgeOutside(this.currentSymbol);
   }
   /** Drop every series whose symbol is neither `current` nor retained. */
@@ -4571,6 +4582,10 @@ function legendActionsProviderFor(chart, context) {
     return legendActions().filter((d) => !d.when || d.when(info)).map((d) => ({ id: d.id, icon: d.icon, tooltip: d.tooltip, run: () => d.run(context(), info) }));
   };
 }
+var stateHandlers = /* @__PURE__ */ new Map();
+function statePersistenceHandlers(scope) {
+  return [...stateHandlers.values()].filter((h) => h.scope === scope);
+}
 var defaultEngines = /* @__PURE__ */ new Map();
 function resolveEngines(overrides) {
   return { ...Object.fromEntries(defaultEngines), ...overrides };
@@ -14212,10 +14227,11 @@ var MobileBar = class {
     const indicators = onIndicators ? item("vela-mb-indicators", "Indicators", onIndicators, "indicators") : null;
     this.actionsHost = doc.createElement("span");
     this.actionsHost.className = "vela-mb-actions";
-    const drawings = item("vela-mb-drawings", "Drawings", opts.onDrawingsClick, "pen");
+    const onDrawings = opts.onDrawingsClick;
+    const drawings = onDrawings ? item("vela-mb-drawings", "Drawings", onDrawings, "pen") : null;
     const more = item("vela-mb-more", "More", opts.onMoreClick, "kebab");
     const settings = item("vela-mb-settings", "Chart settings", opts.onSettingsClick, "gear");
-    this.el.append(this.symbolEl, this.tfEl, ...indicators ? [indicators] : [], this.actionsHost, drawings, more, settings);
+    this.el.append(this.symbolEl, this.tfEl, ...indicators ? [indicators] : [], this.actionsHost, ...drawings ? [drawings] : [], more, settings);
     host.appendChild(this.el);
     this.renderActions();
   }
@@ -17030,6 +17046,35 @@ function rendererDefaults() {
   return Object.fromEntries(defaults);
 }
 
+// src/core/price-styles/heikin-ashi.ts
+function heikinAshiNext(raw, prevHa) {
+  const haClose = (raw.open + raw.high + raw.low + raw.close) / 4;
+  const haOpen = prevHa ? (prevHa.open + prevHa.close) / 2 : (raw.open + raw.close) / 2;
+  return {
+    time: raw.time,
+    open: haOpen,
+    high: Math.max(raw.high, haOpen, haClose),
+    low: Math.min(raw.low, haOpen, haClose),
+    close: haClose,
+    ...raw.volume != null ? { volume: raw.volume } : {}
+  };
+}
+function heikinAshiFull(raw) {
+  const out = new Array(raw.length);
+  let prev2;
+  for (let i = 0; i < raw.length; i += 1) {
+    prev2 = heikinAshiNext(raw[i], prev2);
+    out[i] = prev2;
+  }
+  return out;
+}
+
+// src/chart-types/builtins.ts
+var HEIKIN_ASHI = { full: heikinAshiFull, next: heikinAshiNext };
+function registerBuiltinChartTypes() {
+  registerChartType({ id: "heikinashi", label: "Heikin Ashi", barTransform: HEIKIN_ASHI });
+}
+
 // src/workspace/sync.ts
 function syncTargets(originId, setting, cellIds) {
   if (setting == null || setting === false) return [];
@@ -17089,8 +17134,18 @@ function sanitizeState(doc) {
   if (tracks) out.trackSizes = tracks;
   const panels2 = sanitizePanels(d.panels);
   if (panels2) out.panels = panels2;
+  const ext = sanitizeExt(d.ext);
+  if (ext) out.ext = ext;
   return out;
 }
+function sanitizeExt(raw) {
+  if (raw == null || typeof raw !== "object" || Array.isArray(raw)) return null;
+  const out = {};
+  for (const [key, value] of Object.entries(raw)) {
+    if (key.length > 0 && value !== void 0) out[key] = value;
+  }
+  return Object.keys(out).length > 0 ? out : null;
+}
 function sanitizeCell(raw) {
   if (raw == null || typeof raw !== "object") return null;
   const c = raw;
@@ -17112,6 +17167,8 @@ function sanitizeCell(raw) {
     const natives = Array.isArray(ind.natives) ? ind.natives.filter((n) => typeof n === "string") : [];
     out.indicators = { manifest, natives };
   }
+  const ext = sanitizeExt(c.ext);
+  if (ext) out.ext = ext;
   return out;
 }
 function sanitizeSync(raw) {
@@ -18444,7 +18501,8 @@ var EngineOrchestrator = class _EngineOrchestrator {
           this.emitScriptRun(id, cause, first);
         },
         onAlert: (a) => {
-          this.events.emit("alert", a);
+          const indicator = record.options?.title ?? record.prepared?.meta.title ?? record.title;
+          this.events.emit("alert", { ...a, indicator });
           handle.emit("alert", { id: a.id, message: a.message, title: a.title, time: a.time });
         },
         onWarning: (w) => this.events.emit("warning", w),
@@ -18492,6 +18550,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
       overlay: d.overlay,
       paneHint: d.paneHint,
       native: { type: record.native.type },
+      ...out.paneAxis != null ? { paneAxis: out.paneAxis } : {},
       series: out.series ?? [],
       fills: out.fills ?? [],
       backgrounds: out.backgrounds ?? [],
@@ -19086,6 +19145,24 @@ var RendererControl = class {
     this.renderer.setSettingsSections?.(sections);
     return this;
   }
+  /**
+   * Set the settings-dialog visibility policy: `hidden` lists setting ids to hide —
+   * a tab (`'canvas'`), a group (`'canvas.grid'`), or a single row
+   * (`'canvas.grid.vertical'`); an id hides its whole subtree, and a tab with nothing
+   * left disappears from the rail. Presentation-only: hidden values keep being stored
+   * and applied (e.g. hide `'advanced'` while forcing the widget's `bars` option).
+   * Seeded from `VelaOptions.settings`; silent no-op without a settings dialog.
+   */
+  setSettingsVisibility(policy) {
+    this.renderer.setSettingsVisibility?.(policy);
+    return this;
+  }
+  /** Every addressable setting id of this chart (built-in tabs/groups/rows, chart-type
+   *  sections, host sections) — enumerate these to build a `hidden` list instead of
+   *  reading contributor source. Empty on a renderer without a settings dialog. */
+  listSettingsIds() {
+    return this.renderer.listSettingsIds?.() ?? [];
+  }
   /** Tell the renderer's own chrome which size class the host shell is in —
    *  `'mobile'` switches its dialogs/toolbars to the touch-first presentation.
    *  Silent no-op on a renderer without adaptive chrome. */
@@ -21468,658 +21545,6 @@ function supportsWebGL2() {
   return webgl2Probe;
 }
 
-// src/renderers/native/chrome/ticks.ts
-function priceTicks(min, max, target = 6) {
-  if (!(max > min) || !Number.isFinite(min) || !Number.isFinite(max)) return [];
-  const raw = (max - min) / Math.max(1, target);
-  const mag = Math.pow(10, Math.floor(Math.log10(raw)));
-  const norm = raw / mag;
-  const step = (norm < 1.5 ? 1 : norm < 3 ? 2 : norm < 7 ? 5 : 10) * mag;
-  const decimals = Math.max(0, -Math.floor(Math.log10(step)) + 1);
-  const out = [];
-  const start = Math.ceil(min / step) * step;
-  for (let v = start; v <= max + step * 1e-6; v += step) {
-    out.push(Number(v.toFixed(decimals)));
-  }
-  return out;
-}
-function priceDecimals(min, max, target = 6) {
-  if (!(max > min)) return 2;
-  const raw = (max - min) / Math.max(1, target);
-  const mag = Math.pow(10, Math.floor(Math.log10(raw)));
-  const norm = raw / mag;
-  const step = (norm < 1.5 ? 1 : norm < 3 ? 2 : norm < 7 ? 5 : 10) * mag;
-  return Math.max(0, Math.min(8, -Math.floor(Math.log10(step)) + 1));
-}
-function logPriceTicks(min, max, target = 6) {
-  if (min <= 0 || !(max > min) || !Number.isFinite(min) || !Number.isFinite(max)) return [];
-  if (Math.log10(max) - Math.log10(min) < 1.1) return priceTicks(min, max, target);
-  const out = [];
-  const startExp = Math.floor(Math.log10(min));
-  const endExp = Math.ceil(Math.log10(max));
-  for (let e = startExp; e <= endExp; e += 1) {
-    for (const m of [1, 2, 5]) {
-      const v = m * Math.pow(10, e);
-      if (v >= min && v <= max) out.push(v);
-    }
-  }
-  return out;
-}
-function valueDecimals(v) {
-  const a = Math.abs(v);
-  if (a >= 100) return 0;
-  if (a >= 1) return 2;
-  if (a >= 0.01) return 4;
-  return 6;
-}
-function tickDecimals(tick) {
-  if (!(tick > 0) || !Number.isFinite(tick)) return 2;
-  for (let d = 0; d <= 8; d += 1) {
-    if (Math.abs(Number(tick.toFixed(d)) - tick) <= tick * 1e-6) return d;
-  }
-  return 8;
-}
-function axisDecimals(scale, heightPx, mintick) {
-  const d = mintick != null && mintick > 0 ? tickDecimals(mintick) : priceDecimals(scale.min, scale.max, tickCount(heightPx));
-  return d === 0 ? 2 : d;
-}
-function tickCount(paneHeightPx) {
-  return Math.max(2, Math.min(16, Math.round(paneHeightPx / 50)));
-}
-function paneTicks(scale, heightPx) {
-  return scale.log ? logPriceTicks(scale.min, scale.max, tickCount(heightPx)) : priceTicks(scale.min, scale.max, tickCount(heightPx));
-}
-function toPct(price, baseline) {
-  return (price / baseline - 1) * 100;
-}
-function toIndex(price, baseline) {
-  return price / baseline * 100;
-}
-function formatPct(pct) {
-  const sign = pct >= 0 ? "+" : "-";
-  return `${sign}${Math.abs(pct).toFixed(2)}%`;
-}
-function formatIndex(idx) {
-  return idx.toFixed(2);
-}
-function formatCompactValue(v) {
-  const a = Math.abs(v);
-  if (a >= 1e9) return `${trimZeros(v / 1e9)}B`;
-  if (a >= 1e6) return `${trimZeros(v / 1e6)}M`;
-  if (a >= 1e3) return `${trimZeros(v / 1e3)}K`;
-  return trimZeros(v);
-}
-function trimZeros(v) {
-  return Number(v.toFixed(2)).toString();
-}
-function paneAxisTicks(scale, heightPx, pct, mintick, format) {
-  if (pct) {
-    const { baseline, indexed } = pct;
-    const lo = Math.min(scale.min, scale.max);
-    const hi = Math.max(scale.min, scale.max);
-    if (indexed) {
-      const iLo = toIndex(lo, baseline);
-      const iHi = toIndex(hi, baseline);
-      return priceTicks(iLo, iHi, tickCount(heightPx)).map((idx) => ({ price: baseline * idx / 100, label: formatIndex(idx) }));
-    }
-    const pLo = toPct(lo, baseline);
-    const pHi = toPct(hi, baseline);
-    return priceTicks(pLo, pHi, tickCount(heightPx)).map((p) => ({ price: baseline * (1 + p / 100), label: formatPct(p) }));
-  }
-  if (format === "volume") {
-    return paneTicks(scale, heightPx).map((price) => ({ price, label: formatCompactValue(price) }));
-  }
-  return paneTicks(scale, heightPx).map((price) => ({ price, label: formatPriceLabel(scale, heightPx, price, mintick) }));
-}
-function formatAxisValue(scale, heightPx, value, pct, mintick, format) {
-  if (pct) return pct.indexed ? formatIndex(toIndex(value, pct.baseline)) : formatPct(toPct(value, pct.baseline));
-  if (format === "volume") return formatCompactValue(value);
-  return formatPriceLabel(scale, heightPx, value, mintick);
-}
-function formatPriceLabel(scale, heightPx, value, mintick) {
-  const wideLog = scale.log && Math.log10(scale.max) - Math.log10(scale.min) >= 1.1;
-  if (wideLog) {
-    const d = valueDecimals(value);
-    return value.toFixed(d === 0 ? 2 : d);
-  }
-  return value.toFixed(axisDecimals(scale, heightPx, mintick));
-}
-var SEC = 1e3;
-var MIN = 60 * SEC;
-var HOUR = 60 * MIN;
-var DAY = 24 * HOUR;
-var WEEK = 7 * DAY;
-var MONTH = 30 * DAY;
-var YEAR = 365 * DAY;
-var STEP_LADDER = [
-  SEC,
-  5 * SEC,
-  15 * SEC,
-  30 * SEC,
-  MIN,
-  5 * MIN,
-  15 * MIN,
-  30 * MIN,
-  HOUR,
-  2 * HOUR,
-  4 * HOUR,
-  6 * HOUR,
-  12 * HOUR,
-  DAY,
-  2 * DAY,
-  WEEK,
-  MONTH,
-  3 * MONTH,
-  YEAR
-];
-var MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-var pad2 = (n) => n < 10 ? `0${n}` : String(n);
-function pickStep(targetMs) {
-  for (const step of STEP_LADDER) if (step >= targetMs) return step;
-  return STEP_LADDER[STEP_LADDER.length - 1];
-}
-function timeTicks(fromMs, toMs, target = 8, offsetMs = 0) {
-  const span = toMs - fromMs;
-  if (!(span > 0)) return [];
-  const step = pickStep(span / Math.max(1, target));
-  const zFrom = fromMs + offsetMs;
-  const zTo = toMs + offsetMs;
-  const first = Math.ceil(zFrom / step) * step;
-  const out = [];
-  for (let zt = first; zt <= zTo; zt += step) {
-    const t = zt - offsetMs;
-    const d = new Date(zt);
-    let label;
-    let major = false;
-    if (step < DAY) {
-      const h = d.getUTCHours();
-      const m = d.getUTCMinutes();
-      if (h === 0 && m === 0) {
-        label = `${MONTHS[d.getUTCMonth()]} ${d.getUTCDate()}`;
-        major = true;
-      } else {
-        label = `${pad2(h)}:${pad2(m)}`;
-      }
-    } else if (step < YEAR) {
-      label = `${MONTHS[d.getUTCMonth()]} ${d.getUTCDate()}`;
-      if (d.getUTCDate() === 1) {
-        label = MONTHS[d.getUTCMonth()];
-        major = true;
-      }
-    } else {
-      label = String(d.getUTCFullYear());
-      major = true;
-    }
-    out.push({ time: t, label, major });
-  }
-  return out;
-}
-
-// src/renderers/shared/trade-markers.ts
-var TRADE_LONG_COLOR = TRADE_LONG;
-var TRADE_SHORT_COLOR = TRADE_SHORT;
-var TRADE_EXIT_COLOR = TRADE_EXIT;
-function defaultTradeMarkersState() {
-  return {
-    visible: true,
-    labels: true,
-    qty: true,
-    colors: { long: TRADE_LONG_COLOR, short: TRADE_SHORT_COLOR, exit: TRADE_EXIT_COLOR }
-  };
-}
-function mergeTradeMarkersState(base, patch) {
-  const p = patch && typeof patch === "object" ? patch : {};
-  const c = p.colors && typeof p.colors === "object" ? p.colors : {};
-  const bool = (v, fb) => typeof v === "boolean" ? v : fb;
-  const color = (v, fb) => typeof v === "string" && v.trim().length > 0 ? v : fb;
-  return {
-    visible: bool(p.visible, base.visible),
-    labels: bool(p.labels, base.labels),
-    qty: bool(p.qty, base.qty),
-    colors: {
-      long: color(c.long, base.colors.long),
-      short: color(c.short, base.colors.short),
-      exit: color(c.exit, base.colors.exit)
-    }
-  };
-}
-var BAR_GAP = 10;
-var ARROW_W = 9;
-var HEAD_H = 6;
-var ARROW_H = 14;
-var STEM_W = 3;
-var CAP_H = 2;
-var CAP_GAP = 2;
-var TEXT_GAP = 3;
-var UNIT_GAP = 6;
-var TICK_W = 6;
-var TICK_H = 8;
-function lineHeightOf(fontSize) {
-  return fontSize + 4;
-}
-function qtyText(exec) {
-  if (exec.qty == null || !Number.isFinite(exec.qty)) return null;
-  const magnitude = Number(Math.abs(exec.qty).toFixed(8));
-  return `${exec.side === "buy" ? "+" : "-"}${magnitude}`;
-}
-function unitOf(exec, state, lineH) {
-  const lines = [];
-  if (state.labels && exec.label) lines.push(exec.label);
-  if (state.qty) {
-    const q = qtyText(exec);
-    if (q) lines.push(q);
-  }
-  return { exec, lines, height: ARROW_H + (lines.length ? TEXT_GAP + lines.length * lineH : 0) };
-}
-function stacksFor(trades, state, deps, from, to, lineH) {
-  const byBar = /* @__PURE__ */ new Map();
-  for (const exec of trades) {
-    const logical = Math.round(deps.timeToLogical(exec.time));
-    if (logical < from || logical > to) continue;
-    let stack = byBar.get(logical);
-    if (!stack) {
-      stack = { logical, buys: [], sells: [] };
-      byBar.set(logical, stack);
-    }
-    (exec.side === "buy" ? stack.buys : stack.sells).push(unitOf(exec, state, lineH));
-  }
-  return [...byBar.values()];
-}
-function stackExtent(units) {
-  if (units.length === 0) return 0;
-  let px = BAR_GAP;
-  for (const u of units) px += u.height;
-  return px + (units.length - 1) * UNIT_GAP;
-}
-function tradesPriceHints(trades, state, deps, from, to, fontSize) {
-  if (trades.length === 0) return null;
-  const lineH = lineHeightOf(fontSize);
-  let min = Infinity;
-  let max = -Infinity;
-  let abovePx = 0;
-  let belowPx = 0;
-  for (const stack of stacksFor(trades, state, deps, Math.floor(from), Math.ceil(to), lineH)) {
-    const bar = deps.barAt(stack.logical);
-    if (!bar) continue;
-    if (bar.low < min) min = bar.low;
-    if (bar.high > max) max = bar.high;
-    belowPx = Math.max(belowPx, stackExtent(stack.buys));
-    abovePx = Math.max(abovePx, stackExtent(stack.sells));
-  }
-  if (!Number.isFinite(min) || !Number.isFinite(max)) return null;
-  return { min, max, abovePx, belowPx };
-}
-function renderTradeMarkers(ctx, trades, state, deps, xOf, yOf, text, width, barHalfPx) {
-  if (trades.length === 0) return;
-  const lineH = lineHeightOf(text.fontSize);
-  const stacks = stacksFor(trades, state, deps, -Infinity, Infinity, lineH);
-  if (stacks.length === 0) return;
-  ctx.save();
-  ctx.font = `${text.fontSize}px ${text.fontFamily}`;
-  ctx.textAlign = "center";
-  ctx.textBaseline = "middle";
-  for (const stack of stacks) {
-    const x = xOf(stack.logical);
-    if (x < -150 || x > width + 150) continue;
-    const bar = deps.barAt(stack.logical);
-    if (!bar) continue;
-    const yBottom = Math.max(yOf(bar.low), yOf(bar.high));
-    const yTop = Math.min(yOf(bar.low), yOf(bar.high));
-    let y = yBottom + BAR_GAP;
-    for (const unit of stack.buys) {
-      ctx.fillStyle = colorOf(unit.exec, state.colors);
-      drawArrowUp(ctx, x, y, unit.exec.kind === "exit");
-      drawFillTick(ctx, unit.exec.side, x, yOf(unit.exec.price), barHalfPx);
-      drawTextLines(ctx, unit.lines, x, y + ARROW_H + TEXT_GAP + lineH / 2, lineH, text.color);
-      y += unit.height + UNIT_GAP;
-    }
-    y = yTop - BAR_GAP;
-    for (const unit of stack.sells) {
-      ctx.fillStyle = colorOf(unit.exec, state.colors);
-      drawArrowDown(ctx, x, y, unit.exec.kind === "exit");
-      drawFillTick(ctx, unit.exec.side, x, yOf(unit.exec.price), barHalfPx);
-      drawTextLines(ctx, unit.lines, x, y - ARROW_H - TEXT_GAP - lineH / 2, -lineH, text.color);
-      y -= unit.height + UNIT_GAP;
-    }
-  }
-  ctx.restore();
-}
-function colorOf(exec, colors) {
-  if (exec.kind === "exit") return colors.exit;
-  return exec.side === "buy" ? colors.long : colors.short;
-}
-function drawArrowUp(ctx, x, yTip, capped) {
-  ctx.beginPath();
-  ctx.moveTo(x, yTip);
-  ctx.lineTo(x - ARROW_W / 2, yTip + HEAD_H);
-  ctx.lineTo(x + ARROW_W / 2, yTip + HEAD_H);
-  ctx.closePath();
-  ctx.fill();
-  ctx.fillRect(x - STEM_W / 2, yTip + HEAD_H, STEM_W, ARROW_H - HEAD_H);
-  if (capped) ctx.fillRect(x - ARROW_W / 2, yTip - CAP_GAP - CAP_H, ARROW_W, CAP_H);
-}
-function drawArrowDown(ctx, x, yTip, capped) {
-  ctx.beginPath();
-  ctx.moveTo(x, yTip);
-  ctx.lineTo(x - ARROW_W / 2, yTip - HEAD_H);
-  ctx.lineTo(x + ARROW_W / 2, yTip - HEAD_H);
-  ctx.closePath();
-  ctx.fill();
-  ctx.fillRect(x - STEM_W / 2, yTip - ARROW_H, STEM_W, ARROW_H - HEAD_H);
-  if (capped) ctx.fillRect(x - ARROW_W / 2, yTip + CAP_GAP, ARROW_W, CAP_H);
-}
-function drawFillTick(ctx, side, x, yFill, barHalfPx) {
-  const edge = side === "buy" ? x - barHalfPx : x + barHalfPx;
-  const back = side === "buy" ? edge - TICK_W : edge + TICK_W;
-  ctx.beginPath();
-  ctx.moveTo(edge, yFill);
-  ctx.lineTo(back, yFill - TICK_H / 2);
-  ctx.lineTo(back, yFill + TICK_H / 2);
-  ctx.closePath();
-  ctx.fill();
-}
-function drawTextLines(ctx, lines, x, firstY, step, color) {
-  if (lines.length === 0) return;
-  ctx.fillStyle = color;
-  for (let i = 0; i < lines.length; i += 1) ctx.fillText(lines[i], x, firstY + i * step);
-}
-
-// src/renderers/native/core/SceneGraph.ts
-var SceneGraph = class {
-  constructor() {
-    this.panes = /* @__PURE__ */ new Map();
-    this.indicators = /* @__PURE__ */ new Map();
-    this.bars = [];
-    /** Volume-layer config pushed by the volume native indicator (null ⇒ layer off). Ephemeral. */
-    this.volumeLayer = null;
-    /** Generic native-data channels for SDK renderer layers (`setNativeData(id, …)`). Ephemeral. */
-    this.nativeData = /* @__PURE__ */ new Map();
-    /** Loading ranges per channel (`setNativeData(id + '-pending', …)`). Ephemeral. */
-    this.nativePending = /* @__PURE__ */ new Map();
-    /** VPVR-layer config pushed by the VPVR native indicator (null ⇒ layer off). Ephemeral. */
-    this.vpvrLayer = null;
-    this.crosshair = null;
-    /** How the base price series is drawn on the price pane (candles by default). */
-    this.priceStyle = "candles";
-    /** Price-series base painting for the ACTIVE style (see ChartTypeDefinition.basePainting). */
-    this.basePainting = "candles";
-    /** The ACTIVE style's own candle cosmetics (`chartTypes.<id>.candle*`) when it is a
-     *  candle-based plugin type; null ⇒ paint with the shared `style.candle` block. */
-    this.candleOverride = null;
-    /** Explicit baseline reference price for `priceStyle:'baseline'`; when null the
-     *  baseline follows `style.baseline.baselineLevel` as a percent of the visible pane
-     *  range (resolved per frame via `baselinePriceFor`). */
-    this.baselineValue = null;
-    /** Draw the dashed horizontal line at the latest price (price pane). Independent
-     *  of the axis label chip (`showPriceLabel`) — either can show without the other. */
-    this.showPriceLine = true;
-    /** Draw the last-price label chip on the price axis. Independent of the line. */
-    this.showPriceLabel = true;
-    /** Draw the countdown-to-bar-close chip on the price axis. When the price label is
-     *  also shown, the two merge into one stacked block (countdown under the label);
-     *  when either shows alone it's centered on the latest price level. */
-    this.showCountdown = true;
-    /** Logarithmic price scale on the price pane. */
-    this.logScale = false;
-    /** Inverted price axis on the price pane (high at the bottom). Study panes carry their own. */
-    this.invertScale = false;
-    /** Exchange tick size for the active symbol (e.g. 0.01), when known. Drives the
-     *  price-axis decimals — the instrument's true precision instead of the zoom-derived
-     *  formula. Undefined until symbol metadata loads (the formula is the fallback). */
-    this.priceMintick = void 0;
-    /** Price-axis mode on the price pane: `'price'` (absolute) or `'percent'` (change
-     *  vs `percentBaseline`). Gridlines, axis labels and crosshair chip all follow it. */
-    this.scaleMode = "price";
-    /** Reference price for percent mode (first visible bar's close); recomputed per frame. */
-    this.percentBaseline = 0;
-    /** IANA time zone for the time axis + crosshair/data-window stamps (`'UTC'` default). */
-    this.timezone = "UTC";
-    /** Draw the background gridlines (price + time). Master toggle (`gridlines`
-     *  feature); per-axis visibility + colors live in `style.gridVert`/`gridHorz`. */
-    this.showGrid = true;
-    /** Comprehensive cosmetic config (item 15): grid colors, crosshair, candle
-     *  border/wick, fonts, separators. Serialized via the renderer's `getConfig()`/
-     *  `applyConfig()`; every draw layer reads its knobs from here, falling back to
-     *  the theme for any value left at its inherit default. */
-    this.style = defaultChartStyle();
-    /** Draw the price/time axis tick labels. */
-    this.showAxisLabels = true;
-    /** Strategy trade-marker display (the `tradeMarkers` feature): master toggle, the
-     *  two text lines, and the palette. Trade markers always paint on the price pane. */
-    this.tradeMarkers = defaultTradeMarkersState();
-    /** Renderer-owned shaded time bands (session highlighting), behind grid + data. */
-    this.highlights = [];
-    /** Pre/post-market bands pushed by the host (`sessionZones` feature); null ⇒ no sessions. */
-    this.sessionZones = null;
-    /** Draw-order key of the price candles, relative to indicator series z (see `seriesZ`).
-     *  Indicators with z below this draw BEHIND the candles; at/above draw in front.
-     *  Default 0 with indicators mounting at z < 0 ⇒ the price reads on top of every overlay,
-     *  and user drawings (z ≥ 1 by default) on top of the price. */
-    this.candleZ = 0;
-    /** Hide the base price series (candles/bars/line/area) without removing it — overlay
-     *  indicators keep drawing and the pane autoscales to them. Toggled from the object tree. */
-    this.candlesHidden = false;
-    /** Per-indicator foreground draw-order key (series layer), keyed by indicator id.
-     *  Higher = drawn later (in front). Assigned on mount to the current BOTTOM of the stack,
-     *  so each indicator arrives behind the candles (and behind older indicators);
-     *  `setIndicatorZ`/`bringToFront`/`sendToBack` change it. */
-    this.seriesZ = /* @__PURE__ */ new Map();
-    /** Per-pane raster layers of user drawings interleaved into the series stack — each is a
-     *  prepainted canvas the backend composites just before the series carrying `beforeZ`.
-     *  Rebuilt by the renderer per data frame; empty when every drawing sits over the stack. */
-    this.drawingSlices = /* @__PURE__ */ new Map();
-    /** Per-model index offset: the chart bar index of the model's `anchorTime` — its
-     *  index-aligned payloads (dense series arrays, `bar_index` drawings) count from that
-     *  bar. Only nonzero for models computed over a SUFFIX of the bars (whole-chart models,
-     *  the norm, aren't stored). Recomputed by the renderer on setBars + mount/patch. */
-    this.anchorOffsets = /* @__PURE__ */ new Map();
-    /** Per-indicator private price windows (merged indicators drawn on their own scale
-     *  column). Populated per frame for models flagged `ownScale`; absent ⇒ the model
-     *  shares its pane's master scale. */
-    this.indicatorScales = /* @__PURE__ */ new Map();
-    /** Cached sort of `panes` by order; invalidated on add/remove/reorder. */
-    this.orderedCache = null;
-  }
-  /** Panes sorted top-to-bottom by `order`. Cached — callers must NOT mutate the array. */
-  orderedPanes() {
-    if (!this.orderedCache) this.orderedCache = [...this.panes.values()].sort((a, b) => a.order - b.order);
-    return this.orderedCache;
-  }
-  /** The session zones resolved into colored bands (pre/post-market washes from the
-   *  config's session colors) — consumed by the same painting path as {@link highlights}. */
-  sessionHighlightBands() {
-    if (!this.sessionZones) return [];
-    const out = [];
-    for (const [from, to] of this.sessionZones.pre) out.push({ from, to, color: this.style.sessions.premarketColor });
-    for (const [from, to] of this.sessionZones.post) out.push({ from, to, color: this.style.sessions.postmarketColor });
-    return out;
-  }
-  indicatorsForPane(paneId) {
-    const out = [];
-    for (const model of this.indicators.values()) if (model.paneId === paneId) out.push(model);
-    return out;
-  }
-  /** Merged (own-scale) indicators on a pane, ordered by z — one axis column each. */
-  ownScaleIndicatorsForPane(paneId) {
-    return this.orderedIndicatorsForPane(paneId).filter((m) => m.ownScale === true);
-  }
-  /** Ensure a merged indicator has a private scale slot (seeded from the pane if given). */
-  ensureIndicatorScale(id, seed) {
-    let s = this.indicatorScales.get(id);
-    if (!s) {
-      const base = seed ?? { min: 0, max: 1 };
-      s = { scale: { ...base }, scaleTarget: { ...base }, initialized: false, manualScale: null };
-      this.indicatorScales.set(id, s);
-    }
-    return s;
-  }
-  dropIndicatorScale(id) {
-    this.indicatorScales.delete(id);
-  }
-  /** The price window a model renders on: its own scale when merged (`ownScale`), else the pane's. */
-  scaleFor(model, pane) {
-    if (model.ownScale === true) {
-      const s = this.indicatorScales.get(model.id);
-      if (s) return s.scale;
-    }
-    return pane.scale;
-  }
-  /** Apply a new top-to-bottom pane order (ids not present are ignored). */
-  orderPanes(orderedIds) {
-    orderedIds.forEach((id, i) => {
-      const pane = this.panes.get(id);
-      if (pane) pane.order = i;
-    });
-    this.orderedCache = null;
-  }
-  /** Indicators on a pane sorted by foreground z (ascending). Array#sort is stable,
-   *  so equal-z models keep their insertion order (the default). */
-  orderedIndicatorsForPane(paneId) {
-    return this.indicatorsForPane(paneId).sort((a, b) => this.zOf(a.id) - this.zOf(b.id));
-  }
-  /** The foreground draw-order key of an indicator (0 when never assigned). */
-  zOf(id) {
-    return this.seriesZ.get(id) ?? 0;
-  }
-  /** The model's index offset: chart bar index its index-aligned payloads count from (0 = whole-chart). */
-  offsetOf(id) {
-    return this.anchorOffsets.get(id) ?? 0;
-  }
-  /** Offsets are SIGNED. Positive: the model starts after the chart's first bar (it ran
-   *  over a suffix) — readers skip its leading chart bars. Negative: the model starts
-   *  BEFORE it (the chart's head moved forward under a mounted model) — readers skip the
-   *  model's own leading points, `points[i - off]` reaching further in. Storing only the
-   *  positive case silently pinned such a model at index 0, i.e. drew it shifted. */
-  setAnchorOffset(id, offset) {
-    if (offset !== 0 && Number.isFinite(offset)) this.anchorOffsets.set(id, offset);
-    else this.anchorOffsets.delete(id);
-  }
-  forgetAnchorOffset(id) {
-    this.anchorOffsets.delete(id);
-  }
-  /** Resolve the baseline reference price for the given pane window: the explicit
-   *  `baselineValue` when set, else `style.baseline.baselineLevel` as the price that sits
-   *  at that fraction of the pane height. Interpolated in the same space the pane renders
-   *  in (log when `scale.log`, else linear) so `level%` always lands at `level%` of the
-   *  height — matching `CoordinateSystem.yToPrice`. */
-  baselinePriceFor(scale) {
-    if (this.baselineValue != null) return this.baselineValue;
-    const t = this.style.baseline.baselineLevel / 100;
-    if (scale.log && scale.min > 0 && scale.max > scale.min) {
-      const lo = Math.log(scale.min);
-      return Math.exp(lo + t * (Math.log(scale.max) - lo));
-    }
-    return scale.min + (scale.max - scale.min) * t;
-  }
-  /** Assign a default z on mount: the current bottom of the stack, so a new indicator
-   *  paints behind the candles and behind every indicator already there — the price stays
-   *  the top of the pile until the user restacks it. No-op if the indicator already has one. */
-  assignIndicatorZ(id) {
-    if (!this.seriesZ.has(id)) this.seriesZ.set(id, this.bottomZ() - 1);
-  }
-  /** Mount-time default for a LAYER-BACKED native (it paints on a canvas stacked above the
-   *  data canvas by default): top of the stack, so the recorded order tells the truth from
-   *  the first frame. Keeps an existing key, so a restored stack survives the remount. */
-  assignIndicatorZTop(id) {
-    if (!this.seriesZ.has(id)) this.seriesZ.set(id, this.topZ() + 1);
-  }
-  forgetIndicatorZ(id) {
-    this.seriesZ.delete(id);
-  }
-  setIndicatorZ(id, z) {
-    this.seriesZ.set(id, z);
-  }
-  /** Snapshot of the current ordering for a UI/read API: `{ id, z }` sorted by z. */
-  indicatorZOrder() {
-    return [...this.seriesZ.entries()].map(([id, z]) => ({ id, z })).sort((a, b) => a.z - b.z);
-  }
-  /** The pane's series z keys (each indicator, plus the candles on the price pane), sorted
-   *  ascending and de-duplicated — the boundaries a user drawing's z is slotted against. */
-  seriesBoundaries(paneId) {
-    const keys = /* @__PURE__ */ new Set();
-    if (paneId === "price") keys.add(this.candleZ);
-    for (const m of this.indicatorsForPane(paneId)) keys.add(this.zOf(m.id));
-    return [...keys].sort((a, b) => a - b);
-  }
-  /** Raise an indicator above every other layer (other indicators AND the candles). */
-  bringIndicatorToFront(id) {
-    this.seriesZ.set(id, this.topZ() + 1);
-  }
-  /** Drop an indicator below every other layer (other indicators AND the candles). */
-  sendIndicatorToBack(id) {
-    this.seriesZ.set(id, this.bottomZ() - 1);
-  }
-  topZ() {
-    let max = this.candleZ;
-    for (const z of this.seriesZ.values()) if (z > max) max = z;
-    return max;
-  }
-  bottomZ() {
-    let min = this.candleZ;
-    for (const z of this.seriesZ.values()) if (z < min) min = z;
-    return min;
-  }
-  ensurePane(id, kind, order, heightWeight) {
-    this.orderedCache = null;
-    const existing = this.panes.get(id);
-    if (existing) {
-      existing.order = order;
-      existing.heightWeight = heightWeight;
-      existing.kind = kind;
-      return existing;
-    }
-    const pane = { id, kind, order, heightWeight, bounds: { top: 0, height: 0 }, scale: { min: 0, max: 1 }, scaleTarget: { min: 0, max: 1 }, initialized: false, manualScale: null, collapsed: false, percentBaseline: 0 };
-    this.panes.set(id, pane);
-    return pane;
-  }
-  removePane(id) {
-    this.panes.delete(id);
-    this.orderedCache = null;
-  }
-};
-function paneScaleMode(scene, pane) {
-  return pane.kind === "price" ? scene.scaleMode : pane.scaleMode ?? "price";
-}
-function paneLogScale(scene, pane) {
-  return pane.kind === "price" ? scene.logScale : pane.logScale ?? false;
-}
-function paneInvert(scene, pane) {
-  return pane.kind === "price" ? scene.invertScale : pane.invert ?? false;
-}
-function percentScaleFor(scene, pane) {
-  const mode = paneScaleMode(scene, pane);
-  if (mode !== "percent" && mode !== "indexed") return void 0;
-  const baseline = pane.percentBaseline;
-  if (!Number.isFinite(baseline) || baseline === 0) return void 0;
-  return { baseline, indexed: mode === "indexed" };
-}
-
-// src/renderers/native/chrome/tz.ts
-function tzOffsetMs(ms, timeZone) {
-  if (!timeZone || timeZone === "UTC") return 0;
-  try {
-    const dtf = new Intl.DateTimeFormat("en-US", {
-      timeZone,
-      hourCycle: "h23",
-      year: "numeric",
-      month: "2-digit",
-      day: "2-digit",
-      hour: "2-digit",
-      minute: "2-digit",
-      second: "2-digit"
-    });
-    const parts = dtf.formatToParts(new Date(ms));
-    const get = (t) => Number(parts.find((p) => p.type === t)?.value);
-    const asUTC = Date.UTC(get("year"), get("month") - 1, get("day"), get("hour") % 24, get("minute"), get("second"));
-    return asUTC - ms;
-  } catch {
-    return 0;
-  }
-}
-function zonedDate(ms, timeZone) {
-  return new Date(ms + tzOffsetMs(ms, timeZone));
-}
-
 // src/renderers/native/backend/candle-lod.ts
 var CANDLE_BODY_MIN_SPACING = 3;
 var CANDLE_WICK_W = 1.5;
@@ -22409,11 +21834,6 @@ var DASH = {
   dashed: [6, 4],
   dotted: [2, 3]
 };
-function crispHairline(cssCenter, dpr) {
-  const w = Math.max(1, Math.round(dpr));
-  const edge = Math.round(cssCenter * dpr - w / 2);
-  return { pos: edge / dpr, size: w / dpr };
-}
 function joinSegments(hw) {
   return Math.max(6, Math.min(20, Math.round(hw * 4)));
 }
@@ -22423,7 +21843,6 @@ var WebGL2Backend = class {
     this.modelAlpha = 1;
     this.candleBodyAlpha = 1;
     this.candleStructureAlpha = 1;
-    this.gridAlpha = 1;
     this.candleBodyScale = 1;
     /** Set by the renderer; invoked after a context restore to request a repaint. */
     this.onNeedsRedraw = null;
@@ -22653,11 +22072,7 @@ var WebGL2Backend = class {
         }
       };
       b.alpha = 1;
-      if (pane.collapsed) {
-        this.emitGrid(b, coords, theme, dataW, pane, scene);
-      } else {
-        this.emitHighlights(b, scene, pane, coords);
-        this.emitGrid(b, coords, theme, dataW, pane, scene);
+      if (!pane.collapsed) {
         const models = scene.orderedIndicatorsForPane(pane.id);
         const isPrice = pane.kind === "price";
         const effPane = (m) => {
@@ -22842,49 +22257,6 @@ var WebGL2Backend = class {
     this.screenProgram = null;
   }
   // ── geometry emit (mirrors Canvas2dBackend, in CSS-px space) ──
-  emitGrid(b, coords, theme, dataW, pane, scene) {
-    const top = pane.bounds.top;
-    const bot = pane.bounds.top + pane.bounds.height;
-    const { gridVert, gridHorz } = scene.style;
-    const dpr = coords.dpr;
-    b.alpha = this.gridAlpha;
-    if (scene.showGrid && gridVert.visible && !pane.collapsed) {
-      const grid = parseColor(gridVert.color ?? theme.gridColor);
-      const tr = coords.visibleTimeRange();
-      const offset = tzOffsetMs((tr.from + tr.to) / 2, scene.timezone);
-      for (const tick of timeTicks(tr.from, tr.to, 8, offset)) {
-        const x = coords.timeToX(tick.time);
-        if (x < 0 || x > dataW) continue;
-        const g = crispHairline(x, dpr);
-        b.rect(g.pos, top, g.size, bot - top, grid);
-      }
-    }
-    if (scene.showGrid && gridHorz.visible && !pane.collapsed) {
-      const grid = parseColor(gridHorz.color ?? theme.gridColor);
-      const pct = percentScaleFor(scene, pane);
-      for (const t of paneAxisTicks(pane.scale, pane.bounds.height, pct)) {
-        const y = coords.priceToY(t.price, pane.scale, pane.bounds);
-        if (y < top || y > bot) continue;
-        const g = crispHairline(y, dpr);
-        b.rect(0, g.pos, dataW, g.size, grid);
-      }
-    }
-  }
-  /** Renderer-owned session highlight bands, clipped per-pane (scissor reconstructs full height).
-   *  Session-zone washes (pre/post-market) paint first, host highlights on top. */
-  emitHighlights(b, scene, pane, coords) {
-    const bands = [...scene.sessionHighlightBands(), ...scene.highlights];
-    if (bands.length === 0) return;
-    for (const band of bands) {
-      const x1 = coords.timeToX(band.from);
-      const x2 = coords.timeToX(band.to);
-      if (x2 < 0 || x1 > coords.width || x2 <= x1) continue;
-      const cx = Math.max(0, x1);
-      const cw = Math.min(coords.width, x2) - cx;
-      if (cw <= 0) continue;
-      b.rect(cx, pane.bounds.top, cw, pane.bounds.height, parseColor(band.color));
-    }
-  }
   emitBackground(b, bg, pane, coords) {
     const x1 = coords.timeToX(bg.from);
     const x2 = coords.timeToX(bg.to);
@@ -24207,6 +23579,445 @@ var KeyboardController = class {
   }
 };
 
+// src/renderers/shared/trade-markers.ts
+var TRADE_LONG_COLOR = TRADE_LONG;
+var TRADE_SHORT_COLOR = TRADE_SHORT;
+var TRADE_EXIT_COLOR = TRADE_EXIT;
+function defaultTradeMarkersState() {
+  return {
+    visible: true,
+    labels: true,
+    qty: true,
+    colors: { long: TRADE_LONG_COLOR, short: TRADE_SHORT_COLOR, exit: TRADE_EXIT_COLOR }
+  };
+}
+function mergeTradeMarkersState(base, patch) {
+  const p = patch && typeof patch === "object" ? patch : {};
+  const c = p.colors && typeof p.colors === "object" ? p.colors : {};
+  const bool = (v, fb) => typeof v === "boolean" ? v : fb;
+  const color = (v, fb) => typeof v === "string" && v.trim().length > 0 ? v : fb;
+  return {
+    visible: bool(p.visible, base.visible),
+    labels: bool(p.labels, base.labels),
+    qty: bool(p.qty, base.qty),
+    colors: {
+      long: color(c.long, base.colors.long),
+      short: color(c.short, base.colors.short),
+      exit: color(c.exit, base.colors.exit)
+    }
+  };
+}
+var BAR_GAP = 10;
+var ARROW_W = 9;
+var HEAD_H = 6;
+var ARROW_H = 14;
+var STEM_W = 3;
+var CAP_H = 2;
+var CAP_GAP = 2;
+var TEXT_GAP = 3;
+var UNIT_GAP = 6;
+var TICK_W = 6;
+var TICK_H = 8;
+function lineHeightOf(fontSize) {
+  return fontSize + 4;
+}
+function qtyText(exec) {
+  if (exec.qty == null || !Number.isFinite(exec.qty)) return null;
+  const magnitude = Number(Math.abs(exec.qty).toFixed(8));
+  return `${exec.side === "buy" ? "+" : "-"}${magnitude}`;
+}
+function unitOf(exec, state, lineH) {
+  const lines = [];
+  if (state.labels && exec.label) lines.push(exec.label);
+  if (state.qty) {
+    const q = qtyText(exec);
+    if (q) lines.push(q);
+  }
+  return { exec, lines, height: ARROW_H + (lines.length ? TEXT_GAP + lines.length * lineH : 0) };
+}
+function stacksFor(trades, state, deps, from, to, lineH) {
+  const byBar = /* @__PURE__ */ new Map();
+  for (const exec of trades) {
+    const logical = Math.round(deps.timeToLogical(exec.time));
+    if (logical < from || logical > to) continue;
+    let stack = byBar.get(logical);
+    if (!stack) {
+      stack = { logical, buys: [], sells: [] };
+      byBar.set(logical, stack);
+    }
+    (exec.side === "buy" ? stack.buys : stack.sells).push(unitOf(exec, state, lineH));
+  }
+  return [...byBar.values()];
+}
+function stackExtent(units) {
+  if (units.length === 0) return 0;
+  let px = BAR_GAP;
+  for (const u of units) px += u.height;
+  return px + (units.length - 1) * UNIT_GAP;
+}
+function tradesPriceHints(trades, state, deps, from, to, fontSize) {
+  if (trades.length === 0) return null;
+  const lineH = lineHeightOf(fontSize);
+  let min = Infinity;
+  let max = -Infinity;
+  let abovePx = 0;
+  let belowPx = 0;
+  for (const stack of stacksFor(trades, state, deps, Math.floor(from), Math.ceil(to), lineH)) {
+    const bar = deps.barAt(stack.logical);
+    if (!bar) continue;
+    if (bar.low < min) min = bar.low;
+    if (bar.high > max) max = bar.high;
+    belowPx = Math.max(belowPx, stackExtent(stack.buys));
+    abovePx = Math.max(abovePx, stackExtent(stack.sells));
+  }
+  if (!Number.isFinite(min) || !Number.isFinite(max)) return null;
+  return { min, max, abovePx, belowPx };
+}
+function renderTradeMarkers(ctx, trades, state, deps, xOf, yOf, text, width, barHalfPx) {
+  if (trades.length === 0) return;
+  const lineH = lineHeightOf(text.fontSize);
+  const stacks = stacksFor(trades, state, deps, -Infinity, Infinity, lineH);
+  if (stacks.length === 0) return;
+  ctx.save();
+  ctx.font = `${text.fontSize}px ${text.fontFamily}`;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  for (const stack of stacks) {
+    const x = xOf(stack.logical);
+    if (x < -150 || x > width + 150) continue;
+    const bar = deps.barAt(stack.logical);
+    if (!bar) continue;
+    const yBottom = Math.max(yOf(bar.low), yOf(bar.high));
+    const yTop = Math.min(yOf(bar.low), yOf(bar.high));
+    let y = yBottom + BAR_GAP;
+    for (const unit of stack.buys) {
+      ctx.fillStyle = colorOf(unit.exec, state.colors);
+      drawArrowUp(ctx, x, y, unit.exec.kind === "exit");
+      drawFillTick(ctx, unit.exec.side, x, yOf(unit.exec.price), barHalfPx);
+      drawTextLines(ctx, unit.lines, x, y + ARROW_H + TEXT_GAP + lineH / 2, lineH, text.color);
+      y += unit.height + UNIT_GAP;
+    }
+    y = yTop - BAR_GAP;
+    for (const unit of stack.sells) {
+      ctx.fillStyle = colorOf(unit.exec, state.colors);
+      drawArrowDown(ctx, x, y, unit.exec.kind === "exit");
+      drawFillTick(ctx, unit.exec.side, x, yOf(unit.exec.price), barHalfPx);
+      drawTextLines(ctx, unit.lines, x, y - ARROW_H - TEXT_GAP - lineH / 2, -lineH, text.color);
+      y -= unit.height + UNIT_GAP;
+    }
+  }
+  ctx.restore();
+}
+function colorOf(exec, colors) {
+  if (exec.kind === "exit") return colors.exit;
+  return exec.side === "buy" ? colors.long : colors.short;
+}
+function drawArrowUp(ctx, x, yTip, capped) {
+  ctx.beginPath();
+  ctx.moveTo(x, yTip);
+  ctx.lineTo(x - ARROW_W / 2, yTip + HEAD_H);
+  ctx.lineTo(x + ARROW_W / 2, yTip + HEAD_H);
+  ctx.closePath();
+  ctx.fill();
+  ctx.fillRect(x - STEM_W / 2, yTip + HEAD_H, STEM_W, ARROW_H - HEAD_H);
+  if (capped) ctx.fillRect(x - ARROW_W / 2, yTip - CAP_GAP - CAP_H, ARROW_W, CAP_H);
+}
+function drawArrowDown(ctx, x, yTip, capped) {
+  ctx.beginPath();
+  ctx.moveTo(x, yTip);
+  ctx.lineTo(x - ARROW_W / 2, yTip - HEAD_H);
+  ctx.lineTo(x + ARROW_W / 2, yTip - HEAD_H);
+  ctx.closePath();
+  ctx.fill();
+  ctx.fillRect(x - STEM_W / 2, yTip - ARROW_H, STEM_W, ARROW_H - HEAD_H);
+  if (capped) ctx.fillRect(x - ARROW_W / 2, yTip + CAP_GAP, ARROW_W, CAP_H);
+}
+function drawFillTick(ctx, side, x, yFill, barHalfPx) {
+  const edge = side === "buy" ? x - barHalfPx : x + barHalfPx;
+  const back = side === "buy" ? edge - TICK_W : edge + TICK_W;
+  ctx.beginPath();
+  ctx.moveTo(edge, yFill);
+  ctx.lineTo(back, yFill - TICK_H / 2);
+  ctx.lineTo(back, yFill + TICK_H / 2);
+  ctx.closePath();
+  ctx.fill();
+}
+function drawTextLines(ctx, lines, x, firstY, step, color) {
+  if (lines.length === 0) return;
+  ctx.fillStyle = color;
+  for (let i = 0; i < lines.length; i += 1) ctx.fillText(lines[i], x, firstY + i * step);
+}
+
+// src/renderers/native/core/SceneGraph.ts
+var SceneGraph = class {
+  constructor() {
+    this.panes = /* @__PURE__ */ new Map();
+    this.indicators = /* @__PURE__ */ new Map();
+    this.bars = [];
+    /** Volume-layer config pushed by the volume native indicator (null ⇒ layer off). Ephemeral. */
+    this.volumeLayer = null;
+    /** Generic native-data channels for SDK renderer layers (`setNativeData(id, …)`). Ephemeral. */
+    this.nativeData = /* @__PURE__ */ new Map();
+    /** Loading ranges per channel (`setNativeData(id + '-pending', …)`). Ephemeral. */
+    this.nativePending = /* @__PURE__ */ new Map();
+    /** VPVR-layer config pushed by the VPVR native indicator (null ⇒ layer off). Ephemeral. */
+    this.vpvrLayer = null;
+    this.crosshair = null;
+    /** How the base price series is drawn on the price pane (candles by default). */
+    this.priceStyle = "candles";
+    /** Price-series base painting for the ACTIVE style (see ChartTypeDefinition.basePainting). */
+    this.basePainting = "candles";
+    /** The ACTIVE style's own candle cosmetics (`chartTypes.<id>.candle*`) when it is a
+     *  candle-based plugin type; null ⇒ paint with the shared `style.candle` block. */
+    this.candleOverride = null;
+    /** Explicit baseline reference price for `priceStyle:'baseline'`; when null the
+     *  baseline follows `style.baseline.baselineLevel` as a percent of the visible pane
+     *  range (resolved per frame via `baselinePriceFor`). */
+    this.baselineValue = null;
+    /** Draw the dashed horizontal line at the latest price (price pane). Independent
+     *  of the axis label chip (`showPriceLabel`) — either can show without the other. */
+    this.showPriceLine = true;
+    /** Draw the last-price label chip on the price axis. Independent of the line. */
+    this.showPriceLabel = true;
+    /** Draw the countdown-to-bar-close chip on the price axis. When the price label is
+     *  also shown, the two merge into one stacked block (countdown under the label);
+     *  when either shows alone it's centered on the latest price level. */
+    this.showCountdown = true;
+    /** Logarithmic price scale on the price pane. */
+    this.logScale = false;
+    /** Inverted price axis on the price pane (high at the bottom). Study panes carry their own. */
+    this.invertScale = false;
+    /** Exchange tick size for the active symbol (e.g. 0.01), when known. Drives the
+     *  price-axis decimals — the instrument's true precision instead of the zoom-derived
+     *  formula. Undefined until symbol metadata loads (the formula is the fallback). */
+    this.priceMintick = void 0;
+    /** Price-axis mode on the price pane: `'price'` (absolute) or `'percent'` (change
+     *  vs `percentBaseline`). Gridlines, axis labels and crosshair chip all follow it. */
+    this.scaleMode = "price";
+    /** Reference price for percent mode (first visible bar's close); recomputed per frame. */
+    this.percentBaseline = 0;
+    /** IANA time zone for the time axis + crosshair/data-window stamps (`'UTC'` default). */
+    this.timezone = "UTC";
+    /** Draw the background gridlines (price + time). Master toggle (`gridlines`
+     *  feature); per-axis visibility + colors live in `style.gridVert`/`gridHorz`. */
+    this.showGrid = true;
+    /** Comprehensive cosmetic config (item 15): grid colors, crosshair, candle
+     *  border/wick, fonts, separators. Serialized via the renderer's `getConfig()`/
+     *  `applyConfig()`; every draw layer reads its knobs from here, falling back to
+     *  the theme for any value left at its inherit default. */
+    this.style = defaultChartStyle();
+    /** Draw the price/time axis tick labels. */
+    this.showAxisLabels = true;
+    /** Strategy trade-marker display (the `tradeMarkers` feature): master toggle, the
+     *  two text lines, and the palette. Trade markers always paint on the price pane. */
+    this.tradeMarkers = defaultTradeMarkersState();
+    /** Renderer-owned shaded time bands (session highlighting), behind grid + data. */
+    this.highlights = [];
+    /** Pre/post-market bands pushed by the host (`sessionZones` feature); null ⇒ no sessions. */
+    this.sessionZones = null;
+    /** Draw-order key of the price candles, relative to indicator series z (see `seriesZ`).
+     *  Indicators with z below this draw BEHIND the candles; at/above draw in front.
+     *  Default 0 with indicators mounting at z < 0 ⇒ the price reads on top of every overlay,
+     *  and user drawings (z ≥ 1 by default) on top of the price. */
+    this.candleZ = 0;
+    /** Hide the base price series (candles/bars/line/area) without removing it — overlay
+     *  indicators keep drawing and the pane autoscales to them. Toggled from the object tree. */
+    this.candlesHidden = false;
+    /** Per-indicator foreground draw-order key (series layer), keyed by indicator id.
+     *  Higher = drawn later (in front). Assigned on mount to the current BOTTOM of the stack,
+     *  so each indicator arrives behind the candles (and behind older indicators);
+     *  `setIndicatorZ`/`bringToFront`/`sendToBack` change it. */
+    this.seriesZ = /* @__PURE__ */ new Map();
+    /** Per-pane raster layers of user drawings interleaved into the series stack — each is a
+     *  prepainted canvas the backend composites just before the series carrying `beforeZ`.
+     *  Rebuilt by the renderer per data frame; empty when every drawing sits over the stack. */
+    this.drawingSlices = /* @__PURE__ */ new Map();
+    /** Per-model index offset: the chart bar index of the model's `anchorTime` — its
+     *  index-aligned payloads (dense series arrays, `bar_index` drawings) count from that
+     *  bar. Only nonzero for models computed over a SUFFIX of the bars (whole-chart models,
+     *  the norm, aren't stored). Recomputed by the renderer on setBars + mount/patch. */
+    this.anchorOffsets = /* @__PURE__ */ new Map();
+    /** Per-indicator private price windows (merged indicators drawn on their own scale
+     *  column). Populated per frame for models flagged `ownScale`; absent ⇒ the model
+     *  shares its pane's master scale. */
+    this.indicatorScales = /* @__PURE__ */ new Map();
+    /** Cached sort of `panes` by order; invalidated on add/remove/reorder. */
+    this.orderedCache = null;
+  }
+  /** Panes sorted top-to-bottom by `order`. Cached — callers must NOT mutate the array. */
+  orderedPanes() {
+    if (!this.orderedCache) this.orderedCache = [...this.panes.values()].sort((a, b) => a.order - b.order);
+    return this.orderedCache;
+  }
+  /** The session zones resolved into colored bands (pre/post-market washes from the
+   *  config's session colors) — consumed by the same painting path as {@link highlights}. */
+  sessionHighlightBands() {
+    if (!this.sessionZones) return [];
+    const out = [];
+    for (const [from, to] of this.sessionZones.pre) out.push({ from, to, color: this.style.sessions.premarketColor });
+    for (const [from, to] of this.sessionZones.post) out.push({ from, to, color: this.style.sessions.postmarketColor });
+    return out;
+  }
+  indicatorsForPane(paneId) {
+    const out = [];
+    for (const model of this.indicators.values()) if (model.paneId === paneId) out.push(model);
+    return out;
+  }
+  /** Merged (own-scale) indicators on a pane, ordered by z — one axis column each. */
+  ownScaleIndicatorsForPane(paneId) {
+    return this.orderedIndicatorsForPane(paneId).filter((m) => m.ownScale === true);
+  }
+  /** Ensure a merged indicator has a private scale slot (seeded from the pane if given). */
+  ensureIndicatorScale(id, seed) {
+    let s = this.indicatorScales.get(id);
+    if (!s) {
+      const base = seed ?? { min: 0, max: 1 };
+      s = { scale: { ...base }, scaleTarget: { ...base }, initialized: false, manualScale: null };
+      this.indicatorScales.set(id, s);
+    }
+    return s;
+  }
+  dropIndicatorScale(id) {
+    this.indicatorScales.delete(id);
+  }
+  /** The price window a model renders on: its own scale when merged (`ownScale`), else the pane's. */
+  scaleFor(model, pane) {
+    if (model.ownScale === true) {
+      const s = this.indicatorScales.get(model.id);
+      if (s) return s.scale;
+    }
+    return pane.scale;
+  }
+  /** Apply a new top-to-bottom pane order (ids not present are ignored). */
+  orderPanes(orderedIds) {
+    orderedIds.forEach((id, i) => {
+      const pane = this.panes.get(id);
+      if (pane) pane.order = i;
+    });
+    this.orderedCache = null;
+  }
+  /** Indicators on a pane sorted by foreground z (ascending). Array#sort is stable,
+   *  so equal-z models keep their insertion order (the default). */
+  orderedIndicatorsForPane(paneId) {
+    return this.indicatorsForPane(paneId).sort((a, b) => this.zOf(a.id) - this.zOf(b.id));
+  }
+  /** The foreground draw-order key of an indicator (0 when never assigned). */
+  zOf(id) {
+    return this.seriesZ.get(id) ?? 0;
+  }
+  /** The model's index offset: chart bar index its index-aligned payloads count from (0 = whole-chart). */
+  offsetOf(id) {
+    return this.anchorOffsets.get(id) ?? 0;
+  }
+  /** Offsets are SIGNED. Positive: the model starts after the chart's first bar (it ran
+   *  over a suffix) — readers skip its leading chart bars. Negative: the model starts
+   *  BEFORE it (the chart's head moved forward under a mounted model) — readers skip the
+   *  model's own leading points, `points[i - off]` reaching further in. Storing only the
+   *  positive case silently pinned such a model at index 0, i.e. drew it shifted. */
+  setAnchorOffset(id, offset) {
+    if (offset !== 0 && Number.isFinite(offset)) this.anchorOffsets.set(id, offset);
+    else this.anchorOffsets.delete(id);
+  }
+  forgetAnchorOffset(id) {
+    this.anchorOffsets.delete(id);
+  }
+  /** Resolve the baseline reference price for the given pane window: the explicit
+   *  `baselineValue` when set, else `style.baseline.baselineLevel` as the price that sits
+   *  at that fraction of the pane height. Interpolated in the same space the pane renders
+   *  in (log when `scale.log`, else linear) so `level%` always lands at `level%` of the
+   *  height — matching `CoordinateSystem.yToPrice`. */
+  baselinePriceFor(scale) {
+    if (this.baselineValue != null) return this.baselineValue;
+    const t = this.style.baseline.baselineLevel / 100;
+    if (scale.log && scale.min > 0 && scale.max > scale.min) {
+      const lo = Math.log(scale.min);
+      return Math.exp(lo + t * (Math.log(scale.max) - lo));
+    }
+    return scale.min + (scale.max - scale.min) * t;
+  }
+  /** Assign a default z on mount: the current bottom of the stack, so a new indicator
+   *  paints behind the candles and behind every indicator already there — the price stays
+   *  the top of the pile until the user restacks it. No-op if the indicator already has one. */
+  assignIndicatorZ(id) {
+    if (!this.seriesZ.has(id)) this.seriesZ.set(id, this.bottomZ() - 1);
+  }
+  /** Mount-time default for a LAYER-BACKED native (it paints on a canvas stacked above the
+   *  data canvas by default): top of the stack, so the recorded order tells the truth from
+   *  the first frame. Keeps an existing key, so a restored stack survives the remount. */
+  assignIndicatorZTop(id) {
+    if (!this.seriesZ.has(id)) this.seriesZ.set(id, this.topZ() + 1);
+  }
+  forgetIndicatorZ(id) {
+    this.seriesZ.delete(id);
+  }
+  setIndicatorZ(id, z) {
+    this.seriesZ.set(id, z);
+  }
+  /** Snapshot of the current ordering for a UI/read API: `{ id, z }` sorted by z. */
+  indicatorZOrder() {
+    return [...this.seriesZ.entries()].map(([id, z]) => ({ id, z })).sort((a, b) => a.z - b.z);
+  }
+  /** The pane's series z keys (each indicator, plus the candles on the price pane), sorted
+   *  ascending and de-duplicated — the boundaries a user drawing's z is slotted against. */
+  seriesBoundaries(paneId) {
+    const keys = /* @__PURE__ */ new Set();
+    if (paneId === "price") keys.add(this.candleZ);
+    for (const m of this.indicatorsForPane(paneId)) keys.add(this.zOf(m.id));
+    return [...keys].sort((a, b) => a - b);
+  }
+  /** Raise an indicator above every other layer (other indicators AND the candles). */
+  bringIndicatorToFront(id) {
+    this.seriesZ.set(id, this.topZ() + 1);
+  }
+  /** Drop an indicator below every other layer (other indicators AND the candles). */
+  sendIndicatorToBack(id) {
+    this.seriesZ.set(id, this.bottomZ() - 1);
+  }
+  topZ() {
+    let max = this.candleZ;
+    for (const z of this.seriesZ.values()) if (z > max) max = z;
+    return max;
+  }
+  bottomZ() {
+    let min = this.candleZ;
+    for (const z of this.seriesZ.values()) if (z < min) min = z;
+    return min;
+  }
+  ensurePane(id, kind, order, heightWeight) {
+    this.orderedCache = null;
+    const existing = this.panes.get(id);
+    if (existing) {
+      existing.order = order;
+      existing.heightWeight = heightWeight;
+      existing.kind = kind;
+      return existing;
+    }
+    const pane = { id, kind, order, heightWeight, bounds: { top: 0, height: 0 }, scale: { min: 0, max: 1 }, scaleTarget: { min: 0, max: 1 }, initialized: false, manualScale: null, collapsed: false, percentBaseline: 0 };
+    this.panes.set(id, pane);
+    return pane;
+  }
+  removePane(id) {
+    this.panes.delete(id);
+    this.orderedCache = null;
+  }
+};
+function paneScaleMode(scene, pane) {
+  return pane.kind === "price" ? scene.scaleMode : pane.scaleMode ?? "price";
+}
+function paneLogScale(scene, pane) {
+  return pane.kind === "price" ? scene.logScale : pane.logScale ?? false;
+}
+function paneInvert(scene, pane) {
+  return pane.kind === "price" ? scene.invertScale : pane.invert ?? false;
+}
+function percentScaleFor(scene, pane) {
+  const mode = paneScaleMode(scene, pane);
+  if (mode !== "percent" && mode !== "indexed") return void 0;
+  const baseline = pane.percentBaseline;
+  if (!Number.isFinite(baseline) || baseline === 0) return void 0;
+  return { baseline, indexed: mode === "indexed" };
+}
+
 // src/renderers/native/backend/Canvas2dBackend.ts
 var Canvas2dBackend = class {
   constructor() {
@@ -24214,7 +24025,6 @@ var Canvas2dBackend = class {
     this.modelAlpha = 1;
     this.candleBodyAlpha = 1;
     this.candleStructureAlpha = 1;
-    this.gridAlpha = 1;
     this.candleBodyScale = 1;
     this.canvas = null;
     this.ctx = null;
@@ -24241,8 +24051,6 @@ var Canvas2dBackend = class {
     if (i1 < i0) return;
     const barColorMap = mergeBarColors2(scene.indicators);
     const panes = scene.orderedPanes();
-    this.drawHighlights(ctx, scene, coords);
-    this.drawGrid(ctx, scene, coords, theme, dataW);
     for (const pane of panes) {
       if (pane.collapsed) continue;
       const models = scene.orderedIndicatorsForPane(pane.id);
@@ -24849,22 +24657,6 @@ var Canvas2dBackend = class {
     ctx.fillStyle = bg.color;
     ctx.fillRect(x1, pane.bounds.top, x2 - x1, pane.bounds.height);
   }
-  /** Renderer-owned session highlight bands: full-height (all panes), behind grid + data.
-   *  Session-zone washes (pre/post-market) paint first, host highlights on top. */
-  drawHighlights(ctx, scene, coords) {
-    const bands = [...scene.sessionHighlightBands(), ...scene.highlights];
-    if (bands.length === 0) return;
-    for (const band of bands) {
-      const x1 = coords.timeToX(band.from);
-      const x2 = coords.timeToX(band.to);
-      if (x2 < 0 || x1 > coords.width || x2 <= x1) continue;
-      const cx = Math.max(0, x1);
-      const cw = Math.min(coords.width, x2) - cx;
-      if (cw <= 0) continue;
-      ctx.fillStyle = band.color;
-      ctx.fillRect(cx, 0, cw, coords.height);
-    }
-  }
   drawHline(ctx, pl, pane, coords, dataW, theme) {
     const y = Math.round(coords.priceToY(pl.price, pane.scale, pane.bounds)) + 0.5;
     if (y < pane.bounds.top || y > pane.bounds.top + pane.bounds.height) return;
@@ -24877,46 +24669,6 @@ var Canvas2dBackend = class {
     ctx.stroke();
     setDash(ctx, "solid");
   }
-  // ── grid (L0, behind data) ── vert/horz gate on `scene.showGrid` AND their own
-  // per-axis visibility (style); each uses its own color. Pane separators are drawn on the
-  // chrome layer (full-width, above the data) so series never overpaint them.
-  drawGrid(ctx, scene, coords, theme, dataW) {
-    const panes = scene.orderedPanes();
-    const { gridVert, gridHorz } = scene.style;
-    const vertColor = gridVert.color ?? theme.gridColor;
-    const horzColor = gridHorz.color ?? theme.gridColor;
-    ctx.lineWidth = 1;
-    if (scene.showGrid && gridVert.visible) {
-      ctx.globalAlpha = this.gridAlpha;
-      ctx.strokeStyle = vertColor;
-      const tr = coords.visibleTimeRange();
-      const offset = tzOffsetMs((tr.from + tr.to) / 2, scene.timezone);
-      ctx.beginPath();
-      for (const tick of timeTicks(tr.from, tr.to, 8, offset)) {
-        const x = Math.round(coords.timeToX(tick.time)) + 0.5;
-        if (x < 0 || x > dataW) continue;
-        ctx.moveTo(x, 0);
-        ctx.lineTo(x, coords.height);
-      }
-      ctx.stroke();
-    }
-    for (const pane of panes) {
-      if (scene.showGrid && gridHorz.visible && !pane.collapsed) {
-        ctx.globalAlpha = this.gridAlpha;
-        ctx.strokeStyle = horzColor;
-        const pct = percentScaleFor(scene, pane);
-        ctx.beginPath();
-        for (const t of paneAxisTicks(pane.scale, pane.bounds.height, pct)) {
-          const y = Math.round(coords.priceToY(t.price, pane.scale, pane.bounds)) + 0.5;
-          if (y < pane.bounds.top || y > pane.bounds.top + pane.bounds.height) continue;
-          ctx.moveTo(0, y);
-          ctx.lineTo(dataW, y);
-        }
-        ctx.stroke();
-      }
-    }
-    ctx.globalAlpha = 1;
-  }
 };
 function setDash(ctx, style) {
   if (style === "dashed") ctx.setLineDash([6, 4]);
@@ -25628,6 +25380,221 @@ var DrawingSceneRenderer = class {
   }
 };
 
+// src/renderers/native/chrome/ticks.ts
+function priceTicks(min, max, target = 6) {
+  if (!(max > min) || !Number.isFinite(min) || !Number.isFinite(max)) return [];
+  const raw = (max - min) / Math.max(1, target);
+  const mag = Math.pow(10, Math.floor(Math.log10(raw)));
+  const norm = raw / mag;
+  const step = (norm < 1.5 ? 1 : norm < 3 ? 2 : norm < 7 ? 5 : 10) * mag;
+  const decimals = Math.max(0, -Math.floor(Math.log10(step)) + 1);
+  const out = [];
+  const start = Math.ceil(min / step) * step;
+  for (let v = start; v <= max + step * 1e-6; v += step) {
+    out.push(Number(v.toFixed(decimals)));
+  }
+  return out;
+}
+function priceDecimals(min, max, target = 6) {
+  if (!(max > min)) return 2;
+  const raw = (max - min) / Math.max(1, target);
+  const mag = Math.pow(10, Math.floor(Math.log10(raw)));
+  const norm = raw / mag;
+  const step = (norm < 1.5 ? 1 : norm < 3 ? 2 : norm < 7 ? 5 : 10) * mag;
+  return Math.max(0, Math.min(8, -Math.floor(Math.log10(step)) + 1));
+}
+function logPriceTicks(min, max, target = 6) {
+  if (min <= 0 || !(max > min) || !Number.isFinite(min) || !Number.isFinite(max)) return [];
+  if (Math.log10(max) - Math.log10(min) < 1.1) return priceTicks(min, max, target);
+  const out = [];
+  const startExp = Math.floor(Math.log10(min));
+  const endExp = Math.ceil(Math.log10(max));
+  for (let e = startExp; e <= endExp; e += 1) {
+    for (const m of [1, 2, 5]) {
+      const v = m * Math.pow(10, e);
+      if (v >= min && v <= max) out.push(v);
+    }
+  }
+  return out;
+}
+function valueDecimals(v) {
+  const a = Math.abs(v);
+  if (a >= 100) return 0;
+  if (a >= 1) return 2;
+  if (a >= 0.01) return 4;
+  return 6;
+}
+function tickDecimals(tick) {
+  if (!(tick > 0) || !Number.isFinite(tick)) return 2;
+  for (let d = 0; d <= 8; d += 1) {
+    if (Math.abs(Number(tick.toFixed(d)) - tick) <= tick * 1e-6) return d;
+  }
+  return 8;
+}
+function axisDecimals(scale, heightPx, mintick) {
+  const d = mintick != null && mintick > 0 ? tickDecimals(mintick) : priceDecimals(scale.min, scale.max, tickCount(heightPx));
+  return d === 0 ? 2 : d;
+}
+function tickCount(paneHeightPx) {
+  return Math.max(2, Math.min(16, Math.round(paneHeightPx / 50)));
+}
+function paneTicks(scale, heightPx) {
+  return scale.log ? logPriceTicks(scale.min, scale.max, tickCount(heightPx)) : priceTicks(scale.min, scale.max, tickCount(heightPx));
+}
+function toPct(price, baseline) {
+  return (price / baseline - 1) * 100;
+}
+function toIndex(price, baseline) {
+  return price / baseline * 100;
+}
+function formatPct(pct) {
+  const sign = pct >= 0 ? "+" : "-";
+  return `${sign}${Math.abs(pct).toFixed(2)}%`;
+}
+function formatIndex(idx) {
+  return idx.toFixed(2);
+}
+function formatCompactValue(v) {
+  const a = Math.abs(v);
+  if (a >= 1e9) return `${trimZeros(v / 1e9)}B`;
+  if (a >= 1e6) return `${trimZeros(v / 1e6)}M`;
+  if (a >= 1e3) return `${trimZeros(v / 1e3)}K`;
+  return trimZeros(v);
+}
+function trimZeros(v) {
+  return Number(v.toFixed(2)).toString();
+}
+function paneAxisTicks(scale, heightPx, pct, mintick, format) {
+  if (format === "none") return [];
+  if (pct) {
+    const { baseline, indexed } = pct;
+    const lo = Math.min(scale.min, scale.max);
+    const hi = Math.max(scale.min, scale.max);
+    if (indexed) {
+      const iLo = toIndex(lo, baseline);
+      const iHi = toIndex(hi, baseline);
+      return priceTicks(iLo, iHi, tickCount(heightPx)).map((idx) => ({ price: baseline * idx / 100, label: formatIndex(idx) }));
+    }
+    const pLo = toPct(lo, baseline);
+    const pHi = toPct(hi, baseline);
+    return priceTicks(pLo, pHi, tickCount(heightPx)).map((p) => ({ price: baseline * (1 + p / 100), label: formatPct(p) }));
+  }
+  if (format === "volume") {
+    return paneTicks(scale, heightPx).map((price) => ({ price, label: formatCompactValue(price) }));
+  }
+  return paneTicks(scale, heightPx).map((price) => ({ price, label: formatPriceLabel(scale, heightPx, price, mintick) }));
+}
+function formatAxisValue(scale, heightPx, value, pct, mintick, format) {
+  if (format === "none") return "";
+  if (pct) return pct.indexed ? formatIndex(toIndex(value, pct.baseline)) : formatPct(toPct(value, pct.baseline));
+  if (format === "volume") return formatCompactValue(value);
+  return formatPriceLabel(scale, heightPx, value, mintick);
+}
+function formatPriceLabel(scale, heightPx, value, mintick) {
+  const wideLog = scale.log && Math.log10(scale.max) - Math.log10(scale.min) >= 1.1;
+  if (wideLog) {
+    const d = valueDecimals(value);
+    return value.toFixed(d === 0 ? 2 : d);
+  }
+  return value.toFixed(axisDecimals(scale, heightPx, mintick));
+}
+var SEC = 1e3;
+var MIN = 60 * SEC;
+var HOUR = 60 * MIN;
+var DAY = 24 * HOUR;
+var WEEK = 7 * DAY;
+var MONTH = 30 * DAY;
+var YEAR = 365 * DAY;
+var STEP_LADDER = [
+  SEC,
+  5 * SEC,
+  15 * SEC,
+  30 * SEC,
+  MIN,
+  5 * MIN,
+  15 * MIN,
+  30 * MIN,
+  HOUR,
+  2 * HOUR,
+  4 * HOUR,
+  6 * HOUR,
+  12 * HOUR,
+  DAY,
+  2 * DAY,
+  WEEK,
+  MONTH,
+  3 * MONTH,
+  YEAR
+];
+var MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+var pad2 = (n) => n < 10 ? `0${n}` : String(n);
+function pickStep(targetMs) {
+  for (const step of STEP_LADDER) if (step >= targetMs) return step;
+  return STEP_LADDER[STEP_LADDER.length - 1];
+}
+function timeTicks(fromMs, toMs, target = 8, offsetMs = 0) {
+  const span = toMs - fromMs;
+  if (!(span > 0)) return [];
+  const step = pickStep(span / Math.max(1, target));
+  const zFrom = fromMs + offsetMs;
+  const zTo = toMs + offsetMs;
+  const first = Math.ceil(zFrom / step) * step;
+  const out = [];
+  for (let zt = first; zt <= zTo; zt += step) {
+    const t = zt - offsetMs;
+    const d = new Date(zt);
+    let label;
+    let major = false;
+    if (step < DAY) {
+      const h = d.getUTCHours();
+      const m = d.getUTCMinutes();
+      if (h === 0 && m === 0) {
+        label = `${MONTHS[d.getUTCMonth()]} ${d.getUTCDate()}`;
+        major = true;
+      } else {
+        label = `${pad2(h)}:${pad2(m)}`;
+      }
+    } else if (step < YEAR) {
+      label = `${MONTHS[d.getUTCMonth()]} ${d.getUTCDate()}`;
+      if (d.getUTCDate() === 1) {
+        label = MONTHS[d.getUTCMonth()];
+        major = true;
+      }
+    } else {
+      label = String(d.getUTCFullYear());
+      major = true;
+    }
+    out.push({ time: t, label, major });
+  }
+  return out;
+}
+
+// src/renderers/native/chrome/tz.ts
+function tzOffsetMs(ms, timeZone) {
+  if (!timeZone || timeZone === "UTC") return 0;
+  try {
+    const dtf = new Intl.DateTimeFormat("en-US", {
+      timeZone,
+      hourCycle: "h23",
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit"
+    });
+    const parts = dtf.formatToParts(new Date(ms));
+    const get = (t) => Number(parts.find((p) => p.type === t)?.value);
+    const asUTC = Date.UTC(get("year"), get("month") - 1, get("day"), get("hour") % 24, get("minute"), get("second"));
+    return asUTC - ms;
+  } catch {
+    return 0;
+  }
+}
+function zonedDate(ms, timeZone) {
+  return new Date(ms + tzOffsetMs(ms, timeZone));
+}
+
 // src/renderers/native/chrome/ChromeRenderer.ts
 var ChromeRenderer = class {
   constructor() {
@@ -25807,6 +25774,13 @@ var ChromeRenderer = class {
         if (y < pane.bounds.top + 6 || y > pane.bounds.top + pane.bounds.height - 4) continue;
         ctx.fillText(t.label, dataW + 6, y);
       }
+      if (pane.axisBands) {
+        for (const b of pane.axisBands) {
+          const y = pane.bounds.top + b.frac * pane.bounds.height;
+          if (y < pane.bounds.top + 6 || y > pane.bounds.top + pane.bounds.height - 4) continue;
+          ctx.fillText(b.label, dataW + 6, y);
+        }
+      }
     }
     ctx.textAlign = "start";
   }
@@ -26048,7 +26022,7 @@ var CrosshairRenderer = class {
       }
     }
     const chipBg = cs.labelBackground ?? theme.borderColor;
-    if (pane) {
+    if (pane && pane.axisFormat !== "none") {
       const price = coords.yToPrice(ch.y, pane.scale, pane.bounds);
       this.chip(ctx, dataW + 1, ch.y, formatAxisValue(pane.scale, pane.bounds.height, price, percentScaleFor(scene, pane), scene.priceMintick, pane.axisFormat), chipBg, "left", false, theme.background);
     }
@@ -26096,7 +26070,7 @@ var CrosshairRenderer = class {
           break;
         }
       }
-      if (pane) {
+      if (pane && pane.axisFormat !== "none") {
         this.chip(ctx, dataW + 1, ext.y, formatAxisValue(pane.scale, pane.bounds.height, ext.price, percentScaleFor(scene, pane), scene.priceMintick, pane.axisFormat), chipBg, "left", false, theme.background);
       }
     }
@@ -26139,6 +26113,156 @@ function formatStamp(ms, timeZone) {
   return `${pad(d.getUTCMonth() + 1)}-${pad(d.getUTCDate())} ${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}`;
 }
 
+// src/renderers/native/chrome/settings-visibility.ts
+function settingsIdSlug(label) {
+  return label.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+}
+function settingsIdHidden(id, hidden) {
+  if (hidden.size === 0) return false;
+  let path = id;
+  for (; ; ) {
+    if (hidden.has(path)) return true;
+    const cut = path.lastIndexOf(".");
+    if (cut < 0) return false;
+    path = path.slice(0, cut);
+  }
+}
+function settingsRowId(r) {
+  if (r.kind === "heading" || r.kind === "header") return settingsIdSlug(r.label);
+  const n = normalizeSettingsRow(r);
+  if (n.toggle) return n.toggle.key;
+  for (const c of n.controls) {
+    if (c.kind !== "hint") return c.key;
+  }
+  return settingsIdSlug(n.label);
+}
+function filterHiddenRows(rows, scope, hidden) {
+  if (hidden.size === 0) return [...rows];
+  const out = [];
+  let skipGroup = false;
+  let skipSub = false;
+  for (const r of rows) {
+    const id = `${scope}.${settingsRowId(r)}`;
+    if (r.kind === "heading") {
+      skipGroup = settingsIdHidden(id, hidden);
+      skipSub = false;
+      if (!skipGroup) out.push(r);
+      continue;
+    }
+    if (r.kind === "header") {
+      if (skipGroup) continue;
+      skipSub = settingsIdHidden(id, hidden);
+      if (!skipSub) out.push(r);
+      continue;
+    }
+    if (skipGroup || skipSub || settingsIdHidden(id, hidden)) continue;
+    out.push(r);
+  }
+  return out;
+}
+function hostSectionId(s) {
+  return s.id ?? settingsIdSlug(s.title);
+}
+function hostRowId(r) {
+  return r.id ?? settingsIdSlug(r.label);
+}
+function filterHiddenHostRows(rows, scope, hidden) {
+  if (hidden.size === 0) return [...rows];
+  const out = [];
+  let skipGroup = false;
+  for (const r of rows) {
+    const id = `${scope}.${hostRowId(r)}`;
+    if (r.kind === "heading") {
+      skipGroup = settingsIdHidden(id, hidden);
+      if (!skipGroup) out.push(r);
+      continue;
+    }
+    if (skipGroup || settingsIdHidden(id, hidden)) continue;
+    out.push(r);
+  }
+  return out;
+}
+var BUILTIN_SETTINGS_IDS = [
+  "symbol",
+  "symbol.type",
+  "symbol.style.candles",
+  "symbol.style.candles.body",
+  "symbol.style.candles.borders",
+  "symbol.style.candles.wick",
+  "symbol.style.candles.spacing",
+  "symbol.style.bars",
+  "symbol.style.bars.up-color",
+  "symbol.style.bars.down-color",
+  "symbol.style.bars.spacing",
+  "symbol.style.line",
+  "symbol.style.line.color",
+  "symbol.style.line.width",
+  "symbol.style.area",
+  "symbol.style.area.line-color",
+  "symbol.style.area.width",
+  "symbol.style.area.top-fill",
+  "symbol.style.area.bottom-fill",
+  "symbol.style.baseline",
+  "symbol.style.baseline.top-line",
+  "symbol.style.baseline.bottom-line",
+  "symbol.style.baseline.fill-top",
+  "symbol.style.baseline.fill-bottom",
+  "symbol.style.baseline.base-level",
+  "symbol.style.baseline.width",
+  "symbol.timezone",
+  "scales",
+  "scales.price-scale",
+  "scales.price-scale.mode",
+  "scales.price-scale.invert",
+  "scales.price-scale.last-price-line",
+  "scales.price-scale.last-price-label",
+  "scales.price-scale.countdown",
+  "scales.price-scale.axis-labels",
+  "scales.price-scale.border-color",
+  "scales.crosshair",
+  "scales.crosshair.color",
+  "scales.crosshair.width",
+  "scales.crosshair.style",
+  "canvas",
+  "canvas.background",
+  "canvas.background.color",
+  "canvas.background.text-color",
+  "canvas.background.text-size",
+  "canvas.background.pane-separator",
+  "canvas.grid",
+  "canvas.grid.vertical",
+  "canvas.grid.horizontal",
+  "canvas.theme"
+];
+function settingsIdCatalog(hostSections) {
+  const ids = new Set(BUILTIN_SETTINGS_IDS);
+  for (const def of chartTypes()) {
+    if (hasOwnCandlePaint(def.id)) {
+      const style = `symbol.style.${def.id}`;
+      for (const leaf of ["", ".body", ".borders", ".wick", ".spacing"]) ids.add(style + leaf);
+    }
+    const section = def.settings;
+    if (!section) continue;
+    const scope = `type:${def.id}`;
+    ids.add(scope);
+    const addRows = (rows) => {
+      for (const r of rows) ids.add(`${scope}.${settingsRowId(r)}`);
+    };
+    if (section.rows) addRows(section.rows);
+    for (const inst of section.instances ?? []) addRows(inst.rows);
+    for (const sub of section.subsections ?? []) {
+      ids.add(`${scope}.${settingsIdSlug(sub.title)}`);
+      addRows(sub.rows);
+    }
+  }
+  for (const hs of hostSections) {
+    const scope = hostSectionId(hs);
+    ids.add(scope);
+    for (const r of hs.rows) ids.add(`${scope}.${hostRowId(r)}`);
+  }
+  return [...ids];
+}
+
 // src/renderers/native/chrome/SettingsDialog.ts
 var BUILTIN_STYLE_LABELS2 = {
   candles: "Candles",
@@ -26257,12 +26381,21 @@ var SettingsDialog = class {
     this.activeSection = null;
     /** Mobile chrome: fullscreen card, burger-opened section sidebar, TOC as top tabs. */
     this.mobileLayout = false;
+    /** The visibility policy: setting ids hidden by the host (subtree semantics). */
+    this.hiddenSettings = /* @__PURE__ */ new Set();
     if (getComputedStyle(container).position === "static") container.style.position = "relative";
   }
   /** Host-app sections (e.g. the widget's Status line tab) — re-shown on next open. */
   setHostSections(sections) {
     this.hostSections = sections;
   }
+  /** Replace the visibility policy — an open dialog rebuilds in place to honor it. */
+  setHiddenSettings(ids) {
+    const next = new Set(ids);
+    const same = next.size === this.hiddenSettings.size && [...next].every((id) => this.hiddenSettings.has(id));
+    this.hiddenSettings = next;
+    if (!same) this.reopenIfLive();
+  }
   /** Configure the Canvas → Theme row (see {@link themeControl}); null hides the row. */
   setThemeControl(current, onSelect) {
     this.themeControl = { current, onSelect };
@@ -26330,8 +26463,12 @@ var SettingsDialog = class {
     }
     const body = document.createElement("div");
     body.style.cssText = "display:flex;flex-direction:column;gap:0;";
-    body.append(this.section("Symbol"));
-    body.append(this.sectionTitle("Chart type"));
+    const sid = (el, id) => {
+      el.dataset.sdId = id;
+      return el;
+    };
+    body.append(sid(this.section("Symbol"), "symbol"));
+    body.append(sid(this.sectionTitle("Chart type"), "symbol.type"));
     const groups = {};
     const showActive = (style) => {
       const active = style === "heikinashi" ? "candles" : style;
@@ -26340,64 +26477,64 @@ var SettingsDialog = class {
       }
     };
     body.append(
-      this.selectRowLabeled("Type", config.series.style, priceStyleIds().map((id) => [id, styleLabel(id)]), (v) => {
+      sid(this.selectRowLabeled("Type", config.series.style, priceStyleIds().map((id) => [id, styleLabel(id)]), (v) => {
         this.emit({ series: { style: v } });
         showActive(v);
         this.syncTypeTabs?.(v);
-      })
+      }), "symbol.type")
     );
-    const candles = this.group();
+    const candles = sid(this.group(), "symbol.style.candles");
     candles.append(this.sectionTitle("Candles"));
-    candles.append(this.toggleRow("Body", config.candles.bodyVisible, (v) => this.emit({ candles: { bodyVisible: v } }), [
+    candles.append(sid(this.toggleRow("Body", config.candles.bodyVisible, (v) => this.emit({ candles: { bodyVisible: v } }), [
       this.swatch(config.candles.upColor, (v) => this.emit({ candles: { upColor: v } })),
       this.swatch(config.candles.downColor, (v) => this.emit({ candles: { downColor: v } }))
-    ]));
-    candles.append(this.toggleRow("Borders", config.candles.borderVisible, (v) => this.emit({ candles: { borderVisible: v } }), [
+    ]), "symbol.style.candles.body"));
+    candles.append(sid(this.toggleRow("Borders", config.candles.borderVisible, (v) => this.emit({ candles: { borderVisible: v } }), [
       this.swatch(config.candles.borderUpColor, (v) => this.emit({ candles: { borderUpColor: v } })),
       this.swatch(config.candles.borderDownColor, (v) => this.emit({ candles: { borderDownColor: v } }))
-    ]));
-    candles.append(this.toggleRow("Wick", config.candles.wickVisible, (v) => this.emit({ candles: { wickVisible: v } }), [
+    ]), "symbol.style.candles.borders"));
+    candles.append(sid(this.toggleRow("Wick", config.candles.wickVisible, (v) => this.emit({ candles: { wickVisible: v } }), [
       this.swatch(config.candles.wickUpColor, (v) => this.emit({ candles: { wickUpColor: v } })),
       this.swatch(config.candles.wickDownColor, (v) => this.emit({ candles: { wickDownColor: v } }))
-    ]));
-    candles.append(this.numberRow("Spacing", config.series.spacing, 0.1, 10, 0.1, (v) => this.emit({ series: { spacing: v } })));
+    ]), "symbol.style.candles.wick"));
+    candles.append(sid(this.numberRow("Spacing", config.series.spacing, 0.1, 10, 0.1, (v) => this.emit({ series: { spacing: v } })), "symbol.style.candles.spacing"));
     groups.candles = candles;
     body.append(candles);
-    const bars = this.group();
+    const bars = sid(this.group(), "symbol.style.bars");
     bars.append(this.sectionTitle("Bars"));
-    bars.append(this.colorRow("Color Up", config.bars.upColor, (v) => this.emit({ bars: { upColor: v } })));
-    bars.append(this.colorRow("Color Down", config.bars.downColor, (v) => this.emit({ bars: { downColor: v } })));
-    bars.append(this.numberRow("Spacing", config.series.spacing, 0.1, 10, 0.1, (v) => this.emit({ series: { spacing: v } })));
+    bars.append(sid(this.colorRow("Color Up", config.bars.upColor, (v) => this.emit({ bars: { upColor: v } })), "symbol.style.bars.up-color"));
+    bars.append(sid(this.colorRow("Color Down", config.bars.downColor, (v) => this.emit({ bars: { downColor: v } })), "symbol.style.bars.down-color"));
+    bars.append(sid(this.numberRow("Spacing", config.series.spacing, 0.1, 10, 0.1, (v) => this.emit({ series: { spacing: v } })), "symbol.style.bars.spacing"));
     groups.bars = bars;
     body.append(bars);
-    const line = this.group();
+    const line = sid(this.group(), "symbol.style.line");
     line.append(this.sectionTitle("Line"));
-    line.append(this.colorRow("Color", config.line.color, (v) => this.emit({ line: { color: v } })));
-    line.append(this.numberRow("Width", config.line.width, 1, 10, 1, (v) => this.emit({ line: { width: v } })));
+    line.append(sid(this.colorRow("Color", config.line.color, (v) => this.emit({ line: { color: v } })), "symbol.style.line.color"));
+    line.append(sid(this.numberRow("Width", config.line.width, 1, 10, 1, (v) => this.emit({ line: { width: v } })), "symbol.style.line.width"));
     groups.line = line;
     body.append(line);
-    const area = this.group();
+    const area = sid(this.group(), "symbol.style.area");
     area.append(this.sectionTitle("Area"));
-    area.append(this.colorRow("Line color", config.area.lineColor, (v) => this.emit({ area: { lineColor: v } })));
-    area.append(this.numberRow("Width", config.area.width, 1, 10, 1, (v) => this.emit({ area: { width: v } })));
-    area.append(this.colorRow("Top fill", config.area.topColor, (v) => this.emit({ area: { topColor: v } })));
-    area.append(this.colorRow("Bottom fill", config.area.bottomColor, (v) => this.emit({ area: { bottomColor: v } })));
+    area.append(sid(this.colorRow("Line color", config.area.lineColor, (v) => this.emit({ area: { lineColor: v } })), "symbol.style.area.line-color"));
+    area.append(sid(this.numberRow("Width", config.area.width, 1, 10, 1, (v) => this.emit({ area: { width: v } })), "symbol.style.area.width"));
+    area.append(sid(this.colorRow("Top fill", config.area.topColor, (v) => this.emit({ area: { topColor: v } })), "symbol.style.area.top-fill"));
+    area.append(sid(this.colorRow("Bottom fill", config.area.bottomColor, (v) => this.emit({ area: { bottomColor: v } })), "symbol.style.area.bottom-fill"));
     groups.area = area;
     body.append(area);
-    const baseline = this.group();
+    const baseline = sid(this.group(), "symbol.style.baseline");
     baseline.append(this.sectionTitle("Baseline"));
-    baseline.append(this.rowWith("Top line", [this.swatch(config.baseline.topLineColor, (v) => this.emit({ baseline: { topLineColor: v } }))]));
-    baseline.append(this.rowWith("Bottom line", [this.swatch(config.baseline.bottomLineColor, (v) => this.emit({ baseline: { bottomLineColor: v } }))]));
-    baseline.append(this.rowWith("Fill top area", [
+    baseline.append(sid(this.rowWith("Top line", [this.swatch(config.baseline.topLineColor, (v) => this.emit({ baseline: { topLineColor: v } }))]), "symbol.style.baseline.top-line"));
+    baseline.append(sid(this.rowWith("Bottom line", [this.swatch(config.baseline.bottomLineColor, (v) => this.emit({ baseline: { bottomLineColor: v } }))]), "symbol.style.baseline.bottom-line"));
+    baseline.append(sid(this.rowWith("Fill top area", [
       this.swatch(config.baseline.topFillColor, (v) => this.emit({ baseline: { topFillColor: v } })),
       this.swatch(config.baseline.topFillColor2, (v) => this.emit({ baseline: { topFillColor2: v } }))
-    ]));
-    baseline.append(this.rowWith("Fill bottom area", [
+    ]), "symbol.style.baseline.fill-top"));
+    baseline.append(sid(this.rowWith("Fill bottom area", [
       this.swatch(config.baseline.bottomFillColor2, (v) => this.emit({ baseline: { bottomFillColor2: v } })),
       this.swatch(config.baseline.bottomFillColor, (v) => this.emit({ baseline: { bottomFillColor: v } }))
-    ]));
-    baseline.append(this.numberRow("Base level %", config.baseline.baselineLevel, 0, 100, 1, (v) => this.emit({ baseline: { baselineLevel: v } })));
-    baseline.append(this.numberRow("Width", config.baseline.width, 1, 10, 1, (v) => this.emit({ baseline: { width: v } })));
+    ]), "symbol.style.baseline.fill-bottom"));
+    baseline.append(sid(this.numberRow("Base level %", config.baseline.baselineLevel, 0, 100, 1, (v) => this.emit({ baseline: { baselineLevel: v } })), "symbol.style.baseline.base-level"));
+    baseline.append(sid(this.numberRow("Width", config.baseline.width, 1, 10, 1, (v) => this.emit({ baseline: { width: v } })), "symbol.style.baseline.width"));
     groups.baseline = baseline;
     body.append(baseline);
     for (const def of chartTypes()) {
@@ -26405,32 +26542,36 @@ var SettingsDialog = class {
       const bag = config.chartTypes[def.id] ?? {};
       const colorOf2 = (key, shared) => typeof bag[key] === "string" && bag[key] !== "" ? bag[key] : shared;
       const boolOf = (key, shared) => typeof bag[key] === "boolean" ? bag[key] : shared;
-      const g = this.group();
+      const g = sid(this.group(), `symbol.style.${def.id}`);
       g.append(this.sectionTitle("Candles"));
-      g.append(this.toggleRow("Body", boolOf("candleBodyVisible", config.candles.bodyVisible), (v) => this.emitType(def.id, "candleBodyVisible", v), [
+      g.append(sid(this.toggleRow("Body", boolOf("candleBodyVisible", config.candles.bodyVisible), (v) => this.emitType(def.id, "candleBodyVisible", v), [
         this.swatch(colorOf2("candleUpColor", config.candles.upColor), (v) => this.emitType(def.id, "candleUpColor", v)),
         this.swatch(colorOf2("candleDownColor", config.candles.downColor), (v) => this.emitType(def.id, "candleDownColor", v))
-      ]));
-      g.append(this.toggleRow("Borders", boolOf("candleBorderVisible", config.candles.borderVisible), (v) => this.emitType(def.id, "candleBorderVisible", v), [
+      ]), `symbol.style.${def.id}.body`));
+      g.append(sid(this.toggleRow("Borders", boolOf("candleBorderVisible", config.candles.borderVisible), (v) => this.emitType(def.id, "candleBorderVisible", v), [
         this.swatch(colorOf2("candleBorderUpColor", config.candles.borderUpColor), (v) => this.emitType(def.id, "candleBorderUpColor", v)),
         this.swatch(colorOf2("candleBorderDownColor", config.candles.borderDownColor), (v) => this.emitType(def.id, "candleBorderDownColor", v))
-      ]));
-      g.append(this.toggleRow("Wick", boolOf("candleWickVisible", config.candles.wickVisible), (v) => this.emitType(def.id, "candleWickVisible", v), [
+      ]), `symbol.style.${def.id}.borders`));
+      g.append(sid(this.toggleRow("Wick", boolOf("candleWickVisible", config.candles.wickVisible), (v) => this.emitType(def.id, "candleWickVisible", v), [
         this.swatch(colorOf2("candleWickUpColor", config.candles.wickUpColor), (v) => this.emitType(def.id, "candleWickUpColor", v)),
         this.swatch(colorOf2("candleWickDownColor", config.candles.wickDownColor), (v) => this.emitType(def.id, "candleWickDownColor", v))
-      ]));
-      g.append(this.numberRow("Spacing", config.series.spacing, 0.1, 10, 0.1, (v) => this.emit({ series: { spacing: v } })));
+      ]), `symbol.style.${def.id}.wick`));
+      g.append(sid(this.numberRow("Spacing", config.series.spacing, 0.1, 10, 0.1, (v) => this.emit({ series: { spacing: v } })), `symbol.style.${def.id}.spacing`));
       groups[def.id] = g;
       body.append(g);
     }
     showActive(config.series.style);
-    body.append(this.sectionTitle("Time zone"));
-    body.append(this.selectRowLabeled("Time zone", normalizeTimezone(config.timeScale.timezone), timezoneOptions(config.timeScale.timezone), (v) => this.emit({ timeScale: { timezone: v } })));
+    body.append(sid(this.sectionTitle("Time zone"), "symbol.timezone"));
+    body.append(sid(this.selectRowLabeled("Time zone", normalizeTimezone(config.timeScale.timezone), timezoneOptions(config.timeScale.timezone), (v) => this.emit({ timeScale: { timezone: v } })), "symbol.timezone"));
     const renderHostSections = (placement) => {
       for (const hs of this.hostSections) {
         if ((hs.placement ?? "after-symbol") !== placement) continue;
+        const scope = hostSectionId(hs);
+        if (settingsIdHidden(scope, this.hiddenSettings)) continue;
+        const rows = filterHiddenHostRows(hs.rows, scope, this.hiddenSettings);
+        if (rows.length === 0) continue;
         body.append(placement === "symbol" ? this.sectionTitle(hs.title) : this.section(hs.title));
-        for (const hr of hs.rows) {
+        for (const hr of rows) {
           if (hr.kind === "heading") body.append(this.sectionTitle(hr.label));
           else if (hr.kind === "toggle") body.append(this.boolRow(hr.label, hr.get(), (v) => hr.set(v)));
           else if (hr.kind === "color") body.append(this.colorRow(hr.label, hr.get(), (v) => hr.set(v)));
@@ -26443,53 +26584,69 @@ var SettingsDialog = class {
         const typeSettings = def.settings;
         if (!typeSettings) continue;
         if ((typeSettings.placement ?? "end") !== placement) continue;
+        if (settingsIdHidden(`type:${def.id}`, this.hiddenSettings)) continue;
         this.chartTypeSection(def.id, typeSettings, config, body);
       }
     };
     renderHostSections("symbol");
     renderChartTypeSections("after-symbol");
     renderHostSections("after-symbol");
-    body.append(this.section("Scales and lines"));
-    body.append(this.sectionTitle("Price scale"));
+    body.append(sid(this.section("Scales and lines"), "scales"));
+    body.append(sid(this.sectionTitle("Price scale"), "scales.price-scale"));
     body.append(
-      this.selectRowLabeled(
+      sid(this.selectRowLabeled(
         "Mode",
         config.priceScale.log ? "log" : config.priceScale.mode,
         [["price", "Regular"], ["percent", "Percent"], ["indexed", "Indexed to 100"], ["log", "Logarithmic"]],
         (v) => this.emit({ priceScale: v === "log" ? { mode: "price", log: true } : { mode: v, log: false } })
-      )
+      ), "scales.price-scale.mode")
     );
-    body.append(this.boolRow("Invert scale", config.priceScale.invert, (v) => this.emit({ priceScale: { invert: v } })));
-    body.append(this.separator());
-    body.append(this.boolRow("Last Price Line", config.priceScale.currentPriceLine, (v) => this.emit({ priceScale: { currentPriceLine: v } })));
-    body.append(this.boolRow("Last price label", config.priceScale.priceLabel, (v) => this.emit({ priceScale: { priceLabel: v } })));
-    body.append(this.boolRow("Countdown to bar close", config.priceScale.countdown, (v) => this.emit({ priceScale: { countdown: v } })));
-    body.append(this.boolRow("Axis labels", config.priceScale.labelsVisible, (v) => this.emit({ priceScale: { labelsVisible: v } })));
-    body.append(this.colorRow("Scale border color", config.priceScale.borderColor, (v) => this.emit({ priceScale: { borderColor: v } })));
-    body.append(this.sectionTitle("Crosshair"));
-    body.append(this.colorRow("Color", config.crosshair.color, (v) => this.emit({ crosshair: { color: v } })));
-    body.append(this.numberRow("Width", config.crosshair.width, 0.5, 8, 0.5, (v) => this.emit({ crosshair: { width: v } })));
-    body.append(this.selectRowLabeled("Style", config.crosshair.style, [["solid", "Solid"], ["dashed", "Dashed"], ["dotted", "Dotted"]], (v) => this.emit({ crosshair: { style: v } })));
-    body.append(this.section("Canvas"));
-    body.append(this.sectionTitle("Background & text"));
-    body.append(this.colorRow("Background", config.layout.background, (v) => this.emit({ layout: { background: v } })));
-    body.append(this.colorRow("Text color", config.layout.textColor, (v) => this.emit({ layout: { textColor: v } })));
-    body.append(this.numberRow("Text size", config.layout.fontSize, 6, 32, 1, (v) => this.emit({ layout: { fontSize: v } })));
-    body.append(this.colorRow("Pane separator color", config.panes.separatorColor, (v) => this.emit({ panes: { separatorColor: v } })));
-    body.append(this.sectionTitle("Grid"));
-    body.append(this.toggleRow("Vertical", config.grid.vertLines.visible, (v) => this.emit({ grid: { vertLines: { visible: v } } }), [
+    body.append(sid(this.boolRow("Invert scale", config.priceScale.invert, (v) => this.emit({ priceScale: { invert: v } })), "scales.price-scale.invert"));
+    body.append(sid(this.separator(), "scales.price-scale"));
+    body.append(sid(this.boolRow("Last Price Line", config.priceScale.currentPriceLine, (v) => this.emit({ priceScale: { currentPriceLine: v } })), "scales.price-scale.last-price-line"));
+    body.append(sid(this.boolRow("Last price label", config.priceScale.priceLabel, (v) => this.emit({ priceScale: { priceLabel: v } })), "scales.price-scale.last-price-label"));
+    body.append(sid(this.boolRow("Countdown to bar close", config.priceScale.countdown, (v) => this.emit({ priceScale: { countdown: v } })), "scales.price-scale.countdown"));
+    body.append(sid(this.boolRow("Axis labels", config.priceScale.labelsVisible, (v) => this.emit({ priceScale: { labelsVisible: v } })), "scales.price-scale.axis-labels"));
+    body.append(sid(this.colorRow("Scale border color", config.priceScale.borderColor, (v) => this.emit({ priceScale: { borderColor: v } })), "scales.price-scale.border-color"));
+    body.append(sid(this.sectionTitle("Crosshair"), "scales.crosshair"));
+    body.append(sid(this.colorRow("Color", config.crosshair.color, (v) => this.emit({ crosshair: { color: v } })), "scales.crosshair.color"));
+    body.append(sid(this.numberRow("Width", config.crosshair.width, 0.5, 8, 0.5, (v) => this.emit({ crosshair: { width: v } })), "scales.crosshair.width"));
+    body.append(sid(this.selectRowLabeled("Style", config.crosshair.style, [["solid", "Solid"], ["dashed", "Dashed"], ["dotted", "Dotted"]], (v) => this.emit({ crosshair: { style: v } })), "scales.crosshair.style"));
+    body.append(sid(this.section("Canvas"), "canvas"));
+    body.append(sid(this.sectionTitle("Background & text"), "canvas.background"));
+    body.append(sid(this.colorRow("Background", config.layout.background, (v) => this.emit({ layout: { background: v } })), "canvas.background.color"));
+    body.append(sid(this.colorRow("Text color", config.layout.textColor, (v) => this.emit({ layout: { textColor: v } })), "canvas.background.text-color"));
+    body.append(sid(this.numberRow("Text size", config.layout.fontSize, 6, 32, 1, (v) => this.emit({ layout: { fontSize: v } })), "canvas.background.text-size"));
+    body.append(sid(this.colorRow("Pane separator color", config.panes.separatorColor, (v) => this.emit({ panes: { separatorColor: v } })), "canvas.background.pane-separator"));
+    body.append(sid(this.sectionTitle("Grid"), "canvas.grid"));
+    body.append(sid(this.toggleRow("Vertical", config.grid.vertLines.visible, (v) => this.emit({ grid: { vertLines: { visible: v } } }), [
       this.swatch(config.grid.vertLines.color, (v) => this.emit({ grid: { vertLines: { color: v } } }))
-    ]));
-    body.append(this.toggleRow("Horizontal", config.grid.horzLines.visible, (v) => this.emit({ grid: { horzLines: { visible: v } } }), [
+    ]), "canvas.grid.vertical"));
+    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"));
     if (this.themeControl) {
       const tc = this.themeControl;
-      body.append(this.sectionTitle("Theme"));
-      body.append(this.selectRow("Color theme", tc.current === "dark" ? "Dark" : "Light", ["Dark", "Light"], (v) => tc.onSelect(v === "Dark" ? "dark" : "light")));
+      body.append(sid(this.sectionTitle("Theme"), "canvas.theme"));
+      body.append(sid(this.selectRow("Color theme", tc.current === "dark" ? "Dark" : "Light", ["Dark", "Light"], (v) => tc.onSelect(v === "Dark" ? "dark" : "light")), "canvas.theme"));
     }
     renderChartTypeSections("end");
     renderHostSections("end");
+    if (this.hiddenSettings.size > 0) {
+      let skipTab = false;
+      for (const child of [...body.children]) {
+        if (child.dataset.sdTab !== void 0) {
+          skipTab = child.dataset.sdId !== void 0 && settingsIdHidden(child.dataset.sdId, this.hiddenSettings);
+        }
+        if (skipTab || child.dataset.sdId !== void 0 && settingsIdHidden(child.dataset.sdId, this.hiddenSettings)) {
+          child.remove();
+          continue;
+        }
+        for (const el of [...child.querySelectorAll("[data-sd-id]")]) {
+          if (settingsIdHidden(el.dataset.sdId, this.hiddenSettings)) el.remove();
+        }
+      }
+    }
     const shell = document.createElement("div");
     shell.style.cssText = mobile ? "display:flex;min-height:0;flex:1 1 auto;position:relative;overflow:hidden;" : "display:flex;min-height:360px;max-height:calc(70vh - 100px);flex:1 1 auto;";
     const rail = document.createElement("div");
@@ -26527,6 +26684,9 @@ var SettingsDialog = class {
       }
       if (current) current.appendChild(child);
     }
+    for (let i = panes.length - 1; i >= 0; i--) {
+      if (panes[i].el.childElementCount === 0) panes.splice(i, 1);
+    }
     this.syncTypeTabs = (active) => {
       let hidActive = false;
       panes.forEach((pn, idx) => {
@@ -26666,19 +26826,25 @@ var SettingsDialog = class {
       this.emitType(typeId, key, v);
       for (const r of refreshers) r();
     };
+    const scope = `type:${typeId}`;
     if (section.instances && section.instances.length > 0) {
-      body.append(this.instancesBlock(typeId, section.instances, bag, put, refreshers));
+      const instances = section.instances.map((inst) => ({ ...inst, rows: filterHiddenRows(inst.rows, scope, this.hiddenSettings) }));
+      body.append(this.instancesBlock(typeId, instances, bag, put, refreshers));
     } else if (section.rows) {
-      if (section.layout === "grouped") body.append(this.groupedRows(`${typeId}/rows`, section.rows, bag, put, refreshers));
-      else this.flatTypeRows(section.rows, bag, put, refreshers, body);
+      const rows = filterHiddenRows(section.rows, scope, this.hiddenSettings);
+      if (section.layout === "grouped") body.append(this.groupedRows(`${typeId}/rows`, rows, bag, put, refreshers));
+      else this.flatTypeRows(rows, bag, put, refreshers, body);
     }
     for (const sub of section.subsections ?? []) {
+      if (settingsIdHidden(`${scope}.${settingsIdSlug(sub.title)}`, this.hiddenSettings)) continue;
+      const rows = filterHiddenRows(sub.rows, scope, this.hiddenSettings);
+      if (rows.length === 0) continue;
       const subMarker = this.section(sub.title);
       subMarker.dataset.sdStyle = typeId;
       subMarker.dataset.sdVisibility = section.visibility ?? "active";
       subMarker.dataset.sdSub = "1";
       body.append(subMarker);
-      body.append(this.groupedRows(`${typeId}/${sub.title}`, sub.rows, bag, put, refreshers, sub.enableKey));
+      body.append(this.groupedRows(`${typeId}/${sub.title}`, rows, bag, put, refreshers, sub.enableKey));
     }
     for (const r of refreshers) r();
   }
@@ -30968,6 +31134,94 @@ function resizeSplit(split, dyTotal, minPx = MIN_PANE_PX) {
   return { above, below: combinedWeight - above };
 }
 
+// src/renderers/native/backdrop/BackdropRenderer.ts
+var BackdropRenderer = class {
+  constructor() {
+    this.canvas = null;
+    this.ctx = null;
+  }
+  mount(canvas) {
+    this.canvas = canvas;
+    this.ctx = canvas.getContext("2d");
+  }
+  destroy() {
+    this.canvas = null;
+    this.ctx = null;
+  }
+  /** Paint one frame: highlight bands first, gridlines on top (the order they had inside
+   *  the data canvas). `gridAlpha` fades the gridlines as a reveal-under layer opens. */
+  render(scene, coords, theme, gridAlpha) {
+    const ctx = this.ctx;
+    const canvas = this.canvas;
+    if (!ctx || !canvas) return;
+    const dpr = coords.dpr;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, canvas.width / dpr, canvas.height / dpr);
+    const n = coords.barCount;
+    if (n === 0) return;
+    const vr = coords.visibleLogicalRange();
+    if (Math.min(n - 1, Math.ceil(vr.to)) < Math.max(0, Math.floor(vr.from))) return;
+    this.drawHighlights(ctx, scene, coords);
+    this.drawGrid(ctx, scene, coords, theme, coords.width, gridAlpha);
+  }
+  /** Renderer-owned session highlight bands: full-height (all panes), behind the grid.
+   *  Session-zone washes (pre/post-market) paint first, host highlights on top. */
+  drawHighlights(ctx, scene, coords) {
+    const bands = [...scene.sessionHighlightBands(), ...scene.highlights];
+    if (bands.length === 0) return;
+    for (const band of bands) {
+      const x1 = coords.timeToX(band.from);
+      const x2 = coords.timeToX(band.to);
+      if (x2 < 0 || x1 > coords.width || x2 <= x1) continue;
+      const cx = Math.max(0, x1);
+      const cw = Math.min(coords.width, x2) - cx;
+      if (cw <= 0) continue;
+      ctx.fillStyle = band.color;
+      ctx.fillRect(cx, 0, cw, coords.height);
+    }
+  }
+  // ── grid ── vert/horz gate on `scene.showGrid` AND their own per-axis visibility
+  // (style); each uses its own color. Pane separators are drawn on the chrome layer
+  // (full-width, above the data) so series never overpaint them.
+  drawGrid(ctx, scene, coords, theme, dataW, gridAlpha) {
+    const panes = scene.orderedPanes();
+    const { gridVert, gridHorz } = scene.style;
+    const vertColor = gridVert.color ?? theme.gridColor;
+    const horzColor = gridHorz.color ?? theme.gridColor;
+    ctx.lineWidth = 1;
+    if (scene.showGrid && gridVert.visible) {
+      ctx.globalAlpha = gridAlpha;
+      ctx.strokeStyle = vertColor;
+      const tr = coords.visibleTimeRange();
+      const offset = tzOffsetMs((tr.from + tr.to) / 2, scene.timezone);
+      ctx.beginPath();
+      for (const tick of timeTicks(tr.from, tr.to, 8, offset)) {
+        const x = Math.round(coords.timeToX(tick.time)) + 0.5;
+        if (x < 0 || x > dataW) continue;
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, coords.height);
+      }
+      ctx.stroke();
+    }
+    for (const pane of panes) {
+      if (scene.showGrid && gridHorz.visible && !pane.collapsed) {
+        ctx.globalAlpha = gridAlpha;
+        ctx.strokeStyle = horzColor;
+        const pct = percentScaleFor(scene, pane);
+        ctx.beginPath();
+        for (const t of paneAxisTicks(pane.scale, pane.bounds.height, pct, void 0, pane.axisFormat)) {
+          const y = Math.round(coords.priceToY(t.price, pane.scale, pane.bounds)) + 0.5;
+          if (y < pane.bounds.top || y > pane.bounds.top + pane.bounds.height) continue;
+          ctx.moveTo(0, y);
+          ctx.lineTo(dataW, y);
+        }
+        ctx.stroke();
+      }
+    }
+    ctx.globalAlpha = 1;
+  }
+};
+
 // src/renderers/native/volume/paintVolume.ts
 var VOLUME_FILL_ALPHA = 0.5;
 function paintVolume(ctx, bars, geom, colors) {
@@ -31443,6 +31697,7 @@ var NativeRenderer = class {
     // px reserved on the left for the docked drawings toolbar (0 when hidden)
     this.mountContainer = null;
     this.userDrawings = null;
+    this.backdropRenderer = new BackdropRenderer();
     this.volumeRenderer = new VolumeRenderer();
     /** SDK renderer layers instantiated at mount ({@link registerRendererLayer}). */
     this.extLayers = [];
@@ -31570,6 +31825,9 @@ var NativeRenderer = class {
     // bar under the crosshair; null when off a bar
     // ── settings dialog (rich, serializable config — item 15) ──
     this.settingsDialog = null;
+    /** The host's visibility policy (setting ids hidden from the dialog) — instance
+     *  state, never part of the persisted config. */
+    this.hiddenSettings = [];
     /** Where modal dialogs mount — a HOST override (multi-chart shells pass their root
      *  so dialogs center globally instead of clipping inside one cell). Null = the plot. */
     this.dialogHost = null;
@@ -32242,6 +32500,7 @@ var NativeRenderer = class {
     }
     this.settingsDialog.setTheme(this.theme);
     this.settingsDialog.setHostSections(this.hostSettingsSections);
+    this.settingsDialog.setHiddenSettings(this.hiddenSettings);
     this.syncThemeControl();
     this.settingsDialog.toggle(
       this.getConfig(),
@@ -32489,6 +32748,8 @@ var NativeRenderer = class {
     this.wrapper = document.createElement("div");
     Object.assign(this.wrapper.style, { position: "relative", width: "100%", height: "100%", overflow: "hidden", cursor: "crosshair", userSelect: "none", webkitUserSelect: "none" });
     applyChromeTokens(this.wrapper, this.chromeTheme());
+    this.backdropCanvas = document.createElement("canvas");
+    Object.assign(this.backdropCanvas.style, { position: "absolute", inset: "0", width: "100%", height: "100%", pointerEvents: "none" });
     this.volumeCanvas = document.createElement("canvas");
     Object.assign(this.volumeCanvas.style, { position: "absolute", inset: "0", width: "100%", height: "100%", pointerEvents: "none" });
     this.dataCanvas = this.createGeometryBackend();
@@ -32511,7 +32772,7 @@ var NativeRenderer = class {
     });
     const below = this.extLayers.filter((l) => l.def.placement === "below-data").map((l) => l.canvas);
     const above = this.extLayers.filter((l) => l.def.placement !== "below-data").map((l) => l.canvas);
-    this.plot.append(...below, this.dataCanvas, this.volumeCanvas, this.vpvrCanvas, ...above, this.chromeCanvas, this.drawingsCanvas, this.cursorCanvas, this.overlayRoot);
+    this.plot.append(this.backdropCanvas, ...below, this.dataCanvas, this.volumeCanvas, this.vpvrCanvas, ...above, this.chromeCanvas, this.drawingsCanvas, this.cursorCanvas, this.overlayRoot);
     this.layerOrderSig = "";
     this.wrapper.appendChild(this.plot);
     this.factoryConfig = this.getConfig();
@@ -32521,6 +32782,7 @@ var NativeRenderer = class {
     this.wrapper.appendChild(this.attributionEl);
     container.appendChild(this.wrapper);
     this.applyBackground();
+    this.backdropRenderer.mount(this.backdropCanvas);
     this.volumeRenderer.mount(this.volumeCanvas);
     this.vpvrRenderer.mount(this.vpvrCanvas);
     for (const l of this.extLayers) l.instance.mount(l.canvas);
@@ -32810,6 +33072,7 @@ var NativeRenderer = class {
     this.scrollButton = null;
     for (const l of this.extLayers) l.instance.destroy?.();
     this.extLayers = [];
+    this.backdropRenderer.destroy();
     this.volumeRenderer.destroy();
     this.vpvrRenderer.destroy();
     this.backend.destroy();
@@ -33189,6 +33452,13 @@ var NativeRenderer = class {
     this.hostSettingsSections = sections;
     this.settingsDialog?.setHostSections(sections);
   }
+  setSettingsVisibility(policy) {
+    this.hiddenSettings = [...policy.hidden ?? []];
+    this.settingsDialog?.setHiddenSettings(this.hiddenSettings);
+  }
+  listSettingsIds() {
+    return settingsIdCatalog(this.hostSettingsSections);
+  }
   onChartTypeSettingsChange(cb) {
     this.chartTypeSettingsCbs.add(cb);
     return () => this.chartTypeSettingsCbs.delete(cb);
@@ -33895,7 +34165,7 @@ var NativeRenderer = class {
     this.backend.modelAlpha = this.modelAlpha;
     this.backend.candleBodyAlpha = this.candleBodyAlpha;
     this.backend.candleStructureAlpha = this.candleStructureAlpha;
-    this.backend.gridAlpha = 1;
+    let gridAlpha = 1;
     const candleBodyScale = 1;
     this.backend.candleBodyScale = candleBodyScale;
     const pane = this.scene.panes.get(PRICE_PANE_ID2);
@@ -33934,7 +34204,7 @@ var NativeRenderer = class {
       if (folded) {
         if (folded.candleBodyScale != null) this.backend.candleBodyScale = clamp012(folded.candleBodyScale) || 0.01;
         if (folded.candleBodyAlpha != null) this.backend.candleBodyAlpha = clamp012(folded.candleBodyAlpha) * this.candleBodyAlpha;
-        if (folded.gridAlpha != null) this.backend.gridAlpha = clamp012(folded.gridAlpha);
+        if (folded.gridAlpha != null) gridAlpha = clamp012(folded.gridAlpha);
       }
     }
     const li = this.bars.length - 1;
@@ -33942,6 +34212,7 @@ var NativeRenderer = class {
     const easeLive = !!liveActual && this.liveEaseTime === liveActual.time && (liveActual.high !== this.liveEaseHigh || liveActual.low !== this.liveEaseLow || liveActual.close !== this.liveEaseClose);
     if (easeLive && liveActual) this.bars[li] = { ...liveActual, high: this.liveEaseHigh, low: this.liveEaseLow, close: this.liveEaseClose };
     this.scene.drawingSlices = this.userDrawings?.prepareSlices(this.scene.orderedPanes().map((p) => p.id)) ?? /* @__PURE__ */ new Map();
+    this.backdropRenderer.render(this.scene, this.coords, this.theme, gridAlpha);
     this.backend.render(this.scene, this.coords, this.theme);
     this.chrome.render(this.scene, this.coords, this.theme, this.axisSurface());
     this.userDrawings?.render();
@@ -34084,6 +34355,7 @@ var NativeRenderer = class {
       pane.scaleTarget = computePaneScale(masterModels, this.bars, includeCandles, i0, i1, dr, paneLogScale(this.scene, pane), (id) => this.scene.offsetOf(id));
       pane.percentBaseline = pane.kind === "price" ? this.bars[i0]?.close ?? 0 : this.firstVisibleValue(masterModels, i0);
       pane.axisFormat = void 0;
+      pane.axisBands = void 0;
       if (this.volumeOwnsPane(pane, masterModels)) {
         const maxVol = this.maxVisibleVolume(i0, i1);
         if (maxVol > 0) {
@@ -34093,6 +34365,11 @@ var NativeRenderer = class {
       } 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.percentBaseline = this.bars[i0]?.close ?? 0;
+        if (masterModels.every((m) => m.paneAxis != null)) {
+          pane.axisFormat = "none";
+          const banded = masterModels.find((m) => typeof m.paneAxis === "object");
+          pane.axisBands = banded ? banded.paneAxis.bands : void 0;
+        }
       }
       if (pane === pricePane && this.scene.tradeMarkers.visible && pane.bounds.height > 0) {
         const th = this.tradesScaleHints(vr);
@@ -34213,11 +34490,11 @@ var NativeRenderer = class {
     );
     return { below: below.map((id) => byId.get(id)), above: above.map((id) => byId.get(id)) };
   }
-  /** The full canvas pile in paint order (layers + data/volume/vpvr) — what the DOM
-   *  stacking and the screenshot compositor must both follow. */
+  /** The full canvas pile in paint order (backdrop + layers + data/volume/vpvr) — what
+   *  the DOM stacking and the screenshot compositor must both follow. */
   canvasPile() {
     const { below, above } = this.orderedLayerCanvases();
-    return [...below, this.dataCanvas, this.volumeCanvas, this.vpvrCanvas, ...above];
+    return [this.backdropCanvas, ...below, this.dataCanvas, this.volumeCanvas, this.vpvrCanvas, ...above];
   }
   /** Re-slot the SDK layer canvases in the plot when the computed order changed (a z
    *  write, a restored config, an indicator mount/remove/restack). Runs at the top of
@@ -34534,6 +34811,8 @@ var NativeRenderer = class {
     const ph = h;
     this.dataCanvas.width = Math.round(pw * dpr);
     this.dataCanvas.height = Math.round(ph * dpr);
+    this.backdropCanvas.width = this.dataCanvas.width;
+    this.backdropCanvas.height = this.dataCanvas.height;
     this.volumeCanvas.width = this.dataCanvas.width;
     this.volumeCanvas.height = this.dataCanvas.height;
     for (const l of this.extLayers) {
@@ -34675,35 +34954,6 @@ function normalizeBars(bars) {
   return out;
 }
 
-// src/core/price-styles/heikin-ashi.ts
-function heikinAshiNext(raw, prevHa) {
-  const haClose = (raw.open + raw.high + raw.low + raw.close) / 4;
-  const haOpen = prevHa ? (prevHa.open + prevHa.close) / 2 : (raw.open + raw.close) / 2;
-  return {
-    time: raw.time,
-    open: haOpen,
-    high: Math.max(raw.high, haOpen, haClose),
-    low: Math.min(raw.low, haOpen, haClose),
-    close: haClose,
-    ...raw.volume != null ? { volume: raw.volume } : {}
-  };
-}
-function heikinAshiFull(raw) {
-  const out = new Array(raw.length);
-  let prev2;
-  for (let i = 0; i < raw.length; i += 1) {
-    prev2 = heikinAshiNext(raw[i], prev2);
-    out[i] = prev2;
-  }
-  return out;
-}
-
-// src/chart-types/builtins.ts
-var HEIKIN_ASHI = { full: heikinAshiFull, next: heikinAshiNext };
-function registerBuiltinChartTypes() {
-  registerChartType({ id: "heikinashi", label: "Heikin Ashi", barTransform: HEIKIN_ASHI });
-}
-
 // src/core/native-indicators/volume/VolumeIndicator.ts
 var DEFAULT_UP = BULLISH;
 var DEFAULT_DOWN = BEARISH;
@@ -34900,6 +35150,7 @@ var Vela = class {
       // the volume indicator is on by default
     };
     this.rendererControl = new RendererControl(renderer);
+    if (options.settings) this.rendererControl.setSettingsVisibility(options.settings);
     this.dataControl = new DataControl(feed);
     this.orchestrator = new EngineOrchestrator(element, renderer, feed, engines, config, this.dataControl);
     const defaults2 = rendererDefaults();
@@ -36030,8 +36281,8 @@ function seedDefaults(opts) {
   };
 }
 function cellChartDefaults(opts) {
-  const { renderer, defaultLanguage, currentPriceLine, logScale, animations, glow, upColor, downColor, drawings } = opts;
-  return { renderer, defaultLanguage, currentPriceLine, logScale, animations, glow, upColor, downColor, drawings };
+  const { renderer, defaultLanguage, currentPriceLine, logScale, animations, glow, upColor, downColor, drawings, settings } = opts;
+  return { renderer, defaultLanguage, currentPriceLine, logScale, animations, glow, upColor, downColor, drawings, settings };
 }
 function cellDrawings(opt) {
   if (opt === false) return false;
@@ -36044,7 +36295,11 @@ var ChartCell = class {
     this.deps = deps;
     /** This cell's unified app+drawings undo timeline (the shared Ctrl+Z routes here). */
     this.history = new WidgetHistory(() => this.inner);
-    /** Live manifest-indicator instances on this cell (the SAME entry may repeat). */
+    /** Live manifest-indicator instances on this cell (the SAME entry may repeat).
+     *  `external` marks instances added through the public seam (`ctx.addIndicator`)
+     *  rather than the shell manifest — they share the undo/redo and picker plumbing
+     *  but stay OUT of the persisted ledger (their names would never resolve against
+     *  the manifest); persisting them is their plugin's job (`registerStatePersistence`). */
     this.instances = [];
     /** The native-indicator catalog with this cell's live supported/present flags. */
     this.nativeCatalog = [];
@@ -36069,6 +36324,14 @@ var ChartCell = class {
     this.presentNatives = [];
     this.rangeBars = 0;
     this.pendingRange = null;
+    /** Last symbol we toasted "no provider serves this" for — once per symbol (the
+     *  core re-reports on every provider-index settle). */
+    this.unresolvedToasted = null;
+    /** The cell's third-party state bag (`ext` of the persisted per-chart state) —
+     *  seeded from the boot/restored document, refreshed by handler `serialize` calls at
+     *  dehydrate time. Entries with no registered handler this session ride along
+     *  verbatim, so a document never loses a plugin's state in the plugin's absence. */
+    this.extState = {};
     /** Indicator titles (this cell's in-chart legend rows) shown. */
     this.indicatorTitlesOn = true;
     /** Plot values beside this cell's legend titles shown. */
@@ -36135,9 +36398,16 @@ var ChartCell = class {
       this.pendingManifestNames = [...seed.indicators.manifest];
     }
     this.volumeIntent = seed.indicators ? seed.indicators.natives.includes("volume") : deps.volume;
+    this.extState = { ...seed.ext ?? {} };
     this.inner.on("load:end", () => {
       this.volumeMayBePending = false;
     });
+    this.inner.on("data:unresolved", ({ symbol: symbol2, providers }) => {
+      if (this.unresolvedToasted === symbol2) return;
+      this.unresolvedToasted = symbol2;
+      const list = providers.length > 0 ? providers.join(", ") : "none";
+      this.deps.toast(`No registered provider serves "${symbol2}" (registered: ${list})`, "error", 6e3);
+    });
     this.inner.on("load:start", () => this.watermark?.setLoading(true));
     this.inner.on("load:end", () => this.watermark?.setLoading(false));
     const tz = deps.timezone();
@@ -36298,11 +36568,13 @@ var ChartCell = class {
     const eth = "Extended hours (ETH)";
     const sessionSection = {
       title: "Trading session",
+      id: "trading-session",
       placement: "symbol",
       rows: [
         {
           kind: "select",
           label: "Session",
+          id: "session",
           options: [rth, eth],
           get: () => this.session === "extended" ? eth : rth,
           set: (v) => this.setSession(v === eth ? "extended" : "regular")
@@ -36310,12 +36582,14 @@ var ChartCell = class {
         {
           kind: "color",
           label: "Pre-market",
+          id: "premarket-color",
           get: () => this.sessionShadeColor("premarketColor"),
           set: (v) => this.setSessionShadeColor("premarketColor", v)
         },
         {
           kind: "color",
           label: "Post-market",
+          id: "postmarket-color",
           get: () => this.sessionShadeColor("postmarketColor"),
           set: (v) => this.setSessionShadeColor("postmarketColor", v)
         }
@@ -36323,11 +36597,13 @@ var ChartCell = class {
     };
     const advanced = {
       title: "Advanced",
+      id: "advanced",
       placement: "end",
       rows: [
         {
           kind: "select",
           label: "Bars to fetch",
+          id: "bars",
           options: ["500", "1000", "2000", "5000", "10000", "20000"],
           get: () => String(this.state.bars ?? 1e3),
           set: (v) => {
@@ -36340,11 +36616,13 @@ var ChartCell = class {
     };
     const watermarkSection = {
       title: "Watermark",
+      id: "watermark",
       placement: "symbol",
       rows: [
         {
           kind: "toggle",
           label: "Symbol watermark",
+          id: "visible",
           get: () => this.watermarkOn,
           set: (v) => this.setWatermarkVisible(v)
         }
@@ -36355,22 +36633,25 @@ var ChartCell = class {
       const sl = this.statusline;
       sections.push({
         title: "Status line",
+        id: "status-line",
         rows: [
-          { kind: "heading", label: "Status line" },
-          { kind: "toggle", label: "Symbol name", get: () => sl.partVisible("name"), set: (v) => sl.setPartVisible("name", v) },
-          { kind: "toggle", label: "Market status", get: () => sl.partVisible("market"), set: (v) => sl.setPartVisible("market", v) },
-          { kind: "toggle", label: "OHLC values", get: () => sl.partVisible("ohlc"), set: (v) => sl.setPartVisible("ohlc", v) },
-          { kind: "toggle", label: "Bar change values", get: () => sl.partVisible("change"), set: (v) => sl.setPartVisible("change", v) },
-          { kind: "heading", label: "Indicators" },
+          { kind: "heading", label: "Status line", id: "parts" },
+          { kind: "toggle", label: "Symbol name", id: "name", get: () => sl.partVisible("name"), set: (v) => sl.setPartVisible("name", v) },
+          { kind: "toggle", label: "Market status", id: "market", get: () => sl.partVisible("market"), set: (v) => sl.setPartVisible("market", v) },
+          { kind: "toggle", label: "OHLC values", id: "ohlc", get: () => sl.partVisible("ohlc"), set: (v) => sl.setPartVisible("ohlc", v) },
+          { kind: "toggle", label: "Bar change values", id: "change", get: () => sl.partVisible("change"), set: (v) => sl.setPartVisible("change", v) },
+          { kind: "heading", label: "Indicators", id: "indicators" },
           {
             kind: "toggle",
             label: "Titles",
+            id: "indicator-titles",
             get: () => this.indicatorTitlesOn,
             set: (v) => this.setIndicatorTitlesVisible(v)
           },
           {
             kind: "toggle",
             label: "Values",
+            id: "indicator-values",
             get: () => this.indicatorValuesOn,
             set: (v) => this.setIndicatorValuesVisible(v)
           }
@@ -36423,6 +36704,7 @@ var ChartCell = class {
   /** Switch this cell's market in place (the chart instance survives). */
   setSymbol(symbol) {
     if (!this.inner || symbol === this.symbol) return;
+    this.unresolvedToasted = null;
     void this.inner.setMarket({ symbol });
   }
   setTimeframe(timeframe) {
@@ -36513,6 +36795,41 @@ var ChartCell = class {
       for (const entry of list) if (entry.enabled) this.addManifestInstance(entry, { record: false });
     }
   }
+  /**
+   * Replace the indicator ledger: natives converge to the listed set (volume
+   * included — removing it sticks, the core's auto-add respects the opt-out), and
+   * manifest instances are re-created by name, held until the shared manifest
+   * resolves. Convergence is state application, not user edits — nothing enters the
+   * undo timeline.
+   */
+  applyIndicatorLedger(led) {
+    const chart = this.inner;
+    if (!chart) return;
+    this.volumeIntent = led.natives.includes("volume");
+    this.history.silently(() => {
+      const present = chart.presentNativeIndicators();
+      for (const type of led.natives) {
+        if (!present.includes(type)) chart.addNativeIndicator(type);
+      }
+      for (const type of present) {
+        if (!led.natives.includes(type)) chart.addNativeIndicator(type).remove();
+      }
+      for (const it of [...this.instances]) this.dropInstance(it);
+      if (this.manifest.length > 0) {
+        for (const name of led.manifest) {
+          const entry = this.manifest.find((e) => e.name === name);
+          if (entry) this.addManifestInstance(entry, { record: false });
+        }
+        this.pendingManifestNames = null;
+      } else if (!this.deps.manifestSettled()) {
+        this.pendingManifestNames = [...led.manifest];
+      } else {
+        this.pendingManifestNames = null;
+      }
+    });
+    this.syncPresentNatives();
+    this.refreshNativeCatalog();
+  }
   /** The picker's library rows: supported natives first, then the manifest. */
   libraryRows() {
     return [
@@ -36542,10 +36859,20 @@ var ChartCell = class {
     if (index < present.length) this.removeNative(present[index].type);
     else this.removeInstance(index - present.length);
   }
+  /**
+   * Add a script indicator through the PUBLIC seam (`ctx.addIndicator`) — same undo/
+   * redo and picker plumbing as a manifest entry, but flagged `external` so the
+   * persisted ledger never records a name the manifest can't resolve (the plugin owns
+   * persistence via `registerStatePersistence`). Recording follows the ambient mute:
+   * a persistence handler's `restore` runs silently, a user-driven call records.
+   */
+  addExternalIndicator(entry) {
+    this.addManifestInstance({ ...entry, enabled: true }, { external: true });
+  }
   /** Add ONE instance of a manifest entry (repeatable — duplicates are legitimate). */
   addManifestInstance(entry, opts = {}) {
     if (this.destroyed) return;
-    const it = { entry, handle: this.addToChart(entry) };
+    const it = { entry, handle: this.addToChart(entry), ...opts.external ? { external: true } : {} };
     this.instances.push(it);
     this.deps.onIndicatorsChanged(this.id);
     if (opts.record === false) return;
@@ -36626,12 +36953,97 @@ var ChartCell = class {
       return null;
     }
   }
+  // ── third-party state (the `ext` seam) ──
+  /** The cell-bound surface persistence handlers work against (built per call — the
+   *  widget-context rule; nothing here may be cached by a handler). Its add methods
+   *  are ALWAYS muted — a `restore` that fetches before adding escapes the sync mute
+   *  of {@link restorePersistedExt}, and a state application must never enter the
+   *  undo timeline, however late its continuation lands. */
+  stateContext() {
+    return {
+      cellId: this.id,
+      chart: this.chart,
+      addIndicator: (entry) => this.history.silently(() => this.addExternalIndicator(entry)),
+      addNativeIndicator: (type) => this.history.silently(() => this.addNative(type))
+    };
+  }
+  /**
+   * Run the registered cell-scope `restore` handlers against the cell's restored
+   * `ext` bag — the workspace calls this AFTER the core state is in place (chart
+   * alive and wired, indicator ledger converged). Muted: nothing a restore does
+   * enters the undo timeline. Handlers only see keys the document carries; a failing
+   * handler is contained (one broken plugin must not take the cell down).
+   */
+  restorePersistedExt() {
+    if (this.destroyed) return;
+    for (const h of statePersistenceHandlers("cell")) {
+      if (!(h.key in this.extState)) continue;
+      try {
+        this.history.silently(() => h.restore(this.extState[h.key], this.stateContext()));
+      } catch (err) {
+        console.warn(`[vela] state persistence "${h.key}" restore failed:`, err);
+      }
+    }
+  }
+  /** Assemble the cell's `ext` bag: fresh handler snapshots merged OVER the preserved
+   *  entries — a key with no handler this session rides along verbatim; a registered
+   *  handler returning `undefined` withdraws its entry. */
+  dehydrateExt() {
+    const ext = { ...this.extState };
+    for (const h of statePersistenceHandlers("cell")) {
+      try {
+        const value = h.serialize(this.stateContext());
+        if (value === void 0) delete ext[h.key];
+        else ext[h.key] = value;
+      } catch (err) {
+        console.warn(`[vela] state persistence "${h.key}" serialize failed:`, err);
+      }
+    }
+    this.extState = ext;
+    return Object.keys(ext).length > 0 ? ext : void 0;
+  }
   // ── lifecycle ──
+  /**
+   * Apply a restored cell state IN PLACE — the chart instance survives (the market
+   * switches via `setMarket`) while cosmetics, renderer config, drawings, and the
+   * indicator ledger converge to the document. The workspace takes this path when a
+   * state document lands on a grid of the same shape (async-storage boot, host
+   * `applyState`), so chart references, indicator handles, event subscriptions, and
+   * the cell host all stay valid.
+   */
+  rehydrate(cs) {
+    if (!this.inner || this.destroyed) return;
+    if (cs.priceStyle && cs.priceStyle !== this.priceStyle) this.setPriceStyle(cs.priceStyle);
+    if (cs.watermark !== void 0 && cs.watermark !== this.watermarkOn) this.setWatermarkVisible(cs.watermark);
+    if (cs.indicatorTitles !== void 0 && cs.indicatorTitles !== this.indicatorTitlesOn) this.setIndicatorTitlesVisible(cs.indicatorTitles);
+    if (cs.indicatorValues !== void 0 && cs.indicatorValues !== this.indicatorValuesOn) this.setIndicatorValuesVisible(cs.indicatorValues);
+    if (cs.rendererConfig != null) this.inner.renderer.applyConfig(cs.rendererConfig);
+    if (cs.drawings != null) this.inner.drawings.fromJSON(cs.drawings);
+    if (cs.indicators) this.applyIndicatorLedger(cs.indicators);
+    this.extState = { ...cs.ext ?? {} };
+    this.restorePersistedExt();
+    const symbol = prefixedSymbol(cs);
+    const session = normalizeSession(cs.session) ?? "regular";
+    const bars = typeof cs.bars === "number" && Number.isFinite(cs.bars) && cs.bars > 0 ? cs.bars : 0;
+    const next = {};
+    if (symbol && symbol !== this.symbol) next.symbol = symbol;
+    if (cs.timeframe && cs.timeframe !== this.timeframe) next.timeframe = cs.timeframe;
+    if (session !== this.session) {
+      this.state.session = session;
+      next.session = session;
+    }
+    if (bars > 0 && bars !== this.state.bars) {
+      this.state.bars = bars;
+      next.bars = Math.max(bars, this.rangeBars);
+    }
+    if (Object.keys(next).length > 0) void this.inner.setMarket(next);
+  }
   /** Snapshot everything the pool needs to restore this slot later. The market fields
    *  come from the LIVE config (`chart.market`) — the requested identity — so a switch
    *  still loading when the snapshot is taken (persist-on-close) is not lost. */
   dehydrate() {
     const live = this.inner?.market;
+    const ext = this.inner ? this.dehydrateExt() : Object.keys(this.extState).length > 0 ? { ...this.extState } : void 0;
     return {
       ...this.state,
       ...live ? { symbol: live.symbol, provider: live.provider, timeframe: live.timeframe } : {},
@@ -36644,14 +37056,17 @@ var ChartCell = class {
       // Natives from the chart's SYNC registry read — an async catalog mirror here
       // lost unload-time saves, and the old empty-set fallbacks resurrected removed
       // indicators. Manifest names fall back to the restored ledger only until the
-      // shared manifest settles. See {@link indicatorLedger}.
+      // shared manifest settles. See {@link indicatorLedger}. External instances
+      // (`ctx.addIndicator`) stay out: their names would never resolve against the
+      // manifest — their plugin persists them via the `ext` seam instead.
       indicators: indicatorLedger({
         present: this.inner ? this.inner.presentNativeIndicators() : [],
-        instanceNames: this.instances.map((it) => it.entry.name),
+        instanceNames: this.instances.filter((it) => !it.external).map((it) => it.entry.name),
         pendingManifest: this.pendingManifestNames,
         manifestSettled: this.deps.manifestSettled(),
         volumePending: this.volumeMayBePending && this.volumeIntent
-      })
+      }),
+      ...ext ? { ext } : {}
     };
   }
   destroy() {
@@ -36688,6 +37103,9 @@ function buildContext(host) {
     togglePanel: (id, open2) => host.togglePanel(id, open2),
     host: host.root,
     toast: (message, kind) => host.toast(message, kind),
+    addIndicator: (entry) => host.active()?.addExternalIndicator(entry),
+    addNativeIndicator: (type) => host.active()?.addNative(type),
+    stateChanged: () => host.stateDirty(),
     cells: host.cells().map((c) => ({ id: c.id, chart: c.chart, symbol: c.symbol, timeframe: c.timeframe })),
     activeCellId: active?.id ?? "",
     setActiveCell: (id) => host.setActiveCell(id)
@@ -37049,6 +37467,10 @@ var VelaWorkspace = class {
     /** Plot-local y of the last price-axis long-press (targets the pane under the finger). */
     this.priceScalePressY = 0;
     this.attachmentDisposers = /* @__PURE__ */ new Map();
+    /** The document-level third-party state bag (`state.ext`) — seeded from the restored
+     *  document, refreshed by global-scope handler `serialize` calls at snapshot time.
+     *  Entries with no registered handler this session ride along verbatim. */
+    this.extState = {};
     /** The single grid-wide attribution mark — re-inked on a live theme swap. */
     this.attributionMark = null;
     this.onRootKeydown = (ev) => this.routeTyping(ev);
@@ -37063,6 +37485,7 @@ var VelaWorkspace = class {
       state: () => ({ ...this.syncOpts })
     };
     registerBuiltinLayouts();
+    registerBuiltinChartTypes();
     const hostEl = typeof container === "string" ? document.querySelector(container) : container;
     if (!hostEl) throw new Error(`VelaWorkspace: container not found: ${String(container)}`);
     this.opts = opts;
@@ -37086,8 +37509,12 @@ var VelaWorkspace = class {
     for (const kind of ["viewport", "symbol", "timeframe", "crosshair", "drawings"]) {
       this.applySyncSetting(kind, sync?.[kind]);
     }
-    this.def = this.resolveLayout(boot?.layout && ensureLayout(boot.layout) ? boot.layout : opts.layout ?? "4");
+    this.monoLayout = opts.layout === false;
+    const optLayout = opts.layout === false || opts.layout === void 0 ? "4" : opts.layout;
+    this.def = this.resolveLayout(this.monoLayout ? "1" : boot?.layout && ensureLayout(boot.layout) ? boot.layout : optLayout);
+    this.alertCap = Math.max(1, opts.alertCap ?? ALERT_CAP);
     if (boot?.trackSizes) for (const [id, ts] of Object.entries(boot.trackSizes)) this.trackSizes.set(id, ts);
+    if (boot?.ext) this.extState = { ...boot.ext };
     if (boot?.charts) for (const { id, ...cs } of boot.charts) this.pool.set(id, cs);
     this.order = boot?.charts ? boot.charts.map((c) => c.id) : declaredOrder(opts.cells);
     const bootActive = boot?.activeCellId ?? null;
@@ -37141,7 +37568,9 @@ var VelaWorkspace = class {
       onTimeframe: (tf) => this.setActiveTimeframe(tf),
       onTimeframeFavorite: (tf, on) => this.setTimeframeFavorite(tf, on),
       onPriceStyle: (style) => this.active.setPriceStyle(style),
-      layout: {
+      // Single-chart mode: no layout block at all — the topbar renders no layout
+      // button and no sync switches (see TopbarOptions.layout).
+      layout: this.monoLayout ? void 0 : {
         current: this.def.id,
         // The picker composes dynamic layouts on its grid canvas; registered
         // presets the canvas cannot express (bespoke plugin areas) list as rows.
@@ -37166,8 +37595,11 @@ var VelaWorkspace = class {
     });
     const main = doc.createElement("div");
     main.className = "vela-ws-main";
+    const toolbar = buildToolbar(opts.drawings);
+    this.drawingsEnabled = opts.drawings !== false;
+    this.toolbarDef = toolbar.definition;
     let toolbarHost = null;
-    if (opts.drawingToolbar !== false) {
+    if (this.drawingsEnabled && toolbar.visible && opts.drawingToolbar !== false) {
       toolbarHost = doc.createElement("div");
       toolbarHost.className = "vela-ws-toolbar";
       main.appendChild(toolbarHost);
@@ -37186,7 +37618,7 @@ var VelaWorkspace = class {
     this.dock.addBuiltIn({ id: "objects", title: "Object tree", icon: "objects", order: 20, panel: this.objectTree, onChart: (c) => this.objectTree.onChart(c) });
     this.dock.refresh();
     this.root.appendChild(main);
-    this.toast = new Toast(this.gridEl);
+    this.toastHost = new Toast(this.gridEl);
     const attribution = rendererDefaults().attribution;
     if (attribution !== false) {
       const background = resolveTheme(opts.theme).background;
@@ -37232,7 +37664,7 @@ var VelaWorkspace = class {
         }
       }
     ) : null;
-    this.drawToolbar?.setDefinition(defaultToolbar());
+    this.drawToolbar?.setDefinition(this.toolbarDef);
     this.drawToolbar?.setVisible(true);
     this.drawToolbar?.setDrawingsSyncMode(!!this.syncOpts.drawings);
     this.bottombar = opts.bottombar !== false ? new Bottombar(this.root, {
@@ -37254,11 +37686,11 @@ var VelaWorkspace = class {
       onTimeframeClick: () => this.openTimeframeDrawer(),
       ...picker ? { onIndicatorsClick: () => picker.open() } : {},
       getContext: () => this.context(),
-      onDrawingsClick: () => this.openDrawingsDrawer(),
+      ...this.drawingsEnabled ? { onDrawingsClick: () => this.openDrawingsDrawer() } : {},
       onMoreClick: () => this.openMoreDrawer(),
       onSettingsClick: () => this.active.chart.renderer.openSettings()
     }) : null;
-    this.drawingPill = new DrawingPill(this.gridEl);
+    this.drawingPill = this.drawingsEnabled ? new DrawingPill(this.gridEl) : null;
     hostEl.appendChild(this.root);
     this.layoutCtl = new LayoutModeController(this.root, opts.layoutMode ?? "auto");
     this.layoutCtl.onChange((mode) => this.onLayoutModeChange(mode));
@@ -37297,6 +37729,7 @@ var VelaWorkspace = class {
       this.manifestSettled = true;
     }
     this.mountAttachments();
+    this.restoreGlobalExt();
   }
   // ── access ──────────────────────────────────────────────────
   /** The cell with identity `id` (its declared name, or `c<N>` when undeclared), or
@@ -37358,7 +37791,8 @@ var VelaWorkspace = class {
       openSymbolSearch: (query) => this.symbolPicker.open(query ?? ""),
       togglePanel: (id, open2) => this.dock.toggle(id, open2),
       root: this.root,
-      toast: (message, kind) => this.toast.show(message, kind)
+      toast: (message, kind) => this.toastHost.show(message, kind),
+      stateDirty: () => this.markStateDirty()
     });
   }
   /** Re-project contributed topbar actions + side panels, and mount late-registered attachments. */
@@ -37397,22 +37831,35 @@ var VelaWorkspace = class {
     if (this.trackSizes.size > 0) state.trackSizes = Object.fromEntries([...this.trackSizes].map(([k, v]) => [k, { ...v }]));
     const panels2 = this.dock.getState();
     if (panels2) state.panels = panels2;
+    const ext = { ...this.extState };
+    for (const h of statePersistenceHandlers("global")) {
+      try {
+        const value = h.serialize(this.context());
+        if (value === void 0) delete ext[h.key];
+        else ext[h.key] = value;
+      } catch (err) {
+        console.warn(`[vela] state persistence "${h.key}" serialize failed:`, err);
+      }
+    }
+    this.extState = ext;
+    if (Object.keys(ext).length > 0) state.ext = ext;
     return state;
   }
   /**
    * Restore a state document produced by {@link getState} (untrusted-safe: malformed
-   * fields are dropped). Replaces the WHOLE workspace state: prefs, sync links,
-   * layout, and every slot — current cells are rebuilt from the document. A layout id
-   * that is not registered keeps the current grid (register custom layouts first).
+   * fields are dropped). When the document matches the live grid one-to-one — same
+   * layout, same ordered slot identities — it is applied IN PLACE: every chart
+   * instance survives (markets switch via `setMarket`), so chart references,
+   * indicator handles, and event subscriptions stay valid. Any structural difference
+   * (layout, slot count, renamed ids) falls back to the full rebuild: prefs, sync
+   * links, layout, and every slot are replaced, current cells rebuilt from the
+   * document. A layout id that is not registered keeps the current grid (register
+   * custom layouts first).
    */
   applyState(state) {
     if (this.destroyed) return;
     const st = sanitizeState(state);
     if (!st) return;
-    if (st.timezone) {
-      this.timezone = st.timezone;
-      this.bottombar?.setTimezone(st.timezone);
-    }
     if (st.favorites) this.favs = [...st.favorites];
     if (st.timeframeFavorites) {
       this.tfFavs = [...st.timeframeFavorites];
@@ -37422,6 +37869,36 @@ var VelaWorkspace = class {
     for (const kind of ["viewport", "symbol", "timeframe", "crosshair", "drawings"]) this.applySyncSetting(kind, st.sync?.[kind]);
     this.trackSizes.clear();
     if (st.trackSizes) for (const [id, ts] of Object.entries(st.trackSizes)) this.trackSizes.set(id, ts);
+    const targetDef = this.monoLayout ? this.def : ensureLayout(st.layout) ?? this.def;
+    const liveCount = this.def.cells.length;
+    const inPlace = targetDef.id === this.def.id && st.charts.length >= liveCount && this.order.length >= liveCount && this.def.cells.every((_, i) => st.charts[i].id === this.order[i] && this.cellsById.has(this.order[i]));
+    if (inPlace) {
+      if (st.favorites) {
+        for (const cell of this.cellsById.values()) cell.chart.drawings.setFavorites(this.favs);
+      }
+      this.drawingLinks.clear();
+      for (const [i] of this.def.cells.entries()) {
+        const { id, ...cs } = st.charts[i];
+        this.cellsById.get(id)?.rehydrate(cs);
+      }
+      if (st.timezone) this.setTimezone(st.timezone);
+      this.pool.clear();
+      for (const { id, ...cs } of st.charts.slice(liveCount)) this.pool.set(id, cs);
+      this.order = st.charts.map((c) => c.id);
+      this.applyGrid();
+      const nextActive2 = st.activeCellId && this.cellsById.has(st.activeCellId) ? st.activeCellId : this.order[0] ?? null;
+      if (nextActive2 === this.activeId) this.projectActiveCell();
+      else this.setActiveCell(nextActive2);
+      this.refreshRetention();
+      this.extState = { ...st.ext ?? {} };
+      this.restoreGlobalExt();
+      this.markStateDirty();
+      return;
+    }
+    if (st.timezone) {
+      this.timezone = st.timezone;
+      this.bottombar?.setTimezone(st.timezone);
+    }
     for (const [id, cell] of [...this.cellsById]) {
       cell.destroy();
       this.cellsById.delete(id);
@@ -37431,7 +37908,7 @@ var VelaWorkspace = class {
     this.drawingLinks.clear();
     for (const { id, ...cs } of st.charts) this.pool.set(id, cs);
     this.order = st.charts.map((c) => c.id);
-    const def = ensureLayout(st.layout);
+    const def = this.monoLayout ? null : ensureLayout(st.layout);
     if (def) this.def = def;
     this.cellBackend = this.backendFor(this.def);
     this.applyGrid();
@@ -37443,8 +37920,24 @@ var VelaWorkspace = class {
     else this.setActiveCell(nextActive);
     this.refreshRetention();
     this.events.emit("layout:changed", { layout: this.def.id });
+    this.extState = { ...st.ext ?? {} };
+    this.restoreGlobalExt();
     this.markStateDirty();
   }
+  /** Run the registered global-scope `restore` handlers against the document-level
+   *  `ext` bag — keys present in the document only; a failing handler is contained.
+   *  Handlers whose restore touches chart content should be `scope: 'cell'` instead
+   *  (those run inside the cell's history-mute). */
+  restoreGlobalExt() {
+    for (const h of statePersistenceHandlers("global")) {
+      if (!(h.key in this.extState)) continue;
+      try {
+        h.restore(this.extState[h.key], this.context());
+      } catch (err) {
+        console.warn(`[vela] state persistence "${h.key}" restore failed:`, err);
+      }
+    }
+  }
   /** Set the workspace-global display timezone — applied to EVERY cell. */
   setTimezone(zone) {
     this.timezone = zone;
@@ -37480,6 +37973,7 @@ var VelaWorkspace = class {
    */
   setLayout(layout) {
     if (this.destroyed) return;
+    if (this.monoLayout) return;
     const next = this.resolveLayout(layout);
     const nextBackend = this.backendFor(next);
     const rebuildAll = nextBackend !== this.cellBackend;
@@ -37509,6 +38003,12 @@ var VelaWorkspace = class {
   resize() {
     this.splitters.layout();
   }
+  /** Show a toast over the grid — the same surface the shell's own notices use
+   *  (alerts, script errors) and the one contributions reach via `ctx.toast`. */
+  toast(message, kind = "info", durationMs = 3e3) {
+    if (this.destroyed) return;
+    this.toastHost.show(message, kind, durationMs);
+  }
   destroy() {
     if (this.destroyed) return;
     this.persistNow();
@@ -37534,7 +38034,7 @@ var VelaWorkspace = class {
     this.topbar.destroy();
     this.bottombar?.destroy();
     this.mobileBar?.destroy();
-    this.drawingPill.destroy();
+    this.drawingPill?.destroy();
     this.tfDrawer?.destroy();
     this.drawingsDrawer?.destroy();
     this.moreDrawer?.destroy();
@@ -37548,10 +38048,10 @@ var VelaWorkspace = class {
     this.indicatorPicker?.destroy();
     this.tfQuick.destroy();
     this.shortcutsHelp?.destroy();
-    this.toast.destroy();
+    this.toastHost.destroy();
     this.alertsMenu?.destroy();
     this.glider.stop();
-    sharedBarStore.retain(/* @__PURE__ */ new Set());
+    sharedBarStore.retain(/* @__PURE__ */ new Set(), this);
     this.root.remove();
     this.events.clear();
   }
@@ -37569,7 +38069,7 @@ var VelaWorkspace = class {
     this.mobileBar?.renderActions();
     this.mobileBar?.setSymbol(cell.symbol);
     this.mobileBar?.setTimeframe(cell.timeframe);
-    this.drawingPill.onChart(cell.chart);
+    this.drawingPill?.onChart(cell.chart);
     const pushHistory = () => this.topbar.setHistoryState(cell.history.canUndo, cell.history.canRedo);
     this.historyUnsub?.();
     this.historyUnsub = cell.history.onChange(pushHistory);
@@ -37695,7 +38195,8 @@ var VelaWorkspace = class {
         onPriceStyleChanged: (id2) => this.onCellPriceStyleChanged(id2),
         onIndicatorsChanged: (id2) => this.onCellIndicatorsChanged(id2),
         onStateDirty: () => this.markStateDirty(),
-        manifestSettled: () => this.manifestSettled
+        manifestSettled: () => this.manifestSettled,
+        toast: (message, kind, durationMs) => this.toastHost.show(message, kind, durationMs)
       });
       cell.host.style.gridArea = perCell[slot.id]?.gridArea ?? "";
       this.cellsById.set(id, cell);
@@ -37704,6 +38205,7 @@ var VelaWorkspace = class {
       cell.chart.renderer.setLayoutMode(this.layoutCtl.current);
       if (this.favs.length > 0) cell.chart.drawings.setFavorites(this.favs);
       cell.setManifest(this.manifest, pooled?.indicators == null);
+      cell.restorePersistedExt();
       this.events.emit("cell:created", { id });
     }
     for (const [i] of this.def.cells.entries()) {
@@ -37715,12 +38217,13 @@ var VelaWorkspace = class {
    *  cell's whole life, so these live and die with the cell). */
   wireCell(cell) {
     const chart = cell.chart;
-    chart.on("indicator:error", ({ error }) => this.toast.show(`[${cell.id}] ${error.message}`, "error", 5e3));
+    chart.on("indicator:error", ({ error }) => this.toastHost.show(`[${cell.id}] ${error.message}`, "error", 5e3));
     chart.on("script:run", (run) => this.events.emit("script:run", { ...run, cell: cell.id }));
     chart.on("alert", (alert) => {
-      this.alerts.unshift({ cellId: cell.id, symbol: cell.symbol, title: alert.title ?? "Alert", message: alert.message, time: alert.time });
-      if (this.alerts.length > ALERT_CAP) this.alerts.pop();
-      this.toast.show(`[${cell.id} \xB7 ${cell.symbol}] ${alert.title ? alert.title + " \u2014 " : ""}${alert.message}`, "info", 4e3);
+      const source = [parseSymbol(cell.symbol).ticker || cell.symbol, timeframeLabel(cell.timeframe), alert.indicator].filter(Boolean).join(" ");
+      this.alerts.unshift({ cellId: cell.id, source, title: alert.title ?? "Alert", message: alert.message, time: alert.time });
+      if (this.alerts.length > this.alertCap) this.alerts.pop();
+      this.toastHost.show(`${source} \u2014 ${alert.title ? alert.title + " \u2014 " : ""}${alert.message}`, "info", 4e3);
       this.topbar.setAlertCount(this.alerts.length);
     });
     chart.on("drawing:favorites", ({ favorites }) => {
@@ -37981,6 +38484,7 @@ var VelaWorkspace = class {
     this.mobileBar?.setTimeframe(cell.timeframe);
     this.objectTree.setSymbol(cell.symbol);
     this.bottombar?.setSession({ session: cell.session, enabled: cell.sessionAvailable });
+    this.bottombar?.setActiveRange(cell.activeRangeId);
   }
   /** Trigger ② — a cell's price style changed: the topbar button/menu only if active.
    *  Reads the cell back (not the requested style) so the button reflects what the
@@ -38065,7 +38569,7 @@ var VelaWorkspace = class {
   openDrawingsDrawer() {
     this.drawingsDrawer ?? (this.drawingsDrawer = new DrawingsDrawer({
       host: this.root,
-      toolbar: () => defaultToolbar(),
+      toolbar: () => this.toolbarDef,
       // the shared static toolbar's definition (see constructor)
       currentTool: () => this.active.chart.drawings.getTool(),
       isFavorite: (type) => this.active.chart.drawings.isFavorite(type),
@@ -38088,14 +38592,15 @@ var VelaWorkspace = class {
       onPriceStyle: (id) => this.active.setPriceStyle(id),
       panels: () => [...this.dock.list()],
       onTogglePanel: (id) => this.dock.toggle(id),
-      alerts: () => this.alerts.map((a) => ({ title: `[${a.cellId} \xB7 ${a.symbol}] ${a.title}`, message: a.message, time: a.time })),
+      alerts: () => this.alerts.map((a) => ({ title: `${a.source} \xB7 ${a.title}`, message: a.message, time: a.time })),
       // Left-aligned actions have their own bottom-bar stop — only the rest
       // lands in the drawer, or every left action would appear twice.
       actions: () => widgetActions("topbar", this.context()).filter((a) => a.align !== "left").map((a) => ({ label: a.label, icon: a.icon, run: () => a.run(this.context()) })),
       // The desktop layout dropdown's whole surface — the grid canvas, the
       // non-canvas presets and the sync switches — relocated into the kebab
-      // drawer (the topbar is hidden on mobile). Same reads as the topbar block.
-      layout: {
+      // drawer (the topbar is hidden on mobile). Same reads as the topbar block;
+      // single-chart mode omits it here too.
+      layout: this.monoLayout ? void 0 : {
         shape: () => layoutShape(this.def),
         presets: () => layouts().filter((l) => layoutShape(l) === null).map((l) => ({ id: l.id, label: l.label, checked: l.id === this.def.id })),
         onSelectGrid: (rows, cols) => this.setLayout(layoutForGrid(rows, cols)),
@@ -38138,7 +38643,7 @@ var VelaWorkspace = class {
     this.alertsMenu?.destroy();
     const items = this.alerts.length ? this.alerts.map((a, i) => ({
       id: String(i),
-      label: `[${a.cellId} \xB7 ${a.symbol}] ${new Date(a.time).toLocaleTimeString()} \xB7 ${a.title}: ${a.message}`.slice(0, 80)
+      label: `${a.source} \xB7 ${new Date(a.time).toLocaleTimeString()} \xB7 ${a.title}: ${a.message}`.slice(0, 80)
     })) : [{ id: "none", label: "No alerts yet", disabled: true }];
     this.alertsMenu = new Menu({
       host: this.root,
@@ -38259,7 +38764,7 @@ var VelaWorkspace = class {
       if (!raw) continue;
       symbols.add(this.feed.resolveSymbol(raw)?.ticker ?? raw);
     }
-    sharedBarStore.retain(symbols);
+    sharedBarStore.retain(symbols, this);
   }
 };