@luxalgo/vela 0.5.0 → 0.5.1

package/dist/workspace.cjs

@@ -881,6 +881,11 @@ function themeTokens(t) {
     "--vela-hover-strong": wash(0.16),
     "--vela-focus": withAlpha(t.textColor, 0.5),
     "--vela-focus-soft": withAlpha(t.textColor, 0.12),
+    // Separator hover — the SAME wash the chart's pane separators paint on hover
+    // (soft full-thickness band + solid 2px center line), so DOM-drawn dividers
+    // (the workspace grid) and canvas-drawn ones read as one family.
+    "--vela-separator-hover-band": withAlpha(t.textColor, 0.1),
+    "--vela-separator-hover-line": withAlpha(t.textColor, 0.55),
     "--vela-scroll": withAlpha(t.textColor, 0.3),
     "--vela-accent": ACCENT,
     "--vela-accent-bright": ACCENT_BRIGHT,
@@ -1058,6 +1063,11 @@ registerIcon(
   "pen-lock",
   svg24('<path d="M13.8 4.2a2.1 2.1 0 0 1 3 3L8.5 15.5l-3.5 1 1-3.5Z"/><rect x="13" y="14.5" width="8" height="6" rx="1.2"/><path d="M15 14.5v-1.6a2 2 0 0 1 4 0v1.6"/>')
 );
+registerIcon(
+  "pen-sync",
+  // Pen + two stacked panes — drawing onto every linked chart at once.
+  svg24('<path d="M13.8 4.2a2.1 2.1 0 0 1 3 3L8.5 15.5l-3.5 1 1-3.5Z"/><rect x="12.5" y="13.5" width="6" height="4.8" rx="1"/><path d="M15.5 18.3v1a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-2.8a1 1 0 0 0-1-1h-1"/>')
+);
 registerIcon("brush", svg24('<path d="M9.5 12 17 4.5a2.12 2.12 0 0 1 3 3L12.5 15"/><path d="M7 14a3 3 0 0 0-3 3c0 1.3-1.2 1.5-1.5 2 .8.9 2 1.5 3.5 1.5a3.5 3.5 0 0 0 3.5-3.5 3 3 0 0 0-2.5-3Z"/>'));
 registerIcon(
   "bucket",
@@ -1750,7 +1760,332 @@ var Dialog = class {
   }
 };
 
+// src/widget/layout-picker.ts
+var STYLE_ID = "vela-widget-layout-picker-v14";
+var CSS2 = `
+.vela-lp-layer { position: absolute; z-index: var(--vela-z-menu); }
+.vela-lp {
+    background: var(--vela-surface-elev);
+    color: var(--vela-fg);
+    border: 1px solid var(--vela-border-strong);
+    border-radius: 8px;
+    box-shadow: var(--vela-shadow);
+    padding: 10px 12px 10px;
+    font-size: 13px;
+    user-select: none;
+    transform-origin: top;
+    animation: vela-lp-in var(--vela-dur-fast) var(--vela-ease);
+}
+@keyframes vela-lp-in {
+    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+}
+.vela-lp-cols { display: flex; align-items: stretch; gap: 14px; }
+.vela-lp-heading {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 1.2px;
+    text-transform: uppercase;
+    color: var(--vela-fg-faint);
+    margin-bottom: 10px;
+}
+/* "?" help badge: hover it for the canvas explainer. */
+.vela-lp-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    border: 1px solid var(--vela-border-strong);
+    color: var(--vela-fg-muted);
+    font-size: 9px;
+    font-weight: 600;
+    letter-spacing: 0;
+    cursor: default;
+    transition: color var(--vela-dur-fast) var(--vela-ease), border-color var(--vela-dur-fast) var(--vela-ease);
+}
+.vela-lp-badge:hover { color: var(--vela-fg-bright); border-color: var(--vela-fg-muted); }
+.vela-lp-tip { display: flex; flex-direction: column; gap: 4px; max-width: 230px; white-space: normal; }
+.vela-lp-vsep { width: 1px; flex: none; align-self: stretch; background: var(--vela-border-faint); }
+.vela-lp-layout { width: 132px; display: flex; flex-direction: column; align-items: center; }
+.vela-lp-layout > .vela-lp-heading,
+.vela-lp-layout > .vela-lp-presets { align-self: stretch; }
+.vela-lp-grid { display: grid; grid-template-columns: repeat(4, 24px); grid-auto-rows: 24px; gap: 4px; }
+.vela-lp-sq {
+    all: unset;
+    box-sizing: border-box;
+    border-radius: 4px;
+    background: var(--vela-hover);
+    border: 1px solid var(--vela-border-faint);
+    cursor: pointer;
+    transition: background var(--vela-dur-fast) var(--vela-ease), border-color var(--vela-dur-fast) var(--vela-ease);
+}
+.vela-lp-sq:hover { background: var(--vela-hover-strong); border-color: var(--vela-border-strong); }
+/* Selected/previewed squares \u2014 the shared monochrome selection chip. */
+.vela-lp-sq[data-on='1'] {
+    background: var(--vela-selected-bg);
+    border-color: var(--vela-selected-bg);
+}
+.vela-lp-presets { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
+.vela-lp-preset { all: unset; padding: 5px 8px; border-radius: 4px; cursor: pointer; color: var(--vela-fg-muted); font-size: 12px; white-space: nowrap; transition: transform 120ms var(--vela-ease); }
+.vela-lp-preset:hover { background: var(--vela-hover); }
+.vela-lp-preset:active { transform: scale(0.98); }
+.vela-lp-preset[data-checked='1'] { background: var(--vela-hover-strong); color: var(--vela-fg-bright); }
+.vela-lp-sync { display: flex; flex-direction: column; gap: 4px; min-width: 118px; }
+.vela-lp-sync-row { all: unset; display: flex; align-items: center; gap: 14px; padding: 6px 8px; border-radius: 5px; cursor: pointer; }
+.vela-lp-sync-row:hover { background: var(--vela-hover); }
+.vela-lp-sync-row .vela-lp-label { flex: 1 1 auto; }
+/* Toggle pill \u2014 same control language as the menu's switch rows, monochrome ON state. */
+.vela-lp-switch {
+    position: relative;
+    flex: none;
+    width: 34px;
+    height: 18px;
+    border-radius: 9px;
+    background: var(--vela-hover);
+    border: 1px solid var(--vela-border-soft);
+    transition: background 0.16s ease, border-color 0.16s ease;
+}
+.vela-lp-switch::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: var(--vela-fg-muted);
+    transition: transform 0.16s ease, background 0.16s ease;
+}
+.vela-lp-switch.on { background: var(--vela-selected-bg); border-color: var(--vela-selected-bg); }
+.vela-lp-switch.on::after { transform: translateX(16px); background: var(--vela-selected-fg); }
+`;
+var GRID = 4;
+var LayoutPicker = class {
+  constructor(opts) {
+    this.squares = [];
+    this.isOpen = false;
+    /** Hover preview (1-based rows/cols), null = show current shape. */
+    this.hover = null;
+    this.onDocPointerDown = (e) => {
+      const t = e.target;
+      if (t && (this.layer.contains(t) || this.opts.trigger.contains(t))) return;
+      this.close();
+    };
+    this.onDocKeydown = (e) => {
+      if (e.key === "Escape") this.close();
+    };
+    this.opts = opts;
+    this.doc = opts.host.ownerDocument;
+    injectStyles(STYLE_ID, CSS2, this.doc);
+    const doc = this.doc;
+    this.layer = doc.createElement("div");
+    this.layer.className = "vela-ui-layer vela-lp-layer";
+    this.layer.style.display = "none";
+    const panel = doc.createElement("div");
+    panel.className = "vela-lp";
+    this.layer.appendChild(panel);
+    const cols = doc.createElement("div");
+    cols.className = "vela-lp-cols";
+    panel.appendChild(cols);
+    const layoutCol = doc.createElement("div");
+    layoutCol.className = "vela-lp-layout";
+    const layoutHeading = doc.createElement("div");
+    layoutHeading.className = "vela-lp-heading";
+    const headingText = doc.createElement("span");
+    headingText.textContent = "Layout";
+    const badge = doc.createElement("span");
+    badge.className = "vela-lp-badge";
+    badge.textContent = "?";
+    layoutHeading.append(headingText, badge);
+    layoutCol.appendChild(layoutHeading);
+    this.infoTip = new Tooltip(badge, {
+      host: opts.host,
+      placement: "bottom",
+      content: () => this.tipNode()
+    });
+    const grid = doc.createElement("div");
+    grid.className = "vela-lp-grid";
+    for (let r = 0; r < GRID; r += 1) {
+      for (let c = 0; c < GRID; c += 1) {
+        const sq = doc.createElement("button");
+        sq.className = "vela-lp-sq";
+        sq.dataset.r = String(r);
+        sq.dataset.c = String(c);
+        sq.setAttribute("aria-label", `${c + 1} \xD7 ${r + 1}`);
+        this.squares.push(sq);
+        grid.appendChild(sq);
+      }
+    }
+    layoutCol.appendChild(grid);
+    this.presetsEl = doc.createElement("div");
+    this.presetsEl.className = "vela-lp-presets";
+    layoutCol.appendChild(this.presetsEl);
+    cols.appendChild(layoutCol);
+    const vsep = doc.createElement("div");
+    vsep.className = "vela-lp-vsep";
+    cols.appendChild(vsep);
+    const syncCol = doc.createElement("div");
+    const syncHeading = doc.createElement("div");
+    syncHeading.className = "vela-lp-heading";
+    syncHeading.textContent = "Sync";
+    syncCol.appendChild(syncHeading);
+    this.syncEl = doc.createElement("div");
+    this.syncEl.className = "vela-lp-sync";
+    syncCol.appendChild(this.syncEl);
+    cols.appendChild(syncCol);
+    grid.addEventListener("pointerdown", (e) => {
+      const sq = this.squareAt(e);
+      if (!sq) return;
+      e.preventDefault();
+      const { r, c } = this.squarePos(sq);
+      this.close();
+      this.opts.onSelectGrid(r + 1, c + 1);
+    });
+    grid.addEventListener("pointermove", (e) => {
+      const sq = this.squareAt(e);
+      if (!sq) return;
+      const { r, c } = this.squarePos(sq);
+      if (this.hover?.rows !== r + 1 || this.hover?.cols !== c + 1) {
+        this.hover = { rows: r + 1, cols: c + 1 };
+        this.render();
+      }
+    });
+    grid.addEventListener("pointerleave", () => {
+      if (this.hover) {
+        this.hover = null;
+        this.render();
+      }
+    });
+    opts.trigger.addEventListener("click", () => this.toggle());
+    opts.trigger.setAttribute("aria-haspopup", "true");
+    opts.trigger.setAttribute("aria-expanded", "false");
+    opts.host.appendChild(this.layer);
+  }
+  toggle() {
+    if (this.isOpen) this.close();
+    else this.open();
+  }
+  open() {
+    if (this.isOpen) return;
+    this.isOpen = true;
+    this.hover = null;
+    this.refresh();
+    this.layer.style.display = "";
+    this.position();
+    this.opts.trigger.setAttribute("aria-expanded", "true");
+    this.doc.addEventListener("pointerdown", this.onDocPointerDown, true);
+    this.doc.addEventListener("keydown", this.onDocKeydown, true);
+    this.opts.onOpenChange?.(true);
+  }
+  close() {
+    if (!this.isOpen) return;
+    this.isOpen = false;
+    this.layer.style.display = "none";
+    this.opts.trigger.setAttribute("aria-expanded", "false");
+    this.doc.removeEventListener("pointerdown", this.onDocPointerDown, true);
+    this.doc.removeEventListener("keydown", this.onDocKeydown, true);
+    this.opts.onOpenChange?.(false);
+  }
+  /** Re-read shape/presets/syncs and re-render (no-op while closed — `open` re-reads). */
+  refresh() {
+    if (!this.isOpen) return;
+    this.renderPresets();
+    this.renderSyncs();
+    this.render();
+  }
+  destroy() {
+    this.close();
+    this.infoTip.destroy();
+    this.layer.remove();
+  }
+  // ── internals ──
+  squareAt(e) {
+    const sq = e.target?.closest?.(".vela-lp-sq");
+    return sq instanceof HTMLButtonElement ? sq : null;
+  }
+  squarePos(sq) {
+    return { r: Number(sq.dataset.r), c: Number(sq.dataset.c) };
+  }
+  /** Help copy for the LAYOUT "?" badge. */
+  tipNode() {
+    const tip = this.doc.createElement("div");
+    tip.className = "vela-lp-tip";
+    tip.textContent = "Click a square to apply that columns \xD7 rows layout.";
+    return tip;
+  }
+  /** Project the interaction state onto the DOM (the hover/current rectangle). */
+  render() {
+    const preview = this.hover ?? this.opts.shape();
+    for (const sq of this.squares) {
+      const { r, c } = this.squarePos(sq);
+      const on = preview !== null && r < preview.rows && c < preview.cols;
+      if (on) sq.dataset.on = "1";
+      else delete sq.dataset.on;
+    }
+  }
+  renderPresets() {
+    const doc = this.doc;
+    this.presetsEl.replaceChildren();
+    const presets = this.opts.presets();
+    this.presetsEl.style.display = presets.length > 0 ? "" : "none";
+    for (const p of presets) {
+      const b = doc.createElement("button");
+      b.className = "vela-lp-preset";
+      b.textContent = p.label;
+      if (p.checked) b.dataset.checked = "1";
+      b.addEventListener("click", () => {
+        this.close();
+        this.opts.onSelectPreset(p.id);
+      });
+      this.presetsEl.appendChild(b);
+    }
+  }
+  renderSyncs() {
+    const doc = this.doc;
+    this.syncEl.replaceChildren();
+    for (const s of this.opts.syncs()) {
+      const row = doc.createElement("button");
+      row.className = "vela-lp-sync-row";
+      const label = doc.createElement("span");
+      label.className = "vela-lp-label";
+      label.textContent = s.label;
+      const pill = doc.createElement("span");
+      pill.className = "vela-lp-switch" + (s.checked ? " on" : "");
+      pill.setAttribute("aria-hidden", "true");
+      row.setAttribute("role", "switch");
+      row.setAttribute("aria-checked", String(s.checked));
+      row.append(label, pill);
+      row.addEventListener("click", () => {
+        this.opts.onToggleSync(s.id);
+        this.renderSyncs();
+      });
+      this.syncEl.appendChild(row);
+    }
+  }
+  /** Anchor under the trigger, clamped to the host's right edge. */
+  position() {
+    const hostRect = this.opts.host.getBoundingClientRect();
+    const trigRect = this.opts.trigger.getBoundingClientRect();
+    let left = trigRect.left - hostRect.left;
+    const top = trigRect.bottom - hostRect.top + 4;
+    const width = this.layer.offsetWidth;
+    if (left + width > hostRect.width - 8) left = Math.max(8, hostRect.width - 8 - width);
+    this.layer.style.left = `${left}px`;
+    this.layer.style.top = `${top}px`;
+  }
+};
+
 // src/chart-types/registry.ts
+function settingsRowVisible(when, bag) {
+  if (!when) return true;
+  const conds = Array.isArray(when) ? when : [when];
+  return conds.every((c) => c.anyOf ? c.anyOf.some((x) => x === bag[c.key]) : bag[c.key] === c.equals);
+}
 var registry2 = /* @__PURE__ */ new Map();
 function registerChartType(def) {
   registry2.set(def.id, def);
@@ -1844,6 +2179,44 @@ function basePaintingOf(style) {
   for (const t of chartTypes()) if (t.id === style) return t.basePainting ?? "candles";
   return "candles";
 }
+function hasOwnCandlePaint(style) {
+  if (BUILTIN_PRICE_STYLES.includes(style)) return false;
+  for (const t of chartTypes()) if (t.id === style) return (t.basePainting ?? "candles") === "candles";
+  return false;
+}
+function candleOverrideFor(style, bags) {
+  if (!hasOwnCandlePaint(style)) return null;
+  const bag = bags[style] ?? {};
+  const color = (v) => isColor(v) ? v : null;
+  const bool = (v) => isBool(v) ? v : null;
+  return {
+    upColor: color(bag.candleUpColor),
+    downColor: color(bag.candleDownColor),
+    bodyVisible: bool(bag.candleBodyVisible),
+    borderVisible: bool(bag.candleBorderVisible),
+    borderUpColor: color(bag.candleBorderUpColor),
+    borderDownColor: color(bag.candleBorderDownColor),
+    wickVisible: bool(bag.candleWickVisible),
+    wickUpColor: color(bag.candleWickUpColor),
+    wickDownColor: color(bag.candleWickDownColor)
+  };
+}
+function effectiveCandlePaint(base, override, themeUp, themeDown) {
+  if (!override) return { up: themeUp, down: themeDown, candle: base };
+  return {
+    up: override.upColor ?? themeUp,
+    down: override.downColor ?? themeDown,
+    candle: {
+      bodyVisible: override.bodyVisible ?? base.bodyVisible,
+      borderVisible: override.borderVisible ?? base.borderVisible,
+      borderUpColor: override.borderUpColor ?? base.borderUpColor,
+      borderDownColor: override.borderDownColor ?? base.borderDownColor,
+      wickVisible: override.wickVisible ?? base.wickVisible,
+      wickUpColor: override.wickUpColor ?? base.wickUpColor,
+      wickDownColor: override.wickDownColor ?? base.wickDownColor
+    }
+  };
+}
 function priceStyleIds() {
   const out = [...BUILTIN_PRICE_STYLES];
   for (const t of chartTypes()) if (!out.includes(t.id)) out.push(t.id);
@@ -1882,6 +2255,40 @@ function clampLevel(v) {
 function clampSpacing(v) {
   return v < 0.1 ? 0.1 : v > 10 ? 10 : v;
 }
+function factoryResetConfig(factory) {
+  const bag = {};
+  for (const t of chartTypes()) {
+    const section = t.settings;
+    if (!section) continue;
+    const defaults2 = {};
+    const addRows = (rows) => {
+      for (const r of rows ?? []) {
+        if (r.kind === "heading" || r.kind === "header") continue;
+        if (r.kind === "range") {
+          defaults2[r.minKey] = r.defval;
+          defaults2[r.maxKey] = r.defval;
+          continue;
+        }
+        defaults2[r.key] = r.defval;
+        if (r.kind === "toggle") for (const c of r.colors ?? []) defaults2[c.key] = c.defval;
+      }
+    };
+    for (const inst of section.instances ?? []) {
+      if (inst.enableKey) defaults2[inst.enableKey] = false;
+      addRows(inst.rows);
+    }
+    for (const sub of section.subsections ?? []) {
+      if (sub.enableKey) defaults2[sub.enableKey] = false;
+      addRows(sub.rows);
+    }
+    if (!section.instances) addRows(section.rows);
+    bag[t.id] = defaults2;
+  }
+  for (const [typeId, vals] of Object.entries(factory.chartTypes)) {
+    bag[typeId] = { ...bag[typeId] ?? {}, ...vals };
+  }
+  return { ...factory, chartTypes: bag };
+}
 function mergeConfig(base, patch) {
   const p = asObject(patch);
   const ctPatch = asObject(p.chartTypes);
@@ -2081,8 +2488,8 @@ function timeframeLabel(value) {
 }
 
 // src/widget/topbar.ts
-var STYLE_ID = "vela-topbar";
-var CSS2 = `
+var STYLE_ID2 = "vela-topbar";
+var CSS3 = `
 .vela-widget-topbar {
     display: flex;
     align-items: center;
@@ -2194,7 +2601,7 @@ function priceStyleIcon(id) {
 var Topbar = class {
   constructor(host, opts) {
     this.layoutButton = null;
-    this.layoutMenu = null;
+    this.layoutPicker = null;
     this.layoutId = null;
     this.tooltips = [];
     this.panelBtns = /* @__PURE__ */ new Map();
@@ -2214,7 +2621,7 @@ var Topbar = class {
     this.timeframe = opts.timeframe;
     this.priceStyle = opts.priceStyle;
     const doc = host.ownerDocument;
-    injectStyles(STYLE_ID, CSS2, doc);
+    injectStyles(STYLE_ID2, CSS3, doc);
     this.el = doc.createElement("div");
     this.el.className = "vela-widget-topbar";
     this.symbolEl = doc.createElement("button");
@@ -2271,19 +2678,16 @@ var Topbar = class {
     this.tooltips.push(new Tooltip(this.styleButton, { content: "Chart style", triggerId: "vela-topbar-style", host }));
     if (this.layoutButton && opts.layout) {
       this.tooltips.push(new Tooltip(this.layoutButton, { content: "Layout", triggerId: "vela-topbar-layout", host }));
-      this.layoutMenu = new Menu({
+      const layout = opts.layout;
+      this.layoutPicker = new LayoutPicker({
         trigger: this.layoutButton,
-        triggerId: "vela-topbar-layout",
         host,
-        items: this.layoutItems(),
-        onSelect: (id) => {
-          if (id.startsWith("toggle:")) {
-            opts.layout.onToggle?.(id.slice("toggle:".length));
-            this.layoutMenu?.setItems(this.layoutItems());
-            return;
-          }
-          opts.layout.onSelect(id);
-        }
+        shape: () => layout.shape(),
+        presets: () => layout.presets().map((p) => ({ ...p, checked: p.id === this.layoutId })),
+        onSelectGrid: (rows, cols) => layout.onSelectGrid(rows, cols),
+        onSelectPreset: (id) => layout.onSelectPreset(id),
+        syncs: () => layout.syncs(),
+        onToggleSync: (id) => layout.onToggleSync(id)
       });
     }
     this.tfMenu = new Menu({
@@ -2322,7 +2726,7 @@ var Topbar = class {
     if (!this.layoutButton) return;
     this.layoutId = id;
     this.renderLayoutButton(this.layoutButton.ownerDocument);
-    this.layoutMenu?.setItems(this.layoutItems());
+    this.layoutPicker?.refresh();
   }
   renderLayoutButton(doc) {
     if (!this.layoutButton) return;
@@ -2331,11 +2735,6 @@ var Topbar = class {
     else this.layoutButton.appendChild(doc.createTextNode(this.layoutId ?? ""));
     this.layoutButton.setAttribute("aria-label", `Layout \u2014 ${this.layoutId ?? ""}`);
   }
-  layoutItems() {
-    const presets = (this.opts.layout?.options() ?? []).map((l) => ({ id: l.id, label: l.label, checked: l.id === this.layoutId }));
-    const toggles = (this.opts.layout?.toggles?.() ?? []).map((t, i) => ({ id: `toggle:${t.id}`, label: t.label, checked: t.checked, toggle: true, separatorBefore: i === 0 }));
-    return [...presets, ...toggles];
-  }
   renderStyleButton(doc) {
     this.styleButton.replaceChildren();
     const icon2 = priceStyleIcon(this.priceStyle);
@@ -2400,7 +2799,7 @@ var Topbar = class {
     if (this.hairlineRaf) win?.cancelAnimationFrame(this.hairlineRaf);
     this.tfMenu.destroy();
     this.styleMenu.destroy();
-    this.layoutMenu?.destroy();
+    this.layoutPicker?.destroy();
     for (const t of [...this.tooltips, ...this.panelTooltips]) t.destroy();
     this.el.remove();
   }
@@ -2547,8 +2946,8 @@ var RANGE_PRESETS = [
   { id: "ALL", tf: "W", preset: "ALL", bars: 5e3 }
   // everything the provider serves
 ];
-var STYLE_ID2 = "vela-widget-bottombar";
-var CSS3 = `
+var STYLE_ID3 = "vela-widget-bottombar";
+var CSS4 = `
 .vela-widget-bottombar {
     display: flex;
     align-items: center;
@@ -2623,7 +3022,7 @@ var Bottombar = class {
     this.timer = null;
     this.timezone = opts.timezone;
     const doc = host.ownerDocument;
-    injectStyles(STYLE_ID2, CSS3, doc);
+    injectStyles(STYLE_ID3, CSS4, doc);
     this.el = doc.createElement("div");
     this.el.className = "vela-widget-bottombar";
     for (const preset of RANGE_PRESETS) {
@@ -8579,11 +8978,11 @@ function treeIsEmpty(panes) {
 }
 
 // src/widget/side-panel.ts
-var STYLE_ID3 = "vela-widget-sidepanel";
+var STYLE_ID4 = "vela-widget-sidepanel";
 var DEFAULT_PANEL_WIDTH = 280;
 var DEFAULT_PANEL_MIN_WIDTH = 200;
 var DEFAULT_PANEL_MAX_WIDTH = 640;
-var CSS4 = `
+var CSS5 = `
 .vela-panel[hidden] { display: none !important; }
 .vela-panel {
     position: relative;
@@ -8672,7 +9071,7 @@ var SidePanel = class {
      *  a programmatic {@link setWidth}, so restoring a persisted width raises no change. */
     this.onWidthChange = null;
     const doc = host.ownerDocument;
-    injectStyles(STYLE_ID3, CSS4, doc);
+    injectStyles(STYLE_ID4, CSS5, doc);
     this.minWidth = opts.resizable ? opts.minWidth ?? DEFAULT_PANEL_MIN_WIDTH : 1;
     this.maxWidth = opts.resizable ? opts.maxWidth ?? DEFAULT_PANEL_MAX_WIDTH : Number.POSITIVE_INFINITY;
     this.declaredWidth = clampPanelWidth(opts.width ?? DEFAULT_PANEL_WIDTH, this.minWidth, this.maxWidth);
@@ -8781,8 +9180,8 @@ var SidePanel = class {
 };
 
 // src/widget/object-tree.ts
-var STYLE_ID4 = "vela-widget-objtree";
-var CSS5 = `
+var STYLE_ID5 = "vela-widget-objtree";
+var CSS6 = `
 /* One pane's block. The transparent border reserves the drop-target outline. */
 .vela-ot-pane {
     border: 1px solid transparent;
@@ -9020,7 +9419,7 @@ var ObjectTree = class extends SidePanel {
     this.menu = null;
     this.menuActions = /* @__PURE__ */ new Map();
     this.drag = null;
-    injectStyles(STYLE_ID4, CSS5, host.ownerDocument);
+    injectStyles(STYLE_ID5, CSS6, host.ownerDocument);
     this.body.addEventListener("contextmenu", (e) => this.onContextMenu(e));
     this.body.addEventListener("pointerdown", (e) => this.onPointerDown(e));
   }
@@ -9999,8 +10398,8 @@ var ObjectTree = class extends SidePanel {
 };
 
 // src/widget/data-window.ts
-var STYLE_ID5 = "vela-widget-datawindow";
-var CSS6 = `
+var STYLE_ID6 = "vela-widget-datawindow";
+var CSS7 = `
 .vela-dw-group {
     padding: 10px 8px 4px;
     margin-top: 4px;
@@ -10059,7 +10458,7 @@ var DataWindow = class extends SidePanel {
     super(host, "Data window", "vela-dw");
     this.chart = null;
     this.unsubs = [];
-    injectStyles(STYLE_ID5, CSS6, host.ownerDocument);
+    injectStyles(STYLE_ID6, CSS7, host.ownerDocument);
   }
   toggle(open = this.el.hidden) {
     super.toggle(open);
@@ -10296,8 +10695,8 @@ function filterSymbols(list, query, limit = 100) {
   }
   return [...prefix, ...substr, ...desc, ...venue].slice(0, limit);
 }
-var STYLE_ID6 = "vela-widget-symbolpicker";
-var CSS7 = `
+var STYLE_ID7 = "vela-widget-symbolpicker";
+var CSS8 = `
 .vela-sp-searchrow {
     display: flex;
     align-items: center;
@@ -10387,7 +10786,7 @@ var SymbolPicker = class {
     this.seed = "";
     this.activeTab = "All";
     const doc = (opts.host ?? document.body).ownerDocument;
-    injectStyles(STYLE_ID6, CSS7, doc);
+    injectStyles(STYLE_ID7, CSS8, doc);
     this.input = doc.createElement("input");
     this.input.className = "vela-sp-input";
     this.input.placeholder = "Search symbol\u2026";
@@ -10521,8 +10920,8 @@ var SymbolPicker = class {
 };
 
 // src/widget/indicator-picker.ts
-var STYLE_ID7 = "vela-widget-indpicker";
-var CSS8 = `
+var STYLE_ID8 = "vela-widget-indpicker";
+var CSS9 = `
 .vela-ip-searchrow {
     display: flex;
     align-items: center;
@@ -10596,7 +10995,7 @@ var IndicatorPicker = class {
     this.isOpen = false;
     this.opts = opts;
     const doc = (opts.host ?? document.body).ownerDocument;
-    injectStyles(STYLE_ID7, CSS8, doc);
+    injectStyles(STYLE_ID8, CSS9, doc);
     this.search = doc.createElement("input");
     this.search.className = "vela-ip-search";
     this.search.placeholder = "Search\u2026";
@@ -10724,8 +11123,8 @@ var IndicatorPicker = class {
 };
 
 // src/widget/timeframe-quick.ts
-var STYLE_ID8 = "vela-widget-tfquick";
-var CSS9 = `
+var STYLE_ID9 = "vela-widget-tfquick";
+var CSS10 = `
 .vela-tq-input {
     display: block;
     margin: 0 auto;
@@ -10748,7 +11147,7 @@ var CSS9 = `
 var TimeframeQuick = class {
   constructor(opts) {
     const doc = (opts.host ?? document.body).ownerDocument;
-    injectStyles(STYLE_ID8, CSS9, doc);
+    injectStyles(STYLE_ID9, CSS10, doc);
     this.input = doc.createElement("input");
     this.input.className = "vela-tq-input";
     this.input.setAttribute("spellcheck", "false");
@@ -10804,8 +11203,8 @@ var TimeframeQuick = class {
 };
 
 // src/widget/shortcuts-help.ts
-var STYLE_ID9 = "vela-widget-shortcuts";
-var CSS10 = `
+var STYLE_ID10 = "vela-widget-shortcuts";
+var CSS11 = `
 .vela-sh-cat {
     color: var(--vela-fg-muted);
     font-size: var(--vela-font-size-sm);
@@ -10830,7 +11229,7 @@ var ShortcutsHelp = class {
   constructor(keymap, host, onOpenChange) {
     this.keymap = keymap;
     const doc = (host ?? document.body).ownerDocument;
-    injectStyles(STYLE_ID9, CSS10, doc);
+    injectStyles(STYLE_ID10, CSS11, doc);
     this.list = doc.createElement("div");
     this.dialog = new Dialog({
       title: "Keyboard shortcuts",
@@ -10900,8 +11299,8 @@ var ShortcutsHelp = class {
 };
 
 // src/widget/toast.ts
-var STYLE_ID10 = "vela-widget-toast";
-var CSS11 = `
+var STYLE_ID11 = "vela-widget-toast";
+var CSS12 = `
 .vela-toast {
     position: absolute;
     left: 50%;
@@ -10931,7 +11330,7 @@ var CSS11 = `
 var Toast = class {
   constructor(host) {
     this.timer = null;
-    injectStyles(STYLE_ID10, CSS11, host.ownerDocument);
+    injectStyles(STYLE_ID11, CSS12, host.ownerDocument);
     this.el = host.ownerDocument.createElement("div");
     this.el.className = "vela-toast";
     host.appendChild(this.el);
@@ -11188,6 +11587,8 @@ var DrawingToolbar = class {
     this.eraserActive = false;
     this.stayBtn = null;
     this.stayActive = false;
+    this.syncBtn = null;
+    this.syncActive = false;
     this.collapseBtn = null;
     this.collapsed = false;
     this.visible = false;
@@ -11204,6 +11605,7 @@ var DrawingToolbar = class {
     this.dock = options.dock ?? "absolute";
     this.onCollapse = options.onCollapse ?? (() => {
     });
+    this.onDrawingsSync = options.onDrawingsSync ?? null;
     ensureStyles();
     this.root = document.createElement("div");
     this.root.className = "vela-dtb";
@@ -11302,6 +11704,10 @@ var DrawingToolbar = class {
     this.root.appendChild(this.makeMagnetCell());
     this.stayBtn = this.makeButton(STAY_ICON, "Stay in drawing mode", () => this.toggleStay());
     this.root.appendChild(this.stayBtn);
+    if (this.onDrawingsSync) {
+      this.syncBtn = this.makeButton(SYNC_ICON, "Sync drawings on all charts", () => this.toggleDrawingsSync());
+      this.root.appendChild(this.syncBtn);
+    }
     this.collapseBtn = this.makeButton(COLLAPSE_ICON, "Collapse toolbar", () => this.toggleCollapsed());
     this.collapseBtn.classList.add("vela-dtb-collapse");
     this.root.appendChild(this.collapseBtn);
@@ -11309,6 +11715,7 @@ var DrawingToolbar = class {
     this.paintEraser();
     this.paintMagnet();
     this.paintStay();
+    this.paintDrawingsSync();
     this.paintCollapse();
     this.highlight();
   }
@@ -11359,7 +11766,7 @@ var DrawingToolbar = class {
       cell.appendChild(arrow);
     }
     this.tipDisposers.push(
-      attachChromeTooltip(cell, { host: this.host, theme: () => this.theme, text: () => this.tipText.get(cell) ?? label, placement: "right", delayMs: 2e3 })
+      attachChromeTooltip(cell, { host: this.host, theme: () => this.theme, text: () => this.tipText.get(cell) ?? label, placement: "right" })
     );
     return { cell, icon: icon2, arrow };
   }
@@ -11469,6 +11876,23 @@ var DrawingToolbar = class {
     b.dataset.active = this.stayActive ? "1" : "";
     b.style.opacity = this.stayActive ? "1" : "0.5";
   }
+  /** Toggle drawings sync on/off and notify the host. */
+  toggleDrawingsSync() {
+    this.syncActive = !this.syncActive;
+    this.onDrawingsSync?.(this.syncActive);
+    this.paintDrawingsSync();
+  }
+  /** Reflect drawings sync externally (e.g. set through the API) without notifying back. */
+  setDrawingsSyncMode(on) {
+    this.syncActive = on;
+    this.paintDrawingsSync();
+  }
+  paintDrawingsSync() {
+    const b = this.syncBtn;
+    if (!b) return;
+    b.dataset.active = this.syncActive ? "1" : "";
+    b.style.opacity = this.syncActive ? "1" : "0.5";
+  }
   // ── flyout ──
   /** Create the positioned flyout panel anchored to a cell, register it as open, and start the
    *  outside-dismiss. Callers fill it with items. */
@@ -11628,6 +12052,8 @@ var DrawingToolbar = class {
     const type = this.lastUsed.get(group.id) ?? group.tools[0]?.type;
     const tool = group.tools.find((t) => t.type === type) ?? group.tools[0];
     iconBtn.innerHTML = hitHtml(tool?.icon ?? "");
+    const cell = this.groupCells.get(group.id);
+    if (cell) this.tipText.set(cell, tool?.label ?? group.label);
   }
   /** Reconcile active tints from state (armed group / open flyout / cursor / modes). Active is a
    *  `data-active` attribute the stylesheet paints — no inline background, so hover never sticks. */
@@ -11651,7 +12077,7 @@ var DrawingToolbar = class {
     this.tipText.set(btn, title);
     if (icon2) btn.innerHTML = hitHtml(icon2);
     this.tipDisposers.push(
-      attachChromeTooltip(btn, { host: this.host, theme: () => this.theme, text: () => this.tipText.get(btn) ?? title, placement: "right", delayMs: 2e3 })
+      attachChromeTooltip(btn, { host: this.host, theme: () => this.theme, text: () => this.tipText.get(btn) ?? title, placement: "right" })
     );
     btn.addEventListener("click", onClick);
     return btn;
@@ -11663,13 +12089,13 @@ var DrawingToolbar = class {
   }
 };
 var MAGNET_ID = "__magnet__";
-var STYLE_ID11 = "vela-drawing-toolbar-styles";
+var STYLE_ID12 = "vela-drawing-toolbar-styles";
 function ensureStyles() {
   if (typeof document === "undefined") return;
-  let s = document.getElementById(STYLE_ID11);
+  let s = document.getElementById(STYLE_ID12);
   if (!s) {
     s = document.createElement("style");
-    s.id = STYLE_ID11;
+    s.id = STYLE_ID12;
     document.head.appendChild(s);
   }
   s.textContent = `
@@ -11717,6 +12143,7 @@ var COLLAPSE_ICON = icon("chevrons-left");
 var EXPAND_ICON = icon("chevrons-right");
 var MAGNET_ICON = icon("magnet");
 var STAY_ICON = icon("pen-lock");
+var SYNC_ICON = icon("pen-sync");
 var ERASER_ICON = icon("eraser");
 var ARROW_ICON2 = icon("chevron-right");
 var CHECK_ICON = icon("check");
@@ -11742,8 +12169,8 @@ var LUXALGO_WORDMARK_SVG = '<svg viewBox="0 0 964 252" aria-hidden="true"><path
 
 // src/renderers/native/chrome/AttributionMark.ts
 var ATTRIBUTION_URL = "https://luxalgo.com/vela";
-var STYLE_ID12 = "vela-attribution-styles";
-var CSS12 = `
+var STYLE_ID13 = "vela-attribution-styles";
+var CSS13 = `
 .vela-attribution {
     text-decoration: none;
     display: flex;
@@ -11790,13 +12217,13 @@ var CSS12 = `
     transform: translateX(0);
 }`;
 function ensureStyles2(doc) {
-  let s = doc.getElementById(STYLE_ID12);
+  let s = doc.getElementById(STYLE_ID13);
   if (!s) {
     s = doc.createElement("style");
-    s.id = STYLE_ID12;
+    s.id = STYLE_ID13;
     doc.head.appendChild(s);
   }
-  s.textContent = CSS12;
+  s.textContent = CSS13;
 }
 function attributionMarkColor(background) {
   return isDarkColor(background) ? "#ffffff" : "#000000";
@@ -12361,6 +12788,11 @@ var DrawingController = class {
   setToolbar(option) {
     this.port?.setToolbar(buildToolbar(option).definition);
   }
+  /** Display (or clear) another chart's in-progress placement as a ghost — silently
+   *  inert on a renderer without the optional `setExternalGhost` seam. */
+  setExternalGhost(doc) {
+    this.port?.setExternalGhost?.(doc);
+  }
   /** Push per-tool shortcut hints (pre-formatted display strings) to the toolbar flyouts. */
   setToolShortcuts(map) {
     this.port?.setToolShortcuts?.(map);
@@ -12591,6 +13023,9 @@ var DrawingController = class {
       case "arm":
         this.setTool(i.type);
         break;
+      case "draft":
+        this.events.emit("drawing:draft", { doc: i.doc });
+        break;
       case "create": {
         const before = this.store.serialize();
         const last = this.lastStyle.get(i.doc.type);
@@ -12762,7 +13197,7 @@ function sanitizeSync(raw) {
   if (raw == null || typeof raw !== "object") return null;
   const s = raw;
   const out = {};
-  for (const kind of ["viewport", "symbol", "timeframe", "crosshair"]) {
+  for (const kind of ["viewport", "symbol", "timeframe", "crosshair", "drawings"]) {
     const v = s[kind];
     if (v === true) out[kind] = true;
     else if (v != null && typeof v === "object") {
@@ -14856,6 +15291,14 @@ var DrawingsControl = class {
     if (this.ok("setToolShortcuts")) this.ctrl.setToolShortcuts(map);
     return this;
   }
+  /** Display another chart's in-progress placement as a GHOST at reduced opacity
+   *  (`null` clears it) — how a multi-chart host mirrors `drawing:draft` onto linked
+   *  charts. Never a real drawing: no store entry, no selection, no persistence.
+   *  Silently inert on a renderer without the optional seam. */
+  setExternalGhost(doc) {
+    this.ctrl.setExternalGhost(doc);
+    return this;
+  }
   /** Create a drawing programmatically (no clicking). Returns it, or null if unsupported. */
   add(type, init = {}) {
     if (!this.ok("add")) return null;
@@ -16201,13 +16644,13 @@ var ICONS = {
   maximize: icon("maximize"),
   restore: icon("restore")
 };
-var STYLE_ID13 = "vela-pane-controls";
+var STYLE_ID14 = "vela-pane-controls";
 var ICON_PX = 12;
 var CLUSTER_PILL = "rgba(0,0,0,0.28)";
 function ensureStyles3() {
-  if (typeof document === "undefined" || document.getElementById(STYLE_ID13)) return;
+  if (typeof document === "undefined" || document.getElementById(STYLE_ID14)) return;
   const st = document.createElement("style");
-  st.id = STYLE_ID13;
+  st.id = STYLE_ID14;
   st.textContent = `
 .vela-pc-btn{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:var(--vela-radius-sm);background:transparent;line-height:0;font-size:${ICON_PX}px;color:var(--vela-fg-muted);}
 .vela-pc-btn svg{display:block;}
@@ -16899,6 +17342,9 @@ var SceneGraph = class {
     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`). */
@@ -18128,14 +18574,15 @@ var WebGL2Backend = class {
   emitCandles(b, scene, bars, i0, i1, coords, pane, theme, barColors) {
     const spacing = coords.bodySpacing();
     const tier = candleTier(spacing);
+    const paint = effectiveCandlePaint(scene.style.candle, scene.candleOverride, theme.upColor, theme.downColor);
     if (tier === "aggregate") {
-      this.emitCandlesAggregated(b, bars, i0, i1, coords, pane, theme.upColor, theme.downColor, barColors);
+      this.emitCandlesAggregated(b, bars, i0, i1, coords, pane, paint.up, paint.down, barColors);
       return;
     }
     const drawBody = tier === "full";
-    const up = theme.upColor;
-    const down = theme.downColor;
-    const cs = scene.style.candle;
+    const up = paint.up;
+    const down = paint.down;
+    const cs = paint.candle;
     const fading = this.candleStructureAlpha > this.candleBodyAlpha + 1e-3;
     for (let i = i0; i <= i1; i += 1) {
       const bar = bars[i];
@@ -18727,7 +19174,6 @@ function effectiveSnapMode(momentaryOverride, sticky) {
   return momentaryOverride ? "strong" : sticky;
 }
 var InputController = class {
-  // the last middle press deleted a drawing (suppress autoscroll/paste)
   constructor(deps) {
     this.deps = deps;
     /** When true (the default), wheel-zoom pins the right edge instead of the bar
@@ -18755,9 +19201,23 @@ var InputController = class {
     this.vx = 0;
     // smoothed pointer velocity, px/ms
     this.middleDeleted = false;
+    // the last middle press deleted a drawing (suppress autoscroll/paste)
+    // Last cursor position over the element (NaN once it leaves) — lets a modifier
+    // press/release re-shape the drawings preview with the pointer stationary.
+    this.cursorX = NaN;
+    this.cursorY = NaN;
     this.onMiddleGuard = (e) => {
       if (e.button === 1 && this.middleDeleted) e.preventDefault();
     };
+    /** A modifier press/release with the pointer stationary: re-issue the last cursor
+     *  position so the placing ghost / drag preview reflects the new state immediately
+     *  (Shift's 45° angle lock, Ctrl/Cmd's momentary strong magnet). */
+    this.onModifier = (e) => {
+      if (e.repeat || e.key !== "Shift" && e.key !== "Control" && e.key !== "Meta") return;
+      if (Number.isNaN(this.cursorX)) return;
+      if (this.dragging && this.region !== "drawing") return;
+      this.deps.drawingsPointerMove?.(this.cursorX, this.cursorY, this.snapMode(e), e.shiftKey);
+    };
     this.onDown = (e) => {
       if (e.button === 1) {
         const { x: x2, y: y2 } = this.local(e);
@@ -18799,6 +19259,8 @@ var InputController = class {
     };
     this.onMove = (e) => {
       const { x, y } = this.local(e);
+      this.cursorX = x;
+      this.cursorY = y;
       if (this.dragging) {
         if (this.region === "price") {
           if (Math.abs(y - this.startY) > DRAG_SLOP2) this.moved = true;
@@ -18812,7 +19274,7 @@ var InputController = class {
           this.deps.apply({ barSpacing, rightOffset: this.startRightOffset });
         } else if (this.region === "drawing") {
           if (Math.abs(x - this.startX) > DRAG_SLOP2 || Math.abs(y - this.startY) > DRAG_SLOP2) this.moved = true;
-          this.deps.drawingsPointerMove?.(x, y, this.snapMode(e));
+          this.deps.drawingsPointerMove?.(x, y, this.snapMode(e), e.shiftKey);
         } else {
           const coords = this.deps.getCoords();
           const vp = coords.getViewport();
@@ -18835,7 +19297,7 @@ var InputController = class {
         const drawCursor = this.deps.drawingsCursor?.(x, y);
         const r = this.regionAt(x, y);
         this.el.style.cursor = drawCursor ?? (r === "price" ? "ns-resize" : r === "time" ? "ew-resize" : r === "separator" ? "row-resize" : "");
-        this.deps.drawingsPointerMove?.(x, y, this.snapMode(e));
+        this.deps.drawingsPointerMove?.(x, y, this.snapMode(e), e.shiftKey);
       }
       this.deps.onPointerMove(x, y);
     };
@@ -18860,6 +19322,8 @@ var InputController = class {
       }
     };
     this.onLeave = () => {
+      this.cursorX = NaN;
+      this.cursorY = NaN;
       this.deps.onPointerMove(null, null);
     };
     this.onDblClick = (e) => {
@@ -18898,10 +19362,16 @@ var InputController = class {
     el.addEventListener("wheel", this.onWheel, { passive: false });
     el.addEventListener("mousedown", this.onMiddleGuard);
     el.addEventListener("auxclick", this.onMiddleGuard);
+    const win = el.ownerDocument?.defaultView;
+    win?.addEventListener("keydown", this.onModifier);
+    win?.addEventListener("keyup", this.onModifier);
   }
   detach() {
     const el = this.el;
     if (!el) return;
+    const win = el.ownerDocument?.defaultView;
+    win?.removeEventListener("keydown", this.onModifier);
+    win?.removeEventListener("keyup", this.onModifier);
     el.removeEventListener("pointerdown", this.onDown);
     el.removeEventListener("pointermove", this.onMove);
     el.removeEventListener("pointerup", this.onUp);
@@ -19319,12 +19789,13 @@ var Canvas2dBackend = class {
   drawCandles(ctx, scene, bars, i0, i1, coords, pane, theme, barColors) {
     const spacing = coords.bodySpacing();
     const tier = candleTier(spacing);
+    const paint = effectiveCandlePaint(scene.style.candle, scene.candleOverride, theme.upColor, theme.downColor);
     if (tier === "aggregate") {
-      this.drawCandlesAggregated(ctx, bars, i0, i1, coords, pane, theme.upColor, theme.downColor, barColors);
+      this.drawCandlesAggregated(ctx, bars, i0, i1, coords, pane, paint.up, paint.down, barColors);
       return;
     }
     const drawBody = tier === "full";
-    const cs = scene.style.candle;
+    const cs = paint.candle;
     const fading = this.candleStructureAlpha > this.candleBodyAlpha + 1e-3;
     for (let i = i0; i <= i1; i += 1) {
       const b = bars[i];
@@ -19332,7 +19803,7 @@ var Canvas2dBackend = class {
       const g = candleGeometry(coords.logicalToX(i), spacing, coords.dpr, this.candleBodyScale);
       const x = g.center;
       const up = b.close >= b.open;
-      const dir = up ? theme.upColor : theme.downColor;
+      const dir = up ? paint.up : paint.down;
       const bc = barColors.get(b.time);
       const color = bc ?? dir;
       let top = 0;
@@ -20443,7 +20914,7 @@ var ChromeRenderer = class {
   constructor() {
     this.canvas = null;
     this.ctx = null;
-    // The color for axis tick labels — the stable chrome surface text, set each frame in render().
+    // The color for axis tick labels — the host-passed surface text, set each frame in render().
     this.axisTextColor = DARK_THEME.textColor;
     // Shared Pine-drawing renderer (line/box/label/polyline/linefill); widthCache persists.
     this.drawScene = new DrawingSceneRenderer({ timeToLogical: () => 0, barAt: () => null, theme: {} });
@@ -20475,8 +20946,8 @@ var ChromeRenderer = class {
     return dr;
   }
   /** Clear the chrome canvas and draw drawings + axes + current-price line.
-   *  `surface` (background + text) paints the axis-scale gutters so they keep the app
-   *  chrome color and stay readable, rather than tracking the user-editable plot cosmetics.
+   *  `surface` (background + text) paints the axis-scale gutters — the host passes the live
+   *  chart background so the scales read as part of the plot, with contrast-corrected text.
    *  Falls back to the theme's own colors when no surface is supplied. */
   render(scene, coords, theme, surface) {
     const ctx = this.ctx;
@@ -21110,11 +21581,11 @@ function buildColorPicker(color, theme, onChange) {
 
 // src/renderers/native/chrome/ColorField.ts
 var CHECKER2 = transparencyChecker(8);
-var STYLE_ID14 = "vela-color-field";
+var STYLE_ID15 = "vela-color-field";
 function ensureStyles4() {
-  if (typeof document === "undefined" || document.getElementById(STYLE_ID14)) return;
+  if (typeof document === "undefined" || document.getElementById(STYLE_ID15)) return;
   const st = document.createElement("style");
-  st.id = STYLE_ID14;
+  st.id = STYLE_ID15;
   st.textContent = `
 .vela-color-field{width:24px;height:24px;padding:2px;border:1px solid var(--vela-border);border-radius:0;background:var(--vela-surface-sunken);cursor:pointer;display:inline-flex;flex:none;}
 .vela-color-field:hover{border-color:var(--vela-fg-muted);}
@@ -21243,6 +21714,37 @@ function ensureControlStyles() {
 .vela-sd-btn:hover{background:var(--vela-hover);border-color:var(--vela-border-strong);color:var(--vela-fg-bright);}
 .vela-sd-close{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--vela-fg-muted);line-height:0;width:30px;height:30px;border-radius:var(--vela-radius-sm);transition:background var(--vela-dur-fast) ease,color var(--vela-dur-fast) ease;}
 .vela-sd-close:hover{background:var(--vela-hover);color:var(--vela-fg-bright);}
+/* Rows/blocks gated away by chart-type conditions, TOC filters, or the instance strip.
+   !important: the pane grid rewrites inline display ('contents') AFTER the initial
+   visibility pass, so a class must win. */
+.vela-sd-hide{display:none !important;}
+/* Indented rail sub-entry (a chart-type section's subsection tab). */
+.vela-sd-tab-sub{padding-left:28px;font-weight:600;font-size:12px;}
+/* Instance strip: a tab per present instance (label, \u2715 on the active removable one)
+   and a dashed + that turns on the next absent instance. The rule under it separates
+   the strip from the instance's TOC + rows area. */
+.vela-sd-itabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:14px 0 0;padding-bottom:12px;border-bottom:1px solid var(--vela-border);}
+.vela-sd-itab{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px;background:transparent;border:1px solid var(--vela-border);border-radius:var(--vela-radius-md);color:var(--vela-fg-muted);font-family:inherit;font-size:var(--vela-font-size-md);font-weight:600;cursor:pointer;transition:background var(--vela-dur-fast) ease,color var(--vela-dur-fast) ease,border-color var(--vela-dur-fast) ease;}
+.vela-sd-itab:hover{background:var(--vela-hover);color:var(--vela-fg-bright);}
+.vela-sd-itab.on{background:var(--vela-active);color:var(--vela-fg-bright);border-color:var(--vela-border-strong);}
+.vela-sd-ix{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:-4px;border-radius:var(--vela-radius-sm);color:var(--vela-fg-muted);font-size:10px;line-height:1;}
+.vela-sd-ix:hover{background:var(--vela-hover);color:var(--vela-fg-bright);}
+.vela-sd-itab-add{border-style:dashed;min-width:30px;justify-content:center;padding:0;}
+/* Structured pane: group TOC column + rows column, TOP-ALIGNED (the shared padding-top
+   lives on the wrap, never on one column). The TOC sticks while the pane scrolls; the
+   vertical rule sits on the rows column so it spans the full content height. When every
+   group gates out the TOC hides and .no-toc drops the rule with it. */
+.vela-sd-struct{display:flex;align-items:flex-start;padding-top:14px;}
+.vela-sd-toc{position:sticky;top:0;flex:0 0 auto;min-width:104px;display:flex;flex-direction:column;gap:2px;padding:2px 14px 0 0;}
+.vela-sd-struct>[data-sd-rows-host]{border-left:1px solid var(--vela-border);padding-left:18px;}
+.vela-sd-struct.no-toc>[data-sd-rows-host]{border-left:none;padding-left:0;}
+.vela-sd-toc-btn{text-align:left;padding:6px 10px;background:transparent;border:none;border-radius:var(--vela-radius-sm);color:var(--vela-fg-muted);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:background var(--vela-dur-fast) ease,color var(--vela-dur-fast) ease;}
+.vela-sd-toc-btn:hover{background:var(--vela-hover);color:var(--vela-fg-bright);}
+.vela-sd-toc-btn.on{background:var(--vela-active);color:var(--vela-fg-bright);}
+/* Soft-disable: a subsection's enableKey is off \u2014 rows stay visible (browseable) but
+   muted and non-interactive. Applied to each row's children so it survives display:contents;
+   !important beats the inline opacity on labels. */
+.vela-sd-soft>*{opacity:0.4 !important;pointer-events:none !important;}
 `;
   document.head.appendChild(st);
 }
@@ -21263,6 +21765,10 @@ var SettingsDialog = class {
     this.themeControl = null;
     /** The built tabs, by title — how `showSection` reaches a pane while the dialog is open. */
     this.tabs = [];
+    /** Active instance-strip tab per chart type — remembered across dialog rebuilds. */
+    this.typeActiveInstance = /* @__PURE__ */ new Map();
+    /** Active TOC group per structured pane (`<typeId>/<pane>` → group label). */
+    this.typeActiveGroup = /* @__PURE__ */ new Map();
     /** The tab currently shown, so a theme change (which rebuilds) lands back on it. */
     this.activeSection = null;
     if (getComputedStyle(container).position === "static") container.style.position = "relative";
@@ -21424,6 +21930,29 @@ var SettingsDialog = class {
     baseline.append(this.numberRow("Width", config.baseline.width, 1, 10, 1, (v) => this.emit({ baseline: { width: v } })));
     groups.baseline = baseline;
     body.append(baseline);
+    for (const def of chartTypes()) {
+      if (!hasOwnCandlePaint(def.id)) continue;
+      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();
+      g.append(this.sectionTitle("Candles"));
+      g.append(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), [
+        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), [
+        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 } })));
+      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 } })));
@@ -21438,7 +21967,16 @@ var SettingsDialog = class {
         }
       }
     };
+    const renderChartTypeSections = (placement) => {
+      for (const def of chartTypes()) {
+        const typeSettings = def.settings;
+        if (!typeSettings) continue;
+        if ((typeSettings.placement ?? "end") !== placement) 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"));
@@ -21479,27 +22017,7 @@ var SettingsDialog = class {
       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")));
     }
-    for (const def of chartTypes()) {
-      const typeSettings = def.settings;
-      if (!typeSettings) continue;
-      const marker = this.section(typeSettings.title);
-      marker.dataset.sdStyle = def.id;
-      marker.dataset.sdVisibility = typeSettings.visibility ?? "active";
-      body.append(marker);
-      const values = config.chartTypes[def.id] ?? {};
-      for (const r of typeSettings.rows) {
-        const current2 = values[r.key];
-        if (r.kind === "toggle") {
-          body.append(this.boolRow(r.label, typeof current2 === "boolean" ? current2 : r.defval, (v) => this.emitType(def.id, r.key, v)));
-        } else if (r.kind === "number") {
-          body.append(this.numberRow(r.label, typeof current2 === "number" ? current2 : r.defval, r.min ?? 0, r.max ?? 1e6, r.step ?? 1, (v) => this.emitType(def.id, r.key, v)));
-        } else if (r.kind === "color") {
-          body.append(this.colorRow(r.label, typeof current2 === "string" ? current2 : r.defval, (v) => this.emitType(def.id, r.key, v)));
-        } else {
-          body.append(this.selectRow(r.label, typeof current2 === "string" ? current2 : r.defval, [...r.options], (v) => this.emitType(def.id, r.key, v)));
-        }
-      }
-    }
+    renderChartTypeSections("end");
     renderHostSections("end");
     const shell = document.createElement("div");
     shell.style.cssText = "display:flex;min-height:360px;max-height:calc(70vh - 100px);flex:1 1 auto;";
@@ -21518,7 +22036,7 @@ var SettingsDialog = class {
         const tab = document.createElement("button");
         tab.type = "button";
         tab.textContent = title;
-        tab.className = "vela-sd-tab";
+        tab.className = "vela-sd-tab" + (child.dataset.sdSub !== void 0 ? " vela-sd-tab-sub" : "");
         panes.push({ title, el, tab, style: child.dataset.sdStyle, visibility: child.dataset.sdVisibility });
         current = el;
         child.remove();
@@ -21558,7 +22076,14 @@ var SettingsDialog = class {
     scrim.appendChild(dlg);
     this.container.appendChild(scrim);
     this.root = scrim;
-    for (const p of panes) this.layoutSettingsGrids(p.el, dlg);
+    for (const p of panes) {
+      const hosts = [...p.el.querySelectorAll("[data-sd-rows-host]")];
+      if (hosts.length === 0) {
+        this.layoutSettingsGrids(p.el, dlg);
+        continue;
+      }
+      for (const h of hosts) this.layoutSettingsGrids(h, dlg);
+    }
   }
   close() {
     closeColorPopover();
@@ -21588,6 +22113,291 @@ var SettingsDialog = class {
     el.textContent = text;
     return el;
   }
+  /**
+   * One chart type's settings tab (and its subsection tabs), appended to the linear
+   * `body` for the pane splitter to file. One live values BAG serves the whole section
+   * — instances and subsections share the per-type store, so a `when` gate anywhere
+   * can reference a key edited anywhere else; every edit runs every registered
+   * refresher.
+   */
+  chartTypeSection(typeId, section, config, body) {
+    const marker = this.section(section.title);
+    marker.dataset.sdStyle = typeId;
+    marker.dataset.sdVisibility = section.visibility ?? "active";
+    body.append(marker);
+    const values = config.chartTypes[typeId] ?? {};
+    const bag = {};
+    const seedKey = (key, want, defval) => {
+      const v = values[key];
+      bag[key] = typeof v === want ? v : defval;
+    };
+    const seed = (rows) => {
+      for (const r of rows) {
+        if (r.kind === "heading" || r.kind === "header") continue;
+        if (r.kind === "range") {
+          seedKey(r.minKey, "number", r.defval);
+          seedKey(r.maxKey, "number", r.defval);
+          continue;
+        }
+        seedKey(r.key, r.kind === "toggle" ? "boolean" : r.kind === "number" ? "number" : "string", r.defval);
+        if (r.kind === "toggle") for (const c of r.colors ?? []) seedKey(c.key, "string", c.defval);
+      }
+    };
+    if (section.rows) seed(section.rows);
+    for (const inst of section.instances ?? []) seed(inst.rows);
+    for (const sub of section.subsections ?? []) seed(sub.rows);
+    for (const inst of section.instances ?? []) {
+      if (!inst.enableKey || inst.enableKey in bag) continue;
+      bag[inst.enableKey] = values[inst.enableKey] === true;
+    }
+    for (const sub of section.subsections ?? []) {
+      if (!sub.enableKey || sub.enableKey in bag) continue;
+      bag[sub.enableKey] = values[sub.enableKey] === true;
+    }
+    const refreshers = [];
+    const put = (key, v) => {
+      bag[key] = v;
+      this.emitType(typeId, key, v);
+      for (const r of refreshers) r();
+    };
+    if (section.instances && section.instances.length > 0) {
+      body.append(this.instancesBlock(typeId, section.instances, bag, put, refreshers));
+    } else if (section.rows) {
+      this.flatTypeRows(section.rows, bag, put, refreshers, body);
+    }
+    for (const sub of section.subsections ?? []) {
+      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));
+    }
+    for (const r of refreshers) r();
+  }
+  /** The FLAT chart-type form: rows appended straight to the body (the pane grid wraps
+   *  them), headings/headers as inline group titles, `when` gates refreshed live. */
+  flatTypeRows(rows, bag, put, refreshers, body) {
+    const entries = [];
+    for (const r of rows) {
+      const el = r.kind === "heading" || r.kind === "header" ? this.sectionTitle(r.label) : this.typeRow(r, bag, put);
+      entries.push({ el, when: r.when });
+      body.append(el);
+    }
+    refreshers.push(() => {
+      for (const e of entries) e.el.classList.toggle("vela-sd-hide", !settingsRowVisible(e.when, bag));
+    });
+  }
+  /** One value row for a chart-type descriptor, writing through `put`. */
+  typeRow(r, bag, put) {
+    if (r.kind === "toggle") {
+      const swatches = (r.colors ?? []).map((c) => {
+        const sw = this.swatch(bag[c.key], (v) => put(c.key, v));
+        sw.title = c.label;
+        return sw;
+      });
+      return this.toggleRow(r.label, bag[r.key], (v) => put(r.key, v), swatches);
+    }
+    if (r.kind === "number") return this.numberRow(r.label, bag[r.key], r.min ?? 0, r.max ?? 1e6, r.step ?? 1, (v) => put(r.key, v));
+    if (r.kind === "color") return this.colorRow(r.label, bag[r.key], (v) => put(r.key, v));
+    if (r.kind === "range") return this.rangeRow(r, bag, put);
+    return this.selectRowLabeled(r.label, bag[r.key], normalizeSelectOptions(r.options), (v) => put(r.key, v));
+  }
+  /**
+   * A MIN–MAX row: two number inputs on one row (stored under the descriptor's
+   * `minKey`/`maxKey`). With a `placeholder`, an input at the DEFAULT value renders
+   * empty showing it, and clearing an input stores the default back — the
+   * placeholder names the unset state ('Off' for 0-disables bounds).
+   */
+  rangeRow(r, bag, put) {
+    const { wrap } = this.row(r.label);
+    const input = (key, title) => {
+      const ni = document.createElement("input");
+      ni.type = "number";
+      ni.className = "vela-sd-number";
+      ni.min = String(r.min ?? 0);
+      ni.max = String(r.max ?? 1e6);
+      ni.step = String(r.step ?? 1);
+      ni.title = title;
+      const current = bag[key];
+      if (r.placeholder !== void 0) {
+        ni.placeholder = r.placeholder;
+        if (current !== r.defval) ni.value = String(current);
+      } else {
+        ni.value = String(current);
+      }
+      ni.addEventListener("change", () => {
+        const raw = ni.value.trim() === "" ? r.defval : Number(ni.value);
+        const v = Number.isFinite(raw) ? Math.min(r.max ?? Infinity, Math.max(r.min ?? -Infinity, raw)) : r.defval;
+        ni.value = r.placeholder !== void 0 && v === r.defval ? "" : String(v);
+        put(key, v);
+      });
+      return ni;
+    };
+    const box = document.createElement("div");
+    box.style.cssText = "display:flex;align-items:center;gap:6px;flex:0 0 auto;";
+    const dash = document.createElement("span");
+    dash.textContent = "\u2013";
+    dash.style.cssText = "color:var(--vela-fg-muted);";
+    box.append(input(r.minKey, `${r.label} \u2014 min`), dash, input(r.maxKey, `${r.label} \u2014 max`));
+    wrap.appendChild(box);
+    return wrap;
+  }
+  /**
+   * The INSTANCE STRIP block: a tab per present instance (label, `×` on the active
+   * removable one), a dashed `+` while an instance is still absent, and one
+   * grouped-rows content per instance below — only the active tab's content shows.
+   * Presence is the boolean at each instance's `enableKey`; the strip rebuilds on
+   * every section edit, so gates elsewhere stay coherent.
+   */
+  instancesBlock(typeId, instances, bag, put, refreshers) {
+    const wrap = document.createElement("div");
+    const strip = document.createElement("div");
+    strip.className = "vela-sd-itabs";
+    wrap.append(strip);
+    const contents = instances.map((inst, i) => {
+      const content = this.groupedRows(`${typeId}/#${i}`, inst.rows, bag, put, refreshers);
+      wrap.append(content);
+      return content;
+    });
+    const present = (inst) => !inst.enableKey || bag[inst.enableKey] === true;
+    const refresh = () => {
+      let active = this.typeActiveInstance.get(typeId) ?? 0;
+      if (!present(instances[active] ?? instances[0])) active = 0;
+      this.typeActiveInstance.set(typeId, active);
+      strip.replaceChildren();
+      instances.forEach((inst, i) => {
+        if (!present(inst)) return;
+        const tab = document.createElement("button");
+        tab.type = "button";
+        tab.className = "vela-sd-itab" + (i === active ? " on" : "");
+        const lbl = document.createElement("span");
+        lbl.textContent = inst.label;
+        tab.append(lbl);
+        if (i === active && inst.enableKey) {
+          const x = document.createElement("span");
+          x.className = "vela-sd-ix";
+          x.textContent = "\u2715";
+          x.title = `Remove ${inst.label}`;
+          x.addEventListener("click", (e) => {
+            e.stopPropagation();
+            this.typeActiveInstance.set(typeId, 0);
+            put(inst.enableKey, false);
+          });
+          tab.append(x);
+        }
+        tab.addEventListener("click", () => {
+          this.typeActiveInstance.set(typeId, i);
+          refresh();
+        });
+        strip.append(tab);
+      });
+      const absent = instances.findIndex((inst) => !present(inst));
+      if (absent >= 0) {
+        const add = document.createElement("button");
+        add.type = "button";
+        add.className = "vela-sd-itab vela-sd-itab-add";
+        add.textContent = "+";
+        add.title = `Add ${instances[absent].label}`;
+        add.addEventListener("click", () => {
+          this.typeActiveInstance.set(typeId, absent);
+          put(instances[absent].enableKey, true);
+        });
+        strip.append(add);
+      }
+      contents.forEach((c, i) => c.classList.toggle("vela-sd-hide", i !== active));
+    };
+    refreshers.push(refresh);
+    return wrap;
+  }
+  /**
+   * A GROUPED rows pane: a TOC column of the group labels (from `heading` rows) and
+   * ONE rows host holding every row — the active group's rows show, the rest hide.
+   * Rows BEFORE the first heading are the always block, visible above every group.
+   * `header` rows stay in the rows column as in-group subgroup titles (not TOC
+   * entries). A group whose value rows are all gated out (or whose heading's own
+   * `when` fails) leaves the TOC; the whole TOC hides when no group is live. The
+   * rows host is tagged for `layoutSettingsGrids`, keeping one shared label column
+   * across all groups.
+   *
+   * `enableKey` (optional): while that bag boolean is false, every row except the one
+   * whose key matches is soft-disabled (visible but grayed / non-interactive) so the
+   * pane stays browseable with the feature off.
+   */
+  groupedRows(paneKey, rows, bag, put, refreshers, enableKey) {
+    const wrap = document.createElement("div");
+    wrap.className = "vela-sd-struct";
+    const toc = document.createElement("div");
+    toc.className = "vela-sd-toc";
+    const rowsHost = document.createElement("div");
+    rowsHost.dataset.sdRowsHost = "1";
+    rowsHost.style.cssText = "flex:1 1 auto;min-width:0;";
+    wrap.append(toc, rowsHost);
+    const entries = [];
+    const groups = [];
+    const groupWhens = [];
+    let g = -1;
+    for (const r of rows) {
+      if (r.kind === "heading") {
+        g = groups.length;
+        groups.push(r.label);
+        groupWhens.push(r.when);
+        continue;
+      }
+      if (r.kind === "header") {
+        entries.push({ el: this.sectionTitle(r.label), when: r.when, group: g, header: true });
+        rowsHost.append(entries[entries.length - 1].el);
+        continue;
+      }
+      const el = this.typeRow(r, bag, put);
+      const key = r.kind === "range" ? void 0 : r.key;
+      entries.push({ el, when: r.when, group: g, key });
+      rowsHost.append(el);
+    }
+    const refresh = () => {
+      const live = groups.map((_, gi) => settingsRowVisible(groupWhens[gi], bag) && entries.some((e) => e.group === gi && !e.header && settingsRowVisible(e.when, bag)));
+      let activeIdx = groups.indexOf(this.typeActiveGroup.get(paneKey) ?? "");
+      if (activeIdx < 0 || !live[activeIdx]) activeIdx = live.findIndex(Boolean);
+      if (activeIdx >= 0) this.typeActiveGroup.set(paneKey, groups[activeIdx]);
+      toc.replaceChildren();
+      groups.forEach((label, gi) => {
+        if (!live[gi]) return;
+        const b = document.createElement("button");
+        b.type = "button";
+        b.className = "vela-sd-toc-btn" + (gi === activeIdx ? " on" : "");
+        b.textContent = label;
+        b.addEventListener("click", () => {
+          this.typeActiveGroup.set(paneKey, label);
+          refresh();
+        });
+        toc.append(b);
+      });
+      const anyGroup = live.some(Boolean);
+      toc.classList.toggle("vela-sd-hide", !anyGroup);
+      wrap.classList.toggle("no-toc", !anyGroup);
+      const enabled = !enableKey || bag[enableKey] === true;
+      for (let i = 0; i < entries.length; i++) {
+        const e = entries[i];
+        let visible = (e.group === -1 || e.group === activeIdx) && settingsRowVisible(e.when, bag);
+        if (visible && e.header) {
+          let hasContent = false;
+          for (let j = i + 1; j < entries.length; j++) {
+            const n = entries[j];
+            if (n.group !== e.group || n.header) break;
+            if (settingsRowVisible(n.when, bag)) {
+              hasContent = true;
+              break;
+            }
+          }
+          visible = hasContent;
+        }
+        e.el.classList.toggle("vela-sd-hide", !visible);
+        e.el.classList.toggle("vela-sd-soft", visible && !enabled && e.key !== enableKey);
+      }
+    };
+    refreshers.push(refresh);
+    return wrap;
+  }
   /** Vertical breathing space between row clusters — grouping reads from whitespace,
    *  so no drawn rule. */
   separator() {
@@ -21850,7 +22660,7 @@ var SettingsDialog = class {
     const { wrap } = this.row(label);
     const sel = document.createElement("select");
     sel.className = "vela-sd-select";
-    sel.style.cssText = "max-width:140px;flex:0 0 auto;";
+    sel.style.cssText = "max-width:200px;flex:0 0 auto;";
     for (const [val, lbl] of options) {
       const o = document.createElement("option");
       o.value = val;
@@ -21866,7 +22676,7 @@ var SettingsDialog = class {
     const { wrap } = this.row(label);
     const sel = document.createElement("select");
     sel.className = "vela-sd-select";
-    sel.style.cssText = "max-width:140px;flex:0 0 auto;";
+    sel.style.cssText = "max-width:200px;flex:0 0 auto;";
     for (const opt of options) {
       const o = document.createElement("option");
       o.value = opt;
@@ -21903,6 +22713,9 @@ var SettingsDialog = class {
   }
 };
 var AUTO_MANUAL_OPTS = [["auto", "Auto"], ["manual", "Manual"]];
+function normalizeSelectOptions(options) {
+  return options.map((o) => typeof o === "string" ? [o, o] : o);
+}
 function timezoneOptions(current) {
   const options = TIMEZONES.map((t) => [t.value, tzMenuLabel(t.value, t.label)]);
   const normalized = normalizeTimezone(current);
@@ -23261,6 +24074,8 @@ function topDrawingAt(drawings, x, y, proj, tol = HIT_TOLERANCE) {
 // src/renderers/native/drawings/DrawingInteraction.ts
 var DRAG_SLOP3 = 3;
 var FREEHAND_SAMPLE_PX = 4;
+var ANGLE_SNAP_STEP = Math.PI / 4;
+var ANGLE_SNAP_TYPES = /* @__PURE__ */ new Set(["trendline", "ray", "extendedline", "infoline", "trendangle", "arrow"]);
 var DrawingInteraction = class {
   // magnet target for the ring
   constructor(deps) {
@@ -23301,6 +24116,27 @@ var DrawingInteraction = class {
     this.snapAt = changed ? { point: snapped, paneId } : null;
     return snapped;
   }
+  /** Resolve a pixel to a data point with the segment angle locked to 45° steps around
+   *  `pivot` (Shift held on a line tool). Works in PIXEL space — the user reasons about
+   *  the angle they see, not about time/price units. The magnet is bypassed: snapping
+   *  the result to a candle afterwards would break the exact angle just enforced. */
+  resolveAngleSnapped(pivot, paneId, x, y) {
+    const proj = this.deps.projector();
+    const px = proj.xOf(pivot.time);
+    const py = proj.yOf(pivot.price, paneId);
+    this.snapAt = null;
+    if (py == null) return proj.pxToPoint(x, y, paneId);
+    const r = Math.hypot(x - px, y - py);
+    if (r < 1) return proj.pxToPoint(x, y, paneId);
+    const angle = Math.round(Math.atan2(y - py, x - px) / ANGLE_SNAP_STEP) * ANGLE_SNAP_STEP;
+    return proj.pxToPoint(px + r * Math.cos(angle), py + r * Math.sin(angle), paneId);
+  }
+  /** The pivot the free endpoint angle-snaps around while placing `draft`, or null when
+   *  the tool is not a two-point segment (or no anchor is committed yet). */
+  placingPivot(draft) {
+    if (!ANGLE_SNAP_TYPES.has(draft.type)) return null;
+    return draft.anchors[draft.anchors.length - 1] ?? null;
+  }
   /** Should the drawing layer win this press (vs pan)? Armed/placing/pressed, or over a drawing/handle. */
   claim(x, y) {
     if (this.deps.activeTool() != null || this.state.kind !== "idle") return true;
@@ -23322,12 +24158,15 @@ var DrawingInteraction = class {
     return this.state.kind === "pressed" && this.state.moved ? this.state.id : null;
   }
   /** A press: place the next anchor, or grab a drawing/handle (resolved as click or drag on release).
-   *  `shift` over a drawing toggles it in/out of the selection (multi-select) instead of dragging. */
+   *  `shift` over a drawing toggles it in/out of the selection (multi-select) instead of dragging;
+   *  while placing a line tool it locks the segment angle to 45° steps. */
   down(x, y, mode = "off", shift = false) {
     const proj = this.deps.projector();
     if (this.state.kind === "placing") {
       if (this.state.draft.placementMode() !== "click") return;
-      this.state.draft.anchors.push(this.placementAnchor(this.state.draft, this.resolve(x, y, this.state.draft.paneId, mode)));
+      const pivot = shift ? this.placingPivot(this.state.draft) : null;
+      const point = pivot ? this.resolveAngleSnapped(pivot, this.state.draft.paneId, x, y) : this.resolve(x, y, this.state.draft.paneId, mode);
+      this.state.draft.anchors.push(this.placementAnchor(this.state.draft, point));
       if (this.state.draft.anchors.length >= this.state.need) this.finalize();
       else this.deps.changed();
       return;
@@ -23352,8 +24191,9 @@ var DrawingInteraction = class {
       this.state = { kind: "pressed", id: hit.id, handle, grab: proj.pxToPoint(x, y, hit.paneId), orig: cloneAnchors(hit), px: x, py: y, moved: false };
     }
   }
-  /** Pointer move: advance the placing ghost, or live-preview a drag once past the slop. */
-  move(x, y, mode = "off") {
+  /** Pointer move: advance the placing ghost, or live-preview a drag once past the slop.
+   *  `shift` on a line tool locks the segment angle to 45° steps (placing + handle drags). */
+  move(x, y, mode = "off", shift = false) {
     if (this.state.kind === "idle") {
       const tool = this.deps.activeTool();
       const had = this.snapAt != null;
@@ -23367,7 +24207,8 @@ var DrawingInteraction = class {
         this.captureFreehand(x, y);
         return;
       }
-      this.state.cursor = this.resolve(x, y, this.state.draft.paneId, mode);
+      const pivot = shift ? this.placingPivot(this.state.draft) : null;
+      this.state.cursor = pivot ? this.resolveAngleSnapped(pivot, this.state.draft.paneId, x, y) : this.resolve(x, y, this.state.draft.paneId, mode);
       this.deps.changed();
       return;
     }
@@ -23378,7 +24219,11 @@ var DrawingInteraction = class {
     this.state.moved = true;
     if (this.state.handle >= 0) {
       const a = d.anchors[this.state.handle];
-      if (a) applyFree(a, this.resolve(x, y, d.paneId, mode), d.anchorSchema().slots[this.state.handle]?.free ?? "both");
+      if (a) {
+        const pivot = shift && ANGLE_SNAP_TYPES.has(d.type) && d.anchors.length === 2 ? d.anchors[1 - this.state.handle] : void 0;
+        const point = pivot ? this.resolveAngleSnapped(pivot, d.paneId, x, y) : this.resolve(x, y, d.paneId, mode);
+        applyFree(a, point, d.anchorSchema().slots[this.state.handle]?.free ?? "both");
+      }
       d.constrainHandleDrag(this.state.handle);
     } else {
       const pt = this.deps.projector().pxToPoint(x, y, d.paneId);
@@ -23547,11 +24392,11 @@ function applyFree(anchor, pt, free) {
 // src/renderers/native/drawings/DrawingSettingsPopup.ts
 var BTN = 30;
 var ICON = 21;
-var STYLE_ID15 = "vela-drawing-popup-styles";
+var STYLE_ID16 = "vela-drawing-popup-styles";
 function ensureStyles5() {
-  if (typeof document === "undefined" || document.getElementById(STYLE_ID15)) return;
+  if (typeof document === "undefined" || document.getElementById(STYLE_ID16)) return;
   const s = document.createElement("style");
-  s.id = STYLE_ID15;
+  s.id = STYLE_ID16;
   s.textContent = `
 .vela-dpop input[type=color]{-webkit-appearance:none;appearance:none;border:none;padding:0;background:none;cursor:pointer;border-radius:0;}
 .vela-dpop input[type=color]::-webkit-color-swatch-wrapper{padding:0;}
@@ -24887,6 +25732,10 @@ var UserDrawingController = class {
     this.activeTool = null;
     // last-used style for the armed tool (seeds the placement ghost)
     this.intentCb = null;
+    /** Another chart's in-progress placement, mirrored here as a ghost (drawings sync). */
+    this.externalGhost = null;
+    /** Last draft fingerprint reported upstream — gates the per-render emission to actual changes. */
+    this.lastDraftKey = null;
     this.measure = new MeasureOverlay();
     // transient ruler — not a persistent drawing
     this.toolbarVisible = false;
@@ -24958,6 +25807,11 @@ var UserDrawingController = class {
   syncToolbarGutter() {
     this.deps.setToolbarGutter(this.toolbarVisible ? this.toolbarCollapsed ? TOOLBAR_COLLAPSED_WIDTH : TOOLBAR_WIDTH : 0);
   }
+  /** Core push: mirror (or clear) another chart's in-progress placement as a ghost. */
+  setExternalGhost(doc) {
+    this.externalGhost = doc ? deserializeDrawing(doc) : null;
+    this.render();
+  }
   syncDrawings(docs) {
     this.drawings = docs.map((d) => deserializeDrawing(d)).filter((d) => d != null);
     if (this.textEditor && !this.editedDrawing(this.textEditor.id)) this.closeTextEditor();
@@ -25116,7 +25970,7 @@ var UserDrawingController = class {
     }
     this.interaction.down(x, y, snap, shift);
   }
-  pointerMove(x, y, snap = "off") {
+  pointerMove(x, y, snap = "off", shift = false) {
     if (this.eraserMode) {
       if (this.erasing) this.deleteAt(x, y);
       return;
@@ -25126,7 +25980,7 @@ var UserDrawingController = class {
       this.render();
       return;
     }
-    this.interaction.move(x, y, snap);
+    this.interaction.move(x, y, snap, shift);
     this.updateHover(x, y);
   }
   /** Track which drawing is hovered so its handles appear on hover (and only then). */
@@ -25512,6 +26366,8 @@ var UserDrawingController = class {
     this.layoutTextEditor();
     const ghost = this.interaction.ghost();
     if (ghost) this.painter.paintGhost(ctx, ghost, proj, this.deps.theme());
+    if (this.externalGhost) this.painter.paintGhost(ctx, this.externalGhost, proj, this.deps.theme());
+    this.emitDraft(ghost);
     const markers = this.interaction.placingMarkers(proj);
     if (markers) this.painter.paintHandles(ctx, markers);
     const m = this.interaction.snapMarker();
@@ -25573,6 +26429,15 @@ var UserDrawingController = class {
       }
     }, () => this.clearSelection());
   }
+  /** Report placement progress upstream (`draft` intent) so the drawings sync can
+   *  mirror the ghost live on linked charts. Called from every render; only actual
+   *  shape changes emit, and the end of a placement emits one `null`. */
+  emitDraft(ghost) {
+    const key = ghost ? JSON.stringify({ t: ghost.type, p: ghost.paneId, a: ghost.anchors, s: ghost.style, x: ghost.text }) : null;
+    if (key === this.lastDraftKey) return;
+    this.lastDraftKey = key;
+    this.intentCb?.({ kind: "draft", doc: ghost ? ghost.serialize() : null });
+  }
   emit(i) {
     if (i.kind === "create") {
       if (i.doc.text && i.doc.text.color === void 0) {
@@ -25998,10 +26863,10 @@ var SEPARATOR_HIT_PX = 4;
 var NativeRenderer = class {
   constructor(opts) {
     this.capabilities = NATIVE_CAPABILITIES;
-    // The app "chrome" surface (drawing toolbar + axis-scale gutters): background + text.
+    // The app "chrome" surface (drawing toolbar + in-chart dialogs): background + text.
     // Owned by the app theme alone (mount/setTheme) — config-level background/text edits
-    // (settings dialog, persisted configs) recolor only the plot, keeping the toolbar and
-    // scales on a consistent, always-readable surface.
+    // (settings dialog, persisted configs) recolor the plot AND the axis scales (see
+    // axisSurface), but never the toolbar/dialog chrome.
     this.surfaceBackground = DARK_THEME.background;
     this.surfaceTextColor = DARK_THEME.textColor;
     // the plot area (canvases + DOM overlays), inset to the right of the toolbar gutter
@@ -26201,6 +27066,7 @@ var NativeRenderer = class {
       this.candleDown = opts.downColor;
       this.scene.priceStyle = opts.priceStyle;
       this.scene.basePainting = basePaintingOf(opts.priceStyle);
+      this.scene.candleOverride = candleOverrideFor(opts.priceStyle, this.scene.style.chartTypes);
     }
     this.theme = this.deriveTheme(DARK_THEME);
   }
@@ -26678,6 +27544,7 @@ var NativeRenderer = class {
       baselineLevel: next.baseline.baselineLevel
     };
     this.setPriceStyle(next.series.style);
+    this.scene.candleOverride = candleOverrideFor(this.scene.priceStyle, s.chartTypes);
     this.scene.baselineValue = next.series.baseline;
     this.coords.setPitchScale(next.series.spacing);
     this.coords.setViewport(this.clampViewport(this.coords.getViewport().barSpacing, this.coords.getViewport().rightOffset));
@@ -26783,7 +27650,7 @@ var NativeRenderer = class {
       (patch) => this.applyConfig(patch),
       (json) => this.applyConfig(json),
       () => {
-        if (this.factoryConfig) this.applyConfig(this.factoryConfig);
+        if (this.factoryConfig) this.applyConfig(factoryResetConfig(this.factoryConfig));
         this.settingsDialog?.close();
         this.openSettingsDialog();
       },
@@ -26984,10 +27851,16 @@ var NativeRenderer = class {
       borderColor: isDarkColor(this.surfaceBackground) ? DARK_THEME.borderColor : LIGHT_THEME.borderColor
     };
   }
+  /** The colors the axis-scale gutters (price + time) paint with: the LIVE chart background
+   *  (`layout.background`) and its contrast-corrected text, so the scales read as part of the
+   *  plot. Only the toolbar/dialog chrome stays on the stable app-theme surface. */
+  axisSurface() {
+    return { background: this.theme.background, textColor: this.theme.textColor };
+  }
   // ── lifecycle ──
   mount(container, theme) {
     this.mountContainer = container;
-    this.publishToolbarGutter();
+    this.publishGutters();
     this.theme = this.deriveTheme(theme);
     this.surfaceBackground = theme.background;
     this.surfaceTextColor = theme.textColor;
@@ -27059,7 +27932,7 @@ var NativeRenderer = class {
       drawingsDeleteAt: (x, y) => this.userDrawings?.deleteAt(x, y) ?? false,
       drawingsSnapMode: () => this.snapMode,
       drawingsPointerDown: (x, y, snap, shift) => this.userDrawings?.pointerDown(x, y, snap, shift),
-      drawingsPointerMove: (x, y, snap) => this.userDrawings?.pointerMove(x, y, snap),
+      drawingsPointerMove: (x, y, snap, shift) => this.userDrawings?.pointerMove(x, y, snap, shift),
       drawingsPointerUp: (x, y) => this.userDrawings?.pointerUp(x, y),
       drawingsCursor: (x, y) => this.userDrawings?.cursorAt(x, y) ?? null,
       drawingsDblClick: (x, y) => this.userDrawings?.dblClick(x, y) ?? false,
@@ -27296,6 +28169,7 @@ var NativeRenderer = class {
     this.attributionEl?.remove();
     this.attributionEl = null;
     this.mountContainer?.style.removeProperty("--vela-toolbar-gutter");
+    this.mountContainer?.style.removeProperty("--vela-scale-gutter");
     this.mountContainer = null;
     this.wrapper?.remove();
   }
@@ -27464,6 +28338,7 @@ var NativeRenderer = class {
     const w = RIGHT_AXIS_W + AXIS_COL_W * this.maxOwnScaleColumns();
     if (w === this.rightAxisW) return false;
     this.rightAxisW = w;
+    this.publishGutters();
     if (this.coords.width > 0) this.syncSize();
     return true;
   }
@@ -27623,6 +28498,7 @@ var NativeRenderer = class {
     if (style === this.scene.priceStyle) return;
     this.scene.priceStyle = style;
     this.scene.basePainting = basePaintingOf(style);
+    this.scene.candleOverride = candleOverrideFor(style, this.scene.style.chartTypes);
     for (const cb of this.priceStyleCbs) cb(style);
   }
   onRemoveIndicator(cb) {
@@ -27784,7 +28660,10 @@ var NativeRenderer = class {
         active = true;
       }
     }
-    this.coords.setViewport(this.clampViewport(barSpacing, rightOffset));
+    const clamped = this.clampViewport(barSpacing, rightOffset);
+    if (clamped.barSpacing !== barSpacing) this.targetBarSpacing = clamped.barSpacing;
+    if (this.scrollTargetRO != null && clamped.rightOffset !== rightOffset) this.scrollTargetRO = clamped.rightOffset;
+    this.coords.setViewport(clamped);
     this.computeScales();
     if (this.easeScales(dtMs)) active = true;
     if (this.easeLiveBar(dtMs)) active = true;
@@ -28236,9 +29115,37 @@ var NativeRenderer = class {
       this.paintData();
     } else if (repaintsChrome(level) && this.paintedData) {
       this.chrome.prepare(this.scene, this.coords, this.theme);
-      this.chrome.render(this.scene, this.coords, this.theme, { background: this.surfaceBackground, textColor: this.surfaceTextColor });
+      this.chrome.render(this.scene, this.coords, this.theme, this.axisSurface());
     }
     this.crosshairLayer.render(this.scene, this.coords, this.theme, this.hoverSeparatorY, this.externalCrossPx());
+    if (!repaintsData(level) && this.paintedData) this.repaintCursorLayers();
+  }
+  /** Repaint the SDK layers that opted into cursor tracking (their own canvas only). */
+  repaintCursorLayers() {
+    const pane = this.scene.panes.get(PRICE_PANE_ID2);
+    if (!pane) return;
+    const nowMs = typeof performance !== "undefined" ? performance.now() : Date.now();
+    for (const l of this.extLayers) {
+      if (!l.def.repaintOnCursor) continue;
+      l.instance.render(this.extLayerArgs(l.def.id, pane.scale, pane.bounds, nowMs));
+      if (this.animZoom && l.instance.animating?.()) this.animator.start();
+    }
+  }
+  /** One frame's args for an SDK renderer layer (shared by the data + cursor paint paths). */
+  extLayerArgs(id, scale, bounds, nowMs) {
+    return {
+      bars: this.scene.bars,
+      data: this.scene.nativeData.get(id),
+      settings: this.scene.nativeData.get(`${id}-settings`) ?? {},
+      pending: this.scene.nativePending.get(id) ?? [],
+      coords: this.coords,
+      scale,
+      bounds,
+      theme: this.theme,
+      priceStyle: this.scene.priceStyle,
+      nowMs,
+      cursor: this.lastPointer
+    };
   }
   /** Paint the below-data (L-1) + geometry (L0) + chrome (L1) layers from the current scene/coords. */
   paintData() {
@@ -28271,18 +29178,16 @@ var NativeRenderer = class {
       });
       const nowMs = typeof performance !== "undefined" ? performance.now() : Date.now();
       for (const l of this.extLayers) {
-        l.instance.render({
-          bars: this.scene.bars,
-          data: this.scene.nativeData.get(l.def.id),
-          settings: this.scene.nativeData.get(`${l.def.id}-settings`) ?? {},
-          pending: this.scene.nativePending.get(l.def.id) ?? [],
-          coords: this.coords,
-          scale: pane.scale,
-          bounds: pane.bounds,
-          theme: this.theme,
-          priceStyle: this.scene.priceStyle,
-          nowMs
-        });
+        const args = this.extLayerArgs(l.def.id, pane.scale, pane.bounds, nowMs);
+        l.instance.render(args);
+        if (l.def.id === this.scene.priceStyle && l.instance.modulateBase) {
+          const mod = l.instance.modulateBase(args);
+          if (mod) {
+            if (mod.candleBodyScale != null) this.backend.candleBodyScale = clamp012(mod.candleBodyScale) || 0.01;
+            if (mod.candleBodyAlpha != null) this.backend.candleBodyAlpha = clamp012(mod.candleBodyAlpha) * this.candleBodyAlpha;
+            if (mod.gridAlpha != null) this.backend.gridAlpha = clamp012(mod.gridAlpha);
+          }
+        }
         if (this.animZoom && l.instance.animating?.()) this.animator.start();
       }
     }
@@ -28292,7 +29197,7 @@ var NativeRenderer = class {
     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.backend.render(this.scene, this.coords, this.theme);
-    this.chrome.render(this.scene, this.coords, this.theme, { background: this.surfaceBackground, textColor: this.surfaceTextColor });
+    this.chrome.render(this.scene, this.coords, this.theme, this.axisSurface());
     this.userDrawings?.render();
     if (easeLive && liveActual) this.bars[li] = liveActual;
     this.paintedData = true;
@@ -28726,15 +29631,18 @@ var NativeRenderer = class {
   setToolbarGutter(px) {
     if (px === this.toolbarGutter) return;
     this.toolbarGutter = px;
-    this.publishToolbarGutter();
+    this.publishGutters();
     this.positionAttribution();
     this.syncSize();
   }
-  /** Publish the gutter on the mount container as `--vela-toolbar-gutter`, so host
-   *  overlays sharing that container (a status line, a custom legend) can anchor to
-   *  the plot's left edge without reaching into the renderer's DOM. */
-  publishToolbarGutter() {
+  /** Publish the gutters on the mount container as `--vela-toolbar-gutter` (left,
+   *  drawings toolbar) and `--vela-scale-gutter` (right, the full price-scale width
+   *  incl. merged own-scale columns), so host overlays sharing that container (a
+   *  status line, a watermark, a custom legend) can anchor to the plot's edges
+   *  without reaching into the renderer's DOM. */
+  publishGutters() {
     this.mountContainer?.style.setProperty("--vela-toolbar-gutter", `${this.toolbarGutter}px`);
+    this.mountContainer?.style.setProperty("--vela-scale-gutter", `${this.rightAxisW}px`);
   }
   /** The built-in mark, or the host's own when one is set. */
   buildAttributionEl() {
@@ -28804,7 +29712,13 @@ var NativeRenderer = class {
       this.fitContent();
       this.didInitialFit = true;
     }
-    this.scheduler.flushNow(4 /* Full */);
+    if (this.animator.active) {
+      this.computeScales();
+      this.paintData();
+      this.crosshairLayer.render(this.scene, this.coords, this.theme, this.hoverSeparatorY, this.externalCrossPx());
+    } else {
+      this.scheduler.flushNow(4 /* Full */);
+    }
   }
   applyBackground() {
     this.wrapper.style.background = this.theme.background;
@@ -28873,6 +29787,9 @@ function sanitizeHighlights(value) {
   }
   return out.sort((a, b) => a.from - b.from);
 }
+function clamp012(v) {
+  return Math.max(0, Math.min(1, v));
+}
 function isPriceStyle2(v) {
   return typeof v === "string" && priceStyleIds().includes(v);
 }
@@ -29418,8 +30335,8 @@ function fmtChange(open, close) {
 }
 
 // src/widget/statusline.ts
-var STYLE_ID16 = "vela-widget-statusline";
-var CSS13 = `
+var STYLE_ID17 = "vela-widget-statusline";
+var CSS14 = `
 .vela-statusline {
     position: absolute;
     top: var(--vela-space-2);
@@ -29554,7 +30471,7 @@ var Statusline = class {
     /** 'ohlc' for bar-shaped styles; 'value' (the single plotted close) for line styles. */
     this.readout = "ohlc";
     const doc = host.ownerDocument;
-    injectStyles(STYLE_ID16, CSS13, doc);
+    injectStyles(STYLE_ID17, CSS14, doc);
     host.classList.add("vela-has-statusline");
     this.el = doc.createElement("div");
     this.el.className = "vela-statusline";
@@ -29677,11 +30594,21 @@ var Statusline = class {
 };
 
 // src/widget/watermark.ts
-var STYLE_ID17 = "vela-widget-watermark";
-var CSS14 = `
+var MAX_FONT_PX = 72;
+var MIN_FONT_PX = 12;
+var FILL = 0.9;
+var STYLE_ID18 = "vela-widget-watermark";
+var CSS15 = `
 .vela-watermark {
     position: absolute;
-    inset: 0;
+    /* Insets follow the renderer-published gutters (mount container), so the mark
+     * centers and fits within the PLOT \u2014 never bleeding into the drawings toolbar
+     * on the left or the price scale on the right (visible in small multi-chart
+     * cells, where the scale is a large share of the width). */
+    top: 0;
+    bottom: 0;
+    left: var(--vela-toolbar-gutter, 0px);
+    right: var(--vela-scale-gutter, 0px);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -29689,28 +30616,48 @@ var CSS14 = `
     z-index: 1;
     color: var(--vela-fg);
     opacity: 0.05;
-    font-size: clamp(28px, 7vw, 72px);
+    font-size: ${MAX_FONT_PX}px;
     font-weight: 700;
     letter-spacing: 0.04em;
     user-select: none;
     white-space: nowrap;
 }
 `;
+function watermarkFontPx(availPx, textPxAtMax) {
+  if (textPxAtMax <= 0) return MAX_FONT_PX;
+  return Math.max(MIN_FONT_PX, Math.min(MAX_FONT_PX, Math.floor(MAX_FONT_PX * availPx * FILL / textPxAtMax)));
+}
 var Watermark = class {
   constructor(host, symbol, timeframe) {
-    injectStyles(STYLE_ID17, CSS14, host.ownerDocument);
+    this.resizeObserver = null;
+    injectStyles(STYLE_ID18, CSS15, host.ownerDocument);
     this.el = host.ownerDocument.createElement("div");
     this.el.className = "vela-watermark";
+    this.text = host.ownerDocument.createElement("span");
+    this.el.appendChild(this.text);
     host.appendChild(this.el);
+    if (typeof ResizeObserver !== "undefined") {
+      this.resizeObserver = new ResizeObserver(() => this.fit());
+      this.resizeObserver.observe(this.el);
+    }
     this.update(symbol, timeframe);
   }
   setVisible(visible) {
     this.el.style.display = visible ? "" : "none";
   }
   update(symbol, timeframe) {
-    this.el.textContent = symbol ? `${parseSymbol(symbol).ticker} \xB7 ${timeframeLabel(timeframe)}` : "";
+    this.text.textContent = symbol ? `${parseSymbol(symbol).ticker} \xB7 ${timeframeLabel(timeframe)}` : "";
+    this.fit();
+  }
+  /** Measure the text at the cap and shrink it to the chart's own width. */
+  fit() {
+    if (this.el.clientWidth <= 0 || !this.text.textContent) return;
+    this.el.style.fontSize = `${MAX_FONT_PX}px`;
+    const px = watermarkFontPx(this.el.clientWidth, this.text.getBoundingClientRect().width);
+    if (px !== MAX_FONT_PX) this.el.style.fontSize = `${px}px`;
   }
   destroy() {
+    this.resizeObserver?.disconnect();
     this.el.remove();
   }
 };
@@ -30579,6 +31526,49 @@ function registerBuiltinLayouts() {
   registerLayout({ id: "4", label: "4 grid", cols: [1, 1], rows: [1, 1], cells: slots(4) });
   registerLayout({ id: "8", label: "8 grid", cols: [1, 1, 1, 1], rows: [1, 1], cells: slots(8) });
 }
+var GRID_PICKER_MAX = 4;
+var GRID_BUILTIN_IDS = {
+  "1x1": "1",
+  "1x2": "2h",
+  "2x1": "2v",
+  "2x2": "4",
+  "2x4": "8"
+};
+var clampTrack = (n) => Math.max(1, Math.min(GRID_PICKER_MAX, Math.round(n)));
+function layoutForGrid(rows, cols) {
+  const r = clampTrack(rows);
+  const c = clampTrack(cols);
+  const builtin = GRID_BUILTIN_IDS[`${r}x${c}`];
+  const registered = builtin ? registry5.get(builtin) : void 0;
+  if (registered) return registered;
+  return {
+    id: `g${r}x${c}`,
+    // Width-first label — matches the picker's caption ("3 × 2" = 3 wide, 2 tall).
+    label: `${c} \xD7 ${r} grid`,
+    cols: Array.from({ length: c }, () => 1),
+    rows: Array.from({ length: r }, () => 1),
+    cells: slots(r * c)
+  };
+}
+var GRID_ID_RE = /^g([1-4])x([1-4])$/;
+function ensureLayout(id) {
+  const registered = registry5.get(id);
+  if (registered) return registered;
+  const g = GRID_ID_RE.exec(id);
+  if (g) return layoutForGrid(Number(g[1]), Number(g[2]));
+  return void 0;
+}
+function layoutShape(def) {
+  if (!def.areas && def.rows.length <= GRID_PICKER_MAX && def.cols.length <= GRID_PICKER_MAX && def.cells.length === def.rows.length * def.cols.length) {
+    return { rows: def.rows.length, cols: def.cols.length };
+  }
+  return null;
+}
+function occupancyGrid(def) {
+  if (def.areas) return def.areas.map((row) => row.trim().split(/\s+/));
+  const cols = def.cols.length;
+  return def.rows.map((_, r) => def.cols.map((_2, c) => def.cells[r * cols + c]?.id ?? `\xB7${r}x${c}`));
+}
 function gridStyles(def, trackSizes) {
   const cols = trackSizes?.cols?.length === def.cols.length ? trackSizes.cols : def.cols;
   const rows = trackSizes?.rows?.length === def.rows.length ? trackSizes.rows : def.rows;
@@ -30598,6 +31588,15 @@ function activeAfterLayout(current, cellIds) {
   if (current != null && cellIds.includes(current)) return current;
   return cellIds[0] ?? null;
 }
+function orderAfterLayout(order, slots2, active) {
+  const next = [...order];
+  if (active == null || slots2 <= 0) return next;
+  const idx = next.indexOf(active);
+  if (idx < 0 || idx < slots2) return next;
+  next.splice(idx, 1);
+  next.splice(slots2 - 1, 0, active);
+  return next;
+}
 
 // src/workspace/splitters.ts
 var MIN_TRACK_FRAC = 0.1;
@@ -30630,6 +31629,27 @@ function trackOffsets(weights, sizePx, gapPx) {
   }
   return out;
 }
+function seamSegments(grid, axis, index) {
+  const count = axis === "cols" ? grid.length : grid[0]?.length ?? 0;
+  const isSeam = (k) => axis === "cols" ? grid[k]?.[index] !== grid[k]?.[index + 1] : grid[index]?.[k] !== grid[index + 1]?.[k];
+  const out = [];
+  for (let k = 0; k < count; k += 1) {
+    if (!isSeam(k)) continue;
+    const last = out[out.length - 1];
+    if (last && last[1] === k - 1) last[1] = k;
+    else out.push([k, k]);
+  }
+  return out;
+}
+function segmentSpanPx(weights, sizePx, gapPx, from, to) {
+  const total = weights.reduce((s, w) => s + w, 0);
+  if (total <= 0) return { start: 0, end: 0 };
+  const content = sizePx - gapPx * (weights.length - 1);
+  const startOf = (k) => weights.slice(0, k).reduce((s, w) => s + w / total * content, 0) + gapPx * k;
+  const start = from === 0 ? 0 : startOf(from) - gapPx / 2;
+  const end = to === weights.length - 1 ? sizePx : startOf(to + 1) - gapPx / 2;
+  return { start, end };
+}
 var HIT_PX = 8;
 var SplitterLayer = class {
   constructor(container, deps) {
@@ -30638,23 +31658,36 @@ var SplitterLayer = class {
     this.strips = [];
     this.drag = null;
   }
-  /** Rebuild + reposition the strips for the current tracks/size. */
+  /** Rebuild + reposition the strips for the current tracks/size/occupancy. */
   layout() {
     const { cols, rows } = this.deps.tracks();
+    const grid = this.deps.grid();
     const rect = this.container.getBoundingClientRect();
     const gap = this.deps.gapPx();
-    const wanted = Math.max(0, cols.length - 1) + Math.max(0, rows.length - 1);
-    while (this.strips.length > wanted) this.strips.pop().remove();
-    while (this.strips.length < wanted) this.strips.push(this.makeStrip());
-    let k = 0;
+    const placements = [];
     for (const [i, x] of trackOffsets(cols, rect.width, gap).entries()) {
-      this.place(this.strips[k], "cols", i, `left:${Math.round(x - HIT_PX / 2)}px;top:0;width:${HIT_PX}px;height:100%;cursor:col-resize;`);
-      k += 1;
+      for (const [from, to] of seamSegments(grid, "cols", i)) {
+        const { start, end } = segmentSpanPx(rows, rect.height, gap, from, to);
+        placements.push({
+          axis: "cols",
+          index: i,
+          css: `left:${Math.round(x - HIT_PX / 2)}px;top:${Math.round(start)}px;width:${HIT_PX}px;height:${Math.round(end - start)}px;cursor:col-resize;`
+        });
+      }
     }
     for (const [i, y] of trackOffsets(rows, rect.height, gap).entries()) {
-      this.place(this.strips[k], "rows", i, `left:0;top:${Math.round(y - HIT_PX / 2)}px;width:100%;height:${HIT_PX}px;cursor:row-resize;`);
-      k += 1;
+      for (const [from, to] of seamSegments(grid, "rows", i)) {
+        const { start, end } = segmentSpanPx(cols, rect.width, gap, from, to);
+        placements.push({
+          axis: "rows",
+          index: i,
+          css: `left:${Math.round(start)}px;top:${Math.round(y - HIT_PX / 2)}px;width:${Math.round(end - start)}px;height:${HIT_PX}px;cursor:row-resize;`
+        });
+      }
     }
+    while (this.strips.length > placements.length) this.strips.pop().remove();
+    while (this.strips.length < placements.length) this.strips.push(this.makeStrip());
+    for (const [k, p] of placements.entries()) this.place(this.strips[k], p.axis, p.index, p.css);
   }
   destroy() {
     for (const s of this.strips.splice(0)) s.remove();
@@ -30720,16 +31753,18 @@ var GAP_PX = 2;
 var POOL_CAP = 16;
 var TIME_AXIS_H3 = 22;
 var ALERT_CAP = 50;
-var STYLE_ID18 = "vela-workspace";
-var CSS15 = `
+var STYLE_ID19 = "vela-workspace";
+var CSS16 = `
 .vela-workspace { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; background: var(--vela-bg); }
 .vela-ws-main { position: relative; display: flex; flex-direction: row; flex: 1 1 auto; min-height: 0; }
 .vela-ws-toolbar { position: relative; flex: none; }
 .vela-ws-grid { position: relative; flex: 1 1 auto; min-width: 0; display: grid; gap: ${GAP_PX}px; background: var(--vela-border-soft); }
 .vela-cell { background: var(--vela-bg); position: relative; }
 /* Active-cell highlight: an overlay ring ABOVE the chart's own canvas stack (a plain
-   outline on the cell is painted under them) \u2014 inert to the pointer. */
-.vela-cell[data-active='1']::after {
+   outline on the cell is painted under them) \u2014 inert to the pointer. Scoped to
+   multi-cell grids ([data-multi]): a single-cell layout always has an active cell,
+   and ringing the only chart would just be noise. */
+.vela-ws-grid[data-multi='1'] .vela-cell[data-active='1']::after {
     content: '';
     position: absolute;
     inset: 0;
@@ -30737,7 +31772,12 @@ var CSS15 = `
     pointer-events: none;
     z-index: 10;
 }
-.vela-ws-splitter:hover { background: var(--vela-accent); opacity: 0.35; }
+/* Splitter hover mirrors the in-chart pane separator hover (CrosshairRenderer):
+   a soft band over the whole grab target + a solid 2px line on the seam center. */
+.vela-ws-splitter:hover { background: var(--vela-separator-hover-band); }
+.vela-ws-splitter:hover::after { content: ''; position: absolute; background: var(--vela-separator-hover-line); }
+.vela-ws-splitter[data-axis='cols']:hover::after { left: calc(50% - 1px); top: 0; width: 2px; height: 100%; }
+.vela-ws-splitter[data-axis='rows']:hover::after { top: calc(50% - 1px); left: 0; height: 2px; width: 100%; }
 `;
 registerIcon("layout", svg16('<rect x="1.5" y="1.5" width="13" height="13" rx="1.5"/><path d="M8 1.5v13M1.5 8h13"/>'));
 function declaredOrder(cells) {
@@ -30788,6 +31828,15 @@ var VelaWorkspace = class {
     /** Re-entrance guard around one propagation tick: followers' synchronous echoes
      *  (their setVisibleRange re-emits viewport:changed) must not re-propagate. */
     this.syncBusy = false;
+    /** Same guard for the drawings link: the propagated mutations' own `drawing:*`
+     *  events fire synchronously inside the propagation loop and must not fan out again. */
+    this.drawingSyncBusy = false;
+    /** LINKED drawings (the drawings sync): one map per synced set (cellId → that
+     *  cell's drawing id), reachable from every member under its `cellId\0drawingId`
+     *  key — any member finds its peers to push edits/removals onto. Survives a
+     *  toggle-off (propagation freezes while the setting is off; re-enabling resumes
+     *  edit/delete for these pairs). Cleared on reload / `applyState`. */
+    this.drawingLinks = /* @__PURE__ */ new Map();
     this.manifest = [];
     /** The shared manifest can no longer change instance sets — resolved, or no
      *  `indicators` option so nothing ever will. Gates the cells' ledger fallback. */
@@ -30829,16 +31878,16 @@ var VelaWorkspace = class {
     this.timezone = boot?.timezone ?? opts.timezone ?? "Etc/UTC";
     if (boot?.favorites) this.favs = [...boot.favorites];
     const sync = boot?.sync ?? opts.sync;
-    for (const kind of ["viewport", "symbol", "timeframe", "crosshair"]) {
+    for (const kind of ["viewport", "symbol", "timeframe", "crosshair", "drawings"]) {
       this.applySyncSetting(kind, sync?.[kind]);
     }
-    this.def = this.resolveLayout(boot?.layout && layoutDefinition(boot.layout) ? boot.layout : opts.layout ?? "4");
+    this.def = this.resolveLayout(boot?.layout && ensureLayout(boot.layout) ? boot.layout : opts.layout ?? "4");
     if (boot?.trackSizes) for (const [id, ts] of Object.entries(boot.trackSizes)) this.trackSizes.set(id, ts);
     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;
     const doc = hostEl.ownerDocument;
-    injectStyles(STYLE_ID18, CSS15, doc);
+    injectStyles(STYLE_ID19, CSS16, doc);
     this.root = doc.createElement("div");
     this.root.className = "vela-workspace";
     ensureUIHost(this.root, resolveTheme(opts.theme));
@@ -30883,14 +31932,23 @@ var VelaWorkspace = class {
       onPriceStyle: (style) => this.active.setPriceStyle(style),
       layout: {
         current: this.def.id,
-        options: () => layouts().map((l) => ({ id: l.id, label: l.label })),
-        onSelect: (id) => this.setLayout(id),
-        // Workspace-wide view toggles live under the grid presets. The check
-        // reflects the simple all-cells form; flipping OVERRIDES a host-set
-        // group record with plain on/off (groups stay an API-only shape).
-        toggles: () => [{ id: "crosshair-sync", label: "Sync crosshair", checked: this.syncOpts.crosshair === true }],
-        onToggle: (id) => {
-          if (id === "crosshair-sync") this.sync.set("crosshair", this.syncOpts.crosshair ? false : true);
+        // The picker composes dynamic layouts on its grid canvas; registered
+        // presets the canvas cannot express (bespoke plugin areas) list as rows.
+        shape: () => layoutShape(this.def),
+        presets: () => layouts().filter((l) => layoutShape(l) === null).map((l) => ({ id: l.id, label: l.label })),
+        onSelectGrid: (rows, cols) => this.setLayout(layoutForGrid(rows, cols)),
+        onSelectPreset: (id) => this.setLayout(id),
+        // The SYNC switches reflect the simple all-cells form; flipping one
+        // OVERRIDES a host-set group record with plain on/off (groups stay an
+        // API-only shape).
+        syncs: () => [
+          { id: "symbol", label: "Symbol", checked: this.syncOpts.symbol === true },
+          { id: "timeframe", label: "Interval", checked: this.syncOpts.timeframe === true },
+          { id: "crosshair", label: "Crosshair", checked: this.syncOpts.crosshair === true }
+        ],
+        onToggleSync: (id) => {
+          const kind = id;
+          this.sync.set(kind, this.syncOpts[kind] ? false : true);
         }
       },
       getContext: () => this.context()
@@ -30953,10 +32011,19 @@ var VelaWorkspace = class {
         this.active.chart.drawings.setStayMode(on);
         this.refocusActive();
       },
-      { dock: "static" }
+      {
+        dock: "static",
+        // Drawings sync is a WORKSPACE link (same model as the layout
+        // dropdown's switches) — the bar only hosts its toggle.
+        onDrawingsSync: (on) => {
+          this.sync.set("drawings", on);
+          this.refocusActive();
+        }
+      }
     ) : null;
     this.drawToolbar?.setDefinition(defaultToolbar());
     this.drawToolbar?.setVisible(true);
+    this.drawToolbar?.setDrawingsSyncMode(!!this.syncOpts.drawings);
     this.bottombar = opts.bottombar !== false ? new Bottombar(this.root, {
       timezone: this.timezone,
       onRange: (preset) => {
@@ -30969,6 +32036,7 @@ var VelaWorkspace = class {
     hostEl.appendChild(this.root);
     this.splitters = new SplitterLayer(this.gridEl, {
       tracks: () => this.currentTracks(),
+      grid: () => occupancyGrid(this.def),
       apply: (axis, weights) => this.applyTracks(axis, weights),
       reset: (axis) => this.applyTracks(axis, evenTracks(this.currentTracks()[axis].length)),
       gapPx: () => GAP_PX
@@ -31116,7 +32184,7 @@ var VelaWorkspace = class {
     }
     if (st.favorites) this.favs = [...st.favorites];
     this.dock.applyState(st.panels);
-    for (const kind of ["viewport", "symbol", "timeframe", "crosshair"]) this.applySyncSetting(kind, st.sync?.[kind]);
+    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);
     for (const [id, cell] of [...this.cellsById]) {
@@ -31125,9 +32193,10 @@ var VelaWorkspace = class {
       this.events.emit("cell:destroyed", { id });
     }
     this.pool.clear();
+    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 = layoutDefinition(st.layout);
+    const def = ensureLayout(st.layout);
     if (def) this.def = def;
     this.cellBackend = this.backendFor(this.def);
     this.applyGrid();
@@ -31178,6 +32247,7 @@ var VelaWorkspace = class {
     const next = this.resolveLayout(layout);
     const nextBackend = this.backendFor(next);
     const rebuildAll = nextBackend !== this.cellBackend;
+    this.order = orderAfterLayout(this.order, next.cells.length, this.activeId);
     const keep = new Set(this.order.slice(0, next.cells.length));
     for (const [id, cell] of [...this.cellsById]) {
       if (!keep.has(id) || rebuildAll) {
@@ -31301,7 +32371,7 @@ var VelaWorkspace = class {
   // ── internals ───────────────────────────────────────────────
   resolveLayout(layout) {
     if (typeof layout !== "string") return layout;
-    const def = layoutDefinition(layout);
+    const def = ensureLayout(layout);
     if (!def) throw new Error(`[vela] unknown workspace layout "${layout}" \u2014 register it with registerLayout().`);
     return def;
   }
@@ -31329,6 +32399,8 @@ var VelaWorkspace = class {
    *  `order[i]` — the identity/position decoupling in one line. */
   applyGrid() {
     const { container, perCell } = gridStyles(this.def, this.trackSizes.get(this.def.id));
+    if (this.def.cells.length > 1) this.gridEl.dataset.multi = "1";
+    else delete this.gridEl.dataset.multi;
     this.gridEl.style.gridTemplateColumns = container.gridTemplateColumns ?? "";
     this.gridEl.style.gridTemplateRows = container.gridTemplateRows ?? "";
     this.gridEl.style.gridTemplateAreas = container.gridTemplateAreas ?? "";
@@ -31376,6 +32448,7 @@ var VelaWorkspace = class {
       });
       cell.host.style.gridArea = perCell[slot.id]?.gridArea ?? "";
       this.cellsById.set(id, cell);
+      if (id === this.activeId) cell.host.dataset.active = "1";
       this.wireCell(cell);
       if (this.favs.length > 0) cell.chart.drawings.setFavorites(this.favs);
       cell.setManifest(this.manifest, pooled?.indicators == null);
@@ -31407,9 +32480,19 @@ var VelaWorkspace = class {
       this.markStateDirty();
     });
     chart.renderer.onCrosshairMove((e) => this.propagateCrosshair(cell.id, e.time));
-    chart.on("drawing:created", () => this.markStateDirty());
-    chart.on("drawing:edited", () => this.markStateDirty());
-    chart.on("drawing:removed", () => this.markStateDirty());
+    chart.on("drawing:created", ({ id }) => {
+      this.propagateDrawing(cell.id, id);
+      this.markStateDirty();
+    });
+    chart.on("drawing:draft", ({ doc }) => this.propagateDraft(cell.id, doc));
+    chart.on("drawing:edited", ({ id }) => {
+      this.propagateDrawingEdit(cell.id, id);
+      this.markStateDirty();
+    });
+    chart.on("drawing:removed", ({ id }) => {
+      this.propagateDrawingRemoval(cell.id, id);
+      this.markStateDirty();
+    });
     chart.on("drawing:tool", ({ type }) => {
       if (cell.id !== this.activeId) return;
       this.globalTool = type;
@@ -31437,6 +32520,12 @@ var VelaWorkspace = class {
   applySyncSetting(kind, setting, align = false) {
     if (setting == null || setting === false) delete this.syncOpts[kind];
     else this.syncOpts[kind] = setting;
+    if (kind === "drawings") {
+      for (const cell of this.cellsById.values()) cell.chart.drawings.setExternalGhost(null);
+      this.drawToolbar?.setDrawingsSyncMode(!!setting);
+      this.markStateDirty();
+      return;
+    }
     if (kind === "crosshair") {
       for (const cell of this.cellsById.values()) cell.chart.renderer.setExternalCrosshair(null);
       if (setting && ![...this.cellsById.values()].some((c) => c.chart.renderer.supportsExternalCrosshair)) {
@@ -31446,6 +32535,7 @@ var VelaWorkspace = class {
       this.markStateDirty();
       return;
     }
+    if (this.topbar && this.def) this.topbar.setLayout(this.def.id);
     this.markStateDirty();
     if (align && setting && this.activeId) {
       if (kind === "viewport") {
@@ -31497,6 +32587,101 @@ var VelaWorkspace = class {
       this.syncBusy = false;
     }
   }
+  /**
+   * Copy a freshly created drawing onto the origin's same-group followers (fresh ids
+   * through `drawings.add` — anchors are time+price, so the copy lands at the same
+   * spot whatever the follower shows) and register the whole set as LINKED: edits
+   * and removals of any member follow while the link is on ({@link drawingLinks}).
+   * The busy guard stops the copies' own `drawing:created` events from fanning out.
+   */
+  propagateDrawing(originId, drawingId) {
+    if (this.drawingSyncBusy || this.destroyed) return;
+    const setting = this.syncOpts.drawings;
+    if (!setting) return;
+    const doc = this.cellsById.get(originId)?.chart.drawings.all().find((d) => d.id === drawingId);
+    if (!doc) return;
+    this.drawingSyncBusy = true;
+    try {
+      const group = /* @__PURE__ */ new Map([[originId, drawingId]]);
+      for (const id of syncTargets(originId, setting, [...this.cellsById.keys()])) {
+        const copy = this.cellsById.get(id)?.chart.drawings.add(doc.type, {
+          paneId: doc.paneId,
+          anchors: doc.anchors,
+          style: doc.style,
+          text: doc.text,
+          props: doc.props
+        });
+        if (copy) group.set(id, copy.id);
+      }
+      if (group.size > 1) {
+        for (const [cellId, dId] of group) this.drawingLinks.set(`${cellId}\0${dId}`, group);
+      }
+    } finally {
+      this.drawingSyncBusy = false;
+    }
+  }
+  /** Mirror an in-progress placement (its current ghost, `null` = placement ended)
+   *  onto the origin's same-group followers — the live half of the drawings link;
+   *  the created copy replaces the ghosts when the placement completes. One-way by
+   *  contract (an external ghost never re-emits drafts), so no busy guard needed. */
+  propagateDraft(originId, doc) {
+    if (this.destroyed) return;
+    const setting = this.syncOpts.drawings;
+    if (!setting) return;
+    for (const id of syncTargets(originId, setting, [...this.cellsById.keys()])) {
+      this.cellsById.get(id)?.chart.drawings.setExternalGhost(doc);
+    }
+  }
+  /** Push a linked drawing's edited CONTENT (anchors, style, text, per-type props)
+   *  onto its same-group peers — any member propagates, not just the original. */
+  propagateDrawingEdit(originId, drawingId) {
+    if (this.drawingSyncBusy || this.destroyed) return;
+    const setting = this.syncOpts.drawings;
+    if (!setting) return;
+    const group = this.drawingLinks.get(`${originId}\0${drawingId}`);
+    if (!group) return;
+    const doc = this.cellsById.get(originId)?.chart.drawings.all().find((d) => d.id === drawingId);
+    if (!doc) return;
+    this.drawingSyncBusy = true;
+    try {
+      for (const id of syncTargets(originId, setting, [...this.cellsById.keys()])) {
+        const peerId = group.get(id);
+        if (peerId == null) continue;
+        this.cellsById.get(id)?.chart.drawings.update(peerId, {
+          anchors: doc.anchors,
+          style: doc.style,
+          text: doc.text,
+          props: doc.props
+        });
+      }
+    } finally {
+      this.drawingSyncBusy = false;
+    }
+  }
+  /** Remove a linked drawing's peers with it. The removed member always leaves its
+   *  link group (whatever the setting); peers are only deleted while the link is on.
+   *  A propagated peer removal re-enters here under the busy guard and just cleans
+   *  its own link key. */
+  propagateDrawingRemoval(originId, drawingId) {
+    if (this.destroyed) return;
+    const key = `${originId}\0${drawingId}`;
+    const group = this.drawingLinks.get(key);
+    if (!group) return;
+    this.drawingLinks.delete(key);
+    group.delete(originId);
+    if (this.drawingSyncBusy) return;
+    const setting = this.syncOpts.drawings;
+    if (!setting) return;
+    this.drawingSyncBusy = true;
+    try {
+      for (const id of syncTargets(originId, setting, [...this.cellsById.keys()])) {
+        const peerId = group.get(id);
+        if (peerId != null) this.cellsById.get(id)?.chart.drawings.remove(peerId);
+      }
+    } finally {
+      this.drawingSyncBusy = false;
+    }
+  }
   /**
    * Push an origin cell's symbol/timeframe onto its same-group followers (fired from
    * `market:changed`). Convergence comes from IDEMPOTENCE, not the guard: a follower's
@@ -31673,13 +32858,17 @@ var VelaWorkspace = class {
 };
 
 exports.ChartCell = ChartCell;
+exports.GRID_PICKER_MAX = GRID_PICKER_MAX;
 exports.VelaWorkspace = VelaWorkspace;
 exports.activeAfterLayout = activeAfterLayout;
 exports.decodeState = decodeState;
 exports.encodeState = encodeState;
+exports.ensureLayout = ensureLayout;
 exports.evenTracks = evenTracks;
 exports.gridStyles = gridStyles;
 exports.layoutDefinition = layoutDefinition;
+exports.layoutForGrid = layoutForGrid;
+exports.layoutShape = layoutShape;
 exports.layouts = layouts;
 exports.memoryStorageAdapter = memoryStorageAdapter;
 exports.rangesWithin = rangesWithin;