@luxalgo/vela 0.5.0 → 0.5.2

package/dist/index.cjs

@@ -481,14 +481,15 @@ registerIcon(
   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"/>'));
@@ -511,6 +512,7 @@ registerIcon("star", S('<path d="M8 2.2l1.75 3.55 3.9.55-2.8 2.75.65 3.9L8 11.1l
 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"/>'));
@@ -531,6 +533,11 @@ registerIcon(
   "pen-lock",
   svg24('<path d="M13.8 4.2a2.1 2.1 0 0 1 3 3L8.5 15.5l-3.5 1 1-3.5Z"/><rect x="13" y="14.5" width="8" height="6" rx="1.2"/><path d="M15 14.5v-1.6a2 2 0 0 1 4 0v1.6"/>')
 );
+registerIcon(
+  "pen-sync",
+  // Pen + two stacked panes — drawing onto every linked chart at once.
+  svg24('<path d="M13.8 4.2a2.1 2.1 0 0 1 3 3L8.5 15.5l-3.5 1 1-3.5Z"/><rect x="12.5" y="13.5" width="6" height="4.8" rx="1"/><path d="M15.5 18.3v1a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-2.8a1 1 0 0 0-1-1h-1"/>')
+);
 registerIcon("brush", svg24('<path d="M9.5 12 17 4.5a2.12 2.12 0 0 1 3 3L12.5 15"/><path d="M7 14a3 3 0 0 0-3 3c0 1.3-1.2 1.5-1.5 2 .8.9 2 1.5 3.5 1.5a3.5 3.5 0 0 0 3.5-3.5 3 3 0 0 0-2.5-3Z"/>'));
 registerIcon(
   "bucket",
@@ -1884,10 +1891,10 @@ function polylineHit(px, py, pts, tol) {
 }
 
 // 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,
@@ -1905,7 +1912,8 @@ function defaultFrvpStyle() {
     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,
@@ -6534,6 +6542,11 @@ var DrawingController = class {
   setToolbar(option) {
     this.port?.setToolbar(buildToolbar(option).definition);
   }
+  /** Display (or clear) another chart's in-progress placement as a ghost — silently
+   *  inert on a renderer without the optional `setExternalGhost` seam. */
+  setExternalGhost(doc) {
+    this.port?.setExternalGhost?.(doc);
+  }
   /** Push per-tool shortcut hints (pre-formatted display strings) to the toolbar flyouts. */
   setToolShortcuts(map) {
     this.port?.setToolShortcuts?.(map);
@@ -6764,6 +6777,9 @@ var DrawingController = class {
       case "arm":
         this.setTool(i.type);
         break;
+      case "draft":
+        this.events.emit("drawing:draft", { doc: i.doc });
+        break;
       case "create": {
         const before = this.store.serialize();
         const last = this.lastStyle.get(i.doc.type);
@@ -7039,6 +7055,52 @@ var ProviderRegistry = class {
 };
 
 // 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);
@@ -7138,6 +7200,9 @@ var EngineOrchestrator = class _EngineOrchestrator {
     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). */
@@ -7200,7 +7265,10 @@ var EngineOrchestrator = class _EngineOrchestrator {
     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));
@@ -7688,6 +7756,8 @@ var EngineOrchestrator = class _EngineOrchestrator {
     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",
@@ -8159,6 +8229,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
     return {
       id: record.id,
       title: record.title,
+      ...d.shortTitle ? { shorttitle: d.shortTitle } : {},
       overlay: d.overlay,
       paneHint: d.paneHint,
       native: { type: record.native.type },
@@ -8619,6 +8690,28 @@ var RendererControl = class {
   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.
@@ -8665,6 +8758,10 @@ var RendererControl = class {
   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
@@ -8730,6 +8827,13 @@ var RendererControl = class {
     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
@@ -9383,6 +9487,14 @@ var DrawingsControl = class {
     if (this.ok("setToolShortcuts")) this.ctrl.setToolShortcuts(map);
     return this;
   }
+  /** Display another chart's in-progress placement as a GHOST at reduced opacity
+   *  (`null` clears it) — how a multi-chart host mirrors `drawing:draft` onto linked
+   *  charts. Never a real drawing: no store entry, no selection, no persistence.
+   *  Silently inert on a renderer without the optional seam. */
+  setExternalGhost(doc) {
+    this.ctrl.setExternalGhost(doc);
+    return this;
+  }
   /** Create a drawing programmatically (no clicking). Returns it, or null if unsupported. */
   add(type, init = {}) {
     if (!this.ok("add")) return null;
@@ -9621,6 +9733,11 @@ function themeTokens(t) {
     "--vela-hover-strong": wash(0.16),
     "--vela-focus": withAlpha(t.textColor, 0.5),
     "--vela-focus-soft": withAlpha(t.textColor, 0.12),
+    // Separator hover — the SAME wash the chart's pane separators paint on hover
+    // (soft full-thickness band + solid 2px center line), so DOM-drawn dividers
+    // (the workspace grid) and canvas-drawn ones read as one family.
+    "--vela-separator-hover-band": withAlpha(t.textColor, 0.1),
+    "--vela-separator-hover-line": withAlpha(t.textColor, 0.55),
     "--vela-scroll": withAlpha(t.textColor, 0.3),
     "--vela-accent": ACCENT,
     "--vela-accent-bright": ACCENT_BRIGHT,
@@ -9668,7 +9785,7 @@ function attachChromeTooltip(anchor, opts) {
     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();
@@ -9682,16 +9799,17 @@ function attachChromeTooltip(anchor, opts) {
       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();
   };
@@ -9758,14 +9876,22 @@ function makeDialogDraggable(box, header, options) {
 
 // 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;
@@ -9786,6 +9912,8 @@ var InputsUI = class {
     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). */
@@ -9807,9 +9935,18 @@ var InputsUI = class {
     /** 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") {
@@ -9833,6 +9970,9 @@ var InputsUI = class {
     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);
   }
@@ -9840,6 +9980,36 @@ var InputsUI = class {
     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) ?? [];
@@ -9867,12 +10037,12 @@ var InputsUI = class {
   }
   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) {
@@ -9903,7 +10073,7 @@ var InputsUI = class {
       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();
@@ -9921,6 +10091,54 @@ var InputsUI = class {
     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) {
@@ -9972,6 +10190,48 @@ var InputsUI = class {
     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);
@@ -9993,7 +10253,8 @@ var InputsUI = class {
     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);
@@ -10029,15 +10290,16 @@ var InputsUI = class {
    */
   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;
@@ -10045,25 +10307,30 @@ var InputsUI = class {
       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);
@@ -10071,9 +10338,11 @@ var InputsUI = class {
   }
   /** 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;
@@ -10086,8 +10355,7 @@ var InputsUI = class {
     }
     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);
     });
@@ -10107,11 +10375,16 @@ var InputsUI = class {
       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;";
@@ -10123,6 +10396,11 @@ var InputsUI = class {
       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");
@@ -10131,16 +10409,14 @@ var InputsUI = class {
       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";
@@ -10148,7 +10424,7 @@ var InputsUI = class {
       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);
     }
@@ -10159,7 +10435,7 @@ var InputsUI = class {
       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);
@@ -10176,12 +10452,13 @@ var InputsUI = class {
     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. */
@@ -10195,24 +10472,31 @@ var InputsUI = class {
     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() {
@@ -10231,8 +10515,8 @@ var InputsUI = class {
     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
@@ -10245,17 +10529,36 @@ var InputsUI = class {
     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() {
@@ -10283,6 +10586,7 @@ var InputsUI = class {
   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();
@@ -10338,6 +10642,7 @@ var InputsUI = class {
     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();
@@ -10345,7 +10650,7 @@ var InputsUI = class {
     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";
@@ -10357,7 +10662,7 @@ var InputsUI = class {
     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");
@@ -10377,7 +10682,7 @@ var InputsUI = class {
         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);
@@ -10826,10 +11131,14 @@ function groupInputs(inputs) {
 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;}
@@ -10843,19 +11152,19 @@ function ensureDialogStyles() {
 .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" },
@@ -11464,6 +11773,44 @@ function basePaintingOf(style) {
   for (const t of chartTypes()) if (t.id === style) return t.basePainting ?? "candles";
   return "candles";
 }
+function hasOwnCandlePaint(style) {
+  if (BUILTIN_PRICE_STYLES.includes(style)) return false;
+  for (const t of chartTypes()) if (t.id === style) return (t.basePainting ?? "candles") === "candles";
+  return false;
+}
+function candleOverrideFor(style, bags) {
+  if (!hasOwnCandlePaint(style)) return null;
+  const bag = bags[style] ?? {};
+  const color = (v) => isColor(v) ? v : null;
+  const bool = (v) => isBool(v) ? v : null;
+  return {
+    upColor: color(bag.candleUpColor),
+    downColor: color(bag.candleDownColor),
+    bodyVisible: bool(bag.candleBodyVisible),
+    borderVisible: bool(bag.candleBorderVisible),
+    borderUpColor: color(bag.candleBorderUpColor),
+    borderDownColor: color(bag.candleBorderDownColor),
+    wickVisible: bool(bag.candleWickVisible),
+    wickUpColor: color(bag.candleWickUpColor),
+    wickDownColor: color(bag.candleWickDownColor)
+  };
+}
+function effectiveCandlePaint(base, override, themeUp, themeDown) {
+  if (!override) return { up: themeUp, down: themeDown, candle: base };
+  return {
+    up: override.upColor ?? themeUp,
+    down: override.downColor ?? themeDown,
+    candle: {
+      bodyVisible: override.bodyVisible ?? base.bodyVisible,
+      borderVisible: override.borderVisible ?? base.borderVisible,
+      borderUpColor: override.borderUpColor ?? base.borderUpColor,
+      borderDownColor: override.borderDownColor ?? base.borderDownColor,
+      wickVisible: override.wickVisible ?? base.wickVisible,
+      wickUpColor: override.wickUpColor ?? base.wickUpColor,
+      wickDownColor: override.wickDownColor ?? base.wickDownColor
+    }
+  };
+}
 function priceStyleIds() {
   const out = [...BUILTIN_PRICE_STYLES];
   for (const t of chartTypes()) if (!out.includes(t.id)) out.push(t.id);
@@ -11502,6 +11849,33 @@ function clampLevel(v) {
 function clampSpacing(v) {
   return v < 0.1 ? 0.1 : v > 10 ? 10 : v;
 }
+function factoryResetConfig(factory) {
+  const bag = {};
+  for (const t of chartTypes()) {
+    const section = t.settings;
+    if (!section) continue;
+    const defaults2 = {};
+    const addRows = (rows) => {
+      for (const r of rows ?? []) {
+        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);
@@ -11816,6 +12190,9 @@ var SceneGraph = class {
     this.priceStyle = "candles";
     /** Price-series base painting for the ACTIVE style (see ChartTypeDefinition.basePainting). */
     this.basePainting = "candles";
+    /** The ACTIVE style's own candle cosmetics (`chartTypes.<id>.candle*`) when it is a
+     *  candle-based plugin type; null ⇒ paint with the shared `style.candle` block. */
+    this.candleOverride = null;
     /** Explicit baseline reference price for `priceStyle:'baseline'`; when null the
      *  baseline follows `style.baseline.baselineLevel` as a percent of the visible pane
      *  range (resolved per frame via `baselinePriceFor`). */
@@ -13045,14 +13422,15 @@ var WebGL2Backend = class {
   emitCandles(b, scene, bars, i0, i1, coords, pane, theme, barColors) {
     const spacing = coords.bodySpacing();
     const tier = candleTier(spacing);
+    const paint = effectiveCandlePaint(scene.style.candle, scene.candleOverride, theme.upColor, theme.downColor);
     if (tier === "aggregate") {
-      this.emitCandlesAggregated(b, bars, i0, i1, coords, pane, theme.upColor, theme.downColor, barColors);
+      this.emitCandlesAggregated(b, bars, i0, i1, coords, pane, paint.up, paint.down, barColors);
       return;
     }
     const drawBody = tier === "full";
-    const up = theme.upColor;
-    const down = theme.downColor;
-    const cs = scene.style.candle;
+    const up = paint.up;
+    const down = paint.down;
+    const cs = paint.candle;
     const fading = this.candleStructureAlpha > this.candleBodyAlpha + 1e-3;
     for (let i = i0; i <= i1; i += 1) {
       const bar = bars[i];
@@ -13623,6 +14001,11 @@ function easeToward(current, target, dtMs, tauMs) {
 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) {
@@ -13643,8 +14026,13 @@ function wheelPanDelta(deltaX, deltaY, shift) {
 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
@@ -13672,9 +14060,40 @@ var InputController = class {
     this.vx = 0;
     // smoothed pointer velocity, px/ms
     this.middleDeleted = false;
+    // the last middle press deleted a drawing (suppress autoscroll/paste)
+    // Last cursor position over the element (NaN once it leaves) — lets a modifier
+    // press/release re-shape the drawings preview with the pointer stationary.
+    this.cursorX = NaN;
+    this.cursorY = NaN;
+    // ── 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);
@@ -13684,6 +14103,15 @@ var InputController = class {
       }
       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;
@@ -13709,6 +14137,9 @@ var InputController = class {
       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;
@@ -13716,28 +14147,44 @@ var InputController = class {
     };
     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;
@@ -13752,16 +14199,46 @@ var InputController = class {
         const drawCursor = this.deps.drawingsCursor?.(x, y);
         const r = this.regionAt(x, y);
         this.el.style.cursor = drawCursor ?? (r === "price" ? "ns-resize" : r === "time" ? "ew-resize" : r === "separator" ? "row-resize" : "");
-        this.deps.drawingsPointerMove?.(x, y, this.snapMode(e));
+        this.deps.drawingsPointerMove?.(x, y, this.snapMode(e), e.shiftKey);
       }
-      this.deps.onPointerMove(x, y);
+      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;
@@ -13770,23 +14247,29 @@ var InputController = class {
           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();
@@ -13807,26 +14290,44 @@ var InputController = class {
   }
   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) {
@@ -13850,6 +14351,59 @@ var InputController = class {
   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) {
@@ -13858,6 +14412,35 @@ var InputController = class {
     } 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
@@ -14236,12 +14819,13 @@ var Canvas2dBackend = class {
   drawCandles(ctx, scene, bars, i0, i1, coords, pane, theme, barColors) {
     const spacing = coords.bodySpacing();
     const tier = candleTier(spacing);
+    const paint = effectiveCandlePaint(scene.style.candle, scene.candleOverride, theme.upColor, theme.downColor);
     if (tier === "aggregate") {
-      this.drawCandlesAggregated(ctx, bars, i0, i1, coords, pane, theme.upColor, theme.downColor, barColors);
+      this.drawCandlesAggregated(ctx, bars, i0, i1, coords, pane, paint.up, paint.down, barColors);
       return;
     }
     const drawBody = tier === "full";
-    const cs = scene.style.candle;
+    const cs = paint.candle;
     const fading = this.candleStructureAlpha > this.candleBodyAlpha + 1e-3;
     for (let i = i0; i <= i1; i += 1) {
       const b = bars[i];
@@ -14249,7 +14833,7 @@ var Canvas2dBackend = class {
       const g = candleGeometry(coords.logicalToX(i), spacing, coords.dpr, this.candleBodyScale);
       const x = g.center;
       const up = b.close >= b.open;
-      const dir = up ? theme.upColor : theme.downColor;
+      const dir = up ? paint.up : paint.down;
       const bc = barColors.get(b.time);
       const color = bc ?? dir;
       let top = 0;
@@ -15360,7 +15944,7 @@ var ChromeRenderer = class {
   constructor() {
     this.canvas = null;
     this.ctx = null;
-    // The color for axis tick labels — the stable chrome surface text, set each frame in render().
+    // The color for axis tick labels — the host-passed surface text, set each frame in render().
     this.axisTextColor = DARK_THEME.textColor;
     // Shared Pine-drawing renderer (line/box/label/polyline/linefill); widthCache persists.
     this.drawScene = new DrawingSceneRenderer({ timeToLogical: () => 0, barAt: () => null, theme: {} });
@@ -15392,8 +15976,8 @@ var ChromeRenderer = class {
     return dr;
   }
   /** Clear the chrome canvas and draw drawings + axes + current-price line.
-   *  `surface` (background + text) paints the axis-scale gutters so they keep the app
-   *  chrome color and stay readable, rather than tracking the user-editable plot cosmetics.
+   *  `surface` (background + text) paints the axis-scale gutters — the host passes the live
+   *  chart background so the scales read as part of the plot, with contrast-corrected text.
    *  Falls back to the theme's own colors when no surface is supplied. */
   render(scene, coords, theme, surface) {
     const ctx = this.ctx;
@@ -15670,11 +16254,19 @@ var ChromeRenderer = class {
     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";
   }
 };
@@ -15776,10 +16368,10 @@ var CrosshairRenderer = class {
   }
   /** 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;
@@ -15803,7 +16395,20 @@ var CrosshairRenderer = class {
     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
@@ -16164,6 +16769,7 @@ function colorField(theme, getVal, onVal) {
     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) {
@@ -16199,6 +16805,101 @@ function closeColorPopover() {
   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",
@@ -16250,6 +16951,61 @@ function ensureControlStyles() {
 .vela-sd-btn:hover{background:var(--vela-hover);border-color:var(--vela-border-strong);color:var(--vela-fg-bright);}
 .vela-sd-close{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--vela-fg-muted);line-height:0;width:30px;height:30px;border-radius:var(--vela-radius-sm);transition:background var(--vela-dur-fast) ease,color var(--vela-dur-fast) ease;}
 .vela-sd-close:hover{background:var(--vela-hover);color:var(--vela-fg-bright);}
+/* Rows/blocks gated away by chart-type conditions, TOC filters, or the instance strip.
+   !important: the pane grid rewrites inline display ('contents') AFTER the initial
+   visibility pass, so a class must win. */
+.vela-sd-hide{display:none !important;}
+/* Indented rail sub-entry (a chart-type section's subsection tab). */
+.vela-sd-tab-sub{padding-left:28px;font-weight:600;font-size:12px;}
+/* Instance strip: a tab per present instance (label, \u2715 on the active removable one)
+   and a dashed + that turns on the next absent instance. The rule under it separates
+   the strip from the instance's TOC + rows area. */
+.vela-sd-itabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:14px 0 0;padding-bottom:12px;border-bottom:1px solid var(--vela-border);}
+.vela-sd-itab{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px;background:transparent;border:1px solid var(--vela-border);border-radius:var(--vela-radius-md);color:var(--vela-fg-muted);font-family:inherit;font-size:var(--vela-font-size-md);font-weight:600;cursor:pointer;transition:background var(--vela-dur-fast) ease,color var(--vela-dur-fast) ease,border-color var(--vela-dur-fast) ease;}
+.vela-sd-itab:hover{background:var(--vela-hover);color:var(--vela-fg-bright);}
+.vela-sd-itab.on{background:var(--vela-active);color:var(--vela-fg-bright);border-color:var(--vela-border-strong);}
+.vela-sd-ix{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:-4px;border-radius:var(--vela-radius-sm);color:var(--vela-fg-muted);font-size:10px;line-height:1;}
+.vela-sd-ix:hover{background:var(--vela-hover);color:var(--vela-fg-bright);}
+.vela-sd-itab-add{border-style:dashed;min-width:30px;justify-content:center;padding:0;}
+/* Structured pane: group TOC column + rows column, TOP-ALIGNED (the shared padding-top
+   lives on the wrap, never on one column). The TOC sticks while the pane scrolls; the
+   vertical rule sits on the rows column so it spans the full content height. When every
+   group gates out the TOC hides and .no-toc drops the rule with it. */
+.vela-sd-struct{display:flex;align-items:flex-start;padding-top:14px;}
+.vela-sd-toc{position:sticky;top:0;flex:0 0 auto;min-width:104px;display:flex;flex-direction:column;gap:2px;padding:2px 14px 0 0;}
+.vela-sd-struct>[data-sd-rows-host]{border-left:1px solid var(--vela-border);padding-left:18px;}
+.vela-sd-struct.no-toc>[data-sd-rows-host]{border-left:none;padding-left:0;}
+.vela-sd-toc-btn{text-align:left;padding:6px 10px;background:transparent;border:none;border-radius:var(--vela-radius-sm);color:var(--vela-fg-muted);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:background var(--vela-dur-fast) ease,color var(--vela-dur-fast) ease;}
+.vela-sd-toc-btn:hover{background:var(--vela-hover);color:var(--vela-fg-bright);}
+.vela-sd-toc-btn.on{background:var(--vela-active);color:var(--vela-fg-bright);}
+/* Soft-disable: a subsection's enableKey is off \u2014 rows stay visible (browseable) but
+   muted and non-interactive. Applied to each row's children so it survives display:contents;
+   !important beats the inline opacity on labels. */
+.vela-sd-soft>*{opacity:0.4 !important;pointer-events:none !important;}
+/* \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);
 }
@@ -16270,8 +17026,14 @@ var SettingsDialog = class {
     this.themeControl = null;
     /** The built tabs, by title — how `showSection` reaches a pane while the dialog is open. */
     this.tabs = [];
+    /** Active instance-strip tab per chart type — remembered across dialog rebuilds. */
+    this.typeActiveInstance = /* @__PURE__ */ new Map();
+    /** Active TOC group per structured pane (`<typeId>/<pane>` → group label). */
+    this.typeActiveGroup = /* @__PURE__ */ new Map();
     /** The tab currently shown, so a theme change (which rebuilds) lands back on it. */
     this.activeSection = null;
+    /** 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. */
@@ -16290,15 +17052,27 @@ var SettingsDialog = class {
   }
   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;
@@ -16320,18 +17094,37 @@ var SettingsDialog = class {
     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);
@@ -16339,8 +17132,8 @@ var SettingsDialog = class {
     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;
@@ -16431,6 +17224,29 @@ var SettingsDialog = class {
     baseline.append(this.numberRow("Width", config.baseline.width, 1, 10, 1, (v) => this.emit({ baseline: { width: v } })));
     groups.baseline = baseline;
     body.append(baseline);
+    for (const def of chartTypes()) {
+      if (!hasOwnCandlePaint(def.id)) continue;
+      const bag = config.chartTypes[def.id] ?? {};
+      const colorOf2 = (key, shared) => typeof bag[key] === "string" && bag[key] !== "" ? bag[key] : shared;
+      const boolOf = (key, shared) => typeof bag[key] === "boolean" ? bag[key] : shared;
+      const g = this.group();
+      g.append(this.sectionTitle("Candles"));
+      g.append(this.toggleRow("Body", boolOf("candleBodyVisible", config.candles.bodyVisible), (v) => this.emitType(def.id, "candleBodyVisible", v), [
+        this.swatch(colorOf2("candleUpColor", config.candles.upColor), (v) => this.emitType(def.id, "candleUpColor", v)),
+        this.swatch(colorOf2("candleDownColor", config.candles.downColor), (v) => this.emitType(def.id, "candleDownColor", v))
+      ]));
+      g.append(this.toggleRow("Borders", boolOf("candleBorderVisible", config.candles.borderVisible), (v) => this.emitType(def.id, "candleBorderVisible", v), [
+        this.swatch(colorOf2("candleBorderUpColor", config.candles.borderUpColor), (v) => this.emitType(def.id, "candleBorderUpColor", v)),
+        this.swatch(colorOf2("candleBorderDownColor", config.candles.borderDownColor), (v) => this.emitType(def.id, "candleBorderDownColor", v))
+      ]));
+      g.append(this.toggleRow("Wick", boolOf("candleWickVisible", config.candles.wickVisible), (v) => this.emitType(def.id, "candleWickVisible", v), [
+        this.swatch(colorOf2("candleWickUpColor", config.candles.wickUpColor), (v) => this.emitType(def.id, "candleWickUpColor", v)),
+        this.swatch(colorOf2("candleWickDownColor", config.candles.wickDownColor), (v) => this.emitType(def.id, "candleWickDownColor", v))
+      ]));
+      g.append(this.numberRow("Spacing", config.series.spacing, 0.1, 10, 0.1, (v) => this.emit({ series: { spacing: v } })));
+      groups[def.id] = g;
+      body.append(g);
+    }
     showActive(config.series.style);
     body.append(this.sectionTitle("Time zone"));
     body.append(this.selectRowLabeled("Time zone", normalizeTimezone(config.timeScale.timezone), timezoneOptions(config.timeScale.timezone), (v) => this.emit({ timeScale: { timezone: v } })));
@@ -16445,7 +17261,16 @@ var SettingsDialog = class {
         }
       }
     };
+    const renderChartTypeSections = (placement) => {
+      for (const def of chartTypes()) {
+        const typeSettings = def.settings;
+        if (!typeSettings) continue;
+        if ((typeSettings.placement ?? "end") !== placement) continue;
+        this.chartTypeSection(def.id, typeSettings, config, body);
+      }
+    };
     renderHostSections("symbol");
+    renderChartTypeSections("after-symbol");
     renderHostSections("after-symbol");
     body.append(this.section("Scales and lines"));
     body.append(this.sectionTitle("Price scale"));
@@ -16486,35 +17311,27 @@ var SettingsDialog = class {
       body.append(this.sectionTitle("Theme"));
       body.append(this.selectRow("Color theme", tc.current === "dark" ? "Dark" : "Light", ["Dark", "Light"], (v) => tc.onSelect(v === "Dark" ? "dark" : "light")));
     }
-    for (const def of chartTypes()) {
-      const typeSettings = def.settings;
-      if (!typeSettings) continue;
-      const marker = this.section(typeSettings.title);
-      marker.dataset.sdStyle = def.id;
-      marker.dataset.sdVisibility = typeSettings.visibility ?? "active";
-      body.append(marker);
-      const values = config.chartTypes[def.id] ?? {};
-      for (const r of typeSettings.rows) {
-        const current2 = values[r.key];
-        if (r.kind === "toggle") {
-          body.append(this.boolRow(r.label, typeof current2 === "boolean" ? current2 : r.defval, (v) => this.emitType(def.id, r.key, v)));
-        } else if (r.kind === "number") {
-          body.append(this.numberRow(r.label, typeof current2 === "number" ? current2 : r.defval, r.min ?? 0, r.max ?? 1e6, r.step ?? 1, (v) => this.emitType(def.id, r.key, v)));
-        } else if (r.kind === "color") {
-          body.append(this.colorRow(r.label, typeof current2 === "string" ? current2 : r.defval, (v) => this.emitType(def.id, r.key, v)));
-        } else {
-          body.append(this.selectRow(r.label, typeof current2 === "string" ? current2 : r.defval, [...r.options], (v) => this.emitType(def.id, r.key, v)));
-        }
-      }
-    }
+    renderChartTypeSections("end");
     renderHostSections("end");
     const shell = document.createElement("div");
-    shell.style.cssText = "display:flex;min-height:360px;max-height:calc(70vh - 100px);flex:1 1 auto;";
+    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]) {
@@ -16525,7 +17342,7 @@ var SettingsDialog = class {
         const tab = document.createElement("button");
         tab.type = "button";
         tab.textContent = title;
-        tab.className = "vela-sd-tab";
+        tab.className = "vela-sd-tab" + (child.dataset.sdSub !== void 0 ? " vela-sd-tab-sub" : "");
         panes.push({ title, el, tab, style: child.dataset.sdStyle, visibility: child.dataset.sdVisibility });
         current = el;
         child.remove();
@@ -16549,6 +17366,10 @@ var SettingsDialog = class {
         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));
@@ -16556,19 +17377,28 @@ var SettingsDialog = class {
       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 = [];
@@ -16595,35 +17425,370 @@ var SettingsDialog = class {
     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";
@@ -16649,9 +17814,11 @@ var SettingsDialog = class {
     }
   }
   /** 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);
     });
@@ -16703,8 +17870,11 @@ var SettingsDialog = class {
   }
   /** 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";
@@ -16724,6 +17894,12 @@ var SettingsDialog = class {
       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";
@@ -16734,8 +17910,11 @@ var SettingsDialog = class {
     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", () => {
@@ -16743,6 +17922,13 @@ var SettingsDialog = class {
       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;
   }
@@ -16762,102 +17948,12 @@ var SettingsDialog = class {
     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;
@@ -16873,7 +17969,7 @@ var SettingsDialog = class {
     const { wrap } = this.row(label);
     const sel = document.createElement("select");
     sel.className = "vela-sd-select";
-    sel.style.cssText = "max-width:140px;flex:0 0 auto;";
+    sel.style.cssText = "max-width:200px;flex:0 0 auto;";
     for (const opt of options) {
       const o = document.createElement("option");
       o.value = opt;
@@ -16897,19 +17993,10 @@ var SettingsDialog = class {
     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);
@@ -17109,7 +18196,7 @@ var DrawingPainter = class {
       return;
     }
     if (d instanceof FixedRangeVolumeProfile) {
-      this.paintFixedRangeVp(ctx, d, proj);
+      this.paintFixedRangeVp(ctx, d, proj, theme);
       this.paintLabel(ctx, d, proj, theme);
       return;
     }
@@ -17602,7 +18689,7 @@ var DrawingPainter = class {
   /** 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;
@@ -17641,7 +18728,7 @@ var DrawingPainter = class {
     };
     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, {
@@ -18268,6 +19355,8 @@ function topDrawingAt(drawings, x, y, proj, tol = HIT_TOLERANCE) {
 // src/renderers/native/drawings/DrawingInteraction.ts
 var DRAG_SLOP2 = 3;
 var FREEHAND_SAMPLE_PX = 4;
+var ANGLE_SNAP_STEP = Math.PI / 4;
+var ANGLE_SNAP_TYPES = /* @__PURE__ */ new Set(["trendline", "ray", "extendedline", "infoline", "trendangle", "arrow"]);
 var DrawingInteraction = class {
   // magnet target for the ring
   constructor(deps) {
@@ -18308,6 +19397,27 @@ var DrawingInteraction = class {
     this.snapAt = changed ? { point: snapped, paneId } : null;
     return snapped;
   }
+  /** Resolve a pixel to a data point with the segment angle locked to 45° steps around
+   *  `pivot` (Shift held on a line tool). Works in PIXEL space — the user reasons about
+   *  the angle they see, not about time/price units. The magnet is bypassed: snapping
+   *  the result to a candle afterwards would break the exact angle just enforced. */
+  resolveAngleSnapped(pivot, paneId, x, y) {
+    const proj = this.deps.projector();
+    const px = proj.xOf(pivot.time);
+    const py = proj.yOf(pivot.price, paneId);
+    this.snapAt = null;
+    if (py == null) return proj.pxToPoint(x, y, paneId);
+    const r = Math.hypot(x - px, y - py);
+    if (r < 1) return proj.pxToPoint(x, y, paneId);
+    const angle = Math.round(Math.atan2(y - py, x - px) / ANGLE_SNAP_STEP) * ANGLE_SNAP_STEP;
+    return proj.pxToPoint(px + r * Math.cos(angle), py + r * Math.sin(angle), paneId);
+  }
+  /** The pivot the free endpoint angle-snaps around while placing `draft`, or null when
+   *  the tool is not a two-point segment (or no anchor is committed yet). */
+  placingPivot(draft) {
+    if (!ANGLE_SNAP_TYPES.has(draft.type)) return null;
+    return draft.anchors[draft.anchors.length - 1] ?? null;
+  }
   /** Should the drawing layer win this press (vs pan)? Armed/placing/pressed, or over a drawing/handle. */
   claim(x, y) {
     if (this.deps.activeTool() != null || this.state.kind !== "idle") return true;
@@ -18329,12 +19439,15 @@ var DrawingInteraction = class {
     return this.state.kind === "pressed" && this.state.moved ? this.state.id : null;
   }
   /** A press: place the next anchor, or grab a drawing/handle (resolved as click or drag on release).
-   *  `shift` over a drawing toggles it in/out of the selection (multi-select) instead of dragging. */
+   *  `shift` over a drawing toggles it in/out of the selection (multi-select) instead of dragging;
+   *  while placing a line tool it locks the segment angle to 45° steps. */
   down(x, y, mode = "off", shift = false) {
     const proj = this.deps.projector();
     if (this.state.kind === "placing") {
       if (this.state.draft.placementMode() !== "click") return;
-      this.state.draft.anchors.push(this.placementAnchor(this.state.draft, this.resolve(x, y, this.state.draft.paneId, mode)));
+      const pivot = shift ? this.placingPivot(this.state.draft) : null;
+      const point = pivot ? this.resolveAngleSnapped(pivot, this.state.draft.paneId, x, y) : this.resolve(x, y, this.state.draft.paneId, mode);
+      this.state.draft.anchors.push(this.placementAnchor(this.state.draft, point));
       if (this.state.draft.anchors.length >= this.state.need) this.finalize();
       else this.deps.changed();
       return;
@@ -18359,8 +19472,9 @@ var DrawingInteraction = class {
       this.state = { kind: "pressed", id: hit.id, handle, grab: proj.pxToPoint(x, y, hit.paneId), orig: cloneAnchors(hit), px: x, py: y, moved: false };
     }
   }
-  /** Pointer move: advance the placing ghost, or live-preview a drag once past the slop. */
-  move(x, y, mode = "off") {
+  /** Pointer move: advance the placing ghost, or live-preview a drag once past the slop.
+   *  `shift` on a line tool locks the segment angle to 45° steps (placing + handle drags). */
+  move(x, y, mode = "off", shift = false) {
     if (this.state.kind === "idle") {
       const tool = this.deps.activeTool();
       const had = this.snapAt != null;
@@ -18374,7 +19488,8 @@ var DrawingInteraction = class {
         this.captureFreehand(x, y);
         return;
       }
-      this.state.cursor = this.resolve(x, y, this.state.draft.paneId, mode);
+      const pivot = shift ? this.placingPivot(this.state.draft) : null;
+      this.state.cursor = pivot ? this.resolveAngleSnapped(pivot, this.state.draft.paneId, x, y) : this.resolve(x, y, this.state.draft.paneId, mode);
       this.deps.changed();
       return;
     }
@@ -18385,7 +19500,11 @@ var DrawingInteraction = class {
     this.state.moved = true;
     if (this.state.handle >= 0) {
       const a = d.anchors[this.state.handle];
-      if (a) applyFree(a, this.resolve(x, y, d.paneId, mode), d.anchorSchema().slots[this.state.handle]?.free ?? "both");
+      if (a) {
+        const pivot = shift && ANGLE_SNAP_TYPES.has(d.type) && d.anchors.length === 2 ? d.anchors[1 - this.state.handle] : void 0;
+        const point = pivot ? this.resolveAngleSnapped(pivot, d.paneId, x, y) : this.resolve(x, y, d.paneId, mode);
+        applyFree(a, point, d.anchorSchema().slots[this.state.handle]?.free ?? "both");
+      }
       d.constrainHandleDrag(this.state.handle);
     } else {
       const pt = this.deps.projector().pxToPoint(x, y, d.paneId);
@@ -18481,7 +19600,11 @@ var DrawingInteraction = class {
     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);
@@ -18554,11 +19677,11 @@ function applyFree(anchor, pt, free) {
 // 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;}
@@ -18577,7 +19700,10 @@ function ensureStyles3() {
 .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 {
@@ -18624,7 +19750,7 @@ var DrawingSettingsPopup = class {
    *  `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();
@@ -18650,7 +19776,14 @@ var DrawingSettingsPopup = class {
       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;
@@ -19118,14 +20251,15 @@ var DrawingSettingsPopup = class {
       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) => {
@@ -19305,7 +20439,8 @@ var DrawingSettingsPopup = class {
   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;
@@ -19321,6 +20456,10 @@ var DrawingSettingsPopup = class {
       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;
@@ -19333,9 +20472,11 @@ var DrawingSettingsPopup = class {
         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;
   }
@@ -19451,6 +20592,39 @@ var DrawingSettingsPopup = class {
     });
     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). */
@@ -19738,6 +20912,8 @@ var DrawingToolbar = class {
     this.eraserActive = false;
     this.stayBtn = null;
     this.stayActive = false;
+    this.syncBtn = null;
+    this.syncActive = false;
     this.collapseBtn = null;
     this.collapsed = false;
     this.visible = false;
@@ -19754,7 +20930,8 @@ var DrawingToolbar = class {
     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();
@@ -19852,6 +21029,10 @@ var DrawingToolbar = class {
     this.root.appendChild(this.makeMagnetCell());
     this.stayBtn = this.makeButton(STAY_ICON, "Stay in drawing mode", () => this.toggleStay());
     this.root.appendChild(this.stayBtn);
+    if (this.onDrawingsSync) {
+      this.syncBtn = this.makeButton(SYNC_ICON, "Sync drawings on all charts", () => this.toggleDrawingsSync());
+      this.root.appendChild(this.syncBtn);
+    }
     this.collapseBtn = this.makeButton(COLLAPSE_ICON, "Collapse toolbar", () => this.toggleCollapsed());
     this.collapseBtn.classList.add("vela-dtb-collapse");
     this.root.appendChild(this.collapseBtn);
@@ -19859,6 +21040,7 @@ var DrawingToolbar = class {
     this.paintEraser();
     this.paintMagnet();
     this.paintStay();
+    this.paintDrawingsSync();
     this.paintCollapse();
     this.highlight();
   }
@@ -19909,7 +21091,7 @@ var DrawingToolbar = class {
       cell.appendChild(arrow);
     }
     this.tipDisposers.push(
-      attachChromeTooltip(cell, { host: this.host, theme: () => this.theme, text: () => this.tipText.get(cell) ?? label, placement: "right", delayMs: 2e3 })
+      attachChromeTooltip(cell, { host: this.host, theme: () => this.theme, text: () => this.tipText.get(cell) ?? label, placement: "right" })
     );
     return { cell, icon: icon2, arrow };
   }
@@ -20019,6 +21201,23 @@ var DrawingToolbar = class {
     b.dataset.active = this.stayActive ? "1" : "";
     b.style.opacity = this.stayActive ? "1" : "0.5";
   }
+  /** Toggle drawings sync on/off and notify the host. */
+  toggleDrawingsSync() {
+    this.syncActive = !this.syncActive;
+    this.onDrawingsSync?.(this.syncActive);
+    this.paintDrawingsSync();
+  }
+  /** Reflect drawings sync externally (e.g. set through the API) without notifying back. */
+  setDrawingsSyncMode(on) {
+    this.syncActive = on;
+    this.paintDrawingsSync();
+  }
+  paintDrawingsSync() {
+    const b = this.syncBtn;
+    if (!b) return;
+    b.dataset.active = this.syncActive ? "1" : "";
+    b.style.opacity = this.syncActive ? "1" : "0.5";
+  }
   // ── flyout ──
   /** Create the positioned flyout panel anchored to a cell, register it as open, and start the
    *  outside-dismiss. Callers fill it with items. */
@@ -20178,6 +21377,8 @@ var DrawingToolbar = class {
     const type = this.lastUsed.get(group.id) ?? group.tools[0]?.type;
     const tool = group.tools.find((t) => t.type === type) ?? group.tools[0];
     iconBtn.innerHTML = hitHtml(tool?.icon ?? "");
+    const cell = this.groupCells.get(group.id);
+    if (cell) this.tipText.set(cell, tool?.label ?? group.label);
   }
   /** Reconcile active tints from state (armed group / open flyout / cursor / modes). Active is a
    *  `data-active` attribute the stylesheet paints — no inline background, so hover never sticks. */
@@ -20201,7 +21402,7 @@ var DrawingToolbar = class {
     this.tipText.set(btn, title);
     if (icon2) btn.innerHTML = hitHtml(icon2);
     this.tipDisposers.push(
-      attachChromeTooltip(btn, { host: this.host, theme: () => this.theme, text: () => this.tipText.get(btn) ?? title, placement: "right", delayMs: 2e3 })
+      attachChromeTooltip(btn, { host: this.host, theme: () => this.theme, text: () => this.tipText.get(btn) ?? title, placement: "right" })
     );
     btn.addEventListener("click", onClick);
     return btn;
@@ -20213,13 +21414,13 @@ var DrawingToolbar = class {
   }
 };
 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 = `
@@ -20267,6 +21468,7 @@ var COLLAPSE_ICON = icon("chevrons-left");
 var EXPAND_ICON = icon("chevrons-right");
 var MAGNET_ICON = icon("magnet");
 var STAY_ICON = icon("pen-lock");
+var SYNC_ICON = icon("pen-sync");
 var ERASER_ICON = icon("eraser");
 var ARROW_ICON2 = icon("chevron-right");
 var CHECK_ICON = icon("check");
@@ -20490,12 +21692,19 @@ var UserDrawingController = class {
     this.activeTool = null;
     // last-used style for the armed tool (seeds the placement ghost)
     this.intentCb = null;
+    /** Another chart's in-progress placement, mirrored here as a ghost (drawings sync). */
+    this.externalGhost = null;
+    /** Last draft fingerprint reported upstream — gates the per-render emission to actual changes. */
+    this.lastDraftKey = null;
     this.measure = new MeasureOverlay();
     // transient ruler — not a persistent drawing
     this.toolbarVisible = false;
     // 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. */
@@ -20554,12 +21763,26 @@ var UserDrawingController = class {
   }
   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);
@@ -20719,7 +21942,7 @@ var UserDrawingController = class {
     }
     this.interaction.down(x, y, snap, shift);
   }
-  pointerMove(x, y, snap = "off") {
+  pointerMove(x, y, snap = "off", shift = false) {
     if (this.eraserMode) {
       if (this.erasing) this.deleteAt(x, y);
       return;
@@ -20729,7 +21952,7 @@ var UserDrawingController = class {
       this.render();
       return;
     }
-    this.interaction.move(x, y, snap);
+    this.interaction.move(x, y, snap, shift);
     this.updateHover(x, y);
   }
   /** Track which drawing is hovered so its handles appear on hover (and only then). */
@@ -21115,6 +22338,8 @@ var UserDrawingController = class {
     this.layoutTextEditor();
     const ghost = this.interaction.ghost();
     if (ghost) this.painter.paintGhost(ctx, ghost, proj, this.deps.theme());
+    if (this.externalGhost) this.painter.paintGhost(ctx, this.externalGhost, proj, this.deps.theme());
+    this.emitDraft(ghost);
     const markers = this.interaction.placingMarkers(proj);
     if (markers) this.painter.paintHandles(ctx, markers);
     const m = this.interaction.snapMarker();
@@ -21176,6 +22401,15 @@ var UserDrawingController = class {
       }
     }, () => this.clearSelection());
   }
+  /** Report placement progress upstream (`draft` intent) so the drawings sync can
+   *  mirror the ghost live on linked charts. Called from every render; only actual
+   *  shape changes emit, and the end of a placement emits one `null`. */
+  emitDraft(ghost) {
+    const key = ghost ? JSON.stringify({ t: ghost.type, p: ghost.paneId, a: ghost.anchors, s: ghost.style, x: ghost.text }) : null;
+    if (key === this.lastDraftKey) return;
+    this.lastDraftKey = key;
+    this.intentCb?.({ kind: "draft", doc: ghost ? ghost.serialize() : null });
+  }
   emit(i) {
     if (i.kind === "create") {
       if (i.doc.text && i.doc.text.color === void 0) {
@@ -21424,7 +22658,7 @@ var LUXALGO_WORDMARK_SVG = '<svg viewBox="0 0 964 252" aria-hidden="true"><path
 
 // src/renderers/native/chrome/AttributionMark.ts
 var ATTRIBUTION_URL = "https://luxalgo.com/vela";
-var STYLE_ID5 = "vela-attribution-styles";
+var STYLE_ID6 = "vela-attribution-styles";
 var CSS = `
 .vela-attribution {
     text-decoration: none;
@@ -21470,12 +22704,28 @@ var CSS = `
     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;
@@ -21504,7 +22754,7 @@ function createCustomMark(doc, html, background) {
   return el;
 }
 function createAttributionMark(doc, background) {
-  ensureStyles5(doc);
+  ensureStyles6(doc);
   const a = doc.createElement("a");
   a.className = "vela-attribution";
   a.href = ATTRIBUTION_URL;
@@ -21530,6 +22780,174 @@ function createAttributionMark(doc, background) {
   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);
@@ -21698,12 +23116,13 @@ var AXIS_COL_W = AXIS_MERGED_W;
 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;
@@ -21719,10 +23138,10 @@ var SEPARATOR_HIT_PX = 4;
 var NativeRenderer = class {
   constructor(opts) {
     this.capabilities = NATIVE_CAPABILITIES;
-    // The app "chrome" surface (drawing toolbar + axis-scale gutters): background + text.
+    // The app "chrome" surface (drawing toolbar + in-chart dialogs): background + text.
     // Owned by the app theme alone (mount/setTheme) — config-level background/text edits
-    // (settings dialog, persisted configs) recolor only the plot, keeping the toolbar and
-    // scales on a consistent, always-readable surface.
+    // (settings dialog, persisted configs) recolor the plot AND the axis scales (see
+    // axisSurface), but never the toolbar/dialog chrome.
     this.surfaceBackground = DARK_THEME.background;
     this.surfaceTextColor = DARK_THEME.textColor;
     // the plot area (canvases + DOM overlays), inset to the right of the toolbar gutter
@@ -21755,8 +23174,12 @@ var NativeRenderer = class {
     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;
@@ -21866,6 +23289,8 @@ var NativeRenderer = class {
     // 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();
@@ -21876,6 +23301,7 @@ var NativeRenderer = class {
     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();
@@ -21883,7 +23309,7 @@ var NativeRenderer = class {
     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) => {
@@ -21922,6 +23348,7 @@ var NativeRenderer = class {
       this.candleDown = opts.downColor;
       this.scene.priceStyle = opts.priceStyle;
       this.scene.basePainting = basePaintingOf(opts.priceStyle);
+      this.scene.candleOverride = candleOverrideFor(opts.priceStyle, this.scene.style.chartTypes);
     }
     this.theme = this.deriveTheme(DARK_THEME);
   }
@@ -22055,6 +23482,11 @@ var NativeRenderer = class {
         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);
@@ -22143,6 +23575,8 @@ var NativeRenderer = class {
         return this.settingsEnabled;
       case "indicatorTitles":
         return this.indicatorTitlesOn;
+      case "indicatorValues":
+        return this.indicatorValuesOn;
       case "attribution":
         return this.attributionHtml ?? this.attributionEnabled;
       case "dialogHost":
@@ -22399,6 +23833,7 @@ var NativeRenderer = class {
       baselineLevel: next.baseline.baselineLevel
     };
     this.setPriceStyle(next.series.style);
+    this.scene.candleOverride = candleOverrideFor(this.scene.priceStyle, s.chartTypes);
     this.scene.baselineValue = next.series.baseline;
     this.coords.setPitchScale(next.series.spacing);
     this.coords.setViewport(this.clampViewport(this.coords.getViewport().barSpacing, this.coords.getViewport().rightOffset));
@@ -22478,7 +23913,10 @@ var NativeRenderer = class {
   /** 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
@@ -22504,7 +23942,7 @@ var NativeRenderer = class {
       (patch) => this.applyConfig(patch),
       (json) => this.applyConfig(json),
       () => {
-        if (this.factoryConfig) this.applyConfig(this.factoryConfig);
+        if (this.factoryConfig) this.applyConfig(factoryResetConfig(this.factoryConfig));
         this.settingsDialog?.close();
         this.openSettingsDialog();
       },
@@ -22567,11 +24005,18 @@ var NativeRenderer = class {
     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). */
@@ -22593,17 +24038,20 @@ var NativeRenderer = class {
     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;
@@ -22616,9 +24064,25 @@ var NativeRenderer = class {
     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");
   }
   /**
@@ -22705,10 +24169,16 @@ var NativeRenderer = class {
       borderColor: isDarkColor(this.surfaceBackground) ? DARK_THEME.borderColor : LIGHT_THEME.borderColor
     };
   }
+  /** The colors the axis-scale gutters (price + time) paint with: the LIVE chart background
+   *  (`layout.background`) and its contrast-corrected text, so the scales read as part of the
+   *  plot. Only the toolbar/dialog chrome stays on the stable app-theme surface. */
+  axisSurface() {
+    return { background: this.theme.background, textColor: this.theme.textColor };
+  }
   // ── lifecycle ──
   mount(container, theme) {
     this.mountContainer = container;
-    this.publishToolbarGutter();
+    this.publishGutters();
     this.theme = this.deriveTheme(theme);
     this.surfaceBackground = theme.background;
     this.surfaceTextColor = theme.textColor;
@@ -22763,6 +24233,9 @@ var NativeRenderer = class {
       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),
@@ -22780,7 +24253,7 @@ var NativeRenderer = class {
       drawingsDeleteAt: (x, y) => this.userDrawings?.deleteAt(x, y) ?? false,
       drawingsSnapMode: () => this.snapMode,
       drawingsPointerDown: (x, y, snap, shift) => this.userDrawings?.pointerDown(x, y, snap, shift),
-      drawingsPointerMove: (x, y, snap) => this.userDrawings?.pointerMove(x, y, snap),
+      drawingsPointerMove: (x, y, snap, shift) => this.userDrawings?.pointerMove(x, y, snap, shift),
       drawingsPointerUp: (x, y) => this.userDrawings?.pointerUp(x, y),
       drawingsCursor: (x, y) => this.userDrawings?.cursorAt(x, y) ?? null,
       drawingsDblClick: (x, y) => this.userDrawings?.dblClick(x, y) ?? false,
@@ -22809,6 +24282,14 @@ var NativeRenderer = class {
       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),
@@ -22821,10 +24302,13 @@ var NativeRenderer = class {
     });
     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 });
     });
@@ -23017,6 +24501,7 @@ var NativeRenderer = class {
     this.attributionEl?.remove();
     this.attributionEl = null;
     this.mountContainer?.style.removeProperty("--vela-toolbar-gutter");
+    this.mountContainer?.style.removeProperty("--vela-scale-gutter");
     this.mountContainer = null;
     this.wrapper?.remove();
   }
@@ -23185,6 +24670,7 @@ var NativeRenderer = class {
     const w = RIGHT_AXIS_W + AXIS_COL_W * this.maxOwnScaleColumns();
     if (w === this.rightAxisW) return false;
     this.rightAxisW = w;
+    this.publishGutters();
     if (this.coords.width > 0) this.syncSize();
     return true;
   }
@@ -23237,7 +24723,10 @@ var NativeRenderer = class {
     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;
@@ -23298,6 +24787,13 @@ var NativeRenderer = class {
     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
@@ -23344,12 +24840,31 @@ var NativeRenderer = class {
     if (style === this.scene.priceStyle) return;
     this.scene.priceStyle = style;
     this.scene.basePainting = basePaintingOf(style);
+    this.scene.candleOverride = candleOverrideFor(style, this.scene.style.chartTypes);
     for (const cb of this.priceStyleCbs) cb(style);
   }
   onRemoveIndicator(cb) {
     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);
@@ -23374,6 +24889,10 @@ var NativeRenderer = class {
     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);
@@ -23505,13 +25024,17 @@ var NativeRenderer = class {
         active = true;
       }
     }
-    this.coords.setViewport(this.clampViewport(barSpacing, rightOffset));
+    const clamped = this.clampViewport(barSpacing, rightOffset);
+    if (clamped.barSpacing !== barSpacing) this.targetBarSpacing = clamped.barSpacing;
+    if (this.scrollTargetRO != null && clamped.rightOffset !== rightOffset) this.scrollTargetRO = clamped.rightOffset;
+    this.coords.setViewport(clamped);
     this.computeScales();
     if (this.easeScales(dtMs)) active = true;
     if (this.easeLiveBar(dtMs)) active = true;
     this.skeletonClockMs += dtMs;
     this.paintData();
     this.crosshairLayer.render(this.scene, this.coords, this.theme, this.hoverSeparatorY, this.externalCrossPx());
+    this.updateLegendValues();
     this.emitViewportChange();
     return active;
   }
@@ -23576,7 +25099,7 @@ var NativeRenderer = class {
       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;
     }
@@ -23588,7 +25111,7 @@ var NativeRenderer = class {
     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) {
@@ -23605,7 +25128,7 @@ var NativeRenderer = class {
     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) {
@@ -23624,6 +25147,20 @@ var NativeRenderer = class {
     }
     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. */
@@ -23686,7 +25223,7 @@ var NativeRenderer = class {
    * 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;
@@ -23927,29 +25464,63 @@ var NativeRenderer = class {
   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)) {
@@ -23957,9 +25528,38 @@ var NativeRenderer = class {
       this.paintData();
     } else if (repaintsChrome(level) && this.paintedData) {
       this.chrome.prepare(this.scene, this.coords, this.theme);
-      this.chrome.render(this.scene, this.coords, this.theme, { background: this.surfaceBackground, textColor: this.surfaceTextColor });
+      this.chrome.render(this.scene, this.coords, this.theme, this.axisSurface());
     }
     this.crosshairLayer.render(this.scene, this.coords, this.theme, this.hoverSeparatorY, this.externalCrossPx());
+    if (!repaintsData(level) && this.paintedData) this.repaintCursorLayers();
+    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() {
@@ -23992,18 +25592,16 @@ var NativeRenderer = class {
       });
       const nowMs = typeof performance !== "undefined" ? performance.now() : Date.now();
       for (const l of this.extLayers) {
-        l.instance.render({
-          bars: this.scene.bars,
-          data: this.scene.nativeData.get(l.def.id),
-          settings: this.scene.nativeData.get(`${l.def.id}-settings`) ?? {},
-          pending: this.scene.nativePending.get(l.def.id) ?? [],
-          coords: this.coords,
-          scale: pane.scale,
-          bounds: pane.bounds,
-          theme: this.theme,
-          priceStyle: this.scene.priceStyle,
-          nowMs
-        });
+        const args = this.extLayerArgs(l.def.id, pane.scale, pane.bounds, nowMs);
+        l.instance.render(args);
+        if (l.def.id === this.scene.priceStyle && l.instance.modulateBase) {
+          const mod = l.instance.modulateBase(args);
+          if (mod) {
+            if (mod.candleBodyScale != null) this.backend.candleBodyScale = clamp012(mod.candleBodyScale) || 0.01;
+            if (mod.candleBodyAlpha != null) this.backend.candleBodyAlpha = clamp012(mod.candleBodyAlpha) * this.candleBodyAlpha;
+            if (mod.gridAlpha != null) this.backend.gridAlpha = clamp012(mod.gridAlpha);
+          }
+        }
         if (this.animZoom && l.instance.animating?.()) this.animator.start();
       }
     }
@@ -24013,7 +25611,7 @@ var NativeRenderer = class {
     if (easeLive && liveActual) this.bars[li] = { ...liveActual, high: this.liveEaseHigh, low: this.liveEaseLow, close: this.liveEaseClose };
     this.scene.drawingSlices = this.userDrawings?.prepareSlices(this.scene.orderedPanes().map((p) => p.id)) ?? /* @__PURE__ */ new Map();
     this.backend.render(this.scene, this.coords, this.theme);
-    this.chrome.render(this.scene, this.coords, this.theme, { background: this.surfaceBackground, textColor: this.surfaceTextColor });
+    this.chrome.render(this.scene, this.coords, this.theme, this.axisSurface());
     this.userDrawings?.render();
     if (easeLive && liveActual) this.bars[li] = liveActual;
     this.paintedData = true;
@@ -24083,7 +25681,7 @@ var NativeRenderer = class {
         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) {
@@ -24447,15 +26045,18 @@ var NativeRenderer = class {
   setToolbarGutter(px) {
     if (px === this.toolbarGutter) return;
     this.toolbarGutter = px;
-    this.publishToolbarGutter();
+    this.publishGutters();
     this.positionAttribution();
     this.syncSize();
   }
-  /** Publish the gutter on the mount container as `--vela-toolbar-gutter`, so host
-   *  overlays sharing that container (a status line, a custom legend) can anchor to
-   *  the plot's left edge without reaching into the renderer's DOM. */
-  publishToolbarGutter() {
+  /** Publish the gutters on the mount container as `--vela-toolbar-gutter` (left,
+   *  drawings toolbar) and `--vela-scale-gutter` (right, the full price-scale width
+   *  incl. merged own-scale columns), so host overlays sharing that container (a
+   *  status line, a watermark, a custom legend) can anchor to the plot's edges
+   *  without reaching into the renderer's DOM. */
+  publishGutters() {
     this.mountContainer?.style.setProperty("--vela-toolbar-gutter", `${this.toolbarGutter}px`);
+    this.mountContainer?.style.setProperty("--vela-scale-gutter", `${this.rightAxisW}px`);
   }
   /** The built-in mark, or the host's own when one is set. */
   buildAttributionEl() {
@@ -24525,7 +26126,13 @@ var NativeRenderer = class {
       this.fitContent();
       this.didInitialFit = true;
     }
-    this.scheduler.flushNow(4 /* Full */);
+    if (this.animator.active) {
+      this.computeScales();
+      this.paintData();
+      this.crosshairLayer.render(this.scene, this.coords, this.theme, this.hoverSeparatorY, this.externalCrossPx());
+    } else {
+      this.scheduler.flushNow(4 /* Full */);
+    }
   }
   applyBackground() {
     this.wrapper.style.background = this.theme.background;
@@ -24594,6 +26201,9 @@ function sanitizeHighlights(value) {
   }
   return out.sort((a, b) => a.from - b.from);
 }
+function clamp012(v) {
+  return Math.max(0, Math.min(1, v));
+}
 function isPriceStyle2(v) {
   return typeof v === "string" && priceStyleIds().includes(v);
 }
@@ -24763,7 +26373,8 @@ var VpvrIndicator = class {
 };
 var vpvrDescriptor = {
   type: "vpvr",
-  title: "VPVR",
+  title: "Visible Range Volume Profile",
+  shortTitle: "VRVP",
   paneHint: "price",
   overlay: true,
   inputsSchema: () => [
@@ -25261,6 +26872,7 @@ exports.iconMarkup = iconMarkup;
 exports.legendActions = legendActions;
 exports.nativeIndicatorDescriptors = nativeIndicatorDescriptors;
 exports.nativeIndicatorTypes = nativeIndicatorTypes;
+exports.normalizeSettingsRow = normalizeSettingsRow;
 exports.registerChartType = registerChartType;
 exports.registerDefaultEngine = registerDefaultEngine;
 exports.registerDrawingType = registerDrawingType;
@@ -25276,6 +26888,7 @@ exports.rendererDefaults = rendererDefaults;
 exports.rendererLayers = rendererLayers;
 exports.resolveEngines = resolveEngines;
 exports.resolveTheme = resolveTheme;
+exports.settingsRowValueKeys = settingsRowValueKeys;
 exports.sharedBarStore = sharedBarStore;
 exports.sidePanels = sidePanels;
 exports.stableSeriesId = stableSeriesId;