@luxalgo/vela 0.5.0 → 0.5.1

package/dist/widget.cjs

@@ -552,6 +552,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",
@@ -6555,6 +6560,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);
@@ -6785,6 +6795,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);
@@ -7060,6 +7073,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);
@@ -9390,6 +9408,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;
@@ -9628,6 +9654,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,
@@ -11471,6 +11502,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);
@@ -11509,6 +11578,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);
@@ -11823,6 +11926,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`). */
@@ -13052,14 +13158,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];
@@ -13651,7 +13758,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
@@ -13679,9 +13785,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);
@@ -13723,6 +13843,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;
@@ -13736,7 +13858,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();
@@ -13759,7 +13881,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);
     };
@@ -13784,6 +13906,8 @@ var InputController = class {
       }
     };
     this.onLeave = () => {
+      this.cursorX = NaN;
+      this.cursorY = NaN;
       this.deps.onPointerMove(null, null);
     };
     this.onDblClick = (e) => {
@@ -13822,10 +13946,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);
@@ -14243,12 +14373,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];
@@ -14256,7 +14387,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;
@@ -15367,7 +15498,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: {} });
@@ -15399,8 +15530,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;
@@ -16265,6 +16396,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);
 }
@@ -16285,6 +16447,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";
@@ -16446,6 +16612,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 } })));
@@ -16460,7 +16649,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"));
@@ -16501,27 +16699,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;";
@@ -16540,7 +16718,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();
@@ -16580,7 +16758,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();
@@ -16610,6 +16795,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() {
@@ -16872,7 +17342,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;
@@ -16888,7 +17358,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;
@@ -16925,6 +17395,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);
@@ -18283,6 +18756,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) {
@@ -18323,6 +18798,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;
@@ -18344,12 +18840,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;
@@ -18374,8 +18873,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;
@@ -18389,7 +18889,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;
     }
@@ -18400,7 +18901,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);
@@ -19753,6 +20258,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;
@@ -19769,6 +20276,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";
@@ -19867,6 +20375,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);
@@ -19874,6 +20386,7 @@ var DrawingToolbar = class {
     this.paintEraser();
     this.paintMagnet();
     this.paintStay();
+    this.paintDrawingsSync();
     this.paintCollapse();
     this.highlight();
   }
@@ -19924,7 +20437,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 };
   }
@@ -20034,6 +20547,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. */
@@ -20193,6 +20723,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. */
@@ -20216,7 +20748,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;
@@ -20282,6 +20814,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");
@@ -20505,6 +21038,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;
@@ -20576,6 +21113,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();
@@ -20734,7 +21276,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;
@@ -20744,7 +21286,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). */
@@ -21130,6 +21672,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();
@@ -21191,6 +21735,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) {
@@ -21728,10 +22281,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
@@ -21931,6 +22484,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);
   }
@@ -22408,6 +22962,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));
@@ -22513,7 +23068,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();
       },
@@ -22714,10 +23269,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;
@@ -22789,7 +23350,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,
@@ -23026,6 +23587,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();
   }
@@ -23194,6 +23756,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;
   }
@@ -23353,6 +23916,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) {
@@ -23514,7 +24078,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;
@@ -23966,9 +24533,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() {
@@ -24001,18 +24596,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();
       }
     }
@@ -24022,7 +24615,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;
@@ -24456,15 +25049,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() {
@@ -24534,7 +25130,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;
@@ -24603,6 +25205,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);
 }
@@ -25839,6 +26444,326 @@ var Dialog = class {
   }
 };
 
+// src/widget/layout-picker.ts
+var STYLE_ID6 = "vela-widget-layout-picker-v14";
+var CSS3 = `
+.vela-lp-layer { position: absolute; z-index: var(--vela-z-menu); }
+.vela-lp {
+    background: var(--vela-surface-elev);
+    color: var(--vela-fg);
+    border: 1px solid var(--vela-border-strong);
+    border-radius: 8px;
+    box-shadow: var(--vela-shadow);
+    padding: 10px 12px 10px;
+    font-size: 13px;
+    user-select: none;
+    transform-origin: top;
+    animation: vela-lp-in var(--vela-dur-fast) var(--vela-ease);
+}
+@keyframes vela-lp-in {
+    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+}
+.vela-lp-cols { display: flex; align-items: stretch; gap: 14px; }
+.vela-lp-heading {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 1.2px;
+    text-transform: uppercase;
+    color: var(--vela-fg-faint);
+    margin-bottom: 10px;
+}
+/* "?" help badge: hover it for the canvas explainer. */
+.vela-lp-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    border: 1px solid var(--vela-border-strong);
+    color: var(--vela-fg-muted);
+    font-size: 9px;
+    font-weight: 600;
+    letter-spacing: 0;
+    cursor: default;
+    transition: color var(--vela-dur-fast) var(--vela-ease), border-color var(--vela-dur-fast) var(--vela-ease);
+}
+.vela-lp-badge:hover { color: var(--vela-fg-bright); border-color: var(--vela-fg-muted); }
+.vela-lp-tip { display: flex; flex-direction: column; gap: 4px; max-width: 230px; white-space: normal; }
+.vela-lp-vsep { width: 1px; flex: none; align-self: stretch; background: var(--vela-border-faint); }
+.vela-lp-layout { width: 132px; display: flex; flex-direction: column; align-items: center; }
+.vela-lp-layout > .vela-lp-heading,
+.vela-lp-layout > .vela-lp-presets { align-self: stretch; }
+.vela-lp-grid { display: grid; grid-template-columns: repeat(4, 24px); grid-auto-rows: 24px; gap: 4px; }
+.vela-lp-sq {
+    all: unset;
+    box-sizing: border-box;
+    border-radius: 4px;
+    background: var(--vela-hover);
+    border: 1px solid var(--vela-border-faint);
+    cursor: pointer;
+    transition: background var(--vela-dur-fast) var(--vela-ease), border-color var(--vela-dur-fast) var(--vela-ease);
+}
+.vela-lp-sq:hover { background: var(--vela-hover-strong); border-color: var(--vela-border-strong); }
+/* Selected/previewed squares \u2014 the shared monochrome selection chip. */
+.vela-lp-sq[data-on='1'] {
+    background: var(--vela-selected-bg);
+    border-color: var(--vela-selected-bg);
+}
+.vela-lp-presets { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
+.vela-lp-preset { all: unset; padding: 5px 8px; border-radius: 4px; cursor: pointer; color: var(--vela-fg-muted); font-size: 12px; white-space: nowrap; transition: transform 120ms var(--vela-ease); }
+.vela-lp-preset:hover { background: var(--vela-hover); }
+.vela-lp-preset:active { transform: scale(0.98); }
+.vela-lp-preset[data-checked='1'] { background: var(--vela-hover-strong); color: var(--vela-fg-bright); }
+.vela-lp-sync { display: flex; flex-direction: column; gap: 4px; min-width: 118px; }
+.vela-lp-sync-row { all: unset; display: flex; align-items: center; gap: 14px; padding: 6px 8px; border-radius: 5px; cursor: pointer; }
+.vela-lp-sync-row:hover { background: var(--vela-hover); }
+.vela-lp-sync-row .vela-lp-label { flex: 1 1 auto; }
+/* Toggle pill \u2014 same control language as the menu's switch rows, monochrome ON state. */
+.vela-lp-switch {
+    position: relative;
+    flex: none;
+    width: 34px;
+    height: 18px;
+    border-radius: 9px;
+    background: var(--vela-hover);
+    border: 1px solid var(--vela-border-soft);
+    transition: background 0.16s ease, border-color 0.16s ease;
+}
+.vela-lp-switch::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: var(--vela-fg-muted);
+    transition: transform 0.16s ease, background 0.16s ease;
+}
+.vela-lp-switch.on { background: var(--vela-selected-bg); border-color: var(--vela-selected-bg); }
+.vela-lp-switch.on::after { transform: translateX(16px); background: var(--vela-selected-fg); }
+`;
+var GRID = 4;
+var LayoutPicker = class {
+  constructor(opts) {
+    this.squares = [];
+    this.isOpen = false;
+    /** Hover preview (1-based rows/cols), null = show current shape. */
+    this.hover = null;
+    this.onDocPointerDown = (e) => {
+      const t = e.target;
+      if (t && (this.layer.contains(t) || this.opts.trigger.contains(t))) return;
+      this.close();
+    };
+    this.onDocKeydown = (e) => {
+      if (e.key === "Escape") this.close();
+    };
+    this.opts = opts;
+    this.doc = opts.host.ownerDocument;
+    injectStyles(STYLE_ID6, CSS3, this.doc);
+    const doc = this.doc;
+    this.layer = doc.createElement("div");
+    this.layer.className = "vela-ui-layer vela-lp-layer";
+    this.layer.style.display = "none";
+    const panel = doc.createElement("div");
+    panel.className = "vela-lp";
+    this.layer.appendChild(panel);
+    const cols = doc.createElement("div");
+    cols.className = "vela-lp-cols";
+    panel.appendChild(cols);
+    const layoutCol = doc.createElement("div");
+    layoutCol.className = "vela-lp-layout";
+    const layoutHeading = doc.createElement("div");
+    layoutHeading.className = "vela-lp-heading";
+    const headingText = doc.createElement("span");
+    headingText.textContent = "Layout";
+    const badge = doc.createElement("span");
+    badge.className = "vela-lp-badge";
+    badge.textContent = "?";
+    layoutHeading.append(headingText, badge);
+    layoutCol.appendChild(layoutHeading);
+    this.infoTip = new Tooltip(badge, {
+      host: opts.host,
+      placement: "bottom",
+      content: () => this.tipNode()
+    });
+    const grid = doc.createElement("div");
+    grid.className = "vela-lp-grid";
+    for (let r = 0; r < GRID; r += 1) {
+      for (let c = 0; c < GRID; c += 1) {
+        const sq = doc.createElement("button");
+        sq.className = "vela-lp-sq";
+        sq.dataset.r = String(r);
+        sq.dataset.c = String(c);
+        sq.setAttribute("aria-label", `${c + 1} \xD7 ${r + 1}`);
+        this.squares.push(sq);
+        grid.appendChild(sq);
+      }
+    }
+    layoutCol.appendChild(grid);
+    this.presetsEl = doc.createElement("div");
+    this.presetsEl.className = "vela-lp-presets";
+    layoutCol.appendChild(this.presetsEl);
+    cols.appendChild(layoutCol);
+    const vsep = doc.createElement("div");
+    vsep.className = "vela-lp-vsep";
+    cols.appendChild(vsep);
+    const syncCol = doc.createElement("div");
+    const syncHeading = doc.createElement("div");
+    syncHeading.className = "vela-lp-heading";
+    syncHeading.textContent = "Sync";
+    syncCol.appendChild(syncHeading);
+    this.syncEl = doc.createElement("div");
+    this.syncEl.className = "vela-lp-sync";
+    syncCol.appendChild(this.syncEl);
+    cols.appendChild(syncCol);
+    grid.addEventListener("pointerdown", (e) => {
+      const sq = this.squareAt(e);
+      if (!sq) return;
+      e.preventDefault();
+      const { r, c } = this.squarePos(sq);
+      this.close();
+      this.opts.onSelectGrid(r + 1, c + 1);
+    });
+    grid.addEventListener("pointermove", (e) => {
+      const sq = this.squareAt(e);
+      if (!sq) return;
+      const { r, c } = this.squarePos(sq);
+      if (this.hover?.rows !== r + 1 || this.hover?.cols !== c + 1) {
+        this.hover = { rows: r + 1, cols: c + 1 };
+        this.render();
+      }
+    });
+    grid.addEventListener("pointerleave", () => {
+      if (this.hover) {
+        this.hover = null;
+        this.render();
+      }
+    });
+    opts.trigger.addEventListener("click", () => this.toggle());
+    opts.trigger.setAttribute("aria-haspopup", "true");
+    opts.trigger.setAttribute("aria-expanded", "false");
+    opts.host.appendChild(this.layer);
+  }
+  toggle() {
+    if (this.isOpen) this.close();
+    else this.open();
+  }
+  open() {
+    if (this.isOpen) return;
+    this.isOpen = true;
+    this.hover = null;
+    this.refresh();
+    this.layer.style.display = "";
+    this.position();
+    this.opts.trigger.setAttribute("aria-expanded", "true");
+    this.doc.addEventListener("pointerdown", this.onDocPointerDown, true);
+    this.doc.addEventListener("keydown", this.onDocKeydown, true);
+    this.opts.onOpenChange?.(true);
+  }
+  close() {
+    if (!this.isOpen) return;
+    this.isOpen = false;
+    this.layer.style.display = "none";
+    this.opts.trigger.setAttribute("aria-expanded", "false");
+    this.doc.removeEventListener("pointerdown", this.onDocPointerDown, true);
+    this.doc.removeEventListener("keydown", this.onDocKeydown, true);
+    this.opts.onOpenChange?.(false);
+  }
+  /** Re-read shape/presets/syncs and re-render (no-op while closed — `open` re-reads). */
+  refresh() {
+    if (!this.isOpen) return;
+    this.renderPresets();
+    this.renderSyncs();
+    this.render();
+  }
+  destroy() {
+    this.close();
+    this.infoTip.destroy();
+    this.layer.remove();
+  }
+  // ── internals ──
+  squareAt(e) {
+    const sq = e.target?.closest?.(".vela-lp-sq");
+    return sq instanceof HTMLButtonElement ? sq : null;
+  }
+  squarePos(sq) {
+    return { r: Number(sq.dataset.r), c: Number(sq.dataset.c) };
+  }
+  /** Help copy for the LAYOUT "?" badge. */
+  tipNode() {
+    const tip = this.doc.createElement("div");
+    tip.className = "vela-lp-tip";
+    tip.textContent = "Click a square to apply that columns \xD7 rows layout.";
+    return tip;
+  }
+  /** Project the interaction state onto the DOM (the hover/current rectangle). */
+  render() {
+    const preview = this.hover ?? this.opts.shape();
+    for (const sq of this.squares) {
+      const { r, c } = this.squarePos(sq);
+      const on = preview !== null && r < preview.rows && c < preview.cols;
+      if (on) sq.dataset.on = "1";
+      else delete sq.dataset.on;
+    }
+  }
+  renderPresets() {
+    const doc = this.doc;
+    this.presetsEl.replaceChildren();
+    const presets = this.opts.presets();
+    this.presetsEl.style.display = presets.length > 0 ? "" : "none";
+    for (const p of presets) {
+      const b = doc.createElement("button");
+      b.className = "vela-lp-preset";
+      b.textContent = p.label;
+      if (p.checked) b.dataset.checked = "1";
+      b.addEventListener("click", () => {
+        this.close();
+        this.opts.onSelectPreset(p.id);
+      });
+      this.presetsEl.appendChild(b);
+    }
+  }
+  renderSyncs() {
+    const doc = this.doc;
+    this.syncEl.replaceChildren();
+    for (const s of this.opts.syncs()) {
+      const row = doc.createElement("button");
+      row.className = "vela-lp-sync-row";
+      const label = doc.createElement("span");
+      label.className = "vela-lp-label";
+      label.textContent = s.label;
+      const pill = doc.createElement("span");
+      pill.className = "vela-lp-switch" + (s.checked ? " on" : "");
+      pill.setAttribute("aria-hidden", "true");
+      row.setAttribute("role", "switch");
+      row.setAttribute("aria-checked", String(s.checked));
+      row.append(label, pill);
+      row.addEventListener("click", () => {
+        this.opts.onToggleSync(s.id);
+        this.renderSyncs();
+      });
+      this.syncEl.appendChild(row);
+    }
+  }
+  /** Anchor under the trigger, clamped to the host's right edge. */
+  position() {
+    const hostRect = this.opts.host.getBoundingClientRect();
+    const trigRect = this.opts.trigger.getBoundingClientRect();
+    let left = trigRect.left - hostRect.left;
+    const top = trigRect.bottom - hostRect.top + 4;
+    const width = this.layer.offsetWidth;
+    if (left + width > hostRect.width - 8) left = Math.max(8, hostRect.width - 8 - width);
+    this.layer.style.left = `${left}px`;
+    this.layer.style.top = `${top}px`;
+  }
+};
+
 // src/widget/contributions.ts
 var registry4 = /* @__PURE__ */ new Map();
 var attachments = /* @__PURE__ */ new Map();
@@ -25984,8 +26909,8 @@ function timeframeLabel(value) {
 }
 
 // src/widget/topbar.ts
-var STYLE_ID6 = "vela-topbar";
-var CSS3 = `
+var STYLE_ID7 = "vela-topbar";
+var CSS4 = `
 .vela-widget-topbar {
     display: flex;
     align-items: center;
@@ -26097,7 +27022,7 @@ function priceStyleIcon(id) {
 var Topbar = class {
   constructor(host, opts) {
     this.layoutButton = null;
-    this.layoutMenu = null;
+    this.layoutPicker = null;
     this.layoutId = null;
     this.tooltips = [];
     this.panelBtns = /* @__PURE__ */ new Map();
@@ -26117,7 +27042,7 @@ var Topbar = class {
     this.timeframe = opts.timeframe;
     this.priceStyle = opts.priceStyle;
     const doc = host.ownerDocument;
-    injectStyles(STYLE_ID6, CSS3, doc);
+    injectStyles(STYLE_ID7, CSS4, doc);
     this.el = doc.createElement("div");
     this.el.className = "vela-widget-topbar";
     this.symbolEl = doc.createElement("button");
@@ -26174,19 +27099,16 @@ var Topbar = class {
     this.tooltips.push(new Tooltip(this.styleButton, { content: "Chart style", triggerId: "vela-topbar-style", host }));
     if (this.layoutButton && opts.layout) {
       this.tooltips.push(new Tooltip(this.layoutButton, { content: "Layout", triggerId: "vela-topbar-layout", host }));
-      this.layoutMenu = new Menu({
+      const layout = opts.layout;
+      this.layoutPicker = new LayoutPicker({
         trigger: this.layoutButton,
-        triggerId: "vela-topbar-layout",
         host,
-        items: this.layoutItems(),
-        onSelect: (id) => {
-          if (id.startsWith("toggle:")) {
-            opts.layout.onToggle?.(id.slice("toggle:".length));
-            this.layoutMenu?.setItems(this.layoutItems());
-            return;
-          }
-          opts.layout.onSelect(id);
-        }
+        shape: () => layout.shape(),
+        presets: () => layout.presets().map((p) => ({ ...p, checked: p.id === this.layoutId })),
+        onSelectGrid: (rows, cols) => layout.onSelectGrid(rows, cols),
+        onSelectPreset: (id) => layout.onSelectPreset(id),
+        syncs: () => layout.syncs(),
+        onToggleSync: (id) => layout.onToggleSync(id)
       });
     }
     this.tfMenu = new Menu({
@@ -26225,7 +27147,7 @@ var Topbar = class {
     if (!this.layoutButton) return;
     this.layoutId = id;
     this.renderLayoutButton(this.layoutButton.ownerDocument);
-    this.layoutMenu?.setItems(this.layoutItems());
+    this.layoutPicker?.refresh();
   }
   renderLayoutButton(doc) {
     if (!this.layoutButton) return;
@@ -26234,11 +27156,6 @@ var Topbar = class {
     else this.layoutButton.appendChild(doc.createTextNode(this.layoutId ?? ""));
     this.layoutButton.setAttribute("aria-label", `Layout \u2014 ${this.layoutId ?? ""}`);
   }
-  layoutItems() {
-    const presets = (this.opts.layout?.options() ?? []).map((l) => ({ id: l.id, label: l.label, checked: l.id === this.layoutId }));
-    const toggles = (this.opts.layout?.toggles?.() ?? []).map((t, i) => ({ id: `toggle:${t.id}`, label: t.label, checked: t.checked, toggle: true, separatorBefore: i === 0 }));
-    return [...presets, ...toggles];
-  }
   renderStyleButton(doc) {
     this.styleButton.replaceChildren();
     const icon2 = priceStyleIcon(this.priceStyle);
@@ -26303,7 +27220,7 @@ var Topbar = class {
     if (this.hairlineRaf) win?.cancelAnimationFrame(this.hairlineRaf);
     this.tfMenu.destroy();
     this.styleMenu.destroy();
-    this.layoutMenu?.destroy();
+    this.layoutPicker?.destroy();
     for (const t of [...this.tooltips, ...this.panelTooltips]) t.destroy();
     this.el.remove();
   }
@@ -26405,8 +27322,8 @@ function tickerIconEl(doc, base, name, className) {
 }
 
 // src/widget/statusline.ts
-var STYLE_ID7 = "vela-widget-statusline";
-var CSS4 = `
+var STYLE_ID8 = "vela-widget-statusline";
+var CSS5 = `
 .vela-statusline {
     position: absolute;
     top: var(--vela-space-2);
@@ -26541,7 +27458,7 @@ var Statusline = class {
     /** 'ohlc' for bar-shaped styles; 'value' (the single plotted close) for line styles. */
     this.readout = "ohlc";
     const doc = host.ownerDocument;
-    injectStyles(STYLE_ID7, CSS4, doc);
+    injectStyles(STYLE_ID8, CSS5, doc);
     host.classList.add("vela-has-statusline");
     this.el = doc.createElement("div");
     this.el.className = "vela-statusline";
@@ -26664,11 +27581,21 @@ var Statusline = class {
 };
 
 // src/widget/watermark.ts
-var STYLE_ID8 = "vela-widget-watermark";
-var CSS5 = `
+var MAX_FONT_PX = 72;
+var MIN_FONT_PX = 12;
+var FILL = 0.9;
+var STYLE_ID9 = "vela-widget-watermark";
+var CSS6 = `
 .vela-watermark {
     position: absolute;
-    inset: 0;
+    /* Insets follow the renderer-published gutters (mount container), so the mark
+     * centers and fits within the PLOT \u2014 never bleeding into the drawings toolbar
+     * on the left or the price scale on the right (visible in small multi-chart
+     * cells, where the scale is a large share of the width). */
+    top: 0;
+    bottom: 0;
+    left: var(--vela-toolbar-gutter, 0px);
+    right: var(--vela-scale-gutter, 0px);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -26676,28 +27603,48 @@ var CSS5 = `
     z-index: 1;
     color: var(--vela-fg);
     opacity: 0.05;
