@luxalgo/vela 0.5.1 → 0.5.3

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"/>'));
@@ -1889,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,
@@ -1910,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,
@@ -7052,6 +7055,47 @@ 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];
@@ -7156,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). */
@@ -7218,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));
@@ -7706,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",
@@ -8177,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 },
@@ -8637,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.
@@ -8683,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
@@ -8748,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
@@ -9699,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();
@@ -9713,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();
   };
@@ -9789,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;
@@ -9817,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). */
@@ -9838,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") {
@@ -9864,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);
   }
@@ -9871,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) ?? [];
@@ -9898,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) {
@@ -9934,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();
@@ -9952,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) {
@@ -10003,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);
@@ -10024,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);
@@ -10060,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;
@@ -10076,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);
@@ -10102,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;
@@ -10117,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);
     });
@@ -10138,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;";
@@ -10154,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");
@@ -10162,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";
@@ -10179,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);
     }
@@ -10190,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);
@@ -10207,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. */
@@ -10226,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() {
@@ -10262,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
@@ -10276,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() {
@@ -10314,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();
@@ -10369,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();
@@ -10376,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";
@@ -10388,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");
@@ -10408,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);
@@ -10857,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;}
@@ -10874,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" },
@@ -11579,14 +11857,7 @@ function factoryResetConfig(factory) {
     const defaults2 = {};
     const addRows = (rows) => {
       for (const r of rows ?? []) {
-        if (r.kind === "heading" || r.kind === "header") continue;
-        if (r.kind === "range") {
-          defaults2[r.minKey] = r.defval;
-          defaults2[r.maxKey] = r.defval;
-          continue;
-        }
-        defaults2[r.key] = r.defval;
-        if (r.kind === "toggle") for (const c of r.colors ?? []) defaults2[c.key] = c.defval;
+        for (const k of settingsRowValueKeys(r)) defaults2[k.key] = k.defval;
       }
     };
     for (const inst of section.instances ?? []) {
@@ -13730,8 +14001,13 @@ 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;
+var WHEEL_ZOOM_K = 4e-3;
 function wheelZoomAnchor(coords, cursorX, rightEdge) {
   if (rightEdge) return { logical: coords.rightEdgeLogical, x: coords.width };
   return { logical: coords.xToLogical(cursorX), x: cursorX };
@@ -13750,6 +14026,12 @@ 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 {
   constructor(deps) {
     this.deps = deps;
@@ -13779,13 +14061,40 @@ var InputController = class {
     // smoothed pointer velocity, px/ms
     this.middleDeleted = false;
     // the last middle press deleted a drawing (suppress autoscroll/paste)
+    this.rightCancelled = false;
+    // the last right press cancelled a placement (suppress the context menu)
     // 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 right press that cancelled a placement must not ALSO open the host's chart
+     *  context menu — swallow its companion event before it bubbles to the host. */
+    this.onContextGuard = (e) => {
+      if (!this.rightCancelled) return;
+      this.rightCancelled = false;
+      e.preventDefault();
+      e.stopPropagation();
+    };
     /** 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). */
@@ -13802,8 +14111,22 @@ var InputController = class {
         if (this.middleDeleted) e.preventDefault();
         return;
       }
+      if (e.button === 2) {
+        this.rightCancelled = this.deps.drawingsCancelPlacement?.() ?? false;
+        if (this.rightCancelled) e.preventDefault();
+        return;
+      }
       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;
@@ -13829,6 +14152,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;
@@ -13838,28 +14164,42 @@ var InputController = class {
       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;
+          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;
@@ -13876,14 +14216,44 @@ var InputController = class {
         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), 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;
@@ -13892,11 +14262,20 @@ 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;
@@ -13905,12 +14284,7 @@ var InputController = class {
     };
     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();
@@ -13931,17 +14305,26 @@ 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);
+    el.addEventListener("contextmenu", this.onContextGuard);
     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;
@@ -13949,14 +14332,19 @@ var InputController = class {
     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);
+    el.removeEventListener("contextmenu", this.onContextGuard);
+    this.cancelLongPress();
+    this.touches.clear();
     this.el = null;
   }
   local(e) {
@@ -13980,6 +14368,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) {
@@ -13988,6 +14429,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
@@ -15545,8 +16015,11 @@ var ChromeRenderer = class {
     }
     ctx.font = `${scene.style.fontSize}px ${theme.fontFamily}`;
     ctx.textBaseline = "middle";
-    if (coords.barCount === 0) return;
     const panes = scene.orderedPanes();
+    if (coords.barCount === 0) {
+      this.drawPaneSeparators(ctx, scene, theme, fullW, panes);
+      return;
+    }
     const pricePane = panes.find((p) => p.kind === "price") ?? null;
     for (const pane of panes) {
       if (pane.collapsed) continue;
@@ -15801,11 +16274,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";
   }
 };
@@ -15907,10 +16388,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;
@@ -15934,7 +16415,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
@@ -16295,6 +16789,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) {
@@ -16330,6 +16825,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",
@@ -16412,6 +17002,30 @@ function ensureControlStyles() {
    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);
 }
@@ -16438,6 +17052,8 @@ var SettingsDialog = class {
     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. */
@@ -16456,15 +17072,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;
@@ -16486,18 +17114,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);
@@ -16505,8 +17152,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;
@@ -16687,12 +17334,24 @@ var SettingsDialog = class {
     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]) {
@@ -16727,6 +17386,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));
@@ -16734,10 +17397,11 @@ 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);
@@ -16754,6 +17418,7 @@ var SettingsDialog = class {
   }
   close() {
     closeColorPopover();
+    closeWidthPopover();
     this.root?.remove();
     this.root = null;
     this.tabs = [];
@@ -16794,20 +17459,12 @@ var SettingsDialog = class {
     body.append(marker);
     const values = config.chartTypes[typeId] ?? {};
     const bag = {};
-    const seedKey = (key, want, defval) => {
-      const v = values[key];
-      bag[key] = typeof v === want ? v : defval;
-    };
     const seed = (rows) => {
       for (const r of rows) {
-        if (r.kind === "heading" || r.kind === "header") continue;
-        if (r.kind === "range") {
-          seedKey(r.minKey, "number", r.defval);
-          seedKey(r.maxKey, "number", r.defval);
-          continue;
+        for (const k of settingsRowValueKeys(r)) {
+          const v = values[k.key];
+          bag[k.key] = typeof v === k.type ? v : k.defval;
         }
-        seedKey(r.key, r.kind === "toggle" ? "boolean" : r.kind === "number" ? "number" : "string", r.defval);
-        if (r.kind === "toggle") for (const c of r.colors ?? []) seedKey(c.key, "string", c.defval);
       }
     };
     if (section.rows) seed(section.rows);
@@ -16830,7 +17487,8 @@ var SettingsDialog = class {
     if (section.instances && section.instances.length > 0) {
       body.append(this.instancesBlock(typeId, section.instances, bag, put, refreshers));
     } else if (section.rows) {
-      this.flatTypeRows(section.rows, bag, put, refreshers, body);
+      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);
@@ -16847,7 +17505,7 @@ var SettingsDialog = class {
   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);
+      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);
     }
@@ -16855,60 +17513,109 @@ var SettingsDialog = class {
       for (const e of entries) e.el.classList.toggle("vela-sd-hide", !settingsRowVisible(e.when, bag));
     });
   }
-  /** One value row for a chart-type descriptor, writing through `put`. */
-  typeRow(r, bag, put) {
-    if (r.kind === "toggle") {
-      const swatches = (r.colors ?? []).map((c) => {
-        const sw = this.swatch(bag[c.key], (v) => put(c.key, v));
-        sw.title = c.label;
-        return sw;
-      });
-      return this.toggleRow(r.label, bag[r.key], (v) => put(r.key, v), swatches);
+  /**
+   * 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 (r.kind === "number") return this.numberRow(r.label, bag[r.key], r.min ?? 0, r.max ?? 1e6, r.step ?? 1, (v) => put(r.key, v));
-    if (r.kind === "color") return this.colorRow(r.label, bag[r.key], (v) => put(r.key, v));
-    if (r.kind === "range") return this.rangeRow(r, bag, put);
-    return this.selectRowLabeled(r.label, bag[r.key], normalizeSelectOptions(r.options), (v) => put(r.key, v));
+    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);
   }
   /**
-   * A MIN–MAX row: two number inputs on one row (stored under the descriptor's
-   * `minKey`/`maxKey`). With a `placeholder`, an input at the DEFAULT value renders
-   * empty showing it, and clearing an input stores the default back — the
-   * placeholder names the unset state ('Off' for 0-disables bounds).
+   * 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.
    */
-  rangeRow(r, bag, put) {
-    const { wrap } = this.row(r.label);
-    const input = (key, title) => {
-      const ni = document.createElement("input");
-      ni.type = "number";
-      ni.className = "vela-sd-number";
-      ni.min = String(r.min ?? 0);
-      ni.max = String(r.max ?? 1e6);
-      ni.step = String(r.step ?? 1);
-      ni.title = title;
-      const current = bag[key];
-      if (r.placeholder !== void 0) {
-        ni.placeholder = r.placeholder;
-        if (current !== r.defval) ni.value = String(current);
-      } else {
-        ni.value = String(current);
+  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() === "" ? r.defval : Number(ni.value);
-        const v = Number.isFinite(raw) ? Math.min(r.max ?? Infinity, Math.max(r.min ?? -Infinity, raw)) : r.defval;
-        ni.value = r.placeholder !== void 0 && v === r.defval ? "" : String(v);
-        put(key, v);
+        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);
       });
-      return ni;
-    };
-    const box = document.createElement("div");
-    box.style.cssText = "display:flex;align-items:center;gap:6px;flex:0 0 auto;";
-    const dash = document.createElement("span");
-    dash.textContent = "\u2013";
-    dash.style.cssText = "color:var(--vela-fg-muted);";
-    box.append(input(r.minKey, `${r.label} \u2014 min`), dash, input(r.maxKey, `${r.label} \u2014 max`));
-    wrap.appendChild(box);
-    return wrap;
+    } 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
@@ -16921,7 +17628,7 @@ var SettingsDialog = class {
     const wrap = document.createElement("div");
     const strip = document.createElement("div");
     strip.className = "vela-sd-itabs";
-    wrap.append(strip);
+    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);
@@ -17016,8 +17723,8 @@ var SettingsDialog = class {
         rowsHost.append(entries[entries.length - 1].el);
         continue;
       }
-      const el = this.typeRow(r, bag, put);
-      const key = r.kind === "range" ? void 0 : r.key;
+      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);
     }
