@luxalgo/vela 0.5.0 → 0.5.1

package/dist/vela.global.js

@@ -532,6 +532,11 @@ var Vela = (function (exports) {
     "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",
@@ -6535,6 +6540,11 @@ var Vela = (function (exports) {
     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);
@@ -6765,6 +6775,9 @@ var Vela = (function (exports) {
         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);
@@ -7040,6 +7053,11 @@ var Vela = (function (exports) {
   };
 
   // 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);
@@ -9384,6 +9402,14 @@ var Vela = (function (exports) {
       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;
@@ -9622,6 +9648,11 @@ var Vela = (function (exports) {
       "--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,
@@ -11465,6 +11496,44 @@ var Vela = (function (exports) {
     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);
@@ -11503,6 +11572,40 @@ var Vela = (function (exports) {
   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);
@@ -11817,6 +11920,9 @@ var Vela = (function (exports) {
       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`). */
@@ -13046,14 +13152,15 @@ void main() {
     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];
@@ -13645,7 +13752,6 @@ void main() {
     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
@@ -13673,9 +13779,23 @@ void main() {
       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);
@@ -13717,6 +13837,8 @@ void main() {
       };
       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_SLOP) this.moved = true;
@@ -13730,7 +13852,7 @@ void main() {
             this.deps.apply({ barSpacing, rightOffset: this.startRightOffset });
           } else if (this.region === "drawing") {
             if (Math.abs(x - this.startX) > DRAG_SLOP || Math.abs(y - this.startY) > DRAG_SLOP) 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();
@@ -13753,7 +13875,7 @@ void main() {
           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);
       };
@@ -13778,6 +13900,8 @@ void main() {
         }
       };
       this.onLeave = () => {
+        this.cursorX = NaN;
+        this.cursorY = NaN;
         this.deps.onPointerMove(null, null);
       };
       this.onDblClick = (e) => {
@@ -13816,10 +13940,16 @@ void main() {
       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);
@@ -14237,12 +14367,13 @@ void main() {
     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];
@@ -14250,7 +14381,7 @@ void main() {
         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;
@@ -15361,7 +15492,7 @@ void main() {
     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: {} });
@@ -15393,8 +15524,8 @@ void main() {
       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;
@@ -16251,6 +16382,37 @@ void main() {
 .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);
   }
@@ -16271,6 +16433,10 @@ void main() {
       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";
@@ -16432,6 +16598,29 @@ void main() {
       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 } })));
@@ -16446,7 +16635,16 @@ void main() {
           }
         }
       };
+      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"));
@@ -16487,27 +16685,7 @@ void main() {
         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;";
@@ -16526,7 +16704,7 @@ void main() {
           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();
@@ -16566,7 +16744,14 @@ void main() {
       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();
@@ -16596,6 +16781,291 @@ void main() {
       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() {
@@ -16858,7 +17328,7 @@ void main() {
       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;
@@ -16874,7 +17344,7 @@ void main() {
       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;
@@ -16911,6 +17381,9 @@ void main() {
     }
   };
   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);
@@ -18269,6 +18742,8 @@ void main() {
   // src/renderers/native/drawings/DrawingInteraction.ts
   var DRAG_SLOP2 = 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) {
@@ -18309,6 +18784,27 @@ void main() {
       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;
@@ -18330,12 +18826,15 @@ void main() {
       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;
@@ -18360,8 +18859,9 @@ void main() {
         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;
@@ -18375,7 +18875,8 @@ void main() {
           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;
       }
@@ -18386,7 +18887,11 @@ void main() {
       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);
@@ -19739,6 +20244,8 @@ void main() {
       this.eraserActive = false;
       this.stayBtn = null;
       this.stayActive = false;
+      this.syncBtn = null;
+      this.syncActive = false;
       this.collapseBtn = null;
       this.collapsed = false;
       this.visible = false;
@@ -19755,6 +20262,7 @@ void main() {
       this.dock = options.dock ?? "absolute";
       this.onCollapse = options.onCollapse ?? (() => {
       });
+      this.onDrawingsSync = options.onDrawingsSync ?? null;
       ensureStyles4();
       this.root = document.createElement("div");
       this.root.className = "vela-dtb";
@@ -19853,6 +20361,10 @@ void main() {
       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);
@@ -19860,6 +20372,7 @@ void main() {
       this.paintEraser();
       this.paintMagnet();
       this.paintStay();
+      this.paintDrawingsSync();
       this.paintCollapse();
       this.highlight();
     }
@@ -19910,7 +20423,7 @@ void main() {
         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 };
     }
@@ -20020,6 +20533,23 @@ void main() {
       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. */
@@ -20179,6 +20709,8 @@ void main() {
       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. */
@@ -20202,7 +20734,7 @@ void main() {
       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;
@@ -20268,6 +20800,7 @@ void main() {
   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");
@@ -20491,6 +21024,10 @@ void main() {
       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;
@@ -20562,6 +21099,11 @@ void main() {
     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();
@@ -20720,7 +21262,7 @@ void main() {
       }
       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;
@@ -20730,7 +21272,7 @@ void main() {
         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). */
@@ -21116,6 +21658,8 @@ void main() {
       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();
@@ -21177,6 +21721,15 @@ void main() {
         }
       }, () => 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) {
@@ -21720,10 +22273,10 @@ void main() {
   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
@@ -21923,6 +22476,7 @@ void main() {
         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);
     }
@@ -22400,6 +22954,7 @@ void main() {
         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));
@@ -22505,7 +23060,7 @@ void main() {
         (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();
         },
@@ -22706,10 +23261,16 @@ void main() {
         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;
@@ -22781,7 +23342,7 @@ void main() {
         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,
@@ -23018,6 +23579,7 @@ void main() {
       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();
     }
@@ -23186,6 +23748,7 @@ void main() {
       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;
     }
@@ -23345,6 +23908,7 @@ void main() {
       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) {
@@ -23506,7 +24070,10 @@ void main() {
           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;
@@ -23958,9 +24525,37 @@ void main() {
         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_ID);
+      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() {
@@ -23993,18 +24588,16 @@ void main() {
         });
         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();
         }
       }
@@ -24014,7 +24607,7 @@ void main() {
       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;
@@ -24448,15 +25041,18 @@ void main() {
     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() {
@@ -24526,7 +25122,13 @@ void main() {
         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;
@@ -24595,6 +25197,9 @@ void main() {
     }
     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);
   }