-    font-size: clamp(28px, 7vw, 72px);
+    font-size: ${MAX_FONT_PX}px;
     font-weight: 700;
     letter-spacing: 0.04em;
     user-select: none;
     white-space: nowrap;
 }
 `;
+function watermarkFontPx(availPx, textPxAtMax) {
+  if (textPxAtMax <= 0) return MAX_FONT_PX;
+  return Math.max(MIN_FONT_PX, Math.min(MAX_FONT_PX, Math.floor(MAX_FONT_PX * availPx * FILL / textPxAtMax)));
+}
 var Watermark = class {
   constructor(host, symbol, timeframe) {
-    injectStyles(STYLE_ID8, CSS5, host.ownerDocument);
+    this.resizeObserver = null;
+    injectStyles(STYLE_ID9, CSS6, host.ownerDocument);
     this.el = host.ownerDocument.createElement("div");
     this.el.className = "vela-watermark";
+    this.text = host.ownerDocument.createElement("span");
+    this.el.appendChild(this.text);
     host.appendChild(this.el);
+    if (typeof ResizeObserver !== "undefined") {
+      this.resizeObserver = new ResizeObserver(() => this.fit());
+      this.resizeObserver.observe(this.el);
+    }
     this.update(symbol, timeframe);
   }
   setVisible(visible) {
     this.el.style.display = visible ? "" : "none";
   }
   update(symbol, timeframe) {
-    this.el.textContent = symbol ? `${parseSymbol(symbol).ticker} \xB7 ${timeframeLabel(timeframe)}` : "";
+    this.text.textContent = symbol ? `${parseSymbol(symbol).ticker} \xB7 ${timeframeLabel(timeframe)}` : "";
+    this.fit();
+  }
+  /** Measure the text at the cap and shrink it to the chart's own width. */
+  fit() {
+    if (this.el.clientWidth <= 0 || !this.text.textContent) return;
+    this.el.style.fontSize = `${MAX_FONT_PX}px`;
+    const px = watermarkFontPx(this.el.clientWidth, this.text.getBoundingClientRect().width);
+    if (px !== MAX_FONT_PX) this.el.style.fontSize = `${px}px`;
   }
   destroy() {
+    this.resizeObserver?.disconnect();
     this.el.remove();
   }
 };
@@ -26723,8 +27670,8 @@ var RANGE_PRESETS = [
   { id: "ALL", tf: "W", preset: "ALL", bars: 5e3 }
   // everything the provider serves
 ];
-var STYLE_ID9 = "vela-widget-bottombar";
-var CSS6 = `
+var STYLE_ID10 = "vela-widget-bottombar";
+var CSS7 = `
 .vela-widget-bottombar {
     display: flex;
     align-items: center;
@@ -26799,7 +27746,7 @@ var Bottombar = class {
     this.timer = null;
     this.timezone = opts.timezone;
     const doc = host.ownerDocument;
-    injectStyles(STYLE_ID9, CSS6, doc);
+    injectStyles(STYLE_ID10, CSS7, doc);
     this.el = doc.createElement("div");
     this.el.className = "vela-widget-bottombar";
     for (const preset of RANGE_PRESETS) {
@@ -26937,8 +27884,8 @@ function filterSymbols(list, query, limit = 100) {
   }
   return [...prefix, ...substr, ...desc, ...venue].slice(0, limit);
 }
-var STYLE_ID10 = "vela-widget-symbolpicker";
-var CSS7 = `
+var STYLE_ID11 = "vela-widget-symbolpicker";
+var CSS8 = `
 .vela-sp-searchrow {
     display: flex;
     align-items: center;
@@ -27028,7 +27975,7 @@ var SymbolPicker = class {
     this.seed = "";
     this.activeTab = "All";
     const doc = (opts.host ?? document.body).ownerDocument;
-    injectStyles(STYLE_ID10, CSS7, doc);
+    injectStyles(STYLE_ID11, CSS8, doc);
     this.input = doc.createElement("input");
     this.input.className = "vela-sp-input";
     this.input.placeholder = "Search symbol\u2026";
@@ -27350,11 +28297,11 @@ function treeIsEmpty(panes) {
 }
 
 // src/widget/side-panel.ts
-var STYLE_ID11 = "vela-widget-sidepanel";
+var STYLE_ID12 = "vela-widget-sidepanel";
 var DEFAULT_PANEL_WIDTH = 280;
 var DEFAULT_PANEL_MIN_WIDTH = 200;
 var DEFAULT_PANEL_MAX_WIDTH = 640;
-var CSS8 = `
+var CSS9 = `
 .vela-panel[hidden] { display: none !important; }
 .vela-panel {
     position: relative;
@@ -27443,7 +28390,7 @@ var SidePanel = class {
      *  a programmatic {@link setWidth}, so restoring a persisted width raises no change. */
     this.onWidthChange = null;
     const doc = host.ownerDocument;
-    injectStyles(STYLE_ID11, CSS8, doc);
+    injectStyles(STYLE_ID12, CSS9, doc);
     this.minWidth = opts.resizable ? opts.minWidth ?? DEFAULT_PANEL_MIN_WIDTH : 1;
     this.maxWidth = opts.resizable ? opts.maxWidth ?? DEFAULT_PANEL_MAX_WIDTH : Number.POSITIVE_INFINITY;
     this.declaredWidth = clampPanelWidth(opts.width ?? DEFAULT_PANEL_WIDTH, this.minWidth, this.maxWidth);
@@ -27552,8 +28499,8 @@ var SidePanel = class {
 };
 
 // src/widget/object-tree.ts
-var STYLE_ID12 = "vela-widget-objtree";
-var CSS9 = `
+var STYLE_ID13 = "vela-widget-objtree";
+var CSS10 = `
 /* One pane's block. The transparent border reserves the drop-target outline. */
 .vela-ot-pane {
     border: 1px solid transparent;
@@ -27791,7 +28738,7 @@ var ObjectTree = class extends SidePanel {
     this.menu = null;
     this.menuActions = /* @__PURE__ */ new Map();
     this.drag = null;
-    injectStyles(STYLE_ID12, CSS9, host.ownerDocument);
+    injectStyles(STYLE_ID13, CSS10, host.ownerDocument);
     this.body.addEventListener("contextmenu", (e) => this.onContextMenu(e));
     this.body.addEventListener("pointerdown", (e) => this.onPointerDown(e));
   }
@@ -28770,8 +29717,8 @@ var ObjectTree = class extends SidePanel {
 };
 
 // src/widget/data-window.ts
-var STYLE_ID13 = "vela-widget-datawindow";
-var CSS10 = `
+var STYLE_ID14 = "vela-widget-datawindow";
+var CSS11 = `
 .vela-dw-group {
     padding: 10px 8px 4px;
     margin-top: 4px;
@@ -28830,7 +29777,7 @@ var DataWindow = class extends SidePanel {
     super(host, "Data window", "vela-dw");
     this.chart = null;
     this.unsubs = [];
-    injectStyles(STYLE_ID13, CSS10, host.ownerDocument);
+    injectStyles(STYLE_ID14, CSS11, host.ownerDocument);
   }
   toggle(open = this.el.hidden) {
     super.toggle(open);
@@ -29027,8 +29974,8 @@ var PanelDock = class {
 };
 
 // src/widget/shortcuts-help.ts
-var STYLE_ID14 = "vela-widget-shortcuts";
-var CSS11 = `
+var STYLE_ID15 = "vela-widget-shortcuts";
+var CSS12 = `
 .vela-sh-cat {
     color: var(--vela-fg-muted);
     font-size: var(--vela-font-size-sm);
@@ -29053,7 +30000,7 @@ var ShortcutsHelp = class {
   constructor(keymap, host, onOpenChange) {
     this.keymap = keymap;
     const doc = (host ?? document.body).ownerDocument;
-    injectStyles(STYLE_ID14, CSS11, doc);
+    injectStyles(STYLE_ID15, CSS12, doc);
     this.list = doc.createElement("div");
     this.dialog = new Dialog({
       title: "Keyboard shortcuts",
@@ -29341,8 +30288,8 @@ var ChartContextMenu = class {
 };
 
 // src/widget/indicator-picker.ts
-var STYLE_ID15 = "vela-widget-indpicker";
-var CSS12 = `
+var STYLE_ID16 = "vela-widget-indpicker";
+var CSS13 = `
 .vela-ip-searchrow {
     display: flex;
     align-items: center;
@@ -29416,7 +30363,7 @@ var IndicatorPicker = class {
     this.isOpen = false;
     this.opts = opts;
     const doc = (opts.host ?? document.body).ownerDocument;
-    injectStyles(STYLE_ID15, CSS12, doc);
+    injectStyles(STYLE_ID16, CSS13, doc);
     this.search = doc.createElement("input");
     this.search.className = "vela-ip-search";
     this.search.placeholder = "Search\u2026";
@@ -29544,8 +30491,8 @@ var IndicatorPicker = class {
 };
 
 // src/widget/timeframe-quick.ts
-var STYLE_ID16 = "vela-widget-tfquick";
-var CSS13 = `
+var STYLE_ID17 = "vela-widget-tfquick";
+var CSS14 = `
 .vela-tq-input {
     display: block;
     margin: 0 auto;
@@ -29568,7 +30515,7 @@ var CSS13 = `
 var TimeframeQuick = class {
   constructor(opts) {
     const doc = (opts.host ?? document.body).ownerDocument;
-    injectStyles(STYLE_ID16, CSS13, doc);
+    injectStyles(STYLE_ID17, CSS14, doc);
     this.input = doc.createElement("input");
     this.input.className = "vela-tq-input";
     this.input.setAttribute("spellcheck", "false");
@@ -29765,7 +30712,7 @@ function sanitizeSync(raw) {
   if (raw == null || typeof raw !== "object") return null;
   const s = raw;
   const out = {};
-  for (const kind of ["viewport", "symbol", "timeframe", "crosshair"]) {
+  for (const kind of ["viewport", "symbol", "timeframe", "crosshair", "drawings"]) {
     const v = s[kind];
     if (v === true) out[kind] = true;
     else if (v != null && typeof v === "object") {
@@ -30004,8 +30951,8 @@ var WidgetHistory = class {
 };
 
 // src/widget/toast.ts
-var STYLE_ID17 = "vela-widget-toast";
-var CSS14 = `
+var STYLE_ID18 = "vela-widget-toast";
+var CSS15 = `
 .vela-toast {
     position: absolute;
     left: 50%;
@@ -30035,7 +30982,7 @@ var CSS14 = `
 var Toast = class {
   constructor(host) {
     this.timer = null;
-    injectStyles(STYLE_ID17, CSS14, host.ownerDocument);
+    injectStyles(STYLE_ID18, CSS15, host.ownerDocument);
     this.el = host.ownerDocument.createElement("div");
     this.el.className = "vela-toast";
     host.appendChild(this.el);