@luxalgo/vela 0.5.0 → 0.5.1

package/dist/index.cjs

@@ -531,6 +531,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",
@@ -6534,6 +6539,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);
@@ -6764,6 +6774,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);
@@ -7039,6 +7052,11 @@ var ProviderRegistry = class {
 };
 
 // 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);
@@ -9383,6 +9401,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;
@@ -9621,6 +9647,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,
@@ -11464,6 +11495,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);
@@ -11502,6 +11571,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);
@@ -11816,6 +11919,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`). */
@@ -13045,14 +13151,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];
@@ -13644,7 +13751,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
@@ -13672,9 +13778,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);
@@ -13716,6 +13836,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_SLOP) this.moved = true;
@@ -13729,7 +13851,7 @@ var InputController = class {
           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();
@@ -13752,7 +13874,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);
     };
@@ -13777,6 +13899,8 @@ var InputController = class {
       }
     };
     this.onLeave = () => {
+      this.cursorX = NaN;
+      this.cursorY = NaN;
       this.deps.onPointerMove(null, null);
     };
     this.onDblClick = (e) => {
@@ -13815,10 +13939,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);
@@ -14236,12 +14366,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];
@@ -14249,7 +14380,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;
@@ -15360,7 +15491,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: {} });
@@ -15392,8 +15523,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;
@@ -16250,6 +16381,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);
 }
@@ -16270,6 +16432,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";
@@ -16431,6 +16597,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 } })));
@@ -16445,7 +16634,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"));
@@ -16486,27 +16684,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;";
@@ -16525,7 +16703,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();
@@ -16565,7 +16743,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();
@@ -16595,6 +16780,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() {
@@ -16857,7 +17327,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;
@@ -16873,7 +17343,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;
@@ -16910,6 +17380,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);
@@ -18268,6 +18741,8 @@ function topDrawingAt(drawings, x, y, proj, tol = HIT_TOLERANCE) {
 // 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) {
@@ -18308,6 +18783,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;
@@ -18329,12 +18825,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;
@@ -18359,8 +18858,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;
@@ -18374,7 +18874,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;
     }
@@ -18385,7 +18886,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);
@@ -19738,6 +20243,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;
@@ -19754,6 +20261,7 @@ var DrawingToolbar = class {
     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";
@@ -19852,6 +20360,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);
@@ -19859,6 +20371,7 @@ var DrawingToolbar = class {
     this.paintEraser();
     this.paintMagnet();
     this.paintStay();
+    this.paintDrawingsSync();
     this.paintCollapse();
     this.highlight();
   }
@@ -19909,7 +20422,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 };
   }
@@ -20019,6 +20532,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. */
@@ -20178,6 +20708,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. */
@@ -20201,7 +20733,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;
@@ -20267,6 +20799,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");
@@ -20490,6 +21023,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;
@@ -20561,6 +21098,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();
@@ -20719,7 +21261,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;
@@ -20729,7 +21271,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). */
@@ -21115,6 +21657,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();
@@ -21176,6 +21720,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) {
@@ -21719,10 +22272,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
@@ -21922,6 +22475,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);
   }
@@ -22399,6 +22953,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));
@@ -22504,7 +23059,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();
       },
@@ -22705,10 +23260,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;
@@ -22780,7 +23341,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,
@@ -23017,6 +23578,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();
   }
@@ -23185,6 +23747,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;
   }
@@ -23344,6 +23907,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) {
@@ -23505,7 +24069,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;
@@ -23957,9 +24524,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_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() {
@@ -23992,18 +24587,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();
       }
     }
@@ -24013,7 +24606,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;
@@ -24447,15 +25040,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() {
@@ -24525,7 +25121,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;
@@ -24594,6 +25196,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);
 }