@luxalgo/vela 0.5.0 → 0.5.2

package/dist/vela.global.js

@@ -482,14 +482,15 @@ var Vela = (function (exports) {
     svg24('<path d="m10 20-1.25-2.5L6 16"/><path d="M10 4 8.75 6.5 6 8"/><path d="m14 20 1.25-2.5L18 16"/><path d="m14 4 1.25 2.5L18 8"/><path d="m17 10-5 5-5-5"/><path d="M4 12h16"/>')
   );
   registerIcon("chevron-right", S('<path d="m6 3.5 4.5 4.5L6 12.5"/>'));
+  registerIcon("chevron-left", S('<path d="M10 3.5 5.5 8l4.5 4.5"/>'));
   registerIcon("chevron-down", S('<path d="M3.5 6 8 10.5 12.5 6"/>'));
   registerIcon("chevron-up", S('<path d="M3.5 10 8 5.5 12.5 10"/>'));
   registerIcon("chevrons-right", S('<path d="m4 3.5 4.5 4.5L4 12.5"/><path d="m8.5 3.5 4.5 4.5-4.5 4.5"/>'));
   registerIcon("chevrons-left", S('<path d="M12 3.5 7.5 8l4.5 4.5"/><path d="M7.5 3.5 3 8l4.5 4.5"/>'));
   registerIcon("check", S('<path d="m2.8 8.4 3.4 3.4 7-7.6"/>'));
   registerIcon("close", S('<path d="m3.8 3.8 8.4 8.4M12.2 3.8l-8.4 8.4"/>'));
-  registerIcon("eye", S('<path d="M1.5 8s2.5-4.2 6.5-4.2S14.5 8 14.5 8 12 12.2 8 12.2 1.5 8 1.5 8z"/><circle cx="8" cy="8" r="1.8"/>'));
-  registerIcon("eye-off", S('<path d="M1.5 8s2.5-4.2 6.5-4.2S14.5 8 14.5 8 12 12.2 8 12.2 1.5 8 1.5 8z" opacity="0.45"/><path d="m3 13 10-10"/>'));
+  registerIcon("eye", S('<path d="M1.5 8s2.5-5.4 6.5-5.4S14.5 8 14.5 8 12 13.4 8 13.4 1.5 8 1.5 8z"/><circle cx="8" cy="8" r="1.8"/>'));
+  registerIcon("eye-off", S('<path d="M1.5 8s2.5-5.4 6.5-5.4S14.5 8 14.5 8 12 13.4 8 13.4 1.5 8 1.5 8z" opacity="0.45"/><path d="m3 13 10-10"/>'));
   registerIcon("lock", S('<rect x="3.2" y="7" width="9.6" height="6.6" rx="1.2"/><path d="M5.6 7V5.2a2.4 2.4 0 0 1 4.8 0V7"/>'));
   registerIcon("unlock", S('<rect x="3.2" y="7" width="9.6" height="6.6" rx="1.2"/><path d="M5.6 7V5.2a2.4 2.4 0 0 1 4.7-.7"/>'));
   registerIcon("trash", S('<path d="M2.5 4.3h11M6.2 4.3V3.1a1 1 0 0 1 1-1h1.6a1 1 0 0 1 1 1v1.2M4.2 4.3l.5 9.1a1.15 1.15 0 0 0 1.15 1.1h4.3a1.15 1.15 0 0 0 1.15-1.1l.5-9.1M6.5 7v4.5M9.5 7v4.5"/>'));
@@ -512,6 +513,7 @@ var Vela = (function (exports) {
   registerIcon("star-filled", S('<path d="M8 2.2l1.75 3.55 3.9.55-2.8 2.75.65 3.9L8 11.1l-3.5 1.85.65-3.9-2.8-2.75 3.9-.55z"/>', 'fill="currentColor"'));
   registerIcon("grip", S('<circle cx="6" cy="3.5" r="1"/><circle cx="10" cy="3.5" r="1"/><circle cx="6" cy="8" r="1"/><circle cx="10" cy="8" r="1"/><circle cx="6" cy="12.5" r="1"/><circle cx="10" cy="12.5" r="1"/>', 'fill="currentColor" stroke="none"'));
   registerIcon("kebab", S('<circle cx="8" cy="3.2" r="1.2"/><circle cx="8" cy="8" r="1.2"/><circle cx="8" cy="12.8" r="1.2"/>', 'fill="currentColor" stroke="none"'));
+  registerIcon("burger", S('<path d="M2.5 4.5h11M2.5 8h11M2.5 11.5h11"/>'));
   registerIcon("reset", S('<rect x="6" y="6" width="4" height="4" rx="0.8"/><path d="M2.2 8a5.8 5.8 0 1 0 1.9-4.3L2.2 5.3"/><path d="M2.2 2.2v3.1h3.1"/>'));
   registerIcon("pane-collapse", S('<path d="M2.6 9.4h4v4M13.4 6.6h-4v-4"/><path d="m9.4 6.6 4.2-4.2M2.4 13.6l4.2-4.2"/>'));
   registerIcon("pane-expand", S('<path d="M9.8 2.4h3.8v3.8M6.2 13.6H2.4V9.8"/><path d="m13.6 2.4-4.4 4.4M2.4 13.6l4.4-4.4"/>'));
@@ -532,6 +534,11 @@ var Vela = (function (exports) {
     "pen-lock",
     svg24('<path d="M13.8 4.2a2.1 2.1 0 0 1 3 3L8.5 15.5l-3.5 1 1-3.5Z"/><rect x="13" y="14.5" width="8" height="6" rx="1.2"/><path d="M15 14.5v-1.6a2 2 0 0 1 4 0v1.6"/>')
   );
+  registerIcon(
+    "pen-sync",
+    // Pen + two stacked panes — drawing onto every linked chart at once.
+    svg24('<path d="M13.8 4.2a2.1 2.1 0 0 1 3 3L8.5 15.5l-3.5 1 1-3.5Z"/><rect x="12.5" y="13.5" width="6" height="4.8" rx="1"/><path d="M15.5 18.3v1a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-2.8a1 1 0 0 0-1-1h-1"/>')
+  );
   registerIcon("brush", svg24('<path d="M9.5 12 17 4.5a2.12 2.12 0 0 1 3 3L12.5 15"/><path d="M7 14a3 3 0 0 0-3 3c0 1.3-1.2 1.5-1.5 2 .8.9 2 1.5 3.5 1.5a3.5 3.5 0 0 0 3.5-3.5 3 3 0 0 0-2.5-3Z"/>'));
   registerIcon(
     "bucket",
@@ -1885,10 +1892,10 @@ var Vela = (function (exports) {
   }
 
   // src/core/drawings/types/FixedRangeVolumeProfile.ts
-  var OUTSIDE_UP = `${BULLISH}BF`;
-  var OUTSIDE_DOWN = `${BEARISH}BF`;
-  var VA_UP = `${BULLISH}66`;
-  var VA_DOWN = `${BEARISH}66`;
+  var OUTSIDE_UP = `${BULLISH}66`;
+  var OUTSIDE_DOWN = `${BEARISH}66`;
+  var VA_UP = `${BULLISH}BF`;
+  var VA_DOWN = `${BEARISH}BF`;
   function defaultFrvpStyle() {
     return {
       rows: 24,
@@ -1906,7 +1913,8 @@ var Vela = (function (exports) {
       valColor: NEUTRAL,
       valStyle: "solid",
       showPoc: true,
-      pocColor: ACCENT,
+      pocColor: void 0,
+      // theme contrast ink until the user picks a color
       pocStyle: "solid",
       showDevelopingPoc: false,
       developingPocColor: ACCENT,
@@ -6535,6 +6543,11 @@ var Vela = (function (exports) {
     setToolbar(option) {
       this.port?.setToolbar(buildToolbar(option).definition);
     }
+    /** Display (or clear) another chart's in-progress placement as a ghost — silently
+     *  inert on a renderer without the optional `setExternalGhost` seam. */
+    setExternalGhost(doc) {
+      this.port?.setExternalGhost?.(doc);
+    }
     /** Push per-tool shortcut hints (pre-formatted display strings) to the toolbar flyouts. */
     setToolShortcuts(map) {
       this.port?.setToolShortcuts?.(map);
@@ -6765,6 +6778,9 @@ var Vela = (function (exports) {
         case "arm":
           this.setTool(i.type);
           break;
+        case "draft":
+          this.events.emit("drawing:draft", { doc: i.doc });
+          break;
         case "create": {
           const before = this.store.serialize();
           const last = this.lastStyle.get(i.doc.type);
@@ -7040,6 +7056,52 @@ var Vela = (function (exports) {
   };
 
   // src/chart-types/registry.ts
+  function normalizeSettingsRow(r) {
+    switch (r.kind) {
+      case "row":
+        return { label: r.label, toggle: r.toggle, controls: r.controls, when: r.when };
+      case "toggle": {
+        const controls = [];
+        if (r.number) controls.push({ kind: "number", ...r.number });
+        for (const c of r.colors ?? []) controls.push({ kind: "color", ...c });
+        if (r.width) controls.push({ kind: "width", ...r.width });
+        return { label: r.label, toggle: { key: r.key, defval: r.defval }, controls, when: r.when };
+      }
+      case "number":
+        return { label: r.label, controls: [{ kind: "number", key: r.key, label: r.label, defval: r.defval, min: r.min, max: r.max, step: r.step }], when: r.when };
+      case "color":
+        return { label: r.label, controls: [{ kind: "color", key: r.key, label: r.label, defval: r.defval }], when: r.when };
+      case "select":
+        return { label: r.label, controls: [{ kind: "select", key: r.key, label: r.label, options: r.options, defval: r.defval }], when: r.when };
+      case "range":
+        return {
+          label: r.label,
+          controls: [
+            { kind: "number", key: r.minKey, label: `${r.label} \u2014 min`, defval: r.defval, min: r.min, max: r.max, step: r.step, placeholder: r.placeholder },
+            { kind: "hint", text: "\u2013" },
+            { kind: "number", key: r.maxKey, label: `${r.label} \u2014 max`, defval: r.defval, min: r.min, max: r.max, step: r.step, placeholder: r.placeholder }
+          ],
+          when: r.when
+        };
+    }
+  }
+  function settingsRowValueKeys(r) {
+    if (r.kind === "heading" || r.kind === "header") return [];
+    const n = normalizeSettingsRow(r);
+    const keys = [];
+    if (n.toggle) keys.push({ key: n.toggle.key, type: "boolean", defval: n.toggle.defval });
+    for (const c of n.controls) {
+      if (c.kind === "hint") continue;
+      if (c.kind === "color" || c.kind === "select") keys.push({ key: c.key, type: "string", defval: c.defval });
+      else keys.push({ key: c.key, type: "number", defval: c.defval });
+    }
+    return keys;
+  }
+  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);
@@ -7139,6 +7201,9 @@ var Vela = (function (exports) {
       this.barTransform = null;
       // ── chart-type data engines (SDK): one lazily-created engine per style id ──
       this.typeEngines = /* @__PURE__ */ new Map();
+      /** Last-seen chart-type settings per type id (dialog edits + persisted restores) —
+       *  replayed into a data engine whenever one is (re)created. */
+      this.typeSettings = /* @__PURE__ */ new Map();
       /** The style id whose data engine is currently ACTIVE (drives suspend/resume + pokes). */
       this.activeEngineStyle = null;
       /** The chart's current price style (tracked from the renderer's change events + initial read). */
@@ -7201,7 +7266,10 @@ var Vela = (function (exports) {
       this.renderer.onRemoveIndicator((id) => this.removeIndicator(id));
       this.renderer.onToggleIndicatorVisible?.((id, visible) => this.setVisible(id, visible));
       this.paneActionUnsub = this.renderer.onPaneAction?.((a) => this.handlePaneAction(a)) ?? null;
-      this.renderer.onChartTypeSettingsChange?.((typeId, values) => this.typeEngines.get(typeId)?.onSettings?.(values));
+      this.renderer.onChartTypeSettingsChange?.((typeId, values) => {
+        this.typeSettings.set(typeId, values);
+        this.typeEngines.get(typeId)?.onSettings?.(values);
+      });
       this.renderer.onMoveIndicator?.((id, target) => this.moveIndicator(id, target));
       this.renderer.onThemeSelect?.((name) => this.setTheme(resolveTheme(name)));
       this.viewportUnsub = this.renderer.onViewportChange((range) => this.onViewportChange(range));
@@ -7689,6 +7757,8 @@ var Vela = (function (exports) {
       if (!def?.dataEngine) return;
       const engine = def.dataEngine();
       this.typeEngines.set(id, engine);
+      const stored = this.typeSettings.get(id);
+      if (stored) engine.onSettings?.(stored);
       engine.start({
         symbol: this.config.market.symbol ?? "TEST",
         timeframe: this.config.market.timeframe ?? "60",
@@ -8160,6 +8230,7 @@ var Vela = (function (exports) {
       return {
         id: record.id,
         title: record.title,
+        ...d.shortTitle ? { shorttitle: d.shortTitle } : {},
         overlay: d.overlay,
         paneHint: d.paneHint,
         native: { type: record.native.type },
@@ -8620,6 +8691,28 @@ var Vela = (function (exports) {
     setLegendActions(provider) {
       this.renderer.setLegendActions?.(provider);
     }
+    /**
+     * Replace the indicator legend's fold toggle with a host action (or restore it with
+     * `null`) — multi-chart shells point the chip at their indicator overview instead of
+     * unfolding rows in place. Silent no-op on a renderer without a foldable legend.
+     */
+    setLegendOverviewAction(action) {
+      this.renderer.setLegendOverviewAction?.(action);
+      return this;
+    }
+    /** Whether the active renderer can open a per-indicator settings dialog. */
+    get supportsIndicatorSettings() {
+      return typeof this.renderer.openIndicatorSettings === "function";
+    }
+    /**
+     * Open one indicator's settings dialog — the programmatic twin of the legend gear
+     * (see {@link supportsIndicatorSettings}). Silent no-op without the seam or for an
+     * unknown id.
+     */
+    openIndicatorSettings(indicatorId) {
+      this.renderer.openIndicatorSettings?.(indicatorId);
+      return this;
+    }
     /**
      * Export the current chart as a PNG data URL, or null if the active renderer
      * doesn't support it (warns). DOM overlays (tables, legend) are not included.
@@ -8666,6 +8759,10 @@ var Vela = (function (exports) {
     onCrosshairMove(cb) {
       return this.renderer.onCrosshairMove(cb);
     }
+    /** Touch long-press on a price or time axis strip — silent no-op without the seam. */
+    onAxisLongPress(cb) {
+      return this.renderer.onAxisLongPress?.(cb) ?? (() => void 0);
+    }
     /**
      * The current data-window readout — the hovered bar's date/time and OHLCV plus every
      * indicator's value there, each already formatted on its pane's scale (the latest bar when
@@ -8731,6 +8828,13 @@ var Vela = (function (exports) {
       this.renderer.setSettingsSections?.(sections);
       return this;
     }
+    /** Tell the renderer's own chrome which size class the host shell is in —
+     *  `'mobile'` switches its dialogs/toolbars to the touch-first presentation.
+     *  Silent no-op on a renderer without adaptive chrome. */
+    setLayoutMode(mode) {
+      this.renderer.setLayoutMode?.(mode);
+      return this;
+    }
   };
 
   // src/core/renderer-defaults.ts
@@ -9384,6 +9488,14 @@ var Vela = (function (exports) {
       if (this.ok("setToolShortcuts")) this.ctrl.setToolShortcuts(map);
       return this;
     }
+    /** Display another chart's in-progress placement as a GHOST at reduced opacity
+     *  (`null` clears it) — how a multi-chart host mirrors `drawing:draft` onto linked
+     *  charts. Never a real drawing: no store entry, no selection, no persistence.
+     *  Silently inert on a renderer without the optional seam. */
+    setExternalGhost(doc) {
+      this.ctrl.setExternalGhost(doc);
+      return this;
+    }
     /** Create a drawing programmatically (no clicking). Returns it, or null if unsupported. */
     add(type, init = {}) {
       if (!this.ok("add")) return null;
@@ -9622,6 +9734,11 @@ var Vela = (function (exports) {
       "--vela-hover-strong": wash(0.16),
       "--vela-focus": withAlpha(t.textColor, 0.5),
       "--vela-focus-soft": withAlpha(t.textColor, 0.12),
+      // Separator hover — the SAME wash the chart's pane separators paint on hover
+      // (soft full-thickness band + solid 2px center line), so DOM-drawn dividers
+      // (the workspace grid) and canvas-drawn ones read as one family.
+      "--vela-separator-hover-band": withAlpha(t.textColor, 0.1),
+      "--vela-separator-hover-line": withAlpha(t.textColor, 0.55),
       "--vela-scroll": withAlpha(t.textColor, 0.3),
       "--vela-accent": ACCENT,
       "--vela-accent-bright": ACCENT_BRIGHT,
@@ -9669,7 +9786,7 @@ var Vela = (function (exports) {
       const doc = anchor.ownerDocument;
       tip = doc.createElement("div");
       tip.textContent = text;
-      tip.style.cssText = "position:absolute;z-index:25;pointer-events:none;background:var(--vela-bg);border:1px solid var(--vela-border);color:var(--vela-fg);border-radius:var(--vela-radius-md);padding:4px 9px;box-shadow:var(--vela-shadow);font:var(--vela-font-size-md) var(--vela-font);" + (opts.wrap ? "max-width:260px;" : "white-space:nowrap;");
+      tip.style.cssText = "position:absolute;z-index:var(--vela-z-tooltip);pointer-events:none;background:var(--vela-bg);border:1px solid var(--vela-border);color:var(--vela-fg);border-radius:var(--vela-radius-md);padding:4px 9px;box-shadow:var(--vela-shadow);font:var(--vela-font-size-md) var(--vela-font);" + (opts.wrap ? "max-width:260px;" : "white-space:nowrap;");
       applyChromeTokens(tip, opts.theme());
       opts.host.appendChild(tip);
       const a = anchor.getBoundingClientRect();
@@ -9683,16 +9800,17 @@ var Vela = (function (exports) {
         tip.style.top = `${a.bottom - h.top + 6}px`;
       }
     };
-    const arm = () => {
+    const arm = (e) => {
+      if (e.pointerType !== "mouse") return;
       clear();
       timer = window.setTimeout(show, opts.delayMs ?? 700);
     };
-    anchor.addEventListener("mouseenter", arm);
-    anchor.addEventListener("mouseleave", clear);
+    anchor.addEventListener("pointerenter", arm);
+    anchor.addEventListener("pointerleave", clear);
     anchor.addEventListener("pointerdown", clear);
     return () => {
-      anchor.removeEventListener("mouseenter", arm);
-      anchor.removeEventListener("mouseleave", clear);
+      anchor.removeEventListener("pointerenter", arm);
+      anchor.removeEventListener("pointerleave", clear);
       anchor.removeEventListener("pointerdown", clear);
       clear();
     };
@@ -9759,14 +9877,22 @@ var Vela = (function (exports) {
 
   // src/renderers/shared/InputsUI.ts
   var SOURCES = ["close", "open", "high", "low", "hl2", "hlc3", "ohlc4", "volume"];
-  var STATUS_KEYFRAMES = "@keyframes vela-ind-spin{to{transform:rotate(360deg)}}@keyframes vela-ind-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}";
-  var LEGEND_ICON_PX = 13;
+  var STATUS_KEYFRAMES = "@keyframes vela-ind-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}";
+  var LEGEND_ICON_PX = 16;
+  var LEGEND_CTL_PX = 18;
+  var LEGEND_ROW_PAD_Y = 2;
+  var LEGEND_ROW_PAD_X = 6;
+  var LEGEND_TITLE_VALUES_GAP_PX = 6;
+  var LEGEND_ACTION_GAP_PX = 6;
+  var LEGEND_CTL_CSS = `cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border:none;line-height:0;padding:0;width:${LEGEND_CTL_PX}px;height:${LEGEND_CTL_PX}px;border-radius:3px;box-sizing:border-box;flex:none;`;
+  var LEGEND_ROW_MIN_H = LEGEND_CTL_PX + LEGEND_ROW_PAD_Y * 2;
   var EYE_SVG = iconAt("eye", LEGEND_ICON_PX);
   var EYE_OFF_SVG = iconAt("eye-off", LEGEND_ICON_PX);
   var GEAR_SVG = iconAt("gear", LEGEND_ICON_PX);
-  var CLOSE_SVG = iconAt("close", 11);
+  var CLOSE_SVG = iconAt("close", LEGEND_ICON_PX);
   var FOLD_SVG = iconAt("chevron-up", LEGEND_ICON_PX);
   var UNFOLD_SVG = iconAt("chevron-down", LEGEND_ICON_PX);
+  var OVERVIEW_SVG = iconAt("objects", LEGEND_ICON_PX);
   var InputsUI = class {
     constructor(container, theme, paneBoundsOf) {
       this.container = container;
@@ -9787,6 +9913,8 @@ var Vela = (function (exports) {
       this.onToggleVisible = null;
       /** Host symbol picker for `input.symbol`; when set the control opens the host's ticker UI. */
       this.symbolPicker = null;
+      /** Mobile chrome: the inputs dialog opens fullscreen and the legends render compact. */
+      this.mobileLayout = false;
       /** Pane move/merge hook — when set, rows get a "Move to" menu + become drag-to-pane sources. */
       this.moveApi = null;
       /** Host-contributed legend actions, resolved PER ROW at render time (see setLegendActions). */
@@ -9808,9 +9936,18 @@ var Vela = (function (exports) {
       /** Titles switched off entirely (a settings toggle): every pane's legend container
        *  hides — rows, fold chevron and all — unlike the fold, which leaves its chip. */
       this.titlesVisible = true;
+      /** Plot values shown beside the titles chart-wide (a settings toggle); a row's own
+       *  context-menu choice ({@link LegendRow.showValues}) overrides it per indicator. */
+      this.valuesVisible = true;
+      /** Open legend-row context menu (kept so it can be torn down). */
+      this.rowMenu = null;
       /** The single fold toggle, on the price-pane legend: a bordered ^ chevron under the
        *  rows, or the bordered "˅ N" chip (N counts every pane's indicators) when folded. */
       this.foldToggle = null;
+      /** Host-provided replacement for the fold toggle (multi-chart shells route it to
+       *  their indicator overview, e.g. an object tree). While set, the legend stays
+       *  folded and the chip runs this instead of unfolding inline. */
+      this.overviewAction = null;
       /** Esc-to-close for the settings modal (bound so focus can sit anywhere). */
       this.onDialogKey = (e) => {
         if (e.key === "Escape") {
@@ -9834,6 +9971,9 @@ var Vela = (function (exports) {
       this.onMoveMenuOutside = (e) => {
         if (this.moveMenu && !this.moveMenu.contains(e.target)) this.closeMoveMenu();
       };
+      this.onRowMenuOutside = (e) => {
+        if (this.rowMenu && !this.rowMenu.contains(e.target)) this.closeRowMenu();
+      };
       if (!container.style.position) container.style.position = "relative";
       if (typeof document !== "undefined") document.addEventListener("click", this.onDocClick);
     }
@@ -9841,6 +9981,36 @@ var Vela = (function (exports) {
       this.dialogHost = host;
       if (host && getComputedStyle(host).position === "static") host.style.position = "relative";
     }
+    /** The host shell's chrome size class — mobile makes the inputs dialog fullscreen
+     *  (an open dialog re-presents on the flip) and folds the legend behind its chip by
+     *  default (a phone-width plot has no room for the rows). */
+    setLayoutMode(mode) {
+      const mobile = mode === "mobile";
+      if (mobile === this.mobileLayout) return;
+      this.mobileLayout = mobile;
+      if (this.overviewAction === null) this.legendFolded = mobile;
+      this.syncFoldToggle();
+      if (this.openId !== null) {
+        const id = this.openId;
+        this.closeOpenDialog();
+        this.openDialog(id);
+      }
+    }
+    /** Replace the fold toggle's behavior with a HOST action (or restore it with null):
+     *  the chip stays — objects icon + indicator count — but a press runs the action
+     *  (a multi-chart shell opens its indicator overview) instead of unfolding the rows,
+     *  which stay hidden while the override is in force. */
+    setLegendOverviewAction(action) {
+      if (action === this.overviewAction) return;
+      this.overviewAction = action;
+      this.legendFolded = action !== null ? true : this.mobileLayout;
+      this.syncFoldToggle();
+    }
+    /** Open the settings dialog of one indicator (the legend gear's programmatic twin) —
+     *  no-op for an unknown id. */
+    openSettingsFor(id) {
+      if (this.rows.has(id)) this.openDialog(id);
+    }
     /** Attach a themed chrome tooltip to a control, recording its disposer under `id`. */
     tip(store, id, anchor, text, wrap = false) {
       const list = store.get(id) ?? [];
@@ -9868,12 +10038,12 @@ var Vela = (function (exports) {
     }
     setTheme(theme) {
       this.theme = theme;
+      for (const lg of this.legends.values()) applyChromeTokens(lg, theme);
       for (const row of this.rows.values()) {
-        const open = row.controlsEl.style.display !== "none";
-        row.el.style.background = open ? theme.background : this.idleRowFill();
+        row.el.style.background = row.highlighted ? theme.background : this.idleRowFill();
         row.el.style.color = theme.textColor;
       }
-      if (this.foldToggle) this.foldToggle.style.background = theme.background;
+      if (this.foldToggle) this.syncFoldToggle();
     }
     /** Provide (or clear) the host symbol picker that `input.symbol` opens on activation. */
     setSymbolPicker(picker) {
@@ -9904,7 +10074,7 @@ var Vela = (function (exports) {
         btn.innerHTML = iconAt(action.icon, LEGEND_ICON_PX);
         btn.className = "vela-ind-ctl";
         btn.dataset.legendAction = action.id;
-        btn.style.cssText = "cursor:pointer;display:inline-flex;align-items:center;background:transparent;border:none;line-height:0;padding:0 1px;";
+        btn.style.cssText = LEGEND_CTL_CSS;
         btn.addEventListener("click", (e) => {
           e.stopPropagation();
           action.run();
@@ -9922,6 +10092,54 @@ var Vela = (function (exports) {
       this.titlesVisible = visible;
       this.reposition();
     }
+    /**
+     * Show/hide the plot values chart-wide (the settings dialog's Indicators → Values
+     * toggle). "All" is meant literally: per-row context-menu overrides are cleared, so
+     * every legend follows the new state.
+     */
+    setValuesVisible(visible) {
+      this.valuesVisible = visible;
+      for (const row of this.rows.values()) {
+        row.showValues = null;
+        this.renderRowValues(row);
+      }
+    }
+    /**
+     * Push the current plot values of every indicator at once (the renderer calls this per
+     * paint). Rows absent from the map (e.g. a hidden indicator) show no values. Cheap on
+     * unchanged frames: each row diffs against its last rendered values before touching DOM.
+     */
+    setPlotValues(values) {
+      for (const row of this.rows.values()) {
+        const next = values.get(row.id) ?? [];
+        const key = next.map((v) => `${v.value}|${v.color}`).join("\0");
+        if (key === row.plotValuesKey) continue;
+        row.plotValues = next;
+        row.plotValuesKey = key;
+        this.renderRowValues(row);
+      }
+    }
+    /** Whether a row currently shows its values: its own override, else the chart-wide flag. */
+    rowValuesShown(row) {
+      return row.showValues ?? this.valuesVisible;
+    }
+    /** (Re)build one row's values readout from its stored plot values + visibility. A
+     *  highlighted (hovered/selected) row shows only the title + controls — no values. */
+    renderRowValues(row) {
+      if (!this.rowValuesShown(row) || row.plotValues.length === 0 || row.highlighted) {
+        row.valuesEl.style.display = "none";
+        row.valuesEl.replaceChildren();
+        return;
+      }
+      row.valuesEl.style.display = "inline-flex";
+      row.valuesEl.replaceChildren();
+      for (const v of row.plotValues) {
+        const span = document.createElement("span");
+        span.textContent = v.value;
+        span.style.color = v.color;
+        row.valuesEl.appendChild(span);
+      }
+    }
     // ── legend move/merge (menu + drag) ─────────────────────────────────────
     /** Open the "Move to" menu for a row, anchored under its move button. */
     openMoveMenu(id, anchor) {
@@ -9973,6 +10191,48 @@ var Vela = (function (exports) {
       this.moveMenu?.remove();
       this.moveMenu = null;
     }
+    // ── legend row context menu (right-click) ───────────────────────────────
+    /** Open the row's action menu at the pointer. One entry today: the values toggle. */
+    openRowMenu(id, x, y) {
+      this.closeRowMenu();
+      this.closeMoveMenu();
+      const row = this.rows.get(id);
+      if (!row) return;
+      const menu = document.createElement("div");
+      menu.style.cssText = `position:fixed;z-index:var(--vela-z-tooltip);min-width:170px;padding:4px;border-radius:var(--vela-radius-md);background:var(--vela-surface-elev);color:${this.theme.textColor};border:1px solid var(--vela-border);box-shadow:var(--vela-shadow);font-size:var(--vela-font-size-md);`;
+      applyChromeTokens(menu, this.theme);
+      const item = document.createElement("button");
+      item.type = "button";
+      item.className = "vela-ind-menuitem";
+      item.style.cssText = "display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:6px 10px;border:none;border-radius:var(--vela-radius-sm);color:inherit;cursor:pointer;white-space:nowrap;";
+      const check = document.createElement("span");
+      check.style.cssText = "display:inline-flex;align-items:center;justify-content:center;width:14px;flex:none;line-height:0;";
+      check.innerHTML = this.rowValuesShown(row) ? CHECK_SVG : "";
+      const label = document.createElement("span");
+      label.textContent = "Indicator values";
+      item.append(check, label);
+      item.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.closeRowMenu();
+        row.showValues = !this.rowValuesShown(row);
+        this.renderRowValues(row);
+      });
+      menu.appendChild(item);
+      document.body.appendChild(menu);
+      const mw = menu.offsetWidth || 180;
+      const mh = menu.offsetHeight || 40;
+      menu.style.left = `${Math.min(x, window.innerWidth - mw - 6)}px`;
+      menu.style.top = `${Math.min(y, window.innerHeight - mh - 6)}px`;
+      this.rowMenu = menu;
+      setTimeout(() => {
+        if (typeof document !== "undefined") document.addEventListener("pointerdown", this.onRowMenuOutside, true);
+      }, 0);
+    }
+    closeRowMenu() {
+      if (typeof document !== "undefined") document.removeEventListener("pointerdown", this.onRowMenuOutside, true);
+      this.rowMenu?.remove();
+      this.rowMenu = null;
+    }
     /** Move a legend row to another pane (indicator merged/moved), tidying an emptied container. */
     setPane(id, paneId) {
       const row = this.rows.get(id);
@@ -9994,7 +10254,8 @@ var Vela = (function (exports) {
       if (!lg) {
         lg = document.createElement("div");
         lg.dataset.velaPane = paneId;
-        lg.style.cssText = "position:absolute;left:10px;z-index:5;display:flex;flex-direction:column;align-items:flex-start;gap:3px;pointer-events:none;font:12px -apple-system,Segoe UI,sans-serif;";
+        lg.style.cssText = "position:absolute;left:10px;z-index:5;display:flex;flex-direction:column;align-items:flex-start;gap:0;pointer-events:none;font:12px -apple-system,Segoe UI,sans-serif;";
+        applyChromeTokens(lg, this.theme);
         this.positionLegend(lg, paneId);
         this.container.appendChild(lg);
         this.legends.set(paneId, lg);
@@ -10030,15 +10291,16 @@ var Vela = (function (exports) {
      */
     syncFoldToggle() {
       const count = this.rows.size;
-      if (count < 2) {
+      const minRows = this.overviewAction !== null || this.mobileLayout ? 1 : 2;
+      if (count < minRows) {
         const wasFolded = this.legendFolded;
-        this.legendFolded = false;
+        if (count > 0) this.legendFolded = false;
         if (this.foldToggle) {
           this.foldToggle.remove();
           this.foldToggle = null;
           this.disposeTips(this.rowTips, "fold");
         }
-        if (wasFolded) this.reposition();
+        if (wasFolded && count > 0) this.reposition();
         return;
       }
       let btn = this.foldToggle;
@@ -10046,25 +10308,30 @@ var Vela = (function (exports) {
         btn = document.createElement("button");
         btn.type = "button";
         btn.className = "vela-ind-fold";
-        this.tip(this.rowTips, "fold", btn, () => this.legendFolded ? "Show indicator legend" : "Hide indicator legend");
+        this.tip(this.rowTips, "fold", btn, () => this.overviewAction !== null ? "Indicators" : this.legendFolded ? "Show indicator legend" : "Hide indicator legend");
         btn.addEventListener("click", () => {
+          if (this.overviewAction !== null) {
+            this.overviewAction();
+            return;
+          }
           this.legendFolded = !this.legendFolded;
           this.syncFoldToggle();
         });
         this.foldToggle = btn;
       }
       const folded = this.legendFolded;
-      btn.setAttribute("aria-label", folded ? "Show indicator legend" : "Hide indicator legend");
-      btn.style.cssText = `pointer-events:auto;display:inline-flex;align-items:center;gap:4px;background:${this.theme.background};border:1px solid var(--vela-border);border-radius:4px;padding:2px 6px;margin-top:6px;cursor:pointer;font:inherit;line-height:0;`;
+      btn.setAttribute("aria-label", this.overviewAction !== null ? "Indicators" : folded ? "Show indicator legend" : "Hide indicator legend");
+      const ink = this.theme.textColor;
+      btn.style.cssText = `pointer-events:auto;display:inline-flex;align-items:center;gap:4px;background:${this.theme.background};color:${ink};border:1px solid ${this.theme.borderColor};border-radius:4px;padding:2px 6px;margin-top:6px;cursor:pointer;font:inherit;line-height:0;`;
       btn.replaceChildren();
       const icon2 = document.createElement("span");
-      icon2.style.cssText = "display:inline-flex;align-items:center;line-height:0;";
-      icon2.innerHTML = folded ? UNFOLD_SVG : FOLD_SVG;
+      icon2.style.cssText = "display:inline-flex;align-items:center;line-height:0;opacity:0.7;";
+      icon2.innerHTML = this.overviewAction !== null ? OVERVIEW_SVG : folded ? UNFOLD_SVG : FOLD_SVG;
       btn.appendChild(icon2);
       if (folded) {
         const label = document.createElement("span");
         label.textContent = String(count);
-        label.style.cssText = "font-weight:600;line-height:normal;font-size:12px;color:var(--vela-fg-bright);";
+        label.style.cssText = `font-weight:600;line-height:normal;font-size:12px;color:${ink};`;
         btn.appendChild(label);
       }
       this.legendFor("price").appendChild(btn);
@@ -10072,9 +10339,11 @@ var Vela = (function (exports) {
     }
     /** Create or update an indicator's legend row (in the legend for its pane). */
     upsert(id, title, inputs, values, paneId = "price", opts = {}) {
+      const settingsTitle = opts.settingsTitle ?? title;
       const existing = this.rows.get(id);
       if (existing) {
         existing.title = title;
+        existing.settingsTitle = settingsTitle;
         existing.inputs = inputs;
         existing.values = { ...values };
         existing.titleEl.textContent = title;
@@ -10087,8 +10356,7 @@ var Vela = (function (exports) {
       }
       ensureDialogStyles();
       const el = document.createElement("div");
-      el.style.cssText = `pointer-events:auto;display:flex;align-items:center;gap:6px;background:${this.idleRowFill()};border-radius:4px;padding:2px 7px;margin-left:-7px;color:${this.theme.textColor};user-select:none;-webkit-user-select:none;`;
-      el.addEventListener("mouseenter", () => this.setRowHighlighted(id, true));
+      el.style.cssText = `pointer-events:auto;display:flex;align-items:center;background:${this.idleRowFill()};border-radius:4px;padding:${LEGEND_ROW_PAD_Y}px ${LEGEND_ROW_PAD_X}px;margin-left:-${LEGEND_ROW_PAD_X}px;min-height:${LEGEND_ROW_MIN_H}px;box-sizing:border-box;color:${this.theme.textColor};user-select:none;-webkit-user-select:none;`;
       el.addEventListener("mouseleave", () => {
         if (this.selectedId !== id) this.setRowHighlighted(id, false);
       });
@@ -10108,11 +10376,16 @@ var Vela = (function (exports) {
         e.preventDefault();
         this.onRemove?.(id);
       });
+      el.addEventListener("contextmenu", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.openRowMenu(id, e.clientX, e.clientY);
+      });
       const statusEl = document.createElement("span");
       statusEl.style.cssText = "display:none;box-sizing:border-box;flex:none;";
-      el.appendChild(statusEl);
       const titleWrap = document.createElement("span");
       titleWrap.style.cssText = "white-space:nowrap;";
+      titleWrap.addEventListener("mouseenter", () => this.setRowHighlighted(id, true));
       const titleEl = document.createElement("span");
       titleEl.textContent = title;
       titleEl.style.cssText = "font-weight:600;";
@@ -10124,6 +10397,11 @@ var Vela = (function (exports) {
         titleWrap.appendChild(beta);
       }
       el.appendChild(titleWrap);
+      const valuesEl = document.createElement("span");
+      valuesEl.style.cssText = `display:none;align-items:center;gap:5px;margin-left:${LEGEND_TITLE_VALUES_GAP_PX}px;white-space:nowrap;font-variant-numeric:tabular-nums;`;
+      el.appendChild(valuesEl);
+      const controlsEl = document.createElement("span");
+      controlsEl.style.cssText = `display:none;align-items:center;gap:${LEGEND_ACTION_GAP_PX}px;flex:none;margin-left:${LEGEND_ACTION_GAP_PX}px;`;
       let eyeEl = null;
       if (this.onToggleVisible) {
         const eye = document.createElement("button");
@@ -10132,16 +10410,14 @@ var Vela = (function (exports) {
         this.tip(this.rowTips, id, eye, () => this.rows.get(id)?.hidden ? "Show" : "Hide");
         eye.innerHTML = EYE_SVG;
         eye.className = "vela-ind-ctl";
-        eye.style.cssText = "cursor:pointer;display:none;align-items:center;background:transparent;border:none;line-height:0;padding:0 1px;";
+        eye.style.cssText = LEGEND_CTL_CSS;
         eye.addEventListener("click", () => {
           const row = this.rows.get(id);
           this.onToggleVisible?.(id, Boolean(row?.hidden));
         });
-        el.appendChild(eye);
+        controlsEl.appendChild(eye);
         eyeEl = eye;
       }
-      const controlsEl = document.createElement("span");
-      controlsEl.style.cssText = "display:none;align-items:center;gap:6px;";
       if (inputs.length > 0) {
         const gear = document.createElement("button");
         gear.type = "button";
@@ -10149,7 +10425,7 @@ var Vela = (function (exports) {
         this.tip(this.rowTips, id, gear, "Settings");
         gear.innerHTML = GEAR_SVG;
         gear.className = "vela-ind-ctl";
-        gear.style.cssText = "cursor:pointer;display:inline-flex;align-items:center;background:transparent;border:none;line-height:0;padding:0 1px;";
+        gear.style.cssText = LEGEND_CTL_CSS;
         gear.addEventListener("click", () => this.openDialog(id));
         controlsEl.appendChild(gear);
       }
@@ -10160,7 +10436,7 @@ var Vela = (function (exports) {
         this.tip(this.rowTips, id, mv, "Move to pane");
         mv.innerHTML = iconAt("move", LEGEND_ICON_PX);
         mv.className = "vela-ind-ctl";
-        mv.style.cssText = "cursor:pointer;display:inline-flex;align-items:center;background:transparent;border:none;line-height:0;padding:0 1px;";
+        mv.style.cssText = LEGEND_CTL_CSS;
         mv.addEventListener("click", (e) => {
           e.stopPropagation();
           this.openMoveMenu(id, mv);
@@ -10177,12 +10453,13 @@ var Vela = (function (exports) {
       this.tip(this.rowTips, id, close, "Remove indicator");
       close.innerHTML = CLOSE_SVG;
       close.className = "vela-ind-close";
-      close.style.cssText = "cursor:pointer;display:inline-flex;align-items:center;background:transparent;border:none;color:var(--vela-fg-muted);line-height:0;padding:0 1px;";
+      close.style.cssText = LEGEND_CTL_CSS;
       close.addEventListener("click", () => this.onRemove?.(id));
       controlsEl.appendChild(close);
       el.appendChild(controlsEl);
+      el.appendChild(statusEl);
       this.attach(this.legendFor(paneId), el, !!opts.native);
-      this.rows.set(id, { id, title, inputs, values: { ...values }, el, titleEl, statusEl, paneId, hidden: false, eyeEl, controlsEl, extrasEl, native: !!opts.native });
+      this.rows.set(id, { id, title, settingsTitle, inputs, values: { ...values }, el, titleEl, statusEl, valuesEl, plotValues: [], plotValuesKey: "", showValues: null, highlighted: false, paneId, hidden: false, eyeEl, controlsEl, extrasEl, native: !!opts.native });
       this.syncFoldToggle();
     }
     /** Place a row in its pane's legend — native rows PREPEND (pinned to the top), Pine rows append. */
@@ -10196,24 +10473,31 @@ var Vela = (function (exports) {
       if (row) row.values = { ...row.values, ...values };
     }
     /**
-     * Reflect an indicator's live status in its legend row: `'loading'` shows a spinner (a fetch is
-     * in flight), `'live'` a pulsing dot (live-updating), `'idle'` nothing. Rendered left of the title.
+     * Reflect an indicator's live status in its legend row: `'loading'` shows three pulsing
+     * dots (a fetch is in flight — the same load affordance as the chart's own bar-load dots,
+     * at legend scale), `'live'` a pulsing dot, `'idle'` nothing. Rendered at the row's right end.
      */
     setStatus(id, status) {
       const row = this.rows.get(id);
       if (!row) return;
       const el = row.statusEl;
+      el.replaceChildren();
       if (status === "idle") {
-        el.style.display = "none";
-        el.style.animation = "none";
+        el.style.cssText = "display:none;box-sizing:border-box;flex:none;";
         return;
       }
-      this.ensureStatusKeyframes();
       if (status === "loading") {
-        el.style.cssText = `display:inline-block;box-sizing:border-box;flex:none;width:11px;height:11px;border-radius:50%;border:2px solid var(--vela-border-strong);border-top-color:var(--vela-fg-bright);animation:vela-ind-spin .7s linear infinite;`;
-      } else {
-        el.style.cssText = `display:inline-block;box-sizing:border-box;flex:none;width:8px;height:8px;border-radius:50%;background:${this.theme.upColor};animation:vela-ind-pulse 1.2s ease-in-out infinite;`;
+        el.style.cssText = "display:inline-flex;align-items:center;gap:3px;box-sizing:border-box;flex:none;";
+        for (let i = 0; i < 3; i += 1) {
+          const dot = document.createElement("span");
+          dot.style.cssText = "width:4px;height:4px;border-radius:50%;background:currentColor;opacity:0.15;flex:none;";
+          dot.animate?.([{ opacity: 0.12 }, { opacity: 0.55 }], { duration: 800, iterations: Infinity, direction: "alternate", easing: "ease-in-out", delay: -i * 260 });
+          el.appendChild(dot);
+        }
+        return;
       }
+      this.ensureStatusKeyframes();
+      el.style.cssText = `display:inline-block;box-sizing:border-box;flex:none;width:8px;height:8px;border-radius:50%;background:${this.theme.upColor};animation:vela-ind-pulse 1.2s ease-in-out infinite;`;
     }
     /** Inject the status keyframes once (idempotent). */
     ensureStatusKeyframes() {
@@ -10232,8 +10516,8 @@ var Vela = (function (exports) {
       if (row.eyeEl) {
         row.eyeEl.innerHTML = visible ? EYE_SVG : EYE_OFF_SVG;
         row.eyeEl.setAttribute("aria-label", visible ? "Hide" : "Show");
-        row.eyeEl.style.display = !visible || row.controlsEl.style.display !== "none" ? "inline-flex" : "none";
       }
+      this.syncRowActions(row);
     }
     /**
      * Select a legend row (outlining it) and clear any previous selection, so at most one
@@ -10246,17 +10530,36 @@ var Vela = (function (exports) {
       this.setRowHighlighted(id, true);
     }
     /**
-     * Show or hide a row's outline and eye/gear/✕ controls together — driven by both hover and
-     * selection, so an idle (unhovered, unselected) row shows just its title. Exception: a hidden
-     * indicator keeps its eye visible even when idle, so it can be un-hidden without hovering.
+     * Show or hide a row's outline and eye/gear/✕ controls together — driven by title
+     * hover and selection (plot values do not open the chip). An idle unselected row
+     * shows just its title (+ values). Exception: a hidden indicator keeps its eye
+     * visible even when idle, so it can be un-hidden without hovering.
      */
     setRowHighlighted(id, highlighted) {
       const row = this.rows.get(id);
       if (!row) return;
+      row.highlighted = highlighted;
+      this.renderRowValues(row);
       row.el.style.boxShadow = highlighted ? `inset 0 0 0 1px ${this.neutralBorder()}` : "none";
       row.el.style.background = highlighted ? this.theme.background : this.idleRowFill();
-      row.controlsEl.style.display = highlighted ? "inline-flex" : "none";
-      if (row.eyeEl) row.eyeEl.style.display = highlighted || row.hidden ? "inline-flex" : "none";
+      this.syncRowActions(row);
+    }
+    /**
+     * Reveal the action cluster (or just the eye for a hidden indicator). Non-eye
+     * buttons only appear while highlighted; the eye keeps its inline-flex from
+     * construction and is shown/hidden with the cluster container.
+     */
+    syncRowActions(row) {
+      const open = row.highlighted;
+      row.controlsEl.style.display = open || row.hidden ? "inline-flex" : "none";
+      for (const child of Array.from(row.controlsEl.children)) {
+        if (!(child instanceof HTMLElement) || child === row.eyeEl) continue;
+        if (child === row.extrasEl) {
+          child.style.display = open ? "contents" : "none";
+          continue;
+        }
+        child.style.display = open ? "inline-flex" : "none";
+      }
     }
     /** Drop the current selection outline, if any. */
     clearSelection() {
@@ -10284,6 +10587,7 @@ var Vela = (function (exports) {
     destroy() {
       this.closeDialog();
       this.closeMoveMenu();
+      this.closeRowMenu();
       for (const id of [...this.rowTips.keys()]) this.disposeTips(this.rowTips, id);
       for (const id of [...this.extrasTips.keys()]) this.disposeTips(this.extrasTips, id);
       for (const lg of this.legends.values()) lg.remove();
@@ -10339,6 +10643,7 @@ var Vela = (function (exports) {
       const card = document.createElement("div");
       card.className = "vela-ind-dialog";
       card.style.cssText = `display:flex;flex-direction:column;width:fit-content;min-width:min(360px,90%);max-width:min(640px,94%);max-height:82%;background:${t.background};border:1px solid ${border};border-radius:var(--vela-radius-lg);box-shadow:var(--vela-shadow-dialog);color:${fg};color-scheme:${scheme};font:13px ${font};overflow:hidden;`;
+      if (this.mobileLayout) card.style.cssText += "width:100%;min-width:0;max-width:none;height:100%;max-height:none;border:none;border-radius:0;";
       applyChromeTokens(card, t);
       card.addEventListener("keydown", (e) => {
         if (e.key !== "Escape") e.stopPropagation();
@@ -10346,7 +10651,7 @@ var Vela = (function (exports) {
       const header = document.createElement("div");
       header.style.cssText = "display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 20px 12px;flex:0 0 auto;";
       const hTitle = document.createElement("span");
-      hTitle.textContent = row.title;
+      hTitle.textContent = row.settingsTitle;
       hTitle.style.cssText = "font-weight:600;font-size:16px;line-height:1.3;";
       const closeBtn = document.createElement("button");
       closeBtn.type = "button";
@@ -10358,7 +10663,7 @@ var Vela = (function (exports) {
       closeBtn.addEventListener("click", () => this.closeDialog());
       header.append(hTitle, closeBtn);
       card.appendChild(header);
-      makeDialogDraggable(card, header, { closeSelector: "button" });
+      if (!this.mobileLayout) makeDialogDraggable(card, header, { closeSelector: "button" });
       const tabs = document.createElement("div");
       tabs.style.cssText = `display:flex;gap:16px;padding:0 20px;border-bottom:1px solid ${border};flex:0 0 auto;`;
       const tab = document.createElement("div");
@@ -10378,7 +10683,7 @@ var Vela = (function (exports) {
           section.appendChild(gh);
         }
         const grid = document.createElement("div");
-        grid.style.cssText = "display:grid;grid-template-columns:minmax(140px,auto) auto auto 1fr;align-items:center;column-gap:12px;row-gap:22px;";
+        grid.style.cssText = this.mobileLayout ? "display:grid;grid-template-columns:minmax(0,1fr) auto auto max-content;align-items:center;column-gap:12px;row-gap:22px;" : "display:grid;grid-template-columns:minmax(140px,auto) auto auto 1fr;align-items:center;column-gap:12px;row-gap:22px;";
         for (const inputRow of group.rows) this.buildInputRow(grid, inputRow, row);
         section.appendChild(grid);
         body.appendChild(section);
@@ -10827,10 +11132,14 @@ var Vela = (function (exports) {
   var CHECK_SVG = iconAt("check", 12);
   var SELECT_CHEVRON_SVG = iconAt("chevron-down", 16);
   var DIALOG_STYLE_ID = "vela-ind-dialog-styles";
+  var DIALOG_STYLE_REV = "10";
   function ensureDialogStyles() {
-    if (typeof document === "undefined" || document.getElementById(DIALOG_STYLE_ID)) return;
-    const s = document.createElement("style");
+    if (typeof document === "undefined") return;
+    const existing = document.getElementById(DIALOG_STYLE_ID);
+    if (existing?.dataset.rev === DIALOG_STYLE_REV) return;
+    const s = existing ?? document.createElement("style");
     s.id = DIALOG_STYLE_ID;
+    s.dataset.rev = DIALOG_STYLE_REV;
     s.textContent = `
 .vela-ind-dialog input[type=color]{-webkit-appearance:none;appearance:none;}
 .vela-ind-dialog input[type=color]::-webkit-color-swatch-wrapper{padding:0;}
@@ -10844,19 +11153,19 @@ var Vela = (function (exports) {
 .vela-ind-dialog ::-webkit-scrollbar-track{background:transparent;}
 .vela-ind-hint{background:var(--vela-hover);color:var(--vela-fg-muted);transition:background var(--vela-dur-fast) ease,color var(--vela-dur-fast) ease;}
 .vela-ind-hint:hover{background:var(--vela-active);color:var(--vela-fg-bright);}
-.vela-ind-ctl{color:var(--vela-fg-muted);transition:color var(--vela-dur-fast) ease;}
-.vela-ind-ctl:hover{color:var(--vela-fg-bright);}
-.vela-ind-close{transition:color var(--vela-dur-fast) ease;}
-.vela-ind-close:hover{color:var(--vela-danger) !important;}
-.vela-ind-fold{color:var(--vela-fg-muted);transition:color var(--vela-dur-fast) ease,border-color var(--vela-dur-fast) ease;}
-.vela-ind-fold:hover{color:var(--vela-fg-bright);border-color:var(--vela-border-strong);}
+.vela-ind-ctl,.vela-ind-close{background-color:transparent;color:inherit;transition:color var(--vela-dur-fast) ease,background-color var(--vela-dur-fast) ease;}
+.vela-ind-ctl svg,.vela-ind-close svg{width:${LEGEND_ICON_PX}px;height:${LEGEND_ICON_PX}px;display:block;flex:none;stroke-width:1;}
+.vela-ind-ctl:hover{background-color:var(--vela-hover-strong);}
+.vela-ind-close:hover{color:var(--vela-danger) !important;background-color:var(--vela-hover-strong);}
+.vela-ind-fold{transition:border-color var(--vela-dur-fast) ease,opacity var(--vela-dur-fast) ease;}
+.vela-ind-fold:hover{border-color:var(--vela-border-strong);opacity:0.9;}
 .vela-ind-menuitem{background:transparent;transition:background var(--vela-dur-fast) ease;}
 .vela-ind-menuitem:hover{background:var(--vela-hover-strong);}
 .vela-ind-btn{cursor:pointer;padding:7px 14px;border-radius:var(--vela-radius-md);border:1px solid transparent;background:transparent;color:var(--vela-fg-muted);font-weight:600;font-size:13px;font-family:inherit;transition:background var(--vela-dur-fast) ease,color var(--vela-dur-fast) ease,opacity var(--vela-dur-fast) ease;}
 .vela-ind-btn:hover{background:var(--vela-hover);color:var(--vela-fg-bright);}
 .vela-ind-btn-primary{padding:7px 16px;border-color:var(--vela-selected-bg);background:var(--vela-selected-bg);color:var(--vela-selected-fg);}
 .vela-ind-btn-primary:hover{background:var(--vela-selected-bg);color:var(--vela-selected-fg);opacity:0.85;}`;
-    document.head.appendChild(s);
+    if (!existing) document.head.appendChild(s);
   }
   var TIMEFRAME_OPTIONS = [
     { value: "", label: "Chart" },
@@ -11465,6 +11774,44 @@ var Vela = (function (exports) {
     for (const t of chartTypes()) if (t.id === style) return t.basePainting ?? "candles";
     return "candles";
   }
+  function hasOwnCandlePaint(style) {
+    if (BUILTIN_PRICE_STYLES.includes(style)) return false;
+    for (const t of chartTypes()) if (t.id === style) return (t.basePainting ?? "candles") === "candles";
+    return false;
+  }
+  function candleOverrideFor(style, bags) {
+    if (!hasOwnCandlePaint(style)) return null;
+    const bag = bags[style] ?? {};
+    const color = (v) => isColor(v) ? v : null;
+    const bool = (v) => isBool(v) ? v : null;
+    return {
+      upColor: color(bag.candleUpColor),
+      downColor: color(bag.candleDownColor),
+      bodyVisible: bool(bag.candleBodyVisible),
+      borderVisible: bool(bag.candleBorderVisible),
+      borderUpColor: color(bag.candleBorderUpColor),
+      borderDownColor: color(bag.candleBorderDownColor),
+      wickVisible: bool(bag.candleWickVisible),
+      wickUpColor: color(bag.candleWickUpColor),
+      wickDownColor: color(bag.candleWickDownColor)
+    };
+  }
+  function effectiveCandlePaint(base, override, themeUp, themeDown) {
+    if (!override) return { up: themeUp, down: themeDown, candle: base };
+    return {
+      up: override.upColor ?? themeUp,
+      down: override.downColor ?? themeDown,
+      candle: {
+        bodyVisible: override.bodyVisible ?? base.bodyVisible,
+        borderVisible: override.borderVisible ?? base.borderVisible,
+        borderUpColor: override.borderUpColor ?? base.borderUpColor,
+        borderDownColor: override.borderDownColor ?? base.borderDownColor,
+        wickVisible: override.wickVisible ?? base.wickVisible,
+        wickUpColor: override.wickUpColor ?? base.wickUpColor,
+        wickDownColor: override.wickDownColor ?? base.wickDownColor
+      }
+    };
+  }
   function priceStyleIds() {
     const out = [...BUILTIN_PRICE_STYLES];
     for (const t of chartTypes()) if (!out.includes(t.id)) out.push(t.id);
@@ -11503,6 +11850,33 @@ var Vela = (function (exports) {
   function clampSpacing(v) {
     return v < 0.1 ? 0.1 : v > 10 ? 10 : v;
   }
+  function factoryResetConfig(factory) {
+    const bag = {};
+    for (const t of chartTypes()) {
+      const section = t.settings;
+      if (!section) continue;
+      const defaults2 = {};
+      const addRows = (rows) => {
+        for (const r of rows ?? []) {
+          for (const k of settingsRowValueKeys(r)) defaults2[k.key] = k.defval;
+        }
+      };
+      for (const inst of section.instances ?? []) {
+        if (inst.enableKey) defaults2[inst.enableKey] = false;
+        addRows(inst.rows);
+      }
+      for (const sub of section.subsections ?? []) {
+        if (sub.enableKey) defaults2[sub.enableKey] = false;
+        addRows(sub.rows);
+      }
+      if (!section.instances) addRows(section.rows);
+      bag[t.id] = defaults2;
+    }
+    for (const [typeId, vals] of Object.entries(factory.chartTypes)) {
+      bag[typeId] = { ...bag[typeId] ?? {}, ...vals };
+    }
+    return { ...factory, chartTypes: bag };
+  }
   function mergeConfig(base, patch) {
     const p = asObject(patch);
     const ctPatch = asObject(p.chartTypes);
@@ -11817,6 +12191,9 @@ var Vela = (function (exports) {
       this.priceStyle = "candles";
       /** Price-series base painting for the ACTIVE style (see ChartTypeDefinition.basePainting). */
       this.basePainting = "candles";
+      /** The ACTIVE style's own candle cosmetics (`chartTypes.<id>.candle*`) when it is a
+       *  candle-based plugin type; null ⇒ paint with the shared `style.candle` block. */
+      this.candleOverride = null;
       /** Explicit baseline reference price for `priceStyle:'baseline'`; when null the
        *  baseline follows `style.baseline.baselineLevel` as a percent of the visible pane
        *  range (resolved per frame via `baselinePriceFor`). */
@@ -13046,14 +13423,15 @@ void main() {
     emitCandles(b, scene, bars, i0, i1, coords, pane, theme, barColors) {
       const spacing = coords.bodySpacing();
       const tier = candleTier(spacing);
+      const paint = effectiveCandlePaint(scene.style.candle, scene.candleOverride, theme.upColor, theme.downColor);
       if (tier === "aggregate") {
-        this.emitCandlesAggregated(b, bars, i0, i1, coords, pane, theme.upColor, theme.downColor, barColors);
+        this.emitCandlesAggregated(b, bars, i0, i1, coords, pane, paint.up, paint.down, barColors);
         return;
       }
       const drawBody = tier === "full";
-      const up = theme.upColor;
-      const down = theme.downColor;
-      const cs = scene.style.candle;
+      const up = paint.up;
+      const down = paint.down;
+      const cs = paint.candle;
       const fading = this.candleStructureAlpha > this.candleBodyAlpha + 1e-3;
       for (let i = i0; i <= i1; i += 1) {
         const bar = bars[i];
@@ -13624,6 +14002,11 @@ void main() {
   var FLING_MIN_SPEED = 0.04;
   var FLING_STALE_MS = 60;
   var DRAG_SLOP = 2;
+  var LONG_PRESS_MS = 350;
+  var TOUCH_SLOP = 8;
+  var TOUCH_TAP_SLOP = 14;
+  var DOUBLE_TAP_MS = 350;
+  var DOUBLE_TAP_SLOP = 30;
   var TIME_SCALE_K = 4e-3;
   var WHEEL_ZOOM_K = 25e-4;
   function wheelZoomAnchor(coords, cursorX, rightEdge) {
@@ -13644,8 +14027,13 @@ void main() {
   function effectiveSnapMode(momentaryOverride, sticky) {
     return momentaryOverride ? "strong" : sticky;
   }
+  function pinchBarSpacing(startBarSpacing, startDist, dist) {
+    return clampBarSpacing(startBarSpacing * (dist / Math.max(1, startDist)));
+  }
+  function pinchPinnedRightOffset(anchorLogical, barCount, width, x, pxPerBar) {
+    return anchorLogical - (barCount - 1) + (width - x) / pxPerBar;
+  }
   var InputController = class {
-    // the last middle press deleted a drawing (suppress autoscroll/paste)
     constructor(deps) {
       this.deps = deps;
       /** When true (the default), wheel-zoom pins the right edge instead of the bar
@@ -13673,9 +14061,40 @@ void main() {
       this.vx = 0;
       // smoothed pointer velocity, px/ms
       this.middleDeleted = false;
+      // the last middle press deleted a drawing (suppress autoscroll/paste)
+      // Last cursor position over the element (NaN once it leaves) — lets a modifier
+      // press/release re-shape the drawings preview with the pointer stationary.
+      this.cursorX = NaN;
+      this.cursorY = NaN;
+      // ── touch state ──
+      /** Live touch contacts (local coords) — two entries drive a pinch; extras are ignored. */
+      this.touches = /* @__PURE__ */ new Map();
+      this.lpTimer = null;
+      this.pinchStartDist = 1;
+      this.pinchStartBarSpacing = 0;
+      this.pinchAnchorLogical = 0;
+      // Last clean touch tap (for double-tap pairing). Time 0 = no pending first tap.
+      this.lastTapT = 0;
+      this.lastTapX = 0;
+      this.lastTapY = 0;
+      this.onTouchContextMenu = (e) => {
+        if (this.touches.size === 0) return;
+        if (!(e.target instanceof Node) || !this.el?.contains(e.target)) return;
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      };
       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);
@@ -13685,6 +14104,15 @@ void main() {
         }
         if (e.button !== 0) return;
         const { x, y } = this.local(e);
+        if (e.pointerType === "touch") {
+          if (this.touches.size === 1 && this.dragging && (this.region === "data" || this.region === "crosshair")) {
+            this.touches.set(e.pointerId, { x, y });
+            this.beginPinch(e);
+            return;
+          }
+          if (this.touches.size >= 1) return;
+          this.touches.set(e.pointerId, { x, y });
+        }
         this.deps.drawingsClearTransient?.();
         this.dragging = true;
         this.moved = false;
@@ -13710,6 +14138,9 @@ void main() {
         if (this.region === "price") this.deps.beginPriceScale(x, y);
         else if (this.region === "separator") this.deps.beginPaneResize(y);
         else if (this.region === "data") this.verticalPan = this.deps.beginPricePan(y);
+        if (e.pointerType === "touch" && (this.region === "data" || this.region === "price" || this.region === "time")) {
+          this.startLongPress(x, y, this.region);
+        }
         this.lastX = x;
         this.lastT = e.timeStamp;
         this.vx = 0;
@@ -13717,28 +14148,44 @@ void main() {
       };
       this.onMove = (e) => {
         const { x, y } = this.local(e);
+        this.cursorX = x;
+        this.cursorY = y;
+        if (e.pointerType === "touch" && this.touches.has(e.pointerId)) this.touches.set(e.pointerId, { x, y });
+        if (this.dragging && this.region === "pinch") {
+          this.applyPinch();
+          return;
+        }
+        if (this.dragging && this.region === "crosshair") {
+          this.deps.onPointerMove(x, y);
+          return;
+        }
+        if (this.dragging && this.region === "axis-sheet") {
+          return;
+        }
+        if (this.lpTimer !== null && Math.hypot(x - this.startX, y - this.startY) > TOUCH_SLOP) this.cancelLongPress();
+        const slop = e.pointerType === "touch" ? TOUCH_SLOP : DRAG_SLOP;
         if (this.dragging) {
           if (this.region === "price") {
-            if (Math.abs(y - this.startY) > DRAG_SLOP) this.moved = true;
+            if (Math.abs(y - this.startY) > slop) this.moved = true;
             this.deps.priceScaleBy(y - this.startY);
           } else if (this.region === "separator") {
-            if (Math.abs(y - this.startY) > DRAG_SLOP) this.moved = true;
+            if (Math.abs(y - this.startY) > slop) this.moved = true;
             this.deps.paneResizeBy(y - this.startY);
           } else if (this.region === "time") {
-            if (Math.abs(x - this.startX) > DRAG_SLOP) this.moved = true;
+            if (Math.abs(x - this.startX) > slop) this.moved = true;
             const barSpacing = clampBarSpacing(this.startBarSpacing * Math.exp((this.startX - x) * TIME_SCALE_K));
             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));
+            if (Math.abs(x - this.startX) > slop || Math.abs(y - this.startY) > slop) this.moved = true;
+            this.deps.drawingsPointerMove?.(x, y, this.snapMode(e), e.shiftKey);
           } else {
             const coords = this.deps.getCoords();
             const vp = coords.getViewport();
             const dx = x - this.startX;
-            if (Math.abs(dx) > DRAG_SLOP) this.moved = true;
+            if (Math.abs(dx) > slop) this.moved = true;
             this.deps.apply({ barSpacing: vp.barSpacing, rightOffset: this.startRightOffset - dx / coords.pxPerBar() });
             if (this.verticalPan) {
-              if (Math.abs(y - this.startY) > DRAG_SLOP) this.moved = true;
+              if (Math.abs(y - this.startY) > slop) this.moved = true;
               this.deps.pricePanBy(y - this.startY);
             }
             const dt = e.timeStamp - this.lastT;
@@ -13753,16 +14200,46 @@ void main() {
           const drawCursor = this.deps.drawingsCursor?.(x, y);
           const r = this.regionAt(x, y);
           this.el.style.cursor = drawCursor ?? (r === "price" ? "ns-resize" : r === "time" ? "ew-resize" : r === "separator" ? "row-resize" : "");
-          this.deps.drawingsPointerMove?.(x, y, this.snapMode(e));
+          this.deps.drawingsPointerMove?.(x, y, this.snapMode(e), e.shiftKey);
         }
-        this.deps.onPointerMove(x, y);
+        if (e.pointerType !== "touch") this.deps.onPointerMove(x, y);
       };
       this.onUp = (e) => {
+        if (e.pointerType === "touch") this.touches.delete(e.pointerId);
+        this.cancelLongPress();
+        if (this.dragging && this.region === "pinch") {
+          if (this.touches.size === 1) {
+            const rest = [...this.touches.values()][0];
+            const vp = this.deps.getCoords().getViewport();
+            this.region = "data";
+            this.verticalPan = false;
+            this.startX = rest.x;
+            this.startY = rest.y;
+            this.startRightOffset = vp.rightOffset;
+            this.startBarSpacing = vp.barSpacing;
+            this.lastX = rest.x;
+            this.lastT = e.timeStamp;
+            this.vx = 0;
+            return;
+          }
+          this.endGesture(e);
+          return;
+        }
+        if (this.dragging && this.region === "crosshair") {
+          this.deps.onPointerMove(null, null);
+          this.endGesture(e);
+          return;
+        }
+        if (this.dragging && this.region === "axis-sheet") {
+          this.endGesture(e);
+          return;
+        }
+        const { x, y } = this.local(e);
+        const wasTouch = e.pointerType === "touch";
+        const tapRelease = this.dragging && !this.moved && (!wasTouch || Math.hypot(x - this.startX, y - this.startY) <= TOUCH_TAP_SLOP);
         if (this.dragging && this.region === "drawing") {
-          const { x, y } = this.local(e);
           this.deps.drawingsPointerUp?.(x, y);
-        } else if (this.dragging && !this.moved && this.region === "data") {
-          const { x, y } = this.local(e);
+        } else if (tapRelease && this.region === "data") {
           this.deps.onClick(x, y);
         } else if (this.dragging && this.region === "data") {
           const stale = e.timeStamp - this.lastT > FLING_STALE_MS;
@@ -13771,23 +14248,29 @@ void main() {
             this.deps.fling(-this.vx / pitch);
           }
         }
-        this.dragging = false;
-        try {
-          this.el?.releasePointerCapture(e.pointerId);
-        } catch {
-        }
+        const wasTap = wasTouch && tapRelease;
+        this.endGesture(e);
+        if (wasTouch) this.deps.onPointerMove(null, null);
+        if (wasTap) this.registerTap(e.timeStamp, x, y);
+      };
+      /** The browser took the pointer back (system gesture, palm rejection, tab switch):
+       *  drop the gesture where it is — no click, no fling, no stuck `dragging`. */
+      this.onCancel = (e) => {
+        if (e.pointerType === "touch") this.touches.delete(e.pointerId);
+        this.cancelLongPress();
+        if (!this.dragging) return;
+        if (this.region === "drawing" && !Number.isNaN(this.cursorX)) this.deps.drawingsPointerUp?.(this.cursorX, this.cursorY);
+        if (this.region === "crosshair" || e.pointerType === "touch") this.deps.onPointerMove(null, null);
+        this.endGesture(e);
       };
       this.onLeave = () => {
+        this.cursorX = NaN;
+        this.cursorY = NaN;
         this.deps.onPointerMove(null, null);
       };
       this.onDblClick = (e) => {
         const { x, y } = this.local(e);
-        if (this.deps.drawingsDblClick?.(x, y)) return;
-        const region = this.regionAt(x, y);
-        if (region === "price") this.deps.resetPriceScale(x, y);
-        else if (region === "separator") this.deps.resetPaneSize(y);
-        else if (region === "time") this.deps.resetView();
-        else this.deps.dataDblClick(x, y);
+        this.doubleActivate(x, y);
       };
       this.onWheel = (e) => {
         e.preventDefault();
@@ -13808,26 +14291,44 @@ void main() {
     }
     attach(el) {
       this.el = el;
+      if (el.style !== void 0) {
+        el.style.touchAction = "none";
+        el.style.userSelect = "none";
+        el.style.setProperty("-webkit-user-select", "none");
+        el.style.setProperty("-webkit-touch-callout", "none");
+      }
       el.addEventListener("pointerdown", this.onDown);
       el.addEventListener("pointermove", this.onMove);
       el.addEventListener("pointerup", this.onUp);
       el.addEventListener("pointerleave", this.onLeave);
+      el.addEventListener("pointercancel", this.onCancel);
       el.addEventListener("dblclick", this.onDblClick);
       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);
+      win?.addEventListener("contextmenu", this.onTouchContextMenu, true);
     }
     detach() {
       const el = this.el;
       if (!el) return;
+      const win = el.ownerDocument?.defaultView;
+      win?.removeEventListener("keydown", this.onModifier);
+      win?.removeEventListener("keyup", this.onModifier);
+      win?.removeEventListener("contextmenu", this.onTouchContextMenu, true);
       el.removeEventListener("pointerdown", this.onDown);
       el.removeEventListener("pointermove", this.onMove);
       el.removeEventListener("pointerup", this.onUp);
       el.removeEventListener("pointerleave", this.onLeave);
+      el.removeEventListener("pointercancel", this.onCancel);
       el.removeEventListener("dblclick", this.onDblClick);
       el.removeEventListener("wheel", this.onWheel);
       el.removeEventListener("mousedown", this.onMiddleGuard);
       el.removeEventListener("auxclick", this.onMiddleGuard);
+      this.cancelLongPress();
+      this.touches.clear();
       this.el = null;
     }
     local(e) {
@@ -13851,6 +14352,59 @@ void main() {
     snapMode(e) {
       return effectiveSnapMode(e.ctrlKey || e.metaKey, this.deps.drawingsSnapMode?.() ?? "off");
     }
+    /** Arm the long-press timer for a data-area → crosshair or axis → sheet hold;
+     *  movement past TOUCH_SLOP or a second finger cancels it. */
+    startLongPress(x, y, region) {
+      this.cancelLongPress();
+      this.lpTimer = setTimeout(() => {
+        this.lpTimer = null;
+        if (!this.dragging || this.region !== region) return;
+        if (region === "data") {
+          this.region = "crosshair";
+          this.deps.onPointerMove(x, y);
+          return;
+        }
+        this.region = "axis-sheet";
+        this.moved = true;
+        this.deps.onAxisLongPress?.(region, x, y);
+      }, LONG_PRESS_MS);
+    }
+    cancelLongPress() {
+      if (this.lpTimer !== null) clearTimeout(this.lpTimer);
+      this.lpTimer = null;
+    }
+    /** Two fingers down: freeze the view and re-base the gesture as an anchored pinch. */
+    beginPinch(e) {
+      this.cancelLongPress();
+      if (this.region === "crosshair") this.deps.onPointerMove(null, null);
+      const coords = this.deps.getCoords();
+      const vp = coords.getViewport();
+      this.deps.apply(vp);
+      const [a, b] = [...this.touches.values()];
+      this.pinchStartDist = Math.max(1, Math.hypot(a.x - b.x, a.y - b.y));
+      this.pinchStartBarSpacing = vp.barSpacing;
+      this.pinchAnchorLogical = coords.xToLogical((a.x + b.x) / 2);
+      this.region = "pinch";
+      this.dragging = true;
+      this.moved = true;
+      this.vx = 0;
+      this.capture(e.pointerId);
+    }
+    /** Track both fingers: distance ratio zooms, the live midpoint pans (anchor pinned under it). */
+    applyPinch() {
+      const coords = this.deps.getCoords();
+      const pts = [...this.touches.values()];
+      if (pts.length < 2) return;
+      const [a, b] = pts;
+      const barSpacing = pinchBarSpacing(this.pinchStartBarSpacing, this.pinchStartDist, Math.hypot(a.x - b.x, a.y - b.y));
+      const vp = coords.getViewport();
+      const pitchScale = vp.barSpacing > 0 ? coords.pxPerBar() / vp.barSpacing : 1;
+      const midX = (a.x + b.x) / 2;
+      this.deps.apply({
+        barSpacing,
+        rightOffset: pinchPinnedRightOffset(this.pinchAnchorLogical, coords.barCount, coords.width, midX, barSpacing * pitchScale)
+      });
+    }
     /** Capture defensively: a synthetic/already-released pointer can't be captured, and
      *  the move/up pair still routes through the element listeners without it. */
     capture(pointerId) {
@@ -13859,6 +14413,35 @@ void main() {
       } catch {
       }
     }
+    /** Pair clean taps into a double-tap — the touch equivalent of dblclick (same
+     *  routing: axis taps reset that axis' view, a plot tap toggles pane maximize). */
+    registerTap(t, x, y) {
+      const paired = this.lastTapT > 0 && t - this.lastTapT <= DOUBLE_TAP_MS && Math.hypot(x - this.lastTapX, y - this.lastTapY) <= DOUBLE_TAP_SLOP;
+      if (paired) {
+        this.lastTapT = 0;
+        this.doubleActivate(this.lastTapX, this.lastTapY);
+        return;
+      }
+      this.lastTapT = t;
+      this.lastTapX = x;
+      this.lastTapY = y;
+    }
+    endGesture(e) {
+      this.dragging = false;
+      try {
+        this.el?.releasePointerCapture(e.pointerId);
+      } catch {
+      }
+    }
+    /** Shared double-click / double-tap routing, by the region under the point. */
+    doubleActivate(x, y) {
+      if (this.deps.drawingsDblClick?.(x, y)) return;
+      const region = this.regionAt(x, y);
+      if (region === "price") this.deps.resetPriceScale(x, y);
+      else if (region === "separator") this.deps.resetPaneSize(y);
+      else if (region === "time") this.deps.resetView();
+      else this.deps.dataDblClick(x, y);
+    }
   };
 
   // src/renderers/native/core/KeyboardController.ts
@@ -14237,12 +14820,13 @@ void main() {
     drawCandles(ctx, scene, bars, i0, i1, coords, pane, theme, barColors) {
       const spacing = coords.bodySpacing();
       const tier = candleTier(spacing);
+      const paint = effectiveCandlePaint(scene.style.candle, scene.candleOverride, theme.upColor, theme.downColor);
       if (tier === "aggregate") {
-        this.drawCandlesAggregated(ctx, bars, i0, i1, coords, pane, theme.upColor, theme.downColor, barColors);
+        this.drawCandlesAggregated(ctx, bars, i0, i1, coords, pane, paint.up, paint.down, barColors);
         return;
       }
       const drawBody = tier === "full";
-      const cs = scene.style.candle;
+      const cs = paint.candle;
       const fading = this.candleStructureAlpha > this.candleBodyAlpha + 1e-3;
       for (let i = i0; i <= i1; i += 1) {
         const b = bars[i];
@@ -14250,7 +14834,7 @@ void main() {
         const g = candleGeometry(coords.logicalToX(i), spacing, coords.dpr, this.candleBodyScale);
         const x = g.center;
         const up = b.close >= b.open;
-        const dir = up ? theme.upColor : theme.downColor;
+        const dir = up ? paint.up : paint.down;
         const bc = barColors.get(b.time);
         const color = bc ?? dir;
         let top = 0;
@@ -15361,7 +15945,7 @@ void main() {
     constructor() {
       this.canvas = null;
       this.ctx = null;
-      // The color for axis tick labels — the stable chrome surface text, set each frame in render().
+      // The color for axis tick labels — the host-passed surface text, set each frame in render().
       this.axisTextColor = DARK_THEME.textColor;
       // Shared Pine-drawing renderer (line/box/label/polyline/linefill); widthCache persists.
       this.drawScene = new DrawingSceneRenderer({ timeToLogical: () => 0, barAt: () => null, theme: {} });
@@ -15393,8 +15977,8 @@ void main() {
       return dr;
     }
     /** Clear the chrome canvas and draw drawings + axes + current-price line.
-     *  `surface` (background + text) paints the axis-scale gutters so they keep the app
-     *  chrome color and stay readable, rather than tracking the user-editable plot cosmetics.
+     *  `surface` (background + text) paints the axis-scale gutters — the host passes the live
+     *  chart background so the scales read as part of the plot, with contrast-corrected text.
      *  Falls back to the theme's own colors when no surface is supplied. */
     render(scene, coords, theme, surface) {
       const ctx = this.ctx;
@@ -15671,11 +16255,19 @@ void main() {
       const y = dataH + (fullH - dataH) / 2;
       const tr = coords.visibleTimeRange();
       const offset = tzOffsetMs((tr.from + tr.to) / 2, scene.timezone);
-      for (const tick of timeTicks(tr.from, tr.to, 8, offset)) {
-        const x = coords.timeToX(tick.time);
-        if (x < 20 || x > dataW - 20) continue;
-        ctx.fillText(tick.label, x, y);
-      }
+      const target = Math.max(3, Math.min(8, Math.floor(dataW / 64)));
+      const ticks = timeTicks(tr.from, tr.to, target, offset).map((tick) => ({ ...tick, x: coords.timeToX(tick.time), half: ctx.measureText(tick.label).width / 2 })).filter((tick) => tick.x >= 20 && tick.x <= dataW - 20);
+      const GAP = 12;
+      const placed = [];
+      const put = (tick) => {
+        const l = tick.x - tick.half;
+        const r = tick.x + tick.half;
+        if (!placed.every((p) => r + GAP <= p.l || l - GAP >= p.r)) return;
+        placed.push({ l, r });
+        ctx.fillText(tick.label, tick.x, y);
+      };
+      for (const tick of ticks) if (tick.major) put(tick);
+      for (const tick of ticks) if (!tick.major) put(tick);
       ctx.textAlign = "start";
     }
   };
@@ -15777,10 +16369,10 @@ void main() {
     }
     /** The synced ghost: a dimmed vertical line at the bar the renderer resolved as
      *  CONTAINING the foreign time (+ horizontal line when a comparable price came
-     *  along), with that bar's time chip in this chart's own timezone. The snap
-     *  happened upstream (`externalCrossPx`, floor-to-containing-bar) — this method
-     *  only draws. No price chip — the ghost answers "when", the local crosshair
-     *  answers "where". */
+     *  along), with that bar's time chip in this chart's own timezone and — when the
+     *  level resolved — the price chip on the right axis. The snap happened upstream
+     *  (`externalCrossPx`, floor-to-containing-bar) — this method only draws. Chips
+     *  render slightly dimmed so the ghost still reads as foreign. */
     drawExternal(ctx, ext, scene, coords, theme) {
       const cs = scene.style.crosshair;
       const dataW = coords.width;
@@ -15804,7 +16396,20 @@ void main() {
       ctx.setLineDash([]);
       ctx.lineWidth = 1;
       ctx.globalAlpha = 0.8;
-      this.chip(ctx, x, dataH + 1, formatStamp(ext.time, scene.timezone), cs.labelBackground ?? theme.borderColor, "center", true, theme.background);
+      const chipBg = cs.labelBackground ?? theme.borderColor;
+      if (ext.y != null && ext.price != null) {
+        let pane;
+        for (const p of scene.panes.values()) {
+          if (ext.y >= p.bounds.top && ext.y <= p.bounds.top + p.bounds.height) {
+            pane = p;
+            break;
+          }
+        }
+        if (pane) {
+          this.chip(ctx, dataW + 1, ext.y, formatAxisValue(pane.scale, pane.bounds.height, ext.price, percentScaleFor(scene, pane), scene.priceMintick, pane.axisFormat), chipBg, "left", false, theme.background);
+        }
+      }
+      this.chip(ctx, x, dataH + 1, formatStamp(ext.time, scene.timezone), chipBg, "center", true, theme.background);
       ctx.globalAlpha = 1;
     }
     /** A soft band + a brighter crisp center line over the hovered separator, so it reads as
@@ -16165,6 +16770,7 @@ void main() {
       swatch.style.background = `linear-gradient(${v}, ${v}), ${CHECKER2}`;
     };
     paint();
+    trigger.addEventListener("vela-sync", paint);
     trigger.addEventListener("click", (e) => {
       e.stopPropagation();
       if (openPopover && openPopover.trigger === trigger) {
@@ -16200,6 +16806,101 @@ void main() {
     closeOpen();
   }
 
+  // src/renderers/native/chrome/WidthField.ts
+  var WIDTH_FIELD_OPTIONS = [1, 2, 3, 4, 5];
+  var STYLE_ID3 = "vela-width-field";
+  function ensureStyles3() {
+    if (typeof document === "undefined" || document.getElementById(STYLE_ID3)) return;
+    const st = document.createElement("style");
+    st.id = STYLE_ID3;
+    st.textContent = `
+.vela-width-field{height:28px;padding:0 8px;border:1px solid var(--vela-border-strong);border-radius:var(--vela-radius-sm);background:var(--vela-surface-elev);cursor:pointer;display:inline-flex;align-items:center;gap:8px;flex:none;color:var(--vela-fg);font-family:inherit;outline:none;}
+.vela-width-field:hover{border-color:var(--vela-fg-muted);}
+.vela-width-field-pop{position:fixed;z-index:6000;background:var(--vela-surface-overlay);border:1px solid var(--vela-border);border-radius:var(--vela-radius-lg);box-shadow:var(--vela-shadow);padding:4px;display:flex;flex-direction:column;gap:1px;color:var(--vela-fg);}
+.vela-width-field-item{display:flex;align-items:center;gap:8px;min-width:96px;padding:5px 8px;border:none;border-radius:5px;background:transparent;color:inherit;cursor:pointer;text-align:left;font:inherit;}
+.vela-width-field-item:hover{background:var(--vela-hover-strong);}
+.vela-width-field-item[data-active='1']{background:var(--vela-active);}
+`;
+    document.head.appendChild(st);
+  }
+  function lineGlyph(width) {
+    return `<svg width="22" height="14" viewBox="0 0 22 14" fill="none"><line x1="2" y1="7" x2="20" y2="7" stroke="currentColor" stroke-width="${width}" stroke-linecap="round"/></svg>`;
+  }
+  var CHEVRON = `<svg width="8" height="5" viewBox="0 0 8 5" fill="none"><path d="M1 1l3 3 3-3" stroke="#868a96" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+  var openPopover2 = null;
+  function closeOpen2() {
+    if (!openPopover2) return;
+    document.removeEventListener("pointerdown", openPopover2.onOutside, true);
+    window.removeEventListener("resize", openPopover2.reflow, true);
+    openPopover2.el.remove();
+    openPopover2 = null;
+  }
+  function place2(pop, trigger) {
+    const r = trigger.getBoundingClientRect();
+    const w = pop.offsetWidth;
+    const h = pop.offsetHeight;
+    let left = r.right - w;
+    let top = r.bottom + 6;
+    if (left < 6) left = 6;
+    if (left + w > window.innerWidth - 6) left = window.innerWidth - w - 6;
+    if (top + h > window.innerHeight - 6) top = r.top - h - 6;
+    if (top < 6) top = 6;
+    pop.style.left = `${Math.round(left)}px`;
+    pop.style.top = `${Math.round(top)}px`;
+  }
+  function widthField(theme, getVal, onVal) {
+    ensureStyles3();
+    const trigger = document.createElement("button");
+    trigger.type = "button";
+    trigger.className = "vela-width-field";
+    const paint = () => {
+      trigger.innerHTML = `<span style="display:flex;">${lineGlyph(getVal())}</span><span style="display:flex;">${CHEVRON}</span>`;
+    };
+    paint();
+    trigger.addEventListener("click", (e) => {
+      e.stopPropagation();
+      if (openPopover2 && openPopover2.trigger === trigger) {
+        closeOpen2();
+        return;
+      }
+      closeOpen2();
+      const pop = document.createElement("div");
+      pop.className = "vela-width-field-pop";
+      applyChromeTokens(pop, theme);
+      pop.style.font = `var(--vela-font-size-md) ${theme.fontFamily}`;
+      pop.addEventListener("pointerdown", (ev) => ev.stopPropagation());
+      for (const w of WIDTH_FIELD_OPTIONS) {
+        const item = document.createElement("button");
+        item.type = "button";
+        item.className = "vela-width-field-item";
+        item.dataset.active = w === getVal() ? "1" : "0";
+        item.innerHTML = `<span style="display:flex;flex:none;">${lineGlyph(w)}</span><span style="flex:1;font-variant-numeric:tabular-nums;">${w}px</span>`;
+        item.addEventListener("click", (ev) => {
+          ev.stopPropagation();
+          closeOpen2();
+          onVal(w);
+          paint();
+        });
+        pop.appendChild(item);
+      }
+      document.body.appendChild(pop);
+      place2(pop, trigger);
+      const onOutside = (ev) => {
+        const t = ev.target;
+        if (pop.contains(t) || trigger.contains(t)) return;
+        closeOpen2();
+      };
+      const reflow = () => place2(pop, trigger);
+      setTimeout(() => document.addEventListener("pointerdown", onOutside, true), 0);
+      window.addEventListener("resize", reflow, true);
+      openPopover2 = { el: pop, trigger, onOutside, reflow };
+    });
+    return trigger;
+  }
+  function closeWidthPopover() {
+    closeOpen2();
+  }
+
   // src/renderers/native/chrome/SettingsDialog.ts
   var BUILTIN_STYLE_LABELS = {
     candles: "Candles",
@@ -16251,6 +16952,61 @@ void main() {
 .vela-sd-btn:hover{background:var(--vela-hover);border-color:var(--vela-border-strong);color:var(--vela-fg-bright);}
 .vela-sd-close{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--vela-fg-muted);line-height:0;width:30px;height:30px;border-radius:var(--vela-radius-sm);transition:background var(--vela-dur-fast) ease,color var(--vela-dur-fast) ease;}
 .vela-sd-close:hover{background:var(--vela-hover);color:var(--vela-fg-bright);}
+/* Rows/blocks gated away by chart-type conditions, TOC filters, or the instance strip.
+   !important: the pane grid rewrites inline display ('contents') AFTER the initial
+   visibility pass, so a class must win. */
+.vela-sd-hide{display:none !important;}
+/* Indented rail sub-entry (a chart-type section's subsection tab). */
+.vela-sd-tab-sub{padding-left:28px;font-weight:600;font-size:12px;}
+/* Instance strip: a tab per present instance (label, \u2715 on the active removable one)
+   and a dashed + that turns on the next absent instance. The rule under it separates
+   the strip from the instance's TOC + rows area. */
+.vela-sd-itabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:14px 0 0;padding-bottom:12px;border-bottom:1px solid var(--vela-border);}
+.vela-sd-itab{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px;background:transparent;border:1px solid var(--vela-border);border-radius:var(--vela-radius-md);color:var(--vela-fg-muted);font-family:inherit;font-size:var(--vela-font-size-md);font-weight:600;cursor:pointer;transition:background var(--vela-dur-fast) ease,color var(--vela-dur-fast) ease,border-color var(--vela-dur-fast) ease;}
+.vela-sd-itab:hover{background:var(--vela-hover);color:var(--vela-fg-bright);}
+.vela-sd-itab.on{background:var(--vela-active);color:var(--vela-fg-bright);border-color:var(--vela-border-strong);}
+.vela-sd-ix{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:-4px;border-radius:var(--vela-radius-sm);color:var(--vela-fg-muted);font-size:10px;line-height:1;}
+.vela-sd-ix:hover{background:var(--vela-hover);color:var(--vela-fg-bright);}
+.vela-sd-itab-add{border-style:dashed;min-width:30px;justify-content:center;padding:0;}
+/* Structured pane: group TOC column + rows column, TOP-ALIGNED (the shared padding-top
+   lives on the wrap, never on one column). The TOC sticks while the pane scrolls; the
+   vertical rule sits on the rows column so it spans the full content height. When every
+   group gates out the TOC hides and .no-toc drops the rule with it. */
+.vela-sd-struct{display:flex;align-items:flex-start;padding-top:14px;}
+.vela-sd-toc{position:sticky;top:0;flex:0 0 auto;min-width:104px;display:flex;flex-direction:column;gap:2px;padding:2px 14px 0 0;}
+.vela-sd-struct>[data-sd-rows-host]{border-left:1px solid var(--vela-border);padding-left:18px;}
+.vela-sd-struct.no-toc>[data-sd-rows-host]{border-left:none;padding-left:0;}
+.vela-sd-toc-btn{text-align:left;padding:6px 10px;background:transparent;border:none;border-radius:var(--vela-radius-sm);color:var(--vela-fg-muted);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:background var(--vela-dur-fast) ease,color var(--vela-dur-fast) ease;}
+.vela-sd-toc-btn:hover{background:var(--vela-hover);color:var(--vela-fg-bright);}
+.vela-sd-toc-btn.on{background:var(--vela-active);color:var(--vela-fg-bright);}
+/* Soft-disable: a subsection's enableKey is off \u2014 rows stay visible (browseable) but
+   muted and non-interactive. Applied to each row's children so it survives display:contents;
+   !important beats the inline opacity on labels. */
+.vela-sd-soft>*{opacity:0.4 !important;pointer-events:none !important;}
+/* \u2500\u2500 mobile presentation (.vela-sd-mobile on the scrim; structural sizes are inline in open()) \u2500\u2500
+   The tab rail becomes a burger-opened overlay sidebar; the group TOC becomes a sticky
+   row of horizontally scrollable tabs; the instance strip scrolls instead of wrapping;
+   controls grow to touch size and labels may wrap (the grid gives them a flexible track). */
+.vela-sd-mobile .vela-sd-burger{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--vela-fg);line-height:0;width:36px;height:36px;border-radius:var(--vela-radius-sm);margin-right:2px;}
+.vela-sd-mobile .vela-sd-burger:active{background:var(--vela-hover);}
+.vela-sd-mobile .vela-sd-railscrim{position:absolute;inset:0;z-index:2;background:var(--vela-backdrop);display:none;}
+.vela-sd-mobile .vela-sd-railscrim.open{display:block;}
+.vela-sd-mobile .vela-sd-rail{position:absolute;left:0;top:0;bottom:0;z-index:3;width:min(240px,80%);box-sizing:border-box;background:var(--vela-surface);border-right:1px solid var(--vela-border);box-shadow:var(--vela-shadow-dialog);transform:translateX(-105%);transition:transform var(--vela-dur-med) var(--vela-ease);}
+.vela-sd-mobile .vela-sd-rail.open{transform:translateX(0);}
+.vela-sd-mobile .vela-sd-tab{padding:12px;}
+.vela-sd-mobile .vela-sd-struct{flex-direction:column;padding-top:8px;}
+.vela-sd-mobile .vela-sd-toc{position:sticky;top:0;z-index:1;background:var(--vela-surface);flex-direction:row;overflow-x:auto;scrollbar-width:none;min-width:0;width:100%;box-sizing:border-box;gap:4px;padding:2px 0 8px;}
+.vela-sd-mobile .vela-sd-toc::-webkit-scrollbar{display:none;}
+.vela-sd-mobile .vela-sd-toc-btn{flex:none;padding:8px 12px;font-size:13px;}
+.vela-sd-mobile .vela-sd-struct>[data-sd-rows-host]{border-left:none;padding-left:0;width:100%;}
+.vela-sd-mobile .vela-sd-itabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
+.vela-sd-mobile .vela-sd-itabs::-webkit-scrollbar{display:none;}
+.vela-sd-mobile .vela-sd-itab{height:36px;flex:none;}
+.vela-sd-mobile .vela-sd-check{width:22px;height:22px;}
+.vela-sd-mobile .vela-sd-select,.vela-sd-mobile .vela-sd-number{height:34px;}
+.vela-sd-mobile .vela-sd-close{width:40px;height:40px;}
+.vela-sd-mobile .vela-sd-btn{height:38px;}
+.vela-sd-mobile .vela-sd-row span,.vela-sd-mobile .vela-sd-bool span{white-space:normal !important;}
 `;
     document.head.appendChild(st);
   }
@@ -16271,8 +17027,14 @@ void main() {
       this.themeControl = null;
       /** The built tabs, by title — how `showSection` reaches a pane while the dialog is open. */
       this.tabs = [];
+      /** Active instance-strip tab per chart type — remembered across dialog rebuilds. */
+      this.typeActiveInstance = /* @__PURE__ */ new Map();
+      /** Active TOC group per structured pane (`<typeId>/<pane>` → group label). */
+      this.typeActiveGroup = /* @__PURE__ */ new Map();
       /** The tab currently shown, so a theme change (which rebuilds) lands back on it. */
       this.activeSection = null;
+      /** Mobile chrome: fullscreen card, burger-opened section sidebar, TOC as top tabs. */
+      this.mobileLayout = false;
       if (getComputedStyle(container).position === "static") container.style.position = "relative";
     }
     /** Host-app sections (e.g. the widget's Status line tab) — re-shown on next open. */
@@ -16291,15 +17053,27 @@ void main() {
     }
     setTheme(theme) {
       this.theme = theme;
-      if (this.root) {
-        const cfg = this.config;
-        const oc = this.onChange;
-        const oi = this.onImport;
-        const orst = this.onReset;
-        const section = this.activeSection;
-        this.close();
-        if (cfg && oc) this.open(cfg, oc, oi ?? void 0, orst ?? void 0, section ?? void 0);
-      }
+      this.reopenIfLive();
+    }
+    /** The host shell's chrome size class — mobile presents the dialog fullscreen with
+     *  the tab rail behind a burger sidebar and the TOC as top tabs. An open dialog
+     *  re-presents in place, on the same tab. */
+    setLayoutMode(mode) {
+      const mobile = mode === "mobile";
+      if (mobile === this.mobileLayout) return;
+      this.mobileLayout = mobile;
+      this.reopenIfLive();
+    }
+    /** Rebuild an open dialog in place (theme swap, layout-mode flip) on the same tab. */
+    reopenIfLive() {
+      if (!this.root) return;
+      const cfg = this.config;
+      const oc = this.onChange;
+      const oi = this.onImport;
+      const orst = this.onReset;
+      const section = this.activeSection;
+      this.close();
+      if (cfg && oc) this.open(cfg, oc, oi ?? void 0, orst ?? void 0, section ?? void 0);
     }
     isOpen() {
       return this.root !== null;
@@ -16321,18 +17095,37 @@ void main() {
       this.onImport = onImport ?? null;
       this.onReset = onReset ?? null;
       ensureControlStyles();
+      const mobile = this.mobileLayout;
       const scrim = document.createElement("div");
-      scrim.style.cssText = "position:absolute;inset:0;z-index:21;display:flex;align-items:flex-start;justify-content:center;background:transparent;padding-top:8vh;pointer-events:auto;";
+      scrim.style.cssText = "position:absolute;inset:0;z-index:var(--vela-z-dialog);display:flex;align-items:flex-start;justify-content:center;background:transparent;padding-top:8vh;pointer-events:auto;";
+      if (mobile) {
+        scrim.classList.add("vela-sd-mobile");
+        scrim.style.paddingTop = "0";
+        scrim.style.alignItems = "stretch";
+      }
       scrim.addEventListener("mousedown", (e) => {
         if (e.target === scrim) this.close();
       });
       const dlg = document.createElement("div");
       dlg.style.cssText = `width:fit-content;min-width:min(560px,94vw);max-width:min(720px,94vw);max-height:70vh;display:flex;flex-direction:column;background:${SETTINGS_SURFACE};border:1px solid ${SETTINGS_BORDER};border-radius:var(--vela-radius-lg);box-shadow:var(--vela-shadow-dialog);color:${SETTINGS_TEXT};font:13px var(--vela-font);overflow:hidden;cursor:default;`;
+      if (mobile) dlg.style.cssText += "width:100%;min-width:0;max-width:none;max-height:none;flex:1 1 auto;border:none;border-radius:0;";
       const header = document.createElement("div");
       header.style.cssText = `display:flex;justify-content:space-between;align-items:center;padding:9px 9px 9px 16px;border-bottom:1px solid ${SETTINGS_BORDER};flex:0 0 auto;user-select:none;`;
+      if (mobile) header.style.paddingLeft = "8px";
       const hTitle = document.createElement("span");
       hTitle.textContent = "Chart settings";
       hTitle.style.cssText = "font-size:17px;font-weight:600;letter-spacing:0.2px;";
+      if (mobile) hTitle.style.cssText += "flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;";
+      let toggleRail = null;
+      if (mobile) {
+        const burger = document.createElement("button");
+        burger.type = "button";
+        burger.className = "vela-sd-burger";
+        burger.innerHTML = iconAt("burger", 16);
+        burger.title = "Sections";
+        burger.addEventListener("click", () => toggleRail?.());
+        header.append(burger);
+      }
       const closeBtn = document.createElement("button");
       closeBtn.type = "button";
       closeBtn.innerHTML = iconAt("close", 15);
@@ -16340,8 +17133,8 @@ void main() {
       closeBtn.className = "vela-sd-close";
       closeBtn.addEventListener("click", () => this.close());
       header.append(hTitle, closeBtn);
-      header.style.cursor = "move";
-      {
+      if (!mobile) {
+        header.style.cursor = "move";
         let sx = 0, sy = 0, ox = 0, oy = 0, dragging = false;
         header.addEventListener("pointerdown", (e) => {
           if (e.target?.closest(".vela-sd-close")) return;
@@ -16432,6 +17225,29 @@ void main() {
       baseline.append(this.numberRow("Width", config.baseline.width, 1, 10, 1, (v) => this.emit({ baseline: { width: v } })));
       groups.baseline = baseline;
       body.append(baseline);
+      for (const def of chartTypes()) {
+        if (!hasOwnCandlePaint(def.id)) continue;
+        const bag = config.chartTypes[def.id] ?? {};
+        const colorOf2 = (key, shared) => typeof bag[key] === "string" && bag[key] !== "" ? bag[key] : shared;
+        const boolOf = (key, shared) => typeof bag[key] === "boolean" ? bag[key] : shared;
+        const g = this.group();
+        g.append(this.sectionTitle("Candles"));
+        g.append(this.toggleRow("Body", boolOf("candleBodyVisible", config.candles.bodyVisible), (v) => this.emitType(def.id, "candleBodyVisible", v), [
+          this.swatch(colorOf2("candleUpColor", config.candles.upColor), (v) => this.emitType(def.id, "candleUpColor", v)),
+          this.swatch(colorOf2("candleDownColor", config.candles.downColor), (v) => this.emitType(def.id, "candleDownColor", v))
+        ]));
+        g.append(this.toggleRow("Borders", boolOf("candleBorderVisible", config.candles.borderVisible), (v) => this.emitType(def.id, "candleBorderVisible", v), [
+          this.swatch(colorOf2("candleBorderUpColor", config.candles.borderUpColor), (v) => this.emitType(def.id, "candleBorderUpColor", v)),
+          this.swatch(colorOf2("candleBorderDownColor", config.candles.borderDownColor), (v) => this.emitType(def.id, "candleBorderDownColor", v))
+        ]));
+        g.append(this.toggleRow("Wick", boolOf("candleWickVisible", config.candles.wickVisible), (v) => this.emitType(def.id, "candleWickVisible", v), [
+          this.swatch(colorOf2("candleWickUpColor", config.candles.wickUpColor), (v) => this.emitType(def.id, "candleWickUpColor", v)),
+          this.swatch(colorOf2("candleWickDownColor", config.candles.wickDownColor), (v) => this.emitType(def.id, "candleWickDownColor", v))
+        ]));
+        g.append(this.numberRow("Spacing", config.series.spacing, 0.1, 10, 0.1, (v) => this.emit({ series: { spacing: v } })));
+        groups[def.id] = g;
+        body.append(g);
+      }
       showActive(config.series.style);
       body.append(this.sectionTitle("Time zone"));
       body.append(this.selectRowLabeled("Time zone", normalizeTimezone(config.timeScale.timezone), timezoneOptions(config.timeScale.timezone), (v) => this.emit({ timeScale: { timezone: v } })));
@@ -16446,7 +17262,16 @@ void main() {
           }
         }
       };
+      const renderChartTypeSections = (placement) => {
+        for (const def of chartTypes()) {
+          const typeSettings = def.settings;
+          if (!typeSettings) continue;
+          if ((typeSettings.placement ?? "end") !== placement) continue;
+          this.chartTypeSection(def.id, typeSettings, config, body);
+        }
+      };
       renderHostSections("symbol");
+      renderChartTypeSections("after-symbol");
       renderHostSections("after-symbol");
       body.append(this.section("Scales and lines"));
       body.append(this.sectionTitle("Price scale"));
@@ -16487,35 +17312,27 @@ void main() {
         body.append(this.sectionTitle("Theme"));
         body.append(this.selectRow("Color theme", tc.current === "dark" ? "Dark" : "Light", ["Dark", "Light"], (v) => tc.onSelect(v === "Dark" ? "dark" : "light")));
       }
-      for (const def of chartTypes()) {
-        const typeSettings = def.settings;
-        if (!typeSettings) continue;
-        const marker = this.section(typeSettings.title);
-        marker.dataset.sdStyle = def.id;
-        marker.dataset.sdVisibility = typeSettings.visibility ?? "active";
-        body.append(marker);
-        const values = config.chartTypes[def.id] ?? {};
-        for (const r of typeSettings.rows) {
-          const current2 = values[r.key];
-          if (r.kind === "toggle") {
-            body.append(this.boolRow(r.label, typeof current2 === "boolean" ? current2 : r.defval, (v) => this.emitType(def.id, r.key, v)));
-          } else if (r.kind === "number") {
-            body.append(this.numberRow(r.label, typeof current2 === "number" ? current2 : r.defval, r.min ?? 0, r.max ?? 1e6, r.step ?? 1, (v) => this.emitType(def.id, r.key, v)));
-          } else if (r.kind === "color") {
-            body.append(this.colorRow(r.label, typeof current2 === "string" ? current2 : r.defval, (v) => this.emitType(def.id, r.key, v)));
-          } else {
-            body.append(this.selectRow(r.label, typeof current2 === "string" ? current2 : r.defval, [...r.options], (v) => this.emitType(def.id, r.key, v)));
-          }
-        }
-      }
+      renderChartTypeSections("end");
       renderHostSections("end");
       const shell = document.createElement("div");
-      shell.style.cssText = "display:flex;min-height:360px;max-height:calc(70vh - 100px);flex:1 1 auto;";
+      shell.style.cssText = mobile ? "display:flex;min-height:0;flex:1 1 auto;position:relative;overflow:hidden;" : "display:flex;min-height:360px;max-height:calc(70vh - 100px);flex:1 1 auto;";
       const rail = document.createElement("div");
-      rail.style.cssText = `flex:0 0 170px;display:flex;flex-direction:column;gap:2px;padding:10px 8px;border-right:1px solid ${SETTINGS_BORDER};overflow-y:auto;`;
+      rail.className = "vela-sd-rail";
+      rail.style.cssText = mobile ? "display:flex;flex-direction:column;gap:2px;padding:10px 8px;overflow-y:auto;" : `flex:0 0 170px;display:flex;flex-direction:column;gap:2px;padding:10px 8px;border-right:1px solid ${SETTINGS_BORDER};overflow-y:auto;`;
+      let railScrim = null;
+      if (mobile) {
+        railScrim = document.createElement("div");
+        railScrim.className = "vela-sd-railscrim";
+        railScrim.addEventListener("click", () => toggleRail?.());
+        toggleRail = (open) => {
+          const on = open ?? !rail.classList.contains("open");
+          rail.classList.toggle("open", on);
+          railScrim?.classList.toggle("open", on);
+        };
+      }
       const paneHost = document.createElement("div");
       paneHost.className = "vela-sd-pane";
-      paneHost.style.cssText = "flex:1;overflow-y:auto;padding:6px 18px 14px;";
+      paneHost.style.cssText = mobile ? "flex:1;min-width:0;overflow-y:auto;padding:6px 14px calc(14px + env(safe-area-inset-bottom, 0px));" : "flex:1;overflow-y:auto;padding:6px 18px 14px;";
       const panes = [];
       let current = null;
       for (const child of [...body.children]) {
@@ -16526,7 +17343,7 @@ void main() {
           const tab = document.createElement("button");
           tab.type = "button";
           tab.textContent = title;
-          tab.className = "vela-sd-tab";
+          tab.className = "vela-sd-tab" + (child.dataset.sdSub !== void 0 ? " vela-sd-tab-sub" : "");
           panes.push({ title, el, tab, style: child.dataset.sdStyle, visibility: child.dataset.sdVisibility });
           current = el;
           child.remove();
@@ -16550,6 +17367,10 @@ void main() {
           p.tab.classList.toggle("on", i === idx);
         });
         this.activeSection = panes[idx]?.title ?? null;
+        if (mobile) {
+          hTitle.textContent = panes[idx]?.title ?? "Chart settings";
+          toggleRail?.(false);
+        }
       };
       panes.forEach((p, i) => {
         p.tab.addEventListener("click", () => activate(i));
@@ -16557,19 +17378,28 @@ void main() {
         paneHost.appendChild(p.el);
       });
       this.tabs = panes.map((p, i) => ({ title: p.title, show: () => activate(i) }));
-      const wanted = section === void 0 ? -1 : panes.findIndex((p) => p.title.toLowerCase() === section.toLowerCase());
+      const wanted = section !== void 0 ? panes.findIndex((p) => p.title.toLowerCase() === section.toLowerCase()) : panes.findIndex((p) => p.style === config.series.style && !p.tab.classList.contains("vela-sd-tab-sub"));
       activate(wanted >= 0 ? wanted : 0);
       this.syncTypeTabs?.(config.series.style);
       shell.append(rail, paneHost);
+      if (railScrim) shell.append(railScrim);
       dlg.appendChild(shell);
       dlg.appendChild(this.footer(config));
       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();
+      closeWidthPopover();
       this.root?.remove();
       this.root = null;
       this.tabs = [];
@@ -16596,35 +17426,370 @@ void main() {
       el.textContent = text;
       return el;
     }
-    /** Vertical breathing space between row clusters — grouping reads from whitespace,
-     *  so no drawn rule. */
-    separator() {
-      const el = document.createElement("div");
-      el.className = "vela-sd-sep";
-      el.style.cssText = "height:14px;";
-      return el;
-    }
     /**
-     * One pane-wide control column (section-agnostic), sized to the longest setting
-     * title — same idea as the indicator settings dialog's `minmax(..., auto)` label
-     * track, but shared across every section in the tab.
-     *
-     * `measureHost` must be a visible, in-document ancestor (the dialog): panes are
-     * `display:none` until selected, which would zero layout measurements.
+     * 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.
      */
-    layoutSettingsGrids(pane, measureHost) {
-      if (pane.childElementCount === 0) return;
-      const rows = [...pane.querySelectorAll(".vela-sd-row")];
-      const probe2 = document.createElement("div");
-      probe2.style.cssText = "position:absolute;left:-9999px;top:0;visibility:hidden;display:flex;flex-direction:column;font:13px var(--vela-font);pointer-events:none;";
-      measureHost.appendChild(probe2);
-      let widest = 0;
-      for (const row of rows) {
-        const cell = row.children[0];
-        if (!cell) continue;
-        const clone = cell.cloneNode(true);
-        probe2.appendChild(clone);
-        widest = Math.max(widest, clone.getBoundingClientRect().width);
+    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 seed = (rows) => {
+        for (const r of rows) {
+          for (const k of settingsRowValueKeys(r)) {
+            const v = values[k.key];
+            bag[k.key] = typeof v === k.type ? v : k.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) {
+        if (section.layout === "grouped") body.append(this.groupedRows(`${typeId}/rows`, section.rows, bag, put, refreshers));
+        else 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, refreshers);
+        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`. EVERY kind is
+     * first reduced to the canonical composite shape ({@link normalizeSettingsRow}) and
+     * rendered by the ONE path: optional leading toggle, then the ordered inline
+     * controls in the control column. A control carrying its own `when` registers a
+     * visibility refresher — it appears and disappears live as the bag changes,
+     * independent of the row's gate — and is exempt from the toggle-off dim (it may
+     * exist FOR the off state).
+     */
+    typeRow(r, bag, put, refreshers) {
+      const n = normalizeSettingsRow(r);
+      const controls = [];
+      for (const c of n.controls) {
+        const el = this.inlineControl(c, bag, put, n.toggle !== void 0);
+        if (c.kind !== "hint") refreshers.push(() => el.dispatchEvent(new Event("vela-sync")));
+        if (c.kind !== "hint" && c.when) {
+          el.dataset.sdSelfGated = "1";
+          const when = c.when;
+          refreshers.push(() => {
+            el.style.display = settingsRowVisible(when, bag) ? "" : "none";
+          });
+        }
+        controls.push(el);
+      }
+      if (n.toggle) {
+        const t = n.toggle;
+        const el = this.toggleRow(n.label, bag[t.key], (v) => put(t.key, v), controls, () => bag[t.key] === true);
+        refreshers.push(() => el.dispatchEvent(new Event("vela-sync")));
+        return el;
+      }
+      return this.rowWith(n.label, controls);
+    }
+    /**
+     * Build ONE inline control from its descriptor — the factory behind the composite
+     * row path. `compact` narrows number inputs on toggle rows (the historical inline
+     * width) while standalone rows keep the full-width input.
+     */
+    inlineControl(c, bag, put, compact) {
+      if (c.kind === "hint") {
+        const s = document.createElement("span");
+        s.textContent = c.text;
+        s.style.cssText = "color:var(--vela-fg-muted);";
+        return s;
+      }
+      if (c.kind === "color") {
+        const sw = this.swatch(bag[c.key], (v) => put(c.key, v), () => bag[c.key]);
+        sw.title = c.label;
+        return sw;
+      }
+      if (c.kind === "width") {
+        let cur = typeof bag[c.key] === "number" ? bag[c.key] : c.defval;
+        const wf = widthField(this.theme, () => cur, (v) => {
+          cur = v;
+          put(c.key, v);
+        });
+        wf.title = c.label;
+        return wf;
+      }
+      if (c.kind === "select") {
+        const sel = document.createElement("select");
+        sel.className = "vela-sd-select";
+        sel.style.cssText = "max-width:200px;flex:0 0 auto;";
+        sel.title = c.label;
+        const current2 = typeof bag[c.key] === "string" ? bag[c.key] : c.defval;
+        for (const [val, lbl] of normalizeSelectOptions(c.options)) {
+          const o = document.createElement("option");
+          o.value = val;
+          o.textContent = lbl;
+          if (val === current2) o.selected = true;
+          sel.appendChild(o);
+        }
+        sel.addEventListener("change", () => put(c.key, sel.value));
+        sel.addEventListener("vela-sync", () => {
+          sel.value = typeof bag[c.key] === "string" ? bag[c.key] : c.defval;
+        });
+        return sel;
+      }
+      const ni = document.createElement("input");
+      ni.type = "number";
+      ni.className = "vela-sd-number";
+      if (compact) ni.style.width = "56px";
+      if (c.min !== void 0) ni.min = String(c.min);
+      if (c.max !== void 0) ni.max = String(c.max);
+      ni.step = String(c.step ?? 1);
+      ni.title = c.label;
+      const current = typeof bag[c.key] === "number" ? bag[c.key] : c.defval;
+      if (c.placeholder !== void 0) {
+        ni.placeholder = c.placeholder;
+        if (current !== c.defval) ni.value = String(current);
+        ni.addEventListener("change", () => {
+          const raw = ni.value.trim() === "" ? c.defval : Number(ni.value);
+          const v = Number.isFinite(raw) ? Math.min(c.max ?? Infinity, Math.max(c.min ?? -Infinity, raw)) : c.defval;
+          ni.value = v === c.defval ? "" : String(v);
+          put(c.key, v);
+        });
+      } else {
+        ni.value = String(current);
+        ni.addEventListener("input", () => {
+          const v = Number(ni.value);
+          if (Number.isFinite(v)) put(c.key, v);
+        });
+      }
+      return ni;
+    }
+    /**
+     * 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";
+      if (instances.length > 1 || instances[0]?.enableKey !== void 0) 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, refreshers);
+        const key = r.kind === "row" ? r.toggle?.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() {
+      const el = document.createElement("div");
+      el.className = "vela-sd-sep";
+      el.style.cssText = "height:14px;";
+      return el;
+    }
+    /**
+     * One pane-wide control column (section-agnostic), sized to the longest setting
+     * title — same idea as the indicator settings dialog's `minmax(..., auto)` label
+     * track, but shared across every section in the tab.
+     *
+     * `measureHost` must be a visible, in-document ancestor (the dialog): panes are
+     * `display:none` until selected, which would zero layout measurements.
+     */
+    layoutSettingsGrids(pane, measureHost) {
+      if (pane.childElementCount === 0) return;
+      if (this.mobileLayout) {
+        const grid2 = document.createElement("div");
+        grid2.style.cssText = "display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:center;column-gap:12px;row-gap:16px;";
+        while (pane.firstChild) grid2.appendChild(pane.firstChild);
+        pane.appendChild(grid2);
+        this.prepareGridItems(grid2);
+        return;
+      }
+      const rows = [...pane.querySelectorAll(".vela-sd-row")];
+      const probe2 = document.createElement("div");
+      probe2.style.cssText = "position:absolute;left:-9999px;top:0;visibility:hidden;display:flex;flex-direction:column;font:13px var(--vela-font);pointer-events:none;";
+      measureHost.appendChild(probe2);
+      let widest = 0;
+      for (const row of rows) {
+        const cell = row.children[0];
+        if (!cell) continue;
+        const clone = cell.cloneNode(true);
+        probe2.appendChild(clone);
+        widest = Math.max(widest, clone.getBoundingClientRect().width);
       }
       probe2.remove();
       const labelTrack = widest > 0 ? `${Math.ceil(widest)}px` : "max-content";
@@ -16650,9 +17815,11 @@ void main() {
       }
     }
     /** A bare color swatch input (for toggle-row right groups / swatch pairs). */
-    swatch(value, onChange) {
+    /** With `get`, the field reads its value live (and repaints on 'vela-sync') —
+     *  duplicate-keyed rows stay honest when another row edits the shared key. */
+    swatch(value, onChange, get) {
       let current = value;
-      return colorField(this.theme, () => current, (v) => {
+      return colorField(this.theme, () => get ? get() : current, (v) => {
         current = v;
         onChange(v);
       });
@@ -16704,8 +17871,11 @@ void main() {
     }
     /** An enable row: checkbox + label in the label column, dependent controls in the
      *  shared control column; the control group dims and ignores input while the toggle
-     *  is off. With no controls it reads like a plain toggle row (full-width in the grid). */
-    toggleRow(label, value, onToggle, controls) {
+     *  is off. With no controls it reads like a plain toggle row (full-width in the grid).
+     *  With `get`, the row re-reads its state on a 'vela-sync' event — the seam that
+     *  keeps DUPLICATE-KEYED rows honest (several `when`-gated rows over one bag key,
+     *  only one visible at a time; see `typeRow`). */
+    toggleRow(label, value, onToggle, controls, get) {
       const wrap = document.createElement("div");
       const cb = document.createElement("button");
       cb.type = "button";
@@ -16725,6 +17895,12 @@ void main() {
         wrap.style.cssText = "display:flex;align-items:center;gap:8px;min-height:22px;";
         wrap.append(cb, lbl);
         cb.addEventListener("click", () => onToggle(cbToggle()));
+        if (get) {
+          wrap.addEventListener("vela-sync", () => {
+            checked = get();
+            cb.classList.toggle("on", checked);
+          });
+        }
         return wrap;
       }
       wrap.className = "vela-sd-row";
@@ -16735,8 +17911,11 @@ void main() {
       box.style.cssText = "display:flex;align-items:center;gap:6px;";
       for (const c of controls) box.appendChild(c);
       const syncDim = (on) => {
-        box.style.opacity = on ? "1" : "0.4";
-        box.style.pointerEvents = on ? "" : "none";
+        for (const c of controls) {
+          if (c.dataset.sdSelfGated === "1") continue;
+          c.style.opacity = on ? "1" : "0.4";
+          c.style.pointerEvents = on ? "" : "none";
+        }
       };
       syncDim(value);
       cb.addEventListener("click", () => {
@@ -16744,6 +17923,13 @@ void main() {
         onToggle(v);
         syncDim(v);
       });
+      if (get) {
+        wrap.addEventListener("vela-sync", () => {
+          checked = get();
+          cb.classList.toggle("on", checked);
+          syncDim(checked);
+        });
+      }
       wrap.append(left, box);
       return wrap;
     }
@@ -16763,102 +17949,12 @@ void main() {
       wrap.appendChild(ni);
       return wrap;
     }
-    /** Inline Auto/Manual row (Resolution, Text size): a mode dropdown + a value input greyed out in Auto. */
-    autoManualRow(label, isAuto, value, min, max, unit, onMode, onValue) {
-      const { wrap } = this.row(label);
-      const box = document.createElement("div");
-      box.style.cssText = "display:flex;align-items:center;gap:6px;flex:0 0 auto;";
-      const sel = document.createElement("select");
-      sel.className = "vela-sd-select";
-      for (const [val, lbl] of AUTO_MANUAL_OPTS) {
-        const o = document.createElement("option");
-        o.value = val;
-        o.textContent = lbl;
-        if (val === "auto" === isAuto) o.selected = true;
-        sel.appendChild(o);
-      }
-      const ni = document.createElement("input");
-      ni.type = "number";
-      ni.min = String(min);
-      ni.max = String(max);
-      ni.step = "1";
-      ni.value = String(value);
-      ni.className = "vela-sd-number";
-      const unitLbl = document.createElement("span");
-      unitLbl.textContent = unit;
-      unitLbl.style.cssText = "opacity:0.6;";
-      const syncDisabled = (auto) => {
-        ni.disabled = auto;
-        ni.style.opacity = auto ? "0.4" : "1";
-      };
-      syncDisabled(isAuto);
-      sel.addEventListener("change", () => {
-        const auto = sel.value === "auto";
-        onMode(auto);
-        syncDisabled(auto);
-      });
-      ni.addEventListener("input", () => {
-        const n = Number(ni.value);
-        if (Number.isFinite(n)) onValue(n);
-      });
-      box.append(sel, ni, unitLbl);
-      wrap.appendChild(box);
-      return wrap;
-    }
-    /** A row whose control area holds several inline controls (e.g. show + color + width). */
-    inlineRow(label, controls) {
-      const { wrap } = this.row(label);
-      const box = document.createElement("div");
-      box.style.cssText = "display:flex;align-items:center;gap:6px;flex:0 0 auto;";
-      for (const c of controls) box.appendChild(c);
-      wrap.appendChild(box);
-      return wrap;
-    }
-    /** A small dimmed hint span (e.g. the ≥ / ≤ between filter inputs). */
-    hint(text) {
-      const s = document.createElement("span");
-      s.textContent = text;
-      s.style.cssText = "opacity:0.5;font-size:12px;";
-      return s;
-    }
-    /** A bare color input (for inline groups). */
-    colorInput(value, onChange) {
-      const ci = document.createElement("input");
-      ci.type = "color";
-      ci.value = toHex6(value);
-      ci.style.cssText = "cursor:pointer;width:34px;height:22px;border:none;background:transparent;padding:0;flex:0 0 auto;";
-      ci.addEventListener("input", () => onChange(ci.value));
-      return ci;
-    }
-    /** A bare compact number input (for inline groups). */
-    numberInput(value, min, max, step, onChange) {
-      const ni = document.createElement("input");
-      ni.type = "number";
-      ni.value = String(value);
-      ni.min = String(min);
-      ni.max = String(max);
-      ni.step = String(step);
-      ni.className = "vela-sd-number";
-      ni.style.flex = "0 0 auto";
-      ni.addEventListener("input", () => {
-        const n = Number(ni.value);
-        if (Number.isFinite(n)) onChange(n);
-      });
-      return ni;
-    }
-    /** A small in-group heading (lighter than a top-level section divider). */
-    subheading(text) {
-      const el = document.createElement("div");
-      el.textContent = text;
-      el.style.cssText = "margin-top:4px;font-size:10.5px;font-weight:700;letter-spacing:0.03em;text-transform:uppercase;opacity:0.45;";
-      return el;
-    }
     /** A dropdown whose option values differ from their display labels. */
     selectRowLabeled(label, value, options, onChange) {
       const { wrap } = this.row(label);
       const sel = document.createElement("select");
       sel.className = "vela-sd-select";
-      sel.style.cssText = "max-width:140px;flex:0 0 auto;";
+      sel.style.cssText = "max-width:200px;flex:0 0 auto;";
       for (const [val, lbl] of options) {
         const o = document.createElement("option");
         o.value = val;
@@ -16874,7 +17970,7 @@ void main() {
       const { wrap } = this.row(label);
       const sel = document.createElement("select");
       sel.className = "vela-sd-select";
-      sel.style.cssText = "max-width:140px;flex:0 0 auto;";
+      sel.style.cssText = "max-width:200px;flex:0 0 auto;";
       for (const opt of options) {
         const o = document.createElement("option");
         o.value = opt;
@@ -16898,19 +17994,10 @@ void main() {
       foot.appendChild(resetBtn);
       return foot;
     }
-    button(label, onClick) {
-      const b = document.createElement("button");
-      b.type = "button";
-      b.textContent = label;
-      b.style.cssText = `cursor:pointer;flex:1 1 auto;${this.ctrlStyle()}padding:5px 8px;font-weight:600;`;
-      b.addEventListener("click", onClick);
-      return b;
-    }
-    ctrlStyle() {
-      return `background:var(--vela-surface-sunken);border:1px solid ${SETTINGS_BORDER};color:${SETTINGS_TEXT};border-radius:var(--vela-radius-sm);padding:3px 6px;font-size:var(--vela-font-size-md);font-family:inherit;outline:none;`;
-    }
   };
-  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);
@@ -17110,7 +18197,7 @@ void main() {
         return;
       }
       if (d instanceof FixedRangeVolumeProfile) {
-        this.paintFixedRangeVp(ctx, d, proj);
+        this.paintFixedRangeVp(ctx, d, proj, theme);
         this.paintLabel(ctx, d, proj, theme);
         return;
       }
@@ -17603,7 +18690,7 @@ void main() {
     /** Paint a fixed-range volume profile: horizontal histogram rows (up/down split) anchored to
      *  the left or right of the time span, optional VAH / VAL / POC levels across the range, and
      *  optional developing POC / VA polylines. Recomputes from the two anchors on every paint. */
-    paintFixedRangeVp(ctx, d, proj) {
+    paintFixedRangeVp(ctx, d, proj, theme) {
       const L = d.layout(proj);
       if (!L) return;
       const s = d.frvp;
@@ -17642,7 +18729,7 @@ void main() {
       };
       hLine(s.showVah, s.vahColor, s.vahStyle, L.vahY);
       hLine(s.showVal, s.valColor, s.valStyle, L.valY);
-      hLine(s.showPoc, s.pocColor, s.pocStyle, L.pocY);
+      hLine(s.showPoc, s.pocColor ?? contrastColor(theme.background), s.pocStyle, L.pocY);
       const devW = Math.max(1, w);
       if (s.showDevelopingPoc) {
         this.strokePolyline(ctx, L.developingPoc, {
@@ -18269,6 +19356,8 @@ void main() {
   // src/renderers/native/drawings/DrawingInteraction.ts
   var DRAG_SLOP2 = 3;
   var FREEHAND_SAMPLE_PX = 4;
+  var ANGLE_SNAP_STEP = Math.PI / 4;
+  var ANGLE_SNAP_TYPES = /* @__PURE__ */ new Set(["trendline", "ray", "extendedline", "infoline", "trendangle", "arrow"]);
   var DrawingInteraction = class {
     // magnet target for the ring
     constructor(deps) {
@@ -18309,6 +19398,27 @@ void main() {
       this.snapAt = changed ? { point: snapped, paneId } : null;
       return snapped;
     }
+    /** Resolve a pixel to a data point with the segment angle locked to 45° steps around
+     *  `pivot` (Shift held on a line tool). Works in PIXEL space — the user reasons about
+     *  the angle they see, not about time/price units. The magnet is bypassed: snapping
+     *  the result to a candle afterwards would break the exact angle just enforced. */
+    resolveAngleSnapped(pivot, paneId, x, y) {
+      const proj = this.deps.projector();
+      const px = proj.xOf(pivot.time);
+      const py = proj.yOf(pivot.price, paneId);
+      this.snapAt = null;
+      if (py == null) return proj.pxToPoint(x, y, paneId);
+      const r = Math.hypot(x - px, y - py);
+      if (r < 1) return proj.pxToPoint(x, y, paneId);
+      const angle = Math.round(Math.atan2(y - py, x - px) / ANGLE_SNAP_STEP) * ANGLE_SNAP_STEP;
+      return proj.pxToPoint(px + r * Math.cos(angle), py + r * Math.sin(angle), paneId);
+    }
+    /** The pivot the free endpoint angle-snaps around while placing `draft`, or null when
+     *  the tool is not a two-point segment (or no anchor is committed yet). */
+    placingPivot(draft) {
+      if (!ANGLE_SNAP_TYPES.has(draft.type)) return null;
+      return draft.anchors[draft.anchors.length - 1] ?? null;
+    }
     /** Should the drawing layer win this press (vs pan)? Armed/placing/pressed, or over a drawing/handle. */
     claim(x, y) {
       if (this.deps.activeTool() != null || this.state.kind !== "idle") return true;
@@ -18330,12 +19440,15 @@ void main() {
       return this.state.kind === "pressed" && this.state.moved ? this.state.id : null;
     }
     /** A press: place the next anchor, or grab a drawing/handle (resolved as click or drag on release).
-     *  `shift` over a drawing toggles it in/out of the selection (multi-select) instead of dragging. */
+     *  `shift` over a drawing toggles it in/out of the selection (multi-select) instead of dragging;
+     *  while placing a line tool it locks the segment angle to 45° steps. */
     down(x, y, mode = "off", shift = false) {
       const proj = this.deps.projector();
       if (this.state.kind === "placing") {
         if (this.state.draft.placementMode() !== "click") return;
-        this.state.draft.anchors.push(this.placementAnchor(this.state.draft, this.resolve(x, y, this.state.draft.paneId, mode)));
+        const pivot = shift ? this.placingPivot(this.state.draft) : null;
+        const point = pivot ? this.resolveAngleSnapped(pivot, this.state.draft.paneId, x, y) : this.resolve(x, y, this.state.draft.paneId, mode);
+        this.state.draft.anchors.push(this.placementAnchor(this.state.draft, point));
         if (this.state.draft.anchors.length >= this.state.need) this.finalize();
         else this.deps.changed();
         return;
@@ -18360,8 +19473,9 @@ void main() {
         this.state = { kind: "pressed", id: hit.id, handle, grab: proj.pxToPoint(x, y, hit.paneId), orig: cloneAnchors(hit), px: x, py: y, moved: false };
       }
     }
-    /** Pointer move: advance the placing ghost, or live-preview a drag once past the slop. */
-    move(x, y, mode = "off") {
+    /** Pointer move: advance the placing ghost, or live-preview a drag once past the slop.
+     *  `shift` on a line tool locks the segment angle to 45° steps (placing + handle drags). */
+    move(x, y, mode = "off", shift = false) {
       if (this.state.kind === "idle") {
         const tool = this.deps.activeTool();
         const had = this.snapAt != null;
@@ -18375,7 +19489,8 @@ void main() {
           this.captureFreehand(x, y);
           return;
         }
-        this.state.cursor = this.resolve(x, y, this.state.draft.paneId, mode);
+        const pivot = shift ? this.placingPivot(this.state.draft) : null;
+        this.state.cursor = pivot ? this.resolveAngleSnapped(pivot, this.state.draft.paneId, x, y) : this.resolve(x, y, this.state.draft.paneId, mode);
         this.deps.changed();
         return;
       }
@@ -18386,7 +19501,11 @@ void main() {
       this.state.moved = true;
       if (this.state.handle >= 0) {
         const a = d.anchors[this.state.handle];
-        if (a) applyFree(a, this.resolve(x, y, d.paneId, mode), d.anchorSchema().slots[this.state.handle]?.free ?? "both");
+        if (a) {
+          const pivot = shift && ANGLE_SNAP_TYPES.has(d.type) && d.anchors.length === 2 ? d.anchors[1 - this.state.handle] : void 0;
+          const point = pivot ? this.resolveAngleSnapped(pivot, d.paneId, x, y) : this.resolve(x, y, d.paneId, mode);
+          applyFree(a, point, d.anchorSchema().slots[this.state.handle]?.free ?? "both");
+        }
         d.constrainHandleDrag(this.state.handle);
       } else {
         const pt = this.deps.projector().pxToPoint(x, y, d.paneId);
@@ -18482,7 +19601,11 @@ void main() {
       const last = draft.anchors[draft.anchors.length - 1];
       const lx = last ? proj.xOf(last.time) : NaN;
       const ly = last ? proj.yOf(last.price, draft.paneId) ?? NaN : NaN;
-      if (draft.anchors.length < this.state.need && Math.hypot(x - lx, y - ly) > FREEHAND_SAMPLE_PX) {
+      if (Math.hypot(x - lx, y - ly) > FREEHAND_SAMPLE_PX) {
+        if (draft.anchors.length >= this.state.need) {
+          const lastIdx = draft.anchors.length - 1;
+          draft.anchors = draft.anchors.filter((_, i) => i % 2 === 0 || i === lastIdx);
+        }
         draft.anchors.push(proj.pxToPoint(x, y, draft.paneId));
       }
       this.state.cursor = proj.pxToPoint(x, y, draft.paneId);
@@ -18555,11 +19678,11 @@ void main() {
   // src/renderers/native/drawings/DrawingSettingsPopup.ts
   var BTN = 30;
   var ICON = 21;
-  var STYLE_ID3 = "vela-drawing-popup-styles";
-  function ensureStyles3() {
-    if (typeof document === "undefined" || document.getElementById(STYLE_ID3)) return;
+  var STYLE_ID4 = "vela-drawing-popup-styles";
+  function ensureStyles4() {
+    if (typeof document === "undefined" || document.getElementById(STYLE_ID4)) return;
     const s = document.createElement("style");
-    s.id = STYLE_ID3;
+    s.id = STYLE_ID4;
     s.textContent = `
 .vela-dpop input[type=color]{-webkit-appearance:none;appearance:none;border:none;padding:0;background:none;cursor:pointer;border-radius:0;}
 .vela-dpop input[type=color]::-webkit-color-swatch-wrapper{padding:0;}
@@ -18578,7 +19701,10 @@ void main() {
 .vela-dpop-btn[data-active='1']{background:var(--vela-active);color:var(--vela-fg-bright);}
 .vela-dpop-item{background:transparent;transition:background var(--vela-dur-fast) ease;}
 .vela-dpop-item:hover{background:var(--vela-hover-strong);}
-.vela-dpop-item[data-active='1']{background:var(--vela-active);}`;
+.vela-dpop-item[data-active='1']{background:var(--vela-active);}
+/* A finger needs a wider grab zone than a cursor \u2014 grow the move handle on touch-first
+   devices (the glyph stays centered; only the hit target widens). */
+@media (pointer: coarse){.vela-dpop-grip{width:${BTN + 14}px !important;}}`;
     document.head.appendChild(s);
   }
   var DrawingSettingsPopup = class {
@@ -18625,7 +19751,7 @@ void main() {
      *  `onClose` fires on an outside-click dismissal (not a programmatic close). */
     open(drawing, anchor, actions, onClose) {
       this.close();
-      ensureStyles3();
+      ensureStyles4();
       this.onClose = onClose ?? null;
       const t = this.theme;
       const schema = drawing.schema();
@@ -18651,7 +19777,14 @@ void main() {
         bar.appendChild(this.dropdown("Icon size", STAMP_SIZE_OPTIONS, sz, (s) => stampSizeIcon(s), (v) => actions.patch({ size: v }), { label: sizeLabel }));
       }
       if (paths.has("style.lineColor")) bar.appendChild(this.colorButton("Line color", BRUSH_ICON, drawing.style.lineColor || DEFAULT_DRAWING_COLOR, (v) => actions.patch({ "style.lineColor": v })));
-      if (paths.has("style.lineWidth")) bar.appendChild(this.dropdown("Line width", [1, 2, 3, 4], drawing.style.lineWidth, (w) => lineIcon(w, "solid"), (v) => actions.patch({ "style.lineWidth": v }), { label: (v) => `${v}px`, labelInTrigger: true }));
+      if (paths.has("style.lineWidth")) {
+        const wf = schema.fields.find((f) => f.path === "style.lineWidth");
+        if (wf?.kind === "number" && (wf.min ?? 1) > 1) {
+          bar.appendChild(this.widthInput("Line width", drawing.style.lineWidth, wf.min ?? 1, wf.max ?? 60, wf.step ?? 1, (v) => actions.patch({ "style.lineWidth": v })));
+        } else {
+          bar.appendChild(this.dropdown("Line width", [1, 2, 3, 4], drawing.style.lineWidth, (w) => lineIcon(w, "solid"), (v) => actions.patch({ "style.lineWidth": v }), { label: (v) => `${v}px`, labelInTrigger: true }));
+        }
+      }
       if (paths.has("style.lineStyle")) bar.appendChild(this.dropdown("Line style", LINE_STYLE_OPTIONS.map((o) => o.value), drawing.style.lineStyle, (s) => lineIcon(2, s), (v) => actions.patch({ "style.lineStyle": v }), { label: styleLabel2 }));
       if (paths.has("style.fillColor")) bar.appendChild(this.colorButton("Fill", BUCKET_ICON, effectiveFillColor(drawing, this.theme) ?? drawing.style.fillColor ?? DEFAULT_DRAWING_COLOR, (v) => actions.patch({ "style.fillColor": v })));
       const isFrvp = paths.has("frvp.rows") && drawing instanceof FixedRangeVolumeProfile;
@@ -19119,14 +20252,15 @@ void main() {
         const chk = document.createElement("input");
         chk.type = "checkbox";
         chk.checked = Boolean(s[showPath]);
-        chk.style.cssText = `accent-color:${s[colorPath]};width:15px;height:15px;flex:none;cursor:pointer;`;
+        const current = s[colorPath] ?? contrastColor(t.background);
+        chk.style.cssText = `accent-color:${current};width:15px;height:15px;flex:none;cursor:pointer;`;
         chk.addEventListener("change", () => actions.patch({ [`frvp.${showPath}`]: chk.checked }));
         const lbl = document.createElement("span");
         lbl.textContent = label;
         lbl.style.cssText = "flex:1;min-width:0;opacity:0.9;";
         const col = document.createElement("button");
         col.type = "button";
-        let cur = s[colorPath];
+        let cur = current;
         col.style.cssText = `width:18px;height:18px;flex:none;border:1px solid var(--vela-border);border-radius:0;cursor:pointer;background:${cur};padding:0;`;
         col.addEventListener("pointerdown", (e) => e.stopPropagation());
         col.addEventListener("click", (e) => {
@@ -19306,7 +20440,8 @@ void main() {
     dragHandle() {
       const b = document.createElement("button");
       b.type = "button";
-      b.style.cssText = `width:${BTN}px;height:${BTN}px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;padding:0;cursor:grab;color:var(--vela-fg-faint);`;
+      b.className = "vela-dpop-grip";
+      b.style.cssText = `width:${BTN}px;height:${BTN}px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;padding:0;cursor:grab;touch-action:none;color:var(--vela-fg-faint);`;
       b.innerHTML = sized(GRIP_ICON);
       b.addEventListener("pointerdown", (e) => {
         const el = this.el;
@@ -19322,6 +20457,10 @@ void main() {
         const origLeft = parseFloat(el.style.left) || 0;
         const origTop = parseFloat(el.style.top) || 0;
         b.style.cursor = "grabbing";
+        try {
+          b.setPointerCapture(e.pointerId);
+        } catch {
+        }
         const move = (ev) => {
           const w = el.offsetWidth;
           const h = el.offsetHeight;
@@ -19334,9 +20473,11 @@ void main() {
           b.style.cursor = "grab";
           window.removeEventListener("pointermove", move);
           window.removeEventListener("pointerup", up);
+          window.removeEventListener("pointercancel", up);
         };
         window.addEventListener("pointermove", move);
         window.addEventListener("pointerup", up);
+        window.addEventListener("pointercancel", up);
       });
       return b;
     }
@@ -19452,6 +20593,39 @@ void main() {
       });
       return b;
     }
+    /** An inline numeric width field for tools whose stroke range outgrows the 1–4px
+     *  ladder — the value is clamped to the schema's declared min/max on commit. */
+    widthInput(tip, value, min, max, step, onChange) {
+      const input = document.createElement("input");
+      input.type = "number";
+      input.dataset.tip = tip;
+      input.min = String(min);
+      input.max = String(max);
+      input.step = String(step);
+      input.value = String(value);
+      input.style.cssText = `width:52px;height:${BTN}px;box-sizing:border-box;flex:none;background:transparent;color:inherit;border:1px solid var(--vela-border);border-radius:5px;padding:0 4px;font:12px ${this.theme.fontFamily};font-variant-numeric:tabular-nums;outline:none;`;
+      const commit = () => {
+        const n = parseFloat(input.value);
+        if (!Number.isFinite(n)) {
+          input.value = String(value);
+          return;
+        }
+        const v = Math.min(max, Math.max(min, n));
+        input.value = String(v);
+        value = v;
+        onChange(v);
+      };
+      input.addEventListener("change", commit);
+      input.addEventListener("keydown", (e) => {
+        e.stopPropagation();
+        if (e.key === "Enter") {
+          e.preventDefault();
+          commit();
+          input.blur();
+        }
+      });
+      return input;
+    }
     /** A pick-one dropdown: the trigger shows the current value's glyph (plus an optional inline
      *  text label — e.g. `2px` — for controls that would otherwise look alike), and clicking it
      *  opens a floating list of every option so a value is one click away (no cycling through). */
@@ -19739,6 +20913,8 @@ void main() {
       this.eraserActive = false;
       this.stayBtn = null;
       this.stayActive = false;
+      this.syncBtn = null;
+      this.syncActive = false;
       this.collapseBtn = null;
       this.collapsed = false;
       this.visible = false;
@@ -19755,7 +20931,8 @@ void main() {
       this.dock = options.dock ?? "absolute";
       this.onCollapse = options.onCollapse ?? (() => {
       });
-      ensureStyles4();
+      this.onDrawingsSync = options.onDrawingsSync ?? null;
+      ensureStyles5();
       this.root = document.createElement("div");
       this.root.className = "vela-dtb";
       this.styleRoot();
@@ -19853,6 +21030,10 @@ void main() {
       this.root.appendChild(this.makeMagnetCell());
       this.stayBtn = this.makeButton(STAY_ICON, "Stay in drawing mode", () => this.toggleStay());
       this.root.appendChild(this.stayBtn);
+      if (this.onDrawingsSync) {
+        this.syncBtn = this.makeButton(SYNC_ICON, "Sync drawings on all charts", () => this.toggleDrawingsSync());
+        this.root.appendChild(this.syncBtn);
+      }
       this.collapseBtn = this.makeButton(COLLAPSE_ICON, "Collapse toolbar", () => this.toggleCollapsed());
       this.collapseBtn.classList.add("vela-dtb-collapse");
       this.root.appendChild(this.collapseBtn);
@@ -19860,6 +21041,7 @@ void main() {
       this.paintEraser();
       this.paintMagnet();
       this.paintStay();
+      this.paintDrawingsSync();
       this.paintCollapse();
       this.highlight();
     }
@@ -19910,7 +21092,7 @@ void main() {
         cell.appendChild(arrow);
       }
       this.tipDisposers.push(
-        attachChromeTooltip(cell, { host: this.host, theme: () => this.theme, text: () => this.tipText.get(cell) ?? label, placement: "right", delayMs: 2e3 })
+        attachChromeTooltip(cell, { host: this.host, theme: () => this.theme, text: () => this.tipText.get(cell) ?? label, placement: "right" })
       );
       return { cell, icon: icon2, arrow };
     }
@@ -20020,6 +21202,23 @@ void main() {
       b.dataset.active = this.stayActive ? "1" : "";
       b.style.opacity = this.stayActive ? "1" : "0.5";
     }
+    /** Toggle drawings sync on/off and notify the host. */
+    toggleDrawingsSync() {
+      this.syncActive = !this.syncActive;
+      this.onDrawingsSync?.(this.syncActive);
+      this.paintDrawingsSync();
+    }
+    /** Reflect drawings sync externally (e.g. set through the API) without notifying back. */
+    setDrawingsSyncMode(on) {
+      this.syncActive = on;
+      this.paintDrawingsSync();
+    }
+    paintDrawingsSync() {
+      const b = this.syncBtn;
+      if (!b) return;
+      b.dataset.active = this.syncActive ? "1" : "";
+      b.style.opacity = this.syncActive ? "1" : "0.5";
+    }
     // ── flyout ──
     /** Create the positioned flyout panel anchored to a cell, register it as open, and start the
      *  outside-dismiss. Callers fill it with items. */
@@ -20179,6 +21378,8 @@ void main() {
       const type = this.lastUsed.get(group.id) ?? group.tools[0]?.type;
       const tool = group.tools.find((t) => t.type === type) ?? group.tools[0];
       iconBtn.innerHTML = hitHtml(tool?.icon ?? "");
+      const cell = this.groupCells.get(group.id);
+      if (cell) this.tipText.set(cell, tool?.label ?? group.label);
     }
     /** Reconcile active tints from state (armed group / open flyout / cursor / modes). Active is a
      *  `data-active` attribute the stylesheet paints — no inline background, so hover never sticks. */
@@ -20202,7 +21403,7 @@ void main() {
       this.tipText.set(btn, title);
       if (icon2) btn.innerHTML = hitHtml(icon2);
       this.tipDisposers.push(
-        attachChromeTooltip(btn, { host: this.host, theme: () => this.theme, text: () => this.tipText.get(btn) ?? title, placement: "right", delayMs: 2e3 })
+        attachChromeTooltip(btn, { host: this.host, theme: () => this.theme, text: () => this.tipText.get(btn) ?? title, placement: "right" })
       );
       btn.addEventListener("click", onClick);
       return btn;
@@ -20214,13 +21415,13 @@ void main() {
     }
   };
   var MAGNET_ID = "__magnet__";
-  var STYLE_ID4 = "vela-drawing-toolbar-styles";
-  function ensureStyles4() {
+  var STYLE_ID5 = "vela-drawing-toolbar-styles";
+  function ensureStyles5() {
     if (typeof document === "undefined") return;
-    let s = document.getElementById(STYLE_ID4);
+    let s = document.getElementById(STYLE_ID5);
     if (!s) {
       s = document.createElement("style");
-      s.id = STYLE_ID4;
+      s.id = STYLE_ID5;
       document.head.appendChild(s);
     }
     s.textContent = `
@@ -20268,6 +21469,7 @@ void main() {
   var EXPAND_ICON = icon("chevrons-right");
   var MAGNET_ICON = icon("magnet");
   var STAY_ICON = icon("pen-lock");
+  var SYNC_ICON = icon("pen-sync");
   var ERASER_ICON = icon("eraser");
   var ARROW_ICON2 = icon("chevron-right");
   var CHECK_ICON = icon("check");
@@ -20491,12 +21693,19 @@ void main() {
       this.activeTool = null;
       // last-used style for the armed tool (seeds the placement ghost)
       this.intentCb = null;
+      /** Another chart's in-progress placement, mirrored here as a ghost (drawings sync). */
+      this.externalGhost = null;
+      /** Last draft fingerprint reported upstream — gates the per-render emission to actual changes. */
+      this.lastDraftKey = null;
       this.measure = new MeasureOverlay();
       // transient ruler — not a persistent drawing
       this.toolbarVisible = false;
       // mirrors showToolbar (drives the gutter reservation)
       this.toolbarCollapsed = false;
       // the bar is a slim expand-strip (narrower gutter)
+      /** Mobile chrome: the docked bar is suppressed (the shell provides its own tool
+       *  picker) while `toolbarVisible` keeps the host's INTENT for a later desktop flip. */
+      this.mobileLayout = false;
       /** Self-serve Ctrl+Z / Ctrl+Y as drawing undo/redo. A host that owns a UNIFIED
        *  history (drawings + app ops in one timeline) turns this off so the chords
        *  bubble to its keymap instead — see the renderer's `historyChords` feature. */
@@ -20555,12 +21764,26 @@ void main() {
     }
     showToolbar(visible) {
       this.toolbarVisible = visible;
-      this.toolbar.setVisible(visible);
+      this.toolbar.setVisible(visible && !this.mobileLayout);
+      this.syncToolbarGutter();
+    }
+    /** Mobile suppresses the docked toolbar (hover flyouts don't work with touch; the
+     *  shell's own drawer picks tools instead) and releases its gutter; flipping back
+     *  to desktop restores whatever `showToolbar` last asked for. */
+    setLayoutMode(mode) {
+      this.mobileLayout = mode === "mobile";
+      this.toolbar.setVisible(this.toolbarVisible && !this.mobileLayout);
       this.syncToolbarGutter();
     }
     /** The gutter follows the bar's current footprint: hidden 0, collapsed a slim strip, else full width. */
     syncToolbarGutter() {
-      this.deps.setToolbarGutter(this.toolbarVisible ? this.toolbarCollapsed ? TOOLBAR_COLLAPSED_WIDTH : TOOLBAR_WIDTH : 0);
+      const shown = this.toolbarVisible && !this.mobileLayout;
+      this.deps.setToolbarGutter(shown ? 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);
@@ -20720,7 +21943,7 @@ void main() {
       }
       this.interaction.down(x, y, snap, shift);
     }
-    pointerMove(x, y, snap = "off") {
+    pointerMove(x, y, snap = "off", shift = false) {
       if (this.eraserMode) {
         if (this.erasing) this.deleteAt(x, y);
         return;
@@ -20730,7 +21953,7 @@ void main() {
         this.render();
         return;
       }
-      this.interaction.move(x, y, snap);
+      this.interaction.move(x, y, snap, shift);
       this.updateHover(x, y);
     }
     /** Track which drawing is hovered so its handles appear on hover (and only then). */
@@ -21116,6 +22339,8 @@ void main() {
       this.layoutTextEditor();
       const ghost = this.interaction.ghost();
       if (ghost) this.painter.paintGhost(ctx, ghost, proj, this.deps.theme());
+      if (this.externalGhost) this.painter.paintGhost(ctx, this.externalGhost, proj, this.deps.theme());
+      this.emitDraft(ghost);
       const markers = this.interaction.placingMarkers(proj);
       if (markers) this.painter.paintHandles(ctx, markers);
       const m = this.interaction.snapMarker();
@@ -21177,6 +22402,15 @@ void main() {
         }
       }, () => this.clearSelection());
     }
+    /** Report placement progress upstream (`draft` intent) so the drawings sync can
+     *  mirror the ghost live on linked charts. Called from every render; only actual
+     *  shape changes emit, and the end of a placement emits one `null`. */
+    emitDraft(ghost) {
+      const key = ghost ? JSON.stringify({ t: ghost.type, p: ghost.paneId, a: ghost.anchors, s: ghost.style, x: ghost.text }) : null;
+      if (key === this.lastDraftKey) return;
+      this.lastDraftKey = key;
+      this.intentCb?.({ kind: "draft", doc: ghost ? ghost.serialize() : null });
+    }
     emit(i) {
       if (i.kind === "create") {
         if (i.doc.text && i.doc.text.color === void 0) {
@@ -21425,7 +22659,7 @@ void main() {
 
   // src/renderers/native/chrome/AttributionMark.ts
   var ATTRIBUTION_URL = "https://luxalgo.com/vela";
-  var STYLE_ID5 = "vela-attribution-styles";
+  var STYLE_ID6 = "vela-attribution-styles";
   var CSS = `
 .vela-attribution {
     text-decoration: none;
@@ -21471,12 +22705,28 @@ void main() {
     max-width: 240px;
     opacity: 1;
     transform: translateX(0);
-}`;
-  function ensureStyles5(doc) {
-    let s = doc.getElementById(STYLE_ID5);
+}
+/* Mobile: a hair smaller so the mark doesn't dominate a phone-width plot. Keyed on the
+   renderer's own container attribute (data-vela-layout) AND the shell root's
+   (data-layout): the workspace's single grid-wide mark lives OUTSIDE any renderer
+   container, so only the shell attribute reaches it. */
+[data-vela-layout='mobile'] .vela-attribution .vela-attr-symbol svg,
+[data-layout='mobile'] .vela-attribution .vela-attr-symbol svg { height: 22px; }
+[data-vela-layout='mobile'] .vela-attribution .vela-attr-wordmark,
+[data-layout='mobile'] .vela-attribution .vela-attr-wordmark {
+    top: 2px;
+    transform: translateX(-6px);
+}
+[data-vela-layout='mobile'] .vela-attribution .vela-attr-wordmark svg,
+[data-layout='mobile'] .vela-attribution .vela-attr-wordmark svg { height: 21px; }
+[data-vela-layout='mobile'] .vela-attribution:hover .vela-attr-wordmark,
+[data-layout='mobile'] .vela-attribution:hover .vela-attr-wordmark { transform: translateX(0); }
+`;
+  function ensureStyles6(doc) {
+    let s = doc.getElementById(STYLE_ID6);
     if (!s) {
       s = doc.createElement("style");
-      s.id = STYLE_ID5;
+      s.id = STYLE_ID6;
       doc.head.appendChild(s);
     }
     s.textContent = CSS;
@@ -21505,7 +22755,7 @@ void main() {
     return el;
   }
   function createAttributionMark(doc, background) {
-    ensureStyles5(doc);
+    ensureStyles6(doc);
     const a = doc.createElement("a");
     a.className = "vela-attribution";
     a.href = ATTRIBUTION_URL;
@@ -21531,6 +22781,174 @@ void main() {
     return a;
   }
 
+  // src/renderers/shared/dom-raster.ts
+  function hasInk(color) {
+    if (!color || color === "transparent") return false;
+    const m = /rgba?\(\s*[\d.]+\s*,\s*[\d.]+\s*,\s*[\d.]+\s*,\s*([\d.]+)\s*\)/.exec(color);
+    return m ? parseFloat(m[1]) > 1e-3 : true;
+  }
+  function cornerRadius(cs, w, h) {
+    const raw = cs.borderTopLeftRadius;
+    const v = parseFloat(raw) || 0;
+    const px = raw.endsWith("%") ? v / 100 * Math.min(w, h) : v;
+    return Math.max(0, Math.min(px, Math.min(w, h) / 2));
+  }
+  function tracePath(ctx, x, y, w, h, r) {
+    ctx.beginPath();
+    if (r > 0 && typeof ctx.roundRect === "function") ctx.roundRect(x, y, w, h, r);
+    else ctx.rect(x, y, w, h);
+  }
+  function canDrawUntainted(img) {
+    try {
+      const probe2 = img.ownerDocument.createElement("canvas");
+      probe2.width = 1;
+      probe2.height = 1;
+      const ctx = probe2.getContext("2d");
+      if (!ctx) return false;
+      ctx.drawImage(img, 0, 0, 1, 1);
+      probe2.toDataURL();
+      return true;
+    } catch {
+      return false;
+    }
+  }
+  function rasterizeOverlay(ctx, root, frame) {
+    const win = root.ownerDocument.defaultView;
+    if (!win) return;
+    ctx.save();
+    ctx.scale(frame.dpr, frame.dpr);
+    const drawText = (node, cs, alpha) => {
+      const text = node.textContent?.replace(/\s+/g, " ").trim();
+      if (!text) return;
+      const range = node.ownerDocument.createRange();
+      range.selectNodeContents(node);
+      const r = range.getBoundingClientRect();
+      if (r.width <= 0 || r.height <= 0) return;
+      ctx.globalAlpha = alpha;
+      ctx.fillStyle = cs.color;
+      ctx.font = `${cs.fontStyle} ${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`;
+      ctx.textBaseline = "middle";
+      ctx.textAlign = "left";
+      ctx.fillText(text, r.left - frame.left, r.top - frame.top + r.height / 2);
+    };
+    const drawImg = (img, cs, alpha) => {
+      if (!img.complete || img.naturalWidth <= 0 || !canDrawUntainted(img)) return;
+      const r = img.getBoundingClientRect();
+      if (r.width <= 0 || r.height <= 0) return;
+      const x = r.left - frame.left;
+      const y = r.top - frame.top;
+      ctx.save();
+      ctx.globalAlpha = alpha;
+      tracePath(ctx, x, y, r.width, r.height, cornerRadius(cs, r.width, r.height));
+      ctx.clip();
+      ctx.drawImage(img, x, y, r.width, r.height);
+      ctx.restore();
+    };
+    const drawSvgShapes = (parent, alpha) => {
+      for (const el of parent.children) {
+        if (el.hasAttribute("transform")) continue;
+        const tag = el.tagName.toLowerCase();
+        if (tag === "g") {
+          drawSvgShapes(el, alpha);
+          continue;
+        }
+        const num3 = (name) => parseFloat(el.getAttribute(name) ?? "0") || 0;
+        let path = null;
+        if (tag === "path") {
+          const d = el.getAttribute("d");
+          if (d) path = new Path2D(d);
+        } else if (tag === "circle") {
+          path = new Path2D();
+          path.arc(num3("cx"), num3("cy"), num3("r"), 0, Math.PI * 2);
+        } else if (tag === "ellipse") {
+          path = new Path2D();
+          path.ellipse(num3("cx"), num3("cy"), num3("rx"), num3("ry"), 0, 0, Math.PI * 2);
+        } else if (tag === "rect") {
+          path = new Path2D();
+          path.rect(num3("x"), num3("y"), num3("width"), num3("height"));
+        } else if (tag === "line") {
+          path = new Path2D();
+          path.moveTo(num3("x1"), num3("y1"));
+          path.lineTo(num3("x2"), num3("y2"));
+        } else if (tag === "polyline" || tag === "polygon") {
+          const pts = (el.getAttribute("points") ?? "").trim().split(/[\s,]+/).map(Number);
+          if (pts.length < 4 || pts.some(Number.isNaN)) continue;
+          path = new Path2D();
+          path.moveTo(pts[0], pts[1]);
+          for (let i = 2; i + 1 < pts.length; i += 2) path.lineTo(pts[i], pts[i + 1]);
+          if (tag === "polygon") path.closePath();
+        }
+        if (!path) continue;
+        const cs = win.getComputedStyle(el);
+        if (cs.fill && cs.fill !== "none" && hasInk(cs.fill)) {
+          ctx.globalAlpha = alpha * (parseFloat(cs.fillOpacity) || 1);
+          ctx.fillStyle = cs.fill;
+          ctx.fill(path);
+        }
+        const sw = parseFloat(cs.strokeWidth) || 0;
+        if (cs.stroke && cs.stroke !== "none" && hasInk(cs.stroke) && sw > 0) {
+          ctx.globalAlpha = alpha * (parseFloat(cs.strokeOpacity) || 1);
+          ctx.strokeStyle = cs.stroke;
+          ctx.lineWidth = sw;
+          if (cs.strokeLinecap === "round" || cs.strokeLinecap === "square" || cs.strokeLinecap === "butt") ctx.lineCap = cs.strokeLinecap;
+          if (cs.strokeLinejoin === "round" || cs.strokeLinejoin === "bevel" || cs.strokeLinejoin === "miter") ctx.lineJoin = cs.strokeLinejoin;
+          ctx.stroke(path);
+        }
+      }
+    };
+    const drawSvg = (svg, parentAlpha) => {
+      const r = svg.getBoundingClientRect();
+      if (r.width <= 0 || r.height <= 0) return;
+      const cs = win.getComputedStyle(svg);
+      if (cs.display === "none" || cs.visibility === "hidden") return;
+      const alpha = parentAlpha * (parseFloat(cs.opacity) || 1);
+      if (alpha <= 1e-3) return;
+      const vb = svg.viewBox.baseVal;
+      const vw = vb && vb.width > 0 ? vb.width : r.width;
+      const vh = vb && vb.height > 0 ? vb.height : r.height;
+      ctx.save();
+      ctx.translate(r.left - frame.left, r.top - frame.top);
+      ctx.scale(r.width / vw, r.height / vh);
+      if (vb) ctx.translate(-vb.x, -vb.y);
+      drawSvgShapes(svg, alpha);
+      ctx.restore();
+    };
+    const drawElement = (el, parentAlpha) => {
+      const cs = win.getComputedStyle(el);
+      if (cs.display === "none" || cs.visibility === "hidden") return;
+      const alpha = parentAlpha * (parseFloat(cs.opacity) || 1);
+      if (alpha <= 1e-3) return;
+      const r = el.getBoundingClientRect();
+      if (r.width > 0 && r.height > 0) {
+        const x = r.left - frame.left;
+        const y = r.top - frame.top;
+        const radius = cornerRadius(cs, r.width, r.height);
+        if (hasInk(cs.backgroundColor)) {
+          ctx.globalAlpha = alpha;
+          ctx.fillStyle = cs.backgroundColor;
+          tracePath(ctx, x, y, r.width, r.height, radius);
+          ctx.fill();
+        }
+        const bw = parseFloat(cs.borderTopWidth) || 0;
+        if (bw > 0 && cs.borderTopStyle !== "none" && hasInk(cs.borderTopColor)) {
+          ctx.globalAlpha = alpha;
+          ctx.strokeStyle = cs.borderTopColor;
+          ctx.lineWidth = bw;
+          tracePath(ctx, x + bw / 2, y + bw / 2, r.width - bw, r.height - bw, Math.max(0, radius - bw / 2));
+          ctx.stroke();
+        }
+      }
+      for (const child of el.childNodes) {
+        if (child.nodeType === 3) drawText(child, cs, alpha);
+        else if (child instanceof win.HTMLImageElement) drawImg(child, win.getComputedStyle(child), alpha);
+        else if (child instanceof win.SVGSVGElement) drawSvg(child, alpha);
+        else if (child instanceof win.HTMLElement) drawElement(child, alpha);
+      }
+    };
+    if (root instanceof win.HTMLElement) drawElement(root, 1);
+    ctx.restore();
+  }
+
   // src/renderers/native/vpvr/profile.ts
   function buildVpvrProfile(bars, i0, i1, rowCount, valueAreaFrac) {
     const from = Math.max(0, i0);
@@ -21699,12 +23117,13 @@ void main() {
   var COLLAPSED_PANE_H = 26;
   var TIME_AXIS_H = 22;
   var SCROLL_BTN_SIZE = 26;
+  var SCROLL_BTN_SIZE_TOUCH = 24;
   var SCROLL_BTN_RADIUS = 5;
   var SCROLL_BTN_SHADOW = "0 2px 8px rgba(0,0,0,0.4)";
   var SCROLL_BTN_ICON_PX = 12;
-  var SCROLL_BTN_RIGHT_INSET = 25;
+  var SCROLL_BTN_RIGHT_INSET = 12;
   var SCROLL_BTN_RIGHT = RIGHT_AXIS_W + SCROLL_BTN_RIGHT_INSET;
-  var SCROLL_BTN_BOTTOM = TIME_AXIS_H + 30;
+  var SCROLL_BTN_BOTTOM = TIME_AXIS_H + 14;
   var SCROLL_BTN_PROXIMITY_PX = 120;
   var MIN_VISIBLE_BARS = 2;
   var ZOOM_OUT_MARGIN_BARS = 6;
@@ -21720,10 +23139,10 @@ void main() {
   var NativeRenderer = class {
     constructor(opts) {
       this.capabilities = NATIVE_CAPABILITIES;
-      // The app "chrome" surface (drawing toolbar + axis-scale gutters): background + text.
+      // The app "chrome" surface (drawing toolbar + in-chart dialogs): background + text.
       // Owned by the app theme alone (mount/setTheme) — config-level background/text edits
-      // (settings dialog, persisted configs) recolor only the plot, keeping the toolbar and
-      // scales on a consistent, always-readable surface.
+      // (settings dialog, persisted configs) recolor the plot AND the axis scales (see
+      // axisSurface), but never the toolbar/dialog chrome.
       this.surfaceBackground = DARK_THEME.background;
       this.surfaceTextColor = DARK_THEME.textColor;
       // the plot area (canvases + DOM overlays), inset to the right of the toolbar gutter
@@ -21756,8 +23175,12 @@ void main() {
       this.symbolPicker = null;
       /** Indicator titles (the legend rows) shown — held here so a remount re-applies it. */
       this.indicatorTitlesOn = true;
+      /** Plot values beside the legend titles shown — held here so a remount re-applies it. */
+      this.indicatorValuesOn = true;
       /** Host-contributed legend actions — held here so a rebuild of the legend re-wires them. */
       this.legendActionsProvider = null;
+      /** Host override of the legend's fold toggle — held here so a remount re-applies it. */
+      this.legendOverviewAction = null;
       // ── keyboard navigation / accessibility (item 11) ──
       this.keyboard = null;
       this.keyboardEnabled = true;
@@ -21867,6 +23290,8 @@ void main() {
       // Distance (px) from the plot's right edge — clears the FULL scale gutter, which widens when a
       // pane carries merged (own-scale) columns; the constant only clears a single-column scale.
       this.scrollBtnRightPx = SCROLL_BTN_RIGHT;
+      // ── chrome size class (pushed by the host shell; see IChartRenderer.setLayoutMode) ──
+      this.layoutMode = "desktop";
       this.viewportCbs = /* @__PURE__ */ new Set();
       this.crosshairCbs = /* @__PURE__ */ new Set();
       this.chartTypeSettingsCbs = /* @__PURE__ */ new Set();
@@ -21877,6 +23302,7 @@ void main() {
       this.factoryConfig = null;
       this.hostSettingsSections = [];
       this.clickCbs = /* @__PURE__ */ new Set();
+      this.axisLongPressCbs = /* @__PURE__ */ new Set();
       this.inputChangeCbs = /* @__PURE__ */ new Set();
       this.removeIndicatorCbs = /* @__PURE__ */ new Set();
       this.toggleVisibleCbs = /* @__PURE__ */ new Set();
@@ -21884,7 +23310,7 @@ void main() {
       this.priceStyleCbs = /* @__PURE__ */ new Set();
       this.tableOverlays = /* @__PURE__ */ new Map();
       this.name = "native";
-      this.features = ["logScale", "currentPriceLine", "priceLabel", "countdown", "upColor", "downColor", "glow", "animZoom", "animPan", "intro", "zoomAnchor", "axisDrag", "paneResize", "candleZOrder", "candleVisible", "seriesOrder", "highlights", "gridlines", "axisLabels", "scaleMode", "invertScale", "paneScales", "autoScale", "timezone", "keyboard", "historyChords", "priceStyle", "priceBaseline", "baselinePrice", "settings", "attribution", "dialogHost", "tradeMarkers", "indicatorTitles"];
+      this.features = ["logScale", "currentPriceLine", "priceLabel", "countdown", "upColor", "downColor", "glow", "animZoom", "animPan", "intro", "zoomAnchor", "axisDrag", "paneResize", "candleZOrder", "candleVisible", "seriesOrder", "highlights", "gridlines", "axisLabels", "scaleMode", "invertScale", "paneScales", "autoScale", "timezone", "keyboard", "historyChords", "priceStyle", "priceBaseline", "baselinePrice", "settings", "attribution", "dialogHost", "tradeMarkers", "indicatorTitles", "indicatorValues"];
       /** Track cursor proximity to the scroll button on the plot (bubbles from the button too,
        *  so moving onto the button doesn't count as leaving). */
       this.onScrollProximityMove = (e) => {
@@ -21923,6 +23349,7 @@ void main() {
         this.candleDown = opts.downColor;
         this.scene.priceStyle = opts.priceStyle;
         this.scene.basePainting = basePaintingOf(opts.priceStyle);
+        this.scene.candleOverride = candleOverrideFor(opts.priceStyle, this.scene.style.chartTypes);
       }
       this.theme = this.deriveTheme(DARK_THEME);
     }
@@ -22056,6 +23483,11 @@ void main() {
           this.inputsUI?.setTitlesVisible(this.indicatorTitlesOn);
           return;
         // own DOM, no repaint needed
+        case "indicatorValues":
+          this.indicatorValuesOn = value !== false;
+          this.inputsUI?.setValuesVisible(this.indicatorValuesOn);
+          return;
+        // own DOM, no repaint needed
         case "attribution":
           this.attributionHtml = typeof value === "string" && value.trim() ? value : null;
           this.attributionEnabled = this.attributionHtml !== null || Boolean(value);
@@ -22144,6 +23576,8 @@ void main() {
           return this.settingsEnabled;
         case "indicatorTitles":
           return this.indicatorTitlesOn;
+        case "indicatorValues":
+          return this.indicatorValuesOn;
         case "attribution":
           return this.attributionHtml ?? this.attributionEnabled;
         case "dialogHost":
@@ -22400,6 +23834,7 @@ void main() {
         baselineLevel: next.baseline.baselineLevel
       };
       this.setPriceStyle(next.series.style);
+      this.scene.candleOverride = candleOverrideFor(this.scene.priceStyle, s.chartTypes);
       this.scene.baselineValue = next.series.baseline;
       this.coords.setPitchScale(next.series.spacing);
       this.coords.setViewport(this.clampViewport(this.coords.getViewport().barSpacing, this.coords.getViewport().rightOffset));
@@ -22479,7 +23914,10 @@ void main() {
     /** Port surface: hosts (bottom-bar / chrome buttons) open the same dialog as the
      *  in-chart gear — created on demand, independent of the gear feature being enabled. */
     openSettingsDialog(section) {
-      if (!this.settingsDialog && this.plot) this.settingsDialog = new SettingsDialog(this.dialogHost ?? this.plot, this.theme);
+      if (!this.settingsDialog && this.plot) {
+        this.settingsDialog = new SettingsDialog(this.dialogHost ?? this.plot, this.theme);
+        this.settingsDialog.setLayoutMode(this.layoutMode);
+      }
       this.toggleSettingsDialog(section);
     }
     /** (Re)aim the dialog's Canvas → Theme row: the current selection reflects the STABLE
@@ -22505,7 +23943,7 @@ void main() {
         (patch) => this.applyConfig(patch),
         (json) => this.applyConfig(json),
         () => {
-          if (this.factoryConfig) this.applyConfig(this.factoryConfig);
+          if (this.factoryConfig) this.applyConfig(factoryResetConfig(this.factoryConfig));
           this.settingsDialog?.close();
           this.openSettingsDialog();
         },
@@ -22568,11 +24006,18 @@ void main() {
       this.scrollButton.style.color = this.theme.textColor;
       this.scrollButton.style.borderColor = this.theme.borderColor;
     }
-    /** Show the button only when the latest bar is scrolled off the right edge AND the cursor is nearby. */
+    /** Show the button only when the latest bar is scrolled off the right edge. On desktop the
+     *  cursor must also be nearby (hover reveal); on mobile — no hovering cursor — the button
+     *  appears whenever the latest bars are off-screen and hides again once the view is back
+     *  at the right edge. */
     updateScrollToRealtimeButton() {
       const btn = this.scrollButton;
       if (!btn) return;
       const latestOffScreen = this.coords.barCount > 0 && this.coords.getViewport().rightOffset < 0;
+      if (this.layoutMode === "mobile") {
+        btn.style.display = latestOffScreen ? "flex" : "none";
+        return;
+      }
       btn.style.display = latestOffScreen && this.pointerNearScrollBtn ? "flex" : "none";
     }
     /** Glide the view back to the most recent bars, keeping the current zoom (barSpacing). */
@@ -22594,17 +24039,20 @@ void main() {
       this.animator.start();
     }
     /**
-     * Export the current chart as a PNG data URL by compositing the geometry (L0)
-     * + chrome (L1) + user-drawings (L1.5) canvases onto an offscreen canvas. The
-     * background is filled first (the canvas2d data layer is transparent — its bg
-     * lives on the wrapper), and a fresh synchronous paint runs first so the WebGL2
-     * backend's (non-preserved) drawing buffer is populated before it's read back
-     * this tick — the same paint also repaints the drawings layers, so they're
-     * current (interleaved drawings are already inside the data composite). They're
-     * drawn bottom-up in DOM stacking order so the front user drawings (trend lines,
-     * boxes, etc.) sit above the Pine drawings on the chrome layer, matching what's
-     * on screen. The crosshair (L2) and DOM overlays (tables, legend) are
-     * intentionally excluded.
+     * Export the current chart as a PNG data URL by compositing EVERY plot canvas onto
+     * an offscreen canvas, in the same stacking order the DOM shows: plugin layers
+     * below the data, geometry (L0), volume columns (L0.25), the visible-range volume
+     * profile (L0.6), plugin layers above the data, chrome (L1), and user drawings
+     * (L1.5). The background is filled first (the canvas2d data layer is transparent —
+     * its bg lives on the wrapper), and a fresh synchronous paint runs first so the
+     * WebGL2 backend's (non-preserved) drawing buffer is populated before it's read
+     * back this tick — the same paint also repaints the drawings layers, so they're
+     * current. DOM chrome joins as a best-effort text/chip raster (see
+     * `rasterizeOverlay`): the per-pane indicator legends, plus any host overlay that
+     * opts in with a `data-vela-screenshot` attribute on the mount container's
+     * subtree (the widget marks its status line, and its symbol watermark with
+     * `"under"` — drawn beneath the canvases, where it sits on screen). Only the
+     * crosshair (L2) is intentionally excluded.
      */
     screenshot() {
       if (!this.dataCanvas) return null;
@@ -22617,9 +24065,25 @@ void main() {
       if (!ctx) return null;
       ctx.fillStyle = this.theme.background;
       ctx.fillRect(0, 0, out.width, out.height);
-      ctx.drawImage(this.dataCanvas, 0, 0);
-      ctx.drawImage(this.chromeCanvas, 0, 0);
-      ctx.drawImage(this.drawingsCanvas, 0, 0);
+      const plotRect = this.plot?.getBoundingClientRect();
+      const frame = plotRect && plotRect.width > 0 ? { left: plotRect.left, top: plotRect.top, dpr: out.width / plotRect.width } : null;
+      const hostMarked = [...this.mountContainer?.querySelectorAll("[data-vela-screenshot]") ?? []];
+      if (frame) {
+        for (const el of hostMarked) {
+          if (el.getAttribute("data-vela-screenshot") === "under") rasterizeOverlay(ctx, el, frame);
+        }
+      }
+      const below = this.extLayers.filter((l) => l.def.placement === "below-data").map((l) => l.canvas);
+      const above = this.extLayers.filter((l) => l.def.placement !== "below-data").map((l) => l.canvas);
+      for (const canvas of [...below, this.dataCanvas, this.volumeCanvas, this.vpvrCanvas, ...above, this.chromeCanvas, this.drawingsCanvas]) {
+        if (canvas && canvas.width > 0 && canvas.height > 0) ctx.drawImage(canvas, 0, 0);
+      }
+      if (frame) {
+        for (const lg of this.plot?.querySelectorAll("[data-vela-pane]") ?? []) rasterizeOverlay(ctx, lg, frame);
+        for (const el of hostMarked) {
+          if (el.getAttribute("data-vela-screenshot") !== "under") rasterizeOverlay(ctx, el, frame);
+        }
+      }
       return out.toDataURL("image/png");
     }
     /**
@@ -22706,10 +24170,16 @@ void main() {
         borderColor: isDarkColor(this.surfaceBackground) ? DARK_THEME.borderColor : LIGHT_THEME.borderColor
       };
     }
+    /** The colors the axis-scale gutters (price + time) paint with: the LIVE chart background
+     *  (`layout.background`) and its contrast-corrected text, so the scales read as part of the
+     *  plot. Only the toolbar/dialog chrome stays on the stable app-theme surface. */
+    axisSurface() {
+      return { background: this.theme.background, textColor: this.theme.textColor };
+    }
     // ── lifecycle ──
     mount(container, theme) {
       this.mountContainer = container;
-      this.publishToolbarGutter();
+      this.publishGutters();
       this.theme = this.deriveTheme(theme);
       this.surfaceBackground = theme.background;
       this.surfaceTextColor = theme.textColor;
@@ -22764,6 +24234,9 @@ void main() {
         fling: (v) => this.fling(v),
         onPointerMove: (x, y) => this.handlePointerMove(x, y),
         onClick: (x) => this.handleClick(x),
+        onAxisLongPress: (axis, x, y) => {
+          for (const cb of this.axisLongPressCbs) cb({ axis, x, y });
+        },
         beginPriceScale: (x, y) => this.beginPriceScale(x, y),
         priceScaleBy: (dy) => this.priceScaleBy(dy),
         beginPricePan: (y) => this.beginPricePan(y),
@@ -22781,7 +24254,7 @@ void main() {
         drawingsDeleteAt: (x, y) => this.userDrawings?.deleteAt(x, y) ?? false,
         drawingsSnapMode: () => this.snapMode,
         drawingsPointerDown: (x, y, snap, shift) => this.userDrawings?.pointerDown(x, y, snap, shift),
-        drawingsPointerMove: (x, y, snap) => this.userDrawings?.pointerMove(x, y, snap),
+        drawingsPointerMove: (x, y, snap, shift) => this.userDrawings?.pointerMove(x, y, snap, shift),
         drawingsPointerUp: (x, y) => this.userDrawings?.pointerUp(x, y),
         drawingsCursor: (x, y) => this.userDrawings?.cursorAt(x, y) ?? null,
         drawingsDblClick: (x, y) => this.userDrawings?.dblClick(x, y) ?? false,
@@ -22810,6 +24283,14 @@ void main() {
         setToolbarGutter: (px) => this.setToolbarGutter(px)
       });
       this.userDrawings.historyChords = this.historyChordsEnabled;
+      if (this.layoutMode === "mobile") {
+        this.mountContainer?.setAttribute("data-vela-layout", this.layoutMode);
+        this.userDrawings.setLayoutMode(this.layoutMode);
+        if (this.scrollButton) {
+          this.scrollButton.style.width = `${SCROLL_BTN_SIZE_TOUCH}px`;
+          this.scrollButton.style.height = `${SCROLL_BTN_SIZE_TOUCH}px`;
+        }
+      }
       this.keyboard = new KeyboardController({
         panByBars: (bars) => this.panByBars(bars),
         zoomByStep: (dir) => this.zoomByStep(dir),
@@ -22822,10 +24303,13 @@ void main() {
       });
       this.setKeyboardEnabled(this.keyboardEnabled);
       this.inputsUI = new InputsUI(this.plot, theme, (paneId) => this.paneBoundsFor(paneId));
+      this.inputsUI.setLayoutMode(this.layoutMode);
       this.inputsUI.setTitlesVisible(this.indicatorTitlesOn);
+      this.inputsUI.setValuesVisible(this.indicatorValuesOn);
       this.inputsUI.setDialogHost(this.dialogHost);
       this.inputsUI.setSymbolPicker(this.symbolPicker);
       this.inputsUI.setLegendActions(this.legendActionsProvider);
+      this.inputsUI.setLegendOverviewAction(this.legendOverviewAction);
       this.inputsUI.setOnChange((c) => {
         for (const cb of this.inputChangeCbs) cb({ indicatorId: c.indicatorId, key: c.key, value: c.value });
       });
@@ -23018,6 +24502,7 @@ void main() {
       this.attributionEl?.remove();
       this.attributionEl = null;
       this.mountContainer?.style.removeProperty("--vela-toolbar-gutter");
+      this.mountContainer?.style.removeProperty("--vela-scale-gutter");
       this.mountContainer = null;
       this.wrapper?.remove();
     }
@@ -23186,6 +24671,7 @@ void main() {
       const w = RIGHT_AXIS_W + AXIS_COL_W * this.maxOwnScaleColumns();
       if (w === this.rightAxisW) return false;
       this.rightAxisW = w;
+      this.publishGutters();
       if (this.coords.width > 0) this.syncSize();
       return true;
     }
@@ -23238,7 +24724,10 @@ void main() {
       this.scene.indicators.set(model.id, model);
       this.refreshAnchorOffset(model);
       this.scene.assignIndicatorZ(model.id);
-      this.inputsUI.upsert(model.id, model.title, model.inputs, model.inputValues, model.paneId, { native: !!model.native });
+      this.inputsUI.upsert(model.id, model.shorttitle ?? model.title, model.inputs, model.inputValues, model.paneId, {
+        native: !!model.native,
+        ...model.shorttitle ? { settingsTitle: model.title } : {}
+      });
       this.syncTables(model);
       if (model.native?.type === "volume") {
         this.volumeActive = true;
@@ -23299,6 +24788,13 @@ void main() {
       this.legendActionsProvider = provider;
       this.inputsUI?.setLegendActions(provider);
     }
+    setLegendOverviewAction(action) {
+      this.legendOverviewAction = action;
+      this.inputsUI?.setLegendOverviewAction(action);
+    }
+    openIndicatorSettings(indicatorId) {
+      this.inputsUI?.openSettingsFor(indicatorId);
+    }
     /**
      * Hide/show a mounted indicator. Hiding drops its model from the scene (so every paint path —
      * series, fills, drawings, tables, glow, data window — skips it) while keeping its z key and its
@@ -23345,12 +24841,31 @@ void main() {
       if (style === this.scene.priceStyle) return;
       this.scene.priceStyle = style;
       this.scene.basePainting = basePaintingOf(style);
+      this.scene.candleOverride = candleOverrideFor(style, this.scene.style.chartTypes);
       for (const cb of this.priceStyleCbs) cb(style);
     }
     onRemoveIndicator(cb) {
       this.removeIndicatorCbs.add(cb);
       return () => this.removeIndicatorCbs.delete(cb);
     }
+    /** Port surface: the host shell's chrome size class. Mobile switches the renderer
+     *  chrome to its touch-first presentation — fullscreen dialogs, no docked drawing
+     *  toolbar (the shell provides its own picker), the scroll-to-latest button shown
+     *  whenever the latest bars are off-screen (touch has no cursor proximity). */
+    setLayoutMode(mode) {
+      if (mode === this.layoutMode) return;
+      this.layoutMode = mode;
+      this.mountContainer?.setAttribute("data-vela-layout", mode);
+      this.userDrawings?.setLayoutMode(mode);
+      this.settingsDialog?.setLayoutMode(mode);
+      this.inputsUI?.setLayoutMode(mode);
+      if (this.scrollButton) {
+        const px = mode === "mobile" ? SCROLL_BTN_SIZE_TOUCH : SCROLL_BTN_SIZE;
+        this.scrollButton.style.width = `${px}px`;
+        this.scrollButton.style.height = `${px}px`;
+      }
+      this.updateScrollToRealtimeButton();
+    }
     setSettingsSections(sections) {
       this.hostSettingsSections = sections;
       this.settingsDialog?.setHostSections(sections);
@@ -23375,6 +24890,10 @@ void main() {
       this.clickCbs.add(cb);
       return () => this.clickCbs.delete(cb);
     }
+    onAxisLongPress(cb) {
+      this.axisLongPressCbs.add(cb);
+      return () => this.axisLongPressCbs.delete(cb);
+    }
     onViewportChange(cb) {
       this.viewportCbs.add(cb);
       return () => this.viewportCbs.delete(cb);
@@ -23506,13 +25025,17 @@ void main() {
           active = true;
         }
       }
-      this.coords.setViewport(this.clampViewport(barSpacing, rightOffset));
+      const clamped = this.clampViewport(barSpacing, rightOffset);
+      if (clamped.barSpacing !== barSpacing) this.targetBarSpacing = clamped.barSpacing;
+      if (this.scrollTargetRO != null && clamped.rightOffset !== rightOffset) this.scrollTargetRO = clamped.rightOffset;
+      this.coords.setViewport(clamped);
       this.computeScales();
       if (this.easeScales(dtMs)) active = true;
       if (this.easeLiveBar(dtMs)) active = true;
       this.skeletonClockMs += dtMs;
       this.paintData();
       this.crosshairLayer.render(this.scene, this.coords, this.theme, this.hoverSeparatorY, this.externalCrossPx());
+      this.updateLegendValues();
       this.emitViewportChange();
       return active;
     }
@@ -23577,7 +25100,7 @@ void main() {
         this.lastPointer = null;
         this.scheduler.invalidate(1 /* Cursor */);
         this.hoverLogical = null;
-        const empty = { time: null, price: null, values: /* @__PURE__ */ new Map(), ohlc: null };
+        const empty = { time: null, price: null, paneKind: null, values: /* @__PURE__ */ new Map(), ohlc: null };
         for (const cb of this.crosshairCbs) cb(empty);
         return;
       }
@@ -23589,7 +25112,7 @@ void main() {
       const logical = Math.round(this.coords.xToLogical(x));
       const onBar = logical >= 0 && logical < this.coords.barCount;
       const time = onBar ? this.coords.logicalToTime(logical) : null;
-      const pane = this.paneAtY(y);
+      const pane = this.paneNodeAtY(y);
       const price = inData && pane ? this.coords.yToPrice(y, pane.scale, pane.bounds) : null;
       const values = /* @__PURE__ */ new Map();
       if (onBar) {
@@ -23606,7 +25129,7 @@ void main() {
       const bar = onBar ? this.bars[logical] : void 0;
       const ohlc = bar ? { time: bar.time, open: bar.open, high: bar.high, low: bar.low, close: bar.close, volume: bar.volume } : null;
       this.hoverLogical = onBar ? logical : null;
-      const event = { time, price, values, ohlc };
+      const event = { time, price, paneKind: inData && pane ? pane.kind : null, values, ohlc };
       for (const cb of this.crosshairCbs) cb(event);
     }
     handleClick(x) {
@@ -23625,6 +25148,20 @@ void main() {
       }
       return null;
     }
+    /** The pane whose bounds sit closest to `y` — the forgiving fallback for points that
+     *  fall BETWEEN bounds (separator gaps, the strip under the last pane). */
+    nearestPaneToY(y) {
+      let best = null;
+      let bestDist = Infinity;
+      for (const pane of this.scene.panes.values()) {
+        const d = y < pane.bounds.top ? pane.bounds.top - y : y - (pane.bounds.top + pane.bounds.height);
+        if (d < bestDist) {
+          bestDist = d;
+          best = pane;
+        }
+      }
+      return best;
+    }
     // ── manual vertical scaling (price-axis drag + vertical price pan) ──
     /** The scale window a gesture targets: a pane's master scale, or a merged indicator's
      *  own scale column (resolved from the grabbed x). Both share the four scale fields. */
@@ -23687,7 +25224,7 @@ void main() {
      * still fits the view.)
      */
     dataDblClick(_x, y) {
-      const pane = this.paneNodeAtY(y);
+      const pane = this.paneNodeAtY(y) ?? this.nearestPaneToY(y);
       if (!pane) return;
       const maximized = this.maximizedPaneId !== pane.id;
       this.maximizedPaneId = maximized ? pane.id : null;
@@ -23928,29 +25465,63 @@ void main() {
     dataWindowGroups(idx, pricePane) {
       const groups = [];
       for (const model of this.scene.indicators.values()) {
-        const pane = (model.paneId ? this.scene.panes.get(model.paneId) : null) ?? pricePane;
-        const off = this.scene.offsetOf(model.id);
-        const rows = [];
-        for (const s of model.series) {
-          let value;
-          let color;
-          if (s.kind === "candle" || s.kind === "bar") {
-            value = s.bars[idx - off]?.close;
-            color = s.style?.up ?? this.theme.upColor;
-          } else if (isLineLikeSeries(s)) {
-            if (s.visible === false) continue;
-            value = s.points[idx - off]?.value;
-            color = s.points[idx - off]?.color ?? s.style.color;
-          } else {
-            continue;
-          }
-          if (value == null || !Number.isFinite(value)) continue;
-          rows.push({ label: s.title || model.title, value: this.dataWindowFmt(value, pane), color });
-        }
+        const rows = this.dataWindowRowsFor(model, idx, pricePane);
         if (rows.length) groups.push({ name: model.title, rows });
       }
       return groups;
     }
+    /** One indicator's readout at bar `idx`: a row per drawable plot, formatted on its pane's scale. */
+    dataWindowRowsFor(model, idx, pricePane) {
+      if (model.native?.type === "volume") return this.volumeReadoutRows(model, idx);
+      const pane = (model.paneId ? this.scene.panes.get(model.paneId) : null) ?? pricePane;
+      const off = this.scene.offsetOf(model.id);
+      const rows = [];
+      for (const s of model.series) {
+        let value;
+        let color;
+        if (s.kind === "candle" || s.kind === "bar") {
+          value = s.bars[idx - off]?.close;
+          color = s.style?.up ?? this.theme.upColor;
+        } else if (isLineLikeSeries(s)) {
+          if (s.visible === false) continue;
+          value = s.points[idx - off]?.value;
+          color = s.points[idx - off]?.color ?? s.style.color;
+        } else {
+          continue;
+        }
+        if (value == null || !Number.isFinite(value)) continue;
+        rows.push({ label: s.title || model.title, value: this.dataWindowFmt(value, pane), color });
+      }
+      return rows;
+    }
+    /** The volume indicator's readout: the bar's volume, tinted with the layer's own direction
+     *  colors. Hiding volume keeps its model in the scene (only the layer is suppressed — see
+     *  `setIndicatorVisible`), so the hidden flag is checked here rather than by model absence. */
+    volumeReadoutRows(model, idx) {
+      if (this.volumeHidden) return [];
+      const bar = this.bars[idx];
+      const vol = bar?.volume;
+      if (bar == null || vol == null || !Number.isFinite(vol)) return [];
+      const cfg = this.scene.volumeLayer;
+      const color = bar.close >= bar.open ? cfg?.upColor ?? this.theme.upColor : cfg?.downColor ?? this.theme.downColor;
+      return [{ label: model.title, value: formatVolume(vol), color }];
+    }
+    /** Refresh the plot values beside every legend title — the same readout the data window
+     *  shows (crosshair bar, else the latest bar), pushed per paint. A hidden indicator has
+     *  no scene model, so its row is absent from the map and its readout clears. */
+    updateLegendValues() {
+      if (!this.inputsUI) return;
+      const n = this.bars.length;
+      const values = /* @__PURE__ */ new Map();
+      if (n > 0) {
+        const idx = this.hoverLogical != null ? this.hoverLogical : n - 1;
+        const pricePane = this.dataWindowPricePane();
+        for (const model of this.scene.indicators.values()) {
+          values.set(model.id, this.dataWindowRowsFor(model, idx, pricePane).map((r) => ({ value: r.value, color: r.color })));
+        }
+      }
+      this.inputsUI.setPlotValues(values);
+    }
     renderFrame(level) {
       if (this.animator.active) return;
       if (repaintsData(level)) {
@@ -23958,9 +25529,38 @@ void main() {
         this.paintData();
       } else if (repaintsChrome(level) && this.paintedData) {
         this.chrome.prepare(this.scene, this.coords, this.theme);
-        this.chrome.render(this.scene, this.coords, this.theme, { background: this.surfaceBackground, textColor: this.surfaceTextColor });
+        this.chrome.render(this.scene, this.coords, this.theme, this.axisSurface());
       }
       this.crosshairLayer.render(this.scene, this.coords, this.theme, this.hoverSeparatorY, this.externalCrossPx());
+      if (!repaintsData(level) && this.paintedData) this.repaintCursorLayers();
+      this.updateLegendValues();
+    }
+    /** Repaint the SDK layers that opted into cursor tracking (their own canvas only). */
+    repaintCursorLayers() {
+      const pane = this.scene.panes.get(PRICE_PANE_ID);
+      if (!pane) return;
+      const nowMs = typeof performance !== "undefined" ? performance.now() : Date.now();
+      for (const l of this.extLayers) {
+        if (!l.def.repaintOnCursor) continue;
+        l.instance.render(this.extLayerArgs(l.def.id, pane.scale, pane.bounds, nowMs));
+        if (this.animZoom && l.instance.animating?.()) this.animator.start();
+      }
+    }
+    /** One frame's args for an SDK renderer layer (shared by the data + cursor paint paths). */
+    extLayerArgs(id, scale, bounds, nowMs) {
+      return {
+        bars: this.scene.bars,
+        data: this.scene.nativeData.get(id),
+        settings: this.scene.nativeData.get(`${id}-settings`) ?? {},
+        pending: this.scene.nativePending.get(id) ?? [],
+        coords: this.coords,
+        scale,
+        bounds,
+        theme: this.theme,
+        priceStyle: this.scene.priceStyle,
+        nowMs,
+        cursor: this.lastPointer
+      };
     }
     /** Paint the below-data (L-1) + geometry (L0) + chrome (L1) layers from the current scene/coords. */
     paintData() {
@@ -23993,18 +25593,16 @@ void main() {
         });
         const nowMs = typeof performance !== "undefined" ? performance.now() : Date.now();
         for (const l of this.extLayers) {
-          l.instance.render({
-            bars: this.scene.bars,
-            data: this.scene.nativeData.get(l.def.id),
-            settings: this.scene.nativeData.get(`${l.def.id}-settings`) ?? {},
-            pending: this.scene.nativePending.get(l.def.id) ?? [],
-            coords: this.coords,
-            scale: pane.scale,
-            bounds: pane.bounds,
-            theme: this.theme,
-            priceStyle: this.scene.priceStyle,
-            nowMs
-          });
+          const args = this.extLayerArgs(l.def.id, pane.scale, pane.bounds, nowMs);
+          l.instance.render(args);
+          if (l.def.id === this.scene.priceStyle && l.instance.modulateBase) {
+            const mod = l.instance.modulateBase(args);
+            if (mod) {
+              if (mod.candleBodyScale != null) this.backend.candleBodyScale = clamp012(mod.candleBodyScale) || 0.01;
+              if (mod.candleBodyAlpha != null) this.backend.candleBodyAlpha = clamp012(mod.candleBodyAlpha) * this.candleBodyAlpha;
+              if (mod.gridAlpha != null) this.backend.gridAlpha = clamp012(mod.gridAlpha);
+            }
+          }
           if (this.animZoom && l.instance.animating?.()) this.animator.start();
         }
       }
@@ -24014,7 +25612,7 @@ void main() {
       if (easeLive && liveActual) this.bars[li] = { ...liveActual, high: this.liveEaseHigh, low: this.liveEaseLow, close: this.liveEaseClose };
       this.scene.drawingSlices = this.userDrawings?.prepareSlices(this.scene.orderedPanes().map((p) => p.id)) ?? /* @__PURE__ */ new Map();
       this.backend.render(this.scene, this.coords, this.theme);
-      this.chrome.render(this.scene, this.coords, this.theme, { background: this.surfaceBackground, textColor: this.surfaceTextColor });
+      this.chrome.render(this.scene, this.coords, this.theme, this.axisSurface());
       this.userDrawings?.render();
       if (easeLive && liveActual) this.bars[li] = liveActual;
       this.paintedData = true;
@@ -24084,7 +25682,7 @@ void main() {
           if (!Number.isFinite(y) || y < pricePane.bounds.top || y > pricePane.bounds.top + pricePane.bounds.height) y = null;
         }
       }
-      return { x, y, time: this.coords.logicalToTime(logical) };
+      return { x, y, time: this.coords.logicalToTime(logical), price: y != null ? ext.price : null };
     }
     /** Set the sticky magnet mode (called by the drawings toolbar's 3-state button). */
     setSnapMode(mode) {
@@ -24448,15 +26046,18 @@ void main() {
     setToolbarGutter(px) {
       if (px === this.toolbarGutter) return;
       this.toolbarGutter = px;
-      this.publishToolbarGutter();
+      this.publishGutters();
       this.positionAttribution();
       this.syncSize();
     }
-    /** Publish the gutter on the mount container as `--vela-toolbar-gutter`, so host
-     *  overlays sharing that container (a status line, a custom legend) can anchor to
-     *  the plot's left edge without reaching into the renderer's DOM. */
-    publishToolbarGutter() {
+    /** Publish the gutters on the mount container as `--vela-toolbar-gutter` (left,
+     *  drawings toolbar) and `--vela-scale-gutter` (right, the full price-scale width
+     *  incl. merged own-scale columns), so host overlays sharing that container (a
+     *  status line, a watermark, a custom legend) can anchor to the plot's edges
+     *  without reaching into the renderer's DOM. */
+    publishGutters() {
       this.mountContainer?.style.setProperty("--vela-toolbar-gutter", `${this.toolbarGutter}px`);
+      this.mountContainer?.style.setProperty("--vela-scale-gutter", `${this.rightAxisW}px`);
     }
     /** The built-in mark, or the host's own when one is set. */
     buildAttributionEl() {
@@ -24526,7 +26127,13 @@ void main() {
         this.fitContent();
         this.didInitialFit = true;
       }
-      this.scheduler.flushNow(4 /* Full */);
+      if (this.animator.active) {
+        this.computeScales();
+        this.paintData();
+        this.crosshairLayer.render(this.scene, this.coords, this.theme, this.hoverSeparatorY, this.externalCrossPx());
+      } else {
+        this.scheduler.flushNow(4 /* Full */);
+      }
     }
     applyBackground() {
       this.wrapper.style.background = this.theme.background;
@@ -24595,6 +26202,9 @@ void main() {
     }
     return out.sort((a, b) => a.from - b.from);
   }
+  function clamp012(v) {
+    return Math.max(0, Math.min(1, v));
+  }
   function isPriceStyle2(v) {
     return typeof v === "string" && priceStyleIds().includes(v);
   }
@@ -24764,7 +26374,8 @@ void main() {
   };
   var vpvrDescriptor = {
     type: "vpvr",
-    title: "VPVR",
+    title: "Visible Range Volume Profile",
+    shortTitle: "VRVP",
     paneHint: "price",
     overlay: true,
     inputsSchema: () => [
@@ -26471,6 +28082,7 @@ void main() {
   exports.legendActions = legendActions;
   exports.nativeIndicatorDescriptors = nativeIndicatorDescriptors;
   exports.nativeIndicatorTypes = nativeIndicatorTypes;
+  exports.normalizeSettingsRow = normalizeSettingsRow;
   exports.registerChartType = registerChartType;
   exports.registerDefaultEngine = registerDefaultEngine;
   exports.registerDrawingType = registerDrawingType;
@@ -26486,6 +28098,7 @@ void main() {
   exports.rendererLayers = rendererLayers;
   exports.resolveEngines = resolveEngines;
   exports.resolveTheme = resolveTheme;
+  exports.settingsRowValueKeys = settingsRowValueKeys;
   exports.sharedBarStore = sharedBarStore;
   exports.sidePanels = sidePanels;
   exports.splitColor = splitColor;