@@ -17083,6 +17790,14 @@ var SettingsDialog = class {
    */
   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;";
@@ -17119,9 +17834,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);
     });
@@ -17173,8 +17890,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";
@@ -17194,6 +17914,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";
@@ -17204,8 +17930,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", () => {
@@ -17213,6 +17942,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;
   }
@@ -17232,96 +17968,6 @@ 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);
@@ -17367,19 +18013,7 @@ 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);
 }
@@ -17582,7 +18216,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;
     }
@@ -18075,7 +18709,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;
@@ -18114,7 +18748,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, {
@@ -18986,7 +19620,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);
@@ -19059,11 +19697,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;}
@@ -19082,7 +19720,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 {
@@ -19129,7 +19770,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();
@@ -19155,7 +19796,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;
@@ -19623,14 +20271,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) => {
@@ -19810,7 +20459,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;
@@ -19826,6 +20476,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;
@@ -19838,9 +20492,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;
   }
@@ -19956,6 +20612,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). */
@@ -20262,7 +20951,7 @@ var DrawingToolbar = class {
     this.onCollapse = options.onCollapse ?? (() => {
     });
     this.onDrawingsSync = options.onDrawingsSync ?? null;
-    ensureStyles4();
+    ensureStyles5();
     this.root = document.createElement("div");
     this.root.className = "vela-dtb";
     this.styleRoot();
@@ -20745,13 +21434,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 = `
@@ -21033,6 +21722,9 @@ var UserDrawingController = class {
     // 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. */
@@ -21091,12 +21783,21 @@ 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) {
@@ -21476,6 +22177,16 @@ var UserDrawingController = class {
     if (this.eraserMode) return "pointer";
     return this.interaction.cursorAt(x, y);
   }
+  /** Right-click while placing: cancel the in-progress drawing and revert to the
+   *  pointer — the gesture is an explicit escape, so it disarms even in
+   *  stay-in-drawing-mode (where Escape would leave the tool armed). Returns whether
+   *  the press was consumed; false lets the host's context menu open normally. */
+  cancelPlacement() {
+    if (!this.interaction.isPlacing()) return false;
+    this.interaction.cancel();
+    if (this.activeTool != null) this.emit({ kind: "arm", type: null });
+    return true;
+  }
   /** Double-click over a drawing → suppress the chart's view reset (single-click already
    *  opens settings). Returns true only when a drawing is under the cursor. */
   dblClick(x, y) {
@@ -21960,6 +22671,20 @@ var VolumeRenderer = class {
 };
 
 // src/renderers/native/layers.ts
+function foldBaseModulation(acc, next) {
+  if (next == null) return acc;
+  if (acc == null) return { ...next };
+  return {
+    candleBodyScale: minOpt(acc.candleBodyScale, next.candleBodyScale),
+    candleBodyAlpha: minOpt(acc.candleBodyAlpha, next.candleBodyAlpha),
+    gridAlpha: minOpt(acc.gridAlpha, next.gridAlpha)
+  };
+}
+function minOpt(a, b) {
+  if (a == null) return b;
+  if (b == null) return a;
+  return Math.min(a, b);
+}
 var registry3 = /* @__PURE__ */ new Map();
 function registerRendererLayer(def) {
   registry3.set(def.id, def);
@@ -21977,7 +22702,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;
@@ -22023,12 +22748,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;
@@ -22057,7 +22798,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;
@@ -22083,6 +22824,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);
@@ -22251,12 +23160,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;
@@ -22308,8 +23218,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;
@@ -22414,11 +23328,13 @@ var NativeRenderer = class {
     this.scrollTargetRO = null;
     // eased rightOffset target while gliding back to the latest bars
     // Distance (px) from the plot's bottom edge to the button — tracks the bottom-most EXPANDED
-    // pane like the watermark: when the lower sub-panes collapse it rides up into the open pane.
+    // pane: when the lower sub-panes collapse it rides up into the open pane.
     this.scrollBtnBottomPx = SCROLL_BTN_BOTTOM;
     // 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();
@@ -22429,6 +23345,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();
@@ -22436,7 +23353,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) => {
@@ -22609,6 +23526,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);
@@ -22697,6 +23619,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":
@@ -23033,7 +23957,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
@@ -23122,11 +24049,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). */
@@ -23148,17 +24082,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;
@@ -23171,9 +24108,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");
   }
   /**
@@ -23324,6 +24277,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),
@@ -23339,6 +24295,7 @@ var NativeRenderer = class {
       drawingsClaim: (x, y) => this.userDrawings?.claim(x, y) ?? false,
       drawingsMeasureStart: (x, y) => this.userDrawings?.beginMeasureAt(x, y) ?? false,
       drawingsDeleteAt: (x, y) => this.userDrawings?.deleteAt(x, y) ?? false,
+      drawingsCancelPlacement: () => this.userDrawings?.cancelPlacement() ?? false,
       drawingsSnapMode: () => this.snapMode,
       drawingsPointerDown: (x, y, snap, shift) => this.userDrawings?.pointerDown(x, y, snap, shift),
       drawingsPointerMove: (x, y, snap, shift) => this.userDrawings?.pointerMove(x, y, snap, shift),
@@ -23370,6 +24327,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),
@@ -23382,10 +24347,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 });
     });
@@ -23579,6 +24547,8 @@ var NativeRenderer = class {
     this.attributionEl = null;
     this.mountContainer?.style.removeProperty("--vela-toolbar-gutter");
     this.mountContainer?.style.removeProperty("--vela-scale-gutter");
+    this.mountContainer?.style.removeProperty("--vela-price-pane-top");
+    this.mountContainer?.style.removeProperty("--vela-price-pane-bottom");
     this.mountContainer = null;
     this.wrapper?.remove();
   }
@@ -23800,7 +24770,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;
@@ -23861,6 +24834,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
@@ -23914,6 +24894,24 @@ var NativeRenderer = class {
     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);
@@ -23938,6 +24936,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);
@@ -24079,6 +25081,7 @@ var NativeRenderer = class {
     this.skeletonClockMs += dtMs;
     this.paintData();
     this.crosshairLayer.render(this.scene, this.coords, this.theme, this.hoverSeparatorY, this.externalCrossPx());
+    this.updateLegendValues();
     this.emitViewportChange();
     return active;
   }
@@ -24143,7 +25146,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;
     }
@@ -24155,7 +25158,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) {
@@ -24172,7 +25175,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) {
@@ -24191,6 +25194,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. */
@@ -24253,7 +25270,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;
@@ -24494,29 +25511,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)) {
@@ -24528,6 +25579,7 @@ var NativeRenderer = class {
     }
     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() {
@@ -24586,19 +25638,18 @@ var NativeRenderer = class {
         theme: this.theme
       });
       const nowMs = typeof performance !== "undefined" ? performance.now() : Date.now();
+      let folded = null;
       for (const l of this.extLayers) {
         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);
-          }
-        }
+        folded = foldBaseModulation(folded, l.instance.modulateBase?.(args) ?? null);
         if (this.animZoom && l.instance.animating?.()) this.animator.start();
       }
+      if (folded) {
+        if (folded.candleBodyScale != null) this.backend.candleBodyScale = clamp012(folded.candleBodyScale) || 0.01;
+        if (folded.candleBodyAlpha != null) this.backend.candleBodyAlpha = clamp012(folded.candleBodyAlpha) * this.candleBodyAlpha;
+        if (folded.gridAlpha != null) this.backend.gridAlpha = clamp012(folded.gridAlpha);
+      }
     }
     const li = this.bars.length - 1;
     const liveActual = li >= 0 ? this.bars[li] : void 0;
@@ -24676,7 +25727,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) {
@@ -24990,6 +26041,7 @@ var NativeRenderer = class {
       this.paneControls?.reposition();
       this.repositionScrollButton();
       this.positionAttribution();
+      this.publishPricePaneBounds();
       return;
     }
     const collapsed = panes.filter((p) => p.collapsed);
@@ -25007,9 +26059,10 @@ var NativeRenderer = class {
     this.paneControls?.reposition();
     this.repositionScrollButton();
     this.positionAttribution();
+    this.publishPricePaneBounds();
   }
-  /** Pin the scroll-to-realtime button above the bottom-most EXPANDED pane's data area (like the
-   *  watermark): with all lower sub-panes collapsed it settles into the lowest open pane. */
+  /** Pin the scroll-to-realtime button above the bottom-most EXPANDED pane's data area:
+   *  with all lower sub-panes collapsed it settles into the lowest open pane. */
   repositionScrollButton() {
     const dataHeight = this.coords.height;
     if (dataHeight <= 0) return;
@@ -25053,6 +26106,21 @@ var NativeRenderer = class {
     this.mountContainer?.style.setProperty("--vela-toolbar-gutter", `${this.toolbarGutter}px`);
     this.mountContainer?.style.setProperty("--vela-scale-gutter", `${this.rightAxisW}px`);
   }
+  /** Publish the price pane's vertical insets as `--vela-price-pane-top` /
+   *  `--vela-price-pane-bottom` on the mount container, so the symbol watermark
+   *  (and any other host overlay) can clip to the price pane instead of spanning
+   *  study panes and the time axis. A maximized study pane collapses the box to
+   *  zero height — the mark does not appear on a study. */
+  publishPricePaneBounds() {
+    if (!this.mountContainer) return;
+    const plotH = this.coords.height + TIME_AXIS_H;
+    const price = this.scene.panes.get(PRICE_PANE_ID);
+    const top = price ? price.bounds.top : 0;
+    const height = price ? price.bounds.height : this.coords.height;
+    const bottom = Math.max(0, plotH - (top + height));
+    this.mountContainer.style.setProperty("--vela-price-pane-top", `${top}px`);
+    this.mountContainer.style.setProperty("--vela-price-pane-bottom", `${bottom}px`);
+  }
   /** The built-in mark, or the host's own when one is set. */
   buildAttributionEl() {
     return this.attributionHtml !== null ? createCustomMark(document, this.attributionHtml, this.theme.background) : createAttributionMark(document, this.theme.background);
@@ -25368,7 +26436,8 @@ var VpvrIndicator = class {
 };
 var vpvrDescriptor = {
   type: "vpvr",
-  title: "VPVR",
+  title: "Visible Range Volume Profile",
+  shortTitle: "VRVP",
   paneHint: "price",
   overlay: true,
   inputsSchema: () => [
@@ -25866,6 +26935,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;
@@ -25881,6 +26951,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;